chop-logic-components 4.0.1 → 4.0.3

package/dist/components/molecules/multi-select/MultiSelect.controller.js

@@ -1,37 +1,33 @@
-import { useState as i, useContext as I, useRef as p, useCallback as M } from "react";
-import { getMultiSelectInitialValues as v, getMultiSelectFormValues as f, getMultiSelectUpdatedValues as x } from "./MultiSelect.helpers.js";
-import { FormContext as O } from "../../contexts/form/FormContext.js";
-import { useResetFormInput as b } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
-function j({
-  name: e,
-  defaultValue: m,
-  onChange: d,
-  options: g
-}) {
-  const [u, t] = i(!1), { onChangeFormInput: n, initialValues: C } = I(O), o = v({
-    name: e,
-    options: g,
-    initialValues: C,
-    defaultValue: m
-  }), [r, a] = i(o), c = p(n), l = p(o);
-  c.current = n, l.current = o;
-  const h = () => t(!1), S = () => t(!u), V = (R) => {
-    const s = x(r, R);
-    a(s), d?.(s), n?.({ name: e, value: f(s) });
-  }, F = M(() => {
-    t(!1), a(l.current), c.current?.({
-      name: e,
-      value: f(l.current)
-    });
-  }, [e]);
-  return b(F), {
-    handleClose: h,
-    handleToggle: S,
-    handleSelect: V,
-    opened: u,
-    values: r
-  };
+import { FormContext as e } from "../../contexts/form/FormContext.js";
+import { useResetFormInput as t } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
+import { getMultiSelectFormValues as n, getMultiSelectInitialValues as r, getMultiSelectUpdatedValues as i } from "./MultiSelect.helpers.js";
+import { useCallback as a, useContext as o, useRef as s, useState as c } from "react";
+//#region src/components/molecules/multi-select/MultiSelect.controller.ts
+function l({ name: l, defaultValue: u, onChange: d, options: f }) {
+	let [p, m] = c(!1), { onChangeFormInput: h, initialValues: g } = o(e), _ = r({
+		name: l,
+		options: f,
+		initialValues: g,
+		defaultValue: u
+	}), [v, y] = c(_), b = s(h), x = s(_);
+	return b.current = h, x.current = _, t(a(() => {
+		m(!1), y(x.current), b.current?.({
+			name: l,
+			value: n(x.current)
+		});
+	}, [l])), {
+		handleClose: () => m(!1),
+		handleToggle: () => m(!p),
+		handleSelect: (e) => {
+			let t = i(v, e);
+			y(t), d?.(t), h?.({
+				name: l,
+				value: n(t)
+			});
+		},
+		opened: p,
+		values: v
+	};
 }
-export {
-  j as useMultiSelectController
-};
+//#endregion
+export { l as useMultiSelectController };

package/dist/components/molecules/multi-select/MultiSelect.helpers.js

@@ -1,22 +1,19 @@
-function u({
-  name: e,
-  options: t,
-  initialValues: d,
-  defaultValue: r
-}) {
-  return t.map((c) => {
-    let l = !1;
-    return d?.[e] && Array.isArray(d[e]) && d[e].find(
-      (s) => s === c.id || s?.id === c.id
-    ) && (l = !0), !d?.[e] && Array.isArray(r) && r.find((s) => s === c.id) && (l = !0), { ...c, selected: l };
-  });
+//#region src/components/molecules/multi-select/MultiSelect.helpers.ts
+function e({ name: e, options: t, initialValues: n, defaultValue: r }) {
+	return t.map((t) => {
+		let i = !1;
+		return n?.[e] && Array.isArray(n[e]) && n[e].find((e) => e === t.id || e?.id === t.id) && (i = !0), !n?.[e] && Array.isArray(r) && r.find((e) => e === t.id) && (i = !0), {
+			...t,
+			selected: i
+		};
+	});
 }
-const i = (e) => e.filter((t) => t.selected).map((t) => t.id), n = (e, t) => {
-  const d = e.find((r) => r.id === t);
-  return e.map((r) => r.id === t ? { ...r, selected: !d?.selected } : r);
-};
-export {
-  i as getMultiSelectFormValues,
-  u as getMultiSelectInitialValues,
-  n as getMultiSelectUpdatedValues
+var t = (e) => e.filter((e) => e.selected).map((e) => e.id), n = (e, t) => {
+	let n = e.find((e) => e.id === t);
+	return e.map((e) => e.id === t ? {
+		...e,
+		selected: !n?.selected
+	} : e);
 };
+//#endregion
+export { t as getMultiSelectFormValues, e as getMultiSelectInitialValues, n as getMultiSelectUpdatedValues };

package/dist/components/molecules/multi-select/MultiSelect.js

@@ -1,61 +1,60 @@
-import { jsxs as k, jsx as t } from "react/jsx-runtime";
-import { getClassName as M } from "../../../utils/get-class-name.js";
-import { useRef as g } from "react";
-import '../select/Select.css';/* empty css                   */
-import { MultiSelectCombobox as y } from "./MultiSelect.Combobox.js";
-import { useMultiSelectController as N } from "./MultiSelect.controller.js";
-import { MultiSelectDropdown as j } from "./MultiSelect.Dropdown.js";
-import { useElementIds as v } from "../../../hooks/use-element-ids/use-element-ids.js";
-import { useClickOutside as w } from "../../../hooks/use-click-outside/use-click-outside.js";
-import { useKeyPress as E } from "../../../hooks/use-key-press/use-key-press.js";
-import K from "../../atoms/label/Label.js";
-const G = ({
-  options: p,
-  name: l,
-  label: d,
-  required: s = !1,
-  placeholder: u = "Not selected",
-  disabled: r = !1,
-  onChange: f,
-  defaultValue: a,
-  id: C,
-  className: S,
-  ...x
-}) => {
-  const e = g(null), { elementId: m, dropdownId: n } = v(C), { handleClose: o, handleSelect: I, handleToggle: b, opened: i, values: c } = N({
-    name: l,
-    options: p,
-    defaultValue: a,
-    onChange: f
-  }), h = M(["cl-select", S]);
-  return w({ ref: e, onClickOutsideHandler: o }), E({ keyCode: "Escape", ref: e, onKeyPress: o }), /* @__PURE__ */ k("div", { ref: e, ...x, className: h, children: [
-    /* @__PURE__ */ t(K, { label: d, required: s, inputId: m, disabled: r }),
-    /* @__PURE__ */ t(
-      y,
-      {
-        name: l,
-        opened: i,
-        comboboxId: m,
-        dropdownId: n,
-        onClick: b,
-        values: c,
-        placeholder: u,
-        disabled: r,
-        required: s
-      }
-    ),
-    /* @__PURE__ */ t(
-      j,
-      {
-        options: c,
-        opened: i,
-        onClose: o,
-        dropdownId: n,
-        onSelect: I
-      }
-    )
-  ] });
-};
-export {
-  G as default
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import t from "../../atoms/label/Label2.js";
+import { useClickOutside as n } from "../../../hooks/use-click-outside/use-click-outside.js";
+import { useElementIds as r } from "../../../hooks/use-element-ids/use-element-ids.js";
+import { useKeyPress as i } from "../../../hooks/use-key-press/use-key-press.js";
+import '../select/Select.css';/* empty css               */
+import { MultiSelectCombobox as a } from "./MultiSelect.Combobox.js";
+import { useMultiSelectController as o } from "./MultiSelect.controller.js";
+import { MultiSelectDropdown as s } from "./MultiSelect.Dropdown.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useRef as u } from "react";
+//#region src/components/molecules/multi-select/MultiSelect.tsx
+var d = ({ options: d, name: f, label: p, required: m = !1, placeholder: h = "Not selected", disabled: g = !1, onChange: _, defaultValue: v, id: y, className: b, ...x }) => {
+	let S = u(null), { elementId: C, dropdownId: w } = r(y), { handleClose: T, handleSelect: E, handleToggle: D, opened: O, values: k } = o({
+		name: f,
+		options: d,
+		defaultValue: v,
+		onChange: _
+	}), A = e(["cl-select", b]);
+	return n({
+		ref: S,
+		onClickOutsideHandler: T
+	}), i({
+		keyCode: "Escape",
+		ref: S,
+		onKeyPress: T
+	}), /* @__PURE__ */ l("div", {
+		ref: S,
+		...x,
+		className: A,
+		children: [
+			/* @__PURE__ */ c(t, {
+				label: p,
+				required: m,
+				inputId: C,
+				disabled: g
+			}),
+			/* @__PURE__ */ c(a, {
+				name: f,
+				opened: O,
+				comboboxId: C,
+				dropdownId: w,
+				onClick: D,
+				values: k,
+				placeholder: h,
+				disabled: g,
+				required: m
+			}),
+			/* @__PURE__ */ c(s, {
+				options: k,
+				opened: O,
+				onClose: T,
+				dropdownId: w,
+				onSelect: E
+			})
+		]
+	});
 };
+//#endregion
+export { d as default };

package/dist/components/molecules/multi-select/MultiSelectComboboxSelectedValues.js

@@ -1,8 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
-const o = ({ values: l, placeholder: s }) => {
-  const e = l ? l.filter((n) => n.selected).map((n) => n.label) : [], c = e.length !== 0 && e.length === l?.length, r = e.length === 1, i = e.length > 1;
-  return c ? /* @__PURE__ */ t("span", { children: "All items selected" }) : r ? /* @__PURE__ */ t("span", { children: e[0] }) : i ? /* @__PURE__ */ t("span", { children: `${e.length} items selected` }) : /* @__PURE__ */ t("span", { children: s });
-};
-export {
-  o as MultiSelectComboboxSelectedValues
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/molecules/multi-select/MultiSelectComboboxSelectedValues.tsx
+var t = ({ values: t, placeholder: n }) => {
+	let r = t ? t.filter((e) => e.selected).map((e) => e.label) : [], i = r.length !== 0 && r.length === t?.length, a = r.length === 1, o = r.length > 1;
+	return i ? /* @__PURE__ */ e("span", { children: "All items selected" }) : a ? /* @__PURE__ */ e("span", { children: r[0] }) : o ? /* @__PURE__ */ e("span", { children: `${r.length} items selected` }) : /* @__PURE__ */ e("span", { children: n });
 };
+//#endregion
+export { t as MultiSelectComboboxSelectedValues };

package/dist/components/molecules/multi-select/Option.js

@@ -1,40 +1,41 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
-import { getClassName as f } from "../../../utils/get-class-name.js";
-import '../select/option/Option.css';/* empty css                          */
-import a from "../../atoms/icon/Icon.js";
-import { ElementSize as s } from "../../../enums/element-size.js";
-import { IconName as c } from "../../../enums/icon-name.js";
-const C = ({ value: i, onSelect: l }) => {
-  const { id: e, label: r, selected: o } = i, m = f([
-    "cl-select-option",
-    "cl-select-option_multi",
-    { "cl-select-option_selected": o }
-  ]);
-  return /* @__PURE__ */ d(
-    "li",
-    {
-      id: e,
-      role: "option",
-      "aria-selected": o,
-      tabIndex: 0,
-      onKeyDown: ((p) => (n) => {
-        switch (n.key) {
-          case " ":
-          case "SpaceBar":
-          case "Enter":
-            n.preventDefault(), l(p);
-            break;
-        }
-      })(e),
-      onClick: () => l(e),
-      className: m,
-      children: [
-        o ? /* @__PURE__ */ t(a, { name: c.CheckSquare, size: s.Small }) : /* @__PURE__ */ t(a, { name: c.Square, size: s.Small }),
-        /* @__PURE__ */ t("span", { children: r })
-      ]
-    }
-  );
-};
-export {
-  C as MultiSelectOption
+import { getClassName as e } from "../../../utils/get-class-name.js";
+import { ElementSize as t } from "../../../enums/element-size.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+import r from "../../atoms/icon/Icon2.js";
+import '../select/option/Option.css';/* empty css                      */
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/molecules/multi-select/Option.tsx
+var o = ({ value: o, onSelect: s }) => {
+	let { id: c, label: l, selected: u } = o, d = e([
+		"cl-select-option",
+		"cl-select-option_multi",
+		{ "cl-select-option_selected": u }
+	]), f = (e) => (t) => {
+		switch (t.key) {
+			case " ":
+			case "SpaceBar":
+			case "Enter":
+				t.preventDefault(), s(e);
+				break;
+			default: break;
+		}
+	};
+	return /* @__PURE__ */ a("li", {
+		id: c,
+		role: "option",
+		"aria-selected": u,
+		tabIndex: 0,
+		onKeyDown: f(c),
+		onClick: () => s(c),
+		className: d,
+		children: [u ? /* @__PURE__ */ i(r, {
+			name: n.CheckSquare,
+			size: t.Small
+		}) : /* @__PURE__ */ i(r, {
+			name: n.Square,
+			size: t.Small
+		}), /* @__PURE__ */ i("span", { children: l })]
+	});
 };
+//#endregion
+export { o as MultiSelectOption };

package/dist/components/molecules/numeric-input/NumericInput.controller.js

@@ -1,45 +1,51 @@
-import { useContext as G, useState as V, useRef as f, useCallback as M } from "react";
-import { getNumericInputInitialValue as T, validateNumericInputValue as k } from "./NumericInput.helpers.js";
-import { FormContext as D } from "../../contexts/form/FormContext.js";
-import { useResetFormInput as X } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
-function z({
-  name: t,
-  defaultValue: v,
-  onChange: h,
-  onDecrement: C,
-  onIncrement: R,
-  min: c,
-  max: i,
-  step: s,
-  required: b,
-  validator: E
-}) {
-  const { onChangeFormInput: u, initialValues: F } = G(D), r = T({ initialValues: F, defaultValue: v, name: t }), m = i ? Number(i) : Number.MAX_SAFE_INTEGER, d = c ? Number(c) : Number.MIN_SAFE_INTEGER, [o, p] = V(r), [g, I] = V(!0), N = f(u), a = f(r);
-  N.current = u, a.current = r;
-  const l = (e) => {
-    p(e);
-    const n = k({ value: e, required: b, validator: E, maxValue: m, minValue: d });
-    I(n), u?.({ name: t, value: e, valid: n });
-  }, _ = (e) => {
-    const n = Number(e.target.value);
-    l(n), h?.(e);
-  }, x = () => {
-    l(o + s), R?.();
-  }, A = () => {
-    l(o - s), C?.();
-  }, S = M(() => {
-    p(a.current), I(!0), N.current?.({ name: t, value: a.current, valid: !0 });
-  }, [t]);
-  return X(S), {
-    handleChange: _,
-    value: o,
-    valid: g,
-    minValue: d,
-    maxValue: m,
-    handleIncrement: x,
-    handleDecrement: A
-  };
+import { FormContext as e } from "../../contexts/form/FormContext.js";
+import { useResetFormInput as t } from "../../../hooks/use-reset-form-input/use-reset-form-input.js";
+import { getNumericInputInitialValue as n, validateNumericInputValue as r } from "./NumericInput.helpers.js";
+import { useCallback as i, useContext as a, useRef as o, useState as s } from "react";
+//#region src/components/molecules/numeric-input/NumericInput.controller.ts
+function c({ name: c, defaultValue: l, onChange: u, onDecrement: d, onIncrement: f, min: p, max: m, step: h, required: g, validator: _ }) {
+	let { onChangeFormInput: v, initialValues: y } = a(e), b = n({
+		initialValues: y,
+		defaultValue: l,
+		name: c
+	}), x = m ? Number(m) : 2 ** 53 - 1, S = p ? Number(p) : -(2 ** 53 - 1), [C, w] = s(b), [T, E] = s(!0), D = o(v), O = o(b);
+	D.current = v, O.current = b;
+	let k = (e) => {
+		w(e);
+		let t = r({
+			value: e,
+			required: g,
+			validator: _,
+			maxValue: x,
+			minValue: S
+		});
+		E(t), v?.({
+			name: c,
+			value: e,
+			valid: t
+		});
+	};
+	return t(i(() => {
+		w(O.current), E(!0), D.current?.({
+			name: c,
+			value: O.current,
+			valid: !0
+		});
+	}, [c])), {
+		handleChange: (e) => {
+			k(Number(e.target.value)), u?.(e);
+		},
+		value: C,
+		valid: T,
+		minValue: S,
+		maxValue: x,
+		handleIncrement: () => {
+			k(C + h), f?.();
+		},
+		handleDecrement: () => {
+			k(C - h), d?.();
+		}
+	};
 }
-export {
-  z as useNumericInputController
-};
+//#endregion
+export { c as useNumericInputController };

package/dist/components/molecules/numeric-input/NumericInput.css

@@ -1 +1 @@
-.cl-numeric-input{display:flex;flex-direction:column;gap:var(--cl-m-gap);width:100%}.cl-numeric-input__error-message{position:absolute;right:0;top:44px}@media screen and (min-width:640px){.cl-numeric-input__error-message{top:48px}}@media screen and (min-width:1024px){.cl-numeric-input__error-message{top:52px}}
+.cl-numeric-input{gap:var(--cl-m-gap);flex-direction:column;width:100%;display:flex}.cl-numeric-input__error-message{position:absolute;top:44px;right:0}@media screen and (width>=640px){.cl-numeric-input__error-message{top:48px}}@media screen and (width>=1024px){.cl-numeric-input__error-message{top:52px}}

package/dist/components/molecules/numeric-input/NumericInput.helpers.js

@@ -1,20 +1,9 @@
-function u({
-  name: n,
-  initialValues: t,
-  defaultValue: r
-}) {
-  return t?.[n] ? Number(t[n]) : r && typeof r == "number" ? r : 0;
+//#region src/components/molecules/numeric-input/NumericInput.helpers.ts
+function e({ name: e, initialValues: t, defaultValue: n }) {
+	return t?.[e] ? Number(t[e]) : n && typeof n == "number" ? n : 0;
 }
-function i({
-  value: n,
-  required: t,
-  validator: r,
-  maxValue: f,
-  minValue: e
-}) {
-  return t && !r && n === void 0 ? !1 : r && typeof r == "function" ? r(n) : f && e && n && !r ? n <= f && n >= e : !0;
+function t({ value: e, required: t, validator: n, maxValue: r, minValue: i }) {
+	return t && !n && e === void 0 ? !1 : n && typeof n == "function" ? n(e) : r && i && e && !n ? e <= r && e >= i : !0;
 }
-export {
-  u as getNumericInputInitialValue,
-  i as validateNumericInputValue
-};
+//#endregion
+export { e as getNumericInputInitialValue, t as validateNumericInputValue };

package/dist/components/molecules/numeric-input/NumericInput2.js

@@ -0,0 +1,7 @@
+import e from "./NumericInputStateful.js";
+import t from "./NumericInputStateless.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/molecules/numeric-input/NumericInput.tsx
+var r = (r) => r.stateless ? /* @__PURE__ */ n(t, { ...r }) : /* @__PURE__ */ n(e, { ...r });
+//#endregion
+export { r as default };