@cloudscape-design/components 3.0.1140 → 3.0.1141
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/alert/interfaces.d.ts +13 -0
- package/alert/interfaces.d.ts.map +1 -1
- package/alert/interfaces.js.map +1 -1
- package/alert/internal.d.ts.map +1 -1
- package/alert/internal.js +35 -3
- package/alert/internal.js.map +1 -1
- package/flashbar/collapsible-flashbar.d.ts.map +1 -1
- package/flashbar/collapsible-flashbar.js +14 -13
- package/flashbar/collapsible-flashbar.js.map +1 -1
- package/flashbar/common.d.ts +3 -2
- package/flashbar/common.d.ts.map +1 -1
- package/flashbar/common.js +67 -1
- package/flashbar/common.js.map +1 -1
- package/flashbar/flash.d.ts.map +1 -1
- package/flashbar/flash.js +4 -4
- package/flashbar/flash.js.map +1 -1
- package/flashbar/interfaces.d.ts +8 -0
- package/flashbar/interfaces.d.ts.map +1 -1
- package/flashbar/interfaces.js.map +1 -1
- package/flashbar/non-collapsible-flashbar.d.ts.map +1 -1
- package/flashbar/non-collapsible-flashbar.js +7 -6
- package/flashbar/non-collapsible-flashbar.js.map +1 -1
- package/input/styles.d.ts.map +1 -1
- package/input/styles.js +26 -36
- package/input/styles.js.map +1 -1
- package/internal/base-component/styles.scoped.css +1 -1
- package/internal/environment.js +2 -2
- package/internal/environment.json +2 -2
- package/internal/manifest.json +1 -1
- package/internal/persistence/index.d.ts +14 -0
- package/internal/persistence/index.d.ts.map +1 -0
- package/internal/persistence/index.js +42 -0
- package/internal/persistence/index.js.map +1 -0
- package/package.json +1 -1
- package/text-filter/index.js +10 -17
- package/text-filter/interfaces.d.ts +47 -0
- package/text-filter/interfaces.d.ts.map +1 -1
- package/text-filter/interfaces.js.map +1 -1
- package/text-filter/internal-do-not-use-core.js +25 -0
- package/text-filter/internal.d.ts.map +1 -1
- package/text-filter/internal.js +2 -2
- package/text-filter/internal.js.map +1 -1
- package/text-filter/styles.d.ts +2 -0
- package/text-filter/styles.d.ts.map +1 -0
- package/text-filter/styles.js +44 -0
- package/text-filter/styles.js.map +1 -0
- /package/text-filter/{index.js.map → internal-do-not-use-core.js.map} +0 -0
package/alert/interfaces.d.ts
CHANGED
|
@@ -49,6 +49,10 @@ export declare namespace AlertProps {
|
|
|
49
49
|
};
|
|
50
50
|
};
|
|
51
51
|
}
|
|
52
|
+
interface PersistenceConfig {
|
|
53
|
+
uniqueKey: string;
|
|
54
|
+
crossServicePersistence?: boolean;
|
|
55
|
+
}
|
|
52
56
|
}
|
|
53
57
|
export interface AlertProps extends BaseComponentProps {
|
|
54
58
|
/**
|
|
@@ -124,4 +128,13 @@ export interface AlertProps extends BaseComponentProps {
|
|
|
124
128
|
/**
|
|
125
129
|
* @awsuiSystem core
|
|
126
130
|
*/
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Config to persist dismiss state for dismissable Alert
|
|
134
|
+
* persistenceConfig contains:
|
|
135
|
+
* * `uniqueKey` (string) - This key to store the persistence state, it must be unique across your console.
|
|
136
|
+
* * `crossServicePersistence` (boolean) - (Optional) If true, the persistence state will be shared across AWS services.
|
|
137
|
+
* @awsuiSystem console
|
|
138
|
+
*/
|
|
139
|
+
persistenceConfig?: AlertProps.PersistenceConfig;
|
|
127
140
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAE5D,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,WAAW;QAK1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAK9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAK5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAK9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAK3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B;IAED,UAAiB,iBAAiB;QAChC,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;IAED,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;QACF,IAAI,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,MAAM,CAAC;SAChB,CAAC;QACF,aAAa,CAAC,EAAE;YACd,KAAK,CAAC,EAAE;gBACN,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;KACH;CACF;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IAEvB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;IACjD;;OAEG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"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"}
|
package/alert/interfaces.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n export type Type = 'success' | 'error' | 'warning' | 'info';\n\n export interface Ref {\n /**\n * Sets focus on the alert content.\n */\n focus(): void;\n }\n\n export interface I18nStrings {\n /*\n * Specifies the ARIA label for the alert icon for type `success`.\n * @property {string} [successIconAriaLabel] - optional\n */\n successIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `error`.\n * @property {string} [errorIconAriaLabel] - optional\n */\n errorIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `warning`.\n * @property {string} [warningIconAriaLabel] - optional\n */\n warningIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `info`.\n * @property {string} [infoIconAriaLabel] - optional\n */\n infoIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the dismiss button.\n * @property {string} [dismissAriaLabel] - optional\n */\n dismissAriaLabel?: string;\n }\n\n export interface AnalyticsMetadata {\n errorContext?: ErrorContext;\n }\n\n export interface Style {\n root?: {\n background?: string;\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n color?: string;\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n icon?: {\n color?: string;\n };\n dismissButton?: {\n color?: {\n active?: string;\n default?: string;\n hover?: string;\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n }\n}\n\nexport interface AlertProps extends BaseComponentProps {\n /**\n * Specifies the type of message you want to display.\n */\n type?: AlertProps.Type;\n\n /**\n * Provides a text alternative for the icon.\n *\n * @deprecated Use the label properties inside `i18nStrings` instead.\n * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n */\n statusIconAriaLabel?: string;\n\n /**\n * Determines whether the alert is displayed.\n * @deprecated Use conditional rendering in your code instead of this prop.\n */\n visible?: boolean;\n /**\n * Adds a close button to the alert when set to `true`.\n * An `onDismiss` event is fired when a user clicks the button.\n */\n dismissible?: boolean;\n /**\n * Adds an aria-label to the dismiss button.\n * @i18n\n *\n * @deprecated Use `i18nStrings.dismissAriaLabel` instead.\n * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n */\n dismissAriaLabel?: string;\n /**\n * Primary text displayed in the element.\n */\n children?: React.ReactNode;\n /**\n * Heading text.\n */\n header?: React.ReactNode;\n /**\n * Displays an action button next to the message area when set.\n * An `onButtonClick` event is fired when the user clicks it.\n * @deprecated Replaced by `action`.\n */\n buttonText?: React.ReactNode;\n /**\n * Specifies an action for the alert message.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n */\n action?: React.ReactNode;\n /**\n * Fired when the user clicks the close icon that is displayed\n * when the `dismissible` property is set to `true`.\n */\n onDismiss?: NonCancelableEventHandler;\n /**\n * Fired when the user clicks the action button.\n * **Deprecated** Replaced by `action`.\n */\n onButtonClick?: NonCancelableEventHandler;\n /**\n * An object containing all the necessary localized strings required by the component.\n * @property {AlertProps.I18nStrings} [i18nStrings] - optional\n * @i18n\n */\n i18nStrings?: AlertProps.I18nStrings;\n /**\n * Specifies additional analytics-related metadata.\n * * `errorContext` - Identifies the error category and sub-category.\n * @analytics\n */\n analyticsMetadata?: AlertProps.AnalyticsMetadata;\n /**\n * @awsuiSystem core\n */\n style?: AlertProps.Style;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n export type Type = 'success' | 'error' | 'warning' | 'info';\n\n export interface Ref {\n /**\n * Sets focus on the alert content.\n */\n focus(): void;\n }\n\n export interface I18nStrings {\n /*\n * Specifies the ARIA label for the alert icon for type `success`.\n * @property {string} [successIconAriaLabel] - optional\n */\n successIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `error`.\n * @property {string} [errorIconAriaLabel] - optional\n */\n errorIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `warning`.\n * @property {string} [warningIconAriaLabel] - optional\n */\n warningIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `info`.\n * @property {string} [infoIconAriaLabel] - optional\n */\n infoIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the dismiss button.\n * @property {string} [dismissAriaLabel] - optional\n */\n dismissAriaLabel?: string;\n }\n\n export interface AnalyticsMetadata {\n errorContext?: ErrorContext;\n }\n\n export interface Style {\n root?: {\n background?: string;\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n color?: string;\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n icon?: {\n color?: string;\n };\n dismissButton?: {\n color?: {\n active?: string;\n default?: string;\n hover?: string;\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n }\n export interface PersistenceConfig {\n uniqueKey: string;\n crossServicePersistence?: boolean;\n }\n}\n\nexport interface AlertProps extends BaseComponentProps {\n /**\n * Specifies the type of message you want to display.\n */\n type?: AlertProps.Type;\n\n /**\n * Provides a text alternative for the icon.\n *\n * @deprecated Use the label properties inside `i18nStrings` instead.\n * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n */\n statusIconAriaLabel?: string;\n\n /**\n * Determines whether the alert is displayed.\n * @deprecated Use conditional rendering in your code instead of this prop.\n */\n visible?: boolean;\n /**\n * Adds a close button to the alert when set to `true`.\n * An `onDismiss` event is fired when a user clicks the button.\n */\n dismissible?: boolean;\n /**\n * Adds an aria-label to the dismiss button.\n * @i18n\n *\n * @deprecated Use `i18nStrings.dismissAriaLabel` instead.\n * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n */\n dismissAriaLabel?: string;\n /**\n * Primary text displayed in the element.\n */\n children?: React.ReactNode;\n /**\n * Heading text.\n */\n header?: React.ReactNode;\n /**\n * Displays an action button next to the message area when set.\n * An `onButtonClick` event is fired when the user clicks it.\n * @deprecated Replaced by `action`.\n */\n buttonText?: React.ReactNode;\n /**\n * Specifies an action for the alert message.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n */\n action?: React.ReactNode;\n /**\n * Fired when the user clicks the close icon that is displayed\n * when the `dismissible` property is set to `true`.\n */\n onDismiss?: NonCancelableEventHandler;\n /**\n * Fired when the user clicks the action button.\n * **Deprecated** Replaced by `action`.\n */\n onButtonClick?: NonCancelableEventHandler;\n /**\n * An object containing all the necessary localized strings required by the component.\n * @property {AlertProps.I18nStrings} [i18nStrings] - optional\n * @i18n\n */\n i18nStrings?: AlertProps.I18nStrings;\n /**\n * Specifies additional analytics-related metadata.\n * * `errorContext` - Identifies the error category and sub-category.\n * @analytics\n */\n analyticsMetadata?: AlertProps.AnalyticsMetadata;\n /**\n * @awsuiSystem core\n */\n style?: AlertProps.Style;\n /**\n * Config to persist dismiss state for dismissable Alert\n * persistenceConfig contains:\n * * `uniqueKey` (string) - This key to store the persistence state, it must be unique across your console.\n * * `crossServicePersistence` (boolean) - (Optional) If true, the persistence state will be shared across AWS services.\n * @awsuiSystem console\n */\n persistenceConfig?: AlertProps.PersistenceConfig;\n}\n"]}
|
package/alert/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2D,MAAM,OAAO,CAAC;AAehF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAsB1C,QAAA,MAAM,aAAa;;;oBAPC,MAAM;YACd,UAAU,CAAC,OAAO,CAAC;wCA8N9B,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
package/alert/internal.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { useImperativeHandle, useRef } from 'react';
|
|
3
|
+
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
|
|
6
6
|
import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
|
|
@@ -13,6 +13,7 @@ import VisualContext from '../internal/components/visual-context';
|
|
|
13
13
|
import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
|
|
14
14
|
import { fireNonCancelableEvent } from '../internal/events';
|
|
15
15
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
16
|
+
import { persistAlertDismiss, retrieveAlertDismiss } from '../internal/persistence';
|
|
16
17
|
import { awsuiPluginsInternal } from '../internal/plugins/api';
|
|
17
18
|
import { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';
|
|
18
19
|
import useContainerWidth from '../internal/utils/use-container-width';
|
|
@@ -28,7 +29,7 @@ const typeToIcon = {
|
|
|
28
29
|
};
|
|
29
30
|
const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);
|
|
30
31
|
const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);
|
|
31
|
-
const InternalAlert = React.forwardRef(({ type, i18nStrings, visible = true, dismissible, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef, statusIconAriaLabel: deprecatedStatusIconAriaLabel, dismissAriaLabel: deprecatedDismissAriaLabel, messageSlotId, style, ...rest }, ref) => {
|
|
32
|
+
const InternalAlert = React.forwardRef(({ type, i18nStrings, visible = true, dismissible, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef, statusIconAriaLabel: deprecatedStatusIconAriaLabel, dismissAriaLabel: deprecatedDismissAriaLabel, messageSlotId, style, persistenceConfig, ...rest }, ref) => {
|
|
32
33
|
var _a, _b;
|
|
33
34
|
const baseProps = getBaseProps(rest);
|
|
34
35
|
const i18n = useInternalI18n('alert');
|
|
@@ -52,6 +53,7 @@ const InternalAlert = React.forwardRef(({ type, i18nStrings, visible = true, dis
|
|
|
52
53
|
const containerRef = useMergeRefs(containerMeasureRef, __internalRootRef);
|
|
53
54
|
const headerRef = useMergeRefs(headerRefAction, headerRefContent);
|
|
54
55
|
const contentRef = useMergeRefs(contentRefAction, contentRefContent);
|
|
56
|
+
const [isPersistentlyDismissed, setIsPersistentlyDismissed] = useState(!!(persistenceConfig && persistenceConfig.uniqueKey));
|
|
55
57
|
const isRefresh = useVisualRefresh();
|
|
56
58
|
const size = isRefresh
|
|
57
59
|
? 'normal'
|
|
@@ -64,6 +66,36 @@ const InternalAlert = React.forwardRef(({ type, i18nStrings, visible = true, dis
|
|
|
64
66
|
};
|
|
65
67
|
const statusIconAriaLabel = i18n(`i18nStrings.${type}IconAriaLabel`, (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings[`${type}IconAriaLabel`]) !== null && _a !== void 0 ? _a : deprecatedStatusIconAriaLabel);
|
|
66
68
|
const dismissAriaLabel = i18n('i18nStrings.dismissAriaLabel', (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dismissAriaLabel) !== null && _b !== void 0 ? _b : i18n('dismissAriaLabel', deprecatedDismissAriaLabel));
|
|
69
|
+
useEffect(() => {
|
|
70
|
+
let isMounted = true;
|
|
71
|
+
if (persistenceConfig === null || persistenceConfig === void 0 ? void 0 : persistenceConfig.uniqueKey) {
|
|
72
|
+
retrieveAlertDismiss(persistenceConfig)
|
|
73
|
+
.then(dismissed => {
|
|
74
|
+
if (isMounted) {
|
|
75
|
+
setIsPersistentlyDismissed(!!dismissed);
|
|
76
|
+
}
|
|
77
|
+
})
|
|
78
|
+
.catch(() => {
|
|
79
|
+
if (isMounted) {
|
|
80
|
+
setIsPersistentlyDismissed(false);
|
|
81
|
+
}
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
return () => {
|
|
85
|
+
isMounted = false;
|
|
86
|
+
};
|
|
87
|
+
// Only track specific properties to avoid re-running when persistenceConfig object reference changes
|
|
88
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
89
|
+
}, [persistenceConfig === null || persistenceConfig === void 0 ? void 0 : persistenceConfig.uniqueKey, persistenceConfig === null || persistenceConfig === void 0 ? void 0 : persistenceConfig.crossServicePersistence]);
|
|
90
|
+
const dismiss = () => {
|
|
91
|
+
fireNonCancelableEvent(onDismiss);
|
|
92
|
+
if (persistenceConfig === null || persistenceConfig === void 0 ? void 0 : persistenceConfig.uniqueKey) {
|
|
93
|
+
persistAlertDismiss(persistenceConfig);
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
if (isPersistentlyDismissed) {
|
|
97
|
+
return null;
|
|
98
|
+
}
|
|
67
99
|
return (React.createElement("div", { ...baseProps, ...analyticsAttributes, "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden }, baseProps.className), ref: containerRef },
|
|
68
100
|
React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
|
|
69
101
|
React.createElement(VisualContext, { contextName: "alert" },
|
|
@@ -84,7 +116,7 @@ const InternalAlert = React.forwardRef(({ type, i18nStrings, visible = true, dis
|
|
|
84
116
|
dismissible && (React.createElement("div", { className: styles.dismiss, ...getAnalyticsMetadataAttribute({
|
|
85
117
|
action: 'dismiss',
|
|
86
118
|
}) },
|
|
87
|
-
React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissAriaLabel, onClick:
|
|
119
|
+
React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissAriaLabel, onClick: dismiss, style: getDismissButtonStyles(style) }))))))));
|
|
88
120
|
});
|
|
89
121
|
export default InternalAlert;
|
|
90
122
|
//# sourceMappingURL=internal.js.map
|
package/alert/internal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { awsuiPluginsInternal } from '../internal/plugins/api';\nimport { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';\nimport { SomeRequired } from '../internal/types';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { ActionsWrapper } from './actions-wrapper';\nimport { GeneratedAnalyticsMetadataAlertDismiss } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\nimport { getAlertStyles, getDismissButtonStyles, getIconStyles } from './style';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n error: 'status-negative',\n warning: 'status-warning',\n success: 'status-positive',\n info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> &\n InternalBaseComponentProps & {\n messageSlotId?: string;\n style?: AlertProps['style'];\n };\n\nconst useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);\nconst useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);\n\nconst InternalAlert = React.forwardRef(\n (\n {\n type,\n i18nStrings,\n visible = true,\n dismissible,\n children,\n header,\n buttonText,\n action,\n onDismiss,\n onButtonClick,\n __internalRootRef,\n statusIconAriaLabel: deprecatedStatusIconAriaLabel,\n dismissAriaLabel: deprecatedDismissAriaLabel,\n messageSlotId,\n style,\n ...rest\n }: InternalAlertProps,\n ref: React.Ref<AlertProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('alert');\n\n const focusRef = useRef<HTMLDivElement>(null);\n useImperativeHandle(ref, () => ({\n focus: () => {\n if (focusRef.current) {\n focusRef.current.tabIndex = -1;\n focusRef.current.focus();\n }\n },\n }));\n const handleBlur = () => {\n if (focusRef.current) {\n focusRef.current.removeAttribute('tabindex');\n }\n };\n\n const { discoveredActions, headerRef: headerRefAction, contentRef: contentRefAction } = useDiscoveredAction(type);\n const {\n initialHidden,\n headerReplacementType,\n contentReplacementType,\n headerRef: headerRefContent,\n contentRef: contentRefContent,\n replacementHeaderRef,\n replacementContentRef,\n } = useDiscoveredContent({ type, header, children });\n\n const [containerWidth, containerMeasureRef] = useContainerWidth();\n const containerRef = useMergeRefs(containerMeasureRef, __internalRootRef);\n const headerRef = useMergeRefs(headerRefAction, headerRefContent);\n const contentRef = useMergeRefs(contentRefAction, contentRefContent);\n\n const isRefresh = useVisualRefresh();\n const size = isRefresh\n ? 'normal'\n : headerReplacementType !== 'remove' && header && contentReplacementType !== 'remove' && children\n ? 'big'\n : 'normal';\n\n const hasAction = Boolean(action || buttonText || discoveredActions.length);\n\n const analyticsAttributes = {\n [DATA_ATTR_ANALYTICS_ALERT]: type,\n };\n\n const statusIconAriaLabel = i18n(\n `i18nStrings.${type}IconAriaLabel`,\n i18nStrings?.[`${type}IconAriaLabel`] ?? deprecatedStatusIconAriaLabel\n );\n\n const dismissAriaLabel = i18n(\n 'i18nStrings.dismissAriaLabel',\n i18nStrings?.dismissAriaLabel ?? i18n('dismissAriaLabel', deprecatedDismissAriaLabel)\n );\n\n return (\n <div\n {...baseProps}\n {...analyticsAttributes}\n aria-hidden={!visible}\n className={clsx(\n styles.root,\n { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden },\n baseProps.className\n )}\n ref={containerRef}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <VisualContext contextName=\"alert\">\n <div\n className={clsx(\n styles.alert,\n styles[`type-${type}`],\n styles[`icon-size-${size}`],\n hasAction && styles['with-action'],\n dismissible && styles['with-dismiss']\n )}\n style={getAlertStyles(style)}\n >\n <div className={styles['alert-wrapper']}>\n <div className={styles['alert-focus-wrapper']} ref={focusRef} role=\"group\" onBlur={handleBlur}>\n <div className={clsx(styles.icon, styles.text)} style={getIconStyles(style)}>\n <InternalIcon name={typeToIcon[type]} size={size} ariaLabel={statusIconAriaLabel} />\n </div>\n <div className={clsx(styles.message, styles.text)} id={messageSlotId}>\n <div\n className={clsx(\n header && styles.header,\n headerReplacementType !== 'original' ? styles.hidden : analyticsSelectors.header\n )}\n ref={headerRef}\n >\n {header}\n </div>\n <div\n className={clsx(\n styles['header-replacement'],\n headerReplacementType !== 'replaced' ? styles.hidden : analyticsSelectors.header\n )}\n ref={replacementHeaderRef}\n ></div>\n <div\n className={clsx(styles.content, contentReplacementType !== 'original' && styles.hidden)}\n ref={contentRef}\n >\n {children}\n </div>\n <div\n className={clsx(\n styles['content-replacement'],\n contentReplacementType !== 'replaced' && styles.hidden\n )}\n ref={replacementContentRef}\n ></div>\n </div>\n </div>\n <ActionsWrapper\n className={styles.action}\n testUtilClasses={{\n actionSlot: styles['action-slot'],\n actionButton: styles['action-button'],\n }}\n action={action}\n discoveredActions={discoveredActions}\n buttonText={buttonText}\n onButtonClick={() => fireNonCancelableEvent(onButtonClick)}\n containerWidth={containerWidth}\n wrappedClass={styles['action-wrapped']}\n />\n </div>\n {dismissible && (\n <div\n className={styles.dismiss}\n {...getAnalyticsMetadataAttribute({\n action: 'dismiss',\n } as Partial<GeneratedAnalyticsMetadataAlertDismiss>)}\n >\n <InternalButton\n className={styles['dismiss-button']}\n variant=\"icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={dismissAriaLabel}\n onClick={() => fireNonCancelableEvent(onDismiss)}\n style={getDismissButtonStyles(style)}\n />\n </div>\n )}\n </div>\n </VisualContext>\n </LinkDefaultVariantContext.Provider>\n </div>\n );\n }\n);\n\nexport default InternalAlert;\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChF,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,aAAa,MAAM,uCAAuC,CAAC;AAClE,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAC7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAE5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,6BAA6B,CAAC;AAEpG,OAAO,iBAAiB,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGnD,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAEhF,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,GAA+C;IAC7D,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,gBAAgB;IACzB,OAAO,EAAE,iBAAiB;IAC1B,IAAI,EAAE,aAAa;CACpB,CAAC;AAQF,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,oBAAoB,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC;AACrG,MAAM,oBAAoB,GAAG,0BAA0B,CAAC,OAAO,EAAE,oBAAoB,CAAC,YAAY,CAAC,CAAC;AAEpG,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EACE,IAAI,EACJ,WAAW,EACX,OAAO,GAAG,IAAI,EACd,WAAW,EACX,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,mBAAmB,EAAE,6BAA6B,EAClD,gBAAgB,EAAE,0BAA0B,EAC5C,aAAa,EACb,KAAK,EACL,iBAAiB,EACjB,GAAG,IAAI,EACY,EACrB,GAA8B,EAC9B,EAAE;;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAEtC,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC9C,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,GAAG,EAAE;YACV,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;gBACrB,QAAQ,CAAC,OAAO,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;gBAC/B,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC3B,CAAC;QACH,CAAC;KACF,CAAC,CAAC,CAAC;IACJ,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,QAAQ,CAAC,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,eAAe,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAClH,MAAM,EACJ,aAAa,EACb,qBAAqB,EACrB,sBAAsB,EACtB,SAAS,EAAE,gBAAgB,EAC3B,UAAU,EAAE,iBAAiB,EAC7B,oBAAoB,EACpB,qBAAqB,GACtB,GAAG,oBAAoB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;IAErD,MAAM,CAAC,cAAc,EAAE,mBAAmB,CAAC,GAAG,iBAAiB,EAAE,CAAC;IAClE,MAAM,YAAY,GAAG,YAAY,CAAC,mBAAmB,EAAE,iBAAiB,CAAC,CAAC;IAC1E,MAAM,SAAS,GAAG,YAAY,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,YAAY,CAAC,gBAAgB,EAAE,iBAAiB,CAAC,CAAC;IACrE,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CACpE,CAAC,CAAC,CAAC,iBAAiB,IAAI,iBAAiB,CAAC,SAAS,CAAC,CACrD,CAAC;IAEF,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IACrC,MAAM,IAAI,GAAG,SAAS;QACpB,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,qBAAqB,KAAK,QAAQ,IAAI,MAAM,IAAI,sBAAsB,KAAK,QAAQ,IAAI,QAAQ;YAC/F,CAAC,CAAC,KAAK;YACP,CAAC,CAAC,QAAQ,CAAC;IAEf,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,IAAI,UAAU,IAAI,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAE5E,MAAM,mBAAmB,GAAG;QAC1B,CAAC,yBAAyB,CAAC,EAAE,IAAI;KAClC,CAAC;IAEF,MAAM,mBAAmB,GAAG,IAAI,CAC9B,eAAe,IAAI,eAAe,EAClC,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,GAAG,IAAI,eAAe,CAAC,mCAAI,6BAA6B,CACvE,CAAC;IAEF,MAAM,gBAAgB,GAAG,IAAI,CAC3B,8BAA8B,EAC9B,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,mCAAI,IAAI,CAAC,kBAAkB,EAAE,0BAA0B,CAAC,CACtF,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,IAAI,CAAC;QACrB,IAAI,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,SAAS,EAAE,CAAC;YACjC,oBAAoB,CAAC,iBAAiB,CAAC;iBACpC,IAAI,CAAC,SAAS,CAAC,EAAE;gBAChB,IAAI,SAAS,EAAE,CAAC;oBACd,0BAA0B,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;gBAC1C,CAAC;YACH,CAAC,CAAC;iBACD,KAAK,CAAC,GAAG,EAAE;gBACV,IAAI,SAAS,EAAE,CAAC;oBACd,0BAA0B,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC,CAAC,CAAC;QACP,CAAC;QACD,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,KAAK,CAAC;QACpB,CAAC,CAAC;QAEF,qGAAqG;QACrG,uDAAuD;IACzD,CAAC,EAAE,CAAC,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,SAAS,EAAE,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,uBAAuB,CAAC,CAAC,CAAC;IAE/E,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,sBAAsB,CAAC,SAAS,CAAC,CAAC;QAClC,IAAI,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,SAAS,EAAE,CAAC;YACjC,mBAAmB,CAAC,iBAAiB,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,uBAAuB,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,gCACM,SAAS,KACT,mBAAmB,iBACV,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,aAAa,EAAE,EACxE,SAAS,CAAC,SAAS,CACpB,EACD,GAAG,EAAE,YAAY;QAEjB,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;YACtE,oBAAC,aAAa,IAAC,WAAW,EAAC,OAAO;gBAChC,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,EACtB,MAAM,CAAC,aAAa,IAAI,EAAE,CAAC,EAC3B,SAAS,IAAI,MAAM,CAAC,aAAa,CAAC,EAClC,WAAW,IAAI,MAAM,CAAC,cAAc,CAAC,CACtC,EACD,KAAK,EAAE,cAAc,CAAC,KAAK,CAAC;oBAE5B,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;wBACrC,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,EAAC,MAAM,EAAE,UAAU;4BAC3F,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC;gCACzE,oBAAC,YAAY,IAAC,IAAI,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,mBAAmB,GAAI,CAChF;4BACN,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,aAAa;gCAClE,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,IAAI,MAAM,CAAC,MAAM,EACvB,qBAAqB,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,CACjF,EACD,GAAG,EAAE,SAAS,IAEb,MAAM,CACH;gCACN,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,oBAAoB,CAAC,EAC5B,qBAAqB,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,CACjF,EACD,GAAG,EAAE,oBAAoB,GACpB;gCACP,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,sBAAsB,KAAK,UAAU,IAAI,MAAM,CAAC,MAAM,CAAC,EACvF,GAAG,EAAE,UAAU,IAEd,QAAQ,CACL;gCACN,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,qBAAqB,CAAC,EAC7B,sBAAsB,KAAK,UAAU,IAAI,MAAM,CAAC,MAAM,CACvD,EACD,GAAG,EAAE,qBAAqB,GACrB,CACH,CACF;wBACN,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,MAAM,EACxB,eAAe,EAAE;gCACf,UAAU,EAAE,MAAM,CAAC,aAAa,CAAC;gCACjC,YAAY,EAAE,MAAM,CAAC,eAAe,CAAC;6BACtC,EACD,MAAM,EAAE,MAAM,EACd,iBAAiB,EAAE,iBAAiB,EACpC,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,aAAa,CAAC,EAC1D,cAAc,EAAE,cAAc,EAC9B,YAAY,EAAE,MAAM,CAAC,gBAAgB,CAAC,GACtC,CACE;oBACL,WAAW,IAAI,CACd,6BACE,SAAS,EAAE,MAAM,CAAC,OAAO,KACrB,6BAA6B,CAAC;4BAChC,MAAM,EAAE,SAAS;yBACiC,CAAC;wBAErD,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC,EACnC,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,OAAO,EAChB,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,sBAAsB,CAAC,KAAK,CAAC,GACpC,CACE,CACP,CACG,CACQ,CACmB,CACjC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { persistAlertDismiss, retrieveAlertDismiss } from '../internal/persistence';\nimport { awsuiPluginsInternal } from '../internal/plugins/api';\nimport { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';\nimport { SomeRequired } from '../internal/types';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { ActionsWrapper } from './actions-wrapper';\nimport { GeneratedAnalyticsMetadataAlertDismiss } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\nimport { getAlertStyles, getDismissButtonStyles, getIconStyles } from './style';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n error: 'status-negative',\n warning: 'status-warning',\n success: 'status-positive',\n info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> &\n InternalBaseComponentProps & {\n messageSlotId?: string;\n style?: AlertProps['style'];\n };\n\nconst useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);\nconst useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);\n\nconst InternalAlert = React.forwardRef(\n (\n {\n type,\n i18nStrings,\n visible = true,\n dismissible,\n children,\n header,\n buttonText,\n action,\n onDismiss,\n onButtonClick,\n __internalRootRef,\n statusIconAriaLabel: deprecatedStatusIconAriaLabel,\n dismissAriaLabel: deprecatedDismissAriaLabel,\n messageSlotId,\n style,\n persistenceConfig,\n ...rest\n }: InternalAlertProps,\n ref: React.Ref<AlertProps.Ref>\n ) => {\n const baseProps = getBaseProps(rest);\n const i18n = useInternalI18n('alert');\n\n const focusRef = useRef<HTMLDivElement>(null);\n useImperativeHandle(ref, () => ({\n focus: () => {\n if (focusRef.current) {\n focusRef.current.tabIndex = -1;\n focusRef.current.focus();\n }\n },\n }));\n const handleBlur = () => {\n if (focusRef.current) {\n focusRef.current.removeAttribute('tabindex');\n }\n };\n\n const { discoveredActions, headerRef: headerRefAction, contentRef: contentRefAction } = useDiscoveredAction(type);\n const {\n initialHidden,\n headerReplacementType,\n contentReplacementType,\n headerRef: headerRefContent,\n contentRef: contentRefContent,\n replacementHeaderRef,\n replacementContentRef,\n } = useDiscoveredContent({ type, header, children });\n\n const [containerWidth, containerMeasureRef] = useContainerWidth();\n const containerRef = useMergeRefs(containerMeasureRef, __internalRootRef);\n const headerRef = useMergeRefs(headerRefAction, headerRefContent);\n const contentRef = useMergeRefs(contentRefAction, contentRefContent);\n const [isPersistentlyDismissed, setIsPersistentlyDismissed] = useState(\n !!(persistenceConfig && persistenceConfig.uniqueKey)\n );\n\n const isRefresh = useVisualRefresh();\n const size = isRefresh\n ? 'normal'\n : headerReplacementType !== 'remove' && header && contentReplacementType !== 'remove' && children\n ? 'big'\n : 'normal';\n\n const hasAction = Boolean(action || buttonText || discoveredActions.length);\n\n const analyticsAttributes = {\n [DATA_ATTR_ANALYTICS_ALERT]: type,\n };\n\n const statusIconAriaLabel = i18n(\n `i18nStrings.${type}IconAriaLabel`,\n i18nStrings?.[`${type}IconAriaLabel`] ?? deprecatedStatusIconAriaLabel\n );\n\n const dismissAriaLabel = i18n(\n 'i18nStrings.dismissAriaLabel',\n i18nStrings?.dismissAriaLabel ?? i18n('dismissAriaLabel', deprecatedDismissAriaLabel)\n );\n\n useEffect(() => {\n let isMounted = true;\n if (persistenceConfig?.uniqueKey) {\n retrieveAlertDismiss(persistenceConfig)\n .then(dismissed => {\n if (isMounted) {\n setIsPersistentlyDismissed(!!dismissed);\n }\n })\n .catch(() => {\n if (isMounted) {\n setIsPersistentlyDismissed(false);\n }\n });\n }\n return () => {\n isMounted = false;\n };\n\n // Only track specific properties to avoid re-running when persistenceConfig object reference changes\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [persistenceConfig?.uniqueKey, persistenceConfig?.crossServicePersistence]);\n\n const dismiss = () => {\n fireNonCancelableEvent(onDismiss);\n if (persistenceConfig?.uniqueKey) {\n persistAlertDismiss(persistenceConfig);\n }\n };\n\n if (isPersistentlyDismissed) {\n return null;\n }\n\n return (\n <div\n {...baseProps}\n {...analyticsAttributes}\n aria-hidden={!visible}\n className={clsx(\n styles.root,\n { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden },\n baseProps.className\n )}\n ref={containerRef}\n >\n <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n <VisualContext contextName=\"alert\">\n <div\n className={clsx(\n styles.alert,\n styles[`type-${type}`],\n styles[`icon-size-${size}`],\n hasAction && styles['with-action'],\n dismissible && styles['with-dismiss']\n )}\n style={getAlertStyles(style)}\n >\n <div className={styles['alert-wrapper']}>\n <div className={styles['alert-focus-wrapper']} ref={focusRef} role=\"group\" onBlur={handleBlur}>\n <div className={clsx(styles.icon, styles.text)} style={getIconStyles(style)}>\n <InternalIcon name={typeToIcon[type]} size={size} ariaLabel={statusIconAriaLabel} />\n </div>\n <div className={clsx(styles.message, styles.text)} id={messageSlotId}>\n <div\n className={clsx(\n header && styles.header,\n headerReplacementType !== 'original' ? styles.hidden : analyticsSelectors.header\n )}\n ref={headerRef}\n >\n {header}\n </div>\n <div\n className={clsx(\n styles['header-replacement'],\n headerReplacementType !== 'replaced' ? styles.hidden : analyticsSelectors.header\n )}\n ref={replacementHeaderRef}\n ></div>\n <div\n className={clsx(styles.content, contentReplacementType !== 'original' && styles.hidden)}\n ref={contentRef}\n >\n {children}\n </div>\n <div\n className={clsx(\n styles['content-replacement'],\n contentReplacementType !== 'replaced' && styles.hidden\n )}\n ref={replacementContentRef}\n ></div>\n </div>\n </div>\n <ActionsWrapper\n className={styles.action}\n testUtilClasses={{\n actionSlot: styles['action-slot'],\n actionButton: styles['action-button'],\n }}\n action={action}\n discoveredActions={discoveredActions}\n buttonText={buttonText}\n onButtonClick={() => fireNonCancelableEvent(onButtonClick)}\n containerWidth={containerWidth}\n wrappedClass={styles['action-wrapped']}\n />\n </div>\n {dismissible && (\n <div\n className={styles.dismiss}\n {...getAnalyticsMetadataAttribute({\n action: 'dismiss',\n } as Partial<GeneratedAnalyticsMetadataAlertDismiss>)}\n >\n <InternalButton\n className={styles['dismiss-button']}\n variant=\"icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={dismissAriaLabel}\n onClick={dismiss}\n style={getDismissButtonStyles(style)}\n />\n </div>\n )}\n </div>\n </VisualContext>\n </LinkDefaultVariantContext.Provider>\n </div>\n );\n }\n);\n\nexport default InternalAlert;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAiB,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAmBpE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAiB,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAmBpE,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,qBAAqB,eAwVhG"}
|
|
@@ -17,7 +17,7 @@ import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
|
|
|
17
17
|
import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
|
|
18
18
|
import { throttle } from '../internal/utils/throttle';
|
|
19
19
|
import { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';
|
|
20
|
-
import { useFlashbar } from './common';
|
|
20
|
+
import { useFlashbar, useFlashbarVisibility } from './common';
|
|
21
21
|
import { Flash, focusFlashById } from './flash';
|
|
22
22
|
import { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';
|
|
23
23
|
import { counterTypes, FOCUS_DEBOUNCE_DELAY, getFlashTypeCount, getItemColor, getVisibleCollapsedItems, } from './utils';
|
|
@@ -27,6 +27,7 @@ import styles from './styles.css.js';
|
|
|
27
27
|
const maxNonCollapsibleItems = 1;
|
|
28
28
|
const resizeListenerThrottleDelay = 100;
|
|
29
29
|
export default function CollapsibleFlashbar({ items, style, ...restProps }) {
|
|
30
|
+
const visibleItems = useFlashbarVisibility(items);
|
|
30
31
|
const [enteringItems, setEnteringItems] = useState([]);
|
|
31
32
|
const [exitingItems, setExitingItems] = useState([]);
|
|
32
33
|
const [isFlashbarStackExpanded, setIsFlashbarStackExpanded] = useState(false);
|
|
@@ -47,7 +48,7 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }) {
|
|
|
47
48
|
const flashbarElementId = useUniqueId('flashbar');
|
|
48
49
|
const itemCountElementId = useUniqueId('item-count');
|
|
49
50
|
const { baseProps, isReducedMotion, isVisualRefresh, mergedRef, ref, flashRefs, handleFlashDismissed } = useFlashbar({
|
|
50
|
-
items,
|
|
51
|
+
items: visibleItems,
|
|
51
52
|
...restProps,
|
|
52
53
|
onItemsAdded: newItems => {
|
|
53
54
|
setEnteringItems([...enteringItems, ...newItems]);
|
|
@@ -64,7 +65,7 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }) {
|
|
|
64
65
|
setExitingItems([...exitingItems, ...removedItems]);
|
|
65
66
|
},
|
|
66
67
|
});
|
|
67
|
-
if (
|
|
68
|
+
if (visibleItems.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {
|
|
68
69
|
setIsFlashbarStackExpanded(false);
|
|
69
70
|
}
|
|
70
71
|
const animateFlash = !isReducedMotion;
|
|
@@ -76,8 +77,8 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }) {
|
|
|
76
77
|
}
|
|
77
78
|
const debouncedFocus = useDebounceCallback(focusFlashById, FOCUS_DEBOUNCE_DELAY);
|
|
78
79
|
useLayoutEffect(() => {
|
|
79
|
-
if (isFlashbarStackExpanded && (
|
|
80
|
-
const mostRecentItem =
|
|
80
|
+
if (isFlashbarStackExpanded && (visibleItems === null || visibleItems === void 0 ? void 0 : visibleItems.length)) {
|
|
81
|
+
const mostRecentItem = visibleItems[0];
|
|
81
82
|
if (mostRecentItem.id !== undefined) {
|
|
82
83
|
debouncedFocus(ref.current, mostRecentItem.id);
|
|
83
84
|
}
|
|
@@ -146,14 +147,14 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }) {
|
|
|
146
147
|
setInitialAnimationState(null);
|
|
147
148
|
}
|
|
148
149
|
}, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);
|
|
149
|
-
const isCollapsible =
|
|
150
|
-
const countByType = getFlashTypeCount(
|
|
151
|
-
const numberOfColorsInStack = new Set(
|
|
150
|
+
const isCollapsible = visibleItems.length > maxNonCollapsibleItems;
|
|
151
|
+
const countByType = getFlashTypeCount(visibleItems);
|
|
152
|
+
const numberOfColorsInStack = new Set(visibleItems.map(getItemColor)).size;
|
|
152
153
|
const maxSlots = Math.max(numberOfColorsInStack, 3);
|
|
153
|
-
const stackDepth = Math.min(maxSlots,
|
|
154
|
+
const stackDepth = Math.min(maxSlots, visibleItems.length);
|
|
154
155
|
const itemsToShow = isFlashbarStackExpanded
|
|
155
|
-
?
|
|
156
|
-
: getVisibleCollapsedItems(
|
|
156
|
+
? visibleItems.map((item, index) => ({ ...item, expandedIndex: index }))
|
|
157
|
+
: getVisibleCollapsedItems(visibleItems, stackDepth).map((item, index) => ({
|
|
157
158
|
...item,
|
|
158
159
|
collapsedIndex: index,
|
|
159
160
|
}));
|
|
@@ -211,9 +212,9 @@ export default function CollapsibleFlashbar({ items, style, ...restProps }) {
|
|
|
211
212
|
}
|
|
212
213
|
}, transitionState: shouldUseStandardAnimation(item, index) ? state : undefined, i18nStrings: iconAriaLabels, style: style, onDismissed: handleFlashDismissed, ...item }))));
|
|
213
214
|
}))))));
|
|
214
|
-
return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.flashbar, styles.stack, isCollapsible && styles.collapsible,
|
|
215
|
+
return (React.createElement("div", { ...baseProps, className: clsx(baseProps.className, styles.flashbar, styles.stack, isCollapsible && styles.collapsible, visibleItems.length === 2 && styles['short-list'], isFlashbarStackExpanded && styles.expanded, isVisualRefresh && styles['visual-refresh']), ref: mergedRef, ...getAnalyticsMetadataAttribute(getComponentsAnalyticsMetadata(visibleItems.length, true, isFlashbarStackExpanded)) },
|
|
215
216
|
isFlashbarStackExpanded && renderList(),
|
|
216
|
-
isCollapsible && (React.createElement("div", { className: clsx(styles['notification-bar'], isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running'],
|
|
217
|
+
isCollapsible && (React.createElement("div", { className: clsx(styles['notification-bar'], isVisualRefresh && styles['visual-refresh'], isFlashbarStackExpanded ? styles.expanded : styles.collapsed, transitioning && styles['animation-running'], visibleItems.length === 2 && styles['short-list'], getVisualContextClassname('flashbar') // Visual context is needed for focus ring to be white
|
|
217
218
|
), onClick: toggleCollapseExpand, ref: notificationBarRef, style: getNotificationBarStyles(style), ...getAnalyticsMetadataAttribute({
|
|
218
219
|
action: !isFlashbarStackExpanded ? 'expand' : 'collapse',
|
|
219
220
|
detail: {
|
|
@@ -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 React, { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { Transition } from '../internal/components/transition';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { throttle } from '../internal/utils/throttle';\nimport {\n GeneratedAnalyticsMetadataFlashbarCollapse,\n GeneratedAnalyticsMetadataFlashbarExpand,\n} from './analytics-metadata/interfaces';\nimport { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';\nimport { useFlashbar } from './common';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps, InternalFlashbarProps } from './interfaces';\nimport { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';\nimport {\n counterTypes,\n FOCUS_DEBOUNCE_DELAY,\n getFlashTypeCount,\n getItemColor,\n getVisibleCollapsedItems,\n StackableItem,\n} from './utils';\n\nimport styles from './styles.css.js';\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, style, ...restProps }: InternalFlashbarProps) {\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 collapsedItemRefs = useRef<Record<string, HTMLElement | null>>({});\n const expandedItemRefs = useRef<Record<string, HTMLElement | null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string, 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 const { baseProps, isReducedMotion, isVisualRefresh, mergedRef, ref, flashRefs, handleFlashDismissed } = 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 if (items.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n const debouncedFocus = useDebounceCallback(focusFlashById, FOCUS_DEBOUNCE_DELAY);\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const mostRecentItem = items[0];\n if (mostRecentItem.id !== undefined) {\n debouncedFocus(ref.current, mostRecentItem.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 }, [debouncedFocus, isFlashbarStackExpanded]);\n\n // When collapsing, scroll up if necessary to avoid losing track of the focused button\n useEffectOnUpdate(() => {\n if (!isFlashbarStackExpanded && notificationBarRef.current) {\n scrollElementIntoView(notificationBarRef.current);\n }\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 // Make sure the bottom padding is present when we make the calculations,\n // then we might decide to remove it or not.\n flashbar.classList.remove(styles.floating);\n const windowHeight = window.innerHeight;\n // Take the parent region into account if using the App Layout, because it might have additional margins.\n // Otherwise we use the Flashbar component for this calculation.\n const outerElement = findUpUntil(flashbar, element => element.getAttribute('role') === 'region') || flashbar;\n const applySpacing =\n isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;\n if (!applySpacing) {\n flashbar.classList.add(styles.floating);\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 const i18n = useInternalI18n('flashbar');\n const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);\n const notificationBarText = i18n('i18nStrings.notificationBarText', i18nStrings?.notificationBarText);\n const notificationBarAriaLabel = i18n('i18nStrings.notificationBarAriaLabel', i18nStrings?.notificationBarAriaLabel);\n const iconAriaLabels = {\n errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),\n inProgressIconAriaLabel: i18n('i18nStrings.inProgressIconAriaLabel', i18nStrings?.inProgressIconAriaLabel),\n infoIconAriaLabel: i18n('i18nStrings.infoIconAriaLabel', i18nStrings?.infoIconAriaLabel),\n successIconAriaLabel: i18n('i18nStrings.successIconAriaLabel', i18nStrings?.successIconAriaLabel),\n warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),\n };\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\n animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\n });\n\n setTransitioning(true);\n setInitialAnimationState(null);\n }\n }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n const isCollapsible = items.length > maxNonCollapsibleItems;\n\n const countByType = getFlashTypeCount(items);\n\n const numberOfColorsInStack = new Set(items.map(getItemColor)).size;\n const maxSlots = Math.max(numberOfColorsInStack, 3);\n const stackDepth = Math.min(maxSlots, items.length);\n\n const itemsToShow = isFlashbarStackExpanded\n ? items.map((item, index) => ({ ...item, expandedIndex: index }))\n : getVisibleCollapsedItems(items, stackDepth).map((item: StackableItem, index: number) => ({\n ...item,\n collapsedIndex: index,\n }));\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 <ListWrapper withMotion={!isReducedMotion}>\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 ...(index > 0 && !isFlashbarStackExpanded && getCollapsibleFlashStyles(style, item.type)),\n ...((!isFlashbarStackExpanded || transitioning) && {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }),\n }}\n key={getItemId(item)}\n {...getAnalyticsMetadataAttribute(getItemAnalyticsMetadata(index + 1, item.type || 'info', item.id))}\n >\n {showInnerContent(item) && (\n <Flash\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={(el: HTMLDivElement | null) => {\n // Store the Flash element reference for focus management\n flashRefs.current[getItemId(item)] = el;\n\n if (shouldUseStandardAnimation(item, index) && transitionRootElement) {\n if (typeof transitionRootElement === 'function') {\n transitionRootElement(el);\n } else if (\n transitionRootElement &&\n typeof transitionRootElement === 'object' &&\n 'current' in transitionRootElement\n ) {\n (transitionRootElement as React.MutableRefObject<HTMLDivElement | null>).current = el;\n }\n }\n }}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n i18nStrings={iconAriaLabels}\n style={style}\n onDismissed={handleFlashDismissed}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </ListWrapper>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles.stack,\n isCollapsible && styles.collapsible,\n items.length === 2 && styles['short-list'],\n isFlashbarStackExpanded && styles.expanded,\n isVisualRefresh && styles['visual-refresh']\n )}\n ref={mergedRef}\n {...getAnalyticsMetadataAttribute(getComponentsAnalyticsMetadata(items.length, true, isFlashbarStackExpanded))}\n >\n {isFlashbarStackExpanded && renderList()}\n {isCollapsible && (\n <div\n className={clsx(\n styles['notification-bar'],\n isVisualRefresh && styles['visual-refresh'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n items.length === 2 && styles['short-list'],\n getVisualContextClassname('flashbar') // Visual context is needed for focus ring to be white\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n style={getNotificationBarStyles(style)}\n {...getAnalyticsMetadataAttribute({\n action: !isFlashbarStackExpanded ? 'expand' : 'collapse',\n detail: {\n label: 'h2',\n },\n } as GeneratedAnalyticsMetadataFlashbarExpand | GeneratedAnalyticsMetadataFlashbarCollapse)}\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={iconAriaLabels[labelName]}\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={notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\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 title={label}>\n <InternalIcon name={iconName} ariaLabel={label} />\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n\nconst ListWrapper = ({ children, withMotion }: { children: ReactNode; withMotion: boolean }) =>\n withMotion ? <TransitionGroup component={null}>{children}</TransitionGroup> : <>{children}</>;\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 React, { ReactNode, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { animate, getDOMRects } from '../internal/animate';\nimport { Transition } from '../internal/components/transition';\nimport { getVisualContextClassname } from '../internal/components/visual-context';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { useDebounceCallback } from '../internal/hooks/use-debounce-callback';\nimport { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';\nimport { scrollElementIntoView } from '../internal/utils/scrollable-containers';\nimport { throttle } from '../internal/utils/throttle';\nimport {\n GeneratedAnalyticsMetadataFlashbarCollapse,\n GeneratedAnalyticsMetadataFlashbarExpand,\n} from './analytics-metadata/interfaces';\nimport { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';\nimport { useFlashbar, useFlashbarVisibility } from './common';\nimport { Flash, focusFlashById } from './flash';\nimport { FlashbarProps, InternalFlashbarProps } from './interfaces';\nimport { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';\nimport {\n counterTypes,\n FOCUS_DEBOUNCE_DELAY,\n getFlashTypeCount,\n getItemColor,\n getVisibleCollapsedItems,\n StackableItem,\n} from './utils';\n\nimport styles from './styles.css.js';\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, style, ...restProps }: InternalFlashbarProps) {\n const visibleItems = useFlashbarVisibility(items);\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 collapsedItemRefs = useRef<Record<string, HTMLElement | null>>({});\n const expandedItemRefs = useRef<Record<string, HTMLElement | null>>({});\n const [initialAnimationState, setInitialAnimationState] = useState<Record<string, 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 const { baseProps, isReducedMotion, isVisualRefresh, mergedRef, ref, flashRefs, handleFlashDismissed } = useFlashbar({\n items: visibleItems,\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 if (visibleItems.length <= maxNonCollapsibleItems && isFlashbarStackExpanded) {\n setIsFlashbarStackExpanded(false);\n }\n\n const animateFlash = !isReducedMotion;\n\n function toggleCollapseExpand() {\n if (!isReducedMotion) {\n prepareAnimations();\n }\n setIsFlashbarStackExpanded(prev => !prev);\n }\n\n const debouncedFocus = useDebounceCallback(focusFlashById, FOCUS_DEBOUNCE_DELAY);\n useLayoutEffect(() => {\n if (isFlashbarStackExpanded && visibleItems?.length) {\n const mostRecentItem = visibleItems[0];\n if (mostRecentItem.id !== undefined) {\n debouncedFocus(ref.current, mostRecentItem.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 }, [debouncedFocus, isFlashbarStackExpanded]);\n\n // When collapsing, scroll up if necessary to avoid losing track of the focused button\n useEffectOnUpdate(() => {\n if (!isFlashbarStackExpanded && notificationBarRef.current) {\n scrollElementIntoView(notificationBarRef.current);\n }\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 // Make sure the bottom padding is present when we make the calculations,\n // then we might decide to remove it or not.\n flashbar.classList.remove(styles.floating);\n const windowHeight = window.innerHeight;\n // Take the parent region into account if using the App Layout, because it might have additional margins.\n // Otherwise we use the Flashbar component for this calculation.\n const outerElement = findUpUntil(flashbar, element => element.getAttribute('role') === 'region') || flashbar;\n const applySpacing =\n isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;\n if (!applySpacing) {\n flashbar.classList.add(styles.floating);\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 const i18n = useInternalI18n('flashbar');\n const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);\n const notificationBarText = i18n('i18nStrings.notificationBarText', i18nStrings?.notificationBarText);\n const notificationBarAriaLabel = i18n('i18nStrings.notificationBarAriaLabel', i18nStrings?.notificationBarAriaLabel);\n const iconAriaLabels = {\n errorIconAriaLabel: i18n('i18nStrings.errorIconAriaLabel', i18nStrings?.errorIconAriaLabel),\n inProgressIconAriaLabel: i18n('i18nStrings.inProgressIconAriaLabel', i18nStrings?.inProgressIconAriaLabel),\n infoIconAriaLabel: i18n('i18nStrings.infoIconAriaLabel', i18nStrings?.infoIconAriaLabel),\n successIconAriaLabel: i18n('i18nStrings.successIconAriaLabel', i18nStrings?.successIconAriaLabel),\n warningIconAriaLabel: i18n('i18nStrings.warningIconAriaLabel', i18nStrings?.warningIconAriaLabel),\n };\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\n animate({\n elements: getElementsToAnimate(),\n oldState: initialAnimationState,\n newElementInitialState: ({ top }) => ({ scale: 0.9, y: -0.2 * top }),\n onTransitionsEnd: () => setTransitioning(false),\n });\n\n setTransitioning(true);\n setInitialAnimationState(null);\n }\n }, [updateBottomSpacing, getElementsToAnimate, initialAnimationState, isFlashbarStackExpanded]);\n\n const isCollapsible = visibleItems.length > maxNonCollapsibleItems;\n\n const countByType = getFlashTypeCount(visibleItems);\n\n const numberOfColorsInStack = new Set(visibleItems.map(getItemColor)).size;\n const maxSlots = Math.max(numberOfColorsInStack, 3);\n const stackDepth = Math.min(maxSlots, visibleItems.length);\n\n const itemsToShow = isFlashbarStackExpanded\n ? visibleItems.map((item, index) => ({ ...item, expandedIndex: index }))\n : getVisibleCollapsedItems(visibleItems, stackDepth).map((item: StackableItem, index: number) => ({\n ...item,\n collapsedIndex: index,\n }));\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 <ListWrapper withMotion={!isReducedMotion}>\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 ...(index > 0 && !isFlashbarStackExpanded && getCollapsibleFlashStyles(style, item.type)),\n ...((!isFlashbarStackExpanded || transitioning) && {\n [customCssProps.flashbarStackIndex]:\n (item as StackableItem).collapsedIndex ?? (item as StackableItem).expandedIndex ?? index,\n }),\n }}\n key={getItemId(item)}\n {...getAnalyticsMetadataAttribute(getItemAnalyticsMetadata(index + 1, item.type || 'info', item.id))}\n >\n {showInnerContent(item) && (\n <Flash\n className={clsx(\n animateFlash && styles['flash-with-motion'],\n isVisualRefresh && styles['flash-refresh']\n )}\n key={getItemId(item)}\n ref={(el: HTMLDivElement | null) => {\n // Store the Flash element reference for focus management\n flashRefs.current[getItemId(item)] = el;\n\n if (shouldUseStandardAnimation(item, index) && transitionRootElement) {\n if (typeof transitionRootElement === 'function') {\n transitionRootElement(el);\n } else if (\n transitionRootElement &&\n typeof transitionRootElement === 'object' &&\n 'current' in transitionRootElement\n ) {\n (transitionRootElement as React.MutableRefObject<HTMLDivElement | null>).current = el;\n }\n }\n }}\n transitionState={shouldUseStandardAnimation(item, index) ? state : undefined}\n i18nStrings={iconAriaLabels}\n style={style}\n onDismissed={handleFlashDismissed}\n {...item}\n />\n )}\n </li>\n )}\n </Transition>\n ))}\n </ListWrapper>\n </ul>\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(\n baseProps.className,\n styles.flashbar,\n styles.stack,\n isCollapsible && styles.collapsible,\n visibleItems.length === 2 && styles['short-list'],\n isFlashbarStackExpanded && styles.expanded,\n isVisualRefresh && styles['visual-refresh']\n )}\n ref={mergedRef}\n {...getAnalyticsMetadataAttribute(\n getComponentsAnalyticsMetadata(visibleItems.length, true, isFlashbarStackExpanded)\n )}\n >\n {isFlashbarStackExpanded && renderList()}\n {isCollapsible && (\n <div\n className={clsx(\n styles['notification-bar'],\n isVisualRefresh && styles['visual-refresh'],\n isFlashbarStackExpanded ? styles.expanded : styles.collapsed,\n transitioning && styles['animation-running'],\n visibleItems.length === 2 && styles['short-list'],\n getVisualContextClassname('flashbar') // Visual context is needed for focus ring to be white\n )}\n onClick={toggleCollapseExpand}\n ref={notificationBarRef}\n style={getNotificationBarStyles(style)}\n {...getAnalyticsMetadataAttribute({\n action: !isFlashbarStackExpanded ? 'expand' : 'collapse',\n detail: {\n label: 'h2',\n },\n } as GeneratedAnalyticsMetadataFlashbarExpand | GeneratedAnalyticsMetadataFlashbarCollapse)}\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={iconAriaLabels[labelName]}\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={notificationBarAriaLabel}\n className={clsx(styles.button, isFlashbarStackExpanded && styles.expanded)}\n >\n <InternalIcon className={styles.icon} size=\"normal\" name=\"angle-down\" />\n </button>\n </div>\n )}\n {!isFlashbarStackExpanded && renderList()}\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 title={label}>\n <InternalIcon name={iconName} ariaLabel={label} />\n </span>\n <span className={styles['count-number']}>{count}</span>\n </span>\n );\n};\n\nconst ListWrapper = ({ children, withMotion }: { children: ReactNode; withMotion: boolean }) =>\n withMotion ? <TransitionGroup component={null}>{children}</TransitionGroup> : <>{children}</>;\n"]}
|
package/flashbar/common.d.ts
CHANGED
|
@@ -22,5 +22,6 @@ export declare function useFlashbar({
|
|
|
22
22
|
mergedRef: ((instance: any) => void) | null;
|
|
23
23
|
ref: import("react").MutableRefObject<HTMLDivElement | null>;
|
|
24
24
|
flashRefs: import("react").MutableRefObject<Record<string | number, HTMLDivElement | null>>;
|
|
25
|
-
handleFlashDismissed: (dismissedId?: string) => void;
|
|
26
|
-
};
|
|
25
|
+
handleFlashDismissed: (dismissedId?: string, persistenceConfig?: FlashbarProps.PersistenceConfig) => void;
|
|
26
|
+
};
|
|
27
|
+
export declare function useFlashbarVisibility(items: ReadonlyArray<FlashbarProps.MessageDefinition>): FlashbarProps.MessageDefinition[];
|
package/flashbar/common.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/flashbar/common.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/flashbar/common.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAMpE,eAAO,MAAM,4BAA4B,GACvC,aAAa,MAAM,GAAG,SAAS,EAC/B,OAAO,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,GAAG,SAAS,EACjE,YAAY,cAAc,GAAG,IAAI,EACjC,kBAAkB,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC,SA8CjE,CAAC;AAGF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,GAAG,SAAS,EACb,EAAE,qBAAqB,GAAG;IACzB,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;;;;;;;;yCA8C6C,MAAM,sBAAsB,aAAa,CAAC,iBAAiB;EAiBxG;AAGD,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,qCA6E1F"}
|
package/flashbar/common.js
CHANGED
|
@@ -6,6 +6,7 @@ import { getBaseProps } from '../internal/base-component';
|
|
|
6
6
|
import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
|
|
7
7
|
import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
|
|
8
8
|
import { isDevelopment } from '../internal/is-development';
|
|
9
|
+
import { persistFlashbarDismiss, retrieveFlashbarDismiss } from '../internal/persistence';
|
|
9
10
|
import { focusFlashById, focusFlashFocusableArea } from './flash';
|
|
10
11
|
import { FOCUS_DEBOUNCE_DELAY } from './utils';
|
|
11
12
|
import styles from './styles.css.js';
|
|
@@ -88,8 +89,11 @@ export function useFlashbar({ items, onItemsAdded, onItemsChanged, onItemsRemove
|
|
|
88
89
|
debouncedFocus(ref.current, nextFocusId);
|
|
89
90
|
}
|
|
90
91
|
}, [debouncedFocus, nextFocusId, ref]);
|
|
91
|
-
const handleFlashDismissed = (dismissedId) => {
|
|
92
|
+
const handleFlashDismissed = (dismissedId, persistenceConfig) => {
|
|
92
93
|
handleFlashDismissedInternal(dismissedId, items, ref.current, flashRefs.current);
|
|
94
|
+
if (persistenceConfig === null || persistenceConfig === void 0 ? void 0 : persistenceConfig.uniqueKey) {
|
|
95
|
+
persistFlashbarDismiss(persistenceConfig);
|
|
96
|
+
}
|
|
93
97
|
};
|
|
94
98
|
return {
|
|
95
99
|
allItemsHaveId,
|
|
@@ -102,4 +106,66 @@ export function useFlashbar({ items, onItemsAdded, onItemsChanged, onItemsRemove
|
|
|
102
106
|
handleFlashDismissed,
|
|
103
107
|
};
|
|
104
108
|
}
|
|
109
|
+
// Hook for managing flashbar items visibility with persistence
|
|
110
|
+
export function useFlashbarVisibility(items) {
|
|
111
|
+
const [checkedPersistenceKeys, setCheckedPersistenceKeys] = useState(() => new Set());
|
|
112
|
+
const [persistentItemsVisibility, setPersistentItemsVisibility] = useState(() => new Map());
|
|
113
|
+
const visibleItems = items.filter(item => { var _a; return !((_a = item.persistenceConfig) === null || _a === void 0 ? void 0 : _a.uniqueKey) || persistentItemsVisibility.get(item.persistenceConfig.uniqueKey) === true; });
|
|
114
|
+
useEffect(() => {
|
|
115
|
+
const newPersistentItems = items.filter(item => { var _a; return ((_a = item.persistenceConfig) === null || _a === void 0 ? void 0 : _a.uniqueKey) && !checkedPersistenceKeys.has(item.persistenceConfig.uniqueKey); });
|
|
116
|
+
if (newPersistentItems.length === 0) {
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
let isMounted = true;
|
|
120
|
+
const checkNewPersistentItems = async () => {
|
|
121
|
+
try {
|
|
122
|
+
const results = await Promise.all(newPersistentItems.map(async (item) => {
|
|
123
|
+
try {
|
|
124
|
+
const isDismissed = await retrieveFlashbarDismiss(item.persistenceConfig);
|
|
125
|
+
return {
|
|
126
|
+
key: item.persistenceConfig.uniqueKey,
|
|
127
|
+
visible: !isDismissed,
|
|
128
|
+
};
|
|
129
|
+
}
|
|
130
|
+
catch {
|
|
131
|
+
return {
|
|
132
|
+
key: item.persistenceConfig.uniqueKey,
|
|
133
|
+
visible: true,
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
}));
|
|
137
|
+
if (!isMounted) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
setPersistentItemsVisibility(prev => {
|
|
141
|
+
const updated = new Map(prev);
|
|
142
|
+
results.forEach(({ key, visible }) => updated.set(key, visible));
|
|
143
|
+
return updated;
|
|
144
|
+
});
|
|
145
|
+
setCheckedPersistenceKeys(prev => {
|
|
146
|
+
const updated = new Set(prev);
|
|
147
|
+
results.forEach(({ key }) => updated.add(key));
|
|
148
|
+
return updated;
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
catch {
|
|
152
|
+
if (!isMounted) {
|
|
153
|
+
return;
|
|
154
|
+
}
|
|
155
|
+
// Fallback if Promise.all itself fails, set all newPersistentItems to visible
|
|
156
|
+
setPersistentItemsVisibility(prev => {
|
|
157
|
+
const updated = new Map(prev);
|
|
158
|
+
newPersistentItems.forEach(item => updated.set(item.persistenceConfig.uniqueKey, true));
|
|
159
|
+
return updated;
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
checkNewPersistentItems();
|
|
164
|
+
return () => {
|
|
165
|
+
isMounted = false;
|
|
166
|
+
};
|
|
167
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
168
|
+
}, [items]);
|
|
169
|
+
return visibleItems;
|
|
170
|
+
}
|
|
105
171
|
//# sourceMappingURL=common.js.map
|