@cloudscape-design/components 3.0.866 → 3.0.867

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

@@ -1,17 +1,35 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { forwardRef, useRef } from 'react';
 import clsx from 'clsx';
 import InternalIcon from '../../../icon/internal';
+import useForwardFocus from '../../hooks/forward-focus';
+import { ResizeIcon } from './resize-icon';
 import styles from './styles.css.js';
-export default function DragHandle({ ariaLabel, ariaDescribedby, disabled, onPointerDown, onKeyDown, }) {
+const DragHandle = forwardRef(({ variant = 'drag-indicator', size = 'normal', ariaLabel, ariaDescribedby, ariaValue, disabled, onPointerDown, onKeyDown, className, }, ref) => {
+    const dragHandleRefObject = useRef(null);
+    useForwardFocus(ref, dragHandleRefObject);
+    const iconProps = (() => {
+        const shared = { variant: disabled ? 'disabled' : undefined, size };
+        switch (variant) {
+            case 'drag-indicator':
+                return Object.assign(Object.assign({}, shared), { name: 'drag-indicator' });
+            case 'resize-area':
+                return Object.assign(Object.assign({}, shared), { name: 'resize-area' });
+            case 'resize-horizontal':
+                return Object.assign(Object.assign({}, shared), { svg: React.createElement(ResizeIcon, { variant: "horizontal" }) });
+            case 'resize-vertical':
+                return Object.assign(Object.assign({}, shared), { svg: React.createElement(ResizeIcon, { variant: "vertical" }) });
+        }
+    })();
     return (
     // We need to use a div with button role instead of a button
     // so that Safari will focus on it when clicking it.
     // (See https://bugs.webkit.org/show_bug.cgi?id=22261)
     // Otherwise, we can't reliably catch keyboard events coming from the handle
     // when it is being dragged.
-    React.createElement("div", { role: "button", tabIndex: 0, className: clsx(styles.handle, disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, onPointerDown: onPointerDown, onKeyDown: onKeyDown },
-        React.createElement(InternalIcon, { variant: disabled ? 'disabled' : undefined, name: "drag-indicator" })));
-}
+    React.createElement("div", { ref: dragHandleRefObject, role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onKeyDown: onKeyDown },
+        React.createElement(InternalIcon, Object.assign({}, iconProps))));
+});
+export default DragHandle;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAUrC,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,SAAS,EACT,eAAe,EACf,QAAQ,EACR,aAAa,EACb,SAAS,GACO;IAChB,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CAAC,gBACzD,SAAS,sBACH,eAAe,mBAClB,QAAQ,EACvB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,IAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC9E,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../../icon/internal';\n\nimport styles from './styles.css.js';\n\nexport interface DragHandleProps {\n  ariaLabel: string;\n  ariaDescribedby?: string;\n  disabled?: boolean;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n}\n\nexport default function DragHandle({\n  ariaLabel,\n  ariaDescribedby,\n  disabled,\n  onPointerDown,\n  onKeyDown,\n}: DragHandleProps) {\n  return (\n    // We need to use a div with button role instead of a button\n    // so that Safari will focus on it when clicking it.\n    // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n    // Otherwise, we can't reliably catch keyboard events coming from the handle\n    // when it is being dragged.\n    <div\n      role=\"button\"\n      tabIndex={0}\n      className={clsx(styles.handle, disabled && styles['handle-disabled'])}\n      aria-label={ariaLabel}\n      aria-describedby={ariaDescribedby}\n      aria-disabled={disabled}\n      onPointerDown={onPointerDown}\n      onKeyDown={onKeyDown}\n    >\n      <InternalIcon variant={disabled ? 'disabled' : undefined} name=\"drag-indicator\" />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,EACT,SAAS,GACO,EAClB,GAAmC,EACnC,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,eAAe,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,mBAAmB,EACxB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,sBACH,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport useForwardFocus from '../../hooks/forward-focus';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\n\nexport { DragHandleProps };\n\nconst DragHandle = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      ariaLabel,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onKeyDown,\n      className,\n    }: DragHandleProps,\n    ref: React.Ref<DragHandleProps.Ref>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    useForwardFocus(ref, dragHandleRefObject);\n\n    const iconProps: IconProps = (() => {\n      const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        ref={dragHandleRefObject}\n        role={ariaValue ? 'slider' : 'button'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled']\n        )}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n      >\n        <InternalIcon {...iconProps} />\n      </div>\n    );\n  }\n);\n\nexport default DragHandle;\n"]}

