@kommo-crm/crm-react-ui-kit 1.18.0 → 1.19.0

package/dist/components/ContextMenu/hooks/useContextMenu/useContextMenu.js

@@ -1,5 +1,5 @@
 import { useId as Ce, useState as a, useRef as c, useEffect as y } from "react";
-import { a as pe, b as Re } from "../../../../index-DBS3EIVR.mjs";
+import { u as pe, a as Re } from "../../../../index-CitTBapb.mjs";
 import { useFocusChange as Ie } from "../../../../hooks/useFocusChange/useFocusChange.js";
 import { noop as ge } from "../../../../utils/noop/noop.js";
 import { ContextMenuMode as i } from "../../ContextMenu.enums.js";

package/dist/components/ContextMenu/index.js

@@ -1,4 +1,4 @@
-import { C as t } from "../../ContextMenu-DY7dE-m3.mjs";
+import { C as t } from "../../ContextMenu-C5hUJzo_.mjs";
 export {
   t as ContextMenu
 };

package/dist/components/DropdownList/DropdownList.js

@@ -1,7 +1,7 @@
 import { jsx as _ } from "react/jsx-runtime";
 import N, { forwardRef as g } from "react";
 import { c as u } from "../../index-L8X2o7IH.mjs";
-import { c as x } from "../../index-DBS3EIVR.mjs";
+import { c as x } from "../../index-CitTBapb.mjs";
 import { useThemeClassName as C } from "../../hooks/useThemeClassName/useThemeClassName.js";
 import { CustomScrollClassName as w } from "../../stylesheets/utils/BaseClasses/BaseClasses.js";
 import { noop as o } from "../../utils/noop/noop.js";

package/dist/components/FilterTabs/components/ItemRoot/ItemRoot.js

@@ -4,7 +4,7 @@ import { c as d } from "../../../../index-L8X2o7IH.mjs";
 import { useThemeClassName as n } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
 import { useFilterTabsContext as N } from "../../FilterTabs.context.js";
 import { DISPLAY_NAME as t, TabItemRootProvider as b } from "./ItemRoot.context.js";
-import { s as m } from "../../../../ItemRoot.module-fiKLca_h.mjs";
+import { s as m } from "../../../../ItemRoot.module-aMBsZnCj.mjs";
 const u = ({
   children: i,
   theme: r,

package/dist/components/FilterTabs/components/ItemRootReset/ItemRootReset.js

@@ -3,7 +3,7 @@ import { c as d } from "../../../../index-L8X2o7IH.mjs";
 import { useThemeClassName as p } from "../../../../hooks/useThemeClassName/useThemeClassName.js";
 import { useFilterTabsContext as c } from "../../FilterTabs.context.js";
 import { DISPLAY_NAME as t, TabItemRootResetProvider as f } from "./ItemRootReset.context.js";
-import { s } from "../../../../ItemRoot.module-fiKLca_h.mjs";
+import { s } from "../../../../ItemRoot.module-aMBsZnCj.mjs";
 const n = ({
   children: m,
   theme: r,

package/dist/components/Ribbon/Ribbon.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { RibbonProps } from './Ribbon.props';
+export declare const DEFAULT_OFFSET = 86;
+export declare const Ribbon: React.ForwardRefExoticComponent<Omit<RibbonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Ribbon.d.ts.map

package/dist/components/Ribbon/Ribbon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ribbon.d.ts","sourceRoot":"","sources":["../../../src/components/Ribbon/Ribbon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU7C,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC,eAAO,MAAM,MAAM,iGA2DjB,CAAC"}

package/dist/components/Ribbon/Ribbon.js

@@ -0,0 +1,66 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as _ } from "react";
+import { c as o } from "../../index-L8X2o7IH.mjs";
+import { useThemeClassName as w } from "../../hooks/useThemeClassName/useThemeClassName.js";
+import '../../assets/Ribbon.css';const N = "_container_1w362_1", f = "_ribbon_1w362_8", v = "_label_1w362_30", n = {
+  container: N,
+  "ribbon-wrapper": "_ribbon-wrapper_1w362_8",
+  ribbon: f,
+  label: v
+}, y = Math.sqrt(2), u = 86, x = _((b, t) => {
+  const {
+    label: d,
+    className: a,
+    theme: m,
+    offset: e = u,
+    children: s,
+    style: i = {},
+    ...l
+  } = b, h = w(m), c = /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        width: y * e
+      },
+      className: o(n.ribbon, h),
+      children: /* @__PURE__ */ r("span", { className: n.label, children: d })
+    }
+  );
+  return s == null ? /* @__PURE__ */ r(
+    "div",
+    {
+      ref: t,
+      style: { width: e, height: e, ...i },
+      className: o(n["ribbon-wrapper"], a),
+      ...l,
+      children: c
+    }
+  ) : /* @__PURE__ */ p(
+    "div",
+    {
+      ref: t,
+      className: o(n.container, a),
+      style: i,
+      ...l,
+      children: [
+        s,
+        /* @__PURE__ */ r(
+          "div",
+          {
+            style: {
+              width: e,
+              height: e
+            },
+            className: n["ribbon-wrapper"],
+            children: c
+          }
+        )
+      ]
+    }
+  );
+});
+x.displayName = "Ribbon";
+export {
+  u as DEFAULT_OFFSET,
+  x as Ribbon
+};

