test-stpr-ui-kit 0.7.0 → 1.0.0

package/dist/components/TextWithLabel/TextWithLabel.js

@@ -0,0 +1,39 @@
+import { jsxs as N, jsx as t } from "react/jsx-runtime";
+import T from "clsx";
+import e from "./TextWithLabel.module.scss.js";
+import { Label as b } from "../Label/Label.js";
+import { Text as f } from "../Text/Text.js";
+const u = (r) => {
+  const {
+    label: l,
+    required: a,
+    infoTooltipText: i,
+    tooltipPosition: p,
+    classNameLabelRoot: m,
+    classNameBaseTooltipRoot: c,
+    classNameWrapperRoot: o,
+    children: x,
+    ...s
+  } = r, n = T({
+    [e.spTextWithLabel]: !0,
+    [e.spTextWithLabel_ellipsis]: s.isEllipsis,
+    ...o && { [o]: !0 }
+  });
+  return /* @__PURE__ */ N("div", { className: n, children: [
+    /* @__PURE__ */ t(
+      b,
+      {
+        label: l,
+        required: a,
+        infoTooltipText: i,
+        tooltipPosition: p,
+        classNameRoot: m,
+        classNameBaseTooltipRoot: c
+      }
+    ),
+    /* @__PURE__ */ t(f, { ...s, children: x })
+  ] });
+};
+export {
+  u as TextWithLabel
+};

package/dist/components/TextWithLabel/TextWithLabel.module.scss.js

@@ -0,0 +1,9 @@
+import './TextWithLabel.css';const e = "_spTextWithLabel_18nkl_1", s = "_spTextWithLabel_ellipsis_18nkl_4", t = {
+  spTextWithLabel: e,
+  spTextWithLabel_ellipsis: s
+};
+export {
+  t as default,
+  e as spTextWithLabel,
+  s as spTextWithLabel_ellipsis
+};

package/dist/components/TextWithLabel/index.d.ts

@@ -0,0 +1,2 @@
+export { TextWithLabel } from "./TextWithLabel";
+export type { TextWithLabelProps } from "./types";

package/dist/components/TextWithLabel/types/index.d.ts

@@ -0,0 +1,6 @@
+import { LabelProps } from "../../Label";
+import { TextProps } from "../../Text";
+export interface TextWithLabelProps extends TextProps, Omit<LabelProps, "classNameRoot"> {
+    classNameLabelRoot?: string;
+    classNameWrapperRoot?: string;
+}

package/dist/components/Textarea/Textarea.css

