@sberbusiness/triplex-next 1.34.0 → 1.35.1

package/components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js

@@ -1,92 +1,96 @@
-import { jsx as o, jsxs as M, Fragment as S } from "react/jsx-runtime";
-import { createElement as f } from "react";
-import { SelectExtendedField as d } from "../SelectExtendedField.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { createElement } from "react";
+import { SelectExtendedField } from "../SelectExtendedField.js";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-Db1_Qf-T.js";
+import "../../../chunks/DropdownListItem-CboBGsbx.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
-import { DropdownMobileBody as E } from "../../Dropdown/mobile/DropdownMobileBody.js";
-import { DropdownMobileClose as k } 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 y } 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 B } from "../../Dropdown/mobile/DropdownMobileList.js";
-import { DropdownMobileListItem as F } 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 "../../Dropdown/Dropdown.js";
-import { ETextSize as L } from "../../Typography/enums.js";
+import { ETextSize } from "../../Typography/enums.js";
 import "../../Typography/Caption.js";
 import "../../Typography/CodeText.js";
-import { Text as j } from "../../Typography/Text.js";
+import { Text } from "../../Typography/Text.js";
 import "../../Typography/Title.js";
-const u = ({
-  dropdownRef: w,
-  dropdownListItemClassName: p,
-  width: D,
-  loading: b,
-  listId: h,
-  mobileTitle: x,
-  onChange: l,
-  opened: c,
-  size: n,
-  options: s,
-  setOpened: e,
-  targetRef: a,
-  value: i
-}) => /* @__PURE__ */ o(
-  d.Dropdown,
-  {
-    opened: c && !b,
-    forwardedRef: w,
-    width: D,
-    setOpened: e,
-    targetRef: a,
-    size: n,
-    mobileViewProps: {
-      children: /* @__PURE__ */ M(S, { children: [
-        /* @__PURE__ */ o(y, { controlButtons: /* @__PURE__ */ o(k, { onClick: () => e(!1) }), children: /* @__PURE__ */ o(j, { tag: "div", size: L.B3, children: x }) }),
-        /* @__PURE__ */ o(E, { children: /* @__PURE__ */ o(B, { children: s.map((r) => {
-          const { label: t, ...m } = r;
-          return /* @__PURE__ */ f(
-            F,
-            {
-              ...m,
-              className: p,
-              id: r.id,
-              key: r.id,
-              selected: r.id === (i == null ? void 0 : i.id),
-              onSelect: () => {
-                l(r), e(!1);
-              }
-            },
-            t
-          );
-        }) }) })
-      ] })
-    },
-    children: /* @__PURE__ */ o(d.Dropdown.List, { id: h, dropdownOpened: c, size: n, children: s.map((r) => {
-      const { label: t, ...m } = r;
-      return /* @__PURE__ */ f(
-        d.Dropdown.List.Item,
-        {
-          ...m,
-          className: p,
-          id: r.id,
-          key: r.id,
-          selected: r.id === (i == null ? void 0 : i.id),
-          onSelect: () => {
-            l(r), e(!1);
-          }
-        },
-        t
-      );
-    }) })
-  }
-);
+const SelectExtendedFieldDropdownDefault = ({
+  dropdownRef,
+  dropdownListItemClassName,
+  width,
+  loading,
+  listId,
+  mobileTitle,
+  onChange,
+  opened,
+  size,
+  options,
+  setOpened,
+  targetRef,
+  value
+}) => {
+  return /* @__PURE__ */ jsx(
+    SelectExtendedField.Dropdown,
+    {
+      opened: opened && !loading,
+      forwardedRef: dropdownRef,
+      width,
+      setOpened,
+      targetRef,
+      size,
+      mobileViewProps: {
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownMobileHeader, { controlButtons: /* @__PURE__ */ jsx(DropdownMobileClose, { onClick: () => setOpened(false) }), children: /* @__PURE__ */ jsx(Text, { tag: "div", size: ETextSize.B3, children: mobileTitle }) }),
+          /* @__PURE__ */ jsx(DropdownMobileBody, { children: /* @__PURE__ */ jsx(DropdownMobileList, { children: options.map((option) => {
+            const { label, ...restOption } = option;
+            return /* @__PURE__ */ createElement(
+              DropdownMobileListItem,
+              {
+                ...restOption,
+                className: dropdownListItemClassName,
+                id: option.id,
+                key: option.id,
+                selected: option.id === (value == null ? void 0 : value.id),
+                onSelect: () => {
+                  onChange(option);
+                  setOpened(false);
+                }
+              },
+              label
+            );
+          }) }) })
+        ] })
+      },
+      children: /* @__PURE__ */ jsx(SelectExtendedField.Dropdown.List, { id: listId, dropdownOpened: opened, size, children: options.map((option) => {
+        const { label, ...restOption } = option;
+        return /* @__PURE__ */ createElement(
+          SelectExtendedField.Dropdown.List.Item,
+          {
+            ...restOption,
+            className: dropdownListItemClassName,
+            id: option.id,
+            key: option.id,
+            selected: option.id === (value == null ? void 0 : value.id),
+            onSelect: () => {
+              onChange(option);
+              setOpened(false);
+            }
+          },
+          label
+        );
+      }) })
+    }
+  );
+};
 export {
-  u as SelectExtendedFieldDropdownDefault
+  SelectExtendedFieldDropdownDefault
 };
 //# sourceMappingURL=SelectExtendedFieldDropdownDefault.js.map