package/dist/components/Ribbon/Ribbon.props.d.ts

@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+import { RibbonTheme } from './Ribbon.themes';
+type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+export interface RibbonProps extends DivProps {
+    /**
+     * Content to wrap with the ribbon.
+     *
+     * **With children** - Ribbon renders a `position: relative` container
+     * around the children and positions itself inside it. No extra CSS needed
+     * on the parent.
+     *
+     * ```tsx
+     * <Ribbon label="Pro" theme={RibbonPrimaryTheme}>
+     *   <Card>
+     *     {content}
+     *   </Card>
+     * </Ribbon>
+     * ```
+     *
+     * **Without children** - only the ribbon element is rendered. It
+     * has `position: absolute` and is positioned to the top-right corner via
+     * `top` and `right`. Place it inside a parent with non-static position so
+     * it can be anchored correctly.
+     *
+     * ```tsx
+     * <Card style={{ position: 'relative' }}>
+     *   <Ribbon label="Pro" theme={RibbonPrimaryTheme} />
+     *   {content}
+     * </Card>
+     * ```
+     */
+    children?: ReactNode;
+    /**
+     * Ribbon label.
+     */
+    label?: ReactNode;
+    /**
+     * Ribbon tips offset from the top-right corner.
+     */
+    offset?: number;
+    /**
+     * Object with CSS theme properties.
+     */
+    theme: RibbonTheme;
+}
+export {};
+//# sourceMappingURL=Ribbon.props.d.ts.map

package/dist/components/Ribbon/Ribbon.props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Ribbon.props.d.ts","sourceRoot":"","sources":["../../../src/components/Ribbon/Ribbon.props.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,KAAK,QAAQ,GAAG,KAAK,CAAC,iBAAiB,CACrC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EACpC,cAAc,CACf,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,WAAW,CAAC;CACpB"}

package/dist/components/Ribbon/Ribbon.props.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,7 @@
+type RibbonThemeKey = '--crm-ui-kit-ribbon-background-color' | '--crm-ui-kit-ribbon-color' | '--crm-ui-kit-ribbon-height' | '--crm-ui-kit-ribbon-font-size' | '--crm-ui-kit-ribbon-line-height' | '--crm-ui-kit-ribbon-font-weight' | '--crm-ui-kit-ribbon-text-transform';
+export type RibbonTheme = {
+    [K in RibbonThemeKey]: string;
+};
+export declare const RibbonPrimaryTheme: RibbonTheme;
+export {};
+//# sourceMappingURL=Ribbon.themes.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Ribbon.themes.d.ts","sourceRoot":"","sources":["../../../src/components/Ribbon/Ribbon.themes.ts"],"names":[],"mappings":"AAAA,KAAK,cAAc,GACf,sCAAsC,GACtC,2BAA2B,GAC3B,4BAA4B,GAC5B,+BAA+B,GAC/B,iCAAiC,GACjC,iCAAiC,GACjC,oCAAoC,CAAC;AAEzC,MAAM,MAAM,WAAW,GAAG;KACvB,CAAC,IAAI,cAAc,GAAG,MAAM;CAC9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,WAQhC,CAAC"}

