@vkontakte/vkui 5.6.0 → 5.6.2

package/dist/cjs/components/Alert/Alert.js

@@ -16,6 +16,7 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivityWithJSMediaQueries = require("../../hooks/useAdaptivityWithJSMediaQueries");
+var _useId = require("../../hooks/useId");
 var _usePlatform = require("../../hooks/usePlatform");
 var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
 var _platform = require("../../lib/platform");
@@ -117,6 +118,9 @@ var Alert = function(_param) {
         "onClose",
         "dismissLabel"
     ]);
+    var generatedId = (0, _useId.useId)();
+    var headerId = "vkui-alert-".concat(generatedId, "-header");
+    var textId = "vkui-alert-".concat(generatedId, "-text");
     var platform = (0, _usePlatform.usePlatform)();
     var isDesktop = (0, _useAdaptivityWithJSMediaQueries.useAdaptivityWithJSMediaQueries)().isDesktop;
     var waitTransitionFinish = (0, _useWaitTransitionFinish.useWaitTransitionFinish)().waitTransitionFinish;
@@ -170,14 +174,14 @@ var Alert = function(_param) {
         className: (0, _vkjs.classNames)("vkuiAlert", platform === _platform.Platform.IOS && "vkuiAlert--ios", platform === _platform.Platform.VKCOM && "vkuiAlert--vkcom", resolvedActionsLayout === "vertical" ? "vkuiAlert--v" : "vkuiAlert--h", closing && "vkuiAlert--closing", isDesktop && "vkuiAlert--desktop"),
         role: "alertdialog",
         "aria-modal": true,
-        "aria-labelledby": "vkui--alert--title",
-        "aria-describedby": "vkui--alert--desc"
+        "aria-labelledby": headerId,
+        "aria-describedby": textId
     }), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiAlert__content"
     }, (0, _vkjs.hasReactNode)(header) && /*#__PURE__*/ _react.createElement(AlertHeader, {
-        id: "vkui--alert--title"
+        id: headerId
     }, header), (0, _vkjs.hasReactNode)(text) && /*#__PURE__*/ _react.createElement(AlertText, {
-        id: "vkui--alert--desc"
+        id: textId
     }, text), children), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiAlert__actions"
     }, actions.map(function(action, i) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby=\"vkui--alert--title\"\n        aria-describedby=\"vkui--alert--desc\"\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id=\"vkui--alert--title\">{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id=\"vkui--alert--desc\">{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Alert","AlertHeader","props","platform","usePlatform","Platform","IOS","Title","className","weight","level","AlertText","VKCOM","Footnote","Caption","Text","Component","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","title","actionProp","autoClose","mode","restActionProps","Tappable","href","classNames","onClick","Button","size","target","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","isDesktop","useAdaptivityWithJSMediaQueries","waitTransitionFinish","useWaitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","useScrollLock","PopoutWrapper","FocusTrap","getRootRef","stopPropagation","role","aria-modal","aria-labelledby","aria-describedby","div","hasReactNode","id","map","i","key","ModalDismissButton","aria-label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useId } from '../../hooks/useId';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { Platform } from '../../lib/platform';\nimport { stopPropagation } from '../../lib/utils';\nimport { AnchorHTMLAttributesOnly, HasChildren } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { Button, ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly {\n  title: string;\n  action?: VoidFunction;\n  autoClose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertActionInterface[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose: VoidFunction;\n\n  /**\n   * `aria-label` для кнопки закрытия. Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n}\n\ntype ItemClickHandler = (item: AlertActionInterface) => void;\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\n\nconst AlertHeader = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.IOS:\n      return <Title className={styles['Alert__header']} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles['Alert__header']} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\n\nconst AlertText = (props: AlertTypography) => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case Platform.VKCOM:\n      return <Footnote className={styles['Alert__text']} {...props} />;\n    case Platform.IOS:\n      return <Caption className={styles['Alert__text']} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles['Alert__text']} weight=\"3\" {...props} />;\n  }\n};\n\ninterface AlertActionProps {\n  action: AlertActionInterface;\n  onItemClick: ItemClickHandler;\n}\n\nconst AlertAction = ({ action, onItemClick, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n  const handleItemClick = React.useCallback(() => onItemClick(action), [onItemClick, action]);\n\n  if (platform === Platform.IOS) {\n    const { title, action: actionProp, autoClose, mode, ...restActionProps } = action;\n\n    return (\n      <Tappable\n        Component={restActionProps.href ? 'a' : 'button'}\n        className={classNames(\n          styles['Alert__action'],\n          mode === 'destructive' && styles['Alert__action--mode-destructive'],\n          mode === 'cancel' && styles['Alert__action--mode-cancel'],\n        )}\n        onClick={handleItemClick}\n        {...restActionProps}\n        {...restProps}\n      >\n        {title}\n      </Tappable>\n    );\n  }\n\n  let mode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === Platform.VKCOM) {\n    mode = action.mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(\n        styles['Alert__button'],\n        action.mode === 'cancel' && styles['Alert__button--mode-cancel'],\n      )}\n      mode={mode}\n      size=\"m\"\n      onClick={handleItemClick}\n      Component={action.Component}\n      href={action.href}\n      target={action.target}\n    >\n      {action.title}\n    </Button>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions = [],\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  text,\n  header,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  ...restProps\n}: AlertProps) => {\n  const generatedId = useId();\n\n  const headerId = `vkui-alert-${generatedId}-header`;\n  const textId = `vkui-alert-${generatedId}-text`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n\n  const [closing, setClosing] = React.useState(false);\n\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const resolvedActionsLayout: AlertProps['actionsLayout'] =\n    platform === Platform.VKCOM ? 'horizontal' : actionsLayout;\n\n  const timeout = platform === Platform.IOS ? 300 : 200;\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n    waitTransitionFinish(\n      elementRef.current,\n      (e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          onClose();\n        }\n      },\n      timeout,\n    );\n  }, [elementRef, waitTransitionFinish, onClose, timeout]);\n\n  const onItemClick: ItemClickHandler = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action, autoClose } = item;\n\n      if (autoClose) {\n        setClosing(true);\n        waitTransitionFinish(\n          elementRef.current,\n          (e?: TransitionEvent) => {\n            if (!e || e.propertyName === 'opacity') {\n              onClose();\n              action && action();\n            }\n          },\n          timeout,\n        );\n      } else {\n        action && action();\n      }\n    },\n    [elementRef, waitTransitionFinish, onClose, timeout],\n  );\n\n  useScrollLock();\n\n  return (\n    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>\n      <FocusTrap\n        {...restProps}\n        getRootRef={elementRef}\n        onClick={stopPropagation}\n        onClose={close}\n        timeout={timeout}\n        className={classNames(\n          styles['Alert'],\n          platform === Platform.IOS && styles['Alert--ios'],\n          platform === Platform.VKCOM && styles['Alert--vkcom'],\n          resolvedActionsLayout === 'vertical' ? styles['Alert--v'] : styles['Alert--h'],\n          closing && styles['Alert--closing'],\n          isDesktop && styles['Alert--desktop'],\n        )}\n        role=\"alertdialog\"\n        aria-modal\n        aria-labelledby={headerId}\n        aria-describedby={textId}\n      >\n        <div className={styles['Alert__content']}>\n          {hasReactNode(header) && <AlertHeader id={headerId}>{header}</AlertHeader>}\n          {hasReactNode(text) && <AlertText id={textId}>{text}</AlertText>}\n          {children}\n        </div>\n        <div className={styles['Alert__actions']}>\n          {actions.map((action, i) => (\n            <AlertAction key={i} action={action} onItemClick={onItemClick} />\n          ))}\n        </div>\n        {isDesktop && <ModalDismissButton onClick={close} aria-label={dismissLabel} />}\n      </FocusTrap>\n    </PopoutWrapper>\n  );\n};\n"],"names":["Alert","AlertHeader","props","platform","usePlatform","Platform","IOS","Title","className","weight","level","AlertText","VKCOM","Footnote","Caption","Text","Component","AlertAction","action","onItemClick","restProps","handleItemClick","React","useCallback","title","actionProp","autoClose","mode","restActionProps","Tappable","href","classNames","onClick","Button","size","target","actions","actionsLayout","children","style","text","header","onClose","dismissLabel","generatedId","useId","headerId","textId","isDesktop","useAdaptivityWithJSMediaQueries","waitTransitionFinish","useWaitTransitionFinish","useState","closing","setClosing","elementRef","useRef","resolvedActionsLayout","timeout","close","current","e","propertyName","item","useScrollLock","PopoutWrapper","FocusTrap","getRootRef","stopPropagation","role","aria-modal","aria-labelledby","aria-describedby","div","hasReactNode","id","map","i","key","ModalDismissButton","aria-label"],"mappings":"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"}

