@blockbite/ui 1.0.5 → 2.0.0

package/dist/node_modules/@wordpress/block-editor/build-module/components/grid/grid-item-movers.js

@@ -0,0 +1,113 @@
+import { clsx as B } from "../../../../../clsx/dist/clsx.js";
+import "../../../../i18n/build-module/sprintf.js";
+import "../../../../../tannin/index.js";
+import { __ as n, isRTL as x } from "../../../../i18n/build-module/default-i18n.js";
+import { ToolbarGroup as D, ToolbarButton as $, VisuallyHidden as G } from "@wordpress/components";
+import T from "../block-controls/index.js";
+import { useGetNumberOfBlocksBeforeCell as g } from "./use-get-number-of-blocks-before-cell.js";
+import { store as E } from "../../store/index.js";
+import { j as o } from "../../../../../react/jsx-runtime.js";
+import R from "../../../../data/build-module/components/use-dispatch/use-dispatch.js";
+import S from "../../../../icons/build-module/library/chevron-right.js";
+import w from "../../../../icons/build-module/library/chevron-left.js";
+import y from "../../../../icons/build-module/library/chevron-up.js";
+import z from "../../../../icons/build-module/library/chevron-down.js";
+import O from "../../../../compose/build-module/hooks/use-instance-id/index.js";
+function C({
+  layout: i,
+  parentLayout: u,
+  onChange: s,
+  gridClientId: t,
+  blockClientId: c
+}) {
+  var m, p, l, f;
+  const {
+    moveBlocksToPosition: d,
+    __unstableMarkNextChangeAsNotPersistent: v
+  } = R(E), r = (m = i?.columnStart) !== null && m !== void 0 ? m : 1, e = (p = i?.rowStart) !== null && p !== void 0 ? p : 1, j = (l = i?.columnSpan) !== null && l !== void 0 ? l : 1, k = (f = i?.rowSpan) !== null && f !== void 0 ? f : 1, M = r + j - 1, N = e + k - 1, _ = u?.columnCount, h = u?.rowCount, b = g(t, _);
+  return /* @__PURE__ */ o.jsx(T, {
+    group: "parent",
+    children: /* @__PURE__ */ o.jsxs(D, {
+      className: "block-editor-grid-item-mover__move-button-container",
+      children: [/* @__PURE__ */ o.jsx("div", {
+        className: "block-editor-grid-item-mover__move-horizontal-button-container is-left",
+        children: /* @__PURE__ */ o.jsx(a, {
+          icon: x() ? S : w,
+          label: n("Move left"),
+          description: n("Move left"),
+          isDisabled: r <= 1,
+          onClick: () => {
+            s({
+              columnStart: r - 1
+            }), v(), d([c], t, t, b(r - 1, e));
+          }
+        })
+      }), /* @__PURE__ */ o.jsxs("div", {
+        className: "block-editor-grid-item-mover__move-vertical-button-container",
+        children: [/* @__PURE__ */ o.jsx(a, {
+          className: "is-up-button",
+          icon: y,
+          label: n("Move up"),
+          description: n("Move up"),
+          isDisabled: e <= 1,
+          onClick: () => {
+            s({
+              rowStart: e - 1
+            }), v(), d([c], t, t, b(r, e - 1));
+          }
+        }), /* @__PURE__ */ o.jsx(a, {
+          className: "is-down-button",
+          icon: z,
+          label: n("Move down"),
+          description: n("Move down"),
+          isDisabled: h && N >= h,
+          onClick: () => {
+            s({
+              rowStart: e + 1
+            }), v(), d([c], t, t, b(r, e + 1));
+          }
+        })]
+      }), /* @__PURE__ */ o.jsx("div", {
+        className: "block-editor-grid-item-mover__move-horizontal-button-container is-right",
+        children: /* @__PURE__ */ o.jsx(a, {
+          icon: x() ? w : S,
+          label: n("Move right"),
+          description: n("Move right"),
+          isDisabled: _ && M >= _,
+          onClick: () => {
+            s({
+              columnStart: r + 1
+            }), v(), d([c], t, t, b(r + 1, e));
+          }
+        })
+      })]
+    })
+  });
+}
+function a({
+  className: i,
+  icon: u,
+  label: s,
+  isDisabled: t,
+  onClick: c,
+  description: m
+}) {
+  const l = `block-editor-grid-item-mover-button__description-${O(a)}`;
+  return /* @__PURE__ */ o.jsxs(o.Fragment, {
+    children: [/* @__PURE__ */ o.jsx($, {
+      className: B("block-editor-grid-item-mover-button", i),
+      icon: u,
+      label: s,
+      "aria-describedby": l,
+      onClick: t ? null : c,
+      disabled: t,
+      accessibleWhenDisabled: !0
+    }), /* @__PURE__ */ o.jsx(G, {
+      id: l,
+      children: m
+    })]
+  });
+}
+export {
+  C as GridItemMovers
+};