package/components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectExtendedFieldDropdownDefault.js","sources":["../../../../src/components/SelectExtendedField/components/SelectExtendedFieldDropdownDefault.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    ISelectExtendedFieldDefaultOption,\n    ISelectExtendedFieldDropdownProvideProps,\n    SelectExtendedField,\n} from \"../SelectExtendedField\";\nimport {\n    DropdownMobileBody,\n    DropdownMobileClose,\n    DropdownMobileHeader,\n    DropdownMobileList,\n    DropdownMobileListItem,\n    IDropdownProps,\n} from \"../../Dropdown\";\nimport { Text, ETextSize } from \"../../Typography\";\n\nexport interface ISelectExtendedFieldDropdownDefaultProps\n    extends ISelectExtendedFieldDropdownProvideProps, Pick<IDropdownProps, \"size\" | \"width\"> {\n    /* ClassName для модификации SelectExtendedField.Dropdown.List.Item. */\n    dropdownListItemClassName?: string;\n    /* Состояние загрузки. В этот момент Dropdown закрыт, Target отображает loader. */\n    loading?: boolean;\n    /* Id SelectExtendedField.Dropdown.List. Нужен для связи с Target. */\n    listId?: string;\n    /* Название Select отображающееся в мобильном режиме. */\n    mobileTitle?: React.ReactNode;\n    /* Список опций. */\n    options: ISelectExtendedFieldDefaultOption[];\n    /* Обработчик изменения значения. */\n    onChange: (option: ISelectExtendedFieldDefaultOption) => void;\n    /* Текущее выбранное значение. */\n    value?: ISelectExtendedFieldDefaultOption;\n}\n\n/**\n * Дефолтный рендер Dropdown для SelectExtendedField.\n * Вынесено в отдельный компонент для переиспользования внутри компонентов Triplex.\n */\nexport const SelectExtendedFieldDropdownDefault: React.FC<ISelectExtendedFieldDropdownDefaultProps> = ({\n    dropdownRef,\n    dropdownListItemClassName,\n    width,\n    loading,\n    listId,\n    mobileTitle,\n    onChange,\n    opened,\n    size,\n    options,\n    setOpened,\n    targetRef,\n    value,\n}) => {\n    return (\n        <SelectExtendedField.Dropdown\n            opened={opened && !loading}\n            forwardedRef={dropdownRef}\n            width={width}\n            setOpened={setOpened}\n            targetRef={targetRef}\n            size={size}\n            mobileViewProps={{\n                children: (\n                    <>\n                        <DropdownMobileHeader controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}>\n                            <Text tag=\"div\" size={ETextSize.B3}>\n                                {mobileTitle}\n                            </Text>\n                        </DropdownMobileHeader>\n                        <DropdownMobileBody>\n                            <DropdownMobileList>\n                                {options.map((option) => {\n                                    const { label, ...restOption } = option;\n\n                                    return (\n                                        <DropdownMobileListItem\n                                            {...restOption}\n                                            className={dropdownListItemClassName}\n                                            id={option.id}\n                                            key={option.id}\n                                            selected={option.id === value?.id}\n                                            onSelect={() => {\n                                                onChange(option);\n                                                setOpened(false);\n                                            }}\n                                        >\n                                            {label}\n                                        </DropdownMobileListItem>\n                                    );\n                                })}\n                            </DropdownMobileList>\n                        </DropdownMobileBody>\n                    </>\n                ),\n            }}\n        >\n            <SelectExtendedField.Dropdown.List id={listId} dropdownOpened={opened} size={size}>\n                {options.map((option) => {\n                    const { label, ...restOption } = option;\n\n                    return (\n                        <SelectExtendedField.Dropdown.List.Item\n                            {...restOption}\n                            className={dropdownListItemClassName}\n                            id={option.id}\n                            key={option.id}\n                            selected={option.id === value?.id}\n                            onSelect={() => {\n                                onChange(option);\n                                setOpened(false);\n                            }}\n                        >\n                            {label}\n                        </SelectExtendedField.Dropdown.List.Item>\n                    );\n                })}\n            </SelectExtendedField.Dropdown.List>\n        </SelectExtendedField.Dropdown>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,qCAAyF,CAAC;AAAA,EACnG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ,MAAM;AACF,SACI;AAAA,IAAC,oBAAoB;AAAA,IAApB;AAAA,MACG,QAAQ,UAAU,CAAC;AAAA,MACnB,cAAc;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,QACb,UACI,qBAAA,UAAA,EACI,UAAA;AAAA,UAAA,oBAAC,wBAAqB,gBAAgB,oBAAC,uBAAoB,SAAS,MAAM,UAAU,KAAK,GAAG,GACxF,UAAA,oBAAC,QAAK,KAAI,OAAM,MAAM,UAAU,IAC3B,uBACL,EAAA,CACJ;AAAA,8BACC,oBAAA,EACG,UAAA,oBAAC,sBACI,UAAA,QAAQ,IAAI,CAAC,WAAW;AACrB,kBAAM,EAAE,OAAO,GAAG,WAAA,IAAe;AAEjC,mBACI;AAAA,cAAC;AAAA,cAAA;AAAA,gBACI,GAAG;AAAA,gBACJ,WAAW;AAAA,gBACX,IAAI,OAAO;AAAA,gBACX,KAAK,OAAO;AAAA,gBACZ,UAAU,OAAO,QAAO,+BAAO;AAAA,gBAC/B,UAAU,MAAM;AACZ,2BAAS,MAAM;AACf,4BAAU,KAAK;AAAA,gBACnB;AAAA,cAAA;AAAA,cAEC;AAAA,YAAA;AAAA,UAGb,CAAC,GACL,EAAA,CACJ;AAAA,QAAA,EAAA,CACJ;AAAA,MAAA;AAAA,MAIR,UAAA,oBAAC,oBAAoB,SAAS,MAA7B,EAAkC,IAAI,QAAQ,gBAAgB,QAAQ,MAClE,UAAA,QAAQ,IAAI,CAAC,WAAW;AACrB,cAAM,EAAE,OAAO,GAAG,WAAA,IAAe;AAEjC,eACI;AAAA,UAAC,oBAAoB,SAAS,KAAK;AAAA,UAAlC;AAAA,YACI,GAAG;AAAA,YACJ,WAAW;AAAA,YACX,IAAI,OAAO;AAAA,YACX,KAAK,OAAO;AAAA,YACZ,UAAU,OAAO,QAAO,+BAAO;AAAA,YAC/B,UAAU,MAAM;AACZ,uBAAS,MAAM;AACf,wBAAU,KAAK;AAAA,YACnB;AAAA,UAAA;AAAA,UAEC;AAAA,QAAA;AAAA,MAGb,CAAC,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/components/SelectExtendedField/components/SelectExtendedFieldTarget.js

