npm - @itwin/components-react - Versions diffs - 3.7.17 → 3.8.0 - Mend

@itwin/components-react 3.7.17 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1317) hide show

package/lib/esm/components-react/datepicker/DateField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DateField.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAiB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAmB7C;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,SAAe,EAAE,WAAyB,EAAE,eAA+B,EAAE,mBAA0C;IACrJ,IAAI,eAAe,EAAE;QACnB,OAAO,eAAe,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;KAC/C;IAED,IAAI,mBAAmB,EAAE;QACvB,QAAQ,mBAAmB,EAAE;YAC3B,KAAK,oBAAoB,CAAC,WAAW;gBACnC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC;YACjC,KAAK,oBAAoB,CAAC,QAAQ;gBAChC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC9C,KAAK,oBAAoB,CAAC,WAAW;gBACnC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1C,KAAK,oBAAoB,CAAC,QAAQ;gBAChC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC9C,KAAK,oBAAoB,CAAC,kBAAkB;gBAC1C,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC;YACjC,KAAK,oBAAoB,CAAC,eAAe;gBACvC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;SAC/C;KACF;SAAM;QACL,MAAM,UAAU,GAAG,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QAClH,IAAI,UAAU,GAAW,EAAE,CAAC;QAE5B,IAAI,WAAW,EAAE;YACf,QAAQ,WAAW,EAAE;gBACnB,KAAK,WAAW,CAAC,KAAK;oBACpB,UAAU,GAAG,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;oBAC3G,MAAM;gBACR,KAAK,WAAW,CAAC,MAAM;oBACrB,UAAU,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;oBAChI,MAAM;gBACR,KAAK,WAAW,CAAC,IAAI;oBACnB,UAAU,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;oBAC9G,uBAAuB;oBACvB,IAAI,UAAU,KAAK,OAAO;wBACxB,UAAU,GAAG,OAAO,CAAC;oBACvB,MAAM;gBACR,KAAK,WAAW,CAAC,KAAK;oBACpB,UAAU,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;oBACjI,uBAAuB;oBACvB,IAAI,UAAU,KAAK,UAAU;wBAC3B,UAAU,GAAG,UAAU,CAAC;oBAC1B,MAAM;aACT;SACF;QACD,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;KACxE;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAkB;IAC7H,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7G,oEAAoE;IACpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,uBAAuB;QACvB,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE;YAC9D,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;SACtC;QACD,aAAa,CAAC,eAAe,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9C,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA0C,EAAE,EAAE;QACzF,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,UAAkB,EAAE,EAAE;QACzD,IAAI;YACF,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS;gBAC1C,OAAO,aAAa,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;YAE7C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAC5C,uBAAuB;YACvB,IAAI,YAAY;gBACd,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;SACjC;QAAC,OAAO,MAAM,EAAE,0BAA0B,CAAC;YAC1C,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,0CAA0C,UAAU,cAAc,CAAC,CAAC;YAChG,OAAO,SAAS,CAAC;SAClB;QACD,uBAAuB;QACvB,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,UAAkB,EAAE,EAAE;QAC/D,IAAI;YACF,MAAM,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;YAC3C,IAAI,YAAY,EAAE;gBAChB,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;gBACvC,YAAY,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;gBACtC,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;iBAAM;gBACL,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;SACF;QAAC,OAAO,MAAM,EAAE;YACf,uBAAuB;YACvB,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QACnF,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,SAAS,cAAc,CAAC,KAA4C;QAClE,uBAAuB;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,eAAe,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;IACH,CAAC;IACD,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,uBAAuB,EAAE,WAAW,IAAI,2BAA2B,CAAC,CAAC;IAC9G,OAAO,oBAAC,KAAK,mBAAa,uBAAuB,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EACpI,QAAQ,EAAE,iBAAiB,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;AACzI,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Date\r\n /\r\n\r\nimport \"./DateField.scss\";\r\nimport as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { AlternateDateFormats, DateFormatter, TimeDisplay } from \"@itwin/appui-abstract\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { Input } from \"@itwin/itwinui-react\";\r\nimport { Logger } from \"@itwin/core-bentley\";\r\n\r\n/** Props for [[DateField]] Component.\r\n * @internal\r\n /\r\nexport interface DateFieldProps extends CommonProps {\r\n /* Defines initial date and time for component. /\r\n initialDate: Date;\r\n /* Function to call when the date or time is changed. /\r\n onDateChange?: (day: Date) => void;\r\n /* Optional value to define if edit field allows editing. If a DateFormatter is provided\r\n * it must provide a parseData function or the field will be read only no matter the setting of this value. /\r\n readOnly?: boolean;\r\n /* Optional date formatter that produces an explicit date display /\r\n dateFormatter?: DateFormatter;\r\n /* This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. /\r\n timeDisplay?: TimeDisplay;\r\n}\r\n\r\n/* Function to format a Date object that is used in control, type editor, and type converter\r\n * to produce a consistent formatted Date string.\r\n * @internal\r\n /\r\nexport function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string \| undefined {\r\n if (customFormatter) {\r\n return customFormatter.formateDate(inputDate);\r\n }\r\n\r\n if (alternateDateFormat) {\r\n switch (alternateDateFormat) {\r\n case AlternateDateFormats.IsoDateTime:\r\n return inputDate.toISOString();\r\n case AlternateDateFormats.IsoShort:\r\n return inputDate.toISOString().slice(0, 10);\r\n case AlternateDateFormats.UtcDateTime:\r\n return inputDate.toUTCString().slice(5);\r\n case AlternateDateFormats.UtcShort:\r\n return inputDate.toUTCString().slice(5, 16);\r\n case AlternateDateFormats.UtcDateTimeWithDay:\r\n return inputDate.toUTCString();\r\n case AlternateDateFormats.UtcShortWithDay:\r\n return inputDate.toUTCString().slice(0, 16);\r\n }\r\n } else {\r\n const dateString = inputDate.toLocaleDateString(undefined, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" });\r\n let timeString: string = \"\";\r\n\r\n if (timeDisplay) {\r\n switch (timeDisplay) {\r\n case TimeDisplay.H12MC:\r\n timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\" });\r\n break;\r\n case TimeDisplay.H12MSC:\r\n timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\r\n break;\r\n case TimeDisplay.H24M:\r\n timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\" }));\r\n // istanbul ignore next\r\n if (timeString === \"24:00\")\r\n timeString = \"00:00\";\r\n break;\r\n case TimeDisplay.H24MS:\r\n timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\r\n // istanbul ignore next\r\n if (timeString === \"24:00:00\")\r\n timeString = \"00:00:00\";\r\n break;\r\n }\r\n }\r\n return timeString.length ? `${dateString}, ${timeString}` : dateString;\r\n }\r\n}\r\n\r\n/* Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.\r\n * @internal\r\n /\r\nexport function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps) {\r\n const initialDateRef = React.useRef(initialDate);\r\n const [hasBadInput, setHasBadInput] = React.useState(false);\r\n const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));\r\n\r\n // See if new initialDate props have changed since component mounted\r\n React.useEffect(() => {\r\n // istanbul ignore else\r\n if (initialDate.getTime() !== initialDateRef.current.getTime()) {\r\n initialDateRef.current = initialDate;\r\n }\r\n setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));\r\n }, [initialDate, dateFormatter, timeDisplay]);\r\n\r\n const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\r\n setInputValue(event.currentTarget.value);\r\n }, []);\r\n\r\n const parseDate = React.useCallback((dateString: string) => {\r\n try {\r\n if (dateFormatter && dateFormatter.parseDate)\r\n return dateFormatter.parseDate(dateString);\r\n\r\n const newDateValue = Date.parse(dateString);\r\n // istanbul ignore else\r\n if (newDateValue)\r\n return new Date(newDateValue);\r\n } catch (_error) / istanbul ignore next */ {\r\n Logger.logInfo(\"DateField\", `Encountered error parsing input value '${dateString}' as a date.`);\r\n return undefined;\r\n }\r\n // istanbul ignore next\r\n return undefined;\r\n }, [dateFormatter]);\r\n\r\n const updateInputDate = React.useCallback((dateString: string) => {\r\n try {\r\n const newDateValue = parseDate(dateString);\r\n if (newDateValue) {\r\n const newDate = new Date(newDateValue);\r\n onDateChange && onDateChange(newDate);\r\n setHasBadInput(false);\r\n } else {\r\n setHasBadInput(true);\r\n }\r\n } catch (_error) {\r\n // istanbul ignore next\r\n setHasBadInput(true);\r\n }\r\n }, [onDateChange, parseDate]);\r\n\r\n const handleOnBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\r\n updateInputDate(event.target.value);\r\n }, [updateInputDate]);\r\n\r\n function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\r\n // istanbul ignore else\r\n if (event.key === \"Enter\") {\r\n updateInputDate(event.currentTarget.value);\r\n event.preventDefault();\r\n }\r\n }\r\n const classNames = classnames(className, \"components-date-input\", hasBadInput && \"components-date-has-error\");\r\n return <Input data-testid=\"components-date-input\" style={style} className={classNames} onKeyDown={onInputKeyDown} onBlur={handleOnBlur}\r\n onChange={handleInputChange} value={inputValue} disabled={readOnly \|\| (dateFormatter && !(dateFormatter.parseDate))} size=\"small\" />;\r\n}\r\n"]}
1	+ {"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DateField.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,kBAAkB,CAAC;AAC1B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAiB,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAmB7C;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,SAAe,EAAE,WAAyB,EAAE,eAA+B,EAAE,mBAA0C;IACrJ,IAAI,eAAe,EAAE;QACnB,OAAO,eAAe,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;KAC/C;IAED,IAAI,mBAAmB,EAAE;QACvB,QAAQ,mBAAmB,EAAE;YAC3B,KAAK,oBAAoB,CAAC,WAAW;gBACnC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC;YACjC,KAAK,oBAAoB,CAAC,QAAQ;gBAChC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC9C,KAAK,oBAAoB,CAAC,WAAW;gBACnC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YAC1C,KAAK,oBAAoB,CAAC,QAAQ;gBAChC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;YAC9C,KAAK,oBAAoB,CAAC,kBAAkB;gBAC1C,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC;YACjC,KAAK,oBAAoB,CAAC,eAAe;gBACvC,OAAO,SAAS,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;SAC/C;KACF;SAAM;QACL,MAAM,UAAU,GAAG,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QAClH,IAAI,UAAU,GAAW,EAAE,CAAC;QAE5B,IAAI,WAAW,EAAE;YACf,QAAQ,WAAW,EAAE;gBACnB,KAAK,WAAW,CAAC,KAAK;oBACpB,UAAU,GAAG,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;oBAC3G,MAAM;gBACR,KAAK,WAAW,CAAC,MAAM;oBACrB,UAAU,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;oBAChI,MAAM;gBACR,KAAK,WAAW,CAAC,IAAI;oBACnB,UAAU,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;oBAC9G,uBAAuB;oBACvB,IAAI,UAAU,KAAK,OAAO;wBACxB,UAAU,GAAG,OAAO,CAAC;oBACvB,MAAM;gBACR,KAAK,WAAW,CAAC,KAAK;oBACpB,UAAU,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC;oBACjI,uBAAuB;oBACvB,IAAI,UAAU,KAAK,UAAU;wBAC3B,UAAU,GAAG,UAAU,CAAC;oBAC1B,MAAM;aACT;SACF;QACD,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC;KACxE;AACH,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,EAAkB;IAC7H,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7G,oEAAoE;IACpE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,uBAAuB;QACvB,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE;YAC9D,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;SACtC;QACD,aAAa,CAAC,eAAe,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC,CAAC,CAAC;IAC1E,CAAC,EAAE,CAAC,WAAW,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC;IAE9C,MAAM,iBAAiB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAA0C,EAAE,EAAE;QACzF,aAAa,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,UAAkB,EAAE,EAAE;QACzD,IAAI;YACF,IAAI,aAAa,IAAI,aAAa,CAAC,SAAS;gBAC1C,OAAO,aAAa,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;YAE7C,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;YAC5C,uBAAuB;YACvB,IAAI,YAAY;gBACd,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;SACjC;QAAC,OAAO,MAAM,EAAE,0BAA0B,CAAC;YAC1C,MAAM,CAAC,OAAO,CAAC,WAAW,EAAE,0CAA0C,UAAU,cAAc,CAAC,CAAC;YAChG,OAAO,SAAS,CAAC;SAClB;QACD,uBAAuB;QACvB,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC;IAEpB,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,UAAkB,EAAE,EAAE;QAC/D,IAAI;YACF,MAAM,YAAY,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;YAC3C,IAAI,YAAY,EAAE;gBAChB,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;gBACvC,YAAY,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC;gBACtC,cAAc,CAAC,KAAK,CAAC,CAAC;aACvB;iBAAM;gBACL,cAAc,CAAC,IAAI,CAAC,CAAC;aACtB;SACF;QAAC,OAAO,MAAM,EAAE;YACf,uBAAuB;YACvB,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC,CAAC;IAE9B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,KAAyC,EAAE,EAAE;QACnF,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEtB,SAAS,cAAc,CAAC,KAA4C;QAClE,uBAAuB;QACvB,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE;YACzB,eAAe,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YAC3C,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;IACH,CAAC;IACD,MAAM,UAAU,GAAG,UAAU,CAAC,SAAS,EAAE,uBAAuB,EAAE,WAAW,IAAI,2BAA2B,CAAC,CAAC;IAC9G,OAAO,oBAAC,KAAK,mBAAa,uBAAuB,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,EACpI,QAAQ,EAAE,iBAAiB,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;AACzI,CAAC","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n--------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Date\n /\n\nimport \"./DateField.scss\";\nimport as React from \"react\";\nimport classnames from \"classnames\";\nimport { AlternateDateFormats, DateFormatter, TimeDisplay } from \"@itwin/appui-abstract\";\nimport { CommonProps } from \"@itwin/core-react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport { Logger } from \"@itwin/core-bentley\";\n\n/** Props for [[DateField]] Component.\n * @internal\n /\nexport interface DateFieldProps extends CommonProps {\n /* Defines initial date and time for component. /\n initialDate: Date;\n /* Function to call when the date or time is changed. /\n onDateChange?: (day: Date) => void;\n /* Optional value to define if edit field allows editing. If a DateFormatter is provided\n * it must provide a parseData function or the field will be read only no matter the setting of this value. /\n readOnly?: boolean;\n /* Optional date formatter that produces an explicit date display /\n dateFormatter?: DateFormatter;\n /* This property has two purposes, the first is specify that the display of time is desired and the second is to define the format of the time display. /\n timeDisplay?: TimeDisplay;\n}\n\n/* Function to format a Date object that is used in control, type editor, and type converter\n * to produce a consistent formatted Date string.\n * @internal\n /\nexport function formatInputDate(inputDate: Date, timeDisplay?: TimeDisplay, customFormatter?: DateFormatter, alternateDateFormat?: AlternateDateFormats): string \| undefined {\n if (customFormatter) {\n return customFormatter.formateDate(inputDate);\n }\n\n if (alternateDateFormat) {\n switch (alternateDateFormat) {\n case AlternateDateFormats.IsoDateTime:\n return inputDate.toISOString();\n case AlternateDateFormats.IsoShort:\n return inputDate.toISOString().slice(0, 10);\n case AlternateDateFormats.UtcDateTime:\n return inputDate.toUTCString().slice(5);\n case AlternateDateFormats.UtcShort:\n return inputDate.toUTCString().slice(5, 16);\n case AlternateDateFormats.UtcDateTimeWithDay:\n return inputDate.toUTCString();\n case AlternateDateFormats.UtcShortWithDay:\n return inputDate.toUTCString().slice(0, 16);\n }\n } else {\n const dateString = inputDate.toLocaleDateString(undefined, { day: \"2-digit\", month: \"2-digit\", year: \"numeric\" });\n let timeString: string = \"\";\n\n if (timeDisplay) {\n switch (timeDisplay) {\n case TimeDisplay.H12MC:\n timeString = inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\" });\n break;\n case TimeDisplay.H12MSC:\n timeString = (inputDate.toLocaleTimeString(undefined, { hour12: true, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\n break;\n case TimeDisplay.H24M:\n timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\" }));\n // istanbul ignore next\n if (timeString === \"24:00\")\n timeString = \"00:00\";\n break;\n case TimeDisplay.H24MS:\n timeString = (inputDate.toLocaleTimeString(undefined, { hour12: false, hour: \"2-digit\", minute: \"2-digit\", second: \"2-digit\" }));\n // istanbul ignore next\n if (timeString === \"24:00:00\")\n timeString = \"00:00:00\";\n break;\n }\n }\n return timeString.length ? `${dateString}, ${timeString}` : dateString;\n }\n}\n\n/* Date input component. This component is typically used by the [[DatePickerPopupButton]] to display and edit date and time.\n * @internal\n /\nexport function DateField({ initialDate, onDateChange, readOnly, dateFormatter, timeDisplay, style, className }: DateFieldProps) {\n const initialDateRef = React.useRef(initialDate);\n const [hasBadInput, setHasBadInput] = React.useState(false);\n const [inputValue, setInputValue] = React.useState(formatInputDate(initialDate, timeDisplay, dateFormatter));\n\n // See if new initialDate props have changed since component mounted\n React.useEffect(() => {\n // istanbul ignore else\n if (initialDate.getTime() !== initialDateRef.current.getTime()) {\n initialDateRef.current = initialDate;\n }\n setInputValue(formatInputDate(initialDate, timeDisplay, dateFormatter));\n }, [initialDate, dateFormatter, timeDisplay]);\n\n const handleInputChange = React.useCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.currentTarget.value);\n }, []);\n\n const parseDate = React.useCallback((dateString: string) => {\n try {\n if (dateFormatter && dateFormatter.parseDate)\n return dateFormatter.parseDate(dateString);\n\n const newDateValue = Date.parse(dateString);\n // istanbul ignore else\n if (newDateValue)\n return new Date(newDateValue);\n } catch (_error) / istanbul ignore next */ {\n Logger.logInfo(\"DateField\", `Encountered error parsing input value '${dateString}' as a date.`);\n return undefined;\n }\n // istanbul ignore next\n return undefined;\n }, [dateFormatter]);\n\n const updateInputDate = React.useCallback((dateString: string) => {\n try {\n const newDateValue = parseDate(dateString);\n if (newDateValue) {\n const newDate = new Date(newDateValue);\n onDateChange && onDateChange(newDate);\n setHasBadInput(false);\n } else {\n setHasBadInput(true);\n }\n } catch (_error) {\n // istanbul ignore next\n setHasBadInput(true);\n }\n }, [onDateChange, parseDate]);\n\n const handleOnBlur = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {\n updateInputDate(event.target.value);\n }, [updateInputDate]);\n\n function onInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {\n // istanbul ignore else\n if (event.key === \"Enter\") {\n updateInputDate(event.currentTarget.value);\n event.preventDefault();\n }\n }\n const classNames = classnames(className, \"components-date-input\", hasBadInput && \"components-date-has-error\");\n return <Input data-testid=\"components-date-input\" style={style} className={classNames} onKeyDown={onInputKeyDown} onBlur={handleOnBlur}\n onChange={handleInputChange} value={inputValue} disabled={readOnly \|\| (dateFormatter && !(dateFormatter.parseDate))} size=\"small\" />;\n}\n"]}

