@vkontakte/vkui 5.2.4 → 5.3.1

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

@@ -1 +1 @@
-{"version":3,"file":"FocusTrap.js","names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","useState","focusableNodes","setFocusableNodes","restoreFocusTo","setRestoreFocusTo","useContext","keyboardInput","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","getComputedStyle","display","visibility","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture"],"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"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 { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = 'div',\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\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;\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 === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\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 && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\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 !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,uBAAuB,EAAEC,IAAI,EAAEC,UAAU,QAAQ,yBAAyB;AACnF,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,yBAAyB,QAAQ,qCAAqC;AAE/E,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,IAAMC,kBAA0B,GAAGN,uBAAuB,CAACO,IAAI,EAAE;AAUjE;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAQA;EAAA,0BAPpBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACjBC,OAAO,QAAPA,OAAO;IAAA,yBACPC,YAAY;IAAZA,YAAY,kCAAG,IAAI;IAAA,oBACnBC,OAAO;IAAPA,OAAO,6BAAG,CAAC;IACXC,UAAU,QAAVA,UAAU;IACVC,QAAQ,QAARA,QAAQ;IACLC,SAAS;EAEZ,IAAMC,GAAG,GAAGnB,YAAY,CAAcgB,UAAU,CAAC;EAEjD,cAA6BV,MAAM,EAAE;IAA7Bc,QAAQ,WAARA,QAAQ;IAAEC,MAAM,WAANA,MAAM;EAExB,sBAA4CtB,KAAK,CAACuB,QAAQ,CAAuB,IAAI,CAAC;IAAA;IAA/EC,cAAc;IAAEC,iBAAiB;EACxC,uBAA4CzB,KAAK,CAACuB,QAAQ,CAAqB,IAAI,CAAC;IAAA;IAA7EG,cAAc;IAAEC,iBAAiB;;EAExC;;EAEA,wBAA0B3B,KAAK,CAAC4B,UAAU,CAACnB,cAAc,CAAC;IAAlDoB,aAAa,qBAAbA,aAAa;EACrB,IAAMC,gBAAgB,GAAG3B,UAAU,CAAC,YAAM;IAAA;IACxC,IACE0B,aAAa,IACb,kBAACT,GAAG,CAACW,OAAO,yCAAX,aAAaC,QAAQ,CAACX,QAAQ,CAAEY,aAAa,CAAC,KAC/CT,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEU,MAAM,EACtB;MACAV,cAAc,CAAC,CAAC,CAAC,CAACW,KAAK,EAAE;IAC3B;EACF,CAAC,EAAEnB,OAAO,CAAC;EACXR,yBAAyB,CAAC,YAAM;IAC9BsB,gBAAgB,CAACM,GAAG,EAAE;EACxB,CAAC,EAAE,EAAE,CAAC;;EAEN;;EAEA5B,yBAAyB,CAAC,YAAM;IAC9B,IAAI,CAACY,GAAG,CAACW,OAAO,EAAE;MAChB;IACF;IAEA,IAAMM,KAAoB,GAAG,EAAE;IAC/BC,KAAK,CAACC,SAAS,CAACC,OAAO,CAACC,IAAI;IAC1B;IACArB,GAAG,CAACW,OAAO,CAACW,gBAAgB,CAAChC,kBAAkB,CAAC,EAChD,UAACiC,WAAoB,EAAK;MACxB,wBAAgCrB,MAAM,CAAEsB,gBAAgB,CAACD,WAAW,CAAC;QAA7DE,OAAO,qBAAPA,OAAO;QAAEC,UAAU,qBAAVA,UAAU;MAE3B,IAAID,OAAO,KAAK,MAAM,IAAIC,UAAU,KAAK,QAAQ,EAAE;QACjDT,KAAK,CAACU,IAAI,CAACJ,WAAW,CAAgB;MACxC;IACF,CAAC,CACF;IAED,IAAIN,KAAK,CAACH,MAAM,KAAK,CAAC,EAAE;MACtB;MACAG,KAAK,CAACU,IAAI,CAAC3B,GAAG,CAACW,OAAO,CAAC;IACzB;IAEAN,iBAAiB,CAACY,KAAK,CAAC;EAC1B,CAAC,EAAE,CAACnB,QAAQ,CAAC,CAAC;;EAEd;;EAEA,IAAM8B,kBAAkB,GAAG7C,UAAU,CAAC,YAAM;IAC1C,IAAIuB,cAAc,EAAE;MAClBA,cAAc,CAACS,KAAK,EAAE;IACxB;EACF,CAAC,EAAEnB,OAAO,CAAC;EACXR,yBAAyB,CAAC,YAAM;IAC9B,IAAIO,YAAY,IAAIM,QAAQ,CAAEY,aAAa,EAAE;MAC3CN,iBAAiB,CAACN,QAAQ,CAAEY,aAAa,CAAgB;MAEzD,OAAO,YAAM;QACXe,kBAAkB,CAACZ,GAAG,EAAE;MAC1B,CAAC;IACH;IAEA;EACF,CAAC,EAAE,CAACrB,YAAY,CAAC,CAAC;EAElB,IAAMkC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAgB,EAAK;IAC9C,IAAI5C,UAAU,CAAC4C,CAAC,CAAC,KAAK7C,IAAI,CAAC8C,GAAG,IAAI3B,cAAc,aAAdA,cAAc,eAAdA,cAAc,CAAEU,MAAM,EAAE;MACxD,IAAMkB,OAAO,GAAG5B,cAAc,CAACU,MAAM,GAAG,CAAC;MACzC,IAAMmB,SAAS,GAAG7B,cAAc,CAAC8B,SAAS,CAAC,UAACC,IAAI;QAAA,OAAKA,IAAI,KAAKL,CAAC,CAACM,MAAM;MAAA,EAAC;MAEvE,IAAMC,oBAAoB,GAAGJ,SAAS,KAAK,CAAC,CAAC,IAAKA,SAAS,KAAKD,OAAO,IAAI,CAACF,CAAC,CAACQ,QAAS;MAEvF,IAAID,oBAAoB,IAAKJ,SAAS,KAAK,CAAC,IAAIH,CAAC,CAACQ,QAAS,EAAE;QAC3DR,CAAC,CAACS,cAAc,EAAE;QAElB,IAAMJ,IAAI,GAAG/B,cAAc,CAACiC,oBAAoB,GAAG,CAAC,GAAGL,OAAO,CAAC;QAE/D,IAAIG,IAAI,KAAKlC,QAAQ,CAAEY,aAAa,EAAE;UACpCsB,IAAI,CAACpB,KAAK,EAAE;QACd;QAEA,OAAO,KAAK;MACd;IACF;IAEA,IAAIrB,OAAO,IAAIR,UAAU,CAAC4C,CAAC,CAAC,KAAK7C,IAAI,CAACuD,MAAM,EAAE;MAC5C9C,OAAO,EAAE;IACX;IAEA,OAAO,IAAI;EACb,CAAC;EACDZ,sBAAsB,CAACmB,QAAQ,EAAE,SAAS,EAAE4B,iBAAiB,EAAE;IAC7DY,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,oBAAC,SAAS;IAAC,QAAQ,EAAE,CAAC,CAAE;IAAC,GAAG,EAAEzC;EAAI,GAAKD,SAAS,GAC7CD,QAAQ,CACC;AAEhB,CAAC"}
+{"version":3,"sources":["../../../../src/components/FocusTrap/FocusTrap.tsx"],"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 { HasComponent, HasRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\n\nconst FOCUSABLE_ELEMENTS: string = FOCUSABLE_ELEMENTS_LIST.join();\nexport interface FocusTrapProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent {\n  restoreFocus?: boolean;\n  timeout?: number;\n  onClose?(): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusTrap\n */\nexport const FocusTrap = ({\n  Component = 'div',\n  onClose,\n  restoreFocus = true,\n  timeout = 0,\n  getRootRef,\n  children,\n  ...restProps\n}: FocusTrapProps) => {\n  const ref = useExternRef<HTMLElement>(getRootRef);\n\n  const { document, window } = useDOM();\n\n  const [focusableNodes, setFocusableNodes] = React.useState<HTMLElement[] | null>(null);\n  const [restoreFocusTo, setRestoreFocusTo] = React.useState<HTMLElement | null>(null);\n\n  // HANDLE TRAP MOUNT\n\n  const { keyboardInput } = React.useContext(AppRootContext);\n  const focusOnTrapMount = useTimeout(() => {\n    if (\n      keyboardInput &&\n      !ref.current?.contains(document!.activeElement) &&\n      focusableNodes?.length\n    ) {\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;\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 === 0) {\n      // Чтобы фокус был хотя бы на родителе\n      nodes.push(ref.current);\n    }\n\n    setFocusableNodes(nodes);\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 && document!.activeElement) {\n      setRestoreFocusTo(document!.activeElement as HTMLElement);\n\n      return () => {\n        focusOnTrapUnmount.set();\n      };\n    }\n\n    return;\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 !== document!.activeElement) {\n          node.focus();\n        }\n\n        return false;\n      }\n    }\n\n    if (onClose && pressedKey(e) === Keys.ESCAPE) {\n      onClose();\n    }\n\n    return true;\n  };\n  useGlobalEventListener(document, 'keydown', onDocumentKeydown, {\n    capture: true,\n  });\n\n  return (\n    <Component tabIndex={-1} ref={ref} {...restProps}>\n      {children}\n    </Component>\n  );\n};\n"],"names":["React","useExternRef","useGlobalEventListener","useTimeout","FOCUSABLE_ELEMENTS_LIST","Keys","pressedKey","useDOM","useIsomorphicLayoutEffect","AppRootContext","FOCUSABLE_ELEMENTS","join","FocusTrap","Component","onClose","restoreFocus","timeout","getRootRef","children","restProps","ref","document","window","focusableNodes","setFocusableNodes","useState","restoreFocusTo","setRestoreFocusTo","keyboardInput","useContext","focusOnTrapMount","current","contains","activeElement","length","focus","set","nodes","Array","prototype","forEach","call","querySelectorAll","focusableEl","display","visibility","getComputedStyle","push","focusOnTrapUnmount","onDocumentKeydown","e","TAB","lastIdx","targetIdx","findIndex","node","target","shouldFocusFirstNode","shiftKey","preventDefault","ESCAPE","capture","tabIndex"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,uBAAuB,EAAEC,IAAI,EAAEC,UAAU,QAAQ,0BAA0B;AACpF,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,yBAAyB,QAAQ,sCAAsC;AAEhF,SAASC,cAAc,QAAQ,4BAA4B;AAE3D,MAAMC,qBAA6BN,wBAAwBO,IAAI;AAU/D;;CAEC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,WAAY,MAAK,EACjBC,QAAO,EACPC,cAAe,IAAI,CAAA,EACnBC,SAAU,EAAC,EACXC,WAAU,EACVC,SAAQ,EACR,GAAGC,WACY,GAAK;IACpB,MAAMC,MAAMnB,aAA0BgB;IAEtC,MAAM,EAAEI,SAAQ,EAAEC,OAAM,EAAE,GAAGf;IAE7B,MAAM,CAACgB,gBAAgBC,kBAAkB,GAAGxB,MAAMyB,QAAQ,CAAuB,IAAI;IACrF,MAAM,CAACC,gBAAgBC,kBAAkB,GAAG3B,MAAMyB,QAAQ,CAAqB,IAAI;IAEnF,oBAAoB;IAEpB,MAAM,EAAEG,cAAa,EAAE,GAAG5B,MAAM6B,UAAU,CAACpB;IAC3C,MAAMqB,mBAAmB3B,WAAW,IAAM;QACxC,IACEyB,iBACA,CAACR,IAAIW,OAAO,EAAEC,SAASX,SAAUY,aAAa,KAC9CV,gBAAgBW,QAChB;YACAX,cAAc,CAAC,EAAE,CAACY,KAAK;QACzB,CAAC;IACH,GAAGnB;IACHR,0BAA0B,IAAM;QAC9BsB,iBAAiBM,GAAG;IACtB,GAAG,EAAE;IAEL,yBAAyB;IAEzB5B,0BAA0B,IAAM;QAC9B,IAAI,CAACY,IAAIW,OAAO,EAAE;YAChB;QACF,CAAC;QAED,MAAMM,QAAuB,EAAE;QAC/BC,MAAMC,SAAS,CAACC,OAAO,CAACC,IAAI,CAC1B,oDAAoD;QACpDrB,IAAIW,OAAO,CAACW,gBAAgB,CAAChC,qBAC7B,CAACiC,cAAyB;YACxB,MAAM,EAAEC,QAAO,EAAEC,WAAU,EAAE,GAAGvB,OAAQwB,gBAAgB,CAACH;YAEzD,IAAIC,YAAY,UAAUC,eAAe,UAAU;gBACjDR,MAAMU,IAAI,CAACJ;YACb,CAAC;QACH;QAGF,IAAIN,MAAMH,MAAM,KAAK,GAAG;YACtB,sCAAsC;YACtCG,MAAMU,IAAI,CAAC3B,IAAIW,OAAO;QACxB,CAAC;QAEDP,kBAAkBa;IACpB,GAAG;QAACnB;KAAS;IAEb,sBAAsB;IAEtB,MAAM8B,qBAAqB7C,WAAW,IAAM;QAC1C,IAAIuB,gBAAgB;YAClBA,eAAeS,KAAK;QACtB,CAAC;IACH,GAAGnB;IACHR,0BAA0B,IAAM;QAC9B,IAAIO,gBAAgBM,SAAUY,aAAa,EAAE;YAC3CN,kBAAkBN,SAAUY,aAAa;YAEzC,OAAO,IAAM;gBACXe,mBAAmBZ,GAAG;YACxB;QACF,CAAC;QAED;IACF,GAAG;QAACrB;KAAa;IAEjB,MAAMkC,oBAAoB,CAACC,IAAqB;QAC9C,IAAI5C,WAAW4C,OAAO7C,KAAK8C,GAAG,IAAI5B,gBAAgBW,QAAQ;YACxD,MAAMkB,UAAU7B,eAAeW,MAAM,GAAG;YACxC,MAAMmB,YAAY9B,eAAe+B,SAAS,CAAC,CAACC,OAASA,SAASL,EAAEM,MAAM;YAEtE,MAAMC,uBAAuBJ,cAAc,CAAC,KAAMA,cAAcD,WAAW,CAACF,EAAEQ,QAAQ;YAEtF,IAAID,wBAAyBJ,cAAc,KAAKH,EAAEQ,QAAQ,EAAG;gBAC3DR,EAAES,cAAc;gBAEhB,MAAMJ,OAAOhC,cAAc,CAACkC,uBAAuB,IAAIL,OAAO,CAAC;gBAE/D,IAAIG,SAASlC,SAAUY,aAAa,EAAE;oBACpCsB,KAAKpB,KAAK;gBACZ,CAAC;gBAED,OAAO,KAAK;YACd,CAAC;QACH,CAAC;QAED,IAAIrB,WAAWR,WAAW4C,OAAO7C,KAAKuD,MAAM,EAAE;YAC5C9C;QACF,CAAC;QAED,OAAO,IAAI;IACb;IACAZ,uBAAuBmB,UAAU,WAAW4B,mBAAmB;QAC7DY,SAAS,IAAI;IACf;IAEA,qBACE,oBAAChD;QAAUiD,UAAU,CAAC;QAAG1C,KAAKA;QAAM,GAAGD,SAAS;OAC7CD;AAGP,EAAE"}

package/dist/cssm/components/FocusVisible/FocusVisible.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type FocusVisibleMode = 'inside' | 'outside';
+export type FocusVisibleMode = 'inside' | 'outside';
 export interface FocusVisibleProps {
     mode: FocusVisibleMode;
 }

package/dist/cssm/components/FocusVisible/FocusVisible.js

@@ -1,18 +1,14 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import "./FocusVisible.module.css";
+import styles from './FocusVisible.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/FocusVisible
- */
-export var FocusVisible = function FocusVisible(_ref) {
-  var mode = _ref.mode;
-  return /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": true,
-    className: classNames("vkuiFocusVisible", styles["FocusVisible--mode-".concat(mode)])
-  });
-};
-var styles = {
-  "FocusVisible--mode-inside": "vkuiFocusVisible--mode-inside",
-  "FocusVisible--mode-outside": "vkuiFocusVisible--mode-outside"
-};
+ */ export const FocusVisible = ({ mode  })=>/*#__PURE__*/ React.createElement("span", {
+        "aria-hidden": true,
+        className: classNames(styles['FocusVisible'], {
+            inside: styles['FocusVisible--mode-inside'],
+            outside: styles['FocusVisible--mode-outside']
+        }[mode])
+    });
+
 //# sourceMappingURL=FocusVisible.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FocusVisible.js","names":["React","classNames","FocusVisible","mode","styles"],"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' | 'outside';\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden\n    className={classNames(styles['FocusVisible'], styles[`FocusVisible--mode-${mode}`])}\n  />\n);\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAS7C;AACA;AACA;AACA,OAAO,IAAMC,YAAY,GAAG,SAAfA,YAAY;EAAA,IAAMC,IAAI,QAAJA,IAAI;EAAA,oBACjC;IACE,mBAAW;IACX,SAAS,EAAEF,UAAU,qBAAyBG,MAAM,8BAAuBD,IAAI,EAAG;EAAE,EACpF;AAAA,CACH;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/FocusVisible/FocusVisible.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport styles from './FocusVisible.module.css';\n\nexport type FocusVisibleMode = 'inside' | 'outside';\n\nexport interface FocusVisibleProps {\n  mode: FocusVisibleMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FocusVisible\n */\nexport const FocusVisible = ({ mode }: FocusVisibleProps) => (\n  <span\n    aria-hidden\n    className={classNames(\n      styles['FocusVisible'],\n      {\n        inside: styles['FocusVisible--mode-inside'],\n        outside: styles['FocusVisible--mode-outside'],\n      }[mode],\n    )}\n  />\n);\n"],"names":["React","classNames","styles","FocusVisible","mode","span","aria-hidden","className","inside","outside"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,OAAOC,YAAY,4BAA4B;AAQ/C;;CAEC,GACD,OAAO,MAAMC,eAAe,CAAC,EAAEC,KAAI,EAAqB,iBACtD,oBAACC;QACCC,eAAAA,IAAW;QACXC,WAAWN,WACTC,MAAM,CAAC,eAAe,EACtB;YACEM,QAAQN,MAAM,CAAC,4BAA4B;YAC3CO,SAASP,MAAM,CAAC,6BAA6B;QAC/C,CAAC,CAACE,KAAK;OAGX"}

