@vkontakte/vkui 6.1.2 → 6.2.0

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"],"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"}
+{"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,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.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"],"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"}
+{"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,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/CustomSelectDropdown/CustomSelectDropdown.module.css

@@ -1,6 +1,6 @@
 .CustomSelectDropdown {
   overflow: hidden;
-  background-color: var(--vkui--color_background_modal);
+  background-color: var(--vkui--color_background_contrast_themed);
   box-sizing: border-box;
   border: var(--vkui--size_border--regular) solid var(--vkui--color_field_border_alpha);
   box-shadow: var(--vkui--elevation1);

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"],"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"}
+{"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,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.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  ['compact']: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'doneButtonText'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  showNeighboringMonth,\n  size,\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'DD.MM.YYYY';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        onChange?.(parse(formattedValue, mask, value ?? new Date()));\n      }\n    },\n    [enableTime, maxElement, onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      onChange?.(value);\n      if (closeOnChange && !enableTime) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, removeFocusFromField, closeOnChange, enableTime],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" label={clearFieldLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" label={showCalendarLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <Text\n        className={styles['DateInput__input']}\n        onKeyDown={handleKeyDown}\n        // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n        // из-за чего `.Typography--normalize` перебивает стили.\n        normalize={false}\n        Component=\"span\" // для <span> нормализация не нужна\n      >\n        <InputLike\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeYearLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider className={styles['DateInput__input--time-divider']}>\n              {' '}\n            </InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={hoursRef}\n              index={3}\n              onElementSelect={setFocusedElement}\n              value={internalValue[3]}\n              label={changeHoursLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              label={changeMinutesLabel}\n            />\n          </React.Fragment>\n        )}\n      </Text>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={removeFocusFromField}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            minDateTime={minDateTime}\n            maxDateTime={maxDateTime}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","styles","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","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","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","after","hoverMode","label","input","type","onKeyDown","normalize","Component","onElementSelect","Fragment","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","onClose"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateInput/DateInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport '../InputLike/InputLike.module.css'; // Reorder css\nimport styles from './DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateInput--sizeY-none'],\n  ['compact']: styles['DateInput--sizeY-compact'],\n};\n\nexport interface DateInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange' | 'size'>,\n    Pick<\n      CalendarProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'enableTime'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'doneButtonText'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'changeHoursLabel'\n      | 'changeMinutesLabel'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'showNeighboringMonth'\n      | 'size'\n      | 'viewDate'\n      | 'onHeaderChange'\n      | 'onNextMonth'\n      | 'onPrevMonth'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n      | 'minDateTime'\n      | 'maxDateTime'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n      max = 31;\n      break;\n    case 1:\n      max = 12;\n      break;\n    case 2:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n    case 3:\n      max = 23;\n      break;\n    case 4:\n      max = 59;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarProps['value']) => {\n  const newValue = ['', '', '', '', ''];\n  if (value) {\n    newValue[0] = String(value.getDate()).padStart(2, '0');\n    newValue[1] = String(value.getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value.getFullYear()).padStart(4, '0');\n    newValue[3] = String(value.getHours()).padStart(2, '0');\n    newValue[4] = String(value.getMinutes()).padStart(2, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateInput\n */\nexport const DateInput = ({\n  enableTime,\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  minDateTime,\n  maxDateTime,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  doneButtonText,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  showNeighboringMonth,\n  size,\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeDayLabel = 'Изменить день',\n  changeHoursLabel = 'Изменить час',\n  changeMinutesLabel = 'Изменить минуту',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  viewDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateInputProps) => {\n  const daysRef = React.useRef<HTMLSpanElement>(null);\n  const monthsRef = React.useRef<HTMLSpanElement>(null);\n  const yearsRef = React.useRef<HTMLSpanElement>(null);\n  const hoursRef = React.useRef<HTMLSpanElement>(null);\n  const minutesRef = React.useRef<HTMLSpanElement>(null);\n\n  const maxElement = enableTime ? 4 : 2;\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      for (let i = 0; i <= maxElement; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          return;\n        }\n      }\n\n      let formattedValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      let mask = 'DD.MM.YYYY';\n      if (enableTime) {\n        formattedValue += ` ${internalValue[3]}:${internalValue[4]}`;\n        mask += ' HH:mm';\n      }\n\n      if (isMatch(formattedValue, mask)) {\n        onChange?.(parse(formattedValue, mask, value ?? new Date()));\n      }\n    },\n    [enableTime, maxElement, onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n    [daysRef, monthsRef, yearsRef, hoursRef, minutesRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (value?: Date | undefined) => {\n      onChange?.(value);\n      if (closeOnChange && !enableTime) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, removeFocusFromField, closeOnChange, enableTime],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" label={clearFieldLabel} onClick={clear}>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" label={showCalendarLabel} onClick={openCalendar}>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={value ? format(value, enableTime ? 'DD.MM.YYYYTHH:mm' : 'DD.MM.YYYY') : ''}\n      />\n      <Text\n        className={styles['DateInput__input']}\n        onKeyDown={handleKeyDown}\n        // Инцидент: в PR https://github.com/VKCOM/VKUI/pull/6649 стабильно ломается порядок стилей\n        // из-за чего `.Typography--normalize` перебивает стили.\n        normalize={false}\n        Component=\"span\" // для <span> нормализация не нужна\n      >\n        <InputLike\n          length={2}\n          getRootRef={daysRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeYearLabel}\n        />\n        {enableTime && (\n          <React.Fragment>\n            <InputLikeDivider className={styles['DateInput__input--time-divider']}>\n              {' '}\n            </InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={hoursRef}\n              index={3}\n              onElementSelect={setFocusedElement}\n              value={internalValue[3]}\n              label={changeHoursLabel}\n            />\n            <InputLikeDivider>:</InputLikeDivider>\n            <InputLike\n              length={2}\n              getRootRef={minutesRef}\n              index={4}\n              onElementSelect={setFocusedElement}\n              value={internalValue[4]}\n              label={changeMinutesLabel}\n            />\n          </React.Fragment>\n        )}\n      </Text>\n      {open && !disableCalendar && (\n        <Popper\n          targetRef={rootRef}\n          offsetByMainAxis={8}\n          placement={calendarPlacement}\n          autoUpdateOnTargetResize\n        >\n          <Calendar\n            value={value}\n            onChange={onCalendarChange}\n            enableTime={enableTime}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={removeFocusFromField}\n            getRootRef={calendarRef}\n            doneButtonText={doneButtonText}\n            disablePickers={disablePickers}\n            changeHoursLabel={changeHoursLabel}\n            changeMinutesLabel={changeMinutesLabel}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            showNeighboringMonth={showNeighboringMonth}\n            size={size}\n            viewDate={viewDate}\n            onHeaderChange={onHeaderChange}\n            onNextMonth={onNextMonth}\n            onPrevMonth={onPrevMonth}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n            minDateTime={minDateTime}\n            maxDateTime={maxDateTime}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isMatch","parse","Calendar","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","styles","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","getHours","getMinutes","DateInput","enableTime","shouldDisableDate","disableFuture","disablePast","minDateTime","maxDateTime","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","daysRef","useRef","monthsRef","yearsRef","hoursRef","minutesRef","maxElement","onInternalValueChange","useCallback","internalValue","i","formattedValue","mask","Date","refs","useMemo","rootRef","calendarRef","open","openCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","sizeY","handleRootRef","onCalendarChange","after","hoverMode","label","input","type","onKeyDown","normalize","Component","onElementSelect","Fragment","targetRef","offsetByMainAxis","placement","autoUpdateOnTargetResize","onClose"],"mappings":"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"}

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

@@ -20,6 +20,12 @@ export interface DatePickerProps extends Omit<HTMLAttributesWithRootRef<HTMLDivE
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/DatePicker
+ *
+ * @deprecated 6.2.0
+ *
+ * Компонент устарел и будет удален в v7. Используйте вместо него компоненты
+ * [Input](https://vkcom.github.io/VKUI/#/Input) и
+ * [Select](https://vkcom.github.io/VKUI/#/Select).
  */
 export declare const DatePicker: ({ onDateChange, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DatePicker.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAwB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqB9E,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAIF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,yBAAyB,CAAC,cAAc,CAAC,EACzC,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CACzC;IACD,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6KD;;GAEG;AACH,eAAO,MAAM,UAAU,+BAAgC,eAAe,4CASrE,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAwB,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqB9E,MAAM,MAAM,oBAAoB,GAAG;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAIF,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,yBAAyB,CAAC,cAAc,CAAC,EACzC,cAAc,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CACzC;IACD,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,GAAG,CAAC,EAAE,oBAAoB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA6KD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,+BAAgC,eAAe,4CASrE,CAAC"}

package/dist/cssm/components/DatePicker/DatePicker.js

@@ -182,6 +182,12 @@ const DatePickerNative = ({ min = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/DatePicker
+ *
+ * @deprecated 6.2.0
+ *
+ * Компонент устарел и будет удален в v7. Используйте вместо него компоненты
+ * [Input](https://vkcom.github.io/VKUI/#/Input) и
+ * [Select](https://vkcom.github.io/VKUI/#/Select).
  */ export const DatePicker = ({ onDateChange, ...props })=>{
     const hasPointer = useAdaptivityHasPointer();
     const onChange = (update)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { leadingZero } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { HasOnlyExpectedProps, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input, type InputProps } from '../Input/Input';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n  'Января',\n  'Февраля',\n  'Марта',\n  'Апреля',\n  'Мая',\n  'Июня',\n  'Июля',\n  'Августа',\n  'Сентября',\n  'Октября',\n  'Ноября',\n  'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nconst DEFAULT_EMPTY_DATE = { day: 0, month: 0, year: 0 };\n\nexport interface DatePickerProps\n  extends Omit<\n    HTMLAttributesWithRootRef<HTMLDivElement>,\n    'defaultValue' | 'value' | 'min' | 'max'\n  > {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  value?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void; // TODO [>=7] заменить на onChange\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat(value: Partial<DatePickerDateFormat> | undefined) {\n  if (!value) {\n    return undefined;\n  }\n  const { day = 0, month = 0, year = 0 } = value;\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n  if (date.length === 0) {\n    return DEFAULT_EMPTY_DATE;\n  }\n  const splited = date.split('-');\n\n  return {\n    day: Number(splited[2]),\n    month: Number(splited[1]),\n    year: Number(splited[0]),\n  };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n  return month ? new Date(year || 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n  name,\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  value,\n  monthNames,\n  onDateChange,\n  disabled,\n  defaultValue = DEFAULT_EMPTY_DATE,\n  ...restProps\n}: DatePickerProps) => {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useCustomEnsuredControl({ value, defaultValue });\n  const hiddenInput = React.useRef<HTMLInputElement>(null);\n\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const nextDate = {\n      day: internalValue.day,\n      month: internalValue.month,\n      year: internalValue.year,\n    };\n    nextDate[e.target.name as keyof typeof nextDate] = Number(e.target.value);\n    nextDate.day = nextDate.day\n      ? clamp(nextDate.day, 1, getMonthMaxDay(nextDate.month, nextDate.year))\n      : nextDate.day;\n    setInternalValue(nextDate);\n    onDateChange?.(nextDate);\n  };\n  const dayOptions = range(1, getMonthMaxDay(internalValue.month, internalValue.year)).map(\n    (value) => ({\n      label: String(value),\n      value,\n    }),\n  );\n  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({\n    label: name,\n    value: index + 1,\n  }));\n  const yearOptions = range(max.year, min.year).map((value) => ({\n    label: String(value),\n    value: value,\n  }));\n\n  useNativeFormResetListener(hiddenInput, () => {\n    if (!isControlled) {\n      setInternalValue(defaultValue);\n    }\n  });\n\n  return (\n    <RootComponent baseClassName={styles['DatePicker']} {...restProps}>\n      <div className={styles['DatePicker__container']}>\n        <div className={styles['DatePicker__day']}>\n          <CustomSelect\n            name=\"day\"\n            value={internalValue.day}\n            options={dayOptions}\n            placeholder={dayPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__month']}>\n          <CustomSelect\n            className={styles['DatePicker__monthSelect']}\n            name=\"month\"\n            value={internalValue.month}\n            options={monthOptions}\n            placeholder={monthPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__year']}>\n          <CustomSelect\n            name=\"year\"\n            value={internalValue.year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input\n        type=\"hidden\"\n        name={name}\n        ref={hiddenInput}\n        value={convertToInputFormat(internalValue)}\n      />\n    </RootComponent>\n  );\n};\n\nconst DatePickerNative = ({\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  monthNames,\n  popupDirection,\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  value,\n  defaultValue = DEFAULT_EMPTY_DATE,\n  onDateChange,\n  ...restProps\n}: DatePickerProps) => {\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  const inputProps: HasOnlyExpectedProps<\n    typeof restProps & Pick<InputProps, 'value' | 'defaultValue'>,\n    InputProps\n  > = restProps;\n\n  if (value) {\n    // контролируемый компонент\n    inputProps.value = convertToInputFormat(value);\n  } else {\n    // неконтролируемый компонент\n    inputProps.defaultValue = convertToInputFormat(defaultValue);\n  }\n\n  return (\n    <Input\n      {...inputProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ onDateChange, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  const onChange = (update: DatePickerDateFormat) => {\n    onDateChange && onDateChange({ ...update });\n  };\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} onDateChange={onChange} />;\n};\n"],"names":["React","leadingZero","clamp","range","useAdaptivityHasPointer","useCustomEnsuredControl","useNativeFormResetListener","CustomSelect","Input","RootComponent","styles","DefaultMonths","DEFAULT_EMPTY_DATE","day","month","year","convertToInputFormat","value","undefined","parseInputDate","date","length","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","monthNames","onDateChange","disabled","defaultValue","restProps","isControlled","internalValue","setInternalValue","hiddenInput","useRef","onSelectChange","e","nextDate","target","dayOptions","map","label","String","monthOptions","index","yearOptions","baseClassName","div","className","options","placeholder","onChange","input","type","ref","DatePickerNative","onStringChange","useCallback","currentTarget","inputProps","DatePicker","props","hasPointer","update","Cmp"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { leadingZero } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';\nimport { HasOnlyExpectedProps, HTMLAttributesWithRootRef } from '../../types';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input, type InputProps } from '../Input/Input';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './DatePicker.module.css';\n\nconst DefaultMonths: string[] = [\n  'Января',\n  'Февраля',\n  'Марта',\n  'Апреля',\n  'Мая',\n  'Июня',\n  'Июля',\n  'Августа',\n  'Сентября',\n  'Октября',\n  'Ноября',\n  'Декабря',\n];\n\nexport type DatePickerDateFormat = {\n  day: number;\n  month: number;\n  year: number;\n};\n\nconst DEFAULT_EMPTY_DATE = { day: 0, month: 0, year: 0 };\n\nexport interface DatePickerProps\n  extends Omit<\n    HTMLAttributesWithRootRef<HTMLDivElement>,\n    'defaultValue' | 'value' | 'min' | 'max'\n  > {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  value?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void; // TODO [>=7] заменить на onChange\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat(value: Partial<DatePickerDateFormat> | undefined) {\n  if (!value) {\n    return undefined;\n  }\n  const { day = 0, month = 0, year = 0 } = value;\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\n  if (date.length === 0) {\n    return DEFAULT_EMPTY_DATE;\n  }\n  const splited = date.split('-');\n\n  return {\n    day: Number(splited[2]),\n    month: Number(splited[1]),\n    year: Number(splited[0]),\n  };\n}\n\nfunction getMonthMaxDay(month?: number, year?: number) {\n  return month ? new Date(year || 2016, month, 0).getDate() : 31;\n}\n\nconst DatePickerCustom = ({\n  name,\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  popupDirection,\n  value,\n  monthNames,\n  onDateChange,\n  disabled,\n  defaultValue = DEFAULT_EMPTY_DATE,\n  ...restProps\n}: DatePickerProps) => {\n  const isControlled = value !== undefined;\n  const [internalValue, setInternalValue] = useCustomEnsuredControl({ value, defaultValue });\n  const hiddenInput = React.useRef<HTMLInputElement>(null);\n\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    const nextDate = {\n      day: internalValue.day,\n      month: internalValue.month,\n      year: internalValue.year,\n    };\n    nextDate[e.target.name as keyof typeof nextDate] = Number(e.target.value);\n    nextDate.day = nextDate.day\n      ? clamp(nextDate.day, 1, getMonthMaxDay(nextDate.month, nextDate.year))\n      : nextDate.day;\n    setInternalValue(nextDate);\n    onDateChange?.(nextDate);\n  };\n  const dayOptions = range(1, getMonthMaxDay(internalValue.month, internalValue.year)).map(\n    (value) => ({\n      label: String(value),\n      value,\n    }),\n  );\n  const monthOptions = (monthNames || DefaultMonths).map((name, index) => ({\n    label: name,\n    value: index + 1,\n  }));\n  const yearOptions = range(max.year, min.year).map((value) => ({\n    label: String(value),\n    value: value,\n  }));\n\n  useNativeFormResetListener(hiddenInput, () => {\n    if (!isControlled) {\n      setInternalValue(defaultValue);\n    }\n  });\n\n  return (\n    <RootComponent baseClassName={styles['DatePicker']} {...restProps}>\n      <div className={styles['DatePicker__container']}>\n        <div className={styles['DatePicker__day']}>\n          <CustomSelect\n            name=\"day\"\n            value={internalValue.day}\n            options={dayOptions}\n            placeholder={dayPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__month']}>\n          <CustomSelect\n            className={styles['DatePicker__monthSelect']}\n            name=\"month\"\n            value={internalValue.month}\n            options={monthOptions}\n            placeholder={monthPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n        <div className={styles['DatePicker__year']}>\n          <CustomSelect\n            name=\"year\"\n            value={internalValue.year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input\n        type=\"hidden\"\n        name={name}\n        ref={hiddenInput}\n        value={convertToInputFormat(internalValue)}\n      />\n    </RootComponent>\n  );\n};\n\nconst DatePickerNative = ({\n  min = { day: 0, month: 0, year: 0 },\n  max = { day: 31, month: 12, year: 2100 },\n  monthNames,\n  popupDirection,\n  dayPlaceholder,\n  monthPlaceholder,\n  yearPlaceholder,\n  value,\n  defaultValue = DEFAULT_EMPTY_DATE,\n  onDateChange,\n  ...restProps\n}: DatePickerProps) => {\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  const inputProps: HasOnlyExpectedProps<\n    typeof restProps & Pick<InputProps, 'value' | 'defaultValue'>,\n    InputProps\n  > = restProps;\n\n  if (value) {\n    // контролируемый компонент\n    inputProps.value = convertToInputFormat(value);\n  } else {\n    // неконтролируемый компонент\n    inputProps.defaultValue = convertToInputFormat(defaultValue);\n  }\n\n  return (\n    <Input\n      {...inputProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n *\n * @deprecated 6.2.0\n *\n * Компонент устарел и будет удален в v7. Используйте вместо него компоненты\n * [Input](https://vkcom.github.io/VKUI/#/Input) и\n * [Select](https://vkcom.github.io/VKUI/#/Select).\n */\nexport const DatePicker = ({ onDateChange, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n\n  const onChange = (update: DatePickerDateFormat) => {\n    onDateChange && onDateChange({ ...update });\n  };\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} onDateChange={onChange} />;\n};\n"],"names":["React","leadingZero","clamp","range","useAdaptivityHasPointer","useCustomEnsuredControl","useNativeFormResetListener","CustomSelect","Input","RootComponent","styles","DefaultMonths","DEFAULT_EMPTY_DATE","day","month","year","convertToInputFormat","value","undefined","parseInputDate","date","length","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","monthNames","onDateChange","disabled","defaultValue","restProps","isControlled","internalValue","setInternalValue","hiddenInput","useRef","onSelectChange","e","nextDate","target","dayOptions","map","label","String","monthOptions","index","yearOptions","baseClassName","div","className","options","placeholder","onChange","input","type","ref","DatePickerNative","onStringChange","useCallback","currentTarget","inputProps","DatePicker","props","hasPointer","update","Cmp"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps, DateRangeType } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  ['compact']: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  changeStartDayLabel?: string;\n  changeStartMonthLabel?: string;\n  changeStartYearLabel?: string;\n  changeEndDayLabel?: string;\n  changeEndMonthLabel?: string;\n  changeEndYearLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'Изменить день',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeStartDayLabel = 'Изменить день начала',\n  changeStartMonthLabel = 'Изменить месяц начала',\n  changeStartYearLabel = 'Изменить год начала',\n  changeEndDayLabel = 'Изменить день окончания',\n  changeEndMonthLabel = 'Изменить месяц окончания',\n  changeEndYearLabel = 'Изменить год окончания',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'DD.MM.YYYY';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue: DateRangeType | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" onClick={clear}>\n            <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" onClick={openCalendar}>\n            <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <Text className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeStartDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeStartMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeStartYearLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          label={changeEndDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          label={changeEndMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          label={changeEndYearLabel}\n        />\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","styles","dateInputStyles","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeStartDayLabel","changeStartMonthLabel","changeStartYearLabel","changeEndDayLabel","changeEndMonthLabel","changeEndYearLabel","clearFieldLabel","showCalendarLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","after","hoverMode","input","type","onKeyDown","onElementSelect","label","targetRef","offsetByMainAxis","placement","onClose"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["../../../../src/components/DateRangeInput/DateRangeInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon16Clear, Icon20CalendarOutline } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDateInput } from '../../hooks/useDateInput';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { format, isAfter, isMatch, parse } from '../../lib/date';\nimport type { PlacementWithAuto } from '../../lib/floating';\nimport { HasRootRef } from '../../types';\nimport { CalendarRange, CalendarRangeProps, DateRangeType } from '../CalendarRange/CalendarRange';\nimport { FormField, FormFieldProps } from '../FormField/FormField';\nimport { IconButton } from '../IconButton/IconButton';\nimport { InputLike } from '../InputLike/InputLike';\nimport { InputLikeDivider } from '../InputLike/InputLikeDivider';\nimport { Popper } from '../Popper/Popper';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './DateRangeInput.module.css';\nimport dateInputStyles from '../DateInput/DateInput.module.css';\n\nconst sizeYClassNames = {\n  none: styles['DateRangeInput--sizeY-none'],\n  ['compact']: styles['DateRangeInput--sizeY-compact'],\n};\n\nexport interface DateRangeInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, 'value' | 'onChange'>,\n    Pick<\n      CalendarRangeProps,\n      | 'disablePast'\n      | 'disableFuture'\n      | 'shouldDisableDate'\n      | 'onChange'\n      | 'value'\n      | 'weekStartsOn'\n      | 'disablePickers'\n      | 'prevMonthLabel'\n      | 'nextMonthLabel'\n      | 'changeMonthLabel'\n      | 'changeYearLabel'\n      | 'changeDayLabel'\n      | 'prevMonthIcon'\n      | 'nextMonthIcon'\n    >,\n    HasRootRef<HTMLDivElement>,\n    FormFieldProps {\n  calendarPlacement?: PlacementWithAuto;\n  closeOnChange?: boolean;\n  clearFieldLabel?: string;\n  showCalendarLabel?: string;\n  changeStartDayLabel?: string;\n  changeStartMonthLabel?: string;\n  changeStartYearLabel?: string;\n  changeEndDayLabel?: string;\n  changeEndMonthLabel?: string;\n  changeEndYearLabel?: string;\n  disableCalendar?: boolean;\n}\n\nconst elementsConfig = (index: number) => {\n  let length = 2;\n  let min = 1;\n  let max = 0;\n\n  switch (index) {\n    case 0:\n    case 3:\n      max = 31;\n      break;\n    case 1:\n    case 4:\n      max = 12;\n      break;\n    case 2:\n    case 5:\n      max = 2100;\n      min = 1900;\n      length = 4;\n      break;\n  }\n\n  return { length, min, max };\n};\n\nconst getInternalValue = (value: CalendarRangeProps['value']) => {\n  const newValue = ['', '', '', '', '', ''];\n  if (value?.[0]) {\n    newValue[0] = String(value[0].getDate()).padStart(2, '0');\n    newValue[1] = String(value[0].getMonth() + 1).padStart(2, '0');\n    newValue[2] = String(value[0].getFullYear()).padStart(4, '0');\n  }\n  if (value?.[1]) {\n    newValue[3] = String(value[1].getDate()).padStart(2, '0');\n    newValue[4] = String(value[1].getMonth() + 1).padStart(2, '0');\n    newValue[5] = String(value[1].getFullYear()).padStart(4, '0');\n  }\n  return newValue;\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DateRangeInput\n */\nexport const DateRangeInput = ({\n  shouldDisableDate,\n  disableFuture,\n  disablePast,\n  value,\n  onChange,\n  calendarPlacement = 'bottom-start',\n  style,\n  className,\n  closeOnChange = true,\n  disablePickers,\n  getRootRef,\n  name,\n  autoFocus,\n  disabled,\n  onClick,\n  onFocus,\n  prevMonthLabel = 'Предыдущий месяц',\n  nextMonthLabel = 'Следующий месяц',\n  changeDayLabel = 'Изменить день',\n  changeMonthLabel = 'Изменить месяц',\n  changeYearLabel = 'Изменить год',\n  changeStartDayLabel = 'Изменить день начала',\n  changeStartMonthLabel = 'Изменить месяц начала',\n  changeStartYearLabel = 'Изменить год начала',\n  changeEndDayLabel = 'Изменить день окончания',\n  changeEndMonthLabel = 'Изменить месяц окончания',\n  changeEndYearLabel = 'Изменить год окончания',\n  clearFieldLabel = 'Очистить поле',\n  showCalendarLabel = 'Показать календарь',\n  prevMonthIcon,\n  nextMonthIcon,\n  disableCalendar = false,\n  ...props\n}: DateRangeInputProps) => {\n  const daysStartRef = React.useRef<HTMLSpanElement>(null);\n  const monthsStartRef = React.useRef<HTMLSpanElement>(null);\n  const yearsStartRef = React.useRef<HTMLSpanElement>(null);\n  const daysEndRef = React.useRef<HTMLSpanElement>(null);\n  const monthsEndRef = React.useRef<HTMLSpanElement>(null);\n  const yearsEndRef = React.useRef<HTMLSpanElement>(null);\n\n  const onInternalValueChange = React.useCallback(\n    (internalValue: string[]) => {\n      let isStartValid = true;\n      let isEndValid = true;\n      for (let i = 0; i <= 2; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isStartValid = false;\n        }\n      }\n      for (let i = 3; i <= 5; i += 1) {\n        if (internalValue[i].length < elementsConfig(i).length) {\n          isEndValid = false;\n        }\n      }\n      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;\n      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;\n      const mask = 'DD.MM.YYYY';\n\n      if (!isMatch(formattedStartValue, mask)) {\n        isStartValid = false;\n      }\n      if (!isMatch(formattedEndValue, mask)) {\n        isEndValid = false;\n      }\n\n      if (!isStartValid && !isEndValid) {\n        return;\n      }\n\n      const valueExists = Array.isArray(value);\n      const now = new Date();\n      const start = isStartValid\n        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)\n        : null;\n      const end = isEndValid\n        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)\n        : null;\n      if (start && end && isAfter(end, start)) {\n        onChange?.([start, end]);\n      }\n    },\n    [onChange, value],\n  );\n\n  const refs = React.useMemo(\n    () => [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n    [daysStartRef, monthsStartRef, yearsStartRef, daysEndRef, monthsEndRef, yearsEndRef],\n  );\n\n  const {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar,\n    closeCalendar,\n    internalValue,\n    handleKeyDown,\n    setFocusedElement,\n    handleFieldEnter,\n    clear,\n    removeFocusFromField,\n  } = useDateInput({\n    maxElement: 5,\n    refs,\n    autoFocus,\n    disabled,\n    elementsConfig,\n    onChange,\n    onInternalValueChange,\n    getInternalValue,\n    value,\n  });\n\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const handleRootRef = useExternRef(rootRef, getRootRef);\n\n  const onCalendarChange = React.useCallback(\n    (newValue: DateRangeType | undefined) => {\n      onChange?.(newValue);\n      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {\n        removeFocusFromField();\n      }\n    },\n    [onChange, closeOnChange, value, removeFocusFromField],\n  );\n\n  return (\n    <FormField\n      style={style}\n      className={classNames(sizeY !== 'regular' && sizeYClassNames[sizeY], className)}\n      getRootRef={handleRootRef}\n      after={\n        value ? (\n          <IconButton hoverMode=\"opacity\" onClick={clear}>\n            <VisuallyHidden>{clearFieldLabel}</VisuallyHidden>\n            <Icon16Clear />\n          </IconButton>\n        ) : (\n          <IconButton hoverMode=\"opacity\" onClick={openCalendar}>\n            <VisuallyHidden>{showCalendarLabel}</VisuallyHidden>\n            <Icon20CalendarOutline />\n          </IconButton>\n        )\n      }\n      disabled={disabled}\n      onClick={callMultiple(handleFieldEnter, onClick)}\n      onFocus={callMultiple(handleFieldEnter, onFocus)}\n      {...props}\n    >\n      <input\n        type=\"hidden\"\n        name={name}\n        value={\n          value\n            ? `${value[0] ? format(value[0], 'DD.MM.YYYY') : ''} - ${\n                value[1] ? format(value[1], 'DD.MM.YYYY') : ''\n              }`\n            : ''\n        }\n      />\n      <Text className={dateInputStyles['DateInput__input']} onKeyDown={handleKeyDown}>\n        <InputLike\n          length={2}\n          getRootRef={daysStartRef}\n          index={0}\n          onElementSelect={setFocusedElement}\n          value={internalValue[0]}\n          label={changeStartDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsStartRef}\n          index={1}\n          onElementSelect={setFocusedElement}\n          value={internalValue[1]}\n          label={changeStartMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsStartRef}\n          index={2}\n          onElementSelect={setFocusedElement}\n          value={internalValue[2]}\n          label={changeStartYearLabel}\n        />\n        <InputLikeDivider>{' — '}</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={daysEndRef}\n          index={3}\n          onElementSelect={setFocusedElement}\n          value={internalValue[3]}\n          label={changeEndDayLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={2}\n          getRootRef={monthsEndRef}\n          index={4}\n          onElementSelect={setFocusedElement}\n          value={internalValue[4]}\n          label={changeEndMonthLabel}\n        />\n        <InputLikeDivider>.</InputLikeDivider>\n        <InputLike\n          length={4}\n          getRootRef={yearsEndRef}\n          index={5}\n          onElementSelect={setFocusedElement}\n          value={internalValue[5]}\n          label={changeEndYearLabel}\n        />\n      </Text>\n      {open && !disableCalendar && (\n        <Popper targetRef={rootRef} offsetByMainAxis={8} placement={calendarPlacement}>\n          <CalendarRange\n            value={value}\n            onChange={onCalendarChange}\n            disablePast={disablePast}\n            disableFuture={disableFuture}\n            shouldDisableDate={shouldDisableDate}\n            onClose={closeCalendar}\n            getRootRef={calendarRef}\n            disablePickers={disablePickers}\n            prevMonthLabel={prevMonthLabel}\n            nextMonthLabel={nextMonthLabel}\n            changeMonthLabel={changeMonthLabel}\n            changeYearLabel={changeYearLabel}\n            changeDayLabel={changeDayLabel}\n            prevMonthIcon={prevMonthIcon}\n            nextMonthIcon={nextMonthIcon}\n          />\n        </Popper>\n      )}\n    </FormField>\n  );\n};\n"],"names":["React","Icon16Clear","Icon20CalendarOutline","classNames","useAdaptivity","useDateInput","useExternRef","callMultiple","format","isAfter","isMatch","parse","CalendarRange","FormField","IconButton","InputLike","InputLikeDivider","Popper","Text","VisuallyHidden","styles","dateInputStyles","sizeYClassNames","none","elementsConfig","index","length","min","max","getInternalValue","value","newValue","String","getDate","padStart","getMonth","getFullYear","DateRangeInput","shouldDisableDate","disableFuture","disablePast","onChange","calendarPlacement","style","className","closeOnChange","disablePickers","getRootRef","name","autoFocus","disabled","onClick","onFocus","prevMonthLabel","nextMonthLabel","changeDayLabel","changeMonthLabel","changeYearLabel","changeStartDayLabel","changeStartMonthLabel","changeStartYearLabel","changeEndDayLabel","changeEndMonthLabel","changeEndYearLabel","clearFieldLabel","showCalendarLabel","prevMonthIcon","nextMonthIcon","disableCalendar","props","daysStartRef","useRef","monthsStartRef","yearsStartRef","daysEndRef","monthsEndRef","yearsEndRef","onInternalValueChange","useCallback","internalValue","isStartValid","isEndValid","i","formattedStartValue","formattedEndValue","mask","valueExists","Array","isArray","now","Date","start","end","refs","useMemo","rootRef","calendarRef","open","openCalendar","closeCalendar","handleKeyDown","setFocusedElement","handleFieldEnter","clear","removeFocusFromField","maxElement","sizeY","handleRootRef","onCalendarChange","after","hoverMode","input","type","onKeyDown","onElementSelect","label","targetRef","offsetByMainAxis","placement","onClose"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Div.module.css';\n\nexport type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = (props: DivProps) => <RootComponent baseClassName={styles['Div']} {...props} />;\n"],"names":["RootComponent","styles","Div","props","baseClassName"],"rangeMappings":";;;;;;;;","mappings":";AACA,SAASA,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,mBAAmB;AAItC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAACC,sBAAoB,KAACH;QAAcI,eAAeH,MAAM,CAAC,MAAM;QAAG,GAAGE,KAAK;OAAK"}
+{"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Div.module.css';\n\nexport type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = (props: DivProps) => <RootComponent baseClassName={styles['Div']} {...props} />;\n"],"names":["RootComponent","styles","Div","props","baseClassName"],"mappings":";AACA,SAASA,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,mBAAmB;AAItC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAACC,sBAAoB,KAACH;QAAcI,eAAeH,MAAM,CAAC,MAAM;QAAG,GAAGE,KAAK;OAAK"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { DropZoneGrid } from './components/DropZoneGrid';\nimport styles from './DropZone.module.css';\n\ninterface DropZonePropsChildrenProps {\n  active: boolean;\n}\n\nexport interface DropZoneProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'> {\n  children?: React.ReactNode | ((renderProps: DropZonePropsChildrenProps) => React.ReactNode);\n}\n\n/**\n * Компонент позволяет пользователям загружать файлы, перетаскивая файлы в\n * область на странице.\n *\n * @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/DropZone\n */\nexport const DropZone = ({\n  onDragOver,\n  onDragLeave,\n  onDrop,\n  children,\n  ...props\n}: DropZoneProps) => {\n  const [active, setActive] = React.useState(false);\n\n  const onActive: React.DragEventHandler<HTMLDivElement> = (event) => {\n    if (event.isPropagationStopped()) {\n      return;\n    }\n\n    setActive(true);\n  };\n\n  const offActive: React.DragEventHandler<HTMLDivElement> = () => {\n    setActive(false);\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles['DropZone'], active && styles['DropZone--active'])}\n      onDragOver={callMultiple(onDragOver, onActive)}\n      onDragLeave={callMultiple(onDragLeave, offActive)}\n      onDrop={callMultiple(onDrop, offActive)}\n      {...props}\n    >\n      {typeof children === 'function' ? children({ active }) : children}\n    </RootComponent>\n  );\n};\n\nDropZone.displayName = 'DropZone';\n\nDropZone.Grid = DropZoneGrid;\nDropZone.Grid.displayName = 'DropZone.Grid';\n"],"names":["React","classNames","callMultiple","RootComponent","DropZoneGrid","styles","DropZone","onDragOver","onDragLeave","onDrop","children","props","active","setActive","useState","onActive","event","isPropagationStopped","offActive","baseClassName","displayName","Grid"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,OAAOC,YAAY,wBAAwB;AAU3C;;;;;;CAMC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,OACW;IACd,MAAM,CAACC,QAAQC,UAAU,GAAGb,MAAMc,QAAQ,CAAC;IAE3C,MAAMC,WAAmD,CAACC;QACxD,IAAIA,MAAMC,oBAAoB,IAAI;YAChC;QACF;QAEAJ,UAAU;IACZ;IAEA,MAAMK,YAAoD;QACxDL,UAAU;IACZ;IAEA,qBACE,KAACV;QACCgB,eAAelB,WAAWI,MAAM,CAAC,WAAW,EAAEO,UAAUP,MAAM,CAAC,mBAAmB;QAClFE,YAAYL,aAAaK,YAAYQ;QACrCP,aAAaN,aAAaM,aAAaU;QACvCT,QAAQP,aAAaO,QAAQS;QAC5B,GAAGP,KAAK;kBAER,OAAOD,aAAa,aAAaA,SAAS;YAAEE;QAAO,KAAKF;;AAG/D,EAAE;AAEFJ,SAASc,WAAW,GAAG;AAEvBd,SAASe,IAAI,GAAGjB;AAChBE,SAASe,IAAI,CAACD,WAAW,GAAG"}
+{"version":3,"sources":["../../../../src/components/DropZone/DropZone.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { callMultiple } from '../../lib/callMultiple';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { DropZoneGrid } from './components/DropZoneGrid';\nimport styles from './DropZone.module.css';\n\ninterface DropZonePropsChildrenProps {\n  active: boolean;\n}\n\nexport interface DropZoneProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'> {\n  children?: React.ReactNode | ((renderProps: DropZonePropsChildrenProps) => React.ReactNode);\n}\n\n/**\n * Компонент позволяет пользователям загружать файлы, перетаскивая файлы в\n * область на странице.\n *\n * @since 6.1.0\n * @see https://vkcom.github.io/VKUI/#/DropZone\n */\nexport const DropZone = ({\n  onDragOver,\n  onDragLeave,\n  onDrop,\n  children,\n  ...props\n}: DropZoneProps) => {\n  const [active, setActive] = React.useState(false);\n\n  const onActive: React.DragEventHandler<HTMLDivElement> = (event) => {\n    if (event.isPropagationStopped()) {\n      return;\n    }\n\n    setActive(true);\n  };\n\n  const offActive: React.DragEventHandler<HTMLDivElement> = () => {\n    setActive(false);\n  };\n\n  return (\n    <RootComponent\n      baseClassName={classNames(styles['DropZone'], active && styles['DropZone--active'])}\n      onDragOver={callMultiple(onDragOver, onActive)}\n      onDragLeave={callMultiple(onDragLeave, offActive)}\n      onDrop={callMultiple(onDrop, offActive)}\n      {...props}\n    >\n      {typeof children === 'function' ? children({ active }) : children}\n    </RootComponent>\n  );\n};\n\nDropZone.displayName = 'DropZone';\n\nDropZone.Grid = DropZoneGrid;\nDropZone.Grid.displayName = 'DropZone.Grid';\n"],"names":["React","classNames","callMultiple","RootComponent","DropZoneGrid","styles","DropZone","onDragOver","onDragLeave","onDrop","children","props","active","setActive","useState","onActive","event","isPropagationStopped","offActive","baseClassName","displayName","Grid"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,OAAOC,YAAY,wBAAwB;AAU3C;;;;;;CAMC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,EACR,GAAGC,OACW;IACd,MAAM,CAACC,QAAQC,UAAU,GAAGb,MAAMc,QAAQ,CAAC;IAE3C,MAAMC,WAAmD,CAACC;QACxD,IAAIA,MAAMC,oBAAoB,IAAI;YAChC;QACF;QAEAJ,UAAU;IACZ;IAEA,MAAMK,YAAoD;QACxDL,UAAU;IACZ;IAEA,qBACE,KAACV;QACCgB,eAAelB,WAAWI,MAAM,CAAC,WAAW,EAAEO,UAAUP,MAAM,CAAC,mBAAmB;QAClFE,YAAYL,aAAaK,YAAYQ;QACrCP,aAAaN,aAAaM,aAAaU;QACvCT,QAAQP,aAAaO,QAAQS;QAC5B,GAAGP,KAAK;kBAER,OAAOD,aAAa,aAAaA,SAAS;YAAEE;QAAO,KAAKF;;AAG/D,EAAE;AAEFJ,SAASc,WAAW,GAAG;AAEvBd,SAASe,IAAI,GAAGjB;AAChBE,SAASe,IAAI,CAACD,WAAW,GAAG"}

package/dist/cssm/components/DropZone/components/DropZoneGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/DropZone/components/DropZoneGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './DropZoneGrid.module.css';\n\nconst directionStyle = {\n  row: styles['DropZoneGrid--row'],\n  column: styles['DropZoneGrid--column'],\n};\n\nexport interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  direction?: 'row' | 'column';\n}\n\nexport const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (\n  <RootComponent\n    baseClassName={classNames(styles['DropZoneGrid'], directionStyle[direction])}\n    {...props}\n  />\n);\n\nDropZoneGrid.displayName = 'DropZoneGrid';\n"],"names":["classNames","RootComponent","styles","directionStyle","row","column","DropZoneGrid","direction","props","baseClassName","displayName"],"rangeMappings":";;;;;;;;;;;;","mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,oBAAoB;IAChCG,QAAQH,MAAM,CAAC,uBAAuB;AACxC;AAMA,OAAO,MAAMI,eAAe,CAAC,EAAEC,YAAY,QAAQ,EAAE,GAAGC,OAA0B,iBAChF,KAACP;QACCQ,eAAeT,WAAWE,MAAM,CAAC,eAAe,EAAEC,cAAc,CAACI,UAAU;QAC1E,GAAGC,KAAK;OAEX;AAEFF,aAAaI,WAAW,GAAG"}
+{"version":3,"sources":["../../../../../src/components/DropZone/components/DropZoneGrid.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../../types';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport styles from './DropZoneGrid.module.css';\n\nconst directionStyle = {\n  row: styles['DropZoneGrid--row'],\n  column: styles['DropZoneGrid--column'],\n};\n\nexport interface DropZoneGridProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  direction?: 'row' | 'column';\n}\n\nexport const DropZoneGrid = ({ direction = 'column', ...props }: DropZoneGridProps) => (\n  <RootComponent\n    baseClassName={classNames(styles['DropZoneGrid'], directionStyle[direction])}\n    {...props}\n  />\n);\n\nDropZoneGrid.displayName = 'DropZoneGrid';\n"],"names":["classNames","RootComponent","styles","directionStyle","row","column","DropZoneGrid","direction","props","baseClassName","displayName"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,oCAAoC;AAClE,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,oBAAoB;IAChCG,QAAQH,MAAM,CAAC,uBAAuB;AACxC;AAMA,OAAO,MAAMI,eAAe,CAAC,EAAEC,YAAY,QAAQ,EAAE,GAAGC,OAA0B,iBAChF,KAACP;QACCQ,eAAeT,WAAWE,MAAM,CAAC,eAAe,EAAEC,cAAc,CAACI,UAAU;QAC1E,GAAGC,KAAK;OAEX;AAEFF,aAAaI,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20ChevronUp,\n  Icon20Dropdown,\n  Icon24ChevronDown,\n  Icon24ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HTMLAttributesWithRootRef } from '../../types';\n\nexport interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGElement> {\n  opened?: boolean;\n}\n\nexport const DropdownIcon = ({ opened = false, className, ...restProps }: DropdownIconProps) => {\n  const { sizeY } = useAdaptivityConditionalRender();\n  const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n  const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n  return (\n    <React.Fragment>\n      {sizeY.compact && (\n        <IconCompact className={classNames(sizeY.compact.className, className)} {...restProps} />\n      )}\n      {sizeY.regular && (\n        <IconRegular className={classNames(sizeY.regular.className, className)} {...restProps} />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","Icon20ChevronUp","Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","classNames","useAdaptivityConditionalRender","DropdownIcon","opened","className","restProps","sizeY","IconCompact","IconRegular","Fragment","compact","regular"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,QACV,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAO5F,OAAO,MAAMC,eAAe,CAAC,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAA8B;IACzF,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAClB,MAAMM,cAAcJ,SAASP,kBAAkBC;IAC/C,MAAMW,cAAcL,SAASJ,kBAAkBD;IAE/C,qBACE,MAACH,MAAMc,QAAQ;;YACZH,MAAMI,OAAO,kBACZ,KAACH;gBAAYH,WAAWJ,WAAWM,MAAMI,OAAO,CAACN,SAAS,EAAEA;gBAAa,GAAGC,SAAS;;YAEtFC,MAAMK,OAAO,kBACZ,KAACH;gBAAYJ,WAAWJ,WAAWM,MAAMK,OAAO,CAACP,SAAS,EAAEA;gBAAa,GAAGC,SAAS;;;;AAI7F,EAAE"}
+{"version":3,"sources":["../../../../src/components/DropdownIcon/DropdownIcon.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20ChevronUp,\n  Icon20Dropdown,\n  Icon24ChevronDown,\n  Icon24ChevronUp,\n} from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { HTMLAttributesWithRootRef } from '../../types';\n\nexport interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGElement> {\n  opened?: boolean;\n}\n\nexport const DropdownIcon = ({ opened = false, className, ...restProps }: DropdownIconProps) => {\n  const { sizeY } = useAdaptivityConditionalRender();\n  const IconCompact = opened ? Icon20ChevronUp : Icon20Dropdown;\n  const IconRegular = opened ? Icon24ChevronUp : Icon24ChevronDown;\n\n  return (\n    <React.Fragment>\n      {sizeY.compact && (\n        <IconCompact className={classNames(sizeY.compact.className, className)} {...restProps} />\n      )}\n      {sizeY.regular && (\n        <IconRegular className={classNames(sizeY.regular.className, className)} {...restProps} />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","Icon20ChevronUp","Icon20Dropdown","Icon24ChevronDown","Icon24ChevronUp","classNames","useAdaptivityConditionalRender","DropdownIcon","opened","className","restProps","sizeY","IconCompact","IconRegular","Fragment","compact","regular"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,eAAe,EACfC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,QACV,mBAAmB;AAC1B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAO5F,OAAO,MAAMC,eAAe,CAAC,EAAEC,SAAS,KAAK,EAAEC,SAAS,EAAE,GAAGC,WAA8B;IACzF,MAAM,EAAEC,KAAK,EAAE,GAAGL;IAClB,MAAMM,cAAcJ,SAASP,kBAAkBC;IAC/C,MAAMW,cAAcL,SAASJ,kBAAkBD;IAE/C,qBACE,MAACH,MAAMc,QAAQ;;YACZH,MAAMI,OAAO,kBACZ,KAACH;gBAAYH,WAAWJ,WAAWM,MAAMI,OAAO,CAACN,SAAS,EAAEA;gBAAa,GAAGC,SAAS;;YAEtFC,MAAMK,OAAO,kBACZ,KAACH;gBAAYJ,WAAWJ,WAAWM,MAAMK,OAAO,CAACP,SAAS,EAAEA;gBAAa,GAAGC,SAAS;;;;AAI7F,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  tabbar?: React.ReactNode;\n  activeStory: string;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nconst warn = warnOnce('Epic');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = ({ activeStory, tabbar, children, ...restProps }: EpicProps) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n\n  const story =\n    (React.Children.toArray(children).find(\n      (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n    ) as React.ReactElement | undefined) ?? null;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar')}\n    >\n      <ScrollSaver\n        key={activeStory}\n        initialScroll={scroll[activeStory] || 0}\n        saveScroll={(value) => (scroll[activeStory] = value)}\n      >\n        {story}\n      </ScrollSaver>\n      {tabbar}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","getNavId","warnOnce","RootComponent","ScrollSaver","styles","warn","Epic","activeStory","tabbar","children","restProps","scroll","useRef","current","story","Children","toArray","find","isValidElement","props","baseClassName","initialScroll","saveScroll","value"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAQvC,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,OAAO,CAAC,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAsB;IAC7E,MAAMC,SAASb,MAAMc,MAAM,CAA4B,CAAC,GAAGC,OAAO;IAElE,MAAMC,QACJ,AAAChB,MAAMiB,QAAQ,CAACC,OAAO,CAACP,UAAUQ,IAAI,CACpC,CAACH,sBAAUhB,MAAMoB,cAAc,CAACJ,UAAUd,SAASc,MAAMK,KAAK,EAAEd,UAAUE,gBACpC;IAE1C,qBACE,MAACL;QACE,GAAGQ,SAAS;QACbU,eAAerB,WAAWK,MAAM,CAAC,OAAO,EAAEI,UAAU;;0BAEpD,KAACL;gBAECkB,eAAeV,MAAM,CAACJ,YAAY,IAAI;gBACtCe,YAAY,CAACC,QAAWZ,MAAM,CAACJ,YAAY,GAAGgB;0BAE7CT;eAJIP;YAMNC;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Epic/Epic.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  tabbar?: React.ReactNode;\n  activeStory: string;\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\nconst warn = warnOnce('Epic');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Epic\n */\nexport const Epic = ({ activeStory, tabbar, children, ...restProps }: EpicProps) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n\n  const story =\n    (React.Children.toArray(children).find(\n      (story) => React.isValidElement(story) && getNavId(story.props, warn) === activeStory,\n    ) as React.ReactElement | undefined) ?? null;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar')}\n    >\n      <ScrollSaver\n        key={activeStory}\n        initialScroll={scroll[activeStory] || 0}\n        saveScroll={(value) => (scroll[activeStory] = value)}\n      >\n        {story}\n      </ScrollSaver>\n      {tabbar}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","getNavId","warnOnce","RootComponent","ScrollSaver","styles","warn","Epic","activeStory","tabbar","children","restProps","scroll","useRef","current","story","Children","toArray","find","isValidElement","props","baseClassName","initialScroll","saveScroll","value"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAQvC,MAAMC,OAAOJ,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMK,OAAO,CAAC,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGC,WAAsB;IAC7E,MAAMC,SAASb,MAAMc,MAAM,CAA4B,CAAC,GAAGC,OAAO;IAElE,MAAMC,QACJ,AAAChB,MAAMiB,QAAQ,CAACC,OAAO,CAACP,UAAUQ,IAAI,CACpC,CAACH,sBAAUhB,MAAMoB,cAAc,CAACJ,UAAUd,SAASc,MAAMK,KAAK,EAAEd,UAAUE,gBACpC;IAE1C,qBACE,MAACL;QACE,GAAGQ,SAAS;QACbU,eAAerB,WAAWK,MAAM,CAAC,OAAO,EAAEI,UAAU;;0BAEpD,KAACL;gBAECkB,eAAeV,MAAM,CAACJ,YAAY,IAAI;gBACtCe,YAAY,CAACC,QAAWZ,MAAM,CAACJ,YAAY,GAAGgB;0BAE7CT;eAJIP;YAMNC;;;AAGP,EAAE"}

package/dist/cssm/components/Epic/ScrollSaver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps extends HasChildren {\n  initialScroll?: number;\n  saveScroll: (this: void, scroll: number) => any;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({ children, initialScroll, saveScroll }: ScrollSaverProps) => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === 'number') {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"names":["React","useIsomorphicLayoutEffect","ScrollContext","ScrollSaver","children","initialScroll","saveScroll","getScroll","scrollTo","useContext","y","Fragment"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,UAAU,EAAoB;IACnF,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGR,MAAMS,UAAU,CAACP;IACjDD,0BAA0B;QACxB,IAAI,OAAOI,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd;QACA,OAAO,IAAMC,WAAWC,YAAYG,CAAC;IACvC,GAAG,EAAE;IACL,qBAAO,KAACV,MAAMW,QAAQ;kBAAEP;;AAC1B,EAAE"}
+{"version":3,"sources":["../../../../src/components/Epic/ScrollSaver.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasChildren } from '../../types';\nimport { ScrollContext } from '../AppRoot/ScrollContext';\n\nexport interface ScrollSaverProps extends HasChildren {\n  initialScroll?: number;\n  saveScroll: (this: void, scroll: number) => any;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScrollSaver\n */\nexport const ScrollSaver = ({ children, initialScroll, saveScroll }: ScrollSaverProps) => {\n  const { getScroll, scrollTo } = React.useContext(ScrollContext);\n  useIsomorphicLayoutEffect(() => {\n    if (typeof initialScroll === 'number') {\n      scrollTo(0, initialScroll);\n    }\n    return () => saveScroll(getScroll().y);\n  }, []);\n  return <React.Fragment>{children}</React.Fragment>;\n};\n"],"names":["React","useIsomorphicLayoutEffect","ScrollContext","ScrollSaver","children","initialScroll","saveScroll","getScroll","scrollTo","useContext","y","Fragment"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,aAAa,QAAQ,2BAA2B;AAOzD;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,UAAU,EAAoB;IACnF,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGR,MAAMS,UAAU,CAACP;IACjDD,0BAA0B;QACxB,IAAI,OAAOI,kBAAkB,UAAU;YACrCG,SAAS,GAAGH;QACd;QACA,OAAO,IAAMC,WAAWC,YAAYG,CAAC;IACvC,GAAG,EAAE;IACL,qBAAO,KAACV,MAAMW,QAAQ;kBAAEP;;AAC1B,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button, VKUIButtonProps } from '../Button/Button';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, 'type'>,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n  children = 'Выберите файл',\n  align = 'left',\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps) => {\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      className={className}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHidden title=\"\" {...restProps} Component=\"input\" type=\"file\" getRootRef={getRef} />\n      {children}\n    </Button>\n  );\n};\n"],"names":["React","Button","VisuallyHidden","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Component","disabled","title","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAyB,mBAAmB;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAQlE;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,WAAW,eAAe,EAC1BC,QAAQ,MAAM,EACdC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,UAAU,EACV,GAAGC,WACO;IACV,qBACE,MAAChB;QACCiB,WAAU;QACVb,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZI,UAAUF,UAAUE,QAAQ;;0BAE5B,KAACjB;gBAAekB,OAAM;gBAAI,GAAGH,SAAS;gBAAEC,WAAU;gBAAQG,MAAK;gBAAON,YAAYD;;YACjFV;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/File/File.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRef, HasRootRef } from '../../types';\nimport { Button, VKUIButtonProps } from '../Button/Button';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\n\nexport interface FileProps\n  extends Omit<VKUIButtonProps, 'type'>,\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/File\n */\nexport const File = ({\n  children = 'Выберите файл',\n  align = 'left',\n  size,\n  mode,\n  stretched,\n  before,\n  after,\n  loading,\n  className,\n  style,\n  getRef,\n  getRootRef,\n  appearance,\n  ...restProps\n}: FileProps) => {\n  return (\n    <Button\n      Component=\"label\"\n      align={align}\n      className={className}\n      stretched={stretched}\n      mode={mode}\n      appearance={appearance}\n      size={size}\n      before={before}\n      after={after}\n      loading={loading}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={restProps.disabled}\n    >\n      <VisuallyHidden title=\"\" {...restProps} Component=\"input\" type=\"file\" getRootRef={getRef} />\n      {children}\n    </Button>\n  );\n};\n"],"names":["React","Button","VisuallyHidden","File","children","align","size","mode","stretched","before","after","loading","className","style","getRef","getRootRef","appearance","restProps","Component","disabled","title","type"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAyB,mBAAmB;AAC3D,SAASC,cAAc,QAAQ,mCAAmC;AAQlE;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,WAAW,eAAe,EAC1BC,QAAQ,MAAM,EACdC,IAAI,EACJC,IAAI,EACJC,SAAS,EACTC,MAAM,EACNC,KAAK,EACLC,OAAO,EACPC,SAAS,EACTC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,UAAU,EACV,GAAGC,WACO;IACV,qBACE,MAAChB;QACCiB,WAAU;QACVb,OAAOA;QACPO,WAAWA;QACXJ,WAAWA;QACXD,MAAMA;QACNS,YAAYA;QACZV,MAAMA;QACNG,QAAQA;QACRC,OAAOA;QACPC,SAASA;QACTE,OAAOA;QACPE,YAAYA;QACZI,UAAUF,UAAUE,QAAQ;;0BAE5B,KAACjB;gBAAekB,OAAM;gBAAI,GAAGH,SAAS;gBAAEC,WAAU;gBAAQG,MAAK;gBAAON,YAAYD;;YACjFV;;;AAGP,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"FixedLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAaxD,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,+FASrB,gBAAgB,4CA6ClB,CAAC"}
+{"version":3,"file":"FixedLayout.d.ts","sourceRoot":"","sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAaxD,MAAM,WAAW,gBAAiB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACjF,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,+FASrB,gBAAgB,4CA6DlB,CAAC"}

package/dist/cssm/components/FixedLayout/FixedLayout.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
+import { useResizeObserver } from '../../hooks/useResizeObserver';
 import { useDOM } from '../../lib/dom';
+import { setRef } from '../../lib/utils';
 import { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';
 import { SplitColContext } from '../SplitCol/SplitColContext';
 import styles from './FixedLayout.module.css';
@@ -16,13 +18,24 @@ const stylesVertical = {
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */ export const FixedLayout = ({ children, style, vertical, getRootRef, filled, className, useParentWidth, ...restProps })=>{
     const platform = usePlatform();
-    const ref = useExternRef(getRootRef);
+    const ref = React.useRef(null);
     const [width, setWidth] = React.useState(undefined);
     const { window } = useDOM();
     const { colRef } = React.useContext(SplitColContext);
+    const parentRef = React.useRef(null);
+    const handleRootRef = useCallback((node)=>{
+        if (!node) {
+            return;
+        }
+        setRef(node, getRootRef);
+        setRef(node, ref);
+        setRef(node.parentElement, parentRef);
+    }, [
+        getRootRef
+    ]);
     const doResize = ()=>{
-        if (useParentWidth && ref.current) {
-            const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;
+        if (useParentWidth && parentRef.current) {
+            const parentWidth = parentRef.current.getBoundingClientRect().width;
             setWidth(parentWidth ? `${parentWidth}px` : undefined);
         } else if (colRef?.current) {
             const computedStyle = getComputedStyle(colRef.current);
@@ -38,10 +51,11 @@ const stylesVertical = {
         useParentWidth
     ]);
     useGlobalEventListener(window, 'resize', doResize);
+    useResizeObserver(useParentWidth ? parentRef : colRef, doResize);
     return /*#__PURE__*/ _jsx(OnboardingTooltipContainer, {
         ...restProps,
         fixed: true,
-        ref: ref,
+        ref: handleRootRef,
         className: classNames(styles['FixedLayout'], platform === 'ios' && 'vkuiInternalFixedLayout--ios', filled && styles['FixedLayout--filled'], vertical && stylesVertical[vertical], className),
         style: {
             ...style,