@cloudscape-design/components 3.0.221 → 3.0.222

package/collection-preferences/index.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
@@ -16,15 +16,15 @@ import styles from './styles.css.js';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 export default function CollectionPreferences(_a) {
-    var title = _a.title, confirmLabel = _a.confirmLabel, cancelLabel = _a.cancelLabel, _b = _a.disabled, disabled = _b === void 0 ? false : _b, onConfirm = _a.onConfirm, onCancel = _a.onCancel, visibleContentPreference = _a.visibleContentPreference, pageSizePreference = _a.pageSizePreference, wrapLinesPreference = _a.wrapLinesPreference, stripedRowsPreference = _a.stripedRowsPreference, contentDensityPreference = _a.contentDensityPreference, preferences = _a.preferences, customPreference = _a.customPreference, rest = __rest(_a, ["title", "confirmLabel", "cancelLabel", "disabled", "onConfirm", "onCancel", "visibleContentPreference", "pageSizePreference", "wrapLinesPreference", "stripedRowsPreference", "contentDensityPreference", "preferences", "customPreference"]);
-    var __internalRootRef = useBaseComponent('CollectionPreferences').__internalRootRef;
+    var { title, confirmLabel, cancelLabel, disabled = false, onConfirm, onCancel, visibleContentPreference, pageSizePreference, wrapLinesPreference, stripedRowsPreference, contentDensityPreference, preferences, customPreference } = _a, rest = __rest(_a, ["title", "confirmLabel", "cancelLabel", "disabled", "onConfirm", "onCancel", "visibleContentPreference", "pageSizePreference", "wrapLinesPreference", "stripedRowsPreference", "contentDensityPreference", "preferences", "customPreference"]);
+    const { __internalRootRef } = useBaseComponent('CollectionPreferences');
     checkControlled('CollectionPreferences', 'preferences', preferences, 'onConfirm', onConfirm);
-    var baseProps = getBaseProps(rest);
-    var _c = useState(false), modalVisible = _c[0], setModalVisible = _c[1];
-    var _d = useState(copyPreferences(preferences || {})), temporaryPreferences = _d[0], setTemporaryPreferences = _d[1];
-    var triggerRef = useRef(null);
-    var dialogPreviouslyOpen = useRef(false);
-    useEffect(function () {
+    const baseProps = getBaseProps(rest);
+    const [modalVisible, setModalVisible] = useState(false);
+    const [temporaryPreferences, setTemporaryPreferences] = useState(copyPreferences(preferences || {}));
+    const triggerRef = useRef(null);
+    const dialogPreviouslyOpen = useRef(false);
+    useEffect(() => {
         if (!modalVisible) {
             dialogPreviouslyOpen.current && triggerRef.current && triggerRef.current.focus();
         }
@@ -32,26 +32,24 @@ export default function CollectionPreferences(_a) {
             dialogPreviouslyOpen.current = true;
         }
     }, [modalVisible]);
-    var onConfirmListener = function () {
+    const onConfirmListener = () => {
         setModalVisible(false);
         fireNonCancelableEvent(onConfirm, temporaryPreferences);
     };
-    var onCancelListener = function () {
+    const onCancelListener = () => {
         fireNonCancelableEvent(onCancel, {});
         setModalVisible(false);
         setTemporaryPreferences(copyPreferences(preferences || {}));
     };
-    var hasLeftContent = !!(pageSizePreference ||
+    const hasLeftContent = !!(pageSizePreference ||
         wrapLinesPreference ||
         stripedRowsPreference ||
         contentDensityPreference ||
         customPreference);
-    var hasRightContent = !!visibleContentPreference;
-    var onChange = function (changedPreferences) {
-        return setTemporaryPreferences(mergePreferences(changedPreferences, temporaryPreferences));
-    };
-    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
-        React.createElement(InternalButton, { ref: triggerRef, className: styles['trigger-button'], disabled: disabled, ariaLabel: title, onClick: function () {
+    const hasRightContent = !!visibleContentPreference;
+    const onChange = (changedPreferences) => setTemporaryPreferences(mergePreferences(changedPreferences, temporaryPreferences));
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: __internalRootRef }),
+        React.createElement(InternalButton, { ref: triggerRef, className: styles['trigger-button'], disabled: disabled, ariaLabel: title, onClick: () => {
                 setTemporaryPreferences(copyPreferences(preferences || {}));
                 setModalVisible(true);
             }, variant: "icon", iconName: "settings", formAction: "none" }),
@@ -60,11 +58,11 @@ export default function CollectionPreferences(_a) {
                     React.createElement(InternalButton, { className: styles['cancel-button'], variant: "link", formAction: "none", onClick: onCancelListener }, cancelLabel),
                     React.createElement(InternalButton, { className: styles['confirm-button'], variant: "primary", formAction: "none", onClick: onConfirmListener }, confirmLabel))), closeAriaLabel: cancelLabel, size: hasLeftContent && hasRightContent ? 'large' : 'medium', onDismiss: onCancelListener },
             React.createElement(ModalContentLayout, { left: hasLeftContent && (React.createElement(InternalSpaceBetween, { size: "l" },
-                    pageSizePreference && (React.createElement(PageSizePreference, __assign({ value: temporaryPreferences.pageSize }, pageSizePreference, { onChange: function (pageSize) { return onChange({ pageSize: pageSize }); } }))),
-                    wrapLinesPreference && (React.createElement(WrapLinesPreference, __assign({ value: temporaryPreferences.wrapLines }, wrapLinesPreference, { onChange: function (wrapLines) { return onChange({ wrapLines: wrapLines }); } }))),
-                    stripedRowsPreference && (React.createElement(StripedRowsPreference, __assign({ value: temporaryPreferences.stripedRows }, stripedRowsPreference, { onChange: function (stripedRows) { return onChange({ stripedRows: stripedRows }); } }))),
-                    contentDensityPreference && (React.createElement(ContentDensityPreference, __assign({ value: temporaryPreferences.contentDensity }, contentDensityPreference, { onChange: function (contentDensity) { return onChange({ contentDensity: contentDensity }); } }))),
-                    customPreference && (React.createElement(CustomPreference, { value: temporaryPreferences.custom, customPreference: customPreference, onChange: function (custom) { return onChange({ custom: custom }); } })))), right: visibleContentPreference && (React.createElement(VisibleContentPreference, __assign({ value: temporaryPreferences.visibleContent }, visibleContentPreference, { onChange: function (visibleContent) { return onChange({ visibleContent: visibleContent }); } }))) })))));
+                    pageSizePreference && (React.createElement(PageSizePreference, Object.assign({ value: temporaryPreferences.pageSize }, pageSizePreference, { onChange: pageSize => onChange({ pageSize }) }))),
+                    wrapLinesPreference && (React.createElement(WrapLinesPreference, Object.assign({ value: temporaryPreferences.wrapLines }, wrapLinesPreference, { onChange: wrapLines => onChange({ wrapLines }) }))),
+                    stripedRowsPreference && (React.createElement(StripedRowsPreference, Object.assign({ value: temporaryPreferences.stripedRows }, stripedRowsPreference, { onChange: stripedRows => onChange({ stripedRows }) }))),
+                    contentDensityPreference && (React.createElement(ContentDensityPreference, Object.assign({ value: temporaryPreferences.contentDensity }, contentDensityPreference, { onChange: contentDensity => onChange({ contentDensity }) }))),
+                    customPreference && (React.createElement(CustomPreference, { value: temporaryPreferences.custom, customPreference: customPreference, onChange: custom => onChange({ custom }) })))), right: visibleContentPreference && (React.createElement(VisibleContentPreference, Object.assign({ value: temporaryPreferences.visibleContent }, visibleContentPreference, { onChange: visibleContent => onChange({ visibleContent }) }))) })))));
 }
 applyDisplayName(CollectionPreferences, 'CollectionPreferences');
 //# sourceMappingURL=index.js.map

