@vkontakte/vkui 6.5.2 → 6.5.4

package/dist/cjs/components/CustomSelect/CustomSelectInput.js

@@ -17,17 +17,19 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _useExternRef = require("../../hooks/useExternRef");
+const _useFocusWithin = require("../../hooks/useFocusWithin");
 const _usePlatform = require("../../hooks/usePlatform");
 const _select = require("../../lib/select");
 const _FormField = require("../FormField/FormField");
 const _SelectTypography = require("../SelectTypography/SelectTypography");
+const _Text = require("../Typography/Text/Text");
 const _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 const sizeYClassNames = {
     none: "vkuiCustomSelectInput--sizeY-none",
     compact: "vkuiCustomSelectInput--sizeY-compact"
 };
 const CustomSelectInput = (_param)=>{
-    var { align = 'left', getRef, className, getRootRef, style, before, after, status, selectedOptionLabel, selectType = 'default', multiline, disabled, fetching, labelTextTestId, searchable } = _param, restInputProps = _object_without_properties._(_param, [
+    var { align = 'left', getRef, className, getRootRef, style, before, after, status, children, placeholder, selectType = 'default', multiline, disabled, fetching, labelTextTestId } = _param, restProps = _object_without_properties._(_param, [
         "align",
         "getRef",
         "className",
@@ -36,32 +38,35 @@ const CustomSelectInput = (_param)=>{
         "before",
         "after",
         "status",
-        "selectedOptionLabel",
+        "children",
+        "placeholder",
         "selectType",
         "multiline",
         "disabled",
         "fetching",
-        "labelTextTestId",
-        "searchable"
+        "labelTextTestId"
     ]);
     const { sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
+    const title = children || placeholder;
+    const showLabelOrPlaceholder = !Boolean(restProps.value);
     const handleRootRef = (0, _useExternRef.useExternRef)(getRootRef);
-    const platform = (0, _usePlatform.usePlatform)();
-    const input = /*#__PURE__*/ (0, _jsxruntime.jsx)(_SelectTypography.SelectTypography, _object_spread_props._(_object_spread._({
-        selectType: selectType,
+    const focusWithin = (0, _useFocusWithin.useFocusWithin)(handleRootRef);
+    const input = /*#__PURE__*/ (0, _jsxruntime.jsx)(_Text.Text, _object_spread_props._(_object_spread._({
         type: "text"
-    }, restInputProps), {
+    }, restProps), {
         disabled: disabled && !fetching,
-        readOnly: restInputProps.readOnly || !searchable || disabled && fetching,
+        readOnly: restProps.readOnly || disabled && fetching,
         Component: "input",
         normalize: false,
-        className: "vkuiCustomSelectInput__input",
-        getRootRef: getRef
+        className: (0, _vkjs.classNames)("vkuiCustomSelectInput__el", (restProps.readOnly || showLabelOrPlaceholder && !focusWithin) && "vkuiCustomSelectInput__el--cursor-pointer"),
+        getRootRef: getRef,
+        placeholder: children ? '' : placeholder
     }));
+    const platform = (0, _usePlatform.usePlatform)();
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_FormField.FormField, {
         Component: "div",
         style: style,
-        className: (0, _vkjs.classNames)("vkuiCustomSelectInput", align === 'right' && "vkuiCustomSelectInput--align-right", align === 'center' && "vkuiCustomSelectInput--align-center", !selectedOptionLabel && "vkuiCustomSelectInput--empty", multiline && "vkuiCustomSelectInput--multiline", sizeY !== 'regular' && sizeYClassNames[sizeY], before && "vkuiCustomSelectInput--hasBefore", after && "vkuiCustomSelectInput--hasAfter", className),
+        className: (0, _vkjs.classNames)("vkuiCustomSelectInput", align === 'right' && "vkuiCustomSelectInput--align-right", align === 'center' && "vkuiCustomSelectInput--align-center", !children && "vkuiCustomSelectInput--empty", multiline && "vkuiCustomSelectInput--multiline", sizeY !== 'regular' && sizeYClassNames[sizeY], before && "vkuiCustomSelectInput--hasBefore", after && "vkuiCustomSelectInput--hasAfter", className),
         getRootRef: handleRootRef,
         before: before,
         after: after,
@@ -71,20 +76,20 @@ const CustomSelectInput = (_param)=>{
         children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
             className: "vkuiCustomSelectInput__input-group",
             children: [
-                !searchable && platform === 'ios' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
-                    children: input
-                }) : input,
                 /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
-                    className: (0, _vkjs.classNames)("vkuiCustomSelectInput__label-wrapper", className),
+                    className: (0, _vkjs.classNames)("vkuiCustomSelectInput__container", className),
                     tabIndex: -1,
                     "aria-hidden": true,
                     "data-testid": labelTextTestId,
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_SelectTypography.SelectTypography, {
                         selectType: selectType,
-                        className: "vkuiCustomSelectInput__label",
-                        children: selectedOptionLabel || restInputProps.placeholder
+                        className: "vkuiCustomSelectInput__title",
+                        children: showLabelOrPlaceholder && title
                     })
-                })
+                }),
+                restProps.readOnly && platform === 'ios' ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_VisuallyHidden.VisuallyHidden, {
+                    children: input
+                }) : input
             ]
         })
     });

