@cloudscape-design/components-themeable 3.0.1080 → 3.0.1081
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +84 -80
- package/lib/internal/template/alert/styles.css.js +27 -27
- package/lib/internal/template/alert/styles.scoped.css +46 -46
- package/lib/internal/template/alert/styles.selectors.js +27 -27
- package/lib/internal/template/annotation-context/annotation/styles.css.js +24 -24
- package/lib/internal/template/annotation-context/annotation/styles.scoped.css +32 -32
- package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
- package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
- package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
- package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
- package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +17 -17
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +39 -39
- package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +17 -17
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +7 -7
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +23 -23
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +46 -46
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +23 -23
- package/lib/internal/template/attribute-editor/styles.css.js +15 -15
- package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
- package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
- package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
- package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
- package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
- package/lib/internal/template/button/styles.css.js +22 -22
- package/lib/internal/template/button/styles.scoped.css +212 -212
- package/lib/internal/template/button/styles.selectors.js +22 -22
- package/lib/internal/template/button-dropdown/item-element/styles.css.js +16 -16
- package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +27 -27
- package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +16 -16
- package/lib/internal/template/button-group/index.d.ts.map +1 -1
- package/lib/internal/template/button-group/index.js +2 -2
- package/lib/internal/template/button-group/index.js.map +1 -1
- package/lib/internal/template/button-group/interfaces.d.ts +40 -0
- package/lib/internal/template/button-group/interfaces.d.ts.map +1 -1
- package/lib/internal/template/button-group/interfaces.js.map +1 -1
- package/lib/internal/template/button-group/internal.d.ts.map +1 -1
- package/lib/internal/template/button-group/internal.js +5 -3
- package/lib/internal/template/button-group/internal.js.map +1 -1
- package/lib/internal/template/button-group/item-element.d.ts +1 -0
- package/lib/internal/template/button-group/item-element.d.ts.map +1 -1
- package/lib/internal/template/button-group/item-element.js +4 -2
- package/lib/internal/template/button-group/item-element.js.map +1 -1
- package/lib/internal/template/button-group/style.d.ts +13 -0
- package/lib/internal/template/button-group/style.d.ts.map +1 -0
- package/lib/internal/template/button-group/style.js +37 -0
- package/lib/internal/template/button-group/style.js.map +1 -0
- package/lib/internal/template/checkbox/styles.css.js +3 -3
- package/lib/internal/template/checkbox/styles.scoped.css +11 -11
- package/lib/internal/template/checkbox/styles.selectors.js +3 -3
- package/lib/internal/template/content-layout/styles.css.js +14 -14
- package/lib/internal/template/content-layout/styles.scoped.css +27 -27
- package/lib/internal/template/content-layout/styles.selectors.js +14 -14
- package/lib/internal/template/flashbar/collapsible-flashbar.d.ts.map +1 -1
- package/lib/internal/template/flashbar/collapsible-flashbar.js +3 -5
- package/lib/internal/template/flashbar/collapsible-flashbar.js.map +1 -1
- package/lib/internal/template/flashbar/common.d.ts.map +1 -1
- package/lib/internal/template/flashbar/common.js +2 -5
- package/lib/internal/template/flashbar/common.js.map +1 -1
- package/lib/internal/template/flashbar/flash.d.ts +1 -1
- package/lib/internal/template/flashbar/flash.d.ts.map +1 -1
- package/lib/internal/template/flashbar/flash.js +4 -2
- package/lib/internal/template/flashbar/flash.js.map +1 -1
- package/lib/internal/template/flashbar/styles.css.js +50 -50
- package/lib/internal/template/flashbar/styles.scoped.css +187 -187
- package/lib/internal/template/flashbar/styles.selectors.js +50 -50
- package/lib/internal/template/flashbar/utils.d.ts +1 -1
- package/lib/internal/template/flashbar/utils.d.ts.map +1 -1
- package/lib/internal/template/flashbar/utils.js +1 -1
- package/lib/internal/template/flashbar/utils.js.map +1 -1
- package/lib/internal/template/help-panel/styles.css.js +6 -6
- package/lib/internal/template/help-panel/styles.scoped.css +73 -73
- package/lib/internal/template/help-panel/styles.selectors.js +6 -6
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +21 -21
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +44 -44
- package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +21 -21
- package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
- package/lib/internal/template/internal/components/dropdown/styles.scoped.css +38 -38
- package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
- package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
- package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
- package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +4 -0
- package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/lib/internal/template/internal/generated/custom-css-properties/index.js +83 -79
- package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
- package/lib/internal/template/link/styles.css.js +20 -20
- package/lib/internal/template/link/styles.scoped.css +103 -103
- package/lib/internal/template/link/styles.selectors.js +20 -20
- package/lib/internal/template/radio-group/styles.css.js +10 -10
- package/lib/internal/template/radio-group/styles.scoped.css +22 -22
- package/lib/internal/template/radio-group/styles.selectors.js +10 -10
- package/lib/internal/template/slider/styles.css.js +26 -26
- package/lib/internal/template/slider/styles.scoped.css +86 -86
- package/lib/internal/template/slider/styles.selectors.js +26 -26
- package/lib/internal/template/spinner/styles.css.js +13 -13
- package/lib/internal/template/spinner/styles.scoped.css +39 -39
- package/lib/internal/template/spinner/styles.selectors.js +13 -13
- package/lib/internal/template/tag-editor/styles.css.js +3 -3
- package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
- package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
- package/lib/internal/template/text-content/styles.css.js +1 -1
- package/lib/internal/template/text-content/styles.scoped.css +66 -66
- package/lib/internal/template/text-content/styles.selectors.js +1 -1
- package/lib/internal/template/toggle/styles.css.js +10 -10
- package/lib/internal/template/toggle/styles.scoped.css +23 -23
- package/lib/internal/template/toggle/styles.selectors.js +10 -10
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-element.js","sourceRoot":"","sources":["../../../src/button-group/item-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAKjH,OAAO,EAAE,mBAAmB,EAA6B,MAAM,oBAAoB,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,aAAa,MAAM,mBAAmB,CAAC;AAC9C,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,oBAAoB,MAAM,8BAA8B,CAAC;AAEhE,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AAEpD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAYrC,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EAAE,IAAI,EAAE,wBAAwB,EAAE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAoB,EAC/G,GAA+B,EAC/B,EAAE;IACF,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACtD,MAAM,iBAAiB,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAEhE,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;QAC9B,KAAK,EAAE,GAAG,EAAE;;YACV,MAAA,SAAS,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC3B,MAAA,YAAY,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YAC9B,MAAA,iBAAiB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;QACrC,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,MAAK,IAAI,CAAC,EAAE,EAAE;YAC7B,OAAO;SACR;QAED,MAAM,KAAK,GAAG,GAAG,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,CAAC;QAEF,MAAM,sBAAsB,GAAG,CAAC,KAAmB,EAAE,EAAE;;YACrD,IAAI,KAAK,CAAC,MAAM,KAAI,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,KAAK,CAAC,MAAqB,CAAC,CAAA,EAAE;gBAC/E,OAAO;aACR;YAED,KAAK,EAAE,CAAC;QACV,CAAC,CAAC;QAEF,MAAM,kBAAkB,GAAG,CAAC,KAAoB,EAAE,EAAE;YAClD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBAC1B,KAAK,EAAE,CAAC;aACT;QACH,CAAC,CAAC;QAEF,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,sBAAsB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QAC9F,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,kBAAkB,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QAEtF,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC;IAEnC,MAAM,iBAAiB,GAAG,CAAC,IAAa,EAAE,EAAE;QAC1C,IAAI,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAA,EAAE;YACtB,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;SAC9D;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,IAAa,EAAE,EAAE;QAC1C,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,MAAK,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,CAAA,EAAE;YACtC,OAAO;SACR;QAED,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,KAAqD,EAAE,EAAE;QAC/E,MAAM,kBAAkB,GAAG,iBAAiB,IAAI,IAAI,IAAI,IAAI,CAAC,eAAe,CAAC;QAE7E,IAAI,kBAAkB,EAAE;YACtB,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;SAC/C;QAED,mBAAmB,CAAC,WAAW,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACxD,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,KAAuD,EAAE,EAAE;QACvF,mBAAmB,CAAC,aAAa,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAExD,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,2CACE,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EACjC,GAAG,EAAE,YAAY,EACjB,cAAc,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAC7C,cAAc,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC9C,OAAO,EAAE,KAAK,CAAC,EAAE;YACf,qEAAqE;YACrE,2FAA2F;YAC3F,IAAI,KAAK,IAAI,KAAK,CAAC,aAAa,IAAI,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE;gBAC1F,OAAO;aACR;YACD,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAC1B,CAAC,EACD,MAAM,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAClC,CAAC,IAAI,CAAC,IAAI,KAAK,eAAe,IAAK,IAAoC,CAAC,QAAQ;QAClF,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,6BAA6B,CAAC,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC;QAExE,IAAI,CAAC,IAAI,KAAK,aAAa,IAAI,CAC9B,oBAAC,cAAc,IACb,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,cAAc,EAC3B,WAAW,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,MAAK,IAAI,CAAC,EAAE,EACtC,YAAY,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAA,EACjC,gBAAgB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,GACxC,CACH;QACA,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,CACrC,oBAAC,oBAAoB,IACnB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,cAAc,EAC3B,WAAW,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,MAAK,IAAI,CAAC,EAAE,EACtC,YAAY,EAAE,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,CAAA,EACjC,gBAAgB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,GACxC,CACH;QACA,IAAI,CAAC,IAAI,KAAK,iBAAiB,IAAI,CAClC,oBAAC,aAAa,IACZ,GAAG,EAAE,YAAY,EACjB,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,oBAAoB,EACnC,WAAW,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,MAAK,IAAI,CAAC,EAAE,EACtC,gBAAgB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,GACxC,CACH;QACA,IAAI,CAAC,IAAI,KAAK,eAAe,IAAI,CAChC,oBAAC,gBAAgB,IACf,GAAG,EAAE,iBAAiB,EACtB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,MAAK,IAAI,CAAC,EAAE,EACtC,WAAW,EAAE,cAAc,EAC3B,gBAAgB,EAAE,wBAAwB,EAC1C,gBAAgB,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EACxC,QAAQ,EAAE,QAAQ,GAClB,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces.js';\nimport { FileInputProps } from '../file-input/interfaces';\nimport { fireCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport FileInputItem from './file-input-item';\nimport IconButtonItem from './icon-button-item';\nimport IconToggleButtonItem from './icon-toggle-button-item.js';\nimport { ButtonGroupProps } from './interfaces';\nimport MenuDropdownItem from './menu-dropdown-item';\n\nimport styles from './styles.css.js';\n\ninterface ItemElementProps {\n item: ButtonGroupProps.Item;\n dropdownExpandToViewport?: boolean;\n tooltip: null | { item: string; feedback: boolean };\n setTooltip: (tooltip: null | { item: string; feedback: boolean }) => void;\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;\n onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails> | undefined;\n position: string;\n}\n\nconst ItemElement = forwardRef(\n (\n { item, dropdownExpandToViewport, tooltip, setTooltip, onItemClick, onFilesChange, position }: ItemElementProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<ButtonProps.Ref>(null);\n const fileInputRef = useRef<FileInputProps.Ref>(null);\n const buttonDropdownRef = useRef<ButtonDropdownProps.Ref>(null);\n\n useImperativeHandle(ref, () => ({\n focus: () => {\n buttonRef.current?.focus();\n fileInputRef.current?.focus();\n buttonDropdownRef.current?.focus();\n },\n }));\n\n useEffect(() => {\n if (tooltip?.item !== item.id) {\n return;\n }\n\n const close = () => {\n setTooltip(null);\n };\n\n const handlePointerDownEvent = (event: PointerEvent) => {\n if (event.target && containerRef.current?.contains(event.target as HTMLElement)) {\n return;\n }\n\n close();\n };\n\n const handleKeyDownEvent = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n close();\n }\n };\n\n const controller = new AbortController();\n window.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });\n window.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });\n\n return () => {\n controller.abort();\n };\n }, [item.id, tooltip, setTooltip]);\n\n const onShowTooltipSoft = (show: boolean) => {\n if (!tooltip?.feedback) {\n setTooltip(show ? { item: item.id, feedback: false } : null);\n }\n };\n\n const onShowTooltipHard = (show: boolean) => {\n if (!show && item.id !== tooltip?.item) {\n return;\n }\n\n setTooltip(show ? { item: item.id, feedback: false } : null);\n };\n\n const onClickHandler = (event: CustomEvent<ButtonGroupProps.ItemClickDetails>) => {\n const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n if (hasPopoverFeedback) {\n setTooltip({ item: item.id, feedback: true });\n }\n\n fireCancelableEvent(onItemClick, event.detail, event);\n };\n\n const onFilesChangeHandler = (event: CustomEvent<ButtonGroupProps.FilesChangeDetails>) => {\n fireCancelableEvent(onFilesChange, event.detail, event);\n\n setTooltip(null);\n };\n\n return (\n <div\n key={item.id}\n className={styles['item-wrapper']}\n ref={containerRef}\n onPointerEnter={() => onShowTooltipSoft(true)}\n onPointerLeave={() => onShowTooltipSoft(false)}\n onFocus={event => {\n // Showing no tooltip when the focus comes from inside the container.\n // This is needed to prevent the tooltip after a menu closes with item selection or Escape.\n if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {\n return;\n }\n onShowTooltipHard(true);\n }}\n onBlur={() => onShowTooltipHard(false)}\n {...(item.type === 'menu-dropdown' || (item as ButtonGroupProps.IconButton).disabled\n ? {}\n : getAnalyticsMetadataAttribute({ detail: { position, id: item.id } }))}\n >\n {item.type === 'icon-button' && (\n <IconButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n onTooltipDismiss={() => setTooltip(null)}\n />\n )}\n {item.type === 'icon-toggle-button' && (\n <IconToggleButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n onTooltipDismiss={() => setTooltip(null)}\n />\n )}\n {item.type === 'icon-file-input' && (\n <FileInputItem\n ref={fileInputRef}\n item={item}\n onFilesChange={onFilesChangeHandler}\n showTooltip={tooltip?.item === item.id}\n onTooltipDismiss={() => setTooltip(null)}\n />\n )}\n {item.type === 'menu-dropdown' && (\n <MenuDropdownItem\n ref={buttonDropdownRef}\n item={item}\n showTooltip={tooltip?.item === item.id}\n onItemClick={onClickHandler}\n expandToViewport={dropdownExpandToViewport}\n onTooltipDismiss={() => setTooltip(null)}\n position={position}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ItemElement;\n"]}
|
|
1
|
+
{"version":3,"file":"item-element.js","sourceRoot":"","sources":["../../../src/button-group/item-element.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, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { ButtonProps } from '../button/interfaces.js';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces.js';\nimport { FileInputProps } from '../file-input/interfaces';\nimport { fireCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport FileInputItem from './file-input-item';\nimport IconButtonItem from './icon-button-item';\nimport IconToggleButtonItem from './icon-toggle-button-item.js';\nimport { ButtonGroupProps } from './interfaces';\nimport MenuDropdownItem from './menu-dropdown-item';\nimport { getButtonGroupItemStyles } from './style';\n\nimport styles from './styles.css.js';\n\ninterface ItemElementProps {\n item: ButtonGroupProps.Item;\n dropdownExpandToViewport?: boolean;\n tooltip: null | { item: string; feedback: boolean };\n setTooltip: (tooltip: null | { item: string; feedback: boolean }) => void;\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails> | undefined;\n onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails> | undefined;\n position: string;\n style?: ButtonGroupProps.Style;\n}\n\nconst ItemElement = forwardRef(\n (\n {\n item,\n dropdownExpandToViewport,\n tooltip,\n setTooltip,\n onItemClick,\n onFilesChange,\n position,\n style,\n }: ItemElementProps,\n ref: React.Ref<ButtonProps.Ref>\n ) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const buttonRef = useRef<ButtonProps.Ref>(null);\n const fileInputRef = useRef<FileInputProps.Ref>(null);\n const buttonDropdownRef = useRef<ButtonDropdownProps.Ref>(null);\n\n useImperativeHandle(ref, () => ({\n focus: () => {\n buttonRef.current?.focus();\n fileInputRef.current?.focus();\n buttonDropdownRef.current?.focus();\n },\n }));\n\n useEffect(() => {\n if (tooltip?.item !== item.id) {\n return;\n }\n\n const close = () => {\n setTooltip(null);\n };\n\n const handlePointerDownEvent = (event: PointerEvent) => {\n if (event.target && containerRef.current?.contains(event.target as HTMLElement)) {\n return;\n }\n\n close();\n };\n\n const handleKeyDownEvent = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n close();\n }\n };\n\n const controller = new AbortController();\n window.addEventListener('pointerdown', handlePointerDownEvent, { signal: controller.signal });\n window.addEventListener('keydown', handleKeyDownEvent, { signal: controller.signal });\n\n return () => {\n controller.abort();\n };\n }, [item.id, tooltip, setTooltip]);\n\n const onShowTooltipSoft = (show: boolean) => {\n if (!tooltip?.feedback) {\n setTooltip(show ? { item: item.id, feedback: false } : null);\n }\n };\n\n const onShowTooltipHard = (show: boolean) => {\n if (!show && item.id !== tooltip?.item) {\n return;\n }\n\n setTooltip(show ? { item: item.id, feedback: false } : null);\n };\n\n const onClickHandler = (event: CustomEvent<ButtonGroupProps.ItemClickDetails>) => {\n const hasPopoverFeedback = 'popoverFeedback' in item && item.popoverFeedback;\n\n if (hasPopoverFeedback) {\n setTooltip({ item: item.id, feedback: true });\n }\n\n fireCancelableEvent(onItemClick, event.detail, event);\n };\n\n const onFilesChangeHandler = (event: CustomEvent<ButtonGroupProps.FilesChangeDetails>) => {\n fireCancelableEvent(onFilesChange, event.detail, event);\n\n setTooltip(null);\n };\n\n const itemStylePropertiesAndVariables = getButtonGroupItemStyles(style);\n\n return (\n <div\n key={item.id}\n className={styles['item-wrapper']}\n ref={containerRef}\n onPointerEnter={() => onShowTooltipSoft(true)}\n onPointerLeave={() => onShowTooltipSoft(false)}\n onFocus={event => {\n // Showing no tooltip when the focus comes from inside the container.\n // This is needed to prevent the tooltip after a menu closes with item selection or Escape.\n if (event && event.relatedTarget && nodeBelongs(containerRef.current, event.relatedTarget)) {\n return;\n }\n onShowTooltipHard(true);\n }}\n onBlur={() => onShowTooltipHard(false)}\n style={itemStylePropertiesAndVariables}\n {...(item.type === 'menu-dropdown' || (item as ButtonGroupProps.IconButton).disabled\n ? {}\n : getAnalyticsMetadataAttribute({ detail: { position, id: item.id } }))}\n >\n {item.type === 'icon-button' && (\n <IconButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n onTooltipDismiss={() => setTooltip(null)}\n />\n )}\n {item.type === 'icon-toggle-button' && (\n <IconToggleButtonItem\n ref={buttonRef}\n item={item}\n onItemClick={onClickHandler}\n showTooltip={tooltip?.item === item.id}\n showFeedback={!!tooltip?.feedback}\n onTooltipDismiss={() => setTooltip(null)}\n />\n )}\n {item.type === 'icon-file-input' && (\n <FileInputItem\n ref={fileInputRef}\n item={item}\n onFilesChange={onFilesChangeHandler}\n showTooltip={tooltip?.item === item.id}\n onTooltipDismiss={() => setTooltip(null)}\n />\n )}\n {item.type === 'menu-dropdown' && (\n <MenuDropdownItem\n ref={buttonDropdownRef}\n item={item}\n showTooltip={tooltip?.item === item.id}\n onItemClick={onClickHandler}\n expandToViewport={dropdownExpandToViewport}\n onTooltipDismiss={() => setTooltip(null)}\n position={position}\n />\n )}\n </div>\n );\n }\n);\n\nexport default ItemElement;\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ButtonGroupProps } from './interfaces';
|
|
2
|
+
export declare function getButtonGroupStyles(style: ButtonGroupProps['style']): {
|
|
3
|
+
borderRadius: string | undefined;
|
|
4
|
+
borderWidth: string | undefined;
|
|
5
|
+
borderStyle: string | undefined;
|
|
6
|
+
boxShadow: string | undefined;
|
|
7
|
+
paddingBlock: string | undefined;
|
|
8
|
+
paddingInline: string | undefined;
|
|
9
|
+
background: string | undefined;
|
|
10
|
+
borderColor: string | undefined;
|
|
11
|
+
} | undefined;
|
|
12
|
+
export declare function getButtonGroupItemStyles(style: ButtonGroupProps['style']): React.CSSProperties | undefined;
|
|
13
|
+
//# sourceMappingURL=style.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/button-group/style.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC;;;;;;;;;cAoBpE;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,GAAG,KAAK,CAAC,aAAa,GAAG,SAAS,CAwB1G"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { SYSTEM } from '../internal/environment';
|
|
4
|
+
import customCssProps from '../internal/generated/custom-css-properties';
|
|
5
|
+
export function getButtonGroupStyles(style) {
|
|
6
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
7
|
+
if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.root)) {
|
|
8
|
+
return undefined;
|
|
9
|
+
}
|
|
10
|
+
return Object.assign({ borderRadius: (_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.borderRadius, borderWidth: (_b = style === null || style === void 0 ? void 0 : style.root) === null || _b === void 0 ? void 0 : _b.borderWidth, borderStyle: ((_c = style === null || style === void 0 ? void 0 : style.root) === null || _c === void 0 ? void 0 : _c.borderWidth) ? 'solid' : undefined, boxShadow: (_d = style === null || style === void 0 ? void 0 : style.root) === null || _d === void 0 ? void 0 : _d.boxShadow, paddingBlock: (_e = style === null || style === void 0 ? void 0 : style.root) === null || _e === void 0 ? void 0 : _e.paddingBlock, paddingInline: (_f = style === null || style === void 0 ? void 0 : style.root) === null || _f === void 0 ? void 0 : _f.paddingInline, background: (_g = style === null || style === void 0 ? void 0 : style.root) === null || _g === void 0 ? void 0 : _g.background, borderColor: (_h = style === null || style === void 0 ? void 0 : style.root) === null || _h === void 0 ? void 0 : _h.borderColor }, (((_j = style === null || style === void 0 ? void 0 : style.root) === null || _j === void 0 ? void 0 : _j.focusRing) && {
|
|
11
|
+
[customCssProps.styleFocusRingBorderColor]: (_k = style.root.focusRing) === null || _k === void 0 ? void 0 : _k.borderColor,
|
|
12
|
+
[customCssProps.styleFocusRingBorderRadius]: (_l = style.root.focusRing) === null || _l === void 0 ? void 0 : _l.borderRadius,
|
|
13
|
+
[customCssProps.styleFocusRingBorderWidth]: (_m = style.root.focusRing) === null || _m === void 0 ? void 0 : _m.borderWidth,
|
|
14
|
+
}));
|
|
15
|
+
}
|
|
16
|
+
export function getButtonGroupItemStyles(style) {
|
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
18
|
+
if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.item)) {
|
|
19
|
+
return undefined;
|
|
20
|
+
}
|
|
21
|
+
return Object.assign(Object.assign(Object.assign({}, (((_a = style === null || style === void 0 ? void 0 : style.item) === null || _a === void 0 ? void 0 : _a.color) && {
|
|
22
|
+
[customCssProps.styleColorActive]: (_b = style.item.color) === null || _b === void 0 ? void 0 : _b.active,
|
|
23
|
+
[customCssProps.styleColorDefault]: (_c = style.item.color) === null || _c === void 0 ? void 0 : _c.default,
|
|
24
|
+
[customCssProps.styleColorDisabled]: (_d = style.item.color) === null || _d === void 0 ? void 0 : _d.disabled,
|
|
25
|
+
[customCssProps.styleColorHover]: (_e = style.item.color) === null || _e === void 0 ? void 0 : _e.hover,
|
|
26
|
+
})), (((_f = style === null || style === void 0 ? void 0 : style.item) === null || _f === void 0 ? void 0 : _f.boxShadow) && {
|
|
27
|
+
[customCssProps.styleBoxShadowActive]: (_g = style.item.boxShadow) === null || _g === void 0 ? void 0 : _g.active,
|
|
28
|
+
[customCssProps.styleBoxShadowDefault]: (_h = style.item.boxShadow) === null || _h === void 0 ? void 0 : _h.default,
|
|
29
|
+
[customCssProps.styleBoxShadowDisabled]: (_j = style.item.boxShadow) === null || _j === void 0 ? void 0 : _j.disabled,
|
|
30
|
+
[customCssProps.styleBoxShadowHover]: (_k = style.item.boxShadow) === null || _k === void 0 ? void 0 : _k.hover,
|
|
31
|
+
})), (((_l = style === null || style === void 0 ? void 0 : style.item) === null || _l === void 0 ? void 0 : _l.focusRing) && {
|
|
32
|
+
[customCssProps.styleFocusRingBorderColor]: (_m = style.item.focusRing) === null || _m === void 0 ? void 0 : _m.borderColor,
|
|
33
|
+
[customCssProps.styleFocusRingBorderRadius]: (_o = style.item.focusRing) === null || _o === void 0 ? void 0 : _o.borderRadius,
|
|
34
|
+
[customCssProps.styleFocusRingBorderWidth]: (_p = style.item.focusRing) === null || _p === void 0 ? void 0 : _p.borderWidth,
|
|
35
|
+
}));
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=style.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/button-group/style.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 { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { ButtonGroupProps } from './interfaces';\n\nexport function getButtonGroupStyles(style: ButtonGroupProps['style']) {\n if (SYSTEM !== 'core' || !style?.root) {\n return undefined;\n }\n\n return {\n borderRadius: style?.root?.borderRadius,\n borderWidth: style?.root?.borderWidth,\n borderStyle: style?.root?.borderWidth ? 'solid' : undefined,\n boxShadow: style?.root?.boxShadow,\n paddingBlock: style?.root?.paddingBlock,\n paddingInline: style?.root?.paddingInline,\n background: style?.root?.background,\n borderColor: style?.root?.borderColor,\n ...(style?.root?.focusRing && {\n [customCssProps.styleFocusRingBorderColor]: style.root.focusRing?.borderColor,\n [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing?.borderRadius,\n [customCssProps.styleFocusRingBorderWidth]: style.root.focusRing?.borderWidth,\n }),\n };\n}\n\nexport function getButtonGroupItemStyles(style: ButtonGroupProps['style']): React.CSSProperties | undefined {\n if (SYSTEM !== 'core' || !style?.item) {\n return undefined;\n }\n\n return {\n ...(style?.item?.color && {\n [customCssProps.styleColorActive]: style.item.color?.active,\n [customCssProps.styleColorDefault]: style.item.color?.default,\n [customCssProps.styleColorDisabled]: style.item.color?.disabled,\n [customCssProps.styleColorHover]: style.item.color?.hover,\n }),\n ...(style?.item?.boxShadow && {\n [customCssProps.styleBoxShadowActive]: style.item.boxShadow?.active,\n [customCssProps.styleBoxShadowDefault]: style.item.boxShadow?.default,\n [customCssProps.styleBoxShadowDisabled]: style.item.boxShadow?.disabled,\n [customCssProps.styleBoxShadowHover]: style.item.boxShadow?.hover,\n }),\n ...(style?.item?.focusRing && {\n [customCssProps.styleFocusRingBorderColor]: style.item.focusRing?.borderColor,\n [customCssProps.styleFocusRingBorderRadius]: style.item.focusRing?.borderRadius,\n [customCssProps.styleFocusRingBorderWidth]: style.item.focusRing?.borderWidth,\n }),\n };\n}\n"]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"checkbox-control": "awsui_checkbox-
|
|
6
|
-
"outline": "
|
|
4
|
+
"root": "awsui_root_k2y2q_1hv8m_145",
|
|
5
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_1hv8m_178",
|
|
6
|
+
"outline": "awsui_outline_k2y2q_1hv8m_186"
|
|
7
7
|
};
|
|
8
8
|
|
|
@@ -142,7 +142,7 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.
|
|
145
|
+
.awsui_root_k2y2q_1hv8m_145.awsui_root_k2y2q_1hv8m_145:not(#\9) {
|
|
146
146
|
border-collapse: separate;
|
|
147
147
|
border-spacing: 0;
|
|
148
148
|
box-sizing: border-box;
|
|
@@ -175,7 +175,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
175
175
|
display: flex;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
.awsui_checkbox-
|
|
178
|
+
.awsui_checkbox-control_k2y2q_1hv8m_178:not(#\9) {
|
|
179
179
|
margin-block-start: calc((var(--line-height-body-m-bedeoh, 22px) - var(--size-control-lkpwjy, 14px)) / 2);
|
|
180
180
|
min-block-size: var(--size-control-lkpwjy, 14px);
|
|
181
181
|
min-inline-size: var(--size-control-lkpwjy, 14px);
|
|
@@ -183,15 +183,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
183
183
|
inline-size: var(--size-control-lkpwjy, 14px);
|
|
184
184
|
}
|
|
185
185
|
|
|
186
|
-
.
|
|
187
|
-
--awsui-style-focus-ring-box-shadow-
|
|
186
|
+
.awsui_outline_k2y2q_1hv8m_186:not(#\9) {
|
|
187
|
+
--awsui-style-focus-ring-box-shadow-kiajpc: 0 0 0 var(--awsui-style-focus-ring-border-width-kiajpc, 2px) var(--awsui-style-focus-ring-border-color-kiajpc, var(--color-border-item-focused-r5f6xl, #0073bb));
|
|
188
188
|
position: relative;
|
|
189
189
|
}
|
|
190
|
-
.
|
|
190
|
+
.awsui_outline_k2y2q_1hv8m_186:not(#\9) {
|
|
191
191
|
outline: 2px dotted transparent;
|
|
192
192
|
outline-offset: calc(2px - 1px);
|
|
193
193
|
}
|
|
194
|
-
.
|
|
194
|
+
.awsui_outline_k2y2q_1hv8m_186:not(#\9)::before {
|
|
195
195
|
content: " ";
|
|
196
196
|
display: block;
|
|
197
197
|
position: absolute;
|
|
@@ -199,9 +199,9 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
199
199
|
inset-block-start: calc(-1 * 2px);
|
|
200
200
|
inline-size: calc(100% + 2px + 2px);
|
|
201
201
|
block-size: calc(100% + 2px + 2px);
|
|
202
|
-
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-
|
|
203
|
-
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-
|
|
204
|
-
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-
|
|
205
|
-
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-
|
|
206
|
-
box-shadow: var(--awsui-style-focus-ring-box-shadow-
|
|
202
|
+
border-start-start-radius: var(--awsui-style-focus-ring-border-radius-kiajpc, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
|
|
203
|
+
border-start-end-radius: var(--awsui-style-focus-ring-border-radius-kiajpc, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
|
|
204
|
+
border-end-start-radius: var(--awsui-style-focus-ring-border-radius-kiajpc, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
|
|
205
|
+
border-end-end-radius: var(--awsui-style-focus-ring-border-radius-kiajpc, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
|
|
206
|
+
box-shadow: var(--awsui-style-focus-ring-box-shadow-kiajpc);
|
|
207
207
|
}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"root": "
|
|
6
|
-
"checkbox-control": "awsui_checkbox-
|
|
7
|
-
"outline": "
|
|
5
|
+
"root": "awsui_root_k2y2q_1hv8m_145",
|
|
6
|
+
"checkbox-control": "awsui_checkbox-control_k2y2q_1hv8m_178",
|
|
7
|
+
"outline": "awsui_outline_k2y2q_1hv8m_186"
|
|
8
8
|
};
|
|
9
9
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"layout": "
|
|
5
|
-
"background": "
|
|
6
|
-
"is-overlap-disabled": "awsui_is-overlap-
|
|
7
|
-
"header-background": "awsui_header-
|
|
8
|
-
"notifications": "
|
|
9
|
-
"breadcrumbs": "
|
|
10
|
-
"default-padding": "awsui_default-
|
|
11
|
-
"header-wrapper": "awsui_header-
|
|
12
|
-
"with-divider": "awsui_with-
|
|
13
|
-
"content": "
|
|
14
|
-
"has-header": "awsui_has-
|
|
15
|
-
"is-visual-refresh": "awsui_is-visual-
|
|
16
|
-
"has-default-background": "awsui_has-default-
|
|
17
|
-
"has-notifications": "awsui_has-
|
|
4
|
+
"layout": "awsui_layout_5gtk3_ou4gf_145",
|
|
5
|
+
"background": "awsui_background_5gtk3_ou4gf_159",
|
|
6
|
+
"is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_ou4gf_164",
|
|
7
|
+
"header-background": "awsui_header-background_5gtk3_ou4gf_167",
|
|
8
|
+
"notifications": "awsui_notifications_5gtk3_ou4gf_171",
|
|
9
|
+
"breadcrumbs": "awsui_breadcrumbs_5gtk3_ou4gf_176",
|
|
10
|
+
"default-padding": "awsui_default-padding_5gtk3_ou4gf_181",
|
|
11
|
+
"header-wrapper": "awsui_header-wrapper_5gtk3_ou4gf_185",
|
|
12
|
+
"with-divider": "awsui_with-divider_5gtk3_ou4gf_190",
|
|
13
|
+
"content": "awsui_content_5gtk3_ou4gf_193",
|
|
14
|
+
"has-header": "awsui_has-header_5gtk3_ou4gf_197",
|
|
15
|
+
"is-visual-refresh": "awsui_is-visual-refresh_5gtk3_ou4gf_204",
|
|
16
|
+
"has-default-background": "awsui_has-default-background_5gtk3_ou4gf_204",
|
|
17
|
+
"has-notifications": "awsui_has-notifications_5gtk3_ou4gf_208"
|
|
18
18
|
};
|
|
19
19
|
|
|
@@ -142,72 +142,72 @@
|
|
|
142
142
|
*/
|
|
143
143
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
144
144
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
145
|
-
.
|
|
146
|
-
--awsui-content-layout-default-horizontal-padding-
|
|
147
|
-
--awsui-content-layout-max-content-width-
|
|
148
|
-
--awsui-content-layout-main-gap-
|
|
145
|
+
.awsui_layout_5gtk3_ou4gf_145:not(#\9) {
|
|
146
|
+
--awsui-content-layout-default-horizontal-padding-kiajpc: var(--space-layout-content-horizontal-q3zhej, 40px);
|
|
147
|
+
--awsui-content-layout-max-content-width-kiajpc: 0px;
|
|
148
|
+
--awsui-content-layout-main-gap-kiajpc: 0px;
|
|
149
149
|
display: grid;
|
|
150
|
-
grid-template-columns: 0 0 1fr minmax(0, var(--awsui-content-layout-max-content-width-
|
|
151
|
-
grid-template-rows: var(--awsui-content-layout-main-gap-
|
|
150
|
+
grid-template-columns: 0 0 1fr minmax(0, var(--awsui-content-layout-max-content-width-kiajpc)) 1fr 0 0;
|
|
151
|
+
grid-template-rows: var(--awsui-content-layout-main-gap-kiajpc) min-content min-content auto var(--space-dark-header-overlap-distance-45h6a9, 0px) 1fr;
|
|
152
152
|
min-block-size: 100%;
|
|
153
153
|
}
|
|
154
154
|
@media (max-width: 688px) {
|
|
155
|
-
.
|
|
156
|
-
--awsui-content-layout-default-horizontal-padding-
|
|
155
|
+
.awsui_layout_5gtk3_ou4gf_145:not(#\9) {
|
|
156
|
+
--awsui-content-layout-default-horizontal-padding-kiajpc: var(--space-l-3cws6j, 20px);
|
|
157
157
|
}
|
|
158
158
|
}
|
|
159
|
-
.
|
|
159
|
+
.awsui_layout_5gtk3_ou4gf_145 > .awsui_background_5gtk3_ou4gf_159:not(#\9) {
|
|
160
160
|
grid-column: 1/8;
|
|
161
161
|
grid-row: 1/6;
|
|
162
162
|
color: var(--color-text-body-default-5qid0u, #16191f);
|
|
163
163
|
}
|
|
164
|
-
.
|
|
164
|
+
.awsui_layout_5gtk3_ou4gf_145 > .awsui_background_5gtk3_ou4gf_159.awsui_is-overlap-disabled_5gtk3_ou4gf_164:not(#\9) {
|
|
165
165
|
grid-row: 1/5;
|
|
166
166
|
}
|
|
167
|
-
.
|
|
167
|
+
.awsui_layout_5gtk3_ou4gf_145 > .awsui_background_5gtk3_ou4gf_159 > .awsui_header-background_5gtk3_ou4gf_167:not(#\9) {
|
|
168
168
|
inline-size: 100%;
|
|
169
169
|
block-size: 100%;
|
|
170
170
|
}
|
|
171
|
-
.
|
|
171
|
+
.awsui_layout_5gtk3_ou4gf_145 > .awsui_notifications_5gtk3_ou4gf_171:not(#\9) {
|
|
172
172
|
grid-column: 4;
|
|
173
173
|
grid-row: 2;
|
|
174
174
|
padding-block-end: var(--space-xs-kw7k3v, 8px);
|
|
175
175
|
}
|
|
176
|
-
.
|
|
176
|
+
.awsui_layout_5gtk3_ou4gf_145 > .awsui_breadcrumbs_5gtk3_ou4gf_176:not(#\9) {
|
|
177
177
|
grid-column: 4;
|
|
178
178
|
grid-row: 3;
|
|
179
179
|
padding-block-end: var(--space-xs-kw7k3v, 8px);
|
|
180
180
|
}
|
|
181
|
-
.
|
|
182
|
-
--awsui-content-layout-main-gap-
|
|
183
|
-
grid-template-columns: var(--awsui-toggles-left-width-
|
|
181
|
+
.awsui_layout_5gtk3_ou4gf_145.awsui_default-padding_5gtk3_ou4gf_181:not(#\9) {
|
|
182
|
+
--awsui-content-layout-main-gap-kiajpc: var(--space-scaled-m-sw9kcx, 16px);
|
|
183
|
+
grid-template-columns: var(--awsui-toggles-left-width-kiajpc, 0) var(--awsui-content-layout-default-horizontal-padding-kiajpc, 0) 1fr minmax(0, var(--awsui-content-layout-max-content-width-kiajpc)) 1fr var(--awsui-content-layout-default-horizontal-padding-kiajpc, 0) var(--awsui-toggles-right-width-kiajpc, 0);
|
|
184
184
|
}
|
|
185
|
-
.
|
|
185
|
+
.awsui_layout_5gtk3_ou4gf_145 > .awsui_header-wrapper_5gtk3_ou4gf_185:not(#\9) {
|
|
186
186
|
grid-column: 4;
|
|
187
187
|
grid-row: 4;
|
|
188
188
|
padding-block-end: var(--space-content-header-padding-bottom-hjkugf, 16px);
|
|
189
189
|
}
|
|
190
|
-
.
|
|
190
|
+
.awsui_layout_5gtk3_ou4gf_145 > .awsui_header-wrapper_5gtk3_ou4gf_185.awsui_with-divider_5gtk3_ou4gf_190:not(#\9) {
|
|
191
191
|
border-block-end: 1px solid var(--color-border-divider-default-ipvpev, #eaeded);
|
|
192
192
|
}
|
|
193
|
-
.
|
|
193
|
+
.awsui_layout_5gtk3_ou4gf_145 > .awsui_content_5gtk3_ou4gf_193:not(#\9) {
|
|
194
194
|
grid-column: 4;
|
|
195
195
|
grid-row: 5/8;
|
|
196
196
|
}
|
|
197
|
-
.
|
|
198
|
-
grid-template-rows: var(--awsui-content-layout-main-gap-
|
|
197
|
+
.awsui_layout_5gtk3_ou4gf_145:not(#\9):not(.awsui_has-header_5gtk3_ou4gf_197) {
|
|
198
|
+
grid-template-rows: var(--awsui-content-layout-main-gap-kiajpc) min-content min-content 0 calc(var(--space-dark-header-overlap-distance-45h6a9, 0px)) 1fr;
|
|
199
199
|
}
|
|
200
|
-
.
|
|
201
|
-
grid-template-rows: var(--awsui-content-layout-main-gap-
|
|
200
|
+
.awsui_layout_5gtk3_ou4gf_145.awsui_is-overlap-disabled_5gtk3_ou4gf_164:not(#\9) {
|
|
201
|
+
grid-template-rows: var(--awsui-content-layout-main-gap-kiajpc) min-content min-content auto 0 1fr;
|
|
202
202
|
}
|
|
203
203
|
|
|
204
|
-
.
|
|
204
|
+
.awsui_layout_5gtk3_ou4gf_145.awsui_is-visual-refresh_5gtk3_ou4gf_204 > .awsui_background_5gtk3_ou4gf_159.awsui_has-default-background_5gtk3_ou4gf_204:not(#\9) {
|
|
205
205
|
background-color: var(--color-background-layout-main-05m5y6, #f2f3f3);
|
|
206
206
|
}
|
|
207
207
|
|
|
208
|
-
.
|
|
209
|
-
--awsui-content-layout-main-gap-
|
|
208
|
+
.awsui_layout_5gtk3_ou4gf_145:not(#\9):not(.awsui_is-visual-refresh_5gtk3_ou4gf_204).awsui_has-notifications_5gtk3_ou4gf_208 {
|
|
209
|
+
--awsui-content-layout-main-gap-kiajpc: 0px;
|
|
210
210
|
}
|
|
211
|
-
.
|
|
211
|
+
.awsui_layout_5gtk3_ou4gf_145:not(#\9):not(.awsui_is-visual-refresh_5gtk3_ou4gf_204) > .awsui_notifications_5gtk3_ou4gf_171 {
|
|
212
212
|
grid-column: 1/8;
|
|
213
213
|
}
|
|
@@ -2,19 +2,19 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"layout": "
|
|
6
|
-
"background": "
|
|
7
|
-
"is-overlap-disabled": "awsui_is-overlap-
|
|
8
|
-
"header-background": "awsui_header-
|
|
9
|
-
"notifications": "
|
|
10
|
-
"breadcrumbs": "
|
|
11
|
-
"default-padding": "awsui_default-
|
|
12
|
-
"header-wrapper": "awsui_header-
|
|
13
|
-
"with-divider": "awsui_with-
|
|
14
|
-
"content": "
|
|
15
|
-
"has-header": "awsui_has-
|
|
16
|
-
"is-visual-refresh": "awsui_is-visual-
|
|
17
|
-
"has-default-background": "awsui_has-default-
|
|
18
|
-
"has-notifications": "awsui_has-
|
|
5
|
+
"layout": "awsui_layout_5gtk3_ou4gf_145",
|
|
6
|
+
"background": "awsui_background_5gtk3_ou4gf_159",
|
|
7
|
+
"is-overlap-disabled": "awsui_is-overlap-disabled_5gtk3_ou4gf_164",
|
|
8
|
+
"header-background": "awsui_header-background_5gtk3_ou4gf_167",
|
|
9
|
+
"notifications": "awsui_notifications_5gtk3_ou4gf_171",
|
|
10
|
+
"breadcrumbs": "awsui_breadcrumbs_5gtk3_ou4gf_176",
|
|
11
|
+
"default-padding": "awsui_default-padding_5gtk3_ou4gf_181",
|
|
12
|
+
"header-wrapper": "awsui_header-wrapper_5gtk3_ou4gf_185",
|
|
13
|
+
"with-divider": "awsui_with-divider_5gtk3_ou4gf_190",
|
|
14
|
+
"content": "awsui_content_5gtk3_ou4gf_193",
|
|
15
|
+
"has-header": "awsui_has-header_5gtk3_ou4gf_197",
|
|
16
|
+
"is-visual-refresh": "awsui_is-visual-refresh_5gtk3_ou4gf_204",
|
|
17
|
+
"has-default-background": "awsui_has-default-background_5gtk3_ou4gf_204",
|
|
18
|
+
"has-notifications": "awsui_has-notifications_5gtk3_ou4gf_208"
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"collapsible-flashbar.d.ts","sourceRoot":"","sources":["../../../src/flashbar/collapsible-flashbar.tsx"],"names":[],"mappings":";AA2BA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAY7C,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eAoVxF"}
|
|
@@ -13,7 +13,6 @@ import { animate, getDOMRects } from '../internal/animate';
|
|
|
13
13
|
import { Transition } from '../internal/components/transition';
|
|
14
14
|
import { getVisualContextClassname } from '../internal/components/visual-context';
|
|
15
15
|
import customCssProps from '../internal/generated/custom-css-properties';
|
|
16
|
-
import { useDebounceCallback } from '../internal/hooks/use-debounce-callback';
|
|
17
16
|
import { useEffectOnUpdate } from '../internal/hooks/use-effect-on-update';
|
|
18
17
|
import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
|
|
19
18
|
import { throttle } from '../internal/utils/throttle';
|
|
@@ -21,7 +20,7 @@ import { getComponentsAnalyticsMetadata, getItemAnalyticsMetadata } from './anal
|
|
|
21
20
|
import { useFlashbar } from './common';
|
|
22
21
|
import { Flash, focusFlashById } from './flash';
|
|
23
22
|
import { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';
|
|
24
|
-
import { counterTypes,
|
|
23
|
+
import { counterTypes, getFlashTypeCount, getItemColor, getVisibleCollapsedItems } from './utils';
|
|
25
24
|
import styles from './styles.css.js';
|
|
26
25
|
// If the number of items is equal or less than this value,
|
|
27
26
|
// the toggle element will not be displayed and the Flashbar will look like a regular single-item Flashbar.
|
|
@@ -70,17 +69,16 @@ export default function CollapsibleFlashbar(_a) {
|
|
|
70
69
|
}
|
|
71
70
|
setIsFlashbarStackExpanded(prev => !prev);
|
|
72
71
|
}
|
|
73
|
-
const debouncedFocus = useDebounceCallback(focusFlashById, FOCUS_DEBOUNCE_DELAY);
|
|
74
72
|
useLayoutEffect(() => {
|
|
75
73
|
if (isFlashbarStackExpanded && (items === null || items === void 0 ? void 0 : items.length)) {
|
|
76
74
|
const mostRecentItem = items[0];
|
|
77
75
|
if (mostRecentItem.id !== undefined) {
|
|
78
|
-
|
|
76
|
+
focusFlashById(ref.current, mostRecentItem.id);
|
|
79
77
|
}
|
|
80
78
|
}
|
|
81
79
|
// Run this after expanding, but not every time the items change.
|
|
82
80
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
83
|
-
}, [
|
|
81
|
+
}, [isFlashbarStackExpanded]);
|
|
84
82
|
// When collapsing, scroll up if necessary to avoid losing track of the focused button
|
|
85
83
|
useEffectOnUpdate(() => {
|
|
86
84
|
if (!isFlashbarStackExpanded && notificationBarRef.current) {
|
|
@@ -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 } 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 }: FlashbarProps) {\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 { 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 } from './interfaces';\nimport { getCollapsibleFlashStyles, getNotificationBarStyles } from './style';\nimport { counterTypes, getFlashTypeCount, getItemColor, getVisibleCollapsedItems, StackableItem } 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 }: FlashbarProps) {\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 useLayoutEffect(() => {\n if (isFlashbarStackExpanded && items?.length) {\n const mostRecentItem = items[0];\n if (mostRecentItem.id !== undefined) {\n focusFlashById(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 }, [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 +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":";AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,eAAO,MAAM,4BAA4B,gBAC1B,MAAM,GAAG,SAAS,SACxB,cAAc,cAAc,iBAAiB,CAAC,GAAG,SAAS,cACrD,cAAc,GAAG,IAAI,oBACf,OAAO,MAAM,GAAG,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC,SA8CjE,CAAC;AAGF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,YAAY,EACZ,cAAc,EACd,cAAc,EACd,GAAG,SAAS,EACb,EAAE,aAAa,GAAG;IACjB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC;IAClE,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,iBAAiB,EAAE,KAAK,IAAI,CAAC;IACpE,cAAc,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE;QAAE,cAAc,CAAC,EAAE,OAAO,CAAC;QAAC,eAAe,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAC9F;;;;;;;;yCA+C6C,MAAM;EAcnD"}
|