@vkontakte/vkui 7.3.8 → 7.4.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableProps, 'label'> {\n  /**\n   * Флаг для обозначения первичной кнопки\n   * Влияет на стилизацию кнопки.\n   */\n  primary?: boolean;\n  /**\n   * Текст или содержимое кнопки.\n   */\n  label?: React.ReactNode; // TODO [>=8]: добавить св-во indicator, чтобы разграничить кейсы.\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  /**\n   * Флаг для обозначения первичной кнопки\n   * Наследуется от PanelHeaderButtonProps['primary'].\n   */\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles.hover;\n      activeMode = styles.active;\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n  const elements = [label, children].filter((item) => !!item);\n\n  const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        onlyPrimitive && styles.primitive,\n        !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles.label}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","hover","active","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","baseClassName","host","hasOwnProperty","primitive","notPrimitive","className"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAsBA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACL,GAAGC,WACoB;IACvB,MAAMC,cAAczB,qBAAqBe;IACzC,MAAMW,mBAAmB1B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI0B;IACJ,IAAIC;IAEJ,OAAQZ;QACN,KAAK;YACHW,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYnB,OAAOqB,KAAK;YACxBD,aAAapB,OAAOsB,MAAM;YAC1B;QACF;YACEH,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAehC,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGC,SAAS;QACd;QAEA,IAAI,CAACU,cAAc;YACjBb,KAAKlB,gBAAgBgC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACd;QAAOR;KAAS,CAACuB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKzC,qBAAqBqC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAChC;QACCY,WAAWO,UAAUY,IAAI,GAAG,MAAM;QAClCT,WAAWA;QACXe,mBAAmB;QACnBd,YAAYA;QACX,GAAGJ,SAAS;QACbmB,eAAe5C,WACbS,OAAOoC,IAAI,EACXnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B6B,iBAAiBhC,OAAOsC,SAAS,EACjC,CAACrB,eAAe,CAACC,oBAAoBlB,OAAOuC,YAAY;;YAGzDtB,4BAAc,KAACZ;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFW,iCACC,KAACb;gBAAiBC,SAASA;gBAASkC,WAAWxC,OAAOe,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}
+{"version":3,"sources":["../../../../src/components/PanelHeaderButton/PanelHeaderButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, isPrimitiveReactNode } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { hasAccessibleName } from '../../lib/accessibility';\nimport { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './PanelHeaderButton.module.css';\n\nconst platformClassNames = {\n  ios: styles.ios,\n  android: styles.android,\n  vkcom: styles.vkcom,\n};\n\nexport interface PanelHeaderButtonProps extends Omit<TappableOmitProps, 'label'> {\n  /**\n   * Флаг для обозначения первичной кнопки\n   * Влияет на стилизацию кнопки.\n   */\n  primary?: boolean;\n  /**\n   * Текст или содержимое кнопки.\n   */\n  label?: React.ReactNode; // TODO [>=8]: добавить св-во indicator, чтобы разграничить кейсы.\n}\n\ninterface ButtonTypographyProps extends React.AllHTMLAttributes<HTMLElement> {\n  /**\n   * Флаг для обозначения первичной кнопки\n   * Наследуется от PanelHeaderButtonProps['primary'].\n   */\n  primary?: PanelHeaderButtonProps['primary'];\n}\n\nconst ButtonTypography = ({ primary, children }: ButtonTypographyProps) => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return (\n      <Title Component=\"span\" level=\"3\" weight={primary ? '1' : '3'}>\n        {children}\n      </Title>\n    );\n  }\n\n  return <Text weight={platform === 'vkcom' ? undefined : '2'}>{children}</Text>;\n};\n\nconst warn = warnOnce('PanelHeaderButton');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton\n */\nexport const PanelHeaderButton = ({\n  children,\n  primary = false,\n  label,\n  ...restProps\n}: PanelHeaderButtonProps): React.ReactNode => {\n  const isPrimitive = isPrimitiveReactNode(children);\n  const isPrimitiveLabel = isPrimitiveReactNode(label);\n  const platform = usePlatform();\n\n  let hoverMode;\n  let activeMode;\n\n  switch (platform) {\n    case 'ios':\n      hoverMode = 'background';\n      activeMode = 'opacity';\n      break;\n    case 'vkcom':\n      hoverMode = styles.hover;\n      activeMode = styles.active;\n      break;\n    default:\n      hoverMode = 'background';\n      activeMode = 'background';\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    /* istanbul ignore next: проверка в dev mode, тест на hasAccessibleName() есть в lib/accessibility.test.tsx */\n    const isAccessible = hasAccessibleName({\n      children: [children, label],\n      ...restProps,\n    });\n\n    if (!isAccessible) {\n      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');\n    }\n  }\n  const elements = [label, children].filter((item) => !!item);\n\n  const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);\n\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      hoverMode={hoverMode}\n      activeEffectDelay={200}\n      activeMode={activeMode}\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        platformClassNames.hasOwnProperty(platform)\n          ? platformClassNames[platform]\n          : platformClassNames.android,\n        onlyPrimitive && styles.primitive,\n        !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,\n      )}\n    >\n      {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}\n      {isPrimitiveLabel ? (\n        <ButtonTypography primary={primary} className={styles.label}>\n          {label}\n        </ButtonTypography>\n      ) : (\n        label\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","isPrimitiveReactNode","usePlatform","hasAccessibleName","COMMON_WARNINGS","warnOnce","Tappable","Text","Title","styles","platformClassNames","ios","android","vkcom","ButtonTypography","primary","children","platform","Component","level","weight","undefined","warn","PanelHeaderButton","label","restProps","isPrimitive","isPrimitiveLabel","hoverMode","activeMode","hover","active","process","env","NODE_ENV","isAccessible","a11y","href","elements","filter","item","onlyPrimitive","length","activeEffectDelay","baseClassName","host","hasOwnProperty","primitive","notPrimitive","className"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,oBAAoB,QAAQ,kBAAkB;AACnE,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,iBAAiB,QAAQ,6BAA0B;AAC5D,SAASC,eAAe,EAAEC,QAAQ,QAAQ,wBAAqB;AAC/D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,iCAAiC;AAEpD,MAAMC,qBAAqB;IACzBC,KAAKF,OAAOE,GAAG;IACfC,SAASH,OAAOG,OAAO;IACvBC,OAAOJ,OAAOI,KAAK;AACrB;AAsBA,MAAMC,mBAAmB,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAyB;IACpE,MAAMC,WAAWf;IAEjB,IAAIe,aAAa,OAAO;QACtB,qBACE,KAACT;YAAMU,WAAU;YAAOC,OAAM;YAAIC,QAAQL,UAAU,MAAM;sBACvDC;;IAGP;IAEA,qBAAO,KAACT;QAAKa,QAAQH,aAAa,UAAUI,YAAY;kBAAML;;AAChE;AAEA,MAAMM,OAAOjB,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMkB,oBAAoB,CAAC,EAChCP,QAAQ,EACRD,UAAU,KAAK,EACfS,KAAK,EACL,GAAGC,WACoB;IACvB,MAAMC,cAAczB,qBAAqBe;IACzC,MAAMW,mBAAmB1B,qBAAqBuB;IAC9C,MAAMP,WAAWf;IAEjB,IAAI0B;IACJ,IAAIC;IAEJ,OAAQZ;QACN,KAAK;YACHW,YAAY;YACZC,aAAa;YACb;QACF,KAAK;YACHD,YAAYnB,OAAOqB,KAAK;YACxBD,aAAapB,OAAOsB,MAAM;YAC1B;QACF;YACEH,YAAY;YACZC,aAAa;IACjB;IAEA,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;QAC1C,4GAA4G,GAC5G,MAAMC,eAAehC,kBAAkB;YACrCa,UAAU;gBAACA;gBAAUQ;aAAM;YAC3B,GAAGC,SAAS;QACd;QAEA,IAAI,CAACU,cAAc;YACjBb,KAAKlB,gBAAgBgC,IAAI,CAACX,UAAUY,IAAI,GAAG,cAAc,cAAc,EAAE;QAC3E;IACF;IACA,MAAMC,WAAW;QAACd;QAAOR;KAAS,CAACuB,MAAM,CAAC,CAACC,OAAS,CAAC,CAACA;IAEtD,MAAMC,gBAAgBH,SAASI,MAAM,KAAK,KAAKzC,qBAAqBqC,QAAQ,CAAC,EAAE;IAE/E,qBACE,MAAChC;QACCY,WAAWO,UAAUY,IAAI,GAAG,MAAM;QAClCT,WAAWA;QACXe,mBAAmB;QACnBd,YAAYA;QACX,GAAGJ,SAAS;QACbmB,eAAe5C,WACbS,OAAOoC,IAAI,EACXnC,mBAAmBoC,cAAc,CAAC7B,YAC9BP,kBAAkB,CAACO,SAAS,GAC5BP,mBAAmBE,OAAO,EAC9B6B,iBAAiBhC,OAAOsC,SAAS,EACjC,CAACrB,eAAe,CAACC,oBAAoBlB,OAAOuC,YAAY;;YAGzDtB,4BAAc,KAACZ;gBAAiBC,SAASA;0BAAUC;iBAA+BA;YAClFW,iCACC,KAACb;gBAAiBC,SAASA;gBAASkC,WAAWxC,OAAOe,KAAK;0BACxDA;iBAGHA;;;AAIR,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableProps } from '../Tappable/Tappable';\nimport { RadioInput } from './RadioInput/RadioInput';\nimport styles from './Radio.module.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Дополнительное описание под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Элемент после основного текста.\n   */\n  titleAfter?: React.ReactNode;\n  /**\n   * Позволяет передавать data-* аттрибуты элементу label.\n   **/\n  labelProps?: HasDataAttribute;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  labelProps,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  ...restProps\n}: RadioProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      style={style}\n      className={classNames(styles.host, className)}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      {...labelProps}\n    >\n      <RadioInput {...restProps} getRef={getRef} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\nRadio.Input = RadioInput;\n"],"names":["React","classNames","SelectionControl","SelectionControlLabel","RadioInput","styles","Radio","children","description","style","className","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","host","disabled","Input"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,UAAU,QAAQ,6BAA0B;AACrD,OAAOC,YAAY,qBAAqB;AAwBxC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACQ;IACX,qBACE,MAAClB;QACCO,OAAOA;QACPC,WAAWT,WAAWI,OAAOgB,IAAI,EAAEX;QACnCY,UAAUF,UAAUE,QAAQ;QAC5BX,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QACjB,GAAGL,UAAU;;0BAEd,KAACV;gBAAY,GAAGgB,SAAS;gBAAEP,QAAQA;;0BACnC,KAACV;gBAAsBS,YAAYA;gBAAYJ,aAAaA;0BACzDD;;;;AAIT,EAAE;AAEFD,MAAMiB,KAAK,GAAGnB"}
+{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasDataAttribute, HasRef, HasRootRef } from '../../types';\nimport { SelectionControl } from '../SelectionControl/SelectionControl';\nimport { SelectionControlLabel } from '../SelectionControl/SelectionControlLabel/SelectionControlLabel';\nimport type { TappableOmitProps } from '../Tappable/Tappable';\nimport { RadioInput } from './RadioInput/RadioInput';\nimport styles from './Radio.module.css';\n\nexport interface RadioProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRef<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'\n    > {\n  /**\n   * Дополнительное описание под основным текстом.\n   */\n  description?: React.ReactNode;\n  /**\n   * Элемент после основного текста.\n   */\n  titleAfter?: React.ReactNode;\n  /**\n   * Позволяет передавать data-* аттрибуты элементу label.\n   **/\n  labelProps?: HasDataAttribute;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Radio\n */\nexport const Radio = ({\n  children,\n  description,\n  style,\n  className,\n  getRootRef,\n  titleAfter,\n  getRef,\n  labelProps,\n  hoverMode,\n  activeMode,\n  hasHover,\n  hasActive,\n  focusVisibleMode,\n  ...restProps\n}: RadioProps): React.ReactNode => {\n  return (\n    <SelectionControl\n      style={style}\n      className={classNames(styles.host, className)}\n      disabled={restProps.disabled}\n      getRootRef={getRootRef}\n      hoverMode={hoverMode}\n      activeMode={activeMode}\n      hasHover={hasHover}\n      hasActive={hasActive}\n      focusVisibleMode={focusVisibleMode}\n      {...labelProps}\n    >\n      <RadioInput {...restProps} getRef={getRef} />\n      <SelectionControlLabel titleAfter={titleAfter} description={description}>\n        {children}\n      </SelectionControlLabel>\n    </SelectionControl>\n  );\n};\n\nRadio.Input = RadioInput;\n"],"names":["React","classNames","SelectionControl","SelectionControlLabel","RadioInput","styles","Radio","children","description","style","className","getRootRef","titleAfter","getRef","labelProps","hoverMode","activeMode","hasHover","hasActive","focusVisibleMode","restProps","host","disabled","Input"],"mappings":";AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,qBAAqB,QAAQ,qEAAkE;AAExG,SAASC,UAAU,QAAQ,6BAA0B;AACrD,OAAOC,YAAY,qBAAqB;AAwBxC;;CAEC,GACD,OAAO,MAAMC,QAAQ,CAAC,EACpBC,QAAQ,EACRC,WAAW,EACXC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,UAAU,EACVC,MAAM,EACNC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,QAAQ,EACRC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACQ;IACX,qBACE,MAAClB;QACCO,OAAOA;QACPC,WAAWT,WAAWI,OAAOgB,IAAI,EAAEX;QACnCY,UAAUF,UAAUE,QAAQ;QAC5BX,YAAYA;QACZI,WAAWA;QACXC,YAAYA;QACZC,UAAUA;QACVC,WAAWA;QACXC,kBAAkBA;QACjB,GAAGL,UAAU;;0BAEd,KAACV;gBAAY,GAAGgB,SAAS;gBAAEP,QAAQA;;0BACnC,KAACV;gBAAsBS,YAAYA;gBAAYJ,aAAaA;0BACzDD;;;;AAIT,EAAE;AAEFD,MAAMiB,KAAK,GAAGnB"}

package/dist/cssm/components/Removable/Removable.js

@@ -3,144 +3,68 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Icon24Cancel } from "@vkontakte/icons";
 import { classNames } from "@vkontakte/vkjs";
-import { useConfigDirection } from "../../hooks/useConfigDirection.js";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { getTextFromChildren } from "../../lib/children.js";
-import { useDOM } from "../../lib/dom.js";
 import { IconButton } from "../IconButton/IconButton.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
-import { Tappable } from "../Tappable/Tappable.js";
-import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import { RemovableIos } from "./RemovableIos.js";
 import styles from "./Removable.module.css";
-/* eslint-enable jsdoc/require-jsdoc */ /**
- * @see https://vkcom.github.io/VKUI/#/RemovableIos
- */ const RemovableIos = ({ onRemove, removePlaceholder, removePlaceholderString, children: childrenProp, toggleButtonTestId, removeButtonTestId, disabled })=>{
-    const direction = useConfigDirection();
-    const isRtl = direction === 'rtl';
-    const { window } = useDOM();
-    const removeButtonRef = React.useRef(null);
-    const disabledRef = React.useRef(true);
-    const [removeOffset, updateRemoveOffset] = React.useState(0);
-    useGlobalEventListener(window, 'click', ()=>{
-        if (removeOffset > 0) {
-            updateRemoveOffset(0);
-        }
-    }, {
-        capture: true
-    });
-    const onRemoveTransitionEnd = ()=>{
-        if (removeOffset > 0) {
-            removeButtonRef?.current?.focus();
-        } else {
-            disabledRef.current = true;
-        }
-    };
-    const onRemoveActivateClick = (e)=>{
-        e.stopPropagation();
-        if (!removeButtonRef.current) {
-            return;
-        }
-        const { offsetWidth } = removeButtonRef.current;
-        disabledRef.current = false;
-        updateRemoveOffset(offsetWidth);
-    };
-    const style = {
-        '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0)
-    };
+/* eslint-enable jsdoc/require-jsdoc */ const RemovableCommon = ({ noPadding, children, removePlaceholderString, onRemoveClick, removeButtonTestId, disabled, indent })=>{
     return /*#__PURE__*/ _jsxs("div", {
-        className: classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content'),
-        style: style,
-        onTransitionEnd: onRemoveTransitionEnd,
+        className: classNames(styles.content, !noPadding && styles.withPadding, 'vkuiInternalRemovable__content'),
         children: [
-            /*#__PURE__*/ _jsxs(IconButton, {
-                hasActive: false,
-                hasHover: false,
-                className: classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action'),
-                onClick: onRemoveActivateClick,
-                disabled: removeOffset > 0 || disabled,
-                "data-testid": toggleButtonTestId,
-                children: [
-                    /*#__PURE__*/ _jsx(VisuallyHidden, {
-                        children: removePlaceholderString
-                    }),
-                    /*#__PURE__*/ _jsx("i", {
-                        className: styles.toggleIn,
-                        role: "presentation"
-                    })
-                ]
+            typeof children === 'function' ? children({
+                isRemoving: false
+            }) : children,
+            indent ? /*#__PURE__*/ _jsx("div", {
+                className: classNames(styles.action, styles.indentation)
+            }) : /*#__PURE__*/ _jsx(IconButton, {
+                activeMode: "opacity",
+                hoverMode: "opacity",
+                className: classNames(styles.action, 'vkuiInternalRemovable__action'),
+                onClick: onRemoveClick,
+                label: removePlaceholderString,
+                "data-testid": removeButtonTestId,
+                disabled: disabled,
+                children: /*#__PURE__*/ _jsx(Icon24Cancel, {
+                    role: "presentation"
+                })
             }),
-            typeof childrenProp === 'function' ? childrenProp({
-                isRemoving: removeOffset > 0
-            }) : childrenProp,
             /*#__PURE__*/ _jsx("span", {
                 className: styles.offset,
                 "aria-hidden": true
-            }),
-            /*#__PURE__*/ _jsx(Tappable, {
-                Component: "button",
-                hasActive: false,
-                hasHover: false,
-                disabled: disabledRef.current,
-                getRootRef: removeButtonRef,
-                className: styles.remove,
-                onClick: onRemove,
-                "data-testid": removeButtonTestId,
-                children: /*#__PURE__*/ _jsx("span", {
-                    className: styles.removeIn,
-                    children: removePlaceholder
-                })
             })
         ]
     });
 };
-/**
- * @see https://vkcom.github.io/VKUI/#/Removable
- */ export const Removable = ({ children, onRemove, removePlaceholder = 'Удалить', align = 'center', indent = false, toggleButtonTestId, removeButtonTestId, disabled, noPadding, ...restProps })=>{
+export const Removable = ({ children, onRemove, removePlaceholder = 'Удалить', align = 'center', indent = false, toggleButtonTestId, removeButtonTestId, disabled, noPadding, ...restProps })=>{
     const platform = usePlatform();
     const onRemoveClick = (e)=>{
         e.preventDefault();
         onRemove?.(e);
     };
     const removePlaceholderString = getTextFromChildren(removePlaceholder);
-    return /*#__PURE__*/ _jsxs(RootComponent, {
+    return /*#__PURE__*/ _jsx(RootComponent, {
         ...restProps,
         baseClassName: classNames(platform === 'ios' && styles.ios, align === 'start' && styles.alignStart, indent && styles.indent),
-        children: [
-            platform !== 'ios' && /*#__PURE__*/ _jsxs("div", {
-                className: classNames(styles.content, !noPadding && styles.withPadding, 'vkuiInternalRemovable__content'),
-                children: [
-                    typeof children === 'function' ? children({
-                        isRemoving: false
-                    }) : children,
-                    /*#__PURE__*/ _jsx(IconButton, {
-                        activeMode: "opacity",
-                        hoverMode: "opacity",
-                        className: classNames(styles.action, 'vkuiInternalRemovable__action'),
-                        onClick: onRemoveClick,
-                        label: removePlaceholderString,
-                        "data-testid": removeButtonTestId,
-                        disabled: disabled,
-                        children: /*#__PURE__*/ _jsx(Icon24Cancel, {
-                            role: "presentation"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx("span", {
-                        className: styles.offset,
-                        "aria-hidden": true
-                    })
-                ]
-            }),
-            platform === 'ios' && /*#__PURE__*/ _jsx(RemovableIos, {
-                onRemove: onRemoveClick,
-                removePlaceholder: removePlaceholder,
-                removePlaceholderString: removePlaceholderString,
-                toggleButtonTestId: toggleButtonTestId,
-                removeButtonTestId: removeButtonTestId,
-                disabled: disabled,
-                children: children
-            })
-        ]
+        children: platform === 'ios' ? /*#__PURE__*/ _jsx(RemovableIos, {
+            onRemove: onRemoveClick,
+            removePlaceholder: removePlaceholder,
+            removePlaceholderString: removePlaceholderString,
+            toggleButtonTestId: toggleButtonTestId,
+            removeButtonTestId: removeButtonTestId,
+            disabled: disabled,
+            indent: indent,
+            children: children
+        }) : /*#__PURE__*/ _jsx(RemovableCommon, {
+            onRemoveClick: onRemoveClick,
+            noPadding: noPadding,
+            removeButtonTestId: removeButtonTestId,
+            removePlaceholderString: removePlaceholderString,
+            disabled: disabled,
+            indent: indent,
+            children: children
+        })
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport { useDOM } from '../../lib/dom';\nimport type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Обработчик, срабатывающий при нажатии на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n  /**\n   * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only).\n   */\n  toggleButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки удаления.\n   */\n  removeButtonTestId?: string;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n}\n/* eslint-disable jsdoc/require-jsdoc */\ninterface RemovableIosOwnProps extends RemovableProps {\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RemovableIos\n */\nconst RemovableIos = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n}: RemovableIosOwnProps) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  const style: CSSCustomProperties = {\n    '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0),\n  };\n\n  return (\n    <div\n      className={classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content')}\n      style={style}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        className={classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action')}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0 || disabled}\n        data-testid={toggleButtonTestId}\n      >\n        <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n        <i className={styles.toggleIn} role=\"presentation\" />\n      </IconButton>\n      {typeof childrenProp === 'function'\n        ? childrenProp({ isRemoving: removeOffset > 0 })\n        : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles.remove}\n        onClick={onRemove}\n        data-testid={removeButtonTestId}\n      >\n        <span className={styles.removeIn}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableIosRenderProps {\n  /**\n   * Показывает состояние Removable на платформе iOS при нажатии на иконку удаления.\n   * Для имитации поведения на iOS при нажатии на иконку удаления самого удаление не происходит,\n   * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n   * Когда контент сдвинут `isRemoving = true`.\n   */\n  isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n    RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n  /**\n   * Убирает базовые отступы для базовой платформы.\n   */\n  noPadding?: boolean;\n  /**\n   * Содержимое. Можно передать функцию для отрисовки.\n   */\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Removable\n */\nexport const Removable = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n  noPadding,\n  ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove?.(e);\n  };\n\n  const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === 'ios' && styles.ios,\n        align === 'start' && styles.alignStart,\n        indent && styles.indent,\n      )}\n    >\n      {platform !== 'ios' && (\n        <div\n          className={classNames(\n            styles.content,\n            !noPadding && styles.withPadding,\n            'vkuiInternalRemovable__content',\n          )}\n        >\n          {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            className={classNames(styles.action, 'vkuiInternalRemovable__action')}\n            onClick={onRemoveClick}\n            label={removePlaceholderString}\n            data-testid={removeButtonTestId}\n            disabled={disabled}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n\n          <span className={styles.offset} aria-hidden />\n        </div>\n      )}\n\n      {platform === 'ios' && (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n          disabled={disabled}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","useConfigDirection","useGlobalEventListener","usePlatform","getTextFromChildren","useDOM","IconButton","RootComponent","Tappable","VisuallyHidden","styles","RemovableIos","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","direction","isRtl","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","style","String","div","className","content","rtl","onTransitionEnd","hasActive","hasHover","action","toggle","onClick","data-testid","i","toggleIn","role","isRemoving","span","offset","aria-hidden","Component","getRootRef","remove","removeIn","Removable","align","indent","noPadding","restProps","platform","onRemoveClick","preventDefault","baseClassName","ios","alignStart","withPadding","activeMode","hoverMode","label"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTextFromChildren } from '../../lib/children';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { RemovableIos } from './RemovableIos';\nimport styles from './Removable.module.css';\n\nexport interface RemovableProps {\n  /**\n   * Текст кнопки удаления ячейки. Визуально скрыт везде, кроме iOS. На iOS появляется в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Обработчик, срабатывающий при нажатии на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement | null) => void;\n  /**\n   * Передает атрибут `data-testid` для кнопки, которая активирует кнопку удаления (iOS only).\n   */\n  toggleButtonTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для кнопки удаления.\n   */\n  removeButtonTestId?: string;\n  /**\n   * Блокировка взаимодействия с компонентом.\n   */\n  disabled?: boolean;\n}\n/* eslint-disable jsdoc/require-jsdoc */\ninterface RemovableCommonOwnProps\n  extends Pick<\n    RemovableOwnProps,\n    'noPadding' | 'children' | 'removeButtonTestId' | 'disabled' | 'indent'\n  > {\n  removePlaceholderString?: string;\n  onRemoveClick: (e: React.MouseEvent) => void;\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst RemovableCommon = ({\n  noPadding,\n  children,\n  removePlaceholderString,\n  onRemoveClick,\n  removeButtonTestId,\n  disabled,\n  indent,\n}: RemovableCommonOwnProps) => {\n  return (\n    <div\n      className={classNames(\n        styles.content,\n        !noPadding && styles.withPadding,\n        'vkuiInternalRemovable__content',\n      )}\n    >\n      {typeof children === 'function' ? children({ isRemoving: false }) : children}\n\n      {indent ? (\n        <div className={classNames(styles.action, styles.indentation)} />\n      ) : (\n        <IconButton\n          activeMode=\"opacity\"\n          hoverMode=\"opacity\"\n          className={classNames(styles.action, 'vkuiInternalRemovable__action')}\n          onClick={onRemoveClick}\n          label={removePlaceholderString}\n          data-testid={removeButtonTestId}\n          disabled={disabled}\n        >\n          <Icon24Cancel role=\"presentation\" />\n        </IconButton>\n      )}\n      <span className={styles.offset} aria-hidden />\n    </div>\n  );\n};\n\nexport interface RemovableIosRenderProps {\n  /**\n   * Показывает состояние Removable на платформе iOS при нажатии на иконку удаления.\n   * Для имитации поведения на iOS при нажатии на иконку удаления самого удаление не происходит,\n   * контент сдвигается влево и справа выезжает настоящая кнопка \"Удалить\".\n   * Когда контент сдвинут `isRemoving = true`.\n   */\n  isRemoving: boolean;\n}\n\ninterface RemovableOwnProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children'>,\n    RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n  /**\n   * Скрывает кнопку, но оставляет отступ.\n   * @since 5.4.0\n   */\n  indent?: boolean;\n  /**\n   * Убирает базовые отступы для базовой платформы.\n   */\n  noPadding?: boolean;\n  /**\n   * Содержимое. Можно передать функцию для отрисовки.\n   */\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n\nexport const Removable = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  indent = false,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n  noPadding,\n  ...restProps\n}: RemovableOwnProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove?.(e);\n  };\n\n  const removePlaceholderString: string = getTextFromChildren(removePlaceholder);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        platform === 'ios' && styles.ios,\n        align === 'start' && styles.alignStart,\n        indent && styles.indent,\n      )}\n    >\n      {platform === 'ios' ? (\n        <RemovableIos\n          onRemove={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n          toggleButtonTestId={toggleButtonTestId}\n          removeButtonTestId={removeButtonTestId}\n          disabled={disabled}\n          indent={indent}\n        >\n          {children}\n        </RemovableIos>\n      ) : (\n        <RemovableCommon\n          onRemoveClick={onRemoveClick}\n          noPadding={noPadding}\n          removeButtonTestId={removeButtonTestId}\n          removePlaceholderString={removePlaceholderString}\n          disabled={disabled}\n          indent={indent}\n        >\n          {children}\n        </RemovableCommon>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["React","Icon24Cancel","classNames","usePlatform","getTextFromChildren","IconButton","RootComponent","RemovableIos","styles","RemovableCommon","noPadding","children","removePlaceholderString","onRemoveClick","removeButtonTestId","disabled","indent","div","className","content","withPadding","isRemoving","action","indentation","activeMode","hoverMode","onClick","label","data-testid","role","span","offset","aria-hidden","Removable","onRemove","removePlaceholder","align","toggleButtonTestId","restProps","platform","e","preventDefault","baseClassName","ios","alignStart"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,mBAAmB,QAAQ,wBAAqB;AAEzD,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,YAAY,QAAQ,oBAAiB;AAC9C,OAAOC,YAAY,yBAAyB;AAiC5C,qCAAqC,GAErC,MAAMC,kBAAkB,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,uBAAuB,EACvBC,aAAa,EACbC,kBAAkB,EAClBC,QAAQ,EACRC,MAAM,EACkB;IACxB,qBACE,MAACC;QACCC,WAAWhB,WACTM,OAAOW,OAAO,EACd,CAACT,aAAaF,OAAOY,WAAW,EAChC;;YAGD,OAAOT,aAAa,aAAaA,SAAS;gBAAEU,YAAY;YAAM,KAAKV;YAEnEK,uBACC,KAACC;gBAAIC,WAAWhB,WAAWM,OAAOc,MAAM,EAAEd,OAAOe,WAAW;+BAE5D,KAAClB;gBACCmB,YAAW;gBACXC,WAAU;gBACVP,WAAWhB,WAAWM,OAAOc,MAAM,EAAE;gBACrCI,SAASb;gBACTc,OAAOf;gBACPgB,eAAad;gBACbC,UAAUA;0BAEV,cAAA,KAACd;oBAAa4B,MAAK;;;0BAGvB,KAACC;gBAAKZ,WAAWV,OAAOuB,MAAM;gBAAEC,aAAW;;;;AAGjD;AAkCA,OAAO,MAAMC,YAAY,CAAC,EACxBtB,QAAQ,EACRuB,QAAQ,EACRC,oBAAoB,SAAS,EAC7BC,QAAQ,QAAQ,EAChBpB,SAAS,KAAK,EACdqB,kBAAkB,EAClBvB,kBAAkB,EAClBC,QAAQ,EACRL,SAAS,EACT,GAAG4B,WACe;IAClB,MAAMC,WAAWpC;IAEjB,MAAMU,gBAAgB,CAAC2B;QACrBA,EAAEC,cAAc;QAChBP,WAAWM;IACb;IAEA,MAAM5B,0BAAkCR,oBAAoB+B;IAE5D,qBACE,KAAC7B;QACE,GAAGgC,SAAS;QACbI,eAAexC,WACbqC,aAAa,SAAS/B,OAAOmC,GAAG,EAChCP,UAAU,WAAW5B,OAAOoC,UAAU,EACtC5B,UAAUR,OAAOQ,MAAM;kBAGxBuB,aAAa,sBACZ,KAAChC;YACC2B,UAAUrB;YACVsB,mBAAmBA;YACnBvB,yBAAyBA;YACzByB,oBAAoBA;YACpBvB,oBAAoBA;YACpBC,UAAUA;YACVC,QAAQA;sBAEPL;2BAGH,KAACF;YACCI,eAAeA;YACfH,WAAWA;YACXI,oBAAoBA;YACpBF,yBAAyBA;YACzBG,UAAUA;YACVC,QAAQA;sBAEPL;;;AAKX,EAAE"}

package/dist/cssm/components/Removable/Removable.module.css

@@ -30,6 +30,15 @@
   border: 0;
 }
 
+.ios .action.indentation,
+.action.indentation {
+  inline-size: 44px;
+}
+
+.ios .action.indentation {
+  margin-inline: 2px;
+}
+
 .alignStart .action {
   align-self: flex-start;
 }

package/dist/cssm/components/Removable/RemovableIos.js

@@ -0,0 +1,118 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useConfigDirection } from "../../hooks/useConfigDirection.js";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener.js";
+import { useDOM } from "../../lib/dom.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Tappable } from "../Tappable/Tappable.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import styles from "./Removable.module.css";
+/* eslint-enable jsdoc/require-jsdoc */ const RemovableIosWithRemove = ({ onRemove, removePlaceholder, removePlaceholderString, children: childrenProp, toggleButtonTestId, removeButtonTestId, disabled })=>{
+    const direction = useConfigDirection();
+    const isRtl = direction === 'rtl';
+    const { window } = useDOM();
+    const removeButtonRef = React.useRef(null);
+    const disabledRef = React.useRef(true);
+    const [removeOffset, updateRemoveOffset] = React.useState(0);
+    useGlobalEventListener(window, 'click', ()=>{
+        if (removeOffset > 0) {
+            updateRemoveOffset(0);
+        }
+    }, {
+        capture: true
+    });
+    const onRemoveTransitionEnd = ()=>{
+        if (removeOffset > 0) {
+            removeButtonRef?.current?.focus();
+        } else {
+            disabledRef.current = true;
+        }
+    };
+    const onRemoveActivateClick = (e)=>{
+        e.stopPropagation();
+        if (!removeButtonRef.current) {
+            return;
+        }
+        const { offsetWidth } = removeButtonRef.current;
+        disabledRef.current = false;
+        updateRemoveOffset(offsetWidth);
+    };
+    const style = {
+        '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0)
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content'),
+        style: style,
+        onTransitionEnd: onRemoveTransitionEnd,
+        children: [
+            /*#__PURE__*/ _jsxs(IconButton, {
+                hasActive: false,
+                hasHover: false,
+                className: classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action'),
+                onClick: onRemoveActivateClick,
+                disabled: removeOffset > 0 || disabled,
+                "data-testid": toggleButtonTestId,
+                children: [
+                    /*#__PURE__*/ _jsx(VisuallyHidden, {
+                        children: removePlaceholderString
+                    }),
+                    /*#__PURE__*/ _jsx("i", {
+                        className: styles.toggleIn,
+                        role: "presentation"
+                    })
+                ]
+            }),
+            typeof childrenProp === 'function' ? childrenProp({
+                isRemoving: removeOffset > 0
+            }) : childrenProp,
+            /*#__PURE__*/ _jsx("span", {
+                className: styles.offset,
+                "aria-hidden": true
+            }),
+            /*#__PURE__*/ _jsx(Tappable, {
+                Component: "button",
+                hasActive: false,
+                hasHover: false,
+                disabled: disabledRef.current,
+                getRootRef: removeButtonRef,
+                className: styles.remove,
+                onClick: onRemove,
+                "data-testid": removeButtonTestId,
+                children: /*#__PURE__*/ _jsx("span", {
+                    className: styles.removeIn,
+                    children: removePlaceholder
+                })
+            })
+        ]
+    });
+};
+const RemovableIosWithIndent = ({ children: childrenProp })=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classNames(styles.content, 'vkuiInternalRemovable__content'),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: classNames(styles.action, styles.indentation, 'vkuiInternalRemovable__action')
+            }),
+            typeof childrenProp === 'function' ? childrenProp({
+                isRemoving: false
+            }) : childrenProp,
+            /*#__PURE__*/ _jsx("span", {
+                className: styles.offset,
+                "aria-hidden": true
+            })
+        ]
+    });
+};
+const RemovableIos = ({ indent, children, ...restProps })=>{
+    return indent ? /*#__PURE__*/ _jsx(RemovableIosWithIndent, {
+        children: children
+    }) : /*#__PURE__*/ _jsx(RemovableIosWithRemove, {
+        ...restProps,
+        children: children
+    });
+};
+export { RemovableIos };
+
+//# sourceMappingURL=RemovableIos.js.map

package/dist/cssm/components/Removable/RemovableIos.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Removable/RemovableIos.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { type CSSCustomProperties } from '../../types';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tappable } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport { type RemovableIosRenderProps, type RemovableProps } from './Removable';\nimport styles from './Removable.module.css';\n\n/* eslint-disable jsdoc/require-jsdoc */\ninterface RemovableIosOwnProps extends RemovableProps {\n  indent?: boolean;\n  removePlaceholderString?: string;\n  children?: React.ReactNode | ((renderProps: RemovableIosRenderProps) => React.ReactNode);\n}\n/* eslint-enable jsdoc/require-jsdoc */\n\nconst RemovableIosWithRemove = ({\n  onRemove,\n  removePlaceholder,\n  removePlaceholderString,\n  children: childrenProp,\n  toggleButtonTestId,\n  removeButtonTestId,\n  disabled,\n}: Omit<RemovableIosOwnProps, 'indent'>) => {\n  const direction = useConfigDirection();\n  const isRtl = direction === 'rtl';\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef<HTMLElement>(null);\n  const disabledRef = React.useRef(true);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(\n    window,\n    'click',\n    () => {\n      if (removeOffset > 0) {\n        updateRemoveOffset(0);\n      }\n    },\n    { capture: true },\n  );\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    } else {\n      disabledRef.current = true;\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    if (!removeButtonRef.current) {\n      return;\n    }\n    const { offsetWidth } = removeButtonRef.current;\n    disabledRef.current = false;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  const style: CSSCustomProperties = {\n    '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0),\n  };\n\n  return (\n    <div\n      className={classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content')}\n      style={style}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        className={classNames(styles.action, styles.toggle, 'vkuiInternalRemovable__action')}\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0 || disabled}\n        data-testid={toggleButtonTestId}\n      >\n        <VisuallyHidden>{removePlaceholderString}</VisuallyHidden>\n        <i className={styles.toggleIn} role=\"presentation\" />\n      </IconButton>\n      {typeof childrenProp === 'function'\n        ? childrenProp({ isRemoving: removeOffset > 0 })\n        : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={disabledRef.current}\n        getRootRef={removeButtonRef}\n        className={styles.remove}\n        onClick={onRemove}\n        data-testid={removeButtonTestId}\n      >\n        <span className={styles.removeIn}>{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\nconst RemovableIosWithIndent = ({\n  children: childrenProp,\n}: Pick<RemovableIosOwnProps, 'children'>) => {\n  return (\n    <div className={classNames(styles.content, 'vkuiInternalRemovable__content')}>\n      <div\n        className={classNames(styles.action, styles.indentation, 'vkuiInternalRemovable__action')}\n      />\n      {typeof childrenProp === 'function' ? childrenProp({ isRemoving: false }) : childrenProp}\n\n      <span className={styles.offset} aria-hidden />\n    </div>\n  );\n};\n\nconst RemovableIos = ({ indent, children, ...restProps }: RemovableIosOwnProps) => {\n  return indent ? (\n    <RemovableIosWithIndent>{children}</RemovableIosWithIndent>\n  ) : (\n    <RemovableIosWithRemove {...restProps}>{children}</RemovableIosWithRemove>\n  );\n};\n\nexport { RemovableIos };\n"],"names":["React","classNames","useConfigDirection","useGlobalEventListener","useDOM","IconButton","Tappable","VisuallyHidden","styles","RemovableIosWithRemove","onRemove","removePlaceholder","removePlaceholderString","children","childrenProp","toggleButtonTestId","removeButtonTestId","disabled","direction","isRtl","window","removeButtonRef","useRef","disabledRef","removeOffset","updateRemoveOffset","useState","capture","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","style","String","div","className","content","rtl","onTransitionEnd","hasActive","hasHover","action","toggle","onClick","data-testid","i","toggleIn","role","isRemoving","span","offset","aria-hidden","Component","getRootRef","remove","removeIn","RemovableIosWithIndent","indentation","RemovableIos","indent","restProps"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst alignAfterClassNames = {\n  start: styles.alignAfterStart,\n  center: styles.alignAfterCenter,\n  end: styles.alignAfterEnd,\n};\n\nconst alignBeforeClassNames = {\n  start: styles.alignBeforeStart,\n  center: styles.alignBeforeCenter,\n  end: styles.alignBeforeEnd,\n};\n\nconst alignContentClassNames = {\n  start: styles.contentAlignStart,\n  center: styles.contentAlignCenter,\n  end: styles.contentAlignEnd,\n};\n\ntype Align = 'start' | 'center' | 'end';\n\nexport interface RichCellProps extends TappableProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`.\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Выравнивание before компонента по вертикали.\n   */\n  beforeAlign?: Align;\n  /**\n   * Выравнивание центрального контента по вертикали.\n   */\n  contentAlign?: Align;\n  /**\n   * Выравнивание after компонента по вертикали.\n   */\n  afterAlign?: Align;\n  /**\n   * Блокировка взаимодействия с компонентом. Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  overTitle,\n  children,\n  subtitle,\n  extraSubtitle,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  beforeAlign = 'start',\n  contentAlign = 'start',\n  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const withAfter = after || afterCaption;\n\n  const afterRender = () => {\n    if (!withAfter) {\n      return;\n    }\n    return (\n      <div className={styles.contentAfter}>\n        {after && <div className={styles.afterChildren}>{after}</div>}\n        {afterCaption && <div className={styles.afterCaption}>{afterCaption}</div>}\n      </div>\n    );\n  };\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        !multiline && styles.textEllipsis,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withAfter && styles.withAfter,\n        withAfter && alignAfterClassNames[afterAlign],\n        before && alignBeforeClassNames[beforeAlign],\n        alignContentClassNames[contentAlign],\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <div className={styles.in}>\n        <div className={styles.content}>\n          <div className={styles.contentBefore}>\n            {overTitle && (\n              <Subhead Component=\"div\" className={styles.overTitle}>\n                {overTitle}\n              </Subhead>\n            )}\n            <div className={styles.children}>{children}</div>\n            {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n            {extraSubtitle && (\n              <Subhead Component=\"div\" className={styles.extraSubtitle}>\n                {extraSubtitle}\n              </Subhead>\n            )}\n          </div>\n          {afterAlign === 'start' && afterRender()}\n        </div>\n        {bottom && <div className={styles.bottom}>{bottom}</div>}\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {afterAlign !== 'start' && afterRender()}\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","alignAfterClassNames","start","alignAfterStart","center","alignAfterCenter","end","alignAfterEnd","alignBeforeClassNames","alignBeforeStart","alignBeforeCenter","alignBeforeEnd","alignContentClassNames","contentAlignStart","contentAlignCenter","contentAlignEnd","RichCell","overTitle","children","subtitle","extraSubtitle","before","after","afterCaption","bottom","actions","multiline","beforeAlign","contentAlign","afterAlign","restProps","sizeY","withAfter","afterRender","div","className","contentAfter","afterChildren","baseClassName","host","textEllipsis","in","content","contentBefore","Component","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,uBAAuB;IAC3BC,OAAOP,OAAOQ,eAAe;IAC7BC,QAAQT,OAAOU,gBAAgB;IAC/BC,KAAKX,OAAOY,aAAa;AAC3B;AAEA,MAAMC,wBAAwB;IAC5BN,OAAOP,OAAOc,gBAAgB;IAC9BL,QAAQT,OAAOe,iBAAiB;IAChCJ,KAAKX,OAAOgB,cAAc;AAC5B;AAEA,MAAMC,yBAAyB;IAC7BV,OAAOP,OAAOkB,iBAAiB;IAC/BT,QAAQT,OAAOmB,kBAAkB;IACjCR,KAAKX,OAAOoB,eAAe;AAC7B;AAkEA;;CAEC,GACD,OAAO,MAAMC,WAET,CAAC,EACHC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,cAAc,OAAO,EACrBC,eAAe,OAAO,EACtBC,aAAa,OAAO,EACpB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGxC;IAC3B,MAAMyC,YAAYV,SAASC;IAE3B,MAAMU,cAAc;QAClB,IAAI,CAACD,WAAW;YACd;QACF;QACA,qBACE,MAACE;YAAIC,WAAWxC,OAAOyC,YAAY;;gBAChCd,uBAAS,KAACY;oBAAIC,WAAWxC,OAAO0C,aAAa;8BAAGf;;gBAChDC,8BAAgB,KAACW;oBAAIC,WAAWxC,OAAO4B,YAAY;8BAAGA;;;;IAG7D;IAEA,qBACE,MAAC/B;QACE,GAAGsC,SAAS;QACbQ,eAAehD,WACbK,OAAO4C,IAAI,EACX,CAACb,aAAa/B,OAAO6C,YAAY,EACjCT,UAAU,aAAanC,eAAe,CAACmC,MAAM,EAC7CC,aAAarC,OAAOqC,SAAS,EAC7BA,aAAa/B,oBAAoB,CAAC4B,WAAW,EAC7CR,UAAUb,qBAAqB,CAACmB,YAAY,EAC5Cf,sBAAsB,CAACgB,aAAa;;YAGrCP,wBAAU,KAACa;gBAAIC,WAAWxC,OAAO0B,MAAM;0BAAGA;;0BAC3C,MAACa;gBAAIC,WAAWxC,OAAO8C,EAAE;;kCACvB,MAACP;wBAAIC,WAAWxC,OAAO+C,OAAO;;0CAC5B,MAACR;gCAAIC,WAAWxC,OAAOgD,aAAa;;oCACjC1B,2BACC,KAACxB;wCAAQmD,WAAU;wCAAMT,WAAWxC,OAAOsB,SAAS;kDACjDA;;kDAGL,KAACiB;wCAAIC,WAAWxC,OAAOuB,QAAQ;kDAAGA;;oCACjCC,0BAAY,KAACe;wCAAIC,WAAWxC,OAAOwB,QAAQ;kDAAGA;;oCAC9CC,+BACC,KAAC3B;wCAAQmD,WAAU;wCAAMT,WAAWxC,OAAOyB,aAAa;kDACrDA;;;;4BAINS,eAAe,WAAWI;;;oBAE5BT,wBAAU,KAACU;wBAAIC,WAAWxC,OAAO6B,MAAM;kCAAGA;;oBAC1CC,yBAAW,KAACS;wBAAIC,WAAWxC,OAAO8B,OAAO;kCAAGA;;;;YAE9CI,eAAe,WAAWI;;;AAGjC,EAAE;AAEFjB,SAAS6B,IAAI,GAAGnD"}
+{"version":3,"sources":["../../../../src/components/RichCell/RichCell.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { RichCellIcon } from './RichCellIcon/RichCellIcon';\nimport styles from './RichCell.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst alignAfterClassNames = {\n  start: styles.alignAfterStart,\n  center: styles.alignAfterCenter,\n  end: styles.alignAfterEnd,\n};\n\nconst alignBeforeClassNames = {\n  start: styles.alignBeforeStart,\n  center: styles.alignBeforeCenter,\n  end: styles.alignBeforeEnd,\n};\n\nconst alignContentClassNames = {\n  start: styles.contentAlignStart,\n  center: styles.contentAlignCenter,\n  end: styles.contentAlignEnd,\n};\n\ntype Align = 'start' | 'center' | 'end';\n\nexport interface RichCellProps extends TappableOmitProps {\n  /**\n   * Контейнер для текста над `children`.\n   */\n  overTitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `children`.\n   */\n  subtitle?: React.ReactNode;\n  /**\n   * Контейнер для текста под `subtitle`.\n   */\n  extraSubtitle?: React.ReactNode;\n  /**\n   * Контейнер для контента под `caption`. Например `<UsersStack size=\"m\" />`.\n   */\n  bottom?: React.ReactNode;\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `mode=\"primary\" size=\"s\"`\n   * - `mode=\"secondary\" size=\"s\"`.\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `mode=\"horizontal\" gap=\"s\" stretched`.\n   */\n  actions?: React.ReactNode;\n  /**\n   * `<Avatar size={40|48|72} />`.\n   */\n  before?: React.ReactNode;\n  /**\n   * Иконка 28 или текст.\n   */\n  after?: React.ReactNode;\n  /**\n   * Текст под `after`.\n   */\n  afterCaption?: React.ReactNode;\n  /**\n   * Выравнивание before компонента по вертикали.\n   */\n  beforeAlign?: Align;\n  /**\n   * Выравнивание центрального контента по вертикали.\n   */\n  contentAlign?: Align;\n  /**\n   * Выравнивание after компонента по вертикали.\n   */\n  afterAlign?: Align;\n  /**\n   * Блокировка взаимодействия с компонентом. Убирает анимацию нажатия.\n   */\n  disabled?: boolean;\n  /**\n   * Включает многострочный режим для `subhead`, `children`, `text` и `caption`.\n   */\n  multiline?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/RichCell\n */\nexport const RichCell: React.FC<RichCellProps> & {\n  Icon: typeof RichCellIcon;\n} = ({\n  overTitle,\n  children,\n  subtitle,\n  extraSubtitle,\n  before,\n  after,\n  afterCaption,\n  bottom,\n  actions,\n  multiline,\n  beforeAlign = 'start',\n  contentAlign = 'start',\n  afterAlign = 'start',\n  ...restProps\n}: RichCellProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const withAfter = after || afterCaption;\n\n  const afterRender = () => {\n    if (!withAfter) {\n      return;\n    }\n    return (\n      <div className={styles.contentAfter}>\n        {after && <div className={styles.afterChildren}>{after}</div>}\n        {afterCaption && <div className={styles.afterCaption}>{afterCaption}</div>}\n      </div>\n    );\n  };\n\n  return (\n    <Tappable\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        !multiline && styles.textEllipsis,\n        sizeY !== 'regular' && sizeYClassNames[sizeY],\n        withAfter && styles.withAfter,\n        withAfter && alignAfterClassNames[afterAlign],\n        before && alignBeforeClassNames[beforeAlign],\n        alignContentClassNames[contentAlign],\n      )}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <div className={styles.in}>\n        <div className={styles.content}>\n          <div className={styles.contentBefore}>\n            {overTitle && (\n              <Subhead Component=\"div\" className={styles.overTitle}>\n                {overTitle}\n              </Subhead>\n            )}\n            <div className={styles.children}>{children}</div>\n            {subtitle && <div className={styles.subtitle}>{subtitle}</div>}\n            {extraSubtitle && (\n              <Subhead Component=\"div\" className={styles.extraSubtitle}>\n                {extraSubtitle}\n              </Subhead>\n            )}\n          </div>\n          {afterAlign === 'start' && afterRender()}\n        </div>\n        {bottom && <div className={styles.bottom}>{bottom}</div>}\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {afterAlign !== 'start' && afterRender()}\n    </Tappable>\n  );\n};\n\nRichCell.Icon = RichCellIcon;\n"],"names":["React","classNames","useAdaptivity","Tappable","Subhead","RichCellIcon","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","alignAfterClassNames","start","alignAfterStart","center","alignAfterCenter","end","alignAfterEnd","alignBeforeClassNames","alignBeforeStart","alignBeforeCenter","alignBeforeEnd","alignContentClassNames","contentAlignStart","contentAlignCenter","contentAlignEnd","RichCell","overTitle","children","subtitle","extraSubtitle","before","after","afterCaption","bottom","actions","multiline","beforeAlign","contentAlign","afterAlign","restProps","sizeY","withAfter","afterRender","div","className","contentAfter","afterChildren","baseClassName","host","textEllipsis","in","content","contentBefore","Component","Icon"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,YAAY,QAAQ,iCAA8B;AAC3D,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,uBAAuB;IAC3BC,OAAOP,OAAOQ,eAAe;IAC7BC,QAAQT,OAAOU,gBAAgB;IAC/BC,KAAKX,OAAOY,aAAa;AAC3B;AAEA,MAAMC,wBAAwB;IAC5BN,OAAOP,OAAOc,gBAAgB;IAC9BL,QAAQT,OAAOe,iBAAiB;IAChCJ,KAAKX,OAAOgB,cAAc;AAC5B;AAEA,MAAMC,yBAAyB;IAC7BV,OAAOP,OAAOkB,iBAAiB;IAC/BT,QAAQT,OAAOmB,kBAAkB;IACjCR,KAAKX,OAAOoB,eAAe;AAC7B;AAkEA;;CAEC,GACD,OAAO,MAAMC,WAET,CAAC,EACHC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACRC,aAAa,EACbC,MAAM,EACNC,KAAK,EACLC,YAAY,EACZC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,cAAc,OAAO,EACrBC,eAAe,OAAO,EACtBC,aAAa,OAAO,EACpB,GAAGC,WACW;IACd,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGxC;IAC3B,MAAMyC,YAAYV,SAASC;IAE3B,MAAMU,cAAc;QAClB,IAAI,CAACD,WAAW;YACd;QACF;QACA,qBACE,MAACE;YAAIC,WAAWxC,OAAOyC,YAAY;;gBAChCd,uBAAS,KAACY;oBAAIC,WAAWxC,OAAO0C,aAAa;8BAAGf;;gBAChDC,8BAAgB,KAACW;oBAAIC,WAAWxC,OAAO4B,YAAY;8BAAGA;;;;IAG7D;IAEA,qBACE,MAAC/B;QACE,GAAGsC,SAAS;QACbQ,eAAehD,WACbK,OAAO4C,IAAI,EACX,CAACb,aAAa/B,OAAO6C,YAAY,EACjCT,UAAU,aAAanC,eAAe,CAACmC,MAAM,EAC7CC,aAAarC,OAAOqC,SAAS,EAC7BA,aAAa/B,oBAAoB,CAAC4B,WAAW,EAC7CR,UAAUb,qBAAqB,CAACmB,YAAY,EAC5Cf,sBAAsB,CAACgB,aAAa;;YAGrCP,wBAAU,KAACa;gBAAIC,WAAWxC,OAAO0B,MAAM;0BAAGA;;0BAC3C,MAACa;gBAAIC,WAAWxC,OAAO8C,EAAE;;kCACvB,MAACP;wBAAIC,WAAWxC,OAAO+C,OAAO;;0CAC5B,MAACR;gCAAIC,WAAWxC,OAAOgD,aAAa;;oCACjC1B,2BACC,KAACxB;wCAAQmD,WAAU;wCAAMT,WAAWxC,OAAOsB,SAAS;kDACjDA;;kDAGL,KAACiB;wCAAIC,WAAWxC,OAAOuB,QAAQ;kDAAGA;;oCACjCC,0BAAY,KAACe;wCAAIC,WAAWxC,OAAOwB,QAAQ;kDAAGA;;oCAC9CC,+BACC,KAAC3B;wCAAQmD,WAAU;wCAAMT,WAAWxC,OAAOyB,aAAa;kDACrDA;;;;4BAINS,eAAe,WAAWI;;;oBAE5BT,wBAAU,KAACU;wBAAIC,WAAWxC,OAAO6B,MAAM;kCAAGA;;oBAC1CC,yBAAW,KAACS;wBAAIC,WAAWxC,OAAO8B,OAAO;kCAAGA;;;;YAE9CI,eAAe,WAAWI;;;AAGjC,EAAE;AAEFjB,SAAS6B,IAAI,GAAGnD"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinner.js

@@ -10,7 +10,7 @@ import { ScreenSpinnerLoader } from "./ScreenSpinnerLoader.js";
 import { ScreenSpinnerSwapIcon } from "./ScreenSpinnerSwapIcon.js";
 /**
  * @see https://vkcom.github.io/VKUI/#/ScreenSpinner
- */ export const ScreenSpinner = ({ style, className, state = 'loading', onClick, cancelLabel, mode, label, customIcon, usePortal, ...restProps })=>{
+ */ export const ScreenSpinner = ({ style, className, state = 'loading', onClick, cancelLabel, mode, label, customIcon, usePortal, visibilityDelay, ...restProps })=>{
     useScrollLock();
     return /*#__PURE__*/ _jsx(AppRootPortal, {
         usePortal: usePortal,
@@ -24,6 +24,7 @@ import { ScreenSpinnerSwapIcon } from "./ScreenSpinnerSwapIcon.js";
                 mode: mode,
                 label: label,
                 customIcon: customIcon,
+                visibilityDelay: visibilityDelay,
                 children: [
                     /*#__PURE__*/ _jsx(ScreenSpinnerLoader, {
                         ...restProps

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground strategy=\"fixed\">\n        <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ScreenSpinner.Container, 'ScreenSpinner.Container');\n  defineComponentDisplayNames(ScreenSpinner.Loader, 'ScreenSpinner.Loader');\n  defineComponentDisplayNames(ScreenSpinner.SwapIcon, 'ScreenSpinner.SwapIcon');\n}\n"],"names":["React","defineComponentDisplayNames","AppRootPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","restProps","noBackground","strategy","Container","Loader","SwapIcon","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACT,GAAGC,WACgB;IACnBf;IAEA,qBACE,KAACD;QAAce,WAAWA;kBACxB,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOU,YAAY;YAACC,UAAS;sBACvE,cAAA,MAACf;gBAAuBM,OAAOA;gBAAOG,MAAMA;gBAAMC,OAAOA;gBAAOC,YAAYA;;kCAC1E,KAACV;wBAAqB,GAAGY,SAAS;;kCAClC,KAACX;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAca,SAAS,GAAGhB;AAC1BG,cAAcc,MAAM,GAAGhB;AACvBE,cAAce,QAAQ,GAAGhB;AAEzB,IAAIiB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzCzB,4BAA4BO,cAAca,SAAS,EAAE;IACrDpB,4BAA4BO,cAAcc,MAAM,EAAE;IAClDrB,4BAA4BO,cAAce,QAAQ,EAAE;AACtD"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ScreenSpinnerContainer } from './ScreenSpinnerContainer';\nimport { ScreenSpinnerLoader } from './ScreenSpinnerLoader';\nimport { ScreenSpinnerSwapIcon } from './ScreenSpinnerSwapIcon';\nimport type { ScreenSpinnerProps } from './types';\n\nexport type { ScreenSpinnerProps };\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ScreenSpinner\n */\nexport const ScreenSpinner: React.FC<ScreenSpinnerProps> & {\n  Container: typeof ScreenSpinnerContainer;\n  Loader: typeof ScreenSpinnerLoader;\n  SwapIcon: typeof ScreenSpinnerSwapIcon;\n} = ({\n  style,\n  className,\n  state = 'loading',\n  onClick,\n  cancelLabel,\n  mode,\n  label,\n  customIcon,\n  usePortal,\n  visibilityDelay,\n  ...restProps\n}: ScreenSpinnerProps): React.ReactNode => {\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper className={className} style={style} noBackground strategy=\"fixed\">\n        <ScreenSpinnerContainer\n          state={state}\n          mode={mode}\n          label={label}\n          customIcon={customIcon}\n          visibilityDelay={visibilityDelay}\n        >\n          <ScreenSpinnerLoader {...restProps} />\n          <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />\n        </ScreenSpinnerContainer>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n\nScreenSpinner.Container = ScreenSpinnerContainer;\nScreenSpinner.Loader = ScreenSpinnerLoader;\nScreenSpinner.SwapIcon = ScreenSpinnerSwapIcon;\n\nif (process.env.NODE_ENV !== 'production') {\n  defineComponentDisplayNames(ScreenSpinner.Container, 'ScreenSpinner.Container');\n  defineComponentDisplayNames(ScreenSpinner.Loader, 'ScreenSpinner.Loader');\n  defineComponentDisplayNames(ScreenSpinner.SwapIcon, 'ScreenSpinner.SwapIcon');\n}\n"],"names":["React","defineComponentDisplayNames","AppRootPortal","useScrollLock","PopoutWrapper","ScreenSpinnerContainer","ScreenSpinnerLoader","ScreenSpinnerSwapIcon","ScreenSpinner","style","className","state","onClick","cancelLabel","mode","label","customIcon","usePortal","visibilityDelay","restProps","noBackground","strategy","Container","Loader","SwapIcon","process","env","NODE_ENV"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,iDAA8C;AAC1F,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,QAAQ,6BAA0B;AAKhE;;CAEC,GACD,OAAO,MAAMC,gBAIT,CAAC,EACHC,KAAK,EACLC,SAAS,EACTC,QAAQ,SAAS,EACjBC,OAAO,EACPC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,UAAU,EACVC,SAAS,EACTC,eAAe,EACf,GAAGC,WACgB;IACnBhB;IAEA,qBACE,KAACD;QAAce,WAAWA;kBACxB,cAAA,KAACb;YAAcM,WAAWA;YAAWD,OAAOA;YAAOW,YAAY;YAACC,UAAS;sBACvE,cAAA,MAAChB;gBACCM,OAAOA;gBACPG,MAAMA;gBACNC,OAAOA;gBACPC,YAAYA;gBACZE,iBAAiBA;;kCAEjB,KAACZ;wBAAqB,GAAGa,SAAS;;kCAClC,KAACZ;wBAAsBK,SAASA;wBAASC,aAAaA;;;;;;AAKhE,EAAE;AAEFL,cAAcc,SAAS,GAAGjB;AAC1BG,cAAce,MAAM,GAAGjB;AACvBE,cAAcgB,QAAQ,GAAGjB;AAEzB,IAAIkB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;IACzC1B,4BAA4BO,cAAcc,SAAS,EAAE;IACrDrB,4BAA4BO,cAAce,MAAM,EAAE;IAClDtB,4BAA4BO,cAAcgB,QAAQ,EAAE;AACtD"}

package/dist/cssm/components/ScreenSpinner/ScreenSpinnerContainer.js

@@ -4,6 +4,7 @@ import { RootComponent } from "../RootComponent/RootComponent.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
 import { ScreenSpinnerContext } from "./context.js";
 import styles from "./ScreenSpinner.module.css";
+import stylesDelay from "../../styles/animationVisibilityDelay.module.css";
 const stateClassNames = {
     cancelable: styles.stateCancelable,
     done: styles.stateDone,
@@ -14,7 +15,7 @@ const modeClassNames = {
     shadow: styles.modeShadow,
     overlay: styles.modeOverlay
 };
-export const ScreenSpinnerContainer = ({ state = 'loading', mode = 'shadow', customIcon, label, children, ...restProps })=>{
+export const ScreenSpinnerContainer = ({ state = 'loading', mode = 'shadow', customIcon, label, children, visibilityDelay, ...restProps })=>{
     return /*#__PURE__*/ _jsx(ScreenSpinnerContext.Provider, {
         value: {
             state,
@@ -22,7 +23,7 @@ export const ScreenSpinnerContainer = ({ state = 'loading', mode = 'shadow', cus
             customIcon
         },
         children: /*#__PURE__*/ _jsxs(RootComponent, {
-            baseClassName: classNames(styles.host, modeClassNames[mode], state !== 'loading' && stateClassNames[state], hasReactNode(label) && styles.hasLabel),
+            baseClassName: classNames(styles.host, modeClassNames[mode], state !== 'loading' && stateClassNames[state], hasReactNode(label) && styles.hasLabel, visibilityDelay && stylesDelay.visibilityDelay),
             ...restProps,
             children: [
                 /*#__PURE__*/ _jsx("div", {

package/dist/cssm/components/ScreenSpinner/ScreenSpinnerContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"sourcesContent":["import { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\n\nconst stateClassNames = {\n  cancelable: styles.stateCancelable,\n  done: styles.stateDone,\n  error: styles.stateError,\n  custom: styles.stateCustom,\n};\n\nconst modeClassNames = {\n  shadow: styles.modeShadow,\n  overlay: styles.modeOverlay,\n};\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state' | 'mode' | 'label' | 'customIcon'>;\n\nexport const ScreenSpinnerContainer = ({\n  state = 'loading',\n  mode = 'shadow',\n  customIcon,\n  label,\n  children,\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state, label, customIcon }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles.host,\n          modeClassNames[mode],\n          state !== 'loading' && stateClassNames[state],\n          hasReactNode(label) && styles.hasLabel,\n        )}\n        {...restProps}\n      >\n        <div className={styles.iconSlot}>{children}</div>\n        {hasReactNode(label) && (\n          <Footnote className={styles.label} aria-hidden>\n            {label}\n          </Footnote>\n        )}\n      </RootComponent>\n    </ScreenSpinnerContext.Provider>\n  );\n};\n"],"names":["classNames","hasReactNode","RootComponent","Footnote","ScreenSpinnerContext","styles","stateClassNames","cancelable","stateCancelable","done","stateDone","error","stateError","custom","stateCustom","modeClassNames","shadow","modeShadow","overlay","modeOverlay","ScreenSpinnerContainer","state","mode","customIcon","label","children","restProps","Provider","value","baseClassName","host","hasLabel","div","className","iconSlot","aria-hidden"],"mappings":";AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,oBAAoB,QAAQ,eAAY;AAEjD,OAAOC,YAAY,6BAA6B;AAEhD,MAAMC,kBAAkB;IACtBC,YAAYF,OAAOG,eAAe;IAClCC,MAAMJ,OAAOK,SAAS;IACtBC,OAAON,OAAOO,UAAU;IACxBC,QAAQR,OAAOS,WAAW;AAC5B;AAEA,MAAMC,iBAAiB;IACrBC,QAAQX,OAAOY,UAAU;IACzBC,SAASb,OAAOc,WAAW;AAC7B;AAKA,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACfC,UAAU,EACVC,KAAK,EACLC,QAAQ,EACR,GAAGC,WACyB;IAC5B,qBACE,KAACtB,qBAAqBuB,QAAQ;QAACC,OAAO;YAAEP;YAAOG;YAAOD;QAAW;kBAC/D,cAAA,MAACrB;YACC2B,eAAe7B,WACbK,OAAOyB,IAAI,EACXf,cAAc,CAACO,KAAK,EACpBD,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CpB,aAAauB,UAAUnB,OAAO0B,QAAQ;YAEvC,GAAGL,SAAS;;8BAEb,KAACM;oBAAIC,WAAW5B,OAAO6B,QAAQ;8BAAGT;;gBACjCxB,aAAauB,wBACZ,KAACrB;oBAAS8B,WAAW5B,OAAOmB,KAAK;oBAAEW,aAAW;8BAC3CX;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../../src/components/ScreenSpinner/ScreenSpinnerContainer.tsx"],"sourcesContent":["import { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ScreenSpinnerContext } from './context';\nimport { type ScreenSpinnerProps } from './types';\nimport styles from './ScreenSpinner.module.css';\nimport stylesDelay from '../../styles/animationVisibilityDelay.module.css';\n\nconst stateClassNames = {\n  cancelable: styles.stateCancelable,\n  done: styles.stateDone,\n  error: styles.stateError,\n  custom: styles.stateCustom,\n};\n\nconst modeClassNames = {\n  shadow: styles.modeShadow,\n  overlay: styles.modeOverlay,\n};\n\ntype ScreenSpinnerContainerProps = HTMLAttributesWithRootRef<HTMLSpanElement> &\n  Pick<ScreenSpinnerProps, 'state' | 'mode' | 'label' | 'customIcon' | 'visibilityDelay'>;\n\nexport const ScreenSpinnerContainer = ({\n  state = 'loading',\n  mode = 'shadow',\n  customIcon,\n  label,\n  children,\n  visibilityDelay,\n  ...restProps\n}: ScreenSpinnerContainerProps) => {\n  return (\n    <ScreenSpinnerContext.Provider value={{ state, label, customIcon }}>\n      <RootComponent\n        baseClassName={classNames(\n          styles.host,\n          modeClassNames[mode],\n          state !== 'loading' && stateClassNames[state],\n          hasReactNode(label) && styles.hasLabel,\n          visibilityDelay && stylesDelay.visibilityDelay,\n        )}\n        {...restProps}\n      >\n        <div className={styles.iconSlot}>{children}</div>\n        {hasReactNode(label) && (\n          <Footnote className={styles.label} aria-hidden>\n            {label}\n          </Footnote>\n        )}\n      </RootComponent>\n    </ScreenSpinnerContext.Provider>\n  );\n};\n"],"names":["classNames","hasReactNode","RootComponent","Footnote","ScreenSpinnerContext","styles","stylesDelay","stateClassNames","cancelable","stateCancelable","done","stateDone","error","stateError","custom","stateCustom","modeClassNames","shadow","modeShadow","overlay","modeOverlay","ScreenSpinnerContainer","state","mode","customIcon","label","children","visibilityDelay","restProps","Provider","value","baseClassName","host","hasLabel","div","className","iconSlot","aria-hidden"],"mappings":";AAAA,SAASA,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,oBAAoB,QAAQ,eAAY;AAEjD,OAAOC,YAAY,6BAA6B;AAChD,OAAOC,iBAAiB,mDAAmD;AAE3E,MAAMC,kBAAkB;IACtBC,YAAYH,OAAOI,eAAe;IAClCC,MAAML,OAAOM,SAAS;IACtBC,OAAOP,OAAOQ,UAAU;IACxBC,QAAQT,OAAOU,WAAW;AAC5B;AAEA,MAAMC,iBAAiB;IACrBC,QAAQZ,OAAOa,UAAU;IACzBC,SAASd,OAAOe,WAAW;AAC7B;AAKA,OAAO,MAAMC,yBAAyB,CAAC,EACrCC,QAAQ,SAAS,EACjBC,OAAO,QAAQ,EACfC,UAAU,EACVC,KAAK,EACLC,QAAQ,EACRC,eAAe,EACf,GAAGC,WACyB;IAC5B,qBACE,KAACxB,qBAAqByB,QAAQ;QAACC,OAAO;YAAER;YAAOG;YAAOD;QAAW;kBAC/D,cAAA,MAACtB;YACC6B,eAAe/B,WACbK,OAAO2B,IAAI,EACXhB,cAAc,CAACO,KAAK,EACpBD,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CrB,aAAawB,UAAUpB,OAAO4B,QAAQ,EACtCN,mBAAmBrB,YAAYqB,eAAe;YAE/C,GAAGC,SAAS;;8BAEb,KAACM;oBAAIC,WAAW9B,OAAO+B,QAAQ;8BAAGV;;gBACjCzB,aAAawB,wBACZ,KAACtB;oBAASgC,WAAW9B,OAAOoB,KAAK;oBAAEY,aAAW;8BAC3CZ;;;;;AAMb,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectionControl/SelectionControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';\nimport styles from './SelectionControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SelectionControlProps\n  extends React.ComponentProps<'label'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'\n    > {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectionControl\n */\nexport const SelectionControl = (restProps: SelectionControlProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      baseClassName={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}\n      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n      {...restProps}\n    />\n  );\n};\n\nSelectionControl.Label = SelectionControlLabel;\n"],"names":["React","classNames","useAdaptivity","usePlatform","DEFAULT_ACTIVE_EFFECT_DELAY","Tappable","SelectionControlLabel","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SelectionControl","restProps","sizeY","platform","Component","baseClassName","host","activeEffectDelay","Label"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,2BAA2B,QAAQ,2BAAwB;AACpE,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,qBAAqB,QAAQ,mDAAgD;AACtF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAUA;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAACC;IAC/B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGb;IAC3B,MAAMc,WAAWb;IAEjB,qBACE,KAACE;QACCY,WAAU;QACVC,eAAejB,WAAWM,OAAOY,IAAI,EAAEJ,UAAU,aAAaP,eAAe,CAACO,MAAM;QACpFK,mBAAmBJ,aAAa,QAAQ,MAAMZ;QAC7C,GAAGU,SAAS;;AAGnB,EAAE;AAEFD,iBAAiBQ,KAAK,GAAGf"}
+{"version":3,"sources":["../../../../src/components/SelectionControl/SelectionControl.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRootRef } from '../../types';\nimport { DEFAULT_ACTIVE_EFFECT_DELAY } from '../Clickable/useState';\nimport { Tappable, type TappableOmitProps } from '../Tappable/Tappable';\nimport { SelectionControlLabel } from './SelectionControlLabel/SelectionControlLabel';\nimport styles from './SelectionControl.module.css';\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport interface SelectionControlProps\n  extends React.ComponentProps<'label'>,\n    HasRootRef<HTMLLabelElement>,\n    Pick<\n      TappableOmitProps,\n      'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode' | 'disabled'\n    > {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/SelectionControl\n */\nexport const SelectionControl = (restProps: SelectionControlProps): React.ReactNode => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n\n  return (\n    <Tappable\n      Component=\"label\"\n      baseClassName={classNames(styles.host, sizeY !== 'regular' && sizeYClassNames[sizeY])}\n      activeEffectDelay={platform === 'ios' ? 100 : DEFAULT_ACTIVE_EFFECT_DELAY}\n      {...restProps}\n    />\n  );\n};\n\nSelectionControl.Label = SelectionControlLabel;\n"],"names":["React","classNames","useAdaptivity","usePlatform","DEFAULT_ACTIVE_EFFECT_DELAY","Tappable","SelectionControlLabel","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","SelectionControl","restProps","sizeY","platform","Component","baseClassName","host","activeEffectDelay","Label"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,2BAA2B,QAAQ,2BAAwB;AACpE,SAASC,QAAQ,QAAgC,0BAAuB;AACxE,SAASC,qBAAqB,QAAQ,mDAAgD;AACtF,OAAOC,YAAY,gCAAgC;AAEnD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAUA;;CAEC,GACD,OAAO,MAAMC,mBAAmB,CAACC;IAC/B,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGb;IAC3B,MAAMc,WAAWb;IAEjB,qBACE,KAACE;QACCY,WAAU;QACVC,eAAejB,WAAWM,OAAOY,IAAI,EAAEJ,UAAU,aAAaP,eAAe,CAACO,MAAM;QACpFK,mBAAmBJ,aAAa,QAAQ,MAAMZ;QAC7C,GAAGU,SAAS;;AAGnB,EAAE;AAEFD,iBAAiBQ,KAAK,GAAGf"}