@sberbusiness/triplex-next 0.33.0 → 0.35.0

package/components/List/components/ListItemControlsButtonDropdown.js

@@ -1,110 +1,131 @@
-import { jsx as t, jsxs as W, Fragment as P } from "react/jsx-runtime";
-import E, { useRef as l, useState as O, createElement as w } from "react";
-import { u as _, c as g } from "../../../chunks/vendor-z35N2Tap.js";
-import { ETextSize as K } from "../../Typography/enums.js";
-import { Text as T } from "../../Typography/Text.js";
-import { ButtonDropdownExtended as D } from "../../Button/ButtonDropdownExtended.js";
-import { isKey as i } from "../../../utils/keyboard.js";
-import { DropdownListContext as j } from "../../Dropdown/DropdownListContext.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useRef, useState, createElement } from "react";
+import { u as uniqueId, c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { ETextSize } from "../../Typography/enums.js";
+import { Text } from "../../Typography/Text.js";
+import { ButtonDropdownExtended } from "../../Button/ButtonDropdownExtended.js";
+import { isKey } from "../../../utils/keyboard.js";
+import { DropdownListContext } from "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
-import { DropdownMobileBody as z } from "../../Dropdown/mobile/DropdownMobileBody.js";
-import { DropdownMobileClose as F } from "../../Dropdown/mobile/DropdownMobileClose.js";
+import { DropdownMobileBody } from "../../Dropdown/mobile/DropdownMobileBody.js";
+import { DropdownMobileClose } from "../../Dropdown/mobile/DropdownMobileClose.js";
 import "../../Dropdown/mobile/DropdownMobileFooter.js";
-import { DropdownMobileHeader as U } from "../../Dropdown/mobile/DropdownMobileHeader.js";
+import { DropdownMobileHeader } from "../../Dropdown/mobile/DropdownMobileHeader.js";
 import "../../Dropdown/mobile/DropdownMobileInner.js";
 import "../../Dropdown/mobile/DropdownMobileInput.js";
-import { DropdownMobileList as q } from "../../Dropdown/mobile/DropdownMobileList.js";
-import { DropdownMobileListItem as H } from "../../Dropdown/mobile/DropdownMobileListItem.js";
+import { DropdownMobileList } from "../../Dropdown/mobile/DropdownMobileList.js";
+import { DropdownMobileListItem } from "../../Dropdown/mobile/DropdownMobileListItem.js";
 import "../../Loader/LoaderSmall/LoaderSmall.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
-import { DropdownList as R } from "../../Dropdown/desktop/DropdownList.js";
-import { s as b, L as V } from "../../../chunks/ListItemControlsButton-BsJp3m-o.js";
-import { setForwardedRef as G } from "../utils.js";
-const J = E.forwardRef(
-  (h, C) => {
-    const { buttonAttributes: x, children: a, className: y, icon: B, options: d, selected: n, disabled: I, ...L } = h, c = l(null), f = l(null), [u, N] = O(), p = l(_()), A = ({ opened: e, setOpened: o }) => /* @__PURE__ */ t(
-      V,
-      {
-        onKeyDown: k({ opened: e, setOpened: o }),
-        onClick: S({ opened: e, setOpened: o }),
-        disabled: I,
-        "aria-haspopup": "menu",
-        "aria-expanded": e,
-        "aria-controls": p.current,
-        "aria-activedescendant": u,
-        icon: B,
-        ...x,
-        ref: M,
-        children: a
+import { DropdownList } from "../../Dropdown/desktop/DropdownList.js";
+import { s as styles, L as ListItemControlsButton } from "../../../chunks/ListItemControlsButton-DycVDKHG.js";
+import { setForwardedRef } from "../utils.js";
+const ListItemControlsButtonDropdown = React.forwardRef(
+  (props, ref) => {
+    const { buttonAttributes, children, className, icon, options, selected, disabled, ...rest } = props;
+    const buttonRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const [activeDescendant, setActiveDescendant] = useState();
+    const instanceId = useRef(uniqueId());
+    const renderButton = ({ opened, setOpened }) => {
+      return /* @__PURE__ */ jsx(
+        ListItemControlsButton,
+        {
+          onKeyDown: handleKeyDown({ opened, setOpened }),
+          onClick: handleClick({ opened, setOpened }),
+          disabled,
+          "aria-haspopup": "menu",
+          "aria-expanded": opened,
+          "aria-controls": instanceId.current,
+          "aria-activedescendant": activeDescendant,
+          icon,
+          ...buttonAttributes,
+          ref: setRef,
+          children
+        }
+      );
+    };
+    const handleClick = ({ opened, setOpened }) => () => setOpened(!opened);
+    const handleKeyDown = ({ opened, setOpened }) => (event) => {
+      const { key } = event;
+      if (isKey(key, "SPACE") || isKey(key, "ARROW_UP") || isKey(key, "ARROW_DOWN")) {
+        event.preventDefault();
       }
-    ), S = ({ opened: e, setOpened: o }) => () => o(!e), k = ({ opened: e, setOpened: o }) => (m) => {
-      const { key: r } = m;
-      (i(r, "SPACE") || i(r, "ARROW_UP") || i(r, "ARROW_DOWN")) && m.preventDefault(), !e && (i(r, "ARROW_UP") || i(r, "ARROW_DOWN")) && o(!0);
-    }, v = ({ opened: e, setOpened: o, className: m }) => /* @__PURE__ */ t(j.Provider, { value: { activeDescendant: u, setActiveDescendant: N }, children: /* @__PURE__ */ t(
-      D.Dropdown,
-      {
-        className: m,
-        opened: e,
-        setOpened: o,
-        targetRef: c,
-        ref: f,
-        mobileViewProps: {
-          children: /* @__PURE__ */ W(P, { children: [
-            /* @__PURE__ */ t(
-              U,
-              {
-                controlButtons: /* @__PURE__ */ t(F, { onClick: () => o(!1) }),
-                children: /* @__PURE__ */ t(T, { tag: "div", size: K.B1, children: a })
-              }
-            ),
-            /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(q, { children: d.map((r) => /* @__PURE__ */ w(
-              H,
-              {
-                ...r,
-                key: r.id,
-                selected: r.id === (n == null ? void 0 : n.id),
-                onSelect: () => {
-                  var s;
-                  (s = r.onSelect) == null || s.call(r), o(!1);
+      if (!opened && (isKey(key, "ARROW_UP") || isKey(key, "ARROW_DOWN"))) {
+        setOpened(true);
+      }
+    };
+    const renderDropdown = ({ opened, setOpened, className: className2 }) => {
+      return /* @__PURE__ */ jsx(DropdownListContext.Provider, { value: { activeDescendant, setActiveDescendant }, children: /* @__PURE__ */ jsx(
+        ButtonDropdownExtended.Dropdown,
+        {
+          className: className2,
+          opened,
+          setOpened,
+          targetRef: buttonRef,
+          ref: dropdownRef,
+          mobileViewProps: {
+            children: /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                DropdownMobileHeader,
+                {
+                  controlButtons: /* @__PURE__ */ jsx(DropdownMobileClose, { onClick: () => setOpened(false) }),
+                  children: /* @__PURE__ */ jsx(Text, { tag: "div", size: ETextSize.B1, children })
                 }
-              },
-              r.label
-            )) }) })
-          ] })
-        },
-        children: /* @__PURE__ */ t(R, { dropdownOpened: e, id: p.current, children: d.map((r) => /* @__PURE__ */ w(
-          R.Item,
-          {
-            ...r,
-            className: b.buttonDropdownMenuItem,
-            key: r.id,
-            selected: r.id === (n == null ? void 0 : n.id),
-            onSelect: () => {
-              var s;
-              (s = r.onSelect) == null || s.call(r), o(!1);
-            }
+              ),
+              /* @__PURE__ */ jsx(DropdownMobileBody, { children: /* @__PURE__ */ jsx(DropdownMobileList, { children: options.map((option) => /* @__PURE__ */ createElement(
+                DropdownMobileListItem,
+                {
+                  ...option,
+                  key: option.id,
+                  selected: option.id === (selected == null ? void 0 : selected.id),
+                  onSelect: () => {
+                    var _a;
+                    (_a = option.onSelect) == null ? void 0 : _a.call(option);
+                    setOpened(false);
+                  }
+                },
+                option.label
+              )) }) })
+            ] })
           },
-          r.label
-        )) })
-      }
-    ) }), M = (e) => {
-      c.current = e, G(C, e);
+          children: /* @__PURE__ */ jsx(DropdownList, { dropdownOpened: opened, id: instanceId.current, children: options.map((option) => /* @__PURE__ */ createElement(
+            DropdownList.Item,
+            {
+              ...option,
+              className: styles.buttonDropdownMenuItem,
+              key: option.id,
+              selected: option.id === (selected == null ? void 0 : selected.id),
+              onSelect: () => {
+                var _a;
+                (_a = option.onSelect) == null ? void 0 : _a.call(option);
+                setOpened(false);
+              }
+            },
+            option.label
+          )) })
+        }
+      ) });
+    };
+    const setRef = (instance) => {
+      buttonRef.current = instance;
+      setForwardedRef(ref, instance);
     };
-    return /* @__PURE__ */ t(
-      D,
+    return /* @__PURE__ */ jsx(
+      ButtonDropdownExtended,
       {
-        className: g(b.listItemControlsButtonDropdown, y),
-        renderButton: A,
-        renderDropdown: v,
-        dropdownRef: f,
-        closeOnTab: !0,
-        ...L
+        className: clsx(styles.listItemControlsButtonDropdown, className),
+        renderButton,
+        renderDropdown,
+        dropdownRef,
+        closeOnTab: true,
+        ...rest
       }
     );
   }
 );
-J.displayName = "ListItemControlsButtonDropdown";
+ListItemControlsButtonDropdown.displayName = "ListItemControlsButtonDropdown";
 export {
-  J as ListItemControlsButtonDropdown
+  ListItemControlsButtonDropdown
 };
 //# sourceMappingURL=ListItemControlsButtonDropdown.js.map

package/components/List/components/ListItemControlsButtonDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemControlsButtonDropdown.js","sources":["../../../../src/components/List/components/ListItemControlsButtonDropdown.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport clsx from \"clsx\";\nimport { ETextSize } from \"@sberbusiness/triplex-next/components/Typography/enums\";\nimport { Text } from \"@sberbusiness/triplex-next/components/Typography/Text\";\nimport { uniqueId } from \"lodash-es\";\nimport {\n    ButtonDropdownExtended,\n    IButtonDropdownExtendedButtonProvideProps,\n    IButtonDropdownExtendedDropdownProvideProps,\n} from \"@sberbusiness/triplex-next/components/Button/ButtonDropdownExtended\";\nimport { isKey } from \"@sberbusiness/triplex-next/utils/keyboard\";\nimport { DropdownListContext } from \"@sberbusiness/triplex-next/components/Dropdown/DropdownListContext\";\nimport {\n    DropdownMobileBody,\n    DropdownMobileClose,\n    DropdownMobileHeader,\n    DropdownMobileList,\n    DropdownMobileListItem,\n} from \"@sberbusiness/triplex-next/components/Dropdown/mobile\";\nimport { DropdownList } from \"@sberbusiness/triplex-next/components/Dropdown/desktop/DropdownList\";\nimport { IButtonDropdownProps } from \"@sberbusiness/triplex-next/components/Button/ButtonDropdown\";\nimport {\n    IListItemControlsButtonProps,\n    ListItemControlsButton,\n} from \"@sberbusiness/triplex-next/components/List/components/ListItemControlsButton\";\nimport { setForwardedRef } from \"@sberbusiness/triplex-next/components/List/utils\";\nimport styles from \"../styles/ListItemControlsButton.module.less\";\n\nexport interface IListItemControlsButtonDropdownProps\n    extends Omit<IButtonDropdownProps, \"size\">, Pick<IListItemControlsButtonProps, \"icon\"> {}\n\n/** Кнопка-дропдаун listItem для области под свайпом. */\nexport const ListItemControlsButtonDropdown = React.forwardRef<HTMLButtonElement, IListItemControlsButtonDropdownProps>(\n    (props, ref) => {\n        const { buttonAttributes, children, className, icon, options, selected, disabled, ...rest } = props;\n        const buttonRef = useRef<HTMLButtonElement | null>(null);\n        const dropdownRef = useRef<HTMLDivElement>(null);\n        const [activeDescendant, setActiveDescendant] = useState<string>();\n        const instanceId = useRef(uniqueId());\n\n        const renderButton = ({ opened, setOpened }: IButtonDropdownExtendedButtonProvideProps) => {\n            return (\n                <ListItemControlsButton\n                    onKeyDown={handleKeyDown({ opened, setOpened })}\n                    onClick={handleClick({ opened, setOpened })}\n                    disabled={disabled}\n                    aria-haspopup=\"menu\"\n                    aria-expanded={opened}\n                    aria-controls={instanceId.current}\n                    aria-activedescendant={activeDescendant}\n                    icon={icon}\n                    {...buttonAttributes}\n                    ref={setRef}\n                >\n                    {children}\n                </ListItemControlsButton>\n            );\n        };\n\n        const handleClick =\n            ({ opened, setOpened }: IButtonDropdownExtendedButtonProvideProps) =>\n            () =>\n                setOpened(!opened);\n\n        const handleKeyDown =\n            ({ opened, setOpened }: IButtonDropdownExtendedButtonProvideProps) =>\n            (event: React.KeyboardEvent<HTMLButtonElement>) => {\n                const { key } = event;\n\n                if (isKey(key, \"SPACE\") || isKey(key, \"ARROW_UP\") || isKey(key, \"ARROW_DOWN\")) {\n                    event.preventDefault();\n                }\n                if (!opened && (isKey(key, \"ARROW_UP\") || isKey(key, \"ARROW_DOWN\"))) {\n                    setOpened(true);\n                }\n            };\n\n        const renderDropdown = ({ opened, setOpened, className }: IButtonDropdownExtendedDropdownProvideProps) => {\n            return (\n                <DropdownListContext.Provider value={{ activeDescendant, setActiveDescendant }}>\n                    <ButtonDropdownExtended.Dropdown\n                        className={className}\n                        opened={opened}\n                        setOpened={setOpened}\n                        targetRef={buttonRef}\n                        ref={dropdownRef}\n                        mobileViewProps={{\n                            children: (\n                                <>\n                                    <DropdownMobileHeader\n                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}\n                                    >\n                                        <Text tag=\"div\" size={ETextSize.B1}>\n                                            {children}\n                                        </Text>\n                                    </DropdownMobileHeader>\n                                    <DropdownMobileBody>\n                                        <DropdownMobileList>\n                                            {options.map((option) => (\n                                                <DropdownMobileListItem\n                                                    {...option}\n                                                    key={option.id}\n                                                    selected={option.id === selected?.id}\n                                                    onSelect={() => {\n                                                        option.onSelect?.();\n                                                        setOpened(false);\n                                                    }}\n                                                >\n                                                    {option.label}\n                                                </DropdownMobileListItem>\n                                            ))}\n                                        </DropdownMobileList>\n                                    </DropdownMobileBody>\n                                </>\n                            ),\n                        }}\n                    >\n                        <DropdownList dropdownOpened={opened} id={instanceId.current}>\n                            {options.map((option) => (\n                                <DropdownList.Item\n                                    {...option}\n                                    className={styles.buttonDropdownMenuItem}\n                                    key={option.id}\n                                    selected={option.id === selected?.id}\n                                    onSelect={() => {\n                                        option.onSelect?.();\n                                        setOpened(false);\n                                    }}\n                                >\n                                    {option.label}\n                                </DropdownList.Item>\n                            ))}\n                        </DropdownList>\n                    </ButtonDropdownExtended.Dropdown>\n                </DropdownListContext.Provider>\n            );\n        };\n\n        const setRef = (instance: HTMLButtonElement | null) => {\n            buttonRef.current = instance;\n            setForwardedRef(ref, instance);\n        };\n\n        return (\n            <ButtonDropdownExtended\n                className={clsx(styles.listItemControlsButtonDropdown, className)}\n                renderButton={renderButton}\n                renderDropdown={renderDropdown}\n                dropdownRef={dropdownRef}\n                closeOnTab\n                {...rest}\n            />\n        );\n    },\n);\n\nListItemControlsButtonDropdown.displayName = \"ListItemControlsButtonDropdown\";\n"],"names":["className"],"mappings":"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"}

