@cloudscape-design/components 3.0.1068 → 3.0.1069

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "354493e5bb112acb3a72bf53b404aafacb21bd2d"
+  "commit": "41a377be375d548c90cef6cdcacfad1be94f32fc"
 }

package/package.json

@@ -150,7 +150,7 @@
     "./internal/base-component/index.js",
     "./internal/base-component/styles.css.js"
   ],
-  "version": "3.0.1068",
+  "version": "3.0.1069",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/components.git"

package/split-panel/bottom.d.ts

@@ -3,6 +3,7 @@ import { SplitPanelContentProps, SplitPanelProps } from './interfaces';
 interface SplitPanelContentBottomProps extends SplitPanelContentProps {
   appLayoutMaxWidth: React.CSSProperties | undefined;
   closeBehavior: SplitPanelProps['closeBehavior'];
+  hasCustomElements?: boolean;
 }
 export declare function SplitPanelContentBottom({
   closeBehavior,
@@ -15,6 +16,8 @@ export declare function SplitPanelContentBottom({
   children,
   appLayoutMaxWidth,
   panelHeaderId,
-  onToggle
+  ariaLabel,
+  onToggle,
+  hasCustomElements
 }: SplitPanelContentBottomProps): JSX.Element;
 export {};

package/split-panel/bottom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bottom.d.ts","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMvE,UAAU,4BAA6B,SAAQ,sBAAsB;IACnE,iBAAiB,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;CACjD;AAED,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,EACb,SAAS,EACT,MAAM,EACN,aAAa,EACb,UAAU,EACV,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,QAAQ,GACT,EAAE,4BAA4B,eA+E9B"}
+{"version":3,"file":"bottom.d.ts","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAUjD,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMvE,UAAU,4BAA6B,SAAQ,sBAAsB;IACnE,iBAAiB,EAAE,KAAK,CAAC,aAAa,GAAG,SAAS,CAAC;IACnD,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,uBAAuB,CAAC,EACtC,aAAa,EACb,SAAS,EACT,MAAM,EACN,aAAa,EACb,UAAU,EACV,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,SAAS,EACT,QAAQ,EACR,iBAAiB,GAClB,EAAE,4BAA4B,eAqF9B"}

package/split-panel/bottom.js

@@ -11,7 +11,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import sharedStyles from '../app-layout/resize/styles.css.js';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
-export function SplitPanelContentBottom({ closeBehavior, baseProps, isOpen, splitPanelRef, cappedSize, header, resizeHandle, children, appLayoutMaxWidth, panelHeaderId, onToggle, }) {
+export function SplitPanelContentBottom({ closeBehavior, baseProps, isOpen, splitPanelRef, cappedSize, header, resizeHandle, children, appLayoutMaxWidth, panelHeaderId, ariaLabel, onToggle, hasCustomElements, }) {
     const isRefresh = useVisualRefresh();
     const isToolbar = useAppLayoutToolbarDesignEnabled();
     const { bottomOffset, leftOffset, rightOffset, disableContentPaddings, contentWrapperPaddings, reportHeaderHeight, headerHeight: headerBlockSize, animationDisabled, } = useSplitPanelContext();
@@ -35,12 +35,13 @@ export function SplitPanelContentBottom({ closeBehavior, baseProps, isOpen, spli
             [sharedStyles['with-motion-vertical']]: !animationDisabled,
             [testUtilStyles['open-position-bottom']]: isOpen,
             [styles['drawer-closed']]: !isOpen,
+            [styles['drawer-clickable']]: !hasCustomElements,
             [styles['drawer-mobile']]: isMobile,
             [styles['drawer-disable-content-paddings']]: disableContentPaddings,
             [styles.refresh]: isRefresh,
             [styles['with-toolbar']]: isToolbar,
             [styles.hidden]: closeBehavior === 'hide' && !isOpen,
-        }), onClick: () => !isOpen && onToggle(), style: {
+        }), onClick: () => !isOpen && !hasCustomElements && onToggle(), style: {
             insetBlockEnd: bottomOffset,
             insetInlineStart: leftOffset,
             insetInlineEnd: rightOffset,
@@ -53,7 +54,7 @@ export function SplitPanelContentBottom({ closeBehavior, baseProps, isOpen, spli
                         : undefined,
         }, ref: splitPanelRef }), closeBehavior === 'hide' && !isOpen ? null : (React.createElement(React.Fragment, null,
         isOpen && React.createElement("div", { className: styles['slider-wrapper-bottom'] }, resizeHandle),
-        React.createElement("div", { className: styles['drawer-content-bottom'], "aria-labelledby": panelHeaderId, role: "region" },
+        React.createElement("div", { className: styles['drawer-content-bottom'], "aria-labelledby": panelHeaderId, "aria-label": ariaLabel, role: "region" },
             React.createElement("div", { className: clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses), ref: headerRef }, header),
             React.createElement("div", { className: clsx(styles['content-bottom'], centeredMaxWidthClasses), "aria-hidden": !isOpen },
                 React.createElement("div", { className: clsx({ [styles['content-bottom-max-width']]: isRefresh }), style: appLayoutMaxWidth }, children)))))));

package/split-panel/bottom.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom.js","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps, SplitPanelProps } from './interfaces';\n\nimport sharedStyles from '../app-layout/resize/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface SplitPanelContentBottomProps extends SplitPanelContentProps {\n  appLayoutMaxWidth: React.CSSProperties | undefined;\n  closeBehavior: SplitPanelProps['closeBehavior'];\n}\n\nexport function SplitPanelContentBottom({\n  closeBehavior,\n  baseProps,\n  isOpen,\n  splitPanelRef,\n  cappedSize,\n  header,\n  resizeHandle,\n  children,\n  appLayoutMaxWidth,\n  panelHeaderId,\n  onToggle,\n}: SplitPanelContentBottomProps) {\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const {\n    bottomOffset,\n    leftOffset,\n    rightOffset,\n    disableContentPaddings,\n    contentWrapperPaddings,\n    reportHeaderHeight,\n    headerHeight: headerBlockSize,\n    animationDisabled,\n  } = useSplitPanelContext();\n  const isMobile = useMobile();\n\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  useResizeObserver(headerRef, entry => {\n    const visibleHeaderSize = closeBehavior === 'hide' && !isOpen ? 0 : entry.borderBoxHeight;\n    reportHeaderHeight(visibleHeaderSize);\n  });\n\n  useEffect(() => {\n    // report empty height when unmounting the panel\n    return () => reportHeaderHeight(0);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const centeredMaxWidthClasses = clsx({\n    [styles['pane-bottom-center-align']]: isRefresh,\n    [styles['pane-bottom-content-nav-padding']]: contentWrapperPaddings?.closedNav,\n    [styles['pane-bottom-content-tools-padding']]: contentWrapperPaddings?.closedTools,\n  });\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles['position-bottom'], testUtilStyles.root, {\n        [sharedStyles['with-motion-vertical']]: !animationDisabled,\n        [testUtilStyles['open-position-bottom']]: isOpen,\n        [styles['drawer-closed']]: !isOpen,\n        [styles['drawer-mobile']]: isMobile,\n        [styles['drawer-disable-content-paddings']]: disableContentPaddings,\n        [styles.refresh]: isRefresh,\n        [styles['with-toolbar']]: isToolbar,\n        [styles.hidden]: closeBehavior === 'hide' && !isOpen,\n      })}\n      onClick={() => !isOpen && onToggle()}\n      style={{\n        insetBlockEnd: bottomOffset,\n        insetInlineStart: leftOffset,\n        insetInlineEnd: rightOffset,\n        blockSize: isOpen\n          ? cappedSize\n          : closeBehavior === 'hide'\n            ? 0\n            : isToolbar && headerBlockSize !== undefined\n              ? `calc(${headerBlockSize}px + ${tokens.borderPanelTopWidth})`\n              : undefined,\n      }}\n      ref={splitPanelRef}\n    >\n      {closeBehavior === 'hide' && !isOpen ? null : (\n        <>\n          {isOpen && <div className={styles['slider-wrapper-bottom']}>{resizeHandle}</div>}\n          <div className={styles['drawer-content-bottom']} aria-labelledby={panelHeaderId} role=\"region\">\n            <div className={clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses)} ref={headerRef}>\n              {header}\n            </div>\n            <div className={clsx(styles['content-bottom'], centeredMaxWidthClasses)} aria-hidden={!isOpen}>\n              <div className={clsx({ [styles['content-bottom-max-width']]: isRefresh })} style={appLayoutMaxWidth}>\n                {children}\n              </div>\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"bottom.js","sourceRoot":"","sources":["../../../src/split-panel/bottom.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps, SplitPanelProps } from './interfaces';\n\nimport sharedStyles from '../app-layout/resize/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface SplitPanelContentBottomProps extends SplitPanelContentProps {\n  appLayoutMaxWidth: React.CSSProperties | undefined;\n  closeBehavior: SplitPanelProps['closeBehavior'];\n  hasCustomElements?: boolean;\n}\n\nexport function SplitPanelContentBottom({\n  closeBehavior,\n  baseProps,\n  isOpen,\n  splitPanelRef,\n  cappedSize,\n  header,\n  resizeHandle,\n  children,\n  appLayoutMaxWidth,\n  panelHeaderId,\n  ariaLabel,\n  onToggle,\n  hasCustomElements,\n}: SplitPanelContentBottomProps) {\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const {\n    bottomOffset,\n    leftOffset,\n    rightOffset,\n    disableContentPaddings,\n    contentWrapperPaddings,\n    reportHeaderHeight,\n    headerHeight: headerBlockSize,\n    animationDisabled,\n  } = useSplitPanelContext();\n  const isMobile = useMobile();\n\n  const headerRef = useRef<HTMLDivElement>(null);\n\n  useResizeObserver(headerRef, entry => {\n    const visibleHeaderSize = closeBehavior === 'hide' && !isOpen ? 0 : entry.borderBoxHeight;\n    reportHeaderHeight(visibleHeaderSize);\n  });\n\n  useEffect(() => {\n    // report empty height when unmounting the panel\n    return () => reportHeaderHeight(0);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const centeredMaxWidthClasses = clsx({\n    [styles['pane-bottom-center-align']]: isRefresh,\n    [styles['pane-bottom-content-nav-padding']]: contentWrapperPaddings?.closedNav,\n    [styles['pane-bottom-content-tools-padding']]: contentWrapperPaddings?.closedTools,\n  });\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles['position-bottom'], testUtilStyles.root, {\n        [sharedStyles['with-motion-vertical']]: !animationDisabled,\n        [testUtilStyles['open-position-bottom']]: isOpen,\n        [styles['drawer-closed']]: !isOpen,\n        [styles['drawer-clickable']]: !hasCustomElements,\n        [styles['drawer-mobile']]: isMobile,\n        [styles['drawer-disable-content-paddings']]: disableContentPaddings,\n        [styles.refresh]: isRefresh,\n        [styles['with-toolbar']]: isToolbar,\n        [styles.hidden]: closeBehavior === 'hide' && !isOpen,\n      })}\n      onClick={() => !isOpen && !hasCustomElements && onToggle()}\n      style={{\n        insetBlockEnd: bottomOffset,\n        insetInlineStart: leftOffset,\n        insetInlineEnd: rightOffset,\n        blockSize: isOpen\n          ? cappedSize\n          : closeBehavior === 'hide'\n            ? 0\n            : isToolbar && headerBlockSize !== undefined\n              ? `calc(${headerBlockSize}px + ${tokens.borderPanelTopWidth})`\n              : undefined,\n      }}\n      ref={splitPanelRef}\n    >\n      {closeBehavior === 'hide' && !isOpen ? null : (\n        <>\n          {isOpen && <div className={styles['slider-wrapper-bottom']}>{resizeHandle}</div>}\n          <div\n            className={styles['drawer-content-bottom']}\n            aria-labelledby={panelHeaderId}\n            aria-label={ariaLabel}\n            role=\"region\"\n          >\n            <div className={clsx(styles['pane-header-wrapper-bottom'], centeredMaxWidthClasses)} ref={headerRef}>\n              {header}\n            </div>\n            <div className={clsx(styles['content-bottom'], centeredMaxWidthClasses)} aria-hidden={!isOpen}>\n              <div className={clsx({ [styles['content-bottom-max-width']]: isRefresh })} style={appLayoutMaxWidth}>\n                {children}\n              </div>\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"]}

package/split-panel/implementation.d.ts

@@ -10,6 +10,11 @@ export declare function SplitPanelImplementation({
   hidePreferencesButton,
   closeBehavior,
   i18nStrings,
+  ariaLabel,
+  headerActions,
+  headerBefore,
+  headerDescription,
+  headerInfo,
   ...restProps
 }: SplitPanelImplementationProps): JSX.Element;
 export declare const createWidgetizedSplitPanel: (Loader?: typeof SplitPanelImplementation | undefined) => typeof SplitPanelImplementation;

package/split-panel/implementation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAC,eAAe,EAAE,uBAAuB,GAAG,eAAe,CAAC,GAClH,0BAA0B,CAAC;AAE7B,wBAAgB,wBAAwB,CAAC,EACvC,iBAAiB,EACjB,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,aAAa,EACb,WAAgB,EAChB,GAAG,SAAS,EACb,EAAE,6BAA6B,eAgO/B;AAED,eAAO,MAAM,0BAA0B,2FAAsD,CAAC"}
+{"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAO/C,MAAM,MAAM,6BAA6B,GAAG,YAAY,CAAC,eAAe,EAAE,uBAAuB,GAAG,eAAe,CAAC,GAClH,0BAA0B,CAAC;AAE7B,wBAAgB,wBAAwB,CAAC,EACvC,iBAAiB,EACjB,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,aAAa,EACb,WAAgB,EAChB,SAAS,EACT,aAAa,EACb,YAAY,EACZ,iBAAiB,EACjB,UAAU,EACV,GAAG,SAAS,EACb,EAAE,6BAA6B,eA4Q/B;AAED,eAAO,MAAM,0BAA0B,2FAAsD,CAAC"}

package/split-panel/implementation.js

@@ -3,7 +3,7 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
-import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';
 import { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';
 import { usePointerEvents } from '../app-layout/utils/use-pointer-events';
@@ -20,9 +20,12 @@ import { SplitPanelContentSide } from './side';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 export function SplitPanelImplementation(_a) {
-    var { __internalRootRef, header, children, hidePreferencesButton, closeBehavior, i18nStrings = {} } = _a, restProps = __rest(_a, ["__internalRootRef", "header", "children", "hidePreferencesButton", "closeBehavior", "i18nStrings"]);
+    var { __internalRootRef, header, children, hidePreferencesButton, closeBehavior, i18nStrings = {}, ariaLabel, headerActions, headerBefore, headerDescription, headerInfo } = _a, restProps = __rest(_a, ["__internalRootRef", "header", "children", "hidePreferencesButton", "closeBehavior", "i18nStrings", "ariaLabel", "headerActions", "headerBefore", "headerDescription", "headerInfo"]);
     const isRefresh = useVisualRefresh();
     const isToolbar = useAppLayoutToolbarDesignEnabled();
+    if (!header && !headerBefore) {
+        warnOnce('SplitPanel', 'You must provide either `header` or `headerBefore`.');
+    }
     const { position, topOffset, bottomOffset, rightOffset, contentWidthStyles, isOpen, isForcedPosition, onPreferencesChange, onResize, onToggle, size, relativeSize, setSplitPanelToggle, refs, animationDisabled, } = useSplitPanelContext();
     const baseProps = getBaseProps(restProps);
     const [isPreferencesOpen, setPreferencesOpen] = useState(false);
@@ -47,14 +50,30 @@ export function SplitPanelImplementation(_a) {
         [globalVars.stickyVerticalTopOffset]: topOffset,
         [globalVars.stickyVerticalBottomOffset]: bottomOffset,
     };
-    const panelHeaderId = useUniqueId('split-panel-header');
+    const panelHeaderUniqueId = useUniqueId('split-panel-header');
+    const panelHeaderId = ariaLabel ? undefined : panelHeaderUniqueId;
+    const showActions = headerActions && isOpen;
+    const showDescription = headerDescription && isOpen;
+    const hasCustomElements = !!headerActions || !!headerBefore || !!headerInfo;
     const wrappedHeader = (React.createElement("div", { className: clsx(styles.header, isToolbar && styles['with-toolbar']), style: appLayoutMaxWidth },
-        React.createElement("h2", { className: clsx(styles['header-text'], testUtilStyles['header-text']), id: panelHeaderId }, header),
-        React.createElement("div", { className: styles['header-actions'] },
-            !hidePreferencesButton && isOpen && (React.createElement(React.Fragment, null,
-                React.createElement(InternalButton, { className: testUtilStyles['preferences-button'], iconName: "settings", variant: "icon", onClick: () => setPreferencesOpen(true), formAction: "none", ariaLabel: i18nStrings.preferencesTitle, ref: refs.preferences }),
-                React.createElement("span", { className: styles.divider }))),
-            isOpen ? (React.createElement(InternalButton, { className: testUtilStyles['close-button'], iconName: isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close', variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18nStrings.closeButtonAriaLabel, ariaExpanded: isOpen })) : position === 'side' || closeBehavior === 'hide' ? null : (React.createElement(InternalButton, { className: testUtilStyles['open-button'], iconName: "angle-up", variant: "icon", formAction: "none", ariaLabel: i18nStrings.openButtonAriaLabel, ref: refs.toggle, ariaExpanded: isOpen })))));
+        React.createElement("div", { className: styles['header-main-row'] },
+            React.createElement("div", { className: styles['header-main-content'] },
+                React.createElement("div", { className: clsx(styles['header-tag-and-info'], showDescription && styles['with-description']) },
+                    React.createElement("h2", { className: clsx(styles['header-tag'], !!headerInfo && styles['with-info']), id: panelHeaderId },
+                        headerBefore && (React.createElement("div", { className: clsx(styles['header-before-slot'], testUtilStyles['header-before'], !!header && styles['with-header-text']) }, headerBefore)),
+                        !!header && React.createElement("div", { className: clsx(styles['header-text'], testUtilStyles['header-text']) }, header)),
+                    headerInfo && (React.createElement("span", { className: clsx(styles['header-info-slot'], testUtilStyles['header-info']) }, headerInfo))),
+                showActions && (React.createElement("div", { className: clsx(styles['header-actions-slot'], testUtilStyles['header-actions']) }, headerActions))),
+            React.createElement("div", { className: styles['header-buttons'] },
+                !hidePreferencesButton && isOpen && (React.createElement(React.Fragment, null,
+                    React.createElement(InternalButton, { className: testUtilStyles['preferences-button'], iconName: "settings", variant: "icon", onClick: () => setPreferencesOpen(true), formAction: "none", ariaLabel: i18nStrings.preferencesTitle, ref: refs.preferences }),
+                    React.createElement("span", { className: styles.divider }))),
+                isOpen ? (React.createElement(InternalButton, { className: testUtilStyles['close-button'], iconName: isRefresh && closeBehavior === 'collapse'
+                        ? position === 'side'
+                            ? 'angle-right'
+                            : 'angle-down'
+                        : 'close', variant: "icon", onClick: onToggle, formAction: "none", ariaLabel: i18nStrings.closeButtonAriaLabel, ariaExpanded: isOpen })) : position === 'side' || closeBehavior === 'hide' ? null : (React.createElement(InternalButton, { className: testUtilStyles['open-button'], iconName: "angle-up", variant: "icon", formAction: "none", ariaLabel: i18nStrings.openButtonAriaLabel, ref: refs.toggle, ariaExpanded: isOpen, onClick: hasCustomElements ? onToggle : undefined })))),
+        showDescription && (React.createElement("p", { className: clsx(styles['header-description'], testUtilStyles['header-description']) }, headerDescription))));
     const resizeHandle = (React.createElement(PanelResizeHandle, { ref: refs.slider, className: testUtilStyles.slider, tooltipText: i18nStrings.resizeHandleTooltipText, ariaLabel: i18nStrings.resizeHandleAriaLabel, 
         // Allows us to use the logical left/right keys to move the slider left/right,
         // but match aria keyboard behavior of using left/right to decrease/increase
@@ -94,8 +113,8 @@ export function SplitPanelImplementation(_a) {
         return React.createElement(React.Fragment, null);
     }
     return (React.createElement(React.Fragment, null,
-        position === 'side' && (React.createElement(SplitPanelContentSide, { style: contentStyle, resizeHandle: resizeHandle, baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle: onToggle, openButtonAriaLabel: openButtonAriaLabel, toggleRef: refs.toggle, header: wrappedHeader, panelHeaderId: panelHeaderId, closeBehavior: closeBehavior }, children)),
-        position === 'bottom' && (React.createElement(SplitPanelContentBottom, { style: contentStyle, resizeHandle: resizeHandle, baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle: onToggle, header: wrappedHeader, panelHeaderId: panelHeaderId, appLayoutMaxWidth: appLayoutMaxWidth, closeBehavior: closeBehavior }, children)),
+        position === 'side' && (React.createElement(SplitPanelContentSide, { style: contentStyle, resizeHandle: resizeHandle, baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle: onToggle, openButtonAriaLabel: openButtonAriaLabel, toggleRef: refs.toggle, header: wrappedHeader, panelHeaderId: panelHeaderId, ariaLabel: ariaLabel, closeBehavior: closeBehavior }, children)),
+        position === 'bottom' && (React.createElement(SplitPanelContentBottom, { style: contentStyle, resizeHandle: resizeHandle, baseProps: baseProps, isOpen: isOpen, splitPanelRef: mergedRef, cappedSize: size, onToggle: onToggle, header: wrappedHeader, panelHeaderId: panelHeaderId, appLayoutMaxWidth: appLayoutMaxWidth, ariaLabel: ariaLabel, closeBehavior: closeBehavior, hasCustomElements: hasCustomElements }, children)),
         isPreferencesOpen && (React.createElement(PreferencesModal, { visible: true, preferences: { position }, disabledSidePosition: position === 'bottom' && isForcedPosition, isRefresh: isRefresh, i18nStrings: {
                 header: i18nStrings.preferencesTitle,
                 confirm: i18nStrings.preferencesConfirm,

package/split-panel/implementation.js.map

@@ -1 +1 @@
-{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport PanelResizeHandle from '../internal/components/panel-resize-handle';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport globalVars from '../internal/styles/global-vars';\nimport { SomeRequired } from '../internal/types';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SplitPanelContentBottom } from './bottom';\nimport { SplitPanelProps } from './interfaces';\nimport PreferencesModal from './preferences-modal';\nimport { SplitPanelContentSide } from './side';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport type SplitPanelImplementationProps = SomeRequired<SplitPanelProps, 'hidePreferencesButton' | 'closeBehavior'> &\n  InternalBaseComponentProps;\n\nexport function SplitPanelImplementation({\n  __internalRootRef,\n  header,\n  children,\n  hidePreferencesButton,\n  closeBehavior,\n  i18nStrings = {},\n  ...restProps\n}: SplitPanelImplementationProps) {\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n\n  const {\n    position,\n    topOffset,\n    bottomOffset,\n    rightOffset,\n    contentWidthStyles,\n    isOpen,\n    isForcedPosition,\n    onPreferencesChange,\n    onResize,\n    onToggle,\n    size,\n    relativeSize,\n    setSplitPanelToggle,\n    refs,\n    animationDisabled,\n  } = useSplitPanelContext();\n  const baseProps = getBaseProps(restProps);\n  const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n  const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n  const openButtonAriaLabel = i18nStrings.openButtonAriaLabel;\n  useEffect(() => {\n    setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n\n    return () => {\n      setSplitPanelToggle({ displayed: false, ariaLabel: undefined });\n    };\n  }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n  const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position,\n    panelRef: splitPanelRefObject,\n    handleRef: refs.slider,\n    onResize,\n  };\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const { onKeyDown, onDirectionClick } = useKeyboardEvents(sizeControlProps);\n\n  const contentStyle = {\n    [globalVars.stickyVerticalTopOffset]: topOffset,\n    [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n  };\n\n  const panelHeaderId = useUniqueId('split-panel-header');\n\n  const wrappedHeader = (\n    <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>\n      <h2 className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>\n        {header}\n      </h2>\n      <div className={styles['header-actions']}>\n        {!hidePreferencesButton && isOpen && (\n          <>\n            <InternalButton\n              className={testUtilStyles['preferences-button']}\n              iconName=\"settings\"\n              variant=\"icon\"\n              onClick={() => setPreferencesOpen(true)}\n              formAction=\"none\"\n              ariaLabel={i18nStrings.preferencesTitle}\n              ref={refs.preferences}\n            />\n            <span className={styles.divider} />\n          </>\n        )}\n\n        {isOpen ? (\n          <InternalButton\n            className={testUtilStyles['close-button']}\n            iconName={\n              isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close'\n            }\n            variant=\"icon\"\n            onClick={onToggle}\n            formAction=\"none\"\n            ariaLabel={i18nStrings.closeButtonAriaLabel}\n            ariaExpanded={isOpen}\n          />\n        ) : position === 'side' || closeBehavior === 'hide' ? null : (\n          <InternalButton\n            className={testUtilStyles['open-button']}\n            iconName=\"angle-up\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={i18nStrings.openButtonAriaLabel}\n            ref={refs.toggle}\n            ariaExpanded={isOpen}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={refs.slider}\n      className={testUtilStyles.slider}\n      tooltipText={i18nStrings.resizeHandleTooltipText}\n      ariaLabel={i18nStrings.resizeHandleAriaLabel}\n      // Allows us to use the logical left/right keys to move the slider left/right,\n      // but match aria keyboard behavior of using left/right to decrease/increase\n      // the slider value.\n      ariaValuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n      position={position}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n      onDirectionClick={onDirectionClick}\n    />\n  );\n\n  /*\n    This effect forces the browser to recalculate the layout\n    whenever the split panel might have moved.\n\n    This is needed as a workaround for a bug in Safari, which does\n    not automatically calculate the new position of the split panel\n    _content_ when the split panel moves.\n  */\n  useLayoutEffect(() => {\n    const root = splitPanelRefObject.current;\n\n    if (root) {\n      const property = 'transform';\n      const temporaryValue = 'translateZ(0)';\n\n      const valueBefore = root.style[property];\n      root.style[property] = temporaryValue;\n\n      // This line forces the browser to recalculate the layout\n      void root.offsetHeight;\n\n      root.style[property] = valueBefore;\n    }\n  }, [rightOffset, __internalRootRef]);\n\n  const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n  if (closeBehavior === 'hide' && !isOpen && (animationDisabled || !isRefresh)) {\n    return <></>;\n  }\n\n  /**\n   * The AppLayout factor moved the circular buttons out of the\n   * SplitPanel and into the Tools component. This conditional\n   * is still needed for the early return to prevent execution\n   * of the following code.\n   */\n  if (isRefresh && !isToolbar && !isOpen && position === 'side') {\n    return <></>;\n  }\n\n  return (\n    <>\n      {position === 'side' && (\n        <SplitPanelContentSide\n          style={contentStyle}\n          resizeHandle={resizeHandle}\n          baseProps={baseProps}\n          isOpen={isOpen}\n          splitPanelRef={mergedRef}\n          cappedSize={size}\n          onToggle={onToggle}\n          openButtonAriaLabel={openButtonAriaLabel}\n          toggleRef={refs.toggle}\n          header={wrappedHeader}\n          panelHeaderId={panelHeaderId}\n          closeBehavior={closeBehavior}\n        >\n          {children}\n        </SplitPanelContentSide>\n      )}\n\n      {position === 'bottom' && (\n        <SplitPanelContentBottom\n          style={contentStyle}\n          resizeHandle={resizeHandle}\n          baseProps={baseProps}\n          isOpen={isOpen}\n          splitPanelRef={mergedRef}\n          cappedSize={size}\n          onToggle={onToggle}\n          header={wrappedHeader}\n          panelHeaderId={panelHeaderId}\n          appLayoutMaxWidth={appLayoutMaxWidth}\n          closeBehavior={closeBehavior}\n        >\n          {children}\n        </SplitPanelContentBottom>\n      )}\n      {isPreferencesOpen && (\n        <PreferencesModal\n          visible={true}\n          preferences={{ position }}\n          disabledSidePosition={position === 'bottom' && isForcedPosition}\n          isRefresh={isRefresh}\n          i18nStrings={{\n            header: i18nStrings.preferencesTitle,\n            confirm: i18nStrings.preferencesConfirm,\n            cancel: i18nStrings.preferencesCancel,\n            close: i18nStrings.preferencesCloseAriaLabel,\n            positionLabel: i18nStrings.preferencesPositionLabel,\n            positionDescription: i18nStrings.preferencesPositionDescription,\n            positionBottom: i18nStrings.preferencesPositionBottom,\n            positionSide: i18nStrings.preferencesPositionSide,\n          }}\n          onConfirm={preferences => {\n            onPreferencesChange({ ...preferences });\n            setPreferencesOpen(false);\n          }}\n          onDismiss={() => {\n            setPreferencesOpen(false);\n          }}\n        />\n      )}\n    </>\n  );\n}\n\nexport const createWidgetizedSplitPanel = createWidgetizedComponent(SplitPanelImplementation);\n"]}
+{"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/split-panel/implementation.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { SizeControlProps } from '../app-layout/utils/interfaces';\nimport { useKeyboardEvents } from '../app-layout/utils/use-keyboard-events';\nimport { usePointerEvents } from '../app-layout/utils/use-pointer-events';\nimport { InternalButton } from '../button/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport PanelResizeHandle from '../internal/components/panel-resize-handle';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport globalVars from '../internal/styles/global-vars';\nimport { SomeRequired } from '../internal/types';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SplitPanelContentBottom } from './bottom';\nimport { SplitPanelProps } from './interfaces';\nimport PreferencesModal from './preferences-modal';\nimport { SplitPanelContentSide } from './side';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport type SplitPanelImplementationProps = SomeRequired<SplitPanelProps, 'hidePreferencesButton' | 'closeBehavior'> &\n  InternalBaseComponentProps;\n\nexport function SplitPanelImplementation({\n  __internalRootRef,\n  header,\n  children,\n  hidePreferencesButton,\n  closeBehavior,\n  i18nStrings = {},\n  ariaLabel,\n  headerActions,\n  headerBefore,\n  headerDescription,\n  headerInfo,\n  ...restProps\n}: SplitPanelImplementationProps) {\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n\n  if (!header && !headerBefore) {\n    warnOnce('SplitPanel', 'You must provide either `header` or `headerBefore`.');\n  }\n\n  const {\n    position,\n    topOffset,\n    bottomOffset,\n    rightOffset,\n    contentWidthStyles,\n    isOpen,\n    isForcedPosition,\n    onPreferencesChange,\n    onResize,\n    onToggle,\n    size,\n    relativeSize,\n    setSplitPanelToggle,\n    refs,\n    animationDisabled,\n  } = useSplitPanelContext();\n  const baseProps = getBaseProps(restProps);\n  const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);\n\n  const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;\n\n  const openButtonAriaLabel = i18nStrings.openButtonAriaLabel;\n  useEffect(() => {\n    setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });\n\n    return () => {\n      setSplitPanelToggle({ displayed: false, ariaLabel: undefined });\n    };\n  }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);\n\n  const splitPanelRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position,\n    panelRef: splitPanelRefObject,\n    handleRef: refs.slider,\n    onResize,\n  };\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const { onKeyDown, onDirectionClick } = useKeyboardEvents(sizeControlProps);\n\n  const contentStyle = {\n    [globalVars.stickyVerticalTopOffset]: topOffset,\n    [globalVars.stickyVerticalBottomOffset]: bottomOffset,\n  };\n\n  const panelHeaderUniqueId = useUniqueId('split-panel-header');\n  const panelHeaderId = ariaLabel ? undefined : panelHeaderUniqueId;\n\n  const showActions = headerActions && isOpen;\n  const showDescription = headerDescription && isOpen;\n  const hasCustomElements = !!headerActions || !!headerBefore || !!headerInfo;\n\n  const wrappedHeader = (\n    <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>\n      <div className={styles['header-main-row']}>\n        <div className={styles['header-main-content']}>\n          <div className={clsx(styles['header-tag-and-info'], showDescription && styles['with-description'])}>\n            <h2 className={clsx(styles['header-tag'], !!headerInfo && styles['with-info'])} id={panelHeaderId}>\n              {headerBefore && (\n                <div\n                  className={clsx(\n                    styles['header-before-slot'],\n                    testUtilStyles['header-before'],\n                    !!header && styles['with-header-text']\n                  )}\n                >\n                  {headerBefore}\n                </div>\n              )}\n              {!!header && <div className={clsx(styles['header-text'], testUtilStyles['header-text'])}>{header}</div>}\n            </h2>\n            {headerInfo && (\n              <span className={clsx(styles['header-info-slot'], testUtilStyles['header-info'])}>{headerInfo}</span>\n            )}\n          </div>\n          {showActions && (\n            <div className={clsx(styles['header-actions-slot'], testUtilStyles['header-actions'])}>{headerActions}</div>\n          )}\n        </div>\n        <div className={styles['header-buttons']}>\n          {!hidePreferencesButton && isOpen && (\n            <>\n              <InternalButton\n                className={testUtilStyles['preferences-button']}\n                iconName=\"settings\"\n                variant=\"icon\"\n                onClick={() => setPreferencesOpen(true)}\n                formAction=\"none\"\n                ariaLabel={i18nStrings.preferencesTitle}\n                ref={refs.preferences}\n              />\n              <span className={styles.divider} />\n            </>\n          )}\n\n          {isOpen ? (\n            <InternalButton\n              className={testUtilStyles['close-button']}\n              iconName={\n                isRefresh && closeBehavior === 'collapse'\n                  ? position === 'side'\n                    ? 'angle-right'\n                    : 'angle-down'\n                  : 'close'\n              }\n              variant=\"icon\"\n              onClick={onToggle}\n              formAction=\"none\"\n              ariaLabel={i18nStrings.closeButtonAriaLabel}\n              ariaExpanded={isOpen}\n            />\n          ) : position === 'side' || closeBehavior === 'hide' ? null : (\n            <InternalButton\n              className={testUtilStyles['open-button']}\n              iconName=\"angle-up\"\n              variant=\"icon\"\n              formAction=\"none\"\n              ariaLabel={i18nStrings.openButtonAriaLabel}\n              ref={refs.toggle}\n              ariaExpanded={isOpen}\n              onClick={hasCustomElements ? onToggle : undefined}\n            />\n          )}\n        </div>\n      </div>\n\n      {showDescription && (\n        <p className={clsx(styles['header-description'], testUtilStyles['header-description'])}>{headerDescription}</p>\n      )}\n    </div>\n  );\n\n  const resizeHandle = (\n    <PanelResizeHandle\n      ref={refs.slider}\n      className={testUtilStyles.slider}\n      tooltipText={i18nStrings.resizeHandleTooltipText}\n      ariaLabel={i18nStrings.resizeHandleAriaLabel}\n      // Allows us to use the logical left/right keys to move the slider left/right,\n      // but match aria keyboard behavior of using left/right to decrease/increase\n      // the slider value.\n      ariaValuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}\n      position={position}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n      onDirectionClick={onDirectionClick}\n    />\n  );\n\n  /*\n    This effect forces the browser to recalculate the layout\n    whenever the split panel might have moved.\n\n    This is needed as a workaround for a bug in Safari, which does\n    not automatically calculate the new position of the split panel\n    _content_ when the split panel moves.\n  */\n  useLayoutEffect(() => {\n    const root = splitPanelRefObject.current;\n\n    if (root) {\n      const property = 'transform';\n      const temporaryValue = 'translateZ(0)';\n\n      const valueBefore = root.style[property];\n      root.style[property] = temporaryValue;\n\n      // This line forces the browser to recalculate the layout\n      void root.offsetHeight;\n\n      root.style[property] = valueBefore;\n    }\n  }, [rightOffset, __internalRootRef]);\n\n  const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);\n\n  if (closeBehavior === 'hide' && !isOpen && (animationDisabled || !isRefresh)) {\n    return <></>;\n  }\n\n  /**\n   * The AppLayout factor moved the circular buttons out of the\n   * SplitPanel and into the Tools component. This conditional\n   * is still needed for the early return to prevent execution\n   * of the following code.\n   */\n  if (isRefresh && !isToolbar && !isOpen && position === 'side') {\n    return <></>;\n  }\n\n  return (\n    <>\n      {position === 'side' && (\n        <SplitPanelContentSide\n          style={contentStyle}\n          resizeHandle={resizeHandle}\n          baseProps={baseProps}\n          isOpen={isOpen}\n          splitPanelRef={mergedRef}\n          cappedSize={size}\n          onToggle={onToggle}\n          openButtonAriaLabel={openButtonAriaLabel}\n          toggleRef={refs.toggle}\n          header={wrappedHeader}\n          panelHeaderId={panelHeaderId}\n          ariaLabel={ariaLabel}\n          closeBehavior={closeBehavior}\n        >\n          {children}\n        </SplitPanelContentSide>\n      )}\n\n      {position === 'bottom' && (\n        <SplitPanelContentBottom\n          style={contentStyle}\n          resizeHandle={resizeHandle}\n          baseProps={baseProps}\n          isOpen={isOpen}\n          splitPanelRef={mergedRef}\n          cappedSize={size}\n          onToggle={onToggle}\n          header={wrappedHeader}\n          panelHeaderId={panelHeaderId}\n          appLayoutMaxWidth={appLayoutMaxWidth}\n          ariaLabel={ariaLabel}\n          closeBehavior={closeBehavior}\n          hasCustomElements={hasCustomElements}\n        >\n          {children}\n        </SplitPanelContentBottom>\n      )}\n      {isPreferencesOpen && (\n        <PreferencesModal\n          visible={true}\n          preferences={{ position }}\n          disabledSidePosition={position === 'bottom' && isForcedPosition}\n          isRefresh={isRefresh}\n          i18nStrings={{\n            header: i18nStrings.preferencesTitle,\n            confirm: i18nStrings.preferencesConfirm,\n            cancel: i18nStrings.preferencesCancel,\n            close: i18nStrings.preferencesCloseAriaLabel,\n            positionLabel: i18nStrings.preferencesPositionLabel,\n            positionDescription: i18nStrings.preferencesPositionDescription,\n            positionBottom: i18nStrings.preferencesPositionBottom,\n            positionSide: i18nStrings.preferencesPositionSide,\n          }}\n          onConfirm={preferences => {\n            onPreferencesChange({ ...preferences });\n            setPreferencesOpen(false);\n          }}\n          onDismiss={() => {\n            setPreferencesOpen(false);\n          }}\n        />\n      )}\n    </>\n  );\n}\n\nexport const createWidgetizedSplitPanel = createWidgetizedComponent(SplitPanelImplementation);\n"]}

package/split-panel/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split-panel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,qBAA6B,EAC7B,aAA0B,EAC1B,WAAgB,EAChB,GAAG,SAAS,EACb,EAAE,eAAe,eAqCjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/split-panel/index.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,qBAA6B,EAC7B,aAA0B,EAC1B,WAAgB,EAChB,GAAG,SAAS,EACb,EAAE,eAAe,eA2CjB"}

package/split-panel/index.js

@@ -11,6 +11,12 @@ export default function SplitPanel(_a) {
     var { hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings = {} } = _a, restProps = __rest(_a, ["hidePreferencesButton", "closeBehavior", "i18nStrings"]);
     const { __internalRootRef } = useBaseComponent('SplitPanel', {
         props: { closeBehavior, hidePreferencesButton },
+        metadata: {
+            hasHeaderActions: Boolean(restProps.headerActions),
+            hasHeaderDescription: Boolean(restProps.headerDescription),
+            hasHeaderInfo: Boolean(restProps.headerInfo),
+            hasHeaderBefore: Boolean(restProps.headerBefore),
+        },
     });
     const i18n = useInternalI18n('split-panel');
     const i18nModal = useInternalI18n('modal');

package/split-panel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split-panel/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAKjB;QALiB,EACjC,qBAAqB,GAAG,KAAK,EAC7B,aAAa,GAAG,UAAU,EAC1B,WAAW,GAAG,EAAE,OAEA,EADb,SAAS,cAJqB,yDAKlC,CADa;IAEZ,MAAM,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,CAAC,YAAY,EAAE;QAC3D,KAAK,EAAE,EAAE,aAAa,EAAE,qBAAqB,EAAE;KAChD,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,eAAe,CAAC,aAAa,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IAE3C,OAAO,CACL,oBAAC,kBAAkB,oBACb,SAAS,IACb,iBAAiB,EAAE,iBAAiB,EACpC,qBAAqB,EAAE,qBAAqB,EAC5C,aAAa,EAAE,aAAa,EAC5B,WAAW,kCACN,WAAW,KACd,oBAAoB,EAAE,IAAI,CAAC,kCAAkC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,oBAAoB,CAAC,EACjG,mBAAmB,EAAE,IAAI,CAAC,iCAAiC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,CAAC,EAC9F,qBAAqB,EAAE,IAAI,CAAC,mCAAmC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,qBAAqB,CAAC,EACpG,uBAAuB,EAAE,IAAI,CAAC,qCAAqC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,CAAC,EAC1G,gBAAgB,EAAE,IAAI,CAAC,8BAA8B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,EACrF,kBAAkB,EAAE,IAAI,CAAC,gCAAgC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,kBAAkB,CAAC,EAC3F,iBAAiB,EAAE,IAAI,CAAC,+BAA+B,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAC,EACxF,yBAAyB,EACvB,SAAS,CAAC,gBAAgB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CAAC,KAAI,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,iBAAiB,CAAA,EACvG,wBAAwB,EAAE,IAAI,CAAC,sCAAsC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CAAC,EAC7G,8BAA8B,EAAE,IAAI,CAClC,4CAA4C,EAC5C,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAC5C,EACD,yBAAyB,EAAE,IAAI,CAC7B,uCAAuC,EACvC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB,CACvC,EACD,uBAAuB,EAAE,IAAI,CAAC,qCAAqC,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,uBAAuB,CAAC,OAE5G,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,UAAU,EAAE,YAAY,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { useInternalI18n } from '../i18n/context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { SplitPanelProps } from './interfaces';\nimport { SplitPanelInternal } from './internal';\n\nexport { SplitPanelProps };\n\nexport default function SplitPanel({\n  hidePreferencesButton = false,\n  closeBehavior = 'collapse',\n  i18nStrings = {},\n  ...restProps\n}: SplitPanelProps) {\n  const { __internalRootRef } = useBaseComponent('SplitPanel', {\n    props: { closeBehavior, hidePreferencesButton },\n  });\n  const i18n = useInternalI18n('split-panel');\n  const i18nModal = useInternalI18n('modal');\n\n  return (\n    <SplitPanelInternal\n      {...restProps}\n      __internalRootRef={__internalRootRef}\n      hidePreferencesButton={hidePreferencesButton}\n      closeBehavior={closeBehavior}\n      i18nStrings={{\n        ...i18nStrings,\n        closeButtonAriaLabel: i18n('i18nStrings.closeButtonAriaLabel', i18nStrings?.closeButtonAriaLabel),\n        openButtonAriaLabel: i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel),\n        resizeHandleAriaLabel: i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel),\n        resizeHandleTooltipText: i18n('i18nStrings.resizeHandleTooltipText', i18nStrings?.resizeHandleTooltipText),\n        preferencesTitle: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),\n        preferencesConfirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),\n        preferencesCancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),\n        preferencesCloseAriaLabel:\n          i18nModal('closeAriaLabel', i18nStrings?.preferencesCloseAriaLabel) || i18nStrings?.preferencesCancel,\n        preferencesPositionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),\n        preferencesPositionDescription: i18n(\n          'i18nStrings.preferencesPositionDescription',\n          i18nStrings?.preferencesPositionDescription\n        ),\n        preferencesPositionBottom: i18n(\n          'i18nStrings.preferencesPositionBottom',\n          i18nStrings?.preferencesPositionBottom\n        ),\n        preferencesPositionSide: i18n('i18nStrings.preferencesPositionSide', i18nStrings?.preferencesPositionSide),\n      }}\n    />\n  );\n}\n\napplyDisplayName(SplitPanel, 'SplitPanel');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/split-panel/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\n'use client';\nimport React from 'react';\n\nimport { useInternalI18n } from '../i18n/context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { SplitPanelProps } from './interfaces';\nimport { SplitPanelInternal } from './internal';\n\nexport { SplitPanelProps };\n\nexport default function SplitPanel({\n  hidePreferencesButton = false,\n  closeBehavior = 'collapse',\n  i18nStrings = {},\n  ...restProps\n}: SplitPanelProps) {\n  const { __internalRootRef } = useBaseComponent('SplitPanel', {\n    props: { closeBehavior, hidePreferencesButton },\n    metadata: {\n      hasHeaderActions: Boolean(restProps.headerActions),\n      hasHeaderDescription: Boolean(restProps.headerDescription),\n      hasHeaderInfo: Boolean(restProps.headerInfo),\n      hasHeaderBefore: Boolean(restProps.headerBefore),\n    },\n  });\n  const i18n = useInternalI18n('split-panel');\n  const i18nModal = useInternalI18n('modal');\n\n  return (\n    <SplitPanelInternal\n      {...restProps}\n      __internalRootRef={__internalRootRef}\n      hidePreferencesButton={hidePreferencesButton}\n      closeBehavior={closeBehavior}\n      i18nStrings={{\n        ...i18nStrings,\n        closeButtonAriaLabel: i18n('i18nStrings.closeButtonAriaLabel', i18nStrings?.closeButtonAriaLabel),\n        openButtonAriaLabel: i18n('i18nStrings.openButtonAriaLabel', i18nStrings?.openButtonAriaLabel),\n        resizeHandleAriaLabel: i18n('i18nStrings.resizeHandleAriaLabel', i18nStrings?.resizeHandleAriaLabel),\n        resizeHandleTooltipText: i18n('i18nStrings.resizeHandleTooltipText', i18nStrings?.resizeHandleTooltipText),\n        preferencesTitle: i18n('i18nStrings.preferencesTitle', i18nStrings?.preferencesTitle),\n        preferencesConfirm: i18n('i18nStrings.preferencesConfirm', i18nStrings?.preferencesConfirm),\n        preferencesCancel: i18n('i18nStrings.preferencesCancel', i18nStrings?.preferencesCancel),\n        preferencesCloseAriaLabel:\n          i18nModal('closeAriaLabel', i18nStrings?.preferencesCloseAriaLabel) || i18nStrings?.preferencesCancel,\n        preferencesPositionLabel: i18n('i18nStrings.preferencesPositionLabel', i18nStrings?.preferencesPositionLabel),\n        preferencesPositionDescription: i18n(\n          'i18nStrings.preferencesPositionDescription',\n          i18nStrings?.preferencesPositionDescription\n        ),\n        preferencesPositionBottom: i18n(\n          'i18nStrings.preferencesPositionBottom',\n          i18nStrings?.preferencesPositionBottom\n        ),\n        preferencesPositionSide: i18n('i18nStrings.preferencesPositionSide', i18nStrings?.preferencesPositionSide),\n      }}\n    />\n  );\n}\n\napplyDisplayName(SplitPanel, 'SplitPanel');\n"]}

package/split-panel/interfaces.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { BaseComponentProps } from '../internal/base-component';
 export interface SplitPanelProps extends BaseComponentProps {
   /**
-   * Header of the split panel.
+   * Header text of the split panel.
    */
-  header: string;
+  header?: string;
   children: React.ReactNode;
   /**
    * Determines whether the split panel collapses or hides completely when closed.
@@ -29,6 +29,26 @@ export interface SplitPanelProps extends BaseComponentProps {
    * @i18n
    */
   i18nStrings?: SplitPanelProps.I18nStrings;
+  /**
+   * ARIA label for the panel. Use this if the value passed in the `header` property is not descriptive as a label for the panel.
+   */
+  ariaLabel?: string;
+  /**
+   * Actions for the header.
+   */
+  headerActions?: React.ReactNode;
+  /**
+   * Supplementary text below the heading.
+   */
+  headerDescription?: React.ReactNode;
+  /**
+   * The area next to the heading, used to display an Info link.
+   */
+  headerInfo?: React.ReactNode;
+  /**
+   * Content displayed before the header text.
+   */
+  headerBefore?: React.ReactNode;
 }
 export declare namespace SplitPanelProps {
   interface I18nStrings {
@@ -52,7 +72,8 @@ export interface SplitPanelContentProps {
   isOpen?: boolean;
   splitPanelRef?: React.Ref<any>;
   cappedSize: number;
-  panelHeaderId: string;
+  panelHeaderId?: string;
+  ariaLabel?: string;
   resizeHandle: React.ReactNode;
   header: React.ReactNode;
   children: React.ReactNode;

package/split-panel/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/split-panel/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;CAC3C;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,WAAW;QAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,wBAAwB,CAAC,EAAE,MAAM,CAAC;QAClC,8BAA8B,CAAC,EAAE,MAAM,CAAC;QACxC,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;QACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,yBAAyB,CAAC,EAAE,MAAM,CAAC;QACnC,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;KAClC;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/split-panel/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpC;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;;;;;;;;;OAaG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC;IAE1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEhC;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,WAAW;QAC1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,wBAAwB,CAAC,EAAE,MAAM,CAAC;QAClC,8BAA8B,CAAC,EAAE,MAAM,CAAC;QACxC,uBAAuB,CAAC,EAAE,MAAM,CAAC;QACjC,yBAAyB,CAAC,EAAE,MAAM,CAAC;QACnC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,yBAAyB,CAAC,EAAE,MAAM,CAAC;QACnC,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,uBAAuB,CAAC,EAAE,MAAM,CAAC;KAClC;CACF;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,SAAS,EAAE,kBAAkB,CAAC;IAC9B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/split-panel/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/split-panel/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\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface SplitPanelProps extends BaseComponentProps {\n  /**\n   * Header of the split panel.\n   */\n  header: string;\n  children: React.ReactNode;\n  /**\n   * Determines whether the split panel collapses or hides completely when closed.\n   */\n  closeBehavior?: 'collapse' | 'hide';\n  /**\n   * When set to `true`, the preferences button is not displayed.\n   */\n  hidePreferencesButton?: boolean;\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `closeButtonAriaLabel` - The text of the panel close button aria label.\n   * - `openButtonAriaLabel` - The text of the panel open button aria label.\n   * - `preferencesTitle` - The text of the preferences modal header.\n   * - `preferencesPositionLabel` - The text of the position preference label.\n   * - `preferencesPositionDescription` - The text of the position preference description.\n   * - `preferencesPositionSide` - The text of the side position preference label.\n   * - `preferencesPositionBottom` - The text of the bottom position preference label.\n   * - `preferencesConfirm` - The text of the preference modal confirm button.\n   * - `preferencesCancel` - The text of the preference modal cancel button.\n   * - `resizeHandleAriaLabel` - The label of the resize handle aria label.\n   * @i18n\n   */\n  i18nStrings?: SplitPanelProps.I18nStrings;\n}\n\nexport namespace SplitPanelProps {\n  export interface I18nStrings {\n    closeButtonAriaLabel?: string;\n    openButtonAriaLabel?: string;\n    preferencesTitle?: string;\n    preferencesPositionLabel?: string;\n    preferencesPositionDescription?: string;\n    preferencesPositionSide?: string;\n    preferencesPositionBottom?: string;\n    preferencesConfirm?: string;\n    preferencesCancel?: string;\n    preferencesCloseAriaLabel?: string;\n    resizeHandleAriaLabel?: string;\n    resizeHandleTooltipText?: string;\n  }\n}\n\nexport interface SplitPanelContentProps {\n  style: React.CSSProperties;\n  baseProps: BaseComponentProps;\n  isOpen?: boolean;\n  splitPanelRef?: React.Ref<any>;\n  cappedSize: number;\n  panelHeaderId: string;\n  resizeHandle: React.ReactNode;\n  header: React.ReactNode;\n  children: React.ReactNode;\n  onToggle: () => void;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/split-panel/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\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface SplitPanelProps extends BaseComponentProps {\n  /**\n   * Header text of the split panel.\n   */\n  header?: string;\n  children: React.ReactNode;\n  /**\n   * Determines whether the split panel collapses or hides completely when closed.\n   */\n  closeBehavior?: 'collapse' | 'hide';\n  /**\n   * When set to `true`, the preferences button is not displayed.\n   */\n  hidePreferencesButton?: boolean;\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * - `closeButtonAriaLabel` - The text of the panel close button aria label.\n   * - `openButtonAriaLabel` - The text of the panel open button aria label.\n   * - `preferencesTitle` - The text of the preferences modal header.\n   * - `preferencesPositionLabel` - The text of the position preference label.\n   * - `preferencesPositionDescription` - The text of the position preference description.\n   * - `preferencesPositionSide` - The text of the side position preference label.\n   * - `preferencesPositionBottom` - The text of the bottom position preference label.\n   * - `preferencesConfirm` - The text of the preference modal confirm button.\n   * - `preferencesCancel` - The text of the preference modal cancel button.\n   * - `resizeHandleAriaLabel` - The label of the resize handle aria label.\n   * @i18n\n   */\n  i18nStrings?: SplitPanelProps.I18nStrings;\n\n  /**\n   * ARIA label for the panel. Use this if the value passed in the `header` property is not descriptive as a label for the panel.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Actions for the header.\n   */\n  headerActions?: React.ReactNode;\n\n  /**\n   * Supplementary text below the heading.\n   */\n  headerDescription?: React.ReactNode;\n\n  /**\n   * The area next to the heading, used to display an Info link.\n   */\n  headerInfo?: React.ReactNode;\n\n  /**\n   * Content displayed before the header text.\n   */\n  headerBefore?: React.ReactNode;\n}\n\nexport namespace SplitPanelProps {\n  export interface I18nStrings {\n    closeButtonAriaLabel?: string;\n    openButtonAriaLabel?: string;\n    preferencesTitle?: string;\n    preferencesPositionLabel?: string;\n    preferencesPositionDescription?: string;\n    preferencesPositionSide?: string;\n    preferencesPositionBottom?: string;\n    preferencesConfirm?: string;\n    preferencesCancel?: string;\n    preferencesCloseAriaLabel?: string;\n    resizeHandleAriaLabel?: string;\n    resizeHandleTooltipText?: string;\n  }\n}\n\nexport interface SplitPanelContentProps {\n  style: React.CSSProperties;\n  baseProps: BaseComponentProps;\n  isOpen?: boolean;\n  splitPanelRef?: React.Ref<any>;\n  cappedSize: number;\n  panelHeaderId?: string;\n  ariaLabel?: string;\n  resizeHandle: React.ReactNode;\n  header: React.ReactNode;\n  children: React.ReactNode;\n  onToggle: () => void;\n}\n"]}

package/split-panel/side.d.ts

@@ -18,6 +18,7 @@ export declare function SplitPanelContentSide({
   cappedSize,
   openButtonAriaLabel,
   panelHeaderId,
+  ariaLabel,
   onToggle,
   closeBehavior
 }: SplitPanelContentSideProps): JSX.Element;

package/split-panel/side.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMvE,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,QAAQ,EACR,aAAa,GACd,EAAE,0BAA0B,eAyD5B"}
+{"version":3,"file":"side.d.ts","sourceRoot":"","sources":["../../../src/split-panel/side.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAMvE,UAAU,0BAA2B,SAAQ,sBAAsB;IACjE,aAAa,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;CAC7C;AAED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,SAAS,EACT,aAAa,EACb,SAAS,EACT,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,UAAU,EACV,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,QAAQ,EACR,aAAa,GACd,EAAE,0BAA0B,eA0D5B"}

package/split-panel/side.js

@@ -9,7 +9,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import sharedStyles from '../app-layout/resize/styles.css.js';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
-export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, onToggle, closeBehavior, }) {
+export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleRef, header, children, resizeHandle, isOpen, cappedSize, openButtonAriaLabel, panelHeaderId, ariaLabel, onToggle, closeBehavior, }) {
     const { topOffset, bottomOffset, animationDisabled } = useSplitPanelContext();
     const isRefresh = useVisualRefresh();
     const isToolbar = useAppLayoutToolbarDesignEnabled();
@@ -24,7 +24,7 @@ export function SplitPanelContentSide({ style, baseProps, splitPanelRef, toggleR
         React.createElement("div", { className: styles['drawer-content-side'], style: {
                 top: topOffset,
                 bottom: bottomOffset,
-            }, onClick: () => !isOpen && onToggle(), "aria-labelledby": panelHeaderId, role: "region" },
+            }, onClick: () => !isOpen && onToggle(), "aria-labelledby": panelHeaderId, "aria-label": ariaLabel, role: "region" },
             isOpen ? (React.createElement("div", { className: clsx(styles['slider-wrapper-side'], isToolbar && styles['with-toolbar']) }, resizeHandle)) : closeBehavior === 'hide' ? null : (React.createElement(InternalButton, { className: clsx(testUtilStyles['open-button'], styles['open-button-side']), iconName: "angle-left", variant: "icon", formAction: "none", ariaLabel: openButtonAriaLabel, ariaExpanded: isOpen, 
                 //toggleRef should only be assigned when there is no other trigger-buttons
                 ref: isRefresh || isToolbar ? null : toggleRef })),

package/split-panel/side.js.map

@@ -1 +1 @@
-{"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/split-panel/side.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';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { ButtonProps } from '../button/interfaces';\nimport InternalButton from '../button/internal';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps, SplitPanelProps } from './interfaces';\n\nimport sharedStyles from '../app-layout/resize/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface SplitPanelContentSideProps extends SplitPanelContentProps {\n  closeBehavior: SplitPanelProps['closeBehavior'];\n  openButtonAriaLabel?: string;\n  toggleRef: React.RefObject<ButtonProps.Ref>;\n}\n\nexport function SplitPanelContentSide({\n  style,\n  baseProps,\n  splitPanelRef,\n  toggleRef,\n  header,\n  children,\n  resizeHandle,\n  isOpen,\n  cappedSize,\n  openButtonAriaLabel,\n  panelHeaderId,\n  onToggle,\n  closeBehavior,\n}: SplitPanelContentSideProps) {\n  const { topOffset, bottomOffset, animationDisabled } = useSplitPanelContext();\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const disableAnimation = animationDisabled || (closeBehavior === 'hide' && !isOpen);\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles['position-side'], testUtilStyles.root, {\n        [sharedStyles['with-motion-horizontal']]: !disableAnimation,\n        [testUtilStyles['open-position-side']]: isOpen,\n        [styles['drawer-closed']]: !isOpen,\n        [styles['with-toolbar']]: isToolbar,\n        [styles.refresh]: isRefresh,\n      })}\n      style={{\n        width: isOpen ? cappedSize : isRefresh ? '0px' : undefined,\n        maxWidth: isRefresh ? '100%' : undefined,\n        ...style,\n      }}\n      ref={splitPanelRef}\n    >\n      <div\n        className={styles['drawer-content-side']}\n        style={{\n          top: topOffset,\n          bottom: bottomOffset,\n        }}\n        onClick={() => !isOpen && onToggle()}\n        aria-labelledby={panelHeaderId}\n        role=\"region\"\n      >\n        {isOpen ? (\n          <div className={clsx(styles['slider-wrapper-side'], isToolbar && styles['with-toolbar'])}>{resizeHandle}</div>\n        ) : closeBehavior === 'hide' ? null : (\n          <InternalButton\n            className={clsx(testUtilStyles['open-button'], styles['open-button-side'])}\n            iconName=\"angle-left\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={openButtonAriaLabel}\n            ariaExpanded={isOpen}\n            //toggleRef should only be assigned when there is no other trigger-buttons\n            ref={isRefresh || isToolbar ? null : toggleRef}\n          />\n        )}\n        <div\n          className={clsx(styles['content-side'], isToolbar && styles['with-toolbar'])}\n          aria-hidden={!isOpen}\n          style={{ width: isToolbar ? cappedSize : '0px' }} // to prevent text wrapping upon entering\n        >\n          <div className={styles['pane-header-wrapper-side']}>{header}</div>\n          <div className={styles['pane-content-wrapper-side']}>{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"side.js","sourceRoot":"","sources":["../../../src/split-panel/side.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';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { ButtonProps } from '../button/interfaces';\nimport InternalButton from '../button/internal';\nimport { useSplitPanelContext } from '../internal/context/split-panel-context';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { SplitPanelContentProps, SplitPanelProps } from './interfaces';\n\nimport sharedStyles from '../app-layout/resize/styles.css.js';\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface SplitPanelContentSideProps extends SplitPanelContentProps {\n  closeBehavior: SplitPanelProps['closeBehavior'];\n  openButtonAriaLabel?: string;\n  toggleRef: React.RefObject<ButtonProps.Ref>;\n}\n\nexport function SplitPanelContentSide({\n  style,\n  baseProps,\n  splitPanelRef,\n  toggleRef,\n  header,\n  children,\n  resizeHandle,\n  isOpen,\n  cappedSize,\n  openButtonAriaLabel,\n  panelHeaderId,\n  ariaLabel,\n  onToggle,\n  closeBehavior,\n}: SplitPanelContentSideProps) {\n  const { topOffset, bottomOffset, animationDisabled } = useSplitPanelContext();\n  const isRefresh = useVisualRefresh();\n  const isToolbar = useAppLayoutToolbarDesignEnabled();\n  const disableAnimation = animationDisabled || (closeBehavior === 'hide' && !isOpen);\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.drawer, styles['position-side'], testUtilStyles.root, {\n        [sharedStyles['with-motion-horizontal']]: !disableAnimation,\n        [testUtilStyles['open-position-side']]: isOpen,\n        [styles['drawer-closed']]: !isOpen,\n        [styles['with-toolbar']]: isToolbar,\n        [styles.refresh]: isRefresh,\n      })}\n      style={{\n        width: isOpen ? cappedSize : isRefresh ? '0px' : undefined,\n        maxWidth: isRefresh ? '100%' : undefined,\n        ...style,\n      }}\n      ref={splitPanelRef}\n    >\n      <div\n        className={styles['drawer-content-side']}\n        style={{\n          top: topOffset,\n          bottom: bottomOffset,\n        }}\n        onClick={() => !isOpen && onToggle()}\n        aria-labelledby={panelHeaderId}\n        aria-label={ariaLabel}\n        role=\"region\"\n      >\n        {isOpen ? (\n          <div className={clsx(styles['slider-wrapper-side'], isToolbar && styles['with-toolbar'])}>{resizeHandle}</div>\n        ) : closeBehavior === 'hide' ? null : (\n          <InternalButton\n            className={clsx(testUtilStyles['open-button'], styles['open-button-side'])}\n            iconName=\"angle-left\"\n            variant=\"icon\"\n            formAction=\"none\"\n            ariaLabel={openButtonAriaLabel}\n            ariaExpanded={isOpen}\n            //toggleRef should only be assigned when there is no other trigger-buttons\n            ref={isRefresh || isToolbar ? null : toggleRef}\n          />\n        )}\n        <div\n          className={clsx(styles['content-side'], isToolbar && styles['with-toolbar'])}\n          aria-hidden={!isOpen}\n          style={{ width: isToolbar ? cappedSize : '0px' }} // to prevent text wrapping upon entering\n        >\n          <div className={styles['pane-header-wrapper-side']}>{header}</div>\n          <div className={styles['pane-content-wrapper-side']}>{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/split-panel/styles.css.js

@@ -1,32 +1,43 @@
 
     import './styles.scoped.css';
     export default {
-  "drawer": "awsui_drawer_1r9lg_1hxnd_153",
-  "drawer-closed": "awsui_drawer-closed_1r9lg_1hxnd_190",
-  "refresh": "awsui_refresh_1r9lg_1hxnd_193",
-  "drawer-content-side": "awsui_drawer-content-side_1r9lg_1hxnd_197",
-  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_1hxnd_213",
-  "position-bottom": "awsui_position-bottom_1r9lg_1hxnd_220",
-  "hidden": "awsui_hidden_1r9lg_1hxnd_228",
-  "position-side": "awsui_position-side_1r9lg_1hxnd_249",
-  "with-toolbar": "awsui_with-toolbar_1r9lg_1hxnd_254",
-  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_1hxnd_258",
-  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_1hxnd_269",
-  "open-button-side": "awsui_open-button-side_1r9lg_1hxnd_283",
-  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_1hxnd_292",
-  "drawer-mobile": "awsui_drawer-mobile_1r9lg_1hxnd_302",
-  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_1hxnd_306",
-  "content-bottom": "awsui_content-bottom_1r9lg_1hxnd_318",
-  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_1hxnd_337",
-  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_1hxnd_342",
-  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_1hxnd_346",
-  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_1hxnd_350",
-  "content-side": "awsui_content-side_1r9lg_1hxnd_355",
-  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_1hxnd_367",
-  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_1hxnd_376",
-  "header": "awsui_header_1r9lg_1hxnd_387",
-  "header-text": "awsui_header-text_1r9lg_1hxnd_400",
-  "header-actions": "awsui_header-actions_1r9lg_1hxnd_414",
-  "divider": "awsui_divider_1r9lg_1hxnd_422"
+  "drawer": "awsui_drawer_1r9lg_492kg_153",
+  "drawer-closed": "awsui_drawer-closed_1r9lg_492kg_190",
+  "refresh": "awsui_refresh_1r9lg_492kg_190",
+  "drawer-content-side": "awsui_drawer-content-side_1r9lg_492kg_194",
+  "drawer-content-bottom": "awsui_drawer-content-bottom_1r9lg_492kg_210",
+  "position-bottom": "awsui_position-bottom_1r9lg_492kg_217",
+  "hidden": "awsui_hidden_1r9lg_492kg_225",
+  "drawer-clickable": "awsui_drawer-clickable_1r9lg_492kg_236",
+  "position-side": "awsui_position-side_1r9lg_492kg_247",
+  "with-toolbar": "awsui_with-toolbar_1r9lg_492kg_252",
+  "slider-wrapper-bottom": "awsui_slider-wrapper-bottom_1r9lg_492kg_256",
+  "slider-wrapper-side": "awsui_slider-wrapper-side_1r9lg_492kg_267",
+  "open-button-side": "awsui_open-button-side_1r9lg_492kg_281",
+  "pane-header-wrapper-bottom": "awsui_pane-header-wrapper-bottom_1r9lg_492kg_290",
+  "drawer-mobile": "awsui_drawer-mobile_1r9lg_492kg_300",
+  "drawer-disable-content-paddings": "awsui_drawer-disable-content-paddings_1r9lg_492kg_304",
+  "content-bottom": "awsui_content-bottom_1r9lg_492kg_316",
+  "pane-bottom-center-align": "awsui_pane-bottom-center-align_1r9lg_492kg_335",
+  "pane-bottom-content-nav-padding": "awsui_pane-bottom-content-nav-padding_1r9lg_492kg_340",
+  "pane-bottom-content-tools-padding": "awsui_pane-bottom-content-tools-padding_1r9lg_492kg_344",
+  "content-bottom-max-width": "awsui_content-bottom-max-width_1r9lg_492kg_348",
+  "content-side": "awsui_content-side_1r9lg_492kg_353",
+  "pane-header-wrapper-side": "awsui_pane-header-wrapper-side_1r9lg_492kg_365",
+  "pane-content-wrapper-side": "awsui_pane-content-wrapper-side_1r9lg_492kg_374",
+  "header": "awsui_header_1r9lg_492kg_385",
+  "header-main-row": "awsui_header-main-row_1r9lg_492kg_393",
+  "header-main-content": "awsui_header-main-content_1r9lg_492kg_393",
+  "header-tag-and-info": "awsui_header-tag-and-info_1r9lg_492kg_407",
+  "with-description": "awsui_with-description_1r9lg_492kg_412",
+  "header-tag": "awsui_header-tag_1r9lg_492kg_407",
+  "with-info": "awsui_with-info_1r9lg_492kg_415",
+  "header-text": "awsui_header-text_1r9lg_492kg_415",
+  "header-before-slot": "awsui_header-before-slot_1r9lg_492kg_421",
+  "with-header-text": "awsui_with-header-text_1r9lg_492kg_432",
+  "header-actions-slot": "awsui_header-actions-slot_1r9lg_492kg_438",
+  "header-description": "awsui_header-description_1r9lg_492kg_444",
+  "header-buttons": "awsui_header-buttons_1r9lg_492kg_451",
+  "divider": "awsui_divider_1r9lg_492kg_459"
 };