@epilot/zenith-react 0.1.0 → 0.2.0-next.1
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.
- package/README.md +34 -0
- package/dist/components/accordion/accordion.js +57 -48
- package/dist/components/accordion/accordion.js.map +1 -1
- package/dist/components/alert-dialog/alert-dialog.js +120 -91
- package/dist/components/alert-dialog/alert-dialog.js.map +1 -1
- package/dist/components/avatar/avatar-group.js +38 -35
- package/dist/components/avatar/avatar-group.js.map +1 -1
- package/dist/components/avatar/avatar.js +78 -71
- package/dist/components/avatar/avatar.js.map +1 -1
- package/dist/components/badge/badge.js +60 -55
- package/dist/components/badge/badge.js.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +99 -54
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/button/button.js +87 -77
- package/dist/components/button/button.js.map +1 -1
- package/dist/components/button-group/button-group.js +36 -32
- package/dist/components/button-group/button-group.js.map +1 -1
- package/dist/components/callout/callout.js +113 -104
- package/dist/components/callout/callout.js.map +1 -1
- package/dist/components/card/card.js +62 -52
- package/dist/components/card/card.js.map +1 -1
- package/dist/components/checkbox/checkbox.js +22 -19
- package/dist/components/checkbox/checkbox.js.map +1 -1
- package/dist/components/code-block/code-block.js +135 -123
- package/dist/components/code-block/code-block.js.map +1 -1
- package/dist/components/code-editor/code-editor.js +276 -260
- package/dist/components/code-editor/code-editor.js.map +1 -1
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js +62 -56
- package/dist/components/collapsible-sidebar/collapsible-sidebar.js.map +1 -1
- package/dist/components/command/command.js +116 -105
- package/dist/components/command/command.js.map +1 -1
- package/dist/components/data-table/data-table-body.js +38 -34
- package/dist/components/data-table/data-table-body.js.map +1 -1
- package/dist/components/data-table/data-table-column-header.js +30 -26
- package/dist/components/data-table/data-table-column-header.js.map +1 -1
- package/dist/components/data-table/data-table-column-order.js +79 -73
- package/dist/components/data-table/data-table-column-order.js.map +1 -1
- package/dist/components/data-table/data-table-column-visibility.js +25 -22
- package/dist/components/data-table/data-table-column-visibility.js.map +1 -1
- package/dist/components/data-table/data-table-content.js +47 -44
- package/dist/components/data-table/data-table-content.js.map +1 -1
- package/dist/components/data-table/data-table-error.js +36 -32
- package/dist/components/data-table/data-table-error.js.map +1 -1
- package/dist/components/data-table/data-table-footer.js +10 -8
- package/dist/components/data-table/data-table-footer.js.map +1 -1
- package/dist/components/data-table/data-table-header-draggable.js +40 -36
- package/dist/components/data-table/data-table-header-draggable.js.map +1 -1
- package/dist/components/data-table/data-table-loading.js +21 -18
- package/dist/components/data-table/data-table-loading.js.map +1 -1
- package/dist/components/data-table/data-table-resize-handle.js +13 -11
- package/dist/components/data-table/data-table-resize-handle.js.map +1 -1
- package/dist/components/data-table/data-table-row.js +47 -44
- package/dist/components/data-table/data-table-row.js.map +1 -1
- package/dist/components/data-table/data-table-toolbar.js +9 -7
- package/dist/components/data-table/data-table-toolbar.js.map +1 -1
- package/dist/components/data-table/data-table.js +48 -46
- package/dist/components/data-table/data-table.js.map +1 -1
- package/dist/components/date-range-picker/date-range-picker.js +212 -193
- package/dist/components/date-range-picker/date-range-picker.js.map +1 -1
- package/dist/components/date-range-picker/range-calendar.js +36 -34
- package/dist/components/date-range-picker/range-calendar.js.map +1 -1
- package/dist/components/date-time-picker/calendar.js +290 -272
- package/dist/components/date-time-picker/calendar.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-input.js +127 -112
- package/dist/components/date-time-picker/date-time-picker-input.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker-panel.js +126 -120
- package/dist/components/date-time-picker/date-time-picker-panel.js.map +1 -1
- package/dist/components/date-time-picker/date-time-picker.js +91 -86
- package/dist/components/date-time-picker/date-time-picker.js.map +1 -1
- package/dist/components/date-time-picker/time-picker.js +95 -87
- package/dist/components/date-time-picker/time-picker.js.map +1 -1
- package/dist/components/dialog/dialog.js +125 -103
- package/dist/components/dialog/dialog.js.map +1 -1
- package/dist/components/drawer/drawer.js +151 -114
- package/dist/components/drawer/drawer.js.map +1 -1
- package/dist/components/dropdown-menu/dropdown-menu.js +141 -112
- package/dist/components/dropdown-menu/dropdown-menu.js.map +1 -1
- package/dist/components/field/field-combobox.js +196 -176
- package/dist/components/field/field-combobox.js.map +1 -1
- package/dist/components/field/field.js +237 -195
- package/dist/components/field/field.js.map +1 -1
- package/dist/components/list/list.js +237 -219
- package/dist/components/list/list.js.map +1 -1
- package/dist/components/option-card/option-card.js +129 -116
- package/dist/components/option-card/option-card.js.map +1 -1
- package/dist/components/pill/pill.js +55 -51
- package/dist/components/pill/pill.js.map +1 -1
- package/dist/components/popover/popover.js +53 -36
- package/dist/components/popover/popover.js.map +1 -1
- package/dist/components/radio/radio.js +38 -34
- package/dist/components/radio/radio.js.map +1 -1
- package/dist/components/scroll-area/scroll-area.js +38 -35
- package/dist/components/scroll-area/scroll-area.js.map +1 -1
- package/dist/components/scroll-overflow/scroll-overflow.js +166 -151
- package/dist/components/scroll-overflow/scroll-overflow.js.map +1 -1
- package/dist/components/segmented-control/segmented-control.js +93 -85
- package/dist/components/segmented-control/segmented-control.js.map +1 -1
- package/dist/components/select/select.js +149 -128
- package/dist/components/select/select.js.map +1 -1
- package/dist/components/separator/separator.js +19 -16
- package/dist/components/separator/separator.js.map +1 -1
- package/dist/components/skeleton/skeleton.js +34 -30
- package/dist/components/skeleton/skeleton.js.map +1 -1
- package/dist/components/spinner/spinner.js +22 -17
- package/dist/components/spinner/spinner.js.map +1 -1
- package/dist/components/surface/surface.js +25 -22
- package/dist/components/surface/surface.js.map +1 -1
- package/dist/components/switch/switch.js +66 -57
- package/dist/components/switch/switch.js.map +1 -1
- package/dist/components/table/table-pagination.js +139 -129
- package/dist/components/table/table-pagination.js.map +1 -1
- package/dist/components/table/table.js +104 -90
- package/dist/components/table/table.js.map +1 -1
- package/dist/components/tabs/tabs.js +212 -79
- package/dist/components/tabs/tabs.js.map +1 -1
- package/dist/components/toast/toast.js +112 -100
- package/dist/components/toast/toast.js.map +1 -1
- package/dist/components/toggle/toggle.js +32 -30
- package/dist/components/toggle/toggle.js.map +1 -1
- package/dist/components/tooltip/tooltip.js +59 -46
- package/dist/components/tooltip/tooltip.js.map +1 -1
- package/dist/index.d.ts +22 -0
- package/dist/lib/clear-button.js +18 -17
- package/dist/lib/clear-button.js.map +1 -1
- package/dist/styles/host-reset.js +47 -0
- package/dist/styles/host-reset.js.map +1 -0
- package/dist/styles/overlay-layer.js +5 -0
- package/dist/styles/overlay-layer.js.map +1 -0
- package/dist/tokens.json +1 -1
- package/package.json +8 -7
- package/scripts/migration-diagnostics.mjs +42 -7
- package/scripts/migration-sweep.mjs +9 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-time-picker-input.js","sources":["../../../src/components/date-time-picker/date-time-picker-input.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRifm } from \"rifm\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { Button } from \"../button/button\"\nimport { FieldGroupAddon, FieldInput, FieldInputGroup } from \"../field/field\"\nimport { PopoverAnchor, PopoverTrigger } from \"../popover/popover\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\n\nimport { useDateTimePickerContext } from \"./date-time-picker-context\"\nimport {\n formatDateTimeDisplay,\n parseDateTimeInput,\n} from \"./date-time-picker-utils\"\n\nconst CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"18px\"\n viewBox=\"0 -960 960 960\"\n width=\"18px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n </svg>\n)\n\nconst ACCEPT_DIGITS = /\\d/g\n\n// The mask always uses dots and colons regardless of the context format\nconst MASK_FORMAT_DATE = \"dd.MM.yyyy\"\nconst MASK_FORMAT_DATETIME = \"dd.MM.yyyy HH:mm\"\n\nconst createMaskFormatter = (isDateTime: boolean) => {\n const maxDigits = isDateTime ? 12 : 8\n\n return (str: string): string => {\n const digits = str.replace(/\\D/g, \"\").slice(0, maxDigits)\n let result = \"\"\n let di = 0\n\n result += (digits[di++] || \"_\") + (digits[di++] || \"_\")\n result += \".\"\n result += (digits[di++] || \"_\") + (digits[di++] || \"_\")\n result += \".\"\n result +=\n (digits[di++] || \"_\") +\n (digits[di++] || \"_\") +\n (digits[di++] || \"_\") +\n (digits[di++] || \"_\")\n\n if (isDateTime) {\n result += \" \"\n result += (digits[di++] || \"_\") + (digits[di++] || \"_\")\n result += \":\"\n result += (digits[di++] || \"_\") + (digits[di++] || \"_\")\n }\n\n return result\n }\n}\n\nexport type DateTimePickerInputProps = {\n editable?: boolean\n iconPosition?: \"start\" | \"end\"\n placeholder?: string\n inputAriaLabel?: string\n openPickerAriaLabel?: string\n keyboardIcon?: React.ReactNode\n testId?: string\n className?: string\n disabled?: boolean\n}\n\nconst useStyles = makeZenithStyles({\n group: {\n width: \"100%\",\n },\n input: {\n textAlign: \"left\",\n },\n inputFlex: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n})\n\n// Editable input with rifm masking — manages its own display value\ntype EditableInputProps = {\n ctx: ReturnType<typeof useDateTimePickerContext>\n disabled: boolean\n icon: React.ReactNode\n iconPosition: \"start\" | \"end\"\n inputAriaLabel: string\n openPickerAriaLabel: string\n testId?: string\n className?: string\n}\n\nconst EditableInput = React.forwardRef<HTMLDivElement, EditableInputProps>(\n function EditableInput(\n {\n ctx,\n disabled,\n icon,\n iconPosition,\n inputAriaLabel,\n openPickerAriaLabel,\n testId,\n className,\n },\n ref\n ) {\n const styles = useStyles()\n const {\n value,\n format,\n locale,\n onChange,\n onBlur,\n setTempValue,\n setInputValue,\n } = ctx\n\n const isDateTime = format.includes(\"HH:mm\")\n const maskFormat = React.useMemo(\n () => createMaskFormatter(isDateTime),\n [isDateTime]\n )\n const maskParseFormat = isDateTime ? MASK_FORMAT_DATETIME : MASK_FORMAT_DATE\n\n const displayValue = value\n ? formatDateTimeDisplay(value, format, locale)\n : \"\"\n\n const [maskedValue, setMaskedValue] = React.useState(\"\")\n const [focused, setFocused] = React.useState(false)\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n // Callback ref: focus + position cursor when the Rifm input mounts\n const rifmRefCallback = React.useCallback((el: HTMLInputElement | null) => {\n inputRef.current = el\n if (!el) return\n\n el.focus()\n const pos = el.value.indexOf(\"_\")\n\n if (pos !== -1) {\n el.setSelectionRange(pos, pos)\n }\n }, [])\n\n const handleRifmChange = React.useCallback(\n (val: string) => {\n setMaskedValue(val)\n\n // Position cursor at next empty placeholder after Rifm processes\n requestAnimationFrame(() => {\n const el = inputRef.current\n if (!el) return\n\n const pos = el.value.indexOf(\"_\")\n const cursor = pos === -1 ? el.value.length : pos\n\n el.setSelectionRange(cursor, cursor)\n })\n\n const digits = val.replace(/\\D/g, \"\")\n\n if (digits.length === 0) {\n onChange(null)\n setTempValue(null)\n setInputValue(\"\")\n\n return\n }\n\n const parsed = parseDateTimeInput(val, maskParseFormat, locale)\n\n if (parsed) {\n onChange(parsed)\n setTempValue(parsed)\n setInputValue(formatDateTimeDisplay(parsed, format, locale))\n }\n },\n [onChange, setTempValue, setInputValue, maskParseFormat, format, locale]\n )\n\n const rifm = useRifm({\n accept: ACCEPT_DIGITS,\n format: maskFormat,\n mask: true,\n onChange: handleRifmChange,\n value: maskedValue,\n })\n\n const handleFocus = React.useCallback(() => {\n setMaskedValue(maskFormat(displayValue))\n setFocused(true)\n }, [displayValue, maskFormat])\n\n const handleBlur = React.useCallback(() => {\n setFocused(false)\n onBlur?.()\n }, [onBlur])\n\n const handlePaste = React.useCallback(\n (e: React.ClipboardEvent<HTMLInputElement>) => {\n // Always paste a date from the beginning, ignoring caret position.\n e.preventDefault()\n handleRifmChange(maskFormat(e.clipboardData.getData(\"text\")))\n },\n [handleRifmChange, maskFormat]\n )\n\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n // On Backspace, skip the caret back over mask separators (\".\", \":\", \" \")\n if (e.key !== \"Backspace\") return\n\n const el = e.currentTarget\n const { selectionStart, selectionEnd } = el\n\n if (selectionStart === null || selectionStart !== selectionEnd) return\n\n let pos = selectionStart\n\n while (pos > 0 && !/[\\d_]/.test(el.value[pos - 1])) {\n pos--\n }\n\n if (pos !== selectionStart) {\n el.setSelectionRange(pos, pos)\n }\n },\n []\n )\n\n const iconAddon = (\n <FieldGroupAddon align={iconPosition}>\n <PopoverTrigger asChild>\n <Button\n aria-label={openPickerAriaLabel}\n disabled={disabled}\n size=\"icon-sm\"\n variant=\"tertiary\"\n >\n {icon}\n </Button>\n </PopoverTrigger>\n </FieldGroupAddon>\n )\n\n const input = focused ? (\n <FieldInput\n aria-label={inputAriaLabel}\n className={mergeClasses(styles.inputFlex, styles.input)}\n data-testid={testId}\n disabled={disabled}\n onBlur={handleBlur}\n onChange={rifm.onChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n ref={rifmRefCallback}\n value={rifm.value}\n />\n ) : (\n <FieldInput\n aria-label={inputAriaLabel}\n className={mergeClasses(styles.inputFlex, styles.input)}\n data-testid={testId}\n disabled={disabled}\n onFocus={handleFocus}\n readOnly\n value={displayValue}\n />\n )\n\n return (\n <PopoverAnchor asChild>\n <FieldInputGroup\n className={mergeClasses(styles.group, className)}\n data-slot=\"datetimepicker-input\"\n {...{ [SLOT_ATTR]: \"datetimepicker-input\" }}\n ref={ref}\n >\n {iconPosition === \"start\" && iconAddon}\n {input}\n {iconPosition === \"end\" && iconAddon}\n </FieldInputGroup>\n </PopoverAnchor>\n )\n }\n)\n\nexport const DateTimePickerInput = React.forwardRef<\n HTMLDivElement,\n DateTimePickerInputProps\n>(function DateTimePickerInput(\n {\n editable = false,\n iconPosition = \"end\",\n placeholder = \"dd/MM/yyyy HH:mm\",\n inputAriaLabel = \"change date and time\",\n openPickerAriaLabel = \"Open date picker\",\n keyboardIcon,\n testId,\n className,\n disabled: disabledProp,\n },\n ref\n) {\n const styles = useStyles()\n const ctx = useDateTimePickerContext()\n const disabled = disabledProp ?? ctx.disabled\n\n const IconComponent = keyboardIcon || <CalendarIcon />\n\n if (editable) {\n return (\n <EditableInput\n className={className}\n ctx={ctx}\n disabled={disabled}\n icon={IconComponent}\n iconPosition={iconPosition}\n inputAriaLabel={inputAriaLabel}\n openPickerAriaLabel={openPickerAriaLabel}\n ref={ref}\n testId={testId}\n />\n )\n }\n\n const iconAddon = (\n <FieldGroupAddon align={iconPosition}>\n <Button\n aria-label={openPickerAriaLabel}\n disabled={disabled}\n onClick={() => ctx.setIsOpen(true)}\n size=\"icon-sm\"\n variant=\"tertiary\"\n >\n {IconComponent}\n </Button>\n </FieldGroupAddon>\n )\n\n return (\n <FieldInputGroup\n className={mergeClasses(styles.group, className)}\n data-slot=\"datetimepicker-input\"\n {...{ [SLOT_ATTR]: \"datetimepicker-input\" }}\n ref={ref}\n >\n {iconPosition === \"start\" && iconAddon}\n <PopoverTrigger asChild>\n <FieldInput\n aria-label={inputAriaLabel}\n className={mergeClasses(styles.inputFlex, styles.input)}\n data-testid={testId}\n disabled={disabled}\n onBlur={ctx.handleInputBlur}\n onChange={ctx.handleInputChange}\n placeholder={placeholder}\n value={ctx.inputValue}\n />\n </PopoverTrigger>\n {iconPosition === \"end\" && iconAddon}\n </FieldInputGroup>\n )\n})\n"],"names":["CalendarIcon","props","jsx","ACCEPT_DIGITS","MASK_FORMAT_DATE","MASK_FORMAT_DATETIME","createMaskFormatter","isDateTime","maxDigits","str","digits","result","di","useStyles","makeZenithStyles","EditableInput","React","ctx","disabled","icon","iconPosition","inputAriaLabel","openPickerAriaLabel","testId","className","ref","styles","value","format","locale","onChange","onBlur","setTempValue","setInputValue","maskFormat","maskParseFormat","displayValue","formatDateTimeDisplay","maskedValue","setMaskedValue","focused","setFocused","inputRef","rifmRefCallback","el","pos","handleRifmChange","val","cursor","parsed","parseDateTimeInput","rifm","useRifm","handleFocus","handleBlur","handlePaste","e","handleKeyDown","selectionStart","selectionEnd","iconAddon","FieldGroupAddon","PopoverTrigger","Button","input","FieldInput","mergeClasses","PopoverAnchor","jsxs","FieldInputGroup","SLOT_ATTR","DateTimePickerInput","editable","placeholder","keyboardIcon","disabledProp","useDateTimePickerContext","IconComponent"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"date-time-picker-input.js","sources":["../../../src/components/date-time-picker/date-time-picker-input.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { useRifm } from \"rifm\"\nimport { mergeClasses } from \"@epilot/zenith-runtime/v1\"\n\nimport { Button } from \"../button/button\"\nimport { FieldGroupAddon, FieldInput, FieldInputGroup } from \"../field/field\"\nimport { PopoverAnchor, PopoverTrigger } from \"../popover/popover\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\n\nimport { useDateTimePickerContext } from \"./date-time-picker-context\"\nimport {\n formatDateTimeDisplay,\n parseDateTimeInput,\n} from \"./date-time-picker-utils\"\n\nconst CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => (\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"18px\"\n viewBox=\"0 -960 960 960\"\n width=\"18px\"\n fill=\"currentColor\"\n {...props}\n >\n <path d=\"M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-160 0q-17 0-28.5-11.5T280-440q0-17 11.5-28.5T320-480q17 0 28.5 11.5T360-440q0 17-11.5 28.5T320-400Zm320 0q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-160 0q-17 0-28.5-11.5T280-280q0-17 11.5-28.5T320-320q17 0 28.5 11.5T360-280q0 17-11.5 28.5T320-240Zm320 0q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z\" />\n </svg>\n)\n\nconst ACCEPT_DIGITS = /\\d/g\n\n// The mask always uses dots and colons regardless of the context format\nconst MASK_FORMAT_DATE = \"dd.MM.yyyy\"\nconst MASK_FORMAT_DATETIME = \"dd.MM.yyyy HH:mm\"\n\nconst createMaskFormatter = (isDateTime: boolean) => {\n const maxDigits = isDateTime ? 12 : 8\n\n return (str: string): string => {\n const digits = str.replace(/\\D/g, \"\").slice(0, maxDigits)\n let result = \"\"\n let di = 0\n\n result += (digits[di++] || \"_\") + (digits[di++] || \"_\")\n result += \".\"\n result += (digits[di++] || \"_\") + (digits[di++] || \"_\")\n result += \".\"\n result +=\n (digits[di++] || \"_\") +\n (digits[di++] || \"_\") +\n (digits[di++] || \"_\") +\n (digits[di++] || \"_\")\n\n if (isDateTime) {\n result += \" \"\n result += (digits[di++] || \"_\") + (digits[di++] || \"_\")\n result += \":\"\n result += (digits[di++] || \"_\") + (digits[di++] || \"_\")\n }\n\n return result\n }\n}\n\ntype DateTimePickerLabelling = {\n inputId: string\n labelId: string\n /** The visible label names the input; false when the caller passed `inputAriaLabel`. */\n namedByLabel: boolean\n}\n\nconst LabelContext = React.createContext<DateTimePickerLabelling | null>(null)\n\n/**\n * Set by `DateTimePicker`, which renders both the visible label and this input, so it can connect\n * them. Not exported from the package: composed usages wire their own label.\n *\n * @no-host-element context provider; renders only its children.\n */\nexport const DateTimePickerLabelProvider = ({\n value,\n children,\n}: {\n value: DateTimePickerLabelling | null\n children: React.ReactNode\n}) => <LabelContext.Provider value={value}>{children}</LabelContext.Provider>\n\n/** `id` and `aria-labelledby` for the input, when a `DateTimePicker` label is connected to it. */\nconst useLabelAttributes = () => {\n const labelling = React.useContext(LabelContext)\n return labelling === null\n ? {}\n : {\n id: labelling.inputId,\n ...(labelling.namedByLabel\n ? { \"aria-labelledby\": labelling.labelId }\n : {}),\n }\n}\n\nexport type DateTimePickerInputProps = {\n editable?: boolean\n iconPosition?: \"start\" | \"end\"\n placeholder?: string\n inputAriaLabel?: string\n openPickerAriaLabel?: string\n keyboardIcon?: React.ReactNode\n testId?: string\n className?: string\n disabled?: boolean\n}\n\nconst useStyles = makeZenithStyles({\n group: {\n ...boxModel,\n width: \"100%\",\n },\n input: {\n textAlign: \"left\",\n },\n inputFlex: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n },\n})\n\n// Editable input with rifm masking — manages its own display value\ntype EditableInputProps = {\n ctx: ReturnType<typeof useDateTimePickerContext>\n disabled: boolean\n icon: React.ReactNode\n iconPosition: \"start\" | \"end\"\n inputAriaLabel: string\n openPickerAriaLabel: string\n testId?: string\n className?: string\n}\n\nconst EditableInput = React.forwardRef<HTMLDivElement, EditableInputProps>(\n function EditableInput(\n {\n ctx,\n disabled,\n icon,\n iconPosition,\n inputAriaLabel,\n openPickerAriaLabel,\n testId,\n className,\n },\n ref\n ) {\n const styles = useStyles()\n const labelAttributes = useLabelAttributes()\n const {\n value,\n format,\n locale,\n onChange,\n onBlur,\n setTempValue,\n setInputValue,\n } = ctx\n\n const isDateTime = format.includes(\"HH:mm\")\n const maskFormat = React.useMemo(\n () => createMaskFormatter(isDateTime),\n [isDateTime]\n )\n const maskParseFormat = isDateTime ? MASK_FORMAT_DATETIME : MASK_FORMAT_DATE\n\n const displayValue = value\n ? formatDateTimeDisplay(value, format, locale)\n : \"\"\n\n const [maskedValue, setMaskedValue] = React.useState(\"\")\n const [focused, setFocused] = React.useState(false)\n const inputRef = React.useRef<HTMLInputElement>(null)\n\n // Callback ref: focus + position cursor when the Rifm input mounts\n const rifmRefCallback = React.useCallback((el: HTMLInputElement | null) => {\n inputRef.current = el\n if (!el) return\n\n el.focus()\n const pos = el.value.indexOf(\"_\")\n\n if (pos !== -1) {\n el.setSelectionRange(pos, pos)\n }\n }, [])\n\n const handleRifmChange = React.useCallback(\n (val: string) => {\n setMaskedValue(val)\n\n // Position cursor at next empty placeholder after Rifm processes\n requestAnimationFrame(() => {\n const el = inputRef.current\n if (!el) return\n\n const pos = el.value.indexOf(\"_\")\n const cursor = pos === -1 ? el.value.length : pos\n\n el.setSelectionRange(cursor, cursor)\n })\n\n const digits = val.replace(/\\D/g, \"\")\n\n if (digits.length === 0) {\n onChange(null)\n setTempValue(null)\n setInputValue(\"\")\n\n return\n }\n\n const parsed = parseDateTimeInput(val, maskParseFormat, locale)\n\n if (parsed) {\n onChange(parsed)\n setTempValue(parsed)\n setInputValue(formatDateTimeDisplay(parsed, format, locale))\n }\n },\n [onChange, setTempValue, setInputValue, maskParseFormat, format, locale]\n )\n\n const rifm = useRifm({\n accept: ACCEPT_DIGITS,\n format: maskFormat,\n mask: true,\n onChange: handleRifmChange,\n value: maskedValue,\n })\n\n const handleFocus = React.useCallback(() => {\n setMaskedValue(maskFormat(displayValue))\n setFocused(true)\n }, [displayValue, maskFormat])\n\n const handleBlur = React.useCallback(() => {\n setFocused(false)\n onBlur?.()\n }, [onBlur])\n\n const handlePaste = React.useCallback(\n (e: React.ClipboardEvent<HTMLInputElement>) => {\n // Always paste a date from the beginning, ignoring caret position.\n e.preventDefault()\n handleRifmChange(maskFormat(e.clipboardData.getData(\"text\")))\n },\n [handleRifmChange, maskFormat]\n )\n\n const handleKeyDown = React.useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n // On Backspace, skip the caret back over mask separators (\".\", \":\", \" \")\n if (e.key !== \"Backspace\") return\n\n const el = e.currentTarget\n const { selectionStart, selectionEnd } = el\n\n if (selectionStart === null || selectionStart !== selectionEnd) return\n\n let pos = selectionStart\n\n while (pos > 0 && !/[\\d_]/.test(el.value[pos - 1])) {\n pos--\n }\n\n if (pos !== selectionStart) {\n el.setSelectionRange(pos, pos)\n }\n },\n []\n )\n\n const iconAddon = (\n <FieldGroupAddon align={iconPosition}>\n <PopoverTrigger asChild>\n <Button\n aria-label={openPickerAriaLabel}\n disabled={disabled}\n size=\"icon-sm\"\n variant=\"tertiary\"\n >\n {icon}\n </Button>\n </PopoverTrigger>\n </FieldGroupAddon>\n )\n\n const input = focused ? (\n <FieldInput\n aria-label={inputAriaLabel}\n {...labelAttributes}\n className={mergeClasses(styles.inputFlex, styles.input)}\n data-testid={testId}\n disabled={disabled}\n onBlur={handleBlur}\n onChange={rifm.onChange}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n onPaste={handlePaste}\n ref={rifmRefCallback}\n value={rifm.value}\n />\n ) : (\n <FieldInput\n aria-label={inputAriaLabel}\n {...labelAttributes}\n className={mergeClasses(styles.inputFlex, styles.input)}\n data-testid={testId}\n disabled={disabled}\n onFocus={handleFocus}\n readOnly\n value={displayValue}\n />\n )\n\n return (\n <PopoverAnchor asChild>\n <FieldInputGroup\n className={mergeClasses(styles.group, className)}\n data-slot=\"datetimepicker-input\"\n {...{ [SLOT_ATTR]: \"datetimepicker-input\" }}\n ref={ref}\n >\n {iconPosition === \"start\" && iconAddon}\n {input}\n {iconPosition === \"end\" && iconAddon}\n </FieldInputGroup>\n </PopoverAnchor>\n )\n }\n)\n\nexport const DateTimePickerInput = React.forwardRef<\n HTMLDivElement,\n DateTimePickerInputProps\n>(function DateTimePickerInput(\n {\n editable = false,\n iconPosition = \"end\",\n placeholder = \"dd/MM/yyyy HH:mm\",\n inputAriaLabel = \"change date and time\",\n openPickerAriaLabel = \"Open date picker\",\n keyboardIcon,\n testId,\n className,\n disabled: disabledProp,\n },\n ref\n) {\n const styles = useStyles()\n const labelAttributes = useLabelAttributes()\n const ctx = useDateTimePickerContext()\n const disabled = disabledProp ?? ctx.disabled\n\n const IconComponent = keyboardIcon || <CalendarIcon />\n\n if (editable) {\n return (\n <EditableInput\n className={className}\n ctx={ctx}\n disabled={disabled}\n icon={IconComponent}\n iconPosition={iconPosition}\n inputAriaLabel={inputAriaLabel}\n openPickerAriaLabel={openPickerAriaLabel}\n ref={ref}\n testId={testId}\n />\n )\n }\n\n const iconAddon = (\n <FieldGroupAddon align={iconPosition}>\n <Button\n aria-label={openPickerAriaLabel}\n disabled={disabled}\n onClick={() => ctx.setIsOpen(true)}\n size=\"icon-sm\"\n variant=\"tertiary\"\n >\n {IconComponent}\n </Button>\n </FieldGroupAddon>\n )\n\n return (\n <FieldInputGroup\n className={mergeClasses(styles.group, className)}\n data-slot=\"datetimepicker-input\"\n {...{ [SLOT_ATTR]: \"datetimepicker-input\" }}\n ref={ref}\n >\n {iconPosition === \"start\" && iconAddon}\n <PopoverTrigger asChild>\n <FieldInput\n aria-label={inputAriaLabel}\n {...labelAttributes}\n className={mergeClasses(styles.inputFlex, styles.input)}\n data-testid={testId}\n disabled={disabled}\n onBlur={ctx.handleInputBlur}\n onChange={ctx.handleInputChange}\n placeholder={placeholder}\n value={ctx.inputValue}\n />\n </PopoverTrigger>\n {iconPosition === \"end\" && iconAddon}\n </FieldInputGroup>\n )\n})\n"],"names":["CalendarIcon","props","jsx","ACCEPT_DIGITS","MASK_FORMAT_DATE","MASK_FORMAT_DATETIME","createMaskFormatter","isDateTime","maxDigits","str","digits","result","di","LabelContext","React","DateTimePickerLabelProvider","value","children","useLabelAttributes","labelling","useStyles","makeZenithStyles","boxModel","EditableInput","ctx","disabled","icon","iconPosition","inputAriaLabel","openPickerAriaLabel","testId","className","ref","styles","labelAttributes","format","locale","onChange","onBlur","setTempValue","setInputValue","maskFormat","maskParseFormat","displayValue","formatDateTimeDisplay","maskedValue","setMaskedValue","focused","setFocused","inputRef","rifmRefCallback","el","pos","handleRifmChange","val","cursor","parsed","parseDateTimeInput","rifm","useRifm","handleFocus","handleBlur","handlePaste","e","handleKeyDown","selectionStart","selectionEnd","iconAddon","FieldGroupAddon","PopoverTrigger","Button","input","FieldInput","mergeClasses","PopoverAnchor","jsxs","FieldInputGroup","SLOT_ATTR","DateTimePickerInput","editable","placeholder","keyboardIcon","disabledProp","useDateTimePickerContext","IconComponent"],"mappings":"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"}
|
|
@@ -1,50 +1,56 @@
|
|
|
1
|
-
import { jsx as t, jsxs as
|
|
1
|
+
import { jsx as t, jsxs as C, Fragment as j } from "react/jsx-runtime";
|
|
2
2
|
import * as m from "react";
|
|
3
|
-
import { SLOT_ATTR as r, mergeClasses as
|
|
4
|
-
import { Button as
|
|
5
|
-
import { PopoverPortal as
|
|
6
|
-
import { makeZenithStyles as
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
|
|
3
|
+
import { SLOT_ATTR as r, mergeClasses as Y, shorthands as f } from "@epilot/zenith-runtime/v1";
|
|
4
|
+
import { Button as G } from "../button/button.js";
|
|
5
|
+
import { PopoverPortal as oe, PopoverContent as ne } from "../popover/popover.js";
|
|
6
|
+
import { makeZenithStyles as re } from "../../styles/make-styles.js";
|
|
7
|
+
import { boxModel as p } from "../../styles/host-reset.js";
|
|
8
|
+
import { spacingElement2 as ae, spacingGroup1 as I, spacingElement3 as se, spacingGroup2 as de } from "../../tokens/index.js";
|
|
9
|
+
import { Calendar as M } from "./calendar.js";
|
|
10
|
+
import { TimePicker as X } from "./time-picker.js";
|
|
11
|
+
import { useDateTimePickerContext as ce } from "./date-time-picker-context.js";
|
|
12
|
+
const le = re({
|
|
12
13
|
content: {
|
|
13
14
|
overflowX: "hidden",
|
|
14
15
|
overflowY: "hidden"
|
|
15
16
|
},
|
|
16
17
|
contentNarrow: {
|
|
18
|
+
...p,
|
|
17
19
|
width: "300px"
|
|
18
20
|
},
|
|
19
21
|
panelContent: {
|
|
22
|
+
...p,
|
|
20
23
|
display: "flex",
|
|
21
24
|
flexDirection: "column",
|
|
22
|
-
...f.gap(
|
|
23
|
-
...f.padding(
|
|
25
|
+
...f.gap(de),
|
|
26
|
+
...f.padding(se)
|
|
24
27
|
},
|
|
25
28
|
body: {
|
|
26
29
|
display: "flex"
|
|
27
30
|
},
|
|
28
31
|
bodyBottom: {
|
|
29
32
|
flexDirection: "column",
|
|
30
|
-
...f.gap(
|
|
33
|
+
...f.gap(I)
|
|
31
34
|
},
|
|
32
35
|
bodySide: {
|
|
33
36
|
flexDirection: "row",
|
|
34
|
-
...f.gap(
|
|
37
|
+
...f.gap(I),
|
|
35
38
|
position: "relative"
|
|
36
39
|
},
|
|
37
40
|
dateSection: {
|
|
41
|
+
...p,
|
|
38
42
|
flexGrow: 1,
|
|
39
43
|
flexShrink: 1,
|
|
40
44
|
flexBasis: "0%",
|
|
41
45
|
minWidth: "0"
|
|
42
46
|
},
|
|
43
47
|
timeSpacer: {
|
|
48
|
+
...p,
|
|
44
49
|
width: "9rem",
|
|
45
50
|
flexShrink: 0
|
|
46
51
|
},
|
|
47
52
|
timeSection: {
|
|
53
|
+
...p,
|
|
48
54
|
position: "absolute",
|
|
49
55
|
top: 0,
|
|
50
56
|
bottom: 0,
|
|
@@ -58,160 +64,160 @@ const ce = ne({
|
|
|
58
64
|
footer: {
|
|
59
65
|
display: "flex",
|
|
60
66
|
justifyContent: "flex-end",
|
|
61
|
-
...f.gap(
|
|
67
|
+
...f.gap(ae)
|
|
62
68
|
}
|
|
63
|
-
}),
|
|
64
|
-
showTimePicker:
|
|
65
|
-
timePickerPosition:
|
|
66
|
-
okLabel:
|
|
67
|
-
cancelLabel:
|
|
68
|
-
previousMonthLabel:
|
|
69
|
-
nextMonthLabel:
|
|
70
|
-
hoursLabel:
|
|
71
|
-
minutesLabel:
|
|
72
|
-
showTodayButton:
|
|
73
|
-
todayLabel:
|
|
74
|
-
showWeekNumbers:
|
|
75
|
-
className:
|
|
76
|
-
minuteStep:
|
|
77
|
-
},
|
|
78
|
-
const i =
|
|
79
|
-
tempValue:
|
|
80
|
-
isOpen:
|
|
81
|
-
locale:
|
|
82
|
-
disablePast:
|
|
83
|
-
currentTimeInTimezone:
|
|
84
|
-
handleDateChange:
|
|
85
|
-
confirm:
|
|
86
|
-
cancel:
|
|
87
|
-
} =
|
|
69
|
+
}), Ce = m.forwardRef(function({
|
|
70
|
+
showTimePicker: S = !0,
|
|
71
|
+
timePickerPosition: b = "bottom",
|
|
72
|
+
okLabel: V = "Apply",
|
|
73
|
+
cancelLabel: Z = "Cancel",
|
|
74
|
+
previousMonthLabel: A = "Previous month",
|
|
75
|
+
nextMonthLabel: D = "Next month",
|
|
76
|
+
hoursLabel: N,
|
|
77
|
+
minutesLabel: F,
|
|
78
|
+
showTodayButton: T = !1,
|
|
79
|
+
todayLabel: O = "Today",
|
|
80
|
+
showWeekNumbers: P = !1,
|
|
81
|
+
className: _,
|
|
82
|
+
minuteStep: q = 1
|
|
83
|
+
}, J) {
|
|
84
|
+
const i = le(), {
|
|
85
|
+
tempValue: h,
|
|
86
|
+
isOpen: H,
|
|
87
|
+
locale: L,
|
|
88
|
+
disablePast: u,
|
|
89
|
+
currentTimeInTimezone: y,
|
|
90
|
+
handleDateChange: w,
|
|
91
|
+
confirm: K,
|
|
92
|
+
cancel: Q
|
|
93
|
+
} = ce(), [U, ee] = m.useState(!0);
|
|
88
94
|
m.useEffect(() => {
|
|
89
|
-
if (
|
|
90
|
-
const a = () =>
|
|
95
|
+
if (b !== "side") return;
|
|
96
|
+
const a = () => ee(window.innerWidth >= 480);
|
|
91
97
|
return a(), window.addEventListener("resize", a), () => window.removeEventListener("resize", a);
|
|
92
|
-
}, [
|
|
93
|
-
const
|
|
98
|
+
}, [b]);
|
|
99
|
+
const g = m.useRef(null);
|
|
94
100
|
m.useLayoutEffect(() => {
|
|
95
|
-
if (!
|
|
101
|
+
if (!H) return;
|
|
96
102
|
const a = () => {
|
|
97
|
-
const e =
|
|
103
|
+
const e = g.current;
|
|
98
104
|
if (!e) return;
|
|
99
105
|
e.dataset.widthLocked || (e.style.width = `${e.offsetWidth}px`, e.dataset.widthLocked = "true");
|
|
100
|
-
const
|
|
106
|
+
const k = e.closest(
|
|
101
107
|
"[data-radix-popper-content-wrapper]"
|
|
102
108
|
);
|
|
103
|
-
if (!
|
|
109
|
+
if (!k) return;
|
|
104
110
|
const s = e.querySelector(
|
|
105
111
|
`[${r}="datetimepicker-body"]`
|
|
106
112
|
);
|
|
107
113
|
s && (s.style.maxHeight = "", s.style.overflowY = "");
|
|
108
|
-
const o =
|
|
109
|
-
let
|
|
114
|
+
const o = k.getBoundingClientRect(), E = window.innerHeight, B = window.innerWidth, n = 8, W = E - 2 * n;
|
|
115
|
+
let z = { m41: 0, m42: 0 };
|
|
110
116
|
try {
|
|
111
|
-
const c = getComputedStyle(
|
|
112
|
-
typeof DOMMatrixReadOnly < "u" && c && c !== "none" && (
|
|
117
|
+
const c = getComputedStyle(k).transform;
|
|
118
|
+
typeof DOMMatrixReadOnly < "u" && c && c !== "none" && (z = new DOMMatrixReadOnly(c));
|
|
113
119
|
} catch {
|
|
114
120
|
}
|
|
115
121
|
let d = 0, l = 0;
|
|
116
|
-
if (o.height >
|
|
122
|
+
if (o.height > W) {
|
|
117
123
|
if (s) {
|
|
118
124
|
const c = e.querySelector(
|
|
119
125
|
`[${r}="datetimepicker-footer"]`
|
|
120
|
-
),
|
|
121
|
-
s.style.maxHeight = `${
|
|
126
|
+
), ie = c ? c.getBoundingClientRect().height : 0;
|
|
127
|
+
s.style.maxHeight = `${W - ie}px`, s.style.overflowY = "auto";
|
|
122
128
|
}
|
|
123
129
|
d = n - o.top;
|
|
124
130
|
} else
|
|
125
|
-
o.bottom >
|
|
126
|
-
o.right >
|
|
127
|
-
},
|
|
131
|
+
o.bottom > E - n && (d = E - n - o.bottom), o.top + d < n && (d = n - o.top);
|
|
132
|
+
o.right > B - n && (l = B - n - o.right), o.left + l < n && (l = n - o.left), (l !== 0 || d !== 0) && (k.style.transform = `translate(${z.m41 + l}px, ${z.m42 + d}px)`);
|
|
133
|
+
}, te = requestAnimationFrame(() => {
|
|
128
134
|
requestAnimationFrame(a);
|
|
129
135
|
});
|
|
130
136
|
let v = 0;
|
|
131
|
-
const
|
|
132
|
-
const e =
|
|
137
|
+
const $ = () => {
|
|
138
|
+
const e = g.current;
|
|
133
139
|
e && (e.style.width = "", delete e.dataset.widthLocked), cancelAnimationFrame(v), v = requestAnimationFrame(() => {
|
|
134
140
|
v = requestAnimationFrame(a);
|
|
135
141
|
});
|
|
136
142
|
};
|
|
137
|
-
window.addEventListener("resize",
|
|
138
|
-
const
|
|
143
|
+
window.addEventListener("resize", $);
|
|
144
|
+
const R = g.current;
|
|
139
145
|
return () => {
|
|
140
|
-
cancelAnimationFrame(
|
|
146
|
+
cancelAnimationFrame(te), cancelAnimationFrame(v), window.removeEventListener("resize", $), R && (R.style.width = "", delete R.dataset.widthLocked);
|
|
141
147
|
};
|
|
142
|
-
}, [
|
|
143
|
-
const
|
|
144
|
-
return /* @__PURE__ */ t(
|
|
145
|
-
|
|
148
|
+
}, [H]);
|
|
149
|
+
const x = S && b === "side" && U;
|
|
150
|
+
return /* @__PURE__ */ t(oe, { children: /* @__PURE__ */ t(
|
|
151
|
+
ne,
|
|
146
152
|
{
|
|
147
153
|
align: "start",
|
|
148
|
-
className:
|
|
154
|
+
className: Y(
|
|
149
155
|
i.content,
|
|
150
|
-
!
|
|
151
|
-
|
|
156
|
+
!x && i.contentNarrow,
|
|
157
|
+
_
|
|
152
158
|
),
|
|
153
159
|
collisionPadding: 8,
|
|
154
160
|
flush: !0,
|
|
155
|
-
ref:
|
|
161
|
+
ref: J,
|
|
156
162
|
side: "bottom",
|
|
157
163
|
sideOffset: 4,
|
|
158
164
|
sticky: "always",
|
|
159
|
-
children: /* @__PURE__ */
|
|
165
|
+
children: /* @__PURE__ */ C(
|
|
160
166
|
"div",
|
|
161
167
|
{
|
|
162
168
|
className: i.panelContent,
|
|
163
169
|
"data-slot": "datetimepicker-content",
|
|
164
170
|
[r]: "datetimepicker-content",
|
|
165
|
-
ref:
|
|
171
|
+
ref: g,
|
|
166
172
|
children: [
|
|
167
|
-
/* @__PURE__ */
|
|
173
|
+
/* @__PURE__ */ C(
|
|
168
174
|
"div",
|
|
169
175
|
{
|
|
170
|
-
className:
|
|
176
|
+
className: Y(
|
|
171
177
|
i.body,
|
|
172
|
-
|
|
178
|
+
x ? i.bodySide : i.bodyBottom
|
|
173
179
|
),
|
|
174
180
|
"data-slot": "datetimepicker-body",
|
|
175
181
|
[r]: "datetimepicker-body",
|
|
176
182
|
children: [
|
|
177
|
-
|
|
183
|
+
x && S ? /* @__PURE__ */ t(
|
|
178
184
|
"div",
|
|
179
185
|
{
|
|
180
186
|
className: i.dateSection,
|
|
181
187
|
"data-slot": "datetimepicker-date-section",
|
|
182
188
|
[r]: "datetimepicker-date-section",
|
|
183
189
|
children: /* @__PURE__ */ t(
|
|
184
|
-
|
|
190
|
+
M,
|
|
185
191
|
{
|
|
186
|
-
currentTimeInTimezone:
|
|
187
|
-
disablePast:
|
|
188
|
-
locale:
|
|
189
|
-
nextMonthLabel:
|
|
190
|
-
onChange:
|
|
191
|
-
previousMonthLabel:
|
|
192
|
-
showTodayButton:
|
|
193
|
-
showWeekNumbers:
|
|
194
|
-
todayLabel:
|
|
195
|
-
value:
|
|
192
|
+
currentTimeInTimezone: y,
|
|
193
|
+
disablePast: u,
|
|
194
|
+
locale: L,
|
|
195
|
+
nextMonthLabel: D,
|
|
196
|
+
onChange: w,
|
|
197
|
+
previousMonthLabel: A,
|
|
198
|
+
showTodayButton: T,
|
|
199
|
+
showWeekNumbers: P,
|
|
200
|
+
todayLabel: O,
|
|
201
|
+
value: h
|
|
196
202
|
}
|
|
197
203
|
)
|
|
198
204
|
}
|
|
199
205
|
) : /* @__PURE__ */ t(
|
|
200
|
-
|
|
206
|
+
M,
|
|
201
207
|
{
|
|
202
|
-
currentTimeInTimezone:
|
|
203
|
-
disablePast:
|
|
204
|
-
locale:
|
|
205
|
-
nextMonthLabel:
|
|
206
|
-
onChange:
|
|
207
|
-
previousMonthLabel:
|
|
208
|
-
showTodayButton:
|
|
209
|
-
showWeekNumbers:
|
|
210
|
-
todayLabel:
|
|
211
|
-
value:
|
|
208
|
+
currentTimeInTimezone: y,
|
|
209
|
+
disablePast: u,
|
|
210
|
+
locale: L,
|
|
211
|
+
nextMonthLabel: D,
|
|
212
|
+
onChange: w,
|
|
213
|
+
previousMonthLabel: A,
|
|
214
|
+
showTodayButton: T,
|
|
215
|
+
showWeekNumbers: P,
|
|
216
|
+
todayLabel: O,
|
|
217
|
+
value: h
|
|
212
218
|
}
|
|
213
219
|
),
|
|
214
|
-
|
|
220
|
+
S && /* @__PURE__ */ t(j, { children: x ? /* @__PURE__ */ C(j, { children: [
|
|
215
221
|
/* @__PURE__ */ t(
|
|
216
222
|
"div",
|
|
217
223
|
{
|
|
@@ -227,44 +233,44 @@ const ce = ne({
|
|
|
227
233
|
"data-slot": "datetimepicker-time-section",
|
|
228
234
|
[r]: "datetimepicker-time-section",
|
|
229
235
|
children: /* @__PURE__ */ t(
|
|
230
|
-
|
|
236
|
+
X,
|
|
231
237
|
{
|
|
232
|
-
currentTimeInTimezone:
|
|
233
|
-
disablePast:
|
|
238
|
+
currentTimeInTimezone: y,
|
|
239
|
+
disablePast: u,
|
|
234
240
|
fillHeight: !0,
|
|
235
|
-
hoursLabel:
|
|
236
|
-
minuteStep:
|
|
237
|
-
minutesLabel:
|
|
238
|
-
onChange:
|
|
239
|
-
value:
|
|
241
|
+
hoursLabel: N,
|
|
242
|
+
minuteStep: q,
|
|
243
|
+
minutesLabel: F,
|
|
244
|
+
onChange: w,
|
|
245
|
+
value: h
|
|
240
246
|
}
|
|
241
247
|
)
|
|
242
248
|
}
|
|
243
249
|
)
|
|
244
250
|
] }) : /* @__PURE__ */ t(
|
|
245
|
-
|
|
251
|
+
X,
|
|
246
252
|
{
|
|
247
|
-
currentTimeInTimezone:
|
|
248
|
-
disablePast:
|
|
249
|
-
hoursLabel:
|
|
250
|
-
minuteStep:
|
|
251
|
-
minutesLabel:
|
|
252
|
-
onChange:
|
|
253
|
-
value:
|
|
253
|
+
currentTimeInTimezone: y,
|
|
254
|
+
disablePast: u,
|
|
255
|
+
hoursLabel: N,
|
|
256
|
+
minuteStep: q,
|
|
257
|
+
minutesLabel: F,
|
|
258
|
+
onChange: w,
|
|
259
|
+
value: h
|
|
254
260
|
}
|
|
255
261
|
) })
|
|
256
262
|
]
|
|
257
263
|
}
|
|
258
264
|
),
|
|
259
|
-
/* @__PURE__ */
|
|
265
|
+
/* @__PURE__ */ C(
|
|
260
266
|
"div",
|
|
261
267
|
{
|
|
262
268
|
className: i.footer,
|
|
263
269
|
"data-slot": "datetimepicker-footer",
|
|
264
270
|
[r]: "datetimepicker-footer",
|
|
265
271
|
children: [
|
|
266
|
-
/* @__PURE__ */ t(
|
|
267
|
-
/* @__PURE__ */ t(
|
|
272
|
+
/* @__PURE__ */ t(G, { onClick: Q, size: "sm", variant: "secondary", children: Z }),
|
|
273
|
+
/* @__PURE__ */ t(G, { onClick: K, size: "sm", variant: "primary", children: V })
|
|
268
274
|
]
|
|
269
275
|
}
|
|
270
276
|
)
|
|
@@ -275,6 +281,6 @@ const ce = ne({
|
|
|
275
281
|
) });
|
|
276
282
|
});
|
|
277
283
|
export {
|
|
278
|
-
|
|
284
|
+
Ce as DateTimePickerPanel
|
|
279
285
|
};
|
|
280
286
|
//# sourceMappingURL=date-time-picker-panel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"date-time-picker-panel.js","sources":["../../../src/components/date-time-picker/date-time-picker-panel.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { Button } from \"../button/button\"\nimport { PopoverContent, PopoverPortal } from \"../popover/popover\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport * as tokens from \"../../tokens\"\n\nimport { Calendar } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport { useDateTimePickerContext } from \"./date-time-picker-context\"\n\nexport type DateTimePickerPanelProps = {\n showTimePicker?: boolean\n timePickerPosition?: \"bottom\" | \"side\"\n okLabel?: string\n cancelLabel?: string\n previousMonthLabel?: string\n nextMonthLabel?: string\n hoursLabel?: string\n minutesLabel?: string\n showTodayButton?: boolean\n todayLabel?: string\n showWeekNumbers?: boolean\n className?: string\n minuteStep?: number\n}\n\nconst useStyles = makeZenithStyles({\n content: {\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n },\n contentNarrow: {\n width: \"300px\",\n },\n panelContent: {\n display: \"flex\",\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingGroup2),\n ...shorthands.padding(tokens.spacingElement3),\n },\n body: {\n display: \"flex\",\n },\n bodyBottom: {\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingGroup1),\n },\n bodySide: {\n flexDirection: \"row\",\n ...shorthands.gap(tokens.spacingGroup1),\n position: \"relative\",\n },\n dateSection: {\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n minWidth: \"0\",\n },\n timeSpacer: {\n width: \"9rem\",\n flexShrink: 0,\n },\n timeSection: {\n position: \"absolute\",\n top: 0,\n bottom: 0,\n right: 0,\n width: \"9rem\",\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n display: \"flex\",\n alignItems: \"stretch\",\n },\n footer: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n ...shorthands.gap(tokens.spacingElement2),\n },\n})\n\nexport const DateTimePickerPanel = React.forwardRef<\n HTMLDivElement,\n DateTimePickerPanelProps\n>(function DateTimePickerPanel(\n {\n showTimePicker = true,\n timePickerPosition = \"bottom\",\n okLabel = \"Apply\",\n cancelLabel = \"Cancel\",\n previousMonthLabel = \"Previous month\",\n nextMonthLabel = \"Next month\",\n hoursLabel,\n minutesLabel,\n showTodayButton = false,\n todayLabel = \"Today\",\n showWeekNumbers = false,\n className,\n minuteStep = 1,\n },\n ref\n) {\n const styles = useStyles()\n const {\n tempValue,\n isOpen,\n locale,\n disablePast,\n currentTimeInTimezone,\n handleDateChange,\n confirm,\n cancel,\n } = useDateTimePickerContext()\n\n // Responsive: fall back to bottom layout on narrow viewports.\n const [isWideEnough, setIsWideEnough] = React.useState(true)\n\n React.useEffect(() => {\n if (timePickerPosition !== \"side\") return\n\n const update = () => setIsWideEnough(window.innerWidth >= 480)\n\n update()\n window.addEventListener(\"resize\", update)\n\n return () => window.removeEventListener(\"resize\", update)\n }, [timePickerPosition])\n\n // Fix viewport overflow: Floating UI's shift middleware may not work in all\n // environments (e.g. microfrontend hosts). Manually detect overflow and\n // adjust the popper wrapper's transform to keep the popover within viewport.\n const contentRef = React.useRef<HTMLDivElement>(null)\n\n React.useLayoutEffect(() => {\n if (!isOpen) return\n\n const adjustPosition = () => {\n const el = contentRef.current\n if (!el) return\n\n // Lock popover width on first open to prevent resizing on calendar view changes\n if (!el.dataset.widthLocked) {\n el.style.width = `${el.offsetWidth}px`\n el.dataset.widthLocked = \"true\"\n }\n\n const wrapper = el.closest(\n \"[data-radix-popper-content-wrapper]\"\n ) as HTMLElement | null\n if (!wrapper) return\n\n // Reset previous constraints so we measure natural size\n const body = el.querySelector(\n `[${SLOT_ATTR}=\"datetimepicker-body\"]`\n ) as HTMLElement | null\n if (body) {\n body.style.maxHeight = \"\"\n body.style.overflowY = \"\"\n }\n\n const rect = wrapper.getBoundingClientRect()\n const vh = window.innerHeight\n const vw = window.innerWidth\n const pad = 8\n const maxH = vh - 2 * pad\n\n let matrix = { m41: 0, m42: 0 }\n try {\n const computedTransform = getComputedStyle(wrapper).transform\n if (\n typeof DOMMatrixReadOnly !== \"undefined\" &&\n computedTransform &&\n computedTransform !== \"none\"\n ) {\n matrix = new DOMMatrixReadOnly(computedTransform)\n }\n } catch {\n // Fallback if transform cannot be parsed\n }\n let dy = 0\n let dx = 0\n\n if (rect.height > maxH) {\n // Popover is taller than viewport — constrain the body area\n // (keep footer visible) and pin to top padding\n if (body) {\n const footer = el.querySelector(\n `[${SLOT_ATTR}=\"datetimepicker-footer\"]`\n ) as HTMLElement | null\n const footerH = footer ? footer.getBoundingClientRect().height : 0\n body.style.maxHeight = `${maxH - footerH}px`\n body.style.overflowY = \"auto\"\n }\n dy = pad - rect.top\n } else {\n // Fits in viewport — just shift to stay within bounds\n if (rect.bottom > vh - pad) {\n dy = vh - pad - rect.bottom\n }\n if (rect.top + dy < pad) {\n dy = pad - rect.top\n }\n }\n\n // Keep the popover on-screen horizontally\n if (rect.right > vw - pad) {\n dx = vw - pad - rect.right\n }\n if (rect.left + dx < pad) {\n dx = pad - rect.left\n }\n\n if (dx !== 0 || dy !== 0) {\n wrapper.style.transform = `translate(${matrix.m41 + dx}px, ${matrix.m42 + dy}px)`\n }\n }\n\n // Wait for Floating UI to finish positioning\n const raf = requestAnimationFrame(() => {\n requestAnimationFrame(adjustPosition)\n })\n\n let resizeRaf = 0\n const onResize = () => {\n const el = contentRef.current\n if (el) {\n el.style.width = \"\"\n delete el.dataset.widthLocked\n }\n cancelAnimationFrame(resizeRaf)\n resizeRaf = requestAnimationFrame(() => {\n resizeRaf = requestAnimationFrame(adjustPosition)\n })\n }\n window.addEventListener(\"resize\", onResize)\n\n const el = contentRef.current\n\n return () => {\n cancelAnimationFrame(raf)\n cancelAnimationFrame(resizeRaf)\n window.removeEventListener(\"resize\", onResize)\n // Reset locked width on close so next open re-measures\n if (el) {\n el.style.width = \"\"\n delete el.dataset.widthLocked\n }\n }\n }, [isOpen])\n\n const isSideLayout =\n showTimePicker && timePickerPosition === \"side\" && isWideEnough\n\n return (\n <PopoverPortal>\n <PopoverContent\n align=\"start\"\n className={mergeClasses(\n styles.content,\n !isSideLayout && styles.contentNarrow,\n className\n )}\n collisionPadding={8}\n flush\n ref={ref}\n side=\"bottom\"\n sideOffset={4}\n sticky=\"always\"\n >\n <div\n className={styles.panelContent}\n data-slot=\"datetimepicker-content\"\n {...{ [SLOT_ATTR]: \"datetimepicker-content\" }}\n ref={contentRef}\n >\n <div\n className={mergeClasses(\n styles.body,\n isSideLayout ? styles.bodySide : styles.bodyBottom\n )}\n data-slot=\"datetimepicker-body\"\n {...{ [SLOT_ATTR]: \"datetimepicker-body\" }}\n >\n {isSideLayout && showTimePicker ? (\n <div\n className={styles.dateSection}\n data-slot=\"datetimepicker-date-section\"\n {...{ [SLOT_ATTR]: \"datetimepicker-date-section\" }}\n >\n <Calendar\n currentTimeInTimezone={currentTimeInTimezone}\n disablePast={disablePast}\n locale={locale}\n nextMonthLabel={nextMonthLabel}\n onChange={handleDateChange}\n previousMonthLabel={previousMonthLabel}\n showTodayButton={showTodayButton}\n showWeekNumbers={showWeekNumbers}\n todayLabel={todayLabel}\n value={tempValue}\n />\n </div>\n ) : (\n <Calendar\n currentTimeInTimezone={currentTimeInTimezone}\n disablePast={disablePast}\n locale={locale}\n nextMonthLabel={nextMonthLabel}\n onChange={handleDateChange}\n previousMonthLabel={previousMonthLabel}\n showTodayButton={showTodayButton}\n showWeekNumbers={showWeekNumbers}\n todayLabel={todayLabel}\n value={tempValue}\n />\n )}\n {showTimePicker && (\n <>\n {isSideLayout ? (\n <>\n <div\n className={styles.timeSpacer}\n data-slot=\"datetimepicker-time-spacer\"\n {...{ [SLOT_ATTR]: \"datetimepicker-time-spacer\" }}\n />\n <div\n className={styles.timeSection}\n data-slot=\"datetimepicker-time-section\"\n {...{ [SLOT_ATTR]: \"datetimepicker-time-section\" }}\n >\n <TimePicker\n currentTimeInTimezone={currentTimeInTimezone}\n disablePast={disablePast}\n fillHeight\n hoursLabel={hoursLabel}\n minuteStep={minuteStep}\n minutesLabel={minutesLabel}\n onChange={handleDateChange}\n value={tempValue}\n />\n </div>\n </>\n ) : (\n <TimePicker\n currentTimeInTimezone={currentTimeInTimezone}\n disablePast={disablePast}\n hoursLabel={hoursLabel}\n minuteStep={minuteStep}\n minutesLabel={minutesLabel}\n onChange={handleDateChange}\n value={tempValue}\n />\n )}\n </>\n )}\n </div>\n <div\n className={styles.footer}\n data-slot=\"datetimepicker-footer\"\n {...{ [SLOT_ATTR]: \"datetimepicker-footer\" }}\n >\n <Button onClick={cancel} size=\"sm\" variant=\"secondary\">\n {cancelLabel}\n </Button>\n <Button onClick={confirm} size=\"sm\" variant=\"primary\">\n {okLabel}\n </Button>\n </div>\n </div>\n </PopoverContent>\n </PopoverPortal>\n )\n})\n"],"names":["useStyles","makeZenithStyles","shorthands","tokens.spacingGroup2","tokens.spacingElement3","tokens.spacingGroup1","tokens.spacingElement2","DateTimePickerPanel","React","showTimePicker","timePickerPosition","okLabel","cancelLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","className","minuteStep","ref","styles","tempValue","isOpen","locale","disablePast","currentTimeInTimezone","handleDateChange","confirm","cancel","useDateTimePickerContext","isWideEnough","setIsWideEnough","update","contentRef","adjustPosition","el","wrapper","body","SLOT_ATTR","rect","vh","vw","pad","maxH","matrix","computedTransform","dy","dx","footer","footerH","raf","resizeRaf","onResize","isSideLayout","PopoverPortal","jsx","PopoverContent","mergeClasses","jsxs","Calendar","Fragment","TimePicker","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"date-time-picker-panel.js","sources":["../../../src/components/date-time-picker/date-time-picker-panel.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { mergeClasses, shorthands } from \"@epilot/zenith-runtime/v1\"\n\nimport { Button } from \"../button/button\"\nimport { PopoverContent, PopoverPortal } from \"../popover/popover\"\nimport { SLOT_ATTR } from \"../../renderer/contract\"\nimport { makeZenithStyles } from \"../../styles/make-styles\"\nimport { boxModel } from \"../../styles/host-reset\"\nimport * as tokens from \"../../tokens\"\n\nimport { Calendar } from \"./calendar\"\nimport { TimePicker } from \"./time-picker\"\nimport { useDateTimePickerContext } from \"./date-time-picker-context\"\n\nexport type DateTimePickerPanelProps = {\n showTimePicker?: boolean\n timePickerPosition?: \"bottom\" | \"side\"\n okLabel?: string\n cancelLabel?: string\n previousMonthLabel?: string\n nextMonthLabel?: string\n hoursLabel?: string\n minutesLabel?: string\n showTodayButton?: boolean\n todayLabel?: string\n showWeekNumbers?: boolean\n className?: string\n minuteStep?: number\n}\n\nconst useStyles = makeZenithStyles({\n content: {\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n },\n contentNarrow: {\n ...boxModel,\n width: \"300px\",\n },\n panelContent: {\n ...boxModel,\n display: \"flex\",\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingGroup2),\n ...shorthands.padding(tokens.spacingElement3),\n },\n body: {\n display: \"flex\",\n },\n bodyBottom: {\n flexDirection: \"column\",\n ...shorthands.gap(tokens.spacingGroup1),\n },\n bodySide: {\n flexDirection: \"row\",\n ...shorthands.gap(tokens.spacingGroup1),\n position: \"relative\",\n },\n dateSection: {\n ...boxModel,\n flexGrow: 1,\n flexShrink: 1,\n flexBasis: \"0%\",\n minWidth: \"0\",\n },\n timeSpacer: {\n ...boxModel,\n width: \"9rem\",\n flexShrink: 0,\n },\n timeSection: {\n ...boxModel,\n position: \"absolute\",\n top: 0,\n bottom: 0,\n right: 0,\n width: \"9rem\",\n overflowX: \"hidden\",\n overflowY: \"hidden\",\n display: \"flex\",\n alignItems: \"stretch\",\n },\n footer: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n ...shorthands.gap(tokens.spacingElement2),\n },\n})\n\nexport const DateTimePickerPanel = React.forwardRef<\n HTMLDivElement,\n DateTimePickerPanelProps\n>(function DateTimePickerPanel(\n {\n showTimePicker = true,\n timePickerPosition = \"bottom\",\n okLabel = \"Apply\",\n cancelLabel = \"Cancel\",\n previousMonthLabel = \"Previous month\",\n nextMonthLabel = \"Next month\",\n hoursLabel,\n minutesLabel,\n showTodayButton = false,\n todayLabel = \"Today\",\n showWeekNumbers = false,\n className,\n minuteStep = 1,\n },\n ref\n) {\n const styles = useStyles()\n const {\n tempValue,\n isOpen,\n locale,\n disablePast,\n currentTimeInTimezone,\n handleDateChange,\n confirm,\n cancel,\n } = useDateTimePickerContext()\n\n // Responsive: fall back to bottom layout on narrow viewports.\n const [isWideEnough, setIsWideEnough] = React.useState(true)\n\n React.useEffect(() => {\n if (timePickerPosition !== \"side\") return\n\n const update = () => setIsWideEnough(window.innerWidth >= 480)\n\n update()\n window.addEventListener(\"resize\", update)\n\n return () => window.removeEventListener(\"resize\", update)\n }, [timePickerPosition])\n\n // Fix viewport overflow: Floating UI's shift middleware may not work in all\n // environments (e.g. microfrontend hosts). Manually detect overflow and\n // adjust the popper wrapper's transform to keep the popover within viewport.\n const contentRef = React.useRef<HTMLDivElement>(null)\n\n React.useLayoutEffect(() => {\n if (!isOpen) return\n\n const adjustPosition = () => {\n const el = contentRef.current\n if (!el) return\n\n // Lock popover width on first open to prevent resizing on calendar view changes\n if (!el.dataset.widthLocked) {\n el.style.width = `${el.offsetWidth}px`\n el.dataset.widthLocked = \"true\"\n }\n\n const wrapper = el.closest(\n \"[data-radix-popper-content-wrapper]\"\n ) as HTMLElement | null\n if (!wrapper) return\n\n // Reset previous constraints so we measure natural size\n const body = el.querySelector(\n `[${SLOT_ATTR}=\"datetimepicker-body\"]`\n ) as HTMLElement | null\n if (body) {\n body.style.maxHeight = \"\"\n body.style.overflowY = \"\"\n }\n\n const rect = wrapper.getBoundingClientRect()\n const vh = window.innerHeight\n const vw = window.innerWidth\n const pad = 8\n const maxH = vh - 2 * pad\n\n let matrix = { m41: 0, m42: 0 }\n try {\n const computedTransform = getComputedStyle(wrapper).transform\n if (\n typeof DOMMatrixReadOnly !== \"undefined\" &&\n computedTransform &&\n computedTransform !== \"none\"\n ) {\n matrix = new DOMMatrixReadOnly(computedTransform)\n }\n } catch {\n // Fallback if transform cannot be parsed\n }\n let dy = 0\n let dx = 0\n\n if (rect.height > maxH) {\n // Popover is taller than viewport — constrain the body area\n // (keep footer visible) and pin to top padding\n if (body) {\n const footer = el.querySelector(\n `[${SLOT_ATTR}=\"datetimepicker-footer\"]`\n ) as HTMLElement | null\n const footerH = footer ? footer.getBoundingClientRect().height : 0\n body.style.maxHeight = `${maxH - footerH}px`\n body.style.overflowY = \"auto\"\n }\n dy = pad - rect.top\n } else {\n // Fits in viewport — just shift to stay within bounds\n if (rect.bottom > vh - pad) {\n dy = vh - pad - rect.bottom\n }\n if (rect.top + dy < pad) {\n dy = pad - rect.top\n }\n }\n\n // Keep the popover on-screen horizontally\n if (rect.right > vw - pad) {\n dx = vw - pad - rect.right\n }\n if (rect.left + dx < pad) {\n dx = pad - rect.left\n }\n\n if (dx !== 0 || dy !== 0) {\n wrapper.style.transform = `translate(${matrix.m41 + dx}px, ${matrix.m42 + dy}px)`\n }\n }\n\n // Wait for Floating UI to finish positioning\n const raf = requestAnimationFrame(() => {\n requestAnimationFrame(adjustPosition)\n })\n\n let resizeRaf = 0\n const onResize = () => {\n const el = contentRef.current\n if (el) {\n el.style.width = \"\"\n delete el.dataset.widthLocked\n }\n cancelAnimationFrame(resizeRaf)\n resizeRaf = requestAnimationFrame(() => {\n resizeRaf = requestAnimationFrame(adjustPosition)\n })\n }\n window.addEventListener(\"resize\", onResize)\n\n const el = contentRef.current\n\n return () => {\n cancelAnimationFrame(raf)\n cancelAnimationFrame(resizeRaf)\n window.removeEventListener(\"resize\", onResize)\n // Reset locked width on close so next open re-measures\n if (el) {\n el.style.width = \"\"\n delete el.dataset.widthLocked\n }\n }\n }, [isOpen])\n\n const isSideLayout =\n showTimePicker && timePickerPosition === \"side\" && isWideEnough\n\n return (\n <PopoverPortal>\n <PopoverContent\n align=\"start\"\n className={mergeClasses(\n styles.content,\n !isSideLayout && styles.contentNarrow,\n className\n )}\n collisionPadding={8}\n flush\n ref={ref}\n side=\"bottom\"\n sideOffset={4}\n sticky=\"always\"\n >\n <div\n className={styles.panelContent}\n data-slot=\"datetimepicker-content\"\n {...{ [SLOT_ATTR]: \"datetimepicker-content\" }}\n ref={contentRef}\n >\n <div\n className={mergeClasses(\n styles.body,\n isSideLayout ? styles.bodySide : styles.bodyBottom\n )}\n data-slot=\"datetimepicker-body\"\n {...{ [SLOT_ATTR]: \"datetimepicker-body\" }}\n >\n {isSideLayout && showTimePicker ? (\n <div\n className={styles.dateSection}\n data-slot=\"datetimepicker-date-section\"\n {...{ [SLOT_ATTR]: \"datetimepicker-date-section\" }}\n >\n <Calendar\n currentTimeInTimezone={currentTimeInTimezone}\n disablePast={disablePast}\n locale={locale}\n nextMonthLabel={nextMonthLabel}\n onChange={handleDateChange}\n previousMonthLabel={previousMonthLabel}\n showTodayButton={showTodayButton}\n showWeekNumbers={showWeekNumbers}\n todayLabel={todayLabel}\n value={tempValue}\n />\n </div>\n ) : (\n <Calendar\n currentTimeInTimezone={currentTimeInTimezone}\n disablePast={disablePast}\n locale={locale}\n nextMonthLabel={nextMonthLabel}\n onChange={handleDateChange}\n previousMonthLabel={previousMonthLabel}\n showTodayButton={showTodayButton}\n showWeekNumbers={showWeekNumbers}\n todayLabel={todayLabel}\n value={tempValue}\n />\n )}\n {showTimePicker && (\n <>\n {isSideLayout ? (\n <>\n <div\n className={styles.timeSpacer}\n data-slot=\"datetimepicker-time-spacer\"\n {...{ [SLOT_ATTR]: \"datetimepicker-time-spacer\" }}\n />\n <div\n className={styles.timeSection}\n data-slot=\"datetimepicker-time-section\"\n {...{ [SLOT_ATTR]: \"datetimepicker-time-section\" }}\n >\n <TimePicker\n currentTimeInTimezone={currentTimeInTimezone}\n disablePast={disablePast}\n fillHeight\n hoursLabel={hoursLabel}\n minuteStep={minuteStep}\n minutesLabel={minutesLabel}\n onChange={handleDateChange}\n value={tempValue}\n />\n </div>\n </>\n ) : (\n <TimePicker\n currentTimeInTimezone={currentTimeInTimezone}\n disablePast={disablePast}\n hoursLabel={hoursLabel}\n minuteStep={minuteStep}\n minutesLabel={minutesLabel}\n onChange={handleDateChange}\n value={tempValue}\n />\n )}\n </>\n )}\n </div>\n <div\n className={styles.footer}\n data-slot=\"datetimepicker-footer\"\n {...{ [SLOT_ATTR]: \"datetimepicker-footer\" }}\n >\n <Button onClick={cancel} size=\"sm\" variant=\"secondary\">\n {cancelLabel}\n </Button>\n <Button onClick={confirm} size=\"sm\" variant=\"primary\">\n {okLabel}\n </Button>\n </div>\n </div>\n </PopoverContent>\n </PopoverPortal>\n )\n})\n"],"names":["useStyles","makeZenithStyles","boxModel","shorthands","tokens.spacingGroup2","tokens.spacingElement3","tokens.spacingGroup1","tokens.spacingElement2","DateTimePickerPanel","React","showTimePicker","timePickerPosition","okLabel","cancelLabel","previousMonthLabel","nextMonthLabel","hoursLabel","minutesLabel","showTodayButton","todayLabel","showWeekNumbers","className","minuteStep","ref","styles","tempValue","isOpen","locale","disablePast","currentTimeInTimezone","handleDateChange","confirm","cancel","useDateTimePickerContext","isWideEnough","setIsWideEnough","update","contentRef","adjustPosition","el","wrapper","body","SLOT_ATTR","rect","vh","vw","pad","maxH","matrix","computedTransform","dy","dx","footer","footerH","raf","resizeRaf","onResize","isSideLayout","PopoverPortal","jsx","PopoverContent","mergeClasses","jsxs","Calendar","Fragment","TimePicker","Button"],"mappings":"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"}
|