@vkontakte/vkui 6.0.3 → 6.1.0

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -23,7 +24,7 @@ const sizeYClassNames = {
     const showLabelOrPlaceholder = !Boolean(restProps.value);
     const handleRootRef = useExternRef(getRootRef);
     const focusWithin = useFocusWithin(handleRootRef);
-    const input = /*#__PURE__*/ React.createElement(Text, {
+    const input = /*#__PURE__*/ _jsx(Text, {
         type: "text",
         ...restProps,
         disabled: disabled && !fetching,
@@ -35,7 +36,7 @@ const sizeYClassNames = {
         placeholder: children ? '' : placeholder
     });
     const platform = usePlatform();
-    return /*#__PURE__*/ React.createElement(FormField, {
+    return /*#__PURE__*/ _jsx(FormField, {
         Component: "div",
         style: style,
         className: classNames(styles['CustomSelectInput'], align === 'right' && styles['CustomSelectInput--align-right'], align === 'center' && styles['CustomSelectInput--align-center'], !children && styles['CustomSelectInput--empty'], multiline && styles['CustomSelectInput--multiline'], sizeY !== 'regular' && sizeYClassNames[sizeY], before && styles['CustomSelectInput--hasBefore'], after && styles['CustomSelectInput--hasAfter'], className),
@@ -44,18 +45,27 @@ const sizeYClassNames = {
         after: after,
         disabled: disabled,
         mode: getFormFieldModeFromSelectType(selectType),
-        status: status
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['CustomSelectInput__input-group']
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['CustomSelectInput__container'], className),
-        tabIndex: -1,
-        "aria-hidden": true,
-        "data-testid": labelTextTestId
-    }, /*#__PURE__*/ React.createElement(SelectTypography, {
-        selectType: selectType,
-        className: styles['CustomSelectInput__title']
-    }, showLabelOrPlaceholder && title)), restProps.readOnly && platform === 'ios' ? /*#__PURE__*/ React.createElement(VisuallyHidden, null, input) : input));
+        status: status,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: styles['CustomSelectInput__input-group'],
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: classNames(styles['CustomSelectInput__container'], className),
+                    tabIndex: -1,
+                    "aria-hidden": true,
+                    "data-testid": labelTextTestId,
+                    children: /*#__PURE__*/ _jsx(SelectTypography, {
+                        selectType: selectType,
+                        className: styles['CustomSelectInput__title'],
+                        children: showLabelOrPlaceholder && title
+                    })
+                }),
+                restProps.readOnly && platform === 'ios' ? /*#__PURE__*/ _jsx(VisuallyHidden, {
+                    children: input
+                }) : input
+            ]
+        })
+    });
 };
 
 //# sourceMappingURL=CustomSelectInput.js.map

