chop-logic-components 3.7.3 → 4.0.0

package/dist/components/molecules/checkbox/CheckboxStateful.js

@@ -0,0 +1,61 @@
+import { jsxs as C, jsx as s } from "react/jsx-runtime";
+import { getClassName as b } from "../../../utils/get-class-name.js";
+import { useCheckboxController as S } from "./Checkbox.controller.js";
+import './Checkbox.css';/* empty css             */
+import { useElementIds as I } from "../../../hooks/use-element-ids/use-element-ids.js";
+import g from "../../atoms/label/Label.js";
+import { ElementSize as N } from "../../../enums/element-size.js";
+import { IconName as n } from "../../../enums/icon-name.js";
+const M = ({
+  name: o,
+  label: c,
+  disabled: t,
+  noLabel: r,
+  required: i = !1,
+  iconPosition: l = "left",
+  defaultChecked: a,
+  onChange: h,
+  id: d,
+  className: p,
+  style: f,
+  tabIndex: x
+}) => {
+  const { handleChange: k, checked: e } = S({ name: o, defaultChecked: a, onChange: h }), { elementId: m } = I(d), u = b([
+    "cl-checkbox",
+    p,
+    {
+      "cl-checkbox_disabled": !!t,
+      "cl-checkbox_checked": e
+    }
+  ]);
+  return /* @__PURE__ */ C("div", { style: f, tabIndex: x, className: u, children: [
+    /* @__PURE__ */ s(
+      "input",
+      {
+        id: m,
+        name: o,
+        type: "checkbox",
+        disabled: t,
+        required: i,
+        checked: e,
+        onChange: k,
+        "aria-label": r ? c : void 0
+      }
+    ),
+    /* @__PURE__ */ s(
+      g,
+      {
+        label: c,
+        required: i,
+        inputId: m,
+        isTextHidden: r,
+        icon: e ? n.CheckSquare : n.Square,
+        iconPosition: l,
+        iconSize: N.Medium
+      }
+    )
+  ] });
+};
+export {
+  M as default
+};

package/dist/components/molecules/checkbox/CheckboxStateless.js

@@ -0,0 +1,59 @@
+import { jsxs as k, jsx as r } from "react/jsx-runtime";
+import { getClassName as b } from "../../../utils/get-class-name.js";
+import './Checkbox.css';/* empty css             */
+import u from "../../atoms/label/Label.js";
+import { ElementSize as S } from "../../../enums/element-size.js";
+import { IconName as a } from "../../../enums/icon-name.js";
+const _ = ({
+  name: c,
+  label: o,
+  disabled: t,
+  noLabel: i,
+  required: s = !1,
+  iconPosition: l = "left",
+  checked: e,
+  onChange: n,
+  id: x,
+  className: p,
+  style: d,
+  tabIndex: f
+}) => {
+  const m = x ?? `checkbox-${c}`, h = b([
+    "cl-checkbox",
+    p,
+    {
+      "cl-checkbox_disabled": !!t,
+      "cl-checkbox_checked": !!e
+    }
+  ]);
+  return /* @__PURE__ */ k("div", { style: d, tabIndex: f, className: h, children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        id: m,
+        name: c,
+        type: "checkbox",
+        disabled: t,
+        required: s,
+        checked: e ?? !1,
+        onChange: n,
+        "aria-label": i ? o : void 0
+      }
+    ),
+    /* @__PURE__ */ r(
+      u,
+      {
+        label: o,
+        required: s,
+        inputId: m,
+        isTextHidden: i,
+        icon: e ? a.CheckSquare : a.Square,
+        iconPosition: l,
+        iconSize: S.Medium
+      }
+    )
+  ] });
+};
+export {
+  _ as default
+};

package/dist/components/molecules/checkbox/index.js

@@ -0,0 +1,3 @@
+export { default } from './Checkbox.js';
+export * from './Checkbox.js';
+import './Checkbox.css';

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