package/dist/cjs/components/AppRoot/AppRoot.js

@@ -63,8 +63,10 @@ var AppRoot = function(_param) {
         }
         setPortalRoot(portal);
         return function() {
-            var _portal_parentElement, _portal;
-            (_portal = portal) === null || _portal === void 0 ? void 0 : (_portal_parentElement = _portal.parentElement) === null || _portal_parentElement === void 0 ? void 0 : _portal_parentElement.removeChild(portal);
+            if (!portalRootProp) {
+                var _portal_parentElement, _portal;
+                (_portal = portal) === null || _portal === void 0 ? void 0 : (_portal_parentElement = _portal.parentElement) === null || _portal_parentElement === void 0 ? void 0 : _portal_parentElement.removeChild(portal);
+            }
         };
     }, [
         portalRootProp

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      portal?.parentElement?.removeChild(portal);\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","vkuiSizeXClassNames","none","SizeType","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","children","mode","scroll","portalRootProp","portalRoot","disablePortal","className","props","isKeyboardInputActive","useKeyboardInputTracker","rootRef","React","useRef","useState","setPortalRoot","document","useDOM","insets","useInsets","appearance","useAppearance","useAdaptivity","hasPointer","sizeX","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","parent","noop","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","IconSettingsProvider","classPrefix","div","ref","classNames"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const insets = useInsets();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent?.classList.add(...classes);\n\n    return () => {\n      parent?.classList.remove(...classes);\n    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof Insets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof Insets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","vkuiSizeXClassNames","none","SizeType","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","children","mode","scroll","portalRootProp","portalRoot","disablePortal","className","props","isKeyboardInputActive","useKeyboardInputTracker","rootRef","React","useRef","useState","setPortalRoot","document","useDOM","insets","useInsets","appearance","useAppearance","useAdaptivity","hasPointer","sizeX","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","parent","noop","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","IconSettingsProvider","classPrefix","div","ref","classNames"],"mappings":"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"}

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -25,6 +25,7 @@ var _platform = require("../../lib/platform");
 var _warnOnce = require("../../lib/warnOnce");
 var _Tappable = require("../Tappable/Tappable");
 var _Footnote = require("../Typography/Footnote/Footnote");
