@bitrise/bitkit-v2 0.3.349 → 0.3.350
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/dist/components/BitkitDatePicker/BitkitDatePicker.d.ts +6 -3
- package/dist/components/BitkitDatePicker/BitkitDatePicker.js +9 -9
- package/dist/components/BitkitDatePicker/BitkitDatePicker.js.map +1 -1
- package/dist/theme/slot-recipes/DatePicker.recipe.js +1 -1
- package/dist/theme/slot-recipes/DatePicker.recipe.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,15 +1,18 @@
|
|
|
1
|
+
import { BoxProps } from '@chakra-ui/react/box';
|
|
1
2
|
import { BitkitFieldProps } from '../BitkitField/BitkitField';
|
|
3
|
+
export type BitkitDatePickerControlProps = BoxProps;
|
|
2
4
|
export interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' | 'defaultValue' | 'state' | 'value'> {
|
|
3
|
-
|
|
5
|
+
controlProps?: BitkitDatePickerControlProps;
|
|
6
|
+
defaultValue?: Date | null;
|
|
4
7
|
disablePortal?: boolean;
|
|
5
8
|
max?: Date;
|
|
6
9
|
min?: Date;
|
|
7
|
-
onValueChange?: (value: Date
|
|
10
|
+
onValueChange?: (value: Date | null) => void;
|
|
8
11
|
placeholder?: string;
|
|
9
12
|
showOutsideDays?: boolean;
|
|
10
13
|
size?: 'md' | 'lg';
|
|
11
14
|
state?: 'disabled' | 'error' | 'readOnly' | 'warning';
|
|
12
|
-
value?: Date
|
|
15
|
+
value?: Date | null;
|
|
13
16
|
}
|
|
14
17
|
declare const BitkitDatePicker: import('react').ForwardRefExoticComponent<BitkitDatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
15
18
|
export default BitkitDatePicker;
|
|
@@ -13,17 +13,15 @@ import { forwardRef, useContext, useMemo, useRef } from "react";
|
|
|
13
13
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { Portal } from "@chakra-ui/react/portal";
|
|
15
15
|
import { useSafeLayoutEffect } from "@chakra-ui/react/hooks";
|
|
16
|
+
import { useFieldContext } from "@chakra-ui/react/field";
|
|
16
17
|
//#region lib/components/BitkitDatePicker/BitkitDatePicker.tsx
|
|
17
|
-
var toDateArray = (value) => {
|
|
18
|
-
if (value == null) return;
|
|
19
|
-
return Array.isArray(value) ? value : [value];
|
|
20
|
-
};
|
|
21
18
|
/**
|
|
22
19
|
* Ark offers `openOnClick` but nothing for focus, so the calendar is opened from the input's own
|
|
23
20
|
* focus event — that covers tabbing in as well as clicking.
|
|
24
21
|
*/
|
|
25
22
|
var DatePickerInput = ({ css }) => {
|
|
26
23
|
const { disabled, open, readOnly, setOpen } = useDatePickerContext();
|
|
24
|
+
const ariaDescribedby = useFieldContext()?.ariaDescribedby;
|
|
27
25
|
const reopenBlockedRef = useRef(false);
|
|
28
26
|
const wasOpenRef = useRef(false);
|
|
29
27
|
useSafeLayoutEffect(() => {
|
|
@@ -40,6 +38,7 @@ var DatePickerInput = ({ css }) => {
|
|
|
40
38
|
if (!reopenBlockedRef.current && !readOnly && !disabled) setOpen(true);
|
|
41
39
|
};
|
|
42
40
|
return /* @__PURE__ */ jsx(DatePicker.Input, {
|
|
41
|
+
"aria-describedby": ariaDescribedby,
|
|
43
42
|
css,
|
|
44
43
|
index: 0,
|
|
45
44
|
onFocus: handleFocus,
|
|
@@ -47,7 +46,7 @@ var DatePickerInput = ({ css }) => {
|
|
|
47
46
|
});
|
|
48
47
|
};
|
|
49
48
|
var BitkitDatePicker = forwardRef((props, ref) => {
|
|
50
|
-
const { defaultValue, disablePortal, max, min, onValueChange, placeholder, showOutsideDays, size = "lg", state, value, ...fieldProps } = props;
|
|
49
|
+
const { controlProps, defaultValue, disablePortal, max, min, onValueChange, placeholder, showOutsideDays, size = "lg", state, value, ...fieldProps } = props;
|
|
51
50
|
const styles = useSlotRecipe({ key: "textInput" })({ size });
|
|
52
51
|
const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);
|
|
53
52
|
const minCalendarDate = useMemo(() => min ? dateToCalendarDate(min) : void 0, [min]);
|
|
@@ -78,7 +77,7 @@ var BitkitDatePicker = forwardRef((props, ref) => {
|
|
|
78
77
|
state,
|
|
79
78
|
...fieldProps,
|
|
80
79
|
children: /* @__PURE__ */ jsxs(DatePicker.Root, {
|
|
81
|
-
defaultValue:
|
|
80
|
+
defaultValue: defaultValue ? [dateToCalendarDate(defaultValue)] : void 0,
|
|
82
81
|
device: "desktop",
|
|
83
82
|
disabled: state === "disabled",
|
|
84
83
|
invalid: isInvalid,
|
|
@@ -86,18 +85,19 @@ var BitkitDatePicker = forwardRef((props, ref) => {
|
|
|
86
85
|
max: maxCalendarDate,
|
|
87
86
|
min: minCalendarDate,
|
|
88
87
|
numOfMonths: 1,
|
|
89
|
-
onValueChange: onValueChange ? (details) => onValueChange(details.value?.
|
|
88
|
+
onValueChange: onValueChange ? (details) => onValueChange(details.value?.[0] ? calendarDateToDate(details.value[0]) : null) : void 0,
|
|
90
89
|
placeholder: state === "readOnly" ? "(not set)" : placeholder,
|
|
91
90
|
positioning: { placement: "bottom-start" },
|
|
92
91
|
readOnly: state === "readOnly",
|
|
93
92
|
selectionMode: "single",
|
|
94
93
|
showOutsideDays: showOutsideDays ?? true,
|
|
95
94
|
startOfWeek: 1,
|
|
96
|
-
value: value === void 0 ? void 0 : value
|
|
95
|
+
value: value === void 0 ? void 0 : value ? [dateToCalendarDate(value)] : [],
|
|
97
96
|
children: [/* @__PURE__ */ jsx(DatePicker.Control, {
|
|
98
97
|
asChild: true,
|
|
99
98
|
children: /* @__PURE__ */ jsxs(Box, {
|
|
100
|
-
|
|
99
|
+
...controlProps,
|
|
100
|
+
css: [styles.field, controlProps?.css],
|
|
101
101
|
...stateAttrs,
|
|
102
102
|
children: [
|
|
103
103
|
/* @__PURE__ */ jsx(DatePickerInput, { css: styles.input }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitDatePicker.js","names":[],"sources":["../../../lib/components/BitkitDatePicker/BitkitDatePicker.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSafeLayoutEffect } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useContext, useMemo, useRef } from 'react';\n\nimport { DatePicker, type DatePickerValueChangeDetails, useDatePickerContext } from '../../atoms/DatePicker/DatePicker';\nimport IconCalendar from '../../icons/IconCalendar';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { calendarDateToDate, dateToCalendarDate } from '../BitkitCalendar/Calendar.utils';\nimport CalendarContent from '../BitkitCalendar/components/CalendarContent';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' | 'defaultValue' | 'state' | 'value'> {\n defaultValue?: Date | Date[] | null;\n disablePortal?: boolean;\n max?: Date;\n min?: Date;\n onValueChange?: (value: Date[] | null) => void;\n placeholder?: string;\n showOutsideDays?: boolean;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n value?: Date[] | null;\n}\n\nconst toDateArray = (value?: Date | Date[] | null): Date[] | undefined => {\n if (value == null) {\n return undefined;\n }\n return Array.isArray(value) ? value : [value];\n};\n\n/**\n * Ark offers `openOnClick` but nothing for focus, so the calendar is opened from the input's own\n * focus event — that covers tabbing in as well as clicking.\n */\nconst DatePickerInput = ({ css }: { css: SystemStyleObject }) => {\n const { disabled, open, readOnly, setOpen } = useDatePickerContext();\n const reopenBlockedRef = useRef(false);\n const wasOpenRef = useRef(false);\n\n // Zag's `focusInputElement` puts focus back on the input a frame after the calendar closes on\n // selection, which would bounce it straight back open. Ignore focus that lands right after a\n // close — this has to be a layout effect so the flag is set before Zag's rAF runs. Isomorphic\n // layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n useSafeLayoutEffect(() => {\n const justClosed = wasOpenRef.current && !open;\n wasOpenRef.current = open;\n\n // Only a real close can trigger Zag's refocus, so mount (never-opened) must not arm the block\n // — otherwise an autoFocus or a programmatic focus right after mount gets swallowed.\n if (!justClosed) {\n return undefined;\n }\n\n reopenBlockedRef.current = true;\n const timeout = setTimeout(() => {\n reopenBlockedRef.current = false;\n }, 100);\n\n return () => clearTimeout(timeout);\n }, [open]);\n\n // Ark gates its own trigger handlers on the machine's interactive state, but `setOpen` is not —\n // it would happily open the calendar on a read-only or disabled field. A disabled input still\n // needs the check: Chrome fires focus events for a programmatic `.focus()` on one, even though\n // focus never actually lands there.\n const handleFocus = () => {\n if (!reopenBlockedRef.current && !readOnly && !disabled) {\n setOpen(true);\n }\n };\n\n return <DatePicker.Input css={css} index={0} onFocus={handleFocus} unstyled />;\n};\n\nconst BitkitDatePicker = forwardRef<HTMLDivElement, BitkitDatePickerProps>((props, ref) => {\n const {\n defaultValue,\n disablePortal,\n max,\n min,\n onValueChange,\n placeholder,\n showOutsideDays,\n size = 'lg',\n state,\n value,\n ...fieldProps\n } = props;\n\n const recipe = useSlotRecipe({ key: 'textInput' });\n const styles = recipe({ size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n const minCalendarDate = useMemo(() => (min ? dateToCalendarDate(min) : undefined), [min]);\n const maxCalendarDate = useMemo(() => (max ? dateToCalendarDate(max) : undefined), [max]);\n\n const iconSize = size === 'md' ? '16' : '24';\n const hasWarning = state === 'warning' || !!fieldProps.warningText;\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n let statusIcon: ReactNode = null;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n const stateAttrs = {\n 'data-disabled': state === 'disabled' ? '' : undefined,\n 'data-invalid': isInvalid ? '' : undefined,\n 'data-readonly': state === 'readOnly' ? '' : undefined,\n };\n\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n\n const calendarButton = (\n <BitkitControlButton\n icon={IconCalendar}\n label=\"Open calendar\"\n // Pulled out by its own padding so the glyph lands where a plain end icon would sit in\n // BitkitTextInput — 16px (lg) / 12px (md) from the field's outer edge.\n marginInlineEnd={size === 'md' ? '-8' : '-4'}\n size={size === 'md' ? 'xs' : 'sm'}\n state={isInteractive ? undefined : 'disabled'}\n />\n );\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <DatePicker.Root\n defaultValue={toDateArray(defaultValue)?.map(dateToCalendarDate)}\n device=\"desktop\"\n disabled={state === 'disabled'}\n invalid={isInvalid}\n layout=\"1-month\"\n max={maxCalendarDate}\n min={minCalendarDate}\n numOfMonths={1}\n onValueChange={\n onValueChange\n ? (details: DatePickerValueChangeDetails) => onValueChange(details.value?.map(calendarDateToDate) ?? null)\n : undefined\n }\n placeholder={state === 'readOnly' ? '(not set)' : placeholder}\n positioning={{ placement: 'bottom-start' }}\n readOnly={state === 'readOnly'}\n selectionMode=\"single\"\n showOutsideDays={showOutsideDays ?? true}\n startOfWeek={1}\n // Stay controlled whenever `value` is provided — even for `null`/`[]` (\"nothing\n // selected\"). Passing `undefined` would flip Root to uncontrolled. See BitkitCombobox.\n value={value === undefined ? undefined : (value?.map(dateToCalendarDate) ?? [])}\n >\n <DatePicker.Control asChild>\n <Box css={styles.field} {...stateAttrs}>\n <DatePickerInput css={styles.input} />\n {statusIcon != null && (\n <Box css={styles.element} {...stateAttrs}>\n {statusIcon}\n </Box>\n )}\n {/* Ark keeps the trigger interactive in read-only mode and forces `disabled={false}`\n onto whatever it wraps, so the button is left unwrapped there to stay inert. */}\n {state === 'readOnly' ? calendarButton : <DatePicker.Trigger asChild>{calendarButton}</DatePicker.Trigger>}\n </Box>\n </DatePicker.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <DatePicker.Positioner>\n <CalendarContent layout=\"1-month\" max={maxCalendarDate} min={minCalendarDate} selectionMode=\"day\" />\n </DatePicker.Positioner>\n </Portal>\n </DatePicker.Root>\n </BitkitField>\n );\n});\n\nBitkitDatePicker.displayName = 'BitkitDatePicker';\n\nexport default BitkitDatePicker;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"BitkitDatePicker.js","names":[],"sources":["../../../lib/components/BitkitDatePicker/BitkitDatePicker.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useFieldContext } from '@chakra-ui/react/field';\nimport { useSafeLayoutEffect } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type ReactNode, useContext, useMemo, useRef } from 'react';\n\nimport { DatePicker, type DatePickerValueChangeDetails, useDatePickerContext } from '../../atoms/DatePicker/DatePicker';\nimport IconCalendar from '../../icons/IconCalendar';\nimport IconErrorCircleFilled from '../../icons/IconErrorCircleFilled';\nimport IconWarningYellow from '../../icons/IconWarningYellow';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { calendarDateToDate, dateToCalendarDate } from '../BitkitCalendar/Calendar.utils';\nimport CalendarContent from '../BitkitCalendar/components/CalendarContent';\nimport BitkitControlButton from '../BitkitControlButton/BitkitControlButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\n\nexport type BitkitDatePickerControlProps = BoxProps;\n\nexport interface BitkitDatePickerProps extends Omit<BitkitFieldProps, 'children' | 'defaultValue' | 'state' | 'value'> {\n controlProps?: BitkitDatePickerControlProps;\n defaultValue?: Date | null;\n disablePortal?: boolean;\n max?: Date;\n min?: Date;\n onValueChange?: (value: Date | null) => void;\n placeholder?: string;\n showOutsideDays?: boolean;\n size?: 'md' | 'lg';\n state?: 'disabled' | 'error' | 'readOnly' | 'warning';\n value?: Date | null;\n}\n\n/**\n * Ark offers `openOnClick` but nothing for focus, so the calendar is opened from the input's own\n * focus event — that covers tabbing in as well as clicking.\n */\nconst DatePickerInput = ({ css }: { css: SystemStyleObject }) => {\n const { disabled, open, readOnly, setOpen } = useDatePickerContext();\n // Ark's DatePicker.Input has no notion of Chakra's Field — without this, `errorText`/`helperText`\n // render visually but are never announced, since nothing points the input's aria-describedby at them.\n const ariaDescribedby = useFieldContext()?.ariaDescribedby;\n const reopenBlockedRef = useRef(false);\n const wasOpenRef = useRef(false);\n\n // Zag's `focusInputElement` puts focus back on the input a frame after the calendar closes on\n // selection, which would bounce it straight back open. Ignore focus that lands right after a\n // close — this has to be a layout effect so the flag is set before Zag's rAF runs. Isomorphic\n // layout effect: avoids the SSR \"useLayoutEffect does nothing on the server\" warning.\n useSafeLayoutEffect(() => {\n const justClosed = wasOpenRef.current && !open;\n wasOpenRef.current = open;\n\n // Only a real close can trigger Zag's refocus, so mount (never-opened) must not arm the block\n // — otherwise an autoFocus or a programmatic focus right after mount gets swallowed.\n if (!justClosed) {\n return undefined;\n }\n\n reopenBlockedRef.current = true;\n const timeout = setTimeout(() => {\n reopenBlockedRef.current = false;\n }, 100);\n\n return () => clearTimeout(timeout);\n }, [open]);\n\n // Ark gates its own trigger handlers on the machine's interactive state, but `setOpen` is not —\n // it would happily open the calendar on a read-only or disabled field. A disabled input still\n // needs the check: Chrome fires focus events for a programmatic `.focus()` on one, even though\n // focus never actually lands there.\n const handleFocus = () => {\n if (!reopenBlockedRef.current && !readOnly && !disabled) {\n setOpen(true);\n }\n };\n\n return <DatePicker.Input aria-describedby={ariaDescribedby} css={css} index={0} onFocus={handleFocus} unstyled />;\n};\n\nconst BitkitDatePicker = forwardRef<HTMLDivElement, BitkitDatePickerProps>((props, ref) => {\n const {\n controlProps,\n defaultValue,\n disablePortal,\n max,\n min,\n onValueChange,\n placeholder,\n showOutsideDays,\n size = 'lg',\n state,\n value,\n ...fieldProps\n } = props;\n\n const recipe = useSlotRecipe({ key: 'textInput' });\n const styles = recipe({ size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n\n const minCalendarDate = useMemo(() => (min ? dateToCalendarDate(min) : undefined), [min]);\n const maxCalendarDate = useMemo(() => (max ? dateToCalendarDate(max) : undefined), [max]);\n\n const iconSize = size === 'md' ? '16' : '24';\n const hasWarning = state === 'warning' || !!fieldProps.warningText;\n const isInvalid = state === 'error' || !!fieldProps.errorText;\n\n let statusIcon: ReactNode = null;\n if (isInvalid) {\n statusIcon = <IconErrorCircleFilled color=\"icon/negative\" size={iconSize} />;\n } else if (hasWarning) {\n statusIcon = <IconWarningYellow size={iconSize} />;\n }\n\n const stateAttrs = {\n 'data-disabled': state === 'disabled' ? '' : undefined,\n 'data-invalid': isInvalid ? '' : undefined,\n 'data-readonly': state === 'readOnly' ? '' : undefined,\n };\n\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n\n const calendarButton = (\n <BitkitControlButton\n icon={IconCalendar}\n label=\"Open calendar\"\n // Pulled out by its own padding so the glyph lands where a plain end icon would sit in\n // BitkitTextInput — 16px (lg) / 12px (md) from the field's outer edge.\n marginInlineEnd={size === 'md' ? '-8' : '-4'}\n size={size === 'md' ? 'xs' : 'sm'}\n state={isInteractive ? undefined : 'disabled'}\n />\n );\n\n return (\n <BitkitField ref={ref} state={state} {...fieldProps}>\n <DatePicker.Root\n defaultValue={defaultValue ? [dateToCalendarDate(defaultValue)] : undefined}\n device=\"desktop\"\n disabled={state === 'disabled'}\n invalid={isInvalid}\n layout=\"1-month\"\n max={maxCalendarDate}\n min={minCalendarDate}\n numOfMonths={1}\n onValueChange={\n onValueChange\n ? (details: DatePickerValueChangeDetails) =>\n onValueChange(details.value?.[0] ? calendarDateToDate(details.value[0]) : null)\n : undefined\n }\n placeholder={state === 'readOnly' ? '(not set)' : placeholder}\n positioning={{ placement: 'bottom-start' }}\n readOnly={state === 'readOnly'}\n selectionMode=\"single\"\n showOutsideDays={showOutsideDays ?? true}\n startOfWeek={1}\n // Stay controlled whenever `value` is provided — even for `null` (\"nothing selected\").\n // Passing `undefined` would flip Root to uncontrolled. See BitkitCombobox.\n value={value === undefined ? undefined : value ? [dateToCalendarDate(value)] : []}\n >\n <DatePicker.Control asChild>\n <Box {...controlProps} css={[styles.field, controlProps?.css]} {...stateAttrs}>\n <DatePickerInput css={styles.input} />\n {statusIcon != null && (\n <Box css={styles.element} {...stateAttrs}>\n {statusIcon}\n </Box>\n )}\n {/* Ark keeps the trigger interactive in read-only mode and forces `disabled={false}`\n onto whatever it wraps, so the button is left unwrapped there to stay inert. */}\n {state === 'readOnly' ? calendarButton : <DatePicker.Trigger asChild>{calendarButton}</DatePicker.Trigger>}\n </Box>\n </DatePicker.Control>\n <Portal disabled={disablePortal || disablePortalFromContext}>\n <DatePicker.Positioner>\n <CalendarContent layout=\"1-month\" max={maxCalendarDate} min={minCalendarDate} selectionMode=\"day\" />\n </DatePicker.Positioner>\n </Portal>\n </DatePicker.Root>\n </BitkitField>\n );\n});\n\nBitkitDatePicker.displayName = 'BitkitDatePicker';\n\nexport default BitkitDatePicker;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n className: 'datePicker',\n slots: [...datePickerAnatomy.keys(), 'months'],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '8',\n },\n control: {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n },\n months: {\n display: 'flex',\n gap: '24',\n },\n positioner: {\n position: 'absolute',\n zIndex: '
|
|
1
|
+
{"version":3,"file":"DatePicker.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/DatePicker.recipe.ts"],"sourcesContent":["import { datePickerAnatomy } from '@ark-ui/react/date-picker';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst datePickerSlotRecipe = defineSlotRecipe({\n className: 'datePicker',\n slots: [...datePickerAnatomy.keys(), 'months'],\n base: {\n root: {\n display: 'flex',\n flexDirection: 'column',\n gap: '8',\n },\n control: {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n },\n months: {\n display: 'flex',\n gap: '24',\n },\n positioner: {\n position: 'absolute',\n zIndex: 'select',\n },\n content: {\n backgroundColor: 'background/primary',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n minWidth: rem(312),\n paddingBlock: '24',\n paddingInline: '16',\n },\n view: {\n display: 'flex',\n flexDirection: 'column',\n gap: '16',\n },\n viewControl: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n },\n table: {\n width: 'full',\n borderCollapse: 'collapse',\n borderSpacing: 0,\n tableLayout: 'fixed',\n },\n tableBody: {\n '& > tr:first-child > td': {\n paddingTop: '8',\n },\n },\n tableRow: {\n display: 'table-row',\n },\n tableHeader: {\n color: 'text/tertiary',\n textAlign: 'center',\n textStyle: 'body/md/regular',\n width: '40',\n minWidth: '40',\n maxWidth: '40',\n },\n tableCell: {\n textAlign: 'center',\n paddingBlock: '2',\n },\n tableCellTrigger: {\n display: 'flex',\n alignItems: 'stretch',\n justifyContent: 'center',\n width: '100%',\n height: '32',\n color: 'text/primary',\n cursor: 'pointer',\n textStyle: 'body/md/regular',\n\n '&:hover:not([data-selected])': {\n backgroundColor: 'interactive/moderate',\n borderRadius: '0.5rem',\n },\n\n '&[data-unavailable]': {\n borderRadius: 0,\n backgroundColor: 'interactive/disabled',\n color: 'text/disabled',\n cursor: 'default',\n '&:hover, &[data-outside-range]:hover': {\n borderRadius: 0,\n backgroundColor: 'interactive/disabled',\n color: 'text/disabled',\n },\n },\n\n '&[data-outside-range]': {\n color: 'text/tertiary',\n },\n\n '&[data-outside-range][data-unavailable]': {\n color: 'text/disabled',\n },\n\n '&[data-outside-range][data-in-range], &[data-outside-range][data-in-range]:hover': {\n backgroundColor: 'interactive/moderate',\n color: 'interactive/bold',\n },\n\n '&[data-outside-range][data-range-end]': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/subtle',\n },\n\n '&[data-outside-range][data-hover-range-start]:hover': {\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'interactive/subtle',\n backgroundColor: 'interactive/highlight',\n },\n\n '&[data-outside-range][data-hover-range-end]:hover': {\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/subtle',\n backgroundColor: 'interactive/highlight',\n },\n\n '&[data-outside-range][data-range-start],&[data-outside-range][data-range-end]': {\n backgroundColor: 'interactive/highlight',\n color: 'interactive/subtle',\n },\n\n '&[data-outside-range][data-in-range][data-range-start]:hover': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'interactive/minimal',\n },\n\n '&[data-outside-range][data-in-range][data-range-end]:hover': {\n backgroundColor: 'interactive/highlight',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/minimal',\n },\n\n '&[data-outside-range]:hover': {\n backgroundColor: 'transparent',\n color: 'text/tertiary',\n },\n\n '&[data-in-range]': {\n backgroundColor: 'interactive/moderate',\n color: 'text/primary',\n },\n\n '&[data-in-range]:hover': {\n backgroundColor: 'interactive/muted',\n borderRadius: 0,\n },\n\n '&[data-selected]': {\n backgroundColor: 'interactive/base',\n color: 'text/on-color',\n borderRadius: '0.5rem',\n },\n\n '&[data-selected]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem',\n color: 'interactive/moderate',\n },\n\n '&[data-range-start], &[data-hover-range-start], &[data-hover-range-start]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'text/on-color',\n },\n\n '&[data-range-end], &[data-hover-range-end], &[data-hover-range-end]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'text/on-color',\n },\n\n '&[data-range-start]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0.5rem 0 0 0.5rem',\n color: 'interactive/moderate',\n },\n\n '&[data-range-end]:hover': {\n backgroundColor: 'interactive/base',\n borderRadius: '0 0.5rem 0.5rem 0',\n color: 'interactive/moderate',\n },\n\n '&[data-range-start][data-range-end]:hover': {\n backgroundColor: 'interactive/base',\n color: 'interactive/moderate',\n },\n\n '&[data-hover-range-start][data-hover-range-end]': {\n borderRadius: '0.5rem',\n },\n\n '&[data-today] > span': {\n border: '1px solid',\n borderColor: 'interactive/base',\n },\n\n '&[data-today][data-selected] > span': {\n border: '1px solid',\n borderColor: 'interactive/moderate',\n },\n\n '&[data-today][data-range-end] > span, &[data-today][data-range-start] > span': {\n borderColor: 'interactive/moderate',\n },\n\n '& > span': {\n alignItems: 'center',\n justifyContent: 'center',\n borderRadius: '8',\n display: 'flex',\n flex: 1,\n },\n },\n },\n variants: {\n layout: {\n '1-month': {\n content: {\n width: '17.5rem',\n },\n },\n '2-month': {\n content: {\n width: '38.5rem',\n },\n },\n },\n showOutsideDays: {\n false: {\n tableCellTrigger: {\n '&[data-outside-range]': {\n visibility: 'hidden',\n },\n },\n },\n true: {\n tableCellTrigger: {\n '&[data-outside-range]': {\n visibility: 'visible',\n },\n },\n },\n },\n device: {\n mobile: {\n content: {\n boxShadow: 'none',\n paddingBlock: '16',\n paddingInline: '16',\n },\n },\n },\n },\n});\n\nexport default datePickerSlotRecipe;\n"],"mappings":"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"}
|