@wrdagency/blockout 1.0.6 → 1.0.7

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 u } from "../../../primitives/colourway/index.js";
+import { noop as S } from "../../../utils/noop.js";
+import { useState as V, useMemo as y } 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,73 @@ 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 z } from "../../../Check.es-CMkTf2It.js";
+import { e as R } from "../../../Plus.es-DJ5SuqNv.js";
+import { e as k } from "../../../X.es-TbGOnXOO.js";
+import { m as B } from "../../../match-sorter.esm-MNVE8H_6.js";
+import { BaseControl as I } from "../base-control/index.js";
+import { useBaseControlProps as j } from "../base-control/props.js";
+import { T as L, a as M, b as O, c as A, d as K, C as U, e as $ } from "../../../tag-remove-BVa8oSsq.js";
+import { normalizeTag as _, normalizeCreateTagRules as q } 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 D, a as E, c as g } from "../../../MAXQOH4L-DBaf8WKp.js";
+function vo(d) {
+  const { baseProps: h, controlProps: v } = j(d, {
     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, b] = V(""), {
+    value: f = [],
+    onChangeValue: C = S,
+    options: N = [],
+    create: w = !1
+  } = v, m = N.map(_), c = f.map(_), r = q(w), n = y(() => B(m, a, {
+    baseSort: (o, l) => o.index < l.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]), p = !n.length && r.allow(a), x = n.length > 0 || p, T = (o) => {
+    const l = o.map((s) => {
+      const i = m.find((P) => P.value == s);
+      if (i)
+        return i;
+      if (r.allow(s))
+        return r.create(s);
+    }).filter(Boolean);
+    C(l);
   };
   return /* @__PURE__ */ e(
-    I,
+    L,
     {
-      values: c.map((o) => o.value),
-      setValues: C,
+      values: c.map((o) => String(o.value)),
+      setValues: T,
       value: a,
-      setValue: d,
-      children: /* @__PURE__ */ e(k, { ...u, children: /* @__PURE__ */ t(j, { className: "component-tag-control__box", children: [
+      setValue: b,
+      children: /* @__PURE__ */ e(I, { ...h, children: /* @__PURE__ */ t(M, { className: "component-tag-control__box", children: [
         c.map((o) => /* @__PURE__ */ t(
-          p,
+          u,
           {
-            value: o.value,
-            as: B,
+            value: String(o.value),
+            as: O,
             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(A, { className: "component-tag-control__tag__remove", children: /* @__PURE__ */ e(k, {}) })
             ]
           },
           o.value
         )),
-        /* @__PURE__ */ t(A, { children: [
+        /* @__PURE__ */ t(D, { children: [
           /* @__PURE__ */ e(
-            K,
+            E,
             {
               autoSelect: !0,
               showMinLength: 1,
               showOnKeyPress: !0,
               autoComplete: "both",
-              render: /* @__PURE__ */ e(M, {}),
+              render: /* @__PURE__ */ e(K, {}),
               className: "component-tag-control__input"
             }
           ),
-          f && /* @__PURE__ */ t(
-            O,
+          x && /* @__PURE__ */ t(
+            U,
             {
               className: "component-tag-control__popover",
               "data-colour-scheme": "invert",
@@ -88,31 +91,31 @@ const io = (_) => {
               overflowPadding: 4,
               children: [
                 n.map((o) => /* @__PURE__ */ t(
-                  i,
+                  g,
                   {
-                    value: o.value,
+                    value: String(o.value),
                     className: "component-tag-control__option",
                     children: [
                       /* @__PURE__ */ e(
-                        p,
+                        u,
                         {
                           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($, { className: "component-tag-control__option__check", children: /* @__PURE__ */ e(z, {}) })
                     ]
                   },
                   o.value
                 )),
-                !n.length && l && /* @__PURE__ */ t(
-                  i,
+                p && /* @__PURE__ */ t(
+                  g,
                   {
-                    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(R, { className: "component-tag-control__option--add" }),
                       /* @__PURE__ */ t("span", { className: "component-tag-control__option__label", children: [
                         'Add "',
                         a.toUpperCase(),
@@ -128,7 +131,7 @@ const io = (_) => {
       ] }) })
     }
   );
-};
+}
 export {
-  io as TagControl
+  vo 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,45 @@ import "../../../primitives/symbol/index.js";
 /* empty css                      */
 /* empty css                      */
 /* empty css                       */
-function w(r) {
+import { slugify as a } from "../../../utils/string.js";
+function U(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 h(r) {
+  const e = (o) => {
+    var i = o;
+    if (typeof r == "boolean" || typeof r.create > "u" || r.create === "slugify")
+      i = a(o);
+    else if (r.create === "uuid")
+      i = crypto.randomUUID();
+    else
+      return {
+        label: o,
+        colourway: t(o),
+        ...r.create(o)
+      };
+    return { label: o, colourway: t(o), value: i };
+  };
+  return r === !0 ? {
+    create: e,
+    allow: () => !0
+  } : r === !1 ? {
+    create: e,
+    allow: () => !1
+  } : {
+    create: e,
+    allow: r.allow ? r.allow : () => !0
+  };
+}
 export {
-  w as normalizeTag
+  h as normalizeCreateTagRules,
+  U as normalizeTag
 };

package/package.json

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