@cloudscape-design/board-components 3.0.23 → 3.0.25

package/internal/environment.js

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

package/internal/grid/grid.js

@@ -3,27 +3,40 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // SPDX-License-Identifier: Apache-2.0
 import { useContainerQuery } from "@cloudscape-design/component-toolkit";
 import clsx from "clsx";
-import { Children } from "react";
+import { Children, useRef } from "react";
+import { useMergeRefs } from "../utils/use-merge-refs";
 import { zipTwoArrays } from "../utils/zip-arrays";
 import GridItem from "./item";
 import styles from "./styles.css.js";
+import { useDensityMode } from "./use-density-mode";
 /* Matches grid gap in CSS. */
-const GRID_GAP = 16;
+const GRID_GAP = {
+    comfortable: 20,
+    compact: 16,
+};
 /* Matches grid-auto-rows in CSS. */
-const ROWSPAN_HEIGHT = 100;
+const ROWSPAN_HEIGHT = {
+    comfortable: 96,
+    compact: 76,
+};
 export default function Grid({ layout, children: render, columns }) {
+    const gridRef = useRef(null);
     const [gridWidth, containerQueryRef] = useContainerQuery((entry) => entry.contentBoxWidth, []);
+    const densityMode = useDensityMode(gridRef);
+    const gridGap = GRID_GAP[densityMode];
+    const rowspanHeight = ROWSPAN_HEIGHT[densityMode];
     // The below getters translate relative grid units into size/offset values in pixels.
     const getWidth = (colspan) => {
         colspan = Math.min(columns, colspan);
-        const cellWidth = ((gridWidth || 0) - (columns - 1) * GRID_GAP) / columns;
-        return colspan * cellWidth + (colspan - 1) * GRID_GAP;
+        const cellWidth = ((gridWidth || 0) - (columns - 1) * gridGap) / columns;
+        return colspan * cellWidth + (colspan - 1) * gridGap;
     };
-    const getHeight = (rowspan) => rowspan * ROWSPAN_HEIGHT + (rowspan - 1) * GRID_GAP;
-    const getColOffset = (x) => getWidth(x) + GRID_GAP;
-    const getRowOffset = (y) => getHeight(y) + GRID_GAP;
+    const getHeight = (rowspan) => rowspan * rowspanHeight + (rowspan - 1) * gridGap;
+    const getColOffset = (x) => getWidth(x) + gridGap;
+    const getRowOffset = (y) => getHeight(y) + gridGap;
     const gridContext = { getWidth, getHeight, getColOffset, getRowOffset };
     const children = render === null || render === void 0 ? void 0 : render(gridContext);
     const zipped = zipTwoArrays(layout, Children.toArray(children));
-    return (_jsx("div", { ref: containerQueryRef, className: clsx(styles.grid, styles[`columns-${columns}`]), children: zipped.map(([item, children]) => (_jsx(GridItem, { item: item, children: children }, item.id))) }));
+    const ref = useMergeRefs(gridRef, containerQueryRef);
+    return (_jsx("div", { ref: ref, className: clsx(styles.grid, styles[`grid-${densityMode}`], styles[`columns-${columns}`]), children: zipped.map(([item, children]) => (_jsx(GridItem, { item: item, children: children }, item.id))) }));
 }

package/internal/grid/styles.css.js

@@ -1,11 +1,12 @@
 
     import './styles.scoped.css';
     export default {
-  "grid": "awsui_grid_1hw7z_yec0l_1",
-  "columns-1": "awsui_columns-1_1hw7z_yec0l_10",
-  "columns-2": "awsui_columns-2_1hw7z_yec0l_14",
-  "columns-4": "awsui_columns-4_1hw7z_yec0l_18",
-  "columns-6": "awsui_columns-6_1hw7z_yec0l_22",
-  "grid__item": "awsui_grid__item_1hw7z_yec0l_26"
+  "grid": "awsui_grid_1hw7z_1ywbc_1",
+  "grid-compact": "awsui_grid-compact_1hw7z_1ywbc_8",
+  "columns-1": "awsui_columns-1_1hw7z_1ywbc_13",
+  "columns-2": "awsui_columns-2_1hw7z_1ywbc_17",
+  "columns-4": "awsui_columns-4_1hw7z_1ywbc_21",
+  "columns-6": "awsui_columns-6_1hw7z_1ywbc_25",
+  "grid__item": "awsui_grid__item_1hw7z_1ywbc_29"
 };
   

package/internal/grid/styles.scoped.css

