@cloudscape-design/components-themeable 3.0.188 → 3.0.190
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/flashbar/collapsible.motion.scss +23 -0
- package/lib/internal/scss/flashbar/collapsible.scss +224 -0
- package/lib/internal/scss/flashbar/motion.scss +1 -2
- package/lib/internal/scss/flashbar/styles.scss +12 -147
- package/lib/internal/template/flashbar/collapsible-flashbar.d.ts +4 -0
- package/lib/internal/template/flashbar/collapsible-flashbar.d.ts.map +1 -0
- package/lib/internal/template/flashbar/collapsible-flashbar.js +209 -0
- package/lib/internal/template/flashbar/collapsible-flashbar.js.map +1 -0
- package/lib/internal/template/flashbar/common.d.ts +19 -0
- package/lib/internal/template/flashbar/common.d.ts.map +1 -0
- package/lib/internal/template/flashbar/common.js +63 -0
- package/lib/internal/template/flashbar/common.js.map +1 -0
- package/lib/internal/template/flashbar/flash.d.ts.map +1 -1
- package/lib/internal/template/flashbar/flash.js +8 -3
- package/lib/internal/template/flashbar/flash.js.map +1 -1
- package/lib/internal/template/flashbar/index.d.ts +2 -2
- package/lib/internal/template/flashbar/index.d.ts.map +1 -1
- package/lib/internal/template/flashbar/index.js +14 -159
- package/lib/internal/template/flashbar/index.js.map +1 -1
- package/lib/internal/template/flashbar/interfaces.d.ts +14 -7
- package/lib/internal/template/flashbar/interfaces.d.ts.map +1 -1
- package/lib/internal/template/flashbar/interfaces.js.map +1 -1
- package/lib/internal/template/flashbar/internal/analytics.d.ts +5 -0
- package/lib/internal/template/flashbar/internal/analytics.d.ts.map +1 -0
- package/lib/internal/template/flashbar/internal/analytics.js +29 -0
- package/lib/internal/template/flashbar/internal/analytics.js.map +1 -0
- package/lib/internal/template/flashbar/non-collapsible-flashbar.d.ts +4 -0
- package/lib/internal/template/flashbar/non-collapsible-flashbar.d.ts.map +1 -0
- package/lib/internal/template/flashbar/non-collapsible-flashbar.js +70 -0
- package/lib/internal/template/flashbar/non-collapsible-flashbar.js.map +1 -0
- package/lib/internal/template/flashbar/styles.css.js +43 -33
- package/lib/internal/template/flashbar/styles.scoped.css +329 -225
- package/lib/internal/template/flashbar/styles.selectors.js +43 -33
- package/lib/internal/template/flashbar/utils.d.ts +17 -0
- package/lib/internal/template/flashbar/utils.d.ts.map +1 -0
- package/lib/internal/template/flashbar/utils.js +95 -0
- package/lib/internal/template/flashbar/utils.js.map +1 -0
- package/lib/internal/template/internal/animate.d.ts +11 -0
- package/lib/internal/template/internal/animate.d.ts.map +1 -0
- package/lib/internal/template/internal/animate.js +104 -0
- package/lib/internal/template/internal/animate.js.map +1 -0
- package/lib/internal/template/internal/base-component/styles.scoped.css +25 -0
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/generated/styles/tokens.d.ts +4 -1
- package/lib/internal/template/internal/generated/styles/tokens.js +4 -1
- package/lib/internal/template/internal/generated/theming/index.cjs +72 -1
- package/lib/internal/template/internal/generated/theming/index.js +72 -1
- package/package.json +1 -1
|
@@ -0,0 +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"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { FlashbarProps } from './interfaces';
|
|
2
|
+
export declare const componentName = "Flashbar";
|
|
3
|
+
export declare function useFlashbar({ items, onItemsAdded, onItemsChanged, onItemsRemoved, ...restProps }: FlashbarProps & {
|
|
4
|
+
onItemsAdded?: (items: FlashbarProps.MessageDefinition[]) => void;
|
|
5
|
+
onItemsRemoved?: (items: FlashbarProps.MessageDefinition[]) => void;
|
|
6
|
+
onItemsChanged?: (options?: {
|
|
7
|
+
allItemsHaveId?: boolean;
|
|
8
|
+
isReducedMotion?: boolean;
|
|
9
|
+
}) => void;
|
|
10
|
+
}): {
|
|
11
|
+
allItemsHaveId: boolean;
|
|
12
|
+
baseProps: import("../internal/base-component").BaseComponentProps;
|
|
13
|
+
breakpoint: "default" | "xs" | null;
|
|
14
|
+
isReducedMotion: boolean;
|
|
15
|
+
isVisualRefresh: boolean;
|
|
16
|
+
mergedRef: ((instance: any) => void) | null;
|
|
17
|
+
ref: import("react").MutableRefObject<HTMLDivElement | null>;
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=common.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/flashbar/common.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,eAAO,MAAM,aAAa,aAAa,CAAC;AAGxC,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,GAAG,SAAS,EACb,EAAE,aAAa,GAAG;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACpE,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9F;;;;;;;;EA0CA"}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
+
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
5
|
+
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
6
|
+
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
7
|
+
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
8
|
+
import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
9
|
+
import { getBaseProps } from '../internal/base-component';
|
|
10
|
+
import { focusFlashById } from './flash';
|
|
11
|
+
export var componentName = 'Flashbar';
|
|
12
|
+
// Common logic for collapsible and non-collapsible Flashbar
|
|
13
|
+
export function useFlashbar(_a) {
|
|
14
|
+
var items = _a.items, onItemsAdded = _a.onItemsAdded, onItemsChanged = _a.onItemsChanged, onItemsRemoved = _a.onItemsRemoved, restProps = __rest(_a, ["items", "onItemsAdded", "onItemsChanged", "onItemsRemoved"]);
|
|
15
|
+
var __internalRootRef = useBaseComponent(componentName).__internalRootRef;
|
|
16
|
+
var allItemsHaveId = useMemo(function () { return items.every(function (item) { return 'id' in item; }); }, [items]);
|
|
17
|
+
var baseProps = getBaseProps(restProps);
|
|
18
|
+
var ref = useRef(null);
|
|
19
|
+
var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], breakpointRef = _b[1];
|
|
20
|
+
var mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);
|
|
21
|
+
var isReducedMotion = useReducedMotion(breakpointRef);
|
|
22
|
+
var isVisualRefresh = useVisualRefresh();
|
|
23
|
+
var _c = useState(items), previousItems = _c[0], setPreviousItems = _c[1];
|
|
24
|
+
var _d = useState(null), nextFocusId = _d[0], setNextFocusId = _d[1];
|
|
25
|
+
// Track new or removed item IDs in state to only trigger focus changes for newly added items.
|
|
26
|
+
// https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
|
|
27
|
+
if (items) {
|
|
28
|
+
var newItems = items.filter(function (_a) {
|
|
29
|
+
var id = _a.id;
|
|
30
|
+
return id && !previousItems.some(function (item) { return item.id === id; });
|
|
31
|
+
});
|
|
32
|
+
var removedItems = previousItems.filter(function (_a) {
|
|
33
|
+
var id = _a.id;
|
|
34
|
+
return id && !items.some(function (item) { return item.id === id; });
|
|
35
|
+
});
|
|
36
|
+
if (newItems.length > 0 || removedItems.length > 0) {
|
|
37
|
+
setPreviousItems(items);
|
|
38
|
+
if (onItemsAdded) {
|
|
39
|
+
onItemsAdded(newItems);
|
|
40
|
+
}
|
|
41
|
+
if (onItemsRemoved) {
|
|
42
|
+
onItemsRemoved(removedItems);
|
|
43
|
+
}
|
|
44
|
+
var newFocusItems = newItems.filter(function (_a) {
|
|
45
|
+
var ariaRole = _a.ariaRole;
|
|
46
|
+
return ariaRole === 'alert';
|
|
47
|
+
});
|
|
48
|
+
if (newFocusItems.length > 0) {
|
|
49
|
+
setNextFocusId(newFocusItems[0].id);
|
|
50
|
+
}
|
|
51
|
+
if (onItemsChanged) {
|
|
52
|
+
onItemsChanged({ allItemsHaveId: allItemsHaveId, isReducedMotion: isReducedMotion });
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
useEffect(function () {
|
|
57
|
+
if (nextFocusId) {
|
|
58
|
+
focusFlashById(ref.current, nextFocusId);
|
|
59
|
+
}
|
|
60
|
+
}, [nextFocusId, ref]);
|
|
61
|
+
return { allItemsHaveId: allItemsHaveId, baseProps: baseProps, breakpoint: breakpoint, isReducedMotion: isReducedMotion, isVisualRefresh: isVisualRefresh, mergedRef: mergedRef, ref: ref };
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=common.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"common.js","sourceRoot":"","sources":["../../../src/flashbar/common.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 useBaseComponent from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { getBaseProps } from '../internal/base-component';\nimport { FlashbarProps } from './interfaces';\nimport { focusFlashById } from './flash';\n\nexport const componentName = 'Flashbar';\n\n// Common logic for collapsible and non-collapsible Flashbar\nexport function useFlashbar({\n items,\n onItemsAdded,\n onItemsChanged,\n onItemsRemoved,\n ...restProps\n}: FlashbarProps & {\n onItemsAdded?: (items: FlashbarProps.MessageDefinition[]) => void;\n onItemsRemoved?: (items: FlashbarProps.MessageDefinition[]) => void;\n onItemsChanged?: (options?: { allItemsHaveId?: boolean; isReducedMotion?: boolean }) => void;\n}) {\n const { __internalRootRef } = useBaseComponent(componentName);\n const allItemsHaveId = useMemo(() => items.every(item => 'id' in item), [items]);\n const baseProps = getBaseProps(restProps);\n const ref = useRef<HTMLDivElement | null>(null);\n const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n const mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);\n const isReducedMotion = useReducedMotion(breakpointRef as any);\n const isVisualRefresh = useVisualRefresh();\n const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);\n const [nextFocusId, setNextFocusId] = useState<string | null>(null);\n\n // Track new or removed item IDs in state to only trigger focus changes for newly added items.\n // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops\n if (items) {\n const newItems = items.filter(({ id }) => id && !previousItems.some(item => item.id === id));\n const removedItems = previousItems.filter(({ id }) => id && !items.some(item => item.id === id));\n if (newItems.length > 0 || removedItems.length > 0) {\n setPreviousItems(items);\n if (onItemsAdded) {\n onItemsAdded(newItems);\n }\n if (onItemsRemoved) {\n onItemsRemoved(removedItems);\n }\n const newFocusItems = newItems.filter(({ ariaRole }) => ariaRole === 'alert');\n if (newFocusItems.length > 0) {\n setNextFocusId(newFocusItems[0].id!);\n }\n if (onItemsChanged) {\n onItemsChanged({ allItemsHaveId, isReducedMotion });\n }\n }\n }\n\n useEffect(() => {\n if (nextFocusId) {\n focusFlashById(ref.current, nextFocusId);\n }\n }, [nextFocusId, ref]);\n\n return { allItemsHaveId, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef, ref };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flash.d.ts","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"flash.d.ts","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AAqD1B,eAAO,MAAM,cAAc,mEACf,WAAW,GAAG,IAAI,UAAU,MAAM,UAM7C,CAAC;AAEF,MAAM,WAAW,UAAW,SAAQ,aAAa,CAAC,iBAAiB;IACjE,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,mFAiGjB,CAAC"}
|
|
@@ -10,7 +10,8 @@ import { isDevelopment } from '../internal/is-development';
|
|
|
10
10
|
import { throttle } from '../internal/utils/throttle';
|
|
11
11
|
import useFocusVisible from '../internal/hooks/focus-visible';
|
|
12
12
|
import LiveRegion from '../internal/components/live-region';
|
|
13
|
-
|
|
13
|
+
import { sendDismissMetric } from './internal/analytics';
|
|
14
|
+
import { FOCUS_THROTTLE_DELAY } from './utils';
|
|
14
15
|
var ICON_TYPES = {
|
|
15
16
|
success: 'status-positive',
|
|
16
17
|
warning: 'status-warning',
|
|
@@ -46,6 +47,10 @@ export var Flash = React.forwardRef(function (_a, ref) {
|
|
|
46
47
|
var icon = loading ? React.createElement(InternalSpinner, null) : React.createElement(InternalIcon, { name: iconType });
|
|
47
48
|
var effectiveType = loading ? 'info' : type;
|
|
48
49
|
var announcement = [statusIconAriaLabel, header, content].filter(Boolean).join(' ');
|
|
50
|
+
var handleDismiss = function (event) {
|
|
51
|
+
sendDismissMetric(effectiveType);
|
|
52
|
+
onDismiss && onDismiss(event);
|
|
53
|
+
};
|
|
49
54
|
return (
|
|
50
55
|
// We're not using "polite" or "assertive" here, just turning default behavior off.
|
|
51
56
|
// eslint-disable-next-line @cloudscape-design/prefer-live-region
|
|
@@ -58,13 +63,13 @@ export var Flash = React.forwardRef(function (_a, ref) {
|
|
|
58
63
|
_b[styles.exited] = transitionState === 'exited',
|
|
59
64
|
_b)) },
|
|
60
65
|
React.createElement("div", { className: styles['flash-body'] },
|
|
61
|
-
React.createElement("div", __assign({}, focusVisible, { className: styles['flash-focus-container'], tabIndex:
|
|
66
|
+
React.createElement("div", __assign({}, focusVisible, { className: styles['flash-focus-container'], tabIndex: -1 }),
|
|
62
67
|
React.createElement("div", { className: clsx(styles['flash-icon'], styles['flash-text']), role: "img", "aria-label": statusIconAriaLabel }, icon),
|
|
63
68
|
React.createElement("div", { className: clsx(styles['flash-message'], styles['flash-text']) },
|
|
64
69
|
React.createElement("div", { className: styles['flash-header'] }, header),
|
|
65
70
|
React.createElement("div", { className: styles['flash-content'] }, content))),
|
|
66
71
|
button && React.createElement("div", { className: styles['action-button-wrapper'] }, button)),
|
|
67
|
-
dismissible && dismissButton(dismissLabel,
|
|
72
|
+
dismissible && dismissButton(dismissLabel, handleDismiss),
|
|
68
73
|
ariaRole === 'status' && React.createElement(LiveRegion, null, announcement)));
|
|
69
74
|
});
|
|
70
75
|
//# sourceMappingURL=flash.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flash.js","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":";AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,MAAM,qBAAqB,CAAC;AAClD,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAC9D,OAAO,UAAU,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"flash.js","sourceRoot":"","sources":["../../../src/flashbar/flash.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 { FlashbarProps } from './interfaces';\nimport React from 'react';\nimport InternalSpinner from '../spinner/internal';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { warnOnce } from '../internal/logging';\nimport { isDevelopment } from '../internal/is-development';\nimport { throttle } from '../internal/utils/throttle';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport LiveRegion from '../internal/components/live-region';\nimport { ButtonProps } from '../button/interfaces';\n\nimport { sendDismissMetric } from './internal/analytics';\n\nimport { FOCUS_THROTTLE_DELAY } from './utils';\n\nconst ICON_TYPES = {\n success: 'status-positive',\n warning: 'status-warning',\n info: 'status-info',\n error: 'status-negative',\n} as const;\n\nfunction actionButton(\n buttonText: FlashbarProps.MessageDefinition['buttonText'],\n onButtonClick: FlashbarProps.MessageDefinition['onButtonClick']\n) {\n return (\n <InternalButton onClick={onButtonClick} className={styles['action-button']} formAction=\"none\">\n {buttonText}\n </InternalButton>\n );\n}\n\nfunction dismissButton(\n dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],\n onDismiss: FlashbarProps.MessageDefinition['onDismiss']\n) {\n return (\n <div className={styles['dismiss-button-wrapper']}>\n <InternalButton\n onClick={onDismiss}\n className={styles['dismiss-button']}\n variant=\"flashbar-icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={dismissLabel}\n />\n </div>\n );\n}\n\nexport const focusFlashById = throttle(\n (element: HTMLElement | null, itemId: string) => {\n const selector = `[data-itemid=\"${CSS.escape(itemId)}\"] .${styles['flash-focus-container']}`;\n element?.querySelector<HTMLElement>(selector)?.focus();\n },\n FOCUS_THROTTLE_DELAY,\n { trailing: false }\n);\n\nexport interface FlashProps extends FlashbarProps.MessageDefinition {\n className: string;\n transitionState?: string;\n}\n\nexport const Flash = React.forwardRef(\n (\n {\n id,\n header,\n content,\n dismissible,\n dismissLabel,\n statusIconAriaLabel,\n loading,\n action,\n buttonText,\n onButtonClick,\n onDismiss,\n className,\n transitionState,\n ariaRole,\n type = 'info',\n }: FlashProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const focusVisible = useFocusVisible();\n\n if (isDevelopment) {\n if (buttonText && !onButtonClick) {\n warnOnce(\n 'Flashbar',\n `You provided a \\`buttonText\\` prop without an \\`onButtonClick\\` handler. This will render a non-interactive action button.`\n );\n }\n\n if (dismissible && !onDismiss) {\n warnOnce(\n 'Flashbar',\n `You have set the \\`dismissible\\` prop without an \\`onDismiss\\` handler. This will render a non-interactive dismiss button.`\n );\n }\n }\n\n const button = action || (buttonText && actionButton(buttonText, onButtonClick));\n\n const iconType = ICON_TYPES[type];\n\n const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;\n\n const effectiveType = loading ? 'info' : type;\n\n const announcement = [statusIconAriaLabel, header, content].filter(Boolean).join(' ');\n\n const handleDismiss: ButtonProps['onClick'] = event => {\n sendDismissMetric(effectiveType);\n onDismiss && onDismiss(event);\n };\n\n return (\n // We're not using \"polite\" or \"assertive\" here, just turning default behavior off.\n // eslint-disable-next-line @cloudscape-design/prefer-live-region\n <div\n ref={ref}\n role={ariaRole}\n aria-live={ariaRole ? 'off' : undefined}\n data-itemid={id}\n className={clsx(\n styles.flash,\n styles[`flash-type-${effectiveType}`],\n className,\n transitionState && {\n [styles.enter]: transitionState === 'enter',\n [styles.entering]: transitionState === 'entering',\n [styles.entered]: transitionState === 'entered',\n [styles.exit]: transitionState === 'exit',\n [styles.exiting]: transitionState === 'exiting',\n [styles.exited]: transitionState === 'exited',\n }\n )}\n >\n <div className={styles['flash-body']}>\n <div {...focusVisible} className={styles['flash-focus-container']} tabIndex={-1}>\n <div\n className={clsx(styles['flash-icon'], styles['flash-text'])}\n role=\"img\"\n aria-label={statusIconAriaLabel}\n >\n {icon}\n </div>\n <div className={clsx(styles['flash-message'], styles['flash-text'])}>\n <div className={styles['flash-header']}>{header}</div>\n <div className={styles['flash-content']}>{content}</div>\n </div>\n </div>\n {button && <div className={styles['action-button-wrapper']}>{button}</div>}\n </div>\n {dismissible && dismissButton(dismissLabel, handleDismiss)}\n {ariaRole === 'status' && <LiveRegion>{announcement}</LiveRegion>}\n </div>\n );\n }\n);\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FlashbarProps } from './interfaces';
|
|
1
|
+
import { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';
|
|
2
2
|
export { FlashbarProps };
|
|
3
|
-
export default function Flashbar(
|
|
3
|
+
export default function Flashbar(props: FlashbarProps | CollapsibleFlashbarProps): JSX.Element;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAMvE,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,wBAAwB,eAY/E"}
|
|
@@ -1,171 +1,26 @@
|
|
|
1
|
-
import { __assign
|
|
1
|
+
import { __assign } from "tslib";
|
|
2
2
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
3
3
|
// SPDX-License-Identifier: Apache-2.0
|
|
4
|
-
import
|
|
5
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import React, { useEffect } from 'react';
|
|
6
5
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import {
|
|
10
|
-
|
|
11
|
-
import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
|
|
12
|
-
import { TransitionGroup } from 'react-transition-group';
|
|
13
|
-
import { Transition } from '../internal/components/transition';
|
|
14
|
-
import useBaseComponent from '../internal/hooks/use-base-component';
|
|
15
|
-
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
16
|
-
import useFocusVisible from '../internal/hooks/focus-visible';
|
|
17
|
-
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
18
|
-
import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
19
|
-
import { getVisualContextClassname } from '../internal/components/visual-context';
|
|
20
|
-
import styles from './styles.css.js';
|
|
21
|
-
export default function Flashbar(_a) {
|
|
22
|
-
var items = _a.items, restProps = __rest(_a, ["items"]);
|
|
23
|
-
var __internalRootRef = useBaseComponent('Flashbar').__internalRootRef;
|
|
24
|
-
var baseProps = getBaseProps(restProps);
|
|
25
|
-
var ref = useRef(null);
|
|
26
|
-
var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], breakpointRef = _b[1];
|
|
27
|
-
var mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);
|
|
28
|
-
var isFocusVisible = useFocusVisible();
|
|
29
|
-
var isVisualRefresh = useVisualRefresh();
|
|
30
|
-
var _c = useState(items), previousItems = _c[0], setPreviousItems = _c[1];
|
|
31
|
-
var _d = useState(null), nextFocusId = _d[0], setNextFocusId = _d[1];
|
|
32
|
-
// Track new or removed item IDs in state to only trigger focus changes for newly added items.
|
|
33
|
-
// https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
|
|
34
|
-
if (items) {
|
|
35
|
-
var newItems = items.filter(function (_a) {
|
|
36
|
-
var id = _a.id;
|
|
37
|
-
return id && !previousItems.some(function (item) { return item.id === id; });
|
|
38
|
-
});
|
|
39
|
-
var removedItems = previousItems.filter(function (_a) {
|
|
40
|
-
var id = _a.id;
|
|
41
|
-
return id && !items.some(function (item) { return item.id === id; });
|
|
42
|
-
});
|
|
43
|
-
if (newItems.length > 0 || removedItems.length > 0) {
|
|
44
|
-
setPreviousItems(items);
|
|
45
|
-
var newFocusItems = newItems.filter(function (_a) {
|
|
46
|
-
var ariaRole = _a.ariaRole;
|
|
47
|
-
return ariaRole === 'alert';
|
|
48
|
-
});
|
|
49
|
-
if (newFocusItems.length > 0) {
|
|
50
|
-
setNextFocusId(newFocusItems[0].id);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
}
|
|
6
|
+
import CollapsibleFlashbar from './collapsible-flashbar';
|
|
7
|
+
import NonCollapsibleFlashbar from './non-collapsible-flashbar';
|
|
8
|
+
import { sendRenderMetric } from './internal/analytics';
|
|
9
|
+
export default function Flashbar(props) {
|
|
54
10
|
useEffect(function () {
|
|
55
|
-
if (
|
|
56
|
-
|
|
57
|
-
}
|
|
58
|
-
}, [nextFocusId]);
|
|
59
|
-
/**
|
|
60
|
-
* All the flash items should have ids so we can identify which DOM element is being
|
|
61
|
-
* removed from the DOM to animate it. Motion will be disabled if any of the provided
|
|
62
|
-
* flash messages does not contain an `id`.
|
|
63
|
-
*/
|
|
64
|
-
var motionDisabled = useReducedMotion(breakpointRef) || !isVisualRefresh || (items && !items.every(function (item) { return 'id' in item; }));
|
|
65
|
-
/**
|
|
66
|
-
* The `stackItems` property is a hidden boolean that allows for teams
|
|
67
|
-
* to beta test the flashbar stacking feature.
|
|
68
|
-
*/
|
|
69
|
-
var stackItems = isStackedFlashbar(restProps);
|
|
70
|
-
var ariaLabels = stackItems ? restProps.ariaLabels : {};
|
|
71
|
-
var isFlashbarStacked = stackItems && (items === null || items === void 0 ? void 0 : items.length) > 3;
|
|
72
|
-
var _e = useState(false), isFlashbarStackExpanded = _e[0], setIsFlashbarStackExpanded = _e[1];
|
|
73
|
-
/**
|
|
74
|
-
* Compute the appropriate aria label for the stacked notifications toggle button
|
|
75
|
-
* based on the expanded/collapsed state of the stack and the presence of
|
|
76
|
-
* corresponding aria label properties.
|
|
77
|
-
*/
|
|
78
|
-
function getStackButtonAriaLabel() {
|
|
79
|
-
var _a, _b;
|
|
80
|
-
var stackButtonAriaLabel;
|
|
81
|
-
if (isFlashbarStackExpanded) {
|
|
82
|
-
stackButtonAriaLabel = (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.stackCollapseLabel) !== null && _a !== void 0 ? _a : 'Collapse stacked notifications';
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
stackButtonAriaLabel = (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.stackExpandLabel) !== null && _b !== void 0 ? _b : 'Expand stacked notifications';
|
|
86
|
-
}
|
|
87
|
-
return stackButtonAriaLabel;
|
|
88
|
-
}
|
|
89
|
-
/**
|
|
90
|
-
* If the `isFlashbarStacked` is true (which is only possible if `stackItems` is true)
|
|
91
|
-
* then the first item should be rendered followed by two dummy items that visually indicate
|
|
92
|
-
* two, three, or more items exist in the stack.
|
|
93
|
-
*/
|
|
94
|
-
function renderStackedItems() {
|
|
95
|
-
var _a;
|
|
96
|
-
if (!isFlashbarStacked) {
|
|
97
|
-
return;
|
|
98
|
-
}
|
|
99
|
-
var stackDepth = Math.min(3, items.length);
|
|
100
|
-
var stackedItems = items.slice(0, stackDepth);
|
|
101
|
-
return (React.createElement("div", { className: styles.stack, style: (_a = {}, _a[customCssProps.flashbarStackDepth] = stackDepth, _a) },
|
|
102
|
-
!isFlashbarStackExpanded && (React.createElement("div", { className: clsx(styles.collapsed, isVisualRefresh && styles['visual-refresh']) }, stackedItems.map(function (item, index) {
|
|
103
|
-
var _a;
|
|
104
|
-
var _b, _c;
|
|
105
|
-
return (React.createElement("div", { className: styles.item, style: (_a = {}, _a[customCssProps.flashbarStackIndex] = index, _a), key: index },
|
|
106
|
-
index === 0 && (React.createElement("ul", { className: styles['flash-list'] },
|
|
107
|
-
React.createElement("li", { className: styles['flash-list-item'] }, renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index)))),
|
|
108
|
-
index > 0 && React.createElement("div", { className: clsx(styles.flash, styles["flash-type-".concat((_c = item.type) !== null && _c !== void 0 ? _c : 'info')]) })));
|
|
109
|
-
}))),
|
|
110
|
-
isFlashbarStackExpanded && (React.createElement("ul", { className: clsx(styles['flash-list'], styles.expanded) }, items.map(function (item, index) {
|
|
111
|
-
var _a, _b;
|
|
112
|
-
return (React.createElement("li", { key: (_a = item.id) !== null && _a !== void 0 ? _a : index, className: styles['flash-list-item'] }, renderItem(item, (_b = item.id) !== null && _b !== void 0 ? _b : index)));
|
|
113
|
-
}))),
|
|
114
|
-
React.createElement("button", __assign({ "aria-label": getStackButtonAriaLabel(), className: clsx(styles.toggle, isVisualRefresh && styles['visual-refresh']), onClick: function () { return setIsFlashbarStackExpanded(!isFlashbarStackExpanded); } }, isFocusVisible),
|
|
115
|
-
React.createElement("span", { className: clsx(styles.icon, isFlashbarStackExpanded && styles.expanded) },
|
|
116
|
-
React.createElement(InternalIcon, { size: "small", name: "angle-down" })))));
|
|
117
|
-
}
|
|
118
|
-
/**
|
|
119
|
-
* If the flashbar is flat and motion is `enabled` then the adding and removing of items
|
|
120
|
-
* from the flashbar will render with visual transitions.
|
|
121
|
-
*/
|
|
122
|
-
function renderFlatItemsWithTransitions() {
|
|
123
|
-
if (isFlashbarStacked || motionDisabled || !items) {
|
|
124
|
-
return;
|
|
125
|
-
}
|
|
126
|
-
return (
|
|
127
|
-
// This is a proxy for <ul>, so we're not applying a class to another actual component.
|
|
128
|
-
// eslint-disable-next-line react/forbid-component-props
|
|
129
|
-
React.createElement(TransitionGroup, { component: "ul", className: styles['flash-list'] }, items &&
|
|
130
|
-
items.map(function (item, index) {
|
|
131
|
-
var _a;
|
|
132
|
-
return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, "in": true }, function (state, transitionRootElement) {
|
|
133
|
-
var _a;
|
|
134
|
-
return (React.createElement("li", { className: styles['flash-list-item'] }, renderItem(item, (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionRootElement, state)));
|
|
135
|
-
}));
|
|
136
|
-
})));
|
|
137
|
-
}
|
|
138
|
-
/**
|
|
139
|
-
* If the flashbar is flat and motion is `disabled` then the adding and removing of items
|
|
140
|
-
* from the flashbar will render without visual transitions.
|
|
141
|
-
*/
|
|
142
|
-
function renderFlatItemsWithoutTransitions() {
|
|
143
|
-
if (isFlashbarStacked || !motionDisabled || !items) {
|
|
144
|
-
return;
|
|
11
|
+
if (props.items.length > 0) {
|
|
12
|
+
sendRenderMetric(props.items);
|
|
145
13
|
}
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
})));
|
|
14
|
+
}, [props.items]);
|
|
15
|
+
if (isStackedFlashbar(props)) {
|
|
16
|
+
return React.createElement(CollapsibleFlashbar, __assign({}, props));
|
|
150
17
|
}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
* by the stacking, motion, and non-motion item group render functions.
|
|
154
|
-
*/
|
|
155
|
-
function renderItem(item, key, transitionRootElement, transitionState) {
|
|
156
|
-
return (React.createElement(Flash
|
|
157
|
-
// eslint-disable-next-line react/forbid-component-props
|
|
158
|
-
, __assign({
|
|
159
|
-
// eslint-disable-next-line react/forbid-component-props
|
|
160
|
-
className: clsx(getVisualContextClassname('flashbar'), isVisualRefresh ? styles['flash-refresh'] : ''), key: key, ref: transitionRootElement, transitionState: transitionState }, item)));
|
|
18
|
+
else {
|
|
19
|
+
return React.createElement(NonCollapsibleFlashbar, __assign({}, props));
|
|
161
20
|
}
|
|
162
|
-
return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)]), ref: mergedRef }),
|
|
163
|
-
renderStackedItems(),
|
|
164
|
-
renderFlatItemsWithTransitions(),
|
|
165
|
-
renderFlatItemsWithoutTransitions()));
|
|
166
21
|
}
|
|
167
22
|
function isStackedFlashbar(props) {
|
|
168
|
-
return 'stackItems' in props &&
|
|
23
|
+
return 'stackItems' in props && props.stackItems;
|
|
169
24
|
}
|
|
170
25
|
applyDisplayName(Flashbar, 'Flashbar');
|
|
171
26
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps, StackedFlashbarProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalIcon from '../icon/internal';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\n\nimport styles from './styles.css.js';\n\nexport { FlashbarProps };\n\nexport default function Flashbar({ items, ...restProps }: FlashbarProps) {\n const { __internalRootRef } = useBaseComponent('Flashbar');\n const baseProps = getBaseProps(restProps);\n\n const ref = useRef<HTMLDivElement | null>(null);\n const [breakpoint, breakpointRef] = useContainerBreakpoints(['xs']);\n const mergedRef = useMergeRefs(ref, breakpointRef, __internalRootRef);\n\n const isFocusVisible = useFocusVisible();\n const isVisualRefresh = useVisualRefresh();\n\n const [previousItems, setPreviousItems] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>(items);\n const [nextFocusId, setNextFocusId] = useState<string | null>(null);\n\n // Track new or removed item IDs in state to only trigger focus changes for newly added items.\n // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops\n if (items) {\n const newItems = items.filter(({ id }) => id && !previousItems.some(item => item.id === id));\n const removedItems = previousItems.filter(({ id }) => id && !items.some(item => item.id === id));\n if (newItems.length > 0 || removedItems.length > 0) {\n setPreviousItems(items);\n const newFocusItems = newItems.filter(({ ariaRole }) => ariaRole === 'alert');\n if (newFocusItems.length > 0) {\n setNextFocusId(newFocusItems[0].id!);\n }\n }\n }\n\n useEffect(() => {\n if (nextFocusId) {\n focusFlashById(ref.current, nextFocusId);\n }\n }, [nextFocusId]);\n\n /**\n * All the flash items should have ids so we can identify which DOM element is being\n * removed from the DOM to animate it. Motion will be disabled if any of the provided\n * flash messages does not contain an `id`.\n */\n const motionDisabled =\n useReducedMotion(breakpointRef as any) || !isVisualRefresh || (items && !items.every(item => 'id' in item));\n\n /**\n * The `stackItems` property is a hidden boolean that allows for teams\n * to beta test the flashbar stacking feature.\n */\n const stackItems = isStackedFlashbar(restProps);\n const ariaLabels = stackItems ? restProps.ariaLabels : {};\n const isFlashbarStacked = stackItems && items?.length > 3;\n const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);\n\n /**\n * Compute the appropriate aria label for the stacked notifications toggle button\n * based on the expanded/collapsed state of the stack and the presence of\n * corresponding aria label properties.\n */\n function getStackButtonAriaLabel() {\n let stackButtonAriaLabel;\n\n if (isFlashbarStackExpanded) {\n stackButtonAriaLabel = ariaLabels?.stackCollapseLabel ?? 'Collapse stacked notifications';\n } else {\n stackButtonAriaLabel = ariaLabels?.stackExpandLabel ?? 'Expand stacked notifications';\n }\n\n return stackButtonAriaLabel;\n }\n\n /**\n * If the `isFlashbarStacked` is true (which is only possible if `stackItems` is true)\n * then the first item should be rendered followed by two dummy items that visually indicate\n * two, three, or more items exist in the stack.\n */\n function renderStackedItems() {\n if (!isFlashbarStacked) {\n return;\n }\n\n const stackDepth = Math.min(3, items.length);\n const stackedItems = items.slice(0, stackDepth);\n\n return (\n <div className={styles.stack} style={{ [customCssProps.flashbarStackDepth]: stackDepth }}>\n {!isFlashbarStackExpanded && (\n <div className={clsx(styles.collapsed, isVisualRefresh && styles['visual-refresh'])}>\n {stackedItems.map((item, index) => (\n <div className={styles.item} style={{ [customCssProps.flashbarStackIndex]: index }} key={index}>\n {index === 0 && (\n <ul className={styles['flash-list']}>\n <li className={styles['flash-list-item']}>{renderItem(item, item.id ?? index)}</li>\n </ul>\n )}\n {index > 0 && <div className={clsx(styles.flash, styles[`flash-type-${item.type ?? 'info'}`])} />}\n </div>\n ))}\n </div>\n )}\n\n {isFlashbarStackExpanded && (\n <ul className={clsx(styles['flash-list'], styles.expanded)}>\n {items.map((item, index) => (\n <li key={item.id ?? index} className={styles['flash-list-item']}>\n {renderItem(item, item.id ?? index)}\n </li>\n ))}\n </ul>\n )}\n\n <button\n aria-label={getStackButtonAriaLabel()}\n className={clsx(styles.toggle, isVisualRefresh && styles['visual-refresh'])}\n onClick={() => setIsFlashbarStackExpanded(!isFlashbarStackExpanded)}\n {...isFocusVisible}\n >\n <span className={clsx(styles.icon, isFlashbarStackExpanded && styles.expanded)}>\n <InternalIcon size=\"small\" name=\"angle-down\" />\n </span>\n </button>\n </div>\n );\n }\n\n /**\n * If the flashbar is flat and motion is `enabled` then the adding and removing of items\n * from the flashbar will render with visual transitions.\n */\n function renderFlatItemsWithTransitions() {\n if (isFlashbarStacked || motionDisabled || !items) {\n return;\n }\n\n return (\n // This is a proxy for <ul>, so we're not applying a class to another actual component.\n // eslint-disable-next-line react/forbid-component-props\n <TransitionGroup component=\"ul\" className={styles['flash-list']}>\n {items &&\n items.map((item, index) => (\n <Transition\n transitionChangeDelay={{ entering: TIMEOUT_FOR_ENTERING_ANIMATION }}\n key={item.id ?? index}\n in={true}\n >\n {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n <li className={styles['flash-list-item']}>\n {renderItem(item, item.id ?? index, transitionRootElement, state)}\n </li>\n )}\n </Transition>\n ))}\n </TransitionGroup>\n );\n }\n\n /**\n * If the flashbar is flat and motion is `disabled` then the adding and removing of items\n * from the flashbar will render without visual transitions.\n */\n function renderFlatItemsWithoutTransitions() {\n if (isFlashbarStacked || !motionDisabled || !items) {\n return;\n }\n\n return (\n <ul className={styles['flash-list']}>\n {items.map((item, index) => (\n <li key={item.id ?? index} className={styles['flash-list-item']}>\n {renderItem(item, item.id ?? index)}\n </li>\n ))}\n </ul>\n );\n }\n\n /**\n * This is a shared render function for a single flashbar item to be used\n * by the stacking, motion, and non-motion item group render functions.\n */\n function renderItem(\n item: FlashbarProps.MessageDefinition,\n key: string | number,\n transitionRootElement?: React.Ref<HTMLDivElement> | undefined,\n transitionState?: string | undefined\n ) {\n return (\n <Flash\n // eslint-disable-next-line react/forbid-component-props\n className={clsx(getVisualContextClassname('flashbar'), isVisualRefresh ? styles['flash-refresh'] : '')}\n key={key}\n ref={transitionRootElement}\n transitionState={transitionState}\n {...item}\n />\n );\n }\n\n return (\n <div\n {...baseProps}\n className={clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`])}\n ref={mergedRef}\n >\n {renderStackedItems()}\n {renderFlatItemsWithTransitions()}\n {renderFlatItemsWithoutTransitions()}\n </div>\n );\n}\n\nfunction isStackedFlashbar(props: any): props is StackedFlashbarProps {\n return 'stackItems' in props && !!props.stackItems;\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AACzD,OAAO,sBAAsB,MAAM,4BAA4B,CAAC;AAEhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAIxD,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAA+C;IAC9E,SAAS,CAAC;QACR,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YAC1B,gBAAgB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;SAC/B;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;QAC5B,OAAO,oBAAC,mBAAmB,eAAK,KAAK,EAAI,CAAC;KAC3C;SAAM;QACL,OAAO,oBAAC,sBAAsB,eAAK,KAAK,EAAI,CAAC;KAC9C;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,KAAU;IACnC,OAAO,YAAY,IAAI,KAAK,IAAI,KAAK,CAAC,UAAU,CAAC;AACnD,CAAC;AAED,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { FlashbarProps, CollapsibleFlashbarProps } from './interfaces';\nimport CollapsibleFlashbar from './collapsible-flashbar';\nimport NonCollapsibleFlashbar from './non-collapsible-flashbar';\n\nimport { sendRenderMetric } from './internal/analytics';\n\nexport { FlashbarProps };\n\nexport default function Flashbar(props: FlashbarProps | CollapsibleFlashbarProps) {\n useEffect(() => {\n if (props.items.length > 0) {\n sendRenderMetric(props.items);\n }\n }, [props.items]);\n\n if (isStackedFlashbar(props)) {\n return <CollapsibleFlashbar {...props} />;\n } else {\n return <NonCollapsibleFlashbar {...props} />;\n }\n}\n\nfunction isStackedFlashbar(props: any): props is CollapsibleFlashbarProps {\n return 'stackItems' in props && props.stackItems;\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}
|
|
@@ -50,15 +50,22 @@ export interface FlashbarProps extends BaseComponentProps {
|
|
|
50
50
|
*/
|
|
51
51
|
items: ReadonlyArray<FlashbarProps.MessageDefinition>;
|
|
52
52
|
}
|
|
53
|
-
export
|
|
54
|
-
|
|
55
|
-
ariaLabels?: StackedFlashbarProps.AriaLabels;
|
|
53
|
+
export type FlashType = FlashbarProps.Type | 'progress';
|
|
54
|
+
export interface CollapsibleFlashbarProps {
|
|
56
55
|
items: ReadonlyArray<FlashbarProps.MessageDefinition>;
|
|
56
|
+
stackItems: boolean;
|
|
57
|
+
i18nStrings?: CollapsibleFlashbarProps.I18nStrings;
|
|
57
58
|
}
|
|
58
|
-
export declare namespace
|
|
59
|
-
interface
|
|
60
|
-
|
|
61
|
-
|
|
59
|
+
export declare namespace CollapsibleFlashbarProps {
|
|
60
|
+
interface I18nStrings {
|
|
61
|
+
ariaLabel: string;
|
|
62
|
+
toggleButtonAriaLabel: string;
|
|
63
|
+
toggleButtonText: string;
|
|
64
|
+
errorCountAriaLabel?: string;
|
|
65
|
+
warningCountAriaLabel?: string;
|
|
66
|
+
successCountAriaLabel?: string;
|
|
67
|
+
infoCountAriaLabel?: string;
|
|
68
|
+
inProgressCountAriaLabel?: string;
|
|
62
69
|
}
|
|
63
70
|
}
|
|
64
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,
|
|
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;IACpB,WAAW,CAAC,EAAE,wBAAwB,CAAC,WAAW,CAAC;CACpD;AAED,yBAAiB,wBAAwB,CAAC;IACxC,UAAiB,WAAW;QAC1B,SAAS,EAAE,MAAM,CAAC;QAClB,qBAAqB,EAAE,MAAM,CAAC;QAC9B,gBAAgB,EAAE,MAAM,CAAC;QACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;KACnC;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 interface
|
|
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 toggleButtonAriaLabel: string;\n toggleButtonText: string;\n errorCountAriaLabel?: string;\n warningCountAriaLabel?: string;\n successCountAriaLabel?: string;\n infoCountAriaLabel?: string;\n inProgressCountAriaLabel?: string;\n }\n}\n"]}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { FlashbarProps } from '../interfaces';
|
|
2
|
+
export declare const sendRenderMetric: (items: FlashbarProps['items']) => void;
|
|
3
|
+
export declare const sendToggleMetric: (itemsCount: number, expanded: boolean) => void;
|
|
4
|
+
export declare const sendDismissMetric: (itemType: string) => void;
|
|
5
|
+
//# sourceMappingURL=analytics.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"analytics.d.ts","sourceRoot":"","sources":["../../../../src/flashbar/internal/analytics.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,eAAO,MAAM,gBAAgB,UAAW,aAAa,CAAC,OAAO,CAAC,SAS7D,CAAC;AAEF,eAAO,MAAM,gBAAgB,eAAgB,MAAM,YAAY,OAAO,SAMrE,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,MAAM,SAMjD,CAAC"}
|