package/dist/cssm/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 { 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'> {\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) => {\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":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","usePlatform","getFormFieldModeFromSelectType","FormField","SelectTypography","Text","VisuallyHidden","styles","sizeYClassNames","none","compact","CustomSelectInput","align","getRef","className","getRootRef","style","before","after","status","children","placeholder","selectType","multiline","disabled","fetching","labelTextTestId","restProps","sizeY","title","showLabelOrPlaceholder","Boolean","value","handleRootRef","focusWithin","input","type","readOnly","Component","normalize","platform","mode","div","tabIndex","aria-hidden","data-testid"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,gCAAgC;IAC7CG,SAASH,MAAM,CAAC,mCAAmC;AACrD;AAcA;;;CAGC,GACD,OAAO,MAAMI,oBAAoB,CAAC,EAChCC,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,EACf,GAAGC,WACoB;IACvB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG9B;IAE3B,MAAM+B,QAAQT,YAAYC;IAC1B,MAAMS,yBAAyB,CAACC,QAAQJ,UAAUK,KAAK;IAEvD,MAAMC,gBAAgBlC,aAAagB;IACnC,MAAMmB,cAAclC,eAAeiC;IAEnC,MAAME,sBACJ,oBAAC9B;QACC+B,MAAK;QACJ,GAAGT,SAAS;QACbH,UAAUA,YAAY,CAACC;QACvBY,UAAUV,UAAUU,QAAQ,IAAKb,YAAYC;QAC7Ca,WAAU;QACVC,WAAW;QACXzB,WAAWjB,WACTU,MAAM,CAAC,wBAAwB,EAC/B,AAACoB,CAAAA,UAAUU,QAAQ,IAAKP,0BAA0B,CAACI,WAAW,KAC5D3B,MAAM,CAAC,wCAAwC;QAEnDQ,YAAYF;QACZQ,aAAaD,WAAW,KAAKC;;IAIjC,MAAMmB,WAAWvC;IACjB,qBACE,oBAACE;QACCmC,WAAU;QACVtB,OAAOA;QACPF,WAAWjB,WACTU,MAAM,CAAC,oBAAoB,EAC3BK,UAAU,WAAWL,MAAM,CAAC,iCAAiC,EAC7DK,UAAU,YAAYL,MAAM,CAAC,kCAAkC,EAC/D,CAACa,YAAYb,MAAM,CAAC,2BAA2B,EAC/CgB,aAAahB,MAAM,CAAC,+BAA+B,EACnDqB,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CX,UAAUV,MAAM,CAAC,+BAA+B,EAChDW,SAASX,MAAM,CAAC,8BAA8B,EAC9CO;QAEFC,YAAYkB;QACZhB,QAAQA;QACRC,OAAOA;QACPM,UAAUA;QACViB,MAAMvC,+BAA+BoB;QACrCH,QAAQA;qBAER,oBAACuB;QAAI5B,WAAWP,MAAM,CAAC,iCAAiC;qBACtD,oBAACmC;QACC5B,WAAWjB,WAAWU,MAAM,CAAC,+BAA+B,EAAEO;QAC9D6B,UAAU,CAAC;QACXC,eAAAA;QACAC,eAAanB;qBAEb,oBAACtB;QAAiBkB,YAAYA;QAAYR,WAAWP,MAAM,CAAC,2BAA2B;OACpFuB,0BAA0BD,SAY9BF,UAAUU,QAAQ,IAAIG,aAAa,sBAClC,oBAAClC,sBAAgB6B,SAEjBA;AAKV,EAAE"}
+{"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'> {\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) => {\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":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","usePlatform","getFormFieldModeFromSelectType","FormField","SelectTypography","Text","VisuallyHidden","styles","sizeYClassNames","none","compact","CustomSelectInput","align","getRef","className","getRootRef","style","before","after","status","children","placeholder","selectType","multiline","disabled","fetching","labelTextTestId","restProps","sizeY","title","showLabelOrPlaceholder","Boolean","value","handleRootRef","focusWithin","input","type","readOnly","Component","normalize","platform","mode","div","tabIndex","aria-hidden","data-testid"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,8BAA8B,QAAQ,mBAAmB;AAElE,SAASC,SAAS,QAAwB,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,uCAAuC;AACxE,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,gCAAgC;IAC7CG,SAASH,MAAM,CAAC,mCAAmC;AACrD;AAcA;;;CAGC,GACD,OAAO,MAAMI,oBAAoB,CAAC,EAChCC,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,EACf,GAAGC,WACoB;IACvB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG9B;IAE3B,MAAM+B,QAAQT,YAAYC;IAC1B,MAAMS,yBAAyB,CAACC,QAAQJ,UAAUK,KAAK;IAEvD,MAAMC,gBAAgBlC,aAAagB;IACnC,MAAMmB,cAAclC,eAAeiC;IAEnC,MAAME,sBACJ,KAAC9B;QACC+B,MAAK;QACJ,GAAGT,SAAS;QACbH,UAAUA,YAAY,CAACC;QACvBY,UAAUV,UAAUU,QAAQ,IAAKb,YAAYC;QAC7Ca,WAAU;QACVC,WAAW;QACXzB,WAAWjB,WACTU,MAAM,CAAC,wBAAwB,EAC/B,AAACoB,CAAAA,UAAUU,QAAQ,IAAKP,0BAA0B,CAACI,WAAW,KAC5D3B,MAAM,CAAC,wCAAwC;QAEnDQ,YAAYF;QACZQ,aAAaD,WAAW,KAAKC;;IAIjC,MAAMmB,WAAWvC;IACjB,qBACE,KAACE;QACCmC,WAAU;QACVtB,OAAOA;QACPF,WAAWjB,WACTU,MAAM,CAAC,oBAAoB,EAC3BK,UAAU,WAAWL,MAAM,CAAC,iCAAiC,EAC7DK,UAAU,YAAYL,MAAM,CAAC,kCAAkC,EAC/D,CAACa,YAAYb,MAAM,CAAC,2BAA2B,EAC/CgB,aAAahB,MAAM,CAAC,+BAA+B,EACnDqB,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CX,UAAUV,MAAM,CAAC,+BAA+B,EAChDW,SAASX,MAAM,CAAC,8BAA8B,EAC9CO;QAEFC,YAAYkB;QACZhB,QAAQA;QACRC,OAAOA;QACPM,UAAUA;QACViB,MAAMvC,+BAA+BoB;QACrCH,QAAQA;kBAER,cAAA,MAACuB;YAAI5B,WAAWP,MAAM,CAAC,iCAAiC;;8BACtD,KAACmC;oBACC5B,WAAWjB,WAAWU,MAAM,CAAC,+BAA+B,EAAEO;oBAC9D6B,UAAU,CAAC;oBACXC,aAAW;oBACXC,eAAanB;8BAEb,cAAA,KAACtB;wBAAiBkB,YAAYA;wBAAYR,WAAWP,MAAM,CAAC,2BAA2B;kCACpFuB,0BAA0BD;;;gBAY9BF,UAAUU,QAAQ,IAAIG,aAAa,sBAClC,KAAClC;8BAAgB6B;qBAEjBA;;;;AAKV,EAAE"}

package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts

@@ -19,5 +19,5 @@ export interface CustomSelectDropdownProps extends HTMLAttributesWithRootRef<HTM
      */
     noMaxHeight?: boolean;
 }
