@cloudscape-design/board-components 3.0.111 → 3.0.112

package/board-item/interfaces.d.ts

@@ -29,6 +29,8 @@ export interface BoardItemProps {
      * * `dragHandleAriaDescription` (string, optional) - the ARIA description for the drag handle.
      * * `resizeHandleAriaLabel` (string) - the ARIA label for the resize handle.
      * * `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle.
+     * * `dragHandleTooltipText` (string, optional) - the ARIA description for the resize handle.
+     * * `resizeHandleTooltipText` (string, optional) - the Text for the resize handle Tooltip.
      */
     i18nStrings: BoardItemProps.I18nStrings;
 }
@@ -38,5 +40,7 @@ export declare namespace BoardItemProps {
         dragHandleAriaDescription?: string;
         resizeHandleAriaLabel: string;
         resizeHandleAriaDescription?: string;
+        dragHandleTooltipText?: string;
+        resizeHandleTooltipText?: string;
     }
 }

package/board-item/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/board-item/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ReactNode } from \"react\";\n\nexport interface BoardItemProps {\n  /**\n   * Heading element of the item. Use the [header component](/components/header/).\n   */\n  header?: ReactNode;\n\n  /**\n   * Main content of the item.\n   */\n  children?: ReactNode;\n\n  /**\n   * Determines whether the main content of the item has padding. If `true`, removes the default padding\n   * from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Footer of the item.\n   */\n  footer?: ReactNode;\n\n  /**\n   * Additional slot next to the heading. Use it to render an overflow actions menu in the form of a button dropdown.\n   */\n  settings?: ReactNode;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   *\n   * ARIA labels:\n   * * `dragHandleAriaLabel` (string) - the ARIA label for the drag handle.\n   * * `dragHandleAriaDescription` (string, optional) - the ARIA description for the drag handle.\n   * * `resizeHandleAriaLabel` (string) - the ARIA label for the resize handle.\n   * * `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle.\n   */\n  i18nStrings: BoardItemProps.I18nStrings;\n}\n\nexport namespace BoardItemProps {\n  export interface I18nStrings {\n    dragHandleAriaLabel: string;\n    dragHandleAriaDescription?: string;\n    resizeHandleAriaLabel: string;\n    resizeHandleAriaDescription?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/board-item/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ReactNode } from \"react\";\n\nexport interface BoardItemProps {\n  /**\n   * Heading element of the item. Use the [header component](/components/header/).\n   */\n  header?: ReactNode;\n\n  /**\n   * Main content of the item.\n   */\n  children?: ReactNode;\n\n  /**\n   * Determines whether the main content of the item has padding. If `true`, removes the default padding\n   * from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Footer of the item.\n   */\n  footer?: ReactNode;\n\n  /**\n   * Additional slot next to the heading. Use it to render an overflow actions menu in the form of a button dropdown.\n   */\n  settings?: ReactNode;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   *\n   * ARIA labels:\n   * * `dragHandleAriaLabel` (string) - the ARIA label for the drag handle.\n   * * `dragHandleAriaDescription` (string, optional) - the ARIA description for the drag handle.\n   * * `resizeHandleAriaLabel` (string) - the ARIA label for the resize handle.\n   * * `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle.\n   * * `dragHandleTooltipText` (string, optional) - the ARIA description for the resize handle.\n   * * `resizeHandleTooltipText` (string, optional) - the Text for the resize handle Tooltip.\n   */\n  i18nStrings: BoardItemProps.I18nStrings;\n}\n\nexport namespace BoardItemProps {\n  export interface I18nStrings {\n    dragHandleAriaLabel: string;\n    dragHandleAriaDescription?: string;\n    resizeHandleAriaLabel: string;\n    resizeHandleAriaDescription?: string;\n    dragHandleTooltipText?: string;\n    resizeHandleTooltipText?: string;\n  }\n}\n"]}

package/board-item/internal.d.ts

