@vkontakte/vkui 7.3.6 → 7.3.7

package/dist/components/ChipsInputBase/Chip/Chip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQ1C;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,wKAelB,SAAS,KAAG,KAAK,CAAC,SA+DpB,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAQ1C;;GAEG;AACH,eAAO,MAAM,IAAI,GAAI,wKAelB,SAAS,KAAG,KAAK,CAAC,SAgEpB,CAAC"}

package/dist/components/ChipsInputBase/Chip/Chip.js

@@ -85,6 +85,7 @@ const sizeYClassNames = {
             !readOnly && removable && /*#__PURE__*/ _jsx("div", {
                 className: "vkuiChip__removable",
                 children: /*#__PURE__*/ _jsxs("button", {
+                    type: "button",
                     tabIndex: -1,
                     disabled: disabled,
                     className: "vkuiChip__remove",

package/dist/components/ChipsInputBase/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  Component = 'span',\n  value = '',\n  removable = true,\n  onRemove,\n  removeLabel = 'Удалить',\n  before,\n  after,\n  disabled,\n  readOnly,\n  children,\n  className,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: ChipProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onFocus, onBlur } = useFocusVisible();\n  const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n    onFocus(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n    onBlur(event);\n  };\n\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove?.(event, value);\n    },\n    [onRemove, value],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        focusVisibleClassName,\n        className,\n      )}\n      aria-readonly={readOnly}\n      aria-disabled={disabled}\n      onFocus={disabled ? undefined : handleFocus}\n      onBlur={disabled ? undefined : handleBlur}\n    >\n      <div className={styles.in}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n        <Footnote className={styles.content}>{children}</Footnote>\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n      {!readOnly && removable && (\n        <div className={styles.removable}>\n          <button\n            tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n            disabled={disabled}\n            className={styles.remove}\n            onClick={disabled ? undefined : onRemoveWrapper}\n          >\n            <VisuallyHidden>\n              &nbsp; {removeLabel} {children}\n            </VisuallyHidden>\n            <Icon16Cancel />\n          </button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","sizeYClassNames","none","compact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","aria-readonly","aria-disabled","undefined","div","button","tabIndex","onClick"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAIrE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAER,WADPC;QAbHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM,EAAE2B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGtB;IAC1C,MAAM2B,wBAAwB1B,yBAAyB;QAAEyB;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBpC,MAAMqC,WAAW,CACvC,CAACH;QACCjB,qBAAAA,+BAAAA,SAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACR,uDACKsB;QACJf,WAAWA;QACXU,WAAWtB,6BAET4B,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CE,uBACAR;QAEFc,iBAAehB;QACfiB,iBAAelB;QACfI,SAASJ,WAAWmB,YAAYP;QAChCN,QAAQN,WAAWmB,YAAYL;;0BAE/B,MAACM;gBAAIjB,SAAS;;oBACXrB,aAAagB,yBAAW,KAACsB;wBAAIjB,SAAS;kCAAkBL;;kCACzD,KAACX;wBAASgB,SAAS;kCAAmBD;;oBACrCpB,aAAaiB,wBAAU,KAACqB;wBAAIjB,SAAS;kCAAiBJ;;;;YAExD,CAACE,YAAYN,2BACZ,KAACyB;gBAAIjB,SAAS;0BACZ,cAAA,MAACkB;oBACCC,UAAU,CAAC;oBACXtB,UAAUA;oBACVG,SAAS;oBACToB,SAASvB,WAAWmB,YAAYJ;;sCAEhC,MAAC3B;;gCAAe;gCACNS;gCAAY;gCAAEK;;;sCAExB,KAACtB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  Component = 'span',\n  value = '',\n  removable = true,\n  onRemove,\n  removeLabel = 'Удалить',\n  before,\n  after,\n  disabled,\n  readOnly,\n  children,\n  className,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: ChipProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onFocus, onBlur } = useFocusVisible();\n  const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n    onFocus(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n    onBlur(event);\n  };\n\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove?.(event, value);\n    },\n    [onRemove, value],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        focusVisibleClassName,\n        className,\n      )}\n      aria-readonly={readOnly}\n      aria-disabled={disabled}\n      onFocus={disabled ? undefined : handleFocus}\n      onBlur={disabled ? undefined : handleBlur}\n    >\n      <div className={styles.in}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n        <Footnote className={styles.content}>{children}</Footnote>\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n      {!readOnly && removable && (\n        <div className={styles.removable}>\n          <button\n            type=\"button\"\n            tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n            disabled={disabled}\n            className={styles.remove}\n            onClick={disabled ? undefined : onRemoveWrapper}\n          >\n            <VisuallyHidden>\n              &nbsp; {removeLabel} {children}\n            </VisuallyHidden>\n            <Icon16Cancel />\n          </button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","sizeYClassNames","none","compact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","aria-readonly","aria-disabled","undefined","div","button","type","tabIndex","onClick"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAIrE,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA;;CAEC,GACD,OAAO,MAAMC,OAAO;QAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAER,WADPC;QAbHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,MAAM,EAAEG,QAAQ,MAAM,EAAE,GAAG1B;IAC3B,MAAM,EAAE2B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGtB;IAC1C,MAAM2B,wBAAwB1B,yBAAyB;QAAEyB;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBpC,MAAMqC,WAAW,CACvC,CAACH;QACCjB,qBAAAA,+BAAAA,SAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACR,uDACKsB;QACJf,WAAWA;QACXU,WAAWtB,6BAET4B,UAAU,aAAapB,eAAe,CAACoB,MAAM,EAC7CE,uBACAR;QAEFc,iBAAehB;QACfiB,iBAAelB;QACfI,SAASJ,WAAWmB,YAAYP;QAChCN,QAAQN,WAAWmB,YAAYL;;0BAE/B,MAACM;gBAAIjB,SAAS;;oBACXrB,aAAagB,yBAAW,KAACsB;wBAAIjB,SAAS;kCAAkBL;;kCACzD,KAACX;wBAASgB,SAAS;kCAAmBD;;oBACrCpB,aAAaiB,wBAAU,KAACqB;wBAAIjB,SAAS;kCAAiBJ;;;;YAExD,CAACE,YAAYN,2BACZ,KAACyB;gBAAIjB,SAAS;0BACZ,cAAA,MAACkB;oBACCC,MAAK;oBACLC,UAAU,CAAC;oBACXvB,UAAUA;oBACVG,SAAS;oBACTqB,SAASxB,WAAWmB,YAAYJ;;sCAEhC,MAAC3B;;gCAAe;gCACNS;gCAAY;gCAAEK;;;sCAExB,KAACtB;;;;;;AAMb,EAAE"}

package/dist/components/Clickable/Clickable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAExF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AAqBjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AAgDD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,OAAO,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAkB9D,CAAC"}
+{"version":3,"file":"Clickable.d.ts","sourceRoot":"","sources":["../../../src/components/Clickable/Clickable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAExF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAG7C,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,WAAW,CAC7C,SAAQ,kBAAkB,CAAC,CAAC,CAAC,EAC3B,qBAAqB,EACrB,UAAU;CAAG;AAqBjB;;GAEG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,OAAO,CAWnE;AAgDD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,CAAC,EAAG,OAAO,cAAc,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,SAmB9D,CAAC"}

package/dist/components/Clickable/Clickable.js

@@ -76,9 +76,10 @@ import { RealClickable } from "./RealClickable.js";
     const commonProps = component(props);
     const isClickable = checkClickable(props);
     const Component = isClickable ? RealClickable : NonClickable;
-    const { baseClassName, disabled } = props, restProps = _object_without_properties(props, [
+    const { baseClassName, disabled, Component: ignore } = props, restProps = _object_without_properties(props, [
         "baseClassName",
-        "disabled"
+        "disabled",
+        "Component"
     ]);
     return /*#__PURE__*/ _jsx(Component, _object_spread({
         baseClassName: classNames(baseClassName, "vkuiClickable__host")

package/dist/components/Clickable/Clickable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  focusVisibleMode,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным.\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства.\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component, disabled };\n  } else if (href !== undefined) {\n    return {\n      Component: 'a',\n\n      /**\n       * Если ссылка отключена, добавляем атрибуты для доступности.\n       *\n       * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`.\n       *\n       * @see см. https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria.\n       *\n       */\n      ...(disabled && {\n        'aria-disabled': true,\n        'role': 'link',\n      }),\n    };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      Component: 'div',\n      role: 'button',\n      ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов.\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(props);\n  const isClickable = checkClickable(props);\n  const Component = isClickable ? RealClickable : NonClickable;\n\n  const {\n    baseClassName,\n    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n    ...restProps\n  } = props;\n\n  return (\n    <Component\n      baseClassName={classNames(baseClassName, styles.host)}\n      {...commonProps}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAShD;;CAEC,GACD,MAAMC,eAAe;QAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAEE,WADfC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAEuB,KAACd,kCAAkBe;;AAE5C;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;WAWPC,YAAY;YACd,iBAAiB;YACjB,QAAQ;QACV;IAEJ,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;WACFF,WAAW;YAAE,iBAAiB;QAAK,IAAI;YAAEG,UAAU;QAAE;IAE7D;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAczB,gBAAgBC;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EAET,GAAGH,OADCF,uCACDE;QAHFU;QACAP;;IAIF,qBACE,KAACD;QACCQ,eAAe5B,WAAW4B;OACtBF,aACAV;AAGV,EAAE"}
+{"version":3,"sources":["../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  focusVisibleMode,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным.\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства.\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component, disabled };\n  } else if (href !== undefined) {\n    return {\n      Component: 'a',\n\n      /**\n       * Если ссылка отключена, добавляем атрибуты для доступности.\n       *\n       * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`.\n       *\n       * @see см. https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria.\n       *\n       */\n      ...(disabled && {\n        'aria-disabled': true,\n        'role': 'link',\n      }),\n    };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      Component: 'div',\n      role: 'button',\n      ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов.\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(props);\n  const isClickable = checkClickable(props);\n  const Component = isClickable ? RealClickable : NonClickable;\n\n  const {\n    baseClassName,\n    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n    Component: ignore,\n    ...restProps\n  } = props;\n\n  return (\n    <Component\n      baseClassName={classNames(baseClassName, styles.host)}\n      {...commonProps}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName","ignore"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAShD;;CAEC,GACD,MAAMC,eAAe;QAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAEE,WADfC;QAZHZ;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;yBAEuB,KAACd,kCAAkBe;;AAE5C;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;WAWPC,YAAY;YACd,iBAAiB;YACjB,QAAQ;QACV;IAEJ,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;WACFF,WAAW;YAAE,iBAAiB;QAAK,IAAI;YAAEG,UAAU;QAAE;IAE7D;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAczB,gBAAgBC;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EACRD,WAAWS,MAAM,EAElB,GAAGX,OADCF,uCACDE;QAJFU;QACAP;QACAD;;IAIF,qBACE,KAACA;QACCQ,eAAe5B,WAAW4B;OACtBF,aACAV;AAGV,EAAE"}

package/dist/components/PanelHeader/PanelHeader.d.ts

@@ -3,8 +3,6 @@ import type { HasComponent, HasDataAttribute, HasRef, HTMLAttributesWithRootRef
 export interface PanelHeaderProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasRef<HTMLDivElement> {
     /**
      * Добавляет элемент слева.
-     *
-     * При передаче нескольких элементов, расставляет отступы между ними.
      */
     before?: React.ReactNode;
     /**

package/dist/components/PanelHeader/PanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,yBAAyB,EAC1B,MAAM,aAAa,CAAC;AA0BrB,MAAM,WAAW,gBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACtD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,eAAe,CAAC,EAAE,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC;CACvF;AAgDD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,8HAazB,gBAAgB,KAAG,KAAK,CAAC,SA2D3B,CAAC"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,YAAY,EACZ,gBAAgB,EAChB,MAAM,EACN,yBAAyB,EAC1B,MAAM,aAAa,CAAC;AA0BrB,MAAM,WAAW,gBACf,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAC/C,MAAM,CAAC,cAAc,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,WAAW,GAAG,SAAS,CAAC;IACtD;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,eAAe,CAAC,EAAE,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,gBAAgB,CAAC;CACvF;AAgDD;;GAEG;AACH,eAAO,MAAM,WAAW,GAAI,8HAazB,gBAAgB,KAAG,KAAK,CAAC,SA2D3B,CAAC"}

package/dist/components/PanelHeader/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type {\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: classNames(styles.vkcom, 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Добавляет элемент слева.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  /**\n   * Тип разделителя под шапкой.\n   *\n   * - `\"none\"` означает, что разделитель не нужен\n   * - `\"separator\"` включает сепаратор при условии, что это:\n   *      - либо платформа `vkcom`\n   *      - либо платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"compact\" />`\n   * - `\"spacing\"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"regular\" />`\n   * - `\"auto\"` автоматически подбирает либо `\"separator\"`, либо `\"spacing\"` по их условиям.\n   */\n  delimiter?: 'auto' | 'none' | 'separator' | 'spacing';\n  /**\n   * Прозрачный фон компонента.\n   */\n  transparent?: boolean;\n  /**\n   * Добавление теней для компонента.\n   */\n  shadow?: boolean;\n  /**\n   * Высота шапки будет игнорироваться контентом панели.\n   */\n  float?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement> & HasDataAttribute;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface PanelHeaderInProps {\n  before?: PanelHeaderProps['before'];\n  after?: PanelHeaderProps['after'];\n  children?: PanelHeaderProps['children'];\n  typographyProps?: PanelHeaderProps['typographyProps'];\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const isInsideModal = useModalContext().id !== null;\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  const typographyNode: React.ReactNode =\n    platform === 'vkcom' ? (\n      <Text weight=\"2\" Component={Component} {...restProps}>\n        {children}\n      </Text>\n    ) : (\n      <Component className={styles.contentIn} {...restProps}>\n        {children}\n      </Component>\n    );\n\n  return (\n    <OnboardingTooltipContainer fixed className={styles.in}>\n      <div className={classNames(styles.before, 'vkuiInternalPanelHeader__before')}>{before}</div>\n      <div className={styles.content}>{typographyNode}</div>\n      <div\n        className={classNames(styles.after, 'vkuiInternalPanelHeader__after')}\n        {...afterSlotProps}\n      />\n    </OnboardingTooltipContainer>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  float = false,\n  transparent = false,\n  delimiter = 'auto',\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  const isVKCOM = platform === 'vkcom';\n  const isFixed = fixed !== undefined ? fixed : !isVKCOM;\n  const separatorVisible = delimiter === 'auto' || delimiter === 'separator';\n  const staticSeparatorVisible = !float && separatorVisible;\n  const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles.trnsp,\n        shadow && styles.shadow,\n        !float && classNames(styles.static, 'vkuiInternalPanelHeader--static'),\n        staticSeparatorVisible && classNames(styles.sep, 'vkuiInternalPanelHeader--sep'),\n        !before && classNames(styles.noBefore, 'vkuiInternalPanelHeader--no-before'),\n        !after && styles.noAfter,\n        isFixed && styles.hasFixed,\n        sizeX !== 'compact' && sizeXClassNames[sizeX],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles.fixed, 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {!isVKCOM && (\n        <>\n          {staticSeparatorVisible && adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} padding />\n          )}\n          {staticSpacingVisible && adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </>\n      )}\n      {separatorVisible && isVKCOM && <Separator className={styles.separator} />}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivity","useAdaptivityConditionalRender","usePlatform","useConfigProvider","FixedLayout","OnboardingTooltipContainer","RootComponent","Separator","Spacing","Text","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","sizeYClassNames","compact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","id","platform","afterSlotProps","style","minWidth","typographyNode","weight","className","fixed","div","PanelHeader","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","adaptiveSizeX","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","baseClassName","hasOwnProperty","vertical","padding","size"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type {\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: classNames(styles.vkcom, 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Добавляет элемент слева.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  /**\n   * Тип разделителя под шапкой.\n   *\n   * - `\"none\"` означает, что разделитель не нужен\n   * - `\"separator\"` включает сепаратор при условии, что это:\n   *      - либо платформа `vkcom`\n   *      - либо платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"compact\" />`\n   * - `\"spacing\"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"regular\" />`\n   * - `\"auto\"` автоматически подбирает либо `\"separator\"`, либо `\"spacing\"` по их условиям.\n   */\n  delimiter?: 'auto' | 'none' | 'separator' | 'spacing';\n  /**\n   * Прозрачный фон компонента.\n   */\n  transparent?: boolean;\n  /**\n   * Добавление теней для компонента.\n   */\n  shadow?: boolean;\n  /**\n   * Высота шапки будет игнорироваться контентом панели.\n   */\n  float?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement> & HasDataAttribute;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface PanelHeaderInProps {\n  before?: PanelHeaderProps['before'];\n  after?: PanelHeaderProps['after'];\n  children?: PanelHeaderProps['children'];\n  typographyProps?: PanelHeaderProps['typographyProps'];\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const isInsideModal = useModalContext().id !== null;\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  const typographyNode: React.ReactNode =\n    platform === 'vkcom' ? (\n      <Text weight=\"2\" Component={Component} {...restProps}>\n        {children}\n      </Text>\n    ) : (\n      <Component className={styles.contentIn} {...restProps}>\n        {children}\n      </Component>\n    );\n\n  return (\n    <OnboardingTooltipContainer fixed className={styles.in}>\n      <div className={classNames(styles.before, 'vkuiInternalPanelHeader__before')}>{before}</div>\n      <div className={styles.content}>{typographyNode}</div>\n      <div\n        className={classNames(styles.after, 'vkuiInternalPanelHeader__after')}\n        {...afterSlotProps}\n      />\n    </OnboardingTooltipContainer>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  float = false,\n  transparent = false,\n  delimiter = 'auto',\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  const isVKCOM = platform === 'vkcom';\n  const isFixed = fixed !== undefined ? fixed : !isVKCOM;\n  const separatorVisible = delimiter === 'auto' || delimiter === 'separator';\n  const staticSeparatorVisible = !float && separatorVisible;\n  const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles.trnsp,\n        shadow && styles.shadow,\n        !float && classNames(styles.static, 'vkuiInternalPanelHeader--static'),\n        staticSeparatorVisible && classNames(styles.sep, 'vkuiInternalPanelHeader--sep'),\n        !before && classNames(styles.noBefore, 'vkuiInternalPanelHeader--no-before'),\n        !after && styles.noAfter,\n        isFixed && styles.hasFixed,\n        sizeX !== 'compact' && sizeXClassNames[sizeX],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles.fixed, 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {!isVKCOM && (\n        <>\n          {staticSeparatorVisible && adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} padding />\n          )}\n          {staticSpacingVisible && adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </>\n      )}\n      {separatorVisible && isVKCOM && <Separator className={styles.separator} />}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivity","useAdaptivityConditionalRender","usePlatform","useConfigProvider","FixedLayout","OnboardingTooltipContainer","RootComponent","Separator","Spacing","Text","platformClassNames","ios","android","vkcom","sizeXClassNames","none","regular","sizeYClassNames","compact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","id","platform","afterSlotProps","style","minWidth","typographyNode","weight","className","fixed","div","PanelHeader","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","adaptiveSizeX","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","baseClassName","hasOwnProperty","vertical","padding","size"],"mappings":"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"}

package/dist/cssm/components/ChipsInputBase/Chip/Chip.js

@@ -69,6 +69,7 @@ const sizeYClassNames = {
             !readOnly && removable && /*#__PURE__*/ _jsx("div", {
                 className: styles.removable,
                 children: /*#__PURE__*/ _jsxs("button", {
+                    type: "button",
                     tabIndex: -1,
                     disabled: disabled,
                     className: styles.remove,

package/dist/cssm/components/ChipsInputBase/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  Component = 'span',\n  value = '',\n  removable = true,\n  onRemove,\n  removeLabel = 'Удалить',\n  before,\n  after,\n  disabled,\n  readOnly,\n  children,\n  className,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: ChipProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onFocus, onBlur } = useFocusVisible();\n  const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n    onFocus(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n    onBlur(event);\n  };\n\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove?.(event, value);\n    },\n    [onRemove, value],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        focusVisibleClassName,\n        className,\n      )}\n      aria-readonly={readOnly}\n      aria-disabled={disabled}\n      onFocus={disabled ? undefined : handleFocus}\n      onBlur={disabled ? undefined : handleBlur}\n    >\n      <div className={styles.in}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n        <Footnote className={styles.content}>{children}</Footnote>\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n      {!readOnly && removable && (\n        <div className={styles.removable}>\n          <button\n            tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n            disabled={disabled}\n            className={styles.remove}\n            onClick={disabled ? undefined : onRemoveWrapper}\n          >\n            <VisuallyHidden>\n              &nbsp; {removeLabel} {children}\n            </VisuallyHidden>\n            <Icon16Cancel />\n          </button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","host","aria-readonly","aria-disabled","undefined","div","in","content","button","tabIndex","remove","onClick"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAErE,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG7B;IAC3B,MAAM,EAAE8B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGzB;IAC1C,MAAM8B,wBAAwB7B,yBAAyB;QAAE4B;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBvC,MAAMwC,WAAW,CACvC,CAACH;QACCjB,WAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACX;QACE,GAAGyB,SAAS;QACbf,WAAWA;QACXU,WAAWzB,WACTQ,OAAO+B,IAAI,EACXR,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CE,uBACAR;QAEFe,iBAAejB;QACfkB,iBAAenB;QACfI,SAASJ,WAAWoB,YAAYR;QAChCN,QAAQN,WAAWoB,YAAYN;;0BAE/B,MAACO;gBAAIlB,WAAWjB,OAAOoC,EAAE;;oBACtB3C,aAAamB,yBAAW,KAACuB;wBAAIlB,WAAWjB,OAAOY,MAAM;kCAAGA;;kCACzD,KAACd;wBAASmB,WAAWjB,OAAOqC,OAAO;kCAAGrB;;oBACrCvB,aAAaoB,wBAAU,KAACsB;wBAAIlB,WAAWjB,OAAOa,KAAK;kCAAGA;;;;YAExD,CAACE,YAAYN,2BACZ,KAAC0B;gBAAIlB,WAAWjB,OAAOS,SAAS;0BAC9B,cAAA,MAAC6B;oBACCC,UAAU,CAAC;oBACXzB,UAAUA;oBACVG,WAAWjB,OAAOwC,MAAM;oBACxBC,SAAS3B,WAAWoB,YAAYL;;sCAEhC,MAAC9B;;gCAAe;gCACNY;gCAAY;gCAAEK;;;sCAExB,KAACzB;;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../../src/components/ChipsInputBase/Chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon16Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../../hooks/useAdaptivity';\nimport { useFocusVisible } from '../../../hooks/useFocusVisible';\nimport { useFocusVisibleClassName } from '../../../hooks/useFocusVisibleClassName';\nimport { RootComponent } from '../../RootComponent/RootComponent';\nimport { Footnote } from '../../Typography/Footnote/Footnote';\nimport { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';\nimport type { ChipProps } from '../types';\nimport styles from './Chip.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n} as const;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  Component = 'span',\n  value = '',\n  removable = true,\n  onRemove,\n  removeLabel = 'Удалить',\n  before,\n  after,\n  disabled,\n  readOnly,\n  children,\n  className,\n  onFocus: onFocusProp,\n  onBlur: onBlurProp,\n  ...restProps\n}: ChipProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const { focusVisible, onFocus, onBlur } = useFocusVisible();\n  const focusVisibleClassName = useFocusVisibleClassName({ focusVisible });\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onFocusProp) {\n      onFocusProp(event);\n    }\n    onFocus(event);\n  };\n\n  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    if (onBlurProp) {\n      onBlurProp(event);\n    }\n    onBlur(event);\n  };\n\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove?.(event, value);\n    },\n    [onRemove, value],\n  );\n\n  return (\n    <RootComponent\n      {...restProps}\n      Component={Component}\n      className={classNames(\n        styles.host,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        focusVisibleClassName,\n        className,\n      )}\n      aria-readonly={readOnly}\n      aria-disabled={disabled}\n      onFocus={disabled ? undefined : handleFocus}\n      onBlur={disabled ? undefined : handleBlur}\n    >\n      <div className={styles.in}>\n        {hasReactNode(before) && <div className={styles.before}>{before}</div>}\n        <Footnote className={styles.content}>{children}</Footnote>\n        {hasReactNode(after) && <div className={styles.after}>{after}</div>}\n      </div>\n      {!readOnly && removable && (\n        <div className={styles.removable}>\n          <button\n            type=\"button\"\n            tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`\n            disabled={disabled}\n            className={styles.remove}\n            onClick={disabled ? undefined : onRemoveWrapper}\n          >\n            <VisuallyHidden>\n              &nbsp; {removeLabel} {children}\n            </VisuallyHidden>\n            <Icon16Cancel />\n          </button>\n        </div>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon16Cancel","classNames","hasReactNode","useAdaptivity","useFocusVisible","useFocusVisibleClassName","RootComponent","Footnote","VisuallyHidden","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","Chip","Component","value","removable","onRemove","removeLabel","before","after","disabled","readOnly","children","className","onFocus","onFocusProp","onBlur","onBlurProp","restProps","sizeY","focusVisible","focusVisibleClassName","handleFocus","event","handleBlur","onRemoveWrapper","useCallback","host","aria-readonly","aria-disabled","undefined","div","in","content","button","type","tabIndex","remove","onClick"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,eAAe,QAAQ,oCAAiC;AACjE,SAASC,wBAAwB,QAAQ,6CAA0C;AACnF,SAASC,aAAa,QAAQ,uCAAoC;AAClE,SAASC,QAAQ,QAAQ,wCAAqC;AAC9D,SAASC,cAAc,QAAQ,yCAAsC;AAErE,OAAOC,YAAY,oBAAoB;AAEvC,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAMC,OAAO,CAAC,EACnBC,YAAY,MAAM,EAClBC,QAAQ,EAAE,EACVC,YAAY,IAAI,EAChBC,QAAQ,EACRC,cAAc,SAAS,EACvBC,MAAM,EACNC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,QAAQ,EACRC,SAAS,EACTC,SAASC,WAAW,EACpBC,QAAQC,UAAU,EAClB,GAAGC,WACO;IACV,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG7B;IAC3B,MAAM,EAAE8B,YAAY,EAAEN,OAAO,EAAEE,MAAM,EAAE,GAAGzB;IAC1C,MAAM8B,wBAAwB7B,yBAAyB;QAAE4B;IAAa;IAEtE,MAAME,cAAc,CAACC;QACnB,IAAIR,aAAa;YACfA,YAAYQ;QACd;QACAT,QAAQS;IACV;IAEA,MAAMC,aAAa,CAACD;QAClB,IAAIN,YAAY;YACdA,WAAWM;QACb;QACAP,OAAOO;IACT;IAEA,MAAME,kBAAkBvC,MAAMwC,WAAW,CACvC,CAACH;QACCjB,WAAWiB,OAAOnB;IACpB,GACA;QAACE;QAAUF;KAAM;IAGnB,qBACE,MAACX;QACE,GAAGyB,SAAS;QACbf,WAAWA;QACXU,WAAWzB,WACTQ,OAAO+B,IAAI,EACXR,UAAU,aAAatB,eAAe,CAACsB,MAAM,EAC7CE,uBACAR;QAEFe,iBAAejB;QACfkB,iBAAenB;QACfI,SAASJ,WAAWoB,YAAYR;QAChCN,QAAQN,WAAWoB,YAAYN;;0BAE/B,MAACO;gBAAIlB,WAAWjB,OAAOoC,EAAE;;oBACtB3C,aAAamB,yBAAW,KAACuB;wBAAIlB,WAAWjB,OAAOY,MAAM;kCAAGA;;kCACzD,KAACd;wBAASmB,WAAWjB,OAAOqC,OAAO;kCAAGrB;;oBACrCvB,aAAaoB,wBAAU,KAACsB;wBAAIlB,WAAWjB,OAAOa,KAAK;kCAAGA;;;;YAExD,CAACE,YAAYN,2BACZ,KAAC0B;gBAAIlB,WAAWjB,OAAOS,SAAS;0BAC9B,cAAA,MAAC6B;oBACCC,MAAK;oBACLC,UAAU,CAAC;oBACX1B,UAAUA;oBACVG,WAAWjB,OAAOyC,MAAM;oBACxBC,SAAS5B,WAAWoB,YAAYL;;sCAEhC,MAAC9B;;gCAAe;gCACNY;gCAAY;gCAAEK;;;sCAExB,KAACzB;;;;;;AAMb,EAAE"}

package/dist/cssm/components/Clickable/Clickable.js

@@ -71,7 +71,7 @@ import styles from "./Clickable.module.css";
     const commonProps = component(props);
     const isClickable = checkClickable(props);
     const Component = isClickable ? RealClickable : NonClickable;
-    const { baseClassName, disabled, ...restProps } = props;
+    const { baseClassName, disabled, Component: ignore, ...restProps } = props;
     return /*#__PURE__*/ _jsx(Component, {
         baseClassName: classNames(baseClassName, styles.host),
         ...commonProps,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  focusVisibleMode,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным.\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства.\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component, disabled };\n  } else if (href !== undefined) {\n    return {\n      Component: 'a',\n\n      /**\n       * Если ссылка отключена, добавляем атрибуты для доступности.\n       *\n       * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`.\n       *\n       * @see см. https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria.\n       *\n       */\n      ...(disabled && {\n        'aria-disabled': true,\n        'role': 'link',\n      }),\n    };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      Component: 'div',\n      role: 'button',\n      ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов.\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(props);\n  const isClickable = checkClickable(props);\n  const Component = isClickable ? RealClickable : NonClickable;\n\n  const {\n    baseClassName,\n    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n    ...restProps\n  } = props;\n\n  return (\n    <Component\n      baseClassName={classNames(baseClassName, styles.host)}\n      {...commonProps}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAChB,GAAGC,WACe,iBAAK,KAAChB;QAAe,GAAGgB,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;YAEX;;;;;;;;OAQC,GACD,GAAIC,YAAY;gBACd,iBAAiB;gBACjB,QAAQ;YACV,CAAC;QACH;IACF,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;YACN,GAAIF,WAAW;gBAAE,iBAAiB;YAAK,IAAI;gBAAEG,UAAU;YAAE,CAAC;QAC5D;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAc1B,gBAAgBE;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EACR,GAAGL,WACJ,GAAGE;IAEJ,qBACE,KAACE;QACCQ,eAAe7B,WAAW6B,eAAe1B,OAAO2B,IAAI;QACnD,GAAGH,WAAW;QACd,GAAGV,SAAS;;AAGnB,EAAE"}
+{"version":3,"sources":["../../../../src/components/Clickable/Clickable.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { type FocusVisibleModeProps } from '../../hooks/useFocusVisibleClassName';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { RealClickable } from './RealClickable';\nimport { type StateProps } from './useState';\nimport styles from './Clickable.module.css';\n\nexport interface ClickableProps<T = HTMLElement>\n  extends RootComponentProps<T>,\n    FocusVisibleModeProps,\n    StateProps {}\n\n/**\n * Некликабельный компонент. Отключаем возможность нажимать на компонент.\n */\nconst NonClickable = <T,>({\n  href,\n  onClick,\n  onClickCapture,\n  activeClassName,\n  hoverClassName,\n  hasActive,\n  hasHover,\n  hovered,\n  unlockParentHover,\n  activated,\n  activeEffectDelay,\n  focusVisibleMode,\n  ...restProps\n}: ClickableProps<T>) => <RootComponent {...restProps} />;\n\n/**\n * Проверяем, является ли компонент кликабельным.\n */\nexport function checkClickable<T>(props: ClickableProps<T>): boolean {\n  return (\n    (props.href !== undefined ||\n      props.onClick !== undefined ||\n      props.onClickCapture !== undefined ||\n      props.Component === 'a' ||\n      props.Component === 'button' ||\n      props.Component === 'label' ||\n      props.Component === 'input') &&\n    !props.disabled\n  );\n}\n\n/**\n * Определяет правильный компонент и его свойства.\n *\n * - если передан Component, используем его\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n */\nfunction component<T>({\n  Component,\n  onClick,\n  onClickCapture,\n  href,\n  disabled,\n}: RootComponentProps<T>): RootComponentProps<T> {\n  if (Component !== undefined) {\n    return { Component, disabled };\n  } else if (href !== undefined) {\n    return {\n      Component: 'a',\n\n      /**\n       * Если ссылка отключена, добавляем атрибуты для доступности.\n       *\n       * - Тег `a` не поддерживает атрибут disabled, поэтому используем `aria-disabled`\n       * - Тег `a` без `href` не является ссылкой, поэтому добавляем `role=\"link\"`.\n       *\n       * @see см. https://w3c.github.io/html-aria/#example-communicate-a-disabled-link-with-aria.\n       *\n       */\n      ...(disabled && {\n        'aria-disabled': true,\n        'role': 'link',\n      }),\n    };\n  } else if (onClick !== undefined || onClickCapture !== undefined) {\n    return {\n      Component: 'div',\n      role: 'button',\n      ...(disabled ? { 'aria-disabled': true } : { tabIndex: 0 }),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Базовый кликабельный корневой компонент.\n *\n * - при передаче `href` превратится в `a`,\n * - при передаче `onClick` превратится в `div` c `role=\"button\"` и `tabIndex=\"0\"`.\n * - иначе используется `div`.\n *\n * Отвечает за:\n *\n * - стейты наведения и нажатия\n * - a11y компонентов.\n */\nexport const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {\n  const commonProps = component(props);\n  const isClickable = checkClickable(props);\n  const Component = isClickable ? RealClickable : NonClickable;\n\n  const {\n    baseClassName,\n    disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps\n    Component: ignore,\n    ...restProps\n  } = props;\n\n  return (\n    <Component\n      baseClassName={classNames(baseClassName, styles.host)}\n      {...commonProps}\n      {...restProps}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","RealClickable","styles","NonClickable","href","onClick","onClickCapture","activeClassName","hoverClassName","hasActive","hasHover","hovered","unlockParentHover","activated","activeEffectDelay","focusVisibleMode","restProps","checkClickable","props","undefined","Component","disabled","component","role","tabIndex","Clickable","commonProps","isClickable","baseClassName","ignore","host"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,aAAa,QAAQ,qBAAkB;AAEhD,OAAOC,YAAY,yBAAyB;AAO5C;;CAEC,GACD,MAAMC,eAAe,CAAK,EACxBC,IAAI,EACJC,OAAO,EACPC,cAAc,EACdC,eAAe,EACfC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,OAAO,EACPC,iBAAiB,EACjBC,SAAS,EACTC,iBAAiB,EACjBC,gBAAgB,EAChB,GAAGC,WACe,iBAAK,KAAChB;QAAe,GAAGgB,SAAS;;AAErD;;CAEC,GACD,OAAO,SAASC,eAAkBC,KAAwB;IACxD,OACE,AAACA,CAAAA,MAAMd,IAAI,KAAKe,aACdD,MAAMb,OAAO,KAAKc,aAClBD,MAAMZ,cAAc,KAAKa,aACzBD,MAAME,SAAS,KAAK,OACpBF,MAAME,SAAS,KAAK,YACpBF,MAAME,SAAS,KAAK,WACpBF,MAAME,SAAS,KAAK,OAAM,KAC5B,CAACF,MAAMG,QAAQ;AAEnB;AAEA;;;;;;;CAOC,GACD,SAASC,UAAa,EACpBF,SAAS,EACTf,OAAO,EACPC,cAAc,EACdF,IAAI,EACJiB,QAAQ,EACc;IACtB,IAAID,cAAcD,WAAW;QAC3B,OAAO;YAAEC;YAAWC;QAAS;IAC/B,OAAO,IAAIjB,SAASe,WAAW;QAC7B,OAAO;YACLC,WAAW;YAEX;;;;;;;;OAQC,GACD,GAAIC,YAAY;gBACd,iBAAiB;gBACjB,QAAQ;YACV,CAAC;QACH;IACF,OAAO,IAAIhB,YAAYc,aAAab,mBAAmBa,WAAW;QAChE,OAAO;YACLC,WAAW;YACXG,MAAM;YACN,GAAIF,WAAW;gBAAE,iBAAiB;YAAK,IAAI;gBAAEG,UAAU;YAAE,CAAC;QAC5D;IACF;IAEA,OAAO,CAAC;AACV;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAKP;IAC5B,MAAMQ,cAAcJ,UAAUJ;IAC9B,MAAMS,cAAcV,eAAeC;IACnC,MAAME,YAAYO,cAAc1B,gBAAgBE;IAEhD,MAAM,EACJyB,aAAa,EACbP,QAAQ,EACRD,WAAWS,MAAM,EACjB,GAAGb,WACJ,GAAGE;IAEJ,qBACE,KAACE;QACCQ,eAAe7B,WAAW6B,eAAe1B,OAAO4B,IAAI;QACnD,GAAGJ,WAAW;QACd,GAAGV,SAAS;;AAGnB,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type {\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: classNames(styles.vkcom, 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Добавляет элемент слева.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  /**\n   * Тип разделителя под шапкой.\n   *\n   * - `\"none\"` означает, что разделитель не нужен\n   * - `\"separator\"` включает сепаратор при условии, что это:\n   *      - либо платформа `vkcom`\n   *      - либо платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"compact\" />`\n   * - `\"spacing\"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"regular\" />`\n   * - `\"auto\"` автоматически подбирает либо `\"separator\"`, либо `\"spacing\"` по их условиям.\n   */\n  delimiter?: 'auto' | 'none' | 'separator' | 'spacing';\n  /**\n   * Прозрачный фон компонента.\n   */\n  transparent?: boolean;\n  /**\n   * Добавление теней для компонента.\n   */\n  shadow?: boolean;\n  /**\n   * Высота шапки будет игнорироваться контентом панели.\n   */\n  float?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement> & HasDataAttribute;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface PanelHeaderInProps {\n  before?: PanelHeaderProps['before'];\n  after?: PanelHeaderProps['after'];\n  children?: PanelHeaderProps['children'];\n  typographyProps?: PanelHeaderProps['typographyProps'];\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const isInsideModal = useModalContext().id !== null;\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  const typographyNode: React.ReactNode =\n    platform === 'vkcom' ? (\n      <Text weight=\"2\" Component={Component} {...restProps}>\n        {children}\n      </Text>\n    ) : (\n      <Component className={styles.contentIn} {...restProps}>\n        {children}\n      </Component>\n    );\n\n  return (\n    <OnboardingTooltipContainer fixed className={styles.in}>\n      <div className={classNames(styles.before, 'vkuiInternalPanelHeader__before')}>{before}</div>\n      <div className={styles.content}>{typographyNode}</div>\n      <div\n        className={classNames(styles.after, 'vkuiInternalPanelHeader__after')}\n        {...afterSlotProps}\n      />\n    </OnboardingTooltipContainer>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  float = false,\n  transparent = false,\n  delimiter = 'auto',\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  const isVKCOM = platform === 'vkcom';\n  const isFixed = fixed !== undefined ? fixed : !isVKCOM;\n  const separatorVisible = delimiter === 'auto' || delimiter === 'separator';\n  const staticSeparatorVisible = !float && separatorVisible;\n  const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles.trnsp,\n        shadow && styles.shadow,\n        !float && classNames(styles.static, 'vkuiInternalPanelHeader--static'),\n        staticSeparatorVisible && classNames(styles.sep, 'vkuiInternalPanelHeader--sep'),\n        !before && classNames(styles.noBefore, 'vkuiInternalPanelHeader--no-before'),\n        !after && styles.noAfter,\n        isFixed && styles.hasFixed,\n        sizeX !== 'compact' && sizeXClassNames[sizeX],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles.fixed, 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {!isVKCOM && (\n        <>\n          {staticSeparatorVisible && adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} padding />\n          )}\n          {staticSpacingVisible && adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </>\n      )}\n      {separatorVisible && isVKCOM && <Separator className={styles.separator} />}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivity","useAdaptivityConditionalRender","usePlatform","useConfigProvider","FixedLayout","OnboardingTooltipContainer","RootComponent","Separator","Spacing","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","sizeYClassNames","sizeYNone","compact","sizeYCompact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","id","platform","afterSlotProps","style","minWidth","typographyNode","weight","className","contentIn","fixed","in","div","content","PanelHeader","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","adaptiveSizeX","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","baseClassName","host","hasOwnProperty","trnsp","static","sep","noBefore","noAfter","hasFixed","vertical","padding","size","separator"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/PanelHeader/PanelHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type {\n  HasComponent,\n  HasDataAttribute,\n  HasRef,\n  HTMLAttributesWithRootRef,\n} from '../../types';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FixedLayout } from '../FixedLayout/FixedLayout';\nimport { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Text } from '../Typography/Text/Text';\nimport styles from './PanelHeader.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: classNames(styles.vkcom, 'vkuiInternalPanelHeader--vkcom'),\n};\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface PanelHeaderProps\n  extends HTMLAttributesWithRootRef<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Добавляет элемент слева.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет элемент справа.\n   *\n   * При передаче нескольких элементов, расставляет отступы между ними.\n   */\n  after?: React.ReactNode;\n  /**\n   * Тип разделителя под шапкой.\n   *\n   * - `\"none\"` означает, что разделитель не нужен\n   * - `\"separator\"` включает сепаратор при условии, что это:\n   *      - либо платформа `vkcom`\n   *      - либо платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"compact\" />`\n   * - `\"spacing\"` включает отступ, если это платформа `android`/`ios` при `<AdaptivityProvider sizeX=\"regular\" />`\n   * - `\"auto\"` автоматически подбирает либо `\"separator\"`, либо `\"spacing\"` по их условиям.\n   */\n  delimiter?: 'auto' | 'none' | 'separator' | 'spacing';\n  /**\n   * Прозрачный фон компонента.\n   */\n  transparent?: boolean;\n  /**\n   * Добавление теней для компонента.\n   */\n  shadow?: boolean;\n  /**\n   * Высота шапки будет игнорироваться контентом панели.\n   */\n  float?: boolean;\n  /**\n   * Если `false`, то шапка будет в потоке. По умолчанию `true`, но если платформа vkcom, то по умолчанию `false`.\n   */\n  fixed?: boolean;\n  /**\n   * По умолчанию как `Component` используется `span`.\n   */\n  typographyProps?: HasComponent & React.HTMLAttributes<HTMLElement> & HasDataAttribute;\n}\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface PanelHeaderInProps {\n  before?: PanelHeaderProps['before'];\n  after?: PanelHeaderProps['after'];\n  children?: PanelHeaderProps['children'];\n  typographyProps?: PanelHeaderProps['typographyProps'];\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {\n  const { Component = 'span', ...restProps } = typographyProps;\n  const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();\n  const isInsideModal = useModalContext().id !== null;\n  const platform = usePlatform();\n\n  const afterSlotProps =\n    !hasCustomPanelHeaderAfter || isInsideModal\n      ? {\n          children: after,\n        }\n      : {\n          style: { minWidth: customPanelHeaderAfterMinWidth },\n        };\n  const typographyNode: React.ReactNode =\n    platform === 'vkcom' ? (\n      <Text weight=\"2\" Component={Component} {...restProps}>\n        {children}\n      </Text>\n    ) : (\n      <Component className={styles.contentIn} {...restProps}>\n        {children}\n      </Component>\n    );\n\n  return (\n    <OnboardingTooltipContainer fixed className={styles.in}>\n      <div className={classNames(styles.before, 'vkuiInternalPanelHeader__before')}>{before}</div>\n      <div className={styles.content}>{typographyNode}</div>\n      <div\n        className={classNames(styles.after, 'vkuiInternalPanelHeader__after')}\n        {...afterSlotProps}\n      />\n    </OnboardingTooltipContainer>\n  );\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeader\n */\nexport const PanelHeader = ({\n  before,\n  children,\n  after,\n  float = false,\n  transparent = false,\n  delimiter = 'auto',\n  shadow,\n  getRef,\n  getRootRef,\n  fixed,\n  typographyProps,\n  ...restProps\n}: PanelHeaderProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { sizeX: adaptiveSizeX } = useAdaptivityConditionalRender();\n  const isVKCOM = platform === 'vkcom';\n  const isFixed = fixed !== undefined ? fixed : !isVKCOM;\n  const separatorVisible = delimiter === 'auto' || delimiter === 'separator';\n  const staticSeparatorVisible = !float && separatorVisible;\n  const staticSpacingVisible = !float && (delimiter === 'auto' || delimiter === 'spacing');\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        'vkuiInternalPanelHeader',\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        transparent && styles.trnsp,\n        shadow && styles.shadow,\n        !float && classNames(styles.static, 'vkuiInternalPanelHeader--static'),\n        staticSeparatorVisible && classNames(styles.sep, 'vkuiInternalPanelHeader--sep'),\n        !before && classNames(styles.noBefore, 'vkuiInternalPanelHeader--no-before'),\n        !after && styles.noAfter,\n        isFixed && styles.hasFixed,\n        sizeX !== 'compact' && sizeXClassNames[sizeX],\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n      )}\n      getRootRef={isFixed ? getRootRef : getRef}\n    >\n      {isFixed ? (\n        <FixedLayout\n          className={classNames(styles.fixed, 'vkuiInternalPanelHeader__fixed')}\n          vertical=\"top\"\n          getRootRef={getRef}\n        >\n          <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n            {children}\n          </PanelHeaderIn>\n        </FixedLayout>\n      ) : (\n        <PanelHeaderIn before={before} after={after} typographyProps={typographyProps}>\n          {children}\n        </PanelHeaderIn>\n      )}\n      {!isVKCOM && (\n        <>\n          {staticSeparatorVisible && adaptiveSizeX.compact && (\n            <Separator className={adaptiveSizeX.compact.className} padding />\n          )}\n          {staticSpacingVisible && adaptiveSizeX.regular && (\n            <Spacing className={adaptiveSizeX.regular.className} size={16} />\n          )}\n        </>\n      )}\n      {separatorVisible && isVKCOM && <Separator className={styles.separator} />}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivity","useAdaptivityConditionalRender","usePlatform","useConfigProvider","FixedLayout","OnboardingTooltipContainer","RootComponent","Separator","Spacing","Text","styles","platformClassNames","ios","android","vkcom","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","sizeYClassNames","sizeYNone","compact","sizeYCompact","PanelHeaderIn","before","after","children","typographyProps","Component","restProps","hasCustomPanelHeaderAfter","customPanelHeaderAfterMinWidth","isInsideModal","id","platform","afterSlotProps","style","minWidth","typographyNode","weight","className","contentIn","fixed","in","div","content","PanelHeader","float","transparent","delimiter","shadow","getRef","getRootRef","sizeX","sizeY","adaptiveSizeX","isVKCOM","isFixed","undefined","separatorVisible","staticSeparatorVisible","staticSpacingVisible","baseClassName","host","hasOwnProperty","trnsp","static","sep","noBefore","noAfter","hasFixed","vertical","padding","size","separator"],"mappings":"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"}

package/dist/cssm/lib/layouts/gaps.js

@@ -24,7 +24,7 @@ export const rowGapClassNames = {
 /**
  * Возвращает массив отступов [rowGap, columnGap]
  */ export function calculateGap(gap) {
-    if (!gap) {
+    if (gap === undefined) {
         return [
             undefined,
             undefined

package/dist/cssm/lib/layouts/gaps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/lib/layouts/gaps.ts"],"sourcesContent":["import type { LiteralUnion } from '../../types';\nimport styles from '../../styles/gaps.module.css';\n\ntype GapPresets = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport const columnGapClassNames: Record<GapPresets, string> = {\n  '2xs': styles['-column-gap--2xs'],\n  'xs': styles['-column-gap--xs'],\n  's': styles['-column-gap--s'],\n  'm': styles['-column-gap--m'],\n  'l': styles['-column-gap--l'],\n  'xl': styles['-column-gap--xl'],\n  '2xl': styles['-column-gap--2xl'],\n  '3xl': styles['-column-gap--3xl'],\n  '4xl': styles['-column-gap--4xl'],\n};\n\nexport const rowGapClassNames: Record<GapPresets, string> = {\n  '2xs': styles['-row-gap--2xs'],\n  'xs': styles['-row-gap--xs'],\n  's': styles['-row-gap--s'],\n  'm': styles['-row-gap--m'],\n  'l': styles['-row-gap--l'],\n  'xl': styles['-row-gap--xl'],\n  '2xl': styles['-row-gap--2xl'],\n  '3xl': styles['-row-gap--3xl'],\n  '4xl': styles['-row-gap--4xl'],\n};\n\nexport type GapProp = LiteralUnion<GapPresets, number>;\n\nexport type GapsProp = GapProp | [GapProp, GapProp];\n\n/**\n * Возвращает массив отступов [rowGap, columnGap]\n */\nexport function calculateGap(\n  gap: GapsProp | undefined,\n): [GapProp, GapProp] | [undefined, undefined] {\n  if (!gap) {\n    return [undefined, undefined];\n  }\n  if (typeof gap === 'number' || typeof gap === 'string') {\n    return [gap, gap];\n  }\n\n  return gap;\n}\n"],"names":["styles","columnGapClassNames","rowGapClassNames","calculateGap","gap","undefined"],"mappings":"AACA,OAAOA,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,sBAAkD;IAC7D,OAAOD,MAAM,CAAC,mBAAmB;IACjC,MAAMA,MAAM,CAAC,kBAAkB;IAC/B,KAAKA,MAAM,CAAC,iBAAiB;IAC7B,KAAKA,MAAM,CAAC,iBAAiB;IAC7B,KAAKA,MAAM,CAAC,iBAAiB;IAC7B,MAAMA,MAAM,CAAC,kBAAkB;IAC/B,OAAOA,MAAM,CAAC,mBAAmB;IACjC,OAAOA,MAAM,CAAC,mBAAmB;IACjC,OAAOA,MAAM,CAAC,mBAAmB;AACnC,EAAE;AAEF,OAAO,MAAME,mBAA+C;IAC1D,OAAOF,MAAM,CAAC,gBAAgB;IAC9B,MAAMA,MAAM,CAAC,eAAe;IAC5B,KAAKA,MAAM,CAAC,cAAc;IAC1B,KAAKA,MAAM,CAAC,cAAc;IAC1B,KAAKA,MAAM,CAAC,cAAc;IAC1B,MAAMA,MAAM,CAAC,eAAe;IAC5B,OAAOA,MAAM,CAAC,gBAAgB;IAC9B,OAAOA,MAAM,CAAC,gBAAgB;IAC9B,OAAOA,MAAM,CAAC,gBAAgB;AAChC,EAAE;AAMF;;CAEC,GACD,OAAO,SAASG,aACdC,GAAyB;IAEzB,IAAI,CAACA,KAAK;QACR,OAAO;YAACC;YAAWA;SAAU;IAC/B;IACA,IAAI,OAAOD,QAAQ,YAAY,OAAOA,QAAQ,UAAU;QACtD,OAAO;YAACA;YAAKA;SAAI;IACnB;IAEA,OAAOA;AACT"}
+{"version":3,"sources":["../../../../src/lib/layouts/gaps.ts"],"sourcesContent":["import type { LiteralUnion } from '../../types';\nimport styles from '../../styles/gaps.module.css';\n\ntype GapPresets = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport const columnGapClassNames: Record<GapPresets, string> = {\n  '2xs': styles['-column-gap--2xs'],\n  'xs': styles['-column-gap--xs'],\n  's': styles['-column-gap--s'],\n  'm': styles['-column-gap--m'],\n  'l': styles['-column-gap--l'],\n  'xl': styles['-column-gap--xl'],\n  '2xl': styles['-column-gap--2xl'],\n  '3xl': styles['-column-gap--3xl'],\n  '4xl': styles['-column-gap--4xl'],\n};\n\nexport const rowGapClassNames: Record<GapPresets, string> = {\n  '2xs': styles['-row-gap--2xs'],\n  'xs': styles['-row-gap--xs'],\n  's': styles['-row-gap--s'],\n  'm': styles['-row-gap--m'],\n  'l': styles['-row-gap--l'],\n  'xl': styles['-row-gap--xl'],\n  '2xl': styles['-row-gap--2xl'],\n  '3xl': styles['-row-gap--3xl'],\n  '4xl': styles['-row-gap--4xl'],\n};\n\nexport type GapProp = LiteralUnion<GapPresets, number>;\n\nexport type GapsProp = GapProp | [GapProp, GapProp];\n\n/**\n * Возвращает массив отступов [rowGap, columnGap]\n */\nexport function calculateGap(\n  gap: GapsProp | undefined,\n): [GapProp, GapProp] | [undefined, undefined] {\n  if (gap === undefined) {\n    return [undefined, undefined];\n  }\n  if (typeof gap === 'number' || typeof gap === 'string') {\n    return [gap, gap];\n  }\n\n  return gap;\n}\n"],"names":["styles","columnGapClassNames","rowGapClassNames","calculateGap","gap","undefined"],"mappings":"AACA,OAAOA,YAAY,+BAA+B;AAIlD,OAAO,MAAMC,sBAAkD;IAC7D,OAAOD,MAAM,CAAC,mBAAmB;IACjC,MAAMA,MAAM,CAAC,kBAAkB;IAC/B,KAAKA,MAAM,CAAC,iBAAiB;IAC7B,KAAKA,MAAM,CAAC,iBAAiB;IAC7B,KAAKA,MAAM,CAAC,iBAAiB;IAC7B,MAAMA,MAAM,CAAC,kBAAkB;IAC/B,OAAOA,MAAM,CAAC,mBAAmB;IACjC,OAAOA,MAAM,CAAC,mBAAmB;IACjC,OAAOA,MAAM,CAAC,mBAAmB;AACnC,EAAE;AAEF,OAAO,MAAME,mBAA+C;IAC1D,OAAOF,MAAM,CAAC,gBAAgB;IAC9B,MAAMA,MAAM,CAAC,eAAe;IAC5B,KAAKA,MAAM,CAAC,cAAc;IAC1B,KAAKA,MAAM,CAAC,cAAc;IAC1B,KAAKA,MAAM,CAAC,cAAc;IAC1B,MAAMA,MAAM,CAAC,eAAe;IAC5B,OAAOA,MAAM,CAAC,gBAAgB;IAC9B,OAAOA,MAAM,CAAC,gBAAgB;IAC9B,OAAOA,MAAM,CAAC,gBAAgB;AAChC,EAAE;AAMF;;CAEC,GACD,OAAO,SAASG,aACdC,GAAyB;IAEzB,IAAIA,QAAQC,WAAW;QACrB,OAAO;YAACA;YAAWA;SAAU;IAC/B;IACA,IAAI,OAAOD,QAAQ,YAAY,OAAOA,QAAQ,UAAU;QACtD,OAAO;YAACA;YAAKA;SAAI;IACnB;IAEA,OAAOA;AACT"}

package/dist/lib/layouts/gaps.js

@@ -23,7 +23,7 @@ export const rowGapClassNames = {
 /**
  * Возвращает массив отступов [rowGap, columnGap]
  */ export function calculateGap(gap) {
-    if (!gap) {
+    if (gap === undefined) {
         return [
             undefined,
             undefined

package/dist/lib/layouts/gaps.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/layouts/gaps.ts"],"sourcesContent":["import type { LiteralUnion } from '../../types';\nimport styles from '../../styles/gaps.module.css';\n\ntype GapPresets = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport const columnGapClassNames: Record<GapPresets, string> = {\n  '2xs': styles['-column-gap--2xs'],\n  'xs': styles['-column-gap--xs'],\n  's': styles['-column-gap--s'],\n  'm': styles['-column-gap--m'],\n  'l': styles['-column-gap--l'],\n  'xl': styles['-column-gap--xl'],\n  '2xl': styles['-column-gap--2xl'],\n  '3xl': styles['-column-gap--3xl'],\n  '4xl': styles['-column-gap--4xl'],\n};\n\nexport const rowGapClassNames: Record<GapPresets, string> = {\n  '2xs': styles['-row-gap--2xs'],\n  'xs': styles['-row-gap--xs'],\n  's': styles['-row-gap--s'],\n  'm': styles['-row-gap--m'],\n  'l': styles['-row-gap--l'],\n  'xl': styles['-row-gap--xl'],\n  '2xl': styles['-row-gap--2xl'],\n  '3xl': styles['-row-gap--3xl'],\n  '4xl': styles['-row-gap--4xl'],\n};\n\nexport type GapProp = LiteralUnion<GapPresets, number>;\n\nexport type GapsProp = GapProp | [GapProp, GapProp];\n\n/**\n * Возвращает массив отступов [rowGap, columnGap]\n */\nexport function calculateGap(\n  gap: GapsProp | undefined,\n): [GapProp, GapProp] | [undefined, undefined] {\n  if (!gap) {\n    return [undefined, undefined];\n  }\n  if (typeof gap === 'number' || typeof gap === 'string') {\n    return [gap, gap];\n  }\n\n  return gap;\n}\n"],"names":["columnGapClassNames","rowGapClassNames","calculateGap","gap","undefined"],"mappings":"AAKA,OAAO,MAAMA,sBAAkD;IAC7D,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP,EAAE;AAEF,OAAO,MAAMC,mBAA+C;IAC1D,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP,EAAE;AAMF;;CAEC,GACD,OAAO,SAASC,aACdC,GAAyB;IAEzB,IAAI,CAACA,KAAK;QACR,OAAO;YAACC;YAAWA;SAAU;IAC/B;IACA,IAAI,OAAOD,QAAQ,YAAY,OAAOA,QAAQ,UAAU;QACtD,OAAO;YAACA;YAAKA;SAAI;IACnB;IAEA,OAAOA;AACT"}
+{"version":3,"sources":["../../../src/lib/layouts/gaps.ts"],"sourcesContent":["import type { LiteralUnion } from '../../types';\nimport styles from '../../styles/gaps.module.css';\n\ntype GapPresets = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport const columnGapClassNames: Record<GapPresets, string> = {\n  '2xs': styles['-column-gap--2xs'],\n  'xs': styles['-column-gap--xs'],\n  's': styles['-column-gap--s'],\n  'm': styles['-column-gap--m'],\n  'l': styles['-column-gap--l'],\n  'xl': styles['-column-gap--xl'],\n  '2xl': styles['-column-gap--2xl'],\n  '3xl': styles['-column-gap--3xl'],\n  '4xl': styles['-column-gap--4xl'],\n};\n\nexport const rowGapClassNames: Record<GapPresets, string> = {\n  '2xs': styles['-row-gap--2xs'],\n  'xs': styles['-row-gap--xs'],\n  's': styles['-row-gap--s'],\n  'm': styles['-row-gap--m'],\n  'l': styles['-row-gap--l'],\n  'xl': styles['-row-gap--xl'],\n  '2xl': styles['-row-gap--2xl'],\n  '3xl': styles['-row-gap--3xl'],\n  '4xl': styles['-row-gap--4xl'],\n};\n\nexport type GapProp = LiteralUnion<GapPresets, number>;\n\nexport type GapsProp = GapProp | [GapProp, GapProp];\n\n/**\n * Возвращает массив отступов [rowGap, columnGap]\n */\nexport function calculateGap(\n  gap: GapsProp | undefined,\n): [GapProp, GapProp] | [undefined, undefined] {\n  if (gap === undefined) {\n    return [undefined, undefined];\n  }\n  if (typeof gap === 'number' || typeof gap === 'string') {\n    return [gap, gap];\n  }\n\n  return gap;\n}\n"],"names":["columnGapClassNames","rowGapClassNames","calculateGap","gap","undefined"],"mappings":"AAKA,OAAO,MAAMA,sBAAkD;IAC7D,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP,EAAE;AAEF,OAAO,MAAMC,mBAA+C;IAC1D,KAAK;IACL,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;AACP,EAAE;AAMF;;CAEC,GACD,OAAO,SAASC,aACdC,GAAyB;IAEzB,IAAIA,QAAQC,WAAW;QACrB,OAAO;YAACA;YAAWA;SAAU;IAC/B;IACA,IAAI,OAAOD,QAAQ,YAAY,OAAOA,QAAQ,UAAU;QACtD,OAAO;YAACA;YAAKA;SAAI;IACnB;IAEA,OAAOA;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.3.6",
+  "version": "7.3.7",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",

package/src/components/ChipsInputBase/Chip/Chip.tsx

@@ -84,6 +84,7 @@ export const Chip = ({
       {!readOnly && removable && (
         <div className={styles.removable}>
           <button
+            type="button"
             tabIndex={-1} // [reason]: чтобы можно было выставлять состояние фокуса только программно через `*.focus()`
             disabled={disabled}
             className={styles.remove}

package/src/components/Clickable/Clickable.tsx

@@ -112,6 +112,7 @@ export const Clickable = <T,>(props: ClickableProps<T>): React.ReactNode => {
   const {
     baseClassName,
     disabled, // Игнорируем disabled из пропсов, т.к. он обрабатывается в commonProps
+    Component: ignore,
     ...restProps
   } = props;
 

package/src/components/PanelHeader/PanelHeader.tsx

@@ -42,8 +42,6 @@ export interface PanelHeaderProps
     HasRef<HTMLDivElement> {
   /**
    * Добавляет элемент слева.
-   *
-   * При передаче нескольких элементов, расставляет отступы между ними.
    */
   before?: React.ReactNode;
   /**

package/src/lib/layouts/gaps.ts

@@ -37,7 +37,7 @@ export type GapsProp = GapProp | [GapProp, GapProp];
 export function calculateGap(
   gap: GapsProp | undefined,
 ): [GapProp, GapProp] | [undefined, undefined] {
-  if (!gap) {
+  if (gap === undefined) {
     return [undefined, undefined];
   }
   if (typeof gap === 'number' || typeof gap === 'string') {