@vkontakte/vkui 4.37.0 → 5.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["warn","warnOnce","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","sizeY","onChange","restProps","inputRef","useExternRef","platform","usePlatform","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","classNames","hasReactNode","disabled","IOS","ACTIVE_EFFECT_DELAY","SizeType","COMPACT","VKCOM","withAdaptivity"],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ACTIVE_EFFECT_DELAY, Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { IOS, VKCOM } from \"../../lib/platform\";\n\nimport {\n  Icon20CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOn,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from \"@vkontakte/icons\";\n\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport {\n  withAdaptivity,\n  AdaptivityProps,\n  SizeType,\n} from \"../../hoc/withAdaptivity\";\nimport { Text } from \"../Typography/Text/Text\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Checkbox.css\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement>,\n    AdaptivityProps {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce(\"Checkbox\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  sizeY,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n\n  React.useEffect(() => {\n    const indeterminateValue =\n      indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps[\"onChange\"] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]\n  );\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn(\n        \"defaultIndeterminate и defaultChecked не могут быть true одновременно\",\n        \"error\"\n      );\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn(\"indeterminate и checked не могут быть true одновременно\", \"error\");\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn(\"defaultChecked и checked не могут быть true одновременно\", \"error\");\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      vkuiClass={classNames(\n        \"Checkbox\",\n        `Checkbox--sizeY-${sizeY}`,\n        !(hasReactNode(children) || hasReactNode(description)) &&\n          `Checkbox--simple`\n      )}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        vkuiClass=\"Checkbox__input\"\n        getRef={inputRef}\n      />\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--on\">\n        {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n          <Icon20CheckBoxOn aria-hidden />\n        ) : (\n          <Icon24CheckBoxOn aria-hidden />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--off\">\n        {sizeY === SizeType.COMPACT || platform === VKCOM ? (\n          <Icon20CheckBoxOff aria-hidden />\n        ) : (\n          <Icon24CheckBoxOff aria-hidden />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--indeterminate\">\n        <Icon20CheckBoxIndetermanate\n          aria-hidden\n          width={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n          height={sizeY === SizeType.COMPACT || platform === VKCOM ? 20 : 24}\n        />\n      </div>\n      <Text vkuiClass=\"Checkbox__content\" Component=\"div\">\n        <div vkuiClass=\"Checkbox__children\">{children}</div>\n        {hasReactNode(description) && (\n          <Caption vkuiClass=\"Checkbox__description\">{description}</Caption>\n        )}\n      </Text>\n    </Tappable>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default withAdaptivity(Checkbox, {\n  sizeY: true,\n});\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["warn","warnOnce","Checkbox","children","className","style","getRootRef","getRef","description","indeterminate","defaultIndeterminate","onChange","restProps","inputRef","useExternRef","platform","usePlatform","useAdaptivity","sizeY","React","useEffect","indeterminateValue","undefined","current","Boolean","handleChange","useCallback","event","checked","process","env","NODE_ENV","defaultChecked","classNames","Platform","VKCOM","getSizeYClassName","hasReactNode","disabled","IOS","ACTIVE_EFFECT_DELAY"],"sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ACTIVE_EFFECT_DELAY, Tappable } from \"../Tappable/Tappable\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Platform } from \"../../lib/platform\";\nimport {\n  Icon20CheckBoxOn,\n  Icon24CheckBoxOn,\n  Icon20CheckBoxOff,\n  Icon24CheckBoxOff,\n  Icon20CheckBoxIndetermanate,\n} from \"@vkontakte/icons\";\nimport { HasRef, HasRootRef } from \"../../types\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { hasReactNode } from \"../../lib/utils\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { SizeYConditionalRender } from \"../SizeYConditionalRender/SizeYConditionalRender\";\nimport { VisuallyHiddenInput } from \"../VisuallyHiddenInput/VisuallyHiddenInput\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport \"./Checkbox.css\";\n\nexport interface CheckboxProps\n  extends React.InputHTMLAttributes<HTMLInputElement>,\n    HasRootRef<HTMLLabelElement>,\n    HasRef<HTMLInputElement> {\n  description?: React.ReactNode;\n  indeterminate?: boolean;\n  defaultIndeterminate?: boolean;\n}\n\nconst warn = warnOnce(\"Checkbox\");\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Checkbox\n */\nexport const Checkbox = ({\n  children,\n  className,\n  style,\n  getRootRef,\n  getRef,\n  description,\n  indeterminate,\n  defaultIndeterminate,\n  onChange,\n  ...restProps\n}: CheckboxProps) => {\n  const inputRef = useExternRef(getRef);\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n\n  React.useEffect(() => {\n    const indeterminateValue =\n      indeterminate === undefined ? defaultIndeterminate : indeterminate;\n\n    if (inputRef.current) {\n      inputRef.current.indeterminate = Boolean(indeterminateValue);\n    }\n  }, [defaultIndeterminate, indeterminate, inputRef]);\n\n  const handleChange: CheckboxProps[\"onChange\"] = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (\n        defaultIndeterminate !== undefined &&\n        indeterminate === undefined &&\n        restProps.checked === undefined &&\n        inputRef.current\n      ) {\n        inputRef.current.indeterminate = false;\n      }\n      if (indeterminate !== undefined && inputRef.current) {\n        inputRef.current.indeterminate = indeterminate;\n      }\n      onChange && onChange(event);\n    },\n    [defaultIndeterminate, indeterminate, restProps.checked, onChange, inputRef]\n  );\n\n  if (process.env.NODE_ENV === \"development\") {\n    if (defaultIndeterminate && restProps.defaultChecked) {\n      warn(\n        \"defaultIndeterminate и defaultChecked не могут быть true одновременно\",\n        \"error\"\n      );\n    }\n\n    if (indeterminate && restProps.checked) {\n      warn(\"indeterminate и checked не могут быть true одновременно\", \"error\");\n    }\n\n    if (restProps.defaultChecked && restProps.checked) {\n      warn(\"defaultChecked и checked не могут быть true одновременно\", \"error\");\n    }\n  }\n\n  return (\n    <Tappable\n      Component=\"label\"\n      vkuiClass={classNames(\n        \"Checkbox\",\n        platform === Platform.VKCOM && \"Checkbox--vkcom\",\n        getSizeYClassName(\"Checkbox\", sizeY),\n        !(hasReactNode(children) || hasReactNode(description)) &&\n          \"Checkbox--simple\"\n      )}\n      className={className}\n      style={style}\n      disabled={restProps.disabled}\n      activeEffectDelay={platform === Platform.IOS ? 100 : ACTIVE_EFFECT_DELAY}\n      getRootRef={getRootRef}\n    >\n      <VisuallyHiddenInput\n        {...restProps}\n        onChange={handleChange}\n        type=\"checkbox\"\n        vkuiClass=\"Checkbox__input\"\n        getRef={inputRef}\n      />\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--on\">\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOn aria-hidden />\n        ) : (\n          <SizeYConditionalRender\n            compact={<Icon20CheckBoxOn aria-hidden />}\n            regular={<Icon24CheckBoxOn aria-hidden />}\n          />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--off\">\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxOff aria-hidden />\n        ) : (\n          <SizeYConditionalRender\n            compact={<Icon20CheckBoxOff aria-hidden />}\n            regular={<Icon24CheckBoxOff aria-hidden />}\n          />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__icon Checkbox__icon--indeterminate\">\n        {platform === Platform.VKCOM ? (\n          <Icon20CheckBoxIndetermanate aria-hidden width={20} height={20} />\n        ) : (\n          <SizeYConditionalRender\n            compact={\n              <Icon20CheckBoxIndetermanate aria-hidden width={20} height={20} />\n            }\n            regular={\n              <Icon20CheckBoxIndetermanate aria-hidden width={24} height={24} />\n            }\n          />\n        )}\n      </div>\n      <div vkuiClass=\"Checkbox__content\">\n        <div vkuiClass=\"Checkbox__children\">{children}</div>\n        {hasReactNode(description) && (\n          <Footnote vkuiClass=\"Checkbox__description\">{description}</Footnote>\n        )}\n      </div>\n    </Tappable>\n  );\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/cjs/components/Chip/Chip.js

@@ -23,12 +23,14 @@ var _utils = require("../../lib/utils");
 
 var _classNames = require("../../lib/classNames");
 
-var _Caption = require("../Typography/Caption/Caption");
+var _Footnote = require("../Typography/Footnote/Footnote");
 
 var _Tappable = require("../Tappable/Tappable");
 
 var _useAdaptivity2 = require("../../hooks/useAdaptivity");
 
