@cloudscape-design/components-themeable 3.0.1084 → 3.0.1085

package/lib/internal/template/app-layout/runtime-drawer/index.js

@@ -30,16 +30,45 @@ function RuntimeDrawerWrapper({ mountContent, unmountContent, id }) {
     }, [isVisible]);
     return React.createElement("div", { ref: ref, className: styles['runtime-content-wrapper'], "data-awsui-runtime-drawer-root-id": id });
 }
-const mapRuntimeConfigToDrawer = (runtimeConfig) => {
+function RuntimeDrawerHeader({ mountHeader, unmountHeader }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        const container = ref.current;
+        mountHeader === null || mountHeader === void 0 ? void 0 : mountHeader(container);
+        return () => {
+            unmountHeader === null || unmountHeader === void 0 ? void 0 : unmountHeader(container);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return React.createElement("div", { className: styles['runtime-header-wrapper'], ref: ref });
+}
+export const mapRuntimeConfigToDrawer = (runtimeConfig) => {
     var _a;
     const { mountContent, unmountContent, trigger } = runtimeConfig, runtimeDrawer = __rest(runtimeConfig, ["mountContent", "unmountContent", "trigger"]);
     return Object.assign(Object.assign({}, runtimeDrawer), { ariaLabels: Object.assign({ drawerName: (_a = runtimeDrawer.ariaLabels.content) !== null && _a !== void 0 ? _a : '' }, runtimeDrawer.ariaLabels), trigger: trigger
-            ? {
+            ? Object.assign({}, (trigger.iconSvg && {
                 iconSvg: (
                 // eslint-disable-next-line react/no-danger
                 React.createElement("span", { dangerouslySetInnerHTML: { __html: trigger.iconSvg } })),
+            })) : undefined, content: (React.createElement(RuntimeDrawerWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent, id: runtimeDrawer.id })), onResize: event => {
+            fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
+        } });
+};
+export const mapRuntimeConfigToAiDrawer = (runtimeConfig) => {
+    var _a;
+    const { mountContent, unmountContent, trigger } = runtimeConfig, runtimeDrawer = __rest(runtimeConfig, ["mountContent", "unmountContent", "trigger"]);
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, runtimeDrawer), { ariaLabels: Object.assign({ drawerName: (_a = runtimeDrawer.ariaLabels.content) !== null && _a !== void 0 ? _a : '' }, runtimeDrawer.ariaLabels), trigger: trigger
+            ? {
+                customIcon: (trigger === null || trigger === void 0 ? void 0 : trigger.customIcon) ? (
+                // eslint-disable-next-line react/no-danger
+                React.createElement("span", { style: { lineHeight: 0 }, dangerouslySetInnerHTML: { __html: trigger.customIcon } })) : undefined,
+                iconSvg: trigger.iconSvg ? (
+                // eslint-disable-next-line react/no-danger
+                React.createElement("span", { dangerouslySetInnerHTML: { __html: trigger.iconSvg } })) : undefined,
             }
-            : undefined, content: (React.createElement(RuntimeDrawerWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent, id: runtimeDrawer.id })), onResize: event => {
+            : undefined, content: (React.createElement(RuntimeDrawerWrapper, { key: runtimeDrawer.id, mountContent: mountContent, unmountContent: unmountContent, id: runtimeDrawer.id })) }), (runtimeDrawer.mountHeader && {
+        header: (React.createElement(RuntimeDrawerHeader, { mountHeader: runtimeDrawer.mountHeader, unmountHeader: runtimeDrawer.unmountHeader })),
+    })), { onResize: event => {
             fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });
         } });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/runtime-drawer/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, { useContext, useEffect, useRef } from 'react';\n\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n  DrawerConfig as RuntimeDrawerConfig,\n  DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n}\n\nexport interface DrawersLayout {\n  global: Array<RuntimeDrawer>;\n  localBefore: Array<RuntimeDrawer>;\n  localAfter: Array<RuntimeDrawer>;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n  id?: string;\n  mountContent: RuntimeDrawerConfig['mountContent'];\n  unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const visibilityChangeCallback = useRef<VisibilityCallback | null>(null);\n  const activeDrawersIds = useContext(ActiveDrawersContext);\n  const isVisible = !!id && activeDrawersIds.includes(id);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountContent(container, {\n      onVisibilityChange: cb => {\n        visibilityChangeCallback.current = cb;\n      },\n    });\n    return () => {\n      unmountContent(container);\n      visibilityChangeCallback.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    visibilityChangeCallback.current?.(isVisible);\n  }, [isVisible]);\n\n  return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;\n}\n\nconst mapRuntimeConfigToDrawer = (\n  runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n  orderPriority?: number;\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n} => {\n  const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n  return {\n    ...runtimeDrawer,\n    ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n    trigger: trigger\n      ? {\n          iconSvg: (\n            // eslint-disable-next-line react/no-danger\n            <span dangerouslySetInnerHTML={{ __html: trigger.iconSvg }} />\n          ),\n        }\n      : undefined,\n    content: (\n      <RuntimeDrawerWrapper\n        key={runtimeDrawer.id}\n        mountContent={mountContent}\n        unmountContent={unmountContent}\n        id={runtimeDrawer.id}\n      />\n    ),\n    onResize: event => {\n      fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n    },\n  };\n};\n\nexport function convertRuntimeDrawers(\n  localDrawers: Array<RuntimeDrawerConfig>,\n  globalDrawers: Array<RuntimeDrawerConfig>\n): DrawersLayout {\n  const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n  const sorted = sortByPriority(converted);\n  return {\n    global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n    localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n    localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/runtime-drawer/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,sBAAsB,EAA6B,MAAM,uBAAuB,CAAC;AAK1F,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAGtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAEnE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAoBrC,SAAS,oBAAoB,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,EAA8B;IAC5F,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,wBAAwB,GAAG,MAAM,CAA4B,IAAI,CAAC,CAAC;IACzE,MAAM,gBAAgB,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAC1D,MAAM,SAAS,GAAG,CAAC,CAAC,EAAE,IAAI,gBAAgB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,GAAG,CAAC,OAAQ,CAAC;QAC/B,YAAY,CAAC,SAAS,EAAE;YACtB,kBAAkB,EAAE,EAAE,CAAC,EAAE;gBACvB,wBAAwB,CAAC,OAAO,GAAG,EAAE,CAAC;YACxC,CAAC;SACF,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,cAAc,CAAC,SAAS,CAAC,CAAC;YAC1B,wBAAwB,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1C,CAAC,CAAC;QACF,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;;QACb,MAAA,wBAAwB,CAAC,OAAO,yEAAG,SAAS,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,uCAAqC,EAAE,GAAQ,CAAC;AACpH,CAAC;AAOD,SAAS,mBAAmB,CAAC,EAAE,WAAW,EAAE,aAAa,EAA6B;IACpF,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,GAAG,CAAC,OAAQ,CAAC;QAC/B,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAG,SAAS,CAAC,CAAC;QACzB,OAAO,GAAG,EAAE;YACV,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,SAAS,CAAC,CAAC;QAC7B,CAAC,CAAC;QACF,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC;AACxE,CAAC;AAED,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,aAAkC,EAIlC,EAAE;;IACF,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,KAAuB,aAAa,EAA/B,aAAa,UAAK,aAAa,EAA3E,6CAA2D,CAAgB,CAAC;IAElF,uCACK,aAAa,KAChB,UAAU,kBAAI,UAAU,EAAE,MAAA,aAAa,CAAC,UAAU,CAAC,OAAO,mCAAI,EAAE,IAAK,aAAa,CAAC,UAAU,GAC7F,OAAO,EAAE,OAAO;YACd,CAAC,mBACM,CAAC,OAAO,CAAC,OAAO,IAAI;gBACrB,OAAO,EAAE;gBACP,2CAA2C;gBAC3C,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,GAAI,CAC/D;aACF,CAAC,EAEN,CAAC,CAAC,SAAS,EACb,OAAO,EAAE,CACP,oBAAC,oBAAoB,IACnB,GAAG,EAAE,aAAa,CAAC,EAAE,EACrB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,EAAE,EAAE,aAAa,CAAC,EAAE,GACpB,CACH,EACD,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,sBAAsB,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC;QACpG,CAAC,IACD;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,0BAA0B,GAAG,CACxC,aAAoC,EAIpC,EAAE;;IACF,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,OAAO,KAAuB,aAAa,EAA/B,aAAa,UAAK,aAAa,EAA3E,6CAA2D,CAAgB,CAAC;IAElF,mEACK,aAAa,KAChB,UAAU,kBAAI,UAAU,EAAE,MAAA,aAAa,CAAC,UAAU,CAAC,OAAO,mCAAI,EAAE,IAAK,aAAa,CAAC,UAAU,GAC7F,OAAO,EAAE,OAAO;YACd,CAAC,CAAC;gBACE,UAAU,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EAAC,CAAC,CAAC;gBAChC,2CAA2C;gBAC3C,8BAAM,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,UAAU,EAAE,GAAI,CAC5F,CAAC,CAAC,CAAC,SAAS;gBACb,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;gBACzB,2CAA2C;gBAC3C,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,CAAC,OAAO,EAAE,GAAI,CAC/D,CAAC,CAAC,CAAC,SAAS;aACd;YACH,CAAC,CAAC,SAAS,EACb,OAAO,EAAE,CACP,oBAAC,oBAAoB,IACnB,GAAG,EAAE,aAAa,CAAC,EAAE,EACrB,YAAY,EAAE,YAAY,EAC1B,cAAc,EAAE,cAAc,EAC9B,EAAE,EAAE,aAAa,CAAC,EAAE,GACpB,CACH,KACE,CAAC,aAAa,CAAC,WAAW,IAAI;QAC/B,MAAM,EAAE,CACN,oBAAC,mBAAmB,IAAC,WAAW,EAAE,aAAa,CAAC,WAAW,EAAE,aAAa,EAAE,aAAa,CAAC,aAAa,GAAI,CAC5G;KACF,CAAC,KACF,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,sBAAsB,CAAC,aAAa,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,aAAa,CAAC,EAAE,EAAE,CAAC,CAAC;QACpG,CAAC,IACD;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,qBAAqB,CACnC,YAAwC,EACxC,aAAyC;IAEzC,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;IAC7D,MAAM,MAAM,GAAG,cAAc,CAAC,SAAS,CAAC,CAAC;IACzC,OAAO;QACL,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;QACnE,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAA,EAAA,CAAC;QACjE,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,WAAC,OAAA,CAAC,MAAA,IAAI,CAAC,aAAa,mCAAI,CAAC,CAAC,IAAI,CAAC,CAAA,EAAA,CAAC;KAClE,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useContext, useEffect, useRef } from 'react';\n\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport {\n  DrawerConfig as RuntimeDrawerConfig,\n  DrawerStateChangeParams,\n} from '../../internal/plugins/controllers/drawers';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\n\nimport styles from './styles.css.js';\n\nexport interface RuntimeDrawer extends AppLayoutProps.Drawer {\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n}\n\nexport interface DrawersLayout {\n  global: Array<RuntimeDrawer>;\n  localBefore: Array<RuntimeDrawer>;\n  localAfter: Array<RuntimeDrawer>;\n}\n\ntype VisibilityCallback = (isVisible: boolean) => void;\n\ninterface RuntimeContentWrapperProps {\n  id?: string;\n  mountContent: RuntimeDrawerConfig['mountContent'];\n  unmountContent: RuntimeDrawerConfig['unmountContent'];\n}\n\nfunction RuntimeDrawerWrapper({ mountContent, unmountContent, id }: RuntimeContentWrapperProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const visibilityChangeCallback = useRef<VisibilityCallback | null>(null);\n  const activeDrawersIds = useContext(ActiveDrawersContext);\n  const isVisible = !!id && activeDrawersIds.includes(id);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountContent(container, {\n      onVisibilityChange: cb => {\n        visibilityChangeCallback.current = cb;\n      },\n    });\n    return () => {\n      unmountContent(container);\n      visibilityChangeCallback.current = null;\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useEffect(() => {\n    visibilityChangeCallback.current?.(isVisible);\n  }, [isVisible]);\n\n  return <div ref={ref} className={styles['runtime-content-wrapper']} data-awsui-runtime-drawer-root-id={id}></div>;\n}\n\ninterface RuntimeContentHeaderProps {\n  mountHeader: (container: HTMLElement) => void;\n  unmountHeader?: (container: HTMLElement) => void;\n}\n\nfunction RuntimeDrawerHeader({ mountHeader, unmountHeader }: RuntimeContentHeaderProps) {\n  const ref = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const container = ref.current!;\n    mountHeader?.(container);\n    return () => {\n      unmountHeader?.(container);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return <div className={styles['runtime-header-wrapper']} ref={ref} />;\n}\n\nexport const mapRuntimeConfigToDrawer = (\n  runtimeConfig: RuntimeDrawerConfig\n): AppLayoutProps.Drawer & {\n  orderPriority?: number;\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n} => {\n  const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n  return {\n    ...runtimeDrawer,\n    ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n    trigger: trigger\n      ? {\n          ...(trigger.iconSvg && {\n            iconSvg: (\n              // eslint-disable-next-line react/no-danger\n              <span dangerouslySetInnerHTML={{ __html: trigger.iconSvg }} />\n            ),\n          }),\n        }\n      : undefined,\n    content: (\n      <RuntimeDrawerWrapper\n        key={runtimeDrawer.id}\n        mountContent={mountContent}\n        unmountContent={unmountContent}\n        id={runtimeDrawer.id}\n      />\n    ),\n    onResize: event => {\n      fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n    },\n  };\n};\n\nexport const mapRuntimeConfigToAiDrawer = (\n  runtimeConfig: RuntimeAiDrawerConfig\n): AppLayoutProps.Drawer & {\n  orderPriority?: number;\n  onToggle?: NonCancelableEventHandler<DrawerStateChangeParams>;\n} => {\n  const { mountContent, unmountContent, trigger, ...runtimeDrawer } = runtimeConfig;\n\n  return {\n    ...runtimeDrawer,\n    ariaLabels: { drawerName: runtimeDrawer.ariaLabels.content ?? '', ...runtimeDrawer.ariaLabels },\n    trigger: trigger\n      ? {\n          customIcon: trigger?.customIcon ? (\n            // eslint-disable-next-line react/no-danger\n            <span style={{ lineHeight: 0 }} dangerouslySetInnerHTML={{ __html: trigger.customIcon }} />\n          ) : undefined,\n          iconSvg: trigger.iconSvg ? (\n            // eslint-disable-next-line react/no-danger\n            <span dangerouslySetInnerHTML={{ __html: trigger.iconSvg }} />\n          ) : undefined,\n        }\n      : undefined,\n    content: (\n      <RuntimeDrawerWrapper\n        key={runtimeDrawer.id}\n        mountContent={mountContent}\n        unmountContent={unmountContent}\n        id={runtimeDrawer.id}\n      />\n    ),\n    ...(runtimeDrawer.mountHeader && {\n      header: (\n        <RuntimeDrawerHeader mountHeader={runtimeDrawer.mountHeader} unmountHeader={runtimeDrawer.unmountHeader} />\n      ),\n    }),\n    onResize: event => {\n      fireNonCancelableEvent(runtimeDrawer.onResize, { size: event.detail.size, id: runtimeDrawer.id });\n    },\n  };\n};\n\nexport function convertRuntimeDrawers(\n  localDrawers: Array<RuntimeDrawerConfig>,\n  globalDrawers: Array<RuntimeDrawerConfig>\n): DrawersLayout {\n  const converted = localDrawers.map(mapRuntimeConfigToDrawer);\n  const sorted = sortByPriority(converted);\n  return {\n    global: sortByPriority(globalDrawers.map(mapRuntimeConfigToDrawer)),\n    localBefore: sorted.filter(item => (item.orderPriority ?? 0) > 0),\n    localAfter: sorted.filter(item => (item.orderPriority ?? 0) <= 0),\n  };\n}\n"]}

package/lib/internal/template/app-layout/runtime-drawer/styles.css.js

@@ -1,6 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "runtime-content-wrapper": "awsui_runtime-content-wrapper_14m8x_1m9bu_5"
+  "runtime-content-wrapper": "awsui_runtime-content-wrapper_14m8x_spfr5_5",
+  "runtime-header-wrapper": "awsui_runtime-header-wrapper_14m8x_spfr5_9"
 };
   

package/lib/internal/template/app-layout/runtime-drawer/styles.scoped.css

@@ -2,6 +2,10 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_runtime-content-wrapper_14m8x_1m9bu_5:not(#\9) {
+.awsui_runtime-content-wrapper_14m8x_spfr5_5:not(#\9) {
+  display: contents;
+}
+
+.awsui_runtime-header-wrapper_14m8x_spfr5_9:not(#\9) {
   display: contents;
 }

package/lib/internal/template/app-layout/runtime-drawer/styles.selectors.js

@@ -2,6 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "runtime-content-wrapper": "awsui_runtime-content-wrapper_14m8x_1m9bu_5"
+  "runtime-content-wrapper": "awsui_runtime-content-wrapper_14m8x_spfr5_5",
+  "runtime-header-wrapper": "awsui_runtime-header-wrapper_14m8x_spfr5_9"
 };
   

package/lib/internal/template/app-layout/test-classes/styles.css.js

@@ -1,29 +1,31 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fj9k_jfqbk_5",
-  "navigation": "awsui_navigation_1fj9k_jfqbk_6",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_jfqbk_7",
-  "navigation-close": "awsui_navigation-close_1fj9k_jfqbk_8",
-  "content": "awsui_content_1fj9k_jfqbk_9",
-  "notifications": "awsui_notifications_1fj9k_jfqbk_10",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_jfqbk_11",
-  "tools": "awsui_tools_1fj9k_jfqbk_12",
-  "tools-close": "awsui_tools-close_1fj9k_jfqbk_13",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_jfqbk_14",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_jfqbk_15",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_jfqbk_16",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_jfqbk_17",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_jfqbk_18",
-  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_jfqbk_19",
-  "drawers-trigger-with-badge": "awsui_drawers-trigger-with-badge_1fj9k_jfqbk_20",
-  "active-drawer": "awsui_active-drawer_1fj9k_jfqbk_21",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_jfqbk_22",
-  "overflow-menu": "awsui_overflow-menu_1fj9k_jfqbk_23",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_jfqbk_24",
-  "toolbar": "awsui_toolbar_1fj9k_jfqbk_25",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_jfqbk_26",
-  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_jfqbk_27",
-  "active-drawer-expanded-mode-button": "awsui_active-drawer-expanded-mode-button_1fj9k_jfqbk_28"
+  "root": "awsui_root_1fj9k_q6akd_5",
+  "navigation": "awsui_navigation_1fj9k_q6akd_6",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_q6akd_7",
+  "navigation-close": "awsui_navigation-close_1fj9k_q6akd_8",
+  "content": "awsui_content_1fj9k_q6akd_9",
+  "notifications": "awsui_notifications_1fj9k_q6akd_10",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_q6akd_11",
+  "tools": "awsui_tools_1fj9k_q6akd_12",
+  "tools-close": "awsui_tools-close_1fj9k_q6akd_13",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_q6akd_14",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_q6akd_15",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_q6akd_16",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_q6akd_17",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_q6akd_18",
+  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_q6akd_19",
+  "drawers-trigger-with-badge": "awsui_drawers-trigger-with-badge_1fj9k_q6akd_20",
+  "active-drawer": "awsui_active-drawer_1fj9k_q6akd_21",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_q6akd_22",
+  "overflow-menu": "awsui_overflow-menu_1fj9k_q6akd_23",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_q6akd_24",
+  "toolbar": "awsui_toolbar_1fj9k_q6akd_25",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_q6akd_26",
+  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_q6akd_27",
+  "active-drawer-expanded-mode-button": "awsui_active-drawer-expanded-mode-button_1fj9k_q6akd_28",
+  "ai-drawer-toggle": "awsui_ai-drawer-toggle_1fj9k_q6akd_29",
+  "active-ai-drawer-leave-expanded-mode-custom-button": "awsui_active-ai-drawer-leave-expanded-mode-custom-button_1fj9k_q6akd_30"
 };
   

package/lib/internal/template/app-layout/test-classes/styles.scoped.css

@@ -2,29 +2,31 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fj9k_jfqbk_5:not(#\9),
-.awsui_navigation_1fj9k_jfqbk_6:not(#\9),
-.awsui_navigation-toggle_1fj9k_jfqbk_7:not(#\9),
-.awsui_navigation-close_1fj9k_jfqbk_8:not(#\9),
-.awsui_content_1fj9k_jfqbk_9:not(#\9),
-.awsui_notifications_1fj9k_jfqbk_10:not(#\9),
-.awsui_breadcrumbs_1fj9k_jfqbk_11:not(#\9),
-.awsui_tools_1fj9k_jfqbk_12:not(#\9),
-.awsui_tools-close_1fj9k_jfqbk_13:not(#\9),
-.awsui_tools-toggle_1fj9k_jfqbk_14:not(#\9),
-.awsui_drawer-closed_1fj9k_jfqbk_15:not(#\9),
-.awsui_mobile-bar_1fj9k_jfqbk_16:not(#\9),
-.awsui_disable-body-scroll-root_1fj9k_jfqbk_17:not(#\9),
-.awsui_drawers-trigger_1fj9k_jfqbk_18:not(#\9),
-.awsui_drawers-trigger-global_1fj9k_jfqbk_19:not(#\9),
-.awsui_drawers-trigger-with-badge_1fj9k_jfqbk_20:not(#\9),
-.awsui_active-drawer_1fj9k_jfqbk_21:not(#\9),
-.awsui_active-drawer-close-button_1fj9k_jfqbk_22:not(#\9),
-.awsui_overflow-menu_1fj9k_jfqbk_23:not(#\9),
-.awsui_drawers-slider_1fj9k_jfqbk_24:not(#\9),
-.awsui_toolbar_1fj9k_jfqbk_25:not(#\9),
-.awsui_trigger-wrapper-tooltip-visible_1fj9k_jfqbk_26:not(#\9),
-.awsui_trigger-tooltip_1fj9k_jfqbk_27:not(#\9),
-.awsui_active-drawer-expanded-mode-button_1fj9k_jfqbk_28:not(#\9) {
+.awsui_root_1fj9k_q6akd_5:not(#\9),
+.awsui_navigation_1fj9k_q6akd_6:not(#\9),
+.awsui_navigation-toggle_1fj9k_q6akd_7:not(#\9),
+.awsui_navigation-close_1fj9k_q6akd_8:not(#\9),
+.awsui_content_1fj9k_q6akd_9:not(#\9),
+.awsui_notifications_1fj9k_q6akd_10:not(#\9),
+.awsui_breadcrumbs_1fj9k_q6akd_11:not(#\9),
+.awsui_tools_1fj9k_q6akd_12:not(#\9),
+.awsui_tools-close_1fj9k_q6akd_13:not(#\9),
+.awsui_tools-toggle_1fj9k_q6akd_14:not(#\9),
+.awsui_drawer-closed_1fj9k_q6akd_15:not(#\9),
+.awsui_mobile-bar_1fj9k_q6akd_16:not(#\9),
+.awsui_disable-body-scroll-root_1fj9k_q6akd_17:not(#\9),
+.awsui_drawers-trigger_1fj9k_q6akd_18:not(#\9),
+.awsui_drawers-trigger-global_1fj9k_q6akd_19:not(#\9),
+.awsui_drawers-trigger-with-badge_1fj9k_q6akd_20:not(#\9),
+.awsui_active-drawer_1fj9k_q6akd_21:not(#\9),
+.awsui_active-drawer-close-button_1fj9k_q6akd_22:not(#\9),
+.awsui_overflow-menu_1fj9k_q6akd_23:not(#\9),
+.awsui_drawers-slider_1fj9k_q6akd_24:not(#\9),
+.awsui_toolbar_1fj9k_q6akd_25:not(#\9),
+.awsui_trigger-wrapper-tooltip-visible_1fj9k_q6akd_26:not(#\9),
+.awsui_trigger-tooltip_1fj9k_q6akd_27:not(#\9),
+.awsui_active-drawer-expanded-mode-button_1fj9k_q6akd_28:not(#\9),
+.awsui_ai-drawer-toggle_1fj9k_q6akd_29:not(#\9),
+.awsui_active-ai-drawer-leave-expanded-mode-custom-button_1fj9k_q6akd_30:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/app-layout/test-classes/styles.selectors.js

@@ -2,29 +2,31 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fj9k_jfqbk_5",
-  "navigation": "awsui_navigation_1fj9k_jfqbk_6",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_jfqbk_7",
-  "navigation-close": "awsui_navigation-close_1fj9k_jfqbk_8",
-  "content": "awsui_content_1fj9k_jfqbk_9",
-  "notifications": "awsui_notifications_1fj9k_jfqbk_10",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_jfqbk_11",
-  "tools": "awsui_tools_1fj9k_jfqbk_12",
-  "tools-close": "awsui_tools-close_1fj9k_jfqbk_13",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_jfqbk_14",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_jfqbk_15",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_jfqbk_16",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_jfqbk_17",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_jfqbk_18",
-  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_jfqbk_19",
-  "drawers-trigger-with-badge": "awsui_drawers-trigger-with-badge_1fj9k_jfqbk_20",
-  "active-drawer": "awsui_active-drawer_1fj9k_jfqbk_21",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_jfqbk_22",
-  "overflow-menu": "awsui_overflow-menu_1fj9k_jfqbk_23",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_jfqbk_24",
-  "toolbar": "awsui_toolbar_1fj9k_jfqbk_25",
-  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_jfqbk_26",
-  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_jfqbk_27",
-  "active-drawer-expanded-mode-button": "awsui_active-drawer-expanded-mode-button_1fj9k_jfqbk_28"
+  "root": "awsui_root_1fj9k_q6akd_5",
+  "navigation": "awsui_navigation_1fj9k_q6akd_6",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_q6akd_7",
+  "navigation-close": "awsui_navigation-close_1fj9k_q6akd_8",
+  "content": "awsui_content_1fj9k_q6akd_9",
+  "notifications": "awsui_notifications_1fj9k_q6akd_10",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_q6akd_11",
+  "tools": "awsui_tools_1fj9k_q6akd_12",
+  "tools-close": "awsui_tools-close_1fj9k_q6akd_13",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_q6akd_14",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_q6akd_15",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_q6akd_16",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_q6akd_17",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_q6akd_18",
+  "drawers-trigger-global": "awsui_drawers-trigger-global_1fj9k_q6akd_19",
+  "drawers-trigger-with-badge": "awsui_drawers-trigger-with-badge_1fj9k_q6akd_20",
+  "active-drawer": "awsui_active-drawer_1fj9k_q6akd_21",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_q6akd_22",
+  "overflow-menu": "awsui_overflow-menu_1fj9k_q6akd_23",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_q6akd_24",
+  "toolbar": "awsui_toolbar_1fj9k_q6akd_25",
+  "trigger-wrapper-tooltip-visible": "awsui_trigger-wrapper-tooltip-visible_1fj9k_q6akd_26",
+  "trigger-tooltip": "awsui_trigger-tooltip_1fj9k_q6akd_27",
+  "active-drawer-expanded-mode-button": "awsui_active-drawer-expanded-mode-button_1fj9k_q6akd_28",
+  "ai-drawer-toggle": "awsui_ai-drawer-toggle_1fj9k_q6akd_29",
+  "active-ai-drawer-leave-expanded-mode-custom-button": "awsui_active-ai-drawer-leave-expanded-mode-custom-button_1fj9k_q6akd_30"
 };
   

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export interface SizeControlProps {
-    position: 'side' | 'bottom';
+    position: 'side-start' | 'side' | 'bottom';
     panelRef?: React.RefObject<HTMLDivElement>;
     handleRef?: React.RefObject<HTMLDivElement>;
     onResize: (newSize: number) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,YAAY,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC3C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nexport interface SizeControlProps {\n  position: 'side' | 'bottom';\n  panelRef?: React.RefObject<HTMLDivElement>;\n  handleRef?: React.RefObject<HTMLDivElement>;\n  onResize: (newSize: number) => void;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nexport interface SizeControlProps {\n  position: 'side-start' | 'side' | 'bottom';\n  panelRef?: React.RefObject<HTMLDivElement>;\n  handleRef?: React.RefObject<HTMLDivElement>;\n  onResize: (newSize: number) => void;\n}\n"]}

package/lib/internal/template/app-layout/utils/use-ai-drawer.d.ts

@@ -0,0 +1,27 @@
+export interface OnChangeParams {
+    initiatedByUserAction: boolean;
+}
+export declare const MIN_DRAWER_SIZE = 290;
+interface UseDrawersProps {
+    isEnabled: boolean;
+    onAiDrawerFocus: () => void;
+    expandedDrawerId: string | null;
+    setExpandedDrawerId: (value: string | null) => void;
+}
+export declare function useAiDrawer({ isEnabled, onAiDrawerFocus, expandedDrawerId, setExpandedDrawerId }: UseDrawersProps): {
+    aiDrawer: (import("..").AppLayoutProps.Drawer & {
+        orderPriority?: number | undefined;
+        onToggle?: import("../../internal/events").NonCancelableEventHandler<import("../../internal/plugins/controllers/drawers").DrawerStateChangeParams> | undefined;
+    }) | null;
+    onActiveAiDrawerChange: (newDrawerId: string | null, { initiatedByUserAction }?: OnChangeParams) => void;
+    activeAiDrawer: (import("..").AppLayoutProps.Drawer & {
+        orderPriority?: number | undefined;
+        onToggle?: import("../../internal/events").NonCancelableEventHandler<import("../../internal/plugins/controllers/drawers").DrawerStateChangeParams> | undefined;
+    }) | null;
+    activeAiDrawerId: string | null;
+    activeAiDrawerSize: number;
+    minAiDrawerSize: number;
+    onActiveAiDrawerResize: (size: number) => void;
+};
+export {};
+//# sourceMappingURL=use-ai-drawer.d.ts.map

package/lib/internal/template/app-layout/utils/use-ai-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ai-drawer.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-ai-drawer.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,cAAc;IAC7B,qBAAqB,EAAE,OAAO,CAAC;CAChC;AAsED,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACrD;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,EAAE,eAAe;;;;;0CAUjG,MAAM,GAAG,IAAI,8BACC,cAAc;;;;;;;;mCAPL,MAAM;EAwC7C"}

package/lib/internal/template/app-layout/utils/use-ai-drawer.js

@@ -0,0 +1,104 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef, useState } from 'react';
+import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
+import { fireNonCancelableEvent } from '../../internal/events';
+import { metrics } from '../../internal/metrics';
+import { getAppLayoutInitialState, registerAppLayoutHandler } from '../../internal/plugins/widget/internal';
+import { assertNever } from '../../internal/types';
+import { mapRuntimeConfigToAiDrawer } from '../runtime-drawer';
+const DEFAULT_ON_CHANGE_PARAMS = { initiatedByUserAction: true };
+function useRuntimeAiDrawer(isEnabled, activeAiDrawerId, onActiveAiDrawerChange, onActiveAiDrawerResize) {
+    const [aiDrawer, setAiDrawer] = useState(null);
+    const appLayoutMessageHandler = useStableCallback((event) => {
+        if (event.type === 'registerLeftDrawer') {
+            setAiDrawer(event.payload);
+            if (!aiDrawerWasOpenRef.current && event.payload.defaultActive) {
+                onAiDrawersChangeStable(event.payload.id, { initiatedByUserAction: false });
+            }
+            return;
+        }
+        if (aiDrawer && aiDrawer.id !== event.payload.id) {
+            metrics.sendOpsMetricObject('awsui-widget-drawer-incorrect-id', { oldId: aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.id, newId: event.payload.id });
+            return;
+        }
+        switch (event.type) {
+            case 'updateDrawerConfig':
+                setAiDrawer(current => (current ? Object.assign(Object.assign({}, current), event.payload) : current));
+                break;
+            case 'openDrawer':
+                onActiveAiDrawerChangeStable(event.payload.id, { initiatedByUserAction: false });
+                break;
+            case 'closeDrawer':
+                onActiveAiDrawerChangeStable(null, { initiatedByUserAction: false });
+                break;
+            case 'resizeDrawer':
+                onActiveAiDrawerResizeStable(event.payload.size);
+                break;
+            /* istanbul ignore next: this code is not intended to be visited */
+            default:
+                assertNever(event);
+        }
+    });
+    const onAiDrawersChangeStable = useStableCallback(onActiveAiDrawerChange);
+    const onActiveAiDrawerResizeStable = useStableCallback(onActiveAiDrawerResize);
+    const onActiveAiDrawerChangeStable = useStableCallback(onActiveAiDrawerChange);
+    const aiDrawerWasOpenRef = useRef(false);
+    aiDrawerWasOpenRef.current = aiDrawerWasOpenRef.current || !!activeAiDrawerId;
+    useEffect(() => {
+        var _a;
+        if (!isEnabled) {
+            return;
+        }
+        const initialDrawerMessage = (_a = getAppLayoutInitialState()) === null || _a === void 0 ? void 0 : _a.find(message => message.type === 'registerLeftDrawer');
+        if (initialDrawerMessage && initialDrawerMessage.type === 'registerLeftDrawer') {
+            setAiDrawer(initialDrawerMessage.payload);
+            if (!aiDrawerWasOpenRef.current && initialDrawerMessage.payload.defaultActive) {
+                onAiDrawersChangeStable(initialDrawerMessage.payload.id, { initiatedByUserAction: false });
+            }
+        }
+        const unsubscribe = registerAppLayoutHandler(appLayoutMessageHandler);
+        return () => {
+            unsubscribe();
+            setAiDrawer(null);
+        };
+    }, [isEnabled, appLayoutMessageHandler, onAiDrawersChangeStable, onActiveAiDrawerResizeStable]);
+    return aiDrawer && mapRuntimeConfigToAiDrawer(aiDrawer);
+}
+export const MIN_DRAWER_SIZE = 290;
+export function useAiDrawer({ isEnabled, onAiDrawerFocus, expandedDrawerId, setExpandedDrawerId }) {
+    var _a, _b;
+    const [activeAiDrawerId, setActiveAiDrawerId] = useState(null);
+    const [size, setSize] = useState(null);
+    function onActiveAiDrawerResize(size) {
+        setSize(size);
+        fireNonCancelableEvent(activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.onResize, { id: activeAiDrawerId, size });
+    }
+    function onActiveAiDrawerChange(newDrawerId, { initiatedByUserAction } = DEFAULT_ON_CHANGE_PARAMS) {
+        setActiveAiDrawerId(newDrawerId);
+        if (newDrawerId) {
+            fireNonCancelableEvent(aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.onToggle, { isOpen: true, initiatedByUserAction });
+        }
+        if (activeAiDrawerId) {
+            fireNonCancelableEvent(aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.onToggle, { isOpen: false, initiatedByUserAction });
+            if (activeAiDrawerId === expandedDrawerId) {
+                setExpandedDrawerId === null || setExpandedDrawerId === void 0 ? void 0 : setExpandedDrawerId(null);
+            }
+        }
+        onAiDrawerFocus === null || onAiDrawerFocus === void 0 ? void 0 : onAiDrawerFocus();
+    }
+    const aiDrawer = useRuntimeAiDrawer(isEnabled, activeAiDrawerId, onActiveAiDrawerChange, onActiveAiDrawerResize);
+    const activeAiDrawer = activeAiDrawerId && activeAiDrawerId === (aiDrawer === null || aiDrawer === void 0 ? void 0 : aiDrawer.id) ? aiDrawer : null;
+    const activeAiDrawerSize = activeAiDrawerId ? ((_a = size !== null && size !== void 0 ? size : activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.defaultSize) !== null && _a !== void 0 ? _a : MIN_DRAWER_SIZE) : 0;
+    const minAiDrawerSize = Math.min((_b = activeAiDrawer === null || activeAiDrawer === void 0 ? void 0 : activeAiDrawer.defaultSize) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
+    return {
+        aiDrawer,
+        onActiveAiDrawerChange,
+        activeAiDrawer,
+        activeAiDrawerId,
+        activeAiDrawerSize,
+        minAiDrawerSize,
+        onActiveAiDrawerResize,
+    };
+}
+//# sourceMappingURL=use-ai-drawer.js.map

package/lib/internal/template/app-layout/utils/use-ai-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ai-drawer.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-ai-drawer.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 { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { metrics } from '../../internal/metrics';\nimport { AppLayoutMessage, DrawerPayload as RuntimeAiDrawerConfig } from '../../internal/plugins/widget/interfaces';\nimport { getAppLayoutInitialState, registerAppLayoutHandler } from '../../internal/plugins/widget/internal';\nimport { assertNever } from '../../internal/types';\nimport { mapRuntimeConfigToAiDrawer } from '../runtime-drawer';\n\nexport interface OnChangeParams {\n  initiatedByUserAction: boolean;\n}\n\nconst DEFAULT_ON_CHANGE_PARAMS = { initiatedByUserAction: true };\n\nfunction useRuntimeAiDrawer(\n  isEnabled: boolean,\n  activeAiDrawerId: string | null,\n  onActiveAiDrawerChange: (newDrawerId: string | null, { initiatedByUserAction }: OnChangeParams) => void,\n  onActiveAiDrawerResize: (size: number) => void\n) {\n  const [aiDrawer, setAiDrawer] = useState<RuntimeAiDrawerConfig | null>(null);\n  const appLayoutMessageHandler = useStableCallback((event: AppLayoutMessage) => {\n    if (event.type === 'registerLeftDrawer') {\n      setAiDrawer(event.payload);\n      if (!aiDrawerWasOpenRef.current && event.payload.defaultActive) {\n        onAiDrawersChangeStable(event.payload.id, { initiatedByUserAction: false });\n      }\n      return;\n    }\n    if (aiDrawer && aiDrawer.id !== event.payload.id) {\n      metrics.sendOpsMetricObject('awsui-widget-drawer-incorrect-id', { oldId: aiDrawer?.id, newId: event.payload.id });\n      return;\n    }\n    switch (event.type) {\n      case 'updateDrawerConfig':\n        setAiDrawer(current => (current ? { ...current, ...event.payload } : current));\n        break;\n      case 'openDrawer':\n        onActiveAiDrawerChangeStable(event.payload.id, { initiatedByUserAction: false });\n        break;\n      case 'closeDrawer':\n        onActiveAiDrawerChangeStable(null, { initiatedByUserAction: false });\n        break;\n      case 'resizeDrawer':\n        onActiveAiDrawerResizeStable(event.payload.size);\n        break;\n      /* istanbul ignore next: this code is not intended to be visited */\n      default:\n        assertNever(event);\n    }\n  });\n  const onAiDrawersChangeStable = useStableCallback(onActiveAiDrawerChange);\n  const onActiveAiDrawerResizeStable = useStableCallback(onActiveAiDrawerResize);\n  const onActiveAiDrawerChangeStable = useStableCallback(onActiveAiDrawerChange);\n  const aiDrawerWasOpenRef = useRef(false);\n  aiDrawerWasOpenRef.current = aiDrawerWasOpenRef.current || !!activeAiDrawerId;\n\n  useEffect(() => {\n    if (!isEnabled) {\n      return;\n    }\n\n    const initialDrawerMessage = getAppLayoutInitialState()?.find(message => message.type === 'registerLeftDrawer');\n    if (initialDrawerMessage && initialDrawerMessage.type === 'registerLeftDrawer') {\n      setAiDrawer(initialDrawerMessage.payload);\n      if (!aiDrawerWasOpenRef.current && initialDrawerMessage.payload.defaultActive) {\n        onAiDrawersChangeStable(initialDrawerMessage.payload.id, { initiatedByUserAction: false });\n      }\n    }\n\n    const unsubscribe = registerAppLayoutHandler(appLayoutMessageHandler);\n    return () => {\n      unsubscribe();\n      setAiDrawer(null);\n    };\n  }, [isEnabled, appLayoutMessageHandler, onAiDrawersChangeStable, onActiveAiDrawerResizeStable]);\n\n  return aiDrawer && mapRuntimeConfigToAiDrawer(aiDrawer);\n}\n\nexport const MIN_DRAWER_SIZE = 290;\n\ninterface UseDrawersProps {\n  isEnabled: boolean;\n  onAiDrawerFocus: () => void;\n  expandedDrawerId: string | null;\n  setExpandedDrawerId: (value: string | null) => void;\n}\n\nexport function useAiDrawer({ isEnabled, onAiDrawerFocus, expandedDrawerId, setExpandedDrawerId }: UseDrawersProps) {\n  const [activeAiDrawerId, setActiveAiDrawerId] = useState<string | null>(null);\n  const [size, setSize] = useState<number | null>(null);\n\n  function onActiveAiDrawerResize(size: number) {\n    setSize(size);\n    fireNonCancelableEvent(activeAiDrawer?.onResize, { id: activeAiDrawerId, size });\n  }\n\n  function onActiveAiDrawerChange(\n    newDrawerId: string | null,\n    { initiatedByUserAction }: OnChangeParams = DEFAULT_ON_CHANGE_PARAMS\n  ) {\n    setActiveAiDrawerId(newDrawerId);\n\n    if (newDrawerId) {\n      fireNonCancelableEvent(aiDrawer?.onToggle, { isOpen: true, initiatedByUserAction });\n    }\n\n    if (activeAiDrawerId) {\n      fireNonCancelableEvent(aiDrawer?.onToggle, { isOpen: false, initiatedByUserAction });\n\n      if (activeAiDrawerId === expandedDrawerId) {\n        setExpandedDrawerId?.(null);\n      }\n    }\n\n    onAiDrawerFocus?.();\n  }\n\n  const aiDrawer = useRuntimeAiDrawer(isEnabled, activeAiDrawerId, onActiveAiDrawerChange, onActiveAiDrawerResize);\n  const activeAiDrawer = activeAiDrawerId && activeAiDrawerId === aiDrawer?.id ? aiDrawer : null;\n  const activeAiDrawerSize = activeAiDrawerId ? (size ?? activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE) : 0;\n  const minAiDrawerSize = Math.min(activeAiDrawer?.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);\n\n  return {\n    aiDrawer,\n    onActiveAiDrawerChange,\n    activeAiDrawer,\n    activeAiDrawerId,\n    activeAiDrawerSize,\n    minAiDrawerSize,\n    onActiveAiDrawerResize,\n  };\n}\n"]}

package/lib/internal/template/app-layout/utils/use-keyboard-events.js

@@ -18,7 +18,7 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
         onDirectionClick: (direction) => {
             let currentSize;
             const { panelHeight, panelWidth } = getCurrentSize(panelRef);
-            if (position === 'side') {
+            if (['side', 'side-start'].includes(position)) {
                 currentSize = panelWidth;
             }
             else {
@@ -29,11 +29,11 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
             switch (direction) {
                 case 'block-start':
                 case 'inline-start':
-                    singleStepUp();
+                    position === 'side-start' ? singleStepDown() : singleStepUp();
                     break;
                 case 'block-end':
                 case 'inline-end':
-                    singleStepDown();
+                    position === 'side-start' ? singleStepUp() : singleStepDown();
                     break;
             }
         },
@@ -41,7 +41,7 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
             let currentSize;
             let maxSize;
             const { panelHeight, panelWidth } = getCurrentSize(panelRef);
-            if (position === 'side') {
+            if (['side', 'side-start'].includes(position)) {
                 currentSize = panelWidth;
                 // don't need the exact max size as it's constrained in the set size function
                 maxSize = window.innerWidth;
@@ -58,16 +58,16 @@ export const useKeyboardEvents = ({ position, onResize, panelRef }) => {
             const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);
             handleKey(event, {
                 onBlockStart: () => {
-                    position === 'bottom' ? singleStepUp() : singleStepDown();
+                    ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();
                 },
                 onBlockEnd: () => {
-                    position === 'bottom' ? singleStepDown() : singleStepUp();
+                    ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();
                 },
                 onInlineEnd: () => {
-                    position === 'bottom' ? singleStepUp() : singleStepDown();
+                    ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();
                 },
                 onInlineStart: () => {
-                    position === 'bottom' ? singleStepDown() : singleStepUp();
+                    ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();
                 },
                 onPageDown: () => multipleStepDown(),
                 onPageUp: () => multipleStepUp(),

package/lib/internal/template/app-layout/utils/use-keyboard-events.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-keyboard-events.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-keyboard-events.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 from 'react';\n\nimport { Direction } from '../../internal/components/drag-handle-wrapper/interfaces';\nimport handleKey from '../../internal/utils/handle-key';\nimport { SizeControlProps } from './interfaces';\n\nconst KEYBOARD_SINGLE_STEP_SIZE = 10;\nconst KEYBOARD_MULTIPLE_STEPS_SIZE = 60;\n\nconst getCurrentSize = (panelRef?: React.RefObject<HTMLDivElement>) => {\n  if (!panelRef || !panelRef.current) {\n    return {\n      panelHeight: 0,\n      panelWidth: 0,\n    };\n  }\n\n  return {\n    panelHeight: panelRef.current.clientHeight,\n    panelWidth: panelRef.current.clientWidth,\n  };\n};\n\nexport const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlProps) => {\n  return {\n    onDirectionClick: (direction: Direction) => {\n      let currentSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (position === 'side') {\n        currentSize = panelWidth;\n      } else {\n        currentSize = panelHeight;\n      }\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n\n      switch (direction) {\n        case 'block-start':\n        case 'inline-start':\n          singleStepUp();\n          break;\n        case 'block-end':\n        case 'inline-end':\n          singleStepDown();\n          break;\n      }\n    },\n\n    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n      let currentSize: number;\n      let maxSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (position === 'side') {\n        currentSize = panelWidth;\n        // don't need the exact max size as it's constrained in the set size function\n        maxSize = window.innerWidth;\n      } else {\n        currentSize = panelHeight;\n        // don't need the exact max size as it's constrained in the set size function\n        maxSize = window.innerHeight;\n      }\n\n      let isEventHandled = true;\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n      const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n      const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n\n      handleKey(event, {\n        onBlockStart: () => {\n          position === 'bottom' ? singleStepUp() : singleStepDown();\n        },\n        onBlockEnd: () => {\n          position === 'bottom' ? singleStepDown() : singleStepUp();\n        },\n        onInlineEnd: () => {\n          position === 'bottom' ? singleStepUp() : singleStepDown();\n        },\n        onInlineStart: () => {\n          position === 'bottom' ? singleStepDown() : singleStepUp();\n        },\n        onPageDown: () => multipleStepDown(),\n        onPageUp: () => multipleStepUp(),\n        onHome: () => onResize(maxSize),\n        onEnd: () => onResize(0),\n        onDefault: () => (isEventHandled = false),\n      });\n\n      if (isEventHandled) {\n        event.preventDefault();\n      }\n    },\n  };\n};\n"]}
+{"version":3,"file":"use-keyboard-events.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-keyboard-events.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 from 'react';\n\nimport { Direction } from '../../internal/components/drag-handle-wrapper/interfaces';\nimport handleKey from '../../internal/utils/handle-key';\nimport { SizeControlProps } from './interfaces';\n\nconst KEYBOARD_SINGLE_STEP_SIZE = 10;\nconst KEYBOARD_MULTIPLE_STEPS_SIZE = 60;\n\nconst getCurrentSize = (panelRef?: React.RefObject<HTMLDivElement>) => {\n  if (!panelRef || !panelRef.current) {\n    return {\n      panelHeight: 0,\n      panelWidth: 0,\n    };\n  }\n\n  return {\n    panelHeight: panelRef.current.clientHeight,\n    panelWidth: panelRef.current.clientWidth,\n  };\n};\n\nexport const useKeyboardEvents = ({ position, onResize, panelRef }: SizeControlProps) => {\n  return {\n    onDirectionClick: (direction: Direction) => {\n      let currentSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (['side', 'side-start'].includes(position)) {\n        currentSize = panelWidth;\n      } else {\n        currentSize = panelHeight;\n      }\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n\n      switch (direction) {\n        case 'block-start':\n        case 'inline-start':\n          position === 'side-start' ? singleStepDown() : singleStepUp();\n          break;\n        case 'block-end':\n        case 'inline-end':\n          position === 'side-start' ? singleStepUp() : singleStepDown();\n          break;\n      }\n    },\n\n    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n      let currentSize: number;\n      let maxSize: number;\n\n      const { panelHeight, panelWidth } = getCurrentSize(panelRef);\n\n      if (['side', 'side-start'].includes(position)) {\n        currentSize = panelWidth;\n        // don't need the exact max size as it's constrained in the set size function\n        maxSize = window.innerWidth;\n      } else {\n        currentSize = panelHeight;\n        // don't need the exact max size as it's constrained in the set size function\n        maxSize = window.innerHeight;\n      }\n\n      let isEventHandled = true;\n\n      const singleStepUp = () => onResize(currentSize + KEYBOARD_SINGLE_STEP_SIZE);\n      const singleStepDown = () => onResize(currentSize - KEYBOARD_SINGLE_STEP_SIZE);\n      const multipleStepUp = () => onResize(currentSize + KEYBOARD_MULTIPLE_STEPS_SIZE);\n      const multipleStepDown = () => onResize(currentSize - KEYBOARD_MULTIPLE_STEPS_SIZE);\n\n      handleKey(event, {\n        onBlockStart: () => {\n          ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();\n        },\n        onBlockEnd: () => {\n          ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();\n        },\n        onInlineEnd: () => {\n          ['bottom', 'side-start'].includes(position) ? singleStepUp() : singleStepDown();\n        },\n        onInlineStart: () => {\n          ['bottom', 'side-start'].includes(position) ? singleStepDown() : singleStepUp();\n        },\n        onPageDown: () => multipleStepDown(),\n        onPageUp: () => multipleStepUp(),\n        onHome: () => onResize(maxSize),\n        onEnd: () => onResize(0),\n        onDefault: () => (isEventHandled = false),\n      });\n\n      if (isEventHandled) {\n        event.preventDefault();\n      }\n    },\n  };\n};\n"]}

package/lib/internal/template/app-layout/utils/use-pointer-events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-pointer-events.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,eAAO,MAAM,gBAAgB,gDAAiD,gBAAgB,eAwD7F,CAAC"}
+{"version":3,"file":"use-pointer-events.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-pointer-events.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIhD,eAAO,MAAM,gBAAgB,gDAAiD,gBAAgB,eAkE7F,CAAC"}

package/lib/internal/template/app-layout/utils/use-pointer-events.js

@@ -15,6 +15,14 @@ export const usePointerEvents = ({ position, panelRef, handleRef, onResize }) =>
             const width = getLogicalBoundingClientRect(panelRef.current).insetInlineEnd - mouseClientX + handleOffset;
             onResize(width);
         }
+        else if (position === 'side-start') {
+            const mouseClientX = getLogicalClientX(event, getIsRtl(panelRef.current)) || 0;
+            // The handle offset aligns the cursor with the middle of the resize handle.
+            const handleOffset = getLogicalBoundingClientRect(handleRef.current).inlineSize / 2;
+            const panelBoundingClientRect = getLogicalBoundingClientRect(panelRef.current);
+            const width = panelBoundingClientRect.insetInlineEnd + mouseClientX + handleOffset - panelBoundingClientRect.inlineSize;
+            onResize(width);
+        }
         else {
             const mouseClientY = event.clientY || 0;
             // The handle offset aligns the cursor with the middle of the resize handle.