@eightshift/ui-components 0.0.1

package/dist/hooks/use-cell-edit-mode.js

@@ -0,0 +1,35 @@
+import { useRef, useEffect } from "react";
+function useCellEditMode() {
+  const isFocusedRef = useRef(false);
+  const isEditModeRef = useRef(false);
+  useEffect(() => {
+    const handler = (e) => {
+      if (isFocusedRef.current) {
+        if (e.code === "Enter") {
+          isEditModeRef.current = true;
+        } else if (e.code === "Escape" || e.code === "Tab") {
+          isEditModeRef.current = false;
+        }
+        if (isEditModeRef.current) {
+          e.stopPropagation();
+        }
+      }
+    };
+    window.addEventListener("keydown", handler, true);
+    return () => {
+      window.removeEventListener("keydown", handler, true);
+    };
+  }, []);
+  const setFocus = (should) => isFocusedRef.current = should;
+  const preventProps = {
+    onFocus: () => setFocus(true),
+    onBlur: () => setFocus(false),
+    onClick: () => {
+      isEditModeRef.current = true;
+    }
+  };
+  return preventProps;
+}
+export {
+  useCellEditMode
+};

package/dist/icons/block-icon.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { blockIcons } from "./icons.js";
+/**
+ * A component that displays a block icon.
+ *
+ * Usage:
+ *
+ * ```jsx
+ * import { BlockIcon } from '@eightshift/frontend-libs/scripts';
+ *
+ * <BlockIcon iconName='es-button' />
+ * ```
+ *
+ * Output:
+ *
+ * Selected block icon displayed inline.
+ * ```html
+ * <i><svg ...> ... </svg></i>
+ * ```
+ *
+ * @param {object} props          - BlockIcon options.
+ * @param {string} props.iconName - Name of the block icon to display.
+ *
+ * @access public
+ *
+ * @returns {JSX.Element} The BlockIcon component.
+ *
+ * @preserve
+ */
+const BlockIcon = (props) => {
+  const { iconName } = props;
+  return /* @__PURE__ */ jsx(
+    "i",
+    {
+      dangerouslySetInnerHTML: { __html: blockIcons[iconName] },
+      style: { lineHeight: 0 }
+    }
+  );
+};
+export {
+  BlockIcon
+};

package/dist/icons/generic-color-swatch.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+const GenericColorSwatch = ({ style }) => {
+  const clipId = useId();
+  return /* @__PURE__ */ jsxs("svg", { style, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: `genericColorSwatchShape-${clipId}`, children: /* @__PURE__ */ jsx("rect", { className: "generic-swatch-icon-color-mask", x: "1", y: "1", width: "18", height: "18", rx: "2" }) }) }),
+    /* @__PURE__ */ jsxs("g", { opacity: "var(--checkerboard-opacity, 0)", clipPath: `url(#genericColorSwatchShape-${clipId})`, className: "generic-swatch-icon-checkerboard-group", children: [
+      /* @__PURE__ */ jsx("path", { fill: "#CCC", d: "M1 1h3v3H1V1zm0 6h3v3H1zm0 6h3v3H1zM7 1h3v3H7zm0 6h3v3H7zm0 6h3v3H7zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M4 1h3v3H4zm0 6h3v3H4zm0 6h3v3H4zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3zm6-12h3v3h-3V1zm0 6h3v3h-3zm0 6h3v3h-3z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#CCC", d: "M4 4h3v3H4zm0 6h3v3H4zm0 6h3v3H4zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3v-3z" }),
+      /* @__PURE__ */ jsx("path", { fill: "#fff", d: "M1 4h3v3H1zm0 6h3v3H1zm0 6h3v3H1v-3zM7 4h3v3H7zm0 6h3v3H7zm0 6h3v3H7zm6-12h3v3h-3zm0 6h3v3h-3zm0 6h3v3h-3z" })
+    ] }),
+    /* @__PURE__ */ jsx("rect", { className: "generic-swatch-icon-color", x: "1", y: "1", width: "18", height: "18", rx: "2", fill: "var(--selected-color, currentColor)", stroke: "gray" }),
+    /* @__PURE__ */ jsx("path", { opacity: "var(--selected-opacity, 0)", d: "M4 16 16 4", stroke: "gray", strokeLinejoin: "round", fill: "none" }),
+    /* @__PURE__ */ jsx("circle", { opacity: "var(--current-opacity, 0)", cx: "10", cy: "10", r: "4.5", fill: "#fff" }),
+    /* @__PURE__ */ jsx("circle", { opacity: "var(--current-opacity, 0)", cx: "10", cy: "10", r: "2.5", fill: "#000" })
+  ] });
+};
+export {
+  GenericColorSwatch
+};