package/collection-preferences/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/collection-preferences/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';\nimport clsx from 'clsx';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalModal from '../modal/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport {\n  copyPreferences,\n  mergePreferences,\n  ModalContentLayout,\n  PageSizePreference,\n  WrapLinesPreference,\n  StripedRowsPreference,\n  ContentDensityPreference,\n  CustomPreference,\n} from './utils';\nimport VisibleContentPreference from './visible-content';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { CollectionPreferencesProps };\n\nexport default function CollectionPreferences({\n  title,\n  confirmLabel,\n  cancelLabel,\n  disabled = false,\n  onConfirm,\n  onCancel,\n  visibleContentPreference,\n  pageSizePreference,\n  wrapLinesPreference,\n  stripedRowsPreference,\n  contentDensityPreference,\n  preferences,\n  customPreference,\n  ...rest\n}: CollectionPreferencesProps) {\n  const { __internalRootRef } = useBaseComponent('CollectionPreferences');\n  checkControlled('CollectionPreferences', 'preferences', preferences, 'onConfirm', onConfirm);\n  const baseProps = getBaseProps(rest);\n  const [modalVisible, setModalVisible] = useState(false);\n  const [temporaryPreferences, setTemporaryPreferences] = useState(copyPreferences(preferences || {}));\n  const triggerRef = useRef<ButtonProps.Ref>(null);\n  const dialogPreviouslyOpen = useRef(false);\n  useEffect(() => {\n    if (!modalVisible) {\n      dialogPreviouslyOpen.current && triggerRef.current && triggerRef.current.focus();\n    } else {\n      dialogPreviouslyOpen.current = true;\n    }\n  }, [modalVisible]);\n\n  const onConfirmListener = () => {\n    setModalVisible(false);\n    fireNonCancelableEvent(onConfirm, temporaryPreferences);\n  };\n\n  const onCancelListener = () => {\n    fireNonCancelableEvent(onCancel, {});\n    setModalVisible(false);\n    setTemporaryPreferences(copyPreferences(preferences || {}));\n  };\n\n  const hasLeftContent = !!(\n    pageSizePreference ||\n    wrapLinesPreference ||\n    stripedRowsPreference ||\n    contentDensityPreference ||\n    customPreference\n  );\n  const hasRightContent = !!visibleContentPreference;\n\n  const onChange = (changedPreferences: CollectionPreferencesProps.Preferences) =>\n    setTemporaryPreferences(mergePreferences(changedPreferences, temporaryPreferences));\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalButton\n        ref={triggerRef}\n        className={styles['trigger-button']}\n        disabled={disabled}\n        ariaLabel={title}\n        onClick={() => {\n          setTemporaryPreferences(copyPreferences(preferences || {}));\n          setModalVisible(true);\n        }}\n        variant=\"icon\"\n        iconName=\"settings\"\n        formAction=\"none\"\n      />\n      {!disabled && modalVisible && (\n        <InternalModal\n          className={styles['modal-root']}\n          visible={true}\n          header={title}\n          footer={\n            <InternalBox float=\"right\">\n              <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n                <InternalButton\n                  className={styles['cancel-button']}\n                  variant=\"link\"\n                  formAction=\"none\"\n                  onClick={onCancelListener}\n                >\n                  {cancelLabel}\n                </InternalButton>\n                <InternalButton\n                  className={styles['confirm-button']}\n                  variant=\"primary\"\n                  formAction=\"none\"\n                  onClick={onConfirmListener}\n                >\n                  {confirmLabel}\n                </InternalButton>\n              </InternalSpaceBetween>\n            </InternalBox>\n          }\n          closeAriaLabel={cancelLabel}\n          size={hasLeftContent && hasRightContent ? 'large' : 'medium'}\n          onDismiss={onCancelListener}\n        >\n          <ModalContentLayout\n            left={\n              hasLeftContent && (\n                <InternalSpaceBetween size=\"l\">\n                  {pageSizePreference && (\n                    <PageSizePreference\n                      value={temporaryPreferences.pageSize}\n                      {...pageSizePreference}\n                      onChange={pageSize => onChange({ pageSize })}\n                    />\n                  )}\n                  {wrapLinesPreference && (\n                    <WrapLinesPreference\n                      value={temporaryPreferences.wrapLines}\n                      {...wrapLinesPreference}\n                      onChange={wrapLines => onChange({ wrapLines })}\n                    />\n                  )}\n                  {stripedRowsPreference && (\n                    <StripedRowsPreference\n                      value={temporaryPreferences.stripedRows}\n                      {...stripedRowsPreference}\n                      onChange={stripedRows => onChange({ stripedRows })}\n                    />\n                  )}\n                  {contentDensityPreference && (\n                    <ContentDensityPreference\n                      value={temporaryPreferences.contentDensity}\n                      {...contentDensityPreference}\n                      onChange={contentDensity => onChange({ contentDensity })}\n                    />\n                  )}\n                  {customPreference && (\n                    <CustomPreference\n                      value={temporaryPreferences.custom}\n                      customPreference={customPreference}\n                      onChange={custom => onChange({ custom })}\n                    />\n                  )}\n                </InternalSpaceBetween>\n              )\n            }\n            right={\n              visibleContentPreference && (\n                <VisibleContentPreference\n                  value={temporaryPreferences.visibleContent}\n                  {...visibleContentPreference}\n                  onChange={visibleContent => onChange({ visibleContent })}\n                />\n              )\n            }\n          />\n        </InternalModal>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(CollectionPreferences, 'CollectionPreferences');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/collection-preferences/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';\nimport clsx from 'clsx';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalModal from '../modal/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport {\n  copyPreferences,\n  mergePreferences,\n  ModalContentLayout,\n  PageSizePreference,\n  WrapLinesPreference,\n  StripedRowsPreference,\n  ContentDensityPreference,\n  CustomPreference,\n} from './utils';\nimport VisibleContentPreference from './visible-content';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { CollectionPreferencesProps };\n\nexport default function CollectionPreferences({\n  title,\n  confirmLabel,\n  cancelLabel,\n  disabled = false,\n  onConfirm,\n  onCancel,\n  visibleContentPreference,\n  pageSizePreference,\n  wrapLinesPreference,\n  stripedRowsPreference,\n  contentDensityPreference,\n  preferences,\n  customPreference,\n  ...rest\n}: CollectionPreferencesProps) {\n  const { __internalRootRef } = useBaseComponent('CollectionPreferences');\n  checkControlled('CollectionPreferences', 'preferences', preferences, 'onConfirm', onConfirm);\n  const baseProps = getBaseProps(rest);\n  const [modalVisible, setModalVisible] = useState(false);\n  const [temporaryPreferences, setTemporaryPreferences] = useState(copyPreferences(preferences || {}));\n  const triggerRef = useRef<ButtonProps.Ref>(null);\n  const dialogPreviouslyOpen = useRef(false);\n  useEffect(() => {\n    if (!modalVisible) {\n      dialogPreviouslyOpen.current && triggerRef.current && triggerRef.current.focus();\n    } else {\n      dialogPreviouslyOpen.current = true;\n    }\n  }, [modalVisible]);\n\n  const onConfirmListener = () => {\n    setModalVisible(false);\n    fireNonCancelableEvent(onConfirm, temporaryPreferences);\n  };\n\n  const onCancelListener = () => {\n    fireNonCancelableEvent(onCancel, {});\n    setModalVisible(false);\n    setTemporaryPreferences(copyPreferences(preferences || {}));\n  };\n\n  const hasLeftContent = !!(\n    pageSizePreference ||\n    wrapLinesPreference ||\n    stripedRowsPreference ||\n    contentDensityPreference ||\n    customPreference\n  );\n  const hasRightContent = !!visibleContentPreference;\n\n  const onChange = (changedPreferences: CollectionPreferencesProps.Preferences) =>\n    setTemporaryPreferences(mergePreferences(changedPreferences, temporaryPreferences));\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n      <InternalButton\n        ref={triggerRef}\n        className={styles['trigger-button']}\n        disabled={disabled}\n        ariaLabel={title}\n        onClick={() => {\n          setTemporaryPreferences(copyPreferences(preferences || {}));\n          setModalVisible(true);\n        }}\n        variant=\"icon\"\n        iconName=\"settings\"\n        formAction=\"none\"\n      />\n      {!disabled && modalVisible && (\n        <InternalModal\n          className={styles['modal-root']}\n          visible={true}\n          header={title}\n          footer={\n            <InternalBox float=\"right\">\n              <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n                <InternalButton\n                  className={styles['cancel-button']}\n                  variant=\"link\"\n                  formAction=\"none\"\n                  onClick={onCancelListener}\n                >\n                  {cancelLabel}\n                </InternalButton>\n                <InternalButton\n                  className={styles['confirm-button']}\n                  variant=\"primary\"\n                  formAction=\"none\"\n                  onClick={onConfirmListener}\n                >\n                  {confirmLabel}\n                </InternalButton>\n              </InternalSpaceBetween>\n            </InternalBox>\n          }\n          closeAriaLabel={cancelLabel}\n          size={hasLeftContent && hasRightContent ? 'large' : 'medium'}\n          onDismiss={onCancelListener}\n        >\n          <ModalContentLayout\n            left={\n              hasLeftContent && (\n                <InternalSpaceBetween size=\"l\">\n                  {pageSizePreference && (\n                    <PageSizePreference\n                      value={temporaryPreferences.pageSize}\n                      {...pageSizePreference}\n                      onChange={pageSize => onChange({ pageSize })}\n                    />\n                  )}\n                  {wrapLinesPreference && (\n                    <WrapLinesPreference\n                      value={temporaryPreferences.wrapLines}\n                      {...wrapLinesPreference}\n                      onChange={wrapLines => onChange({ wrapLines })}\n                    />\n                  )}\n                  {stripedRowsPreference && (\n                    <StripedRowsPreference\n                      value={temporaryPreferences.stripedRows}\n                      {...stripedRowsPreference}\n                      onChange={stripedRows => onChange({ stripedRows })}\n                    />\n                  )}\n                  {contentDensityPreference && (\n                    <ContentDensityPreference\n                      value={temporaryPreferences.contentDensity}\n                      {...contentDensityPreference}\n                      onChange={contentDensity => onChange({ contentDensity })}\n                    />\n                  )}\n                  {customPreference && (\n                    <CustomPreference\n                      value={temporaryPreferences.custom}\n                      customPreference={customPreference}\n                      onChange={custom => onChange({ custom })}\n                    />\n                  )}\n                </InternalSpaceBetween>\n              )\n            }\n            right={\n              visibleContentPreference && (\n                <VisibleContentPreference\n                  value={temporaryPreferences.visibleContent}\n                  {...visibleContentPreference}\n                  onChange={visibleContent => onChange({ visibleContent })}\n                />\n              )\n            }\n          />\n        </InternalModal>\n      )}\n    </div>\n  );\n}\n\napplyDisplayName(CollectionPreferences, 'CollectionPreferences');\n"]}