package/dist/cssm/components/Footer/Footer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HasComponent } from '../../types';
-export declare type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
+export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
  */

package/dist/cssm/components/Footer/Footer.js

@@ -1,21 +1,15 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { Footnote } from '../Typography/Footnote/Footnote';
-import "./Footer.module.css";
+import styles from './Footer.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/Footer
- */
-export var Footer = function Footer(_ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Footnote, _extends({
-    Component: "footer"
-  }, restProps, {
-    className: classNames("vkuiFooter", className)
-  }), children);
+ */ export const Footer = ({ children , className , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement(Footnote, {
+        Component: "footer",
+        ...restProps,
+        className: classNames(styles['Footer'], className)
+    }, children);
 };
+
 //# sourceMappingURL=Footer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":["React","classNames","Footnote","Footer","children","className","restProps"],"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,QAAQ,QAAQ,iCAAiC;AAAC;AAK3D;AACA;AACA;AACA,OAAO,IAAMC,MAAM,GAAG,SAATA,MAAM,OAA2D;EAAA,IAArDC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAKC,SAAS;EACxD,oBACE,oBAAC,QAAQ;IAAC,SAAS,EAAC;EAAQ,GAAKA,SAAS;IAAE,SAAS,EAAEL,UAAU,eAAmBI,SAAS;EAAE,IAC5FD,QAAQ,CACA;AAEf,CAAC"}
+{"version":3,"sources":["../../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Footer.module.css';\n\nexport type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Footer\n */\nexport const Footer = ({ children, className, ...restProps }: FooterProps) => {\n  return (\n    <Footnote Component=\"footer\" {...restProps} className={classNames(styles['Footer'], className)}>\n      {children}\n    </Footnote>\n  );\n};\n"],"names":["React","classNames","Footnote","styles","Footer","children","className","restProps","Component"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,OAAOC,YAAY,sBAAsB;AAIzC;;CAEC,GACD,OAAO,MAAMC,SAAS,CAAC,EAAEC,SAAQ,EAAEC,UAAS,EAAE,GAAGC,WAAwB,GAAK;IAC5E,qBACE,oBAACL;QAASM,WAAU;QAAU,GAAGD,SAAS;QAAED,WAAWL,WAAWE,MAAM,CAAC,SAAS,EAAEG;OACjFD;AAGP,EAAE"}

package/dist/cssm/components/FormField/FormField.js

@@ -1,67 +1,42 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["Component", "status", "children", "getRootRef", "before", "after", "disabled", "mode", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { SizeType } from '../../lib/adaptivity';
-import "./FormField.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiFormField--sizeY-none"
-}, SizeType.COMPACT, "vkuiFormField--sizeY-compact");
+import styles from './FormField.module.css';
+const sizeYClassNames = {
+    none: styles['FormField--sizeY-none'],
+    [SizeType.COMPACT]: styles['FormField--sizeY-compact']
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormField
- */
-export var FormField = function FormField(_ref) {
-  var _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'span' : _ref$Component,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'default' : _ref$status,
-    children = _ref.children,
-    getRootRef = _ref.getRootRef,
-    before = _ref.before,
-    after = _ref.after,
-    disabled = _ref.disabled,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'default' : _ref$mode,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    hover = _React$useState2[0],
-    setHover = _React$useState2[1];
-  var handleMouseEnter = function handleMouseEnter(e) {
-    e.stopPropagation();
-    setHover(true);
-  };
-  var handleMouseLeave = function handleMouseLeave(e) {
-    e.stopPropagation();
-    setHover(false);
-  };
-  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
-    ref: getRootRef,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    className: classNames("vkuiFormField", styles["FormField--mode-".concat(mode)], styles["FormField--status-".concat(status)], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && "vkuiFormField--disabled", !disabled && hover && "vkuiFormField--hover", className)
-  }), before && /*#__PURE__*/React.createElement("span", {
-    className: "vkuiFormField__before"
-  }, before), children, after && /*#__PURE__*/React.createElement("span", {
-    className: "vkuiFormField__after"
-  }, after), /*#__PURE__*/React.createElement("span", {
-    "aria-hidden": true,
-    className: "vkuiFormField__border"
-  }));
-};
-var styles = {
-  "FormField--mode-default": "vkuiFormField--mode-default",
-  "FormField--mode-plain": "vkuiFormField--mode-plain",
-  "FormField--status-error": "vkuiFormField--status-error",
-  "FormField--status-valid": "vkuiFormField--status-valid",
-  "FormField--status-default": "vkuiFormField--status-default"
+ */ export const FormField = ({ Component ='span' , status ='default' , children , getRootRef , before , after , disabled , mode ='default' , className , ...restProps })=>{
+    const { sizeY ='none'  } = useAdaptivity();
+    const [hover, setHover] = React.useState(false);
+    const handleMouseEnter = (e)=>{
+        e.stopPropagation();
+        setHover(true);
+    };
+    const handleMouseLeave = (e)=>{
+        e.stopPropagation();
+        setHover(false);
+    };
+    return /*#__PURE__*/ React.createElement(Component, {
+        ...restProps,
+        ref: getRootRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: classNames(styles['FormField'], mode === 'default' && styles['FormField--mode-default'], status !== 'default' && ({
+            error: styles['FormField--status-error'],
+            valid: styles['FormField--status-valid']
+        })[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], disabled && styles['FormField--disabled'], !disabled && hover && styles['FormField--hover'], className)
+    }, before && /*#__PURE__*/ React.createElement("span", {
+        className: styles['FormField__before']
+    }, before), children, after && /*#__PURE__*/ React.createElement("span", {
+        className: classNames(styles['FormField__after'], 'vkuiInternalFormField__after')
+    }, after), /*#__PURE__*/ React.createElement("span", {
+        "aria-hidden": true,
+        className: styles['FormField__border']
+    }));
 };
+
 //# sourceMappingURL=FormField.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","names":["React","classNames","useAdaptivity","SizeType","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","sizeY","useState","hover","setHover","handleMouseEnter","e","stopPropagation","handleMouseLeave","styles","REGULAR"],"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        styles[`FormField--mode-${mode}`],\n        styles[`FormField--status-${status}`],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && <span className={styles['FormField__after']}>{after}</span>}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,QAAQ,QAAQ,sBAAsB;AAAC;AAIhD,IAAMC,eAAe;EACnBC,IAAI;AAAiC,GACpCF,QAAQ,CAACG,OAAO,iCAClB;AAiCD;AACA;AACA;AACA,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAAS,OAWG;EAAA,0BAVvBC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAAA,mBAClBC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAClBC,QAAQ,QAARA,QAAQ;IACRC,UAAU,QAAVA,UAAU;IACVC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAChBC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,qBAA2Bf,aAAa,EAAE;IAAA,sCAAlCgB,KAAK;IAALA,KAAK,qCAAG,MAAM;EACtB,sBAA0BlB,KAAK,CAACmB,QAAQ,CAAC,KAAK,CAAC;IAAA;IAAxCC,KAAK;IAAEC,QAAQ;EAEtB,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIC,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,IAAI,CAAC;EAChB,CAAC;EAED,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,CAAIF,CAAa,EAAK;IAC1CA,CAAC,CAACC,eAAe,EAAE;IACnBH,QAAQ,CAAC,KAAK,CAAC;EACjB,CAAC;EAED,oBACE,oBAAC,SAAS,eACJJ,SAAS;IACb,GAAG,EAAEN,UAAW;IAChB,YAAY,EAAEW,gBAAiB;IAC/B,YAAY,EAAEG,gBAAiB;IAC/B,SAAS,EAAExB,UAAU,kBAEnByB,MAAM,2BAAoBX,IAAI,EAAG,EACjCW,MAAM,6BAAsBjB,MAAM,EAAG,EACrCS,KAAK,KAAKf,QAAQ,CAACwB,OAAO,IAAIvB,eAAe,CAACc,KAAK,CAAC,EACpDJ,QAAQ,6BAAiC,EACzC,CAACA,QAAQ,IAAIM,KAAK,0BAA8B,EAChDJ,SAAS;EACT,IAEDJ,MAAM,iBAAI;IAAM,SAAS;EAA8B,GAAEA,MAAM,CAAQ,EACvEF,QAAQ,EACRG,KAAK,iBAAI;IAAM,SAAS;EAA6B,GAAEA,KAAK,CAAQ,eACrE;IAAM,mBAAW;IAAC,SAAS;EAA8B,EAAG,CAClD;AAEhB,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport styles from './FormField.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormField--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormField--sizeY-compact'],\n};\n\nexport interface FormFieldProps {\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Добавляет иконку слева.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  before?: React.ReactNode;\n  /**\n   * Добавляет иконку справа.\n   *\n   * Рекомендации:\n   *\n   * - Используйте следующие размеры иконок `12` | `16` | `20` | `24` | `28`.\n   * - Используйте [IconButton](https://vkcom.github.io/VKUI/#/IconButton), если вам нужна кликабельная иконка.\n   */\n  after?: React.ReactNode;\n  mode?: 'default' | 'plain';\n}\n\ninterface FormFieldOwnProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    FormFieldProps {\n  disabled?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormField\n */\nexport const FormField = ({\n  Component = 'span',\n  status = 'default',\n  children,\n  getRootRef,\n  before,\n  after,\n  disabled,\n  mode = 'default',\n  className,\n  ...restProps\n}: FormFieldOwnProps) => {\n  const { sizeY = 'none' } = useAdaptivity();\n  const [hover, setHover] = React.useState(false);\n\n  const handleMouseEnter = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(true);\n  };\n\n  const handleMouseLeave = (e: MouseEvent) => {\n    e.stopPropagation();\n    setHover(false);\n  };\n\n  return (\n    <Component\n      {...restProps}\n      ref={getRootRef}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={classNames(\n        styles['FormField'],\n        mode === 'default' && styles['FormField--mode-default'],\n        status !== 'default' &&\n          {\n            error: styles['FormField--status-error'],\n            valid: styles['FormField--status-valid'],\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        disabled && styles['FormField--disabled'],\n        !disabled && hover && styles['FormField--hover'],\n        className,\n      )}\n    >\n      {before && <span className={styles['FormField__before']}>{before}</span>}\n      {children}\n      {after && (\n        <span className={classNames(styles['FormField__after'], 'vkuiInternalFormField__after')}>\n          {after}\n        </span>\n      )}\n      <span aria-hidden className={styles['FormField__border']} />\n    </Component>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","SizeType","styles","sizeYClassNames","none","COMPACT","FormField","Component","status","children","getRootRef","before","after","disabled","mode","className","restProps","sizeY","hover","setHover","useState","handleMouseEnter","e","stopPropagation","handleMouseLeave","ref","onMouseEnter","onMouseLeave","error","valid","REGULAR","span","aria-hidden"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,kBAAkB;IACtBC,MAAMF,MAAM,CAAC,wBAAwB;IACrC,CAACD,SAASI,OAAO,CAAC,EAAEH,MAAM,CAAC,2BAA2B;AACxD;AAiCA;;CAEC,GACD,OAAO,MAAMI,YAAY,CAAC,EACxBC,WAAY,OAAM,EAClBC,QAAS,UAAS,EAClBC,SAAQ,EACRC,WAAU,EACVC,OAAM,EACNC,MAAK,EACLC,SAAQ,EACRC,MAAO,UAAS,EAChBC,UAAS,EACT,GAAGC,WACe,GAAK;IACvB,MAAM,EAAEC,OAAQ,OAAM,EAAE,GAAGjB;IAC3B,MAAM,CAACkB,OAAOC,SAAS,GAAGrB,MAAMsB,QAAQ,CAAC,KAAK;IAE9C,MAAMC,mBAAmB,CAACC,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,IAAI;IACf;IAEA,MAAMK,mBAAmB,CAACF,IAAkB;QAC1CA,EAAEC,eAAe;QACjBJ,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACZ;QACE,GAAGS,SAAS;QACbS,KAAKf;QACLgB,cAAcL;QACdM,cAAcH;QACdT,WAAWhB,WACTG,MAAM,CAAC,YAAY,EACnBY,SAAS,aAAaZ,MAAM,CAAC,0BAA0B,EACvDM,WAAW,aACT,CAAA;YACEoB,OAAO1B,MAAM,CAAC,0BAA0B;YACxC2B,OAAO3B,MAAM,CAAC,0BAA0B;QAC1C,CAAA,CAAC,CAACM,OAAO,EACXS,UAAUhB,SAAS6B,OAAO,IAAI3B,eAAe,CAACc,MAAM,EACpDJ,YAAYX,MAAM,CAAC,sBAAsB,EACzC,CAACW,YAAYK,SAAShB,MAAM,CAAC,mBAAmB,EAChDa;OAGDJ,wBAAU,oBAACoB;QAAKhB,WAAWb,MAAM,CAAC,oBAAoB;OAAGS,SACzDF,UACAG,uBACC,oBAACmB;QAAKhB,WAAWhB,WAAWG,MAAM,CAAC,mBAAmB,EAAE;OACrDU,sBAGL,oBAACmB;QAAKC,eAAAA,IAAW;QAACjB,WAAWb,MAAM,CAAC,oBAAoB;;AAG9D,EAAE"}

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

@@ -1 +1 @@
-.vkuiFormField{-webkit-tap-highlight-color:transparent;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);isolation:isolate;min-height:44px;min-height:var(--vkui--size_field_height--regular);position:relative}.vkuiFormField--sizeY-compact{min-height:36px;min-height:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none{min-height:36px;min-height:var(--vkui--size_field_height--compact)}}.vkuiFormField>*{border-radius:inherit;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiFormField__after,.vkuiFormField__before{align-content:center;align-items:center;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;height:100%;justify-content:center;min-width:44px;min-width:var(--vkui--size_field_height--regular);position:relative;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiFormField--sizeY-compact .vkuiFormField__after,.vkuiFormField--sizeY-compact .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none .vkuiFormField__after,.vkuiFormField--sizeY-none .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}}.vkuiFormField__before{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiFormField__after{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiFormField__border{border:1px solid transparent;border:var(--vkui_internal--thin_border) solid transparent;border-radius:inherit;box-sizing:border-box;height:100%;left:0;pointer-events:none;position:absolute;top:0;transform-origin:left top;width:100%;z-index:2;z-index:var(--vkui_internal--z_index_form_field_border)}.vkuiFormField--mode-default .vkuiFormField__border{border-color:rgba(0,0,0,.12);border-color:var(--vkui--color_field_border_alpha)}.vkuiFormField--mode-default{background-color:#f2f3f5;background-color:var(--vkui--color_field_background)}.vkuiFormField--status-error .vkuiFormField__border,.vkuiFormItem--status-error .vkuiFormField__border{border-color:#e64646;border-color:var(--vkui--color_stroke_negative);z-index:3;z-index:var(--vkui_internal--z_index_form_field_status)}.vkuiFormField--status-error,.vkuiFormItem--status-error .vkuiFormField{background-color:#faebeb;background-color:var(--vkui--color_background_negative_tint)}.vkuiFormField--status-valid .vkuiFormField__border,.vkuiFormItem--status-valid .vkuiFormField__border{border-color:#4bb34b;border-color:var(--vkui--color_stroke_positive);z-index:3;z-index:var(--vkui_internal--z_index_form_field_status)}.vkuiFormField--disabled{cursor:default;opacity:.64;opacity:var(--vkui--opacity_disable_accessibility);pointer-events:none}.vkuiFormField--hover{background-color:#f2f3f5;background-color:var(--vkui--color_field_background)}.vkuiFormField--mode-default.vkuiFormField--hover .vkuiFormField__border{border-color:rgba(0,0,0,.24);border-color:var(--vkui--color_field_border_alpha--hover);z-index:4;z-index:var(--vkui_internal--z_index_form_field_border_hover)}.vkuiFormField :focus{outline:none}.vkuiFormField :focus~.vkuiFormField__border,.vkuiFormField:focus-within .vkuiFormField__border{border-color:#2688eb;border-color:var(--vkui--color_stroke_accent);z-index:5;z-index:var(--vkui_internal--z_index_form_field_focus)}.vkuiModalCardBase__header+.vkuiFormField,.vkuiModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiSelect .vkuiFormField__after{pointer-events:none}.vkuiCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiChipsInput .vkuiFormField__after{z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiFormLayoutGroup--segmented .vkuiFormField{isolation:auto;z-index:auto}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField{border-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>:first-of-type:not(:last-of-type) .vkuiFormField,.vkuiFormLayoutGroup--segmented>:first-of-type:not(:last-of-type) .vkuiFormField{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiFormLayoutGroup--segmented .vkuiRemovable__content>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField,.vkuiFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField{border-bottom-left-radius:0;border-top-left-radius:0}
+.vkuiFormField{-webkit-tap-highlight-color:transparent;align-items:center;border-radius:8px;border-radius:var(--vkui--size_border_radius--regular);box-sizing:border-box;display:flex;font-family:-apple-system,system-ui,Helvetica Neue,Roboto,sans-serif;font-family:var(--vkui--font_family_base);isolation:isolate;min-height:44px;min-height:var(--vkui--size_field_height--regular);position:relative}.vkuiFormField--sizeY-compact{min-height:36px;min-height:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none{min-height:36px;min-height:var(--vkui--size_field_height--compact)}}.vkuiFormField>*{border-radius:inherit;z-index:1;z-index:var(--vkui_internal--z_index_form_field_element)}.vkuiFormField__after,.vkuiFormField__before{align-content:center;align-items:center;color:#99a2ad;color:var(--vkui--color_icon_secondary);display:flex;flex-shrink:0;height:100%;justify-content:center;min-width:44px;min-width:var(--vkui--size_field_height--regular);position:relative;z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiFormField--sizeY-compact .vkuiFormField__after,.vkuiFormField--sizeY-compact .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormField--sizeY-none .vkuiFormField__after,.vkuiFormField--sizeY-none .vkuiFormField__before{height:36px;height:var(--vkui--size_field_height--compact);min-width:36px;min-width:var(--vkui--size_field_height--compact)}}.vkuiFormField__before{color:#2688eb;color:var(--vkui--color_icon_accent)}.vkuiFormField__after{color:#99a2ad;color:var(--vkui--color_icon_secondary)}.vkuiFormField__border{border:1px solid transparent;border:var(--vkui_internal--thin_border) solid transparent;border-radius:inherit;box-sizing:border-box;height:100%;left:0;pointer-events:none;position:absolute;top:0;transform-origin:left top;width:100%;z-index:2;z-index:var(--vkui_internal--z_index_form_field_border)}.vkuiFormField--mode-default .vkuiFormField__border{border-color:rgba(0,0,0,.12);border-color:var(--vkui--color_field_border_alpha)}.vkuiFormField--mode-default{background-color:#f2f3f5;background-color:var(--vkui--color_field_background)}.vkuiFormField--status-error .vkuiFormField__border,.vkuiInternalFormItem--status-error .vkuiFormField__border{border-color:#e64646;border-color:var(--vkui--color_stroke_negative);z-index:3;z-index:var(--vkui_internal--z_index_form_field_status)}.vkuiFormField--status-error,.vkuiInternalFormItem--status-error .vkuiFormField{background-color:#faebeb;background-color:var(--vkui--color_background_negative_tint)}.vkuiFormField--status-valid .vkuiFormField__border,.vkuiInternalFormItem--status-valid .vkuiFormField__border{border-color:#4bb34b;border-color:var(--vkui--color_stroke_positive);z-index:3;z-index:var(--vkui_internal--z_index_form_field_status)}.vkuiFormField--disabled{cursor:default;opacity:.64;opacity:var(--vkui--opacity_disable_accessibility);pointer-events:none}.vkuiFormField--hover{background-color:#f2f3f5;background-color:var(--vkui--color_field_background)}.vkuiFormField--mode-default.vkuiFormField--hover .vkuiFormField__border{border-color:rgba(0,0,0,.24);border-color:var(--vkui--color_field_border_alpha--hover);z-index:4;z-index:var(--vkui_internal--z_index_form_field_border_hover)}.vkuiFormField :focus{outline:none}.vkuiFormField :focus~.vkuiFormField__border,.vkuiFormField:focus-within .vkuiFormField__border{border-color:#2688eb;border-color:var(--vkui--color_stroke_accent);z-index:5;z-index:var(--vkui_internal--z_index_form_field_focus)}.vkuiInternalModalCardBase__header+.vkuiFormField,.vkuiInternalModalCardBase__subheader+.vkuiFormField{margin-top:16px}.vkuiInternalNativeSelect .vkuiFormField__after{pointer-events:none}.vkuiInternalCalendarHeader__picker .vkuiFormField__after{min-width:12px;padding-right:8px}.vkuiInternalChipsInput .vkuiFormField__after{z-index:6;z-index:var(--vkui_internal--z_index_form_field_side)}.vkuiInternalFormLayoutGroup--segmented .vkuiFormField{isolation:auto;z-index:auto}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):not(:last-of-type) .vkuiFormField{border-radius:0}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>:first-of-type:not(:last-of-type) .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>:first-of-type:not(:last-of-type) .vkuiFormField{border-bottom-right-radius:0;border-top-right-radius:0}.vkuiInternalFormLayoutGroup--segmented .vkuiInternalRemovable__content>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField,.vkuiInternalFormLayoutGroup--segmented>.vkuiFormItem:not(:first-of-type):last-of-type .vkuiFormField{border-bottom-left-radius:0;border-top-left-radius:0}

package/dist/cssm/components/FormItem/FormItem.js

@@ -1,7 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "top", "bottom", "status", "Component", "removable", "onRemove", "removePlaceholder", "getRootRef", "className"];
 import * as React from 'react';
 import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -10,55 +6,39 @@ import { SizeType } from '../../lib/adaptivity';
 import { Removable } from '../Removable/Removable';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Subhead } from '../Typography/Subhead/Subhead';
-import "./FormItem.module.css";
-var sizeYClassNames = _defineProperty({
-  none: "vkuiFormItem--sizeY-none"
-}, SizeType.COMPACT, "vkuiFormItem--sizeY-compact");
+import styles from './FormItem.module.css';
+const sizeYClassNames = {
+    none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),
+    [SizeType.COMPACT]: classNames(styles['FormItem--sizeY-compact'], 'vkuiInternalFormItem--sizeY-compact')
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/FormItem
- */
-export var FormItem = function FormItem(_ref) {
-  var children = _ref.children,
-    top = _ref.top,
-    bottom = _ref.bottom,
-    _ref$status = _ref.status,
-    status = _ref$status === void 0 ? 'default' : _ref$status,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'div' : _ref$Component,
-    removable = _ref.removable,
-    _ref$onRemove = _ref.onRemove,
-    _onRemove = _ref$onRemove === void 0 ? noop : _ref$onRemove,
-    _ref$removePlaceholde = _ref.removePlaceholder,
-    removePlaceholder = _ref$removePlaceholde === void 0 ? 'Удалить' : _ref$removePlaceholde,
-    getRootRef = _ref.getRootRef,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  var rootEl = useExternRef(getRootRef);
-  var _useAdaptivity = useAdaptivity(),
-    _useAdaptivity$sizeY = _useAdaptivity.sizeY,
-    sizeY = _useAdaptivity$sizeY === void 0 ? 'none' : _useAdaptivity$sizeY;
-  var wrappedChildren = /*#__PURE__*/React.createElement(React.Fragment, null, hasReactNode(top) && /*#__PURE__*/React.createElement(Subhead, {
-    className: "vkuiFormItem__top"
-  }, top), children, hasReactNode(bottom) && /*#__PURE__*/React.createElement(Footnote, {
-    className: "vkuiFormItem__bottom"
-  }, bottom));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
-    ref: rootEl,
-    className: classNames("vkuiFormItem", status !== 'default' && styles["FormItem--status-".concat(status)], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], hasReactNode(top) && "vkuiFormItem--withTop", removable && "vkuiFormItem--removable", className)
-  }), removable ? /*#__PURE__*/React.createElement(Removable, {
-    align: "start",
-    onRemove: function onRemove(e) {
-      if (rootEl !== null && rootEl !== void 0 && rootEl.current) {
-        _onRemove(e, rootEl.current);
-      }
-    },
-    removePlaceholder: removePlaceholder
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "vkuiFormItem__removable"
-  }, wrappedChildren)) : wrappedChildren);
-};
-var styles = {
-  "FormItem--status-error": "vkuiFormItem--status-error",
-  "FormItem--status-valid": "vkuiFormItem--status-valid"
+ */ export const FormItem = ({ children , top , bottom , status ='default' , Component ='div' , removable , onRemove =noop , removePlaceholder ='Удалить' , getRootRef , className , ...restProps })=>{
+    const rootEl = useExternRef(getRootRef);
+    const { sizeY ='none'  } = useAdaptivity();
+    const wrappedChildren = /*#__PURE__*/ React.createElement(React.Fragment, null, hasReactNode(top) && /*#__PURE__*/ React.createElement(Subhead, {
+        className: styles['FormItem__top']
+    }, top), children, hasReactNode(bottom) && /*#__PURE__*/ React.createElement(Footnote, {
+        className: styles['FormItem__bottom']
+    }, bottom));
+    return /*#__PURE__*/ React.createElement(Component, {
+        ...restProps,
+        ref: rootEl,
+        className: classNames(styles['FormItem'], 'vkuiInternalFormItem', status !== 'default' && ({
+            error: classNames(styles['FormItem--status-error'], 'vkuiInternalFormItem--status-error'),
+            valid: classNames(styles['FormItem--status-valid'], 'vkuiInternalFormItem--status-valid')
+        })[status], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], hasReactNode(top) && classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'), removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'), className)
+    }, removable ? /*#__PURE__*/ React.createElement(Removable, {
+        align: "start",
+        onRemove: (e)=>{
+            if (rootEl?.current) {
+                onRemove(e, rootEl.current);
+            }
+        },
+        removePlaceholder: removePlaceholder
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')
+    }, wrappedChildren)) : wrappedChildren);
 };
