@vkontakte/vkui 4.34.0 → 4.35.0

package/src/components/WriteBar/WriteBar.css

@@ -1,5 +1,9 @@
 .WriteBar {
-  background: var(--background_content);
+  background: var(--background_content, var(--vkui--color_background_modal));
+}
+
+.WriteBar--shadow {
+  box-shadow: var(--vkui--elevation3);
 }
 
 .WriteBar__before,
@@ -29,20 +33,15 @@
   background: transparent;
   border: none;
   resize: none;
-  line-height: 20px;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   -webkit-appearance: none;
   max-height: 120px;
 }
 
 .WriteBar__textarea::placeholder {
-  color: var(--text_placeholder);
-}
-
-/* stylelint-disable-next-line selector-no-vendor-prefix */
-.WriteBar__textarea::-moz-placeholder {
+  color: var(--text_placeholder, var(--vkui--color_text_subhead));
+  /* Для Firefox */
   opacity: 1;
-  color: var(--text_placeholder);
 }
 
 .WriteBar__inlineAfter {
@@ -50,6 +49,19 @@
   align-items: flex-end;
 }
 
+.WriteBar__before {
+  padding-left: 4px;
+}
+
+.WriteBar__after {
+  padding-right: 4px;
+}
+
+.WriteBar__textarea {
+  height: 52px;
+  padding: 16px 12px;
+}
+
 /**
  * iOS
  */
@@ -61,8 +73,12 @@
 
 .WriteBar--ios .WriteBar__formIn {
   box-sizing: border-box;
-  background-color: var(--input_background);
-  border: 1px solid var(--input_border);
+  background-color: var(
+    --input_background,
+    var(--vkui--color_field_background)
+  );
+  border: var(--thin-border) solid
+    var(--input_border, var(--vkui--color_field_border_alpha));
   border-radius: 18px;
   margin: 8px 0;
 }
@@ -83,25 +99,3 @@
   font-size: 17px;
   line-height: 22px;
 }
-
-/**
- * Android + vkcom
- */
-
-.WriteBar--android .WriteBar__before,
-.WriteBar--vkcom .WriteBar__before {
-  padding-left: 4px;
-}
-
-.WriteBar--android .WriteBar__after,
-.WriteBar--vkcom .WriteBar__after {
-  padding-right: 4px;
-}
-
-.WriteBar--android .WriteBar__textarea,
-.WriteBar--vkcom .WriteBar__textarea {
-  height: 52px;
-  padding: 16px 12px;
-  font-size: 16px;
-  line-height: 20px;
-}

package/src/components/WriteBar/WriteBar.tsx

@@ -1,8 +1,10 @@
 import * as React from "react";
+import { Headline } from "../Typography/Headline/Headline";
 import { usePlatform } from "../../hooks/usePlatform";
 import { useExternRef } from "../../hooks/useExternRef";
 import { hasReactNode, isFunction } from "../../lib/utils";
-import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { IOS } from "../../lib/platform";
 import { HasRef, HasRootRef } from "../../types";
 import "./WriteBar.css";
 
@@ -26,6 +28,10 @@ export interface WriteBarProps
    * Вызывается при смене высоты поля ввода
    */
   onHeightChange?: VoidFunction;
+  /**
+   * Добавляет тень вокруг поля ввода
+   */
+  shadow?: boolean;
 
   children?: never;
 }
