@cloudscape-design/components-themeable 3.0.936 → 3.0.937

package/lib/internal/template/code-editor/resizable-box/index.d.ts

@@ -4,6 +4,8 @@ export interface ResizeBoxProps {
     height: number;
     minHeight: number;
     onResize: (newHeight: number) => void;
+    handleAriaLabel?: string;
+    handleTooltipText?: string;
 }
-export declare function ResizableBox({ children, height, minHeight, onResize }: ResizeBoxProps): JSX.Element;
+export declare function ResizableBox({ children, height, minHeight, onResize, handleAriaLabel, handleTooltipText, }: ResizeBoxProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/code-editor/resizable-box/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/code-editor/resizable-box/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,cAAc,eA2CrF"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/code-editor/resizable-box/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,iBAAiB,GAClB,EAAE,cAAc,eAoFhB"}

package/lib/internal/template/code-editor/resizable-box/index.js

@@ -2,42 +2,74 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
 import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
+import InternalDragHandle from '../../internal/components/drag-handle';
 import styles from './styles.css.js';
-export function ResizableBox({ children, height, minHeight, onResize }) {
+const KEYBOARD_STEP_SIZE = 20;
+export function ResizableBox({ children, height, minHeight, onResize, handleAriaLabel, handleTooltipText, }) {
     const [dragOffset, setDragOffset] = useState(null);
     const onResizeStable = useStableCallback(onResize);
     const containerRef = useRef(null);
-    const onMouseDown = event => {
-        if (event.button !== 0 || !containerRef.current) {
+    const onPointerDown = event => {
+        if ((event.pointerType === 'mouse' && event.button !== 0) || !containerRef.current) {
             return;
         }
         const containerBottom = containerRef.current.getBoundingClientRect().bottom;
         setDragOffset(containerBottom - event.clientY);
     };
+    const onKeyDown = event => {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                onResizeStable(height + KEYBOARD_STEP_SIZE);
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                onResizeStable(Math.max(height - KEYBOARD_STEP_SIZE, minHeight));
+                break;
+        }
+    };
     useEffect(() => {
         if (dragOffset === null || !containerRef.current) {
             return;
         }
         const container = containerRef.current;
-        const onMouseMove = (event) => {
+        const onPointerMove = (event) => {
             const { top } = container.getBoundingClientRect();
             const cursor = event.clientY;
             onResizeStable(Math.max(cursor + dragOffset - top, minHeight));
         };
-        const onMouseUp = () => {
+        const onPointerUp = () => {
             setDragOffset(null);
         };
         const controller = new AbortController();
         document.body.classList.add(styles['resize-active']);
-        document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });
-        document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });
+        container.classList.add(styles['cursor-active']);
+        document.addEventListener('pointermove', onPointerMove, { signal: controller.signal });
+        document.addEventListener('pointerup', onPointerUp, { signal: controller.signal });
         return () => {
             controller.abort();
             document.body.classList.remove(styles['resize-active']);
+            container.classList.remove(styles['cursor-active']);
         };
     }, [dragOffset, minHeight, onResizeStable]);
     return (React.createElement("div", { ref: containerRef, className: styles['resizable-box'], style: { height } },
         children,
-        React.createElement("span", { className: styles['resizable-box-handle'], onMouseDown: onMouseDown })));
+        React.createElement("div", { className: styles['resizable-box-handle'] },
+            React.createElement(InternalDragHandle, { ariaLabel: handleAriaLabel, variant: "resize-area", 
+                // Provide an arbitrary large value to valueMax since the editor can be
+                // resized to be infinitely large.
+                ariaValue: { valueMin: minHeight, valueMax: 1000000, valueNow: height }, tooltipText: handleTooltipText, onPointerDown: onPointerDown, onKeyDown: onKeyDown, directions: {
+                    'block-start': height > minHeight ? 'active' : 'disabled',
+                    'block-end': 'active',
+                }, onDirectionClick: direction => {
+                    switch (direction) {
+                        case 'block-end':
+                            onResizeStable(height + KEYBOARD_STEP_SIZE);
+                            break;
+                        case 'block-start':
+                            onResizeStable(Math.max(height - KEYBOARD_STEP_SIZE, minHeight));
+                            break;
+                    }
+                } }))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/code-editor/resizable-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/code-editor/resizable-box/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAkB;IACpF,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAClE,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,WAAW,GAA4B,KAAK,CAAC,EAAE;QACnD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAC/C,OAAO;SACR;QACD,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC5E,aAAa,CAAC,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAChD,OAAO;SACR;QACD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,MAAM,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAClD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;YAC7B,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC;QACF,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC;QACF,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACnF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QAC/E,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;YACnB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE;QAC1E,QAAQ;QACT,8BAAM,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,WAAW,EAAE,WAAW,GAAI,CACzE,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport interface ResizeBoxProps {\n  children: React.ReactNode;\n  height: number;\n  minHeight: number;\n  onResize: (newHeight: number) => void;\n}\n\nexport function ResizableBox({ children, height, minHeight, onResize }: ResizeBoxProps) {\n  const [dragOffset, setDragOffset] = useState<null | number>(null);\n  const onResizeStable = useStableCallback(onResize);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const onMouseDown: React.MouseEventHandler = event => {\n    if (event.button !== 0 || !containerRef.current) {\n      return;\n    }\n    const containerBottom = containerRef.current.getBoundingClientRect().bottom;\n    setDragOffset(containerBottom - event.clientY);\n  };\n\n  useEffect(() => {\n    if (dragOffset === null || !containerRef.current) {\n      return;\n    }\n    const container = containerRef.current;\n\n    const onMouseMove = (event: MouseEvent) => {\n      const { top } = container.getBoundingClientRect();\n      const cursor = event.clientY;\n      onResizeStable(Math.max(cursor + dragOffset - top, minHeight));\n    };\n    const onMouseUp = () => {\n      setDragOffset(null);\n    };\n    const controller = new AbortController();\n    document.body.classList.add(styles['resize-active']);\n    document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });\n    document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });\n    return () => {\n      controller.abort();\n      document.body.classList.remove(styles['resize-active']);\n    };\n  }, [dragOffset, minHeight, onResizeStable]);\n\n  return (\n    <div ref={containerRef} className={styles['resizable-box']} style={{ height }}>\n      {children}\n      <span className={styles['resizable-box-handle']} onMouseDown={onMouseDown} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/code-editor/resizable-box/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, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalDragHandle from '../../internal/components/drag-handle';\n\nimport styles from './styles.css.js';\n\nconst KEYBOARD_STEP_SIZE = 20;\n\nexport interface ResizeBoxProps {\n  children: React.ReactNode;\n  height: number;\n  minHeight: number;\n  onResize: (newHeight: number) => void;\n\n  handleAriaLabel?: string;\n  handleTooltipText?: string;\n}\n\nexport function ResizableBox({\n  children,\n  height,\n  minHeight,\n  onResize,\n  handleAriaLabel,\n  handleTooltipText,\n}: ResizeBoxProps) {\n  const [dragOffset, setDragOffset] = useState<null | number>(null);\n  const onResizeStable = useStableCallback(onResize);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const onPointerDown: React.PointerEventHandler = event => {\n    if ((event.pointerType === 'mouse' && event.button !== 0) || !containerRef.current) {\n      return;\n    }\n    const containerBottom = containerRef.current.getBoundingClientRect().bottom;\n    setDragOffset(containerBottom - event.clientY);\n  };\n\n  const onKeyDown: React.KeyboardEventHandler = event => {\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        onResizeStable(height + KEYBOARD_STEP_SIZE);\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        onResizeStable(Math.max(height - KEYBOARD_STEP_SIZE, minHeight));\n        break;\n    }\n  };\n\n  useEffect(() => {\n    if (dragOffset === null || !containerRef.current) {\n      return;\n    }\n    const container = containerRef.current;\n\n    const onPointerMove = (event: PointerEvent) => {\n      const { top } = container.getBoundingClientRect();\n      const cursor = event.clientY;\n      onResizeStable(Math.max(cursor + dragOffset - top, minHeight));\n    };\n    const onPointerUp = () => {\n      setDragOffset(null);\n    };\n    const controller = new AbortController();\n    document.body.classList.add(styles['resize-active']);\n    container.classList.add(styles['cursor-active']);\n    document.addEventListener('pointermove', onPointerMove, { signal: controller.signal });\n    document.addEventListener('pointerup', onPointerUp, { signal: controller.signal });\n    return () => {\n      controller.abort();\n      document.body.classList.remove(styles['resize-active']);\n      container.classList.remove(styles['cursor-active']);\n    };\n  }, [dragOffset, minHeight, onResizeStable]);\n\n  return (\n    <div ref={containerRef} className={styles['resizable-box']} style={{ height }}>\n      {children}\n\n      <div className={styles['resizable-box-handle']}>\n        <InternalDragHandle\n          ariaLabel={handleAriaLabel}\n          variant=\"resize-area\"\n          // Provide an arbitrary large value to valueMax since the editor can be\n          // resized to be infinitely large.\n          ariaValue={{ valueMin: minHeight, valueMax: 1000000, valueNow: height }}\n          tooltipText={handleTooltipText}\n          onPointerDown={onPointerDown}\n          onKeyDown={onKeyDown}\n          directions={{\n            'block-start': height > minHeight ? 'active' : 'disabled',\n            'block-end': 'active',\n          }}\n          onDirectionClick={direction => {\n            switch (direction) {\n              case 'block-end':\n                onResizeStable(height + KEYBOARD_STEP_SIZE);\n                break;\n              case 'block-start':\n                onResizeStable(Math.max(height - KEYBOARD_STEP_SIZE, minHeight));\n                break;\n            }\n          }}\n        />\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/code-editor/resizable-box/styles.css.js

@@ -1,8 +1,9 @@
 
     import './styles.scoped.css';
     export default {
-  "resizable-box": "awsui_resizable-box_cufu9_e8bsh_149",
-  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_e8bsh_154",
-  "resize-active": "awsui_resize-active_cufu9_e8bsh_197"
+  "resizable-box": "awsui_resizable-box_cufu9_j3e9z_149",
+  "cursor-active": "awsui_cursor-active_cufu9_j3e9z_153",
+  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_j3e9z_167",
+  "resize-active": "awsui_resize-active_cufu9_j3e9z_176"
 };
   

package/lib/internal/template/code-editor/resizable-box/styles.scoped.css

@@ -146,55 +146,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_resizable-box_cufu9_e8bsh_149:not(#\9) {
+.awsui_resizable-box_cufu9_j3e9z_149:not(#\9) {
   position: relative;
   inline-size: 100%;
 }
+.awsui_resizable-box_cufu9_j3e9z_149:not(#\9):not(.awsui_cursor-active_cufu9_j3e9z_153) {
+  transition: height var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_resizable-box_cufu9_j3e9z_149:not(#\9):not(.awsui_cursor-active_cufu9_j3e9z_153) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_resizable-box_cufu9_j3e9z_149:not(#\9):not(.awsui_cursor-active_cufu9_j3e9z_153), .awsui-mode-entering .awsui_resizable-box_cufu9_j3e9z_149:not(#\9):not(.awsui_cursor-active_cufu9_j3e9z_153) {
+  animation: none;
+  transition: none;
+}
 
-.awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
+.awsui_resizable-box-handle_cufu9_j3e9z_167:not(#\9) {
   position: absolute;
   inset-inline-end: 0;
   inset-block-end: 0;
   z-index: 10;
   inline-size: var(--space-l-eenfqd, 20px);
   block-size: var(--space-l-eenfqd, 20px);
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  box-sizing: border-box;
-  background-position: bottom right;
-  background-size: var(--space-l-eenfqd, 20px);
-  cursor: ns-resize;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23687078' fill-opacity='0' stroke-width='1'%3E %3Cpath d='M 8 13 L 13 8 M 13 11 L 11 13 M 5 13 L 13 5'/%3E %3C/svg%3E");
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-}
-@supports (--css-variable-support-check: #000) {
-  @media not print {
-    .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-      /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
-    }
-    .awsui-polaris-dark-mode .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9), .awsui-dark-mode .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23687078' fill-opacity='0' stroke-width='1'%3E %3Cpath d='M 8 13 L 13 8 M 13 11 L 11 13 M 5 13 L 13 5'/%3E %3C/svg%3E");
-    }
-  }
-}
-@supports (--css-variable-support-check: #000) {
-  .awsui-visual-refresh .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23424650' fill-opacity='0' stroke-width='1'%3E %3Cpath d='M 8 13 L 13 8 M 13 11 L 11 13 M 5 13 L 13 5'/%3E %3C/svg%3E");
-  }
-  @media not print {
-    .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-      /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
-    }
-    .awsui-visual-refresh.awsui-polaris-dark-mode .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9), .awsui-visual-refresh.awsui-dark-mode .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill-opacity='0' stroke-width='1'%3E %3Cpath d='M 8 13 L 13 8 M 13 11 L 11 13 M 5 13 L 13 5'/%3E %3C/svg%3E");
-    }
-  }
-}
-.awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9):dir(rtl) {
-  transform: scaleX(-1);
 }
 
-.awsui_resize-active_cufu9_e8bsh_197:not(#\9) {
+.awsui_resize-active_cufu9_j3e9z_176:not(#\9) {
   -webkit-user-select: none;
           user-select: none;
 }

package/lib/internal/template/code-editor/resizable-box/styles.selectors.js

@@ -2,8 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "resizable-box": "awsui_resizable-box_cufu9_e8bsh_149",
-  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_e8bsh_154",
-  "resize-active": "awsui_resize-active_cufu9_e8bsh_197"
+  "resizable-box": "awsui_resizable-box_cufu9_j3e9z_149",
+  "cursor-active": "awsui_cursor-active_cufu9_j3e9z_153",
+  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_j3e9z_167",
+  "resize-active": "awsui_resize-active_cufu9_j3e9z_176"
 };