+var _getSizeYClassName = require("../../helpers/getSizeYClassName");
+
 var _excluded = ["value", "option", "removable", "onRemove", "removeAriaLabel", "before", "after", "children"];
 
 /**
@@ -58,8 +60,7 @@ var Chip = function Chip(_ref) {
   }, [onRemove, value]);
   var title = (0, _utils.getTitleFromChildren)(children);
   return (0, _jsxRuntime.createScopedElement)("div", (0, _extends2.default)({
-    vkuiClass: (0, _classNames.classNames)("Chip", removable && "Chip--removable", "Chip--sizeY-".concat(sizeY) // TODO: v5 новая адаптивность
-    ),
+    vkuiClass: (0, _classNames.classNames)("Chip", (0, _getSizeYClassName.getSizeYClassName)("Chip", sizeY), removable && "Chip--removable"),
     role: "option",
     "aria-label": title
   }, restProps), (0, _jsxRuntime.createScopedElement)("div", {
@@ -67,7 +68,7 @@ var Chip = function Chip(_ref) {
     role: "presentation"
   }, (0, _utils.hasReactNode)(before) && (0, _jsxRuntime.createScopedElement)("div", {
     vkuiClass: "Chip__before"
-  }, before), (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+  }, before), (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
     vkuiClass: "Chip__content",
     title: title,
     "aria-hidden": "true"

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","restProps","useAdaptivity","sizeY","onRemoveWrapper","React","useCallback","event","title","getTitleFromChildren","classNames","hasReactNode"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./Chip.css\";\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = \"\",\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = \"Удалить\",\n  before = null,\n  after,\n  children,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value]\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Chip\",\n        removable && \"Chip--removable\",\n        `Chip--sizeY-${sizeY}` // TODO: v5 новая адаптивность\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div vkuiClass=\"Chip__in\" role=\"presentation\">\n        {hasReactNode(before) && <div vkuiClass=\"Chip__before\">{before}</div>}\n        <Caption vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">\n          {children}\n        </Caption>\n        {hasReactNode(after) && <div vkuiClass=\"Chip__after\">{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            vkuiClass=\"Chip__remove\"\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel aria-hidden={true} />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA2BA;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAUH;EAAA,sBATfC,KASe;EAAA,IATfA,KASe,2BATP,EASO;EAAA,IARfC,MAQe,QARfA,MAQe;EAAA,0BAPfC,SAOe;EAAA,IAPfA,SAOe,+BAPH,IAOG;EAAA,yBANfC,QAMe;EAAA,IANfA,QAMe,8BANJC,WAMI;EAAA,gCALfC,eAKe;EAAA,IALfA,eAKe,qCALG,SAKH;EAAA,uBAJfC,MAIe;EAAA,IAJfA,MAIe,4BAJN,IAIM;EAAA,IAHfC,KAGe,QAHfA,KAGe;EAAA,IAFfC,QAEe,QAFfA,QAEe;EAAA,IADZC,SACY;;EACf,qBAAkB,IAAAC,6BAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,IAAMC,eAAe,GAAGC,KAAK,CAACC,WAAN,CACtB,UAACC,KAAD,EAA6B;IAC3BZ,QAAQ,CAACY,KAAD,EAAQf,KAAR,CAAR;EACD,CAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;EAMA,IAAMgB,KAAK,GAAG,IAAAC,2BAAA,EAAqBT,QAArB,CAAd;EAEA,OACE;IACE,SAAS,EAAE,IAAAU,sBAAA,EACT,MADS,EAEThB,SAAS,IAAI,iBAFJ,wBAGMS,KAHN,EAGc;IAHd,CADb;IAME,IAAI,EAAC,QANP;IAOE,cAAYK;EAPd,GAQMP,SARN,GAUE;IAAK,SAAS,EAAC,UAAf;IAA0B,IAAI,EAAC;EAA/B,GACG,IAAAU,mBAAA,EAAab,MAAb,KAAwB;IAAK,SAAS,EAAC;EAAf,GAA+BA,MAA/B,CAD3B,EAEE,qCAAC,gBAAD;IAAS,SAAS,EAAC,eAAnB;IAAmC,KAAK,EAAEU,KAA1C;IAAiD,eAAY;EAA7D,GACGR,QADH,CAFF,EAKG,IAAAW,mBAAA,EAAaZ,KAAb,KAAuB;IAAK,SAAS,EAAC;EAAf,GAA8BA,KAA9B,CAL1B,EAOGL,SAAS,IACR,qCAAC,kBAAD;IACE,SAAS,EAAC,QADZ;IAEE,SAAS,EAAC,cAFZ;IAGE,OAAO,EAAEU,eAHX;IAIE,QAAQ,EAAE,KAJZ;IAKE,SAAS,EAAE,KALb;IAME,wBAAeP,eAAf,cAAkCW,KAAlC;EANF,GAQE,qCAAC,mBAAD;IAAc,eAAa;EAA3B,EARF,CARJ,CAVF,CADF;AAiCD,CArDM"}
+{"version":3,"file":"Chip.js","names":["Chip","value","option","removable","onRemove","noop","removeAriaLabel","before","after","children","restProps","useAdaptivity","sizeY","onRemoveWrapper","React","useCallback","event","title","getTitleFromChildren","classNames","getSizeYClassName","hasReactNode"],"sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Icon16Cancel } from \"@vkontakte/icons\";\nimport { getTitleFromChildren, hasReactNode, noop } from \"../../lib/utils\";\nimport { classNames } from \"../../lib/classNames\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { Tappable } from \"../Tappable/Tappable\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { getSizeYClassName } from \"../../helpers/getSizeYClassName\";\nimport \"./Chip.css\";\n\nexport type ChipValue = string | number;\n\nexport interface ChipOption {\n  value?: ChipValue;\n  label?: string;\n  [otherProp: string]: any;\n}\n\nexport interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {\n  value: ChipValue;\n  option?: ChipOption;\n  onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;\n  removable?: boolean;\n  removeAriaLabel?: string;\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n}\n\nexport interface RenderChip<T> extends ChipProps {\n  label: string;\n  option: T;\n  disabled: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Chip\n */\nexport const Chip = ({\n  value = \"\",\n  option,\n  removable = true,\n  onRemove = noop,\n  removeAriaLabel = \"Удалить\",\n  before = null,\n  after,\n  children,\n  ...restProps\n}: ChipProps) => {\n  const { sizeY } = useAdaptivity();\n  const onRemoveWrapper = React.useCallback(\n    (event: React.MouseEvent) => {\n      onRemove(event, value);\n    },\n    [onRemove, value]\n  );\n  const title = getTitleFromChildren(children);\n\n  return (\n    <div\n      vkuiClass={classNames(\n        \"Chip\",\n        getSizeYClassName(\"Chip\", sizeY),\n        removable && \"Chip--removable\"\n      )}\n      role=\"option\"\n      aria-label={title}\n      {...restProps}\n    >\n      <div vkuiClass=\"Chip__in\" role=\"presentation\">\n        {hasReactNode(before) && <div vkuiClass=\"Chip__before\">{before}</div>}\n        <Footnote vkuiClass=\"Chip__content\" title={title} aria-hidden=\"true\">\n          {children}\n        </Footnote>\n        {hasReactNode(after) && <div vkuiClass=\"Chip__after\">{after}</div>}\n\n        {removable && (\n          <Tappable\n            Component=\"button\"\n            vkuiClass=\"Chip__remove\"\n            onClick={onRemoveWrapper}\n            hasHover={false}\n            hasActive={false}\n            aria-label={`${removeAriaLabel} ${title}`}\n          >\n            <Icon16Cancel aria-hidden={true} />\n          </Tappable>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AA2BA;AACA;AACA;AACO,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAUH;EAAA,sBATfC,KASe;EAAA,IATfA,KASe,2BATP,EASO;EAAA,IARfC,MAQe,QARfA,MAQe;EAAA,0BAPfC,SAOe;EAAA,IAPfA,SAOe,+BAPH,IAOG;EAAA,yBANfC,QAMe;EAAA,IANfA,QAMe,8BANJC,WAMI;EAAA,gCALfC,eAKe;EAAA,IALfA,eAKe,qCALG,SAKH;EAAA,uBAJfC,MAIe;EAAA,IAJfA,MAIe,4BAJN,IAIM;EAAA,IAHfC,KAGe,QAHfA,KAGe;EAAA,IAFfC,QAEe,QAFfA,QAEe;EAAA,IADZC,SACY;;EACf,qBAAkB,IAAAC,6BAAA,GAAlB;EAAA,IAAQC,KAAR,kBAAQA,KAAR;;EACA,IAAMC,eAAe,GAAGC,KAAK,CAACC,WAAN,CACtB,UAACC,KAAD,EAA6B;IAC3BZ,QAAQ,CAACY,KAAD,EAAQf,KAAR,CAAR;EACD,CAHqB,EAItB,CAACG,QAAD,EAAWH,KAAX,CAJsB,CAAxB;EAMA,IAAMgB,KAAK,GAAG,IAAAC,2BAAA,EAAqBT,QAArB,CAAd;EAEA,OACE;IACE,SAAS,EAAE,IAAAU,sBAAA,EACT,MADS,EAET,IAAAC,oCAAA,EAAkB,MAAlB,EAA0BR,KAA1B,CAFS,EAGTT,SAAS,IAAI,iBAHJ,CADb;IAME,IAAI,EAAC,QANP;IAOE,cAAYc;EAPd,GAQMP,SARN,GAUE;IAAK,SAAS,EAAC,UAAf;IAA0B,IAAI,EAAC;EAA/B,GACG,IAAAW,mBAAA,EAAad,MAAb,KAAwB;IAAK,SAAS,EAAC;EAAf,GAA+BA,MAA/B,CAD3B,EAEE,qCAAC,kBAAD;IAAU,SAAS,EAAC,eAApB;IAAoC,KAAK,EAAEU,KAA3C;IAAkD,eAAY;EAA9D,GACGR,QADH,CAFF,EAKG,IAAAY,mBAAA,EAAab,KAAb,KAAuB;IAAK,SAAS,EAAC;EAAf,GAA8BA,KAA9B,CAL1B,EAOGL,SAAS,IACR,qCAAC,kBAAD;IACE,SAAS,EAAC,QADZ;IAEE,SAAS,EAAC,cAFZ;IAGE,OAAO,EAAEU,eAHX;IAIE,QAAQ,EAAE,KAJZ;IAKE,SAAS,EAAE,KALb;IAME,wBAAeP,eAAf,cAAkCW,KAAlC;EANF,GAQE,qCAAC,mBAAD;IAAc,eAAa;EAA3B,EARF,CARJ,CAVF,CADF;AAiCD,CArDM"}

package/dist/cjs/components/ChipsSelect/ChipsSelect.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ChipsSelect = void 0;
 
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -19,6 +17,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
+var _jsxRuntime = require("../../lib/jsxRuntime");
+
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -37,7 +37,7 @@ var _utils = require("../../lib/utils");
 
 var _dom = require("../../lib/dom");
 
-var _Caption = require("../Typography/Caption/Caption");
+var _Footnote = require("../Typography/Footnote/Footnote");
 
 var _prefixClass = require("../../lib/prefixClass");
 
@@ -53,8 +53,7 @@ var _FormField = require("../FormField/FormField");
 
 var _IconButton = require("../IconButton/IconButton");
 
-var _excluded = ["option"],
-    _excluded2 = ["style", "onFocus", "onKeyDown", "className", "fetching", "renderOption", "emptyText", "getRef", "getRootRef", "disabled", "placeholder", "tabIndex", "getOptionValue", "getOptionLabel", "showSelected", "getNewOptionData", "renderChip", "popupDirection", "creatable", "filterFn", "inputValue", "creatableText", "closeAfterSelect", "onChangeStart", "before", "options", "fixDropdownWidth", "forceDropdownPortal"];
+var _excluded = ["style", "onFocus", "onKeyDown", "className", "fetching", "renderOption", "emptyText", "getRef", "getRootRef", "disabled", "placeholder", "tabIndex", "getOptionValue", "getOptionLabel", "showSelected", "getNewOptionData", "renderChip", "popupDirection", "creatable", "filterFn", "inputValue", "creatableText", "closeAfterSelect", "onChangeStart", "before", "options", "fixDropdownWidth", "forceDropdownPortal"];
 var FOCUS_ACTION_NEXT = "next";
 var FOCUS_ACTION_PREV = "prev";
 var chipsSelectDefaultProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, _ChipsInputBase.chipsInputDefaultProps), {}, {
@@ -67,10 +66,8 @@ var chipsSelectDefaultProps = (0, _objectSpread2.default)((0, _objectSpread2.def
   closeAfterSelect: true,
   options: [],
   filterFn: _select.defaultFilterFn,
-  renderOption: function renderOption(_ref) {
-    var option = _ref.option,
-        restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-    return (0, _jsxRuntime.createScopedElement)(_CustomSelectOption.CustomSelectOption, restProps);
+  renderOption: function renderOption(props) {
+    return (0, _jsxRuntime.createScopedElement)(_CustomSelectOption.CustomSelectOption, props);
   }
 });
 /**
@@ -107,7 +104,7 @@ var ChipsSelect = function ChipsSelect(props) {
       options = propsWithDefault.options,
       fixDropdownWidth = propsWithDefault.fixDropdownWidth,
       forceDropdownPortal = propsWithDefault.forceDropdownPortal,
-      restProps = (0, _objectWithoutProperties2.default)(propsWithDefault, _excluded2);
+      restProps = (0, _objectWithoutProperties2.default)(propsWithDefault, _excluded);
 
   var _useDOM = (0, _dom.useDOM)(),
       document = _useDOM.document;
@@ -264,8 +261,8 @@ var ChipsSelect = function ChipsSelect(props) {
     }
   }, [focusedOptionIndex, filteredOptions, setFocusedOption]);
   React.useEffect(function () {
-    var index = focusedOption ? filteredOptions.findIndex(function (_ref2) {
-      var value = _ref2.value;
+    var index = focusedOption ? filteredOptions.findIndex(function (_ref) {
+      var value = _ref.value;
       return value === focusedOption.value;
     }) : -1;
 
@@ -362,7 +359,7 @@ var ChipsSelect = function ChipsSelect(props) {
     onMouseEnter: function onMouseEnter() {
       return setFocusedOptionIndex(0);
     }
-  }, creatableText), !(filteredOptions !== null && filteredOptions !== void 0 && filteredOptions.length) && !showCreatable && emptyText ? (0, _jsxRuntime.createScopedElement)(_Caption.Caption, {
+  }, creatableText), !(filteredOptions !== null && filteredOptions !== void 0 && filteredOptions.length) && !showCreatable && emptyText ? (0, _jsxRuntime.createScopedElement)(_Footnote.Footnote, {
     vkuiClass: "ChipsSelect__empty"
   }, emptyText) : filteredOptions.map(function (option, index) {
     var label = getOptionLabel(option);

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

@@ -1 +1 @@
-{"version":3,"file":"ChipsSelect.js","names":["FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","chipsInputDefaultProps","emptyText","creatableText","onChangeStart","noop","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","defaultFilterFn","renderOption","option","restProps","ChipsSelect","props","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","fixDropdownWidth","forceDropdownPortal","useDOM","document","React","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","useExternRef","useChipsSelect","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","includes","useEffect","findIndex","value","useGlobalEventListener","renderChipWrapper","renderChipProps","onRemoveWrapper","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","observableRefs","useMemo","toggleOpened","prevOpened","classNames","readOnly","map","label","hovered","selected","find","selectedOption","prefixClass","children","onMouseDown","onMouseEnter"],"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ChipOption, ChipValue, RenderChip } from \"../Chip/Chip\";\nimport { ChipsInputProps } from \"../ChipsInput/ChipsInput\";\nimport {\n  ChipsInputBase,\n  chipsInputDefaultProps,\n} from \"../ChipsInputBase/ChipsInputBase\";\nimport {\n  CustomSelectOption,\n  CustomSelectOptionProps,\n} from \"../CustomSelectOption/CustomSelectOption\";\nimport { useChipsSelect } from \"../../hooks/useChipsSelect\";\nimport { noop } from \"../../lib/utils\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Caption } from \"../Typography/Caption/Caption\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { defaultFilterFn } from \"../../lib/select\";\nimport { Placement } from \"../Popper/Popper\";\nimport { CustomSelectDropdown } from \"../CustomSelectDropdown/CustomSelectDropdown\";\nimport { FormField } from \"../FormField/FormField\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport \"./ChipsSelect.css\";\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n  extends Omit<ChipsInputProps<Option>, \"after\"> {\n  popupDirection?: \"top\" | \"bottom\";\n  options?: Option[];\n  filterFn?:\n    | false\n    | ((\n        value?: string,\n        option?: Option,\n        getOptionLabel?: Pick<\n          ChipsInputProps<Option>,\n          \"getOptionLabel\"\n        >[\"getOptionLabel\"]\n      ) => boolean);\n  /**\n   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n   */\n  creatable?: boolean;\n  /**\n   * Отрисовка лоадера вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n  /**\n   * Показывать или скрывать уже выбранные опции\n   */\n  showSelected?: boolean;\n  /**\n   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n   */\n  creatableText?: string;\n  /**\n   * Текст который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?: (\n    e: React.MouseEvent | React.KeyboardEvent,\n    option: Option\n  ) => void;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  fixDropdownWidth?: boolean;\n  forceDropdownPortal?: boolean;\n}\n\ntype FocusActionType = \"next\" | \"prev\";\n\nconst FOCUS_ACTION_NEXT: FocusActionType = \"next\";\nconst FOCUS_ACTION_PREV: FocusActionType = \"prev\";\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n  ...chipsInputDefaultProps,\n  emptyText: \"Ничего не найдено\",\n  creatableText: \"Создать значение\",\n  onChangeStart: noop,\n  creatable: false,\n  fetching: false,\n  showSelected: true,\n  closeAfterSelect: true,\n  options: [],\n  filterFn: defaultFilterFn,\n  renderOption({ option, ...restProps }) {\n    return <CustomSelectOption {...restProps} />;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(\n  props: ChipsSelectProps<Option>\n) => {\n  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n  const {\n    style,\n    onFocus,\n    onKeyDown,\n    className,\n    fetching,\n    renderOption,\n    emptyText,\n    getRef,\n    getRootRef,\n    disabled,\n    placeholder,\n    tabIndex,\n    getOptionValue,\n    getOptionLabel,\n    showSelected,\n    getNewOptionData,\n    renderChip,\n    popupDirection,\n    creatable,\n    filterFn,\n    inputValue,\n    creatableText,\n    closeAfterSelect,\n    onChangeStart,\n    before,\n    options,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    ...restProps\n  } = propsWithDefault;\n\n  const { document } = useDOM();\n\n  const [popperPlacement, setPopperPlacement] = React.useState<\n    Placement | undefined\n  >(undefined);\n\n  const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n  const rootRef = useExternRef(getRef);\n  const {\n    fieldValue,\n    selectedOptions = [],\n    opened,\n    setOpened,\n    addOptionFromInput,\n    filteredOptions,\n    addOption,\n    handleInputChange,\n    clearInput,\n    focusedOption,\n    setFocusedOption,\n    focusedOptionIndex,\n    setFocusedOptionIndex,\n  } = useChipsSelect(propsWithDefault);\n\n  const showCreatable = Boolean(\n    creatable && creatableText && !filteredOptions.length && fieldValue\n  );\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setOpened(true);\n    setFocusedOptionIndex(0);\n    onFocus!(e);\n  };\n\n  const handleClickOutside = (e: MouseEvent) => {\n    if (\n      e.target !== rootRef.current &&\n      !rootRef.current?.contains(e.target as Node)\n    ) {\n      setOpened(false);\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = scrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number) => {\n    const { length } = filteredOptions;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = typeof nextIndex !== \"number\" ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    if (focusedOptionIndex != null) {\n      focusOptionByIndex(index, focusedOptionIndex);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown!(e);\n\n    if (e.key === \"ArrowUp\" && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n      }\n    }\n\n    if (e.key === \"ArrowDown\" && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n      }\n    }\n\n    if (\n      e.key === \"Enter\" &&\n      !e.defaultPrevented &&\n      opened &&\n      focusedOptionIndex != null\n    ) {\n      const option = filteredOptions[focusedOptionIndex];\n\n      if (option) {\n        onChangeStart!(e, option);\n\n        if (!e.defaultPrevented) {\n          addOption(option);\n          setFocusedOptionIndex(null);\n          clearInput();\n          closeAfterSelect && setOpened(false);\n          e.preventDefault();\n        }\n      } else if (!creatable) {\n        e.preventDefault();\n      }\n    }\n\n    if ([\"Escape\", \"Tab\"].includes(e.key) && !e.defaultPrevented && opened) {\n      setOpened(false);\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n      setFocusedOption(filteredOptions[focusedOptionIndex]);\n    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n      setFocusedOption(null);\n    }\n  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n  React.useEffect(() => {\n    const index = focusedOption\n      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n      : -1;\n\n    if (\n      index === -1 &&\n      !!filteredOptions.length &&\n      !showCreatable &&\n      closeAfterSelect\n    ) {\n      setFocusedOption(filteredOptions[0]);\n    }\n  }, [\n    filteredOptions,\n    focusedOption,\n    showCreatable,\n    closeAfterSelect,\n    setFocusedOption,\n  ]);\n\n  useGlobalEventListener(document, \"click\", handleClickOutside);\n\n  const renderChipWrapper = (\n    renderChipProps: RenderChip<Option> | undefined\n  ) => {\n    if (renderChipProps === undefined) {\n      return null;\n    }\n    const onRemoveWrapper = (\n      e: React.MouseEvent | undefined,\n      value: ChipValue | undefined\n    ) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      renderChipProps.onRemove?.(e, value);\n    };\n\n    return renderChip!({\n      ...renderChipProps,\n      onRemove: onRemoveWrapper,\n    });\n  };\n\n  const isPopperDirectionTop = popperPlacement?.includes(\"top\");\n\n  const onPlacementChange = React.useCallback(\n    (placement?: Placement) => {\n      setPopperPlacement(placement);\n    },\n    [setPopperPlacement]\n  );\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const observableRefs = React.useMemo(\n    () => [scrollBoxRef, rootRef],\n    [rootRef, scrollBoxRef]\n  );\n\n  const toggleOpened = () => {\n    setOpened((prevOpened) => !prevOpened);\n  };\n\n  return (\n    <FormField\n      vkuiClass={classNames(\n        \"ChipsSelect\",\n        opened && \"Select--open\",\n        opened && (isPopperDirectionTop ? \"Select--pop-up\" : \"Select--pop-down\")\n      )}\n      getRootRef={rootRef}\n      style={style}\n      className={className}\n      disabled={disabled}\n      role=\"application\"\n      aria-disabled={disabled}\n      aria-readonly={restProps.readOnly}\n      after={\n        <IconButton\n          vkuiClass=\"ChipsSelect__dropdown\"\n          activeMode=\"\"\n          hoverMode=\"\"\n          // TODO: add label customization\n          aria-label={opened ? \"Скрыть\" : \"Развернуть\"}\n          onClick={toggleOpened}\n        >\n          <DropdownIcon vkuiClass=\"ChipsSelect__icon\" opened={opened} />\n        </IconButton>\n      }\n      before={before}\n    >\n      <ChipsInputBase\n        {...restProps}\n        tabIndex={tabIndex}\n        value={selectedOptions}\n        inputValue={fieldValue}\n        getNewOptionData={getNewOptionData}\n        getOptionLabel={getOptionLabel}\n        getOptionValue={getOptionValue}\n        renderChip={renderChipWrapper}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        getRef={getRef}\n        disabled={disabled}\n        onInputChange={handleInputChange}\n      />\n      {opened && (\n        <CustomSelectDropdown\n          targetRef={rootRef}\n          placement={popupDirection}\n          scrollBoxRef={scrollBoxRef}\n          observableRefs={observableRefs}\n          onPlacementChange={onPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          vkuiClass=\"ChipsSelect__options\"\n          sameWidth={fixDropdownWidth}\n          forcePortal={forceDropdownPortal}\n        >\n          {showCreatable && (\n            <CustomSelectOption\n              hovered={focusedOptionIndex === 0}\n              onMouseDown={addOptionFromInput}\n              onMouseEnter={() => setFocusedOptionIndex(0)}\n            >\n              {creatableText}\n            </CustomSelectOption>\n          )}\n          {!filteredOptions?.length && !showCreatable && emptyText ? (\n            <Caption vkuiClass=\"ChipsSelect__empty\">{emptyText}</Caption>\n          ) : (\n            filteredOptions.map((option: Option, index: number) => {\n              const label = getOptionLabel!(option);\n              const hovered =\n                focusedOption &&\n                getOptionValue!(option) === getOptionValue!(focusedOption);\n              const selected = selectedOptions.find(\n                (selectedOption: Option) => {\n                  return (\n                    getOptionValue!(selectedOption) === getOptionValue!(option)\n                  );\n                }\n              );\n              const value = getOptionValue!(option);\n\n              return (\n                <React.Fragment key={`${typeof value}-${value}`}>\n                  {renderOption!({\n                    className: prefixClass(\"ChipsSelect__option\"),\n                    option,\n                    hovered: Boolean(hovered),\n                    children: label,\n                    selected: !!selected,\n                    getRootRef: (e) => {\n                      if (e) {\n                        return (chipsSelectOptions[index] = e);\n                      }\n                      return undefined;\n                    },\n                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n                      onChangeStart?.(e, option);\n\n                      if (!e.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter: () => setFocusedOptionIndex(index),\n                  })}\n                </React.Fragment>\n              );\n            })\n          )}\n        </CustomSelectDropdown>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ChipsSelect.js","names":["FOCUS_ACTION_NEXT","FOCUS_ACTION_PREV","chipsSelectDefaultProps","chipsInputDefaultProps","emptyText","creatableText","onChangeStart","noop","creatable","fetching","showSelected","closeAfterSelect","options","filterFn","defaultFilterFn","renderOption","props","ChipsSelect","propsWithDefault","style","onFocus","onKeyDown","className","getRef","getRootRef","disabled","placeholder","tabIndex","getOptionValue","getOptionLabel","getNewOptionData","renderChip","popupDirection","inputValue","before","fixDropdownWidth","forceDropdownPortal","restProps","useDOM","document","React","useState","undefined","popperPlacement","setPopperPlacement","scrollBoxRef","useRef","rootRef","useExternRef","useChipsSelect","fieldValue","selectedOptions","opened","setOpened","addOptionFromInput","filteredOptions","addOption","handleInputChange","clearInput","focusedOption","setFocusedOption","focusedOptionIndex","setFocusedOptionIndex","showCreatable","Boolean","length","handleFocus","e","handleClickOutside","target","current","contains","chipsSelectOptions","scrollToElement","index","center","dropdown","item","dropdownHeight","offsetHeight","scrollTop","itemTop","offsetTop","itemHeight","focusOptionByIndex","oldIndex","focusOption","nextIndex","type","handleKeyDown","key","defaultPrevented","preventDefault","option","includes","useEffect","findIndex","value","useGlobalEventListener","renderChipWrapper","renderChipProps","onRemoveWrapper","stopPropagation","onRemove","isPopperDirectionTop","onPlacementChange","useCallback","placement","onDropdownMouseLeave","observableRefs","useMemo","toggleOpened","prevOpened","classNames","readOnly","map","label","hovered","selected","find","selectedOption","prefixClass","children","onMouseDown","onMouseEnter"],"sources":["../../../../src/components/ChipsSelect/ChipsSelect.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { DropdownIcon } from \"../DropdownIcon/DropdownIcon\";\nimport { classNames } from \"../../lib/classNames\";\nimport { ChipOption, ChipValue, RenderChip } from \"../Chip/Chip\";\nimport { ChipsInputProps } from \"../ChipsInput/ChipsInput\";\nimport {\n  ChipsInputBase,\n  chipsInputDefaultProps,\n} from \"../ChipsInputBase/ChipsInputBase\";\nimport {\n  CustomSelectOption,\n  CustomSelectOptionProps,\n} from \"../CustomSelectOption/CustomSelectOption\";\nimport { useChipsSelect } from \"../../hooks/useChipsSelect\";\nimport { noop } from \"../../lib/utils\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Footnote } from \"../Typography/Footnote/Footnote\";\nimport { prefixClass } from \"../../lib/prefixClass\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { defaultFilterFn } from \"../../lib/select\";\nimport { Placement } from \"../Popper/Popper\";\nimport { CustomSelectDropdown } from \"../CustomSelectDropdown/CustomSelectDropdown\";\nimport { FormField } from \"../FormField/FormField\";\nimport { IconButton } from \"../IconButton/IconButton\";\nimport \"./ChipsSelect.css\";\n\nexport interface ChipsSelectProps<Option extends ChipOption>\n  extends Omit<ChipsInputProps<Option>, \"after\"> {\n  popupDirection?: \"top\" | \"bottom\";\n  options?: Option[];\n  filterFn?:\n    | false\n    | ((\n        value?: string,\n        option?: Option,\n        getOptionLabel?: Pick<\n          ChipsInputProps<Option>,\n          \"getOptionLabel\"\n        >[\"getOptionLabel\"]\n      ) => boolean);\n  /**\n   * Возможность создавать чипы которых нет в списке (по enter или с помощью пункта в меню, см creatableText)\n   */\n  creatable?: boolean;\n  /**\n   * Отрисовка лоадера вместо списка опций в выпадающем списке\n   */\n  fetching?: boolean;\n  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;\n  /**\n   * Показывать или скрывать уже выбранные опции\n   */\n  showSelected?: boolean;\n  /**\n   * Текст для пункта создающего чипы при клике, так же отвечает за то будет ли показан этот пункт (показывается после того как в списке не отсанется опций)\n   */\n  creatableText?: string;\n  /**\n   * Текст который показывается если список опций пуст\n   */\n  emptyText?: string;\n  /**\n   * Событие срабатывающее перед onChange\n   */\n  onChangeStart?: (\n    e: React.MouseEvent | React.KeyboardEvent,\n    option: Option\n  ) => void;\n  /**\n   * Закрытие выпадающего списка после выбора элемента\n   */\n  closeAfterSelect?: boolean;\n  fixDropdownWidth?: boolean;\n  forceDropdownPortal?: boolean;\n}\n\ntype FocusActionType = \"next\" | \"prev\";\n\nconst FOCUS_ACTION_NEXT: FocusActionType = \"next\";\nconst FOCUS_ACTION_PREV: FocusActionType = \"prev\";\n\nconst chipsSelectDefaultProps: ChipsSelectProps<any> = {\n  ...chipsInputDefaultProps,\n  emptyText: \"Ничего не найдено\",\n  creatableText: \"Создать значение\",\n  onChangeStart: noop,\n  creatable: false,\n  fetching: false,\n  showSelected: true,\n  closeAfterSelect: true,\n  options: [],\n  filterFn: defaultFilterFn,\n  renderOption(props) {\n    return <CustomSelectOption {...props} />;\n  },\n};\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ChipsSelect\n */\nexport const ChipsSelect = <Option extends ChipOption>(\n  props: ChipsSelectProps<Option>\n) => {\n  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };\n  const {\n    style,\n    onFocus,\n    onKeyDown,\n    className,\n    fetching,\n    renderOption,\n    emptyText,\n    getRef,\n    getRootRef,\n    disabled,\n    placeholder,\n    tabIndex,\n    getOptionValue,\n    getOptionLabel,\n    showSelected,\n    getNewOptionData,\n    renderChip,\n    popupDirection,\n    creatable,\n    filterFn,\n    inputValue,\n    creatableText,\n    closeAfterSelect,\n    onChangeStart,\n    before,\n    options,\n    fixDropdownWidth,\n    forceDropdownPortal,\n    ...restProps\n  } = propsWithDefault;\n\n  const { document } = useDOM();\n\n  const [popperPlacement, setPopperPlacement] = React.useState<\n    Placement | undefined\n  >(undefined);\n\n  const scrollBoxRef = React.useRef<HTMLDivElement>(null);\n  const rootRef = useExternRef(getRef);\n  const {\n    fieldValue,\n    selectedOptions = [],\n    opened,\n    setOpened,\n    addOptionFromInput,\n    filteredOptions,\n    addOption,\n    handleInputChange,\n    clearInput,\n    focusedOption,\n    setFocusedOption,\n    focusedOptionIndex,\n    setFocusedOptionIndex,\n  } = useChipsSelect(propsWithDefault);\n\n  const showCreatable = Boolean(\n    creatable && creatableText && !filteredOptions.length && fieldValue\n  );\n\n  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n    setOpened(true);\n    setFocusedOptionIndex(0);\n    onFocus!(e);\n  };\n\n  const handleClickOutside = (e: MouseEvent) => {\n    if (\n      e.target !== rootRef.current &&\n      !rootRef.current?.contains(e.target as Node)\n    ) {\n      setOpened(false);\n    }\n  };\n\n  const chipsSelectOptions = React.useRef<HTMLElement[]>([]).current;\n\n  const scrollToElement = (index: number, center = false) => {\n    const dropdown = scrollBoxRef.current;\n    const item = chipsSelectOptions[index];\n\n    if (!item || !dropdown) {\n      return;\n    }\n\n    const dropdownHeight = dropdown.offsetHeight;\n    const scrollTop = dropdown.scrollTop;\n    const itemTop = item.offsetTop;\n    const itemHeight = item.offsetHeight;\n\n    if (center) {\n      dropdown.scrollTop = itemTop - dropdownHeight / 2 + itemHeight / 2;\n    } else if (itemTop + itemHeight > dropdownHeight + scrollTop) {\n      dropdown.scrollTop = itemTop - dropdownHeight + itemHeight;\n    } else if (itemTop < scrollTop) {\n      dropdown.scrollTop = itemTop;\n    }\n  };\n\n  const focusOptionByIndex = (index: number, oldIndex: number) => {\n    const { length } = filteredOptions;\n\n    if (index < 0) {\n      index = length - 1;\n    } else if (index >= length) {\n      index = 0;\n    }\n\n    if (index === oldIndex) {\n      return;\n    }\n\n    scrollToElement(index);\n    setFocusedOptionIndex(index);\n  };\n\n  const focusOption = (nextIndex: number | null, type: FocusActionType) => {\n    let index = typeof nextIndex !== \"number\" ? -1 : nextIndex;\n\n    if (type === FOCUS_ACTION_NEXT) {\n      index = index + 1;\n    } else if (type === FOCUS_ACTION_PREV) {\n      index = index - 1;\n    }\n\n    if (focusedOptionIndex != null) {\n      focusOptionByIndex(index, focusedOptionIndex);\n    }\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onKeyDown!(e);\n\n    if (e.key === \"ArrowUp\" && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_PREV);\n      }\n    }\n\n    if (e.key === \"ArrowDown\" && !e.defaultPrevented) {\n      e.preventDefault();\n\n      if (!opened) {\n        setOpened(true);\n        setFocusedOptionIndex(0);\n      } else {\n        focusOption(focusedOptionIndex, FOCUS_ACTION_NEXT);\n      }\n    }\n\n    if (\n      e.key === \"Enter\" &&\n      !e.defaultPrevented &&\n      opened &&\n      focusedOptionIndex != null\n    ) {\n      const option = filteredOptions[focusedOptionIndex];\n\n      if (option) {\n        onChangeStart!(e, option);\n\n        if (!e.defaultPrevented) {\n          addOption(option);\n          setFocusedOptionIndex(null);\n          clearInput();\n          closeAfterSelect && setOpened(false);\n          e.preventDefault();\n        }\n      } else if (!creatable) {\n        e.preventDefault();\n      }\n    }\n\n    if ([\"Escape\", \"Tab\"].includes(e.key) && !e.defaultPrevented && opened) {\n      setOpened(false);\n    }\n  };\n\n  React.useEffect(() => {\n    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {\n      setFocusedOption(filteredOptions[focusedOptionIndex]);\n    } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {\n      setFocusedOption(null);\n    }\n  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);\n\n  React.useEffect(() => {\n    const index = focusedOption\n      ? filteredOptions.findIndex(({ value }) => value === focusedOption.value)\n      : -1;\n\n    if (\n      index === -1 &&\n      !!filteredOptions.length &&\n      !showCreatable &&\n      closeAfterSelect\n    ) {\n      setFocusedOption(filteredOptions[0]);\n    }\n  }, [\n    filteredOptions,\n    focusedOption,\n    showCreatable,\n    closeAfterSelect,\n    setFocusedOption,\n  ]);\n\n  useGlobalEventListener(document, \"click\", handleClickOutside);\n\n  const renderChipWrapper = (\n    renderChipProps: RenderChip<Option> | undefined\n  ) => {\n    if (renderChipProps === undefined) {\n      return null;\n    }\n    const onRemoveWrapper = (\n      e: React.MouseEvent | undefined,\n      value: ChipValue | undefined\n    ) => {\n      e?.preventDefault();\n      e?.stopPropagation();\n\n      renderChipProps.onRemove?.(e, value);\n    };\n\n    return renderChip!({\n      ...renderChipProps,\n      onRemove: onRemoveWrapper,\n    });\n  };\n\n  const isPopperDirectionTop = popperPlacement?.includes(\"top\");\n\n  const onPlacementChange = React.useCallback(\n    (placement?: Placement) => {\n      setPopperPlacement(placement);\n    },\n    [setPopperPlacement]\n  );\n\n  const onDropdownMouseLeave = React.useCallback(() => {\n    setFocusedOptionIndex(null);\n  }, [setFocusedOptionIndex]);\n\n  const observableRefs = React.useMemo(\n    () => [scrollBoxRef, rootRef],\n    [rootRef, scrollBoxRef]\n  );\n\n  const toggleOpened = () => {\n    setOpened((prevOpened) => !prevOpened);\n  };\n\n  return (\n    <FormField\n      vkuiClass={classNames(\n        \"ChipsSelect\",\n        opened && \"Select--open\",\n        opened && (isPopperDirectionTop ? \"Select--pop-up\" : \"Select--pop-down\")\n      )}\n      getRootRef={rootRef}\n      style={style}\n      className={className}\n      disabled={disabled}\n      role=\"application\"\n      aria-disabled={disabled}\n      aria-readonly={restProps.readOnly}\n      after={\n        <IconButton\n          vkuiClass=\"ChipsSelect__dropdown\"\n          activeMode=\"\"\n          hoverMode=\"\"\n          // TODO: add label customization\n          aria-label={opened ? \"Скрыть\" : \"Развернуть\"}\n          onClick={toggleOpened}\n        >\n          <DropdownIcon vkuiClass=\"ChipsSelect__icon\" opened={opened} />\n        </IconButton>\n      }\n      before={before}\n    >\n      <ChipsInputBase\n        {...restProps}\n        tabIndex={tabIndex}\n        value={selectedOptions}\n        inputValue={fieldValue}\n        getNewOptionData={getNewOptionData}\n        getOptionLabel={getOptionLabel}\n        getOptionValue={getOptionValue}\n        renderChip={renderChipWrapper}\n        onFocus={handleFocus}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        getRef={getRef}\n        disabled={disabled}\n        onInputChange={handleInputChange}\n      />\n      {opened && (\n        <CustomSelectDropdown\n          targetRef={rootRef}\n          placement={popupDirection}\n          scrollBoxRef={scrollBoxRef}\n          observableRefs={observableRefs}\n          onPlacementChange={onPlacementChange}\n          onMouseLeave={onDropdownMouseLeave}\n          fetching={fetching}\n          vkuiClass=\"ChipsSelect__options\"\n          sameWidth={fixDropdownWidth}\n          forcePortal={forceDropdownPortal}\n        >\n          {showCreatable && (\n            <CustomSelectOption\n              hovered={focusedOptionIndex === 0}\n              onMouseDown={addOptionFromInput}\n              onMouseEnter={() => setFocusedOptionIndex(0)}\n            >\n              {creatableText}\n            </CustomSelectOption>\n          )}\n          {!filteredOptions?.length && !showCreatable && emptyText ? (\n            <Footnote vkuiClass=\"ChipsSelect__empty\">{emptyText}</Footnote>\n          ) : (\n            filteredOptions.map((option: Option, index: number) => {\n              const label = getOptionLabel!(option);\n              const hovered =\n                focusedOption &&\n                getOptionValue!(option) === getOptionValue!(focusedOption);\n              const selected = selectedOptions.find(\n                (selectedOption: Option) => {\n                  return (\n                    getOptionValue!(selectedOption) === getOptionValue!(option)\n                  );\n                }\n              );\n              const value = getOptionValue!(option);\n\n              return (\n                <React.Fragment key={`${typeof value}-${value}`}>\n                  {renderOption!({\n                    className: prefixClass(\"ChipsSelect__option\"),\n                    option,\n                    hovered: Boolean(hovered),\n                    children: label,\n                    selected: !!selected,\n                    getRootRef: (e) => {\n                      if (e) {\n                        return (chipsSelectOptions[index] = e);\n                      }\n                      return undefined;\n                    },\n                    onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {\n                      onChangeStart?.(e, option);\n\n                      if (!e.defaultPrevented) {\n                        closeAfterSelect && setOpened(false);\n                        addOption(option);\n                        clearInput();\n                      }\n                    },\n                    onMouseEnter: () => setFocusedOptionIndex(index),\n                  })}\n                </React.Fragment>\n              );\n            })\n          )}\n        </CustomSelectDropdown>\n      )}\n    </FormField>\n  );\n};\n"],"mappings":"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"}