package/dist/components/Ribbon/Ribbon.themes.js

@@ -0,0 +1,12 @@
+const i = {
+  "--crm-ui-kit-ribbon-background-color": "var(--crm-ui-kit-color-error)",
+  "--crm-ui-kit-ribbon-color": "var(--crm-ui-kit-color-white)",
+  "--crm-ui-kit-ribbon-height": "19px",
+  "--crm-ui-kit-ribbon-font-size": "10px",
+  "--crm-ui-kit-ribbon-line-height": "14px",
+  "--crm-ui-kit-ribbon-font-weight": "700",
+  "--crm-ui-kit-ribbon-text-transform": "uppercase"
+};
+export {
+  i as RibbonPrimaryTheme
+};

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

@@ -0,0 +1,4 @@
+export { Ribbon } from './Ribbon';
+export { type RibbonTheme, RibbonPrimaryTheme } from './Ribbon.themes';
+export { type RibbonProps } from './Ribbon.props';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Ribbon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,KAAK,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACvE,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/Ribbon/index.js

@@ -0,0 +1,6 @@
+import { Ribbon as b } from "./Ribbon.js";
+import { RibbonPrimaryTheme as m } from "./Ribbon.themes.js";
+export {
+  b as Ribbon,
+  m as RibbonPrimaryTheme
+};

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

@@ -6,7 +6,7 @@ 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 = {
+import '../../../../assets/Item3.css';const T = "_item_mywsb_1", j = "_selected_mywsb_24", E = "_hovered_mywsb_30", s = {
   item: T,
   selected: j,
   hovered: E

package/dist/components/Select/components/List/List.js

@@ -1,23 +1,23 @@
 import { jsx as c } from "react/jsx-runtime";
 import u, { forwardRef as k, useMemo as A, useRef as E, useCallback as m, useEffect as H } from "react";
-import { u as N } from "../../../../index-DBS3EIVR.mjs";
+import { b as N } from "../../../../index-CitTBapb.mjs";
 import { Portal as P } from "../../../Portal/Portal.js";
 import { DropdownList as _ } from "../../../DropdownList/DropdownList.js";
-import { mergeRefs as w } from "../../../../lib/utils.js";
-import { noop as y } from "../../../../utils/noop/noop.js";
-import { useSelectContext as D } from "../../Select.context.js";
-const h = "Select.List", T = (r) => {
+import { mergeRefs as b } from "../../../../lib/utils.js";
+import { noop as w } from "../../../../utils/noop/noop.js";
+import { useSelectContext as y } from "../../Select.context.js";
+const h = "Select.List", D = (r) => {
   const { container: o, children: n } = r;
   return o ? /* @__PURE__ */ c(P, { container: o, children: n }) : n;
-}, b = k((r, o) => {
+}, T = k((r, o) => {
   const { container: n, children: s, theme: C, className: g } = r, {
     isOpened: t,
     onOpen: i,
     onHoveredIndexChange: v,
-    onChange: d = y,
+    onChange: d = w,
     hoveredIndex: x,
     value: f
-  } = D(h), { items: p, itemsMap: I } = A(() => {
+  } = y(h), { items: p, itemsMap: I } = A(() => {
     const e = {};
     return { items: u.Children.toArray(s).map(
       (l, M) => u.isValidElement(l) ? (e[l.props.item.value] = M, { ...l.props.item }) : {}
@@ -45,11 +45,11 @@ const h = "Select.List", T = (r) => {
   return H(() => {
     var e;
     t && ((e = a.current) == null || e.focus());
-  }, [t]), /* @__PURE__ */ c(T, { container: n, children: /* @__PURE__ */ c(
+  }, [t]), /* @__PURE__ */ c(D, { container: n, children: /* @__PURE__ */ c(
     _,
     {
       className: g,
-      ref: w(a, o),
+      ref: b(a, o),
       isOpened: t,
       theme: C,
       onHoveredIndexChange: O,
@@ -60,7 +60,7 @@ const h = "Select.List", T = (r) => {
     }
   ) });
 });
-b.displayName = h;
+T.displayName = h;
 export {
-  b as List
+  T as List
 };