package/internal/components/drag-handle/interfaces.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export interface DragHandleProps {
+    variant?: DragHandleProps.Variant;
+    size?: DragHandleProps.Size;
+    ariaLabel: string;
+    ariaDescribedby?: string;
+    ariaValue?: DragHandleProps.AriaValue;
+    disabled?: boolean;
+    onPointerDown?: React.PointerEventHandler;
+    onKeyDown?: React.KeyboardEventHandler;
+    className?: string;
+}
+export declare namespace DragHandleProps {
+    type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';
+    type Size = 'small' | 'normal';
+    interface AriaValue {
+        valueMin: number;
+        valueMax: number;
+        valueNow: number;
+    }
+    interface Ref {
+        focus(options?: FocusOptions): void;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/internal/components/drag-handle/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;IAED,UAAiB,GAAG;QAClB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;KACrC;CACF"}

package/internal/components/drag-handle/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/internal/components/drag-handle/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\n  disabled?: boolean;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n  className?: string;\n}\n\nexport namespace DragHandleProps {\n  export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n  export type Size = 'small' | 'normal';\n\n  export interface AriaValue {\n    valueMin: number;\n    valueMax: number;\n    valueNow: number;\n  }\n\n  export interface Ref {\n    focus(options?: FocusOptions): void;\n  }\n}\n"]}

package/internal/components/drag-handle/resize-icon.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ResizeIconProps {
+    variant: 'horizontal' | 'vertical';
+}
+export declare function ResizeIcon({ variant }: ResizeIconProps): JSX.Element;
+export {};
+//# sourceMappingURL=resize-icon.d.ts.map

package/internal/components/drag-handle/resize-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-icon.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/resize-icon.tsx"],"names":[],"mappings":";AAQA,UAAU,eAAe;IACvB,OAAO,EAAE,YAAY,GAAG,UAAU,CAAC;CACpC;AAED,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE,eAAe,eAetD"}

package/internal/components/{panel-resize-handle/icon.js → drag-handle/resize-icon.js}

@@ -1,9 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-export default function ResizeHandleIcon({ className }) {
-    return (React.createElement("svg", { focusable: false, className: className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": true },
+import clsx from 'clsx';
+import styles from './styles.css.js';
+export function ResizeIcon({ variant }) {
+    return (React.createElement("svg", { focusable: false, className: clsx(styles['resize-icon'], styles[`resize-icon-${variant}`]), xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": true },
         React.createElement("line", { strokeWidth: "2", x1: "2", y1: "5", x2: "14", y2: "5" }),
         React.createElement("line", { strokeWidth: "2", x1: "14", y1: "10", x2: "2", y2: "10" })));
 }
-//# sourceMappingURL=icon.js.map
+//# sourceMappingURL=resize-icon.js.map

package/internal/components/drag-handle/resize-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resize-icon.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/resize-icon.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAmB;IACrD,OAAO,CACL,6BACE,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,OAAO,EAAE,CAAC,CAAC,EACxE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,iBACN,IAAI;QAEjB,8BAAM,WAAW,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG;QACrD,8BAAM,WAAW,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,CACnD,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\n\ninterface ResizeIconProps {\n  variant: 'horizontal' | 'vertical';\n}\n\nexport function ResizeIcon({ variant }: ResizeIconProps) {\n  return (\n    <svg\n      focusable={false}\n      className={clsx(styles['resize-icon'], styles[`resize-icon-${variant}`])}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      aria-hidden={true}\n    >\n      <line strokeWidth=\"2\" x1=\"2\" y1=\"5\" x2=\"14\" y2=\"5\" />\n      <line strokeWidth=\"2\" x1=\"14\" y1=\"10\" x2=\"2\" y2=\"10\" />\n    </svg>\n  );\n}\n"]}

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

@@ -1,8 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_sdha6_yy78y_145",
-  "hide-focus": "awsui_hide-focus_sdha6_yy78y_162",
-  "handle-disabled": "awsui_handle-disabled_sdha6_yy78y_191"
+  "handle": "awsui_handle_sdha6_1q7hk_145",
+  "handle-size-normal": "awsui_handle-size-normal_sdha6_1q7hk_153",
+  "handle-size-small": "awsui_handle-size-small_sdha6_1q7hk_157",
+  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_1q7hk_160",
+  "handle-resize-area": "awsui_handle-resize-area_sdha6_1q7hk_166",
+  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_1q7hk_173",
+  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_1q7hk_176",
+  "handle-disabled": "awsui_handle-disabled_sdha6_1q7hk_179",
+  "hide-focus": "awsui_hide-focus_sdha6_1q7hk_189",
+  "resize-icon": "awsui_resize-icon_sdha6_1q7hk_211",
+  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_1q7hk_217",
+  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_1q7hk_221"
 };
   

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

@@ -142,32 +142,60 @@
 */
 /* 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_yy78y_145:not(#\9) {
+.awsui_handle_sdha6_1q7hk_145:not(#\9) {
   -webkit-appearance: none;
           appearance: none;
+  color: var(--color-text-interactive-default-tkx8fe, #424650);
   background: transparent;
-  border-block: none;
-  border-inline: none;
-  padding-block: 0;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  touch-action: none;
+}
+.awsui_handle-size-normal_sdha6_1q7hk_153:not(#\9) {
+  block-size: var(--line-height-body-m-30ar75, 20px);
   padding-inline: var(--space-scaled-xxxs-27y4hv, 2px);
-  margin-block: 0;
-  margin-inline: var(--space-scaled-xxs-7597g1, 4px);
-  color: var(--color-text-interactive-default-tkx8fe, #424650);
+}
+.awsui_handle-size-small_sdha6_1q7hk_157:not(#\9) {
+  block-size: var(--line-height-body-s-7zv1j5, 16px);
+}
+.awsui_handle-drag-indicator_sdha6_1q7hk_160:not(#\9) {
   cursor: grab;
+}
+.awsui_handle-drag-indicator_sdha6_1q7hk_160:not(#\9):active {
+  cursor: grabbing;
+}
+.awsui_handle-resize-area_sdha6_1q7hk_166:not(#\9) {
+  cursor: nwse-resize;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-  touch-action: none;
 }
-.awsui_handle_sdha6_yy78y_145:not(#\9):hover {
+.awsui_handle-resize-area_sdha6_1q7hk_166:not(#\9):dir(rtl) {
+  cursor: nesw-resize;
+}
+.awsui_handle-resize-horizontal_sdha6_1q7hk_173:not(#\9) {
+  cursor: ew-resize;
+}
+.awsui_handle-resize-vertical_sdha6_1q7hk_176:not(#\9) {
+  cursor: ns-resize;
+}
+.awsui_handle-disabled_sdha6_1q7hk_179:not(#\9) {
+  cursor: default;
+}
+.awsui_handle_sdha6_1q7hk_145:not(#\9):hover {
   color: var(--color-text-interactive-hover-f9gqs8, #0f141a);
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_yy78y_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_yy78y_162) {
+.awsui_handle_sdha6_1q7hk_145:not(#\9):focus {
+  outline: none;
+  text-decoration: none;
+}
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_1q7hk_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_1q7hk_189) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_yy78y_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_yy78y_162) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_1q7hk_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_1q7hk_189) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_yy78y_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_yy78y_162)::before {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_1q7hk_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_1q7hk_189)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -181,14 +209,17 @@ body[data-awsui-focus-visible=true] .awsui_handle_sdha6_yy78y_145:not(#\9):focus
   border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_yy78y_145:not(#\9):focus.awsui_hide-focus_sdha6_yy78y_162 {
-  outline: none;
-}
 
-.awsui_handle_sdha6_yy78y_145:not(#\9):active {
-  cursor: grabbing;
+.awsui_resize-icon_sdha6_1q7hk_211:not(#\9) {
+  stroke: var(--color-text-interactive-default-tkx8fe, #424650);
 }
-
-.awsui_handle-disabled_sdha6_yy78y_191:not(#\9) {
-  cursor: default;
+.awsui_resize-icon_sdha6_1q7hk_211:not(#\9):hover {
+  stroke: var(--color-text-interactive-hover-f9gqs8, #0f141a);
+}
+.awsui_resize-icon-vertical_sdha6_1q7hk_217:not(#\9) {
+  margin-block: auto;
+  margin-inline: auto;
+}
+.awsui_resize-icon-horizontal_sdha6_1q7hk_221:not(#\9) {
+  transform: rotate(90deg);
 }

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

@@ -2,8 +2,17 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_sdha6_yy78y_145",
-  "hide-focus": "awsui_hide-focus_sdha6_yy78y_162",
-  "handle-disabled": "awsui_handle-disabled_sdha6_yy78y_191"
+  "handle": "awsui_handle_sdha6_1q7hk_145",
+  "handle-size-normal": "awsui_handle-size-normal_sdha6_1q7hk_153",
+  "handle-size-small": "awsui_handle-size-small_sdha6_1q7hk_157",
+  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_1q7hk_160",
+  "handle-resize-area": "awsui_handle-resize-area_sdha6_1q7hk_166",
+  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_1q7hk_173",
+  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_1q7hk_176",
+  "handle-disabled": "awsui_handle-disabled_sdha6_1q7hk_179",
+  "hide-focus": "awsui_hide-focus_sdha6_1q7hk_189",
+  "resize-icon": "awsui_resize-icon_sdha6_1q7hk_211",
+  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_1q7hk_217",
+  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_1q7hk_221"
 };
   

package/internal/components/options-list/index.js

@@ -39,7 +39,7 @@ const OptionsList = (_a, ref) => {
         [styles['options-list-embedded']]: embedded,
     });
     const mergedRef = useMergeRefs(ref, menuRef);
-    return (React.createElement("ul", Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position }, role: role, onScroll: handleScroll, onKeyDown: event => onKeyDown && fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: embedded ? 0 : -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }), open && children));
+    return (React.createElement("ul", Object.assign({}, baseProps, nativeAttributes, { className: className, ref: mergedRef, style: { position }, role: role, onScroll: handleScroll, onKeyDown: event => fireKeyboardEvent(onKeyDown, event), onMouseMove: event => onMouseMove === null || onMouseMove === void 0 ? void 0 : onMouseMove(getItemIndex(menuRef, event)), onMouseUp: event => onMouseUp === null || onMouseUp === void 0 ? void 0 : onMouseUp(getItemIndex(menuRef, event)), onBlur: event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }), onFocus: () => fireNonCancelableEvent(onFocus), tabIndex: embedded ? 0 : -1, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }), open && children));
 };
 export default React.forwardRef(OptionsList);
 //# sourceMappingURL=index.js.map

package/internal/components/options-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n  BaseKeyDetail,\n  CancelableEventHandler,\n  fireKeyboardEvent,\n  fireNonCancelableEvent,\n  NonCancelableEventHandler,\n} from '../../events';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { DropdownStatusProps } from '../dropdown-status';\n\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n  open?: boolean;\n  statusType: DropdownStatusProps.StatusType;\n  /**\n   * Options list\n   */\n  children: React.ReactNode;\n  nativeAttributes?: Record<string, any>;\n  /**\n   * Called when more items need to be loaded.\n   */\n  onLoadMore?: NonCancelableEventHandler;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onBlur?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n  onFocus?: NonCancelableEventHandler;\n  onMouseUp?: (itemIndex: number) => void;\n  onMouseMove?: (itemIndex: number) => void;\n  position?: React.CSSProperties['position'];\n  role?: 'listbox' | 'list' | 'menu';\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  decreaseBlockMargin?: boolean;\n  embedded?: boolean;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n  const target = findUpUntil(\n    event.target as HTMLElement,\n    element => element === containerRef.current || !!element.dataset.mouseTarget\n  );\n  const mouseTarget = target?.dataset.mouseTarget;\n  return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n  {\n    open,\n    statusType,\n    children,\n    nativeAttributes = {},\n    onKeyDown,\n    onBlur,\n    onFocus,\n    onLoadMore,\n    onMouseUp,\n    onMouseMove,\n    position = 'relative',\n    role = 'listbox',\n    decreaseBlockMargin = false,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    embedded,\n    ...restProps\n  }: OptionsListProps,\n  ref: React.Ref<HTMLUListElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  const handleScroll = useStableCallback(() => {\n    const scrollContainer = menuRef?.current;\n    if (scrollContainer) {\n      const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n      const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n      if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n        fireNonCancelableEvent(onLoadMore);\n      }\n    }\n  });\n\n  useEffect(() => {\n    if (open && statusType === 'pending') {\n      handleScroll();\n    }\n  }, [open, statusType, handleScroll]);\n\n  const className = clsx(styles['options-list'], {\n    [styles['decrease-block-margin']]: decreaseBlockMargin,\n    [styles['options-list-embedded']]: embedded,\n  });\n\n  const mergedRef = useMergeRefs(ref, menuRef);\n\n  return (\n    <ul\n      {...baseProps}\n      {...nativeAttributes}\n      className={className}\n      ref={mergedRef}\n      style={{ position }}\n      role={role}\n      onScroll={handleScroll}\n      onKeyDown={event => onKeyDown && fireKeyboardEvent(onKeyDown, event)}\n      onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n      onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n      onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n      onFocus={() => fireNonCancelableEvent(onFocus)}\n      tabIndex={embedded ? 0 : -1}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n    >\n      {open && children}\n    </ul>\n  );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/options-list/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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport {\n  BaseKeyDetail,\n  CancelableEventHandler,\n  fireKeyboardEvent,\n  fireNonCancelableEvent,\n  NonCancelableEventHandler,\n} from '../../events';\nimport { useMergeRefs } from '../../hooks/use-merge-refs';\nimport { DropdownStatusProps } from '../dropdown-status';\n\nimport styles from './styles.css.js';\n\nexport interface OptionsListProps extends BaseComponentProps {\n  open?: boolean;\n  statusType: DropdownStatusProps.StatusType;\n  /**\n   * Options list\n   */\n  children: React.ReactNode;\n  nativeAttributes?: Record<string, any>;\n  /**\n   * Called when more items need to be loaded.\n   */\n  onLoadMore?: NonCancelableEventHandler;\n  onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n  onBlur?: NonCancelableEventHandler<{ relatedTarget: Node | null }>;\n  onFocus?: NonCancelableEventHandler;\n  onMouseUp?: (itemIndex: number) => void;\n  onMouseMove?: (itemIndex: number) => void;\n  position?: React.CSSProperties['position'];\n  role?: 'listbox' | 'list' | 'menu';\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  decreaseBlockMargin?: boolean;\n  embedded?: boolean;\n}\n\nconst BOTTOM_TRIGGER_OFFSET = 80;\n\nconst getItemIndex = (containerRef: React.RefObject<HTMLElement>, event: React.MouseEvent) => {\n  const target = findUpUntil(\n    event.target as HTMLElement,\n    element => element === containerRef.current || !!element.dataset.mouseTarget\n  );\n  const mouseTarget = target?.dataset.mouseTarget;\n  return mouseTarget ? parseInt(mouseTarget) : -1;\n};\n\nconst OptionsList = (\n  {\n    open,\n    statusType,\n    children,\n    nativeAttributes = {},\n    onKeyDown,\n    onBlur,\n    onFocus,\n    onLoadMore,\n    onMouseUp,\n    onMouseMove,\n    position = 'relative',\n    role = 'listbox',\n    decreaseBlockMargin = false,\n    ariaLabel,\n    ariaLabelledby,\n    ariaDescribedby,\n    embedded,\n    ...restProps\n  }: OptionsListProps,\n  ref: React.Ref<HTMLUListElement>\n) => {\n  const baseProps = getBaseProps(restProps);\n  const menuRef = useRef<HTMLUListElement>(null);\n\n  const handleScroll = useStableCallback(() => {\n    const scrollContainer = menuRef?.current;\n    if (scrollContainer) {\n      const bottomEdgePosition = scrollContainer.scrollTop + scrollContainer.clientHeight;\n      const remainingScrollHeight = scrollContainer.scrollHeight - bottomEdgePosition;\n      if (remainingScrollHeight < BOTTOM_TRIGGER_OFFSET) {\n        fireNonCancelableEvent(onLoadMore);\n      }\n    }\n  });\n\n  useEffect(() => {\n    if (open && statusType === 'pending') {\n      handleScroll();\n    }\n  }, [open, statusType, handleScroll]);\n\n  const className = clsx(styles['options-list'], {\n    [styles['decrease-block-margin']]: decreaseBlockMargin,\n    [styles['options-list-embedded']]: embedded,\n  });\n\n  const mergedRef = useMergeRefs(ref, menuRef);\n\n  return (\n    <ul\n      {...baseProps}\n      {...nativeAttributes}\n      className={className}\n      ref={mergedRef}\n      style={{ position }}\n      role={role}\n      onScroll={handleScroll}\n      onKeyDown={event => fireKeyboardEvent(onKeyDown, event)}\n      onMouseMove={event => onMouseMove?.(getItemIndex(menuRef, event))}\n      onMouseUp={event => onMouseUp?.(getItemIndex(menuRef, event))}\n      onBlur={event => fireNonCancelableEvent(onBlur, { relatedTarget: event.relatedTarget })}\n      onFocus={() => fireNonCancelableEvent(onFocus)}\n      tabIndex={embedded ? 0 : -1}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n    >\n      {open && children}\n    </ul>\n  );\n};\n\nexport default React.forwardRef(OptionsList);\n"]}

package/internal/components/panel-resize-handle/index.d.ts

@@ -1,12 +1,14 @@
 import React from 'react';
 interface ResizeHandleProps {
-    className?: string;
     ariaLabel: string | undefined;
     position: 'side' | 'bottom';
     ariaValuenow: number;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
+    className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<ResizeHandleProps & React.RefAttributes<HTMLDivElement>>;
+declare const _default: React.ForwardRefExoticComponent<ResizeHandleProps & React.RefAttributes<{
+    focus: () => void;
+}>>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/panel-resize-handle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACjE;;AAED,wBAoBG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;;WAIyB,MAAM,IAAI;;AAFpC,wBAsBG"}

package/internal/components/panel-resize-handle/index.js

@@ -1,11 +1,14 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import clsx from 'clsx';
-import ResizeHandleIcon from './icon';
+import DragHandle from '../drag-handle';
 import styles from './styles.css.js';
-export default React.forwardRef(function PanelResizeHandle({ className, ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown }, ref) {
-    return (React.createElement("div", { ref: ref, className: clsx(className, styles.slider, styles[`slider-${position}`]), role: "slider", tabIndex: 0, "aria-label": ariaLabel, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": ariaValuenow, onKeyDown: onKeyDown, onPointerDown: onPointerDown },
-        React.createElement(ResizeHandleIcon, { className: clsx(styles['slider-icon'], styles[`slider-icon-${position}`]) })));
+export default React.forwardRef(function PanelResizeHandle({ ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown, className }, ref) {
+    return (React.createElement("div", { className: styles[`handle-wrapper-${position}`] },
+        React.createElement(DragHandle, { variant: position === 'bottom' ? 'resize-vertical' : 'resize-horizontal', size: "small", ref: ref, ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : '', ariaValue: {
+                valueMin: 0,
+                valueMax: 100,
+                valueNow: ariaValuenow,
+            }, onPointerDown: onPointerDown, onKeyDown: onKeyDown, className: className })));
 });
 //# sourceMappingURL=index.js.map

package/internal/components/panel-resize-handle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,gBAAgB,MAAM,QAAQ,CAAC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,eAAe,KAAK,CAAC,UAAU,CAAoC,SAAS,iBAAiB,CAC3F,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,EAC1E,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,QAAQ,EAAE,CAAC,CAAC,EACvE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,SAAS,mBACN,GAAG,mBACH,CAAC,mBACD,YAAY,EAC3B,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa;QAE5B,oBAAC,gBAAgB,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC,GAAI,CAC3F,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport ResizeHandleIcon from './icon';\n\nimport styles from './styles.css.js';\n\ninterface ResizeHandleProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  position: 'side' | 'bottom';\n  ariaValuenow: number;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;\n}\n\nexport default React.forwardRef<HTMLDivElement, ResizeHandleProps>(function PanelResizeHandle(\n  { className, ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={clsx(className, styles.slider, styles[`slider-${position}`])}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={ariaLabel}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={ariaValuenow}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n    >\n      <ResizeHandleIcon className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,gBAAgB,CAAC;AAExC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,iBAAiB,CACxD,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAqB,EAC7F,GAAqC;IAErC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,QAAQ,EAAE,CAAC;QAClD,oBAAC,UAAU,IACT,OAAO,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,EACxE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EAC1B,SAAS,EAAE;gBACT,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,YAAY;aACvB,EACD,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,GACpB,CACE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport DragHandle from '../drag-handle';\n\nimport styles from './styles.css.js';\n\ninterface ResizeHandleProps {\n  ariaLabel: string | undefined;\n  position: 'side' | 'bottom';\n  ariaValuenow: number;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;\n  className?: string;\n}\n\nexport default React.forwardRef(function PanelResizeHandle(\n  { ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown, className }: ResizeHandleProps,\n  ref: React.Ref<{ focus: () => void }>\n) {\n  return (\n    <div className={styles[`handle-wrapper-${position}`]}>\n      <DragHandle\n        variant={position === 'bottom' ? 'resize-vertical' : 'resize-horizontal'}\n        size=\"small\"\n        ref={ref}\n        ariaLabel={ariaLabel ?? ''}\n        ariaValue={{\n          valueMin: 0,\n          valueMax: 100,\n          valueNow: ariaValuenow,\n        }}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n        className={className}\n      />\n    </div>\n  );\n});\n"]}

package/internal/components/panel-resize-handle/styles.css.js

@@ -1,10 +1,7 @@
 
     import './styles.scoped.css';
     export default {
-  "slider": "awsui_slider_cqzlk_1vl2o_145",
-  "slider-side": "awsui_slider-side_cqzlk_1vl2o_180",
-  "slider-icon": "awsui_slider-icon_cqzlk_1vl2o_187",
-  "slider-icon-bottom": "awsui_slider-icon-bottom_cqzlk_1vl2o_193",
-  "slider-icon-side": "awsui_slider-icon-side_cqzlk_1vl2o_197"
+  "handle-wrapper-side": "awsui_handle-wrapper-side_cqzlk_1qkms_5",
+  "handle-wrapper-bottom": "awsui_handle-wrapper-bottom_cqzlk_1qkms_9"
 };
   

package/internal/components/panel-resize-handle/styles.scoped.css

@@ -2,198 +2,10 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
-/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/*
- Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
- SPDX-License-Identifier: Apache-2.0
-*/
-/* 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_slider_cqzlk_1vl2o_145:not(#\9) {
-  padding-block: 0;
-  padding-inline: 0;
-  cursor: ns-resize;
-  margin-block-start: 2px;
-  margin-block-end: 0;
-  margin-inline: 0;
-  block-size: 16px;
-  touch-action: none;
-}
-.awsui_slider_cqzlk_1vl2o_145:not(#\9):focus {
-  outline: none;
-}
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1vl2o_145:not(#\9):focus {
-  position: relative;
-}
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1vl2o_145:not(#\9):focus {
-  outline: 2px dotted transparent;
-  outline-offset: calc(0px - 1px);
-}
-body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1vl2o_145:not(#\9):focus::before {
-  content: " ";
-  display: block;
-  position: absolute;
-  inset-inline-start: calc(-1 * 0px);
-  inset-block-start: calc(-1 * 0px);
-  inline-size: calc(100% + 0px + 0px);
-  block-size: calc(100% + 0px + 0px);
-  border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
-  border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
-  border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
-  border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
-}
-
-.awsui_slider-side_cqzlk_1vl2o_180:not(#\9) {
-  cursor: ew-resize;
-  margin-block: 0;
+.awsui_handle-wrapper-side_cqzlk_1qkms_5:not(#\9) {
   margin-inline-start: 2px;
-  margin-inline-end: 0;
 }
 
-.awsui_slider-icon_cqzlk_1vl2o_187:not(#\9) {
-  stroke: var(--color-text-interactive-default-tkx8fe, #424650);
-}
-.awsui_slider-icon_cqzlk_1vl2o_187:not(#\9):hover {
-  stroke: var(--color-text-interactive-hover-f9gqs8, #0f141a);
-}
-.awsui_slider-icon-bottom_cqzlk_1vl2o_193:not(#\9) {
-  margin-block: auto;
-  margin-inline: auto;
-}
-.awsui_slider-icon-side_cqzlk_1vl2o_197:not(#\9) {
-  transform: rotate(90deg);
+.awsui_handle-wrapper-bottom_cqzlk_1qkms_9:not(#\9) {
+  margin-block-start: 2px;
 }

package/internal/components/panel-resize-handle/styles.selectors.js

@@ -2,10 +2,7 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "slider": "awsui_slider_cqzlk_1vl2o_145",
-  "slider-side": "awsui_slider-side_cqzlk_1vl2o_180",
-  "slider-icon": "awsui_slider-icon_cqzlk_1vl2o_187",
-  "slider-icon-bottom": "awsui_slider-icon-bottom_cqzlk_1vl2o_193",
-  "slider-icon-side": "awsui_slider-icon-side_cqzlk_1vl2o_197"
+  "handle-wrapper-side": "awsui_handle-wrapper-side_cqzlk_1qkms_5",
+  "handle-wrapper-bottom": "awsui_handle-wrapper-bottom_cqzlk_1qkms_9"
 };