@@ -0,0 +1,47 @@
+import { jsxs as x, jsx as c } from "react/jsx-runtime";
+import { getClassName as d } from "../../../utils/get-class-name.js";
+import '../select/combobox/Combobox.css';/* empty css                              */
+import { MultiSelectComboboxSelectedValues as u } from "./MultiSelectComboboxSelectedValues.js";
+import f from "../../atoms/icon/Icon.js";
+import { ElementSize as C } from "../../../enums/element-size.js";
+import { IconName as S } from "../../../enums/icon-name.js";
+const g = ({
+  opened: e,
+  onClick: m,
+  comboboxId: r,
+  dropdownId: l,
+  name: i,
+  placeholder: s,
+  disabled: a,
+  required: n,
+  values: t
+}) => {
+  const b = t?.filter((o) => o.selected).map((o) => o.id), p = d([
+    "cl-select-combobox__icon",
+    { "cl-select-combobox__icon_opened": e }
+  ]);
+  return /* @__PURE__ */ x(
+    "button",
+    {
+      type: "button",
+      name: i,
+      value: b,
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": e,
+      "aria-controls": l,
+      id: r,
+      onClick: m,
+      disabled: a,
+      "aria-required": n,
+      className: "cl-select-combobox",
+      children: [
+        /* @__PURE__ */ c(u, { values: t, placeholder: s }),
+        /* @__PURE__ */ c(f, { name: S.ChevronDown, className: p, size: C.Small })
+      ]
+    }
+  );
+};
+export {
+  g as MultiSelectCombobox
+};

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

@@ -0,0 +1,31 @@
+import { jsx as r } from "react/jsx-runtime";
+import { getClassName as p } from "../../../utils/get-class-name.js";
+import { handleDropdownListKeyPress as c } from "../../../utils/handle-dropdown-list-key-press.js";
+import '../select/dropdown/Dropdown.css';/* empty css                              */
+import { MultiSelectOption as i } from "./Option.js";
+const x = ({
+  options: e,
+  opened: l,
+  onClose: t,
+  onSelect: d,
+  dropdownId: n
+}) => {
+  const s = p([
+    "cl-select-dropdown",
+    { "cl-select-dropdown_opened": l }
+  ]);
+  return /* @__PURE__ */ r(
+    "ul",
+    {
+      role: "listbox",
+      id: n,
+      tabIndex: -1,
+      onKeyDown: (o) => c({ e: o, options: e, onClose: t }),
+      className: s,
+      children: e.map((o) => /* @__PURE__ */ r(i, { value: o, onSelect: () => d(o.id) }, o.id))
+    }
+  );
+};
+export {
+  x as MultiSelectDropdown
+};

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

@@ -0,0 +1,37 @@
+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
+  };
+}
+export {
+  j as useMultiSelectController
+};

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

@@ -0,0 +1,22 @@
+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 };
+  });
+}
+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
+};

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

@@ -0,0 +1,61 @@
+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
+};

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

@@ -0,0 +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
+};

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

@@ -0,0 +1,40 @@
+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
+};

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

@@ -0,0 +1,2 @@
+export { default } from './MultiSelect.js';
+export * from './MultiSelect.js';

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

@@ -0,0 +1,45 @@
+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
+  };
+}
+export {
+  z as useNumericInputController
+};

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

@@ -0,0 +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}}

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

@@ -0,0 +1,20 @@
+function u({
+  name: n,
+  initialValues: t,
+  defaultValue: r
+}) {
+  return t?.[n] ? Number(t[n]) : r && typeof r == "number" ? r : 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;
+}
+export {
+  u as getNumericInputInitialValue,
+  i as validateNumericInputValue
+};

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

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import r from "./NumericInputStateful.js";
+import u from "./NumericInputStateless.js";
+const n = (t) => t.stateless ? /* @__PURE__ */ e(u, { ...t }) : /* @__PURE__ */ e(r, { ...t });
+export {
+  n as default
+};

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