package/components/List/components/ListItemLoading.js

@@ -1,17 +1,19 @@
-import { jsx as o } from "react/jsx-runtime";
-import e from "react";
-import { c as r } from "../../../chunks/vendor-z35N2Tap.js";
-import { EComponentSize as s } from "../../../enums/EComponentSize.js";
-import { LoaderSmall as a } from "../../Loader/LoaderSmall/LoaderSmall.js";
-import { ELoaderSmallTheme as l } from "../../Loader/LoaderSmall/enum.js";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
+import { LoaderSmall } from "../../Loader/LoaderSmall/LoaderSmall.js";
+import { ELoaderSmallTheme } from "../../Loader/LoaderSmall/enum.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
-const d = "listItemLoading__1fc3e0c1", n = {
-  listItemLoading: d
-}, c = e.forwardRef(
-  ({ className: t, ...m }, i) => /* @__PURE__ */ o("div", { className: r(n.listItemLoading, t), ...m, ref: i, children: /* @__PURE__ */ o(a, { theme: l.BRAND, size: s.MD }) })
+const listItemLoading = "listItemLoading__3e51cc00";
+const styles = {
+  listItemLoading
+};
+const ListItemLoading = React.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsx("div", { className: clsx(styles.listItemLoading, className), ...rest, ref, children: /* @__PURE__ */ jsx(LoaderSmall, { theme: ELoaderSmallTheme.BRAND, size: EComponentSize.MD }) })
 );