@@ -0,0 +1 @@
+._spTextarea_ysm0w_1{width:100%;position:relative}._spTextarea_ysm0w_1{opacity:1;visibility:visible}._spTextarea_ysm0w_1{transition:all .3s ease-in-out}@starting-style{._spTextarea_ysm0w_1{opacity:0;visibility:hidden}}._spTextarea_fluidHeight_ysm0w_18{flex-grow:1;height:100%}._spTextarea_fluidHeight_ysm0w_18 ._spTextarea__container_ysm0w_22,._spTextarea_fluidHeight_ysm0w_18 ._spTextarea__control_ysm0w_22{height:100%}._spTextarea_absolutePositionError_ysm0w_25{position:relative}._spTextarea_error_ysm0w_28 ._spTextarea__control_ysm0w_22{border-color:var(--spui-color-border-error);color:var(--spui-color-text-error)}._spTextarea_error_ysm0w_28 ._spTextarea__control_ysm0w_22:hover::placeholder{color:var(--spui-color-text-secondary)}._spTextarea__container_ysm0w_22{position:relative;width:100%}._spTextarea__control_ysm0w_22{width:100%;font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:16px;color:var(--spui-color-text-primary);padding:11.5px 16px;border-width:2px;border-style:solid}._spTextarea__control_ysm0w_22::-webkit-scrollbar{width:var(--spui-scrollbar-width);height:var(--spui-scrollbar-width)}._spTextarea__control_ysm0w_22::-webkit-scrollbar-track{background:var(--spui-color-surface-transparent)}._spTextarea__control_ysm0w_22::-webkit-scrollbar-thumb{background:var(--color-aqua-blue)}._spTextarea__control_ysm0w_22::-webkit-scrollbar-thumb:hover{background:var(--color-accent-blue)}@media only screen and (min-width:768px){._spTextarea__control_ysm0w_22{font-size:18px;padding:16.5px 16px}}._spTextarea__control_filled_ysm0w_68{border-color:var(--spui-color-border-secondary);background-color:var(--spui-color-surface-page)}._spTextarea__control_outlined_ysm0w_72{background-color:var(--spui-color-surface-transparent);border-color:var(--spui-color-border-primary)}._spTextarea__control_resize_none_ysm0w_76{resize:none}._spTextarea__control_resize_both_ysm0w_79{resize:both}._spTextarea__control_resize_horizontal_ysm0w_82{resize:horizontal}._spTextarea__control_resize_vertical_ysm0w_85{resize:vertical}._spTextarea__control_disabled_ysm0w_88{pointer-events:none;color:var(--spui-color-text-disabled)}._spTextarea__control_ysm0w_22::placeholder{color:var(--spui-color-text-secondary)}._spTextarea__control_ysm0w_22:hover::placeholder{color:var(--spui-color-text-primary)}._spTextarea__control_disabled_ysm0w_88:hover::placeholder{color:var(--spui-color-text-disabled)}._spTextarea__control_ysm0w_22:focus,._spTextarea__control_ysm0w_22:focus-visible{outline:none;border-style:solid;border-color:var(--spui-color-border-action);background-color:var(--spui-color-surface-transparent)}._spTextarea__control_ysm0w_22:focus:hover::placeholder,._spTextarea__control_ysm0w_22:focus-visible:hover::placeholder{color:var(--spui-color-text-secondary)}._spTextarea__error_ysm0w_110{padding-top:8px;font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:12px;color:var(--spui-color-text-error)}._spTextarea__error_absolutePosition_ysm0w_117{position:absolute;top:100%}@media only screen and (min-width:768px){._spTextarea__error_ysm0w_110{font-size:14px}}

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ITextareaProps } from "./types";
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<ITextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,132 @@
+import { jsxs as K, jsx as a } from "react/jsx-runtime";
+import o from "clsx";
+import Q from "react";
+import U from "react-textarea-autosize";
+import e from "./Textarea.module.scss.js";
+import { Label as W } from "../Label/Label.js";
+const X = Q.forwardRef((H, i) => {
+  const {
+    value: t,
+    onChange: j,
+    label: n,
+    variant: c = "outlined",
+    disabled: s = !1,
+    autoSize: A = !0,
+    isAbsolutePositionError: m = !1,
+    error: r,
+    required: F,
+    name: p,
+    onMouseEnter: $,
+    tooltipPosition: k,
+    isVisibleDefaultTitle: u = !0,
+    infoTooltipText: q,
+    placeholder: _ = "Введите...",
+    fluidHeight: l,
+    rows: x = 1,
+    maxRows: D,
+    cols: T = 20,
+    maxLength: d,
+    minLength: N,
+    readOnly: f = !1,
+    autoFocus: h = !1,
+    autoComplete: b = "off",
+    spellCheck: g = !0,
+    wrap: C = "soft",
+    resize: R = "both",
+    onBlur: v,
+    onFocus: E,
+    classNameRoot: L,
+    classNameError: B,
+    classNameLabel: w,
+    classNameBaseTooltipRoot: M
+  } = H, O = o({
+    [e.spTextarea]: !0,
+    [e.spTextarea_fluidHeight]: l,
+    [e.spTextarea_error]: !!r,
+    [e.spTextarea_absolutePositionError]: m,
+    ...L && { [L]: !0 }
+  }), S = o({
+    [e.spTextarea__container]: !0
+  }), z = o({
+    [e.spTextarea__control]: !0,
+    [e[`spTextarea__control_${c}`]]: c,
+    [e.spTextarea__control_disabled]: s,
+    [e.spTextarea__control_fluidHeight]: l,
+    [e[`spTextarea__control_resize_${R}`]]: R
+  }), V = o({
+    ...w && { [w]: !0 }
+  }), G = o({
+    [e.spTextarea__error]: !0,
+    [e.spTextarea__error_absolutePosition]: m,
+    ...B && { [B]: !0 }
+  }), P = (y) => {
+    const { value: I, name: J } = y.target;
+    j(y, { value: I, name: J });
+  };
+  return /* @__PURE__ */ K("div", { className: O, children: [
+    n && /* @__PURE__ */ a(
+      W,
+      {
+        classNameRoot: V,
+        tooltipPosition: k,
+        required: F,
+        label: n,
+        infoTooltipText: q,
+        classNameBaseTooltipRoot: M
+      }
+    ),
+    /* @__PURE__ */ a("div", { onMouseEnter: $, className: S, children: A && !l ? /* @__PURE__ */ a(
+      U,
+      {
+        placeholder: _,
+        disabled: s,
+        readOnly: f,
+        autoFocus: h,
+        rows: x,
+        cols: T,
+        maxLength: d,
+        minLength: N,
+        autoComplete: b,
+        spellCheck: g,
+        wrap: C,
+        onChange: P,
+        onBlur: v,
+        onFocus: E,
+        title: u ? t : void 0,
+        value: t,
+        name: p,
+        className: z,
+        ref: i,
+        maxRows: D
+      }
+    ) : /* @__PURE__ */ a(
+      "textarea",
+      {
+        placeholder: _,
+        disabled: s,
+        readOnly: f,
+        autoFocus: h,
+        rows: x,
+        cols: T,
+        maxLength: d,
+        minLength: N,
+        autoComplete: b,
+        spellCheck: g,
+        wrap: C,
+        onChange: P,
+        onBlur: v,
+        onFocus: E,
+        title: u ? t : void 0,
+        value: t,
+        name: p,
+        className: z,
+        ref: i
+      }
+    ) }),
+    r && /* @__PURE__ */ a("div", { className: G, children: r })
+  ] });
+});
+X.displayName = "Textarea";
+export {
+  X as Textarea
+};