@@ -44,6 +50,7 @@ export const WriteBar = ({
   getRootRef,
   getRef,
   onHeightChange,
+  shadow = false,
   ...restProps
 }: WriteBarProps) => {
   const platform = usePlatform();
@@ -92,7 +99,11 @@ export const WriteBar = ({
   return (
     <div
       ref={getRootRef}
-      vkuiClass={getClassName("WriteBar", platform)}
+      vkuiClass={classNames(
+        "WriteBar",
+        platform === IOS && "WriteBar--ios",
+        shadow && "WriteBar--shadow"
+      )}
       className={className}
       style={style}
     >
@@ -102,14 +113,14 @@ export const WriteBar = ({
         )}
 
         <div vkuiClass="WriteBar__formIn">
-          <textarea
+          <Headline
             {...restProps}
+            Component="textarea"
             vkuiClass="WriteBar__textarea"
             onChange={onTextareaChange}
-            ref={textareaRef}
+            getRootRef={textareaRef}
             value={value}
           />
-
           {hasReactNode(inlineAfter) && (
             <div vkuiClass="WriteBar__inlineAfter">{inlineAfter}</div>
           )}

package/src/components/WriteBarIcon/WriteBarIcon.css

@@ -2,11 +2,11 @@
   background: none;
   border: 0;
   position: relative;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
   height: 52px;
   width: 44px;
   cursor: pointer;
-  border-radius: 8px;
+  border-radius: var(--vkui--size_border_radius--regular);
 }
 
 .WriteBarIcon__in {
@@ -30,30 +30,25 @@
   position: absolute;
   top: 6px;
   right: 2px;
-  box-shadow: 0 0 0 2px var(--background_content);
+  box-shadow: 0 0 0 2px
+    var(--background_content, var(--vkui--color_background_modal));
 }
 
 .WriteBarIcon.WriteBarIcon--send,
 .WriteBarIcon.WriteBarIcon--done {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 /**
  * iOS
  */
 .WriteBarIcon--ios {
-  color: var(--writebar_icon);
-  border-radius: 10px;
+  color: var(--writebar_icon, var(--vkui--color_icon_accent));
 }
 
 .WriteBarIcon--ios.WriteBarIcon--send,
 .WriteBarIcon--ios.WriteBarIcon--done {
   width: 48px;
-  color: var(--writebar_icon);
-}
-
-.WriteBarIcon--ios.WriteBarIcon--send:not(:disabled) {
-  color: var(--accent);
 }
 
 .WriteBarIcon--ios.WriteBarIcon--send:first-child,
@@ -65,11 +60,3 @@
 .WriteBarIcon--ios.WriteBarIcon--done:last-child {
   margin-right: -4px;
 }
-
-/**
- * VKCOM
- */
-.WriteBarIcon--vkcom {
-  color: var(--icon_secondary);
-  border-radius: 10px;
-}

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -9,8 +9,7 @@ import {
 } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { IOS } from "../../lib/platform";
+import { IOS, Platform } from "../../lib/platform";
 import { Counter } from "../Counter/Counter";
 import { Tappable } from "../Tappable/Tappable";
 import { warnOnce } from "../../lib/warnOnce";
@@ -91,10 +90,11 @@ export const WriteBarIcon = ({
       Component="button"
       hasHover={false}
       activeMode="WriteBarIcon__active"
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
-      vkuiClass={classNames(getClassName("WriteBarIcon", platform), {
-        [`WriteBarIcon--${mode}`]: !!mode,
-      })}
+      vkuiClass={classNames(
+        "WriteBarIcon",
+        platform === Platform.IOS && "WriteBarIcon--ios",
+        !!mode && `WriteBarIcon--${mode}`
+      )}
     >
       <span vkuiClass="WriteBarIcon__in">
         {icon || children}

package/src/hoc/withAdaptivity.tsx

@@ -24,10 +24,10 @@ interface Config {
 export function withAdaptivity<T extends AdaptivityProps>(
   TargetComponent: React.ComponentType<T>,
   config: Config
-): React.ComponentType<Omit<T, keyof AdaptivityContextInterface> & SizeProps> {
-  const AdaptivityConsumer: React.ComponentType<
-    Omit<T, keyof AdaptivityContextInterface> & SizeProps
-  > = (props: Omit<T, keyof AdaptivityContextInterface> & SizeProps) => {
+): React.FC<Omit<T, keyof AdaptivityContextInterface> & SizeProps> {
+  const AdaptivityConsumer = (
+    props: Omit<T, keyof AdaptivityContextInterface> & SizeProps
+  ) => {
     const context = React.useContext(AdaptivityContext);
     let update = false;
 

package/src/hoc/withContext.tsx

@@ -4,7 +4,7 @@ export function withContext<T, X>(
   Component: React.ComponentType<T>,
   Ctx: React.Context<X>,
   prop: string
-): React.ComponentType<T> {
+): React.FC<T> {
   function WithContext(props: T) {
     const context = React.useContext<X>(Ctx);
 

package/src/hoc/withPlatform.tsx

@@ -5,7 +5,7 @@ import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProvid
 
 export function withPlatform<T extends HasPlatform>(
   Component: React.ComponentType<T>
-): React.ComponentType<Omit<T, keyof HasPlatform>> {
+): React.FC<Omit<T, keyof HasPlatform>> {
   function WithPlatform(props: Omit<T, keyof HasPlatform>) {
     const ssrContext = React.useContext(SSRContext);
     const { platform } = React.useContext(ConfigProviderContext);

package/src/hooks/useOrientationChange.ts

@@ -14,6 +14,7 @@ function getOrientation(window: Window | undefined): Orientation {
   }
 
   const angle = Math.abs(
+    // eslint-disable-next-line compat/compat
     window.screen?.orientation?.angle ?? Number(window.orientation)
   );
 

package/src/styles/components.css

@@ -24,6 +24,7 @@
 @import "../components/Button/Button.css";
 @import "../components/Removable/Removable.css";
 @import "../components/FocusVisible/FocusVisible.css";
+@import "../components/PopperArrow/PopperArrow.css";
 
 /* Layout */
 @import "../components/Root/Root.css";

package/src/styles/constants.css

@@ -29,6 +29,14 @@
   --search_default_height: 36px;
   --thin-border: 1px;
 
+  /**
+   * "Safe Zone" добавляет невидимую интерактивную область, по которой пользователь будет вводить мышкой и тем самым
+   * компонент будет оставаться активным.
+   *
+   * > ⚠️ Используется для динамического изменения в JS файлах.
+   */
+  --popover-safe-zone-padding: 8px;
+
   /* paddings */
   /* TODO: v5 удалить */
   --formitem_padding: 16px;

package/src/tokenized/index.ts

@@ -25,6 +25,9 @@ export type { CardScrollProps } from "../components/CardScroll/CardScroll";
 export { Group } from "../components/Group/Group";
 export type { GroupProps } from "../components/Group/Group";
 
+export { WriteBar } from "../components/WriteBar/WriteBar";
+export type { WriteBarProps } from "../components/WriteBar/WriteBar";
+
 export { Cell } from "../components/Cell/Cell";
 export type { CellProps } from "../components/Cell/Cell";
 
@@ -40,6 +43,9 @@ export type { IconButtonProps } from "../components/IconButton/IconButton";
 export { InitialsAvatar } from "../components/InitialsAvatar/InitialsAvatar";
 export type { InitialsAvatarProps } from "../components/InitialsAvatar/InitialsAvatar";
 
+export { Epic } from "../components/Epic/Epic";
+export type { EpicProps } from "../components/Epic/Epic";
+
 export { InfoRow } from "../components/InfoRow/InfoRow";
 export type { InfoRowProps } from "../components/InfoRow/InfoRow";
 
@@ -52,12 +58,21 @@ export type { ModalCardProps } from "../components/ModalCard/ModalCard";
 export { Link } from "../components/Link/Link";
 export type { LinkProps } from "../components/Link/Link";
 
+export { SimpleCell } from "../components/SimpleCell/SimpleCell";
+export type { SimpleCellProps } from "../components/SimpleCell/SimpleCell";
+
 export { ButtonGroup } from "../components/ButtonGroup/ButtonGroup";
 export type { ButtonGroupProps } from "../components/ButtonGroup/ButtonGroup";
 
 export { Switch } from "../components/Switch/Switch";
 export type { SwitchProps } from "../components/Switch/Switch";
 
+export { Tabs } from "../components/Tabs/Tabs";
+export type { TabsProps } from "../components/Tabs/Tabs";
+
+export { TabsItem } from "../components/TabsItem/TabsItem";
+export type { TabsItemProps } from "../components/TabsItem/TabsItem";
+
 export { Footnote } from "../components/Typography/Footnote/Footnote";
 export type { FootnoteProps } from "../components/Typography/Footnote/Footnote";
 
@@ -83,6 +98,15 @@ export type { TappableProps } from "../components/Tappable/Tappable";
 export { Textarea } from "../components/Textarea/Textarea";
 export type { TextareaProps } from "../components/Textarea/Textarea";
 
+export { Tooltip } from "../components/Tooltip/Tooltip";
+export type { TooltipProps } from "../components/Tooltip/Tooltip";
+
+export { TextTooltip } from "../components/TextTooltip/TextTooltip";
+export type { TextTooltipProps } from "../components/TextTooltip/TextTooltip";
+
+export { RichTooltip } from "../components/RichTooltip/RichTooltip";
+export type { RichTooltipProps } from "../components/RichTooltip/RichTooltip";
+
 export { Title } from "../components/Typography/Title/Title";
 export type { TitleProps } from "../components/Typography/Title/Title";
 
@@ -155,6 +179,9 @@ export type { SelectProps } from "../components/Select/Select";
 export { View } from "../components/View/View";
 export type { ViewProps } from "../components/View/View";
 
+export { HorizontalCell } from "../components/HorizontalCell/HorizontalCell";
+export type { HorizontalCellProps } from "../components/HorizontalCell/HorizontalCell";
+
 export { Spinner } from "../components/Spinner/Spinner";
 export type { SpinnerProps } from "../components/Spinner/Spinner";
 
@@ -188,6 +215,9 @@ export type { ChipsSelectProps } from "../components/ChipsSelect/ChipsSelect";
 export { Spacing } from "../components/Spacing/Spacing";
 export type { SpacingProps } from "../components/Spacing/Spacing";
 
+export { SplitLayout } from "../components/SplitLayout/SplitLayout";
+export type { SplitLayoutProps } from "../components/SplitLayout/SplitLayout";
+
 export { SplitCol } from "../components/SplitCol/SplitCol";
 export type { SplitColProps } from "../components/SplitCol/SplitCol";
 
@@ -206,6 +236,9 @@ export type { BannerProps } from "../components/Banner/Banner";
 export { FixedLayout } from "../components/FixedLayout/FixedLayout";
 export type { FixedLayoutProps } from "../components/FixedLayout/FixedLayout";
 
+export { Snackbar } from "../components/Snackbar/Snackbar";
+export type { SnackbarProps } from "../components/Snackbar/Snackbar";
+
 export { Counter } from "../components/Counter/Counter";
 export type { CounterProps } from "../components/Counter/Counter";
 
@@ -230,5 +263,11 @@ export type { DateRangeInputProps } from "../components/DateRangeInput/DateRange
 export { Footer } from "../components/Footer/Footer";
 export type { FooterProps } from "../components/Footer/Footer";
 
+export { WriteBarIcon } from "../components/WriteBarIcon/WriteBarIcon";
+export type { WriteBarIconProps } from "../components/WriteBarIcon/WriteBarIcon";
+
 export { Tabbar } from "../components/Tabbar/Tabbar";
 export type { TabbarProps } from "../components/Tabbar/Tabbar";
+
+export { TabbarItem } from "../components/TabbarItem/TabbarItem";
+export type { TabbarItemProps } from "../components/TabbarItem/TabbarItem";

package/tsconfig.json

@@ -3,7 +3,7 @@
     "jsx": "react",
     "jsxFactory": "createScopedElement",
     "target": "esnext",
-    "lib": ["es6", "dom"],
+    "lib": ["es6", "dom", "dom.Iterable"],
     "outDir": "dist",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,

package/.cache/ts/src/components/ClickPopper/ClickPopper.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-import { PopperCommonProps } from "../Popper/Popper";
-export interface ClickPopperProps extends PopperCommonProps {
-    /**
-     * Содержимое `ClickPopper`
-     */
-    content?: React.ReactNode;
-    /**
-     * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
-     */
-    shown?: boolean;
-    /**
-     * Вызывается при каждом изменении видимости тултипа
-     */
-    onShownChange?: (shown: boolean) => void;
-    /**
-     * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
-     */
-    children?: React.ReactElement;
-}
-export declare const ClickPopper: ({ getRef, content, children, onShownChange, shown: _shown, ...restProps }: ClickPopperProps) => JSX.Element;

package/dist/cjs/components/ClickPopper/ClickPopper.js

@@ -1,96 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ClickPopper = void 0;
-
-var _jsxRuntime = require("../../lib/jsxRuntime");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _dom = require("../../lib/dom");
-
-var _Popper = require("../Popper/Popper");
-
-var _useExternRef = require("../../hooks/useExternRef");
-
-var _useEventListener = require("../../hooks/useEventListener");
-
-var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
-
-var _usePatchChildrenRef3 = require("../../hooks/usePatchChildrenRef");
-
-var _excluded = ["getRef", "content", "children", "onShownChange", "shown"];
-
-var ClickPopper = function ClickPopper(_ref) {
-  var getRef = _ref.getRef,
-      content = _ref.content,
-      children = _ref.children,
-      onShownChange = _ref.onShownChange,
-      _shown = _ref.shown,
-      restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
-  var _React$useState = React.useState(_shown || false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      computedShown = _React$useState2[0],
-      setComputedShown = _React$useState2[1];
-
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      dropdownNode = _React$useState4[0],
-      setPopperNode = _React$useState4[1];
-
-  var shown = typeof _shown === "boolean" ? _shown : computedShown;
-
-  var _useDOM = (0, _dom.useDOM)(),
-      document = _useDOM.document;
-
-  var patchedPopperRef = (0, _useExternRef.useExternRef)(setPopperNode, getRef);
-
-  var _usePatchChildrenRef = (0, _usePatchChildrenRef3.usePatchChildrenRef)(children),
-      _usePatchChildrenRef2 = (0, _slicedToArray2.default)(_usePatchChildrenRef, 2),
-      childRef = _usePatchChildrenRef2[0],
-      child = _usePatchChildrenRef2[1];
-
-  var setShown = function setShown(value) {
-    if (typeof _shown !== "boolean") {
-      setComputedShown(value);
-    }
-
-    typeof onShownChange === "function" && onShownChange(value);
-  };
-
-  (0, _useGlobalEventListener.useGlobalEventListener)(document, "click", function (e) {
-    var _childRef$current;
-
-    if (dropdownNode && !((_childRef$current = childRef.current) !== null && _childRef$current !== void 0 && _childRef$current.contains(e.target)) && !dropdownNode.contains(e.target)) {
-      setShown(false);
-    }
-  });
-  var targetClickEvent = (0, _useEventListener.useEventListener)("click", function () {
-    setShown(!shown);
-  });
-  React.useEffect(function () {
-    if (childRef.current !== null) {
-      targetClickEvent.add(childRef.current);
-    }
-  }, [childRef, targetClickEvent]);
-  return (0, _jsxRuntime.createScopedElement)(React.Fragment, null, child, shown && (0, _jsxRuntime.createScopedElement)(_Popper.Popper, (0, _extends2.default)({}, restProps, {
-    targetRef: childRef,
-    getRef: patchedPopperRef
-  }), content));
-};
-
-exports.ClickPopper = ClickPopper;
-//# sourceMappingURL=ClickPopper.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/ClickPopper/ClickPopper.tsx"],"names":["ClickPopper","getRef","content","children","onShownChange","_shown","shown","restProps","React","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","document","patchedPopperRef","childRef","child","setShown","value","e","current","contains","target","targetClickEvent","useEffect","add"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAqBO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAOH;AAAA,MANtBC,MAMsB,QANtBA,MAMsB;AAAA,MALtBC,OAKsB,QALtBA,OAKsB;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,aAGsB,QAHtBA,aAGsB;AAAA,MAFfC,MAEe,QAFtBC,KAEsB;AAAA,MADnBC,SACmB;;AACtB,wBAA0CC,KAAK,CAACC,QAAN,CAAeJ,MAAM,IAAI,KAAzB,CAA1C;AAAA;AAAA,MAAOK,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,yBAAsCH,KAAK,CAACC,QAAN,CACpC,IADoC,CAAtC;AAAA;AAAA,MAAOG,YAAP;AAAA,MAAqBC,aAArB;;AAIA,MAAMP,KAAK,GAAG,OAAOD,MAAP,KAAkB,SAAlB,GAA8BA,MAA9B,GAAuCK,aAArD;;AAEA,gBAAqB,kBAArB;AAAA,MAAQI,QAAR,WAAQA,QAAR;;AAEA,MAAMC,gBAAgB,GAAG,gCAA6BF,aAA7B,EAA4CZ,MAA5C,CAAzB;;AAEA,6BAA0B,+CAAoBE,QAApB,CAA1B;AAAA;AAAA,MAAOa,QAAP;AAAA,MAAiBC,KAAjB;;AAEA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAoB;AACnC,QAAI,OAAOd,MAAP,KAAkB,SAAtB,EAAiC;AAC/BM,MAAAA,gBAAgB,CAACQ,KAAD,CAAhB;AACD;;AACD,WAAOf,aAAP,KAAyB,UAAzB,IAAuCA,aAAa,CAACe,KAAD,CAApD;AACD,GALD;;AAOA,sDAAuBL,QAAvB,EAAiC,OAAjC,EAA0C,UAACM,CAAD,EAAmB;AAAA;;AAC3D,QACER,YAAY,IACZ,uBAACI,QAAQ,CAACK,OAAV,8CAAC,kBAAkBC,QAAlB,CAA2BF,CAAC,CAACG,MAA7B,CAAD,CADA,IAEA,CAACX,YAAY,CAACU,QAAb,CAAsBF,CAAC,CAACG,MAAxB,CAHH,EAIE;AACAL,MAAAA,QAAQ,CAAC,KAAD,CAAR;AACD;AACF,GARD;AAUA,MAAMM,gBAAgB,GAAG,wCAAiB,OAAjB,EAA0B,YAAM;AACvDN,IAAAA,QAAQ,CAAC,CAACZ,KAAF,CAAR;AACD,GAFwB,CAAzB;AAIAE,EAAAA,KAAK,CAACiB,SAAN,CAAgB,YAAM;AACpB,QAAIT,QAAQ,CAACK,OAAT,KAAqB,IAAzB,EAA+B;AAC7BG,MAAAA,gBAAgB,CAACE,GAAjB,CAAqBV,QAAQ,CAACK,OAA9B;AACD;AACF,GAJD,EAIG,CAACL,QAAD,EAAWQ,gBAAX,CAJH;AAMA,SACE,qCAAC,KAAD,CAAO,QAAP,QACGP,KADH,EAEGX,KAAK,IACJ,qCAAC,cAAD,6BAAYC,SAAZ;AAAuB,IAAA,SAAS,EAAES,QAAlC;AAA4C,IAAA,MAAM,EAAED;AAApD,MACGb,OADH,CAHJ,CADF;AAUD,CA1DM","sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Popper, PopperCommonProps } from \"../Popper/Popper\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { usePatchChildrenRef } from \"../../hooks/usePatchChildrenRef\";\n\nexport interface ClickPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое `ClickPopper`\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const ClickPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  ...restProps\n}: ClickPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(\n    null\n  );\n\n  const shown = typeof _shown === \"boolean\" ? _shown : computedShown;\n\n  const { document } = useDOM();\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== \"boolean\") {\n      setComputedShown(value);\n    }\n    typeof onShownChange === \"function\" && onShownChange(value);\n  };\n\n  useGlobalEventListener(document, \"click\", (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  });\n\n  const targetClickEvent = useEventListener(\"click\", () => {\n    setShown(!shown);\n  });\n\n  React.useEffect(() => {\n    if (childRef.current !== null) {\n      targetClickEvent.add(childRef.current);\n    }\n  }, [childRef, targetClickEvent]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper {...restProps} targetRef={childRef} getRef={patchedPopperRef}>\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"file":"ClickPopper.js"}

package/dist/components/ClickPopper/ClickPopper.d.ts

@@ -1,21 +0,0 @@
-import * as React from "react";
-import { PopperCommonProps } from "../Popper/Popper";
-export interface ClickPopperProps extends PopperCommonProps {
-    /**
-     * Содержимое `ClickPopper`
-     */
-    content?: React.ReactNode;
-    /**
-     * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
-     */
-    shown?: boolean;
-    /**
-     * Вызывается при каждом изменении видимости тултипа
-     */
-    onShownChange?: (shown: boolean) => void;
-    /**
-     * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
-     */
-    children?: React.ReactElement;
-}
-export declare const ClickPopper: ({ getRef, content, children, onShownChange, shown: _shown, ...restProps }: ClickPopperProps) => JSX.Element;

package/dist/components/ClickPopper/ClickPopper.js

@@ -1,71 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["getRef", "content", "children", "onShownChange", "shown"];
-import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from "react";
-import { useDOM } from "../../lib/dom";
-import { Popper } from "../Popper/Popper";
-import { useExternRef } from "../../hooks/useExternRef";
-import { useEventListener } from "../../hooks/useEventListener";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { usePatchChildrenRef } from "../../hooks/usePatchChildrenRef";
-export var ClickPopper = function ClickPopper(_ref) {
-  var getRef = _ref.getRef,
-      content = _ref.content,
-      children = _ref.children,
-      onShownChange = _ref.onShownChange,
-      _shown = _ref.shown,
-      restProps = _objectWithoutProperties(_ref, _excluded);
-
-  var _React$useState = React.useState(_shown || false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      computedShown = _React$useState2[0],
-      setComputedShown = _React$useState2[1];
-
-  var _React$useState3 = React.useState(null),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      dropdownNode = _React$useState4[0],
-      setPopperNode = _React$useState4[1];
-
-  var shown = typeof _shown === "boolean" ? _shown : computedShown;
-
-  var _useDOM = useDOM(),
-      document = _useDOM.document;
-
-  var patchedPopperRef = useExternRef(setPopperNode, getRef);
-
-  var _usePatchChildrenRef = usePatchChildrenRef(children),
-      _usePatchChildrenRef2 = _slicedToArray(_usePatchChildrenRef, 2),
-      childRef = _usePatchChildrenRef2[0],
-      child = _usePatchChildrenRef2[1];
-
-  var setShown = function setShown(value) {
-    if (typeof _shown !== "boolean") {
-      setComputedShown(value);
-    }
-
-    typeof onShownChange === "function" && onShownChange(value);
-  };
-
-  useGlobalEventListener(document, "click", function (e) {
-    var _childRef$current;
-
-    if (dropdownNode && !((_childRef$current = childRef.current) !== null && _childRef$current !== void 0 && _childRef$current.contains(e.target)) && !dropdownNode.contains(e.target)) {
-      setShown(false);
-    }
-  });
-  var targetClickEvent = useEventListener("click", function () {
-    setShown(!shown);
-  });
-  React.useEffect(function () {
-    if (childRef.current !== null) {
-      targetClickEvent.add(childRef.current);
-    }
-  }, [childRef, targetClickEvent]);
-  return createScopedElement(React.Fragment, null, child, shown && createScopedElement(Popper, _extends({}, restProps, {
-    targetRef: childRef,
-    getRef: patchedPopperRef
-  }), content));
-};
-//# sourceMappingURL=ClickPopper.js.map

package/dist/components/ClickPopper/ClickPopper.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/ClickPopper/ClickPopper.tsx"],"names":["React","useDOM","Popper","useExternRef","useEventListener","useGlobalEventListener","usePatchChildrenRef","ClickPopper","getRef","content","children","onShownChange","_shown","shown","restProps","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","document","patchedPopperRef","childRef","child","setShown","value","e","current","contains","target","targetClickEvent","useEffect","add"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT;AACA,SAASC,MAAT;AACA,SAASC,YAAT;AACA,SAASC,gBAAT;AACA,SAASC,sBAAT;AACA,SAASC,mBAAT;AAqBA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAOH;AAAA,MANtBC,MAMsB,QANtBA,MAMsB;AAAA,MALtBC,OAKsB,QALtBA,OAKsB;AAAA,MAJtBC,QAIsB,QAJtBA,QAIsB;AAAA,MAHtBC,aAGsB,QAHtBA,aAGsB;AAAA,MAFfC,MAEe,QAFtBC,KAEsB;AAAA,MADnBC,SACmB;;AACtB,wBAA0Cd,KAAK,CAACe,QAAN,CAAeH,MAAM,IAAI,KAAzB,CAA1C;AAAA;AAAA,MAAOI,aAAP;AAAA,MAAsBC,gBAAtB;;AACA,yBAAsCjB,KAAK,CAACe,QAAN,CACpC,IADoC,CAAtC;AAAA;AAAA,MAAOG,YAAP;AAAA,MAAqBC,aAArB;;AAIA,MAAMN,KAAK,GAAG,OAAOD,MAAP,KAAkB,SAAlB,GAA8BA,MAA9B,GAAuCI,aAArD;;AAEA,gBAAqBf,MAAM,EAA3B;AAAA,MAAQmB,QAAR,WAAQA,QAAR;;AAEA,MAAMC,gBAAgB,GAAGlB,YAAY,CAAiBgB,aAAjB,EAAgCX,MAAhC,CAArC;;AAEA,6BAA0BF,mBAAmB,CAACI,QAAD,CAA7C;AAAA;AAAA,MAAOY,QAAP;AAAA,MAAiBC,KAAjB;;AAEA,MAAMC,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD,EAAoB;AACnC,QAAI,OAAOb,MAAP,KAAkB,SAAtB,EAAiC;AAC/BK,MAAAA,gBAAgB,CAACQ,KAAD,CAAhB;AACD;;AACD,WAAOd,aAAP,KAAyB,UAAzB,IAAuCA,aAAa,CAACc,KAAD,CAApD;AACD,GALD;;AAOApB,EAAAA,sBAAsB,CAACe,QAAD,EAAW,OAAX,EAAoB,UAACM,CAAD,EAAmB;AAAA;;AAC3D,QACER,YAAY,IACZ,uBAACI,QAAQ,CAACK,OAAV,8CAAC,kBAAkBC,QAAlB,CAA2BF,CAAC,CAACG,MAA7B,CAAD,CADA,IAEA,CAACX,YAAY,CAACU,QAAb,CAAsBF,CAAC,CAACG,MAAxB,CAHH,EAIE;AACAL,MAAAA,QAAQ,CAAC,KAAD,CAAR;AACD;AACF,GARqB,CAAtB;AAUA,MAAMM,gBAAgB,GAAG1B,gBAAgB,CAAC,OAAD,EAAU,YAAM;AACvDoB,IAAAA,QAAQ,CAAC,CAACX,KAAF,CAAR;AACD,GAFwC,CAAzC;AAIAb,EAAAA,KAAK,CAAC+B,SAAN,CAAgB,YAAM;AACpB,QAAIT,QAAQ,CAACK,OAAT,KAAqB,IAAzB,EAA+B;AAC7BG,MAAAA,gBAAgB,CAACE,GAAjB,CAAqBV,QAAQ,CAACK,OAA9B;AACD;AACF,GAJD,EAIG,CAACL,QAAD,EAAWQ,gBAAX,CAJH;AAMA,SACE,oBAAC,KAAD,CAAO,QAAP,QACGP,KADH,EAEGV,KAAK,IACJ,oBAAC,MAAD,eAAYC,SAAZ;AAAuB,IAAA,SAAS,EAAEQ,QAAlC;AAA4C,IAAA,MAAM,EAAED;AAApD,MACGZ,OADH,CAHJ,CADF;AAUD,CA1DM","sourcesContent":["import * as React from \"react\";\nimport { useDOM } from \"../../lib/dom\";\nimport { Popper, PopperCommonProps } from \"../Popper/Popper\";\nimport { useExternRef } from \"../../hooks/useExternRef\";\nimport { useEventListener } from \"../../hooks/useEventListener\";\nimport { useGlobalEventListener } from \"../../hooks/useGlobalEventListener\";\nimport { usePatchChildrenRef } from \"../../hooks/usePatchChildrenRef\";\n\nexport interface ClickPopperProps extends PopperCommonProps {\n  /**\n   * Содержимое `ClickPopper`\n   */\n  content?: React.ReactNode;\n  /**\n   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства\n   */\n  shown?: boolean;\n  /**\n   * Вызывается при каждом изменении видимости тултипа\n   */\n  onShownChange?: (shown: boolean) => void;\n  /**\n   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента\n   */\n  children?: React.ReactElement;\n}\n\nexport const ClickPopper = ({\n  getRef,\n  content,\n  children,\n  onShownChange,\n  shown: _shown,\n  ...restProps\n}: ClickPopperProps) => {\n  const [computedShown, setComputedShown] = React.useState(_shown || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(\n    null\n  );\n\n  const shown = typeof _shown === \"boolean\" ? _shown : computedShown;\n\n  const { document } = useDOM();\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof _shown !== \"boolean\") {\n      setComputedShown(value);\n    }\n    typeof onShownChange === \"function\" && onShownChange(value);\n  };\n\n  useGlobalEventListener(document, \"click\", (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  });\n\n  const targetClickEvent = useEventListener(\"click\", () => {\n    setShown(!shown);\n  });\n\n  React.useEffect(() => {\n    if (childRef.current !== null) {\n      targetClickEvent.add(childRef.current);\n    }\n  }, [childRef, targetClickEvent]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper {...restProps} targetRef={childRef} getRef={patchedPopperRef}>\n          {content}\n        </Popper>\n      )}\n    </React.Fragment>\n  );\n};\n"],"file":"ClickPopper.js"}