+
 //# sourceMappingURL=FormItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormItem.js","names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","styles","REGULAR","e","current"],"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: styles['FormItem--sizeY-none'],\n  [SizeType.COMPACT]: styles['FormItem--sizeY-compact'],\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        status !== 'default' && styles[`FormItem--status-${status}`],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) && styles['FormItem--withTop'],\n        removable && styles['FormItem--removable'],\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n        >\n          <div className={styles['FormItem__removable']}>{wrappedChildren}</div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,iBAAiB;AAChE,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,YAAY,QAAQ,0BAA0B;AACvD,SAASC,QAAQ,QAAQ,sBAAsB;AAE/C,SAASC,SAAS,QAAwB,wBAAwB;AAClE,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,OAAO,QAAQ,+BAA+B;AAAC;AAGxD,IAAMC,eAAe;EACnBC,IAAI;AAAgC,GACnCL,QAAQ,CAACM,OAAO,gCAClB;AAgBD;AACA;AACA;AACA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAYA;EAAA,IAXnBC,QAAQ,QAARA,QAAQ;IACRC,GAAG,QAAHA,GAAG;IACHC,MAAM,QAANA,MAAM;IAAA,mBACNC,MAAM;IAANA,MAAM,4BAAG,SAAS;IAAA,sBAClBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IACjBC,SAAS,QAATA,SAAS;IAAA,qBACTC,QAAQ;IAARA,SAAQ,8BAAGjB,IAAI;IAAA,6BACfkB,iBAAiB;IAAjBA,iBAAiB,sCAAG,SAAS;IAC7BC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,MAAM,GAAGpB,YAAY,CAACiB,UAAU,CAAC;EACvC,qBAA2BlB,aAAa,EAAE;IAAA,sCAAlCsB,KAAK;IAALA,KAAK,qCAAG,MAAM;EAEtB,IAAMC,eAAe,gBACnB,oBAAC,KAAK,CAAC,QAAQ,QACZzB,YAAY,CAACa,GAAG,CAAC,iBAAI,oBAAC,OAAO;IAAC,SAAS;EAA0B,GAAEA,GAAG,CAAW,EACjFD,QAAQ,EACRZ,YAAY,CAACc,MAAM,CAAC,iBAAI,oBAAC,QAAQ;IAAC,SAAS;EAA6B,GAAEA,MAAM,CAAY,CAEhG;EAED,oBACE,oBAAC,SAAS,eACJQ,SAAS;IACb,GAAG,EAAEC,MAAO;IACZ,SAAS,EAAExB,UAAU,iBAEnBgB,MAAM,KAAK,SAAS,IAAIW,MAAM,4BAAqBX,MAAM,EAAG,EAC5DS,KAAK,KAAKpB,QAAQ,CAACuB,OAAO,IAAInB,eAAe,CAACgB,KAAK,CAAC,EACpDxB,YAAY,CAACa,GAAG,CAAC,2BAA+B,EAChDI,SAAS,6BAAiC,EAC1CI,SAAS;EACT,IAEDJ,SAAS,gBACR,oBAAC,SAAS;IACR,KAAK,EAAC,OAAO;IACb,QAAQ,EAAE,kBAACW,CAAC,EAAK;MACf,IAAIL,MAAM,aAANA,MAAM,eAANA,MAAM,CAAEM,OAAO,EAAE;QACnBX,SAAQ,CAACU,CAAC,EAAEL,MAAM,CAACM,OAAO,CAAC;MAC7B;IACF,CAAE;IACF,iBAAiB,EAAEV;EAAkB,gBAErC;IAAK,SAAS;EAAgC,GAAEM,eAAe,CAAO,CAC5D,GAEZA,eACD,CACS;AAEhB,CAAC;AAAC;EAAA;EAAA;AAAA"}
