@cloudscape-design/components 3.0.32 → 3.0.35
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 +2 -4
- package/autosuggest/controller.js.map +1 -1
- package/autosuggest/internal.d.ts.map +1 -1
- package/autosuggest/internal.js +13 -15
- package/autosuggest/internal.js.map +1 -1
- package/autosuggest/options-controller.d.ts +9 -13
- package/autosuggest/options-controller.d.ts.map +1 -1
- package/autosuggest/options-controller.js +10 -15
- 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/breadcrumb-group/item/item.d.ts.map +1 -1
- package/breadcrumb-group/item/item.js +1 -1
- package/breadcrumb-group/item/item.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/controller.d.ts +2 -2
- package/property-filter/controller.d.ts.map +1 -1
- package/property-filter/controller.js +6 -1
- package/property-filter/controller.js.map +1 -1
- package/property-filter/interfaces.d.ts +5 -1
- package/property-filter/interfaces.d.ts.map +1 -1
- package/property-filter/interfaces.js.map +1 -1
- package/property-filter/property-filter-autosuggest.d.ts.map +1 -1
- package/property-filter/property-filter-autosuggest.js +12 -14
- 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/property-filter/use-load-items.d.ts +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/tabs/tab-header-bar.d.ts.map +1 -1
- package/tabs/tab-header-bar.js +2 -2
- package/tabs/tab-header-bar.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
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { AutosuggestItemsHandlers, AutosuggestItemsState } from './options-controller';
|
|
2
3
|
import { AutosuggestItem, AutosuggestProps } from './interfaces';
|
|
3
4
|
export interface AutosuggestOptionsListProps extends Pick<AutosuggestProps, 'enteredTextLabel' | 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'> {
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
autosuggestItemsState: AutosuggestItemsState;
|
|
6
|
+
autosuggestItemsHandlers: AutosuggestItemsHandlers;
|
|
6
7
|
selectOption: (option: AutosuggestItem) => void;
|
|
7
|
-
highlightedIndex: number;
|
|
8
|
-
setHighlightedIndex: (index: number) => void;
|
|
9
8
|
highlightedOptionId?: string;
|
|
10
9
|
highlightText: string;
|
|
11
10
|
listId: string;
|
|
@@ -13,8 +12,6 @@ export interface AutosuggestOptionsListProps extends Pick<AutosuggestProps, 'ent
|
|
|
13
12
|
handleLoadMore: () => void;
|
|
14
13
|
hasDropdownStatus?: boolean;
|
|
15
14
|
listBottom?: React.ReactNode;
|
|
16
|
-
isKeyboard: React.MutableRefObject<boolean>;
|
|
17
|
-
highlightedType: 'mouse' | 'keyboard';
|
|
18
15
|
}
|
|
19
|
-
export default function AutosuggestOptionsList({
|
|
16
|
+
export default function AutosuggestOptionsList({ autosuggestItemsState, autosuggestItemsHandlers, selectOption, highlightedOptionId, highlightText, listId, controlId, enteredTextLabel, handleLoadMore, hasDropdownStatus, virtualScroll, selectedAriaLabel, renderHighlightedAriaLive, listBottom, }: AutosuggestOptionsListProps): JSX.Element;
|
|
20
17
|
//# sourceMappingURL=options-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"options-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,wBAAwB,EAAE,qBAAqB,EAAkB,MAAM,sBAAsB,CAAC;AACvG,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOjE,MAAM,WAAW,2BACf,SAAQ,IAAI,CACV,gBAAgB,EAChB,kBAAkB,GAAG,eAAe,GAAG,mBAAmB,GAAG,2BAA2B,CACzF;IACD,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,wBAAwB,EAAE,wBAAwB,CAAC;IACnD,YAAY,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAiBD,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EACzB,UAAU,GACX,EAAE,2BAA2B,eAiC7B"}
|
|
@@ -12,27 +12,26 @@ var isInteractive = function (option) {
|
|
|
12
12
|
var isHighlightable = function (option) {
|
|
13
13
|
return !!option && option.type !== 'parent';
|
|
14
14
|
};
|
|
15
|
-
var createMouseEventHandler = function (handler
|
|
15
|
+
var createMouseEventHandler = function (handler) { return function (itemIndex) {
|
|
16
16
|
// prevent mouse events to avoid losing focus from the input
|
|
17
|
-
isKeyboard.current = false;
|
|
18
17
|
if (itemIndex > -1) {
|
|
19
18
|
handler(itemIndex);
|
|
20
19
|
}
|
|
21
20
|
}; };
|
|
22
21
|
export default function AutosuggestOptionsList(_a) {
|
|
23
|
-
var
|
|
24
|
-
var highlightVisibleOption = useHighlightVisibleOption(
|
|
25
|
-
var selectVisibleOption = useSelectVisibleOption(
|
|
26
|
-
var handleMouseUp = createMouseEventHandler(selectVisibleOption
|
|
27
|
-
var handleMouseMove = createMouseEventHandler(highlightVisibleOption
|
|
22
|
+
var autosuggestItemsState = _a.autosuggestItemsState, autosuggestItemsHandlers = _a.autosuggestItemsHandlers, selectOption = _a.selectOption, highlightedOptionId = _a.highlightedOptionId, highlightText = _a.highlightText, listId = _a.listId, controlId = _a.controlId, enteredTextLabel = _a.enteredTextLabel, handleLoadMore = _a.handleLoadMore, hasDropdownStatus = _a.hasDropdownStatus, virtualScroll = _a.virtualScroll, selectedAriaLabel = _a.selectedAriaLabel, renderHighlightedAriaLive = _a.renderHighlightedAriaLive, listBottom = _a.listBottom;
|
|
23
|
+
var highlightVisibleOption = useHighlightVisibleOption(autosuggestItemsState.items, autosuggestItemsHandlers.setHighlightedIndexWithMouse, isHighlightable);
|
|
24
|
+
var selectVisibleOption = useSelectVisibleOption(autosuggestItemsState.items, selectOption, isInteractive);
|
|
25
|
+
var handleMouseUp = createMouseEventHandler(selectVisibleOption);
|
|
26
|
+
var handleMouseMove = createMouseEventHandler(highlightVisibleOption);
|
|
28
27
|
var ListComponent = virtualScroll ? VirtualList : PlainList;
|
|
29
28
|
var announcement = useAnnouncement({
|
|
30
29
|
announceSelected: true,
|
|
31
|
-
highlightedOption: highlightedOption,
|
|
30
|
+
highlightedOption: autosuggestItemsState.highlightedOption,
|
|
32
31
|
getParent: function (option) { var _a; return (_a = getParentGroup(option)) === null || _a === void 0 ? void 0 : _a.option; },
|
|
33
32
|
selectedAriaLabel: selectedAriaLabel,
|
|
34
33
|
renderHighlightedAriaLive: renderHighlightedAriaLive
|
|
35
34
|
});
|
|
36
|
-
return (React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore,
|
|
35
|
+
return (React.createElement(ListComponent, { listBottom: listBottom, handleLoadMore: handleLoadMore, autosuggestItemsState: autosuggestItemsState, highlightText: highlightText, enteredTextLabel: enteredTextLabel, highlightedA11yProps: highlightedOptionId ? { id: highlightedOptionId } : {}, hasDropdownStatus: hasDropdownStatus, menuProps: { id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }, screenReaderContent: announcement }));
|
|
37
36
|
}
|
|
38
37
|
//# sourceMappingURL=options-list.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"options-list.js","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,
|
|
1
|
+
{"version":3,"file":"options-list.js","sourceRoot":"","sources":["../../../src/autosuggest/options-list.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACjF,OAAO,EAAmD,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEvG,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,OAAO,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAoBnE,IAAM,aAAa,GAAG,UAAC,MAAwB;IAC7C,OAAO,CAAC,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC;AAClE,CAAC,CAAC;AAEF,IAAM,eAAe,GAAG,UAAC,MAAwB;IAC/C,OAAO,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,KAAK,QAAQ,CAAC;AAC9C,CAAC,CAAC;AAEF,IAAM,uBAAuB,GAAG,UAAC,OAAgC,IAAK,OAAA,UAAC,SAAiB;IACtF,4DAA4D;IAC5D,IAAI,SAAS,GAAG,CAAC,CAAC,EAAE;QAClB,OAAO,CAAC,SAAS,CAAC,CAAC;KACpB;AACH,CAAC,EALqE,CAKrE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAejB;QAd5B,qBAAqB,2BAAA,EACrB,wBAAwB,8BAAA,EACxB,YAAY,kBAAA,EACZ,mBAAmB,yBAAA,EACnB,aAAa,mBAAA,EACb,MAAM,YAAA,EACN,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,iBAAiB,uBAAA,EACjB,aAAa,mBAAA,EACb,iBAAiB,uBAAA,EACjB,yBAAyB,+BAAA,EACzB,UAAU,gBAAA;IAEV,IAAM,sBAAsB,GAAG,yBAAyB,CACtD,qBAAqB,CAAC,KAAK,EAC3B,wBAAwB,CAAC,4BAA4B,EACrD,eAAe,CAChB,CAAC;IACF,IAAM,mBAAmB,GAAG,sBAAsB,CAAC,qBAAqB,CAAC,KAAK,EAAE,YAAY,EAAE,aAAa,CAAC,CAAC;IAC7G,IAAM,aAAa,GAAG,uBAAuB,CAAC,mBAAmB,CAAC,CAAC;IACnE,IAAM,eAAe,GAAG,uBAAuB,CAAC,sBAAsB,CAAC,CAAC;IAExE,IAAM,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,IAAM,YAAY,GAAG,eAAe,CAAC;QACnC,gBAAgB,EAAE,IAAI;QACtB,iBAAiB,EAAE,qBAAqB,CAAC,iBAAiB;QAC1D,SAAS,EAAE,UAAA,MAAM,YAAI,OAAA,MAAA,cAAc,CAAC,MAAM,CAAC,0CAAE,MAAiC,CAAA,EAAA;QAC9E,iBAAiB,mBAAA;QACjB,yBAAyB,2BAAA;KAC1B,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,aAAa,IACZ,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,oBAAoB,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,EAC5E,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,WAAW,EAAE,eAAe,EAAE,EAC5G,mBAAmB,EAAE,YAAY,GACjC,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { useSelectVisibleOption, useHighlightVisibleOption } from './controller';\nimport { AutosuggestItemsHandlers, AutosuggestItemsState, getParentGroup } from './options-controller';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport VirtualList from './virtual-list';\nimport PlainList from './plain-list';\n\nimport { useAnnouncement } from '../select/utils/use-announcement';\nimport { OptionGroup } from '../internal/components/option/interfaces';\n\nexport interface AutosuggestOptionsListProps\n extends Pick<\n AutosuggestProps,\n 'enteredTextLabel' | 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'\n > {\n autosuggestItemsState: AutosuggestItemsState;\n autosuggestItemsHandlers: AutosuggestItemsHandlers;\n selectOption: (option: AutosuggestItem) => void;\n highlightedOptionId?: string;\n highlightText: string;\n listId: string;\n controlId: string;\n handleLoadMore: () => void;\n hasDropdownStatus?: boolean;\n listBottom?: React.ReactNode;\n}\n\nconst isInteractive = (option?: AutosuggestItem) => {\n return !!option && !option.disabled && option.type !== 'parent';\n};\n\nconst isHighlightable = (option?: AutosuggestItem) => {\n return !!option && option.type !== 'parent';\n};\n\nconst createMouseEventHandler = (handler: (index: number) => void) => (itemIndex: number) => {\n // prevent mouse events to avoid losing focus from the input\n if (itemIndex > -1) {\n handler(itemIndex);\n }\n};\n\nexport default function AutosuggestOptionsList({\n autosuggestItemsState,\n autosuggestItemsHandlers,\n selectOption,\n highlightedOptionId,\n highlightText,\n listId,\n controlId,\n enteredTextLabel,\n handleLoadMore,\n hasDropdownStatus,\n virtualScroll,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n listBottom,\n}: AutosuggestOptionsListProps) {\n const highlightVisibleOption = useHighlightVisibleOption(\n autosuggestItemsState.items,\n autosuggestItemsHandlers.setHighlightedIndexWithMouse,\n isHighlightable\n );\n const selectVisibleOption = useSelectVisibleOption(autosuggestItemsState.items, selectOption, isInteractive);\n const handleMouseUp = createMouseEventHandler(selectVisibleOption);\n const handleMouseMove = createMouseEventHandler(highlightVisibleOption);\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const announcement = useAnnouncement({\n announceSelected: true,\n highlightedOption: autosuggestItemsState.highlightedOption,\n getParent: option => getParentGroup(option)?.option as undefined | OptionGroup,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n return (\n <ListComponent\n listBottom={listBottom}\n handleLoadMore={handleLoadMore}\n autosuggestItemsState={autosuggestItemsState}\n highlightText={highlightText}\n enteredTextLabel={enteredTextLabel}\n highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n hasDropdownStatus={hasDropdownStatus}\n menuProps={{ id: listId, ariaLabelledby: controlId, onMouseUp: handleMouseUp, onMouseMove: handleMouseMove }}\n screenReaderContent={announcement}\n />\n );\n}\n"]}
|
|
@@ -1,13 +1,11 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OptionsListProps } from '../internal/components/options-list';
|
|
3
3
|
import { AutosuggestProps, AutosuggestItem } from './interfaces';
|
|
4
|
+
import { AutosuggestItemsState } from './options-controller';
|
|
4
5
|
export interface ListProps {
|
|
6
|
+
autosuggestItemsState: AutosuggestItemsState;
|
|
5
7
|
menuProps: Omit<OptionsListProps, 'children'>;
|
|
6
8
|
handleLoadMore: () => void;
|
|
7
|
-
filteredItems: AutosuggestItem[];
|
|
8
|
-
highlightedOption?: AutosuggestItem;
|
|
9
|
-
highlightedIndex: number;
|
|
10
|
-
highlightedType: 'mouse' | 'keyboard';
|
|
11
9
|
enteredTextLabel: AutosuggestProps.EnteredTextLabel;
|
|
12
10
|
highlightedA11yProps: Record<string, string | number | boolean>;
|
|
13
11
|
hasDropdownStatus?: boolean;
|
|
@@ -15,12 +13,12 @@ export interface ListProps {
|
|
|
15
13
|
listBottom?: React.ReactNode;
|
|
16
14
|
screenReaderContent?: string;
|
|
17
15
|
}
|
|
18
|
-
export declare const getOptionProps: (index: number, item: AutosuggestItem, filteredItems: AutosuggestItem[], highlightedA11yProps: ListProps['highlightedA11yProps'], highlightedOption?:
|
|
16
|
+
export declare const getOptionProps: (index: number, item: AutosuggestItem, filteredItems: readonly AutosuggestItem[], highlightedA11yProps: ListProps['highlightedA11yProps'], highlightedOption?: AutosuggestItem | undefined, hasDropdownStatus?: boolean | undefined) => {
|
|
19
17
|
className?: string | undefined;
|
|
20
18
|
id?: string | undefined;
|
|
21
19
|
nativeAttributes: Record<string, string | number | boolean>;
|
|
22
20
|
padBottom: boolean;
|
|
23
21
|
};
|
|
24
|
-
declare const PlainList: ({
|
|
22
|
+
declare const PlainList: ({ autosuggestItemsState, handleLoadMore, menuProps, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
|
|
25
23
|
export default PlainList;
|
|
26
24
|
//# sourceMappingURL=plain-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"plain-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAKpF,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAE7D,MAAM,WAAW,SAAS;IACxB,qBAAqB,EAAE,qBAAqB,CAAC;IAC7C,SAAS,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;IAC9C,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,gBAAgB,CAAC,gBAAgB,CAAC;IACpD,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,cAAc,UAClB,MAAM,QACP,eAAe,iBACN,SAAS,eAAe,EAAE,wBACnB,SAAS,CAAC,sBAAsB,CAAC;;;;;CAWxD,CAAC;AAEF,QAAA,MAAM,SAAS,qKAUZ,SAAS,gBAiDX,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -16,21 +16,21 @@ export var getOptionProps = function (index, item, filteredItems, highlightedA11
|
|
|
16
16
|
return __assign({ nativeAttributes: nativeAttributes, padBottom: padBottom }, baseOptionProps);
|
|
17
17
|
};
|
|
18
18
|
var PlainList = function (_a) {
|
|
19
|
-
var
|
|
19
|
+
var autosuggestItemsState = _a.autosuggestItemsState, handleLoadMore = _a.handleLoadMore, menuProps = _a.menuProps, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
|
|
20
20
|
var listRef = useRef(null);
|
|
21
21
|
useEffect(function () {
|
|
22
22
|
var _a;
|
|
23
|
-
var item = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-mouse-target=\"".concat(highlightedIndex, "\"]"));
|
|
24
|
-
if (
|
|
23
|
+
var item = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-mouse-target=\"".concat(autosuggestItemsState.highlightedIndex, "\"]"));
|
|
24
|
+
if (autosuggestItemsState.highlightType === 'keyboard' && item) {
|
|
25
25
|
scrollUntilVisible(item);
|
|
26
26
|
}
|
|
27
|
-
}, [
|
|
27
|
+
}, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);
|
|
28
28
|
return (React.createElement(OptionsList, __assign({}, menuProps, { onLoadMore: handleLoadMore, open: true, ref: listRef,
|
|
29
29
|
// to prevent closing the list when clicking the scrollbar on IE11
|
|
30
30
|
nativeAttributes: { unselectable: 'on' } }),
|
|
31
|
-
|
|
32
|
-
var optionProps = getOptionProps(index, item,
|
|
33
|
-
return (React.createElement(AutosuggestOption, __assign({ highlightText: highlightText, option: item, highlighted: item === highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, screenReaderContent: screenReaderContent,
|
|
31
|
+
autosuggestItemsState.items.map(function (item, index) {
|
|
32
|
+
var optionProps = getOptionProps(index, item, autosuggestItemsState.items, highlightedA11yProps, autosuggestItemsState.highlightedOption, hasDropdownStatus);
|
|
33
|
+
return (React.createElement(AutosuggestOption, __assign({ highlightText: highlightText, option: item, highlighted: item === autosuggestItemsState.highlightedOption, key: index, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, screenReaderContent: screenReaderContent, highlightType: autosuggestItemsState.highlightType }, optionProps)));
|
|
34
34
|
}),
|
|
35
35
|
listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
|
|
36
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,WAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAC;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"plain-list.js","sourceRoot":"","sources":["../../../src/autosuggest/plain-list.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, { useEffect, useRef } from 'react';\n\nimport OptionsList, { OptionsListProps } from '../internal/components/options-list';\nimport { scrollUntilVisible } from '../internal/utils/scrollable-containers';\nimport { getBaseProps } from '../internal/base-component';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { AutosuggestProps, AutosuggestItem } from './interfaces';\nimport styles from './styles.css.js';\nimport { AutosuggestItemsState } from './options-controller';\n\nexport interface ListProps {\n autosuggestItemsState: AutosuggestItemsState;\n menuProps: Omit<OptionsListProps, 'children'>;\n handleLoadMore: () => void;\n enteredTextLabel: AutosuggestProps.EnteredTextLabel;\n highlightedA11yProps: Record<string, string | number | boolean>;\n hasDropdownStatus?: boolean;\n highlightText: string;\n listBottom?: React.ReactNode;\n screenReaderContent?: string;\n}\n\nexport const getOptionProps = (\n index: number,\n item: AutosuggestItem,\n filteredItems: readonly AutosuggestItem[],\n highlightedA11yProps: ListProps['highlightedA11yProps'],\n highlightedOption?: AutosuggestItem,\n hasDropdownStatus?: boolean\n) => {\n const nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};\n const baseOptionProps = getBaseProps(nativeAttributes);\n const isLastItem = index === filteredItems.length - 1;\n const isNotEnteredTextItem = filteredItems.length > 1;\n const padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;\n\n return { nativeAttributes, padBottom, ...baseOptionProps };\n};\n\nconst PlainList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n enteredTextLabel,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const listRef = useRef<HTMLUListElement>(null);\n useEffect(() => {\n const item = listRef.current?.querySelector(`[data-mouse-target=\"${autosuggestItemsState.highlightedIndex}\"]`);\n if (autosuggestItemsState.highlightType === 'keyboard' && item) {\n scrollUntilVisible(item as HTMLElement);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n open={true}\n ref={listRef}\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n >\n {autosuggestItemsState.items.map((item, index) => {\n const optionProps = getOptionProps(\n index,\n item,\n autosuggestItemsState.items,\n highlightedA11yProps,\n autosuggestItemsState.highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n key={index}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n screenReaderContent={screenReaderContent}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default PlainList;\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ListProps } from './plain-list';
|
|
2
|
-
declare const VirtualList: ({
|
|
2
|
+
declare const VirtualList: ({ autosuggestItemsState, handleLoadMore, menuProps, enteredTextLabel, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }: ListProps) => JSX.Element;
|
|
3
3
|
export default VirtualList;
|
|
4
4
|
//# sourceMappingURL=virtual-list.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,QAAA,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"virtual-list.d.ts","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":"AASA,OAAO,EAAkB,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzD,QAAA,MAAM,WAAW,qKAUd,SAAS,gBA2EX,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -9,13 +9,13 @@ import AutosuggestOption from './autosuggest-option';
|
|
|
9
9
|
import { getOptionProps } from './plain-list';
|
|
10
10
|
import styles from './styles.css.js';
|
|
11
11
|
var VirtualList = function (_a) {
|
|
12
|
-
var
|
|
12
|
+
var autosuggestItemsState = _a.autosuggestItemsState, handleLoadMore = _a.handleLoadMore, menuProps = _a.menuProps, enteredTextLabel = _a.enteredTextLabel, highlightedA11yProps = _a.highlightedA11yProps, hasDropdownStatus = _a.hasDropdownStatus, highlightText = _a.highlightText, listBottom = _a.listBottom, screenReaderContent = _a.screenReaderContent;
|
|
13
13
|
var scrollRef = useRef(null);
|
|
14
14
|
// update component, when it gets wider or narrower to reposition items
|
|
15
15
|
var _b = useContainerQuery(function (rect) { return rect.width; }, []), width = _b[0], strutRef = _b[1];
|
|
16
16
|
useImperativeHandle(strutRef, function () { return scrollRef.current; });
|
|
17
17
|
var rowVirtualizer = useVirtual({
|
|
18
|
-
size:
|
|
18
|
+
size: autosuggestItemsState.items.length,
|
|
19
19
|
parentRef: scrollRef,
|
|
20
20
|
// estimateSize is a dependency of measurements memo. We update it to force full recalculation
|
|
21
21
|
// when the height of any option could have changed:
|
|
@@ -26,19 +26,19 @@ var VirtualList = function (_a) {
|
|
|
26
26
|
overscan: 5
|
|
27
27
|
});
|
|
28
28
|
useEffect(function () {
|
|
29
|
-
if (
|
|
30
|
-
rowVirtualizer.scrollToIndex(highlightedIndex);
|
|
29
|
+
if (autosuggestItemsState.highlightType === 'keyboard') {
|
|
30
|
+
rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);
|
|
31
31
|
}
|
|
32
|
-
}, [
|
|
32
|
+
}, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);
|
|
33
33
|
return (React.createElement(OptionsList, __assign({}, menuProps, { onLoadMore: handleLoadMore, ref: scrollRef, open: true,
|
|
34
34
|
// to prevent closing the list when clicking the scrollbar on IE11
|
|
35
35
|
nativeAttributes: { unselectable: 'on' } }),
|
|
36
|
-
React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: rowVirtualizer.totalSize + (
|
|
36
|
+
React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: rowVirtualizer.totalSize + (autosuggestItemsState.items.length === 1 ? 1 : 0) } }),
|
|
37
37
|
rowVirtualizer.virtualItems.map(function (virtualRow) {
|
|
38
38
|
var index = virtualRow.index, start = virtualRow.start, measureRef = virtualRow.measureRef;
|
|
39
|
-
var item =
|
|
40
|
-
var optionProps = getOptionProps(index, item,
|
|
41
|
-
return (React.createElement(AutosuggestOption, __assign({ key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === highlightedOption, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize:
|
|
39
|
+
var item = autosuggestItemsState.items[index];
|
|
40
|
+
var optionProps = getOptionProps(index, item, autosuggestItemsState.items, highlightedA11yProps, autosuggestItemsState.highlightedOption, hasDropdownStatus);
|
|
41
|
+
return (React.createElement(AutosuggestOption, __assign({ key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === autosuggestItemsState.highlightedOption, "data-mouse-target": index, enteredTextLabel: enteredTextLabel, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize: autosuggestItemsState.items.length, ariaPosinset: index + 1, highlightType: autosuggestItemsState.highlightType }, optionProps)));
|
|
42
42
|
}),
|
|
43
43
|
listBottom ? (React.createElement("li", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
|
|
44
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAExE,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;AACzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,IAAM,WAAW,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"virtual-list.js","sourceRoot":"","sources":["../../../src/autosuggest/virtual-list.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, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';\nimport { useVirtual } from 'react-virtual';\n\nimport OptionsList from '../internal/components/options-list';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\n\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport styles from './styles.css.js';\n\nconst VirtualList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n enteredTextLabel,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n}: ListProps) => {\n const scrollRef = useRef<HTMLUListElement>(null);\n // update component, when it gets wider or narrower to reposition items\n const [width, strutRef] = useContainerQuery(rect => rect.width, []);\n useImperativeHandle(strutRef, () => scrollRef.current);\n const rowVirtualizer = useVirtual({\n size: autosuggestItemsState.items.length,\n parentRef: scrollRef,\n // estimateSize is a dependency of measurements memo. We update it to force full recalculation\n // when the height of any option could have changed:\n // 1: because the component got resized (width property got updated)\n // 2: becasue the option changed its content (highlightText property controls the highlight and the visibility of hidden tags)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n estimateSize: useCallback(() => 31, [width, highlightText]),\n overscan: 5,\n });\n\n useEffect(() => {\n if (autosuggestItemsState.highlightType === 'keyboard') {\n rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);\n\n return (\n <OptionsList\n {...menuProps}\n onLoadMore={handleLoadMore}\n ref={scrollRef}\n open={true}\n // to prevent closing the list when clicking the scrollbar on IE11\n nativeAttributes={{ unselectable: 'on' }}\n >\n <div\n aria-hidden=\"true\"\n key=\"total-size\"\n className={styles['layout-strut']}\n style={{ height: rowVirtualizer.totalSize + (autosuggestItemsState.items.length === 1 ? 1 : 0) }}\n />\n {rowVirtualizer.virtualItems.map(virtualRow => {\n const { index, start, measureRef } = virtualRow;\n const item = autosuggestItemsState.items[index];\n const optionProps = getOptionProps(\n index,\n item,\n autosuggestItemsState.items,\n highlightedA11yProps,\n autosuggestItemsState.highlightedOption,\n hasDropdownStatus\n );\n\n return (\n <AutosuggestOption\n key={index}\n ref={measureRef}\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n data-mouse-target={index}\n enteredTextLabel={enteredTextLabel}\n virtualPosition={start + (index === 0 ? 1 : 0)}\n screenReaderContent={screenReaderContent}\n ariaSetsize={autosuggestItemsState.items.length}\n ariaPosinset={index + 1}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <li role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </li>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default VirtualList;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAQ1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAQ1E,wBAAgB,cAAc,CAAC,CAAC,SAAS,oBAAoB,CAAC,IAAI,EAAE,EAClE,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,MAAc,EACd,YAAoB,GACrB,EAAE,mBAAmB,CAAC,CAAC,CAAC,eA6BxB"}
|
|
@@ -20,7 +20,7 @@ export function BreadcrumbItem(_a) {
|
|
|
20
20
|
fireCancelableEvent(onClick, getEventDetail(item), event);
|
|
21
21
|
};
|
|
22
22
|
return (React.createElement("div", { className: clsx(styles.breadcrumb, isLast && styles.last) },
|
|
23
|
-
React.createElement("a", __assign({}, focusVisible, { href: item.href || '#', className: clsx(styles.anchor, (_b = {}, _b[styles.compressed] = isCompressed, _b)), "aria-current": isLast ? 'page' : undefined, "aria-disabled": isLast && 'true', onClick: isLast ? preventDefault : onClickHandler }),
|
|
23
|
+
React.createElement("a", __assign({}, focusVisible, { href: isLast ? undefined : item.href || '#', className: clsx(styles.anchor, (_b = {}, _b[styles.compressed] = isCompressed, _b)), "aria-current": isLast ? 'page' : undefined, "aria-disabled": isLast && 'true', onClick: isLast ? preventDefault : onClickHandler, tabIndex: isLast ? 0 : undefined }),
|
|
24
24
|
React.createElement("span", { className: styles.text }, item.text)),
|
|
25
25
|
!isLast ? (React.createElement("span", { className: styles.icon },
|
|
26
26
|
React.createElement(InternalIcon, { name: "angle-right" }))) : null));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,UAAU,cAAc,CAAsC,EAM3C;;QALvB,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA;IAEpB,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,IAAM,cAAc,GAAG,UAAC,KAAuB,IAAK,OAAA,KAAK,CAAC,cAAc,EAAE,EAAtB,CAAsB,CAAC;IAC3E,IAAM,cAAc,GAAG,UAAC,KAAuB;QAC7C,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;SAC5D;QACD,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC;QAC5D,sCACM,YAAY,IAChB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,GAAG,
|
|
1
|
+
{"version":3,"file":"item.js","sourceRoot":"","sources":["../../../../src/breadcrumb-group/item/item.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,eAAe,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9E,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,MAAM,UAAU,cAAc,CAAsC,EAM3C;;QALvB,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,oBAAoB,EAApB,YAAY,mBAAG,KAAK,KAAA;IAEpB,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IACvC,IAAM,cAAc,GAAG,UAAC,KAAuB,IAAK,OAAA,KAAK,CAAC,cAAc,EAAE,EAAtB,CAAsB,CAAC;IAC3E,IAAM,cAAc,GAAG,UAAC,KAAuB;QAC7C,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;SAC5D;QACD,mBAAmB,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;IAC5D,CAAC,CAAC;IACF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,IAAI,MAAM,CAAC,IAAI,CAAC;QAC5D,sCACM,YAAY,IAChB,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,GAAG,EAC3C,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YAAI,GAAC,MAAM,CAAC,UAAU,IAAG,YAAY,MAAG,kBACvD,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC1B,MAAM,IAAI,MAAM,EAC/B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EACjD,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAEhC,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,IAAI,CAAC,IAAI,CAAQ,CAC9C;QACH,CAAC,MAAM,CAAC,CAAC,CAAC,CACT,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI;YAC1B,oBAAC,YAAY,IAAC,IAAI,EAAC,aAAa,GAAG,CAC9B,CACR,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BreadcrumbGroupProps, BreadcrumbItemProps } from '../interfaces';\nimport InternalIcon from '../../icon/internal';\nimport styles from './styles.css.js';\nimport clsx from 'clsx';\nimport useFocusVisible from '../../internal/hooks/focus-visible';\nimport { fireCancelableEvent, isPlainLeftClick } from '../../internal/events';\nimport { getEventDetail } from '../internal';\n\nexport function BreadcrumbItem<T extends BreadcrumbGroupProps.Item>({\n item,\n onClick,\n onFollow,\n isLast = false,\n isCompressed = false,\n}: BreadcrumbItemProps<T>) {\n const focusVisible = useFocusVisible();\n const preventDefault = (event: React.MouseEvent) => event.preventDefault();\n const onClickHandler = (event: React.MouseEvent) => {\n if (isPlainLeftClick(event)) {\n fireCancelableEvent(onFollow, getEventDetail(item), event);\n }\n fireCancelableEvent(onClick, getEventDetail(item), event);\n };\n return (\n <div className={clsx(styles.breadcrumb, isLast && styles.last)}>\n <a\n {...focusVisible}\n href={isLast ? undefined : item.href || '#'}\n className={clsx(styles.anchor, { [styles.compressed]: isCompressed })}\n aria-current={isLast ? 'page' : undefined} // Active breadcrumb item is implemented according to WAI-ARIA 1.1\n aria-disabled={isLast && 'true'}\n onClick={isLast ? preventDefault : onClickHandler}\n tabIndex={isLast ? 0 : undefined} // tabIndex is added to the last crumb to keep it in the index without an href\n >\n <span className={styles.text}>{item.text}</span>\n </a>\n {!isLast ? (\n <span className={styles.icon}>\n <InternalIcon name=\"angle-right\" />\n </span>\n ) : null}\n </div>\n );\n}\n"]}
|
package/checkbox/internal.js
CHANGED
|
@@ -19,7 +19,7 @@ var InternalCheckbox = React.forwardRef(function (_a, ref) {
|
|
|
19
19
|
checkboxRef.current.indeterminate = Boolean(indeterminate);
|
|
20
20
|
}
|
|
21
21
|
});
|
|
22
|
-
return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef,
|
|
22
|
+
return (React.createElement(AbstractSwitch, __assign({}, baseProps, { className: clsx(styles.root, baseProps.className), controlClassName: styles['checkbox-control'], outlineClassName: styles.outline, controlId: controlId, disabled: disabled, label: children, description: description, descriptionBottomPadding: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, nativeControl: function (nativeControlProps) { return (React.createElement("input", __assign({}, nativeControlProps, { ref: checkboxRef, type: "checkbox", checked: checked, name: name, tabIndex: tabIndex, onFocus: onFocus && (function () { return fireNonCancelableEvent(onFocus); }), onBlur: onBlur && (function () { return fireNonCancelableEvent(onBlur); }),
|
|
23
23
|
// empty handler to suppress React controllability warning
|
|
24
24
|
onChange: function () { }, onClick:
|
|
25
25
|
// Using onClick because onChange does not fire in indeterminate state in Internet Explorer and Legacy Edge
|
package/checkbox/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,cAAc,MAAM,wCAAwC,CAAC;AAEpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,sCAAsC,CAAC;AAQhE,IAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CACvC,UACE,EAkBC,EACD,GAAG;IAlBD,IAAA,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,OAAO,aAAA,EACP,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,iBAAiB,uBAAA,EACd,IAAI,cAjBT,4NAkBC,CADQ;IAIT,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,IAAM,WAAW,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACnD,eAAe,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAClC,SAAS,CAAC;QACR,IAAI,WAAW,CAAC,OAAO,EAAE;YACvB,WAAW,CAAC,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,CAAC,CAAC;SAC5D;IACH,CAAC,CAAC,CAAC;IACH,OAAO,CACL,oBAAC,cAAc,eACT,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,CAAC,EACjD,gBAAgB,EAAE,MAAM,CAAC,kBAAkB,CAAC,EAC5C,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,WAAW,EACxB,wBAAwB,EAAE,IAAI,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,aAAa,EAAE,UAAA,kBAAkB,IAAI,OAAA,CACnC,0CACM,kBAAkB,IACtB,GAAG,EAAE,WAAW,EAChB,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/checkbox/internal.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 clsx from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { getBaseProps } from '../internal/base-component';\nimport AbstractSwitch from '../internal/components/abstract-switch';\nimport { CheckboxProps } from './interfaces';\nimport styles from './styles.css.js';\nimport CheckboxIcon from '../internal/components/checkbox-icon';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\ninterface InternalProps extends CheckboxProps, InternalBaseComponentProps {\n withoutLabel?: boolean;\n tabIndex?: -1;\n}\n\nconst InternalCheckbox = React.forwardRef<CheckboxProps.Ref, InternalProps>(\n (\n {\n controlId,\n name,\n checked,\n disabled,\n indeterminate,\n children,\n description,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n onFocus,\n onBlur,\n onChange,\n withoutLabel,\n tabIndex,\n __internalRootRef,\n ...rest\n },\n ref\n ) => {\n const baseProps = getBaseProps(rest);\n const checkboxRef = useRef<HTMLInputElement>(null);\n useForwardFocus(ref, checkboxRef);\n useEffect(() => {\n if (checkboxRef.current) {\n checkboxRef.current.indeterminate = Boolean(indeterminate);\n }\n });\n return (\n <AbstractSwitch\n {...baseProps}\n className={clsx(styles.root, baseProps.className)}\n controlClassName={styles['checkbox-control']}\n outlineClassName={styles.outline}\n controlId={controlId}\n disabled={disabled}\n label={children}\n description={description}\n descriptionBottomPadding={true}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n ariaDescribedby={ariaDescribedby}\n nativeControl={nativeControlProps => (\n <input\n {...nativeControlProps}\n ref={checkboxRef}\n type=\"checkbox\"\n checked={checked}\n name={name}\n tabIndex={tabIndex}\n onFocus={onFocus && (() => fireNonCancelableEvent(onFocus))}\n onBlur={onBlur && (() => fireNonCancelableEvent(onBlur))}\n // empty handler to suppress React controllability warning\n onChange={() => {}}\n onClick={\n // Using onClick because onChange does not fire in indeterminate state in Internet Explorer and Legacy Edge\n // https://stackoverflow.com/questions/33523130/ie-does-not-fire-change-event-on-indeterminate-checkbox-when-you-click-on-it\n onChange &&\n (() =>\n fireNonCancelableEvent(\n onChange,\n // for deterministic transitions \"indeterminate\" -> \"checked\" -> \"unchecked\"\n indeterminate ? { checked: true, indeterminate: false } : { checked: !checked, indeterminate: false }\n ))\n }\n />\n )}\n styledControl={<CheckboxIcon checked={checked} indeterminate={indeterminate} disabled={disabled} />}\n withoutLabel={withoutLabel}\n __internalRootRef={__internalRootRef}\n />\n );\n }\n);\n\nexport default InternalCheckbox;\n"]}
|
package/checkbox/styles.css.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"checkbox-control": "awsui_checkbox-
|
|
6
|
-
"
|
|
4
|
+
"root": "awsui_root_k2y2q_5zih0_93",
|
|
5
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_5zih0_105",
|
|
6
|
+
"outline": "awsui_outline_k2y2q_5zih0_113"
|
|
7
7
|
};
|
|
8
8
|
|
|
@@ -90,7 +90,7 @@ 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
|
-
div.
|
|
93
|
+
div.awsui_root_k2y2q_5zih0_93:not(#\9) {
|
|
94
94
|
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
|
|
95
95
|
border-collapse: separate;
|
|
96
96
|
border-spacing: 0;
|
|
@@ -128,7 +128,7 @@ div.awsui_root_k2y2q_dlcjy_93:not(#\9) {
|
|
|
128
128
|
display: flex;
|
|
129
129
|
}
|
|
130
130
|
|
|
131
|
-
.awsui_checkbox-
|
|
131
|
+
.awsui_checkbox-control_k2y2q_5zih0_105:not(#\9) {
|
|
132
132
|
margin-top: calc((var(--font-body-m-line-height-i7xxvv, 22px) - var(--size-control-n9i4yo, 16px)) / 2);
|
|
133
133
|
min-height: var(--size-control-n9i4yo, 16px);
|
|
134
134
|
min-width: var(--size-control-n9i4yo, 16px);
|
|
@@ -136,17 +136,14 @@ div.awsui_root_k2y2q_dlcjy_93:not(#\9) {
|
|
|
136
136
|
width: var(--size-control-n9i4yo, 16px);
|
|
137
137
|
}
|
|
138
138
|
|
|
139
|
-
.
|
|
140
|
-
/* stylelint-disable-next-line selector-max-type -- Can't access the outline class from focus-visible */
|
|
141
|
-
}
|
|
142
|
-
.awsui_input_k2y2q_dlcjy_113[data-awsui-focus-visible=true]:not(#\9):focus + span {
|
|
139
|
+
.awsui_outline_k2y2q_5zih0_113:not(#\9) {
|
|
143
140
|
position: relative;
|
|
144
141
|
}
|
|
145
|
-
.
|
|
142
|
+
.awsui_outline_k2y2q_5zih0_113:not(#\9) {
|
|
146
143
|
outline: 2px dotted transparent;
|
|
147
144
|
outline-offset: calc(2px - 1px);
|
|
148
145
|
}
|
|
149
|
-
.
|
|
146
|
+
.awsui_outline_k2y2q_5zih0_113:not(#\9)::before {
|
|
150
147
|
content: " ";
|
|
151
148
|
display: block;
|
|
152
149
|
position: absolute;
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"checkbox-control": "awsui_checkbox-
|
|
7
|
-
"
|
|
5
|
+
"root": "awsui_root_k2y2q_5zih0_93",
|
|
6
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_5zih0_105",
|
|
7
|
+
"outline": "awsui_outline_k2y2q_5zih0_113"
|
|
8
8
|
};
|
|
9
9
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { ContentLayoutProps } from './interfaces';
|
|
2
2
|
export { ContentLayoutProps };
|
|
3
|
-
export default function ContentLayout({ children, disableOverlap, header }: ContentLayoutProps): JSX.Element;
|
|
3
|
+
export default function ContentLayout({ children, disableOverlap, header, ...rest }: ContentLayoutProps): JSX.Element;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/content-layout/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAQlD,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,eA8CtG"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { __assign, __rest } from "tslib";
|
|
2
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
import React, { useContext, useRef } from 'react';
|
|
5
|
+
import clsx from 'clsx';
|
|
6
|
+
import { AppLayoutContext } from '../app-layout/visual-refresh/context';
|
|
7
|
+
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
|
+
import { getBaseProps } from '../internal/base-component';
|
|
9
|
+
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
10
|
+
import { useDynamicOverlap } from '../app-layout/visual-refresh/hooks/use-dynamic-overlap';
|
|
11
|
+
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
12
|
+
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
13
|
+
import styles from './styles.css.js';
|
|
14
|
+
export default function ContentLayout(_a) {
|
|
15
|
+
var _b, _c, _d;
|
|
16
|
+
var children = _a.children, disableOverlap = _a.disableOverlap, header = _a.header, rest = __rest(_a, ["children", "disableOverlap", "header"]);
|
|
17
|
+
var baseProps = getBaseProps(rest);
|
|
18
|
+
var breadcrumbs = useContext(AppLayoutContext).breadcrumbs;
|
|
19
|
+
var rootElement = useRef(null);
|
|
20
|
+
var __internalRootRef = useBaseComponent('ContentLayout').__internalRootRef;
|
|
21
|
+
var mergedRef = useMergeRefs(rootElement, __internalRootRef);
|
|
22
|
+
var overlapElement = useDynamicOverlap();
|
|
23
|
+
var isVisualRefresh = useVisualRefresh();
|
|
24
|
+
/**
|
|
25
|
+
* Disable the overlap if the component is missing either a header or child
|
|
26
|
+
* content. If the component is not using visual refresh then the overlap
|
|
27
|
+
* will not be displayed at all. This is handled in the CSS not the JavaScript.
|
|
28
|
+
*/
|
|
29
|
+
var isOverlapDisabled = !children || !header || disableOverlap;
|
|
30
|
+
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.layout, (_b = {},
|
|
31
|
+
_b[styles['is-overlap-disabled']] = isOverlapDisabled,
|
|
32
|
+
_b[styles['is-visual-refresh']] = isVisualRefresh,
|
|
33
|
+
_b)), ref: mergedRef }),
|
|
34
|
+
React.createElement("div", { className: clsx(styles.background, (_c = {}, _c[styles['is-overlap-disabled']] = isOverlapDisabled, _c), 'awsui-context-content-header'), ref: overlapElement }),
|
|
35
|
+
header && (React.createElement("div", { className: clsx(styles.header, (_d = {}, _d[styles['has-breadcrumbs']] = breadcrumbs, _d), 'awsui-context-content-header') }, header)),
|
|
36
|
+
React.createElement("div", { className: styles.content }, children)));
|
|
37
|
+
}
|
|
38
|
+
applyDisplayName(ContentLayout, 'ContentLayout');
|
|
39
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/content-layout/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,iBAAiB,EAAE,MAAM,wDAAwD,CAAC;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAiE;;IAA/D,IAAA,QAAQ,cAAA,EAAE,cAAc,oBAAA,EAAE,MAAM,YAAA,EAAK,IAAI,cAA3C,wCAA6C,CAAF;IAC/E,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAC7B,IAAA,WAAW,GAAK,UAAU,CAAC,gBAAgB,CAAC,YAAjC,CAAkC;IAErD,IAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,eAAe,CAAC,kBAAtC,CAAuC;IAChE,IAAM,SAAS,GAAG,YAAY,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;IAC/D,IAAM,cAAc,GAAG,iBAAiB,EAAE,CAAC;IAC3C,IAAM,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C;;;;OAIG;IACH,IAAM,iBAAiB,GAAG,CAAC,QAAQ,IAAI,CAAC,MAAM,IAAI,cAAc,CAAC;IAEjE,OAAO,CACL,wCACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM;YAChD,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,iBAAiB;YAClD,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,eAAe;gBAC9C,EACF,GAAG,EAAE,SAAS;QAEd,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,YACf,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,iBAAiB,OACpD,8BAA8B,CAC/B,EACD,GAAG,EAAE,cAAc,GACnB;QAED,MAAM,IAAI,CACT,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,YAAI,GAAC,MAAM,CAAC,iBAAiB,CAAC,IAAG,WAAW,OAAI,8BAA8B,CAAC,IAE3G,MAAM,CACH,CACP;QAED,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CAC5C,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,aAAa,EAAE,eAAe,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useRef } from 'react';\nimport clsx from 'clsx';\nimport { AppLayoutContext } from '../app-layout/visual-refresh/context';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ContentLayoutProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useDynamicOverlap } from '../app-layout/visual-refresh/hooks/use-dynamic-overlap';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\n\nexport { ContentLayoutProps };\n\nexport default function ContentLayout({ children, disableOverlap, header, ...rest }: ContentLayoutProps) {\n const baseProps = getBaseProps(rest);\n const { breadcrumbs } = useContext(AppLayoutContext);\n\n const rootElement = useRef<HTMLDivElement>(null);\n const { __internalRootRef } = useBaseComponent('ContentLayout');\n const mergedRef = useMergeRefs(rootElement, __internalRootRef);\n const overlapElement = useDynamicOverlap();\n const isVisualRefresh = useVisualRefresh();\n\n /**\n * Disable the overlap if the component is missing either a header or child\n * content. If the component is not using visual refresh then the overlap\n * will not be displayed at all. This is handled in the CSS not the JavaScript.\n */\n const isOverlapDisabled = !children || !header || disableOverlap;\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.layout, {\n [styles['is-overlap-disabled']]: isOverlapDisabled,\n [styles['is-visual-refresh']]: isVisualRefresh,\n })}\n ref={mergedRef}\n >\n <div\n className={clsx(\n styles.background,\n { [styles['is-overlap-disabled']]: isOverlapDisabled },\n 'awsui-context-content-header'\n )}\n ref={overlapElement}\n />\n\n {header && (\n <div\n className={clsx(styles.header, { [styles['has-breadcrumbs']]: breadcrumbs }, 'awsui-context-content-header')}\n >\n {header}\n </div>\n )}\n\n <div className={styles.content}>{children}</div>\n </div>\n );\n}\n\napplyDisplayName(ContentLayout, 'ContentLayout');\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { BaseComponentProps } from '../internal/base-component';
|
|
2
|
+
export interface ContentLayoutProps extends BaseComponentProps {
|
|
3
|
+
/**
|
|
4
|
+
* Use this slot to render the main content of the layout below the header.
|
|
5
|
+
* @displayname content
|
|
6
|
+
*/
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Determines whether the layout has an overlap between the header and content.
|
|
10
|
+
* If true, the overlap will be removed.
|
|
11
|
+
* @visualrefresh
|
|
12
|
+
*/
|
|
13
|
+
disableOverlap?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Use this slot to render the header content for the layout.
|
|
16
|
+
*/
|
|
17
|
+
header?: React.ReactNode;
|
|
18
|
+
}
|
|
19
|
+
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/content-layout/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B"}
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/content-layout/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface ContentLayoutProps extends BaseComponentProps {\n /**\n * Use this slot to render the main content of the layout below the header.\n * @displayname content\n */\n children?: React.ReactNode;\n\n /**\n * Determines whether the layout has an overlap between the header and content.\n * If true, the overlap will be removed.\n * @visualrefresh\n */\n disableOverlap?: boolean;\n\n /**\n * Use this slot to render the header content for the layout.\n */\n header?: React.ReactNode;\n}\n"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
import './styles.scoped.css';
|
|
3
|
+
export default {
|
|
4
|
+
"layout": "awsui_layout_5gtk3_1onm4_99",
|
|
5
|
+
"is-visual-refresh": "awsui_is-visual-refresh_5gtk3_1onm4_99",
|
|
6
|
+
"background": "awsui_background_5gtk3_1onm4_102",
|
|
7
|
+
"header": "awsui_header_5gtk3_1onm4_105",
|
|
8
|
+
"is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_1onm4_115",
|
|
9
|
+
"has-breadcrumbs": "awsui_has-breadcrumbs_5gtk3_1onm4_132",
|
|
10
|
+
"content": "awsui_content_5gtk3_1onm4_141"
|
|
11
|
+
};
|
|
12
|
+
|