package/dist/node_modules/@wordpress/block-editor/build-module/components/grid/grid-item-resizer.js

@@ -0,0 +1,114 @@
+import { ResizableBox as G } from "@wordpress/components";
+import { useState as C, useEffect as T } from "@wordpress/element";
+import { useBlockElement as D } from "../block-list/use-block-props/use-block-refs.js";
+import P from "../block-popover/cover.js";
+import { getComputedCSS as d, getGridTracks as z, getClosestTrack as m } from "./utils.js";
+import { j as u } from "../../../../../react/jsx-runtime.js";
+function W({
+  clientId: a,
+  bounds: p,
+  onChange: n,
+  parentLayout: o
+}) {
+  const s = D(a), l = s?.parentElement, {
+    isManualPlacement: r
+  } = o;
+  return !s || !l ? null : /* @__PURE__ */ u.jsx(B, {
+    clientId: a,
+    bounds: p,
+    blockElement: s,
+    rootBlockElement: l,
+    onChange: n,
+    isManualGrid: r && window.__experimentalEnableGridInteractivity
+  });
+}
+function B({
+  clientId: a,
+  bounds: p,
+  blockElement: n,
+  rootBlockElement: o,
+  onChange: s,
+  isManualGrid: l
+}) {
+  const [r, v] = C(null), [c, x] = C({
+    top: !1,
+    bottom: !1,
+    left: !1,
+    right: !1
+  });
+  T(() => {
+    const i = new window.ResizeObserver(() => {
+      const t = n.getBoundingClientRect(), e = o.getBoundingClientRect();
+      x({
+        top: t.top > e.top,
+        bottom: t.bottom < e.bottom,
+        left: t.left > e.left,
+        right: t.right < e.right
+      });
+    });
+    return i.observe(n), () => i.disconnect();
+  }, [n, o]);
+  const g = {
+    right: "left",
+    left: "right"
+  }, b = {
+    top: "flex-end",
+    bottom: "flex-start"
+  }, j = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    ...g[r] && {
+      justifyContent: g[r]
+    },
+    ...b[r] && {
+      alignItems: b[r]
+    }
+  };
+  return /* @__PURE__ */ u.jsx(P, {
+    className: "block-editor-grid-item-resizer",
+    clientId: a,
+    __unstablePopoverSlot: "__unstable-block-tools-after",
+    additionalStyles: j,
+    children: /* @__PURE__ */ u.jsx(G, {
+      className: "block-editor-grid-item-resizer__box",
+      size: {
+        width: "100%",
+        height: "100%"
+      },
+      enable: {
+        bottom: c.bottom,
+        bottomLeft: !1,
+        bottomRight: !1,
+        left: c.left,
+        right: c.right,
+        top: c.top,
+        topLeft: !1,
+        topRight: !1
+      },
+      bounds: p,
+      boundsByDirection: !0,
+      onPointerDown: ({
+        target: i,
+        pointerId: t
+      }) => {
+        i.setPointerCapture(t);
+      },
+      onResizeStart: (i, t) => {
+        v(t);
+      },
+      onResizeStop: (i, t, e) => {
+        const _ = parseFloat(d(o, "column-gap")), y = parseFloat(d(o, "row-gap")), h = z(d(o, "grid-template-columns"), _), w = z(d(o, "grid-template-rows"), y), f = new window.DOMRect(n.offsetLeft + e.offsetLeft, n.offsetTop + e.offsetTop, e.offsetWidth, e.offsetHeight), R = m(h, f.left) + 1, S = m(w, f.top) + 1, I = m(h, f.right, "end") + 1, k = m(w, f.bottom, "end") + 1;
+        s({
+          columnSpan: I - R + 1,
+          rowSpan: k - S + 1,
+          columnStart: l ? R : void 0,
+          rowStart: l ? S : void 0
+        });
+      }
+    })
+  });
+}
+export {
+  W as GridItemResizer
+};

package/dist/node_modules/@wordpress/block-editor/build-module/components/grid/grid-visualizer.js

