@measured/puck 0.20.3-canary.d855fa8c → 0.21.0-canary.16a3eee1
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.
- package/dist/{chunk-QIGVND56.mjs → chunk-JZ2BPCUI.mjs} +121 -17
- package/dist/{chunk-OOLYDXKW.mjs → chunk-X7YZ3YE7.mjs} +5 -5
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +162 -58
- package/dist/index.mjs +2 -2
- package/dist/no-external.d.mts +1 -1
- package/dist/no-external.d.ts +1 -1
- package/dist/no-external.js +162 -58
- package/dist/no-external.mjs +2 -2
- package/dist/rsc.d.mts +2 -2
- package/dist/rsc.d.ts +2 -2
- package/dist/rsc.js +5 -5
- package/dist/rsc.mjs +1 -1
- package/dist/{walk-tree-JdJYB16L.d.mts → walk-tree-Ctf3FZQI.d.mts} +1 -0
- package/dist/{walk-tree-JdJYB16L.d.ts → walk-tree-Ctf3FZQI.d.ts} +1 -0
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -153,6 +153,42 @@ var require_classnames = __commonJS({
|
|
|
153
153
|
}
|
|
154
154
|
});
|
|
155
155
|
|
|
156
|
+
// ../../node_modules/fast-deep-equal/index.js
|
|
157
|
+
var require_fast_deep_equal = __commonJS({
|
|
158
|
+
"../../node_modules/fast-deep-equal/index.js"(exports2, module2) {
|
|
159
|
+
"use strict";
|
|
160
|
+
init_react_import();
|
|
161
|
+
module2.exports = function equal(a, b) {
|
|
162
|
+
if (a === b) return true;
|
|
163
|
+
if (a && b && typeof a == "object" && typeof b == "object") {
|
|
164
|
+
if (a.constructor !== b.constructor) return false;
|
|
165
|
+
var length, i, keys;
|
|
166
|
+
if (Array.isArray(a)) {
|
|
167
|
+
length = a.length;
|
|
168
|
+
if (length != b.length) return false;
|
|
169
|
+
for (i = length; i-- !== 0; )
|
|
170
|
+
if (!equal(a[i], b[i])) return false;
|
|
171
|
+
return true;
|
|
172
|
+
}
|
|
173
|
+
if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
|
|
174
|
+
if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
|
|
175
|
+
if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
|
|
176
|
+
keys = Object.keys(a);
|
|
177
|
+
length = keys.length;
|
|
178
|
+
if (length !== Object.keys(b).length) return false;
|
|
179
|
+
for (i = length; i-- !== 0; )
|
|
180
|
+
if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
|
|
181
|
+
for (i = length; i-- !== 0; ) {
|
|
182
|
+
var key = keys[i];
|
|
183
|
+
if (!equal(a[key], b[key])) return false;
|
|
184
|
+
}
|
|
185
|
+
return true;
|
|
186
|
+
}
|
|
187
|
+
return a !== a && b !== b;
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
});
|
|
191
|
+
|
|
156
192
|
// bundle/index.ts
|
|
157
193
|
var bundle_exports = {};
|
|
158
194
|
__export(bundle_exports, {
|
|
@@ -1661,7 +1697,9 @@ var keyCodeMap = {
|
|
|
1661
1697
|
KeyW: "w",
|
|
1662
1698
|
KeyX: "x",
|
|
1663
1699
|
KeyY: "y",
|
|
1664
|
-
KeyZ: "z"
|
|
1700
|
+
KeyZ: "z",
|
|
1701
|
+
Delete: "delete",
|
|
1702
|
+
Backspace: "backspace"
|
|
1665
1703
|
};
|
|
1666
1704
|
var useHotkeyStore = (0, import_zustand.create)()(
|
|
1667
1705
|
(0, import_middleware.subscribeWithSelector)((set) => ({
|
|
@@ -1685,8 +1723,10 @@ var monitorHotkeys = (doc) => {
|
|
|
1685
1723
|
([key2, value]) => value === !!combo[key2]
|
|
1686
1724
|
);
|
|
1687
1725
|
if (conditionMet) {
|
|
1688
|
-
e
|
|
1689
|
-
|
|
1726
|
+
const handled = cb(e);
|
|
1727
|
+
if (handled !== false) {
|
|
1728
|
+
e.preventDefault();
|
|
1729
|
+
}
|
|
1690
1730
|
}
|
|
1691
1731
|
});
|
|
1692
1732
|
if (key !== "meta" && key !== "ctrl" && key !== "shift") {
|
|
@@ -1910,7 +1950,7 @@ var flattenData = (state, config) => {
|
|
|
1910
1950
|
(content) => content,
|
|
1911
1951
|
(item) => {
|
|
1912
1952
|
data.push(item);
|
|
1913
|
-
return
|
|
1953
|
+
return item;
|
|
1914
1954
|
}
|
|
1915
1955
|
);
|
|
1916
1956
|
return data;
|
|
@@ -1918,13 +1958,13 @@ var flattenData = (state, config) => {
|
|
|
1918
1958
|
|
|
1919
1959
|
// lib/get-changed.ts
|
|
1920
1960
|
init_react_import();
|
|
1921
|
-
var
|
|
1961
|
+
var import_fast_equals = require("fast-equals");
|
|
1922
1962
|
var getChanged = (newItem, oldItem) => {
|
|
1923
1963
|
return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
|
|
1924
1964
|
const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
|
|
1925
1965
|
const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
|
|
1926
1966
|
return __spreadProps(__spreadValues({}, acc), {
|
|
1927
|
-
[item]: !(0,
|
|
1967
|
+
[item]: !(0, import_fast_equals.deepEqual)(oldItemProps[item], newItemProps[item])
|
|
1928
1968
|
});
|
|
1929
1969
|
}, {}) : {};
|
|
1930
1970
|
};
|
|
@@ -2079,6 +2119,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
|
2079
2119
|
(reset) => __async(void 0, null, function* () {
|
|
2080
2120
|
var _a, _b;
|
|
2081
2121
|
const { fields, lastResolvedData } = appStore.getState().fields;
|
|
2122
|
+
const metadata = appStore.getState().metadata;
|
|
2082
2123
|
const nodes = appStore.getState().state.indexes.nodes;
|
|
2083
2124
|
const node = nodes[id || "root"];
|
|
2084
2125
|
const componentData = node == null ? void 0 : node.data;
|
|
@@ -2108,6 +2149,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
|
2108
2149
|
changed,
|
|
2109
2150
|
fields: defaultFields2,
|
|
2110
2151
|
lastFields,
|
|
2152
|
+
metadata: __spreadValues(__spreadValues({}, metadata), componentConfig.metadata),
|
|
2111
2153
|
lastData,
|
|
2112
2154
|
appState: makeStatePublic(state),
|
|
2113
2155
|
parent
|
|
@@ -2143,7 +2185,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
|
2143
2185
|
|
|
2144
2186
|
// lib/resolve-component-data.ts
|
|
2145
2187
|
init_react_import();
|
|
2146
|
-
var
|
|
2188
|
+
var import_fast_equals2 = require("fast-equals");
|
|
2147
2189
|
var cache = { lastChange: {} };
|
|
2148
2190
|
var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
|
|
2149
2191
|
const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
|
|
@@ -2152,7 +2194,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
|
|
|
2152
2194
|
const id = "id" in item.props ? item.props.id : "root";
|
|
2153
2195
|
if (shouldRunResolver) {
|
|
2154
2196
|
const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
|
|
2155
|
-
if (trigger !== "force" && item && (0,
|
|
2197
|
+
if (trigger !== "force" && item && (0, import_fast_equals2.deepEqual)(item, oldItem)) {
|
|
2156
2198
|
return { node: resolved, didChange: false };
|
|
2157
2199
|
}
|
|
2158
2200
|
const changed = getChanged(item, oldItem);
|
|
@@ -2202,7 +2244,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
|
|
|
2202
2244
|
};
|
|
2203
2245
|
return {
|
|
2204
2246
|
node: itemWithResolvedChildren,
|
|
2205
|
-
didChange: !(0,
|
|
2247
|
+
didChange: !(0, import_fast_equals2.deepEqual)(item, itemWithResolvedChildren)
|
|
2206
2248
|
};
|
|
2207
2249
|
});
|
|
2208
2250
|
|
|
@@ -7046,7 +7088,7 @@ Drawer.Item = DrawerItem;
|
|
|
7046
7088
|
|
|
7047
7089
|
// components/Puck/index.tsx
|
|
7048
7090
|
init_react_import();
|
|
7049
|
-
var
|
|
7091
|
+
var import_react60 = require("react");
|
|
7050
7092
|
|
|
7051
7093
|
// components/SidebarSection/index.tsx
|
|
7052
7094
|
init_react_import();
|
|
@@ -8584,9 +8626,70 @@ var usePreviewModeHotkeys = () => {
|
|
|
8584
8626
|
useHotkey({ ctrl: true, i: true }, toggleInteractive);
|
|
8585
8627
|
};
|
|
8586
8628
|
|
|
8587
|
-
// lib/use-
|
|
8629
|
+
// lib/use-delete-hotkeys.ts
|
|
8588
8630
|
init_react_import();
|
|
8589
8631
|
var import_react55 = require("react");
|
|
8632
|
+
var isElementVisible = (element) => {
|
|
8633
|
+
let current = element;
|
|
8634
|
+
while (current && current !== document.body) {
|
|
8635
|
+
const style = window.getComputedStyle(current);
|
|
8636
|
+
if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0" || current.getAttribute("aria-hidden") === "true" || current.hasAttribute("hidden")) {
|
|
8637
|
+
return false;
|
|
8638
|
+
}
|
|
8639
|
+
current = current.parentElement;
|
|
8640
|
+
}
|
|
8641
|
+
return true;
|
|
8642
|
+
};
|
|
8643
|
+
var shouldBlockDeleteHotkey = (e) => {
|
|
8644
|
+
var _a;
|
|
8645
|
+
if (e == null ? void 0 : e.defaultPrevented) return true;
|
|
8646
|
+
const origin = ((_a = e == null ? void 0 : e.composedPath) == null ? void 0 : _a.call(e)[0]) || (e == null ? void 0 : e.target) || document.activeElement;
|
|
8647
|
+
if (origin instanceof HTMLElement) {
|
|
8648
|
+
const tag = origin.tagName.toLowerCase();
|
|
8649
|
+
if (tag === "input" || tag === "textarea" || tag === "select") return true;
|
|
8650
|
+
if (origin.isContentEditable) return true;
|
|
8651
|
+
const role = origin.getAttribute("role");
|
|
8652
|
+
if (role === "textbox" || role === "combobox" || role === "searchbox" || role === "listbox" || role === "grid") {
|
|
8653
|
+
return true;
|
|
8654
|
+
}
|
|
8655
|
+
}
|
|
8656
|
+
const modal = document.querySelector(
|
|
8657
|
+
'dialog[open], [aria-modal="true"], [role="dialog"], [role="alertdialog"]'
|
|
8658
|
+
);
|
|
8659
|
+
if (modal && isElementVisible(modal)) {
|
|
8660
|
+
return true;
|
|
8661
|
+
}
|
|
8662
|
+
return false;
|
|
8663
|
+
};
|
|
8664
|
+
var useDeleteHotkeys = () => {
|
|
8665
|
+
const appStore = useAppStoreApi();
|
|
8666
|
+
const deleteSelectedComponent = (0, import_react55.useCallback)(
|
|
8667
|
+
(e) => {
|
|
8668
|
+
var _a;
|
|
8669
|
+
if (shouldBlockDeleteHotkey(e)) {
|
|
8670
|
+
return false;
|
|
8671
|
+
}
|
|
8672
|
+
const { state, dispatch, permissions, selectedItem } = appStore.getState();
|
|
8673
|
+
const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
|
|
8674
|
+
if (!(sel == null ? void 0 : sel.zone) || !selectedItem) return true;
|
|
8675
|
+
if (!permissions.getPermissions({ item: selectedItem }).delete)
|
|
8676
|
+
return true;
|
|
8677
|
+
dispatch({
|
|
8678
|
+
type: "remove",
|
|
8679
|
+
index: sel.index,
|
|
8680
|
+
zone: sel.zone
|
|
8681
|
+
});
|
|
8682
|
+
return true;
|
|
8683
|
+
},
|
|
8684
|
+
[appStore]
|
|
8685
|
+
);
|
|
8686
|
+
useHotkey({ delete: true }, deleteSelectedComponent);
|
|
8687
|
+
useHotkey({ backspace: true }, deleteSelectedComponent);
|
|
8688
|
+
};
|
|
8689
|
+
|
|
8690
|
+
// lib/use-puck.ts
|
|
8691
|
+
init_react_import();
|
|
8692
|
+
var import_react56 = require("react");
|
|
8590
8693
|
var import_zustand6 = require("zustand");
|
|
8591
8694
|
var generateUsePuck = (store) => {
|
|
8592
8695
|
const history = {
|
|
@@ -8613,7 +8716,7 @@ var generateUsePuck = (store) => {
|
|
|
8613
8716
|
};
|
|
8614
8717
|
return storeData;
|
|
8615
8718
|
};
|
|
8616
|
-
var UsePuckStoreContext = (0,
|
|
8719
|
+
var UsePuckStoreContext = (0, import_react56.createContext)(
|
|
8617
8720
|
null
|
|
8618
8721
|
);
|
|
8619
8722
|
var convertToPickedStore = (store) => {
|
|
@@ -8627,12 +8730,12 @@ var convertToPickedStore = (store) => {
|
|
|
8627
8730
|
};
|
|
8628
8731
|
};
|
|
8629
8732
|
var useRegisterUsePuckStore = (appStore) => {
|
|
8630
|
-
const [usePuckStore] = (0,
|
|
8733
|
+
const [usePuckStore] = (0, import_react56.useState)(
|
|
8631
8734
|
() => (0, import_zustand6.createStore)(
|
|
8632
8735
|
() => generateUsePuck(convertToPickedStore(appStore.getState()))
|
|
8633
8736
|
)
|
|
8634
8737
|
);
|
|
8635
|
-
(0,
|
|
8738
|
+
(0, import_react56.useEffect)(() => {
|
|
8636
8739
|
return appStore.subscribe(
|
|
8637
8740
|
(store) => convertToPickedStore(store),
|
|
8638
8741
|
(pickedStore) => {
|
|
@@ -8644,7 +8747,7 @@ var useRegisterUsePuckStore = (appStore) => {
|
|
|
8644
8747
|
};
|
|
8645
8748
|
function createUsePuck() {
|
|
8646
8749
|
return function usePuck2(selector) {
|
|
8647
|
-
const usePuckApi = (0,
|
|
8750
|
+
const usePuckApi = (0, import_react56.useContext)(UsePuckStoreContext);
|
|
8648
8751
|
if (!usePuckApi) {
|
|
8649
8752
|
throw new Error("usePuck must be used inside <Puck>.");
|
|
8650
8753
|
}
|
|
@@ -8656,7 +8759,7 @@ function createUsePuck() {
|
|
|
8656
8759
|
};
|
|
8657
8760
|
}
|
|
8658
8761
|
function usePuck() {
|
|
8659
|
-
(0,
|
|
8762
|
+
(0, import_react56.useEffect)(() => {
|
|
8660
8763
|
console.warn(
|
|
8661
8764
|
"You're using the `usePuck` method without a selector, which may cause unnecessary re-renders. Replace with `createUsePuck` and provide a selector for improved performance."
|
|
8662
8765
|
);
|
|
@@ -8664,7 +8767,7 @@ function usePuck() {
|
|
|
8664
8767
|
return createUsePuck()((s) => s);
|
|
8665
8768
|
}
|
|
8666
8769
|
function useGetPuck() {
|
|
8667
|
-
const usePuckApi = (0,
|
|
8770
|
+
const usePuckApi = (0, import_react56.useContext)(UsePuckStoreContext);
|
|
8668
8771
|
if (!usePuckApi) {
|
|
8669
8772
|
throw new Error("usePuckGet must be used inside <Puck>.");
|
|
8670
8773
|
}
|
|
@@ -8672,11 +8775,11 @@ function useGetPuck() {
|
|
|
8672
8775
|
}
|
|
8673
8776
|
|
|
8674
8777
|
// components/Puck/index.tsx
|
|
8675
|
-
var
|
|
8778
|
+
var import_fast_deep_equal = __toESM(require_fast_deep_equal());
|
|
8676
8779
|
|
|
8677
8780
|
// components/Puck/components/Header/index.tsx
|
|
8678
8781
|
init_react_import();
|
|
8679
|
-
var
|
|
8782
|
+
var import_react57 = require("react");
|
|
8680
8783
|
|
|
8681
8784
|
// components/MenuBar/index.tsx
|
|
8682
8785
|
init_react_import();
|
|
@@ -8758,7 +8861,7 @@ var HeaderInner = () => {
|
|
|
8758
8861
|
} = usePropsContext();
|
|
8759
8862
|
const dispatch = useAppStore((s) => s.dispatch);
|
|
8760
8863
|
const appStore = useAppStoreApi();
|
|
8761
|
-
const defaultHeaderRender = (0,
|
|
8864
|
+
const defaultHeaderRender = (0, import_react57.useMemo)(() => {
|
|
8762
8865
|
if (renderHeader) {
|
|
8763
8866
|
console.warn(
|
|
8764
8867
|
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
|
@@ -8773,7 +8876,7 @@ var HeaderInner = () => {
|
|
|
8773
8876
|
}
|
|
8774
8877
|
return DefaultOverride;
|
|
8775
8878
|
}, [renderHeader]);
|
|
8776
|
-
const defaultHeaderActionsRender = (0,
|
|
8879
|
+
const defaultHeaderActionsRender = (0, import_react57.useMemo)(() => {
|
|
8777
8880
|
if (renderHeaderActions) {
|
|
8778
8881
|
console.warn(
|
|
8779
8882
|
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
|
@@ -8793,7 +8896,7 @@ var HeaderInner = () => {
|
|
|
8793
8896
|
const CustomHeaderActions = useAppStore(
|
|
8794
8897
|
(s) => s.overrides.headerActions || defaultHeaderActionsRender
|
|
8795
8898
|
);
|
|
8796
|
-
const [menuOpen, setMenuOpen] = (0,
|
|
8899
|
+
const [menuOpen, setMenuOpen] = (0, import_react57.useState)(false);
|
|
8797
8900
|
const rootTitle = useAppStore((s) => {
|
|
8798
8901
|
var _a, _b;
|
|
8799
8902
|
const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
|
|
@@ -8803,7 +8906,7 @@ var HeaderInner = () => {
|
|
|
8803
8906
|
const rightSideBarVisible = useAppStore(
|
|
8804
8907
|
(s) => s.state.ui.rightSideBarVisible
|
|
8805
8908
|
);
|
|
8806
|
-
const toggleSidebars = (0,
|
|
8909
|
+
const toggleSidebars = (0, import_react57.useCallback)(
|
|
8807
8910
|
(sidebar) => {
|
|
8808
8911
|
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
|
8809
8912
|
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
|
@@ -8906,14 +9009,14 @@ var HeaderInner = () => {
|
|
|
8906
9009
|
}
|
|
8907
9010
|
);
|
|
8908
9011
|
};
|
|
8909
|
-
var Header = (0,
|
|
9012
|
+
var Header = (0, import_react57.memo)(HeaderInner);
|
|
8910
9013
|
|
|
8911
9014
|
// components/Puck/components/Sidebar/index.tsx
|
|
8912
9015
|
init_react_import();
|
|
8913
9016
|
|
|
8914
9017
|
// components/Puck/components/ResizeHandle/index.tsx
|
|
8915
9018
|
init_react_import();
|
|
8916
|
-
var
|
|
9019
|
+
var import_react58 = require("react");
|
|
8917
9020
|
|
|
8918
9021
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
|
|
8919
9022
|
init_react_import();
|
|
@@ -8930,11 +9033,11 @@ var ResizeHandle = ({
|
|
|
8930
9033
|
}) => {
|
|
8931
9034
|
const { frameRef } = useCanvasFrame();
|
|
8932
9035
|
const resetAutoZoom = useResetAutoZoom(frameRef);
|
|
8933
|
-
const handleRef = (0,
|
|
8934
|
-
const isDragging = (0,
|
|
8935
|
-
const startX = (0,
|
|
8936
|
-
const startWidth = (0,
|
|
8937
|
-
const handleMouseMove = (0,
|
|
9036
|
+
const handleRef = (0, import_react58.useRef)(null);
|
|
9037
|
+
const isDragging = (0, import_react58.useRef)(false);
|
|
9038
|
+
const startX = (0, import_react58.useRef)(0);
|
|
9039
|
+
const startWidth = (0, import_react58.useRef)(0);
|
|
9040
|
+
const handleMouseMove = (0, import_react58.useCallback)(
|
|
8938
9041
|
(e) => {
|
|
8939
9042
|
if (!isDragging.current) return;
|
|
8940
9043
|
const delta = e.clientX - startX.current;
|
|
@@ -8945,7 +9048,7 @@ var ResizeHandle = ({
|
|
|
8945
9048
|
},
|
|
8946
9049
|
[onResize, position]
|
|
8947
9050
|
);
|
|
8948
|
-
const handleMouseUp = (0,
|
|
9051
|
+
const handleMouseUp = (0, import_react58.useCallback)(() => {
|
|
8949
9052
|
var _a;
|
|
8950
9053
|
if (!isDragging.current) return;
|
|
8951
9054
|
isDragging.current = false;
|
|
@@ -8961,7 +9064,7 @@ var ResizeHandle = ({
|
|
|
8961
9064
|
onResizeEnd(finalWidth);
|
|
8962
9065
|
resetAutoZoom();
|
|
8963
9066
|
}, [onResizeEnd]);
|
|
8964
|
-
const handleMouseDown = (0,
|
|
9067
|
+
const handleMouseDown = (0, import_react58.useCallback)(
|
|
8965
9068
|
(e) => {
|
|
8966
9069
|
var _a;
|
|
8967
9070
|
isDragging.current = true;
|
|
@@ -9021,14 +9124,14 @@ var Sidebar = ({
|
|
|
9021
9124
|
|
|
9022
9125
|
// lib/use-sidebar-resize.ts
|
|
9023
9126
|
init_react_import();
|
|
9024
|
-
var
|
|
9127
|
+
var import_react59 = require("react");
|
|
9025
9128
|
function useSidebarResize(position, dispatch) {
|
|
9026
|
-
const [width, setWidth] = (0,
|
|
9027
|
-
const sidebarRef = (0,
|
|
9129
|
+
const [width, setWidth] = (0, import_react59.useState)(null);
|
|
9130
|
+
const sidebarRef = (0, import_react59.useRef)(null);
|
|
9028
9131
|
const storeWidth = useAppStore(
|
|
9029
9132
|
(s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
|
|
9030
9133
|
);
|
|
9031
|
-
(0,
|
|
9134
|
+
(0, import_react59.useEffect)(() => {
|
|
9032
9135
|
if (typeof window !== "undefined" && !storeWidth) {
|
|
9033
9136
|
try {
|
|
9034
9137
|
const savedWidths = localStorage.getItem("puck-sidebar-widths");
|
|
@@ -9053,12 +9156,12 @@ function useSidebarResize(position, dispatch) {
|
|
|
9053
9156
|
}
|
|
9054
9157
|
}
|
|
9055
9158
|
}, [dispatch, position, storeWidth]);
|
|
9056
|
-
(0,
|
|
9159
|
+
(0, import_react59.useEffect)(() => {
|
|
9057
9160
|
if (storeWidth !== void 0) {
|
|
9058
9161
|
setWidth(storeWidth);
|
|
9059
9162
|
}
|
|
9060
9163
|
}, [storeWidth]);
|
|
9061
|
-
const handleResizeEnd = (0,
|
|
9164
|
+
const handleResizeEnd = (0, import_react59.useCallback)(
|
|
9062
9165
|
(width2) => {
|
|
9063
9166
|
dispatch({
|
|
9064
9167
|
type: "setUi",
|
|
@@ -9113,11 +9216,11 @@ var FieldSideBar = () => {
|
|
|
9113
9216
|
);
|
|
9114
9217
|
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Fields, {}) });
|
|
9115
9218
|
};
|
|
9116
|
-
var propsContext = (0,
|
|
9219
|
+
var propsContext = (0, import_react60.createContext)({});
|
|
9117
9220
|
function PropsProvider(props) {
|
|
9118
9221
|
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(propsContext.Provider, { value: props, children: props.children });
|
|
9119
9222
|
}
|
|
9120
|
-
var usePropsContext = () => (0,
|
|
9223
|
+
var usePropsContext = () => (0, import_react60.useContext)(propsContext);
|
|
9121
9224
|
function PuckProvider({ children }) {
|
|
9122
9225
|
const {
|
|
9123
9226
|
config,
|
|
@@ -9134,14 +9237,14 @@ function PuckProvider({ children }) {
|
|
|
9134
9237
|
onAction,
|
|
9135
9238
|
fieldTransforms
|
|
9136
9239
|
} = usePropsContext();
|
|
9137
|
-
const iframe = (0,
|
|
9240
|
+
const iframe = (0, import_react60.useMemo)(
|
|
9138
9241
|
() => __spreadValues({
|
|
9139
9242
|
enabled: true,
|
|
9140
9243
|
waitForStyles: true
|
|
9141
9244
|
}, _iframe),
|
|
9142
9245
|
[_iframe]
|
|
9143
9246
|
);
|
|
9144
|
-
const [generatedAppState] = (0,
|
|
9247
|
+
const [generatedAppState] = (0, import_react60.useState)(() => {
|
|
9145
9248
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
9146
9249
|
const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
|
|
9147
9250
|
let clientUiState = {};
|
|
@@ -9201,7 +9304,7 @@ function PuckProvider({ children }) {
|
|
|
9201
9304
|
return walkAppState(newAppState, config);
|
|
9202
9305
|
});
|
|
9203
9306
|
const { appendData = true } = _initialHistory || {};
|
|
9204
|
-
const [blendedHistories] = (0,
|
|
9307
|
+
const [blendedHistories] = (0, import_react60.useState)(
|
|
9205
9308
|
[
|
|
9206
9309
|
...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
|
|
9207
9310
|
...appendData ? [{ state: generatedAppState }] : []
|
|
@@ -9221,7 +9324,7 @@ function PuckProvider({ children }) {
|
|
|
9221
9324
|
overrides,
|
|
9222
9325
|
plugins
|
|
9223
9326
|
});
|
|
9224
|
-
const loadedFieldTransforms = (0,
|
|
9327
|
+
const loadedFieldTransforms = (0, import_react60.useMemo)(() => {
|
|
9225
9328
|
const _plugins = plugins || [];
|
|
9226
9329
|
const pluginFieldTransforms = _plugins.reduce(
|
|
9227
9330
|
(acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
|
|
@@ -9229,7 +9332,7 @@ function PuckProvider({ children }) {
|
|
|
9229
9332
|
);
|
|
9230
9333
|
return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
|
|
9231
9334
|
}, [fieldTransforms, plugins]);
|
|
9232
|
-
const generateAppStore = (0,
|
|
9335
|
+
const generateAppStore = (0, import_react60.useCallback)(
|
|
9233
9336
|
(state) => {
|
|
9234
9337
|
return {
|
|
9235
9338
|
state,
|
|
@@ -9255,15 +9358,15 @@ function PuckProvider({ children }) {
|
|
|
9255
9358
|
loadedFieldTransforms
|
|
9256
9359
|
]
|
|
9257
9360
|
);
|
|
9258
|
-
const [appStore] = (0,
|
|
9361
|
+
const [appStore] = (0, import_react60.useState)(
|
|
9259
9362
|
() => createAppStore(generateAppStore(initialAppState))
|
|
9260
9363
|
);
|
|
9261
|
-
(0,
|
|
9364
|
+
(0, import_react60.useEffect)(() => {
|
|
9262
9365
|
if (process.env.NODE_ENV !== "production") {
|
|
9263
9366
|
window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
|
|
9264
9367
|
}
|
|
9265
9368
|
}, [appStore]);
|
|
9266
|
-
(0,
|
|
9369
|
+
(0, import_react60.useEffect)(() => {
|
|
9267
9370
|
const state = appStore.getState().state;
|
|
9268
9371
|
appStore.setState(__spreadValues({}, generateAppStore(state)));
|
|
9269
9372
|
}, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
|
|
@@ -9272,13 +9375,13 @@ function PuckProvider({ children }) {
|
|
|
9272
9375
|
index: initialHistoryIndex,
|
|
9273
9376
|
initialAppState
|
|
9274
9377
|
});
|
|
9275
|
-
const previousData = (0,
|
|
9276
|
-
(0,
|
|
9378
|
+
const previousData = (0, import_react60.useRef)(null);
|
|
9379
|
+
(0, import_react60.useEffect)(() => {
|
|
9277
9380
|
appStore.subscribe(
|
|
9278
9381
|
(s) => s.state.data,
|
|
9279
9382
|
(data) => {
|
|
9280
9383
|
if (onChange) {
|
|
9281
|
-
if ((0,
|
|
9384
|
+
if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
|
|
9282
9385
|
onChange(data);
|
|
9283
9386
|
previousData.current = data;
|
|
9284
9387
|
}
|
|
@@ -9287,7 +9390,7 @@ function PuckProvider({ children }) {
|
|
|
9287
9390
|
}, []);
|
|
9288
9391
|
useRegisterPermissionsSlice(appStore, permissions);
|
|
9289
9392
|
const uPuckStore = useRegisterUsePuckStore(appStore);
|
|
9290
|
-
(0,
|
|
9393
|
+
(0, import_react60.useEffect)(() => {
|
|
9291
9394
|
const { resolveAndCommitData } = appStore.getState();
|
|
9292
9395
|
resolveAndCommitData();
|
|
9293
9396
|
}, []);
|
|
@@ -9299,7 +9402,7 @@ function PuckLayout({ children }) {
|
|
|
9299
9402
|
dnd,
|
|
9300
9403
|
initialHistory: _initialHistory
|
|
9301
9404
|
} = usePropsContext();
|
|
9302
|
-
const iframe = (0,
|
|
9405
|
+
const iframe = (0, import_react60.useMemo)(
|
|
9303
9406
|
() => __spreadValues({
|
|
9304
9407
|
enabled: true,
|
|
9305
9408
|
waitForStyles: true
|
|
@@ -9324,7 +9427,7 @@ function PuckLayout({ children }) {
|
|
|
9324
9427
|
sidebarRef: rightSidebarRef,
|
|
9325
9428
|
handleResizeEnd: handleRightSidebarResizeEnd
|
|
9326
9429
|
} = useSidebarResize("right", dispatch);
|
|
9327
|
-
(0,
|
|
9430
|
+
(0, import_react60.useEffect)(() => {
|
|
9328
9431
|
if (!window.matchMedia("(min-width: 638px)").matches) {
|
|
9329
9432
|
dispatch({
|
|
9330
9433
|
type: "setUi",
|
|
@@ -9348,17 +9451,18 @@ function PuckLayout({ children }) {
|
|
|
9348
9451
|
};
|
|
9349
9452
|
}, []);
|
|
9350
9453
|
const overrides = useAppStore((s) => s.overrides);
|
|
9351
|
-
const CustomPuck = (0,
|
|
9454
|
+
const CustomPuck = (0, import_react60.useMemo)(
|
|
9352
9455
|
() => overrides.puck || DefaultOverride,
|
|
9353
9456
|
[overrides]
|
|
9354
9457
|
);
|
|
9355
|
-
const [mounted, setMounted] = (0,
|
|
9356
|
-
(0,
|
|
9458
|
+
const [mounted, setMounted] = (0, import_react60.useState)(false);
|
|
9459
|
+
(0, import_react60.useEffect)(() => {
|
|
9357
9460
|
setMounted(true);
|
|
9358
9461
|
}, []);
|
|
9359
9462
|
const ready = useAppStore((s) => s.status === "READY");
|
|
9360
9463
|
useMonitorHotkeys();
|
|
9361
|
-
(
|
|
9464
|
+
useDeleteHotkeys();
|
|
9465
|
+
(0, import_react60.useEffect)(() => {
|
|
9362
9466
|
if (ready && iframe.enabled) {
|
|
9363
9467
|
const frameDoc = getFrame();
|
|
9364
9468
|
if (frameDoc) {
|
package/dist/index.mjs
CHANGED
|
@@ -18,14 +18,14 @@ import {
|
|
|
18
18
|
setDeep,
|
|
19
19
|
useGetPuck,
|
|
20
20
|
usePuck
|
|
21
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-JZ2BPCUI.mjs";
|
|
22
22
|
import {
|
|
23
23
|
init_react_import,
|
|
24
24
|
migrate,
|
|
25
25
|
resolveAllData,
|
|
26
26
|
transformProps,
|
|
27
27
|
walkTree
|
|
28
|
-
} from "./chunk-
|
|
28
|
+
} from "./chunk-X7YZ3YE7.mjs";
|
|
29
29
|
|
|
30
30
|
// bundle/index.ts
|
|
31
31
|
init_react_import();
|
package/dist/no-external.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-
|
|
1
|
+
export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.mjs';
|
|
2
2
|
export { Action, ActionBar, AutoField, Button, Drawer, DropZone, FieldLabel, Group, IconButton, Label, Puck, PuckApi, Render, UsePuckData, createUsePuck, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck } from './index.mjs';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'react/jsx-runtime';
|
package/dist/no-external.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-
|
|
1
|
+
export { a7 as Adaptor, A as AppState, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, f as ComponentConfig, a as ComponentData, Z as ComponentDataMap, X as ComponentDataOptionalId, C as Config, _ as Content, ab as CustomField, aa as CustomFieldRender, j as Data, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, h as Field, i as FieldProps, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, g as FieldTransforms, F as Fields, H as History, I as IframeConfig, l as InitialHistory, z as ItemWithId, Y as MappedItem, M as Metadata, a1 as NumberField, a6 as ObjectField, k as OnAction, x as OverrideKey, O as Overrides, P as Permissions, d as Plugin, b as PuckAction, G as PuckComponent, ad as PuckContext, a4 as RadioField, c as ResolveDataTrigger, J as RootConfig, T as RootData, R as RootDataWithProps, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, e as UiState, U as UserGenerics, q as Viewport, V as Viewports, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Ctf3FZQI.js';
|
|
2
2
|
export { Action, ActionBar, AutoField, Button, Drawer, DropZone, FieldLabel, Group, IconButton, Label, Puck, PuckApi, Render, UsePuckData, createUsePuck, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck } from './index.js';
|
|
3
3
|
import 'react';
|
|
4
4
|
import 'react/jsx-runtime';
|