@vkontakte/vkui 6.0.0-beta.2 → 6.0.0-beta.3

package/README.md

@@ -1,5 +1,7 @@
+<!-- TODO [>=6] Удалить пути до 6.0.0-beta.3  -->
+
 <h1 align="center">
-  <a href="https://vkcom.github.io/VKUI/">
+  <a href="https://vkcom.github.io/VKUI/6.0.0-beta.3/">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/VKCOM/VKUI/d72dcc219bc4b441b2740b69d9343aea14d66c7f/docs/assets/vkui-logo-light.svg">
       <img src="https://raw.githubusercontent.com/VKCOM/VKUI/d72dcc219bc4b441b2740b69d9343aea14d66c7f/docs/assets/vkui-logo-dark.svg" width="150" alt="VKUI logo" />
@@ -12,9 +14,9 @@
 </p>
 <p align="center">
 VKUI — это библиотека адаптивных React-компонентов<br> для создания веб-приложений.<br>
-Библиотека основана на <a href="https://www.figma.com/@vk">дизайн-системе ВКонтакте</a> и реализует её интерфейсы для различных платформ.<br>
+Библиотека основана на <a href="https://www.figma.com/@vk">дизайн-системе VK</a> и реализует её интерфейсы для различных платформ.<br>
 Релизы: <a href="https://github.com/VKCOM/VKUI/releases">https://github.com/VKCOM/VKUI/releases</a>.<br>
-Гайд по миграции <a href="https://vkcom.github.io/VKUI/#/Migration">на версию 5</a>.
+Гайд по миграции <a href="https://vkcom.github.io/VKUI/6.0.0-beta.3/#/Migrations">на версию 6</a>.
 </p>
 
 ## Установка