@@ -1,3 +1,3 @@
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import type { BoardItemProps } from "./interfaces";
-export declare function InternalBoardItem({ children, header, settings, disableContentPaddings, footer, i18nStrings, __internalRootRef, ...rest }: BoardItemProps & InternalBaseComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalBoardItem({ children, header, settings, disableContentPaddings, footer, i18nStrings, __internalRootRef, ...rest }: BoardItemProps & InternalBaseComponentProps): import("react/jsx-runtime").JSX.Element | null;

package/board-item/internal.js

@@ -11,12 +11,28 @@ import ResizeHandle from "../internal/resize-handle";
 import ScreenreaderOnly from "../internal/screenreader-only";
 import WidgetContainerHeader from "./header";
 import styles from "./styles.css.js";
+const mapToKeyboardDirection = (direction) => {
+    const directionMap = {
+        "inline-start": "left",
+        "inline-end": "right",
+        "block-start": "up",
+        "block-end": "down",
+    };
+    return directionMap[direction];
+};
 export function InternalBoardItem({ children, header, settings, disableContentPaddings, footer, i18nStrings, __internalRootRef, ...rest }) {
-    const { dragHandle, resizeHandle, isActive } = useItemContext();
+    const { dragHandle, resizeHandle, isActive, isHidden } = useItemContext();
     const dragHandleAriaLabelledBy = useId();
     const dragHandleAriaDescribedBy = useId();
     const resizeHandleAriaLabelledBy = useId();
     const resizeHandleAriaDescribedBy = useId();
-    return (_jsxs("div", { ref: __internalRootRef, className: styles.root, ...getDataAttributes(rest), children: [_jsx(Container, { fitHeight: true, disableHeaderPaddings: true, header: _jsx(WidgetContainerHeader, { handle: _jsx(DragHandle, { ref: dragHandle.ref, ariaLabelledBy: dragHandleAriaLabelledBy, ariaDescribedBy: dragHandleAriaDescribedBy, onPointerDown: dragHandle.onPointerDown, onKeyDown: dragHandle.onKeyDown, isActive: dragHandle.isActive }), settings: settings, children: header }), footer: footer, disableContentPaddings: disableContentPaddings, className: clsx(styles["container-override"], isActive && styles.active), children: children }), resizeHandle && (_jsx("div", { className: styles.resizer, children: _jsx(ResizeHandle, { ariaLabelledBy: resizeHandleAriaLabelledBy, ariaDescribedBy: resizeHandleAriaDescribedBy, onPointerDown: resizeHandle.onPointerDown, onKeyDown: resizeHandle.onKeyDown, isActive: resizeHandle.isActive }) })), _jsx(ScreenreaderOnly, { id: dragHandleAriaLabelledBy, children: i18nStrings.dragHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: dragHandleAriaDescribedBy, children: i18nStrings.dragHandleAriaDescription }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaLabelledBy, children: i18nStrings.resizeHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaDescribedBy, children: i18nStrings.resizeHandleAriaDescription })] }));
+    // A board item is hidden while moving a board item from the palette to the board via keyboard or UAP.
+    // The wrapping container is set to invisible, so we don't need to render anything.
+    if (isHidden) {
+        return null;
+    }
+    return (_jsxs("div", { ref: __internalRootRef, className: styles.root, ...getDataAttributes(rest), children: [_jsx(Container, { fitHeight: true, disableHeaderPaddings: true, header: _jsx(WidgetContainerHeader, { handle: _jsx(DragHandle, { ref: dragHandle.ref, ariaLabelledBy: dragHandleAriaLabelledBy, ariaDescribedBy: dragHandleAriaDescribedBy, onPointerDown: dragHandle.onPointerDown, onKeyDown: dragHandle.onKeyDown, activeState: dragHandle.activeState, initialShowButtons: dragHandle.initialShowButtons, onDirectionClick: (direction) => dragHandle.onDirectionClick(mapToKeyboardDirection(direction), "drag"), dragHandleTooltipText: i18nStrings.dragHandleTooltipText }), settings: settings, children: header }), footer: footer, disableContentPaddings: disableContentPaddings, className: clsx(styles["container-override"], isActive && styles.active), children: children }), resizeHandle && (_jsx("div", { className: styles.resizer, children: _jsx(ResizeHandle, { ariaLabelledBy: resizeHandleAriaLabelledBy, ariaDescribedBy: resizeHandleAriaDescribedBy, onPointerDown: resizeHandle.onPointerDown, onKeyDown: resizeHandle.onKeyDown, activeState: resizeHandle.activeState, onDirectionClick: (direction) => {
+                        resizeHandle.onDirectionClick(mapToKeyboardDirection(direction), "resize");
+                    }, resizeHandleTooltipText: i18nStrings.resizeHandleTooltipText }) })), _jsx(ScreenreaderOnly, { id: dragHandleAriaLabelledBy, children: i18nStrings.dragHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: dragHandleAriaDescribedBy, children: i18nStrings.dragHandleAriaDescription }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaLabelledBy, children: i18nStrings.resizeHandleAriaLabel }), _jsx(ScreenreaderOnly, { id: resizeHandleAriaDescribedBy, children: i18nStrings.resizeHandleAriaDescription })] }));
 }
 //# sourceMappingURL=internal.js.map

