@max-ts/components 0.1.1 → 0.2.1

package/lib/components/Tag/styles.mjs

@@ -0,0 +1,214 @@
+import { styled as s, Chip as d } from "@mui/material";
+import { Container as u } from "../Container/Container.mjs";
+import { TagStates as o, TagVariants as y, TagColors as l } from "./enums.mjs";
+const f = {
+  small: "20px",
+  medium: "24px",
+  large: "32px"
+}, S = (r) => {
+  const { tagColor: e, variant: t } = r;
+  return t === y.CONTAINED ? "white" : {
+    [l.PRIMARY]: "primary",
+    [l.ERROR]: "error",
+    [l.GREY]: "grey",
+    [l.SUCCESS]: "success",
+    [l.WARNING]: "warning",
+    [l.DEFAULT]: "grey"
+  }[e || "default"];
+}, x = ({ theme: r, rounded: e }) => e ? "100px" : r.shape.small, w = ({
+  theme: r,
+  rounded: e
+}) => e ? "100px" : `0  ${r.shape.small}  ${r.shape.small} 0`, p = ({
+  theme: r,
+  customColor: e,
+  customVariant: t,
+  disabled: n
+}) => {
+  if (n)
+    return r.palette.grey[100];
+  if (t === "text")
+    return "transparent";
+  const a = {
+    contained: {
+      primary: r.palette.primary.main,
+      error: r.palette.red[800],
+      success: r.palette.green[800],
+      warning: r.palette.yellow[800],
+      grey: r.palette.grey[300],
+      default: r.palette.background.element
+    },
+    light: {
+      primary: r.palette.primary[100],
+      error: r.palette.red[100],
+      success: r.palette.green[100],
+      warning: r.palette.yellow[100],
+      grey: r.palette.grey[100],
+      default: r.palette.background.element
+    }
+  };
+  return t && e ? a[t][e] : !t && e ? a.contained[e] : r.palette.grey[300];
+}, i = ({
+  theme: r,
+  customColor: e,
+  customVariant: t,
+  disabled: n
+}) => {
+  if (n)
+    return r.palette.text.disabled;
+  if (t === "text")
+    return r.palette.grey[900];
+  const a = {
+    contained: {
+      primary: r.palette.primary.contrastText,
+      error: r.palette.error.contrastText,
+      success: r.palette.warning.contrastText,
+      warning: r.palette.success.contrastText,
+      default: r.palette.text.primary,
+      grey: r.palette.grey[900]
+    },
+    light: {
+      primary: r.palette.primary.main,
+      error: r.palette.red[800],
+      success: r.palette.green[800],
+      warning: r.palette.yellow[800],
+      default: r.palette.text.primary,
+      grey: r.palette.grey[900]
+    }
+  };
+  return !t && !e ? r.palette.grey[900] : !t && e !== "grey" ? r.palette.common.white : e ? t && e ? a[t][e] : r.palette.text.primary : a.contained.default;
+}, $ = ({
+  theme: r,
+  rounded: e,
+  customSize: t
+}) => {
+  if (e)
+    return r.spacing(0, 2);
+  switch (t) {
+    case "small":
+      return r.spacing(0, 1);
+    case "medium":
+    case "large":
+      return r.spacing(0, 2);
+  }
+}, g = ({
+  theme: r,
+  iconState: e,
+  customVariant: t,
+  customColor: n
+}) => {
+  const a = {
+    contained: {
+      primary: r.palette.primary[600],
+      error: r.palette.red[600],
+      success: r.palette.green[600],
+      warning: r.palette.yellow[600],
+      grey: r.palette.grey[100],
+      default: r.palette.grey[300]
+    },
+    light: {
+      primary: r.palette.primary[300],
+      error: r.palette.red[300],
+      success: r.palette.green[300],
+      warning: r.palette.yellow[300],
+      grey: r.palette.grey[300],
+      default: r.palette.grey[300]
+    }
+  };
+  if (e !== "default") {
+    if ((t === "contained" || t === "light") && n)
+      return a[t][n || "default"];
+    if (t === "text")
+      return a.light.grey;
+  }
+  return "transparent";
+}, c = ({
+  customVariant: r,
+  customColor: e,
+  theme: t
+}) => r === "contained" && e !== "grey" && e !== "default" ? t.palette.common.white : t.palette.grey[900], k = s(d, {
+  shouldForwardProp: (r) => r !== "customColor" && r !== "customVariant" && r !== "rounded" && r !== "customSize"
+})`
+  user-select: none;
+
+  height: ${({ customSize: r }) => f[r]};
+
+  font-size: 14px;
+
+  background-color: ${p};
+  border-radius: ${x};
+
+  &:hover {
+    color: ${i};
+
+    background-color: ${p};
+  }
+
+  &:active {
+    color: ${i};
+
+    background-color: ${p};
+  }
+
+  .MuiChip-label {
+    padding: ${$};
+
+    color: ${i};
+
+    &:hover {
+      color: ${i};
+    }
+
+    &:active {
+      color: ${i};
+    }
+  }
+
+  .MuiChip-deleteIcon {
+    width: 20px;
+    height: 20px;
+    margin: 0;
+
+    color: ${c};
+
+    background: ${(r) => g({ ...r, iconState: o.DEFAULT })};
+    border-radius: ${w};
+
+    &:hover {
+      color: ${c};
+
+      background: ${(r) => g({ ...r, iconState: o.HOVER })};
+    }
+
+    &:active {
+      color: ${c};
+
+      background: ${(r) => g({ ...r, iconState: o.ACTIVE })};
+    }
+  }
+
+  &.Mui-disabled {
+    opacity: 1;
+  }
+
+  .MuiChip-avatar {
+    width: 16px;
+    height: 16px;
+    margin: 2px;
+
+    color: ${i};
+  }
+
+  .MuiChip-icon {
+    width: 16px;
+    height: 16px;
+  }
+`, v = s(u)`
+  align-items: center;
+  justify-content: flex-start;
+`;
+export {
+  v as LabelContainer,
+  k as StyledTag,
+  S as getBadgeColor,
+  c as getDeleteIconColor
+};

