chop-logic-components 4.0.1 → 4.1.0

package/dist/components/organisms/tabs/Tabs.js

@@ -1,80 +0,0 @@
-import { jsxs as H, jsx as b } from "react/jsx-runtime";
-import { getClassName as L } from "../../../utils/get-class-name.js";
-import { useState as r } from "react";
-import { TabContent as M } from "./content/TabContent.js";
-import { TabList as P } from "./list/TabList.js";
-import './Tabs.css';/* empty css         */
-import { OrientationMode as C } from "../../../enums/orientation-mode.js";
-const Q = ({
-  tabs: T,
-  defaultTabId: o,
-  className: g,
-  mode: m = C.Horizontal,
-  stretched: u = !1,
-  editable: S = !1,
-  extendable: f = !1,
-  extendedTabLabel: v = "New Tab",
-  extendedTabContent: h,
-  onTabTitleChange: w,
-  onTabAdd: x,
-  onTabSelect: A,
-  onTabDelete: D,
-  ...N
-}) => {
-  const [l, i] = r(T), $ = T.length, [p, j] = r($ + 1), n = l.map((e) => e.id), I = n.map((e) => `tabpanel_${e}`), O = o && n.includes(o) ? o : n[0], [c, _] = r(O), z = L([
-    "cl-tabs",
-    g,
-    { "cl-tabs_vertical": m === C.Vertical }
-  ]), d = (e) => {
-    _(e), A?.(e);
-  };
-  return /* @__PURE__ */ H("div", { ...N, className: z, children: [
-    /* @__PURE__ */ b(
-      P,
-      {
-        tabs: l,
-        selectedTabId: c,
-        tabPanelIds: I,
-        onTabSelect: d,
-        onTabTitleChange: (e, a) => {
-          i(
-            (t) => t.map((s) => s.id === e ? { ...s, title: a } : s)
-          ), w?.(e, a);
-        },
-        mode: m,
-        tabIds: n,
-        stretched: u,
-        editable: S,
-        extendable: f,
-        onTabAdd: () => {
-          const e = `added-tab-${p}`, a = v || `Tab ${p}`, t = {
-            id: e,
-            title: a,
-            content: h || /* @__PURE__ */ b("div", {})
-          };
-          i((s) => [...s, t]), j((s) => s + 1), x?.(), d(e);
-        },
-        onTabDelete: (e) => {
-          if (i((a) => a.filter((t) => t.id !== e)), c === e) {
-            const a = n.indexOf(e);
-            let t;
-            a > 0 ? t = n[a - 1] : n.length > 1 ? t = n[1] : t = void 0, t && d(t);
-          }
-          D?.(e);
-        }
-      }
-    ),
-    /* @__PURE__ */ b(
-      M,
-      {
-        tabs: l,
-        selectedTabId: c,
-        extendedTabContent: h,
-        extendable: f
-      }
-    )
-  ] });
-};
-export {
-  Q as default
-};

package/dist/components/organisms/tabs/button/TabButton.js

