@cloudscape-design/components-themeable 3.0.1179 → 3.0.1181
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/template/THIRD-PARTY-LICENSES +35 -0
- package/lib/internal/template/column-layout/flexible-column-layout/index.js +1 -1
- package/lib/internal/template/column-layout/flexible-column-layout/index.js.map +1 -1
- package/lib/internal/template/column-layout/grid-column-layout.js +1 -1
- package/lib/internal/template/column-layout/grid-column-layout.js.map +1 -1
- package/lib/internal/template/grid/internal.d.ts.map +1 -1
- package/lib/internal/template/grid/internal.js +1 -1
- package/lib/internal/template/grid/internal.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/vendor/react-keyed-flatten-children/index.d.ts +3 -0
- package/lib/internal/template/internal/vendor/react-keyed-flatten-children/index.d.ts.map +1 -0
- package/lib/internal/template/internal/vendor/react-keyed-flatten-children/index.js +27 -0
- package/lib/internal/template/internal/vendor/react-keyed-flatten-children/index.js.map +1 -0
- package/lib/internal/template/package.json +1 -1
- package/lib/internal/template/space-between/internal.d.ts.map +1 -1
- package/lib/internal/template/space-between/internal.js +3 -3
- package/lib/internal/template/space-between/internal.js.map +1 -1
- package/package.json +1 -1
|
@@ -277,3 +277,38 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
|
277
277
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
278
278
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
279
279
|
SOFTWARE.
|
|
280
|
+
|
|
281
|
+
---
|
|
282
|
+
|
|
283
|
+
Name: react-keyed-flatten-children
|
|
284
|
+
Version: 3.2.0
|
|
285
|
+
License: MIT
|
|
286
|
+
Private: false
|
|
287
|
+
Description: Flattens React children and fragments to an array with predictable and stable keys
|
|
288
|
+
Repository: git+https://github.com/grrowl/react-keyed-flatten-children.git
|
|
289
|
+
Homepage: https://github.com/grrowl/react-keyed-flatten-children
|
|
290
|
+
Author: Tom McKenzie <tom@chillidonut.com>
|
|
291
|
+
License Copyright:
|
|
292
|
+
===
|
|
293
|
+
|
|
294
|
+
MIT License
|
|
295
|
+
|
|
296
|
+
Copyright (c) 2019 Tom McKenzie
|
|
297
|
+
|
|
298
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
299
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
300
|
+
in the Software without restriction, including without limitation the rights
|
|
301
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
302
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
303
|
+
furnished to do so, subject to the following conditions:
|
|
304
|
+
|
|
305
|
+
The above copyright notice and this permission notice shall be included in all
|
|
306
|
+
copies or substantial portions of the Software.
|
|
307
|
+
|
|
308
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
309
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
310
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
311
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
312
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
313
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
314
|
+
SOFTWARE.
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import flattenChildren from 'react-keyed-flatten-children';
|
|
5
4
|
import clsx from 'clsx';
|
|
6
5
|
import { useContainerQuery } from '@cloudscape-design/component-toolkit';
|
|
6
|
+
import flattenChildren from '../../internal/vendor/react-keyed-flatten-children';
|
|
7
7
|
import styles from './styles.css.js';
|
|
8
8
|
const isOdd = (value) => value % 2 !== 0;
|
|
9
9
|
export function calculcateCssColumnCount(columns, minColumnWidth, containerWidth) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/column-layout/flexible-column-layout/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/column-layout/flexible-column-layout/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEzE,OAAO,eAAe,MAAM,oDAAoD,CAAC;AAGjF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,KAAK,GAAG,CAAC,KAAa,EAAW,EAAE,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;AAE1D,MAAM,UAAU,wBAAwB,CACtC,OAAe,EACf,cAAsB,EACtB,cAA6B;IAE7B,IAAI,CAAC,cAAc,EAAE,CAAC;QACpB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,yGAAyG;IACzG,MAAM,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,cAAc,CAAC,CAAC,CAAC;IAEzF,sGAAsG;IACtG,OAAO,IAAI,CAAC,GAAG,CACb,CAAC,EACD,iBAAiB,GAAG,OAAO,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC,CAAC,iBAAiB,CACpG,CAAC;AACJ,CAAC;AAUD,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,OAAO,GAAG,CAAC,EACX,cAAc,GAAG,CAAC,EAClB,cAAc,EACd,OAAO,EACP,QAAQ,EACR,aAAa,GACa;IAC1B,MAAM,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAEvF,MAAM,WAAW,GAAG,wBAAwB,CAAC,OAAO,EAAE,cAAc,EAAE,cAAc,CAAC,CAAC;IACtF,MAAM,oBAAoB,GAAG,OAAO,KAAK,WAAW,IAAI,cAAc,CAAC;IAEvE,wFAAwF;IACxF,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IACpD,MAAM,GAAG,GAAG,CAAC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,KAAK,CAAU,CAAC;IAE9C,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,CAAC,EAClB,MAAM,CAAC,gBAAgB,OAAO,EAAE,CAAC,EACjC,oBAAoB,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,CACpD,EACD,KAAK,EAAE,EAAE,mBAAmB,EAAE,UAAU,WAAW,mBAAmB,EAAE,IAEvE,iBAAiB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;QAClC,sEAAsE;QACtE,MAAM,GAAG,GAAI,KAAgC,CAAC,GAAG,CAAC;QAElD,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,EAClC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;gBAC3B,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,GAAG,WAAW,KAAK,CAAC;aAChD,CAAC,IAED,KAAK,CACF,CACP,CAAC;IACJ,CAAC,CAAC,CACE,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 { useContainerQuery } from '@cloudscape-design/component-toolkit';\n\nimport flattenChildren from '../../internal/vendor/react-keyed-flatten-children';\nimport { InternalColumnLayoutProps } from '../interfaces';\n\nimport styles from './styles.css.js';\n\nconst isOdd = (value: number): boolean => value % 2 !== 0;\n\nexport function calculcateCssColumnCount(\n columns: number,\n minColumnWidth: number,\n containerWidth: number | null\n): number {\n if (!containerWidth) {\n return columns;\n }\n\n // First, calculate how many columns we can have based on the current container width and minColumnWidth.\n const targetColumnCount = Math.min(columns, Math.floor(containerWidth / minColumnWidth));\n\n // When we start wrapping into fewer columns than desired, we want to keep the number of columns even.\n return Math.max(\n 1,\n targetColumnCount < columns && isOdd(targetColumnCount) ? targetColumnCount - 1 : targetColumnCount\n );\n}\n\ninterface FlexibleColumnLayoutProps\n extends Pick<\n InternalColumnLayoutProps,\n 'minColumnWidth' | 'columns' | 'variant' | 'borders' | 'disableGutters' | '__tagOverride'\n > {\n children: React.ReactNode;\n}\n\nexport default function FlexibleColumnLayout({\n columns = 1,\n minColumnWidth = 0,\n disableGutters,\n variant,\n children,\n __tagOverride,\n}: FlexibleColumnLayoutProps) {\n const [containerWidth, containerRef] = useContainerQuery(rect => rect.contentBoxWidth);\n\n const columnCount = calculcateCssColumnCount(columns, minColumnWidth, containerWidth);\n const shouldDisableGutters = variant !== 'text-grid' && disableGutters;\n\n // Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n const flattenedChildren = flattenChildren(children);\n const Tag = (__tagOverride ?? 'div') as 'div';\n\n return (\n <Tag\n ref={containerRef}\n className={clsx(\n styles['css-grid'],\n styles[`grid-variant-${variant}`],\n shouldDisableGutters && [styles['grid-no-gutters']]\n )}\n style={{ gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))` }}\n >\n {flattenedChildren.map((child, i) => {\n // If this react child is a primitive value, the key will be undefined\n const key = (child as Record<'key', unknown>).key;\n\n return (\n <div\n key={key ? String(key) : undefined}\n className={clsx(styles.item, {\n [styles['first-column']]: i % columnCount === 0,\n })}\n >\n {child}\n </div>\n );\n })}\n </Tag>\n );\n}\n"]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import flattenChildren from 'react-keyed-flatten-children';
|
|
5
4
|
import clsx from 'clsx';
|
|
6
5
|
import InternalGrid from '../grid/internal';
|
|
7
6
|
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
7
|
+
import flattenChildren from '../internal/vendor/react-keyed-flatten-children';
|
|
8
8
|
import { COLUMN_TRIGGERS } from './internal';
|
|
9
9
|
import { repeat } from './util';
|
|
10
10
|
import styles from './styles.css.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-column-layout.js","sourceRoot":"","sources":["../../../src/column-layout/grid-column-layout.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"grid-column-layout.js","sourceRoot":"","sources":["../../../src/column-layout/grid-column-layout.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,eAAe,MAAM,iDAAiD,CAAC;AAE9E,OAAO,EAAE,eAAe,EAA0B,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,WAAW,GAA4D;IAC3E,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE;IAChD,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;IAC9C,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;IAC9C,CAAC,EAAE,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE;CAC/C,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,YAAY,EACZ,QAAQ,EACR,aAAa,GACS;;IACtB,MAAM,iBAAiB,GAAG,OAAO,KAAK,WAAW,CAAC;IAClD,MAAM,oBAAoB,GAAG,CAAC,iBAAiB,IAAI,cAAc,CAAC;IAClE,MAAM,2BAA2B,GAAG,CAAC,iBAAiB,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;IAC1G,MAAM,yBAAyB,GAAG,CAAC,iBAAiB,IAAI,CAAC,OAAO,KAAK,UAAU,IAAI,OAAO,KAAK,KAAK,CAAC,CAAC;IAEtG,wFAAwF;IACxF,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAEpD,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,uBAAuB,CAAC,eAAe,CAAC,CAAC;IAEnE,OAAO,CACL,oBAAC,YAAY,IACX,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,IAAI,EACpB,cAAc,EAAE,MAAM,CAAC,MAAA,WAAW,CAAC,OAAO,CAAC,mCAAI,EAAE,EAAE,iBAAiB,CAAC,MAAM,CAAC,EAC5E,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,gBAAgB,OAAO,EAAE,CAAC,EAAE,MAAM,CAAC,gBAAgB,OAAO,EAAE,CAAC,EAAE;YACjG,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,2BAA2B;YAChE,CAAC,MAAM,CAAC,uBAAuB,CAAC,CAAC,EAAE,yBAAyB;YAC5D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,oBAAoB;SAClD,CAAC,EACF,YAAY,EAAE,YAAY,IAAI,UAAU,EACxC,qBAAqB,EAAE,UAAU,CAAC,EAAE,CAAC,UAAU,IAAI,MAAM,CAAC,mBAAmB,UAAU,EAAE,CAAC,EAC1F,aAAa,EAAE,aAAa,IAE3B,QAAQ,CACI,CAChB,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 { GridProps } from '../grid/interfaces';\nimport InternalGrid from '../grid/internal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport flattenChildren from '../internal/vendor/react-keyed-flatten-children';\nimport { InternalColumnLayoutProps } from './interfaces';\nimport { COLUMN_TRIGGERS, ColumnLayoutBreakpoint } from './internal';\nimport { repeat } from './util';\n\nimport styles from './styles.css.js';\n\nconst COLUMN_DEFS: Record<number, GridProps.ElementDefinition | undefined> = {\n 1: { colspan: { default: 12, xxs: 12, xs: 12 } },\n 2: { colspan: { default: 12, xxs: 6, xs: 6 } },\n 3: { colspan: { default: 12, xxs: 6, xs: 4 } },\n 4: { colspan: { default: 12, xxs: 6, xs: 3 } },\n};\n\ninterface GridColumnLayoutProps\n extends Required<Pick<InternalColumnLayoutProps, 'columns' | 'variant' | 'borders' | 'disableGutters'>>,\n Pick<InternalColumnLayoutProps, '__tagOverride'> {\n children: React.ReactNode;\n __breakpoint?: ColumnLayoutBreakpoint;\n}\n\nexport default function GridColumnLayout({\n columns,\n variant,\n borders,\n disableGutters,\n __breakpoint,\n children,\n __tagOverride,\n}: GridColumnLayoutProps) {\n const isTextGridVariant = variant === 'text-grid';\n const shouldDisableGutters = !isTextGridVariant && disableGutters;\n const shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');\n const shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');\n\n // Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n const flattenedChildren = flattenChildren(children);\n\n const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n\n return (\n <InternalGrid\n ref={ref}\n disableGutters={true}\n gridDefinition={repeat(COLUMN_DEFS[columns] ?? {}, flattenedChildren.length)}\n className={clsx(styles.grid, styles[`grid-columns-${columns}`], styles[`grid-variant-${variant}`], {\n [styles['grid-horizontal-borders']]: shouldHaveHorizontalBorders,\n [styles['grid-vertical-borders']]: shouldHaveVerticalBorders,\n [styles['grid-no-gutters']]: shouldDisableGutters,\n })}\n __breakpoint={__breakpoint || breakpoint}\n __responsiveClassName={breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`]}\n __tagOverride={__tagOverride}\n >\n {children}\n </InternalGrid>\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/grid/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/grid/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAa,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAKxC,OAAO,EAAE,UAAU,EAA0B,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,UAAU,iBAAkB,SAAQ,SAAS,EAAE,0BAA0B;IACvE,YAAY,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAEjC;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,KAAK,UAAU,CAAC;IACtE;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,0FA0EjB,CAAC;AAgBF,eAAe,YAAY,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import flattenChildren from 'react-keyed-flatten-children';
|
|
5
4
|
import clsx from 'clsx';
|
|
6
5
|
import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
|
|
7
6
|
import { getBaseProps } from '../internal/base-component';
|
|
8
7
|
import { matchBreakpointMapping } from '../internal/breakpoints';
|
|
9
8
|
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
10
9
|
import { isDevelopment } from '../internal/is-development';
|
|
10
|
+
import flattenChildren from '../internal/vendor/react-keyed-flatten-children';
|
|
11
11
|
import styles from './styles.css.js';
|
|
12
12
|
const InternalGrid = React.forwardRef(({ __breakpoint, gridDefinition = [], disableGutters = false, children, __tagOverride, __responsiveClassName, __internalRootRef, ...restProps }, ref) => {
|
|
13
13
|
let [defaultBreakpoint, defaultRef] = useContainerBreakpoints(undefined);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/grid/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/grid/internal.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 from 'react';\nimport clsx, { ClassValue } from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { Breakpoint, matchBreakpointMapping } from '../internal/breakpoints';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport flattenChildren from '../internal/vendor/react-keyed-flatten-children';\nimport { GridProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalGridProps extends GridProps, InternalBaseComponentProps {\n __breakpoint?: Breakpoint | null;\n\n /**\n * The handler that fires when the grid breakpoint changes.\n */\n __responsiveClassName?: (breakpoint: Breakpoint | null) => ClassValue;\n /**\n * Overrides the default wrapper HTML tag.\n */\n __tagOverride?: string;\n}\n\nconst InternalGrid = React.forwardRef(\n (\n {\n __breakpoint,\n gridDefinition = [],\n disableGutters = false,\n children,\n __tagOverride,\n __responsiveClassName,\n __internalRootRef,\n ...restProps\n }: InternalGridProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n let [defaultBreakpoint, defaultRef]: [Breakpoint | null, React.Ref<HTMLDivElement>] =\n useContainerBreakpoints(undefined);\n if (__breakpoint !== undefined) {\n defaultBreakpoint = __breakpoint;\n defaultRef = ref;\n }\n\n const baseProps = getBaseProps(restProps);\n /*\n Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n */\n const flattenedChildren = flattenChildren(children);\n const Tag = (__tagOverride ?? 'div') as 'div';\n\n if (isDevelopment) {\n const columnCount = gridDefinition.length;\n const childCount = flattenedChildren.length;\n if (columnCount !== childCount) {\n warnOnce(\n 'Grid',\n `The number of children (${childCount}) does not match the number of columns defined (${columnCount}).`\n );\n }\n }\n\n const mergedRef = useMergeRefs(defaultRef, __internalRootRef);\n\n return (\n <Tag\n {...baseProps}\n className={clsx(\n styles.grid,\n baseProps.className,\n { [styles['no-gutters']]: disableGutters },\n __responsiveClassName ? __responsiveClassName(defaultBreakpoint) : null\n )}\n ref={mergedRef}\n >\n {flattenedChildren.map((child, i) => {\n // If this react child is a primitive value, the key will be undefined\n const key = (child as Record<'key', unknown>).key;\n\n return (\n <div\n key={key ? String(key) : undefined}\n className={clsx(\n styles['grid-column'],\n getColumnClassNames('colspan', gridDefinition[i]?.colspan, defaultBreakpoint),\n getColumnClassNames('offset', gridDefinition[i]?.offset, defaultBreakpoint),\n getColumnClassNames('pull', gridDefinition[i]?.pull, defaultBreakpoint),\n getColumnClassNames('push', gridDefinition[i]?.push, defaultBreakpoint)\n )}\n >\n <div className={styles['restore-pointer-events']}>{child}</div>\n </div>\n );\n })}\n </Tag>\n );\n }\n);\n\nfunction getColumnClassNames(\n prop: string,\n mapping: undefined | number | GridProps.BreakpointMapping,\n breakpoint: Breakpoint | null\n): string | null {\n if (typeof mapping === 'number') {\n return styles[`${prop}-${mapping}`];\n }\n if (breakpoint === null || mapping === undefined) {\n return null;\n }\n return styles[`${prop}-${matchBreakpointMapping(mapping, breakpoint)}`];\n}\n\nexport default InternalGrid;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "components";
|
|
2
|
-
export var PACKAGE_VERSION = "3.0.0 (
|
|
3
|
-
export var GIT_SHA = "
|
|
2
|
+
export var PACKAGE_VERSION = "3.0.0 (aae4707d)";
|
|
3
|
+
export var GIT_SHA = "aae4707d";
|
|
4
4
|
export var THEME = "open-source-visual-refresh";
|
|
5
5
|
export var SYSTEM = "core";
|
|
6
6
|
export var ALWAYS_VISUAL_REFRESH = true;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/vendor/react-keyed-flatten-children/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAwD,SAAS,EAAE,MAAM,OAAO,CAAC;AASxF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,SAAI,EAAE,IAAI,GAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAO,GAAG,SAAS,EAAE,CAenH"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
// Vendored from react-keyed-flatten-children@3.2.0 (MIT License)
|
|
4
|
+
// Original source: https://github.com/grrowl/react-keyed-flatten-children
|
|
5
|
+
import { Children, cloneElement, isValidElement } from 'react';
|
|
6
|
+
import { isFragment } from 'react-is';
|
|
7
|
+
/* Returns React children into an array, flattening fragments. */
|
|
8
|
+
function isFragmentWithChildren(node) {
|
|
9
|
+
return isFragment(node);
|
|
10
|
+
}
|
|
11
|
+
export default function flattenChildren(children, depth = 0, keys = []) {
|
|
12
|
+
return Children.toArray(children).reduce((acc, node, nodeIndex) => {
|
|
13
|
+
if (isFragmentWithChildren(node)) {
|
|
14
|
+
acc.push(...flattenChildren(node.props.children, depth + 1, keys.concat(node.key || nodeIndex)));
|
|
15
|
+
}
|
|
16
|
+
else if (isValidElement(node)) {
|
|
17
|
+
acc.push(cloneElement(node, {
|
|
18
|
+
key: keys.concat(String(node.key)).join('.'),
|
|
19
|
+
}));
|
|
20
|
+
}
|
|
21
|
+
else if (typeof node === 'string' || typeof node === 'number') {
|
|
22
|
+
acc.push(node);
|
|
23
|
+
}
|
|
24
|
+
return acc;
|
|
25
|
+
}, []);
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/vendor/react-keyed-flatten-children/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,iEAAiE;AACjE,0EAA0E;AAE1E,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAA2B,MAAM,OAAO,CAAC;AACxF,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,iEAAiE;AAEjE,SAAS,sBAAsB,CAAC,IAAa;IAC3C,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC;AAC1B,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,QAAmB,EAAE,KAAK,GAAG,CAAC,EAAE,OAA4B,EAAE;IACpG,OAAO,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,GAAgB,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7E,IAAI,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC;YACjC,GAAG,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;QACnG,CAAC;aAAM,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;YAChC,GAAG,CAAC,IAAI,CACN,YAAY,CAAC,IAAI,EAAE;gBACjB,GAAG,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;aAC7C,CAAC,CACH,CAAC;QACJ,CAAC;aAAM,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAChE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjB,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n// Vendored from react-keyed-flatten-children@3.2.0 (MIT License)\n// Original source: https://github.com/grrowl/react-keyed-flatten-children\n\nimport { Children, cloneElement, isValidElement, ReactElement, ReactNode } from 'react';\nimport { isFragment } from 'react-is';\n\n/* Returns React children into an array, flattening fragments. */\n\nfunction isFragmentWithChildren(node: unknown): node is ReactElement<{ children: ReactNode }> {\n return isFragment(node);\n}\n\nexport default function flattenChildren(children: ReactNode, depth = 0, keys: (string | number)[] = []): ReactNode[] {\n return Children.toArray(children).reduce((acc: ReactNode[], node, nodeIndex) => {\n if (isFragmentWithChildren(node)) {\n acc.push(...flattenChildren(node.props.children, depth + 1, keys.concat(node.key || nodeIndex)));\n } else if (isValidElement(node)) {\n acc.push(\n cloneElement(node, {\n key: keys.concat(String(node.key)).join('.'),\n })\n );\n } else if (typeof node === 'string' || typeof node === 'number') {\n acc.push(node);\n }\n return acc;\n }, []);\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/space-between/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/space-between/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqC,MAAM,OAAO,CAAC;AAM1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMjD,QAAA,MAAM,oBAAoB,uHAgDzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
2
|
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
-
import React, { forwardRef } from 'react';
|
|
4
|
-
import flattenChildren from 'react-keyed-flatten-children';
|
|
3
|
+
import React, { forwardRef, isValidElement } from 'react';
|
|
5
4
|
import clsx from 'clsx';
|
|
6
5
|
import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
|
|
7
6
|
import { getBaseProps } from '../internal/base-component';
|
|
8
7
|
import WithNativeAttributes from '../internal/utils/with-native-attributes';
|
|
8
|
+
import flattenChildren from '../internal/vendor/react-keyed-flatten-children';
|
|
9
9
|
import styles from './styles.css.js';
|
|
10
10
|
const InternalSpaceBetween = forwardRef(({ direction = 'vertical', size, children, alignItems, nativeAttributes, __internalRootRef, ...props }, ref) => {
|
|
11
11
|
const mergedRef = useMergeRefs(ref, __internalRootRef);
|
|
@@ -15,7 +15,7 @@ const InternalSpaceBetween = forwardRef(({ direction = 'vertical', size, childre
|
|
|
15
15
|
*/
|
|
16
16
|
const flattenedChildren = flattenChildren(children);
|
|
17
17
|
return (React.createElement(WithNativeAttributes, { ...baseProps, tag: "div", componentName: "SpaceBetween", nativeAttributes: nativeAttributes, className: clsx(baseProps.className, styles.root, styles[direction], styles[`${direction}-${size}`], alignItems && styles[`align-${alignItems}`]), ref: mergedRef }, flattenedChildren.map(child => {
|
|
18
|
-
const key =
|
|
18
|
+
const key = isValidElement(child) ? child.key : undefined;
|
|
19
19
|
return (React.createElement("div", { key: key, className: styles.child }, child));
|
|
20
20
|
})));
|
|
21
21
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/space-between/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/space-between/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,eAAe,MAAM,iDAAiD,CAAC;AAG9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EACE,SAAS,GAAG,UAAU,EACtB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,iBAAiB,EACjB,GAAG,KAAK,EACkB,EAC5B,GAA8B,EAC9B,EAAE;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,GAAG,EAAE,iBAAiB,CAAC,CAAC;IACvD,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC;;KAEC;IACD,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAEpD,OAAO,CACL,oBAAC,oBAAoB,OACf,SAAS,EACb,GAAG,EAAC,KAAK,EACT,aAAa,EAAC,cAAc,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,SAAS,CAAC,EACjB,MAAM,CAAC,GAAG,SAAS,IAAI,IAAI,EAAE,CAAC,EAC9B,UAAU,IAAI,MAAM,CAAC,SAAS,UAAU,EAAE,CAAC,CAC5C,EACD,GAAG,EAAE,SAAS,IAEb,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAC7B,MAAM,GAAG,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAE1D,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,KAAK,IACnC,KAAK,CACF,CACP,CAAC;IACJ,CAAC,CAAC,CACmB,CACxB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, isValidElement } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport WithNativeAttributes from '../internal/utils/with-native-attributes';\nimport flattenChildren from '../internal/vendor/react-keyed-flatten-children';\nimport { SpaceBetweenProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalSpaceBetweenProps = SpaceBetweenProps & InternalBaseComponentProps;\n\nconst InternalSpaceBetween = forwardRef(\n (\n {\n direction = 'vertical',\n size,\n children,\n alignItems,\n nativeAttributes,\n __internalRootRef,\n ...props\n }: InternalSpaceBetweenProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const mergedRef = useMergeRefs(ref, __internalRootRef);\n const baseProps = getBaseProps(props);\n\n /*\n Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n */\n const flattenedChildren = flattenChildren(children);\n\n return (\n <WithNativeAttributes\n {...baseProps}\n tag=\"div\"\n componentName=\"SpaceBetween\"\n nativeAttributes={nativeAttributes}\n className={clsx(\n baseProps.className,\n styles.root,\n styles[direction],\n styles[`${direction}-${size}`],\n alignItems && styles[`align-${alignItems}`]\n )}\n ref={mergedRef}\n >\n {flattenedChildren.map(child => {\n const key = isValidElement(child) ? child.key : undefined;\n\n return (\n <div key={key} className={styles.child}>\n {child}\n </div>\n );\n })}\n </WithNativeAttributes>\n );\n }\n);\n\nexport default InternalSpaceBetween;\n"]}
|