@max-ts/components 0.2.2 → 0.2.3

package/lib/components/Autocomplete/Autocomplete.mjs

@@ -1,92 +1,92 @@
 import { j as r } from "../../_virtual/jsx-runtime.mjs";
 import { useCallback as n, createElement as y } from "react";
-import { ListItemIcon as F, Popper as M, Autocomplete as H } from "@mui/material";
+import { ListItemIcon as F, Popper as M, Autocomplete as z, SvgIcon as H } from "@mui/material";
 import { Checkbox as N } from "../Checkbox/Checkbox.mjs";
 import { CircularProgress as V } from "../CircularProgress/CircularProgress.mjs";
 import { OverflowTypography as q } from "../OverflowTypography/OverflowTypography.mjs";
-import { Tag as z } from "../Tag/Tag.mjs";
-import { TextField as B } from "../TextField/TextField.mjs";
-import { X as C, ChevronDown as W } from "lucide-react";
-import { DEFAULT_PLACEHOLDER as X, DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT as $ } from "./constants.mjs";
-import { StyledMenuItem as G } from "./styles.mjs";
-import { useLogic as J } from "./useLogic/useLogic.mjs";
-const ue = (d) => {
-  const { isValueEmpty: x, isPopperVisible: f, autocompleteProps: R } = J(d), {
+import { Tag as B } from "../Tag/Tag.mjs";
+import { TextField as W } from "../TextField/TextField.mjs";
+import { X as C, ChevronDown as X } from "lucide-react";
+import { DEFAULT_PLACEHOLDER as $, DEFAULT_AUTOCOMPLETE_ELEMENT_ROWS_COUNT as G } from "./constants.mjs";
+import { StyledMenuItem as J } from "./styles.mjs";
+import { useLogic as K } from "./useLogic/useLogic.mjs";
+const de = (d) => {
+  const { isValueEmpty: x, isPopperVisible: f, autocompleteProps: R } = K(d), {
     required: T,
     success: E,
-    error: O,
-    label: h,
+    error: h,
+    label: j,
     getOptionLabel: l,
-    helperText: j,
-    inputRef: I,
+    helperText: I,
+    inputRef: O,
     multiple: t,
     size: i = "medium",
-    placeholder: g = X,
+    placeholder: g = $,
     overflowOption: L,
     closeText: k = "Закрыть",
     openText: A = "Открыть",
     clearText: D = "Очистить",
     loadingText: P = /* @__PURE__ */ r.jsx(V, { color: "primary" }),
-    isLoadedDataError: K,
-    loadedDataError: Q,
-    noOptionsText: Y,
-    autoHighlight: Z,
-    renderInput: p,
-    renderTags: s,
-    renderOption: c,
-    ..._
-  } = d, w = n(
+    isLoadedDataError: Q,
+    loadedDataError: Y,
+    noOptionsText: Z,
+    autoHighlight: ee,
+    renderInput: s,
+    renderTags: c,
+    renderOption: p,
+    ...S
+  } = d, _ = n(
     (e) => {
       const o = {
         ...e,
-        inputRef: I,
+        inputRef: O,
         required: T,
         placeholder: x ? g : "",
-        label: h,
+        label: j,
         success: E,
-        error: O,
-        helperText: j,
+        error: h,
+        helperText: I,
         size: i
       };
-      return p ? p(o) : /* @__PURE__ */ r.jsx(B, { ...o });
+      return s ? s(o) : /* @__PURE__ */ r.jsx(W, { ...o });
     },
     [
       x,
-      p,
-      I,
+      s,
+      O,
       T,
       g,
-      h,
-      E,
-      O,
       j,
+      E,
+      h,
+      I,
       i
     ]
-  ), S = n(
+  ), v = n(
     (e, o, m, a) => {
-      if (c)
-        return c(
+      if (p)
+        return p(
           e,
           o,
           m,
           a
         );
       const u = !!e["aria-selected"];
-      return /* @__PURE__ */ y(G, { ...e, key: e.id }, t && /* @__PURE__ */ r.jsx(F, { children: /* @__PURE__ */ r.jsx(N, { role: "menuitemcheckbox", checked: u }) }), /* @__PURE__ */ r.jsx(
+      return /* @__PURE__ */ y(J, { ...e, key: e.id }, t && /* @__PURE__ */ r.jsx(F, { children: /* @__PURE__ */ r.jsx(N, { role: "menuitemcheckbox", checked: u }) }), /* @__PURE__ */ r.jsx(
         q,
         {
-          rowsCount: $,
+          rowsCount: G,
           ...L,
           children: e.key
         }
       ));
     },
-    [t, L, c]
-  ), U = n(
-    (e, o, m) => s ? s(e, o, m) : e.map((a, u) => {
+    [t, L, p]
+  ), w = n(
+    (e, o, m) => c ? c(e, o, m) : e.map((a, u) => {
       const b = l?.(a) || "";
       return /* @__PURE__ */ y(
-        z,
+        B,
         {
           deleteIcon: /* @__PURE__ */ r.jsx(C, {}),
           color: "grey",
@@ -96,15 +96,15 @@ const ue = (d) => {
         }
       );
     }),
-    [l, s]
-  ), v = n(
+    [l, c]
+  ), U = n(
     (e) => f ? /* @__PURE__ */ r.jsx(M, { ...e }) : null,
     [f]
   );
   return /* @__PURE__ */ r.jsx(
-    H,
+    z,
     {
-      ..._,
+      ...S,
       size: i,
       clearText: D,
       closeText: k,
@@ -112,23 +112,23 @@ const ue = (d) => {
       loadingText: P,
       multiple: t,
       disableCloseOnSelect: t,
-      clearIcon: /* @__PURE__ */ r.jsx(C, {}),
-      popupIcon: /* @__PURE__ */ r.jsx(W, {}),
+      clearIcon: /* @__PURE__ */ r.jsx(H, { children: /* @__PURE__ */ r.jsx(C, {}) }),
+      popupIcon: /* @__PURE__ */ r.jsx(X, { size: 16 }),
       forcePopupIcon: !0,
       slotProps: {
         clearIndicator: { disableRipple: !0 },
         popper: {
-          component: v
+          component: U
         }
       },
       getOptionLabel: l,
-      renderInput: w,
-      renderTags: U,
-      renderOption: S,
+      renderInput: _,
+      renderTags: w,
+      renderOption: v,
       ...R
     }
   );
 };
 export {
-  ue as Autocomplete
+  de as Autocomplete
 };

package/lib/components/SearchField/SearchField.d.ts

@@ -1,3 +1,5 @@
 import { TextFieldProps } from '../TextField';
-export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdornment'>;
+export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdornment'> & {
+    delay?: number;
+};
 export declare const SearchField: import('react').ForwardRefExoticComponent<Omit<SearchFieldProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/components/SearchField/SearchField.mjs

@@ -1,57 +1,60 @@
-import { j as n } from "../../_virtual/jsx-runtime.mjs";
-import { forwardRef as S, useState as h, useRef as C } from "react";
-import { StyledTextField as j, StyledIconButton as b, StyledCloseFillSm as y, StyledSearchIcon as A } from "./styles.mjs";
-const w = S(
+import { j as r } from "../../_virtual/jsx-runtime.mjs";
+import { forwardRef as j, useState as b, useRef as i } from "react";
+import { StyledTextField as y, StyledIconButton as A, StyledCloseFillSm as R, StyledSearchIcon as g } from "./styles.mjs";
+const B = j(
   ({
-    margin: c = "none",
-    placeholder: s = "Поиск",
-    onChange: r,
-    disabled: l,
-    value: i,
-    defaultValue: d,
-    ...f
-  }, m) => {
-    const [o, u] = h(`${d || i || ""}`), e = C(null), p = (t) => {
-      u(t.target.value), r?.(t);
-    }, v = () => {
-      u(""), e.current && (e.current.value = "");
-      const t = new InputEvent("input", {
+    margin: s = "none",
+    placeholder: d = "Поиск",
+    onChange: l,
+    disabled: u,
+    value: m,
+    defaultValue: f,
+    delay: p = 600,
+    ...v
+  }, x) => {
+    const [c, o] = b(`${f || m || ""}`), t = i(null), e = i(null), S = (n) => {
+      o(n.target.value), t.current && clearTimeout(t.current), t.current = setTimeout(() => {
+        l?.(n);
+      }, p);
+    }, h = () => {
+      o(""), e.current && (e.current.value = ""), t.current && clearTimeout(t.current);
+      const n = new InputEvent("input", {
         bubbles: !0,
         cancelable: !0
       });
-      Object.defineProperty(t, "target", {
+      Object.defineProperty(n, "target", {
         writable: !0,
         value: e.current
-      }), r?.(t), e.current?.focus();
-    }, x = () => {
+      }), l?.(n), e.current?.focus();
+    }, C = () => {
       e.current?.focus();
-    }, a = !!o.length;
-    return /* @__PURE__ */ n.jsx(
-      j,
+    }, a = !!c.length;
+    return /* @__PURE__ */ r.jsx(
+      y,
       {
-        margin: c,
-        placeholder: s,
-        startAdornment: /* @__PURE__ */ n.jsx(A, { onClick: x }),
-        disabled: l,
-        endAdornment: /* @__PURE__ */ n.jsx(
-          b,
+        margin: s,
+        placeholder: d,
+        startAdornment: /* @__PURE__ */ r.jsx(g, { onClick: C }),
+        disabled: u,
+        endAdornment: /* @__PURE__ */ r.jsx(
+          A,
           {
             variant: "text",
-            onClick: v,
-            disabled: l || !a,
+            onClick: h,
+            disabled: u || !a,
             $isActive: a,
-            children: /* @__PURE__ */ n.jsx(y, {})
+            children: /* @__PURE__ */ r.jsx(R, {})
           }
         ),
-        onChange: p,
-        value: o,
-        ref: m,
+        onChange: S,
+        value: c,
+        ref: x,
         inputRef: e,
-        ...f
+        ...v
       }
     );
   }
 );
 export {
-  w as SearchField
+  B as SearchField
 };

package/lib/components/SearchField/styles.mjs

@@ -1,10 +1,10 @@
 import { styled as o } from "@mui/material";
-import { Search as e, CircleX as r } from "lucide-react";
+import { Search as e, X as r } from "lucide-react";
 import { IconButton as l } from "../IconButton/IconButton.mjs";
 import { TextField as i } from "../TextField/TextField.mjs";
-const a = o(e)`
+const d = o(e)`
   color: ${({ theme: t }) => t.palette.grey[600]};
-`, d = o(l, {
+`, a = o(l, {
   shouldForwardProp: (t) => !["$isActive"].includes(t.toString())
 })`
   opacity: ${({ $isActive: t }) => t ? 1 : 0};
@@ -13,23 +13,21 @@ const a = o(e)`
     background-color: transparent;
 
     svg {
-      fill: ${({ theme: t }) => t.palette.grey[700]};
+      stroke: ${({ theme: t }) => t.palette.grey[700]};
     }
   }
 `, m = o(i)`
   & .MuiFormHelperText-root {
-    /* TODO Убрать после реализации https://track.astral.ru/soft/browse/UIKIT-1333 */
     display: none;
   }
 `, y = o(r)`
   width: 16px;
   height: 16px;
-
-  fill: ${({ theme: t }) => t.palette.grey[500]};
+  stroke: ${({ theme: t }) => t.palette.grey[500]};
 `;
 export {
   y as StyledCloseFillSm,
-  d as StyledIconButton,
-  a as StyledSearchIcon,
+  a as StyledIconButton,
+  d as StyledSearchIcon,
   m as StyledTextField
 };

package/lib/components/Select/Select.d.ts

@@ -4,7 +4,7 @@ import { WithoutEmotionSpecific } from '../types';
 export type SelectProps<Value> = WithoutEmotionSpecific<Omit<MuiSelectProps<Value>, 'variant'>> & {
     loading?: boolean;
     placeholder?: string;
-    getOptionLabel?: (value: string | number) => string | number;
+    getOptionLabel?: (value: Value) => string | number;
     /**
      * Добавляет вспомогательный текст под селектом
      */

package/lib/components/Select/Select.mjs

@@ -24,7 +24,7 @@ const _ = ({ onClick: s, disabled: o, ref: t }) => /* @__PURE__ */ r.jsx(
 );
 function nr({
   required: s,
-  getOptionLabel: o = (i) => i,
+  getOptionLabel: o = (i) => String(i),
   placeholder: t,
   helperText: d,
   hideHelperText: v = !1,

package/lib/components/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
-import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
 import { ReactNode } from 'react';
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
 import { WithoutEmotionSpecific } from '../types';
 export type TextFieldProps = Omit<WithoutEmotionSpecific<MuiTextFieldProps>, 'variant' | 'color'> & {
     /**
@@ -25,4 +25,4 @@ export type TextFieldProps = Omit<WithoutEmotionSpecific<MuiTextFieldProps>, 'va
      */
     trimmed?: boolean;
 };
-export declare const TextField: ({ success, error, helperText: helperTextProp, fullWidth, startAdornment, endAdornment, slotProps, maxLength, trimmed, onBlur, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ success, error, helperText: helperTextProp, fullWidth, startAdornment, endAdornment, inputProps, InputProps, maxLength, trimmed, onBlur, ...props }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/TextField/TextField.mjs

@@ -1,56 +1,56 @@
 import { j as r } from "../../_virtual/jsx-runtime.mjs";
-import { TextField as p } from "@mui/material";
 import { useMemo as u } from "react";
-import { FormHelperTextContent as l } from "../FormHelperText/FormHelperTextContent/FormHelperTextContent.mjs";
-const w = ({
+import { TextField as B } from "@mui/material";
+import { FormHelperTextContent as a } from "../FormHelperText/FormHelperTextContent/FormHelperTextContent.mjs";
+const E = ({
   success: e,
   error: i,
   helperText: t,
-  fullWidth: a = !1,
+  fullWidth: l = !1,
   startAdornment: m,
   endAdornment: s,
-  slotProps: f,
-  maxLength: x,
-  trimmed: d = !0,
-  onBlur: c,
+  inputProps: f,
+  InputProps: x,
+  maxLength: d,
+  trimmed: c = !0,
+  onBlur: j,
   ...o
 }) => {
-  const j = u(() => {
+  const g = u(() => {
     if (e)
       return "success";
-  }, [e]), g = u(() => e ? /* @__PURE__ */ r.jsx(l, { success: !0, children: t }) : i ? /* @__PURE__ */ r.jsx(l, { error: !0, children: t }) : t || /* @__PURE__ */ r.jsx(r.Fragment, {}), [t, e, i]), F = (n) => {
-    if (d) {
+  }, [e]), F = u(() => e ? /* @__PURE__ */ r.jsx(a, { success: !0, children: t }) : i ? /* @__PURE__ */ r.jsx(a, { error: !0, children: t }) : t || /* @__PURE__ */ r.jsx(r.Fragment, {}), [t, e, i]), p = (n) => {
+    if (c) {
       const h = n.target.value?.trim();
       o.onChange?.({
         ...n,
         target: { ...n.target, value: h }
       });
     }
-    c?.(n);
+    j?.(n);
   };
   return /* @__PURE__ */ r.jsx(
-    p,
+    B,
     {
       variant: "outlined",
-      fullWidth: a,
+      fullWidth: l,
       error: i,
-      color: j,
-      helperText: g,
-      slotProps: {
-        htmlInput: {
-          maxLength: x
-        },
-        input: {
-          startAdornment: m,
-          endAdornment: s
-        },
+      color: g,
+      helperText: F,
+      InputProps: {
+        startAdornment: m,
+        endAdornment: s,
+        ...x
+      },
+      inputProps: {
+        maxLength: d,
         ...f
       },
-      onBlur: F,
+      onBlur: p,
       ...o
     }
   );
 };
 export {
-  w as TextField
+  E as TextField
 };

package/lib/theme/components/MuiAutocomplete.mjs

@@ -28,8 +28,7 @@ const i = {
       return {
         display: "flex",
         alignItems: "center",
-        justifyContent: "flex-end",
-        top: "calc(50% - 16px)"
+        justifyContent: "flex-end"
       };
     },
     paper({ theme: t }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/components",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "browser": "./src/index.ts",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -20,29 +20,29 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/material": "^6.4.4",
+    "@mui/material": "^6.4.5",
     "@mui/system": "^6.4.3",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-use": "^17.6.0",
-    "remeda": "^2.20.1"
+    "remeda": "^2.20.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",
     "@faker-js/faker": "^9.5.0",
-    "@storybook/addon-essentials": "^8.5.6",
-    "@storybook/addon-interactions": "^8.5.6",
-    "@storybook/addon-onboarding": "^8.5.6",
-    "@storybook/blocks": "^8.5.6",
-    "@storybook/builder-vite": "^8.5.6",
-    "@storybook/react": "^8.5.6",
-    "@storybook/react-vite": "^8.5.6",
-    "@storybook/test": "^8.5.6",
-    "@types/react": "^19.0.8",
+    "@storybook/addon-essentials": "^8.5.8",
+    "@storybook/addon-interactions": "^8.5.8",
+    "@storybook/addon-onboarding": "^8.5.8",
+    "@storybook/blocks": "^8.5.8",
+    "@storybook/builder-vite": "^8.5.8",
+    "@storybook/react": "^8.5.8",
+    "@storybook/react-vite": "^8.5.8",
+    "@storybook/test": "^8.5.8",
+    "@types/react": "^19.0.10",
     "prop-types": "^15.8.1",
-    "storybook": "^8.5.6"
+    "storybook": "^8.5.8"
   },
   "scripts": {
     "build": "vite build",