+{"version":3,"sources":["../../../../src/components/FormItem/FormItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { SizeType } from '../../lib/adaptivity';\nimport { HasComponent, HasRootRef } from '../../types';\nimport { Removable, RemovableProps } from '../Removable/Removable';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport styles from './FormItem.module.css';\n\nconst sizeYClassNames = {\n  none: classNames(styles['FormItem--sizeY-none'], 'vkuiInternalFormItem--sizeY-none'),\n  [SizeType.COMPACT]: classNames(\n    styles['FormItem--sizeY-compact'],\n    'vkuiInternalFormItem--sizeY-compact',\n  ),\n};\n\nexport interface FormItemProps\n  extends React.AllHTMLAttributes<HTMLElement>,\n    HasRootRef<HTMLElement>,\n    HasComponent,\n    RemovableProps {\n  top?: React.ReactNode;\n  bottom?: React.ReactNode;\n  status?: 'default' | 'error' | 'valid';\n  /**\n   * Дает возможность удалить `FormItem`. Рекомендуется использовать только для `Input` или `Select`.\n   */\n  removable?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormItem\n */\nexport const FormItem = ({\n  children,\n  top,\n  bottom,\n  status = 'default',\n  Component = 'div',\n  removable,\n  onRemove = noop,\n  removePlaceholder = 'Удалить',\n  getRootRef,\n  className,\n  ...restProps\n}: FormItemProps) => {\n  const rootEl = useExternRef(getRootRef);\n  const { sizeY = 'none' } = useAdaptivity();\n\n  const wrappedChildren = (\n    <React.Fragment>\n      {hasReactNode(top) && <Subhead className={styles['FormItem__top']}>{top}</Subhead>}\n      {children}\n      {hasReactNode(bottom) && <Footnote className={styles['FormItem__bottom']}>{bottom}</Footnote>}\n    </React.Fragment>\n  );\n\n  return (\n    <Component\n      {...restProps}\n      ref={rootEl}\n      className={classNames(\n        styles['FormItem'],\n        'vkuiInternalFormItem',\n        status !== 'default' &&\n          {\n            error: classNames(\n              styles['FormItem--status-error'],\n              'vkuiInternalFormItem--status-error',\n            ),\n            valid: classNames(\n              styles['FormItem--status-valid'],\n              'vkuiInternalFormItem--status-valid',\n            ),\n          }[status],\n        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],\n        hasReactNode(top) &&\n          classNames(styles['FormItem--withTop'], 'vkuiInternalFormItem--withTop'),\n        removable && classNames(styles['FormItem--removable'], 'vkuiInternalFormItem--removable'),\n        className,\n      )}\n    >\n      {removable ? (\n        <Removable\n          align=\"start\"\n          onRemove={(e) => {\n            if (rootEl?.current) {\n              onRemove(e, rootEl.current);\n            }\n          }}\n          removePlaceholder={removePlaceholder}\n        >\n          <div\n            className={classNames(styles['FormItem__removable'], 'vkuiInternalFormItem__removable')}\n          >\n            {wrappedChildren}\n          </div>\n        </Removable>\n      ) : (\n        wrappedChildren\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","hasReactNode","noop","useAdaptivity","useExternRef","SizeType","Removable","Footnote","Subhead","styles","sizeYClassNames","none","COMPACT","FormItem","children","top","bottom","status","Component","removable","onRemove","removePlaceholder","getRootRef","className","restProps","rootEl","sizeY","wrappedChildren","Fragment","ref","error","valid","REGULAR","align","e","current","div"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,YAAY,QAAQ,2BAA2B;AACxD,SAASC,QAAQ,QAAQ,uBAAuB;AAEhD,SAASC,SAAS,QAAwB,yBAAyB;AACnE,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,OAAO,QAAQ,gCAAgC;AACxD,OAAOC,YAAY,wBAAwB;AAE3C,MAAMC,kBAAkB;IACtBC,MAAMX,WAAWS,MAAM,CAAC,uBAAuB,EAAE;IACjD,CAACJ,SAASO,OAAO,CAAC,EAAEZ,WAClBS,MAAM,CAAC,0BAA0B,EACjC;AAEJ;AAgBA;;CAEC,GACD,OAAO,MAAMI,WAAW,CAAC,EACvBC,SAAQ,EACRC,IAAG,EACHC,OAAM,EACNC,QAAS,UAAS,EAClBC,WAAY,MAAK,EACjBC,UAAS,EACTC,UAAWlB,KAAI,EACfmB,mBAAoB,UAAS,EAC7BC,WAAU,EACVC,UAAS,EACT,GAAGC,WACW,GAAK;IACnB,MAAMC,SAASrB,aAAakB;IAC5B,MAAM,EAAEI,OAAQ,OAAM,EAAE,GAAGvB;IAE3B,MAAMwB,gCACJ,oBAAC5B,MAAM6B,QAAQ,QACZ3B,aAAac,sBAAQ,oBAACP;QAAQe,WAAWd,MAAM,CAAC,gBAAgB;OAAGM,MACnED,UACAb,aAAae,yBAAW,oBAACT;QAASgB,WAAWd,MAAM,CAAC,mBAAmB;OAAGO;IAI/E,qBACE,oBAACE;QACE,GAAGM,SAAS;QACbK,KAAKJ;QACLF,WAAWvB,WACTS,MAAM,CAAC,WAAW,EAClB,wBACAQ,WAAW,aACT,CAAA;YACEa,OAAO9B,WACLS,MAAM,CAAC,yBAAyB,EAChC;YAEFsB,OAAO/B,WACLS,MAAM,CAAC,yBAAyB,EAChC;QAEJ,CAAA,CAAC,CAACQ,OAAO,EACXS,UAAUrB,SAAS2B,OAAO,IAAItB,eAAe,CAACgB,MAAM,EACpDzB,aAAac,QACXf,WAAWS,MAAM,CAAC,oBAAoB,EAAE,kCAC1CU,aAAanB,WAAWS,MAAM,CAAC,sBAAsB,EAAE,oCACvDc;OAGDJ,0BACC,oBAACb;QACC2B,OAAM;QACNb,UAAU,CAACc,IAAM;YACf,IAAIT,QAAQU,SAAS;gBACnBf,SAASc,GAAGT,OAAOU,OAAO;YAC5B,CAAC;QACH;QACAd,mBAAmBA;qBAEnB,oBAACe;QACCb,WAAWvB,WAAWS,MAAM,CAAC,sBAAsB,EAAE;OAEpDkB,oBAILA,eACD;AAGP,EAAE"}

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

@@ -1 +1 @@
-.vkuiFormItem{display:block;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;overflow:hidden;padding:0}.vkuiFormItem__top{color:#6d7885;color:var(--vkui--color_text_subhead);overflow:hidden;padding-bottom:8px;padding-top:2px;text-overflow:ellipsis;white-space:nowrap}.vkuiFormItem__bottom{color:#818c99;color:var(--vkui--color_text_secondary);padding-top:8px}.vkuiFormItem--status-error .vkuiFormItem__bottom{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiFormItem--status-valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:#4bb34b;color:var(--vkui--color_text_positive)}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-none .vkuiFormItem__bottom{padding-top:6px}}.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;padding:0}.vkuiFormLayoutGroup--mode-horizontal:not(.vkuiFormLayoutGroup--segmented) .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--withTop{margin-top:calc(-2px - 18px - 8px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px)}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-compact.vkuiFormItem--withTop{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-none.vkuiFormItem--withTop{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}}
+.vkuiFormItem{display:block;padding:12px 16px;padding:var(--vkui--size_form_item_padding_vertical--regular) var(--vkui--size_base_padding_horizontal--regular)}.vkuiFormItem--removable{padding-left:0;padding-right:0}.vkuiFormItem__removable{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;overflow:hidden;padding:0}.vkuiFormItem__top{color:#6d7885;color:var(--vkui--color_text_subhead);overflow:hidden;padding-bottom:8px;padding-top:2px;text-overflow:ellipsis;white-space:nowrap}.vkuiFormItem__bottom{color:#818c99;color:var(--vkui--color_text_secondary);padding-top:8px}.vkuiFormItem--status-error .vkuiFormItem__bottom{color:#e64646;color:var(--vkui--color_text_negative)}.vkuiFormItem--status-valid .vkuiFormItem__bottom,.vkuiFormItem--verified .vkuiFormItem__bottom{color:#4bb34b;color:var(--vkui--color_text_positive)}.vkuiFormItem--sizeY-compact .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-compact .vkuiFormItem__bottom{padding-top:6px}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none .vkuiFormItem__top{padding-bottom:6px}.vkuiFormItem--sizeY-none .vkuiFormItem__bottom{padding-top:6px}}.vkuiInternalFormLayoutGroup--mode-horizontal .vkuiFormItem{flex-basis:0;flex-grow:1;flex-shrink:0;max-width:100%;min-width:1px;padding:0}.vkuiInternalFormLayoutGroup--mode-horizontal:not(.vkuiInternalFormLayoutGroup--segmented) .vkuiFormItem+.vkuiFormItem{margin-left:24px}.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiInternalFormLayoutGroup--mode-horizontal .vkuiFormItem--withTop{margin-top:calc(-2px - 18px - 8px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--regular) - 8px)}.vkuiFormItem--sizeY-compact.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiInternalFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-compact.vkuiFormItem--withTop{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}@media (max-height:414.9px),(pointer:fine) and (min-width:768px){.vkuiFormItem--sizeY-none.vkuiFormItem--withTop .vkuiFormItem__removable,.vkuiInternalFormLayoutGroup--mode-horizontal .vkuiFormItem--sizeY-none.vkuiFormItem--withTop{margin-top:calc(-2px - 16px - 6px);margin-top:calc(-2px - var(--vkui--font_subhead--line_height--compact) - 6px)}}

package/dist/cssm/components/FormLayout/FormLayout.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HasComponent, HasRef } from '../../types';
-export declare type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> & HasRef<HTMLElement> & HasComponent;
+export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> & HasRef<HTMLElement> & HasComponent;
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout
  */

package/dist/cssm/components/FormLayout/FormLayout.js

@@ -1,34 +1,20 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "Component", "getRef", "onSubmit", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import "./FormLayout.module.css";
-var preventDefault = function preventDefault(e) {
-  return e.preventDefault();
-};
+import styles from './FormLayout.module.css';
+const preventDefault = (e)=>e.preventDefault();
 /**
  * @see https://vkcom.github.io/VKUI/#/FormLayout
- */
-export var FormLayout = function FormLayout(_ref) {
-  var children = _ref.children,
-    _ref$Component = _ref.Component,
-    Component = _ref$Component === void 0 ? 'form' : _ref$Component,
-    getRef = _ref.getRef,
-    _ref$onSubmit = _ref.onSubmit,
-    onSubmit = _ref$onSubmit === void 0 ? preventDefault : _ref$onSubmit,
-    className = _ref.className,
-    restProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {
-    className: classNames("vkuiFormLayout", className),
-    onSubmit: onSubmit,
-    ref: getRef
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "vkuiFormLayout__container"
-  }, children), Component === 'form' && /*#__PURE__*/React.createElement("input", {
-    type: "submit",
-    className: "vkuiFormLayout__submit",
-    value: ""
-  }));
+ */ export const FormLayout = ({ children , Component ='form' , getRef , onSubmit =preventDefault , className , ...restProps })=>{
+    return /*#__PURE__*/ React.createElement(Component, {
+        ...restProps,
+        className: classNames(styles['FormLayout'], className),
+        onSubmit: onSubmit,
+        ref: getRef
+    }, children, Component === 'form' && /*#__PURE__*/ React.createElement("input", {
+        type: "submit",
+        className: styles['FormLayout__submit'],
+        value: ""
+    }));
 };
+
 //# sourceMappingURL=FormLayout.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormLayout.js","names":["React","classNames","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps"],"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n  HasRef<HTMLElement> &\n  HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n  children,\n  Component = 'form',\n  getRef,\n  onSubmit = preventDefault,\n  className,\n  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['FormLayout'], className)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      <div className={styles['FormLayout__container']}>{children}</div>\n      {Component === 'form' && (\n        <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAAC;AAI7C,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAIC,CAAkB;EAAA,OAAKA,CAAC,CAACD,cAAc,EAAE;AAAA;AAMjE;AACA;AACA;AACA,OAAO,IAAME,UAAU,GAAG,SAAbA,UAAU,OAOA;EAAA,IANrBC,QAAQ,QAARA,QAAQ;IAAA,sBACRC,SAAS;IAATA,SAAS,+BAAG,MAAM;IAClBC,MAAM,QAANA,MAAM;IAAA,qBACNC,QAAQ;IAARA,QAAQ,8BAAGN,cAAc;IACzBO,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,oBACE,oBAAC,SAAS,eACJA,SAAS;IACb,SAAS,EAAET,UAAU,mBAAuBQ,SAAS,CAAE;IACvD,QAAQ,EAAED,QAAS;IACnB,GAAG,EAAED;EAAO,iBAEZ;IAAK,SAAS;EAAkC,GAAEF,QAAQ,CAAO,EAChEC,SAAS,KAAK,MAAM,iBACnB;IAAO,IAAI,EAAC,QAAQ;IAAC,SAAS,0BAA+B;IAAC,KAAK,EAAC;EAAE,EACvE,CACS;AAEhB,CAAC"}
+{"version":3,"sources":["../../../../src/components/FormLayout/FormLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasComponent, HasRef } from '../../types';\nimport styles from './FormLayout.module.css';\n\nconst preventDefault = (e: React.FormEvent) => e.preventDefault();\n\nexport type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &\n  HasRef<HTMLElement> &\n  HasComponent;\n\n/**\n * @see https://vkcom.github.io/VKUI/#/FormLayout\n */\nexport const FormLayout = ({\n  children,\n  Component = 'form',\n  getRef,\n  onSubmit = preventDefault,\n  className,\n  ...restProps\n}: FormLayoutProps) => {\n  return (\n    <Component\n      {...restProps}\n      className={classNames(styles['FormLayout'], className)}\n      onSubmit={onSubmit}\n      ref={getRef}\n    >\n      {children}\n      {Component === 'form' && (\n        <input type=\"submit\" className={styles['FormLayout__submit']} value=\"\" />\n      )}\n    </Component>\n  );\n};\n"],"names":["React","classNames","styles","preventDefault","e","FormLayout","children","Component","getRef","onSubmit","className","restProps","ref","input","type","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,0BAA0B;AAE7C,MAAMC,iBAAiB,CAACC,IAAuBA,EAAED,cAAc;AAM/D;;CAEC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAQ,EACRC,WAAY,OAAM,EAClBC,OAAM,EACNC,UAAWN,eAAc,EACzBO,UAAS,EACT,GAAGC,WACa,GAAK;IACrB,qBACE,oBAACJ;QACE,GAAGI,SAAS;QACbD,WAAWT,WAAWC,MAAM,CAAC,aAAa,EAAEQ;QAC5CD,UAAUA;QACVG,KAAKJ;OAEJF,UACAC,cAAc,wBACb,oBAACM;QAAMC,MAAK;QAASJ,WAAWR,MAAM,CAAC,qBAAqB;QAAEa,OAAM;;AAI5E,EAAE"}