-c.displayName = "ListItemLoading";
+ListItemLoading.displayName = "ListItemLoading";
 export {
-  c as ListItemLoading
+  ListItemLoading
 };
 //# sourceMappingURL=ListItemLoading.js.map

package/components/List/components/ListItemLoading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemLoading.js","sources":["../../../../src/components/List/components/ListItemLoading.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/ListItemLoading.module.less\";\nimport { EComponentSize } from \"../../../enums\";\nimport { ELoaderSmallTheme, LoaderSmall } from \"../../Loader\";\n\n/** Свойства компонента ListItemLoading. */\nexport interface IListItemLoadingProps extends React.HTMLAttributes<HTMLDivElement> {\n    children?: never;\n}\n\n/**\n * Спиннер для элемента списка.\n * Используется, как последний элемент при подгрузке новых данных.\n * */\nexport const ListItemLoading = React.forwardRef<HTMLDivElement, IListItemLoadingProps>(\n    ({ className, ...rest }, ref) => (\n        <div className={clsx(styles.listItemLoading, className)} {...rest} ref={ref}>\n            <LoaderSmall theme={ELoaderSmallTheme.BRAND} size={EComponentSize.MD} />\n        </div>\n    ),\n);\n\nListItemLoading.displayName = \"ListItemLoading\";\n"],"names":[],"mappings":";;;;;;;;;;;AAeO,MAAM,kBAAkB,MAAM;AAAA,EACjC,CAAC,EAAE,WAAW,GAAG,KAAA,GAAQ,QACrB,oBAAC,OAAA,EAAI,WAAW,KAAK,OAAO,iBAAiB,SAAS,GAAI,GAAG,MAAM,KAC/D,UAAA,oBAAC,aAAA,EAAY,OAAO,kBAAkB,OAAO,MAAM,eAAe,GAAA,CAAI,EAAA,CAC1E;AAER;AAEA,gBAAgB,cAAc;"}

