@vkontakte/vkui 4.21.0 → 4.22.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":["FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","FocusTrap","Component","onClose","noop","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","activeElement","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","AppRootContext","keyboardInput","focusOnTrapMount","current","contains","length","focus","set","nodes","querySelectorAll","forEach","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;AAEA,IAAMA,kBAA0B,GAAGC,uCAAwBC,IAAxB,EAAnC;;AAQO,IAAMC,SAAmC,GAAG,SAAtCA,SAAsC,OAQ7C;AAAA,4BAPJC,SAOI;AAAA,MAPJA,SAOI,+BAPQ,KAOR;AAAA,0BANJC,OAMI;AAAA,MANJA,OAMI,6BANMC,WAMN;AAAA,+BALJC,YAKI;AAAA,MALJA,YAKI,kCALW,IAKX;AAAA,0BAJJC,OAII;AAAA,MAJJA,OAII,6BAJM,CAIN;AAAA,MAHJC,UAGI,QAHJA,UAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADDC,SACC;AACJ,MAAMC,GAAG,GAAG,gCAA0BH,UAA1B,CAAZ;;AAEA,gBAA6B,kBAA7B;AAAA,MAAQI,QAAR,WAAQA,QAAR;AAAA,MAAkBC,MAAlB,WAAkBA,MAAlB;;AACA,MAAMC,aAAa,GAAGF,QAAQ,CAACE,aAA/B;;AAEA,wBAA4CC,KAAK,CAACC,QAAN,CAA8B,IAA9B,CAA5C;AAAA;AAAA,MAAOC,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAA4CH,KAAK,CAACC,QAAN,CAA4B,IAA5B,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB,uBAPI,CASJ;;;AAEA,0BAA0BL,KAAK,CAACM,UAAN,CAAiBC,8BAAjB,CAA1B;AAAA,MAAQC,aAAR,qBAAQA,aAAR;;AACA,MAAMC,gBAAgB,GAAG,4BAAW,YAAM;AAAA;;AACxC,QAAID,aAAa,IAAI,kBAACZ,GAAG,CAACc,OAAL,yCAAC,aAAaC,QAAb,CAAsBZ,aAAtB,CAAD,CAAjB,IAA0DG,cAA1D,aAA0DA,cAA1D,eAA0DA,cAAc,CAAEU,MAA9E,EAAsF;AACpFV,MAAAA,cAAc,CAAC,CAAD,CAAd,CAAkBW,KAAlB;AACD;AACF,GAJwB,EAItBrB,OAJsB,CAAzB;AAKA,4DAA0B,YAAM;AAC9BiB,IAAAA,gBAAgB,CAACK,GAAjB;AACD,GAFD,EAEG,EAFH,EAjBI,CAqBJ;;AAEA,4DAA0B,YAAM;AAAA;;AAC9B,QAAI,CAAClB,GAAG,CAACc,OAAT,EAAkB;AAChB,aAAO,kBAAP;AACD;;AAED,QAAMK,KAAoB,GAAG,EAA7B,CAL8B,CAM9B;;AACA,qBAAAnB,GAAG,CAACc,OAAJ,gEAAaM,gBAAb,CAA8BhC,kBAA9B,EAAkDiC,OAAlD,CAA0D,UAACC,WAAD,EAAiB;AACzE,kCAAgCpB,MAAM,CAACqB,gBAAP,CAAwBD,WAAxB,CAAhC;AAAA,UAAQE,OAAR,yBAAQA,OAAR;AAAA,UAAiBC,UAAjB,yBAAiBA,UAAjB;;AAEA,UAAID,OAAO,KAAK,MAAZ,IAAsBC,UAAU,KAAK,QAAzC,EAAmD;AACjDN,QAAAA,KAAK,CAACO,IAAN,CAAWJ,WAAX;AACD;AACF,KAND;;AAQA,QAAIH,KAAJ,aAAIA,KAAJ,eAAIA,KAAK,CAAEH,MAAX,EAAmB;AACjBT,MAAAA,iBAAiB,CAACY,KAAD,CAAjB;AACD;;AAED,WAAO,kBAAP;AACD,GApBD,EAoBG,CAACrB,QAAD,CApBH,EAvBI,CA6CJ;;AAEA,MAAM6B,kBAAkB,GAAG,4BAAW,YAAM;AAC1C,QAAInB,cAAJ,EAAoB;AAClBA,MAAAA,cAAc,CAACS,KAAf;AACD;AACF,GAJ0B,EAIxBrB,OAJwB,CAA3B;AAKA,4DAA0B,YAAM;AAC9B,QAAID,YAAJ,EAAkB;AAChBc,MAAAA,iBAAiB,CAACN,aAAD,CAAjB;AAEA,aAAO,YAAM;AACXwB,QAAAA,kBAAkB,CAACT,GAAnB;AACD,OAFD;AAGD;;AAED,WAAO,kBAAP;AACD,GAVD,EAUG,CAACvB,YAAD,CAVH;;AAYA,MAAMiC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,CAAD,EAAsB;AAC9C,QAAI,+BAAWA,CAAX,MAAkBC,oBAAKC,GAAvB,IAA8BzB,cAA9B,aAA8BA,cAA9B,eAA8BA,cAAc,CAAEU,MAAlD,EAA0D;AACxD,UAAMgB,OAAO,GAAG1B,cAAc,CAACU,MAAf,GAAwB,CAAxC;AACA,UAAMiB,SAAS,GAAG3B,cAAc,CAAC4B,SAAf,CAAyB,UAACC,IAAD;AAAA,eAAUA,IAAI,KAAKN,CAAC,CAACO,MAArB;AAAA,OAAzB,CAAlB;AAEA,UAAMC,oBAAoB,GAAGJ,SAAS,KAAK,CAAC,CAAf,IAAoBA,SAAS,KAAKD,OAAd,IAAyB,CAACH,CAAC,CAACS,QAA7E;;AAEA,UAAID,oBAAoB,IAAIJ,SAAS,KAAK,CAAd,IAAmBJ,CAAC,CAACS,QAAjD,EAA2D;AACzDT,QAAAA,CAAC,CAACU,cAAF;AAEA,YAAMJ,IAAI,GAAG7B,cAAc,CAAC+B,oBAAoB,GAAG,CAAH,GAAOL,OAA5B,CAA3B;;AAEA,YAAIG,IAAI,KAAKhC,aAAb,EAA4B;AAC1BgC,UAAAA,IAAI,CAAClB,KAAL;AACD;;AAED,eAAO,KAAP;AACD;AACF;;AAED,QAAI,+BAAWY,CAAX,MAAkBC,oBAAKU,MAA3B,EAAmC;AACjC/C,MAAAA,OAAO;AACR;;AAED,WAAO,IAAP;AACD,GAzBD;;AA0BA,sDAAuBQ,QAAvB,EAAiC,SAAjC,EAA4C2B,iBAA5C,EAA+D;AAAEa,IAAAA,OAAO,EAAE;AAAX,GAA/D;AAEA,SACE,qCAAC,SAAD;AAAW,IAAA,GAAG,EAAEzC;AAAhB,KAAyBD,SAAzB,GACGD,QADH,CADF;AAKD,CAzGM","sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { noop } from '../../lib/utils';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\n\nexport interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {\n  onClose?: (props?: any) => void;\n  restoreFocus?: boolean;\n  timeout?: number;\n}\n\nexport const FocusTrap: React.FC<FocusTrapProps> = ({\n  Component = 'div',\n  onClose = noop,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n  const activeElement = document.activeElement as HTMLElement;\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[]>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (keyboardInput && !ref.current?.contains(activeElement) && focusableNodes?.length) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return noop();\n    }\n\n    const nodes: HTMLElement[] = [];\n    // eslint-disable-next-line no-restricted-properties\n    ref.current?.querySelectorAll(FOCUSABLE_ELEMENTS).forEach((focusableEl) => {\n      const { display, visibility } = window.getComputedStyle(focusableEl);\n\n      if (display !== 'none' && visibility !== 'hidden') {\n        nodes.push(focusableEl as HTMLElement);\n      }\n    });\n\n    if (nodes?.length) {\n      setFocusableNodes(nodes);\n    }\n\n    return noop();\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus) {\n      setRestoreFocusTo(activeElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return noop();\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || targetIdx === lastIdx && !e.shiftKey;\n\n      if (shouldFocusFirstNode || targetIdx === 0 && e.shiftKey) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, { capture: true });\n\n  return (\n    <Component ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"file":"FocusTrap.js"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"names":["FOCUSABLE_ELEMENTS","FOCUSABLE_ELEMENTS_LIST","join","FocusTrap","Component","onClose","noop","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","activeElement","React","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","AppRootContext","keyboardInput","focusOnTrapMount","current","contains","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","Keys","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { FOCUSABLE_ELEMENTS_LIST, Keys, pressedKey } from '../../lib/accessibility';\nimport { useDOM } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { noop } from '../../lib/utils';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\n\nexport interface FocusTrapProps extends React.AllHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement>, HasComponent {\n  onClose?: (props?: any) => void;\n  restoreFocus?: boolean;\n  timeout?: number;\n}\n\nexport const FocusTrap: React.FC<FocusTrapProps> = ({\n  Component = 'div',\n  onClose = noop,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n  const activeElement = document.activeElement as HTMLElement;\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[]>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (keyboardInput && !ref.current?.contains(activeElement) && focusableNodes?.length) {\n      focusableNodes[0].focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    focusOnTrapMount.set();\n  }, []);\n\n  // HANDLE FOCUSABLE NODES\n\n  useIsomorphicLayoutEffect(() => {\n    if (!ref.current) {\n      return noop();\n    }\n\n    const nodes: HTMLElement[] = [];\n    Array.prototype.forEach.call(\n      // eslint-disable-next-line no-restricted-properties\n      ref.current.querySelectorAll(FOCUSABLE_ELEMENTS),\n      (focusableEl: Element) => {\n        const { display, visibility } = window.getComputedStyle(focusableEl);\n\n        if (display !== 'none' && visibility !== 'hidden') {\n          nodes.push(focusableEl as HTMLElement);\n        }\n      },\n    );\n\n    if (nodes?.length) {\n      setFocusableNodes(nodes);\n    }\n\n    return noop();\n  }, [children]);\n\n  // HANDLE TRAP UNMOUNT\n\n  const focusOnTrapUnmount = useTimeout(() => {\n    if (restoreFocusTo) {\n      restoreFocusTo.focus();\n    }\n  }, timeout);\n  useIsomorphicLayoutEffect(() => {\n    if (restoreFocus) {\n      setRestoreFocusTo(activeElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return noop();\n  }, [restoreFocus]);\n\n  const onDocumentKeydown = (e: KeyboardEvent) => {\n    if (pressedKey(e) === Keys.TAB && focusableNodes?.length) {\n      const lastIdx = focusableNodes.length - 1;\n      const targetIdx = focusableNodes.findIndex((node) => node === e.target);\n\n      const shouldFocusFirstNode = targetIdx === -1 || targetIdx === lastIdx && !e.shiftKey;\n\n      if (shouldFocusFirstNode || targetIdx === 0 && e.shiftKey) {\n        e.preventDefault();\n\n        const node = focusableNodes[shouldFocusFirstNode ? 0 : lastIdx];\n\n        if (node !== activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, { capture: true });\n\n  return (\n    <Component ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"file":"FocusTrap.js"}

package/dist/cjs/components/FormLayoutGroup/FormLayoutGroup.js

@@ -50,6 +50,7 @@ var FormLayoutGroup = function FormLayoutGroup(_ref) {
       'FormLayoutGroup--removable': isRemovable
     })
   }, restProps), isRemovable ? (0, _jsxRuntime.createScopedElement)(_Removable.Removable, {
+    vkuiClass: "FormLayoutGroup__removable",
     align: "start",
     removePlaceholder: removePlaceholder,
     onRemove: function onRemove(e) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"names":["FormLayoutGroup","children","mode","removable","removePlaceholder","onRemove","getRootRef","restProps","platform","sizeY","isRemovable","rootEl","e","current"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAWA,IAAMA,eAA+C,GAAG,SAAlDA,eAAkD,OAQ5B;AAAA,MAP1BC,QAO0B,QAP1BA,QAO0B;AAAA,uBAN1BC,IAM0B;AAAA,MAN1BA,IAM0B,0BANnB,UAMmB;AAAA,MAL1BC,SAK0B,QAL1BA,SAK0B;AAAA,mCAJ1BC,iBAI0B;AAAA,MAJ1BA,iBAI0B,sCAJN,SAIM;AAAA,MAH1BC,SAG0B,QAH1BA,QAG0B;AAAA,MAF1BC,UAE0B,QAF1BA,UAE0B;AAAA,MADvBC,SACuB;AAC1B,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,MAAMC,WAAW,GAAGP,SAAS,IAAID,IAAI,KAAK,YAA1C;AACA,MAAMS,MAAM,GAAG,gCAAaL,UAAb,CAAf;AAEA,SACE;AACE,IAAA,GAAG,EAAEK,MADP;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,iBAAb,EAAgCH,QAAhC,CADS,mCAEiBC,KAFjB,8BAGWP,IAHX,GAGmB;AAC1B,oCAA8BQ;AADJ,KAHnB;AAFb,KASMH,SATN,GAUGG,WAAW,GACR,qCAAC,oBAAD;AAAW,IAAA,KAAK,EAAC,OAAjB;AAAyB,IAAA,iBAAiB,EAAEN,iBAA5C;AAA+D,IAAA,QAAQ,EAAE,kBAACQ,CAAD;AAAA,aAAOP,SAAQ,CAACO,CAAD,EAAID,MAAJ,aAAIA,MAAJ,uBAAIA,MAAM,CAAEE,OAAZ,CAAf;AAAA;AAAzE,KAA+GZ,QAA/G,CADQ,GAERA,QAZN,CADF;AAiBD,CA/BD;;eAiCeD,e","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport './FormLayoutGroup.css';\n\nexport interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   */\n  removable?: boolean;\n}\n\nconst FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({\n  children,\n  mode = 'vertical',\n  removable,\n  removePlaceholder = 'Удалить',\n  onRemove,\n  getRootRef,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      vkuiClass={classNames(\n        getClassName('FormLayoutGroup', platform),\n        `FormLayoutGroup--sizeY-${sizeY}`,\n        `FormLayoutGroup--${mode}`, {\n          'FormLayoutGroup--removable': isRemovable,\n        },\n      )}\n      {...restProps}>\n      {isRemovable\n        ? <Removable align=\"start\" removePlaceholder={removePlaceholder} onRemove={(e) => onRemove(e, rootEl?.current)}>{children}</Removable>\n        : children\n      }\n    </div>\n  );\n};\n\nexport default FormLayoutGroup;\n"],"file":"FormLayoutGroup.js"}
+{"version":3,"sources":["../../../../src/components/FormLayoutGroup/FormLayoutGroup.tsx"],"names":["FormLayoutGroup","children","mode","removable","removePlaceholder","onRemove","getRootRef","restProps","platform","sizeY","isRemovable","rootEl","e","current"],"mappings":";;;;;;;;;;;;;;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAWA,IAAMA,eAA+C,GAAG,SAAlDA,eAAkD,OAQ5B;AAAA,MAP1BC,QAO0B,QAP1BA,QAO0B;AAAA,uBAN1BC,IAM0B;AAAA,MAN1BA,IAM0B,0BANnB,UAMmB;AAAA,MAL1BC,SAK0B,QAL1BA,SAK0B;AAAA,mCAJ1BC,iBAI0B;AAAA,MAJ1BA,iBAI0B,sCAJN,SAIM;AAAA,MAH1BC,SAG0B,QAH1BA,QAG0B;AAAA,MAF1BC,UAE0B,QAF1BA,UAE0B;AAAA,MADvBC,SACuB;AAC1B,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,MAAMC,WAAW,GAAGP,SAAS,IAAID,IAAI,KAAK,YAA1C;AACA,MAAMS,MAAM,GAAG,gCAAaL,UAAb,CAAf;AAEA,SACE;AACE,IAAA,GAAG,EAAEK,MADP;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,iBAAb,EAAgCH,QAAhC,CADS,mCAEiBC,KAFjB,8BAGWP,IAHX,GAGmB;AAC1B,oCAA8BQ;AADJ,KAHnB;AAFb,KASMH,SATN,GAUGG,WAAW,GAER,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAC,4BADZ;AAEE,IAAA,KAAK,EAAC,OAFR;AAGE,IAAA,iBAAiB,EAAEN,iBAHrB;AAIE,IAAA,QAAQ,EAAE,kBAACQ,CAAD;AAAA,aAAOP,SAAQ,CAACO,CAAD,EAAID,MAAJ,aAAIA,MAAJ,uBAAIA,MAAM,CAAEE,OAAZ,CAAf;AAAA;AAJZ,KAMGZ,QANH,CAFQ,GAWRA,QArBN,CADF;AA0BD,CAxCD;;eA0CeD,e","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport './FormLayoutGroup.css';\n\nexport interface FormLayoutGroupProps extends React.HTMLAttributes<HTMLDivElement>, RemovableProps, HasRootRef<HTMLDivElement> {\n  mode?: 'vertical' | 'horizontal';\n  /**\n   * Только для режима horizontal. Дает возможность удалить всю группу `FormItem`.\n   */\n  removable?: boolean;\n}\n\nconst FormLayoutGroup: React.FC<FormLayoutGroupProps> = ({\n  children,\n  mode = 'vertical',\n  removable,\n  removePlaceholder = 'Удалить',\n  onRemove,\n  getRootRef,\n  ...restProps\n}: FormLayoutGroupProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const isRemovable = removable && mode === 'horizontal';\n  const rootEl = useExternRef(getRootRef);\n\n  return (\n    <div\n      ref={rootEl}\n      vkuiClass={classNames(\n        getClassName('FormLayoutGroup', platform),\n        `FormLayoutGroup--sizeY-${sizeY}`,\n        `FormLayoutGroup--${mode}`, {\n          'FormLayoutGroup--removable': isRemovable,\n        },\n      )}\n      {...restProps}>\n      {isRemovable\n        ? (\n          <Removable\n            vkuiClass=\"FormLayoutGroup__removable\"\n            align=\"start\"\n            removePlaceholder={removePlaceholder}\n            onRemove={(e) => onRemove(e, rootEl?.current)}\n          >\n            {children}\n          </Removable>\n        )\n        : children\n      }\n    </div>\n  );\n};\n\nexport default FormLayoutGroup;\n"],"file":"FormLayoutGroup.js"}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import './GridAvatar.css';
+export interface GridAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    src?: string[];
+    size?: number;
+    shadow?: boolean;
+}
+export declare const GridAvatar: React.FC<GridAvatarProps>;

package/dist/cjs/components/GridAvatar/GridAvatar.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridAvatar = void 0;
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _Avatar = _interopRequireWildcard(require("../Avatar/Avatar"));
+
+var _classNames = require("../../lib/classNames");
+
+var _warnOnce = require("../../lib/warnOnce");
+
+var _excluded = ["src", "size", "shadow"];
+var MIN_GRID_LENGTH = 1;
+var MAX_GRID_LENGTH = 4;
+var warn = (0, _warnOnce.warnOnce)('GridAvatar');
+
+var GridAvatar = function GridAvatar(_ref) {
+  var _ref$src = _ref.src,
+      src = _ref$src === void 0 ? [] : _ref$src,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _Avatar.AVATAR_DEFAULT_SIZE : _ref$size,
+      _ref$shadow = _ref.shadow,
+      shadow = _ref$shadow === void 0 ? _Avatar.AVATAR_DEFAULT_SHADOW : _ref$shadow,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  if (process.env.NODE_ENV === 'development' && src.length > MAX_GRID_LENGTH) {
+    warn("\u0420\u0430\u0437\u043C\u0435\u0440 \u043F\u0440\u043E\u043F\u0430 src (".concat(src.length, ") \u0431\u043E\u043B\u044C\u0448\u0435 \u043C\u0430\u043A\u0441\u0438\u043C\u0430\u043B\u044C\u043D\u043E\u0433\u043E (").concat(MAX_GRID_LENGTH, ")"));
+  }
+
+  var count = Math.max(MIN_GRID_LENGTH, Math.min(MAX_GRID_LENGTH, src.length));
+  return (0, _jsxRuntime.createScopedElement)(_Avatar.default, (0, _extends2.default)({}, restProps, {
+    vkuiClass: (0, _classNames.classNames)('GridAvatar', "GridAvatar--images-".concat(count)),
+    shadow: shadow,
+    size: size
+  }), (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "GridAvatar__in"
+  }, src.slice(0, MAX_GRID_LENGTH).map(function (src, i) {
+    return (0, _jsxRuntime.createScopedElement)("div", {
+      key: i,
+      vkuiClass: "GridAvatar__item",
+      style: {
+        backgroundImage: "url(".concat(src, ")")
+      }
+    });
+  })));
+};
+
+exports.GridAvatar = GridAvatar;
+//# sourceMappingURL=GridAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/GridAvatar/GridAvatar.tsx"],"names":["MIN_GRID_LENGTH","MAX_GRID_LENGTH","warn","GridAvatar","src","size","AVATAR_DEFAULT_SIZE","shadow","AVATAR_DEFAULT_SHADOW","restProps","process","env","NODE_ENV","length","count","Math","max","min","slice","map","i","backgroundImage"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;;AAUA,IAAMA,eAAe,GAAG,CAAxB;AACA,IAAMC,eAAe,GAAG,CAAxB;AAEA,IAAMC,IAAI,GAAG,wBAAS,YAAT,CAAb;;AAEO,IAAMC,UAAqC,GAAG,SAAxCA,UAAwC,OAK9B;AAAA,sBAJrBC,GAIqB;AAAA,MAJrBA,GAIqB,yBAJf,EAIe;AAAA,uBAHrBC,IAGqB;AAAA,MAHrBA,IAGqB,0BAHdC,2BAGc;AAAA,yBAFrBC,MAEqB;AAAA,MAFrBA,MAEqB,4BAFZC,6BAEY;AAAA,MADlBC,SACkB;;AACrB,MAAIC,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAAzB,IAA0CR,GAAG,CAACS,MAAJ,GAAaZ,eAA3D,EAA4E;AAC1EC,IAAAA,IAAI,oFAAsBE,GAAG,CAACS,MAA1B,oIAA2DZ,eAA3D,OAAJ;AACD;;AAED,MAAMa,KAAK,GAAGC,IAAI,CAACC,GAAL,CAAShB,eAAT,EAA0Be,IAAI,CAACE,GAAL,CAAShB,eAAT,EAA0BG,GAAG,CAACS,MAA9B,CAA1B,CAAd;AAEA,SACE,qCAAC,eAAD,6BACMJ,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,YADS,+BAEaK,KAFb,EAFb;AAME,IAAA,MAAM,EAAEP,MANV;AAOE,IAAA,IAAI,EAAEF;AAPR,MASE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGD,GAAG,CAACc,KAAJ,CAAU,CAAV,EAAajB,eAAb,EAA8BkB,GAA9B,CAAkC,UAACf,GAAD,EAAMgB,CAAN,EAAY;AAC7C,WACE;AACE,MAAA,GAAG,EAAEA,CADP;AAEE,MAAA,SAAS,EAAC,kBAFZ;AAGE,MAAA,KAAK,EAAE;AAAEC,QAAAA,eAAe,gBAASjB,GAAT;AAAjB;AAHT,MADF;AAQD,GATA,CADH,CATF,CADF;AAwBD,CApCM","sourcesContent":["import * as React from 'react';\nimport Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';\nimport { classNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasRootRef } from '../../types';\nimport './GridAvatar.css';\n\nexport interface GridAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {\n  src?: string[];\n  size?: number;\n  shadow?: boolean;\n}\n\nconst MIN_GRID_LENGTH = 1;\nconst MAX_GRID_LENGTH = 4;\n\nconst warn = warnOnce('GridAvatar');\n\nexport const GridAvatar: React.FC<GridAvatarProps> = ({\n  src = [],\n  size = AVATAR_DEFAULT_SIZE,\n  shadow = AVATAR_DEFAULT_SHADOW,\n  ...restProps\n}: GridAvatarProps) => {\n  if (process.env.NODE_ENV === 'development' && src.length > MAX_GRID_LENGTH) {\n    warn(`Размер пропа src (${src.length}) больше максимального (${MAX_GRID_LENGTH})`);\n  }\n\n  const count = Math.max(MIN_GRID_LENGTH, Math.min(MAX_GRID_LENGTH, src.length));\n\n  return (\n    <Avatar\n      {...restProps}\n      vkuiClass={classNames(\n        'GridAvatar',\n        `GridAvatar--images-${count}`,\n      )}\n      shadow={shadow}\n      size={size}\n    >\n      <div vkuiClass=\"GridAvatar__in\">\n        {src.slice(0, MAX_GRID_LENGTH).map((src, i) => {\n          return (\n            <div\n              key={i}\n              vkuiClass=\"GridAvatar__item\"\n              style={{ backgroundImage: `url(${src})` }}\n            >\n            </div>\n          );\n        })}\n      </div>\n    </Avatar>\n  );\n};\n"],"file":"GridAvatar.js"}

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { HasRootRef } from '../../types';
+import './InitialsAvatar.css';
+/**
+ * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.
+ * @example user.id % 6 + 1
+ */
+export declare type InitialsAvatarNumberGradients = 1 | 2 | 3 | 4 | 5 | 6;
+export declare type InitialsAvatarTextGradients = 'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet';
+export interface InitialsAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    children?: React.ReactNode;
+    /**
+     * `'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet'`
+     *
+     * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:
+     *
+     * 1: 'red'
+     *
+     * 2: 'orange'
+     *
+     * 3: 'yellow'
+     *
+     * 4: 'green'
+     *
+     * 5: 'l-blue'
+     *
+     * 6: 'violet'
+     */
+    gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients;
+    size?: number;
+    shadow?: boolean;
+}
+export declare const InitialsAvatar: React.FC<InitialsAvatarProps>;