package/lib/esm/components-react/datepicker/DateField.scss CHANGED Viewed

@@ -1,23 +1,23 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-.components-date-input {
-  width: auto;
-  &.components-date-has-error {
-    color: $buic-foreground-alert;
-  }
-  &.iui-input {
-    padding: $uicore-iui-input-padding;
-  }
-  &.iui-input[disabled] {
-    color: var(--buic-foreground-body);
-    opacity: 0.65;
-  }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+.components-date-input {
+  width: auto;
+  &.components-date-has-error {
+    color: $buic-foreground-alert;
+  }
+  &.iui-input {
+    padding: $uicore-iui-input-padding;
+  }
+  &.iui-input[disabled] {
+    color: var(--buic-foreground-body);
+    opacity: 0.65;
+  }
 }

package/lib/esm/components-react/datepicker/DatePicker.d.ts CHANGED Viewed

@@ -1,22 +1,22 @@
-/** @packageDocumentation
- * @module Date
- */
-import * as React from "react";
-import "./DatePicker.scss";
-/**
- * Props for [[DatePicker]] component.
- * @alpha
- */
-export interface DatePickerProps {
-    /** defines both date and time */
-    selected: Date;
-    /** function to call when date or time has changed */
-    onDateChange?: (day: Date) => void;
-    /** show focus outlines, useful for keyboard navigation */
-    showFocusOutline?: boolean;
-}
-/** DatePicker component. Show a month selector and a day calendar to select a specific date.
- * @alpha
- */
-export declare function DatePicker(props: DatePickerProps): React.JSX.Element;
+/** @packageDocumentation
+ * @module Date
+ */
+import * as React from "react";
+import "./DatePicker.scss";
+/**
+ * Props for [[DatePicker]] component.
+ * @alpha
+ */
+export interface DatePickerProps {
+    /** defines both date and time */
+    selected: Date;
+    /** function to call when date or time has changed */
+    onDateChange?: (day: Date) => void;
+    /** show focus outlines, useful for keyboard navigation */
+    showFocusOutline?: boolean;
+}
+/** DatePicker component. Show a month selector and a day calendar to select a specific date.
+ * @alpha
+ */
+export declare function DatePicker(props: DatePickerProps): React.JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map

package/lib/esm/components-react/datepicker/DatePicker.js CHANGED Viewed

@@ -1,175 +1,175 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Date
- */
-import * as React from "react";
-import classnames from "classnames";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { WebFontIcon } from "@itwin/core-react";
-import { UiComponents } from "../UiComponents";
-import "./DatePicker.scss";
-function isSameDay(a, b) {
-    return (a &&
-        b &&
-        a.getFullYear() === b.getFullYear() &&
-        a.getMonth() === b.getMonth() &&
-        a.getDate() === b.getDate());
-}
-/** DatePicker component. Show a month selector and a day calendar to select a specific date.
- * @alpha
- */
-export function DatePicker(props) {
-    const previousMonthLabel = React.useRef(UiComponents.localization.getLocalizedString("UiComponents:datepicker.previousMonth"));
-    const nextMonthLabel = React.useRef(UiComponents.localization.getLocalizedString("UiComponents:datepicker.nextMonth"));
-    const monthsLong = React.useRef([
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.january"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.february"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.march"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.april"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.may"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.june"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.july"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.august"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.september"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.october"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.november"),
-        UiComponents.localization.getLocalizedString("UiComponents:month.long.december"),
-    ]);
-    const daysLong = React.useRef([
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.sunday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.monday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.tuesday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.wednesday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.thursday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.friday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.long.saturday"),
-    ]);
-    const daysShort = React.useRef([
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.sunday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.monday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.tuesday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.wednesday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.thursday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.friday"),
-        UiComponents.localization.getLocalizedString("UiComponents:days.short.saturday"),
-    ]);
-    const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));
-    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());
-    const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());
-    const [focusedDay, setFocusedDay] = React.useState(selectedDay);
-    const days = React.useMemo(() => {
-        const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();
-        let offsetToFirst = new Date(msFirstDayOfMonth).getDay();
-        if (0 === offsetToFirst)
-            offsetToFirst = 7;
-        const daysInMonth = [];
-        // generate 6 weeks of dates
-        for (let i = 0; i < 42; i++) {
-            const adjustedDay = 1 + i - offsetToFirst;
-            daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
-        }
-        return daysInMonth;
-    }, [displayedMonthIndex, displayedYear]);
-    const weeks = React.useMemo(() => {
-        const weeksInMonth = [];
-        const weekCount = Math.ceil(days.length / 7);
-        for (let i = 0; i < weekCount; i++) {
-            weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));
-        }
-        return weeksInMonth;
-    }, [days]);
-    const setMonthAndYear = React.useCallback((newMonth, newYear) => {
-        setDisplayedMonthIndex(newMonth);
-        setDisplayedYear(newYear);
-        if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {
-            setFocusedDay(new Date(selectedDay.getTime()));
-        }
-        else {
-            const newFocusDay = new Date(focusedDay.getTime());
-            newFocusDay.setFullYear(newYear, newMonth, 1);
-            setFocusedDay(newFocusDay);
-        }
-    }, [focusedDay, selectedDay]);
-    const handleMoveToPreviousMonth = React.useCallback(() => {
-        const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
-        const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
-        setMonthAndYear(newMonth, newYear);
-    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
-    const handleMoveToNextMonth = React.useCallback(() => {
-        const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
-        const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
-        setMonthAndYear(newMonth, newYear);
-    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
-    // when invoked, it will return another function which can be used for the onClick React listener.
-    const handleOnDayChange = React.useCallback((day) => () => {
-        setSelectedDay(day);
-        setFocusedDay(day);
-        props.onDateChange && props.onDateChange(day);
-    }, [props]);
-    const handleCalendarKeyDown = React.useCallback((event) => {
-        if (event.key === SpecialKey.ArrowDown) {
-            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            if ((focusedDayIndex + 7) > 41)
-                setFocusedDay(days[focusedDayIndex % 7]);
-            else
-                setFocusedDay(days[focusedDayIndex + 7]);
-            event.preventDefault();
-        }
-        if (event.key === SpecialKey.ArrowUp) {
-            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            if ((focusedDayIndex - 7) < 0)
-                setFocusedDay(days[(focusedDayIndex % 7) + 35]);
-            else
-                setFocusedDay(days[focusedDayIndex - 7]);
-            event.preventDefault();
-        }
-        if (event.key === SpecialKey.ArrowLeft) {
-            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            // istanbul ignore else
-            if ((focusedDayIndex - 1) >= 0)
-                setFocusedDay(days[focusedDayIndex - 1]);
-            event.preventDefault();
-        }
-        if (event.key === SpecialKey.ArrowRight) {
-            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
-            // istanbul ignore else
-            if ((focusedDayIndex + 1) <= 41)
-                setFocusedDay(days[focusedDayIndex + 1]);
-            event.preventDefault();
-        }
-        if (event.key === SpecialKey.Enter || event.key === SpecialKey.Space) {
-            handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function
-            event.preventDefault();
-        }
-    }, [days, focusedDay, handleOnDayChange]);
-    const previousButtonClass = classnames("components-previous-month", props.showFocusOutline && "showFocusOutline");
-    const nextButtonClass = classnames("components-next-month", props.showFocusOutline && "showFocusOutline");
-    const calendarClass = classnames("components-date-picker-calendar-month", props.showFocusOutline && "showFocusOutline");
-    return (React.createElement("div", { className: "components-date-picker-calendar" },
-        React.createElement("div", { className: "components-date-picker-calendar-header-months" },
-            React.createElement("button", { className: previousButtonClass, title: previousMonthLabel.current, onClick: handleMoveToPreviousMonth },
-                React.createElement(WebFontIcon, { iconName: "icon-chevron-left" })),
-            React.createElement("span", { className: "components-month-year" },
-                monthsLong.current[displayedMonthIndex],
-                " ",
-                displayedYear),
-            React.createElement("button", { className: nextButtonClass, title: nextMonthLabel.current, onClick: handleMoveToNextMonth },
-                React.createElement(WebFontIcon, { iconName: "icon-chevron-right" }))),
-        React.createElement("div", { className: "components-date-picker-calendar-header-weekdays" }, [0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) => React.createElement("div", { key: `day-${dayOfWeek}`, className: "components-date-picker-calendar-header-day-short", title: daysLong.current[dayOfWeek] },
-            React.createElement("span", null, daysShort.current[dayOfWeek])))),
-        React.createElement("ul", { tabIndex: 0, onKeyDown: handleCalendarKeyDown, "data-testid": "components-date-picker-calendar-list", className: calendarClass, role: "listbox" }, weeks.map((weekdays, weekIndex) => (React.createElement(React.Fragment, { key: `week-${weekIndex}` }, weekdays.map((day, dayIndex) => {
-            const isActive = selectedDay && day && isSameDay(selectedDay, day);
-            const isFocused = focusedDay && day && isSameDay(focusedDay, day) && props.showFocusOutline;
-            const isCurrentMonth = day.getMonth() === displayedMonthIndex;
-            const classNames = classnames("components-date-picker-calendar-day", isActive && "selected", !isCurrentMonth && "notCurrentMonth", isFocused && "focused");
-            const dateValue = day.getDate();
-            return (
-            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
-            React.createElement("li", { className: classNames, key: `${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`, onClick: handleOnDayChange(day), role: "option", "aria-selected": isActive, "data-value": day.getTime() },
-                React.createElement("span", null, dateValue)));
-        })))))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Date
+ */
+import * as React from "react";
+import classnames from "classnames";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { WebFontIcon } from "@itwin/core-react";
+import { UiComponents } from "../UiComponents";
+import "./DatePicker.scss";
+function isSameDay(a, b) {
+    return (a &&
+        b &&
+        a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+/** DatePicker component. Show a month selector and a day calendar to select a specific date.
+ * @alpha
+ */
+export function DatePicker(props) {
+    const previousMonthLabel = React.useRef(UiComponents.localization.getLocalizedString("UiComponents:datepicker.previousMonth"));
+    const nextMonthLabel = React.useRef(UiComponents.localization.getLocalizedString("UiComponents:datepicker.nextMonth"));
+    const monthsLong = React.useRef([
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.january"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.february"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.march"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.april"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.may"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.june"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.july"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.august"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.september"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.october"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.november"),
+        UiComponents.localization.getLocalizedString("UiComponents:month.long.december"),
+    ]);
+    const daysLong = React.useRef([
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.sunday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.monday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.tuesday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.wednesday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.thursday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.friday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.long.saturday"),
+    ]);
+    const daysShort = React.useRef([
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.sunday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.monday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.tuesday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.wednesday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.thursday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.friday"),
+        UiComponents.localization.getLocalizedString("UiComponents:days.short.saturday"),
+    ]);
+    const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));
+    const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());
+    const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());
+    const [focusedDay, setFocusedDay] = React.useState(selectedDay);
+    const days = React.useMemo(() => {
+        const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();
+        let offsetToFirst = new Date(msFirstDayOfMonth).getDay();
+        if (0 === offsetToFirst)
+            offsetToFirst = 7;
+        const daysInMonth = [];
+        // generate 6 weeks of dates
+        for (let i = 0; i < 42; i++) {
+            const adjustedDay = 1 + i - offsetToFirst;
+            daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));
+        }
+        return daysInMonth;
+    }, [displayedMonthIndex, displayedYear]);
+    const weeks = React.useMemo(() => {
+        const weeksInMonth = [];
+        const weekCount = Math.ceil(days.length / 7);
+        for (let i = 0; i < weekCount; i++) {
+            weeksInMonth.push(days.slice(i * 7, (i + 1) * 7));
+        }
+        return weeksInMonth;
+    }, [days]);
+    const setMonthAndYear = React.useCallback((newMonth, newYear) => {
+        setDisplayedMonthIndex(newMonth);
+        setDisplayedYear(newYear);
+        if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {
+            setFocusedDay(new Date(selectedDay.getTime()));
+        }
+        else {
+            const newFocusDay = new Date(focusedDay.getTime());
+            newFocusDay.setFullYear(newYear, newMonth, 1);
+            setFocusedDay(newFocusDay);
+        }
+    }, [focusedDay, selectedDay]);
+    const handleMoveToPreviousMonth = React.useCallback(() => {
+        const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;
+        const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;
+        setMonthAndYear(newMonth, newYear);
+    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
+    const handleMoveToNextMonth = React.useCallback(() => {
+        const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;
+        const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;
+        setMonthAndYear(newMonth, newYear);
+    }, [displayedMonthIndex, displayedYear, setMonthAndYear]);
+    // when invoked, it will return another function which can be used for the onClick React listener.
+    const handleOnDayChange = React.useCallback((day) => () => {
+        setSelectedDay(day);
+        setFocusedDay(day);
+        props.onDateChange && props.onDateChange(day);
+    }, [props]);
+    const handleCalendarKeyDown = React.useCallback((event) => {
+        if (event.key === SpecialKey.ArrowDown) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            if ((focusedDayIndex + 7) > 41)
+                setFocusedDay(days[focusedDayIndex % 7]);
+            else
+                setFocusedDay(days[focusedDayIndex + 7]);
+            event.preventDefault();
+        }
+        if (event.key === SpecialKey.ArrowUp) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            if ((focusedDayIndex - 7) < 0)
+                setFocusedDay(days[(focusedDayIndex % 7) + 35]);
+            else
+                setFocusedDay(days[focusedDayIndex - 7]);
+            event.preventDefault();
+        }
+        if (event.key === SpecialKey.ArrowLeft) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            // istanbul ignore else
+            if ((focusedDayIndex - 1) >= 0)
+                setFocusedDay(days[focusedDayIndex - 1]);
+            event.preventDefault();
+        }
+        if (event.key === SpecialKey.ArrowRight) {
+            const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));
+            // istanbul ignore else
+            if ((focusedDayIndex + 1) <= 41)
+                setFocusedDay(days[focusedDayIndex + 1]);
+            event.preventDefault();
+        }
+        if (event.key === SpecialKey.Enter || event.key === SpecialKey.Space) {
+            handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function
+            event.preventDefault();
+        }
+    }, [days, focusedDay, handleOnDayChange]);
+    const previousButtonClass = classnames("components-previous-month", props.showFocusOutline && "showFocusOutline");
+    const nextButtonClass = classnames("components-next-month", props.showFocusOutline && "showFocusOutline");
+    const calendarClass = classnames("components-date-picker-calendar-month", props.showFocusOutline && "showFocusOutline");
+    return (React.createElement("div", { className: "components-date-picker-calendar" },
+        React.createElement("div", { className: "components-date-picker-calendar-header-months" },
+            React.createElement("button", { className: previousButtonClass, title: previousMonthLabel.current, onClick: handleMoveToPreviousMonth },
+                React.createElement(WebFontIcon, { iconName: "icon-chevron-left" })),
+            React.createElement("span", { className: "components-month-year" },
+                monthsLong.current[displayedMonthIndex],
+                " ",
+                displayedYear),
+            React.createElement("button", { className: nextButtonClass, title: nextMonthLabel.current, onClick: handleMoveToNextMonth },
+                React.createElement(WebFontIcon, { iconName: "icon-chevron-right" }))),
+        React.createElement("div", { className: "components-date-picker-calendar-header-weekdays" }, [0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) => React.createElement("div", { key: `day-${dayOfWeek}`, className: "components-date-picker-calendar-header-day-short", title: daysLong.current[dayOfWeek] },
+            React.createElement("span", null, daysShort.current[dayOfWeek])))),
+        React.createElement("ul", { tabIndex: 0, onKeyDown: handleCalendarKeyDown, "data-testid": "components-date-picker-calendar-list", className: calendarClass, role: "listbox" }, weeks.map((weekdays, weekIndex) => (React.createElement(React.Fragment, { key: `week-${weekIndex}` }, weekdays.map((day, dayIndex) => {
+            const isActive = selectedDay && day && isSameDay(selectedDay, day);
+            const isFocused = focusedDay && day && isSameDay(focusedDay, day) && props.showFocusOutline;
+            const isCurrentMonth = day.getMonth() === displayedMonthIndex;
+            const classNames = classnames("components-date-picker-calendar-day", isActive && "selected", !isCurrentMonth && "notCurrentMonth", isFocused && "focused");
+            const dateValue = day.getDate();
+            return (
+            /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */
+            React.createElement("li", { className: classNames, key: `${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`, onClick: handleOnDayChange(day), role: "option", "aria-selected": isActive, "data-value": day.getTime() },
+                React.createElement("span", null, dateValue)));
+        })))))));
+}
 //# sourceMappingURL=DatePicker.js.map