package/collection-preferences/utils.js

@@ -8,80 +8,48 @@ import InternalFormField from '../form-field/internal';
 import InternalRadioGroup from '../radio-group/internal';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import styles from './styles.css.js';
-export var copyPreferences = function (_a) {
-    var pageSize = _a.pageSize, wrapLines = _a.wrapLines, stripedRows = _a.stripedRows, contentDensity = _a.contentDensity, visibleContent = _a.visibleContent, custom = _a.custom;
-    return ({
-        pageSize: pageSize,
-        wrapLines: wrapLines,
-        stripedRows: stripedRows,
-        contentDensity: contentDensity,
-        visibleContent: visibleContent,
-        custom: custom
-    });
-};
-export var mergePreferences = function (newPref, oldPref) { return ({
+export const copyPreferences = ({ pageSize, wrapLines, stripedRows, contentDensity, visibleContent, custom, }) => ({
+    pageSize,
+    wrapLines,
+    stripedRows,
+    contentDensity,
+    visibleContent,
+    custom,
+});
+export const mergePreferences = (newPref, oldPref) => ({
     pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,
     wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,
     stripedRows: newPref.stripedRows !== undefined ? newPref.stripedRows : oldPref.stripedRows,
     contentDensity: newPref.contentDensity !== undefined ? newPref.contentDensity : oldPref.contentDensity,
     visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,
-    custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom
-}); };
-export var ModalContentLayout = function (_a) {
-    var left = _a.left, right = _a.right;
-    var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
-    var smallContainer = breakpoint === 'default';
+    custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom,
+});
+export const ModalContentLayout = ({ left, right }) => {
+    const [breakpoint, ref] = useContainerBreakpoints(['xs']);
+    const smallContainer = breakpoint === 'default';
     if (smallContainer) {
         return (React.createElement("div", { ref: ref },
             left && React.createElement("div", null, left),
             right && React.createElement("div", { className: clsx(left && styles['second-column-small']) }, right)));
     }
-    var columns = left && right ? 2 : 1;
+    const columns = left && right ? 2 : 1;
     return (React.createElement("div", { ref: ref },
         React.createElement(InternalColumnLayout, { columns: columns, variant: "text-grid" },
             left && React.createElement("div", null, left),
             right && React.createElement("div", null, right))));
 };
-export var PageSizePreference = function (_a) {
-    var title = _a.title, options = _a.options, value = _a.value, onChange = _a.onChange;
-    return (React.createElement("div", { className: styles['page-size'] },
-        React.createElement(InternalFormField, { label: title, stretch: true, className: styles['page-size-form-field'] },
-            React.createElement(InternalRadioGroup, { className: styles['page-size-radio-group'], value: "".concat(value), items: options.map(function (_a) {
-                    var label = _a.label, value = _a.value;
-                    return ({ label: label, value: "".concat(value) });
-                }), onChange: function (_a) {
-                    var detail = _a.detail;
-                    return onChange(parseInt(detail.value, 10));
-                } }))));
-};
-export var WrapLinesPreference = function (_a) {
-    var label = _a.label, description = _a.description, value = _a.value, onChange = _a.onChange;
-    return (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: function (_a) {
-            var detail = _a.detail;
-            return onChange(detail.checked);
-        }, className: styles['wrap-lines'] }, label));
-};
-export var StripedRowsPreference = function (_a) {
-    var label = _a.label, description = _a.description, value = _a.value, onChange = _a.onChange;
-    return (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: function (_a) {
-            var detail = _a.detail;
-            return onChange(detail.checked);
-        }, className: styles['striped-rows'] }, label));
-};
-export var ContentDensityPreference = function (_a) {
-    var label = _a.label, description = _a.description, value = _a.value, onChange = _a.onChange;
-    return (React.createElement(InternalCheckbox, { checked: value === 'compact', description: description, onChange: function (_a) {
-            var detail = _a.detail;
-            return onChange(detail.checked ? 'compact' : 'comfortable');
-        }, className: styles['content-density'] }, label));
-};
-export var CustomPreference = function (_a) {
-    var value = _a.value, customPreference = _a.customPreference, onChange = _a.onChange;
-    var _b = useState(value), customState = _b[0], setCustomState = _b[1];
+export const PageSizePreference = ({ title, options, value, onChange }) => (React.createElement("div", { className: styles['page-size'] },
+    React.createElement(InternalFormField, { label: title, stretch: true, className: styles['page-size-form-field'] },
+        React.createElement(InternalRadioGroup, { className: styles['page-size-radio-group'], value: `${value}`, items: options.map(({ label, value }) => ({ label, value: `${value}` })), onChange: ({ detail }) => onChange(parseInt(detail.value, 10)) }))));
+export const WrapLinesPreference = ({ label, description, value, onChange }) => (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: ({ detail }) => onChange(detail.checked), className: styles['wrap-lines'] }, label));
+export const StripedRowsPreference = ({ label, description, value, onChange }) => (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: ({ detail }) => onChange(detail.checked), className: styles['striped-rows'] }, label));
+export const ContentDensityPreference = ({ label, description, value, onChange }) => (React.createElement(InternalCheckbox, { checked: value === 'compact', description: description, onChange: ({ detail }) => onChange(detail.checked ? 'compact' : 'comfortable'), className: styles['content-density'] }, label));
+export const CustomPreference = ({ value, customPreference, onChange }) => {
+    const [customState, setCustomState] = useState(value);
     if (customPreference) {
-        return (React.createElement("div", { className: styles.custom }, customPreference(customState, function (value) {
+        return (React.createElement("div", { className: styles.custom }, customPreference(customState, value => {
             // prevent value to be treated as a functional callback
-            setCustomState(function () { return value; });
+            setCustomState(() => value);
             onChange(value);
         })));
     }

package/collection-preferences/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/collection-preferences/utils.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, { useState } from 'react';\nimport clsx from 'clsx';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalRadioGroup from '../radio-group/internal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const copyPreferences = ({\n  pageSize,\n  wrapLines,\n  stripedRows,\n  contentDensity,\n  visibleContent,\n  custom,\n}: CollectionPreferencesProps.Preferences): CollectionPreferencesProps.Preferences => ({\n  pageSize,\n  wrapLines,\n  stripedRows,\n  contentDensity,\n  visibleContent,\n  custom,\n});\n\nexport const mergePreferences = (\n  newPref: CollectionPreferencesProps.Preferences,\n  oldPref: CollectionPreferencesProps.Preferences\n): CollectionPreferencesProps.Preferences => ({\n  pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,\n  wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,\n  stripedRows: newPref.stripedRows !== undefined ? newPref.stripedRows : oldPref.stripedRows,\n  contentDensity: newPref.contentDensity !== undefined ? newPref.contentDensity : oldPref.contentDensity,\n  visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,\n  custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom,\n});\n\ninterface ModalContentLayoutProps {\n  left: React.ReactNode;\n  right: React.ReactNode;\n}\n\nexport const ModalContentLayout = ({ left, right }: ModalContentLayoutProps) => {\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const smallContainer = breakpoint === 'default';\n\n  if (smallContainer) {\n    return (\n      <div ref={ref}>\n        {left && <div>{left}</div>}\n        {right && <div className={clsx(left && styles['second-column-small'])}>{right}</div>}\n      </div>\n    );\n  }\n\n  const columns = left && right ? 2 : 1;\n  return (\n    <div ref={ref}>\n      <InternalColumnLayout columns={columns} variant=\"text-grid\">\n        {left && <div>{left}</div>}\n        {right && <div>{right}</div>}\n      </InternalColumnLayout>\n    </div>\n  );\n};\n\ninterface PageSizePreferenceProps extends CollectionPreferencesProps.PageSizePreference {\n  onChange: (value: number) => void;\n  value?: number;\n}\n\nexport const PageSizePreference = ({ title, options, value, onChange }: PageSizePreferenceProps) => (\n  <div className={styles['page-size']}>\n    <InternalFormField label={title} stretch={true} className={styles['page-size-form-field']}>\n      <InternalRadioGroup\n        className={styles['page-size-radio-group']}\n        value={`${value}`}\n        items={options.map(({ label, value }) => ({ label, value: `${value}` }))}\n        onChange={({ detail }) => onChange(parseInt(detail.value, 10))}\n      />\n    </InternalFormField>\n  </div>\n);\n\ninterface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const WrapLinesPreference = ({ label, description, value, onChange }: WrapLinesPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['wrap-lines']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface StripedRowsPreferenceProps extends CollectionPreferencesProps.StripedRowsPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const StripedRowsPreference = ({ label, description, value, onChange }: StripedRowsPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['striped-rows']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface ContentDensityPreferenceProps extends CollectionPreferencesProps.ContentDensityPreference {\n  onChange: (value: 'comfortable' | 'compact') => void;\n  value?: 'comfortable' | 'compact';\n}\n\nexport const ContentDensityPreference = ({ label, description, value, onChange }: ContentDensityPreferenceProps) => (\n  <InternalCheckbox\n    checked={value === 'compact'}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked ? 'compact' : 'comfortable')}\n    className={styles['content-density']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {\n  onChange: (value: T) => void;\n  value: T;\n}\nexport const CustomPreference = ({ value, customPreference, onChange }: CustomPreferenceProps) => {\n  const [customState, setCustomState] = useState(value);\n  if (customPreference) {\n    return (\n      <div className={styles.custom}>\n        {customPreference(customState, value => {\n          // prevent value to be treated as a functional callback\n          setCustomState(() => value);\n          onChange(value);\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/collection-preferences/utils.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, { useState } from 'react';\nimport clsx from 'clsx';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalRadioGroup from '../radio-group/internal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const copyPreferences = ({\n  pageSize,\n  wrapLines,\n  stripedRows,\n  contentDensity,\n  visibleContent,\n  custom,\n}: CollectionPreferencesProps.Preferences): CollectionPreferencesProps.Preferences => ({\n  pageSize,\n  wrapLines,\n  stripedRows,\n  contentDensity,\n  visibleContent,\n  custom,\n});\n\nexport const mergePreferences = (\n  newPref: CollectionPreferencesProps.Preferences,\n  oldPref: CollectionPreferencesProps.Preferences\n): CollectionPreferencesProps.Preferences => ({\n  pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,\n  wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,\n  stripedRows: newPref.stripedRows !== undefined ? newPref.stripedRows : oldPref.stripedRows,\n  contentDensity: newPref.contentDensity !== undefined ? newPref.contentDensity : oldPref.contentDensity,\n  visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,\n  custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom,\n});\n\ninterface ModalContentLayoutProps {\n  left: React.ReactNode;\n  right: React.ReactNode;\n}\n\nexport const ModalContentLayout = ({ left, right }: ModalContentLayoutProps) => {\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const smallContainer = breakpoint === 'default';\n\n  if (smallContainer) {\n    return (\n      <div ref={ref}>\n        {left && <div>{left}</div>}\n        {right && <div className={clsx(left && styles['second-column-small'])}>{right}</div>}\n      </div>\n    );\n  }\n\n  const columns = left && right ? 2 : 1;\n  return (\n    <div ref={ref}>\n      <InternalColumnLayout columns={columns} variant=\"text-grid\">\n        {left && <div>{left}</div>}\n        {right && <div>{right}</div>}\n      </InternalColumnLayout>\n    </div>\n  );\n};\n\ninterface PageSizePreferenceProps extends CollectionPreferencesProps.PageSizePreference {\n  onChange: (value: number) => void;\n  value?: number;\n}\n\nexport const PageSizePreference = ({ title, options, value, onChange }: PageSizePreferenceProps) => (\n  <div className={styles['page-size']}>\n    <InternalFormField label={title} stretch={true} className={styles['page-size-form-field']}>\n      <InternalRadioGroup\n        className={styles['page-size-radio-group']}\n        value={`${value}`}\n        items={options.map(({ label, value }) => ({ label, value: `${value}` }))}\n        onChange={({ detail }) => onChange(parseInt(detail.value, 10))}\n      />\n    </InternalFormField>\n  </div>\n);\n\ninterface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const WrapLinesPreference = ({ label, description, value, onChange }: WrapLinesPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['wrap-lines']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface StripedRowsPreferenceProps extends CollectionPreferencesProps.StripedRowsPreference {\n  onChange: (value: boolean) => void;\n  value?: boolean;\n}\n\nexport const StripedRowsPreference = ({ label, description, value, onChange }: StripedRowsPreferenceProps) => (\n  <InternalCheckbox\n    checked={!!value}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked)}\n    className={styles['striped-rows']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface ContentDensityPreferenceProps extends CollectionPreferencesProps.ContentDensityPreference {\n  onChange: (value: 'comfortable' | 'compact') => void;\n  value?: 'comfortable' | 'compact';\n}\n\nexport const ContentDensityPreference = ({ label, description, value, onChange }: ContentDensityPreferenceProps) => (\n  <InternalCheckbox\n    checked={value === 'compact'}\n    description={description}\n    onChange={({ detail }) => onChange(detail.checked ? 'compact' : 'comfortable')}\n    className={styles['content-density']}\n  >\n    {label}\n  </InternalCheckbox>\n);\n\ninterface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {\n  onChange: (value: T) => void;\n  value: T;\n}\nexport const CustomPreference = ({ value, customPreference, onChange }: CustomPreferenceProps) => {\n  const [customState, setCustomState] = useState(value);\n  if (customPreference) {\n    return (\n      <div className={styles.custom}>\n        {customPreference(customState, value => {\n          // prevent value to be treated as a functional callback\n          setCustomState(() => value);\n          onChange(value);\n        })}\n      </div>\n    );\n  }\n  return null;\n};\n"]}

package/collection-preferences/visible-content.js

@@ -1,4 +1,3 @@
-import { __assign, __spreadArray } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
@@ -6,39 +5,36 @@ import InternalSpaceBetween from '../space-between/internal';
 import InternalToggle from '../toggle/internal';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import styles from './styles.css.js';
-var isVisible = function (id, visibleIds) { return visibleIds.indexOf(id) !== -1; };
-var className = function (suffix) { return ({
-    className: styles["visible-content-".concat(suffix)]
-}); };
-export default function VisibleContentPreference(_a) {
-    var title = _a.title, options = _a.options, _b = _a.value, value = _b === void 0 ? [] : _b, onChange = _a.onChange;
-    var idPrefix = useUniqueId('visible-content');
-    var flatOptionsIds = options.reduce(function (ids, group) { return __spreadArray(__spreadArray([], ids, true), group.options.reduce(function (groupIds, option) { return __spreadArray(__spreadArray([], groupIds, true), [option.id], false); }, []), true); }, []);
-    var onToggle = function (id) {
+const isVisible = (id, visibleIds) => visibleIds.indexOf(id) !== -1;
+const className = (suffix) => ({
+    className: styles[`visible-content-${suffix}`],
+});
+export default function VisibleContentPreference({ title, options, value = [], onChange, }) {
+    const idPrefix = useUniqueId('visible-content');
+    const flatOptionsIds = options.reduce((ids, group) => [...ids, ...group.options.reduce((groupIds, option) => [...groupIds, option.id], [])], []);
+    const onToggle = (id) => {
         if (!isVisible(id, value)) {
-            onChange(__spreadArray(__spreadArray([], value, true), [id], false).sort(function (firstId, secondId) { return flatOptionsIds.indexOf(firstId) - flatOptionsIds.indexOf(secondId); }));
+            onChange([...value, id].sort((firstId, secondId) => flatOptionsIds.indexOf(firstId) - flatOptionsIds.indexOf(secondId)));
         }
         else {
-            onChange(value.filter(function (currentId) { return currentId !== id; }));
+            onChange(value.filter(currentId => currentId !== id));
         }
     };
-    var selectionOption = function (option, optionGroupIndex, optionIndex) {
-        var labelId = "".concat(idPrefix, "-").concat(optionGroupIndex, "-").concat(optionIndex);
-        return (React.createElement("div", __assign({ key: optionIndex }, className('option')),
-            React.createElement("label", __assign({}, className('option-label'), { htmlFor: labelId }), option.label),
-            React.createElement("div", __assign({}, className('toggle')),
-                React.createElement(InternalToggle, { checked: isVisible(option.id, value), onChange: function () { return onToggle(option.id); }, disabled: option.editable === false, controlId: labelId }))));
+    const selectionOption = (option, optionGroupIndex, optionIndex) => {
+        const labelId = `${idPrefix}-${optionGroupIndex}-${optionIndex}`;
+        return (React.createElement("div", Object.assign({ key: optionIndex }, className('option')),
+            React.createElement("label", Object.assign({}, className('option-label'), { htmlFor: labelId }), option.label),
+            React.createElement("div", Object.assign({}, className('toggle')),
+                React.createElement(InternalToggle, { checked: isVisible(option.id, value), onChange: () => onToggle(option.id), disabled: option.editable === false, controlId: labelId }))));
     };
-    var outerGroupLabelId = "".concat(idPrefix, "-outer");
+    const outerGroupLabelId = `${idPrefix}-outer`;
     return (React.createElement("div", { className: styles['visible-content'] },
-        React.createElement("h3", __assign({}, className('title'), { id: outerGroupLabelId }), title),
-        React.createElement(InternalSpaceBetween, __assign({}, className('groups'), { size: "xs" }), options.map(function (optionGroup, optionGroupIndex) {
-            var groupLabelId = "".concat(idPrefix, "-").concat(optionGroupIndex);
-            return (React.createElement("div", __assign({ key: optionGroupIndex }, className('group'), { role: "group", "aria-labelledby": "".concat(outerGroupLabelId, " ").concat(groupLabelId) }),
-                React.createElement("div", __assign({}, className('group-label'), { id: groupLabelId }), optionGroup.label),
-                React.createElement("div", null, optionGroup.options.map(function (option, optionIndex) {
-                    return selectionOption(option, optionGroupIndex, optionIndex);
-                }))));
+        React.createElement("h3", Object.assign({}, className('title'), { id: outerGroupLabelId }), title),
+        React.createElement(InternalSpaceBetween, Object.assign({}, className('groups'), { size: "xs" }), options.map((optionGroup, optionGroupIndex) => {
+            const groupLabelId = `${idPrefix}-${optionGroupIndex}`;
+            return (React.createElement("div", Object.assign({ key: optionGroupIndex }, className('group'), { role: "group", "aria-labelledby": `${outerGroupLabelId} ${groupLabelId}` }),
+                React.createElement("div", Object.assign({}, className('group-label'), { id: groupLabelId }), optionGroup.label),
+                React.createElement("div", null, optionGroup.options.map((option, optionIndex) => selectionOption(option, optionGroupIndex, optionIndex)))));
         }))));
 }
 //# sourceMappingURL=visible-content.js.map

package/collection-preferences/visible-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"visible-content.js","sourceRoot":"","sources":["../../../src/collection-preferences/visible-content.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 InternalSpaceBetween from '../space-between/internal';\nimport InternalToggle from '../toggle/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst isVisible = (id: string, visibleIds: ReadonlyArray<string>) => visibleIds.indexOf(id) !== -1;\n\ninterface ClassNameProps {\n  className: string;\n}\nconst className = (suffix: string): ClassNameProps => ({\n  className: styles[`visible-content-${suffix}`],\n});\n\ninterface VisibleContentPreferenceProps extends CollectionPreferencesProps.VisibleContentPreference {\n  onChange: (value: ReadonlyArray<string>) => void;\n  value?: ReadonlyArray<string>;\n}\n\nexport default function VisibleContentPreference({\n  title,\n  options,\n  value = [],\n  onChange,\n}: VisibleContentPreferenceProps) {\n  const idPrefix = useUniqueId('visible-content');\n\n  const flatOptionsIds = options.reduce<string[]>(\n    (ids, group) => [...ids, ...group.options.reduce<string[]>((groupIds, option) => [...groupIds, option.id], [])],\n    []\n  );\n\n  const onToggle = (id: string) => {\n    if (!isVisible(id, value)) {\n      onChange(\n        [...value, id].sort((firstId, secondId) => flatOptionsIds.indexOf(firstId) - flatOptionsIds.indexOf(secondId))\n      );\n    } else {\n      onChange(value.filter(currentId => currentId !== id));\n    }\n  };\n\n  const selectionOption = (\n    option: CollectionPreferencesProps.VisibleContentOption,\n    optionGroupIndex: number,\n    optionIndex: number\n  ) => {\n    const labelId = `${idPrefix}-${optionGroupIndex}-${optionIndex}`;\n    return (\n      <div key={optionIndex} {...className('option')}>\n        <label {...className('option-label')} htmlFor={labelId}>\n          {option.label}\n        </label>\n        <div {...className('toggle')}>\n          <InternalToggle\n            checked={isVisible(option.id, value)}\n            onChange={() => onToggle(option.id)}\n            disabled={option.editable === false}\n            controlId={labelId}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  const outerGroupLabelId = `${idPrefix}-outer`;\n  return (\n    <div className={styles['visible-content']}>\n      <h3 {...className('title')} id={outerGroupLabelId}>\n        {title}\n      </h3>\n      <InternalSpaceBetween {...className('groups')} size=\"xs\">\n        {options.map((optionGroup, optionGroupIndex) => {\n          const groupLabelId = `${idPrefix}-${optionGroupIndex}`;\n          return (\n            <div\n              key={optionGroupIndex}\n              {...className('group')}\n              role=\"group\"\n              aria-labelledby={`${outerGroupLabelId} ${groupLabelId}`}\n            >\n              <div {...className('group-label')} id={groupLabelId}>\n                {optionGroup.label}\n              </div>\n              <div>\n                {optionGroup.options.map((option, optionIndex) =>\n                  selectionOption(option, optionGroupIndex, optionIndex)\n                )}\n              </div>\n            </div>\n          );\n        })}\n      </InternalSpaceBetween>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"visible-content.js","sourceRoot":"","sources":["../../../src/collection-preferences/visible-content.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 InternalSpaceBetween from '../space-between/internal';\nimport InternalToggle from '../toggle/internal';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\n\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst isVisible = (id: string, visibleIds: ReadonlyArray<string>) => visibleIds.indexOf(id) !== -1;\n\ninterface ClassNameProps {\n  className: string;\n}\nconst className = (suffix: string): ClassNameProps => ({\n  className: styles[`visible-content-${suffix}`],\n});\n\ninterface VisibleContentPreferenceProps extends CollectionPreferencesProps.VisibleContentPreference {\n  onChange: (value: ReadonlyArray<string>) => void;\n  value?: ReadonlyArray<string>;\n}\n\nexport default function VisibleContentPreference({\n  title,\n  options,\n  value = [],\n  onChange,\n}: VisibleContentPreferenceProps) {\n  const idPrefix = useUniqueId('visible-content');\n\n  const flatOptionsIds = options.reduce<string[]>(\n    (ids, group) => [...ids, ...group.options.reduce<string[]>((groupIds, option) => [...groupIds, option.id], [])],\n    []\n  );\n\n  const onToggle = (id: string) => {\n    if (!isVisible(id, value)) {\n      onChange(\n        [...value, id].sort((firstId, secondId) => flatOptionsIds.indexOf(firstId) - flatOptionsIds.indexOf(secondId))\n      );\n    } else {\n      onChange(value.filter(currentId => currentId !== id));\n    }\n  };\n\n  const selectionOption = (\n    option: CollectionPreferencesProps.VisibleContentOption,\n    optionGroupIndex: number,\n    optionIndex: number\n  ) => {\n    const labelId = `${idPrefix}-${optionGroupIndex}-${optionIndex}`;\n    return (\n      <div key={optionIndex} {...className('option')}>\n        <label {...className('option-label')} htmlFor={labelId}>\n          {option.label}\n        </label>\n        <div {...className('toggle')}>\n          <InternalToggle\n            checked={isVisible(option.id, value)}\n            onChange={() => onToggle(option.id)}\n            disabled={option.editable === false}\n            controlId={labelId}\n          />\n        </div>\n      </div>\n    );\n  };\n\n  const outerGroupLabelId = `${idPrefix}-outer`;\n  return (\n    <div className={styles['visible-content']}>\n      <h3 {...className('title')} id={outerGroupLabelId}>\n        {title}\n      </h3>\n      <InternalSpaceBetween {...className('groups')} size=\"xs\">\n        {options.map((optionGroup, optionGroupIndex) => {\n          const groupLabelId = `${idPrefix}-${optionGroupIndex}`;\n          return (\n            <div\n              key={optionGroupIndex}\n              {...className('group')}\n              role=\"group\"\n              aria-labelledby={`${outerGroupLabelId} ${groupLabelId}`}\n            >\n              <div {...className('group-label')} id={groupLabelId}>\n                {optionGroup.label}\n              </div>\n              <div>\n                {optionGroup.options.map((option, optionIndex) =>\n                  selectionOption(option, optionGroupIndex, optionIndex)\n                )}\n              </div>\n            </div>\n          );\n        })}\n      </InternalSpaceBetween>\n    </div>\n  );\n}\n"]}

package/column-layout/index.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
@@ -8,11 +8,11 @@ import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 export default function ColumnLayout(_a) {
-    var _b = _a.columns, columns = _b === void 0 ? 1 : _b, _c = _a.variant, variant = _c === void 0 ? 'default' : _c, _d = _a.borders, borders = _d === void 0 ? 'none' : _d, _e = _a.disableGutters, disableGutters = _e === void 0 ? false : _e, props = __rest(_a, ["columns", "variant", "borders", "disableGutters"]);
-    var baseComponentProps = useBaseComponent('ColumnLayout');
-    var _f = useContainerBreakpoints(COLUMN_TRIGGERS), breakpoint = _f[0], ref = _f[1];
-    var externalProps = getExternalProps(props);
-    return (React.createElement(InternalColumnLayout, __assign({ columns: columns, variant: variant, borders: borders, disableGutters: disableGutters }, externalProps, baseComponentProps, { __breakpoint: breakpoint, ref: ref })));
+    var { columns = 1, variant = 'default', borders = 'none', disableGutters = false } = _a, props = __rest(_a, ["columns", "variant", "borders", "disableGutters"]);
+    const baseComponentProps = useBaseComponent('ColumnLayout');
+    const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);
+    const externalProps = getExternalProps(props);
+    return (React.createElement(InternalColumnLayout, Object.assign({ columns: columns, variant: variant, borders: borders, disableGutters: disableGutters }, externalProps, baseComponentProps, { __breakpoint: breakpoint, ref: ref })));
 }
 applyDisplayName(ColumnLayout, 'ColumnLayout');
 //# sourceMappingURL=index.js.map

package/column-layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/column-layout/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oBAAoB,EAAE,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAMjB;IALlB,IAAA,eAAW,EAAX,OAAO,mBAAG,CAAC,KAAA,EACX,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,eAAgB,EAAhB,OAAO,mBAAG,MAAM,KAAA,EAChB,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACnB,KAAK,cAL2B,mDAMpC,CADS;IAER,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;IACtD,IAAA,KAAoB,uBAAuB,CAAC,eAAe,CAAC,EAA3D,UAAU,QAAA,EAAE,GAAG,QAA4C,CAAC;IACnE,IAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACL,oBAAC,oBAAoB,aACnB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,IAC1B,aAAa,EACb,kBAAkB,IACtB,YAAY,EAAE,UAAU,EACxB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalColumnLayout, { COLUMN_TRIGGERS } from './internal';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { ColumnLayoutProps } from './interfaces';\n\nexport { ColumnLayoutProps };\n\nexport default function ColumnLayout({\n  columns = 1,\n  variant = 'default',\n  borders = 'none',\n  disableGutters = false,\n  ...props\n}: ColumnLayoutProps) {\n  const baseComponentProps = useBaseComponent('ColumnLayout');\n  const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n  const externalProps = getExternalProps(props);\n  return (\n    <InternalColumnLayout\n      columns={columns}\n      variant={variant}\n      borders={borders}\n      disableGutters={disableGutters}\n      {...externalProps}\n      {...baseComponentProps}\n      __breakpoint={breakpoint}\n      ref={ref}\n    />\n  );\n}\n\napplyDisplayName(ColumnLayout, 'ColumnLayout');\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/column-layout/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,oBAAoB,EAAE,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAKpE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAMjB;QANiB,EACnC,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,SAAS,EACnB,OAAO,GAAG,MAAM,EAChB,cAAc,GAAG,KAAK,OAEJ,EADf,KAAK,cAL2B,mDAMpC,CADS;IAER,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAC5D,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC,GAAG,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACnE,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CACL,oBAAC,oBAAoB,kBACnB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,IAC1B,aAAa,EACb,kBAAkB,IACtB,YAAY,EAAE,UAAU,EACxB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalColumnLayout, { COLUMN_TRIGGERS } from './internal';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { ColumnLayoutProps } from './interfaces';\n\nexport { ColumnLayoutProps };\n\nexport default function ColumnLayout({\n  columns = 1,\n  variant = 'default',\n  borders = 'none',\n  disableGutters = false,\n  ...props\n}: ColumnLayoutProps) {\n  const baseComponentProps = useBaseComponent('ColumnLayout');\n  const [breakpoint, ref] = useContainerBreakpoints(COLUMN_TRIGGERS);\n  const externalProps = getExternalProps(props);\n  return (\n    <InternalColumnLayout\n      columns={columns}\n      variant={variant}\n      borders={borders}\n      disableGutters={disableGutters}\n      {...externalProps}\n      {...baseComponentProps}\n      __breakpoint={breakpoint}\n      ref={ref}\n    />\n  );\n}\n\napplyDisplayName(ColumnLayout, 'ColumnLayout');\n"]}

package/column-layout/internal.js

@@ -1,4 +1,4 @@
-import { __assign, __rest } from "tslib";
+import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
@@ -8,34 +8,33 @@ import InternalGrid from '../grid/internal';
 import { getBaseProps } from '../internal/base-component';
 import { repeat } from './util';
 import styles from './styles.css.js';
-export var COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
-var COLUMN_DEFS = {
-    1: { colspan: { "default": 12, xxs: 12, xs: 12 } },
-    2: { colspan: { "default": 12, xxs: 6, xs: 6 } },
-    3: { colspan: { "default": 12, xxs: 6, xs: 4 } },
-    4: { colspan: { "default": 12, xxs: 6, xs: 3 } }
+export const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
+const COLUMN_DEFS = {
+    1: { colspan: { default: 12, xxs: 12, xs: 12 } },
+    2: { colspan: { default: 12, xxs: 6, xs: 6 } },
+    3: { colspan: { default: 12, xxs: 6, xs: 4 } },
+    4: { colspan: { default: 12, xxs: 6, xs: 3 } },
 };
 /**
  * A responsive grid layout.
  */
 export default React.forwardRef(function ColumnLayout(_a, ref) {
     var _b;
-    var _c;
-    var _d = _a.columns, columns = _d === void 0 ? 1 : _d, _e = _a.variant, variant = _e === void 0 ? 'default' : _e, _f = _a.borders, borders = _f === void 0 ? 'none' : _f, _g = _a.disableGutters, disableGutters = _g === void 0 ? false : _g, children = _a.children, __breakpoint = _a.__breakpoint, __internalRootRef = _a.__internalRootRef, restProps = __rest(_a, ["columns", "variant", "borders", "disableGutters", "children", "__breakpoint", "__internalRootRef"]);
-    var baseProps = getBaseProps(restProps);
-    var isTextGridVariant = variant === 'text-grid';
-    var shouldDisableGutters = !isTextGridVariant && disableGutters;
-    var shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');
-    var shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');
+    var { columns = 1, variant = 'default', borders = 'none', disableGutters = false, children, __breakpoint, __internalRootRef } = _a, restProps = __rest(_a, ["columns", "variant", "borders", "disableGutters", "children", "__breakpoint", "__internalRootRef"]);
+    const baseProps = getBaseProps(restProps);
+    const isTextGridVariant = variant === 'text-grid';
+    const shouldDisableGutters = !isTextGridVariant && disableGutters;
+    const shouldHaveHorizontalBorders = !isTextGridVariant && (borders === 'horizontal' || borders === 'all');
+    const shouldHaveVerticalBorders = !isTextGridVariant && (borders === 'vertical' || borders === 'all');
     /*
      Flattening the children allows us to "see through" React Fragments and nested arrays.
      */
-    var flattenedChildren = flattenChildren(children);
-    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles['column-layout']), ref: __internalRootRef }),
-        React.createElement(InternalGrid, { ref: ref, disableGutters: true, gridDefinition: repeat((_c = COLUMN_DEFS[columns]) !== null && _c !== void 0 ? _c : {}, flattenedChildren.length), className: clsx(styles.grid, styles["grid-columns-".concat(columns)], styles["grid-variant-".concat(variant)], (_b = {},
-                _b[styles['grid-horizontal-borders']] = shouldHaveHorizontalBorders,
-                _b[styles['grid-vertical-borders']] = shouldHaveVerticalBorders,
-                _b[styles['grid-no-gutters']] = shouldDisableGutters,
-                _b)), __breakpoint: __breakpoint, __responsiveClassName: function (breakpoint) { return breakpoint && styles["grid-breakpoint-".concat(breakpoint)]; } }, children)));
+    const flattenedChildren = flattenChildren(children);
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles['column-layout']), ref: __internalRootRef }),
+        React.createElement(InternalGrid, { ref: ref, disableGutters: true, gridDefinition: repeat((_b = COLUMN_DEFS[columns]) !== null && _b !== void 0 ? _b : {}, flattenedChildren.length), className: clsx(styles.grid, styles[`grid-columns-${columns}`], styles[`grid-variant-${variant}`], {
+                [styles['grid-horizontal-borders']]: shouldHaveHorizontalBorders,
+                [styles['grid-vertical-borders']]: shouldHaveVerticalBorders,
+                [styles['grid-no-gutters']]: shouldDisableGutters,
+            }), __breakpoint: __breakpoint, __responsiveClassName: breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`] }, children)));
 });
 //# sourceMappingURL=internal.js.map

package/column-layout/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/column-layout/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 from 'clsx';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport InternalGrid from '../grid/internal';\nimport { GridProps } from '../grid/interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { repeat } from './util';\nimport styles from './styles.css.js';\nimport { InternalColumnLayoutProps } from './interfaces';\n\nexport const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'] as const;\nexport type ColumnLayoutBreakpoint = typeof COLUMN_TRIGGERS[number] | null;\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\n/**\n * A responsive grid layout.\n */\nexport default React.forwardRef(function ColumnLayout(\n  {\n    columns = 1,\n    variant = 'default',\n    borders = 'none',\n    disableGutters = false,\n    children,\n    __breakpoint,\n    __internalRootRef,\n    ...restProps\n  }: InternalColumnLayoutProps,\n  ref?: React.Ref<any>\n) {\n  const baseProps = getBaseProps(restProps);\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   */\n  const flattenedChildren = flattenChildren(children);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['column-layout'])} ref={__internalRootRef}>\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}\n        __responsiveClassName={breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`]}\n      >\n        {children}\n      </InternalGrid>\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/column-layout/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 from 'clsx';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport InternalGrid from '../grid/internal';\nimport { GridProps } from '../grid/interfaces';\nimport { getBaseProps } from '../internal/base-component';\nimport { repeat } from './util';\nimport styles from './styles.css.js';\nimport { InternalColumnLayoutProps } from './interfaces';\n\nexport const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'] as const;\nexport type ColumnLayoutBreakpoint = typeof COLUMN_TRIGGERS[number] | null;\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\n/**\n * A responsive grid layout.\n */\nexport default React.forwardRef(function ColumnLayout(\n  {\n    columns = 1,\n    variant = 'default',\n    borders = 'none',\n    disableGutters = false,\n    children,\n    __breakpoint,\n    __internalRootRef,\n    ...restProps\n  }: InternalColumnLayoutProps,\n  ref?: React.Ref<any>\n) {\n  const baseProps = getBaseProps(restProps);\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   */\n  const flattenedChildren = flattenChildren(children);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles['column-layout'])} ref={__internalRootRef}>\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}\n        __responsiveClassName={breakpoint => breakpoint && styles[`grid-breakpoint-${breakpoint}`]}\n      >\n        {children}\n      </InternalGrid>\n    </div>\n  );\n});\n"]}

package/column-layout/util.js

@@ -1,8 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 export function repeat(value, times) {
-    var array = [];
-    for (var i = 0; i < times; i++) {
+    const array = [];
+    for (let i = 0; i < times; i++) {
         array[i] = value;
     }
     return array;

package/column-layout/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/column-layout/util.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,UAAU,MAAM,CAAI,KAAQ,EAAE,KAAa;IAC/C,IAAM,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;QAC9B,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;KAClB;IACD,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport function repeat<T>(value: T, times: number): T[] {\n  const array = [];\n  for (let i = 0; i < times; i++) {\n    array[i] = value;\n  }\n  return array;\n}\n"]}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/column-layout/util.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,MAAM,UAAU,MAAM,CAAI,KAAQ,EAAE,KAAa;IAC/C,MAAM,KAAK,GAAG,EAAE,CAAC;IACjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,CAAC,EAAE,EAAE;QAC9B,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;KAClB;IACD,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport function repeat<T>(value: T, times: number): T[] {\n  const array = [];\n  for (let i = 0; i < times; i++) {\n    array[i] = value;\n  }\n  return array;\n}\n"]}