package/components/List/components/ListItemSelectable.js

@@ -1,40 +1,53 @@
-import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import k, { useContext as x, useEffect as r } from "react";
-import { c as f } from "../../../chunks/vendor-z35N2Tap.js";
-import { Checkbox as _ } from "../../Checkbox/Checkbox.js";
-import { ListItemContext as L } from "./ListItemContext.js";
-const C = "listItemSelectable__06cc8de7", S = "selected__9bd905a3", W = "checkboxWrapper__d7b1baa3", I = "childrenWrapper__9bddfad1", u = "checkboxLabel__f5058bc8", N = "checkboxLabelClickArea__6baa1ae4", e = {
-  listItemSelectable: C,
-  selected: S,
-  checkboxWrapper: W,
-  childrenWrapper: I,
-  checkboxLabel: u,
-  checkboxLabelClickArea: N
-}, A = k.forwardRef(
-  ({ selected: c, children: s, className: o, onSelect: b, disabled: i, ...n }, h) => {
-    const { setSelected: l, setSelectable: t } = x(L), p = (d) => {
-      b(d.target.checked);
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useContext, useEffect } from "react";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { Checkbox } from "../../Checkbox/Checkbox.js";
+import { ListItemContext } from "./ListItemContext.js";
+const listItemSelectable = "listItemSelectable__764d0263";
+const selected = "selected__13cfc11a";
+const checkboxWrapper = "checkboxWrapper__4e792ef7";
+const childrenWrapper = "childrenWrapper__6c08de6b";
+const checkboxLabel = "checkboxLabel__1b37fcb6";
+const checkboxLabelClickArea = "checkboxLabelClickArea__e6419914";
+const styles = {
+  listItemSelectable,
+  selected,
+  checkboxWrapper,
+  childrenWrapper,
+  checkboxLabel,
+  checkboxLabelClickArea
+};
+const ListItemSelectable = React.forwardRef(
+  ({ selected: selected2, children, className, onSelect, disabled, ...rest }, ref) => {
+    const { setSelected, setSelectable } = useContext(ListItemContext);
+    const handleChange = (event) => {
+      onSelect(event.target.checked);
     };
-    return r(() => {
-      l(c);
-    }, [c, l]), r(() => (t(!0), () => {
-      t(!1);
-    }), [t]), /* @__PURE__ */ m(
+    useEffect(() => {
+      setSelected(selected2);
+    }, [selected2, setSelected]);
+    useEffect(() => {
+      setSelectable(true);
+      return () => {
+        setSelectable(false);
+      };
+    }, [setSelectable]);
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: f(e.listItemSelectable, { [e.selected]: c }, o),
-        ...n,
-        ref: h,
+        className: clsx(styles.listItemSelectable, { [styles.selected]: selected2 }, className),
+        ...rest,
+        ref,
         children: [
-          /* @__PURE__ */ a("div", { className: e.childrenWrapper, children: s }),
-          /* @__PURE__ */ a("div", { className: e.checkboxWrapper, children: /* @__PURE__ */ a(
-            _,
+          /* @__PURE__ */ jsx("div", { className: styles.childrenWrapper, children }),
+          /* @__PURE__ */ jsx("div", { className: styles.checkboxWrapper, children: /* @__PURE__ */ jsx(
+            Checkbox,
             {
-              checked: c,
-              onChange: p,
-              labelAttributes: { className: e.checkboxLabel },
-              disabled: i,
-              children: /* @__PURE__ */ a("span", { className: e.checkboxLabelClickArea })
+              checked: selected2,
+              onChange: handleChange,
+              labelAttributes: { className: styles.checkboxLabel },
+              disabled,
+              children: /* @__PURE__ */ jsx("span", { className: styles.checkboxLabelClickArea })
             }
           ) })
         ]
@@ -42,8 +55,8 @@ const C = "listItemSelectable__06cc8de7", S = "selected__9bd905a3", W = "checkbo
     );
   }
 );
-A.displayName = "ListItemSelectable";
+ListItemSelectable.displayName = "ListItemSelectable";
 export {
-  A as ListItemSelectable
+  ListItemSelectable
 };
 //# sourceMappingURL=ListItemSelectable.js.map

package/components/List/components/ListItemSelectable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemSelectable.js","sources":["../../../../src/components/List/components/ListItemSelectable.tsx"],"sourcesContent":["import React, { useContext, useEffect } from \"react\";\nimport clsx from \"clsx\";\nimport { Checkbox } from \"@sberbusiness/triplex-next/components/Checkbox/Checkbox\";\nimport { ListItemContext } from \"@sberbusiness/triplex-next/components/List/components/ListItemContext\";\nimport styles from \"../styles/ListItemSelectable.module.less\";\n\nexport interface IListItemSelectableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n    /** Вызывается при изменении состояния чекбокса. */\n    onSelect: (selected: boolean) => void;\n    /** Флаг состояния «выбран». Управляется снаружи. */\n    selected: boolean;\n    disabled?: boolean;\n}\n\n/** Контейнер с выбором элемента списка. */\nexport const ListItemSelectable = React.forwardRef<HTMLDivElement, IListItemSelectableProps>(\n    ({ selected, children, className, onSelect, disabled, ...rest }, ref) => {\n        const { setSelected, setSelectable } = useContext(ListItemContext);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            onSelect(event.target.checked);\n        };\n\n        useEffect(() => {\n            setSelected(selected);\n        }, [selected, setSelected]);\n\n        useEffect(() => {\n            setSelectable(true);\n            return () => {\n                setSelectable(false);\n            };\n        }, [setSelectable]);\n\n        return (\n            <div\n                className={clsx(styles.listItemSelectable, { [styles.selected]: selected }, className)}\n                {...rest}\n                ref={ref}\n            >\n                <div className={styles.childrenWrapper}>{children}</div>\n                <div className={styles.checkboxWrapper}>\n                    <Checkbox\n                        checked={selected}\n                        onChange={handleChange}\n                        labelAttributes={{ className: styles.checkboxLabel }}\n                        disabled={disabled}\n                    >\n                        <span className={styles.checkboxLabelClickArea} />\n                    </Checkbox>\n                </div>\n            </div>\n        );\n    },\n);\n\nListItemSelectable.displayName = \"ListItemSelectable\";\n"],"names":["selected"],"mappings":";;;;;;;;;;;;;;;;;;;AAeO,MAAM,qBAAqB,MAAM;AAAA,EACpC,CAAC,EAAE,UAAAA,WAAU,UAAU,WAAW,UAAU,UAAU,GAAG,KAAA,GAAQ,QAAQ;AACrE,UAAM,EAAE,aAAa,kBAAkB,WAAW,eAAe;AAEjE,UAAM,eAAe,CAAC,UAA+C;AACjE,eAAS,MAAM,OAAO,OAAO;AAAA,IACjC;AAEA,cAAU,MAAM;AACZ,kBAAYA,SAAQ;AAAA,IACxB,GAAG,CAACA,WAAU,WAAW,CAAC;AAE1B,cAAU,MAAM;AACZ,oBAAc,IAAI;AAClB,aAAO,MAAM;AACT,sBAAc,KAAK;AAAA,MACvB;AAAA,IACJ,GAAG,CAAC,aAAa,CAAC;AAElB,WACI;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,OAAO,oBAAoB,EAAE,CAAC,OAAO,QAAQ,GAAGA,UAAA,GAAY,SAAS;AAAA,QACpF,GAAG;AAAA,QACJ;AAAA,QAEA,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAkB,UAAS;AAAA,UAClD,oBAAC,OAAA,EAAI,WAAW,OAAO,iBACnB,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,SAASA;AAAA,cACT,UAAU;AAAA,cACV,iBAAiB,EAAE,WAAW,OAAO,cAAA;AAAA,cACrC;AAAA,cAEA,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,uBAAA,CAAwB;AAAA,YAAA;AAAA,UAAA,EACpD,CACJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEA,mBAAmB,cAAc;"}

package/components/List/components/ListItemTable.js

@@ -1,35 +1,40 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import d from "react";
-import { SwipeableArea as I } from "../../SwipeableArea/SwipeableArea.js";
-import { ListItem as w } from "./ListItem.js";
-import { ListItemContent as L } from "./ListItemContent.js";
-import { ListItemControls as T } from "./ListItemControls.js";
-import { ListItemSelectable as h } from "./ListItemSelectable.js";
-import { ListItemTailRight as A } from "./ListItemTailRight.js";
-import { c as _ } from "../../../chunks/vendor-z35N2Tap.js";
-const x = "listItemTable__06c8d03b", y = "swipeableArea__6af0383e", C = "content__ec39d27d", t = {
-  listItemTable: x,
-  swipeableArea: y,
-  content: C
-}, N = d.forwardRef(
-  ({ children: a, className: m, controlButtons: i, onClickItem: l, onSelect: r, selected: s, swipeableAreaRef: n, ...c }, p) => {
-    const f = typeof r < "u" && typeof s < "u", o = () => /* @__PURE__ */ e(L, { className: t.content, onClick: l, children: a });
-    return /* @__PURE__ */ e(w, { className: _(t.listItemTable, m), ...c, ref: p, children: /* @__PURE__ */ b(
-      I,
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { SwipeableArea } from "../../SwipeableArea/SwipeableArea.js";
+import { ListItem } from "./ListItem.js";
+import { ListItemContent } from "./ListItemContent.js";
+import { ListItemControls } from "./ListItemControls.js";
+import { ListItemSelectable } from "./ListItemSelectable.js";
+import { ListItemTailRight } from "./ListItemTailRight.js";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+const listItemTable = "listItemTable__fd61c627";
+const swipeableArea = "swipeableArea__74062c5e";
+const content = "content__7a5a5d2f";
+const styles = {
+  listItemTable,
+  swipeableArea,
+  content
+};
+const ListItemTable = React.forwardRef(
+  ({ children, className, controlButtons, onClickItem, onSelect, selected, swipeableAreaRef, ...rest }, ref) => {
+    const selectable = typeof onSelect !== "undefined" && typeof selected !== "undefined";
+    const renderContent = () => /* @__PURE__ */ jsx(ListItemContent, { className: styles.content, onClick: onClickItem, children });
+    return /* @__PURE__ */ jsx(ListItem, { className: clsx(styles.listItemTable, className), ...rest, ref, children: /* @__PURE__ */ jsxs(
+      SwipeableArea,
       {
-        className: t.swipeableArea,
-        ref: n,
-        rightSwipeableArea: i ? /* @__PURE__ */ e(T, { children: i }) : void 0,
+        className: styles.swipeableArea,
+        ref: swipeableAreaRef,
+        rightSwipeableArea: controlButtons ? /* @__PURE__ */ jsx(ListItemControls, { children: controlButtons }) : void 0,
         children: [
-          /* @__PURE__ */ e(A, {}),
-          f ? /* @__PURE__ */ e(h, { selected: s, onSelect: r, children: o() }) : o()
+          /* @__PURE__ */ jsx(ListItemTailRight, {}),
+          selectable ? /* @__PURE__ */ jsx(ListItemSelectable, { selected, onSelect, children: renderContent() }) : renderContent()
         ]
       }
     ) });
   }
 );
-N.displayName = "ListItemTable";
+ListItemTable.displayName = "ListItemTable";
 export {
-  N as ListItemTable
+  ListItemTable
 };
 //# sourceMappingURL=ListItemTable.js.map

package/components/List/components/ListItemTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemTable.js","sources":["../../../../src/components/List/components/ListItemTable.tsx"],"sourcesContent":["import React from \"react\";\nimport { ISwipeableAreaRef, SwipeableArea } from \"@sberbusiness/triplex-next/components/SwipeableArea/SwipeableArea\";\nimport { IListItemProps, ListItem } from \"@sberbusiness/triplex-next/components/List/components/ListItem\";\nimport { ListItemContent } from \"@sberbusiness/triplex-next/components/List/components/ListItemContent\";\nimport { ListItemControls } from \"@sberbusiness/triplex-next/components/List/components/ListItemControls\";\nimport { ListItemSelectable } from \"@sberbusiness/triplex-next/components/List/components/ListItemSelectable\";\nimport { ListItemTailRight } from \"@sberbusiness/triplex-next/components/List/components/ListItemTailRight\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/ListItemTable.module.less\";\n\nexport interface IListItemTableSelectableProps extends Omit<IListItemTableProps, \"selected\" | \"onSelect\"> {\n    /** Обработчик изменения флага selected. */\n    onSelect: (selected: boolean) => void;\n    /** Флаг состояния selected. */\n    selected: boolean;\n}\n\nexport interface IListItemTableProps extends Omit<IListItemProps, \"onSelect\"> {\n    /** Кнопки действий - <ListItemControlsButton ... /> */\n    controlButtons?: React.ReactNode;\n    /** Обработчик клика по контенту элемента списка. Событие onClick передается на контейнер контента. */\n    onClickItem?: (event: React.MouseEvent<HTMLDivElement>) => void;\n    /** Обработчик изменения флага selected. */\n    onSelect?: never;\n    /** Флаг состояния selected. */\n    selected?: never;\n    /** Ref компонента SwipeableArea. */\n    swipeableAreaRef?: React.Ref<ISwipeableAreaRef>;\n}\n\n/** Элемент списка, для отображения табличных данных. */\nexport const ListItemTable = React.forwardRef<HTMLLIElement, IListItemTableProps | IListItemTableSelectableProps>(\n    ({ children, className, controlButtons, onClickItem, onSelect, selected, swipeableAreaRef, ...rest }, ref) => {\n        const selectable = typeof onSelect !== \"undefined\" && typeof selected !== \"undefined\";\n\n        const renderContent = () => (\n            <ListItemContent className={styles.content} onClick={onClickItem}>\n                {children}\n            </ListItemContent>\n        );\n\n        return (\n            <ListItem className={clsx(styles.listItemTable, className)} {...rest} ref={ref}>\n                <SwipeableArea\n                    className={styles.swipeableArea}\n                    ref={swipeableAreaRef}\n                    rightSwipeableArea={\n                        controlButtons ? <ListItemControls>{controlButtons}</ListItemControls> : undefined\n                    }\n                >\n                    <ListItemTailRight />\n\n                    {selectable ? (\n                        <ListItemSelectable selected={selected} onSelect={onSelect}>\n                            {renderContent()}\n                        </ListItemSelectable>\n                    ) : (\n                        renderContent()\n                    )}\n                </SwipeableArea>\n            </ListItem>\n        );\n    },\n);\n\nListItemTable.displayName = \"ListItemTable\";\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA+BO,MAAM,gBAAgB,MAAM;AAAA,EAC/B,CAAC,EAAE,UAAU,WAAW,gBAAgB,aAAa,UAAU,UAAU,kBAAkB,GAAG,KAAA,GAAQ,QAAQ;AAC1G,UAAM,aAAa,OAAO,aAAa,eAAe,OAAO,aAAa;AAE1E,UAAM,gBAAgB,MAClB,oBAAC,iBAAA,EAAgB,WAAW,OAAO,SAAS,SAAS,aAChD,SAAA,CACL;AAGJ,WACI,oBAAC,UAAA,EAAS,WAAW,KAAK,OAAO,eAAe,SAAS,GAAI,GAAG,MAAM,KAClE,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,OAAO;AAAA,QAClB,KAAK;AAAA,QACL,oBACI,iBAAiB,oBAAC,kBAAA,EAAkB,0BAAe,IAAsB;AAAA,QAG7E,UAAA;AAAA,UAAA,oBAAC,mBAAA,EAAkB;AAAA,UAElB,iCACI,oBAAA,EAAmB,UAAoB,UACnC,UAAA,gBAAc,CACnB,IAEA,cAAA;AAAA,QAAc;AAAA,MAAA;AAAA,IAAA,GAG1B;AAAA,EAER;AACJ;AAEA,cAAc,cAAc;"}

package/components/List/components/ListItemTailLeft.js

@@ -1,24 +1,16 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import l from "react";
-import { c as o } from "../../../chunks/vendor-z35N2Tap.js";
-import { s } from "../../../chunks/ListItemTail.module-C_0Ilv6P.js";
-const r = l.forwardRef(
-  ({ className: a, ...e }, i) => /* @__PURE__ */ m(
-    "span",
-    {
-      className: o(s.listItemTail, s.listItemTailLeft, a),
-      ref: i,
-      ...e,
-      children: [
-        /* @__PURE__ */ t("span", { className: s.listItemTailLine }),
-        /* @__PURE__ */ t("span", { className: s.listItemTailTop }),
-        /* @__PURE__ */ t("span", { className: s.listItemTailBottom })
-      ]
-    }
-  )
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/ListItemTail.module-Dgajh671.js";
+const ListItemTailLeft = React.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsxs("span", { className: clsx(styles.listItemTail, styles.listItemTailLeft, className), ref, ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.listItemTailLine }),
+    /* @__PURE__ */ jsx("span", { className: styles.listItemTailTop }),
+    /* @__PURE__ */ jsx("span", { className: styles.listItemTailBottom })
+  ] })
 );
-r.displayName = "ListItemTailLeft";
+ListItemTailLeft.displayName = "ListItemTailLeft";
 export {
-  r as ListItemTailLeft
+  ListItemTailLeft
 };
 //# sourceMappingURL=ListItemTailLeft.js.map

package/components/List/components/ListItemTailLeft.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemTailLeft.js","sources":["../../../../src/components/List/components/ListItemTailLeft.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/ListItemTail.module.less\";\n\nexport interface IListItemTailLeftProps extends React.HTMLAttributes<HTMLSpanElement> {\n    children?: never;\n}\n\n/** Хвост listItem, видимый при свайпе вправо. Размещается внутри компонента SwipeableArea. */\nexport const ListItemTailLeft = React.forwardRef<HTMLSpanElement, IListItemTailLeftProps>(\n    ({ className, ...rest }, ref) => (\n        <span className={clsx(styles.listItemTail, styles.listItemTailLeft, className)} ref={ref} {...rest}>\n            <span className={styles.listItemTailLine} />\n            <span className={styles.listItemTailTop} />\n            <span className={styles.listItemTailBottom} />\n        </span>\n    ),\n);\n\nListItemTailLeft.displayName = \"ListItemTailLeft\";\n"],"names":[],"mappings":";;;;AASO,MAAM,mBAAmB,MAAM;AAAA,EAClC,CAAC,EAAE,WAAW,GAAG,KAAA,GAAQ,QACrB,qBAAC,QAAA,EAAK,WAAW,KAAK,OAAO,cAAc,OAAO,kBAAkB,SAAS,GAAG,KAAW,GAAG,MAC1F,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAA,CAAkB;AAAA,IAC1C,oBAAC,QAAA,EAAK,WAAW,OAAO,gBAAA,CAAiB;AAAA,IACzC,oBAAC,QAAA,EAAK,WAAW,OAAO,mBAAA,CAAoB;AAAA,EAAA,EAAA,CAChD;AAER;AAEA,iBAAiB,cAAc;"}

package/components/List/components/ListItemTailRight.js

@@ -1,16 +1,16 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import e from "react";
-import { c as o } from "../../../chunks/vendor-z35N2Tap.js";
-import { s } from "../../../chunks/ListItemTail.module-C_0Ilv6P.js";
-const r = e.forwardRef(
-  ({ className: a, ...i }, m) => /* @__PURE__ */ l("span", { className: o(s.listItemTail, s.listItemTailRight, a), ref: m, ...i, children: [
-    /* @__PURE__ */ t("span", { className: s.listItemTailLine }),
-    /* @__PURE__ */ t("span", { className: s.listItemTailTop }),
-    /* @__PURE__ */ t("span", { className: s.listItemTailBottom })
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import { c as clsx } from "../../../chunks/vendor-BtZO8a0z.js";
+import { s as styles } from "../../../chunks/ListItemTail.module-Dgajh671.js";
+const ListItemTailRight = React.forwardRef(
+  ({ className, ...rest }, ref) => /* @__PURE__ */ jsxs("span", { className: clsx(styles.listItemTail, styles.listItemTailRight, className), ref, ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.listItemTailLine }),
+    /* @__PURE__ */ jsx("span", { className: styles.listItemTailTop }),
+    /* @__PURE__ */ jsx("span", { className: styles.listItemTailBottom })
   ] })
 );
-r.displayName = "ListItemTailRight";
+ListItemTailRight.displayName = "ListItemTailRight";
 export {
-  r as ListItemTailRight
+  ListItemTailRight
 };
 //# sourceMappingURL=ListItemTailRight.js.map

package/components/List/components/ListItemTailRight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemTailRight.js","sources":["../../../../src/components/List/components/ListItemTailRight.tsx"],"sourcesContent":["import React from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"../styles/ListItemTail.module.less\";\n\nexport interface IListItemTailRightProps extends React.HTMLAttributes<HTMLSpanElement> {\n    children?: never;\n}\n\n/** Хвост listItem, видимый при свайпе влево. Размещается внутри компонента SwipeableArea. */\nexport const ListItemTailRight = React.forwardRef<HTMLSpanElement, IListItemTailRightProps>(\n    ({ className, ...rest }, ref) => (\n        <span className={clsx(styles.listItemTail, styles.listItemTailRight, className)} ref={ref} {...rest}>\n            <span className={styles.listItemTailLine} />\n            <span className={styles.listItemTailTop} />\n            <span className={styles.listItemTailBottom} />\n        </span>\n    ),\n);\n\nListItemTailRight.displayName = \"ListItemTailRight\";\n"],"names":[],"mappings":";;;;AASO,MAAM,oBAAoB,MAAM;AAAA,EACnC,CAAC,EAAE,WAAW,GAAG,KAAA,GAAQ,QACrB,qBAAC,QAAA,EAAK,WAAW,KAAK,OAAO,cAAc,OAAO,mBAAmB,SAAS,GAAG,KAAW,GAAG,MAC3F,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAA,CAAkB;AAAA,IAC1C,oBAAC,QAAA,EAAK,WAAW,OAAO,gBAAA,CAAiB;AAAA,IACzC,oBAAC,QAAA,EAAK,WAAW,OAAO,mBAAA,CAAoB;AAAA,EAAA,EAAA,CAChD;AAER;AAEA,kBAAkB,cAAc;"}