package/dist/cjs/components/InitialsAvatar/InitialsAvatar.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InitialsAvatar = void 0;
+
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classNames = require("../../lib/classNames");
+
+var _Avatar = _interopRequireWildcard(require("../Avatar/Avatar"));
+
+var _excluded = ["size", "shadow", "children", "gradientColor", "style"];
+var COLORS_NUMBER_TO_TEXT_MAP = {
+  1: 'red',
+  2: 'orange',
+  3: 'yellow',
+  4: 'green',
+  5: 'l-blue',
+  6: 'violet'
+};
+
+function getInitialsFontSize(avatarSize) {
+  var calculatedFontSize = Math.ceil(avatarSize * 0.36);
+  var evenFix = calculatedFontSize % 2;
+  return calculatedFontSize + evenFix;
+}
+
+var InitialsAvatar = function InitialsAvatar(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _Avatar.AVATAR_DEFAULT_SIZE : _ref$size,
+      _ref$shadow = _ref.shadow,
+      shadow = _ref$shadow === void 0 ? _Avatar.AVATAR_DEFAULT_SHADOW : _ref$shadow,
+      children = _ref.children,
+      gradientColor = _ref.gradientColor,
+      style = _ref.style,
+      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var gradientName = typeof gradientColor === 'string' ? gradientColor : COLORS_NUMBER_TO_TEXT_MAP[gradientColor];
+  return (0, _jsxRuntime.createScopedElement)(_Avatar.default, (0, _extends2.default)({}, restProps, {
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+      fontSize: getInitialsFontSize(size)
+    }),
+    shadow: shadow,
+    size: size,
+    vkuiClass: (0, _classNames.classNames)('InitialsAvatar', "InitialsAvatar--color-".concat(gradientName))
+  }), (0, _jsxRuntime.createScopedElement)("span", {
+    "aria-hidden": "true",
+    vkuiClass: "InitialsAvatar__text"
+  }, children));
+};
+
+exports.InitialsAvatar = InitialsAvatar;
+//# sourceMappingURL=InitialsAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/InitialsAvatar/InitialsAvatar.tsx"],"names":["COLORS_NUMBER_TO_TEXT_MAP","getInitialsFontSize","avatarSize","calculatedFontSize","Math","ceil","evenFix","InitialsAvatar","size","AVATAR_DEFAULT_SIZE","shadow","AVATAR_DEFAULT_SHADOW","children","gradientColor","style","restProps","gradientName","fontSize"],"mappings":";;;;;;;;;;;;;;;;;;;AAEA;;AACA;;;AA0CA,IAAMA,yBAA6F,GAAG;AACpG,KAAG,KADiG;AAEpG,KAAG,QAFiG;AAGpG,KAAG,QAHiG;AAIpG,KAAG,OAJiG;AAKpG,KAAG,QALiG;AAMpG,KAAG;AANiG,CAAtG;;AASA,SAASC,mBAAT,CAA6BC,UAA7B,EAAiD;AAC/C,MAAMC,kBAAkB,GAAGC,IAAI,CAACC,IAAL,CAAUH,UAAU,GAAG,IAAvB,CAA3B;AACA,MAAMI,OAAO,GAAGH,kBAAkB,GAAG,CAArC;AACA,SAAOA,kBAAkB,GAAGG,OAA5B;AACD;;AAEM,IAAMC,cAA6C,GAAG,SAAhDA,cAAgD,OAOlC;AAAA,uBANzBC,IAMyB;AAAA,MANzBA,IAMyB,0BANlBC,2BAMkB;AAAA,yBALzBC,MAKyB;AAAA,MALzBA,MAKyB,4BALhBC,6BAKgB;AAAA,MAJzBC,QAIyB,QAJzBA,QAIyB;AAAA,MAHzBC,aAGyB,QAHzBA,aAGyB;AAAA,MAFzBC,KAEyB,QAFzBA,KAEyB;AAAA,MADtBC,SACsB;AACzB,MAAMC,YAAY,GAAG,OAAOH,aAAP,KAAyB,QAAzB,GAAoCA,aAApC,GAAoDb,yBAAyB,CAACa,aAAD,CAAlG;AAEA,SACE,qCAAC,eAAD,6BACME,SADN;AAEE,IAAA,KAAK,8DACAD,KADA;AAEHG,MAAAA,QAAQ,EAAEhB,mBAAmB,CAACO,IAAD;AAF1B,MAFP;AAME,IAAA,MAAM,EAAEE,MANV;AAOE,IAAA,IAAI,EAAEF,IAPR;AAQE,IAAA,SAAS,EAAE,4BACT,gBADS,kCAEgBQ,YAFhB;AARb,MAaE;AAAM,mBAAY,MAAlB;AAAyB,IAAA,SAAS,EAAC;AAAnC,KACGJ,QADH,CAbF,CADF;AAmBD,CA7BM","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames } from '../../lib/classNames';\nimport Avatar, { AVATAR_DEFAULT_SHADOW, AVATAR_DEFAULT_SIZE } from '../Avatar/Avatar';\nimport './InitialsAvatar.css';\n\n/**\n * Градиенты, которые можно использовать в алгоритме поиска градиентов по числовому идентификатору пользователя.\n * @example user.id % 6 + 1\n */\nexport type InitialsAvatarNumberGradients = 1 | 2 | 3 | 4 | 5 | 6;\nexport type InitialsAvatarTextGradients =\n  | 'red'\n  | 'pink'\n  | 'orange'\n  | 'yellow'\n  | 'green'\n  | 'l-blue'\n  | 'blue'\n  | 'violet';\n\nexport interface InitialsAvatarProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {\n  children?: React.ReactNode;\n  /**\n   * `'red' | 'pink' | 'orange' | 'yellow' | 'green' | 'l-blue' | 'blue' | 'violet'`\n   *\n   * Если передано число, то оно будет сконвертировано в строчное представление цвета по следующей схеме:\n   *\n   * 1: 'red'\n   *\n   * 2: 'orange'\n   *\n   * 3: 'yellow'\n   *\n   * 4: 'green'\n   *\n   * 5: 'l-blue'\n   *\n   * 6: 'violet'\n   */\n  gradientColor?: InitialsAvatarNumberGradients | InitialsAvatarTextGradients;\n  size?: number;\n  shadow?: boolean;\n}\n\nconst COLORS_NUMBER_TO_TEXT_MAP: Record<InitialsAvatarNumberGradients, InitialsAvatarTextGradients> = {\n  1: 'red',\n  2: 'orange',\n  3: 'yellow',\n  4: 'green',\n  5: 'l-blue',\n  6: 'violet',\n};\n\nfunction getInitialsFontSize(avatarSize: number) {\n  const calculatedFontSize = Math.ceil(avatarSize * 0.36);\n  const evenFix = calculatedFontSize % 2;\n  return calculatedFontSize + evenFix;\n}\n\nexport const InitialsAvatar: React.FC<InitialsAvatarProps> = ({\n  size = AVATAR_DEFAULT_SIZE,\n  shadow = AVATAR_DEFAULT_SHADOW,\n  children,\n  gradientColor,\n  style,\n  ...restProps\n}: InitialsAvatarProps) => {\n  const gradientName = typeof gradientColor === 'string' ? gradientColor : COLORS_NUMBER_TO_TEXT_MAP[gradientColor];\n\n  return (\n    <Avatar\n      {...restProps}\n      style={{\n        ...style,\n        fontSize: getInitialsFontSize(size),\n      }}\n      shadow={shadow}\n      size={size}\n      vkuiClass={classNames(\n        'InitialsAvatar',\n        `InitialsAvatar--color-${gradientName}`,\n      )}\n    >\n      <span aria-hidden=\"true\" vkuiClass=\"InitialsAvatar__text\">\n        {children}\n      </span>\n    </Avatar>\n  );\n};\n"],"file":"InitialsAvatar.js"}