package/dist/components/Textarea/Textarea.module.scss.js

@@ -0,0 +1,35 @@
+import './Textarea.css';const _ = "_spTextarea_ysm0w_1", e = "_spTextarea_fluidHeight_ysm0w_18", r = "_spTextarea__container_ysm0w_22", t = "_spTextarea__control_ysm0w_22", o = "_spTextarea_absolutePositionError_ysm0w_25", a = "_spTextarea_error_ysm0w_28", s = "_spTextarea__control_filled_ysm0w_68", n = "_spTextarea__control_outlined_ysm0w_72", l = "_spTextarea__control_resize_none_ysm0w_76", i = "_spTextarea__control_resize_both_ysm0w_79", c = "_spTextarea__control_resize_horizontal_ysm0w_82", p = "_spTextarea__control_resize_vertical_ysm0w_85", x = "_spTextarea__control_disabled_ysm0w_88", T = "_spTextarea__error_ysm0w_110", d = "_spTextarea__error_absolutePosition_ysm0w_117", y = {
+  spTextarea: _,
+  spTextarea_fluidHeight: e,
+  spTextarea__container: r,
+  spTextarea__control: t,
+  spTextarea_absolutePositionError: o,
+  spTextarea_error: a,
+  spTextarea__control_filled: s,
+  spTextarea__control_outlined: n,
+  spTextarea__control_resize_none: l,
+  spTextarea__control_resize_both: i,
+  spTextarea__control_resize_horizontal: c,
+  spTextarea__control_resize_vertical: p,
+  spTextarea__control_disabled: x,
+  spTextarea__error: T,
+  spTextarea__error_absolutePosition: d
+};
+export {
+  y as default,
+  _ as spTextarea,
+  r as spTextarea__container,
+  t as spTextarea__control,
+  x as spTextarea__control_disabled,
+  s as spTextarea__control_filled,
+  n as spTextarea__control_outlined,
+  i as spTextarea__control_resize_both,
+  c as spTextarea__control_resize_horizontal,
+  l as spTextarea__control_resize_none,
+  p as spTextarea__control_resize_vertical,
+  T as spTextarea__error,
+  d as spTextarea__error_absolutePosition,
+  o as spTextarea_absolutePositionError,
+  a as spTextarea_error,
+  e as spTextarea_fluidHeight
+};

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { Textarea } from "./Textarea";
+export type { ITextareaProps, TOnChangeTextarea } from "./types";

package/dist/components/Textarea/types/index.d.ts

