@cloudscape-design/components 3.0.1310 → 3.0.1312

package/internal/components/checkbox-icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport styles from './styles.css.js';\n\ninterface CheckboxIconProps extends BaseComponentProps {\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  style?: {\n    box?: {\n      fill?: string;\n      stroke?: string;\n    };\n    line?: {\n      stroke?: string;\n    };\n  };\n}\ninterface Dimension {\n  viewBox: string;\n  indeterminate: string;\n  checked: string;\n  xy: number;\n  r: number;\n  size: number;\n}\n\n// Can't use css variables for svg attributes\nconst dimensionsByTheme: Record<NonNullable<'default' | 'refresh'>, Dimension> = {\n  default: {\n    viewBox: '0 0 14 14',\n    indeterminate: '2.5,7 11.5,7',\n    checked: '2.5,7 6,10 11,3',\n    xy: 0.5,\n    r: 1.5,\n    size: 13,\n  },\n  refresh: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 0.5,\n    r: 3,\n    size: 15,\n  },\n};\n\nconst CheckboxIcon = ({\n  checked,\n  indeterminate,\n  disabled = false,\n  readOnly = false,\n  style,\n  ...restProps\n}: CheckboxIconProps) => {\n  const baseProps = getBaseProps(restProps);\n  const theme = useVisualRefresh() ? 'refresh' : 'default';\n  const dimensions = dimensionsByTheme[theme];\n\n  return (\n    <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n      <rect\n        className={clsx(styles['styled-box'], {\n          [styles['styled-box-checked']]: checked,\n          [styles['styled-box-indeterminate']]: indeterminate,\n          [styles['styled-box-disabled']]: disabled,\n          [styles['styled-box-readonly']]: readOnly,\n        })}\n        x={dimensions.xy}\n        y={dimensions.xy}\n        rx={dimensions.r}\n        ry={dimensions.r}\n        width={dimensions.size}\n        height={dimensions.size}\n        style={{ fill: style?.box?.fill, stroke: style?.box?.stroke }}\n      />\n      {checked || indeterminate ? (\n        <polyline\n          className={clsx(styles['styled-line'], {\n            [styles['styled-line-disabled']]: disabled,\n            [styles['styled-line-readonly']]: readOnly,\n          })}\n          points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n          style={{ stroke: style?.line?.stroke }}\n        />\n      ) : null}\n    </svg>\n  );\n};\n\nexport default CheckboxIcon;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/checkbox-icon/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { useOneTheme, useVisualRefresh } from '../../hooks/use-visual-mode';\n\nimport styles from './styles.css.js';\n\ninterface CheckboxIconProps extends BaseComponentProps {\n  checked?: boolean;\n  indeterminate?: boolean;\n  disabled?: boolean;\n  readOnly?: boolean;\n  style?: {\n    box?: {\n      fill?: string;\n      stroke?: string;\n    };\n    line?: {\n      stroke?: string;\n    };\n  };\n}\ninterface Dimension {\n  viewBox: string;\n  indeterminate: string;\n  checked: string;\n  xy: number;\n  r: number;\n  size: number;\n}\n\n// Can't use css variables for svg attributes\nconst dimensionsByTheme: Record<NonNullable<'default' | 'refresh' | 'one'>, Dimension> = {\n  default: {\n    viewBox: '0 0 14 14',\n    indeterminate: '2.5,7 11.5,7',\n    checked: '2.5,7 6,10 11,3',\n    xy: 0.5,\n    r: 1.5,\n    size: 13,\n  },\n  refresh: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 0.5,\n    r: 3,\n    size: 15,\n  },\n  one: {\n    viewBox: '0 0 16 16',\n    indeterminate: '3.5,8 12.5,8',\n    checked: '3.5,8 7,11 12,4',\n    xy: 0.5,\n    r: 2,\n    size: 15,\n  },\n};\n\nconst CheckboxIcon = ({\n  checked,\n  indeterminate,\n  disabled = false,\n  readOnly = false,\n  style,\n  ...restProps\n}: CheckboxIconProps) => {\n  const baseProps = getBaseProps(restProps);\n  const oneTheme = useOneTheme();\n  const theme = useVisualRefresh() ? (oneTheme ? 'one' : 'refresh') : 'default';\n  const dimensions = dimensionsByTheme[theme];\n\n  return (\n    <svg className={styles.root} viewBox={dimensions.viewBox} aria-hidden=\"true\" focusable=\"false\" {...baseProps}>\n      <rect\n        className={clsx(styles['styled-box'], {\n          [styles['styled-box-checked']]: checked,\n          [styles['styled-box-indeterminate']]: indeterminate,\n          [styles['styled-box-disabled']]: disabled,\n          [styles['styled-box-readonly']]: readOnly,\n        })}\n        x={dimensions.xy}\n        y={dimensions.xy}\n        rx={dimensions.r}\n        ry={dimensions.r}\n        width={dimensions.size}\n        height={dimensions.size}\n        style={{ fill: style?.box?.fill, stroke: style?.box?.stroke }}\n      />\n      {checked || indeterminate ? (\n        <polyline\n          className={clsx(styles['styled-line'], {\n            [styles['styled-line-disabled']]: disabled,\n            [styles['styled-line-readonly']]: readOnly,\n          })}\n          points={indeterminate ? dimensions.indeterminate : dimensions.checked}\n          style={{ stroke: style?.line?.stroke }}\n        />\n      ) : null}\n    </svg>\n  );\n};\n\nexport default CheckboxIcon;\n"]}

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

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_sdha6_45ome_145",
-  "handle-size-normal": "awsui_handle-size-normal_sdha6_45ome_153",
-  "handle-size-small": "awsui_handle-size-small_sdha6_45ome_157",
-  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_45ome_160",
-  "handle-disabled": "awsui_handle-disabled_sdha6_45ome_160",
-  "active": "awsui_active_sdha6_45ome_163",
-  "handle-resize-area": "awsui_handle-resize-area_sdha6_45ome_166",
-  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_45ome_173",
-  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_45ome_176",
-  "hide-focus": "awsui_hide-focus_sdha6_45ome_186",
-  "resize-icon": "awsui_resize-icon_sdha6_45ome_208",
-  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_45ome_214",
-  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_45ome_218",
-  "prevent-pointer": "awsui_prevent-pointer_sdha6_45ome_222"
+  "handle": "awsui_handle_sdha6_njfm3_145",
+  "handle-size-normal": "awsui_handle-size-normal_sdha6_njfm3_153",
+  "handle-size-small": "awsui_handle-size-small_sdha6_njfm3_157",
+  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_njfm3_160",
+  "handle-disabled": "awsui_handle-disabled_sdha6_njfm3_160",
+  "active": "awsui_active_sdha6_njfm3_163",
+  "handle-resize-area": "awsui_handle-resize-area_sdha6_njfm3_166",
+  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_njfm3_173",
+  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_njfm3_176",
+  "hide-focus": "awsui_hide-focus_sdha6_njfm3_186",
+  "resize-icon": "awsui_resize-icon_sdha6_njfm3_209",
+  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_njfm3_215",
+  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_njfm3_219",
+  "prevent-pointer": "awsui_prevent-pointer_sdha6_njfm3_223"
 };
   

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

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_handle_sdha6_45ome_145:not(#\9) {
+.awsui_handle_sdha6_njfm3_145:not(#\9) {
   appearance: none;
   color: var(--color-text-interactive-default-ugh9wp, #424650);
   background: transparent;
@@ -151,47 +151,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   touch-action: none;
 }
-.awsui_handle-size-normal_sdha6_45ome_153:not(#\9) {
+.awsui_handle-size-normal_sdha6_njfm3_153:not(#\9) {
   block-size: var(--line-height-body-m-2mh3ke, 20px);
   padding-inline: var(--space-scaled-xxxs-oo06c7, 2px);
 }
-.awsui_handle-size-small_sdha6_45ome_157:not(#\9) {
+.awsui_handle-size-small_sdha6_njfm3_157:not(#\9) {
   block-size: var(--line-height-body-s-nu5hx1, 16px);
 }
-.awsui_handle-drag-indicator_sdha6_45ome_160:not(#\9):not(.awsui_handle-disabled_sdha6_45ome_160) {
+.awsui_handle-drag-indicator_sdha6_njfm3_160:not(#\9):not(.awsui_handle-disabled_sdha6_njfm3_160) {
   cursor: grab;
 }
-.awsui_handle-drag-indicator_sdha6_45ome_160:not(#\9):not(.awsui_handle-disabled_sdha6_45ome_160).awsui_active_sdha6_45ome_163 {
+.awsui_handle-drag-indicator_sdha6_njfm3_160:not(#\9):not(.awsui_handle-disabled_sdha6_njfm3_160).awsui_active_sdha6_njfm3_163 {
   cursor: grabbing;
 }
-.awsui_handle-resize-area_sdha6_45ome_166:not(#\9) {
+.awsui_handle-resize-area_sdha6_njfm3_166:not(#\9) {
   cursor: nwse-resize;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_handle-resize-area_sdha6_45ome_166:not(#\9):dir(rtl) {
+.awsui_handle-resize-area_sdha6_njfm3_166:not(#\9):dir(rtl) {
   cursor: nesw-resize;
 }
-.awsui_handle-resize-horizontal_sdha6_45ome_173:not(#\9) {
+.awsui_handle-resize-horizontal_sdha6_njfm3_173:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_handle-resize-vertical_sdha6_45ome_176:not(#\9) {
+.awsui_handle-resize-vertical_sdha6_njfm3_176:not(#\9) {
   cursor: ns-resize;
 }
-.awsui_handle_sdha6_45ome_145:not(#\9):hover {
+.awsui_handle_sdha6_njfm3_145:not(#\9):hover {
   color: var(--color-text-interactive-hover-6naf7i, #0f141a);
 }
-.awsui_handle_sdha6_45ome_145:not(#\9):focus {
+.awsui_handle_sdha6_njfm3_145:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_45ome_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_45ome_186) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_njfm3_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_njfm3_186) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_45ome_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_45ome_186) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_njfm3_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_njfm3_186) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_45ome_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_45ome_186)::before {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_njfm3_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_njfm3_186)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -204,22 +204,23 @@ body[data-awsui-focus-visible=true] .awsui_handle_sdha6_45ome_145:not(#\9):focus
   border-end-start-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-1uabki, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-uk47pl, #006ce0);
+  z-index: 2;
 }
 
-.awsui_resize-icon_sdha6_45ome_208:not(#\9) {
+.awsui_resize-icon_sdha6_njfm3_209:not(#\9) {
   stroke: var(--color-text-interactive-default-ugh9wp, #424650);
 }
-.awsui_resize-icon_sdha6_45ome_208:not(#\9):hover {
+.awsui_resize-icon_sdha6_njfm3_209:not(#\9):hover {
   stroke: var(--color-text-interactive-hover-6naf7i, #0f141a);
 }
-.awsui_resize-icon-vertical_sdha6_45ome_214:not(#\9) {
+.awsui_resize-icon-vertical_sdha6_njfm3_215:not(#\9) {
   margin-block: auto;
   margin-inline: auto;
 }
-.awsui_resize-icon-horizontal_sdha6_45ome_218:not(#\9) {
+.awsui_resize-icon-horizontal_sdha6_njfm3_219:not(#\9) {
   transform: rotate(90deg);
 }
 
-.awsui_prevent-pointer_sdha6_45ome_222:not(#\9) {
+.awsui_prevent-pointer_sdha6_njfm3_223:not(#\9) {
   pointer-events: none;
 }

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

@@ -2,19 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_sdha6_45ome_145",
-  "handle-size-normal": "awsui_handle-size-normal_sdha6_45ome_153",
-  "handle-size-small": "awsui_handle-size-small_sdha6_45ome_157",
-  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_45ome_160",
-  "handle-disabled": "awsui_handle-disabled_sdha6_45ome_160",
-  "active": "awsui_active_sdha6_45ome_163",
-  "handle-resize-area": "awsui_handle-resize-area_sdha6_45ome_166",
-  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_45ome_173",
-  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_45ome_176",
-  "hide-focus": "awsui_hide-focus_sdha6_45ome_186",
-  "resize-icon": "awsui_resize-icon_sdha6_45ome_208",
-  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_45ome_214",
-  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_45ome_218",
-  "prevent-pointer": "awsui_prevent-pointer_sdha6_45ome_222"
+  "handle": "awsui_handle_sdha6_njfm3_145",
+  "handle-size-normal": "awsui_handle-size-normal_sdha6_njfm3_153",
+  "handle-size-small": "awsui_handle-size-small_sdha6_njfm3_157",
+  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_njfm3_160",
+  "handle-disabled": "awsui_handle-disabled_sdha6_njfm3_160",
+  "active": "awsui_active_sdha6_njfm3_163",
+  "handle-resize-area": "awsui_handle-resize-area_sdha6_njfm3_166",
+  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_njfm3_173",
+  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_njfm3_176",
+  "hide-focus": "awsui_hide-focus_sdha6_njfm3_186",
+  "resize-icon": "awsui_resize-icon_sdha6_njfm3_209",
+  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_njfm3_215",
+  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_njfm3_219",
+  "prevent-pointer": "awsui_prevent-pointer_sdha6_njfm3_223"
 };
   

package/internal/components/drag-handle-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAoPxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAwPxB"}

package/internal/components/drag-handle-wrapper/index.js

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
-import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
+import { getLogicalBoundingClientRect, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import Tooltip from '../tooltip';
 import DirectionButton from './direction-button';
 import PortalOverlay from './portal-overlay';
@@ -17,6 +17,9 @@ const DIRECTIONS_ORDER = ['block-end', 'block-start', 'inline-end', 'inline-star
 export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode = 'focus', initialShowButtons = false, controlledShowButtons = false, wrapperClassName, hideButtonsOnDrag, clickDragThreshold, }) {
     const wrapperRef = useRef(null);
     const dragHandleRef = useRef(null);
+    // Links the portaled UAP buttons back to the drag handle's position in the regular DOM,
+    // so outside-click / focus detection treats them as belonging to the handle's container.
+    const referrerId = useUniqueId('drag-handle');
     const [showTooltip, setShowTooltip] = useState(false);
     const [uncontrolledShowButtons, setUncontrolledShowButtons] = useState(initialShowButtons);
     const isPointerDown = useRef(false);
@@ -172,11 +175,11 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: clsx(testUtilsStyles.root, styles.contents), ref: wrapperRef, onFocus: onWrapperFocusIn, onBlur: onWrapperFocusOut },
             React.createElement("div", { className: styles.contents, onPointerEnter: onTooltipGroupPointerEnter, onPointerLeave: onTooltipGroupPointerLeave },
-                React.createElement("div", { className: clsx(styles['drag-handle'], wrapperClassName), ref: dragHandleRef, onPointerDown: onHandlePointerDown, onKeyDown: onDragHandleKeyDown }, children),
+                React.createElement("div", { className: clsx(styles['drag-handle'], wrapperClassName), ref: dragHandleRef, id: referrerId, onPointerDown: onHandlePointerDown, onKeyDown: onDragHandleKeyDown }, children),
                 !isDisabled && !showButtons && showTooltip && tooltipText && (
                 // Rendered in a portal but pointerenter/pointerleave events still propagate
                 // up the React DOM tree, which is why it's placed in this nested context.
                 React.createElement(Tooltip, { trackRef: dragHandleRef, value: tooltipText, onDismiss: () => setShowTooltip(false) })))),
-        React.createElement(PortalOverlay, { track: dragHandleRef, isDisabled: !showButtons }, visibleDirections.map((direction, index) => directions[direction] && (React.createElement(DirectionButton, { key: direction, show: !isDisabled && showButtons, direction: direction, state: directions[direction], onClick: () => onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick(direction), forcedPosition: forcedPosition, forcedIndex: index }))))));
+        React.createElement(PortalOverlay, { track: dragHandleRef, isDisabled: !showButtons, referrerId: referrerId }, visibleDirections.map((direction, index) => directions[direction] && (React.createElement(DirectionButton, { key: direction, show: !isDisabled && showButtons, direction: direction, state: directions[direction], onClick: () => onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick(direction), forcedPosition: forcedPosition, forcedIndex: index }))))));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/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\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// The UAP buttons are forced to top/bottom position if the handle is close to the screen edge.\nconst FORCED_POSITION_PROXIMITY_PX = 50;\n// Approximate UAP button size with margins to decide forced direction.\nconst UAP_BUTTON_SIZE_PX = 40;\nconst DIRECTIONS_ORDER: Direction[] = ['block-end', 'block-start', 'inline-end', 'inline-start'];\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n  triggerMode = 'focus',\n  initialShowButtons = false,\n  controlledShowButtons = false,\n  wrapperClassName,\n  hideButtonsOnDrag,\n  clickDragThreshold,\n}: DragHandleWrapperProps) {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [uncontrolledShowButtons, setUncontrolledShowButtons] = useState(initialShowButtons);\n\n  const isPointerDown = useRef(false);\n  const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n  const didPointerDrag = useRef(false);\n\n  // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n  // on the handle wouldn't do anything.\n  const isDisabled =\n    !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n  const onWrapperFocusIn: React.FocusEventHandler = event => {\n    // The drag handle is focused when it's either tabbed to, or the pointer\n    // is pressed on it. We exclude handling the pointer press in this handler,\n    // since it could be the start of a drag event - the pointer stuff is\n    // handled in the \"pointerup\" listener instead. In cases where focus is moved\n    // to the button (by manually calling `.focus()`), the buttons should only appear\n    // if the action that triggered the focus move was the result of a keypress.\n    if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowTooltip(false);\n      if (triggerMode === 'focus') {\n        setUncontrolledShowButtons(true);\n      }\n    }\n  };\n\n  const onWrapperFocusOut: React.FocusEventHandler = event => {\n    // Close the directional buttons when the focus leaves the drag handle.\n    // \"focusout\" is also triggered when the user switches to another tab, but\n    // since it'll be returned when they switch back anyway, we exclude that\n    // case by checking for `document.hasFocus()`.\n    if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setUncontrolledShowButtons(false);\n    }\n  };\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    // We need to differentiate between a \"click\" and a \"drag\" action.\n    // We can say a \"click\" happens when a \"pointerdown\" is followed by\n    // a \"pointerup\" with no \"pointermove\" between the two.\n    // However, it would be a poor usability experience if a \"click\" isn't\n    // registered because, while pressing my mouse, I moved it by just one\n    // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n    // `clickDragThreshold` pixels before setting `didPointerDrag` to true.\n    document.addEventListener(\n      'pointermove',\n      event => {\n        if (\n          isPointerDown.current &&\n          initialPointerPosition.current &&\n          (event.clientX > initialPointerPosition.current.x + clickDragThreshold ||\n            event.clientX < initialPointerPosition.current.x - clickDragThreshold ||\n            event.clientY > initialPointerPosition.current.y + clickDragThreshold ||\n            event.clientY < initialPointerPosition.current.y - clickDragThreshold)\n        ) {\n          didPointerDrag.current = true;\n          if (hideButtonsOnDrag) {\n            setUncontrolledShowButtons(false);\n          }\n        }\n      },\n      { signal: controller.signal }\n    );\n\n    // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n    // can be called for both \"pointercancel\" and \"pointerup\" events.\n    const resetPointerDownState = () => {\n      isPointerDown.current = false;\n      initialPointerPosition.current = undefined;\n    };\n\n    document.addEventListener(\n      'pointercancel',\n      () => {\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    document.addEventListener(\n      'pointerup',\n      () => {\n        if (isPointerDown.current && !didPointerDrag.current) {\n          // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n          // Handle this as a \"click\" instead of a \"drag\".\n          setUncontrolledShowButtons(true);\n        }\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    return () => controller.abort();\n  }, [clickDragThreshold, hideButtonsOnDrag]);\n\n  const onHandlePointerDown: React.PointerEventHandler = event => {\n    // Tooltip behavior: the tooltip should appear on hover, but disappear when\n    // the pointer starts dragging (having the tooltip get in the way while\n    // you're trying to drag upwards is annoying). Additionally, the tooltip\n    // shouldn't reappear when dragging ends, but only when the pointer leaves\n    // the drag handle and comes back.\n\n    isPointerDown.current = true;\n    didPointerDrag.current = false;\n    initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n    setShowTooltip(false);\n  };\n\n  // Tooltip behavior: the tooltip should stay open when the cursor moves\n  // from the drag handle into the tooltip content itself. This is why the\n  // handler is set on the wrapper for both the drag handle and the tooltip.\n  const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n    if (!isPointerDown.current) {\n      setShowTooltip(true);\n    }\n  };\n  const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n    setShowTooltip(false);\n  };\n\n  const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n    // For accessibility reasons, pressing escape should always close the floating controls.\n    if (event.key === 'Escape') {\n      setUncontrolledShowButtons(false);\n    } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n      // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n      setUncontrolledShowButtons(prevShowButtons => !prevShowButtons);\n    } else if (\n      event.key !== 'Alt' &&\n      event.key !== 'Control' &&\n      event.key !== 'Meta' &&\n      event.key !== 'Shift' &&\n      triggerMode === 'focus'\n    ) {\n      // Pressing any other key will display the focus-visible ring around the\n      // drag handle if it's in focus, so we should also show the buttons now.\n      setUncontrolledShowButtons(true);\n    }\n  };\n\n  const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;\n\n  const [forcedPosition, setForcedPosition] = useState<null | 'top' | 'bottom'>(null);\n  const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;\n  const visibleDirections = directionsOrder.filter(dir => directions[dir]);\n\n  // Continuously monitor position while buttons are shown to handle CSS transitions/animations.\n  // The position needs to be recalculated as the element may animate into its final position.\n  useEffect(() => {\n    if (!showButtons || !dragHandleRef.current) {\n      if (forcedPosition !== null) {\n        setForcedPosition(null);\n      }\n      return;\n    }\n\n    let frameId: number;\n\n    const checkPosition = () => {\n      if (!dragHandleRef.current) {\n        return;\n      }\n      const rect = getLogicalBoundingClientRect(dragHandleRef.current);\n      const conflicts = {\n        'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,\n        'block-end': window.innerHeight - rect.insetBlockEnd < FORCED_POSITION_PROXIMITY_PX,\n        'inline-start': rect.insetInlineStart < FORCED_POSITION_PROXIMITY_PX,\n        'inline-end': window.innerWidth - rect.insetInlineEnd < FORCED_POSITION_PROXIMITY_PX,\n      };\n      if (visibleDirections.some(direction => conflicts[direction])) {\n        const hasEnoughSpaceAbove = rect.insetBlockStart > visibleDirections.length * UAP_BUTTON_SIZE_PX;\n        setForcedPosition(hasEnoughSpaceAbove ? 'top' : 'bottom');\n      } else {\n        setForcedPosition(null);\n      }\n      frameId = requestAnimationFrame(checkPosition);\n    };\n\n    frameId = requestAnimationFrame(checkPosition);\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [forcedPosition, showButtons, visibleDirections]);\n\n  return (\n    <>\n      {/* Wrapper for focus detection. The buttons are shown when any element inside this wrapper is\n          focused, either via the keyboard or a pointer press. The UAP buttons will never receive focus. */}\n      <div\n        className={clsx(testUtilsStyles.root, styles.contents)}\n        ref={wrapperRef}\n        onFocus={onWrapperFocusIn}\n        onBlur={onWrapperFocusOut}\n      >\n        {/* Wrapper for pointer detection. Determines whether or not the tooltip should be shown. */}\n        <div\n          className={styles.contents}\n          onPointerEnter={onTooltipGroupPointerEnter}\n          onPointerLeave={onTooltipGroupPointerLeave}\n        >\n          {/* Position tracking wrapper used to position the tooltip and drag buttons accurately.\n            Its dimensions must match the inner button's dimensions. */}\n          <div\n            className={clsx(styles['drag-handle'], wrapperClassName)}\n            ref={dragHandleRef}\n            onPointerDown={onHandlePointerDown}\n            onKeyDown={onDragHandleKeyDown}\n          >\n            {children}\n          </div>\n\n          {!isDisabled && !showButtons && showTooltip && tooltipText && (\n            // Rendered in a portal but pointerenter/pointerleave events still propagate\n            // up the React DOM tree, which is why it's placed in this nested context.\n            <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n          )}\n        </div>\n      </div>\n\n      <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n        {visibleDirections.map(\n          (direction, index) =>\n            directions[direction] && (\n              <DirectionButton\n                key={direction}\n                show={!isDisabled && showButtons}\n                direction={direction}\n                state={directions[direction]}\n                onClick={() => onDirectionClick?.(direction)}\n                forcedPosition={forcedPosition}\n                forcedIndex={index}\n              />\n            )\n        )}\n      </PortalOverlay>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/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\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// The UAP buttons are forced to top/bottom position if the handle is close to the screen edge.\nconst FORCED_POSITION_PROXIMITY_PX = 50;\n// Approximate UAP button size with margins to decide forced direction.\nconst UAP_BUTTON_SIZE_PX = 40;\nconst DIRECTIONS_ORDER: Direction[] = ['block-end', 'block-start', 'inline-end', 'inline-start'];\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n  triggerMode = 'focus',\n  initialShowButtons = false,\n  controlledShowButtons = false,\n  wrapperClassName,\n  hideButtonsOnDrag,\n  clickDragThreshold,\n}: DragHandleWrapperProps) {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  // Links the portaled UAP buttons back to the drag handle's position in the regular DOM,\n  // so outside-click / focus detection treats them as belonging to the handle's container.\n  const referrerId = useUniqueId('drag-handle');\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [uncontrolledShowButtons, setUncontrolledShowButtons] = useState(initialShowButtons);\n\n  const isPointerDown = useRef(false);\n  const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n  const didPointerDrag = useRef(false);\n\n  // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n  // on the handle wouldn't do anything.\n  const isDisabled =\n    !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n  const onWrapperFocusIn: React.FocusEventHandler = event => {\n    // The drag handle is focused when it's either tabbed to, or the pointer\n    // is pressed on it. We exclude handling the pointer press in this handler,\n    // since it could be the start of a drag event - the pointer stuff is\n    // handled in the \"pointerup\" listener instead. In cases where focus is moved\n    // to the button (by manually calling `.focus()`), the buttons should only appear\n    // if the action that triggered the focus move was the result of a keypress.\n    if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowTooltip(false);\n      if (triggerMode === 'focus') {\n        setUncontrolledShowButtons(true);\n      }\n    }\n  };\n\n  const onWrapperFocusOut: React.FocusEventHandler = event => {\n    // Close the directional buttons when the focus leaves the drag handle.\n    // \"focusout\" is also triggered when the user switches to another tab, but\n    // since it'll be returned when they switch back anyway, we exclude that\n    // case by checking for `document.hasFocus()`.\n    if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setUncontrolledShowButtons(false);\n    }\n  };\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    // We need to differentiate between a \"click\" and a \"drag\" action.\n    // We can say a \"click\" happens when a \"pointerdown\" is followed by\n    // a \"pointerup\" with no \"pointermove\" between the two.\n    // However, it would be a poor usability experience if a \"click\" isn't\n    // registered because, while pressing my mouse, I moved it by just one\n    // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n    // `clickDragThreshold` pixels before setting `didPointerDrag` to true.\n    document.addEventListener(\n      'pointermove',\n      event => {\n        if (\n          isPointerDown.current &&\n          initialPointerPosition.current &&\n          (event.clientX > initialPointerPosition.current.x + clickDragThreshold ||\n            event.clientX < initialPointerPosition.current.x - clickDragThreshold ||\n            event.clientY > initialPointerPosition.current.y + clickDragThreshold ||\n            event.clientY < initialPointerPosition.current.y - clickDragThreshold)\n        ) {\n          didPointerDrag.current = true;\n          if (hideButtonsOnDrag) {\n            setUncontrolledShowButtons(false);\n          }\n        }\n      },\n      { signal: controller.signal }\n    );\n\n    // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n    // can be called for both \"pointercancel\" and \"pointerup\" events.\n    const resetPointerDownState = () => {\n      isPointerDown.current = false;\n      initialPointerPosition.current = undefined;\n    };\n\n    document.addEventListener(\n      'pointercancel',\n      () => {\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    document.addEventListener(\n      'pointerup',\n      () => {\n        if (isPointerDown.current && !didPointerDrag.current) {\n          // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n          // Handle this as a \"click\" instead of a \"drag\".\n          setUncontrolledShowButtons(true);\n        }\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    return () => controller.abort();\n  }, [clickDragThreshold, hideButtonsOnDrag]);\n\n  const onHandlePointerDown: React.PointerEventHandler = event => {\n    // Tooltip behavior: the tooltip should appear on hover, but disappear when\n    // the pointer starts dragging (having the tooltip get in the way while\n    // you're trying to drag upwards is annoying). Additionally, the tooltip\n    // shouldn't reappear when dragging ends, but only when the pointer leaves\n    // the drag handle and comes back.\n\n    isPointerDown.current = true;\n    didPointerDrag.current = false;\n    initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n    setShowTooltip(false);\n  };\n\n  // Tooltip behavior: the tooltip should stay open when the cursor moves\n  // from the drag handle into the tooltip content itself. This is why the\n  // handler is set on the wrapper for both the drag handle and the tooltip.\n  const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n    if (!isPointerDown.current) {\n      setShowTooltip(true);\n    }\n  };\n  const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n    setShowTooltip(false);\n  };\n\n  const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n    // For accessibility reasons, pressing escape should always close the floating controls.\n    if (event.key === 'Escape') {\n      setUncontrolledShowButtons(false);\n    } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n      // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n      setUncontrolledShowButtons(prevShowButtons => !prevShowButtons);\n    } else if (\n      event.key !== 'Alt' &&\n      event.key !== 'Control' &&\n      event.key !== 'Meta' &&\n      event.key !== 'Shift' &&\n      triggerMode === 'focus'\n    ) {\n      // Pressing any other key will display the focus-visible ring around the\n      // drag handle if it's in focus, so we should also show the buttons now.\n      setUncontrolledShowButtons(true);\n    }\n  };\n\n  const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;\n\n  const [forcedPosition, setForcedPosition] = useState<null | 'top' | 'bottom'>(null);\n  const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;\n  const visibleDirections = directionsOrder.filter(dir => directions[dir]);\n\n  // Continuously monitor position while buttons are shown to handle CSS transitions/animations.\n  // The position needs to be recalculated as the element may animate into its final position.\n  useEffect(() => {\n    if (!showButtons || !dragHandleRef.current) {\n      if (forcedPosition !== null) {\n        setForcedPosition(null);\n      }\n      return;\n    }\n\n    let frameId: number;\n\n    const checkPosition = () => {\n      if (!dragHandleRef.current) {\n        return;\n      }\n      const rect = getLogicalBoundingClientRect(dragHandleRef.current);\n      const conflicts = {\n        'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,\n        'block-end': window.innerHeight - rect.insetBlockEnd < FORCED_POSITION_PROXIMITY_PX,\n        'inline-start': rect.insetInlineStart < FORCED_POSITION_PROXIMITY_PX,\n        'inline-end': window.innerWidth - rect.insetInlineEnd < FORCED_POSITION_PROXIMITY_PX,\n      };\n      if (visibleDirections.some(direction => conflicts[direction])) {\n        const hasEnoughSpaceAbove = rect.insetBlockStart > visibleDirections.length * UAP_BUTTON_SIZE_PX;\n        setForcedPosition(hasEnoughSpaceAbove ? 'top' : 'bottom');\n      } else {\n        setForcedPosition(null);\n      }\n      frameId = requestAnimationFrame(checkPosition);\n    };\n\n    frameId = requestAnimationFrame(checkPosition);\n\n    return () => {\n      cancelAnimationFrame(frameId);\n    };\n  }, [forcedPosition, showButtons, visibleDirections]);\n\n  return (\n    <>\n      {/* Wrapper for focus detection. The buttons are shown when any element inside this wrapper is\n          focused, either via the keyboard or a pointer press. The UAP buttons will never receive focus. */}\n      <div\n        className={clsx(testUtilsStyles.root, styles.contents)}\n        ref={wrapperRef}\n        onFocus={onWrapperFocusIn}\n        onBlur={onWrapperFocusOut}\n      >\n        {/* Wrapper for pointer detection. Determines whether or not the tooltip should be shown. */}\n        <div\n          className={styles.contents}\n          onPointerEnter={onTooltipGroupPointerEnter}\n          onPointerLeave={onTooltipGroupPointerLeave}\n        >\n          {/* Position tracking wrapper used to position the tooltip and drag buttons accurately.\n            Its dimensions must match the inner button's dimensions. */}\n          <div\n            className={clsx(styles['drag-handle'], wrapperClassName)}\n            ref={dragHandleRef}\n            id={referrerId}\n            onPointerDown={onHandlePointerDown}\n            onKeyDown={onDragHandleKeyDown}\n          >\n            {children}\n          </div>\n\n          {!isDisabled && !showButtons && showTooltip && tooltipText && (\n            // Rendered in a portal but pointerenter/pointerleave events still propagate\n            // up the React DOM tree, which is why it's placed in this nested context.\n            <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n          )}\n        </div>\n      </div>\n\n      <PortalOverlay track={dragHandleRef} isDisabled={!showButtons} referrerId={referrerId}>\n        {visibleDirections.map(\n          (direction, index) =>\n            directions[direction] && (\n              <DirectionButton\n                key={direction}\n                show={!isDisabled && showButtons}\n                direction={direction}\n                state={directions[direction]}\n                onClick={() => onDirectionClick?.(direction)}\n                forcedPosition={forcedPosition}\n                forcedIndex={index}\n              />\n            )\n        )}\n      </PortalOverlay>\n    </>\n  );\n}\n"]}

package/internal/components/drag-handle-wrapper/portal-overlay.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 export default function PortalOverlay({
   track,
   isDisabled,
+  referrerId,
   children
 }: {
   track: React.RefObject<HTMLElement | null>;
   isDisabled: boolean;
+  referrerId?: string;
   children: React.ReactNode;
 }): JSX.Element;

package/internal/components/drag-handle-wrapper/portal-overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eAkEA"}
+{"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACpC,KAAK,EACL,UAAU,EACV,UAAU,EACV,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,eA0EA"}

package/internal/components/drag-handle-wrapper/portal-overlay.js

@@ -4,7 +4,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { getIsRtl, getLogicalBoundingClientRect, getScrollInlineStart, Portal, } from '@cloudscape-design/component-toolkit/internal';
 import styles from './styles.css.js';
-export default function PortalOverlay({ track, isDisabled, children, }) {
+export default function PortalOverlay({ track, isDisabled, referrerId, children, }) {
     const ref = useRef(null);
     const [container, setContainer] = useState(null);
     useLayoutEffect(() => {
@@ -57,7 +57,7 @@ export default function PortalOverlay({ track, isDisabled, children, }) {
         };
     }, [isDisabled, track]);
     return (React.createElement(Portal, { container: container },
-        React.createElement("span", { ref: ref, className: clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled']) },
+        React.createElement("span", { ref: ref, "data-awsui-referrer-id": referrerId, className: clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled']) },
             React.createElement("span", { className: styles['portal-overlay-contents'] }, children))));
 }
 //# sourceMappingURL=portal-overlay.js.map

package/internal/components/drag-handle-wrapper/portal-overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.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 {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getScrollInlineStart,\n  Portal,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({\n  track,\n  isDisabled,\n  children,\n}: {\n  track: React.RefObject<HTMLElement | null>;\n  isDisabled: boolean;\n  children: React.ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (track.current) {\n      const newContainer = track.current.ownerDocument.createElement('div');\n      track.current.ownerDocument.body.appendChild(newContainer);\n      setContainer(newContainer);\n      return () => newContainer.remove();\n    }\n  }, [track]);\n\n  useEffect(() => {\n    if (track.current === null || isDisabled) {\n      return;\n    }\n\n    let cleanedUp = false;\n    let lastX: number | undefined;\n    let lastY: number | undefined;\n    let lastInlineSize: number | undefined;\n    let lastBlockSize: number | undefined;\n    const updateElement = () => {\n      // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.\n      if (track.current && ref.current && document.body.contains(ref.current)) {\n        const isRtl = getIsRtl(ref.current);\n        const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(\n          track.current\n        );\n        // For simplicity, we just make all our calculations independent of\n        // the browser's scrolling edge. When it comes to applying the changes,\n        // translate is independent of writing direction, so we need to invert\n        // the X coordinate ourselves just before applying the values.\n        const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n        const newY = insetBlockStart + document.documentElement.scrollTop;\n        if (lastX !== newX || lastY !== newY) {\n          ref.current.style.translate = `${newX}px ${newY}px`;\n          lastX = newX;\n          lastY = newY;\n        }\n        if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n          ref.current.style.width = `${inlineSize}px`;\n          ref.current.style.height = `${blockSize}px`;\n          lastInlineSize = inlineSize;\n          lastBlockSize = blockSize;\n        }\n      }\n      if (!cleanedUp) {\n        requestAnimationFrame(updateElement);\n      }\n    };\n    updateElement();\n\n    return () => {\n      cleanedUp = true;\n    };\n  }, [isDisabled, track]);\n\n  return (\n    <Portal container={container}>\n      <span ref={ref} className={clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled'])}>\n        <span className={styles['portal-overlay-contents']}>{children}</span>\n      </span>\n    </Portal>\n  );\n}\n"]}
+{"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.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 {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getScrollInlineStart,\n  Portal,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({\n  track,\n  isDisabled,\n  referrerId,\n  children,\n}: {\n  track: React.RefObject<HTMLElement | null>;\n  isDisabled: boolean;\n  referrerId?: string;\n  children: React.ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n\n  useLayoutEffect(() => {\n    if (track.current) {\n      const newContainer = track.current.ownerDocument.createElement('div');\n      track.current.ownerDocument.body.appendChild(newContainer);\n      setContainer(newContainer);\n      return () => newContainer.remove();\n    }\n  }, [track]);\n\n  useEffect(() => {\n    if (track.current === null || isDisabled) {\n      return;\n    }\n\n    let cleanedUp = false;\n    let lastX: number | undefined;\n    let lastY: number | undefined;\n    let lastInlineSize: number | undefined;\n    let lastBlockSize: number | undefined;\n    const updateElement = () => {\n      // It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.\n      if (track.current && ref.current && document.body.contains(ref.current)) {\n        const isRtl = getIsRtl(ref.current);\n        const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(\n          track.current\n        );\n        // For simplicity, we just make all our calculations independent of\n        // the browser's scrolling edge. When it comes to applying the changes,\n        // translate is independent of writing direction, so we need to invert\n        // the X coordinate ourselves just before applying the values.\n        const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n        const newY = insetBlockStart + document.documentElement.scrollTop;\n        if (lastX !== newX || lastY !== newY) {\n          ref.current.style.translate = `${newX}px ${newY}px`;\n          lastX = newX;\n          lastY = newY;\n        }\n        if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n          ref.current.style.width = `${inlineSize}px`;\n          ref.current.style.height = `${blockSize}px`;\n          lastInlineSize = inlineSize;\n          lastBlockSize = blockSize;\n        }\n      }\n      if (!cleanedUp) {\n        requestAnimationFrame(updateElement);\n      }\n    };\n    updateElement();\n\n    return () => {\n      cleanedUp = true;\n    };\n  }, [isDisabled, track]);\n\n  return (\n    <Portal container={container}>\n      {/* `data-awsui-referrer-id` links this portaled overlay back to the tracked element in the\n          regular DOM, so outside-click / focus detection (see `nodeBelongs`) treats interactions\n          with the UAP buttons as belonging to wherever the drag handle is mounted (e.g. inside a\n          dropdown), instead of as a click outside it. */}\n      <span\n        ref={ref}\n        data-awsui-referrer-id={referrerId}\n        className={clsx(styles['portal-overlay'], isDisabled && styles['portal-overlay-disabled'])}\n      >\n        <span className={styles['portal-overlay-contents']}>{children}</span>\n      </span>\n    </Portal>\n  );\n}\n"]}

package/internal/components/expand-toggle-button/index.js

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useRef } from 'react';
 import clsx from 'clsx';
-import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
+import { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import InternalIcon from '../../../icon/internal';
 import styles from './styles.css.js';
 export function ExpandToggleButton({ isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, customIcon, className, disableFocusHighlight, }) {
     const buttonRef = useRef(null);
     const { tabIndex } = useSingleTabStopNavigation(buttonRef);
-    return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: "small", name: "caret-down-filled", className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
+    return (React.createElement("button", { type: "button", ref: buttonRef, tabIndex: tabIndex, "aria-label": isExpanded ? collapseButtonLabel : expandButtonLabel, "aria-expanded": isExpanded, className: clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className), onClick: onExpandableItemToggle }, customIcon !== null && customIcon !== void 0 ? customIcon : (React.createElement(InternalIcon, { size: isThemeActive(Theme.OneTheme) ? 'x-small' : 'small', name: isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled', className: clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded']) }))));
 }
 //# sourceMappingURL=index.js.map

package/internal/components/expand-toggle-button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GAStB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,IAE9B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,mBAAmB,EACxB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n  isExpanded,\n  onExpandableItemToggle,\n  expandButtonLabel,\n  collapseButtonLabel,\n  customIcon,\n  className,\n  disableFocusHighlight,\n}: {\n  isExpanded?: boolean;\n  onExpandableItemToggle?: () => void;\n  expandButtonLabel?: string;\n  collapseButtonLabel?: string;\n  customIcon?: React.ReactNode;\n  className?: string;\n  disableFocusHighlight?: boolean;\n}) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      tabIndex={tabIndex}\n      aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n      aria-expanded={isExpanded}\n      className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n      onClick={onExpandableItemToggle}\n    >\n      {customIcon ?? (\n        <InternalIcon\n          size=\"small\"\n          name=\"caret-down-filled\"\n          className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n        />\n      )}\n    </button>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/expand-toggle-button/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAEjH,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,UAAU,kBAAkB,CAAC,EACjC,UAAU,EACV,sBAAsB,EACtB,iBAAiB,EACjB,mBAAmB,EACnB,UAAU,EACV,SAAS,EACT,qBAAqB,GAStB;IACC,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,GAAG,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAE3D,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,mBACjD,UAAU,EACzB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,qBAAqB,IAAI,MAAM,CAAC,yBAAyB,CAAC,EAAE,SAAS,CAAC,EAC/G,OAAO,EAAE,sBAAsB,IAE9B,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,CACb,oBAAC,YAAY,IACX,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACzD,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,EACxE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,UAAU,IAAI,MAAM,CAAC,6BAA6B,CAAC,CAAC,GAClG,CACH,CACM,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme, useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport function ExpandToggleButton({\n  isExpanded,\n  onExpandableItemToggle,\n  expandButtonLabel,\n  collapseButtonLabel,\n  customIcon,\n  className,\n  disableFocusHighlight,\n}: {\n  isExpanded?: boolean;\n  onExpandableItemToggle?: () => void;\n  expandButtonLabel?: string;\n  collapseButtonLabel?: string;\n  customIcon?: React.ReactNode;\n  className?: string;\n  disableFocusHighlight?: boolean;\n}) {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { tabIndex } = useSingleTabStopNavigation(buttonRef);\n\n  return (\n    <button\n      type=\"button\"\n      ref={buttonRef}\n      tabIndex={tabIndex}\n      aria-label={isExpanded ? collapseButtonLabel : expandButtonLabel}\n      aria-expanded={isExpanded}\n      className={clsx(styles['expand-toggle'], disableFocusHighlight && styles['disable-focus-highlight'], className)}\n      onClick={onExpandableItemToggle}\n    >\n      {customIcon ?? (\n        <InternalIcon\n          size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'small'}\n          name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n          className={clsx(styles['expand-toggle-icon'], isExpanded && styles['expand-toggle-icon-expanded'])}\n        />\n      )}\n    </button>\n  );\n}\n"]}

package/internal/environment.js

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (22d5a6b4)";
-export var GIT_SHA = "22d5a6b4";
+export var PACKAGE_VERSION = "3.0.0 (82d11d66)";
+export var GIT_SHA = "82d11d66";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/internal/environment.json

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (22d5a6b4)",
-  "GIT_SHA": "22d5a6b4",
+  "PACKAGE_VERSION": "3.0.0 (82d11d66)",
+  "GIT_SHA": "82d11d66",
   "THEME": "open-source-visual-refresh",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": true,

package/internal/generated/styles/tokens.d.ts

@@ -300,6 +300,7 @@ export const colorBackgroundButtonNormalDisabled: string;
 export const colorBackgroundButtonNormalHover: string;
 export const colorBackgroundToggleButtonNormalPressed: string;
 export const colorBackgroundToggleButtonNormalDefault: string;
+export const colorBackgroundToggleButtonNormalHover: string;
 export const colorBackgroundButtonPrimaryActive: string;
 export const colorBackgroundButtonPrimaryDefault: string;
 export const colorBackgroundButtonPrimaryDisabled: string;
@@ -339,6 +340,7 @@ export const colorBackgroundLayoutMain: string;
 export const colorBackgroundDrawer: string;
 export const colorBackgroundDrawerBackdrop: string;
 export const colorBackgroundLayoutMobilePanel: string;
+export const colorBackgroundLayoutPanel: string;
 export const colorBackgroundLayoutPanelContent: string;
 export const colorBackgroundLayoutPanelHover: string;
 export const colorBackgroundLayoutToolbar: string;
@@ -405,6 +407,8 @@ export const colorBorderButtonLinkDisabled: string;
 export const colorBorderButtonNormalActive: string;
 export const colorBorderButtonNormalDefault: string;
 export const colorBorderToggleButtonNormalPressed: string;
+export const colorBorderToggleButtonNormalDefault: string;
+export const colorBorderToggleButtonNormalHover: string;
 export const colorBorderButtonNormalDisabled: string;
 export const colorTextButtonNormalDisabled: string;
 export const colorBorderButtonNormalHover: string;
@@ -436,6 +440,7 @@ export const colorBorderDividerDefault: string;
 export const colorBorderDividerPanelBottom: string;
 export const colorBorderDividerPanelSide: string;
 export const colorBorderDividerSecondary: string;
+export const colorBorderDividerTableGroup: string;
 export const colorBorderDropdownContainer: string;
 export const colorBorderDropdownGroup: string;
 export const colorBorderDropdownItemDefault: string;
@@ -459,6 +464,7 @@ export const colorBorderSegmentActive: string;
 export const colorBorderSegmentDefault: string;
 export const colorBorderSegmentDisabled: string;
 export const colorBorderSegmentHover: string;
+export const colorBorderSegmentWrapper: string;
 export const colorBorderStatusError: string;
 export const colorBorderStatusInfo: string;
 export const colorBorderStatusSuccess: string;
@@ -476,6 +482,7 @@ export const colorForegroundControlReadOnly: string;
 export const colorShadowDefault: string;
 export const colorShadowMedium: string;
 export const colorShadowSide: string;
+export const colorShadowToggleHandle: string;
 export const colorStrokeChartLine: string;
 export const colorStrokeCodeEditorGutterActiveLineDefault: string;
 export const colorStrokeCodeEditorGutterActiveLineHover: string;
@@ -732,6 +739,7 @@ export const borderRadiusStatusIndicator: string;
 export const borderRadiusTabsFocusRing: string;
 export const borderRadiusTiles: string;
 export const borderRadiusToken: string;
+export const borderRadiusTokenInline: string;
 export const borderRadiusTutorialPanelItem: string;
 export const borderTableStickyWidth: string;
 export const borderWidthActionCardActive: string;

package/internal/generated/styles/tokens.js

@@ -300,6 +300,7 @@ export var colorBackgroundButtonNormalDisabled = "var(--color-background-button-
 export var colorBackgroundButtonNormalHover = "var(--color-background-button-normal-hover-53op9s, #f0fbff)";
 export var colorBackgroundToggleButtonNormalPressed = "var(--color-background-toggle-button-normal-pressed-4khex7, #d1f1ff)";
 export var colorBackgroundToggleButtonNormalDefault = "var(--color-background-toggle-button-normal-default-ipnqr5, #ffffff)";
+export var colorBackgroundToggleButtonNormalHover = "var(--color-background-toggle-button-normal-hover-0r2lj4, #f0fbff)";
 export var colorBackgroundButtonPrimaryActive = "var(--color-background-button-primary-active-5cqoqt, #002b66)";
 export var colorBackgroundButtonPrimaryDefault = "var(--color-background-button-primary-default-vdt0fu, #006ce0)";
 export var colorBackgroundButtonPrimaryDisabled = "var(--color-background-button-primary-disabled-sgo4zo, #ebebf0)";
@@ -339,6 +340,7 @@ export var colorBackgroundLayoutMain = "var(--color-background-layout-main-5ilwc
 export var colorBackgroundDrawer = "var(--color-background-drawer-5hs0eh, #ffffff)";
 export var colorBackgroundDrawerBackdrop = "var(--color-background-drawer-backdrop-ducxi3, rgba(35, 43, 55, 0.7))";
 export var colorBackgroundLayoutMobilePanel = "var(--color-background-layout-mobile-panel-ed0ava, #0f141a)";
+export var colorBackgroundLayoutPanel = "var(--color-background-layout-panel-jv6exs, #ffffff)";
 export var colorBackgroundLayoutPanelContent = "var(--color-background-layout-panel-content-xto15e, #ffffff)";
 export var colorBackgroundLayoutPanelHover = "var(--color-background-layout-panel-hover-tguulw, #ebebf0)";
 export var colorBackgroundLayoutToolbar = "var(--color-background-layout-toolbar-y0cu80, #ffffff)";
@@ -405,6 +407,8 @@ export var colorBorderButtonLinkDisabled = "var(--color-border-button-link-disab
 export var colorBorderButtonNormalActive = "var(--color-border-button-normal-active-ru7yhb, #002b66)";
 export var colorBorderButtonNormalDefault = "var(--color-border-button-normal-default-glqfp1, #006ce0)";
 export var colorBorderToggleButtonNormalPressed = "var(--color-border-toggle-button-normal-pressed-tq8o41, #006ce0)";
+export var colorBorderToggleButtonNormalDefault = "var(--color-border-toggle-button-normal-default-13wcrj, #006ce0)";
+export var colorBorderToggleButtonNormalHover = "var(--color-border-toggle-button-normal-hover-0gzb6n, #002b66)";
 export var colorBorderButtonNormalDisabled = "var(--color-border-button-normal-disabled-pkhetz, #b4b4bb)";
 export var colorTextButtonNormalDisabled = "var(--color-text-button-normal-disabled-05p74s, #8c8c94)";
 export var colorBorderButtonNormalHover = "var(--color-border-button-normal-hover-6a2tdq, #002b66)";
@@ -436,6 +440,7 @@ export var colorBorderDividerDefault = "var(--color-border-divider-default-nr68j
 export var colorBorderDividerPanelBottom = "var(--color-border-divider-panel-bottom-bruvuz, #c6c6cd)";
 export var colorBorderDividerPanelSide = "var(--color-border-divider-panel-side-an0w07, #c6c6cd)";
 export var colorBorderDividerSecondary = "var(--color-border-divider-secondary-qoitch, #ebebf0)";
+export var colorBorderDividerTableGroup = "var(--color-border-divider-table-group-l55omi, #8c8c94)";
 export var colorBorderDropdownContainer = "var(--color-border-dropdown-container-cmthq7, #b4b4bb)";
 export var colorBorderDropdownGroup = "var(--color-border-dropdown-group-ylcnh8, #c6c6cd)";
 export var colorBorderDropdownItemDefault = "var(--color-border-dropdown-item-default-kape37, #c6c6cd)";
@@ -459,6 +464,7 @@ export var colorBorderSegmentActive = "var(--color-border-segment-active-ls9t4n,
 export var colorBorderSegmentDefault = "var(--color-border-segment-default-6ig2mo, #424650)";
 export var colorBorderSegmentDisabled = "var(--color-border-segment-disabled-fcrbcl, #424650)";
 export var colorBorderSegmentHover = "var(--color-border-segment-hover-0o9ey3, #424650)";
+export var colorBorderSegmentWrapper = "var(--color-border-segment-wrapper-mvxnza, #8c8c94)";
 export var colorBorderStatusError = "var(--color-border-status-error-j8acpp, #db0000)";
 export var colorBorderStatusInfo = "var(--color-border-status-info-qf6jok, #006ce0)";
 export var colorBorderStatusSuccess = "var(--color-border-status-success-8z5f8u, #00802f)";
@@ -476,6 +482,7 @@ export var colorForegroundControlReadOnly = "var(--color-foreground-control-read
 export var colorShadowDefault = "var(--color-shadow-default-o7dmmm, rgba(15, 20, 26, 0.12))";
 export var colorShadowMedium = "var(--color-shadow-medium-x7of55, rgba(15, 20, 26, 0.12))";
 export var colorShadowSide = "var(--color-shadow-side-rtsbda, rgba(15, 20, 26, 0.12))";
+export var colorShadowToggleHandle = "var(--color-shadow-toggle-handle-at8aqh, rgba(0, 0, 0, 0.25))";
 export var colorStrokeChartLine = "var(--color-stroke-chart-line-3nsnk6, #8c8c94)";
 export var colorStrokeCodeEditorGutterActiveLineDefault = "var(--color-stroke-code-editor-gutter-active-line-default-5hrdmu, #dedee3)";
 export var colorStrokeCodeEditorGutterActiveLineHover = "var(--color-stroke-code-editor-gutter-active-line-hover-vqrb6s, #f9f9fa)";
@@ -732,6 +739,7 @@ export var borderRadiusStatusIndicator = "var(--border-radius-status-indicator-f
 export var borderRadiusTabsFocusRing = "var(--border-radius-tabs-focus-ring-o4qku1, 20px)";
 export var borderRadiusTiles = "var(--border-radius-tiles-wm1vgw, 8px)";
 export var borderRadiusToken = "var(--border-radius-token-ycnemh, 8px)";
+export var borderRadiusTokenInline = "var(--border-radius-token-inline-tio0a0, 4px)";
 export var borderRadiusTutorialPanelItem = "var(--border-radius-tutorial-panel-item-ojaqxg, 8px)";
 export var borderTableStickyWidth = "var(--border-table-sticky-width-ai31mi, 1px)";
 export var borderWidthActionCardActive = "var(--border-width-action-card-active-pwtgzu, 1px)";