package/lib/components/Tag/types.d.ts

@@ -0,0 +1,5 @@
+import { TagColors, TagStates, TagVariants } from './enums';
+export type TagColor = `${TagColors}`;
+export type TagVariant = `${TagVariants}`;
+export type TagSize = 'small' | 'medium' | 'large';
+export type TagState = `${TagStates}`;

package/lib/components/TagBadge/TagBadge.d.ts

@@ -0,0 +1,23 @@
+import { BadgeColor, BadgeProps } from '../Badge';
+export type TagBadgeProps = Omit<BadgeProps, 'color' | 'withBorder'> & {
+    /**
+     * CheckableTag в состоянии checked
+     */
+    checked?: boolean;
+    /**
+     * CheckableTag в состоянии disabled
+     */
+    disabled?: boolean;
+    /**
+     * Кастомный цвет для состояния checked
+     */
+    checkedColor?: BadgeColor;
+    /**
+     * Цвет Badge
+     */
+    color?: BadgeColor;
+};
+/**
+ * Badge для использования внутри компонента Tag
+ */
+export declare const TagBadge: ({ color, checked, disabled, checkedColor, ...props }: TagBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/TagBadge/TagBadge.mjs

@@ -0,0 +1,25 @@
+import { j as m } from "../../_virtual/jsx-runtime.mjs";
+import { StyledBadge as g } from "./styles.mjs";
+import { getCheckableTagBadgeBgColor as i } from "./utils/getCheckableTagBadgeBgColor/getCheckableTagBadgeBgColor.mjs";
+const l = ({
+  color: r = "primary",
+  checked: o,
+  disabled: e,
+  checkedColor: t,
+  ...a
+}) => /* @__PURE__ */ m.jsx(
+  g,
+  {
+    withBorder: !1,
+    color: i({
+      disabled: e,
+      checked: o,
+      checkedColor: t,
+      color: r
+    }),
+    ...a
+  }
+);
+export {
+  l as TagBadge
+};

package/lib/components/TagBadge/styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledBadge: import('@emotion/styled').StyledComponent<Omit<import('../types').WithoutEmotionSpecific<import('@mui/material').BadgeProps>, "color"> & {
+    color: import('../Badge').BadgeColor;
+    withBorder?: boolean;
+    variantColor?: import('../Badge').BadgeVariantsColor;
+} & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, {}, {}>;

package/lib/components/TagBadge/styles.mjs

@@ -0,0 +1,16 @@
+import { styled as t } from "@mui/material";
+import { Badge as o } from "../Badge/Badge.mjs";
+const n = t(o)`
+  vertical-align: text-top;
+
+  &span.MuiBadge-badge {
+    position: static;
+    transform: none;
+
+    box-sizing: content-box;
+    height: 16px;
+  }
+`;
+export {
+  n as StyledBadge
+};

package/lib/components/TagBadge/utils/getCheckableTagBadgeBgColor/getCheckableTagBadgeBgColor.d.ts

@@ -0,0 +1,15 @@
+import { BadgeColor } from '../../../Badge';
+/**
+ * Утилита для получения цвета TagBadge,
+ * в зависимости от его состояния disabled и checked, и полученного цвета color из props
+ * @param {Object} disabled - Состояние disabled тега.
+ * @param {Object} checked - Состояние checked тега.
+ * @param {Object} checkedColor - Кастомный цвет для состояния checked.
+ * @param {Object} color - Цвет Badge, полученный из props.
+ */
+export declare const getCheckableTagBadgeBgColor: ({ disabled, checked, checkedColor, color, }: {
+    checked?: boolean;
+    disabled?: boolean;
+    checkedColor?: BadgeColor;
+    color: BadgeColor;
+}) => BadgeColor;

package/lib/components/TagBadge/utils/getCheckableTagBadgeBgColor/getCheckableTagBadgeBgColor.mjs

@@ -0,0 +1,9 @@
+const n = ({
+  disabled: e,
+  checked: r,
+  checkedColor: t,
+  color: g
+}) => e ? "grey" : r ? t || "white" : g;
+export {
+  n as getCheckableTagBadgeBgColor
+};

package/lib/components/TagsList/Tag/Tag.d.ts

@@ -0,0 +1,25 @@
+import { MouseEvent } from 'react';
+import { TagProps as BaseTagProps } from '../../Tag';
+export type TagProps = {
+    /**
+     * Текст тега
+     */
+    label: BaseTagProps['label'];
+    /**
+     * Если `true`, то тег будет недоступен для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Если `true`, то текст может сокращаться путем обрезания части символов
+     */
+    shrinks?: boolean;
+    /**
+     * Хендлер удаления тега
+     */
+    onDelete?: () => void;
+    /**
+     * Хендлер клика по тегу
+     */
+    onClick: (value: MouseEvent<HTMLDivElement>) => void;
+};
+export declare const Tag: (props: TagProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/TagsList/Tag/Tag.mjs

@@ -0,0 +1,19 @@
+import { j as i } from "../../../_virtual/jsx-runtime.mjs";
+import { StyledTag as n } from "./styles.mjs";
+import { useLogic as m } from "./useLogic/useLogic.mjs";
+const d = (o) => {
+  const { onMouseDown: s } = m(), { shrinks: r, isDisabled: t, ...e } = o;
+  return /* @__PURE__ */ i.jsx(
+    n,
+    {
+      $shrinks: r,
+      color: "grey",
+      disabled: t,
+      ...e,
+      onMouseDown: s
+    }
+  );
+};
+export {
+  d as Tag
+};

package/lib/components/TagsList/Tag/styles.d.ts

@@ -0,0 +1,11 @@
+import { TagProps } from '../../Tag';
+export declare const StyledTag: import('@emotion/styled').StyledComponent<Omit<TagProps, "ref"> & import('react').RefAttributes<HTMLDivElement> & import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme> & Omit<import('../../types').WithoutEmotionSpecific<import('@mui/material').ChipProps>, "color" | "size" | "variant"> & {
+    color?: import('../../Tag').TagColor;
+    variant?: import('../../Tag').TagVariant;
+    rounded?: boolean;
+    size?: import('../../Tag').TagSize;
+    startAddon?: import('../../Tag').TagAddon;
+    endAddon?: import('../../Tag').TagAddon;
+} & {
+    $shrinks?: boolean;
+}, {}, {}>;

package/lib/components/TagsList/Tag/styles.mjs

@@ -0,0 +1,17 @@
+import { styled as i } from "@mui/material";
+import { Tag as r } from "../../Tag/Tag.mjs";
+const p = i(r, {
+  shouldForwardProp: (o) => o !== "$shrinks"
+})`
+  min-width: ${({ $shrinks: o }) => o ? "30px" : "unset"};
+  max-width: 246px;
+
+  & {
+    .MuiBox-root {
+      display: inline;
+    }
+  }
+`;
+export {
+  p as StyledTag
+};

package/lib/components/TagsList/Tag/useLogic/useLogic.d.ts

@@ -0,0 +1,4 @@
+import { MouseEvent } from 'react';
+export declare const useLogic: () => {
+    onMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
+};

package/lib/components/TagsList/Tag/useLogic/useLogic.mjs

@@ -0,0 +1,8 @@
+const s = () => ({
+  onMouseDown: (o) => {
+    o.stopPropagation();
+  }
+});
+export {
+  s as useLogic
+};

package/lib/components/TagsList/TagsList.d.ts

@@ -0,0 +1,34 @@
+import { MouseEvent } from 'react';
+import { TagValue } from './types';
+export type TagsListProps<TData extends TagValue = TagValue> = {
+    /**
+     * Название класса, применяется к корневому компоненту
+     */
+    className?: string;
+    /**
+     * Список к отображению
+     */
+    data?: Array<TData> | undefined;
+    /**
+     * Если `true`, то тег будет недоступен для взаимодействия
+     */
+    isDisabled?: boolean;
+    /**
+     * Поле, используемое в качестве ключа списка
+     */
+    keyId: TData extends string ? never : keyof TData;
+    /**
+     * Используется для определения строкового значения опции
+     */
+    getOptionLabel: (value: TData) => string | number;
+    onChange: (value: Array<TData> | undefined) => void;
+    /**
+     * Функция, вызываемая при клике не тэг
+     */
+    onClick: (value: MouseEvent<HTMLDivElement>) => void;
+};
+/**
+ * Предназначен для отображения списка тегов в таких компонентах как: Select, Autocomplete, TreeLikeAutocomplete
+ * Не предназначен для использования в продуктах, не экспортируется из пакета
+ */
+export declare const TagsList: <TData extends TagValue>(props: TagsListProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/lib/components/TagsList/TagsList.mjs

@@ -0,0 +1,34 @@
+import { j as r } from "../../_virtual/jsx-runtime.mjs";
+import { Tag as i } from "./Tag/Tag.mjs";
+import { Wrapper as j } from "./styles.mjs";
+import { useLogic as d } from "./useLogic/useLogic.mjs";
+import { getKey as u } from "./utils/getKey/getKey.mjs";
+const C = (s) => {
+  const { maxItems: e, tagsContainerRef: n, visibleOptions: g, getTagProps: p } = d(s), { className: l, data: t, keyId: c, isDisabled: o, onClick: a } = s;
+  return /* @__PURE__ */ r.jsxs(j, { className: l, ref: n, children: [
+    g?.map((m, f) => {
+      const x = p(m, f);
+      return /* @__PURE__ */ r.jsx(
+        i,
+        {
+          isDisabled: o,
+          onClick: a,
+          ...x
+        },
+        u(m, c)
+      );
+    }),
+    t && e < t.length && /* @__PURE__ */ r.jsx(
+      i,
+      {
+        isDisabled: o,
+        label: `+${t.length - e}`,
+        onClick: a
+      },
+      "more"
+    )
+  ] });
+};
+export {
+  C as TagsList
+};

package/lib/components/TagsList/styles.d.ts

@@ -0,0 +1 @@
+export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').MUIStyledCommonProps<import('@mui/material').Theme>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/components/TagsList/styles.mjs

@@ -0,0 +1,8 @@
+import { styled as o } from "@mui/material";
+const a = o("div")`
+  display: flex;
+  column-gap: ${({ theme: p }) => p.spacing(1)};
+`;
+export {
+  a as Wrapper
+};

package/lib/components/TagsList/useLogic/useLogic.d.ts

@@ -0,0 +1,14 @@
+import { TagsListProps } from '../TagsList';
+import { TagValue } from '../types';
+type UseLogicParams<TData extends TagValue> = TagsListProps<TData>;
+export declare const useLogic: <TData extends TagValue>({ data, keyId, getOptionLabel, onChange, }: UseLogicParams<TData>) => {
+    maxItems: number;
+    visibleOptions: TData[];
+    tagsContainerRef: import('react').RefObject<HTMLDivElement | null>;
+    getTagProps: (option: TData, index: number) => {
+        label: string | number;
+        shrinks: boolean;
+        onDelete: () => void;
+    };
+};
+export {};

package/lib/components/TagsList/useLogic/useLogic.mjs

@@ -0,0 +1,69 @@
+import { useState as R, useRef as p, useLayoutEffect as W, useEffect as v } from "react";
+import { getElementByText as I } from "../utils/getElementByText/getElementByText.mjs";
+const z = ({
+  data: t = [],
+  keyId: g,
+  getOptionLabel: u,
+  onChange: T
+}) => {
+  const [c, x] = R(1), h = p(!1), l = p(null), y = (e, o, s) => {
+    const i = u(t[0]);
+    document.body.appendChild(e);
+    let d = 0, n = 0;
+    for (let r = 1; r < t.length; r += 1) {
+      const f = e.firstChild?.cloneNode(
+        !0
+      ), b = u(t[r]), m = I(f, i);
+      if (!m)
+        throw new Error("Could not find text node");
+      m.textContent = b, e.appendChild(f);
+      const C = f.getBoundingClientRect().width + s;
+      if (d + C > o)
+        break;
+      n += 1, d += C;
+    }
+    return document.body.removeChild(e), n;
+  }, w = () => {
+    const e = l.current;
+    if (!e)
+      throw new Error("Tags container ref is not set");
+    const o = window.getComputedStyle(e), s = Number.parseInt(o.columnGap), i = e.firstElementChild?.getBoundingClientRect().width || 0, d = e.getBoundingClientRect().width - i, n = e.cloneNode(!0);
+    for (; n.lastElementChild && n.children.length > 1; )
+      n.removeChild(n.lastElementChild);
+    n.style.visibility = "hidden";
+    const r = y(n, d, s);
+    x(1 + r);
+  };
+  W(() => {
+    typeof window > "u" || !t || !t.length || (w(), h.current = !0);
+  }, [t]), v(() => {
+    if (typeof window > "u" || !t || !t.length)
+      return;
+    if (!l.current)
+      throw new Error("Tags container ref is not set");
+    const e = new ResizeObserver(() => {
+      if (h.current) {
+        h.current = !1;
+        return;
+      }
+      w();
+    });
+    return e.observe(l.current), () => e.disconnect();
+  }, [t]);
+  const E = (e, o) => {
+    const s = u(e), i = o === c - 1 && c <= t.length;
+    return { label: s, shrinks: i, onDelete: () => {
+      const n = t?.filter((r) => typeof r == "string" ? r !== e : r[g] !== e[g]);
+      T(n?.length ? n : []);
+    } };
+  }, a = t?.slice(0, c);
+  return {
+    maxItems: c,
+    visibleOptions: a,
+    tagsContainerRef: l,
+    getTagProps: E
+  };
+};
+export {
+  z as useLogic
+};

package/lib/components/TagsList/utils/getElementByText/getElementByText.mjs

@@ -0,0 +1,13 @@
+const i = (n, r) => {
+  if (n.innerHTML === r)
+    return n;
+  for (let e = 0; e < n.children.length; e += 1) {
+    const l = i(n.children[e], r);
+    if (l)
+      return l;
+  }
+  return null;
+};
+export {
+  i as getElementByText
+};

package/lib/components/TagsList/utils/getKey/getKey.d.ts

@@ -0,0 +1,2 @@
+import { TagValue } from '../../types';
+export declare const getKey: (option: TagValue, keyId: string) => string;

package/lib/components/TagsList/utils/getKey/getKey.mjs

@@ -0,0 +1,9 @@
+const n = (e, r) => {
+  if (typeof e == "string")
+    return e;
+  const t = e[r];
+  return typeof t == "number" ? t.toString() : t;
+};
+export {
+  n as getKey
+};

package/lib/components/TextArea/TextArea.d.ts

@@ -0,0 +1,3 @@
+import { TextFieldProps } from '../TextField';
+export type TextAreaProps = Omit<TextFieldProps, 'multiline'>;
+export declare const TextArea: ({ rows, ...props }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;

package/lib/components/TextArea/TextArea.mjs

@@ -0,0 +1,6 @@
+import { j as e } from "../../_virtual/jsx-runtime.mjs";
+import { TextField as o } from "../TextField/TextField.mjs";
+const x = ({ rows: t = 7, ...r }) => /* @__PURE__ */ e.jsx(o, { multiline: !0, rows: t, ...r });
+export {
+  x as TextArea
+};

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

@@ -0,0 +1,28 @@
+import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import { ReactNode } from 'react';
+import { WithoutEmotionSpecific } from '../types';
+export type TextFieldProps = Omit<WithoutEmotionSpecific<MuiTextFieldProps>, 'variant' | 'color'> & {
+    /**
+     * Флаг отображения успешного состояния
+     */
+    success?: boolean;
+    /**
+     * Элемент, который добавляется в начало
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Элемент, который добавляется в конец
+     */
+    endAdornment?: ReactNode;
+    /**
+     * Максимальная длина ввода
+     */
+    maxLength?: number;
+    /**
+     * Параметр для обрезания пробелов в текст филде при вызове onBlur.
+     * @default true
+     * @example <TextField trimmed={false} />
+     */
+    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;