package/board-item/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/board-item/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAEnF,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,qBAAqB,MAAM,UAAU,CAAC;AAG7C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,sBAAsB,EACtB,MAAM,EACN,WAAW,EACX,iBAAiB,EACjB,GAAG,IAAI,EACqC;IAC5C,MAAM,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IAEhE,MAAM,wBAAwB,GAAG,KAAK,EAAE,CAAC;IACzC,MAAM,yBAAyB,GAAG,KAAK,EAAE,CAAC;IAE1C,MAAM,0BAA0B,GAAG,KAAK,EAAE,CAAC;IAC3C,MAAM,2BAA2B,GAAG,KAAK,EAAE,CAAC;IAE5C,OAAO,CACL,eAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,KAAM,iBAAiB,CAAC,IAAI,CAAC,aAC9E,KAAC,SAAS,IACR,SAAS,EAAE,IAAI,EACf,qBAAqB,EAAE,IAAI,EAC3B,MAAM,EACJ,KAAC,qBAAqB,IACpB,MAAM,EACJ,KAAC,UAAU,IACT,GAAG,EAAE,UAAU,CAAC,GAAG,EACnB,cAAc,EAAE,wBAAwB,EACxC,eAAe,EAAE,yBAAyB,EAC1C,aAAa,EAAE,UAAU,CAAC,aAAa,EACvC,SAAS,EAAE,UAAU,CAAC,SAAS,EAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,GAC7B,EAEJ,QAAQ,EAAE,QAAQ,YAEjB,MAAM,GACe,EAE1B,MAAM,EAAE,MAAM,EACd,sBAAsB,EAAE,sBAAsB,EAC9C,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,YAEvE,QAAQ,GACC,EACX,YAAY,IAAI,CACf,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC5B,KAAC,YAAY,IACX,cAAc,EAAE,0BAA0B,EAC1C,eAAe,EAAE,2BAA2B,EAC5C,aAAa,EAAE,YAAY,CAAC,aAAa,EACzC,SAAS,EAAE,YAAY,CAAC,SAAS,EACjC,QAAQ,EAAE,YAAY,CAAC,QAAQ,GAC/B,GACE,CACP,EAED,KAAC,gBAAgB,IAAC,EAAE,EAAE,wBAAwB,YAAG,WAAW,CAAC,mBAAmB,GAAoB,EACpG,KAAC,gBAAgB,IAAC,EAAE,EAAE,yBAAyB,YAAG,WAAW,CAAC,yBAAyB,GAAoB,EAE3G,KAAC,gBAAgB,IAAC,EAAE,EAAE,0BAA0B,YAAG,WAAW,CAAC,qBAAqB,GAAoB,EACxG,KAAC,gBAAgB,IAAC,EAAE,EAAE,2BAA2B,YAAG,WAAW,CAAC,2BAA2B,GAAoB,IAC3G,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\n\nimport Container from \"@cloudscape-design/components/container\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport DragHandle from \"../internal/drag-handle\";\nimport { useItemContext } from \"../internal/item-container\";\nimport ResizeHandle from \"../internal/resize-handle\";\nimport ScreenreaderOnly from \"../internal/screenreader-only\";\nimport WidgetContainerHeader from \"./header\";\nimport type { BoardItemProps } from \"./interfaces\";\n\nimport styles from \"./styles.css.js\";\n\nexport function InternalBoardItem({\n  children,\n  header,\n  settings,\n  disableContentPaddings,\n  footer,\n  i18nStrings,\n  __internalRootRef,\n  ...rest\n}: BoardItemProps & InternalBaseComponentProps) {\n  const { dragHandle, resizeHandle, isActive } = useItemContext();\n\n  const dragHandleAriaLabelledBy = useId();\n  const dragHandleAriaDescribedBy = useId();\n\n  const resizeHandleAriaLabelledBy = useId();\n  const resizeHandleAriaDescribedBy = useId();\n\n  return (\n    <div ref={__internalRootRef} className={styles.root} {...getDataAttributes(rest)}>\n      <Container\n        fitHeight={true}\n        disableHeaderPaddings={true}\n        header={\n          <WidgetContainerHeader\n            handle={\n              <DragHandle\n                ref={dragHandle.ref}\n                ariaLabelledBy={dragHandleAriaLabelledBy}\n                ariaDescribedBy={dragHandleAriaDescribedBy}\n                onPointerDown={dragHandle.onPointerDown}\n                onKeyDown={dragHandle.onKeyDown}\n                isActive={dragHandle.isActive}\n              />\n            }\n            settings={settings}\n          >\n            {header}\n          </WidgetContainerHeader>\n        }\n        footer={footer}\n        disableContentPaddings={disableContentPaddings}\n        className={clsx(styles[\"container-override\"], isActive && styles.active)}\n      >\n        {children}\n      </Container>\n      {resizeHandle && (\n        <div className={styles.resizer}>\n          <ResizeHandle\n            ariaLabelledBy={resizeHandleAriaLabelledBy}\n            ariaDescribedBy={resizeHandleAriaDescribedBy}\n            onPointerDown={resizeHandle.onPointerDown}\n            onKeyDown={resizeHandle.onKeyDown}\n            isActive={resizeHandle.isActive}\n          />\n        </div>\n      )}\n\n      <ScreenreaderOnly id={dragHandleAriaLabelledBy}>{i18nStrings.dragHandleAriaLabel}</ScreenreaderOnly>\n      <ScreenreaderOnly id={dragHandleAriaDescribedBy}>{i18nStrings.dragHandleAriaDescription}</ScreenreaderOnly>\n\n      <ScreenreaderOnly id={resizeHandleAriaLabelledBy}>{i18nStrings.resizeHandleAriaLabel}</ScreenreaderOnly>\n      <ScreenreaderOnly id={resizeHandleAriaDescribedBy}>{i18nStrings.resizeHandleAriaDescription}</ScreenreaderOnly>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/board-item/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useId } from \"react\";\nimport clsx from \"clsx\";\n\nimport Container from \"@cloudscape-design/components/container\";\nimport { InternalDragHandleProps } from \"@cloudscape-design/components/internal/do-not-use/drag-handle\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport DragHandle from \"../internal/drag-handle\";\nimport { Direction } from \"../internal/interfaces\";\nimport { useItemContext } from \"../internal/item-container\";\nimport ResizeHandle from \"../internal/resize-handle\";\nimport ScreenreaderOnly from \"../internal/screenreader-only\";\nimport WidgetContainerHeader from \"./header\";\nimport type { BoardItemProps } from \"./interfaces\";\n\nimport styles from \"./styles.css.js\";\n\nconst mapToKeyboardDirection = (direction: InternalDragHandleProps.Direction) => {\n  const directionMap: Record<InternalDragHandleProps.Direction, Direction> = {\n    \"inline-start\": \"left\",\n    \"inline-end\": \"right\",\n    \"block-start\": \"up\",\n    \"block-end\": \"down\",\n  };\n  return directionMap[direction];\n};\n\nexport function InternalBoardItem({\n  children,\n  header,\n  settings,\n  disableContentPaddings,\n  footer,\n  i18nStrings,\n  __internalRootRef,\n  ...rest\n}: BoardItemProps & InternalBaseComponentProps) {\n  const { dragHandle, resizeHandle, isActive, isHidden } = useItemContext();\n\n  const dragHandleAriaLabelledBy = useId();\n  const dragHandleAriaDescribedBy = useId();\n\n  const resizeHandleAriaLabelledBy = useId();\n  const resizeHandleAriaDescribedBy = useId();\n\n  // A board item is hidden while moving a board item from the palette to the board via keyboard or UAP.\n  // The wrapping container is set to invisible, so we don't need to render anything.\n  if (isHidden) {\n    return null;\n  }\n\n  return (\n    <div ref={__internalRootRef} className={styles.root} {...getDataAttributes(rest)}>\n      <Container\n        fitHeight={true}\n        disableHeaderPaddings={true}\n        header={\n          <WidgetContainerHeader\n            handle={\n              <DragHandle\n                ref={dragHandle.ref}\n                ariaLabelledBy={dragHandleAriaLabelledBy}\n                ariaDescribedBy={dragHandleAriaDescribedBy}\n                onPointerDown={dragHandle.onPointerDown}\n                onKeyDown={dragHandle.onKeyDown}\n                activeState={dragHandle.activeState}\n                initialShowButtons={dragHandle.initialShowButtons}\n                onDirectionClick={(direction) => dragHandle.onDirectionClick(mapToKeyboardDirection(direction), \"drag\")}\n                dragHandleTooltipText={i18nStrings.dragHandleTooltipText}\n              />\n            }\n            settings={settings}\n          >\n            {header}\n          </WidgetContainerHeader>\n        }\n        footer={footer}\n        disableContentPaddings={disableContentPaddings}\n        className={clsx(styles[\"container-override\"], isActive && styles.active)}\n      >\n        {children}\n      </Container>\n      {resizeHandle && (\n        <div className={styles.resizer}>\n          <ResizeHandle\n            ariaLabelledBy={resizeHandleAriaLabelledBy}\n            ariaDescribedBy={resizeHandleAriaDescribedBy}\n            onPointerDown={resizeHandle.onPointerDown}\n            onKeyDown={resizeHandle.onKeyDown}\n            activeState={resizeHandle.activeState}\n            onDirectionClick={(direction) => {\n              resizeHandle.onDirectionClick(mapToKeyboardDirection(direction), \"resize\");\n            }}\n            resizeHandleTooltipText={i18nStrings.resizeHandleTooltipText}\n          />\n        </div>\n      )}\n\n      <ScreenreaderOnly id={dragHandleAriaLabelledBy}>{i18nStrings.dragHandleAriaLabel}</ScreenreaderOnly>\n      <ScreenreaderOnly id={dragHandleAriaDescribedBy}>{i18nStrings.dragHandleAriaDescription}</ScreenreaderOnly>\n\n      <ScreenreaderOnly id={resizeHandleAriaLabelledBy}>{i18nStrings.resizeHandleAriaLabel}</ScreenreaderOnly>\n      <ScreenreaderOnly id={resizeHandleAriaDescribedBy}>{i18nStrings.resizeHandleAriaDescription}</ScreenreaderOnly>\n    </div>\n  );\n}\n"]}

