@cloudscape-design/components 3.0.685 → 3.0.687
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/annotation-context/annotation/styles.css.js +24 -24
- package/annotation-context/annotation/styles.scoped.css +31 -31
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/notifications/styles.css.js +3 -3
- package/app-layout/notifications/styles.scoped.css +7 -7
- package/app-layout/notifications/styles.selectors.js +3 -3
- package/app-layout/visual-refresh/styles.css.js +82 -82
- package/app-layout/visual-refresh/styles.scoped.css +255 -255
- package/app-layout/visual-refresh/styles.selectors.js +82 -82
- package/app-layout/visual-refresh-toolbar/drawer/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/drawer/index.js +2 -1
- package/app-layout/visual-refresh-toolbar/drawer/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/navigation/styles.css.js +6 -6
- package/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +13 -13
- package/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +6 -6
- package/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +16 -16
- package/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +37 -37
- package/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +16 -16
- package/app-layout/visual-refresh-toolbar/toolbar/index.js +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/button/interfaces.d.ts +1 -1
- package/button/interfaces.js.map +1 -1
- package/button-dropdown/item-element/index.js +1 -1
- package/button-dropdown/item-element/index.js.map +1 -1
- package/button-dropdown/item-element/styles.css.js +12 -11
- package/button-dropdown/item-element/styles.scoped.css +14 -14
- package/button-dropdown/item-element/styles.selectors.js +12 -11
- package/button-dropdown/tooltip.d.ts +2 -1
- package/button-dropdown/tooltip.d.ts.map +1 -1
- package/button-dropdown/tooltip.js +2 -2
- package/button-dropdown/tooltip.js.map +1 -1
- package/container/internal.d.ts.map +1 -1
- package/container/internal.js +0 -3
- package/container/internal.js.map +1 -1
- package/container/styles.css.js +30 -31
- package/container/styles.scoped.css +54 -57
- package/container/styles.selectors.js +30 -31
- package/content-layout/styles.css.js +14 -14
- package/content-layout/styles.scoped.css +27 -27
- package/content-layout/styles.selectors.js +14 -14
- package/flashbar/styles.css.js +47 -47
- package/flashbar/styles.scoped.css +171 -171
- package/flashbar/styles.selectors.js +47 -47
- package/icon/styles.css.js +38 -37
- package/icon/styles.scoped.css +82 -80
- package/icon/styles.selectors.js +38 -37
- package/index.d.ts +1 -0
- package/index.d.ts.map +1 -1
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/internal/components/dropdown/styles.css.js +20 -20
- package/internal/components/dropdown/styles.scoped.css +40 -40
- package/internal/components/dropdown/styles.selectors.js +20 -20
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/custom-css-properties/index.d.ts +2 -0
- package/internal/generated/custom-css-properties/index.d.ts.map +1 -1
- package/internal/generated/custom-css-properties/index.js +57 -55
- package/internal/generated/custom-css-properties/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/key-value-pairs/index.d.ts +1 -1
- package/key-value-pairs/index.d.ts.map +1 -1
- package/key-value-pairs/index.js +2 -2
- package/key-value-pairs/index.js.map +1 -1
- package/key-value-pairs/interfaces.d.ts +11 -0
- package/key-value-pairs/interfaces.d.ts.map +1 -1
- package/key-value-pairs/interfaces.js.map +1 -1
- package/key-value-pairs/internal.d.ts.map +1 -1
- package/key-value-pairs/internal.js +2 -2
- package/key-value-pairs/internal.js.map +1 -1
- package/package.json +2 -1
- package/prompt-input/index.d.ts +6 -0
- package/prompt-input/index.d.ts.map +1 -0
- package/prompt-input/index.js +27 -0
- package/prompt-input/index.js.map +1 -0
- package/prompt-input/interfaces.d.ts +82 -0
- package/prompt-input/interfaces.d.ts.map +1 -0
- package/prompt-input/interfaces.js +2 -0
- package/prompt-input/interfaces.js.map +1 -0
- package/prompt-input/internal.d.ts +8 -0
- package/prompt-input/internal.d.ts.map +1 -0
- package/prompt-input/internal.js +109 -0
- package/prompt-input/internal.js.map +1 -0
- package/prompt-input/styles.css.js +13 -0
- package/prompt-input/styles.scoped.css +248 -0
- package/prompt-input/styles.selectors.js +14 -0
- package/prompt-input/test-classes/styles.css.js +8 -0
- package/prompt-input/test-classes/styles.scoped.css +15 -0
- package/prompt-input/test-classes/styles.selectors.js +9 -0
- package/slider/styles.css.js +26 -26
- package/slider/styles.scoped.css +86 -86
- package/slider/styles.selectors.js +26 -26
- package/spinner/styles.css.js +13 -13
- package/spinner/styles.scoped.css +39 -39
- package/spinner/styles.selectors.js +13 -13
- package/split-panel/bottom.d.ts.map +1 -1
- package/split-panel/bottom.js +3 -0
- package/split-panel/bottom.js.map +1 -1
- package/split-panel/styles.css.js +27 -26
- package/split-panel/styles.scoped.css +44 -41
- package/split-panel/styles.selectors.js +27 -26
- package/test-utils/dom/index.d.ts +3 -0
- package/test-utils/dom/index.js +10 -2
- package/test-utils/dom/index.js.map +1 -1
- package/test-utils/dom/prompt-input/index.d.ts +18 -0
- package/test-utils/dom/prompt-input/index.js +49 -0
- package/test-utils/dom/prompt-input/index.js.map +1 -0
- package/test-utils/selectors/index.d.ts +3 -0
- package/test-utils/selectors/index.js +10 -2
- package/test-utils/selectors/index.js.map +1 -1
- package/test-utils/selectors/prompt-input/index.d.ts +6 -0
- package/test-utils/selectors/prompt-input/index.js +15 -0
- package/test-utils/selectors/prompt-input/index.js.map +1 -0
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAM7E,MAAM,UAAU,8BAA8B,CAAC,EAAE,kBAAkB,EAAuC;;IACxG,MAAM,EACJ,UAAU,EACV,WAAW,EACX,qBAAqB,EACrB,YAAY,EACZ,OAAO,EACP,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACrB,GAAG,kBAAkB,CAAC;IACvB,sCAAsC;IACtC,MAAM,aAAa,GAAG,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,uBAAuB,EAAE,MAAM,oCAAoC,CAAC;AAM7E,MAAM,UAAU,8BAA8B,CAAC,EAAE,kBAAkB,EAAuC;;IACxG,MAAM,EACJ,UAAU,EACV,WAAW,EACX,qBAAqB,EACrB,YAAY,EACZ,OAAO,EACP,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,QAAQ,EACR,YAAY,EACZ,eAAe,EACf,cAAc,EACd,UAAU,EACV,sBAAsB,EACtB,mBAAmB,EACnB,kBAAkB,EAClB,sBAAsB,EACtB,sBAAsB,EACtB,kBAAkB,EAClB,cAAc,EACd,oBAAoB,GACrB,GAAG,kBAAkB,CAAC;IACvB,sCAAsC;IACtC,MAAM,aAAa,GAAG,IAAI,CAAC;IAC3B,MAAM,GAAG,GAAG,MAAM,CAAc,IAAI,CAAC,CAAC;IACtC,iBAAiB,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IACzE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,gBAAgB,CAAC,CAAC,CAAC,CAAC;QACtB,CAAC,CAAC;QACF,sBAAsB;QACtB,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;QAEjC,gDAAgD;QAChD,MAAM,qBAAqB,GAAG,GAAG,EAAE;YACjC,IAAI,aAAa,EAAE;gBACjB,eAAe,CAAC,MAAM,CAAC,CAAC;gBACxB,OAAO;aACR;YACD,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAC/B,0GAA0G;YAC1G,MAAM,SAAS,GAAG,OAAO,GAAG,WAAW,IAAI,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAC1E,0EAA0E;YAC1E,IAAI,SAAS,KAAK,YAAY,IAAI,CAAC,OAAO,GAAG,WAAW,GAAG,CAAC,IAAI,OAAO,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE;gBAC3F,eAAe,CAAC,SAAS,CAAC,CAAC;aAC5B;YACD,WAAW,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QACzD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;QAC9D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,aAAa,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC;IAEnD,MAAM,aAAa,GAAG,YAAY,KAAK,MAAM,IAAI,CAAC,aAAa,CAAC;IAEhE,OAAO,CACL,oBAAC,WAAW,IACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,EAAE;YAC3C,CAAC,cAAc,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ;YACxC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,aAAa;SAC1C,CAAC,EACF,KAAK,EAAE;YACL,eAAe,EAAE,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO;SACnE;QAED,6BAAK,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC;YACxC,UAAU,IAAI,CAAC,cAAc,IAAI,CAChC,4CACe,cAAc,EAC3B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,uBAAuB,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,cAAc,EAAE,CAAC;gBAExG,oBAAC,aAAa,IACZ,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,gBAAgB,mCAAI,SAAS,EACpD,YAAY,EAAE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAChD,QAAQ,EAAC,MAAM,EACf,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,cAAc,CAAC,EAClD,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM,EACvC,QAAQ,EAAE,cAAc,GACxB,CACE,CACP;YACA,CAAC,WAAW,IAAI,qBAAqB,CAAC,IAAI,CACzC,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,+BAA+B,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;gBACtF,WAAW;gBACX,qBAAqB,IAAI,oBAAC,uBAAuB,oBAAK,qBAAqB,EAAI,CAC5E,CACP;YACA,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,sBAAsB,CAAC,SAAS,CAAC,IAAI,CAC3D,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC;gBACxD,oBAAC,cAAc,IACb,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,mCAAI,IAAI,EACxC,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,mBAAmB,CAAC,IAAI,CAAC,MAAM,EAChD,oBAAoB,EAAE,oBAAoB,EAC1C,qBAAqB,EACnB,sBAAsB,CAAC,SAAS;wBAC9B,CAAC,iCACM,sBAAsB,KACzB,SAAS,EAAE,mBAAmB,EAC9B,MAAM,EAAE,cAAc,EACtB,QAAQ,EAAE,kBAAkB,IAEhC,CAAC,CAAC,SAAS,EAEf,kBAAkB,EAAE,sBAAsB,CAAC,IAAI,CAAC,MAAM,EACtD,kBAAkB,EAAE,kBAAkB,GACtC,CACG,CACR,CACG,CACM,CACf,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,gCAAgC,GAAG,yBAAyB,CAAC,8BAA8B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport { DrawerTriggers } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\nimport { InternalBreadcrumbGroup } from '../../../breadcrumb-group/internal';\n\ninterface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutToolbarImplementation({ appLayoutInternals }: AppLayoutToolbarImplementationProps) {\n const {\n ariaLabels,\n breadcrumbs,\n discoveredBreadcrumbs,\n activeDrawer,\n drawers,\n drawersFocusControl,\n setToolbarHeight,\n verticalOffsets,\n onNavigationToggle,\n isMobile,\n toolbarState,\n setToolbarState,\n navigationOpen,\n navigation,\n navigationFocusControl,\n splitPanelControlId,\n splitPanelPosition,\n splitPanelToggleConfig,\n splitPanelFocusControl,\n onSplitPanelToggle,\n splitPanelOpen,\n onActiveDrawerChange,\n } = appLayoutInternals;\n // TODO: expose configuration property\n const pinnedToolbar = true;\n const ref = useRef<HTMLElement>(null);\n useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));\n useEffect(() => {\n return () => {\n setToolbarHeight(0);\n };\n // unmount effect only\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n let lastScrollY = window.scrollY;\n\n /* istanbul ignore next not testable in JSDOM */\n const updateScrollDirection = () => {\n if (pinnedToolbar) {\n setToolbarState('show');\n return;\n }\n const scrollY = window.scrollY;\n // 80 is an arbitrary number to have a pause before the toolbar scrolls out of view at the top of the page\n const direction = scrollY > lastScrollY && scrollY > 80 ? 'hide' : 'show';\n // 2 as a buffer to avoid mistaking minor accidental mouse moves as scroll\n if (direction !== toolbarState && (scrollY - lastScrollY > 2 || scrollY - lastScrollY < -2)) {\n setToolbarState(direction);\n }\n lastScrollY = scrollY > 0 ? scrollY : 0;\n };\n\n window.addEventListener('scroll', updateScrollDirection);\n return () => {\n window.removeEventListener('scroll', updateScrollDirection);\n };\n }, [pinnedToolbar, setToolbarState, toolbarState]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], {\n [testutilStyles['mobile-bar']]: isMobile,\n [styles['toolbar-hidden']]: toolbarHidden,\n })}\n style={{\n insetBlockStart: toolbarHidden ? '-60px' : verticalOffsets.toolbar,\n }}\n >\n <div className={styles['toolbar-container']}>\n {navigation && !navigationOpen && (\n <nav\n aria-hidden={navigationOpen}\n className={clsx(styles['universal-toolbar-nav'], { [testutilStyles['drawer-closed']]: !navigationOpen })}\n >\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={navigationOpen ? undefined : false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => onNavigationToggle(!navigationOpen)}\n ref={navigationFocusControl.refs.toggle}\n selected={navigationOpen}\n />\n </nav>\n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n {breadcrumbs}\n {discoveredBreadcrumbs && <InternalBreadcrumbGroup {...discoveredBreadcrumbs} />}\n </div>\n )}\n {(drawers.length > 0 || splitPanelToggleConfig.displayed) && (\n <span className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawer?.id ?? null}\n drawers={drawers}\n drawersFocusRef={drawersFocusControl.refs.toggle}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={\n splitPanelToggleConfig.displayed\n ? {\n ...splitPanelToggleConfig,\n controlId: splitPanelControlId,\n active: splitPanelOpen,\n position: splitPanelPosition,\n }\n : undefined\n }\n splitPanelFocusRef={splitPanelFocusControl.refs.toggle}\n onSplitPanelToggle={onSplitPanelToggle}\n />\n </span>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(AppLayoutToolbarImplementation);\n"]}
|
package/button/interfaces.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export interface ButtonProps extends BaseComponentProps {
|
|
|
10
10
|
/**
|
|
11
11
|
* Provides a reason why the button is disabled (only when `disabled` is `true`).
|
|
12
12
|
* If provided, the button becomes focusable.
|
|
13
|
-
* Applicable for all button variants, except link.
|
|
13
|
+
* Applicable for all button variants, except link and icon.
|
|
14
14
|
*/
|
|
15
15
|
disabledReason?: string;
|
|
16
16
|
/**
|
package/button/interfaces.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport React from 'react';\nimport { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDetail } from '../internal/events';\n\nexport interface ButtonProps extends BaseComponentProps {\n /**\n * Renders the button as disabled and prevents clicks.\n */\n disabled?: boolean;\n /**\n * Provides a reason why the button is disabled (only when `disabled` is `true`).\n * If provided, the button becomes focusable.\n * Applicable for all button variants, except link.\n */\n disabledReason?: string;\n /**\n * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n * It prevents users from clicking the button, but it can still be focused.\n */\n loading?: boolean;\n /**\n * Specifies the text that screen reader announces when the button is in a loading state.\n */\n loadingText?: string;\n /**\n * Displays an icon next to the text. You can use the `iconAlign` property to position the icon.\n */\n iconName?: IconProps.Name;\n /**\n * Specifies the alignment of the icon.\n */\n iconAlign?: ButtonProps.IconAlign;\n /**\n * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n *\n * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n */\n iconUrl?: string;\n /**\n * Specifies the SVG of a custom icon.\n *\n * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n * - has attribute `focusable=\"false\"`.\n * - has `viewBox=\"0 0 16 16\"`.\n *\n * If you set the `svg` element as the root node of the slot, the component will automatically\n * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n * - set the stroke width based on the size of the icon.\n * - set the width and height of the SVG element based on the size of the icon.\n *\n * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n *\n * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n *\n * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n */\n iconSvg?: React.ReactNode;\n /**\n * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n */\n iconAlt?: string;\n /**\n * The form action that is performed by a button click.\n */\n formAction?: ButtonProps.FormAction;\n\n /**\n * Adds `aria-label` to the button element. Use this to provide an accessible name for buttons\n * that don't have visible text, and to distinguish between multiple buttons with identical visible text.\n * The text will also be added to the `title` attribute of the button.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-describedby` to the button.\n */\n ariaDescribedby?: string;\n\n /**\n * Applies button styling to a link. Use this property if you need a link styled as a button (`variant=link`).\n * For example, if you have a 'help' button that links to a documentation page.\n */\n href?: string;\n\n /**\n * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n * This property only applies when an `href` is provided.\n */\n target?: string;\n\n /**\n * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`.\n * If the `rel` property is provided, it overrides the default behavior.\n */\n rel?: string;\n\n /**\n * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n * You can specify a string value that will be suggested as the name of the downloaded file.\n * This property only applies when an `href` is provided.\n **/\n download?: boolean | string;\n\n /**\n * Specifies if the `text` content wraps. If you set it to `false`, it prevents the text from wrapping.\n */\n wrapText?: boolean;\n\n /** Determines the general styling of the button as follows:\n * * `primary` for primary buttons.\n * * `normal` for secondary buttons.\n * * `link` for tertiary buttons.\n * * `icon` to display an icon only (no text).\n * * `inline-icon` to display an icon-only (no text) button within a text context.\n * * `inline-link` to display a tertiary button with no outer padding.\n */\n variant?: ButtonProps.Variant;\n\n /** The id of the <form> element to associate with the button. The value of this attribute must be the id of a <form> in the same document.\n * Use when a button is not the ancestor of a form element, such as when used in a modal.\n */\n form?: string;\n\n /**\n * Text displayed in the button element.\n * @displayname text\n */\n children?: React.ReactNode;\n\n /**\n * Called when the user clicks on the button and the button is not disabled or in loading state.\n */\n onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n\n /**\n * Called when the user clicks on the button with the left mouse button without pressing\n * modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an `href` set.\n */\n onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n\n /**\n * Adds aria-expanded to the button element. Use when the button controls an expandable element.\n */\n ariaExpanded?: boolean;\n\n /**\n * Adds `aria-controls` to the button. Use when the button controls the contents or presence of an element.\n */\n ariaControls?: string;\n\n /**\n * Sets the button width to be 100% of the parent container width. Button content is centered.\n */\n fullWidth?: boolean;\n}\n\nexport namespace ButtonProps {\n export type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon' | 'inline-link';\n export type ClickDetail = _ClickDetail;\n export type FollowDetail = BaseNavigationDetail;\n\n export type FormAction = 'submit' | 'none';\n\n export type IconAlign = 'left' | 'right';\n\n export interface Ref {\n /**\n * Focuses the underlying native button.\n */\n focus(options?: FocusOptions): void;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport React from 'react';\nimport { BaseNavigationDetail, CancelableEventHandler, ClickDetail as _ClickDetail } from '../internal/events';\n\nexport interface ButtonProps extends BaseComponentProps {\n /**\n * Renders the button as disabled and prevents clicks.\n */\n disabled?: boolean;\n /**\n * Provides a reason why the button is disabled (only when `disabled` is `true`).\n * If provided, the button becomes focusable.\n * Applicable for all button variants, except link and icon.\n */\n disabledReason?: string;\n /**\n * Renders the button as being in a loading state. It takes precedence over the `disabled` if both are set to `true`.\n * It prevents users from clicking the button, but it can still be focused.\n */\n loading?: boolean;\n /**\n * Specifies the text that screen reader announces when the button is in a loading state.\n */\n loadingText?: string;\n /**\n * Displays an icon next to the text. You can use the `iconAlign` property to position the icon.\n */\n iconName?: IconProps.Name;\n /**\n * Specifies the alignment of the icon.\n */\n iconAlign?: ButtonProps.IconAlign;\n /**\n * Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n *\n * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n */\n iconUrl?: string;\n /**\n * Specifies the SVG of a custom icon.\n *\n * Use this property if you want your custom icon to inherit colors dictated by variant or hover states.\n * When this property is set, the component will be decorated with `aria-hidden=\"true\"`. Ensure that the `svg` element:\n * - has attribute `focusable=\"false\"`.\n * - has `viewBox=\"0 0 16 16\"`.\n *\n * If you set the `svg` element as the root node of the slot, the component will automatically\n * - set `stroke=\"currentColor\"`, `fill=\"none\"`, and `vertical-align=\"top\"`.\n * - set the stroke width based on the size of the icon.\n * - set the width and height of the SVG element based on the size of the icon.\n *\n * If you don't want these styles to be automatically set, wrap the `svg` element into a `span`.\n * You can still set the stroke to `currentColor` to inherit the color of the surrounding elements.\n *\n * If you set both `iconUrl` and `iconSvg`, `iconSvg` will take precedence.\n *\n * *Note:* Remember to remove any additional elements (for example: `defs`) and related CSS classes from SVG files exported from design software.\n * In most cases, they aren't needed, as the `svg` element inherits styles from the icon component.\n */\n iconSvg?: React.ReactNode;\n /**\n * Specifies alternate text for a custom icon. We recommend that you provide this for accessibility.\n * This property is ignored if you use a predefined icon or if you set your custom icon using the `iconSvg` slot.\n */\n iconAlt?: string;\n /**\n * The form action that is performed by a button click.\n */\n formAction?: ButtonProps.FormAction;\n\n /**\n * Adds `aria-label` to the button element. Use this to provide an accessible name for buttons\n * that don't have visible text, and to distinguish between multiple buttons with identical visible text.\n * The text will also be added to the `title` attribute of the button.\n */\n ariaLabel?: string;\n\n /**\n * Adds `aria-describedby` to the button.\n */\n ariaDescribedby?: string;\n\n /**\n * Applies button styling to a link. Use this property if you need a link styled as a button (`variant=link`).\n * For example, if you have a 'help' button that links to a documentation page.\n */\n href?: string;\n\n /**\n * Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`).\n * This property only applies when an `href` is provided.\n */\n target?: string;\n\n /**\n * Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`.\n * If the `rel` property is provided, it overrides the default behavior.\n */\n rel?: string;\n\n /**\n * Specifies whether the linked URL, when selected, will prompt the user to download instead of navigate.\n * You can specify a string value that will be suggested as the name of the downloaded file.\n * This property only applies when an `href` is provided.\n **/\n download?: boolean | string;\n\n /**\n * Specifies if the `text` content wraps. If you set it to `false`, it prevents the text from wrapping.\n */\n wrapText?: boolean;\n\n /** Determines the general styling of the button as follows:\n * * `primary` for primary buttons.\n * * `normal` for secondary buttons.\n * * `link` for tertiary buttons.\n * * `icon` to display an icon only (no text).\n * * `inline-icon` to display an icon-only (no text) button within a text context.\n * * `inline-link` to display a tertiary button with no outer padding.\n */\n variant?: ButtonProps.Variant;\n\n /** The id of the <form> element to associate with the button. The value of this attribute must be the id of a <form> in the same document.\n * Use when a button is not the ancestor of a form element, such as when used in a modal.\n */\n form?: string;\n\n /**\n * Text displayed in the button element.\n * @displayname text\n */\n children?: React.ReactNode;\n\n /**\n * Called when the user clicks on the button and the button is not disabled or in loading state.\n */\n onClick?: CancelableEventHandler<ButtonProps.ClickDetail>;\n\n /**\n * Called when the user clicks on the button with the left mouse button without pressing\n * modifier keys (that is, CTRL, ALT, SHIFT, META), and the button has an `href` set.\n */\n onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n\n /**\n * Adds aria-expanded to the button element. Use when the button controls an expandable element.\n */\n ariaExpanded?: boolean;\n\n /**\n * Adds `aria-controls` to the button. Use when the button controls the contents or presence of an element.\n */\n ariaControls?: string;\n\n /**\n * Sets the button width to be 100% of the parent container width. Button content is centered.\n */\n fullWidth?: boolean;\n}\n\nexport namespace ButtonProps {\n export type Variant = 'normal' | 'primary' | 'link' | 'icon' | 'inline-icon' | 'inline-link';\n export type ClickDetail = _ClickDetail;\n export type FollowDetail = BaseNavigationDetail;\n\n export type FormAction = 'submit' | 'none';\n\n export type IconAlign = 'left' | 'right';\n\n export interface Ref {\n /**\n * Focuses the underlying native button.\n */\n focus(options?: FocusOptions): void;\n }\n}\n"]}
|
|
@@ -57,7 +57,7 @@ function MenuItem({ item, disabled, highlighted }) {
|
|
|
57
57
|
React.createElement(MenuItemContent, { item: item, disabled: disabled })));
|
|
58
58
|
const { position } = useDropdownContext();
|
|
59
59
|
const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';
|
|
60
|
-
return isDisabledWithReason ? (React.createElement(Tooltip, { content: item.disabledReason, position: tooltipPosition },
|
|
60
|
+
return isDisabledWithReason ? (React.createElement(Tooltip, { content: item.disabledReason, position: tooltipPosition, className: styles['item-tooltip-wrapper'] },
|
|
61
61
|
menuItem,
|
|
62
62
|
descriptionEl)) : (menuItem);
|
|
63
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { ItemProps } from '../interfaces';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport styles from './styles.css.js';\nimport Tooltip from '../tooltip';\n\nimport { ButtonDropdownProps } from '../interfaces';\nimport { getItemTarget } from '../utils/utils';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport { getMenuItemProps, getMenuItemCheckboxProps } from '../utils/menu-item';\n\nconst ItemElement = ({\n item,\n disabled,\n onItemActivate,\n highlighted,\n highlightItem,\n showDivider,\n hasCategoryHeader,\n isKeyboardHighlighted = false,\n variant = 'normal',\n}: ItemProps) => {\n const isLink = isLinkItem(item);\n const isCheckbox = isCheckboxItem(item);\n const onClick = (event: React.MouseEvent) => {\n // Stop propagation to parent node and handle event exclusively in here. This ensures\n // that no group will interfere with the default behavior of links\n event.stopPropagation();\n if (!isLink) {\n event.preventDefault();\n }\n if (!disabled) {\n onItemActivate(item, event);\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n return (\n <li\n className={clsx(styles['item-element'], styles[`variant-${variant}`], {\n [styles.highlighted]: highlighted,\n [styles.disabled]: disabled,\n [styles['has-category-header']]: hasCategoryHeader,\n [styles['has-checkmark']]: isCheckbox,\n [styles['show-divider']]: showDivider,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n role=\"presentation\"\n data-testid={item.id}\n data-description={item.description}\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n >\n <MenuItem item={item} disabled={disabled} highlighted={highlighted} />\n </li>\n );\n};\n\nexport type InternalItemProps = ButtonDropdownProps.Item & {\n badge?: boolean;\n};\n\nexport type InternalCheckboxItemProps = ButtonDropdownProps.CheckboxItem & {\n badge?: boolean;\n};\n\ninterface MenuItemProps {\n item: InternalItemProps | InternalCheckboxItemProps;\n disabled: boolean;\n highlighted: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted }: MenuItemProps) {\n const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n const isCheckbox = isCheckboxItem(item);\n\n useEffect(() => {\n if (highlighted && menuItemRef.current) {\n menuItemRef.current.focus();\n }\n }, [highlighted]);\n\n const isDisabledWithReason = disabled && item.disabledReason;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const menuItemProps: React.HTMLAttributes<HTMLSpanElement & HTMLAnchorElement> = {\n className: styles['menu-item'],\n lang: item.lang,\n ref: menuItemRef,\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex: highlighted ? 0 : -1,\n ...(isCheckbox ? getMenuItemCheckboxProps({ disabled, checked: item.checked }) : getMenuItemProps({ disabled })),\n ...(isDisabledWithReason ? targetProps : {}),\n };\n\n const menuItem = isLinkItem(item) ? (\n <a\n {...menuItemProps}\n href={!disabled ? item.href : undefined}\n target={getItemTarget(item)}\n rel={item.external ? 'noopener noreferrer' : undefined}\n >\n <MenuItemContent item={item} disabled={disabled} />\n </a>\n ) : (\n <span {...menuItemProps}>\n <MenuItemContent item={item} disabled={disabled} />\n </span>\n );\n\n const { position } = useDropdownContext();\n const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';\n return isDisabledWithReason ? (\n <Tooltip content={item.disabledReason} position={tooltipPosition}>\n {menuItem}\n {descriptionEl}\n </Tooltip>\n ) : (\n menuItem\n );\n}\n\nconst MenuItemContent = ({\n item,\n disabled,\n}: {\n item: InternalItemProps | InternalCheckboxItemProps;\n disabled: boolean;\n}) => {\n const hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);\n const hasExternal = isLinkItem(item) && item.external;\n const isCheckbox = isCheckboxItem(item);\n return (\n <>\n {isCheckbox && <MenuItemCheckmark checked={item.checked} disabled={disabled} />}\n {hasIcon && (\n <MenuItemIcon\n name={item.iconName}\n url={item.iconUrl}\n svg={item.iconSvg}\n alt={item.iconAlt}\n badge={item.badge}\n />\n )}\n {item.text}\n {hasExternal && <ExternalIcon disabled={disabled} ariaLabel={item.externalIconAriaLabel} />}\n </>\n );\n};\n\nconst MenuItemIcon = (props: InternalIconProps) => (\n <span className={styles.icon}>\n <InternalIcon {...props} />\n </span>\n);\n\n// Toggle has aria-hidden set because it's just used as a graphical element,\n// a11y attributes for the checkmark are communicated through the role and aria-checked state\n// of the menu element item.\nconst MenuItemCheckmark = ({ disabled, checked }: { disabled: boolean; checked: boolean }) => {\n const checkmark = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"check\" />;\n return (\n <span\n className={clsx(styles.icon, styles.checkmark, { [styles.disabled]: disabled })}\n aria-hidden=\"true\"\n style={{ visibility: checked ? 'visible' : 'hidden' }}\n >\n {checkmark}\n </span>\n );\n};\n\nconst ExternalIcon = ({ disabled, ariaLabel }: { disabled: boolean; ariaLabel?: string }) => {\n const icon = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"external\" />;\n return (\n <span className={styles['external-icon']} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel}>\n {icon}\n </span>\n );\n};\n\nexport default ItemElement;\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,OAAO,MAAM,YAAY,CAAC;AAGjC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAC/E,OAAO,YAAmC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4CAA4C,CAAC;AAChF,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEhF,MAAM,WAAW,GAAG,CAAC,EACnB,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,WAAW,EACX,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,qBAAqB,GAAG,KAAK,EAC7B,OAAO,GAAG,QAAQ,GACR,EAAE,EAAE;IACd,MAAM,MAAM,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,OAAO,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC1C,qFAAqF;QACrF,kEAAkE;QAClE,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,MAAM,EAAE;YACX,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;QACD,IAAI,CAAC,QAAQ,EAAE;YACb,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SAC7B;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE;YACpE,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,WAAW;YACjC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,iBAAiB;YAClD,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,UAAU;YACrC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,WAAW;YACrC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,qBAAqB;SAC9C,CAAC,EACF,IAAI,EAAC,cAAc,iBACN,IAAI,CAAC,EAAE,sBACF,IAAI,CAAC,WAAW,EAClC,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,OAAO,EACrB,YAAY,EAAE,OAAO;QAErB,oBAAC,QAAQ,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,GAAI,CACnE,CACN,CAAC;AACJ,CAAC,CAAC;AAgBF,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAiB;IAC9D,MAAM,WAAW,GAAG,MAAM,CAA+C,IAAI,CAAC,CAAC;IAC/E,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,WAAW,CAAC,OAAO,EAAE;YACtC,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC7B;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,oBAAoB,GAAG,QAAQ,IAAI,IAAI,CAAC,cAAc,CAAC;IAC7D,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACjF,MAAM,aAAa,iCACjB,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC,EAC9B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,GAAG,EAAE,WAAW;QAChB,wFAAwF;QACxF,wFAAwF;QACxF,8EAA8E;QAC9E,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAC3B,CAAC,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,GAC7G,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAC7C,CAAC;IAEF,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAClC,2CACM,aAAa,IACjB,IAAI,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EACvC,MAAM,EAAE,aAAa,CAAC,IAAI,CAAC,EAC3B,GAAG,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS;QAEtD,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CACjD,CACL,CAAC,CAAC,CAAC,CACF,8CAAU,aAAa;QACrB,oBAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAC9C,CACR,CAAC;IAEF,MAAM,EAAE,QAAQ,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC1C,MAAM,eAAe,GAAG,QAAQ,KAAK,aAAa,IAAI,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACjG,OAAO,oBAAoB,CAAC,CAAC,CAAC,CAC5B,oBAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;QACxG,QAAQ;QACR,aAAa,CACN,CACX,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,QAAQ,GAIT,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;IAClE,MAAM,WAAW,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IACtD,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CACL;QACG,UAAU,IAAI,oBAAC,iBAAiB,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,QAAQ,GAAI;QAC9E,OAAO,IAAI,CACV,oBAAC,YAAY,IACX,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,GAAG,EAAE,IAAI,CAAC,OAAO,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACH;QACA,IAAI,CAAC,IAAI;QACT,WAAW,IAAI,oBAAC,YAAY,IAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,CAAC,qBAAqB,GAAI,CAC1F,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE,CAAC,CACjD,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI;IAC1B,oBAAC,YAAY,oBAAK,KAAK,EAAI,CACtB,CACR,CAAC;AAEF,4EAA4E;AAC5E,6FAA6F;AAC7F,4BAA4B;AAC5B,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAA2C,EAAE,EAAE;IAC3F,MAAM,SAAS,GAAG,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAC,OAAO,GAAG,CAAC;IAC3F,OAAO,CACL,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBACnE,MAAM,EAClB,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAEpD,SAAS,CACL,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAA6C,EAAE,EAAE;IAC1F,MAAM,IAAI,GAAG,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,EAAC,UAAU,GAAG,CAAC;IACzF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,gBAAc,SAAS,IACjG,IAAI,CACA,CACR,CAAC;AACJ,CAAC,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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\nimport { ItemProps } from '../interfaces';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport styles from './styles.css.js';\nimport Tooltip from '../tooltip';\n\nimport { ButtonDropdownProps } from '../interfaces';\nimport { getItemTarget } from '../utils/utils';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport { getMenuItemProps, getMenuItemCheckboxProps } from '../utils/menu-item';\n\nconst ItemElement = ({\n item,\n disabled,\n onItemActivate,\n highlighted,\n highlightItem,\n showDivider,\n hasCategoryHeader,\n isKeyboardHighlighted = false,\n variant = 'normal',\n}: ItemProps) => {\n const isLink = isLinkItem(item);\n const isCheckbox = isCheckboxItem(item);\n const onClick = (event: React.MouseEvent) => {\n // Stop propagation to parent node and handle event exclusively in here. This ensures\n // that no group will interfere with the default behavior of links\n event.stopPropagation();\n if (!isLink) {\n event.preventDefault();\n }\n if (!disabled) {\n onItemActivate(item, event);\n }\n };\n\n const onHover = () => {\n highlightItem(item);\n };\n\n return (\n <li\n className={clsx(styles['item-element'], styles[`variant-${variant}`], {\n [styles.highlighted]: highlighted,\n [styles.disabled]: disabled,\n [styles['has-category-header']]: hasCategoryHeader,\n [styles['has-checkmark']]: isCheckbox,\n [styles['show-divider']]: showDivider,\n [styles['is-focused']]: isKeyboardHighlighted,\n })}\n role=\"presentation\"\n data-testid={item.id}\n data-description={item.description}\n onClick={onClick}\n onMouseEnter={onHover}\n onTouchStart={onHover}\n >\n <MenuItem item={item} disabled={disabled} highlighted={highlighted} />\n </li>\n );\n};\n\nexport type InternalItemProps = ButtonDropdownProps.Item & {\n badge?: boolean;\n};\n\nexport type InternalCheckboxItemProps = ButtonDropdownProps.CheckboxItem & {\n badge?: boolean;\n};\n\ninterface MenuItemProps {\n item: InternalItemProps | InternalCheckboxItemProps;\n disabled: boolean;\n highlighted: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted }: MenuItemProps) {\n const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n const isCheckbox = isCheckboxItem(item);\n\n useEffect(() => {\n if (highlighted && menuItemRef.current) {\n menuItemRef.current.focus();\n }\n }, [highlighted]);\n\n const isDisabledWithReason = disabled && item.disabledReason;\n const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n const menuItemProps: React.HTMLAttributes<HTMLSpanElement & HTMLAnchorElement> = {\n className: styles['menu-item'],\n lang: item.lang,\n ref: menuItemRef,\n // We are using the roving tabindex technique to manage the focus state of the dropdown.\n // The current element will always have tabindex=0 which means that it can be tabbed to,\n // while all other items have tabindex=-1 so we can focus them when necessary.\n tabIndex: highlighted ? 0 : -1,\n ...(isCheckbox ? getMenuItemCheckboxProps({ disabled, checked: item.checked }) : getMenuItemProps({ disabled })),\n ...(isDisabledWithReason ? targetProps : {}),\n };\n\n const menuItem = isLinkItem(item) ? (\n <a\n {...menuItemProps}\n href={!disabled ? item.href : undefined}\n target={getItemTarget(item)}\n rel={item.external ? 'noopener noreferrer' : undefined}\n >\n <MenuItemContent item={item} disabled={disabled} />\n </a>\n ) : (\n <span {...menuItemProps}>\n <MenuItemContent item={item} disabled={disabled} />\n </span>\n );\n\n const { position } = useDropdownContext();\n const tooltipPosition = position === 'bottom-left' || position === 'top-left' ? 'left' : 'right';\n return isDisabledWithReason ? (\n <Tooltip content={item.disabledReason} position={tooltipPosition} className={styles['item-tooltip-wrapper']}>\n {menuItem}\n {descriptionEl}\n </Tooltip>\n ) : (\n menuItem\n );\n}\n\nconst MenuItemContent = ({\n item,\n disabled,\n}: {\n item: InternalItemProps | InternalCheckboxItemProps;\n disabled: boolean;\n}) => {\n const hasIcon = !!(item.iconName || item.iconUrl || item.iconSvg);\n const hasExternal = isLinkItem(item) && item.external;\n const isCheckbox = isCheckboxItem(item);\n return (\n <>\n {isCheckbox && <MenuItemCheckmark checked={item.checked} disabled={disabled} />}\n {hasIcon && (\n <MenuItemIcon\n name={item.iconName}\n url={item.iconUrl}\n svg={item.iconSvg}\n alt={item.iconAlt}\n badge={item.badge}\n />\n )}\n {item.text}\n {hasExternal && <ExternalIcon disabled={disabled} ariaLabel={item.externalIconAriaLabel} />}\n </>\n );\n};\n\nconst MenuItemIcon = (props: InternalIconProps) => (\n <span className={styles.icon}>\n <InternalIcon {...props} />\n </span>\n);\n\n// Toggle has aria-hidden set because it's just used as a graphical element,\n// a11y attributes for the checkmark are communicated through the role and aria-checked state\n// of the menu element item.\nconst MenuItemCheckmark = ({ disabled, checked }: { disabled: boolean; checked: boolean }) => {\n const checkmark = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"check\" />;\n return (\n <span\n className={clsx(styles.icon, styles.checkmark, { [styles.disabled]: disabled })}\n aria-hidden=\"true\"\n style={{ visibility: checked ? 'visible' : 'hidden' }}\n >\n {checkmark}\n </span>\n );\n};\n\nconst ExternalIcon = ({ disabled, ariaLabel }: { disabled: boolean; ariaLabel?: string }) => {\n const icon = <InternalIcon variant={disabled ? 'disabled' : 'normal'} name=\"external\" />;\n return (\n <span className={styles['external-icon']} role={ariaLabel ? 'img' : undefined} aria-label={ariaLabel}>\n {icon}\n </span>\n );\n};\n\nexport default ItemElement;\n"]}
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"item-element": "awsui_item-
|
|
5
|
-
"disabled": "
|
|
6
|
-
"show-divider": "awsui_show-
|
|
7
|
-
"highlighted": "
|
|
8
|
-
"is-focused": "awsui_is-
|
|
9
|
-
"menu-item": "awsui_menu-
|
|
10
|
-
"has-category-header": "awsui_has-category-
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
4
|
+
"item-element": "awsui_item-element_93a1u_16wwy_97",
|
|
5
|
+
"disabled": "awsui_disabled_93a1u_16wwy_109",
|
|
6
|
+
"show-divider": "awsui_show-divider_93a1u_16wwy_116",
|
|
7
|
+
"highlighted": "awsui_highlighted_93a1u_16wwy_119",
|
|
8
|
+
"is-focused": "awsui_is-focused_93a1u_16wwy_134",
|
|
9
|
+
"menu-item": "awsui_menu-item_93a1u_16wwy_139",
|
|
10
|
+
"has-category-header": "awsui_has-category-header_93a1u_16wwy_154",
|
|
11
|
+
"item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_16wwy_154",
|
|
12
|
+
"has-checkmark": "awsui_has-checkmark_93a1u_16wwy_154",
|
|
13
|
+
"icon": "awsui_icon_93a1u_16wwy_158",
|
|
14
|
+
"checkmark": "awsui_checkmark_93a1u_16wwy_162",
|
|
15
|
+
"external-icon": "awsui_external-icon_93a1u_16wwy_169"
|
|
15
16
|
};
|
|
16
17
|
|
|
@@ -94,7 +94,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
94
94
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
95
95
|
SPDX-License-Identifier: Apache-2.0
|
|
96
96
|
*/
|
|
97
|
-
.awsui_item-
|
|
97
|
+
.awsui_item-element_93a1u_16wwy_97:not(#\9) {
|
|
98
98
|
position: relative;
|
|
99
99
|
z-index: 1;
|
|
100
100
|
border-block: var(--border-item-width-yel47s, 2px) solid transparent;
|
|
@@ -106,17 +106,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
106
106
|
margin-block-start: calc(-1 * var(--border-field-width-09w7vk, 2px));
|
|
107
107
|
cursor: pointer;
|
|
108
108
|
}
|
|
109
|
-
.awsui_item-
|
|
109
|
+
.awsui_item-element_93a1u_16wwy_97.awsui_disabled_93a1u_16wwy_109:not(#\9) {
|
|
110
110
|
cursor: default;
|
|
111
111
|
color: var(--color-text-dropdown-item-disabled-6oq3n6, #9ba7b6);
|
|
112
112
|
}
|
|
113
|
-
.awsui_item-
|
|
113
|
+
.awsui_item-element_93a1u_16wwy_97:not(#\9):first-child {
|
|
114
114
|
margin-block-start: 0;
|
|
115
115
|
}
|
|
116
|
-
.awsui_item-
|
|
116
|
+
.awsui_item-element_93a1u_16wwy_97.awsui_show-divider_93a1u_16wwy_116:not(#\9) {
|
|
117
117
|
border-block-end: var(--border-item-width-yel47s, 2px) solid var(--color-border-dropdown-group-yakmix, #b6bec9);
|
|
118
118
|
}
|
|
119
|
-
.awsui_item-
|
|
119
|
+
.awsui_item-element_93a1u_16wwy_97.awsui_highlighted_93a1u_16wwy_119:not(#\9) {
|
|
120
120
|
color: var(--color-text-dropdown-item-highlighted-a51hdb, #000716);
|
|
121
121
|
z-index: 2;
|
|
122
122
|
background-color: var(--color-background-dropdown-item-hover-swsulg, #f4f4f4);
|
|
@@ -126,17 +126,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
126
126
|
border-end-start-radius: var(--border-radius-item-05df9h, 8px);
|
|
127
127
|
border-end-end-radius: var(--border-radius-item-05df9h, 8px);
|
|
128
128
|
}
|
|
129
|
-
.awsui_item-
|
|
129
|
+
.awsui_item-element_93a1u_16wwy_97.awsui_highlighted_93a1u_16wwy_119.awsui_disabled_93a1u_16wwy_109:not(#\9) {
|
|
130
130
|
color: var(--color-text-dropdown-item-dimmed-f2joj8, #9ba7b6);
|
|
131
131
|
border-color: var(--color-border-dropdown-item-dimmed-hover-xdu0hf, #7d8998);
|
|
132
132
|
background-color: var(--color-background-dropdown-item-dimmed-dlm6wk, transparent);
|
|
133
133
|
}
|
|
134
|
-
.awsui_item-
|
|
134
|
+
.awsui_item-element_93a1u_16wwy_97.awsui_highlighted_93a1u_16wwy_119.awsui_is-focused_93a1u_16wwy_134:not(#\9) {
|
|
135
135
|
border-color: var(--color-border-dropdown-item-focused-5hbaf3, #414d5c);
|
|
136
136
|
box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-b2ntyl, #0972d3);
|
|
137
137
|
}
|
|
138
138
|
|
|
139
|
-
.awsui_menu-
|
|
139
|
+
.awsui_menu-item_93a1u_16wwy_139:not(#\9) {
|
|
140
140
|
min-inline-size: 0;
|
|
141
141
|
word-break: break-word;
|
|
142
142
|
display: flex;
|
|
@@ -148,24 +148,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
148
148
|
/* stylelint-disable selector-max-type */
|
|
149
149
|
/* stylelint-enable selector-max-type */
|
|
150
150
|
}
|
|
151
|
-
.awsui_menu-
|
|
151
|
+
.awsui_menu-item_93a1u_16wwy_139:not(#\9):focus {
|
|
152
152
|
outline: none;
|
|
153
153
|
}
|
|
154
|
-
.awsui_has-category-
|
|
154
|
+
.awsui_has-category-header_93a1u_16wwy_154 > .awsui_menu-item_93a1u_16wwy_139:not(#\9), .awsui_has-category-header_93a1u_16wwy_154 > .awsui_item-tooltip-wrapper_93a1u_16wwy_154 > .awsui_menu-item_93a1u_16wwy_139:not(#\9), .awsui_has-category-header_93a1u_16wwy_154:not(#\9):not(.awsui_has-checkmark_93a1u_16wwy_154) > span > .awsui_menu-item_93a1u_16wwy_139 {
|
|
155
155
|
padding-inline-start: calc(var(--space-xs-zb16t3, 8px) + var(--space-l-t419sm, 20px));
|
|
156
156
|
}
|
|
157
157
|
|
|
158
|
-
.
|
|
158
|
+
.awsui_icon_93a1u_16wwy_158:not(#\9) {
|
|
159
159
|
padding-inline-end: var(--space-xxs-p8yyaw, 4px);
|
|
160
160
|
flex-shrink: 0;
|
|
161
161
|
}
|
|
162
|
-
.
|
|
162
|
+
.awsui_icon_93a1u_16wwy_158.awsui_checkmark_93a1u_16wwy_162:not(#\9) {
|
|
163
163
|
color: var(--color-text-status-info-ahz8zp, #0972d3);
|
|
164
164
|
}
|
|
165
|
-
.
|
|
165
|
+
.awsui_icon_93a1u_16wwy_158.awsui_disabled_93a1u_16wwy_109:not(#\9) {
|
|
166
166
|
color: var(--color-text-interactive-disabled-z7a3t4, #9ba7b6);
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
-
.awsui_external-
|
|
169
|
+
.awsui_external-icon_93a1u_16wwy_169:not(#\9) {
|
|
170
170
|
margin-inline-start: var(--space-xxs-p8yyaw, 4px);
|
|
171
171
|
}
|
|
@@ -2,16 +2,17 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"item-element": "awsui_item-
|
|
6
|
-
"disabled": "
|
|
7
|
-
"show-divider": "awsui_show-
|
|
8
|
-
"highlighted": "
|
|
9
|
-
"is-focused": "awsui_is-
|
|
10
|
-
"menu-item": "awsui_menu-
|
|
11
|
-
"has-category-header": "awsui_has-category-
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
5
|
+
"item-element": "awsui_item-element_93a1u_16wwy_97",
|
|
6
|
+
"disabled": "awsui_disabled_93a1u_16wwy_109",
|
|
7
|
+
"show-divider": "awsui_show-divider_93a1u_16wwy_116",
|
|
8
|
+
"highlighted": "awsui_highlighted_93a1u_16wwy_119",
|
|
9
|
+
"is-focused": "awsui_is-focused_93a1u_16wwy_134",
|
|
10
|
+
"menu-item": "awsui_menu-item_93a1u_16wwy_139",
|
|
11
|
+
"has-category-header": "awsui_has-category-header_93a1u_16wwy_154",
|
|
12
|
+
"item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_16wwy_154",
|
|
13
|
+
"has-checkmark": "awsui_has-checkmark_93a1u_16wwy_154",
|
|
14
|
+
"icon": "awsui_icon_93a1u_16wwy_158",
|
|
15
|
+
"checkmark": "awsui_checkmark_93a1u_16wwy_162",
|
|
16
|
+
"external-icon": "awsui_external-icon_93a1u_16wwy_169"
|
|
16
17
|
};
|
|
17
18
|
|
|
@@ -3,6 +3,7 @@ export interface TooltipProps {
|
|
|
3
3
|
children?: React.ReactNode;
|
|
4
4
|
content?: React.ReactNode;
|
|
5
5
|
position?: 'top' | 'right' | 'bottom' | 'left';
|
|
6
|
+
className?: string;
|
|
6
7
|
}
|
|
7
|
-
export default function Tooltip({ children, content, position }: TooltipProps): JSX.Element;
|
|
8
|
+
export default function Tooltip({ children, content, position, className }: TooltipProps): JSX.Element;
|
|
8
9
|
//# sourceMappingURL=tooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAkB,EAAE,SAAS,EAAE,EAAE,YAAY,eAsCjG"}
|
|
@@ -8,12 +8,12 @@ import Portal from '../internal/components/portal';
|
|
|
8
8
|
import { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';
|
|
9
9
|
import { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';
|
|
10
10
|
const DEFAULT_OPEN_TIMEOUT_IN_MS = 120;
|
|
11
|
-
export default function Tooltip({ children, content, position = 'right' }) {
|
|
11
|
+
export default function Tooltip({ children, content, position = 'right', className }) {
|
|
12
12
|
const ref = useRef(null);
|
|
13
13
|
const isReducedMotion = useReducedMotion(ref);
|
|
14
14
|
const { open, triggerProps } = useTooltipOpen(isReducedMotion ? 0 : DEFAULT_OPEN_TIMEOUT_IN_MS);
|
|
15
15
|
const portalClasses = usePortalModeClasses(ref);
|
|
16
|
-
return (React.createElement("span", Object.assign({ ref: ref }, triggerProps),
|
|
16
|
+
return (React.createElement("span", Object.assign({ ref: ref }, triggerProps, { className: className }),
|
|
17
17
|
children,
|
|
18
18
|
open && (React.createElement(Portal, null,
|
|
19
19
|
React.createElement("span", { className: portalClasses },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/button-dropdown/tooltip.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAwB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,MAAM,kBAAkB,CAAC;AACrC,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;
|
|
1
|
+
{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/button-dropdown/tooltip.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAwB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,MAAM,kBAAkB,CAAC;AACrC,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2CAA2C,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AASjF,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,GAAG,OAAO,EAAE,SAAS,EAAgB;IAChG,MAAM,GAAG,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IACjD,MAAM,eAAe,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC9C,MAAM,EAAE,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC;IAChG,MAAM,aAAa,GAAG,oBAAoB,CAAC,GAAG,CAAC,CAAC;IAEhD,OAAO,CACL,4CAAM,GAAG,EAAE,GAAG,IAAM,YAAY,IAAE,SAAS,EAAE,SAAS;QACnD,QAAQ;QACR,IAAI,IAAI,CACP,oBAAC,MAAM;YACL,8BAAM,SAAS,EAAE,aAAa;gBAC5B,oBAAC,gBAAgB,IACf,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,GAAG,EACb,KAAK,EAAE,QAAQ,CAAC,EAAE,CAAC,oBAAC,KAAK,IAAC,QAAQ,EAAE,QAAQ,GAAI,EAChD,gBAAgB,EAAE,IAAI,EACtB,MAAM,EAAE,IAAI;oBAEZ,oBAAC,WAAW,IACV,aAAa,EAAE,KAAK,EACpB,gBAAgB,EAAE,SAAS,EAC3B,MAAM,EAAE,IAAI,EACZ,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,EACnB,eAAe,EAAC,MAAM;wBAEtB,6CAAkB,iCAAiC,EAAC,IAAI,EAAC,SAAS,IAC/D,OAAO,CACH,CACK,CACG,CACd,CACA,CACV,CACI,CACR,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,OAAe;IACrC,MAAM,MAAM,GAAG,MAAM,EAAU,CAAC;IAChC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,KAAK,GAAG,GAAG,EAAE;QACjB,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAC7B,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IACF,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,CAAC,OAAO,GAAG,UAAU,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAC7C,CAAC,CAAC;IACF,MAAM,SAAS,GAAyB,CAAC,CAAC,EAAE;QAC1C,IAAI,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;YAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,KAAK,EAAE,CAAC;SACT;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CAAC;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC;IAErB,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,YAAY,EAAE;YACZ,MAAM;YACN,OAAO;YACP,SAAS;SACV;KACF,CAAC;AACJ,CAAC;AAED,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { KeyboardEventHandler, useRef, useState } from 'react';\n\nimport Arrow from '../popover/arrow';\nimport PopoverContainer from '../popover/container';\nimport PopoverBody from '../popover/body';\nimport Portal from '../internal/components/portal';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useReducedMotion } from '@cloudscape-design/component-toolkit/internal';\n\nexport interface TooltipProps {\n children?: React.ReactNode;\n content?: React.ReactNode;\n position?: 'top' | 'right' | 'bottom' | 'left';\n className?: string;\n}\n\nconst DEFAULT_OPEN_TIMEOUT_IN_MS = 120;\n\nexport default function Tooltip({ children, content, position = 'right', className }: TooltipProps) {\n const ref = useRef<HTMLSpanElement | null>(null);\n const isReducedMotion = useReducedMotion(ref);\n const { open, triggerProps } = useTooltipOpen(isReducedMotion ? 0 : DEFAULT_OPEN_TIMEOUT_IN_MS);\n const portalClasses = usePortalModeClasses(ref);\n\n return (\n <span ref={ref} {...triggerProps} className={className}>\n {children}\n {open && (\n <Portal>\n <span className={portalClasses}>\n <PopoverContainer\n size=\"small\"\n fixedWidth={false}\n position={position}\n trackRef={ref}\n arrow={position => <Arrow position={position} />}\n renderWithPortal={true}\n zIndex={7000}\n >\n <PopoverBody\n dismissButton={false}\n dismissAriaLabel={undefined}\n header={null}\n onDismiss={() => {}}\n overflowVisible=\"both\"\n >\n <span data-testid=\"button-dropdown-disabled-reason\" role=\"tooltip\">\n {content}\n </span>\n </PopoverBody>\n </PopoverContainer>\n </span>\n </Portal>\n )}\n </span>\n );\n}\n\nfunction useTooltipOpen(timeout: number) {\n const handle = useRef<number>();\n const [isOpen, setIsOpen] = useState(false);\n\n const close = () => {\n clearTimeout(handle.current);\n setIsOpen(false);\n };\n const open = () => setIsOpen(true);\n const openDelayed = () => {\n handle.current = setTimeout(open, timeout);\n };\n const onKeyDown: KeyboardEventHandler = e => {\n if (isOpen && isEscape(e.key)) {\n e.preventDefault();\n e.stopPropagation();\n close();\n }\n };\n\n const onFocus = openDelayed;\n const onBlur = close;\n\n return {\n open: isOpen,\n triggerProps: {\n onBlur,\n onFocus,\n onKeyDown,\n },\n };\n}\n\nconst isEscape = (key: string) => key === 'Escape' || key === 'Esc';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAK1E,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;CAClE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,SAAS,EACT,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,uBAA+B,EAC/B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAmGxB"}
|
package/container/internal.js
CHANGED
|
@@ -13,7 +13,6 @@ import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
|
|
|
13
13
|
import { useModalContext } from '../internal/context/modal-context';
|
|
14
14
|
import { useUniqueId } from '../internal/hooks/use-unique-id';
|
|
15
15
|
import { ContainerHeaderContextProvider } from '../internal/context/container-header';
|
|
16
|
-
import { getGlobalFlag } from '../internal/utils/global-flags';
|
|
17
16
|
export function InternalContainerAsSubstep(props) {
|
|
18
17
|
const { subStepRef, funnelSubStepProps } = useFunnelSubStep();
|
|
19
18
|
const modalContext = useModalContext();
|
|
@@ -36,7 +35,6 @@ export default function InternalContainer(_a) {
|
|
|
36
35
|
// In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.
|
|
37
36
|
const shouldHaveStickyStyles = isSticky && !isMobile;
|
|
38
37
|
const hasMedia = !!(media === null || media === void 0 ? void 0 : media.content);
|
|
39
|
-
const hasToolbar = getGlobalFlag('appLayoutWidget');
|
|
40
38
|
const mediaPosition = (_b = media === null || media === void 0 ? void 0 : media.position) !== null && _b !== void 0 ? _b : 'top';
|
|
41
39
|
return (React.createElement("div", Object.assign({}, baseProps, __funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], isRefresh && styles.refresh), ref: mergedRef }),
|
|
42
40
|
hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top' ? { height: (media === null || media === void 0 ? void 0 : media.height) || '' } : { width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
|
|
@@ -49,7 +47,6 @@ export default function InternalContainer(_a) {
|
|
|
49
47
|
[styles['header-dynamic-height']]: hasDynamicHeight,
|
|
50
48
|
[styles['header-stuck']]: isStuck,
|
|
51
49
|
[styles['with-paddings']]: !disableHeaderPaddings,
|
|
52
|
-
[styles['with-toolbar']]: hasToolbar,
|
|
53
50
|
[styles['with-hidden-content']]: !children || __hiddenContent,
|
|
54
51
|
[styles['header-with-media']]: hasMedia,
|
|
55
52
|
[styles['header-full-page']]: __fullPage && isRefresh,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { getGlobalFlag } from '../internal/utils/global-flags';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __fullPage?: boolean;\n __disableStickyMobile?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const modalContext = useModalContext();\n\n return (\n <InternalContainer\n {...props}\n __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n />\n );\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n fitHeight,\n media,\n __stickyOffset,\n __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __fullPage = false,\n __disableStickyMobile = true,\n __funnelSubStepProps,\n __subStepRef,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const isRefresh = useVisualRefresh();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile,\n __fullPage && isRefresh && !isMobile\n );\n const contentId = useUniqueId();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n const hasMedia = !!media?.content;\n const hasToolbar = getGlobalFlag('appLayoutWidget');\n const mediaPosition = media?.position ?? 'top';\n return (\n <div\n {...baseProps}\n {...__funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n shouldHaveStickyStyles && [styles['sticky-enabled']],\n isRefresh && styles.refresh\n )}\n ref={mergedRef}\n >\n {hasMedia && (\n <div\n className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n >\n {media.content}\n </div>\n )}\n <div\n id={contentId}\n ref={__subStepRef}\n className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n >\n {header && (\n <ContainerHeaderContextProvider>\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-toolbar']]: hasToolbar,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n [styles['header-with-media']]: hasMedia,\n [styles['header-full-page']]: __fullPage && isRefresh,\n })}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n {header}\n </div>\n </StickyHeaderContext.Provider>\n </ContainerHeaderContextProvider>\n )}\n <div\n className={clsx(styles.content, fitHeight && styles['content-fit-height'], {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ContainerProps } from './interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport styles from './styles.css.js';\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n __stickyHeader?: boolean;\n __stickyOffset?: number;\n __mobileStickyOffset?: number;\n __disableFooterDivider?: boolean;\n __disableFooterPaddings?: boolean;\n __hiddenContent?: boolean;\n __headerRef?: React.RefObject<HTMLDivElement>;\n __fullPage?: boolean;\n __disableStickyMobile?: boolean;\n /**\n * Additional internal variant:\n * * `embedded` - Use this variant within a parent container (such as a modal,\n * expandable section, container or split panel).\n * * `full-page` – Only for internal use in table, cards and other components\n */\n variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n const modalContext = useModalContext();\n\n return (\n <InternalContainer\n {...props}\n __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n />\n );\n}\n\nexport default function InternalContainer({\n header,\n footer,\n children,\n variant = 'default',\n disableHeaderPaddings = false,\n disableContentPaddings = false,\n fitHeight,\n media,\n __stickyOffset,\n __mobileStickyOffset,\n __stickyHeader = false,\n __internalRootRef = null,\n __disableFooterDivider = false,\n __disableFooterPaddings = false,\n __hiddenContent = false,\n __headerRef,\n __fullPage = false,\n __disableStickyMobile = true,\n __funnelSubStepProps,\n __subStepRef,\n ...restProps\n}: InternalContainerProps) {\n const isMobile = useMobile();\n const isRefresh = useVisualRefresh();\n const baseProps = getBaseProps(restProps);\n const rootRef = useRef<HTMLDivElement>(null);\n const headerRef = useRef<HTMLDivElement>(null);\n const { isSticky, isStuck, stickyStyles } = useStickyHeader(\n rootRef,\n headerRef,\n __stickyHeader,\n __stickyOffset,\n __mobileStickyOffset,\n __disableStickyMobile,\n __fullPage && isRefresh && !isMobile\n );\n const contentId = useUniqueId();\n\n const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n // The container is only sticky on mobile if it is the header for the table.\n // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n const shouldHaveStickyStyles = isSticky && !isMobile;\n\n const hasMedia = !!media?.content;\n const mediaPosition = media?.position ?? 'top';\n return (\n <div\n {...baseProps}\n {...__funnelSubStepProps}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[`variant-${variant}`],\n fitHeight && styles['fit-height'],\n hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n shouldHaveStickyStyles && [styles['sticky-enabled']],\n isRefresh && styles.refresh\n )}\n ref={mergedRef}\n >\n {hasMedia && (\n <div\n className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n >\n {media.content}\n </div>\n )}\n <div\n id={contentId}\n ref={__subStepRef}\n className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n >\n {header && (\n <ContainerHeaderContextProvider>\n <StickyHeaderContext.Provider value={{ isStuck }}>\n <div\n className={clsx(isRefresh && styles.refresh, styles.header, styles[`header-variant-${variant}`], {\n [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n [styles['header-sticky-enabled']]: isSticky,\n [styles['header-dynamic-height']]: hasDynamicHeight,\n [styles['header-stuck']]: isStuck,\n [styles['with-paddings']]: !disableHeaderPaddings,\n [styles['with-hidden-content']]: !children || __hiddenContent,\n [styles['header-with-media']]: hasMedia,\n [styles['header-full-page']]: __fullPage && isRefresh,\n })}\n {...stickyStyles}\n ref={headerMergedRef}\n >\n {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n {header}\n </div>\n </StickyHeaderContext.Provider>\n </ContainerHeaderContextProvider>\n )}\n <div\n className={clsx(styles.content, fitHeight && styles['content-fit-height'], {\n [styles['with-paddings']]: !disableContentPaddings,\n })}\n >\n {children}\n </div>\n {footer && (\n <div\n className={clsx(styles.footer, {\n [styles['with-divider']]: !__disableFooterDivider,\n [styles['with-paddings']]: !__disableFooterPaddings,\n })}\n >\n {footer}\n </div>\n )}\n </div>\n </div>\n );\n}\n"]}
|
package/container/styles.css.js
CHANGED
|
@@ -1,36 +1,35 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"fit-height": "awsui_fit-
|
|
6
|
-
"with-side-media": "awsui_with-side-
|
|
7
|
-
"variant-default": "awsui_variant-
|
|
8
|
-
"variant-stacked": "awsui_variant-
|
|
9
|
-
"refresh": "
|
|
10
|
-
"sticky-enabled": "awsui_sticky-
|
|
11
|
-
"with-top-media": "awsui_with-top-
|
|
12
|
-
"content-wrapper": "awsui_content-
|
|
13
|
-
"content-wrapper-fit-height": "awsui_content-wrapper-fit-
|
|
14
|
-
"media": "
|
|
15
|
-
"media-top": "awsui_media-
|
|
16
|
-
"media-side": "awsui_media-
|
|
17
|
-
"header": "
|
|
18
|
-
"header-full-page": "awsui_header-full-
|
|
19
|
-
"header-with-media": "awsui_header-with-
|
|
20
|
-
"header-sticky-disabled": "awsui_header-sticky-
|
|
21
|
-
"header-sticky-enabled": "awsui_header-sticky-
|
|
22
|
-
"header-stuck": "awsui_header-
|
|
23
|
-
"header-variant-cards": "awsui_header-variant-
|
|
24
|
-
"header-dynamic-height": "awsui_header-dynamic-
|
|
25
|
-
"with-paddings": "awsui_with-
|
|
26
|
-
"with-hidden-content": "awsui_with-hidden-
|
|
27
|
-
"header-variant-full-page": "awsui_header-variant-full-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"content": "
|
|
31
|
-
"content-
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"with-divider": "awsui_with-divider_14iqq_1ml84_423"
|
|
4
|
+
"root": "awsui_root_14iqq_1vekq_101",
|
|
5
|
+
"fit-height": "awsui_fit-height_14iqq_1vekq_137",
|
|
6
|
+
"with-side-media": "awsui_with-side-media_14iqq_1vekq_142",
|
|
7
|
+
"variant-default": "awsui_variant-default_14iqq_1vekq_145",
|
|
8
|
+
"variant-stacked": "awsui_variant-stacked_14iqq_1vekq_145",
|
|
9
|
+
"refresh": "awsui_refresh_14iqq_1vekq_153",
|
|
10
|
+
"sticky-enabled": "awsui_sticky-enabled_14iqq_1vekq_203",
|
|
11
|
+
"with-top-media": "awsui_with-top-media_14iqq_1vekq_215",
|
|
12
|
+
"content-wrapper": "awsui_content-wrapper_14iqq_1vekq_220",
|
|
13
|
+
"content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1vekq_225",
|
|
14
|
+
"media": "awsui_media_14iqq_1vekq_232",
|
|
15
|
+
"media-top": "awsui_media-top_14iqq_1vekq_250",
|
|
16
|
+
"media-side": "awsui_media-side_14iqq_1vekq_255",
|
|
17
|
+
"header": "awsui_header_14iqq_1vekq_261",
|
|
18
|
+
"header-full-page": "awsui_header-full-page_14iqq_1vekq_266",
|
|
19
|
+
"header-with-media": "awsui_header-with-media_14iqq_1vekq_269",
|
|
20
|
+
"header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1vekq_275",
|
|
21
|
+
"header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1vekq_279",
|
|
22
|
+
"header-stuck": "awsui_header-stuck_14iqq_1vekq_285",
|
|
23
|
+
"header-variant-cards": "awsui_header-variant-cards_14iqq_1vekq_295",
|
|
24
|
+
"header-dynamic-height": "awsui_header-dynamic-height_14iqq_1vekq_298",
|
|
25
|
+
"with-paddings": "awsui_with-paddings_14iqq_1vekq_304",
|
|
26
|
+
"with-hidden-content": "awsui_with-hidden-content_14iqq_1vekq_313",
|
|
27
|
+
"header-variant-full-page": "awsui_header-variant-full-page_14iqq_1vekq_371",
|
|
28
|
+
"header-cover": "awsui_header-cover_14iqq_1vekq_374",
|
|
29
|
+
"content": "awsui_content_14iqq_1vekq_220",
|
|
30
|
+
"content-fit-height": "awsui_content-fit-height_14iqq_1vekq_402",
|
|
31
|
+
"content-with-media": "awsui_content-with-media_14iqq_1vekq_412",
|
|
32
|
+
"footer": "awsui_footer_14iqq_1vekq_416",
|
|
33
|
+
"with-divider": "awsui_with-divider_14iqq_1vekq_420"
|
|
35
34
|
};
|
|
36
35
|
|