react-aria-components 1.14.0 → 1.15.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/dist/Breadcrumbs.main.js +3 -2
- package/dist/Breadcrumbs.main.js.map +1 -1
- package/dist/Breadcrumbs.mjs +4 -3
- package/dist/Breadcrumbs.module.js +4 -3
- package/dist/Breadcrumbs.module.js.map +1 -1
- package/dist/Button.main.js +1 -1
- package/dist/Button.main.js.map +1 -1
- package/dist/Button.mjs +2 -2
- package/dist/Button.module.js +2 -2
- package/dist/Button.module.js.map +1 -1
- package/dist/Calendar.main.js +11 -7
- package/dist/Calendar.main.js.map +1 -1
- package/dist/Calendar.mjs +12 -8
- package/dist/Calendar.module.js +12 -8
- package/dist/Calendar.module.js.map +1 -1
- package/dist/Checkbox.main.js +2 -2
- package/dist/Checkbox.main.js.map +1 -1
- package/dist/Checkbox.mjs +3 -3
- package/dist/Checkbox.module.js +3 -3
- package/dist/Checkbox.module.js.map +1 -1
- package/dist/ColorArea.main.js +1 -1
- package/dist/ColorArea.main.js.map +1 -1
- package/dist/ColorArea.mjs +2 -2
- package/dist/ColorArea.module.js +2 -2
- package/dist/ColorArea.module.js.map +1 -1
- package/dist/ColorField.main.js +7 -3
- package/dist/ColorField.main.js.map +1 -1
- package/dist/ColorField.mjs +8 -4
- package/dist/ColorField.module.js +8 -4
- package/dist/ColorField.module.js.map +1 -1
- package/dist/ColorSlider.main.js +1 -1
- package/dist/ColorSlider.main.js.map +1 -1
- package/dist/ColorSlider.mjs +2 -2
- package/dist/ColorSlider.module.js +2 -2
- package/dist/ColorSlider.module.js.map +1 -1
- package/dist/ColorSwatch.main.js +1 -1
- package/dist/ColorSwatch.main.js.map +1 -1
- package/dist/ColorSwatch.mjs +2 -2
- package/dist/ColorSwatch.module.js +2 -2
- package/dist/ColorSwatch.module.js.map +1 -1
- package/dist/ColorSwatchPicker.main.js +2 -0
- package/dist/ColorSwatchPicker.main.js.map +1 -1
- package/dist/ColorSwatchPicker.mjs +2 -0
- package/dist/ColorSwatchPicker.module.js +2 -0
- package/dist/ColorSwatchPicker.module.js.map +1 -1
- package/dist/ColorThumb.main.js +1 -1
- package/dist/ColorThumb.main.js.map +1 -1
- package/dist/ColorThumb.mjs +2 -2
- package/dist/ColorThumb.module.js +2 -2
- package/dist/ColorThumb.module.js.map +1 -1
- package/dist/ColorWheel.main.js +2 -2
- package/dist/ColorWheel.main.js.map +1 -1
- package/dist/ColorWheel.mjs +3 -3
- package/dist/ColorWheel.module.js +3 -3
- package/dist/ColorWheel.module.js.map +1 -1
- package/dist/ComboBox.main.js +2 -2
- package/dist/ComboBox.main.js.map +1 -1
- package/dist/ComboBox.mjs +3 -3
- package/dist/ComboBox.module.js +3 -3
- package/dist/ComboBox.module.js.map +1 -1
- package/dist/DateField.main.js +3 -3
- package/dist/DateField.main.js.map +1 -1
- package/dist/DateField.mjs +4 -4
- package/dist/DateField.module.js +4 -4
- package/dist/DateField.module.js.map +1 -1
- package/dist/DatePicker.main.js +2 -2
- package/dist/DatePicker.main.js.map +1 -1
- package/dist/DatePicker.mjs +3 -3
- package/dist/DatePicker.module.js +3 -3
- package/dist/DatePicker.module.js.map +1 -1
- package/dist/Dialog.main.js +2 -1
- package/dist/Dialog.main.js.map +1 -1
- package/dist/Dialog.mjs +3 -2
- package/dist/Dialog.module.js +3 -2
- package/dist/Dialog.module.js.map +1 -1
- package/dist/Disclosure.main.js +3 -3
- package/dist/Disclosure.main.js.map +1 -1
- package/dist/Disclosure.mjs +4 -4
- package/dist/Disclosure.module.js +4 -4
- package/dist/Disclosure.module.js.map +1 -1
- package/dist/DropZone.main.js +2 -3
- package/dist/DropZone.main.js.map +1 -1
- package/dist/DropZone.mjs +4 -5
- package/dist/DropZone.module.js +4 -5
- package/dist/DropZone.module.js.map +1 -1
- package/dist/Form.main.js +1 -1
- package/dist/Form.main.js.map +1 -1
- package/dist/Form.mjs +2 -2
- package/dist/Form.module.js +2 -2
- package/dist/Form.module.js.map +1 -1
- package/dist/GridList.main.js +16 -13
- package/dist/GridList.main.js.map +1 -1
- package/dist/GridList.mjs +17 -14
- package/dist/GridList.module.js +17 -14
- package/dist/GridList.module.js.map +1 -1
- package/dist/Group.main.js +1 -1
- package/dist/Group.main.js.map +1 -1
- package/dist/Group.mjs +2 -2
- package/dist/Group.module.js +2 -2
- package/dist/Group.module.js.map +1 -1
- package/dist/Header.main.js +1 -1
- package/dist/Header.main.js.map +1 -1
- package/dist/Header.mjs +2 -2
- package/dist/Header.module.js +2 -2
- package/dist/Header.module.js.map +1 -1
- package/dist/Heading.main.js +2 -2
- package/dist/Heading.main.js.map +1 -1
- package/dist/Heading.mjs +2 -2
- package/dist/Heading.module.js +2 -2
- package/dist/Heading.module.js.map +1 -1
- package/dist/HiddenDateInput.main.js +5 -1
- package/dist/HiddenDateInput.main.js.map +1 -1
- package/dist/HiddenDateInput.mjs +6 -2
- package/dist/HiddenDateInput.module.js +6 -2
- package/dist/HiddenDateInput.module.js.map +1 -1
- package/dist/Input.main.js +1 -1
- package/dist/Input.main.js.map +1 -1
- package/dist/Input.mjs +2 -2
- package/dist/Input.module.js +2 -2
- package/dist/Input.module.js.map +1 -1
- package/dist/Keyboard.main.js +1 -1
- package/dist/Keyboard.main.js.map +1 -1
- package/dist/Keyboard.mjs +2 -2
- package/dist/Keyboard.module.js +2 -2
- package/dist/Keyboard.module.js.map +1 -1
- package/dist/Label.main.js +2 -1
- package/dist/Label.main.js.map +1 -1
- package/dist/Label.mjs +3 -2
- package/dist/Label.module.js +3 -2
- package/dist/Label.module.js.map +1 -1
- package/dist/Link.main.js +3 -2
- package/dist/Link.main.js.map +1 -1
- package/dist/Link.mjs +4 -3
- package/dist/Link.module.js +4 -3
- package/dist/Link.module.js.map +1 -1
- package/dist/ListBox.main.js +13 -14
- package/dist/ListBox.main.js.map +1 -1
- package/dist/ListBox.mjs +14 -15
- package/dist/ListBox.module.js +14 -15
- package/dist/ListBox.module.js.map +1 -1
- package/dist/Menu.main.js +21 -8
- package/dist/Menu.main.js.map +1 -1
- package/dist/Menu.mjs +22 -9
- package/dist/Menu.module.js +22 -9
- package/dist/Menu.module.js.map +1 -1
- package/dist/Meter.main.js +1 -1
- package/dist/Meter.main.js.map +1 -1
- package/dist/Meter.mjs +2 -2
- package/dist/Meter.module.js +2 -2
- package/dist/Meter.module.js.map +1 -1
- package/dist/Modal.main.js +2 -2
- package/dist/Modal.main.js.map +1 -1
- package/dist/Modal.mjs +3 -3
- package/dist/Modal.module.js +3 -3
- package/dist/Modal.module.js.map +1 -1
- package/dist/NumberField.main.js +1 -1
- package/dist/NumberField.main.js.map +1 -1
- package/dist/NumberField.mjs +2 -2
- package/dist/NumberField.module.js +2 -2
- package/dist/NumberField.module.js.map +1 -1
- package/dist/OverlayArrow.main.js +1 -1
- package/dist/OverlayArrow.main.js.map +1 -1
- package/dist/OverlayArrow.mjs +2 -2
- package/dist/OverlayArrow.module.js +2 -2
- package/dist/OverlayArrow.module.js.map +1 -1
- package/dist/Popover.main.js +2 -2
- package/dist/Popover.main.js.map +1 -1
- package/dist/Popover.mjs +4 -4
- package/dist/Popover.module.js +4 -4
- package/dist/Popover.module.js.map +1 -1
- package/dist/ProgressBar.main.js +1 -1
- package/dist/ProgressBar.main.js.map +1 -1
- package/dist/ProgressBar.mjs +2 -2
- package/dist/ProgressBar.module.js +2 -2
- package/dist/ProgressBar.module.js.map +1 -1
- package/dist/RadioGroup.main.js +2 -2
- package/dist/RadioGroup.main.js.map +1 -1
- package/dist/RadioGroup.mjs +3 -3
- package/dist/RadioGroup.module.js +3 -3
- package/dist/RadioGroup.module.js.map +1 -1
- package/dist/SearchField.main.js +1 -1
- package/dist/SearchField.main.js.map +1 -1
- package/dist/SearchField.mjs +2 -2
- package/dist/SearchField.module.js +2 -2
- package/dist/SearchField.module.js.map +1 -1
- package/dist/Select.main.js +2 -2
- package/dist/Select.main.js.map +1 -1
- package/dist/Select.mjs +3 -3
- package/dist/Select.module.js +3 -3
- package/dist/Select.module.js.map +1 -1
- package/dist/Separator.main.js +3 -1
- package/dist/Separator.main.js.map +1 -1
- package/dist/Separator.mjs +4 -2
- package/dist/Separator.module.js +4 -2
- package/dist/Separator.module.js.map +1 -1
- package/dist/SharedElementTransition.main.js +3 -2
- package/dist/SharedElementTransition.main.js.map +1 -1
- package/dist/SharedElementTransition.mjs +4 -3
- package/dist/SharedElementTransition.module.js +4 -3
- package/dist/SharedElementTransition.module.js.map +1 -1
- package/dist/Slider.main.js +6 -5
- package/dist/Slider.main.js.map +1 -1
- package/dist/Slider.mjs +7 -6
- package/dist/Slider.module.js +7 -6
- package/dist/Slider.module.js.map +1 -1
- package/dist/Switch.main.js +1 -1
- package/dist/Switch.main.js.map +1 -1
- package/dist/Switch.mjs +2 -2
- package/dist/Switch.module.js +2 -2
- package/dist/Switch.module.js.map +1 -1
- package/dist/Table.main.js +30 -25
- package/dist/Table.main.js.map +1 -1
- package/dist/Table.mjs +31 -26
- package/dist/Table.module.js +31 -26
- package/dist/Table.module.js.map +1 -1
- package/dist/Tabs.main.js +13 -6
- package/dist/Tabs.main.js.map +1 -1
- package/dist/Tabs.mjs +14 -7
- package/dist/Tabs.module.js +14 -7
- package/dist/Tabs.module.js.map +1 -1
- package/dist/TagGroup.main.js +6 -5
- package/dist/TagGroup.main.js.map +1 -1
- package/dist/TagGroup.mjs +7 -6
- package/dist/TagGroup.module.js +7 -6
- package/dist/TagGroup.module.js.map +1 -1
- package/dist/Text.main.js +2 -1
- package/dist/Text.main.js.map +1 -1
- package/dist/Text.mjs +3 -2
- package/dist/Text.module.js +3 -2
- package/dist/Text.module.js.map +1 -1
- package/dist/TextArea.main.js +1 -1
- package/dist/TextArea.main.js.map +1 -1
- package/dist/TextArea.mjs +2 -2
- package/dist/TextArea.module.js +2 -2
- package/dist/TextArea.module.js.map +1 -1
- package/dist/TextField.main.js +1 -1
- package/dist/TextField.main.js.map +1 -1
- package/dist/TextField.mjs +2 -2
- package/dist/TextField.module.js +2 -2
- package/dist/TextField.module.js.map +1 -1
- package/dist/Toast.main.js +6 -4
- package/dist/Toast.main.js.map +1 -1
- package/dist/Toast.mjs +7 -5
- package/dist/Toast.module.js +7 -5
- package/dist/Toast.module.js.map +1 -1
- package/dist/ToggleButton.main.js +5 -2
- package/dist/ToggleButton.main.js.map +1 -1
- package/dist/ToggleButton.mjs +6 -3
- package/dist/ToggleButton.module.js +6 -3
- package/dist/ToggleButton.module.js.map +1 -1
- package/dist/ToggleButtonGroup.main.js +1 -1
- package/dist/ToggleButtonGroup.main.js.map +1 -1
- package/dist/ToggleButtonGroup.mjs +2 -2
- package/dist/ToggleButtonGroup.module.js +2 -2
- package/dist/ToggleButtonGroup.module.js.map +1 -1
- package/dist/Toolbar.main.js +1 -1
- package/dist/Toolbar.main.js.map +1 -1
- package/dist/Toolbar.mjs +2 -2
- package/dist/Toolbar.module.js +2 -2
- package/dist/Toolbar.module.js.map +1 -1
- package/dist/Tooltip.main.js +1 -1
- package/dist/Tooltip.main.js.map +1 -1
- package/dist/Tooltip.mjs +2 -2
- package/dist/Tooltip.module.js +2 -2
- package/dist/Tooltip.module.js.map +1 -1
- package/dist/Tree.main.js +6 -6
- package/dist/Tree.main.js.map +1 -1
- package/dist/Tree.mjs +7 -7
- package/dist/Tree.module.js +7 -7
- package/dist/Tree.module.js.map +1 -1
- package/dist/types.d.ts +121 -62
- package/dist/types.d.ts.map +1 -1
- package/dist/utils.main.js +41 -3
- package/dist/utils.main.js.map +1 -1
- package/dist/utils.mjs +42 -5
- package/dist/utils.module.js +42 -5
- package/dist/utils.module.js.map +1 -1
- package/package.json +24 -24
- package/src/Breadcrumbs.tsx +9 -6
- package/src/Button.tsx +4 -3
- package/src/Calendar.tsx +26 -20
- package/src/Checkbox.tsx +7 -6
- package/src/ColorArea.tsx +3 -2
- package/src/ColorField.tsx +18 -3
- package/src/ColorSlider.tsx +2 -1
- package/src/ColorSwatch.tsx +2 -1
- package/src/ColorSwatchPicker.tsx +2 -0
- package/src/ColorThumb.tsx +3 -3
- package/src/ColorWheel.tsx +4 -3
- package/src/ComboBox.tsx +3 -2
- package/src/DateField.tsx +5 -4
- package/src/DatePicker.tsx +3 -2
- package/src/Dialog.tsx +5 -4
- package/src/Disclosure.tsx +7 -6
- package/src/DropZone.tsx +5 -5
- package/src/Form.tsx +4 -4
- package/src/GridList.tsx +30 -23
- package/src/Group.tsx +10 -9
- package/src/Header.tsx +7 -5
- package/src/Heading.tsx +4 -4
- package/src/HiddenDateInput.tsx +10 -3
- package/src/Input.tsx +3 -2
- package/src/Keyboard.tsx +4 -2
- package/src/Label.tsx +4 -3
- package/src/Link.tsx +15 -12
- package/src/ListBox.tsx +23 -22
- package/src/Menu.tsx +32 -17
- package/src/Meter.tsx +3 -2
- package/src/Modal.tsx +5 -4
- package/src/NumberField.tsx +2 -1
- package/src/OverlayArrow.tsx +3 -2
- package/src/Popover.tsx +5 -4
- package/src/ProgressBar.tsx +3 -2
- package/src/RadioGroup.tsx +6 -5
- package/src/SearchField.tsx +3 -2
- package/src/Select.tsx +6 -5
- package/src/Separator.tsx +8 -5
- package/src/SharedElementTransition.tsx +4 -3
- package/src/Slider.tsx +9 -7
- package/src/Switch.tsx +11 -10
- package/src/Table.tsx +47 -36
- package/src/Tabs.tsx +23 -18
- package/src/TagGroup.tsx +16 -13
- package/src/Text.tsx +4 -3
- package/src/TextArea.tsx +3 -2
- package/src/TextField.tsx +4 -3
- package/src/Toast.tsx +15 -11
- package/src/ToggleButton.tsx +5 -4
- package/src/ToggleButtonGroup.tsx +3 -2
- package/src/Toolbar.tsx +3 -2
- package/src/Tooltip.tsx +3 -2
- package/src/Tree.tsx +18 -17
- package/src/utils.tsx +96 -10
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA0B;AAKrE,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,2CAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,sCAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,8BAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,oCAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,0DAAC,CAAA,GAAA,6BAAE,EAAE,GAAG;QACL,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,mDAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAYO,MAAM,0DAAyB,CAAA,GAAA,0BAAY,EAA6D;AAKxG,MAAM,0DAAkB,CAAA,GAAA,uBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAAiC;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,uBAAS,EAAE;IACvB,6DAA6D;IAC7D,IAAI,aAAC,SAAS,SAAE,KAAK,EAAE,GAAG,MAAK,GAAG;IAElC,IAAI,cAAc,CAAA,GAAA,wCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,0DAAC,CAAA,GAAA,6BAAE,EAAE,GAAG;QACL,GAAG,IAAI;QACP,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from 'react-aria';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RenderProps,\n SlotProps,\n StyleRenderProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n /**\n * Whether the color wheel is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * State of the color wheel.\n */\n state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-ColorWheel'\n */\n className?: ClassNameOrFunction<ColorWheelRenderProps>\n}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ColorWheelContext);\n let state = useColorWheelState(props);\n let inputRef = useRef(null);\n let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isDisabled: props.isDisabled || false\n },\n defaultClassName: 'react-aria-ColorWheel',\n defaultStyle: {\n position: 'relative'\n }\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <dom.div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}>\n <Provider\n values={[\n [ColorWheelStateContext, state],\n [ColorWheelTrackContext, trackProps],\n [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n ]}>\n {renderProps.children}\n </Provider>\n </dom.div>\n );\n});\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-ColorWheelTrack'\n */\n className?: ClassNameOrFunction<ColorWheelTrackRenderProps>\n}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, StyleRenderProps<ColorWheelTrackRenderProps> {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nexport const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n let state = useContext(ColorWheelStateContext)!;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {className, style, ...rest} = props;\n\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-ColorWheelTrack',\n values: {\n isDisabled: state.isDisabled,\n state\n }\n });\n\n return (\n <dom.div\n {...rest}\n {...renderProps}\n ref={ref}\n data-disabled={state.isDisabled || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.main.js.map"}
|
package/dist/ColorWheel.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
|
|
1
|
+
import {dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.mjs";
|
|
2
2
|
import {ColorWheelContext as $4e85f108e88277b8$export$265015d6dc85bf21} from "./RSPContexts.mjs";
|
|
3
3
|
import {InternalColorThumbContext as $e2b71ec1d6016406$export$c80c0ea2ca5cb846} from "./ColorThumb.mjs";
|
|
4
4
|
import {useColorWheel as $fp8U1$useColorWheel} from "react-aria";
|
|
@@ -34,7 +34,7 @@ const $66beab92e74e495f$export$f80663f808113381 = /*#__PURE__*/ (0, $fp8U1$forwa
|
|
|
34
34
|
global: true
|
|
35
35
|
});
|
|
36
36
|
delete DOMProps.id;
|
|
37
|
-
return /*#__PURE__*/ (0, $fp8U1$react).createElement(
|
|
37
|
+
return /*#__PURE__*/ (0, $fp8U1$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
38
38
|
...DOMProps,
|
|
39
39
|
...renderProps,
|
|
40
40
|
ref: ref,
|
|
@@ -77,7 +77,7 @@ const $66beab92e74e495f$export$aaae3dd1f909c692 = /*#__PURE__*/ (0, $fp8U1$forwa
|
|
|
77
77
|
state: state
|
|
78
78
|
}
|
|
79
79
|
});
|
|
80
|
-
return /*#__PURE__*/ (0, $fp8U1$react).createElement(
|
|
80
|
+
return /*#__PURE__*/ (0, $fp8U1$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
81
81
|
...rest,
|
|
82
82
|
...renderProps,
|
|
83
83
|
ref: ref,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
|
|
1
|
+
import {dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3} from "./utils.module.js";
|
|
2
2
|
import {ColorWheelContext as $4e85f108e88277b8$export$265015d6dc85bf21} from "./RSPContexts.module.js";
|
|
3
3
|
import {InternalColorThumbContext as $e2b71ec1d6016406$export$c80c0ea2ca5cb846} from "./ColorThumb.module.js";
|
|
4
4
|
import {useColorWheel as $fp8U1$useColorWheel} from "react-aria";
|
|
@@ -34,7 +34,7 @@ const $66beab92e74e495f$export$f80663f808113381 = /*#__PURE__*/ (0, $fp8U1$forwa
|
|
|
34
34
|
global: true
|
|
35
35
|
});
|
|
36
36
|
delete DOMProps.id;
|
|
37
|
-
return /*#__PURE__*/ (0, $fp8U1$react).createElement(
|
|
37
|
+
return /*#__PURE__*/ (0, $fp8U1$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
38
38
|
...DOMProps,
|
|
39
39
|
...renderProps,
|
|
40
40
|
ref: ref,
|
|
@@ -77,7 +77,7 @@ const $66beab92e74e495f$export$aaae3dd1f909c692 = /*#__PURE__*/ (0, $fp8U1$forwa
|
|
|
77
77
|
state: state
|
|
78
78
|
}
|
|
79
79
|
});
|
|
80
|
-
return /*#__PURE__*/ (0, $fp8U1$react).createElement(
|
|
80
|
+
return /*#__PURE__*/ (0, $fp8U1$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
81
81
|
...rest,
|
|
82
82
|
...renderProps,
|
|
83
83
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;AAuCO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA0B;AAKrE,MAAM,0DAAa,CAAA,GAAA,iBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK,CAAA,GAAA,yCAAgB;IAC3D,IAAI,QAAQ,CAAA,GAAA,yBAAiB,EAAE;IAC/B,IAAI,WAAW,CAAA,GAAA,aAAK,EAAE;IACtB,IAAI,cAAC,UAAU,cAAE,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE,OAAO,OAAO;IAEvE,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,QAAQ;mBACN;YACA,YAAY,MAAM,UAAU,IAAI;QAClC;QACA,kBAAkB;QAClB,cAAc;YACZ,UAAU;QACZ;IACF;IAEA,IAAI,WAAW,CAAA,GAAA,qBAAa,EAAE,OAAO;QAAC,QAAQ;IAAI;IAClD,OAAO,SAAS,EAAE;IAElB,qBACE,gCAAC,CAAA,GAAA,yCAAE,EAAE,GAAG;QACL,GAAG,QAAQ;QACX,GAAG,WAAW;QACf,KAAK;QACL,MAAM,MAAM,IAAI,IAAI;QACpB,iBAAe,MAAM,UAAU,IAAI;qBACnC,gCAAC,CAAA,GAAA,yCAAO;QACN,QAAQ;YACN;gBAAC;gBAAwB;aAAM;YAC/B;gBAAC;gBAAwB;aAAW;YACpC;gBAAC,CAAA,GAAA,yCAAwB;gBAAG;2BAAC;gCAAO;oBAAY,WAAW;oBAAU,aAAa;oBAAY,YAAY,MAAM,UAAU;gBAAA;aAAE;SAC7H;OACA,YAAY,QAAQ;AAI7B;AAYO,MAAM,0DAAyB,CAAA,GAAA,oBAAY,EAA6D;AAKxG,MAAM,0DAAkB,CAAA,GAAA,iBAAS,EAAE,SAAS,gBAAgB,KAA2B,EAAE,GAAiC;IAC/H,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAc,EAAE,OAAO,KAAK;IAC3C,IAAI,QAAQ,CAAA,GAAA,iBAAS,EAAE;IACvB,6DAA6D;IAC7D,IAAI,aAAC,SAAS,SAAE,KAAK,EAAE,GAAG,MAAK,GAAG;IAElC,IAAI,cAAc,CAAA,GAAA,uCAAa,EAAE;QAC/B,GAAG,KAAK;QACR,kBAAkB;QAClB,QAAQ;YACN,YAAY,MAAM,UAAU;mBAC5B;QACF;IACF;IAEA,qBACE,gCAAC,CAAA,GAAA,yCAAE,EAAE,GAAG;QACL,GAAG,IAAI;QACP,GAAG,WAAW;QACf,KAAK;QACL,iBAAe,MAAM,UAAU,IAAI;;AAEzC","sources":["packages/react-aria-components/src/ColorWheel.tsx"],"sourcesContent":["import {AriaColorWheelOptions, useColorWheel} from 'react-aria';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RenderProps,\n SlotProps,\n StyleRenderProps,\n useContextProps,\n useRenderProps\n} from './utils';\nimport {ColorWheelContext} from './RSPContexts';\nimport {ColorWheelState, useColorWheelState} from 'react-stately';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {GlobalDOMAttributes} from '@react-types/shared';\nimport {InternalColorThumbContext} from './ColorThumb';\nimport React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';\n\nexport interface ColorWheelRenderProps {\n /**\n * Whether the color wheel is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * State of the color wheel.\n */\n state: ColorWheelState\n}\n\nexport interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-ColorWheel'\n */\n className?: ClassNameOrFunction<ColorWheelRenderProps>\n}\n\nexport const ColorWheelStateContext = createContext<ColorWheelState | null>(null);\n\n/**\n * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.\n */\nexport const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ColorWheelContext);\n let state = useColorWheelState(props);\n let inputRef = useRef(null);\n let {trackProps, inputProps, thumbProps} = useColorWheel(props, state, inputRef);\n\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isDisabled: props.isDisabled || false\n },\n defaultClassName: 'react-aria-ColorWheel',\n defaultStyle: {\n position: 'relative'\n }\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <dom.div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-disabled={props.isDisabled || undefined}>\n <Provider\n values={[\n [ColorWheelStateContext, state],\n [ColorWheelTrackContext, trackProps],\n [InternalColorThumbContext, {state, thumbProps, inputXRef: inputRef, xInputProps: inputProps, isDisabled: props.isDisabled}]\n ]}>\n {renderProps.children}\n </Provider>\n </dom.div>\n );\n});\n\nexport interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}\nexport interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-ColorWheelTrack'\n */\n className?: ClassNameOrFunction<ColorWheelTrackRenderProps>\n}\ninterface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, StyleRenderProps<ColorWheelTrackRenderProps> {}\n\nexport const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);\n\n/**\n * A color wheel track renders a circular gradient track.\n */\nexport const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);\n let state = useContext(ColorWheelStateContext)!;\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n let {className, style, ...rest} = props;\n\n let renderProps = useRenderProps({\n ...props,\n defaultClassName: 'react-aria-ColorWheelTrack',\n values: {\n isDisabled: state.isDisabled,\n state\n }\n });\n\n return (\n <dom.div\n {...rest}\n {...renderProps}\n ref={ref}\n data-disabled={state.isDisabled || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"ColorWheel.module.js.map"}
|
package/dist/ComboBox.main.js
CHANGED
|
@@ -105,8 +105,8 @@ function $1d716ce69f118fad$var$ComboBoxInner({ props: props, collection: collect
|
|
|
105
105
|
sensitivity: 'base'
|
|
106
106
|
});
|
|
107
107
|
let state = (0, $9obPC$reactstately.useComboBoxState)({
|
|
108
|
-
defaultFilter: props.defaultFilter || contains,
|
|
109
108
|
...props,
|
|
109
|
+
defaultFilter: props.defaultFilter || contains,
|
|
110
110
|
// If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
|
|
111
111
|
items: props.items,
|
|
112
112
|
children: undefined,
|
|
@@ -249,7 +249,7 @@ function $1d716ce69f118fad$var$ComboBoxInner({ props: props, collection: collect
|
|
|
249
249
|
validation
|
|
250
250
|
]
|
|
251
251
|
]
|
|
252
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($9obPC$react))).createElement(
|
|
252
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($9obPC$react))).createElement((0, $c5ccf687772c0422$exports.dom).div, {
|
|
253
253
|
...DOMProps,
|
|
254
254
|
...renderProps,
|
|
255
255
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {\n ClassNameOrFunction,\n ContextValue,\n Provider,\n RACValidation,\n removeDataAttributes,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps,\n useSlot,\n useSlottedContext\n} from './utils';\nimport {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {ListBoxContext, ListStateContext} from './ListBox';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface ComboBoxRenderProps {\n /**\n * Whether the combobox is currently open.\n * @selector [data-open]\n */\n isOpen: boolean,\n /**\n * Whether the combobox is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the combobox is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the combobox is required.\n * @selector [data-required]\n */\n isRequired: boolean\n}\n\nexport interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-ComboBox'\n */\n className?: ClassNameOrFunction<ComboBoxRenderProps>,\n /** The filter function used to determine if a option should be included in the combo box list. */\n defaultFilter?: (textValue: string, inputValue: string) => boolean,\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form.\n * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n * @default 'key'\n */\n formValue?: 'text' | 'key',\n /** Whether the combo box allows the menu to be open when the collection is empty. */\n allowsEmptyCollection?: boolean\n}\n\nexport const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);\nexport const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);\n\n/**\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ComboBoxContext);\n let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;\n let content = useMemo(() => (\n <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>\n {typeof children === 'function'\n ? children({\n isOpen: false,\n isDisabled,\n isInvalid,\n isRequired,\n defaultChildren: null\n })\n : children}\n </ListBoxContext.Provider>\n ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);\n\n return (\n <CollectionBuilder content={content}>\n {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}\n </CollectionBuilder>\n );\n});\n\n// Contexts to clear inside the popover.\nconst CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];\n\ninterface ComboBoxInnerProps<T extends object> {\n props: ComboBoxProps<T>,\n collection: Collection<Node<T>>,\n comboBoxRef: RefObject<HTMLDivElement | null>\n}\n\nfunction ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {\n let {\n name,\n formValue = 'key',\n allowsCustomValue\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n defaultFilter: props.defaultFilter || contains,\n ...props,\n // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)\n items: props.items,\n children: undefined,\n collection,\n validationBehavior\n });\n\n let buttonRef = useRef<HTMLButtonElement>(null);\n let inputRef = useRef<HTMLInputElement>(null);\n let listBoxRef = useRef<HTMLDivElement>(null);\n let popoverRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useComboBox({\n ...removeDataAttributes(props),\n label,\n inputRef,\n buttonRef,\n listBoxRef,\n popoverRef,\n name: formValue === 'text' ? name : undefined,\n validationBehavior\n }, state);\n\n // Make menu width match input + button\n let [menuWidth, setMenuWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (inputRef.current) {\n let buttonRect = buttonRef.current?.getBoundingClientRect();\n let inputRect = inputRef.current.getBoundingClientRect();\n let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;\n let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;\n setMenuWidth((maxX - minX) + 'px');\n }\n }, [buttonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: inputRef,\n onResize: onResize\n });\n\n // Only expose a subset of state to renderProps function to avoid infinite render loop\n let renderPropsState = useMemo(() => ({\n isOpen: state.isOpen,\n isDisabled: props.isDisabled || false,\n isInvalid: validation.isInvalid || false,\n isRequired: props.isRequired || false\n }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);\n\n let renderProps = useRenderProps({\n ...props,\n values: renderPropsState,\n defaultClassName: 'react-aria-ComboBox'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [ComboBoxStateContext, state],\n [LabelContext, {...labelProps, ref: labelRef}],\n [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],\n [InputContext, {...inputProps, ref: inputRef}],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n ref: popoverRef,\n triggerRef: inputRef,\n scrollRef: listBoxRef,\n placement: 'bottom start',\n isNonModal: true,\n trigger: 'ComboBox',\n style: {'--trigger-width': menuWidth} as React.CSSProperties,\n clearContexts: CLEAR_CONTEXTS\n }],\n [ListBoxContext, {...listBoxProps, ref: listBoxRef}],\n [ListStateContext, state],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focused={state.isFocused || undefined}\n data-open={state.isOpen || undefined}\n data-disabled={props.isDisabled || undefined}\n data-invalid={validation.isInvalid || undefined}\n data-required={props.isRequired || undefined} />\n {name && formValue === 'key' && <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RACValidation,\n removeDataAttributes,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps,\n useSlot,\n useSlottedContext\n} from './utils';\nimport {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {ListBoxContext, ListStateContext} from './ListBox';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface ComboBoxRenderProps {\n /**\n * Whether the combobox is currently open.\n * @selector [data-open]\n */\n isOpen: boolean,\n /**\n * Whether the combobox is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the combobox is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the combobox is required.\n * @selector [data-required]\n */\n isRequired: boolean\n}\n\nexport interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-ComboBox'\n */\n className?: ClassNameOrFunction<ComboBoxRenderProps>,\n /** The filter function used to determine if a option should be included in the combo box list. */\n defaultFilter?: (textValue: string, inputValue: string) => boolean,\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form.\n * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n * @default 'key'\n */\n formValue?: 'text' | 'key',\n /** Whether the combo box allows the menu to be open when the collection is empty. */\n allowsEmptyCollection?: boolean\n}\n\nexport const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);\nexport const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);\n\n/**\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ComboBoxContext);\n let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;\n let content = useMemo(() => (\n <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>\n {typeof children === 'function'\n ? children({\n isOpen: false,\n isDisabled,\n isInvalid,\n isRequired,\n defaultChildren: null\n })\n : children}\n </ListBoxContext.Provider>\n ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);\n\n return (\n <CollectionBuilder content={content}>\n {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}\n </CollectionBuilder>\n );\n});\n\n// Contexts to clear inside the popover.\nconst CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];\n\ninterface ComboBoxInnerProps<T extends object> {\n props: ComboBoxProps<T>,\n collection: Collection<Node<T>>,\n comboBoxRef: RefObject<HTMLDivElement | null>\n}\n\nfunction ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {\n let {\n name,\n formValue = 'key',\n allowsCustomValue\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n ...props,\n defaultFilter: props.defaultFilter || contains,\n // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)\n items: props.items,\n children: undefined,\n collection,\n validationBehavior\n });\n\n let buttonRef = useRef<HTMLButtonElement>(null);\n let inputRef = useRef<HTMLInputElement>(null);\n let listBoxRef = useRef<HTMLDivElement>(null);\n let popoverRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useComboBox({\n ...removeDataAttributes(props),\n label,\n inputRef,\n buttonRef,\n listBoxRef,\n popoverRef,\n name: formValue === 'text' ? name : undefined,\n validationBehavior\n }, state);\n\n // Make menu width match input + button\n let [menuWidth, setMenuWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (inputRef.current) {\n let buttonRect = buttonRef.current?.getBoundingClientRect();\n let inputRect = inputRef.current.getBoundingClientRect();\n let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;\n let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;\n setMenuWidth((maxX - minX) + 'px');\n }\n }, [buttonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: inputRef,\n onResize: onResize\n });\n\n // Only expose a subset of state to renderProps function to avoid infinite render loop\n let renderPropsState = useMemo(() => ({\n isOpen: state.isOpen,\n isDisabled: props.isDisabled || false,\n isInvalid: validation.isInvalid || false,\n isRequired: props.isRequired || false\n }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);\n\n let renderProps = useRenderProps({\n ...props,\n values: renderPropsState,\n defaultClassName: 'react-aria-ComboBox'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [ComboBoxStateContext, state],\n [LabelContext, {...labelProps, ref: labelRef}],\n [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],\n [InputContext, {...inputProps, ref: inputRef}],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n ref: popoverRef,\n triggerRef: inputRef,\n scrollRef: listBoxRef,\n placement: 'bottom start',\n isNonModal: true,\n trigger: 'ComboBox',\n style: {'--trigger-width': menuWidth} as React.CSSProperties,\n clearContexts: CLEAR_CONTEXTS\n }],\n [ListBoxContext, {...listBoxProps, ref: listBoxRef}],\n [ListStateContext, state],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n [FieldErrorContext, validation]\n ]}>\n <dom.div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focused={state.isFocused || undefined}\n data-open={state.isOpen || undefined}\n data-disabled={props.isDisabled || undefined}\n data-invalid={validation.isInvalid || undefined}\n data-required={props.isRequired || undefined} />\n {name && formValue === 'key' && <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.main.js.map"}
|
package/dist/ComboBox.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ButtonContext as $d2b4bc8c273e7be6$export$24d547caef80ccd1} from "./Button.mjs";
|
|
2
|
-
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.mjs";
|
|
2
|
+
import {dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.mjs";
|
|
3
3
|
import {FieldErrorContext as $ee014567cb39d3f0$export$ff05c3ac10437e03} from "./FieldError.mjs";
|
|
4
4
|
import {FormContext as $d3e0e05bdfcf66bd$export$c24727297075ec6a} from "./Form.mjs";
|
|
5
5
|
import {GroupContext as $a049562f99e7db0e$export$f9c6924e160136d1} from "./Group.mjs";
|
|
@@ -93,8 +93,8 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collect
|
|
|
93
93
|
sensitivity: 'base'
|
|
94
94
|
});
|
|
95
95
|
let state = (0, $cP7hC$useComboBoxState)({
|
|
96
|
-
defaultFilter: props.defaultFilter || contains,
|
|
97
96
|
...props,
|
|
97
|
+
defaultFilter: props.defaultFilter || contains,
|
|
98
98
|
// If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
|
|
99
99
|
items: props.items,
|
|
100
100
|
children: undefined,
|
|
@@ -237,7 +237,7 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collect
|
|
|
237
237
|
validation
|
|
238
238
|
]
|
|
239
239
|
]
|
|
240
|
-
}, /*#__PURE__*/ (0, $cP7hC$react).createElement(
|
|
240
|
+
}, /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
241
241
|
...DOMProps,
|
|
242
242
|
...renderProps,
|
|
243
243
|
ref: ref,
|
package/dist/ComboBox.module.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {ButtonContext as $d2b4bc8c273e7be6$export$24d547caef80ccd1} from "./Button.module.js";
|
|
2
|
-
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.module.js";
|
|
2
|
+
import {dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.module.js";
|
|
3
3
|
import {FieldErrorContext as $ee014567cb39d3f0$export$ff05c3ac10437e03} from "./FieldError.module.js";
|
|
4
4
|
import {FormContext as $d3e0e05bdfcf66bd$export$c24727297075ec6a} from "./Form.module.js";
|
|
5
5
|
import {GroupContext as $a049562f99e7db0e$export$f9c6924e160136d1} from "./Group.module.js";
|
|
@@ -93,8 +93,8 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collect
|
|
|
93
93
|
sensitivity: 'base'
|
|
94
94
|
});
|
|
95
95
|
let state = (0, $cP7hC$useComboBoxState)({
|
|
96
|
-
defaultFilter: props.defaultFilter || contains,
|
|
97
96
|
...props,
|
|
97
|
+
defaultFilter: props.defaultFilter || contains,
|
|
98
98
|
// If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
|
|
99
99
|
items: props.items,
|
|
100
100
|
children: undefined,
|
|
@@ -237,7 +237,7 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collect
|
|
|
237
237
|
validation
|
|
238
238
|
]
|
|
239
239
|
]
|
|
240
|
-
}, /*#__PURE__*/ (0, $cP7hC$react).createElement(
|
|
240
|
+
}, /*#__PURE__*/ (0, $cP7hC$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
241
241
|
...DOMProps,
|
|
242
242
|
...renderProps,
|
|
243
243
|
ref: ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {\n ClassNameOrFunction,\n ContextValue,\n Provider,\n RACValidation,\n removeDataAttributes,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps,\n useSlot,\n useSlottedContext\n} from './utils';\nimport {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {ListBoxContext, ListStateContext} from './ListBox';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface ComboBoxRenderProps {\n /**\n * Whether the combobox is currently open.\n * @selector [data-open]\n */\n isOpen: boolean,\n /**\n * Whether the combobox is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the combobox is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the combobox is required.\n * @selector [data-required]\n */\n isRequired: boolean\n}\n\nexport interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-ComboBox'\n */\n className?: ClassNameOrFunction<ComboBoxRenderProps>,\n /** The filter function used to determine if a option should be included in the combo box list. */\n defaultFilter?: (textValue: string, inputValue: string) => boolean,\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form.\n * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n * @default 'key'\n */\n formValue?: 'text' | 'key',\n /** Whether the combo box allows the menu to be open when the collection is empty. */\n allowsEmptyCollection?: boolean\n}\n\nexport const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);\nexport const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);\n\n/**\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ComboBoxContext);\n let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;\n let content = useMemo(() => (\n <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>\n {typeof children === 'function'\n ? children({\n isOpen: false,\n isDisabled,\n isInvalid,\n isRequired,\n defaultChildren: null\n })\n : children}\n </ListBoxContext.Provider>\n ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);\n\n return (\n <CollectionBuilder content={content}>\n {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}\n </CollectionBuilder>\n );\n});\n\n// Contexts to clear inside the popover.\nconst CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];\n\ninterface ComboBoxInnerProps<T extends object> {\n props: ComboBoxProps<T>,\n collection: Collection<Node<T>>,\n comboBoxRef: RefObject<HTMLDivElement | null>\n}\n\nfunction ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {\n let {\n name,\n formValue = 'key',\n allowsCustomValue\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n defaultFilter: props.defaultFilter || contains,\n ...props,\n // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)\n items: props.items,\n children: undefined,\n collection,\n validationBehavior\n });\n\n let buttonRef = useRef<HTMLButtonElement>(null);\n let inputRef = useRef<HTMLInputElement>(null);\n let listBoxRef = useRef<HTMLDivElement>(null);\n let popoverRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useComboBox({\n ...removeDataAttributes(props),\n label,\n inputRef,\n buttonRef,\n listBoxRef,\n popoverRef,\n name: formValue === 'text' ? name : undefined,\n validationBehavior\n }, state);\n\n // Make menu width match input + button\n let [menuWidth, setMenuWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (inputRef.current) {\n let buttonRect = buttonRef.current?.getBoundingClientRect();\n let inputRect = inputRef.current.getBoundingClientRect();\n let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;\n let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;\n setMenuWidth((maxX - minX) + 'px');\n }\n }, [buttonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: inputRef,\n onResize: onResize\n });\n\n // Only expose a subset of state to renderProps function to avoid infinite render loop\n let renderPropsState = useMemo(() => ({\n isOpen: state.isOpen,\n isDisabled: props.isDisabled || false,\n isInvalid: validation.isInvalid || false,\n isRequired: props.isRequired || false\n }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);\n\n let renderProps = useRenderProps({\n ...props,\n values: renderPropsState,\n defaultClassName: 'react-aria-ComboBox'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [ComboBoxStateContext, state],\n [LabelContext, {...labelProps, ref: labelRef}],\n [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],\n [InputContext, {...inputProps, ref: inputRef}],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n ref: popoverRef,\n triggerRef: inputRef,\n scrollRef: listBoxRef,\n placement: 'bottom start',\n isNonModal: true,\n trigger: 'ComboBox',\n style: {'--trigger-width': menuWidth} as React.CSSProperties,\n clearContexts: CLEAR_CONTEXTS\n }],\n [ListBoxContext, {...listBoxProps, ref: listBoxRef}],\n [ListStateContext, state],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focused={state.isFocused || undefined}\n data-open={state.isOpen || undefined}\n data-disabled={props.isDisabled || undefined}\n data-invalid={validation.isInvalid || undefined}\n data-required={props.isRequired || undefined} />\n {name && formValue === 'key' && <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RACValidation,\n removeDataAttributes,\n RenderProps,\n SlotProps,\n useContextProps,\n useRenderProps,\n useSlot,\n useSlottedContext\n} from './utils';\nimport {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport {ListBoxContext, ListStateContext} from './ListBox';\nimport {OverlayTriggerStateContext} from './Dialog';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface ComboBoxRenderProps {\n /**\n * Whether the combobox is currently open.\n * @selector [data-open]\n */\n isOpen: boolean,\n /**\n * Whether the combobox is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the combobox is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the combobox is required.\n * @selector [data-required]\n */\n isRequired: boolean\n}\n\nexport interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-ComboBox'\n */\n className?: ClassNameOrFunction<ComboBoxRenderProps>,\n /** The filter function used to determine if a option should be included in the combo box list. */\n defaultFilter?: (textValue: string, inputValue: string) => boolean,\n /**\n * Whether the text or key of the selected item is submitted as part of an HTML form.\n * When `allowsCustomValue` is `true`, this option does not apply and the text is always submitted.\n * @default 'key'\n */\n formValue?: 'text' | 'key',\n /** Whether the combo box allows the menu to be open when the collection is empty. */\n allowsEmptyCollection?: boolean\n}\n\nexport const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);\nexport const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);\n\n/**\n * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.\n */\nexport const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, ComboBoxContext);\n let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;\n let content = useMemo(() => (\n <ListBoxContext.Provider value={{items: props.items ?? props.defaultItems}}>\n {typeof children === 'function'\n ? children({\n isOpen: false,\n isDisabled,\n isInvalid,\n isRequired,\n defaultChildren: null\n })\n : children}\n </ListBoxContext.Provider>\n ), [children, isDisabled, isInvalid, isRequired, props.items, props.defaultItems]);\n\n return (\n <CollectionBuilder content={content}>\n {collection => <ComboBoxInner props={props} collection={collection} comboBoxRef={ref} />}\n </CollectionBuilder>\n );\n});\n\n// Contexts to clear inside the popover.\nconst CLEAR_CONTEXTS = [LabelContext, ButtonContext, InputContext, GroupContext, TextContext];\n\ninterface ComboBoxInnerProps<T extends object> {\n props: ComboBoxProps<T>,\n collection: Collection<Node<T>>,\n comboBoxRef: RefObject<HTMLDivElement | null>\n}\n\nfunction ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}: ComboBoxInnerProps<T>) {\n let {\n name,\n formValue = 'key',\n allowsCustomValue\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState({\n ...props,\n defaultFilter: props.defaultFilter || contains,\n // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)\n items: props.items,\n children: undefined,\n collection,\n validationBehavior\n });\n\n let buttonRef = useRef<HTMLButtonElement>(null);\n let inputRef = useRef<HTMLInputElement>(null);\n let listBoxRef = useRef<HTMLDivElement>(null);\n let popoverRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n buttonProps,\n inputProps,\n listBoxProps,\n labelProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useComboBox({\n ...removeDataAttributes(props),\n label,\n inputRef,\n buttonRef,\n listBoxRef,\n popoverRef,\n name: formValue === 'text' ? name : undefined,\n validationBehavior\n }, state);\n\n // Make menu width match input + button\n let [menuWidth, setMenuWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (inputRef.current) {\n let buttonRect = buttonRef.current?.getBoundingClientRect();\n let inputRect = inputRef.current.getBoundingClientRect();\n let minX = buttonRect ? Math.min(buttonRect.left, inputRect.left) : inputRect.left;\n let maxX = buttonRect ? Math.max(buttonRect.right, inputRect.right) : inputRect.right;\n setMenuWidth((maxX - minX) + 'px');\n }\n }, [buttonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: inputRef,\n onResize: onResize\n });\n\n // Only expose a subset of state to renderProps function to avoid infinite render loop\n let renderPropsState = useMemo(() => ({\n isOpen: state.isOpen,\n isDisabled: props.isDisabled || false,\n isInvalid: validation.isInvalid || false,\n isRequired: props.isRequired || false\n }), [state.isOpen, props.isDisabled, validation.isInvalid, props.isRequired]);\n\n let renderProps = useRenderProps({\n ...props,\n values: renderPropsState,\n defaultClassName: 'react-aria-ComboBox'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [ComboBoxStateContext, state],\n [LabelContext, {...labelProps, ref: labelRef}],\n [ButtonContext, {...buttonProps, ref: buttonRef, isPressed: state.isOpen}],\n [InputContext, {...inputProps, ref: inputRef}],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n ref: popoverRef,\n triggerRef: inputRef,\n scrollRef: listBoxRef,\n placement: 'bottom start',\n isNonModal: true,\n trigger: 'ComboBox',\n style: {'--trigger-width': menuWidth} as React.CSSProperties,\n clearContexts: CLEAR_CONTEXTS\n }],\n [ListBoxContext, {...listBoxProps, ref: listBoxRef}],\n [ListStateContext, state],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [GroupContext, {isInvalid: validation.isInvalid, isDisabled: props.isDisabled || false}],\n [FieldErrorContext, validation]\n ]}>\n <dom.div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focused={state.isFocused || undefined}\n data-open={state.isOpen || undefined}\n data-disabled={props.isDisabled || undefined}\n data-invalid={validation.isInvalid || undefined}\n data-required={props.isRequired || undefined} />\n {name && formValue === 'key' && <input type=\"hidden\" name={name} form={props.form} value={state.selectedKey ?? ''} />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.module.js.map"}
|
package/dist/DateField.main.js
CHANGED
|
@@ -135,7 +135,7 @@ const $9eb4e1c2268ca198$export$d9781c7894a82487 = /*#__PURE__*/ (0, $hucUZ$react
|
|
|
135
135
|
validation
|
|
136
136
|
]
|
|
137
137
|
]
|
|
138
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hucUZ$react))).createElement(
|
|
138
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hucUZ$react))).createElement((0, $c5ccf687772c0422$exports.dom).div, {
|
|
139
139
|
...DOMProps,
|
|
140
140
|
...renderProps,
|
|
141
141
|
ref: ref,
|
|
@@ -228,7 +228,7 @@ const $9eb4e1c2268ca198$export$5eaee2322dd727eb = /*#__PURE__*/ (0, $hucUZ$react
|
|
|
228
228
|
validation
|
|
229
229
|
]
|
|
230
230
|
]
|
|
231
|
-
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hucUZ$react))).createElement(
|
|
231
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($hucUZ$react))).createElement((0, $c5ccf687772c0422$exports.dom).div, {
|
|
232
232
|
...DOMProps,
|
|
233
233
|
...renderProps,
|
|
234
234
|
ref: ref,
|
|
@@ -335,7 +335,7 @@ const $9eb4e1c2268ca198$export$336ab7fa954c4b5f = /*#__PURE__*/ (0, $hucUZ$react
|
|
|
335
335
|
defaultChildren: segment.text,
|
|
336
336
|
defaultClassName: 'react-aria-DateSegment'
|
|
337
337
|
});
|
|
338
|
-
return /*#__PURE__*/ (0, ($parcel$interopDefault($hucUZ$react))).createElement(
|
|
338
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($hucUZ$react))).createElement((0, $c5ccf687772c0422$exports.dom).span, {
|
|
339
339
|
...(0, $hucUZ$reactaria.mergeProps)((0, $hucUZ$reactariautils.filterDOMProps)(otherProps, {
|
|
340
340
|
global: true
|
|
341
341
|
}), segmentProps, focusProps, hoverProps),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/DateField.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaDateFieldProps, AriaTimeFieldProps, DateValue, HoverEvents, mergeProps, TimeValue, useDateField, useDateSegment, useFocusRing, useHover, useLocale, useTimeField} from 'react-aria';\nimport {\n ClassNameOrFunction,\n ContextValue,\n Provider,\n RACValidation,\n removeDataAttributes,\n RenderProps,\n SlotProps,\n StyleRenderProps,\n useContextProps,\n useRenderProps,\n useSlot,\n useSlottedContext\n} from './utils';\nimport {createCalendar} from '@internationalized/date';\nimport {DateFieldState, DateSegmentType, DateSegment as IDateSegment, TimeFieldState, useDateFieldState, useTimeFieldState} from 'react-stately';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useObjectRef} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {Group, GroupContext} from './Group';\nimport {HiddenDateInput} from './HiddenDateInput';\nimport {Input, InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport React, {cloneElement, createContext, ForwardedRef, forwardRef, JSX, ReactElement, useContext, useRef} from 'react';\nimport {TextContext} from './Text';\n\nexport interface DateFieldRenderProps {\n /**\n * State of the date field.\n */\n state: DateFieldState,\n /**\n * Whether the date field is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the date field is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the date field is read only.\n * @selector [data-readonly]\n */\n isReadOnly: boolean\n}\nexport interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-DateField'\n */\n className?: ClassNameOrFunction<DateFieldRenderProps>\n}\nexport interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-TimeField'\n */\n className?: ClassNameOrFunction<DateFieldRenderProps>\n}\n\nexport const DateFieldContext = createContext<ContextValue<DateFieldProps<any>, HTMLDivElement>>(null);\nexport const TimeFieldContext = createContext<ContextValue<TimeFieldProps<any>, HTMLDivElement>>(null);\nexport const DateFieldStateContext = createContext<DateFieldState | null>(null);\nexport const TimeFieldStateContext = createContext<TimeFieldState | null>(null);\n\n/**\n * A date field allows users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DateFieldContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {locale} = useLocale();\n let state = useDateFieldState({\n ...props,\n locale,\n createCalendar,\n validationBehavior\n });\n\n let fieldRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useDateField({\n ...removeDataAttributes(props),\n label,\n inputRef,\n validationBehavior\n }, state, fieldRef);\n\n let renderProps = useRenderProps({\n ...removeDataAttributes(props),\n values: {\n state,\n isInvalid: state.isInvalid,\n isDisabled: state.isDisabled,\n isReadOnly: state.isReadOnly\n },\n defaultClassName: 'react-aria-DateField'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DateFieldStateContext, state],\n [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],\n [InputContext, {...inputProps, ref: inputRef}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-invalid={state.isInvalid || undefined}\n data-disabled={state.isDisabled || undefined}\n data-readonly={state.isReadOnly || undefined} />\n <HiddenDateInput\n autoComplete={props.autoComplete}\n name={props.name}\n isDisabled={props.isDisabled}\n state={state} />\n </Provider>\n );\n});\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n * Each part of a time value is displayed in an individually editable segment.\n */\nexport const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TimeFieldContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {locale} = useLocale();\n let state = useTimeFieldState({\n ...props,\n locale,\n validationBehavior\n });\n\n let fieldRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useTimeField({\n ...removeDataAttributes(props),\n label,\n inputRef,\n validationBehavior\n }, state, fieldRef);\n\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isInvalid: state.isInvalid,\n isDisabled: state.isDisabled,\n isReadOnly: state.isReadOnly\n },\n defaultClassName: 'react-aria-TimeField'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [TimeFieldStateContext, state],\n [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],\n [InputContext, {...inputProps, ref: inputRef}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-invalid={state.isInvalid || undefined}\n data-disabled={state.isDisabled || undefined}\n data-readonly={state.isReadOnly || undefined} />\n </Provider>\n );\n});\n\nexport interface DateInputRenderProps {\n /**\n * Whether the date input is currently hovered with a mouse.\n * @selector [data-hovered]\n */\n isHovered: boolean,\n /**\n * Whether an element within the date input is focused, either via a mouse or keyboard.\n * @selector [data-focus-within]\n */\n isFocusWithin: boolean,\n /**\n * Whether an element within the date input is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the date input is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n\n /**\n * Whether the date input is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean\n}\n\nexport interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-DateInput'\n */\n className?: ClassNameOrFunction<DateInputRenderProps>,\n children: (segment: IDateSegment) => ReactElement\n}\n\n/**\n * A date input groups the editable date segments within a date field.\n */\nexport const DateInput = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateInput(props: DateInputProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {\n // If state is provided by DateField/TimeField, just render.\n // Otherwise (e.g. in DatePicker), we need to call hooks and create state ourselves.\n let dateFieldState = useContext(DateFieldStateContext);\n let timeFieldState = useContext(TimeFieldStateContext);\n return dateFieldState || timeFieldState\n ? <DateInputInner {...props} ref={ref} />\n : <DateInputStandalone {...props} ref={ref} />;\n});\n\nconst DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef<HTMLDivElement>) => {\n let [dateFieldProps, fieldRef] = useContextProps({slot: props.slot} as DateFieldProps<any>, ref, DateFieldContext);\n let {locale} = useLocale();\n let state = useDateFieldState({\n ...dateFieldProps,\n locale,\n createCalendar\n });\n\n let inputRef = useRef<HTMLInputElement>(null);\n let {fieldProps, inputProps} = useDateField({...dateFieldProps, inputRef}, state, fieldRef);\n\n return (\n <Provider\n values={[\n [DateFieldStateContext, state],\n [InputContext, {...inputProps, ref: inputRef}],\n [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}]\n ]}>\n <DateInputInner {...props} />\n </Provider>\n );\n});\n\nconst DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTMLDivElement>) => {\n let {className, children} = props;\n let dateFieldState = useContext(DateFieldStateContext);\n let timeFieldState = useContext(TimeFieldStateContext);\n let state = dateFieldState ?? timeFieldState!;\n\n return (\n <>\n <Group\n {...props}\n ref={ref}\n slot={props.slot || undefined}\n className={className ?? 'react-aria-DateInput'}\n isReadOnly={state.isReadOnly}\n isInvalid={state.isInvalid}\n isDisabled={state.isDisabled}>\n {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}\n </Group>\n <Input className=\"\" />\n </>\n );\n});\n\nexport interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'> {\n /**\n * Whether the segment is currently hovered with a mouse.\n * @selector [data-hovered]\n */\n isHovered: boolean,\n /**\n * Whether the segment is focused, either via a mouse or keyboard.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the segment is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the value is a placeholder.\n * @selector [data-placeholder]\n */\n isPlaceholder: boolean,\n /**\n * Whether the segment is read only.\n * @selector [data-readonly]\n */\n isReadOnly: boolean,\n /**\n * Whether the date field is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the date field is in an invalid state.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * The type of segment. Values include `literal`, `year`, `month`, `day`, etc.\n * @selector [data-type=\"...\"]\n */\n type: DateSegmentType\n}\n\nexport interface DateSegmentProps extends RenderProps<DateSegmentRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLSpanElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-DateSegment'\n */\n className?: ClassNameOrFunction<DateSegmentRenderProps>,\n segment: IDateSegment\n}\n\n/**\n * A date segment displays an individual unit of a date and time, and allows users to edit\n * the value by typing or using the arrow keys to increment and decrement.\n */\nexport const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLSpanElement>) {\n let dateFieldState = useContext(DateFieldStateContext);\n let timeFieldState = useContext(TimeFieldStateContext);\n let state = dateFieldState ?? timeFieldState!;\n let domRef = useObjectRef(ref);\n let {segmentProps} = useDateSegment(segment, state, domRef);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: state.isDisabled || segment.type === 'literal'});\n let renderProps = useRenderProps({\n ...otherProps,\n values: {\n ...segment,\n isReadOnly: state.isReadOnly,\n isInvalid: state.isInvalid,\n isDisabled: state.isDisabled,\n isHovered,\n isFocused,\n isFocusVisible\n },\n defaultChildren: segment.text,\n defaultClassName: 'react-aria-DateSegment'\n });\n\n return (\n <span\n {...mergeProps(filterDOMProps(otherProps, {global: true}), segmentProps, focusProps, hoverProps)}\n {...renderProps}\n style={segmentProps.style}\n ref={domRef}\n data-placeholder={segment.isPlaceholder || undefined}\n data-invalid={state.isInvalid || undefined}\n data-readonly={state.isReadOnly || undefined}\n data-disabled={state.isDisabled || undefined}\n data-type={segment.type}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"DateField.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/DateField.tsx"],"sourcesContent":["/*\n * Copyright 2022 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {AriaDateFieldProps, AriaTimeFieldProps, DateValue, HoverEvents, mergeProps, TimeValue, useDateField, useDateSegment, useFocusRing, useHover, useLocale, useTimeField} from 'react-aria';\nimport {\n ClassNameOrFunction,\n ContextValue,\n dom,\n Provider,\n RACValidation,\n removeDataAttributes,\n RenderProps,\n SlotProps,\n StyleRenderProps,\n useContextProps,\n useRenderProps,\n useSlot,\n useSlottedContext\n} from './utils';\nimport {createCalendar} from '@internationalized/date';\nimport {DateFieldState, DateSegmentType, DateSegment as IDateSegment, TimeFieldState, useDateFieldState, useTimeFieldState} from 'react-stately';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useObjectRef} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';\nimport {Group, GroupContext} from './Group';\nimport {HiddenDateInput} from './HiddenDateInput';\nimport {Input, InputContext} from './Input';\nimport {LabelContext} from './Label';\nimport React, {cloneElement, createContext, ForwardedRef, forwardRef, JSX, ReactElement, useContext, useRef} from 'react';\nimport {TextContext} from './Text';\n\nexport interface DateFieldRenderProps {\n /**\n * State of the date field.\n */\n state: DateFieldState,\n /**\n * Whether the date field is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the date field is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the date field is read only.\n * @selector [data-readonly]\n */\n isReadOnly: boolean\n}\nexport interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-DateField'\n */\n className?: ClassNameOrFunction<DateFieldRenderProps>\n}\nexport interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-TimeField'\n */\n className?: ClassNameOrFunction<DateFieldRenderProps>\n}\n\nexport const DateFieldContext = createContext<ContextValue<DateFieldProps<any>, HTMLDivElement>>(null);\nexport const TimeFieldContext = createContext<ContextValue<TimeFieldProps<any>, HTMLDivElement>>(null);\nexport const DateFieldStateContext = createContext<DateFieldState | null>(null);\nexport const TimeFieldStateContext = createContext<TimeFieldState | null>(null);\n\n/**\n * A date field allows users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DateFieldContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {locale} = useLocale();\n let state = useDateFieldState({\n ...props,\n locale,\n createCalendar,\n validationBehavior\n });\n\n let fieldRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useDateField({\n ...removeDataAttributes(props),\n label,\n inputRef,\n validationBehavior\n }, state, fieldRef);\n\n let renderProps = useRenderProps({\n ...removeDataAttributes(props),\n values: {\n state,\n isInvalid: state.isInvalid,\n isDisabled: state.isDisabled,\n isReadOnly: state.isReadOnly\n },\n defaultClassName: 'react-aria-DateField'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DateFieldStateContext, state],\n [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],\n [InputContext, {...inputProps, ref: inputRef}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <dom.div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-invalid={state.isInvalid || undefined}\n data-disabled={state.isDisabled || undefined}\n data-readonly={state.isReadOnly || undefined} />\n <HiddenDateInput\n autoComplete={props.autoComplete}\n name={props.name}\n isDisabled={props.isDisabled}\n state={state} />\n </Provider>\n );\n});\n\n/**\n * A time field allows users to enter and edit time values using a keyboard.\n * Each part of a time value is displayed in an individually editable segment.\n */\nexport const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, TimeFieldContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let {locale} = useLocale();\n let state = useTimeFieldState({\n ...props,\n locale,\n validationBehavior\n });\n\n let fieldRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let inputRef = useRef<HTMLInputElement>(null);\n let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, ...validation} = useTimeField({\n ...removeDataAttributes(props),\n label,\n inputRef,\n validationBehavior\n }, state, fieldRef);\n\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isInvalid: state.isInvalid,\n isDisabled: state.isDisabled,\n isReadOnly: state.isReadOnly\n },\n defaultClassName: 'react-aria-TimeField'\n });\n\n let DOMProps = filterDOMProps(props, {global: true});\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [TimeFieldStateContext, state],\n [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}],\n [InputContext, {...inputProps, ref: inputRef}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <dom.div\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-invalid={state.isInvalid || undefined}\n data-disabled={state.isDisabled || undefined}\n data-readonly={state.isReadOnly || undefined} />\n </Provider>\n );\n});\n\nexport interface DateInputRenderProps {\n /**\n * Whether the date input is currently hovered with a mouse.\n * @selector [data-hovered]\n */\n isHovered: boolean,\n /**\n * Whether an element within the date input is focused, either via a mouse or keyboard.\n * @selector [data-focus-within]\n */\n isFocusWithin: boolean,\n /**\n * Whether an element within the date input is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the date input is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n\n /**\n * Whether the date input is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean\n}\n\nexport interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRenderProps>, GlobalDOMAttributes<HTMLDivElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-DateInput'\n */\n className?: ClassNameOrFunction<DateInputRenderProps>,\n children: (segment: IDateSegment) => ReactElement\n}\n\n/**\n * A date input groups the editable date segments within a date field.\n */\nexport const DateInput = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateInput(props: DateInputProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {\n // If state is provided by DateField/TimeField, just render.\n // Otherwise (e.g. in DatePicker), we need to call hooks and create state ourselves.\n let dateFieldState = useContext(DateFieldStateContext);\n let timeFieldState = useContext(TimeFieldStateContext);\n return dateFieldState || timeFieldState\n ? <DateInputInner {...props} ref={ref} />\n : <DateInputStandalone {...props} ref={ref} />;\n});\n\nconst DateInputStandalone = forwardRef((props: DateInputProps, ref: ForwardedRef<HTMLDivElement>) => {\n let [dateFieldProps, fieldRef] = useContextProps({slot: props.slot} as DateFieldProps<any>, ref, DateFieldContext);\n let {locale} = useLocale();\n let state = useDateFieldState({\n ...dateFieldProps,\n locale,\n createCalendar\n });\n\n let inputRef = useRef<HTMLInputElement>(null);\n let {fieldProps, inputProps} = useDateField({...dateFieldProps, inputRef}, state, fieldRef);\n\n return (\n <Provider\n values={[\n [DateFieldStateContext, state],\n [InputContext, {...inputProps, ref: inputRef}],\n [GroupContext, {...fieldProps, ref: fieldRef, isInvalid: state.isInvalid, isDisabled: state.isDisabled}]\n ]}>\n <DateInputInner {...props} />\n </Provider>\n );\n});\n\nconst DateInputInner = forwardRef((props: DateInputProps, ref: ForwardedRef<HTMLDivElement>) => {\n let {className, children} = props;\n let dateFieldState = useContext(DateFieldStateContext);\n let timeFieldState = useContext(TimeFieldStateContext);\n let state = dateFieldState ?? timeFieldState!;\n\n return (\n <>\n <Group\n {...props}\n ref={ref}\n slot={props.slot || undefined}\n className={className ?? 'react-aria-DateInput'}\n isReadOnly={state.isReadOnly}\n isInvalid={state.isInvalid}\n isDisabled={state.isDisabled}>\n {state.segments.map((segment, i) => cloneElement(children(segment), {key: i}))}\n </Group>\n <Input className=\"\" />\n </>\n );\n});\n\nexport interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'> {\n /**\n * Whether the segment is currently hovered with a mouse.\n * @selector [data-hovered]\n */\n isHovered: boolean,\n /**\n * Whether the segment is focused, either via a mouse or keyboard.\n * @selector [data-focused]\n */\n isFocused: boolean,\n /**\n * Whether the segment is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the value is a placeholder.\n * @selector [data-placeholder]\n */\n isPlaceholder: boolean,\n /**\n * Whether the segment is read only.\n * @selector [data-readonly]\n */\n isReadOnly: boolean,\n /**\n * Whether the date field is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the date field is in an invalid state.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * The type of segment. Values include `literal`, `year`, `month`, `day`, etc.\n * @selector [data-type=\"...\"]\n */\n type: DateSegmentType\n}\n\nexport interface DateSegmentProps extends RenderProps<DateSegmentRenderProps, 'span'>, HoverEvents, GlobalDOMAttributes<HTMLSpanElement> {\n /**\n * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.\n * @default 'react-aria-DateSegment'\n */\n className?: ClassNameOrFunction<DateSegmentRenderProps>,\n segment: IDateSegment\n}\n\n/**\n * A date segment displays an individual unit of a date and time, and allows users to edit\n * the value by typing or using the arrow keys to increment and decrement.\n */\nexport const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLSpanElement>) {\n let dateFieldState = useContext(DateFieldStateContext);\n let timeFieldState = useContext(TimeFieldStateContext);\n let state = dateFieldState ?? timeFieldState!;\n let domRef = useObjectRef(ref);\n let {segmentProps} = useDateSegment(segment, state, domRef);\n let {focusProps, isFocused, isFocusVisible} = useFocusRing();\n let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: state.isDisabled || segment.type === 'literal'});\n let renderProps = useRenderProps({\n ...otherProps,\n values: {\n ...segment,\n isReadOnly: state.isReadOnly,\n isInvalid: state.isInvalid,\n isDisabled: state.isDisabled,\n isHovered,\n isFocused,\n isFocusVisible\n },\n defaultChildren: segment.text,\n defaultClassName: 'react-aria-DateSegment'\n });\n\n return (\n <dom.span\n {...mergeProps(filterDOMProps(otherProps, {global: true}), segmentProps, focusProps, hoverProps)}\n {...renderProps}\n style={segmentProps.style}\n ref={domRef}\n data-placeholder={segment.isPlaceholder || undefined}\n data-invalid={state.isInvalid || undefined}\n data-readonly={state.isReadOnly || undefined}\n data-disabled={state.isDisabled || undefined}\n data-type={segment.type}\n data-hovered={isHovered || undefined}\n data-focused={isFocused || undefined}\n data-focus-visible={isFocusVisible || undefined} />\n );\n});\n"],"names":[],"version":3,"file":"DateField.main.js.map"}
|
package/dist/DateField.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.mjs";
|
|
1
|
+
import {dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.mjs";
|
|
2
2
|
import {FieldErrorContext as $ee014567cb39d3f0$export$ff05c3ac10437e03} from "./FieldError.mjs";
|
|
3
3
|
import {FormContext as $d3e0e05bdfcf66bd$export$c24727297075ec6a} from "./Form.mjs";
|
|
4
4
|
import {Group as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, GroupContext as $a049562f99e7db0e$export$f9c6924e160136d1} from "./Group.mjs";
|
|
@@ -118,7 +118,7 @@ const $40825cdb76e74f70$export$d9781c7894a82487 = /*#__PURE__*/ (0, $a9Sgq$forwa
|
|
|
118
118
|
validation
|
|
119
119
|
]
|
|
120
120
|
]
|
|
121
|
-
}, /*#__PURE__*/ (0, $a9Sgq$react).createElement(
|
|
121
|
+
}, /*#__PURE__*/ (0, $a9Sgq$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
122
122
|
...DOMProps,
|
|
123
123
|
...renderProps,
|
|
124
124
|
ref: ref,
|
|
@@ -211,7 +211,7 @@ const $40825cdb76e74f70$export$5eaee2322dd727eb = /*#__PURE__*/ (0, $a9Sgq$forwa
|
|
|
211
211
|
validation
|
|
212
212
|
]
|
|
213
213
|
]
|
|
214
|
-
}, /*#__PURE__*/ (0, $a9Sgq$react).createElement(
|
|
214
|
+
}, /*#__PURE__*/ (0, $a9Sgq$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
215
215
|
...DOMProps,
|
|
216
216
|
...renderProps,
|
|
217
217
|
ref: ref,
|
|
@@ -318,7 +318,7 @@ const $40825cdb76e74f70$export$336ab7fa954c4b5f = /*#__PURE__*/ (0, $a9Sgq$forwa
|
|
|
318
318
|
defaultChildren: segment.text,
|
|
319
319
|
defaultClassName: 'react-aria-DateSegment'
|
|
320
320
|
});
|
|
321
|
-
return /*#__PURE__*/ (0, $a9Sgq$react).createElement(
|
|
321
|
+
return /*#__PURE__*/ (0, $a9Sgq$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).span, {
|
|
322
322
|
...(0, $a9Sgq$mergeProps)((0, $a9Sgq$filterDOMProps)(otherProps, {
|
|
323
323
|
global: true
|
|
324
324
|
}), segmentProps, focusProps, hoverProps),
|
package/dist/DateField.module.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.module.js";
|
|
1
|
+
import {dom as $64fa3d84918910a7$export$df3a06d6289f983e, Provider as $64fa3d84918910a7$export$2881499e37b75b9a, removeDataAttributes as $64fa3d84918910a7$export$ef03459518577ad4, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlot as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.module.js";
|
|
2
2
|
import {FieldErrorContext as $ee014567cb39d3f0$export$ff05c3ac10437e03} from "./FieldError.module.js";
|
|
3
3
|
import {FormContext as $d3e0e05bdfcf66bd$export$c24727297075ec6a} from "./Form.module.js";
|
|
4
4
|
import {Group as $a049562f99e7db0e$export$eb2fcfdbd7ba97d4, GroupContext as $a049562f99e7db0e$export$f9c6924e160136d1} from "./Group.module.js";
|
|
@@ -118,7 +118,7 @@ const $40825cdb76e74f70$export$d9781c7894a82487 = /*#__PURE__*/ (0, $a9Sgq$forwa
|
|
|
118
118
|
validation
|
|
119
119
|
]
|
|
120
120
|
]
|
|
121
|
-
}, /*#__PURE__*/ (0, $a9Sgq$react).createElement(
|
|
121
|
+
}, /*#__PURE__*/ (0, $a9Sgq$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
122
122
|
...DOMProps,
|
|
123
123
|
...renderProps,
|
|
124
124
|
ref: ref,
|
|
@@ -211,7 +211,7 @@ const $40825cdb76e74f70$export$5eaee2322dd727eb = /*#__PURE__*/ (0, $a9Sgq$forwa
|
|
|
211
211
|
validation
|
|
212
212
|
]
|
|
213
213
|
]
|
|
214
|
-
}, /*#__PURE__*/ (0, $a9Sgq$react).createElement(
|
|
214
|
+
}, /*#__PURE__*/ (0, $a9Sgq$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).div, {
|
|
215
215
|
...DOMProps,
|
|
216
216
|
...renderProps,
|
|
217
217
|
ref: ref,
|
|
@@ -318,7 +318,7 @@ const $40825cdb76e74f70$export$336ab7fa954c4b5f = /*#__PURE__*/ (0, $a9Sgq$forwa
|
|
|
318
318
|
defaultChildren: segment.text,
|
|
319
319
|
defaultClassName: 'react-aria-DateSegment'
|
|
320
320
|
});
|
|
321
|
-
return /*#__PURE__*/ (0, $a9Sgq$react).createElement(
|
|
321
|
+
return /*#__PURE__*/ (0, $a9Sgq$react).createElement((0, $64fa3d84918910a7$export$df3a06d6289f983e).span, {
|
|
322
322
|
...(0, $a9Sgq$mergeProps)((0, $a9Sgq$filterDOMProps)(otherProps, {
|
|
323
323
|
global: true
|
|
324
324
|
}), segmentProps, focusProps, hoverProps),
|