package/board-item/styles.css.js

@@ -1,16 +1,16 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_9ckv7_zpa7v_9",
-  "container-override": "awsui_container-override_9ckv7_zpa7v_14",
-  "active": "awsui_active_9ckv7_zpa7v_14",
-  "header": "awsui_header_9ckv7_zpa7v_36",
-  "flexible": "awsui_flexible_9ckv7_zpa7v_43",
-  "handle": "awsui_handle_9ckv7_zpa7v_47",
-  "refresh": "awsui_refresh_9ckv7_zpa7v_50",
-  "header-content": "awsui_header-content_9ckv7_zpa7v_54",
-  "settings": "awsui_settings_9ckv7_zpa7v_58",
-  "fixed": "awsui_fixed_9ckv7_zpa7v_66",
-  "resizer": "awsui_resizer_9ckv7_zpa7v_70"
+  "root": "awsui_root_9ckv7_m9g0k_9",
+  "container-override": "awsui_container-override_9ckv7_m9g0k_14",
+  "active": "awsui_active_9ckv7_m9g0k_14",
+  "header": "awsui_header_9ckv7_m9g0k_34",
+  "flexible": "awsui_flexible_9ckv7_m9g0k_41",
+  "handle": "awsui_handle_9ckv7_m9g0k_45",
+  "refresh": "awsui_refresh_9ckv7_m9g0k_48",
+  "header-content": "awsui_header-content_9ckv7_m9g0k_52",
+  "settings": "awsui_settings_9ckv7_m9g0k_56",
+  "fixed": "awsui_fixed_9ckv7_m9g0k_64",
+  "resizer": "awsui_resizer_9ckv7_m9g0k_68"
 };
   

package/board-item/styles.scoped.css