@@ -1,111 +0,0 @@
-import { jsx as l, jsxs as B, Fragment as A } from "react/jsx-runtime";
-import { getClassName as F } from "../../../../utils/get-class-name.js";
-import { useState as E, useRef as O, useId as q, useEffect as g } from "react";
-import { TabEditInput as G } from "../edit-input/TabEditInput.js";
-import './TabButton.css';/* empty css              */
-import { OrientationMode as H } from "../../../../enums/orientation-mode.js";
-import w from "../../../atoms/button/Button.js";
-import { ElementSize as C } from "../../../../enums/element-size.js";
-import { IconName as I } from "../../../../enums/icon-name.js";
-import { ButtonView as v } from "../../../../enums/button-view.js";
-const nt = ({
-  title: e,
-  onTabSelect: T,
-  onTabTitleChange: k,
-  onTabDelete: d,
-  tabId: c,
-  isSelected: a,
-  isDisabled: o = !1,
-  stretched: y = !1,
-  editable: f = !1,
-  extendable: V = !1,
-  tabPanelId: N,
-  mode: M
-}) => {
-  const [n, i] = E(!1), [r, s] = E(e), p = O(null), m = q(), _ = f && !o && a, b = V && !o && !!d && a, x = _ || b, z = F([
-    "cl-tab__wrapper",
-    {
-      "cl-tab__wrapper_disabled": o,
-      "cl-tab__wrapper_vertical": M === H.Vertical,
-      "cl-tab__wrapper_selected": a,
-      "cl-tab__wrapper_stretched": y,
-      "cl-tab__wrapper_editable": f,
-      "cl-tab__wrapper_inactive": !a
-    }
-  ]);
-  g(() => {
-    n && p.current && (p.current.focus(), p.current.select());
-  }, [n]), g(() => {
-    s(e);
-  }, [e]);
-  const S = () => {
-    o || i(!n);
-  }, j = () => {
-    n || T(c);
-  }, D = (t) => {
-    s(t.target.value);
-  }, K = (t) => {
-    t.relatedTarget?.id === m || u();
-  }, R = (t) => {
-    t.key === "Enter" ? (t.preventDefault(), u()) : t.key === "Escape" && (t.preventDefault(), h());
-  }, u = () => {
-    r.trim() && r !== e ? k?.(r.trim()) : s(e), i(!1);
-  }, h = () => {
-    s(e), i(!1);
-  };
-  return /* @__PURE__ */ l("span", { className: z, children: n ? /* @__PURE__ */ l(
-    G,
-    {
-      tabId: c,
-      editValue: r,
-      isEditMode: n,
-      onInputChange: D,
-      onInputBlur: K,
-      onInputKeyDown: R,
-      onSave: u,
-      onCancel: h,
-      cancelButtonId: m
-    }
-  ) : /* @__PURE__ */ B(A, { children: [
-    /* @__PURE__ */ l(
-      "button",
-      {
-        role: "tab",
-        id: c,
-        onClick: j,
-        "aria-selected": a,
-        "aria-controls": N,
-        className: "cl-tab",
-        disabled: o,
-        children: r
-      }
-    ),
-    x && /* @__PURE__ */ B("span", { className: "cl-tab__buttons", children: [
-      _ && /* @__PURE__ */ l(
-        w,
-        {
-          view: v.Icon,
-          icon: I.Edit3,
-          onClick: S,
-          label: "Edit tab",
-          tooltip: "Edit tab",
-          iconSize: C.Small
-        }
-      ),
-      b && /* @__PURE__ */ l(
-        w,
-        {
-          view: v.Icon,
-          icon: I.Trash2,
-          onClick: () => d?.(c),
-          label: "Delete tab",
-          tooltip: "Delete tab",
-          iconSize: C.Small
-        }
-      )
-    ] })
-  ] }) });
-};
-export {
-  nt as TabButton
-};

package/dist/components/organisms/tabs/content/TabContent.js

@@ -1,19 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import './TabContent.css';/* empty css               */
-const l = ({ tabs: o, selectedTabId: t, extendable: a, extendedTabContent: e }) => {
-  const n = o.find((c) => c.id === t)?.content, i = `tabpanel_${t}`;
-  return /* @__PURE__ */ d(
-    "div",
-    {
-      role: "tabpanel",
-      "data-testid": "tab-content",
-      "aria-labelledby": t,
-      id: i,
-      className: "cl-tab-content",
-      children: a && !n ? e : n
-    }
-  );
-};
-export {
-  l as TabContent
-};

package/dist/components/organisms/tabs/edit-input/TabEditInput.js

