@react-spectrum/combobox 3.14.0 → 3.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/ComboBox.main.js +4 -7
- package/dist/ComboBox.main.js.map +1 -1
- package/dist/ComboBox.mjs +4 -7
- package/dist/ComboBox.module.js +4 -7
- package/dist/ComboBox.module.js.map +1 -1
- package/dist/MobileComboBox.main.js +4 -4
- package/dist/MobileComboBox.mjs +4 -4
- package/dist/MobileComboBox.module.js +4 -4
- package/dist/types.d.ts.map +1 -1
- package/dist/{vars.7a9c8a9c.css → vars.202cbdb0.css} +3 -3
- package/dist/{vars.7a9c8a9c.css.map → vars.202cbdb0.css.map} +1 -1
- package/dist/{vars.09a5f62b.css → vars.3ad1a294.css} +3 -3
- package/dist/{vars.09a5f62b.css.map → vars.3ad1a294.css.map} +1 -1
- package/dist/{vars.03cfef19.css → vars.3f2ff1e8.css} +2 -2
- package/dist/{vars.03cfef19.css.map → vars.3f2ff1e8.css.map} +1 -1
- package/dist/{vars.01699409.css → vars.8e9a1ae1.css} +3 -3
- package/dist/{vars.01699409.css.map → vars.8e9a1ae1.css.map} +1 -1
- package/package.json +26 -26
- package/src/ComboBox.tsx +5 -8
package/README.md
CHANGED
package/dist/ComboBox.main.js
CHANGED
|
@@ -2,9 +2,9 @@ require("./combobox.1c1869da.css");
|
|
|
2
2
|
var $41fae9390a5a37fa$exports = require("./combobox_css.main.js");
|
|
3
3
|
var $9e627d9ac6346a53$exports = require("./intlStrings.main.js");
|
|
4
4
|
var $e514018f82d1b067$exports = require("./MobileComboBox.main.js");
|
|
5
|
-
require("./vars.
|
|
5
|
+
require("./vars.3f2ff1e8.css");
|
|
6
6
|
var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
|
|
7
|
-
require("./vars.
|
|
7
|
+
require("./vars.202cbdb0.css");
|
|
8
8
|
var $40cb3a00c193680f$exports = require("./textfield_vars_css.main.js");
|
|
9
9
|
var $XxzjX$spectrumiconsuiChevronDownMedium = require("@spectrum-icons/ui/ChevronDownMedium");
|
|
10
10
|
var $XxzjX$reactspectrumutils = require("@react-spectrum/utils");
|
|
@@ -66,7 +66,7 @@ $parcel$export(module.exports, "ComboBox", () => $e4f518eb9b010873$export$72b969
|
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
const $e4f518eb9b010873$export$72b9695b8216309a = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).forwardRef(function ComboBox(props, ref) {
|
|
70
70
|
props = (0, $XxzjX$reactspectrumprovider.useProviderProps)(props);
|
|
71
71
|
props = (0, $XxzjX$reactspectrumform.useFormProps)(props);
|
|
72
72
|
if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
|
|
@@ -81,7 +81,7 @@ function $e4f518eb9b010873$var$ComboBox(props, ref) {
|
|
|
81
81
|
...props,
|
|
82
82
|
ref: ref
|
|
83
83
|
});
|
|
84
|
-
}
|
|
84
|
+
});
|
|
85
85
|
const $e4f518eb9b010873$var$ComboBoxBase = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).forwardRef(function ComboBoxBase(props, ref) {
|
|
86
86
|
let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, allowsCustomValue: allowsCustomValue, menuWidth: customMenuWidth, name: name, formValue: formValue = 'text' } = props;
|
|
87
87
|
if (allowsCustomValue) formValue = 'text';
|
|
@@ -289,9 +289,6 @@ const $e4f518eb9b010873$var$ComboBoxInput = /*#__PURE__*/ (0, ($parcel$interopDe
|
|
|
289
289
|
UNSAFE_className: (0, $XxzjX$reactspectrumutils.classNames)((0, ($parcel$interopDefault($2f86633ce5b04f1e$exports))), 'spectrum-Dropdown-chevron')
|
|
290
290
|
})))));
|
|
291
291
|
});
|
|
292
|
-
/**
|
|
293
|
-
* ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
|
|
294
|
-
*/ const $e4f518eb9b010873$export$72b9695b8216309a = /*#__PURE__*/ (0, ($parcel$interopDefault($XxzjX$react))).forwardRef($e4f518eb9b010873$var$ComboBox);
|
|
295
292
|
|
|
296
293
|
|
|
297
294
|
//# sourceMappingURL=ComboBox.main.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/combobox/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {\n classNames,\n dimensionValue,\n useFocusableRef,\n useIsMobileDevice,\n useResizeObserver,\n useUnwrapDOMRef\n} from '@react-spectrum/utils';\nimport comboboxStyles from './combobox.css';\nimport {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '@react-spectrum/overlays';\nimport {PressResponder, useHover} from '@react-aria/interactions';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumComboBoxProps} from '@react-types/combobox';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useComboBox} from '@react-aria/combobox';\nimport {useComboBoxState} from '@react-stately/combobox';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\n\nfunction ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');\n }\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState(\n {\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n }\n );\n let layout = useListBoxLayout();\n\n let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef} />\n </Field>\n {name && formValue === 'key' && <input type=\"hidden\" name={name} value={state.selectedKey ?? ''} />}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy ?? undefined}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() => isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults')}\n </span>\n )} />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n triggerProps: AriaButtonProps,\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>,\n style?: React.CSSProperties,\n className?: string,\n isOpen?: boolean\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: ForwardedRef<HTMLElement | null>) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(\n styles,\n 'spectrum-InputGroup-input-circleLoader'\n )\n )} />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n // If loading is no longer happening, clear any timers and hide the loading circle\n setShowLoading(false);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n (<FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={\n classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )\n }>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-InputGroup-field'\n )\n }\n inputClassName={\n classNames(\n styles,\n 'spectrum-InputGroup-input'\n )\n }\n validationIconClassName={\n classNames(\n styles,\n 'spectrum-InputGroup-input-validationIcon'\n )\n }\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-FieldButton'\n )\n }\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>)\n );\n});\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.\n */\nconst _ComboBox = React.forwardRef(ComboBox) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_ComboBox as ComboBox};\n"],"names":[],"version":3,"file":"ComboBox.main.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/combobox/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {\n classNames,\n dimensionValue,\n useFocusableRef,\n useIsMobileDevice,\n useResizeObserver,\n useUnwrapDOMRef\n} from '@react-spectrum/utils';\nimport comboboxStyles from './combobox.css';\nimport {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '@react-spectrum/overlays';\nimport {PressResponder, useHover} from '@react-aria/interactions';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumComboBoxProps} from '@react-types/combobox';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useComboBox} from '@react-aria/combobox';\nimport {useComboBoxState} from '@react-stately/combobox';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');\n }\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState(\n {\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n }\n );\n let layout = useListBoxLayout();\n\n let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef} />\n </Field>\n {name && formValue === 'key' && <input type=\"hidden\" name={name} value={state.selectedKey ?? ''} />}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy ?? undefined}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() => isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults')}\n </span>\n )} />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n triggerProps: AriaButtonProps,\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>,\n style?: React.CSSProperties,\n className?: string,\n isOpen?: boolean\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: ForwardedRef<HTMLElement | null>) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(\n styles,\n 'spectrum-InputGroup-input-circleLoader'\n )\n )} />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n // If loading is no longer happening, clear any timers and hide the loading circle\n setShowLoading(false);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n (<FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={\n classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )\n }>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-InputGroup-field'\n )\n }\n inputClassName={\n classNames(\n styles,\n 'spectrum-InputGroup-input'\n )\n }\n validationIconClassName={\n classNames(\n styles,\n 'spectrum-InputGroup-input-validationIcon'\n )\n }\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-FieldButton'\n )\n }\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>)\n );\n});\n"],"names":[],"version":3,"file":"ComboBox.main.js.map"}
|
package/dist/ComboBox.mjs
CHANGED
|
@@ -2,9 +2,9 @@ import "./combobox.1c1869da.css";
|
|
|
2
2
|
import $c3ZYr$combobox_cssmodulejs from "./combobox_css.mjs";
|
|
3
3
|
import $c3ZYr$intlStringsmodulejs from "./intlStrings.mjs";
|
|
4
4
|
import {MobileComboBox as $a1ae4cad4496428f$export$7637df911c069b4d} from "./MobileComboBox.mjs";
|
|
5
|
-
import "./vars.
|
|
5
|
+
import "./vars.3f2ff1e8.css";
|
|
6
6
|
import $c3ZYr$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
|
|
7
|
-
import "./vars.
|
|
7
|
+
import "./vars.202cbdb0.css";
|
|
8
8
|
import $c3ZYr$textfield_vars_cssmodulejs from "./textfield_vars_css.mjs";
|
|
9
9
|
import $c3ZYr$spectrumiconsuiChevronDownMedium from "@spectrum-icons/ui/ChevronDownMedium";
|
|
10
10
|
import {useIsMobileDevice as $c3ZYr$useIsMobileDevice, useUnwrapDOMRef as $c3ZYr$useUnwrapDOMRef, useFocusableRef as $c3ZYr$useFocusableRef, useResizeObserver as $c3ZYr$useResizeObserver, dimensionValue as $c3ZYr$dimensionValue, classNames as $c3ZYr$classNames} from "@react-spectrum/utils";
|
|
@@ -60,7 +60,7 @@ function $parcel$interopDefault(a) {
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
const $2289f375e813f187$export$72b9695b8216309a = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBox(props, ref) {
|
|
64
64
|
props = (0, $c3ZYr$useProviderProps)(props);
|
|
65
65
|
props = (0, $c3ZYr$useFormProps)(props);
|
|
66
66
|
if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
|
|
@@ -75,7 +75,7 @@ function $2289f375e813f187$var$ComboBox(props, ref) {
|
|
|
75
75
|
...props,
|
|
76
76
|
ref: ref
|
|
77
77
|
});
|
|
78
|
-
}
|
|
78
|
+
});
|
|
79
79
|
const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBoxBase(props, ref) {
|
|
80
80
|
let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, allowsCustomValue: allowsCustomValue, menuWidth: customMenuWidth, name: name, formValue: formValue = 'text' } = props;
|
|
81
81
|
if (allowsCustomValue) formValue = 'text';
|
|
@@ -283,9 +283,6 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
283
283
|
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-Dropdown-chevron')
|
|
284
284
|
})))));
|
|
285
285
|
});
|
|
286
|
-
/**
|
|
287
|
-
* ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
|
|
288
|
-
*/ const $2289f375e813f187$export$72b9695b8216309a = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef($2289f375e813f187$var$ComboBox);
|
|
289
286
|
|
|
290
287
|
|
|
291
288
|
export {$2289f375e813f187$export$72b9695b8216309a as ComboBox};
|
package/dist/ComboBox.module.js
CHANGED
|
@@ -2,9 +2,9 @@ import "./combobox.1c1869da.css";
|
|
|
2
2
|
import $c3ZYr$combobox_cssmodulejs from "./combobox_css.module.js";
|
|
3
3
|
import $c3ZYr$intlStringsmodulejs from "./intlStrings.module.js";
|
|
4
4
|
import {MobileComboBox as $a1ae4cad4496428f$export$7637df911c069b4d} from "./MobileComboBox.module.js";
|
|
5
|
-
import "./vars.
|
|
5
|
+
import "./vars.3f2ff1e8.css";
|
|
6
6
|
import $c3ZYr$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.module.js";
|
|
7
|
-
import "./vars.
|
|
7
|
+
import "./vars.202cbdb0.css";
|
|
8
8
|
import $c3ZYr$textfield_vars_cssmodulejs from "./textfield_vars_css.module.js";
|
|
9
9
|
import $c3ZYr$spectrumiconsuiChevronDownMedium from "@spectrum-icons/ui/ChevronDownMedium";
|
|
10
10
|
import {useIsMobileDevice as $c3ZYr$useIsMobileDevice, useUnwrapDOMRef as $c3ZYr$useUnwrapDOMRef, useFocusableRef as $c3ZYr$useFocusableRef, useResizeObserver as $c3ZYr$useResizeObserver, dimensionValue as $c3ZYr$dimensionValue, classNames as $c3ZYr$classNames} from "@react-spectrum/utils";
|
|
@@ -60,7 +60,7 @@ function $parcel$interopDefault(a) {
|
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
|
-
|
|
63
|
+
const $2289f375e813f187$export$72b9695b8216309a = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBox(props, ref) {
|
|
64
64
|
props = (0, $c3ZYr$useProviderProps)(props);
|
|
65
65
|
props = (0, $c3ZYr$useFormProps)(props);
|
|
66
66
|
if (props.placeholder) console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');
|
|
@@ -75,7 +75,7 @@ function $2289f375e813f187$var$ComboBox(props, ref) {
|
|
|
75
75
|
...props,
|
|
76
76
|
ref: ref
|
|
77
77
|
});
|
|
78
|
-
}
|
|
78
|
+
});
|
|
79
79
|
const $2289f375e813f187$var$ComboBoxBase = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef(function ComboBoxBase(props, ref) {
|
|
80
80
|
let { menuTrigger: menuTrigger = 'input', shouldFlip: shouldFlip = true, direction: direction = 'bottom', align: align = 'start', isQuiet: isQuiet, loadingState: loadingState, onLoadMore: onLoadMore, allowsCustomValue: allowsCustomValue, menuWidth: customMenuWidth, name: name, formValue: formValue = 'text' } = props;
|
|
81
81
|
if (allowsCustomValue) formValue = 'text';
|
|
@@ -283,9 +283,6 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
283
283
|
UNSAFE_className: (0, $c3ZYr$classNames)((0, ($parcel$interopDefault($c3ZYr$inputgroup_vars_cssmodulejs))), 'spectrum-Dropdown-chevron')
|
|
284
284
|
})))));
|
|
285
285
|
});
|
|
286
|
-
/**
|
|
287
|
-
* ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
|
|
288
|
-
*/ const $2289f375e813f187$export$72b9695b8216309a = /*#__PURE__*/ (0, $c3ZYr$react).forwardRef($2289f375e813f187$var$ComboBox);
|
|
289
286
|
|
|
290
287
|
|
|
291
288
|
export {$2289f375e813f187$export$72b9695b8216309a as ComboBox};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@react-spectrum/combobox/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {\n classNames,\n dimensionValue,\n useFocusableRef,\n useIsMobileDevice,\n useResizeObserver,\n useUnwrapDOMRef\n} from '@react-spectrum/utils';\nimport comboboxStyles from './combobox.css';\nimport {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '@react-spectrum/overlays';\nimport {PressResponder, useHover} from '@react-aria/interactions';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumComboBoxProps} from '@react-types/combobox';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useComboBox} from '@react-aria/combobox';\nimport {useComboBoxState} from '@react-stately/combobox';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\n\nfunction ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');\n }\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState(\n {\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n }\n );\n let layout = useListBoxLayout();\n\n let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef} />\n </Field>\n {name && formValue === 'key' && <input type=\"hidden\" name={name} value={state.selectedKey ?? ''} />}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy ?? undefined}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() => isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults')}\n </span>\n )} />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n triggerProps: AriaButtonProps,\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>,\n style?: React.CSSProperties,\n className?: string,\n isOpen?: boolean\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: ForwardedRef<HTMLElement | null>) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(\n styles,\n 'spectrum-InputGroup-input-circleLoader'\n )\n )} />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n // If loading is no longer happening, clear any timers and hide the loading circle\n setShowLoading(false);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n (<FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={\n classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )\n }>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-InputGroup-field'\n )\n }\n inputClassName={\n classNames(\n styles,\n 'spectrum-InputGroup-input'\n )\n }\n validationIconClassName={\n classNames(\n styles,\n 'spectrum-InputGroup-input-validationIcon'\n )\n }\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-FieldButton'\n )\n }\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>)\n );\n});\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.\n */\nconst _ComboBox = React.forwardRef(ComboBox) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\nexport {_ComboBox as ComboBox};\n"],"names":[],"version":3,"file":"ComboBox.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/@react-spectrum/combobox/src/ComboBox.tsx"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport ChevronDownMedium from '@spectrum-icons/ui/ChevronDownMedium';\nimport {\n classNames,\n dimensionValue,\n useFocusableRef,\n useIsMobileDevice,\n useResizeObserver,\n useUnwrapDOMRef\n} from '@react-spectrum/utils';\nimport comboboxStyles from './combobox.css';\nimport {DOMRefValue, FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {Field} from '@react-spectrum/label';\nimport {FieldButton} from '@react-spectrum/button';\nimport {FocusRing} from '@react-aria/focus';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ListBoxBase, useListBoxLayout} from '@react-spectrum/listbox';\nimport {MobileComboBox} from './MobileComboBox';\nimport {Popover} from '@react-spectrum/overlays';\nimport {PressResponder, useHover} from '@react-aria/interactions';\nimport {ProgressCircle} from '@react-spectrum/progress';\nimport React, {\n ForwardedRef,\n InputHTMLAttributes,\n ReactElement,\n RefObject,\n useCallback,\n useEffect,\n useRef,\n useState\n} from 'react';\nimport {SpectrumComboBoxProps} from '@react-types/combobox';\nimport styles from '@adobe/spectrum-css-temp/components/inputgroup/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';\nimport {useComboBox} from '@react-aria/combobox';\nimport {useComboBoxState} from '@react-stately/combobox';\nimport {useFilter, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider, useProviderProps} from '@react-spectrum/provider';\n\n/**\n * ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.\n */\nexport const ComboBox = React.forwardRef(function ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {\n props = useProviderProps(props);\n props = useFormProps(props);\n\n if (props.placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/ComboBox.html#help-text');\n }\n\n let isMobile = useIsMobileDevice();\n if (isMobile) {\n // menuTrigger=focus/manual don't apply to mobile combobox\n return <MobileComboBox {...props} menuTrigger=\"input\" ref={ref} />;\n } else {\n return <ComboBoxBase {...props} ref={ref} />;\n }\n}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;\n\nconst ComboBoxBase = React.forwardRef(function ComboBoxBase(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {\n let {\n menuTrigger = 'input',\n shouldFlip = true,\n direction = 'bottom',\n align = 'start',\n isQuiet,\n loadingState,\n onLoadMore,\n allowsCustomValue,\n menuWidth: customMenuWidth,\n name,\n formValue = 'text'\n } = props;\n if (allowsCustomValue) {\n formValue = 'text';\n }\n\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let isAsync = loadingState != null;\n let popoverRef = useRef<DOMRefValue<HTMLDivElement>>(null);\n let unwrappedPopoverRef = useUnwrapDOMRef(popoverRef);\n let buttonRef = useRef<FocusableRefValue<HTMLElement>>(null);\n let unwrappedButtonRef = useUnwrapDOMRef(buttonRef);\n let listBoxRef = useRef(null);\n let inputRef = useRef<HTMLInputElement>(null);\n // serve as the new popover `triggerRef` instead of `unwrappedButtonRef` before for better positioning.\n let inputGroupRef = useRef<HTMLDivElement>(null);\n let domRef = useFocusableRef(ref, inputRef);\n\n let {contains} = useFilter({sensitivity: 'base'});\n let state = useComboBoxState(\n {\n ...props,\n defaultFilter: contains,\n allowsEmptyCollection: isAsync\n }\n );\n let layout = useListBoxLayout();\n\n let {buttonProps, inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useComboBox(\n {\n ...props,\n layoutDelegate: layout,\n buttonRef: unwrappedButtonRef,\n popoverRef: unwrappedPopoverRef,\n listBoxRef,\n inputRef: inputRef,\n menuTrigger,\n name: formValue === 'text' ? name : undefined\n },\n state\n );\n\n // Measure the width of the inputfield and the button to inform the width of the menu (below).\n let [menuWidth, setMenuWidth] = useState<number | undefined>(undefined);\n let {scale} = useProvider();\n\n let onResize = useCallback(() => {\n if (unwrappedButtonRef.current && inputRef.current) {\n let buttonWidth = unwrappedButtonRef.current.offsetWidth;\n let inputWidth = inputRef.current.offsetWidth;\n setMenuWidth(buttonWidth + inputWidth);\n }\n }, [unwrappedButtonRef, inputRef, setMenuWidth]);\n\n useResizeObserver({\n ref: domRef,\n onResize: onResize\n });\n\n useLayoutEffect(onResize, [scale, onResize]);\n\n let width = isQuiet ? undefined : menuWidth;\n let style = {\n width: customMenuWidth ? dimensionValue(customMenuWidth) : width,\n minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth\n };\n let cbInputProps = {...props, children: null};\n\n return (\n <>\n <Field\n {...props}\n descriptionProps={descriptionProps}\n errorMessageProps={errorMessageProps}\n isInvalid={isInvalid}\n validationErrors={validationErrors}\n validationDetails={validationDetails}\n labelProps={labelProps}\n ref={domRef}>\n <ComboBoxInput\n {...cbInputProps}\n isOpen={state.isOpen}\n loadingState={loadingState}\n inputProps={inputProps}\n inputRef={inputRef}\n triggerProps={buttonProps}\n triggerRef={buttonRef}\n validationState={props.validationState || (isInvalid ? 'invalid' : undefined)}\n ref={inputGroupRef} />\n </Field>\n {name && formValue === 'key' && <input type=\"hidden\" name={name} value={state.selectedKey ?? ''} />}\n <Popover\n state={state}\n UNSAFE_style={style}\n UNSAFE_className={classNames(styles, 'spectrum-InputGroup-popover', {'spectrum-InputGroup-popover--quiet': isQuiet})}\n ref={popoverRef}\n triggerRef={inputGroupRef}\n scrollRef={listBoxRef}\n placement={`${direction} ${align}`}\n hideArrow\n isNonModal\n shouldFlip={shouldFlip}>\n <ListBoxBase\n {...listBoxProps}\n ref={listBoxRef}\n disallowEmptySelection\n autoFocus={state.focusStrategy ?? undefined}\n shouldSelectOnPressUp\n focusOnPointerEnter\n layout={layout}\n state={state}\n shouldUseVirtualFocus\n isLoading={loadingState === 'loading' || loadingState === 'loadingMore'}\n showLoadingSpinner={loadingState === 'loadingMore'}\n onLoadMore={onLoadMore}\n renderEmptyState={() => isAsync && (\n <span className={classNames(comboboxStyles, 'no-results')}>\n {loadingState === 'loading' ? stringFormatter.format('loading') : stringFormatter.format('noResults')}\n </span>\n )} />\n </Popover>\n </>\n );\n});\n\ninterface ComboBoxInputProps extends SpectrumComboBoxProps<unknown> {\n inputProps: InputHTMLAttributes<HTMLInputElement>,\n inputRef: RefObject<HTMLInputElement | HTMLTextAreaElement | null>,\n triggerProps: AriaButtonProps,\n triggerRef: RefObject<FocusableRefValue<HTMLElement> | null>,\n style?: React.CSSProperties,\n className?: string,\n isOpen?: boolean\n}\n\nconst ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInputProps, ref: ForwardedRef<HTMLElement | null>) {\n let {\n isQuiet,\n isDisabled,\n validationState,\n inputProps,\n inputRef,\n triggerProps,\n triggerRef,\n autoFocus,\n style,\n className,\n loadingState,\n isOpen,\n menuTrigger\n } = props;\n let {hoverProps, isHovered} = useHover({});\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/combobox');\n let timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n let [showLoading, setShowLoading] = useState(false);\n\n let loadingCircle = (\n <ProgressCircle\n aria-label={stringFormatter.format('loading')}\n size=\"S\"\n isIndeterminate\n UNSAFE_className={classNames(\n textfieldStyles,\n 'spectrum-Textfield-circleLoader',\n classNames(\n styles,\n 'spectrum-InputGroup-input-circleLoader'\n )\n )} />\n );\n\n let isLoading = loadingState === 'loading' || loadingState === 'filtering';\n let inputValue = inputProps.value;\n let lastInputValue = useRef(inputValue);\n useEffect(() => {\n if (isLoading && !showLoading) {\n if (timeout.current === null) {\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n\n // If user is typing, clear the timer and restart since it is a new request\n if (inputValue !== lastInputValue.current) {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => {\n setShowLoading(true);\n }, 500);\n }\n } else if (!isLoading) {\n // If loading is no longer happening, clear any timers and hide the loading circle\n setShowLoading(false);\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n useEffect(() => {\n return () => {\n if (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n };\n }, []);\n\n return (\n (<FocusRing\n within\n isTextInput\n focusClass={classNames(styles, 'is-focused')}\n focusRingClass={classNames(styles, 'focus-ring')}\n autoFocus={autoFocus}>\n <div\n {...hoverProps}\n ref={ref as RefObject<HTMLDivElement | null>}\n style={style}\n className={\n classNames(\n styles,\n 'spectrum-InputGroup',\n {\n 'spectrum-InputGroup--quiet': isQuiet,\n 'is-disabled': isDisabled,\n 'spectrum-InputGroup--invalid': validationState === 'invalid' && !isDisabled,\n 'is-hovered': isHovered\n },\n className\n )\n }>\n <TextFieldBase\n inputProps={inputProps}\n inputRef={inputRef}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-InputGroup-field'\n )\n }\n inputClassName={\n classNames(\n styles,\n 'spectrum-InputGroup-input'\n )\n }\n validationIconClassName={\n classNames(\n styles,\n 'spectrum-InputGroup-input-validationIcon'\n )\n }\n isDisabled={isDisabled}\n isQuiet={isQuiet}\n validationState={validationState}\n // loading circle should only be displayed if menu is open, if menuTrigger is \"manual\", or first time load (to stop circle from showing up when user selects an option)\n // TODO: add special case for completionMode: complete as well\n isLoading={showLoading && (isOpen || menuTrigger === 'manual' || loadingState === 'loading')}\n loadingIndicator={loadingState != null ? loadingCircle : undefined}\n disableFocusRing />\n <PressResponder preventFocusOnPress isPressed={isOpen}>\n <FieldButton\n {...triggerProps}\n ref={triggerRef}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-FieldButton'\n )\n }\n isQuiet={isQuiet}\n validationState={validationState}>\n <ChevronDownMedium UNSAFE_className={classNames(styles, 'spectrum-Dropdown-chevron')} />\n </FieldButton>\n </PressResponder>\n </div>\n </FocusRing>)\n );\n});\n"],"names":[],"version":3,"file":"ComboBox.module.js.map"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
require("./vars.
|
|
1
|
+
require("./vars.8e9a1ae1.css");
|
|
2
2
|
var $afc5a4514aca2340$exports = require("./button_vars_css.main.js");
|
|
3
3
|
require("./combobox.1c1869da.css");
|
|
4
4
|
var $41fae9390a5a37fa$exports = require("./combobox_css.main.js");
|
|
5
5
|
var $9e627d9ac6346a53$exports = require("./intlStrings.main.js");
|
|
6
|
-
require("./vars.
|
|
6
|
+
require("./vars.3ad1a294.css");
|
|
7
7
|
var $eb2fc0ee655eff6b$exports = require("./fieldlabel_vars_css.main.js");
|
|
8
8
|
require("./vars.3e061265.css");
|
|
9
9
|
var $1e139f06a0a4b696$exports = require("./search_vars_css.main.js");
|
|
10
|
-
require("./vars.
|
|
10
|
+
require("./vars.3f2ff1e8.css");
|
|
11
11
|
var $2f86633ce5b04f1e$exports = require("./inputgroup_vars_css.main.js");
|
|
12
|
-
require("./vars.
|
|
12
|
+
require("./vars.202cbdb0.css");
|
|
13
13
|
var $40cb3a00c193680f$exports = require("./textfield_vars_css.main.js");
|
|
14
14
|
var $iKVNA$spectrumiconsuiAlertMedium = require("@spectrum-icons/ui/AlertMedium");
|
|
15
15
|
var $iKVNA$spectrumiconsuiCheckmarkMedium = require("@spectrum-icons/ui/CheckmarkMedium");
|
package/dist/MobileComboBox.mjs
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.8e9a1ae1.css";
|
|
2
2
|
import $gRayl$button_vars_cssmodulejs from "./button_vars_css.mjs";
|
|
3
3
|
import "./combobox.1c1869da.css";
|
|
4
4
|
import $gRayl$combobox_cssmodulejs from "./combobox_css.mjs";
|
|
5
5
|
import $gRayl$intlStringsmodulejs from "./intlStrings.mjs";
|
|
6
|
-
import "./vars.
|
|
6
|
+
import "./vars.3ad1a294.css";
|
|
7
7
|
import $gRayl$fieldlabel_vars_cssmodulejs from "./fieldlabel_vars_css.mjs";
|
|
8
8
|
import "./vars.3e061265.css";
|
|
9
9
|
import $gRayl$search_vars_cssmodulejs from "./search_vars_css.mjs";
|
|
10
|
-
import "./vars.
|
|
10
|
+
import "./vars.3f2ff1e8.css";
|
|
11
11
|
import $gRayl$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.mjs";
|
|
12
|
-
import "./vars.
|
|
12
|
+
import "./vars.202cbdb0.css";
|
|
13
13
|
import $gRayl$textfield_vars_cssmodulejs from "./textfield_vars_css.mjs";
|
|
14
14
|
import $gRayl$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
|
|
15
15
|
import $gRayl$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import "./vars.
|
|
1
|
+
import "./vars.8e9a1ae1.css";
|
|
2
2
|
import $gRayl$button_vars_cssmodulejs from "./button_vars_css.module.js";
|
|
3
3
|
import "./combobox.1c1869da.css";
|
|
4
4
|
import $gRayl$combobox_cssmodulejs from "./combobox_css.module.js";
|
|
5
5
|
import $gRayl$intlStringsmodulejs from "./intlStrings.module.js";
|
|
6
|
-
import "./vars.
|
|
6
|
+
import "./vars.3ad1a294.css";
|
|
7
7
|
import $gRayl$fieldlabel_vars_cssmodulejs from "./fieldlabel_vars_css.module.js";
|
|
8
8
|
import "./vars.3e061265.css";
|
|
9
9
|
import $gRayl$search_vars_cssmodulejs from "./search_vars_css.module.js";
|
|
10
|
-
import "./vars.
|
|
10
|
+
import "./vars.3f2ff1e8.css";
|
|
11
11
|
import $gRayl$inputgroup_vars_cssmodulejs from "./inputgroup_vars_css.module.js";
|
|
12
|
-
import "./vars.
|
|
12
|
+
import "./vars.202cbdb0.css";
|
|
13
13
|
import $gRayl$textfield_vars_cssmodulejs from "./textfield_vars_css.module.js";
|
|
14
14
|
import $gRayl$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
|
|
15
15
|
import $gRayl$spectrumiconsuiCheckmarkMedium from "@spectrum-icons/ui/CheckmarkMedium";
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
1
|
+
{"mappings":";;;ACuDA;;GAEG;AACH,OAAO,MAAM,UAeP,CAAC,CAAC,EAAE,KAAK,EAAE,sBAAsB,CAAC,CAAC,GAAG;IAAC,GAAG,CAAC,EAAE,aAAa,WAAW,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AC1D/F,OAAO,EAAC,IAAI,EAAE,OAAO,EAAC,MAAM,4BAA4B,CAAC;AACzD,YAAY,EAAC,qBAAqB,EAAC,MAAM,uBAAuB,CAAC","sources":["packages/@react-spectrum/combobox/src/packages/@react-spectrum/combobox/src/MobileComboBox.tsx","packages/@react-spectrum/combobox/src/packages/@react-spectrum/combobox/src/ComboBox.tsx","packages/@react-spectrum/combobox/src/packages/@react-spectrum/combobox/src/index.ts","packages/@react-spectrum/combobox/src/index.ts"],"sourcesContent":[null,null,null,"/*\n * Copyright 2020 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 */\n\n/// <reference types=\"css-module-types\" />\n\nexport {ComboBox} from './ComboBox';\nexport {Item, Section} from '@react-stately/collections';\nexport type {SpectrumComboBoxProps} from '@react-types/combobox';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
|
@@ -97,6 +97,7 @@
|
|
|
97
97
|
border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
98
98
|
padding: 3px var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) 5px calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) - 1px);
|
|
99
99
|
text-indent: 0;
|
|
100
|
+
inline-size: 100%;
|
|
100
101
|
height: var(--spectrum-textfield-height, var(--spectrum-alias-single-line-height));
|
|
101
102
|
vertical-align: top;
|
|
102
103
|
font-size: var(--spectrum-textfield-text-size, var(--spectrum-alias-font-size-default));
|
|
@@ -106,7 +107,6 @@
|
|
|
106
107
|
-webkit-appearance: none;
|
|
107
108
|
-moz-appearance: textfield;
|
|
108
109
|
outline: none;
|
|
109
|
-
inline-size: 100%;
|
|
110
110
|
margin: 0;
|
|
111
111
|
overflow: visible;
|
|
112
112
|
}
|
|
@@ -199,10 +199,10 @@
|
|
|
199
199
|
}
|
|
200
200
|
|
|
201
201
|
.zo2IKa_spectrum-Textfield--multiline .zo2IKa_spectrum-Textfield-input {
|
|
202
|
+
height: auto;
|
|
202
203
|
min-height: var(--spectrum-global-dimension-size-700);
|
|
203
204
|
padding: 3px var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) 5px calc(var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) - 1px);
|
|
204
205
|
resize: none;
|
|
205
|
-
height: auto;
|
|
206
206
|
overflow: auto;
|
|
207
207
|
}
|
|
208
208
|
|
|
@@ -547,4 +547,4 @@
|
|
|
547
547
|
border-color: var(--spectrum-textfield-quiet-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
548
548
|
}
|
|
549
549
|
}
|
|
550
|
-
/*# sourceMappingURL=vars.
|
|
550
|
+
/*# sourceMappingURL=vars.202cbdb0.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;AAQE;;;;;;AAWF;;;;;;;;;;;;;;;;;;;;AA4CE;;;;;;;;AAYA;;;;;;;AAWE;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAMA;;;;AAKF;;;;;AAME;;;;AAQF;;;;;AAOA;;;;;AAAA;;;;;AAOA;;;;AAIA;;;;;;;;AAUA;;;;;;;AASA;;;;AAIA;;;;AASF;;;;AAIA;;;;;AAKE;;;;AAIA;;;;;AAME;;;;AAOJ;;;;;;;;AAUE;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAaA;;;;AASE;;;;AAIE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKF;;;;;AAQF;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;AAiBF;;;;;;AAKE;;;;AAKA;;;;;AAIE;;;;AAMF;;;;;;AAKE;;;;AAMF;;;;AAME;;;;;AAMF;;;;;;;AASE;;;;AAKA;;;;AAdF;;;;;;;AASE;;;;AAKA;;;;AAKF;;;;AAGE;;;;AAcE;;;;;AAOJ;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AAMF;;;;;AAOF;;;;AAGE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AASA;;;;AASJ;;;;AAIA;;;;AAKF;EACE;;;;;;;;;;;;EAUE;;;;;EAKE;;;;;;EAKE","sources":["packages/@adobe/spectrum-css-temp/components/textfield/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.
|
|
1
|
+
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;AAQE;;;;;;AAWF;;;;;;;;;;;;;;;;;;;;AA4CE;;;;;;;;AAYA;;;;;;;AAWE;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAJA;;;;AAIA;;;;AAMA;;;;AAKF;;;;;AAME;;;;AAQF;;;;;AAOA;;;;;AAAA;;;;;AAOA;;;;AAIA;;;;;;;;AAUA;;;;;;;AASA;;;;AAIA;;;;AASF;;;;AAIA;;;;;AAKE;;;;AAIA;;;;;AAME;;;;AAOJ;;;;;;;;AAUE;;;;AAKF;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOA;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASA;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAaA;;;;AASE;;;;AAIE;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKF;;;;;AAQF;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAME;;;;AAiBF;;;;;;AAKE;;;;AAKA;;;;;AAIE;;;;AAMF;;;;;;AAKE;;;;AAMF;;;;AAME;;;;;AAMF;;;;;;;AASE;;;;AAKA;;;;AAdF;;;;;;;AASE;;;;AAKA;;;;AAKF;;;;AAGE;;;;AAcE;;;;;AAOJ;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AAMF;;;;;AAOF;;;;AAGE;;;;AAIA;;;;AAIA;;;;AAME;;;;;AASA;;;;AASJ;;;;AAIA;;;;AAKF;EACE;;;;;;;;;;;;EAUE;;;;;EAKE;;;;;;EAKE","sources":["packages/@adobe/spectrum-css-temp/components/textfield/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.202cbdb0.css.map"}
|
|
@@ -152,9 +152,9 @@
|
|
|
152
152
|
}
|
|
153
153
|
|
|
154
154
|
.jIQVGq_spectrum-Field:where(.jIQVGq_spectrum-Field--positionSide) .jIQVGq_spectrum-Field-wrapper {
|
|
155
|
+
min-width: 0;
|
|
155
156
|
width: var(--spectrum-field-default-width);
|
|
156
157
|
flex: 1;
|
|
157
|
-
min-width: 0;
|
|
158
158
|
height: 100%;
|
|
159
159
|
}
|
|
160
160
|
|
|
@@ -214,8 +214,8 @@
|
|
|
214
214
|
}
|
|
215
215
|
|
|
216
216
|
.jIQVGq_spectrum-Form.jIQVGq_spectrum-Form--positionSide .jIQVGq_spectrum-Field-field {
|
|
217
|
-
min-width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
|
|
218
217
|
width: auto;
|
|
218
|
+
min-width: var(--spectrum-alias-single-line-width, var(--spectrum-global-dimension-size-2400));
|
|
219
219
|
}
|
|
220
220
|
|
|
221
221
|
.jIQVGq_spectrum-Form.jIQVGq_spectrum-Form--positionTop {
|
|
@@ -268,4 +268,4 @@
|
|
|
268
268
|
:is(.jIQVGq_spectrum-FieldLabel, .jIQVGq_spectrum-Form-itemLabel).jIQVGq_is-disabled {
|
|
269
269
|
color: var(--spectrum-fieldlabel-text-color-disabled, var(--spectrum-alias-text-color-disabled));
|
|
270
270
|
}
|
|
271
|
-
/*# sourceMappingURL=vars.
|
|
271
|
+
/*# sourceMappingURL=vars.3ad1a294.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;;;;;;AAsBA;;;;;;AAMA;;;;;;;AAOA;;;;;AAUA;;;;;AAIE;;;;;;AAMA;;;;;;;;;;AAUE;;;;;AAMA;;;;AAIA;;;;AAOF;;;;;AAKE;;;;;;;AAaE;;;;AAMF;;;;;AAKA;;;;;AAOA;;;;AAaF;;;;;;;;AAOE;;;;;AAME;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAGE;;;;AAMJ;;;;AAIA;;;;;AAOF;;;;;;;AASE;;;;;AASF;;;;AAGE;;;;;;AAOF;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAkBF;;;;AAIE","sources":["packages/@adobe/spectrum-css-temp/components/fieldlabel/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.
|
|
1
|
+
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;;;;;;AAsBA;;;;;;AAMA;;;;;;;AAOA;;;;;AAUA;;;;;AAIE;;;;;;AAMA;;;;;;;;;;AAUE;;;;;AAMA;;;;AAIA;;;;AAOF;;;;;AAKE;;;;;;;AAaE;;;;AAMF;;;;;AAKA;;;;;AAOA;;;;AAaF;;;;;;;;AAOE;;;;;AAME;;;;AAKA;;;;AAKA;;;;AAKA;;;;AAGE;;;;AAMJ;;;;AAIA;;;;;AAOF;;;;;;;AASE;;;;;AASF;;;;AAGE;;;;;;AAOF;;;;AAIA;;;;AAIA;;;;AAIA;;;;;AAKA;;;;AAkBF;;;;AAIE","sources":["packages/@adobe/spectrum-css-temp/components/fieldlabel/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.3ad1a294.css.map"}
|
|
@@ -79,10 +79,10 @@
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
.penpuW_spectrum-InputGroup {
|
|
82
|
+
block-size: max-content;
|
|
82
83
|
min-width: calc(2.5 * var(--spectrum-dropdown-height, var(--spectrum-global-dimension-size-400)));
|
|
83
84
|
border-radius: var(--spectrum-alias-border-radius-regular, var(--spectrum-global-dimension-size-50));
|
|
84
85
|
flex-flow: row;
|
|
85
|
-
block-size: max-content;
|
|
86
86
|
display: inline-flex;
|
|
87
87
|
position: relative;
|
|
88
88
|
}
|
|
@@ -646,4 +646,4 @@
|
|
|
646
646
|
box-shadow: 0 2px 0 0 var(--spectrum-dropdown-border-color-key-focus, var(--spectrum-alias-border-color-focus));
|
|
647
647
|
}
|
|
648
648
|
}
|
|
649
|
-
/*# sourceMappingURL=vars.
|
|
649
|
+
/*# sourceMappingURL=vars.3f2ff1e8.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAWE;;;;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAaE;;;;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAaA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;;AAME;;;;;;;AAOE;;;;;;;AAQA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKE;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;AAMA;;;;AAGE;;;;AASE;;;;;AAMF;;;;;;AAME;;;;;AAKA;;;;AAKA;;;;;;;AAQF;;;;;;;;AAME;;;;;;;;;;AAYA;;;;;;;AAYE;;;;;AAMA;;;;AAmBN;;;;;AAKI;;;;AAOE;;;;AAcA;;;;AAWF;;;;AAME;;;;AAOA;;;;AASA;;;;AAQJ;;;;AAgBA;;;;AAKF;;;;AAQM;;;;AAqBA;;;;AAgBA;;;;AAQA;;;;AAME;;;;AAOA;;;;AAQF;;;;AAgBF;;;;AAMA;;;;AAMF;;;;AAGE;;;;AAUA;;;;AAME;;;;AACE;;;;AAOF;;;;AAIE;;;;;AAQJ;;;;AAII;;;;AAEE;;;;AAIE;;;;AAKJ;;;;AAQR;EACE;;;;;;;;;;;;;;;;EAeE;;;;;;EAKA;;;;;;;;;;;;;;;;EAiBE;;;;EAeI;;;;EAQF;;;;EAQF;;;;EAIF;;;;EAuBE;;;;EAGA","sources":["packages/@adobe/spectrum-css-temp/components/inputgroup/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.
|
|
1
|
+
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAQA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;AAWE;;;;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAAA;;;;;;;AAaE;;;;;;;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAaA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AASA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;AAMA;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAAA;;;;;AAMA;;;;;AAME;;;;;;;AAOE;;;;;;;AAQA;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AASF;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKE;;;;AAMA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;AAMA;;;;AAGE;;;;AASE;;;;;AAMF;;;;;;AAME;;;;;AAKA;;;;AAKA;;;;;;;AAQF;;;;;;;;AAME;;;;;;;;;;AAYA;;;;;;;AAYE;;;;;AAMA;;;;AAmBN;;;;;AAKI;;;;AAOE;;;;AAcA;;;;AAWF;;;;AAME;;;;AAOA;;;;AASA;;;;AAQJ;;;;AAgBA;;;;AAKF;;;;AAQM;;;;AAqBA;;;;AAgBA;;;;AAQA;;;;AAME;;;;AAOA;;;;AAQF;;;;AAgBF;;;;AAMA;;;;AAMF;;;;AAGE;;;;AAUA;;;;AAME;;;;AACE;;;;AAOF;;;;AAIE;;;;;AAQJ;;;;AAII;;;;AAEE;;;;AAIE;;;;AAKJ;;;;AAQR;EACE;;;;;;;;;;;;;;;;EAeE;;;;;;EAKA;;;;;;;;;;;;;;;;EAiBE;;;;EAeI;;;;EAQF;;;;EAQF;;;;EAIF;;;;EAuBE;;;;EAGA","sources":["packages/@adobe/spectrum-css-temp/components/inputgroup/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.3f2ff1e8.css.map"}
|
|
@@ -130,23 +130,23 @@ button.ntVziG_spectrum-BaseButton {
|
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
.ntVziG_spectrum-BaseButton .ntVziG_spectrum-Icon {
|
|
133
|
+
max-block-size: 100%;
|
|
133
134
|
transition: background var(--spectrum-global-animation-duration-100, .13s) ease-out, fill var(--spectrum-global-animation-duration-100, .13s) ease-out;
|
|
134
135
|
box-sizing: initial;
|
|
135
136
|
flex-shrink: 0;
|
|
136
137
|
order: 0;
|
|
137
|
-
max-block-size: 100%;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
.ntVziG_spectrum-Button {
|
|
141
141
|
--spectrum-button-border-radius: var(--spectrum-button-primary-border-radius, var(--spectrum-alias-border-radius-large));
|
|
142
142
|
--spectrum-button-border-width: var(--spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick));
|
|
143
143
|
min-block-size: var(--spectrum-button-primary-height, var(--spectrum-alias-single-line-height));
|
|
144
|
+
block-size: 0%;
|
|
144
145
|
min-inline-size: var(--spectrum-button-primary-min-width);
|
|
145
146
|
padding: var(--spectrum-global-dimension-size-50) calc(var(--spectrum-button-primary-padding-x, var(--spectrum-global-dimension-size-200)) - var(--spectrum-button-primary-border-size, var(--spectrum-alias-border-size-thick)));
|
|
146
147
|
font-size: var(--spectrum-button-primary-text-size, var(--spectrum-alias-pill-button-text-size));
|
|
147
148
|
font-weight: var(--spectrum-button-primary-text-font-weight, var(--spectrum-global-font-weight-bold));
|
|
148
149
|
border-style: solid;
|
|
149
|
-
block-size: 0%;
|
|
150
150
|
padding-block-start: calc(var(--spectrum-global-dimension-size-50) - 1px);
|
|
151
151
|
padding-block-end: calc(var(--spectrum-global-dimension-size-50) + 1px);
|
|
152
152
|
}
|
|
@@ -1642,4 +1642,4 @@ a.ntVziG_spectrum-Button, a.ntVziG_spectrum-ActionButton {
|
|
|
1642
1642
|
--spectrum-actionbutton-static-color-selected-disabled: ButtonFace;
|
|
1643
1643
|
}
|
|
1644
1644
|
}
|
|
1645
|
-
/*# sourceMappingURL=vars.
|
|
1645
|
+
/*# sourceMappingURL=vars.8e9a1ae1.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/button/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.
|
|
1
|
+
{"mappings":"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","sources":["packages/@adobe/spectrum-css-temp/components/button/vars.css"],"sourcesContent":["/*\n * Copyright 2020 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 */\n\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.8e9a1ae1.css.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/combobox",
|
|
3
|
-
"version": "3.14.
|
|
3
|
+
"version": "3.14.1",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,30 +36,30 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/button": "^3.11.
|
|
40
|
-
"@react-aria/combobox": "^3.11.
|
|
41
|
-
"@react-aria/dialog": "^3.5.
|
|
42
|
-
"@react-aria/focus": "^3.19.
|
|
43
|
-
"@react-aria/form": "^3.0.
|
|
44
|
-
"@react-aria/i18n": "^3.12.
|
|
45
|
-
"@react-aria/interactions": "^3.
|
|
46
|
-
"@react-aria/label": "^3.7.
|
|
47
|
-
"@react-aria/overlays": "^3.
|
|
48
|
-
"@react-aria/utils": "^3.
|
|
49
|
-
"@react-spectrum/button": "^3.16.
|
|
50
|
-
"@react-spectrum/form": "^3.7.
|
|
51
|
-
"@react-spectrum/label": "^3.16.
|
|
52
|
-
"@react-spectrum/listbox": "^3.14.
|
|
53
|
-
"@react-spectrum/overlays": "^5.7.
|
|
54
|
-
"@react-spectrum/progress": "^3.7.
|
|
55
|
-
"@react-spectrum/textfield": "^3.12.
|
|
56
|
-
"@react-spectrum/utils": "^3.12.
|
|
57
|
-
"@react-stately/collections": "^3.12.
|
|
58
|
-
"@react-stately/combobox": "^3.10.
|
|
59
|
-
"@react-types/button": "^3.10.
|
|
60
|
-
"@react-types/combobox": "^3.13.
|
|
61
|
-
"@react-types/shared": "^3.
|
|
62
|
-
"@spectrum-icons/ui": "^3.6.
|
|
39
|
+
"@react-aria/button": "^3.11.1",
|
|
40
|
+
"@react-aria/combobox": "^3.11.1",
|
|
41
|
+
"@react-aria/dialog": "^3.5.21",
|
|
42
|
+
"@react-aria/focus": "^3.19.1",
|
|
43
|
+
"@react-aria/form": "^3.0.12",
|
|
44
|
+
"@react-aria/i18n": "^3.12.5",
|
|
45
|
+
"@react-aria/interactions": "^3.23.0",
|
|
46
|
+
"@react-aria/label": "^3.7.14",
|
|
47
|
+
"@react-aria/overlays": "^3.25.0",
|
|
48
|
+
"@react-aria/utils": "^3.27.0",
|
|
49
|
+
"@react-spectrum/button": "^3.16.10",
|
|
50
|
+
"@react-spectrum/form": "^3.7.11",
|
|
51
|
+
"@react-spectrum/label": "^3.16.11",
|
|
52
|
+
"@react-spectrum/listbox": "^3.14.1",
|
|
53
|
+
"@react-spectrum/overlays": "^5.7.1",
|
|
54
|
+
"@react-spectrum/progress": "^3.7.12",
|
|
55
|
+
"@react-spectrum/textfield": "^3.12.8",
|
|
56
|
+
"@react-spectrum/utils": "^3.12.1",
|
|
57
|
+
"@react-stately/collections": "^3.12.1",
|
|
58
|
+
"@react-stately/combobox": "^3.10.2",
|
|
59
|
+
"@react-types/button": "^3.10.2",
|
|
60
|
+
"@react-types/combobox": "^3.13.2",
|
|
61
|
+
"@react-types/shared": "^3.27.0",
|
|
62
|
+
"@spectrum-icons/ui": "^3.6.12",
|
|
63
63
|
"@swc/helpers": "^0.5.0"
|
|
64
64
|
},
|
|
65
65
|
"devDependencies": {
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
|
|
77
77
|
}
|
package/src/ComboBox.tsx
CHANGED
|
@@ -53,7 +53,10 @@ import {useFormProps} from '@react-spectrum/form';
|
|
|
53
53
|
import {useLayoutEffect} from '@react-aria/utils';
|
|
54
54
|
import {useProvider, useProviderProps} from '@react-spectrum/provider';
|
|
55
55
|
|
|
56
|
-
|
|
56
|
+
/**
|
|
57
|
+
* ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
|
|
58
|
+
*/
|
|
59
|
+
export const ComboBox = React.forwardRef(function ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: FocusableRef<HTMLElement>) {
|
|
57
60
|
props = useProviderProps(props);
|
|
58
61
|
props = useFormProps(props);
|
|
59
62
|
|
|
@@ -68,7 +71,7 @@ function ComboBox<T extends object>(props: SpectrumComboBoxProps<T>, ref: Focusa
|
|
|
68
71
|
} else {
|
|
69
72
|
return <ComboBoxBase {...props} ref={ref} />;
|
|
70
73
|
}
|
|
71
|
-
}
|
|
74
|
+
}) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
|
|
72
75
|
|
|
73
76
|
const ComboBoxBase = React.forwardRef(function ComboBoxBase(props: SpectrumComboBoxProps<any>, ref: FocusableRef<HTMLElement>) {
|
|
74
77
|
let {
|
|
@@ -364,9 +367,3 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
|
|
|
364
367
|
</FocusRing>)
|
|
365
368
|
);
|
|
366
369
|
});
|
|
367
|
-
|
|
368
|
-
/**
|
|
369
|
-
* ComboBoxes combine a text entry with a picker menu, allowing users to filter longer lists to only the selections matching a query.
|
|
370
|
-
*/
|
|
371
|
-
const _ComboBox = React.forwardRef(ComboBox) as <T>(props: SpectrumComboBoxProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
|
|
372
|
-
export {_ComboBox as ComboBox};
|