@plaudit/gutenberg-api-extensions 2.60.1 → 2.61.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/build/blocks/SNPListComponent.js +1 -1
  2. package/build/blocks/SNPListComponent.js.map +1 -1
  3. package/build/controls/BaseSortableItemsControl.d.ts +4 -3
  4. package/build/controls/BaseSortableItemsControl.js +18 -62
  5. package/build/controls/BaseSortableItemsControl.js.map +1 -1
  6. package/build/controls/SortableItemsControl.d.ts +3 -2
  7. package/build/controls/SortableItemsControl.js +5 -5
  8. package/build/controls/SortableItemsControl.js.map +1 -1
  9. package/build/controls/hooks/useNonRenderingCounter.js +1 -1
  10. package/build/controls/hooks/useNonRenderingCounter.js.map +1 -1
  11. package/build/controls/hooks/useSortableItemsModel.d.ts +27 -0
  12. package/build/controls/hooks/useSortableItemsModel.js +144 -0
  13. package/build/controls/hooks/useSortableItemsModel.js.map +1 -0
  14. package/package.json +2 -1
  15. package/styles/sortable-items-control.pcss +38 -8
  16. package/build/controls/hooks/useDragHandler.d.ts +0 -8
  17. package/build/controls/hooks/useDragHandler.js +0 -55
  18. package/build/controls/hooks/useDragHandler.js.map +0 -1
