@vkontakte/vkui 6.5.3 → 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/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,CAosBjB"}
+{"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;
 };
@@ -83,14 +121,13 @@ const filter = (options, inputValue, filterFn)=>{
     const scrollBoxRef = React.useRef(null);
     const selectElRef = useExternRef(getRef);
     const optionsWrapperRef = React.useRef(null);
-    const selectInputRef = useExternRef(getSelectInputRef);
     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;
@@ -208,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();
@@ -218,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;
@@ -263,23 +301,18 @@ 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, _selectInputRef_current;
+        var _selectElRef_current;
         const event = new Event('focusin', {
             bubbles: true
         });
         (_selectElRef_current = selectElRef.current) === null || _selectElRef_current === void 0 ? void 0 : _selectElRef_current.dispatchEvent(event);
-        (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.select();
     }, [
-        selectElRef,
-        selectInputRef
+        selectElRef
     ]);
     const onClick = React.useCallback(()=>{
         if (opened) {
@@ -310,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);
@@ -506,6 +522,7 @@ const filter = (options, inputValue, filterFn)=>{
         renderDropdown,
         renderOption
     ]);
+    const selectInputRef = useExternRef(getSelectInputRef);
     const focusOnInputTimerRef = React.useRef();
     const focusOnInput = React.useCallback(()=>{
         clearTimeout(focusOnInputTimerRef.current);
@@ -591,14 +608,11 @@ const filter = (options, inputValue, filterFn)=>{
         selectInputRef
     ]);
     const preventInputBlurWhenClickInsideFocusedSelectArea = (e)=>{
-        var _selectInputRef_current;
         // Так как инпут больше не оборачивается пустым лэйблом, то клик внутри обертки,
         // но вне инпута (например по иконке дропдауна), будет убирать фокус с инпута.
         // Чтобы в такой ситуации отключить blur инпута мы превентим mousedown событие обёртки
         const isInputFocused = document && document.activeElement === selectInputRef.current;
-        const clickTarget = e.target;
-        const inputClicked = (_selectInputRef_current = selectInputRef.current) === null || _selectInputRef_current === void 0 ? void 0 : _selectInputRef_current.contains(clickTarget);
-        if (isInputFocused && !inputClicked) {
+        if (isInputFocused) {
             e.preventDefault();
         }
     };
@@ -607,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,
@@ -620,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",
@@ -630,7 +650,7 @@ const filter = (options, inputValue, filterFn)=>{
                 onFocus: onFocus,
                 onBlur: onBlur,
                 className: openedClassNames,
-                searchable: searchable,
+                readOnly: !searchable,
                 fetching: fetching,
                 value: inputValue,
                 onKeyUp: handleKeyUp,
@@ -640,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,