@react-spectrum/autocomplete 3.0.0-alpha.12 → 3.0.0-alpha.14
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/main.css +1 -1
- package/dist/main.js +270 -234
- package/dist/main.js.map +1 -1
- package/dist/module.js +270 -234
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +25 -25
- package/src/MobileSearchAutocomplete.tsx +53 -29
- package/src/SearchAutocomplete.tsx +34 -16
package/dist/main.js
CHANGED
|
@@ -33,7 +33,28 @@ function $parcel$interopDefault(a) {
|
|
|
33
33
|
$parcel$export(module.exports, "SearchAutocomplete", () => $dcf500d58a031ca6$export$dd65332a5b19fa63);
|
|
34
34
|
$parcel$export(module.exports, "Item", () => $aWXRc$reactstatelycollections.Item);
|
|
35
35
|
$parcel$export(module.exports, "Section", () => $aWXRc$reactstatelycollections.Section);
|
|
36
|
-
|
|
36
|
+
/*
|
|
37
|
+
* Copyright 2021 Adobe. All rights reserved.
|
|
38
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
39
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
40
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
41
|
+
*
|
|
42
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
43
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
44
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
45
|
+
* governing permissions and limitations under the License.
|
|
46
|
+
*/ /// <reference types="css-module-types" />
|
|
47
|
+
/*
|
|
48
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
49
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
50
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
51
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
52
|
+
*
|
|
53
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
54
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
55
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
56
|
+
* governing permissions and limitations under the License.
|
|
57
|
+
*/
|
|
37
58
|
|
|
38
59
|
|
|
39
60
|
|
|
@@ -384,7 +405,17 @@ $ccb60979256717ac$exports = {
|
|
|
384
405
|
|
|
385
406
|
|
|
386
407
|
|
|
387
|
-
|
|
408
|
+
/*
|
|
409
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
410
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
411
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
412
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
413
|
+
*
|
|
414
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
415
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
416
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
417
|
+
* governing permissions and limitations under the License.
|
|
418
|
+
*/
|
|
388
419
|
|
|
389
420
|
|
|
390
421
|
|
|
@@ -606,14 +637,13 @@ $40cb3a00c193680f$export$d35bc1e505d1ebbf = "is-disabled_73bc77";
|
|
|
606
637
|
|
|
607
638
|
|
|
608
639
|
|
|
609
|
-
|
|
610
|
-
props = $aWXRc$reactspectrumprovider.useProviderProps(props);
|
|
611
|
-
let { isQuiet: isQuiet , isDisabled: isDisabled , validationState: validationState , isReadOnly: isReadOnly , onSubmit: onSubmit = ()=>{
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
sensitivity: 'base'
|
|
640
|
+
function $a9f98e219df0b64d$var$_MobileSearchAutocomplete(props, ref) {
|
|
641
|
+
props = (0, $aWXRc$reactspectrumprovider.useProviderProps)(props);
|
|
642
|
+
let { isQuiet: isQuiet , isDisabled: isDisabled , validationState: validationState , isReadOnly: isReadOnly , onSubmit: onSubmit = ()=>{} } = props;
|
|
643
|
+
let { contains: contains } = (0, $aWXRc$reactariai18n.useFilter)({
|
|
644
|
+
sensitivity: "base"
|
|
615
645
|
});
|
|
616
|
-
let state = $aWXRc$reactstatelycombobox.useComboBoxState({
|
|
646
|
+
let state = (0, $aWXRc$reactstatelycombobox.useComboBoxState)({
|
|
617
647
|
...props,
|
|
618
648
|
defaultFilter: contains,
|
|
619
649
|
allowsEmptyCollection: true,
|
|
@@ -622,35 +652,34 @@ const $a9f98e219df0b64d$export$e7a90f7d6b078162 = /*#__PURE__*/ ($parcel$interop
|
|
|
622
652
|
// then the closing of the tray will call setFocused(false) again due to cleanup effect)
|
|
623
653
|
shouldCloseOnBlur: false,
|
|
624
654
|
allowsCustomValue: true,
|
|
625
|
-
onSelectionChange: (key)=>key !== null && onSubmit(null, key)
|
|
626
|
-
,
|
|
655
|
+
onSelectionChange: (key)=>key !== null && onSubmit(null, key),
|
|
627
656
|
selectedKey: undefined,
|
|
628
657
|
defaultSelectedKey: undefined
|
|
629
658
|
});
|
|
630
|
-
let buttonRef = $aWXRc$react.useRef();
|
|
631
|
-
let domRef = $aWXRc$reactspectrumutils.useFocusableRef(ref, buttonRef);
|
|
632
|
-
let { triggerProps: triggerProps , overlayProps: overlayProps } = $aWXRc$reactariaoverlays.useOverlayTrigger({
|
|
633
|
-
type:
|
|
659
|
+
let buttonRef = (0, $aWXRc$react.useRef)(null);
|
|
660
|
+
let domRef = (0, $aWXRc$reactspectrumutils.useFocusableRef)(ref, buttonRef);
|
|
661
|
+
let { triggerProps: triggerProps , overlayProps: overlayProps } = (0, $aWXRc$reactariaoverlays.useOverlayTrigger)({
|
|
662
|
+
type: "listbox"
|
|
634
663
|
}, state, buttonRef);
|
|
635
|
-
let { labelProps: labelProps , fieldProps: fieldProps } = $aWXRc$reactarialabel.useLabel({
|
|
664
|
+
let { labelProps: labelProps , fieldProps: fieldProps } = (0, $aWXRc$reactarialabel.useLabel)({
|
|
636
665
|
...props,
|
|
637
|
-
labelElementType:
|
|
666
|
+
labelElementType: "span"
|
|
638
667
|
});
|
|
639
668
|
// Focus the button and show focus ring when clicking on the label
|
|
640
669
|
labelProps.onClick = ()=>{
|
|
641
|
-
if (!props.isDisabled) {
|
|
670
|
+
if (!props.isDisabled && buttonRef.current) {
|
|
642
671
|
buttonRef.current.focus();
|
|
643
|
-
$aWXRc$reactariainteractions.setInteractionModality(
|
|
672
|
+
(0, $aWXRc$reactariainteractions.setInteractionModality)("keyboard");
|
|
644
673
|
}
|
|
645
674
|
};
|
|
646
|
-
return
|
|
675
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, ($parcel$interopDefault($aWXRc$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumlabel.Field), {
|
|
647
676
|
...props,
|
|
648
677
|
labelProps: labelProps,
|
|
649
678
|
elementType: "span",
|
|
650
679
|
ref: domRef,
|
|
651
680
|
includeNecessityIndicatorInAccessibilityName: true
|
|
652
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($a9f98e219df0b64d$var$SearchAutocompleteButton, {
|
|
653
|
-
|
|
681
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement($a9f98e219df0b64d$var$SearchAutocompleteButton, {
|
|
682
|
+
...(0, $aWXRc$reactariautils.mergeProps)(triggerProps, fieldProps, {
|
|
654
683
|
autoFocus: props.autoFocus,
|
|
655
684
|
icon: props.icon
|
|
656
685
|
}),
|
|
@@ -661,126 +690,128 @@ const $a9f98e219df0b64d$export$e7a90f7d6b078162 = /*#__PURE__*/ ($parcel$interop
|
|
|
661
690
|
isPlaceholder: !state.inputValue,
|
|
662
691
|
validationState: validationState,
|
|
663
692
|
inputValue: state.inputValue,
|
|
664
|
-
clearInput: ()=>state.setInputValue(
|
|
665
|
-
,
|
|
666
|
-
|
|
667
|
-
}, state.inputValue || props.placeholder || '')), /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumoverlays.Tray, {
|
|
693
|
+
clearInput: ()=>state.setInputValue(""),
|
|
694
|
+
onPress: ()=>!isReadOnly && state.open(null, "manual")
|
|
695
|
+
}, state.inputValue || props.placeholder || "")), /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumoverlays.Tray), {
|
|
668
696
|
state: state,
|
|
669
697
|
isFixedHeight: true,
|
|
670
698
|
...overlayProps
|
|
671
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($a9f98e219df0b64d$var$SearchAutocompleteTray, {
|
|
699
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement($a9f98e219df0b64d$var$SearchAutocompleteTray, {
|
|
672
700
|
...props,
|
|
673
701
|
onClose: state.close,
|
|
674
702
|
overlayProps: overlayProps,
|
|
675
703
|
state: state
|
|
676
|
-
})))
|
|
677
|
-
}
|
|
678
|
-
|
|
679
|
-
|
|
704
|
+
})));
|
|
705
|
+
}
|
|
706
|
+
let $a9f98e219df0b64d$export$e7a90f7d6b078162 = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).forwardRef($a9f98e219df0b64d$var$_MobileSearchAutocomplete);
|
|
707
|
+
// any type is because we don't want to call useObjectRef because this is an internal component and we know
|
|
708
|
+
// we are always passing an object ref
|
|
709
|
+
const $a9f98e219df0b64d$var$SearchAutocompleteButton = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).forwardRef(function SearchAutocompleteButton(props, ref) {
|
|
710
|
+
let searchIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, ($parcel$interopDefault($aWXRc$spectrumiconsuiMagnifier))), {
|
|
680
711
|
"data-testid": "searchicon"
|
|
681
712
|
});
|
|
682
713
|
let { icon: icon = searchIcon , isQuiet: isQuiet , isDisabled: isDisabled , isReadOnly: isReadOnly , isPlaceholder: isPlaceholder , validationState: validationState , inputValue: inputValue , clearInput: clearInput , children: children , style: style , className: className } = props;
|
|
683
|
-
let stringFormatter = $aWXRc$reactariai18n.useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($ccb60979256717ac$exports)));
|
|
684
|
-
let valueId = $aWXRc$reactariautils.useId();
|
|
685
|
-
let invalidId = $aWXRc$reactariautils.useId();
|
|
686
|
-
let validationIcon = validationState ===
|
|
714
|
+
let stringFormatter = (0, $aWXRc$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($ccb60979256717ac$exports))));
|
|
715
|
+
let valueId = (0, $aWXRc$reactariautils.useId)();
|
|
716
|
+
let invalidId = (0, $aWXRc$reactariautils.useId)();
|
|
717
|
+
let validationIcon = validationState === "invalid" ? /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, ($parcel$interopDefault($aWXRc$spectrumiconsuiAlertMedium))), {
|
|
687
718
|
id: invalidId,
|
|
688
|
-
"aria-label": stringFormatter.format(
|
|
689
|
-
}) : /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement(($parcel$interopDefault($aWXRc$spectrumiconsuiCheckmarkMedium)), null);
|
|
690
|
-
if (icon) icon = /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).cloneElement(icon, {
|
|
691
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
|
692
|
-
size:
|
|
719
|
+
"aria-label": stringFormatter.format("invalid")
|
|
720
|
+
}) : /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, ($parcel$interopDefault($aWXRc$spectrumiconsuiCheckmarkMedium))), null);
|
|
721
|
+
if (icon) icon = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).cloneElement(icon, {
|
|
722
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-icon"),
|
|
723
|
+
size: "S"
|
|
693
724
|
});
|
|
694
|
-
let clearButton = /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumbutton.ClearButton, {
|
|
725
|
+
let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumbutton.ClearButton), {
|
|
695
726
|
onPress: (e)=>{
|
|
696
|
-
|
|
697
|
-
|
|
727
|
+
var _props_onPress;
|
|
728
|
+
clearInput === null || clearInput === void 0 ? void 0 : clearInput();
|
|
729
|
+
props === null || props === void 0 ? void 0 : (_props_onPress = props.onPress) === null || _props_onPress === void 0 ? void 0 : _props_onPress.call(props, e);
|
|
698
730
|
},
|
|
699
731
|
preventFocus: true,
|
|
700
|
-
"aria-label": stringFormatter.format(
|
|
732
|
+
"aria-label": stringFormatter.format("clear"),
|
|
701
733
|
excludeFromTabOrder: true,
|
|
702
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
734
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-ClearButton"),
|
|
703
735
|
isDisabled: isDisabled
|
|
704
736
|
});
|
|
705
|
-
let validation = /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).cloneElement(validationIcon, {
|
|
706
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
|
737
|
+
let validation = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).cloneElement(validationIcon, {
|
|
738
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-validationIcon", (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-input-validationIcon"))
|
|
707
739
|
});
|
|
708
|
-
let { hoverProps: hoverProps , isHovered: isHovered } = $aWXRc$reactariainteractions.useHover({
|
|
709
|
-
});
|
|
710
|
-
let {
|
|
711
|
-
let { buttonProps: buttonProps } = $aWXRc$reactariabutton.useButton({
|
|
740
|
+
let { hoverProps: hoverProps , isHovered: isHovered } = (0, $aWXRc$reactariainteractions.useHover)({});
|
|
741
|
+
let { isFocused: isFocused , isFocusVisible: isFocusVisible , focusProps: focusProps } = (0, $aWXRc$reactariafocus.useFocusRing)();
|
|
742
|
+
let { buttonProps: buttonProps } = (0, $aWXRc$reactariabutton.useButton)({
|
|
712
743
|
...props,
|
|
713
|
-
|
|
714
|
-
props[
|
|
715
|
-
props[
|
|
744
|
+
"aria-labelledby": [
|
|
745
|
+
props["aria-labelledby"],
|
|
746
|
+
props["aria-label"] && !props["aria-labelledby"] ? props.id : null,
|
|
716
747
|
valueId,
|
|
717
|
-
validationState ===
|
|
718
|
-
].filter(Boolean).join(
|
|
719
|
-
elementType:
|
|
748
|
+
validationState === "invalid" ? invalidId : null
|
|
749
|
+
].filter(Boolean).join(" "),
|
|
750
|
+
elementType: "div"
|
|
720
751
|
}, ref);
|
|
721
|
-
return
|
|
722
|
-
|
|
752
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement("div", {
|
|
753
|
+
...(0, $aWXRc$reactariautils.mergeProps)(hoverProps, focusProps, buttonProps),
|
|
723
754
|
"aria-haspopup": "dialog",
|
|
724
755
|
ref: ref,
|
|
725
756
|
style: {
|
|
726
757
|
...style,
|
|
727
|
-
outline:
|
|
758
|
+
outline: "none"
|
|
728
759
|
},
|
|
729
|
-
className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports)),
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
}, $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports)),
|
|
737
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement("div", {
|
|
738
|
-
className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
}, $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
760
|
+
className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup", {
|
|
761
|
+
"spectrum-InputGroup--quiet": isQuiet,
|
|
762
|
+
"is-disabled": isDisabled,
|
|
763
|
+
"spectrum-InputGroup--invalid": validationState === "invalid" && !isDisabled,
|
|
764
|
+
"is-hovered": isHovered,
|
|
765
|
+
"is-focused": isFocused,
|
|
766
|
+
"focus-ring": isFocusVisible
|
|
767
|
+
}, (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports))), "searchautocomplete", "mobile-searchautocomplete"), className)
|
|
768
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement("div", {
|
|
769
|
+
className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield", {
|
|
770
|
+
"spectrum-Textfield--invalid": validationState === "invalid" && !isDisabled,
|
|
771
|
+
"spectrum-Textfield--valid": validationState === "valid" && !isDisabled,
|
|
772
|
+
"spectrum-Textfield--quiet": isQuiet
|
|
773
|
+
}, (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search", {
|
|
774
|
+
"is-disabled": isDisabled,
|
|
775
|
+
"is-quiet": isQuiet,
|
|
776
|
+
"spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
|
|
777
|
+
"spectrum-Search--valid": validationState === "valid" && !isDisabled
|
|
747
778
|
}))
|
|
748
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement("div", {
|
|
749
|
-
className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
}, $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
757
|
-
}, icon, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement("span", {
|
|
779
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement("div", {
|
|
780
|
+
className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-input", {
|
|
781
|
+
"spectrum-Textfield-inputIcon": !!icon,
|
|
782
|
+
"is-hovered": isHovered,
|
|
783
|
+
"is-placeholder": isPlaceholder,
|
|
784
|
+
"is-disabled": isDisabled,
|
|
785
|
+
"is-quiet": isQuiet,
|
|
786
|
+
"is-focused": isFocused
|
|
787
|
+
}, (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-input"), (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports))), "mobile-input"))
|
|
788
|
+
}, icon, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement("span", {
|
|
758
789
|
id: valueId,
|
|
759
|
-
className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports)),
|
|
760
|
-
}, children)), validationState && !isDisabled ? validation : null, (inputValue !==
|
|
790
|
+
className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports))), "mobile-value")
|
|
791
|
+
}, children)), validationState && !isDisabled ? validation : null, (inputValue !== "" || validationState != null) && !isReadOnly && clearButton));
|
|
761
792
|
});
|
|
762
793
|
function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
|
|
763
|
-
let searchIcon = /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement(($parcel$interopDefault($aWXRc$spectrumiconsuiMagnifier)), {
|
|
794
|
+
let searchIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, ($parcel$interopDefault($aWXRc$spectrumiconsuiMagnifier))), {
|
|
764
795
|
"data-testid": "searchicon"
|
|
765
796
|
});
|
|
766
797
|
let { state: // completionMode = 'suggest',
|
|
767
798
|
state , icon: icon = searchIcon , isDisabled: isDisabled , validationState: validationState , label: label , overlayProps: overlayProps , loadingState: loadingState , onLoadMore: onLoadMore , onClose: onClose , onSubmit: onSubmit } = props;
|
|
768
|
-
let timeout = $aWXRc$react.useRef(null);
|
|
769
|
-
let [showLoading, setShowLoading] = $aWXRc$react.useState(false);
|
|
770
|
-
let inputRef = $aWXRc$react.useRef();
|
|
771
|
-
let popoverRef = $aWXRc$react.useRef();
|
|
772
|
-
let listBoxRef = $aWXRc$react.useRef();
|
|
773
|
-
let layout = $aWXRc$reactspectrumlistbox.useListBoxLayout(state);
|
|
774
|
-
let stringFormatter = $aWXRc$reactariai18n.useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($ccb60979256717ac$exports)));
|
|
775
|
-
let { inputProps: inputProps , listBoxProps: listBoxProps , labelProps: labelProps , clearButtonProps: clearButtonProps } = $aWXRc$reactariaautocomplete.useSearchAutocomplete({
|
|
799
|
+
let timeout = (0, $aWXRc$react.useRef)(null);
|
|
800
|
+
let [showLoading, setShowLoading] = (0, $aWXRc$react.useState)(false);
|
|
801
|
+
let inputRef = (0, $aWXRc$react.useRef)(null);
|
|
802
|
+
let popoverRef = (0, $aWXRc$react.useRef)(null);
|
|
803
|
+
let listBoxRef = (0, $aWXRc$react.useRef)(null);
|
|
804
|
+
let layout = (0, $aWXRc$reactspectrumlistbox.useListBoxLayout)(state);
|
|
805
|
+
let stringFormatter = (0, $aWXRc$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($ccb60979256717ac$exports))));
|
|
806
|
+
let { inputProps: inputProps , listBoxProps: listBoxProps , labelProps: labelProps , clearButtonProps: clearButtonProps } = (0, $aWXRc$reactariaautocomplete.useSearchAutocomplete)({
|
|
776
807
|
...props,
|
|
777
808
|
keyboardDelegate: layout,
|
|
778
809
|
popoverRef: popoverRef,
|
|
779
810
|
listBoxRef: listBoxRef,
|
|
780
811
|
inputRef: inputRef
|
|
781
812
|
}, state);
|
|
782
|
-
($parcel$interopDefault($aWXRc$react)).useEffect(()=>{
|
|
783
|
-
$aWXRc$reactariafocus.focusSafely(inputRef.current);
|
|
813
|
+
(0, ($parcel$interopDefault($aWXRc$react))).useEffect(()=>{
|
|
814
|
+
if (inputRef.current) (0, $aWXRc$reactariafocus.focusSafely)(inputRef.current);
|
|
784
815
|
// When the tray unmounts, set state.isFocused (i.e. the tray input's focus tracker) to false.
|
|
785
816
|
// This is to prevent state.isFocused from being set to true when the tray closes via tapping on the underlay
|
|
786
817
|
// (FocusScope attempts to restore focus to the tray input when tapping outside the tray due to "contain")
|
|
@@ -790,53 +821,53 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
|
|
|
790
821
|
};
|
|
791
822
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
792
823
|
}, []);
|
|
793
|
-
let { dialogProps: dialogProps } = $aWXRc$reactariadialog.useDialog({
|
|
794
|
-
|
|
824
|
+
let { dialogProps: dialogProps } = (0, $aWXRc$reactariadialog.useDialog)({
|
|
825
|
+
"aria-labelledby": (0, $aWXRc$reactariautils.useId)(labelProps.id)
|
|
795
826
|
}, popoverRef);
|
|
796
827
|
// Override the role of the input to "searchbox" instead of "combobox".
|
|
797
828
|
// Since the listbox is always visible, the combobox role doesn't really give us anything.
|
|
798
829
|
// VoiceOver on iOS reads "double tap to collapse" when focused on the input rather than
|
|
799
830
|
// "double tap to edit text", as with a textbox or searchbox. We'd like double tapping to
|
|
800
831
|
// open the virtual keyboard rather than closing the tray.
|
|
801
|
-
inputProps.role =
|
|
802
|
-
inputProps[
|
|
832
|
+
inputProps.role = "searchbox";
|
|
833
|
+
inputProps["aria-haspopup"] = "listbox";
|
|
803
834
|
delete inputProps.onTouchEnd;
|
|
804
|
-
let clearButton = /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumbutton.ClearButton, {
|
|
835
|
+
let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumbutton.ClearButton), {
|
|
805
836
|
...clearButtonProps,
|
|
806
837
|
preventFocus: true,
|
|
807
|
-
"aria-label": stringFormatter.format(
|
|
838
|
+
"aria-label": stringFormatter.format("clear"),
|
|
808
839
|
excludeFromTabOrder: true,
|
|
809
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
840
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-ClearButton"),
|
|
810
841
|
isDisabled: isDisabled
|
|
811
842
|
});
|
|
812
|
-
let loadingCircle = /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumprogress.ProgressCircle, {
|
|
813
|
-
"aria-label": stringFormatter.format(
|
|
843
|
+
let loadingCircle = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumprogress.ProgressCircle), {
|
|
844
|
+
"aria-label": stringFormatter.format("loading"),
|
|
814
845
|
size: "S",
|
|
815
846
|
isIndeterminate: true,
|
|
816
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
847
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-circleLoader", (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-circleLoader"))
|
|
817
848
|
});
|
|
818
849
|
// Close the software keyboard on scroll to give the user a bigger area to scroll.
|
|
819
850
|
// But only do this if scrolling with touch, otherwise it can cause issues with touch
|
|
820
851
|
// screen readers.
|
|
821
|
-
let isTouchDown = $aWXRc$react.useRef(false);
|
|
852
|
+
let isTouchDown = (0, $aWXRc$react.useRef)(false);
|
|
822
853
|
let onTouchStart = ()=>{
|
|
823
854
|
isTouchDown.current = true;
|
|
824
855
|
};
|
|
825
856
|
let onTouchEnd = ()=>{
|
|
826
857
|
isTouchDown.current = false;
|
|
827
858
|
};
|
|
828
|
-
let onScroll = $aWXRc$react.useCallback(()=>{
|
|
859
|
+
let onScroll = (0, $aWXRc$react.useCallback)(()=>{
|
|
829
860
|
if (!inputRef.current || document.activeElement !== inputRef.current || !isTouchDown.current) return;
|
|
830
|
-
popoverRef.current.focus();
|
|
861
|
+
if (popoverRef.current) popoverRef.current.focus();
|
|
831
862
|
}, [
|
|
832
863
|
inputRef,
|
|
833
864
|
popoverRef,
|
|
834
865
|
isTouchDown
|
|
835
866
|
]);
|
|
836
867
|
let inputValue = inputProps.value;
|
|
837
|
-
let lastInputValue = $aWXRc$react.useRef(inputValue);
|
|
838
|
-
$aWXRc$react.useEffect(()=>{
|
|
839
|
-
if (loadingState ===
|
|
868
|
+
let lastInputValue = (0, $aWXRc$react.useRef)(inputValue);
|
|
869
|
+
(0, $aWXRc$react.useEffect)(()=>{
|
|
870
|
+
if (loadingState === "filtering" && !showLoading) {
|
|
840
871
|
if (timeout.current === null) timeout.current = setTimeout(()=>{
|
|
841
872
|
setShowLoading(true);
|
|
842
873
|
}, 500);
|
|
@@ -847,11 +878,13 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
|
|
|
847
878
|
setShowLoading(true);
|
|
848
879
|
}, 500);
|
|
849
880
|
}
|
|
850
|
-
} else if (loadingState !==
|
|
881
|
+
} else if (loadingState !== "filtering") {
|
|
851
882
|
// If loading is no longer happening, clear any timers and hide the loading circle
|
|
852
883
|
setShowLoading(false);
|
|
853
|
-
|
|
854
|
-
|
|
884
|
+
if (timeout.current !== null) {
|
|
885
|
+
clearTimeout(timeout.current);
|
|
886
|
+
timeout.current = null;
|
|
887
|
+
}
|
|
855
888
|
}
|
|
856
889
|
lastInputValue.current = inputValue;
|
|
857
890
|
}, [
|
|
@@ -861,26 +894,27 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
|
|
|
861
894
|
]);
|
|
862
895
|
let onKeyDown = (e)=>{
|
|
863
896
|
// Close virtual keyboard, close tray, and fire onSubmit if user hits Enter w/o any focused options
|
|
864
|
-
if (e.key ===
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
897
|
+
if (e.key === "Enter" && state.selectionManager.focusedKey == null) {
|
|
898
|
+
var _popoverRef_current;
|
|
899
|
+
(_popoverRef_current = popoverRef.current) === null || _popoverRef_current === void 0 ? void 0 : _popoverRef_current.focus();
|
|
900
|
+
if (onClose) onClose();
|
|
901
|
+
if (onSubmit) onSubmit(inputValue == null ? null : inputValue.toString(), null);
|
|
902
|
+
} else if (inputProps.onKeyDown) inputProps.onKeyDown(e);
|
|
869
903
|
};
|
|
870
|
-
if (icon) icon = /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).cloneElement(icon, {
|
|
871
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
|
872
|
-
size:
|
|
904
|
+
if (icon) icon = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).cloneElement(icon, {
|
|
905
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-icon"),
|
|
906
|
+
size: "S"
|
|
873
907
|
});
|
|
874
|
-
return
|
|
908
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactariafocus.FocusScope), {
|
|
875
909
|
restoreFocus: true,
|
|
876
910
|
contain: true
|
|
877
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement("div", {
|
|
878
|
-
|
|
911
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement("div", {
|
|
912
|
+
...(0, $aWXRc$reactariautils.mergeProps)(overlayProps, dialogProps),
|
|
879
913
|
ref: popoverRef,
|
|
880
|
-
className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports)),
|
|
881
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactariaoverlays.DismissButton, {
|
|
914
|
+
className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports))), "tray-dialog")
|
|
915
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactariaoverlays.DismissButton), {
|
|
882
916
|
onDismiss: onClose
|
|
883
|
-
}), /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumtextfield.TextFieldBase, {
|
|
917
|
+
}), /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumtextfield.TextFieldBase), {
|
|
884
918
|
label: label,
|
|
885
919
|
labelProps: labelProps,
|
|
886
920
|
inputProps: {
|
|
@@ -889,20 +923,20 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
|
|
|
889
923
|
},
|
|
890
924
|
inputRef: inputRef,
|
|
891
925
|
isDisabled: isDisabled,
|
|
892
|
-
isLoading: showLoading && loadingState ===
|
|
893
|
-
loadingIndicator: loadingState != null
|
|
926
|
+
isLoading: showLoading && loadingState === "filtering",
|
|
927
|
+
loadingIndicator: loadingState != null ? loadingCircle : undefined,
|
|
894
928
|
validationState: validationState,
|
|
895
|
-
wrapperChildren: (state.inputValue !==
|
|
929
|
+
wrapperChildren: (state.inputValue !== "" || loadingState === "filtering" || validationState != null) && !props.isReadOnly ? clearButton : undefined,
|
|
896
930
|
icon: icon,
|
|
897
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
}, $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports)),
|
|
901
|
-
|
|
931
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search", "spectrum-Textfield", "spectrum-Search--loadable", {
|
|
932
|
+
"spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
|
|
933
|
+
"spectrum-Search--valid": validationState === "valid" && !isDisabled
|
|
934
|
+
}, (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports))), "tray-textfield", {
|
|
935
|
+
"has-label": !!props.label
|
|
902
936
|
})),
|
|
903
|
-
inputClassName: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
904
|
-
validationIconClassName: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
905
|
-
}), /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumlistbox.ListBoxBase, {
|
|
937
|
+
inputClassName: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-input"),
|
|
938
|
+
validationIconClassName: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-validationIcon")
|
|
939
|
+
}), /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumlistbox.ListBoxBase), {
|
|
906
940
|
...listBoxProps,
|
|
907
941
|
domProps: {
|
|
908
942
|
onTouchStart: onTouchStart,
|
|
@@ -914,18 +948,17 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
|
|
|
914
948
|
layout: layout,
|
|
915
949
|
state: state,
|
|
916
950
|
shouldUseVirtualFocus: true,
|
|
917
|
-
renderEmptyState: ()=>loadingState !==
|
|
918
|
-
className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports)),
|
|
919
|
-
}, stringFormatter.format(
|
|
920
|
-
,
|
|
921
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports)), 'tray-listbox'),
|
|
951
|
+
renderEmptyState: ()=>loadingState !== "loading" && /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement("span", {
|
|
952
|
+
className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports))), "no-results")
|
|
953
|
+
}, stringFormatter.format("noResults")),
|
|
954
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports))), "tray-listbox"),
|
|
922
955
|
ref: listBoxRef,
|
|
923
956
|
onScroll: onScroll,
|
|
924
957
|
onLoadMore: onLoadMore,
|
|
925
|
-
isLoading: loadingState ===
|
|
926
|
-
}), /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactariaoverlays.DismissButton, {
|
|
958
|
+
isLoading: loadingState === "loading" || loadingState === "loadingMore"
|
|
959
|
+
}), /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactariaoverlays.DismissButton), {
|
|
927
960
|
onDismiss: onClose
|
|
928
|
-
})))
|
|
961
|
+
})));
|
|
929
962
|
}
|
|
930
963
|
|
|
931
964
|
|
|
@@ -944,46 +977,44 @@ function $a9f98e219df0b64d$var$SearchAutocompleteTray(props) {
|
|
|
944
977
|
|
|
945
978
|
|
|
946
979
|
function $dcf500d58a031ca6$var$SearchAutocomplete(props, ref) {
|
|
947
|
-
props = $aWXRc$reactspectrumprovider.useProviderProps(props);
|
|
948
|
-
if (props.placeholder) console.warn(
|
|
949
|
-
let isMobile = $aWXRc$reactspectrumutils.useIsMobileDevice();
|
|
980
|
+
props = (0, $aWXRc$reactspectrumprovider.useProviderProps)(props);
|
|
981
|
+
if (props.placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead.");
|
|
982
|
+
let isMobile = (0, $aWXRc$reactspectrumutils.useIsMobileDevice)();
|
|
950
983
|
if (isMobile) // menuTrigger=focus/manual don't apply to mobile searchwithin
|
|
951
|
-
return
|
|
984
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $a9f98e219df0b64d$export$e7a90f7d6b078162), {
|
|
952
985
|
...props,
|
|
953
986
|
menuTrigger: "input",
|
|
954
987
|
ref: ref
|
|
955
|
-
})
|
|
956
|
-
else return
|
|
988
|
+
});
|
|
989
|
+
else return /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement($dcf500d58a031ca6$var$SearchAutocompleteBase, {
|
|
957
990
|
...props,
|
|
958
991
|
ref: ref
|
|
959
|
-
})
|
|
992
|
+
});
|
|
960
993
|
}
|
|
961
|
-
|
|
962
|
-
props = $aWXRc$reactspectrumprovider.useProviderProps(props);
|
|
963
|
-
let { menuTrigger: menuTrigger =
|
|
964
|
-
|
|
965
|
-
let stringFormatter = $aWXRc$reactariai18n.useLocalizedStringFormatter((/*@__PURE__*/$parcel$interopDefault($ccb60979256717ac$exports)));
|
|
994
|
+
function $dcf500d58a031ca6$var$_SearchAutocompleteBase(props, ref) {
|
|
995
|
+
props = (0, $aWXRc$reactspectrumprovider.useProviderProps)(props);
|
|
996
|
+
let { menuTrigger: menuTrigger = "input" , shouldFlip: shouldFlip = true , direction: direction = "bottom" , isQuiet: isQuiet , loadingState: loadingState , onLoadMore: onLoadMore , onSubmit: onSubmit = ()=>{} } = props;
|
|
997
|
+
let stringFormatter = (0, $aWXRc$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($ccb60979256717ac$exports))));
|
|
966
998
|
let isAsync = loadingState != null;
|
|
967
|
-
let popoverRef = $aWXRc$react.useRef();
|
|
968
|
-
let unwrappedPopoverRef = $aWXRc$reactspectrumutils.useUnwrapDOMRef(popoverRef);
|
|
969
|
-
let listBoxRef = $aWXRc$react.useRef();
|
|
970
|
-
let inputRef = $aWXRc$react.useRef();
|
|
971
|
-
let domRef = $aWXRc$reactspectrumutils.useFocusableRef(ref, inputRef);
|
|
972
|
-
let { contains: contains } = $aWXRc$reactariai18n.useFilter({
|
|
973
|
-
sensitivity:
|
|
999
|
+
let popoverRef = (0, $aWXRc$react.useRef)(null);
|
|
1000
|
+
let unwrappedPopoverRef = (0, $aWXRc$reactspectrumutils.useUnwrapDOMRef)(popoverRef);
|
|
1001
|
+
let listBoxRef = (0, $aWXRc$react.useRef)(null);
|
|
1002
|
+
let inputRef = (0, $aWXRc$react.useRef)(null);
|
|
1003
|
+
let domRef = (0, $aWXRc$reactspectrumutils.useFocusableRef)(ref, inputRef);
|
|
1004
|
+
let { contains: contains } = (0, $aWXRc$reactariai18n.useFilter)({
|
|
1005
|
+
sensitivity: "base"
|
|
974
1006
|
});
|
|
975
|
-
let state = $aWXRc$reactstatelycombobox.useComboBoxState({
|
|
1007
|
+
let state = (0, $aWXRc$reactstatelycombobox.useComboBoxState)({
|
|
976
1008
|
...props,
|
|
977
1009
|
defaultFilter: contains,
|
|
978
1010
|
allowsEmptyCollection: isAsync,
|
|
979
1011
|
allowsCustomValue: true,
|
|
980
|
-
onSelectionChange: (key)=>key !== null && onSubmit(null, key)
|
|
981
|
-
,
|
|
1012
|
+
onSelectionChange: (key)=>key !== null && onSubmit(null, key),
|
|
982
1013
|
selectedKey: undefined,
|
|
983
1014
|
defaultSelectedKey: undefined
|
|
984
1015
|
});
|
|
985
|
-
let layout = $aWXRc$reactspectrumlistbox.useListBoxLayout(state);
|
|
986
|
-
let { inputProps: inputProps , listBoxProps: listBoxProps , labelProps: labelProps , clearButtonProps: clearButtonProps } = $aWXRc$reactariaautocomplete.useSearchAutocomplete({
|
|
1016
|
+
let layout = (0, $aWXRc$reactspectrumlistbox.useListBoxLayout)(state);
|
|
1017
|
+
let { inputProps: inputProps , listBoxProps: listBoxProps , labelProps: labelProps , clearButtonProps: clearButtonProps } = (0, $aWXRc$reactariaautocomplete.useSearchAutocomplete)({
|
|
987
1018
|
...props,
|
|
988
1019
|
keyboardDelegate: layout,
|
|
989
1020
|
popoverRef: unwrappedPopoverRef,
|
|
@@ -992,9 +1023,9 @@ const $dcf500d58a031ca6$var$SearchAutocompleteBase = /*#__PURE__*/ ($parcel$inte
|
|
|
992
1023
|
menuTrigger: menuTrigger
|
|
993
1024
|
}, state);
|
|
994
1025
|
// Measure the width of the inputfield to inform the width of the menu (below).
|
|
995
|
-
let [menuWidth, setMenuWidth] = $aWXRc$react.useState(
|
|
996
|
-
let { scale: scale } = $aWXRc$reactspectrumprovider.useProvider();
|
|
997
|
-
let onResize = $aWXRc$react.useCallback(()=>{
|
|
1026
|
+
let [menuWidth, setMenuWidth] = (0, $aWXRc$react.useState)(0);
|
|
1027
|
+
let { scale: scale } = (0, $aWXRc$reactspectrumprovider.useProvider)();
|
|
1028
|
+
let onResize = (0, $aWXRc$react.useCallback)(()=>{
|
|
998
1029
|
if (inputRef.current) {
|
|
999
1030
|
let inputWidth = inputRef.current.offsetWidth;
|
|
1000
1031
|
setMenuWidth(inputWidth);
|
|
@@ -1003,34 +1034,34 @@ const $dcf500d58a031ca6$var$SearchAutocompleteBase = /*#__PURE__*/ ($parcel$inte
|
|
|
1003
1034
|
inputRef,
|
|
1004
1035
|
setMenuWidth
|
|
1005
1036
|
]);
|
|
1006
|
-
$aWXRc$reactspectrumutils.useResizeObserver({
|
|
1037
|
+
(0, $aWXRc$reactspectrumutils.useResizeObserver)({
|
|
1007
1038
|
ref: domRef,
|
|
1008
1039
|
onResize: onResize
|
|
1009
1040
|
});
|
|
1010
|
-
$aWXRc$reactariautils.useLayoutEffect(onResize, [
|
|
1041
|
+
(0, $aWXRc$reactariautils.useLayoutEffect)(onResize, [
|
|
1011
1042
|
scale,
|
|
1012
1043
|
onResize
|
|
1013
1044
|
]);
|
|
1014
1045
|
let style = {
|
|
1015
|
-
width: isQuiet ?
|
|
1046
|
+
width: isQuiet ? undefined : menuWidth,
|
|
1016
1047
|
minWidth: isQuiet ? `calc(${menuWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : menuWidth
|
|
1017
1048
|
};
|
|
1018
|
-
return
|
|
1049
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, ($parcel$interopDefault($aWXRc$react))).Fragment, null, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumlabel.Field), {
|
|
1019
1050
|
...props,
|
|
1020
1051
|
labelProps: labelProps,
|
|
1021
1052
|
ref: domRef
|
|
1022
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($dcf500d58a031ca6$var$SearchAutocompleteInput, {
|
|
1053
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement($dcf500d58a031ca6$var$SearchAutocompleteInput, {
|
|
1023
1054
|
...props,
|
|
1024
1055
|
isOpen: state.isOpen,
|
|
1025
1056
|
loadingState: loadingState,
|
|
1026
1057
|
inputProps: inputProps,
|
|
1027
1058
|
inputRef: inputRef,
|
|
1028
1059
|
clearButtonProps: clearButtonProps
|
|
1029
|
-
})), /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumoverlays.Popover, {
|
|
1060
|
+
})), /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumoverlays.Popover), {
|
|
1030
1061
|
state: state,
|
|
1031
1062
|
UNSAFE_style: style,
|
|
1032
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports)),
|
|
1033
|
-
|
|
1063
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-popover", {
|
|
1064
|
+
"spectrum-InputGroup-popover--quiet": isQuiet
|
|
1034
1065
|
}),
|
|
1035
1066
|
ref: popoverRef,
|
|
1036
1067
|
triggerRef: inputRef,
|
|
@@ -1038,7 +1069,7 @@ const $dcf500d58a031ca6$var$SearchAutocompleteBase = /*#__PURE__*/ ($parcel$inte
|
|
|
1038
1069
|
hideArrow: true,
|
|
1039
1070
|
isNonModal: true,
|
|
1040
1071
|
shouldFlip: shouldFlip
|
|
1041
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumlistbox.ListBoxBase, {
|
|
1072
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumlistbox.ListBoxBase), {
|
|
1042
1073
|
...listBoxProps,
|
|
1043
1074
|
ref: listBoxRef,
|
|
1044
1075
|
disallowEmptySelection: true,
|
|
@@ -1048,37 +1079,39 @@ const $dcf500d58a031ca6$var$SearchAutocompleteBase = /*#__PURE__*/ ($parcel$inte
|
|
|
1048
1079
|
layout: layout,
|
|
1049
1080
|
state: state,
|
|
1050
1081
|
shouldUseVirtualFocus: true,
|
|
1051
|
-
isLoading: loadingState ===
|
|
1082
|
+
isLoading: loadingState === "loadingMore",
|
|
1052
1083
|
onLoadMore: onLoadMore,
|
|
1053
|
-
renderEmptyState: ()=>isAsync && /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement("span", null, stringFormatter.format(
|
|
1054
|
-
})))
|
|
1055
|
-
}
|
|
1056
|
-
|
|
1057
|
-
|
|
1084
|
+
renderEmptyState: ()=>isAsync && /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement("span", null, stringFormatter.format("noResults"))
|
|
1085
|
+
})));
|
|
1086
|
+
}
|
|
1087
|
+
let $dcf500d58a031ca6$var$SearchAutocompleteBase = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).forwardRef($dcf500d58a031ca6$var$_SearchAutocompleteBase);
|
|
1088
|
+
// any type is because we don't want to call useObjectRef because this is an internal component and we know
|
|
1089
|
+
// we are always passing an object ref
|
|
1090
|
+
function $dcf500d58a031ca6$var$_SearchAutocompleteInput(props, ref) {
|
|
1091
|
+
let searchIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, ($parcel$interopDefault($aWXRc$spectrumiconsuiMagnifier))), {
|
|
1058
1092
|
"data-testid": "searchicon"
|
|
1059
1093
|
});
|
|
1060
1094
|
let { icon: icon = searchIcon , isQuiet: isQuiet , isDisabled: isDisabled , isReadOnly: isReadOnly , validationState: validationState , inputProps: inputProps , inputRef: inputRef , autoFocus: autoFocus , style: style , className: className , loadingState: loadingState , isOpen: isOpen , menuTrigger: menuTrigger , clearButtonProps: clearButtonProps } = props;
|
|
1061
|
-
let { hoverProps: hoverProps , isHovered: isHovered } = $aWXRc$reactariainteractions.useHover({
|
|
1062
|
-
|
|
1063
|
-
let
|
|
1064
|
-
let
|
|
1065
|
-
let
|
|
1066
|
-
|
|
1067
|
-
"aria-label": stringFormatter.format('loading'),
|
|
1095
|
+
let { hoverProps: hoverProps , isHovered: isHovered } = (0, $aWXRc$reactariainteractions.useHover)({});
|
|
1096
|
+
let stringFormatter = (0, $aWXRc$reactariai18n.useLocalizedStringFormatter)((0, (/*@__PURE__*/$parcel$interopDefault($ccb60979256717ac$exports))));
|
|
1097
|
+
let timeout = (0, $aWXRc$react.useRef)(null);
|
|
1098
|
+
let [showLoading, setShowLoading] = (0, $aWXRc$react.useState)(false);
|
|
1099
|
+
let loadingCircle = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumprogress.ProgressCircle), {
|
|
1100
|
+
"aria-label": stringFormatter.format("loading"),
|
|
1068
1101
|
size: "S",
|
|
1069
1102
|
isIndeterminate: true,
|
|
1070
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports)),
|
|
1103
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($40cb3a00c193680f$exports))), "spectrum-Textfield-circleLoader", (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-input-circleLoader"))
|
|
1071
1104
|
});
|
|
1072
|
-
let clearButton = /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumbutton.ClearButton, {
|
|
1105
|
+
let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumbutton.ClearButton), {
|
|
1073
1106
|
...clearButtonProps,
|
|
1074
1107
|
preventFocus: true,
|
|
1075
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
1108
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-ClearButton"),
|
|
1076
1109
|
isDisabled: isDisabled
|
|
1077
1110
|
});
|
|
1078
|
-
let isLoading = loadingState ===
|
|
1111
|
+
let isLoading = loadingState === "loading" || loadingState === "filtering";
|
|
1079
1112
|
let inputValue = inputProps.value;
|
|
1080
|
-
let lastInputValue = $aWXRc$react.useRef(inputValue);
|
|
1081
|
-
$aWXRc$react.useEffect(()=>{
|
|
1113
|
+
let lastInputValue = (0, $aWXRc$react.useRef)(inputValue);
|
|
1114
|
+
(0, $aWXRc$react.useEffect)(()=>{
|
|
1082
1115
|
if (isLoading && !showLoading) {
|
|
1083
1116
|
if (timeout.current === null) timeout.current = setTimeout(()=>{
|
|
1084
1117
|
setShowLoading(true);
|
|
@@ -1093,8 +1126,10 @@ const $dcf500d58a031ca6$var$SearchAutocompleteInput = /*#__PURE__*/ ($parcel$int
|
|
|
1093
1126
|
} else if (!isLoading) {
|
|
1094
1127
|
// If loading is no longer happening, clear any timers and hide the loading circle
|
|
1095
1128
|
setShowLoading(false);
|
|
1096
|
-
|
|
1097
|
-
|
|
1129
|
+
if (timeout.current != null) {
|
|
1130
|
+
clearTimeout(timeout.current);
|
|
1131
|
+
timeout.current = null;
|
|
1132
|
+
}
|
|
1098
1133
|
}
|
|
1099
1134
|
lastInputValue.current = inputValue;
|
|
1100
1135
|
}, [
|
|
@@ -1102,45 +1137,46 @@ const $dcf500d58a031ca6$var$SearchAutocompleteInput = /*#__PURE__*/ ($parcel$int
|
|
|
1102
1137
|
showLoading,
|
|
1103
1138
|
inputValue
|
|
1104
1139
|
]);
|
|
1105
|
-
return
|
|
1140
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactariafocus.FocusRing), {
|
|
1106
1141
|
within: true,
|
|
1107
1142
|
isTextInput: true,
|
|
1108
|
-
focusClass: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports)),
|
|
1109
|
-
focusRingClass: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports)),
|
|
1143
|
+
focusClass: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports))), "is-focused"),
|
|
1144
|
+
focusRingClass: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports))), "focus-ring"),
|
|
1110
1145
|
autoFocus: autoFocus
|
|
1111
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement("div", {
|
|
1146
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement("div", {
|
|
1112
1147
|
...hoverProps,
|
|
1113
1148
|
ref: ref,
|
|
1114
1149
|
style: style,
|
|
1115
|
-
className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports)),
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
}, $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports)),
|
|
1121
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($aWXRc$react)).createElement($aWXRc$reactspectrumtextfield.TextFieldBase, {
|
|
1150
|
+
className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup", {
|
|
1151
|
+
"spectrum-InputGroup--quiet": isQuiet,
|
|
1152
|
+
"is-disabled": isDisabled,
|
|
1153
|
+
"spectrum-InputGroup--invalid": validationState === "invalid" && !isDisabled,
|
|
1154
|
+
"is-hovered": isHovered
|
|
1155
|
+
}, (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($83da5c2df967875d$exports))), "searchautocomplete"), className)
|
|
1156
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).createElement((0, $aWXRc$reactspectrumtextfield.TextFieldBase), {
|
|
1122
1157
|
inputProps: inputProps,
|
|
1123
1158
|
inputRef: inputRef,
|
|
1124
|
-
UNSAFE_className: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
}, $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports)),
|
|
1130
|
-
inputClassName: $aWXRc$reactspectrumutils.classNames((/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports)),
|
|
1159
|
+
UNSAFE_className: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search", "spectrum-Textfield", {
|
|
1160
|
+
"is-disabled": isDisabled,
|
|
1161
|
+
"is-quiet": isQuiet,
|
|
1162
|
+
"spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
|
|
1163
|
+
"spectrum-Search--valid": validationState === "valid" && !isDisabled
|
|
1164
|
+
}, (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($2f86633ce5b04f1e$exports))), "spectrum-InputGroup-field")),
|
|
1165
|
+
inputClassName: (0, $aWXRc$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-input"),
|
|
1131
1166
|
isDisabled: isDisabled,
|
|
1132
1167
|
isQuiet: isQuiet,
|
|
1133
1168
|
validationState: validationState,
|
|
1134
|
-
isLoading: showLoading && (isOpen || menuTrigger ===
|
|
1135
|
-
loadingIndicator: loadingState != null
|
|
1169
|
+
isLoading: showLoading && (isOpen || menuTrigger === "manual" || loadingState === "loading"),
|
|
1170
|
+
loadingIndicator: loadingState != null ? loadingCircle : undefined,
|
|
1136
1171
|
icon: icon,
|
|
1137
|
-
wrapperChildren: inputValue !==
|
|
1172
|
+
wrapperChildren: inputValue !== "" && !isReadOnly ? clearButton : undefined,
|
|
1138
1173
|
disableFocusRing: true
|
|
1139
|
-
})))
|
|
1140
|
-
}
|
|
1174
|
+
})));
|
|
1175
|
+
}
|
|
1176
|
+
let $dcf500d58a031ca6$var$SearchAutocompleteInput = /*#__PURE__*/ (0, ($parcel$interopDefault($aWXRc$react))).forwardRef($dcf500d58a031ca6$var$_SearchAutocompleteInput);
|
|
1141
1177
|
/**
|
|
1142
1178
|
* A SearchAutocomplete is a searchfield that supports a dynamic list of suggestions.
|
|
1143
|
-
*/ let $dcf500d58a031ca6$export$dd65332a5b19fa63 = /*#__PURE__*/ $aWXRc$react.forwardRef($dcf500d58a031ca6$var$SearchAutocomplete);
|
|
1179
|
+
*/ let $dcf500d58a031ca6$export$dd65332a5b19fa63 = /*#__PURE__*/ (0, $aWXRc$react.forwardRef)($dcf500d58a031ca6$var$SearchAutocomplete);
|
|
1144
1180
|
|
|
1145
1181
|
|
|
1146
1182
|
|