newspack-components 4.3.0 → 4.4.0-alpha.1

package/dist/esm/card-sortable-list/index.js

@@ -1,3 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * Card - Sortable list component.
  */
@@ -18,36 +23,56 @@ import './style.scss';
  * External dependencies
  */
 import classNames from 'classnames';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DROP_ANIMATION_DURATION = 400; // ms — must match $drop-duration in style.scss
-const BUTTON_MOVE_DURATION = 200; // ms — must match $shift-duration in style.scss
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+var DROP_ANIMATION_DURATION = 400; // ms — must match $drop-duration in style.scss
+var BUTTON_MOVE_DURATION = 200; // ms — must match $shift-duration in style.scss
 
-const CardSortableList = ({
-  disabled = false,
-  items = [],
-  onDragCallback = () => {}
-}) => {
-  const [sortedItems, setSortedItems] = useState(items);
-  const [draggingIndex, setDraggingIndex] = useState(null);
-  const [hoverIndex, setHoverIndex] = useState(null);
-  const [droppedIndex, setDroppedIndex] = useState(null);
-  const [measurements, setMeasurements] = useState(null);
-  const listRef = useRef(null);
-  const itemRefs = useRef([]);
-  const dropAnimationTimer = useRef(null);
-  const buttonMoveTimer = useRef(null);
-  const buttonFlipRef = useRef(null);
-  const [buttonMoveId, setButtonMoveId] = useState(0);
-  const documentDragOverRef = useRef(null);
+var CardSortableList = function CardSortableList(_ref) {
+  var _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$onDragCallback = _ref.onDragCallback,
+    onDragCallback = _ref$onDragCallback === void 0 ? function () {} : _ref$onDragCallback;
+  var _useState = useState(items),
+    _useState2 = _slicedToArray(_useState, 2),
+    sortedItems = _useState2[0],
+    setSortedItems = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    draggingIndex = _useState4[0],
+    setDraggingIndex = _useState4[1];
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hoverIndex = _useState6[0],
+    setHoverIndex = _useState6[1];
+  var _useState7 = useState(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    droppedIndex = _useState8[0],
+    setDroppedIndex = _useState8[1];
+  var _useState9 = useState(null),
+    _useState0 = _slicedToArray(_useState9, 2),
+    measurements = _useState0[0],
+    setMeasurements = _useState0[1];
+  var listRef = useRef(null);
+  var itemRefs = useRef([]);
+  var dropAnimationTimer = useRef(null);
+  var buttonMoveTimer = useRef(null);
+  var buttonFlipRef = useRef(null);
+  var _useState1 = useState(0),
+    _useState10 = _slicedToArray(_useState1, 2),
+    buttonMoveId = _useState10[0],
+    setButtonMoveId = _useState10[1];
+  var documentDragOverRef = useRef(null);
 
   // Keep sortedItems in sync when the items prop changes externally (e.g. after a save).
-  useEffect(() => {
+  useEffect(function () {
     setSortedItems(items);
   }, [items]);
 
   // Clean up any pending animation timer on unmount.
-  useEffect(() => {
-    return () => {
+  useEffect(function () {
+    return function () {
       if (dropAnimationTimer.current) {
         clearTimeout(dropAnimationTimer.current);
       }
@@ -64,28 +89,32 @@ const CardSortableList = ({
    * Handle a chevron-button move. Records item positions before the reorder so
    * the FLIP animation can play after React commits the new DOM order.
    */
-  const handleButtonMove = (fromIndex, toIndex) => {
+  var handleButtonMove = function handleButtonMove(fromIndex, toIndex) {
     if (toIndex < 0 || toIndex >= sortedItems.length) {
       return;
     }
-    const fromEl = itemRefs.current[fromIndex];
-    const toEl = itemRefs.current[toIndex];
+    var fromEl = itemRefs.current[fromIndex];
+    var toEl = itemRefs.current[toIndex];
     if (!fromEl || !toEl) {
       return;
     }
-    const stride = Math.abs(toEl.getBoundingClientRect().top - fromEl.getBoundingClientRect().top);
-    const direction = toIndex > fromIndex ? 1 : -1;
+    var stride = Math.abs(toEl.getBoundingClientRect().top - fromEl.getBoundingClientRect().top);
+    var direction = toIndex > fromIndex ? 1 : -1;
     buttonFlipRef.current = {
-      fromIndex,
-      toIndex,
-      stride,
-      direction
+      fromIndex: fromIndex,
+      toIndex: toIndex,
+      stride: stride,
+      direction: direction
     };
-    const reordered = [...sortedItems];
-    const [moved] = reordered.splice(fromIndex, 1);
+    var reordered = _toConsumableArray(sortedItems);
+    var _reordered$splice = reordered.splice(fromIndex, 1),
+      _reordered$splice2 = _slicedToArray(_reordered$splice, 1),
+      moved = _reordered$splice2[0];
     reordered.splice(toIndex, 0, moved);
     setSortedItems(reordered);
-    setButtonMoveId(id => id + 1);
+    setButtonMoveId(function (id) {
+      return id + 1;
+    });
   };
 
   /**
@@ -94,30 +123,28 @@ const CardSortableList = ({
    * using inline CSS transitions (no CSS classes, to avoid creating a new
    * containing block that would break position:fixed on the Draggable clone).
    */
-  useLayoutEffect(() => {
-    const flipData = buttonFlipRef.current;
+  useLayoutEffect(function () {
+    var flipData = buttonFlipRef.current;
     if (!flipData) {
       return;
     }
     buttonFlipRef.current = null;
-    const {
-      fromIndex,
-      toIndex,
-      stride,
-      direction
-    } = flipData;
-    const startAnimation = (el, startY) => {
+    var fromIndex = flipData.fromIndex,
+      toIndex = flipData.toIndex,
+      stride = flipData.stride,
+      direction = flipData.direction;
+    var startAnimation = function startAnimation(el, startY) {
       if (!el) {
         return;
       }
       // Snap to the starting position with no transition.
       el.style.transition = 'none';
-      el.style.transform = `translateY(${startY}px)`;
+      el.style.transform = "translateY(".concat(startY, "px)");
       // Force a reflow so the browser registers the starting position
       // before we switch to the animated transition.
       el.getBoundingClientRect();
       // Animate from startY back to 0 (its new natural position).
-      el.style.transition = `transform ${BUTTON_MOVE_DURATION}ms ease-out`;
+      el.style.transition = "transform ".concat(BUTTON_MOVE_DURATION, "ms ease-out");
       el.style.transform = '';
     };
 
@@ -128,11 +155,11 @@ const CardSortableList = ({
     if (buttonMoveTimer.current) {
       clearTimeout(buttonMoveTimer.current);
     }
-    buttonMoveTimer.current = setTimeout(() => {
+    buttonMoveTimer.current = setTimeout(function () {
       // Clear inline animation styles before calling the external callback so
       // the subsequent React re-render doesn't fight a live animation.
-      [fromIndex, toIndex].forEach(i => {
-        const el = itemRefs.current[i];
+      [fromIndex, toIndex].forEach(function (i) {
+        var el = itemRefs.current[i];
         if (el) {
           el.style.transition = '';
           el.style.transform = '';
@@ -141,13 +168,13 @@ const CardSortableList = ({
 
       // Move focus to the matching chevron button on the card at toIndex.
       // Focus before onDragCallback so a parent rerender can't steal focus.
-      const targetEl = itemRefs.current[toIndex];
+      var targetEl = itemRefs.current[toIndex];
       if (targetEl) {
-        const moveButtons = targetEl.querySelectorAll('.newspack-card--core__header__draggable-controls__move-buttons button');
+        var moveButtons = targetEl.querySelectorAll('.newspack-card--core__header__draggable-controls__move-buttons button');
         // direction > 0 = moved down → prefer the down button (index 1).
         // direction < 0 = moved up   → prefer the up   button (index 0).
-        const preferred = direction > 0 ? moveButtons[1] : moveButtons[0];
-        const fallback = direction > 0 ? moveButtons[0] : moveButtons[1];
+        var preferred = direction > 0 ? moveButtons[1] : moveButtons[0];
+        var fallback = direction > 0 ? moveButtons[0] : moveButtons[1];
         if (preferred && !preferred.disabled) {
           preferred.focus();
         } else if (fallback && !fallback.disabled) {
@@ -159,7 +186,7 @@ const CardSortableList = ({
     }, BUTTON_MOVE_DURATION);
   }, [buttonMoveId]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const handleDragStart = index => {
+  var handleDragStart = function handleDragStart(index) {
     // Cancel any in-progress button-move animation so no item wrapper keeps
     // an inline transform. A transformed ancestor breaks position:fixed on
     // the Draggable clone (CSS spec: fixed positioning is relative to the
@@ -167,46 +194,50 @@ const CardSortableList = ({
     if (buttonMoveTimer.current) {
       clearTimeout(buttonMoveTimer.current);
       buttonMoveTimer.current = null;
-      itemRefs.current.forEach(el => {
+      itemRefs.current.forEach(function (el) {
         if (el) {
           el.style.transition = '';
           el.style.transform = '';
         }
       });
     }
-    const listEl = listRef.current;
+    var listEl = listRef.current;
     if (listEl) {
-      var _rects$index$height;
-      const itemEls = itemRefs.current;
-      const rects = itemEls.map(el => el?.getBoundingClientRect());
+      var _rects$index$height, _rects$index;
+      var itemEls = itemRefs.current;
+      var rects = itemEls.map(function (el) {
+        return el === null || el === void 0 ? void 0 : el.getBoundingClientRect();
+      });
 
       // Stride = item height + gap to next item (difference between consecutive tops).
-      const itemStrides = rects.map((rect, i) => {
+      var itemStrides = rects.map(function (rect, i) {
         if (!rect) {
           return 0;
         }
-        const nextRect = rects[i + 1];
+        var nextRect = rects[i + 1];
         return nextRect ? nextRect.top - rect.top : rect.height;
       });
       setMeasurements({
         lockedHeight: listEl.getBoundingClientRect().height,
-        sourceHeight: (_rects$index$height = rects[index]?.height) !== null && _rects$index$height !== void 0 ? _rects$index$height : 0,
-        itemStrides,
-        itemTops: rects.map(rect => {
+        sourceHeight: (_rects$index$height = (_rects$index = rects[index]) === null || _rects$index === void 0 ? void 0 : _rects$index.height) !== null && _rects$index$height !== void 0 ? _rects$index$height : 0,
+        itemStrides: itemStrides,
+        itemTops: rects.map(function (rect) {
           var _rect$top;
-          return (_rect$top = rect?.top) !== null && _rect$top !== void 0 ? _rect$top : 0;
+          return (_rect$top = rect === null || rect === void 0 ? void 0 : rect.top) !== null && _rect$top !== void 0 ? _rect$top : 0;
         })
       });
     }
     // Make the entire document a valid drop target so the browser skips
     // its snap-back animation when the cursor is released outside the list.
-    const preventSnapback = e => e.preventDefault();
+    var preventSnapback = function preventSnapback(e) {
+      return e.preventDefault();
+    };
     document.addEventListener('dragover', preventSnapback);
     documentDragOverRef.current = preventSnapback;
     setDraggingIndex(index);
     setDroppedIndex(null);
   };
-  const clearDragState = () => {
+  var clearDragState = function clearDragState() {
     if (documentDragOverRef.current) {
       document.removeEventListener('dragover', documentDragOverRef.current);
       documentDragOverRef.current = null;
@@ -221,39 +252,39 @@ const CardSortableList = ({
    * top positions snapshotted at drag start. Mirrors the midpoint logic
    * previously used in getDropIndex but works without a live event target.
    */
-  const getDropIndexFromCursor = (clientY, m, sourceIndex) => {
-    const {
-      itemTops,
-      itemStrides,
-      sourceHeight
-    } = m;
-    for (let i = 0; i < itemTops.length; i++) {
-      const movingDown = sourceIndex > i;
-      const midpoint = itemTops[i] + (movingDown ? itemStrides[i] : itemStrides[i] - sourceHeight);
+  var getDropIndexFromCursor = function getDropIndexFromCursor(clientY, m, sourceIndex) {
+    var itemTops = m.itemTops,
+      itemStrides = m.itemStrides,
+      sourceHeight = m.sourceHeight;
+    for (var i = 0; i < itemTops.length; i++) {
+      var movingDown = sourceIndex > i;
+      var midpoint = itemTops[i] + (movingDown ? itemStrides[i] : itemStrides[i] - sourceHeight);
       if (clientY < midpoint) {
         return i;
       }
     }
     return itemTops.length; // below all items
   };
-  const handleDragEnd = event => {
+  var handleDragEnd = function handleDragEnd(event) {
     // Take a local copy of measurements before clearDragState nulls it.
-    const m = measurements;
-    const sourceIndex = draggingIndex;
+    var m = measurements;
+    var sourceIndex = draggingIndex;
     clearDragState();
     if (m === null || sourceIndex === null) {
       return;
     }
-    const dropIndex = getDropIndexFromCursor(event.clientY, m, sourceIndex);
+    var dropIndex = getDropIndexFromCursor(event.clientY, m, sourceIndex);
 
     // Compute the destination index in the post-removal array.
     // After splicing out the dragged item, indices above it shift down by one.
-    const insertIndex = dropIndex > sourceIndex ? dropIndex - 1 : dropIndex;
+    var insertIndex = dropIndex > sourceIndex ? dropIndex - 1 : dropIndex;
     if (insertIndex === sourceIndex) {
       return;
     }
-    const reordered = [...sortedItems];
-    const [moved] = reordered.splice(sourceIndex, 1);
+    var reordered = _toConsumableArray(sortedItems);
+    var _reordered$splice3 = reordered.splice(sourceIndex, 1),
+      _reordered$splice4 = _slicedToArray(_reordered$splice3, 1),
+      moved = _reordered$splice4[0];
     reordered.splice(insertIndex, 0, moved);
 
     // First render: show items in their new order with no animation.
@@ -263,21 +294,21 @@ const CardSortableList = ({
 
     // Next frame: trigger the drop animation on the newly-positioned item,
     // then call onDragCallback after the animation completes.
-    requestAnimationFrame(() => {
+    requestAnimationFrame(function () {
       setDroppedIndex(insertIndex);
-      dropAnimationTimer.current = setTimeout(() => {
+      dropAnimationTimer.current = setTimeout(function () {
         setDroppedIndex(null);
         onDragCallback(sourceIndex, insertIndex);
       }, DROP_ANIMATION_DURATION);
     });
   };
-  const handleDragOver = (event, index) => {
+  var handleDragOver = function handleDragOver(event, index) {
     event.preventDefault();
     if (!measurements) {
       return;
     }
-    const rect = event.currentTarget.getBoundingClientRect();
-    const midpoint = rect.top + rect.height / 2;
+    var rect = event.currentTarget.getBoundingClientRect();
+    var midpoint = rect.top + rect.height / 2;
     setHoverIndex(event.clientY < midpoint ? index : index + 1);
   };
 
@@ -291,7 +322,7 @@ const CardSortableList = ({
    * item's stride (height + gap) to either fill the vacated source slot or make
    * room for the incoming gap at the hover position.
    */
-  const getTranslateY = index => {
+  var getTranslateY = function getTranslateY(index) {
     var _itemStrides$dragging;
     if (draggingIndex === null || hoverIndex === null || !measurements) {
       return 0;
@@ -299,11 +330,9 @@ const CardSortableList = ({
     if (index === draggingIndex) {
       return 0;
     }
-    const {
-      itemStrides,
-      sourceHeight
-    } = measurements;
-    const sourceStride = (_itemStrides$dragging = itemStrides[draggingIndex]) !== null && _itemStrides$dragging !== void 0 ? _itemStrides$dragging : sourceHeight;
+    var itemStrides = measurements.itemStrides,
+      sourceHeight = measurements.sourceHeight;
+    var sourceStride = (_itemStrides$dragging = itemStrides[draggingIndex]) !== null && _itemStrides$dragging !== void 0 ? _itemStrides$dragging : sourceHeight;
     if (hoverIndex > draggingIndex) {
       // Dragging downward: items strictly between source and hover position slide up.
       if (index > draggingIndex && index < hoverIndex) {
@@ -315,7 +344,7 @@ const CardSortableList = ({
     }
     return 0;
   };
-  const isDragging = draggingIndex !== null;
+  var isDragging = draggingIndex !== null;
   return /*#__PURE__*/_jsx(VStack, {
     ref: listRef,
     className: classNames('newspack-card--core--sortable-list', disabled && 'newspack-card--core--sortable-list__is-disabled', isDragging && 'newspack-card--core--sortable-list__is-dragging'),
@@ -323,12 +352,12 @@ const CardSortableList = ({
       height: measurements.lockedHeight
     } : undefined,
     spacing: 4,
-    children: sortedItems.map((item, index) => {
-      const translateY = getTranslateY(index);
+    children: sortedItems.map(function (item, index) {
+      var translateY = getTranslateY(index);
       return /*#__PURE__*/_jsx(Disabled, {
         isDisabled: disabled,
         children: /*#__PURE__*/_jsx("div", {
-          ref: el => {
+          ref: function ref(el) {
             itemRefs.current[index] = el;
           },
           className: classNames('newspack-card--core--sortable-list__item', {
@@ -336,42 +365,57 @@ const CardSortableList = ({
             'is-dropped': droppedIndex === index
           }),
           style: translateY ? {
-            transform: `translateY(${translateY}px)`
+            transform: "translateY(".concat(translateY, "px)")
           } : {
             transition: !isDragging ? 'none' : undefined
           },
-          id: `draggable-card-${index}`,
-          onDragOver: e => handleDragOver(e, index),
+          id: "draggable-card-".concat(index),
+          onDragOver: function onDragOver(e) {
+            return handleDragOver(e, index);
+          },
           children: /*#__PURE__*/_jsx(Draggable, {
             transferData: {},
             cloneClassname: "newspack-card--core--sortable-list__item__clone",
-            elementId: `draggable-card-${index}`,
-            onDragStart: () => handleDragStart(index),
+            elementId: "draggable-card-".concat(index),
+            onDragStart: function onDragStart() {
+              return handleDragStart(index);
+            },
             onDragEnd: handleDragEnd,
             appendToOwnerDocument: true,
-            children: ({
-              onDraggableStart,
-              onDraggableEnd
-            }) => /*#__PURE__*/_jsx(Card, {
-              isSmall: true,
-              draggable: true,
-              onDragStart: onDraggableStart,
-              onDragEnd: onDraggableEnd,
-              __experimentalCoreCard: true,
-              __experimentalCoreProps: {
-                header: /*#__PURE__*/_jsxs("h3", {
-                  children: [item.title, /*#__PURE__*/_jsx(Badge, {
-                    level: item.badgeLevel,
-                    text: item.badgeText
-                  })]
-                }),
-                isDraggable: true,
-                isFirstTarget: index === 0,
-                isLastTarget: index === sortedItems.length - 1,
-                dragIndex: index,
-                onDragCallback: handleButtonMove
-              }
-            })
+            children: function children(_ref2) {
+              var onDraggableStart = _ref2.onDraggableStart,
+                onDraggableEnd = _ref2.onDraggableEnd;
+              return /*#__PURE__*/_jsx(Card, {
+                isSmall: true,
+                draggable: true,
+                onDragStart: onDraggableStart,
+                onDragEnd: onDraggableEnd,
+                __experimentalCoreCard: true,
+                __experimentalCoreProps: _objectSpread(_objectSpread({
+                  header: /*#__PURE__*/_jsxs(_Fragment, {
+                    children: [/*#__PURE__*/_jsxs("h3", {
+                      children: [item.title, /*#__PURE__*/_jsx(Badge, {
+                        level: item.badgeLevel,
+                        text: item.badgeText
+                      })]
+                    }), item.description && /*#__PURE__*/_jsx("p", {
+                      children: item.description
+                    })]
+                  }),
+                  isDraggable: true,
+                  isFirstTarget: index === 0,
+                  isLastTarget: index === sortedItems.length - 1,
+                  dragIndex: index,
+                  onDragCallback: handleButtonMove
+                }, item.onToggleChange !== undefined && {
+                  actionType: 'toggle',
+                  isActive: item.toggleChecked,
+                  onToggle: item.onToggleChange
+                }), item.actions !== undefined && {
+                  actions: item.actions
+                })
+              });
+            }
           })
         })
       }, item.id);