@cloudscape-design/components-themeable 3.0.851 → 3.0.853

package/lib/internal/template/flashbar/non-collapsible-flashbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"non-collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/non-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 from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { Transition } from '../internal/components/transition';\nimport { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';\nimport { useFlashbar } from './common';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\nimport { Flash } from './flash';\nimport { FlashbarProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport { FlashbarProps };\n\nexport default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProps }: FlashbarProps) {\n  const { allItemsHaveId, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef } = useFlashbar({\n    items,\n    ...restProps,\n  });\n\n  const i18n = useInternalI18n('flashbar');\n  const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);\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  /**\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 = isReducedMotion || !isVisualRefresh || !allItemsHaveId;\n\n  const animateFlash = !isReducedMotion && isVisualRefresh;\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 (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']} aria-label={ariaLabel}>\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 (!motionDisabled || !items) {\n      return;\n    }\n\n    return (\n      <ul\n        className={styles['flash-list']}\n        aria-label={ariaLabel}\n        {...getAnalyticsMetadataAttribute(getComponentsAnalyticsMetadata(items.length, false))}\n      >\n        {items.map((item, index) => (\n          <li\n            key={item.id ?? index}\n            className={styles['flash-list-item']}\n            {...getAnalyticsMetadataAttribute(getItemAnalyticsMetadata(index + 1, item.type || 'info', item.id))}\n          >\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(animateFlash && styles['flash-with-motion'], isVisualRefresh && styles['flash-refresh'])}\n        key={key}\n        ref={transitionRootElement}\n        transitionState={transitionState}\n        i18nStrings={iconAriaLabels}\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      {renderFlatItemsWithTransitions()}\n      {renderFlatItemsWithoutTransitions()}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"non-collapsible-flashbar.js","sourceRoot":"","sources":["../../../src/flashbar/non-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 from 'react';\nimport { TransitionGroup } from 'react-transition-group';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { Transition } from '../internal/components/transition';\nimport { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './analytics-metadata/utils';\nimport { useFlashbar } from './common';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\nimport { Flash } from './flash';\nimport { FlashbarProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\nexport default function NonCollapsibleFlashbar({ items, i18nStrings, ...restProps }: FlashbarProps) {\n  const { allItemsHaveId, baseProps, breakpoint, isReducedMotion, isVisualRefresh, mergedRef } = useFlashbar({\n    items,\n    ...restProps,\n  });\n\n  const i18n = useInternalI18n('flashbar');\n  const ariaLabel = i18n('i18nStrings.ariaLabel', i18nStrings?.ariaLabel);\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  /**\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 = isReducedMotion || !isVisualRefresh || !allItemsHaveId;\n\n  const animateFlash = !isReducedMotion && isVisualRefresh;\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 (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']} aria-label={ariaLabel}>\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 (!motionDisabled || !items) {\n      return;\n    }\n\n    return (\n      <ul\n        className={styles['flash-list']}\n        aria-label={ariaLabel}\n        {...getAnalyticsMetadataAttribute(getComponentsAnalyticsMetadata(items.length, false))}\n      >\n        {items.map((item, index) => (\n          <li\n            key={item.id ?? index}\n            className={styles['flash-list-item']}\n            {...getAnalyticsMetadataAttribute(getItemAnalyticsMetadata(index + 1, item.type || 'info', item.id))}\n          >\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(animateFlash && styles['flash-with-motion'], isVisualRefresh && styles['flash-refresh'])}\n        key={key}\n        ref={transitionRootElement}\n        transitionState={transitionState}\n        i18nStrings={iconAriaLabels}\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      {renderFlatItemsWithTransitions()}\n      {renderFlatItemsWithoutTransitions()}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/flashbar/styles.css.js

@@ -1,55 +1,55 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_q3pin_153",
-  "enter": "awsui_enter_1q84n_q3pin_153",
-  "flash-body": "awsui_flash-body_1q84n_q3pin_167",
-  "flash-message": "awsui_flash-message_1q84n_q3pin_167",
-  "flash-header": "awsui_flash-header_1q84n_q3pin_167",
-  "flash-content": "awsui_flash-content_1q84n_q3pin_168",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_q3pin_169",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_q3pin_170",
-  "flash-icon": "awsui_flash-icon_1q84n_q3pin_193",
-  "entering": "awsui_entering_1q84n_q3pin_206",
-  "entered": "awsui_entered_1q84n_q3pin_227",
-  "exiting": "awsui_exiting_1q84n_q3pin_332",
-  "stack": "awsui_stack_1q84n_q3pin_366",
-  "animation-running": "awsui_animation-running_1q84n_q3pin_366",
-  "item": "awsui_item_1q84n_q3pin_366",
-  "flash-list-item": "awsui_flash-list-item_1q84n_q3pin_367",
-  "notification-bar": "awsui_notification-bar_1q84n_q3pin_368",
-  "collapsed": "awsui_collapsed_1q84n_q3pin_388",
-  "animation-ready": "awsui_animation-ready_1q84n_q3pin_388",
-  "expanded-only": "awsui_expanded-only_1q84n_q3pin_388",
-  "expanded": "awsui_expanded_1q84n_q3pin_388",
-  "flash": "awsui_flash_1q84n_q3pin_153",
-  "collapsible": "awsui_collapsible_1q84n_q3pin_444",
-  "short-list": "awsui_short-list_1q84n_q3pin_450",
-  "visual-refresh": "awsui_visual-refresh_1q84n_q3pin_450",
-  "status": "awsui_status_1q84n_q3pin_597",
-  "header": "awsui_header_1q84n_q3pin_597",
-  "item-count": "awsui_item-count_1q84n_q3pin_598",
-  "button": "awsui_button_1q84n_q3pin_599",
-  "type-count": "awsui_type-count_1q84n_q3pin_632",
-  "count-number": "awsui_count-number_1q84n_q3pin_632",
-  "icon": "awsui_icon_1q84n_q3pin_666",
-  "floating": "awsui_floating_1q84n_q3pin_707",
-  "flashbar": "awsui_flashbar_1q84n_q3pin_711",
-  "initial-hidden": "awsui_initial-hidden_1q84n_q3pin_772",
-  "flash-list": "awsui_flash-list_1q84n_q3pin_367",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_q3pin_794",
-  "flash-text": "awsui_flash-text_1q84n_q3pin_824",
-  "hidden": "awsui_hidden_1q84n_q3pin_843",
-  "header-replacement": "awsui_header-replacement_1q84n_q3pin_848",
-  "content-replacement": "awsui_content-replacement_1q84n_q3pin_853",
-  "dismiss-button": "awsui_dismiss-button_1q84n_q3pin_170",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_q3pin_872",
-  "action-button": "awsui_action-button_1q84n_q3pin_169",
-  "action-slot": "awsui_action-slot_1q84n_q3pin_882",
-  "flash-type-success": "awsui_flash-type-success_1q84n_q3pin_886",
-  "flash-type-error": "awsui_flash-type-error_1q84n_q3pin_890",
-  "flash-type-info": "awsui_flash-type-info_1q84n_q3pin_894",
-  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_q3pin_895",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_q3pin_899"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_yosmc_153",
+  "enter": "awsui_enter_1q84n_yosmc_153",
+  "flash-body": "awsui_flash-body_1q84n_yosmc_167",
+  "flash-message": "awsui_flash-message_1q84n_yosmc_167",
+  "flash-header": "awsui_flash-header_1q84n_yosmc_167",
+  "flash-content": "awsui_flash-content_1q84n_yosmc_168",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_yosmc_169",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_yosmc_170",
+  "flash-icon": "awsui_flash-icon_1q84n_yosmc_193",
+  "entering": "awsui_entering_1q84n_yosmc_206",
+  "entered": "awsui_entered_1q84n_yosmc_227",
+  "exiting": "awsui_exiting_1q84n_yosmc_332",
+  "stack": "awsui_stack_1q84n_yosmc_366",
+  "animation-running": "awsui_animation-running_1q84n_yosmc_366",
+  "item": "awsui_item_1q84n_yosmc_366",
+  "flash-list-item": "awsui_flash-list-item_1q84n_yosmc_367",
+  "notification-bar": "awsui_notification-bar_1q84n_yosmc_368",
+  "collapsed": "awsui_collapsed_1q84n_yosmc_388",
+  "animation-ready": "awsui_animation-ready_1q84n_yosmc_388",
+  "expanded-only": "awsui_expanded-only_1q84n_yosmc_388",
+  "expanded": "awsui_expanded_1q84n_yosmc_388",
+  "flash": "awsui_flash_1q84n_yosmc_153",
+  "collapsible": "awsui_collapsible_1q84n_yosmc_444",
+  "short-list": "awsui_short-list_1q84n_yosmc_450",
+  "visual-refresh": "awsui_visual-refresh_1q84n_yosmc_450",
+  "status": "awsui_status_1q84n_yosmc_597",
+  "header": "awsui_header_1q84n_yosmc_597",
+  "item-count": "awsui_item-count_1q84n_yosmc_598",
+  "button": "awsui_button_1q84n_yosmc_599",
+  "type-count": "awsui_type-count_1q84n_yosmc_632",
+  "count-number": "awsui_count-number_1q84n_yosmc_632",
+  "icon": "awsui_icon_1q84n_yosmc_666",
+  "floating": "awsui_floating_1q84n_yosmc_707",
+  "flashbar": "awsui_flashbar_1q84n_yosmc_711",
+  "initial-hidden": "awsui_initial-hidden_1q84n_yosmc_769",
+  "flash-list": "awsui_flash-list_1q84n_yosmc_367",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_yosmc_791",
+  "flash-text": "awsui_flash-text_1q84n_yosmc_821",
+  "hidden": "awsui_hidden_1q84n_yosmc_840",
+  "header-replacement": "awsui_header-replacement_1q84n_yosmc_845",
+  "content-replacement": "awsui_content-replacement_1q84n_yosmc_850",
+  "dismiss-button": "awsui_dismiss-button_1q84n_yosmc_170",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_yosmc_869",
+  "action-button": "awsui_action-button_1q84n_yosmc_169",
+  "action-slot": "awsui_action-slot_1q84n_yosmc_879",
+  "flash-type-success": "awsui_flash-type-success_1q84n_yosmc_883",
+  "flash-type-error": "awsui_flash-type-error_1q84n_yosmc_887",
+  "flash-type-info": "awsui_flash-type-info_1q84n_yosmc_891",
+  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_yosmc_892",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_yosmc_896"
 };