@@ -1,29 +1,32 @@
-.awsui_grid_1hw7z_yec0l_1:not(#\9) {
+.awsui_grid_1hw7z_1ywbc_1:not(#\9) {
   display: grid;
   /* Matches GRID_GAP constant used for calculations. */
-  /* TODO: consider using different gaps for comfortable/compact which would require a mode observer. */
-  gap: 16px;
+  gap: 20px;
   /* Matches ROWSPAN_HEIGHT constant used for calculations. */
-  grid-auto-rows: 100px;
+  grid-auto-rows: 96px;
+}
+.awsui_grid-compact_1hw7z_1ywbc_8:not(#\9) {
+  gap: 16px;
+  grid-auto-rows: 76px;
 }
 
-.awsui_grid_1hw7z_yec0l_1.awsui_columns-1_1hw7z_yec0l_10:not(#\9) {
+.awsui_grid_1hw7z_1ywbc_1.awsui_columns-1_1hw7z_1ywbc_13:not(#\9) {
   grid-template-columns: minmax(0, 1fr);
 }
 
-.awsui_grid_1hw7z_yec0l_1.awsui_columns-2_1hw7z_yec0l_14:not(#\9) {
+.awsui_grid_1hw7z_1ywbc_1.awsui_columns-2_1hw7z_1ywbc_17:not(#\9) {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.awsui_grid_1hw7z_yec0l_1.awsui_columns-4_1hw7z_yec0l_18:not(#\9) {
+.awsui_grid_1hw7z_1ywbc_1.awsui_columns-4_1hw7z_1ywbc_21:not(#\9) {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.awsui_grid_1hw7z_yec0l_1.awsui_columns-6_1hw7z_yec0l_22:not(#\9) {
+.awsui_grid_1hw7z_1ywbc_1.awsui_columns-6_1hw7z_1ywbc_25:not(#\9) {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
-.awsui_grid__item_1hw7z_yec0l_26:not(#\9) {
+.awsui_grid__item_1hw7z_1ywbc_29:not(#\9) {
   display: block;
   position: relative;
 }

package/internal/grid/styles.selectors.js

@@ -2,11 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "grid": "awsui_grid_1hw7z_yec0l_1",
-  "columns-1": "awsui_columns-1_1hw7z_yec0l_10",
-  "columns-2": "awsui_columns-2_1hw7z_yec0l_14",
-  "columns-4": "awsui_columns-4_1hw7z_yec0l_18",
-  "columns-6": "awsui_columns-6_1hw7z_yec0l_22",
-  "grid__item": "awsui_grid__item_1hw7z_yec0l_26"
+  "grid": "awsui_grid_1hw7z_1ywbc_1",
+  "grid-compact": "awsui_grid-compact_1hw7z_1ywbc_8",
+  "columns-1": "awsui_columns-1_1hw7z_1ywbc_13",
+  "columns-2": "awsui_columns-2_1hw7z_1ywbc_17",
+  "columns-4": "awsui_columns-4_1hw7z_1ywbc_21",
+  "columns-6": "awsui_columns-6_1hw7z_1ywbc_25",
+  "grid__item": "awsui_grid__item_1hw7z_1ywbc_29"
 };
   

package/internal/grid/use-density-mode.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useDensityMode(elementRef: React.RefObject<HTMLElement>): "comfortable" | "compact";

package/internal/grid/use-density-mode.js

@@ -0,0 +1,59 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { findUpUntil } from "@cloudscape-design/component-toolkit/dom";
+import { useEffect, useState } from "react";
+import { unstable_batchedUpdates } from "react-dom";
+import { useStableEventHandler } from "../utils/use-stable-event-handler";
+// Matches: https://github.com/cloudscape-design/components/blob/main/src/internal/hooks/use-visual-mode/index.ts
+export function useDensityMode(elementRef) {
+    const [value, setValue] = useState("comfortable");
+    useMutationObserver(elementRef, (node) => {
+        const compactModeParent = findUpUntil(node, (node) => node.classList.contains("awsui-polaris-compact-mode") || node.classList.contains("awsui-compact-mode"));
+        setValue(compactModeParent ? "compact" : "comfortable");
+    });
+    return value;
+}
+const useMutationSingleton = createSingletonHandler((handler) => {
+    const observer = new MutationObserver(() => handler());
+    observer.observe(document.body, { attributes: true, subtree: true });
+    return () => observer.disconnect();
+});
+function useMutationObserver(elementRef, onChange) {
+    const handler = useStableEventHandler(() => {
+        if (elementRef.current) {
+            onChange(elementRef.current);
+        }
+    });
+    useMutationSingleton(handler);
+    useEffect(() => {
+        handler();
+    }, [handler]);
+}
+function createSingletonHandler(factory) {
+    const listeners = [];
+    const callback = (value) => {
+        unstable_batchedUpdates(() => {
+            for (const listener of listeners) {
+                listener(value);
+            }
+        });
+    };
+    let cleanup;
+    return function useSingleton(listener) {
+        useEffect(() => {
+            if (listeners.length === 0) {
+                cleanup = factory(callback);
+            }
+            listeners.push(listener);
+            return () => {
+                listeners.splice(listeners.indexOf(listener), 1);
+                if (listeners.length === 0) {
+                    cleanup();
+                    cleanup = undefined;
+                }
+            };
+            // register handlers only on mount
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, []);
+    };
+}

package/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "1e40ad14e04fda613654941bcee13153a5724069"
+  "commit": "c4526c624ca8da79074743777269704dac807809"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/board-components",
-  "version": "3.0.23",
+  "version": "3.0.25",
   "repository": {
     "type": "git",
     "url": "https://github.com/cloudscape-design/board-components.git"