@cloudscape-design/components 3.0.33 → 3.0.36
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/app-layout/interfaces.d.ts +2 -0
- package/app-layout/interfaces.d.ts.map +1 -1
- package/app-layout/interfaces.js.map +1 -1
- package/app-layout/styles.css.js +37 -37
- package/app-layout/styles.scoped.css +51 -51
- package/app-layout/styles.selectors.js +37 -37
- package/app-layout/visual-refresh/styles.css.js +59 -59
- package/app-layout/visual-refresh/styles.scoped.css +147 -147
- package/app-layout/visual-refresh/styles.selectors.js +59 -59
- package/autosuggest/autosuggest-option.d.ts +2 -1
- package/autosuggest/autosuggest-option.d.ts.map +1 -1
- package/autosuggest/autosuggest-option.js +2 -2
- package/autosuggest/autosuggest-option.js.map +1 -1
- package/autosuggest/controller.d.ts +3 -3
- package/autosuggest/controller.d.ts.map +1 -1
- package/autosuggest/controller.js +7 -7
- package/autosuggest/controller.js.map +1 -1
- package/autosuggest/dropdown-controller.d.ts +20 -0
- package/autosuggest/dropdown-controller.d.ts.map +1 -0
- package/autosuggest/dropdown-controller.js +27 -0
- package/autosuggest/dropdown-controller.js.map +1 -0
- package/autosuggest/internal.d.ts.map +1 -1
- package/autosuggest/internal.js +29 -56
- package/autosuggest/internal.js.map +1 -1
- package/autosuggest/options-controller.d.ts +12 -13
- package/autosuggest/options-controller.d.ts.map +1 -1
- package/autosuggest/options-controller.js +32 -14
- package/autosuggest/options-controller.js.map +1 -1
- package/autosuggest/options-list.d.ts +4 -7
- package/autosuggest/options-list.d.ts.map +1 -1
- package/autosuggest/options-list.js +8 -9
- package/autosuggest/options-list.js.map +1 -1
- package/autosuggest/plain-list.d.ts +4 -6
- package/autosuggest/plain-list.d.ts.map +1 -1
- package/autosuggest/plain-list.js +7 -7
- package/autosuggest/plain-list.js.map +1 -1
- package/autosuggest/virtual-list.d.ts +1 -1
- package/autosuggest/virtual-list.d.ts.map +1 -1
- package/autosuggest/virtual-list.js +9 -9
- package/autosuggest/virtual-list.js.map +1 -1
- package/checkbox/internal.js +1 -1
- package/checkbox/internal.js.map +1 -1
- package/checkbox/styles.css.js +3 -3
- package/checkbox/styles.scoped.css +5 -8
- package/checkbox/styles.selectors.js +3 -3
- package/{internal/components/content-layout → content-layout}/index.d.ts +1 -1
- package/content-layout/index.d.ts.map +1 -0
- package/content-layout/index.js +39 -0
- package/content-layout/index.js.map +1 -0
- package/content-layout/interfaces.d.ts +19 -0
- package/content-layout/interfaces.d.ts.map +1 -0
- package/{internal/components/content-layout → content-layout}/interfaces.js +0 -0
- package/content-layout/interfaces.js.map +1 -0
- package/content-layout/styles.css.js +12 -0
- package/{internal/components/content-layout → content-layout}/styles.scoped.css +21 -16
- package/content-layout/styles.selectors.js +13 -0
- package/date-range-picker/embedded.d.ts.map +1 -1
- package/date-range-picker/embedded.js +3 -4
- package/date-range-picker/embedded.js.map +1 -1
- package/date-range-picker/index.d.ts.map +1 -1
- package/date-range-picker/index.js +7 -6
- package/date-range-picker/index.js.map +1 -1
- package/date-range-picker/time-offset.d.ts +2 -2
- package/date-range-picker/time-offset.d.ts.map +1 -1
- package/date-range-picker/time-offset.js +2 -3
- package/date-range-picker/time-offset.js.map +1 -1
- package/date-range-picker/use-date-range-picker.d.ts +1 -1
- package/date-range-picker/use-date-range-picker.d.ts.map +1 -1
- package/date-range-picker/use-date-range-picker.js.map +1 -1
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/internal/base-component/styles.scoped.css +2 -2
- package/internal/components/abstract-switch/index.d.ts +2 -1
- package/internal/components/abstract-switch/index.d.ts.map +1 -1
- package/internal/components/abstract-switch/index.js +3 -3
- package/internal/components/abstract-switch/index.js.map +1 -1
- package/internal/components/abstract-switch/styles.css.js +12 -11
- package/internal/components/abstract-switch/styles.scoped.css +27 -17
- package/internal/components/abstract-switch/styles.selectors.js +12 -11
- package/internal/components/options-list/utils/use-highlight-option.d.ts +17 -15
- package/internal/components/options-list/utils/use-highlight-option.d.ts.map +1 -1
- package/internal/components/options-list/utils/use-highlight-option.js +36 -37
- package/internal/components/options-list/utils/use-highlight-option.js.map +1 -1
- package/internal/components/options-list/utils/use-keyboard.d.ts +0 -2
- package/internal/components/options-list/utils/use-keyboard.d.ts.map +1 -1
- package/internal/components/options-list/utils/use-keyboard.js +4 -6
- package/internal/components/options-list/utils/use-keyboard.js.map +1 -1
- package/internal/components/selectable-item/index.d.ts +2 -1
- package/internal/components/selectable-item/index.d.ts.map +1 -1
- package/internal/components/selectable-item/index.js +2 -2
- package/internal/components/selectable-item/index.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/generated/theming/index.cjs +6 -6
- package/internal/generated/theming/index.js +6 -6
- package/internal/utils/date-time/format-timezone-offset.d.ts +1 -1
- package/internal/utils/date-time/format-timezone-offset.d.ts.map +1 -1
- package/internal/utils/date-time/format-timezone-offset.js +2 -1
- package/internal/utils/date-time/format-timezone-offset.js.map +1 -1
- package/internal/utils/date-time/index.d.ts +0 -1
- package/internal/utils/date-time/index.d.ts.map +1 -1
- package/internal/utils/date-time/index.js +0 -1
- package/internal/utils/date-time/index.js.map +1 -1
- package/internal/utils/date-time/parse-timezone-offset.d.ts +1 -1
- package/internal/utils/date-time/parse-timezone-offset.d.ts.map +1 -1
- package/internal/utils/date-time/parse-timezone-offset.js +7 -7
- package/internal/utils/date-time/parse-timezone-offset.js.map +1 -1
- package/internal/utils/date-time/shift-timezone-offset.d.ts +1 -1
- package/internal/utils/date-time/shift-timezone-offset.d.ts.map +1 -1
- package/internal/utils/date-time/shift-timezone-offset.js +2 -1
- package/internal/utils/date-time/shift-timezone-offset.js.map +1 -1
- package/multiselect/internal.d.ts.map +1 -1
- package/multiselect/internal.js +2 -3
- package/multiselect/internal.js.map +1 -1
- package/package.json +2 -1
- package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
- package/property-filter/property-filter-autosuggest.js +26 -55
- package/property-filter/property-filter-autosuggest.js.map +1 -1
- package/property-filter/token-editor.d.ts +3 -2
- package/property-filter/token-editor.d.ts.map +1 -1
- package/property-filter/token-editor.js +66 -76
- package/property-filter/token-editor.js.map +1 -1
- package/radio-group/radio-button.js +1 -1
- package/radio-group/radio-button.js.map +1 -1
- package/radio-group/styles.css.js +9 -9
- package/radio-group/styles.scoped.css +15 -18
- package/radio-group/styles.selectors.js +9 -9
- package/select/internal.d.ts.map +1 -1
- package/select/internal.js +3 -4
- package/select/internal.js.map +1 -1
- package/select/parts/item.d.ts +2 -1
- package/select/parts/item.d.ts.map +1 -1
- package/select/parts/item.js +2 -2
- package/select/parts/item.js.map +1 -1
- package/select/parts/multiselect-item.d.ts +2 -1
- package/select/parts/multiselect-item.d.ts.map +1 -1
- package/select/parts/multiselect-item.js +2 -2
- package/select/parts/multiselect-item.js.map +1 -1
- package/select/parts/plain-list.d.ts +2 -1
- package/select/parts/plain-list.d.ts.map +1 -1
- package/select/parts/plain-list.js +4 -4
- package/select/parts/plain-list.js.map +1 -1
- package/select/parts/virtual-list.js +4 -4
- package/select/parts/virtual-list.js.map +1 -1
- package/select/utils/render-options.d.ts +3 -2
- package/select/utils/render-options.d.ts.map +1 -1
- package/select/utils/render-options.js +2 -2
- package/select/utils/render-options.js.map +1 -1
- package/select/utils/use-native-search.d.ts +1 -2
- package/select/utils/use-native-search.d.ts.map +1 -1
- package/select/utils/use-native-search.js +1 -2
- package/select/utils/use-native-search.js.map +1 -1
- package/select/utils/use-select.d.ts +2 -3
- package/select/utils/use-select.d.ts.map +1 -1
- package/select/utils/use-select.js +16 -22
- package/select/utils/use-select.js.map +1 -1
- package/test-utils/dom/content-layout/index.d.ts +6 -0
- package/test-utils/dom/content-layout/index.js +37 -0
- package/test-utils/dom/content-layout/index.js.map +1 -0
- package/test-utils/dom/index.d.ts +3 -0
- package/test-utils/dom/index.js +10 -2
- package/test-utils/dom/index.js.map +1 -1
- package/test-utils/selectors/content-layout/index.d.ts +6 -0
- package/test-utils/selectors/content-layout/index.js +37 -0
- package/test-utils/selectors/content-layout/index.js.map +1 -0
- package/test-utils/selectors/index.d.ts +3 -0
- package/test-utils/selectors/index.js +10 -2
- package/test-utils/selectors/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
- package/toggle/internal.js +1 -1
- package/toggle/internal.js.map +1 -1
- package/toggle/styles.css.js +8 -8
- package/toggle/styles.scoped.css +13 -16
- package/toggle/styles.selectors.js +8 -8
- package/internal/components/content-layout/index.d.ts.map +0 -1
- package/internal/components/content-layout/index.js +0 -24
- package/internal/components/content-layout/index.js.map +0 -1
- package/internal/components/content-layout/interfaces.d.ts +0 -7
- package/internal/components/content-layout/interfaces.d.ts.map +0 -1
- package/internal/components/content-layout/interfaces.js.map +0 -1
- package/internal/components/content-layout/styles.css.js +0 -12
- package/internal/components/content-layout/styles.selectors.js +0 -13
- package/internal/utils/date-time/get-browser-timezone-offset.d.ts +0 -7
- package/internal/utils/date-time/get-browser-timezone-offset.d.ts.map +0 -1
- package/internal/utils/date-time/get-browser-timezone-offset.js +0 -11
- package/internal/utils/date-time/get-browser-timezone-offset.js.map +0 -1
|
@@ -493,7 +493,7 @@
|
|
|
493
493
|
--space-container-content-top-fsd8nr:0px;
|
|
494
494
|
--space-container-header-vertical-zsjhel:12px;
|
|
495
495
|
--space-container-horizontal-ddrezg:24px;
|
|
496
|
-
--space-
|
|
496
|
+
--space-content-header-padding-bottom-nvqytg:24px;
|
|
497
497
|
--space-dark-header-overlap-distance-hfejul:36px;
|
|
498
498
|
--space-expandable-section-icon-offset-top-svbirl:4px;
|
|
499
499
|
--space-field-horizontal-89h2yr:12px;
|
|
@@ -915,7 +915,7 @@
|
|
|
915
915
|
--size-vertical-panel-icon-offset-ti40n4:13px;
|
|
916
916
|
--space-alert-vertical-jbva6z:4px;
|
|
917
917
|
--space-button-icon-only-horizontal-nidslr:5px;
|
|
918
|
-
--space-
|
|
918
|
+
--space-content-header-padding-bottom-nvqytg:12px;
|
|
919
919
|
--space-dark-header-overlap-distance-hfejul:32px;
|
|
920
920
|
--space-expandable-section-icon-offset-top-svbirl:0;
|
|
921
921
|
--space-grid-gutter-0subky:16px;
|
|
@@ -3,6 +3,7 @@ import { InternalBaseComponentProps } from '../../hooks/use-base-component/index
|
|
|
3
3
|
export interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {
|
|
4
4
|
controlId?: string;
|
|
5
5
|
controlClassName: string;
|
|
6
|
+
outlineClassName: string;
|
|
6
7
|
disabled?: boolean;
|
|
7
8
|
nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;
|
|
8
9
|
styledControl: React.ReactElement;
|
|
@@ -14,5 +15,5 @@ export interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>,
|
|
|
14
15
|
ariaDescribedby?: string;
|
|
15
16
|
withoutLabel?: boolean;
|
|
16
17
|
}
|
|
17
|
-
export default function AbstractSwitch({ controlId, controlClassName, disabled, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, withoutLabel, __internalRootRef, ...rest }: AbstractSwitchProps): JSX.Element;
|
|
18
|
+
export default function AbstractSwitch({ controlId, controlClassName, outlineClassName, disabled, nativeControl, styledControl, label, description, descriptionBottomPadding, ariaLabel, ariaLabelledby, ariaDescribedby, withoutLabel, __internalRootRef, ...rest }: AbstractSwitchProps): JSX.Element;
|
|
18
19
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,0BAA0B;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1F,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAW,EACX,wBAAwB,EACxB,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,0BAA0B,EAAE,MAAM,yCAAyC,CAAC;AAErF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,0BAA0B;IACxG,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;IAC1F,aAAa,EAAE,KAAK,CAAC,YAAY,CAAC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAMD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,SAAS,EACT,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,KAAK,EACL,WAAW,EACX,wBAAwB,EACxB,SAAS,EACT,cAAc,EACd,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,GAAG,IAAI,EACR,EAAE,mBAAmB,eAyErB"}
|
|
@@ -11,7 +11,7 @@ function joinString(values) {
|
|
|
11
11
|
}
|
|
12
12
|
export default function AbstractSwitch(_a) {
|
|
13
13
|
var _b, _c;
|
|
14
|
-
var controlId = _a.controlId, controlClassName = _a.controlClassName, disabled = _a.disabled, nativeControl = _a.nativeControl, styledControl = _a.styledControl, label = _a.label, description = _a.description, descriptionBottomPadding = _a.descriptionBottomPadding, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, withoutLabel = _a.withoutLabel, __internalRootRef = _a.__internalRootRef, rest = __rest(_a, ["controlId", "controlClassName", "disabled", "nativeControl", "styledControl", "label", "description", "descriptionBottomPadding", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "withoutLabel", "__internalRootRef"]);
|
|
14
|
+
var controlId = _a.controlId, controlClassName = _a.controlClassName, outlineClassName = _a.outlineClassName, disabled = _a.disabled, nativeControl = _a.nativeControl, styledControl = _a.styledControl, label = _a.label, description = _a.description, descriptionBottomPadding = _a.descriptionBottomPadding, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescribedby = _a.ariaDescribedby, withoutLabel = _a.withoutLabel, __internalRootRef = _a.__internalRootRef, rest = __rest(_a, ["controlId", "controlClassName", "outlineClassName", "disabled", "nativeControl", "styledControl", "label", "description", "descriptionBottomPadding", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "withoutLabel", "__internalRootRef"]);
|
|
15
15
|
var uniqueId = useUniqueId();
|
|
16
16
|
var id = controlId || uniqueId;
|
|
17
17
|
var focusVisible = useFocusVisible();
|
|
@@ -42,8 +42,8 @@ export default function AbstractSwitch(_a) {
|
|
|
42
42
|
React.createElement(WrapperElement, __assign({}, wrapperAttributes, { className: styles['label-wrapper'], "aria-disabled": disabled ? 'true' : undefined }),
|
|
43
43
|
React.createElement("span", { className: clsx(styles.control, controlClassName) },
|
|
44
44
|
styledControl,
|
|
45
|
-
nativeControl(__assign(__assign({}, focusVisible), { id: id, disabled: disabled, 'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined, 'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined, 'aria-label': ariaLabel })),
|
|
46
|
-
React.createElement("span", { className: styles.outline })),
|
|
45
|
+
nativeControl(__assign(__assign({}, focusVisible), { id: id, disabled: disabled, className: styles['native-input'], 'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined, 'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined, 'aria-label': ariaLabel })),
|
|
46
|
+
React.createElement("span", { className: clsx(styles.outline, outlineClassName) })),
|
|
47
47
|
React.createElement("span", { className: clsx(styles.content, !label && !description && styles['empty-content']) },
|
|
48
48
|
label && (React.createElement("span", { id: labelId, className: clsx(styles.label, (_b = {}, _b[styles['label-disabled']] = disabled, _b)) }, label)),
|
|
49
49
|
description && (React.createElement("span", { id: descriptionId, className: clsx(styles.description, (_c = {},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/abstract-switch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../hooks/focus-visible';\nimport { useUniqueId } from '../../hooks/use-unique-id';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component/index.js';\n\nexport interface AbstractSwitchProps extends React.HTMLAttributes<HTMLElement>, InternalBaseComponentProps {\n controlId?: string;\n controlClassName: string;\n outlineClassName: string;\n disabled?: boolean;\n nativeControl: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactElement;\n styledControl: React.ReactElement;\n label?: React.ReactNode;\n description?: React.ReactNode;\n descriptionBottomPadding?: boolean;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n withoutLabel?: boolean;\n}\n\nfunction joinString(values: (string | undefined)[]) {\n return values.filter((value): value is string => !!value).join(' ');\n}\n\nexport default function AbstractSwitch({\n controlId,\n controlClassName,\n outlineClassName,\n disabled,\n nativeControl,\n styledControl,\n label,\n description,\n descriptionBottomPadding,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n withoutLabel,\n __internalRootRef,\n ...rest\n}: AbstractSwitchProps) {\n const uniqueId = useUniqueId();\n const id = controlId || uniqueId;\n\n const focusVisible = useFocusVisible();\n const wrapperId = `${id}-wrapper`;\n const labelId = `${id}-label`;\n const descriptionId = `${id}-description`;\n\n const WrapperElement = withoutLabel ? 'div' : 'label';\n const wrapperAttributes: Record<string, string | undefined> = {};\n if (!withoutLabel) {\n wrapperAttributes.id = wrapperId;\n wrapperAttributes.htmlFor = id;\n }\n\n const ariaLabelledByIds = [];\n if (label) {\n ariaLabelledByIds.push(labelId);\n }\n if (ariaLabelledby) {\n ariaLabelledByIds.push(ariaLabelledby);\n }\n\n const ariaDescriptons = [];\n if (ariaDescribedby) {\n ariaDescriptons.push(ariaDescribedby);\n }\n if (description) {\n ariaDescriptons.push(descriptionId);\n }\n\n return (\n <div {...rest} className={clsx(styles.wrapper, rest.className)} ref={__internalRootRef}>\n <WrapperElement\n {...wrapperAttributes}\n className={styles['label-wrapper']}\n aria-disabled={disabled ? 'true' : undefined}\n >\n <span className={clsx(styles.control, controlClassName)}>\n {styledControl}\n {nativeControl({\n ...focusVisible,\n id,\n disabled,\n className: styles['native-input'],\n 'aria-describedby': ariaDescriptons.length ? joinString(ariaDescriptons) : undefined,\n 'aria-labelledby': ariaLabelledByIds.length ? joinString(ariaLabelledByIds) : undefined,\n 'aria-label': ariaLabel,\n })}\n <span className={clsx(styles.outline, outlineClassName)} />\n </span>\n <span className={clsx(styles.content, !label && !description && styles['empty-content'])}>\n {label && (\n <span id={labelId} className={clsx(styles.label, { [styles['label-disabled']]: disabled })}>\n {label}\n </span>\n )}\n {description && (\n <span\n id={descriptionId}\n className={clsx(styles.description, {\n [styles['description-disabled']]: disabled,\n [styles['description-bottom-padding']]: descriptionBottomPadding,\n })}\n >\n {description}\n </span>\n )}\n </span>\n </WrapperElement>\n </div>\n );\n}\n"]}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"content": "
|
|
5
|
-
"description": "
|
|
6
|
-
"label": "
|
|
7
|
-
"outline": "
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
4
|
+
"content": "awsui_content_1wepg_1cu7d_93",
|
|
5
|
+
"description": "awsui_description_1wepg_1cu7d_94",
|
|
6
|
+
"label": "awsui_label_1wepg_1cu7d_95",
|
|
7
|
+
"outline": "awsui_outline_1wepg_1cu7d_99",
|
|
8
|
+
"native-input": "awsui_native-input_1wepg_1cu7d_103",
|
|
9
|
+
"wrapper": "awsui_wrapper_1wepg_1cu7d_110",
|
|
10
|
+
"label-wrapper": "awsui_label-wrapper_1wepg_1cu7d_117",
|
|
11
|
+
"empty-content": "awsui_empty-content_1wepg_1cu7d_128",
|
|
12
|
+
"description-bottom-padding": "awsui_description-bottom-padding_1wepg_1cu7d_138",
|
|
13
|
+
"label-disabled": "awsui_label-disabled_1wepg_1cu7d_146",
|
|
14
|
+
"description-disabled": "awsui_description-disabled_1wepg_1cu7d_147",
|
|
15
|
+
"control": "awsui_control_1wepg_1cu7d_152"
|
|
15
16
|
};
|
|
16
17
|
|
|
@@ -90,66 +90,76 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
90
90
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
91
91
|
SPDX-License-Identifier: Apache-2.0
|
|
92
92
|
*/
|
|
93
|
-
.
|
|
94
|
-
.
|
|
95
|
-
.
|
|
96
|
-
.awsui_outline_1wepg_dwz1x_96:not(#\9) {
|
|
93
|
+
.awsui_content_1wepg_1cu7d_93:not(#\9),
|
|
94
|
+
.awsui_description_1wepg_1cu7d_94:not(#\9),
|
|
95
|
+
.awsui_label_1wepg_1cu7d_95:not(#\9) {
|
|
97
96
|
display: block;
|
|
98
97
|
}
|
|
99
98
|
|
|
100
|
-
.
|
|
99
|
+
.awsui_outline_1wepg_1cu7d_99:not(#\9) {
|
|
100
|
+
display: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.awsui_native-input_1wepg_1cu7d_103[data-awsui-focus-visible=true]:not(#\9):focus {
|
|
104
|
+
/* stylelint-disable-next-line selector-max-type, @cloudscape-design/no-implicit-descendant */
|
|
105
|
+
}
|
|
106
|
+
.awsui_native-input_1wepg_1cu7d_103[data-awsui-focus-visible=true]:not(#\9):focus + .awsui_outline_1wepg_1cu7d_99 {
|
|
107
|
+
display: block;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.awsui_wrapper_1wepg_1cu7d_110:not(#\9) {
|
|
101
111
|
min-width: 0;
|
|
102
112
|
-ms-word-break: break-all;
|
|
103
113
|
word-break: break-word;
|
|
104
114
|
display: flex;
|
|
105
115
|
}
|
|
106
116
|
|
|
107
|
-
.awsui_label-
|
|
117
|
+
.awsui_label-wrapper_1wepg_1cu7d_117:not(#\9) {
|
|
108
118
|
position: relative;
|
|
109
119
|
display: flex;
|
|
110
120
|
}
|
|
111
121
|
|
|
112
|
-
.
|
|
122
|
+
.awsui_content_1wepg_1cu7d_93:not(#\9) {
|
|
113
123
|
min-width: 0;
|
|
114
124
|
-ms-word-break: break-all;
|
|
115
125
|
word-break: break-word;
|
|
116
126
|
}
|
|
117
127
|
|
|
118
|
-
.awsui_empty-
|
|
128
|
+
.awsui_empty-content_1wepg_1cu7d_128:not(#\9) {
|
|
119
129
|
width: 0px;
|
|
120
130
|
}
|
|
121
131
|
|
|
122
|
-
.
|
|
132
|
+
.awsui_description_1wepg_1cu7d_94:not(#\9) {
|
|
123
133
|
color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
|
|
124
134
|
font-size: var(--font-body-s-size-ukw2p9, 12px);
|
|
125
135
|
line-height: var(--font-body-s-line-height-kdsbrl, 16px);
|
|
126
136
|
letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
|
|
127
137
|
}
|
|
128
|
-
.awsui_description-bottom-
|
|
138
|
+
.awsui_description-bottom-padding_1wepg_1cu7d_138:not(#\9) {
|
|
129
139
|
padding-bottom: var(--space-scaled-xxs-95dhkm, 4px);
|
|
130
140
|
}
|
|
131
141
|
|
|
132
|
-
.
|
|
133
|
-
.
|
|
142
|
+
.awsui_label_1wepg_1cu7d_95:not(#\9),
|
|
143
|
+
.awsui_description_1wepg_1cu7d_94:not(#\9) {
|
|
134
144
|
padding-left: var(--space-xs-rsr2qu, 8px);
|
|
135
145
|
}
|
|
136
|
-
.awsui_label-
|
|
137
|
-
.awsui_description-
|
|
146
|
+
.awsui_label-disabled_1wepg_1cu7d_146:not(#\9),
|
|
147
|
+
.awsui_description-disabled_1wepg_1cu7d_147:not(#\9) {
|
|
138
148
|
color: var(--color-text-control-disabled-3z3eul, #9ba7b6);
|
|
139
149
|
}
|
|
140
150
|
|
|
141
151
|
/* stylelint-disable selector-max-type */
|
|
142
|
-
.
|
|
152
|
+
.awsui_control_1wepg_1cu7d_152:not(#\9) {
|
|
143
153
|
position: relative;
|
|
144
154
|
}
|
|
145
|
-
.
|
|
155
|
+
.awsui_control_1wepg_1cu7d_152 > input:not(#\9), .awsui_control_1wepg_1cu7d_152 > svg:not(#\9), .awsui_control_1wepg_1cu7d_152 > .awsui_outline_1wepg_1cu7d_99:not(#\9) {
|
|
146
156
|
position: absolute;
|
|
147
157
|
width: 100%;
|
|
148
158
|
height: 100%;
|
|
149
159
|
top: 0;
|
|
150
160
|
left: 0;
|
|
151
161
|
}
|
|
152
|
-
.
|
|
162
|
+
.awsui_control_1wepg_1cu7d_152 > input:not(#\9) {
|
|
153
163
|
opacity: 0;
|
|
154
164
|
z-index: 1;
|
|
155
165
|
-webkit-user-select: none;
|
|
@@ -2,16 +2,17 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"content": "
|
|
6
|
-
"description": "
|
|
7
|
-
"label": "
|
|
8
|
-
"outline": "
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
5
|
+
"content": "awsui_content_1wepg_1cu7d_93",
|
|
6
|
+
"description": "awsui_description_1wepg_1cu7d_94",
|
|
7
|
+
"label": "awsui_label_1wepg_1cu7d_95",
|
|
8
|
+
"outline": "awsui_outline_1wepg_1cu7d_99",
|
|
9
|
+
"native-input": "awsui_native-input_1wepg_1cu7d_103",
|
|
10
|
+
"wrapper": "awsui_wrapper_1wepg_1cu7d_110",
|
|
11
|
+
"label-wrapper": "awsui_label-wrapper_1wepg_1cu7d_117",
|
|
12
|
+
"empty-content": "awsui_empty-content_1wepg_1cu7d_128",
|
|
13
|
+
"description-bottom-padding": "awsui_description-bottom-padding_1wepg_1cu7d_138",
|
|
14
|
+
"label-disabled": "awsui_label-disabled_1wepg_1cu7d_146",
|
|
15
|
+
"description-disabled": "awsui_description-disabled_1wepg_1cu7d_147",
|
|
16
|
+
"control": "awsui_control_1wepg_1cu7d_152"
|
|
16
17
|
};
|
|
17
18
|
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
export
|
|
1
|
+
export declare type HighlightType = 'keyboard' | 'mouse';
|
|
2
|
+
export interface HighlightedOptionProps<OptionType> {
|
|
3
|
+
options: readonly OptionType[];
|
|
3
4
|
isHighlightable: (option: OptionType) => boolean;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
}) => {
|
|
8
|
-
setHighlightedIndex: (index: number) => void;
|
|
5
|
+
}
|
|
6
|
+
export interface HighlightedOptionState<OptionType> {
|
|
7
|
+
highlightType: HighlightType;
|
|
9
8
|
highlightedIndex: number;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
9
|
+
highlightedOption?: OptionType;
|
|
10
|
+
}
|
|
11
|
+
export interface HighlightedOptionHandlers<OptionType> {
|
|
12
|
+
setHighlightedIndexWithMouse(index: number): void;
|
|
13
|
+
moveHighlightWithKeyboard(direction: -1 | 1): void;
|
|
14
|
+
highlightOptionWithKeyboard(option: OptionType): void;
|
|
15
|
+
resetHighlightWithKeyboard(): void;
|
|
16
|
+
goHomeWithKeyboard(): void;
|
|
17
|
+
goEndWithKeyboard(): void;
|
|
18
|
+
}
|
|
19
|
+
export declare function useHighlightedOption<OptionType>({ options, isHighlightable, }: HighlightedOptionProps<OptionType>): [HighlightedOptionState<OptionType>, HighlightedOptionHandlers<OptionType>];
|
|
18
20
|
//# sourceMappingURL=use-highlight-option.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight-option.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"use-highlight-option.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAIA,oBAAY,aAAa,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,sBAAsB,CAAC,UAAU;IAChD,OAAO,EAAE,SAAS,UAAU,EAAE,CAAC;IAC/B,eAAe,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,CAAC;CAClD;AAED,MAAM,WAAW,sBAAsB,CAAC,UAAU;IAChD,aAAa,EAAE,aAAa,CAAC;IAC7B,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,UAAU,CAAC;CAChC;AAED,MAAM,WAAW,yBAAyB,CAAC,UAAU;IAEnD,4BAA4B,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAElD,yBAAyB,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IACnD,2BAA2B,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IACtD,0BAA0B,IAAI,IAAI,CAAC;IACnC,kBAAkB,IAAI,IAAI,CAAC;IAC3B,iBAAiB,IAAI,IAAI,CAAC;CAC3B;AAED,wBAAgB,oBAAoB,CAAC,UAAU,EAAE,EAC/C,OAAO,EACP,eAAe,GAChB,EAAE,sBAAsB,CAAC,UAAU,CAAC,GAAG,CAAC,sBAAsB,CAAC,UAAU,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,CAAC,CA4ClH"}
|
|
@@ -1,43 +1,42 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import { useCallback, useState } from 'react';
|
|
4
|
-
export function
|
|
5
|
-
var isHighlightable = _a.isHighlightable;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
setHighlightedIndex(newIndex);
|
|
23
|
-
}
|
|
24
|
-
};
|
|
25
|
-
var moveHighlight = function (direction) { return moveHighlightFrom(direction); };
|
|
26
|
-
var highlightOption = useCallback(function (option) {
|
|
27
|
-
var index = options.indexOf(option);
|
|
28
|
-
setHighlightedIndex(index);
|
|
29
|
-
}, [options, setHighlightedIndex]);
|
|
30
|
-
return {
|
|
31
|
-
setHighlightedIndex: setHighlightedIndex,
|
|
32
|
-
highlightedIndex: highlightedIndex,
|
|
33
|
-
highlightedType: highlightedType,
|
|
34
|
-
highlightedOption: highlightedOption,
|
|
35
|
-
moveHighlight: moveHighlight,
|
|
36
|
-
resetHighlight: function () { return setHighlightedIndex(-1); },
|
|
37
|
-
goHome: function () { return moveHighlightFrom(1, -1); },
|
|
38
|
-
goEnd: function () { return moveHighlightFrom(-1, options.length); },
|
|
39
|
-
highlightOption: highlightOption
|
|
40
|
-
};
|
|
4
|
+
export function useHighlightedOption(_a) {
|
|
5
|
+
var options = _a.options, isHighlightable = _a.isHighlightable;
|
|
6
|
+
var _b = useState(-1), highlightedIndex = _b[0], setHighlightedIndexState = _b[1];
|
|
7
|
+
var _c = useState('keyboard'), highlightType = _c[0], setHighlightType = _c[1];
|
|
8
|
+
var setHighlightedIndex = useCallback(function (index, highlightType) {
|
|
9
|
+
setHighlightedIndexState(index);
|
|
10
|
+
setHighlightType(highlightType);
|
|
11
|
+
}, []);
|
|
12
|
+
var highlightedOption = options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;
|
|
13
|
+
var moveHighlightFrom = function (direction, startIndex, highlightType) {
|
|
14
|
+
if (startIndex === void 0) { startIndex = highlightedIndex; }
|
|
15
|
+
var newIndex = startIndex;
|
|
16
|
+
do {
|
|
17
|
+
newIndex += direction;
|
|
18
|
+
} while (options[newIndex] && !isHighlightable(options[newIndex]));
|
|
19
|
+
if (options[newIndex]) {
|
|
20
|
+
setHighlightedIndex(newIndex, highlightType);
|
|
21
|
+
}
|
|
41
22
|
};
|
|
23
|
+
var moveHighlight = function (direction, highlightType) {
|
|
24
|
+
return moveHighlightFrom(direction, highlightedIndex, highlightType);
|
|
25
|
+
};
|
|
26
|
+
var highlightOption = useCallback(function (option, highlightType) {
|
|
27
|
+
var index = options.indexOf(option);
|
|
28
|
+
setHighlightedIndex(index, highlightType);
|
|
29
|
+
}, [options, setHighlightedIndex]);
|
|
30
|
+
return [
|
|
31
|
+
{ highlightType: highlightType, highlightedIndex: highlightedIndex, highlightedOption: highlightedOption },
|
|
32
|
+
{
|
|
33
|
+
setHighlightedIndexWithMouse: function (index) { return setHighlightedIndex(index, 'mouse'); },
|
|
34
|
+
moveHighlightWithKeyboard: function (direction) { return moveHighlight(direction, 'keyboard'); },
|
|
35
|
+
highlightOptionWithKeyboard: function (option) { return highlightOption(option, 'keyboard'); },
|
|
36
|
+
resetHighlightWithKeyboard: function () { return setHighlightedIndex(-1, 'keyboard'); },
|
|
37
|
+
goHomeWithKeyboard: function () { return moveHighlightFrom(1, -1, 'keyboard'); },
|
|
38
|
+
goEndWithKeyboard: function () { return moveHighlightFrom(-1, options.length, 'keyboard'); }
|
|
39
|
+
},
|
|
40
|
+
];
|
|
42
41
|
}
|
|
43
42
|
//# sourceMappingURL=use-highlight-option.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight-option.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,
|
|
1
|
+
{"version":3,"file":"use-highlight-option.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-highlight-option.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AA0B9C,MAAM,UAAU,oBAAoB,CAAa,EAGZ;QAFnC,OAAO,aAAA,EACP,eAAe,qBAAA;IAET,IAAA,KAA+C,QAAQ,CAAC,CAAC,CAAC,CAAC,EAA1D,gBAAgB,QAAA,EAAE,wBAAwB,QAAgB,CAAC;IAC5D,IAAA,KAAoC,QAAQ,CAAgB,UAAU,CAAC,EAAtE,aAAa,QAAA,EAAE,gBAAgB,QAAuC,CAAC;IAC9E,IAAM,mBAAmB,GAAG,WAAW,CAAC,UAAC,KAAa,EAAE,aAA4B;QAClF,wBAAwB,CAAC,KAAK,CAAC,CAAC;QAChC,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAM,iBAAiB,GACrB,OAAO,CAAC,gBAAgB,CAAC,IAAI,eAAe,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAElH,IAAM,iBAAiB,GAAG,UAAC,SAAiB,EAAE,UAA6B,EAAE,aAA4B;QAA3D,2BAAA,EAAA,6BAA6B;QACzE,IAAI,QAAQ,GAAG,UAAU,CAAC;QAC1B,GAAG;YACD,QAAQ,IAAI,SAAS,CAAC;SACvB,QAAQ,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAE;QAEnE,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;YACrB,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;SAC9C;IACH,CAAC,CAAC;IAEF,IAAM,aAAa,GAAG,UAAC,SAAiB,EAAE,aAA4B;QACpE,OAAA,iBAAiB,CAAC,SAAS,EAAE,gBAAgB,EAAE,aAAa,CAAC;IAA7D,CAA6D,CAAC;IAEhE,IAAM,eAAe,GAAG,WAAW,CACjC,UAAC,MAAkB,EAAE,aAA4B;QAC/C,IAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACtC,mBAAmB,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAC5C,CAAC,EACD,CAAC,OAAO,EAAE,mBAAmB,CAAC,CAC/B,CAAC;IAEF,OAAO;QACL,EAAE,aAAa,eAAA,EAAE,gBAAgB,kBAAA,EAAE,iBAAiB,mBAAA,EAAE;QACtD;YACE,4BAA4B,EAAE,UAAC,KAAa,IAAK,OAAA,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,EAAnC,CAAmC;YACpF,yBAAyB,EAAE,UAAC,SAAiB,IAAK,OAAA,aAAa,CAAC,SAAS,EAAE,UAAU,CAAC,EAApC,CAAoC;YACtF,2BAA2B,EAAE,UAAC,MAAkB,IAAK,OAAA,eAAe,CAAC,MAAM,EAAE,UAAU,CAAC,EAAnC,CAAmC;YACxF,0BAA0B,EAAE,cAAM,OAAA,mBAAmB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,EAAnC,CAAmC;YACrE,kBAAkB,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,EAApC,CAAoC;YAC9D,iBAAiB,EAAE,cAAM,OAAA,iBAAiB,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,UAAU,CAAC,EAAjD,CAAiD;SAC3E;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useState } from 'react';\n\nexport type HighlightType = 'keyboard' | 'mouse';\n\nexport interface HighlightedOptionProps<OptionType> {\n options: readonly OptionType[];\n isHighlightable: (option: OptionType) => boolean;\n}\n\nexport interface HighlightedOptionState<OptionType> {\n highlightType: HighlightType;\n highlightedIndex: number;\n highlightedOption?: OptionType;\n}\n\nexport interface HighlightedOptionHandlers<OptionType> {\n // Mouse handlers\n setHighlightedIndexWithMouse(index: number): void;\n // Keyboard handlers\n moveHighlightWithKeyboard(direction: -1 | 1): void;\n highlightOptionWithKeyboard(option: OptionType): void;\n resetHighlightWithKeyboard(): void;\n goHomeWithKeyboard(): void;\n goEndWithKeyboard(): void;\n}\n\nexport function useHighlightedOption<OptionType>({\n options,\n isHighlightable,\n}: HighlightedOptionProps<OptionType>): [HighlightedOptionState<OptionType>, HighlightedOptionHandlers<OptionType>] {\n const [highlightedIndex, setHighlightedIndexState] = useState(-1);\n const [highlightType, setHighlightType] = useState<HighlightType>('keyboard');\n const setHighlightedIndex = useCallback((index: number, highlightType: HighlightType) => {\n setHighlightedIndexState(index);\n setHighlightType(highlightType);\n }, []);\n\n const highlightedOption =\n options[highlightedIndex] && isHighlightable(options[highlightedIndex]) ? options[highlightedIndex] : undefined;\n\n const moveHighlightFrom = (direction: -1 | 1, startIndex = highlightedIndex, highlightType: HighlightType) => {\n let newIndex = startIndex;\n do {\n newIndex += direction;\n } while (options[newIndex] && !isHighlightable(options[newIndex]));\n\n if (options[newIndex]) {\n setHighlightedIndex(newIndex, highlightType);\n }\n };\n\n const moveHighlight = (direction: -1 | 1, highlightType: HighlightType) =>\n moveHighlightFrom(direction, highlightedIndex, highlightType);\n\n const highlightOption = useCallback(\n (option: OptionType, highlightType: HighlightType) => {\n const index = options.indexOf(option);\n setHighlightedIndex(index, highlightType);\n },\n [options, setHighlightedIndex]\n );\n\n return [\n { highlightType, highlightedIndex, highlightedOption },\n {\n setHighlightedIndexWithMouse: (index: number) => setHighlightedIndex(index, 'mouse'),\n moveHighlightWithKeyboard: (direction: -1 | 1) => moveHighlight(direction, 'keyboard'),\n highlightOptionWithKeyboard: (option: OptionType) => highlightOption(option, 'keyboard'),\n resetHighlightWithKeyboard: () => setHighlightedIndex(-1, 'keyboard'),\n goHomeWithKeyboard: () => moveHighlightFrom(1, -1, 'keyboard'),\n goEndWithKeyboard: () => moveHighlightFrom(-1, options.length, 'keyboard'),\n },\n ];\n}\n"]}
|
|
@@ -7,7 +7,6 @@ interface UseMenuKeyboard {
|
|
|
7
7
|
goHome: () => void;
|
|
8
8
|
goEnd: () => void;
|
|
9
9
|
closeDropdown: () => void;
|
|
10
|
-
isKeyboard: MutableRefObject<boolean>;
|
|
11
10
|
isSelectingUsingSpace: MutableRefObject<boolean>;
|
|
12
11
|
preventNativeSpace?: boolean;
|
|
13
12
|
}): CancelableEventHandler<BaseKeyDetail>;
|
|
@@ -17,7 +16,6 @@ interface UseTriggerKeyboard {
|
|
|
17
16
|
(inputProps: {
|
|
18
17
|
openDropdown: () => void;
|
|
19
18
|
goHome: () => void;
|
|
20
|
-
isKeyboard: MutableRefObject<boolean>;
|
|
21
19
|
}): CancelableEventHandler<BaseKeyDetail>;
|
|
22
20
|
}
|
|
23
21
|
export declare const useTriggerKeyboard: UseTriggerKeyboard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-keyboard.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-keyboard.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAKxE,UAAU,eAAe;IACvB,CAAC,UAAU,EAAE;QACX,aAAa,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAChE,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,KAAK,EAAE,MAAM,IAAI,CAAC;QAClB,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,
|
|
1
|
+
{"version":3,"file":"use-keyboard.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-keyboard.ts"],"names":[],"mappings":"AAEA,OAAO,EAAe,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAKxE,UAAU,eAAe;IACvB,CAAC,UAAU,EAAE;QACX,aAAa,EAAE,CAAC,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;QAChE,YAAY,EAAE,MAAM,IAAI,CAAC;QACzB,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,KAAK,EAAE,MAAM,IAAI,CAAC;QAClB,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,qBAAqB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACjD,kBAAkB,CAAC,EAAE,OAAO,CAAC;KAC9B,GAAG,sBAAsB,CAAC,aAAa,CAAC,CAAC;CAC3C;AAED,eAAO,MAAM,eAAe,EAAE,eA2C7B,CAAC;AAEF,UAAU,kBAAkB;IAC1B,CAAC,UAAU,EAAE;QAAE,YAAY,EAAE,MAAM,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAAE,GAAG,sBAAsB,CAAC,aAAa,CAAC,CAAC;CACvG;AAED,eAAO,MAAM,kBAAkB,EAAE,kBAkBhC,CAAC"}
|
|
@@ -5,9 +5,8 @@ import { KeyCode } from '../../../keycode';
|
|
|
5
5
|
var HOME = 36;
|
|
6
6
|
var END = 35;
|
|
7
7
|
export var useMenuKeyboard = function (_a) {
|
|
8
|
-
var moveHighlight = _a.moveHighlight, selectOption = _a.selectOption, goHome = _a.goHome, goEnd = _a.goEnd, closeDropdown = _a.closeDropdown,
|
|
8
|
+
var moveHighlight = _a.moveHighlight, selectOption = _a.selectOption, goHome = _a.goHome, goEnd = _a.goEnd, closeDropdown = _a.closeDropdown, isSelectingUsingSpace = _a.isSelectingUsingSpace, _b = _a.preventNativeSpace, preventNativeSpace = _b === void 0 ? false : _b;
|
|
9
9
|
return useCallback(function (e) {
|
|
10
|
-
isKeyboard.current = true;
|
|
11
10
|
switch (e.detail.keyCode) {
|
|
12
11
|
case KeyCode.up:
|
|
13
12
|
e.preventDefault();
|
|
@@ -37,12 +36,11 @@ export var useMenuKeyboard = function (_a) {
|
|
|
37
36
|
isSelectingUsingSpace.current = true;
|
|
38
37
|
}
|
|
39
38
|
}
|
|
40
|
-
}, [moveHighlight, selectOption, goHome, goEnd, closeDropdown,
|
|
39
|
+
}, [moveHighlight, selectOption, goHome, goEnd, closeDropdown, isSelectingUsingSpace, preventNativeSpace]);
|
|
41
40
|
};
|
|
42
41
|
export var useTriggerKeyboard = function (_a) {
|
|
43
|
-
var openDropdown = _a.openDropdown, goHome = _a.goHome
|
|
42
|
+
var openDropdown = _a.openDropdown, goHome = _a.goHome;
|
|
44
43
|
return useCallback(function (e) {
|
|
45
|
-
isKeyboard.current = true;
|
|
46
44
|
switch (e.detail.keyCode) {
|
|
47
45
|
case KeyCode.up:
|
|
48
46
|
case KeyCode.down:
|
|
@@ -55,6 +53,6 @@ export var useTriggerKeyboard = function (_a) {
|
|
|
55
53
|
openDropdown();
|
|
56
54
|
break;
|
|
57
55
|
}
|
|
58
|
-
}, [openDropdown, goHome
|
|
56
|
+
}, [openDropdown, goHome]);
|
|
59
57
|
};
|
|
60
58
|
//# sourceMappingURL=use-keyboard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-keyboard.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-keyboard.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAoB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,IAAM,IAAI,GAAG,EAAE,CAAC;AAChB,IAAM,GAAG,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"use-keyboard.js","sourceRoot":"","sources":["../../../../../../src/internal/components/options-list/utils/use-keyboard.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAoB,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAG3C,IAAM,IAAI,GAAG,EAAE,CAAC;AAChB,IAAM,GAAG,GAAG,EAAE,CAAC;AAcf,MAAM,CAAC,IAAM,eAAe,GAAoB,UAAC,EAQhD;QAPC,aAAa,mBAAA,EACb,YAAY,kBAAA,EACZ,MAAM,YAAA,EACN,KAAK,WAAA,EACL,aAAa,mBAAA,EACb,qBAAqB,2BAAA,EACrB,0BAA0B,EAA1B,kBAAkB,mBAAG,KAAK,KAAA;IAE1B,OAAO,WAAW,CAChB,UAAC,CAA6B;QAC5B,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE;YACxB,KAAK,OAAO,CAAC,EAAE;gBACb,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClB,MAAM;YACR,KAAK,OAAO,CAAC,IAAI;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,aAAa,CAAC,CAAC,CAAC,CAAC;gBACjB,MAAM;YACR,KAAK,IAAI;gBACP,MAAM,EAAE,CAAC;gBACT,MAAM;YACR,KAAK,GAAG;gBACN,KAAK,EAAE,CAAC;gBACR,MAAM;YACR,KAAK,OAAO,CAAC,MAAM;gBACjB,aAAa,EAAE,CAAC;gBAChB,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,YAAY,EAAE,CAAC;gBACf,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,IAAI,kBAAkB,EAAE;oBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,YAAY,EAAE,CAAC;oBACf,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;iBACtC;SACJ;IACH,CAAC,EACD,CAAC,aAAa,EAAE,YAAY,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,qBAAqB,EAAE,kBAAkB,CAAC,CACvG,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,IAAM,kBAAkB,GAAuB,UAAC,EAAwB;QAAtB,YAAY,kBAAA,EAAE,MAAM,YAAA;IAC3E,OAAO,WAAW,CAChB,UAAC,CAA6B;QAC5B,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE;YACxB,KAAK,OAAO,CAAC,EAAE,CAAC;YAChB,KAAK,OAAO,CAAC,IAAI;gBACf,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,MAAM,EAAE,CAAC;gBACT,YAAY,EAAE,CAAC;gBACf,MAAM;YACR,KAAK,OAAO,CAAC,KAAK;gBAChB,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,YAAY,EAAE,CAAC;gBACf,MAAM;SACT;IACH,CAAC,EACD,CAAC,YAAY,EAAE,MAAM,CAAC,CACvB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, MutableRefObject } from 'react';\nimport { KeyCode } from '../../../keycode';\nimport { BaseKeyDetail, CancelableEventHandler } from '../../../events';\n\nconst HOME = 36;\nconst END = 35;\n\ninterface UseMenuKeyboard {\n (inputProps: {\n moveHighlight: (direction: -1 | 1, startIndex?: number) => void;\n selectOption: () => void;\n goHome: () => void;\n goEnd: () => void;\n closeDropdown: () => void;\n isSelectingUsingSpace: MutableRefObject<boolean>;\n preventNativeSpace?: boolean;\n }): CancelableEventHandler<BaseKeyDetail>;\n}\n\nexport const useMenuKeyboard: UseMenuKeyboard = ({\n moveHighlight,\n selectOption,\n goHome,\n goEnd,\n closeDropdown,\n isSelectingUsingSpace,\n preventNativeSpace = false,\n}) => {\n return useCallback(\n (e: CustomEvent<BaseKeyDetail>) => {\n switch (e.detail.keyCode) {\n case KeyCode.up:\n e.preventDefault();\n moveHighlight(-1);\n break;\n case KeyCode.down:\n e.preventDefault();\n moveHighlight(1);\n break;\n case HOME:\n goHome();\n break;\n case END:\n goEnd();\n break;\n case KeyCode.escape:\n closeDropdown();\n break;\n case KeyCode.enter:\n e.preventDefault();\n selectOption();\n break;\n case KeyCode.space:\n if (preventNativeSpace) {\n e.preventDefault();\n selectOption();\n isSelectingUsingSpace.current = true;\n }\n }\n },\n [moveHighlight, selectOption, goHome, goEnd, closeDropdown, isSelectingUsingSpace, preventNativeSpace]\n );\n};\n\ninterface UseTriggerKeyboard {\n (inputProps: { openDropdown: () => void; goHome: () => void }): CancelableEventHandler<BaseKeyDetail>;\n}\n\nexport const useTriggerKeyboard: UseTriggerKeyboard = ({ openDropdown, goHome }) => {\n return useCallback(\n (e: CustomEvent<BaseKeyDetail>) => {\n switch (e.detail.keyCode) {\n case KeyCode.up:\n case KeyCode.down:\n e.preventDefault();\n goHome();\n openDropdown();\n break;\n case KeyCode.space:\n e.preventDefault();\n openDropdown();\n break;\n }\n },\n [openDropdown, goHome]\n );\n};\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { BaseComponentProps } from '../../base-component';
|
|
3
|
+
import { HighlightType } from '../options-list/utils/use-highlight-option.js';
|
|
3
4
|
export interface SelectableItemProps extends BaseComponentProps {
|
|
4
5
|
children: React.ReactNode;
|
|
5
6
|
ariaSelected?: boolean;
|
|
@@ -17,7 +18,7 @@ export interface SelectableItemProps extends BaseComponentProps {
|
|
|
17
18
|
screenReaderContent?: string;
|
|
18
19
|
ariaPosinset?: number;
|
|
19
20
|
ariaSetsize?: number;
|
|
20
|
-
|
|
21
|
+
highlightType?: HighlightType;
|
|
21
22
|
}
|
|
22
23
|
declare const _default: React.ForwardRefExoticComponent<SelectableItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
24
|
export default _default;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAgB,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,+CAA+C,CAAC;AAE9E,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;;AAmGD,wBAAgD"}
|
|
@@ -7,7 +7,7 @@ import styles from './styles.css.js';
|
|
|
7
7
|
import { getBaseProps } from '../../base-component';
|
|
8
8
|
var SelectableItem = function (_a, ref) {
|
|
9
9
|
var _b;
|
|
10
|
-
var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild, virtualPosition = _a.virtualPosition, padBottom = _a.padBottom, isNextSelected = _a.isNextSelected, useInteractiveGroups = _a.useInteractiveGroups, screenReaderContent = _a.screenReaderContent, ariaPosinset = _a.ariaPosinset, ariaSetsize = _a.ariaSetsize,
|
|
10
|
+
var content = _a.children, ariaSelected = _a.ariaSelected, ariaChecked = _a.ariaChecked, selected = _a.selected, highlighted = _a.highlighted, disabled = _a.disabled, hasBackground = _a.hasBackground, isParent = _a.isParent, isChild = _a.isChild, virtualPosition = _a.virtualPosition, padBottom = _a.padBottom, isNextSelected = _a.isNextSelected, useInteractiveGroups = _a.useInteractiveGroups, screenReaderContent = _a.screenReaderContent, ariaPosinset = _a.ariaPosinset, ariaSetsize = _a.ariaSetsize, highlightType = _a.highlightType, restProps = __rest(_a, ["children", "ariaSelected", "ariaChecked", "selected", "highlighted", "disabled", "hasBackground", "isParent", "isChild", "virtualPosition", "padBottom", "isNextSelected", "useInteractiveGroups", "screenReaderContent", "ariaPosinset", "ariaSetsize", "highlightType"]);
|
|
11
11
|
var _c = getBaseProps(restProps), className = _c.className, rest = __rest(_c, ["className"]);
|
|
12
12
|
var classNames = clsx(className, styles['selectable-item'], (_b = {},
|
|
13
13
|
_b[styles.selected] = selected,
|
|
@@ -15,7 +15,7 @@ var SelectableItem = function (_a, ref) {
|
|
|
15
15
|
_b[styles['has-background']] = hasBackground,
|
|
16
16
|
_b[styles.parent] = isParent,
|
|
17
17
|
_b[styles.child] = isChild,
|
|
18
|
-
_b[styles['is-keyboard']] =
|
|
18
|
+
_b[styles['is-keyboard']] = highlightType === 'keyboard',
|
|
19
19
|
_b[styles.disabled] = disabled,
|
|
20
20
|
_b[styles.virtual] = virtualPosition !== undefined,
|
|
21
21
|
_b[styles['pad-bottom']] = padBottom,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/selectable-item/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useLayoutEffect } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { HighlightType } from '../options-list/utils/use-highlight-option.js';\n\nexport interface SelectableItemProps extends BaseComponentProps {\n children: React.ReactNode;\n ariaSelected?: boolean;\n ariaChecked?: boolean;\n selected?: boolean;\n highlighted?: boolean;\n disabled?: boolean;\n hasBackground?: boolean;\n isParent?: boolean;\n isChild?: boolean;\n virtualPosition?: number;\n padBottom?: boolean;\n isNextSelected?: boolean;\n useInteractiveGroups?: boolean;\n screenReaderContent?: string;\n ariaPosinset?: number;\n ariaSetsize?: number;\n highlightType?: HighlightType;\n}\n\nconst SelectableItem = (\n {\n children: content,\n ariaSelected,\n ariaChecked,\n selected,\n highlighted,\n disabled,\n hasBackground,\n isParent,\n isChild,\n virtualPosition,\n padBottom,\n isNextSelected,\n useInteractiveGroups,\n screenReaderContent,\n ariaPosinset,\n ariaSetsize,\n highlightType,\n ...restProps\n }: SelectableItemProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const { className, ...rest } = getBaseProps(restProps);\n const classNames = clsx(className, styles['selectable-item'], {\n [styles.selected]: selected,\n [styles.highlighted]: highlighted,\n [styles['has-background']]: hasBackground,\n [styles.parent]: isParent,\n [styles.child]: isChild,\n [styles['is-keyboard']]: highlightType === 'keyboard',\n [styles.disabled]: disabled,\n [styles.virtual]: virtualPosition !== undefined,\n [styles['pad-bottom']]: padBottom,\n [styles['next-item-selected']]: isNextSelected,\n [styles.interactiveGroups]: useInteractiveGroups,\n });\n\n const contentRef = useRef<HTMLDivElement>(null);\n const screenReaderContentRef = useRef<HTMLDivElement>(null);\n\n useLayoutEffect(() => {\n // the state of aria-hidden and announcement is not set back because NVDA+Firefox would announce\n // the item which lost highlight\n // set aria-hidden true when there is announcement content, so that screen reader still announce\n // meaningful content when navigate with screen reader cursor\n // imperatively update to avoid announcement made multiple times when content updates\n if (highlighted && screenReaderContent) {\n if (contentRef.current) {\n contentRef.current.setAttribute('aria-hidden', 'true');\n }\n if (screenReaderContentRef.current) {\n screenReaderContentRef.current.textContent = screenReaderContent;\n }\n }\n }, [highlighted, screenReaderContent, contentRef, screenReaderContentRef]);\n\n const style =\n virtualPosition !== undefined\n ? {\n transform: `translateY(${virtualPosition}px)`,\n }\n : undefined;\n\n const a11yProperties: Record<string, string | number | boolean | undefined> = {\n 'aria-disabled': disabled,\n };\n\n if (isParent && !useInteractiveGroups) {\n a11yProperties['aria-hidden'] = true;\n }\n\n if (ariaSelected) {\n a11yProperties['aria-selected'] = ariaSelected;\n }\n\n // Safari+VO needs aria-checked for multi-selection. Otherwise it only announces selected option even though another option is highlighted.\n if (ariaChecked) {\n a11yProperties['aria-checked'] = ariaChecked;\n }\n\n if (ariaPosinset && ariaSetsize) {\n a11yProperties['aria-posinset'] = ariaPosinset;\n a11yProperties['aria-setsize'] = ariaSetsize;\n }\n\n return (\n <li role=\"option\" className={classNames} style={style} {...a11yProperties} {...rest}>\n <div className={styles['option-content']} ref={contentRef}>\n {content}\n </div>\n <div className={styles['measure-strut']} ref={ref} />\n <div className={styles['screenreader-content']} ref={screenReaderContentRef}></div>\n </li>\n );\n};\n\nexport default React.forwardRef(SelectableItem);\n"]}
|
package/internal/environment.js
CHANGED