@@ -6,21 +6,19 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_9ckv7_zpa7v_9:not(#\9) {
+.awsui_root_9ckv7_m9g0k_9:not(#\9) {
   display: contents;
 }
 
 /* TODO: use container API instead of styles override */
-.awsui_container-override_9ckv7_zpa7v_14.awsui_active_9ckv7_zpa7v_14:not(#\9) {
+.awsui_container-override_9ckv7_m9g0k_14.awsui_active_9ckv7_m9g0k_14:not(#\9) {
   box-shadow: var(--shadow-container-active-ypjjoc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
-}
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_zpa7v_14.awsui_active_9ckv7_zpa7v_14:not(#\9) {
   position: relative;
   box-sizing: border-box;
   outline: 2px dotted transparent;
   outline-offset: -1px;
 }
-[data-awsui-focus-visible] .awsui_container-override_9ckv7_zpa7v_14.awsui_active_9ckv7_zpa7v_14:not(#\9)::before {
+.awsui_container-override_9ckv7_m9g0k_14.awsui_active_9ckv7_m9g0k_14:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -33,41 +31,41 @@
   border: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
 }
 
-.awsui_header_9ckv7_zpa7v_36:not(#\9) {
+.awsui_header_9ckv7_m9g0k_34:not(#\9) {
   display: flex;
   justify-items: center;
   padding-block: var(--space-scaled-s-8ozaad, 12px);
   padding-inline: calc(var(--space-container-horizontal-nqrzyh, 20px) - var(--space-scaled-xs-xwoogq, 8px));
 }
 
-.awsui_flexible_9ckv7_zpa7v_43:not(#\9) {
+.awsui_flexible_9ckv7_m9g0k_41:not(#\9) {
   flex: 1 1 min-content;
 }
 
-.awsui_handle_9ckv7_zpa7v_47:not(#\9) {
+.awsui_handle_9ckv7_m9g0k_45:not(#\9) {
   margin-block-start: calc(var(--space-scaled-xxs-pfm1nx, 4px) + 1px);
 }
-.awsui_refresh_9ckv7_zpa7v_50 > .awsui_handle_9ckv7_zpa7v_47:not(#\9) {
+.awsui_refresh_9ckv7_m9g0k_48 > .awsui_handle_9ckv7_m9g0k_45:not(#\9) {
   margin-block-start: calc(var(--space-static-xxxs-yidks1, 2px) + 1px);
 }
 
-.awsui_header-content_9ckv7_zpa7v_54:not(#\9) {
+.awsui_header-content_9ckv7_m9g0k_52:not(#\9) {
   margin-inline-start: var(--space-scaled-xxs-pfm1nx, 4px);
 }
 
-.awsui_settings_9ckv7_zpa7v_58:not(#\9) {
+.awsui_settings_9ckv7_m9g0k_56:not(#\9) {
   margin-block-start: calc(var(--space-scaled-xxxs-oo06c7, 2px) + 1px);
   margin-inline-start: var(--space-static-xs-gnm0mz, 8px);
 }
-.awsui_refresh_9ckv7_zpa7v_50 > .awsui_settings_9ckv7_zpa7v_58:not(#\9) {
+.awsui_refresh_9ckv7_m9g0k_48 > .awsui_settings_9ckv7_m9g0k_56:not(#\9) {
   margin-block-start: 0px;
 }
 
-.awsui_fixed_9ckv7_zpa7v_66:not(#\9) {
+.awsui_fixed_9ckv7_m9g0k_64:not(#\9) {
   flex: 0 0 auto;
 }
 
-.awsui_resizer_9ckv7_zpa7v_70:not(#\9) {
+.awsui_resizer_9ckv7_m9g0k_68:not(#\9) {
   position: absolute;
   inset-block-end: calc(var(--space-static-xs-gnm0mz, 8px) - var(--space-static-xxxs-yidks1, 2px));
   inset-inline-end: calc(var(--space-static-xs-gnm0mz, 8px) - var(--space-static-xxxs-yidks1, 2px));

package/board-item/styles.selectors.js

@@ -2,16 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_9ckv7_zpa7v_9",
-  "container-override": "awsui_container-override_9ckv7_zpa7v_14",
-  "active": "awsui_active_9ckv7_zpa7v_14",
-  "header": "awsui_header_9ckv7_zpa7v_36",
-  "flexible": "awsui_flexible_9ckv7_zpa7v_43",
-  "handle": "awsui_handle_9ckv7_zpa7v_47",
-  "refresh": "awsui_refresh_9ckv7_zpa7v_50",
-  "header-content": "awsui_header-content_9ckv7_zpa7v_54",
-  "settings": "awsui_settings_9ckv7_zpa7v_58",
-  "fixed": "awsui_fixed_9ckv7_zpa7v_66",
-  "resizer": "awsui_resizer_9ckv7_zpa7v_70"
+  "root": "awsui_root_9ckv7_m9g0k_9",
+  "container-override": "awsui_container-override_9ckv7_m9g0k_14",
+  "active": "awsui_active_9ckv7_m9g0k_14",
+  "header": "awsui_header_9ckv7_m9g0k_34",
+  "flexible": "awsui_flexible_9ckv7_m9g0k_41",
+  "handle": "awsui_handle_9ckv7_m9g0k_45",
+  "refresh": "awsui_refresh_9ckv7_m9g0k_48",
+  "header-content": "awsui_header-content_9ckv7_m9g0k_52",
+  "settings": "awsui_settings_9ckv7_m9g0k_56",
+  "fixed": "awsui_fixed_9ckv7_m9g0k_64",
+  "resizer": "awsui_resizer_9ckv7_m9g0k_68"
 };
   

package/internal/api-docs/components/board-item.js

@@ -49,6 +49,11 @@ module.exports = {
             "type": "string",
             "optional": false
           },
+          {
+            "name": "dragHandleTooltipText",
+            "type": "string",
+            "optional": true
+          },
           {
             "name": "resizeHandleAriaDescription",
             "type": "string",
@@ -58,11 +63,16 @@ module.exports = {
             "name": "resizeHandleAriaLabel",
             "type": "string",
             "optional": false
+          },
+          {
+            "name": "resizeHandleTooltipText",
+            "type": "string",
+            "optional": true
           }
         ]
       },
       "optional": false,
-      "description": "An object containing all the necessary localized strings required by the component.\n\nARIA labels:\n* `dragHandleAriaLabel` (string) - the ARIA label for the drag handle.\n* `dragHandleAriaDescription` (string, optional) - the ARIA description for the drag handle.\n* `resizeHandleAriaLabel` (string) - the ARIA label for the resize handle.\n* `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle."
+      "description": "An object containing all the necessary localized strings required by the component.\n\nARIA labels:\n* `dragHandleAriaLabel` (string) - the ARIA label for the drag handle.\n* `dragHandleAriaDescription` (string, optional) - the ARIA description for the drag handle.\n* `resizeHandleAriaLabel` (string) - the ARIA label for the resize handle.\n* `resizeHandleAriaDescription` (string, optional) - the ARIA description for the resize handle.\n* `dragHandleTooltipText` (string, optional) - the ARIA description for the resize handle.\n* `resizeHandleTooltipText` (string, optional) - the Text for the resize handle Tooltip."
     }
   ],
   "events": []

package/internal/drag-handle/index.d.ts

@@ -1,10 +1,15 @@
 import { KeyboardEvent, PointerEvent } from "react";
+import { InternalDragHandleProps } from "@cloudscape-design/components/internal/do-not-use/drag-handle";
+import { HandleActiveState } from "../item-container";
 export interface DragHandleProps {
     ariaLabelledBy: string;
     ariaDescribedBy: string;
     onPointerDown: (event: PointerEvent) => void;
     onKeyDown: (event: KeyboardEvent) => void;
-    isActive: boolean;
+    activeState: HandleActiveState;
+    initialShowButtons?: boolean;
+    onDirectionClick: InternalDragHandleProps["onDirectionClick"];
+    dragHandleTooltipText?: string;
 }
-declare const _default: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const _default: import("react").ForwardRefExoticComponent<DragHandleProps & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;

package/internal/drag-handle/index.js

@@ -3,11 +3,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 import { forwardRef } from "react";
 import clsx from "clsx";
-import Icon from "@cloudscape-design/components/icon";
-import Handle from "../handle";
+import { InternalDragHandle, } from "@cloudscape-design/components/internal/do-not-use/drag-handle";
+import { CLICK_DRAG_THRESHOLD } from "../item-container";
 import styles from "./styles.css.js";
-function DragHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown, isActive }, ref) {
-    return (_jsx(Handle, { ref: ref, className: clsx(styles.handle, isActive && styles.active), "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onPointerDown: onPointerDown, onKeyDown: onKeyDown, children: _jsx(Icon, { name: "drag-indicator" }) }));
+import testUtilsStyles from "./test-classes/styles.css.js";
+function DragHandle({ ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown, activeState, initialShowButtons, onDirectionClick, dragHandleTooltipText, }, ref) {
+    return (_jsx(InternalDragHandle, { ref: ref, className: clsx(styles.handle, activeState === "pointer" && styles.active, activeState === "uap" && testUtilsStyles["active-uap"]), ariaLabelledBy: ariaLabelledBy, ariaDescribedby: ariaDescribedBy, variant: "drag-indicator", tooltipText: dragHandleTooltipText, onKeyDown: onKeyDown, onPointerDown: onPointerDown, directions: {
+            "block-start": "active",
+            "block-end": "active",
+            "inline-start": "active",
+            "inline-end": "active",
+        }, triggerMode: "keyboard-activate", onDirectionClick: onDirectionClick, initialShowButtons: initialShowButtons, hideButtonsOnDrag: true, clickDragThreshold: CLICK_DRAG_THRESHOLD }));
 }
 export default forwardRef(DragHandle);
 //# sourceMappingURL=index.js.map

package/internal/drag-handle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAgB,UAAU,EAA+B,MAAM,OAAO,CAAC;AAC9E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,IAAI,MAAM,oCAAoC,CAAC;AAEtD,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,SAAS,UAAU,CACjB,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,SAAS,EAAE,QAAQ,EAAmB,EACxF,GAAoC;IAEpC,OAAO,CACL,KAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,IAAI,MAAM,CAAC,MAAM,CAAC,qBACxC,cAAc,sBACb,eAAe,EACjC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,YAEpB,KAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,GAAG,GACvB,CACV,CAAC;AACJ,CAAC;AAED,eAAe,UAAU,CAAC,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ForwardedRef, forwardRef, KeyboardEvent, PointerEvent } from \"react\";\nimport clsx from \"clsx\";\n\nimport Icon from \"@cloudscape-design/components/icon\";\n\nimport Handle from \"../handle\";\n\nimport styles from \"./styles.css.js\";\n\nexport interface DragHandleProps {\n  ariaLabelledBy: string;\n  ariaDescribedBy: string;\n  onPointerDown: (event: PointerEvent) => void;\n  onKeyDown: (event: KeyboardEvent) => void;\n  isActive: boolean;\n}\n\nfunction DragHandle(\n  { ariaLabelledBy, ariaDescribedBy, onPointerDown, onKeyDown, isActive }: DragHandleProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  return (\n    <Handle\n      ref={ref}\n      className={clsx(styles.handle, isActive && styles.active)}\n      aria-labelledby={ariaLabelledBy}\n      aria-describedby={ariaDescribedBy}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    >\n      <Icon name=\"drag-indicator\" />\n    </Handle>\n  );\n}\n\nexport default forwardRef(DragHandle);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAgB,UAAU,EAA+B,MAAM,OAAO,CAAC;AAC9E,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EACL,kBAAkB,GAEnB,MAAM,+DAA+D,CAAC;AAEvE,OAAO,EAAE,oBAAoB,EAAqB,MAAM,mBAAmB,CAAC;AAE5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAa3D,SAAS,UAAU,CACjB,EACE,cAAc,EACd,eAAe,EACf,aAAa,EACb,SAAS,EACT,WAAW,EACX,kBAAkB,EAClB,gBAAgB,EAChB,qBAAqB,GACL,EAClB,GAAiC;IAEjC,OAAO,CACL,KAAC,kBAAkB,IACjB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM,EACb,WAAW,KAAK,SAAS,IAAI,MAAM,CAAC,MAAM,EAC1C,WAAW,KAAK,KAAK,IAAI,eAAe,CAAC,YAAY,CAAC,CACvD,EACD,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,OAAO,EAAC,gBAAgB,EACxB,WAAW,EAAE,qBAAqB,EAClC,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE;YACV,aAAa,EAAE,QAAQ;YACvB,WAAW,EAAE,QAAQ;YACrB,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,QAAQ;SACvB,EACD,WAAW,EAAC,mBAAmB,EAC/B,gBAAgB,EAAE,gBAAgB,EAClC,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,IAAI,EACvB,kBAAkB,EAAE,oBAAoB,GACxC,CACH,CAAC;AACJ,CAAC;AAED,eAAe,UAAU,CAAC,UAAU,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ForwardedRef, forwardRef, KeyboardEvent, PointerEvent } from \"react\";\nimport clsx from \"clsx\";\n\nimport {\n  InternalDragHandle,\n  InternalDragHandleProps,\n} from \"@cloudscape-design/components/internal/do-not-use/drag-handle\";\n\nimport { CLICK_DRAG_THRESHOLD, HandleActiveState } from \"../item-container\";\n\nimport styles from \"./styles.css.js\";\nimport testUtilsStyles from \"./test-classes/styles.css.js\";\n\nexport interface DragHandleProps {\n  ariaLabelledBy: string;\n  ariaDescribedBy: string;\n  onPointerDown: (event: PointerEvent) => void;\n  onKeyDown: (event: KeyboardEvent) => void;\n  activeState: HandleActiveState;\n  initialShowButtons?: boolean;\n  onDirectionClick: InternalDragHandleProps[\"onDirectionClick\"];\n  dragHandleTooltipText?: string;\n}\n\nfunction DragHandle(\n  {\n    ariaLabelledBy,\n    ariaDescribedBy,\n    onPointerDown,\n    onKeyDown,\n    activeState,\n    initialShowButtons,\n    onDirectionClick,\n    dragHandleTooltipText,\n  }: DragHandleProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <InternalDragHandle\n      ref={ref}\n      className={clsx(\n        styles.handle,\n        activeState === \"pointer\" && styles.active,\n        activeState === \"uap\" && testUtilsStyles[\"active-uap\"],\n      )}\n      ariaLabelledBy={ariaLabelledBy}\n      ariaDescribedby={ariaDescribedBy}\n      variant=\"drag-indicator\"\n      tooltipText={dragHandleTooltipText}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n      directions={{\n        \"block-start\": \"active\",\n        \"block-end\": \"active\",\n        \"inline-start\": \"active\",\n        \"inline-end\": \"active\",\n      }}\n      triggerMode=\"keyboard-activate\"\n      onDirectionClick={onDirectionClick}\n      initialShowButtons={initialShowButtons}\n      hideButtonsOnDrag={true}\n      clickDragThreshold={CLICK_DRAG_THRESHOLD}\n    />\n  );\n}\n\nexport default forwardRef(DragHandle);\n"]}

package/internal/drag-handle/styles.css.js

@@ -1,7 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_umbhe_t9qqw_9",
-  "active": "awsui_active_umbhe_t9qqw_17"
+  "handle": "awsui_handle_umbhe_1bpr9_9",
+  "active": "awsui_active_umbhe_1bpr9_27"
 };
   

package/internal/drag-handle/styles.scoped.css

@@ -6,33 +6,24 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_handle_umbhe_t9qqw_9:not(#\9) {
+.awsui_handle_umbhe_1bpr9_9:not(#\9) {
   cursor: grab;
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding-block: var(--space-scaled-xxs-pfm1nx, 4px);
+  padding-inline: var(--space-scaled-xxs-pfm1nx, 4px);
+  block-size: auto;
+  color: var(--color-text-interactive-default-ugh9wp, #424650);
 }
-
-.awsui_handle_umbhe_t9qqw_9:not(#\9):active {
-  cursor: grabbing;
+.awsui_handle_umbhe_1bpr9_9:not(#\9):hover {
+  color: var(--color-text-interactive-hover-6naf7i, #0f141a);
 }
 
-.awsui_handle_umbhe_t9qqw_9:not(#\9):not(.awsui_active_umbhe_t9qqw_17):focus-visible {
-  position: relative;
-  box-sizing: border-box;
-  outline: 2px dotted transparent;
-  outline-offset: 3px;
-}
-.awsui_handle_umbhe_t9qqw_9:not(#\9):not(.awsui_active_umbhe_t9qqw_17):focus-visible::before {
-  content: " ";
-  display: block;
-  position: absolute;
-  box-sizing: border-box;
-  inset-inline-start: calc(-1 * 4px);
-  inset-block-start: calc(-1 * 4px);
-  inline-size: calc(100% + 2 * 4px);
-  block-size: calc(100% + 2 * 4px);
-  border-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
-  border: 2px solid var(--color-border-item-focused-uk47pl, #006ce0);
+.awsui_handle_umbhe_1bpr9_9:not(#\9):active {
+  cursor: grabbing;
 }
 
-.awsui_active_umbhe_t9qqw_17:not(#\9) {
+.awsui_active_umbhe_1bpr9_27:not(#\9) {
   outline: none;
 }

package/internal/drag-handle/styles.selectors.js

@@ -2,7 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_umbhe_t9qqw_9",
-  "active": "awsui_active_umbhe_t9qqw_17"
+  "handle": "awsui_handle_umbhe_1bpr9_9",
+  "active": "awsui_active_umbhe_1bpr9_27"
 };
   

package/internal/{handle → drag-handle/test-classes}/styles.css.js

@@ -1,6 +1,6 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_cc1pu_hbgxa_5"
+  "active-uap": "awsui_active-uap_1k7af_1lr5y_5"
 };
   

package/internal/drag-handle/test-classes/styles.scoped.css

@@ -0,0 +1,7 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_active-uap_1k7af_1lr5y_5:not(#\9) {
+  /* used in test-utils */
+}

package/internal/{handle → drag-handle/test-classes}/styles.selectors.js

@@ -2,6 +2,6 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_cc1pu_hbgxa_5"
+  "active-uap": "awsui_active-uap_1k7af_1lr5y_5"
 };
   

package/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "board-components";
-export var PACKAGE_VERSION = "3.0.0 (af44212e)";
+export var PACKAGE_VERSION = "3.0.0 (af05dce2)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "board-components",
-  "PACKAGE_VERSION": "3.0.0 (af44212e)",
+  "PACKAGE_VERSION": "3.0.0 (af05dce2)",
   "THEME": "open-source-visual-refresh",
   "ALWAYS_VISUAL_REFRESH": true
 }

package/internal/global-drag-state-styles/index.js

@@ -6,19 +6,24 @@ function assertNever(value) {
     throw new Error("Unexpected value: " + value);
 }
 function setup({ operation, interactionType }) {
+    const isPointerInteraction = interactionType === "pointer";
     switch (operation) {
         case "insert":
         case "reorder":
-            document.body.classList.add(styles["show-grab-cursor"]);
+            if (isPointerInteraction) {
+                document.body.classList.add(styles["show-grab-cursor"]);
+            }
             break;
         case "resize":
-            document.body.classList.add(styles["show-resize-cursor"]);
+            if (isPointerInteraction) {
+                document.body.classList.add(styles["show-resize-cursor"]);
+            }
             break;
         default:
             // there will be a type error if not all operation types are handled
             assertNever(operation);
     }
-    if (interactionType === "pointer") {
+    if (isPointerInteraction) {
         document.body.classList.add(styles["disable-selection"]);
     }
 }

package/internal/global-drag-state-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/global-drag-state-styles/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAmB,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEpF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,SAAS,WAAW,CAAC,KAAY;IAC/B,MAAM,IAAI,KAAK,CAAC,oBAAoB,GAAG,KAAK,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAmB;IAC5D,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ,CAAC;QACd,KAAK,SAAS;YACZ,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;YACxD,MAAM;QACR,KAAK,QAAQ;YACX,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC;YAC1D,MAAM;QACR;YACE,oEAAoE;YACpE,WAAW,CAAC,SAAS,CAAC,CAAC;KAC1B;IAED,IAAI,eAAe,KAAK,SAAS,EAAE;QACjC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;KAC1D;AACH,CAAC;AAED,SAAS,QAAQ;IACf,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;AACxH,CAAC;AAED,MAAM,UAAU,wBAAwB;IACtC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACpC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC1C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DragAndDropData, useDragSubscription } from \"../dnd-controller/controller\";\n\nimport styles from \"./styles.css.js\";\n\nfunction assertNever(value: never) {\n  throw new Error(\"Unexpected value: \" + value);\n}\n\nfunction setup({ operation, interactionType }: DragAndDropData) {\n  switch (operation) {\n    case \"insert\":\n    case \"reorder\":\n      document.body.classList.add(styles[\"show-grab-cursor\"]);\n      break;\n    case \"resize\":\n      document.body.classList.add(styles[\"show-resize-cursor\"]);\n      break;\n    default:\n      // there will be a type error if not all operation types are handled\n      assertNever(operation);\n  }\n\n  if (interactionType === \"pointer\") {\n    document.body.classList.add(styles[\"disable-selection\"]);\n  }\n}\n\nfunction teardown() {\n  document.body.classList.remove(styles[\"show-grab-cursor\"], styles[\"show-resize-cursor\"], styles[\"disable-selection\"]);\n}\n\nexport function useGlobalDragStateStyles() {\n  useDragSubscription(\"start\", setup);\n  useDragSubscription(\"discard\", teardown);\n  useDragSubscription(\"submit\", teardown);\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/internal/global-drag-state-styles/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAmB,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEpF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,SAAS,WAAW,CAAC,KAAY;IAC/B,MAAM,IAAI,KAAK,CAAC,oBAAoB,GAAG,KAAK,CAAC,CAAC;AAChD,CAAC;AAED,SAAS,KAAK,CAAC,EAAE,SAAS,EAAE,eAAe,EAAmB;IAC5D,MAAM,oBAAoB,GAAG,eAAe,KAAK,SAAS,CAAC;IAC3D,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ,CAAC;QACd,KAAK,SAAS;YACZ,IAAI,oBAAoB,EAAE;gBACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;aACzD;YACD,MAAM;QACR,KAAK,QAAQ;YACX,IAAI,oBAAoB,EAAE;gBACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC;aAC3D;YACD,MAAM;QACR;YACE,oEAAoE;YACpE,WAAW,CAAC,SAAS,CAAC,CAAC;KAC1B;IAED,IAAI,oBAAoB,EAAE;QACxB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;KAC1D;AACH,CAAC;AAED,SAAS,QAAQ;IACf,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,oBAAoB,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;AACxH,CAAC;AAED,MAAM,UAAU,wBAAwB;IACtC,mBAAmB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACpC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;IACzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC1C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DragAndDropData, useDragSubscription } from \"../dnd-controller/controller\";\n\nimport styles from \"./styles.css.js\";\n\nfunction assertNever(value: never) {\n  throw new Error(\"Unexpected value: \" + value);\n}\n\nfunction setup({ operation, interactionType }: DragAndDropData) {\n  const isPointerInteraction = interactionType === \"pointer\";\n  switch (operation) {\n    case \"insert\":\n    case \"reorder\":\n      if (isPointerInteraction) {\n        document.body.classList.add(styles[\"show-grab-cursor\"]);\n      }\n      break;\n    case \"resize\":\n      if (isPointerInteraction) {\n        document.body.classList.add(styles[\"show-resize-cursor\"]);\n      }\n      break;\n    default:\n      // there will be a type error if not all operation types are handled\n      assertNever(operation);\n  }\n\n  if (isPointerInteraction) {\n    document.body.classList.add(styles[\"disable-selection\"]);\n  }\n}\n\nfunction teardown() {\n  document.body.classList.remove(styles[\"show-grab-cursor\"], styles[\"show-resize-cursor\"], styles[\"disable-selection\"]);\n}\n\nexport function useGlobalDragStateStyles() {\n  useDragSubscription(\"start\", setup);\n  useDragSubscription(\"discard\", teardown);\n  useDragSubscription(\"submit\", teardown);\n}\n"]}

package/internal/item-container/index.d.ts

@@ -1,23 +1,84 @@
 import { KeyboardEvent, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from "react";
-import { DropTargetContext } from "../dnd-controller/controller";
-import { BoardItemDefinitionBase, Direction, Transform } from "../interfaces";
+import { DropTargetContext, InteractionType, Operation } from "../dnd-controller/controller";
+import { BoardItemDefinitionBase, Direction, ItemId, Transform } from "../interfaces";
 export interface ItemContainerRef {
     focusDragHandle(): void;
 }
+export type HandleActiveState = null | "pointer" | "uap";
 interface ItemContextType {
+    /**
+     * Flag indicating if a drag or resize interaction is currently active.
+     */
     isActive: boolean;
+    /**
+     * Flag indicating if the item is currently hidden.
+     * (When a board item is moved from the palette to the board and the transition is not submitted)
+     */
+    isHidden: boolean;
     dragHandle: {
-        ref: RefObject<HTMLButtonElement>;
+        /**
+         * Ref to the drag button. Used to focus the drag handle when moving an item
+         * from the palette to the board via keyboard or UAP actions.
+         */
+        ref: RefObject<HTMLDivElement>;
+        /**
+         * Listen to pointerDown events on the drag handle.
+         * Used to start a transition and attach global event handlers.
+         */
         onPointerDown(event: ReactPointerEvent): void;
+        /**
+         * Listen to keyDown events on the drag handle.
+         */
         onKeyDown(event: KeyboardEvent): void;
-        isActive: boolean;
+        /**
+         * Indicating if drag handle is active.
+         */
+        activeState: HandleActiveState;
+        /**
+         * Listen to UAP direction button clicks.
+         */
+        onDirectionClick(direction: KeyboardEvent["key"], operation: HandleOperation): void;
+        /**
+         * Flag indicating if the UAP buttons should be shown. E.g. when a item is moved from
+         * the palette via keyboard or UAP to the board.
+         */
+        initialShowButtons?: boolean;
     };
     resizeHandle: null | {
+        /**
+         * Listen to pointerDown events on the drag handle.
+         * Used to start a transition and attach global event handlers.
+         */
         onPointerDown(event: ReactPointerEvent): void;
+        /**
+         * Listen to keyDown events on the drag handle.
+         */
         onKeyDown(event: KeyboardEvent): void;
-        isActive: boolean;
+        /**
+         * Indicating if resize handle is active.
+         */
+        activeState: HandleActiveState;
+        /**
+         * Listen to UAP direction button clicks.
+         */
+        onDirectionClick(direction: KeyboardEvent["key"], operation: HandleOperation): void;
     };
 }
+export interface Transition {
+    itemId: ItemId;
+    operation: Operation;
+    interactionType: InteractionType;
+    sizeTransform: null | {
+        width: number;
+        height: number;
+    };
+    positionTransform: null | {
+        x: number;
+        y: number;
+    };
+    hasDropTarget?: boolean;
+}
+export type HandleOperation = "drag" | "resize";
 export declare const ItemContext: import("react").Context<ItemContextType | null>;
 export declare function useItemContext(): ItemContextType;
 /**
@@ -50,4 +111,5 @@ export interface ItemContainerProps {
     isRtl: () => boolean;
 }
 export declare const ItemContainer: import("react").ForwardRefExoticComponent<ItemContainerProps & import("react").RefAttributes<ItemContainerRef>>;
+export declare const CLICK_DRAG_THRESHOLD = 3;
 export {};