@@ -0,0 +1,108 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { getClassName as R } from "../../../utils/get-class-name.js";
+import c from "../../atoms/button/Button.js";
+import { useNumericInputController as z } from "./NumericInput.controller.js";
+import './NumericInput.css';/* empty css                 */
+import { useElementIds as A } from "../../../hooks/use-element-ids/use-element-ids.js";
+import F from "../../atoms/label/Label.js";
+import G from "../../atoms/input/Input.js";
+import { IconName as u } from "../../../enums/icon-name.js";
+import { ButtonView as p } from "../../../enums/button-view.js";
+import H from "../../atoms/error-message/ErrorMessage.js";
+const q = ({
+  name: m,
+  label: r,
+  errorMessage: f,
+  onChange: h,
+  onBlur: v,
+  onFocus: I,
+  onIncrement: d,
+  onDecrement: g,
+  validator: C,
+  min: N,
+  max: x,
+  id: w,
+  tabIndex: V,
+  disabled: n = !1,
+  required: o = !1,
+  readOnly: j = !1,
+  hasSpinButtons: k = !0,
+  defaultValue: B = 0,
+  step: i = 1,
+  className: D,
+  style: E
+}) => {
+  const { elementId: a, errorId: l } = A(w), { value: L, valid: s, handleChange: S, handleDecrement: _, handleIncrement: $, minValue: b, maxValue: y } = z({
+    name: m,
+    defaultValue: B,
+    min: N,
+    max: x,
+    onChange: h,
+    required: o,
+    validator: C,
+    step: i,
+    onDecrement: g,
+    onIncrement: d
+  }), M = R(["cl-numeric-input", D]);
+  return /* @__PURE__ */ t("div", { style: E, className: M, children: [
+    /* @__PURE__ */ e(F, { label: r, required: o, inputId: a }),
+    /* @__PURE__ */ t(
+      G,
+      {
+        id: a,
+        name: m,
+        type: "number",
+        disabled: n,
+        required: o,
+        readOnly: j,
+        placeholder: "0",
+        "aria-invalid": !s,
+        "aria-errormessage": l,
+        value: L.toString(),
+        onChange: S,
+        min: b,
+        max: y,
+        step: i,
+        onBlur: v,
+        onFocus: I,
+        tabIndex: V,
+        children: [
+          k && /* @__PURE__ */ t("span", { children: [
+            /* @__PURE__ */ e(
+              c,
+              {
+                onClick: _,
+                view: p.Inner,
+                label: `Decrement value for ${r}`,
+                icon: u.ChevronLeft,
+                disabled: n
+              }
+            ),
+            /* @__PURE__ */ e(
+              c,
+              {
+                onClick: $,
+                view: p.Inner,
+                label: `Increment value for ${r}`,
+                icon: u.ChevronRight,
+                disabled: n
+              }
+            )
+          ] }),
+          /* @__PURE__ */ e(
+            H,
+            {
+              errorId: l,
+              message: f,
+              visible: !s,
+              className: "cl-numeric-input__error-message"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  q as default
+};

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

@@ -0,0 +1,96 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { getClassName as _ } from "../../../utils/get-class-name.js";
+import c from "../../atoms/button/Button.js";
+import './NumericInput.css';/* empty css                 */
+import b from "../../atoms/label/Label.js";
+import y from "../../atoms/input/Input.js";
+import { IconName as l } from "../../../enums/icon-name.js";
+import { ButtonView as p } from "../../../enums/button-view.js";
+import D from "../../atoms/error-message/ErrorMessage.js";
+const K = ({
+  name: e,
+  label: t,
+  errorMessage: o,
+  onChange: u,
+  onBlur: f,
+  onFocus: v,
+  onIncrement: I,
+  onDecrement: h,
+  min: d,
+  max: C,
+  id: g,
+  tabIndex: N,
+  disabled: n = !1,
+  required: m = !1,
+  readOnly: $ = !1,
+  hasSpinButtons: w = !0,
+  step: x = 1,
+  className: j,
+  value: k,
+  defaultValue: B,
+  style: L
+}) => {
+  const s = g ?? `numeric-input-${e}`, a = `${e}-error`, S = _(["cl-numeric-input", j]);
+  return /* @__PURE__ */ i("div", { style: L, className: S, children: [
+    /* @__PURE__ */ r(b, { label: t, required: m, inputId: s }),
+    /* @__PURE__ */ i(
+      y,
+      {
+        id: s,
+        name: e,
+        type: "number",
+        defaultValue: B,
+        disabled: n,
+        required: m,
+        readOnly: $,
+        placeholder: "0",
+        "aria-invalid": !!o,
+        "aria-errormessage": a,
+        value: k?.toString() ?? "",
+        onChange: u,
+        min: d,
+        max: C,
+        step: x,
+        onBlur: f,
+        onFocus: v,
+        tabIndex: N,
+        children: [
+          w && /* @__PURE__ */ i("span", { children: [
+            /* @__PURE__ */ r(
+              c,
+              {
+                onClick: h,
+                view: p.Inner,
+                label: `Decrement value for ${t}`,
+                icon: l.ChevronLeft,
+                disabled: n
+              }
+            ),
+            /* @__PURE__ */ r(
+              c,
+              {
+                onClick: I,
+                view: p.Inner,
+                label: `Increment value for ${t}`,
+                icon: l.ChevronRight,
+                disabled: n
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r(
+            D,
+            {
+              errorId: a,
+              message: o,
+              visible: !!o,
+              className: "cl-numeric-input__error-message"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  K as default
+};

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

@@ -0,0 +1,3 @@
+export { default } from './NumericInput.js';
+export * from './NumericInput.js';
+import './NumericInput.css';