@kommo-crm/crm-react-ui-kit 1.11.0 → 1.13.0

package/dist/assets/ContentBlock.css

@@ -1 +1 @@
-._block_1efq7_1{box-sizing:var(--crm-ui-kit-content-block-box-sizing);padding:var(--crm-ui-kit-content-block-padding);border-radius:var(--crm-ui-kit-content-block-border-radius);box-shadow:var(--crm-ui-kit-content-block-box-shadow);background:var(--crm-ui-kit-content-block-background)}
+._block_13dmy_1{box-sizing:var(--crm-ui-kit-content-block-box-sizing);padding:var(--crm-ui-kit-content-block-padding);border-radius:var(--crm-ui-kit-content-block-border-radius);box-shadow:var(--crm-ui-kit-content-block-box-shadow);background:var(--crm-ui-kit-content-block-background);border:var(--crm-ui-kit-content-block-border)}

package/dist/components/ContentBlock/ContentBlock.js

@@ -1,12 +1,12 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
 import { c as n } from "../../index-L8X2o7IH.mjs";
-import { useThemeClassName as f } from "../../hooks/useThemeClassName/useThemeClassName.js";
-import '../../assets/ContentBlock.css';const i = "_block_1efq7_1", k = {
-  block: i
+import { useThemeClassName as i } from "../../hooks/useThemeClassName/useThemeClassName.js";
+import '../../assets/ContentBlock.css';const f = "_block_13dmy_1", k = {
+  block: f
 }, p = l((o, e) => {
-  const { className: s = "", theme: t, children: c, ...m } = o, r = f(t);
-  return /* @__PURE__ */ a("div", { ref: e, className: n(k.block, r, s), ...m, children: c });
+  const { className: s = "", theme: t, children: m, ...c } = o, r = i(t);
+  return /* @__PURE__ */ a("div", { ref: e, className: n(k.block, r, s), ...c, children: m });
 });
 p.displayName = "ContentBlock";
 export {

package/dist/components/ContentBlock/ContentBlock.themes.d.ts

@@ -1,7 +1,16 @@
 type ContentBlockKey = '--crm-ui-kit-content-block-box-shadow' | '--crm-ui-kit-content-block-background' | '--crm-ui-kit-content-block-box-sizing' | '--crm-ui-kit-content-block-padding' | '--crm-ui-kit-content-block-border-radius';
+type ContentBlockOptionalKey = '--crm-ui-kit-content-block-border';
 export type ContentBlockThemeType = {
     [K in ContentBlockKey]: string;
+} & {
+    [K in ContentBlockOptionalKey]?: string;
 };
+export declare const ContentBlockPrimaryTheme: ContentBlockThemeType;
+/**
+ * @deprecated This theme will be removed in a future major version.
+ * Use {@link ContentBlockPrimaryTheme} instead.
+ */
 export declare const ContentBlockTheme: ContentBlockThemeType;
+export declare const ContentBlockSecondaryTheme: ContentBlockThemeType;
 export {};
 //# sourceMappingURL=ContentBlock.themes.d.ts.map

package/dist/components/ContentBlock/ContentBlock.themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentBlock.themes.d.ts","sourceRoot":"","sources":["../../../src/components/ContentBlock/ContentBlock.themes.ts"],"names":[],"mappings":"AAAA,KAAK,eAAe,GAChB,uCAAuC,GACvC,uCAAuC,GACvC,uCAAuC,GACvC,oCAAoC,GACpC,0CAA0C,CAAC;AAE/C,MAAM,MAAM,qBAAqB,GAAG;KACjC,CAAC,IAAI,eAAe,GAAG,MAAM;CAC/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,qBAS/B,CAAC"}
+{"version":3,"file":"ContentBlock.themes.d.ts","sourceRoot":"","sources":["../../../src/components/ContentBlock/ContentBlock.themes.ts"],"names":[],"mappings":"AAAA,KAAK,eAAe,GAChB,uCAAuC,GACvC,uCAAuC,GACvC,uCAAuC,GACvC,oCAAoC,GACpC,0CAA0C,CAAC;AAE/C,KAAK,uBAAuB,GAAG,mCAAmC,CAAC;AAEnE,MAAM,MAAM,qBAAqB,GAAG;KACjC,CAAC,IAAI,eAAe,GAAG,MAAM;CAC/B,GAAG;KACD,CAAC,IAAI,uBAAuB,CAAC,CAAC,EAAE,MAAM;CACxC,CAAC;AAUF,eAAO,MAAM,wBAAwB,EAAE,qBAKtC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,uBAA2B,CAAC;AAE1D,eAAO,MAAM,0BAA0B,EAAE,qBAMxC,CAAC"}

package/dist/components/ContentBlock/ContentBlock.themes.js

@@ -1,10 +1,19 @@
 const t = {
   "--crm-ui-kit-content-block-box-sizing": "border-box",
-  "--crm-ui-kit-content-block-padding": "18px 18px 29px",
   "--crm-ui-kit-content-block-border-radius": "var(--crm-ui-kit-border-radius-default)",
-  "--crm-ui-kit-content-block-box-shadow": "var(--crm-ui-kit-palette-content-block-box-shadow)",
   "--crm-ui-kit-content-block-background": "var(--crm-ui-kit-palette-background-primary)"
+}, o = {
+  ...t,
+  "--crm-ui-kit-content-block-padding": "18px 18px 29px",
+  "--crm-ui-kit-content-block-box-shadow": "var(--crm-ui-kit-palette-content-block-box-shadow)"
+}, c = o, e = {
+  ...t,
+  "--crm-ui-kit-content-block-padding": "16px",
+  "--crm-ui-kit-content-block-border": "1px solid var(--crm-ui-kit-palette-border-primary)",
+  "--crm-ui-kit-content-block-box-shadow": "none"
 };
 export {
-  t as ContentBlockTheme
+  o as ContentBlockPrimaryTheme,
+  e as ContentBlockSecondaryTheme,
+  c as ContentBlockTheme
 };

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

@@ -1,4 +1,4 @@
 export { ContentBlock } from './ContentBlock';
-export { type ContentBlockThemeType, ContentBlockTheme, } from './ContentBlock.themes';
+export { type ContentBlockThemeType, ContentBlockTheme, ContentBlockPrimaryTheme, ContentBlockSecondaryTheme, } from './ContentBlock.themes';
 export { type ContentBlockProps } from './ContentBlock.props';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ContentBlock/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EACL,KAAK,qBAAqB,EAC1B,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ContentBlock/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EACL,KAAK,qBAAqB,EAC1B,iBAAiB,EACjB,wBAAwB,EACxB,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/components/ContentBlock/index.js

@@ -1,6 +1,8 @@
 import { ContentBlock as t } from "./ContentBlock.js";
-import { ContentBlockTheme as r } from "./ContentBlock.themes.js";
+import { ContentBlockPrimaryTheme as r, ContentBlockSecondaryTheme as m, ContentBlockTheme as c } from "./ContentBlock.themes.js";
 export {
   t as ContentBlock,
-  r as ContentBlockTheme
+  r as ContentBlockPrimaryTheme,
+  m as ContentBlockSecondaryTheme,
+  c as ContentBlockTheme
 };

package/dist/components/Select/Select.types.d.ts

@@ -1,11 +1,35 @@
-export type SelectItem = {
+import { ReactElement } from 'react';
+interface SelectItemBase {
     /**
      * Value of the element.
      */
     value: number | string;
+}
+export type SelectItem = (SelectItemBase & {
     /**
-     * Description of the element.
+     * Visual label shown in the list and in the trigger when the item is selected.
      */
     option: string;
-};
+    /**
+     * Native tooltip text shown on hover.
+     * Defaults to `option` when omitted.
+     */
+    title?: string;
+}) | (SelectItemBase & {
+    /**
+     * Visual label shown in the list and in the trigger when the item is selected.
+     */
+    option: ReactElement;
+    /**
+     * Native tooltip text shown on hover.
+     * Required because `option` is not a string and cannot be used as a fallback.
+     */
+    title: string;
+});
+/**
+ * Resolves the tooltip text for a `SelectItem`. Uses the explicit `title` when
+ * provided, otherwise falls back to `option` if it is a string.
+ */
+export declare const getSelectItemTitle: (item: SelectItem) => string | undefined;
+export {};
 //# sourceMappingURL=Select.types.d.ts.map

package/dist/components/Select/Select.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC"}
+{"version":3,"file":"Select.types.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,UAAU,GAClB,CAAC,cAAc,GAAG;IAChB;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,GACF,CAAC,cAAc,GAAG;IAChB;;OAEG;IACH,MAAM,EAAE,YAAY,CAAC;IACrB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEP;;;GAGG;AACH,eAAO,MAAM,kBAAkB,SAAU,UAAU,KAAG,MAAM,GAAG,SAU9D,CAAC"}

package/dist/components/Select/Select.types.js

@@ -1 +1,9 @@
-
+const e = (t) => {
+  if (t.title)
+    return t.title;
+  if (typeof t.option == "string")
+    return t.option;
+};
+export {
+  e as getSelectItemTitle
+};

package/dist/components/Select/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAgB,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAM9E,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAM5C,eAAO,MAAM,MAAM,6FAiCjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqD,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAgB,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAO9E,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAM5C,eAAO,MAAM,MAAM,6FAyCjB,CAAC"}

package/dist/components/Select/components/Button/Button.js

@@ -1,28 +1,32 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as a, useRef as d, useCallback as g, useEffect as B } from "react";
-import { SelectButton as R } from "../../../SelectButton/SelectButton.js";
-import { mergeRefs as S } from "../../../../lib/utils.js";
-import { useSelectContext as x } from "../../Select.context.js";
-const n = "Select.Button", b = a((s, f) => {
-  const { theme: c, ...l } = s, { isDisabled: m, onOpen: t, isOpened: e, isInvalid: u } = x(n), o = d(null), i = g(() => {
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as g, useRef as S, useCallback as B, useEffect as R } from "react";
+import { SelectButton as v } from "../../../SelectButton/SelectButton.js";
+import { mergeRefs as x } from "../../../../lib/utils.js";
+import { useSelectContext as I } from "../../Select.context.js";
+import { getSelectItemTitle as T } from "../../Select.types.js";
+const s = "Select.Button", b = g((l, c) => {
+  const { theme: f, ...i } = l, { isDisabled: m, onOpen: t, isOpened: e, isInvalid: u, value: o } = I(s), r = S(null), p = B(() => {
     t(!e);
   }, [t]);
-  return B(() => () => {
-    var r;
-    e && ((r = o.current) == null || r.focus());
-  }, [e]), /* @__PURE__ */ p(
-    R,
+  R(() => () => {
+    var n;
+    e && ((n = r.current) == null || n.focus());
+  }, [e]);
+  const a = o ? T(o) : void 0;
+  return /* @__PURE__ */ d(
+    v,
     {
-      ref: S(o, f),
-      onToggle: i,
-      theme: c,
+      ref: x(r, c),
+      onToggle: p,
+      title: a,
+      theme: f,
       isDisabled: m,
       isInvalid: u,
-      ...l
+      ...i
     }
   );
 });
-b.displayName = n;
+b.displayName = s;
 export {
   b as Button
 };

package/dist/components/Select/components/Item/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/Item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAWnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,eAAO,MAAM,IAAI,iFA8Cf,CAAC"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/Item/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAYnE,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,eAAO,MAAM,IAAI,iFA8Df,CAAC"}

package/dist/components/Select/components/Item/Item.js

@@ -1,46 +1,56 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as b, useCallback as w } from "react";
-import { c as y } from "../../../../index-L8X2o7IH.mjs";
-import { useThemeClassName as S } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
-import { noop as k } from "../../../../utils/noop/noop.js";
-import { useSelectContext as g } from "../../Select.context.js";
-import A from "../Option/Option.js";
-import '../../../../assets/Item.css';const D = "_item_mywsb_1", H = "_selected_mywsb_24", j = "_hovered_mywsb_30", t = {
-  item: D,
-  selected: H,
-  hovered: j
-}, c = "Select.Item", E = b((i, l) => {
-  const { item: e, children: s, index: m, className: a, theme: d, ...h } = i, p = S(d), {
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as w, useCallback as y } from "react";
+import { c as g } from "../../../../index-L8X2o7IH.mjs";
+import { useThemeClassName as k } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
+import { noop as A } from "../../../../utils/noop/noop.js";
+import { useSelectContext as D } from "../../Select.context.js";
+import { getSelectItemTitle as H } from "../../Select.types.js";
+import P from "../Option/Option.js";
+import '../../../../assets/Item.css';const T = "_item_mywsb_1", j = "_selected_mywsb_24", E = "_hovered_mywsb_30", s = {
+  item: T,
+  selected: j,
+  hovered: E
+}, c = "Select.Item", L = w((i, l) => {
+  const {
+    item: e,
+    children: t,
+    index: m,
+    className: a,
+    theme: d,
+    title: p,
+    ...h
+  } = i, v = k(d), {
     value: o,
-    onChange: n = k,
-    onHoveredIndexChange: v,
-    hoveredIndex: f
-  } = g(c), { option: _, value: u } = e, C = w(
-    (I) => {
-      I.preventDefault(), v(m), n(e);
+    onChange: r = A,
+    onHoveredIndexChange: f,
+    hoveredIndex: _
+  } = D(c), { option: u, value: C } = e, x = y(
+    (b) => {
+      b.preventDefault(), f(m), r(e);
     },
-    [n, e]
-  ), x = (o == null ? void 0 : o.value) === u, N = f === m;
-  return /* @__PURE__ */ r(
+    [r, e]
+  ), I = (o == null ? void 0 : o.value) === C, N = _ === m, S = p ?? (t ? void 0 : H(e));
+  return /* @__PURE__ */ n(
     "li",
     {
       ...h,
       ref: l,
-      className: y(
-        t.item,
+      title: S,
+      className: g(
+        s.item,
         {
-          [t.selected]: x,
-          [t.hovered]: N
+          [s.selected]: I,
+          [s.hovered]: N
         },
         a,
-        p
+        v
       ),
-      onClick: C,
-      children: s || /* @__PURE__ */ r(A, { children: _ })
+      onClick: x,
+      children: t || /* @__PURE__ */ n(P, { children: u })
     }
   );
 });
-E.displayName = c;
+L.displayName = c;
 export {
-  E as Item
+  L as Item
 };

package/dist/components/Select/components/Option/Option.js

@@ -1,16 +1,16 @@
 import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { c as i } from "../../../../index-L8X2o7IH.mjs";
-import { Text as a } from "../../../Text/Text.js";
+import { forwardRef as a } from "react";
+import { c } from "../../../../index-L8X2o7IH.mjs";
+import { Text as l } from "../../../Text/Text.js";
 import "../../../Text/Text.themes.js";
-import { OptionTextTheme as c } from "./Option.theme.js";
-import '../../../../assets/Option.css';const p = "_text_gk4uj_1", l = {
-  text: p
-}, n = "Select.Value", x = m((e, o) => {
-  const { children: r, className: s } = e;
-  return /* @__PURE__ */ t("span", { className: i(l.text, s), ref: o, children: /* @__PURE__ */ t(a, { theme: c, size: "l", isEllipsis: !0, children: r }) });
+import { OptionTextTheme as p } from "./Option.theme.js";
+import '../../../../assets/Option.css';const n = "_text_gk4uj_1", x = {
+  text: n
+}, f = "Select.Value", d = a((e, o) => {
+  const { children: r, className: s, title: i, ...m } = e;
+  return /* @__PURE__ */ t("span", { ...m, className: c(x.text, s), ref: o, title: i, children: /* @__PURE__ */ t(l, { theme: p, size: "l", isEllipsis: !0, children: r }) });
 });
-x.displayName = n;
+d.displayName = f;
 export {
-  x as default
+  d as default
 };

package/dist/components/Select/components/Option/Option.props.d.ts

@@ -4,5 +4,9 @@ export interface OptionProps extends HTMLAttributes<HTMLSpanElement> {
      * Text of the option.
      */
     children: ReactNode;
+    /**
+     * Native tooltip text shown on hover.
+     */
+    title?: string;
 }
 //# sourceMappingURL=Option.props.d.ts.map

package/dist/components/Select/components/Option/Option.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Option.props.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/Option/Option.props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB"}
+{"version":3,"file":"Option.props.d.ts","sourceRoot":"","sources":["../../../../../src/components/Select/components/Option/Option.props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,WAAY,SAAQ,cAAc,CAAC,eAAe,CAAC;IAClE;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kommo-crm/crm-react-ui-kit",
   "description": "Ready-to-use React components which implements Kommo design",
-  "version": "1.11.0",
+  "version": "1.13.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "engines": {