@wordpress-gcb/fields 0.2.1 → 0.2.3

package/dist/controls/radio.js

@@ -0,0 +1,19 @@
+import { RadioControl } from '@wordpress/components';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function RadioField({
+  control,
+  value,
+  onChange
+}) {
+  const options = (control.options || []).map(o => ({
+    label: o.label,
+    value: String(o.value)
+  }));
+  return /*#__PURE__*/_jsx(RadioControl, {
+    label: control.label,
+    help: control.helpText,
+    selected: value != null ? String(value) : '',
+    options: options,
+    onChange: onChange
+  });
+}

package/dist/controls/range.js

@@ -0,0 +1,108 @@
+/**
+ * RangeField — ported verbatim from the original.
+ * Supports raw numeric ranges, legacy `map` configs, and `tokenGroup` binding.
+ */
+
+import { __ } from '@wordpress/i18n';
+import { RangeControl, Spinner } from '@wordpress/components';
+import { parseMap, getTokenFromKey, getKeyFromToken, getMapKeys, mapToRangeMarks } from '../utils/map-utils';
+import { useTokens, getTokensByGroup, generateMapFromTokens } from '../hooks/useTokens';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function RangeFieldImpl({
+  label,
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  help,
+  allowReset = true,
+  resetFallbackValue,
+  className = '',
+  map,
+  tokenGroup,
+  defaultOptionKey
+}) {
+  const {
+    tokens,
+    loading
+  } = useTokens();
+  let normalizedMap = null;
+  if (tokenGroup && tokens) {
+    const groupTokens = getTokensByGroup(tokens, tokenGroup);
+    if (groupTokens) {
+      const generatedMap = generateMapFromTokens(groupTokens);
+      normalizedMap = generatedMap ? parseMap(generatedMap) : null;
+    }
+  } else if (map) {
+    normalizedMap = parseMap(map);
+  }
+  if (tokenGroup && loading) {
+    return /*#__PURE__*/_jsxs("div", {
+      style: {
+        padding: '12px 0'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: {
+          fontWeight: 500,
+          marginBottom: '8px'
+        },
+        children: label
+      }), /*#__PURE__*/_jsx(Spinner, {})]
+    });
+  }
+  const allowedKeys = normalizedMap ? getMapKeys(normalizedMap) : null;
+  const marks = normalizedMap ? mapToRangeMarks(normalizedMap) : null;
+  if ((value === undefined || value === null || value === '') && defaultOptionKey && normalizedMap) {
+    const defaultToken = getTokenFromKey(normalizedMap, defaultOptionKey);
+    if (defaultToken && onChange) onChange(defaultToken);
+  }
+  let displayValue;
+  if (normalizedMap && value) {
+    displayValue = Number(getKeyFromToken(normalizedMap, value)) || value;
+  } else if (typeof value === 'string' && !isNaN(value)) {
+    displayValue = Number(value);
+  } else {
+    displayValue = value;
+  }
+  const handleChange = newSliderValue => {
+    let finalValue = normalizedMap ? getTokenFromKey(normalizedMap, String(newSliderValue)) : newSliderValue;
+    if (onChange) onChange(finalValue);
+  };
+  const effectiveStep = normalizedMap && allowedKeys && allowedKeys.length > 1 ? 1 : step;
+  const effectiveMin = normalizedMap && allowedKeys?.length ? Math.min(...allowedKeys) : min;
+  const effectiveMax = normalizedMap && allowedKeys?.length ? Math.max(...allowedKeys) : max;
+  return /*#__PURE__*/_jsx(RangeControl, {
+    label: label,
+    value: displayValue,
+    onChange: handleChange,
+    min: effectiveMin,
+    max: effectiveMax,
+    step: effectiveStep,
+    marks: marks,
+    help: help,
+    allowReset: allowReset,
+    resetFallbackValue: resetFallbackValue,
+    className: className,
+    __nextHasNoMarginBottom: true,
+    __next40pxDefaultSize: true
+  });
+}
+export default function RangeField({
+  control,
+  value,
+  onChange
+}) {
+  return /*#__PURE__*/_jsx(RangeFieldImpl, {
+    label: control.label,
+    value: value,
+    onChange: onChange,
+    min: control.min ?? 0,
+    max: control.max ?? 100,
+    step: control.step ?? 1,
+    help: control.helpText,
+    map: control.map,
+    tokenGroup: control.tokenGroup,
+    defaultOptionKey: control.defaultOptionKey ?? control.default
+  });
+}

package/{src → dist}/controls/relationship.js

