@vkontakte/vkui 5.7.2 → 5.8.0

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 { HasRef } 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 React.HTMLAttributes<HTMLElement>,\n    HasRef<HTMLDivElement>,\n    TrackerOptionsProps {\n  targetRef: React.RefObject<HTMLElement>;\n  placement?: Placement;\n  scrollBoxRef?: React.Ref<HTMLDivElement>;\n  fetching?: boolean;\n  offsetDistance?: number;\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (placement?: Placement) => void;\n}\n\nconst calcIsTop = (placement?: Placement) => placement?.includes('top');\n\nexport const CustomSelectDropdown = ({\n  children,\n  targetRef,\n  scrollBoxRef,\n  placement,\n  fetching,\n  onPlacementChange: parentOnPlacementChange,\n  offsetDistance = 0,\n  sameWidth = true,\n  forcePortal = true,\n  autoHideScrollbar,\n  autoHideScrollbarDelay,\n  className,\n  ...restProps\n}: CustomSelectDropdownProps) => {\n  const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));\n\n  const onPlacementChange = React.useCallback(\n    ({ placement }: { placement?: Placement }) => {\n      setIsTop(calcIsTop(placement));\n      parentOnPlacementChange?.(placement);\n    },\n    [parentOnPlacementChange, setIsTop],\n  );\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetDistance={offsetDistance}\n      sameWidth={sameWidth}\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        sameWidth &&\n          classNames(\n            styles['CustomSelectDropdown--wide'],\n            'vkuiInternalCustomSelectDropdown--wide',\n          ),\n        className,\n      )}\n      forcePortal={forcePortal}\n      autoUpdateOnTargetResize\n      {...restProps}\n    >\n      <CustomScrollView\n        boxRef={scrollBoxRef}\n        className={styles['CustomSelectDropdown__in']}\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","includes","CustomSelectDropdown","children","targetRef","scrollBoxRef","fetching","onPlacementChange","parentOnPlacementChange","offsetDistance","sameWidth","forcePortal","autoHideScrollbar","autoHideScrollbarDelay","className","restProps","isTop","setIsTop","useState","useCallback","autoUpdateOnTargetResize","boxRef","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;AAgBvD,MAAMC,YAAY,CAACC,YAA0BA,WAAWC,SAAS;AAEjE,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZL,SAAS,EACTM,QAAQ,EACRC,mBAAmBC,uBAAuB,EAC1CC,iBAAiB,CAAC,EAClBC,YAAY,IAAI,EAChBC,cAAc,IAAI,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,SAAS,EACT,GAAGC,WACuB;IAC1B,MAAM,CAACC,OAAOC,SAAS,GAAGxB,MAAMyB,QAAQ,CAAC,IAAMnB,UAAUC;IAEzD,MAAMO,oBAAoBd,MAAM0B,WAAW,CACzC,CAAC,EAAEnB,SAAS,EAA6B;QACvCiB,SAASlB,UAAUC;QACnBQ,0BAA0BR;IAC5B,GACA;QAACQ;QAAyBS;KAAS;IAGrC,qBACE,oBAACrB;QACCQ,WAAWA;QACXK,gBAAgBA;QAChBC,WAAWA;QACXH,mBAAmBA;QACnBP,WAAWA;QACXc,WAAWpB,WACTI,MAAM,CAAC,uBAAuB,EAC9B,oCACAW,mBAAmB,KAChBO,CAAAA,QAAQlB,MAAM,CAAC,4BAA4B,GAAGA,MAAM,CAAC,+BAA+B,AAAD,GACtFY,aACEhB,WACEI,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB;QAEFH,aAAaA;QACbS,0BAAAA;QACC,GAAGL,SAAS;qBAEb,oBAACpB;QACC0B,QAAQhB;QACRS,WAAWhB,MAAM,CAAC,2BAA2B;QAC7Cc,mBAAmBA;QACnBC,wBAAwBA;OAEvBP,yBACC,oBAACgB;QAAIR,WAAWhB,MAAM,CAAC,iCAAiC;qBACtD,oBAACD;QAAQ0B,MAAK;UAGhBpB;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  sameWidth?: boolean;\n  forcePortal?: boolean;\n  onPlacementChange?: (placement?: Placement) => void;\n}\n\nconst calcIsTop = (placement?: Placement) => placement?.includes('top');\n\nexport const CustomSelectDropdown = ({\n  children,\n  targetRef,\n  scrollBoxRef,\n  placement,\n  fetching,\n  onPlacementChange: parentOnPlacementChange,\n  offsetDistance = 0,\n  sameWidth = true,\n  forcePortal = true,\n  autoHideScrollbar,\n  autoHideScrollbarDelay,\n  className,\n  ...restProps\n}: CustomSelectDropdownProps) => {\n  const [isTop, setIsTop] = React.useState(() => calcIsTop(placement));\n\n  const onPlacementChange = React.useCallback(\n    ({ placement }: { placement?: Placement }) => {\n      setIsTop(calcIsTop(placement));\n      parentOnPlacementChange?.(placement);\n    },\n    [parentOnPlacementChange, setIsTop],\n  );\n\n  return (\n    <Popper\n      targetRef={targetRef}\n      offsetDistance={offsetDistance}\n      sameWidth={sameWidth}\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        sameWidth &&\n          classNames(\n            styles['CustomSelectDropdown--wide'],\n            'vkuiInternalCustomSelectDropdown--wide',\n          ),\n        className,\n      )}\n      forcePortal={forcePortal}\n      autoUpdateOnTargetResize\n      {...restProps}\n    >\n      <CustomScrollView\n        boxRef={scrollBoxRef}\n        className={styles['CustomSelectDropdown__in']}\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","includes","CustomSelectDropdown","children","targetRef","scrollBoxRef","fetching","onPlacementChange","parentOnPlacementChange","offsetDistance","sameWidth","forcePortal","autoHideScrollbar","autoHideScrollbarDelay","className","restProps","isTop","setIsTop","useState","useCallback","autoUpdateOnTargetResize","boxRef","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;AAevD,MAAMC,YAAY,CAACC,YAA0BA,WAAWC,SAAS;AAEjE,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,QAAQ,EACRC,SAAS,EACTC,YAAY,EACZL,SAAS,EACTM,QAAQ,EACRC,mBAAmBC,uBAAuB,EAC1CC,iBAAiB,CAAC,EAClBC,YAAY,IAAI,EAChBC,cAAc,IAAI,EAClBC,iBAAiB,EACjBC,sBAAsB,EACtBC,SAAS,EACT,GAAGC,WACuB;IAC1B,MAAM,CAACC,OAAOC,SAAS,GAAGxB,MAAMyB,QAAQ,CAAC,IAAMnB,UAAUC;IAEzD,MAAMO,oBAAoBd,MAAM0B,WAAW,CACzC,CAAC,EAAEnB,SAAS,EAA6B;QACvCiB,SAASlB,UAAUC;QACnBQ,0BAA0BR;IAC5B,GACA;QAACQ;QAAyBS;KAAS;IAGrC,qBACE,oBAACrB;QACCQ,WAAWA;QACXK,gBAAgBA;QAChBC,WAAWA;QACXH,mBAAmBA;QACnBP,WAAWA;QACXc,WAAWpB,WACTI,MAAM,CAAC,uBAAuB,EAC9B,oCACAW,mBAAmB,KAChBO,CAAAA,QAAQlB,MAAM,CAAC,4BAA4B,GAAGA,MAAM,CAAC,+BAA+B,AAAD,GACtFY,aACEhB,WACEI,MAAM,CAAC,6BAA6B,EACpC,2CAEJgB;QAEFH,aAAaA;QACbS,0BAAAA;QACC,GAAGL,SAAS;qBAEb,oBAACpB;QACC0B,QAAQhB;QACRS,WAAWhB,MAAM,CAAC,2BAA2B;QAC7Cc,mBAAmBA;QACnBC,wBAAwBA;OAEvBP,yBACC,oBAACgB;QAAIR,WAAWhB,MAAM,CAAC,iCAAiC;qBACtD,oBAACD;QAAQ0B,MAAK;UAGhBpB;AAKV,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface CustomSelectOptionProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Вставляет основной контент.
      * @deprecated since v6.0.0

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 { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectOption--sizeY-none'],\n  [SizeType.REGULAR]: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  /**\n   * Вставляет основной контент.\n   * @deprecated since v6.0.0\n   */\n  option?: any;\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), то свойство явно должно выставляться только через структуру `options`.\n   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n   * опции.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('CustomSelectOption');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered,\n  selected,\n  before,\n  after,\n  option,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  onClick,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const title = typeof children === 'string' ? children : undefined;\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\n  if (!!option && process.env.NODE_ENV === 'development') {\n    // TODO [>=6]: Удалить св-во `option`\n    warn('Свойство option было добавлено по ошибке и будет удалено в v6.0.0.');\n  }\n\n  return (\n    <Paragraph\n      {...restProps}\n      onClick={disabled ? undefined : onClick}\n      Component=\"div\"\n      role=\"option\"\n      title={title}\n      aria-disabled={disabled}\n      aria-selected={selected}\n      className={classNames(\n        styles['CustomSelectOption'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        hovered && !disabled && 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']}>{description}</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","SizeType","warnOnce","Footnote","Paragraph","styles","sizeYClassNames","none","REGULAR","warn","CustomSelectOption","children","hierarchy","hovered","selected","before","after","option","description","disabled","style","styleProp","className","onClick","restProps","title","undefined","sizeY","useMemo","process","env","NODE_ENV","Component","role","aria-disabled","aria-selected","COMPACT","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,oCAAoC;AACjE;AAkDA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,QAAQ,OAAOd,aAAa,WAAWA,WAAWe;IACxD,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAMoB,QAAQxB,MAAMgC,OAAO,CACzB,IACEhB,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,WACN;QAACT;QAAWS;KAAU;IAGxB,IAAI,CAAC,CAACJ,UAAUY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACtD,qCAAqC;QACrCtB,KAAK;IACP;IAEA,qBACE,oBAACL;QACE,GAAGoB,SAAS;QACbD,SAASJ,WAAWO,YAAYH;QAChCS,WAAU;QACVC,MAAK;QACLR,OAAOA;QACPS,iBAAef;QACfgB,iBAAerB;QACfQ,WAAWxB,WACTO,MAAM,CAAC,qBAAqB,EAC5BsB,UAAU1B,SAASmC,OAAO,IAAI9B,eAAe,CAACqB,MAAM,EACpDd,WAAW,CAACM,YAAYd,MAAM,CAAC,4BAA4B,EAC3Dc,YAAYd,MAAM,CAAC,+BAA+B,EAClDO,YAAY,KAAKP,MAAM,CAAC,gCAAgC,EACxDiB;QAEFF,OAAOA;OAENrB,aAAagB,yBAAW,oBAACsB;QAAIf,WAAWjB,MAAM,CAAC,6BAA6B;OAAGU,uBAChF,oBAACsB;QAAIf,WAAWjB,MAAM,CAAC,2BAA2B;qBAChD,oBAACgC;QAAIf,WAAWjB,MAAM,CAAC,+BAA+B;OAAGM,WACxDZ,aAAamB,8BACZ,oBAACf;QAASmB,WAAWjB,MAAM,CAAC,kCAAkC;OAAGa,6BAGrE,oBAACmB;QAAIf,WAAWjB,MAAM,CAAC,4BAA4B;OAChDN,aAAaiB,wBAAU,oBAACqB,aAAKrB,QAC7BF,0BAAY,oBAACjB;QAAWyB,WAAWjB,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 { SizeType } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Paragraph } from '../Typography/Paragraph/Paragraph';\nimport styles from './CustomSelectOption.module.css';\n\nconst sizeYClassNames = {\n  none: styles['CustomSelectOption--sizeY-none'],\n  [SizeType.REGULAR]: styles['CustomSelectOption--sizeY-regular'],\n};\n\nexport interface CustomSelectOptionProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Вставляет основной контент.\n   * @deprecated since v6.0.0\n   */\n  option?: any;\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), то свойство явно должно выставляться только через структуру `options`.\n   * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии\n   * опции.\n   */\n  disabled?: boolean;\n}\n\nconst warn = warnOnce('CustomSelectOption');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/CustomSelectOption\n */\nexport const CustomSelectOption = ({\n  children,\n  hierarchy = 0,\n  hovered,\n  selected,\n  before,\n  after,\n  option,\n  description,\n  disabled,\n  style: styleProp,\n  className,\n  onClick,\n  ...restProps\n}: CustomSelectOptionProps) => {\n  const title = typeof children === 'string' ? children : undefined;\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\n  if (!!option && process.env.NODE_ENV === 'development') {\n    // TODO [>=6]: Удалить св-во `option`\n    warn('Свойство option было добавлено по ошибке и будет удалено в v6.0.0.');\n  }\n\n  return (\n    <Paragraph\n      {...restProps}\n      onClick={disabled ? undefined : onClick}\n      Component=\"div\"\n      role=\"option\"\n      title={title}\n      aria-disabled={disabled}\n      aria-selected={selected}\n      className={classNames(\n        styles['CustomSelectOption'],\n        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],\n        hovered && !disabled && 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']}>{description}</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","SizeType","warnOnce","Footnote","Paragraph","styles","sizeYClassNames","none","REGULAR","warn","CustomSelectOption","children","hierarchy","hovered","selected","before","after","option","description","disabled","style","styleProp","className","onClick","restProps","title","undefined","sizeY","useMemo","process","env","NODE_ENV","Component","role","aria-disabled","aria-selected","COMPACT","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,SAAS,QAAQ,oCAAoC;AAC9D,OAAOC,YAAY,kCAAkC;AAErD,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,iCAAiC;IAC9C,CAACJ,SAASO,OAAO,CAAC,EAAEH,MAAM,CAAC,oCAAoC;AACjE;AAgDA,MAAMI,OAAOP,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMQ,qBAAqB,CAAC,EACjCC,QAAQ,EACRC,YAAY,CAAC,EACbC,OAAO,EACPC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,OAAOC,SAAS,EAChBC,SAAS,EACTC,OAAO,EACP,GAAGC,WACqB;IACxB,MAAMC,QAAQ,OAAOd,aAAa,WAAWA,WAAWe;IACxD,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG3B;IAC3B,MAAMoB,QAAQxB,MAAMgC,OAAO,CACzB,IACEhB,YAAY,IACR;YACE,yDAAyDA;YACzD,GAAGS,SAAS;QACd,IACAA,WACN;QAACT;QAAWS;KAAU;IAGxB,IAAI,CAAC,CAACJ,UAAUY,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QACtD,qCAAqC;QACrCtB,KAAK;IACP;IAEA,qBACE,oBAACL;QACE,GAAGoB,SAAS;QACbD,SAASJ,WAAWO,YAAYH;QAChCS,WAAU;QACVC,MAAK;QACLR,OAAOA;QACPS,iBAAef;QACfgB,iBAAerB;QACfQ,WAAWxB,WACTO,MAAM,CAAC,qBAAqB,EAC5BsB,UAAU1B,SAASmC,OAAO,IAAI9B,eAAe,CAACqB,MAAM,EACpDd,WAAW,CAACM,YAAYd,MAAM,CAAC,4BAA4B,EAC3Dc,YAAYd,MAAM,CAAC,+BAA+B,EAClDO,YAAY,KAAKP,MAAM,CAAC,gCAAgC,EACxDiB;QAEFF,OAAOA;OAENrB,aAAagB,yBAAW,oBAACsB;QAAIf,WAAWjB,MAAM,CAAC,6BAA6B;OAAGU,uBAChF,oBAACsB;QAAIf,WAAWjB,MAAM,CAAC,2BAA2B;qBAChD,oBAACgC;QAAIf,WAAWjB,MAAM,CAAC,+BAA+B;OAAGM,WACxDZ,aAAamB,8BACZ,oBAACf;QAASmB,WAAWjB,MAAM,CAAC,kCAAkC;OAAGa,6BAGrE,oBAACmB;QAAIf,WAAWjB,MAAM,CAAC,4BAA4B;OAChDN,aAAaiB,wBAAU,oBAACqB,aAAKrB,QAC7BF,0BAAY,oBAACjB;QAAWyB,WAAWjB,MAAM,CAAC,mCAAmC;;AAItF,EAAE"}

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
+import { HTMLAttributesWithRootRef } from '../../types';
 export type DatePickerDateFormat = {
     day: number;
     month: number;
     year: number;
 };
-export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {
+export interface DatePickerProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {
     min?: DatePickerDateFormat;
     max?: DatePickerDateFormat;
     name?: string;

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { classNames, leadingZero } from '@vkontakte/vkjs';
+import { leadingZero } from '@vkontakte/vkjs';
 import { range } from '../../helpers/range';
 import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
 import { CustomSelect } from '../CustomSelect/CustomSelect';
 import { Input } from '../Input/Input';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './DatePicker.module.css';
 const DefaultMonths = [
     'Января',
@@ -43,7 +44,7 @@ const DatePickerCustom = ({ name, min = {
     day: 31,
     month: 12,
     year: 2100
-}, dayPlaceholder, monthPlaceholder, yearPlaceholder, popupDirection, defaultValue, monthNames, day = 0, month = 0, year = 0, onDateChange, disabled, className, ...restProps })=>{
+}, dayPlaceholder, monthPlaceholder, yearPlaceholder, popupDirection, defaultValue, monthNames, day = 0, month = 0, year = 0, onDateChange, disabled, ...restProps })=>{
     const onSelectChange = (e)=>{
         onDateChange?.({
             day,
@@ -64,8 +65,8 @@ const DatePickerCustom = ({ name, min = {
             label: String(value),
             value: value
         }));
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classNames(styles['DatePicker'], className),
+    return /*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['DatePicker'],
         ...restProps
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles['DatePicker__container']

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 { classNames, leadingZero } from '@vkontakte/vkjs';\nimport { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input } from '../Input/Input';\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\nexport interface DatePickerProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void;\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({ day = 0, month = 0, year = 0 }: Partial<DatePickerDateFormat>) {\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\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  defaultValue,\n  monthNames,\n  day = 0,\n  month = 0,\n  year = 0,\n  onDateChange,\n  disabled,\n  className,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    onDateChange?.({\n      day,\n      month,\n      year,\n      [e.target.name]: Number(e.target.value),\n    });\n  };\n  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n    label: String(value),\n    value,\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  return (\n    <div className={classNames(styles['DatePicker'], className)} {...restProps}>\n      <div className={styles['DatePicker__container']}>\n        <div className={styles['DatePicker__day']}>\n          <CustomSelect\n            name=\"day\"\n            value={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={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={year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input type=\"hidden\" name={name} value={convertToInputFormat({ day, month, year })} />\n    </div>\n  );\n};\n\nconst DatePickerNative = ({\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  defaultValue,\n  day,\n  month,\n  year,\n  onDateChange,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const defProps =\n    day && month && year ? { defaultValue: convertToInputFormat({ day, month, year }) } : {};\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  return (\n    <Input\n      {...restProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n      {...defProps}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({\n    day: defaultValue?.day || 0,\n    month: defaultValue?.month || 0,\n    year: defaultValue?.year || 0,\n  }));\n\n  const onDateChange = React.useCallback(\n    (update: DatePickerDateFormat) => {\n      setValue(update);\n      props.onDateChange && props.onDateChange({ ...update });\n    },\n    [props],\n  );\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"names":["React","classNames","leadingZero","range","useAdaptivityHasPointer","CustomSelect","Input","styles","DefaultMonths","convertToInputFormat","day","month","year","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","className","restProps","onSelectChange","e","target","value","dayOptions","map","label","String","monthOptions","index","yearOptions","div","options","placeholder","onChange","input","type","DatePickerNative","defProps","onStringChange","useCallback","currentTarget","DatePicker","props","hasPointer","setValue","useState","update","Cmp"],"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 { range } from '../../helpers/range';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { CustomSelect } from '../CustomSelect/CustomSelect';\nimport { Input } 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\nexport interface DatePickerProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'defaultValue' | 'min' | 'max'> {\n  min?: DatePickerDateFormat;\n  max?: DatePickerDateFormat;\n  name?: string;\n  defaultValue?: DatePickerDateFormat;\n  popupDirection?: 'top' | 'bottom';\n  monthNames?: string[];\n  dayPlaceholder?: string;\n  monthPlaceholder?: string;\n  yearPlaceholder?: string;\n  onDateChange?: (value: DatePickerDateFormat) => void;\n  disabled?: boolean;\n}\n\n// Переводим state к формату гг-мм-дд\nfunction convertToInputFormat({ day = 0, month = 0, year = 0 }: Partial<DatePickerDateFormat>) {\n  return `${year}-${leadingZero(month)}-${leadingZero(day)}`;\n}\n\n// Переводим дату формата гг-мм-дд к объекту\nfunction parseInputDate(date: string): DatePickerDateFormat {\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  defaultValue,\n  monthNames,\n  day = 0,\n  month = 0,\n  year = 0,\n  onDateChange,\n  disabled,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const onSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (e) => {\n    onDateChange?.({\n      day,\n      month,\n      year,\n      [e.target.name]: Number(e.target.value),\n    });\n  };\n  const dayOptions = range(1, getMonthMaxDay(month, year)).map((value) => ({\n    label: String(value),\n    value,\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  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={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={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={year}\n            options={yearOptions}\n            placeholder={yearPlaceholder}\n            popupDirection={popupDirection}\n            onChange={onSelectChange}\n            disabled={disabled}\n          />\n        </div>\n      </div>\n      <input type=\"hidden\" name={name} value={convertToInputFormat({ day, month, year })} />\n    </RootComponent>\n  );\n};\n\nconst DatePickerNative = ({\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  defaultValue,\n  day,\n  month,\n  year,\n  onDateChange,\n  ...restProps\n}: DatePickerProps & Partial<DatePickerDateFormat>) => {\n  const defProps =\n    day && month && year ? { defaultValue: convertToInputFormat({ day, month, year }) } : {};\n  const onStringChange: React.ChangeEventHandler<HTMLInputElement> = React.useCallback(\n    (e) => {\n      onDateChange?.(parseInputDate(e.currentTarget.value));\n    },\n    [onDateChange],\n  );\n  return (\n    <Input\n      {...restProps}\n      type=\"date\"\n      onChange={onStringChange}\n      min={convertToInputFormat(min)}\n      max={convertToInputFormat(max)}\n      {...defProps}\n    />\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/DatePicker\n */\nexport const DatePicker = ({ defaultValue, ...props }: DatePickerProps) => {\n  const hasPointer = useAdaptivityHasPointer();\n  const [value, setValue] = React.useState<Partial<DatePickerDateFormat>>(() => ({\n    day: defaultValue?.day || 0,\n    month: defaultValue?.month || 0,\n    year: defaultValue?.year || 0,\n  }));\n\n  const onDateChange = React.useCallback(\n    (update: DatePickerDateFormat) => {\n      setValue(update);\n      props.onDateChange && props.onDateChange({ ...update });\n    },\n    [props],\n  );\n\n  const Cmp = hasPointer ? DatePickerCustom : DatePickerNative;\n  return <Cmp {...props} {...value} onDateChange={onDateChange} />;\n};\n"],"names":["React","leadingZero","range","useAdaptivityHasPointer","CustomSelect","Input","RootComponent","styles","DefaultMonths","convertToInputFormat","day","month","year","parseInputDate","date","splited","split","Number","getMonthMaxDay","Date","getDate","DatePickerCustom","name","min","max","dayPlaceholder","monthPlaceholder","yearPlaceholder","popupDirection","defaultValue","monthNames","onDateChange","disabled","restProps","onSelectChange","e","target","value","dayOptions","map","label","String","monthOptions","index","yearOptions","baseClassName","div","className","options","placeholder","onChange","input","type","DatePickerNative","defProps","onStringChange","useCallback","currentTarget","DatePicker","props","hasPointer","setValue","useState","update","Cmp"],"mappings":"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"}

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { HasRootRef } from '../../types';
-export interface DivProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
-}
+import { HTMLAttributesWithRootRef } from '../../types';
+export type DivProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
  */
-export declare const Div: ({ children, getRootRef, className, ...restProps }: DivProps) => React.JSX.Element;
+export declare const Div: (props: DivProps) => React.JSX.Element;

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

@@ -1,14 +1,11 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Div.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Div
- */ export const Div = ({ children, getRootRef, className, ...restProps })=>{
-    return /*#__PURE__*/ React.createElement("div", {
-        ...restProps,
-        ref: getRootRef,
-        className: classNames(styles['Div'], className)
-    }, children);
-};
+ */ export const Div = (props)=>/*#__PURE__*/ React.createElement(RootComponent, {
+        baseClassName: styles['Div'],
+        ...props
+    });
 
 //# sourceMappingURL=Div.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport styles from './Div.module.css';\n\nexport interface DivProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Div\n */\nexport const Div = ({ children, getRootRef, className, ...restProps }: DivProps) => {\n  return (\n    <div {...restProps} ref={getRootRef} className={classNames(styles['Div'], className)}>\n      {children}\n    </div>\n  );\n};\n"],"names":["React","classNames","styles","Div","children","getRootRef","className","restProps","div","ref"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,mBAAmB;AAMtC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAAC,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGC,WAAqB;IAC7E,qBACE,oBAACC;QAAK,GAAGD,SAAS;QAAEE,KAAKJ;QAAYC,WAAWL,WAAWC,MAAM,CAAC,MAAM,EAAEI;OACvEF;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/Div/Div.tsx"],"sourcesContent":["import * as React from 'react';\nimport { 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":["React","RootComponent","styles","Div","props","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,mBAAmB;AAItC;;CAEC,GACD,OAAO,MAAMC,MAAM,CAACC,sBAAoB,oBAACH;QAAcI,eAAeH,MAAM,CAAC,MAAM;QAAG,GAAGE,KAAK;OAAK"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface DropdownIconProps extends React.HTMLAttributes<SVGSVGElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface DropdownIconProps extends HTMLAttributesWithRootRef<SVGSVGElement> {
     opened?: boolean;
 }
 export declare const DropdownIcon: ({ opened, className, ...restProps }: DropdownIconProps) => React.JSX.Element;

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';\n\nexport interface DropdownIconProps extends React.HTMLAttributes<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;AAM5F,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,oBAACH,MAAMc,QAAQ,QACZH,MAAMI,OAAO,kBACZ,oBAACH;QAAYH,WAAWJ,WAAWM,MAAMI,OAAO,CAACN,SAAS,EAAEA;QAAa,GAAGC,SAAS;QAEtFC,MAAMK,OAAO,kBACZ,oBAACH;QAAYJ,WAAWJ,WAAWM,MAAMK,OAAO,CAACP,SAAS,EAAEA;QAAa,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,oBAACH,MAAMc,QAAQ,QACZH,MAAMI,OAAO,kBACZ,oBAACH;QAAYH,WAAWJ,WAAWM,MAAMI,OAAO,CAACN,SAAS,EAAEA;QAAa,GAAGC,SAAS;QAEtFC,MAAMK,OAAO,kBACZ,oBAACH;QAAYJ,WAAWJ,WAAWM,MAAMK,OAAO,CAACP,SAAS,EAAEA;QAAa,GAAGC,SAAS;;AAI7F,EAAE"}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {
+import { HTMLAttributesWithRootRef } from '../../types';
+export interface EpicProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     tabbar?: React.ReactNode;
     activeStory: string;
     children: React.ReactElement | Iterable<React.ReactElement>;
@@ -7,4 +8,4 @@ export interface EpicProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic
  */
-export declare const Epic: (props: EpicProps) => React.JSX.Element;
+export declare const Epic: ({ activeStory, tabbar, children, ...restProps }: EpicProps) => React.JSX.Element;

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

@@ -2,18 +2,18 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { getNavId } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { ScrollSaver } from './ScrollSaver';
 import styles from './Epic.module.css';
 const warn = warnOnce('Epic');
 /**
  * @see https://vkcom.github.io/VKUI/#/Epic
- */ export const Epic = (props)=>{
+ */ export const Epic = ({ activeStory, tabbar, children, ...restProps })=>{
     const scroll = React.useRef({}).current;
-    const { activeStory, tabbar, children, className, ...restProps } = props;
     const story = React.Children.toArray(children).find((story)=>/*#__PURE__*/ React.isValidElement(story) && getNavId(story.props, warn) === activeStory) ?? null;
-    return /*#__PURE__*/ React.createElement("div", {
+    return /*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
-        className: classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar', className)
+        baseClassName: classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar')
     }, /*#__PURE__*/ React.createElement(ScrollSaver, {
         key: activeStory,
         initialScroll: scroll[activeStory] || 0,

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 { ScrollSaver } from './ScrollSaver';\nimport styles from './Epic.module.css';\n\nexport interface EpicProps extends React.HTMLAttributes<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 = (props: EpicProps) => {\n  const scroll = React.useRef<{ [key: string]: number }>({}).current;\n  const { activeStory, tabbar, children, className, ...restProps } = props;\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    <div\n      {...restProps}\n      className={classNames(styles['Epic'], tabbar && 'vkuiInternalEpic--hasTabbar', className)}\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    </div>\n  );\n};\n"],"names":["React","classNames","getNavId","warnOnce","ScrollSaver","styles","warn","Epic","props","scroll","useRef","current","activeStory","tabbar","children","className","restProps","story","Children","toArray","find","isValidElement","div","key","initialScroll","saveScroll","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,WAAW,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,oBAAoB;AAQvC,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,OAAO,CAACC;IACnB,MAAMC,SAAST,MAAMU,MAAM,CAA4B,CAAC,GAAGC,OAAO;IAClE,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGR;IAEnE,MAAMS,QACJ,AAACjB,MAAMkB,QAAQ,CAACC,OAAO,CAACL,UAAUM,IAAI,CACpC,CAACH,sBAAUjB,MAAMqB,cAAc,CAACJ,UAAUf,SAASe,MAAMT,KAAK,EAAEF,UAAUM,gBACpC;IAE1C,qBACE,oBAACU;QACE,GAAGN,SAAS;QACbD,WAAWd,WAAWI,MAAM,CAAC,OAAO,EAAEQ,UAAU,+BAA+BE;qBAE/E,oBAACX;QACCmB,KAAKX;QACLY,eAAef,MAAM,CAACG,YAAY,IAAI;QACtCa,YAAY,CAACC,QAAWjB,MAAM,CAACG,YAAY,GAAGc;OAE7CT,QAEFJ;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","key","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,oBAACL;QACE,GAAGQ,SAAS;QACbU,eAAerB,WAAWK,MAAM,CAAC,OAAO,EAAEI,UAAU;qBAEpD,oBAACL;QACCkB,KAAKd;QACLe,eAAeX,MAAM,CAACJ,YAAY,IAAI;QACtCgB,YAAY,CAACC,QAAWb,MAAM,CAACJ,YAAY,GAAGiB;OAE7CV,QAEFN;AAGP,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { HasRef, HasRootRef } from '../../types';
-export interface FixedLayoutProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
+import { HasRef, HTMLAttributesWithRootRef } from '../../types';
+export interface FixedLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     vertical?: 'top' | 'bottom';
     /**
      * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.

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

@@ -8,6 +8,10 @@ import { Platform } from '../../lib/platform';
 import { SplitColContext } from '../SplitCol/SplitColContext';
 import { TooltipContainer } from '../Tooltip/TooltipContainer';
 import styles from './FixedLayout.module.css';
+const stylesVertical = {
+    top: styles['FixedLayout--vertical-top'],
+    bottom: classNames(styles['FixedLayout--vertical-bottom'], 'vkuiInternalFixedLayout--vertical-bottom')
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FixedLayout
  */ export const FixedLayout = ({ children, style, vertical, getRootRef, getRef, filled, className, useParentWidth, ...restProps })=>{
@@ -38,10 +42,7 @@ import styles from './FixedLayout.module.css';
         ...restProps,
         fixed: true,
         ref: ref,
-        className: classNames(styles['FixedLayout'], platform === Platform.IOS && 'vkuiInternalFixedLayout--ios', filled && styles['FixedLayout--filled'], vertical && ({
-            top: styles['FixedLayout--vertical-top'],
-            bottom: classNames(styles['FixedLayout--vertical-bottom'], 'vkuiInternalFixedLayout--vertical-bottom')
-        })[vertical], className),
+        className: classNames(styles['FixedLayout'], platform === Platform.IOS && 'vkuiInternalFixedLayout--ios', filled && styles['FixedLayout--filled'], vertical && stylesVertical[vertical], className),
         style: {
             ...style,
             width

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HasRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nexport interface FixedLayoutProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n  /**\n   * Всегда соответствовать ширине родителя.\n   * Ширина пересчитывается по событию `window` `resize`.\n   */\n  useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  className,\n  useParentWidth,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n\n  const doResize = () => {\n    if (useParentWidth && ref.current) {\n      const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    } else if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n  useGlobalEventListener(window, 'resize', doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={ref}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical &&\n          {\n            top: styles['FixedLayout--vertical-top'],\n            bottom: classNames(\n              styles['FixedLayout--vertical-bottom'],\n              'vkuiInternalFixedLayout--vertical-bottom',\n            ),\n          }[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS","top","bottom"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AA0B9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,cAAc,EACd,GAAGC,WACc;IACjB,MAAMC,WAAWhB;IACjB,MAAMiB,MAAMnB,aAAaY,YAAYC,SAAS,6BAA6B;IAC3E,MAAM,CAACO,OAAOC,SAAS,GAAGvB,MAAMwB,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGrB;IACnB,MAAM,EAAEsB,MAAM,EAAE,GAAG3B,MAAM4B,UAAU,CAACrB;IAEpC,MAAMsB,WAAW;QACf,IAAIX,kBAAkBG,IAAIS,OAAO,EAAE;YACjC,MAAMC,cAAcV,IAAIS,OAAO,CAACE,aAAa,EAAEC,wBAAwBX;YACvEC,SAASQ,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGN;QAC9C,OAAO,IAAIE,QAAQG,SAAS;YAC1B,MAAMI,gBAAgBC,iBAAiBR,OAAOG,OAAO;YAErDP,SACE,CAAC,EACCI,OAAOG,OAAO,CAACM,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLhB,SAASE;QACX;IACF;IACAzB,MAAMwC,SAAS,CAACX,UAAU;QAACF;QAAQP;QAAUC;QAAKH;KAAe;IACjEf,uBAAuBuB,QAAQ,UAAUG;IAEzC,qBACE,oBAACrB;QACE,GAAGW,SAAS;QACbsB,OAAAA;QACApB,KAAKA;QACLJ,WAAWhB,WACTQ,MAAM,CAAC,cAAc,EACrBW,aAAad,SAASoC,GAAG,IAAI,gCAC7B1B,UAAUP,MAAM,CAAC,sBAAsB,EACvCI,YACE,CAAA;YACE8B,KAAKlC,MAAM,CAAC,4BAA4B;YACxCmC,QAAQ3C,WACNQ,MAAM,CAAC,+BAA+B,EACtC;QAEJ,CAAA,CAAC,CAACI,SAAS,EACbI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAEU;QAAM;OAExBX;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/FixedLayout/FixedLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport { HasRef, HTMLAttributesWithRootRef } from '../../types';\nimport { SplitColContext } from '../SplitCol/SplitColContext';\nimport { TooltipContainer } from '../Tooltip/TooltipContainer';\nimport styles from './FixedLayout.module.css';\n\nconst stylesVertical = {\n  top: styles['FixedLayout--vertical-top'],\n  bottom: classNames(\n    styles['FixedLayout--vertical-bottom'],\n    'vkuiInternalFixedLayout--vertical-bottom',\n  ),\n};\n\nexport interface FixedLayoutProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  vertical?: 'top' | 'bottom';\n  /**\n   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.\n   * Это часто необходимо для фиксированных кнопок в нижней части экрана.\n   */\n  filled?: boolean;\n  /**\n   * Всегда соответствовать ширине родителя.\n   * Ширина пересчитывается по событию `window` `resize`.\n   */\n  useParentWidth?: boolean;\n}\n\nexport interface FixedLayoutState {\n  position: 'absolute' | null;\n  top: number;\n  bottom: number;\n  width: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FixedLayout\n */\nexport const FixedLayout = ({\n  children,\n  style,\n  vertical,\n  getRootRef,\n  getRef,\n  filled,\n  className,\n  useParentWidth,\n  ...restProps\n}: FixedLayoutProps) => {\n  const platform = usePlatform();\n  const ref = useExternRef(getRootRef, getRef); // TODO [>=6]: удалить getRef\n  const [width, setWidth] = React.useState<string | undefined>(undefined);\n  const { window } = useDOM();\n  const { colRef } = React.useContext(SplitColContext);\n\n  const doResize = () => {\n    if (useParentWidth && ref.current) {\n      const parentWidth = ref.current.parentElement?.getBoundingClientRect().width;\n      setWidth(parentWidth ? `${parentWidth}px` : undefined);\n    } else if (colRef?.current) {\n      const computedStyle = getComputedStyle(colRef.current);\n\n      setWidth(\n        `${\n          colRef.current.clientWidth -\n          parseFloat(computedStyle.paddingLeft) -\n          parseFloat(computedStyle.paddingRight)\n        }px`,\n      );\n    } else {\n      setWidth(undefined);\n    }\n  };\n  React.useEffect(doResize, [colRef, platform, ref, useParentWidth]);\n  useGlobalEventListener(window, 'resize', doResize);\n\n  return (\n    <TooltipContainer\n      {...restProps}\n      fixed\n      ref={ref}\n      className={classNames(\n        styles['FixedLayout'],\n        platform === Platform.IOS && 'vkuiInternalFixedLayout--ios',\n        filled && styles['FixedLayout--filled'],\n        vertical && stylesVertical[vertical],\n        className,\n      )}\n      style={{ ...style, width }}\n    >\n      {children}\n    </TooltipContainer>\n  );\n};\n"],"names":["React","classNames","useExternRef","useGlobalEventListener","usePlatform","useDOM","Platform","SplitColContext","TooltipContainer","styles","stylesVertical","top","bottom","FixedLayout","children","style","vertical","getRootRef","getRef","filled","className","useParentWidth","restProps","platform","ref","width","setWidth","useState","undefined","window","colRef","useContext","doResize","current","parentWidth","parentElement","getBoundingClientRect","computedStyle","getComputedStyle","clientWidth","parseFloat","paddingLeft","paddingRight","useEffect","fixed","IOS"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,eAAe,QAAQ,8BAA8B;AAC9D,SAASC,gBAAgB,QAAQ,8BAA8B;AAC/D,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,iBAAiB;IACrBC,KAAKF,MAAM,CAAC,4BAA4B;IACxCG,QAAQX,WACNQ,MAAM,CAAC,+BAA+B,EACtC;AAEJ;AAyBA;;CAEC,GACD,OAAO,MAAMI,cAAc,CAAC,EAC1BC,QAAQ,EACRC,KAAK,EACLC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,MAAM,EACNC,SAAS,EACTC,cAAc,EACd,GAAGC,WACc;IACjB,MAAMC,WAAWnB;IACjB,MAAMoB,MAAMtB,aAAae,YAAYC,SAAS,6BAA6B;IAC3E,MAAM,CAACO,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAqBC;IAC7D,MAAM,EAAEC,MAAM,EAAE,GAAGxB;IACnB,MAAM,EAAEyB,MAAM,EAAE,GAAG9B,MAAM+B,UAAU,CAACxB;IAEpC,MAAMyB,WAAW;QACf,IAAIX,kBAAkBG,IAAIS,OAAO,EAAE;YACjC,MAAMC,cAAcV,IAAIS,OAAO,CAACE,aAAa,EAAEC,wBAAwBX;YACvEC,SAASQ,cAAc,CAAC,EAAEA,YAAY,EAAE,CAAC,GAAGN;QAC9C,OAAO,IAAIE,QAAQG,SAAS;YAC1B,MAAMI,gBAAgBC,iBAAiBR,OAAOG,OAAO;YAErDP,SACE,CAAC,EACCI,OAAOG,OAAO,CAACM,WAAW,GAC1BC,WAAWH,cAAcI,WAAW,IACpCD,WAAWH,cAAcK,YAAY,EACtC,EAAE,CAAC;QAER,OAAO;YACLhB,SAASE;QACX;IACF;IACA5B,MAAM2C,SAAS,CAACX,UAAU;QAACF;QAAQP;QAAUC;QAAKH;KAAe;IACjElB,uBAAuB0B,QAAQ,UAAUG;IAEzC,qBACE,oBAACxB;QACE,GAAGc,SAAS;QACbsB,OAAAA;QACApB,KAAKA;QACLJ,WAAWnB,WACTQ,MAAM,CAAC,cAAc,EACrBc,aAAajB,SAASuC,GAAG,IAAI,gCAC7B1B,UAAUV,MAAM,CAAC,sBAAsB,EACvCO,YAAYN,cAAc,CAACM,SAAS,EACpCI;QAEFL,OAAO;YAAE,GAAGA,KAAK;YAAEU;QAAM;OAExBX;AAGP,EAAE"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HasComponent, HasRootRef } from '../../types';
-export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {
+export interface FocusTrapProps<T extends HTMLElement = HTMLElement> extends React.AllHTMLAttributes<T>, HasRootRef<T>, HasComponent {
     restoreFocus?: boolean;
     timeout?: number;
     onClose?(): void;
@@ -8,4 +8,4 @@ export interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, Ha
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusTrap
  */
-export declare const FocusTrap: ({ Component, onClose, restoreFocus, timeout, getRootRef, children, ...restProps }: FocusTrapProps) => React.JSX.Element;
+export declare const FocusTrap: <T extends HTMLElement = HTMLElement>({ Component, onClose, restoreFocus, timeout, getRootRef, children, ...restProps }: FocusTrapProps<T>) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = 'div',\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      },\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","focusableNodes","setFocusableNodes","useState","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","display","visibility","getComputedStyle","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture","tabIndex"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps<T extends HTMLElement = HTMLElement>\n  extends React.AllHTMLAttributes<T>,\n    HasRootRef<T>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = <T extends HTMLElement = HTMLElement>({\n  Component = 'div',\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps<T>) => {\n  const ref = useExternRef<T>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return;\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window!.getComputedStyle(focusableEl);\n\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      },\n    );\n\n    if (nodes.length === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || (targetIdx === lastIdx && !e.shiftKey);\n\n      if (shouldFocusFirstNode || (targetIdx === 0 && e.shiftKey)) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","focusableNodes","setFocusableNodes","useState","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","display","visibility","getComputedStyle","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,uBAAuB,EAAEC,IAAI,EAAEC,UAAU,QAAQ,0BAA0B;AACpF,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,cAAc,QAAQ,4BAA4B;AAE3D,MAAMC,qBAA6BN,wBAAwBO,IAAI;AAU/D;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAsC,EAC7DC,YAAY,KAAK,EACjBC,OAAO,EACPC,eAAe,IAAI,EACnBC,UAAU,CAAC,EACXC,UAAU,EACVC,QAAQ,EACR,GAAGC,WACe;IAClB,MAAMC,MAAMnB,aAAgBgB;IAE5B,MAAM,EAAEI,QAAQ,EAAEC,MAAM,EAAE,GAAGf;IAE7B,MAAM,CAACgB,gBAAgBC,kBAAkB,GAAGxB,MAAMyB,QAAQ,CAAuB;IACjF,MAAM,CAACC,gBAAgBC,kBAAkB,GAAG3B,MAAMyB,QAAQ,CAAqB;IAE/E,oBAAoB;IAEpB,MAAM,EAAEG,aAAa,EAAE,GAAG5B,MAAM6B,UAAU,CAACpB;IAC3C,MAAMqB,mBAAmB3B,WAAW;QAClC,IACEyB,iBACA,CAACR,IAAIW,OAAO,EAAEC,SAASX,SAAUY,aAAa,KAC9CV,gBAAgBW,QAChB;YACAX,cAAc,CAAC,EAAE,CAACY,KAAK;QACzB;IACF,GAAGnB;IACHR,0BAA0B;QACxBsB,iBAAiBM,GAAG;IACtB,GAAG,EAAE;IAEL,yBAAyB;IAEzB5B,0BAA0B;QACxB,IAAI,CAACY,IAAIW,OAAO,EAAE;YAChB;QACF;QAEA,MAAMM,QAAuB,EAAE;QAC/BC,MAAMC,SAAS,CAACC,OAAO,CAACC,IAAI,CAC1B,oDAAoD;QACpDrB,IAAIW,OAAO,CAACW,gBAAgB,CAAChC,qBAC7B,CAACiC;YACC,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGvB,OAAQwB,gBAAgB,CAACH;YAEzD,IAAIC,YAAY,UAAUC,eAAe,UAAU;gBACjDR,MAAMU,IAAI,CAACJ;YACb;QACF;QAGF,IAAIN,MAAMH,MAAM,KAAK,GAAG;YACtB,sCAAsC;YACtCG,MAAMU,IAAI,CAAC3B,IAAIW,OAAO;QACxB;QAEAP,kBAAkBa;IACpB,GAAG;QAACnB;KAAS;IAEb,sBAAsB;IAEtB,MAAM8B,qBAAqB7C,WAAW;QACpC,IAAIuB,gBAAgB;YAClBA,eAAeS,KAAK;QACtB;IACF,GAAGnB;IACHR,0BAA0B;QACxB,IAAIO,gBAAgBM,SAAUY,aAAa,EAAE;YAC3CN,kBAAkBN,SAAUY,aAAa;YAEzC,OAAO;gBACLe,mBAAmBZ,GAAG;YACxB;QACF;QAEA;IACF,GAAG;QAACrB;KAAa;IAEjB,MAAMkC,oBAAoB,CAACC;QACzB,IAAI5C,WAAW4C,OAAO7C,KAAK8C,GAAG,IAAI5B,gBAAgBW,QAAQ;YACxD,MAAMkB,UAAU7B,eAAeW,MAAM,GAAG;YACxC,MAAMmB,YAAY9B,eAAe+B,SAAS,CAAC,CAACC,OAASA,SAASL,EAAEM,MAAM;YAEtE,MAAMC,uBAAuBJ,cAAc,CAAC,KAAMA,cAAcD,WAAW,CAACF,EAAEQ,QAAQ;YAEtF,IAAID,wBAAyBJ,cAAc,KAAKH,EAAEQ,QAAQ,EAAG;gBAC3DR,EAAES,cAAc;gBAEhB,MAAMJ,OAAOhC,cAAc,CAACkC,uBAAuB,IAAIL,QAAQ;gBAE/D,IAAIG,SAASlC,SAAUY,aAAa,EAAE;oBACpCsB,KAAKpB,KAAK;gBACZ;gBAEA,OAAO;YACT;QACF;QAEA,IAAIrB,WAAWR,WAAW4C,OAAO7C,KAAKuD,MAAM,EAAE;YAC5C9C;QACF;QAEA,OAAO;IACT;IACAZ,uBAAuBmB,UAAU,WAAW4B,mBAAmB;QAC7DY,SAAS;IACX;IAEA,qBACE,oBAAChD;QAAUiD,UAAU,CAAC;QAAG1C,KAAKA;QAAM,GAAGD,SAAS;OAC7CD;AAGP,EAAE"}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { HasRootRef } from '../../types';
 export type FocusVisibleMode = 'inside' | 'outside' | 'outline';
-export interface FocusVisibleProps {
+export interface FocusVisibleProps extends HasRootRef<HTMLSpanElement> {
     visible: boolean | undefined;
     mode: FocusVisibleMode;
     thin?: boolean;

package/dist/cssm/components/FocusVisible/FocusVisible.js

@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './FocusVisible.module.css';
+const stylesMode = {
+    inside: styles['FocusVisible--mode-inside'],
+    outside: styles['FocusVisible--mode-outside'],
+    outline: styles['FocusVisible--mode-outline']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
- */ export const FocusVisible = ({ visible, mode, thin, ...restProps })=>/*#__PURE__*/ React.createElement("span", {
+ */ export const FocusVisible = ({ visible, mode, thin, ...restProps })=>/*#__PURE__*/ React.createElement(RootComponent, {
         ...restProps,
         "aria-hidden": true,
-        className: classNames(styles['FocusVisible'], visible && styles['FocusVisible--visible'], thin && styles['FocusVisible--thin'], {
-            inside: styles['FocusVisible--mode-inside'],
-            outside: styles['FocusVisible--mode-outside'],
-            outline: styles['FocusVisible--mode-outline']
-        }[mode])
+        baseClassName: classNames(styles['FocusVisible'], visible && styles['FocusVisible--visible'], thin && styles['FocusVisible--thin'], stylesMode[mode])
     });
 
 //# sourceMappingURL=FocusVisible.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' | 'outside' | 'outline';\n\nexport interface FocusVisibleProps {\n  visible: boolean | undefined;\n  mode: FocusVisibleMode;\n  thin?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin, ...restProps }: FocusVisibleProps) => (\n  <span\n    {...restProps}\n    aria-hidden\n    className={classNames(\n      styles['FocusVisible'],\n      visible && styles['FocusVisible--visible'],\n      thin && styles['FocusVisible--thin'],\n      {\n        inside: styles['FocusVisible--mode-inside'],\n        outside: styles['FocusVisible--mode-outside'],\n        outline: styles['FocusVisible--mode-outline'],\n      }[mode],\n    )}\n  />\n);\n"],"names":["React","classNames","styles","FocusVisible","visible","mode","thin","restProps","span","aria-hidden","className","inside","outside","outline"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAU/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,WAA8B,iBACnF,oBAACC;QACE,GAAGD,SAAS;QACbE,eAAAA;QACAC,WAAWT,WACTC,MAAM,CAAC,eAAe,EACtBE,WAAWF,MAAM,CAAC,wBAAwB,EAC1CI,QAAQJ,MAAM,CAAC,qBAAqB,EACpC;YACES,QAAQT,MAAM,CAAC,4BAA4B;YAC3CU,SAASV,MAAM,CAAC,6BAA6B;YAC7CW,SAASX,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACG,KAAK;OAGX"}
+{"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './FocusVisible.module.css';\n\nconst stylesMode = {\n  inside: styles['FocusVisible--mode-inside'],\n  outside: styles['FocusVisible--mode-outside'],\n  outline: styles['FocusVisible--mode-outline'],\n};\n\nexport type FocusVisibleMode = 'inside' | 'outside' | 'outline';\n\nexport interface FocusVisibleProps extends HasRootRef<HTMLSpanElement> {\n  visible: boolean | undefined;\n  mode: FocusVisibleMode;\n  thin?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ visible, mode, thin, ...restProps }: FocusVisibleProps) => (\n  <RootComponent\n    {...restProps}\n    aria-hidden\n    baseClassName={classNames(\n      styles['FocusVisible'],\n      visible && styles['FocusVisible--visible'],\n      thin && styles['FocusVisible--thin'],\n      stylesMode[mode],\n    )}\n  />\n);\n"],"names":["React","classNames","RootComponent","styles","stylesMode","inside","outside","outline","FocusVisible","visible","mode","thin","restProps","aria-hidden","baseClassName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,aAAa;IACjBC,QAAQF,MAAM,CAAC,4BAA4B;IAC3CG,SAASH,MAAM,CAAC,6BAA6B;IAC7CI,SAASJ,MAAM,CAAC,6BAA6B;AAC/C;AAUA;;CAEC,GACD,OAAO,MAAMK,eAAe,CAAC,EAAEC,OAAO,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGC,WAA8B,iBACnF,oBAACV;QACE,GAAGU,SAAS;QACbC,eAAAA;QACAC,eAAeb,WACbE,MAAM,CAAC,eAAe,EACtBM,WAAWN,MAAM,CAAC,wBAAwB,EAC1CQ,QAAQR,MAAM,CAAC,qBAAqB,EACpCC,UAAU,CAACM,KAAK;OAGpB"}

package/dist/cssm/components/FormField/FormField.js

@@ -10,6 +10,10 @@ const sizeYClassNames = {
     none: styles['FormField--sizeY-none'],
     [SizeType.COMPACT]: styles['FormField--sizeY-compact']
 };
+const stylesStatus = {
+    error: styles['FormField--status-error'],
+    valid: styles['FormField--status-valid']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
  */ export const FormField = ({ Component = 'span', status = 'default', children, getRootRef, before, after, disabled, mode = 'default', className, ...restProps })=>{
@@ -30,10 +34,7 @@ const sizeYClassNames = {
         ref: elRef,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && ({
-            error: styles['FormField--status-error'],
-            valid: styles['FormField--status-valid']
-        })[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && styles['FormField--disabled'], !disabled && hover && styles['FormField--hover'], className)
+        className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && stylesStatus[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && styles['FormField--disabled'], !disabled && hover && styles['FormField--hover'], className)
     }, before && /*#__PURE__*/ React.createElement("span", {
         className: styles['FormField__before']
     }, before), children, after && /*#__PURE__*/ React.createElement("span", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormField/FormField.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 { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const focusWithin = useFocusWithin(elRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n      <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden","thin","visible"],"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,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQnB,aAAaY;IAC3B,MAAMQ,cAAcnB,eAAekB;IACnC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGtB;IAC3B,MAAM,CAACuB,OAAOC,SAAS,GAAG1B,MAAM2B,QAAQ,CAAC;IAEzC,MAAMC,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBJ,SAAS;IACX;IAEA,MAAMK,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBJ,SAAS;IACX;IAEA,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWnB,WACTM,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEsB,OAAO5B,MAAM,CAAC,0BAA0B;YACxC6B,OAAO7B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXW,UAAUnB,SAASgC,OAAO,IAAI7B,eAAe,CAACgB,MAAM,EACpDN,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYO,SAASlB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACsB;QAAKlB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACqB;QAAKlB,WAAWnB,WAAWM,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACqB;QAAKC,eAAAA;QAAYnB,WAAWb,MAAM,CAAC,oBAAoB;sBACxD,oBAACD;QAAakC,MAAAA;QAAKC,SAASlB;QAAaJ,MAAK;;AAGpD,EAAE"}
+{"version":3,"sources":["../../../../src/components/FormField/FormField.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 { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { FocusVisible } from '../FocusVisible/FocusVisible';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nconst stylesStatus = {\n  error: styles['FormField--status-error'],\n  valid: styles['FormField--status-valid'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const elRef = useExternRef(getRootRef);\n  const focusWithin = useFocusWithin(elRef);\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={elRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' && stylesStatus[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n      <FocusVisible thin visible={focusWithin} mode=\"outline\" />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useExternRef","useFocusWithin","SizeType","FocusVisible","styles","sizeYClassNames","none","COMPACT","stylesStatus","error","valid","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","elRef","focusWithin","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","REGULAR","span","aria-hidden","thin","visible"],"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,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,YAAY,QAAQ,+BAA+B;AAC5D,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACF,SAASK,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAEA,MAAMI,eAAe;IACnBC,OAAOL,MAAM,CAAC,0BAA0B;IACxCM,OAAON,MAAM,CAAC,0BAA0B;AAC1C;AAiCA;;CAEC,GACD,OAAO,MAAMO,YAAY,CAAC,EACxBC,YAAY,MAAM,EAClBC,SAAS,SAAS,EAClBC,QAAQ,EACRC,UAAU,EACVC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,OAAO,SAAS,EAChBC,SAAS,EACT,GAAGC,WACe;IAClB,MAAMC,QAAQtB,aAAae;IAC3B,MAAMQ,cAActB,eAAeqB;IACnC,MAAM,EAAEE,QAAQ,MAAM,EAAE,GAAGzB;IAC3B,MAAM,CAAC0B,OAAOC,SAAS,GAAG7B,MAAM8B,QAAQ,CAAC;IAEzC,MAAMC,mBAAmB,CAACC;QACxBA,EAAEC,eAAe;QACjBJ,SAAS;IACX;IAEA,MAAMK,mBAAmB,CAACF;QACxBA,EAAEC,eAAe;QACjBJ,SAAS;IACX;IAEA,qBACE,oBAACd;QACE,GAAGS,SAAS;QACbW,KAAKV;QACLW,cAAcL;QACdM,cAAcH;QACdX,WAAWtB,WACTM,MAAM,CAAC,YAAY,EACnBe,SAAS,aAAaf,MAAM,CAAC,0BAA0B,EACvDS,WAAW,aAAaL,YAAY,CAACK,OAAO,EAC5CW,UAAUtB,SAASiC,OAAO,IAAI9B,eAAe,CAACmB,MAAM,EACpDN,YAAYd,MAAM,CAAC,sBAAsB,EACzC,CAACc,YAAYO,SAASrB,MAAM,CAAC,mBAAmB,EAChDgB;OAGDJ,wBAAU,oBAACoB;QAAKhB,WAAWhB,MAAM,CAAC,oBAAoB;OAAGY,SACzDF,UACAG,uBACC,oBAACmB;QAAKhB,WAAWtB,WAAWM,MAAM,CAAC,mBAAmB,EAAE;OACrDa,sBAGL,oBAACmB;QAAKC,eAAAA;QAAYjB,WAAWhB,MAAM,CAAC,oBAAoB;sBACxD,oBAACD;QAAamC,MAAAA;QAAKC,SAAShB;QAAaJ,MAAK;;AAGpD,EAAE"}

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

@@ -17,8 +17,13 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
      * Режим `indent` предназначен для визуального отступа
      */
     removable?: boolean | 'indent';
+    /**
+     * Удаляет внешние отступы вокруг компонента
+     * @since 5.8.0
+     */
+    noPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, bottomId, ...restProps }: FormItemProps) => React.JSX.Element;
+export declare const FormItem: ({ children, top, bottom, status, removable, onRemove, removePlaceholder, getRootRef, htmlFor, bottomId, noPadding, ...restProps }: FormItemProps) => React.JSX.Element;