@wrdagency/blockout 1.0.6 → 1.0.8

package/dist/components/controls/tag-control/index.d.ts

@@ -1,10 +1,10 @@
-import { ControlFC } from '../base-control/props';
-import { Tag, Taggable } from './props';
-interface TagControlProps {
-    value?: Taggable[];
-    onChangeValue?: (value: Tag[]) => void;
-    options?: Taggable[];
-    allowCreate?: boolean;
+import { ControlProps } from '../base-control/props';
+import { Tag, Taggable, UnnormalizedCreateTagRules } from './props';
+interface TagControlProps<T extends number | string = string> {
+    value?: Taggable<T>[];
+    onChangeValue?: (value: Tag<T>[]) => void;
+    options?: Taggable<T>[];
+    create?: UnnormalizedCreateTagRules<T>;
 }
-export declare const TagControl: ControlFC<TagControlProps>;
+export declare function TagControl<T extends number | string = string>(props: ControlProps<TagControlProps<T>>): import("react/jsx-runtime").JSX.Element;
 export type { Tag, Taggable } from './props';

package/dist/components/controls/tag-control/index.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Colourway as p } from "../../../primitives/colourway/index.js";
-import { noop as w } from "../../../utils/noop.js";
-import { useState as x, useMemo as P } from "react";
+import { Colourway as _ } from "../../../primitives/colourway/index.js";
+import { noop as O } from "../../../utils/noop.js";
+import { useState as g, useMemo as R } from "react";
 import '../../../assets/style18.css';import '../../../assets/styles.css';import '../../../assets/style7.css';import '../../../assets/style6.css';import '../../../assets/style5.css';import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/style.css';/* empty css                      */
 /* empty css                      */
 /* empty css                      */
@@ -13,70 +13,75 @@ import "../../../primitives/symbol/index.js";
 /* empty css                      */
 /* empty css                      */
 /* empty css                       */
-import { o as T } from "../../../Check.es-CMkTf2It.js";
-import { e as S } from "../../../Plus.es-DJ5SuqNv.js";
-import { e as V } from "../../../X.es-TbGOnXOO.js";
-import { m as y } from "../../../match-sorter.esm-MNVE8H_6.js";
-import { BaseControl as k } from "../base-control/index.js";
-import { useBaseControlProps as z } from "../base-control/props.js";
-import { T as I, a as j, b as B, c as L, d as M, C as O, e as U } from "../../../tag-remove-BVa8oSsq.js";
-import { normalizeTag as m } from "./props.js";
+import { o as k } from "../../../Check.es-CMkTf2It.js";
+import { e as B } from "../../../Plus.es-DJ5SuqNv.js";
+import { e as I } from "../../../X.es-TbGOnXOO.js";
+import { m as j } from "../../../match-sorter.esm-MNVE8H_6.js";
+import { BaseControl as L } from "../base-control/index.js";
+import { useBaseControlProps as M } from "../base-control/props.js";
+import { T as A, a as K, b as U, c as $, d as q, C as D, e as E } from "../../../tag-remove-BVa8oSsq.js";
+import { normalizeTag as d, normalizeCreateTagRules as F } from "./props.js";
 /* empty css                      */