@@ -0,0 +1,45 @@
+import React, { ForwardedRef } from "react";
+import { ETooltipPosition } from "../../Tooltip";
+export type TTextareaVariant = "outlined" | "filled";
+export type TTextareaResize = "none" | "both" | "horizontal" | "vertical";
+export type TTextareaWrap = "hard" | "soft" | "off";
+export interface ITextareaProps {
+    name: string;
+    variant?: TTextareaVariant;
+    onChange: TOnChangeTextarea;
+    value?: string;
+    error?: string;
+    isAbsolutePositionError?: boolean;
+    onMouseEnter?: () => void;
+    label?: string;
+    infoTooltipText?: string;
+    tooltipPosition?: ETooltipPosition;
+    disabled?: boolean;
+    required?: boolean;
+    autoSize?: boolean;
+    isVisibleDefaultTitle?: boolean;
+    fluidHeight?: boolean;
+    placeholder?: string;
+    classNameError?: string;
+    classNameLabel?: string;
+    classNameRoot?: string;
+    classNameBaseTooltipRoot?: string;
+    ref?: ForwardedRef<HTMLTextAreaElement>;
+    resize?: TTextareaResize;
+    rows?: number;
+    maxRows?: number;
+    cols?: number;
+    maxLength?: number;
+    minLength?: number;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    spellCheck?: boolean;
+    wrap?: TTextareaWrap;
+    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+}
+export type TOnChangeTextarea = (event: React.ChangeEvent<HTMLTextAreaElement>, data: {
+    name: string;
+    value: string | null;
+}) => void;

package/dist/components/Tooltip/Tooltip.css