+var _Text = require("../Typography/Text/Text");
 var _VisuallyHidden = require("../VisuallyHidden/VisuallyHidden");
 var _obj;
 var sizeYClassNames = (_obj = {
@@ -136,7 +137,7 @@ var Checkbox = function(_param) {
         className: "vkuiCheckbox__content"
     }, /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCheckbox__title"
-    }, /*#__PURE__*/ _react.createElement("span", null, children), /*#__PURE__*/ _react.createElement("div", {
+    }, /*#__PURE__*/ _react.createElement(_Text.Text, null, children), /*#__PURE__*/ _react.createElement("div", {
         className: "vkuiCheckbox__titleAfter"
     }, titleAfter)), (0, _vkjs.hasReactNode)(description) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
         className: "vkuiCheckbox__description"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <span>{children}</span>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Checkbox","sizeYClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","Platform","VKCOM","hasReactNode","disabled","activeEffectDelay","IOS","ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","span","Footnote"],"mappings":";;;;+BA+CaA;;;eAAAA;;;;;;;;+DA/CU;qBAOhB;oBACkC;6BACX;8CACiB;4BAClB;2BACD;0BACH;wBACA;wBACA;wBAEyC;wBACzC;8BACM;IAGP;AAAxB,IAAMC,mBAAkB;IACtBC,IAAI;sBADkB,MAErBC,oBAAQ,CAACC,OAAO,qDAFK,MAGrBD,oBAAQ,CAACE,OAAO,kCAHK;AAoBxB,IAAMC,OAAOC,IAAAA,kBAAQ,EAAC;AAKf,IAAMP,WAAW;QACtBQ,kBAAAA,UACAC,mBAAAA,WACAC,eAAAA,OACAC,oBAAAA,YACAC,gBAAAA,QACAC,qBAAAA,aACAC,uBAAAA,eACAC,8BAAAA,sBACAC,mBAAAA,WACAC,oBAAAA,YACAC,kBAAAA,UACAC,mBAAAA,WACAC,0BAAAA,kBACAC,kBAAAA,UACAC,oBAAAA,YACGC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWC,IAAAA,0BAAY,EAACb;IAC9B,IAAMc,WAAWC,IAAAA,wBAAW;IAC5B,IAA2BC,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAChB,IAAiCC,mCAAAA,IAAAA,8DAA8B,KAAvDD,AAAOE,gBAAkBD,iCAAzBD;IAERG,OAAMC,SAAS,CAAC;QACd,IAAMC,qBAAqBpB,kBAAkBqB,YAAYpB,uBAAuBD;QAEhF,IAAIU,SAASY,OAAO,EAAE;YACpBZ,SAASY,OAAO,CAACtB,aAAa,GAAGuB,QAAQH;QAC3C;IACF,GAAG;QAACnB;QAAsBD;QAAeU;KAAS;IAElD,IAAMc,eAA0CN,OAAMO,WAAW,CAC/D,SAACC;QACC,IACEzB,yBAAyBoB,aACzBrB,kBAAkBqB,aAClBZ,UAAUkB,OAAO,KAAKN,aACtBX,SAASY,OAAO,EAChB;YACAZ,SAASY,OAAO,CAACtB,aAAa,GAAG;QACnC;QACA,IAAIA,kBAAkBqB,aAAaX,SAASY,OAAO,EAAE;YACnDZ,SAASY,OAAO,CAACtB,aAAa,GAAGA;QACnC;QACAO,YAAYA,SAASmB;IACvB,GACA;QAACzB;QAAsBD;QAAeS,UAAUkB,OAAO;QAAEpB;QAAUG;KAAS;IAG9E,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,IAAI7B,wBAAwBQ,UAAUsB,cAAc,EAAE;YACpDvC,KAAK,yEAAyE;QAChF;QAEA,IAAIQ,iBAAiBS,UAAUkB,OAAO,EAAE;YACtCnC,KAAK,2DAA2D;QAClE;QAEA,IAAIiB,UAAUsB,cAAc,IAAItB,UAAUkB,OAAO,EAAE;YACjDnC,KAAK,4DAA4D;QACnE;IACF;IAEA,qBACE,qBAACwC,kBAAQ;QACPC,WAAU;QACVtC,WAAWuC,IAAAA,gBAAU,kBAEnBtB,aAAauB,kBAAQ,CAACC,KAAK,2BAC3BjD,eAAe,CAAC4B,MAAM,EACtB,CAAEsB,CAAAA,IAAAA,kBAAY,EAAC3C,aAAa2C,IAAAA,kBAAY,EAACtC,YAAW,6BACpDJ;QAEFC,OAAOA;QACP0C,UAAU7B,UAAU6B,QAAQ;QAC5BC,mBAAmB3B,aAAauB,kBAAQ,CAACK,GAAG,GAAG,MAAMC,6BAAmB;QACxE5C,YAAYA;QACZK,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;qBAElB,qBAACoC,8BAAc,8CACTjC;QACJwB,WAAU;QACVU,MAAK;QACLpC,UAAUiB;QACV7B,SAAS;QACTE,YAAYa;uBAEd,qBAACkC;QAAIjD,WAAWuC,IAAAA,gBAAU;OACvBtB,aAAauB,kBAAQ,CAACC,KAAK,iBAC1B,qBAACS,uBAAgB,wBAEjB,qBAAC3B,OAAM4B,QAAQ,QACZ7B,cAAc8B,OAAO,kBACpB,qBAACF,uBAAgB;QAAClD,WAAWsB,cAAc8B,OAAO,CAACpD,SAAS;QAE7DsB,cAAc+B,OAAO,kBACpB,qBAACC,uBAAgB;QAACtD,WAAWsB,cAAc+B,OAAO,CAACrD,SAAS;wBAKpE,qBAACiD;QAAIjD,WAAWuC,IAAAA,gBAAU;OACvBtB,aAAauB,kBAAQ,CAACC,KAAK,iBAC1B,qBAACc,wBAAiB,wBAElB,qBAAChC,OAAM4B,QAAQ,QACZ7B,cAAc8B,OAAO,kBACpB,qBAACG,wBAAiB;QAACvD,WAAWsB,cAAc8B,OAAO,CAACpD,SAAS;QAE9DsB,cAAc+B,OAAO,kBACpB,qBAACG,wBAAiB;QAACxD,WAAWsB,cAAc+B,OAAO,CAACrD,SAAS;wBAKrE,qBAACiD;QACCjD,WAAWuC,IAAAA,gBAAU;OAEpBtB,aAAauB,kBAAQ,CAACC,KAAK,iBAC1B,qBAACgB,kCAA2B;QAACC,OAAO;QAAIC,QAAQ;uBAEhD,qBAACpC,OAAM4B,QAAQ,QACZ7B,cAAc8B,OAAO,kBACpB,qBAACK,kCAA2B;QAC1BzD,WAAWsB,cAAc8B,OAAO,CAACpD,SAAS;QAC1C0D,OAAO;QACPC,QAAQ;QAGXrC,cAAc+B,OAAO,kBACpB,qBAACI,kCAA2B;QAC1BzD,WAAWsB,cAAc+B,OAAO,CAACrD,SAAS;QAC1C0D,OAAO;QACPC,QAAQ;wBAMlB,qBAACV;QAAIjD,SAAS;qBACZ,qBAACiD;QAAIjD,SAAS;qBACZ,qBAAC4D,cAAM7D,yBACP,qBAACkD;QAAIjD,SAAS;OAAmCa,cAElD6B,IAAAA,kBAAY,EAACtC,8BACZ,qBAACyD,kBAAQ;QAAC7D,SAAS;OAAoCI;AAKjE"}
+{"version":3,"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Icon20CheckBoxIndetermanate,\n  Icon20CheckBoxOff,\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon24CheckBoxOn,\n} from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRef, HasRootRef } from '../../types';\nimport { ACTIVE_EFFECT_DELAY, Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Checkbox.module.css';\n\nconst sizeYClassNames = {\n  none: styles['Checkbox--sizeY-none'],\n  [SizeType.COMPACT]: styles['Checkbox--sizeY-compact'],\n  [SizeType.REGULAR]: styles['Checkbox--sizeY-regular'],\n};\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n  titleAfter?: React.ReactNode;\n}\n\nconst warn = warnOnce('Checkbox');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  onChange,\n  titleAfter,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY = 'none' } = useAdaptivity();\n  const { sizeY: adaptiveSizeY } = useAdaptivityConditionalRender();\n\n  React.useEffect(() => {\n    const indeterminateValue = indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps['onChange'] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef],\n  );\n\n  if (process.env.NODE_ENV === 'development') {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn('defaultIndeterminate и defaultChecked не могут быть true одновременно', 'error');\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn('indeterminate и checked не могут быть true одновременно', 'error');\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn('defaultChecked и checked не могут быть true одновременно', 'error');\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      className={classNames(\n        styles['Checkbox'],\n        platform === Platform.VKCOM && styles['Checkbox--vkcom'],\n        sizeYClassNames[sizeY],\n        !(hasReactNode(children) || hasReactNode(description)) && styles['Checkbox--simple'],\n        className,\n      )}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n    >\n      <VisuallyHidden\n        {...restProps}\n        Component=\"input\"\n        type=\"checkbox\"\n        onChange={handleChange}\n        className={styles['Checkbox__input']}\n        getRootRef={inputRef}\n      />\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--on'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOn className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOn className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--off'])}>\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxOff className={adaptiveSizeY.compact.className} />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon24CheckBoxOff className={adaptiveSizeY.regular.className} />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div\n        className={classNames(styles['Checkbox__icon'], styles['Checkbox__icon--indeterminate'])}\n      >\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate width={20} height={20} />\n        ) : (\n          <React.Fragment>\n            {adaptiveSizeY.compact && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.compact.className}\n                width={20}\n                height={20}\n              />\n            )}\n            {adaptiveSizeY.regular && (\n              <Icon20CheckBoxIndetermanate\n                className={adaptiveSizeY.regular.className}\n                width={24}\n                height={24}\n              />\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={styles['Checkbox__content']}>\n        <div className={styles['Checkbox__title']}>\n          <Text>{children}</Text>\n          <div className={styles['Checkbox__titleAfter']}>{titleAfter}</div>\n        </div>\n        {hasReactNode(description) && (\n          <Footnote className={styles['Checkbox__description']}>{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n"],"names":["Checkbox","sizeYClassNames","none","SizeType","COMPACT","REGULAR","warn","warnOnce","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","onChange","titleAfter","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","useAdaptivityConditionalRender","adaptiveSizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","Tappable","Component","classNames","Platform","VKCOM","hasReactNode","disabled","activeEffectDelay","IOS","ACTIVE_EFFECT_DELAY","VisuallyHidden","type","div","Icon20CheckBoxOn","Fragment","compact","regular","Icon24CheckBoxOn","Icon20CheckBoxOff","Icon24CheckBoxOff","Icon20CheckBoxIndetermanate","width","height","Text","Footnote"],"mappings":"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"}