@@ -60,9 +62,11 @@ import {
 import '@vkontakte/vkui/dist/vkui.css';
 
 const Example = () => {
+  const platform = usePlatform();
+
   return (
     <AppRoot>
-      <SplitLayout header={<PanelHeader separator={false} />}>
+      <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />}>
         <SplitCol autoSpaced>
           <View activePanel="main">
             <Panel id="main">
@@ -100,7 +104,7 @@ root.render(
 
 ## Документация
 
-В [документации](https://vkcom.github.io/VKUI/) вы сможете найти информацию об использовании компонентов и утилит.
+В [документации](https://vkcom.github.io/VKUI/6.0.0-beta.3/) вы сможете найти информацию об использовании компонентов и утилит.
 
 ## Сообщить о проблеме
 

package/dist/cjs/components/ActionSheet/ActionSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,qBAAqB,GAAG,WAAW,CAAC,EAClF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,OAAO,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAClD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6HAWrB,gBAAgB,sBAsGlB,CAAC"}
+{"version":3,"file":"ActionSheet.d.ts","sourceRoot":"","sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,eAAe,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAAC;AAC/D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,mBAAmB,EAAE,WAAW,GAAG,qBAAqB,GAAG,WAAW,CAAC,EAClF,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,OAAO,EAAE,yBAAyB,GAAG,IAAI,CAAC;IAClD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,6HAWrB,gBAAgB,sBAqGlB,CAAC"}

package/dist/cjs/components/ActionSheet/ActionSheet.js

@@ -115,7 +115,6 @@ const ActionSheet = (_param)=>{
         className: className,
         style: style,
         onClick: onClose,
-        hasMask: true,
         fixed: true
     }, actionSheet);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose(options: ActionSheetOnCloseOptions): void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onClose = () => setClosingBy('other');\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose({ closedBy: closingBy || 'other' });\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  let timeout = platform === 'ios' ? 300 : 200;\n\n  if (mode === 'menu') {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closingBy) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closingBy, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          _action.current = () => action && action(event);\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, mode });\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles['ActionSheet__content-wrapper']}>\n          {(header || text) && (\n            <div className={styles['ActionSheet__header']}>\n              {header && (\n                <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                  {header}\n                </Footnote>\n              )}\n              {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles['ActionSheet__close-item-wrapper--ios']}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (mode === 'menu') {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["ActionSheet","children","className","header","text","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","restProps","platform","usePlatform","closingBy","setClosingBy","React","useState","undefined","onClose","_action","useRef","noop","afterClose","closedBy","current","isDesktop","useAdaptivityWithJSMediaQueries","useScrollLock","timeout","fallbackTransitionFinish","useTimeout","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","useObjectMemo","DropdownComponent","ActionSheetDropdownMenu","ActionSheetDropdownSheet","dropdownProps","Object","assign","actionSheet","ActionSheetContext","Provider","value","closing","Boolean","div","Footnote","weight","ActionSheetDefaultIosCloseItem","PopoutWrapper","alignY","onClick","hasMask","fixed"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<SharedDropdownProps, 'toggleRef' | 'popupOffsetDistance' | 'placement'>,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose(options: ActionSheetOnCloseOptions): void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onClose = () => setClosingBy('other');\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose({ closedBy: closingBy || 'other' });\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  let timeout = platform === 'ios' ? 300 : 200;\n\n  if (mode === 'menu') {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closingBy) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closingBy, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          _action.current = () => action && action(event);\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, mode });\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles['ActionSheet__content-wrapper']}>\n          {(header || text) && (\n            <div className={styles['ActionSheet__header']}>\n              {header && (\n                <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                  {header}\n                </Footnote>\n              )}\n              {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles['ActionSheet__close-item-wrapper--ios']}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (mode === 'menu') {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["ActionSheet","children","className","header","text","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","restProps","platform","usePlatform","closingBy","setClosingBy","React","useState","undefined","onClose","_action","useRef","noop","afterClose","closedBy","current","isDesktop","useAdaptivityWithJSMediaQueries","useScrollLock","timeout","fallbackTransitionFinish","useTimeout","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","useObjectMemo","DropdownComponent","ActionSheetDropdownMenu","ActionSheetDropdownSheet","dropdownProps","Object","assign","actionSheet","ActionSheetContext","Provider","value","closing","Boolean","div","Footnote","weight","ActionSheetDefaultIosCloseItem","PopoutWrapper","alignY","onClick","fixed"],"mappings":";;;;+BAwCaA;;;eAAAA;;;;;;;iEAxCU;sBACF;iDAC2B;+BAClB;6BACF;4BACD;+BACG;+BACA;0BACL;oCAC4B;gDACN;yCACP;0CACC;AA4BlC,MAAMA,cAAc;QAAC,EAC1BC,QAAQ,EACRC,SAAS,EACTC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,YAAY,EACZC,mBAAmB,EACnBC,SAAS,EACTC,MAAMC,QAAQ,EAEG,WADdC;QATHV;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAMG,WAAWC,IAAAA,wBAAW;IAC5B,MAAM,CAACC,WAAWC,aAAa,GAAGC,OAAMC,QAAQ,CAA8BC;IAC9E,MAAMC,UAAU,IAAMJ,aAAa;IACnC,MAAMK,UAAUJ,OAAMK,MAAM,CAACC,UAAI;IAEjC,MAAMC,aAAa;QACjBZ,UAAUQ,OAAO,CAAC;YAAEK,UAAUV,aAAa;QAAQ;QACnDM,QAAQK,OAAO;QACfL,QAAQK,OAAO,GAAGH,UAAI;IACxB;IAEA,MAAM,EAAEI,SAAS,EAAE,GAAGC,IAAAA,gEAA+B;IACrD,MAAMlB,OAAOC,qBAAAA,sBAAAA,WAAagB,YAAY,SAAS;IAE/CE,IAAAA,4BAAa,EAACnB,SAAS;IAEvB,IAAIoB,UAAUjB,aAAa,QAAQ,MAAM;IAEzC,IAAIH,SAAS,QAAQ;QACnBoB,UAAU;IACZ;IAEA,MAAMC,2BAA2BC,IAAAA,sBAAU,EAACR,YAAYM;IACxDb,OAAMgB,SAAS,CAAC;QACd,IAAIlB,WAAW;YACbgB,yBAAyBG,GAAG;QAC9B,OAAO;YACLH,yBAAyBI,KAAK;QAChC;IACF,GAAG;QAACpB;QAAWgB;KAAyB;IAExC,MAAMK,cAAcnB,OAAMoB,WAAW,CACnC,CAAC,EAAEC,MAAM,EAAEC,eAAe,EAAEC,SAAS,EAAEC,YAAY,EAAE,GACnD,CAACC;YACCA,MAAMC,OAAO;YACbJ,mBAAmBA,gBAAgBG;YACnC,IAAIF,WAAW;gBACbnB,QAAQK,OAAO,GAAG,IAAMY,UAAUA,OAAOI;gBACzC1B,aAAayB,eAAe,gBAAgB;YAC9C,OAAO;gBACLH,UAAUA,OAAOI;YACnB;QACF,GACF,EAAE;IAEJ,MAAME,eAAeC,IAAAA,4BAAa,EAAC;QAAET;QAAa1B;IAAK;IAEvD,MAAMoC,oBAAoBpC,SAAS,SAASqC,gDAAuB,GAAGC,kDAAwB;IAE9F,MAAMC,gBACJvC,SAAS,SAASwC,OAAOC,MAAM,CAACvC,WAAW;QAAEJ;QAAqBC;IAAU,KAAKG;IAEnF,MAAMwC,4BACJ,qBAACC,sCAAkB,CAACC,QAAQ;QAACC,OAAOX;qBAClC,qBAACE;QACCU,SAASC,QAAQ1C;QACjBe,SAASA;OACLmB;QACJ7B,SAASA;QACTjB,WAAWO,SAAS,SAASP,YAAYgB;QACzCb,OAAOI,SAAS,SAASJ,QAAQa;sBAEjC,qBAACuC;QAAIvD,SAAS;OACX,AAACC,CAAAA,UAAUC,IAAG,mBACb,qBAACqD;QAAIvD,SAAS;OACXC,wBACC,qBAACuD,kBAAQ;QAACC,QAAO;QAAIzD,SAAS;OAC3BC,SAGJC,sBAAQ,qBAACsD,kBAAQ;QAACxD,SAAS;OAAgCE,QAG/DH,WAEFW,aAAa,SAASH,SAAS,yBAC9B,qBAACgD;QAAIvD,SAAS;OACXI,yBAAAA,0BAAAA,6BAAgB,qBAACsD,8DAA8B;IAO1D,IAAInD,SAAS,QAAQ;QACnB,OAAO0C;IACT;IAEA,qBACE,qBAACU,4BAAa;QACZN,SAASC,QAAQ1C;QACjBgD,QAAO;QACP5D,WAAWA;QACXG,OAAOA;QACP0D,SAAS5C;QACT6C,OAAAA;OAECb;AAGP"}

package/dist/cjs/components/AppRoot/AppRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzF,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,8CAA8C,CAAC,EAAE,OAAO,CAAC;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,2LAWjB,YAAY,sBAoJd,CAAC"}
+{"version":3,"file":"AppRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzF,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,8CAA8C,CAAC,EAAE,OAAO,CAAC;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,2LAWjB,YAAY,sBAiJd,CAAC"}

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

@@ -14,11 +14,10 @@ const _object_without_properties = require("@swc/helpers/_/_object_without_prope
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
-const _useAppearance = require("../../hooks/useAppearance");
 const _useKeyboardInputTracker = require("../../hooks/useKeyboardInputTracker");
 const _useObjectMemo = require("../../hooks/useObjectMemo");
-const _usePlatform = require("../../hooks/usePlatform");
 const _dom = require("../../lib/dom");
+const _tokens = require("../../lib/tokens");
 const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 const _AppRootContext = require("./AppRootContext");
 const _ScrollContext = require("./ScrollContext");
@@ -36,8 +35,7 @@ const AppRoot = (_param)=>{
         "layout"
     ]);
     const { hasPointer, sizeX = 'none', sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
-    const platform = (0, _usePlatform.usePlatform)();
-    const appearance = (0, _useAppearance.useAppearance)();
+    const tokensClassName = (0, _tokens.useTokensClassName)();
     const safeAreaInsets = (0, _useObjectMemo.useObjectMemo)(safeAreaInsetsProp);
     const isKeyboardInputActiveRef = (0, _useKeyboardInputTracker.useKeyboardInputTracker)();
     const appRootRef = _react.useRef(null);
@@ -71,8 +69,7 @@ const AppRoot = (_param)=>{
         const [baseClassNames, stylesClassNames] = (0, _helpers.getClassNamesByMode)({
             mode,
             layout,
-            platform,
-            appearance,
+            tokensClassName,
             sizeX,
             sizeY
         });
@@ -119,8 +116,7 @@ const AppRoot = (_param)=>{
         mode,
         layout,
         disableParentTransformForPositionFixedElements,
-        platform,
-        appearance,
+        tokensClassName,
         sizeX,
         sizeY,
         safeAreaInsets

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getDocumentBody } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport {\n  extractPortalRootByProp,\n  getClassNamesByMode,\n  getParentElement,\n  setSafeAreaInsets,\n} from './helpers';\nimport type { AppRootLayout, AppRootMode, AppRootScroll, SafeAreaInsets } from './types';\nimport styles from './AppRoot.module.css';\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  className,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  ...props\n}: AppRootProps) => {\n  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n  const appearance = useAppearance();\n\n  const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n  const portalRootRef = React.useRef<HTMLElement | null>(null);\n\n  useIsomorphicLayoutEffect(\n    function setupPortalRoot() {\n      const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;\n\n      if (portalByProp) {\n        portalRootRef.current = portalByProp;\n        return function cleanup() {\n          portalRootRef.current = null;\n        };\n      }\n\n      const documentBody = getDocumentBody(appRootRef.current);\n      const portal = documentBody.ownerDocument.createElement('div');\n      documentBody.appendChild(portal);\n      portalRootRef.current = portal;\n      return function cleanup() {\n        documentBody.removeChild(portal);\n        portalRootRef.current = null;\n      };\n    },\n    [portalRootProp],\n  );\n\n  useIsomorphicLayoutEffect(\n    function setupContainers() {\n      if (!appRootRef.current || !portalRootRef.current) {\n        return;\n      }\n\n      const parentElement = getParentElement(appRootRef.current);\n      const documentBody = getDocumentBody(appRootRef.current);\n      const documentElement = documentBody.ownerDocument.documentElement;\n\n      const [baseClassNames, stylesClassNames] = getClassNamesByMode({\n        mode,\n        layout,\n        platform,\n        appearance,\n        sizeX,\n        sizeY,\n      });\n\n      /* eslint-disable no-restricted-properties */\n      switch (mode) {\n        case 'full': {\n          if (parentElement) {\n            parentElement.classList.add(...baseClassNames);\n          }\n\n          documentElement.classList.add(...stylesClassNames, 'vkui');\n          const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, documentElement);\n\n          return function cleanup() {\n            if (parentElement) {\n              parentElement.classList.remove(...baseClassNames);\n            }\n\n            documentElement.classList.remove(...stylesClassNames, 'vkui');\n            unsetSafeAreaInsets();\n          };\n        }\n        case 'embedded': {\n          if (parentElement) {\n            parentElement.classList.add(...baseClassNames, ...stylesClassNames);\n            if (!disableParentTransformForPositionFixedElements) {\n              parentElement.style.setProperty('transform', 'translate3d(0, 0, 0)');\n            }\n            const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, parentElement, portalRootRef.current); // prettier-ignore\n            return function cleanup() {\n              parentElement.classList.remove(...baseClassNames, ...stylesClassNames);\n              if (!disableParentTransformForPositionFixedElements) {\n                parentElement.style.removeProperty('transform');\n              }\n              unsetSafeAreaInsets();\n            };\n          }\n          /* istanbul ignore next: node.parentElement может быть null, но такой кейс в теории невозможен */\n          return;\n        }\n        /* istanbul ignore next: не покрывается за счёт теста на <AppRoot mode=\"partial\" /> */\n        case 'partial': {\n          return;\n        }\n      }\n      /* eslint-enable no-restricted-properties */\n    },\n    [\n      mode,\n      layout,\n      disableParentTransformForPositionFixedElements,\n      platform,\n      appearance,\n      sizeX,\n      sizeY,\n      safeAreaInsets,\n    ],\n  );\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: appRootRef,\n        portalRoot: portalRootRef,\n        embedded: mode === 'embedded',\n        mode,\n        disablePortal,\n        layout,\n        get keyboardInput() {\n          return isKeyboardInputActiveRef.current;\n        },\n      }}\n    >\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={appRootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","safeAreaInsetsProp","layout","props","hasPointer","sizeX","sizeY","useAdaptivity","platform","usePlatform","appearance","useAppearance","useObjectMemo","isKeyboardInputActiveRef","useKeyboardInputTracker","appRootRef","React","useRef","portalRootRef","useIsomorphicLayoutEffect","setupPortalRoot","portalByProp","extractPortalRootByProp","current","cleanup","documentBody","getDocumentBody","portal","ownerDocument","createElement","appendChild","removeChild","setupContainers","parentElement","getParentElement","documentElement","baseClassNames","stylesClassNames","getClassNamesByMode","classList","add","unsetSafeAreaInsets","setSafeAreaInsets","remove","style","setProperty","removeProperty","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref","classNames","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { getDocumentBody } from '../../lib/dom';\nimport { useTokensClassName } from '../../lib/tokens';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport {\n  extractPortalRootByProp,\n  getClassNamesByMode,\n  getParentElement,\n  setSafeAreaInsets,\n} from './helpers';\nimport type { AppRootLayout, AppRootMode, AppRootScroll, SafeAreaInsets } from './types';\nimport styles from './AppRoot.module.css';\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  className,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  ...props\n}: AppRootProps) => {\n  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const tokensClassName = useTokensClassName();\n\n  const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n  const portalRootRef = React.useRef<HTMLElement | null>(null);\n\n  useIsomorphicLayoutEffect(\n    function setupPortalRoot() {\n      const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;\n\n      if (portalByProp) {\n        portalRootRef.current = portalByProp;\n        return function cleanup() {\n          portalRootRef.current = null;\n        };\n      }\n\n      const documentBody = getDocumentBody(appRootRef.current);\n      const portal = documentBody.ownerDocument.createElement('div');\n      documentBody.appendChild(portal);\n      portalRootRef.current = portal;\n      return function cleanup() {\n        documentBody.removeChild(portal);\n        portalRootRef.current = null;\n      };\n    },\n    [portalRootProp],\n  );\n\n  useIsomorphicLayoutEffect(\n    function setupContainers() {\n      if (!appRootRef.current || !portalRootRef.current) {\n        return;\n      }\n\n      const parentElement = getParentElement(appRootRef.current);\n      const documentBody = getDocumentBody(appRootRef.current);\n      const documentElement = documentBody.ownerDocument.documentElement;\n\n      const [baseClassNames, stylesClassNames] = getClassNamesByMode({\n        mode,\n        layout,\n        tokensClassName,\n        sizeX,\n        sizeY,\n      });\n\n      /* eslint-disable no-restricted-properties */\n      switch (mode) {\n        case 'full': {\n          if (parentElement) {\n            parentElement.classList.add(...baseClassNames);\n          }\n\n          documentElement.classList.add(...stylesClassNames, 'vkui');\n          const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, documentElement);\n\n          return function cleanup() {\n            if (parentElement) {\n              parentElement.classList.remove(...baseClassNames);\n            }\n\n            documentElement.classList.remove(...stylesClassNames, 'vkui');\n            unsetSafeAreaInsets();\n          };\n        }\n        case 'embedded': {\n          if (parentElement) {\n            parentElement.classList.add(...baseClassNames, ...stylesClassNames);\n            if (!disableParentTransformForPositionFixedElements) {\n              parentElement.style.setProperty('transform', 'translate3d(0, 0, 0)');\n            }\n            const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, parentElement, portalRootRef.current); // prettier-ignore\n            return function cleanup() {\n              parentElement.classList.remove(...baseClassNames, ...stylesClassNames);\n              if (!disableParentTransformForPositionFixedElements) {\n                parentElement.style.removeProperty('transform');\n              }\n              unsetSafeAreaInsets();\n            };\n          }\n          /* istanbul ignore next: node.parentElement может быть null, но такой кейс в теории невозможен */\n          return;\n        }\n        /* istanbul ignore next: не покрывается за счёт теста на <AppRoot mode=\"partial\" /> */\n        case 'partial': {\n          return;\n        }\n      }\n      /* eslint-enable no-restricted-properties */\n    },\n    [\n      mode,\n      layout,\n      disableParentTransformForPositionFixedElements,\n      tokensClassName,\n      sizeX,\n      sizeY,\n      safeAreaInsets,\n    ],\n  );\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: appRootRef,\n        portalRoot: portalRootRef,\n        embedded: mode === 'embedded',\n        mode,\n        disablePortal,\n        layout,\n        get keyboardInput() {\n          return isKeyboardInputActiveRef.current;\n        },\n      }}\n    >\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={appRootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","safeAreaInsetsProp","layout","props","hasPointer","sizeX","sizeY","useAdaptivity","tokensClassName","useTokensClassName","useObjectMemo","isKeyboardInputActiveRef","useKeyboardInputTracker","appRootRef","React","useRef","portalRootRef","useIsomorphicLayoutEffect","setupPortalRoot","portalByProp","extractPortalRootByProp","current","cleanup","documentBody","getDocumentBody","portal","ownerDocument","createElement","appendChild","removeChild","setupContainers","parentElement","getParentElement","documentElement","baseClassNames","stylesClassNames","getClassNamesByMode","classList","add","unsetSafeAreaInsets","setSafeAreaInsets","remove","style","setProperty","removeProperty","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref","classNames","undefined"],"mappings":"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"}

package/dist/cjs/components/AppRoot/helpers.d.ts

@@ -1,15 +1,13 @@
 import type { SizeTypeValues } from '../../lib/adaptivity';
-import type { AppearanceType } from '../../lib/appearance';
 import type { AppRootLayout, AppRootMode, SafeAreaInsets } from './types';
 type ContainerClassNamesProps = {
     mode: AppRootMode;
     layout?: AppRootLayout;
-    platform: string;
-    appearance: AppearanceType;
+    tokensClassName: string;
     sizeX: SizeTypeValues | 'none';
     sizeY: SizeTypeValues | 'none';
 };
-export declare function getClassNamesByMode({ mode, layout, platform, appearance, sizeX, sizeY, }: ContainerClassNamesProps): [string[], string[]];
+export declare function getClassNamesByMode({ mode, layout, tokensClassName, sizeX, sizeY, }: ContainerClassNamesProps): [string[], string[]];
 export declare const getParentElement: (el: HTMLElement | null) => HTMLElement | null;
 export declare const extractPortalRootByProp: (portalRootProp: HTMLElement | React.RefObject<HTMLElement>) => HTMLElement | null;
 export declare const CUSTOM_PROPERTY_INSET_PREFIX = "--vkui_internal--safe_area_inset_";

package/dist/cjs/components/AppRoot/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE1E,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,cAAc,CAAC;IAC3B,KAAK,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,KAAK,EAAE,cAAc,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,UAAU,EACV,KAAK,EACL,KAAK,GACN,EAAE,wBAAwB,GAAG,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CA0BjD;AAED,eAAO,MAAM,gBAAgB,OAAQ,WAAW,GAAG,IAAI,uBAAmC,CAAC;AAE3F,eAAO,MAAM,uBAAuB,mBAClB,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,uBACgB,CAAC;AAE7E,eAAO,MAAM,4BAA4B,sCAAsC,CAAC;AAEhF,eAAO,MAAM,iBAAiB,mBACZ,cAAc,GAAG,SAAS,iBAC3B,WAAW,oBACR,WAAW,eA4B9B,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE1E,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,KAAK,EAAE,cAAc,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,eAAe,EACf,KAAK,EACL,KAAK,GACN,EAAE,wBAAwB,GAAG,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CA0BjD;AAED,eAAO,MAAM,gBAAgB,OAAQ,WAAW,GAAG,IAAI,uBAAmC,CAAC;AAE3F,eAAO,MAAM,uBAAuB,mBAClB,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,uBACgB,CAAC;AAE7E,eAAO,MAAM,4BAA4B,sCAAsC,CAAC;AAEhF,eAAO,MAAM,iBAAiB,mBACZ,cAAc,GAAG,SAAS,iBAC3B,WAAW,oBACR,WAAW,eA4B9B,CAAC"}

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

@@ -25,14 +25,13 @@ _export(exports, {
         return setSafeAreaInsets;
     }
 });
-const _generateVKUITokensClassName = require("../../helpers/generateVKUITokensClassName");
 const _isRefObject = require("../../lib/isRefObject");
-function getClassNamesByMode({ mode, layout, platform, appearance, sizeX, sizeY }) {
+function getClassNamesByMode({ mode, layout, tokensClassName, sizeX, sizeY }) {
     const baseClassNames = [
         'vkui__root'
     ];
     const stylesClassNames = [
-        (0, _generateVKUITokensClassName.generateVKUITokensClassName)(platform, appearance)
+        tokensClassName
     ];
     if (mode === 'full' || mode === 'embedded') {
         if (layout) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/helpers.ts"],"sourcesContent":["import { generateVKUITokensClassName } from '../../helpers/generateVKUITokensClassName';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport type { AppearanceType } from '../../lib/appearance';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { AppRootLayout, AppRootMode, SafeAreaInsets } from './types';\n\ntype ContainerClassNamesProps = {\n  mode: AppRootMode;\n  layout?: AppRootLayout;\n  platform: string;\n  appearance: AppearanceType;\n  sizeX: SizeTypeValues | 'none';\n  sizeY: SizeTypeValues | 'none';\n};\n\nexport function getClassNamesByMode({\n  mode,\n  layout,\n  platform,\n  appearance,\n  sizeX,\n  sizeY,\n}: ContainerClassNamesProps): [string[], string[]] {\n  const baseClassNames: string[] = ['vkui__root'];\n  const stylesClassNames: string[] = [generateVKUITokensClassName(platform, appearance)];\n\n  if (mode === 'full' || mode === 'embedded') {\n    if (layout) {\n      const vkuiLayoutClassNames = { card: 'vkui--layout-card', plain: 'vkui--layout-plain' };\n      stylesClassNames.push(vkuiLayoutClassNames[layout]);\n    }\n\n    if (sizeX !== 'compact') {\n      const vkuiSizeXClassNames = { none: 'vkui--sizeX-none', regular: 'vkui--sizeX-regular' };\n      stylesClassNames.push(vkuiSizeXClassNames[sizeX]);\n    }\n\n    if (sizeY !== 'regular') {\n      const vkuiSizeYClassNames = { none: 'vkui--sizeY-none', compact: 'vkui--sizeY-compact' };\n      stylesClassNames.push(vkuiSizeYClassNames[sizeY]);\n    }\n\n    if (mode === 'embedded') {\n      baseClassNames.push('vkui__root--embedded');\n    }\n  }\n\n  return [baseClassNames, stylesClassNames];\n}\n\nexport const getParentElement = (el: HTMLElement | null) => (el ? el.parentElement : null);\n\nexport const extractPortalRootByProp = (\n  portalRootProp: HTMLElement | React.RefObject<HTMLElement>,\n) => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);\n\nexport const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;\n\nexport const setSafeAreaInsets = (\n  safeAreaInsets: SafeAreaInsets | undefined,\n  rootContainer: HTMLElement,\n  portalContainer?: HTMLElement,\n) => {\n  if (!safeAreaInsets) {\n    return () => void 0;\n  }\n\n  for (const key in safeAreaInsets) {\n    if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n      const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n      const propertyValue = safeAreaInsets[key];\n      rootContainer.style.setProperty(propertyKey, `${propertyValue}px`);\n      if (portalContainer) {\n        portalContainer.style.setProperty(propertyKey, `${propertyValue}px`);\n      }\n    }\n  }\n\n  return function unset() {\n    for (const key in safeAreaInsets) {\n      if (safeAreaInsets.hasOwnProperty(key)) {\n        const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n        rootContainer.style.removeProperty(propertyKey);\n        if (portalContainer) {\n          portalContainer.style.removeProperty(propertyKey);\n        }\n      }\n    }\n  };\n};\n"],"names":["CUSTOM_PROPERTY_INSET_PREFIX","extractPortalRootByProp","getClassNamesByMode","getParentElement","setSafeAreaInsets","mode","layout","platform","appearance","sizeX","sizeY","baseClassNames","stylesClassNames","generateVKUITokensClassName","vkuiLayoutClassNames","card","plain","push","vkuiSizeXClassNames","none","regular","vkuiSizeYClassNames","compact","el","parentElement","portalRootProp","isRefObject","current","safeAreaInsets","rootContainer","portalContainer","key","hasOwnProperty","propertyKey","propertyValue","style","setProperty","unset","removeProperty"],"mappings":";;;;;;;;;;;IAwDaA,4BAA4B;eAA5BA;;IAJAC,uBAAuB;eAAvBA;;IArCGC,mBAAmB;eAAnBA;;IAmCHC,gBAAgB;eAAhBA;;IAQAC,iBAAiB;eAAjBA;;;6CA1D+B;6BAGhB;AAYrB,SAASF,oBAAoB,EAClCG,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACVC,KAAK,EACLC,KAAK,EACoB;IACzB,MAAMC,iBAA2B;QAAC;KAAa;IAC/C,MAAMC,mBAA6B;QAACC,IAAAA,wDAA2B,EAACN,UAAUC;KAAY;IAEtF,IAAIH,SAAS,UAAUA,SAAS,YAAY;QAC1C,IAAIC,QAAQ;YACV,MAAMQ,uBAAuB;gBAAEC,MAAM;gBAAqBC,OAAO;YAAqB;YACtFJ,iBAAiBK,IAAI,CAACH,oBAAoB,CAACR,OAAO;QACpD;QAEA,IAAIG,UAAU,WAAW;YACvB,MAAMS,sBAAsB;gBAAEC,MAAM;gBAAoBC,SAAS;YAAsB;YACvFR,iBAAiBK,IAAI,CAACC,mBAAmB,CAACT,MAAM;QAClD;QAEA,IAAIC,UAAU,WAAW;YACvB,MAAMW,sBAAsB;gBAAEF,MAAM;gBAAoBG,SAAS;YAAsB;YACvFV,iBAAiBK,IAAI,CAACI,mBAAmB,CAACX,MAAM;QAClD;QAEA,IAAIL,SAAS,YAAY;YACvBM,eAAeM,IAAI,CAAC;QACtB;IACF;IAEA,OAAO;QAACN;QAAgBC;KAAiB;AAC3C;AAEO,MAAMT,mBAAmB,CAACoB,KAA4BA,KAAKA,GAAGC,aAAa,GAAG;AAE9E,MAAMvB,0BAA0B,CACrCwB,iBACIC,IAAAA,wBAAW,EAACD,kBAAkBA,eAAeE,OAAO,GAAGF;AAEtD,MAAMzB,+BAA+B,CAAC,iCAAiC,CAAC;AAExE,MAAMI,oBAAoB,CAC/BwB,gBACAC,eACAC;IAEA,IAAI,CAACF,gBAAgB;QACnB,OAAO,IAAM,KAAK;IACpB;IAEA,IAAK,MAAMG,OAAOH,eAAgB;QAChC,IAAIA,eAAeI,cAAc,CAACD,QAAQ,OAAOH,cAAc,CAACG,IAAI,KAAK,UAAU;YACjF,MAAME,cAAc,CAAC,EAAEjC,6BAA6B,EAAE+B,IAAI,CAAC;YAC3D,MAAMG,gBAAgBN,cAAc,CAACG,IAAI;YACzCF,cAAcM,KAAK,CAACC,WAAW,CAACH,aAAa,CAAC,EAAEC,cAAc,EAAE,CAAC;YACjE,IAAIJ,iBAAiB;gBACnBA,gBAAgBK,KAAK,CAACC,WAAW,CAACH,aAAa,CAAC,EAAEC,cAAc,EAAE,CAAC;YACrE;QACF;IACF;IAEA,OAAO,SAASG;QACd,IAAK,MAAMN,OAAOH,eAAgB;YAChC,IAAIA,eAAeI,cAAc,CAACD,MAAM;gBACtC,MAAME,cAAc,CAAC,EAAEjC,6BAA6B,EAAE+B,IAAI,CAAC;gBAC3DF,cAAcM,KAAK,CAACG,cAAc,CAACL;gBACnC,IAAIH,iBAAiB;oBACnBA,gBAAgBK,KAAK,CAACG,cAAc,CAACL;gBACvC;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../../../src/components/AppRoot/helpers.ts"],"sourcesContent":["import type { SizeTypeValues } from '../../lib/adaptivity';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { AppRootLayout, AppRootMode, SafeAreaInsets } from './types';\n\ntype ContainerClassNamesProps = {\n  mode: AppRootMode;\n  layout?: AppRootLayout;\n  tokensClassName: string;\n  sizeX: SizeTypeValues | 'none';\n  sizeY: SizeTypeValues | 'none';\n};\n\nexport function getClassNamesByMode({\n  mode,\n  layout,\n  tokensClassName,\n  sizeX,\n  sizeY,\n}: ContainerClassNamesProps): [string[], string[]] {\n  const baseClassNames: string[] = ['vkui__root'];\n  const stylesClassNames: string[] = [tokensClassName];\n\n  if (mode === 'full' || mode === 'embedded') {\n    if (layout) {\n      const vkuiLayoutClassNames = { card: 'vkui--layout-card', plain: 'vkui--layout-plain' };\n      stylesClassNames.push(vkuiLayoutClassNames[layout]);\n    }\n\n    if (sizeX !== 'compact') {\n      const vkuiSizeXClassNames = { none: 'vkui--sizeX-none', regular: 'vkui--sizeX-regular' };\n      stylesClassNames.push(vkuiSizeXClassNames[sizeX]);\n    }\n\n    if (sizeY !== 'regular') {\n      const vkuiSizeYClassNames = { none: 'vkui--sizeY-none', compact: 'vkui--sizeY-compact' };\n      stylesClassNames.push(vkuiSizeYClassNames[sizeY]);\n    }\n\n    if (mode === 'embedded') {\n      baseClassNames.push('vkui__root--embedded');\n    }\n  }\n\n  return [baseClassNames, stylesClassNames];\n}\n\nexport const getParentElement = (el: HTMLElement | null) => (el ? el.parentElement : null);\n\nexport const extractPortalRootByProp = (\n  portalRootProp: HTMLElement | React.RefObject<HTMLElement>,\n) => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);\n\nexport const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;\n\nexport const setSafeAreaInsets = (\n  safeAreaInsets: SafeAreaInsets | undefined,\n  rootContainer: HTMLElement,\n  portalContainer?: HTMLElement,\n) => {\n  if (!safeAreaInsets) {\n    return () => void 0;\n  }\n\n  for (const key in safeAreaInsets) {\n    if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n      const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n      const propertyValue = safeAreaInsets[key];\n      rootContainer.style.setProperty(propertyKey, `${propertyValue}px`);\n      if (portalContainer) {\n        portalContainer.style.setProperty(propertyKey, `${propertyValue}px`);\n      }\n    }\n  }\n\n  return function unset() {\n    for (const key in safeAreaInsets) {\n      if (safeAreaInsets.hasOwnProperty(key)) {\n        const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n        rootContainer.style.removeProperty(propertyKey);\n        if (portalContainer) {\n          portalContainer.style.removeProperty(propertyKey);\n        }\n      }\n    }\n  };\n};\n"],"names":["CUSTOM_PROPERTY_INSET_PREFIX","extractPortalRootByProp","getClassNamesByMode","getParentElement","setSafeAreaInsets","mode","layout","tokensClassName","sizeX","sizeY","baseClassNames","stylesClassNames","vkuiLayoutClassNames","card","plain","push","vkuiSizeXClassNames","none","regular","vkuiSizeYClassNames","compact","el","parentElement","portalRootProp","isRefObject","current","safeAreaInsets","rootContainer","portalContainer","key","hasOwnProperty","propertyKey","propertyValue","style","setProperty","unset","removeProperty"],"mappings":";;;;;;;;;;;IAoDaA,4BAA4B;eAA5BA;;IAJAC,uBAAuB;eAAvBA;;IApCGC,mBAAmB;eAAnBA;;IAkCHC,gBAAgB;eAAhBA;;IAQAC,iBAAiB;eAAjBA;;;6BArDe;AAWrB,SAASF,oBAAoB,EAClCG,IAAI,EACJC,MAAM,EACNC,eAAe,EACfC,KAAK,EACLC,KAAK,EACoB;IACzB,MAAMC,iBAA2B;QAAC;KAAa;IAC/C,MAAMC,mBAA6B;QAACJ;KAAgB;IAEpD,IAAIF,SAAS,UAAUA,SAAS,YAAY;QAC1C,IAAIC,QAAQ;YACV,MAAMM,uBAAuB;gBAAEC,MAAM;gBAAqBC,OAAO;YAAqB;YACtFH,iBAAiBI,IAAI,CAACH,oBAAoB,CAACN,OAAO;QACpD;QAEA,IAAIE,UAAU,WAAW;YACvB,MAAMQ,sBAAsB;gBAAEC,MAAM;gBAAoBC,SAAS;YAAsB;YACvFP,iBAAiBI,IAAI,CAACC,mBAAmB,CAACR,MAAM;QAClD;QAEA,IAAIC,UAAU,WAAW;YACvB,MAAMU,sBAAsB;gBAAEF,MAAM;gBAAoBG,SAAS;YAAsB;YACvFT,iBAAiBI,IAAI,CAACI,mBAAmB,CAACV,MAAM;QAClD;QAEA,IAAIJ,SAAS,YAAY;YACvBK,eAAeK,IAAI,CAAC;QACtB;IACF;IAEA,OAAO;QAACL;QAAgBC;KAAiB;AAC3C;AAEO,MAAMR,mBAAmB,CAACkB,KAA4BA,KAAKA,GAAGC,aAAa,GAAG;AAE9E,MAAMrB,0BAA0B,CACrCsB,iBACIC,IAAAA,wBAAW,EAACD,kBAAkBA,eAAeE,OAAO,GAAGF;AAEtD,MAAMvB,+BAA+B,CAAC,iCAAiC,CAAC;AAExE,MAAMI,oBAAoB,CAC/BsB,gBACAC,eACAC;IAEA,IAAI,CAACF,gBAAgB;QACnB,OAAO,IAAM,KAAK;IACpB;IAEA,IAAK,MAAMG,OAAOH,eAAgB;QAChC,IAAIA,eAAeI,cAAc,CAACD,QAAQ,OAAOH,cAAc,CAACG,IAAI,KAAK,UAAU;YACjF,MAAME,cAAc,CAAC,EAAE/B,6BAA6B,EAAE6B,IAAI,CAAC;YAC3D,MAAMG,gBAAgBN,cAAc,CAACG,IAAI;YACzCF,cAAcM,KAAK,CAACC,WAAW,CAACH,aAAa,CAAC,EAAEC,cAAc,EAAE,CAAC;YACjE,IAAIJ,iBAAiB;gBACnBA,gBAAgBK,KAAK,CAACC,WAAW,CAACH,aAAa,CAAC,EAAEC,cAAc,EAAE,CAAC;YACrE;QACF;IACF;IAEA,OAAO,SAASG;QACd,IAAK,MAAMN,OAAOH,eAAgB;YAChC,IAAIA,eAAeI,cAAc,CAACD,MAAM;gBACtC,MAAME,cAAc,CAAC,EAAE/B,6BAA6B,EAAE6B,IAAI,CAAC;gBAC3DF,cAAcM,KAAK,CAACG,cAAc,CAACL;gBACnC,IAAIH,iBAAiB;oBACnBA,gBAAgBK,KAAK,CAACG,cAAc,CAACL;gBACvC;YACF;QACF;IACF;AACF"}

package/dist/cjs/components/AppearanceProvider/AppearanceProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppearanceProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,wBAAyB,uBAAuB,sBAU9E,CAAC"}
+{"version":3,"file":"AppearanceProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAI3D,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,wBAAyB,uBAAuB,sBAM9E,CAAC"}

package/dist/cjs/components/AppearanceProvider/AppearanceProvider.js

@@ -10,17 +10,12 @@ Object.defineProperty(exports, "AppearanceProvider", {
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _usePlatform = require("../../hooks/usePlatform");
-const _tokensClassProvider = require("../../lib/tokensClassProvider");
+const _tokens = require("../../lib/tokens");
 const _ConfigProviderOverride = require("../ConfigProvider/ConfigProviderOverride");
 const AppearanceProvider = ({ value, children })=>{
-    const platform = (0, _usePlatform.usePlatform)();
     return /*#__PURE__*/ _react.createElement(_ConfigProviderOverride.ConfigProviderOverride, {
         appearance: value
-    }, /*#__PURE__*/ _react.createElement(_tokensClassProvider.TokensClassProvider, {
-        platform: platform,
-        appearance: value
-    }, children));
+    }, /*#__PURE__*/ _react.createElement(_tokens.TokensClassProvider, null, children));
 };
 
 //# sourceMappingURL=AppearanceProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { AppearanceType } from '../../lib/appearance';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  value: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ value, children }: AppearanceProviderProps) => {\n  const platform = usePlatform();\n\n  return (\n    <ConfigProviderOverride appearance={value}>\n      <TokensClassProvider platform={platform} appearance={value}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["AppearanceProvider","value","children","platform","usePlatform","ConfigProviderOverride","appearance","TokensClassProvider"],"mappings":";;;;+BAcaA;;;eAAAA;;;;iEAdU;6BACK;qCAEQ;wCACG;AAUhC,MAAMA,qBAAqB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAA2B;IAC7E,MAAMC,WAAWC,IAAAA,wBAAW;IAE5B,qBACE,qBAACC,8CAAsB;QAACC,YAAYL;qBAClC,qBAACM,wCAAmB;QAACJ,UAAUA;QAAUG,YAAYL;OAClDC;AAIT"}
+{"version":3,"sources":["../../../../src/components/AppearanceProvider/AppearanceProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { AppearanceType } from '../../lib/appearance';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface AppearanceProviderProps {\n  value: AppearanceType;\n  children: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppearanceProvider\n */\nexport const AppearanceProvider = ({ value, children }: AppearanceProviderProps) => {\n  return (\n    <ConfigProviderOverride appearance={value}>\n      <TokensClassProvider>{children}</TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n};\n"],"names":["AppearanceProvider","value","children","ConfigProviderOverride","appearance","TokensClassProvider"],"mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;wBAEa;wCACG;AAUhC,MAAMA,qBAAqB,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAA2B;IAC7E,qBACE,qBAACC,8CAAsB;QAACC,YAAYH;qBAClC,qBAACI,2BAAmB,QAAEH;AAG5B"}

package/dist/cjs/components/Badge/Badge.js

@@ -19,12 +19,12 @@ const stylesMode = {
     new: "vkuiBadge--mode-new",
     prominent: "vkuiBadge--mode-prominent"
 };
-const Badge = (_param)=>/*#__PURE__*/ {
+const Badge = (_param)=>{
     var { mode = 'new', children } = _param, restProps = _object_without_properties._(_param, [
         "mode",
         "children"
     ]);
-    return _react.createElement(_RootComponent.RootComponent, _object_spread._({
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
         Component: "span",
         baseClassName: (0, _vkjs.classNames)("vkuiBadge", stylesMode[mode])
     }, restProps), children && /*#__PURE__*/ _react.createElement(_VisuallyHidden.VisuallyHidden, null, children));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles['Badge--mode-new'],\n  prominent: styles['Badge--mode-prominent'],\n};\n\nexport interface BadgeProps extends RootComponentProps<HTMLSpanElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps) => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles['Badge'], stylesMode[mode])}\n    {...restProps}\n  >\n    {children && <VisuallyHidden>{children}</VisuallyHidden>}\n  </RootComponent>\n);\n"],"names":["Badge","stylesMode","new","prominent","mode","children","restProps","RootComponent","Component","baseClassName","classNames","VisuallyHidden"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;iEAlBU;sBACI;+BACuB;gCACnB;AAG/B,MAAMC,aAAa;IACjBC,GAAG;IACHC,SAAS;AACX;AASO,MAAMH,QAAQ;QAAC,EAAEI,OAAO,KAAK,EAAEC,QAAQ,EAA4B,WAAvBC;QAA3BF;QAAcC;;WACpC,qBAACE,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,eAAkBT,UAAU,CAACG,KAAK;OACvDE,YAEHD,0BAAY,qBAACM,8BAAc,QAAEN;AACjB"}
+{"version":3,"sources":["../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { RootComponent, RootComponentProps } from '../RootComponent/RootComponent';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './Badge.module.css';\n\nconst stylesMode = {\n  new: styles['Badge--mode-new'],\n  prominent: styles['Badge--mode-prominent'],\n};\n\nexport interface BadgeProps extends RootComponentProps<HTMLSpanElement> {\n  mode: 'new' | 'prominent';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Badge\n */\nexport const Badge = ({ mode = 'new', children, ...restProps }: BadgeProps) => (\n  <RootComponent\n    Component=\"span\"\n    baseClassName={classNames(styles['Badge'], stylesMode[mode])}\n    {...restProps}\n  >\n    {children && <VisuallyHidden>{children}</VisuallyHidden>}\n  </RootComponent>\n);\n"],"names":["Badge","stylesMode","new","prominent","mode","children","restProps","RootComponent","Component","baseClassName","classNames","VisuallyHidden"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;iEAlBU;sBACI;+BACuB;gCACnB;AAG/B,MAAMC,aAAa;IACjBC,GAAG;IACHC,SAAS;AACX;AASO,MAAMH,QAAQ;QAAC,EAAEI,OAAO,KAAK,EAAEC,QAAQ,EAA4B,WAAvBC;QAA3BF;QAAcC;;yBACpC,qBAACE,4BAAa;QACZC,WAAU;QACVC,eAAeC,IAAAA,gBAAU,eAAkBT,UAAU,CAACG,KAAK;OACvDE,YAEHD,0BAAY,qBAACM,8BAAc,QAAEN"}

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { BaseGalleryProps } from './types';
-export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;
+export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, dragDisabled, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;
 //# sourceMappingURL=BaseGallery.d.ts.map

package/dist/cjs/components/BaseGallery/BaseGallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,gBAAgB,EAAkD,MAAM,SAAS,CAAC;AA2B3F,eAAO,MAAM,WAAW,4MAiBrB,gBAAgB,sBAsUlB,CAAC"}
+{"version":3,"file":"BaseGallery.d.ts","sourceRoot":"","sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,gBAAgB,EAAkD,MAAM,SAAS,CAAC;AA2B3F,eAAO,MAAM,WAAW,4LAiBrB,gBAAgB,sBA0UlB,CAAC"}

package/dist/cjs/components/BaseGallery/BaseGallery.js

@@ -45,13 +45,13 @@ const stylesBullets = {
     light: "vkuiBaseGallery__bullets--light"
 };
 const BaseGallery = (_param)=>{
-    var { bullets = false, getRootRef, children, slideWidth = '100%', slideIndex = 0, isDraggable: isDraggableProp = true, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align = 'left', showArrows, getRef, arrowSize = 'l' } = _param, restProps = _object_without_properties._(_param, [
+    var { bullets = false, getRootRef, children, slideWidth = '100%', slideIndex = 0, dragDisabled = false, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align = 'left', showArrows, getRef, arrowSize = 'l' } = _param, restProps = _object_without_properties._(_param, [
         "bullets",
         "getRootRef",
         "children",
         "slideWidth",
         "slideIndex",
-        "isDraggable",
+        "dragDisabled",
         "onDragStart",
         "onDragEnd",
         "onChange",
@@ -220,15 +220,18 @@ const BaseGallery = (_param)=>{
         }
         return targetIndex;
     };
+    const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;
     const onStart = (e)=>{
         e.originalEvent.stopPropagation();
-        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e);
-        setShiftState((prevState)=>_object_spread_props._(_object_spread._({}, prevState), {
-                animation: false
-            }));
+        if (isDraggable) {
+            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(e);
+            setShiftState((prevState)=>_object_spread_props._(_object_spread._({}, prevState), {
+                    animation: false
+                }));
+        }
     };
     const onMoveX = (e)=>{
-        if (isDraggableProp && !layoutState.current.isFullyVisible) {
+        if (isDraggable) {
             e.originalEvent.preventDefault();
             if (e.isSlideX) {
                 if (shiftState.deltaX !== e.shiftX) {
@@ -241,21 +244,23 @@ const BaseGallery = (_param)=>{
         }
     };
     const onEnd = (e)=>{
-        const targetIndex = e.isSlide ? getTarget(e) : slideIndex !== null && slideIndex !== void 0 ? slideIndex : 0;
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e, targetIndex);
-        const nextShiftState = {
-            animation: true,
-            dragging: false,
-            deltaX: 0
-        };
-        const shiftXStick = calculateDragIndent();
-        if (targetIndex !== slideIndex) {
-            // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)
-            nextShiftState.shiftX = shiftXStick;
-        }
-        setShiftState((prevState)=>_object_spread._({}, prevState, nextShiftState));
-        if (targetIndex !== slideIndex) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(targetIndex);
+        if (isDraggable) {
+            const targetIndex = e.isSlide ? getTarget(e) : slideIndex !== null && slideIndex !== void 0 ? slideIndex : 0;
+            onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(e, targetIndex);
+            const nextShiftState = {
+                animation: true,
+                dragging: false,
+                deltaX: 0
+            };
+            const shiftXStick = calculateDragIndent();
+            if (targetIndex !== slideIndex) {
+                // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)
+                nextShiftState.shiftX = shiftXStick;
+            }
+            setShiftState((prevState)=>_object_spread._({}, prevState, nextShiftState));
+            if (targetIndex !== slideIndex) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(targetIndex);
+            }
         }
     };
     const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;
@@ -274,7 +279,6 @@ const BaseGallery = (_param)=>{
     const canSlideRight = !layoutState.current.isFullyVisible && // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
     (align === 'left' && layoutState.current.containerWidth - shiftState.shiftX < ((_layoutState_current_layerWidth = layoutState.current.layerWidth) !== null && _layoutState_current_layerWidth !== void 0 ? _layoutState_current_layerWidth : 0) || // otherwise we need to check current slide index (align = right or align = center)
     align !== 'left' && slideIndex < layoutState.current.slides.length - 1);
-    const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;
     return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread_props._(_object_spread._({}, restProps), {
         baseClassName: (0, _vkjs.classNames)("vkuiBaseGallery", align === 'center' && "vkuiBaseGallery--align-center", slideWidth === 'custom' && "vkuiBaseGallery--custom-width", isDraggable && "vkuiBaseGallery--draggable"),
         getRootRef: rootRef

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nconst stylesBullets = {\n  dark: styles['BaseGallery__bullets--dark'],\n  light: styles['BaseGallery__bullets--light'],\n};\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  isDraggable: isDraggableProp = true,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const onStart = (e: TouchEvent) => {\n    e.originalEvent.stopPropagation();\n    onDragStart?.(e);\n    setShiftState((prevState) => ({ ...prevState, animation: false }));\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggableProp && !layoutState.current.isFullyVisible) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n    onDragEnd?.(e, targetIndex);\n\n    const nextShiftState: Partial<ShiftingState> = {\n      animation: true,\n      dragging: false,\n      deltaX: 0,\n    };\n\n    const shiftXStick = calculateDragIndent();\n    if (targetIndex !== slideIndex) {\n      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n      nextShiftState.shiftX = shiftXStick;\n    }\n\n    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n    if (targetIndex !== slideIndex) {\n      onChange?.(targetIndex);\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  const isDraggable = isDraggableProp && !layoutState.current.isFullyVisible;\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n      )}\n      getRootRef={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","bullets","getRootRef","children","slideWidth","slideIndex","isDraggable","isDraggableProp","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","React","useRef","layoutState","shiftState","setShiftState","useState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","onStart","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","RootComponent","baseClassName","classNames","Touch","className","onStartX","style","noSlideClick","div","key","ref","el","aria-hidden","ScrollArrow","onClick","size"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/BaseGallery/BaseGallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ScrollArrow } from '../ScrollArrow/ScrollArrow';\nimport { Touch, TouchEvent } from '../Touch/Touch';\nimport { calcMax, calcMin } from './helpers';\nimport { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';\nimport styles from './BaseGallery.module.css';\n\nconst ANIMATION_DURATION = 0.24;\n\nconst LAYOUT_DEFAULT_STATE = {\n  containerWidth: 0,\n  viewportOffsetWidth: 0,\n  layerWidth: 0,\n  min: 0,\n  max: 0,\n  slides: [],\n  isFullyVisible: true,\n};\n\nconst SHIFT_DEFAULT_STATE = {\n  animation: undefined,\n  shiftX: 0,\n  dragging: false,\n  deltaX: 0,\n  indent: 0,\n};\n\nconst stylesBullets = {\n  dark: styles['BaseGallery__bullets--dark'],\n  light: styles['BaseGallery__bullets--light'],\n};\nexport const BaseGallery = ({\n  bullets = false,\n  getRootRef,\n  children,\n  slideWidth = '100%',\n  slideIndex = 0,\n  dragDisabled = false,\n  onDragStart,\n  onDragEnd,\n  onChange,\n  onPrevClick,\n  onNextClick,\n  align = 'left',\n  showArrows,\n  getRef,\n  arrowSize = 'l',\n  ...restProps\n}: BaseGalleryProps) => {\n  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});\n  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);\n  const [shiftState, setShiftState] = React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);\n\n  const rootRef = useExternRef(getRootRef);\n  const viewportRef = useExternRef(getRef);\n\n  const { window } = useDOM();\n  const hasPointer = useAdaptivityHasPointer();\n\n  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';\n\n  const validateIndent = (value: number) => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n\n    if (value < localMin) {\n      return localMin;\n    } else if (value > localMax) {\n      return localMax;\n    }\n\n    return value;\n  };\n\n  /*\n   * Считает отступ слоя галереи\n   */\n  const calculateIndent = (targetIndex: number) => {\n    if (layoutState.current.isFullyVisible) {\n      return 0;\n    }\n\n    const targetSlide = layoutState.current.slides?.length\n      ? layoutState.current.slides[targetIndex]\n      : null;\n\n    if (targetSlide) {\n      const { coordX, width } = targetSlide;\n\n      if (isCenterWithCustomWidth) {\n        const viewportWidth = layoutState.current.viewportOffsetWidth ?? 0;\n        return viewportWidth / 2 - coordX - width / 2;\n      }\n\n      return validateIndent(-1 * coordX);\n    }\n\n    return 0;\n  };\n\n  /*\n   * Считает отступ слоя галереи во время драга\n   */\n  const calculateDragIndent = () => {\n    const localMax = layoutState.current.max ?? 0;\n    const localMin = layoutState.current.min ?? 0;\n    const indent = shiftState.shiftX + shiftState.deltaX;\n\n    if (indent > localMax) {\n      return localMax + Number((indent - localMax) / 3);\n    } else if (indent < localMin) {\n      return localMin + Number((indent - localMin) / 3);\n    }\n\n    return indent;\n  };\n\n  const initializeSlides = (options: { animation?: boolean } = {}) => {\n    const localSlides =\n      React.Children.map(children, (_item: React.ReactNode, i: number): GallerySlidesState => {\n        const elem = slidesStore.current[`slide-${i}`];\n        return {\n          coordX: elem?.offsetLeft ?? 0,\n          width: elem?.offsetWidth ?? 0,\n        };\n      }) ?? [];\n\n    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;\n    const localViewportOffsetWidth = viewportRef.current?.offsetWidth ?? 0;\n    const localLayerWidth = localSlides.reduce(\n      (val: number, slide: GallerySlidesState) => slide.width + val,\n      0,\n    );\n    const adjustShiftX =\n      localSlides.length <= layoutState.current.slides.length ||\n      layoutState.current.slides[slideIndex]?.coordX !== localSlides[slideIndex]?.coordX;\n\n    layoutState.current = {\n      containerWidth: localContainerWidth,\n      viewportOffsetWidth: localViewportOffsetWidth,\n      layerWidth: localLayerWidth,\n      max: calcMax({\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n      }),\n      min: calcMin({\n        containerWidth: localContainerWidth,\n        layerWidth: localLayerWidth,\n        slides: localSlides,\n        viewportOffsetWidth: localViewportOffsetWidth,\n        isCenterWithCustomWidth,\n        align,\n      }),\n      slides: localSlides,\n      isFullyVisible: localLayerWidth <= localContainerWidth,\n    };\n\n    setShiftState((prevState) => ({\n      ...prevState,\n      shiftX: adjustShiftX ? calculateIndent(slideIndex) : prevState.shiftX,\n      animation: options.animation ?? prevState.shiftX === validateIndent(prevState.shiftX),\n    }));\n  };\n\n  const onResize = () => {\n    if (shiftState.animation !== undefined) {\n      initializeSlides({ animation: false });\n    }\n  };\n\n  useGlobalEventListener(window, 'resize', onResize);\n\n  useIsomorphicLayoutEffect(() => {\n    initializeSlides({ animation: false });\n  }, [children, align, slideWidth]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (shiftState.animation !== undefined) {\n      setShiftState((prevState) => ({\n        ...prevState,\n        animation: true,\n        deltaX: 0,\n        shiftX: calculateIndent(slideIndex ?? 0),\n      }));\n    }\n  }, [slideIndex]);\n\n  const slideLeft = (event: React.MouseEvent) => {\n    onChange?.(slideIndex - 1);\n    onPrevClick?.(event);\n  };\n\n  const slideRight = (event: React.MouseEvent) => {\n    onChange?.(slideIndex + 1);\n    onNextClick?.(event);\n  };\n\n  /*\n   * Получает индекс слайда, к которому будет осуществлен переход\n   */\n  const getTarget = (e: TouchEvent) => {\n    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;\n    const shift =\n      shiftState.shiftX + shiftState.deltaX + expectDeltaX - (layoutState.current.max ?? 0);\n    const direction = shiftState.deltaX < 0 ? 1 : -1;\n\n    // Находим ближайшую границу слайда к текущему отступу\n    let targetIndex = layoutState.current.slides.reduce(\n      (val: number, item: GallerySlidesState, index: number) => {\n        const previousValue = Math.abs(layoutState.current.slides[val].coordX + shift);\n        const currentValue = Math.abs(item.coordX + shift);\n\n        return previousValue < currentValue ? val : index;\n      },\n      slideIndex,\n    );\n\n    if (targetIndex === slideIndex) {\n      let targetSlide = slideIndex + direction;\n\n      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {\n        if (Math.abs(shiftState.deltaX) > layoutState.current.slides[targetSlide].width * 0.05) {\n          targetIndex = targetSlide;\n        }\n      }\n    }\n\n    return targetIndex;\n  };\n\n  const isDraggable = !dragDisabled && !layoutState.current.isFullyVisible;\n\n  const onStart = (e: TouchEvent) => {\n    e.originalEvent.stopPropagation();\n    if (isDraggable) {\n      onDragStart?.(e);\n      setShiftState((prevState) => ({ ...prevState, animation: false }));\n    }\n  };\n\n  const onMoveX = (e: TouchEvent) => {\n    if (isDraggable) {\n      e.originalEvent.preventDefault();\n\n      if (e.isSlideX) {\n        if (shiftState.deltaX !== e.shiftX) {\n          setShiftState((prevState) => ({\n            ...prevState,\n            deltaX: e.shiftX,\n            dragging: e.isSlideX,\n          }));\n        }\n      }\n    }\n  };\n\n  const onEnd = (e: TouchEvent) => {\n    if (isDraggable) {\n      const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;\n      onDragEnd?.(e, targetIndex);\n\n      const nextShiftState: Partial<ShiftingState> = {\n        animation: true,\n        dragging: false,\n        deltaX: 0,\n      };\n\n      const shiftXStick = calculateDragIndent();\n      if (targetIndex !== slideIndex) {\n        // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)\n        nextShiftState.shiftX = shiftXStick;\n      }\n\n      setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));\n      if (targetIndex !== slideIndex) {\n        onChange?.(targetIndex);\n      }\n    }\n  };\n\n  const indent = shiftState.dragging ? calculateDragIndent() : shiftState.shiftX;\n\n  const layerStyle = {\n    WebkitTransform: `translateX(${indent}px)`,\n    transform: `translateX(${indent}px)`,\n    WebkitTransition: shiftState.animation\n      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n    transition: shiftState.animation\n      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`\n      : 'none',\n  };\n\n  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {\n    slidesStore.current[`slide-${slideIndex}`] = slideRef;\n  };\n\n  // shiftX is negative number <= 0, we can swipe back only if it is < 0\n  const canSlideLeft = !layoutState.current.isFullyVisible && shiftState.shiftX < 0;\n\n  const canSlideRight =\n    !layoutState.current.isFullyVisible &&\n    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side\n    ((align === 'left' &&\n      layoutState.current.containerWidth - shiftState.shiftX <\n        (layoutState.current.layerWidth ?? 0)) ||\n      // otherwise we need to check current slide index (align = right or align = center)\n      (align !== 'left' && slideIndex < layoutState.current.slides.length - 1));\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['BaseGallery'],\n        align === 'center' && styles['BaseGallery--align-center'],\n        slideWidth === 'custom' && styles['BaseGallery--custom-width'],\n        isDraggable && styles['BaseGallery--draggable'],\n      )}\n      getRootRef={rootRef}\n    >\n      <Touch\n        className={styles['BaseGallery__viewport']}\n        onStartX={onStart}\n        onMoveX={onMoveX}\n        onEnd={onEnd}\n        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}\n        getRootRef={viewportRef}\n        noSlideClick\n      >\n        <div className={styles['BaseGallery__layer']} style={layerStyle}>\n          {React.Children.map(children, (item: React.ReactNode, i: number) => (\n            <div\n              className={styles['BaseGallery__slide']}\n              key={`slide-${i}`}\n              ref={(el) => setSlideRef(el, i)}\n            >\n              {item}\n            </div>\n          ))}\n        </div>\n      </Touch>\n\n      {bullets && (\n        <div\n          aria-hidden\n          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}\n        >\n          {React.Children.map(children, (_item: React.ReactNode, index: number) => (\n            <div\n              className={classNames(\n                styles['BaseGallery__bullet'],\n                index === slideIndex && styles['BaseGallery__bullet--active'],\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      )}\n\n      {showArrows && hasPointer && canSlideLeft && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"left\"\n          onClick={slideLeft}\n          size={arrowSize}\n        />\n      )}\n      {showArrows && hasPointer && canSlideRight && (\n        <ScrollArrow\n          className={styles['BaseGallery__arrow']}\n          direction=\"right\"\n          onClick={slideRight}\n          size={arrowSize}\n        />\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["BaseGallery","ANIMATION_DURATION","LAYOUT_DEFAULT_STATE","containerWidth","viewportOffsetWidth","layerWidth","min","max","slides","isFullyVisible","SHIFT_DEFAULT_STATE","animation","undefined","shiftX","dragging","deltaX","indent","stylesBullets","dark","light","bullets","getRootRef","children","slideWidth","slideIndex","dragDisabled","onDragStart","onDragEnd","onChange","onPrevClick","onNextClick","align","showArrows","getRef","arrowSize","restProps","slidesStore","React","useRef","layoutState","shiftState","setShiftState","useState","rootRef","useExternRef","viewportRef","window","useDOM","hasPointer","useAdaptivityHasPointer","isCenterWithCustomWidth","validateIndent","value","localMax","current","localMin","calculateIndent","targetIndex","targetSlide","length","coordX","width","viewportWidth","calculateDragIndent","Number","initializeSlides","options","localSlides","Children","map","_item","i","elem","offsetLeft","offsetWidth","localContainerWidth","localViewportOffsetWidth","localLayerWidth","reduce","val","slide","adjustShiftX","calcMax","calcMin","prevState","onResize","useGlobalEventListener","useIsomorphicLayoutEffect","slideLeft","event","slideRight","getTarget","e","expectDeltaX","duration","shift","direction","item","index","previousValue","Math","abs","currentValue","isDraggable","onStart","originalEvent","stopPropagation","onMoveX","preventDefault","isSlideX","onEnd","isSlide","nextShiftState","shiftXStick","layerStyle","WebkitTransform","transform","WebkitTransition","transition","setSlideRef","slideRef","canSlideLeft","canSlideRight","RootComponent","baseClassName","classNames","Touch","className","onStartX","style","noSlideClick","div","key","ref","el","aria-hidden","ScrollArrow","onClick","size"],"mappings":";;;;+BAsCaA;;;eAAAA;;;;;;;iEAtCU;sBACI;yCACa;8BACX;wCACU;qBAChB;2CACmB;+BACZ;6BACF;uBACM;yBACD;AAIjC,MAAMC,qBAAqB;AAE3B,MAAMC,uBAAuB;IAC3BC,gBAAgB;IAChBC,qBAAqB;IACrBC,YAAY;IACZC,KAAK;IACLC,KAAK;IACLC,QAAQ,EAAE;IACVC,gBAAgB;AAClB;AAEA,MAAMC,sBAAsB;IAC1BC,WAAWC;IACXC,QAAQ;IACRC,UAAU;IACVC,QAAQ;IACRC,QAAQ;AACV;AAEA,MAAMC,gBAAgB;IACpBC,IAAI;IACJC,KAAK;AACP;AACO,MAAMnB,cAAc;QAAC,EAC1BoB,UAAU,KAAK,EACfC,UAAU,EACVC,QAAQ,EACRC,aAAa,MAAM,EACnBC,aAAa,CAAC,EACdC,eAAe,KAAK,EACpBC,WAAW,EACXC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,WAAW,EACXC,QAAQ,MAAM,EACdC,UAAU,EACVC,MAAM,EACNC,YAAY,GAAG,EAEE,WADdC;QAfHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,cAAcC,OAAMC,MAAM,CAAwC,CAAC;IACzE,MAAMC,cAAcF,OAAMC,MAAM,CAAcpC;IAC9C,MAAM,CAACsC,YAAYC,cAAc,GAAGJ,OAAMK,QAAQ,CAAgBhC;IAElE,MAAMiC,UAAUC,IAAAA,0BAAY,EAACvB;IAC7B,MAAMwB,cAAcD,IAAAA,0BAAY,EAACX;IAEjC,MAAM,EAAEa,MAAM,EAAE,GAAGC,IAAAA,WAAM;IACzB,MAAMC,aAAaC,IAAAA,gDAAuB;IAE1C,MAAMC,0BAA0B3B,eAAe,YAAYQ,UAAU;IAErE,MAAMoB,iBAAiB,CAACC;YACLb;QAAjB,MAAMc,WAAWd,CAAAA,2BAAAA,YAAYe,OAAO,CAAC/C,GAAG,cAAvBgC,sCAAAA,2BAA2B;YAC3BA;QAAjB,MAAMgB,WAAWhB,CAAAA,2BAAAA,YAAYe,OAAO,CAAChD,GAAG,cAAvBiC,sCAAAA,2BAA2B;QAE5C,IAAIa,QAAQG,UAAU;YACpB,OAAOA;QACT,OAAO,IAAIH,QAAQC,UAAU;YAC3B,OAAOA;QACT;QAEA,OAAOD;IACT;IAEA;;GAEC,GACD,MAAMI,kBAAkB,CAACC;YAKHlB;QAJpB,IAAIA,YAAYe,OAAO,CAAC7C,cAAc,EAAE;YACtC,OAAO;QACT;QAEA,MAAMiD,cAAcnB,EAAAA,8BAAAA,YAAYe,OAAO,CAAC9C,MAAM,cAA1B+B,kDAAAA,4BAA4BoB,MAAM,IAClDpB,YAAYe,OAAO,CAAC9C,MAAM,CAACiD,YAAY,GACvC;QAEJ,IAAIC,aAAa;YACf,MAAM,EAAEE,MAAM,EAAEC,KAAK,EAAE,GAAGH;YAE1B,IAAIR,yBAAyB;oBACLX;gBAAtB,MAAMuB,gBAAgBvB,CAAAA,2CAAAA,YAAYe,OAAO,CAAClD,mBAAmB,cAAvCmC,sDAAAA,2CAA2C;gBACjE,OAAOuB,gBAAgB,IAAIF,SAASC,QAAQ;YAC9C;YAEA,OAAOV,eAAe,CAAC,IAAIS;QAC7B;QAEA,OAAO;IACT;IAEA;;GAEC,GACD,MAAMG,sBAAsB;YACTxB;QAAjB,MAAMc,WAAWd,CAAAA,2BAAAA,YAAYe,OAAO,CAAC/C,GAAG,cAAvBgC,sCAAAA,2BAA2B;YAC3BA;QAAjB,MAAMgB,WAAWhB,CAAAA,2BAAAA,YAAYe,OAAO,CAAChD,GAAG,cAAvBiC,sCAAAA,2BAA2B;QAC5C,MAAMvB,SAASwB,WAAW3B,MAAM,GAAG2B,WAAWzB,MAAM;QAEpD,IAAIC,SAASqC,UAAU;YACrB,OAAOA,WAAWW,OAAO,AAAChD,CAAAA,SAASqC,QAAO,IAAK;QACjD,OAAO,IAAIrC,SAASuC,UAAU;YAC5B,OAAOA,WAAWS,OAAO,AAAChD,CAAAA,SAASuC,QAAO,IAAK;QACjD;QAEA,OAAOvC;IACT;IAEA,MAAMiD,mBAAmB,CAACC,UAAmC,CAAC,CAAC;YAUjCvB,kBACKE,sBAO/BN,wCAAmD4B;YAhBnD9B;QADF,MAAM8B,cACJ9B,CAAAA,sBAAAA,OAAM+B,QAAQ,CAACC,GAAG,CAAC/C,UAAU,CAACgD,OAAwBC;YACpD,MAAMC,OAAOpC,YAAYkB,OAAO,CAAC,CAAC,MAAM,EAAEiB,EAAE,CAAC,CAAC;gBAEpCC,kBACDA;YAFT,OAAO;gBACLZ,QAAQY,CAAAA,mBAAAA,iBAAAA,2BAAAA,KAAMC,UAAU,cAAhBD,8BAAAA,mBAAoB;gBAC5BX,OAAOW,CAAAA,oBAAAA,iBAAAA,2BAAAA,KAAME,WAAW,cAAjBF,+BAAAA,oBAAqB;YAC9B;QACF,gBANAnC,iCAAAA,sBAMM,EAAE;YAEkBM;QAA5B,MAAMgC,sBAAsBhC,CAAAA,gCAAAA,mBAAAA,QAAQW,OAAO,cAAfX,uCAAAA,iBAAiB+B,WAAW,cAA5B/B,0CAAAA,+BAAgC;YAC3BE;QAAjC,MAAM+B,2BAA2B/B,CAAAA,oCAAAA,uBAAAA,YAAYS,OAAO,cAAnBT,2CAAAA,qBAAqB6B,WAAW,cAAhC7B,8CAAAA,mCAAoC;QACrE,MAAMgC,kBAAkBV,YAAYW,MAAM,CACxC,CAACC,KAAaC,QAA8BA,MAAMnB,KAAK,GAAGkB,KAC1D;QAEF,MAAME,eACJd,YAAYR,MAAM,IAAIpB,YAAYe,OAAO,CAAC9C,MAAM,CAACmD,MAAM,IACvDpB,EAAAA,yCAAAA,YAAYe,OAAO,CAAC9C,MAAM,CAACgB,WAAW,cAAtCe,6DAAAA,uCAAwCqB,MAAM,QAAKO,0BAAAA,WAAW,CAAC3C,WAAW,cAAvB2C,8CAAAA,wBAAyBP,MAAM;QAEpFrB,YAAYe,OAAO,GAAG;YACpBnD,gBAAgBwE;YAChBvE,qBAAqBwE;YACrBvE,YAAYwE;YACZtE,KAAK2E,IAAAA,gBAAO,EAAC;gBACX1E,QAAQ2D;gBACR/D,qBAAqBwE;gBACrB1B;YACF;YACA5C,KAAK6E,IAAAA,gBAAO,EAAC;gBACXhF,gBAAgBwE;gBAChBtE,YAAYwE;gBACZrE,QAAQ2D;gBACR/D,qBAAqBwE;gBACrB1B;gBACAnB;YACF;YACAvB,QAAQ2D;YACR1D,gBAAgBoE,mBAAmBF;QACrC;QAEAlC,cAAc,CAAC2C;gBAGFlB;mBAHiB,4CACzBkB;gBACHvE,QAAQoE,eAAezB,gBAAgBhC,cAAc4D,UAAUvE,MAAM;gBACrEF,WAAWuD,CAAAA,qBAAAA,QAAQvD,SAAS,cAAjBuD,gCAAAA,qBAAqBkB,UAAUvE,MAAM,KAAKsC,eAAeiC,UAAUvE,MAAM;;QACtF;IACF;IAEA,MAAMwE,WAAW;QACf,IAAI7C,WAAW7B,SAAS,KAAKC,WAAW;YACtCqD,iBAAiB;gBAAEtD,WAAW;YAAM;QACtC;IACF;IAEA2E,IAAAA,8CAAsB,EAACxC,QAAQ,UAAUuC;IAEzCE,IAAAA,oDAAyB,EAAC;QACxBtB,iBAAiB;YAAEtD,WAAW;QAAM;IACtC,GAAG;QAACW;QAAUS;QAAOR;KAAW;IAEhCgE,IAAAA,oDAAyB,EAAC;QACxB,IAAI/C,WAAW7B,SAAS,KAAKC,WAAW;YACtC6B,cAAc,CAAC2C,YAAe,4CACzBA;oBACHzE,WAAW;oBACXI,QAAQ;oBACRF,QAAQ2C,gBAAgBhC,uBAAAA,wBAAAA,aAAc;;QAE1C;IACF,GAAG;QAACA;KAAW;IAEf,MAAMgE,YAAY,CAACC;QACjB7D,qBAAAA,+BAAAA,SAAWJ,aAAa;QACxBK,wBAAAA,kCAAAA,YAAc4D;IAChB;IAEA,MAAMC,aAAa,CAACD;QAClB7D,qBAAAA,+BAAAA,SAAWJ,aAAa;QACxBM,wBAAAA,kCAAAA,YAAc2D;IAChB;IAEA;;GAEC,GACD,MAAME,YAAY,CAACC;QACjB,MAAMC,eAAe,AAACrD,WAAWzB,MAAM,GAAG6E,EAAEE,QAAQ,GAAI,MAAM;YAEJvD;QAD1D,MAAMwD,QACJvD,WAAW3B,MAAM,GAAG2B,WAAWzB,MAAM,GAAG8E,eAAgBtD,CAAAA,CAAAA,2BAAAA,YAAYe,OAAO,CAAC/C,GAAG,cAAvBgC,sCAAAA,2BAA2B,CAAA;QACrF,MAAMyD,YAAYxD,WAAWzB,MAAM,GAAG,IAAI,IAAI,CAAC;QAE/C,sDAAsD;QACtD,IAAI0C,cAAclB,YAAYe,OAAO,CAAC9C,MAAM,CAACsE,MAAM,CACjD,CAACC,KAAakB,MAA0BC;YACtC,MAAMC,gBAAgBC,KAAKC,GAAG,CAAC9D,YAAYe,OAAO,CAAC9C,MAAM,CAACuE,IAAI,CAACnB,MAAM,GAAGmC;YACxE,MAAMO,eAAeF,KAAKC,GAAG,CAACJ,KAAKrC,MAAM,GAAGmC;YAE5C,OAAOI,gBAAgBG,eAAevB,MAAMmB;QAC9C,GACA1E;QAGF,IAAIiC,gBAAgBjC,YAAY;YAC9B,IAAIkC,cAAclC,aAAawE;YAE/B,IAAItC,eAAe,KAAKA,cAAcnB,YAAYe,OAAO,CAAC9C,MAAM,CAACmD,MAAM,EAAE;gBACvE,IAAIyC,KAAKC,GAAG,CAAC7D,WAAWzB,MAAM,IAAIwB,YAAYe,OAAO,CAAC9C,MAAM,CAACkD,YAAY,CAACG,KAAK,GAAG,MAAM;oBACtFJ,cAAcC;gBAChB;YACF;QACF;QAEA,OAAOD;IACT;IAEA,MAAM8C,cAAc,CAAC9E,gBAAgB,CAACc,YAAYe,OAAO,CAAC7C,cAAc;IAExE,MAAM+F,UAAU,CAACZ;QACfA,EAAEa,aAAa,CAACC,eAAe;QAC/B,IAAIH,aAAa;YACf7E,wBAAAA,kCAAAA,YAAckE;YACdnD,cAAc,CAAC2C,YAAe,4CAAKA;oBAAWzE,WAAW;;QAC3D;IACF;IAEA,MAAMgG,UAAU,CAACf;QACf,IAAIW,aAAa;YACfX,EAAEa,aAAa,CAACG,cAAc;YAE9B,IAAIhB,EAAEiB,QAAQ,EAAE;gBACd,IAAIrE,WAAWzB,MAAM,KAAK6E,EAAE/E,MAAM,EAAE;oBAClC4B,cAAc,CAAC2C,YAAe,4CACzBA;4BACHrE,QAAQ6E,EAAE/E,MAAM;4BAChBC,UAAU8E,EAAEiB,QAAQ;;gBAExB;YACF;QACF;IACF;IAEA,MAAMC,QAAQ,CAAClB;QACb,IAAIW,aAAa;YACf,MAAM9C,cAAcmC,EAAEmB,OAAO,GAAGpB,UAAUC,KAAKpE,uBAAAA,wBAAAA,aAAc;YAC7DG,sBAAAA,gCAAAA,UAAYiE,GAAGnC;YAEf,MAAMuD,iBAAyC;gBAC7CrG,WAAW;gBACXG,UAAU;gBACVC,QAAQ;YACV;YAEA,MAAMkG,cAAclD;YACpB,IAAIN,gBAAgBjC,YAAY;gBAC9B,6FAA6F;gBAC7FwF,eAAenG,MAAM,GAAGoG;YAC1B;YAEAxE,cAAc,CAAC2C,YAAe,qBAAKA,WAAc4B;YACjD,IAAIvD,gBAAgBjC,YAAY;gBAC9BI,qBAAAA,+BAAAA,SAAW6B;YACb;QACF;IACF;IAEA,MAAMzC,SAASwB,WAAW1B,QAAQ,GAAGiD,wBAAwBvB,WAAW3B,MAAM;IAE9E,MAAMqG,aAAa;QACjBC,iBAAiB,CAAC,WAAW,EAAEnG,OAAO,GAAG,CAAC;QAC1CoG,WAAW,CAAC,WAAW,EAAEpG,OAAO,GAAG,CAAC;QACpCqG,kBAAkB7E,WAAW7B,SAAS,GAClC,CAAC,kBAAkB,EAAEV,mBAAmB,6BAA6B,CAAC,GACtE;QACJqH,YAAY9E,WAAW7B,SAAS,GAC5B,CAAC,UAAU,EAAEV,mBAAmB,6BAA6B,CAAC,GAC9D;IACN;IAEA,MAAMsH,cAAc,CAACC,UAAiChG;QACpDY,YAAYkB,OAAO,CAAC,CAAC,MAAM,EAAE9B,WAAW,CAAC,CAAC,GAAGgG;IAC/C;IAEA,sEAAsE;IACtE,MAAMC,eAAe,CAAClF,YAAYe,OAAO,CAAC7C,cAAc,IAAI+B,WAAW3B,MAAM,GAAG;QAOzE0B;IALP,MAAMmF,gBACJ,CAACnF,YAAYe,OAAO,CAAC7C,cAAc,IACnC,+FAA+F;IAC9F,CAAA,AAACsB,UAAU,UACVQ,YAAYe,OAAO,CAACnD,cAAc,GAAGqC,WAAW3B,MAAM,GACnD0B,CAAAA,CAAAA,kCAAAA,YAAYe,OAAO,CAACjD,UAAU,cAA9BkC,6CAAAA,kCAAkC,CAAA,KACrC,mFAAmF;IAClFR,UAAU,UAAUP,aAAae,YAAYe,OAAO,CAAC9C,MAAM,CAACmD,MAAM,GAAG,CAAC;IAE3E,qBACE,qBAACgE,4BAAa,8CACRxF;QACJyF,eAAeC,IAAAA,gBAAU,qBAEvB9F,UAAU,6CACVR,eAAe,6CACfgF;QAEFlF,YAAYsB;sBAEZ,qBAACmF,YAAK;QACJC,SAAS;QACTC,UAAUxB;QACVG,SAASA;QACTG,OAAOA;QACPmB,OAAO;YAAEpE,OAAOtC,eAAe,WAAW,SAASA;QAAW;QAC9DF,YAAYwB;QACZqF,cAAAA;qBAEA,qBAACC;QAAIJ,SAAS;QAAgCE,OAAOf;OAClD7E,OAAM+B,QAAQ,CAACC,GAAG,CAAC/C,UAAU,CAAC2E,MAAuB1B,kBACpD,qBAAC4D;YACCJ,SAAS;YACTK,KAAK,CAAC,MAAM,EAAE7D,EAAE,CAAC;YACjB8D,KAAK,CAACC,KAAOf,YAAYe,IAAI/D;WAE5B0B,UAMR7E,yBACC,qBAAC+G;QACCI,eAAAA;QACAR,WAAWF,IAAAA,gBAAU,8BAAiC5G,aAAa,CAACG,QAAQ;OAE3EiB,OAAM+B,QAAQ,CAACC,GAAG,CAAC/C,UAAU,CAACgD,OAAwB4B,sBACrD,qBAACiC;YACCJ,WAAWF,IAAAA,gBAAU,6BAEnB3B,UAAU1E;YAEZ4G,KAAKlC;cAMZlE,cAAcgB,cAAcyE,8BAC3B,qBAACe,wBAAW;QACVT,SAAS;QACT/B,WAAU;QACVyC,SAASjD;QACTkD,MAAMxG;QAGTF,cAAcgB,cAAc0E,+BAC3B,qBAACc,wBAAW;QACVT,SAAS;QACT/B,WAAU;QACVyC,SAAS/C;QACTgD,MAAMxG;;AAKhB"}

package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { BaseGalleryProps } from '../types';
-export declare const CarouselBase: ({ bullets, getRootRef, children, slideWidth, slideIndex, isDraggable: isDraggableProp, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;
+export declare const CarouselBase: ({ bullets, getRootRef, children, slideWidth, slideIndex, dragDisabled, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.JSX.Element;
 //# sourceMappingURL=CarouselBase.d.ts.map

package/dist/cjs/components/BaseGallery/CarouselBase/CarouselBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,gBAAgB,EAAsB,MAAM,UAAU,CAAC;AAchE,eAAO,MAAM,YAAY,4MAiBtB,gBAAgB,sBAkVlB,CAAC"}
+{"version":3,"file":"CarouselBase.d.ts","sourceRoot":"","sources":["../../../../../src/components/BaseGallery/CarouselBase/CarouselBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAE,gBAAgB,EAAsB,MAAM,UAAU,CAAC;AAchE,eAAO,MAAM,YAAY,4LAiBtB,gBAAgB,sBAsVlB,CAAC"}