@@ -0,0 +1 @@
+._spTooltip_15fi5_1{position:relative;display:flex;width:fit-content}._spTooltip_15fi5_1{opacity:1;visibility:visible}._spTooltip_15fi5_1{transition:all .3s ease-in-out}@starting-style{._spTooltip_15fi5_1{opacity:0;visibility:hidden}}._spInfoTooltip_15fi5_20{color:var(--spui-color-icon-disabled)}._spInfoTooltip_hover_15fi5_23:hover{color:var(--spui-color-icon-action)}._spInfoTooltip_clickable_15fi5_26{cursor:pointer}._spInfoTooltip_15fi5_20.tooltip-active._spInfoTooltip_15fi5_20 _clickable{cursor:default}._spInfoTooltip_15fi5_20.tooltip-active{color:var(--spui-color-icon-action)}

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { InfoTooltipProps, TooltipProps } from "./types";
+export declare const Tooltip: React.FC<TooltipProps>;
+export declare const InfoTooltip: React.FC<InfoTooltipProps>;

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,191 @@
+import { jsx as Y, jsxs as so } from "react/jsx-runtime";
+import B from "clsx";
+import { useState as C, useRef as D, useCallback as no, useEffect as x } from "react";
+import { useClickOutside as ro } from "../../hooks/useClickOutside.js";
+import X from "./Tooltip.module.scss.js";
+import { ETooltipPosition as s } from "./types/index.js";
+import { Icon as co } from "../Icons/Icon.js";
+import { EIconName as ao } from "../Icons/types/index.js";
+import { Portal as po } from "../Portal/Potral.js";
+import { BaseTooltip as wo } from "../BaseTooltip/BaseTooltip.js";
+const fo = (p) => {
+  const {
+    hover: w = !0,
+    isToggleClick: y = !1,
+    isStopPropagationClickOnTrigger: f = !1,
+    isVisibleTooltip: m = !0,
+    trigger: P,
+    triggerAction: F,
+    actionOnClose: I,
+    classNameTooltip: L,
+    position: d = s.BottomLeft,
+    lockPosition: E = !1,
+    text: J,
+    noPadding: K,
+    classNameBaseTooltipRoot: M,
+    classNameBaseTooltipContentRoot: O,
+    styleTooltip: Q,
+    triggerTooltipGap: l = 6
+  } = p, [r, S] = C(!1), h = D(null), u = D(null), [g, j] = C(!1);
+  ro(
+    [h, u],
+    () => {
+      I?.(), S(!1);
+    },
+    r
+  );
+  const U = (o) => {
+    f && o.stopPropagation(), !w && (r ? I?.() : F?.(), S((t) => y ? !t : !0));
+  }, [Z, oo] = C({
+    visibility: "hidden",
+    opacity: 0,
+    left: "-9999px"
+  }), [T, z] = C(!1), b = no(() => {
+    if (!h.current || !u.current) return;
+    const o = h.current.getBoundingClientRect(), t = u.current.getBoundingClientRect(), v = (n) => {
+      let e = 0, i = 0;
+      switch (n) {
+        case s.Right:
+          e = o.top + window.scrollY - (t.height - o.height) / 2, i = o.right + window.scrollX + l;
+          break;
+        case s.RightTop:
+          e = o.top + window.scrollY, i = o.right + window.scrollX + l;
+          break;
+        case s.RightBottom:
+          e = o.bottom + window.scrollY - t.height, i = o.right + window.scrollX + l;
+          break;
+        case s.Left:
+          e = o.top + window.scrollY - (t.height - o.height) / 2, i = o.left + window.scrollX - t.width - l;
+          break;
+        case s.LeftTop:
+          e = o.top + window.scrollY, i = o.left + window.scrollX - t.width - l;
+          break;
+        case s.LeftBottom:
+          e = o.bottom + window.scrollY - t.height, i = o.left + window.scrollX - t.width - l;
+          break;
+        case s.Bottom:
+          e = o.bottom + window.scrollY + l, i = o.left + window.scrollX - (t.width - o.width) / 2;
+          break;
+        case s.BottomLeft:
+          e = o.bottom + window.scrollY + l, i = o.left + window.scrollX;
+          break;
+        case s.BottomRight:
+          e = o.bottom + window.scrollY + l, i = o.right + window.scrollX - t.width;
+          break;
+        case s.Top:
+          e = o.top + window.scrollY - t.height - l, i = o.left + window.scrollX - (t.width - o.width) / 2;
+          break;
+        case s.TopLeft:
+          e = o.top + window.scrollY - t.height - l, i = o.left + window.scrollX;
+          break;
+        case s.TopRight:
+          e = o.top + window.scrollY - t.height - l, i = o.right + window.scrollX - t.width;
+          break;
+        default:
+          e = o.bottom + window.scrollY + l, i = o.left + window.scrollX;
+      }
+      return { top: e, left: i };
+    }, H = window.scrollY, V = window.innerHeight + window.scrollY, A = window.scrollX, _ = window.innerWidth + window.scrollX, $ = (n, e) => n >= H && n + t.height <= V && e >= A && e + t.width <= _;
+    let { top: R, left: k } = v(d);
+    if (!E && !$(R, k)) {
+      const n = Object.values(s), e = [
+        d,
+        ...n.filter((a) => a !== d)
+      ];
+      let i = !1;
+      for (const a of e) {
+        const c = v(a);
+        if ($(c.top, c.left)) {
+          R = c.top, k = c.left, i = !0;
+          break;
+        }
+      }
+      if (!i) {
+        let a = d, c = 1 / 0;
+        for (const W of n) {
+          const N = v(W), q = Math.max(0, H - N.top) + Math.max(0, N.top + t.height - V) + Math.max(0, A - N.left) + Math.max(0, N.left + t.width - _);
+          q < c && (c = q, a = W);
+        }
+        const G = v(a);
+        R = G.top, k = G.left;
+      }
+    }
+    oo((n) => ({
+      ...n,
+      top: `${R}px`,
+      left: `${k}px`,
+      visibility: r || T ? "visible" : "hidden",
+      opacity: r || T ? 1 : 0,
+      pointerEvents: r || T ? "all" : "none"
+    }));
+  }, [d, E, l, r, T]);
+  x(() => (j(!0), () => j(!1)), []), x(() => {
+    g && b();
+  }, [g, b]), x(() => {
+    if (!g) return;
+    const o = () => b();
+    return window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
+      window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
+    };
+  }, [g, b]);
+  const to = B({
+    ...M && { [M]: !0 }
+  }), eo = B({
+    ...O && { [O]: !0 }
+  }), io = B({
+    [X.spTooltip]: !0,
+    "tooltip-active": r,
+    ...L && { [L]: !0 }
+  }), lo = document.body;
+  return /* @__PURE__ */ so(
+    "div",
+    {
+      ref: h,
+      className: io,
+      onClick: U,
+      onMouseEnter: () => w && z(!0),
+      onMouseLeave: () => w && z(!1),
+      style: Q,
+      children: [
+        P,
+        m && /* @__PURE__ */ Y(po, { node: lo, children: /* @__PURE__ */ Y(
+          wo,
+          {
+            style: Z,
+            ref: u,
+            noPadding: K,
+            text: J,
+            classNameRoot: to,
+            classNameContentRoot: eo
+          }
+        ) })
+      ]
+    }
+  );
+}, Co = ({
+  hover: p = !0,
+  isVisibleTooltip: w = !0,
+  classNameTriggerIcon: y,
+  ...f
+}) => {
+  const m = f.classNameTooltip, P = B({
+    [X.spInfoTooltip]: !0,
+    [X.spInfoTooltip_hover]: p,
+    [X.spInfoTooltip_clickable]: !p,
+    ...m && { [m]: !0 }
+  });
+  return /* @__PURE__ */ Y(
+    fo,
+    {
+      ...f,
+      classNameTooltip: P,
+      hover: p,
+      isVisibleTooltip: w,
+      trigger: /* @__PURE__ */ Y(co, { name: ao.Info, className: y })
+    }
+  );
+};
+export {
+  Co as InfoTooltip,
+  fo as Tooltip
+};

