@cloudscape-design/components 3.0.262 → 3.0.264

package/collection-preferences/content-display/sortable-item.js

@@ -0,0 +1,52 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import clsx from 'clsx';
+import styles from '../styles.css.js';
+import DragHandle from '../../internal/drag-handle';
+import InternalToggle from '../../toggle/internal';
+import { useUniqueId } from '../../internal/hooks/use-unique-id';
+const componentPrefix = 'sortable-item';
+const getClassName = (suffix) => styles[`${componentPrefix}-${suffix}`];
+export function SortableItem({ dragHandleAriaLabel, onKeyDown, onToggle, option, }) {
+    var _a, _b, _c, _d, _e;
+    const { isDragging, isSorting, listeners, over, rect, setNodeRef, transform } = useSortable({
+        id: option.id,
+    });
+    const style = {
+        transform: CSS.Translate.toString(transform),
+    };
+    const idPrefix = useUniqueId(componentPrefix);
+    const controlId = `${idPrefix}-control-${option.id}`;
+    const dragHandleAttributes = {
+        ['aria-label']: [dragHandleAriaLabel, option.label].join(', '),
+    };
+    const combinedListeners = Object.assign(Object.assign({}, listeners), { onKeyDown: (event) => {
+            if (onKeyDown) {
+                onKeyDown(event);
+            }
+            if (listeners === null || listeners === void 0 ? void 0 : listeners.onKeyDown) {
+                listeners.onKeyDown(event);
+            }
+        } });
+    // The placeholder is rendered from within the dragged item, but is shown at the position of the displaced item.
+    // Therefore, we need to translate it by the right amount.
+    // Unfortunately we can't use dnd-kit's recommended approach of using a drag overlay
+    // because it renders out of place when drag and drop is used in our modal.
+    const placeholderOffsetY = isDragging && ((_a = over === null || over === void 0 ? void 0 : over.rect) === null || _a === void 0 ? void 0 : _a.top) !== undefined && ((_b = rect.current) === null || _b === void 0 ? void 0 : _b.top) !== undefined
+        ? over.rect.top > ((_c = rect.current) === null || _c === void 0 ? void 0 : _c.top)
+            ? over.rect.bottom - ((_d = rect.current) === null || _d === void 0 ? void 0 : _d.bottom)
+            : over.rect.top - ((_e = rect.current) === null || _e === void 0 ? void 0 : _e.top)
+        : undefined;
+    const placeholderStyle = placeholderOffsetY ? { transform: `translateY(${placeholderOffsetY}px)` } : undefined;
+    return (React.createElement("li", { className: clsx(styles['content-display-option'], styles['sortable-item']) },
+        isDragging && React.createElement("div", { className: getClassName('placeholder'), style: placeholderStyle }),
+        React.createElement("div", { ref: setNodeRef, className: clsx(getClassName('content'), styles.draggable, isDragging && styles.active, isSorting && styles.sorting), style: style },
+            React.createElement(DragHandle, { attributes: dragHandleAttributes, hideFocus: isDragging, listeners: combinedListeners }),
+            React.createElement("label", { className: getClassName('label'), htmlFor: controlId }, option.label),
+            React.createElement("div", { className: getClassName('toggle') },
+                React.createElement(InternalToggle, { checked: !!option.visible, onChange: () => onToggle(option), disabled: option.alwaysVisible === true, controlId: controlId })))));
+}
+//# sourceMappingURL=sortable-item.js.map

