react-aria-components 1.8.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Autocomplete.main.js.map +1 -1
- package/dist/Autocomplete.module.js.map +1 -1
- package/dist/Checkbox.main.js +4 -1
- package/dist/Checkbox.main.js.map +1 -1
- package/dist/Checkbox.mjs +5 -2
- package/dist/Checkbox.module.js +5 -2
- package/dist/Checkbox.module.js.map +1 -1
- package/dist/Collection.main.js +31 -7
- package/dist/Collection.main.js.map +1 -1
- package/dist/Collection.mjs +32 -9
- package/dist/Collection.module.js +32 -9
- package/dist/Collection.module.js.map +1 -1
- package/dist/ColorPicker.main.js.map +1 -1
- package/dist/ColorPicker.module.js.map +1 -1
- package/dist/ComboBox.main.js +10 -1
- package/dist/ComboBox.main.js.map +1 -1
- package/dist/ComboBox.mjs +10 -1
- package/dist/ComboBox.module.js +10 -1
- package/dist/ComboBox.module.js.map +1 -1
- package/dist/DatePicker.main.js +11 -2
- package/dist/DatePicker.main.js.map +1 -1
- package/dist/DatePicker.mjs +11 -2
- package/dist/DatePicker.module.js +11 -2
- package/dist/DatePicker.module.js.map +1 -1
- package/dist/Dialog.main.js +15 -1
- package/dist/Dialog.main.js.map +1 -1
- package/dist/Dialog.mjs +17 -3
- package/dist/Dialog.module.js +17 -3
- package/dist/Dialog.module.js.map +1 -1
- package/dist/DragAndDrop.main.js.map +1 -1
- package/dist/DragAndDrop.module.js.map +1 -1
- package/dist/GridList.main.js +59 -4
- package/dist/GridList.main.js.map +1 -1
- package/dist/GridList.mjs +60 -6
- package/dist/GridList.module.js +60 -6
- package/dist/GridList.module.js.map +1 -1
- package/dist/ListBox.main.js +61 -3
- package/dist/ListBox.main.js.map +1 -1
- package/dist/ListBox.mjs +62 -5
- package/dist/ListBox.module.js +62 -5
- package/dist/ListBox.module.js.map +1 -1
- package/dist/Menu.main.js.map +1 -1
- package/dist/Menu.module.js.map +1 -1
- package/dist/Popover.main.js +12 -2
- package/dist/Popover.main.js.map +1 -1
- package/dist/Popover.mjs +13 -3
- package/dist/Popover.module.js +13 -3
- package/dist/Popover.module.js.map +1 -1
- package/dist/RadioGroup.main.js +4 -1
- package/dist/RadioGroup.main.js.map +1 -1
- package/dist/RadioGroup.mjs +5 -2
- package/dist/RadioGroup.module.js +5 -2
- package/dist/RadioGroup.module.js.map +1 -1
- package/dist/Select.main.js +10 -2
- package/dist/Select.main.js.map +1 -1
- package/dist/Select.mjs +10 -2
- package/dist/Select.module.js +10 -2
- package/dist/Select.module.js.map +1 -1
- package/dist/Table.main.js +42 -10
- package/dist/Table.main.js.map +1 -1
- package/dist/Table.mjs +43 -11
- package/dist/Table.module.js +43 -11
- package/dist/Table.module.js.map +1 -1
- package/dist/TagGroup.main.js +1 -1
- package/dist/TagGroup.main.js.map +1 -1
- package/dist/TagGroup.mjs +1 -1
- package/dist/TagGroup.module.js +1 -1
- package/dist/TagGroup.module.js.map +1 -1
- package/dist/Tooltip.main.js.map +1 -1
- package/dist/Tooltip.module.js.map +1 -1
- package/dist/Tree.main.js +296 -18
- package/dist/Tree.main.js.map +1 -1
- package/dist/Tree.mjs +299 -21
- package/dist/Tree.module.js +299 -21
- package/dist/Tree.module.js.map +1 -1
- package/dist/TreeDropTargetDelegate.main.js +213 -0
- package/dist/TreeDropTargetDelegate.main.js.map +1 -0
- package/dist/TreeDropTargetDelegate.mjs +208 -0
- package/dist/TreeDropTargetDelegate.module.js +208 -0
- package/dist/TreeDropTargetDelegate.module.js.map +1 -0
- package/dist/Virtualizer.main.js +8 -10
- package/dist/Virtualizer.main.js.map +1 -1
- package/dist/Virtualizer.mjs +9 -11
- package/dist/Virtualizer.module.js +9 -11
- package/dist/Virtualizer.module.js.map +1 -1
- package/dist/import.mjs +5 -5
- package/dist/main.js +4 -1
- package/dist/main.js.map +1 -1
- package/dist/module.js +5 -5
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +115 -50
- package/dist/types.d.ts.map +1 -1
- package/dist/useDragAndDrop.main.js +2 -2
- package/dist/useDragAndDrop.main.js.map +1 -1
- package/dist/useDragAndDrop.mjs +2 -2
- package/dist/useDragAndDrop.module.js +2 -2
- package/dist/useDragAndDrop.module.js.map +1 -1
- package/package.json +32 -28
- package/src/Autocomplete.tsx +2 -2
- package/src/Checkbox.tsx +2 -2
- package/src/Collection.tsx +39 -5
- package/src/ColorPicker.tsx +2 -2
- package/src/ComboBox.tsx +5 -1
- package/src/DatePicker.tsx +7 -2
- package/src/Dialog.tsx +18 -4
- package/src/DragAndDrop.tsx +1 -1
- package/src/GridList.tsx +69 -7
- package/src/ListBox.tsx +70 -6
- package/src/Menu.tsx +2 -1
- package/src/Popover.tsx +21 -5
- package/src/RadioGroup.tsx +2 -2
- package/src/Select.tsx +13 -3
- package/src/Table.tsx +44 -16
- package/src/TagGroup.tsx +1 -1
- package/src/Tooltip.tsx +2 -2
- package/src/Tree.tsx +364 -38
- package/src/TreeDropTargetDelegate.ts +304 -0
- package/src/Virtualizer.tsx +9 -14
- package/src/index.ts +8 -7
- package/src/useDragAndDrop.tsx +2 -1
package/dist/ComboBox.main.js
CHANGED
|
@@ -87,6 +87,14 @@ const $1d716ce69f118fad$export$72b9695b8216309a = /*#__PURE__*/ (0, $9obPC$react
|
|
|
87
87
|
comboBoxRef: ref
|
|
88
88
|
}));
|
|
89
89
|
});
|
|
90
|
+
// Contexts to clear inside the popover.
|
|
91
|
+
const $1d716ce69f118fad$var$CLEAR_CONTEXTS = [
|
|
92
|
+
(0, $84ae0bf5bd8e2a5f$exports.LabelContext),
|
|
93
|
+
(0, $b856e6788a7ea5bf$exports.ButtonContext),
|
|
94
|
+
(0, $1bcfcef5af644e13$exports.InputContext),
|
|
95
|
+
(0, $dcae72abc18c0045$exports.GroupContext),
|
|
96
|
+
(0, $a8a589c28affdc40$exports.TextContext)
|
|
97
|
+
];
|
|
90
98
|
function $1d716ce69f118fad$var$ComboBoxInner({ props: props, collection: collection, comboBoxRef: ref }) {
|
|
91
99
|
let { name: name, formValue: formValue = 'key', allowsCustomValue: allowsCustomValue } = props;
|
|
92
100
|
if (allowsCustomValue) formValue = 'text';
|
|
@@ -203,7 +211,8 @@ function $1d716ce69f118fad$var$ComboBoxInner({ props: props, collection: collect
|
|
|
203
211
|
trigger: 'ComboBox',
|
|
204
212
|
style: {
|
|
205
213
|
'--trigger-width': menuWidth
|
|
206
|
-
}
|
|
214
|
+
},
|
|
215
|
+
clearContexts: $1d716ce69f118fad$var$CLEAR_CONTEXTS
|
|
207
216
|
}
|
|
208
217
|
],
|
|
209
218
|
[
|
|
@@ -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 {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, 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 {\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\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);\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 }],\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} 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 {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, 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 {\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);\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} value={state.selectedKey ?? ''} />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.main.js.map"}
|
package/dist/ComboBox.mjs
CHANGED
|
@@ -75,6 +75,14 @@ const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $cP7hC$forwa
|
|
|
75
75
|
comboBoxRef: ref
|
|
76
76
|
}));
|
|
77
77
|
});
|
|
78
|
+
// Contexts to clear inside the popover.
|
|
79
|
+
const $d01f2c01039c0eec$var$CLEAR_CONTEXTS = [
|
|
80
|
+
(0, $01b77f81d0f07f68$export$75b6ee27786ba447),
|
|
81
|
+
(0, $d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
82
|
+
(0, $3985021b0ad6602f$export$37fb8590cf2c088c),
|
|
83
|
+
(0, $a049562f99e7db0e$export$f9c6924e160136d1),
|
|
84
|
+
(0, $514c0188e459b4c0$export$9afb8bc826b033ea)
|
|
85
|
+
];
|
|
78
86
|
function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collection, comboBoxRef: ref }) {
|
|
79
87
|
let { name: name, formValue: formValue = 'key', allowsCustomValue: allowsCustomValue } = props;
|
|
80
88
|
if (allowsCustomValue) formValue = 'text';
|
|
@@ -191,7 +199,8 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collect
|
|
|
191
199
|
trigger: 'ComboBox',
|
|
192
200
|
style: {
|
|
193
201
|
'--trigger-width': menuWidth
|
|
194
|
-
}
|
|
202
|
+
},
|
|
203
|
+
clearContexts: $d01f2c01039c0eec$var$CLEAR_CONTEXTS
|
|
195
204
|
}
|
|
196
205
|
],
|
|
197
206
|
[
|
package/dist/ComboBox.module.js
CHANGED
|
@@ -75,6 +75,14 @@ const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $cP7hC$forwa
|
|
|
75
75
|
comboBoxRef: ref
|
|
76
76
|
}));
|
|
77
77
|
});
|
|
78
|
+
// Contexts to clear inside the popover.
|
|
79
|
+
const $d01f2c01039c0eec$var$CLEAR_CONTEXTS = [
|
|
80
|
+
(0, $01b77f81d0f07f68$export$75b6ee27786ba447),
|
|
81
|
+
(0, $d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
82
|
+
(0, $3985021b0ad6602f$export$37fb8590cf2c088c),
|
|
83
|
+
(0, $a049562f99e7db0e$export$f9c6924e160136d1),
|
|
84
|
+
(0, $514c0188e459b4c0$export$9afb8bc826b033ea)
|
|
85
|
+
];
|
|
78
86
|
function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collection, comboBoxRef: ref }) {
|
|
79
87
|
let { name: name, formValue: formValue = 'key', allowsCustomValue: allowsCustomValue } = props;
|
|
80
88
|
if (allowsCustomValue) formValue = 'text';
|
|
@@ -191,7 +199,8 @@ function $d01f2c01039c0eec$var$ComboBoxInner({ props: props, collection: collect
|
|
|
191
199
|
trigger: 'ComboBox',
|
|
192
200
|
style: {
|
|
193
201
|
'--trigger-width': menuWidth
|
|
194
|
-
}
|
|
202
|
+
},
|
|
203
|
+
clearContexts: $d01f2c01039c0eec$var$CLEAR_CONTEXTS
|
|
195
204
|
}
|
|
196
205
|
],
|
|
197
206
|
[
|
|
@@ -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 {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, 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 {\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\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);\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 }],\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} 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 {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';\nimport {CollectionBuilder} from '@react-aria/collections';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType, 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 {\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);\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} value={state.selectedKey ?? ''} />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"ComboBox.module.js.map"}
|
package/dist/DatePicker.main.js
CHANGED
|
@@ -58,6 +58,13 @@ const $adfe8d3f75d5162e$export$cf316c7f3b44c11e = /*#__PURE__*/ (0, $bhT4V$react
|
|
|
58
58
|
const $adfe8d3f75d5162e$export$8282edba42ee28a = /*#__PURE__*/ (0, $bhT4V$react.createContext)(null);
|
|
59
59
|
const $adfe8d3f75d5162e$export$50a10c048fdcdee9 = /*#__PURE__*/ (0, $bhT4V$react.createContext)(null);
|
|
60
60
|
const $adfe8d3f75d5162e$export$80d7ae1f804790be = /*#__PURE__*/ (0, $bhT4V$react.createContext)(null);
|
|
61
|
+
// Contexts to clear inside the popover.
|
|
62
|
+
const $adfe8d3f75d5162e$var$CLEAR_CONTEXTS = [
|
|
63
|
+
(0, $dcae72abc18c0045$exports.GroupContext),
|
|
64
|
+
(0, $b856e6788a7ea5bf$exports.ButtonContext),
|
|
65
|
+
(0, $84ae0bf5bd8e2a5f$exports.LabelContext),
|
|
66
|
+
(0, $a8a589c28affdc40$exports.TextContext)
|
|
67
|
+
];
|
|
61
68
|
const $adfe8d3f75d5162e$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $bhT4V$react.forwardRef)(function DatePicker(props, ref) {
|
|
62
69
|
[props, ref] = (0, $c5ccf687772c0422$exports.useContextProps)(props, ref, $adfe8d3f75d5162e$export$cf316c7f3b44c11e);
|
|
63
70
|
let { validationBehavior: formValidationBehavior } = (0, $c5ccf687772c0422$exports.useSlottedContext)((0, $35157657e549736b$exports.FormContext)) || {};
|
|
@@ -149,7 +156,8 @@ const $adfe8d3f75d5162e$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $bhT4V$react
|
|
|
149
156
|
placement: 'bottom start',
|
|
150
157
|
style: {
|
|
151
158
|
'--trigger-width': groupWidth
|
|
152
|
-
}
|
|
159
|
+
},
|
|
160
|
+
clearContexts: $adfe8d3f75d5162e$var$CLEAR_CONTEXTS
|
|
153
161
|
}
|
|
154
162
|
],
|
|
155
163
|
[
|
|
@@ -270,7 +278,8 @@ const $adfe8d3f75d5162e$export$17334619f3ac2224 = /*#__PURE__*/ (0, $bhT4V$react
|
|
|
270
278
|
placement: 'bottom start',
|
|
271
279
|
style: {
|
|
272
280
|
'--trigger-width': groupWidth
|
|
273
|
-
}
|
|
281
|
+
},
|
|
282
|
+
clearContexts: $adfe8d3f75d5162e$var$CLEAR_CONTEXTS
|
|
274
283
|
}
|
|
275
284
|
],
|
|
276
285
|
[
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/DatePicker.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 {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDatePicker, useDateRangePicker, useFocusRing} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {CalendarContext, RangeCalendarContext} from './Calendar';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {DateFieldContext} from './DateField';\nimport {DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, useDatePickerState, useDateRangePickerState} from 'react-stately';\nimport {DialogContext, OverlayTriggerStateContext} from './Dialog';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {LabelContext} from './Label';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface DatePickerRenderProps {\n /**\n * Whether an element within the date picker 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 picker is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the date picker is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the date picker is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the date picker's popover is currently open.\n * @selector [data-open]\n */\n isOpen: boolean,\n /**\n * State of the date picker.\n */\n state: DatePickerState\n}\nexport interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, 'state'> {\n /**\n * State of the date range picker.\n */\n state: DateRangePickerState\n}\n\nexport interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps {}\nexport interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {}\n\nexport const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);\nexport const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);\nexport const DatePickerStateContext = createContext<DatePickerState | null>(null);\nexport const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);\n\n/**\n * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DatePickerContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let state = useDatePickerState({\n ...props,\n validationBehavior\n });\n\n let groupRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n groupProps,\n labelProps,\n fieldProps,\n buttonProps,\n dialogProps,\n calendarProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useDatePicker({\n ...removeDataAttributes(props),\n label,\n validationBehavior\n }, state, groupRef);\n\n // Allows calendar width to match input group\n let [groupWidth, setGroupWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (groupRef.current) {\n setGroupWidth(groupRef.current.offsetWidth + 'px');\n }\n }, []);\n\n useResizeObserver({\n ref: groupRef,\n onResize: onResize\n });\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isFocusWithin: isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isInvalid: state.isInvalid,\n isOpen: state.isOpen\n },\n defaultClassName: 'react-aria-DatePicker'\n });\n\n let DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DatePickerStateContext, state],\n [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],\n [DateFieldContext, fieldProps],\n [ButtonContext, {...buttonProps, isPressed: state.isOpen}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [CalendarContext, calendarProps],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n trigger: 'DatePicker',\n triggerRef: groupRef,\n placement: 'bottom start',\n style: {'--trigger-width': groupWidth} as React.CSSProperties\n }],\n [DialogContext, dialogProps],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...focusProps}\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focus-within={isFocused || undefined}\n data-invalid={state.isInvalid || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={props.isDisabled || undefined}\n data-open={state.isOpen || undefined} />\n </Provider>\n );\n});\n\n/**\n * A date range picker combines two DateFields and a RangeCalendar popover to allow\n * users to enter or select a date and time range.\n */\nexport const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DateRangePickerContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let state = useDateRangePickerState({\n ...props,\n validationBehavior\n });\n\n let groupRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n groupProps,\n labelProps,\n startFieldProps,\n endFieldProps,\n buttonProps,\n dialogProps,\n calendarProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useDateRangePicker({\n ...removeDataAttributes(props),\n label,\n validationBehavior\n }, state, groupRef);\n\n // Allows calendar width to match input group\n let [groupWidth, setGroupWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (groupRef.current) {\n setGroupWidth(groupRef.current.offsetWidth + 'px');\n }\n }, []);\n\n useResizeObserver({\n ref: groupRef,\n onResize: onResize\n });\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isFocusWithin: isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isInvalid: state.isInvalid,\n isOpen: state.isOpen\n },\n defaultClassName: 'react-aria-DateRangePicker'\n });\n\n let DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DateRangePickerStateContext, state],\n [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],\n [ButtonContext, {...buttonProps, isPressed: state.isOpen}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [RangeCalendarContext, calendarProps],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n trigger: 'DateRangePicker',\n triggerRef: groupRef,\n placement: 'bottom start',\n style: {'--trigger-width': groupWidth} as React.CSSProperties\n }],\n [DialogContext, dialogProps],\n [DateFieldContext, {\n slots: {\n start: startFieldProps,\n end: endFieldProps\n }\n }],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...focusProps}\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focus-within={isFocused || undefined}\n data-invalid={state.isInvalid || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={props.isDisabled || undefined}\n data-open={state.isOpen || undefined} />\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"DatePicker.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/DatePicker.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 {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDatePicker, useDateRangePicker, useFocusRing} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {CalendarContext, RangeCalendarContext} from './Calendar';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {DateFieldContext} from './DateField';\nimport {DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, useDatePickerState, useDateRangePickerState} from 'react-stately';\nimport {DialogContext, OverlayTriggerStateContext} from './Dialog';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {LabelContext} from './Label';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface DatePickerRenderProps {\n /**\n * Whether an element within the date picker 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 picker is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the date picker is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the date picker is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the date picker's popover is currently open.\n * @selector [data-open]\n */\n isOpen: boolean,\n /**\n * State of the date picker.\n */\n state: DatePickerState\n}\nexport interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, 'state'> {\n /**\n * State of the date range picker.\n */\n state: DateRangePickerState\n}\n\nexport interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps {}\nexport interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {}\n\nexport const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);\nexport const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);\nexport const DatePickerStateContext = createContext<DatePickerState | null>(null);\nexport const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);\n\n// Contexts to clear inside the popover.\nconst CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];\n\n/**\n * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DatePickerContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let state = useDatePickerState({\n ...props,\n validationBehavior\n });\n\n let groupRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n groupProps,\n labelProps,\n fieldProps,\n buttonProps,\n dialogProps,\n calendarProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useDatePicker({\n ...removeDataAttributes(props),\n label,\n validationBehavior\n }, state, groupRef);\n\n // Allows calendar width to match input group\n let [groupWidth, setGroupWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (groupRef.current) {\n setGroupWidth(groupRef.current.offsetWidth + 'px');\n }\n }, []);\n\n useResizeObserver({\n ref: groupRef,\n onResize: onResize\n });\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isFocusWithin: isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isInvalid: state.isInvalid,\n isOpen: state.isOpen\n },\n defaultClassName: 'react-aria-DatePicker'\n });\n\n let DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DatePickerStateContext, state],\n [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],\n [DateFieldContext, fieldProps],\n [ButtonContext, {...buttonProps, isPressed: state.isOpen}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [CalendarContext, calendarProps],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n trigger: 'DatePicker',\n triggerRef: groupRef,\n placement: 'bottom start',\n style: {'--trigger-width': groupWidth} as React.CSSProperties,\n clearContexts: CLEAR_CONTEXTS\n }],\n [DialogContext, dialogProps],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...focusProps}\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focus-within={isFocused || undefined}\n data-invalid={state.isInvalid || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={props.isDisabled || undefined}\n data-open={state.isOpen || undefined} />\n </Provider>\n );\n});\n\n/**\n * A date range picker combines two DateFields and a RangeCalendar popover to allow\n * users to enter or select a date and time range.\n */\nexport const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DateRangePickerContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let state = useDateRangePickerState({\n ...props,\n validationBehavior\n });\n\n let groupRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n groupProps,\n labelProps,\n startFieldProps,\n endFieldProps,\n buttonProps,\n dialogProps,\n calendarProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useDateRangePicker({\n ...removeDataAttributes(props),\n label,\n validationBehavior\n }, state, groupRef);\n\n // Allows calendar width to match input group\n let [groupWidth, setGroupWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (groupRef.current) {\n setGroupWidth(groupRef.current.offsetWidth + 'px');\n }\n }, []);\n\n useResizeObserver({\n ref: groupRef,\n onResize: onResize\n });\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isFocusWithin: isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isInvalid: state.isInvalid,\n isOpen: state.isOpen\n },\n defaultClassName: 'react-aria-DateRangePicker'\n });\n\n let DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DateRangePickerStateContext, state],\n [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],\n [ButtonContext, {...buttonProps, isPressed: state.isOpen}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [RangeCalendarContext, calendarProps],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n trigger: 'DateRangePicker',\n triggerRef: groupRef,\n placement: 'bottom start',\n style: {'--trigger-width': groupWidth} as React.CSSProperties,\n clearContexts: CLEAR_CONTEXTS\n }],\n [DialogContext, dialogProps],\n [DateFieldContext, {\n slots: {\n start: startFieldProps,\n end: endFieldProps\n }\n }],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...focusProps}\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focus-within={isFocused || undefined}\n data-invalid={state.isInvalid || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={props.isDisabled || undefined}\n data-open={state.isOpen || undefined} />\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"DatePicker.main.js.map"}
|
package/dist/DatePicker.mjs
CHANGED
|
@@ -43,6 +43,13 @@ const $06d5b8ec9ee5d538$export$cf316c7f3b44c11e = /*#__PURE__*/ (0, $8nhma$creat
|
|
|
43
43
|
const $06d5b8ec9ee5d538$export$8282edba42ee28a = /*#__PURE__*/ (0, $8nhma$createContext)(null);
|
|
44
44
|
const $06d5b8ec9ee5d538$export$50a10c048fdcdee9 = /*#__PURE__*/ (0, $8nhma$createContext)(null);
|
|
45
45
|
const $06d5b8ec9ee5d538$export$80d7ae1f804790be = /*#__PURE__*/ (0, $8nhma$createContext)(null);
|
|
46
|
+
// Contexts to clear inside the popover.
|
|
47
|
+
const $06d5b8ec9ee5d538$var$CLEAR_CONTEXTS = [
|
|
48
|
+
(0, $a049562f99e7db0e$export$f9c6924e160136d1),
|
|
49
|
+
(0, $d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
50
|
+
(0, $01b77f81d0f07f68$export$75b6ee27786ba447),
|
|
51
|
+
(0, $514c0188e459b4c0$export$9afb8bc826b033ea)
|
|
52
|
+
];
|
|
46
53
|
const $06d5b8ec9ee5d538$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8nhma$forwardRef)(function DatePicker(props, ref) {
|
|
47
54
|
[props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $06d5b8ec9ee5d538$export$cf316c7f3b44c11e);
|
|
48
55
|
let { validationBehavior: formValidationBehavior } = (0, $64fa3d84918910a7$export$fabf2dc03a41866e)((0, $d3e0e05bdfcf66bd$export$c24727297075ec6a)) || {};
|
|
@@ -134,7 +141,8 @@ const $06d5b8ec9ee5d538$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8nhma$forwa
|
|
|
134
141
|
placement: 'bottom start',
|
|
135
142
|
style: {
|
|
136
143
|
'--trigger-width': groupWidth
|
|
137
|
-
}
|
|
144
|
+
},
|
|
145
|
+
clearContexts: $06d5b8ec9ee5d538$var$CLEAR_CONTEXTS
|
|
138
146
|
}
|
|
139
147
|
],
|
|
140
148
|
[
|
|
@@ -255,7 +263,8 @@ const $06d5b8ec9ee5d538$export$17334619f3ac2224 = /*#__PURE__*/ (0, $8nhma$forwa
|
|
|
255
263
|
placement: 'bottom start',
|
|
256
264
|
style: {
|
|
257
265
|
'--trigger-width': groupWidth
|
|
258
|
-
}
|
|
266
|
+
},
|
|
267
|
+
clearContexts: $06d5b8ec9ee5d538$var$CLEAR_CONTEXTS
|
|
259
268
|
}
|
|
260
269
|
],
|
|
261
270
|
[
|
|
@@ -43,6 +43,13 @@ const $06d5b8ec9ee5d538$export$cf316c7f3b44c11e = /*#__PURE__*/ (0, $8nhma$creat
|
|
|
43
43
|
const $06d5b8ec9ee5d538$export$8282edba42ee28a = /*#__PURE__*/ (0, $8nhma$createContext)(null);
|
|
44
44
|
const $06d5b8ec9ee5d538$export$50a10c048fdcdee9 = /*#__PURE__*/ (0, $8nhma$createContext)(null);
|
|
45
45
|
const $06d5b8ec9ee5d538$export$80d7ae1f804790be = /*#__PURE__*/ (0, $8nhma$createContext)(null);
|
|
46
|
+
// Contexts to clear inside the popover.
|
|
47
|
+
const $06d5b8ec9ee5d538$var$CLEAR_CONTEXTS = [
|
|
48
|
+
(0, $a049562f99e7db0e$export$f9c6924e160136d1),
|
|
49
|
+
(0, $d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
50
|
+
(0, $01b77f81d0f07f68$export$75b6ee27786ba447),
|
|
51
|
+
(0, $514c0188e459b4c0$export$9afb8bc826b033ea)
|
|
52
|
+
];
|
|
46
53
|
const $06d5b8ec9ee5d538$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8nhma$forwardRef)(function DatePicker(props, ref) {
|
|
47
54
|
[props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $06d5b8ec9ee5d538$export$cf316c7f3b44c11e);
|
|
48
55
|
let { validationBehavior: formValidationBehavior } = (0, $64fa3d84918910a7$export$fabf2dc03a41866e)((0, $d3e0e05bdfcf66bd$export$c24727297075ec6a)) || {};
|
|
@@ -134,7 +141,8 @@ const $06d5b8ec9ee5d538$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $8nhma$forwa
|
|
|
134
141
|
placement: 'bottom start',
|
|
135
142
|
style: {
|
|
136
143
|
'--trigger-width': groupWidth
|
|
137
|
-
}
|
|
144
|
+
},
|
|
145
|
+
clearContexts: $06d5b8ec9ee5d538$var$CLEAR_CONTEXTS
|
|
138
146
|
}
|
|
139
147
|
],
|
|
140
148
|
[
|
|
@@ -255,7 +263,8 @@ const $06d5b8ec9ee5d538$export$17334619f3ac2224 = /*#__PURE__*/ (0, $8nhma$forwa
|
|
|
255
263
|
placement: 'bottom start',
|
|
256
264
|
style: {
|
|
257
265
|
'--trigger-width': groupWidth
|
|
258
|
-
}
|
|
266
|
+
},
|
|
267
|
+
clearContexts: $06d5b8ec9ee5d538$var$CLEAR_CONTEXTS
|
|
259
268
|
}
|
|
260
269
|
],
|
|
261
270
|
[
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react-aria-components/src/DatePicker.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 {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDatePicker, useDateRangePicker, useFocusRing} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {CalendarContext, RangeCalendarContext} from './Calendar';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {DateFieldContext} from './DateField';\nimport {DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, useDatePickerState, useDateRangePickerState} from 'react-stately';\nimport {DialogContext, OverlayTriggerStateContext} from './Dialog';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {LabelContext} from './Label';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface DatePickerRenderProps {\n /**\n * Whether an element within the date picker 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 picker is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the date picker is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the date picker is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the date picker's popover is currently open.\n * @selector [data-open]\n */\n isOpen: boolean,\n /**\n * State of the date picker.\n */\n state: DatePickerState\n}\nexport interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, 'state'> {\n /**\n * State of the date range picker.\n */\n state: DateRangePickerState\n}\n\nexport interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps {}\nexport interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {}\n\nexport const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);\nexport const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);\nexport const DatePickerStateContext = createContext<DatePickerState | null>(null);\nexport const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);\n\n/**\n * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DatePickerContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let state = useDatePickerState({\n ...props,\n validationBehavior\n });\n\n let groupRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n groupProps,\n labelProps,\n fieldProps,\n buttonProps,\n dialogProps,\n calendarProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useDatePicker({\n ...removeDataAttributes(props),\n label,\n validationBehavior\n }, state, groupRef);\n\n // Allows calendar width to match input group\n let [groupWidth, setGroupWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (groupRef.current) {\n setGroupWidth(groupRef.current.offsetWidth + 'px');\n }\n }, []);\n\n useResizeObserver({\n ref: groupRef,\n onResize: onResize\n });\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isFocusWithin: isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isInvalid: state.isInvalid,\n isOpen: state.isOpen\n },\n defaultClassName: 'react-aria-DatePicker'\n });\n\n let DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DatePickerStateContext, state],\n [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],\n [DateFieldContext, fieldProps],\n [ButtonContext, {...buttonProps, isPressed: state.isOpen}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [CalendarContext, calendarProps],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n trigger: 'DatePicker',\n triggerRef: groupRef,\n placement: 'bottom start',\n style: {'--trigger-width': groupWidth} as React.CSSProperties\n }],\n [DialogContext, dialogProps],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...focusProps}\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focus-within={isFocused || undefined}\n data-invalid={state.isInvalid || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={props.isDisabled || undefined}\n data-open={state.isOpen || undefined} />\n </Provider>\n );\n});\n\n/**\n * A date range picker combines two DateFields and a RangeCalendar popover to allow\n * users to enter or select a date and time range.\n */\nexport const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DateRangePickerContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let state = useDateRangePickerState({\n ...props,\n validationBehavior\n });\n\n let groupRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n groupProps,\n labelProps,\n startFieldProps,\n endFieldProps,\n buttonProps,\n dialogProps,\n calendarProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useDateRangePicker({\n ...removeDataAttributes(props),\n label,\n validationBehavior\n }, state, groupRef);\n\n // Allows calendar width to match input group\n let [groupWidth, setGroupWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (groupRef.current) {\n setGroupWidth(groupRef.current.offsetWidth + 'px');\n }\n }, []);\n\n useResizeObserver({\n ref: groupRef,\n onResize: onResize\n });\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isFocusWithin: isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isInvalid: state.isInvalid,\n isOpen: state.isOpen\n },\n defaultClassName: 'react-aria-DateRangePicker'\n });\n\n let DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DateRangePickerStateContext, state],\n [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],\n [ButtonContext, {...buttonProps, isPressed: state.isOpen}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [RangeCalendarContext, calendarProps],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n trigger: 'DateRangePicker',\n triggerRef: groupRef,\n placement: 'bottom start',\n style: {'--trigger-width': groupWidth} as React.CSSProperties\n }],\n [DialogContext, dialogProps],\n [DateFieldContext, {\n slots: {\n start: startFieldProps,\n end: endFieldProps\n }\n }],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...focusProps}\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focus-within={isFocused || undefined}\n data-invalid={state.isInvalid || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={props.isDisabled || undefined}\n data-open={state.isOpen || undefined} />\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"DatePicker.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/DatePicker.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 {AriaDatePickerProps, AriaDateRangePickerProps, DateValue, useDatePicker, useDateRangePicker, useFocusRing} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {CalendarContext, RangeCalendarContext} from './Calendar';\nimport {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';\nimport {DateFieldContext} from './DateField';\nimport {DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, useDatePickerState, useDateRangePickerState} from 'react-stately';\nimport {DialogContext, OverlayTriggerStateContext} from './Dialog';\nimport {FieldErrorContext} from './FieldError';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {FormContext} from './Form';\nimport {forwardRefType} from '@react-types/shared';\nimport {GroupContext} from './Group';\nimport {LabelContext} from './Label';\nimport {PopoverContext} from './Popover';\nimport React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';\nimport {TextContext} from './Text';\n\nexport interface DatePickerRenderProps {\n /**\n * Whether an element within the date picker 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 picker is keyboard focused.\n * @selector [data-focus-visible]\n */\n isFocusVisible: boolean,\n /**\n * Whether the date picker is disabled.\n * @selector [data-disabled]\n */\n isDisabled: boolean,\n /**\n * Whether the date picker is invalid.\n * @selector [data-invalid]\n */\n isInvalid: boolean,\n /**\n * Whether the date picker's popover is currently open.\n * @selector [data-open]\n */\n isOpen: boolean,\n /**\n * State of the date picker.\n */\n state: DatePickerState\n}\nexport interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps, 'state'> {\n /**\n * State of the date range picker.\n */\n state: DateRangePickerState\n}\n\nexport interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps {}\nexport interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {}\n\nexport const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);\nexport const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);\nexport const DatePickerStateContext = createContext<DatePickerState | null>(null);\nexport const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);\n\n// Contexts to clear inside the popover.\nconst CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];\n\n/**\n * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DatePickerContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let state = useDatePickerState({\n ...props,\n validationBehavior\n });\n\n let groupRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n groupProps,\n labelProps,\n fieldProps,\n buttonProps,\n dialogProps,\n calendarProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useDatePicker({\n ...removeDataAttributes(props),\n label,\n validationBehavior\n }, state, groupRef);\n\n // Allows calendar width to match input group\n let [groupWidth, setGroupWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (groupRef.current) {\n setGroupWidth(groupRef.current.offsetWidth + 'px');\n }\n }, []);\n\n useResizeObserver({\n ref: groupRef,\n onResize: onResize\n });\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isFocusWithin: isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isInvalid: state.isInvalid,\n isOpen: state.isOpen\n },\n defaultClassName: 'react-aria-DatePicker'\n });\n\n let DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DatePickerStateContext, state],\n [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],\n [DateFieldContext, fieldProps],\n [ButtonContext, {...buttonProps, isPressed: state.isOpen}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [CalendarContext, calendarProps],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n trigger: 'DatePicker',\n triggerRef: groupRef,\n placement: 'bottom start',\n style: {'--trigger-width': groupWidth} as React.CSSProperties,\n clearContexts: CLEAR_CONTEXTS\n }],\n [DialogContext, dialogProps],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...focusProps}\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focus-within={isFocused || undefined}\n data-invalid={state.isInvalid || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={props.isDisabled || undefined}\n data-open={state.isOpen || undefined} />\n </Provider>\n );\n});\n\n/**\n * A date range picker combines two DateFields and a RangeCalendar popover to allow\n * users to enter or select a date and time range.\n */\nexport const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useContextProps(props, ref, DateRangePickerContext);\n let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};\n let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';\n let state = useDateRangePickerState({\n ...props,\n validationBehavior\n });\n\n let groupRef = useRef<HTMLDivElement>(null);\n let [labelRef, label] = useSlot(\n !props['aria-label'] && !props['aria-labelledby']\n );\n let {\n groupProps,\n labelProps,\n startFieldProps,\n endFieldProps,\n buttonProps,\n dialogProps,\n calendarProps,\n descriptionProps,\n errorMessageProps,\n ...validation\n } = useDateRangePicker({\n ...removeDataAttributes(props),\n label,\n validationBehavior\n }, state, groupRef);\n\n // Allows calendar width to match input group\n let [groupWidth, setGroupWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (groupRef.current) {\n setGroupWidth(groupRef.current.offsetWidth + 'px');\n }\n }, []);\n\n useResizeObserver({\n ref: groupRef,\n onResize: onResize\n });\n\n let {focusProps, isFocused, isFocusVisible} = useFocusRing({within: true});\n let renderProps = useRenderProps({\n ...props,\n values: {\n state,\n isFocusWithin: isFocused,\n isFocusVisible,\n isDisabled: props.isDisabled || false,\n isInvalid: state.isInvalid,\n isOpen: state.isOpen\n },\n defaultClassName: 'react-aria-DateRangePicker'\n });\n\n let DOMProps = filterDOMProps(props);\n delete DOMProps.id;\n\n return (\n <Provider\n values={[\n [DateRangePickerStateContext, state],\n [GroupContext, {...groupProps, ref: groupRef, isInvalid: state.isInvalid}],\n [ButtonContext, {...buttonProps, isPressed: state.isOpen}],\n [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],\n [RangeCalendarContext, calendarProps],\n [OverlayTriggerStateContext, state],\n [PopoverContext, {\n trigger: 'DateRangePicker',\n triggerRef: groupRef,\n placement: 'bottom start',\n style: {'--trigger-width': groupWidth} as React.CSSProperties,\n clearContexts: CLEAR_CONTEXTS\n }],\n [DialogContext, dialogProps],\n [DateFieldContext, {\n slots: {\n start: startFieldProps,\n end: endFieldProps\n }\n }],\n [TextContext, {\n slots: {\n description: descriptionProps,\n errorMessage: errorMessageProps\n }\n }],\n [FieldErrorContext, validation]\n ]}>\n <div\n {...focusProps}\n {...DOMProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}\n data-focus-within={isFocused || undefined}\n data-invalid={state.isInvalid || undefined}\n data-focus-visible={isFocusVisible || undefined}\n data-disabled={props.isDisabled || undefined}\n data-open={state.isOpen || undefined} />\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"DatePicker.module.js.map"}
|
package/dist/Dialog.main.js
CHANGED
|
@@ -52,6 +52,17 @@ function $2979ab89b336194b$export$2e1e1122cf0cba88(props) {
|
|
|
52
52
|
let { triggerProps: triggerProps, overlayProps: overlayProps } = (0, $03da9$reactaria.useOverlayTrigger)({
|
|
53
53
|
type: 'dialog'
|
|
54
54
|
}, state, buttonRef);
|
|
55
|
+
// Allows popover width to match trigger element
|
|
56
|
+
let [buttonWidth, setButtonWidth] = (0, $03da9$react.useState)(null);
|
|
57
|
+
let onResize = (0, $03da9$react.useCallback)(()=>{
|
|
58
|
+
if (buttonRef.current) setButtonWidth(buttonRef.current.offsetWidth + 'px');
|
|
59
|
+
}, [
|
|
60
|
+
buttonRef
|
|
61
|
+
]);
|
|
62
|
+
(0, $03da9$reactariautils.useResizeObserver)({
|
|
63
|
+
ref: buttonRef,
|
|
64
|
+
onResize: onResize
|
|
65
|
+
});
|
|
55
66
|
// Label dialog by the trigger as a fallback if there is no title slot.
|
|
56
67
|
// This is done in RAC instead of hooks because otherwise we cannot distinguish
|
|
57
68
|
// between context and props. Normally aria-labelledby overrides the title
|
|
@@ -77,7 +88,10 @@ function $2979ab89b336194b$export$2e1e1122cf0cba88(props) {
|
|
|
77
88
|
{
|
|
78
89
|
trigger: 'DialogTrigger',
|
|
79
90
|
triggerRef: buttonRef,
|
|
80
|
-
'aria-labelledby': overlayProps['aria-labelledby']
|
|
91
|
+
'aria-labelledby': overlayProps['aria-labelledby'],
|
|
92
|
+
style: {
|
|
93
|
+
'--trigger-width': buttonWidth
|
|
94
|
+
}
|
|
81
95
|
}
|
|
82
96
|
]
|
|
83
97
|
]
|
package/dist/Dialog.main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0BM,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAA0C;AAC5E,MAAM,yDAA6B,CAAA,GAAA,0BAAY,EAA8B;AAK7E,SAAS,0CAAc,KAAyB;IACrD,sGAAsG;IACtG,qCAAqC;IACrC,IAAI,QAAQ,CAAA,GAAA,uCAAkB,EAAE;IAEhC,IAAI,YAAY,CAAA,GAAA,mBAAK,EAAqB;IAC1C,IAAI,gBAAC,YAAY,gBAAE,YAAY,EAAC,GAAG,CAAA,GAAA,kCAAgB,EAAE;QAAC,MAAM;IAAQ,GAAG,OAAO;IAE9E,uEAAuE;IACvE,+EAA+E;IAC/E,0EAA0E;IAC1E,qDAAqD;IACrD,aAAa,EAAE,GAAG,CAAA,GAAA,sBAAI;IACtB,YAAY,CAAC,kBAAkB,GAAG,aAAa,EAAE;IAEjD,qBACE,0DAAC,CAAA,GAAA,kCAAO;QACN,QAAQ;YACN;gBAAC;gBAA4B;aAAM;YACnC;gBAAC,CAAA,GAAA,qDAA0B;gBAAG;aAAM;YACpC;gBAAC;gBAAe;aAAa;YAC7B;gBAAC,CAAA,GAAA,wCAAa;gBAAG;oBACf,SAAS;oBACT,YAAY;oBACZ,mBAAmB,YAAY,CAAC,kBAAkB;
|
|
1
|
+
{"mappings":"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","sources":["packages/react-aria-components/src/Dialog.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 {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';\nimport {ButtonContext} from './Button';\nimport {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';\nimport {filterDOMProps, useResizeObserver} from '@react-aria/utils';\nimport {forwardRefType} from '@react-types/shared';\nimport {HeadingContext} from './RSPContexts';\nimport {OverlayTriggerProps, OverlayTriggerState, useMenuTriggerState} from 'react-stately';\nimport {PopoverContext} from './Popover';\nimport {PressResponder} from '@react-aria/interactions';\nimport React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useRef, useState} from 'react';\nimport {RootMenuTriggerStateContext} from './Menu';\n\nexport interface DialogTriggerProps extends OverlayTriggerProps {\n children: ReactNode\n}\n\nexport interface DialogRenderProps {\n close: () => void\n}\n\nexport interface DialogProps extends AriaDialogProps, StyleProps, SlotProps {\n /** Children of the dialog. A function may be provided to access a function to close the dialog. */\n children?: ReactNode | ((opts: DialogRenderProps) => ReactNode)\n}\n\nexport const DialogContext = createContext<ContextValue<DialogProps, HTMLElement>>(null);\nexport const OverlayTriggerStateContext = createContext<OverlayTriggerState | null>(null);\n\n/**\n * A DialogTrigger opens a dialog when a trigger element is pressed.\n */\nexport function DialogTrigger(props: DialogTriggerProps): JSX.Element {\n // Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.\n // This is needed to handle submenus.\n let state = useMenuTriggerState(props);\n\n let buttonRef = useRef<HTMLButtonElement>(null);\n let {triggerProps, overlayProps} = useOverlayTrigger({type: 'dialog'}, state, buttonRef);\n\n // Allows popover width to match trigger element\n let [buttonWidth, setButtonWidth] = useState<string | null>(null);\n let onResize = useCallback(() => {\n if (buttonRef.current) {\n setButtonWidth(buttonRef.current.offsetWidth + 'px');\n }\n }, [buttonRef]);\n\n useResizeObserver({\n ref: buttonRef,\n onResize: onResize\n });\n\n // Label dialog by the trigger as a fallback if there is no title slot.\n // This is done in RAC instead of hooks because otherwise we cannot distinguish\n // between context and props. Normally aria-labelledby overrides the title\n // but when sent by context we want the title to win.\n triggerProps.id = useId();\n overlayProps['aria-labelledby'] = triggerProps.id;\n\n return (\n <Provider\n values={[\n [OverlayTriggerStateContext, state],\n [RootMenuTriggerStateContext, state],\n [DialogContext, overlayProps],\n [PopoverContext, {\n trigger: 'DialogTrigger',\n triggerRef: buttonRef,\n 'aria-labelledby': overlayProps['aria-labelledby'],\n style: {'--trigger-width': buttonWidth} as React.CSSProperties\n }]\n ]}>\n <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>\n {props.children}\n </PressResponder>\n </Provider>\n );\n}\n\n/**\n * A dialog is an overlay shown above other content in an application.\n */\nexport const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {\n let originalAriaLabelledby = props['aria-labelledby'];\n [props, ref] = useContextProps(props, ref, DialogContext);\n let {dialogProps, titleProps} = useDialog({\n ...props,\n // Only pass aria-labelledby from props, not context.\n // Context is used as a fallback below.\n 'aria-labelledby': originalAriaLabelledby\n }, ref);\n let state = useContext(OverlayTriggerStateContext);\n\n if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {\n // If aria-labelledby exists on props, we know it came from context.\n // Use that as a fallback in case there is no title slot.\n if (props['aria-labelledby']) {\n dialogProps['aria-labelledby'] = props['aria-labelledby'];\n } else if (process.env.NODE_ENV !== 'production') {\n console.warn('If a Dialog does not contain a <Heading slot=\"title\">, it must have an aria-label or aria-labelledby attribute for accessibility.');\n }\n }\n\n let renderProps = useRenderProps({\n defaultClassName: 'react-aria-Dialog',\n className: props.className,\n style: props.style,\n children: props.children,\n values: {\n close: state?.close || (() => {})\n }\n });\n\n return (\n <section\n {...filterDOMProps(props)}\n {...dialogProps}\n {...renderProps}\n ref={ref}\n slot={props.slot || undefined}>\n <Provider\n values={[\n [HeadingContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n title: {...titleProps, level: 2}\n }\n }],\n [ButtonContext, {\n slots: {\n [DEFAULT_SLOT]: {},\n close: {\n onPress: () => state?.close()\n }\n }\n }]\n ]}>\n {renderProps.children}\n </Provider>\n </section>\n );\n});\n"],"names":[],"version":3,"file":"Dialog.main.js.map"}
|
package/dist/Dialog.mjs
CHANGED
|
@@ -4,10 +4,10 @@ import {HeadingContext as $4e85f108e88277b8$export$d688439359537581} from "./RSP
|
|
|
4
4
|
import {PopoverContext as $07b14b47974efb58$export$9b9a0cd73afb7ca4} from "./Popover.mjs";
|
|
5
5
|
import {RootMenuTriggerStateContext as $3674c52c6b3c5bce$export$795aec4671cbae19} from "./Menu.mjs";
|
|
6
6
|
import {useOverlayTrigger as $6IYYA$useOverlayTrigger, useId as $6IYYA$useId, useDialog as $6IYYA$useDialog} from "react-aria";
|
|
7
|
-
import {filterDOMProps as $6IYYA$filterDOMProps} from "@react-aria/utils";
|
|
7
|
+
import {useResizeObserver as $6IYYA$useResizeObserver, filterDOMProps as $6IYYA$filterDOMProps} from "@react-aria/utils";
|
|
8
8
|
import {useMenuTriggerState as $6IYYA$useMenuTriggerState} from "react-stately";
|
|
9
9
|
import {PressResponder as $6IYYA$PressResponder} from "@react-aria/interactions";
|
|
10
|
-
import $6IYYA$react, {createContext as $6IYYA$createContext, useRef as $6IYYA$useRef, forwardRef as $6IYYA$forwardRef, useContext as $6IYYA$useContext} from "react";
|
|
10
|
+
import $6IYYA$react, {createContext as $6IYYA$createContext, useRef as $6IYYA$useRef, useState as $6IYYA$useState, useCallback as $6IYYA$useCallback, forwardRef as $6IYYA$forwardRef, useContext as $6IYYA$useContext} from "react";
|
|
11
11
|
|
|
12
12
|
/*
|
|
13
13
|
* Copyright 2022 Adobe. All rights reserved.
|
|
@@ -39,6 +39,17 @@ function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
|
|
|
39
39
|
let { triggerProps: triggerProps, overlayProps: overlayProps } = (0, $6IYYA$useOverlayTrigger)({
|
|
40
40
|
type: 'dialog'
|
|
41
41
|
}, state, buttonRef);
|
|
42
|
+
// Allows popover width to match trigger element
|
|
43
|
+
let [buttonWidth, setButtonWidth] = (0, $6IYYA$useState)(null);
|
|
44
|
+
let onResize = (0, $6IYYA$useCallback)(()=>{
|
|
45
|
+
if (buttonRef.current) setButtonWidth(buttonRef.current.offsetWidth + 'px');
|
|
46
|
+
}, [
|
|
47
|
+
buttonRef
|
|
48
|
+
]);
|
|
49
|
+
(0, $6IYYA$useResizeObserver)({
|
|
50
|
+
ref: buttonRef,
|
|
51
|
+
onResize: onResize
|
|
52
|
+
});
|
|
42
53
|
// Label dialog by the trigger as a fallback if there is no title slot.
|
|
43
54
|
// This is done in RAC instead of hooks because otherwise we cannot distinguish
|
|
44
55
|
// between context and props. Normally aria-labelledby overrides the title
|
|
@@ -64,7 +75,10 @@ function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
|
|
|
64
75
|
{
|
|
65
76
|
trigger: 'DialogTrigger',
|
|
66
77
|
triggerRef: buttonRef,
|
|
67
|
-
'aria-labelledby': overlayProps['aria-labelledby']
|
|
78
|
+
'aria-labelledby': overlayProps['aria-labelledby'],
|
|
79
|
+
style: {
|
|
80
|
+
'--trigger-width': buttonWidth
|
|
81
|
+
}
|
|
68
82
|
}
|
|
69
83
|
]
|
|
70
84
|
]
|