@dss-kit/ui-kit 0.3.6 → 0.3.7

package/dist/components/controls/Input/Input.js

@@ -1,204 +1,218 @@
-import { jsxs as v, jsx as n } from "react/jsx-runtime";
-import { cx as y } from "@emotion/css";
-import { useMergeRefs as L } from "@floating-ui/react";
-import { forwardRef as Q, useRef as N, useEffect as U, useMemo as X } from "react";
-import Y from "../../../assets/svg/shared/close-circle.svg.js";
-import { styles as t } from "./styles.js";
-import { useControlled as Z } from "../../../utils/hooks/useControlled.js";
-import { Box as o } from "../../builders/Box/Box.js";
-import { theme as ee } from "../../../utils/theme/index.js";
-import { Text as p } from "../../builders/Text/Text.js";
-const { spacing: k } = ee;
-function M(e) {
+import { jsxs as N, jsx as n } from "react/jsx-runtime";
+import { cx as w } from "@emotion/css";
+import { useMergeRefs as k } from "@floating-ui/react";
+import { forwardRef as Y, useRef as R, useEffect as Z, useMemo as ee } from "react";
+import te from "../../../assets/svg/shared/close-circle.svg.js";
+import { styles as e } from "./styles.js";
+import { useControlled as ne } from "../../../utils/hooks/useControlled.js";
+import { Box as u } from "../../builders/Box/Box.js";
+import { theme as re } from "../../../utils/theme/index.js";
+import { Text as y } from "../../builders/Text/Text.js";
+const { spacing: j } = re;
+function F(t) {
   return {
     ...new Event("input", { bubbles: !0 }),
-    target: e,
-    currentTarget: e
+    target: t,
+    currentTarget: t
   };
 }
-const te = Q((e, C) => {
+const ae = Y((t, v) => {
   const {
-    label: f,
-    prompt: g,
-    error: b,
-    errorText: w,
-    size: R = "md",
-    prefix: E,
+    label: d,
+    prompt: h,
+    error: I,
+    errorText: E,
+    size: M = "md",
+    prefix: O,
     suffix: _,
-    background: h = "primary",
-    showClearButton: j,
-    disabled: i,
-    value: d,
-    defaultValue: u,
-    className: I,
-    wrapperClassName: W,
-    labelClassName: A,
-    fieldContainerClassName: F,
-    promptClassName: H,
-    errorClassName: P,
-    textAlign: x = "left",
+    background: x = "primary",
+    showClearButton: W,
+    disabled: l,
+    value: p,
+    defaultValue: m,
+    className: B,
+    wrapperClassName: A,
+    labelClassName: H,
+    fieldContainerClassName: P,
+    promptClassName: q,
+    errorClassName: G,
+    textAlign: C = "left",
     ...T
-  } = e, a = e.multiline === !0, $ = N(null), s = N(null), q = L([
-    $,
-    C
-  ]), D = L([
-    s,
-    C
-  ]), { current: z } = N(d !== void 0), [c, B] = Z(
-    typeof d == "string" || typeof d == "number" ? String(d) : void 0,
-    typeof u == "string" || typeof u == "number" ? String(u) : ""
-  ), S = (l) => {
-    if (B(l.target.value), a) {
-      const r = e.onChange;
-      r?.(l);
+  } = t, o = t.multiline === !0, i = !!t.readOnly, $ = (r) => {
+    i && r.preventDefault();
+  }, z = R(null), c = R(null), J = k([
+    z,
+    v
+  ]), K = k([
+    c,
+    v
+  ]), { current: D } = R(p !== void 0), [f, S] = ne(
+    typeof p == "string" || typeof p == "number" ? String(p) : void 0,
+    typeof m == "string" || typeof m == "number" ? String(m) : ""
+  ), V = (r) => {
+    if (S(r.target.value), o) {
+      const a = t.onChange;
+      a?.(r);
     } else {
-      const r = e.onChange;
-      r?.(l);
+      const a = t.onChange;
+      a?.(r);
     }
   };
-  U(() => {
-    a && e.autoResize && s.current && (s.current.style.height = "auto", s.current.style.height = `${s.current.scrollHeight}px`);
-  }, [c, a, e.autoResize]);
-  const G = () => {
-    if (B(""), !a) {
-      const r = $.current;
-      if (r) {
-        r.value = "";
-        const m = M(r), V = e.onChange;
-        V?.(m);
+  Z(() => {
+    o && t.autoResize && c.current && (c.current.style.height = "auto", c.current.style.height = `${c.current.scrollHeight}px`);
+  }, [f, o, t.autoResize]);
+  const Q = () => {
+    if (S(""), !o) {
+      const a = z.current;
+      if (a) {
+        a.value = "";
+        const s = F(a), g = t.onChange;
+        g?.(s);
       }
       return;
     }
-    const l = s.current;
-    if (l) {
-      l.value = "";
-      const r = M(l), m = e.onChange;
-      m?.(r);
+    const r = c.current;
+    if (r) {
+      r.value = "";
+      const a = F(r), s = t.onChange;
+      s?.(a);
     }
-  }, J = () => {
-    if (a) {
+  }, U = () => {
+    if (o) {
       const {
-        rows: V,
-        autoResize: ne,
-        onChange: re,
-        multiline: ae,
-        ...O
+        rows: g,
+        autoResize: oe,
+        onChange: le,
+        multiline: ie,
+        ...b
       } = T;
       return /* @__PURE__ */ n(
         "textarea",
         {
-          ref: D,
-          rows: e.rows ?? 3,
-          className: y(t.input, I, {
-            [t.disabled]: i,
-            [t[`input-text-align_${x}`]]: !!x
+          ref: K,
+          rows: t.rows ?? 3,
+          className: w(e.input, B, {
+            [e.disabled]: l,
+            [e.readOnly]: i,
+            [e[`input-text-align_${C}`]]: !!C
           }),
-          disabled: i,
-          maxLength: e.maxLength,
-          ...O,
-          ...z ? { value: c } : { defaultValue: String(u ?? "") },
-          onChange: S
+          disabled: l,
+          maxLength: t.maxLength,
+          ...b,
+          ...D ? { value: f } : { defaultValue: String(m ?? "") },
+          onChange: V,
+          tabIndex: i ? -1 : b.tabIndex,
+          onMouseDown: (L) => {
+            $(L), b.onMouseDown?.(L);
+          }
         }
       );
     }
     const {
-      onChange: l,
-      multiline: r,
-      ...m
+      onChange: r,
+      multiline: a,
+      ...s
     } = T;
     return /* @__PURE__ */ n(
       "input",
       {
-        ...m,
-        ref: q,
-        className: y(
-          t.input,
-          t[`input-text-size_${R}`],
-          I,
+        ...s,
+        ref: J,
+        className: w(
+          e.input,
+          e[`input-text-size_${M}`],
+          B,
           {
-            [t.disabled]: i,
-            [t[`input-text-align_${x}`]]: !!x
+            [e.disabled]: l,
+            [e.readOnly]: i,
+            [e[`input-text-align_${C}`]]: !!C
           }
         ),
-        disabled: i,
-        type: e.type ?? "text",
-        ...z ? { value: c } : { defaultValue: String(u ?? "") },
-        onChange: S
+        disabled: l,
+        type: t.type ?? "text",
+        ...D ? { value: f } : { defaultValue: String(m ?? "") },
+        onChange: V,
+        tabIndex: i ? -1 : s.tabIndex,
+        onMouseDown: (g) => {
+          $(g), s.onMouseDown?.(g);
+        }
       }
     );
-  }, K = X(() => h === "white" ? t.primary : h === "gray" ? t.secondary : t[h], [h]);
-  return /* @__PURE__ */ v(o, { w: "full", gap: k.sm, className: W, children: [
-    typeof f == "string" ? /* @__PURE__ */ n(
-      p,
+  }, X = ee(() => x === "white" ? e.primary : x === "gray" ? e.secondary : e[x], [x]);
+  return /* @__PURE__ */ N(u, { w: "full", gap: j.sm, className: A, children: [
+    typeof d == "string" ? /* @__PURE__ */ n(
+      y,
       {
         variant: "body-2",
         fontWeight: "regular",
         colorName: "tertiary",
-        className: A,
-        children: f
+        className: H,
+        children: d
       }
-    ) : f,
-    /* @__PURE__ */ v(
-      o,
+    ) : d,
+    /* @__PURE__ */ N(
+      u,
       {
         row: !0,
-        alignItems: a ? "flex-start" : "center",
+        alignItems: o ? "flex-start" : "center",
         w: "full",
-        gap: k.md,
-        className: y(
-          t["input-container"],
-          K,
-          t[R],
+        gap: j.md,
+        className: w(
+          e["input-container"],
+          X,
+          e[M],
           {
-            [t.error]: b,
-            [t.disabled]: i,
-            [t.multiline]: a
+            [e.error]: I,
+            [e.disabled]: l,
+            [e.multiline]: o,
+            [e.readOnly]: i,
+            [e["container-hover"]]: !l && !i
           },
-          F
+          P
         ),
         children: [
-          E && /* @__PURE__ */ n(o, { flex: "none", children: E }),
-          /* @__PURE__ */ n(o, { flex: "1", children: J() }),
-          j && c && !i && /* @__PURE__ */ n(o, { flex: "none", children: /* @__PURE__ */ n("span", { className: t["clear-button"], onClick: G, children: /* @__PURE__ */ n(Y, {}) }) }),
-          _ && /* @__PURE__ */ n(o, { flex: "none", children: _ })
+          O && /* @__PURE__ */ n(u, { flex: "none", children: O }),
+          /* @__PURE__ */ n(u, { flex: "1", children: U() }),
+          W && f && !l && /* @__PURE__ */ n(u, { flex: "none", children: /* @__PURE__ */ n("span", { className: e["clear-button"], onClick: Q, children: /* @__PURE__ */ n(te, {}) }) }),
+          _ && /* @__PURE__ */ n(u, { flex: "none", children: _ })
         ]
       }
     ),
-    (g || a) && /* @__PURE__ */ v(o, { row: !0, gap: 10, w: "full", children: [
-      typeof g == "string" ? /* @__PURE__ */ n(
-        p,
+    (h || o) && /* @__PURE__ */ N(u, { row: !0, gap: 10, w: "full", children: [
+      typeof h == "string" ? /* @__PURE__ */ n(
+        y,
         {
           variant: "caption-1",
           colorName: "tertiary",
-          className: H,
-          children: g
+          className: q,
+          children: h
         }
-      ) : g,
-      a && e.maxLength && /* @__PURE__ */ n(
-        p,
+      ) : h,
+      o && t.maxLength && /* @__PURE__ */ n(
+        y,
         {
           right: !0,
           ml: "auto",
           flex: "none",
           variant: "caption-1",
           colorName: "tertiary",
-          children: `${c.length}/${e.maxLength}`
+          children: `${f.length}/${t.maxLength}`
         }
       )
     ] }),
-    w && b && /* @__PURE__ */ n(
-      p,
+    E && I && /* @__PURE__ */ n(
+      y,
       {
         variant: "body-2",
         colorName: "negative",
         fontWeight: "regular",
-        className: P,
-        children: w
+        className: G,
+        children: E
       }
     )
   ] });
 });
-te.displayName = "Input";
+ae.displayName = "Input";
 export {
-  te as Input
+  ae as Input
 };

package/dist/components/controls/Input/styles.d.ts

@@ -10,6 +10,8 @@ export declare const styles: {
     md: string;
     error: string;
     disabled: string;
+    readOnly: string;
+    "container-hover": string;
     multiline: string;
     primary: string;
     secondary: string;

package/dist/components/controls/Input/styles.js

@@ -1,14 +1,23 @@
 import { css as r } from "@emotion/css";
-import { typography as e } from "../../../styles/utils/typography.js";
-import { theme as n } from "../../../utils/theme/index.js";
-const { color: t, spacing: o } = n, i = r({
+import { typography as t } from "../../../styles/utils/typography.js";
+import { theme as i } from "../../../utils/theme/index.js";
+const { color: o, spacing: e } = i, a = r({
   opacity: 0.6,
   cursor: "not-allowed"
-}), c = {
+}), n = r({
+  cursor: "default",
+  "&:hover": {
+    cursor: "default"
+  }
+}), l = r({
+  "&:hover": {
+    backgroundColor: o.fill.neutralPrimaryHover
+  }
+}), g = {
   "input-container": r({
-    backgroundColor: t.fill.accentSecondary,
-    border: `1px solid ${t.border.neutralAlphaBasic}`,
-    padding: `${o.md} ${o.lg}`,
+    backgroundColor: o.fill.accentSecondary,
+    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    padding: `${e.md} ${e.lg}`,
     borderRadius: 12,
     minHeight: 40,
     width: "100%",
@@ -16,62 +25,61 @@ const { color: t, spacing: o } = n, i = r({
     "& textarea": {
       resize: "none"
     },
-    [`&:not(.${i}):hover`]: {
-      backgroundColor: t.fill.neutralPrimaryHover
-    },
     "&:focus-within": {
-      borderColor: t.border.accentPrimary,
-      [`&:not(.${i}):hover`]: {
-        borderColor: t.border.accentPrimary
+      borderColor: o.border.accentPrimary,
+      "&:hover": {
+        borderColor: o.border.accentPrimary
       }
     }
   }),
   input: r({
-    ...e.common,
-    ...e.body1,
+    ...t.common,
+    ...t.body1,
     background: "transparent",
     width: "100%",
-    color: t.text.primary,
+    color: o.text.primary,
     "&::placeholder": {
-      color: t.text.tertiary,
+      color: o.text.tertiary,
       textOverflow: "ellipsis"
     }
   }),
-  "input-text-size_sm": r({ ...e.body2 }),
-  "input-text-size_md": r({ ...e.body2 }),
+  "input-text-size_sm": r({ ...t.body2 }),
+  "input-text-size_md": r({ ...t.body2 }),
   "input-text-align_left": r({ textAlign: "left" }),
   "input-text-align_center": r({ textAlign: "center" }),
   "input-text-align_right": r({ textAlign: "right" }),
   sm: r({
     height: 40,
-    padding: o.md
+    padding: e.md
   }),
   md: r({
     height: 48,
-    padding: `14px ${o.lg} 14px ${o.lg}`
+    padding: `14px ${e.lg} 14px ${e.lg}`
   }),
   error: r({
-    borderColor: t.border.negativePrimary
+    borderColor: o.border.negativePrimary
   }),
-  disabled: i,
+  disabled: a,
+  readOnly: n,
+  "container-hover": l,
   multiline: r({
     height: "auto"
   }),
   primary: r({
-    background: t.fill.bgPrimary
+    background: o.fill.bgPrimary
   }),
   secondary: r({
-    background: t.fill.bgSecondary
+    background: o.fill.bgSecondary
   }),
   "clear-button": r({
     cursor: "pointer",
-    color: t.text.tertiary,
+    color: o.text.tertiary,
     height: 20,
     "&:hover": {
-      color: t.text.primary
+      color: o.text.primary
     }
   })
 };
 export {
-  c as styles
+  g as styles
 };

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.js

@@ -8,10 +8,10 @@ import { MarkdownShortcutPlugin as U } from "@lexical/react/LexicalMarkdownShort
 import { OnChangePlugin as W } from "@lexical/react/LexicalOnChangePlugin";
 import { TablePlugin as H } from "@lexical/react/LexicalTablePlugin";
 import { useState as u, useMemo as a, useCallback as p } from "react";
-import { getEditorConfig as K } from "./configs/editor.config.js";
-import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as q } from "./MarkdownTextEditor.const.js";
-import { MarkdownTextEditorLocaleProvider as z } from "./MarkdownTextEditor.locale.js";
+import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as K } from "./MarkdownTextEditor.const.js";
+import { MarkdownTextEditorLocaleProvider as q } from "./MarkdownTextEditor.locale.js";
 import { EDITOR_TRANSFORMERS as g } from "./transformers/index.js";
+import { getEditorConfig as z } from "./configs/editor.config.js";
 import { EditorStateContext as G } from "./contexts/EditorStateContext/EditorStateContext.js";
 import { ToolbarContext as J } from "./contexts/ToolbarContext/ToolbarContext.js";
 import { EditorToolbar as Q } from "./components/EditorToolbar/EditorToolbar.js";
@@ -40,7 +40,7 @@ function No({
   fieldClassName: R,
   previewClassName: v
 }) {
-  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => K(), []), L = a(
+  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => z(), []), L = a(
     () => ({
       isEditable: !m,
       isPreviewMode: i,
@@ -49,7 +49,7 @@ function No({
     }),
     [m, i, d]
   ), F = a(() => ({
-    availableActions: s || q
+    availableActions: s || K
   }), [s]), f = p(
     (t) => {
       A(t), r.onMarkdownChange && r.onMarkdownChange(t);
@@ -64,7 +64,7 @@ function No({
     },
     [f, r]
   );
-  return /* @__PURE__ */ o(z, { locale: M, children: /* @__PURE__ */ o(D, { initialConfig: I, children: /* @__PURE__ */ o(G.Provider, { value: L, children: /* @__PURE__ */ c(J.Provider, { value: F, children: [
+  return /* @__PURE__ */ o(q, { locale: M, children: /* @__PURE__ */ o(D, { initialConfig: I, children: /* @__PURE__ */ o(G.Provider, { value: L, children: /* @__PURE__ */ c(J.Provider, { value: F, children: [
     /* @__PURE__ */ c(
       h,
       {

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.js

@@ -3,12 +3,12 @@ import { cx as k } from "@emotion/css";
 import { useState as y, useCallback as h, useMemo as B, Fragment as I } from "react";
 import P from "../../../../../../assets/svg/markdown/dots-horizontal.svg.js";
 import { rowStyle as S, rowStyleInteractive as j } from "./ActionMenuButton.styles.js";
+import { IconButton as z } from "../../../../IconButton/IconButton.js";
 import { Box as c } from "../../../../../builders/Box/Box.js";
-import { theme as z } from "../../../../../../utils/theme/index.js";
-import { Text as A } from "../../../../../builders/Text/Text.js";
-import { Popover as O } from "../../../../../shared/Popover/Popover.js";
-import { IconButton as T } from "../../../../IconButton/IconButton.js";
-const { color: x, spacing: v } = z;
+import { theme as A } from "../../../../../../utils/theme/index.js";
+import { Text as O } from "../../../../../builders/Text/Text.js";
+import { Popover as T } from "../../../../../shared/Popover/Popover.js";
+const { color: x, spacing: v } = A;
 function K({
   groups: n,
   toolbarVisibleActionsCount: m,
@@ -40,7 +40,7 @@ function K({
               color: x.icon.tertiary
             }
           ),
-          /* @__PURE__ */ e(A, { variant: "body-2", children: o.label })
+          /* @__PURE__ */ e(O, { variant: "body-2", children: o.label })
         ]
       },
       o.id
@@ -67,13 +67,13 @@ function K({
     ] }, t.flatMap((i) => i.id).join("-"));
   }), [n, f, m]);
   return /* @__PURE__ */ e(
-    O,
+    T,
     {
       content: /* @__PURE__ */ e(c, { flex: !0, children: g }),
       placement: "bottom",
       open: w,
       onChange: a,
-      children: /* @__PURE__ */ e(T, { size: "xs", color: "no-bg", disabled: r, children: /* @__PURE__ */ e(P, {}) })
+      children: /* @__PURE__ */ e(z, { size: "xs", color: "no-bg", disabled: r, children: /* @__PURE__ */ e(P, {}) })
     }
   );
 }

package/dist/components/shared/MarkdownText/MarkdownText.js

@@ -6,11 +6,11 @@ import { ContentEditable as f } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary as c } from "@lexical/react/LexicalErrorBoundary";
 import { RichTextPlugin as p } from "@lexical/react/LexicalRichTextPlugin";
 import { useMemo as s } from "react";
-import { getEditorConfig as u } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
-import { EDITOR_TRANSFORMERS as x } from "../../controls/MarkdownTextEditor/transformers/index.js";
-import { markdownTextStyle as w } from "./MarkdownText.styles.js";
-import { Text as E } from "../../builders/Text/Text.js";
-import { EditorStateContext as k } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
+import { EDITOR_TRANSFORMERS as u } from "../../controls/MarkdownTextEditor/transformers/index.js";
+import { markdownTextStyle as x } from "./MarkdownText.styles.js";
+import { Text as w } from "../../builders/Text/Text.js";
+import { EditorStateContext as E } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
+import { getEditorConfig as k } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
 function F({
   markdown: t,
   className: i,
@@ -27,15 +27,15 @@ function F({
     }),
     [r]
   );
-  return r ? /* @__PURE__ */ o(k.Provider, { value: a, children: /* @__PURE__ */ o(
+  return r ? /* @__PURE__ */ o(E.Provider, { value: a, children: /* @__PURE__ */ o(
     d,
     {
       initialConfig: {
-        ...u(),
+        ...k(),
         editable: !1,
         namespace: "ui-kit-markdown-text-viewer",
         editorState: () => {
-          l(r, x);
+          l(r, u);
         }
       },
       children: /* @__PURE__ */ o(
@@ -44,7 +44,7 @@ function F({
           contentEditable: /* @__PURE__ */ o(
             f,
             {
-              className: m(w, i),
+              className: m(x, i),
               "aria-placeholder": "markdown text",
               placeholder: () => null
             }
@@ -56,7 +56,7 @@ function F({
     },
     r
   ) }) : typeof e == "string" ? /* @__PURE__ */ o(
-    E,
+    w,
     {
       variant: "body-2",
       colorName: "tertiary",