package/dist/cjs/components/ConfigProvider/ConfigProvider.js

@@ -2,8 +2,6 @@
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,73 +9,27 @@ exports.ConfigProvider = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var React = _interopRequireWildcard(require("react"));
 
-var _dom = require("../../lib/dom");
-
 var _ConfigProviderContext = require("./ConfigProviderContext");
 
-var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
-
 var _useObjectMemo = require("../../hooks/useObjectMemo");
 
-var _utils = require("../../lib/utils");
+var _AppearanceProvider = require("../AppearanceProvider/AppearanceProvider");
 
-var _warnOnce = require("../../lib/warnOnce");
+var _LocaleProviderContext = require("../LocaleProviderContext/LocaleProviderContext");
 
-var _scheme2 = require("../../helpers/scheme");
+var _useAutoDetectAppearance = require("../../hooks/useAutoDetectAppearance");
 
-var _AppearanceProvider = require("../AppearanceProvider/AppearanceProvider");
+var _utils = require("../../lib/utils");
 
-var _LocaleProviderContext = require("../LocaleProviderContext/LocaleProviderContext");
+var _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 
-var warn = (0, _warnOnce.warnOnce)("ConfigProvider");
-
-function useSchemeDetector(node, _scheme) {
-  var inherit = _scheme === "inherit";
-  var getScheme = React.useCallback(function () {
-    if (!inherit || !_dom.canUseDOM || !node) {
-      return undefined;
-    }
-
-    return node.getAttribute("scheme");
-  }, [inherit, node]);
-
-  var _React$useState = React.useState(getScheme()),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      resolvedScheme = _React$useState2[0],
-      setScheme = _React$useState2[1];
-
-  React.useEffect(function () {
-    if (!inherit || !node) {
-      return _utils.noop;
-    }
-
-    setScheme(getScheme());
-    var observer = new MutationObserver(function () {
-      return setScheme(getScheme());
-    });
-    observer.observe(node, {
-      attributes: true,
-      attributeFilter: ["scheme"]
-    });
-    return function () {
-      return observer.disconnect();
-    };
-  }, [getScheme, inherit, node]);
-  return _scheme === "inherit" ? resolvedScheme : _scheme;
-}
+var _dom = require("../../lib/dom");
 