@@ -1,129 +1,162 @@
-import { jsx as t, jsxs as _ } from "react/jsx-runtime";
-import T, { useRef as A } from "react";
-import { CaretdownStrokeSrvIcon24 as M, CaretdownStrokeSrvIcon20 as O, CaretdownStrokeSrvIcon16 as z } from "@sberbusiness/icons-next";
-import { EVENT_KEY_CODES as c } from "../../../utils/keyboard.js";
-import { LoaderSmall as S } from "../../Loader/LoaderSmall/LoaderSmall.js";
-import { ELoaderSmallTheme as x } from "../../Loader/LoaderSmall/enum.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useRef } from "react";
+import { CaretdownStrokeSrvIcon24, CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon16 } from "@sberbusiness/icons-next";
+import { EVENT_KEY_CODES } from "../../../utils/keyboard.js";
+import { LoaderSmall } from "../../Loader/LoaderSmall/LoaderSmall.js";
+import { ELoaderSmallTheme } from "../../Loader/LoaderSmall/enum.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
-import { c as u } from "../../../chunks/vendor-D5cfSbgz.js";
-import { EFormFieldStatus as s } from "../../FormField/enums.js";
-import { FormFieldClear as W } from "../../FormField/components/FormFieldClear.js";
+import { c as clsx } from "../../../chunks/vendor-Bco_z_Yi.js";
+import { EFormFieldStatus } from "../../FormField/enums.js";
+import { FormFieldClear } from "../../FormField/components/FormFieldClear.js";
 import "../../FormField/components/FormFieldCounter.js";
 import "../../FormField/components/FormFieldDescription.js";
