diff --git a/docs-site/index.html b/docs-site/index.html index e551428cc7..b70a3b16aa 100644 --- a/docs-site/index.html +++ b/docs-site/index.html @@ -27,6 +27,6 @@
- + diff --git a/docs-site/package.json b/docs-site/package.json index d047972a80..4a020b5be5 100644 --- a/docs-site/package.json +++ b/docs-site/package.json @@ -4,7 +4,9 @@ "private": true, "type": "module", "dependencies": { + "copy-to-clipboard": "^3.3.3", "date-fns": "^4.1.0", + "esbuild-wasm": "^0.25.9", "highlight.js": "^11.11.1", "lodash": "^4.17.21", "prism-react-renderer": "^2.4.1", @@ -16,14 +18,18 @@ }, "scripts": { "start": "vite", - "build": "vite build", + "build": "tsc && vite build", "lint": "eslint .", - "preview": "vite preview" + "preview": "vite preview", + "type-check": "tsc --noEmit" }, "devDependencies": { "@eslint/js": "^9.35.0", + "@types/lodash": "^4.17.0", "@types/react": "^19.1.13", "@types/react-dom": "^19.1.9", + "@typescript-eslint/eslint-plugin": "^7.0.0", + "@typescript-eslint/parser": "^7.0.0", "@vitejs/plugin-react": "^5.0.3", "eslint": "^9.35.0", "eslint-plugin-react": "^7.37.5", @@ -31,6 +37,7 @@ "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.4.0", "sass": "^1.92.1", + "typescript": "^5.7.2", "vite": "^7.1.6" }, "packageManager": "yarn@4.9.2" diff --git a/docs-site/src/components/App/Toast.tsx b/docs-site/src/components/App/Toast.tsx new file mode 100644 index 0000000000..bfffb96dc9 --- /dev/null +++ b/docs-site/src/components/App/Toast.tsx @@ -0,0 +1,61 @@ +import React, { useState, useEffect, useRef } from "react"; +import { createPortal } from "react-dom"; + +import "./toast.scss"; + +type ToastType = "success" | "error"; + +let showToastFn: ((message: string, type: ToastType) => void) | null; + +export const toast = { + show: (message: string, type: ToastType) => { + if (showToastFn) { + showToastFn(message, type); + } + }, +}; + +const Toast = (): React.ReactPortal | null => { + const [toastMeta, setToastMeta] = useState<{ + message: string; + type?: ToastType; + }>({ + message: "", + }); + const timerRef = useRef | null>(null); + + const clearTimer = () => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + }; + + const scheduleToastReset = () => { + clearTimer(); + timerRef.current = setTimeout(() => { + setToastMeta({ message: "" }); + }, 3000); + }; + + useEffect(() => { + showToastFn = (message: string, type: ToastType) => { + setToastMeta({ message, type }); + scheduleToastReset(); + }; + + return () => { + clearTimer(); + showToastFn = null; + }; + }, []); + + const { message, type } = toastMeta; + if (!message?.trim()) return null; + + return createPortal( +
{message}
, + document.body, + ); +}; + +export default Toast; diff --git a/docs-site/src/components/App/index.jsx b/docs-site/src/components/App/index.tsx similarity index 85% rename from docs-site/src/components/App/index.jsx rename to docs-site/src/components/App/index.tsx index 4ce3c01eae..1abdf97b8a 100644 --- a/docs-site/src/components/App/index.jsx +++ b/docs-site/src/components/App/index.tsx @@ -1,18 +1,22 @@ import { useEffect, useState } from "react"; import DatePicker from "react-datepicker"; import ExampleComponents from "../Examples"; +import Toast from "./Toast"; +import { initializeTsxTransformer } from "../tsxTransformer"; import logo from "./logo.png"; import ribbon from "./ribbon.png"; -const Example = () => { - const [isOpen, setIsOpen] = useState(true); - const [startDate, setStartDate] = useState(new Date()); - const [isScrolled, setIsScrolled] = useState(true); +const Example: React.FC = () => { + const [isOpen, setIsOpen] = useState(true); + const [startDate, setStartDate] = useState(new Date()); + const [isScrolled, setIsScrolled] = useState(true); useEffect(() => { - const handleScroll = () => setIsScrolled(window.scrollY < 400); + const handleScroll = (): void => setIsScrolled(window.scrollY < 400); document.addEventListener("scroll", handleScroll); + initializeTsxTransformer(); + return () => { document.removeEventListener("scroll", handleScroll); }; @@ -22,7 +26,7 @@ const Example = () => { { + onChange={(date: Date | null) => { setStartDate(date); setIsOpen(false); }} @@ -31,7 +35,7 @@ const Example = () => { ); }; -const Root = () => ( +const Root: React.FC = () => (
@@ -107,6 +111,8 @@ const Root = () => ( Fork me on GitHub + +
); diff --git a/docs-site/src/components/App/toast.scss b/docs-site/src/components/App/toast.scss new file mode 100644 index 0000000000..138fbe3185 --- /dev/null +++ b/docs-site/src/components/App/toast.scss @@ -0,0 +1,27 @@ +$toast-success-color: #009688; +$toast-error-color: #ef5350; + +.toast { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + + display: inline-block; + color: #fff; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); + border-radius: 5px; + padding: 10px 20px; + font-size: 14px; + font-weight: 600; + text-align: center; + z-index: 1000; + + &--success { + background-color: $toast-success-color; + } + + &--error { + background-color: $toast-error-color; + } +} diff --git a/docs-site/src/components/Example/copy.svg b/docs-site/src/components/Example/copy.svg new file mode 100644 index 0000000000..f07ad9ecd4 --- /dev/null +++ b/docs-site/src/components/Example/copy.svg @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/docs-site/src/components/Example/index.jsx b/docs-site/src/components/Example/index.jsx deleted file mode 100644 index 91e9829809..0000000000 --- a/docs-site/src/components/Example/index.jsx +++ /dev/null @@ -1,66 +0,0 @@ -import React, { forwardRef, useMemo, useState } from "react"; -import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"; -import DatePicker, { - registerLocale, - CalendarContainer, -} from "react-datepicker"; -import * as DateFNS from "date-fns"; -import { fi } from "date-fns/locale/fi"; -import { ptBR } from "date-fns/locale/pt-BR"; -import { enGB } from "date-fns/locale/en-GB"; -import slugify from "slugify"; -import range from "lodash/range"; -import { themes } from "prism-react-renderer"; -import editIcon from "./edit-regular.svg"; - -export default class CodeExampleComponent extends React.Component { - componentDidMount() { - registerLocale("fi", fi); - registerLocale("pt-BR", ptBR); - registerLocale("en-GB", enGB); - } - - render() { - const { title, description, component } = this.props.example; - return ( -
-

{title}

- {description &&

{description}

} -
- - 
-              edit icon
-              
-
-
- - -
- -
-
- ); - } -} diff --git a/docs-site/src/components/Example/index.tsx b/docs-site/src/components/Example/index.tsx new file mode 100644 index 0000000000..18769279a1 --- /dev/null +++ b/docs-site/src/components/Example/index.tsx @@ -0,0 +1,210 @@ +import React, { forwardRef, useMemo, useState } from "react"; +import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live"; +import DatePicker, { + registerLocale, + CalendarContainer, +} from "react-datepicker"; +import { toast } from "../App/Toast"; +import { transformTsx } from "../tsxTransformer"; +import * as DateFNS from "date-fns"; +import { fi } from "date-fns/locale/fi"; +import { ptBR } from "date-fns/locale/pt-BR"; +import { enGB } from "date-fns/locale/en-GB"; +import copy from "copy-to-clipboard"; +import { debounce } from "lodash"; +import slugify from "slugify"; +import range from "lodash/range"; +import { themes } from "prism-react-renderer"; +import copyIcon from "./copy.svg"; +import editIcon from "./edit-regular.svg"; +import { IExampleConfig } from "../../types"; + +type TState = { + activeTab: "js" | "ts"; + isTranspiling: boolean; + tsxCode: string; + jsxCode: string; +}; + +type TProps = { + example: IExampleConfig; +}; + +export default class CodeExampleComponent extends React.Component< + TProps, + TState +> { + state: TState = { + activeTab: "ts", + isTranspiling: false, + tsxCode: "", + jsxCode: "", + }; + + tsCodeRef = React.createRef(); + lastTranspiledTsCodeRef = React.createRef(); + + constructor(props: TProps) { + super(props); + + const { component } = props.example; + this.state = { + activeTab: "ts", + isTranspiling: false, + tsxCode: component.trim(), + jsxCode: "", + }; + } + + componentDidMount() { + registerLocale("fi", fi); + registerLocale("pt-BR", ptBR); + registerLocale("en-GB", enGB); + } + + transpileTsCode = async () => { + const tsCode = this.state.tsxCode; + + let stateUpdates = { + jsxCode: "", + isTranspiling: true, + }; + + try { + const transpiledCode = await transformTsx(tsCode); + + this.lastTranspiledTsCodeRef.current = tsCode; + stateUpdates = { + jsxCode: transpiledCode, + isTranspiling: false, + }; + } catch (err) { + stateUpdates = { + jsxCode: "// Transpilation failed! Error: " + (err as Error).message, + isTranspiling: false, + }; + + toast.show("Transpilation failed!", "error"); + } + + this.setState((state) => ({ + ...state, + ...stateUpdates, + })); + }; + + handleCodeChange = debounce((code: string) => { + const { activeTab } = this.state; + const codeProp = activeTab === "ts" ? "tsxCode" : "jsxCode"; + + this.setState((state) => ({ + ...state, + [codeProp]: code, + })); + }, 500); + + handleTabChange = async (tab: TState["activeTab"]) => { + const { tsxCode } = this.state; + this.setState((state) => ({ + ...state, + activeTab: tab, + })); + + if (tab === "js" && tsxCode !== this.lastTranspiledTsCodeRef.current) { + await this.transpileTsCode(); + } + }; + + handleCopy = (code: string) => { + if (code.trim().length) { + copy(code); + toast.show("Copied to clipboard", "success"); + } else { + toast.show("No code to copy", "error"); + } + }; + + render() { + const { title, description } = this.props.example; + const { activeTab, isTranspiling, jsxCode, tsxCode } = this.state; + + const code = activeTab === "js" ? jsxCode : tsxCode; + const isTS = activeTab === "ts"; + + return ( +
+

{title}

+ {description &&

{description}

} +
+ + +
+
+ {activeTab === "js" && isTranspiling ? ( + 
+              Transpiling...
+
+ ) : ( + + 
+                

+                  
+                  edit icon
+                

+                
+
+
+ + +
+ + )} +
+
+ ); + } +} diff --git a/docs-site/src/components/Examples/config.tsx b/docs-site/src/components/Examples/config.tsx new file mode 100644 index 0000000000..b1ab79704d --- /dev/null +++ b/docs-site/src/components/Examples/config.tsx @@ -0,0 +1,557 @@ +import { IExampleConfig } from "../../types"; + +// Examples +import Default from "../../examples/ts/default?raw"; +import CalendarContainer from "../../examples/ts/calendarContainer?raw"; +import CalendarIcon from "../../examples/ts/calendarIcon?raw"; +import CalendarIconSvgIcon from "../../examples/ts/calendarIconSvgIcon?raw"; +import CalendarIconExternal from "../../examples/ts/calendarIconExternal?raw"; +import CalendarStartDay from "../../examples/ts/calendarStartDay?raw"; +import OnCalendarChangeStateCallbacks from "../../examples/ts/onCalendarOpenStateCallbacks?raw"; +import ToggleCalendarOnIconClick from "../../examples/ts/toggleCalendarOnIconClick?raw"; +import Children from "../../examples/ts/children?raw"; +import ClearInput from "../../examples/ts/clearInput?raw"; +import CloseOnScroll from "../../examples/ts/closeOnScroll?raw"; +import CloseOnScrollCallback from "../../examples/ts/closeOnScrollCallback?raw"; +import ConfigureFloatingUI from "../../examples/ts/configureFloatingUI?raw"; +import CustomInput from "../../examples/ts/customInput?raw"; +import RenderCustomHeader from "../../examples/ts/renderCustomHeader?raw"; +import RenderCustomHeaderTwoMonths from "../../examples/ts/renderCustomHeaderTwoMonths?raw"; +import RenderCustomDay from "../../examples/ts/renderCustomDay?raw"; +import RenderCustomMonth from "../../examples/ts/renderCustomMonth?raw"; +import RenderCustomQuarter from "../../examples/ts/renderCustomQuarter?raw"; +import RenderCustomYear from "../../examples/ts/renderCustomYear?raw"; +import CustomCalendarClassName from "../../examples/ts/customCalendarClassName?raw"; +import CustomClassName from "../../examples/ts/customClassName?raw"; +import CustomDayClassName from "../../examples/ts/customDayClassName?raw"; +import CustomDateFormat from "../../examples/ts/customDateFormat?raw"; +import CustomTimeClassName from "../../examples/ts/customTimeClassName?raw"; +import CustomTimeInput from "../../examples/ts/customTimeInput?raw"; +import DateRange from "../../examples/ts/dateRange?raw"; +import SelectsRange from "../../examples/ts/selectsRange?raw"; +import SelectsRangeWithDisabledDates from "../../examples/ts/selectsRangeWithDisabledDates?raw"; +import DateRangeWithShowDisabledNavigation from "../../examples/ts/dateRangeWithShowDisabledNavigation?raw"; +import DateRangeInputWithClearButton from "../../examples/ts/dateRangeInputWithClearButton?raw"; +import DateRangeWithPortal from "../../examples/ts/dateRangeWithPortal?raw"; +import Disabled from "../../examples/ts/disabled?raw"; +import DisabledKeyboardNavigation from "../../examples/ts/disabledKeyboardNavigation?raw"; +import WeekNumbers from "../../examples/ts/weekNumbers?raw"; +import DontCloseOnSelect from "../../examples/ts/dontCloseOnSelect?raw"; +import ExcludeDates from "../../examples/ts/excludeDates?raw"; +import ExcludedWithMessage from "../../examples/ts/excludeDatesWithMessage?raw"; +import ExcludeDateIntervals from "../../examples/ts/excludeDateIntervals?raw"; +import ExcludeDatesMonthPicker from "../../examples/ts/excludeDatesMonthPicker?raw"; +import ExcludeDatesRangeMonthPicker from "../../examples/ts/excludeDatesRangeMonthPicker?raw"; +import ExcludeTimes from "../../examples/ts/excludeTimes?raw"; +import FilterDates from "../../examples/ts/filterDates?raw"; +import FilterTimes from "../../examples/ts/filterTimes?raw"; +import FixedCalendar from "../../examples/ts/fixedCalendar?raw"; +import RawChange from "../../examples/ts/rawChange?raw"; +import HighlightDates from "../../examples/ts/highlightDates?raw"; +import HighlightDatesRanges from "../../examples/ts/highlightDatesRanges?raw"; +import HolidayDates from "../../examples/ts/holidayDates?raw"; +import IncludeDates from "../../examples/ts/includeDates?raw"; +import IncludeDateIntervals from "../../examples/ts/includeDateIntervals?raw"; +import IncludeDatesMonthPicker from "../../examples/ts/includeDatesMonthPicker?raw"; +import IncludeTimes from "../../examples/ts/includeTimes?raw"; +import InjectTimes from "../../examples/ts/injectTimes?raw"; +import Inline from "../../examples/ts/inline?raw"; +import InlineVisible from "../../examples/ts/inlineVisible?raw"; +import TimeInput from "../../examples/ts/timeInput?raw"; +import Locale from "../../examples/ts/locale?raw"; +import LocaleWithTime from "../../examples/ts/localeWithTime?raw"; +import LocaleWithoutGlobalVariable from "../../examples/ts/localeWithoutGlobalVariable?raw"; +import MinDate from "../../examples/ts/minDate?raw"; +import MaxDate from "../../examples/ts/maxDate?raw"; +import MonthPicker from "../../examples/ts/monthPicker?raw"; +import MonthPickerFullName from "../../examples/ts/monthPickerFullName?raw"; +import MonthPickerTwoColumns from "../../examples/ts/monthPickerTwoColumns?raw"; +import MonthPickerFourColumns from "../../examples/ts/monthPickerFourColumns?raw"; +import MonthDropdown from "../../examples/ts/monthDropdown?raw"; +import MonthDropdownShort from "../../examples/ts/monthDropdownShort?raw"; +import MonthYearDropdown from "../../examples/ts/monthYearDropdown?raw"; +import MultiMonth from "../../examples/ts/multiMonth?raw"; +import MultiMonthDropdown from "../../examples/ts/multiMonthDropdown?raw"; +import MultiMonthInline from "../../examples/ts/multiMonthInline?raw"; +import NoAnchorArrow from "../../examples/ts/noAnchorArrow?raw"; +import OnBlurCallbacks from "../../examples/ts/onBlurCallbacks?raw"; +import OpenToDate from "../../examples/ts/openToDate?raw"; +import PlaceholderText from "../../examples/ts/placeholderText?raw"; +import Portal from "../../examples/ts/portal?raw"; +import PortalById from "../../examples/ts/portalById?raw"; +import WithPortalById from "../../examples/ts/withPortalById?raw"; +import QuarterPicker from "../../examples/ts/quarterPicker?raw"; +import RangeMonthPicker from "../../examples/ts/rangeMonthPicker?raw"; +import RangeMonthPickerSelectsRange from "../../examples/ts/rangeMonthPickerSelectsRange?raw"; +import RangeQuarterPicker from "../../examples/ts/rangeQuarterPicker?raw"; +import RangeQuarterPickerSelectsRange from "../../examples/ts/rangeQuarterPickerSelectsRange?raw"; +import RangeSwapRange from "../../examples/ts/rangeSwapRange?raw"; +import ReadOnly from "../../examples/ts/readOnly?raw"; +import ShowTime from "../../examples/ts/showTime?raw"; +import ShowTimeOnly from "../../examples/ts/showTimeOnly?raw"; +import HideTimeCaption from "../../examples/ts/hideTimeCaption?raw"; +import MultiMonthPrevious from "../../examples/ts/multiMonthPrevious?raw"; +import SpecificDateRange from "../../examples/ts/specificDateRange?raw"; +import ExcludeTimePeriod from "../../examples/ts/excludeTimePeriod?raw"; +import SelectsMultiple from "../../examples/ts/selectsMultiple?raw"; +import SelectsMultipleMonths from "../../examples/ts/selectsMultipleMonths?raw"; +import StrictParsing from "../../examples/ts/strictParsing?raw"; +import TabIndex from "../../examples/ts/tabIndex?raw"; +import Today from "../../examples/ts/today?raw"; +import YearPicker from "../../examples/ts/yearPicker?raw"; +import RangeYearPicker from "../../examples/ts/rangeYearPicker?raw"; +import RangeYearPickerSelectsRange from "../../examples/ts/rangeYearPickerSelectsRange?raw"; +import YearDropdown from "../../examples/ts/yearDropdown?raw"; +import YearSelectDropdown from "../../examples/ts/yearSelectDropdown?raw"; +import YearItemNumber from "../../examples/ts/yearItemNumber?raw"; +import WeekPicker from "../../examples/ts/weekPicker?raw"; +import ExcludeWeeks from "../../examples/ts/excludeWeeks?raw"; +import ExternalForm from "../../examples/ts/externalForm?raw"; + +export const EXAMPLE_CONFIG: IExampleConfig[] = [ + { + title: "Default", + component: Default, + }, + { + title: "Calendar Icon", + component: CalendarIcon, + }, + { + title: "Calendar Icon using React Svg Component", + component: CalendarIconSvgIcon, + }, + { + title: "Calendar Icon using External Lib", + component: CalendarIconExternal, + }, + { + title: "Toggle Calendar open status on click of the calendar icon", + component: ToggleCalendarOnIconClick, + }, + { + title: "Calendar container", + component: CalendarContainer, + }, + { + title: "Calendar open state callbacks", + component: OnCalendarChangeStateCallbacks, + }, + { + title: "Children", + component: Children, + }, + { + title: "Clear datepicker input", + component: ClearInput, + }, + { + title: "Close on scroll", + component: CloseOnScroll, + }, + { + title: "Close on scroll callback", + component: CloseOnScrollCallback, + }, + { + title: "Configure Floating UI Properties", + component: ConfigureFloatingUI, + description: ( +
+ Full docs for the underlying library that manages the overlay used can + be found at{" "} + + floating-ui.com + +
+ ), + }, + { + title: "Custom input", + component: CustomInput, + }, + { + title: "Custom header", + component: RenderCustomHeader, + }, + { + title: "Custom header with two months displayed", + component: RenderCustomHeaderTwoMonths, + }, + { + title: "Custom Day", + component: RenderCustomDay, + }, + { + title: "Custom Month", + component: RenderCustomMonth, + }, + { + title: "Custom Quarter", + component: RenderCustomQuarter, + }, + { + title: "Custom Year", + component: RenderCustomYear, + }, + { + title: "Custom calendar class name", + component: CustomCalendarClassName, + }, + { + title: "Custom class name", + component: CustomClassName, + }, + { + title: "Custom day class name", + component: CustomDayClassName, + }, + { + title: "Custom date format", + component: CustomDateFormat, + }, + { + title: "Custom time class name", + component: CustomTimeClassName, + }, + { + title: "Custom time input", + component: CustomTimeInput, + }, + { + title: "Date Range", + component: DateRange, + }, + { + title: "Date range for one datepicker", + component: SelectsRange, + }, + { + title: "Date range for one datepicker with disabled dates highlighted", + component: SelectsRangeWithDisabledDates, + }, + { + title: "Date Range with disabled navigation shown", + component: DateRangeWithShowDisabledNavigation, + }, + { + title: "Date Range using input with clear button", + component: DateRangeInputWithClearButton, + }, + { + title: "Date Range with Portal", + component: DateRangeWithPortal, + }, + { + title: "Disable datepicker", + component: Disabled, + }, + { + title: "Disable keyboard navigation", + component: DisabledKeyboardNavigation, + }, + { + title: "Display Week Numbers", + component: WeekNumbers, + }, + { + title: "Don't hide calendar on date selection", + component: DontCloseOnSelect, + }, + { + title: "Exclude dates", + component: ExcludeDates, + }, + { + title: "Exclude dates with message", + component: ExcludedWithMessage, + }, + { + title: "Exclude date intervals", + component: ExcludeDateIntervals, + }, + { + title: "Exclude Months in Month Picker", + component: ExcludeDatesMonthPicker, + }, + { + title: "Exclude Months in Range Month Picker", + component: ExcludeDatesRangeMonthPicker, + }, + { + title: "Exclude Times", + component: ExcludeTimes, + }, + { + title: "Filter dates", + component: FilterDates, + }, + { + title: "Filter times", + component: FilterTimes, + }, + { + title: "Fixed height of Calendar", + component: FixedCalendar, + }, + { + title: "Get raw input value on change", + component: RawChange, + }, + { + title: "Highlight dates", + component: HighlightDates, + }, + { + title: "Highlight dates with custom class names and ranges", + component: HighlightDatesRanges, + }, + { + title: "Holiday dates", + component: HolidayDates, + }, + { + title: "Include dates", + component: IncludeDates, + }, + { + title: "Include date intervals", + component: IncludeDateIntervals, + }, + { + title: "Include Months in Month Picker", + component: IncludeDatesMonthPicker, + }, + { + title: "Include Times", + component: IncludeTimes, + }, + { + title: "Inject Specific Times", + component: InjectTimes, + }, + { + title: "Inline version", + component: Inline, + }, + { + title: "Button to show Inline version", + component: InlineVisible, + }, + { + title: "Input time", + component: TimeInput, + }, + { + title: "Locale", + component: Locale, + }, + { + title: "Locale with time", + component: LocaleWithTime, + }, + { + title: "Locale without global variables", + component: LocaleWithoutGlobalVariable, + }, + { + title: "Min date", + component: MinDate, + }, + { + title: "Max date", + component: MaxDate, + }, + { + title: "Month Picker", + component: MonthPicker, + }, + { + title: "Month Picker with Full Name", + component: MonthPickerFullName, + }, + { + title: "Month Picker Two Columns Layout", + component: MonthPickerTwoColumns, + }, + { + title: "Month Picker Four Columns Layout", + component: MonthPickerFourColumns, + }, + { + title: "Month dropdown", + component: MonthDropdown, + }, + { + title: "Month dropdown short month", + component: MonthDropdownShort, + }, + { + title: "MonthYear dropdown", + component: MonthYearDropdown, + }, + { + title: "Multiple months", + component: MultiMonth, + }, + { + title: "Multiple months with year dropdown", + component: MultiMonthDropdown, + }, + { + title: "Multiple months inline", + component: MultiMonthInline, + }, + { + title: "No Anchor Arrow", + component: NoAnchorArrow, + }, + { + title: "onBlur callbacks in console", + component: OnBlurCallbacks, + }, + { + title: "Open to date", + component: OpenToDate, + }, + { + title: "Placeholder text", + component: PlaceholderText, + }, + { + title: "Portal version", + component: Portal, + }, + { + title: "Portal by id", + description: + "If the provided portalId cannot be found in the dom, one will be created by default with that id.", + component: PortalById, + }, + { + title: "Portal version with portal by id", + description: + "If the provided portalId cannot be found in the dom, one will be created by default with that id.", + component: WithPortalById, + }, + { + title: "Quarter Picker", + component: QuarterPicker, + }, + { + title: "Range Month Picker", + component: RangeMonthPicker, + }, + { + title: "Range Month Picker for one month picker", + component: RangeMonthPickerSelectsRange, + }, + { + title: "Range Quarter Picker", + component: RangeQuarterPicker, + }, + { + title: "Range Quarter Picker for one quarter picker", + component: RangeQuarterPickerSelectsRange, + }, + { + title: "Range Swap Range", + description: + "Swap the start and end date if the end date is before the start date in a pick sequence.", + component: RangeSwapRange, + }, + { + title: "Read only datepicker", + component: ReadOnly, + }, + { + title: "Select Time", + component: ShowTime, + }, + { + title: "Select Time Only", + component: ShowTimeOnly, + }, + { + title: "Hide Time Caption", + component: HideTimeCaption, + }, + { + title: "Show previous months", + component: MultiMonthPrevious, + }, + { + title: "Specific date range", + component: SpecificDateRange, + }, + { + title: "Specific Time Range", + component: ExcludeTimePeriod, + }, + { + title: "Select multiple dates", + component: SelectsMultiple, + }, + { + title: "Select multiple months", + component: SelectsMultipleMonths, + }, + { + title: "Strict parsing", + description: + "Enables strict format validation for manual date input. When this flag is activated, the component will only accept values that exactly match the specified date format (`dateFormat`).", + component: StrictParsing, + }, + { + title: "TabIndex", + component: TabIndex, + }, + { + title: "Today button", + component: Today, + }, + { + title: "Year Picker", + component: YearPicker, + }, + { + title: "Range Year Picker", + component: RangeYearPicker, + }, + { + title: "Range Year Picker for one datepicker", + component: RangeYearPickerSelectsRange, + }, + { + title: "Year dropdown", + component: YearDropdown, + }, + { + title: "Year select dropdown", + component: YearSelectDropdown, + }, + { + title: "Year item number", + component: YearItemNumber, + }, + { + title: "Calendar Start day", + component: CalendarStartDay, + }, + { + title: "Week Picker", + component: WeekPicker, + }, + { + title: "Exclude Weeks", + component: ExcludeWeeks, + }, + { + title: "External Form", + component: ExternalForm, + }, +]; diff --git a/docs-site/src/components/Examples/examples.scss b/docs-site/src/components/Examples/examples.scss index 5374948917..db1e2cdadd 100644 --- a/docs-site/src/components/Examples/examples.scss +++ b/docs-site/src/components/Examples/examples.scss @@ -68,6 +68,30 @@ margin-bottom: 20px; } + &__tabs { + display: flex; + } + + &__tab { + font-family: "Open Sans", sans-serif; + box-sizing: border-box; + padding: 8px; + border: none; + border-bottom: 2px solid transparent; + background: none; + cursor: pointer; + font-size: 14px; + transition: all 0.2s ease; + } + + &__tab:hover { + border-bottom: 2px solid #216ba5; + } + + &__tab.active { + border-bottom: 2px solid #216ba5; + } + &__code { position: relative; background-color: #f5f8fb; @@ -75,8 +99,7 @@ margin-left: -20px; border-top: 1px solid #d8e4ef; border-bottom: 1px solid #d8e4ef; - overflow-x: auto; - overflow-y: hidden; + overflow: auto hidden; @include helpers.breakpoint(768px) { width: 70%; @@ -89,24 +112,63 @@ textarea:focus { outline: 0; } + } - &__edit_icon { - position: absolute; - top: 0; - right: 0; + &__actions { + position: absolute; + top: 4px; + right: 4px; + z-index: 10; + + & > * { width: 20px; - z-index: 10; + margin-right: 10px; + vertical-align: middle; + } + + &__button { + width: 38px; + border-radius: 50%; + height: 38px; + border: none; + background-color: transparent; + cursor: pointer; + + transition: background 0.2s ease; + + &:hover { + background: rgba(172, 172, 172, 0.2); + } + + &:focus { + background: rgba(172, 172, 172, 0.4); + } + + & > img { + width: 18px; + } } } + + &__transpiling { + padding: 0.8rem; + font-size: 14px; + color: #666; + font-family: "Open Sans", sans-serif; + } + &__preview { padding: 20px; + @include helpers.breakpoint(768px) { width: 30%; } + @media (max-width: 768px) { padding-left: 0; } } + &#example-portal-by-id { position: relative; overflow: hidden; @@ -121,9 +183,11 @@ .react-datepicker__week:nth-child(3n + 1) { background-color: #215005; } + .react-datepicker__week:nth-child(3n + 2) { background-color: #eea429; } + .react-datepicker__week:nth-child(3n + 3) { background-color: #a82a15; } diff --git a/docs-site/src/components/Examples/hero.scss b/docs-site/src/components/Examples/hero.scss index a9f34dd041..35ebc67aff 100644 --- a/docs-site/src/components/Examples/hero.scss +++ b/docs-site/src/components/Examples/hero.scss @@ -6,6 +6,7 @@ &__content { @extend %container-styling; + text-align: center; padding: 175px 0; } diff --git a/docs-site/src/components/Examples/index.jsx b/docs-site/src/components/Examples/index.jsx deleted file mode 100644 index 1e1f51cfcf..0000000000 --- a/docs-site/src/components/Examples/index.jsx +++ /dev/null @@ -1,619 +0,0 @@ -import React from "react"; -import hljs from "highlight.js/lib/core"; -import hljsJavaScriptLanguage from "highlight.js/lib/languages/javascript"; -import slugify from "slugify"; -import CodeExampleComponent from "../Example/index.jsx"; - -import Default from "../../examples/default?raw"; -import NoAnchorArrow from "../../examples/noAnchorArrow?raw"; -import ShowTime from "../../examples/showTime?raw"; -import ShowTimeOnly from "../../examples/showTimeOnly?raw"; -import HideTimeCaption from "../../examples/hideTimeCaption?raw"; -import ExcludeTimes from "../../examples/excludeTimes?raw"; -import IncludeTimes from "../../examples/includeTimes?raw"; -import InjectTimes from "../../examples/injectTimes?raw"; -import FilterTimes from "../../examples/filterTimes?raw"; -import ExcludeTimePeriod from "../../examples/excludeTimePeriod?raw"; -import CustomDateFormat from "../../examples/customDateFormat?raw"; -import CustomClassName from "../../examples/customClassName?raw"; -import CustomCalendarClassName from "../../examples/customCalendarClassName?raw"; -import CustomDayClassName from "../../examples/customDayClassName?raw"; -import CustomWeekClassName from "../../examples/customWeekClassName?raw"; -import CustomTimeClassName from "../../examples/customTimeClassName?raw"; -import Today from "../../examples/today?raw"; -import PlaceholderText from "../../examples/placeholderText?raw"; -import SpecificDateRange from "../../examples/specificDateRange?raw"; -import MinDate from "../../examples/minDate?raw"; -import MaxDate from "../../examples/maxDate?raw"; -import DateRangeWithShowDisabledNavigation from "../../examples/dateRangeWithShowDisabledNavigation?raw"; -import Locale from "../../examples/locale?raw"; -import LocaleWithTime from "../../examples/localeWithTime?raw"; -import LocaleWithoutGlobalVariable from "../../examples/localeWithoutGlobalVariable?raw"; -import ExcludeDates from "../../examples/excludeDates?raw"; -import ExcludedWithMessage from "../../examples/excludeDatesWithMessage?raw"; -import ExcludeDateIntervals from "../../examples/excludeDateIntervals?raw"; -import ExcludeDatesMonthPicker from "../../examples/excludeDatesMonthPicker?raw"; -import ExcludeDatesRangeMonthPicker from "../../examples/excludeDatesRangeMonthPicker?raw"; -import HighlightDates from "../../examples/highlightDates?raw"; -import HolidayDates from "../../examples/holidayDates?raw"; -import HighlightDatesRanges from "../../examples/highlightDatesRanges?raw"; -import IncludeDates from "../../examples/includeDates?raw"; -import IncludeDateIntervals from "../../examples/includeDateIntervals?raw"; -import IncludeDatesMonthPicker from "../../examples/includeDatesMonthPicker?raw"; -import FilterDates from "../../examples/filterDates?raw"; -import DateRange from "../../examples/dateRange?raw"; -import DateRangeInputWithClearButton from "../../examples/dateRangeInputWithClearButton?raw"; -import DateRangeWithPortal from "../../examples/dateRangeWithPortal?raw"; -import Disabled from "../../examples/disabled?raw"; -import DisabledKeyboardNavigation from "../../examples/disabledKeyboardNavigation?raw"; -import ReadOnly from "../../examples/readOnly?raw"; -import ClearInput from "../../examples/clearInput?raw"; -import OnBlurCallbacks from "../../examples/onBlurCallbacks?raw"; -import ConfigureFloatingUI from "../../examples/configureFloatingUI?raw"; -import Portal from "../../examples/portal?raw"; -import PortalById from "../../examples/portalById?raw"; -import WithPortalById from "../../examples/withPortalById?raw"; -import TabIndex from "../../examples/tabIndex?raw"; -import YearDropdown from "../../examples/yearDropdown?raw"; -import YearItemNumber from "../../examples/yearItemNumber?raw"; -import MonthDropdown from "../../examples/monthDropdown?raw"; -import MonthDropdownShort from "../../examples/monthDropdownShort?raw"; -import MonthYearDropdown from "../../examples/monthYearDropdown?raw"; -import YearSelectDropdown from "../../examples/yearSelectDropdown?raw"; -import Inline from "../../examples/inline?raw"; -import InlineVisible from "../../examples/inlineVisible?raw"; -import OpenToDate from "../../examples/openToDate?raw"; -import FixedCalendar from "../../examples/fixedCalendar?raw"; -import WeekNumbers from "../../examples/weekNumbers?raw"; -import CustomInput from "../../examples/customInput?raw"; -import MultiMonth from "../../examples/multiMonth?raw"; -import MultiMonthPrevious from "../../examples/multiMonthPrevious?raw"; -import MultiMonthDropdown from "../../examples/multiMonthDropdown?raw"; -import MultiMonthInline from "../../examples/multiMonthInline?raw"; -import Children from "../../examples/children?raw"; -import CalendarContainer from "../../examples/calendarContainer?raw"; -import RawChange from "../../examples/rawChange?raw"; -import DontCloseOnSelect from "../../examples/dontCloseOnSelect?raw"; -import RenderCustomHeader from "../../examples/renderCustomHeader?raw"; -import RenderCustomHeaderTwoMonths from "../../examples/renderCustomHeaderTwoMonths?raw"; -import RenderCustomDay from "../../examples/renderCustomDay?raw"; -import RenderCustomMonth from "../../examples/renderCustomMonth?raw"; -import RenderCustomQuarter from "../../examples/renderCustomQuarter?raw"; -import RenderCustomYear from "../../examples/renderCustomYear?raw"; -import TimeInput from "../../examples/timeInput?raw"; -import StrictParsing from "../../examples/strictParsing?raw"; -import MonthPicker from "../../examples/monthPicker?raw"; -import WeekPicker from "../../examples/weekPicker?raw"; -import ExcludeWeeks from "../../examples/excludeWeeks?raw"; -import monthPickerFullName from "../../examples/monthPickerFullName?raw"; -import monthPickerTwoColumns from "../../examples/monthPickerTwoColumns?raw"; -import monthPickerFourColumns from "../../examples/monthPickerFourColumns?raw"; -import RangeMonthPicker from "../../examples/rangeMonthPicker?raw"; -import RangeMonthPickerSelectsRange from "../../examples/rangeMonthPickerSelectsRange?raw"; -import QuarterPicker from "../../examples/quarterPicker?raw"; -import RangeQuarterPicker from "../../examples/rangeQuarterPicker?raw"; -import RangeQuarterPickerSelectsRange from "../../examples/rangeQuarterPickerSelectsRange?raw"; -import YearPicker from "../../examples/yearPicker?raw"; -import RangeYearPicker from "../../examples/rangeYearPicker?raw"; -import RangeYearPickerSelectsRange from "../../examples/rangeYearPickerSelectsRange?raw"; -import OnCalendarChangeStateCallbacks from "../../examples/onCalendarOpenStateCallbacks?raw"; -import CustomTimeInput from "../../examples/customTimeInput?raw"; -import CloseOnScroll from "../../examples/closeOnScroll?raw"; -import CloseOnScrollCallback from "../../examples/closeOnScrollCallback?raw"; -import SelectsRange from "../../examples/selectsRange?raw"; -import SelectsRangeWithCustomSeparator from "../../examples/customRangeSeparator?raw"; -import selectsRangeWithDisabledDates from "../../examples/selectsRangeWithDisabledDates?raw"; -import CalendarStartDay from "../../examples/calendarStartDay?raw"; -import ExternalForm from "../../examples/externalForm?raw"; -import CalendarIcon from "../../examples/calendarIcon?raw"; -import SelectsMultiple from "../../examples/selectsMultiple?raw"; -import SelectsMultipleMonths from "../../examples/selectsMultipleMonths?raw"; -import CalendarIconExternal from "../../examples/calendarIconExternal?raw"; -import CalendarIconSvgIcon from "../../examples/calendarIconSvgIcon?raw"; -import ToggleCalendarOnIconClick from "../../examples/toggleCalendarOnIconClick?raw"; -import SwapRange from "../../examples/rangeSwapRange?raw"; - -import "./style.scss"; -import "react-datepicker/dist/react-datepicker.css"; - -export default class exampleComponents extends React.Component { - componentDidMount() { - hljs.registerLanguage("javascript", hljsJavaScriptLanguage); - hljs.highlightAll(); - } - - examples = [ - { - title: "Default", - component: Default, - }, - { - title: "Calendar Icon", - component: CalendarIcon, - }, - { - title: "Calendar Icon using React Svg Component", - component: CalendarIconSvgIcon, - }, - { - title: "Calendar Icon using External Lib", - component: CalendarIconExternal, - }, - { - title: "Toggle Calendar open status on click of the calendar icon", - component: ToggleCalendarOnIconClick, - }, - { - title: "Calendar container", - component: CalendarContainer, - }, - { - title: "Calendar open state callbacks", - component: OnCalendarChangeStateCallbacks, - }, - { - title: "Children", - component: Children, - }, - { - title: "Clear datepicker input", - component: ClearInput, - }, - { - title: "Close on scroll", - component: CloseOnScroll, - }, - { - title: "Close on scroll callback", - component: CloseOnScrollCallback, - }, - { - title: "Configure Floating UI Properties", - component: ConfigureFloatingUI, - description: ( -
- Full docs for the underlying library that manages the overlay used can - be found at{" "} - - floating-ui.com - -
- ), - }, - { - title: "Custom input", - component: CustomInput, - }, - { - title: "Custom header", - component: RenderCustomHeader, - }, - { - title: "Custom header with two months displayed", - component: RenderCustomHeaderTwoMonths, - }, - { - title: "Custom Day", - component: RenderCustomDay, - }, - { - title: "Custom Month", - component: RenderCustomMonth, - }, - { - title: "Custom Quarter", - component: RenderCustomQuarter, - }, - { - title: "Custom Year", - component: RenderCustomYear, - }, - { - title: "Custom calendar class name", - component: CustomCalendarClassName, - }, - { - title: "Custom class name", - component: CustomClassName, - }, - { - title: "Custom day class name", - component: CustomDayClassName, - }, - { - title: "Custom week class name", - component: CustomWeekClassName, - }, - { - title: "Custom date format", - component: CustomDateFormat, - }, - { - title: "Custom time class name", - component: CustomTimeClassName, - }, - { - title: "Custom time input", - component: CustomTimeInput, - }, - { - title: "Date Range", - component: DateRange, - }, - { - title: "Date range for one datepicker", - component: SelectsRange, - }, - { - title: "Date range for one datepicker with custom range separator", - component: SelectsRangeWithCustomSeparator, - }, - { - title: "Date range for one datepicker with disabled dates highlighted", - component: selectsRangeWithDisabledDates, - }, - { - title: "Date Range with disabled navigation shown", - component: DateRangeWithShowDisabledNavigation, - }, - { - title: "Date Range using input with clear button", - component: DateRangeInputWithClearButton, - }, - { - title: "Date Range with Portal", - component: DateRangeWithPortal, - }, - { - title: "Disable datepicker", - component: Disabled, - }, - { - title: "Disable keyboard navigation", - component: DisabledKeyboardNavigation, - }, - { - title: "Display Week Numbers", - component: WeekNumbers, - }, - { - title: "Don't hide calendar on date selection", - component: DontCloseOnSelect, - }, - { - title: "Exclude dates", - component: ExcludeDates, - }, - { - title: "Exclude dates with message", - component: ExcludedWithMessage, - }, - { - title: "Exclude date intervals", - component: ExcludeDateIntervals, - }, - { - title: "Exclude Months in Month Picker", - component: ExcludeDatesMonthPicker, - }, - { - title: "Exclude Months in Range Month Picker", - component: ExcludeDatesRangeMonthPicker, - }, - { - title: "Exclude Times", - component: ExcludeTimes, - }, - { - title: "Filter dates", - component: FilterDates, - }, - { - title: "Filter times", - component: FilterTimes, - }, - { - title: "Fixed height of Calendar", - component: FixedCalendar, - }, - { - title: "Get raw input value on change", - component: RawChange, - }, - { - title: "Highlight dates", - component: HighlightDates, - }, - { - title: "Highlight dates with custom class names and ranges", - component: HighlightDatesRanges, - }, - { - title: "Holiday dates", - component: HolidayDates, - }, - { - title: "Include dates", - component: IncludeDates, - }, - { - title: "Include date intervals", - component: IncludeDateIntervals, - }, - { - title: "Include Months in Month Picker", - component: IncludeDatesMonthPicker, - }, - { - title: "Include Times", - component: IncludeTimes, - }, - { - title: "Inject Specific Times", - component: InjectTimes, - }, - { - title: "Inline version", - component: Inline, - }, - { - title: "Button to show Inline version", - component: InlineVisible, - }, - { - title: "Input time", - component: TimeInput, - }, - { - title: "Locale", - component: Locale, - }, - { - title: "Locale with time", - component: LocaleWithTime, - }, - { - title: "Locale without global variables", - component: LocaleWithoutGlobalVariable, - }, - { - title: "Min date", - component: MinDate, - }, - { - title: "Max date", - component: MaxDate, - }, - { - title: "Month Picker", - component: MonthPicker, - }, - { - title: "Month Picker with Full Name", - component: monthPickerFullName, - }, - { - title: "Month Picker Two Columns Layout", - component: monthPickerTwoColumns, - }, - { - title: "Month Picker Four Columns Layout", - component: monthPickerFourColumns, - }, - { - title: "Month dropdown", - component: MonthDropdown, - }, - { - title: "Month dropdown short month", - component: MonthDropdownShort, - }, - { - title: "MonthYear dropdown", - component: MonthYearDropdown, - }, - { - title: "Multiple months", - component: MultiMonth, - }, - { - title: "Multiple months with year dropdown", - component: MultiMonthDropdown, - }, - { - title: "Multiple months inline", - component: MultiMonthInline, - }, - { - title: "No Anchor Arrow", - component: NoAnchorArrow, - }, - { - title: "onBlur callbacks in console", - component: OnBlurCallbacks, - }, - { - title: "Open to date", - component: OpenToDate, - }, - { - title: "Placeholder text", - component: PlaceholderText, - }, - { - title: "Portal version", - component: Portal, - }, - { - title: "Portal by id", - description: - "If the provided portalId cannot be found in the dom, one will be created by default with that id.", - component: PortalById, - }, - { - title: "Portal version with portal by id", - description: - "If the provided portalId cannot be found in the dom, one will be created by default with that id.", - component: WithPortalById, - }, - { - title: "Quarter Picker", - component: QuarterPicker, - }, - { - title: "Range Month Picker", - component: RangeMonthPicker, - }, - { - title: "Range Month Picker for one month picker", - component: RangeMonthPickerSelectsRange, - }, - { - title: "Range Quarter Picker", - component: RangeQuarterPicker, - }, - { - title: "Range Quarter Picker for one quarter picker", - component: RangeQuarterPickerSelectsRange, - }, - { - title: "Range Swap Range", - description: - "Swap the start and end date if the end date is before the start date in a pick sequence.", - component: SwapRange, - }, - { - title: "Read only datepicker", - component: ReadOnly, - }, - { - title: "Select Time", - component: ShowTime, - }, - { - title: "Select Time Only", - component: ShowTimeOnly, - }, - { - title: "Hide Time Caption", - component: HideTimeCaption, - }, - { - title: "Show previous months", - component: MultiMonthPrevious, - }, - { - title: "Specific date range", - component: SpecificDateRange, - }, - { - title: "Specific Time Range", - component: ExcludeTimePeriod, - }, - { - title: "Select multiple dates", - component: SelectsMultiple, - }, - { - title: "Select multiple months", - component: SelectsMultipleMonths, - }, - { - title: "Strict parsing", - component: StrictParsing, - }, - { - title: "TabIndex", - component: TabIndex, - }, - { - title: "Today button", - component: Today, - }, - { - title: "Year Picker", - component: YearPicker, - }, - { - title: "Range Year Picker", - component: RangeYearPicker, - }, - { - title: "Range Year Picker for one datepicker", - component: RangeYearPickerSelectsRange, - }, - { - title: "Year dropdown", - component: YearDropdown, - }, - { - title: "Year select dropdown", - component: YearSelectDropdown, - }, - { - title: "Year item number", - component: YearItemNumber, - }, - { - title: "Calendar Start day", - component: CalendarStartDay, - }, - { - title: "Week Picker", - component: WeekPicker, - }, - { - title: "Exclude Weeks", - component: ExcludeWeeks, - }, - { - title: "External Form", - component: ExternalForm, - }, - ]; - - handleAnchorClick = (e, id) => { - e.preventDefault(); - window.history.replaceState(null, document.title, `#${id}`); - document - .getElementById(id) - .scrollIntoView({ behavior: "smooth", block: "start" }); - }; - - render() { - return ( - <> -

Examples

- -
- {this.examples.map((example) => ( - - ))} -
- - ); - } -} diff --git a/docs-site/src/components/Examples/index.tsx b/docs-site/src/components/Examples/index.tsx new file mode 100644 index 0000000000..68f15f97e1 --- /dev/null +++ b/docs-site/src/components/Examples/index.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import hljs from "highlight.js/lib/core"; +import hljsJavaScriptLanguage from "highlight.js/lib/languages/javascript"; +import slugify from "slugify"; +import CodeExampleComponent from "../Example/index.jsx"; + +import "./style.scss"; +import "react-datepicker/dist/react-datepicker.css"; +import { EXAMPLE_CONFIG } from "./config.js"; + +export default class exampleComponents extends React.Component { + componentDidMount() { + hljs.registerLanguage("javascript", hljsJavaScriptLanguage); + hljs.highlightAll(); + } + + handleAnchorClick = (e: React.MouseEvent, id: string): void => { + e.preventDefault(); + window.history.replaceState(null, document.title, `#${id}`); + document + .getElementById(id) + ?.scrollIntoView({ behavior: "smooth", block: "start" }); + }; + + render() { + return ( + <> +

Examples

+ +
+ {EXAMPLE_CONFIG.map((example) => ( + + ))} +
+ + ); + } +} diff --git a/docs-site/src/components/Examples/reset.scss b/docs-site/src/components/Examples/reset.scss index 04a683bf25..72f4a5c1ad 100644 --- a/docs-site/src/components/Examples/reset.scss +++ b/docs-site/src/components/Examples/reset.scss @@ -114,10 +114,10 @@ blockquote { quotes: none; } -q:before, -q:after, -blockquote:before, -blockquote:after { +q::before, +q::after, +blockquote::before, +blockquote::after { content: ""; content: none; } diff --git a/docs-site/src/components/Examples/style.scss b/docs-site/src/components/Examples/style.scss index cb7ad5e36c..9f3fa05280 100644 --- a/docs-site/src/components/Examples/style.scss +++ b/docs-site/src/components/Examples/style.scss @@ -67,6 +67,7 @@ strong { .wrapper { @extend %container-styling; + padding: 20px; } diff --git a/docs-site/src/components/tsxTransformer.ts b/docs-site/src/components/tsxTransformer.ts new file mode 100644 index 0000000000..c4259744c3 --- /dev/null +++ b/docs-site/src/components/tsxTransformer.ts @@ -0,0 +1,46 @@ +import { initialize, transform } from "esbuild-wasm"; + +let initializeEsBuild: Promise | null = null; + +const cleanTranspiledCode = (code: string) => { + return code + .replace(/\/\*\s*@__PURE__\s*\*\/\s*/g, "") + .replace(/\/\*\s*@__INLINE__\s*\*\/\s*/g, "") + .replace(/\/\*\s*@__NOINLINE__\s*\*\/\s*/g, "") + .replace(/\/\*\s*@__SIDE_EFFECTS__\s*\*\/\s*/g, "") + .replace(/\/\*\s*\*\/\s*/g, "") + .replace(/\n\s*\n\s*\n/g, "\n\n"); +}; + +export const initializeTsxTransformer = async () => { + if (!initializeEsBuild) { + try { + initializeEsBuild = initialize({ + wasmURL: "https://unpkg.com/esbuild-wasm/esbuild.wasm", + }); + } catch (error) { + console.error(`Initializing tsx transformer failed:`, error); + initializeEsBuild = null; + + throw error; + } + } + + return initializeEsBuild; +}; + +export const transformTsx = async (code: string) => { + await initializeTsxTransformer(); + + const result = await transform(code, { + loader: "tsx", + target: "es2020", + jsx: "preserve", + minify: false, + // Remove special comments + legalComments: "none", + // Additional options to clean up output + treeShaking: true, + }); + return cleanTranspiledCode(result.code); +}; diff --git a/docs-site/src/examples/calendarIcon.js b/docs-site/src/examples/calendarIcon.js deleted file mode 100644 index 6b216e9070..0000000000 --- a/docs-site/src/examples/calendarIcon.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/calendarIconExternal.js b/docs-site/src/examples/calendarIconExternal.js deleted file mode 100644 index 5a956df968..0000000000 --- a/docs-site/src/examples/calendarIconExternal.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - icon="fa fa-calendar" - /> - ); -}; diff --git a/docs-site/src/examples/calendarStartDay.js b/docs-site/src/examples/calendarStartDay.js deleted file mode 100644 index 3242c35dc0..0000000000 --- a/docs-site/src/examples/calendarStartDay.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - calendarStartDay={3} - /> - ); -}; diff --git a/docs-site/src/examples/children.js b/docs-site/src/examples/children.js deleted file mode 100644 index 0a58c2cf3d..0000000000 --- a/docs-site/src/examples/children.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - > -
Don't forget to check the weather!
- - ); -}; diff --git a/docs-site/src/examples/clearInput.js b/docs-site/src/examples/clearInput.js deleted file mode 100644 index 1877af9f99..0000000000 --- a/docs-site/src/examples/clearInput.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - isClearable - placeholderText="I have been cleared!" - /> - ); -}; diff --git a/docs-site/src/examples/closeOnScroll.js b/docs-site/src/examples/closeOnScroll.js deleted file mode 100644 index 4594838439..0000000000 --- a/docs-site/src/examples/closeOnScroll.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/closeOnScrollCallback.js b/docs-site/src/examples/closeOnScrollCallback.js deleted file mode 100644 index 9639f61751..0000000000 --- a/docs-site/src/examples/closeOnScrollCallback.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - e.target === document} - selected={selectedDate} - onChange={(date) => setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/customCalendarClassName.js b/docs-site/src/examples/customCalendarClassName.js deleted file mode 100644 index 0f1f25134c..0000000000 --- a/docs-site/src/examples/customCalendarClassName.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - calendarClassName="rasta-stripes" - /> - ); -}; diff --git a/docs-site/src/examples/customClassName.js b/docs-site/src/examples/customClassName.js deleted file mode 100644 index c727dfbe57..0000000000 --- a/docs-site/src/examples/customClassName.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - className="red-border" - /> - ); -}; diff --git a/docs-site/src/examples/customDateFormat.js b/docs-site/src/examples/customDateFormat.js deleted file mode 100644 index 528b01d47f..0000000000 --- a/docs-site/src/examples/customDateFormat.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/customDayClassName.js b/docs-site/src/examples/customDayClassName.js deleted file mode 100644 index c445391500..0000000000 --- a/docs-site/src/examples/customDayClassName.js +++ /dev/null @@ -1,12 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - dayClassName={(date) => - getDate(date) < Math.random() * 31 ? "random" : undefined - } - /> - ); -}; diff --git a/docs-site/src/examples/customInput.js b/docs-site/src/examples/customInput.js deleted file mode 100644 index 14de55471f..0000000000 --- a/docs-site/src/examples/customInput.js +++ /dev/null @@ -1,17 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - const ExampleCustomInput = forwardRef( - ({ value, onClick, className }, ref) => ( - - ), - ); - return ( - setSelectedDate(date)} - customInput={} - /> - ); -}; diff --git a/docs-site/src/examples/customRangeSeparator.js b/docs-site/src/examples/customRangeSeparator.js deleted file mode 100644 index 808095e2a8..0000000000 --- a/docs-site/src/examples/customRangeSeparator.js +++ /dev/null @@ -1,21 +0,0 @@ -() => { - const [startDate, setStartDate] = useState(new Date()); - const [endDate, setEndDate] = useState(addDays(new Date(), 3)); - - const onChange = (dates) => { - const [start, end] = dates; - setStartDate(start); - setEndDate(end); - }; - - return ( - - ); -}; diff --git a/docs-site/src/examples/customTimeClassName.js b/docs-site/src/examples/customTimeClassName.js deleted file mode 100644 index 433f967000..0000000000 --- a/docs-site/src/examples/customTimeClassName.js +++ /dev/null @@ -1,16 +0,0 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState(new Date()); - - let handleColor = (time) => { - return time.getHours() > 12 ? "text-success" : "text-error"; - }; - - return ( - setSelectedDateTime(date)} - timeClassName={handleColor} - /> - ); -}; diff --git a/docs-site/src/examples/customTimeInput.js b/docs-site/src/examples/customTimeInput.js deleted file mode 100644 index e328c0fa95..0000000000 --- a/docs-site/src/examples/customTimeInput.js +++ /dev/null @@ -1,19 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - const ExampleCustomTimeInput = ({ value, onChange }) => ( - onChange(e.target.value)} - onClick={(e) => e.target?.focus()} - style={{ border: "solid 1px pink" }} - /> - ); - return ( - setSelectedDate(date)} - showTimeInput - customTimeInput={} - /> - ); -}; diff --git a/docs-site/src/examples/customWeekClassName.js b/docs-site/src/examples/customWeekClassName.js deleted file mode 100644 index 1f2fb990e1..0000000000 --- a/docs-site/src/examples/customWeekClassName.js +++ /dev/null @@ -1,12 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - weekClassName={(date) => - getDate(date) % 2 === 0 ? "highlighted" : undefined - } - /> - ); -}; diff --git a/docs-site/src/examples/dateRange.js b/docs-site/src/examples/dateRange.js deleted file mode 100644 index 96e2c887f2..0000000000 --- a/docs-site/src/examples/dateRange.js +++ /dev/null @@ -1,23 +0,0 @@ -() => { - const [startDate, setStartDate] = useState(new Date("2014/02/08")); - const [endDate, setEndDate] = useState(new Date("2014/02/10")); - return ( - <> - setStartDate(date)} - selectsStart - startDate={startDate} - endDate={endDate} - /> - setEndDate(date)} - selectsEnd - startDate={startDate} - endDate={endDate} - minDate={startDate} - /> - - ); -}; diff --git a/docs-site/src/examples/dateRangeInputWithClearButton.js b/docs-site/src/examples/dateRangeInputWithClearButton.js deleted file mode 100644 index edd6199709..0000000000 --- a/docs-site/src/examples/dateRangeInputWithClearButton.js +++ /dev/null @@ -1,15 +0,0 @@ -() => { - const [dateRange, setDateRange] = useState([null, null]); - const [startDate, endDate] = dateRange; - return ( - { - setDateRange(update); - }} - isClearable={true} - /> - ); -}; diff --git a/docs-site/src/examples/dateRangeWithPortal.js b/docs-site/src/examples/dateRangeWithPortal.js deleted file mode 100644 index fa7f5dbed5..0000000000 --- a/docs-site/src/examples/dateRangeWithPortal.js +++ /dev/null @@ -1,15 +0,0 @@ -() => { - const [dateRange, setDateRange] = useState([null, null]); - const [startDate, endDate] = dateRange; - return ( - { - setDateRange(update); - }} - withPortal - /> - ); -}; diff --git a/docs-site/src/examples/dateRangeWithShowDisabledNavigation.js b/docs-site/src/examples/dateRangeWithShowDisabledNavigation.js deleted file mode 100644 index 1f574fc8e0..0000000000 --- a/docs-site/src/examples/dateRangeWithShowDisabledNavigation.js +++ /dev/null @@ -1,22 +0,0 @@ -() => { - const [startDate, setStartDate] = useState(new Date()); - const [endDate, setEndDate] = useState(null); - const onChange = (dates) => { - const [start, end] = dates; - setStartDate(start); - setEndDate(end); - }; - return ( - - ); -}; diff --git a/docs-site/src/examples/default.js b/docs-site/src/examples/default.js deleted file mode 100644 index 7d305e9915..0000000000 --- a/docs-site/src/examples/default.js +++ /dev/null @@ -1,9 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/disabled.js b/docs-site/src/examples/disabled.js deleted file mode 100644 index 30c5b8d4ee..0000000000 --- a/docs-site/src/examples/disabled.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - disabled - placeholderText="This is disabled" - /> - ); -}; diff --git a/docs-site/src/examples/disabledKeyboardNavigation.js b/docs-site/src/examples/disabledKeyboardNavigation.js deleted file mode 100644 index bab3f237cb..0000000000 --- a/docs-site/src/examples/disabledKeyboardNavigation.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - disabledKeyboardNavigation - placeholderText="This has disabled keyboard navigation" - /> - ); -}; diff --git a/docs-site/src/examples/dontCloseOnSelect.js b/docs-site/src/examples/dontCloseOnSelect.js deleted file mode 100644 index 2ac91c68d9..0000000000 --- a/docs-site/src/examples/dontCloseOnSelect.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - shouldCloseOnSelect={false} - /> - ); -}; diff --git a/docs-site/src/examples/excludeDateIntervals.js b/docs-site/src/examples/excludeDateIntervals.js deleted file mode 100644 index 6c9f1e6e8d..0000000000 --- a/docs-site/src/examples/excludeDateIntervals.js +++ /dev/null @@ -1,13 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - excludeDateIntervals={[ - { start: subDays(new Date(), 5), end: addDays(new Date(), 5) }, - ]} - placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future" - /> - ); -}; diff --git a/docs-site/src/examples/excludeDates.js b/docs-site/src/examples/excludeDates.js deleted file mode 100644 index ed781e2a43..0000000000 --- a/docs-site/src/examples/excludeDates.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - excludeDates={[new Date(), subDays(new Date(), 1)]} - placeholderText="Select a date other than today or yesterday" - /> - ); -}; diff --git a/docs-site/src/examples/excludeDatesMonthPicker.js b/docs-site/src/examples/excludeDatesMonthPicker.js deleted file mode 100644 index fc65ee2a6e..0000000000 --- a/docs-site/src/examples/excludeDatesMonthPicker.js +++ /dev/null @@ -1,12 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date("2024-08-01")); - return ( - setSelectedDate(date)} - dateFormat="MM/yyyy" - excludeDates={[new Date("2024-05-01"), new Date("2024-06-01")]} - showMonthYearPicker - /> - ); -}; diff --git a/docs-site/src/examples/excludeDatesRangeMonthPicker.js b/docs-site/src/examples/excludeDatesRangeMonthPicker.js deleted file mode 100644 index c923944600..0000000000 --- a/docs-site/src/examples/excludeDatesRangeMonthPicker.js +++ /dev/null @@ -1,30 +0,0 @@ -() => { - const defaultStartDate = new Date("2024-08-01"); - const defaultEndDate = new Date("2024-10-01"); - const [startDate, setStartDate] = useState(defaultStartDate); - const [endDate, setEndDate] = useState(defaultEndDate); - - const handleChange = ([newStartDate, newEndDate]) => { - setStartDate(newStartDate); - setEndDate(newEndDate); - }; - - return ( - - ); -}; diff --git a/docs-site/src/examples/excludeDatesWithMessage.js b/docs-site/src/examples/excludeDatesWithMessage.js deleted file mode 100644 index 1eb8f04d87..0000000000 --- a/docs-site/src/examples/excludeDatesWithMessage.js +++ /dev/null @@ -1,14 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - excludeDates={[ - { date: new Date(), message: "Today is excluded" }, - { date: subDays(new Date(), 1), message: "This day is excluded" }, - ]} - placeholderText="Select a date other than today or yesterday" - /> - ); -}; diff --git a/docs-site/src/examples/excludeTimes.js b/docs-site/src/examples/excludeTimes.js deleted file mode 100644 index 8763337af0..0000000000 --- a/docs-site/src/examples/excludeTimes.js +++ /dev/null @@ -1,19 +0,0 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState( - setHours(setMinutes(new Date(), 30), 16), - ); - return ( - setSelectedDateTime(date)} - showTimeSelect - excludeTimes={[ - setHours(setMinutes(new Date(), 0), 17), - setHours(setMinutes(new Date(), 30), 18), - setHours(setMinutes(new Date(), 30), 19), - setHours(setMinutes(new Date(), 30), 17), - ]} - dateFormat="MMMM d, yyyy h:mm aa" - /> - ); -}; diff --git a/docs-site/src/examples/excludeWeeks.js b/docs-site/src/examples/excludeWeeks.js deleted file mode 100644 index 6872919783..0000000000 --- a/docs-site/src/examples/excludeWeeks.js +++ /dev/null @@ -1,17 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date("2021/02/22")); - return ( - setSelectedDate(date)} - dateFormat="I/R" - locale="en-GB" - excludeDateIntervals={[ - { start: "2021/02/08", end: "2021/02/14" }, - { start: "2021/01/18", end: "2021/01/24" }, - ]} - showWeekNumbers - showWeekPicker - /> - ); -}; diff --git a/docs-site/src/examples/externalForm.js b/docs-site/src/examples/externalForm.js deleted file mode 100644 index b1feb81ac0..0000000000 --- a/docs-site/src/examples/externalForm.js +++ /dev/null @@ -1,17 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - - return ( - <> - setSelectedDate(date)} - required - form="external-form" - /> -
- -
- - ); -}; diff --git a/docs-site/src/examples/filterDates.js b/docs-site/src/examples/filterDates.js deleted file mode 100644 index 5188587dba..0000000000 --- a/docs-site/src/examples/filterDates.js +++ /dev/null @@ -1,15 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - const isWeekday = (date) => { - const day = getDay(date); - return day !== 0 && day !== 6; - }; - return ( - setSelectedDate(date)} - filterDate={isWeekday} - placeholderText="Select a weekday" - /> - ); -}; diff --git a/docs-site/src/examples/fixedCalendar.js b/docs-site/src/examples/fixedCalendar.js deleted file mode 100644 index e150be96a2..0000000000 --- a/docs-site/src/examples/fixedCalendar.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - fixedHeight - /> - ); -}; diff --git a/docs-site/src/examples/hideTimeCaption.js b/docs-site/src/examples/hideTimeCaption.js deleted file mode 100644 index bcdfdb913b..0000000000 --- a/docs-site/src/examples/hideTimeCaption.js +++ /dev/null @@ -1,14 +0,0 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState(new Date()); - return ( - setSelectedDateTime(date)} - showTimeSelect - showTimeSelectOnly - timeIntervals={15} - dateFormat="h:mm aa" - showTimeCaption={false} - /> - ); -}; diff --git a/docs-site/src/examples/highlightDates.js b/docs-site/src/examples/highlightDates.js deleted file mode 100644 index 45ef22fca5..0000000000 --- a/docs-site/src/examples/highlightDates.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - highlightDates={[subDays(new Date(), 7), addDays(new Date(), 7)]} - placeholderText="This highlights a week ago and a week from today" - /> - ); -}; diff --git a/docs-site/src/examples/holidayDates.js b/docs-site/src/examples/holidayDates.js deleted file mode 100644 index d04b73b020..0000000000 --- a/docs-site/src/examples/holidayDates.js +++ /dev/null @@ -1,18 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - holidays={[ - { date: "2023-08-15", holidayName: "India's Independence Day" }, - { date: "2023-12-31", holidayName: "New Year's Eve" }, - { date: "2023-12-25", holidayName: "Christmas" }, - { date: "2024-01-01", holidayName: "New Year's Day" }, - { date: "2023-11-23", holidayName: "Thanksgiving Day" }, - { date: "2023-12-25", holidayName: "Fake holiday" }, - ]} - placeholderText="This display holidays" - /> - ); -}; diff --git a/docs-site/src/examples/includeDateIntervals.js b/docs-site/src/examples/includeDateIntervals.js deleted file mode 100644 index c75ec1bfe4..0000000000 --- a/docs-site/src/examples/includeDateIntervals.js +++ /dev/null @@ -1,13 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - includeDateIntervals={[ - { start: subDays(new Date(), 5), end: addDays(new Date(), 5) }, - ]} - placeholderText="This only includes dates from 5 days ago to 5 days in the future" - /> - ); -}; diff --git a/docs-site/src/examples/includeDates.js b/docs-site/src/examples/includeDates.js deleted file mode 100644 index a2f836eb61..0000000000 --- a/docs-site/src/examples/includeDates.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - includeDates={[new Date(), addDays(new Date(), 1)]} - placeholderText="This only includes today and tomorrow" - /> - ); -}; diff --git a/docs-site/src/examples/includeDatesMonthPicker.js b/docs-site/src/examples/includeDatesMonthPicker.js deleted file mode 100644 index ab70815b89..0000000000 --- a/docs-site/src/examples/includeDatesMonthPicker.js +++ /dev/null @@ -1,14 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(1661990400000); - return ( - setSelectedDate(date)} - dateFormat="MM/yyyy" - includeDates={[ - 1661990400000, 1664582400000, 1667260800000, 1672531200000, - ]} - showMonthYearPicker - /> - ); -}; diff --git a/docs-site/src/examples/includeTimes.js b/docs-site/src/examples/includeTimes.js deleted file mode 100644 index 93392ab543..0000000000 --- a/docs-site/src/examples/includeTimes.js +++ /dev/null @@ -1,19 +0,0 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState( - setHours(setMinutes(new Date(), 30), 16), - ); - return ( - setSelectedDateTime(date)} - showTimeSelect - includeTimes={[ - setHours(setMinutes(new Date(), 0), 17), - setHours(setMinutes(new Date(), 30), 18), - setHours(setMinutes(new Date(), 30), 19), - setHours(setMinutes(new Date(), 30), 17), - ]} - dateFormat="MMMM d, yyyy h:mm aa" - /> - ); -}; diff --git a/docs-site/src/examples/injectTimes.js b/docs-site/src/examples/injectTimes.js deleted file mode 100644 index 4dc5d46d1b..0000000000 --- a/docs-site/src/examples/injectTimes.js +++ /dev/null @@ -1,19 +0,0 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState( - setHours(setMinutes(new Date(), 30), 16), - ); - return ( - setSelectedDateTime(date)} - showTimeSelect - timeFormat="HH:mm:ss" - injectTimes={[ - setHours(setMinutes(setSeconds(new Date(), 10), 1), 0), - setHours(setMinutes(new Date(), 5), 12), - setHours(setMinutes(new Date(), 59), 23), - ]} - dateFormat="MMMM d, yyyy h:mm aa" - /> - ); -}; diff --git a/docs-site/src/examples/inline.js b/docs-site/src/examples/inline.js deleted file mode 100644 index ed1320d6e7..0000000000 --- a/docs-site/src/examples/inline.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - inline - /> - ); -}; diff --git a/docs-site/src/examples/live-provider-globals.d.ts b/docs-site/src/examples/live-provider-globals.d.ts new file mode 100644 index 0000000000..f693f16cf9 --- /dev/null +++ b/docs-site/src/examples/live-provider-globals.d.ts @@ -0,0 +1,24 @@ +import React from "react"; +import * as DateFNS from "date-fns"; +import type { ReactDatePickerCustomHeaderProps as ReactDatePickerCustomHeaderPropsType } from "react-datepicker"; +import type { MiddlewareState as MiddlewareStateType } from "@floating-ui/react"; +declare global { + const useMemo: typeof React.useMemo; + const useState: typeof React.useState; + const DatePicker: any; + const CalendarContainer: any; + const range: any; + const fi: any; + const forwardRef: typeof React.forwardRef; + const render: (component: React.ComponentType) => void; + + // DateFNS object is available globally + const DateFNS: typeof DateFNS; + + // Declare types + type ReactNode = React.ReactNode; + type ReactDatePickerCustomHeaderProps = ReactDatePickerCustomHeaderPropsType; + type MiddlewareState = MiddlewareStateType; +} + +export {}; diff --git a/docs-site/src/examples/locale.js b/docs-site/src/examples/locale.js deleted file mode 100644 index 3ab89d2ebe..0000000000 --- a/docs-site/src/examples/locale.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - locale="en-GB" - placeholderText="Weeks start on Monday" - /> - ); -}; diff --git a/docs-site/src/examples/localeWithTime.js b/docs-site/src/examples/localeWithTime.js deleted file mode 100644 index 8705ce1965..0000000000 --- a/docs-site/src/examples/localeWithTime.js +++ /dev/null @@ -1,14 +0,0 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState(new Date()); - return ( - setSelectedDateTime(date)} - locale="pt-BR" - showTimeSelect - timeFormat="p" - timeIntervals={15} - dateFormat="Pp" - /> - ); -}; diff --git a/docs-site/src/examples/localeWithoutGlobalVariable.js b/docs-site/src/examples/localeWithoutGlobalVariable.js deleted file mode 100644 index 0401483fe6..0000000000 --- a/docs-site/src/examples/localeWithoutGlobalVariable.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - locale={fi} - /> - ); -}; diff --git a/docs-site/src/examples/maxDate.js b/docs-site/src/examples/maxDate.js deleted file mode 100644 index 88c88f6110..0000000000 --- a/docs-site/src/examples/maxDate.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - maxDate={addDays(new Date(), 5)} - placeholderText="Select a date before 5 days in the future" - /> - ); -}; diff --git a/docs-site/src/examples/minDate.js b/docs-site/src/examples/minDate.js deleted file mode 100644 index 15d610bdfd..0000000000 --- a/docs-site/src/examples/minDate.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - minDate={subDays(new Date(), 5)} - placeholderText="Select a date after 5 days ago" - /> - ); -}; diff --git a/docs-site/src/examples/monthDropdown.js b/docs-site/src/examples/monthDropdown.js deleted file mode 100644 index 4f73efb77f..0000000000 --- a/docs-site/src/examples/monthDropdown.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - showMonthDropdown - /> - ); -}; diff --git a/docs-site/src/examples/monthDropdownShort.js b/docs-site/src/examples/monthDropdownShort.js deleted file mode 100644 index 13f068ebe5..0000000000 --- a/docs-site/src/examples/monthDropdownShort.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - showMonthDropdown - useShortMonthInDropdown - /> - ); -}; diff --git a/docs-site/src/examples/monthPicker.js b/docs-site/src/examples/monthPicker.js deleted file mode 100644 index 0e4a9a8b50..0000000000 --- a/docs-site/src/examples/monthPicker.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - dateFormat="MM/yyyy" - showMonthYearPicker - /> - ); -}; diff --git a/docs-site/src/examples/monthPickerFourColumns.js b/docs-site/src/examples/monthPickerFourColumns.js deleted file mode 100644 index d6c8ad9888..0000000000 --- a/docs-site/src/examples/monthPickerFourColumns.js +++ /dev/null @@ -1,13 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - dateFormat="MM/yyyy" - showMonthYearPicker - showFullMonthYearPicker - showFourColumnMonthYearPicker - /> - ); -}; diff --git a/docs-site/src/examples/monthPickerFullName.js b/docs-site/src/examples/monthPickerFullName.js deleted file mode 100644 index 8ef7c80f16..0000000000 --- a/docs-site/src/examples/monthPickerFullName.js +++ /dev/null @@ -1,12 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - dateFormat="MM/yyyy" - showMonthYearPicker - showFullMonthYearPicker - /> - ); -}; diff --git a/docs-site/src/examples/monthPickerTwoColumns.js b/docs-site/src/examples/monthPickerTwoColumns.js deleted file mode 100644 index b66ceadc1c..0000000000 --- a/docs-site/src/examples/monthPickerTwoColumns.js +++ /dev/null @@ -1,13 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - dateFormat="MM/yyyy" - showMonthYearPicker - showFullMonthYearPicker - showTwoColumnMonthYearPicker - /> - ); -}; diff --git a/docs-site/src/examples/monthYearDropdown.js b/docs-site/src/examples/monthYearDropdown.js deleted file mode 100644 index 9e21d6dbcb..0000000000 --- a/docs-site/src/examples/monthYearDropdown.js +++ /dev/null @@ -1,13 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - dateFormatCalendar={"MMM yyyy"} - minDate={subMonths(new Date(), 6)} - maxDate={addMonths(new Date(), 6)} - showMonthYearDropdown - /> - ); -}; diff --git a/docs-site/src/examples/multiMonth.js b/docs-site/src/examples/multiMonth.js deleted file mode 100644 index 92b8e44e9f..0000000000 --- a/docs-site/src/examples/multiMonth.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - monthsShown={2} - /> - ); -}; diff --git a/docs-site/src/examples/multiMonthDropdown.js b/docs-site/src/examples/multiMonthDropdown.js deleted file mode 100644 index ec3f89c49d..0000000000 --- a/docs-site/src/examples/multiMonthDropdown.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - monthsShown={2} - showYearDropdown - /> - ); -}; diff --git a/docs-site/src/examples/multiMonthInline.js b/docs-site/src/examples/multiMonthInline.js deleted file mode 100644 index 2e9d132ff0..0000000000 --- a/docs-site/src/examples/multiMonthInline.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - monthsShown={2} - inline - /> - ); -}; diff --git a/docs-site/src/examples/multiMonthPrevious.js b/docs-site/src/examples/multiMonthPrevious.js deleted file mode 100644 index 5f53557db6..0000000000 --- a/docs-site/src/examples/multiMonthPrevious.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - monthsShown={2} - /> - ); -}; diff --git a/docs-site/src/examples/noAnchorArrow.js b/docs-site/src/examples/noAnchorArrow.js deleted file mode 100644 index 6d9887b02b..0000000000 --- a/docs-site/src/examples/noAnchorArrow.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/openToDate.js b/docs-site/src/examples/openToDate.js deleted file mode 100644 index 0e862c3d1c..0000000000 --- a/docs-site/src/examples/openToDate.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - openToDate={new Date("1993/09/28")} - /> - ); -}; diff --git a/docs-site/src/examples/placeholderText.js b/docs-site/src/examples/placeholderText.js deleted file mode 100644 index d427ff41dc..0000000000 --- a/docs-site/src/examples/placeholderText.js +++ /dev/null @@ -1 +0,0 @@ -; diff --git a/docs-site/src/examples/portal.js b/docs-site/src/examples/portal.js deleted file mode 100644 index 485e3dc6b7..0000000000 --- a/docs-site/src/examples/portal.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - withPortal - /> - ); -}; diff --git a/docs-site/src/examples/portalById.js b/docs-site/src/examples/portalById.js deleted file mode 100644 index 725c592a0d..0000000000 --- a/docs-site/src/examples/portalById.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - portalId="root-portal" - /> - ); -}; diff --git a/docs-site/src/examples/quarterPicker.js b/docs-site/src/examples/quarterPicker.js deleted file mode 100644 index e8df74afa7..0000000000 --- a/docs-site/src/examples/quarterPicker.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - dateFormat="yyyy, QQQ" - showQuarterYearPicker - /> - ); -}; diff --git a/docs-site/src/examples/rangeMonthPickerSelectsRange.js b/docs-site/src/examples/rangeMonthPickerSelectsRange.js deleted file mode 100644 index 0074116d4b..0000000000 --- a/docs-site/src/examples/rangeMonthPickerSelectsRange.js +++ /dev/null @@ -1,21 +0,0 @@ -() => { - const [startDate, setStartDate] = useState(new Date("2014/02/08")); - const [endDate, setEndDate] = useState(null); - - const handleChange = ([newStartDate, newEndDate]) => { - setStartDate(newStartDate); - setEndDate(newEndDate); - }; - - return ( - - ); -}; diff --git a/docs-site/src/examples/rangeQuarterPickerSelectsRange.js b/docs-site/src/examples/rangeQuarterPickerSelectsRange.js deleted file mode 100644 index 981f0eb490..0000000000 --- a/docs-site/src/examples/rangeQuarterPickerSelectsRange.js +++ /dev/null @@ -1,21 +0,0 @@ -() => { - const [startDate, setStartDate] = useState(new Date("2014/02/08")); - const [endDate, setEndDate] = useState(null); - - const handleChange = ([newStartDate, newEndDate]) => { - setStartDate(newStartDate); - setEndDate(newEndDate); - }; - - return ( - - ); -}; diff --git a/docs-site/src/examples/rangeSwapRange.js b/docs-site/src/examples/rangeSwapRange.js deleted file mode 100644 index d78e30da31..0000000000 --- a/docs-site/src/examples/rangeSwapRange.js +++ /dev/null @@ -1,22 +0,0 @@ -() => { - const [startDate, setStartDate] = useState(new Date()); - const [endDate, setEndDate] = useState(null); - const onChange = (dates) => { - const [start, end] = dates; - setStartDate(start); - setEndDate(end); - }; - return ( - - ); -}; diff --git a/docs-site/src/examples/rangeYearPickerSelectsRange.js b/docs-site/src/examples/rangeYearPickerSelectsRange.js deleted file mode 100644 index 2a56c3ab18..0000000000 --- a/docs-site/src/examples/rangeYearPickerSelectsRange.js +++ /dev/null @@ -1,21 +0,0 @@ -() => { - const [startDate, setStartDate] = useState(new Date("2014/02/08")); - const [endDate, setEndDate] = useState(null); - - const handleChange = ([newStartDate, newEndDate]) => { - setStartDate(newStartDate); - setEndDate(newEndDate); - }; - - return ( - - ); -}; diff --git a/docs-site/src/examples/rawChange.js b/docs-site/src/examples/rawChange.js deleted file mode 100644 index 1b354ffd0a..0000000000 --- a/docs-site/src/examples/rawChange.js +++ /dev/null @@ -1,24 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - const handleChangeRaw = (value, selectedDateMeta) => { - console.log( - selectedDateMeta - ? `Selected Date Meta: ${JSON.stringify(selectedDateMeta)}` - : "No Selection Meta is available", - ); - - if (value === "tomorrow") { - setSelectedDate(addDays(new Date(), 1)); - } - }; - return ( - setSelectedDate(date)} - placeholderText='Enter "tomorrow"' - onChangeRaw={(event, selectedDateMeta) => - handleChangeRaw(event.target.value, selectedDateMeta) - } - /> - ); -}; diff --git a/docs-site/src/examples/readOnly.js b/docs-site/src/examples/readOnly.js deleted file mode 100644 index 4ca47e1eec..0000000000 --- a/docs-site/src/examples/readOnly.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - placeholderText="This is readOnly" - readOnly - /> - ); -}; diff --git a/docs-site/src/examples/renderCustomDay.js b/docs-site/src/examples/renderCustomDay.js deleted file mode 100644 index db0be11d37..0000000000 --- a/docs-site/src/examples/renderCustomDay.js +++ /dev/null @@ -1,14 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - const renderDayContents = (day, date) => { - const tooltipText = `Tooltip for date: ${date}`; - return {getDate(date)}; - }; - return ( - setSelectedDate(date)} - renderDayContents={renderDayContents} - /> - ); -}; diff --git a/docs-site/src/examples/renderCustomHeader.js b/docs-site/src/examples/renderCustomHeader.js deleted file mode 100644 index 4194d59f26..0000000000 --- a/docs-site/src/examples/renderCustomHeader.js +++ /dev/null @@ -1,72 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - const years = range(1990, getYear(new Date()) + 1, 1); - const months = [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", - ]; - return ( - ( -
- - - - - - -
- )} - selected={selectedDate} - onChange={(date) => setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/selectsRangeWithDisabledDates.js b/docs-site/src/examples/selectsRangeWithDisabledDates.js deleted file mode 100644 index e776ec1d3a..0000000000 --- a/docs-site/src/examples/selectsRangeWithDisabledDates.js +++ /dev/null @@ -1,21 +0,0 @@ -() => { - const [startDate, setStartDate] = useState(new Date()); - const [endDate, setEndDate] = useState(null); - const onChange = (dates) => { - const [start, end] = dates; - setStartDate(start); - setEndDate(end); - }; - return ( - - ); -}; diff --git a/docs-site/src/examples/showTimeOnly.js b/docs-site/src/examples/showTimeOnly.js deleted file mode 100644 index e6d15cb721..0000000000 --- a/docs-site/src/examples/showTimeOnly.js +++ /dev/null @@ -1,14 +0,0 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState(new Date()); - return ( - setSelectedDateTime(date)} - showTimeSelect - showTimeSelectOnly - timeIntervals={15} - timeCaption="Time" - dateFormat="h:mm aa" - /> - ); -}; diff --git a/docs-site/src/examples/specificDateRange.js b/docs-site/src/examples/specificDateRange.js deleted file mode 100644 index c5059cf4a9..0000000000 --- a/docs-site/src/examples/specificDateRange.js +++ /dev/null @@ -1,12 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - return ( - setSelectedDate(date)} - minDate={new Date()} - maxDate={addDays(new Date(), 5)} - placeholderText="Select a date between today and 5 days in the future" - /> - ); -}; diff --git a/docs-site/src/examples/strictParsing.js b/docs-site/src/examples/strictParsing.js deleted file mode 100644 index 9c2e722acf..0000000000 --- a/docs-site/src/examples/strictParsing.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - strictParsing - /> - ); -}; diff --git a/docs-site/src/examples/tabIndex.js b/docs-site/src/examples/tabIndex.js deleted file mode 100644 index f153868217..0000000000 --- a/docs-site/src/examples/tabIndex.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - tabIndex={1} - /> - ); -}; diff --git a/docs-site/src/examples/timeInput.js b/docs-site/src/examples/timeInput.js deleted file mode 100644 index 7bbf4385eb..0000000000 --- a/docs-site/src/examples/timeInput.js +++ /dev/null @@ -1,12 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - timeInputLabel="Time:" - dateFormat="MM/dd/yyyy h:mm aa" - showTimeInput - /> - ); -}; diff --git a/docs-site/src/examples/today.js b/docs-site/src/examples/today.js deleted file mode 100644 index 7b2eab2f21..0000000000 --- a/docs-site/src/examples/today.js +++ /dev/null @@ -1,10 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/toggleCalendarOnIconClick.js b/docs-site/src/examples/toggleCalendarOnIconClick.js deleted file mode 100644 index aea108c751..0000000000 --- a/docs-site/src/examples/toggleCalendarOnIconClick.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - /> - ); -}; diff --git a/docs-site/src/examples/calendarContainer.js b/docs-site/src/examples/ts/calendarContainer.tsx similarity index 58% rename from docs-site/src/examples/calendarContainer.js rename to docs-site/src/examples/ts/calendarContainer.tsx index 6efefff24e..a520b52aa1 100644 --- a/docs-site/src/examples/calendarContainer.js +++ b/docs-site/src/examples/ts/calendarContainer.tsx @@ -1,6 +1,13 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - const MyContainer = ({ className, children }) => { +const CustomCalendarContainer = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const MyContainer = ({ + className, + children, + }: { + className: string; + children: ReactNode; + }) => { return (
@@ -12,11 +19,14 @@
); }; + return ( setSelectedDate(date)} + onChange={(date: Date | null) => setSelectedDate(date)} calendarContainer={MyContainer} /> ); }; + +render(CustomCalendarContainer); diff --git a/docs-site/src/examples/ts/calendarIcon.tsx b/docs-site/src/examples/ts/calendarIcon.tsx new file mode 100644 index 0000000000..3afb0aff53 --- /dev/null +++ b/docs-site/src/examples/ts/calendarIcon.tsx @@ -0,0 +1,13 @@ +const CalendarIcon = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + /> + ); +}; + +render(CalendarIcon); diff --git a/docs-site/src/examples/ts/calendarIconExternal.tsx b/docs-site/src/examples/ts/calendarIconExternal.tsx new file mode 100644 index 0000000000..0971c089d8 --- /dev/null +++ b/docs-site/src/examples/ts/calendarIconExternal.tsx @@ -0,0 +1,14 @@ +const CalendarIconExternal = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + icon="fa fa-calendar" + /> + ); +}; + +render(CalendarIconExternal); diff --git a/docs-site/src/examples/calendarIconSvgIcon.js b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx similarity index 81% rename from docs-site/src/examples/calendarIconSvgIcon.js rename to docs-site/src/examples/ts/calendarIconSvgIcon.tsx index ef833ac89a..75bfd3ccd9 100644 --- a/docs-site/src/examples/calendarIconSvgIcon.js +++ b/docs-site/src/examples/ts/calendarIconSvgIcon.tsx @@ -1,10 +1,11 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); +const CalendarIconSvgIcon = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + return ( setSelectedDate(date)} + onChange={(date: Date | null) => setSelectedDate(date)} icon={ ); }; + +render(CalendarIconSvgIcon); diff --git a/docs-site/src/examples/ts/calendarStartDay.tsx b/docs-site/src/examples/ts/calendarStartDay.tsx new file mode 100644 index 0000000000..63d03429ce --- /dev/null +++ b/docs-site/src/examples/ts/calendarStartDay.tsx @@ -0,0 +1,13 @@ +const CalendarStartDay = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + calendarStartDay={3} + /> + ); +}; + +render(CalendarStartDay); diff --git a/docs-site/src/examples/ts/children.tsx b/docs-site/src/examples/ts/children.tsx new file mode 100644 index 0000000000..599c2f1fe7 --- /dev/null +++ b/docs-site/src/examples/ts/children.tsx @@ -0,0 +1,14 @@ +const Children = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + > +
Don't forget to check the weather!
+ + ); +}; + +render(Children); diff --git a/docs-site/src/examples/ts/clearInput.tsx b/docs-site/src/examples/ts/clearInput.tsx new file mode 100644 index 0000000000..88132933c9 --- /dev/null +++ b/docs-site/src/examples/ts/clearInput.tsx @@ -0,0 +1,14 @@ +const ClearInput = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + isClearable + placeholderText="I have been cleared!" + /> + ); +}; + +render(ClearInput); diff --git a/docs-site/src/examples/ts/closeOnScroll.tsx b/docs-site/src/examples/ts/closeOnScroll.tsx new file mode 100644 index 0000000000..5a8dc27c8d --- /dev/null +++ b/docs-site/src/examples/ts/closeOnScroll.tsx @@ -0,0 +1,13 @@ +const CloseOnScroll = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + /> + ); +}; + +render(CloseOnScroll); diff --git a/docs-site/src/examples/ts/closeOnScrollCallback.tsx b/docs-site/src/examples/ts/closeOnScrollCallback.tsx new file mode 100644 index 0000000000..62909e181d --- /dev/null +++ b/docs-site/src/examples/ts/closeOnScrollCallback.tsx @@ -0,0 +1,13 @@ +const CloseOnScrollCallback = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + e.target === document} + selected={selectedDate} + onChange={(date: Date | null) => setSelectedDate(date)} + /> + ); +}; + +render(CloseOnScrollCallback); diff --git a/docs-site/src/examples/configureFloatingUI.js b/docs-site/src/examples/ts/configureFloatingUI.tsx similarity index 56% rename from docs-site/src/examples/configureFloatingUI.js rename to docs-site/src/examples/ts/configureFloatingUI.tsx index 19f5bcd548..9f39737802 100644 --- a/docs-site/src/examples/configureFloatingUI.js +++ b/docs-site/src/examples/ts/configureFloatingUI.tsx @@ -1,15 +1,16 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); +const ConfigureFloatingUI = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + return ( setSelectedDate(date)} + onChange={(date: Date | null) => setSelectedDate(date)} popperClassName="some-custom-class" popperPlacement="top-end" popperModifiers={[ { name: "myModifier", - fn(state) { + fn(state: MiddlewareState) { // Do something with the state return state; }, @@ -18,3 +19,5 @@ /> ); }; + +render(ConfigureFloatingUI); diff --git a/docs-site/src/examples/ts/customCalendarClassName.tsx b/docs-site/src/examples/ts/customCalendarClassName.tsx new file mode 100644 index 0000000000..aafa6747fb --- /dev/null +++ b/docs-site/src/examples/ts/customCalendarClassName.tsx @@ -0,0 +1,13 @@ +const CustomCalendarClassName = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + calendarClassName="rasta-stripes" + /> + ); +}; + +render(CustomCalendarClassName); diff --git a/docs-site/src/examples/ts/customClassName.tsx b/docs-site/src/examples/ts/customClassName.tsx new file mode 100644 index 0000000000..ba29ad8ffe --- /dev/null +++ b/docs-site/src/examples/ts/customClassName.tsx @@ -0,0 +1,13 @@ +const CustomClassName = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + className="red-border" + /> + ); +}; + +render(CustomClassName); diff --git a/docs-site/src/examples/ts/customDateFormat.tsx b/docs-site/src/examples/ts/customDateFormat.tsx new file mode 100644 index 0000000000..3dc69655e9 --- /dev/null +++ b/docs-site/src/examples/ts/customDateFormat.tsx @@ -0,0 +1,13 @@ +const CustomDateFormat = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + /> + ); +}; + +render(CustomDateFormat); diff --git a/docs-site/src/examples/ts/customDayClassName.tsx b/docs-site/src/examples/ts/customDayClassName.tsx new file mode 100644 index 0000000000..cd0284f588 --- /dev/null +++ b/docs-site/src/examples/ts/customDayClassName.tsx @@ -0,0 +1,15 @@ +const CustomDayClassName = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + dayClassName={(date: Date) => + DateFNS.getDate(date) < Math.random() * 31 ? "random" : undefined + } + /> + ); +}; + +render(CustomDayClassName); diff --git a/docs-site/src/examples/ts/customInput.tsx b/docs-site/src/examples/ts/customInput.tsx new file mode 100644 index 0000000000..9e5dc48669 --- /dev/null +++ b/docs-site/src/examples/ts/customInput.tsx @@ -0,0 +1,28 @@ +type ExampleCustomInputProps = { + className?: string; + value?: string; + onClick?: () => void; +}; + +const CustomInput = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const ExampleCustomInput = forwardRef< + HTMLButtonElement, + ExampleCustomInputProps + >(({ value, onClick, className }, ref) => ( + + )); + + return ( + setSelectedDate(date)} + customInput={} + /> + ); +}; + +render(CustomInput); diff --git a/docs-site/src/examples/ts/customTimeClassName.tsx b/docs-site/src/examples/ts/customTimeClassName.tsx new file mode 100644 index 0000000000..05b79c8403 --- /dev/null +++ b/docs-site/src/examples/ts/customTimeClassName.tsx @@ -0,0 +1,20 @@ +const CustomTimeClassName = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + new Date(), + ); + + const handleColor = (time: Date): string => { + return time.getHours() > 12 ? "text-success" : "text-error"; + }; + + return ( + setSelectedDateTime(date)} + timeClassName={handleColor} + /> + ); +}; + +render(CustomTimeClassName); diff --git a/docs-site/src/examples/ts/customTimeInput.tsx b/docs-site/src/examples/ts/customTimeInput.tsx new file mode 100644 index 0000000000..cb997b7b59 --- /dev/null +++ b/docs-site/src/examples/ts/customTimeInput.tsx @@ -0,0 +1,36 @@ +interface ExampleCustomTimeInputProps { + date?: Date; + value?: string; + onChange?: (time: string) => void; +} + +const CustomTimeInput = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + new Date(), + ); + + const ExampleCustomTimeInput = ({ + value, + onChange, + }: ExampleCustomTimeInputProps) => ( + onChange?.(e.target.value)} + onClick={(e: React.MouseEvent) => + (e.target as HTMLInputElement).focus() + } + style={{ border: "solid 1px pink" }} + /> + ); + + return ( + setSelectedDateTime(date)} + showTimeInput + customTimeInput={} + /> + ); +}; + +render(CustomTimeInput); diff --git a/docs-site/src/examples/ts/dateRange.tsx b/docs-site/src/examples/ts/dateRange.tsx new file mode 100644 index 0000000000..3d0ad3dd32 --- /dev/null +++ b/docs-site/src/examples/ts/dateRange.tsx @@ -0,0 +1,28 @@ +const DateRange = () => { + const [selectedDate, setStartDate] = useState( + new Date("2014/02/08"), + ); + const [endDate, setEndDate] = useState(new Date("2014/02/10")); + + return ( + <> + setStartDate(date)} + selectsStart + startDate={selectedDate} + endDate={endDate} + /> + setEndDate(date)} + selectsEnd + startDate={selectedDate} + endDate={endDate} + minDate={selectedDate} + /> + + ); +}; + +render(DateRange); diff --git a/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx b/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx new file mode 100644 index 0000000000..766f15c70d --- /dev/null +++ b/docs-site/src/examples/ts/dateRangeInputWithClearButton.tsx @@ -0,0 +1,21 @@ +const DateRangeInputWithClearButton = () => { + const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([ + null, + null, + ]); + const [startDate, endDate] = dateRange; + + return ( + { + setDateRange(update); + }} + selectsRange + isClearable + /> + ); +}; + +render(DateRangeInputWithClearButton); diff --git a/docs-site/src/examples/ts/dateRangeWithPortal.tsx b/docs-site/src/examples/ts/dateRangeWithPortal.tsx new file mode 100644 index 0000000000..54da56e9de --- /dev/null +++ b/docs-site/src/examples/ts/dateRangeWithPortal.tsx @@ -0,0 +1,21 @@ +const DateRangeWithPortal = () => { + const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([ + null, + null, + ]); + const [startDate, endDate] = dateRange; + + return ( + { + setDateRange(update); + }} + selectsRange + withPortal + /> + ); +}; + +render(DateRangeWithPortal); diff --git a/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx new file mode 100644 index 0000000000..29a27b6905 --- /dev/null +++ b/docs-site/src/examples/ts/dateRangeWithShowDisabledNavigation.tsx @@ -0,0 +1,26 @@ +const DateRangeWithShowDisabledNavigation = () => { + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(null); + + const onChange = (dates: [Date | null, Date | null]) => { + const [start, end] = dates; + setStartDate(start); + setEndDate(end); + }; + + return ( + + ); +}; + +render(DateRangeWithShowDisabledNavigation); diff --git a/docs-site/src/examples/ts/default.tsx b/docs-site/src/examples/ts/default.tsx new file mode 100644 index 0000000000..00f348e908 --- /dev/null +++ b/docs-site/src/examples/ts/default.tsx @@ -0,0 +1,12 @@ +const Default = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + /> + ); +}; + +render(Default); diff --git a/docs-site/src/examples/ts/disabled.tsx b/docs-site/src/examples/ts/disabled.tsx new file mode 100644 index 0000000000..09ee2bf59c --- /dev/null +++ b/docs-site/src/examples/ts/disabled.tsx @@ -0,0 +1,14 @@ +const Disabled = () => { + const [selectedDate, setSelectedDate] = useState(null); + + return ( + setSelectedDate(date)} + disabled + placeholderText="This is disabled" + /> + ); +}; + +render(Disabled); diff --git a/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx new file mode 100644 index 0000000000..4b87269b0e --- /dev/null +++ b/docs-site/src/examples/ts/disabledKeyboardNavigation.tsx @@ -0,0 +1,14 @@ +const DisabledKeyboardNavigation = () => { + const [selectedDate, setSelectedDate] = useState(null); + + return ( + setSelectedDate(date)} + disabledKeyboardNavigation + placeholderText="This has disabled keyboard navigation" + /> + ); +}; + +render(DisabledKeyboardNavigation); diff --git a/docs-site/src/examples/ts/dontCloseOnSelect.tsx b/docs-site/src/examples/ts/dontCloseOnSelect.tsx new file mode 100644 index 0000000000..aa276b3071 --- /dev/null +++ b/docs-site/src/examples/ts/dontCloseOnSelect.tsx @@ -0,0 +1,13 @@ +const DontCloseOnSelect = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + shouldCloseOnSelect={false} + /> + ); +}; + +render(DontCloseOnSelect); diff --git a/docs-site/src/examples/ts/excludeDateIntervals.tsx b/docs-site/src/examples/ts/excludeDateIntervals.tsx new file mode 100644 index 0000000000..ab9d61082a --- /dev/null +++ b/docs-site/src/examples/ts/excludeDateIntervals.tsx @@ -0,0 +1,26 @@ +type TExcludeDateIntervals = { + start: Date; + end: Date; +}[]; + +const ExcludeDateIntervals = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const excludeDateIntervals: TExcludeDateIntervals = [ + { + start: DateFNS.subDays(new Date(), 5), + end: DateFNS.addDays(new Date(), 5), + }, + ]; + + return ( + setSelectedDate(date)} + excludeDateIntervals={excludeDateIntervals} + placeholderText="Select a date other than the interval from 5 days ago to 5 days in the future" + /> + ); +}; + +render(ExcludeDateIntervals); diff --git a/docs-site/src/examples/ts/excludeDates.tsx b/docs-site/src/examples/ts/excludeDates.tsx new file mode 100644 index 0000000000..088080f213 --- /dev/null +++ b/docs-site/src/examples/ts/excludeDates.tsx @@ -0,0 +1,26 @@ +type TExcludeDates = + | { + date: Date; + message?: string; + }[] + | Date[]; + +const ExcludeDates = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const excludeDates: TExcludeDates = [ + new Date(), + DateFNS.subDays(new Date(), 1), + ]; + + return ( + setSelectedDate(date)} + excludeDates={excludeDates} + placeholderText="Select a date other than today or yesterday" + /> + ); +}; + +render(ExcludeDates); diff --git a/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx new file mode 100644 index 0000000000..19522401b2 --- /dev/null +++ b/docs-site/src/examples/ts/excludeDatesMonthPicker.tsx @@ -0,0 +1,29 @@ +type TExcludeDates = + | { + date: Date; + message?: string; + }[] + | Date[]; + +const ExcludeDatesMonthPicker = () => { + const [selectedDate, setSelectedDate] = useState( + new Date("2024-08-01"), + ); + + const excludeDates: TExcludeDates = [ + new Date("2024-05-01"), + new Date("2024-06-01"), + ]; + + return ( + setSelectedDate(date)} + dateFormat="MM/yyyy" + excludeDates={excludeDates} + showMonthYearPicker + /> + ); +}; + +render(ExcludeDatesMonthPicker); diff --git a/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx new file mode 100644 index 0000000000..5732fd1931 --- /dev/null +++ b/docs-site/src/examples/ts/excludeDatesRangeMonthPicker.tsx @@ -0,0 +1,44 @@ +type TExcludeDates = + | { + date: Date; + message?: string; + }[] + | Date[]; + +const ExcludeDatesRangeMonthPicker = () => { + const defaultStartDate = new Date("2024-08-01"); + const defaultEndDate = new Date("2024-10-01"); + const [startDate, setStartDate] = useState(defaultStartDate); + const [endDate, setEndDate] = useState(defaultEndDate); + + const handleChange = ([newStartDate, newEndDate]: [ + Date | null, + Date | null, + ]) => { + setStartDate(newStartDate); + setEndDate(newEndDate); + }; + + const excludeDates: TExcludeDates = [ + new Date("2024-05-01"), + new Date("2024-02-01"), + new Date("2024-01-01"), + new Date("2024-11-01"), + ]; + + return ( + + ); +}; + +render(ExcludeDatesRangeMonthPicker); diff --git a/docs-site/src/examples/ts/excludeDatesWithMessage.tsx b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx new file mode 100644 index 0000000000..43f4c862bb --- /dev/null +++ b/docs-site/src/examples/ts/excludeDatesWithMessage.tsx @@ -0,0 +1,26 @@ +type TExcludeDates = + | { + date: Date; + message?: string; + }[] + | Date[]; + +const ExcludeDatesWithMessage = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const excludeDates: TExcludeDates = [ + { date: new Date(), message: "Today is excluded" }, + { date: DateFNS.subDays(new Date(), 1), message: "This day is excluded" }, + ]; + + return ( + setSelectedDate(date)} + excludeDates={excludeDates} + placeholderText="Select a date other than today or yesterday" + /> + ); +}; + +render(ExcludeDatesWithMessage); diff --git a/docs-site/src/examples/excludeTimePeriod.js b/docs-site/src/examples/ts/excludeTimePeriod.tsx similarity index 55% rename from docs-site/src/examples/excludeTimePeriod.js rename to docs-site/src/examples/ts/excludeTimePeriod.tsx index 2d805b1479..e00940aeb2 100644 --- a/docs-site/src/examples/excludeTimePeriod.js +++ b/docs-site/src/examples/ts/excludeTimePeriod.tsx @@ -1,11 +1,14 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState( +const { setHours, setMinutes } = DateFNS; + +const ExcludeTimePeriod = () => { + const [selectedDateTime, setSelectedDateTime] = useState( setHours(setMinutes(new Date(), 30), 17), ); + return ( setSelectedDateTime(date)} + onChange={(date: Date | null) => setSelectedDateTime(date)} showTimeSelect minTime={setHours(setMinutes(new Date(), 0), 17)} maxTime={setHours(setMinutes(new Date(), 30), 20)} @@ -13,3 +16,5 @@ /> ); }; + +render(ExcludeTimePeriod); diff --git a/docs-site/src/examples/ts/excludeTimes.tsx b/docs-site/src/examples/ts/excludeTimes.tsx new file mode 100644 index 0000000000..61bbbd75dd --- /dev/null +++ b/docs-site/src/examples/ts/excludeTimes.tsx @@ -0,0 +1,27 @@ +const { setHours, setMinutes } = DateFNS; +type TExcludeTimes = Date[]; + +const ExcludeTimes = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + setHours(setMinutes(new Date(), 30), 16), + ); + + const excludeTimes: TExcludeTimes = [ + setHours(setMinutes(new Date(), 0), 17), + setHours(setMinutes(new Date(), 30), 18), + setHours(setMinutes(new Date(), 30), 19), + setHours(setMinutes(new Date(), 30), 17), + ]; + + return ( + setSelectedDateTime(date)} + showTimeSelect + excludeTimes={excludeTimes} + dateFormat="MMMM d, yyyy h:mm aa" + /> + ); +}; + +render(ExcludeTimes); diff --git a/docs-site/src/examples/ts/excludeWeeks.tsx b/docs-site/src/examples/ts/excludeWeeks.tsx new file mode 100644 index 0000000000..dc7c1f5074 --- /dev/null +++ b/docs-site/src/examples/ts/excludeWeeks.tsx @@ -0,0 +1,29 @@ +type TExcludeDateIntervals = { + start: Date | string; + end: Date | string; +}[]; + +const ExcludeWeeks = () => { + const [selectedDate, setSelectedDate] = useState( + new Date("2021/02/22"), + ); + + const excludeWeeks: TExcludeDateIntervals = [ + { start: "2021/02/08", end: "2021/02/14" }, + { start: "2021/01/18", end: "2021/01/24" }, + ]; + + return ( + setSelectedDate(date)} + dateFormat="I/R" + locale="en-GB" + excludeDateIntervals={excludeWeeks} + showWeekNumbers + showWeekPicker + /> + ); +}; + +render(ExcludeWeeks); diff --git a/docs-site/src/examples/ts/externalForm.tsx b/docs-site/src/examples/ts/externalForm.tsx new file mode 100644 index 0000000000..9fe9519131 --- /dev/null +++ b/docs-site/src/examples/ts/externalForm.tsx @@ -0,0 +1,19 @@ +const ExternalForm = () => { + const [selectedDate, setSelectedDate] = useState(null); + + return ( + <> + setSelectedDate(date)} + required + form="external-form" + /> +
+ +
+ + ); +}; + +render(ExternalForm); diff --git a/docs-site/src/examples/ts/filterDates.tsx b/docs-site/src/examples/ts/filterDates.tsx new file mode 100644 index 0000000000..6dc1e386ec --- /dev/null +++ b/docs-site/src/examples/ts/filterDates.tsx @@ -0,0 +1,21 @@ +type TFilterDate = (date: Date) => boolean; + +const FilterDates = () => { + const [selectedDate, setSelectedDate] = useState(null); + + const isWeekday: TFilterDate = (date) => { + const day = DateFNS.getDay(date); + return day !== 0 && day !== 6; + }; + + return ( + setSelectedDate(date)} + filterDate={isWeekday} + placeholderText="Select a weekday" + /> + ); +}; + +render(FilterDates); diff --git a/docs-site/src/examples/filterTimes.js b/docs-site/src/examples/ts/filterTimes.tsx similarity index 52% rename from docs-site/src/examples/filterTimes.js rename to docs-site/src/examples/ts/filterTimes.tsx index 20d67d40df..d13ab92c6f 100644 --- a/docs-site/src/examples/filterTimes.js +++ b/docs-site/src/examples/ts/filterTimes.tsx @@ -1,20 +1,27 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState( +const { setHours, setMinutes } = DateFNS; +type TFilterTime = (time: Date) => boolean; + +const FilterTimes = () => { + const [selectedDateTime, setSelectedDateTime] = useState( setHours(setMinutes(new Date(), 0), 9), ); - const filterPassedTime = (time) => { + + const filterPassedTime: TFilterTime = (time) => { const currentDate = new Date(); const selectedDate = new Date(time); return currentDate.getTime() < selectedDate.getTime(); }; + return ( setSelectedDateTime(date)} + onChange={(date: Date | null) => setSelectedDateTime(date)} showTimeSelect filterTime={filterPassedTime} dateFormat="MMMM d, yyyy h:mm aa" /> ); }; + +render(FilterTimes); diff --git a/docs-site/src/examples/ts/fixedCalendar.tsx b/docs-site/src/examples/ts/fixedCalendar.tsx new file mode 100644 index 0000000000..40e774d5a4 --- /dev/null +++ b/docs-site/src/examples/ts/fixedCalendar.tsx @@ -0,0 +1,13 @@ +const FixedCalendar = () => { + const [selectedDate, setSelectedDate] = useState(null); + + return ( + setSelectedDate(date)} + fixedHeight + /> + ); +}; + +render(FixedCalendar); diff --git a/docs-site/src/examples/ts/hideTimeCaption.tsx b/docs-site/src/examples/ts/hideTimeCaption.tsx new file mode 100644 index 0000000000..63b06ebbd2 --- /dev/null +++ b/docs-site/src/examples/ts/hideTimeCaption.tsx @@ -0,0 +1,19 @@ +const HideTimeCaption = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + new Date(), + ); + + return ( + setSelectedDateTime(date)} + showTimeSelect + showTimeSelectOnly + timeIntervals={15} + dateFormat="h:mm aa" + showTimeCaption={false} + /> + ); +}; + +render(HideTimeCaption); diff --git a/docs-site/src/examples/ts/highlightDates.tsx b/docs-site/src/examples/ts/highlightDates.tsx new file mode 100644 index 0000000000..4fd11c82e1 --- /dev/null +++ b/docs-site/src/examples/ts/highlightDates.tsx @@ -0,0 +1,25 @@ +type HighlightDate = { + [className: string]: Date[]; +}; + +type THighlightDates = (Date | HighlightDate)[]; + +const HighlightDates = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const highlightDates: THighlightDates = [ + DateFNS.subDays(new Date(), 7), + DateFNS.addDays(new Date(), 7), + ]; + + return ( + setSelectedDate(date)} + highlightDates={highlightDates} + placeholderText="This highlights a week ago and a week from today" + /> + ); +}; + +render(HighlightDates); diff --git a/docs-site/src/examples/highlightDatesRanges.js b/docs-site/src/examples/ts/highlightDatesRanges.tsx similarity index 59% rename from docs-site/src/examples/highlightDatesRanges.js rename to docs-site/src/examples/ts/highlightDatesRanges.tsx index 2a09b480a2..f9165bdea7 100644 --- a/docs-site/src/examples/highlightDatesRanges.js +++ b/docs-site/src/examples/ts/highlightDatesRanges.tsx @@ -1,6 +1,14 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - const highlightWithRanges = [ +const { subDays, addDays } = DateFNS; +type HighlightDate = { + [className: string]: Date[]; +}; + +type THighlightDates = (Date | HighlightDate)[]; + +const HighlightDatesRanges = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const highlightWithRanges: THighlightDates = [ { "react-datepicker__day--highlighted-custom-1": [ subDays(new Date(), 4), @@ -18,12 +26,15 @@ ], }, ]; + return ( setSelectedDate(date)} + onChange={(date: Date | null) => setSelectedDate(date)} highlightDates={highlightWithRanges} placeholderText="This highlight two ranges with custom classes" /> ); }; + +render(HighlightDatesRanges); diff --git a/docs-site/src/examples/ts/holidayDates.tsx b/docs-site/src/examples/ts/holidayDates.tsx new file mode 100644 index 0000000000..5383da21de --- /dev/null +++ b/docs-site/src/examples/ts/holidayDates.tsx @@ -0,0 +1,27 @@ +type Holiday = { + date: string; + holidayName: string; +}; + +const HolidayDates = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const holidays: Holiday[] = [ + { date: "2023-08-15", holidayName: "India's Independence Day" }, + { date: "2023-12-31", holidayName: "New Year's Eve" }, + { date: "2023-12-25", holidayName: "Christmas" }, + { date: "2024-01-01", holidayName: "New Year's Day" }, + { date: "2023-11-23", holidayName: "Thanksgiving Day" }, + ]; + + return ( + setSelectedDate(date)} + holidays={holidays} + placeholderText="This display holidays" + /> + ); +}; + +render(HolidayDates); diff --git a/docs-site/src/examples/ts/includeDateIntervals.tsx b/docs-site/src/examples/ts/includeDateIntervals.tsx new file mode 100644 index 0000000000..ffd6772ab7 --- /dev/null +++ b/docs-site/src/examples/ts/includeDateIntervals.tsx @@ -0,0 +1,24 @@ +const { subDays, addDays } = DateFNS; +type TIncludeDateIntervals = { + start: Date; + end: Date; +}[]; + +const IncludeDateIntervals = () => { + const [selectedDate, setSelectedDate] = useState(null); + + const includeDateIntervals: TIncludeDateIntervals = [ + { start: subDays(new Date(), 5), end: addDays(new Date(), 5) }, + ]; + + return ( + setSelectedDate(date)} + includeDateIntervals={includeDateIntervals} + placeholderText="This only includes dates from 5 days ago to 5 days in the future" + /> + ); +}; + +render(IncludeDateIntervals); diff --git a/docs-site/src/examples/ts/includeDates.tsx b/docs-site/src/examples/ts/includeDates.tsx new file mode 100644 index 0000000000..0f4ae1eba7 --- /dev/null +++ b/docs-site/src/examples/ts/includeDates.tsx @@ -0,0 +1,19 @@ +const { addDays } = DateFNS; +type TIncludeDates = Date[]; + +const IncludeDates = () => { + const [selectedDate, setSelectedDate] = useState(null); + + const includeDates: TIncludeDates = [new Date(), addDays(new Date(), 1)]; + + return ( + setSelectedDate(date)} + includeDates={includeDates} + placeholderText="This only includes today and tomorrow" + /> + ); +}; + +render(IncludeDates); diff --git a/docs-site/src/examples/ts/includeDatesMonthPicker.tsx b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx new file mode 100644 index 0000000000..c6f1cc3a88 --- /dev/null +++ b/docs-site/src/examples/ts/includeDatesMonthPicker.tsx @@ -0,0 +1,21 @@ +type Timestamp = number; // milliseconds since Unix epoch + +const IncludeDatesMonthPicker = () => { + const [selectedDate, setSelectedDate] = useState(null); + + const includeDates: Timestamp[] = [ + 1661990400000, 1664582400000, 1667260800000, 1672531200000, + ]; + + return ( + setSelectedDate(date)} + dateFormat="MM/yyyy" + includeDates={includeDates} + showMonthYearPicker + /> + ); +}; + +render(IncludeDatesMonthPicker); diff --git a/docs-site/src/examples/ts/includeTimes.tsx b/docs-site/src/examples/ts/includeTimes.tsx new file mode 100644 index 0000000000..7ca1e15074 --- /dev/null +++ b/docs-site/src/examples/ts/includeTimes.tsx @@ -0,0 +1,26 @@ +const { setHours, setMinutes } = DateFNS; + +const IncludeTimes = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + setHours(setMinutes(new Date(), 30), 16), + ); + + const includeTimes: Date[] = [ + setHours(setMinutes(new Date(), 0), 17), + setHours(setMinutes(new Date(), 30), 18), + setHours(setMinutes(new Date(), 30), 19), + setHours(setMinutes(new Date(), 30), 17), + ]; + + return ( + setSelectedDateTime(date)} + showTimeSelect + includeTimes={includeTimes} + dateFormat="MMMM d, yyyy h:mm aa" + /> + ); +}; + +render(IncludeTimes); diff --git a/docs-site/src/examples/ts/injectTimes.tsx b/docs-site/src/examples/ts/injectTimes.tsx new file mode 100644 index 0000000000..bced85345c --- /dev/null +++ b/docs-site/src/examples/ts/injectTimes.tsx @@ -0,0 +1,26 @@ +const { setHours, setMinutes, setSeconds } = DateFNS; + +const InjectTimes = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + setHours(setMinutes(new Date(), 30), 16), + ); + + const injectTimes: Date[] = [ + setHours(setMinutes(setSeconds(new Date(), 10), 1), 0), + setHours(setMinutes(new Date(), 5), 12), + setHours(setMinutes(new Date(), 59), 23), + ]; + + return ( + setSelectedDateTime(date)} + showTimeSelect + timeFormat="HH:mm:ss" + injectTimes={injectTimes} + dateFormat="MMMM d, yyyy h:mm aa" + /> + ); +}; + +render(InjectTimes); diff --git a/docs-site/src/examples/ts/inline.tsx b/docs-site/src/examples/ts/inline.tsx new file mode 100644 index 0000000000..79535eaca1 --- /dev/null +++ b/docs-site/src/examples/ts/inline.tsx @@ -0,0 +1,13 @@ +const Inline = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + inline + /> + ); +}; + +render(Inline); diff --git a/docs-site/src/examples/inlineVisible.js b/docs-site/src/examples/ts/inlineVisible.tsx similarity index 56% rename from docs-site/src/examples/inlineVisible.js rename to docs-site/src/examples/ts/inlineVisible.tsx index 2a11e74cd8..a4ba886f9e 100644 --- a/docs-site/src/examples/inlineVisible.js +++ b/docs-site/src/examples/ts/inlineVisible.tsx @@ -1,18 +1,21 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); +const InlineVisible = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); const [isOpen, setIsOpen] = useState(false); - const handleChange = (e) => { + + const handleChange = (e: Date | null) => { setIsOpen(!isOpen); setSelectedDate(e); }; - const handleClick = (e) => { + + const handleClick = (e: React.MouseEvent) => { e.preventDefault(); setIsOpen(!isOpen); }; + return ( <> {isOpen && ( @@ -20,3 +23,5 @@ ); }; + +render(InlineVisible); diff --git a/docs-site/src/examples/ts/locale.tsx b/docs-site/src/examples/ts/locale.tsx new file mode 100644 index 0000000000..890b9c48b2 --- /dev/null +++ b/docs-site/src/examples/ts/locale.tsx @@ -0,0 +1,14 @@ +const Locale = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + locale="en-GB" + placeholderText="Weeks start on Monday" + /> + ); +}; + +render(Locale); diff --git a/docs-site/src/examples/ts/localeWithTime.tsx b/docs-site/src/examples/ts/localeWithTime.tsx new file mode 100644 index 0000000000..3532bfc6a4 --- /dev/null +++ b/docs-site/src/examples/ts/localeWithTime.tsx @@ -0,0 +1,19 @@ +const LocaleWithTime = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + new Date(), + ); + + return ( + setSelectedDateTime(date)} + locale="pt-BR" + showTimeSelect + timeFormat="p" + timeIntervals={15} + dateFormat="Pp" + /> + ); +}; + +render(LocaleWithTime); diff --git a/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx new file mode 100644 index 0000000000..9bd3e55cb1 --- /dev/null +++ b/docs-site/src/examples/ts/localeWithoutGlobalVariable.tsx @@ -0,0 +1,13 @@ +const LocaleWithoutGlobalVariable = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + locale={fi} + /> + ); +}; + +render(LocaleWithoutGlobalVariable); diff --git a/docs-site/src/examples/ts/maxDate.tsx b/docs-site/src/examples/ts/maxDate.tsx new file mode 100644 index 0000000000..9385a2f0a7 --- /dev/null +++ b/docs-site/src/examples/ts/maxDate.tsx @@ -0,0 +1,14 @@ +const MaxDate = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + maxDate={DateFNS.addDays(new Date(), 5)} + placeholderText="Select a date before 5 days in the future" + /> + ); +}; + +render(MaxDate); diff --git a/docs-site/src/examples/ts/minDate.tsx b/docs-site/src/examples/ts/minDate.tsx new file mode 100644 index 0000000000..99465c4d70 --- /dev/null +++ b/docs-site/src/examples/ts/minDate.tsx @@ -0,0 +1,14 @@ +const MinDate = () => { + const [selectedDate, setSelectedDate] = useState(null); + + return ( + setSelectedDate(date)} + minDate={DateFNS.subDays(new Date(), 5)} + placeholderText="Select a date after 5 days ago" + /> + ); +}; + +render(MinDate); diff --git a/docs-site/src/examples/ts/monthDropdown.tsx b/docs-site/src/examples/ts/monthDropdown.tsx new file mode 100644 index 0000000000..5d0e9c8a8e --- /dev/null +++ b/docs-site/src/examples/ts/monthDropdown.tsx @@ -0,0 +1,13 @@ +const MonthDropdown = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + showMonthDropdown + /> + ); +}; + +render(MonthDropdown); diff --git a/docs-site/src/examples/ts/monthDropdownShort.tsx b/docs-site/src/examples/ts/monthDropdownShort.tsx new file mode 100644 index 0000000000..9a381ca542 --- /dev/null +++ b/docs-site/src/examples/ts/monthDropdownShort.tsx @@ -0,0 +1,14 @@ +const MonthDropdownShort = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + showMonthDropdown + useShortMonthInDropdown + /> + ); +}; + +render(MonthDropdownShort); diff --git a/docs-site/src/examples/ts/monthPicker.tsx b/docs-site/src/examples/ts/monthPicker.tsx new file mode 100644 index 0000000000..95604948ba --- /dev/null +++ b/docs-site/src/examples/ts/monthPicker.tsx @@ -0,0 +1,14 @@ +const MonthPicker = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + dateFormat="MM/yyyy" + showMonthYearPicker + /> + ); +}; + +render(MonthPicker); diff --git a/docs-site/src/examples/ts/monthPickerFourColumns.tsx b/docs-site/src/examples/ts/monthPickerFourColumns.tsx new file mode 100644 index 0000000000..6a6ea8cb61 --- /dev/null +++ b/docs-site/src/examples/ts/monthPickerFourColumns.tsx @@ -0,0 +1,16 @@ +const MonthPickerFourColumns = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + dateFormat="MM/yyyy" + showMonthYearPicker + showFullMonthYearPicker + showFourColumnMonthYearPicker + /> + ); +}; + +render(MonthPickerFourColumns); diff --git a/docs-site/src/examples/ts/monthPickerFullName.tsx b/docs-site/src/examples/ts/monthPickerFullName.tsx new file mode 100644 index 0000000000..5a8c4591e4 --- /dev/null +++ b/docs-site/src/examples/ts/monthPickerFullName.tsx @@ -0,0 +1,15 @@ +const MonthPickerFullName = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + dateFormat="MM/yyyy" + showMonthYearPicker + showFullMonthYearPicker + /> + ); +}; + +render(MonthPickerFullName); diff --git a/docs-site/src/examples/ts/monthPickerTwoColumns.tsx b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx new file mode 100644 index 0000000000..1876b3cc39 --- /dev/null +++ b/docs-site/src/examples/ts/monthPickerTwoColumns.tsx @@ -0,0 +1,16 @@ +const MonthPickerTwoColumns = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + dateFormat="MM/yyyy" + showMonthYearPicker + showFullMonthYearPicker + showTwoColumnMonthYearPicker + /> + ); +}; + +render(MonthPickerTwoColumns); diff --git a/docs-site/src/examples/ts/monthYearDropdown.tsx b/docs-site/src/examples/ts/monthYearDropdown.tsx new file mode 100644 index 0000000000..65c8495cb7 --- /dev/null +++ b/docs-site/src/examples/ts/monthYearDropdown.tsx @@ -0,0 +1,18 @@ +const { subMonths, addMonths } = DateFNS; + +const MonthYearDropdown = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + dateFormatCalendar={"MMM yyyy"} + minDate={subMonths(new Date(), 6)} + maxDate={addMonths(new Date(), 6)} + showMonthYearDropdown + /> + ); +}; + +render(MonthYearDropdown); diff --git a/docs-site/src/examples/ts/multiMonth.tsx b/docs-site/src/examples/ts/multiMonth.tsx new file mode 100644 index 0000000000..2560987d13 --- /dev/null +++ b/docs-site/src/examples/ts/multiMonth.tsx @@ -0,0 +1,13 @@ +const MultiMonth = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + monthsShown={2} + /> + ); +}; + +render(MultiMonth); diff --git a/docs-site/src/examples/ts/multiMonthDropdown.tsx b/docs-site/src/examples/ts/multiMonthDropdown.tsx new file mode 100644 index 0000000000..2f62917624 --- /dev/null +++ b/docs-site/src/examples/ts/multiMonthDropdown.tsx @@ -0,0 +1,14 @@ +const MultiMonthDropdown = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + monthsShown={2} + showYearDropdown + /> + ); +}; + +render(MultiMonthDropdown); diff --git a/docs-site/src/examples/ts/multiMonthInline.tsx b/docs-site/src/examples/ts/multiMonthInline.tsx new file mode 100644 index 0000000000..4c2fc98e23 --- /dev/null +++ b/docs-site/src/examples/ts/multiMonthInline.tsx @@ -0,0 +1,14 @@ +const MultiMonthInline = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + monthsShown={2} + inline + /> + ); +}; + +render(MultiMonthInline); diff --git a/docs-site/src/examples/ts/multiMonthPrevious.tsx b/docs-site/src/examples/ts/multiMonthPrevious.tsx new file mode 100644 index 0000000000..3b826db628 --- /dev/null +++ b/docs-site/src/examples/ts/multiMonthPrevious.tsx @@ -0,0 +1,14 @@ +const MultiMonthPrevious = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + monthsShown={2} + /> + ); +}; + +render(MultiMonthPrevious); diff --git a/docs-site/src/examples/ts/noAnchorArrow.tsx b/docs-site/src/examples/ts/noAnchorArrow.tsx new file mode 100644 index 0000000000..b33b8310b1 --- /dev/null +++ b/docs-site/src/examples/ts/noAnchorArrow.tsx @@ -0,0 +1,13 @@ +const NoAnchorArrow = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + /> + ); +}; + +render(NoAnchorArrow); diff --git a/docs-site/src/examples/onBlurCallbacks.js b/docs-site/src/examples/ts/onBlurCallbacks.tsx similarity index 52% rename from docs-site/src/examples/onBlurCallbacks.js rename to docs-site/src/examples/ts/onBlurCallbacks.tsx index 46557ac732..35b848a0a0 100644 --- a/docs-site/src/examples/onBlurCallbacks.js +++ b/docs-site/src/examples/ts/onBlurCallbacks.tsx @@ -1,6 +1,11 @@ -() => { - const [selectedDate, setSelectedDate] = useState(null); - const handleOnBlur = ({ target: { value } }) => { +const { isValid, format } = DateFNS; + +const OnBlurCallbacks = () => { + const [selectedDate, setSelectedDate] = useState(null); + + const handleOnBlur = ({ + target: { value }, + }: React.FocusEvent) => { const date = new Date(value); if (isValid(date)) { console.log("date: %s", format(date, "dd/MM/yyyy")); @@ -8,13 +13,16 @@ console.log("value: %s", date); } }; + return ( setSelectedDate(date)} + onChange={(date: Date | null) => setSelectedDate(date)} onBlur={handleOnBlur} placeholderText="View blur callbacks in console" /> ); }; + +render(OnBlurCallbacks); diff --git a/docs-site/src/examples/onCalendarOpenStateCallbacks.js b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx similarity index 54% rename from docs-site/src/examples/onCalendarOpenStateCallbacks.js rename to docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx index 7608902918..034a01bbc3 100644 --- a/docs-site/src/examples/onCalendarOpenStateCallbacks.js +++ b/docs-site/src/examples/ts/onCalendarOpenStateCallbacks.tsx @@ -1,15 +1,17 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); +const OnCalendarOpenStateCallbacks = () => { + const [date, setDate] = useState(new Date()); const handleCalendarClose = () => console.log("Calendar closed"); const handleCalendarOpen = () => console.log("Calendar opened"); return ( setSelectedDate(date)} + selected={date} + onChange={(date: Date | null) => setDate(date)} onCalendarClose={handleCalendarClose} onCalendarOpen={handleCalendarOpen} /> ); }; + +render(OnCalendarOpenStateCallbacks); diff --git a/docs-site/src/examples/ts/openToDate.tsx b/docs-site/src/examples/ts/openToDate.tsx new file mode 100644 index 0000000000..a03f7a0b0d --- /dev/null +++ b/docs-site/src/examples/ts/openToDate.tsx @@ -0,0 +1,13 @@ +const OpenToDate = () => { + const [selectedDate, setSelectedDate] = useState(null); + + return ( + setSelectedDate(date)} + openToDate={new Date("1993/09/28")} + /> + ); +}; + +render(OpenToDate); diff --git a/docs-site/src/examples/ts/placeholderText.tsx b/docs-site/src/examples/ts/placeholderText.tsx new file mode 100644 index 0000000000..6bb807b6ea --- /dev/null +++ b/docs-site/src/examples/ts/placeholderText.tsx @@ -0,0 +1,5 @@ +const PlaceholderText = () => { + return ; +}; + +render(PlaceholderText); diff --git a/docs-site/src/examples/ts/portal.tsx b/docs-site/src/examples/ts/portal.tsx new file mode 100644 index 0000000000..38de9fa23e --- /dev/null +++ b/docs-site/src/examples/ts/portal.tsx @@ -0,0 +1,13 @@ +const Portal = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + withPortal + /> + ); +}; + +render(Portal); diff --git a/docs-site/src/examples/ts/portalById.tsx b/docs-site/src/examples/ts/portalById.tsx new file mode 100644 index 0000000000..0a38653a06 --- /dev/null +++ b/docs-site/src/examples/ts/portalById.tsx @@ -0,0 +1,13 @@ +const PortalById = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + portalId="root-portal" + /> + ); +}; + +render(PortalById); diff --git a/docs-site/src/examples/ts/quarterPicker.tsx b/docs-site/src/examples/ts/quarterPicker.tsx new file mode 100644 index 0000000000..6b2a94a551 --- /dev/null +++ b/docs-site/src/examples/ts/quarterPicker.tsx @@ -0,0 +1,14 @@ +const QuarterPicker = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + dateFormat="yyyy, QQQ" + showQuarterYearPicker + /> + ); +}; + +render(QuarterPicker); diff --git a/docs-site/src/examples/rangeMonthPicker.js b/docs-site/src/examples/ts/rangeMonthPicker.tsx similarity index 53% rename from docs-site/src/examples/rangeMonthPicker.js rename to docs-site/src/examples/ts/rangeMonthPicker.tsx index 4ecaf1f62a..dbdefd5f46 100644 --- a/docs-site/src/examples/rangeMonthPicker.js +++ b/docs-site/src/examples/ts/rangeMonthPicker.tsx @@ -1,11 +1,14 @@ -() => { - const [startDate, setStartDate] = useState(new Date("2014/02/08")); - const [endDate, setEndDate] = useState(new Date("2014/04/08")); +const RangeMonthPicker = () => { + const [startDate, setStartDate] = useState( + new Date("2014/02/08"), + ); + const [endDate, setEndDate] = useState(new Date("2014/04/08")); + return ( <> setStartDate(date)} + onChange={(date: Date | null) => setStartDate(date)} selectsStart startDate={startDate} endDate={endDate} @@ -14,7 +17,7 @@ /> setEndDate(date)} + onChange={(date: Date | null) => setEndDate(date)} selectsEnd startDate={startDate} endDate={endDate} @@ -24,3 +27,5 @@ ); }; + +render(RangeMonthPicker); diff --git a/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.tsx b/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.tsx new file mode 100644 index 0000000000..4ddbd8a241 --- /dev/null +++ b/docs-site/src/examples/ts/rangeMonthPickerSelectsRange.tsx @@ -0,0 +1,28 @@ +const RangeMonthPickerSelectsRange = () => { + const [startDate, setStartDate] = useState( + new Date("2014/02/08"), + ); + const [endDate, setEndDate] = useState(null); + + const handleChange = ([newStartDate, newEndDate]: [ + Date | null, + Date | null, + ]) => { + setStartDate(newStartDate); + setEndDate(newEndDate); + }; + + return ( + + ); +}; + +render(RangeMonthPickerSelectsRange); diff --git a/docs-site/src/examples/rangeQuarterPicker.js b/docs-site/src/examples/ts/rangeQuarterPicker.tsx similarity index 54% rename from docs-site/src/examples/rangeQuarterPicker.js rename to docs-site/src/examples/ts/rangeQuarterPicker.tsx index 1c96a593fe..91b169784b 100644 --- a/docs-site/src/examples/rangeQuarterPicker.js +++ b/docs-site/src/examples/ts/rangeQuarterPicker.tsx @@ -1,11 +1,14 @@ -() => { - const [startDate, setStartDate] = useState(new Date("2014/02/08")); - const [endDate, setEndDate] = useState(new Date("2014/07/08")); +const RangeQuarterPicker = () => { + const [startDate, setStartDate] = useState( + new Date("2014/02/08"), + ); + const [endDate, setEndDate] = useState(new Date("2014/07/08")); + return ( <> setStartDate(date)} + onChange={(date: Date | null) => setStartDate(date)} selectsStart startDate={startDate} endDate={endDate} @@ -14,7 +17,7 @@ /> setEndDate(date)} + onChange={(date: Date | null) => setEndDate(date)} selectsEnd startDate={startDate} endDate={endDate} @@ -24,3 +27,5 @@ ); }; + +render(RangeQuarterPicker); diff --git a/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.tsx b/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.tsx new file mode 100644 index 0000000000..7db4798e6f --- /dev/null +++ b/docs-site/src/examples/ts/rangeQuarterPickerSelectsRange.tsx @@ -0,0 +1,28 @@ +const RangeQuarterPickerSelectsRange = () => { + const [startDate, setStartDate] = useState( + new Date("2014/02/08"), + ); + const [endDate, setEndDate] = useState(null); + + const handleChange = ([newStartDate, newEndDate]: [ + Date | null, + Date | null, + ]) => { + setStartDate(newStartDate); + setEndDate(newEndDate); + }; + + return ( + + ); +}; + +render(RangeQuarterPickerSelectsRange); diff --git a/docs-site/src/examples/ts/rangeSwapRange.tsx b/docs-site/src/examples/ts/rangeSwapRange.tsx new file mode 100644 index 0000000000..b5d7127fdd --- /dev/null +++ b/docs-site/src/examples/ts/rangeSwapRange.tsx @@ -0,0 +1,40 @@ +const { addDays } = DateFNS; + +type TExcludeDates = + | { + date: Date; + message?: string; + }[] + | Date[]; + +const RangeSwapRange = () => { + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(null); + + const onChange = (dates: [Date | null, Date | null]) => { + const [start, end] = dates; + setStartDate(start); + setEndDate(end); + }; + + const excludeDates: TExcludeDates = [ + addDays(new Date(), 1), + addDays(new Date(), 5), + ]; + + return ( + + ); +}; + +render(RangeSwapRange); diff --git a/docs-site/src/examples/rangeYearPicker.js b/docs-site/src/examples/ts/rangeYearPicker.tsx similarity index 52% rename from docs-site/src/examples/rangeYearPicker.js rename to docs-site/src/examples/ts/rangeYearPicker.tsx index 0328cfe123..fd52a4a2df 100644 --- a/docs-site/src/examples/rangeYearPicker.js +++ b/docs-site/src/examples/ts/rangeYearPicker.tsx @@ -1,11 +1,14 @@ -() => { - const [startDate, setStartDate] = useState(new Date("2014/02/08")); - const [endDate, setEndDate] = useState(new Date("2024/04/08")); +const RangeYearPicker = () => { + const [startDate, setStartDate] = useState( + new Date("2014/02/08"), + ); + const [endDate, setEndDate] = useState(new Date("2024/04/08")); + return ( <> setStartDate(date)} + onChange={(date: Date | null) => setStartDate(date)} selectsStart startDate={startDate} endDate={endDate} @@ -14,7 +17,7 @@ /> setEndDate(date)} + onChange={(date: Date | null) => setEndDate(date)} selectsEnd startDate={startDate} endDate={endDate} @@ -24,3 +27,5 @@ ); }; + +render(RangeYearPicker); diff --git a/docs-site/src/examples/ts/rangeYearPickerSelectsRange.tsx b/docs-site/src/examples/ts/rangeYearPickerSelectsRange.tsx new file mode 100644 index 0000000000..d446d39271 --- /dev/null +++ b/docs-site/src/examples/ts/rangeYearPickerSelectsRange.tsx @@ -0,0 +1,28 @@ +const RangeYearPickerSelectsRange = () => { + const [startDate, setStartDate] = useState( + new Date("2014/02/08"), + ); + const [endDate, setEndDate] = useState(null); + + const handleChange = ([newStartDate, newEndDate]: [ + Date | null, + Date | null, + ]) => { + setStartDate(newStartDate); + setEndDate(newEndDate); + }; + + return ( + + ); +}; + +render(RangeYearPickerSelectsRange); diff --git a/docs-site/src/examples/ts/rawChange.tsx b/docs-site/src/examples/ts/rawChange.tsx new file mode 100644 index 0000000000..014d000a02 --- /dev/null +++ b/docs-site/src/examples/ts/rawChange.tsx @@ -0,0 +1,44 @@ +interface SelectedDateMeta { + date: Date; + formattedDate: string; +} + +const RawChange = () => { + const [selectedDate, setSelectedDate] = useState(null); + + const handleChangeRaw = ( + value: string, + selectedDateMeta?: SelectedDateMeta | null, + ) => { + console.log( + selectedDateMeta + ? `Selected Date Meta: ${JSON.stringify(selectedDateMeta)}` + : "No Selection Meta is available", + ); + + if (value === "tomorrow") { + setSelectedDate(DateFNS.addDays(new Date(), 1)); + } + }; + + return ( + setSelectedDate(date)} + placeholderText='Enter "tomorrow"' + onChangeRaw={( + event: + | React.MouseEvent + | React.KeyboardEvent + | React.ChangeEvent, + selectedDateMeta?: SelectedDateMeta | null, + ) => { + if (event.target instanceof HTMLInputElement) { + handleChangeRaw(event.target.value, selectedDateMeta); + } + }} + /> + ); +}; + +render(RawChange); diff --git a/docs-site/src/examples/ts/readOnly.tsx b/docs-site/src/examples/ts/readOnly.tsx new file mode 100644 index 0000000000..13128ce4c1 --- /dev/null +++ b/docs-site/src/examples/ts/readOnly.tsx @@ -0,0 +1,14 @@ +const ReadOnly = () => { + const [selectedDate, setSelectedDate] = useState(null); + + return ( + setSelectedDate(date)} + placeholderText="This is readOnly" + readOnly + /> + ); +}; + +render(ReadOnly); diff --git a/docs-site/src/examples/ts/renderCustomDay.tsx b/docs-site/src/examples/ts/renderCustomDay.tsx new file mode 100644 index 0000000000..8e79cfca24 --- /dev/null +++ b/docs-site/src/examples/ts/renderCustomDay.tsx @@ -0,0 +1,19 @@ +const RenderCustomDay = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + const renderDayContents = (day: number, date: Date): React.ReactNode => { + const tooltipText = `Tooltip for date: ${date}`; + + return {DateFNS.getDate(date)}; + }; + + return ( + setSelectedDate(date)} + renderDayContents={renderDayContents} + /> + ); +}; + +render(RenderCustomDay); diff --git a/docs-site/src/examples/ts/renderCustomHeader.tsx b/docs-site/src/examples/ts/renderCustomHeader.tsx new file mode 100644 index 0000000000..42f21576d5 --- /dev/null +++ b/docs-site/src/examples/ts/renderCustomHeader.tsx @@ -0,0 +1,80 @@ +const { getYear, getMonth } = DateFNS; +const MONTHS = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", +] as const; + +const years = range(1990, getYear(new Date()) + 1, 1) as number[]; + +const CustomHeader = ({ + date, + changeYear, + changeMonth, + decreaseMonth, + increaseMonth, + prevMonthButtonDisabled, + nextMonthButtonDisabled, +}: ReactDatePickerCustomHeaderProps) => ( +
+ + + + + + +
+); + +const RenderCustomHeader = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + /> + ); +}; + +render(RenderCustomHeader); diff --git a/docs-site/src/examples/renderCustomHeaderTwoMonths.js b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx similarity index 84% rename from docs-site/src/examples/renderCustomHeaderTwoMonths.js rename to docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx index 5135cb4aa6..ec94cc87c4 100644 --- a/docs-site/src/examples/renderCustomHeaderTwoMonths.js +++ b/docs-site/src/examples/ts/renderCustomHeaderTwoMonths.tsx @@ -1,6 +1,7 @@ -() => { - const [startDate, setStartDate] = useState(new Date()); +const RenderCustomHeaderTwoMonths = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); const monthsShown = useMemo(() => 2, []); + return ( ( + }: ReactDatePickerCustomHeaderProps) => (
)} - selected={startDate} - onChange={(date) => setStartDate(date)} + selected={selectedDate} + onChange={(date: Date | null) => setSelectedDate(date)} monthsShown={monthsShown} /> ); }; + +render(RenderCustomHeaderTwoMonths); diff --git a/docs-site/src/examples/renderCustomMonth.js b/docs-site/src/examples/ts/renderCustomMonth.tsx similarity index 63% rename from docs-site/src/examples/renderCustomMonth.js rename to docs-site/src/examples/ts/renderCustomMonth.tsx index d9ffa17984..ff4173407f 100644 --- a/docs-site/src/examples/renderCustomMonth.js +++ b/docs-site/src/examples/ts/renderCustomMonth.tsx @@ -1,10 +1,16 @@ -() => { - const renderMonthContent = (month, shortMonth, longMonth, day) => { +const RenderCustomMonth = () => { + const renderMonthContent = ( + month: number, + shortMonth: string, + longMonth: string, + day: Date, + ): React.ReactNode => { const fullYear = new Date(day).getFullYear(); const tooltipText = `Tooltip for month: ${longMonth} ${fullYear}`; return {shortMonth}; }; + return ( ); }; + +render(RenderCustomMonth); diff --git a/docs-site/src/examples/renderCustomQuarter.js b/docs-site/src/examples/ts/renderCustomQuarter.tsx similarity index 63% rename from docs-site/src/examples/renderCustomQuarter.js rename to docs-site/src/examples/ts/renderCustomQuarter.tsx index cb73ea62f9..eec2d00dcf 100644 --- a/docs-site/src/examples/renderCustomQuarter.js +++ b/docs-site/src/examples/ts/renderCustomQuarter.tsx @@ -1,8 +1,13 @@ -() => { - const renderQuarterContent = (quarter, shortQuarter) => { +const RenderCustomQuarter = () => { + const renderQuarterContent = ( + quarter: number, + shortQuarter: string, + ): React.ReactNode => { const tooltipText = `Tooltip for quarter: ${quarter}`; + return {shortQuarter}; }; + return ( ); }; + +render(RenderCustomQuarter); diff --git a/docs-site/src/examples/renderCustomYear.js b/docs-site/src/examples/ts/renderCustomYear.tsx similarity index 68% rename from docs-site/src/examples/renderCustomYear.js rename to docs-site/src/examples/ts/renderCustomYear.tsx index 044a776e96..c9f3b9bd6e 100644 --- a/docs-site/src/examples/renderCustomYear.js +++ b/docs-site/src/examples/ts/renderCustomYear.tsx @@ -1,8 +1,9 @@ -() => { - const renderYearContent = (year) => { +const RenderCustomYear = () => { + const renderYearContent = (year: number): React.ReactNode => { const tooltipText = `Tooltip for year: ${year}`; return {year}; }; + return ( ); }; + +render(RenderCustomYear); diff --git a/docs-site/src/examples/selectsMultiple.js b/docs-site/src/examples/ts/selectsMultiple.tsx similarity index 53% rename from docs-site/src/examples/selectsMultiple.js rename to docs-site/src/examples/ts/selectsMultiple.tsx index 4848505590..f83f307ecd 100644 --- a/docs-site/src/examples/selectsMultiple.js +++ b/docs-site/src/examples/ts/selectsMultiple.tsx @@ -1,8 +1,12 @@ -() => { - const [selectedDates, setSelectedDates] = useState([new Date()]); - const onChange = (dates) => { +const SelectsMultiple = () => { + const [selectedDates, setSelectedDates] = useState([ + new Date(), + ]); + + const onChange = (dates: Date[] | null) => { setSelectedDates(dates); }; + return ( ); }; + +render(SelectsMultiple); diff --git a/docs-site/src/examples/selectsMultipleMonths.js b/docs-site/src/examples/ts/selectsMultipleMonths.tsx similarity index 57% rename from docs-site/src/examples/selectsMultipleMonths.js rename to docs-site/src/examples/ts/selectsMultipleMonths.tsx index ac2a694a32..acbbc6c81b 100644 --- a/docs-site/src/examples/selectsMultipleMonths.js +++ b/docs-site/src/examples/ts/selectsMultipleMonths.tsx @@ -1,8 +1,10 @@ -() => { - const [selectedDates, setSelectedDates] = useState([new Date()]); - const onChange = (dates) => { +const SelectsMultipleMonths = () => { + const [selectedDates, setSelectedDates] = useState(null); + + const onChange = (dates: Date[] | null) => { setSelectedDates(dates); }; + return ( ); }; + +render(SelectsMultipleMonths); diff --git a/docs-site/src/examples/selectsRange.js b/docs-site/src/examples/ts/selectsRange.tsx similarity index 51% rename from docs-site/src/examples/selectsRange.js rename to docs-site/src/examples/ts/selectsRange.tsx index 5bc0cd1465..9372ea8ae6 100644 --- a/docs-site/src/examples/selectsRange.js +++ b/docs-site/src/examples/ts/selectsRange.tsx @@ -1,11 +1,13 @@ -() => { - const [startDate, setStartDate] = useState(new Date()); - const [endDate, setEndDate] = useState(null); - const onChange = (dates) => { +const SelectsRange = () => { + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(null); + + const onChange = (dates: [Date | null, Date | null]) => { const [start, end] = dates; setStartDate(start); setEndDate(end); }; + return ( ); }; + +render(SelectsRange); diff --git a/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx new file mode 100644 index 0000000000..56a4dc2914 --- /dev/null +++ b/docs-site/src/examples/ts/selectsRangeWithDisabledDates.tsx @@ -0,0 +1,38 @@ +const { addDays } = DateFNS; +type TExcludeDate = + | { + date: Date; + message?: string; + }[] + | Date[]; + +const SelectsRangeWithDisabledDates = () => { + const [startDate, setStartDate] = useState(new Date()); + const [endDate, setEndDate] = useState(null); + + const onChange = (dates: [Date | null, Date | null]) => { + const [start, end] = dates; + setStartDate(start); + setEndDate(end); + }; + + const excludeDates: TExcludeDate = [ + addDays(new Date(), 1), + addDays(new Date(), 5), + ]; + + return ( + + ); +}; + +render(SelectsRangeWithDisabledDates); diff --git a/docs-site/src/examples/showTime.js b/docs-site/src/examples/ts/showTime.tsx similarity index 50% rename from docs-site/src/examples/showTime.js rename to docs-site/src/examples/ts/showTime.tsx index 5b279a1012..349b5a5396 100644 --- a/docs-site/src/examples/showTime.js +++ b/docs-site/src/examples/ts/showTime.tsx @@ -1,9 +1,12 @@ -() => { - const [selectedDateTime, setSelectedDateTime] = useState(new Date()); +const ShowTime = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + new Date(), + ); + return ( setSelectedDateTime(date)} + onChange={(date: Date | null) => setSelectedDateTime(date)} showTimeSelect timeFormat="HH:mm" timeIntervals={15} @@ -12,3 +15,5 @@ /> ); }; + +render(ShowTime); diff --git a/docs-site/src/examples/ts/showTimeOnly.tsx b/docs-site/src/examples/ts/showTimeOnly.tsx new file mode 100644 index 0000000000..8ee9698865 --- /dev/null +++ b/docs-site/src/examples/ts/showTimeOnly.tsx @@ -0,0 +1,19 @@ +const ShowTimeOnly = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + new Date(), + ); + + return ( + setSelectedDateTime(date)} + showTimeSelect + showTimeSelectOnly + timeIntervals={15} + timeCaption="Time" + dateFormat="h:mm aa" + /> + ); +}; + +render(ShowTimeOnly); diff --git a/docs-site/src/examples/ts/specificDateRange.tsx b/docs-site/src/examples/ts/specificDateRange.tsx new file mode 100644 index 0000000000..257814ae87 --- /dev/null +++ b/docs-site/src/examples/ts/specificDateRange.tsx @@ -0,0 +1,15 @@ +const SpecificDateRange = () => { + const [selectedDate, setSelectedDate] = useState(null); + + return ( + setSelectedDate(date)} + minDate={new Date()} + maxDate={DateFNS.addDays(new Date(), 5)} + placeholderText="Select a date between today and 5 days in the future" + /> + ); +}; + +render(SpecificDateRange); diff --git a/docs-site/src/examples/ts/strictParsing.tsx b/docs-site/src/examples/ts/strictParsing.tsx new file mode 100644 index 0000000000..6abef57bef --- /dev/null +++ b/docs-site/src/examples/ts/strictParsing.tsx @@ -0,0 +1,13 @@ +const StrictParsing = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + strictParsing + /> + ); +}; + +render(StrictParsing); diff --git a/docs-site/src/examples/ts/tabIndex.tsx b/docs-site/src/examples/ts/tabIndex.tsx new file mode 100644 index 0000000000..10cf294147 --- /dev/null +++ b/docs-site/src/examples/ts/tabIndex.tsx @@ -0,0 +1,13 @@ +const TabIndex = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + + ); +}; + +render(TabIndex); diff --git a/docs-site/src/examples/ts/timeInput.tsx b/docs-site/src/examples/ts/timeInput.tsx new file mode 100644 index 0000000000..526d8c13da --- /dev/null +++ b/docs-site/src/examples/ts/timeInput.tsx @@ -0,0 +1,17 @@ +const TimeInput = () => { + const [selectedDateTime, setSelectedDateTime] = useState( + new Date(), + ); + + return ( + setSelectedDateTime(date)} + timeInputLabel="Time:" + dateFormat="MM/dd/yyyy h:mm aa" + showTimeInput + /> + ); +}; + +render(TimeInput); diff --git a/docs-site/src/examples/ts/today.tsx b/docs-site/src/examples/ts/today.tsx new file mode 100644 index 0000000000..5c3a7c3c49 --- /dev/null +++ b/docs-site/src/examples/ts/today.tsx @@ -0,0 +1,13 @@ +const Today = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + /> + ); +}; + +render(Today); diff --git a/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx b/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx new file mode 100644 index 0000000000..8ecb580ce1 --- /dev/null +++ b/docs-site/src/examples/ts/toggleCalendarOnIconClick.tsx @@ -0,0 +1,14 @@ +const ToggleCalendarOnIconClick = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + /> + ); +}; + +render(ToggleCalendarOnIconClick); diff --git a/docs-site/src/examples/ts/weekNumbers.tsx b/docs-site/src/examples/ts/weekNumbers.tsx new file mode 100644 index 0000000000..0cb5476372 --- /dev/null +++ b/docs-site/src/examples/ts/weekNumbers.tsx @@ -0,0 +1,14 @@ +const WeekNumbers = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + locale="en-GB" + showWeekNumbers + /> + ); +}; + +render(WeekNumbers); diff --git a/docs-site/src/examples/ts/weekPicker.tsx b/docs-site/src/examples/ts/weekPicker.tsx new file mode 100644 index 0000000000..f1af02ff8a --- /dev/null +++ b/docs-site/src/examples/ts/weekPicker.tsx @@ -0,0 +1,18 @@ +const WeekPicker = () => { + const [selectedDate, setSelectedDate] = useState( + new Date("2021/02/22"), + ); + + return ( + setSelectedDate(date)} + dateFormat="I/R" + locale="en-GB" + showWeekNumbers + showWeekPicker + /> + ); +}; + +render(WeekPicker); diff --git a/docs-site/src/examples/ts/withPortalById.tsx b/docs-site/src/examples/ts/withPortalById.tsx new file mode 100644 index 0000000000..bae86588d5 --- /dev/null +++ b/docs-site/src/examples/ts/withPortalById.tsx @@ -0,0 +1,14 @@ +const WithPortalById = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + withPortal + portalId="root-portal" + /> + ); +}; + +render(WithPortalById); diff --git a/docs-site/src/examples/ts/yearDropdown.tsx b/docs-site/src/examples/ts/yearDropdown.tsx new file mode 100644 index 0000000000..4989459a64 --- /dev/null +++ b/docs-site/src/examples/ts/yearDropdown.tsx @@ -0,0 +1,16 @@ +const YearDropdown = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + showYearDropdown + dateFormatCalendar="MMMM" + yearDropdownItemNumber={15} + scrollableYearDropdown + /> + ); +}; + +render(YearDropdown); diff --git a/docs-site/src/examples/ts/yearItemNumber.tsx b/docs-site/src/examples/ts/yearItemNumber.tsx new file mode 100644 index 0000000000..3692a69928 --- /dev/null +++ b/docs-site/src/examples/ts/yearItemNumber.tsx @@ -0,0 +1,15 @@ +const YearItemNumber = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + showYearPicker + dateFormat="yyyy" + yearItemNumber={9} + /> + ); +}; + +render(YearItemNumber); diff --git a/docs-site/src/examples/ts/yearPicker.tsx b/docs-site/src/examples/ts/yearPicker.tsx new file mode 100644 index 0000000000..fc8d3cf613 --- /dev/null +++ b/docs-site/src/examples/ts/yearPicker.tsx @@ -0,0 +1,14 @@ +const YearPicker = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + showYearPicker + dateFormat="yyyy" + /> + ); +}; + +render(YearPicker); diff --git a/docs-site/src/examples/ts/yearSelectDropdown.tsx b/docs-site/src/examples/ts/yearSelectDropdown.tsx new file mode 100644 index 0000000000..ddc73013ff --- /dev/null +++ b/docs-site/src/examples/ts/yearSelectDropdown.tsx @@ -0,0 +1,16 @@ +const YearSelectDropdown = () => { + const [selectedDate, setSelectedDate] = useState(new Date()); + + return ( + setSelectedDate(date)} + peekNextMonth + showMonthDropdown + showYearDropdown + dropdownMode="select" + /> + ); +}; + +render(YearSelectDropdown); diff --git a/docs-site/src/examples/tsconfig.json b/docs-site/src/examples/tsconfig.json new file mode 100644 index 0000000000..e03d8318fd --- /dev/null +++ b/docs-site/src/examples/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "ES2020", + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "skipLibCheck": true, + "allowJs": true, + "esModuleInterop": true + }, + "include": ["./**/*.tsx", "./**/*.ts", "./live-provider-globals.d.ts"] +} diff --git a/docs-site/src/examples/weekNumbers.js b/docs-site/src/examples/weekNumbers.js deleted file mode 100644 index ef66a98143..0000000000 --- a/docs-site/src/examples/weekNumbers.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - locale="en-GB" - showWeekNumbers - /> - ); -}; diff --git a/docs-site/src/examples/weekPicker.js b/docs-site/src/examples/weekPicker.js deleted file mode 100644 index d632c1f5b6..0000000000 --- a/docs-site/src/examples/weekPicker.js +++ /dev/null @@ -1,13 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date("2021/02/22")); - return ( - setSelectedDate(date)} - dateFormat="I/R" - locale="en-GB" - showWeekNumbers - showWeekPicker - /> - ); -}; diff --git a/docs-site/src/examples/withPortalById.js b/docs-site/src/examples/withPortalById.js deleted file mode 100644 index 512e332a62..0000000000 --- a/docs-site/src/examples/withPortalById.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - withPortal - portalId="root-portal" - /> - ); -}; diff --git a/docs-site/src/examples/yearDropdown.js b/docs-site/src/examples/yearDropdown.js deleted file mode 100644 index 8d6a6b4718..0000000000 --- a/docs-site/src/examples/yearDropdown.js +++ /dev/null @@ -1,13 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - showYearDropdown - dateFormatCalendar="MMMM" - yearDropdownItemNumber={15} - scrollableYearDropdown - /> - ); -}; diff --git a/docs-site/src/examples/yearItemNumber.js b/docs-site/src/examples/yearItemNumber.js deleted file mode 100644 index 0d30176e34..0000000000 --- a/docs-site/src/examples/yearItemNumber.js +++ /dev/null @@ -1,12 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - showYearPicker - dateFormat="yyyy" - yearItemNumber={9} - /> - ); -}; diff --git a/docs-site/src/examples/yearPicker.js b/docs-site/src/examples/yearPicker.js deleted file mode 100644 index 021fc12291..0000000000 --- a/docs-site/src/examples/yearPicker.js +++ /dev/null @@ -1,11 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - showYearPicker - dateFormat="yyyy" - /> - ); -}; diff --git a/docs-site/src/examples/yearSelectDropdown.js b/docs-site/src/examples/yearSelectDropdown.js deleted file mode 100644 index 4da9aa7b44..0000000000 --- a/docs-site/src/examples/yearSelectDropdown.js +++ /dev/null @@ -1,13 +0,0 @@ -() => { - const [selectedDate, setSelectedDate] = useState(new Date()); - return ( - setSelectedDate(date)} - peekNextMonth - showMonthDropdown - showYearDropdown - dropdownMode="select" - /> - ); -}; diff --git a/docs-site/src/images.d.ts b/docs-site/src/images.d.ts new file mode 100644 index 0000000000..49977505d3 --- /dev/null +++ b/docs-site/src/images.d.ts @@ -0,0 +1 @@ +declare module "*.png"; diff --git a/docs-site/src/index.jsx b/docs-site/src/index.tsx similarity index 55% rename from docs-site/src/index.jsx rename to docs-site/src/index.tsx index f50634d567..3b2f90aac6 100644 --- a/docs-site/src/index.jsx +++ b/docs-site/src/index.tsx @@ -1,5 +1,7 @@ import ReactDOM from "react-dom/client"; import App from "./components/App"; -const root = ReactDOM.createRoot(document.getElementById("root")); +const root = ReactDOM.createRoot( + document.getElementById("root") as HTMLElement, +); root.render(); diff --git a/docs-site/src/types/global.d.ts b/docs-site/src/types/global.d.ts new file mode 100644 index 0000000000..c9de3efe9c --- /dev/null +++ b/docs-site/src/types/global.d.ts @@ -0,0 +1,9 @@ +declare module "*.svg" { + const content: string; + export default content; +} + +declare module "*?raw" { + const content: string; + export default content; +} diff --git a/docs-site/src/types/index.ts b/docs-site/src/types/index.ts new file mode 100644 index 0000000000..0e2366c7c7 --- /dev/null +++ b/docs-site/src/types/index.ts @@ -0,0 +1,6 @@ +export interface IExampleConfig { + title: string; + component: string; + componentTS?: string; + description?: string | React.ReactElement; +} diff --git a/docs-site/tsconfig.json b/docs-site/tsconfig.json new file mode 100644 index 0000000000..bbd4125f17 --- /dev/null +++ b/docs-site/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "ES2020", + "useDefineForClassFields": true, + "lib": ["ES2020", "DOM", "DOM.Iterable"], + "module": "ESNext", + "skipLibCheck": true, + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true, + "allowJs": true, + "esModuleInterop": true + }, + "include": ["src"], + "exclude": ["src/examples/**/*.tsx", "src/examples/**/*.ts", "dist"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/docs-site/tsconfig.node.json b/docs-site/tsconfig.node.json new file mode 100644 index 0000000000..42872c59f5 --- /dev/null +++ b/docs-site/tsconfig.node.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "composite": true, + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "allowSyntheticDefaultImports": true + }, + "include": ["vite.config.ts"] +} diff --git a/docs-site/vite.config.js b/docs-site/vite.config.ts similarity index 100% rename from docs-site/vite.config.js rename to docs-site/vite.config.ts diff --git a/docs-site/yarn.lock b/docs-site/yarn.lock index 241f04e705..e208522ef9 100644 --- a/docs-site/yarn.lock +++ b/docs-site/yarn.lock @@ -860,7 +860,7 @@ __metadata: languageName: node linkType: hard -"@eslint-community/eslint-utils@npm:^4.8.0": +"@eslint-community/eslint-utils@npm:^4.4.0, @eslint-community/eslint-utils@npm:^4.8.0": version: 4.9.0 resolution: "@eslint-community/eslint-utils@npm:4.9.0" dependencies: @@ -871,7 +871,7 @@ __metadata: languageName: node linkType: hard -"@eslint-community/regexpp@npm:^4.12.1": +"@eslint-community/regexpp@npm:^4.10.0, @eslint-community/regexpp@npm:^4.12.1": version: 4.12.1 resolution: "@eslint-community/regexpp@npm:4.12.1" checksum: 10c0/a03d98c246bcb9109aec2c08e4d10c8d010256538dcb3f56610191607214523d4fb1b00aa81df830b6dffb74c5fa0be03642513a289c567949d3e550ca11cdf6 @@ -1178,6 +1178,33 @@ __metadata: languageName: node linkType: hard +"@nodelib/fs.scandir@npm:2.1.5": + version: 2.1.5 + resolution: "@nodelib/fs.scandir@npm:2.1.5" + dependencies: + "@nodelib/fs.stat": "npm:2.0.5" + run-parallel: "npm:^1.1.9" + checksum: 10c0/732c3b6d1b1e967440e65f284bd06e5821fedf10a1bea9ed2bb75956ea1f30e08c44d3def9d6a230666574edbaf136f8cfd319c14fd1f87c66e6a44449afb2eb + languageName: node + linkType: hard + +"@nodelib/fs.stat@npm:2.0.5, @nodelib/fs.stat@npm:^2.0.2": + version: 2.0.5 + resolution: "@nodelib/fs.stat@npm:2.0.5" + checksum: 10c0/88dafe5e3e29a388b07264680dc996c17f4bda48d163a9d4f5c1112979f0ce8ec72aa7116122c350b4e7976bc5566dc3ddb579be1ceaacc727872eb4ed93926d + languageName: node + linkType: hard + +"@nodelib/fs.walk@npm:^1.2.3": + version: 1.2.8 + resolution: "@nodelib/fs.walk@npm:1.2.8" + dependencies: + "@nodelib/fs.scandir": "npm:2.1.5" + fastq: "npm:^1.6.0" + checksum: 10c0/db9de047c3bb9b51f9335a7bb46f4fcfb6829fb628318c12115fbaf7d369bfce71c15b103d1fc3b464812d936220ee9bc1c8f762d032c9f6be9acc99249095b1 + languageName: node + linkType: hard + "@npmcli/agent@npm:^2.0.0": version: 2.2.2 resolution: "@npmcli/agent@npm:2.2.2" @@ -1341,10 +1368,10 @@ __metadata: languageName: node linkType: hard -"@rolldown/pluginutils@npm:1.0.0-beta.35": - version: 1.0.0-beta.35 - resolution: "@rolldown/pluginutils@npm:1.0.0-beta.35" - checksum: 10c0/feb6ab8f77ef2bde675099409c3ccd6a168f35a3c3e88482df3ca42494260fd42befe36e8e90ce358847a12aaab94cd8fe7069cf1e905edf91eb411d933906d9 +"@rolldown/pluginutils@npm:1.0.0-beta.38": + version: 1.0.0-beta.38 + resolution: "@rolldown/pluginutils@npm:1.0.0-beta.38" + checksum: 10c0/8353ec2528349f79e27d1a3193806725b85830da334e935cbb606d88c1177c58ea6519c578e4e93e5f677f5b22aecb8738894dbed14603e14b6bffe3facf1002 languageName: node linkType: hard @@ -1550,6 +1577,13 @@ __metadata: languageName: node linkType: hard +"@types/lodash@npm:^4.17.0": + version: 4.17.20 + resolution: "@types/lodash@npm:4.17.20" + checksum: 10c0/98cdd0faae22cbb8079a01a3bb65aa8f8c41143367486c1cbf5adc83f16c9272a2a5d2c1f541f61d0d73da543c16ee1d21cf2ef86cb93cd0cc0ac3bced6dd88f + languageName: node + linkType: hard + "@types/prismjs@npm:^1.26.0": version: 1.26.3 resolution: "@types/prismjs@npm:1.26.3" @@ -1567,27 +1601,145 @@ __metadata: linkType: hard "@types/react@npm:^19.1.13": - version: 19.1.13 - resolution: "@types/react@npm:19.1.13" + version: 19.1.15 + resolution: "@types/react@npm:19.1.15" dependencies: csstype: "npm:^3.0.2" - checksum: 10c0/75e35b54883f5ed07d3b5cb16a4711b6dbb7ec6b74301bcb9bfa697c9d9fff022ec508e1719e7b2c69e2e8b042faac1125be7717b5e5e084f816a2c88e136920 + checksum: 10c0/f72cb36cb12a0c8aeba4df5a52d6b8a66509983c109201582c156676e8f1a6f5f2b74103f996ae756a04154d3722154350bd606cb87df211bbacda93139225b2 + languageName: node + linkType: hard + +"@typescript-eslint/eslint-plugin@npm:^7.0.0": + version: 7.18.0 + resolution: "@typescript-eslint/eslint-plugin@npm:7.18.0" + dependencies: + "@eslint-community/regexpp": "npm:^4.10.0" + "@typescript-eslint/scope-manager": "npm:7.18.0" + "@typescript-eslint/type-utils": "npm:7.18.0" + "@typescript-eslint/utils": "npm:7.18.0" + "@typescript-eslint/visitor-keys": "npm:7.18.0" + graphemer: "npm:^1.4.0" + ignore: "npm:^5.3.1" + natural-compare: "npm:^1.4.0" + ts-api-utils: "npm:^1.3.0" + peerDependencies: + "@typescript-eslint/parser": ^7.0.0 + eslint: ^8.56.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: 10c0/2b37948fa1b0dab77138909dabef242a4d49ab93e4019d4ef930626f0a7d96b03e696cd027fa0087881c20e73be7be77c942606b4a76fa599e6b37f6985304c3 + languageName: node + linkType: hard + +"@typescript-eslint/parser@npm:^7.0.0": + version: 7.18.0 + resolution: "@typescript-eslint/parser@npm:7.18.0" + dependencies: + "@typescript-eslint/scope-manager": "npm:7.18.0" + "@typescript-eslint/types": "npm:7.18.0" + "@typescript-eslint/typescript-estree": "npm:7.18.0" + "@typescript-eslint/visitor-keys": "npm:7.18.0" + debug: "npm:^4.3.4" + peerDependencies: + eslint: ^8.56.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: 10c0/370e73fca4278091bc1b657f85e7d74cd52b24257ea20c927a8e17546107ce04fbf313fec99aed0cc2a145ddbae1d3b12e9cc2c1320117636dc1281bcfd08059 + languageName: node + linkType: hard + +"@typescript-eslint/scope-manager@npm:7.18.0": + version: 7.18.0 + resolution: "@typescript-eslint/scope-manager@npm:7.18.0" + dependencies: + "@typescript-eslint/types": "npm:7.18.0" + "@typescript-eslint/visitor-keys": "npm:7.18.0" + checksum: 10c0/038cd58c2271de146b3a594afe2c99290034033326d57ff1f902976022c8b0138ffd3cb893ae439ae41003b5e4bcc00cabf6b244ce40e8668f9412cc96d97b8e + languageName: node + linkType: hard + +"@typescript-eslint/type-utils@npm:7.18.0": + version: 7.18.0 + resolution: "@typescript-eslint/type-utils@npm:7.18.0" + dependencies: + "@typescript-eslint/typescript-estree": "npm:7.18.0" + "@typescript-eslint/utils": "npm:7.18.0" + debug: "npm:^4.3.4" + ts-api-utils: "npm:^1.3.0" + peerDependencies: + eslint: ^8.56.0 + peerDependenciesMeta: + typescript: + optional: true + checksum: 10c0/ad92a38007be620f3f7036f10e234abdc2fdc518787b5a7227e55fd12896dacf56e8b34578723fbf9bea8128df2510ba8eb6739439a3879eda9519476d5783fd + languageName: node + linkType: hard + +"@typescript-eslint/types@npm:7.18.0": + version: 7.18.0 + resolution: "@typescript-eslint/types@npm:7.18.0" + checksum: 10c0/eb7371ac55ca77db8e59ba0310b41a74523f17e06f485a0ef819491bc3dd8909bb930120ff7d30aaf54e888167e0005aa1337011f3663dc90fb19203ce478054 + languageName: node + linkType: hard + +"@typescript-eslint/typescript-estree@npm:7.18.0": + version: 7.18.0 + resolution: "@typescript-eslint/typescript-estree@npm:7.18.0" + dependencies: + "@typescript-eslint/types": "npm:7.18.0" + "@typescript-eslint/visitor-keys": "npm:7.18.0" + debug: "npm:^4.3.4" + globby: "npm:^11.1.0" + is-glob: "npm:^4.0.3" + minimatch: "npm:^9.0.4" + semver: "npm:^7.6.0" + ts-api-utils: "npm:^1.3.0" + peerDependenciesMeta: + typescript: + optional: true + checksum: 10c0/0c7f109a2e460ec8a1524339479cf78ff17814d23c83aa5112c77fb345e87b3642616291908dcddea1e671da63686403dfb712e4a4435104f92abdfddf9aba81 + languageName: node + linkType: hard + +"@typescript-eslint/utils@npm:7.18.0": + version: 7.18.0 + resolution: "@typescript-eslint/utils@npm:7.18.0" + dependencies: + "@eslint-community/eslint-utils": "npm:^4.4.0" + "@typescript-eslint/scope-manager": "npm:7.18.0" + "@typescript-eslint/types": "npm:7.18.0" + "@typescript-eslint/typescript-estree": "npm:7.18.0" + peerDependencies: + eslint: ^8.56.0 + checksum: 10c0/a25a6d50eb45c514469a01ff01f215115a4725fb18401055a847ddf20d1b681409c4027f349033a95c4ff7138d28c3b0a70253dfe8262eb732df4b87c547bd1e + languageName: node + linkType: hard + +"@typescript-eslint/visitor-keys@npm:7.18.0": + version: 7.18.0 + resolution: "@typescript-eslint/visitor-keys@npm:7.18.0" + dependencies: + "@typescript-eslint/types": "npm:7.18.0" + eslint-visitor-keys: "npm:^3.4.3" + checksum: 10c0/538b645f8ff1d9debf264865c69a317074eaff0255e63d7407046176b0f6a6beba34a6c51d511f12444bae12a98c69891eb6f403c9f54c6c2e2849d1c1cb73c0 languageName: node linkType: hard "@vitejs/plugin-react@npm:^5.0.3": - version: 5.0.3 - resolution: "@vitejs/plugin-react@npm:5.0.3" + version: 5.0.4 + resolution: "@vitejs/plugin-react@npm:5.0.4" dependencies: "@babel/core": "npm:^7.28.4" "@babel/plugin-transform-react-jsx-self": "npm:^7.27.1" "@babel/plugin-transform-react-jsx-source": "npm:^7.27.1" - "@rolldown/pluginutils": "npm:1.0.0-beta.35" + "@rolldown/pluginutils": "npm:1.0.0-beta.38" "@types/babel__core": "npm:^7.20.5" react-refresh: "npm:^0.17.0" peerDependencies: vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 - checksum: 10c0/3fc071455630a0584c170c544d20fc3edaccfb60a1e03ea14ca76f049f2657eb645aba9c216db016b8d70e4f894285a78fcd92ef63a2fcfa7864da378ac52761 + checksum: 10c0/bb9360a4b4c0abf064d22211756b999faf23889ac150de490590ca7bd029b0ef7f4cd8ba3a32b86682a62d46fb7bebd75b3fa9835c57c78123f4a646de2e0136 languageName: node linkType: hard @@ -1747,6 +1899,13 @@ __metadata: languageName: node linkType: hard +"array-union@npm:^2.1.0": + version: 2.1.0 + resolution: "array-union@npm:2.1.0" + checksum: 10c0/429897e68110374f39b771ec47a7161fc6a8fc33e196857c0a396dc75df0b5f65e4d046674db764330b6bb66b39ef48dd7c53b6a2ee75cfb0681e0c1a7033962 + languageName: node + linkType: hard + "array.prototype.findlast@npm:^1.2.5": version: 1.2.5 resolution: "array.prototype.findlast@npm:1.2.5" @@ -1837,12 +1996,12 @@ __metadata: linkType: hard "brace-expansion@npm:^1.1.7": - version: 1.1.12 - resolution: "brace-expansion@npm:1.1.12" + version: 1.1.11 + resolution: "brace-expansion@npm:1.1.11" dependencies: balanced-match: "npm:^1.0.0" concat-map: "npm:0.0.1" - checksum: 10c0/975fecac2bb7758c062c20d0b3b6288c7cc895219ee25f0a64a9de662dbac981ff0b6e89909c3897c1f84fa353113a721923afdec5f8b2350255b097f12b1f73 + checksum: 10c0/695a56cd058096a7cb71fb09d9d6a7070113c7be516699ed361317aca2ec169f618e28b8af352e02ab4233fb54eb0168460a40dc320bab0034b36ab59aaad668 languageName: node linkType: hard @@ -1855,7 +2014,7 @@ __metadata: languageName: node linkType: hard -"braces@npm:^3.0.2": +"braces@npm:^3.0.2, braces@npm:^3.0.3": version: 3.0.3 resolution: "braces@npm:3.0.3" dependencies: @@ -2071,6 +2230,15 @@ __metadata: languageName: node linkType: hard +"copy-to-clipboard@npm:^3.3.3": + version: 3.3.3 + resolution: "copy-to-clipboard@npm:3.3.3" + dependencies: + toggle-selection: "npm:^1.0.6" + checksum: 10c0/3ebf5e8ee00601f8c440b83ec08d838e8eabb068c1fae94a9cda6b42f288f7e1b552f3463635f419af44bf7675afc8d0390d30876cf5c2d5d35f86d9c56a3e5f + languageName: node + linkType: hard + "cross-spawn@npm:^7.0.0": version: 7.0.5 resolution: "cross-spawn@npm:7.0.5" @@ -2212,6 +2380,15 @@ __metadata: languageName: node linkType: hard +"dir-glob@npm:^3.0.1": + version: 3.0.1 + resolution: "dir-glob@npm:3.0.1" + dependencies: + path-type: "npm:^4.0.0" + checksum: 10c0/dcac00920a4d503e38bb64001acb19df4efc14536ada475725e12f52c16777afdee4db827f55f13a908ee7efc0cb282e2e3dbaeeb98c0993dd93d1802d3bf00c + languageName: node + linkType: hard + "doctrine@npm:^2.1.0": version: 2.1.0 resolution: "doctrine@npm:2.1.0" @@ -2503,6 +2680,15 @@ __metadata: languageName: node linkType: hard +"esbuild-wasm@npm:^0.25.9": + version: 0.25.9 + resolution: "esbuild-wasm@npm:0.25.9" + bin: + esbuild: bin/esbuild + checksum: 10c0/8c4865d061c94303939549ba67930dfdd51ced9a46ef1b09f63b15696de5075690c4680f616a1932cb0296eed615eb1fa0670337104c4c83d95fac1c2217cf00 + languageName: node + linkType: hard + "esbuild@npm:^0.25.0": version: 0.25.0 resolution: "esbuild@npm:0.25.0" @@ -2805,6 +2991,19 @@ __metadata: languageName: node linkType: hard +"fast-glob@npm:^3.2.9": + version: 3.3.3 + resolution: "fast-glob@npm:3.3.3" + dependencies: + "@nodelib/fs.stat": "npm:^2.0.2" + "@nodelib/fs.walk": "npm:^1.2.3" + glob-parent: "npm:^5.1.2" + merge2: "npm:^1.3.0" + micromatch: "npm:^4.0.8" + checksum: 10c0/f6aaa141d0d3384cf73cbcdfc52f475ed293f6d5b65bfc5def368b09163a9f7e5ec2b3014d80f733c405f58e470ee0cc451c2937685045cddcdeaa24199c43fe + languageName: node + linkType: hard + "fast-json-stable-stringify@npm:^2.0.0": version: 2.1.0 resolution: "fast-json-stable-stringify@npm:2.1.0" @@ -2819,6 +3018,15 @@ __metadata: languageName: node linkType: hard +"fastq@npm:^1.6.0": + version: 1.19.1 + resolution: "fastq@npm:1.19.1" + dependencies: + reusify: "npm:^1.0.4" + checksum: 10c0/ebc6e50ac7048daaeb8e64522a1ea7a26e92b3cee5cd1c7f2316cdca81ba543aa40a136b53891446ea5c3a67ec215fbaca87ad405f102dd97012f62916905630 + languageName: node + linkType: hard + "fdir@npm:^6.5.0": version: 6.5.0 resolution: "fdir@npm:6.5.0" @@ -3097,6 +3305,15 @@ __metadata: languageName: node linkType: hard +"glob-parent@npm:^5.1.2": + version: 5.1.2 + resolution: "glob-parent@npm:5.1.2" + dependencies: + is-glob: "npm:^4.0.1" + checksum: 10c0/cab87638e2112bee3f839ef5f6e0765057163d39c66be8ec1602f3823da4692297ad4e972de876ea17c44d652978638d2fd583c6713d0eb6591706825020c9ee + languageName: node + linkType: hard + "glob-parent@npm:^6.0.2": version: 6.0.2 resolution: "glob-parent@npm:6.0.2" @@ -3177,6 +3394,20 @@ __metadata: languageName: node linkType: hard +"globby@npm:^11.1.0": + version: 11.1.0 + resolution: "globby@npm:11.1.0" + dependencies: + array-union: "npm:^2.1.0" + dir-glob: "npm:^3.0.1" + fast-glob: "npm:^3.2.9" + ignore: "npm:^5.2.0" + merge2: "npm:^1.4.1" + slash: "npm:^3.0.0" + checksum: 10c0/b39511b4afe4bd8a7aead3a27c4ade2b9968649abab0a6c28b1a90141b96ca68ca5db1302f7c7bd29eab66bf51e13916b8e0a3d0ac08f75e1e84a39b35691189 + languageName: node + linkType: hard + "gopd@npm:^1.0.1": version: 1.0.1 resolution: "gopd@npm:1.0.1" @@ -3200,6 +3431,13 @@ __metadata: languageName: node linkType: hard +"graphemer@npm:^1.4.0": + version: 1.4.0 + resolution: "graphemer@npm:1.4.0" + checksum: 10c0/e951259d8cd2e0d196c72ec711add7115d42eb9a8146c8eeda5b8d3ac91e5dd816b9cd68920726d9fd4490368e7ed86e9c423f40db87e2d8dfafa00fa17c3a31 + languageName: node + linkType: hard + "has-bigints@npm:^1.0.1, has-bigints@npm:^1.0.2": version: 1.0.2 resolution: "has-bigints@npm:1.0.2" @@ -3364,6 +3602,13 @@ __metadata: languageName: node linkType: hard +"ignore@npm:^5.3.1": + version: 5.3.2 + resolution: "ignore@npm:5.3.2" + checksum: 10c0/f9f652c957983634ded1e7f02da3b559a0d4cc210fca3792cb67f1b153623c9c42efdc1c4121af171e295444459fc4a9201101fb041b1104a3c000bccb188337 + languageName: node + linkType: hard + "immutable@npm:^5.0.2": version: 5.0.2 resolution: "immutable@npm:5.0.2" @@ -3580,7 +3825,7 @@ __metadata: languageName: node linkType: hard -"is-glob@npm:^4.0.0, is-glob@npm:^4.0.3": +"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3": version: 4.0.3 resolution: "is-glob@npm:4.0.3" dependencies: @@ -4035,6 +4280,13 @@ __metadata: languageName: node linkType: hard +"merge2@npm:^1.3.0, merge2@npm:^1.4.1": + version: 1.4.1 + resolution: "merge2@npm:1.4.1" + checksum: 10c0/254a8a4605b58f450308fc474c82ac9a094848081bf4c06778200207820e5193726dc563a0d2c16468810516a5c97d9d3ea0ca6585d23c58ccfff2403e8dbbeb + languageName: node + linkType: hard + "micromatch@npm:^4.0.5": version: 4.0.5 resolution: "micromatch@npm:4.0.5" @@ -4045,6 +4297,16 @@ __metadata: languageName: node linkType: hard +"micromatch@npm:^4.0.8": + version: 4.0.8 + resolution: "micromatch@npm:4.0.8" + dependencies: + braces: "npm:^3.0.3" + picomatch: "npm:^2.3.1" + checksum: 10c0/166fa6eb926b9553f32ef81f5f531d27b4ce7da60e5baf8c021d043b27a388fb95e46a8038d5045877881e673f8134122b59624d5cecbd16eb50a42e7a6b5ca8 + languageName: node + linkType: hard + "minimatch@npm:^3.1.2": version: 3.1.2 resolution: "minimatch@npm:3.1.2" @@ -4470,6 +4732,13 @@ __metadata: languageName: node linkType: hard +"path-type@npm:^4.0.0": + version: 4.0.0 + resolution: "path-type@npm:4.0.0" + checksum: 10c0/666f6973f332f27581371efaf303fd6c272cc43c2057b37aa99e3643158c7e4b2626549555d88626e99ea9e046f82f32e41bbde5f1508547e9a11b149b52387c + languageName: node + linkType: hard + "picocolors@npm:^1.0.0": version: 1.0.0 resolution: "picocolors@npm:1.0.0" @@ -4589,15 +4858,27 @@ __metadata: languageName: node linkType: hard +"queue-microtask@npm:^1.2.2": + version: 1.2.3 + resolution: "queue-microtask@npm:1.2.3" + checksum: 10c0/900a93d3cdae3acd7d16f642c29a642aea32c2026446151f0778c62ac089d4b8e6c986811076e1ae180a694cedf077d453a11b58ff0a865629a4f82ab558e102 + languageName: node + linkType: hard + "react-datepicker-docs@workspace:.": version: 0.0.0-use.local resolution: "react-datepicker-docs@workspace:." dependencies: "@eslint/js": "npm:^9.35.0" + "@types/lodash": "npm:^4.17.0" "@types/react": "npm:^19.1.13" "@types/react-dom": "npm:^19.1.9" + "@typescript-eslint/eslint-plugin": "npm:^7.0.0" + "@typescript-eslint/parser": "npm:^7.0.0" "@vitejs/plugin-react": "npm:^5.0.3" + copy-to-clipboard: "npm:^3.3.3" date-fns: "npm:^4.1.0" + esbuild-wasm: "npm:^0.25.9" eslint: "npm:^9.35.0" eslint-plugin-react: "npm:^7.37.5" eslint-plugin-react-hooks: "npm:^6.0.0" @@ -4612,6 +4893,7 @@ __metadata: react-live: "npm:^4.1.8" sass: "npm:^1.92.1" slugify: "npm:^1.6.6" + typescript: "npm:^5.7.2" vite: "npm:^7.1.6" languageName: unknown linkType: soft @@ -4763,6 +5045,13 @@ __metadata: languageName: node linkType: hard +"reusify@npm:^1.0.4": + version: 1.1.0 + resolution: "reusify@npm:1.1.0" + checksum: 10c0/4eff0d4a5f9383566c7d7ec437b671cc51b25963bd61bf127c3f3d3f68e44a026d99b8d2f1ad344afff8d278a8fe70a8ea092650a716d22287e8bef7126bb2fa + languageName: node + linkType: hard + "rollup@npm:^4.43.0": version: 4.46.2 resolution: "rollup@npm:4.46.2" @@ -4838,6 +5127,15 @@ __metadata: languageName: node linkType: hard +"run-parallel@npm:^1.1.9": + version: 1.2.0 + resolution: "run-parallel@npm:1.2.0" + dependencies: + queue-microtask: "npm:^1.2.2" + checksum: 10c0/200b5ab25b5b8b7113f9901bfe3afc347e19bb7475b267d55ad0eb86a62a46d77510cb0f232507c9e5d497ebda569a08a9867d0d14f57a82ad5564d991588b39 + languageName: node + linkType: hard + "safe-array-concat@npm:^1.1.3": version: 1.1.3 resolution: "safe-array-concat@npm:1.1.3" @@ -4934,6 +5232,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.6.0": + version: 7.7.2 + resolution: "semver@npm:7.7.2" + bin: + semver: bin/semver.js + checksum: 10c0/aca305edfbf2383c22571cb7714f48cadc7ac95371b4b52362fb8eeffdfbc0de0669368b82b2b15978f8848f01d7114da65697e56cd8c37b0dab8c58e543f9ea + languageName: node + linkType: hard + "set-function-length@npm:^1.2.1, set-function-length@npm:^1.2.2": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" @@ -5053,6 +5360,13 @@ __metadata: languageName: node linkType: hard +"slash@npm:^3.0.0": + version: 3.0.0 + resolution: "slash@npm:3.0.0" + checksum: 10c0/e18488c6a42bdfd4ac5be85b2ced3ccd0224773baae6ad42cfbb9ec74fc07f9fa8396bd35ee638084ead7a2a0818eb5e7151111544d4731ce843019dab4be47b + languageName: node + linkType: hard + "slugify@npm:^1.6.6": version: 1.6.6 resolution: "slugify@npm:1.6.6" @@ -5366,6 +5680,22 @@ __metadata: languageName: node linkType: hard +"toggle-selection@npm:^1.0.6": + version: 1.0.6 + resolution: "toggle-selection@npm:1.0.6" + checksum: 10c0/f2cf1f2c70f374fd87b0cdc8007453ba9e981c4305a8bf4eac10a30e62ecdfd28bca7d18f8f15b15a506bf8a7bfb20dbe3539f0fcf2a2c8396c1a78d53e1f179 + languageName: node + linkType: hard + +"ts-api-utils@npm:^1.3.0": + version: 1.4.3 + resolution: "ts-api-utils@npm:1.4.3" + peerDependencies: + typescript: ">=4.2.0" + checksum: 10c0/e65dc6e7e8141140c23e1dc94984bf995d4f6801919c71d6dc27cf0cd51b100a91ffcfe5217626193e5bea9d46831e8586febdc7e172df3f1091a7384299e23a + languageName: node + linkType: hard + "ts-interface-checker@npm:^0.1.9": version: 0.1.13 resolution: "ts-interface-checker@npm:0.1.13" @@ -5446,6 +5776,26 @@ __metadata: languageName: node linkType: hard +"typescript@npm:^5.7.2": + version: 5.9.2 + resolution: "typescript@npm:5.9.2" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10c0/cd635d50f02d6cf98ed42de2f76289701c1ec587a363369255f01ed15aaf22be0813226bff3c53e99d971f9b540e0b3cc7583dbe05faded49b1b0bed2f638a18 + languageName: node + linkType: hard + +"typescript@patch:typescript@npm%3A^5.7.2#optional!builtin": + version: 5.9.2 + resolution: "typescript@patch:typescript@npm%3A5.9.2#optional!builtin::version=5.9.2&hash=5786d5" + bin: + tsc: bin/tsc + tsserver: bin/tsserver + checksum: 10c0/34d2a8e23eb8e0d1875072064d5e1d9c102e0bdce56a10a25c0b917b8aa9001a9cf5c225df12497e99da107dc379360bc138163c66b55b95f5b105b50578067e + languageName: node + linkType: hard + "unbox-primitive@npm:^1.0.2": version: 1.0.2 resolution: "unbox-primitive@npm:1.0.2" @@ -5521,8 +5871,8 @@ __metadata: linkType: hard "vite@npm:^7.1.6": - version: 7.1.6 - resolution: "vite@npm:7.1.6" + version: 7.1.7 + resolution: "vite@npm:7.1.7" dependencies: esbuild: "npm:^0.25.0" fdir: "npm:^6.5.0" @@ -5571,7 +5921,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: 10c0/2cd8baec0054956dae61289dd1497109c762cfc27ec6f6b88f39a15d5ddc7e0cc4559b72fbdd701b296c739d2f734d051c28e365539462fb92f83b5e7908f9de + checksum: 10c0/3f6bd61a65aaa81368f4dda804f0e23b103664724218ccb5a0b1a0c7e284df498107b57ced951dc40ae4c5d472435bc8fb5c836414e729ee7e102809eaf6ff80 languageName: node linkType: hard diff --git a/examples/hello-world/yarn.lock b/examples/hello-world/yarn.lock index 06520dd09c..7aa91959c7 100644 --- a/examples/hello-world/yarn.lock +++ b/examples/hello-world/yarn.lock @@ -4406,12 +4406,12 @@ __metadata: linkType: hard "brace-expansion@npm:^1.1.7": - version: 1.1.12 - resolution: "brace-expansion@npm:1.1.12" + version: 1.1.11 + resolution: "brace-expansion@npm:1.1.11" dependencies: balanced-match: "npm:^1.0.0" concat-map: "npm:0.0.1" - checksum: 10c0/975fecac2bb7758c062c20d0b3b6288c7cc895219ee25f0a64a9de662dbac981ff0b6e89909c3897c1f84fa353113a721923afdec5f8b2350255b097f12b1f73 + checksum: 10c0/695a56cd058096a7cb71fb09d9d6a7070113c7be516699ed361317aca2ec169f618e28b8af352e02ab4233fb54eb0168460a40dc320bab0034b36ab59aaad668 languageName: node linkType: hard @@ -4525,16 +4525,6 @@ __metadata: languageName: node linkType: hard -"call-bind-apply-helpers@npm:^1.0.1, call-bind-apply-helpers@npm:^1.0.2": - version: 1.0.2 - resolution: "call-bind-apply-helpers@npm:1.0.2" - dependencies: - es-errors: "npm:^1.3.0" - function-bind: "npm:^1.1.2" - checksum: 10c0/47bd9901d57b857590431243fea704ff18078b16890a6b3e021e12d279bbf211d039155e27d7566b374d49ee1f8189344bac9833dec7a20cdec370506361c938 - languageName: node - linkType: hard - "call-bind@npm:^1.0.0, call-bind@npm:^1.0.2": version: 1.0.2 resolution: "call-bind@npm:1.0.2" @@ -5666,17 +5656,6 @@ __metadata: languageName: node linkType: hard -"dunder-proto@npm:^1.0.1": - version: 1.0.1 - resolution: "dunder-proto@npm:1.0.1" - dependencies: - call-bind-apply-helpers: "npm:^1.0.1" - es-errors: "npm:^1.3.0" - gopd: "npm:^1.2.0" - checksum: 10c0/199f2a0c1c16593ca0a145dbf76a962f8033ce3129f01284d48c45ed4e14fea9bbacd7b3610b6cdc33486cef20385ac054948fefc6272fcce645c09468f93031 - languageName: node - linkType: hard - "duplexer@npm:^0.1.2": version: 0.1.2 resolution: "duplexer@npm:0.1.2" @@ -5888,13 +5867,6 @@ __metadata: languageName: node linkType: hard -"es-define-property@npm:^1.0.1": - version: 1.0.1 - resolution: "es-define-property@npm:1.0.1" - checksum: 10c0/3f54eb49c16c18707949ff25a1456728c883e81259f045003499efba399c08bad00deebf65cccde8c0e07908c1a225c9d472b7107e558f2a48e28d530e34527c - languageName: node - linkType: hard - "es-errors@npm:^1.3.0": version: 1.3.0 resolution: "es-errors@npm:1.3.0" @@ -5909,15 +5881,6 @@ __metadata: languageName: node linkType: hard -"es-object-atoms@npm:^1.0.0, es-object-atoms@npm:^1.1.1": - version: 1.1.1 - resolution: "es-object-atoms@npm:1.1.1" - dependencies: - es-errors: "npm:^1.3.0" - checksum: 10c0/65364812ca4daf48eb76e2a3b7a89b3f6a2e62a1c420766ce9f692665a29d94fe41fe88b65f24106f449859549711e4b40d9fb8002d862dfd7eb1c512d10be0c - languageName: node - linkType: hard - "es-set-tostringtag@npm:^2.0.1": version: 2.0.1 resolution: "es-set-tostringtag@npm:2.0.1" @@ -5929,18 +5892,6 @@ __metadata: languageName: node linkType: hard -"es-set-tostringtag@npm:^2.1.0": - version: 2.1.0 - resolution: "es-set-tostringtag@npm:2.1.0" - dependencies: - es-errors: "npm:^1.3.0" - get-intrinsic: "npm:^1.2.6" - has-tostringtag: "npm:^1.0.2" - hasown: "npm:^2.0.2" - checksum: 10c0/ef2ca9ce49afe3931cb32e35da4dcb6d86ab02592cfc2ce3e49ced199d9d0bb5085fc7e73e06312213765f5efa47cc1df553a6a5154584b21448e9fb8355b1af - languageName: node - linkType: hard - "es-shim-unscopables@npm:^1.0.0": version: 1.0.0 resolution: "es-shim-unscopables@npm:1.0.0" @@ -6704,15 +6655,13 @@ __metadata: linkType: hard "form-data@npm:^3.0.0": - version: 3.0.4 - resolution: "form-data@npm:3.0.4" + version: 3.0.1 + resolution: "form-data@npm:3.0.1" dependencies: asynckit: "npm:^0.4.0" combined-stream: "npm:^1.0.8" - es-set-tostringtag: "npm:^2.1.0" - hasown: "npm:^2.0.2" - mime-types: "npm:^2.1.35" - checksum: 10c0/2451043b3e931653ce9690ba051b0bf1b5855a63029279bd7bdf8d02e4b5b42f4582b23ed3637df27a0d21bac2013c37d165ec9486e1af2470c13114aee83acc + mime-types: "npm:^2.1.12" + checksum: 10c0/1ccc3ae064a080a799923f754d49fcebdd90515a8924f0f54de557540b50e7f1fe48ba5f2bd0435a5664aa2d49729107e6aaf2155a9abf52339474c5638b4485 languageName: node linkType: hard @@ -6883,24 +6832,6 @@ __metadata: languageName: node linkType: hard -"get-intrinsic@npm:^1.2.6": - version: 1.3.0 - resolution: "get-intrinsic@npm:1.3.0" - dependencies: - call-bind-apply-helpers: "npm:^1.0.2" - es-define-property: "npm:^1.0.1" - es-errors: "npm:^1.3.0" - es-object-atoms: "npm:^1.1.1" - function-bind: "npm:^1.1.2" - get-proto: "npm:^1.0.1" - gopd: "npm:^1.2.0" - has-symbols: "npm:^1.1.0" - hasown: "npm:^2.0.2" - math-intrinsics: "npm:^1.1.0" - checksum: 10c0/52c81808af9a8130f581e6a6a83e1ba4a9f703359e7a438d1369a5267a25412322f03dcbd7c549edaef0b6214a0630a28511d7df0130c93cfd380f4fa0b5b66a - languageName: node - linkType: hard - "get-own-enumerable-property-symbols@npm:^3.0.0": version: 3.0.2 resolution: "get-own-enumerable-property-symbols@npm:3.0.2" @@ -6915,16 +6846,6 @@ __metadata: languageName: node linkType: hard -"get-proto@npm:^1.0.1": - version: 1.0.1 - resolution: "get-proto@npm:1.0.1" - dependencies: - dunder-proto: "npm:^1.0.1" - es-object-atoms: "npm:^1.0.0" - checksum: 10c0/9224acb44603c5526955e83510b9da41baf6ae73f7398875fba50edc5e944223a89c4a72b070fcd78beb5f7bdda58ecb6294adc28f7acfc0da05f76a2399643c - languageName: node - linkType: hard - "get-stream@npm:^6.0.0": version: 6.0.1 resolution: "get-stream@npm:6.0.1" @@ -7079,13 +7000,6 @@ __metadata: languageName: node linkType: hard -"gopd@npm:^1.2.0": - version: 1.2.0 - resolution: "gopd@npm:1.2.0" - checksum: 10c0/50fff1e04ba2b7737c097358534eacadad1e68d24cccee3272e04e007bed008e68d2614f3987788428fd192a5ae3889d08fb2331417e4fc4a9ab366b2043cead - languageName: node - linkType: hard - "graceful-fs@npm:^4.1.2, graceful-fs@npm:^4.1.6, graceful-fs@npm:^4.2.0, graceful-fs@npm:^4.2.11, graceful-fs@npm:^4.2.4, graceful-fs@npm:^4.2.6, graceful-fs@npm:^4.2.9": version: 4.2.11 resolution: "graceful-fs@npm:4.2.11" @@ -7176,13 +7090,6 @@ __metadata: languageName: node linkType: hard -"has-symbols@npm:^1.1.0": - version: 1.1.0 - resolution: "has-symbols@npm:1.1.0" - checksum: 10c0/dde0a734b17ae51e84b10986e651c664379018d10b91b6b0e9b293eddb32f0f069688c841fb40f19e9611546130153e0a2a48fd7f512891fb000ddfa36f5a20e - languageName: node - linkType: hard - "has-tostringtag@npm:^1.0.0": version: 1.0.0 resolution: "has-tostringtag@npm:1.0.0" @@ -7192,15 +7099,6 @@ __metadata: languageName: node linkType: hard -"has-tostringtag@npm:^1.0.2": - version: 1.0.2 - resolution: "has-tostringtag@npm:1.0.2" - dependencies: - has-symbols: "npm:^1.0.3" - checksum: 10c0/a8b166462192bafe3d9b6e420a1d581d93dd867adb61be223a17a8d6dad147aa77a8be32c961bb2f27b3ef893cae8d36f564ab651f5e9b7938ae86f74027c48c - languageName: node - linkType: hard - "has@npm:^1.0.3": version: 1.0.3 resolution: "has@npm:1.0.3" @@ -7210,7 +7108,7 @@ __metadata: languageName: node linkType: hard -"hasown@npm:^2.0.0, hasown@npm:^2.0.2": +"hasown@npm:^2.0.0": version: 2.0.2 resolution: "hasown@npm:2.0.2" dependencies: @@ -7232,9 +7130,9 @@ __metadata: version: 0.0.0-use.local resolution: "hello-world@workspace:." dependencies: - react: "npm:^19.1.1" - react-datepicker: "npm:^8.4.0" - react-dom: "npm:^19.1.1" + react: "npm:^19.1.0" + react-datepicker: "npm:^8.3.0" + react-dom: "npm:^19.1.0" react-scripts: "npm:5.0.1" languageName: unknown linkType: soft @@ -9023,13 +8921,6 @@ __metadata: languageName: node linkType: hard -"math-intrinsics@npm:^1.1.0": - version: 1.1.0 - resolution: "math-intrinsics@npm:1.1.0" - checksum: 10c0/7579ff94e899e2f76ab64491d76cf606274c874d8f2af4a442c016bd85688927fcfca157ba6bf74b08e9439dc010b248ce05b96cc7c126a354c3bae7fcb48b7f - languageName: node - linkType: hard - "mdn-data@npm:2.0.14": version: 2.0.14 resolution: "mdn-data@npm:2.0.14" @@ -9105,7 +8996,7 @@ __metadata: languageName: node linkType: hard -"mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:^2.1.35, mime-types@npm:~2.1.17, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": +"mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:~2.1.17, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34": version: 2.1.35 resolution: "mime-types@npm:2.1.35" dependencies: @@ -10966,9 +10857,9 @@ __metadata: languageName: node linkType: hard -"react-datepicker@npm:^8.4.0": - version: 8.4.0 - resolution: "react-datepicker@npm:8.4.0" +"react-datepicker@npm:^8.3.0": + version: 8.3.0 + resolution: "react-datepicker@npm:8.3.0" dependencies: "@floating-ui/react": "npm:^0.27.3" clsx: "npm:^2.1.1" @@ -10976,7 +10867,7 @@ __metadata: peerDependencies: react: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc react-dom: ^16.9.0 || ^17 || ^18 || ^19 || ^19.0.0-rc - checksum: 10c0/e96ba4f2b54476f66bfa33aa0c21729095c83d293671b07a9ddd96ab48dad85b6530acc5ca016e83ef8907feeebfefb7133bf7a02dc550175c48c5d9f66d70ac + checksum: 10c0/34a9dcc298c6a2b0ba9482e0e4d5e5834c261ed362c595063e544a7a33c4291d2a1fc59d7b84cf2e839530956744497703c250fc8319f196368c9427847c145b languageName: node linkType: hard @@ -11012,14 +10903,14 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^19.1.1": - version: 19.1.1 - resolution: "react-dom@npm:19.1.1" +"react-dom@npm:^19.1.0": + version: 19.1.0 + resolution: "react-dom@npm:19.1.0" dependencies: scheduler: "npm:^0.26.0" peerDependencies: - react: ^19.1.1 - checksum: 10c0/8c91198510521299c56e4e8d5e3a4508b2734fb5e52f29eeac33811de64e76fe586ad32c32182e2e84e070d98df67125da346c3360013357228172dbcd20bcdd + react: ^19.1.0 + checksum: 10c0/3e26e89bb6c67c9a6aa86cb888c7a7f8258f2e347a6d2a15299c17eb16e04c19194e3452bc3255bd34000a61e45e2cb51e46292392340432f133e5a5d2dfb5fc languageName: node linkType: hard @@ -11125,10 +11016,10 @@ __metadata: languageName: node linkType: hard -"react@npm:^19.1.1": - version: 19.1.1 - resolution: "react@npm:19.1.1" - checksum: 10c0/8c9769a2dfd02e603af6445058325e6c8a24b47b185d0e461f66a6454765ddcaecb3f0a90184836c68bb509f3c38248359edbc42f0d07c23eb500a5c30c87b4e +"react@npm:^19.1.0": + version: 19.1.0 + resolution: "react@npm:19.1.0" + checksum: 10c0/530fb9a62237d54137a13d2cfb67a7db6a2156faed43eecc423f4713d9b20c6f2728b026b45e28fcd72e8eadb9e9ed4b089e99f5e295d2f0ad3134251bdd3698 languageName: node linkType: hard