-export declare const CustomSelectDropdown: ({ children, targetRef, scrollBoxRef, placement, fetching, onPlacementChange: parentOnPlacementChange, offsetDistance, autoWidth, forcePortal, autoHideScrollbar, autoHideScrollbarDelay, className, noMaxHeight, ...restProps }: CustomSelectDropdownProps) => React.JSX.Element;
+export declare const CustomSelectDropdown: ({ children, targetRef, scrollBoxRef, placement, fetching, onPlacementChange: parentOnPlacementChange, offsetDistance, autoWidth, forcePortal, autoHideScrollbar, autoHideScrollbarDelay, className, noMaxHeight, ...restProps }: CustomSelectDropdownProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CustomSelectDropdown.d.ts.map

package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomSelectDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAK/E,MAAM,WAAW,yBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,mBAAmB;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAID,eAAO,MAAM,oBAAoB,oOAe9B,yBAAyB,sBAoD3B,CAAC"}
+{"version":3,"file":"CustomSelectDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAExD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAK/E,MAAM,WAAW,yBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,mBAAmB;IACrB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAID,eAAO,MAAM,oBAAoB,oOAe9B,yBAAyB,4CAoD3B,CAAC"}

package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { CustomScrollView } from '../CustomScrollView/CustomScrollView';
@@ -15,7 +16,7 @@ export const CustomSelectDropdown = ({ children, targetRef, scrollBoxRef, placem
     }, [
         parentOnPlacementChange
     ]);
-    return /*#__PURE__*/ React.createElement(Popper, {
+    return /*#__PURE__*/ _jsx(Popper, {
         targetRef: targetRef,
         offsetByMainAxis: offsetDistance,
         sameWidth: !autoWidth,
@@ -24,17 +25,20 @@ export const CustomSelectDropdown = ({ children, targetRef, scrollBoxRef, placem
         className: classNames(styles['CustomSelectDropdown'], 'vkuiInternalCustomSelectDropdown', offsetDistance === 0 && (isTop ? styles['CustomSelectDropdown--top'] : styles['CustomSelectDropdown--bottom']), autoWidth && classNames(styles['CustomSelectDropdown--wide'], 'vkuiInternalCustomSelectDropdown--wide'), className),
         usePortal: forcePortal,
         autoUpdateOnTargetResize: true,
-        ...restProps
-    }, /*#__PURE__*/ React.createElement(CustomScrollView, {
-        boxRef: scrollBoxRef,
-        className: noMaxHeight ? undefined : styles['CustomSelectDropdown__in--withMaxHeight'],
-        autoHideScrollbar: autoHideScrollbar,
-        autoHideScrollbarDelay: autoHideScrollbarDelay
-    }, fetching ? /*#__PURE__*/ React.createElement("div", {
-        className: styles['CustomSelectDropdown__fetching']
-    }, /*#__PURE__*/ React.createElement(Spinner, {
-        size: "small"
-    })) : children));
+        ...restProps,
+        children: /*#__PURE__*/ _jsx(CustomScrollView, {
+            boxRef: scrollBoxRef,
+            className: noMaxHeight ? undefined : styles['CustomSelectDropdown__in--withMaxHeight'],
+            autoHideScrollbar: autoHideScrollbar,
+            autoHideScrollbarDelay: autoHideScrollbarDelay,
+            children: fetching ? /*#__PURE__*/ _jsx("div", {
+                className: styles['CustomSelectDropdown__fetching'],
+                children: /*#__PURE__*/ _jsx(Spinner, {
+                    size: "small"
+                })
+            }) : children
+        })
+    });
 };
 
 //# sourceMappingURL=CustomSelectDropdown.js.map

package/dist/cssm/components/CustomSelectDropdown/CustomSelectDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CustomScrollView } from '../CustomScrollView/CustomScrollView';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { Popper } from '../Popper/Popper';\nimport { Spinner } from '../Spinner/Spinner';\nimport styles from './CustomSelectDropdown.module.css';\n\nexport interface CustomSelectDropdownProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  targetRef: React.RefObject<HTMLElement>;\n  placement?: Placement;\n  scrollBoxRef?: React.Ref<HTMLDivElement>;\n  fetching?: boolean;\n  offsetDistance?: number;\n  /**\n   * Ширина раскрывающегося списка зависит от контента\n   */\n  autoWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (placement: Placement) => void;\n  /**\n   * Отключает максимальную высоту по умолчанию\n   */\n  noMaxHeight?: boolean;\n}\n\nconst calcIsTop = (placement: Placement) => placement.startsWith('top');\n\nexport const CustomSelectDropdown = ({\n  children,\n  targetRef,\n  scrollBoxRef,\n  placement = 'bottom',\n  fetching,\n  onPlacementChange: parentOnPlacementChange,\n  offsetDistance = 0,\n  autoWidth = false,\n  forcePortal = true,\n  autoHideScrollbar,\n  autoHideScrollbarDelay,\n  className,\n  noMaxHeight = false,\n  ...restProps\n}: CustomSelectDropdownProps) => {\n  const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));\n\n  const onPlacementChange = React.useCallback(\n    (placement: Placement) => {\n      setIsTop(calcIsTop(placement));\n      if (parentOnPlacementChange) {\n        parentOnPlacementChange(placement);\n      }\n    },\n    [parentOnPlacementChange],\n  );\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetByMainAxis={offsetDistance}\n      sameWidth={!autoWidth}\n      onPlacementChange={onPlacementChange}\n      placement={placement}\n      className={classNames(\n        styles['CustomSelectDropdown'],\n        'vkuiInternalCustomSelectDropdown',\n        offsetDistance === 0 &&\n          (isTop ? styles['CustomSelectDropdown--top'] : styles['CustomSelectDropdown--bottom']),\n        autoWidth &&\n          classNames(\n            styles['CustomSelectDropdown--wide'],\n            'vkuiInternalCustomSelectDropdown--wide',\n          ),\n        className,\n      )}\n      usePortal={forcePortal}\n      autoUpdateOnTargetResize\n      {...restProps}\n    >\n      <CustomScrollView\n        boxRef={scrollBoxRef}\n        className={noMaxHeight ? undefined : styles['CustomSelectDropdown__in--withMaxHeight']}\n        autoHideScrollbar={autoHideScrollbar}\n        autoHideScrollbarDelay={autoHideScrollbarDelay}\n      >\n        {fetching ? (\n          <div className={styles['CustomSelectDropdown__fetching']}>\n            <Spinner size=\"small\" />\n          </div>\n        ) : (\n          children\n        )}\n      </CustomScrollView>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","CustomScrollView","Popper","Spinner","styles","calcIsTop","placement","startsWith","CustomSelectDropdown","children","targetRef","scrollBoxRef","fetching","onPlacementChange","parentOnPlacementChange","offsetDistance","autoWidth","forcePortal","autoHideScrollbar","autoHideScrollbarDelay","className","noMaxHeight","restProps","isTop","setIsTop","useState","useCallback","offsetByMainAxis","sameWidth","usePortal","autoUpdateOnTargetResize","boxRef","undefined","div","size"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,gBAAgB,QAAQ,uCAAuC;AAExE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,OAAOC,YAAY,oCAAoC;AAsBvD,MAAMC,YAAY,CAACC,YAAyBA,UAAUC,UAAU,CAAC;AAEjE,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZL,YAAY,QAAQ,EACpBM,QAAQ,EACRC,mBAAmBC,uBAAuB,EAC1CC,iBAAiB,CAAC,EAClBC,YAAY,KAAK,EACjBC,cAAc,IAAI,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,SAAS,EACTC,cAAc,KAAK,EACnB,GAAGC,WACuB;IAC1B,MAAM,CAACC,OAAOC,SAAS,GAAGzB,MAAM0B,QAAQ,CAAC,IAAMpB,UAAUC;IAEzD,MAAMO,oBAAoBd,MAAM2B,WAAW,CACzC,CAACpB;QACCkB,SAASnB,UAAUC;QACnB,IAAIQ,yBAAyB;YAC3BA,wBAAwBR;QAC1B;IACF,GACA;QAACQ;KAAwB;IAG3B,qBACE,oBAACZ;QACCQ,WAAWA;QACXiB,kBAAkBZ;QAClBa,WAAW,CAACZ;QACZH,mBAAmBA;QACnBP,WAAWA;QACXc,WAAWpB,WACTI,MAAM,CAAC,uBAAuB,EAC9B,oCACAW,mBAAmB,KAChBQ,CAAAA,QAAQnB,MAAM,CAAC,4BAA4B,GAAGA,MAAM,CAAC,+BAA+B,AAAD,GACtFY,aACEhB,WACEI,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB;QAEFS,WAAWZ;QACXa,0BAAAA;QACC,GAAGR,SAAS;qBAEb,oBAACrB;QACC8B,QAAQpB;QACRS,WAAWC,cAAcW,YAAY5B,MAAM,CAAC,0CAA0C;QACtFc,mBAAmBA;QACnBC,wBAAwBA;OAEvBP,yBACC,oBAACqB;QAAIb,WAAWhB,MAAM,CAAC,iCAAiC;qBACtD,oBAACD;QAAQ+B,MAAK;UAGhBzB;AAKV,EAAE"}
+{"version":3,"sources":["../../../../src/components/CustomSelectDropdown/CustomSelectDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CustomScrollView } from '../CustomScrollView/CustomScrollView';\nimport { TrackerOptionsProps } from '../CustomScrollView/useTrackerVisibility';\nimport { Popper } from '../Popper/Popper';\nimport { Spinner } from '../Spinner/Spinner';\nimport styles from './CustomSelectDropdown.module.css';\n\nexport interface CustomSelectDropdownProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  targetRef: React.RefObject<HTMLElement>;\n  placement?: Placement;\n  scrollBoxRef?: React.Ref<HTMLDivElement>;\n  fetching?: boolean;\n  offsetDistance?: number;\n  /**\n   * Ширина раскрывающегося списка зависит от контента\n   */\n  autoWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (placement: Placement) => void;\n  /**\n   * Отключает максимальную высоту по умолчанию\n   */\n  noMaxHeight?: boolean;\n}\n\nconst calcIsTop = (placement: Placement) => placement.startsWith('top');\n\nexport const CustomSelectDropdown = ({\n  children,\n  targetRef,\n  scrollBoxRef,\n  placement = 'bottom',\n  fetching,\n  onPlacementChange: parentOnPlacementChange,\n  offsetDistance = 0,\n  autoWidth = false,\n  forcePortal = true,\n  autoHideScrollbar,\n  autoHideScrollbarDelay,\n  className,\n  noMaxHeight = false,\n  ...restProps\n}: CustomSelectDropdownProps) => {\n  const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));\n\n  const onPlacementChange = React.useCallback(\n    (placement: Placement) => {\n      setIsTop(calcIsTop(placement));\n      if (parentOnPlacementChange) {\n        parentOnPlacementChange(placement);\n      }\n    },\n    [parentOnPlacementChange],\n  );\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetByMainAxis={offsetDistance}\n      sameWidth={!autoWidth}\n      onPlacementChange={onPlacementChange}\n      placement={placement}\n      className={classNames(\n        styles['CustomSelectDropdown'],\n        'vkuiInternalCustomSelectDropdown',\n        offsetDistance === 0 &&\n          (isTop ? styles['CustomSelectDropdown--top'] : styles['CustomSelectDropdown--bottom']),\n        autoWidth &&\n          classNames(\n            styles['CustomSelectDropdown--wide'],\n            'vkuiInternalCustomSelectDropdown--wide',\n          ),\n        className,\n      )}\n      usePortal={forcePortal}\n      autoUpdateOnTargetResize\n      {...restProps}\n    >\n      <CustomScrollView\n        boxRef={scrollBoxRef}\n        className={noMaxHeight ? undefined : styles['CustomSelectDropdown__in--withMaxHeight']}\n        autoHideScrollbar={autoHideScrollbar}\n        autoHideScrollbarDelay={autoHideScrollbarDelay}\n      >\n        {fetching ? (\n          <div className={styles['CustomSelectDropdown__fetching']}>\n            <Spinner size=\"small\" />\n          </div>\n        ) : (\n          children\n        )}\n      </CustomScrollView>\n    </Popper>\n  );\n};\n"],"names":["React","classNames","CustomScrollView","Popper","Spinner","styles","calcIsTop","placement","startsWith","CustomSelectDropdown","children","targetRef","scrollBoxRef","fetching","onPlacementChange","parentOnPlacementChange","offsetDistance","autoWidth","forcePortal","autoHideScrollbar","autoHideScrollbarDelay","className","noMaxHeight","restProps","isTop","setIsTop","useState","useCallback","offsetByMainAxis","sameWidth","usePortal","autoUpdateOnTargetResize","boxRef","undefined","div","size"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAG7C,SAASC,gBAAgB,QAAQ,uCAAuC;AAExE,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,OAAO,QAAQ,qBAAqB;AAC7C,OAAOC,YAAY,oCAAoC;AAsBvD,MAAMC,YAAY,CAACC,YAAyBA,UAAUC,UAAU,CAAC;AAEjE,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZL,YAAY,QAAQ,EACpBM,QAAQ,EACRC,mBAAmBC,uBAAuB,EAC1CC,iBAAiB,CAAC,EAClBC,YAAY,KAAK,EACjBC,cAAc,IAAI,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,SAAS,EACTC,cAAc,KAAK,EACnB,GAAGC,WACuB;IAC1B,MAAM,CAACC,OAAOC,SAAS,GAAGzB,MAAM0B,QAAQ,CAAC,IAAMpB,UAAUC;IAEzD,MAAMO,oBAAoBd,MAAM2B,WAAW,CACzC,CAACpB;QACCkB,SAASnB,UAAUC;QACnB,IAAIQ,yBAAyB;YAC3BA,wBAAwBR;QAC1B;IACF,GACA;QAACQ;KAAwB;IAG3B,qBACE,KAACZ;QACCQ,WAAWA;QACXiB,kBAAkBZ;QAClBa,WAAW,CAACZ;QACZH,mBAAmBA;QACnBP,WAAWA;QACXc,WAAWpB,WACTI,MAAM,CAAC,uBAAuB,EAC9B,oCACAW,mBAAmB,KAChBQ,CAAAA,QAAQnB,MAAM,CAAC,4BAA4B,GAAGA,MAAM,CAAC,+BAA+B,AAAD,GACtFY,aACEhB,WACEI,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB;QAEFS,WAAWZ;QACXa,wBAAwB;QACvB,GAAGR,SAAS;kBAEb,cAAA,KAACrB;YACC8B,QAAQpB;YACRS,WAAWC,cAAcW,YAAY5B,MAAM,CAAC,0CAA0C;YACtFc,mBAAmBA;YACnBC,wBAAwBA;sBAEvBP,yBACC,KAACqB;gBAAIb,WAAWhB,MAAM,CAAC,iCAAiC;0BACtD,cAAA,KAACD;oBAAQ+B,MAAK;;iBAGhBzB;;;AAKV,EAAE"}

package/dist/cssm/components/CustomSelectOption/CustomSelectOption.d.ts

@@ -43,5 +43,5 @@ export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLD
 /**
  * @see https://vkcom.github.io/VKUI/#/CustomSelectOption
  */
-export declare const CustomSelectOption: ({ children, hierarchy, hovered: hoveredProp, selected, before, after, description, disabled, style: styleProp, className, onClick, ...restProps }: CustomSelectOptionProps) => React.JSX.Element;
+export declare const CustomSelectOption: ({ children, hierarchy, hovered: hoveredProp, selected, before, after, description, disabled, style: styleProp, className, onClick, ...restProps }: CustomSelectOptionProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CustomSelectOption.d.ts.map

package/dist/cssm/components/CustomSelectOption/CustomSelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomSelectOption.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAWxD,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,sJAa5B,uBAAuB,sBAiDzB,CAAC"}
+{"version":3,"file":"CustomSelectOption.d.ts","sourceRoot":"","sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAWxD,MAAM,WAAW,uBAAwB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,sJAa5B,uBAAuB,4CAiDzB,CAAC"}

package/dist/cssm/components/CustomSelectOption/CustomSelectOption.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon16Done } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
@@ -22,7 +23,7 @@ const sizeYClassNames = {
         styleProp
     ]);
     const hovered = hoveredProp && !disabled ? true : false;
-    return /*#__PURE__*/ React.createElement(Paragraph, {
+    return /*#__PURE__*/ _jsxs(Paragraph, {
         ...restProps,
         onClick: disabled ? undefined : onClick,
         Component: "div",
@@ -31,20 +32,43 @@ const sizeYClassNames = {
         "aria-selected": selected,
         "data-hovered": hovered,
         className: classNames(styles['CustomSelectOption'], sizeY !== 'compact' && sizeYClassNames[sizeY], hovered && styles['CustomSelectOption--hover'], disabled && styles['CustomSelectOption--disabled'], hierarchy > 0 && styles['CustomSelectOption--hierarchy'], className),
-        style: style
-    }, hasReactNode(before) && /*#__PURE__*/ React.createElement("div", {
-        className: styles['CustomSelectOption__before']
-    }, before), /*#__PURE__*/ React.createElement("div", {
-        className: styles['CustomSelectOption__main']
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: styles['CustomSelectOption__children']
-    }, children), hasReactNode(description) && /*#__PURE__*/ React.createElement(Footnote, {
-        className: styles['CustomSelectOption__description']
-    }, /*#__PURE__*/ React.createElement(VisuallyHidden, null, " "), description)), /*#__PURE__*/ React.createElement("div", {
-        className: styles['CustomSelectOption__after']
-    }, hasReactNode(after) && /*#__PURE__*/ React.createElement("div", null, after), selected && /*#__PURE__*/ React.createElement(Icon16Done, {
-        className: styles['CustomSelectOption__selectedIcon']
-    })));
+        style: style,
+        children: [
+            hasReactNode(before) && /*#__PURE__*/ _jsx("div", {
+                className: styles['CustomSelectOption__before'],
+                children: before
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles['CustomSelectOption__main'],
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: styles['CustomSelectOption__children'],
+                        children: children
+                    }),
+                    hasReactNode(description) && /*#__PURE__*/ _jsxs(Footnote, {
+                        className: styles['CustomSelectOption__description'],
+                        children: [
+                            /*#__PURE__*/ _jsx(VisuallyHidden, {
+                                children: " "
+                            }),
+                            description
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: styles['CustomSelectOption__after'],
+                children: [
+                    hasReactNode(after) && /*#__PURE__*/ _jsx("div", {
+                        children: after
+                    }),
+                    selected && /*#__PURE__*/ _jsx(Icon16Done, {
+                        className: styles['CustomSelectOption__selectedIcon']
+                    })
+                ]
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=CustomSelectOption.js.map

package/dist/cssm/components/CustomSelectOption/CustomSelectOption.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectOption--sizeY-none'],\n  ['regular']: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Добавляет описание под основным блоком.\n   */\n  description?: React.ReactNode;\n  /**\n   * Вставляет элемент в начало блока перед основным контентом.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вставляет элемент в конец блока после основного контента.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  after?: React.ReactNode;\n  /**\n   * Позволяет создавать вложенность.\n   */\n  hierarchy?: number;\n  /**\n   * Включает состояние выбранного элемента списка.\n   */\n  selected?: boolean;\n  /**\n   * Включает состояние наведения.\n   */\n  hovered?: boolean;\n  /**\n   * Включает состояние фокуса.\n   */\n  focused?: boolean;\n  /**\n   * Блокирует весь блок.\n   *\n   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.\n   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии\n   * опции.\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered: hoveredProp,\n  selected,\n  before,\n  after,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  onClick,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const style = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n            ...styleProp,\n          }\n        : styleProp,\n    [hierarchy, styleProp],\n  );\n  const hovered = hoveredProp && !disabled ? true : false;\n\n  return (\n    <Paragraph\n      {...restProps}\n      onClick={disabled ? undefined : onClick}\n      Component=\"div\"\n      role=\"option\"\n      aria-disabled={disabled}\n      aria-selected={selected}\n      data-hovered={hovered}\n      className={classNames(\n        styles['CustomSelectOption'],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        hovered && styles['CustomSelectOption--hover'],\n        disabled && styles['CustomSelectOption--disabled'],\n        hierarchy > 0 && styles['CustomSelectOption--hierarchy'],\n        className,\n      )}\n      style={style}\n    >\n      {hasReactNode(before) && <div className={styles['CustomSelectOption__before']}>{before}</div>}\n      <div className={styles['CustomSelectOption__main']}>\n        <div className={styles['CustomSelectOption__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['CustomSelectOption__description']}>\n            <VisuallyHidden>&nbsp;</VisuallyHidden>\n            {description}\n          </Footnote>\n        )}\n      </div>\n      <div className={styles['CustomSelectOption__after']}>\n        {hasReactNode(after) && <div>{after}</div>}\n        {selected && <Icon16Done className={styles['CustomSelectOption__selectedIcon']} />}\n      </div>\n    </Paragraph>\n  );\n};\n"],"names":["React","Icon16Done","classNames","hasReactNode","useAdaptivity","Footnote","Paragraph","VisuallyHidden","styles","sizeYClassNames","none","CustomSelectOption","children","hierarchy","hovered","hoveredProp","selected","before","after","description","disabled","style","styleProp","className","onClick","restProps","sizeY","useMemo","undefined","Component","role","aria-disabled","aria-selected","data-hovered","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAAC,UAAU,EAAEA,MAAM,CAAC,oCAAoC;AAC1D;AA2CA;;CAEC,GACD,OAAO,MAAMG,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,SAASC,WAAW,EACpBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGtB;IAC3B,MAAMiB,QAAQrB,MAAM2B,OAAO,CACzB,IACEd,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,WACN;QAACT;QAAWS;KAAU;IAExB,MAAMR,UAAUC,eAAe,CAACK,WAAW,OAAO;IAElD,qBACE,oBAACd;QACE,GAAGmB,SAAS;QACbD,SAASJ,WAAWQ,YAAYJ;QAChCK,WAAU;QACVC,MAAK;QACLC,iBAAeX;QACfY,iBAAehB;QACfiB,gBAAcnB;QACdS,WAAWrB,WACTM,MAAM,CAAC,qBAAqB,EAC5BkB,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CZ,WAAWN,MAAM,CAAC,4BAA4B,EAC9CY,YAAYZ,MAAM,CAAC,+BAA+B,EAClDK,YAAY,KAAKL,MAAM,CAAC,gCAAgC,EACxDe;QAEFF,OAAOA;OAENlB,aAAac,yBAAW,oBAACiB;QAAIX,WAAWf,MAAM,CAAC,6BAA6B;OAAGS,uBAChF,oBAACiB;QAAIX,WAAWf,MAAM,CAAC,2BAA2B;qBAChD,oBAAC0B;QAAIX,WAAWf,MAAM,CAAC,+BAA+B;OAAGI,WACxDT,aAAagB,8BACZ,oBAACd;QAASkB,WAAWf,MAAM,CAAC,kCAAkC;qBAC5D,oBAACD,sBAAe,MACfY,6BAIP,oBAACe;QAAIX,WAAWf,MAAM,CAAC,4BAA4B;OAChDL,aAAae,wBAAU,oBAACgB,aAAKhB,QAC7BF,0BAAY,oBAACf;QAAWsB,WAAWf,MAAM,CAAC,mCAAmC;;AAItF,EAAE"}
+{"version":3,"sources":["../../../../src/components/CustomSelectOption/CustomSelectOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Done } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectOption--sizeY-none'],\n  ['regular']: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Добавляет описание под основным блоком.\n   */\n  description?: React.ReactNode;\n  /**\n   * Вставляет элемент в начало блока перед основным контентом.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  before?: React.ReactNode;\n  /**\n   * Вставляет элемент в конец блока после основного контента.\n   * Например, можно передать компонент `Avatar`, `Icon<Name>` или другие изображения.\n   */\n  after?: React.ReactNode;\n  /**\n   * Позволяет создавать вложенность.\n   */\n  hierarchy?: number;\n  /**\n   * Включает состояние выбранного элемента списка.\n   */\n  selected?: boolean;\n  /**\n   * Включает состояние наведения.\n   */\n  hovered?: boolean;\n  /**\n   * Включает состояние фокуса.\n   */\n  focused?: boolean;\n  /**\n   * Блокирует весь блок.\n   *\n   * > ⚠️  Важно: если CustomSelectOption используется внутри [Select](https://vkcom.github.io/VKUI/#/Select), [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) или [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect), то свойство явно должно выставляться только через структуру `options`.\n   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе [CustomSelect](https://vkcom.github.io/VKUI/#/CustomSelect) и [ChipsSelect](https://vkcom.github.io/VKUI/#/ChipsSelect) не будут знать об актуальном состоянии\n   * опции.\n   */\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered: hoveredProp,\n  selected,\n  before,\n  after,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  onClick,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const style = React.useMemo(\n    () =>\n      hierarchy > 0\n        ? {\n            '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,\n            ...styleProp,\n          }\n        : styleProp,\n    [hierarchy, styleProp],\n  );\n  const hovered = hoveredProp && !disabled ? true : false;\n\n  return (\n    <Paragraph\n      {...restProps}\n      onClick={disabled ? undefined : onClick}\n      Component=\"div\"\n      role=\"option\"\n      aria-disabled={disabled}\n      aria-selected={selected}\n      data-hovered={hovered}\n      className={classNames(\n        styles['CustomSelectOption'],\n        sizeY !== 'compact' && sizeYClassNames[sizeY],\n        hovered && styles['CustomSelectOption--hover'],\n        disabled && styles['CustomSelectOption--disabled'],\n        hierarchy > 0 && styles['CustomSelectOption--hierarchy'],\n        className,\n      )}\n      style={style}\n    >\n      {hasReactNode(before) && <div className={styles['CustomSelectOption__before']}>{before}</div>}\n      <div className={styles['CustomSelectOption__main']}>\n        <div className={styles['CustomSelectOption__children']}>{children}</div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['CustomSelectOption__description']}>\n            <VisuallyHidden>&nbsp;</VisuallyHidden>\n            {description}\n          </Footnote>\n        )}\n      </div>\n      <div className={styles['CustomSelectOption__after']}>\n        {hasReactNode(after) && <div>{after}</div>}\n        {selected && <Icon16Done className={styles['CustomSelectOption__selectedIcon']} />}\n      </div>\n    </Paragraph>\n  );\n};\n"],"names":["React","Icon16Done","classNames","hasReactNode","useAdaptivity","Footnote","Paragraph","VisuallyHidden","styles","sizeYClassNames","none","CustomSelectOption","children","hierarchy","hovered","hoveredProp","selected","before","after","description","disabled","style","styleProp","className","onClick","restProps","sizeY","useMemo","undefined","Component","role","aria-disabled","aria-selected","data-hovered","div"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,SAASC,cAAc,QAAQ,mCAAmC;AAClE,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAAC,UAAU,EAAEA,MAAM,CAAC,oCAAoC;AAC1D;AA2CA;;CAEC,GACD,OAAO,MAAMG,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,SAASC,WAAW,EACpBC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGtB;IAC3B,MAAMiB,QAAQrB,MAAM2B,OAAO,CACzB,IACEd,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,WACN;QAACT;QAAWS;KAAU;IAExB,MAAMR,UAAUC,eAAe,CAACK,WAAW,OAAO;IAElD,qBACE,MAACd;QACE,GAAGmB,SAAS;QACbD,SAASJ,WAAWQ,YAAYJ;QAChCK,WAAU;QACVC,MAAK;QACLC,iBAAeX;QACfY,iBAAehB;QACfiB,gBAAcnB;QACdS,WAAWrB,WACTM,MAAM,CAAC,qBAAqB,EAC5BkB,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CZ,WAAWN,MAAM,CAAC,4BAA4B,EAC9CY,YAAYZ,MAAM,CAAC,+BAA+B,EAClDK,YAAY,KAAKL,MAAM,CAAC,gCAAgC,EACxDe;QAEFF,OAAOA;;YAENlB,aAAac,yBAAW,KAACiB;gBAAIX,WAAWf,MAAM,CAAC,6BAA6B;0BAAGS;;0BAChF,MAACiB;gBAAIX,WAAWf,MAAM,CAAC,2BAA2B;;kCAChD,KAAC0B;wBAAIX,WAAWf,MAAM,CAAC,+BAA+B;kCAAGI;;oBACxDT,aAAagB,8BACZ,MAACd;wBAASkB,WAAWf,MAAM,CAAC,kCAAkC;;0CAC5D,KAACD;0CAAe;;4BACfY;;;;;0BAIP,MAACe;gBAAIX,WAAWf,MAAM,CAAC,4BAA4B;;oBAChDL,aAAae,wBAAU,KAACgB;kCAAKhB;;oBAC7BF,0BAAY,KAACf;wBAAWsB,WAAWf,MAAM,CAAC,mCAAmC;;;;;;AAItF,EAAE"}

package/dist/cssm/components/DateInput/DateInput.d.ts

@@ -14,5 +14,5 @@ export interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLDivEl
 /**
  * @see https://vkcom.github.io/VKUI/#/DateInput
  */
-export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value, onChange, calendarPlacement, style, className, doneButtonText, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, showNeighboringMonth, size, changeMonthLabel, changeYearLabel, changeDayLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateInputProps) => React.JSX.Element;
+export declare const DateInput: ({ enableTime, shouldDisableDate, disableFuture, disablePast, minDateTime, maxDateTime, value, onChange, calendarPlacement, style, className, doneButtonText, closeOnChange, disablePickers, getRootRef, name, autoFocus, disabled, onClick, onFocus, prevMonthLabel, nextMonthLabel, showNeighboringMonth, size, changeMonthLabel, changeYearLabel, changeDayLabel, changeHoursLabel, changeMinutesLabel, clearFieldLabel, showCalendarLabel, viewDate, onHeaderChange, onNextMonth, onPrevMonth, prevMonthIcon, nextMonthIcon, disableCalendar, ...props }: DateInputProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DateInput.d.ts.map

package/dist/cssm/components/DateInput/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMnE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,EACpF,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,CAChB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,cAAc;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,giBAwCnB,cAAc,sBA+LhB,CAAC"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components/DateInput/DateInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACzC,OAAO,EAAY,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC/D,OAAO,EAAa,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMnE,OAAO,mCAAmC,CAAC;AAQ3C,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC,EACpF,IAAI,CACF,aAAa,EACX,aAAa,GACb,eAAe,GACf,YAAY,GACZ,mBAAmB,GACnB,UAAU,GACV,OAAO,GACP,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,kBAAkB,GAClB,oBAAoB,GACpB,gBAAgB,GAChB,gBAAgB,GAChB,kBAAkB,GAClB,iBAAiB,GACjB,gBAAgB,GAChB,sBAAsB,GACtB,MAAM,GACN,UAAU,GACV,gBAAgB,GAChB,aAAa,GACb,aAAa,GACb,eAAe,GACf,eAAe,GACf,aAAa,GACb,aAAa,CAChB,EACD,UAAU,CAAC,cAAc,CAAC,EAC1B,cAAc;IAChB,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA0CD;;GAEG;AACH,eAAO,MAAM,SAAS,giBAwCnB,cAAc,4CAsMhB,CAAC"}

package/dist/cssm/components/DateInput/DateInput.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
@@ -132,101 +133,136 @@ const getInternalValue = (value)=>{
         closeOnChange,
         enableTime
     ]);
-    return /*#__PURE__*/ React.createElement(FormField, {
+    return /*#__PURE__*/ _jsxs(FormField, {
         style: style,
         className: classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className),
         getRootRef: handleRootRef,
-        after: value ? /*#__PURE__*/ React.createElement(IconButton, {
+        after: value ? /*#__PURE__*/ _jsx(IconButton, {
             hoverMode: "opacity",
             label: clearFieldLabel,
-            onClick: clear
-        }, /*#__PURE__*/ React.createElement(Icon16Clear, null)) : /*#__PURE__*/ React.createElement(IconButton, {
+            onClick: clear,
+            children: /*#__PURE__*/ _jsx(Icon16Clear, {})
+        }) : /*#__PURE__*/ _jsx(IconButton, {
             hoverMode: "opacity",
             label: showCalendarLabel,
-            onClick: openCalendar
-        }, /*#__PURE__*/ React.createElement(Icon20CalendarOutline, null)),
+            onClick: openCalendar,
+            children: /*#__PURE__*/ _jsx(Icon20CalendarOutline, {})
+        }),
         disabled: disabled,
         onClick: callMultiple(handleFieldEnter, onClick),
         onFocus: callMultiple(handleFieldEnter, onFocus),
-        ...props
-    }, /*#__PURE__*/ React.createElement("input", {
-        type: "hidden",
-        name: name,
-        value: value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''
-    }), /*#__PURE__*/ React.createElement(Text, {
-        className: styles['DateInput__input'],
-        onKeyDown: handleKeyDown
-    }, /*#__PURE__*/ React.createElement(InputLike, {
-        length: 2,
-        getRootRef: daysRef,
-        index: 0,
-        onElementSelect: setFocusedElement,
-        value: internalValue[0],
-        label: changeDayLabel
-    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
-        length: 2,
-        getRootRef: monthsRef,
-        index: 1,
-        onElementSelect: setFocusedElement,
-        value: internalValue[1],
-        label: changeMonthLabel
-    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, "."), /*#__PURE__*/ React.createElement(InputLike, {
-        length: 4,
-        getRootRef: yearsRef,
-        index: 2,
-        onElementSelect: setFocusedElement,
-        value: internalValue[2],
-        label: changeYearLabel
-    }), enableTime && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(InputLikeDivider, {
-        className: styles['DateInput__input--time-divider']
-    }, ' '), /*#__PURE__*/ React.createElement(InputLike, {
-        length: 2,
-        getRootRef: hoursRef,
-        index: 3,
-        onElementSelect: setFocusedElement,
-        value: internalValue[3],
-        label: changeHoursLabel
-    }), /*#__PURE__*/ React.createElement(InputLikeDivider, null, ":"), /*#__PURE__*/ React.createElement(InputLike, {
-        length: 2,
-        getRootRef: minutesRef,
-        index: 4,
-        onElementSelect: setFocusedElement,
-        value: internalValue[4],
-        label: changeMinutesLabel
-    }))), open && !disableCalendar && /*#__PURE__*/ React.createElement(Popper, {
-        targetRef: rootRef,
-        offsetByMainAxis: 8,
-        placement: calendarPlacement,
-        autoUpdateOnTargetResize: true
-    }, /*#__PURE__*/ React.createElement(Calendar, {
-        value: value,
-        onChange: onCalendarChange,
-        enableTime: enableTime,
-        disablePast: disablePast,
-        disableFuture: disableFuture,
-        shouldDisableDate: shouldDisableDate,
-        onClose: removeFocusFromField,
-        getRootRef: calendarRef,
-        doneButtonText: doneButtonText,
-        disablePickers: disablePickers,
-        changeHoursLabel: changeHoursLabel,
-        changeMinutesLabel: changeMinutesLabel,
-        prevMonthLabel: prevMonthLabel,
-        nextMonthLabel: nextMonthLabel,
-        changeMonthLabel: changeMonthLabel,
-        changeYearLabel: changeYearLabel,
-        changeDayLabel: changeDayLabel,
-        showNeighboringMonth: showNeighboringMonth,
-        size: size,
-        viewDate: viewDate,
-        onHeaderChange: onHeaderChange,
-        onNextMonth: onNextMonth,
-        onPrevMonth: onPrevMonth,
-        prevMonthIcon: prevMonthIcon,
-        nextMonthIcon: nextMonthIcon,
-        minDateTime: minDateTime,
-        maxDateTime: maxDateTime
-    })));
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx("input", {
+                type: "hidden",
+                name: name,
+                value: value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''
+            }),
+            /*#__PURE__*/ _jsxs(Text, {
+                className: styles['DateInput__input'],
+                onKeyDown: handleKeyDown,
+                // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей
+                // из-за чего `.Typography--normalize` перебивает стили.
+                normalize: false,
+                Component: "span" // для <span> нормализация не нужна
+                ,
+                children: [
+                    /*#__PURE__*/ _jsx(InputLike, {
+                        length: 2,
+                        getRootRef: daysRef,
+                        index: 0,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[0],
+                        label: changeDayLabel
+                    }),
+                    /*#__PURE__*/ _jsx(InputLikeDivider, {
+                        children: "."
+                    }),
+                    /*#__PURE__*/ _jsx(InputLike, {
+                        length: 2,
+                        getRootRef: monthsRef,
+                        index: 1,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[1],
+                        label: changeMonthLabel
+                    }),
+                    /*#__PURE__*/ _jsx(InputLikeDivider, {
+                        children: "."
+                    }),
+                    /*#__PURE__*/ _jsx(InputLike, {
+                        length: 4,
+                        getRootRef: yearsRef,
+                        index: 2,
+                        onElementSelect: setFocusedElement,
+                        value: internalValue[2],
+                        label: changeYearLabel
+                    }),
+                    enableTime && /*#__PURE__*/ _jsxs(React.Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                className: styles['DateInput__input--time-divider'],
+                                children: ' '
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 2,
+                                getRootRef: hoursRef,
+                                index: 3,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[3],
+                                label: changeHoursLabel
+                            }),
+                            /*#__PURE__*/ _jsx(InputLikeDivider, {
+                                children: ":"
+                            }),
+                            /*#__PURE__*/ _jsx(InputLike, {
+                                length: 2,
+                                getRootRef: minutesRef,
+                                index: 4,
+                                onElementSelect: setFocusedElement,
+                                value: internalValue[4],
+                                label: changeMinutesLabel
+                            })
+                        ]
+                    })
+                ]
+            }),
+            open && !disableCalendar && /*#__PURE__*/ _jsx(Popper, {
+                targetRef: rootRef,
+                offsetByMainAxis: 8,
+                placement: calendarPlacement,
+                autoUpdateOnTargetResize: true,
+                children: /*#__PURE__*/ _jsx(Calendar, {
+                    value: value,
+                    onChange: onCalendarChange,
+                    enableTime: enableTime,
+                    disablePast: disablePast,
+                    disableFuture: disableFuture,
+                    shouldDisableDate: shouldDisableDate,
+                    onClose: removeFocusFromField,
+                    getRootRef: calendarRef,
+                    doneButtonText: doneButtonText,
+                    disablePickers: disablePickers,
+                    changeHoursLabel: changeHoursLabel,
+                    changeMinutesLabel: changeMinutesLabel,
+                    prevMonthLabel: prevMonthLabel,
+                    nextMonthLabel: nextMonthLabel,
+                    changeMonthLabel: changeMonthLabel,
+                    changeYearLabel: changeYearLabel,
+                    changeDayLabel: changeDayLabel,
+                    showNeighboringMonth: showNeighboringMonth,
+                    size: size,
+                    viewDate: viewDate,
+                    onHeaderChange: onHeaderChange,
+                    onNextMonth: onNextMonth,
+                    onPrevMonth: onPrevMonth,
+                    prevMonthIcon: prevMonthIcon,
+                    nextMonthIcon: nextMonthIcon,
+                    minDateTime: minDateTime,
+                    maxDateTime: maxDateTime
+                })
+            })
+        ]
+    });
 };
 
 //# sourceMappingURL=DateInput.js.map