package/dist/cjs/components/CustomSelect/CustomSelectInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelectInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CustomSelectInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectInput--sizeY-none'],\n  compact: styles['CustomSelectInput--sizeY-compact'],\n};\n\nexport interface CustomSelectInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Omit<FormFieldProps, 'mode' | 'type' | 'maxHeight'> {\n  selectType?: SelectType;\n  multiline?: boolean;\n  labelTextTestId?: string;\n  fetching?: boolean;\n  searchable?: boolean;\n  selectedOptionLabel?: React.ReactElement | string;\n}\n\n/**\n * @since 5.10.0\n * @private\n */\nexport const CustomSelectInput = ({\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  selectedOptionLabel,\n  selectType = 'default',\n  multiline,\n  disabled,\n  fetching,\n  labelTextTestId,\n  searchable,\n  ...restInputProps\n}: CustomSelectInputProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(getRootRef);\n\n  const platform = usePlatform();\n\n  const input = (\n    <SelectTypography\n      selectType={selectType}\n      type=\"text\"\n      {...restInputProps}\n      disabled={disabled && !fetching}\n      readOnly={restInputProps.readOnly || !searchable || (disabled && fetching)}\n      Component=\"input\"\n      normalize={false}\n      className={styles['CustomSelectInput__input']}\n      getRootRef={getRef}\n    />\n  );\n\n  return (\n    <FormField\n      Component=\"div\"\n      style={style}\n      className={classNames(\n        styles['CustomSelectInput'],\n        align === 'right' && styles['CustomSelectInput--align-right'],\n        align === 'center' && styles['CustomSelectInput--align-center'],\n        !selectedOptionLabel && styles['CustomSelectInput--empty'],\n        multiline && styles['CustomSelectInput--multiline'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        before && styles['CustomSelectInput--hasBefore'],\n        after && styles['CustomSelectInput--hasAfter'],\n        className,\n      )}\n      getRootRef={handleRootRef}\n      before={before}\n      after={after}\n      disabled={disabled}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['CustomSelectInput__input-group']}>\n        {/* Чтобы отключить autosuggestion в iOS, тултипы которого начинают всплывать даже когда input\n         * в режиме readonly, мы оборачиваем инпут в VisuallyHidden.\n         * Тултипы появляются при каждом клике на input.\n         * смотри: https://github.com/VKCOM/VKUI/issues/6205\n         *\n         * Достаточно не дать пользователю кликнуть по инпуту.\n         * Делаем это только для режима read-only. Потому что проблема именно в режиме read-only.\n         * Обертка вокруг инпута обрабатывает клики и передаёт фокус, так что на взаимодействии с инпутом это никак не скажется.\n         **/}\n        {!searchable && platform === 'ios' ? <VisuallyHidden>{input}</VisuallyHidden> : input}\n        <div\n          className={classNames(styles['CustomSelectInput__label-wrapper'], className)}\n          tabIndex={-1}\n          aria-hidden\n          data-testid={labelTextTestId}\n        >\n          <SelectTypography selectType={selectType} className={styles['CustomSelectInput__label']}>\n            {selectedOptionLabel || restInputProps.placeholder}\n          </SelectTypography>\n        </div>\n      </div>\n    </FormField>\n  );\n};\n"],"names":["CustomSelectInput","sizeYClassNames","none","compact","align","getRef","className","getRootRef","style","before","after","status","selectedOptionLabel","selectType","multiline","disabled","fetching","labelTextTestId","searchable","restInputProps","sizeY","useAdaptivity","handleRootRef","useExternRef","platform","usePlatform","input","SelectTypography","type","readOnly","Component","normalize","FormField","classNames","mode","getFormFieldModeFromSelectType","div","VisuallyHidden","tabIndex","aria-hidden","data-testid","placeholder"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;;;iEApCU;sBACI;+BACG;8BACD;6BACD;wBACmB;2BAEL;kCAET;gCACF;AAG/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAoBO,MAAMH,oBAAoB;QAAC,EAChCI,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,mBAAmB,EACnBC,aAAa,SAAS,EACtBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,UAAU,EAEa,WADpBC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,gBAAgBC,IAAAA,0BAAY,EAAChB;IAEnC,MAAMiB,WAAWC,IAAAA,wBAAW;IAE5B,MAAMC,sBACJ,qBAACC,kCAAgB;QACfd,YAAYA;QACZe,MAAK;OACDT;QACJJ,UAAUA,YAAY,CAACC;QACvBa,UAAUV,eAAeU,QAAQ,IAAI,CAACX,cAAeH,YAAYC;QACjEc,WAAU;QACVC,WAAW;QACXzB,SAAS;QACTC,YAAYF;;IAIhB,qBACE,qBAAC2B,oBAAS;QACRF,WAAU;QACVtB,OAAOA;QACPF,WAAW2B,IAAAA,gBAAU,2BAEnB7B,UAAU,iDACVA,UAAU,mDACV,CAACQ,uDACDE,iDACAM,UAAU,aAAanB,eAAe,CAACmB,MAAM,EAC7CX,8CACAC,4CACAJ;QAEFC,YAAYe;QACZb,QAAQA;QACRC,OAAOA;QACPK,UAAUA;QACVmB,MAAMC,IAAAA,sCAA8B,EAACtB;QACrCF,QAAQA;kBAER,cAAA,sBAACyB;YAAI9B,SAAS;;gBAUX,CAACY,cAAcM,aAAa,sBAAQ,qBAACa,8BAAc;8BAAEX;qBAA0BA;8BAChF,qBAACU;oBACC9B,WAAW2B,IAAAA,gBAAU,0CAA6C3B;oBAClEgC,UAAU,CAAC;oBACXC,aAAW;oBACXC,eAAavB;8BAEb,cAAA,qBAACU,kCAAgB;wBAACd,YAAYA;wBAAYP,SAAS;kCAChDM,uBAAuBO,eAAesB,WAAW;;;;;;AAM9D"}
+{"version":3,"sources":["../../../../src/components/CustomSelect/CustomSelectInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusWithin } from '../../hooks/useFocusWithin';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getFormFieldModeFromSelectType } from '../../lib/select';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport type { SelectType } from '../Select/Select';\nimport { SelectTypography } from '../SelectTypography/SelectTypography';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CustomSelectInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectInput--sizeY-none'],\n  compact: styles['CustomSelectInput--sizeY-compact'],\n};\n\nexport interface CustomSelectInputProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLDivElement>,\n    HasAlign,\n    Omit<FormFieldProps, 'mode' | 'type' | 'maxHeight'> {\n  selectType?: SelectType;\n  multiline?: boolean;\n  labelTextTestId?: string;\n  fetching?: boolean;\n}\n\n/**\n * @since 5.10.0\n * @private\n */\nexport const CustomSelectInput = ({\n  align = 'left',\n  getRef,\n  className,\n  getRootRef,\n  style,\n  before,\n  after,\n  status,\n  children,\n  placeholder,\n  selectType = 'default',\n  multiline,\n  disabled,\n  fetching,\n  labelTextTestId,\n  ...restProps\n}: CustomSelectInputProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const title = children || placeholder;\n  const showLabelOrPlaceholder = !Boolean(restProps.value);\n\n  const handleRootRef = useExternRef(getRootRef);\n  const focusWithin = useFocusWithin(handleRootRef);\n\n  const input = (\n    <Text\n      type=\"text\"\n      {...restProps}\n      disabled={disabled && !fetching}\n      readOnly={restProps.readOnly || (disabled && fetching)}\n      Component=\"input\"\n      normalize={false}\n      className={classNames(\n        styles['CustomSelectInput__el'],\n        (restProps.readOnly || (showLabelOrPlaceholder && !focusWithin)) &&\n          styles['CustomSelectInput__el--cursor-pointer'],\n      )}\n      getRootRef={getRef}\n      placeholder={children ? '' : placeholder}\n    />\n  );\n\n  const platform = usePlatform();\n  return (\n    <FormField\n      Component=\"div\"\n      style={style}\n      className={classNames(\n        styles['CustomSelectInput'],\n        align === 'right' && styles['CustomSelectInput--align-right'],\n        align === 'center' && styles['CustomSelectInput--align-center'],\n        !children && styles['CustomSelectInput--empty'],\n        multiline && styles['CustomSelectInput--multiline'],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        before && styles['CustomSelectInput--hasBefore'],\n        after && styles['CustomSelectInput--hasAfter'],\n        className,\n      )}\n      getRootRef={handleRootRef}\n      before={before}\n      after={after}\n      disabled={disabled}\n      mode={getFormFieldModeFromSelectType(selectType)}\n      status={status}\n    >\n      <div className={styles['CustomSelectInput__input-group']}>\n        <div\n          className={classNames(styles['CustomSelectInput__container'], className)}\n          tabIndex={-1}\n          aria-hidden\n          data-testid={labelTextTestId}\n        >\n          <SelectTypography selectType={selectType} className={styles['CustomSelectInput__title']}>\n            {showLabelOrPlaceholder && title}\n          </SelectTypography>\n        </div>\n        {/* Чтобы отключить autosuggestion в iOS, тултипы которого начинают всплывать даже когда input\n         * в режиме readonly, мы оборачиваем инпут в VisuallyHidden.\n         * Тултипы появляются при каждом клике на input.\n         * смотри: https://github.com/VKCOM/VKUI/issues/6205\n         *\n         * Достаточно не дать пользователю кликнуть по инпуту.\n         * Делаем это только для режима read-only. Потому что проблема именно в режиме read-only.\n         * Обертка вокруг инпута обрабатывает клики и передаёт фокус, так что на взаимодействии с инпутом это никак не скажется.\n         **/}\n        {restProps.readOnly && platform === 'ios' ? (\n          <VisuallyHidden>{input}</VisuallyHidden>\n        ) : (\n          input\n        )}\n      </div>\n    </FormField>\n  );\n};\n"],"names":["CustomSelectInput","sizeYClassNames","none","compact","align","getRef","className","getRootRef","style","before","after","status","children","placeholder","selectType","multiline","disabled","fetching","labelTextTestId","restProps","sizeY","useAdaptivity","title","showLabelOrPlaceholder","Boolean","value","handleRootRef","useExternRef","focusWithin","useFocusWithin","input","Text","type","readOnly","Component","normalize","classNames","platform","usePlatform","FormField","mode","getFormFieldModeFromSelectType","div","tabIndex","aria-hidden","data-testid","SelectTypography","VisuallyHidden"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;;;;iEApCU;sBACI;+BACG;8BACD;gCACE;6BACH;wBACmB;2BAEL;kCAET;sBACZ;gCACU;AAG/B,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAkBO,MAAMH,oBAAoB;QAAC,EAChCI,QAAQ,MAAM,EACdC,MAAM,EACNC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,WAAW,EACXC,aAAa,SAAS,EACtBC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EAEQ,WADpBC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGC,IAAAA,4BAAa;IAExC,MAAMC,QAAQV,YAAYC;IAC1B,MAAMU,yBAAyB,CAACC,QAAQL,UAAUM,KAAK;IAEvD,MAAMC,gBAAgBC,IAAAA,0BAAY,EAACpB;IACnC,MAAMqB,cAAcC,IAAAA,8BAAc,EAACH;IAEnC,MAAMI,sBACJ,qBAACC,UAAI;QACHC,MAAK;OACDb;QACJH,UAAUA,YAAY,CAACC;QACvBgB,UAAUd,UAAUc,QAAQ,IAAKjB,YAAYC;QAC7CiB,WAAU;QACVC,WAAW;QACX7B,WAAW8B,IAAAA,gBAAU,+BAEnB,AAACjB,CAAAA,UAAUc,QAAQ,IAAKV,0BAA0B,CAACK,WAAW;QAGhErB,YAAYF;QACZQ,aAAaD,WAAW,KAAKC;;IAIjC,MAAMwB,WAAWC,IAAAA,wBAAW;IAC5B,qBACE,qBAACC,oBAAS;QACRL,WAAU;QACV1B,OAAOA;QACPF,WAAW8B,IAAAA,gBAAU,2BAEnBhC,UAAU,iDACVA,UAAU,mDACV,CAACQ,4CACDG,iDACAK,UAAU,aAAanB,eAAe,CAACmB,MAAM,EAC7CX,8CACAC,4CACAJ;QAEFC,YAAYmB;QACZjB,QAAQA;QACRC,OAAOA;QACPM,UAAUA;QACVwB,MAAMC,IAAAA,sCAA8B,EAAC3B;QACrCH,QAAQA;kBAER,cAAA,sBAAC+B;YAAIpC,SAAS;;8BACZ,qBAACoC;oBACCpC,WAAW8B,IAAAA,gBAAU,sCAAyC9B;oBAC9DqC,UAAU,CAAC;oBACXC,aAAW;oBACXC,eAAa3B;8BAEb,cAAA,qBAAC4B,kCAAgB;wBAAChC,YAAYA;wBAAYR,SAAS;kCAChDiB,0BAA0BD;;;gBAY9BH,UAAUc,QAAQ,IAAII,aAAa,sBAClC,qBAACU,8BAAc;8BAAEjB;qBAEjBA;;;;AAKV"}

package/dist/cjs/components/ImageBase/ImageBase.js

@@ -182,7 +182,10 @@ const ImageBase = (_param)=>{
                     className: "vkuiImageBase__fallback",
                     children: fallbackIcon
                 }),
-                children,
+                children && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    className: "vkuiImageBase__children",
+                    children: children
+                }),
                 !noBorder && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
                     "aria-hidden": true,
                     className: "vkuiImageBase__border"