-import { C as A, a as K, c as i } from "../../../MAXQOH4L-DBaf8WKp.js";
-const io = (_) => {
-  const { baseProps: u, controlProps: h } = z(_, {
+import { C as G, a as H, c as h } from "../../../MAXQOH4L-DBaf8WKp.js";
+function Co(v) {
+  const { baseProps: b, controlProps: f } = M(v, {
     className: "component-tag-control"
-  }), [a, d] = x(""), {
-    value: g = [],
-    onChangeValue: v = w,
-    options: b = [],
-    allowCreate: l = !1
-  } = h, s = b.map(m), c = g.map(m), n = P(() => y(s, a, {
-    baseSort: (o, r) => o.index < r.index ? -1 : 1,
+  }), [a, C] = g(""), [N, w] = g([]), {
+    value: x = [],
+    onChangeValue: T = O,
+    options: P = [],
+    create: S = !1
+  } = f, c = [...P.map(d), ...N], p = x.map(d), n = F(S), l = R(() => j(c, a, {
+    baseSort: (o, s) => o.index < s.index ? -1 : 1,
     keys: ["label", "value"]
-  }), [a]), f = n.length > 0 || l, C = (o) => {
-    v(
-      o.map(
-        (r) => s.find((N) => N.value === r) || m(r)
-      )
-    );
+  }), [a]), i = !l.length && n.allow(a), V = l.length > 0 || i, y = (o) => {
+    const s = o.map((m) => {
+      const u = c.find((r) => r.value == m);
+      if (u)
+        return u;
+      if (n.allow(m)) {
+        const r = n.create(m);
+        return w((z) => [...z, r]), r;
+      }
+    }).filter(Boolean);
+    T(s);
   };
   return /* @__PURE__ */ e(
-    I,
+    A,
     {
-      values: c.map((o) => o.value),
-      setValues: C,
+      values: p.map((o) => String(o.value)),
+      setValues: y,
       value: a,
-      setValue: d,
-      children: /* @__PURE__ */ e(k, { ...u, children: /* @__PURE__ */ t(j, { className: "component-tag-control__box", children: [
-        c.map((o) => /* @__PURE__ */ t(
-          p,
+      setValue: C,
+      children: /* @__PURE__ */ e(L, { ...b, children: /* @__PURE__ */ t(K, { className: "component-tag-control__box", children: [
+        p.map((o) => /* @__PURE__ */ t(
+          _,
           {
-            value: o.value,
-            as: B,
+            value: String(o.value),
+            as: U,
             theme: o.colourway,
             className: "component-tag-control__tag",
             children: [
               /* @__PURE__ */ e("span", { className: "component-tag-control__tag__label", children: o.label }),
-              /* @__PURE__ */ e(L, { className: "component-tag-control__tag__remove", children: /* @__PURE__ */ e(V, {}) })
+              /* @__PURE__ */ e($, { className: "component-tag-control__tag__remove", children: /* @__PURE__ */ e(I, {}) })
             ]
           },
           o.value
         )),
-        /* @__PURE__ */ t(A, { children: [
+        /* @__PURE__ */ t(G, { children: [
           /* @__PURE__ */ e(
-            K,
+            H,
             {
               autoSelect: !0,
               showMinLength: 1,
               showOnKeyPress: !0,
               autoComplete: "both",
-              render: /* @__PURE__ */ e(M, {}),
+              render: /* @__PURE__ */ e(q, {}),
               className: "component-tag-control__input"
             }
           ),
-          f && /* @__PURE__ */ t(
-            O,
+          V && /* @__PURE__ */ t(
+            D,
             {
               className: "component-tag-control__popover",
               "data-colour-scheme": "invert",
@@ -87,32 +92,32 @@ const io = (_) => {
               gutter: 8,
               overflowPadding: 4,
               children: [
-                n.map((o) => /* @__PURE__ */ t(
-                  i,
+                l.map((o) => /* @__PURE__ */ t(
+                  h,
                   {
-                    value: o.value,
+                    value: String(o.value),
                     className: "component-tag-control__option",
                     children: [
                       /* @__PURE__ */ e(
-                        p,
+                        _,
                         {
                           className: "component-tag-control__option__chip",
                           theme: o.colourway
                         }
                       ),
                       /* @__PURE__ */ e("span", { className: "component-tag-control__option__label", children: o.label }),
-                      /* @__PURE__ */ e(U, { className: "component-tag-control__option__check", children: /* @__PURE__ */ e(T, {}) })
+                      /* @__PURE__ */ e(E, { className: "component-tag-control__option__check", children: /* @__PURE__ */ e(k, {}) })
                     ]
                   },
                   o.value
                 )),
-                !n.length && l && /* @__PURE__ */ t(
-                  i,
+                i && /* @__PURE__ */ t(
+                  h,
                   {
-                    value: a.toUpperCase(),
+                    value: a,
                     className: "component-tag-control__option component-tag-control__option--create",
                     children: [
-                      /* @__PURE__ */ e(S, { className: "component-tag-control__option--add" }),
+                      /* @__PURE__ */ e(B, { className: "component-tag-control__option--add" }),
                       /* @__PURE__ */ t("span", { className: "component-tag-control__option__label", children: [
                         'Add "',
                         a.toUpperCase(),
@@ -128,7 +133,7 @@ const io = (_) => {
       ] }) })
     }
   );
-};
+}
 export {
-  io as TagControl
+  Co as TagControl
 };

package/dist/components/controls/tag-control/props.d.ts

@@ -8,4 +8,13 @@ export type PartialTag<T extends string | number = string> = Partial<Tag<T>> & {
     value: T;
 };
 export type Taggable<T extends string | number = string> = Tag<T> | PartialTag<T> | T;
+export type CreateTagRules<T extends number | string = string> = {
+    create: (input: string) => Tag<T>;
+    allow: (input: string) => boolean;
+};
+export type UnnormalizedCreateTagRules<T extends number | string = string> = boolean | {
+    create?: ((input: string) => PartialTag<T>) | "slugify" | "uuid";
+    allow?: (input: string) => boolean;
+};
 export declare function normalizeTag<T extends string | number = string>(opt: Taggable<T>): Tag<T>;
+export declare function normalizeCreateTagRules<T extends string | number = string>(rules: UnnormalizedCreateTagRules<T>): CreateTagRules<T>;

package/dist/components/controls/tag-control/props.js

@@ -1,6 +1,6 @@
 import "react/jsx-runtime";
 import '../../../assets/styles.css';import '../../../assets/style7.css';import '../../../assets/style6.css';import '../../../assets/style5.css';import '../../../assets/style4.css';import '../../../assets/style3.css';import '../../../assets/style2.css';import '../../../assets/style.css';import '../../../assets/style10.css';/* empty css                      */
-import { getRandomTheme as i } from "../../../primitives/colourway/util.js";
+import { getRandomTheme as t } from "../../../primitives/colourway/util.js";
 import "react";
 /* empty css                      */
 /* empty css                      */
@@ -13,17 +13,38 @@ import "../../../primitives/symbol/index.js";
 /* empty css                      */
 /* empty css                      */
 /* empty css                       */
-function w(r) {
+import { slugify as i } from "../../../utils/string.js";
+function S(r) {
   return typeof r == "string" || typeof r == "number" ? {
     value: r,
     label: String(r),
-    colourway: i(r)
+    colourway: t(r)
   } : {
     label: r.label || String(r.value),
-    colourway: i(r.value),
+    colourway: t(r.value),
     ...r
   };
 }
+function U(r) {
+  return {
+    create: (e) => {
+      var o = e;
+      if (typeof r == "boolean" || typeof r.create > "u" || r.create === "slugify")
+        o = i(e);
+      else if (r.create === "uuid")
+        o = crypto.randomUUID();
+      else
+        return {
+          label: e,
+          colourway: t(e),
+          ...r.create(e)
+        };
+      return { label: e, colourway: t(e), value: o };
+    },
+    allow: (e) => r === !1 ? !1 : r === !0 || typeof r.allow > "u" ? e.trim().length >= 1 : r.allow(e)
+  };
+}
 export {
-  w as normalizeTag
+  U as normalizeCreateTagRules,
+  S as normalizeTag
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wrdagency/blockout",
-	"version": "1.0.6",
+	"version": "1.0.8",
 	"description": "A React component library created by WRD.agency",
 	"type": "module",
 	"main": "dist/index.js",