newspack-components 4.1.0 → 4.3.0

package/dist/cjs/card-settings-group/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ = require("../");
+require("./style.scss");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Card - Settings group component.
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const CardSettingsGroup = ({
+  actionType = 'chevron',
+  children,
+  icon = null,
+  title = '',
+  description = '',
+  isActive = false,
+  onEnable = () => {}
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
+    className: "newspack-card--core--settings-group",
+    actionType: actionType,
+    isSmall: true,
+    __experimentalCoreCard: true,
+    __experimentalCoreProps: {
+      header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+          children: title
+        }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
+          children: description
+        })]
+      }),
+      onHeaderClick: onEnable,
+      icon,
+      iconBackgroundColor: true,
+      isActive,
+      title
+    },
+    children: isActive && children
+  });
+};
+var _default = exports.default = CardSettingsGroup;

package/dist/cjs/card-settings-group/style.scss

@@ -0,0 +1,33 @@
+.newspack-card--core--settings-group {
+	.components-card__body {
+		> .newspack-notice {
+			margin: 16px 0;
+		}
+		> .components-base-control {
+			&:first-child {
+				margin-top: 0;
+			}
+			+ .components-base-control,
+			+ .newspack-form-token-field {
+				margin-top: 16px;
+			}
+		}
+
+		/** ToggleControl switch should appear after the label. */
+		> .components-toggle-control {
+			.components-h-stack {
+				.components-form-toggle {
+					order: 2;
+				}
+			}
+			.components-toggle-control__help {
+				margin-inline-start: auto;
+			}
+		}
+		.newspack-grid:last-child,
+		.components-base-control:last-child,
+		p:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

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

@@ -0,0 +1,390 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _ = require("../");
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Card - Sortable list component.
+ */
+
+/**
+ * WordPress dependencies.
+ */
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+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
+
+const CardSortableList = ({
+  disabled = false,
+  items = [],
+  onDragCallback = () => {}
+}) => {
+  const [sortedItems, setSortedItems] = (0, _element.useState)(items);
+  const [draggingIndex, setDraggingIndex] = (0, _element.useState)(null);
+  const [hoverIndex, setHoverIndex] = (0, _element.useState)(null);
+  const [droppedIndex, setDroppedIndex] = (0, _element.useState)(null);
+  const [measurements, setMeasurements] = (0, _element.useState)(null);
+  const listRef = (0, _element.useRef)(null);
+  const itemRefs = (0, _element.useRef)([]);
+  const dropAnimationTimer = (0, _element.useRef)(null);
+  const buttonMoveTimer = (0, _element.useRef)(null);
+  const buttonFlipRef = (0, _element.useRef)(null);
+  const [buttonMoveId, setButtonMoveId] = (0, _element.useState)(0);
+  const documentDragOverRef = (0, _element.useRef)(null);
+
+  // Keep sortedItems in sync when the items prop changes externally (e.g. after a save).
+  (0, _element.useEffect)(() => {
+    setSortedItems(items);
+  }, [items]);
+
+  // Clean up any pending animation timer on unmount.
+  (0, _element.useEffect)(() => {
+    return () => {
+      if (dropAnimationTimer.current) {
+        clearTimeout(dropAnimationTimer.current);
+      }
+      if (buttonMoveTimer.current) {
+        clearTimeout(buttonMoveTimer.current);
+      }
+      if (documentDragOverRef.current) {
+        document.removeEventListener('dragover', documentDragOverRef.current);
+      }
+    };
+  }, []);
+
+  /**
+   * 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) => {
+    if (toIndex < 0 || toIndex >= sortedItems.length) {
+      return;
+    }
+    const fromEl = itemRefs.current[fromIndex];
+    const toEl = itemRefs.current[toIndex];
+    if (!fromEl || !toEl) {
+      return;
+    }
+    const stride = Math.abs(toEl.getBoundingClientRect().top - fromEl.getBoundingClientRect().top);
+    const direction = toIndex > fromIndex ? 1 : -1;
+    buttonFlipRef.current = {
+      fromIndex,
+      toIndex,
+      stride,
+      direction
+    };
+    const reordered = [...sortedItems];
+    const [moved] = reordered.splice(fromIndex, 1);
+    reordered.splice(toIndex, 0, moved);
+    setSortedItems(reordered);
+    setButtonMoveId(id => id + 1);
+  };
+
+  /**
+   * FLIP Invert+Play step: runs synchronously after React commits the reordered
+   * DOM. Animate each swapped item from its previous position to its new one
+   * using inline CSS transitions (no CSS classes, to avoid creating a new
+   * containing block that would break position:fixed on the Draggable clone).
+   */
+  (0, _element.useLayoutEffect)(() => {
+    const flipData = buttonFlipRef.current;
+    if (!flipData) {
+      return;
+    }
+    buttonFlipRef.current = null;
+    const {
+      fromIndex,
+      toIndex,
+      stride,
+      direction
+    } = flipData;
+    const startAnimation = (el, startY) => {
+      if (!el) {
+        return;
+      }
+      // Snap to the starting position with no transition.
+      el.style.transition = 'none';
+      el.style.transform = `translateY(${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.transform = '';
+    };
+
+    // Moved item is now at toIndex: animate it in from its old position.
+    startAnimation(itemRefs.current[toIndex], -direction * stride);
+    // Displaced item is now at fromIndex: animate it in from its old position.
+    startAnimation(itemRefs.current[fromIndex], direction * stride);
+    if (buttonMoveTimer.current) {
+      clearTimeout(buttonMoveTimer.current);
+    }
+    buttonMoveTimer.current = setTimeout(() => {
+      // 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];
+        if (el) {
+          el.style.transition = '';
+          el.style.transform = '';
+        }
+      });
+
+      // 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];
+      if (targetEl) {
+        const 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];
+        if (preferred && !preferred.disabled) {
+          preferred.focus();
+        } else if (fallback && !fallback.disabled) {
+          fallback.focus();
+        }
+      }
+      onDragCallback(fromIndex, toIndex);
+      buttonMoveTimer.current = null;
+    }, BUTTON_MOVE_DURATION);
+  }, [buttonMoveId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const 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
+    // nearest ancestor with a transform/filter/perspective).
+    if (buttonMoveTimer.current) {
+      clearTimeout(buttonMoveTimer.current);
+      buttonMoveTimer.current = null;
+      itemRefs.current.forEach(el => {
+        if (el) {
+          el.style.transition = '';
+          el.style.transform = '';
+        }
+      });
+    }
+    const listEl = listRef.current;
+    if (listEl) {
+      var _rects$index$height;
+      const itemEls = itemRefs.current;
+      const rects = itemEls.map(el => el?.getBoundingClientRect());
+
+      // Stride = item height + gap to next item (difference between consecutive tops).
+      const itemStrides = rects.map((rect, i) => {
+        if (!rect) {
+          return 0;
+        }
+        const 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 => {
+          var _rect$top;
+          return (_rect$top = 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();
+    document.addEventListener('dragover', preventSnapback);
+    documentDragOverRef.current = preventSnapback;
+    setDraggingIndex(index);
+    setDroppedIndex(null);
+  };
+  const clearDragState = () => {
+    if (documentDragOverRef.current) {
+      document.removeEventListener('dragover', documentDragOverRef.current);
+      documentDragOverRef.current = null;
+    }
+    setDraggingIndex(null);
+    setHoverIndex(null);
+    setMeasurements(null);
+  };
+
+  /**
+   * Determine the drop target index from cursor coordinates and the item
+   * 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);
+      if (clientY < midpoint) {
+        return i;
+      }
+    }
+    return itemTops.length; // below all items
+  };
+  const handleDragEnd = event => {
+    // Take a local copy of measurements before clearDragState nulls it.
+    const m = measurements;
+    const sourceIndex = draggingIndex;
+    clearDragState();
+    if (m === null || sourceIndex === null) {
+      return;
+    }
+    const 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;
+    if (insertIndex === sourceIndex) {
+      return;
+    }
+    const reordered = [...sortedItems];
+    const [moved] = reordered.splice(sourceIndex, 1);
+    reordered.splice(insertIndex, 0, moved);
+
+    // First render: show items in their new order with no animation.
+    // The dragging CSS classes are already cleared by clearDragState() above,
+    // so no transitions will fire on this paint.
+    setSortedItems(reordered);
+
+    // Next frame: trigger the drop animation on the newly-positioned item,
+    // then call onDragCallback after the animation completes.
+    requestAnimationFrame(() => {
+      setDroppedIndex(insertIndex);
+      dropAnimationTimer.current = setTimeout(() => {
+        setDroppedIndex(null);
+        onDragCallback(sourceIndex, insertIndex);
+      }, DROP_ANIMATION_DURATION);
+    });
+  };
+  const handleDragOver = (event, index) => {
+    event.preventDefault();
+    if (!measurements) {
+      return;
+    }
+    const rect = event.currentTarget.getBoundingClientRect();
+    const midpoint = rect.top + rect.height / 2;
+    setHoverIndex(event.clientY < midpoint ? index : index + 1);
+  };
+
+  /**
+   * Compute the translateY for a non-source item at `index` given the current
+   * draggingIndex and hoverIndex, so that items visually shift to show the gap
+   * while the container's layout height stays fixed.
+   *
+   * The source item has been visually hidden but still occupies its layout slot.
+   * Items between the source and the hover position need to slide by the source
+   * 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 _itemStrides$dragging;
+    if (draggingIndex === null || hoverIndex === null || !measurements) {
+      return 0;
+    }
+    if (index === draggingIndex) {
+      return 0;
+    }
+    const {
+      itemStrides,
+      sourceHeight
+    } = measurements;
+    const 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) {
+        return -sourceStride;
+      }
+    } else if (index >= hoverIndex && index < draggingIndex) {
+      // Dragging upward: items between hover position and source slide down.
+      return sourceStride;
+    }
+    return 0;
+  };
+  const isDragging = draggingIndex !== null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+    ref: listRef,
+    className: (0, _classnames.default)('newspack-card--core--sortable-list', disabled && 'newspack-card--core--sortable-list__is-disabled', isDragging && 'newspack-card--core--sortable-list__is-dragging'),
+    style: measurements ? {
+      height: measurements.lockedHeight
+    } : undefined,
+    spacing: 4,
+    children: sortedItems.map((item, index) => {
+      const translateY = getTranslateY(index);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Disabled, {
+        isDisabled: disabled,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: el => {
+            itemRefs.current[index] = el;
+          },
+          className: (0, _classnames.default)('newspack-card--core--sortable-list__item', {
+            'is-source': draggingIndex === index,
+            'is-dropped': droppedIndex === index
+          }),
+          style: translateY ? {
+            transform: `translateY(${translateY}px)`
+          } : {
+            transition: !isDragging ? 'none' : undefined
+          },
+          id: `draggable-card-${index}`,
+          onDragOver: e => handleDragOver(e, index),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Draggable, {
+            transferData: {},
+            cloneClassname: "newspack-card--core--sortable-list__item__clone",
+            elementId: `draggable-card-${index}`,
+            onDragStart: () => handleDragStart(index),
+            onDragEnd: handleDragEnd,
+            appendToOwnerDocument: true,
+            children: ({
+              onDraggableStart,
+              onDraggableEnd
+            }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Card, {
+              isSmall: true,
+              draggable: true,
+              onDragStart: onDraggableStart,
+              onDragEnd: onDraggableEnd,
+              __experimentalCoreCard: true,
+              __experimentalCoreProps: {
+                header: /*#__PURE__*/(0, _jsxRuntime.jsxs)("h3", {
+                  children: [item.title, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Badge, {
+                    level: item.badgeLevel,
+                    text: item.badgeText
+                  })]
+                }),
+                isDraggable: true,
+                isFirstTarget: index === 0,
+                isLastTarget: index === sortedItems.length - 1,
+                dragIndex: index,
+                onDragCallback: handleButtonMove
+              }
+            })
+          })
+        })
+      }, item.id);
+    })
+  });
+};
+var _default = exports.default = CardSortableList;

package/dist/cjs/card-sortable-list/style.scss

@@ -0,0 +1,48 @@
+$collapse-duration: 200ms;
+$shift-duration: 150ms;
+$drop-duration: 400ms; /* must match DROP_ANIMATION_DURATION in index.tsx */
+
+.newspack-card--core--sortable-list {
+	&__item {
+		cursor: grab;
+
+		/*
+		 * Animate items sliding to fill/make space around the dragged item.
+		 */
+		transition: transform $shift-duration ease;
+
+		/*
+		 * Collapse the source item's content — the wrapper stays in layout as the
+		 * anchor point, and the container height is locked via inline style in JS.
+		 */
+		&.is-source {
+			cursor: grabbing;
+			opacity: 0;
+			transition: opacity $collapse-duration ease;
+		}
+
+		/*
+		 * Drop landing animation: brief fade-in and scale on the newly placed item.
+		 */
+		&.is-dropped {
+			animation: newspack-sortable-drop $drop-duration ease forwards;
+			opacity: 0;
+		}
+
+	}
+}
+
+@keyframes newspack-sortable-drop {
+	0% {
+		opacity: 0;
+		transform: scale(0.98);
+	}
+	60% {
+		opacity: 1;
+		transform: scale(1.01);
+	}
+	100% {
+		opacity: 1;
+		transform: scale(1);
+	}
+}

package/dist/cjs/confirm-dialog/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Modal
+ */
+
+/**
+ * WordPress dependencies.
+ */
+
+// eslint-disable-line @wordpress/no-unsafe-wp-apis
+
+/**
+ * External dependencies.
+ */
+
+/*
+ * See both https://wordpress.github.io/gutenberg/?path=/docs/components-confirmdialog--docs and
+ * https://wordpress.github.io/gutenberg/?path=/docs/components-modal--docs for all supported props.
+ */
+
+const sizeClassMap = {
+  small: 'newspack-modal--size-small',
+  medium: 'newspack-modal--size-medium',
+  large: 'newspack-modal--size-large',
+  'x-large': 'newspack-modal--size-x-large',
+  full: 'newspack-modal--size-full'
+};
+function ConfirmDialog({
+  className,
+  size = 'small',
+  hideTitle,
+  isDestructive,
+  onConfirm,
+  onCancel,
+  ...otherProps
+}, ref) {
+  const classes = (0, _classnames.default)('newspack-modal', sizeClassMap[size], hideTitle && 'newspack-modal--hide-title',
+  // Note: also hides the X close button.
+  isDestructive && 'newspack-modal--destructive', className);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
+    className: classes,
+    ...otherProps,
+    ref: ref,
+    onConfirm: onConfirm,
+    onCancel: onCancel,
+    __experimentalHideHeader: false
+  });
+}
+var _default = exports.default = (0, _element.forwardRef)(ConfirmDialog);

package/dist/cjs/divider/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./style.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Divider
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * External dependencies
+ */
+
+const Divider = ({
+  alignment = 'none',
+  className = undefined,
+  marginBottom = 64,
+  marginTop = 64,
+  variant = 'default',
+  ...otherProps
+}) => {
+  const classes = (0, _classnames.default)('newspack-divider', className, alignment && `newspack-divider--alignment-${alignment}`, variant && `newspack-divider--variant-${variant}`);
+  const style = {
+    '--divider-margin-bottom': typeof marginBottom === 'number' ? `${marginBottom}px` : marginBottom,
+    '--divider-margin-top': typeof marginTop === 'number' ? `${marginTop}px` : marginTop
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("hr", {
+    className: classes,
+    style: style,
+    ...otherProps
+  });
+};
+var _default = exports.default = Divider;

package/dist/cjs/divider/style.scss

@@ -0,0 +1,51 @@
+/**
+ * Divider
+ */
+
+@use "~@wordpress/base-styles/colors" as wp-colors;
+
+.newspack-divider {
+	background: transparent;
+	border: 0;
+	display: block;
+	height: 1px;
+	margin-bottom: min(32px, var(--divider-margin-bottom, 64px));
+	margin-left: 0;
+	margin-right: 0;
+	margin-top: min(32px, var(--divider-margin-top, 64px));
+	padding: 0;
+
+	@media screen and (min-width: 783px) {
+		margin-bottom: var(--divider-margin-bottom, 64px);
+		margin-top: var(--divider-margin-top, 64px);
+	}
+
+	// Alignment
+
+	&--alignment-full-width {
+		margin-left: calc(-50vw + 50%);
+		width: 100vw;
+	}
+
+	&--alignment-none {
+		width: 100%;
+	}
+
+	// Variant
+
+	&--variant-default {
+		background-color: wp-colors.$gray-300;
+	}
+
+	&--variant-primary {
+		background-color: var(--wp-admin-theme-color);
+	}
+
+	&--variant-secondary {
+		background-color: wp-colors.$gray-900;
+	}
+
+	&--variant-tertiary {
+		background-color: wp-colors.$gray-100;
+	}
+}

package/dist/cjs/form-token-field/style.scss

@@ -7,11 +7,6 @@
 .newspack-form-token-field {
 	width: 100%;
 
-	.components-form-token-field__input-container {
-		padding-bottom: 1px;
-		padding-top: 1px;
-	}
-
 	// Help
 
 	&__help {