@cloudscape-design/components 3.0.162 → 3.0.164

package/code-editor/resizable-box/index.js

@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';
+import styles from './styles.css.js';
+export function ResizableBox(_a) {
+    var children = _a.children, height = _a.height, minHeight = _a.minHeight, onResize = _a.onResize;
+    var _b = useState(null), dragOffset = _b[0], setDragOffset = _b[1];
+    var onResizeStable = useStableEventHandler(onResize);
+    var containerRef = useRef(null);
+    var onMouseDown = function (event) {
+        if (event.button !== 0 || !containerRef.current) {
+            return;
+        }
+        var containerBottom = containerRef.current.getBoundingClientRect().bottom;
+        setDragOffset(containerBottom - event.clientY);
+    };
+    useEffect(function () {
+        if (dragOffset === null || !containerRef.current) {
+            return;
+        }
+        var container = containerRef.current;
+        var onMouseMove = function (event) {
+            var top = container.getBoundingClientRect().top;
+            var cursor = event.clientY;
+            onResizeStable(Math.max(cursor + dragOffset - top, minHeight));
+        };
+        var onMouseUp = function () {
+            setDragOffset(null);
+        };
+        document.body.classList.add(styles['resize-active']);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+        return function () {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            document.body.classList.remove(styles['resize-active']);
+        };
+    }, [dragOffset, minHeight, onResizeStable]);
+    return (React.createElement("div", { ref: containerRef, className: styles['resizable-box'], style: { height: height } },
+        children,
+        React.createElement("span", { className: styles['resizable-box-handle'], onMouseDown: onMouseDown })));
+}
+//# sourceMappingURL=index.js.map

package/code-editor/resizable-box/index.js.map

@@ -0,0 +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;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AASrC,MAAM,UAAU,YAAY,CAAC,EAAyD;QAAvD,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IAC5D,IAAA,KAA8B,QAAQ,CAAgB,IAAI,CAAC,EAA1D,UAAU,QAAA,EAAE,aAAa,QAAiC,CAAC;IAClE,IAAM,cAAc,GAAG,qBAAqB,CAAC,QAAQ,CAAC,CAAC;IACvD,IAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,IAAM,WAAW,GAA4B,UAAA,KAAK;QAChD,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAC/C,OAAO;SACR;QACD,IAAM,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;QACR,IAAI,UAAU,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAChD,OAAO;SACR;QACD,IAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,IAAM,WAAW,GAAG,UAAC,KAAiB;YAC5B,IAAA,GAAG,GAAK,SAAS,CAAC,qBAAqB,EAAE,IAAtC,CAAuC;YAClD,IAAM,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,IAAM,SAAS,GAAG;YAChB,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC;QACF,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;QACpD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;QAChD,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;YACvD,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;YACnD,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,QAAA,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';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\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 = useStableEventHandler(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    document.body.classList.add(styles['resize-active']);\n    document.addEventListener('mousemove', onMouseMove);\n    document.addEventListener('mouseup', onMouseUp);\n    return () => {\n      document.removeEventListener('mousemove', onMouseMove);\n      document.removeEventListener('mouseup', onMouseUp);\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"]}

package/code-editor/resizable-box/styles.css.js

@@ -0,0 +1,8 @@
+
+    import './styles.scoped.css';
+    export default {
+  "resizable-box": "awsui_resizable-box_cufu9_w5ws9_17",
+  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_w5ws9_22",
+  "resize-active": "awsui_resize-active_cufu9_w5ws9_47"
+};
+  

package/code-editor/resizable-box/styles.scoped.css

@@ -0,0 +1,50 @@
+/*
+ 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
+*/
+.awsui_resizable-box_cufu9_w5ws9_17:not(#\9) {
+  position: relative;
+  width: 100%;
+}
+
+.awsui_resizable-box-handle_cufu9_w5ws9_22:not(#\9) {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  width: var(--space-l-4vl6xu, 20px);
+  height: var(--space-l-4vl6xu, 20px);
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  background-position: bottom right;
+  background-size: var(--space-l-4vl6xu, 20px);
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23414d5c' 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 */
+  cursor: ns-resize;
+}
+@supports (--css-variable-support-check: #000) {
+  .awsui_resizable-box-handle_cufu9_w5ws9_22:not(#\9) {
+    /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
+  }
+  .awsui-polaris-dark-mode .awsui_resizable-box-handle_cufu9_w5ws9_22:not(#\9), .awsui-dark-mode .awsui_resizable-box-handle_cufu9_w5ws9_22: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='%23d1d5db' 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_resize-active_cufu9_w5ws9_47:not(#\9) {
+  -webkit-user-select: none;
+          user-select: none;
+}

package/code-editor/resizable-box/styles.selectors.js

@@ -0,0 +1,9 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "resizable-box": "awsui_resizable-box_cufu9_w5ws9_17",
+  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_w5ws9_22",
+  "resize-active": "awsui_resize-active_cufu9_w5ws9_47"
+};
+  