package/lib/esm/components-react/datepicker/DatePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\r\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n--------------------------------------------------------------------------------------------/\r\n/** @packageDocumentation\r\n * @module Date\r\n /\r\n\r\nimport as React from \"react\";\r\nimport classnames from \"classnames\";\r\nimport { SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { WebFontIcon } from \"@itwin/core-react\";\r\nimport { UiComponents } from \"../UiComponents\";\r\n\r\nimport \"./DatePicker.scss\";\r\n\r\nfunction isSameDay(a: Date, b: Date) {\r\n return (\r\n a &&\r\n b &&\r\n a.getFullYear() === b.getFullYear() &&\r\n a.getMonth() === b.getMonth() &&\r\n a.getDate() === b.getDate()\r\n );\r\n}\r\n\r\n/*\r\n Props for [[DatePicker]] component.\r\n * @alpha\r\n /\r\nexport interface DatePickerProps {\r\n /* defines both date and time /\r\n selected: Date;\r\n /* function to call when date or time has changed /\r\n onDateChange?: (day: Date) => void;\r\n /* show focus outlines, useful for keyboard navigation /\r\n showFocusOutline?: boolean;\r\n}\r\n\r\n/* DatePicker component. Show a month selector and a day calendar to select a specific date.\r\n * @alpha\r\n /\r\nexport function DatePicker(props: DatePickerProps) {\r\n const previousMonthLabel = React.useRef(UiComponents.localization.getLocalizedString(\"UiComponents:datepicker.previousMonth\"));\r\n const nextMonthLabel = React.useRef(UiComponents.localization.getLocalizedString(\"UiComponents:datepicker.nextMonth\"));\r\n const monthsLong = React.useRef([\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.january\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.february\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.march\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.april\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.may\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.june\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.july\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.august\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.september\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.october\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.november\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.december\"),\r\n ]);\r\n\r\n const daysLong = React.useRef([\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.sunday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.monday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.tuesday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.wednesday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.thursday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.friday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.saturday\"),\r\n ]);\r\n\r\n const daysShort = React.useRef([\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.sunday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.monday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.tuesday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.wednesday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.thursday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.friday\"),\r\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.saturday\"),\r\n ]);\r\n\r\n const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));\r\n const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());\r\n const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());\r\n const [focusedDay, setFocusedDay] = React.useState(selectedDay);\r\n const days = React.useMemo(() => {\r\n const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();\r\n let offsetToFirst = new Date(msFirstDayOfMonth).getDay();\r\n if (0 === offsetToFirst)\r\n offsetToFirst = 7;\r\n\r\n const daysInMonth: Date[] = [];\r\n // generate 6 weeks of dates\r\n for (let i = 0; i < 42; i++) {\r\n const adjustedDay = 1 + i - offsetToFirst;\r\n daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));\r\n }\r\n return daysInMonth;\r\n }, [displayedMonthIndex, displayedYear]);\r\n\r\n const weeks = React.useMemo(() => {\r\n const weeksInMonth = [];\r\n const weekCount = Math.ceil(days.length / 7);\r\n for (let i = 0; i < weekCount; i++) {\r\n weeksInMonth.push(days.slice(i 7, (i + 1) * 7));\r\n }\r\n return weeksInMonth;\r\n }, [days]);\r\n\r\n const setMonthAndYear = React.useCallback((newMonth: number, newYear: number) => {\r\n setDisplayedMonthIndex(newMonth);\r\n setDisplayedYear(newYear);\r\n if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {\r\n setFocusedDay(new Date(selectedDay.getTime()));\r\n } else {\r\n const newFocusDay = new Date(focusedDay.getTime());\r\n newFocusDay.setFullYear(newYear, newMonth, 1);\r\n setFocusedDay(newFocusDay);\r\n }\r\n }, [focusedDay, selectedDay]);\r\n\r\n const handleMoveToPreviousMonth = React.useCallback(() => {\r\n const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;\r\n const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;\r\n setMonthAndYear(newMonth, newYear);\r\n }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\r\n\r\n const handleMoveToNextMonth = React.useCallback(() => {\r\n const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;\r\n const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;\r\n setMonthAndYear(newMonth, newYear);\r\n }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\r\n\r\n // when invoked, it will return another function which can be used for the onClick React listener.\r\n const handleOnDayChange = React.useCallback((day: Date) => () => {\r\n setSelectedDay(day);\r\n setFocusedDay(day);\r\n props.onDateChange && props.onDateChange(day);\r\n }, [props]);\r\n\r\n const handleCalendarKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\r\n if (event.key === SpecialKey.ArrowDown) {\r\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\r\n if ((focusedDayIndex + 7) > 41)\r\n setFocusedDay(days[focusedDayIndex % 7]);\r\n else\r\n setFocusedDay(days[focusedDayIndex + 7]);\r\n event.preventDefault();\r\n }\r\n if (event.key === SpecialKey.ArrowUp) {\r\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\r\n if ((focusedDayIndex - 7) < 0)\r\n setFocusedDay(days[(focusedDayIndex % 7) + 35]);\r\n else\r\n setFocusedDay(days[focusedDayIndex - 7]);\r\n event.preventDefault();\r\n }\r\n if (event.key === SpecialKey.ArrowLeft) {\r\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\r\n // istanbul ignore else\r\n if ((focusedDayIndex - 1) >= 0)\r\n setFocusedDay(days[focusedDayIndex - 1]);\r\n event.preventDefault();\r\n }\r\n if (event.key === SpecialKey.ArrowRight) {\r\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\r\n // istanbul ignore else\r\n if ((focusedDayIndex + 1) <= 41)\r\n setFocusedDay(days[focusedDayIndex + 1]);\r\n event.preventDefault();\r\n }\r\n if (event.key === SpecialKey.Enter \|\| event.key === SpecialKey.Space) {\r\n handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function\r\n event.preventDefault();\r\n }\r\n }, [days, focusedDay, handleOnDayChange]);\r\n\r\n const previousButtonClass = classnames(\"components-previous-month\", props.showFocusOutline && \"showFocusOutline\");\r\n const nextButtonClass = classnames(\"components-next-month\", props.showFocusOutline && \"showFocusOutline\");\r\n const calendarClass = classnames(\"components-date-picker-calendar-month\", props.showFocusOutline && \"showFocusOutline\");\r\n\r\n return (\r\n <div className=\"components-date-picker-calendar\">\r\n <div className=\"components-date-picker-calendar-header-months\">\r\n <button className={previousButtonClass} title={previousMonthLabel.current} onClick={handleMoveToPreviousMonth}>\r\n <WebFontIcon iconName={\"icon-chevron-left\"} />\r\n </button>\r\n <span className=\"components-month-year\">{monthsLong.current[displayedMonthIndex]} {displayedYear}</span>\r\n <button className={nextButtonClass} title={nextMonthLabel.current} onClick={handleMoveToNextMonth}>\r\n <WebFontIcon iconName={\"icon-chevron-right\"} />\r\n </button>\r\n </div>\r\n <div className=\"components-date-picker-calendar-header-weekdays\">\r\n {[0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) =>\r\n <div key={`day-${dayOfWeek}`} className=\"components-date-picker-calendar-header-day-short\"\r\n title={daysLong.current[dayOfWeek]}><span>{daysShort.current[dayOfWeek]}</span></div>)}\r\n </div>\r\n <ul tabIndex={0} onKeyDown={handleCalendarKeyDown} data-testid=\"components-date-picker-calendar-list\" className={calendarClass} role=\"listbox\">\r\n {weeks.map((weekdays, weekIndex) => (\r\n <React.Fragment key={`week-${weekIndex}`}>\r\n {weekdays.map((day: Date, dayIndex: number) => {\r\n const isActive = selectedDay && day && isSameDay(selectedDay, day);\r\n const isFocused = focusedDay && day && isSameDay(focusedDay, day) && props.showFocusOutline;\r\n const isCurrentMonth = day.getMonth() === displayedMonthIndex;\r\n const classNames = classnames(\"components-date-picker-calendar-day\", isActive && \"selected\", !isCurrentMonth && \"notCurrentMonth\", isFocused && \"focused\");\r\n const dateValue = day.getDate();\r\n return (\r\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\r\n <li className={classNames} key={`${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`}\r\n onClick={handleOnDayChange(day)} role=\"option\" aria-selected={isActive} data-value={day.getTime()}>\r\n <span>{dateValue}</span>\r\n </li>\r\n );\r\n })}\r\n </React.Fragment>)\r\n )}\r\n </ul>\r\n </div>\r\n );\r\n}\r\n"]}
1	+ {"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components-react/datepicker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/---------------------------------------------------------------------------------------------\n Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n--------------------------------------------------------------------------------------------/\n/** @packageDocumentation\n * @module Date\n /\n\nimport as React from \"react\";\nimport classnames from \"classnames\";\nimport { SpecialKey } from \"@itwin/appui-abstract\";\nimport { WebFontIcon } from \"@itwin/core-react\";\nimport { UiComponents } from \"../UiComponents\";\n\nimport \"./DatePicker.scss\";\n\nfunction isSameDay(a: Date, b: Date) {\n return (\n a &&\n b &&\n a.getFullYear() === b.getFullYear() &&\n a.getMonth() === b.getMonth() &&\n a.getDate() === b.getDate()\n );\n}\n\n/*\n Props for [[DatePicker]] component.\n * @alpha\n /\nexport interface DatePickerProps {\n /* defines both date and time /\n selected: Date;\n /* function to call when date or time has changed /\n onDateChange?: (day: Date) => void;\n /* show focus outlines, useful for keyboard navigation /\n showFocusOutline?: boolean;\n}\n\n/* DatePicker component. Show a month selector and a day calendar to select a specific date.\n * @alpha\n /\nexport function DatePicker(props: DatePickerProps) {\n const previousMonthLabel = React.useRef(UiComponents.localization.getLocalizedString(\"UiComponents:datepicker.previousMonth\"));\n const nextMonthLabel = React.useRef(UiComponents.localization.getLocalizedString(\"UiComponents:datepicker.nextMonth\"));\n const monthsLong = React.useRef([\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.january\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.february\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.march\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.april\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.may\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.june\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.july\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.august\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.september\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.october\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.november\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:month.long.december\"),\n ]);\n\n const daysLong = React.useRef([\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.sunday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.monday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.tuesday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.wednesday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.thursday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.friday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.long.saturday\"),\n ]);\n\n const daysShort = React.useRef([\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.sunday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.monday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.tuesday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.wednesday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.thursday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.friday\"),\n UiComponents.localization.getLocalizedString(\"UiComponents:days.short.saturday\"),\n ]);\n\n const [selectedDay, setSelectedDay] = React.useState(new Date(props.selected.getTime()));\n const [displayedMonthIndex, setDisplayedMonthIndex] = React.useState(selectedDay.getMonth());\n const [displayedYear, setDisplayedYear] = React.useState(selectedDay.getFullYear());\n const [focusedDay, setFocusedDay] = React.useState(selectedDay);\n const days = React.useMemo(() => {\n const msFirstDayOfMonth = new Date(displayedYear, displayedMonthIndex, 1).getTime();\n let offsetToFirst = new Date(msFirstDayOfMonth).getDay();\n if (0 === offsetToFirst)\n offsetToFirst = 7;\n\n const daysInMonth: Date[] = [];\n // generate 6 weeks of dates\n for (let i = 0; i < 42; i++) {\n const adjustedDay = 1 + i - offsetToFirst;\n daysInMonth.push(new Date(displayedYear, displayedMonthIndex, adjustedDay));\n }\n return daysInMonth;\n }, [displayedMonthIndex, displayedYear]);\n\n const weeks = React.useMemo(() => {\n const weeksInMonth = [];\n const weekCount = Math.ceil(days.length / 7);\n for (let i = 0; i < weekCount; i++) {\n weeksInMonth.push(days.slice(i 7, (i + 1) * 7));\n }\n return weeksInMonth;\n }, [days]);\n\n const setMonthAndYear = React.useCallback((newMonth: number, newYear: number) => {\n setDisplayedMonthIndex(newMonth);\n setDisplayedYear(newYear);\n if (selectedDay.getFullYear() === newYear && selectedDay.getMonth() === newMonth) {\n setFocusedDay(new Date(selectedDay.getTime()));\n } else {\n const newFocusDay = new Date(focusedDay.getTime());\n newFocusDay.setFullYear(newYear, newMonth, 1);\n setFocusedDay(newFocusDay);\n }\n }, [focusedDay, selectedDay]);\n\n const handleMoveToPreviousMonth = React.useCallback(() => {\n const newMonth = displayedMonthIndex !== 0 ? displayedMonthIndex - 1 : 11;\n const newYear = displayedMonthIndex !== 0 ? displayedYear : displayedYear - 1;\n setMonthAndYear(newMonth, newYear);\n }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\n\n const handleMoveToNextMonth = React.useCallback(() => {\n const newMonth = displayedMonthIndex !== 11 ? displayedMonthIndex + 1 : 0;\n const newYear = displayedMonthIndex !== 11 ? displayedYear : displayedYear + 1;\n setMonthAndYear(newMonth, newYear);\n }, [displayedMonthIndex, displayedYear, setMonthAndYear]);\n\n // when invoked, it will return another function which can be used for the onClick React listener.\n const handleOnDayChange = React.useCallback((day: Date) => () => {\n setSelectedDay(day);\n setFocusedDay(day);\n props.onDateChange && props.onDateChange(day);\n }, [props]);\n\n const handleCalendarKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLUListElement>) => {\n if (event.key === SpecialKey.ArrowDown) {\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\n if ((focusedDayIndex + 7) > 41)\n setFocusedDay(days[focusedDayIndex % 7]);\n else\n setFocusedDay(days[focusedDayIndex + 7]);\n event.preventDefault();\n }\n if (event.key === SpecialKey.ArrowUp) {\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\n if ((focusedDayIndex - 7) < 0)\n setFocusedDay(days[(focusedDayIndex % 7) + 35]);\n else\n setFocusedDay(days[focusedDayIndex - 7]);\n event.preventDefault();\n }\n if (event.key === SpecialKey.ArrowLeft) {\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\n // istanbul ignore else\n if ((focusedDayIndex - 1) >= 0)\n setFocusedDay(days[focusedDayIndex - 1]);\n event.preventDefault();\n }\n if (event.key === SpecialKey.ArrowRight) {\n const focusedDayIndex = days.findIndex((day) => isSameDay(day, focusedDay));\n // istanbul ignore else\n if ((focusedDayIndex + 1) <= 41)\n setFocusedDay(days[focusedDayIndex + 1]);\n event.preventDefault();\n }\n if (event.key === SpecialKey.Enter \|\| event.key === SpecialKey.Space) {\n handleOnDayChange(focusedDay)(); // NB: immediately call returned handler function\n event.preventDefault();\n }\n }, [days, focusedDay, handleOnDayChange]);\n\n const previousButtonClass = classnames(\"components-previous-month\", props.showFocusOutline && \"showFocusOutline\");\n const nextButtonClass = classnames(\"components-next-month\", props.showFocusOutline && \"showFocusOutline\");\n const calendarClass = classnames(\"components-date-picker-calendar-month\", props.showFocusOutline && \"showFocusOutline\");\n\n return (\n <div className=\"components-date-picker-calendar\">\n <div className=\"components-date-picker-calendar-header-months\">\n <button className={previousButtonClass} title={previousMonthLabel.current} onClick={handleMoveToPreviousMonth}>\n <WebFontIcon iconName={\"icon-chevron-left\"} />\n </button>\n <span className=\"components-month-year\">{monthsLong.current[displayedMonthIndex]} {displayedYear}</span>\n <button className={nextButtonClass} title={nextMonthLabel.current} onClick={handleMoveToNextMonth}>\n <WebFontIcon iconName={\"icon-chevron-right\"} />\n </button>\n </div>\n <div className=\"components-date-picker-calendar-header-weekdays\">\n {[0, 1, 2, 3, 4, 5, 6].map((dayOfWeek) =>\n <div key={`day-${dayOfWeek}`} className=\"components-date-picker-calendar-header-day-short\"\n title={daysLong.current[dayOfWeek]}><span>{daysShort.current[dayOfWeek]}</span></div>)}\n </div>\n <ul tabIndex={0} onKeyDown={handleCalendarKeyDown} data-testid=\"components-date-picker-calendar-list\" className={calendarClass} role=\"listbox\">\n {weeks.map((weekdays, weekIndex) => (\n <React.Fragment key={`week-${weekIndex}`}>\n {weekdays.map((day: Date, dayIndex: number) => {\n const isActive = selectedDay && day && isSameDay(selectedDay, day);\n const isFocused = focusedDay && day && isSameDay(focusedDay, day) && props.showFocusOutline;\n const isCurrentMonth = day.getMonth() === displayedMonthIndex;\n const classNames = classnames(\"components-date-picker-calendar-day\", isActive && \"selected\", !isCurrentMonth && \"notCurrentMonth\", isFocused && \"focused\");\n const dateValue = day.getDate();\n return (\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events */\n <li className={classNames} key={`${displayedYear}.${displayedMonthIndex}.day.${dayIndex}`}\n onClick={handleOnDayChange(day)} role=\"option\" aria-selected={isActive} data-value={day.getTime()}>\n <span>{dateValue}</span>\n </li>\n );\n })}\n </React.Fragment>)\n )}\n </ul>\n </div>\n );\n}\n"]}