@cloudscape-design/components 3.0.1189 → 3.0.1190
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/autosuggest/autosuggest-option.d.ts +11 -1
- package/autosuggest/autosuggest-option.d.ts.map +1 -1
- package/autosuggest/autosuggest-option.js +71 -2
- package/autosuggest/autosuggest-option.js.map +1 -1
- package/autosuggest/index.d.ts.map +1 -1
- package/autosuggest/index.js +2 -2
- package/autosuggest/index.js.map +1 -1
- package/autosuggest/interfaces.d.ts +63 -1
- package/autosuggest/interfaces.d.ts.map +1 -1
- package/autosuggest/interfaces.js.map +1 -1
- package/autosuggest/internal.d.ts.map +1 -1
- package/autosuggest/internal.js +2 -2
- package/autosuggest/internal.js.map +1 -1
- package/autosuggest/options-controller.js +1 -0
- package/autosuggest/options-controller.js.map +1 -1
- package/autosuggest/options-list.d.ts +3 -1
- package/autosuggest/options-list.d.ts.map +1 -1
- package/autosuggest/options-list.js +2 -2
- package/autosuggest/options-list.js.map +1 -1
- package/autosuggest/plain-list.d.ts +4 -2
- package/autosuggest/plain-list.d.ts.map +1 -1
- package/autosuggest/plain-list.js +6 -2
- package/autosuggest/plain-list.js.map +1 -1
- package/autosuggest/utils/parent-props.d.ts +10 -0
- package/autosuggest/utils/parent-props.d.ts.map +1 -0
- package/autosuggest/utils/parent-props.js +28 -0
- package/autosuggest/utils/parent-props.js.map +1 -0
- package/autosuggest/virtual-list.d.ts +2 -1
- package/autosuggest/virtual-list.d.ts.map +1 -1
- package/autosuggest/virtual-list.js +6 -2
- package/autosuggest/virtual-list.js.map +1 -1
- package/internal/base-component/styles.scoped.css +15 -15
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/generated/styles/tokens.d.ts +0 -2
- package/internal/generated/styles/tokens.js +2 -4
- package/internal/generated/theming/index.cjs +2 -64
- package/internal/generated/theming/index.js +2 -64
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/progress-bar/interfaces.d.ts +1 -1
- package/progress-bar/interfaces.js.map +1 -1
- package/progress-bar/internal.d.ts.map +1 -1
- package/progress-bar/internal.js +1 -1
- package/progress-bar/internal.js.map +1 -1
- package/progress-bar/styles.css.js +18 -19
- package/progress-bar/styles.scoped.css +30 -42
- package/progress-bar/styles.selectors.js +18 -19
|
@@ -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,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGnE,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,WAAW,MAAM,gBAAgB,CAAC;
|
|
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,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAGnE,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAkBzC,MAAM,uBAAuB,GAAG,CAAC,OAAgC,EAAE,EAAE,CAAC,CAAC,SAAiB,EAAE,EAAE;IAC1F,4DAA4D;IAC5D,IAAI,SAAS,GAAG,CAAC,CAAC,EAAE,CAAC;QACnB,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,UAAU,EACV,qBAAqB,EACrB,wBAAwB,EACxB,mBAAmB,EACnB,aAAa,EACb,MAAM,EACN,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,yBAAyB,EACzB,UAAU,EACV,eAAe,EACf,YAAY,GACgB;;IAC5B,MAAM,aAAa,GAAG,uBAAuB,CAAC,wBAAwB,CAAC,4BAA4B,CAAC,CAAC;IACrG,MAAM,eAAe,GAAG,uBAAuB,CAAC,wBAAwB,CAAC,+BAA+B,CAAC,CAAC;IAE1G,MAAM,aAAa,GAAG,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;IAE9D,MAAM,YAAY,GAAG,eAAe,CAAC;QACnC,aAAa;QACb,gBAAgB,EAAE,CAAA,MAAA,qBAAqB,CAAC,iBAAiB,0CAAE,KAAK,MAAK,aAAa;QAClF,iBAAiB,EAAE,qBAAqB,CAAC,iBAAiB;QAC1D,SAAS,EAAE,MAAM,CAAC,EAAE,CAAC,qBAAqB,CAAC,YAAY,CAAC,MAAM,CAAC;QAC/D,iBAAiB;QACjB,yBAAyB;KAC1B,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,aAAa,IACZ,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAE,aAAa,EAC5B,oBAAoB,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE,EAC5E,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE;YACT,EAAE,EAAE,MAAM;YACV,cAAc,EAAE,SAAS;YACzB,SAAS,EAAE,aAAa;YACxB,WAAW,EAAE,eAAe;YAC5B,eAAe;YACf,UAAU;SACX,EACD,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 { useAnnouncement } from '../select/utils/use-announcement';\nimport { AutosuggestProps } from './interfaces';\nimport { AutosuggestItemsHandlers, AutosuggestItemsState } from './options-controller';\nimport PlainList from './plain-list';\nimport VirtualList from './virtual-list';\n\ninterface AutosuggestOptionsListProps\n extends Pick<AutosuggestProps, 'virtualScroll' | 'selectedAriaLabel' | 'renderHighlightedAriaLive'> {\n statusType: AutosuggestProps.StatusType;\n autosuggestItemsState: AutosuggestItemsState;\n autosuggestItemsHandlers: AutosuggestItemsHandlers;\n highlightedOptionId?: string;\n highlightText: string;\n listId: string;\n controlId: string;\n handleLoadMore: () => void;\n hasDropdownStatus?: boolean;\n listBottom?: React.ReactNode;\n ariaDescribedby?: string;\n renderOption?: AutosuggestProps.ItemRenderer;\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 statusType,\n autosuggestItemsState,\n autosuggestItemsHandlers,\n highlightedOptionId,\n highlightText,\n listId,\n controlId,\n handleLoadMore,\n hasDropdownStatus,\n virtualScroll,\n selectedAriaLabel,\n renderHighlightedAriaLive,\n listBottom,\n ariaDescribedby,\n renderOption,\n}: AutosuggestOptionsListProps) {\n const handleMouseUp = createMouseEventHandler(autosuggestItemsHandlers.selectVisibleOptionWithMouse);\n const handleMouseMove = createMouseEventHandler(autosuggestItemsHandlers.highlightVisibleOptionWithMouse);\n\n const ListComponent = virtualScroll ? VirtualList : PlainList;\n\n const announcement = useAnnouncement({\n highlightText,\n announceSelected: autosuggestItemsState.highlightedOption?.value === highlightText,\n highlightedOption: autosuggestItemsState.highlightedOption,\n getParent: option => autosuggestItemsState.getItemGroup(option),\n selectedAriaLabel,\n renderHighlightedAriaLive,\n });\n\n return (\n <ListComponent\n renderOption={renderOption}\n listBottom={listBottom}\n handleLoadMore={handleLoadMore}\n autosuggestItemsState={autosuggestItemsState}\n highlightText={highlightText}\n highlightedA11yProps={highlightedOptionId ? { id: highlightedOptionId } : {}}\n hasDropdownStatus={hasDropdownStatus}\n menuProps={{\n id: listId,\n ariaLabelledby: controlId,\n onMouseUp: handleMouseUp,\n onMouseMove: handleMouseMove,\n ariaDescribedby,\n statusType,\n }}\n screenReaderContent={announcement}\n />\n );\n}\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { OptionsListProps } from '../internal/components/options-list';
|
|
3
|
-
import { AutosuggestItem } from './interfaces';
|
|
3
|
+
import { AutosuggestItem, AutosuggestProps } from './interfaces';
|
|
4
4
|
import { AutosuggestItemsState } from './options-controller';
|
|
5
5
|
export interface ListProps {
|
|
6
6
|
autosuggestItemsState: AutosuggestItemsState;
|
|
@@ -11,6 +11,7 @@ export interface ListProps {
|
|
|
11
11
|
highlightText: string;
|
|
12
12
|
listBottom?: React.ReactNode;
|
|
13
13
|
screenReaderContent?: string;
|
|
14
|
+
renderOption?: AutosuggestProps.ItemRenderer;
|
|
14
15
|
}
|
|
15
16
|
export declare const getOptionProps: (index: number, item: AutosuggestItem, filteredItems: readonly AutosuggestItem[], highlightedA11yProps: ListProps["highlightedA11yProps"], highlightedOption?: AutosuggestItem, hasDropdownStatus?: boolean) => {
|
|
16
17
|
className?: string;
|
|
@@ -26,6 +27,7 @@ declare const PlainList: ({
|
|
|
26
27
|
hasDropdownStatus,
|
|
27
28
|
highlightText,
|
|
28
29
|
listBottom,
|
|
29
|
-
screenReaderContent
|
|
30
|
+
screenReaderContent,
|
|
31
|
+
renderOption
|
|
30
32
|
}: ListProps) => JSX.Element;
|
|
31
33
|
export default PlainList;
|
|
@@ -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;AAGjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAGpF,OAAO,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;AAGjD,OAAoB,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAGpF,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,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,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;IAC7B,YAAY,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC;CAC9C;AAED,eAAO,MAAM,cAAc,GACzB,OAAO,MAAM,EACb,MAAM,eAAe,EACrB,eAAe,SAAS,eAAe,EAAE,EACzC,sBAAsB,SAAS,CAAC,sBAAsB,CAAC,EACvD,oBAAoB,eAAe,EACnC,oBAAoB,OAAO;;;;;CAS5B,CAAC;AAEF,QAAA,MAAM,SAAS,GAAI,8JAUhB,SAAS,gBAoDX,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -5,6 +5,7 @@ import { getBaseProps } from '../internal/base-component';
|
|
|
5
5
|
import OptionsList from '../internal/components/options-list';
|
|
6
6
|
import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
|
|
7
7
|
import AutosuggestOption from './autosuggest-option';
|
|
8
|
+
import { getParentProps } from './utils/parent-props';
|
|
8
9
|
import styles from './styles.css.js';
|
|
9
10
|
export const getOptionProps = (index, item, filteredItems, highlightedA11yProps, highlightedOption, hasDropdownStatus) => {
|
|
10
11
|
const nativeAttributes = item === highlightedOption ? highlightedA11yProps : {};
|
|
@@ -14,7 +15,7 @@ export const getOptionProps = (index, item, filteredItems, highlightedA11yProps,
|
|
|
14
15
|
const padBottom = !hasDropdownStatus && isNotEnteredTextItem && isLastItem;
|
|
15
16
|
return { nativeAttributes, padBottom, ...baseOptionProps };
|
|
16
17
|
};
|
|
17
|
-
const PlainList = ({ autosuggestItemsState, handleLoadMore, menuProps, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }) => {
|
|
18
|
+
const PlainList = ({ autosuggestItemsState, handleLoadMore, menuProps, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, renderOption, }) => {
|
|
18
19
|
const listRef = useRef(null);
|
|
19
20
|
useEffect(() => {
|
|
20
21
|
var _a;
|
|
@@ -23,10 +24,13 @@ const PlainList = ({ autosuggestItemsState, handleLoadMore, menuProps, highlight
|
|
|
23
24
|
scrollElementIntoView(item);
|
|
24
25
|
}
|
|
25
26
|
}, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);
|
|
27
|
+
let lastGroupIndex = -1;
|
|
26
28
|
return (React.createElement(OptionsList, { ...menuProps, onLoadMore: handleLoadMore, open: true, ref: listRef },
|
|
27
29
|
autosuggestItemsState.items.map((item, index) => {
|
|
28
30
|
const optionProps = getOptionProps(index, item, autosuggestItemsState.items, highlightedA11yProps, autosuggestItemsState.highlightedOption, hasDropdownStatus);
|
|
29
|
-
|
|
31
|
+
const { parentProps, updatedLastGroupIndex } = getParentProps(item, index, lastGroupIndex);
|
|
32
|
+
lastGroupIndex = updatedLastGroupIndex;
|
|
33
|
+
return (React.createElement(AutosuggestOption, { index: index, parentProps: parentProps, renderOption: renderOption, highlightText: highlightText, option: item, highlighted: item === autosuggestItemsState.highlightedOption, current: item.value === highlightText, key: index, "data-mouse-target": index, screenReaderContent: screenReaderContent, highlightType: autosuggestItemsState.highlightType, ...optionProps }));
|
|
30
34
|
}),
|
|
31
35
|
listBottom ? (React.createElement("div", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
|
|
32
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,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAiC,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,yCAAyC,CAAC;AAChF,OAAO,iBAAiB,MAAM,sBAAsB,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 { getBaseProps } from '../internal/base-component';\nimport OptionsList, { OptionsListProps } from '../internal/components/options-list';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport AutosuggestOption from './autosuggest-option';\nimport { AutosuggestItem, AutosuggestProps } from './interfaces';\nimport { AutosuggestItemsState } from './options-controller';\nimport { getParentProps } from './utils/parent-props';\n\nimport styles from './styles.css.js';\n\nexport interface ListProps {\n autosuggestItemsState: AutosuggestItemsState;\n menuProps: Omit<OptionsListProps, 'children'>;\n handleLoadMore: () => void;\n highlightedA11yProps: Record<string, string | number | boolean>;\n hasDropdownStatus?: boolean;\n highlightText: string;\n listBottom?: React.ReactNode;\n screenReaderContent?: string;\n renderOption?: AutosuggestProps.ItemRenderer;\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 highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n renderOption,\n}: ListProps) => {\n const listRef = useRef<HTMLDivElement>(null);\n useEffect(() => {\n const item = listRef.current?.querySelector<HTMLElement>(\n `[data-mouse-target=\"${autosuggestItemsState.highlightedIndex}\"]`\n );\n if (autosuggestItemsState.highlightType.moveFocus && item) {\n scrollElementIntoView(item);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex]);\n\n let lastGroupIndex = -1;\n\n return (\n <OptionsList {...menuProps} onLoadMore={handleLoadMore} open={true} ref={listRef}>\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 const { parentProps, updatedLastGroupIndex } = getParentProps(item, index, lastGroupIndex);\n lastGroupIndex = updatedLastGroupIndex;\n\n return (\n <AutosuggestOption\n index={index}\n parentProps={parentProps}\n renderOption={renderOption}\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n current={item.value === highlightText}\n key={index}\n data-mouse-target={index}\n screenReaderContent={screenReaderContent}\n highlightType={autosuggestItemsState.highlightType}\n {...optionProps}\n />\n );\n })}\n {listBottom ? (\n <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default PlainList;\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { AutosuggestRenderItemParentProps } from '../autosuggest-option';
|
|
2
|
+
import { AutosuggestItem } from '../interfaces';
|
|
3
|
+
/**
|
|
4
|
+
* Generates parent props for autosuggest items based on the current item and last group index.
|
|
5
|
+
* This logic is shared between plain-list and virtual-list implementations.
|
|
6
|
+
*/
|
|
7
|
+
export declare const getParentProps: (item: AutosuggestItem, index: number, lastGroupIndex: number, virtualIndex?: number) => {
|
|
8
|
+
parentProps: AutosuggestRenderItemParentProps | undefined;
|
|
9
|
+
updatedLastGroupIndex: number;
|
|
10
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parent-props.d.ts","sourceRoot":"","sources":["../../../../src/autosuggest/utils/parent-props.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gCAAgC,EAAE,MAAM,uBAAuB,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,cAAc,GACzB,MAAM,eAAe,EACrB,OAAO,MAAM,EACb,gBAAgB,MAAM,EACtB,eAAe,MAAM,KACpB;IAAE,WAAW,EAAE,gCAAgC,GAAG,SAAS,CAAC;IAAC,qBAAqB,EAAE,MAAM,CAAA;CAqB5F,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
/**
|
|
4
|
+
* Generates parent props for autosuggest items based on the current item and last group index.
|
|
5
|
+
* This logic is shared between plain-list and virtual-list implementations.
|
|
6
|
+
*/
|
|
7
|
+
export const getParentProps = (item, index, lastGroupIndex, virtualIndex) => {
|
|
8
|
+
let updatedLastGroupIndex = lastGroupIndex;
|
|
9
|
+
let parentProps = undefined;
|
|
10
|
+
if (item.type === 'parent') {
|
|
11
|
+
updatedLastGroupIndex = index;
|
|
12
|
+
}
|
|
13
|
+
else if (lastGroupIndex !== -1 && !!item.parent) {
|
|
14
|
+
parentProps = {
|
|
15
|
+
index: lastGroupIndex,
|
|
16
|
+
virtualIndex: virtualIndex !== null && virtualIndex !== void 0 ? virtualIndex : lastGroupIndex,
|
|
17
|
+
disabled: !!item.parent.disabled,
|
|
18
|
+
option: {
|
|
19
|
+
...item.parent,
|
|
20
|
+
disabled: !!item.parent.disabled,
|
|
21
|
+
option: item.parent,
|
|
22
|
+
type: 'parent',
|
|
23
|
+
},
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
return { parentProps, updatedLastGroupIndex };
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=parent-props.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"parent-props.js","sourceRoot":"","sources":["../../../../src/autosuggest/utils/parent-props.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAKtC;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,IAAqB,EACrB,KAAa,EACb,cAAsB,EACtB,YAAqB,EACyE,EAAE;IAChG,IAAI,qBAAqB,GAAG,cAAc,CAAC;IAC3C,IAAI,WAAW,GAAiD,SAAS,CAAC;IAE1E,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC3B,qBAAqB,GAAG,KAAK,CAAC;IAChC,CAAC;SAAM,IAAI,cAAc,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QAClD,WAAW,GAAG;YACZ,KAAK,EAAE,cAAc;YACrB,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,cAAc;YAC5C,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;YAChC,MAAM,EAAE;gBACN,GAAG,IAAI,CAAC,MAAM;gBACd,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ;gBAChC,MAAM,EAAE,IAAI,CAAC,MAAM;gBACnB,IAAI,EAAE,QAAQ;aACf;SACF,CAAC;IACJ,CAAC;IAED,OAAO,EAAE,WAAW,EAAE,qBAAqB,EAAE,CAAC;AAChD,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { AutosuggestRenderItemParentProps } from '../autosuggest-option';\nimport { AutosuggestItem } from '../interfaces';\n\n/**\n * Generates parent props for autosuggest items based on the current item and last group index.\n * This logic is shared between plain-list and virtual-list implementations.\n */\nexport const getParentProps = (\n item: AutosuggestItem,\n index: number,\n lastGroupIndex: number,\n virtualIndex?: number\n): { parentProps: AutosuggestRenderItemParentProps | undefined; updatedLastGroupIndex: number } => {\n let updatedLastGroupIndex = lastGroupIndex;\n let parentProps: AutosuggestRenderItemParentProps | undefined = undefined;\n\n if (item.type === 'parent') {\n updatedLastGroupIndex = index;\n } else if (lastGroupIndex !== -1 && !!item.parent) {\n parentProps = {\n index: lastGroupIndex,\n virtualIndex: virtualIndex ?? lastGroupIndex,\n disabled: !!item.parent.disabled,\n option: {\n ...item.parent,\n disabled: !!item.parent.disabled,\n option: item.parent,\n type: 'parent',\n },\n };\n }\n\n return { parentProps, updatedLastGroupIndex };\n};\n"]}
|
|
@@ -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;
|
|
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;AAKzD,QAAA,MAAM,WAAW,GAAI,8JAUlB,SAAS,gBA6EX,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -6,8 +6,9 @@ import OptionsList from '../internal/components/options-list';
|
|
|
6
6
|
import { useVirtual } from '../internal/hooks/use-virtual';
|
|
7
7
|
import AutosuggestOption from './autosuggest-option';
|
|
8
8
|
import { getOptionProps } from './plain-list';
|
|
9
|
+
import { getParentProps } from './utils/parent-props';
|
|
9
10
|
import styles from './styles.css.js';
|
|
10
|
-
const VirtualList = ({ autosuggestItemsState, handleLoadMore, menuProps, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, }) => {
|
|
11
|
+
const VirtualList = ({ autosuggestItemsState, handleLoadMore, menuProps, highlightedA11yProps, hasDropdownStatus, highlightText, listBottom, screenReaderContent, renderOption, }) => {
|
|
11
12
|
const scrollRef = useRef(null);
|
|
12
13
|
// update component, when it gets wider or narrower to reposition items
|
|
13
14
|
const [width, strutRef] = useContainerQuery(rect => rect.contentBoxWidth, []);
|
|
@@ -27,13 +28,16 @@ const VirtualList = ({ autosuggestItemsState, handleLoadMore, menuProps, highlig
|
|
|
27
28
|
rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);
|
|
28
29
|
}
|
|
29
30
|
}, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);
|
|
31
|
+
let lastGroupIndex = -1;
|
|
30
32
|
return (React.createElement(OptionsList, { ...menuProps, onLoadMore: handleLoadMore, ref: scrollRef, open: true },
|
|
31
33
|
React.createElement("div", { "aria-hidden": "true", key: "total-size", className: styles['layout-strut'], style: { height: rowVirtualizer.totalSize + (autosuggestItemsState.items.length === 1 ? 1 : 0) } }),
|
|
32
34
|
rowVirtualizer.virtualItems.map(virtualRow => {
|
|
33
35
|
const { index, start, measureRef } = virtualRow;
|
|
34
36
|
const item = autosuggestItemsState.items[index];
|
|
35
37
|
const optionProps = getOptionProps(index, item, autosuggestItemsState.items, highlightedA11yProps, autosuggestItemsState.highlightedOption, hasDropdownStatus);
|
|
36
|
-
|
|
38
|
+
const { parentProps, updatedLastGroupIndex } = getParentProps(item, index, lastGroupIndex, index);
|
|
39
|
+
lastGroupIndex = updatedLastGroupIndex;
|
|
40
|
+
return (React.createElement(AutosuggestOption, { parentProps: parentProps, index: index, virtualIndex: index, renderOption: renderOption, key: index, ref: measureRef, highlightText: highlightText, option: item, highlighted: item === autosuggestItemsState.highlightedOption, current: item.value === highlightText, "data-mouse-target": index, virtualPosition: start + (index === 0 ? 1 : 0), screenReaderContent: screenReaderContent, ariaSetsize: autosuggestItemsState.items.length, ariaPosinset: index + 1, highlightType: autosuggestItemsState.highlightType, ...optionProps }));
|
|
37
41
|
}),
|
|
38
42
|
listBottom ? (React.createElement("div", { role: "option", className: styles['list-bottom'] }, listBottom)) : null));
|
|
39
43
|
};
|
|
@@ -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;AAEnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAa,MAAM,cAAc,CAAC;
|
|
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';\n\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport OptionsList from '../internal/components/options-list';\nimport { useVirtual } from '../internal/hooks/use-virtual';\nimport AutosuggestOption from './autosuggest-option';\nimport { getOptionProps, ListProps } from './plain-list';\nimport { getParentProps } from './utils/parent-props';\n\nimport styles from './styles.css.js';\n\nconst VirtualList = ({\n autosuggestItemsState,\n handleLoadMore,\n menuProps,\n highlightedA11yProps,\n hasDropdownStatus,\n highlightText,\n listBottom,\n screenReaderContent,\n renderOption,\n}: ListProps) => {\n const scrollRef = useRef<HTMLDivElement>(null);\n // update component, when it gets wider or narrower to reposition items\n const [width, strutRef] = useContainerQuery(rect => rect.contentBoxWidth, []);\n useImperativeHandle(strutRef, () => scrollRef.current);\n\n const rowVirtualizer = useVirtual({\n items: autosuggestItemsState.items,\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: because 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 });\n\n useEffect(() => {\n if (autosuggestItemsState.highlightType.moveFocus) {\n rowVirtualizer.scrollToIndex(autosuggestItemsState.highlightedIndex);\n }\n }, [autosuggestItemsState.highlightType, autosuggestItemsState.highlightedIndex, rowVirtualizer]);\n\n let lastGroupIndex = -1;\n\n return (\n <OptionsList {...menuProps} onLoadMore={handleLoadMore} ref={scrollRef} open={true}>\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 const { parentProps, updatedLastGroupIndex } = getParentProps(item, index, lastGroupIndex, index);\n lastGroupIndex = updatedLastGroupIndex;\n\n return (\n <AutosuggestOption\n parentProps={parentProps}\n index={index}\n virtualIndex={index}\n renderOption={renderOption}\n key={index}\n ref={measureRef}\n highlightText={highlightText}\n option={item}\n highlighted={item === autosuggestItemsState.highlightedOption}\n current={item.value === highlightText}\n data-mouse-target={index}\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 <div role=\"option\" className={styles['list-bottom']}>\n {listBottom}\n </div>\n ) : null}\n </OptionsList>\n );\n};\n\nexport default VirtualList;\n"]}
|
|
@@ -298,10 +298,8 @@ body {
|
|
|
298
298
|
--color-background-notification-stack-bar-active-a4h9r8:var(--color-neutral-750-pi9qqd);
|
|
299
299
|
--color-background-notification-stack-bar-hover-jh82oo:var(--color-neutral-650-miik4f);
|
|
300
300
|
--color-background-popover-e20fy8:var(--color-white-p1zlvy);
|
|
301
|
-
--color-background-progress-bar-value-default-
|
|
302
|
-
--color-background-progress-bar-
|
|
303
|
-
--color-background-progress-bar-default-4755ec:var(--color-neutral-250-vs1is4);
|
|
304
|
-
--color-background-progress-bar-in-flash-f4k60b:var(--color-grey-opaque-25-cjy3al);
|
|
301
|
+
--color-background-progress-bar-value-default-69ydqg:var(--color-primary-600-1lcy1k);
|
|
302
|
+
--color-background-progress-bar-default-j8kyxd:var(--color-neutral-250-vs1is4);
|
|
305
303
|
--color-background-segment-active-1u2ldl:var(--color-primary-600-1lcy1k);
|
|
306
304
|
--color-background-segment-default-b0r494:var(--color-background-button-normal-default-7f99mv);
|
|
307
305
|
--color-background-segment-disabled-m2a5t7:var(--color-background-button-normal-disabled-hl039l);
|
|
@@ -913,8 +911,8 @@ body {
|
|
|
913
911
|
--color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-300-5q65ox);
|
|
914
912
|
--color-background-notification-grey-x3vul6:var(--color-neutral-600-fln1ww);
|
|
915
913
|
--color-background-popover-e20fy8:var(--color-neutral-800-t7j5ap);
|
|
916
|
-
--color-background-progress-bar-value-default-
|
|
917
|
-
--color-background-progress-bar-default-
|
|
914
|
+
--color-background-progress-bar-value-default-69ydqg:var(--color-primary-400-n8h4bx);
|
|
915
|
+
--color-background-progress-bar-default-j8kyxd:var(--color-neutral-700-qw8ats);
|
|
918
916
|
--color-background-segment-active-1u2ldl:var(--color-primary-400-n8h4bx);
|
|
919
917
|
--color-background-slider-handle-default-lp5ntg:var(--color-primary-400-n8h4bx);
|
|
920
918
|
--color-background-slider-handle-active-50ubqb:var(--color-primary-300-5q65ox);
|
|
@@ -1173,8 +1171,8 @@ body {
|
|
|
1173
1171
|
--color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-300-5q65ox);
|
|
1174
1172
|
--color-background-notification-grey-x3vul6:var(--color-neutral-600-fln1ww);
|
|
1175
1173
|
--color-background-popover-e20fy8:var(--color-neutral-800-t7j5ap);
|
|
1176
|
-
--color-background-progress-bar-value-default-
|
|
1177
|
-
--color-background-progress-bar-default-
|
|
1174
|
+
--color-background-progress-bar-value-default-69ydqg:var(--color-primary-400-n8h4bx);
|
|
1175
|
+
--color-background-progress-bar-default-j8kyxd:var(--color-neutral-700-qw8ats);
|
|
1178
1176
|
--color-background-segment-active-1u2ldl:var(--color-primary-400-n8h4bx);
|
|
1179
1177
|
--color-background-slider-handle-default-lp5ntg:var(--color-primary-400-n8h4bx);
|
|
1180
1178
|
--color-background-slider-handle-active-50ubqb:var(--color-primary-300-5q65ox);
|
|
@@ -1401,8 +1399,8 @@ body {
|
|
|
1401
1399
|
--color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-300-5q65ox);
|
|
1402
1400
|
--color-background-notification-grey-x3vul6:var(--color-neutral-600-fln1ww);
|
|
1403
1401
|
--color-background-popover-e20fy8:var(--color-neutral-800-t7j5ap);
|
|
1404
|
-
--color-background-progress-bar-value-default-
|
|
1405
|
-
--color-background-progress-bar-default-
|
|
1402
|
+
--color-background-progress-bar-value-default-69ydqg:var(--color-primary-400-n8h4bx);
|
|
1403
|
+
--color-background-progress-bar-default-j8kyxd:var(--color-neutral-700-qw8ats);
|
|
1406
1404
|
--color-background-segment-active-1u2ldl:var(--color-primary-400-n8h4bx);
|
|
1407
1405
|
--color-background-segment-default-b0r494:var(--color-neutral-950-lxybh8);
|
|
1408
1406
|
--color-background-segment-disabled-m2a5t7:var(--color-neutral-950-lxybh8);
|
|
@@ -1605,6 +1603,8 @@ body {
|
|
|
1605
1603
|
--color-background-button-normal-default-7f99mv:transparent;
|
|
1606
1604
|
--color-background-button-normal-hover-53op9s:rgba(0, 7, 22, 0.15);
|
|
1607
1605
|
--color-background-inline-code-un8udy:rgba(0, 0, 0, 0.2);
|
|
1606
|
+
--color-background-progress-bar-value-default-69ydqg:var(--color-white-p1zlvy);
|
|
1607
|
+
--color-background-progress-bar-default-j8kyxd:var(--color-grey-opaque-25-cjy3al);
|
|
1608
1608
|
--color-border-button-normal-active-ru7yhb:var(--color-white-p1zlvy);
|
|
1609
1609
|
--color-border-button-normal-default-glqfp1:var(--color-neutral-100-gk3lvf);
|
|
1610
1610
|
--color-border-button-normal-hover-6a2tdq:var(--color-white-p1zlvy);
|
|
@@ -1646,8 +1646,8 @@ body {
|
|
|
1646
1646
|
--color-background-button-normal-active-5imwxd:rgba(0, 7, 22, 0.1);
|
|
1647
1647
|
--color-background-button-normal-default-7f99mv:transparent;
|
|
1648
1648
|
--color-background-button-normal-hover-53op9s:rgba(0, 7, 22, 0.05);
|
|
1649
|
-
--color-background-progress-bar-value-
|
|
1650
|
-
--color-background-progress-bar-
|
|
1649
|
+
--color-background-progress-bar-value-default-69ydqg:var(--color-neutral-950-lxybh8);
|
|
1650
|
+
--color-background-progress-bar-default-j8kyxd:var(--color-grey-opaque-10-vwfmts);
|
|
1651
1651
|
--color-border-button-normal-active-ru7yhb:var(--color-text-button-normal-hover-gusgyv);
|
|
1652
1652
|
--color-border-button-normal-default-glqfp1:var(--color-text-button-normal-default-nzalii);
|
|
1653
1653
|
--color-border-button-normal-hover-6a2tdq:var(--color-text-button-normal-hover-gusgyv);
|
|
@@ -1759,8 +1759,8 @@ body {
|
|
|
1759
1759
|
--color-background-layout-toggle-selected-hover-7953u1:var(--color-primary-300-5q65ox);
|
|
1760
1760
|
--color-background-notification-grey-x3vul6:var(--color-neutral-600-fln1ww);
|
|
1761
1761
|
--color-background-popover-e20fy8:var(--color-neutral-800-t7j5ap);
|
|
1762
|
-
--color-background-progress-bar-value-default-
|
|
1763
|
-
--color-background-progress-bar-default-
|
|
1762
|
+
--color-background-progress-bar-value-default-69ydqg:var(--color-primary-400-n8h4bx);
|
|
1763
|
+
--color-background-progress-bar-default-j8kyxd:var(--color-neutral-700-qw8ats);
|
|
1764
1764
|
--color-background-segment-active-1u2ldl:var(--color-primary-400-n8h4bx);
|
|
1765
1765
|
--color-background-slider-handle-default-lp5ntg:var(--color-primary-400-n8h4bx);
|
|
1766
1766
|
--color-background-slider-handle-active-50ubqb:var(--color-primary-300-5q65ox);
|
|
@@ -2034,5 +2034,5 @@ body {
|
|
|
2034
2034
|
}
|
|
2035
2035
|
}
|
|
2036
2036
|
:root {
|
|
2037
|
-
--awsui-version-info-
|
|
2037
|
+
--awsui-version-info-ea2b35b0: true;
|
|
2038
2038
|
}
|
package/internal/environment.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "components";
|
|
2
|
-
export var PACKAGE_VERSION = "3.0.0 (
|
|
3
|
-
export var GIT_SHA = "
|
|
2
|
+
export var PACKAGE_VERSION = "3.0.0 (ea2b35b0)";
|
|
3
|
+
export var GIT_SHA = "ea2b35b0";
|
|
4
4
|
export var THEME = "open-source-visual-refresh";
|
|
5
5
|
export var SYSTEM = "core";
|
|
6
6
|
export var ALWAYS_VISUAL_REFRESH = true;
|
|
@@ -341,9 +341,7 @@ export const colorBackgroundNotificationStackBarActive: string;
|
|
|
341
341
|
export const colorBackgroundNotificationStackBarHover: string;
|
|
342
342
|
export const colorBackgroundPopover: string;
|
|
343
343
|
export const colorBackgroundProgressBarValueDefault: string;
|
|
344
|
-
export const colorBackgroundProgressBarValueInFlash: string;
|
|
345
344
|
export const colorBackgroundProgressBarDefault: string;
|
|
346
|
-
export const colorBackgroundProgressBarInFlash: string;
|
|
347
345
|
export const colorBackgroundSegmentActive: string;
|
|
348
346
|
export const colorBackgroundSegmentDefault: string;
|
|
349
347
|
export const colorBackgroundSegmentDisabled: string;
|
|
@@ -340,10 +340,8 @@ export var colorBackgroundNotificationStackBar = "var(--color-background-notific
|
|
|
340
340
|
export var colorBackgroundNotificationStackBarActive = "var(--color-background-notification-stack-bar-active-a4h9r8, #232b37)";
|
|
341
341
|
export var colorBackgroundNotificationStackBarHover = "var(--color-background-notification-stack-bar-hover-jh82oo, #424650)";
|
|
342
342
|
export var colorBackgroundPopover = "var(--color-background-popover-e20fy8, #ffffff)";
|
|
343
|
-
export var colorBackgroundProgressBarValueDefault = "var(--color-background-progress-bar-value-default-
|
|
344
|
-
export var
|
|
345
|
-
export var colorBackgroundProgressBarDefault = "var(--color-background-progress-bar-default-4755ec, #ebebf0)";
|
|
346
|
-
export var colorBackgroundProgressBarInFlash = "var(--color-background-progress-bar-in-flash-f4k60b, rgba(255, 255, 255, 0.25))";
|
|
343
|
+
export var colorBackgroundProgressBarValueDefault = "var(--color-background-progress-bar-value-default-69ydqg, #006ce0)";
|
|
344
|
+
export var colorBackgroundProgressBarDefault = "var(--color-background-progress-bar-default-j8kyxd, #ebebf0)";
|
|
347
345
|
export var colorBackgroundSegmentActive = "var(--color-background-segment-active-1u2ldl, #006ce0)";
|
|
348
346
|
export var colorBackgroundSegmentDefault = "var(--color-background-segment-default-b0r494, #ffffff)";
|
|
349
347
|
export var colorBackgroundSegmentDisabled = "var(--color-background-segment-disabled-m2a5t7, #ffffff)";
|
|
@@ -1411,18 +1411,10 @@ module.exports.preset = {
|
|
|
1411
1411
|
"light": "{colorPrimary600}",
|
|
1412
1412
|
"dark": "{colorPrimary400}"
|
|
1413
1413
|
},
|
|
1414
|
-
"colorBackgroundProgressBarValueInFlash": {
|
|
1415
|
-
"light": "{colorWhite}",
|
|
1416
|
-
"dark": "{colorWhite}"
|
|
1417
|
-
},
|
|
1418
1414
|
"colorBackgroundProgressBarDefault": {
|
|
1419
1415
|
"light": "{colorNeutral250}",
|
|
1420
1416
|
"dark": "{colorNeutral700}"
|
|
1421
1417
|
},
|
|
1422
|
-
"colorBackgroundProgressBarInFlash": {
|
|
1423
|
-
"light": "{colorGreyOpaque25}",
|
|
1424
|
-
"dark": "{colorGreyOpaque25}"
|
|
1425
|
-
},
|
|
1426
1418
|
"colorBackgroundSegmentActive": {
|
|
1427
1419
|
"light": "{colorPrimary600}",
|
|
1428
1420
|
"dark": "{colorPrimary400}"
|
|
@@ -3728,18 +3720,10 @@ module.exports.preset = {
|
|
|
3728
3720
|
"light": "{colorPrimary400}",
|
|
3729
3721
|
"dark": "{colorPrimary400}"
|
|
3730
3722
|
},
|
|
3731
|
-
"colorBackgroundProgressBarValueInFlash": {
|
|
3732
|
-
"light": "{colorWhite}",
|
|
3733
|
-
"dark": "{colorWhite}"
|
|
3734
|
-
},
|
|
3735
3723
|
"colorBackgroundProgressBarDefault": {
|
|
3736
3724
|
"light": "{colorNeutral700}",
|
|
3737
3725
|
"dark": "{colorNeutral700}"
|
|
3738
3726
|
},
|
|
3739
|
-
"colorBackgroundProgressBarInFlash": {
|
|
3740
|
-
"light": "{colorGreyOpaque25}",
|
|
3741
|
-
"dark": "{colorGreyOpaque25}"
|
|
3742
|
-
},
|
|
3743
3727
|
"colorBackgroundSegmentActive": {
|
|
3744
3728
|
"light": "{colorPrimary400}",
|
|
3745
3729
|
"dark": "{colorPrimary400}"
|
|
@@ -5053,18 +5037,10 @@ module.exports.preset = {
|
|
|
5053
5037
|
"light": "{colorPrimary400}",
|
|
5054
5038
|
"dark": "{colorPrimary400}"
|
|
5055
5039
|
},
|
|
5056
|
-
"colorBackgroundProgressBarValueInFlash": {
|
|
5057
|
-
"light": "{colorWhite}",
|
|
5058
|
-
"dark": "{colorWhite}"
|
|
5059
|
-
},
|
|
5060
5040
|
"colorBackgroundProgressBarDefault": {
|
|
5061
5041
|
"light": "{colorNeutral700}",
|
|
5062
5042
|
"dark": "{colorNeutral700}"
|
|
5063
5043
|
},
|
|
5064
|
-
"colorBackgroundProgressBarInFlash": {
|
|
5065
|
-
"light": "{colorGreyOpaque25}",
|
|
5066
|
-
"dark": "{colorGreyOpaque25}"
|
|
5067
|
-
},
|
|
5068
5044
|
"colorBackgroundSegmentActive": {
|
|
5069
5045
|
"light": "{colorPrimary400}",
|
|
5070
5046
|
"dark": "{colorPrimary400}"
|
|
@@ -6311,18 +6287,10 @@ module.exports.preset = {
|
|
|
6311
6287
|
"dark": "{colorNeutral800}"
|
|
6312
6288
|
},
|
|
6313
6289
|
"colorBackgroundProgressBarValueDefault": {
|
|
6314
|
-
"light": "{colorPrimary600}",
|
|
6315
|
-
"dark": "{colorPrimary400}"
|
|
6316
|
-
},
|
|
6317
|
-
"colorBackgroundProgressBarValueInFlash": {
|
|
6318
6290
|
"light": "{colorWhite}",
|
|
6319
6291
|
"dark": "{colorWhite}"
|
|
6320
6292
|
},
|
|
6321
6293
|
"colorBackgroundProgressBarDefault": {
|
|
6322
|
-
"light": "{colorNeutral250}",
|
|
6323
|
-
"dark": "{colorNeutral700}"
|
|
6324
|
-
},
|
|
6325
|
-
"colorBackgroundProgressBarInFlash": {
|
|
6326
6294
|
"light": "{colorGreyOpaque25}",
|
|
6327
6295
|
"dark": "{colorGreyOpaque25}"
|
|
6328
6296
|
},
|
|
@@ -7457,18 +7425,10 @@ module.exports.preset = {
|
|
|
7457
7425
|
"dark": "{colorNeutral800}"
|
|
7458
7426
|
},
|
|
7459
7427
|
"colorBackgroundProgressBarValueDefault": {
|
|
7460
|
-
"light": "{colorPrimary600}",
|
|
7461
|
-
"dark": "{colorPrimary400}"
|
|
7462
|
-
},
|
|
7463
|
-
"colorBackgroundProgressBarValueInFlash": {
|
|
7464
7428
|
"light": "{colorNeutral950}",
|
|
7465
7429
|
"dark": "{colorNeutral950}"
|
|
7466
7430
|
},
|
|
7467
7431
|
"colorBackgroundProgressBarDefault": {
|
|
7468
|
-
"light": "{colorNeutral250}",
|
|
7469
|
-
"dark": "{colorNeutral700}"
|
|
7470
|
-
},
|
|
7471
|
-
"colorBackgroundProgressBarInFlash": {
|
|
7472
7432
|
"light": "{colorGreyOpaque10}",
|
|
7473
7433
|
"dark": "{colorGreyOpaque10}"
|
|
7474
7434
|
},
|
|
@@ -8606,18 +8566,10 @@ module.exports.preset = {
|
|
|
8606
8566
|
"light": "{colorPrimary600}",
|
|
8607
8567
|
"dark": "{colorPrimary400}"
|
|
8608
8568
|
},
|
|
8609
|
-
"colorBackgroundProgressBarValueInFlash": {
|
|
8610
|
-
"light": "{colorWhite}",
|
|
8611
|
-
"dark": "{colorWhite}"
|
|
8612
|
-
},
|
|
8613
8569
|
"colorBackgroundProgressBarDefault": {
|
|
8614
8570
|
"light": "{colorNeutral250}",
|
|
8615
8571
|
"dark": "{colorNeutral700}"
|
|
8616
8572
|
},
|
|
8617
|
-
"colorBackgroundProgressBarInFlash": {
|
|
8618
|
-
"light": "{colorGreyOpaque25}",
|
|
8619
|
-
"dark": "{colorGreyOpaque25}"
|
|
8620
|
-
},
|
|
8621
8573
|
"colorBackgroundSegmentActive": {
|
|
8622
8574
|
"light": "{colorPrimary600}",
|
|
8623
8575
|
"dark": "{colorPrimary400}"
|
|
@@ -9754,18 +9706,10 @@ module.exports.preset = {
|
|
|
9754
9706
|
"light": "{colorPrimary400}",
|
|
9755
9707
|
"dark": "{colorPrimary400}"
|
|
9756
9708
|
},
|
|
9757
|
-
"colorBackgroundProgressBarValueInFlash": {
|
|
9758
|
-
"light": "{colorWhite}",
|
|
9759
|
-
"dark": "{colorWhite}"
|
|
9760
|
-
},
|
|
9761
9709
|
"colorBackgroundProgressBarDefault": {
|
|
9762
9710
|
"light": "{colorNeutral700}",
|
|
9763
9711
|
"dark": "{colorNeutral700}"
|
|
9764
9712
|
},
|
|
9765
|
-
"colorBackgroundProgressBarInFlash": {
|
|
9766
|
-
"light": "{colorGreyOpaque25}",
|
|
9767
|
-
"dark": "{colorGreyOpaque25}"
|
|
9768
|
-
},
|
|
9769
9713
|
"colorBackgroundSegmentActive": {
|
|
9770
9714
|
"light": "{colorPrimary400}",
|
|
9771
9715
|
"dark": "{colorPrimary400}"
|
|
@@ -10963,9 +10907,7 @@ module.exports.preset = {
|
|
|
10963
10907
|
"colorBackgroundNotificationStackBarHover": "color",
|
|
10964
10908
|
"colorBackgroundPopover": "color",
|
|
10965
10909
|
"colorBackgroundProgressBarValueDefault": "color",
|
|
10966
|
-
"colorBackgroundProgressBarValueInFlash": "color",
|
|
10967
10910
|
"colorBackgroundProgressBarDefault": "color",
|
|
10968
|
-
"colorBackgroundProgressBarInFlash": "color",
|
|
10969
10911
|
"colorBackgroundSegmentActive": "color",
|
|
10970
10912
|
"colorBackgroundSegmentDefault": "color",
|
|
10971
10913
|
"colorBackgroundSegmentDisabled": "color",
|
|
@@ -12599,9 +12541,7 @@ module.exports.preset = {
|
|
|
12599
12541
|
"colorBackgroundNotificationStackBarHover": "color-background-notification-stack-bar-hover",
|
|
12600
12542
|
"colorBackgroundPopover": "color-background-popover",
|
|
12601
12543
|
"colorBackgroundProgressBarValueDefault": "color-background-progress-bar-value-default",
|
|
12602
|
-
"colorBackgroundProgressBarValueInFlash": "color-background-progress-bar-value-in-flash",
|
|
12603
12544
|
"colorBackgroundProgressBarDefault": "color-background-progress-bar-default",
|
|
12604
|
-
"colorBackgroundProgressBarInFlash": "color-background-progress-bar-in-flash",
|
|
12605
12545
|
"colorBackgroundSegmentActive": "color-background-segment-active",
|
|
12606
12546
|
"colorBackgroundSegmentDefault": "color-background-segment-default",
|
|
12607
12547
|
"colorBackgroundSegmentDisabled": "color-background-segment-disabled",
|
|
@@ -13419,10 +13359,8 @@ module.exports.preset = {
|
|
|
13419
13359
|
"colorBackgroundNotificationStackBarActive": "--color-background-notification-stack-bar-active-a4h9r8",
|
|
13420
13360
|
"colorBackgroundNotificationStackBarHover": "--color-background-notification-stack-bar-hover-jh82oo",
|
|
13421
13361
|
"colorBackgroundPopover": "--color-background-popover-e20fy8",
|
|
13422
|
-
"colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-
|
|
13423
|
-
"
|
|
13424
|
-
"colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-4755ec",
|
|
13425
|
-
"colorBackgroundProgressBarInFlash": "--color-background-progress-bar-in-flash-f4k60b",
|
|
13362
|
+
"colorBackgroundProgressBarValueDefault": "--color-background-progress-bar-value-default-69ydqg",
|
|
13363
|
+
"colorBackgroundProgressBarDefault": "--color-background-progress-bar-default-j8kyxd",
|
|
13426
13364
|
"colorBackgroundSegmentActive": "--color-background-segment-active-1u2ldl",
|
|
13427
13365
|
"colorBackgroundSegmentDefault": "--color-background-segment-default-b0r494",
|
|
13428
13366
|
"colorBackgroundSegmentDisabled": "--color-background-segment-disabled-m2a5t7",
|