package/build/blocks/SNPListComponent.js CHANGED
@@ -10,6 +10,6 @@ export function SNPListComponent({ config, hydratedProperties, value, Label, Mes
10
10
  const childRenderer = useCallback((datum, onDatumChange, index) => {
11
11
  return _jsx(NodeContextWrapper, { nodeName: index, children: hydratedProperties.map(property => _jsx(LaidOutPropertyRow, { property: property })) });
12
12
  }, [hydratedProperties]);
13
- return _jsx(SortableItemsControl, { value: value, min: config.min, max: config.max, Label: Label, Messages: Messages, help: config.help, emptyValue: emptyValue, ...config.component, onAdd: context.addNode, onRemove: context.removeNode, onReorder: onReorder, children: childRenderer });
13
+ return _jsx(SortableItemsControl, { value: value, min: config.min, max: config.max, Label: Label, Messages: Messages, help: config.help, emptyValue: emptyValue, ...config.component, onAdd: context.addNode, onRemove: context.removeNode, onReorder: onReorder, onChange: context.setValue, children: childRenderer });
14
14
  }
15
15
  //# sourceMappingURL=SNPListComponent.js.map
package/build/blocks/SNPListComponent.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SNPListComponent.js","sourceRoot":"","sources":["../../src/blocks/SNPListComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAGxD,OAAO,EAAY,oBAAoB,EAAC,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAC;AASxE,MAAM,UAAU,gBAAgB,CAAC,EAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAwB;IAC3G,MAAM,OAAO,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,QAAgB,EAAE,QAAgB,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACnI,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAgB,EAAE,aAAyC,EAAE,KAAa,EAAE,EAAE;QAChH,OAAO,KAAC,kBAAkB,IAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAC,kBAAkB,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC,GAAI,CAAA;IACzI,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,KAAC,oBAAoB,IAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,KACvH,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,GACxH,CAAC;AACJ,CAAC"}
1
+ {"version":3,"file":"SNPListComponent.js","sourceRoot":"","sources":["../../src/blocks/SNPListComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,oBAAoB,CAAC;AAGxD,OAAO,EAAY,oBAAoB,EAAC,MAAM,aAAa,CAAC;AAC5D,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,kBAAkB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAC;AASxE,MAAM,UAAU,gBAAgB,CAAC,EAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAwB;IAC3G,MAAM,OAAO,GAAG,cAAc,CAAC,kBAAkB,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,QAAgB,EAAE,QAAgB,EAAE,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAC,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACnI,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,UAAU,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IAC/E,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,KAAgB,EAAE,aAAyC,EAAE,KAAa,EAAE,EAAE;QAChH,OAAO,KAAC,kBAAkB,IAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAC,kBAAkB,IAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC,GAAI,CAAA;IACzI,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC,CAAC;IAEzB,OAAO,KAAC,oBAAoB,IAC3B,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,UAAU,EAAE,UAAU,KACvH,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,aAAa,GACpJ,CAAC;AACJ,CAAC"}
package/build/controls/BaseSortableItemsControl.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { BaseControlProps } from "@wordpress/components/build-types/base-control/types";
2
- import { type ReactNode } from "react";
3
2
  import { ProvidedSlot } from "../blocks";
3
+ import { type ReactNode } from "react";
4
4
  export type BaseSortableItemsControlProps<D> = Omit<BaseControlProps, 'children' | 'id'> & {
5
5
  id?: string;
6
6
  value: D[] | undefined;
@@ -10,12 +10,13 @@ export type BaseSortableItemsControlProps<D> = Omit<BaseControlProps, 'children'
10
10
  onReorder?: (oldIndex: number, newIndex: number) => void;
11
11
  children: (datum: D, onDatumChange: (datum: D) => void, index: number) => ReactNode;
12
12
  buttonsArea: (props: {
13
- addHandler: (added: D) => void;
13
+ addHandler: (added: D, index?: number) => void;
14
14
  disabled: boolean;
15
15
  }) => ReactNode;
16
16
  min?: number;
17
17
  max?: number;
18
+ emptyValue?: D;
18
19
  Label?: ProvidedSlot;
19
20
  Messages?: ProvidedSlot;
20
21
  };
21
- export declare function BaseSortableItemsControl<D>({ value, onChange, onRemove, onReorder, onAdd, children: makeChild, min, max, label, Label, Messages, buttonsArea, ...wrapperProps }: BaseSortableItemsControlProps<D>): import("react/jsx-runtime").JSX.Element;
22
+ export declare function BaseSortableItemsControl<D>({ value, onChange, onRemove, onReorder, onAdd, children: makeChild, min, max, label, Label, Messages, buttonsArea, emptyValue, ...wrapperProps }: BaseSortableItemsControlProps<D>): import("react/jsx-runtime").JSX.Element;
package/build/controls/BaseSortableItemsControl.js CHANGED
@@ -1,66 +1,22 @@
1
- import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { BaseControl, Button, Icon, useBaseControlProps } from "@wordpress/components";
3
- import { useCallback, useMemo } from "@wordpress/element";
4
- import { useDragHandler } from "./hooks/useDragHandler";
5
- export function BaseSortableItemsControl({ value = [], onChange, onRemove, onReorder, onAdd, children: makeChild, min, max, label, Label, Messages, buttonsArea, ...wrapperProps }) {
6
- const onChangeByIndex = useCallback((datum, index) => {
7
- const newValue = [...value];
8
- newValue[index] = datum;
9
- onChange?.(newValue);
10
- }, [onChange, value]);
11
- const removeByIndex = useCallback((index) => {
12
- const newValue = value.filter((_, i) => i !== index);
13
- onRemove?.(index);
14
- onChange?.(newValue);
15
- }, [onRemove, onChange, value]);
16
- const transferByIndex = useCallback((oldIndex, newIndex) => {
17
- if (newIndex !== oldIndex) {
18
- const splicedValue = [...value];
19
- if (newIndex > oldIndex) {
20
- splicedValue.splice(newIndex, 0, splicedValue[oldIndex]);
21
- splicedValue.splice(oldIndex, 1);
22
- }
23
- else {
24
- splicedValue.splice(newIndex, 0, ...splicedValue.splice(oldIndex, 1));
25
- }
26
- onReorder?.(oldIndex, newIndex);
27
- const changesStart = Math.min(newIndex, oldIndex);
28
- splicedValue.splice(changesStart, splicedValue.length, ...splicedValue.slice(changesStart).map(v => clone(v)));
29
- onChange?.(splicedValue);
30
- }
31
- }, [onReorder, onChange, value]);
32
- const addHandler = useCallback((added) => {
33
- const newItemIndex = value?.length ?? 0;
34
- const newValue = [...value, added];
35
- onAdd?.(newItemIndex, added);
36
- onChange?.(newValue);
37
- }, [value, onAdd, onChange]);
38
- const { containerRef, dragging, dropZone, mouse, setMouse, setDragging } = useDragHandler(transferByIndex);
39
- const removeDisabled = min !== undefined && value.length <= min;
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { BaseControl, Button, useBaseControlProps } from "@wordpress/components";
3
+ import { useCallback } from "@wordpress/element";
4
+ import { dragHandle, Icon } from "@wordpress/icons";
5
+ import { Reorder, useDragControls } from "framer-motion";
6
+ import { useSortableItemsModel } from "./hooks/useSortableItemsModel";
7
+ export function BaseSortableItemsControl({ value, onChange, onRemove, onReorder, onAdd, children: makeChild, min, max, label, Label, Messages, buttonsArea, emptyValue, ...wrapperProps }) {
8
+ const { add: addHandler, commit, makeIndexedItemActions, keyedValues } = useSortableItemsModel({ onAdd, onChange, onRemove, onReorder, emptyValue, value });
9
+ const listLength = value?.length ?? 0;
10
+ const addDisabled = max !== undefined && listLength >= max;
11
+ const removeDisabled = min !== undefined && listLength <= min;
40
12
  const { baseControlProps, controlProps } = useBaseControlProps({ ...wrapperProps, label: Label ? _jsx(Label, {}) : label });
41
- return _jsxs(BaseControl, { ...baseControlProps, children: [_jsxs("div", { ...controlProps, className: "plaudit-sortable-items-container", ref: containerRef, children: [...value.map((datum, index) => _jsx(SortableItemsListNode, { datum: datum, dragging: dragging, dropZone: dropZone, index: index, makeChild: makeChild, mouse: mouse, onChangeByIndex: onChangeByIndex, removeByIndex: removeByIndex, removeDisabled: removeDisabled, setDragging: setDragging, setMouse: setMouse })), _jsx(SortableItemsDropZone, { position: value.length, dragging: dragging, dropZone: dropZone })] }), buttonsArea({ addHandler, disabled: max !== undefined && value.length >= max }), Messages && _jsx(Messages, {})] });
13
+ return _jsxs(BaseControl, { ...baseControlProps, children: [_jsx("div", { ...controlProps, className: "plaudit-sortable-items-container", children: _jsx(Reorder.Group, { axis: "y", onReorder: commit, values: keyedValues, children: keyedValues.map((datum, index) => _jsx(SortableItemsListNode, { addDisabled: addDisabled, datum: datum, index: index, listLength: listLength, makeChild: makeChild, makeIndexedItemActions: makeIndexedItemActions, removeDisabled: removeDisabled }, datum[1])) }) }), buttonsArea({ addHandler, disabled: addDisabled }), Messages && _jsx(Messages, {})] });
42
14
  }
43
- function SortableItemsListNode({ datum, dragging, dropZone, index, makeChild, mouse, onChangeByIndex, removeByIndex, removeDisabled, setDragging, setMouse }) {
44
- const dragHandleMouseDownHandler = useCallback((e) => {
45
- e.preventDefault();
46
- setDragging(index);
47
- setMouse([e.nativeEvent.x, e.nativeEvent.y]);
48
- }, [index, setDragging, setMouse]);
49
- const removeClickHandler = useCallback(() => removeByIndex(index), [index, removeByIndex]);
50
- const safeOnChangeListener = useCallback((newDatum) => onChangeByIndex(newDatum, index), [index, onChangeByIndex]);
51
- const style = useMemo(() => dragging === index ? { top: `${mouse[1]}px`, left: `${mouse[0]}px` } : undefined, [dragging, index, mouse]);
52
- return _jsxs(_Fragment, { children: [_jsx(SortableItemsDropZone, { position: index, dragging: dragging, dropZone: dropZone }), _jsxs("div", { className: `plaudit-sortable-items-row${dragging === index ? " floating" : ""}`, "data-index": index, style: style, children: [_jsx("div", { className: "plaudit-sortable-items-drag-handle", onMouseDown: dragHandleMouseDownHandler, children: _jsx(Icon, { icon: "move" }) }), _jsx("div", { children: makeChild(datum, safeOnChangeListener, index) }), _jsx("div", { className: "plaudit-sortable-items-controls", children: _jsx(Button, { icon: "remove", disabled: removeDisabled, onClick: removeClickHandler, "aria-label": "Remove" }) })] })] });
53
- }
54
- function SortableItemsDropZone(props) {
55
- return _jsx("div", { "data-position": props.position, className: `drop-zone${props.dragging === null || props.position !== props.dropZone ? " plaudit-sortable-items-hidden" : ""}${props.position - 1 === props.dragging ? " dragging" : ""}` });
56
- }
57
- function clone(value) {
58
- if (value === null || value === undefined) {
59
- return value;
60
- }
61
- else if (Array.isArray(value)) {
62
- return value.map(v => clone(v));
63
- }
64
- return typeof value === 'object' ? Object.fromEntries(Object.entries(value).map(([k, v]) => [k, clone(v)])) : value;
15
+ function SortableItemsListNode({ datum, index, listLength, makeChild, makeIndexedItemActions, removeDisabled }) {
16
+ const { remove, moveUp, moveDown, change } = makeIndexedItemActions(index);
17
+ //TODO: If used, implement addBefore and addAfter the same way as moveUp and moveDown
18
+ const dragControls = useDragControls();
19
+ const dragStartHandler = useCallback((event) => dragControls.start(event), [dragControls]);
20
+ return _jsxs(Reorder.Item, { className: "plaudit-sortable-items-row", "data-index": index, dragListener: false, dragControls: dragControls, layout: "position", value: datum, children: [_jsxs("div", { className: "plaudit-sortable-items-ordering-controls", children: [_jsx("div", { className: "plaudit-sortable-items-ordering-control", children: _jsx(Icon, { icon: dragHandle, onPointerDown: dragStartHandler }) }), _jsxs("div", { className: "plaudit-sortable-items-ordering-control", children: [_jsx(Button, { icon: "arrow-up", "aria-label": "Move Up", disabled: index < 1, onClick: moveUp }), _jsx(Button, { icon: "arrow-down", "aria-label": "Move Down", disabled: index >= listLength - 1, onClick: moveDown })] })] }), _jsx("div", { className: "plaudit-sortable-items-inputs plaudit-sortable-items-padded", children: makeChild(datum[0], change, index) }), _jsx("div", { className: "plaudit-sortable-items-presence-controls plaudit-sortable-items-padded", children: _jsx(Button, { icon: "remove", disabled: removeDisabled, onClick: remove, "aria-label": "Remove" }) })] });
65
21
  }
66
22
  //# sourceMappingURL=BaseSortableItemsControl.js.map
package/build/controls/BaseSortableItemsControl.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseSortableItemsControl.js","sourceRoot":"","sources":["../../src/controls/BaseSortableItemsControl.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"BaseSortableItemsControl.js","sourceRoot":"","sources":["../../src/controls/BaseSortableItemsControl.tsx"],"names":[],"mappings":"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"}
package/build/controls/SortableItemsControl.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { type BaseSortableItemsControlProps } from "./BaseSortableItemsControl";
2
- export type SortableItemsControlProps<D> = Omit<BaseSortableItemsControlProps<D>, 'buttonsArea'> & {
2
+ export type SortableItemsControlProps<D> = Omit<BaseSortableItemsControlProps<D>, 'buttonsArea' | 'emptyValue'> & {
3
3
  emptyValue: D;
4
+ addRowText?: string;
4
5
  };
5
- export declare function SortableItemsControl<D>({ emptyValue, ...baseProps }: SortableItemsControlProps<D>): import("react/jsx-runtime").JSX.Element;
6
+ export declare function SortableItemsControl<D>({ emptyValue, addRowText, ...baseProps }: SortableItemsControlProps<D>): import("react/jsx-runtime").JSX.Element;
package/build/controls/SortableItemsControl.js CHANGED
@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Button } from "@wordpress/components";
3
3
  import { useCallback } from "@wordpress/element";
4
4
  import { BaseSortableItemsControl } from "./BaseSortableItemsControl";
5
- export function SortableItemsControl({ emptyValue, ...baseProps }) {
6
- const buttonsArea = useCallback(args => _jsx(ButtonsArea, { ...args, emptyValue: emptyValue }), [emptyValue]);
7
- return _jsx(BaseSortableItemsControl, { ...baseProps, buttonsArea: buttonsArea });
5
+ export function SortableItemsControl({ emptyValue, addRowText, ...baseProps }) {
6
+ const buttonsArea = useCallback(args => _jsx(ButtonsArea, { ...args, emptyValue: emptyValue, addRowText: addRowText }), [emptyValue, addRowText]);
7
+ return _jsx(BaseSortableItemsControl, { ...baseProps, buttonsArea: buttonsArea, emptyValue: emptyValue });
8
8
  }
9
- function ButtonsArea({ addHandler, disabled, emptyValue }) {
10
- return _jsx("div", { className: "plaudit-sortable-items-buttons", children: _jsx(Button, { icon: "insert", disabled: disabled, onClick: () => addHandler(typeof emptyValue === 'object' ? { ...emptyValue } : emptyValue), children: "Add Row" }) });
9
+ function ButtonsArea({ addHandler, disabled, emptyValue, addRowText }) {
10
+ return _jsx("div", { className: "plaudit-sortable-items-buttons", children: _jsx(Button, { icon: "insert", disabled: disabled, onClick: () => addHandler(typeof emptyValue === 'object' ? { ...emptyValue } : emptyValue), children: addRowText ?? "Add Row" }) });
11
11
  }
12
12
  //# sourceMappingURL=SortableItemsControl.js.map
package/build/controls/SortableItemsControl.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SortableItemsControl.js","sourceRoot":"","sources":["../../src/controls/SortableItemsControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAC,wBAAwB,EAAqC,MAAM,4BAA4B,CAAC;AAKxG,MAAM,UAAU,oBAAoB,CAAI,EAAC,UAAU,EAAE,GAAG,SAAS,EAA+B;IAC/F,MAAM,WAAW,GAAG,WAAW,CAC9B,IAAI,CAAC,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,EAAE,UAAU,EAAE,UAAU,GAAI,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAC1E,OAAO,KAAC,wBAAwB,OAAK,SAAS,EAAE,WAAW,EAAE,WAAW,GAAI,CAAC;AAC9E,CAAC;AAGD,SAAS,WAAW,CAAI,EAAC,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAsB;IAC9E,OAAO,cAAK,SAAS,EAAC,gCAAgC,YACrD,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAC,GAAG,UAAU,EAAC,CAAC,CAAC,CAAC,UAAU,CAAC,wBAAkB,GAC/I,CAAA;AACP,CAAC"}
1
+ {"version":3,"file":"SortableItemsControl.js","sourceRoot":"","sources":["../../src/controls/SortableItemsControl.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAC,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAE/C,OAAO,EAAC,wBAAwB,EAAqC,MAAM,4BAA4B,CAAC;AAKxG,MAAM,UAAU,oBAAoB,CAAI,EAAC,UAAU,EAAE,UAAU,EAAE,GAAG,SAAS,EAA+B;IAC3G,MAAM,WAAW,GAAG,WAAW,CAC9B,IAAI,CAAC,EAAE,CAAC,KAAC,WAAW,OAAK,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,GAAI,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC,CAAC,CAAC;IAC9G,OAAO,KAAC,wBAAwB,OAAK,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,GAAI,CAAC;AACtG,CAAC;AAGD,SAAS,WAAW,CAAI,EAAC,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAsB;IAC1F,OAAO,cAAK,SAAS,EAAC,gCAAgC,YACrD,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAC,GAAG,UAAU,EAAC,CAAC,CAAC,CAAC,UAAU,CAAC,YAAG,UAAU,IAAI,SAAS,GAAU,GACjK,CAAA;AACP,CAAC"}
package/build/controls/hooks/useNonRenderingCounter.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useRef } from "@wordpress/element";
2
2
  export function useNonRenderingCounter(initialValue = 0) {
3
- let count = useRef(initialValue);
3
+ const count = useRef(initialValue);
4
4
  return [count, () => ++count.current];
5
5
  }
6
6
  //# sourceMappingURL=useNonRenderingCounter.js.map
package/build/controls/hooks/useNonRenderingCounter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useNonRenderingCounter.js","sourceRoot":"","sources":["../../../src/controls/hooks/useNonRenderingCounter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAE1C,MAAM,UAAU,sBAAsB,CAAC,YAAY,GAAG,CAAC;IACtD,IAAI,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACjC,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;AACvC,CAAC"}
1
+ {"version":3,"file":"useNonRenderingCounter.js","sourceRoot":"","sources":["../../../src/controls/hooks/useNonRenderingCounter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAE1C,MAAM,UAAU,sBAAsB,CAAC,YAAY,GAAG,CAAC;IACtD,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACnC,OAAO,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;AACvC,CAAC"}
package/build/controls/hooks/useSortableItemsModel.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ type Listeners<D> = {
2
+ onAdd?: (index: number, value: D) => void;
3
+ onChange?: (value: D[]) => void;
4
+ onRemove?: (index: number) => void;
5
+ onReorder?: (oldIndex: number, newIndex: number) => void;
6
+ };
7
+ type SortableItemsModelArgs<D> = Listeners<D> & {
8
+ emptyValue?: D;
9
+ value?: D[];
10
+ };
11
+ export declare function useSortableItemsModel<D>({ onAdd, onChange, onRemove, onReorder, emptyValue, value }: SortableItemsModelArgs<D>): {
12
+ keyedValues: [D, number][];
13
+ makeIndexedItemActions(index: number): {
14
+ add: (value: D) => void;
15
+ remove: () => void;
16
+ moveUp: () => void;
17
+ moveDown: () => void;
18
+ change: (value: D) => void;
19
+ };
20
+ add: (value: D, index?: number) => void;
21
+ addEmptyValue: ((index?: number) => void) | undefined;
22
+ remove: (index: number) => void;
23
+ move: (oldIndex: number, newIndex: number) => void;
24
+ change: (value: D, index: number) => void;
25
+ commit: (keyedValues: [D, number][]) => void;
26
+ };
27
+ export {};
package/build/controls/hooks/useSortableItemsModel.js ADDED
@@ -0,0 +1,144 @@
1
+ import { useEffect, useMemo, useReducer } from "@wordpress/element";
2
+ import { produce, setAutoFreeze } from "immer";
3
+ setAutoFreeze(false);
4
+ export function useSortableItemsModel({ onAdd, onChange, onRemove, onReorder, emptyValue, value }) {
5
+ const [state, dispatch] = useReducer((prevState, action) => {
6
+ switch (action.type) {
7
+ case "add":
8
+ return produce(prevState, (draft) => {
9
+ const newItemIndex = action.index ?? prevState.value?.length ?? 0;
10
+ const newValue = prevState.value?.toSpliced(newItemIndex, 0, action.value) ?? [action.value];
11
+ draft.value = newValue;
12
+ draft.keyedValues.push([action.value, draft.nextItemKey++]);
13
+ onAdd?.(newItemIndex, action.value);
14
+ onChange?.(newValue);
15
+ });
16
+ case "remove":
17
+ return produce(prevState, (draft) => {
18
+ const newValue = prevState.value?.toSpliced(action.index, 1) ?? [];
19
+ draft.value = newValue;
20
+ draft.keyedValues = draft.keyedValues.toSpliced(action.index, 1);
21
+ onRemove?.(action.index);
22
+ onChange?.(newValue);
23
+ });
24
+ case "move":
25
+ return produce(prevState, (draft) => {
26
+ const { newIndex, oldIndex } = action;
27
+ if (newIndex !== oldIndex) {
28
+ const newValue = swap(prevState.value ?? [], newIndex, oldIndex);
29
+ const changesStart = Math.min(newIndex, oldIndex);
30
+ newValue.splice(changesStart, newValue.length, ...newValue.slice(changesStart).map(v => clone(v)));
31
+ draft.value = newValue;
32
+ draft.keyedValues = swap(prevState.keyedValues, newIndex, oldIndex).map(([_, k], i) => [newValue[i], k]);
33
+ onReorder?.(oldIndex, newIndex);
34
+ onChange?.(newValue);
35
+ }
36
+ });
37
+ case "change":
38
+ return produce(prevState, (draft) => {
39
+ const newValue = (prevState.value ?? []).toSpliced(action.index, 1, action.value);
40
+ draft.value = newValue;
41
+ draft.keyedValues = prevState.keyedValues.map((v, i) => i === action.index ? [action.value, v[1]] : v);
42
+ onChange?.(newValue);
43
+ });
44
+ case "commit":
45
+ return produce(prevState, (draft) => {
46
+ const newValue = action.keyedValues.map(([v]) => v);
47
+ draft.keyedValues = action.keyedValues;
48
+ draft.value = newValue;
49
+ onChange?.(newValue);
50
+ });
51
+ case "refresh":
52
+ const nextState = produce(prevState, (draft) => {
53
+ for (const [key, value] of Object.entries(action.listeners)) {
54
+ draft.listeners[key] = value;
55
+ }
56
+ if (prevState.value !== action.value) {
57
+ draft.value = action.value;
58
+ if (action.value !== undefined && action.value.length !== prevState.keyedValues.length) {
59
+ draft.keyedValues = action.value.map((v, i) => [v,
60
+ prevState.keyedValues[i] !== undefined && prevState.keyedValues[i][0] === v ? prevState.keyedValues[i][1] : draft.nextItemKey++]);
61
+ }
62
+ }
63
+ });
64
+ if (prevState.value !== action.value && action.value !== undefined && action.value.length === prevState.keyedValues.length) {
65
+ for (let i = 0; i < action.value.length; i++) {
66
+ nextState.keyedValues[i][0] = action.value[i];
67
+ }
68
+ }
69
+ return nextState;
70
+ default: // WordPress likes hammering redux stores with invalid actions for some reason, so we have to have this
71
+ return prevState;
72
+ }
73
+ }, { keyedValues: [], listeners: {}, nextItemKey: 0 });
74
+ useEffect(() => {
75
+ dispatch({ type: "refresh", listeners: { onAdd, onChange, onRemove, onReorder }, value });
76
+ }, [value, onAdd, onChange, onRemove, onReorder, dispatch]);
77
+ // We use a separate memo for the actions because dispatch should change significantly less-often than state
78
+ const actions = useMemo(() => {
79
+ const outer = {
80
+ add: (value, index) => {
81
+ dispatch({ type: "add", value, index });
82
+ },
83
+ addEmptyValue: emptyValue !== undefined && emptyValue !== null ? (index) => {
84
+ outer.add(typeof emptyValue === 'object' ? { ...emptyValue } : emptyValue, index);
85
+ } : undefined,
86
+ remove: (index) => {
87
+ dispatch({ type: "remove", index });
88
+ },
89
+ move: (oldIndex, newIndex) => {
90
+ dispatch({ type: "move", oldIndex, newIndex });
91
+ },
92
+ change: (value, index) => {
93
+ dispatch({ type: "change", value, index });
94
+ },
95
+ commit: (keyedValues) => {
96
+ dispatch({ type: "commit", keyedValues });
97
+ }
98
+ };
99
+ return ({
100
+ ...outer,
101
+ makeIndexedItemActions(index) {
102
+ return useMemo(() => ({
103
+ add: (value) => {
104
+ return outer.add(value);
105
+ },
106
+ remove: () => {
107
+ return outer.remove(index);
108
+ },
109
+ moveUp: () => {
110
+ return outer.move(index, index - 1);
111
+ },
112
+ moveDown: () => {
113
+ return outer.move(index, index + 1);
114
+ },
115
+ change: (value) => {
116
+ return outer.change(value, index);
117
+ }
118
+ }), [index, dispatch]);
119
+ }
120
+ });
121
+ }, [dispatch, emptyValue]);
122
+ return { ...actions, keyedValues: state.keyedValues };
123
+ }
124
+ function swap(value, newIndex, oldIndex) {
125
+ const splicedValue = [...value];
126
+ if (newIndex > oldIndex) {
127
+ splicedValue.splice(newIndex + 1, 0, splicedValue[oldIndex]);
128
+ splicedValue.splice(oldIndex, 1);
129
+ }
130
+ else {
131
+ splicedValue.splice(newIndex, 0, ...splicedValue.splice(oldIndex, 1));
132
+ }
133
+ return splicedValue;
134
+ }
135
+ function clone(value) {
136
+ if (value === null || value === undefined) {
137
+ return value;
138
+ }
139
+ else if (Array.isArray(value)) {
140
+ return value.map(v => clone(v));
141
+ }
142
+ return typeof value === 'object' ? Object.fromEntries(Object.entries(value).map(([k, v]) => [k, clone(v)])) : value;
143
+ }
144
+ //# sourceMappingURL=useSortableItemsModel.js.map
package/build/controls/hooks/useSortableItemsModel.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useSortableItemsModel.js","sourceRoot":"","sources":["../../../src/controls/hooks/useSortableItemsModel.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@plaudit/gutenberg-api-extensions",
3
- "version": "2.60.1",
3
+ "version": "2.61.1",
4
4
  "license": "UNLICENSED",
5
5
  "scripts": {
6
6
  "prepublishOnly": "rm -rf build && mkdir build && tsc",
@@ -45,6 +45,7 @@
45
45
  "@wordpress/hooks": "^4.8.2",
46
46
  "@wordpress/i18n": "^5.8.2",
47
47
  "@wordpress/icons": "^10.8.2",
48
+ "framer-motion": "^11.18.2",
48
49
  "html-react-parser": "^5.2.2",
49
50
  "immer": "^9.0.21",
50
51
  "react": "^18.3.1",
package/styles/sortable-items-control.pcss CHANGED
@@ -25,17 +25,47 @@
25
25
  grid-template-areas: "HANDLE FIELD CONTROL";
26
26
  grid-template-columns: auto 1fr auto;
27
27
  border: 1px solid #ccc;
28
- padding-block-start: 8px;
28
+ background: #fff;
29
29
  }
30
- .plaudit-sortable-items-container .plaudit-sortable-items-drag-handle {
31
- padding: 0 6px;
32
- display: grid;
33
- place-content: center;
34
- line-height: 1;
35
- margin-bottom: 8px;
30
+ .plaudit-sortable-items-container .plaudit-sortable-items-ordering-controls {
31
+ display: flex;
32
+ flex-direction: row;
33
+ gap: 0;
34
+ padding-right: 6px;
35
+
36
+ .plaudit-sortable-items-ordering-control {
37
+ display: grid;
38
+ place-content: center;
39
+ line-height: 1;
40
+
41
+ .components-button {
42
+ height: 16px;
43
+ min-width: 16px;
44
+ padding: 0;
45
+
46
+ span.dashIcon {
47
+ padding: 0;
48
+ width: 16px;
49
+ }
50
+ }
51
+ }
36
52
  }
37
- .plaudit-sortable-items-container .plaudit-sortable-items-controls {
53
+ .plaudit-sortable-items-container .plaudit-sortable-items-presence-controls {
54
+ display: flex;
55
+ flex-direction: column;
38
56
  margin-top: -4px;
57
+
58
+ button[aria-label="Insert After"] {
59
+ position: absolute;
60
+ top: 100%;
61
+ left: 50%;
62
+ width: 30px;
63
+ height: 30px;
64
+ transform: translate(-50%, -50%);
65
+ }
66
+ }
67
+ .plaudit-sortable-items-container .plaudit-sortable-items-padded {
68
+ padding-block-start: 8px;
39
69
  }
40
70
 
41
71
  .plaudit-sortable-items-buttons.flexible-items {
package/build/controls/hooks/useDragHandler.d.ts DELETED
@@ -1,8 +0,0 @@
1
- export declare function useDragHandler(transferByIndex: (oldIndex: number, newIndex: number) => void): {
2
- containerRef: import("react").MutableRefObject<HTMLDivElement | null>;
3
- dragging: number | null;
4
- dropZone: number | null;
5
- mouse: [number, number];
6
- setMouse: import("react").Dispatch<[number, number]>;
7
- setDragging: import("react").Dispatch<import("react").SetStateAction<number | null>>;
8
- };
package/build/controls/hooks/useDragHandler.js DELETED
@@ -1,55 +0,0 @@
1
- import { useEffect, useRef, useState } from "@wordpress/element";
2
- import { useReducer } from "react";
3
- export function useDragHandler(transferByIndex) {
4
- const containerRef = useRef(null);
5
- const [dragging, setDragging] = useState(null);
6
- const [dropZone, setDropZone] = useState(null);
7
- const [mouse, setMouse] = useReducer((pairUpdateMinimizer), [0, 0]);
8
- useEffect(() => {
9
- if (dragging !== null) {
10
- const handler = (event) => setMouse([event.x, event.y]);
11
- document.addEventListener('mousemove', handler);
12
- return () => document.removeEventListener('mousemove', handler);
13
- }
14
- return () => { };
15
- }, [dragging]);
16
- useEffect(() => {
17
- if (dragging !== null && containerRef.current) {
18
- const result = Array.from(containerRef.current.querySelectorAll(".drop-zone"))
19
- .map(e => [parseInt(e.getAttribute("data-position")), Math.abs(e.getBoundingClientRect().y - mouse[1]), e])
20
- .reduce((a, b) => {
21
- if (a[2].classList.contains("dragging")) {
22
- return b;
23
- }
24
- else if (b[2].classList.contains("dragging")) {
25
- return a;
26
- }
27
- else if (b[1] < a[1]) {
28
- return b;
29
- }
30
- return a;
31
- })[0];
32
- setDropZone(result);
33
- }
34
- }, [containerRef, dragging, mouse]);
35
- useEffect(() => {
36
- if (dragging === null) {
37
- return () => { };
38
- }
39
- const handler = (e) => {
40
- e.preventDefault();
41
- if (dropZone !== null) {
42
- transferByIndex(dragging, dropZone);
43
- }
44
- setDragging(null);
45
- setDropZone(null);
46
- };
47
- document.addEventListener('mouseup', handler);
48
- return () => document.removeEventListener('mouseup', handler);
49
- }, [dragging, dropZone, transferByIndex]);
50
- return { containerRef, dragging, dropZone, mouse, setMouse, setDragging };
51
- }
52
- function pairUpdateMinimizer(current, next) {
53
- return current[0] !== next[0] || current[1] !== next[1] ? next : current;
54
- }
55
- //# sourceMappingURL=useDragHandler.js.map
package/build/controls/hooks/useDragHandler.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"useDragHandler.js","sourceRoot":"","sources":["../../../src/controls/hooks/useDragHandler.ts"],"names":[],"mappings":"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"}