@cloudscape-design/components-themeable 3.0.930 → 3.0.932

package/lib/internal/template/app-layout-toolbar/index.js

@@ -0,0 +1,85 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { applyDefaults } from '../app-layout/defaults';
+import { useAppLayoutPlacement } from '../app-layout/utils/use-app-layout-placement';
+import AppLayoutToolbarInternal from '../app-layout/visual-refresh-toolbar';
+import { AppLayoutToolbarPublicContext } from '../app-layout/visual-refresh-toolbar/contexts';
+import { useInternalI18n } from '../i18n/context';
+import { getBaseProps } from '../internal/base-component';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useControllable } from '../internal/hooks/use-controllable';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { useMobile } from '../internal/hooks/use-mobile';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { isDevelopment } from '../internal/is-development';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+const AppLayoutToolbar = React.forwardRef((_a, ref) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var { contentType = 'default', headerSelector = '#b #h', footerSelector = '#b #f', navigationWidth = 280, toolsWidth = 290, maxContentWidth, minContentWidth, navigationOpen: controlledNavigationOpen, onNavigationChange: controlledOnNavigationChange, analyticsMetadata } = _a, rest = __rest(_a, ["contentType", "headerSelector", "footerSelector", "navigationWidth", "toolsWidth", "maxContentWidth", "minContentWidth", "navigationOpen", "onNavigationChange", "analyticsMetadata"]);
+    const isRefresh = useVisualRefresh();
+    if (!isRefresh) {
+        throw new Error(`AppLayoutToolbar component is not supported in the Classic theme. Please switch to the Refresh theme. For more details, refer to the documentation.`);
+    }
+    if (isDevelopment) {
+        if (rest.toolsOpen && rest.toolsHide) {
+            warnOnce('AppLayoutToolbar', `You have enabled both the \`toolsOpen\` prop and the \`toolsHide\` prop. This is not supported. Set \`toolsOpen\` to \`false\` when you set \`toolsHide\` to \`true\`.`);
+        }
+    }
+    const { __internalRootRef } = useBaseComponent('AppLayoutToolbar', {
+        props: {
+            contentType,
+            disableContentPaddings: rest.disableContentPaddings,
+            navigationWidth,
+            navigationHide: rest.navigationHide,
+            toolsHide: rest.toolsHide,
+            toolsWidth,
+            maxContentWidth,
+            minContentWidth,
+            stickyNotifications: rest.stickyNotifications,
+            disableContentHeaderOverlap: rest.disableContentHeaderOverlap,
+            navigationTriggerHide: rest.navigationTriggerHide,
+        },
+        metadata: {
+            drawersCount: (_c = (_b = rest.drawers) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : null,
+            hasContentHeader: !!rest.contentHeader,
+        },
+    }, analyticsMetadata);
+    const isMobile = useMobile();
+    const i18n = useInternalI18n('app-layout');
+    const ariaLabels = {
+        navigation: i18n('ariaLabels.navigation', (_d = rest.ariaLabels) === null || _d === void 0 ? void 0 : _d.navigation),
+        navigationClose: i18n('ariaLabels.navigationClose', (_e = rest.ariaLabels) === null || _e === void 0 ? void 0 : _e.navigationClose),
+        navigationToggle: i18n('ariaLabels.navigationToggle', (_f = rest.ariaLabels) === null || _f === void 0 ? void 0 : _f.navigationToggle),
+        notifications: i18n('ariaLabels.notifications', (_g = rest.ariaLabels) === null || _g === void 0 ? void 0 : _g.notifications),
+        tools: i18n('ariaLabels.tools', (_h = rest.ariaLabels) === null || _h === void 0 ? void 0 : _h.tools),
+        toolsClose: i18n('ariaLabels.toolsClose', (_j = rest.ariaLabels) === null || _j === void 0 ? void 0 : _j.toolsClose),
+        toolsToggle: i18n('ariaLabels.toolsToggle', (_k = rest.ariaLabels) === null || _k === void 0 ? void 0 : _k.toolsToggle),
+        drawers: i18n('ariaLabels.drawers', (_l = rest.ariaLabels) === null || _l === void 0 ? void 0 : _l.drawers),
+        drawersOverflow: i18n('ariaLabels.drawersOverflow', (_m = rest.ariaLabels) === null || _m === void 0 ? void 0 : _m.drawersOverflow),
+        drawersOverflowWithBadge: i18n('ariaLabels.drawersOverflowWithBadge', (_o = rest.ariaLabels) === null || _o === void 0 ? void 0 : _o.drawersOverflowWithBadge),
+    };
+    const _p = applyDefaults(contentType, { maxContentWidth, minContentWidth }, isRefresh), { navigationOpen: defaultNavigationOpen } = _p, restDefaults = __rest(_p, ["navigationOpen"]);
+    const [navigationOpen = false, setNavigationOpen] = useControllable(controlledNavigationOpen, controlledOnNavigationChange, isMobile ? false : defaultNavigationOpen, { componentName: 'AppLayoutToolbar', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' });
+    const onNavigationChange = (event) => {
+        setNavigationOpen(event.detail.open);
+        controlledOnNavigationChange === null || controlledOnNavigationChange === void 0 ? void 0 : controlledOnNavigationChange(event);
+    };
+    const [rootRef, placement] = useAppLayoutPlacement(headerSelector, footerSelector);
+    // This re-builds the props including the default values
+    const props = Object.assign(Object.assign(Object.assign({ contentType,
+        navigationWidth,
+        toolsWidth,
+        navigationOpen,
+        onNavigationChange }, restDefaults), rest), { ariaLabels,
+        placement });
+    const baseProps = getBaseProps(rest);
+    return (React.createElement(AppLayoutToolbarPublicContext.Provider, { value: true },
+        React.createElement("div", Object.assign({ ref: useMergeRefs(__internalRootRef, rootRef) }, baseProps),
+            React.createElement(AppLayoutToolbarInternal, Object.assign({ ref: ref }, props)))));
+});
+applyDisplayName(AppLayoutToolbar, 'AppLayoutToolbar');
+export default AppLayoutToolbar;
+//# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout-toolbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/app-layout-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 from 'react';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { applyDefaults } from '../app-layout/defaults';\nimport { AppLayoutProps } from '../app-layout/interfaces';\nimport { useAppLayoutPlacement } from '../app-layout/utils/use-app-layout-placement';\nimport AppLayoutToolbarInternal from '../app-layout/visual-refresh-toolbar';\nimport { AppLayoutToolbarPublicContext } from '../app-layout/visual-refresh-toolbar/contexts';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { isDevelopment } from '../internal/is-development';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AppLayoutToolbarProps } from './interfaces';\n\nexport { AppLayoutToolbarProps };\n\nconst AppLayoutToolbar = React.forwardRef(\n  (\n    {\n      contentType = 'default',\n      headerSelector = '#b #h',\n      footerSelector = '#b #f',\n      navigationWidth = 280,\n      toolsWidth = 290,\n      maxContentWidth,\n      minContentWidth,\n      navigationOpen: controlledNavigationOpen,\n      onNavigationChange: controlledOnNavigationChange,\n      analyticsMetadata,\n      ...rest\n    }: AppLayoutToolbarProps,\n    ref: React.Ref<AppLayoutProps.Ref>\n  ) => {\n    const isRefresh = useVisualRefresh();\n    if (!isRefresh) {\n      throw new Error(\n        `AppLayoutToolbar component is not supported in the Classic theme. Please switch to the Refresh theme. For more details, refer to the documentation.`\n      );\n    }\n    if (isDevelopment) {\n      if (rest.toolsOpen && rest.toolsHide) {\n        warnOnce(\n          'AppLayoutToolbar',\n          `You have enabled both the \\`toolsOpen\\` prop and the \\`toolsHide\\` prop. This is not supported. Set \\`toolsOpen\\` to \\`false\\` when you set \\`toolsHide\\` to \\`true\\`.`\n        );\n      }\n    }\n    const { __internalRootRef } = useBaseComponent<HTMLDivElement>(\n      'AppLayoutToolbar',\n      {\n        props: {\n          contentType,\n          disableContentPaddings: rest.disableContentPaddings,\n          navigationWidth,\n          navigationHide: rest.navigationHide,\n          toolsHide: rest.toolsHide,\n          toolsWidth,\n          maxContentWidth,\n          minContentWidth,\n          stickyNotifications: rest.stickyNotifications,\n          disableContentHeaderOverlap: rest.disableContentHeaderOverlap,\n          navigationTriggerHide: rest.navigationTriggerHide,\n        },\n        metadata: {\n          drawersCount: rest.drawers?.length ?? null,\n          hasContentHeader: !!rest.contentHeader,\n        },\n      },\n      analyticsMetadata\n    );\n    const isMobile = useMobile();\n\n    const i18n = useInternalI18n('app-layout');\n    const ariaLabels = {\n      navigation: i18n('ariaLabels.navigation', rest.ariaLabels?.navigation),\n      navigationClose: i18n('ariaLabels.navigationClose', rest.ariaLabels?.navigationClose),\n      navigationToggle: i18n('ariaLabels.navigationToggle', rest.ariaLabels?.navigationToggle),\n      notifications: i18n('ariaLabels.notifications', rest.ariaLabels?.notifications),\n      tools: i18n('ariaLabels.tools', rest.ariaLabels?.tools),\n      toolsClose: i18n('ariaLabels.toolsClose', rest.ariaLabels?.toolsClose),\n      toolsToggle: i18n('ariaLabels.toolsToggle', rest.ariaLabels?.toolsToggle),\n      drawers: i18n('ariaLabels.drawers', rest.ariaLabels?.drawers),\n      drawersOverflow: i18n('ariaLabels.drawersOverflow', rest.ariaLabels?.drawersOverflow),\n      drawersOverflowWithBadge: i18n('ariaLabels.drawersOverflowWithBadge', rest.ariaLabels?.drawersOverflowWithBadge),\n    };\n    const { navigationOpen: defaultNavigationOpen, ...restDefaults } = applyDefaults(\n      contentType,\n      { maxContentWidth, minContentWidth },\n      isRefresh\n    );\n\n    const [navigationOpen = false, setNavigationOpen] = useControllable(\n      controlledNavigationOpen,\n      controlledOnNavigationChange,\n      isMobile ? false : defaultNavigationOpen,\n      { componentName: 'AppLayoutToolbar', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' }\n    );\n    const onNavigationChange = (event: NonCancelableCustomEvent<AppLayoutProps.ChangeDetail>) => {\n      setNavigationOpen(event.detail.open);\n      controlledOnNavigationChange?.(event);\n    };\n\n    const [rootRef, placement] = useAppLayoutPlacement(headerSelector, footerSelector);\n\n    // This re-builds the props including the default values\n    const props = {\n      contentType,\n      navigationWidth,\n      toolsWidth,\n      navigationOpen,\n      onNavigationChange,\n      ...restDefaults,\n      ...rest,\n      ariaLabels,\n      placement,\n    };\n\n    const baseProps = getBaseProps(rest);\n\n    return (\n      <AppLayoutToolbarPublicContext.Provider value={true}>\n        <div ref={useMergeRefs(__internalRootRef, rootRef)} {...baseProps}>\n          <AppLayoutToolbarInternal ref={ref} {...props} />\n        </div>\n      </AppLayoutToolbarPublicContext.Provider>\n    );\n  }\n);\n\napplyDisplayName(AppLayoutToolbar, 'AppLayoutToolbar');\nexport default AppLayoutToolbar;\n"]}

package/lib/internal/template/app-layout-toolbar/interfaces.d.ts

@@ -0,0 +1,52 @@
+import { AppLayoutProps, BaseLayoutProps } from '../app-layout/interfaces';
+export interface AppLayoutToolbarProps extends BaseLayoutProps {
+    /**
+     * If `true`, the navigation trigger is not displayed at all,
+     * while navigation drawer might be displayed, but opened using a custom trigger.
+     */
+    navigationTriggerHide?: boolean;
+    /**
+     * Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.
+  
+     * Each Drawer is an item in the drawers wrapper with the following properties:
+     * * id (string) - the id of the drawer.
+     * * content (React.ReactNode) - the content in the drawer.
+     * * trigger (DrawerTrigger) - (Optional) the button that opens and closes the active drawer.
+     * If not set, a corresponding trigger button is not displayed, while the drawer might be displayed, but opened using a custom trigger.
+     * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.
+     * * badge (boolean) - (Optional) Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.
+     * * resizable (boolean) - (Optional) if the drawer is resizable or not.
+     * * defaultSize (number) - (Optional) starting size of the drawer. if not set, defaults to 290.
+     * * onResize (({ size: number }) => void) - (Optional) Fired when the active drawer is resized.
+     *
+     * #### DrawerTrigger
+     * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.
+     * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)
+     *
+     * #### DrawerAriaLabels
+     * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.
+     * - `closeButton` (string) - (Optional) Label for the close button.
+     * - `triggerButton` (string) - (Optional) Label for the trigger button.
+     * - `resizeHandle` (string) - (Optional) Label for the resize handle.
+     */
+    drawers?: Array<AppLayoutToolbarProps.Drawer>;
+}
+export declare namespace AppLayoutToolbarProps {
+    type AnalyticsMetadata = AppLayoutProps.AnalyticsMetadata;
+    type ContentType = AppLayoutProps.ContentType;
+    interface Ref extends AppLayoutProps.Ref {
+        /**
+         * Focuses the navigation. Use this to focus the navigation after opening it programmatically.
+         */
+        focusNavigation(): void;
+    }
+    type Drawer = AppLayoutProps.Drawer;
+    type DrawerAriaLabels = AppLayoutProps.DrawerAriaLabels;
+    type Labels = AppLayoutProps.Labels;
+    type ChangeDetail = AppLayoutProps.ChangeDetail;
+    type SplitPanelResizeDetail = AppLayoutProps.SplitPanelResizeDetail;
+    type SplitPanelPreferences = AppLayoutProps.SplitPanelPreferences;
+    type SplitPanelPosition = AppLayoutProps.SplitPanelPosition;
+    type DrawerChangeDetail = AppLayoutProps.DrawerChangeDetail;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/app-layout-toolbar/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/app-layout-toolbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,WAAW,qBAAsB,SAAQ,eAAe;IAC5D;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC;CAC/C;AAED,yBAAiB,qBAAqB,CAAC;IACrC,KAAY,iBAAiB,GAAG,cAAc,CAAC,iBAAiB,CAAC;IACjE,KAAY,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC;IACrD,UAAiB,GAAI,SAAQ,cAAc,CAAC,GAAG;QAC7C;;WAEG;QACH,eAAe,IAAI,IAAI,CAAC;KACzB;IACD,KAAY,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;IAC3C,KAAY,gBAAgB,GAAG,cAAc,CAAC,gBAAgB,CAAC;IAC/D,KAAY,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC;IAC3C,KAAY,YAAY,GAAG,cAAc,CAAC,YAAY,CAAC;IACvD,KAAY,sBAAsB,GAAG,cAAc,CAAC,sBAAsB,CAAC;IAC3E,KAAY,qBAAqB,GAAG,cAAc,CAAC,qBAAqB,CAAC;IACzE,KAAY,kBAAkB,GAAG,cAAc,CAAC,kBAAkB,CAAC;IACnE,KAAY,kBAAkB,GAAG,cAAc,CAAC,kBAAkB,CAAC;CACpE"}

package/lib/internal/template/app-layout-toolbar/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/lib/internal/template/app-layout-toolbar/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/app-layout-toolbar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AppLayoutProps, BaseLayoutProps } from '../app-layout/interfaces';\n\nexport interface AppLayoutToolbarProps extends BaseLayoutProps {\n  /**\n   * If `true`, the navigation trigger is not displayed at all,\n   * while navigation drawer might be displayed, but opened using a custom trigger.\n   */\n  navigationTriggerHide?: boolean;\n\n  /**\n   * Drawers property. If you set both `drawers` and `tools`, `drawers` will take precedence.\n\n   * Each Drawer is an item in the drawers wrapper with the following properties:\n   * * id (string) - the id of the drawer.\n   * * content (React.ReactNode) - the content in the drawer.\n   * * trigger (DrawerTrigger) - (Optional) the button that opens and closes the active drawer.\n   * If not set, a corresponding trigger button is not displayed, while the drawer might be displayed, but opened using a custom trigger.\n   * * ariaLabels (DrawerAriaLabels) - the labels for the interactive elements of the drawer.\n   * * badge (boolean) - (Optional) Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * resizable (boolean) - (Optional) if the drawer is resizable or not.\n   * * defaultSize (number) - (Optional) starting size of the drawer. if not set, defaults to 290.\n   * * onResize (({ size: number }) => void) - (Optional) Fired when the active drawer is resized.\n   *\n   * #### DrawerTrigger\n   * - `iconName` (IconProps.Name) - (Optional) Specifies the icon to be displayed.\n   * - `iconSvg` (React.ReactNode) - (Optional) Specifies the SVG of a custom icon. For more information, see [SVG icon guidelines](/components/icon/?tabId=api#slots)\n   *\n   * #### DrawerAriaLabels\n   * - `drawerName` (string) - Label for the drawer itself, and for the drawer trigger button tooltip text.\n   * - `closeButton` (string) - (Optional) Label for the close button.\n   * - `triggerButton` (string) - (Optional) Label for the trigger button.\n   * - `resizeHandle` (string) - (Optional) Label for the resize handle.\n   */\n  drawers?: Array<AppLayoutToolbarProps.Drawer>;\n}\n\nexport namespace AppLayoutToolbarProps {\n  export type AnalyticsMetadata = AppLayoutProps.AnalyticsMetadata;\n  export type ContentType = AppLayoutProps.ContentType;\n  export interface Ref extends AppLayoutProps.Ref {\n    /**\n     * Focuses the navigation. Use this to focus the navigation after opening it programmatically.\n     */\n    focusNavigation(): void;\n  }\n  export type Drawer = AppLayoutProps.Drawer;\n  export type DrawerAriaLabels = AppLayoutProps.DrawerAriaLabels;\n  export type Labels = AppLayoutProps.Labels;\n  export type ChangeDetail = AppLayoutProps.ChangeDetail;\n  export type SplitPanelResizeDetail = AppLayoutProps.SplitPanelResizeDetail;\n  export type SplitPanelPreferences = AppLayoutProps.SplitPanelPreferences;\n  export type SplitPanelPosition = AppLayoutProps.SplitPanelPosition;\n  export type DrawerChangeDetail = AppLayoutProps.DrawerChangeDetail;\n}\n"]}

package/lib/internal/template/drawer/implementation.js

@@ -3,7 +3,7 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
-import { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';
+import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { createWidgetizedComponent } from '../internal/widgets';
@@ -13,7 +13,7 @@ import styles from './styles.css.js';
 export function DrawerImplementation(_a) {
     var { header, children, loading, i18nStrings, __internalRootRef } = _a, restProps = __rest(_a, ["header", "children", "loading", "i18nStrings", "__internalRootRef"]);
     const baseProps = getBaseProps(restProps);
-    const isToolbar = useAppLayoutToolbarEnabled();
+    const isToolbar = useAppLayoutToolbarDesignEnabled();
     const i18n = useInternalI18n('drawer');
     const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar']) });
     return loading ? (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),

package/lib/internal/template/drawer/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,oBAAoB,CAAC,EAOf;QAPe,EACnC,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,OAEG,EADjB,SAAS,cANuB,qEAOpC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,0BAA0B,EAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvC,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,GACzF,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAC/B,IAAI,CAAC,yBAAyB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,CAAC,CACvC,CACG,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO;QACxD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,2BAA2B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,IAAG,QAAQ,CAAO,CACvF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,yBAAyB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { DrawerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype DrawerInternalProps = DrawerProps & InternalBaseComponentProps;\n\nexport function DrawerImplementation({\n  header,\n  children,\n  loading,\n  i18nStrings,\n  __internalRootRef,\n  ...restProps\n}: DrawerInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const isToolbar = useAppLayoutToolbarEnabled();\n  const i18n = useInternalI18n('drawer');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <InternalLiveRegion tagName=\"span\">\n          {i18n('i18nStrings.loadingText', i18nStrings?.loadingText)}\n        </InternalLiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={styles.header}>{header}</div>}\n      <div className={clsx(styles['test-utils-drawer-content'], styles.content)}>{children}</div>\n    </div>\n  );\n}\n\nexport const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/drawer/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,oBAAoB,CAAC,EAOf;QAPe,EACnC,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,OAEG,EADjB,SAAS,cANuB,qEAOpC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,gCAAgC,EAAE,CAAC;IACrD,MAAM,IAAI,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IACvC,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,GACzF,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAC/B,IAAI,CAAC,yBAAyB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,CAAC,CACvC,CACG,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAAG,MAAM,CAAO;QACxD,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,2BAA2B,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,IAAG,QAAQ,CAAO,CACvF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,yBAAyB,CAAC,oBAAoB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { DrawerProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype DrawerInternalProps = DrawerProps & InternalBaseComponentProps;\n\nexport function DrawerImplementation({\n  header,\n  children,\n  loading,\n  i18nStrings,\n  __internalRootRef,\n  ...restProps\n}: DrawerInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const i18n = useInternalI18n('drawer');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(baseProps.className, styles.drawer, isToolbar && styles['with-toolbar']),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <InternalLiveRegion tagName=\"span\">\n          {i18n('i18nStrings.loadingText', i18nStrings?.loadingText)}\n        </InternalLiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={styles.header}>{header}</div>}\n      <div className={clsx(styles['test-utils-drawer-content'], styles.content)}>{children}</div>\n    </div>\n  );\n}\n\nexport const createWidgetizedDrawer = createWidgetizedComponent(DrawerImplementation);\n"]}

package/lib/internal/template/help-panel/implementation.js

@@ -3,7 +3,7 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
-import { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';
+import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
 import { useInternalI18n } from '../i18n/context';
 import { getBaseProps } from '../internal/base-component';
 import { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';
@@ -14,7 +14,7 @@ import styles from './styles.css.js';
 export function HelpPanelImplementation(_a) {
     var { header, footer, children, loading, loadingText, __internalRootRef } = _a, restProps = __rest(_a, ["header", "footer", "children", "loading", "loadingText", "__internalRootRef"]);
     const baseProps = getBaseProps(restProps);
-    const isToolbar = useAppLayoutToolbarEnabled();
+    const isToolbar = useAppLayoutToolbarDesignEnabled();
     const i18n = useInternalI18n('help-panel');
     const containerProps = Object.assign(Object.assign({}, baseProps), { className: clsx(baseProps.className, styles['help-panel'], isToolbar && styles['with-toolbar'], loading && styles.loading) });
     return loading ? (React.createElement("div", Object.assign({}, containerProps, { ref: __internalRootRef }),

package/lib/internal/template/help-panel/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAE7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,uBAAuB,CAAC,EAQf;QARe,EACtC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,OAEM,EADpB,SAAS,cAP0B,+EAQvC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,0BAA0B,EAAE,CAAC;IAC/C,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,YAAY,CAAC,EACpB,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EACnC,OAAO,IAAI,MAAM,CAAC,OAAO,CAC1B,GACF,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAsB,CAClE,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;YACtE,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACb;QACpC,MAAM,IAAI,CACT,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,4BAAI,IAAI,EAAC,cAAc,GAAG;YACzB,MAAM,CACH,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { HelpPanelProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype HelpPanelInternalProps = HelpPanelProps & InternalBaseComponentProps;\n\nexport function HelpPanelImplementation({\n  header,\n  footer,\n  children,\n  loading,\n  loadingText,\n  __internalRootRef,\n  ...restProps\n}: HelpPanelInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const isToolbar = useAppLayoutToolbarEnabled();\n  const i18n = useInternalI18n('help-panel');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(\n      baseProps.className,\n      styles['help-panel'],\n      isToolbar && styles['with-toolbar'],\n      loading && styles.loading\n    ),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <InternalLiveRegion tagName=\"span\">{i18n('loadingText', loadingText)}</InternalLiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n        <div className={styles.content}>{children}</div>\n      </LinkDefaultVariantContext.Provider>\n      {footer && (\n        <div className={styles.footer}>\n          <hr role=\"presentation\" />\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const createWidgetizedHelpPanel = createWidgetizedComponent(HelpPanelImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/help-panel/implementation.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,kDAAkD,CAAC;AAE7F,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,uBAAuB,MAAM,8BAA8B,CAAC;AAGnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,uBAAuB,CAAC,EAQf;QARe,EACtC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAO,EACP,WAAW,EACX,iBAAiB,OAEM,EADpB,SAAS,cAP0B,+EAQvC,CADa;IAEZ,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,SAAS,GAAG,gCAAgC,EAAE,CAAC;IACrD,MAAM,IAAI,GAAG,eAAe,CAAC,YAAY,CAAC,CAAC;IAC3C,MAAM,cAAc,mCACf,SAAS,KACZ,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,YAAY,CAAC,EACpB,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,EACnC,OAAO,IAAI,MAAM,CAAC,OAAO,CAC1B,GACF,CAAC;IACF,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC7C,oBAAC,uBAAuB,IAAC,IAAI,EAAC,SAAS;YACrC,oBAAC,kBAAkB,IAAC,OAAO,EAAC,MAAM,IAAE,IAAI,CAAC,aAAa,EAAE,WAAW,CAAC,CAAsB,CAClE,CACtB,CACP,CAAC,CAAC,CAAC,CACF,6CAAS,cAAc,IAAE,GAAG,EAAE,iBAAiB;QAC5C,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAG,MAAM,CAAO;QAC9D,oBAAC,yBAAyB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;YACtE,6BAAK,SAAS,EAAE,MAAM,CAAC,OAAO,IAAG,QAAQ,CAAO,CACb;QACpC,MAAM,IAAI,CACT,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;YAC3B,4BAAI,IAAI,EAAC,cAAc,GAAG;YACzB,MAAM,CACH,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,uBAAuB,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { useInternalI18n } from '../i18n/context';\nimport { getBaseProps } from '../internal/base-component';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport InternalLiveRegion from '../live-region/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\nimport { HelpPanelProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype HelpPanelInternalProps = HelpPanelProps & InternalBaseComponentProps;\n\nexport function HelpPanelImplementation({\n  header,\n  footer,\n  children,\n  loading,\n  loadingText,\n  __internalRootRef,\n  ...restProps\n}: HelpPanelInternalProps) {\n  const baseProps = getBaseProps(restProps);\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const i18n = useInternalI18n('help-panel');\n  const containerProps = {\n    ...baseProps,\n    className: clsx(\n      baseProps.className,\n      styles['help-panel'],\n      isToolbar && styles['with-toolbar'],\n      loading && styles.loading\n    ),\n  };\n  return loading ? (\n    <div {...containerProps} ref={__internalRootRef}>\n      <InternalStatusIndicator type=\"loading\">\n        <InternalLiveRegion tagName=\"span\">{i18n('loadingText', loadingText)}</InternalLiveRegion>\n      </InternalStatusIndicator>\n    </div>\n  ) : (\n    <div {...containerProps} ref={__internalRootRef}>\n      {header && <div className={clsx(styles.header)}>{header}</div>}\n      <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n        <div className={styles.content}>{children}</div>\n      </LinkDefaultVariantContext.Provider>\n      {footer && (\n        <div className={styles.footer}>\n          <hr role=\"presentation\" />\n          {footer}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const createWidgetizedHelpPanel = createWidgetizedComponent(HelpPanelImplementation);\n"]}