-var deriveAppearance = function deriveAppearance(scheme) {
-  return scheme === _scheme2.Scheme.SPACE_GRAY || scheme === _scheme2.Scheme.VKCOM_DARK ? "dark" : "light";
-};
 /**
  * @see https://vkcom.github.io/VKUI/#/ConfigProvider
  */
-
-
 var ConfigProvider = function ConfigProvider(props) {
   var parentLocale = React.useContext(_LocaleProviderContext.LocaleProviderContext);
   var parentConfig = React.useContext(_ConfigProviderContext.ConfigProviderContext);
@@ -93,54 +45,32 @@ var ConfigProvider = function ConfigProvider(props) {
       _props$hasNewTokens = props.hasNewTokens,
       hasNewTokens = _props$hasNewTokens === void 0 ? parentConfig.hasNewTokens : _props$hasNewTokens,
       _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? parentConfig.appearance : _props$appearance,
-      scheme = props.scheme,
+      appearanceProp = _props$appearance === void 0 ? parentConfig.appearance : _props$appearance,
       _props$locale = props.locale,
-      locale = _props$locale === void 0 ? parentLocale !== null && parentLocale !== void 0 ? parentLocale : "ru" : _props$locale;
-  var normalizedScheme = (0, _scheme2.normalizeScheme)({
-    scheme: scheme,
-    platform: platform,
-    appearance: appearance
-  });
+      locale = _props$locale === void 0 ? parentLocale !== null && parentLocale !== void 0 ? parentLocale : "ru" : _props$locale,
+      _props$onDetectAppear = props.onDetectAppearanceByBridge,
+      onDetectAppearanceByBridge = _props$onDetectAppear === void 0 ? _utils.noop : _props$onDetectAppear;
+  var appearance = (0, _useAutoDetectAppearance.useAutoDetectAppearance)(appearanceProp, onDetectAppearanceByBridge);
 
   var _useDOM = (0, _dom.useDOM)(),
       document = _useDOM.document;
 
-  var target = document === null || document === void 0 ? void 0 : document.body;
   (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    if (normalizedScheme === "inherit") {
-      return _utils.noop;
-    }
-
-    if (process.env.NODE_ENV === "development" && target !== null && target !== void 0 && target.hasAttribute("scheme") && parentConfig.appearance === undefined // appearance не была вычислена в родительском конфиге, @deprecated будет удалено в 5.0.0
-    ) {
-      warn('<body scheme> был установлен перед монтированием VKUI - вы не забыли scheme="inherit"?');
-    }
+    var VKUITokensClassName = (0, _AppearanceProvider.generateVKUITokensClassName)(platform, appearance); // eslint-disable-next-line no-restricted-properties
 
-    target === null || target === void 0 ? void 0 : target.setAttribute("scheme", normalizedScheme);
-    return function () {
-      return target === null || target === void 0 ? void 0 : target.removeAttribute("scheme");
-    };
-  }, [normalizedScheme]);
-  var realScheme = useSchemeDetector(target, normalizedScheme);
-  var derivedAppearance = deriveAppearance(realScheme);
-  (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
-    var VKUITokensClassName = (0, _AppearanceProvider.generateVKUITokensClassName)(platform, derivedAppearance); // eslint-disable-next-line no-restricted-properties
-
-    target === null || target === void 0 ? void 0 : target.classList.add(VKUITokensClassName);
+    document.body.classList.add(VKUITokensClassName);
     return function () {
       // eslint-disable-next-line no-restricted-properties
-      target === null || target === void 0 ? void 0 : target.classList.remove(VKUITokensClassName);
+      document.body.classList.remove(VKUITokensClassName);
     };
-  }, [platform, derivedAppearance]);
+  }, [platform, appearance]);
   var configContext = (0, _useObjectMemo.useObjectMemo)({
     webviewType: webviewType,
     isWebView: isWebView,
     transitionMotionEnabled: transitionMotionEnabled,
     hasNewTokens: hasNewTokens,
     platform: platform,
-    scheme: scheme,
-    appearance: appearance || derivedAppearance
+    appearance: appearance
   });
   return (0, _jsxRuntime.createScopedElement)(_ConfigProviderContext.ConfigProviderContext.Provider, {
     value: configContext

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

@@ -1 +1 @@
-{"version":3,"file":"ConfigProvider.js","names":["warn","warnOnce","useSchemeDetector","node","_scheme","inherit","getScheme","React","useCallback","canUseDOM","undefined","getAttribute","useState","resolvedScheme","setScheme","useEffect","noop","observer","MutationObserver","observe","attributes","attributeFilter","disconnect","deriveAppearance","scheme","Scheme","SPACE_GRAY","VKCOM_DARK","ConfigProvider","props","parentLocale","useContext","LocaleProviderContext","parentConfig","ConfigProviderContext","children","webviewType","isWebView","transitionMotionEnabled","platform","hasNewTokens","appearance","locale","normalizedScheme","normalizeScheme","useDOM","document","target","body","useIsomorphicLayoutEffect","process","env","NODE_ENV","hasAttribute","setAttribute","removeAttribute","realScheme","derivedAppearance","VKUITokensClassName","generateVKUITokensClassName","classList","add","remove","configContext","useObjectMemo"],"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { canUseDOM, useDOM } from \"../../lib/dom\";\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n} from \"./ConfigProviderContext\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useObjectMemo } from \"../../hooks/useObjectMemo\";\nimport { noop } from \"../../lib/utils\";\nimport { warnOnce } from \"../../lib/warnOnce\";\nimport {\n  normalizeScheme,\n  AppearanceScheme,\n  Scheme,\n} from \"../../helpers/scheme\";\nimport {\n  AppearanceProvider,\n  generateVKUITokensClassName,\n} from \"../AppearanceProvider/AppearanceProvider\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\n\nexport interface ConfigProviderProps\n  extends Partial<ConfigProviderContextInterface> {\n  /**\n   * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance\n   * Цветовая схема приложения\n   */\n  scheme?: AppearanceScheme;\n  /**\n    Локаль ([список](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry))\n   */\n  locale?: string;\n  children?: React.ReactNode;\n}\n\nconst warn = warnOnce(\"ConfigProvider\");\n\nfunction useSchemeDetector(\n  node: HTMLElement | undefined | null,\n  _scheme: Scheme | \"inherit\"\n) {\n  const inherit = _scheme === \"inherit\";\n  const getScheme = React.useCallback(() => {\n    if (!inherit || !canUseDOM || !node) {\n      return undefined;\n    }\n    return node.getAttribute(\"scheme\") as Scheme;\n  }, [inherit, node]);\n  const [resolvedScheme, setScheme] = React.useState(getScheme());\n\n  React.useEffect(() => {\n    if (!inherit || !node) {\n      return noop;\n    }\n    setScheme(getScheme());\n    const observer = new MutationObserver(() => setScheme(getScheme()));\n    observer.observe(node, { attributes: true, attributeFilter: [\"scheme\"] });\n    return () => observer.disconnect();\n  }, [getScheme, inherit, node]);\n\n  return _scheme === \"inherit\" ? resolvedScheme : _scheme;\n}\n\nconst deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>\n  scheme === Scheme.SPACE_GRAY || scheme === Scheme.VKCOM_DARK\n    ? \"dark\"\n    : \"light\";\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (props: ConfigProviderProps) => {\n  const parentLocale = React.useContext(LocaleProviderContext);\n  const parentConfig = React.useContext(ConfigProviderContext);\n\n  const {\n    children,\n    webviewType = parentConfig.webviewType,\n    isWebView = parentConfig.isWebView,\n    transitionMotionEnabled = parentConfig.transitionMotionEnabled,\n    platform = parentConfig.platform,\n    hasNewTokens = parentConfig.hasNewTokens,\n    appearance = parentConfig.appearance,\n    scheme,\n    locale = parentLocale ?? \"ru\",\n  } = props;\n\n  const normalizedScheme = normalizeScheme({\n    scheme,\n    platform,\n    appearance,\n  });\n  const { document } = useDOM();\n  const target = document?.body;\n\n  useIsomorphicLayoutEffect(() => {\n    if (normalizedScheme === \"inherit\") {\n      return noop;\n    }\n    if (\n      process.env.NODE_ENV === \"development\" &&\n      target?.hasAttribute(\"scheme\") &&\n      parentConfig.appearance === undefined // appearance не была вычислена в родительском конфиге, @deprecated будет удалено в 5.0.0\n    ) {\n      warn(\n        '<body scheme> был установлен перед монтированием VKUI - вы не забыли scheme=\"inherit\"?'\n      );\n    }\n    target?.setAttribute(\"scheme\", normalizedScheme);\n    return () => target?.removeAttribute(\"scheme\");\n  }, [normalizedScheme]);\n\n  const realScheme = useSchemeDetector(target, normalizedScheme);\n  const derivedAppearance = deriveAppearance(realScheme);\n\n  useIsomorphicLayoutEffect(() => {\n    const VKUITokensClassName = generateVKUITokensClassName(\n      platform,\n      derivedAppearance\n    );\n\n    // eslint-disable-next-line no-restricted-properties\n    target?.classList.add(VKUITokensClassName);\n\n    return () => {\n      // eslint-disable-next-line no-restricted-properties\n      target?.classList.remove(VKUITokensClassName);\n    };\n  }, [platform, derivedAppearance]);\n\n  const configContext = useObjectMemo({\n    webviewType,\n    isWebView,\n    transitionMotionEnabled,\n    hasNewTokens,\n    platform,\n    scheme,\n    appearance: appearance || derivedAppearance,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <LocaleProviderContext.Provider value={locale}>\n        <AppearanceProvider appearance={configContext.appearance}>\n          {children}\n        </AppearanceProvider>\n      </LocaleProviderContext.Provider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"ConfigProvider.js","names":["ConfigProvider","props","parentLocale","React","useContext","LocaleProviderContext","parentConfig","ConfigProviderContext","children","webviewType","isWebView","transitionMotionEnabled","platform","hasNewTokens","appearance","appearanceProp","locale","onDetectAppearanceByBridge","noop","useAutoDetectAppearance","useDOM","document","useIsomorphicLayoutEffect","VKUITokensClassName","generateVKUITokensClassName","body","classList","add","remove","configContext","useObjectMemo"],"sources":["../../../../src/components/ConfigProvider/ConfigProvider.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n} from \"./ConfigProviderContext\";\nimport { useObjectMemo } from \"../../hooks/useObjectMemo\";\nimport {\n  AppearanceProvider,\n  generateVKUITokensClassName,\n} from \"../AppearanceProvider/AppearanceProvider\";\nimport { LocaleProviderContext } from \"../LocaleProviderContext/LocaleProviderContext\";\nimport { useAutoDetectAppearance } from \"../../hooks/useAutoDetectAppearance\";\nimport { noop } from \"../../lib/utils\";\nimport { useIsomorphicLayoutEffect } from \"../../lib/useIsomorphicLayoutEffect\";\nimport { useDOM } from \"../../lib/dom\";\n\nexport interface ConfigProviderProps\n  extends Partial<ConfigProviderContextInterface> {\n  /**\n    Локаль ([список](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry))\n   */\n  locale?: string;\n  onDetectAppearanceByBridge?: () => void;\n  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ConfigProvider\n */\nexport const ConfigProvider = (props: ConfigProviderProps) => {\n  const parentLocale = React.useContext(LocaleProviderContext);\n  const parentConfig = React.useContext(ConfigProviderContext);\n\n  const {\n    children,\n    webviewType = parentConfig.webviewType,\n    isWebView = parentConfig.isWebView,\n    transitionMotionEnabled = parentConfig.transitionMotionEnabled,\n    platform = parentConfig.platform,\n    hasNewTokens = parentConfig.hasNewTokens,\n    appearance: appearanceProp = parentConfig.appearance,\n    locale = parentLocale ?? \"ru\",\n    onDetectAppearanceByBridge = noop,\n  } = props;\n\n  const appearance = useAutoDetectAppearance(\n    appearanceProp,\n    onDetectAppearanceByBridge\n  );\n\n  const { document } = useDOM();\n\n  useIsomorphicLayoutEffect(() => {\n    const VKUITokensClassName = generateVKUITokensClassName(\n      platform,\n      appearance\n    );\n\n    // eslint-disable-next-line no-restricted-properties\n    document!.body.classList.add(VKUITokensClassName);\n\n    return () => {\n      // eslint-disable-next-line no-restricted-properties\n      document!.body.classList.remove(VKUITokensClassName);\n    };\n  }, [platform, appearance]);\n\n  const configContext = useObjectMemo({\n    webviewType,\n    isWebView,\n    transitionMotionEnabled,\n    hasNewTokens,\n    platform,\n    appearance,\n  });\n\n  return (\n    <ConfigProviderContext.Provider value={configContext}>\n      <LocaleProviderContext.Provider value={locale}>\n        <AppearanceProvider appearance={configContext.appearance}>\n          {children}\n        </AppearanceProvider>\n      </LocaleProviderContext.Provider>\n    </ConfigProviderContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAIA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAYA;AACA;AACA;AACO,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,CAACC,KAAD,EAAgC;EAC5D,IAAMC,YAAY,GAAGC,KAAK,CAACC,UAAN,CAAiBC,4CAAjB,CAArB;EACA,IAAMC,YAAY,GAAGH,KAAK,CAACC,UAAN,CAAiBG,4CAAjB,CAArB;EAEA,IACEC,QADF,GAUIP,KAVJ,CACEO,QADF;EAAA,yBAUIP,KAVJ,CAEEQ,WAFF;EAAA,IAEEA,WAFF,mCAEgBH,YAAY,CAACG,WAF7B;EAAA,uBAUIR,KAVJ,CAGES,SAHF;EAAA,IAGEA,SAHF,iCAGcJ,YAAY,CAACI,SAH3B;EAAA,4BAUIT,KAVJ,CAIEU,uBAJF;EAAA,IAIEA,uBAJF,sCAI4BL,YAAY,CAACK,uBAJzC;EAAA,sBAUIV,KAVJ,CAKEW,QALF;EAAA,IAKEA,QALF,gCAKaN,YAAY,CAACM,QAL1B;EAAA,0BAUIX,KAVJ,CAMEY,YANF;EAAA,IAMEA,YANF,oCAMiBP,YAAY,CAACO,YAN9B;EAAA,wBAUIZ,KAVJ,CAOEa,UAPF;EAAA,IAOcC,cAPd,kCAO+BT,YAAY,CAACQ,UAP5C;EAAA,oBAUIb,KAVJ,CAQEe,MARF;EAAA,IAQEA,MARF,8BAQWd,YARX,aAQWA,YARX,cAQWA,YARX,GAQ2B,IAR3B;EAAA,4BAUID,KAVJ,CASEgB,0BATF;EAAA,IASEA,0BATF,sCAS+BC,WAT/B;EAYA,IAAMJ,UAAU,GAAG,IAAAK,gDAAA,EACjBJ,cADiB,EAEjBE,0BAFiB,CAAnB;;EAKA,cAAqB,IAAAG,WAAA,GAArB;EAAA,IAAQC,QAAR,WAAQA,QAAR;;EAEA,IAAAC,oDAAA,EAA0B,YAAM;IAC9B,IAAMC,mBAAmB,GAAG,IAAAC,+CAAA,EAC1BZ,QAD0B,EAE1BE,UAF0B,CAA5B,CAD8B,CAM9B;;IACAO,QAAQ,CAAEI,IAAV,CAAeC,SAAf,CAAyBC,GAAzB,CAA6BJ,mBAA7B;IAEA,OAAO,YAAM;MACX;MACAF,QAAQ,CAAEI,IAAV,CAAeC,SAAf,CAAyBE,MAAzB,CAAgCL,mBAAhC;IACD,CAHD;EAID,CAbD,EAaG,CAACX,QAAD,EAAWE,UAAX,CAbH;EAeA,IAAMe,aAAa,GAAG,IAAAC,4BAAA,EAAc;IAClCrB,WAAW,EAAXA,WADkC;IAElCC,SAAS,EAATA,SAFkC;IAGlCC,uBAAuB,EAAvBA,uBAHkC;IAIlCE,YAAY,EAAZA,YAJkC;IAKlCD,QAAQ,EAARA,QALkC;IAMlCE,UAAU,EAAVA;EANkC,CAAd,CAAtB;EASA,OACE,qCAAC,4CAAD,CAAuB,QAAvB;IAAgC,KAAK,EAAEe;EAAvC,GACE,qCAAC,4CAAD,CAAuB,QAAvB;IAAgC,KAAK,EAAEb;EAAvC,GACE,qCAAC,sCAAD;IAAoB,UAAU,EAAEa,aAAa,CAACf;EAA9C,GACGN,QADH,CADF,CADF,CADF;AASD,CAxDM"}

package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js

@@ -15,6 +15,8 @@ var _vkBridge = _interopRequireDefault(require("@vkontakte/vk-bridge"));
 
 var _platform = require("../../lib/platform");
 
+var _appearance = require("../../helpers/appearance");
+
 var WebviewType;
 exports.WebviewType = WebviewType;
 
@@ -28,9 +30,8 @@ var ConfigProviderContext = /*#__PURE__*/React.createContext({
   isWebView: _vkBridge.default.isWebView(),
   transitionMotionEnabled: true,
   platform: (0, _platform.platform)(),
-  hasNewTokens: false // appearance is auto-detected by default
-  // appearance: Appearance.LIGHT,
-
+  hasNewTokens: false,
+  appearance: _appearance.Appearance.LIGHT
 });
 exports.ConfigProviderContext = ConfigProviderContext;
 

package/dist/cjs/components/ConfigProvider/ConfigProviderContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigProviderContext.js","names":["WebviewType","ConfigProviderContext","React","createContext","webviewType","VKAPPS","isWebView","vkBridge","transitionMotionEnabled","platform","hasNewTokens","useConfigProvider","useContext"],"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport vkBridge, { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { PlatformType, platform } from \"../../lib/platform\";\n\nexport enum WebviewType {\n  VKAPPS = \"vkapps\",\n  INTERNAL = \"internal\",\n}\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере\n   */\n  isWebView: boolean;\n  /**\n   * Тип вебвью.<br>\n   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)\n   */\n  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;\n  /**\n   * Тип приложения\n   */\n  app?: string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance?: AppearanceType;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  hasNewTokens: boolean;\n}\n\nexport const ConfigProviderContext =\n  React.createContext<ConfigProviderContextInterface>({\n    webviewType: WebviewType.VKAPPS,\n    isWebView: vkBridge.isWebView(),\n    transitionMotionEnabled: true,\n    platform: platform(),\n    hasNewTokens: false,\n    // appearance is auto-detected by default\n    // appearance: Appearance.LIGHT,\n  });\n\nexport const useConfigProvider = () => React.useContext(ConfigProviderContext);\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;IAEYA,W;;;WAAAA,W;EAAAA,W;EAAAA,W;GAAAA,W,2BAAAA,W;;AAkCL,IAAMC,qBAAqB,gBAChCC,KAAK,CAACC,aAAN,CAAoD;EAClDC,WAAW,EAAEJ,WAAW,CAACK,MADyB;EAElDC,SAAS,EAAEC,iBAAA,CAASD,SAAT,EAFuC;EAGlDE,uBAAuB,EAAE,IAHyB;EAIlDC,QAAQ,EAAE,IAAAA,kBAAA,GAJwC;EAKlDC,YAAY,EAAE,KALoC,CAMlD;EACA;;AAPkD,CAApD,CADK;;;AAWA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;EAAA,OAAMT,KAAK,CAACU,UAAN,CAAiBX,qBAAjB,CAAN;AAAA,CAA1B"}
+{"version":3,"file":"ConfigProviderContext.js","names":["WebviewType","ConfigProviderContext","React","createContext","webviewType","VKAPPS","isWebView","vkBridge","transitionMotionEnabled","platform","hasNewTokens","appearance","Appearance","LIGHT","useConfigProvider","useContext"],"sources":["../../../../src/components/ConfigProvider/ConfigProviderContext.tsx"],"sourcesContent":["import * as React from \"react\";\nimport vkBridge, { AppearanceType } from \"@vkontakte/vk-bridge\";\nimport { PlatformType, platform } from \"../../lib/platform\";\nimport { Appearance } from \"../../helpers/appearance\";\n\nexport enum WebviewType {\n  VKAPPS = \"vkapps\",\n  INTERNAL = \"internal\",\n}\n\nexport interface ConfigProviderContextInterface {\n  /**\n   * Подсказывает приложению, обёрнутому в `ConfigProvider`, где открыто приложение: внутри webview или в мобильном браузере\n   */\n  isWebView: boolean;\n  /**\n   * Тип вебвью.<br>\n   * В случае `WebviewType.VKAPPS` интерфейс будет адаптирован для отображения в вебвью Mini Apps (системные контролы в правой части шапки)\n   */\n  webviewType: WebviewType.INTERNAL | WebviewType.VKAPPS;\n  /**\n   * Тип приложения\n   */\n  app?: string;\n  /**\n   * Тип цветовой схемы – `light` или `dark`\n   */\n  appearance: AppearanceType;\n  /**\n   * Включена ли анимация переходов между экранами в `Root` и `View`\n   */\n  transitionMotionEnabled: boolean;\n  /**\n   * Платформа\n   */\n  platform: PlatformType;\n  hasNewTokens: boolean;\n}\n\nexport const ConfigProviderContext =\n  React.createContext<ConfigProviderContextInterface>({\n    webviewType: WebviewType.VKAPPS,\n    isWebView: vkBridge.isWebView(),\n    transitionMotionEnabled: true,\n    platform: platform(),\n    hasNewTokens: false,\n    appearance: Appearance.LIGHT,\n  });\n\nexport const useConfigProvider = () => React.useContext(ConfigProviderContext);\n"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;IAEYA,W;;;WAAAA,W;EAAAA,W;EAAAA,W;GAAAA,W,2BAAAA,W;;AAkCL,IAAMC,qBAAqB,gBAChCC,KAAK,CAACC,aAAN,CAAoD;EAClDC,WAAW,EAAEJ,WAAW,CAACK,MADyB;EAElDC,SAAS,EAAEC,iBAAA,CAASD,SAAT,EAFuC;EAGlDE,uBAAuB,EAAE,IAHyB;EAIlDC,QAAQ,EAAE,IAAAA,kBAAA,GAJwC;EAKlDC,YAAY,EAAE,KALoC;EAMlDC,UAAU,EAAEC,sBAAA,CAAWC;AAN2B,CAApD,CADK;;;AAUA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;EAAA,OAAMZ,KAAK,CAACa,UAAN,CAAiBd,qBAAjB,CAAN;AAAA,CAA1B"}