package/collection-preferences/content-display/sortable-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-item.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/sortable-item.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 { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport clsx from 'clsx';\nimport styles from '../styles.css.js';\nimport DragHandle from '../../internal/drag-handle';\nimport InternalToggle from '../../toggle/internal';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { OptionWithVisibility } from './utils';\n\nconst componentPrefix = 'sortable-item';\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\nexport function SortableItem({\n  dragHandleAriaLabel,\n  onKeyDown,\n  onToggle,\n  option,\n}: {\n  dragHandleAriaLabel?: string;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  onToggle: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n}) {\n  const { isDragging, isSorting, listeners, over, rect, setNodeRef, transform } = useSortable({\n    id: option.id,\n  });\n  const style = {\n    transform: CSS.Translate.toString(transform),\n  };\n\n  const idPrefix = useUniqueId(componentPrefix);\n  const controlId = `${idPrefix}-control-${option.id}`;\n\n  const dragHandleAttributes = {\n    ['aria-label']: [dragHandleAriaLabel, option.label].join(', '),\n  };\n\n  const combinedListeners = {\n    ...listeners,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n      if (listeners?.onKeyDown) {\n        listeners.onKeyDown(event);\n      }\n    },\n  };\n\n  // The placeholder is rendered from within the dragged item, but is shown at the position of the displaced item.\n  // Therefore, we need to translate it by the right amount.\n  // Unfortunately we can't use dnd-kit's recommended approach of using a drag overlay\n  // because it renders out of place when drag and drop is used in our modal.\n  const placeholderOffsetY =\n    isDragging && over?.rect?.top !== undefined && rect.current?.top !== undefined\n      ? over.rect.top > rect.current?.top\n        ? over.rect.bottom - rect.current?.bottom\n        : over.rect.top - rect.current?.top\n      : undefined;\n\n  const placeholderStyle = placeholderOffsetY ? { transform: `translateY(${placeholderOffsetY}px)` } : undefined;\n\n  return (\n    <li className={clsx(styles['content-display-option'], styles['sortable-item'])}>\n      {isDragging && <div className={getClassName('placeholder')} style={placeholderStyle} />}\n      <div\n        ref={setNodeRef}\n        className={clsx(\n          getClassName('content'),\n          styles.draggable,\n          isDragging && styles.active,\n          isSorting && styles.sorting\n        )}\n        style={style}\n      >\n        <DragHandle attributes={dragHandleAttributes} hideFocus={isDragging} listeners={combinedListeners} />\n\n        <label className={getClassName('label')} htmlFor={controlId}>\n          {option.label}\n        </label>\n        <div className={getClassName('toggle')}>\n          <InternalToggle\n            checked={!!option.visible}\n            onChange={() => onToggle(option)}\n            disabled={option.alwaysVisible === true}\n            controlId={controlId}\n          />\n        </div>\n      </div>\n    </li>\n  );\n}\n"]}

package/collection-preferences/content-display/styles.css.js

@@ -0,0 +1,20 @@
+
+    import './styles.scoped.css';
+    export default {
+  "sortable-item-toggle": "awsui_sortable-item-toggle_1f3h0_1bra9_185",
+  "sortable-item": "awsui_sortable-item_1f3h0_1bra9_185",
+  "sortable-item-placeholder": "awsui_sortable-item-placeholder_1f3h0_1bra9_193",
+  "sortable-item-content": "awsui_sortable-item-content_1f3h0_1bra9_203",
+  "draggable": "awsui_draggable_1f3h0_1bra9_213",
+  "active": "awsui_active_1f3h0_1bra9_222",
+  "sorting": "awsui_sorting_1f3h0_1bra9_228",
+  "sortable-item-label": "awsui_sortable-item-label_1f3h0_1bra9_271",
+  "content-display": "awsui_content-display_1f3h0_1bra9_276",
+  "content-display-groups": "awsui_content-display-groups_1f3h0_1bra9_277",
+  "content-display-group": "awsui_content-display-group_1f3h0_1bra9_277",
+  "content-display-option": "awsui_content-display-option_1f3h0_1bra9_279",
+  "content-display-title": "awsui_content-display-title_1f3h0_1bra9_283",
+  "content-display-description": "awsui_content-display-description_1f3h0_1bra9_291",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1bra9_299"
+};
+  

package/collection-preferences/content-display/styles.scoped.css

@@ -0,0 +1,303 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_sortable-item-toggle_1f3h0_1bra9_185:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_sortable-item_1f3h0_1bra9_185:not(#\9) {
+  position: relative;
+}
+
+.awsui_sortable-item-placeholder_1f3h0_1bra9_193:not(#\9) {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--color-drag-placeholder-hover-3ohnz1, #d3e7f9);
+  border-radius: var(--border-radius-item-u2ibpi, 8px);
+}
+
+.awsui_sortable-item-content_1f3h0_1bra9_203:not(#\9) {
+  border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-top: var(--space-xs-rsr2qu, 8px);
+  padding-bottom: var(--space-xs-rsr2qu, 8px);
+  padding-right: 0;
+}
+.awsui_sortable-item-content_1f3h0_1bra9_203:not(#\9):not(.awsui_draggable_1f3h0_1bra9_213) {
+  padding-left: var(--space-scaled-l-t03y3z, 20px);
+}
+.awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9) {
+  padding-left: 0;
+  padding-right: var(--space-scaled-xs-6859qs, 8px);
+  background-color: var(--color-background-container-content-i8i4a0, #ffffff);
+  z-index: 1;
+}
+.awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
+  position: relative;
+  z-index: 2;
+  box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
+  border-radius: var(--border-radius-item-u2ibpi, 8px);
+}
+.awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9):not(.awsui_active_1f3h0_1bra9_222).awsui_sorting_1f3h0_1bra9_228 {
+  transition: transform var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9):not(.awsui_active_1f3h0_1bra9_222).awsui_sorting_1f3h0_1bra9_228 {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9):not(.awsui_active_1f3h0_1bra9_222).awsui_sorting_1f3h0_1bra9_228, .awsui-mode-entering .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9):not(.awsui_active_1f3h0_1bra9_222).awsui_sorting_1f3h0_1bra9_228 {
+  animation: none;
+  transition: none;
+}
+body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
+  transition: transform var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
+  position: relative;
+}
+@media (prefers-reduced-motion: reduce) {
+  body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9), .awsui-mode-entering body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
+  animation: none;
+  transition: none;
+}
+body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
+  outline: 2px dotted transparent;
+  outline-offset: calc(0px - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9)::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  left: calc(-1 * 0px);
+  top: calc(-1 * 0px);
+  width: calc(100% + 2 * 0px);
+  height: calc(100% + 2 * 0px);
+  border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
+}
+
+.awsui_sortable-item-label_1f3h0_1bra9_271:not(#\9) {
+  padding-right: var(--space-l-4vl6xu, 20px);
+  flex-grow: 1;
+}
+
+.awsui_content-display_1f3h0_1bra9_276:not(#\9),
+.awsui_content-display-groups_1f3h0_1bra9_277:not(#\9),
+.awsui_content-display-group_1f3h0_1bra9_277:not(#\9),
+.awsui_content-display-option_1f3h0_1bra9_279:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_content-display-title_1f3h0_1bra9_283:not(#\9) {
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  font-weight: var(--font-display-label-weight-m18hjh, 700);
+  color: var(--color-text-form-label-k3j0b4, #000716);
+  margin: 0;
+}
+
+.awsui_content-display-description_1f3h0_1bra9_291:not(#\9) {
+  color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
+  font-size: var(--font-body-s-size-ukw2p9, 12px);
+  line-height: var(--font-body-s-line-height-kdsbrl, 16px);
+  letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
+  margin-top: var(--space-scaled-xxxs-lo883m, 2px);
+}
+
+.awsui_content-display-option-list_1f3h0_1bra9_299:not(#\9) {
+  position: relative;
+  list-style: none;
+  padding: 0;
+}

package/collection-preferences/content-display/styles.selectors.js

@@ -0,0 +1,21 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "sortable-item-toggle": "awsui_sortable-item-toggle_1f3h0_1bra9_185",
+  "sortable-item": "awsui_sortable-item_1f3h0_1bra9_185",
+  "sortable-item-placeholder": "awsui_sortable-item-placeholder_1f3h0_1bra9_193",
+  "sortable-item-content": "awsui_sortable-item-content_1f3h0_1bra9_203",
+  "draggable": "awsui_draggable_1f3h0_1bra9_213",
+  "active": "awsui_active_1f3h0_1bra9_222",
+  "sorting": "awsui_sorting_1f3h0_1bra9_228",
+  "sortable-item-label": "awsui_sortable-item-label_1f3h0_1bra9_271",
+  "content-display": "awsui_content-display_1f3h0_1bra9_276",
+  "content-display-groups": "awsui_content-display-groups_1f3h0_1bra9_277",
+  "content-display-group": "awsui_content-display-group_1f3h0_1bra9_277",
+  "content-display-option": "awsui_content-display-option_1f3h0_1bra9_279",
+  "content-display-title": "awsui_content-display-title_1f3h0_1bra9_283",
+  "content-display-description": "awsui_content-display-description_1f3h0_1bra9_291",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1bra9_299"
+};
+  

package/collection-preferences/content-display/use-drag-and-drop-reorder.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CollisionDetection, KeyboardCoordinateGetter, UniqueIdentifier } from '@dnd-kit/core';
+import { CollectionPreferencesProps } from '../interfaces';
+export default function useDragAndDropReorder({ sortedOptions, }: {
+    sortedOptions: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;
+}): {
+    activeItem: UniqueIdentifier | null;
+    collisionDetection: CollisionDetection;
+    coordinateGetter: KeyboardCoordinateGetter;
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    sensors: import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
+    setActiveItem: (id: UniqueIdentifier | null) => void;
+};
+//# sourceMappingURL=use-drag-and-drop-reorder.d.ts.map

package/collection-preferences/content-display/use-drag-and-drop-reorder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag-and-drop-reorder.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/use-drag-and-drop-reorder.ts"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAChD,OAAO,EAGL,kBAAkB,EAElB,wBAAwB,EAExB,gBAAgB,EAGjB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AA+B3D,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,aAAa,GACd,EAAE;IACD,aAAa,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;CAC/E;;;;2BAa+B,mBAAmB;;wBARtB,gBAAgB,GAAG,IAAI;EA+GnD"}

package/collection-preferences/content-display/use-drag-and-drop-reorder.js

@@ -0,0 +1,144 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useRef, useState } from 'react';
+import { closestCenter, PointerSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { hasSortableData } from '@dnd-kit/sortable';
+import { KeyboardSensor } from './keyboard-sensor';
+var KeyboardCode;
+(function (KeyboardCode) {
+    KeyboardCode["Space"] = "Space";
+    KeyboardCode["Down"] = "ArrowDown";
+    KeyboardCode["Right"] = "ArrowRight";
+    KeyboardCode["Left"] = "ArrowLeft";
+    KeyboardCode["Up"] = "ArrowUp";
+    KeyboardCode["Esc"] = "Escape";
+    KeyboardCode["Enter"] = "Enter";
+})(KeyboardCode || (KeyboardCode = {}));
+// A custom collision detection algorithm is used when using a keyboard to
+// work around an unexpected behavior when reordering items of variable height
+// with the keyboard.
+// Neither closestCenter nor closestCorners work really well for this case,
+// because the center (or corners) of a tall rectangle might be so low that it
+// is detected as being closest to the rectangle below of the one it should
+// actually swap with.
+// Instead of relying on coordinates, the expected results are achieved by
+// moving X positions up or down in the initially sorted array, depending on
+// the desired direction.
+// We let our collisionDetection and customCoordinateGetter use the same
+// getClosestId function which takes its value from the current component
+// state, to make sure they are always in sync.
+export default function useDragAndDropReorder({ sortedOptions, }) {
+    const isKeyboard = useRef(false);
+    const positionDelta = useRef(0);
+    const [activeItemId, setActiveItemId] = useState(null);
+    const setActiveItem = (id) => {
+        setActiveItemId(id);
+        if (!id) {
+            isKeyboard.current = false;
+            positionDelta.current = 0;
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (isKeyboard.current && activeItemId) {
+            const currentTargetIndex = sortedOptions.findIndex(({ id }) => id === activeItemId) + positionDelta.current;
+            if (event.key === 'ArrowDown' && currentTargetIndex < sortedOptions.length - 1) {
+                positionDelta.current += 1;
+            }
+            else if (event.key === 'ArrowUp' && currentTargetIndex > 0) {
+                positionDelta.current -= 1;
+            }
+        }
+        if (activeItemId && isEscape(event.key)) {
+            // Prevent modal from closing when pressing Esc to cancel the dragging action
+            event.stopPropagation();
+        }
+    };
+    const getClosestId = (active) => {
+        if (positionDelta.current === 0) {
+            return active.id;
+        }
+        const currentIndex = sortedOptions.findIndex(({ id }) => id === active.id);
+        const newIndex = Math.max(0, Math.min(sortedOptions.length - 1, currentIndex + positionDelta.current));
+        return sortedOptions[newIndex].id;
+    };
+    const collisionDetection = ({ active, collisionRect, droppableContainers, droppableRects, pointerCoordinates, }) => {
+        if (isKeyboard.current) {
+            // For keyboard interaction, determine the colliding container based on the movements made by the arrow keys,
+            // via getClosestId
+            const collidingContainer = getCollidingContainer({
+                activeId: active.id,
+                closestId: getClosestId(active),
+                droppableContainers,
+            });
+            return collidingContainer ? [collidingContainer] : [];
+        }
+        else {
+            // For mouse interaction, use the closest center algorithm
+            return closestCenter({ active, collisionRect, droppableRects, droppableContainers, pointerCoordinates });
+        }
+    };
+    const coordinateGetter = (event, { context: { active, collisionRect, droppableRects, droppableContainers } }) => {
+        if (event.code === KeyboardCode.Up || event.code === KeyboardCode.Down) {
+            event.preventDefault();
+            if (!active || !collisionRect) {
+                return;
+            }
+            const closestId = getClosestId(active);
+            if (closestId !== null) {
+                const activeDroppable = droppableContainers.get(active.id);
+                const newDroppable = droppableContainers.get(closestId);
+                const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;
+                const newNode = newDroppable === null || newDroppable === void 0 ? void 0 : newDroppable.node.current;
+                if (newNode && newRect && activeDroppable && newDroppable) {
+                    const isAfterActive = isAfter(activeDroppable, newDroppable);
+                    const offset = {
+                        x: isAfterActive ? collisionRect.width - newRect.width : 0,
+                        y: isAfterActive ? collisionRect.height - newRect.height : 0,
+                    };
+                    const rectCoordinates = {
+                        x: newRect.left,
+                        y: newRect.top,
+                    };
+                    return {
+                        x: rectCoordinates.x - offset.x,
+                        y: rectCoordinates.y - offset.y,
+                    };
+                }
+            }
+        }
+    };
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter,
+        onActivation: () => {
+            isKeyboard.current = true;
+        },
+    }));
+    return {
+        activeItem: activeItemId,
+        collisionDetection,
+        coordinateGetter,
+        handleKeyDown,
+        sensors,
+        setActiveItem,
+    };
+}
+function isAfter(a, b) {
+    return hasSortableData(a) && hasSortableData(b) && a.data.current.sortable.index < b.data.current.sortable.index;
+}
+function getCollidingContainer({ activeId, closestId, droppableContainers, }) {
+    if (closestId === activeId) {
+        return;
+    }
+    const collidingContainer = droppableContainers.find(({ id }) => id === closestId);
+    if (collidingContainer) {
+        return {
+            id: collidingContainer.id,
+            data: {
+                droppableContainer: collidingContainer,
+                value: 0,
+            },
+        };
+    }
+}
+const isEscape = (key) => key === 'Escape' || key === 'Esc';
+//# sourceMappingURL=use-drag-and-drop-reorder.js.map

