@cloudscape-design/components 3.0.896 → 3.0.898
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 +36 -30
- package/annotation-context/annotation/styles.selectors.js +24 -24
- package/app-layout/visual-refresh-toolbar/index.d.ts +2 -16
- package/app-layout/visual-refresh-toolbar/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/index.js +3 -3
- package/app-layout/visual-refresh-toolbar/index.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/interfaces.d.ts +3 -0
- package/app-layout/visual-refresh-toolbar/interfaces.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/interfaces.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/multi-layout.d.ts +1 -1
- package/app-layout/visual-refresh-toolbar/multi-layout.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/multi-layout.js +7 -5
- package/app-layout/visual-refresh-toolbar/multi-layout.js.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map +1 -1
- package/app-layout/visual-refresh-toolbar/toolbar/index.js +1 -24
- package/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/button-dropdown/item-element/index.d.ts.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 +15 -14
- package/button-dropdown/item-element/styles.scoped.css +25 -22
- package/button-dropdown/item-element/styles.selectors.js +15 -14
- package/hotspot/styles.css.js +7 -7
- package/hotspot/styles.scoped.css +8 -8
- package/hotspot/styles.selectors.js +7 -7
- package/internal/components/option/highlight-match.js +1 -1
- package/internal/components/option/highlight-match.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multi-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/multi-layout.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAc,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AA6BlE,SAAS,kBAAkB,CAAC,KAAc,EAAE,QAAgB;IAC1D,IAAI,KAAK,EAAE;QACT,QAAQ,CACN,WAAW,EACX,4DAA4D,QAAQ,2CAA2C,CAChH,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,QAAqB,EACrB,eAAoD;;IAEpD,MAAM,OAAO,GAAiB,EAAE,CAAC;IACjC,KAAK,MAAM,KAAK,IAAI,CAAC,QAAQ,EAAE,GAAG,eAAe,CAAC,EAAE;QAClD,OAAO,CAAC,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,MAAA,OAAO,CAAC,UAAU,mCAAI,EAAE,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QAC/E,
|
|
1
|
+
{"version":3,"file":"multi-layout.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/multi-layout.ts"],"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, { useLayoutEffect, useState } from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { RegistrationState } from '../../internal/plugins/controllers/app-layout-widget';\nimport { AppLayoutProps } from '../interfaces';\nimport { OnChangeParams } from '../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../utils/use-focus-control';\nimport { SplitPanelToggleProps, ToolbarProps } from './toolbar';\n\nexport interface SharedProps {\n forceDeduplicationType?: 'primary' | 'secondary' | 'suspended' | 'off';\n ariaLabels: AppLayoutProps.Labels | undefined;\n navigation: React.ReactNode;\n navigationOpen: boolean;\n onNavigationToggle: (open: boolean) => void;\n navigationFocusRef: React.Ref<Focusable> | undefined;\n breadcrumbs: React.ReactNode;\n activeDrawerId: string | null;\n drawers: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n onActiveDrawerChange: ((drawerId: string | null, params: OnChangeParams) => void) | undefined;\n drawersFocusRef: React.Ref<Focusable> | undefined;\n globalDrawersFocusControl?: FocusControlMultipleStates | undefined;\n globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n activeGlobalDrawersIds?: Array<string> | undefined;\n onActiveGlobalDrawersChange?: ((newDrawerId: string, params: OnChangeParams) => void) | undefined;\n splitPanel: React.ReactNode;\n splitPanelToggleProps: SplitPanelToggleProps | undefined;\n splitPanelFocusRef: React.Ref<Focusable> | undefined;\n onSplitPanelToggle: () => void;\n}\n\nfunction checkAlreadyExists(value: boolean, propName: string) {\n if (value) {\n warnOnce(\n 'AppLayout',\n `Another app layout instance on this page already defines ${propName} property. This instance will be ignored.`\n );\n return true;\n }\n return false;\n}\n\nexport function mergeProps(\n ownProps: SharedProps,\n additionalProps: ReadonlyArray<Partial<SharedProps>>\n): ToolbarProps | null {\n const toolbar: ToolbarProps = {};\n for (const props of [ownProps, ...additionalProps]) {\n toolbar.ariaLabels = Object.assign(toolbar.ariaLabels ?? {}, props.ariaLabels);\n if (\n props.drawers &&\n props.drawers.some(drawer => drawer.trigger) &&\n !checkAlreadyExists(!!toolbar.drawers, 'tools or drawers')\n ) {\n toolbar.drawers = props.drawers;\n toolbar.activeDrawerId = props.activeDrawerId;\n toolbar.drawersFocusRef = props.drawersFocusRef;\n toolbar.onActiveDrawerChange = props.onActiveDrawerChange;\n }\n if (props.globalDrawers && !checkAlreadyExists(!!toolbar.globalDrawers, 'globalDrawers')) {\n toolbar.globalDrawersFocusControl = props.globalDrawersFocusControl;\n toolbar.globalDrawers = props.globalDrawers;\n toolbar.activeGlobalDrawersIds = props.activeGlobalDrawersIds;\n toolbar.onActiveGlobalDrawersChange = props.onActiveGlobalDrawersChange;\n }\n if (props.navigation && !checkAlreadyExists(!!toolbar.hasNavigation, 'navigation')) {\n toolbar.hasNavigation = true;\n toolbar.navigationOpen = props.navigationOpen;\n toolbar.navigationFocusRef = props.navigationFocusRef;\n toolbar.onNavigationToggle = props.onNavigationToggle;\n }\n if (\n props.splitPanel &&\n props.splitPanelToggleProps?.displayed &&\n !checkAlreadyExists(!!toolbar.hasSplitPanel, 'splitPanel')\n ) {\n toolbar.hasSplitPanel = true;\n toolbar.splitPanelFocusRef = props.splitPanelFocusRef;\n toolbar.splitPanelToggleProps = props.splitPanelToggleProps;\n toolbar.onSplitPanelToggle = props.onSplitPanelToggle;\n }\n if (props.breadcrumbs && !checkAlreadyExists(!!toolbar.hasBreadcrumbsPortal, 'hasBreadcrumbsPortal')) {\n toolbar.hasBreadcrumbsPortal = true;\n }\n }\n // do not render toolbar if no fields are defined, except ariaLabels, which are always there\n return Object.keys(toolbar).filter(key => key !== 'ariaLabels').length > 0 ? toolbar : null;\n}\n\nexport function useMultiAppLayout(props: SharedProps, isEnabled: boolean) {\n const [registration, setRegistration] = useState<RegistrationState<SharedProps> | null>(null);\n const { forceDeduplicationType } = props;\n\n useLayoutEffect(() => {\n if (!isEnabled || forceDeduplicationType === 'suspended') {\n return;\n }\n if (forceDeduplicationType === 'off') {\n setRegistration({ type: 'primary', discoveredProps: [] });\n return;\n }\n return awsuiPluginsInternal.appLayoutWidget.register(forceDeduplicationType, props =>\n setRegistration(props as RegistrationState<SharedProps>)\n );\n }, [forceDeduplicationType, isEnabled]);\n\n useLayoutEffect(() => {\n if (registration?.type === 'secondary') {\n registration.update(props);\n }\n });\n\n return {\n registered: !!registration?.type,\n toolbarProps: registration?.type === 'primary' ? mergeProps(props, registration.discoveredProps) : null,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAChG;AAED,MAAM,WAAW,mCAAmC;IAClD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAMjD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,OAAO,EAAkB,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAM1E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AAEjC,MAAM,WAAW,YAAY;IAC3B,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IAEnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAG1C,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAG/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAGhC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC/C,eAAe,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACvC,yBAAyB,CAAC,EAAE,0BAA0B,CAAC;IACvD,oBAAoB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC;IACjF,aAAa,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;IACjE,sBAAsB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,2BAA2B,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,cAAc,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAChG;AAED,MAAM,WAAW,mCAAmC;IAClD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED,wBAAgB,8BAA8B,CAAC,EAC7C,kBAAkB,EAGlB,YAAiB,GAClB,EAAE,mCAAmC,eA2IrC;AAED,eAAO,MAAM,gCAAgC,uGAG5C,CAAC"}
|
|
@@ -11,36 +11,13 @@ import { DrawerTriggers } from './drawer-triggers';
|
|
|
11
11
|
import TriggerButton from './trigger-button';
|
|
12
12
|
import testutilStyles from '../../test-classes/styles.css.js';
|
|
13
13
|
import styles from './styles.css.js';
|
|
14
|
-
// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd
|
|
15
|
-
function convertLegacyProps(toolbarProps, legacyProps) {
|
|
16
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
|
|
17
|
-
return {
|
|
18
|
-
ariaLabels: (_a = toolbarProps.ariaLabels) !== null && _a !== void 0 ? _a : legacyProps.ariaLabels,
|
|
19
|
-
activeDrawerId: (_b = toolbarProps.activeDrawerId) !== null && _b !== void 0 ? _b : (_c = legacyProps.activeDrawer) === null || _c === void 0 ? void 0 : _c.id,
|
|
20
|
-
drawers: (_d = toolbarProps.drawers) !== null && _d !== void 0 ? _d : legacyProps.drawers,
|
|
21
|
-
drawersFocusRef: (_e = toolbarProps.drawersFocusRef) !== null && _e !== void 0 ? _e : (_f = legacyProps.drawersFocusControl) === null || _f === void 0 ? void 0 : _f.refs.toggle,
|
|
22
|
-
globalDrawersFocusControl: toolbarProps.globalDrawersFocusControl,
|
|
23
|
-
onActiveDrawerChange: (_g = toolbarProps.onActiveDrawerChange) !== null && _g !== void 0 ? _g : legacyProps.onActiveDrawerChange,
|
|
24
|
-
globalDrawers: (_h = toolbarProps.globalDrawers) !== null && _h !== void 0 ? _h : legacyProps.globalDrawers,
|
|
25
|
-
activeGlobalDrawersIds: (_j = toolbarProps.activeGlobalDrawersIds) !== null && _j !== void 0 ? _j : legacyProps.activeGlobalDrawersIds,
|
|
26
|
-
onActiveGlobalDrawersChange: (_k = toolbarProps.onActiveGlobalDrawersChange) !== null && _k !== void 0 ? _k : legacyProps.onActiveGlobalDrawersChange,
|
|
27
|
-
hasNavigation: (_l = toolbarProps.hasNavigation) !== null && _l !== void 0 ? _l : !!legacyProps.navigation,
|
|
28
|
-
navigationOpen: (_m = toolbarProps.navigationOpen) !== null && _m !== void 0 ? _m : legacyProps.navigationOpen,
|
|
29
|
-
navigationFocusRef: (_o = toolbarProps.navigationFocusRef) !== null && _o !== void 0 ? _o : (_p = legacyProps.navigationFocusControl) === null || _p === void 0 ? void 0 : _p.refs.toggle,
|
|
30
|
-
onNavigationToggle: (_q = toolbarProps.onNavigationToggle) !== null && _q !== void 0 ? _q : legacyProps.onNavigationToggle,
|
|
31
|
-
hasSplitPanel: (_r = toolbarProps.hasSplitPanel) !== null && _r !== void 0 ? _r : true,
|
|
32
|
-
splitPanelFocusRef: (_s = legacyProps.splitPanelFocusControl) === null || _s === void 0 ? void 0 : _s.refs.toggle,
|
|
33
|
-
splitPanelToggleProps: (_t = toolbarProps.splitPanelToggleProps) !== null && _t !== void 0 ? _t : Object.assign(Object.assign({}, legacyProps.splitPanelToggleConfig), { active: legacyProps.splitPanelOpen, controlId: legacyProps.splitPanelControlId, position: legacyProps.splitPanelPosition }),
|
|
34
|
-
onSplitPanelToggle: (_u = toolbarProps.onSplitPanelToggle) !== null && _u !== void 0 ? _u : legacyProps.onSplitPanelToggle,
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
14
|
export function AppLayoutToolbarImplementation({ appLayoutInternals,
|
|
38
15
|
// the value could be undefined if this component is loaded as a widget by a different app layout version
|
|
39
16
|
// not testable in a single-version setup
|
|
40
17
|
toolbarProps = {}, }) {
|
|
41
18
|
var _a, _b, _c;
|
|
42
19
|
const { breadcrumbs, discoveredBreadcrumbs, verticalOffsets, isMobile, toolbarState, setToolbarState, setToolbarHeight, } = appLayoutInternals;
|
|
43
|
-
const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, globalDrawersFocusControl, globalDrawers, activeGlobalDrawersIds, onActiveGlobalDrawersChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, } =
|
|
20
|
+
const { ariaLabels, activeDrawerId, drawers, drawersFocusRef, onActiveDrawerChange, globalDrawersFocusControl, globalDrawers, activeGlobalDrawersIds, onActiveGlobalDrawersChange, hasNavigation, navigationOpen, navigationFocusRef, onNavigationToggle, hasSplitPanel, splitPanelFocusRef, splitPanelToggleProps, onSplitPanelToggle, } = toolbarProps;
|
|
44
21
|
// TODO: expose configuration property
|
|
45
22
|
const pinnedToolbar = true;
|
|
46
23
|
const ref = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { BreadcrumbsSlot } from '../skeleton/breadcrumbs';\nimport { ToolbarSkeleton } from '../skeleton/slot-skeletons';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string | null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n globalDrawersFocusControl?: FocusControlMultipleStates;\n onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;\n globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n activeGlobalDrawersIds?: ReadonlyArray<string>;\n onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\n// support compatibility with changes before this commit: cf0f2b0755af1a28ac7c3c9476418a7ea807d0fd\nfunction convertLegacyProps(toolbarProps: ToolbarProps, legacyProps: AppLayoutInternals): ToolbarProps {\n return {\n ariaLabels: toolbarProps.ariaLabels ?? legacyProps.ariaLabels,\n activeDrawerId: toolbarProps.activeDrawerId ?? legacyProps.activeDrawer?.id,\n drawers: toolbarProps.drawers ?? legacyProps.drawers,\n drawersFocusRef: toolbarProps.drawersFocusRef ?? legacyProps.drawersFocusControl?.refs.toggle,\n globalDrawersFocusControl: toolbarProps.globalDrawersFocusControl,\n onActiveDrawerChange: toolbarProps.onActiveDrawerChange ?? legacyProps.onActiveDrawerChange,\n globalDrawers: toolbarProps.globalDrawers ?? legacyProps.globalDrawers,\n activeGlobalDrawersIds: toolbarProps.activeGlobalDrawersIds ?? legacyProps.activeGlobalDrawersIds,\n onActiveGlobalDrawersChange: toolbarProps.onActiveGlobalDrawersChange ?? legacyProps.onActiveGlobalDrawersChange,\n hasNavigation: toolbarProps.hasNavigation ?? !!legacyProps.navigation,\n navigationOpen: toolbarProps.navigationOpen ?? legacyProps.navigationOpen,\n navigationFocusRef: toolbarProps.navigationFocusRef ?? legacyProps.navigationFocusControl?.refs.toggle,\n onNavigationToggle: toolbarProps.onNavigationToggle ?? legacyProps.onNavigationToggle,\n hasSplitPanel: toolbarProps.hasSplitPanel ?? true,\n splitPanelFocusRef: legacyProps.splitPanelFocusControl?.refs.toggle,\n splitPanelToggleProps: toolbarProps.splitPanelToggleProps ?? {\n ...legacyProps.splitPanelToggleConfig,\n active: legacyProps.splitPanelOpen,\n controlId: legacyProps.splitPanelControlId,\n position: legacyProps.splitPanelPosition,\n },\n onSplitPanelToggle: toolbarProps.onSplitPanelToggle ?? legacyProps.onSplitPanelToggle,\n };\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n toolbarState,\n setToolbarState,\n setToolbarHeight,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n globalDrawersFocusControl,\n globalDrawers,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n } = convertLegacyProps(toolbarProps, 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 anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n useEffect(() => {\n if (anyPanelOpenInMobile) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n }, [anyPanelOpenInMobile]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n const navLandmarkAttributes = navigationOpen\n ? { role: 'presentation' }\n : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], testutilStyles.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 {hasNavigation && (\n <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => onNavigationToggle?.(!navigationOpen)}\n ref={navigationFocusRef}\n selected={navigationOpen}\n disabled={anyPanelOpenInMobile}\n />\n </nav>\n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n <BreadcrumbsSlot\n ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n />\n </div>\n )}\n {(drawers?.length || globalDrawers?.length || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <div className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers?.filter(item => !!item.trigger) ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={anyPanelOpenInMobile}\n globalDrawersFocusControl={globalDrawersFocusControl}\n globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n />\n </div>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n AppLayoutToolbarImplementation,\n ToolbarSkeleton\n);\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/toolbar/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';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutProps } from '../../interfaces';\nimport { OnChangeParams } from '../../utils/use-drawers';\nimport { Focusable, FocusControlMultipleStates } from '../../utils/use-focus-control';\nimport { AppLayoutInternals } from '../interfaces';\nimport { BreadcrumbsSlot } from '../skeleton/breadcrumbs';\nimport { ToolbarSkeleton } from '../skeleton/slot-skeletons';\nimport { ToolbarSlot } from '../skeleton/slot-wrappers';\nimport { DrawerTriggers, SplitPanelToggleProps } from './drawer-triggers';\nimport TriggerButton from './trigger-button';\n\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { SplitPanelToggleProps };\n\nexport interface ToolbarProps {\n ariaLabels?: AppLayoutProps.Labels;\n // navigation\n hasNavigation?: boolean;\n navigationOpen?: boolean;\n onNavigationToggle?: (open: boolean) => void;\n navigationFocusRef?: React.Ref<Focusable>;\n\n // breadcrumbs\n hasBreadcrumbsPortal?: boolean;\n\n // split panel\n hasSplitPanel?: boolean;\n splitPanelToggleProps?: SplitPanelToggleProps;\n splitPanelFocusRef?: React.Ref<Focusable>;\n onSplitPanelToggle?: () => void;\n\n // drawers\n activeDrawerId?: string | null;\n drawers?: ReadonlyArray<AppLayoutProps.Drawer>;\n drawersFocusRef?: React.Ref<Focusable>;\n globalDrawersFocusControl?: FocusControlMultipleStates;\n onActiveDrawerChange?: (drawerId: string | null, params: OnChangeParams) => void;\n globalDrawers?: ReadonlyArray<AppLayoutProps.Drawer> | undefined;\n activeGlobalDrawersIds?: ReadonlyArray<string>;\n onActiveGlobalDrawersChange?: ((drawerId: string, params: OnChangeParams) => void) | undefined;\n}\n\nexport interface AppLayoutToolbarImplementationProps {\n appLayoutInternals: AppLayoutInternals;\n toolbarProps: ToolbarProps;\n}\n\nexport function AppLayoutToolbarImplementation({\n appLayoutInternals,\n // the value could be undefined if this component is loaded as a widget by a different app layout version\n // not testable in a single-version setup\n toolbarProps = {},\n}: AppLayoutToolbarImplementationProps) {\n const {\n breadcrumbs,\n discoveredBreadcrumbs,\n verticalOffsets,\n isMobile,\n toolbarState,\n setToolbarState,\n setToolbarHeight,\n } = appLayoutInternals;\n const {\n ariaLabels,\n activeDrawerId,\n drawers,\n drawersFocusRef,\n onActiveDrawerChange,\n globalDrawersFocusControl,\n globalDrawers,\n activeGlobalDrawersIds,\n onActiveGlobalDrawersChange,\n hasNavigation,\n navigationOpen,\n navigationFocusRef,\n onNavigationToggle,\n hasSplitPanel,\n splitPanelFocusRef,\n splitPanelToggleProps,\n onSplitPanelToggle,\n } = toolbarProps;\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 anyPanelOpenInMobile = !!isMobile && (!!activeDrawerId || (!!navigationOpen && !!hasNavigation));\n useEffect(() => {\n if (anyPanelOpenInMobile) {\n document.body.classList.add(styles['block-body-scroll']);\n } else {\n document.body.classList.remove(styles['block-body-scroll']);\n }\n return () => {\n document.body.classList.remove(styles['block-body-scroll']);\n };\n }, [anyPanelOpenInMobile]);\n\n const toolbarHidden = toolbarState === 'hide' && !pinnedToolbar;\n const navLandmarkAttributes = navigationOpen\n ? { role: 'presentation' }\n : { role: 'navigation', 'aria-label': ariaLabels?.navigation };\n\n return (\n <ToolbarSlot\n ref={ref}\n className={clsx(styles['universal-toolbar'], testutilStyles.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 {hasNavigation && (\n <nav {...navLandmarkAttributes} className={clsx(styles['universal-toolbar-nav'])}>\n <TriggerButton\n ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n ariaExpanded={false}\n iconName=\"menu\"\n className={testutilStyles['navigation-toggle']}\n onClick={() => onNavigationToggle?.(!navigationOpen)}\n ref={navigationFocusRef}\n selected={navigationOpen}\n disabled={anyPanelOpenInMobile}\n />\n </nav>\n )}\n {(breadcrumbs || discoveredBreadcrumbs) && (\n <div className={clsx(styles['universal-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>\n <BreadcrumbsSlot\n ownBreadcrumbs={appLayoutInternals.breadcrumbs}\n discoveredBreadcrumbs={appLayoutInternals.discoveredBreadcrumbs}\n />\n </div>\n )}\n {(drawers?.length || globalDrawers?.length || (hasSplitPanel && splitPanelToggleProps?.displayed)) && (\n <div className={clsx(styles['universal-toolbar-drawers'])}>\n <DrawerTriggers\n ariaLabels={ariaLabels}\n activeDrawerId={activeDrawerId ?? null}\n drawers={drawers?.filter(item => !!item.trigger) ?? []}\n drawersFocusRef={drawersFocusRef}\n onActiveDrawerChange={onActiveDrawerChange}\n splitPanelToggleProps={splitPanelToggleProps?.displayed ? splitPanelToggleProps : undefined}\n splitPanelFocusRef={splitPanelFocusRef}\n onSplitPanelToggle={onSplitPanelToggle}\n disabled={anyPanelOpenInMobile}\n globalDrawersFocusControl={globalDrawersFocusControl}\n globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}\n activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}\n onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}\n />\n </div>\n )}\n </div>\n </ToolbarSlot>\n );\n}\n\nexport const createWidgetizedAppLayoutToolbar = createWidgetizedComponent(\n AppLayoutToolbarImplementation,\n ToolbarSkeleton\n);\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsC,SAAS,EAAY,MAAM,eAAe,CAAC;AASxF,QAAA,MAAM,WAAW,uLAad,SAAS,gBAoDX,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/item-element/index.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsC,SAAS,EAAY,MAAM,eAAe,CAAC;AASxF,QAAA,MAAM,WAAW,uLAad,SAAS,gBAoDX,CAAC;AA0HF,eAAe,WAAW,CAAC"}
|
|
@@ -60,7 +60,7 @@ function MenuItem({ item, disabled, highlighted, linkStyle }) {
|
|
|
60
60
|
}, [highlighted]);
|
|
61
61
|
const isDisabledWithReason = disabled && item.disabledReason;
|
|
62
62
|
const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);
|
|
63
|
-
const menuItemProps = Object.assign(Object.assign({ 'aria-label': item.ariaLabel, className: clsx(styles['menu-item'], analyticsLabels['menu-item'], linkStyle && styles['link-style'], isCurrentBreadcrumb && styles['current-breadcrumb']), 'aria-current': isCurrentBreadcrumb, lang: item.lang, ref: menuItemRef,
|
|
63
|
+
const menuItemProps = Object.assign(Object.assign({ 'aria-label': item.ariaLabel, className: clsx(styles['menu-item'], analyticsLabels['menu-item'], linkStyle && styles['link-style'], linkStyle && highlighted && styles['link-style-highlighted'], isCurrentBreadcrumb && styles['current-breadcrumb']), 'aria-current': isCurrentBreadcrumb, lang: item.lang, ref: menuItemRef,
|
|
64
64
|
// We are using the roving tabindex technique to manage the focus state of the dropdown.
|
|
65
65
|
// The current element will always have tabindex=0 which means that it can be tabbed to,
|
|
66
66
|
// while all other items have tabindex=-1 so we can focus them when necessary.
|
|
@@ -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';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownClick } from '../analytics-metadata/interfaces';\nimport { InternalCheckboxItem, InternalItem, ItemProps, LinkItem } from '../interfaces';\nimport Tooltip from '../tooltip';\nimport { getMenuItemCheckboxProps, getMenuItemProps } from '../utils/menu-item';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport { getItemTarget } from '../utils/utils';\n\nimport analyticsLabels from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst ItemElement = ({\n position = '1',\n item,\n disabled,\n onItemActivate,\n highlighted,\n highlightItem,\n showDivider,\n hasCategoryHeader,\n isKeyboardHighlighted = false,\n analyticsMetadataTransformer = (metadata: GeneratedAnalyticsMetadataFragment) => metadata,\n variant = 'normal',\n linkStyle,\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 {...getAnalyticsMetadataAttribute(\n disabled\n ? {}\n : (analyticsMetadataTransformer!({\n action: 'click',\n detail: {\n position,\n id: item.id,\n label: `.${analyticsLabels['menu-item']}`,\n href: (item as LinkItem).href || '',\n },\n }) as GeneratedAnalyticsMetadataButtonDropdownClick)\n )}\n >\n <MenuItem item={item} disabled={disabled} highlighted={highlighted} linkStyle={linkStyle} />\n </li>\n );\n};\n\ninterface MenuItemProps {\n item: InternalItem | InternalCheckboxItem;\n disabled: boolean;\n highlighted: boolean;\n linkStyle?: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted, linkStyle }: MenuItemProps) {\n const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n const isCheckbox = isCheckboxItem(item);\n const isCurrentBreadcrumb = !isCheckbox && item.isCurrentBreadcrumb;\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 'aria-label': item.ariaLabel,\n className: clsx(\n styles['menu-item'],\n analyticsLabels['menu-item'],\n linkStyle && styles['link-style'],\n isCurrentBreadcrumb && styles['current-breadcrumb']\n ),\n 'aria-current': isCurrentBreadcrumb,\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 = ({ item, disabled }: { item: InternalItem | InternalCheckboxItem; disabled: boolean }) => {\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":"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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';\n\nimport {\n GeneratedAnalyticsMetadataFragment,\n getAnalyticsMetadataAttribute,\n} from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon, { InternalIconProps } from '../../icon/internal';\nimport { useDropdownContext } from '../../internal/components/dropdown/context';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownClick } from '../analytics-metadata/interfaces';\nimport { InternalCheckboxItem, InternalItem, ItemProps, LinkItem } from '../interfaces';\nimport Tooltip from '../tooltip';\nimport { getMenuItemCheckboxProps, getMenuItemProps } from '../utils/menu-item';\nimport { isCheckboxItem, isLinkItem } from '../utils/utils';\nimport { getItemTarget } from '../utils/utils';\n\nimport analyticsLabels from '../analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst ItemElement = ({\n position = '1',\n item,\n disabled,\n onItemActivate,\n highlighted,\n highlightItem,\n showDivider,\n hasCategoryHeader,\n isKeyboardHighlighted = false,\n analyticsMetadataTransformer = (metadata: GeneratedAnalyticsMetadataFragment) => metadata,\n variant = 'normal',\n linkStyle,\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 {...getAnalyticsMetadataAttribute(\n disabled\n ? {}\n : (analyticsMetadataTransformer!({\n action: 'click',\n detail: {\n position,\n id: item.id,\n label: `.${analyticsLabels['menu-item']}`,\n href: (item as LinkItem).href || '',\n },\n }) as GeneratedAnalyticsMetadataButtonDropdownClick)\n )}\n >\n <MenuItem item={item} disabled={disabled} highlighted={highlighted} linkStyle={linkStyle} />\n </li>\n );\n};\n\ninterface MenuItemProps {\n item: InternalItem | InternalCheckboxItem;\n disabled: boolean;\n highlighted: boolean;\n linkStyle?: boolean;\n}\n\nfunction MenuItem({ item, disabled, highlighted, linkStyle }: MenuItemProps) {\n const menuItemRef = useRef<(HTMLSpanElement & HTMLAnchorElement) | null>(null);\n const isCheckbox = isCheckboxItem(item);\n const isCurrentBreadcrumb = !isCheckbox && item.isCurrentBreadcrumb;\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 'aria-label': item.ariaLabel,\n className: clsx(\n styles['menu-item'],\n analyticsLabels['menu-item'],\n linkStyle && styles['link-style'],\n linkStyle && highlighted && styles['link-style-highlighted'],\n isCurrentBreadcrumb && styles['current-breadcrumb']\n ),\n 'aria-current': isCurrentBreadcrumb,\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 = ({ item, disabled }: { item: InternalItem | InternalCheckboxItem; disabled: boolean }) => {\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,19 +1,20 @@
|
|
|
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
|
-
"link-style": "awsui_link-
|
|
11
|
-
"current-breadcrumb": "awsui_current-
|
|
12
|
-
"
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
4
|
+
"item-element": "awsui_item-element_93a1u_1ramd_145",
|
|
5
|
+
"disabled": "awsui_disabled_93a1u_1ramd_157",
|
|
6
|
+
"show-divider": "awsui_show-divider_93a1u_1ramd_164",
|
|
7
|
+
"highlighted": "awsui_highlighted_93a1u_1ramd_167",
|
|
8
|
+
"is-focused": "awsui_is-focused_93a1u_1ramd_182",
|
|
9
|
+
"menu-item": "awsui_menu-item_93a1u_1ramd_187",
|
|
10
|
+
"link-style": "awsui_link-style_93a1u_1ramd_199",
|
|
11
|
+
"current-breadcrumb": "awsui_current-breadcrumb_93a1u_1ramd_235",
|
|
12
|
+
"link-style-highlighted": "awsui_link-style-highlighted_93a1u_1ramd_243",
|
|
13
|
+
"has-category-header": "awsui_has-category-header_93a1u_1ramd_249",
|
|
14
|
+
"item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1ramd_249",
|
|
15
|
+
"has-checkmark": "awsui_has-checkmark_93a1u_1ramd_249",
|
|
16
|
+
"icon": "awsui_icon_93a1u_1ramd_253",
|
|
17
|
+
"checkmark": "awsui_checkmark_93a1u_1ramd_257",
|
|
18
|
+
"external-icon": "awsui_external-icon_93a1u_1ramd_264"
|
|
18
19
|
};
|
|
19
20
|
|
|
@@ -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
|
-
.awsui_item-
|
|
145
|
+
.awsui_item-element_93a1u_1ramd_145:not(#\9) {
|
|
146
146
|
position: relative;
|
|
147
147
|
z-index: 1;
|
|
148
148
|
border-block: var(--border-item-width-yel47s, 2px) solid transparent;
|
|
@@ -154,17 +154,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
154
154
|
margin-block-start: calc(-1 * var(--border-width-field-h1g7tw, 2px));
|
|
155
155
|
cursor: pointer;
|
|
156
156
|
}
|
|
157
|
-
.awsui_item-
|
|
157
|
+
.awsui_item-element_93a1u_1ramd_145.awsui_disabled_93a1u_1ramd_157:not(#\9) {
|
|
158
158
|
cursor: default;
|
|
159
159
|
color: var(--color-text-dropdown-item-disabled-7fg5u8, #b4b4bb);
|
|
160
160
|
}
|
|
161
|
-
.awsui_item-
|
|
161
|
+
.awsui_item-element_93a1u_1ramd_145:not(#\9):first-child {
|
|
162
162
|
margin-block-start: 0;
|
|
163
163
|
}
|
|
164
|
-
.awsui_item-
|
|
164
|
+
.awsui_item-element_93a1u_1ramd_145.awsui_show-divider_93a1u_1ramd_164:not(#\9) {
|
|
165
165
|
border-block-end: var(--border-item-width-yel47s, 2px) solid var(--color-border-dropdown-group-2xoluv, #c6c6cd);
|
|
166
166
|
}
|
|
167
|
-
.awsui_item-
|
|
167
|
+
.awsui_item-element_93a1u_1ramd_145.awsui_highlighted_93a1u_1ramd_167:not(#\9) {
|
|
168
168
|
color: var(--color-text-dropdown-item-highlighted-rnfxxj, #0f141a);
|
|
169
169
|
z-index: 2;
|
|
170
170
|
background-color: var(--color-background-dropdown-item-hover-zhzc84, #f3f3f7);
|
|
@@ -174,17 +174,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
174
174
|
border-end-start-radius: var(--border-radius-item-05df9h, 8px);
|
|
175
175
|
border-end-end-radius: var(--border-radius-item-05df9h, 8px);
|
|
176
176
|
}
|
|
177
|
-
.awsui_item-
|
|
177
|
+
.awsui_item-element_93a1u_1ramd_145.awsui_highlighted_93a1u_1ramd_167.awsui_disabled_93a1u_1ramd_157:not(#\9) {
|
|
178
178
|
color: var(--color-text-dropdown-item-dimmed-7c5xo0, #b4b4bb);
|
|
179
179
|
border-color: var(--color-border-dropdown-item-dimmed-hover-6qayyi, #8c8c94);
|
|
180
180
|
background-color: var(--color-background-dropdown-item-dimmed-dlm6wk, transparent);
|
|
181
181
|
}
|
|
182
|
-
.awsui_item-
|
|
182
|
+
.awsui_item-element_93a1u_1ramd_145.awsui_highlighted_93a1u_1ramd_167.awsui_is-focused_93a1u_1ramd_182:not(#\9) {
|
|
183
183
|
border-color: var(--color-border-dropdown-item-focused-5afjvu, #424650);
|
|
184
184
|
box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-0ctpjf, 0px) var(--color-border-item-focused-nv6mhz, #006ce0);
|
|
185
185
|
}
|
|
186
186
|
|
|
187
|
-
.awsui_menu-
|
|
187
|
+
.awsui_menu-item_93a1u_1ramd_187:not(#\9) {
|
|
188
188
|
min-inline-size: 0;
|
|
189
189
|
word-break: break-word;
|
|
190
190
|
display: flex;
|
|
@@ -196,7 +196,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
196
196
|
/* stylelint-disable selector-max-type */
|
|
197
197
|
/* stylelint-enable selector-max-type */
|
|
198
198
|
}
|
|
199
|
-
.awsui_menu-
|
|
199
|
+
.awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9) {
|
|
200
200
|
padding-block-end: calc(var(--space-xxs-p8yyaw, 4px) + var(--space-xxxs-zbmxqb, 2px));
|
|
201
201
|
text-underline-offset: 0.25em;
|
|
202
202
|
text-decoration-thickness: 1px;
|
|
@@ -211,30 +211,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
211
211
|
transition-duration: var(--motion-duration-refresh-only-medium-nf6485, 165ms);
|
|
212
212
|
}
|
|
213
213
|
@media (prefers-reduced-motion: reduce) {
|
|
214
|
-
.awsui_menu-
|
|
214
|
+
.awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9) {
|
|
215
215
|
animation: none;
|
|
216
216
|
transition: none;
|
|
217
217
|
}
|
|
218
218
|
}
|
|
219
|
-
.awsui-motion-disabled .awsui_menu-
|
|
219
|
+
.awsui-motion-disabled .awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9) {
|
|
220
220
|
animation: none;
|
|
221
221
|
transition: none;
|
|
222
222
|
}
|
|
223
|
-
.awsui_menu-
|
|
223
|
+
.awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9):hover {
|
|
224
224
|
cursor: pointer;
|
|
225
225
|
color: var(--color-text-link-hover-49uoe9, #002b66);
|
|
226
226
|
}
|
|
227
|
-
.awsui_menu-
|
|
227
|
+
.awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9):focus {
|
|
228
228
|
outline: none;
|
|
229
229
|
}
|
|
230
|
-
.awsui_menu-
|
|
230
|
+
.awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9):active {
|
|
231
231
|
color: var(--color-text-link-hover-49uoe9, #002b66);
|
|
232
232
|
}
|
|
233
|
-
.awsui_menu-
|
|
233
|
+
.awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9):active, .awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9):focus, .awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199:not(#\9):hover {
|
|
234
234
|
text-decoration-line: underline;
|
|
235
235
|
text-decoration-color: currentColor;
|
|
236
236
|
}
|
|
237
|
-
.awsui_menu-
|
|
237
|
+
.awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199.awsui_current-breadcrumb_93a1u_1ramd_235:not(#\9) {
|
|
238
238
|
font-weight: var(--font-weight-button-c91p4t, 700);
|
|
239
239
|
-webkit-font-smoothing: var(--font-smoothing-webkit-m8nc84, antialiased);
|
|
240
240
|
-moz-osx-font-smoothing: var(--font-smoothing-moz-osx-foywby, grayscale);
|
|
@@ -242,24 +242,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
242
242
|
font-weight: 700;
|
|
243
243
|
text-decoration: none;
|
|
244
244
|
}
|
|
245
|
-
.awsui_menu-
|
|
245
|
+
.awsui_menu-item_93a1u_1ramd_187.awsui_link-style_93a1u_1ramd_199.awsui_link-style-highlighted_93a1u_1ramd_243:not(#\9) {
|
|
246
|
+
color: var(--color-text-link-hover-49uoe9, #002b66);
|
|
247
|
+
}
|
|
248
|
+
.awsui_menu-item_93a1u_1ramd_187:not(#\9):focus {
|
|
246
249
|
outline: none;
|
|
247
250
|
}
|
|
248
|
-
.awsui_has-category-
|
|
251
|
+
.awsui_has-category-header_93a1u_1ramd_249 > .awsui_menu-item_93a1u_1ramd_187:not(#\9), .awsui_has-category-header_93a1u_1ramd_249 > .awsui_item-tooltip-wrapper_93a1u_1ramd_249 > .awsui_menu-item_93a1u_1ramd_187:not(#\9), .awsui_has-category-header_93a1u_1ramd_249:not(#\9):not(.awsui_has-checkmark_93a1u_1ramd_249) > span > .awsui_menu-item_93a1u_1ramd_187 {
|
|
249
252
|
padding-inline-start: calc(var(--space-xs-zb16t3, 8px) + var(--space-l-t419sm, 20px));
|
|
250
253
|
}
|
|
251
254
|
|
|
252
|
-
.
|
|
255
|
+
.awsui_icon_93a1u_1ramd_253:not(#\9) {
|
|
253
256
|
padding-inline-end: var(--space-xxs-p8yyaw, 4px);
|
|
254
257
|
flex-shrink: 0;
|
|
255
258
|
}
|
|
256
|
-
.
|
|
259
|
+
.awsui_icon_93a1u_1ramd_253.awsui_checkmark_93a1u_1ramd_257:not(#\9) {
|
|
257
260
|
color: var(--color-text-status-info-7rlubr, #006ce0);
|
|
258
261
|
}
|
|
259
|
-
.
|
|
262
|
+
.awsui_icon_93a1u_1ramd_253.awsui_disabled_93a1u_1ramd_157:not(#\9) {
|
|
260
263
|
color: var(--color-text-interactive-disabled-f5b4z5, #b4b4bb);
|
|
261
264
|
}
|
|
262
265
|
|
|
263
|
-
.awsui_external-
|
|
266
|
+
.awsui_external-icon_93a1u_1ramd_264:not(#\9) {
|
|
264
267
|
margin-inline-start: var(--space-xxs-p8yyaw, 4px);
|
|
265
268
|
}
|
|
@@ -2,19 +2,20 @@
|
|
|
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
|
-
"link-style": "awsui_link-
|
|
12
|
-
"current-breadcrumb": "awsui_current-
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"
|
|
5
|
+
"item-element": "awsui_item-element_93a1u_1ramd_145",
|
|
6
|
+
"disabled": "awsui_disabled_93a1u_1ramd_157",
|
|
7
|
+
"show-divider": "awsui_show-divider_93a1u_1ramd_164",
|
|
8
|
+
"highlighted": "awsui_highlighted_93a1u_1ramd_167",
|
|
9
|
+
"is-focused": "awsui_is-focused_93a1u_1ramd_182",
|
|
10
|
+
"menu-item": "awsui_menu-item_93a1u_1ramd_187",
|
|
11
|
+
"link-style": "awsui_link-style_93a1u_1ramd_199",
|
|
12
|
+
"current-breadcrumb": "awsui_current-breadcrumb_93a1u_1ramd_235",
|
|
13
|
+
"link-style-highlighted": "awsui_link-style-highlighted_93a1u_1ramd_243",
|
|
14
|
+
"has-category-header": "awsui_has-category-header_93a1u_1ramd_249",
|
|
15
|
+
"item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_1ramd_249",
|
|
16
|
+
"has-checkmark": "awsui_has-checkmark_93a1u_1ramd_249",
|
|
17
|
+
"icon": "awsui_icon_93a1u_1ramd_253",
|
|
18
|
+
"checkmark": "awsui_checkmark_93a1u_1ramd_257",
|
|
19
|
+
"external-icon": "awsui_external-icon_93a1u_1ramd_264"
|
|
19
20
|
};
|
|
20
21
|
|
package/hotspot/styles.css.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"root": "
|
|
5
|
-
"wrapper": "
|
|
6
|
-
"elementWrapper": "
|
|
7
|
-
"markerWrapper": "
|
|
8
|
-
"placement-right": "awsui_placement-
|
|
9
|
-
"placement-left": "awsui_placement-
|
|
10
|
-
"inlineWrapper": "
|
|
4
|
+
"root": "awsui_root_cqcqk_18zdt_181",
|
|
5
|
+
"wrapper": "awsui_wrapper_cqcqk_18zdt_185",
|
|
6
|
+
"elementWrapper": "awsui_elementWrapper_cqcqk_18zdt_189",
|
|
7
|
+
"markerWrapper": "awsui_markerWrapper_cqcqk_18zdt_193",
|
|
8
|
+
"placement-right": "awsui_placement-right_cqcqk_18zdt_198",
|
|
9
|
+
"placement-left": "awsui_placement-left_cqcqk_18zdt_203",
|
|
10
|
+
"inlineWrapper": "awsui_inlineWrapper_cqcqk_18zdt_208"
|
|
11
11
|
};
|
|
12
12
|
|
|
@@ -178,33 +178,33 @@
|
|
|
178
178
|
*/
|
|
179
179
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
180
180
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
181
|
-
.
|
|
181
|
+
.awsui_root_cqcqk_18zdt_181:not(#\9) {
|
|
182
182
|
/* used in test-utils */
|
|
183
183
|
}
|
|
184
184
|
|
|
185
|
-
.
|
|
185
|
+
.awsui_wrapper_cqcqk_18zdt_185:not(#\9) {
|
|
186
186
|
position: relative;
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
-
.
|
|
189
|
+
.awsui_elementWrapper_cqcqk_18zdt_189:not(#\9) {
|
|
190
190
|
flex: 1;
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
-
.
|
|
193
|
+
.awsui_markerWrapper_cqcqk_18zdt_193:not(#\9) {
|
|
194
194
|
position: absolute;
|
|
195
195
|
inset-block-start: 0;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
.awsui_placement-
|
|
198
|
+
.awsui_placement-right_cqcqk_18zdt_198:not(#\9) {
|
|
199
199
|
inset-inline-start: 100%;
|
|
200
200
|
margin-inline-start: var(--space-xxs-p8yyaw, 4px);
|
|
201
201
|
}
|
|
202
202
|
|
|
203
|
-
.awsui_placement-
|
|
203
|
+
.awsui_placement-left_cqcqk_18zdt_203:not(#\9) {
|
|
204
204
|
inset-inline-end: 100%;
|
|
205
205
|
margin-inline-end: var(--space-xxs-p8yyaw, 4px);
|
|
206
206
|
}
|
|
207
207
|
|
|
208
|
-
.
|
|
209
|
-
margin-inline
|
|
208
|
+
.awsui_inlineWrapper_cqcqk_18zdt_208:not(#\9) {
|
|
209
|
+
margin-inline: var(--space-xxs-p8yyaw, 4px);
|
|
210
210
|
}
|
|
@@ -2,12 +2,12 @@
|
|
|
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
|
-
"wrapper": "
|
|
7
|
-
"elementWrapper": "
|
|
8
|
-
"markerWrapper": "
|
|
9
|
-
"placement-right": "awsui_placement-
|
|
10
|
-
"placement-left": "awsui_placement-
|
|
11
|
-
"inlineWrapper": "
|
|
5
|
+
"root": "awsui_root_cqcqk_18zdt_181",
|
|
6
|
+
"wrapper": "awsui_wrapper_cqcqk_18zdt_185",
|
|
7
|
+
"elementWrapper": "awsui_elementWrapper_cqcqk_18zdt_189",
|
|
8
|
+
"markerWrapper": "awsui_markerWrapper_cqcqk_18zdt_193",
|
|
9
|
+
"placement-right": "awsui_placement-right_cqcqk_18zdt_198",
|
|
10
|
+
"placement-left": "awsui_placement-left_cqcqk_18zdt_203",
|
|
11
|
+
"inlineWrapper": "awsui_inlineWrapper_cqcqk_18zdt_208"
|
|
12
12
|
};
|
|
13
13
|
|
|
@@ -5,7 +5,7 @@ import styles from './styles.css.js';
|
|
|
5
5
|
const splitOnFiltering = (str, highlightText) => {
|
|
6
6
|
// We match by creating a regex using user-provided strings, so we skip
|
|
7
7
|
// highlighting if the generated regex would be too memory intensive.
|
|
8
|
-
if (highlightText.length >
|
|
8
|
+
if (highlightText.length > 10000) {
|
|
9
9
|
return { noMatches: [str], matches: null };
|
|
10
10
|
}
|
|
11
11
|
// Filtering needs to be case insensitive
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight-match.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/highlight-match.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAE,aAAqB,EAAE,EAAE;IAC9D,uEAAuE;IACvE,qEAAqE;IACrE,IAAI,aAAa,CAAC,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"highlight-match.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/highlight-match.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAE,aAAqB,EAAE,EAAE;IAC9D,uEAAuE;IACvE,qEAAqE;IACrE,IAAI,aAAa,CAAC,MAAM,GAAG,KAAM,EAAE;QACjC,OAAO,EAAE,SAAS,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;KAC5C;IAED,yCAAyC;IACzC,MAAM,gBAAgB,GAAG,aAAa,CAAC,OAAO,CAAC,uBAAuB,EAAE,MAAM,CAAC,CAAC;IAChF,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACpC,MAAM,OAAO,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAElC,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAChC,CAAC,CAAC;AAOF,SAAS,SAAS,CAAC,EAAE,GAAG,EAAuB;IAC7C,OAAO,GAAG,CAAC,CAAC,CAAC,8BAAM,SAAS,EAAE,MAAM,CAAC,2BAA2B,CAAC,IAAG,GAAG,CAAQ,CAAC,CAAC,CAAC,IAAI,CAAC;AACzF,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,GAAG,EAAE,aAAa,EAAuB;IAChF,IAAI,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE;QAC1B,OAAO,kCAAO,GAAG,CAAQ,CAAC;KAC3B;IAED,IAAI,GAAG,KAAK,aAAa,EAAE;QACzB,OAAO,oBAAC,SAAS,IAAC,GAAG,EAAE,GAAG,GAAI,CAAC;KAChC;IAED,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,gBAAgB,CAAC,GAAG,EAAE,aAAa,CAAC,CAAC;IAEpE,MAAM,WAAW,GAA6B,EAAE,CAAC;IAEjD,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,GAAG,EAAE,EAAE;QACjC,WAAW,CAAC,IAAI,CAAC,8BAAM,GAAG,EAAE,WAAW,GAAG,EAAE,IAAG,OAAO,CAAQ,CAAC,CAAC;QAEhE,IAAI,OAAO,IAAI,GAAG,GAAG,OAAO,CAAC,MAAM,EAAE;YACnC,WAAW,CAAC,IAAI,CAAC,oBAAC,SAAS,IAAC,GAAG,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,GAAG,CAAC,GAAI,CAAC,CAAC;SACzE;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,kCAAO,WAAW,CAAQ,CAAC;AACpC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport styles from './styles.css.js';\n\nconst splitOnFiltering = (str: string, highlightText: string) => {\n // We match by creating a regex using user-provided strings, so we skip\n // highlighting if the generated regex would be too memory intensive.\n if (highlightText.length > 10_000) {\n return { noMatches: [str], matches: null };\n }\n\n // Filtering needs to be case insensitive\n const filteringPattern = highlightText.replace(/[-[\\]/{}()*+?.\\\\^$|]/g, '\\\\$&');\n const regexp = new RegExp(filteringPattern, 'gi');\n const noMatches = str.split(regexp);\n const matches = str.match(regexp);\n\n return { noMatches, matches };\n};\n\ninterface HighlightMatchProps {\n str?: string;\n highlightText?: string;\n}\n\nfunction Highlight({ str }: HighlightMatchProps) {\n return str ? <mark className={styles['filtering-match-highlight']}>{str}</mark> : null;\n}\n\nexport default function HighlightMatch({ str, highlightText }: HighlightMatchProps) {\n if (!str || !highlightText) {\n return <span>{str}</span>;\n }\n\n if (str === highlightText) {\n return <Highlight str={str} />;\n }\n\n const { noMatches, matches } = splitOnFiltering(str, highlightText);\n\n const highlighted: (string | JSX.Element)[] = [];\n\n noMatches.forEach((noMatch, idx) => {\n highlighted.push(<span key={`noMatch-${idx}`}>{noMatch}</span>);\n\n if (matches && idx < matches.length) {\n highlighted.push(<Highlight key={`match-${idx}`} str={matches[idx]} />);\n }\n });\n\n return <span>{highlighted}</span>;\n}\n"]}
|
package/internal/environment.js
CHANGED
package/internal/manifest.json
CHANGED