@@ -0,0 +1,264 @@
+import { clsx as h } from "../../../../../clsx/dist/clsx.js";
+import { forwardRef as j, useState as k, useEffect as B, useMemo as C } from "@wordpress/element";
+import { useBlockElement as R } from "../block-list/use-block-props/use-block-refs.js";
+import A from "../block-popover/cover.js";
+import { getGridInfo as y, GridRect as S, range as w } from "./utils.js";
+import { store as f } from "../../store/index.js";
+import { useGetNumberOfBlocksBeforeCell as D } from "./use-get-number-of-blocks-before-cell.js";
+import E from "../button-block-appender/index.js";
+import { unlock as O } from "../../lock-unlock.js";
+import { j as m } from "../../../../../react/jsx-runtime.js";
+import g from "../../../../data/build-module/components/use-select/index.js";
+import _ from "../../../../data/build-module/components/use-dispatch/use-dispatch.js";
+import V from "../../../../compose/build-module/hooks/use-drop-zone/index.js";
+function oe({
+  clientId: t,
+  contentRef: e,
+  parentLayout: o
+}) {
+  const i = g((l) => l(f).getSettings().isDistractionFree, []), r = R(t);
+  if (i || !r)
+    return null;
+  const s = o?.isManualPlacement && window.__experimentalEnableGridInteractivity;
+  return /* @__PURE__ */ m.jsx(M, {
+    gridClientId: t,
+    gridElement: r,
+    isManualGrid: s,
+    ref: e
+  });
+}
+const M = j(({
+  gridClientId: t,
+  gridElement: e,
+  isManualGrid: o
+}, i) => {
+  const [r, s] = k(() => y(e)), [l, a] = k(!1);
+  return B(() => {
+    const c = () => s(y(e)), n = new window.ResizeObserver(c);
+    n.observe(e, {
+      box: "border-box"
+    });
+    const d = new window.ResizeObserver(c);
+    return d.observe(e), () => {
+      n.disconnect(), d.disconnect();
+    };
+  }, [e]), B(() => {
+    function c() {
+      a(!0);
+    }
+    function n() {
+      a(!1);
+    }
+    return document.addEventListener("drag", c), document.addEventListener("dragend", n), () => {
+      document.removeEventListener("drag", c), document.removeEventListener("dragend", n);
+    };
+  }, []), /* @__PURE__ */ m.jsx(A, {
+    className: h("block-editor-grid-visualizer", {
+      "is-dropping-allowed": l
+    }),
+    clientId: t,
+    __unstablePopoverSlot: "__unstable-block-tools-after",
+    children: /* @__PURE__ */ m.jsx("div", {
+      ref: i,
+      className: "block-editor-grid-visualizer__grid",
+      style: r.style,
+      children: o ? /* @__PURE__ */ m.jsx(P, {
+        gridClientId: t,
+        gridInfo: r
+      }) : Array.from({
+        length: r.numItems
+      }, (c, n) => /* @__PURE__ */ m.jsx(G, {
+        color: r.currentColor
+      }, n))
+    })
+  });
+});
+function P({
+  gridClientId: t,
+  gridInfo: e
+}) {
+  const [o, i] = k(null), r = g((l) => {
+    const {
+      getBlockOrder: a,
+      getBlockStyles: c
+    } = O(l(f)), n = a(t);
+    return c(n);
+  }, [t]), s = C(() => {
+    const l = [];
+    for (const c of Object.values(r)) {
+      var a;
+      const {
+        columnStart: n,
+        rowStart: d,
+        columnSpan: b = 1,
+        rowSpan: v = 1
+      } = (a = c?.layout) !== null && a !== void 0 ? a : {};
+      !n || !d || l.push(new S({
+        columnStart: n,
+        rowStart: d,
+        columnSpan: b,
+        rowSpan: v
+      }));
+    }
+    return l;
+  }, [r]);
+  return w(1, e.numRows).map((l) => w(1, e.numColumns).map((a) => {
+    var c;
+    const n = s.some((b) => b.contains(a, l)), d = (c = o?.contains(a, l)) !== null && c !== void 0 ? c : !1;
+    return /* @__PURE__ */ m.jsx(G, {
+      color: e.currentColor,
+      className: d && "is-highlighted",
+      children: n ? /* @__PURE__ */ m.jsx(L, {
+        column: a,
+        row: l,
+        gridClientId: t,
+        gridInfo: e,
+        setHighlightedRect: i
+      }) : /* @__PURE__ */ m.jsx(Z, {
+        column: a,
+        row: l,
+        gridClientId: t,
+        gridInfo: e,
+        setHighlightedRect: i
+      })
+    }, `${l}-${a}`);
+  }));
+}
+function G({
+  color: t,
+  children: e,
+  className: o
+}) {
+  return /* @__PURE__ */ m.jsx("div", {
+    className: h("block-editor-grid-visualizer__cell", o),
+    style: {
+      boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${t} 20%, #0000)`,
+      color: t
+    },
+    children: e
+  });
+}
+function z(t, e, o, i, r) {
+  const {
+    getBlockAttributes: s,
+    getBlockRootClientId: l,
+    canInsertBlockType: a,
+    getBlockName: c
+  } = g(f), {
+    updateBlockAttributes: n,
+    moveBlocksToPosition: d,
+    __unstableMarkNextChangeAsNotPersistent: b
+  } = _(f), v = D(o, i.numColumns);
+  return T({
+    validateDrag(u) {
+      const p = c(u);
+      if (!a(p, o))
+        return !1;
+      const x = s(u), N = new S({
+        columnStart: t,
+        rowStart: e,
+        columnSpan: x.style?.layout?.columnSpan,
+        rowSpan: x.style?.layout?.rowSpan
+      });
+      return new S({
+        columnSpan: i.numColumns,
+        rowSpan: i.numRows
+      }).containsRect(N);
+    },
+    onDragEnter(u) {
+      const p = s(u);
+      r(new S({
+        columnStart: t,
+        rowStart: e,
+        columnSpan: p.style?.layout?.columnSpan,
+        rowSpan: p.style?.layout?.rowSpan
+      }));
+    },
+    onDragLeave() {
+      r((u) => u?.columnStart === t && u?.rowStart === e ? null : u);
+    },
+    onDrop(u) {
+      r(null);
+      const p = s(u);
+      n(u, {
+        style: {
+          ...p.style,
+          layout: {
+            ...p.style?.layout,
+            columnStart: t,
+            rowStart: e
+          }
+        }
+      }), b(), d([u], l(u), o, v(t, e));
+    }
+  });
+}
+function L({
+  column: t,
+  row: e,
+  gridClientId: o,
+  gridInfo: i,
+  setHighlightedRect: r
+}) {
+  return /* @__PURE__ */ m.jsx("div", {
+    className: "block-editor-grid-visualizer__drop-zone",
+    ref: z(t, e, o, i, r)
+  });
+}
+function Z({
+  column: t,
+  row: e,
+  gridClientId: o,
+  gridInfo: i,
+  setHighlightedRect: r
+}) {
+  const {
+    updateBlockAttributes: s,
+    moveBlocksToPosition: l,
+    __unstableMarkNextChangeAsNotPersistent: a
+  } = _(f), c = D(o, i.numColumns);
+  return /* @__PURE__ */ m.jsx(E, {
+    rootClientId: o,
+    className: "block-editor-grid-visualizer__appender",
+    ref: z(t, e, o, i, r),
+    style: {
+      color: i.currentColor
+    },
+    onSelect: (n) => {
+      n && (s(n.clientId, {
+        style: {
+          layout: {
+            columnStart: t,
+            rowStart: e
+          }
+        }
+      }), a(), l([n.clientId], o, o, c(t, e)));
+    }
+  });
+}
+function T({
+  validateDrag: t,
+  onDragEnter: e,
+  onDragLeave: o,
+  onDrop: i
+}) {
+  const {
+    getDraggedBlockClientIds: r
+  } = g(f);
+  return V({
+    onDragEnter() {
+      const [s] = r();
+      s && t(s) && e(s);
+    },
+    onDragLeave() {
+      o();
+    },
+    onDrop() {
+      const [s] = r();
+      s && t(s) && i(s);
+    }
+  });
+}
+export {
+  oe as GridVisualizer
+};

