@measured/puck 0.21.0-canary.6dae6cb7 → 0.21.0-canary.9c2c8fe9
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-NBNCSA43.mjs → chunk-KNAV6QTS.mjs} +125 -18
- package/dist/{chunk-OOLYDXKW.mjs → chunk-X7YZ3YE7.mjs} +5 -5
- package/dist/index.css +4 -3
- package/dist/index.js +166 -59
- package/dist/index.mjs +2 -2
- package/dist/no-external.css +4 -3
- package/dist/no-external.js +166 -59
- package/dist/no-external.mjs +2 -2
- package/dist/rsc.js +5 -5
- package/dist/rsc.mjs +1 -1
- package/package.json +2 -2
package/dist/no-external.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/no-external.ts
|
|
157
193
|
var no_external_exports = {};
|
|
158
194
|
__export(no_external_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") {
|
|
@@ -1709,6 +1749,10 @@ var monitorHotkeys = (doc) => {
|
|
|
1709
1749
|
useHotkeyStore.getState().reset();
|
|
1710
1750
|
}
|
|
1711
1751
|
};
|
|
1752
|
+
const onBlur = () => {
|
|
1753
|
+
useHotkeyStore.getState().reset();
|
|
1754
|
+
};
|
|
1755
|
+
window.addEventListener("blur", onBlur);
|
|
1712
1756
|
doc.addEventListener("keydown", onKeyDown);
|
|
1713
1757
|
doc.addEventListener("keyup", onKeyUp);
|
|
1714
1758
|
doc.addEventListener("visibilitychange", onVisibilityChanged);
|
|
@@ -1716,6 +1760,7 @@ var monitorHotkeys = (doc) => {
|
|
|
1716
1760
|
doc.removeEventListener("keydown", onKeyDown);
|
|
1717
1761
|
doc.removeEventListener("keyup", onKeyUp);
|
|
1718
1762
|
doc.removeEventListener("visibilitychange", onVisibilityChanged);
|
|
1763
|
+
window.removeEventListener("blur", onBlur);
|
|
1719
1764
|
};
|
|
1720
1765
|
};
|
|
1721
1766
|
var useMonitorHotkeys = () => {
|
|
@@ -1910,7 +1955,7 @@ var flattenData = (state, config) => {
|
|
|
1910
1955
|
(content) => content,
|
|
1911
1956
|
(item) => {
|
|
1912
1957
|
data.push(item);
|
|
1913
|
-
return
|
|
1958
|
+
return item;
|
|
1914
1959
|
}
|
|
1915
1960
|
);
|
|
1916
1961
|
return data;
|
|
@@ -1918,13 +1963,13 @@ var flattenData = (state, config) => {
|
|
|
1918
1963
|
|
|
1919
1964
|
// lib/get-changed.ts
|
|
1920
1965
|
init_react_import();
|
|
1921
|
-
var
|
|
1966
|
+
var import_fast_equals = require("fast-equals");
|
|
1922
1967
|
var getChanged = (newItem, oldItem) => {
|
|
1923
1968
|
return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
|
|
1924
1969
|
const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
|
|
1925
1970
|
const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
|
|
1926
1971
|
return __spreadProps(__spreadValues({}, acc), {
|
|
1927
|
-
[item]: !(0,
|
|
1972
|
+
[item]: !(0, import_fast_equals.deepEqual)(oldItemProps[item], newItemProps[item])
|
|
1928
1973
|
});
|
|
1929
1974
|
}, {}) : {};
|
|
1930
1975
|
};
|
|
@@ -2145,7 +2190,7 @@ var useRegisterFieldsSlice = (appStore, id) => {
|
|
|
2145
2190
|
|
|
2146
2191
|
// lib/resolve-component-data.ts
|
|
2147
2192
|
init_react_import();
|
|
2148
|
-
var
|
|
2193
|
+
var import_fast_equals2 = require("fast-equals");
|
|
2149
2194
|
var cache = { lastChange: {} };
|
|
2150
2195
|
var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
|
|
2151
2196
|
const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
|
|
@@ -2154,7 +2199,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
|
|
|
2154
2199
|
const id = "id" in item.props ? item.props.id : "root";
|
|
2155
2200
|
if (shouldRunResolver) {
|
|
2156
2201
|
const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
|
|
2157
|
-
if (trigger !== "force" && item && (0,
|
|
2202
|
+
if (trigger !== "force" && item && (0, import_fast_equals2.deepEqual)(item, oldItem)) {
|
|
2158
2203
|
return { node: resolved, didChange: false };
|
|
2159
2204
|
}
|
|
2160
2205
|
const changed = getChanged(item, oldItem);
|
|
@@ -2204,7 +2249,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
|
|
|
2204
2249
|
};
|
|
2205
2250
|
return {
|
|
2206
2251
|
node: itemWithResolvedChildren,
|
|
2207
|
-
didChange: !(0,
|
|
2252
|
+
didChange: !(0, import_fast_equals2.deepEqual)(item, itemWithResolvedChildren)
|
|
2208
2253
|
};
|
|
2209
2254
|
});
|
|
2210
2255
|
|
|
@@ -5558,7 +5603,7 @@ var registerOverlayPortal = (el, opts = {}) => {
|
|
|
5558
5603
|
|
|
5559
5604
|
// css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css#css-module
|
|
5560
5605
|
init_react_import();
|
|
5561
|
-
var styles_module_default13 = { "InlineTextField": "
|
|
5606
|
+
var styles_module_default13 = { "InlineTextField": "_InlineTextField_104qp_1" };
|
|
5562
5607
|
|
|
5563
5608
|
// lib/data/set-deep.ts
|
|
5564
5609
|
init_react_import();
|
|
@@ -7048,7 +7093,7 @@ Drawer.Item = DrawerItem;
|
|
|
7048
7093
|
|
|
7049
7094
|
// components/Puck/index.tsx
|
|
7050
7095
|
init_react_import();
|
|
7051
|
-
var
|
|
7096
|
+
var import_react60 = require("react");
|
|
7052
7097
|
|
|
7053
7098
|
// components/SidebarSection/index.tsx
|
|
7054
7099
|
init_react_import();
|
|
@@ -8586,9 +8631,70 @@ var usePreviewModeHotkeys = () => {
|
|
|
8586
8631
|
useHotkey({ ctrl: true, i: true }, toggleInteractive);
|
|
8587
8632
|
};
|
|
8588
8633
|
|
|
8589
|
-
// lib/use-
|
|
8634
|
+
// lib/use-delete-hotkeys.ts
|
|
8590
8635
|
init_react_import();
|
|
8591
8636
|
var import_react55 = require("react");
|
|
8637
|
+
var isElementVisible = (element) => {
|
|
8638
|
+
let current = element;
|
|
8639
|
+
while (current && current !== document.body) {
|
|
8640
|
+
const style = window.getComputedStyle(current);
|
|
8641
|
+
if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0" || current.getAttribute("aria-hidden") === "true" || current.hasAttribute("hidden")) {
|
|
8642
|
+
return false;
|
|
8643
|
+
}
|
|
8644
|
+
current = current.parentElement;
|
|
8645
|
+
}
|
|
8646
|
+
return true;
|
|
8647
|
+
};
|
|
8648
|
+
var shouldBlockDeleteHotkey = (e) => {
|
|
8649
|
+
var _a;
|
|
8650
|
+
if (e == null ? void 0 : e.defaultPrevented) return true;
|
|
8651
|
+
const origin = ((_a = e == null ? void 0 : e.composedPath) == null ? void 0 : _a.call(e)[0]) || (e == null ? void 0 : e.target) || document.activeElement;
|
|
8652
|
+
if (origin instanceof HTMLElement) {
|
|
8653
|
+
const tag = origin.tagName.toLowerCase();
|
|
8654
|
+
if (tag === "input" || tag === "textarea" || tag === "select") return true;
|
|
8655
|
+
if (origin.isContentEditable) return true;
|
|
8656
|
+
const role = origin.getAttribute("role");
|
|
8657
|
+
if (role === "textbox" || role === "combobox" || role === "searchbox" || role === "listbox" || role === "grid") {
|
|
8658
|
+
return true;
|
|
8659
|
+
}
|
|
8660
|
+
}
|
|
8661
|
+
const modal = document.querySelector(
|
|
8662
|
+
'dialog[open], [aria-modal="true"], [role="dialog"], [role="alertdialog"]'
|
|
8663
|
+
);
|
|
8664
|
+
if (modal && isElementVisible(modal)) {
|
|
8665
|
+
return true;
|
|
8666
|
+
}
|
|
8667
|
+
return false;
|
|
8668
|
+
};
|
|
8669
|
+
var useDeleteHotkeys = () => {
|
|
8670
|
+
const appStore = useAppStoreApi();
|
|
8671
|
+
const deleteSelectedComponent = (0, import_react55.useCallback)(
|
|
8672
|
+
(e) => {
|
|
8673
|
+
var _a;
|
|
8674
|
+
if (shouldBlockDeleteHotkey(e)) {
|
|
8675
|
+
return false;
|
|
8676
|
+
}
|
|
8677
|
+
const { state, dispatch, permissions, selectedItem } = appStore.getState();
|
|
8678
|
+
const sel = (_a = state.ui) == null ? void 0 : _a.itemSelector;
|
|
8679
|
+
if (!(sel == null ? void 0 : sel.zone) || !selectedItem) return true;
|
|
8680
|
+
if (!permissions.getPermissions({ item: selectedItem }).delete)
|
|
8681
|
+
return true;
|
|
8682
|
+
dispatch({
|
|
8683
|
+
type: "remove",
|
|
8684
|
+
index: sel.index,
|
|
8685
|
+
zone: sel.zone
|
|
8686
|
+
});
|
|
8687
|
+
return true;
|
|
8688
|
+
},
|
|
8689
|
+
[appStore]
|
|
8690
|
+
);
|
|
8691
|
+
useHotkey({ delete: true }, deleteSelectedComponent);
|
|
8692
|
+
useHotkey({ backspace: true }, deleteSelectedComponent);
|
|
8693
|
+
};
|
|
8694
|
+
|
|
8695
|
+
// lib/use-puck.ts
|
|
8696
|
+
init_react_import();
|
|
8697
|
+
var import_react56 = require("react");
|
|
8592
8698
|
var import_zustand6 = require("zustand");
|
|
8593
8699
|
var generateUsePuck = (store) => {
|
|
8594
8700
|
const history = {
|
|
@@ -8615,7 +8721,7 @@ var generateUsePuck = (store) => {
|
|
|
8615
8721
|
};
|
|
8616
8722
|
return storeData;
|
|
8617
8723
|
};
|
|
8618
|
-
var UsePuckStoreContext = (0,
|
|
8724
|
+
var UsePuckStoreContext = (0, import_react56.createContext)(
|
|
8619
8725
|
null
|
|
8620
8726
|
);
|
|
8621
8727
|
var convertToPickedStore = (store) => {
|
|
@@ -8629,12 +8735,12 @@ var convertToPickedStore = (store) => {
|
|
|
8629
8735
|
};
|
|
8630
8736
|
};
|
|
8631
8737
|
var useRegisterUsePuckStore = (appStore) => {
|
|
8632
|
-
const [usePuckStore] = (0,
|
|
8738
|
+
const [usePuckStore] = (0, import_react56.useState)(
|
|
8633
8739
|
() => (0, import_zustand6.createStore)(
|
|
8634
8740
|
() => generateUsePuck(convertToPickedStore(appStore.getState()))
|
|
8635
8741
|
)
|
|
8636
8742
|
);
|
|
8637
|
-
(0,
|
|
8743
|
+
(0, import_react56.useEffect)(() => {
|
|
8638
8744
|
return appStore.subscribe(
|
|
8639
8745
|
(store) => convertToPickedStore(store),
|
|
8640
8746
|
(pickedStore) => {
|
|
@@ -8646,7 +8752,7 @@ var useRegisterUsePuckStore = (appStore) => {
|
|
|
8646
8752
|
};
|
|
8647
8753
|
function createUsePuck() {
|
|
8648
8754
|
return function usePuck2(selector) {
|
|
8649
|
-
const usePuckApi = (0,
|
|
8755
|
+
const usePuckApi = (0, import_react56.useContext)(UsePuckStoreContext);
|
|
8650
8756
|
if (!usePuckApi) {
|
|
8651
8757
|
throw new Error("usePuck must be used inside <Puck>.");
|
|
8652
8758
|
}
|
|
@@ -8658,7 +8764,7 @@ function createUsePuck() {
|
|
|
8658
8764
|
};
|
|
8659
8765
|
}
|
|
8660
8766
|
function usePuck() {
|
|
8661
|
-
(0,
|
|
8767
|
+
(0, import_react56.useEffect)(() => {
|
|
8662
8768
|
console.warn(
|
|
8663
8769
|
"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."
|
|
8664
8770
|
);
|
|
@@ -8666,7 +8772,7 @@ function usePuck() {
|
|
|
8666
8772
|
return createUsePuck()((s) => s);
|
|
8667
8773
|
}
|
|
8668
8774
|
function useGetPuck() {
|
|
8669
|
-
const usePuckApi = (0,
|
|
8775
|
+
const usePuckApi = (0, import_react56.useContext)(UsePuckStoreContext);
|
|
8670
8776
|
if (!usePuckApi) {
|
|
8671
8777
|
throw new Error("usePuckGet must be used inside <Puck>.");
|
|
8672
8778
|
}
|
|
@@ -8674,11 +8780,11 @@ function useGetPuck() {
|
|
|
8674
8780
|
}
|
|
8675
8781
|
|
|
8676
8782
|
// components/Puck/index.tsx
|
|
8677
|
-
var
|
|
8783
|
+
var import_fast_deep_equal = __toESM(require_fast_deep_equal());
|
|
8678
8784
|
|
|
8679
8785
|
// components/Puck/components/Header/index.tsx
|
|
8680
8786
|
init_react_import();
|
|
8681
|
-
var
|
|
8787
|
+
var import_react57 = require("react");
|
|
8682
8788
|
|
|
8683
8789
|
// components/MenuBar/index.tsx
|
|
8684
8790
|
init_react_import();
|
|
@@ -8760,7 +8866,7 @@ var HeaderInner = () => {
|
|
|
8760
8866
|
} = usePropsContext();
|
|
8761
8867
|
const dispatch = useAppStore((s) => s.dispatch);
|
|
8762
8868
|
const appStore = useAppStoreApi();
|
|
8763
|
-
const defaultHeaderRender = (0,
|
|
8869
|
+
const defaultHeaderRender = (0, import_react57.useMemo)(() => {
|
|
8764
8870
|
if (renderHeader) {
|
|
8765
8871
|
console.warn(
|
|
8766
8872
|
"`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
|
|
@@ -8775,7 +8881,7 @@ var HeaderInner = () => {
|
|
|
8775
8881
|
}
|
|
8776
8882
|
return DefaultOverride;
|
|
8777
8883
|
}, [renderHeader]);
|
|
8778
|
-
const defaultHeaderActionsRender = (0,
|
|
8884
|
+
const defaultHeaderActionsRender = (0, import_react57.useMemo)(() => {
|
|
8779
8885
|
if (renderHeaderActions) {
|
|
8780
8886
|
console.warn(
|
|
8781
8887
|
"`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
|
|
@@ -8795,7 +8901,7 @@ var HeaderInner = () => {
|
|
|
8795
8901
|
const CustomHeaderActions = useAppStore(
|
|
8796
8902
|
(s) => s.overrides.headerActions || defaultHeaderActionsRender
|
|
8797
8903
|
);
|
|
8798
|
-
const [menuOpen, setMenuOpen] = (0,
|
|
8904
|
+
const [menuOpen, setMenuOpen] = (0, import_react57.useState)(false);
|
|
8799
8905
|
const rootTitle = useAppStore((s) => {
|
|
8800
8906
|
var _a, _b;
|
|
8801
8907
|
const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
|
|
@@ -8805,7 +8911,7 @@ var HeaderInner = () => {
|
|
|
8805
8911
|
const rightSideBarVisible = useAppStore(
|
|
8806
8912
|
(s) => s.state.ui.rightSideBarVisible
|
|
8807
8913
|
);
|
|
8808
|
-
const toggleSidebars = (0,
|
|
8914
|
+
const toggleSidebars = (0, import_react57.useCallback)(
|
|
8809
8915
|
(sidebar) => {
|
|
8810
8916
|
const widerViewport = window.matchMedia("(min-width: 638px)").matches;
|
|
8811
8917
|
const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
|
|
@@ -8908,14 +9014,14 @@ var HeaderInner = () => {
|
|
|
8908
9014
|
}
|
|
8909
9015
|
);
|
|
8910
9016
|
};
|
|
8911
|
-
var Header = (0,
|
|
9017
|
+
var Header = (0, import_react57.memo)(HeaderInner);
|
|
8912
9018
|
|
|
8913
9019
|
// components/Puck/components/Sidebar/index.tsx
|
|
8914
9020
|
init_react_import();
|
|
8915
9021
|
|
|
8916
9022
|
// components/Puck/components/ResizeHandle/index.tsx
|
|
8917
9023
|
init_react_import();
|
|
8918
|
-
var
|
|
9024
|
+
var import_react58 = require("react");
|
|
8919
9025
|
|
|
8920
9026
|
// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
|
|
8921
9027
|
init_react_import();
|
|
@@ -8932,11 +9038,11 @@ var ResizeHandle = ({
|
|
|
8932
9038
|
}) => {
|
|
8933
9039
|
const { frameRef } = useCanvasFrame();
|
|
8934
9040
|
const resetAutoZoom = useResetAutoZoom(frameRef);
|
|
8935
|
-
const handleRef = (0,
|
|
8936
|
-
const isDragging = (0,
|
|
8937
|
-
const startX = (0,
|
|
8938
|
-
const startWidth = (0,
|
|
8939
|
-
const handleMouseMove = (0,
|
|
9041
|
+
const handleRef = (0, import_react58.useRef)(null);
|
|
9042
|
+
const isDragging = (0, import_react58.useRef)(false);
|
|
9043
|
+
const startX = (0, import_react58.useRef)(0);
|
|
9044
|
+
const startWidth = (0, import_react58.useRef)(0);
|
|
9045
|
+
const handleMouseMove = (0, import_react58.useCallback)(
|
|
8940
9046
|
(e) => {
|
|
8941
9047
|
if (!isDragging.current) return;
|
|
8942
9048
|
const delta = e.clientX - startX.current;
|
|
@@ -8947,7 +9053,7 @@ var ResizeHandle = ({
|
|
|
8947
9053
|
},
|
|
8948
9054
|
[onResize, position]
|
|
8949
9055
|
);
|
|
8950
|
-
const handleMouseUp = (0,
|
|
9056
|
+
const handleMouseUp = (0, import_react58.useCallback)(() => {
|
|
8951
9057
|
var _a;
|
|
8952
9058
|
if (!isDragging.current) return;
|
|
8953
9059
|
isDragging.current = false;
|
|
@@ -8963,7 +9069,7 @@ var ResizeHandle = ({
|
|
|
8963
9069
|
onResizeEnd(finalWidth);
|
|
8964
9070
|
resetAutoZoom();
|
|
8965
9071
|
}, [onResizeEnd]);
|
|
8966
|
-
const handleMouseDown = (0,
|
|
9072
|
+
const handleMouseDown = (0, import_react58.useCallback)(
|
|
8967
9073
|
(e) => {
|
|
8968
9074
|
var _a;
|
|
8969
9075
|
isDragging.current = true;
|
|
@@ -9023,14 +9129,14 @@ var Sidebar = ({
|
|
|
9023
9129
|
|
|
9024
9130
|
// lib/use-sidebar-resize.ts
|
|
9025
9131
|
init_react_import();
|
|
9026
|
-
var
|
|
9132
|
+
var import_react59 = require("react");
|
|
9027
9133
|
function useSidebarResize(position, dispatch) {
|
|
9028
|
-
const [width, setWidth] = (0,
|
|
9029
|
-
const sidebarRef = (0,
|
|
9134
|
+
const [width, setWidth] = (0, import_react59.useState)(null);
|
|
9135
|
+
const sidebarRef = (0, import_react59.useRef)(null);
|
|
9030
9136
|
const storeWidth = useAppStore(
|
|
9031
9137
|
(s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
|
|
9032
9138
|
);
|
|
9033
|
-
(0,
|
|
9139
|
+
(0, import_react59.useEffect)(() => {
|
|
9034
9140
|
if (typeof window !== "undefined" && !storeWidth) {
|
|
9035
9141
|
try {
|
|
9036
9142
|
const savedWidths = localStorage.getItem("puck-sidebar-widths");
|
|
@@ -9055,12 +9161,12 @@ function useSidebarResize(position, dispatch) {
|
|
|
9055
9161
|
}
|
|
9056
9162
|
}
|
|
9057
9163
|
}, [dispatch, position, storeWidth]);
|
|
9058
|
-
(0,
|
|
9164
|
+
(0, import_react59.useEffect)(() => {
|
|
9059
9165
|
if (storeWidth !== void 0) {
|
|
9060
9166
|
setWidth(storeWidth);
|
|
9061
9167
|
}
|
|
9062
9168
|
}, [storeWidth]);
|
|
9063
|
-
const handleResizeEnd = (0,
|
|
9169
|
+
const handleResizeEnd = (0, import_react59.useCallback)(
|
|
9064
9170
|
(width2) => {
|
|
9065
9171
|
dispatch({
|
|
9066
9172
|
type: "setUi",
|
|
@@ -9115,11 +9221,11 @@ var FieldSideBar = () => {
|
|
|
9115
9221
|
);
|
|
9116
9222
|
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SidebarSection, { noPadding: true, noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Fields, {}) });
|
|
9117
9223
|
};
|
|
9118
|
-
var propsContext = (0,
|
|
9224
|
+
var propsContext = (0, import_react60.createContext)({});
|
|
9119
9225
|
function PropsProvider(props) {
|
|
9120
9226
|
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(propsContext.Provider, { value: props, children: props.children });
|
|
9121
9227
|
}
|
|
9122
|
-
var usePropsContext = () => (0,
|
|
9228
|
+
var usePropsContext = () => (0, import_react60.useContext)(propsContext);
|
|
9123
9229
|
function PuckProvider({ children }) {
|
|
9124
9230
|
const {
|
|
9125
9231
|
config,
|
|
@@ -9136,14 +9242,14 @@ function PuckProvider({ children }) {
|
|
|
9136
9242
|
onAction,
|
|
9137
9243
|
fieldTransforms
|
|
9138
9244
|
} = usePropsContext();
|
|
9139
|
-
const iframe = (0,
|
|
9245
|
+
const iframe = (0, import_react60.useMemo)(
|
|
9140
9246
|
() => __spreadValues({
|
|
9141
9247
|
enabled: true,
|
|
9142
9248
|
waitForStyles: true
|
|
9143
9249
|
}, _iframe),
|
|
9144
9250
|
[_iframe]
|
|
9145
9251
|
);
|
|
9146
|
-
const [generatedAppState] = (0,
|
|
9252
|
+
const [generatedAppState] = (0, import_react60.useState)(() => {
|
|
9147
9253
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i;
|
|
9148
9254
|
const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
|
|
9149
9255
|
let clientUiState = {};
|
|
@@ -9203,7 +9309,7 @@ function PuckProvider({ children }) {
|
|
|
9203
9309
|
return walkAppState(newAppState, config);
|
|
9204
9310
|
});
|
|
9205
9311
|
const { appendData = true } = _initialHistory || {};
|
|
9206
|
-
const [blendedHistories] = (0,
|
|
9312
|
+
const [blendedHistories] = (0, import_react60.useState)(
|
|
9207
9313
|
[
|
|
9208
9314
|
...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
|
|
9209
9315
|
...appendData ? [{ state: generatedAppState }] : []
|
|
@@ -9223,7 +9329,7 @@ function PuckProvider({ children }) {
|
|
|
9223
9329
|
overrides,
|
|
9224
9330
|
plugins
|
|
9225
9331
|
});
|
|
9226
|
-
const loadedFieldTransforms = (0,
|
|
9332
|
+
const loadedFieldTransforms = (0, import_react60.useMemo)(() => {
|
|
9227
9333
|
const _plugins = plugins || [];
|
|
9228
9334
|
const pluginFieldTransforms = _plugins.reduce(
|
|
9229
9335
|
(acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
|
|
@@ -9231,7 +9337,7 @@ function PuckProvider({ children }) {
|
|
|
9231
9337
|
);
|
|
9232
9338
|
return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
|
|
9233
9339
|
}, [fieldTransforms, plugins]);
|
|
9234
|
-
const generateAppStore = (0,
|
|
9340
|
+
const generateAppStore = (0, import_react60.useCallback)(
|
|
9235
9341
|
(state) => {
|
|
9236
9342
|
return {
|
|
9237
9343
|
state,
|
|
@@ -9257,15 +9363,15 @@ function PuckProvider({ children }) {
|
|
|
9257
9363
|
loadedFieldTransforms
|
|
9258
9364
|
]
|
|
9259
9365
|
);
|
|
9260
|
-
const [appStore] = (0,
|
|
9366
|
+
const [appStore] = (0, import_react60.useState)(
|
|
9261
9367
|
() => createAppStore(generateAppStore(initialAppState))
|
|
9262
9368
|
);
|
|
9263
|
-
(0,
|
|
9369
|
+
(0, import_react60.useEffect)(() => {
|
|
9264
9370
|
if (process.env.NODE_ENV !== "production") {
|
|
9265
9371
|
window.__PUCK_INTERNAL_DO_NOT_USE = { appStore };
|
|
9266
9372
|
}
|
|
9267
9373
|
}, [appStore]);
|
|
9268
|
-
(0,
|
|
9374
|
+
(0, import_react60.useEffect)(() => {
|
|
9269
9375
|
const state = appStore.getState().state;
|
|
9270
9376
|
appStore.setState(__spreadValues({}, generateAppStore(state)));
|
|
9271
9377
|
}, [config, plugins, loadedOverrides, viewports, iframe, onAction, metadata]);
|
|
@@ -9274,13 +9380,13 @@ function PuckProvider({ children }) {
|
|
|
9274
9380
|
index: initialHistoryIndex,
|
|
9275
9381
|
initialAppState
|
|
9276
9382
|
});
|
|
9277
|
-
const previousData = (0,
|
|
9278
|
-
(0,
|
|
9383
|
+
const previousData = (0, import_react60.useRef)(null);
|
|
9384
|
+
(0, import_react60.useEffect)(() => {
|
|
9279
9385
|
appStore.subscribe(
|
|
9280
9386
|
(s) => s.state.data,
|
|
9281
9387
|
(data) => {
|
|
9282
9388
|
if (onChange) {
|
|
9283
|
-
if ((0,
|
|
9389
|
+
if ((0, import_fast_deep_equal.default)(data, previousData.current)) return;
|
|
9284
9390
|
onChange(data);
|
|
9285
9391
|
previousData.current = data;
|
|
9286
9392
|
}
|
|
@@ -9289,7 +9395,7 @@ function PuckProvider({ children }) {
|
|
|
9289
9395
|
}, []);
|
|
9290
9396
|
useRegisterPermissionsSlice(appStore, permissions);
|
|
9291
9397
|
const uPuckStore = useRegisterUsePuckStore(appStore);
|
|
9292
|
-
(0,
|
|
9398
|
+
(0, import_react60.useEffect)(() => {
|
|
9293
9399
|
const { resolveAndCommitData } = appStore.getState();
|
|
9294
9400
|
resolveAndCommitData();
|
|
9295
9401
|
}, []);
|
|
@@ -9301,7 +9407,7 @@ function PuckLayout({ children }) {
|
|
|
9301
9407
|
dnd,
|
|
9302
9408
|
initialHistory: _initialHistory
|
|
9303
9409
|
} = usePropsContext();
|
|
9304
|
-
const iframe = (0,
|
|
9410
|
+
const iframe = (0, import_react60.useMemo)(
|
|
9305
9411
|
() => __spreadValues({
|
|
9306
9412
|
enabled: true,
|
|
9307
9413
|
waitForStyles: true
|
|
@@ -9326,7 +9432,7 @@ function PuckLayout({ children }) {
|
|
|
9326
9432
|
sidebarRef: rightSidebarRef,
|
|
9327
9433
|
handleResizeEnd: handleRightSidebarResizeEnd
|
|
9328
9434
|
} = useSidebarResize("right", dispatch);
|
|
9329
|
-
(0,
|
|
9435
|
+
(0, import_react60.useEffect)(() => {
|
|
9330
9436
|
if (!window.matchMedia("(min-width: 638px)").matches) {
|
|
9331
9437
|
dispatch({
|
|
9332
9438
|
type: "setUi",
|
|
@@ -9350,17 +9456,18 @@ function PuckLayout({ children }) {
|
|
|
9350
9456
|
};
|
|
9351
9457
|
}, []);
|
|
9352
9458
|
const overrides = useAppStore((s) => s.overrides);
|
|
9353
|
-
const CustomPuck = (0,
|
|
9459
|
+
const CustomPuck = (0, import_react60.useMemo)(
|
|
9354
9460
|
() => overrides.puck || DefaultOverride,
|
|
9355
9461
|
[overrides]
|
|
9356
9462
|
);
|
|
9357
|
-
const [mounted, setMounted] = (0,
|
|
9358
|
-
(0,
|
|
9463
|
+
const [mounted, setMounted] = (0, import_react60.useState)(false);
|
|
9464
|
+
(0, import_react60.useEffect)(() => {
|
|
9359
9465
|
setMounted(true);
|
|
9360
9466
|
}, []);
|
|
9361
9467
|
const ready = useAppStore((s) => s.status === "READY");
|
|
9362
9468
|
useMonitorHotkeys();
|
|
9363
|
-
(
|
|
9469
|
+
useDeleteHotkeys();
|
|
9470
|
+
(0, import_react60.useEffect)(() => {
|
|
9364
9471
|
if (ready && iframe.enabled) {
|
|
9365
9472
|
const frameDoc = getFrame();
|
|
9366
9473
|
if (frameDoc) {
|
package/dist/no-external.mjs
CHANGED
|
@@ -18,14 +18,14 @@ import {
|
|
|
18
18
|
setDeep,
|
|
19
19
|
useGetPuck,
|
|
20
20
|
usePuck
|
|
21
|
-
} from "./chunk-
|
|
21
|
+
} from "./chunk-KNAV6QTS.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/no-external.ts
|
|
31
31
|
init_react_import();
|
package/dist/rsc.js
CHANGED
|
@@ -460,19 +460,19 @@ function Render({
|
|
|
460
460
|
}
|
|
461
461
|
|
|
462
462
|
// lib/get-changed.ts
|
|
463
|
-
var
|
|
463
|
+
var import_fast_equals = require("fast-equals");
|
|
464
464
|
var getChanged = (newItem, oldItem) => {
|
|
465
465
|
return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
|
|
466
466
|
const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
|
|
467
467
|
const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
|
|
468
468
|
return __spreadProps(__spreadValues({}, acc), {
|
|
469
|
-
[item]: !(0,
|
|
469
|
+
[item]: !(0, import_fast_equals.deepEqual)(oldItemProps[item], newItemProps[item])
|
|
470
470
|
});
|
|
471
471
|
}, {}) : {};
|
|
472
472
|
};
|
|
473
473
|
|
|
474
474
|
// lib/resolve-component-data.ts
|
|
475
|
-
var
|
|
475
|
+
var import_fast_equals2 = require("fast-equals");
|
|
476
476
|
var cache = { lastChange: {} };
|
|
477
477
|
var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
|
|
478
478
|
const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
|
|
@@ -481,7 +481,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
|
|
|
481
481
|
const id = "id" in item.props ? item.props.id : "root";
|
|
482
482
|
if (shouldRunResolver) {
|
|
483
483
|
const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
|
|
484
|
-
if (trigger !== "force" && item && (0,
|
|
484
|
+
if (trigger !== "force" && item && (0, import_fast_equals2.deepEqual)(item, oldItem)) {
|
|
485
485
|
return { node: resolved, didChange: false };
|
|
486
486
|
}
|
|
487
487
|
const changed = getChanged(item, oldItem);
|
|
@@ -531,7 +531,7 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
|
|
|
531
531
|
};
|
|
532
532
|
return {
|
|
533
533
|
node: itemWithResolvedChildren,
|
|
534
|
-
didChange: !(0,
|
|
534
|
+
didChange: !(0, import_fast_equals2.deepEqual)(item, itemWithResolvedChildren)
|
|
535
535
|
};
|
|
536
536
|
});
|
|
537
537
|
|
package/dist/rsc.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@measured/puck",
|
|
3
|
-
"version": "0.21.0-canary.
|
|
3
|
+
"version": "0.21.0-canary.9c2c8fe9",
|
|
4
4
|
"description": "The open-source visual editor for React",
|
|
5
5
|
"author": "Chris Villa <chris@puckeditor.com>",
|
|
6
6
|
"repository": "measuredco/puck",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"@dnd-kit/helpers": "0.1.18",
|
|
97
97
|
"@dnd-kit/react": "0.1.18",
|
|
98
98
|
"deep-diff": "^1.0.2",
|
|
99
|
-
"fast-
|
|
99
|
+
"fast-equals": "5.2.2",
|
|
100
100
|
"flat": "^5.0.2",
|
|
101
101
|
"object-hash": "^3.0.0",
|
|
102
102
|
"react-hotkeys-hook": "^4.6.1",
|