@cloudscape-design/components 3.0.34 → 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/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 +12 -14
- package/property-filter/property-filter-autosuggest.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
|
@@ -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"]}
|
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
|
+
|