@vkontakte/vkui 7.1.3 → 7.2.1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useDirection } from '../../hooks/useDirection';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './UsersStack.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst avatarsPositionStyles = {\n  'inline-start': styles.avatarsPositionInlineStart,\n  'inline-end': styles.avatarsPositionInlineEnd,\n  'block-start': styles.avatarsPositionBlockStart,\n};\n\nexport type UsersStackRenderWrapperProps = {\n  children: React.ReactElement;\n  ['data-src']: string;\n};\n\nexport type UsersStackPhoto = {\n  src: string;\n  renderWrapper?: (props: UsersStackRenderWrapperProps) => React.ReactElement;\n};\n\nexport interface UsersStackProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии либо массив структур типа `UsersStackPhoto`:\n   */\n  photos?: string[] | UsersStackPhoto[];\n  /**\n   * Размер аватарок\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n  /**\n   * Определяет положение аватаров\n   * Режим `block-start` рекомендуется использовать с размером `m`\n   */\n  avatarsPosition?: 'inline-start' | 'block-start' | 'inline-end';\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: 'circle' | 'right' | 'left';\n}\n\ntype PhotoSizeType = 16 | 24 | 32;\n\nfunction PathElement({ photoSize, direction, ...props }: PathElementProps) {\n  switch (direction) {\n    case 'circle':\n      const radius = photoSize / 2;\n\n      return <circle cx={radius} cy={radius} r={radius} {...props} />;\n\n    case 'right':\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              d=\"M14,13.285A8 8 0 0 1 8 16A8 8 0 0 1 8 0A8 8 0 0 1 14 2.715A8 8 0 0 0 14,13.285\"\n              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\"\n              {...props}\n            />\n          );\n      }\n\n    default:\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\"\n              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\"\n              {...props}\n            />\n          );\n      }\n  }\n}\n\nconst photoSizes: Record<NonNullable<UsersStackProps['size']>, PhotoSizeType> = {\n  s: 16,\n  m: 24,\n  l: 32,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  count = Math.max(0, photos.length - visibleCount),\n  size = 'm',\n  children,\n  avatarsPosition = 'inline-start',\n  getRootRef,\n  ...restProps\n}: UsersStackProps): React.ReactNode => {\n  const cmpId = React.useId();\n  const [directionRef, textDirection = 'ltr'] = useDirection();\n  const rootRef = useExternRef(getRootRef, directionRef);\n\n  const canShowOthers = count > 0 && count < 100 && size !== 's';\n  const CounterTypography = size === 'l' ? Footnote : Caption;\n\n  const photoSize = photoSizes[size];\n  const directionClip =\n    textDirection === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right';\n\n  const photosElements = photos.slice(0, visibleCount).map((photo, i) => {\n    const direction = i === 0 && !canShowOthers ? 'circle' : directionClip;\n\n    const id = `UsersStackDefs${cmpId}${i}`;\n    const hrefID = `#${id}`;\n    const maskID = `UsersStackMask${cmpId}${i}`;\n\n    const isPhotoType = typeof photo === 'object';\n    const photoSrc = isPhotoType ? photo.src : photo;\n\n    let photoElement = (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={classNames(styles.photo, styles.item)}\n        aria-hidden\n        display=\"block\"\n      >\n        <defs>\n          <PathElement id={id} direction={direction} photoSize={photoSize} />\n        </defs>\n        <clipPath id={maskID}>\n          <use href={hrefID} />\n        </clipPath>\n        <g clipPath={`url(#${maskID})`}>\n          <use href={hrefID} className={styles.fill} />\n          <image href={photoSrc} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n    if (isPhotoType && photo.renderWrapper) {\n      photoElement = photo.renderWrapper({\n        'children': photoElement,\n        'data-src': photoSrc,\n      });\n    }\n\n    return (\n      <div className={styles.photoWrapper} key={i}>\n        {photoElement}\n      </div>\n    );\n  });\n\n  const othersElement = canShowOthers ? (\n    <div className={styles.photoWrapper}>\n      <CounterTypography caps weight=\"1\" className={classNames(styles.item, styles.counter)}>\n        +{count}\n      </CounterTypography>\n    </div>\n  ) : null;\n\n  return (\n    <RootComponent\n      {...restProps}\n      getRootRef={rootRef}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        avatarsPositionStyles[avatarsPosition],\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div className={styles.photos} aria-hidden>\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && <Footnote className={styles.text}>{children}</Footnote>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useDirection","useExternRef","RootComponent","Caption","Footnote","styles","stylesSize","s","sizeS","m","sizeM","l","sizeL","avatarsPositionStyles","avatarsPositionInlineStart","avatarsPositionInlineEnd","avatarsPositionBlockStart","PathElement","photoSize","direction","props","radius","circle","cx","cy","r","path","d","photoSizes","UsersStack","photos","visibleCount","count","Math","max","length","size","children","avatarsPosition","getRootRef","restProps","cmpId","useId","directionRef","textDirection","rootRef","canShowOthers","CounterTypography","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","isPhotoType","photoSrc","src","photoElement","svg","xmlns","className","item","aria-hidden","display","defs","clipPath","use","href","g","fill","image","width","height","stroke","renderWrapper","div","photoWrapper","othersElement","caps","weight","counter","baseClassName","host","text"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/UsersStack/UsersStack.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useConfigDirection } from '../../hooks/useConfigDirection';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './UsersStack.module.css';\n\nconst stylesSize = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nconst avatarsPositionStyles = {\n  'inline-start': styles.avatarsPositionInlineStart,\n  'inline-end': styles.avatarsPositionInlineEnd,\n  'block-start': styles.avatarsPositionBlockStart,\n};\n\nexport type UsersStackRenderWrapperProps = {\n  children: React.ReactElement;\n  ['data-src']: string;\n};\n\nexport type UsersStackPhoto = {\n  src: string;\n  renderWrapper?: (props: UsersStackRenderWrapperProps) => React.ReactElement;\n};\n\nexport interface UsersStackProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Массив ссылок на фотографии либо массив структур типа `UsersStackPhoto`:\n   */\n  photos?: string[] | UsersStackPhoto[];\n  /**\n   * Размер аватарок\n   */\n  size?: 's' | 'm' | 'l';\n  /**\n   * Количество аватарок, которые будут показаны.\n   * Если в массиве `photos` больше элементов и используется размер `m`, то будет показано количество остальных элементов\n   */\n  visibleCount?: number;\n  /**\n   * Число, которое будет указано в счетчике.\n   * По умолчанию высчитывается по формуле `photos.length - visibleCount`.\n   * Если число больше 99, то счетчик скроется.\n   */\n  count?: number;\n  /**\n   * Определяет положение аватаров\n   * Режим `block-start` рекомендуется использовать с размером `m`\n   */\n  avatarsPosition?: 'inline-start' | 'block-start' | 'inline-end';\n}\n\ninterface PathElementProps extends React.SVGAttributes<SVGElement> {\n  photoSize: number;\n  direction: 'circle' | 'right' | 'left';\n}\n\ntype PhotoSizeType = 16 | 24 | 32;\n\nfunction PathElement({ photoSize, direction, ...props }: PathElementProps) {\n  switch (direction) {\n    case 'circle':\n      const radius = photoSize / 2;\n\n      return <circle cx={radius} cy={radius} r={radius} {...props} />;\n\n    case 'right':\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              d=\"M14,13.285A8 8 0 0 1 8 16A8 8 0 0 1 8 0A8 8 0 0 1 14 2.715A8 8 0 0 0 14,13.285\"\n              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              d=\"M22,18.625A12 12 0 0 1 12 24A12 12 0 0 1 12 0A12 12 0 0 1 22 5.375A12 12 0 0 0 22,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M30,23.75A16 16 0 0 1 16 32A16 16 0 0 1 16 0A16 16 0 0 1 30 8.25A16 16 0 0 0 30,23.75\"\n              {...props}\n            />\n          );\n      }\n\n    default:\n      switch (photoSize) {\n        case 16:\n          return (\n            <path\n              d=\"M2,13.285A8 8 0 0 0 8 16A8 8 0 0 0 8 0A8 8 0 0 0 2 2.715A8 8 0 0 1 2,13.285\"\n              {...props}\n            />\n          );\n        case 24:\n          return (\n            <path\n              d=\"M2,18.625A12 12 0 0 0 12 24A12 12 0 0 0 12 0A12 12 0 0 0 2 5.375A12 12 0 0 1 2,18.625\"\n              {...props}\n            />\n          );\n\n        default:\n          return (\n            <path\n              d=\"M2,23.75A16 16 0 0 0 16 32A16 16 0 0 0 16 0A16 16 0 0 0 2 8.25A16 16 0 0 1 2,23.75\"\n              {...props}\n            />\n          );\n      }\n  }\n}\n\nconst photoSizes: Record<NonNullable<UsersStackProps['size']>, PhotoSizeType> = {\n  s: 16,\n  m: 24,\n  l: 32,\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/UsersStack\n */\nexport const UsersStack = ({\n  photos = [],\n  visibleCount = 3,\n  count = Math.max(0, photos.length - visibleCount),\n  size = 'm',\n  children,\n  avatarsPosition = 'inline-start',\n  ...restProps\n}: UsersStackProps): React.ReactNode => {\n  const cmpId = React.useId();\n  const direction = useConfigDirection();\n\n  const canShowOthers = count > 0 && count < 100 && size !== 's';\n  const CounterTypography = size === 'l' ? Footnote : Caption;\n\n  const photoSize = photoSizes[size];\n  const directionClip =\n    direction === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right';\n\n  const photosElements = photos.slice(0, visibleCount).map((photo, i) => {\n    const direction = i === 0 && !canShowOthers ? 'circle' : directionClip;\n\n    const id = `UsersStackDefs${cmpId}${i}`;\n    const hrefID = `#${id}`;\n    const maskID = `UsersStackMask${cmpId}${i}`;\n\n    const isPhotoType = typeof photo === 'object';\n    const photoSrc = isPhotoType ? photo.src : photo;\n\n    let photoElement = (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        className={classNames(styles.photo, styles.item)}\n        aria-hidden\n        display=\"block\"\n      >\n        <defs>\n          <PathElement id={id} direction={direction} photoSize={photoSize} />\n        </defs>\n        <clipPath id={maskID}>\n          <use href={hrefID} />\n        </clipPath>\n        <g clipPath={`url(#${maskID})`}>\n          <use href={hrefID} className={styles.fill} />\n          <image href={photoSrc} width={photoSize} height={photoSize} />\n          <use href={hrefID} fill=\"none\" stroke=\"rgba(0, 0, 0, 0.08)\" />\n        </g>\n      </svg>\n    );\n    if (isPhotoType && photo.renderWrapper) {\n      photoElement = photo.renderWrapper({\n        'children': photoElement,\n        'data-src': photoSrc,\n      });\n    }\n\n    return (\n      <div className={styles.photoWrapper} key={i}>\n        {photoElement}\n      </div>\n    );\n  });\n\n  const othersElement = canShowOthers ? (\n    <div className={styles.photoWrapper}>\n      <CounterTypography caps weight=\"1\" className={classNames(styles.item, styles.counter)}>\n        +{count}\n      </CounterTypography>\n    </div>\n  ) : null;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles.host,\n        stylesSize[size],\n        avatarsPositionStyles[avatarsPosition],\n      )}\n    >\n      {(photosElements.length > 0 || othersElement) && (\n        <div className={styles.photos} aria-hidden>\n          {photosElements}\n          {othersElement}\n        </div>\n      )}\n      {hasReactNode(children) && <Footnote className={styles.text}>{children}</Footnote>}\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useConfigDirection","RootComponent","Caption","Footnote","styles","stylesSize","s","sizeS","m","sizeM","l","sizeL","avatarsPositionStyles","avatarsPositionInlineStart","avatarsPositionInlineEnd","avatarsPositionBlockStart","PathElement","photoSize","direction","props","radius","circle","cx","cy","r","path","d","photoSizes","UsersStack","photos","visibleCount","count","Math","max","length","size","children","avatarsPosition","restProps","cmpId","useId","canShowOthers","CounterTypography","directionClip","photosElements","slice","map","photo","i","id","hrefID","maskID","isPhotoType","photoSrc","src","photoElement","svg","xmlns","className","item","aria-hidden","display","defs","clipPath","use","href","g","fill","image","width","height","stroke","renderWrapper","div","photoWrapper","othersElement","caps","weight","counter","baseClassName","host","text"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,kBAAkB,QAAQ,oCAAiC;AAEpE,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,aAAa;IACjBC,GAAGF,OAAOG,KAAK;IACfC,GAAGJ,OAAOK,KAAK;IACfC,GAAGN,OAAOO,KAAK;AACjB;AAEA,MAAMC,wBAAwB;IAC5B,gBAAgBR,OAAOS,0BAA0B;IACjD,cAAcT,OAAOU,wBAAwB;IAC7C,eAAeV,OAAOW,yBAAyB;AACjD;AA8CA,SAASC,YAAY,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGC,OAAyB;IACvE,OAAQD;QACN,KAAK;YACH,MAAME,SAASH,YAAY;YAE3B,qBAAO,KAACI;gBAAOC,IAAIF;gBAAQG,IAAIH;gBAAQI,GAAGJ;gBAAS,GAAGD,KAAK;;QAE7D,KAAK;YACH,OAAQF;gBACN,KAAK;oBACH,qBACE,KAACQ;wBACCC,GAAE;wBACD,GAAGP,KAAK;;gBAGf,KAAK;oBACH,qBACE,KAACM;wBACCC,GAAE;wBACD,GAAGP,KAAK;;gBAIf;oBACE,qBACE,KAACM;wBACCC,GAAE;wBACD,GAAGP,KAAK;;YAGjB;QAEF;YACE,OAAQF;gBACN,KAAK;oBACH,qBACE,KAACQ;wBACCC,GAAE;wBACD,GAAGP,KAAK;;gBAGf,KAAK;oBACH,qBACE,KAACM;wBACCC,GAAE;wBACD,GAAGP,KAAK;;gBAIf;oBACE,qBACE,KAACM;wBACCC,GAAE;wBACD,GAAGP,KAAK;;YAGjB;IACJ;AACF;AAEA,MAAMQ,aAA0E;IAC9ErB,GAAG;IACHE,GAAG;IACHE,GAAG;AACL;AAEA;;CAEC,GACD,OAAO,MAAMkB,aAAa,CAAC,EACzBC,SAAS,EAAE,EACXC,eAAe,CAAC,EAChBC,QAAQC,KAAKC,GAAG,CAAC,GAAGJ,OAAOK,MAAM,GAAGJ,aAAa,EACjDK,OAAO,GAAG,EACVC,QAAQ,EACRC,kBAAkB,cAAc,EAChC,GAAGC,WACa;IAChB,MAAMC,QAAQ1C,MAAM2C,KAAK;IACzB,MAAMtB,YAAYlB;IAElB,MAAMyC,gBAAgBV,QAAQ,KAAKA,QAAQ,OAAOI,SAAS;IAC3D,MAAMO,oBAAoBP,SAAS,MAAMhC,WAAWD;IAEpD,MAAMe,YAAYU,UAAU,CAACQ,KAAK;IAClC,MAAMQ,gBACJzB,cAAc,QAASuB,gBAAgB,UAAU,SAAUA,gBAAgB,SAAS;IAEtF,MAAMG,iBAAiBf,OAAOgB,KAAK,CAAC,GAAGf,cAAcgB,GAAG,CAAC,CAACC,OAAOC;QAC/D,MAAM9B,YAAY8B,MAAM,KAAK,CAACP,gBAAgB,WAAWE;QAEzD,MAAMM,KAAK,CAAC,cAAc,EAAEV,QAAQS,GAAG;QACvC,MAAME,SAAS,CAAC,CAAC,EAAED,IAAI;QACvB,MAAME,SAAS,CAAC,cAAc,EAAEZ,QAAQS,GAAG;QAE3C,MAAMI,cAAc,OAAOL,UAAU;QACrC,MAAMM,WAAWD,cAAcL,MAAMO,GAAG,GAAGP;QAE3C,IAAIQ,6BACF,MAACC;YACCC,OAAM;YACNC,WAAW5D,WAAWM,OAAO2C,KAAK,EAAE3C,OAAOuD,IAAI;YAC/CC,aAAW;YACXC,SAAQ;;8BAER,KAACC;8BACC,cAAA,KAAC9C;wBAAYiC,IAAIA;wBAAI/B,WAAWA;wBAAWD,WAAWA;;;8BAExD,KAAC8C;oBAASd,IAAIE;8BACZ,cAAA,KAACa;wBAAIC,MAAMf;;;8BAEb,MAACgB;oBAAEH,UAAU,CAAC,KAAK,EAAEZ,OAAO,CAAC,CAAC;;sCAC5B,KAACa;4BAAIC,MAAMf;4BAAQQ,WAAWtD,OAAO+D,IAAI;;sCACzC,KAACC;4BAAMH,MAAMZ;4BAAUgB,OAAOpD;4BAAWqD,QAAQrD;;sCACjD,KAAC+C;4BAAIC,MAAMf;4BAAQiB,MAAK;4BAAOI,QAAO;;;;;;QAI5C,IAAInB,eAAeL,MAAMyB,aAAa,EAAE;YACtCjB,eAAeR,MAAMyB,aAAa,CAAC;gBACjC,YAAYjB;gBACZ,YAAYF;YACd;QACF;QAEA,qBACE,KAACoB;YAAIf,WAAWtD,OAAOsE,YAAY;sBAChCnB;WADuCP;IAI9C;IAEA,MAAM2B,gBAAgBlC,8BACpB,KAACgC;QAAIf,WAAWtD,OAAOsE,YAAY;kBACjC,cAAA,MAAChC;YAAkBkC,IAAI;YAACC,QAAO;YAAInB,WAAW5D,WAAWM,OAAOuD,IAAI,EAAEvD,OAAO0E,OAAO;;gBAAG;gBACnF/C;;;SAGJ;IAEJ,qBACE,MAAC9B;QACE,GAAGqC,SAAS;QACbyC,eAAejF,WACbM,OAAO4E,IAAI,EACX3E,UAAU,CAAC8B,KAAK,EAChBvB,qBAAqB,CAACyB,gBAAgB;;YAGtCO,CAAAA,eAAeV,MAAM,GAAG,KAAKyC,aAAY,mBACzC,MAACF;gBAAIf,WAAWtD,OAAOyB,MAAM;gBAAE+B,aAAW;;oBACvChB;oBACA+B;;;YAGJ5E,aAAaqC,2BAAa,KAACjC;gBAASuD,WAAWtD,OAAO6E,IAAI;0BAAG7C;;;;AAGpE,EAAE"}

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

@@ -36,8 +36,8 @@
 }
 
 .item {
-  block-size: var(--vkui_internal--UsersStack_item_size);
   min-inline-size: var(--vkui_internal--UsersStack_item_size);
+  block-size: var(--vkui_internal--UsersStack_item_size);
 }
 
 .photo {
@@ -45,10 +45,10 @@
 }
 
 .counter {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   padding-inline: var(--vkui--spacing_size_xs);
   color: var(--vkui--color_text_contrast_themed);
   background: var(--vkui--color_icon_secondary);
@@ -65,14 +65,14 @@
 }
 
 .text {
-  min-inline-size: 0;
   flex: 1;
+  min-inline-size: 0;
 }
 
 .avatarsPositionBlockStart .text {
-  text-align: center;
   -webkit-margin-before: 8px;
           margin-block-start: 8px;
+  text-align: center;
 }
 
 .avatarsPositionInlineStart .text {

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

@@ -2,8 +2,8 @@
   --vkui_internal--view_animation_translateY_initial: 80px;
 
   position: relative;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
   word-wrap: break-word;
 }
 
@@ -19,15 +19,15 @@
 }
 
 .panelOverlay {
-  display: none;
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_panel_header_fade);
+  display: none;
   inline-size: 100%;
   block-size: 100%;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  background-color: #000;
   pointer-events: none;
-  z-index: var(--vkui_internal--z_index_panel_header_fade);
+  background-color: #000;
 }
 
 .panelPrev .panelOverlay {
@@ -64,8 +64,8 @@
 }
 
 .panels {
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
 }
 
 .panelIn {
@@ -74,9 +74,9 @@
 
 .panel {
   position: relative;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
   isolation: isolate;
 }
 

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

@@ -1,31 +1,31 @@
 /* stylelint-disable declaration-no-important */
 .host {
   position: absolute !important;
-  block-size: 1px !important;
   inline-size: 1px !important;
+  block-size: 1px !important;
   padding: 0 !important;
   margin: -1px !important; /* Fix for https://github.com/twbs/bootstrap/issues/25686 */
-  white-space: nowrap !important;
-  clip: rect(0, 0, 0, 0) !important;
-  -webkit-clip-path: inset(50%);
-          clip-path: inset(50%);
   overflow: hidden !important;
-  border: 0 !important;
-  opacity: 0;
+  white-space: nowrap !important;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  border: 0 !important;
+  opacity: 0;
+  clip: rect(0, 0, 0, 0) !important;
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
 }
 /* Чтобы фокус скринридера, попавший на скрытый инпут был виден.
  * Особенно актуально для Android TalkBack */
 .focusableInput {
-  inset-inline-start: 0;
   inset-block-start: 0;
-  block-size: 100% !important;
+  inset-inline-start: 0;
   inline-size: 100% !important;
+  block-size: 100% !important;
+  pointer-events: none;
   clip: auto !important;
   -webkit-clip-path: none !important;
           clip-path: none !important;
-  pointer-events: none;
 }
 /* stylelint-enable declaration-no-important */

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

@@ -18,26 +18,26 @@
 }
 
 .formIn {
+  position: relative;
+  display: flex;
   flex: 1;
   min-inline-size: 0;
-  display: flex;
-  position: relative;
 }
 
 .textarea {
   box-sizing: border-box;
-  inline-size: 100%;
   flex: 1;
+  inline-size: 100%;
   min-inline-size: 0;
+  max-block-size: 120px;
   margin: 0;
-  background: transparent;
-  border: 0;
-  resize: none;
   color: var(--vkui--color_text_primary);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  max-block-size: 120px;
+  resize: none;
+  background: transparent;
+  border: 0;
 }
 
 .textarea::placeholder {
@@ -87,11 +87,11 @@
 
 .ios .formIn {
   box-sizing: border-box;
+  margin-block: 8px;
+  margin-inline: 0;
   background-color: var(--vkui--color_write_bar_input_background);
   border: var(--vkui--size_border--regular) solid var(--vkui--color_write_bar_input_border);
   border-radius: 18px;
-  margin-block: 8px;
-  margin-inline: 0;
 }
 
 .ios .formIn:first-child {
@@ -104,10 +104,9 @@
   --vkui_internal--writebar-right-gap: calc(-1 * var(--vkui--size_border--regular));
   --vkui_internal--writebar-vertical-gap: calc(var(--vkui_internal--writebar-right-gap) - 8px);
 
+  margin-block: var(--vkui_internal--writebar-vertical-gap);
   -webkit-margin-end: var(--vkui_internal--writebar-right-gap);
-
           margin-inline-end: var(--vkui_internal--writebar-right-gap);
-  margin-block: var(--vkui_internal--writebar-vertical-gap);
 }
 
 .ios .textarea {

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

@@ -1,14 +1,14 @@
 .host {
-  background: none;
-  border: 0;
   position: relative;
-  color: var(--vkui--color_icon_secondary);
-  block-size: 52px;
   inline-size: 44px;
+  block-size: 52px;
+  padding: 0;
+  margin: 0;
+  color: var(--vkui--color_icon_secondary);
   cursor: pointer;
+  background: none;
+  border: 0;
   border-radius: var(--vkui--size_border_radius--regular);
-  margin: 0;
-  padding: 0;
 }
 
 .in {
@@ -20,8 +20,8 @@
 }
 
 .host:disabled {
-  opacity: 0.4;
   pointer-events: none;
+  opacity: 0.4;
 }
 
 .active {
@@ -32,7 +32,7 @@
   position: absolute;
   inset-block-start: 6px;
   inset-inline-end: 2px;
-  box-shadow: 0 0 0 2px var(--vkui--color_background_modal);
+  box-shadow: 0 0 0 2px var(--vkui--color_background_contrast_themed);
 }
 
 .ios .counter {
@@ -54,9 +54,9 @@
 
 .ios.modeSend,
 .ios.modeDone {
-  color: var(--vkui--color_icon_accent_themed);
   inline-size: 48px;
   padding-inline: 0;
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .ios.modeSend,

package/dist/cssm/context/CalendarDirectionContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/CalendarDirectionContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { type Direction } from '../hooks/useDirection';\n\nexport interface CalendarDirectionContextProps {\n  direction: Direction;\n}\n\nexport const CalendarDirectionContext = createContext<CalendarDirectionContextProps>({\n  direction: 'ltr',\n});\n\nexport const useCalendarDirectionContext = () => useContext(CalendarDirectionContext);\n"],"names":["createContext","useContext","CalendarDirectionContext","direction","useCalendarDirectionContext"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAOlD,OAAO,MAAMC,2BAA2BF,cAA6C;IACnFG,WAAW;AACb,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAMH,WAAWC,0BAA0B"}
+{"version":3,"sources":["../../../src/context/CalendarDirectionContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\nimport { type Direction } from '../lib/direction';\n\nexport interface CalendarDirectionContextProps {\n  direction: Direction;\n}\n\nexport const CalendarDirectionContext = createContext<CalendarDirectionContextProps>({\n  direction: 'ltr',\n});\n\nexport const useCalendarDirectionContext = () => useContext(CalendarDirectionContext);\n"],"names":["createContext","useContext","CalendarDirectionContext","direction","useCalendarDirectionContext"],"mappings":"AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,QAAQ;AAOlD,OAAO,MAAMC,2BAA2BF,cAA6C;IACnFG,WAAW;AACb,GAAG;AAEH,OAAO,MAAMC,8BAA8B,IAAMH,WAAWC,0BAA0B"}

package/dist/cssm/helpers/getValueByKey.js

@@ -0,0 +1,17 @@
+export const getRequiredValueByKey = (key, map)=>{
+    if (!map.hasOwnProperty(key)) {
+        throw new Error(`getRequiredValueByKey(${key})`);
+    }
+    return map[key];
+};
+export const getValueByKey = (key, map, defaultValue)=>{
+    if (!map.hasOwnProperty(key)) {
+        if (defaultValue) {
+            return defaultValue;
+        }
+        throw new Error(`getValueByKey(${String(key)})`);
+    }
+    return map[key];
+};
+
+//# sourceMappingURL=getValueByKey.js.map

package/dist/cssm/helpers/getValueByKey.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/helpers/getValueByKey.ts"],"sourcesContent":["export const getRequiredValueByKey = <VALUE, KEY extends PropertyKey = PropertyKey>(\n  key: KEY,\n  map: Record<KEY, VALUE>,\n): VALUE => {\n  if (!map.hasOwnProperty(key)) {\n    throw new Error(`getRequiredValueByKey(${key})`);\n  }\n  return map[key];\n};\n\nexport const getValueByKey = <VALUE, KEY extends PropertyKey = PropertyKey>(\n  key: KEY,\n  map: {\n    [key: string]: VALUE;\n  },\n  defaultValue: VALUE,\n): VALUE => {\n  if (!map.hasOwnProperty(key)) {\n    if (defaultValue) {\n      return defaultValue;\n    }\n    throw new Error(`getValueByKey(${String(key)})`);\n  }\n  return map[key];\n};\n"],"names":["getRequiredValueByKey","key","map","hasOwnProperty","Error","getValueByKey","defaultValue","String"],"mappings":"AAAA,OAAO,MAAMA,wBAAwB,CACnCC,KACAC;IAEA,IAAI,CAACA,IAAIC,cAAc,CAACF,MAAM;QAC5B,MAAM,IAAIG,MAAM,CAAC,sBAAsB,EAAEH,IAAI,CAAC,CAAC;IACjD;IACA,OAAOC,GAAG,CAACD,IAAI;AACjB,EAAE;AAEF,OAAO,MAAMI,gBAAgB,CAC3BJ,KACAC,KAGAI;IAEA,IAAI,CAACJ,IAAIC,cAAc,CAACF,MAAM;QAC5B,IAAIK,cAAc;YAChB,OAAOA;QACT;QACA,MAAM,IAAIF,MAAM,CAAC,cAAc,EAAEG,OAAON,KAAK,CAAC,CAAC;IACjD;IACA,OAAOC,GAAG,CAACD,IAAI;AACjB,EAAE"}

package/dist/cssm/hooks/useAutoDetectDirection.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { useDOM } from "../lib/dom.js";
+export const useAutoDetectDirection = (directionProp)=>{
+    const { window, document } = useDOM();
+    return React.useMemo(()=>{
+        if (directionProp) {
+            return directionProp;
+        }
+        if (!window || !document) {
+            return 'ltr';
+        }
+        const styleDeclaration = window.getComputedStyle(document.body);
+        return styleDeclaration.direction || 'ltr';
+    }, [
+        directionProp,
+        document,
+        window
+    ]);
+};
+
+//# sourceMappingURL=useAutoDetectDirection.js.map

package/dist/cssm/hooks/useAutoDetectDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useAutoDetectDirection.ts"],"sourcesContent":["import * as React from 'react';\nimport { type Direction } from '../lib/direction';\nimport { useDOM } from '../lib/dom';\n\nexport const useAutoDetectDirection = (directionProp: Direction | undefined): Direction => {\n  const { window, document } = useDOM();\n\n  return React.useMemo(() => {\n    if (directionProp) {\n      return directionProp;\n    }\n    if (!window || !document) {\n      return 'ltr';\n    }\n    const styleDeclaration = window.getComputedStyle(document.body);\n    return (styleDeclaration.direction as Direction) || 'ltr';\n  }, [directionProp, document, window]);\n};\n"],"names":["React","useDOM","useAutoDetectDirection","directionProp","window","document","useMemo","styleDeclaration","getComputedStyle","body","direction"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,MAAM,QAAQ,gBAAa;AAEpC,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGJ;IAE7B,OAAOD,MAAMM,OAAO,CAAC;QACnB,IAAIH,eAAe;YACjB,OAAOA;QACT;QACA,IAAI,CAACC,UAAU,CAACC,UAAU;YACxB,OAAO;QACT;QACA,MAAME,mBAAmBH,OAAOI,gBAAgB,CAACH,SAASI,IAAI;QAC9D,OAAO,AAACF,iBAAiBG,SAAS,IAAkB;IACtD,GAAG;QAACP;QAAeE;QAAUD;KAAO;AACtC,EAAE"}

package/dist/cssm/hooks/useCalendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useCalendar.ts"],"sourcesContent":["import * as React from 'react';\nimport { addMonths, endOfDay, isAfter, isBefore, isSameDay, startOfDay, subMonths } from 'date-fns';\nimport type { CalendarProps } from '../components/Calendar/Calendar';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, isDayMinMaxRestricted } from '../lib/calendar';\n\nexport interface UseCalendarDependencies\n  extends Pick<\n    CalendarProps,\n    | 'onHeaderChange'\n    | 'onNextMonth'\n    | 'onPrevMonth'\n    | 'minDateTime'\n    | 'maxDateTime'\n    | 'shouldDisableDate'\n    | 'disableFuture'\n    | 'disablePast'\n  > {\n  value?: Array<Date | null> | Date;\n}\n\nexport function useCalendar({\n  value,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  minDateTime,\n  maxDateTime,\n}: UseCalendarDependencies): {\n  viewDate: Date;\n  setViewDate: (value: Date) => void;\n  setPrevMonth: () => void;\n  setNextMonth: () => void;\n  focusedDay: Date | undefined;\n  setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;\n  isDayFocused: (day: Date) => boolean;\n  isDayDisabled: (day: Date, withTime?: boolean) => boolean;\n  resetSelectedDay: () => void;\n  isMonthDisabled: (month: number, year?: number) => boolean;\n  isYearDisabled: (year: number) => boolean;\n} {\n  const [viewDate, setViewDate] = React.useState(\n    (Array.isArray(value) ? value[0] : value) ?? new Date(),\n  );\n  const [focusedDay, setFocusedDay] = React.useState<Date>();\n\n  const setPrevMonth = React.useCallback(() => {\n    onPrevMonth?.();\n    setViewDate(subMonths(viewDate, 1));\n  }, [viewDate, onPrevMonth]);\n  const setNextMonth = React.useCallback(() => {\n    onNextMonth?.();\n    setViewDate(addMonths(viewDate, 1));\n  }, [viewDate, onNextMonth]);\n\n  const handleSetViewDate = React.useCallback(\n    (value: Date) => {\n      onHeaderChange?.(value);\n      setViewDate(value);\n    },\n    [onHeaderChange],\n  );\n\n  const isDayFocused = React.useCallback(\n    (day: Date) => Boolean(focusedDay && isSameDay(day, focusedDay)),\n    [focusedDay],\n  );\n\n  const isDayDisabled = React.useCallback(\n    (day: Date, withTime?: boolean) => {\n      const now = new Date();\n      if (shouldDisableDate) {\n        return shouldDisableDate(day);\n      }\n      if (disableFuture) {\n        return isAfter(startOfDay(day), now);\n      }\n      if (disablePast) {\n        return isBefore(endOfDay(day), now);\n      }\n      if (minDateTime || maxDateTime) {\n        return isDayMinMaxRestricted(day, { min: minDateTime, max: maxDateTime, withTime });\n      }\n\n      return false;\n    },\n    [disableFuture, disablePast, shouldDisableDate, minDateTime, maxDateTime],\n  );\n\n  const isMonthDisabled = React.useCallback(\n    (month: number, year?: number): boolean => {\n      const now = new Date();\n      year = year || viewDate.getFullYear();\n      const minMonth = minDateTime ? minDateTime.getMonth() : 0;\n      const maxMonth = maxDateTime ? maxDateTime.getMonth() : 11;\n      const minYear = minDateTime?.getFullYear() || DEFAULT_MIN_YEAR;\n      const maxYear = maxDateTime?.getFullYear() || DEFAULT_MAX_YEAR;\n\n      let isDisabled =\n        year >= minYear && year <= maxYear\n          ? (year === minYear && minMonth > month) || (year === maxYear && month > maxMonth)\n          : true;\n\n      if (disableFuture) {\n        isDisabled =\n          isDisabled ||\n          (year === now.getFullYear() ? month > now.getMonth() : year > now.getFullYear());\n      }\n      if (disablePast) {\n        isDisabled =\n          isDisabled ||\n          (year === now.getFullYear() ? month < now.getMonth() : year < now.getFullYear());\n      }\n\n      return isDisabled;\n    },\n    [disableFuture, disablePast, viewDate, minDateTime, maxDateTime],\n  );\n\n  const isYearDisabled = React.useCallback(\n    (year: number): boolean => {\n      const now = new Date();\n      const minYear = minDateTime?.getFullYear() || DEFAULT_MIN_YEAR;\n      const maxYear = maxDateTime?.getFullYear() || DEFAULT_MAX_YEAR;\n\n      let isDisabled = minYear > year || year > maxYear;\n      if (disableFuture) {\n        isDisabled = isDisabled || year > now.getFullYear();\n      }\n      if (disablePast) {\n        isDisabled = isDisabled || year < now.getFullYear();\n      }\n\n      return isDisabled;\n    },\n    [disableFuture, disablePast, minDateTime, maxDateTime],\n  );\n\n  const resetSelectedDay = React.useCallback(() => {\n    setFocusedDay(undefined);\n  }, [setFocusedDay]);\n\n  return {\n    viewDate,\n    setViewDate: handleSetViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  };\n}\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","startOfDay","subMonths","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","isDayMinMaxRestricted","useCalendar","value","disablePast","disableFuture","shouldDisableDate","onHeaderChange","onNextMonth","onPrevMonth","minDateTime","maxDateTime","viewDate","setViewDate","useState","Array","isArray","Date","focusedDay","setFocusedDay","setPrevMonth","useCallback","setNextMonth","handleSetViewDate","isDayFocused","day","Boolean","isDayDisabled","withTime","now","min","max","isMonthDisabled","month","year","getFullYear","minMonth","getMonth","maxMonth","minYear","maxYear","isDisabled","isYearDisabled","resetSelectedDay","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../src/hooks/useCalendar.ts"],"sourcesContent":["import * as React from 'react';\nimport { addMonths, endOfDay, isAfter, isBefore, isSameDay, startOfDay, subMonths } from 'date-fns';\nimport type { CalendarProps } from '../components/Calendar/Calendar';\nimport { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, isDayMinMaxRestricted } from '../lib/calendar';\n\nexport interface UseCalendarDependencies\n  extends Pick<\n    CalendarProps,\n    | 'onHeaderChange'\n    | 'onNextMonth'\n    | 'onPrevMonth'\n    | 'minDateTime'\n    | 'maxDateTime'\n    | 'shouldDisableDate'\n    | 'disableFuture'\n    | 'disablePast'\n  > {\n  value?: Array<Date | null> | Date | null;\n}\n\nexport function useCalendar({\n  value,\n  disablePast,\n  disableFuture,\n  shouldDisableDate,\n  onHeaderChange,\n  onNextMonth,\n  onPrevMonth,\n  minDateTime,\n  maxDateTime,\n}: UseCalendarDependencies): {\n  viewDate: Date;\n  setViewDate: (value: Date) => void;\n  setPrevMonth: () => void;\n  setNextMonth: () => void;\n  focusedDay: Date | undefined;\n  setFocusedDay: React.Dispatch<React.SetStateAction<Date | undefined>>;\n  isDayFocused: (day: Date) => boolean;\n  isDayDisabled: (day: Date, withTime?: boolean) => boolean;\n  resetSelectedDay: () => void;\n  isMonthDisabled: (month: number, year?: number) => boolean;\n  isYearDisabled: (year: number) => boolean;\n} {\n  const [viewDate, setViewDate] = React.useState(\n    (Array.isArray(value) ? value[0] : value) ?? new Date(),\n  );\n  const [focusedDay, setFocusedDay] = React.useState<Date>();\n\n  const setPrevMonth = React.useCallback(() => {\n    onPrevMonth?.();\n    setViewDate(subMonths(viewDate, 1));\n  }, [viewDate, onPrevMonth]);\n  const setNextMonth = React.useCallback(() => {\n    onNextMonth?.();\n    setViewDate(addMonths(viewDate, 1));\n  }, [viewDate, onNextMonth]);\n\n  const handleSetViewDate = React.useCallback(\n    (value: Date) => {\n      onHeaderChange?.(value);\n      setViewDate(value);\n    },\n    [onHeaderChange],\n  );\n\n  const isDayFocused = React.useCallback(\n    (day: Date) => Boolean(focusedDay && isSameDay(day, focusedDay)),\n    [focusedDay],\n  );\n\n  const isDayDisabled = React.useCallback(\n    (day: Date, withTime?: boolean) => {\n      const now = new Date();\n      if (shouldDisableDate) {\n        return shouldDisableDate(day);\n      }\n      if (disableFuture) {\n        return isAfter(startOfDay(day), now);\n      }\n      if (disablePast) {\n        return isBefore(endOfDay(day), now);\n      }\n      if (minDateTime || maxDateTime) {\n        return isDayMinMaxRestricted(day, { min: minDateTime, max: maxDateTime, withTime });\n      }\n\n      return false;\n    },\n    [disableFuture, disablePast, shouldDisableDate, minDateTime, maxDateTime],\n  );\n\n  const isMonthDisabled = React.useCallback(\n    (month: number, year?: number): boolean => {\n      const now = new Date();\n      year = year || viewDate.getFullYear();\n      const minMonth = minDateTime ? minDateTime.getMonth() : 0;\n      const maxMonth = maxDateTime ? maxDateTime.getMonth() : 11;\n      const minYear = minDateTime?.getFullYear() || DEFAULT_MIN_YEAR;\n      const maxYear = maxDateTime?.getFullYear() || DEFAULT_MAX_YEAR;\n\n      let isDisabled =\n        year >= minYear && year <= maxYear\n          ? (year === minYear && minMonth > month) || (year === maxYear && month > maxMonth)\n          : true;\n\n      if (disableFuture) {\n        isDisabled =\n          isDisabled ||\n          (year === now.getFullYear() ? month > now.getMonth() : year > now.getFullYear());\n      }\n      if (disablePast) {\n        isDisabled =\n          isDisabled ||\n          (year === now.getFullYear() ? month < now.getMonth() : year < now.getFullYear());\n      }\n\n      return isDisabled;\n    },\n    [disableFuture, disablePast, viewDate, minDateTime, maxDateTime],\n  );\n\n  const isYearDisabled = React.useCallback(\n    (year: number): boolean => {\n      const now = new Date();\n      const minYear = minDateTime?.getFullYear() || DEFAULT_MIN_YEAR;\n      const maxYear = maxDateTime?.getFullYear() || DEFAULT_MAX_YEAR;\n\n      let isDisabled = minYear > year || year > maxYear;\n      if (disableFuture) {\n        isDisabled = isDisabled || year > now.getFullYear();\n      }\n      if (disablePast) {\n        isDisabled = isDisabled || year < now.getFullYear();\n      }\n\n      return isDisabled;\n    },\n    [disableFuture, disablePast, minDateTime, maxDateTime],\n  );\n\n  const resetSelectedDay = React.useCallback(() => {\n    setFocusedDay(undefined);\n  }, [setFocusedDay]);\n\n  return {\n    viewDate,\n    setViewDate: handleSetViewDate,\n    setPrevMonth,\n    setNextMonth,\n    focusedDay,\n    setFocusedDay,\n    isDayFocused,\n    isDayDisabled,\n    resetSelectedDay,\n    isMonthDisabled,\n    isYearDisabled,\n  };\n}\n"],"names":["React","addMonths","endOfDay","isAfter","isBefore","isSameDay","startOfDay","subMonths","DEFAULT_MAX_YEAR","DEFAULT_MIN_YEAR","isDayMinMaxRestricted","useCalendar","value","disablePast","disableFuture","shouldDisableDate","onHeaderChange","onNextMonth","onPrevMonth","minDateTime","maxDateTime","viewDate","setViewDate","useState","Array","isArray","Date","focusedDay","setFocusedDay","setPrevMonth","useCallback","setNextMonth","handleSetViewDate","isDayFocused","day","Boolean","isDayDisabled","withTime","now","min","max","isMonthDisabled","month","year","getFullYear","minMonth","getMonth","maxMonth","minYear","maxYear","isDisabled","isYearDisabled","resetSelectedDay","undefined"],"mappings":"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"}

package/dist/cssm/hooks/useConfigDirection.js

@@ -0,0 +1,7 @@
+import { useConfigProvider } from "../components/ConfigProvider/ConfigProviderContext.js";
+export function useConfigDirection() {
+    const { direction } = useConfigProvider();
+    return direction || 'ltr';
+}
+
+//# sourceMappingURL=useConfigDirection.js.map

package/dist/cssm/hooks/useConfigDirection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useConfigDirection.ts"],"sourcesContent":["import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';\nimport { type Direction } from '../lib/direction';\n\nexport function useConfigDirection(): Direction {\n  const { direction } = useConfigProvider();\n\n  return direction || 'ltr';\n}\n"],"names":["useConfigProvider","useConfigDirection","direction"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,wDAAqD;AAGvF,OAAO,SAASC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGF;IAEtB,OAAOE,aAAa;AACtB"}

package/dist/cssm/hooks/useDateInput.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { useDOM } from "../lib/dom.js";
 import { useBooleanState } from "./useBooleanState.js";
 import { useGlobalEventListener } from "./useGlobalEventListener.js";
-export function useDateInput({ maxElement, refs, autoFocus, disabled, elementsConfig, onChange, onInternalValueChange, getInternalValue, value, onCalendarOpenChanged }) {
+export function useDateInput({ maxElement, refs, autoFocus, disabled, elementsConfig, onClear, onInternalValueChange, getInternalValue, value, onCalendarOpenChanged }) {
     const { document } = useDOM();
     const { value: open, setTrue: openCalendar, setFalse: closeCalendar } = useBooleanState(false);
     const rootRef = React.useRef(null);
@@ -94,10 +94,10 @@ export function useDateInput({ maxElement, refs, autoFocus, disabled, elementsCo
         window
     ]);
     const clear = React.useCallback(()=>{
-        onChange?.(undefined);
+        onClear?.();
         selectFirst();
     }, [
-        onChange,
+        onClear,
         selectFirst
     ]);
     const handleFieldEnter = React.useCallback(()=>{

package/dist/cssm/hooks/useDateInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useDateInput.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { useBooleanState } from './useBooleanState';\nimport { useGlobalEventListener } from './useGlobalEventListener';\n\nexport interface UseDateInputDependencies<T, D> {\n  maxElement: number;\n  refs: Array<React.RefObject<T | null>>;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  value?: D;\n  elementsConfig: (index: number) => {\n    length: number;\n    min: number;\n    max: number;\n  };\n  onInternalValueChange: (value: string[]) => void;\n  getInternalValue: (value?: D | undefined) => string[];\n  onChange?: (value?: D | undefined) => void;\n  onCalendarOpenChanged?: (opened: boolean) => void;\n}\n\nexport function useDateInput<T extends HTMLElement, D>({\n  maxElement,\n  refs,\n  autoFocus,\n  disabled,\n  elementsConfig,\n  onChange,\n  onInternalValueChange,\n  getInternalValue,\n  value,\n  onCalendarOpenChanged,\n}: UseDateInputDependencies<T, D>): {\n  rootRef: React.RefObject<HTMLDivElement | null>;\n  calendarRef: React.RefObject<HTMLDivElement | null>;\n  open: boolean;\n  openCalendar: () => void;\n  closeCalendar: () => void;\n  internalValue: string[];\n  focusedElement: number | null;\n  setFocusedElement: React.Dispatch<React.SetStateAction<number | null>>;\n  handleKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n  clear: () => void;\n  handleFieldEnter: () => void;\n  removeFocusFromField: () => void;\n} {\n  const { document } = useDOM();\n  const { value: open, setTrue: openCalendar, setFalse: closeCalendar } = useBooleanState(false);\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const calendarRef = React.useRef<HTMLDivElement | null>(null);\n  const [internalValue, setInternalValue] = React.useState<string[]>([]);\n  const [focusedElement, setFocusedElement] = React.useState<number | null>(null);\n  const { window } = useDOM();\n\n  const _onCalendarClose = useCallback(() => {\n    if (open) {\n      closeCalendar();\n      onCalendarOpenChanged?.(false);\n    }\n  }, [closeCalendar, onCalendarOpenChanged, open]);\n\n  const _onCalendarOpen = useCallback(() => {\n    if (!open) {\n      openCalendar();\n      onCalendarOpenChanged?.(true);\n    }\n  }, [onCalendarOpenChanged, open, openCalendar]);\n\n  const removeFocusFromField = React.useCallback(() => {\n    if (focusedElement !== null) {\n      setFocusedElement(null);\n      _onCalendarClose();\n      window!.getSelection()?.removeAllRanges();\n      setInternalValue(getInternalValue(value));\n    }\n  }, [focusedElement, _onCalendarClose, window, getInternalValue, value]);\n\n  const handleClickOutside = React.useCallback(\n    (e: MouseEvent) => {\n      if (\n        !rootRef.current?.contains(e.target as Node | null) &&\n        !calendarRef.current?.contains(e.target as Node | null)\n      ) {\n        removeFocusFromField();\n      }\n    },\n    [removeFocusFromField],\n  );\n\n  const selectFirst = React.useCallback(() => {\n    setFocusedElement(0);\n  }, []);\n\n  useGlobalEventListener(document, 'click', handleClickOutside, {\n    capture: true,\n  });\n\n  React.useEffect(() => {\n    setInternalValue(getInternalValue(value));\n  }, [getInternalValue, value]);\n\n  React.useEffect(() => {\n    if (autoFocus) {\n      selectFirst();\n    }\n  }, [autoFocus, selectFirst]);\n\n  React.useEffect(() => {\n    if (disabled || focusedElement === null) {\n      return;\n    }\n\n    const range = window!.document.createRange();\n\n    let element = refs[focusedElement].current;\n\n    if (element) {\n      element.focus();\n      _onCalendarOpen();\n      range.selectNodeContents(element as Node);\n\n      const selection = window!.getSelection();\n      selection?.removeAllRanges();\n      selection?.addRange(range);\n    }\n  }, [disabled, focusedElement, _onCalendarOpen, refs, window]);\n\n  const clear = React.useCallback(() => {\n    onChange?.(undefined);\n    selectFirst();\n  }, [onChange, selectFirst]);\n\n  const handleFieldEnter = React.useCallback(() => {\n    if (!open) {\n      selectFirst();\n    }\n  }, [open, selectFirst]);\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLSpanElement>) => {\n      if (focusedElement === null) {\n        return;\n      }\n\n      const _value = [...internalValue];\n      const config = elementsConfig(focusedElement);\n\n      if (/^\\d+$/.test(e.key)) {\n        if (_value[focusedElement].length >= config.length) {\n          _value[focusedElement] = e.key;\n        } else {\n          _value[focusedElement] += e.key;\n          if (_value[focusedElement].length >= config.length && focusedElement < maxElement) {\n            setFocusedElement(focusedElement + 1);\n          }\n        }\n      } else if (e.key === 'Backspace') {\n        if (!_value[focusedElement]) {\n          setFocusedElement(focusedElement <= 0 ? maxElement : focusedElement - 1);\n        } else {\n          _value[focusedElement] = _value[focusedElement].slice(0, -1);\n        }\n      } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n        let currentValue = Number(_value[focusedElement]);\n        _value[focusedElement] = String(\n          currentValue <= config.min ? config.max : currentValue - 1,\n        ).padStart(config.length, '0');\n      } else if (e.key === 'ArrowUp' || e.key === 'Up') {\n        let currentValue = Number(_value[focusedElement]);\n        _value[focusedElement] = String(\n          currentValue >= config.max ? config.min : currentValue + 1,\n        ).padStart(config.length, '0');\n      } else if (\n        e.key === 'Enter' ||\n        (e.key === 'Tab' && focusedElement === maxElement) ||\n        (e.key === 'Tab' && e.shiftKey && focusedElement === 0)\n      ) {\n        removeFocusFromField();\n        return;\n      } else if (e.key === 'ArrowLeft' || e.key === 'Left' || (e.key === 'Tab' && e.shiftKey)) {\n        setFocusedElement(focusedElement <= 0 ? maxElement : focusedElement - 1);\n      } else if (e.key === 'ArrowRight' || e.key === 'Right' || e.key === 'Tab') {\n        setFocusedElement(focusedElement >= maxElement ? 0 : focusedElement + 1);\n      } else if (e.key === 'Delete' || e.key === 'Del') {\n        _value[focusedElement] = '';\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      setInternalValue(_value);\n      onInternalValueChange(_value);\n    },\n    [\n      elementsConfig,\n      focusedElement,\n      internalValue,\n      maxElement,\n      onInternalValueChange,\n      removeFocusFromField,\n    ],\n  );\n\n  return {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar: _onCalendarOpen,\n    closeCalendar: _onCalendarClose,\n    internalValue,\n    focusedElement,\n    setFocusedElement,\n    handleKeyDown,\n    clear,\n    handleFieldEnter,\n    removeFocusFromField,\n  };\n}\n"],"names":["useCallback","React","useDOM","useBooleanState","useGlobalEventListener","useDateInput","maxElement","refs","autoFocus","disabled","elementsConfig","onChange","onInternalValueChange","getInternalValue","value","onCalendarOpenChanged","document","open","setTrue","openCalendar","setFalse","closeCalendar","rootRef","useRef","calendarRef","internalValue","setInternalValue","useState","focusedElement","setFocusedElement","window","_onCalendarClose","_onCalendarOpen","removeFocusFromField","getSelection","removeAllRanges","handleClickOutside","e","current","contains","target","selectFirst","capture","useEffect","range","createRange","element","focus","selectNodeContents","selection","addRange","clear","undefined","handleFieldEnter","handleKeyDown","_value","config","test","key","length","slice","currentValue","Number","String","min","max","padStart","shiftKey","preventDefault"],"mappings":"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"}
+{"version":3,"sources":["../../../src/hooks/useDateInput.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport * as React from 'react';\nimport { useDOM } from '../lib/dom';\nimport { useBooleanState } from './useBooleanState';\nimport { useGlobalEventListener } from './useGlobalEventListener';\n\nexport interface UseDateInputDependencies<T, D> {\n  maxElement: number;\n  refs: Array<React.RefObject<T | null>>;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  value?: D | null;\n  elementsConfig: (index: number) => {\n    length: number;\n    min: number;\n    max: number;\n  };\n  onInternalValueChange: (value: string[]) => void;\n  getInternalValue: (value?: D | null | undefined) => string[];\n  onClear: () => void;\n  onCalendarOpenChanged?: (opened: boolean) => void;\n}\n\nexport function useDateInput<T extends HTMLElement, D>({\n  maxElement,\n  refs,\n  autoFocus,\n  disabled,\n  elementsConfig,\n  onClear,\n  onInternalValueChange,\n  getInternalValue,\n  value,\n  onCalendarOpenChanged,\n}: UseDateInputDependencies<T, D>): {\n  rootRef: React.RefObject<HTMLDivElement | null>;\n  calendarRef: React.RefObject<HTMLDivElement | null>;\n  open: boolean;\n  openCalendar: () => void;\n  closeCalendar: () => void;\n  internalValue: string[];\n  focusedElement: number | null;\n  setFocusedElement: React.Dispatch<React.SetStateAction<number | null>>;\n  handleKeyDown: (e: React.KeyboardEvent<HTMLSpanElement>) => void;\n  clear: () => void;\n  handleFieldEnter: () => void;\n  removeFocusFromField: () => void;\n} {\n  const { document } = useDOM();\n  const { value: open, setTrue: openCalendar, setFalse: closeCalendar } = useBooleanState(false);\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const calendarRef = React.useRef<HTMLDivElement | null>(null);\n  const [internalValue, setInternalValue] = React.useState<string[]>([]);\n  const [focusedElement, setFocusedElement] = React.useState<number | null>(null);\n  const { window } = useDOM();\n\n  const _onCalendarClose = useCallback(() => {\n    if (open) {\n      closeCalendar();\n      onCalendarOpenChanged?.(false);\n    }\n  }, [closeCalendar, onCalendarOpenChanged, open]);\n\n  const _onCalendarOpen = useCallback(() => {\n    if (!open) {\n      openCalendar();\n      onCalendarOpenChanged?.(true);\n    }\n  }, [onCalendarOpenChanged, open, openCalendar]);\n\n  const removeFocusFromField = React.useCallback(() => {\n    if (focusedElement !== null) {\n      setFocusedElement(null);\n      _onCalendarClose();\n      window!.getSelection()?.removeAllRanges();\n      setInternalValue(getInternalValue(value));\n    }\n  }, [focusedElement, _onCalendarClose, window, getInternalValue, value]);\n\n  const handleClickOutside = React.useCallback(\n    (e: MouseEvent) => {\n      if (\n        !rootRef.current?.contains(e.target as Node | null) &&\n        !calendarRef.current?.contains(e.target as Node | null)\n      ) {\n        removeFocusFromField();\n      }\n    },\n    [removeFocusFromField],\n  );\n\n  const selectFirst = React.useCallback(() => {\n    setFocusedElement(0);\n  }, []);\n\n  useGlobalEventListener(document, 'click', handleClickOutside, {\n    capture: true,\n  });\n\n  React.useEffect(() => {\n    setInternalValue(getInternalValue(value));\n  }, [getInternalValue, value]);\n\n  React.useEffect(() => {\n    if (autoFocus) {\n      selectFirst();\n    }\n  }, [autoFocus, selectFirst]);\n\n  React.useEffect(() => {\n    if (disabled || focusedElement === null) {\n      return;\n    }\n\n    const range = window!.document.createRange();\n\n    let element = refs[focusedElement].current;\n\n    if (element) {\n      element.focus();\n      _onCalendarOpen();\n      range.selectNodeContents(element as Node);\n\n      const selection = window!.getSelection();\n      selection?.removeAllRanges();\n      selection?.addRange(range);\n    }\n  }, [disabled, focusedElement, _onCalendarOpen, refs, window]);\n\n  const clear = React.useCallback(() => {\n    onClear?.();\n    selectFirst();\n  }, [onClear, selectFirst]);\n\n  const handleFieldEnter = React.useCallback(() => {\n    if (!open) {\n      selectFirst();\n    }\n  }, [open, selectFirst]);\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<HTMLSpanElement>) => {\n      if (focusedElement === null) {\n        return;\n      }\n\n      const _value = [...internalValue];\n      const config = elementsConfig(focusedElement);\n\n      if (/^\\d+$/.test(e.key)) {\n        if (_value[focusedElement].length >= config.length) {\n          _value[focusedElement] = e.key;\n        } else {\n          _value[focusedElement] += e.key;\n          if (_value[focusedElement].length >= config.length && focusedElement < maxElement) {\n            setFocusedElement(focusedElement + 1);\n          }\n        }\n      } else if (e.key === 'Backspace') {\n        if (!_value[focusedElement]) {\n          setFocusedElement(focusedElement <= 0 ? maxElement : focusedElement - 1);\n        } else {\n          _value[focusedElement] = _value[focusedElement].slice(0, -1);\n        }\n      } else if (e.key === 'ArrowDown' || e.key === 'Down') {\n        let currentValue = Number(_value[focusedElement]);\n        _value[focusedElement] = String(\n          currentValue <= config.min ? config.max : currentValue - 1,\n        ).padStart(config.length, '0');\n      } else if (e.key === 'ArrowUp' || e.key === 'Up') {\n        let currentValue = Number(_value[focusedElement]);\n        _value[focusedElement] = String(\n          currentValue >= config.max ? config.min : currentValue + 1,\n        ).padStart(config.length, '0');\n      } else if (\n        e.key === 'Enter' ||\n        (e.key === 'Tab' && focusedElement === maxElement) ||\n        (e.key === 'Tab' && e.shiftKey && focusedElement === 0)\n      ) {\n        removeFocusFromField();\n        return;\n      } else if (e.key === 'ArrowLeft' || e.key === 'Left' || (e.key === 'Tab' && e.shiftKey)) {\n        setFocusedElement(focusedElement <= 0 ? maxElement : focusedElement - 1);\n      } else if (e.key === 'ArrowRight' || e.key === 'Right' || e.key === 'Tab') {\n        setFocusedElement(focusedElement >= maxElement ? 0 : focusedElement + 1);\n      } else if (e.key === 'Delete' || e.key === 'Del') {\n        _value[focusedElement] = '';\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      setInternalValue(_value);\n      onInternalValueChange(_value);\n    },\n    [\n      elementsConfig,\n      focusedElement,\n      internalValue,\n      maxElement,\n      onInternalValueChange,\n      removeFocusFromField,\n    ],\n  );\n\n  return {\n    rootRef,\n    calendarRef,\n    open,\n    openCalendar: _onCalendarOpen,\n    closeCalendar: _onCalendarClose,\n    internalValue,\n    focusedElement,\n    setFocusedElement,\n    handleKeyDown,\n    clear,\n    handleFieldEnter,\n    removeFocusFromField,\n  };\n}\n"],"names":["useCallback","React","useDOM","useBooleanState","useGlobalEventListener","useDateInput","maxElement","refs","autoFocus","disabled","elementsConfig","onClear","onInternalValueChange","getInternalValue","value","onCalendarOpenChanged","document","open","setTrue","openCalendar","setFalse","closeCalendar","rootRef","useRef","calendarRef","internalValue","setInternalValue","useState","focusedElement","setFocusedElement","window","_onCalendarClose","_onCalendarOpen","removeFocusFromField","getSelection","removeAllRanges","handleClickOutside","e","current","contains","target","selectFirst","capture","useEffect","range","createRange","element","focus","selectNodeContents","selection","addRange","clear","handleFieldEnter","handleKeyDown","_value","config","test","key","length","slice","currentValue","Number","String","min","max","padStart","shiftKey","preventDefault"],"mappings":"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"}

package/dist/cssm/hooks/useFloatingElement.js

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { useMemo } from "react";
+import { useFloatingMiddlewaresBootstrap, useFloatingWithInteractions, usePlacementChangeCallback } from "../lib/floating/index.js";
+import { useReferenceHiddenChangeCallback } from "../lib/floating/useReferenceHiddenChangeCallback.js";
+import { useExternRef } from "./useExternRef.js";
+import { useGlobalEscKeyDown } from "./useGlobalEscKeyDown.js";
+export const useFloatingElement = ({ // useFloatingMiddlewaresBootstrap
+placement = 'bottom-start', arrow, arrowHeight, arrowPadding, sameWidth, offsetByMainAxis = 0, offsetByCrossAxis = 0, customMiddlewares, hideWhenReferenceHidden, disableFlipMiddleware = false, // useFloatingWithInteractions
+trigger, hoverDelay, closeAfterClick, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, defaultShown, shown: shownProp, onShownChange, onShownChanged, strategy, onReferenceHiddenChange, onPlacementChange, renderFloatingComponent, externalFloatingElementRef, remapReferenceProps })=>{
+    const [arrowRef, setArrowRef] = React.useState(null);
+    const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
+        placement,
+        offsetByMainAxis,
+        offsetByCrossAxis,
+        customMiddlewares,
+        hideWhenReferenceHidden,
+        sameWidth,
+        arrow,
+        arrowRef,
+        arrowPadding,
+        arrowHeight,
+        disableFlipMiddleware
+    });
+    const { placement: resolvedPlacement, shown, willBeHide, refs, referenceProps, floatingProps, middlewareData, onClose, onRestoreFocus, onEscapeKeyDown } = useFloatingWithInteractions({
+        middlewares,
+        strategy,
+        placement: strictPlacement,
+        trigger,
+        hoverDelay,
+        closeAfterClick,
+        disabled,
+        disableInteractive,
+        disableCloseOnClickOutside,
+        disableCloseOnEscKey,
+        defaultShown,
+        shown: shownProp,
+        onShownChange,
+        onShownChanged
+    });
+    const resultRef = useExternRef(externalFloatingElementRef, refs.setFloating);
+    usePlacementChangeCallback(placement, resolvedPlacement, onPlacementChange);
+    useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);
+    const component = renderFloatingComponent({
+        shown,
+        willBeHide,
+        floatingProps,
+        floatingRef: resultRef,
+        middlewareData,
+        placement: resolvedPlacement,
+        onClose,
+        onRestoreFocus,
+        setArrowRef
+    });
+    useGlobalEscKeyDown(shown, onEscapeKeyDown);
+    const remappedReferenceProps = useMemo(()=>remapReferenceProps ? remapReferenceProps({
+            ...referenceProps,
+            shown
+        }) : referenceProps, [
+        remapReferenceProps,
+        shown,
+        referenceProps
+    ]);
+    return {
+        anchorRef: refs.setReference,
+        anchorProps: remappedReferenceProps,
+        component
+    };
+};
+
+//# sourceMappingURL=useFloatingElement.js.map