package/collection-preferences/content-display/use-drag-and-drop-reorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drag-and-drop-reorder.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/use-drag-and-drop-reorder.ts"],"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, { useRef, useState } from 'react';\nimport {\n  Active,\n  closestCenter,\n  CollisionDetection,\n  DroppableContainer,\n  KeyboardCoordinateGetter,\n  PointerSensor,\n  UniqueIdentifier,\n  useSensor,\n  useSensors,\n} from '@dnd-kit/core';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport { hasSortableData } from '@dnd-kit/sortable';\nimport { KeyboardSensor } from './keyboard-sensor';\n\nenum KeyboardCode {\n  Space = 'Space',\n  Down = 'ArrowDown',\n  Right = 'ArrowRight',\n  Left = 'ArrowLeft',\n  Up = 'ArrowUp',\n  Esc = 'Escape',\n  Enter = 'Enter',\n}\n\n// A custom collision detection algorithm is used when using a keyboard to\n// work around an unexpected behavior when reordering items of variable height\n// with the keyboard.\n\n// Neither closestCenter nor closestCorners work really well for this case,\n// because the center (or corners) of a tall rectangle might be so low that it\n// is detected as being closest to the rectangle below of the one it should\n// actually swap with.\n\n// Instead of relying on coordinates, the expected results are achieved by\n// moving X positions up or down in the initially sorted array, depending on\n// the desired direction.\n\n// We let our collisionDetection and customCoordinateGetter use the same\n// getClosestId function which takes its value from the current component\n// state, to make sure they are always in sync.\n\nexport default function useDragAndDropReorder({\n  sortedOptions,\n}: {\n  sortedOptions: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n}) {\n  const isKeyboard = useRef(false);\n  const positionDelta = useRef(0);\n  const [activeItemId, setActiveItemId] = useState<UniqueIdentifier | null>(null);\n\n  const setActiveItem = (id: UniqueIdentifier | null) => {\n    setActiveItemId(id);\n    if (!id) {\n      isKeyboard.current = false;\n      positionDelta.current = 0;\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (isKeyboard.current && activeItemId) {\n      const currentTargetIndex = sortedOptions.findIndex(({ id }) => id === activeItemId) + positionDelta.current;\n      if (event.key === 'ArrowDown' && currentTargetIndex < sortedOptions.length - 1) {\n        positionDelta.current += 1;\n      } else if (event.key === 'ArrowUp' && currentTargetIndex > 0) {\n        positionDelta.current -= 1;\n      }\n    }\n    if (activeItemId && isEscape(event.key)) {\n      // Prevent modal from closing when pressing Esc to cancel the dragging action\n      event.stopPropagation();\n    }\n  };\n\n  const getClosestId = (active: Active) => {\n    if (positionDelta.current === 0) {\n      return active.id;\n    }\n    const currentIndex = sortedOptions.findIndex(({ id }) => id === active.id);\n    const newIndex = Math.max(0, Math.min(sortedOptions.length - 1, currentIndex + positionDelta.current));\n    return sortedOptions[newIndex].id;\n  };\n\n  const collisionDetection: CollisionDetection = ({\n    active,\n    collisionRect,\n    droppableContainers,\n    droppableRects,\n    pointerCoordinates,\n  }) => {\n    if (isKeyboard.current) {\n      // For keyboard interaction, determine the colliding container based on the movements made by the arrow keys,\n      // via getClosestId\n      const collidingContainer = getCollidingContainer({\n        activeId: active.id,\n        closestId: getClosestId(active),\n        droppableContainers,\n      });\n      return collidingContainer ? [collidingContainer] : [];\n    } else {\n      // For mouse interaction, use the closest center algorithm\n      return closestCenter({ active, collisionRect, droppableRects, droppableContainers, pointerCoordinates });\n    }\n  };\n\n  const coordinateGetter: KeyboardCoordinateGetter = (\n    event,\n    { context: { active, collisionRect, droppableRects, droppableContainers } }\n  ) => {\n    if (event.code === KeyboardCode.Up || event.code === KeyboardCode.Down) {\n      event.preventDefault();\n\n      if (!active || !collisionRect) {\n        return;\n      }\n\n      const closestId = getClosestId(active);\n\n      if (closestId !== null) {\n        const activeDroppable = droppableContainers.get(active.id);\n        const newDroppable = droppableContainers.get(closestId);\n        const newRect = newDroppable ? droppableRects.get(newDroppable.id) : null;\n        const newNode = newDroppable?.node.current;\n\n        if (newNode && newRect && activeDroppable && newDroppable) {\n          const isAfterActive = isAfter(activeDroppable, newDroppable);\n          const offset = {\n            x: isAfterActive ? collisionRect.width - newRect.width : 0,\n            y: isAfterActive ? collisionRect.height - newRect.height : 0,\n          };\n          const rectCoordinates = {\n            x: newRect.left,\n            y: newRect.top,\n          };\n\n          return {\n            x: rectCoordinates.x - offset.x,\n            y: rectCoordinates.y - offset.y,\n          };\n        }\n      }\n    }\n  };\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter,\n      onActivation: () => {\n        isKeyboard.current = true;\n      },\n    })\n  );\n\n  return {\n    activeItem: activeItemId,\n    collisionDetection,\n    coordinateGetter,\n    handleKeyDown,\n    sensors,\n    setActiveItem,\n  };\n}\n\nfunction isAfter(a: DroppableContainer, b: DroppableContainer) {\n  return hasSortableData(a) && hasSortableData(b) && a.data.current.sortable.index < b.data.current.sortable.index;\n}\n\nfunction getCollidingContainer({\n  activeId,\n  closestId,\n  droppableContainers,\n}: {\n  activeId: UniqueIdentifier;\n  closestId: UniqueIdentifier;\n  droppableContainers: DroppableContainer[];\n}) {\n  if (closestId === activeId) {\n    return;\n  }\n  const collidingContainer = droppableContainers.find(({ id }) => id === closestId);\n  if (collidingContainer) {\n    return {\n      id: collidingContainer.id,\n      data: {\n        droppableContainer: collidingContainer,\n        value: 0,\n      },\n    };\n  }\n}\n\nconst isEscape = (key: string) => key === 'Escape' || key === 'Esc';\n"]}

package/collection-preferences/content-display/use-live-announcements.d.ts

@@ -0,0 +1,12 @@
+import { CollectionPreferencesProps } from '../interfaces';
+import { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';
+export default function useLiveAnnouncements({ isDragging, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, sortedOptions, }: Partial<CollectionPreferencesProps.ContentDisplayPreference> & {
+    isDragging: boolean;
+    sortedOptions: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;
+}): {
+    onDragStart({ active }: DragStartEvent): string | undefined;
+    onDragOver({ active, over }: DragOverEvent): string | undefined;
+    onDragEnd({ active, over }: DragEndEvent): string | undefined;
+    onDragCancel(): string | undefined;
+};
+//# sourceMappingURL=use-live-announcements.d.ts.map

package/collection-preferences/content-display/use-live-announcements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-live-announcements.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/use-live-announcements.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG5E,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,UAAU,EACV,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,aAAa,GACd,EAAE,OAAO,CAAC,0BAA0B,CAAC,wBAAwB,CAAC,GAAG;IAChE,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CAC7E;4BAO2B,cAAc;iCAMT,aAAa;gCAcd,YAAY;;EAW3C"}