package/dist/components/Tooltip/Tooltip.module.scss.js

@@ -0,0 +1,13 @@
+import './Tooltip.css';const o = "_spTooltip_15fi5_1", p = "_spInfoTooltip_15fi5_20", l = "_spInfoTooltip_hover_15fi5_23", s = "_spInfoTooltip_clickable_15fi5_26", t = {
+  spTooltip: o,
+  spInfoTooltip: p,
+  spInfoTooltip_hover: l,
+  spInfoTooltip_clickable: s
+};
+export {
+  t as default,
+  p as spInfoTooltip,
+  s as spInfoTooltip_clickable,
+  l as spInfoTooltip_hover,
+  o as spTooltip
+};

package/dist/components/Tooltip/index.d.ts

@@ -0,0 +1,3 @@
+export { InfoTooltip, Tooltip } from "./Tooltip";
+export type { InfoTooltipProps, TooltipProps } from "./types";
+export { ETooltipPosition } from "./types";

package/dist/components/Tooltip/types/index.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { BaseTooltipProps } from "../../BaseTooltip";
+export declare enum ETooltipPosition {
+    Top = "top",
+    TopLeft = "top-left",
+    TopRight = "top-right",
+    Bottom = "bottom",
+    BottomLeft = "bottom-left",
+    BottomRight = "bottom-right",
+    Left = "left",
+    LeftTop = "left-top",
+    LeftBottom = "left-bottom",
+    Right = "right",
+    RightTop = "right-top",
+    RightBottom = "right-bottom"
+}
+export interface TooltipProps extends Omit<BaseTooltipProps, "classNameRoot" | "classNameContentRoot"> {
+    hover?: boolean;
+    isToggleClick?: boolean;
+    isVisibleTooltip?: boolean;
+    position?: ETooltipPosition;
+    /** When true, disables position recalculation — only the passed `position` is used. */
+    lockPosition?: boolean;
+    trigger?: React.ReactNode;
+    triggerAction?: () => void;
+    actionOnClose?: () => void;
+    classNameTooltip?: string;
+    classNameBaseTooltipRoot?: string;
+    classNameBaseTooltipContentRoot?: string;
+    isStopPropagationClickOnTrigger?: boolean;
+    styleTooltip?: React.CSSProperties;
+    triggerTooltipGap?: number;
+}
+export type InfoTooltipProps = Omit<TooltipProps, "trigger"> & {
+    classNameTriggerIcon?: string;
+};

package/dist/components/Tooltip/types/index.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((t) => (t.Top = "top", t.TopLeft = "top-left", t.TopRight = "top-right", t.Bottom = "bottom", t.BottomLeft = "bottom-left", t.BottomRight = "bottom-right", t.Left = "left", t.LeftTop = "left-top", t.LeftBottom = "left-bottom", t.Right = "right", t.RightTop = "right-top", t.RightBottom = "right-bottom", t))(e || {});
+export {
+  e as ETooltipPosition
+};

package/dist/components/UploadFiles/UploadFiles.css