package/dist/cssm/hooks/useFloatingElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useFloatingElement.tsx"],"sourcesContent":["import * as React from 'react';\nimport { type Ref, useMemo } from 'react';\nimport {\n  type OnPlacementChange,\n  useFloatingMiddlewaresBootstrap,\n  type UseFloatingMiddlewaresBootstrapOptions,\n  useFloatingWithInteractions,\n  type UseFloatingWithInteractionsProps,\n  type UseFloatingWithInteractionsReturn,\n  usePlacementChangeCallback,\n} from '../lib/floating';\nimport { type ReferenceProps } from '../lib/floating/useFloatingWithInteractions/types';\nimport { useReferenceHiddenChangeCallback } from '../lib/floating/useReferenceHiddenChangeCallback';\nimport { useExternRef } from './useExternRef';\nimport { useGlobalEscKeyDown } from './useGlobalEscKeyDown';\n\nexport type FloatingComponentProps<FloatingElement extends HTMLElement = HTMLElement> = Pick<\n  UseFloatingWithInteractionsReturn,\n  | 'shown'\n  | 'willBeHide'\n  | 'floatingProps'\n  | 'middlewareData'\n  | 'onClose'\n  | 'onRestoreFocus'\n  | 'placement'\n> & {\n  floatingRef: React.Ref<FloatingElement>;\n  setArrowRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n};\n\nexport type RenderFloatingComponentFn<FloatingElement extends HTMLElement = HTMLElement> = (\n  props: FloatingComponentProps<FloatingElement>,\n) => React.ReactNode | null;\n\nexport type RemapReferencePropsFn<ReferenceElement extends HTMLElement = HTMLElement> = (\n  props: ReferenceProps<ReferenceElement> & { shown: boolean },\n) => ReferenceProps<ReferenceElement>;\n\nexport type UseFloatingElementProps<\n  FloatingElement extends HTMLElement = HTMLElement,\n  ReferenceElement extends HTMLElement = HTMLElement,\n> = Omit<UseFloatingMiddlewaresBootstrapOptions, 'arrowRef'> &\n  Omit<UseFloatingWithInteractionsProps, 'placement'> & {\n    onPlacementChange?: OnPlacementChange;\n    onReferenceHiddenChange?: (hidden: boolean) => void;\n    renderFloatingComponent: RenderFloatingComponentFn<FloatingElement>;\n    remapReferenceProps?: RemapReferencePropsFn<ReferenceElement>;\n    externalFloatingElementRef?: React.Ref<FloatingElement>;\n  };\n\nexport type UseFloatingResult<ReferenceElement extends HTMLElement = HTMLElement> = {\n  anchorRef: Ref<ReferenceElement>;\n  anchorProps: ReferenceProps<ReferenceElement>;\n  component: React.ReactNode | null;\n};\n\nexport const useFloatingElement = <\n  ReferenceElement extends HTMLElement = HTMLElement,\n  FloatingElement extends HTMLElement = HTMLElement,\n>({\n  // useFloatingMiddlewaresBootstrap\n  placement = 'bottom-start',\n  arrow,\n  arrowHeight,\n  arrowPadding,\n  sameWidth,\n  offsetByMainAxis = 0,\n  offsetByCrossAxis = 0,\n  customMiddlewares,\n  hideWhenReferenceHidden,\n  disableFlipMiddleware = false,\n\n  // useFloatingWithInteractions\n  trigger,\n  hoverDelay,\n  closeAfterClick,\n  disabled,\n  disableInteractive,\n  disableCloseOnClickOutside,\n  disableCloseOnEscKey,\n  defaultShown,\n  shown: shownProp,\n  onShownChange,\n  onShownChanged,\n  strategy,\n  onReferenceHiddenChange,\n\n  onPlacementChange,\n\n  renderFloatingComponent,\n  externalFloatingElementRef,\n  remapReferenceProps,\n}: UseFloatingElementProps<\n  FloatingElement,\n  ReferenceElement\n>): UseFloatingResult<ReferenceElement> => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({\n    placement,\n    offsetByMainAxis,\n    offsetByCrossAxis,\n    customMiddlewares,\n    hideWhenReferenceHidden,\n    sameWidth,\n    arrow,\n    arrowRef,\n    arrowPadding,\n    arrowHeight,\n    disableFlipMiddleware,\n  });\n\n  const {\n    placement: resolvedPlacement,\n    shown,\n    willBeHide,\n    refs,\n    referenceProps,\n    floatingProps,\n    middlewareData,\n    onClose,\n    onRestoreFocus,\n    onEscapeKeyDown,\n  } = useFloatingWithInteractions({\n    middlewares,\n    strategy,\n    placement: strictPlacement,\n    trigger,\n    hoverDelay,\n    closeAfterClick,\n    disabled,\n    disableInteractive,\n    disableCloseOnClickOutside,\n    disableCloseOnEscKey,\n    defaultShown,\n    shown: shownProp,\n    onShownChange,\n    onShownChanged,\n  });\n\n  const resultRef = useExternRef<FloatingElement>(externalFloatingElementRef, refs.setFloating);\n\n  usePlacementChangeCallback(placement, resolvedPlacement, onPlacementChange);\n\n  useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);\n\n  const component = renderFloatingComponent({\n    shown,\n    willBeHide,\n    floatingProps,\n    floatingRef: resultRef,\n    middlewareData,\n    placement: resolvedPlacement,\n    onClose,\n    onRestoreFocus,\n    setArrowRef,\n  });\n\n  useGlobalEscKeyDown(shown, onEscapeKeyDown);\n\n  const remappedReferenceProps = useMemo(\n    () =>\n      remapReferenceProps ? remapReferenceProps({ ...referenceProps, shown }) : referenceProps,\n    [remapReferenceProps, shown, referenceProps],\n  );\n\n  return {\n    anchorRef: refs.setReference,\n    anchorProps: remappedReferenceProps,\n    component,\n  };\n};\n"],"names":["React","useMemo","useFloatingMiddlewaresBootstrap","useFloatingWithInteractions","usePlacementChangeCallback","useReferenceHiddenChangeCallback","useExternRef","useGlobalEscKeyDown","useFloatingElement","placement","arrow","arrowHeight","arrowPadding","sameWidth","offsetByMainAxis","offsetByCrossAxis","customMiddlewares","hideWhenReferenceHidden","disableFlipMiddleware","trigger","hoverDelay","closeAfterClick","disabled","disableInteractive","disableCloseOnClickOutside","disableCloseOnEscKey","defaultShown","shown","shownProp","onShownChange","onShownChanged","strategy","onReferenceHiddenChange","onPlacementChange","renderFloatingComponent","externalFloatingElementRef","remapReferenceProps","arrowRef","setArrowRef","useState","middlewares","strictPlacement","resolvedPlacement","willBeHide","refs","referenceProps","floatingProps","middlewareData","onClose","onRestoreFocus","onEscapeKeyDown","resultRef","setFloating","hide","component","floatingRef","remappedReferenceProps","anchorRef","setReference","anchorProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmBC,OAAO,QAAQ,QAAQ;AAC1C,SAEEC,+BAA+B,EAE/BC,2BAA2B,EAG3BC,0BAA0B,QACrB,2BAAkB;AAEzB,SAASC,gCAAgC,QAAQ,sDAAmD;AACpG,SAASC,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,mBAAmB,QAAQ,2BAAwB;AA0C5D,OAAO,MAAMC,qBAAqB,CAGhC,EACA,kCAAkC;AAClCC,YAAY,cAAc,EAC1BC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,SAAS,EACTC,mBAAmB,CAAC,EACpBC,oBAAoB,CAAC,EACrBC,iBAAiB,EACjBC,uBAAuB,EACvBC,wBAAwB,KAAK,EAE7B,8BAA8B;AAC9BC,OAAO,EACPC,UAAU,EACVC,eAAe,EACfC,QAAQ,EACRC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,YAAY,EACZC,OAAOC,SAAS,EAChBC,aAAa,EACbC,cAAc,EACdC,QAAQ,EACRC,uBAAuB,EAEvBC,iBAAiB,EAEjBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,mBAAmB,EAIpB;IACC,MAAM,CAACC,UAAUC,YAAY,GAAGtC,MAAMuC,QAAQ,CAAwB;IAEtE,MAAM,EAAEC,WAAW,EAAEC,eAAe,EAAE,GAAGvC,gCAAgC;QACvEO;QACAK;QACAC;QACAC;QACAC;QACAJ;QACAH;QACA2B;QACAzB;QACAD;QACAO;IACF;IAEA,MAAM,EACJT,WAAWiC,iBAAiB,EAC5Bf,KAAK,EACLgB,UAAU,EACVC,IAAI,EACJC,cAAc,EACdC,aAAa,EACbC,cAAc,EACdC,OAAO,EACPC,cAAc,EACdC,eAAe,EAChB,GAAG/C,4BAA4B;QAC9BqC;QACAT;QACAtB,WAAWgC;QACXtB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC,OAAOC;QACPC;QACAC;IACF;IAEA,MAAMqB,YAAY7C,aAA8B6B,4BAA4BS,KAAKQ,WAAW;IAE5FhD,2BAA2BK,WAAWiC,mBAAmBT;IAEzD5B,iCAAiC0C,eAAeM,IAAI,EAAErB;IAEtD,MAAMsB,YAAYpB,wBAAwB;QACxCP;QACAgB;QACAG;QACAS,aAAaJ;QACbJ;QACAtC,WAAWiC;QACXM;QACAC;QACAX;IACF;IAEA/B,oBAAoBoB,OAAOuB;IAE3B,MAAMM,yBAAyBvD,QAC7B,IACEmC,sBAAsBA,oBAAoB;YAAE,GAAGS,cAAc;YAAElB;QAAM,KAAKkB,gBAC5E;QAACT;QAAqBT;QAAOkB;KAAe;IAG9C,OAAO;QACLY,WAAWb,KAAKc,YAAY;QAC5BC,aAAaH;QACbF;IACF;AACF,EAAE"}

package/dist/cssm/hooks/useFocusVisible.js

@@ -1,7 +1,16 @@
 import { useCallback, useContext, useState } from "react";
 import { AppRootContext } from "../components/AppRoot/AppRootContext.js";
-export function useFocusVisible(withKeyboardInputCheck = true) {
+/**
+ * Определяет фокус элемента, когда его наличие необходимо обозначить визуально.
+ *
+ * Этот хук полезен для обозначения фокуса, когда для навигации используется
+ * клавиатура
+ *
+ * @since 7.2.0
+ */ export function useFocusVisible() {
     const [isFocused, setIsFocused] = useState(false);
+    // FIXME: Избавиться от чека контекста, так как без AppRoot не работает фокус
+    const withKeyboardInputCheck = true;
     const { keyboardInput } = useContext(AppRootContext);
     const onFocus = useCallback((event)=>{
         event.stopPropagation();

package/dist/cssm/hooks/useFocusVisible.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/hooks/useFocusVisible.ts"],"sourcesContent":["import { type FocusEvent, useCallback, useContext, useState } from 'react';\nimport { AppRootContext } from '../components/AppRoot/AppRootContext';\n\nexport function useFocusVisible(withKeyboardInputCheck = true): {\n  focusVisible: boolean;\n  onFocus: (event: FocusEvent<HTMLElement>) => void;\n  onBlur: (event: FocusEvent<HTMLElement>) => void;\n} {\n  const [isFocused, setIsFocused] = useState(false);\n  const { keyboardInput } = useContext(AppRootContext);\n\n  const onFocus = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(true);\n    },\n    [setIsFocused],\n  );\n\n  const onBlur = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(false);\n    },\n    [setIsFocused],\n  );\n\n  const focusVisible = withKeyboardInputCheck ? keyboardInput && isFocused : isFocused;\n\n  return {\n    focusVisible,\n    onFocus,\n    onBlur,\n  };\n}\n"],"names":["useCallback","useContext","useState","AppRootContext","useFocusVisible","withKeyboardInputCheck","isFocused","setIsFocused","keyboardInput","onFocus","event","stopPropagation","onBlur","focusVisible"],"mappings":"AAAA,SAA0BA,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC3E,SAASC,cAAc,QAAQ,0CAAuC;AAEtE,OAAO,SAASC,gBAAgBC,yBAAyB,IAAI;IAK3D,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAC3C,MAAM,EAAEM,aAAa,EAAE,GAAGP,WAAWE;IAErC,MAAMM,UAAUT,YACd,CAACU;QACCA,MAAMC,eAAe;QACrBJ,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMK,SAASZ,YACb,CAACU;QACCA,MAAMC,eAAe;QACrBJ,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMM,eAAeR,yBAAyBG,iBAAiBF,YAAYA;IAE3E,OAAO;QACLO;QACAJ;QACAG;IACF;AACF"}
+{"version":3,"sources":["../../../src/hooks/useFocusVisible.ts"],"sourcesContent":["import { type FocusEvent, useCallback, useContext, useState } from 'react';\nimport { AppRootContext } from '../components/AppRoot/AppRootContext';\n\n/**\n * Определяет фокус элемента, когда его наличие необходимо обозначить визуально.\n *\n * Этот хук полезен для обозначения фокуса, когда для навигации используется\n * клавиатура\n *\n * @since 7.2.0\n */\nexport function useFocusVisible(): {\n  focusVisible: boolean;\n  onFocus: (event: FocusEvent<HTMLElement>) => void;\n  onBlur: (event: FocusEvent<HTMLElement>) => void;\n} {\n  const [isFocused, setIsFocused] = useState(false);\n\n  // FIXME: Избавиться от чека контекста, так как без AppRoot не работает фокус\n  const withKeyboardInputCheck = true;\n  const { keyboardInput } = useContext(AppRootContext);\n\n  const onFocus = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(true);\n    },\n    [setIsFocused],\n  );\n\n  const onBlur = useCallback(\n    (event: FocusEvent<HTMLElement>) => {\n      event.stopPropagation();\n      setIsFocused(false);\n    },\n    [setIsFocused],\n  );\n\n  const focusVisible = withKeyboardInputCheck ? keyboardInput && isFocused : isFocused;\n\n  return {\n    focusVisible,\n    onFocus,\n    onBlur,\n  };\n}\n"],"names":["useCallback","useContext","useState","AppRootContext","useFocusVisible","isFocused","setIsFocused","withKeyboardInputCheck","keyboardInput","onFocus","event","stopPropagation","onBlur","focusVisible"],"mappings":"AAAA,SAA0BA,WAAW,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC3E,SAASC,cAAc,QAAQ,0CAAuC;AAEtE;;;;;;;CAOC,GACD,OAAO,SAASC;IAKd,MAAM,CAACC,WAAWC,aAAa,GAAGJ,SAAS;IAE3C,6EAA6E;IAC7E,MAAMK,yBAAyB;IAC/B,MAAM,EAAEC,aAAa,EAAE,GAAGP,WAAWE;IAErC,MAAMM,UAAUT,YACd,CAACU;QACCA,MAAMC,eAAe;QACrBL,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMM,SAASZ,YACb,CAACU;QACCA,MAAMC,eAAe;QACrBL,aAAa;IACf,GACA;QAACA;KAAa;IAGhB,MAAMO,eAAeN,yBAAyBC,iBAAiBH,YAAYA;IAE3E,OAAO;QACLQ;QACAJ;QACAG;IACF;AACF"}