package/dist/cjs/components/DateInput/DateInput.js

@@ -27,6 +27,7 @@ var _IconButton = require("../IconButton/IconButton");
 var _InputLike = require("../InputLike/InputLike");
 var _InputLikeDivider = require("../InputLike/InputLikeDivider");
 var _Popper = require("../Popper/Popper");
+var _Text = require("../Typography/Text/Text");
 var sizeYClassNames = _define_property._({
     none: "vkuiDateInput--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiDateInput--sizeY-compact");
@@ -203,7 +204,7 @@ var DateInput = function(_param) {
         type: "hidden",
         name: name,
         value: value ? (0, _date.format)(value, enableTime ? "DD.MM.YYYYTHH:mm" : "DD.MM.YYYY") : ""
-    }), /*#__PURE__*/ _react.createElement("span", {
+    }), /*#__PURE__*/ _react.createElement(_Text.Text, {
         className: "vkuiDateInput__input",
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {

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

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

package/dist/cjs/components/DateRangeInput/DateRangeInput.js

@@ -27,6 +27,7 @@ var _IconButton = require("../IconButton/IconButton");
 var _InputLike = require("../InputLike/InputLike");
 var _InputLikeDivider = require("../InputLike/InputLikeDivider");
 var _Popper = require("../Popper/Popper");
+var _Text = require("../Typography/Text/Text");
 var sizeYClassNames = _define_property._({
     none: "vkuiDateRangeInput--sizeY-none"
 }, _adaptivity.SizeType.COMPACT, "vkuiDateRangeInput--sizeY-compact");
@@ -222,7 +223,7 @@ var DateRangeInput = function(_param) {
         type: "hidden",
         name: name,
         value: value ? "".concat(value[0] ? (0, _date.format)(value[0], "DD.MM.YYYY") : "", " - ").concat(value[1] ? (0, _date.format)(value[1], "DD.MM.YYYY") : "") : ""
-    }), /*#__PURE__*/ _react.createElement("span", {
+    }), /*#__PURE__*/ _react.createElement(_Text.Text, {
         className: "vkuiDateInput__input",
         onKeyDown: handleKeyDown
     }, /*#__PURE__*/ _react.createElement(_InputLike.InputLike, {

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

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

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

@@ -4,6 +4,12 @@ import { RemovableProps } from '../Removable/Removable';
 export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent, RemovableProps {
     top?: React.ReactNode;
     bottom?: React.ReactNode;
+    /**
+     * Передаётся при использовании `bottom`.
+     *
+     * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.
+     */
+    bottomId?: string;
     status?: 'default' | 'error' | 'valid';
     /**
      * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.
@@ -15,4 +21,4 @@ export interface FormItemProps extends React.AllHTMLAttributes<HTMLElement>, Has
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
  */
-export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, ...restProps }: FormItemProps) => React.JSX.Element;
+export declare const FormItem: ({ children, top, bottom, status, Component, removable, onRemove, removePlaceholder, getRootRef, className, htmlFor, bottomId, ...restProps }: FormItemProps) => React.JSX.Element;

package/dist/cjs/components/FormItem/FormItem.js

@@ -25,7 +25,7 @@ var sizeYClassNames = _define_property._({
     none: (0, _vkjs.classNames)("vkuiFormItem--sizeY-none", "vkuiInternalFormItem--sizeY-none")
 }, _adaptivity.SizeType.COMPACT, (0, _vkjs.classNames)("vkuiFormItem--sizeY-compact", "vkuiInternalFormItem--sizeY-compact"));
 var FormItem = function(_param) {
-    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, restProps = _object_without_properties._(_param, [
+    var children = _param.children, top = _param.top, bottom = _param.bottom, _param_status = _param.status, status = _param_status === void 0 ? "default" : _param_status, _param_Component = _param.Component, Component = _param_Component === void 0 ? "div" : _param_Component, removable = _param.removable, _param_onRemove = _param.onRemove, onRemove = _param_onRemove === void 0 ? _vkjs.noop : _param_onRemove, _param_removePlaceholder = _param.removePlaceholder, removePlaceholder = _param_removePlaceholder === void 0 ? "Удалить" : _param_removePlaceholder, getRootRef = _param.getRootRef, className = _param.className, htmlFor = _param.htmlFor, bottomId = _param.bottomId, restProps = _object_without_properties._(_param, [
         "children",
         "top",
         "bottom",
@@ -36,7 +36,8 @@ var FormItem = function(_param) {
         "removePlaceholder",
         "getRootRef",
         "className",
-        "htmlFor"
+        "htmlFor",
+        "bottomId"
     ]);
     var rootEl = (0, _useExternRef.useExternRef)(getRootRef);
     var _useAdaptivity1 = (0, _useAdaptivity.useAdaptivity)(), _useAdaptivity_sizeY = _useAdaptivity1.sizeY, sizeY = _useAdaptivity_sizeY === void 0 ? "none" : _useAdaptivity_sizeY;
@@ -45,7 +46,9 @@ var FormItem = function(_param) {
         Component: htmlFor ? "label" : "h5",
         htmlFor: htmlFor
     }, top), children, (0, _vkjs.hasReactNode)(bottom) && /*#__PURE__*/ _react.createElement(_Footnote.Footnote, {
-        className: "vkuiFormItem__bottom"
+        className: "vkuiFormItem__bottom",
+        id: bottomId,
+        role: status === "error" ? "alert" : undefined
     }, bottom));
     return /*#__PURE__*/ _react.createElement(Component, _object_spread_props._(_object_spread._({}, restProps), {
         ref: rootEl,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["FormItem","sizeYClassNames","none","classNames","SizeType","COMPACT","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","htmlFor","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","React","Fragment","hasReactNode","Subhead","Footnote","ref","error","valid","REGULAR","Removable","align","e","current","indent","div"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;;+DAtCU;oBACwB;6BACjB;4BACD;0BACJ;yBAEiB;wBACjB;uBACD;AAGxB,IAAMC,kBAEJ;IADAC,MAAMC,IAAAA,gBAAU,8BAAiC;GAChDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,iCAE5B;AAuBG,IAAMH,WAAW;QACtBM,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWC,UAAI,sDACfC,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACGC;QAXHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASC,IAAAA,0BAAY,EAACL;IAC5B,IAA2BM,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAACnB,sBACZ,qBAACoB,gBAAO;QACNX,SAAS;QACTN,WAAWO,UAAU,UAAU;QAC/BA,SAASA;OAERV,MAGJD,UACAoB,IAAAA,kBAAY,EAAClB,yBAAW,qBAACoB,kBAAQ;QAACZ,SAAS;OAA+BR;IAI/E,qBACE,qBAACE,uDACKQ;QACJW,KAAKV;QACLH,WAAWb,IAAAA,gBAAU,kBAEnB,wBACAM,WAAW,aACT,CAAA;YACEqB,OAAO3B,IAAAA,gBAAU,gCAEf;YAEF4B,OAAO5B,IAAAA,gBAAU,gCAEf;QAEJ,CAAA,CAAC,CAACM,OAAO,EACXa,UAAUlB,oBAAQ,CAAC4B,OAAO,IAAI/B,eAAe,CAACqB,MAAM,EACpDI,IAAAA,kBAAY,EAACnB,QACXJ,IAAAA,gBAAU,2BAA8B,kCAC1CQ,aAAaR,IAAAA,gBAAU,6BAAgC,oCACvDa;QAGDL,0BACC,qBAACsB,oBAAS;QACRC,OAAM;QACNtB,UAAU,SAACuB;gBACLhB;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,QAAQiB,OAAO,EAAE;gBACnBxB,SAASuB,GAAGhB,OAAOiB,OAAO;YAC5B;QACF;QACAtB,mBAAmBA;QACnBuB,QAAQ1B,cAAc;qBAEtB,qBAAC2B;QACCtB,WAAWb,IAAAA,gBAAU,6BAAgC;OAEpDoB,oBAILA;AAIR"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  /**\n   * Передаётся при использовании `bottom`.\n   *\n   * Должен совпадать с `aria-describedby`, который передаётся в компонент, отвечающий за пользовательский ввод.\n   */\n  bottomId?: string;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   *\n   * Режим `indent` предназначен для визуального отступа\n   */\n  removable?: boolean | 'indent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  htmlFor,\n  bottomId,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && (\n        <Subhead\n          className={styles['FormItem__top']}\n          Component={htmlFor ? 'label' : 'h5'}\n          htmlFor={htmlFor}\n        >\n          {top}\n        </Subhead>\n      )}\n      {children}\n      {hasReactNode(bottom) && (\n        <Footnote\n          className={styles['FormItem__bottom']}\n          id={bottomId}\n          role={status === 'error' ? 'alert' : undefined}\n        >\n          {bottom}\n        </Footnote>\n      )}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n          indent={removable === 'indent'}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["FormItem","sizeYClassNames","none","classNames","SizeType","COMPACT","children","top","bottom","status","Component","removable","onRemove","noop","removePlaceholder","getRootRef","className","htmlFor","bottomId","restProps","rootEl","useExternRef","useAdaptivity","sizeY","wrappedChildren","React","Fragment","hasReactNode","Subhead","Footnote","id","role","undefined","ref","error","valid","REGULAR","Removable","align","e","current","indent","div"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;;;+DA5CU;oBACwB;6BACjB;4BACD;0BACJ;yBAEiB;wBACjB;uBACD;AAGxB,IAAMC,kBAEJ;IADAC,MAAMC,IAAAA,gBAAU,8BAAiC;GAChDC,oBAAQ,CAACC,OAAO,EAAGF,IAAAA,gBAAU,iCAE5B;AA6BG,IAAMH,WAAW;QACtBM,kBAAAA,UACAC,aAAAA,KACAC,gBAAAA,+BACAC,QAAAA,oCAAS,qDACTC,WAAAA,0CAAY,0BACZC,mBAAAA,oCACAC,UAAAA,wCAAWC,UAAI,sDACfC,mBAAAA,0DAAoB,sCACpBC,oBAAAA,YACAC,mBAAAA,WACAC,iBAAAA,SACAC,kBAAAA,UACGC;QAZHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,SAASC,IAAAA,0BAAY,EAACN;IAC5B,IAA2BO,kBAAAA,IAAAA,4BAAa,4BAAbA,gBAAnBC,OAAAA,0CAAQ;IAEhB,IAAMC,gCACJ,qBAACC,OAAMC,QAAQ,QACZC,IAAAA,kBAAY,EAACpB,sBACZ,qBAACqB,gBAAO;QACNZ,SAAS;QACTN,WAAWO,UAAU,UAAU;QAC/BA,SAASA;OAERV,MAGJD,UACAqB,IAAAA,kBAAY,EAACnB,yBACZ,qBAACqB,kBAAQ;QACPb,SAAS;QACTc,IAAIZ;QACJa,MAAMtB,WAAW,UAAU,UAAUuB;OAEpCxB;IAMT,qBACE,qBAACE,uDACKS;QACJc,KAAKb;QACLJ,WAAWb,IAAAA,gBAAU,kBAEnB,wBACAM,WAAW,aACT,CAAA;YACEyB,OAAO/B,IAAAA,gBAAU,gCAEf;YAEFgC,OAAOhC,IAAAA,gBAAU,gCAEf;QAEJ,CAAA,CAAC,CAACM,OAAO,EACXc,UAAUnB,oBAAQ,CAACgC,OAAO,IAAInC,eAAe,CAACsB,MAAM,EACpDI,IAAAA,kBAAY,EAACpB,QACXJ,IAAAA,gBAAU,2BAA8B,kCAC1CQ,aAAaR,IAAAA,gBAAU,6BAAgC,oCACvDa;QAGDL,0BACC,qBAAC0B,oBAAS;QACRC,OAAM;QACN1B,UAAU,SAAC2B;gBACLnB;YAAJ,KAAIA,UAAAA,oBAAAA,8BAAAA,QAAQoB,OAAO,EAAE;gBACnB5B,SAAS2B,GAAGnB,OAAOoB,OAAO;YAC5B;QACF;QACA1B,mBAAmBA;QACnB2B,QAAQ9B,cAAc;qBAEtB,qBAAC+B;QACC1B,WAAWb,IAAAA,gBAAU,6BAAgC;OAEpDqB,oBAILA;AAIR"}