@@ -4,11 +4,16 @@
  * multi-select mode, which handles the same use case.
  */
 import PostObjectField from './post-object';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function RelationshipField(props) {
-	const merged = {
-		...props,
-		control: { ...props.control, multiple: true },
-	};
-	return <PostObjectField {...merged} />;
-}
+  const merged = {
+    ...props,
+    control: {
+      ...props.control,
+      multiple: true
+    }
+  };
+  return /*#__PURE__*/_jsx(PostObjectField, {
+    ...merged
+  });
+}

package/dist/controls/repeater.js

@@ -0,0 +1,277 @@
+/**
+ * Repeater Inspector control — multi-row form-of-forms.
+ *
+ * Distinct from the `gcb/repeater` block (which is an InnerBlocks-based
+ * canvas surface). This control lives in the Inspector / post-fields /
+ * options page, and stores an ARRAY OF OBJECTS — each object a "row"
+ * shaped by the `fields` sub-config.
+ *
+ *   {
+ *     attributeKey: 'social_links',
+ *     type: 'repeater',
+ *     label: 'Social links',
+ *     fields: [
+ *       { attributeKey: 'label', type: 'text', label: 'Label' },
+ *       { attributeKey: 'url',   type: 'url',  label: 'URL' },
+ *     ],
+ *     min: 0,
+ *     max: null,                  // null = unlimited
+ *     addButtonLabel: 'Add link',
+ *     collapsedTitle: 'label',    // which sub-field to show in row header
+ *   }
+ *
+ * Stored:
+ *   [
+ *     { _id: 'r1', label: 'GitHub', url: 'https://...' },
+ *     { _id: 'r2', label: 'X',      url: 'https://...' },
+ *   ]
+ *
+ * Each row carries a stable `_id` so React keys + dnd-kit don't lose
+ * track during reorders. _id is generated on add and persisted with
+ * the row.
+ *
+ * Sub-fields can be any registered control type — the row body uses
+ * the same `controlComponents` registry as the top-level Inspector,
+ * so adding a control type automatically makes it usable inside a
+ * repeater.
+ */
+
+import { __ } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { controlComponents } from './index';
+
+/**
+ * cheap-enough unique id. Crypto.randomUUID would be better but is
+ * unsupported in some Playground / older Safari builds we still want to
+ * cover. Collision risk on a single repeater is negligible.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function newRowId() {
+  return 'r' + Math.random().toString(36).slice(2, 10);
+}
+
+/**
+ * Read `control.collapsedTitle` (a sub-field attributeKey) and pull the
+ * matching value off the row. Falls back to the index-based "Item N"
+ * label so empty rows are still identifiable.
+ */
+function rowTitle(row, control, index) {
+  const key = control.collapsedTitle;
+  if (key && typeof row?.[key] === 'string' && row[key].trim() !== '') {
+    return row[key];
+  }
+  return `${__('Item', 'gcblite')} ${index + 1}`;
+}
+function SortableRow({
+  row,
+  index,
+  control,
+  isOpen,
+  onToggle,
+  onUpdate,
+  onRemove,
+  attributes: parentAttrs
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: row._id
+  });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: setNodeRef,
+    style: style,
+    className: "gcb-repeater-row",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "gcb-repeater-row__header",
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        ...attributes,
+        ...listeners,
+        className: "gcb-repeater-row__handle",
+        "aria-label": __('Drag to reorder', 'gcblite'),
+        onClick: e => e.preventDefault(),
+        children: /*#__PURE__*/_jsx("svg", {
+          viewBox: "0 0 20 20",
+          width: "12",
+          height: "12",
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M7 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 2zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 7 14zm6-8a2 2 0 1 0-.001-4.001A2 2 0 0 0 13 6zm0 2a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 8zm0 6a2 2 0 1 0 .001 4.001A2 2 0 0 0 13 14z"
+          })
+        })
+      }), /*#__PURE__*/_jsxs("button", {
+        type: "button",
+        className: "gcb-repeater-row__title",
+        onClick: onToggle,
+        "aria-expanded": isOpen,
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "gcb-repeater-row__caret",
+          "aria-hidden": true,
+          children: isOpen ? '▾' : '▸'
+        }), /*#__PURE__*/_jsx("span", {
+          className: "gcb-repeater-row__title-text",
+          children: rowTitle(row, control, index)
+        })]
+      }), /*#__PURE__*/_jsx("button", {
+        type: "button",
+        className: "gcb-repeater-row__remove",
+        onClick: onRemove,
+        "aria-label": __('Remove row', 'gcblite'),
+        children: /*#__PURE__*/_jsx("svg", {
+          viewBox: "0 0 24 24",
+          width: "16",
+          height: "16",
+          children: /*#__PURE__*/_jsx("path", {
+            d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
+          })
+        })
+      })]
+    }), isOpen && /*#__PURE__*/_jsx("div", {
+      className: "gcb-repeater-row__body",
+      children: (control.fields || []).map(sub => {
+        const SubComponent = controlComponents[sub.type];
+        if (!SubComponent) {
+          return /*#__PURE__*/_jsxs("div", {
+            style: {
+              padding: 8,
+              background: '#fff3cd',
+              border: '1px solid #ffeeba',
+              marginBottom: 8
+            },
+            children: [/*#__PURE__*/_jsx("strong", {
+              children: sub.label
+            }), ":", ' ', __('unknown control type', 'gcblite'), ' ', /*#__PURE__*/_jsx("code", {
+              children: sub.type
+            })]
+          }, sub.attributeKey);
+        }
+        return /*#__PURE__*/_jsx(SubComponent, {
+          control: sub,
+          value: row?.[sub.attributeKey],
+          onChange: next => onUpdate({
+            ...row,
+            [sub.attributeKey]: next
+          }),
+          attributes: parentAttrs
+        }, sub.attributeKey);
+      })
+    })]
+  });
+}
+export default function RepeaterField({
+  control,
+  value,
+  onChange,
+  attributes
+}) {
+  const rows = Array.isArray(value) ? value : [];
+  const [openId, setOpenId] = useState(null);
+  const min = typeof control.min === 'number' ? control.min : 0;
+  const max = typeof control.max === 'number' && control.max > 0 ? control.max : null;
+  const canAdd = max === null || rows.length < max;
+  const canRemove = i => rows.length > min;
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 6
+    }
+  }));
+  const handleDragEnd = event => {
+    const {
+      active,
+      over
+    } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = rows.findIndex(r => r._id === active.id);
+    const newIndex = rows.findIndex(r => r._id === over.id);
+    if (oldIndex < 0 || newIndex < 0) return;
+    onChange(arrayMove(rows, oldIndex, newIndex));
+  };
+  const addRow = () => {
+    const fresh = {
+      _id: newRowId()
+    };
+    (control.fields || []).forEach(sub => {
+      if (Object.prototype.hasOwnProperty.call(sub, 'default')) {
+        fresh[sub.attributeKey] = sub.default;
+      }
+    });
+    const next = [...rows, fresh];
+    onChange(next);
+    setOpenId(fresh._id);
+  };
+  const removeRow = rowId => {
+    onChange(rows.filter(r => r._id !== rowId));
+    if (openId === rowId) setOpenId(null);
+  };
+  const updateRow = (rowId, nextRow) => {
+    onChange(rows.map(r => r._id === rowId ? nextRow : r));
+  };
+
+  // Lazy backfill: rows authored before this control existed (or
+  // imported from an export) may lack a stable _id. Patch in an
+  // effect (not during render) so reorders work without warning.
+  useEffect(() => {
+    if (rows.some(r => !r || !r._id)) {
+      onChange(rows.map(r => r && r._id ? r : {
+        ...r,
+        _id: newRowId()
+      }));
+    }
+  }, [rows, onChange]);
+  const normalizedRows = rows.map(r => r && r._id ? r : {
+    ...r,
+    _id: 'pending-' + Math.random()
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: "components-base-control gcb-repeater-control",
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "components-base-control__field",
+      children: [control.label && /*#__PURE__*/_jsx("label", {
+        className: "components-base-control__label",
+        children: control.label
+      }), /*#__PURE__*/_jsx(DndContext, {
+        sensors: sensors,
+        collisionDetection: closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /*#__PURE__*/_jsx(SortableContext, {
+          items: normalizedRows.map(r => r._id),
+          strategy: verticalListSortingStrategy,
+          children: /*#__PURE__*/_jsx("div", {
+            className: "gcb-repeater-rows",
+            children: normalizedRows.map((row, index) => /*#__PURE__*/_jsx(SortableRow, {
+              row: row,
+              index: index,
+              control: control,
+              isOpen: openId === row._id,
+              onToggle: () => setOpenId(openId === row._id ? null : row._id),
+              onUpdate: next => updateRow(row._id, next),
+              onRemove: () => canRemove(index) ? removeRow(row._id) : null,
+              attributes: attributes
+            }, row._id))
+          })
+        })
+      }), canAdd && /*#__PURE__*/_jsx(Button, {
+        variant: "secondary",
+        onClick: addRow,
+        className: "gcb-repeater__add",
+        children: control.addButtonLabel || __('Add item', 'gcblite')
+      })]
+    }), control.helpText && /*#__PURE__*/_jsx("p", {
+      className: "components-base-control__help",
+      children: control.helpText
+    })]
+  });
+}