@cloudscape-design/board-components 3.0.104 → 3.0.106
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/board/internal.js +1 -2
- package/board/internal.js.map +1 -1
- package/internal/environment.js +1 -1
- package/internal/environment.json +1 -1
- package/internal/generated/styles/tokens.d.ts +757 -0
- package/internal/generated/styles/tokens.js +757 -0
- package/internal/generated/theming/index.cjs +12511 -0
- package/internal/generated/theming/index.cjs.d.ts +2327 -0
- package/internal/generated/theming/index.d.ts +2327 -0
- package/internal/generated/theming/index.js +12511 -0
- package/internal/grid/grid.js +3 -10
- package/internal/grid/grid.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/package.json +1 -1
- package/internal/utils/use-merge-refs.d.ts +0 -9
- package/internal/utils/use-merge-refs.js +0 -30
- package/internal/utils/use-merge-refs.js.map +0 -1
package/internal/grid/grid.js
CHANGED
|
@@ -4,21 +4,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
4
4
|
import { Children, useRef } from "react";
|
|
5
5
|
import clsx from "clsx";
|
|
6
6
|
import { useContainerQuery } from "@cloudscape-design/component-toolkit";
|
|
7
|
-
import { useDensityMode } from "@cloudscape-design/component-toolkit/internal";
|
|
8
|
-
import { useMergeRefs } from "../utils/use-merge-refs";
|
|
7
|
+
import { useDensityMode, useMergeRefs } from "@cloudscape-design/component-toolkit/internal";
|
|
9
8
|
import { zipTwoArrays } from "../utils/zip-arrays";
|
|
10
9
|
import GridItem from "./item";
|
|
11
10
|
import styles from "./styles.css.js";
|
|
12
11
|
/* Matches grid gap in CSS. */
|
|
13
|
-
const GRID_GAP = {
|
|
14
|
-
comfortable: 20,
|
|
15
|
-
compact: 16,
|
|
16
|
-
};
|
|
12
|
+
const GRID_GAP = { comfortable: 20, compact: 16 };
|
|
17
13
|
/* Matches grid-auto-rows in CSS. */
|
|
18
|
-
const ROWSPAN_HEIGHT = {
|
|
19
|
-
comfortable: 96,
|
|
20
|
-
compact: 76,
|
|
21
|
-
};
|
|
14
|
+
const ROWSPAN_HEIGHT = { comfortable: 96, compact: 76 };
|
|
22
15
|
export default function Grid({ layout, children: render, columns, isRtl }) {
|
|
23
16
|
const gridRef = useRef(null);
|
|
24
17
|
const [gridWidth, containerQueryRef] = useContainerQuery((entry) => entry.contentBoxWidth, []);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../src/internal/grid/grid.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;
|
|
1
|
+
{"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../../src/internal/grid/grid.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 { Children, useRef } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useContainerQuery } from \"@cloudscape-design/component-toolkit\";\nimport { useDensityMode, useMergeRefs } from \"@cloudscape-design/component-toolkit/internal\";\n\nimport { zipTwoArrays } from \"../utils/zip-arrays\";\nimport { GridProps } from \"./interfaces\";\nimport GridItem from \"./item\";\n\nimport styles from \"./styles.css.js\";\n\n/* Matches grid gap in CSS. */\nconst GRID_GAP = { comfortable: 20, compact: 16 };\n\n/* Matches grid-auto-rows in CSS. */\nconst ROWSPAN_HEIGHT = { comfortable: 96, compact: 76 };\n\nexport default function Grid({ layout, children: render, columns, isRtl }: GridProps) {\n const gridRef = useRef<HTMLDivElement>(null);\n const [gridWidth, containerQueryRef] = useContainerQuery((entry) => entry.contentBoxWidth, []);\n const densityMode = useDensityMode(gridRef);\n const gridGap = GRID_GAP[densityMode];\n const rowspanHeight = ROWSPAN_HEIGHT[densityMode];\n\n // The below getters translate relative grid units into size/offset values in pixels.\n const getWidth = (colspan: number) => {\n colspan = Math.min(columns, colspan);\n const cellWidth = ((gridWidth || 0) - (columns - 1) * gridGap) / columns;\n return colspan * cellWidth + (colspan - 1) * gridGap;\n };\n const getHeight = (rowspan: number) => rowspan * rowspanHeight + (rowspan - 1) * gridGap;\n const getColOffset = (x: number) => {\n const offset = getWidth(x) + gridGap;\n return !isRtl?.() ? offset : -offset;\n };\n const getRowOffset = (y: number) => getHeight(y) + gridGap;\n\n const gridContext = { getWidth, getHeight, getColOffset, getRowOffset };\n const children = render?.(gridContext);\n\n const zipped = zipTwoArrays(layout, Children.toArray(children));\n\n const ref = useMergeRefs(gridRef, containerQueryRef);\n return (\n <div ref={ref} className={clsx(styles.grid, styles[`grid-${densityMode}`], styles[`columns-${columns}`])}>\n {zipped.map(([item, children]) => (\n <GridItem key={item.id} item={item}>\n {children}\n </GridItem>\n ))}\n </div>\n );\n}\n"]}
|
package/internal/manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { MutableRefObject, RefCallback } from "react";
|
|
2
|
-
/**
|
|
3
|
-
* useMergeRefs merges multiple refs into a single ref callback.
|
|
4
|
-
*
|
|
5
|
-
* For example:
|
|
6
|
-
* const mergedRef = useMergeRefs(ref1, ref2, ref3)
|
|
7
|
-
* <div ref={refs}>...</div>
|
|
8
|
-
*/
|
|
9
|
-
export declare function useMergeRefs(...refs: Array<RefCallback<any> | MutableRefObject<any> | null | undefined>): ((value: any) => void) | null;
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
-
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import { useMemo } from "react";
|
|
4
|
-
/**
|
|
5
|
-
* useMergeRefs merges multiple refs into a single ref callback.
|
|
6
|
-
*
|
|
7
|
-
* For example:
|
|
8
|
-
* const mergedRef = useMergeRefs(ref1, ref2, ref3)
|
|
9
|
-
* <div ref={refs}>...</div>
|
|
10
|
-
*/
|
|
11
|
-
export function useMergeRefs(...refs) {
|
|
12
|
-
return useMemo(() => {
|
|
13
|
-
if (refs.every((ref) => ref === null || ref === undefined)) {
|
|
14
|
-
return null;
|
|
15
|
-
}
|
|
16
|
-
return (value) => {
|
|
17
|
-
refs.forEach((ref) => {
|
|
18
|
-
if (typeof ref === "function") {
|
|
19
|
-
ref(value);
|
|
20
|
-
}
|
|
21
|
-
else if (ref !== null && ref !== undefined) {
|
|
22
|
-
ref.current = value;
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
// ESLint expects an array literal which we can not provide here
|
|
27
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
28
|
-
}, refs);
|
|
29
|
-
}
|
|
30
|
-
//# sourceMappingURL=use-merge-refs.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"use-merge-refs.js","sourceRoot":"","sources":["../../../../src/internal/utils/use-merge-refs.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAiC,OAAO,EAAE,MAAM,OAAO,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,UAAU,YAAY,CAAC,GAAG,IAAwE;IACtG,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,CAAC,EAAE;YAC1D,OAAO,IAAI,CAAC;SACb;QACD,OAAO,CAAC,KAAU,EAAE,EAAE;YACpB,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACnB,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;oBAC7B,GAAG,CAAC,KAAK,CAAC,CAAC;iBACZ;qBAAM,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,EAAE;oBAC3C,GAA6B,CAAC,OAAO,GAAG,KAAK,CAAC;iBAChD;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QACF,gEAAgE;QAChE,uDAAuD;IACzD,CAAC,EAAE,IAAI,CAAC,CAAC;AACX,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject, RefCallback, useMemo } from \"react\";\n\n/**\n * useMergeRefs merges multiple refs into a single ref callback.\n *\n * For example:\n * const mergedRef = useMergeRefs(ref1, ref2, ref3)\n * <div ref={refs}>...</div>\n */\nexport function useMergeRefs(...refs: Array<RefCallback<any> | MutableRefObject<any> | null | undefined>) {\n return useMemo(() => {\n if (refs.every((ref) => ref === null || ref === undefined)) {\n return null;\n }\n return (value: any) => {\n refs.forEach((ref) => {\n if (typeof ref === \"function\") {\n ref(value);\n } else if (ref !== null && ref !== undefined) {\n (ref as MutableRefObject<any>).current = value;\n }\n });\n };\n // ESLint expects an array literal which we can not provide here\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, refs);\n}\n"]}
|