package/dist/node_modules/@wordpress/block-editor/build-module/components/grid/use-get-number-of-blocks-before-cell.js

@@ -0,0 +1,24 @@
+import { store as B } from "../../store/index.js";
+import a from "../../../../data/build-module/components/use-select/index.js";
+function g(r, o) {
+  const {
+    getBlockOrder: l,
+    getBlockAttributes: c
+  } = a(B);
+  return (n, f) => {
+    const s = (f - 1) * o + n - 1;
+    let t = 0;
+    for (const u of l(r)) {
+      var e;
+      const {
+        columnStart: d,
+        rowStart: m
+      } = (e = c(u).style?.layout) !== null && e !== void 0 ? e : {};
+      (m - 1) * o + d - 1 < s && t++;
+    }
+    return t;
+  };
+}
+export {
+  g as useGetNumberOfBlocksBeforeCell
+};

package/dist/node_modules/@wordpress/block-editor/build-module/components/grid/use-grid-layout-sync.js

@@ -0,0 +1,161 @@
+import { useMemo as x, useEffect as G } from "@wordpress/element";
+import { store as A } from "../../store/index.js";
+import { GridRect as L } from "./utils.js";
+import { setImmutably as P } from "../../utils/object.js";
+import j from "../../../../data/build-module/components/use-select/index.js";
+import N from "../../../../data/build-module/components/use-dispatch/use-dispatch.js";
+import g from "../../../../compose/build-module/hooks/use-previous/index.js";
+function T({
+  clientId: c
+}) {
+  const {
+    gridLayout: o,
+    blockOrder: r,
+    selectedBlockLayout: p
+  } = j((e) => {
+    var m;
+    const {
+      getBlockAttributes: w,
+      getBlockOrder: k
+    } = e(A), v = e(A).getSelectedBlock();
+    return {
+      gridLayout: (m = w(c).layout) !== null && m !== void 0 ? m : {},
+      blockOrder: k(c),
+      selectedBlockLayout: v?.attributes.style?.layout
+    };
+  }, [c]), {
+    getBlockAttributes: u,
+    getBlockRootClientId: y
+  } = j(A), {
+    updateBlockAttributes: a,
+    __unstableMarkNextChangeAsNotPersistent: i
+  } = N(A), M = x(() => p ? new L(p) : null, [p]), S = g(M), E = g(o.isManualPlacement), B = g(r);
+  G(() => {
+    const e = {};
+    if (o.isManualPlacement) {
+      const f = [];
+      for (const t of r) {
+        var m;
+        const {
+          columnStart: n,
+          rowStart: l,
+          columnSpan: s = 1,
+          rowSpan: d = 1
+        } = (m = u(t).style?.layout) !== null && m !== void 0 ? m : {};
+        !n || !l || f.push(new L({
+          columnStart: n,
+          rowStart: l,
+          columnSpan: s,
+          rowSpan: d
+        }));
+      }
+      for (const t of r) {
+        var w;
+        const n = u(t), {
+          columnStart: l,
+          rowStart: s,
+          columnSpan: d = 1,
+          rowSpan: h = 1
+        } = (w = n.style?.layout) !== null && w !== void 0 ? w : {};
+        if (l && s)
+          continue;
+        const [O, R] = D(f, o.columnCount, d, h, S?.columnEnd, S?.rowEnd);
+        f.push(new L({
+          columnStart: O,
+          rowStart: R,
+          columnSpan: d,
+          rowSpan: h
+        })), e[t] = {
+          style: {
+            ...n.style,
+            layout: {
+              ...n.style?.layout,
+              columnStart: O,
+              rowStart: R
+            }
+          }
+        };
+      }
+      const b = Math.max(...f.map((t) => t.rowEnd));
+      (!o.rowCount || o.rowCount < b) && (e[c] = {
+        layout: {
+          ...o,
+          rowCount: b
+        }
+      });
+      for (const t of B ?? [])
+        if (!r.includes(t)) {
+          var k;
+          const n = y(t);
+          if (n === null || u(n)?.layout?.type === "grid")
+            continue;
+          const s = u(t), {
+            columnStart: d,
+            rowStart: h,
+            columnSpan: O,
+            rowSpan: R,
+            ...C
+          } = (k = s.style?.layout) !== null && k !== void 0 ? k : {};
+          if (d || h || O || R) {
+            const I = Object.keys(C).length === 0;
+            e[t] = P(s, ["style", "layout"], I ? void 0 : C);
+          }
+        }
+    } else {
+      if (E === !0)
+        for (const f of r) {
+          var v;
+          const b = u(f), {
+            columnStart: t,
+            rowStart: n,
+            ...l
+          } = (v = b.style?.layout) !== null && v !== void 0 ? v : {};
+          if (t || n) {
+            const s = Object.keys(l).length === 0;
+            e[f] = P(b, ["style", "layout"], s ? void 0 : l);
+          }
+        }
+      o.rowCount && (e[c] = {
+        layout: {
+          ...o,
+          rowCount: void 0
+        }
+      });
+    }
+    Object.keys(e).length && (i(), a(
+      Object.keys(e),
+      e,
+      /* uniqueByBlock: */
+      !0
+    ));
+  }, [
+    // Actual deps to sync:
+    c,
+    o,
+    B,
+    r,
+    S,
+    E,
+    // These won't change, but the linter thinks they might:
+    i,
+    u,
+    y,
+    a
+  ]);
+}
+function D(c, o, r, p, u = 1, y = 1) {
+  for (let a = y; ; a++)
+    for (let i = a === y ? u : 1; i <= o; i++) {
+      const M = new L({
+        columnStart: i,
+        rowStart: a,
+        columnSpan: r,
+        rowSpan: p
+      });
+      if (!c.some((S) => S.intersectsRect(M)))
+        return [i, a];
+    }
+}
+export {
+  T as useGridLayoutSync
+};