package/dist/cjs/components/NativeSelect/NativeSelect.js

@@ -23,7 +23,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _classNames2 = require("../../lib/classNames");
 
-var _icons = require("@vkontakte/icons");
+var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
 
 var _FormField = require("../FormField/FormField");
 
@@ -100,7 +100,7 @@ var NativeSelect = function NativeSelect(_ref) {
     style: style,
     getRootRef: getRootRef,
     disabled: disabled,
-    after: sizeY === _withAdaptivity.SizeType.COMPACT ? (0, _jsxRuntime.createScopedElement)(_icons.Icon20Dropdown, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Dropdown, null)
+    after: (0, _jsxRuntime.createScopedElement)(_DropdownIcon.DropdownIcon, null)
   }, (0, _jsxRuntime.createScopedElement)("select", (0, _extends2.default)({}, restProps, {
     disabled: disabled,
     vkuiClass: "Select__el",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","React","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","VKCOM","SizeType","COMPACT","Text","Headline"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { Icon20Dropdown, Icon24Dropdown } from '@vkontakte/icons';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport '../Select/Select.css';\n\nexport interface NativeSelectProps extends\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  HasRef<HTMLSelectElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasAlign,\n  AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelect: React.FC<NativeSelectProps> = ({\n  style, defaultValue = '', align, placeholder, children,\n  className, getRef, getRootRef, disabled, sizeX, sizeY, multiline,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [notSelected, setNotSelected] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setNotSelected(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(getClassName('Select', platform), {\n        ['Select--not-selected']: notSelected,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n        'Select--multiline': multiline,\n      })}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{title}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nexport default withAdaptivity(NativeSelect, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}
+{"version":3,"sources":["../../../../src/components/NativeSelect/NativeSelect.tsx"],"names":["NativeSelect","style","defaultValue","align","placeholder","children","className","getRef","getRootRef","disabled","sizeX","sizeY","multiline","restProps","platform","React","useState","title","setTitle","notSelected","setNotSelected","value","onChange","selectRef","selectedOption","current","options","selectedIndex","text","TypographyComponent","VKCOM","SizeType","COMPACT","Text","Headline"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRef, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEnsuredControl } from '../../hooks/useEnsuredControl';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport '../Select/Select.css';\n\nexport interface NativeSelectProps extends\n  React.SelectHTMLAttributes<HTMLSelectElement>,\n  HasRef<HTMLSelectElement>,\n  HasRootRef<HTMLLabelElement>,\n  HasAlign,\n  AdaptivityProps {\n  placeholder?: string;\n  multiline?: boolean;\n}\n\nexport interface SelectState {\n  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];\n  title?: string;\n  notSelected?: boolean;\n}\n\nconst NativeSelect: React.FC<NativeSelectProps> = ({\n  style, defaultValue = '', align, placeholder, children,\n  className, getRef, getRootRef, disabled, sizeX, sizeY, multiline,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const [title, setTitle] = React.useState('');\n  const [notSelected, setNotSelected] = React.useState(false);\n  const [value, onChange] = useEnsuredControl(restProps, { defaultValue });\n  const selectRef = useExternRef(getRef);\n  useIsomorphicLayoutEffect(() => {\n    const selectedOption = selectRef.current.options[selectRef.current.selectedIndex];\n    if (selectedOption) {\n      setTitle(selectedOption.text);\n      setNotSelected(selectedOption.value === '' && placeholder != null);\n    }\n  }, [value, children]);\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      Component=\"label\"\n      vkuiClass={classNames(getClassName('Select', platform), {\n        ['Select--not-selected']: notSelected,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n        'Select--multiline': multiline,\n      })}\n      className={className}\n      style={style}\n      getRootRef={getRootRef}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <select\n        {...restProps}\n        disabled={disabled}\n        vkuiClass=\"Select__el\"\n        onChange={onChange}\n        value={value}\n        ref={selectRef}\n      >\n        {placeholder && <option value=\"\">{placeholder}</option>}\n        {children}\n      </select>\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{title}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nexport default withAdaptivity(NativeSelect, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"NativeSelect.js"}

package/dist/cjs/components/Progress/Progress.js

@@ -18,18 +18,21 @@ var _getClassName = require("../../helpers/getClassName");
 var _usePlatform = require("../../hooks/usePlatform");
 
 var _excluded = ["value", "getRootRef"];
+var PROGRESS_MIN_VALUE = 0;
+var PROGRESS_MAX_VALUE = 100;
 
 var Progress = function Progress(_ref) {
   var value = _ref.value,
       getRootRef = _ref.getRootRef,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var platform = (0, _usePlatform.usePlatform)();
+  var progress = Math.max(PROGRESS_MIN_VALUE, Math.min(value, PROGRESS_MAX_VALUE));
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
     "aria-valuenow": value
   }, restProps, {
     role: "progressbar",
-    "aria-valuemin": 0,
-    "aria-valuemax": 100,
+    "aria-valuemin": PROGRESS_MIN_VALUE,
+    "aria-valuemax": PROGRESS_MAX_VALUE,
     ref: getRootRef,
     vkuiClass: (0, _getClassName.getClassName)('Progress', platform)
   }), (0, _jsxRuntime.createScopedElement)("div", {
@@ -38,7 +41,7 @@ var Progress = function Progress(_ref) {
   }), (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Progress__in",
     style: {
-      width: "".concat(value, "%")
+      width: "".concat(progress, "%")
     },
     "aria-hidden": "true"
   }));

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"names":["Progress","value","getRootRef","restProps","platform","width","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;;;AAOA,IAAMA,QAAiC,GAAG,SAApCA,QAAoC,OAAwD;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,UAA8C,QAA9CA,UAA8C;AAAA,MAA/BC,SAA+B;AAChG,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,SACE;AACE,qBAAeH;AADjB,KAEME,SAFN;AAGE,IAAA,IAAI,EAAC,aAHP;AAIE,qBAAe,CAJjB;AAKE,qBAAe,GALjB;AAME,IAAA,GAAG,EAAED,UANP;AAOE,IAAA,SAAS,EAAE,gCAAa,UAAb,EAAyBE,QAAzB;AAPb,MASE;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,mBAAY;AAA1C,IATF,EAUE;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,IAAA,KAAK,EAAE;AAAEC,MAAAA,KAAK,YAAKJ,KAAL;AAAP,KAArC;AAA6D,mBAAY;AAAzE,IAVF,CADF;AAcD,CAjBD;;AAmBAD,QAAQ,CAACM,YAAT,GAAwB;AACtBL,EAAAA,KAAK,EAAE;AADe,CAAxB;eAIeD,Q","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Progress.css';\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst Progress: React.FC<ProgressProps> = ({ value, getRootRef, ...restProps }: ProgressProps) => {\n  const platform = usePlatform();\n\n  return (\n    <div\n      aria-valuenow={value}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={0}\n      aria-valuemax={100}\n      ref={getRootRef}\n      vkuiClass={getClassName('Progress', platform)}\n    >\n      <div vkuiClass=\"Progress__bg\" aria-hidden=\"true\" />\n      <div vkuiClass=\"Progress__in\" style={{ width: `${value}%` }} aria-hidden=\"true\" />\n    </div>\n  );\n};\n\nProgress.defaultProps = {\n  value: 0,\n};\n\nexport default Progress;\n"],"file":"Progress.js"}
+{"version":3,"sources":["../../../../src/components/Progress/Progress.tsx"],"names":["PROGRESS_MIN_VALUE","PROGRESS_MAX_VALUE","Progress","value","getRootRef","restProps","platform","progress","Math","max","min","width","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;;AAOA,IAAMA,kBAAkB,GAAG,CAA3B;AACA,IAAMC,kBAAkB,GAAG,GAA3B;;AAEA,IAAMC,QAAiC,GAAG,SAApCA,QAAoC,OAAwD;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,UAA8C,QAA9CA,UAA8C;AAAA,MAA/BC,SAA+B;AAChG,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,QAAQ,GAAGC,IAAI,CAACC,GAAL,CAAST,kBAAT,EAA6BQ,IAAI,CAACE,GAAL,CAASP,KAAT,EAAgBF,kBAAhB,CAA7B,CAAjB;AAEA,SACE;AACE,qBAAeE;AADjB,KAEME,SAFN;AAGE,IAAA,IAAI,EAAC,aAHP;AAIE,qBAAeL,kBAJjB;AAKE,qBAAeC,kBALjB;AAME,IAAA,GAAG,EAAEG,UANP;AAOE,IAAA,SAAS,EAAE,gCAAa,UAAb,EAAyBE,QAAzB;AAPb,MASE;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,mBAAY;AAA1C,IATF,EAUE;AAAK,IAAA,SAAS,EAAC,cAAf;AAA8B,IAAA,KAAK,EAAE;AAAEK,MAAAA,KAAK,YAAKJ,QAAL;AAAP,KAArC;AAAgE,mBAAY;AAA5E,IAVF,CADF;AAcD,CAnBD;;AAqBAL,QAAQ,CAACU,YAAT,GAAwB;AACtBT,EAAAA,KAAK,EAAE;AADe,CAAxB;eAIeD,Q","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { HasRootRef } from '../../types';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Progress.css';\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {\n  value?: number;\n}\n\nconst PROGRESS_MIN_VALUE = 0;\nconst PROGRESS_MAX_VALUE = 100;\n\nconst Progress: React.FC<ProgressProps> = ({ value, getRootRef, ...restProps }: ProgressProps) => {\n  const platform = usePlatform();\n\n  const progress = Math.max(PROGRESS_MIN_VALUE, Math.min(value, PROGRESS_MAX_VALUE));\n\n  return (\n    <div\n      aria-valuenow={value}\n      {...restProps}\n      role=\"progressbar\"\n      aria-valuemin={PROGRESS_MIN_VALUE}\n      aria-valuemax={PROGRESS_MAX_VALUE}\n      ref={getRootRef}\n      vkuiClass={getClassName('Progress', platform)}\n    >\n      <div vkuiClass=\"Progress__bg\" aria-hidden=\"true\" />\n      <div vkuiClass=\"Progress__in\" style={{ width: `${progress}%` }} aria-hidden=\"true\" />\n    </div>\n  );\n};\n\nProgress.defaultProps = {\n  value: 0,\n};\n\nexport default Progress;\n"],"file":"Progress.js"}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasRootRef } from '../../types';
 import './Removable.css';
 export interface RemovableProps {
     /**
@@ -10,7 +11,7 @@ export interface RemovableProps {
      */
     onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;
 }
-interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {
+interface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {
     /**
      * Расположение кнопки удаления.
      */

package/dist/cjs/components/Removable/Removable.js

@@ -23,6 +23,8 @@ var _classNames = require("../../lib/classNames");
 
 var _utils = require("../../lib/utils");
 
+var _useExternRef = require("../../hooks/useExternRef");
+
 var _usePlatform = require("../../hooks/usePlatform");
 
 var _getClassName = require("../../helpers/getClassName");
@@ -41,7 +43,7 @@ var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 
 var _Tappable = _interopRequireDefault(require("../Tappable/Tappable"));
 
-var _excluded = ["children", "onRemove", "removePlaceholder", "align"];
+var _excluded = ["getRootRef", "children", "onRemove", "removePlaceholder", "align"];
 
 var RemovableIos = function RemovableIos(_ref) {
   var onRemoveClick = _ref.onRemoveClick,
@@ -50,7 +52,7 @@ var RemovableIos = function RemovableIos(_ref) {
       children = _ref.children;
 
   var _useDOM = (0, _dom.useDOM)(),
-      document = _useDOM.document;
+      window = _useDOM.window;
 
   var removeButtonRef = React.useRef(null);
 
@@ -59,8 +61,10 @@ var RemovableIos = function RemovableIos(_ref) {
       removeOffset = _React$useState2[0],
       updateRemoveOffset = _React$useState2[1];
 
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, 'click', removeOffset > 0 && function () {
-    updateRemoveOffset(0);
+  (0, _useGlobalEventListener.useGlobalEventListener)(window, 'click', function () {
+    if (removeOffset > 0) {
+      updateRemoveOffset(0);
+    }
   });
 
   var onRemoveTransitionEnd = function onRemoveTransitionEnd() {
@@ -71,7 +75,9 @@ var RemovableIos = function RemovableIos(_ref) {
     }
   };
 
-  var onRemoveActivateClick = function onRemoveActivateClick() {
+  var onRemoveActivateClick = function onRemoveActivateClick(e) {
+    e.stopPropagation();
+
     var _removeButtonRef$curr2 = removeButtonRef === null || removeButtonRef === void 0 ? void 0 : removeButtonRef.current,
         _removeButtonRef$curr3 = _removeButtonRef$curr2.offsetWidth,
         offsetWidth = _removeButtonRef$curr3 === void 0 ? 0 : _removeButtonRef$curr3;
@@ -105,16 +111,17 @@ var RemovableIos = function RemovableIos(_ref) {
     disabled: removeOffset === 0,
     getRootRef: removeButtonRef,
     vkuiClass: "Removable__remove",
-    onClick: onRemoveClick,
-    onTransitionEnd: onRemoveTransitionEnd
+    onClick: onRemoveClick
   }, (0, _jsxRuntime.createScopedElement)("span", {
     vkuiClass: "Removable__remove-in"
   }, removePlaceholder)));
 };
 
 var Removable = function Removable(_ref2) {
-  var children = _ref2.children,
-      onRemove = _ref2.onRemove,
+  var getRootRef = _ref2.getRootRef,
+      children = _ref2.children,
+      _ref2$onRemove = _ref2.onRemove,
+      onRemove = _ref2$onRemove === void 0 ? _utils.noop : _ref2$onRemove,
       _ref2$removePlacehold = _ref2.removePlaceholder,
       removePlaceholder = _ref2$removePlacehold === void 0 ? 'Удалить' : _ref2$removePlacehold,
       _ref2$align = _ref2.align,
@@ -125,13 +132,16 @@ var Removable = function Removable(_ref2) {
   var _useAdaptivity = (0, _useAdaptivity2.useAdaptivity)(),
       sizeY = _useAdaptivity.sizeY;
 
+  var ref = (0, _useExternRef.useExternRef)(getRootRef);
+
   var onRemoveClick = function onRemoveClick(e) {
     e.preventDefault();
-    onRemove && onRemove(e);
+    onRemove(e);
   };
 
   var removePlaceholderString = (0, _utils.getTitleFromChildren)(removePlaceholder);
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({}, restProps, {
+    ref: ref,
     vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Removable', platform), "Removable--".concat(align), "Removable--sizeY-".concat(sizeY))
   }), (platform === _platform.ANDROID || platform === _platform.VKCOM) && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Removable__content"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"names":["RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","document","removeButtonRef","React","useRef","useState","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","offsetWidth","transform","Removable","onRemove","align","restProps","platform","sizeY","e","preventDefault","ANDROID","VKCOM","IOS"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport IconButton from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport Tappable from '../Tappable/Tappable';\nimport './Removable.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {\n  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n  removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n  onRemoveClick,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}) => {\n  const { document } = useDOM();\n\n  const removeButtonRef = React.useRef(null);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(document, 'click', removeOffset > 0 && (() => {\n    updateRemoveOffset(0);\n  }));\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    }\n  };\n\n  const onRemoveActivateClick = () => {\n    const { offsetWidth = 0 } = removeButtonRef?.current;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      vkuiClass=\"Removable__content\"\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        vkuiClass=\"Removable__action Removable__toggle\"\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={removeOffset === 0}\n        getRootRef={removeButtonRef}\n        vkuiClass=\"Removable__remove\"\n        onClick={onRemoveClick}\n        onTransitionEnd={onRemoveTransitionEnd}\n      >\n        <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n  children,\n  onRemove,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n\n    onRemove && onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName('Removable', platform),\n        `Removable--${align}`,\n        `Removable--sizeY-${sizeY}`,\n      )}\n    >\n      {(platform === ANDROID || platform === VKCOM) && (\n        <div vkuiClass=\"Removable__content\">\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            vkuiClass=\"Removable__action\"\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n        </div>\n      )}\n\n      {platform === IOS && (\n        <RemovableIos\n          onRemoveClick={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"file":"Removable.js"}
+{"version":3,"sources":["../../../../src/components/Removable/Removable.tsx"],"names":["RemovableIos","onRemoveClick","removePlaceholder","removePlaceholderString","children","window","removeButtonRef","React","useRef","useState","removeOffset","updateRemoveOffset","onRemoveTransitionEnd","current","focus","onRemoveActivateClick","e","stopPropagation","offsetWidth","transform","Removable","getRootRef","onRemove","noop","align","restProps","platform","sizeY","ref","preventDefault","ANDROID","VKCOM","IOS"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { classNames } from '../../lib/classNames';\nimport { getTitleFromChildren, noop } from '../../lib/utils';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { Icon24Cancel } from '@vkontakte/icons';\nimport IconButton from '../IconButton/IconButton';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport Tappable from '../Tappable/Tappable';\nimport './Removable.css';\n\nexport interface RemovableProps {\n  /**\n   * iOS only. Текст в выезжающей кнопке для удаления ячейки.\n   */\n  removePlaceholder?: React.ReactNode;\n  /**\n   * Коллбэк срабатывает при клике на контрол удаления.\n   */\n  onRemove?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n}\n\ninterface RemovableIosOwnProps extends Pick<RemovableProps, 'removePlaceholder'> {\n  onRemoveClick?: (e: React.MouseEvent, rootEl?: HTMLElement) => void;\n  removePlaceholderString?: string;\n}\n\nconst RemovableIos: React.FC<RemovableIosOwnProps> = ({\n  onRemoveClick,\n  removePlaceholder,\n  removePlaceholderString,\n  children,\n}) => {\n  const { window } = useDOM();\n\n  const removeButtonRef = React.useRef(null);\n  const [removeOffset, updateRemoveOffset] = React.useState(0);\n\n  useGlobalEventListener(window, 'click', () => {\n    if (removeOffset > 0) {\n      updateRemoveOffset(0);\n    }\n  });\n\n  const onRemoveTransitionEnd = () => {\n    if (removeOffset > 0) {\n      removeButtonRef?.current?.focus();\n    }\n  };\n\n  const onRemoveActivateClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n\n    const { offsetWidth = 0 } = removeButtonRef?.current;\n    updateRemoveOffset(offsetWidth);\n  };\n\n  return (\n    <div\n      vkuiClass=\"Removable__content\"\n      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}\n      onTransitionEnd={onRemoveTransitionEnd}\n    >\n      <IconButton\n        hasActive={false}\n        hasHover={false}\n        aria-label={removePlaceholderString}\n        vkuiClass=\"Removable__action Removable__toggle\"\n        onClick={onRemoveActivateClick}\n        disabled={removeOffset > 0}\n      >\n        <i vkuiClass=\"Removable__toggle-in\" role=\"presentation\" />\n      </IconButton>\n      {children}\n\n      <span vkuiClass=\"Removable__offset\" aria-hidden=\"true\"></span>\n\n      <Tappable\n        Component=\"button\"\n        hasActive={false}\n        hasHover={false}\n        disabled={removeOffset === 0}\n        getRootRef={removeButtonRef}\n        vkuiClass=\"Removable__remove\"\n        onClick={onRemoveClick}\n      >\n        <span vkuiClass=\"Removable__remove-in\">{removePlaceholder}</span>\n      </Tappable>\n    </div>\n  );\n};\n\ninterface RemovableOwnProps extends React.AllHTMLAttributes<HTMLElement>, RemovableProps, HasRootRef<HTMLDivElement> {\n  /**\n   * Расположение кнопки удаления.\n   */\n  align?: 'start' | 'center';\n}\n\nexport const Removable: React.FC<RemovableOwnProps> = ({\n  getRootRef,\n  children,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  align = 'center',\n  ...restProps\n}: RemovableOwnProps) => {\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  const ref = useExternRef(getRootRef);\n\n  const onRemoveClick = (e: React.MouseEvent) => {\n    e.preventDefault();\n    onRemove(e);\n  };\n\n  const removePlaceholderString: string = getTitleFromChildren(removePlaceholder);\n\n  return (\n    <div\n      {...restProps}\n      ref={ref}\n      vkuiClass={classNames(\n        getClassName('Removable', platform),\n        `Removable--${align}`,\n        `Removable--sizeY-${sizeY}`,\n      )}\n    >\n      {(platform === ANDROID || platform === VKCOM) && (\n        <div vkuiClass=\"Removable__content\">\n          {children}\n\n          <IconButton\n            activeMode=\"opacity\"\n            hoverMode=\"opacity\"\n            vkuiClass=\"Removable__action\"\n            onClick={onRemoveClick}\n            aria-label={removePlaceholderString}\n          >\n            <Icon24Cancel role=\"presentation\" />\n          </IconButton>\n        </div>\n      )}\n\n      {platform === IOS && (\n        <RemovableIos\n          onRemoveClick={onRemoveClick}\n          removePlaceholder={removePlaceholder}\n          removePlaceholderString={removePlaceholderString}\n        >\n          {children}\n        </RemovableIos>\n      )}\n    </div>\n  );\n};\n"],"file":"Removable.js"}

package/dist/cjs/components/SelectMimicry/SelectMimicry.js

@@ -17,7 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _classNames2 = require("../../lib/classNames");
 
-var _icons = require("@vkontakte/icons");
+var _DropdownIcon = require("../DropdownIcon/DropdownIcon");
 
 var _FormField = require("../FormField/FormField");
 
@@ -60,7 +60,7 @@ var SelectMimicry = function SelectMimicry(_ref) {
     getRootRef: getRootRef,
     onClick: disabled ? null : onClick,
     disabled: disabled,
-    after: sizeY === _withAdaptivity.SizeType.COMPACT ? (0, _jsxRuntime.createScopedElement)(_icons.Icon20Dropdown, null) : (0, _jsxRuntime.createScopedElement)(_icons.Icon24Dropdown, null)
+    after: (0, _jsxRuntime.createScopedElement)(_DropdownIcon.DropdownIcon, null)
   }), (0, _jsxRuntime.createScopedElement)(TypographyComponent, {
     Component: "div",
     weight: "regular",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"names":["SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","sizeX","sizeY","restProps","platform","TypographyComponent","VKCOM","SizeType","COMPACT","Text","Headline","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAYA,IAAMA,aAA0D,GAAG,SAA7DA,aAA6D,OAYzC;AAAA;;AAAA,MAXxBC,QAWwB,QAXxBA,QAWwB;AAAA,MAVxBC,WAUwB,QAVxBA,WAUwB;AAAA,MATxBC,QASwB,QATxBA,QASwB;AAAA,MARxBC,KAQwB,QARxBA,KAQwB;AAAA,MAPxBC,UAOwB,QAPxBA,UAOwB;AAAA,MANxBC,SAMwB,QANxBA,SAMwB;AAAA,MALxBC,QAKwB,QALxBA,QAKwB;AAAA,MAJxBC,OAIwB,QAJxBA,OAIwB;AAAA,MAHxBC,KAGwB,QAHxBA,KAGwB;AAAA,MAFxBC,KAEwB,QAFxBA,KAEwB;AAAA,MADrBC,SACqB;AACxB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,mBAAmB,GAAGD,QAAQ,KAAKE,eAAb,IAAsBJ,KAAK,KAAKK,yBAASC,OAAzC,GAAmDC,aAAnD,GAA0DC,iBAAtF;AAEA,SACE,qCAAC,oBAAD,6BACMP,SADN;AAEE,IAAA,QAAQ,EAAEJ,QAAQ,GAAG,IAAH,GAAUN,QAF9B;AAGE,IAAA,SAAS,EAAE,6BAAW,gCAAa,QAAb,EAAuBW,QAAvB,CAAX,EAA6C,iBAA7C;AACT,8BAAwB,CAACT,QADhB;AAET,2BAAqBG;AAFZ,0EAGSF,KAHT,GAGmB,CAAC,CAACA,KAHrB,uEAIUK,KAJV,GAIoB,CAAC,CAACA,KAJtB,uEAKUC,KALV,GAKoB,CAAC,CAACA,KALtB,gBAHb;AAUE,IAAA,UAAU,EAAEL,UAVd;AAWE,IAAA,OAAO,EAAEE,QAAQ,GAAG,IAAH,GAAUC,OAX7B;AAYE,IAAA,QAAQ,EAAED,QAZZ;AAaE,IAAA,KAAK,EAAEG,KAAK,KAAKK,yBAASC,OAAnB,GAA6B,qCAAC,qBAAD,OAA7B,GAAkD,qCAAC,qBAAD;AAb3D,MAeE,qCAAC,mBAAD;AAAqB,IAAA,SAAS,EAAC,KAA/B;AAAqC,IAAA,MAAM,EAAC,SAA5C;AAAsD,IAAA,SAAS,EAAC;AAAhE,KACE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAiCb,QAAQ,IAAID,WAA7C,CADF,CAfF,CADF;AAqBD,CAtCD;;AAwCAF,aAAa,CAACmB,YAAd,GAA6B;AAC3BlB,EAAAA,QAAQ,EAAE;AADiB,CAA7B;;eAIe,oCAAeD,aAAf,EAA8B;AAC3CS,EAAAA,KAAK,EAAE,IADoC;AAE3CC,EAAAA,KAAK,EAAE;AAFoC,CAA9B,C","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { Icon24Dropdown, Icon20Dropdown } from '@vkontakte/icons';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport '../Select/Select.css';\n\nexport interface SelectMimicryProps extends\n  React.HTMLAttributes<HTMLElement>,\n  HasAlign,\n  HasRootRef<HTMLElement>,\n  AdaptivityProps {\n  multiline?: boolean;\n  disabled?: boolean;\n}\n\nconst SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({\n  tabIndex,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  sizeX,\n  sizeY,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? null : tabIndex}\n      vkuiClass={classNames(getClassName('Select', platform), 'Select--mimicry', {\n        'Select--not-selected': !children,\n        'Select--multiline': multiline,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n      })}\n      getRootRef={getRootRef}\n      onClick={disabled ? null : onClick}\n      disabled={disabled}\n      after={sizeY === SizeType.COMPACT ? <Icon20Dropdown /> : <Icon24Dropdown />}\n    >\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{children || placeholder}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nSelectMimicry.defaultProps = {\n  tabIndex: 0,\n};\n\nexport default withAdaptivity(SelectMimicry, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"SelectMimicry.js"}
+{"version":3,"sources":["../../../../src/components/SelectMimicry/SelectMimicry.tsx"],"names":["SelectMimicry","tabIndex","placeholder","children","align","getRootRef","multiline","disabled","onClick","sizeX","sizeY","restProps","platform","TypographyComponent","VKCOM","SizeType","COMPACT","Text","Headline","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAYA,IAAMA,aAA0D,GAAG,SAA7DA,aAA6D,OAYzC;AAAA;;AAAA,MAXxBC,QAWwB,QAXxBA,QAWwB;AAAA,MAVxBC,WAUwB,QAVxBA,WAUwB;AAAA,MATxBC,QASwB,QATxBA,QASwB;AAAA,MARxBC,KAQwB,QARxBA,KAQwB;AAAA,MAPxBC,UAOwB,QAPxBA,UAOwB;AAAA,MANxBC,SAMwB,QANxBA,SAMwB;AAAA,MALxBC,QAKwB,QALxBA,QAKwB;AAAA,MAJxBC,OAIwB,QAJxBA,OAIwB;AAAA,MAHxBC,KAGwB,QAHxBA,KAGwB;AAAA,MAFxBC,KAEwB,QAFxBA,KAEwB;AAAA,MADrBC,SACqB;AACxB,MAAMC,QAAQ,GAAG,+BAAjB;AAEA,MAAMC,mBAAmB,GAAGD,QAAQ,KAAKE,eAAb,IAAsBJ,KAAK,KAAKK,yBAASC,OAAzC,GAAmDC,aAAnD,GAA0DC,iBAAtF;AAEA,SACE,qCAAC,oBAAD,6BACMP,SADN;AAEE,IAAA,QAAQ,EAAEJ,QAAQ,GAAG,IAAH,GAAUN,QAF9B;AAGE,IAAA,SAAS,EAAE,6BAAW,gCAAa,QAAb,EAAuBW,QAAvB,CAAX,EAA6C,iBAA7C;AACT,8BAAwB,CAACT,QADhB;AAET,2BAAqBG;AAFZ,0EAGSF,KAHT,GAGmB,CAAC,CAACA,KAHrB,uEAIUK,KAJV,GAIoB,CAAC,CAACA,KAJtB,uEAKUC,KALV,GAKoB,CAAC,CAACA,KALtB,gBAHb;AAUE,IAAA,UAAU,EAAEL,UAVd;AAWE,IAAA,OAAO,EAAEE,QAAQ,GAAG,IAAH,GAAUC,OAX7B;AAYE,IAAA,QAAQ,EAAED,QAZZ;AAaE,IAAA,KAAK,EAAE,qCAAC,0BAAD;AAbT,MAeE,qCAAC,mBAAD;AAAqB,IAAA,SAAS,EAAC,KAA/B;AAAqC,IAAA,MAAM,EAAC,SAA5C;AAAsD,IAAA,SAAS,EAAC;AAAhE,KACE;AAAM,IAAA,SAAS,EAAC;AAAhB,KAAiCJ,QAAQ,IAAID,WAA7C,CADF,CAfF,CADF;AAqBD,CAtCD;;AAwCAF,aAAa,CAACmB,YAAd,GAA6B;AAC3BlB,EAAAA,QAAQ,EAAE;AADiB,CAA7B;;eAIe,oCAAeD,aAAf,EAA8B;AAC3CS,EAAAA,KAAK,EAAE,IADoC;AAE3CC,EAAAA,KAAK,EAAE;AAFoC,CAA9B,C","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { DropdownIcon } from '../DropdownIcon/DropdownIcon';\nimport { FormField } from '../FormField/FormField';\nimport { HasAlign, HasRootRef } from '../../types';\nimport { withAdaptivity, AdaptivityProps, SizeType } from '../../hoc/withAdaptivity';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getClassName } from '../../helpers/getClassName';\nimport Headline from '../Typography/Headline/Headline';\nimport Text from '../Typography/Text/Text';\nimport { VKCOM } from '../../lib/platform';\nimport '../Select/Select.css';\n\nexport interface SelectMimicryProps extends\n  React.HTMLAttributes<HTMLElement>,\n  HasAlign,\n  HasRootRef<HTMLElement>,\n  AdaptivityProps {\n  multiline?: boolean;\n  disabled?: boolean;\n}\n\nconst SelectMimicry: React.FunctionComponent<SelectMimicryProps> = ({\n  tabIndex,\n  placeholder,\n  children,\n  align,\n  getRootRef,\n  multiline,\n  disabled,\n  onClick,\n  sizeX,\n  sizeY,\n  ...restProps\n}: SelectMimicryProps) => {\n  const platform = usePlatform();\n\n  const TypographyComponent = platform === VKCOM || sizeY === SizeType.COMPACT ? Text : Headline;\n\n  return (\n    <FormField\n      {...restProps}\n      tabIndex={disabled ? null : tabIndex}\n      vkuiClass={classNames(getClassName('Select', platform), 'Select--mimicry', {\n        'Select--not-selected': !children,\n        'Select--multiline': multiline,\n        [`Select--align-${align}`]: !!align,\n        [`Select--sizeX--${sizeX}`]: !!sizeX,\n        [`Select--sizeY--${sizeY}`]: !!sizeY,\n      })}\n      getRootRef={getRootRef}\n      onClick={disabled ? null : onClick}\n      disabled={disabled}\n      after={<DropdownIcon />}\n    >\n      <TypographyComponent Component=\"div\" weight=\"regular\" vkuiClass=\"Select__container\">\n        <span vkuiClass=\"Select__title\">{children || placeholder}</span>\n      </TypographyComponent>\n    </FormField>\n  );\n};\n\nSelectMimicry.defaultProps = {\n  tabIndex: 0,\n};\n\nexport default withAdaptivity(SelectMimicry, {\n  sizeX: true,\n  sizeY: true,\n});\n"],"file":"SelectMimicry.js"}

package/dist/cjs/components/Tabbar/Tabbar.js

@@ -47,7 +47,9 @@ var Tabbar = function Tabbar(props) {
     vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('Tabbar', platform), "Tabbar--l-".concat(getItemsLayout()), {
       'Tabbar--shadow': shadow
     })
-  }, restProps), children);
+  }, restProps), (0, _jsxRuntime.createScopedElement)("div", {
+    vkuiClass: "Tabbar__in"
+  }, children));
 };
 
 Tabbar.defaultProps = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":["Tabbar","props","children","shadow","itemsLayout","restProps","platform","getItemsLayout","React","Children","count","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAWA,IAAMA,MAA4C,GAAG,SAA/CA,MAA+C,CAACC,KAAD,EAAwB;AAC3E,MAAQC,QAAR,GAAwDD,KAAxD,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAwDF,KAAxD,CAAkBE,MAAlB;AAAA,MAA0BC,WAA1B,GAAwDH,KAAxD,CAA0BG,WAA1B;AAAA,MAA0CC,SAA1C,0CAAwDJ,KAAxD;AACA,MAAMK,QAAQ,GAAG,+BAAjB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOI,KAAK,CAACC,QAAN,CAAeC,KAAf,CAAqBR,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,QAAb,EAAuBI,QAAvB,CAAX,sBAA0DC,cAAc,EAAxE,GAA8E;AACvF,wBAAkBJ;AADqE,KAA9E;AADb,KAIME,SAJN,GAMGH,QANH,CADF;AAUD,CAxBD;;AA0BAF,MAAM,CAACW,YAAP,GAAsB;AACpBR,EAAAA,MAAM,EAAE;AADY,CAAtB;eAIeH,M","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Tabbar.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  itemsLayout?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {\n  const { children, shadow, itemsLayout, ...restProps } = props;\n  const platform = usePlatform();\n\n  const getItemsLayout = () => {\n    switch (itemsLayout) {\n      case 'horizontal':\n      case 'vertical':\n        return itemsLayout;\n      default:\n        return React.Children.count(children) > 2 ? 'vertical' : 'horizontal';\n    }\n  };\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('Tabbar', platform), `Tabbar--l-${getItemsLayout()}`, {\n        'Tabbar--shadow': shadow,\n      })}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nTabbar.defaultProps = {\n  shadow: true,\n};\n\nexport default Tabbar;\n"],"file":"Tabbar.js"}
+{"version":3,"sources":["../../../../src/components/Tabbar/Tabbar.tsx"],"names":["Tabbar","props","children","shadow","itemsLayout","restProps","platform","getItemsLayout","React","Children","count","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;;;AAWA,IAAMA,MAA4C,GAAG,SAA/CA,MAA+C,CAACC,KAAD,EAAwB;AAC3E,MAAQC,QAAR,GAAwDD,KAAxD,CAAQC,QAAR;AAAA,MAAkBC,MAAlB,GAAwDF,KAAxD,CAAkBE,MAAlB;AAAA,MAA0BC,WAA1B,GAAwDH,KAAxD,CAA0BG,WAA1B;AAAA,MAA0CC,SAA1C,0CAAwDJ,KAAxD;AACA,MAAMK,QAAQ,GAAG,+BAAjB;;AAEA,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,YAAQH,WAAR;AACE,WAAK,YAAL;AACA,WAAK,UAAL;AACE,eAAOA,WAAP;;AACF;AACE,eAAOI,KAAK,CAACC,QAAN,CAAeC,KAAf,CAAqBR,QAArB,IAAiC,CAAjC,GAAqC,UAArC,GAAkD,YAAzD;AALJ;AAOD,GARD;;AAUA,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,QAAb,EAAuBI,QAAvB,CAAX,sBAA0DC,cAAc,EAAxE,GAA8E;AACvF,wBAAkBJ;AADqE,KAA9E;AADb,KAIME,SAJN,GAME;AAAK,IAAA,SAAS,EAAC;AAAf,KACGH,QADH,CANF,CADF;AAYD,CA1BD;;AA4BAF,MAAM,CAACW,YAAP,GAAsB;AACpBR,EAAAA,MAAM,EAAE;AADY,CAAtB;eAIeH,M","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport './Tabbar.css';\n\nexport interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)\n   */\n  shadow?: boolean;\n  itemsLayout?: 'vertical' | 'horizontal' | 'auto';\n}\n\nconst Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {\n  const { children, shadow, itemsLayout, ...restProps } = props;\n  const platform = usePlatform();\n\n  const getItemsLayout = () => {\n    switch (itemsLayout) {\n      case 'horizontal':\n      case 'vertical':\n        return itemsLayout;\n      default:\n        return React.Children.count(children) > 2 ? 'vertical' : 'horizontal';\n    }\n  };\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName('Tabbar', platform), `Tabbar--l-${getItemsLayout()}`, {\n        'Tabbar--shadow': shadow,\n      })}\n      {...restProps}\n    >\n      <div vkuiClass=\"Tabbar__in\">\n        {children}\n      </div>\n    </div>\n  );\n};\n\nTabbar.defaultProps = {\n  shadow: true,\n};\n\nexport default Tabbar;\n"],"file":"Tabbar.js"}

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

@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { HasComponent, HasRootRef } from '../../types';
 import './TabbarItem.css';
-export interface TabbarItemProps extends React.HTMLAttributes<HTMLElement>, React.AnchorHTMLAttributes<HTMLElement> {
+export interface TabbarItemProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label
+HasRootRef<HTMLElement>, HasComponent {
     selected?: boolean;
     /**
      * Тест рядом с иконкой