@@ -0,0 +1 @@
+._spUploadFiles_kgii7_1{display:inline-flex;position:relative;flex-direction:column;width:100%;min-width:280px;height:100%}._spUploadFiles_kgii7_1{opacity:1;visibility:visible}._spUploadFiles_kgii7_1{transition:all .3s ease-in-out}@starting-style{._spUploadFiles_kgii7_1{opacity:0;visibility:hidden}}._spUploadFiles_error_kgii7_22 ._spUploadFiles__control_kgii7_22{border-color:var(--spui-color-border-error);color:var(--spui-color-icon-error)}._spUploadFiles__tooltipRoot_kgii7_26{width:100%}._spUploadFiles__fileNameContainer_kgii7_29{width:100%;text-align:start}._spUploadFiles__fileName_dragError_kgii7_33{color:var(--spui-color-text-error)}._spUploadFiles__startIcon_error_kgii7_36{color:var(--spui-color-icon-error)}._spUploadFiles__placeholderContainer_kgii7_39{width:100%}._spUploadFiles--variant-input_kgii7_42 ._spUploadFiles__fileNameContainer_kgii7_29{max-width:calc(100% - 68px)}._spUploadFiles--variant-input_kgii7_42 ._spUploadFiles__placeholderContainer_kgii7_39{text-align:start;max-width:calc(100% - 36px)}._spUploadFiles--variant-input_kgii7_42 ._spUploadFiles__placeholderContainer_withUloadTooltip_kgii7_49{max-width:calc(100% - 72px)}._spUploadFiles--variant-input_kgii7_42 ._spUploadFiles__control_kgii7_22{padding:12px 16px;height:fit-content}._spUploadFiles--variant-input_kgii7_42 ._spUploadFiles__placeholder_kgii7_39{font-size:16px}@media only screen and (min-width:768px){._spUploadFiles--variant-input_kgii7_42 ._spUploadFiles__placeholder_kgii7_39{font-size:18px}}._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__fileNameContainer_kgii7_29{max-width:calc(100% - 32px)}._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__placeholderContainer_kgii7_39{text-align:center}._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__control_kgii7_22{justify-content:center;height:100%;padding:var(--spui-spacing-6x) var(--spui-spacing-12x);min-height:190px}@media only screen and (min-width:768px){._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__control_kgii7_22{padding:32px 84px}}._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__control_loading_kgii7_81{background-image:linear-gradient(90deg,var(--spui-color-gray-100) 0%,var(--spui-color-surface-default) 50%,var(--spui-color-gray-100) 100%);background-size:200% 100%;animation:_shimmer_kgii7_1 2s infinite ease-in-out}._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__placeholder_kgii7_39{font-family:var(--spui-font-family-title),serif;font-weight:var(--spui-font-weight-medium);font-size:20px}@media only screen and (min-width:768px){._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__placeholder_kgii7_39{font-size:24px}}._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__fileName_kgii7_29{text-align:center;font-family:var(--spui-font-family-title),serif;font-weight:var(--spui-font-weight-medium);font-size:20px}@media only screen and (min-width:768px){._spUploadFiles--variant-dropzone_kgii7_64 ._spUploadFiles__fileName_kgii7_29{font-size:24px}}._spUploadFiles__control_kgii7_22{width:100%;position:relative;min-height:44px;display:flex;align-items:center;color:var(--spui-color-icon-disabled);background-color:var(--spui-color-surface-default);border:var(--spui-border-width-sm) dashed var(--color-gray);gap:var(--spui-spacing-3x);cursor:pointer}._spUploadFiles__control_kgii7_22{transition:all .2s ease-in-out}@media only screen and (min-width:768px){._spUploadFiles__control_kgii7_22{padding:16px;min-height:56px}}._spUploadFiles_kgii7_1:not(._spUploadFiles_fileUploaded_kgii7_128,._spUploadFiles_disabled_kgii7_128) ._spUploadFiles__control_kgii7_22:hover{border-color:var(--color-light-blue)}._spUploadFiles_disabled_kgii7_128 ._spUploadFiles__control_kgii7_22{cursor:default;pointer-events:none}._spUploadFiles_fileUploaded_kgii7_128 ._spUploadFiles__control_kgii7_22{cursor:default;color:var(--spui-color-icon-primary)}._spUploadFiles__fileNamesList_kgii7_139{margin:var(--spui-spacing-none);padding:var(--spui-spacing-none);list-style:none;display:flex;flex-wrap:wrap;gap:var(--spui-spacing-6x);width:100%;min-width:240px;container:file-list-container/inline-size}._spUploadFiles__fileNamesList_loading_kgii7_150{opacity:.7;pointer-events:none;cursor:not-allowed}._spUploadFiles__fileNamesList_kgii7_139 ._spUploadFiles__fileNamesListItem_kgii7_155{width:100%}._spUploadFiles__fileNamesList_kgii7_139 ._spUploadFiles__fileNamesListItem_kgii7_155{opacity:1;visibility:visible}._spUploadFiles__fileNamesList_kgii7_139 ._spUploadFiles__fileNamesListItem_kgii7_155{transition:all .3s ease-in-out}@starting-style{._spUploadFiles__fileNamesList_kgii7_139 ._spUploadFiles__fileNamesListItem_kgii7_155{opacity:0;visibility:hidden}}@container file-list-container (min-width: 364px){._spUploadFiles__fileNamesList_kgii7_139 ._spUploadFiles__fileNamesListItem_kgii7_155{width:calc((100cqw - 24px)/2)}}@container file-list-container (min-width: 558px){._spUploadFiles__fileNamesList_kgii7_139 ._spUploadFiles__fileNamesListItem_kgii7_155{width:calc((100cqw - 48px) / 3)}}@container file-list-container (min-width: 752px){._spUploadFiles__fileNamesList_kgii7_139 ._spUploadFiles__fileNamesListItem_kgii7_155{width:calc((100cqw - 72px)/4)}}._spUploadFiles__fileNamesListItem_kgii7_155{position:relative;gap:var(--spui-spacing-2x);display:flex;align-items:flex-start;padding:var(--spui-spacing-4x);background-color:var(--spui-color-surface-page)}._spUploadFiles__fileNamesListItem__iconContainer_kgii7_194{display:flex;color:var(--spui-color-icon-action);flex-shrink:0}._spUploadFiles__fileNamesListItem__iconContainer_kgii7_194 .stpr-icon{height:var(--spui-icon-size-xl);width:var(--spui-icon-size-xl)}._spUploadFiles__fileNamesListItem__iconContainer_error_kgii7_203{color:var(--spui-color-icon-error)}._spUploadFiles__fileNamesListItem__iconContainer_error_kgii7_203 .stpr-icon{height:var(--spui-icon-size-lg);width:var(--spui-icon-size-lg)}._spUploadFiles__fileNamesListItem__mainContent_kgii7_210{width:100%;display:flex;flex-direction:column;gap:var(--spui-spacing-1x);overflow:hidden}._spUploadFiles__fileNamesListItem__fileNameWrapper_kgii7_217{max-width:90%;overflow:hidden}._spUploadFiles__fileNamesListItem__fileName_kgii7_217{font-size:14px}._spUploadFiles__fileNamesListItem__fileNameTooltip_kgii7_224{padding:var(--spui-spacing-2x)!important}._spUploadFiles__fileNamesListItem__description_kgii7_227{font-size:12px;line-height:1;color:var(--color-gray-chicago)}._spUploadFiles__fileNamesListItem__description__tooltipContent_kgii7_232{padding:var(--spui-spacing-2x)!important}._spUploadFiles__fileNamesListItem__description_error_kgii7_235{color:var(--spui-color-text-error)}._spUploadFiles__fileNamesListItemDelete_kgii7_238{display:flex;align-items:center;justify-content:center;cursor:pointer;position:absolute;right:-10px;top:-10px;color:var(--spui-color-text-primary);background-color:var(--spui-color-gray-300);padding:6px;width:fit-content;border-radius:100%;opacity:.5}._spUploadFiles__fileNamesListItemDelete_kgii7_238{transition:all .2s ease-in-out}._spUploadFiles__fileNamesListItemDelete_error_kgii7_256{color:var(--spui-color-text-primary)}._spUploadFiles__fileNamesListItemDelete_kgii7_238 .stpr-icon{width:var(--spui-icon-size-xs);height:var(--spui-icon-size-xs)}._spUploadFiles__fileNamesListItemDelete_kgii7_238:hover{opacity:1}._spUploadFiles__infoTooltip_kgii7_266{margin-left:auto}._spUploadFiles__delete_kgii7_269{display:flex;cursor:pointer}._spUploadFiles__delete_loading_kgii7_273{opacity:.7;pointer-events:none;cursor:not-allowed}._spUploadFiles__delete_kgii7_269 .stpr-icon{width:var(--spui-icon-size-sm);height:var(--spui-icon-size-sm)}._spUploadFiles__error_kgii7_282{padding-top:var(--spui-spacing-2x);font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:12px;color:var(--spui-color-text-error)}@media only screen and (min-width:768px){._spUploadFiles__error_kgii7_282{font-size:14px}}@keyframes _shimmer_kgii7_1{0%{background-position:200% 0}to{background-position:-200% 0}}

package/dist/components/UploadFiles/UploadFiles.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IUploadFilesProps } from "./types";
+export declare const UploadFiles: React.FC<IUploadFilesProps>;