package/dist/cjs/components/ImageBase/ImageBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles['ImageBase__img--objectFit-contain'];\n    case 'cover':\n      return styles['ImageBase__img--objectFit-cover'];\n    case 'none':\n      return styles['ImageBase__img--objectFit-none'];\n    case 'scale-down':\n      return styles['ImageBase__img--objectFit-scaleDown'];\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  style,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        style={{ width, height, ...style }}\n        baseClassName={classNames(\n          styles['ImageBase'],\n          loaded && styles['ImageBase--loaded'],\n          withTransparentBackground && styles['ImageBase--transparent-background'],\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles['ImageBase__img'],\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles['ImageBase__img--keepRatio'],\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children}\n        {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","minOr","loaded","setLoaded","React","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","handleImageLoad","event","handleImageError","imgRef","useExternRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","Clickable","baseClassName","classNames","img","ref","className","getFetchPriorityProp","div","aria-hidden","displayName","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ImageBase/ImageBase.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { minOr } from '../../lib/comparing';\nimport { getFetchPriorityProp } from '../../lib/utils';\nimport type { AnchorHTMLAttributesOnly, HasRef, HasRootRef, LiteralUnion } from '../../types';\nimport { Clickable } from '../Clickable/Clickable';\nimport { ImageBaseBadge, type ImageBaseBadgeProps } from './ImageBaseBadge/ImageBaseBadge';\nimport { ImageBaseOverlay, type ImageBaseOverlayProps } from './ImageBaseOverlay/ImageBaseOverlay';\nimport { ImageBaseContext } from './context';\nimport type { ImageBaseContextProps, ImageBaseExpectedIconProps, ImageBaseSize } from './types';\nimport { validateFallbackIcon, validateSize } from './validators';\nimport styles from './ImageBase.module.css';\n\nexport type {\n  ImageBaseSize,\n  ImageBaseExpectedIconProps,\n  ImageBaseBadgeProps,\n  ImageBaseOverlayProps,\n  ImageBaseContextProps,\n};\n\nexport {\n  getBadgeIconSizeByImageBaseSize,\n  getFallbackIconSizeByImageBaseSize,\n  getOverlayIconSizeByImageBaseSize,\n} from './helpers';\n\nexport { ImageBaseContext };\n\n/**\n * Размер по умолчанию.\n */\nconst defaultSize = 24;\n\nexport interface ImageBaseProps\n  extends React.ImgHTMLAttributes<HTMLElement>,\n    AnchorHTMLAttributesOnly,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLImageElement> {\n  /**\n   * Задаёт размер картинки.\n   *\n   * Используйте размеры заданные дизайн-системой `16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 88 | 96`.\n   *\n   * > ⚠️ Использование кастомного размера – это пограничный кейс.\n   */\n  size?: LiteralUnion<ImageBaseSize, number>;\n  /**\n   * Ширина изображения\n   */\n  widthSize?: number | string;\n  /**\n   * Высота изображения\n   */\n  heightSize?: number | string;\n  /**\n   * Отключает обводку.\n   */\n  noBorder?: boolean;\n  /**\n   * Фолбек на случай, если картинка не прогрузилась.\n   *\n   * > 📝 Нужный для `<ImageBase size={...} />` размер можно узнать из функции `getFallbackIconSizeByImageBaseSize()`.\n   *\n   * > Предпочтительней использовать иконки из `@vkontakte/icons`.\n   *\n   * > 📊️ Если вы хотите передать кастомную иконку, то следует именовать её по шаблону `Icon<size><name>`. Или же\n   * > чтобы в неё был передан параметр `width`. Тогда мы сможем выводить в консоль подсказку правильного ли размера вы\n   * > использовали иконку.\n   *\n   * > ⚠️ Может перекрывать `children`.\n   */\n  fallbackIcon?: React.ReactElement<ImageBaseExpectedIconProps>;\n  /**\n   * Отключает фон, заданный по умолчанию. Полезен для отображения картинок с прозрачностью.\n   * @since 5.10.0\n   */\n  withTransparentBackground?: boolean;\n  /**\n   * Пользовательское значения стиля object-fit\n   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)\n   */\n  objectFit?: React.CSSProperties['objectFit'];\n  /**\n   * Флаг для сохранения пропорций картинки.\n   * Для корректной работы необходимо задать размеры хотя бы одной стороны картинки\n   */\n  keepAspectRatio?: boolean;\n}\n\nconst getObjectFitClassName = (objectFit: React.CSSProperties['objectFit']) => {\n  switch (objectFit) {\n    case 'contain':\n      return styles['ImageBase__img--objectFit-contain'];\n    case 'cover':\n      return styles['ImageBase__img--objectFit-cover'];\n    case 'none':\n      return styles['ImageBase__img--objectFit-none'];\n    case 'scale-down':\n      return styles['ImageBase__img--objectFit-scaleDown'];\n  }\n  return undefined;\n};\n\nconst parsePx = (value: string): number | undefined => {\n  if (value.endsWith('px')) {\n    return parseInt(value);\n  }\n  return undefined;\n};\n\nconst sizeToNumber = (size: number | string | undefined): number | undefined => {\n  if (typeof size === 'string') {\n    return parsePx(size);\n  }\n  return size;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ImageBase\n */\nexport const ImageBase: React.FC<ImageBaseProps> & {\n  Badge: typeof ImageBaseBadge;\n  Overlay: typeof ImageBaseOverlay;\n} = ({\n  alt,\n  crossOrigin,\n  decoding,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  fetchPriority,\n  getRef,\n  size: sizeProp,\n  width: widthImg,\n  height: heightImg,\n  widthSize,\n  heightSize,\n  style,\n  noBorder = false,\n  fallbackIcon: fallbackIconProp,\n  children,\n  onLoad,\n  onError,\n  withTransparentBackground,\n  objectFit = 'cover',\n  keepAspectRatio = false,\n  ...restProps\n}: ImageBaseProps) => {\n  const size = sizeProp ?? minOr([sizeToNumber(widthSize), sizeToNumber(heightSize)], defaultSize);\n\n  const width = widthSize ?? (keepAspectRatio ? undefined : size);\n  const height = heightSize ?? (keepAspectRatio ? undefined : size);\n\n  const [loaded, setLoaded] = React.useState(false);\n  const [failed, setFailed] = React.useState(false);\n\n  const hasSrc = src || srcSet;\n  const needShowFallbackIcon = (failed || !hasSrc) && React.isValidElement(fallbackIconProp);\n\n  const fallbackIcon = needShowFallbackIcon ? fallbackIconProp : null;\n\n  if (process.env.NODE_ENV === 'development') {\n    validateSize(size);\n    if (fallbackIcon) {\n      validateFallbackIcon(size, { name: 'fallbackIcon', value: fallbackIcon });\n    }\n  }\n\n  const handleImageLoad = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    if (loaded) {\n      return;\n    }\n\n    setLoaded(true);\n    setFailed(false);\n    onLoad?.(event);\n  };\n\n  const handleImageError = (event: React.SyntheticEvent<HTMLImageElement>) => {\n    setLoaded(false);\n    setFailed(true);\n    onError?.(event);\n  };\n\n  const imgRef = useExternRef(getRef);\n  const isOnLoadStatusCheckedRef = React.useRef(false);\n  React.useEffect(\n    function dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater() {\n      if (isOnLoadStatusCheckedRef.current) {\n        return;\n      }\n      isOnLoadStatusCheckedRef.current = true;\n\n      if (imgRef.current && imgRef.current.complete && !loaded) {\n        const event = new Event('load');\n        imgRef.current.dispatchEvent(event);\n      }\n    },\n    [imgRef, loaded],\n  );\n\n  return (\n    <ImageBaseContext.Provider value={{ size }}>\n      <Clickable\n        style={{ width, height, ...style }}\n        baseClassName={classNames(\n          styles['ImageBase'],\n          loaded && styles['ImageBase--loaded'],\n          withTransparentBackground && styles['ImageBase--transparent-background'],\n        )}\n        {...restProps}\n      >\n        {hasSrc && (\n          <img\n            ref={imgRef}\n            alt={alt}\n            className={classNames(\n              styles['ImageBase__img'],\n              getObjectFitClassName(objectFit),\n              keepAspectRatio && styles['ImageBase__img--keepRatio'],\n            )}\n            crossOrigin={crossOrigin}\n            decoding={decoding}\n            loading={loading}\n            referrerPolicy={referrerPolicy}\n            style={\n              keepAspectRatio\n                ? {\n                    width: widthImg || width,\n                    height: heightImg || height,\n                  }\n                : undefined\n            }\n            sizes={sizes}\n            src={src}\n            srcSet={srcSet}\n            useMap={useMap}\n            width={widthImg}\n            height={heightImg}\n            onLoad={handleImageLoad}\n            onError={handleImageError}\n            {...getFetchPriorityProp(fetchPriority)}\n          />\n        )}\n        {fallbackIcon && <div className={styles['ImageBase__fallback']}>{fallbackIcon}</div>}\n        {children && <div className={styles['ImageBase__children']}>{children}</div>}\n        {!noBorder && <div aria-hidden className={styles['ImageBase__border']} />}\n      </Clickable>\n    </ImageBaseContext.Provider>\n  );\n};\n\nImageBase.displayName = 'ImageBase';\n\nImageBase.Badge = ImageBaseBadge;\nImageBase.Badge.displayName = 'ImageBase.Badge';\n\nImageBase.Overlay = ImageBaseOverlay;\nImageBase.Overlay.displayName = 'ImageBase.Overlay';\n"],"names":["ImageBase","ImageBaseContext","getBadgeIconSizeByImageBaseSize","getFallbackIconSizeByImageBaseSize","getOverlayIconSizeByImageBaseSize","defaultSize","getObjectFitClassName","objectFit","undefined","parsePx","value","endsWith","parseInt","sizeToNumber","size","alt","crossOrigin","decoding","loading","referrerPolicy","sizes","src","srcSet","useMap","fetchPriority","getRef","sizeProp","width","widthImg","height","heightImg","widthSize","heightSize","style","noBorder","fallbackIcon","fallbackIconProp","children","onLoad","onError","withTransparentBackground","keepAspectRatio","restProps","minOr","loaded","setLoaded","React","useState","failed","setFailed","hasSrc","needShowFallbackIcon","isValidElement","process","env","NODE_ENV","validateSize","validateFallbackIcon","name","handleImageLoad","event","handleImageError","imgRef","useExternRef","isOnLoadStatusCheckedRef","useRef","useEffect","dispatchLoadEventForAlreadyLoadedResourceIfReactInitializedLater","current","complete","Event","dispatchEvent","Provider","Clickable","baseClassName","classNames","img","ref","className","getFetchPriorityProp","div","aria-hidden","displayName","Badge","ImageBaseBadge","Overlay","ImageBaseOverlay"],"mappings":";;;;;;;;;;;IA0HaA,SAAS;eAATA;;IA9FJC,gBAAgB;eAAhBA,yBAAgB;;IALvBC,+BAA+B;eAA/BA,wCAA+B;;IAC/BC,kCAAkC;eAAlCA,2CAAkC;;IAClCC,iCAAiC;eAAjCA,0CAAiC;;;;;;;;iEAzBZ;sBACI;8BACE;2BACP;uBACe;2BAEX;gCAC+B;kCACI;yBAC5B;4BAEkB;yBAe5C;AAIP;;CAEC,GACD,MAAMC,cAAc;AA0DpB,MAAMC,wBAAwB,CAACC;IAC7B,OAAQA;QACN,KAAK;YACH;QACF,KAAK;YACH;QACF,KAAK;YACH;QACF,KAAK;YACH;IACJ;IACA,OAAOC;AACT;AAEA,MAAMC,UAAU,CAACC;IACf,IAAIA,MAAMC,QAAQ,CAAC,OAAO;QACxB,OAAOC,SAASF;IAClB;IACA,OAAOF;AACT;AAEA,MAAMK,eAAe,CAACC;IACpB,IAAI,OAAOA,SAAS,UAAU;QAC5B,OAAOL,QAAQK;IACjB;IACA,OAAOA;AACT;AAKO,MAAMd,YAGT;QAAC,EACHe,GAAG,EACHC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,cAAc,EACdC,KAAK,EACLC,GAAG,EACHC,MAAM,EACNC,MAAM,EACNC,aAAa,EACbC,MAAM,EACNX,MAAMY,QAAQ,EACdC,OAAOC,QAAQ,EACfC,QAAQC,SAAS,EACjBC,SAAS,EACTC,UAAU,EACVC,KAAK,EACLC,WAAW,KAAK,EAChBC,cAAcC,gBAAgB,EAC9BC,QAAQ,EACRC,MAAM,EACNC,OAAO,EACPC,yBAAyB,EACzBjC,YAAY,OAAO,EACnBkC,kBAAkB,KAAK,EAER,WADZC;QAzBH3B;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAX;QACAa;QACAE;QACAE;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAjC;QACAkC;;IAGA,MAAM3B,OAAOY,qBAAAA,sBAAAA,WAAYiB,IAAAA,gBAAK,EAAC;QAAC9B,aAAakB;QAAYlB,aAAamB;KAAY,EAAE3B;IAEpF,MAAMsB,QAAQI,sBAAAA,uBAAAA,YAAcU,kBAAkBjC,YAAYM;IAC1D,MAAMe,SAASG,uBAAAA,wBAAAA,aAAeS,kBAAkBjC,YAAYM;IAE5D,MAAM,CAAC8B,QAAQC,UAAU,GAAGC,OAAMC,QAAQ,CAAC;IAC3C,MAAM,CAACC,QAAQC,UAAU,GAAGH,OAAMC,QAAQ,CAAC;IAE3C,MAAMG,SAAS7B,OAAOC;IACtB,MAAM6B,uBAAuB,AAACH,CAAAA,UAAU,CAACE,MAAK,mBAAMJ,OAAMM,cAAc,CAAChB;IAEzE,MAAMD,eAAegB,uBAAuBf,mBAAmB;IAE/D,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1CC,IAAAA,wBAAY,EAAC1C;QACb,IAAIqB,cAAc;YAChBsB,IAAAA,gCAAoB,EAAC3C,MAAM;gBAAE4C,MAAM;gBAAgBhD,OAAOyB;YAAa;QACzE;IACF;IAEA,MAAMwB,kBAAkB,CAACC;QACvB,IAAIhB,QAAQ;YACV;QACF;QAEAC,UAAU;QACVI,UAAU;QACVX,mBAAAA,6BAAAA,OAASsB;IACX;IAEA,MAAMC,mBAAmB,CAACD;QACxBf,UAAU;QACVI,UAAU;QACVV,oBAAAA,8BAAAA,QAAUqB;IACZ;IAEA,MAAME,SAASC,IAAAA,0BAAY,EAACtC;IAC5B,MAAMuC,2BAA2BlB,OAAMmB,MAAM,CAAC;IAC9CnB,OAAMoB,SAAS,CACb,SAASC;QACP,IAAIH,yBAAyBI,OAAO,EAAE;YACpC;QACF;QACAJ,yBAAyBI,OAAO,GAAG;QAEnC,IAAIN,OAAOM,OAAO,IAAIN,OAAOM,OAAO,CAACC,QAAQ,IAAI,CAACzB,QAAQ;YACxD,MAAMgB,QAAQ,IAAIU,MAAM;YACxBR,OAAOM,OAAO,CAACG,aAAa,CAACX;QAC/B;IACF,GACA;QAACE;QAAQlB;KAAO;IAGlB,qBACE,qBAAC3C,yBAAgB,CAACuE,QAAQ;QAAC9D,OAAO;YAAEI;QAAK;kBACvC,cAAA,sBAAC2D,oBAAS;YACRxC,OAAO;gBAAEN;gBAAOE;eAAWI;YAC3ByC,eAAeC,IAAAA,gBAAU,mBAEvB/B,mCACAJ;WAEEE;;gBAEHQ,wBACC,qBAAC0B;oBACCC,KAAKf;oBACL/C,KAAKA;oBACL+D,WAAWH,IAAAA,gBAAU,wBAEnBrE,sBAAsBC,YACtBkC;oBAEFzB,aAAaA;oBACbC,UAAUA;oBACVC,SAASA;oBACTC,gBAAgBA;oBAChBc,OACEQ,kBACI;wBACEd,OAAOC,YAAYD;wBACnBE,QAAQC,aAAaD;oBACvB,IACArB;oBAENY,OAAOA;oBACPC,KAAKA;oBACLC,QAAQA;oBACRC,QAAQA;oBACRI,OAAOC;oBACPC,QAAQC;oBACRQ,QAAQqB;oBACRpB,SAASsB;mBACLkB,IAAAA,2BAAoB,EAACvD;gBAG5BW,8BAAgB,qBAAC6C;oBAAIF,SAAS;8BAAkC3C;;gBAChEE,0BAAY,qBAAC2C;oBAAIF,SAAS;8BAAkCzC;;gBAC5D,CAACH,0BAAY,qBAAC8C;oBAAIC,aAAW;oBAACH,SAAS;;;;;AAIhD;AAEA9E,UAAUkF,WAAW,GAAG;AAExBlF,UAAUmF,KAAK,GAAGC,8BAAc;AAChCpF,UAAUmF,KAAK,CAACD,WAAW,GAAG;AAE9BlF,UAAUqF,OAAO,GAAGC,kCAAgB;AACpCtF,UAAUqF,OAAO,CAACH,WAAW,GAAG"}

package/dist/components/CustomSelect/CustomSelect.d.ts

@@ -2,12 +2,22 @@ import * as React from 'react';
 import { type FilterFn } from '../../lib/select';
 import { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';
 import { CustomSelectDropdownProps } from '../CustomSelectDropdown/CustomSelectDropdown';
+import { type CustomSelectOptionProps } from '../CustomSelectOption/CustomSelectOption';
 import { FormFieldProps } from '../FormField/FormField';
 import { NativeSelectProps } from '../NativeSelect/NativeSelect';
 import { SelectType } from '../Select/Select';
 import { type CustomSelectClearButtonProps } from './CustomSelectClearButton';
-import type { CustomSelectOptionInterface, CustomSelectRenderOption } from './types';
-export type { CustomSelectClearButtonProps, CustomSelectOptionInterface, CustomSelectRenderOption };
+type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>['value'];
+export interface CustomSelectOptionInterface {
+    value: SelectValue;
+    label: React.ReactElement | string;
+    disabled?: boolean;
+    [index: string]: any;
+}
+export interface CustomSelectRenderOption<T extends CustomSelectOptionInterface> extends CustomSelectOptionProps {
+    option: T;
+}
+export type { CustomSelectClearButtonProps };
 export interface SelectProps<OptionInterfaceT extends CustomSelectOptionInterface = CustomSelectOptionInterface> extends NativeSelectProps, Omit<FormFieldProps, 'maxHeight'>, TrackerOptionsProps, Pick<CustomSelectDropdownProps, 'overscrollBehavior' | 'autoHideScrollbar' | 'autoHideScrollbarDelay'> {
     /**
      * ref на внутрений компонент input

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

@@ -1 +1 @@
-{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,EAEL,yBAAyB,EAC1B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,2BAA2B,CAAC;AASnC,OAAO,KAAK,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAiCrF,YAAY,EAAE,4BAA4B,EAAE,2BAA2B,EAAE,wBAAwB,EAAE,CAAC;AAEpG,MAAM,WAAW,WAAW,CAC1B,gBAAgB,SAAS,2BAA2B,GAAG,2BAA2B,CAClF,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,WAAW,CAAC,EACjC,mBAAmB,EACnB,IAAI,CACF,yBAAyB,EACzB,oBAAoB,GAAG,mBAAmB,GAAG,wBAAwB,CACtE;IACH;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAChD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,KAAK,IAAI,CAAC;IAC/C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;IAC9C,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,CAAC,gBAAgB,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,EAChB,sBAAsB,GACvB,EAAE;QACD,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAChE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;GAEG;AACH,wBAAgB,YAAY,CAAC,gBAAgB,SAAS,2BAA2B,EAC/E,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GACnC,KAAK,CAAC,SAAS,CAisBjB"}
+{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../src/components/CustomSelect/CustomSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/CustomSelect/CustomSelect.js

@@ -6,29 +6,67 @@ import * as React from 'react';
 import { classNames, debounce } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusWithin } from '../../hooks/useFocusWithin';
 import { useDOM } from '../../lib/dom';
 import { defaultFilterFn } from '../../lib/select';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { CustomSelectDropdown } from '../CustomSelectDropdown/CustomSelectDropdown';
+import { CustomSelectOption } from '../CustomSelectOption/CustomSelectOption';
 import { DropdownIcon } from '../DropdownIcon/DropdownIcon';
 import { Footnote } from '../Typography/Footnote/Footnote';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import { CustomSelectClearButton } from './CustomSelectClearButton';
 import { CustomSelectInput } from './CustomSelectInput';
-import { calculateInputValueFromOptions, defaultRenderOptionFn, findIndexAfter, findIndexBefore, findSelectedIndex } from './helpers';
 const sizeYClassNames = {
     none: "vkuiCustomSelect--sizeY-none",
     ['compact']: "vkuiCustomSelect--sizeY-compact"
 };
+const findIndexAfter = (options = [], startIndex = -1)=>{
+    if (startIndex >= options.length - 1) {
+        return -1;
+    }
+    return options.findIndex((option, i)=>i > startIndex && !option.disabled);
+};
+const findIndexBefore = (options = [], endIndex = options.length)=>{
+    let result = -1;
+    if (endIndex <= 0) {
+        return result;
+    }
+    for(let i = endIndex - 1; i >= 0; i--){
+        let option = options[i];
+        if (!option.disabled) {
+            result = i;
+            break;
+        }
+    }
+    return result;
+};
 const warn = warnOnce('CustomSelect');
 const checkOptionsValueType = (options)=>{
     if (new Set(options.map((item)=>typeof item.value)).size > 1) {
         warn('Некоторые значения ваших опций имеют разные типы. onChange всегда возвращает строковый тип.', 'error');
     }
 };
+function defaultRenderOptionFn(_param) {
+    var { option } = _param, props = _object_without_properties(_param, [
+        "option"
+    ]);
+    return /*#__PURE__*/ _jsx(CustomSelectOption, _object_spread({}, props));
+}
 const handleOptionDown = (e)=>{
     e.preventDefault();
 };
+function findSelectedIndex(options = [], value, withClear) {
+    if (withClear && value === '') {
+        return -1;
+    }
+    var _options_findIndex;
+    return (_options_findIndex = options.findIndex((item)=>{
+        value = typeof item.value === 'number' ? Number(value) : value;
+        return item.value === value;
+    })) !== null && _options_findIndex !== void 0 ? _options_findIndex : -1;
+}
 const filter = (options, inputValue, filterFn)=>{
     return typeof filterFn === 'function' ? options.filter((option)=>filterFn(inputValue, option)) : options;
 };
@@ -85,11 +123,11 @@ const filter = (options, inputValue, filterFn)=>{
     const optionsWrapperRef = React.useRef(null);
     const [focusedOptionIndex, setFocusedOptionIndex] = React.useState(-1);
     const [isControlledOutside, setIsControlledOutside] = React.useState(props.value !== undefined);
+    const [inputValue, setInputValue] = React.useState('');
     const [nativeSelectValue, setNativeSelectValue] = React.useState(()=>{
         var _props_value, _ref;
         return (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : defaultValue) !== null && _ref !== void 0 ? _ref : allowClearButton ? '' : undefined;
     });
-    const [inputValue, setInputValue] = React.useState(()=>calculateInputValueFromOptions(optionsProp, nativeSelectValue));
     const [popperPlacement, setPopperPlacement] = React.useState(popupDirection);
     const [options, setOptions] = React.useState(optionsProp);
     var _props_value;
@@ -207,6 +245,7 @@ const filter = (options, inputValue, filterFn)=>{
    *  Сброс происходит в одном из эффекте `updateOptionsAndSelectedOptionIndex()`.
    */ const close = React.useCallback(()=>{
         resetKeyboardInput();
+        setInputValue('');
         setOpened(false);
         resetFocusedOption();
         onClose === null || onClose === void 0 ? void 0 : onClose();
@@ -217,8 +256,8 @@ const filter = (options, inputValue, filterFn)=>{
     ]);
     const selectOption = React.useCallback((index)=>{
         const item = options[index];
-        close();
         setNativeSelectValue(item === null || item === void 0 ? void 0 : item.value);
+        close();
         const shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync = isControlledOutside && props.value !== nativeSelectValue && nativeSelectValue === (item === null || item === void 0 ? void 0 : item.value);
         if (shouldTriggerOnChangeWhenControlledAndInnerValueIsOutOfSync) {
             var _selectElRef_current;
@@ -262,12 +301,9 @@ const filter = (options, inputValue, filterFn)=>{
             bubbles: true
         });
         (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
-        setInputValue(calculateInputValueFromOptions(optionsProp, nativeSelectValue));
     }, [
         close,
-        selectElRef,
-        optionsProp,
-        nativeSelectValue
+        selectElRef
     ]);
     const onFocus = React.useCallback(()=>{
         var _selectElRef_current;
@@ -307,38 +343,21 @@ const filter = (options, inputValue, filterFn)=>{
         focusedOptionIndex,
         options
     ]);
-    React.useEffect(function filterOptions() {
+    React.useEffect(function updateOptionsAndSelectedOptionIndex() {
+        var _props_value, _ref;
+        const value = (_ref = (_props_value = props.value) !== null && _props_value !== void 0 ? _props_value : nativeSelectValue) !== null && _ref !== void 0 ? _ref : defaultValue;
         const options = searchable && inputValue !== undefined ? filter(optionsProp, inputValue, filterFn) : optionsProp;
         setOptions(options);
+        setSelectedOptionIndex(findSelectedIndex(options, value, allowClearButton));
     }, [
         filterFn,
         inputValue,
+        nativeSelectValue,
         optionsProp,
-        searchable
-    ]);
-    var _props_value1, _ref;
-    const selectValue = (_ref = (_props_value1 = props.value) !== null && _props_value1 !== void 0 ? _props_value1 : nativeSelectValue) !== null && _ref !== void 0 ? _ref : defaultValue;
-    React.useEffect(function updateSelectedOptionIndexOnValueChange() {
-        setSelectedOptionIndex(findSelectedIndex(options, selectValue, allowClearButton));
-    }, [
-        selectValue,
-        allowClearButton,
-        options
-    ]);
-    const prevSelectValueRef = React.useRef(selectValue);
-    React.useEffect(function updateInputValueOnSelectValueChange() {
-        if (prevSelectValueRef.current === selectValue) {
-            return;
-        }
-        setInputValue(calculateInputValueFromOptions(optionsProp, selectValue));
-    }, [
-        selectValue,
-        optionsProp
-    ]);
-    React.useEffect(function updatePrevSelectValue() {
-        prevSelectValueRef.current = selectValue;
-    }, [
-        selectValue
+        defaultValue,
+        props.value,
+        searchable,
+        allowClearButton
     ]);
     const onNativeSelectChange = (e)=>{
         const newSelectedOptionIndex = findSelectedIndex(options, e.currentTarget.value, allowClearButton);
@@ -602,12 +621,14 @@ const filter = (options, inputValue, filterFn)=>{
     const selectInputAriaProps = {
         'role': 'combobox',
         'aria-controls': popupAriaId,
+        'aria-owns': popupAriaId,
         'aria-expanded': opened,
         ['aria-activedescendant']: ariaActiveDescendantId && opened ? `${popupAriaId}-${ariaActiveDescendantId}` : undefined,
         'aria-labelledby': ariaLabelledBy,
         'aria-haspopup': 'listbox',
         'aria-autocomplete': 'none'
     };
+    const focusWithin = useFocusWithin(handleRootRef);
     return /*#__PURE__*/ _jsxs("div", {
         className: classNames("vkuiCustomSelect", sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         style: style,
@@ -615,6 +636,10 @@ const filter = (options, inputValue, filterFn)=>{
         onClick: passClickAndFocusToInputOnClick,
         onMouseDown: preventInputBlurWhenClickInsideFocusedSelectArea,
         children: [
+            focusWithin && selected && !opened && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                "aria-live": "polite",
+                children: selected.label
+            }),
             /*#__PURE__*/ _jsx(CustomSelectInput, _object_spread_props(_object_spread({
                 autoComplete: "off",
                 autoCapitalize: "none",
@@ -625,7 +650,7 @@ const filter = (options, inputValue, filterFn)=>{
                 onFocus: onFocus,
                 onBlur: onBlur,
                 className: openedClassNames,
-                searchable: searchable,
+                readOnly: !searchable,
                 fetching: fetching,
                 value: inputValue,
                 onKeyUp: handleKeyUp,
@@ -635,7 +660,7 @@ const filter = (options, inputValue, filterFn)=>{
                 before: before,
                 after: afterIcons,
                 selectType: selectType,
-                selectedOptionLabel: selected === null || selected === void 0 ? void 0 : selected.label
+                children: selected === null || selected === void 0 ? void 0 : selected.label
             })),
             /*#__PURE__*/ _jsxs("select", {
                 ref: selectElRef,