@blockbite/ui 2.0.7 → 2.0.10

package/dist/LinkPicker.js

@@ -1,67 +1,58 @@
-import { j as e } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import h from "@wordpress/api-fetch";
-import { TextControl as u } from "@wordpress/components";
-import { useState as c, useEffect as a } from "@wordpress/element";
-import { __ as p } from "@wordpress/i18n";
-import { Wrap as k } from "./Wrap.js";
-function g(r) {
-  const [t, s] = c(""), [i, n] = c([]), [o, b] = c({
-    url: "",
-    title: ""
-  });
-  return a(() => {
-    t !== "" && (n(null), h({
-      path: `/blockbite/v1/block-helpers/get-links/${t}`
-    }).then(
-      (l) => {
-        l?.length ? n([...l]) : n([]);
-      }
-    ));
-  }, [t]), a(() => {
-    o.url !== "" && r.parentCallback(o);
-  }, [o]), /* @__PURE__ */ e.jsxs(k, { className: "blockbite--editor-linkwrap", children: [
-    /* @__PURE__ */ e.jsx(
-      u,
-      {
-        label: p("Search link", "blockbitelinks"),
-        value: t,
-        placeholder: "Example: About",
-        onChange: (l) => s(l),
-        help: p("Type a post, page, title", "blockbitelinks")
-      }
-    ),
-    t ? /* @__PURE__ */ e.jsx("div", { className: "blockbite--editor-linklist", children: /* @__PURE__ */ e.jsx(
-      m,
-      {
-        links: i,
-        onActiveLink: (l) => [
-          b({ ...l }),
-          s("")
-        ]
-      }
-    ) }) : null
-  ] });
-}
-function m({ links: r, onActiveLink: t }) {
-  const s = [];
-  return r === null ? /* @__PURE__ */ e.jsx("p", { children: "Loading..." }) : r.length === 0 ? /* @__PURE__ */ e.jsx("p", { children: "No Results" }) : (r.forEach((i) => {
-    s.push(
-      // add key
-      /* @__PURE__ */ e.jsx(k, { children: /* @__PURE__ */ e.jsxs(
-        "span",
-        {
-          className: "blockbite--editor-link",
-          onClick: () => t(i),
-          children: [
-            /* @__PURE__ */ e.jsx("span", { children: i.title }),
-            /* @__PURE__ */ e.jsx("span", { className: "blockbite--preview-link", children: i.url }),
-            /* @__PURE__ */ e.jsx("span", { className: "blockbite--preview-link", children: i.post_type })
-          ]
+import React from 'react';
+void React;
+import apiFetch from '@wordpress/api-fetch';
+import { TextControl } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Wrap } from './Wrap.js';
+export function LinkPicker(props) {
+    const [activeKeyword, setActiveKeyword] = useState('');
+    const [links, setLinks] = useState([]);
+    const [activeLink, setActiveLink] = useState({
+        url: '',
+        title: '',
+    });
+    useEffect(() => {
+        if (activeKeyword === '')
+            return;
+        setLinks(null);
+        apiFetch({
+            path: `/blockbite/v1/block-helpers/get-links/${activeKeyword}`,
+        }).then((fetchedLinks) => {
+            if (fetchedLinks === null || fetchedLinks === void 0 ? void 0 : fetchedLinks.length) {
+                setLinks([...fetchedLinks]);
+            }
+            else {
+                setLinks([]);
+            }
+        });
+    }, [activeKeyword]);
+    useEffect(() => {
+        if (activeLink.url !== '') {
+            props.parentCallback(activeLink);
         }
-      ) }, i.id)
-    );
-  }), s);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeLink]);
+    return (React.createElement(Wrap, { className: "blockbite--editor-linkwrap" },
+        React.createElement(TextControl, { label: __('Search link', 'blockbitelinks'), value: activeKeyword, placeholder: "Example: About", onChange: (value) => setActiveKeyword(value), help: __('Type a post, page, title', 'blockbitelinks') }),
+        activeKeyword ? (React.createElement("div", { className: "blockbite--editor-linklist" },
+            React.createElement(LinkList, { links: links, onActiveLink: (link) => [
+                    setActiveLink(Object.assign({}, link)),
+                    setActiveKeyword(''),
+                ] }))) : null));
+}
+function LinkList({ links, onActiveLink }) {
+    if (links === null) {
+        return React.createElement("p", null, "Loading...");
+    }
+    else if (links.length === 0) {
+        return React.createElement("p", null, "No Results");
+    }
+    const list = links.map((link) => (React.createElement(Wrap, { key: link.id },
+        React.createElement("span", { className: "blockbite--editor-link", onClick: () => onActiveLink(link) },
+            React.createElement("span", null, link.title),
+            React.createElement("span", { className: "blockbite--preview-link" }, link.url),
+            React.createElement("span", { className: "blockbite--preview-link" }, link.post_type)))));
+    return React.createElement(React.Fragment, null, list); // ✅ Wrapped
 }
-export {
-  g as LinkPicker
-};
+//# sourceMappingURL=LinkPicker.js.map

package/dist/LinkPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkPicker.js","sourceRoot":"","sources":["../src/LinkPicker.tsx"],"names":[],"mappings":"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"}

package/dist/MediaPicker.d.ts

@@ -1,4 +1,5 @@
+import React from 'react';
 export declare function MediaPicker({ mediaProps, mediaCallback }: {
     mediaProps: any;
     mediaCallback: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

package/dist/MediaPicker.js

@@ -1,93 +1,106 @@
-import { j as l } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { MediaUploadCheck as n, MediaUpload as m } from "@wordpress/block-editor";
-import { PanelRow as b, Button as a } from "@wordpress/components";
-import { useState as j, useEffect as x } from "@wordpress/element";
-import { __ as r } from "@wordpress/i18n";
-function S({ mediaProps: d, mediaCallback: c }) {
-  const u = [
-    "image",
-    "video",
-    "image/svg+xml",
-    "svg",
-    "text/plain",
-    "application/json"
-  ], [t, g] = j({
-    id: null,
-    url: "",
-    sizes: [],
-    alt: "",
-    type: "",
-    width: 0,
-    height: 0
-  });
-  x(() => {
-    d && g({ ...d });
-  }, [d]);
-  const p = () => {
-    c({ ...{
-      mediaId: 0,
-      mediaUrl: ""
-    } });
-  }, h = (e) => {
-    const s = {
-      thumbnail: null,
-      medium: null,
-      large: null
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import React from 'react';
+void React;
+import { Button, PanelRow } from '@wordpress/components';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+export function MediaPicker({ mediaProps, mediaCallback }) {
+    const allowedTypes = [
+        'image',
+        'video',
+        'image/svg+xml',
+        'svg',
+        'text/plain',
+        'application/json',
+    ];
+    // toggles
+    const [stateMedia, setStateMedia] = useState({
+        id: null,
+        url: '',
+        sizes: [],
+        alt: '',
+        type: '',
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        if (mediaProps) {
+            setStateMedia(Object.assign({}, mediaProps));
+        }
+    }, [mediaProps]);
+    // image handlers
+    const removeMedia = () => {
+        const mediaObj = {
+            mediaId: 0,
+            mediaUrl: '',
+        };
+        mediaCallback(Object.assign({}, mediaObj));
     };
-    e?.sizes && Object.keys(e.sizes).map((o) => {
-      const i = e.sizes[o];
-      return (o === "thumbnail" || i.width < 768 || i.height < 768) && (s.thumbnail = i.url), (o === "medium" || i.width > 1024 && i.width < 1024 || i.height < 1536 && i.height > 1536) && (s.medium = i.url), (o === "large" || i.width > 1536 || i.height > 1536) && (s.large = i.url), null;
-    }), e.url.endsWith(".json") && (e.type = "lottie"), e.url.endsWith(".svg") && (e.type = "svg");
-    const f = {
-      id: e.id,
-      url: e.url,
-      sizes: s,
-      alt: e.alt,
-      type: e.type,
-      width: e.width,
-      height: e.height
-    };
-    c({ ...f });
-  };
-  return /* @__PURE__ */ l.jsxs(b, { children: [
-    t.id !== null && /* @__PURE__ */ l.jsx(n, { children: /* @__PURE__ */ l.jsx(
-      m,
-      {
-        onSelect: h,
-        value: t.id,
-        allowedTypes: u,
-        render: ({ open: e }) => /* @__PURE__ */ l.jsxs(
-          a,
-          {
-            className: t.id === 0 ? "editor-post-featured-image__toggle" : "editor-post-featured-image__preview",
-            onClick: e,
-            children: [
-              t.id === 0 && r("Choose Media", "blockbite"),
-              t.id && t.type === "image" ? /* @__PURE__ */ l.jsx("div", { className: "blockbite--editor-visual-image", children: /* @__PURE__ */ l.jsx(
-                "img",
-                {
-                  alt: t.alt ? t.alt : r("Image", "blockbite"),
-                  src: t.url
+    // onselect media
+    const onSelectMedia = (media) => {
+        const safeSizes = {
+            thumbnail: null,
+            medium: null,
+            large: null,
+        };
+        // Normalize Sizes
+        if (media === null || media === void 0 ? void 0 : media.sizes) {
+            Object.keys(media.sizes).map((key) => {
+                const sizeObject = media.sizes[key];
+                if (key === 'thumbnail') {
+                    safeSizes.thumbnail = sizeObject.url;
+                }
+                else if (sizeObject.width < 768 || sizeObject.height < 768) {
+                    safeSizes.thumbnail = sizeObject.url;
+                }
+                if (key === 'medium') {
+                    safeSizes.medium = sizeObject.url;
+                }
+                else if ((sizeObject.width > 1024 && sizeObject.width < 1024) ||
+                    (sizeObject.height < 1536 && sizeObject.height > 1536)) {
+                    safeSizes.medium = sizeObject.url;
                 }
-              ) }) : "Add media"
-            ]
-          }
-        )
-      }
-    ) }),
-    t.id !== 0 && /* @__PURE__ */ l.jsx(n, { children: /* @__PURE__ */ l.jsx(
-      m,
-      {
-        title: r("Replace media", "blockbite"),
-        value: t.id,
-        onSelect: h,
-        allowedTypes: u,
-        render: ({ open: e }) => /* @__PURE__ */ l.jsx(a, { onClick: e, children: r("Replace media", "blockbite") })
-      }
-    ) }),
-    t.id !== 0 && /* @__PURE__ */ l.jsx(n, { children: /* @__PURE__ */ l.jsx(a, { onClick: () => p(), isDestructive: !0, children: r("Remove media", "blockbite") }) })
-  ] });
+                if (key === 'large') {
+                    safeSizes.large = sizeObject.url;
+                }
+                else if (sizeObject.width > 1536 || sizeObject.height > 1536) {
+                    safeSizes.large = sizeObject.url;
+                }
+                return null;
+            });
+        }
+        // if type ends .lottie then it is a lottie file
+        if (media.url.endsWith('.json')) {
+            media.type = 'lottie';
+        }
+        // if type ends with .svg then it is an svg file
+        if (media.url.endsWith('.svg')) {
+            media.type = 'svg';
+        }
+        const mediaObj = {
+            id: media.id,
+            url: media.url,
+            sizes: safeSizes,
+            alt: media.alt,
+            type: media.type,
+            width: media.width,
+            height: media.height,
+        };
+        mediaCallback(Object.assign({}, mediaObj));
+    };
+    return (React.createElement(PanelRow, null,
+        stateMedia.id !== null && (React.createElement(MediaUploadCheck, null,
+            React.createElement(MediaUpload, { onSelect: onSelectMedia, value: stateMedia.id, allowedTypes: allowedTypes, render: ({ open }) => (React.createElement(Button, { className: stateMedia.id === 0
+                        ? 'editor-post-featured-image__toggle'
+                        : 'editor-post-featured-image__preview', onClick: open },
+                    stateMedia.id === 0 && __('Choose Media', 'blockbite'),
+                    stateMedia.id && stateMedia.type === 'image' ? (React.createElement("div", { className: "blockbite--editor-visual-image" },
+                        React.createElement("img", { alt: stateMedia.alt
+                                ? stateMedia.alt
+                                : __('Image', 'blockbite'), src: stateMedia.url }))) : ('Add media'))) }))),
+        stateMedia.id !== 0 && (React.createElement(MediaUploadCheck, null,
+            React.createElement(MediaUpload, { title: __('Replace media', 'blockbite'), value: stateMedia.id, onSelect: onSelectMedia, allowedTypes: allowedTypes, render: ({ open }) => (React.createElement(Button, { onClick: open }, __('Replace media', 'blockbite'))) }))),
+        stateMedia.id !== 0 && (React.createElement(MediaUploadCheck, null,
+            React.createElement(Button, { onClick: () => removeMedia(), isDestructive: true }, __('Remove media', 'blockbite'))))));
 }
-export {
-  S as MediaPicker
-};
+//# sourceMappingURL=MediaPicker.js.map

package/dist/MediaPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaPicker.js","sourceRoot":"","sources":["../src/MediaPicker.tsx"],"names":[],"mappings":"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"}

package/dist/MetricsControl.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type MetricsControlProps = {
     defaultUnit: string;
     defaultValue: string;

package/dist/MetricsControl.js

@@ -1,118 +1,97 @@
-import { j as s } from "./node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js";
-import { useState as a, useEffect as d } from "@wordpress/element";
-import { ButtonToggleGroup as h } from "./ButtonToggle.js";
-import { DropdownPicker as P } from "./DropdownPicker.js";
-import { Popover as C } from "./Popover.js";
-import { RangeSlider as w } from "./RangeSlider.js";
-import { TextControl as N } from "./TextControl.js";
-import { Wrap as k } from "./Wrap.js";
-import { Tailwind as O, Percentage as T, Grid as R, Desktop as G, Slider as A, ColumnSpacing as D } from "@blockbite/icons";
-const W = ({
-  defaultUnit: l,
-  defaultValue: n,
-  onValueChange: t,
-  onUnitChange: g,
-  inputClassName: j = "w-[75px]"
-}) => {
-  const [c, m] = a(!1), [v, b] = a([]), [r, x] = a(l), [o, i] = a(""), [u, S] = a(n);
-  d(() => {
-    l && x(l), n && i(n.toString());
-  }, [l, n]), d(() => {
-    !c && r === "arbitrary" && S(o);
-  }, [c]);
-  const f = (e) => {
-    if (e !== "arbitrary" && bb?.codex?.units?.spacing?.[e]) {
-      const p = bb.codex.units.spacing[e];
-      b(
-        Array.isArray(p) ? p : Object.keys(p)
-      );
-    } else
-      b([]);
-    m(!0);
-  }, y = [
-    {
-      icon: /* @__PURE__ */ s.jsx(O, {}),
-      label: "Tailwind CSS Units",
-      value: "native"
-    },
-    { icon: /* @__PURE__ */ s.jsx(T, {}), label: "Percentage Units", value: "percent" },
-    { icon: /* @__PURE__ */ s.jsx(R, {}), label: "Grid Units", value: "grid" },
-    { icon: /* @__PURE__ */ s.jsx(G, {}), label: "Screen Units", value: "screen" },
-    { icon: /* @__PURE__ */ s.jsx(A, {}), label: "Pixel Units", value: "arbitrary" },
-    { icon: /* @__PURE__ */ s.jsx(D, {}), label: "Fluid Units", value: "fluid" }
-  ];
-  return /* @__PURE__ */ s.jsx(k, { className: "relative flex flex-col items-baseline", children: /* @__PURE__ */ s.jsxs(
-    N,
-    {
-      inputClassName: j,
-      defaultValue: (
-        // Remove the "b_" prefix for grid units
-        r === "grid" ? o.replace("b_", "") : o
-      ),
-      onClick: () => r !== "arbitrary" && f(r),
-      onChange: (e) => {
-        i(e), t(e);
-      },
-      readOnly: r !== "arbitrary",
-      children: [
-        /* @__PURE__ */ s.jsx(
-          C,
-          {
-            visible: c,
-            position: "bottom left",
-            className: "w-[300px] bg-white shadow-sm",
-            onVisibleChange: m,
-            children: r === "arbitrary" ? /* @__PURE__ */ s.jsx(
-              w,
-              {
-                defaultValue: o,
-                label: "Pixel Value",
-                min: 0,
-                max: 100,
-                gridMode: !0,
-                showTooltip: !1,
-                allowReset: !0,
-                resetFallbackValue: isNaN(u.toString()) ? 0 : Number(u) / 16,
-                onValueChange: (e) => {
-                  i(e), t(e);
-                }
-              }
-            ) : /* @__PURE__ */ s.jsx(
-              h,
-              {
-                className: "mt-4",
-                options: v.map((e) => ({
-                  value: e,
-                  label: r === "grid" ? e.toString().replace("b_", "") : e,
-                  onClick: () => {
-                    i(e), t(e);
-                  }
-                })),
-                size: "small",
-                defaultPressed: o?.toString() || "",
-                onPressedChange: (e) => {
-                  i(e), t(e);
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ s.jsx(
-          P,
-          {
-            className: "h-[32px]",
-            defaultValue: r,
-            options: y,
-            onPressedChange: (e) => {
-              e === "reset" ? (i(""), t(""), m(!1)) : (x(e), g(e), f(e));
-            }
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  W as MetricsControl,
-  W as default
+import { useEffect, useState } from '@wordpress/element';
+import React from 'react';
+import { ButtonToggleGroup } from './ButtonToggle.js';
+import { DropdownPicker } from './DropdownPicker.js';
+import { Popover } from './Popover.js';
+import { RangeSlider } from './RangeSlider.js';
+import { TextControl } from './TextControl.js';
+import { Wrap } from './Wrap.js';
+void React;
+import { ColumnSpacing as ColumnSpacingIcon, Desktop as DesktopIcon, Grid as GridIcon, Percentage as PercentageIcon, Slider as SliderIcon, Tailwind as TailwindUnitIcon, } from '@blockbite/icons';
+export const MetricsControl = ({ defaultUnit, defaultValue, onValueChange, onUnitChange, inputClassName = 'w-[75px]', }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [currentOptions, setCurrentOptions] = useState([]);
+    // Use local state for defaultUnit and defaultValue
+    const [unit, setUnit] = useState(defaultUnit);
+    const [value, setValue] = useState('');
+    const [resetValue, setResetValue] = useState(defaultValue);
+    // Set initial state from props
+    useEffect(() => {
+        if (defaultUnit) {
+            setUnit(defaultUnit);
+        }
+        if (defaultValue) {
+            setValue(defaultValue.toString());
+        }
+    }, [defaultUnit, defaultValue]);
+    // Save last value after popover close to support "reset" functionality
+    // Only apply to arbitrary units
+    useEffect(() => {
+        if (!isVisible && unit === 'arbitrary') {
+            setResetValue(value);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isVisible]);
+    const showOptions = (u) => {
+        var _a, _b, _c;
+        if (u !== 'arbitrary' && ((_c = (_b = (_a = bb === null || bb === void 0 ? void 0 : bb.codex) === null || _a === void 0 ? void 0 : _a.units) === null || _b === void 0 ? void 0 : _b.spacing) === null || _c === void 0 ? void 0 : _c[u])) {
+            const options = bb.codex.units.spacing[u];
+            setCurrentOptions(Array.isArray(options) ? options : Object.keys(options));
+        }
+        else {
+            setCurrentOptions([]);
+        }
+        setIsVisible(true);
+    };
+    const unitOptions = [
+        {
+            icon: React.createElement(TailwindUnitIcon, null),
+            label: 'Tailwind CSS Units',
+            value: 'native',
+        },
+        { icon: React.createElement(PercentageIcon, null), label: 'Percentage Units', value: 'percent' },
+        { icon: React.createElement(GridIcon, null), label: 'Grid Units', value: 'grid' },
+        { icon: React.createElement(DesktopIcon, null), label: 'Screen Units', value: 'screen' },
+        { icon: React.createElement(SliderIcon, null), label: 'Pixel Units', value: 'arbitrary' },
+        { icon: React.createElement(ColumnSpacingIcon, null), label: 'Fluid Units', value: 'fluid' },
+    ];
+    return (React.createElement(Wrap, { className: "relative flex flex-col items-baseline" },
+        React.createElement(TextControl, { inputClassName: inputClassName, defaultValue: 
+            // Remove the "b_" prefix for grid units
+            unit === 'grid' ? value.replace('b_', '') : value, onClick: () => unit !== 'arbitrary' && showOptions(unit), onChange: (newValue) => {
+                setValue(newValue);
+                onValueChange(newValue);
+            }, readOnly: unit !== 'arbitrary' },
+            React.createElement(Popover, { visible: isVisible, position: "bottom left", className: "w-[300px] bg-white shadow-sm", onVisibleChange: setIsVisible }, unit === 'arbitrary' ? (React.createElement(RangeSlider, { defaultValue: value, label: "Pixel Value", min: 0, max: 100, gridMode: true, showTooltip: false, allowReset: true, resetFallbackValue: isNaN(resetValue.toString())
+                    ? 0
+                    : Number(resetValue) / 16, onValueChange: (newValue) => {
+                    setValue(newValue);
+                    onValueChange(newValue);
+                } })) : (React.createElement(ButtonToggleGroup, { className: "mt-4", options: currentOptions.map((option) => ({
+                    value: option,
+                    label: unit === 'grid'
+                        ? option.toString().replace('b_', '')
+                        : option,
+                    onClick: () => {
+                        setValue(option);
+                        onValueChange(option);
+                    },
+                })), size: "small", defaultPressed: (value === null || value === void 0 ? void 0 : value.toString()) || '', onPressedChange: (newValue) => {
+                    setValue(newValue);
+                    onValueChange(newValue);
+                } }))),
+            React.createElement(DropdownPicker, { className: "h-[32px]", defaultValue: unit, options: unitOptions, onPressedChange: (selectedUnit) => {
+                    if (selectedUnit === 'reset') {
+                        setValue('');
+                        onValueChange('');
+                        setIsVisible(false);
+                    }
+                    else {
+                        setUnit(selectedUnit);
+                        onUnitChange(selectedUnit);
+                        showOptions(selectedUnit);
+                    }
+                } }))));
 };
+export default MetricsControl;
+//# sourceMappingURL=MetricsControl.js.map

package/dist/MetricsControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsControl.js","sourceRoot":"","sources":["../src/MetricsControl.tsx"],"names":[],"mappings":"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"}

package/dist/Modal.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 type ModalContextType = {
     closeModal: () => void;
     openModal: () => void;