@@ -1,64 +0,0 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { useRef as h, useEffect as S } from "react";
-import './TabEditInput.css';/* empty css                 */
-import o from "../../../atoms/button/Button.js";
-import { ElementSize as c } from "../../../../enums/element-size.js";
-import { IconName as r } from "../../../../enums/icon-name.js";
-import { ButtonView as a } from "../../../../enums/button-view.js";
-const g = ({
-  tabId: l,
-  isEditMode: n,
-  editValue: m,
-  onInputChange: u,
-  onInputBlur: s,
-  onInputKeyDown: p,
-  onSave: f,
-  onCancel: b,
-  cancelButtonId: d
-}) => {
-  const t = h(null);
-  return S(() => {
-    n && t.current && (t.current.focus(), t.current.select());
-  }, [n]), /* @__PURE__ */ i("div", { className: "cl-tab-edit-container", children: [
-    /* @__PURE__ */ e(
-      "input",
-      {
-        ref: t,
-        id: `${l}-input`,
-        type: "text",
-        value: m,
-        onChange: u,
-        onBlur: s,
-        onKeyDown: p,
-        className: "cl-tab-edit-container__input",
-        maxLength: 50
-      }
-    ),
-    /* @__PURE__ */ i("span", { className: "cl-tab-edit-container__buttons", children: [
-      /* @__PURE__ */ e(
-        o,
-        {
-          view: a.Icon,
-          icon: r.Check,
-          onClick: f,
-          label: "Save tab title",
-          iconSize: c.Small
-        }
-      ),
-      /* @__PURE__ */ e(
-        o,
-        {
-          view: a.Icon,
-          icon: r.X,
-          onClick: b,
-          label: "Cancel tab title change",
-          id: d,
-          iconSize: c.Small
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  g as TabEditInput
-};

package/dist/components/organisms/tabs/index.js

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

package/dist/components/organisms/tabs/list/TabList.js

@@ -1,67 +0,0 @@
-import { jsxs as h, jsx as p } from "react/jsx-runtime";
-import { getClassName as D } from "../../../../utils/get-class-name.js";
-import { moveFocusOnElementById as L } from "../../../../utils/move-focus-on-element-by-id.js";
-import { TabButton as P } from "../button/TabButton.js";
-import './TabList.css';/* empty css            */
-import { OrientationMode as s } from "../../../../enums/orientation-mode.js";
-import B from "../../../atoms/button/Button.js";
-import { IconName as C } from "../../../../enums/icon-name.js";
-import { ButtonView as I } from "../../../../enums/button-view.js";
-const E = ({
-  tabs: u,
-  onTabSelect: l,
-  onTabTitleChange: a,
-  selectedTabId: c,
-  tabPanelIds: w,
-  mode: e,
-  tabIds: i,
-  stretched: d,
-  editable: A = !1,
-  extendable: m = !1,
-  onTabAdd: v,
-  onTabDelete: b
-}) => {
-  const y = D([
-    "cl-tab-list",
-    { "cl-tab-list_vertical": e === s.Vertical }
-  ]), g = (t) => {
-    const o = i.indexOf(c);
-    if (!["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(t.key) || (t.preventDefault(), t.key === "ArrowUp" && e === s.Horizontal || t.key === "ArrowLeft" && e === s.Vertical))
-      return;
-    const n = t.key === "ArrowLeft" || t.key === "ArrowUp" ? k(o, i.length) : x(o, i.length), r = i[n];
-    r && (L(r), l(r));
-  }, k = (t, o) => t - 1 >= 0 ? t - 1 : o - 1, x = (t, o) => t === o - 1 ? 0 : t + 1;
-  return /* @__PURE__ */ h("div", { role: "tablist", "data-testid": "tab-list", onKeyDown: g, className: y, children: [
-    u.map(({ id: t, title: o, disabled: f }, n) => /* @__PURE__ */ p(
-      P,
-      {
-        title: o,
-        onTabSelect: l,
-        onTabTitleChange: a ? (r) => a(t, r) : void 0,
-        tabId: t,
-        isSelected: t === c,
-        isDisabled: f,
-        tabPanelId: w[n],
-        mode: e,
-        stretched: d,
-        editable: A,
-        extendable: m,
-        onTabDelete: b
-      },
-      t
-    )),
-    m && /* @__PURE__ */ p(
-      B,
-      {
-        label: "Add Tab",
-        tooltip: "Add Tab",
-        view: I.Icon,
-        icon: C.PlusCircle,
-        onClick: v
-      }
-    )
-  ] });
-};
-export {
-  E as TabList
-};