@react-spectrum/searchfield 3.7.7 → 3.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/import.mjs +15 -9
- package/dist/main.css +228 -1
- package/dist/main.css.map +1 -0
- package/dist/main.js +15 -9
- package/dist/main.js.map +1 -1
- package/dist/module.js +15 -9
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +4 -2
- package/dist/types.d.ts.map +1 -1
- package/package.json +11 -10
- package/src/SearchField.tsx +14 -12
package/dist/import.mjs
CHANGED
|
@@ -1,16 +1,21 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
1
3
|
import "./main.css";
|
|
2
4
|
import {useSlotProps as $hlecP$useSlotProps, classNames as $hlecP$classNames} from "@react-spectrum/utils";
|
|
3
5
|
import {ClearButton as $hlecP$ClearButton} from "@react-spectrum/button";
|
|
4
6
|
import $hlecP$spectrumiconsuiMagnifier from "@spectrum-icons/ui/Magnifier";
|
|
5
7
|
import $hlecP$react, {useRef as $hlecP$useRef, forwardRef as $hlecP$forwardRef} from "react";
|
|
6
8
|
import {TextFieldBase as $hlecP$TextFieldBase} from "@react-spectrum/textfield";
|
|
9
|
+
import {useFormProps as $hlecP$useFormProps} from "@react-spectrum/form";
|
|
7
10
|
import {useProviderProps as $hlecP$useProviderProps} from "@react-spectrum/provider";
|
|
8
11
|
import {useSearchField as $hlecP$useSearchField} from "@react-aria/searchfield";
|
|
9
12
|
import {useSearchFieldState as $hlecP$useSearchFieldState} from "@react-stately/searchfield";
|
|
10
13
|
|
|
14
|
+
|
|
11
15
|
function $parcel$interopDefault(a) {
|
|
12
16
|
return a && a.__esModule ? a.default : a;
|
|
13
17
|
}
|
|
18
|
+
|
|
14
19
|
function $parcel$export(e, n, v, s) {
|
|
15
20
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
16
21
|
}
|
|
@@ -92,41 +97,42 @@ $5589e2270a5c2f51$export$2c8a10299d8b3418 = `SOkmSG_spectrum-Textfield`;
|
|
|
92
97
|
|
|
93
98
|
|
|
94
99
|
|
|
100
|
+
|
|
95
101
|
function $a6a4ace9217ce6df$var$SearchField(props, ref) {
|
|
96
102
|
props = (0, $hlecP$useSlotProps)(props, "searchfield");
|
|
97
103
|
props = (0, $hlecP$useProviderProps)(props);
|
|
104
|
+
props = (0, $hlecP$useFormProps)(props);
|
|
98
105
|
let defaultIcon = /*#__PURE__*/ (0, $hlecP$react).createElement((0, $hlecP$spectrumiconsuiMagnifier), {
|
|
99
106
|
"data-testid": "searchicon"
|
|
100
107
|
});
|
|
101
108
|
let { icon: icon = defaultIcon, isDisabled: isDisabled, UNSAFE_className: UNSAFE_className, placeholder: placeholder, ...otherProps } = props;
|
|
102
109
|
if (placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/SearchField.html#help-text");
|
|
103
110
|
let state = (0, $hlecP$useSearchFieldState)(props);
|
|
104
|
-
let inputRef = (0, $hlecP$useRef)();
|
|
105
|
-
let {
|
|
111
|
+
let inputRef = (0, $hlecP$useRef)(null);
|
|
112
|
+
let { clearButtonProps: clearButtonProps, ...result } = (0, $hlecP$useSearchField)(props, state, inputRef);
|
|
106
113
|
let clearButton = /*#__PURE__*/ (0, $hlecP$react).createElement((0, $hlecP$ClearButton), {
|
|
107
114
|
...clearButtonProps,
|
|
108
115
|
preventFocus: true,
|
|
109
116
|
UNSAFE_className: (0, $hlecP$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($5589e2270a5c2f51$exports))), "spectrum-ClearButton"),
|
|
110
117
|
isDisabled: isDisabled
|
|
111
118
|
});
|
|
119
|
+
let validationState = props.validationState || (result.isInvalid ? "invalid" : undefined);
|
|
112
120
|
return /*#__PURE__*/ (0, $hlecP$react).createElement((0, $hlecP$TextFieldBase), {
|
|
113
121
|
...otherProps,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
descriptionProps: descriptionProps,
|
|
117
|
-
errorMessageProps: errorMessageProps,
|
|
122
|
+
...result,
|
|
123
|
+
validationState: validationState,
|
|
118
124
|
UNSAFE_className: (0, $hlecP$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($5589e2270a5c2f51$exports))), "spectrum-Search", "spectrum-Textfield", {
|
|
119
125
|
"is-disabled": isDisabled,
|
|
120
126
|
"is-quiet": props.isQuiet,
|
|
121
|
-
"spectrum-Search--invalid":
|
|
122
|
-
"spectrum-Search--valid":
|
|
127
|
+
"spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
|
|
128
|
+
"spectrum-Search--valid": validationState === "valid" && !isDisabled
|
|
123
129
|
}, UNSAFE_className),
|
|
124
130
|
inputClassName: (0, $hlecP$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($5589e2270a5c2f51$exports))), "spectrum-Search-input"),
|
|
125
131
|
ref: ref,
|
|
126
132
|
inputRef: inputRef,
|
|
127
133
|
isDisabled: isDisabled,
|
|
128
134
|
icon: icon,
|
|
129
|
-
wrapperChildren: state.value !== "" && !props.isReadOnly
|
|
135
|
+
wrapperChildren: state.value !== "" && !props.isReadOnly ? clearButton : undefined
|
|
130
136
|
});
|
|
131
137
|
}
|
|
132
138
|
/**
|
package/dist/main.css
CHANGED
|
@@ -1 +1,228 @@
|
|
|
1
|
-
.SOkmSG_i18nFontFamily{font-synthesis:weight;font-family:adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.SOkmSG_i18nFontFamily:lang(ar){font-family:myriad-arabic,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.SOkmSG_i18nFontFamily:lang(he){font-family:myriad-hebrew,adobe-clean,Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Trebuchet MS,Lucida Grande,sans-serif}.SOkmSG_i18nFontFamily:lang(zh){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Heiti TC Light,sans-serif}.SOkmSG_i18nFontFamily:lang(zh-Hans){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.SOkmSG_i18nFontFamily:lang(zh-Hant){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Microsoft JhengHei UI,Microsoft JhengHei,Heiti TC Light,sans-serif}.SOkmSG_i18nFontFamily:lang(zh-SG),.SOkmSG_i18nFontFamily:lang(zh-CN){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}.SOkmSG_i18nFontFamily:lang(ko){font-family:adobe-clean-han-korean,source-han-korean,Malgun Gothic,Apple Gothic,sans-serif}.SOkmSG_i18nFontFamily:lang(ja){font-family:adobe-clean-han-japanese,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Osaka,YuGothic,Yu Gothic,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif}.SOkmSG_spectrum-FocusRing-ring{--spectrum-focus-ring-border-radius:var(--spectrum-textfield-border-radius,var(--spectrum-alias-border-radius-regular));--spectrum-focus-ring-gap:var(--spectrum-alias-input-focusring-gap);--spectrum-focus-ring-size:var(--spectrum-alias-input-focusring-size);--spectrum-focus-ring-border-size:0px;--spectrum-focus-ring-color:var(--spectrum-high-contrast-focus-ring-color,var(--spectrum-alias-focus-ring-color,var(--spectrum-alias-focus-color)))}.SOkmSG_spectrum-FocusRing-ring:after{border-radius:calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));content:"";margin:calc(-1*var(--spectrum-focus-ring-border-size));pointer-events:none;transition:box-shadow var(--spectrum-global-animation-duration-100,.13s)ease-out,margin var(--spectrum-global-animation-duration-100,.13s)ease-out;display:block;position:absolute;top:0;bottom:0;left:0;right:0}.SOkmSG_spectrum-FocusRing.SOkmSG_focus-ring:after{margin:calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size));box-shadow:0 0 0 var(--spectrum-focus-ring-size)var(--spectrum-focus-ring-color)}.SOkmSG_spectrum-FocusRing--quiet:after{border-radius:0}.SOkmSG_spectrum-FocusRing--quiet.SOkmSG_focus-ring:after{margin:0 0 calc(var(--spectrum-focus-ring-gap)*-1 - var(--spectrum-focus-ring-border-size))0;box-shadow:0 var(--spectrum-focus-ring-size)0 var(--spectrum-focus-ring-color)}.SOkmSG_spectrum-Search{--spectrum-textfield-border-radius:var(--spectrum-search-border-radius,var(--spectrum-alias-border-radius-regular));position:relative}.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton{padding:var(--spectrum-search-clear-button-padding);--spectrum-clearbutton-medium-background-color-hover:var(--spectrum-search-clear-button-background-color-hover);--spectrum-clearbutton-medium-background-color-key-focus:var(--spectrum-search-clear-button-background-color-key-focus);--spectrum-clearbutton-medium-background-color-down:var(--spectrum-search-clear-button-background-color-down);background-clip:content-box;position:absolute;top:0}.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.SOkmSG_spectrum-Search.SOkmSG_is-quiet .SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search.SOkmSG_is-quiet .SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search.SOkmSG_is-quiet .SOkmSG_spectrum-Search-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search.SOkmSG_is-quiet .SOkmSG_spectrum-Search-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search.SOkmSG_is-quiet .SOkmSG_spectrum-Search-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150))}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150));padding-right:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150));padding-right:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150));padding-right:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150));padding-left:0}.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150))/2 + var(--spectrum-global-dimension-size-150));padding-left:0}.SOkmSG_spectrum-Search-input{-webkit-appearance:none;outline-offset:-2px;text-indent:0;display:block}.SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:var(--spectrum-global-dimension-size-350)}.SOkmSG_spectrum-Search-input::-webkit-search-cancel-button{-webkit-appearance:none}.SOkmSG_spectrum-Search-input::-webkit-search-decoration{-webkit-appearance:none}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-Search-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-Search-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-Search-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width,var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-Search-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-Search-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-Search-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-input:not(:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-input:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){padding-right:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-input:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-input:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){padding-left:calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x,var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left,var(--spectrum-global-dimension-size-150)))}
|
|
1
|
+
.SOkmSG_i18nFontFamily {
|
|
2
|
+
font-synthesis: weight;
|
|
3
|
+
font-family: adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.SOkmSG_i18nFontFamily:lang(ar) {
|
|
7
|
+
font-family: myriad-arabic, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.SOkmSG_i18nFontFamily:lang(he) {
|
|
11
|
+
font-family: myriad-hebrew, adobe-clean, Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu, Trebuchet MS, Lucida Grande, sans-serif;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.SOkmSG_i18nFontFamily:lang(zh) {
|
|
15
|
+
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.SOkmSG_i18nFontFamily:lang(zh-Hans) {
|
|
19
|
+
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.SOkmSG_i18nFontFamily:lang(zh-Hant) {
|
|
23
|
+
font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.SOkmSG_i18nFontFamily:lang(zh-SG) {
|
|
27
|
+
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.SOkmSG_i18nFontFamily:lang(zh-CN) {
|
|
31
|
+
font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.SOkmSG_i18nFontFamily:lang(ko) {
|
|
35
|
+
font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.SOkmSG_i18nFontFamily:lang(ja) {
|
|
39
|
+
font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, ＭＳ Ｐゴシック, MS PGothic, sans-serif;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.SOkmSG_spectrum-FocusRing-ring {
|
|
43
|
+
--spectrum-focus-ring-border-radius: var(--spectrum-textfield-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
44
|
+
--spectrum-focus-ring-gap: var(--spectrum-alias-input-focusring-gap);
|
|
45
|
+
--spectrum-focus-ring-size: var(--spectrum-alias-input-focusring-size);
|
|
46
|
+
--spectrum-focus-ring-border-size: 0px;
|
|
47
|
+
--spectrum-focus-ring-color: var(--spectrum-high-contrast-focus-ring-color, var(--spectrum-alias-focus-ring-color, var(--spectrum-alias-focus-color)));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.SOkmSG_spectrum-FocusRing-ring:after {
|
|
51
|
+
border-radius: calc(var(--spectrum-focus-ring-border-radius) + var(--spectrum-focus-ring-gap));
|
|
52
|
+
content: "";
|
|
53
|
+
margin: calc(-1 * var(--spectrum-focus-ring-border-size));
|
|
54
|
+
pointer-events: none;
|
|
55
|
+
transition: box-shadow var(--spectrum-global-animation-duration-100, .13s) ease-out, margin var(--spectrum-global-animation-duration-100, .13s) ease-out;
|
|
56
|
+
display: block;
|
|
57
|
+
position: absolute;
|
|
58
|
+
top: 0;
|
|
59
|
+
bottom: 0;
|
|
60
|
+
left: 0;
|
|
61
|
+
right: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.SOkmSG_spectrum-FocusRing {
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.SOkmSG_spectrum-FocusRing.SOkmSG_focus-ring:after {
|
|
68
|
+
margin: calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size));
|
|
69
|
+
box-shadow: 0 0 0 var(--spectrum-focus-ring-size) var(--spectrum-focus-ring-color);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.SOkmSG_spectrum-FocusRing--quiet:after {
|
|
73
|
+
border-radius: 0;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.SOkmSG_spectrum-FocusRing--quiet.SOkmSG_focus-ring:after {
|
|
77
|
+
margin: 0 0 calc(var(--spectrum-focus-ring-gap) * -1 - var(--spectrum-focus-ring-border-size)) 0;
|
|
78
|
+
box-shadow: 0 var(--spectrum-focus-ring-size) 0 var(--spectrum-focus-ring-color);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.SOkmSG_spectrum-Search {
|
|
82
|
+
--spectrum-textfield-border-radius: var(--spectrum-search-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
83
|
+
position: relative;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton {
|
|
87
|
+
padding: var(--spectrum-search-clear-button-padding);
|
|
88
|
+
--spectrum-clearbutton-medium-background-color-hover: var(--spectrum-search-clear-button-background-color-hover);
|
|
89
|
+
--spectrum-clearbutton-medium-background-color-key-focus: var(--spectrum-search-clear-button-background-color-key-focus);
|
|
90
|
+
--spectrum-clearbutton-medium-background-color-down: var(--spectrum-search-clear-button-background-color-down);
|
|
91
|
+
background-clip: content-box;
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 0;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
97
|
+
right: 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
101
|
+
right: 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
105
|
+
left: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.SOkmSG_spectrum-Search .SOkmSG_spectrum-ClearButton:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
109
|
+
left: 0;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.SOkmSG_spectrum-Search.SOkmSG_is-quiet .SOkmSG_spectrum-Search-input {
|
|
113
|
+
padding-inline-end: var(--spectrum-global-dimension-size-350);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
117
|
+
right: calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)));
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
121
|
+
right: calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)));
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
125
|
+
left: calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)));
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-ClearButton:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
129
|
+
left: calc(var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)));
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
133
|
+
right: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
137
|
+
right: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
141
|
+
left: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-ClearButton:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
145
|
+
left: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
149
|
+
right: 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
153
|
+
right: 0;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
157
|
+
left: 0;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-ClearButton:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
161
|
+
left: 0;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
165
|
+
right: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
169
|
+
right: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
173
|
+
left: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-circleLoader:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
177
|
+
left: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon {
|
|
181
|
+
padding-inline-end: 0;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
185
|
+
right: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))) {
|
|
189
|
+
right: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
193
|
+
left: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.SOkmSG_spectrum-Search.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-validationIcon:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
197
|
+
left: calc(var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) / 2 + var(--spectrum-global-dimension-size-150));
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.SOkmSG_spectrum-Search-input {
|
|
201
|
+
-webkit-appearance: none;
|
|
202
|
+
outline-offset: -2px;
|
|
203
|
+
text-indent: 0;
|
|
204
|
+
padding-inline-end: var(--spectrum-global-dimension-size-350);
|
|
205
|
+
display: block;
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.SOkmSG_spectrum-Search-input::-webkit-search-cancel-button {
|
|
209
|
+
-webkit-appearance: none;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.SOkmSG_spectrum-Search-input::-webkit-search-decoration {
|
|
213
|
+
-webkit-appearance: none;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--invalid .SOkmSG_spectrum-Search-input {
|
|
217
|
+
padding-inline-end: calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-alert-medium-width, var(--spectrum-global-dimension-size-225)) + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--valid .SOkmSG_spectrum-Search-input {
|
|
221
|
+
padding-inline-end: calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.SOkmSG_spectrum-Textfield.SOkmSG_spectrum-Search--loadable .SOkmSG_spectrum-Search-input {
|
|
225
|
+
padding-inline-end: calc(var(--spectrum-global-dimension-size-350) + var(--spectrum-textfield-padding-x, var(--spectrum-global-dimension-size-150)) + var(--spectrum-icon-checkmark-medium-width) + var(--spectrum-textfield-icon-margin-left, var(--spectrum-global-dimension-size-150)));
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/*# sourceMappingURL=main.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"mappings":"AA4DA;;;;;AAIE;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAKF;;;;;;;;AAOE;;;;;;;;;;;;;;AAiBF;;;AAII;;;;;AAQF;;;;AAKE;;;;;AASJ;;;;;AAIE;;;;;;;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAYA;;;;AAIA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAIA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAKA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAMF;;;;;;;;AAgBE;;;;AAAA;;;;AAKA;;;;AAIA;;;;AAIA","sources":["packages/@adobe/spectrum-css-temp/components/search/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n"],"names":[],"version":3,"file":"main.css.map"}
|
package/dist/main.js
CHANGED
|
@@ -1,16 +1,21 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
1
3
|
require("./main.css");
|
|
2
4
|
var $kYnKt$reactspectrumutils = require("@react-spectrum/utils");
|
|
3
5
|
var $kYnKt$reactspectrumbutton = require("@react-spectrum/button");
|
|
4
6
|
var $kYnKt$spectrumiconsuiMagnifier = require("@spectrum-icons/ui/Magnifier");
|
|
5
7
|
var $kYnKt$react = require("react");
|
|
6
8
|
var $kYnKt$reactspectrumtextfield = require("@react-spectrum/textfield");
|
|
9
|
+
var $kYnKt$reactspectrumform = require("@react-spectrum/form");
|
|
7
10
|
var $kYnKt$reactspectrumprovider = require("@react-spectrum/provider");
|
|
8
11
|
var $kYnKt$reactariasearchfield = require("@react-aria/searchfield");
|
|
9
12
|
var $kYnKt$reactstatelysearchfield = require("@react-stately/searchfield");
|
|
10
13
|
|
|
14
|
+
|
|
11
15
|
function $parcel$export(e, n, v, s) {
|
|
12
16
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
13
17
|
}
|
|
18
|
+
|
|
14
19
|
function $parcel$interopDefault(a) {
|
|
15
20
|
return a && a.__esModule ? a.default : a;
|
|
16
21
|
}
|
|
@@ -94,41 +99,42 @@ $1e139f06a0a4b696$export$2c8a10299d8b3418 = `SOkmSG_spectrum-Textfield`;
|
|
|
94
99
|
|
|
95
100
|
|
|
96
101
|
|
|
102
|
+
|
|
97
103
|
function $111fe330b4c1f3ac$var$SearchField(props, ref) {
|
|
98
104
|
props = (0, $kYnKt$reactspectrumutils.useSlotProps)(props, "searchfield");
|
|
99
105
|
props = (0, $kYnKt$reactspectrumprovider.useProviderProps)(props);
|
|
106
|
+
props = (0, $kYnKt$reactspectrumform.useFormProps)(props);
|
|
100
107
|
let defaultIcon = /*#__PURE__*/ (0, ($parcel$interopDefault($kYnKt$react))).createElement((0, ($parcel$interopDefault($kYnKt$spectrumiconsuiMagnifier))), {
|
|
101
108
|
"data-testid": "searchicon"
|
|
102
109
|
});
|
|
103
110
|
let { icon: icon = defaultIcon, isDisabled: isDisabled, UNSAFE_className: UNSAFE_className, placeholder: placeholder, ...otherProps } = props;
|
|
104
111
|
if (placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/SearchField.html#help-text");
|
|
105
112
|
let state = (0, $kYnKt$reactstatelysearchfield.useSearchFieldState)(props);
|
|
106
|
-
let inputRef = (0, $kYnKt$react.useRef)();
|
|
107
|
-
let {
|
|
113
|
+
let inputRef = (0, $kYnKt$react.useRef)(null);
|
|
114
|
+
let { clearButtonProps: clearButtonProps, ...result } = (0, $kYnKt$reactariasearchfield.useSearchField)(props, state, inputRef);
|
|
108
115
|
let clearButton = /*#__PURE__*/ (0, ($parcel$interopDefault($kYnKt$react))).createElement((0, $kYnKt$reactspectrumbutton.ClearButton), {
|
|
109
116
|
...clearButtonProps,
|
|
110
117
|
preventFocus: true,
|
|
111
118
|
UNSAFE_className: (0, $kYnKt$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-ClearButton"),
|
|
112
119
|
isDisabled: isDisabled
|
|
113
120
|
});
|
|
121
|
+
let validationState = props.validationState || (result.isInvalid ? "invalid" : undefined);
|
|
114
122
|
return /*#__PURE__*/ (0, ($parcel$interopDefault($kYnKt$react))).createElement((0, $kYnKt$reactspectrumtextfield.TextFieldBase), {
|
|
115
123
|
...otherProps,
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
descriptionProps: descriptionProps,
|
|
119
|
-
errorMessageProps: errorMessageProps,
|
|
124
|
+
...result,
|
|
125
|
+
validationState: validationState,
|
|
120
126
|
UNSAFE_className: (0, $kYnKt$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search", "spectrum-Textfield", {
|
|
121
127
|
"is-disabled": isDisabled,
|
|
122
128
|
"is-quiet": props.isQuiet,
|
|
123
|
-
"spectrum-Search--invalid":
|
|
124
|
-
"spectrum-Search--valid":
|
|
129
|
+
"spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
|
|
130
|
+
"spectrum-Search--valid": validationState === "valid" && !isDisabled
|
|
125
131
|
}, UNSAFE_className),
|
|
126
132
|
inputClassName: (0, $kYnKt$reactspectrumutils.classNames)((0, (/*@__PURE__*/$parcel$interopDefault($1e139f06a0a4b696$exports))), "spectrum-Search-input"),
|
|
127
133
|
ref: ref,
|
|
128
134
|
inputRef: inputRef,
|
|
129
135
|
isDisabled: isDisabled,
|
|
130
136
|
icon: icon,
|
|
131
|
-
wrapperChildren: state.value !== "" && !props.isReadOnly
|
|
137
|
+
wrapperChildren: state.value !== "" && !props.isReadOnly ? clearButton : undefined
|
|
132
138
|
});
|
|
133
139
|
}
|
|
134
140
|
/**
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C;ACZ1C;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;ACVD,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAdA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA6B,CAAC,eAAe,CAAC;AAC9C,2CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,0CAA0C,CAAC;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAuC,CAAC,yBAAyB,CAAC;;;;;;;;ADWlE,SAAS,kCAAY,KAA+B,EAAE,GAAsB;IAC1E,QAAQ,CAAA,GAAA,sCAAW,EAAE,OAAO;IAC5B,QAAQ,CAAA,GAAA,6CAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,qCAAW,EAAE;IACrB,IAAI,4BACF,0DAAC,CAAA,GAAA,yDAAQ;QAAE,eAAY;;IAGzB,IAAI,QACF,OAAO,yBACP,UAAU,oBACV,gBAAgB,eAChB,WAAW,EACX,GAAG,YACJ,GAAG;IAEJ,IAAI,aACF,QAAQ,IAAI,CAAC;IAGf,IAAI,QAAQ,CAAA,GAAA,kDAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAoB;IACxC,IAAI,oBAAC,gBAAgB,EAAE,GAAG,QAAO,GAAG,CAAA,GAAA,0CAAa,EAAE,OAAO,OAAO;IAEjE,IAAI,4BACF,0DAAC,CAAA,GAAA,sCAAU;QACR,GAAG,gBAAgB;QACpB,cAAA;QACA,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,gEAAK,GACL;QAGJ,YAAY;;IAGhB,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,OAAO,SAAS,GAAG,YAAY,SAAQ;IAEvF,qBACE,0DAAC,CAAA,GAAA,2CAAY;QACV,GAAG,UAAU;QACb,GAAG,MAAM;QACV,iBAAiB;QACjB,kBACE,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,gEAAK,GACL,mBACA,sBACA;YACE,eAAe;YACf,YAAY,MAAM,OAAO;YACzB,4BAA4B,oBAAoB,aAAa,CAAC;YAC9D,0BAA0B,oBAAoB,WAAW,CAAC;QAC5D,GACA;QAGJ,gBAAgB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;QACnC,KAAK;QACL,UAAU;QACV,YAAY;QACZ,MAAM;QACN,iBAAiB,AAAC,MAAM,KAAK,KAAK,MAAM,CAAC,MAAM,UAAU,GAAI,cAAc;;AAEjF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,uBAAS,EAAE;","sources":["packages/@react-spectrum/searchfield/src/index.ts","packages/@react-spectrum/searchfield/src/SearchField.tsx","packages/@adobe/spectrum-css-temp/components/search/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {SearchField} from './SearchField';\nexport type {SpectrumSearchFieldProps} from '@react-types/searchfield';\n","/*\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 {classNames, useSlotProps} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport Magnifier from '@spectrum-icons/ui/Magnifier';\nimport React, {forwardRef, ReactElement, Ref, useRef} from 'react';\nimport {SpectrumSearchFieldProps} from '@react-types/searchfield';\nimport styles from '@adobe/spectrum-css-temp/components/search/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useSearchField} from '@react-aria/searchfield';\nimport {useSearchFieldState} from '@react-stately/searchfield';\n\nfunction SearchField(props: SpectrumSearchFieldProps, ref: Ref<TextFieldRef>) {\n props = useSlotProps(props, 'searchfield');\n props = useProviderProps(props);\n props = useFormProps(props);\n let defaultIcon = (\n <Magnifier data-testid=\"searchicon\" />\n );\n\n let {\n icon = defaultIcon,\n isDisabled,\n UNSAFE_className,\n placeholder,\n ...otherProps\n } = props;\n\n if (placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/SearchField.html#help-text');\n }\n\n let state = useSearchFieldState(props);\n let inputRef = useRef<HTMLInputElement>(null);\n let {clearButtonProps, ...result} = useSearchField(props, state, inputRef);\n\n let clearButton = (\n <ClearButton\n {...clearButtonProps}\n preventFocus\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-ClearButton'\n )\n }\n isDisabled={isDisabled} />\n );\n\n let validationState = props.validationState || (result.isInvalid ? 'invalid' : undefined);\n\n return (\n <TextFieldBase\n {...otherProps}\n {...result}\n validationState={validationState}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-Search',\n 'spectrum-Textfield',\n {\n 'is-disabled': isDisabled,\n 'is-quiet': props.isQuiet,\n 'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,\n 'spectrum-Search--valid': validationState === 'valid' && !isDisabled\n },\n UNSAFE_className\n )\n }\n inputClassName={classNames(styles, 'spectrum-Search-input')}\n ref={ref}\n inputRef={inputRef}\n isDisabled={isDisabled}\n icon={icon}\n wrapperChildren={(state.value !== '' && !props.isReadOnly) ? clearButton : undefined} />\n );\n}\n\n/**\n * A SearchField is a text field designed for searches.\n */\nlet _SearchField = forwardRef(SearchField) as (props: SpectrumSearchFieldProps & {ref?: Ref<TextFieldRef>}) => ReactElement;\nexport {_SearchField as SearchField};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n"],"names":[],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -1,16 +1,21 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
1
3
|
import "./main.css";
|
|
2
4
|
import {useSlotProps as $hlecP$useSlotProps, classNames as $hlecP$classNames} from "@react-spectrum/utils";
|
|
3
5
|
import {ClearButton as $hlecP$ClearButton} from "@react-spectrum/button";
|
|
4
6
|
import $hlecP$spectrumiconsuiMagnifier from "@spectrum-icons/ui/Magnifier";
|
|
5
7
|
import $hlecP$react, {useRef as $hlecP$useRef, forwardRef as $hlecP$forwardRef} from "react";
|
|
6
8
|
import {TextFieldBase as $hlecP$TextFieldBase} from "@react-spectrum/textfield";
|
|
9
|
+
import {useFormProps as $hlecP$useFormProps} from "@react-spectrum/form";
|
|
7
10
|
import {useProviderProps as $hlecP$useProviderProps} from "@react-spectrum/provider";
|
|
8
11
|
import {useSearchField as $hlecP$useSearchField} from "@react-aria/searchfield";
|
|
9
12
|
import {useSearchFieldState as $hlecP$useSearchFieldState} from "@react-stately/searchfield";
|
|
10
13
|
|
|
14
|
+
|
|
11
15
|
function $parcel$interopDefault(a) {
|
|
12
16
|
return a && a.__esModule ? a.default : a;
|
|
13
17
|
}
|
|
18
|
+
|
|
14
19
|
function $parcel$export(e, n, v, s) {
|
|
15
20
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
16
21
|
}
|
|
@@ -92,41 +97,42 @@ $5589e2270a5c2f51$export$2c8a10299d8b3418 = `SOkmSG_spectrum-Textfield`;
|
|
|
92
97
|
|
|
93
98
|
|
|
94
99
|
|
|
100
|
+
|
|
95
101
|
function $a6a4ace9217ce6df$var$SearchField(props, ref) {
|
|
96
102
|
props = (0, $hlecP$useSlotProps)(props, "searchfield");
|
|
97
103
|
props = (0, $hlecP$useProviderProps)(props);
|
|
104
|
+
props = (0, $hlecP$useFormProps)(props);
|
|
98
105
|
let defaultIcon = /*#__PURE__*/ (0, $hlecP$react).createElement((0, $hlecP$spectrumiconsuiMagnifier), {
|
|
99
106
|
"data-testid": "searchicon"
|
|
100
107
|
});
|
|
101
108
|
let { icon: icon = defaultIcon, isDisabled: isDisabled, UNSAFE_className: UNSAFE_className, placeholder: placeholder, ...otherProps } = props;
|
|
102
109
|
if (placeholder) console.warn("Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/SearchField.html#help-text");
|
|
103
110
|
let state = (0, $hlecP$useSearchFieldState)(props);
|
|
104
|
-
let inputRef = (0, $hlecP$useRef)();
|
|
105
|
-
let {
|
|
111
|
+
let inputRef = (0, $hlecP$useRef)(null);
|
|
112
|
+
let { clearButtonProps: clearButtonProps, ...result } = (0, $hlecP$useSearchField)(props, state, inputRef);
|
|
106
113
|
let clearButton = /*#__PURE__*/ (0, $hlecP$react).createElement((0, $hlecP$ClearButton), {
|
|
107
114
|
...clearButtonProps,
|
|
108
115
|
preventFocus: true,
|
|
109
116
|
UNSAFE_className: (0, $hlecP$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($5589e2270a5c2f51$exports))), "spectrum-ClearButton"),
|
|
110
117
|
isDisabled: isDisabled
|
|
111
118
|
});
|
|
119
|
+
let validationState = props.validationState || (result.isInvalid ? "invalid" : undefined);
|
|
112
120
|
return /*#__PURE__*/ (0, $hlecP$react).createElement((0, $hlecP$TextFieldBase), {
|
|
113
121
|
...otherProps,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
descriptionProps: descriptionProps,
|
|
117
|
-
errorMessageProps: errorMessageProps,
|
|
122
|
+
...result,
|
|
123
|
+
validationState: validationState,
|
|
118
124
|
UNSAFE_className: (0, $hlecP$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($5589e2270a5c2f51$exports))), "spectrum-Search", "spectrum-Textfield", {
|
|
119
125
|
"is-disabled": isDisabled,
|
|
120
126
|
"is-quiet": props.isQuiet,
|
|
121
|
-
"spectrum-Search--invalid":
|
|
122
|
-
"spectrum-Search--valid":
|
|
127
|
+
"spectrum-Search--invalid": validationState === "invalid" && !isDisabled,
|
|
128
|
+
"spectrum-Search--valid": validationState === "valid" && !isDisabled
|
|
123
129
|
}, UNSAFE_className),
|
|
124
130
|
inputClassName: (0, $hlecP$classNames)((0, (/*@__PURE__*/$parcel$interopDefault($5589e2270a5c2f51$exports))), "spectrum-Search-input"),
|
|
125
131
|
ref: ref,
|
|
126
132
|
inputRef: inputRef,
|
|
127
133
|
isDisabled: isDisabled,
|
|
128
134
|
icon: icon,
|
|
129
|
-
wrapperChildren: state.value !== "" && !props.isReadOnly
|
|
135
|
+
wrapperChildren: state.value !== "" && !props.isReadOnly ? clearButton : undefined
|
|
130
136
|
});
|
|
131
137
|
}
|
|
132
138
|
/**
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,0CAA0C;ACZ1C;;;;;;;;;;CAUC;;;;;;;;;;;;;;;;;;;;;ACVD,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AACA,IAAA;AAdA,4CAA+B,CAAC,iBAAiB,CAAC;AAClD,4CAAmC,CAAC,qBAAqB,CAAC;AAC1D,4CAA6B,CAAC,eAAe,CAAC;AAC9C,2CAAyC,CAAC,2BAA2B,CAAC;AACtE,4CAA4C,CAAC,8BAA8B,CAAC;AAC5E,4CAAuC,CAAC,0BAA0B,EAAE,0CAA0C,CAAC;AAC/G,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAAoC,CAAC,sBAAsB,CAAC;AAC5D,4CAA6C,CAAC,+BAA+B,CAAC;AAC9E,4CAA8C,CAAC,gCAAgC,CAAC;AAChF,4CAA2C,CAAC,6BAA6B,CAAC;AAC1E,4CAAiD,CAAC,mCAAmC,CAAC;AACtF,4CAA0C,CAAC,4BAA4B,CAAC;AACxE,4CAAmD,CAAC,qCAAqC,CAAC;AAC1F,4CAAuC,CAAC,yBAAyB,CAAC;;;;;;;;ADWlE,SAAS,kCAAY,KAA+B,EAAE,GAAsB;IAC1E,QAAQ,CAAA,GAAA,mBAAW,EAAE,OAAO;IAC5B,QAAQ,CAAA,GAAA,uBAAe,EAAE;IACzB,QAAQ,CAAA,GAAA,mBAAW,EAAE;IACrB,IAAI,4BACF,gCAAC,CAAA,GAAA,+BAAQ;QAAE,eAAY;;IAGzB,IAAI,QACF,OAAO,yBACP,UAAU,oBACV,gBAAgB,eAChB,WAAW,EACX,GAAG,YACJ,GAAG;IAEJ,IAAI,aACF,QAAQ,IAAI,CAAC;IAGf,IAAI,QAAQ,CAAA,GAAA,0BAAkB,EAAE;IAChC,IAAI,WAAW,CAAA,GAAA,aAAK,EAAoB;IACxC,IAAI,oBAAC,gBAAgB,EAAE,GAAG,QAAO,GAAG,CAAA,GAAA,qBAAa,EAAE,OAAO,OAAO;IAEjE,IAAI,4BACF,gCAAC,CAAA,GAAA,kBAAU;QACR,GAAG,gBAAgB;QACpB,cAAA;QACA,kBACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,gEAAK,GACL;QAGJ,YAAY;;IAGhB,IAAI,kBAAkB,MAAM,eAAe,IAAK,CAAA,OAAO,SAAS,GAAG,YAAY,SAAQ;IAEvF,qBACE,gCAAC,CAAA,GAAA,oBAAY;QACV,GAAG,UAAU;QACb,GAAG,MAAM;QACV,iBAAiB;QACjB,kBACE,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,gEAAK,GACL,mBACA,sBACA;YACE,eAAe;YACf,YAAY,MAAM,OAAO;YACzB,4BAA4B,oBAAoB,aAAa,CAAC;YAC9D,0BAA0B,oBAAoB,WAAW,CAAC;QAC5D,GACA;QAGJ,gBAAgB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,gEAAK,GAAG;QACnC,KAAK;QACL,UAAU;QACV,YAAY;QACZ,MAAM;QACN,iBAAiB,AAAC,MAAM,KAAK,KAAK,MAAM,CAAC,MAAM,UAAU,GAAI,cAAc;;AAEjF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE;","sources":["packages/@react-spectrum/searchfield/src/index.ts","packages/@react-spectrum/searchfield/src/SearchField.tsx","packages/@adobe/spectrum-css-temp/components/search/vars.css"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {SearchField} from './SearchField';\nexport type {SpectrumSearchFieldProps} from '@react-types/searchfield';\n","/*\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 {classNames, useSlotProps} from '@react-spectrum/utils';\nimport {ClearButton} from '@react-spectrum/button';\nimport Magnifier from '@spectrum-icons/ui/Magnifier';\nimport React, {forwardRef, ReactElement, Ref, useRef} from 'react';\nimport {SpectrumSearchFieldProps} from '@react-types/searchfield';\nimport styles from '@adobe/spectrum-css-temp/components/search/vars.css';\nimport {TextFieldBase} from '@react-spectrum/textfield';\nimport {TextFieldRef} from '@react-types/textfield';\nimport {useFormProps} from '@react-spectrum/form';\nimport {useProviderProps} from '@react-spectrum/provider';\nimport {useSearchField} from '@react-aria/searchfield';\nimport {useSearchFieldState} from '@react-stately/searchfield';\n\nfunction SearchField(props: SpectrumSearchFieldProps, ref: Ref<TextFieldRef>) {\n props = useSlotProps(props, 'searchfield');\n props = useProviderProps(props);\n props = useFormProps(props);\n let defaultIcon = (\n <Magnifier data-testid=\"searchicon\" />\n );\n\n let {\n icon = defaultIcon,\n isDisabled,\n UNSAFE_className,\n placeholder,\n ...otherProps\n } = props;\n\n if (placeholder) {\n console.warn('Placeholders are deprecated due to accessibility issues. Please use help text instead. See the docs for details: https://react-spectrum.adobe.com/react-spectrum/SearchField.html#help-text');\n }\n\n let state = useSearchFieldState(props);\n let inputRef = useRef<HTMLInputElement>(null);\n let {clearButtonProps, ...result} = useSearchField(props, state, inputRef);\n\n let clearButton = (\n <ClearButton\n {...clearButtonProps}\n preventFocus\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-ClearButton'\n )\n }\n isDisabled={isDisabled} />\n );\n\n let validationState = props.validationState || (result.isInvalid ? 'invalid' : undefined);\n\n return (\n <TextFieldBase\n {...otherProps}\n {...result}\n validationState={validationState}\n UNSAFE_className={\n classNames(\n styles,\n 'spectrum-Search',\n 'spectrum-Textfield',\n {\n 'is-disabled': isDisabled,\n 'is-quiet': props.isQuiet,\n 'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,\n 'spectrum-Search--valid': validationState === 'valid' && !isDisabled\n },\n UNSAFE_className\n )\n }\n inputClassName={classNames(styles, 'spectrum-Search-input')}\n ref={ref}\n inputRef={inputRef}\n isDisabled={isDisabled}\n icon={icon}\n wrapperChildren={(state.value !== '' && !props.isReadOnly) ? clearButton : undefined} />\n );\n}\n\n/**\n * A SearchField is a text field designed for searches.\n */\nlet _SearchField = forwardRef(SearchField) as (props: SpectrumSearchFieldProps & {ref?: Ref<TextFieldRef>}) => ReactElement;\nexport {_SearchField as SearchField};\n","/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n@import './index.css';\n"],"names":[],"version":3,"file":"module.js.map"}
|
package/dist/types.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ReactElement, Ref } from "react";
|
|
2
2
|
import { SpectrumSearchFieldProps } from "@react-types/searchfield";
|
|
3
3
|
import { TextFieldRef } from "@react-types/textfield";
|
|
4
4
|
/**
|
|
5
5
|
* A SearchField is a text field designed for searches.
|
|
6
6
|
*/
|
|
7
|
-
export let SearchField:
|
|
7
|
+
export let SearchField: (props: SpectrumSearchFieldProps & {
|
|
8
|
+
ref?: Ref<TextFieldRef>;
|
|
9
|
+
}) => ReactElement;
|
|
8
10
|
export type { SpectrumSearchFieldProps } from '@react-types/searchfield';
|
|
9
11
|
|
|
10
12
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
1
|
+
{"mappings":";;;AA4FA;;GAEG;AACH,OAAA,IAAI,qBAAkD,wBAAwB,GAAG;IAAC,GAAG,CAAC,EAAE,IAAI,YAAY,CAAC,CAAA;CAAC,KAAK,YAAY,CAAC;AChF5H,YAAY,EAAC,wBAAwB,EAAC,MAAM,0BAA0B,CAAC","sources":["packages/@react-spectrum/searchfield/src/packages/@react-spectrum/searchfield/src/SearchField.tsx","packages/@react-spectrum/searchfield/src/packages/@react-spectrum/searchfield/src/index.ts","packages/@react-spectrum/searchfield/src/index.ts"],"sourcesContent":[null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n/// <reference types=\"css-module-types\" />\n\nexport {SearchField} from './SearchField';\nexport type {SpectrumSearchFieldProps} from '@react-types/searchfield';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@react-spectrum/searchfield",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.8.1",
|
|
4
4
|
"description": "Spectrum UI components in React",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/main.js",
|
|
@@ -36,14 +36,15 @@
|
|
|
36
36
|
"url": "https://github.com/adobe/react-spectrum"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@react-aria/searchfield": "^3.
|
|
40
|
-
"@react-spectrum/button": "^3.
|
|
41
|
-
"@react-spectrum/
|
|
42
|
-
"@react-spectrum/
|
|
43
|
-
"@react-
|
|
44
|
-
"@react-
|
|
45
|
-
"@react-types/
|
|
46
|
-
"@
|
|
39
|
+
"@react-aria/searchfield": "^3.7.0",
|
|
40
|
+
"@react-spectrum/button": "^3.16.0",
|
|
41
|
+
"@react-spectrum/form": "^3.7.1",
|
|
42
|
+
"@react-spectrum/textfield": "^3.11.1",
|
|
43
|
+
"@react-spectrum/utils": "^3.11.3",
|
|
44
|
+
"@react-stately/searchfield": "^3.5.0",
|
|
45
|
+
"@react-types/searchfield": "^3.5.2",
|
|
46
|
+
"@react-types/textfield": "^3.9.0",
|
|
47
|
+
"@spectrum-icons/ui": "^3.6.3",
|
|
47
48
|
"@swc/helpers": "^0.5.0"
|
|
48
49
|
},
|
|
49
50
|
"devDependencies": {
|
|
@@ -57,5 +58,5 @@
|
|
|
57
58
|
"publishConfig": {
|
|
58
59
|
"access": "public"
|
|
59
60
|
},
|
|
60
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "86b38c87868ce7f262e0df905e5ac4eb2653791d"
|
|
61
62
|
}
|
package/src/SearchField.tsx
CHANGED
|
@@ -13,18 +13,20 @@
|
|
|
13
13
|
import {classNames, useSlotProps} from '@react-spectrum/utils';
|
|
14
14
|
import {ClearButton} from '@react-spectrum/button';
|
|
15
15
|
import Magnifier from '@spectrum-icons/ui/Magnifier';
|
|
16
|
-
import React, {forwardRef,
|
|
16
|
+
import React, {forwardRef, ReactElement, Ref, useRef} from 'react';
|
|
17
17
|
import {SpectrumSearchFieldProps} from '@react-types/searchfield';
|
|
18
18
|
import styles from '@adobe/spectrum-css-temp/components/search/vars.css';
|
|
19
19
|
import {TextFieldBase} from '@react-spectrum/textfield';
|
|
20
20
|
import {TextFieldRef} from '@react-types/textfield';
|
|
21
|
+
import {useFormProps} from '@react-spectrum/form';
|
|
21
22
|
import {useProviderProps} from '@react-spectrum/provider';
|
|
22
23
|
import {useSearchField} from '@react-aria/searchfield';
|
|
23
24
|
import {useSearchFieldState} from '@react-stately/searchfield';
|
|
24
25
|
|
|
25
|
-
function SearchField(props: SpectrumSearchFieldProps, ref:
|
|
26
|
+
function SearchField(props: SpectrumSearchFieldProps, ref: Ref<TextFieldRef>) {
|
|
26
27
|
props = useSlotProps(props, 'searchfield');
|
|
27
28
|
props = useProviderProps(props);
|
|
29
|
+
props = useFormProps(props);
|
|
28
30
|
let defaultIcon = (
|
|
29
31
|
<Magnifier data-testid="searchicon" />
|
|
30
32
|
);
|
|
@@ -42,8 +44,8 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
|
|
|
42
44
|
}
|
|
43
45
|
|
|
44
46
|
let state = useSearchFieldState(props);
|
|
45
|
-
let inputRef = useRef<HTMLInputElement>();
|
|
46
|
-
let {
|
|
47
|
+
let inputRef = useRef<HTMLInputElement>(null);
|
|
48
|
+
let {clearButtonProps, ...result} = useSearchField(props, state, inputRef);
|
|
47
49
|
|
|
48
50
|
let clearButton = (
|
|
49
51
|
<ClearButton
|
|
@@ -58,13 +60,13 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
|
|
|
58
60
|
isDisabled={isDisabled} />
|
|
59
61
|
);
|
|
60
62
|
|
|
63
|
+
let validationState = props.validationState || (result.isInvalid ? 'invalid' : undefined);
|
|
64
|
+
|
|
61
65
|
return (
|
|
62
66
|
<TextFieldBase
|
|
63
67
|
{...otherProps}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
descriptionProps={descriptionProps}
|
|
67
|
-
errorMessageProps={errorMessageProps}
|
|
68
|
+
{...result}
|
|
69
|
+
validationState={validationState}
|
|
68
70
|
UNSAFE_className={
|
|
69
71
|
classNames(
|
|
70
72
|
styles,
|
|
@@ -73,8 +75,8 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
|
|
|
73
75
|
{
|
|
74
76
|
'is-disabled': isDisabled,
|
|
75
77
|
'is-quiet': props.isQuiet,
|
|
76
|
-
'spectrum-Search--invalid':
|
|
77
|
-
'spectrum-Search--valid':
|
|
78
|
+
'spectrum-Search--invalid': validationState === 'invalid' && !isDisabled,
|
|
79
|
+
'spectrum-Search--valid': validationState === 'valid' && !isDisabled
|
|
78
80
|
},
|
|
79
81
|
UNSAFE_className
|
|
80
82
|
)
|
|
@@ -84,12 +86,12 @@ function SearchField(props: SpectrumSearchFieldProps, ref: RefObject<TextFieldRe
|
|
|
84
86
|
inputRef={inputRef}
|
|
85
87
|
isDisabled={isDisabled}
|
|
86
88
|
icon={icon}
|
|
87
|
-
wrapperChildren={(state.value !== '' && !props.isReadOnly)
|
|
89
|
+
wrapperChildren={(state.value !== '' && !props.isReadOnly) ? clearButton : undefined} />
|
|
88
90
|
);
|
|
89
91
|
}
|
|
90
92
|
|
|
91
93
|
/**
|
|
92
94
|
* A SearchField is a text field designed for searches.
|
|
93
95
|
*/
|
|
94
|
-
let _SearchField = forwardRef(SearchField);
|
|
96
|
+
let _SearchField = forwardRef(SearchField) as (props: SpectrumSearchFieldProps & {ref?: Ref<TextFieldRef>}) => ReactElement;
|
|
95
97
|
export {_SearchField as SearchField};
|