@cloudscape-design/components 3.0.185 → 3.0.187
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/flashbar/collapsible-flashbar.js +6 -6
- package/flashbar/collapsible-flashbar.js.map +1 -1
- package/flashbar/interfaces.d.ts +8 -8
- package/flashbar/interfaces.d.ts.map +1 -1
- package/flashbar/interfaces.js.map +1 -1
- package/flashbar/utils.d.ts +1 -1
- package/flashbar/utils.d.ts.map +1 -1
- package/flashbar/utils.js +5 -5
- package/flashbar/utils.js.map +1 -1
- package/internal/base-component/styles.scoped.css +11 -0
- package/internal/environment.js +1 -1
- package/internal/generated/styles/tokens.d.ts +4 -1
- package/internal/generated/styles/tokens.js +4 -1
- package/internal/generated/theming/index.cjs +61 -1
- package/internal/generated/theming/index.js +61 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -28,7 +28,7 @@ export default function CollapsibleFlashbar(_a) {
|
|
|
28
28
|
var _d = useState(false), isFlashbarStackExpanded = _d[0], setIsFlashbarStackExpanded = _d[1];
|
|
29
29
|
var getElementsToAnimate = useCallback(function () {
|
|
30
30
|
var flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;
|
|
31
|
-
return __assign(__assign({}, flashElements), {
|
|
31
|
+
return __assign(__assign({}, flashElements), { notificationBar: notificationBarRef.current });
|
|
32
32
|
}, [isFlashbarStackExpanded]);
|
|
33
33
|
var prepareAnimations = useCallback(function () {
|
|
34
34
|
var rects = getDOMRects(getElementsToAnimate());
|
|
@@ -51,7 +51,7 @@ export default function CollapsibleFlashbar(_a) {
|
|
|
51
51
|
var expandedItemRefs = useRef({});
|
|
52
52
|
var _f = useState(null), initialAnimationState = _f[0], setInitialAnimationState = _f[1];
|
|
53
53
|
var listElementRef = useRef(null);
|
|
54
|
-
var
|
|
54
|
+
var notificationBarRef = useRef(null);
|
|
55
55
|
var _g = useState(false), transitioning = _g[0], setTransitioning = _g[1];
|
|
56
56
|
var flashbarElementId = useUniqueId('flashbar');
|
|
57
57
|
var itemCountElementId = useUniqueId('item-count');
|
|
@@ -133,7 +133,7 @@ export default function CollapsibleFlashbar(_a) {
|
|
|
133
133
|
? reversedItems.map(function (item, index) { return (__assign(__assign({}, item), { expandedIndex: index })); })
|
|
134
134
|
: getVisibleCollapsedItems(reversedItems, stackDepth).map(function (item, index) { return (__assign(__assign({}, item), { collapsedIndex: index })); });
|
|
135
135
|
var ariaLabel = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.ariaLabel;
|
|
136
|
-
var
|
|
136
|
+
var notificationBarText = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.notificationBarText;
|
|
137
137
|
var getItemId = function (item) { var _a, _b; return (_b = (_a = item.id) !== null && _a !== void 0 ? _a : item.expandedIndex) !== null && _b !== void 0 ? _b : 0; };
|
|
138
138
|
// This check allows us to use the standard "enter" Transition only when the notification was not existing before.
|
|
139
139
|
// If instead it was moved to the top of the stack but was already present in the array
|
|
@@ -187,14 +187,14 @@ export default function CollapsibleFlashbar(_a) {
|
|
|
187
187
|
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)], styles.stack, isFlashbarStackExpanded && styles.expanded, getVisualContextClassname('flashbar')), ref: mergedRef }),
|
|
188
188
|
React.createElement(React.Fragment, null,
|
|
189
189
|
isFlashbarStackExpanded && renderList(),
|
|
190
|
-
isCollapsible && (React.createElement("div", { className: clsx(styles.toggle, isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running']), onClick: toggleCollapseExpand, ref:
|
|
190
|
+
isCollapsible && (React.createElement("div", { className: clsx(styles.toggle, isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running']), onClick: toggleCollapseExpand, ref: notificationBarRef },
|
|
191
191
|
React.createElement("span", { "aria-live": "polite", className: styles.status, role: "status", id: itemCountElementId },
|
|
192
|
-
|
|
192
|
+
notificationBarText && React.createElement("h2", { className: styles.header }, notificationBarText),
|
|
193
193
|
React.createElement("span", { className: styles['item-count'] }, counterTypes.map(function (_a) {
|
|
194
194
|
var type = _a.type, labelName = _a.labelName, iconName = _a.iconName;
|
|
195
195
|
return (React.createElement(NotificationTypeCount, { key: type, iconName: iconName, label: i18nStrings ? i18nStrings[labelName] : undefined, count: countByType[type] }));
|
|
196
196
|
}))),
|
|
197
|
-
React.createElement("button", __assign({ "aria-controls": flashbarElementId, "aria-describedby": itemCountElementId, "aria-expanded": isFlashbarStackExpanded, "aria-label": i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.
|
|
197
|
+
React.createElement("button", __assign({ "aria-controls": flashbarElementId, "aria-describedby": itemCountElementId, "aria-expanded": isFlashbarStackExpanded, "aria-label": i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.notificationBarAriaLabel, className: clsx(styles.button, isFlashbarStackExpanded && styles.expanded) }, isFocusVisible),
|
|
198
198
|
React.createElement(InternalIcon, { className: styles.icon, size: "normal", name: "angle-down" })))),
|
|
199
199
|
!isFlashbarStackExpanded && renderList())));
|
|
200
200
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.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, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport { counterTypes, getFlashTypeCount, getVisibleCollapsedItems, StackableItem } from './utils';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { IconProps } from '../icon/interfaces';\nimport { sendToggleMetric } from './internal/analytics';\nimport { useFlashbar } from './common';\nimport { throttle } from '../internal/utils/throttle';\n\nexport { FlashbarProps };\n\n// If the number of items is equal or less than this value,\n// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.\nconst maxNonCollapsibleItems = 1;\n\nconst resizeListenerThrottleDelay = 100;\n\nexport default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps & CollapsibleFlashbarProps) {\n const [enteringItems, setEnteringItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [exitingItems, setExitingItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n const getElementsToAnimate = useCallback(() => {\n const flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;\n return { ...flashElements, toggleButton: toggleElementRef.current };\n }, [isFlashbarStackExpanded]);\n\n const prepareAnimations = useCallback(() => {\n const rects = getDOMRects(getElementsToAnimate());\n setInitialAnimationState(rects);\n }, [getElementsToAnimate]);\n\n const { baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({\n items,\n ...restProps,\n onItemsAdded: newItems => {\n setEnteringItems([...enteringItems, ...newItems]);\n },\n onItemsChanged: options => {\n // If not all items have ID, we can still animate collapse/expand transitions\n // because we can rely on each item's index in the original array,\n // but we can't do that when elements are added or removed, since the index changes.\n if (options?.allItemsHaveId && !options?.isReducedMotion) {\n prepareAnimations();\n }\n },\n onItemsRemoved: removedItems => {\n setExitingItems([...exitingItems, ...removedItems]);\n },\n });\n\n const isFocusVisible = useFocusVisible();\n const collapsedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n const expandedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string | number, DOMRect> | null>(null);\n const listElementRef = useRef<HTMLUListElement | null>(null);\n const toggleElementRef = useRef<HTMLDivElement | null>(null);\n const [transitioning, setTransitioning] = useState(false);\n const flashbarElementId = useUniqueId('flashbar');\n const itemCountElementId = useUniqueId('item-count');\n\n if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n sendToggleMetric(items.length, !isFlashbarStackExpanded);\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const lastItem = items[items.length - 1];\n if (lastItem.id !== undefined) {\n focusFlashById(ref.current, lastItem.id);\n }\n }\n // Run this after expanding, but not every time the items change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isFlashbarStackExpanded]);\n\n const updateBottomSpacing = useMemo(\n () =>\n throttle(() => {\n // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,\n // otherwise avoid spacing with eventual sticky elements below.\n const listElement = listElementRef?.current;\n const flashbar = listElement?.parentElement;\n if (listElement && flashbar) {\n const bottom = listElement.getBoundingClientRect().bottom;\n const windowHeight = window.innerHeight;\n // Apply the class first (before rendering)\n // so that we can make calculations based on the applied padding-bottom;\n // then we might decide to remove it or not.\n flashbar.classList.add(styles['spaced-bottom']);\n const applySpacing =\n isFlashbarStackExpanded && bottom + parseInt(getComputedStyle(flashbar).paddingBottom) >= windowHeight;\n if (!applySpacing) {\n flashbar.classList.remove(styles['spaced-bottom']);\n }\n }\n }, resizeListenerThrottleDelay),\n [isFlashbarStackExpanded]\n );\n\n useLayoutEffect(() => {\n window.addEventListener('resize', updateBottomSpacing);\n return () => {\n window.removeEventListener('resize', updateBottomSpacing);\n updateBottomSpacing.cancel();\n };\n }, [updateBottomSpacing]);\n\n const { i18nStrings } = restProps;\n\n useLayoutEffect(() => {\n // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,\n // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.\n // The old state is kept in `initialAnimationState`\n // and the new state can be retrieved from the current DOM elements.\n\n if (initialAnimationState) {\n updateBottomSpacing();\n animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\n });\n setTransitioning(true);\n setInitialAnimationState(null);\n }\n }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n const isCollapsible = items.length > maxNonCollapsibleItems;\n\n // When using the stacking feature, the items are shown in reverse order (last item on top)\n const reversedItems = items.slice().reverse();\n\n const countByType = getFlashTypeCount(items);\n\n const stackDepth = Math.min(3, items.length);\n\n const itemsToShow = isFlashbarStackExpanded\n ? reversedItems.map((item, index) => ({ ...item, expandedIndex: index }))\n : getVisibleCollapsedItems(reversedItems, stackDepth).map((item: StackableItem, index: number) => ({\n ...item,\n collapsedIndex: index,\n }));\n\n const ariaLabel = i18nStrings?.ariaLabel;\n const toggleButtonText = i18nStrings?.toggleButtonText;\n\n const getItemId = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n item.id ?? (item as StackableItem).expandedIndex ?? 0;\n\n // This check allows us to use the standard \"enter\" Transition only when the notification was not existing before.\n // If instead it was moved to the top of the stack but was already present in the array\n // (e.g, after dismissing another notification),\n // we need to use different, more custom and more controlled animations.\n const hasEntered = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n enteringItems.some(_item => _item.id && _item.id === item.id);\n const hasLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => !('expandedIndex' in item);\n const hasEnteredOrLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => hasEntered(item) || hasLeft(item);\n\n const showInnerContent = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n isFlashbarStackExpanded || hasLeft(item) || ('expandedIndex' in item && item.expandedIndex === 0);\n\n const shouldUseStandardAnimation = (item: StackableItem, index: number) => index === 0 && hasEnteredOrLeft(item);\n\n const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;\n\n const renderList = () => (\n <ul\n ref={listElementRef}\n className={clsx(\n styles['flash-list'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n initialAnimationState && styles['animation-ready'],\n isVisualRefresh && styles['visual-refresh']\n )}\n id={flashbarElementId}\n aria-label={ariaLabel}\n aria-describedby={isCollapsible ? itemCountElementId : undefined}\n style={\n !isFlashbarStackExpanded || transitioning\n ? {\n [customCssProps.flashbarStackDepth]: stackDepth,\n }\n : undefined\n }\n >\n <TransitionGroup component={null}>\n {itemsToShow.map((item: StackableItem, index: number) => (\n <Transition\n key={getItemId(item)}\n in={!hasLeft(item)}\n onStatusChange={status => {\n if (status === 'entered') {\n setEnteringItems([]);\n } else if (status === 'exited') {\n setExitingItems([]);\n }\n }}\n >\n {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n <li\n aria-hidden={!showInnerContent(item)}\n className={\n showInnerContent(item)\n ? clsx(\n styles['flash-list-item'],\n !isFlashbarStackExpanded && styles.item,\n !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only']\n )\n : clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`], styles.item)\n }\n ref={element => {\n if (isFlashbarStackExpanded) {\n expandedItemRefs.current[getAnimationElementId(item)] = element;\n } else {\n collapsedItemRefs.current[getAnimationElementId(item)] = element;\n }\n }}\n style={\n !isFlashbarStackExpanded || transitioning\n ? {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }\n : undefined\n }\n key={getItemId(item)}\n >\n {showInnerContent(item) && (\n <Flash\n // eslint-disable-next-line react/forbid-component-props\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </TransitionGroup>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles[`breakpoint-${breakpoint}`],\n styles.stack,\n isFlashbarStackExpanded && styles.expanded,\n getVisualContextClassname('flashbar')\n )}\n ref={mergedRef}\n >\n <>\n {isFlashbarStackExpanded && renderList()}\n {isCollapsible && (\n <div\n className={clsx(\n styles.toggle,\n isVisualRefresh && styles['visual-refresh'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running']\n )}\n onClick={toggleCollapseExpand}\n ref={toggleElementRef}\n >\n <span aria-live=\"polite\" className={styles.status} role=\"status\" id={itemCountElementId}>\n {toggleButtonText && <h2 className={styles.header}>{toggleButtonText}</h2>}\n <span className={styles['item-count']}>\n {counterTypes.map(({ type, labelName, iconName }) => (\n <NotificationTypeCount\n key={type}\n iconName={iconName}\n label={i18nStrings ? i18nStrings[labelName] : undefined}\n count={countByType[type]}\n />\n ))}\n </span>\n </span>\n <button\n aria-controls={flashbarElementId}\n aria-describedby={itemCountElementId}\n aria-expanded={isFlashbarStackExpanded}\n aria-label={i18nStrings?.toggleButtonAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n {...isFocusVisible}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\n </>\n </div>\n );\n}\n\nconst NotificationTypeCount = ({\n iconName,\n label,\n count,\n}: {\n iconName: IconProps.Name;\n label?: string;\n count: number;\n}) => {\n return (\n <span className={styles['type-count']}>\n <span aria-label={label} role=\"img\">\n <span title={label} aria-hidden=\"true\">\n <InternalIcon name={iconName} />\n </span>\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.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, { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';\nimport InternalIcon from '../icon/internal';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\nimport { counterTypes, getFlashTypeCount, getVisibleCollapsedItems, StackableItem } from './utils';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { IconProps } from '../icon/interfaces';\nimport { sendToggleMetric } from './internal/analytics';\nimport { useFlashbar } from './common';\nimport { throttle } from '../internal/utils/throttle';\n\nexport { FlashbarProps };\n\n// If the number of items is equal or less than this value,\n// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.\nconst maxNonCollapsibleItems = 1;\n\nconst resizeListenerThrottleDelay = 100;\n\nexport default function CollapsibleFlashbar({ items, ...restProps }: FlashbarProps & CollapsibleFlashbarProps) {\n const [enteringItems, setEnteringItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [exitingItems, setExitingItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);\n const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n const getElementsToAnimate = useCallback(() => {\n const flashElements = isFlashbarStackExpanded ? expandedItemRefs.current : collapsedItemRefs.current;\n return { ...flashElements, notificationBar: notificationBarRef.current };\n }, [isFlashbarStackExpanded]);\n\n const prepareAnimations = useCallback(() => {\n const rects = getDOMRects(getElementsToAnimate());\n setInitialAnimationState(rects);\n }, [getElementsToAnimate]);\n\n const { baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref } = useFlashbar({\n items,\n ...restProps,\n onItemsAdded: newItems => {\n setEnteringItems([...enteringItems, ...newItems]);\n },\n onItemsChanged: options => {\n // If not all items have ID, we can still animate collapse/expand transitions\n // because we can rely on each item's index in the original array,\n // but we can't do that when elements are added or removed, since the index changes.\n if (options?.allItemsHaveId && !options?.isReducedMotion) {\n prepareAnimations();\n }\n },\n onItemsRemoved: removedItems => {\n setExitingItems([...exitingItems, ...removedItems]);\n },\n });\n\n const isFocusVisible = useFocusVisible();\n const collapsedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n const expandedItemRefs = useRef<Record<string | number, HTMLElement | null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string | number, DOMRect> | null>(null);\n const listElementRef = useRef<HTMLUListElement | null>(null);\n const notificationBarRef = useRef<HTMLDivElement | null>(null);\n const [transitioning, setTransitioning] = useState(false);\n const flashbarElementId = useUniqueId('flashbar');\n const itemCountElementId = useUniqueId('item-count');\n\n if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n sendToggleMetric(items.length, !isFlashbarStackExpanded);\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const lastItem = items[items.length - 1];\n if (lastItem.id !== undefined) {\n focusFlashById(ref.current, lastItem.id);\n }\n }\n // Run this after expanding, but not every time the items change.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isFlashbarStackExpanded]);\n\n const updateBottomSpacing = useMemo(\n () =>\n throttle(() => {\n // Allow vertical space between Flashbar and page bottom only when the Flashbar is reaching the end of the page,\n // otherwise avoid spacing with eventual sticky elements below.\n const listElement = listElementRef?.current;\n const flashbar = listElement?.parentElement;\n if (listElement && flashbar) {\n const bottom = listElement.getBoundingClientRect().bottom;\n const windowHeight = window.innerHeight;\n // Apply the class first (before rendering)\n // so that we can make calculations based on the applied padding-bottom;\n // then we might decide to remove it or not.\n flashbar.classList.add(styles['spaced-bottom']);\n const applySpacing =\n isFlashbarStackExpanded && bottom + parseInt(getComputedStyle(flashbar).paddingBottom) >= windowHeight;\n if (!applySpacing) {\n flashbar.classList.remove(styles['spaced-bottom']);\n }\n }\n }, resizeListenerThrottleDelay),\n [isFlashbarStackExpanded]\n );\n\n useLayoutEffect(() => {\n window.addEventListener('resize', updateBottomSpacing);\n return () => {\n window.removeEventListener('resize', updateBottomSpacing);\n updateBottomSpacing.cancel();\n };\n }, [updateBottomSpacing]);\n\n const { i18nStrings } = restProps;\n\n useLayoutEffect(() => {\n // When `useLayoutEffect` is called, the DOM is updated but has not been painted yet,\n // so it's a good moment to trigger animations that will make calculations based on old and new DOM state.\n // The old state is kept in `initialAnimationState`\n // and the new state can be retrieved from the current DOM elements.\n\n if (initialAnimationState) {\n updateBottomSpacing();\n animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\n });\n setTransitioning(true);\n setInitialAnimationState(null);\n }\n }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n const isCollapsible = items.length > maxNonCollapsibleItems;\n\n // When using the stacking feature, the items are shown in reverse order (last item on top)\n const reversedItems = items.slice().reverse();\n\n const countByType = getFlashTypeCount(items);\n\n const stackDepth = Math.min(3, items.length);\n\n const itemsToShow = isFlashbarStackExpanded\n ? reversedItems.map((item, index) => ({ ...item, expandedIndex: index }))\n : getVisibleCollapsedItems(reversedItems, stackDepth).map((item: StackableItem, index: number) => ({\n ...item,\n collapsedIndex: index,\n }));\n\n const ariaLabel = i18nStrings?.ariaLabel;\n const notificationBarText = i18nStrings?.notificationBarText;\n\n const getItemId = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n item.id ?? (item as StackableItem).expandedIndex ?? 0;\n\n // This check allows us to use the standard \"enter\" Transition only when the notification was not existing before.\n // If instead it was moved to the top of the stack but was already present in the array\n // (e.g, after dismissing another notification),\n // we need to use different, more custom and more controlled animations.\n const hasEntered = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n enteringItems.some(_item => _item.id && _item.id === item.id);\n const hasLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => !('expandedIndex' in item);\n const hasEnteredOrLeft = (item: StackableItem | FlashbarProps.MessageDefinition) => hasEntered(item) || hasLeft(item);\n\n const showInnerContent = (item: StackableItem | FlashbarProps.MessageDefinition) =>\n isFlashbarStackExpanded || hasLeft(item) || ('expandedIndex' in item && item.expandedIndex === 0);\n\n const shouldUseStandardAnimation = (item: StackableItem, index: number) => index === 0 && hasEnteredOrLeft(item);\n\n const getAnimationElementId = (item: StackableItem) => `flash-${getItemId(item)}`;\n\n const renderList = () => (\n <ul\n ref={listElementRef}\n className={clsx(\n styles['flash-list'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n initialAnimationState && styles['animation-ready'],\n isVisualRefresh && styles['visual-refresh']\n )}\n id={flashbarElementId}\n aria-label={ariaLabel}\n aria-describedby={isCollapsible ? itemCountElementId : undefined}\n style={\n !isFlashbarStackExpanded || transitioning\n ? {\n [customCssProps.flashbarStackDepth]: stackDepth,\n }\n : undefined\n }\n >\n <TransitionGroup component={null}>\n {itemsToShow.map((item: StackableItem, index: number) => (\n <Transition\n key={getItemId(item)}\n in={!hasLeft(item)}\n onStatusChange={status => {\n if (status === 'entered') {\n setEnteringItems([]);\n } else if (status === 'exited') {\n setExitingItems([]);\n }\n }}\n >\n {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n <li\n aria-hidden={!showInnerContent(item)}\n className={\n showInnerContent(item)\n ? clsx(\n styles['flash-list-item'],\n !isFlashbarStackExpanded && styles.item,\n !collapsedItemRefs.current[getAnimationElementId(item)] && styles['expanded-only']\n )\n : clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`], styles.item)\n }\n ref={element => {\n if (isFlashbarStackExpanded) {\n expandedItemRefs.current[getAnimationElementId(item)] = element;\n } else {\n collapsedItemRefs.current[getAnimationElementId(item)] = element;\n }\n }}\n style={\n !isFlashbarStackExpanded || transitioning\n ? {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }\n : undefined\n }\n key={getItemId(item)}\n >\n {showInnerContent(item) && (\n <Flash\n // eslint-disable-next-line react/forbid-component-props\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={shouldUseStandardAnimation(item, index) ? transitionRootElement : undefined}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </TransitionGroup>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles[`breakpoint-${breakpoint}`],\n styles.stack,\n isFlashbarStackExpanded && styles.expanded,\n getVisualContextClassname('flashbar')\n )}\n ref={mergedRef}\n >\n <>\n {isFlashbarStackExpanded && renderList()}\n {isCollapsible && (\n <div\n className={clsx(\n styles.toggle,\n isVisualRefresh && styles['visual-refresh'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running']\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n >\n <span aria-live=\"polite\" className={styles.status} role=\"status\" id={itemCountElementId}>\n {notificationBarText && <h2 className={styles.header}>{notificationBarText}</h2>}\n <span className={styles['item-count']}>\n {counterTypes.map(({ type, labelName, iconName }) => (\n <NotificationTypeCount\n key={type}\n iconName={iconName}\n label={i18nStrings ? i18nStrings[labelName] : undefined}\n count={countByType[type]}\n />\n ))}\n </span>\n </span>\n <button\n aria-controls={flashbarElementId}\n aria-describedby={itemCountElementId}\n aria-expanded={isFlashbarStackExpanded}\n aria-label={i18nStrings?.notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n {...isFocusVisible}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\n </>\n </div>\n );\n}\n\nconst NotificationTypeCount = ({\n iconName,\n label,\n count,\n}: {\n iconName: IconProps.Name;\n label?: string;\n count: number;\n}) => {\n return (\n <span className={styles['type-count']}>\n <span aria-label={label} role=\"img\">\n <span title={label} aria-hidden=\"true\">\n <InternalIcon name={iconName} />\n </span>\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n"]}
|
package/flashbar/interfaces.d.ts
CHANGED
|
@@ -53,19 +53,19 @@ export interface FlashbarProps extends BaseComponentProps {
|
|
|
53
53
|
export type FlashType = FlashbarProps.Type | 'progress';
|
|
54
54
|
export interface CollapsibleFlashbarProps {
|
|
55
55
|
items: ReadonlyArray<FlashbarProps.MessageDefinition>;
|
|
56
|
-
stackItems
|
|
56
|
+
stackItems?: boolean;
|
|
57
57
|
i18nStrings?: CollapsibleFlashbarProps.I18nStrings;
|
|
58
58
|
}
|
|
59
59
|
export declare namespace CollapsibleFlashbarProps {
|
|
60
60
|
interface I18nStrings {
|
|
61
61
|
ariaLabel: string;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
62
|
+
errorIconAriaLabel?: string;
|
|
63
|
+
infoIconAriaLabel?: string;
|
|
64
|
+
inProgressIconAriaLabel?: string;
|
|
65
|
+
notificationBarAriaLabel?: string;
|
|
66
|
+
notificationBarText?: string;
|
|
67
|
+
successIconAriaLabel?: string;
|
|
68
|
+
warningIconAriaLabel?: string;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
71
|
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,iBAAiB;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC;QAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC;QAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QACrC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACvC,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACpC;IAED,KAAY,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,KAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,GAAG,UAAU,CAAC;AAExD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACtD,UAAU,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,iBAAiB;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC;QAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC;QAClC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QACrC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACvC,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACpC;IAED,KAAY,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAC5D,KAAY,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;CAC3C;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD;AAED,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,GAAG,UAAU,CAAC;AAExD,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC;CACpD;AAED,yBAAiB,wBAAwB,CAAC;IACxC,UAAiB,WAAW;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,wBAAwB,CAAC,EAAE,MAAM,CAAC;QAClC,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/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';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n export interface MessageDefinition {\n header?: React.ReactNode;\n content?: React.ReactNode;\n dismissible?: boolean;\n dismissLabel?: string;\n statusIconAriaLabel?: string;\n loading?: boolean;\n type?: FlashbarProps.Type;\n ariaRole?: FlashbarProps.AriaRole;\n action?: React.ReactNode;\n id?: string;\n buttonText?: ButtonProps['children'];\n onButtonClick?: ButtonProps['onClick'];\n onDismiss?: ButtonProps['onClick'];\n }\n\n export type Type = 'success' | 'warning' | 'info' | 'error';\n export type AriaRole = 'alert' | 'status';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n /**\n * Specifies flash messages that appear in the same order that they are listed.\n * The value is an array of flash message definition objects.\n *\n * A flash message object contains the following properties:\n * * `header` (ReactNode) - Specifies the heading text.\n * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n * When a user clicks on this button the `onDismiss` handler is called.\n * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.\n * * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive\n * technology. Use \"status\" for status updates or informational content. Use \"alert\" for important messages that need the\n * user's attention.\n * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n * our UX guidelines only allow you to add a button.\n * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n * When a user clicks on this button the `onButtonClick` handler is called.\n * If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.\n * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n * using the `action` property. **Deprecated**, replaced by `action`.\n * * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:\n * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n */\n items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n\nexport type FlashType = FlashbarProps.Type | 'progress';\n\nexport interface CollapsibleFlashbarProps {\n items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n stackItems
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/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';\nimport React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n export interface MessageDefinition {\n header?: React.ReactNode;\n content?: React.ReactNode;\n dismissible?: boolean;\n dismissLabel?: string;\n statusIconAriaLabel?: string;\n loading?: boolean;\n type?: FlashbarProps.Type;\n ariaRole?: FlashbarProps.AriaRole;\n action?: React.ReactNode;\n id?: string;\n buttonText?: ButtonProps['children'];\n onButtonClick?: ButtonProps['onClick'];\n onDismiss?: ButtonProps['onClick'];\n }\n\n export type Type = 'success' | 'warning' | 'info' | 'error';\n export type AriaRole = 'alert' | 'status';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n /**\n * Specifies flash messages that appear in the same order that they are listed.\n * The value is an array of flash message definition objects.\n *\n * A flash message object contains the following properties:\n * * `header` (ReactNode) - Specifies the heading text.\n * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n * When a user clicks on this button the `onDismiss` handler is called.\n * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.\n * * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive\n * technology. Use \"status\" for status updates or informational content. Use \"alert\" for important messages that need the\n * user's attention.\n * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n * our UX guidelines only allow you to add a button.\n * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n * When a user clicks on this button the `onButtonClick` handler is called.\n * If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.\n * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n * using the `action` property. **Deprecated**, replaced by `action`.\n * * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:\n * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n */\n items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n\nexport type FlashType = FlashbarProps.Type | 'progress';\n\nexport interface CollapsibleFlashbarProps {\n items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n stackItems?: boolean;\n i18nStrings?: CollapsibleFlashbarProps.I18nStrings;\n}\n\nexport namespace CollapsibleFlashbarProps {\n export interface I18nStrings {\n ariaLabel: string;\n errorIconAriaLabel?: string;\n infoIconAriaLabel?: string;\n inProgressIconAriaLabel?: string;\n notificationBarAriaLabel?: string;\n notificationBarText?: string;\n successIconAriaLabel?: string;\n warningIconAriaLabel?: string;\n }\n}\n"]}
|
package/flashbar/utils.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export interface StackableItem extends FlashbarProps.MessageDefinition {
|
|
|
8
8
|
export declare function getItemType(item: FlashbarProps.MessageDefinition): "progress" | FlashbarProps.Type;
|
|
9
9
|
export declare function getVisibleCollapsedItems(items: ReadonlyArray<FlashbarProps.MessageDefinition>, desiredLength: number): ReadonlyArray<StackableItem>;
|
|
10
10
|
export declare function getFlashTypeCount(items: readonly FlashbarProps.MessageDefinition[]): Record<FlashType, number>;
|
|
11
|
-
export type LabelName = '
|
|
11
|
+
export type LabelName = 'errorIconAriaLabel' | 'warningIconAriaLabel' | 'successIconAriaLabel' | 'infoIconAriaLabel' | 'inProgressIconAriaLabel';
|
|
12
12
|
export declare const counterTypes: {
|
|
13
13
|
type: FlashType;
|
|
14
14
|
labelName: LabelName;
|
package/flashbar/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/flashbar/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAKzC,MAAM,WAAW,aAAc,SAAQ,aAAa,CAAC,iBAAiB;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,iBAAiB,mCAMhE;AAWD,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,EACrD,aAAa,EAAE,MAAM,GACpB,aAAa,CAAC,aAAa,CAAC,CAgD9B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,aAAa,CAAC,iBAAiB,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAO9G;AAED,MAAM,MAAM,SAAS,GACjB,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/flashbar/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAKzC,MAAM,WAAW,aAAc,SAAQ,aAAa,CAAC,iBAAiB;IACpE,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAeD,wBAAgB,WAAW,CAAC,IAAI,EAAE,aAAa,CAAC,iBAAiB,mCAMhE;AAWD,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,EACrD,aAAa,EAAE,MAAM,GACpB,aAAa,CAAC,aAAa,CAAC,CAgD9B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,SAAS,aAAa,CAAC,iBAAiB,EAAE,GAAG,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAO9G;AAED,MAAM,MAAM,SAAS,GACjB,oBAAoB,GACpB,sBAAsB,GACtB,sBAAsB,GACtB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,YAAY,EAAE;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,SAAS,CAAC,IAAI,CAAC;CAC1B,EAMA,CAAC"}
|
package/flashbar/utils.js
CHANGED
|
@@ -86,10 +86,10 @@ export function getFlashTypeCount(items) {
|
|
|
86
86
|
return count;
|
|
87
87
|
}
|
|
88
88
|
export var counterTypes = [
|
|
89
|
-
{ type: 'error', labelName: '
|
|
90
|
-
{ type: 'warning', labelName: '
|
|
91
|
-
{ type: 'success', labelName: '
|
|
92
|
-
{ type: 'info', labelName: '
|
|
93
|
-
{ type: 'progress', labelName: '
|
|
89
|
+
{ type: 'error', labelName: 'errorIconAriaLabel', iconName: 'status-negative' },
|
|
90
|
+
{ type: 'warning', labelName: 'warningIconAriaLabel', iconName: 'status-warning' },
|
|
91
|
+
{ type: 'success', labelName: 'successIconAriaLabel', iconName: 'status-positive' },
|
|
92
|
+
{ type: 'info', labelName: 'infoIconAriaLabel', iconName: 'status-info' },
|
|
93
|
+
{ type: 'progress', labelName: 'inProgressIconAriaLabel', iconName: 'status-in-progress' },
|
|
94
94
|
];
|
|
95
95
|
//# sourceMappingURL=utils.js.map
|
package/flashbar/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/flashbar/utils.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/flashbar/utils.ts"],"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 { FlashbarProps, FlashType } from './interfaces';\nimport { IconProps } from '../icon/interfaces';\n\nexport const FOCUS_THROTTLE_DELAY = 2000;\n\n// Since the position of a notification changes when the Flashbar is collapsed,\n// it is useful on some situations (e.g, for animating) to know the original position of the item\n// in the non-collapsed state.\nexport interface StackableItem extends FlashbarProps.MessageDefinition {\n expandedIndex: number;\n collapsedIndex?: number;\n}\n\nconst typesToColors: Record<FlashType, string> = {\n error: 'red',\n info: 'blue',\n progress: 'blue',\n success: 'green',\n warning: 'blue',\n};\n\nfunction getColorFromType(type?: FlashType): string {\n const defaultColor = 'blue';\n return type ? typesToColors[type] || defaultColor : defaultColor;\n}\n\nexport function getItemType(item: FlashbarProps.MessageDefinition) {\n if (item.loading) {\n return 'progress';\n } else {\n return item.type || 'info';\n }\n}\n\nfunction getItemColor(item: FlashbarProps.MessageDefinition) {\n return getColorFromType(getItemType(item));\n}\n\n/*\n Returns a selection of notifications, preserving the order when possible but making sure that all different colors in\n the stack are represented in the returned array.\n The order corresponds to how they are represented when using the collapsible feature (newest first, oldest last).\n */\nexport function getVisibleCollapsedItems(\n items: ReadonlyArray<FlashbarProps.MessageDefinition>,\n desiredLength: number\n): ReadonlyArray<StackableItem> {\n // First `desiredLength` items in the original array,\n // together with `isColorRepeated` to tell if they can be subject to be replaced later on if necessary\n const itemsOnTop: { item: StackableItem; isColorRepeated: boolean }[] = [];\n\n // Items that fall outside `desiredIndexLength` but need to be \"promoted\" if possible\n // because they are of a different color which otherwise wouldn't be represented\n const itemsToPromote: StackableItem[] = [];\n\n const addedColors: Set<string> = new Set();\n const allPossibleColors = Object.keys(typesToColors).length;\n const finalLength = Math.min(items.length, desiredLength);\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n const color = getItemColor(item);\n const isColorRepeated = addedColors.has(color);\n if (i < finalLength) {\n itemsOnTop.push({ item: { ...item, expandedIndex: i }, isColorRepeated });\n } else {\n if (addedColors.size === allPossibleColors) {\n // No need to keep looking for unrepresented colors, we can stop looping\n break;\n } else if (!isColorRepeated) {\n itemsToPromote.push({ ...item, expandedIndex: i });\n }\n }\n addedColors.add(color);\n }\n // Generate the new array with the selected items, by picking from both arrays.\n // First, from the non-repeated items within the desired length...\n // We loop `itemsOnTop` starting from the end because we prefer to preserve the first ones rather than the old ones\n const reversedInitialSelection = [];\n let slotsReservedForPromotions = 0;\n for (let j = itemsOnTop.length - 1; j >= 0; j--) {\n const item = itemsOnTop[j];\n if (item.isColorRepeated && slotsReservedForPromotions < itemsToPromote.length) {\n slotsReservedForPromotions += 1;\n } else {\n reversedInitialSelection.push(item.item);\n }\n }\n const selectedItems = reversedInitialSelection.reverse();\n // ...and then complete the selection with as many promotable items as we can fit in the rest of the array\n for (let k = 0; selectedItems.length < desiredLength; k++) {\n selectedItems.push(itemsToPromote[k]);\n }\n return selectedItems;\n}\n\nexport function getFlashTypeCount(items: readonly FlashbarProps.MessageDefinition[]): Record<FlashType, number> {\n const count = { error: 0, info: 0, progress: 0, success: 0, warning: 0 };\n for (const item of items) {\n const type = getItemType(item);\n count[type] += 1;\n }\n return count;\n}\n\nexport type LabelName =\n | 'errorIconAriaLabel'\n | 'warningIconAriaLabel'\n | 'successIconAriaLabel'\n | 'infoIconAriaLabel'\n | 'inProgressIconAriaLabel';\n\nexport const counterTypes: {\n type: FlashType;\n labelName: LabelName;\n iconName: IconProps.Name;\n}[] = [\n { type: 'error', labelName: 'errorIconAriaLabel', iconName: 'status-negative' },\n { type: 'warning', labelName: 'warningIconAriaLabel', iconName: 'status-warning' },\n { type: 'success', labelName: 'successIconAriaLabel', iconName: 'status-positive' },\n { type: 'info', labelName: 'infoIconAriaLabel', iconName: 'status-info' },\n { type: 'progress', labelName: 'inProgressIconAriaLabel', iconName: 'status-in-progress' },\n];\n"]}
|
|
@@ -351,6 +351,8 @@
|
|
|
351
351
|
--color-text-status-success-0fzhv9:#037f0c;
|
|
352
352
|
--color-text-status-warning-27nlyh:#d91515;
|
|
353
353
|
--color-text-top-navigation-title-oypxe3:#000716;
|
|
354
|
+
--color-board-placeholder-active-vaxzdf:#e9ebed;
|
|
355
|
+
--color-board-placeholder-hover-v1s7kq:#d3e7f9;
|
|
354
356
|
--font-body-m-line-height-i7xxvv:22px;
|
|
355
357
|
--font-body-m-size-sregvd:14px;
|
|
356
358
|
--font-body-s-letter-spacing-cy0oxj:0.005em;
|
|
@@ -565,6 +567,7 @@
|
|
|
565
567
|
--space-xxxl-bo9z7f:40px;
|
|
566
568
|
--shadow-container-7nblnj:0px 0px 1px 1px #e9ebed, 0px 1px 8px 2px rgba(0, 7, 22, 0.12);
|
|
567
569
|
--shadow-container-stacked-lumzae:-1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgb(0 7 22 / 12%), 8px 0px 8px -7px rgb(0 7 22 / 12%), -8px 0px 8px -7px rgb(0 7 22 / 12%);
|
|
570
|
+
--shadow-container-active-l4kuxc:0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a;
|
|
568
571
|
--shadow-dropdown-99h0gz:0px 4px 20px 1px rgba(0, 7, 22, 0.10);
|
|
569
572
|
--shadow-dropup-11esug:0px 4px 20px 1px rgba(0, 7, 22, 0.10);
|
|
570
573
|
--shadow-flash-collapsed-d4s4kz:0px 4px 4px rgba(0, 0, 0, 0.25);
|
|
@@ -901,8 +904,11 @@
|
|
|
901
904
|
--color-text-status-success-0fzhv9:#29ad32;
|
|
902
905
|
--color-text-status-warning-27nlyh:#eb6f6f;
|
|
903
906
|
--color-text-top-navigation-title-oypxe3:#fbfbfb;
|
|
907
|
+
--color-board-placeholder-active-vaxzdf:#5f6b7a;
|
|
908
|
+
--color-board-placeholder-hover-v1s7kq:#0972d3;
|
|
904
909
|
--shadow-container-7nblnj:0px 0px 1px 1px #192534, 0px 1px 8px 2px rgba(0, 7, 22, 1);
|
|
905
910
|
--shadow-container-stacked-lumzae:-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22);
|
|
911
|
+
--shadow-container-active-l4kuxc:0px 1px 1px 1px #192534, 0px 6px 36px #000716;
|
|
906
912
|
--shadow-dropdown-99h0gz:0px 4px 20px 1px rgba(0, 7, 22, 1);
|
|
907
913
|
--shadow-dropup-11esug:0px 4px 20px 1px rgba(0, 7, 22, 1);
|
|
908
914
|
--shadow-flash-sticky-xplpiu:0px 6px 36px rgba(0, 7, 22, 1);
|
|
@@ -1138,6 +1144,8 @@
|
|
|
1138
1144
|
--color-text-status-success-0fzhv9:#29ad32;
|
|
1139
1145
|
--color-text-status-warning-27nlyh:#eb6f6f;
|
|
1140
1146
|
--color-text-top-navigation-title-oypxe3:#fbfbfb;
|
|
1147
|
+
--color-board-placeholder-active-vaxzdf:#5f6b7a;
|
|
1148
|
+
--color-board-placeholder-hover-v1s7kq:#0972d3;
|
|
1141
1149
|
}
|
|
1142
1150
|
|
|
1143
1151
|
.awsui-context-content-header:not(#\9) {
|
|
@@ -1309,8 +1317,11 @@
|
|
|
1309
1317
|
--color-text-status-success-0fzhv9:#29ad32;
|
|
1310
1318
|
--color-text-status-warning-27nlyh:#eb6f6f;
|
|
1311
1319
|
--color-text-top-navigation-title-oypxe3:#fbfbfb;
|
|
1320
|
+
--color-board-placeholder-active-vaxzdf:#5f6b7a;
|
|
1321
|
+
--color-board-placeholder-hover-v1s7kq:#0972d3;
|
|
1312
1322
|
--shadow-container-7nblnj:none;
|
|
1313
1323
|
--shadow-container-stacked-lumzae:-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22);
|
|
1324
|
+
--shadow-container-active-l4kuxc:0px 1px 1px 1px #192534, 0px 6px 36px #000716;
|
|
1314
1325
|
--shadow-dropdown-99h0gz:0px 4px 20px 1px rgba(0, 7, 22, 1);
|
|
1315
1326
|
--shadow-dropup-11esug:0px 4px 20px 1px rgba(0, 7, 22, 1);
|
|
1316
1327
|
--shadow-modal-3qhlqt:0px 4px 20px 1px rgba(0, 7, 22, 1);
|
package/internal/environment.js
CHANGED
|
@@ -230,6 +230,8 @@ export const colorTextStatusInactive: string;
|
|
|
230
230
|
export const colorTextStatusInfo: string;
|
|
231
231
|
export const colorTextStatusSuccess: string;
|
|
232
232
|
export const colorTextStatusWarning: string;
|
|
233
|
+
export const colorBoardPlaceholderActive: string;
|
|
234
|
+
export const colorBoardPlaceholderHover: string;
|
|
233
235
|
export const fontFamilyBase: string;
|
|
234
236
|
export const fontFamilyMonospace: string;
|
|
235
237
|
export const borderRadiusAlert: string;
|
|
@@ -277,4 +279,5 @@ export const spaceStaticM: string;
|
|
|
277
279
|
export const spaceStaticL: string;
|
|
278
280
|
export const spaceStaticXl: string;
|
|
279
281
|
export const spaceStaticXxl: string;
|
|
280
|
-
export const spaceStaticXxxl: string;
|
|
282
|
+
export const spaceStaticXxxl: string;
|
|
283
|
+
export const shadowContainerActive: string;
|
|
@@ -230,6 +230,8 @@ export var colorTextStatusInactive = "var(--color-text-status-inactive-5ei55p, #
|
|
|
230
230
|
export var colorTextStatusInfo = "var(--color-text-status-info-utupcz, #0972d3)";
|
|
231
231
|
export var colorTextStatusSuccess = "var(--color-text-status-success-0fzhv9, #037f0c)";
|
|
232
232
|
export var colorTextStatusWarning = "var(--color-text-status-warning-27nlyh, #d91515)";
|
|
233
|
+
export var colorBoardPlaceholderActive = "var(--color-board-placeholder-active-vaxzdf, #e9ebed)";
|
|
234
|
+
export var colorBoardPlaceholderHover = "var(--color-board-placeholder-hover-v1s7kq, #d3e7f9)";
|
|
233
235
|
export var fontFamilyBase = "var(--font-family-base-qnistn, 'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif)";
|
|
234
236
|
export var fontFamilyMonospace = "var(--font-family-monospace-iz223z, Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace)";
|
|
235
237
|
export var borderRadiusAlert = "var(--border-radius-alert-n0skwy, 12px)";
|
|
@@ -277,4 +279,5 @@ export var spaceStaticM = "var(--space-static-m-pc0uz7, 16px)";
|
|
|
277
279
|
export var spaceStaticL = "var(--space-static-l-t7yjdj, 20px)";
|
|
278
280
|
export var spaceStaticXl = "var(--space-static-xl-g2lpmk, 24px)";
|
|
279
281
|
export var spaceStaticXxl = "var(--space-static-xxl-m6qwv3, 32px)";
|
|
280
|
-
export var spaceStaticXxxl = "var(--space-static-xxxl-66ty0h, 40px)";
|
|
282
|
+
export var spaceStaticXxxl = "var(--space-static-xxxl-66ty0h, 40px)";
|
|
283
|
+
export var shadowContainerActive = "var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a)";
|
|
@@ -1555,6 +1555,14 @@ module.exports.preset = {
|
|
|
1555
1555
|
"light": "{colorGrey900}",
|
|
1556
1556
|
"dark": "{colorGrey100}"
|
|
1557
1557
|
},
|
|
1558
|
+
"colorBoardPlaceholderActive": {
|
|
1559
|
+
"light": "{colorGrey200}",
|
|
1560
|
+
"dark": "{colorGrey550}"
|
|
1561
|
+
},
|
|
1562
|
+
"colorBoardPlaceholderHover": {
|
|
1563
|
+
"light": "{colorBlue200}",
|
|
1564
|
+
"dark": "{colorBlue600}"
|
|
1565
|
+
},
|
|
1558
1566
|
"fontBodyMLineHeight": "22px",
|
|
1559
1567
|
"fontBodyMSize": "14px",
|
|
1560
1568
|
"fontBodySLetterSpacing": "0.005em",
|
|
@@ -2187,6 +2195,10 @@ module.exports.preset = {
|
|
|
2187
2195
|
"light": "-1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgb(0 7 22 / 12%), 8px 0px 8px -7px rgb(0 7 22 / 12%), -8px 0px 8px -7px rgb(0 7 22 / 12%)",
|
|
2188
2196
|
"dark": "-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22)"
|
|
2189
2197
|
},
|
|
2198
|
+
"shadowContainerActive": {
|
|
2199
|
+
"light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
|
|
2200
|
+
"dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716"
|
|
2201
|
+
},
|
|
2190
2202
|
"shadowDropdown": {
|
|
2191
2203
|
"light": "0px 4px 20px 1px rgba(0, 7, 22, 0.10)",
|
|
2192
2204
|
"dark": "0px 4px 20px 1px rgba(0, 7, 22, 1)"
|
|
@@ -3096,6 +3108,14 @@ module.exports.preset = {
|
|
|
3096
3108
|
"colorTextTopNavigationTitle": {
|
|
3097
3109
|
"light": "{colorGrey100}",
|
|
3098
3110
|
"dark": "{colorGrey100}"
|
|
3111
|
+
},
|
|
3112
|
+
"colorBoardPlaceholderActive": {
|
|
3113
|
+
"light": "{colorGrey550}",
|
|
3114
|
+
"dark": "{colorGrey550}"
|
|
3115
|
+
},
|
|
3116
|
+
"colorBoardPlaceholderHover": {
|
|
3117
|
+
"light": "{colorBlue600}",
|
|
3118
|
+
"dark": "{colorBlue600}"
|
|
3099
3119
|
}
|
|
3100
3120
|
}
|
|
3101
3121
|
},
|
|
@@ -3111,6 +3131,10 @@ module.exports.preset = {
|
|
|
3111
3131
|
"light": "-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22)",
|
|
3112
3132
|
"dark": "-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22)"
|
|
3113
3133
|
},
|
|
3134
|
+
"shadowContainerActive": {
|
|
3135
|
+
"light": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
|
|
3136
|
+
"dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716"
|
|
3137
|
+
},
|
|
3114
3138
|
"shadowDropdown": {
|
|
3115
3139
|
"light": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
|
|
3116
3140
|
"dark": "0px 4px 20px 1px rgba(0, 7, 22, 1)"
|
|
@@ -4014,6 +4038,14 @@ module.exports.preset = {
|
|
|
4014
4038
|
"colorTextTopNavigationTitle": {
|
|
4015
4039
|
"light": "{colorGrey100}",
|
|
4016
4040
|
"dark": "{colorGrey100}"
|
|
4041
|
+
},
|
|
4042
|
+
"colorBoardPlaceholderActive": {
|
|
4043
|
+
"light": "{colorGrey550}",
|
|
4044
|
+
"dark": "{colorGrey550}"
|
|
4045
|
+
},
|
|
4046
|
+
"colorBoardPlaceholderHover": {
|
|
4047
|
+
"light": "{colorBlue600}",
|
|
4048
|
+
"dark": "{colorBlue600}"
|
|
4017
4049
|
}
|
|
4018
4050
|
}
|
|
4019
4051
|
},
|
|
@@ -4876,6 +4908,14 @@ module.exports.preset = {
|
|
|
4876
4908
|
"colorTextTopNavigationTitle": {
|
|
4877
4909
|
"light": "{colorGrey900}",
|
|
4878
4910
|
"dark": "{colorGrey100}"
|
|
4911
|
+
},
|
|
4912
|
+
"colorBoardPlaceholderActive": {
|
|
4913
|
+
"light": "{colorGrey200}",
|
|
4914
|
+
"dark": "{colorGrey550}"
|
|
4915
|
+
},
|
|
4916
|
+
"colorBoardPlaceholderHover": {
|
|
4917
|
+
"light": "{colorBlue200}",
|
|
4918
|
+
"dark": "{colorBlue600}"
|
|
4879
4919
|
}
|
|
4880
4920
|
}
|
|
4881
4921
|
},
|
|
@@ -5738,6 +5778,14 @@ module.exports.preset = {
|
|
|
5738
5778
|
"colorTextTopNavigationTitle": {
|
|
5739
5779
|
"light": "{colorGrey900}",
|
|
5740
5780
|
"dark": "{colorGrey100}"
|
|
5781
|
+
},
|
|
5782
|
+
"colorBoardPlaceholderActive": {
|
|
5783
|
+
"light": "{colorGrey200}",
|
|
5784
|
+
"dark": "{colorGrey550}"
|
|
5785
|
+
},
|
|
5786
|
+
"colorBoardPlaceholderHover": {
|
|
5787
|
+
"light": "{colorBlue200}",
|
|
5788
|
+
"dark": "{colorBlue600}"
|
|
5741
5789
|
}
|
|
5742
5790
|
}
|
|
5743
5791
|
}
|
|
@@ -6111,6 +6159,8 @@ module.exports.preset = {
|
|
|
6111
6159
|
"colorTextStatusSuccess": "color",
|
|
6112
6160
|
"colorTextStatusWarning": "color",
|
|
6113
6161
|
"colorTextTopNavigationTitle": "color",
|
|
6162
|
+
"colorBoardPlaceholderActive": "color",
|
|
6163
|
+
"colorBoardPlaceholderHover": "color",
|
|
6114
6164
|
"motionDurationExtraFast": "motion",
|
|
6115
6165
|
"motionDurationExtraSlow": "motion",
|
|
6116
6166
|
"motionDurationFast": "motion",
|
|
@@ -6247,6 +6297,7 @@ module.exports.preset = {
|
|
|
6247
6297
|
"spaceXxxl": "density",
|
|
6248
6298
|
"shadowContainer": "color",
|
|
6249
6299
|
"shadowContainerStacked": "color",
|
|
6300
|
+
"shadowContainerActive": "color",
|
|
6250
6301
|
"shadowDropdown": "color",
|
|
6251
6302
|
"shadowDropup": "color",
|
|
6252
6303
|
"shadowFlashCollapsed": "color",
|
|
@@ -6657,6 +6708,8 @@ module.exports.preset = {
|
|
|
6657
6708
|
"colorTextStatusInfo",
|
|
6658
6709
|
"colorTextStatusSuccess",
|
|
6659
6710
|
"colorTextStatusWarning",
|
|
6711
|
+
"colorBoardPlaceholderActive",
|
|
6712
|
+
"colorBoardPlaceholderHover",
|
|
6660
6713
|
"fontFamilyBase",
|
|
6661
6714
|
"fontFamilyMonospace",
|
|
6662
6715
|
"borderRadiusAlert",
|
|
@@ -6704,7 +6757,8 @@ module.exports.preset = {
|
|
|
6704
6757
|
"spaceStaticL",
|
|
6705
6758
|
"spaceStaticXl",
|
|
6706
6759
|
"spaceStaticXxl",
|
|
6707
|
-
"spaceStaticXxxl"
|
|
6760
|
+
"spaceStaticXxxl",
|
|
6761
|
+
"shadowContainerActive"
|
|
6708
6762
|
],
|
|
6709
6763
|
"variablesMap": {
|
|
6710
6764
|
"colorAmazonOrange": "color-amazon-orange",
|
|
@@ -7120,6 +7174,8 @@ module.exports.preset = {
|
|
|
7120
7174
|
"colorTextStatusSuccess": "color-text-status-success",
|
|
7121
7175
|
"colorTextStatusWarning": "color-text-status-warning",
|
|
7122
7176
|
"colorTextTopNavigationTitle": "color-text-top-navigation-title",
|
|
7177
|
+
"colorBoardPlaceholderActive": "color-board-placeholder-active",
|
|
7178
|
+
"colorBoardPlaceholderHover": "color-board-placeholder-hover",
|
|
7123
7179
|
"fontBodyMLineHeight": "font-body-m-line-height",
|
|
7124
7180
|
"fontBodyMSize": "font-body-m-size",
|
|
7125
7181
|
"fontBodySLetterSpacing": "font-body-s-letter-spacing",
|
|
@@ -7344,6 +7400,7 @@ module.exports.preset = {
|
|
|
7344
7400
|
"spaceXxxl": "space-xxxl",
|
|
7345
7401
|
"shadowContainer": "shadow-container",
|
|
7346
7402
|
"shadowContainerStacked": "shadow-container-stacked",
|
|
7403
|
+
"shadowContainerActive": "shadow-container-active",
|
|
7347
7404
|
"shadowDropdown": "shadow-dropdown",
|
|
7348
7405
|
"shadowDropup": "shadow-dropup",
|
|
7349
7406
|
"shadowFlashCollapsed": "shadow-flash-collapsed",
|
|
@@ -7771,6 +7828,8 @@ module.exports.preset = {
|
|
|
7771
7828
|
"colorTextStatusSuccess": "--color-text-status-success-0fzhv9",
|
|
7772
7829
|
"colorTextStatusWarning": "--color-text-status-warning-27nlyh",
|
|
7773
7830
|
"colorTextTopNavigationTitle": "--color-text-top-navigation-title-oypxe3",
|
|
7831
|
+
"colorBoardPlaceholderActive": "--color-board-placeholder-active-vaxzdf",
|
|
7832
|
+
"colorBoardPlaceholderHover": "--color-board-placeholder-hover-v1s7kq",
|
|
7774
7833
|
"fontBodyMLineHeight": "--font-body-m-line-height-i7xxvv",
|
|
7775
7834
|
"fontBodyMSize": "--font-body-m-size-sregvd",
|
|
7776
7835
|
"fontBodySLetterSpacing": "--font-body-s-letter-spacing-cy0oxj",
|
|
@@ -7995,6 +8054,7 @@ module.exports.preset = {
|
|
|
7995
8054
|
"spaceXxxl": "--space-xxxl-bo9z7f",
|
|
7996
8055
|
"shadowContainer": "--shadow-container-7nblnj",
|
|
7997
8056
|
"shadowContainerStacked": "--shadow-container-stacked-lumzae",
|
|
8057
|
+
"shadowContainerActive": "--shadow-container-active-l4kuxc",
|
|
7998
8058
|
"shadowDropdown": "--shadow-dropdown-99h0gz",
|
|
7999
8059
|
"shadowDropup": "--shadow-dropup-11esug",
|
|
8000
8060
|
"shadowFlashCollapsed": "--shadow-flash-collapsed-d4s4kz",
|
|
@@ -1555,6 +1555,14 @@ export var preset = {
|
|
|
1555
1555
|
"light": "{colorGrey900}",
|
|
1556
1556
|
"dark": "{colorGrey100}"
|
|
1557
1557
|
},
|
|
1558
|
+
"colorBoardPlaceholderActive": {
|
|
1559
|
+
"light": "{colorGrey200}",
|
|
1560
|
+
"dark": "{colorGrey550}"
|
|
1561
|
+
},
|
|
1562
|
+
"colorBoardPlaceholderHover": {
|
|
1563
|
+
"light": "{colorBlue200}",
|
|
1564
|
+
"dark": "{colorBlue600}"
|
|
1565
|
+
},
|
|
1558
1566
|
"fontBodyMLineHeight": "22px",
|
|
1559
1567
|
"fontBodyMSize": "14px",
|
|
1560
1568
|
"fontBodySLetterSpacing": "0.005em",
|
|
@@ -2187,6 +2195,10 @@ export var preset = {
|
|
|
2187
2195
|
"light": "-1px 1px 1px 0px #e9ebed, 1px 1px 1px 0px #e9ebed, 0px 9px 8px -7px rgb(0 7 22 / 12%), 8px 0px 8px -7px rgb(0 7 22 / 12%), -8px 0px 8px -7px rgb(0 7 22 / 12%)",
|
|
2188
2196
|
"dark": "-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22)"
|
|
2189
2197
|
},
|
|
2198
|
+
"shadowContainerActive": {
|
|
2199
|
+
"light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
|
|
2200
|
+
"dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716"
|
|
2201
|
+
},
|
|
2190
2202
|
"shadowDropdown": {
|
|
2191
2203
|
"light": "0px 4px 20px 1px rgba(0, 7, 22, 0.10)",
|
|
2192
2204
|
"dark": "0px 4px 20px 1px rgba(0, 7, 22, 1)"
|
|
@@ -3096,6 +3108,14 @@ export var preset = {
|
|
|
3096
3108
|
"colorTextTopNavigationTitle": {
|
|
3097
3109
|
"light": "{colorGrey100}",
|
|
3098
3110
|
"dark": "{colorGrey100}"
|
|
3111
|
+
},
|
|
3112
|
+
"colorBoardPlaceholderActive": {
|
|
3113
|
+
"light": "{colorGrey550}",
|
|
3114
|
+
"dark": "{colorGrey550}"
|
|
3115
|
+
},
|
|
3116
|
+
"colorBoardPlaceholderHover": {
|
|
3117
|
+
"light": "{colorBlue600}",
|
|
3118
|
+
"dark": "{colorBlue600}"
|
|
3099
3119
|
}
|
|
3100
3120
|
}
|
|
3101
3121
|
},
|
|
@@ -3111,6 +3131,10 @@ export var preset = {
|
|
|
3111
3131
|
"light": "-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22)",
|
|
3112
3132
|
"dark": "-1px 1px 1px 0px #192534, 1px 1px 1px 0px #192534, 0px 9px 8px -7px rgb(0 7 22), 8px 0px 8px -7px rgb(0 7 22), -8px 0px 8px -7px rgb(0 7 22)"
|
|
3113
3133
|
},
|
|
3134
|
+
"shadowContainerActive": {
|
|
3135
|
+
"light": "0px 1px 1px 1px #192534, 0px 6px 36px #000716",
|
|
3136
|
+
"dark": "0px 1px 1px 1px #192534, 0px 6px 36px #000716"
|
|
3137
|
+
},
|
|
3114
3138
|
"shadowDropdown": {
|
|
3115
3139
|
"light": "0px 4px 20px 1px rgba(0, 7, 22, 1)",
|
|
3116
3140
|
"dark": "0px 4px 20px 1px rgba(0, 7, 22, 1)"
|
|
@@ -4014,6 +4038,14 @@ export var preset = {
|
|
|
4014
4038
|
"colorTextTopNavigationTitle": {
|
|
4015
4039
|
"light": "{colorGrey100}",
|
|
4016
4040
|
"dark": "{colorGrey100}"
|
|
4041
|
+
},
|
|
4042
|
+
"colorBoardPlaceholderActive": {
|
|
4043
|
+
"light": "{colorGrey550}",
|
|
4044
|
+
"dark": "{colorGrey550}"
|
|
4045
|
+
},
|
|
4046
|
+
"colorBoardPlaceholderHover": {
|
|
4047
|
+
"light": "{colorBlue600}",
|
|
4048
|
+
"dark": "{colorBlue600}"
|
|
4017
4049
|
}
|
|
4018
4050
|
}
|
|
4019
4051
|
},
|
|
@@ -4876,6 +4908,14 @@ export var preset = {
|
|
|
4876
4908
|
"colorTextTopNavigationTitle": {
|
|
4877
4909
|
"light": "{colorGrey900}",
|
|
4878
4910
|
"dark": "{colorGrey100}"
|
|
4911
|
+
},
|
|
4912
|
+
"colorBoardPlaceholderActive": {
|
|
4913
|
+
"light": "{colorGrey200}",
|
|
4914
|
+
"dark": "{colorGrey550}"
|
|
4915
|
+
},
|
|
4916
|
+
"colorBoardPlaceholderHover": {
|
|
4917
|
+
"light": "{colorBlue200}",
|
|
4918
|
+
"dark": "{colorBlue600}"
|
|
4879
4919
|
}
|
|
4880
4920
|
}
|
|
4881
4921
|
},
|
|
@@ -5738,6 +5778,14 @@ export var preset = {
|
|
|
5738
5778
|
"colorTextTopNavigationTitle": {
|
|
5739
5779
|
"light": "{colorGrey900}",
|
|
5740
5780
|
"dark": "{colorGrey100}"
|
|
5781
|
+
},
|
|
5782
|
+
"colorBoardPlaceholderActive": {
|
|
5783
|
+
"light": "{colorGrey200}",
|
|
5784
|
+
"dark": "{colorGrey550}"
|
|
5785
|
+
},
|
|
5786
|
+
"colorBoardPlaceholderHover": {
|
|
5787
|
+
"light": "{colorBlue200}",
|
|
5788
|
+
"dark": "{colorBlue600}"
|
|
5741
5789
|
}
|
|
5742
5790
|
}
|
|
5743
5791
|
}
|
|
@@ -6111,6 +6159,8 @@ export var preset = {
|
|
|
6111
6159
|
"colorTextStatusSuccess": "color",
|
|
6112
6160
|
"colorTextStatusWarning": "color",
|
|
6113
6161
|
"colorTextTopNavigationTitle": "color",
|
|
6162
|
+
"colorBoardPlaceholderActive": "color",
|
|
6163
|
+
"colorBoardPlaceholderHover": "color",
|
|
6114
6164
|
"motionDurationExtraFast": "motion",
|
|
6115
6165
|
"motionDurationExtraSlow": "motion",
|
|
6116
6166
|
"motionDurationFast": "motion",
|
|
@@ -6247,6 +6297,7 @@ export var preset = {
|
|
|
6247
6297
|
"spaceXxxl": "density",
|
|
6248
6298
|
"shadowContainer": "color",
|
|
6249
6299
|
"shadowContainerStacked": "color",
|
|
6300
|
+
"shadowContainerActive": "color",
|
|
6250
6301
|
"shadowDropdown": "color",
|
|
6251
6302
|
"shadowDropup": "color",
|
|
6252
6303
|
"shadowFlashCollapsed": "color",
|
|
@@ -6657,6 +6708,8 @@ export var preset = {
|
|
|
6657
6708
|
"colorTextStatusInfo",
|
|
6658
6709
|
"colorTextStatusSuccess",
|
|
6659
6710
|
"colorTextStatusWarning",
|
|
6711
|
+
"colorBoardPlaceholderActive",
|
|
6712
|
+
"colorBoardPlaceholderHover",
|
|
6660
6713
|
"fontFamilyBase",
|
|
6661
6714
|
"fontFamilyMonospace",
|
|
6662
6715
|
"borderRadiusAlert",
|
|
@@ -6704,7 +6757,8 @@ export var preset = {
|
|
|
6704
6757
|
"spaceStaticL",
|
|
6705
6758
|
"spaceStaticXl",
|
|
6706
6759
|
"spaceStaticXxl",
|
|
6707
|
-
"spaceStaticXxxl"
|
|
6760
|
+
"spaceStaticXxxl",
|
|
6761
|
+
"shadowContainerActive"
|
|
6708
6762
|
],
|
|
6709
6763
|
"variablesMap": {
|
|
6710
6764
|
"colorAmazonOrange": "color-amazon-orange",
|
|
@@ -7120,6 +7174,8 @@ export var preset = {
|
|
|
7120
7174
|
"colorTextStatusSuccess": "color-text-status-success",
|
|
7121
7175
|
"colorTextStatusWarning": "color-text-status-warning",
|
|
7122
7176
|
"colorTextTopNavigationTitle": "color-text-top-navigation-title",
|
|
7177
|
+
"colorBoardPlaceholderActive": "color-board-placeholder-active",
|
|
7178
|
+
"colorBoardPlaceholderHover": "color-board-placeholder-hover",
|
|
7123
7179
|
"fontBodyMLineHeight": "font-body-m-line-height",
|
|
7124
7180
|
"fontBodyMSize": "font-body-m-size",
|
|
7125
7181
|
"fontBodySLetterSpacing": "font-body-s-letter-spacing",
|
|
@@ -7344,6 +7400,7 @@ export var preset = {
|
|
|
7344
7400
|
"spaceXxxl": "space-xxxl",
|
|
7345
7401
|
"shadowContainer": "shadow-container",
|
|
7346
7402
|
"shadowContainerStacked": "shadow-container-stacked",
|
|
7403
|
+
"shadowContainerActive": "shadow-container-active",
|
|
7347
7404
|
"shadowDropdown": "shadow-dropdown",
|
|
7348
7405
|
"shadowDropup": "shadow-dropup",
|
|
7349
7406
|
"shadowFlashCollapsed": "shadow-flash-collapsed",
|
|
@@ -7771,6 +7828,8 @@ export var preset = {
|
|
|
7771
7828
|
"colorTextStatusSuccess": "--color-text-status-success-0fzhv9",
|
|
7772
7829
|
"colorTextStatusWarning": "--color-text-status-warning-27nlyh",
|
|
7773
7830
|
"colorTextTopNavigationTitle": "--color-text-top-navigation-title-oypxe3",
|
|
7831
|
+
"colorBoardPlaceholderActive": "--color-board-placeholder-active-vaxzdf",
|
|
7832
|
+
"colorBoardPlaceholderHover": "--color-board-placeholder-hover-v1s7kq",
|
|
7774
7833
|
"fontBodyMLineHeight": "--font-body-m-line-height-i7xxvv",
|
|
7775
7834
|
"fontBodyMSize": "--font-body-m-size-sregvd",
|
|
7776
7835
|
"fontBodySLetterSpacing": "--font-body-s-letter-spacing-cy0oxj",
|
|
@@ -7995,6 +8054,7 @@ export var preset = {
|
|
|
7995
8054
|
"spaceXxxl": "--space-xxxl-bo9z7f",
|
|
7996
8055
|
"shadowContainer": "--shadow-container-7nblnj",
|
|
7997
8056
|
"shadowContainerStacked": "--shadow-container-stacked-lumzae",
|
|
8057
|
+
"shadowContainerActive": "--shadow-container-active-l4kuxc",
|
|
7998
8058
|
"shadowDropdown": "--shadow-dropdown-99h0gz",
|
|
7999
8059
|
"shadowDropup": "--shadow-dropup-11esug",
|
|
8000
8060
|
"shadowFlashCollapsed": "--shadow-flash-collapsed-d4s4kz",
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED