triafly-ui-kit 1.0.89 → 1.0.91

package/dist/assets/src/components/Ui/SearchInput/SearchInput.css

@@ -1 +1 @@
-.search-input{border:1px solid var(--color-border-primary-default);border-radius:22px;margin:0 12px 0 0}.search-input:focus-within{border:2px solid var(--color-border-primary-default);margin:0 11px 0 -1px}.search-input:focus-within .text-input .input-container input{margin:-1px}.search-input .text-input .input-container input{border:none}.search-input .text-input .input-container input:focus{outline:none}.search-input__label{margin:0 0 8px}.search-input .guess-box{padding:0 12px 12px}.search-input .guess-box ul{border-top:1px solid var(--color-border-primary-default);padding:12px 0 0}.search-input .guess-box ul li{min-height:36px;display:flex;align-items:center;padding:0 8px;cursor:pointer}.search-input .guess-box ul li:hover{background-color:var(--color-bg-innerisland-default)}.dropdown-input-test{position:relative}.dropdown-input-test .caret{fill:var(--color-icon-secondary-default);position:absolute;bottom:9px;right:10px}.dropdown-input-test .input-box{position:relative;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input-test .input-box.disabled{background-color:var(--color-bg-island-disabled);pointer-events:none}.dropdown-input-test .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input-test .input-box .placeholder{color:var(--color-text-secondary-default)}.dropdown-input-test .options{position:absolute;top:100%;bottom:auto;left:1%;right:1%;max-height:304px;overflow-y:auto;overflow-x:hidden;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);margin:1px -1px 0;z-index:21}.dropdown-input-test .options.above{bottom:calc(100% + 1px);top:auto}.dropdown-input-test .options li{padding:0 8px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-input-test .options li:hover,.dropdown-input-test .options li.dropdown-input__option--selected{background-color:var(--color-bg-neutral-lightest-default)}.search-input-container{position:relative;display:inline-block;width:100%}.search-input-container .caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:1;fill:var(--color-icon-secondary-default)}.suggestions-portal{background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);box-shadow:0 2px 8px #00000026;overflow-y:auto}.suggestions-portal .suggestions-list{list-style:none;padding:0;margin:0}.suggestions-portal .suggestions-list li{padding:8px 12px;min-height:36px;cursor:pointer;display:flex;align-items:center}.suggestions-portal .suggestions-list li:hover{background-color:var(--color-bg-neutral-lightest-default)}
+.search-input{border:1px solid var(--color-border-primary-default);border-radius:22px;margin:0 12px 0 0}.search-input:focus-within{border:2px solid var(--color-border-primary-default);margin:0 11px 0 -1px}.search-input:focus-within .text-input .input-container input{margin:-1px}.search-input .text-input .input-container input{border:none}.search-input .text-input .input-container input:focus{outline:none}.search-input__label{margin:0 0 8px}.search-input .guess-box{padding:0 12px 12px}.search-input .guess-box ul{border-top:1px solid var(--color-border-primary-default);padding:12px 0 0}.search-input .guess-box ul li{min-height:36px;display:flex;align-items:center;padding:0 8px;cursor:pointer}.search-input .guess-box ul li:hover{background-color:var(--color-bg-innerisland-default)}.dropdown-input-test{position:relative}.dropdown-input-test .caret{display:none;fill:var(--color-icon-secondary-default);position:absolute;bottom:9px;right:10px}.dropdown-input-test .input-box{position:relative;cursor:pointer;display:flex;justify-content:space-between;align-items:center;outline:none;background-color:var(--color-bg-neutral-basic-default)}.dropdown-input-test .input-box.disabled{background-color:var(--color-bg-island-disabled);pointer-events:none}.dropdown-input-test .input-box.invalid{border-color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid>span{color:var(--color-border-error-default)}.dropdown-input-test .input-box.invalid svg *{fill:var(--color-border-error-default)}.dropdown-input-test .input-box .placeholder{color:var(--color-text-secondary-default)}.dropdown-input-test .options{position:absolute;top:100%;bottom:auto;left:1%;right:1%;max-height:304px;overflow-y:auto;overflow-x:hidden;background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);margin:1px -1px 0;z-index:21}.dropdown-input-test .options.above{bottom:calc(100% + 1px);top:auto}.dropdown-input-test .options li{padding:0 8px;min-height:36px;cursor:pointer;display:flex;align-items:center}.dropdown-input-test .options li:hover,.dropdown-input-test .options li.dropdown-input__option--selected{background-color:var(--color-bg-neutral-lightest-default)}.search-input-container{position:relative;display:inline-block;width:100%}.search-input-container .caret{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:1;fill:var(--color-icon-secondary-default)}.suggestions-portal{background-color:var(--color-bg-neutral-basic-default);border-radius:8px;border:1px solid var(--color-border-primary-default);box-shadow:0 2px 8px #00000026;overflow-y:auto}.suggestions-portal .suggestions-list{list-style:none;padding:0;margin:0}.suggestions-portal .suggestions-list li{padding:8px 12px;min-height:36px;cursor:pointer;display:flex;align-items:center;overflow-wrap:anywhere}.suggestions-portal .suggestions-list li:hover{background-color:var(--color-bg-neutral-lightest-default)}

package/dist/assets/src/components/Ui/Table/Table.css

@@ -1 +1 @@
-.table-component{width:100%;position:relative}.table-component__wrapper{width:100%;overflow:auto}.table-component__wrapper.bordered{border:1px solid var(--color-border-primary-default);border-radius:8px}.table-component__wrapper__table{width:100%;border-collapse:separate;border-spacing:0}.table-component__wrapper__table.bordered{border:none}.table-component__wrapper__table__thead{background-color:var(--color-bg-neutral-light-default);height:41px}.table-component__wrapper__table__thead.stickyHeader{position:sticky;top:0;z-index:10}.table-component__wrapper__table__thead__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__thead__th{padding:12px;text-align:left;position:relative}.table-component__wrapper__table__thead__th.bordered{border-left:1px solid var(--color-border-primary-default);border-bottom:none}.table-component__wrapper__table__thead__th.bordered:first-child{border-left:none}.table-component__wrapper__table__thead__th.stickyLeft{position:sticky;left:0;background-color:inherit;z-index:9}.table-component__wrapper__table__thead__th .th-content{display:flex;align-items:center;gap:4px}.table-component__wrapper__table__thead__th .sort-icon{display:inline-flex}.table-component__wrapper__table__tbody__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__tbody--hoverable{cursor:pointer}.table-component__wrapper__table__tbody__td{padding:12px}.table-component__wrapper__table__tbody__td--bordered{border-top:1px solid var(--color-border-primary-default);border-left:1px solid var(--color-border-primary-default)}.table-component__wrapper__table__tbody__td--bordered:first-child{border-left:none}.table-component__wrapper__table__tbody__td--sticky-left{position:sticky;left:0;background-color:inherit;z-index:8}.table-component__wrapper.borderBottom .table-component__wrapper__table__tbody td{border-bottom:1px solid var(--color-border-primary-default)}.loading_table_init{position:absolute;top:0;left:0;right:0;bottom:0;display:"flex";justify-content:"center";align-items:"center";background-color:"rgba(255, 255, 255, 0.7)";z-index:10}
+.table-component{width:100%;position:relative}.table-component__wrapper{width:100%}.table-component__wrapper.bordered{border:1px solid var(--color-border-primary-default);border-radius:8px}.table-component__wrapper__table{width:100%;border-collapse:separate;border-spacing:0}.table-component__wrapper__table.bordered{border:none}.table-component__wrapper__table__thead{background-color:var(--color-bg-neutral-light-default);height:41px}.table-component__wrapper__table__thead.stickyHeader{position:sticky;top:0;z-index:10}.table-component__wrapper__table__thead__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__thead__th{padding:12px;text-align:left;position:relative}.table-component__wrapper__table__thead__th.bordered{border-left:1px solid var(--color-border-primary-default);border-bottom:none}.table-component__wrapper__table__thead__th.bordered:first-child{border-left:none}.table-component__wrapper__table__thead__th.stickyLeft{position:sticky;left:0;background-color:inherit;z-index:9}.table-component__wrapper__table__thead__th .th-content{display:flex;align-items:center;gap:4px}.table-component__wrapper__table__thead__th .sort-icon{display:inline-flex}.table-component__wrapper__table__tbody__tr:hover{background-color:var(--color-bg-island-selected)}.table-component__wrapper__table__tbody--hoverable{cursor:pointer}.table-component__wrapper__table__tbody__td{padding:12px}.table-component__wrapper__table__tbody__td--bordered{border-top:1px solid var(--color-border-primary-default);border-left:1px solid var(--color-border-primary-default)}.table-component__wrapper__table__tbody__td--bordered:first-child{border-left:none}.table-component__wrapper__table__tbody__td--sticky-left{position:sticky;left:0;background-color:inherit;z-index:8}.table-component__wrapper.borderBottom .table-component__wrapper__table__tbody td{border-bottom:1px solid var(--color-border-primary-default)}.loading_table_init{position:absolute;top:0;left:0;right:0;bottom:0;display:"flex";justify-content:"center";align-items:"center";background-color:"rgba(255, 255, 255, 0.7)";z-index:10}

package/dist/components/Ui/SearchInput/SearchData.stories.js

@@ -0,0 +1,69 @@
+import { SearchInput as o } from "./SearchInput.js";
+import { demoSearchData as l } from "./SearchData.js";
+const a = l.map((e) => ({
+  value: e.toLowerCase(),
+  label: e
+})), s = {
+  title: "UIKit/SearchInput",
+  // Путь в сторибуке
+  component: o,
+  parameters: {
+    layout: "centered"
+    // Компонент будет по центру
+  },
+  tags: ["autodocs"],
+  // Автоматическая генерация docs
+  argTypes: {
+    // Описываем пропсы для удобного контроля в Storybook
+    onChange: { action: "onChange" }
+    // Логируем вызов onChange
+  }
+}, n = {
+  args: {
+    label: "Выберите фрукт",
+    placeholder: "Начните вводить название...",
+    options: a
+    // <--- Передаем тестовые данные
+  }
+}, c = {
+  args: {
+    label: "Любимый фрукт",
+    placeholder: "Начните вводить название...",
+    options: a,
+    value: "mango"
+    // Предустановленное значение (value)
+  }
+}, i = {
+  args: {
+    label: "Поиск пользователей",
+    placeholder: "Введите имя...",
+    options: [],
+    // Нет опций
+    isLoading: !0
+    // Показываем индикатор загрузки
+  }
+}, p = {
+  args: {
+    label: "Email",
+    placeholder: "Введите email...",
+    hasError: !0,
+    errorMessage: "Некорректный email адрес",
+    options: a
+  }
+}, d = {
+  args: {
+    label: "Статус (недоступно)",
+    placeholder: "Выберите статус...",
+    isDisabled: !0,
+    options: a,
+    value: "banana"
+  }
+};
+export {
+  n as Basic,
+  d as Disabled,
+  i as Loading,
+  p as WithError,
+  c as WithInitialValue,
+  s as default
+};

package/dist/components/Ui/SearchInput/SearchInput.js

@@ -1,115 +1,121 @@
-import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import { jsxs as z, jsx as l } from "react/jsx-runtime";
 import { createPortal as U } from "react-dom";
-import { useState as l, useRef as S, useEffect as p } from "react";
+import { useState as i, useRef as S, useEffect as d } from "react";
 import '../../../assets/src/components/Ui/SearchInput/SearchInput.css';/* empty css                                                      */
 import { getPortalContainer as Y, releasePortal as _ } from "../../../shared/utils/fn/portals.js";
-import { TextInput as q } from "../TextInput/TextInput.js";
-import { IconCaretUpDown as G } from "../Icons/Icons.js";
-const I = "search-input-global-portal", J = ({
+import { TextInput as G } from "../TextInput/TextInput.js";
+import { IconCaretUpDown as J } from "../Icons/Icons.js";
+const I = "search-input-global-portal", M = ({
   name: v = "SearchInput",
-  label: k,
-  placeholder: y = "",
-  type: N = "text",
-  id: P,
+  label: y,
+  placeholder: k = "",
+  type: P = "text",
+  id: N,
   isDisabled: R = !1,
   errorMessage: D = "",
   hasError: E = !1,
   className: L = "",
-  isClearable: V,
-  isLoading: F,
-  value: n = "",
-  onChange: r,
-  options: o = []
+  isClearable: O = !0,
+  isLoading: V,
+  value: r = "",
+  onChange: o,
+  options: c = []
 }) => {
-  const [m, g] = l(n), [A, d] = l(""), [f, h] = l([]), [w, i] = l(!1), [x, B] = l(!1), [C, H] = l(!1), s = S(null), a = S(null);
-  p(() => (a.current = Y(I), () => _(I)), []), p(() => {
-    if (n) {
-      const e = o.find((t) => t.value === n);
-      d(e ? e.label : n), g(n);
+  const [m, g] = i(r), [A, f] = i(""), [p, h] = i([]), [w, u] = i(!1), [b, F] = i(!1), [B, C] = i(!1), n = S(null), a = S(null);
+  d(() => (a.current = Y(I), () => _(I)), []), d(() => {
+    if (r) {
+      const e = c.find((t) => t.value === r);
+      f(e ? e.label : r), g(r);
     } else
-      d("");
-  }, [n, o]), p(() => {
-    if (m.trim() === "" && x) {
-      h(o);
+      f("");
+  }, [r, c]), d(() => {
+    if (m.trim() === "" && b) {
+      h(c);
       return;
     }
-    const e = o.filter(
+    const e = c.filter(
       (t) => t.label.toLowerCase().includes(m.toLowerCase())
     );
     h(e);
-  }, [m, o, x]), p(() => {
+  }, [m, c, b]), d(() => {
     const e = (t) => {
-      s.current && !s.current.contains(t.target) && a.current && !a.current.contains(t.target) && i(!1);
+      const s = n.current && !n.current.contains(t.target), q = a.current && !a.current.contains(t.target);
+      s && q && u(!1);
     };
-    return document.addEventListener("click", e), () => {
-      document.removeEventListener("click", e);
+    return document.addEventListener("mousedown", e), () => {
+      document.removeEventListener("mousedown", e);
     };
+  }, []), d(() => {
+    if (n.current) {
+      const e = n.current.querySelector("input");
+      e && e.setAttribute("autocomplete", "off");
+    }
   }, []);
-  const K = (e) => {
+  const H = (e) => {
     const t = e.target.value;
-    g(t), d(t), r == null || r(t), i(!0);
-  }, b = (e) => {
-    g(e.value), d(e.label), r == null || r(e.value), i(!1);
-  }, O = () => {
-    B(!0), i(!0), h(o);
+    g(t), f(t), o == null || o(t), u(!0);
+  }, x = (e) => {
+    g(e.value), f(e.label), o == null || o(e.value), u(!1);
+  }, K = () => {
+    F(!0), u(!0), h(c);
   }, T = (e) => {
-    e.key === "Enter" && f.length > 0 && w && b(f[0]);
+    e.key === "Enter" && p.length > 0 && w && x(p[0]);
   }, $ = (e) => {
-    if (e.stopPropagation(), !w && s.current) {
-      const t = s.current.getBoundingClientRect(), u = window.innerHeight - t.bottom;
-      H(u < 304 && t.top >= 304);
+    if (e.stopPropagation(), !w && n.current) {
+      const t = n.current.getBoundingClientRect(), s = window.innerHeight - t.bottom;
+      C(s < 304 && t.top >= 304);
     }
-    i((t) => !t);
+    u((t) => !t);
   }, j = () => {
-    if (!w || !x || f.length === 0 || !s.current || !a.current)
+    if (!w || !b || p.length === 0 || !n.current || !a.current)
       return null;
-    const e = s.current.getBoundingClientRect(), t = {
+    const e = n.current.getBoundingClientRect(), t = {
       position: "fixed",
       width: e.width,
       left: e.left,
       maxHeight: "304px",
       zIndex: 9999
     };
-    return C ? t.bottom = `${window.innerHeight - e.top}px` : t.top = `${e.bottom}px`, U(
-      /* @__PURE__ */ c("div", { className: "suggestions-portal", style: t, children: /* @__PURE__ */ c("ul", { className: "suggestions-list", children: f.map((u) => /* @__PURE__ */ c(
+    return B ? t.bottom = `${window.innerHeight - e.top}px` : t.top = `${e.bottom}px`, U(
+      /* @__PURE__ */ l("div", { className: "suggestions-portal", style: t, children: /* @__PURE__ */ l("ul", { className: "suggestions-list", children: p.map((s) => /* @__PURE__ */ l(
         "li",
         {
           onClick: () => {
-            b(u);
+            x(s);
           },
-          children: u.label
+          children: s.label
         },
-        u.value
+        s.value
       )) }) }),
       a.current
     );
   };
-  return /* @__PURE__ */ z("div", { className: "search-input-container", ref: s, children: [
-    /* @__PURE__ */ c(
-      q,
+  return /* @__PURE__ */ z("div", { className: "search-input-container", ref: n, children: [
+    /* @__PURE__ */ l(
+      G,
       {
         name: v,
-        label: k,
-        type: N,
+        label: y,
+        type: P,
         className: `${L}`,
         value: A,
-        onChange: K,
-        placeholder: y,
-        id: P,
+        onChange: H,
+        placeholder: k,
+        id: N,
         isDisabled: R,
-        isClearable: V,
+        isClearable: O,
         hasError: E,
         errorMessage: D,
-        isLoading: F,
-        onFocus: O,
+        isLoading: V,
+        onFocus: K,
         onKeyDown: T
       }
     ),
-    /* @__PURE__ */ c("div", { className: "caret", onClick: $, children: /* @__PURE__ */ c(G, {}) }),
+    /* @__PURE__ */ l("div", { className: "caret", onClick: $, children: /* @__PURE__ */ l(J, {}) }),
     j()
   ] });
 };
-J.displayName = "SearchInput";
+M.displayName = "SearchInput";
 export {
-  J as SearchInput
+  M as SearchInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "triafly-ui-kit",
-  "version": "1.0.89",
+  "version": "1.0.91",
   "description": "UI Kit from Triafly",
   "main": "./dist/main.js",
   "module": "./dist/main.js",