@cloudscape-design/components 3.0.274 → 3.0.276

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

@@ -1,52 +0,0 @@
-// 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

@@ -1 +0,0 @@
-{"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"]}