@react-spectrum/combobox 3.16.3 → 3.16.5
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/ComboBox.main.js +5 -2
- package/dist/ComboBox.main.js.map +1 -1
- package/dist/ComboBox.mjs +5 -2
- package/dist/ComboBox.module.js +5 -2
- package/dist/ComboBox.module.js.map +1 -1
- package/package.json +26 -26
- package/src/ComboBox.tsx +6 -2
package/dist/ComboBox.main.js
CHANGED
|
@@ -237,8 +237,6 @@ const $e4f518eb9b010873$var$ComboBoxInput = /*#__PURE__*/ (0, ($parcel$interopDe
|
|
|
237
237
|
}, 500);
|
|
238
238
|
}
|
|
239
239
|
} else if (!isLoading) {
|
|
240
|
-
// If loading is no longer happening, clear any timers and hide the loading circle
|
|
241
|
-
setShowLoading(false);
|
|
242
240
|
if (timeout.current) clearTimeout(timeout.current);
|
|
243
241
|
timeout.current = null;
|
|
244
242
|
}
|
|
@@ -248,6 +246,11 @@ const $e4f518eb9b010873$var$ComboBoxInput = /*#__PURE__*/ (0, ($parcel$interopDe
|
|
|
248
246
|
showLoading,
|
|
249
247
|
inputValue
|
|
250
248
|
]);
|
|
249
|
+
let [prevIsLoading, setPrevIsLoading] = (0, $XxzjX$react.useState)(isLoading);
|
|
250
|
+
if (prevIsLoading !== isLoading && !isLoading) {
|
|
251
|
+
setShowLoading(false);
|
|
252
|
+
setPrevIsLoading(isLoading);
|
|
253
|
+
}
|
|
251
254
|
(0, $XxzjX$react.useEffect)(()=>{
|
|
252
255
|
return ()=>{
|
|
253
256
|
if (timeout.current) clearTimeout(timeout.current);
|
|
@@ -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\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 let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\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 hasWarned.current = true;\n }\n }, [props.placeholder]);\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} form={props.form} 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 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"}
|
|
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 let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\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 hasWarned.current = true;\n }\n }, [props.placeholder]);\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} form={props.form} 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 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 (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\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
|
@@ -231,8 +231,6 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
231
231
|
}, 500);
|
|
232
232
|
}
|
|
233
233
|
} else if (!isLoading) {
|
|
234
|
-
// If loading is no longer happening, clear any timers and hide the loading circle
|
|
235
|
-
setShowLoading(false);
|
|
236
234
|
if (timeout.current) clearTimeout(timeout.current);
|
|
237
235
|
timeout.current = null;
|
|
238
236
|
}
|
|
@@ -242,6 +240,11 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
242
240
|
showLoading,
|
|
243
241
|
inputValue
|
|
244
242
|
]);
|
|
243
|
+
let [prevIsLoading, setPrevIsLoading] = (0, $c3ZYr$useState)(isLoading);
|
|
244
|
+
if (prevIsLoading !== isLoading && !isLoading) {
|
|
245
|
+
setShowLoading(false);
|
|
246
|
+
setPrevIsLoading(isLoading);
|
|
247
|
+
}
|
|
245
248
|
(0, $c3ZYr$useEffect)(()=>{
|
|
246
249
|
return ()=>{
|
|
247
250
|
if (timeout.current) clearTimeout(timeout.current);
|
package/dist/ComboBox.module.js
CHANGED
|
@@ -231,8 +231,6 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
231
231
|
}, 500);
|
|
232
232
|
}
|
|
233
233
|
} else if (!isLoading) {
|
|
234
|
-
// If loading is no longer happening, clear any timers and hide the loading circle
|
|
235
|
-
setShowLoading(false);
|
|
236
234
|
if (timeout.current) clearTimeout(timeout.current);
|
|
237
235
|
timeout.current = null;
|
|
238
236
|
}
|
|
@@ -242,6 +240,11 @@ const $2289f375e813f187$var$ComboBoxInput = /*#__PURE__*/ (0, $c3ZYr$react).forw
|
|
|
242
240
|
showLoading,
|
|
243
241
|
inputValue
|
|
244
242
|
]);
|
|
243
|
+
let [prevIsLoading, setPrevIsLoading] = (0, $c3ZYr$useState)(isLoading);
|
|
244
|
+
if (prevIsLoading !== isLoading && !isLoading) {
|
|
245
|
+
setShowLoading(false);
|
|
246
|
+
setPrevIsLoading(isLoading);
|
|
247
|
+
}
|
|
245
248
|
(0, $c3ZYr$useEffect)(()=>{
|
|
246
249
|
return ()=>{
|
|
247
250
|
if (timeout.current) clearTimeout(timeout.current);
|
|
@@ -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\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 let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\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 hasWarned.current = true;\n }\n }, [props.placeholder]);\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} form={props.form} 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 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
|
+
{"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 let hasWarned = useRef(false);\n useEffect(() => {\n if (props.placeholder && !hasWarned.current && process.env.NODE_ENV !== 'production') {\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 hasWarned.current = true;\n }\n }, [props.placeholder]);\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} form={props.form} 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 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 (timeout.current) {\n clearTimeout(timeout.current);\n }\n timeout.current = null;\n }\n\n lastInputValue.current = inputValue;\n }, [isLoading, showLoading, inputValue]);\n\n let [prevIsLoading, setPrevIsLoading] = useState(isLoading);\n if (prevIsLoading !== isLoading && !isLoading) {\n setShowLoading(false);\n setPrevIsLoading(isLoading);\n }\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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/combobox",
|
|
3
|
-
"version": "3.16.
|
|
3
|
+
"version": "3.16.5",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -40,30 +40,30 @@
|
|
|
40
40
|
"url": "https://github.com/adobe/react-spectrum"
|
|
41
41
|
},
|
|
42
42
|
"dependencies": {
|
|
43
|
-
"@react-aria/button": "^3.14.
|
|
44
|
-
"@react-aria/combobox": "^3.
|
|
45
|
-
"@react-aria/dialog": "^3.5.
|
|
46
|
-
"@react-aria/focus": "^3.21.
|
|
47
|
-
"@react-aria/form": "^3.1.
|
|
48
|
-
"@react-aria/i18n": "^3.12.
|
|
49
|
-
"@react-aria/interactions": "^3.
|
|
50
|
-
"@react-aria/label": "^3.7.
|
|
51
|
-
"@react-aria/overlays": "^3.
|
|
52
|
-
"@react-aria/utils": "^3.
|
|
53
|
-
"@react-spectrum/button": "^3.17.
|
|
54
|
-
"@react-spectrum/form": "^3.7.
|
|
55
|
-
"@react-spectrum/label": "^3.16.
|
|
56
|
-
"@react-spectrum/listbox": "^3.15.
|
|
57
|
-
"@react-spectrum/overlays": "^5.
|
|
58
|
-
"@react-spectrum/progress": "^3.7.
|
|
59
|
-
"@react-spectrum/textfield": "^3.14.
|
|
60
|
-
"@react-spectrum/utils": "^3.12.
|
|
61
|
-
"@react-stately/collections": "^3.12.
|
|
62
|
-
"@react-stately/combobox": "^3.
|
|
63
|
-
"@react-types/button": "^3.14.
|
|
64
|
-
"@react-types/combobox": "^3.13.
|
|
65
|
-
"@react-types/shared": "^3.32.
|
|
66
|
-
"@spectrum-icons/ui": "^3.6.
|
|
43
|
+
"@react-aria/button": "^3.14.3",
|
|
44
|
+
"@react-aria/combobox": "^3.14.1",
|
|
45
|
+
"@react-aria/dialog": "^3.5.32",
|
|
46
|
+
"@react-aria/focus": "^3.21.3",
|
|
47
|
+
"@react-aria/form": "^3.1.3",
|
|
48
|
+
"@react-aria/i18n": "^3.12.14",
|
|
49
|
+
"@react-aria/interactions": "^3.26.0",
|
|
50
|
+
"@react-aria/label": "^3.7.23",
|
|
51
|
+
"@react-aria/overlays": "^3.31.0",
|
|
52
|
+
"@react-aria/utils": "^3.32.0",
|
|
53
|
+
"@react-spectrum/button": "^3.17.5",
|
|
54
|
+
"@react-spectrum/form": "^3.7.20",
|
|
55
|
+
"@react-spectrum/label": "^3.16.20",
|
|
56
|
+
"@react-spectrum/listbox": "^3.15.9",
|
|
57
|
+
"@react-spectrum/overlays": "^5.9.1",
|
|
58
|
+
"@react-spectrum/progress": "^3.7.21",
|
|
59
|
+
"@react-spectrum/textfield": "^3.14.3",
|
|
60
|
+
"@react-spectrum/utils": "^3.12.10",
|
|
61
|
+
"@react-stately/collections": "^3.12.8",
|
|
62
|
+
"@react-stately/combobox": "^3.12.1",
|
|
63
|
+
"@react-types/button": "^3.14.1",
|
|
64
|
+
"@react-types/combobox": "^3.13.10",
|
|
65
|
+
"@react-types/shared": "^3.32.1",
|
|
66
|
+
"@spectrum-icons/ui": "^3.6.21",
|
|
67
67
|
"@swc/helpers": "^0.5.0"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
@@ -77,5 +77,5 @@
|
|
|
77
77
|
"publishConfig": {
|
|
78
78
|
"access": "public"
|
|
79
79
|
},
|
|
80
|
-
"gitHead": "
|
|
80
|
+
"gitHead": "4d838da5bfe36abb35aed166995a9ef63825370f"
|
|
81
81
|
}
|
package/src/ComboBox.tsx
CHANGED
|
@@ -278,8 +278,6 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
|
|
|
278
278
|
}, 500);
|
|
279
279
|
}
|
|
280
280
|
} else if (!isLoading) {
|
|
281
|
-
// If loading is no longer happening, clear any timers and hide the loading circle
|
|
282
|
-
setShowLoading(false);
|
|
283
281
|
if (timeout.current) {
|
|
284
282
|
clearTimeout(timeout.current);
|
|
285
283
|
}
|
|
@@ -289,6 +287,12 @@ const ComboBoxInput = React.forwardRef(function ComboBoxInput(props: ComboBoxInp
|
|
|
289
287
|
lastInputValue.current = inputValue;
|
|
290
288
|
}, [isLoading, showLoading, inputValue]);
|
|
291
289
|
|
|
290
|
+
let [prevIsLoading, setPrevIsLoading] = useState(isLoading);
|
|
291
|
+
if (prevIsLoading !== isLoading && !isLoading) {
|
|
292
|
+
setShowLoading(false);
|
|
293
|
+
setPrevIsLoading(isLoading);
|
|
294
|
+
}
|
|
295
|
+
|
|
292
296
|
useEffect(() => {
|
|
293
297
|
return () => {
|
|
294
298
|
if (timeout.current) {
|