-import "../../../chunks/FormFieldInput-DFQ9utC5.js";
-import { FormFieldLabel as k } from "../../FormField/components/FormFieldLabel.js";
+import "../../../chunks/FormFieldInput-B1sTDP0Z.js";
+import { FormFieldLabel } from "../../FormField/components/FormFieldLabel.js";
 import "../../FormField/components/FormFieldMaskedInput.js";
-import { FormFieldPostfix as y } from "../../FormField/components/FormFieldPostfix.js";
-import { FormFieldPrefix as B } from "../../FormField/components/FormFieldPrefix.js";
-import { FormFieldTarget as w } from "../../FormField/components/FormFieldTarget.js";
+import { FormFieldPostfix } from "../../FormField/components/FormFieldPostfix.js";
+import { FormFieldPrefix } from "../../FormField/components/FormFieldPrefix.js";
+import { FormFieldTarget } from "../../FormField/components/FormFieldTarget.js";
 import "../../FormField/components/FormFieldTextarea.js";
-import { FormField as P } from "../../FormField/FormField.js";
-import { EComponentSize as o } from "../../../enums/EComponentSize.js";
-import { IconWrapper as v } from "../../IconWrapper/IconWrapper.js";
-const G = "selectExtendedFieldTarget__87606666", K = "caretIcon__eadf6bea", j = "selectOpened__4d94c15d", U = "disabled__f979f76c", V = "target__077ff0d5", Y = "caretWrapper__7f01d32c", e = {
-  selectExtendedFieldTarget: G,
-  caretIcon: K,
-  selectOpened: j,
-  disabled: U,
-  target: V,
-  caretWrapper: Y
-}, q = {
-  [o.SM]: /* @__PURE__ */ t(z, { paletteIndex: 5, className: e.caretIcon }),
-  [o.MD]: /* @__PURE__ */ t(O, { paletteIndex: 5, className: e.caretIcon }),
-  [o.LG]: /* @__PURE__ */ t(M, { paletteIndex: 5, className: e.caretIcon })
-}, H = {
-  [o.SM]: /* @__PURE__ */ t(S, { size: o.SM, theme: x.BRAND }),
-  [o.MD]: /* @__PURE__ */ t(S, { size: o.MD, theme: x.BRAND }),
-  [o.LG]: /* @__PURE__ */ t(S, { size: o.LG, theme: x.BRAND })
-}, J = T.forwardRef(
-  (g, d) => {
+import { FormField } from "../../FormField/FormField.js";
+import { EComponentSize } from "../../../enums/EComponentSize.js";
+import { IconWrapper } from "../../IconWrapper/IconWrapper.js";
+const selectExtendedFieldTarget = "selectExtendedFieldTarget__79e48c69";
+const caretIcon = "caretIcon__6e20a55d";
+const selectOpened = "selectOpened__5ebb7558";
+const disabled = "disabled__c62624b1";
+const target = "target__7ea33784";
+const caretWrapper = "caretWrapper__922f65b7";
+const styles = {
+  selectExtendedFieldTarget,
+  caretIcon,
+  selectOpened,
+  disabled,
+  target,
+  caretWrapper
+};
+const sizeToCaretIconMap = {
+  [EComponentSize.SM]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon16, { paletteIndex: 5, className: styles.caretIcon }),
+  [EComponentSize.MD]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon20, { paletteIndex: 5, className: styles.caretIcon }),
+  [EComponentSize.LG]: /* @__PURE__ */ jsx(CaretdownStrokeSrvIcon24, { paletteIndex: 5, className: styles.caretIcon })
+};
+const sizeToLoaderSizeMap = {
+  [EComponentSize.SM]: /* @__PURE__ */ jsx(LoaderSmall, { size: EComponentSize.SM, theme: ELoaderSmallTheme.BRAND }),
+  [EComponentSize.MD]: /* @__PURE__ */ jsx(LoaderSmall, { size: EComponentSize.MD, theme: ELoaderSmallTheme.BRAND }),
+  [EComponentSize.LG]: /* @__PURE__ */ jsx(LoaderSmall, { size: EComponentSize.LG, theme: ELoaderSmallTheme.BRAND })
+};
+const SelectExtendedFieldTarget = React__default.forwardRef(
+  (props, ref) => {
     const {
-      children: Q,
-      className: N,
-      label: n,
-      placeholder: D,
-      onKeyDown: m,
-      onClick: p,
-      onClear: E,
-      opened: a,
-      postfix: F,
-      prefix: I,
-      setOpened: h,
-      loading: i,
-      size: f = o.MD,
-      status: l,
-      tabIndex: X,
-      fieldLabel: C,
-      ...R
-    } = g, b = A(null), L = u(
-      e.selectExtendedFieldTarget,
+      children,
+      className,
+      label,
+      placeholder,
+      onKeyDown,
+      onClick,
+      onClear,
+      opened,
+      postfix,
+      prefix,
+      setOpened,
+      loading,
+      size = EComponentSize.MD,
+      status,
+      tabIndex,
+      fieldLabel,
+      ...rest
+    } = props;
+    const targetRef = useRef(null);
+    const classNames = clsx(
+      styles.selectExtendedFieldTarget,
       {
-        [e.selectOpened]: a,
-        [e.loading]: i,
-        [e.disabled]: l === s.DISABLED
+        [styles.selectOpened]: opened,
+        [styles.loading]: loading,
+        [styles.disabled]: status === EFormFieldStatus.DISABLED
       },
-      N
+      className
     );
-    return /* @__PURE__ */ _(
-      P,
+    const handleClick = (event) => {
+      if (loading || status === EFormFieldStatus.DISABLED) {
+        return;
+      }
+      setOpened(!opened);
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleKeyDown = (event) => {
+      if (loading && status === EFormFieldStatus.DISABLED) {
+        return;
+      }
+      if (!opened) {
+        if ([
+          EVENT_KEY_CODES.SPACE,
+          EVENT_KEY_CODES.ENTER,
+          EVENT_KEY_CODES.ARROW_DOWN,
+          EVENT_KEY_CODES.ARROW_UP
+        ].includes(event.keyCode)) {
+          event.preventDefault();
+          event.stopPropagation();
+          setOpened(!opened);
+        }
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const setRef = (instance) => {
+      targetRef.current = instance;
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref) {
+        ref.current = instance;
+      }
+    };
+    return /* @__PURE__ */ jsxs(
+      FormField,
       {
-        onClick: (r) => {
-          i || l === s.DISABLED || (h(!a), p == null || p(r));
-        },
-        onKeyDown: (r) => {
-          i && l === s.DISABLED || (a || [
-            c.SPACE,
-            c.ENTER,
-            c.ARROW_DOWN,
-            c.ARROW_UP
-          ].includes(r.keyCode) && (r.preventDefault(), r.stopPropagation(), h(!a)), m == null || m(r));
-        },
-        status: l,
-        size: f,
-        className: L,
-        "aria-expanded": a,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        status,
+        size,
+        className: classNames,
+        "aria-expanded": opened,
         "aria-haspopup": "listbox",
-        "data-tx": "1.34.0",
-        active: a,
-        ...R,
+        "data-tx": "1.35.1",
+        active: opened,
+        ...rest,
         children: [
-          I ? /* @__PURE__ */ t(B, { children: I }) : null,
-          /* @__PURE__ */ t(k, { children: C }),
-          /* @__PURE__ */ t(
-            w,
+          prefix ? /* @__PURE__ */ jsx(FormFieldPrefix, { children: prefix }) : null,
+          /* @__PURE__ */ jsx(FormFieldLabel, { children: fieldLabel }),
+          /* @__PURE__ */ jsx(
+            FormFieldTarget,
             {
-              ref: (r) => {
-                b.current = r, typeof d == "function" ? d(r) : d && (d.current = r);
-              },
-              className: u(e.target, {
-                [e.placeholder]: !!D && !n,
-                [e.label]: !!n
+              ref: setRef,
+              className: clsx(styles.target, {
+                [styles.placeholder]: !!placeholder && !label,
+                [styles.label]: !!label
               }),
-              placeholder: D,
-              children: n
+              placeholder,
+              children: label
             }
           ),
-          /* @__PURE__ */ _(y, { children: [
-            E && /* @__PURE__ */ t(W, { onClick: E }),
-            i ? H[f] : /* @__PURE__ */ t(
-              v,
+          /* @__PURE__ */ jsxs(FormFieldPostfix, { children: [
+            onClear && /* @__PURE__ */ jsx(FormFieldClear, { onClick: onClear }),
+            loading ? sizeToLoaderSizeMap[size] : /* @__PURE__ */ jsx(
+              IconWrapper,
               {
-                className: e.caretWrapper,
-                active: a,
-                disabled: l === s.DISABLED,
-                displayContents: !0,
-                children: q[f]
+                className: styles.caretWrapper,
+                active: opened,
+                disabled: status === EFormFieldStatus.DISABLED,
+                displayContents: true,
+                children: sizeToCaretIconMap[size]
               }
             ),
-            F || null
+            postfix ? postfix : null
           ] })
         ]
       }
     );
   }
 );
-J.displayName = "SelectExtendedFieldTarget";
+SelectExtendedFieldTarget.displayName = "SelectExtendedFieldTarget";
 export {
-  J as SelectExtendedFieldTarget
+  SelectExtendedFieldTarget
 };
 //# sourceMappingURL=SelectExtendedFieldTarget.js.map

package/components/SelectExtendedField/components/SelectExtendedFieldTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectExtendedFieldTarget.js","sources":["../../../../src/components/SelectExtendedField/components/SelectExtendedFieldTarget.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\nimport { CaretdownStrokeSrvIcon16, CaretdownStrokeSrvIcon20, CaretdownStrokeSrvIcon24 } from \"@sberbusiness/icons-next\";\nimport { EVENT_KEY_CODES } from \"../../../utils/keyboard\";\nimport { LoaderSmall, ELoaderSmallTheme } from \"../../Loader\";\nimport clsx from \"clsx\";\nimport {\n    EFormFieldStatus,\n    FormField,\n    FormFieldClear,\n    FormFieldLabel,\n    FormFieldPostfix,\n    FormFieldPrefix,\n    IFormFieldProps,\n} from \"../../FormField\";\nimport { FormFieldTarget } from \"../../FormField/components/FormFieldTarget\";\nimport { EComponentSize } from \"@sberbusiness/triplex-next/enums/EComponentSize\";\nimport { IconWrapper } from \"../../IconWrapper\";\nimport styles from \"../styles/SelectExtendedFieldTarget.module.less\";\n\n/* Свойства SelectExtendedFieldTarget. */\nexport interface ISelectExtendedFieldTargetProps extends Omit<IFormFieldProps, \"prefix\" | \"postfix\"> {\n    /**  Текст или компонент, отображающий выбранное значение. */\n    label?: React.ReactNode;\n    /** Текст или компонент, отображающий выбранное значение для Target. */\n    fieldLabel: React.ReactNode;\n    /** Состояние загрузки. */\n    loading?: boolean;\n    /** Состояние открытости выпадающего списка. */\n    opened: boolean;\n    /** Текст или компонент, отображающий выбранное placeholder. */\n    placeholder?: React.ReactNode;\n    /** Префикс поля ввода. */\n    prefix?: React.ReactNode;\n    /** Постфикс поля ввода. */\n    postfix?: React.ReactNode;\n    /** Функция открытия/закрытия выпадающего списка. */\n    setOpened: (opened: boolean) => void;\n    /** Функция очистки значения. */\n    onClear?: () => void;\n}\n\nconst sizeToCaretIconMap = {\n    [EComponentSize.SM]: <CaretdownStrokeSrvIcon16 paletteIndex={5} className={styles.caretIcon} />,\n    [EComponentSize.MD]: <CaretdownStrokeSrvIcon20 paletteIndex={5} className={styles.caretIcon} />,\n    [EComponentSize.LG]: <CaretdownStrokeSrvIcon24 paletteIndex={5} className={styles.caretIcon} />,\n};\n\nconst sizeToLoaderSizeMap = {\n    [EComponentSize.SM]: <LoaderSmall size={EComponentSize.SM} theme={ELoaderSmallTheme.BRAND} />,\n    [EComponentSize.MD]: <LoaderSmall size={EComponentSize.MD} theme={ELoaderSmallTheme.BRAND} />,\n    [EComponentSize.LG]: <LoaderSmall size={EComponentSize.LG} theme={ELoaderSmallTheme.BRAND} />,\n};\n\n/**\n * Компонент SelectTarget.\n * Видимая часть Select, при нажатии на которую открывается выпадающий список.\n */\nexport const SelectExtendedFieldTarget = React.forwardRef<HTMLDivElement, ISelectExtendedFieldTargetProps>(\n    (props, ref) => {\n        const {\n            children,\n            className,\n            label,\n            placeholder,\n            onKeyDown,\n            onClick,\n            onClear,\n            opened,\n            postfix,\n            prefix,\n            setOpened,\n            loading,\n            size = EComponentSize.MD,\n            status,\n            tabIndex,\n            fieldLabel,\n            ...rest\n        } = props;\n        const targetRef = useRef<HTMLDivElement | null>(null);\n        const classNames = clsx(\n            styles.selectExtendedFieldTarget,\n            {\n                [styles.selectOpened]: opened,\n                [styles.loading]: loading,\n                [styles.disabled]: status === EFormFieldStatus.DISABLED,\n            },\n            className,\n        );\n        /* Обработчик клика. */\n        const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {\n            if (loading || status === EFormFieldStatus.DISABLED) {\n                return; // Не реагируем на клики в состоянии загрузки\n            }\n            setOpened(!opened);\n            onClick?.(event);\n        };\n\n        /* Обработчик нажатия клавиши. */\n        const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (loading && status === EFormFieldStatus.DISABLED) {\n                return; // Не реагируем на клавиши в состоянии загрузки\n            }\n\n            if (!opened) {\n                // При нажатии Enter, Space, ArrowUp или ArrowDown открывается выпадающий список.\n                if (\n                    [\n                        EVENT_KEY_CODES.SPACE,\n                        EVENT_KEY_CODES.ENTER,\n                        EVENT_KEY_CODES.ARROW_DOWN,\n                        EVENT_KEY_CODES.ARROW_UP,\n                    ].includes(event.keyCode)\n                ) {\n                    event.preventDefault();\n                    // Предотвращение срабатывания keydown при открытии Dropdown в document.addEventListener('keydown'...) в src/desktop/components/Dropdown/components/DropdownListItem.tsx.\n                    event.stopPropagation();\n                    setOpened(!opened);\n                }\n            }\n\n            onKeyDown?.(event);\n        };\n\n        /* Функция для хранения ссылки. */\n        const setRef = (instance: HTMLDivElement | null) => {\n            targetRef.current = instance;\n            if (typeof ref === \"function\") {\n                ref(instance);\n            } else if (ref) {\n                ref.current = instance;\n            }\n        };\n\n        return (\n            <FormField\n                onClick={handleClick}\n                onKeyDown={handleKeyDown}\n                status={status}\n                size={size}\n                className={classNames}\n                aria-expanded={opened}\n                aria-haspopup=\"listbox\"\n                data-tx={process.env.npm_package_version}\n                active={opened}\n                {...rest}\n            >\n                {prefix ? <FormFieldPrefix>{prefix}</FormFieldPrefix> : null}\n\n                <FormFieldLabel>{fieldLabel}</FormFieldLabel>\n                <FormFieldTarget\n                    ref={setRef}\n                    className={clsx(styles.target, {\n                        [styles.placeholder]: !!placeholder && !label,\n                        [styles.label]: !!label,\n                    })}\n                    placeholder={placeholder}\n                >\n                    {label}\n                </FormFieldTarget>\n\n                <FormFieldPostfix>\n                    {onClear && <FormFieldClear onClick={onClear} />}\n                    {loading ? (\n                        sizeToLoaderSizeMap[size]\n                    ) : (\n                        <IconWrapper\n                            className={styles.caretWrapper}\n                            active={opened}\n                            disabled={status === EFormFieldStatus.DISABLED}\n                            displayContents\n                        >\n                            {sizeToCaretIconMap[size]}\n                        </IconWrapper>\n                    )}\n                    {postfix ? postfix : null}\n                </FormFieldPostfix>\n            </FormField>\n        );\n    },\n);\n\nSelectExtendedFieldTarget.displayName = \"SelectExtendedFieldTarget\";\n"],"names":["React"],"mappings":"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"}

package/components/SelectExtendedField/index.js

@@ -1,9 +1,9 @@
-import { SelectExtendedField as t } from "./SelectExtendedField.js";
-import { SelectExtendedFieldDropdown as r } from "./components/SelectExtendedFieldDropdown.js";
-import { SelectExtendedFieldTarget as x } from "./components/SelectExtendedFieldTarget.js";
+import { SelectExtendedField } from "./SelectExtendedField.js";
+import { SelectExtendedFieldDropdown } from "./components/SelectExtendedFieldDropdown.js";
+import { SelectExtendedFieldTarget } from "./components/SelectExtendedFieldTarget.js";
 export {
-  t as SelectExtendedField,
-  r as SelectExtendedFieldDropdown,
-  x as SelectExtendedFieldTarget
+  SelectExtendedField,
+  SelectExtendedFieldDropdown,
+  SelectExtendedFieldTarget
 };
 //# sourceMappingURL=index.js.map

package/components/SelectExtendedField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/components/SelectField/SelectField.js

@@ -1,14 +1,14 @@
-import { jsx as o } from "react/jsx-runtime";
-import v, { useState as y, useRef as d } from "react";
-import { SelectExtendedField as m } from "../SelectExtendedField/SelectExtendedField.js";
+import { jsx } from "react/jsx-runtime";
+import React__default, { useState, useRef } from "react";
+import { SelectExtendedField } from "../SelectExtendedField/SelectExtendedField.js";
 import "../SelectExtendedField/components/SelectExtendedFieldDropdown.js";
 import "../SelectExtendedField/components/SelectExtendedFieldTarget.js";
-import { SelectExtendedFieldDropdownDefault as S } from "../SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js";
-import { DropdownListContext as E } from "../Dropdown/DropdownListContext.js";
+import { SelectExtendedFieldDropdownDefault } from "../SelectExtendedField/components/SelectExtendedFieldDropdownDefault.js";
+import { DropdownListContext } from "../Dropdown/DropdownListContext.js";
 import "../Dropdown/desktop/DropdownDesktop.js";
 import "../Dropdown/desktop/DropdownList.js";
-import "../../chunks/DropdownListItem-Db1_Qf-T.js";
-import { EDropdownWidth as F } from "../Dropdown/desktop/enums.js";
+import "../../chunks/DropdownListItem-CboBGsbx.js";
+import { EDropdownWidth } from "../Dropdown/desktop/enums.js";
 import "../Dropdown/mobile/DropdownMobile.js";
 import "../Dropdown/mobile/DropdownMobileBody.js";
 import "../Dropdown/mobile/DropdownMobileClose.js";
@@ -21,60 +21,71 @@ import "../Dropdown/mobile/DropdownMobileListItem.js";
 import "../Loader/LoaderSmall/LoaderSmall.js";
 import "../Loader/LoaderMiddle/LoaderMiddle.js";
 import "../Dropdown/Dropdown.js";
-import { u as I } from "../../chunks/vendor-D5cfSbgz.js";
-const L = v.forwardRef((p, t) => {
+import { u as uniqueId } from "../../chunks/vendor-Bco_z_Yi.js";
+const SelectField = React__default.forwardRef((props, ref) => {
   const {
-    children: C,
-    className: s,
-    value: r,
-    size: i,
-    options: c,
-    onChange: f,
-    placeholder: u,
-    loading: n,
-    status: b,
-    "aria-labelledby": w,
-    dropdownListItemClassName: N,
-    mobileTitle: D,
-    targetProps: g,
-    ...h
-  } = p, [a, T] = y(), x = d(null), l = d(I()), R = (e) => {
-    x.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+    children,
+    className,
+    value,
+    size,
+    options,
+    onChange,
+    placeholder,
+    loading,
+    status,
+    "aria-labelledby": ariaLabelledby,
+    dropdownListItemClassName,
+    mobileTitle,
+    targetProps,
+    ...rest
+  } = props;
+  const [activeDescendant, setActiveDescendant] = useState();
+  const targetRef = useRef(null);
+  const instanceId = useRef(uniqueId());
+  const setRef = (node) => {
+    targetRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
   };
-  return /* @__PURE__ */ o(m, { className: s, renderTarget: (e) => /* @__PURE__ */ o(
-    m.Target,
+  const renderTarget = (props2) => /* @__PURE__ */ jsx(
+    SelectExtendedField.Target,
     {
-      label: r == null ? void 0 : r.label,
-      placeholder: u,
-      loading: n,
-      status: b,
+      label: value == null ? void 0 : value.label,
+      placeholder,
+      loading,
+      status,
       role: "combobox",
-      "aria-controls": l.current,
-      "aria-activedescendant": a,
-      "aria-labelledby": w,
-      ref: R,
-      size: i,
+      "aria-controls": instanceId.current,
+      "aria-activedescendant": activeDescendant,
+      "aria-labelledby": ariaLabelledby,
+      ref: setRef,
+      size,
       fieldLabel: void 0,
-      ...g,
-      ...e
+      ...targetProps,
+      ...props2
     }
-  ), closeOnTab: !0, ...h, children: (e) => /* @__PURE__ */ o(E.Provider, { value: { activeDescendant: a, setActiveDescendant: T }, children: /* @__PURE__ */ o(
-    S,
+  );
+  const renderDropdown = (props2) => /* @__PURE__ */ jsx(DropdownListContext.Provider, { value: { activeDescendant, setActiveDescendant }, children: /* @__PURE__ */ jsx(
+    SelectExtendedFieldDropdownDefault,
     {
-      ...e,
-      size: i,
-      width: F.TARGET,
-      loading: n,
-      listId: l.current,
-      mobileTitle: D,
-      onChange: f,
-      options: c,
-      value: r
+      ...props2,
+      size,
+      width: EDropdownWidth.TARGET,
+      loading,
+      listId: instanceId.current,
+      mobileTitle,
+      onChange,
+      options,
+      value
     }
-  ) }) });
+  ) });
+  return /* @__PURE__ */ jsx(SelectExtendedField, { className, renderTarget, closeOnTab: true, ...rest, children: renderDropdown });
 });
-L.displayName = "SelectField";
+SelectField.displayName = "SelectField";
 export {
-  L as SelectField
+  SelectField
 };
 //# sourceMappingURL=SelectField.js.map