package/code-editor/styles.css.js

@@ -1,38 +1,37 @@
 
     import './styles.scoped.css';
     export default {
-  "code-editor": "awsui_code-editor_1gl9c_1563r_98",
-  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_1563r_342",
-  "pane": "awsui_pane_1gl9c_1563r_354",
-  "pane__close-container": "awsui_pane__close-container_1gl9c_1563r_365",
-  "pane__list": "awsui_pane__list_1gl9c_1563r_370",
-  "pane__table": "awsui_pane__table_1gl9c_1563r_377",
-  "pane__item": "awsui_pane__item_1gl9c_1563r_382",
-  "pane__cell": "awsui_pane__cell_1gl9c_1563r_382",
-  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_1563r_396",
-  "pane__location": "awsui_pane__location_1gl9c_1563r_417",
-  "pane__description": "awsui_pane__description_1gl9c_1563r_417",
-  "focus-lock": "awsui_focus-lock_1gl9c_1563r_432",
-  "resizable-box": "awsui_resizable-box_1gl9c_1563r_455",
-  "resizable-box-handle": "awsui_resizable-box-handle_1gl9c_1563r_460",
-  "editor": "awsui_editor_1gl9c_1563r_485",
-  "status-bar": "awsui_status-bar_1gl9c_1563r_518",
-  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_1563r_527",
-  "status-bar__left": "awsui_status-bar__left_1gl9c_1563r_531",
-  "status-bar__left-virtual": "awsui_status-bar__left-virtual_1gl9c_1563r_538",
-  "status-bar__right": "awsui_status-bar__right_1gl9c_1563r_542",
-  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_1563r_546",
-  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_1563r_546",
-  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_1563r_551",
-  "status-bar-virtual": "awsui_status-bar-virtual_1gl9c_1563r_555",
-  "tab-button": "awsui_tab-button_1gl9c_1563r_561",
-  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_1563r_574",
-  "tab-button--active": "awsui_tab-button--active_1gl9c_1563r_588",
-  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_1563r_608",
-  "tab-button--divider": "awsui_tab-button--divider_1gl9c_1563r_638",
-  "tab-button--errors": "awsui_tab-button--errors_1gl9c_1563r_645",
-  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_1563r_645",
-  "loading-screen": "awsui_loading-screen_1gl9c_1563r_649",
-  "error-screen": "awsui_error-screen_1gl9c_1563r_650"
+  "code-editor": "awsui_code-editor_1gl9c_czd5p_98",
+  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_czd5p_342",
+  "pane": "awsui_pane_1gl9c_czd5p_354",
+  "pane__close-container": "awsui_pane__close-container_1gl9c_czd5p_365",
+  "pane__list": "awsui_pane__list_1gl9c_czd5p_370",
+  "pane__table": "awsui_pane__table_1gl9c_czd5p_377",
+  "pane__item": "awsui_pane__item_1gl9c_czd5p_382",
+  "pane__cell": "awsui_pane__cell_1gl9c_czd5p_382",
+  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_czd5p_396",
+  "pane__location": "awsui_pane__location_1gl9c_czd5p_417",
+  "pane__description": "awsui_pane__description_1gl9c_czd5p_417",
+  "focus-lock": "awsui_focus-lock_1gl9c_czd5p_432",
+  "editor": "awsui_editor_1gl9c_czd5p_455",
+  "editor-refresh": "awsui_editor-refresh_1gl9c_czd5p_483",
+  "status-bar": "awsui_status-bar_1gl9c_czd5p_488",
+  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_czd5p_497",
+  "status-bar__left": "awsui_status-bar__left_1gl9c_czd5p_501",
+  "status-bar__left-virtual": "awsui_status-bar__left-virtual_1gl9c_czd5p_508",
+  "status-bar__right": "awsui_status-bar__right_1gl9c_czd5p_512",
+  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_czd5p_516",
+  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_czd5p_516",
+  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_czd5p_521",
+  "status-bar-virtual": "awsui_status-bar-virtual_1gl9c_czd5p_525",
+  "tab-button": "awsui_tab-button_1gl9c_czd5p_531",
+  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_czd5p_544",
+  "tab-button--active": "awsui_tab-button--active_1gl9c_czd5p_558",
+  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_czd5p_578",
+  "tab-button--divider": "awsui_tab-button--divider_1gl9c_czd5p_608",
+  "tab-button--errors": "awsui_tab-button--errors_1gl9c_czd5p_615",
+  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_czd5p_615",
+  "loading-screen": "awsui_loading-screen_1gl9c_czd5p_619",
+  "error-screen": "awsui_error-screen_1gl9c_czd5p_620"
 };