@consta/uikit 3.17.3 → 3.18.0

package/__internal__/src/components/ThemeToggler/types.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { IconComponent } from '../../icons/Icon/Icon';
+import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+import { Direction } from '../Popover/Popover';
+export declare const themeTogglerPropSize: readonly ["m", "l", "s", "xs"];
+export declare type ThemeTogglerPropSize = typeof themeTogglerPropSize[number];
+export declare const themeTogglerPropSizeDefault: ThemeTogglerPropSize;
+export declare type ThemeTogglerPropSetValue<ITEM> = (props: {
+    e: React.MouseEvent;
+    value: ITEM;
+}) => void;
+export declare type ThemeTogglerPropGetItemKey<ITEM> = (item: ITEM) => string | number;
+export declare type ThemeTogglerPropGetItemLabel<ITEM> = (item: ITEM) => string;
+export declare type ThemeTogglerPropGetItemIcon<ITEM> = (item: ITEM) => IconComponent;
+export declare type ThemeTogglerItemDefault = {
+    key: string;
+    label: string;
+    icon: IconComponent;
+};
+export declare type ThemeTogglerProps<ITEM = ThemeTogglerItemDefault> = PropsWithHTMLAttributesAndRef<{
+    size?: ThemeTogglerPropSize;
+    className?: string;
+    items: ITEM[];
+    value: ITEM;
+    onChange: ThemeTogglerPropSetValue<ITEM>;
+    getItemKey?: ThemeTogglerPropGetItemKey<ITEM>;
+    getItemLabel?: ThemeTogglerPropGetItemLabel<ITEM>;
+    getItemIcon?: ThemeTogglerPropGetItemIcon<ITEM>;
+    direction?: Direction;
+    possibleDirections?: readonly Direction[];
+    children?: never;
+}, HTMLButtonElement> & (ITEM extends {
+    key: ThemeTogglerItemDefault['key'];
+} ? {} : {
+    getItemKey: ThemeTogglerPropGetItemLabel<ITEM>;
+}) & (ITEM extends {
+    label: ThemeTogglerItemDefault['label'];
+} ? {} : {
+    getItemLabel: ThemeTogglerPropGetItemLabel<ITEM>;
+}) & (ITEM extends {
+    icon: ThemeTogglerItemDefault['icon'];
+} ? {} : {
+    getItemIcon: ThemeTogglerPropGetItemIcon<ITEM>;
+});
+export declare type ThemeTogglerComponent = <ITEM>(props: ThemeTogglerProps<ITEM>) => React.ReactElement | null;

package/__internal__/src/components/ThemeToggler/types.js

@@ -0,0 +1,2 @@
+export var themeTogglerPropSize = ['m', 'l', 's', 'xs'];
+export var themeTogglerPropSizeDefault = themeTogglerPropSize[0];

package/__internal__/src/components/Tooltip/Tooltip.css

@@ -1,10 +1,7 @@
 .Tooltip {
   --tooltip-bg-color: var(--color-bg-default);
+  --popover-arrow-bg-color: var(--tooltip-bg-color);
   --tooltip-bg-opacity: 0.9;
-
-  /* Задаются через js */
-  --tooltip-arrow-size: 0;
-  --tooltip-arrow-offset: 0;
 }
 
   .Tooltip_status_alert {
@@ -67,89 +64,5 @@
     }
 
   .Tooltip-Arrow {
-    position: absolute;
-    border: var(--tooltip-arrow-size) solid transparent;
     opacity: var(--tooltip-bg-opacity);
   }
-
-  .Tooltip-Arrow_direction_upLeft,
-    .Tooltip-Arrow_direction_upCenter,
-    .Tooltip-Arrow_direction_upRight,
-    .Tooltip-Arrow_direction_upStartLeft,
-    .Tooltip-Arrow_direction_upStartRight {
-      bottom: 0;
-      border-top-color: var(--tooltip-bg-color);
-      -webkit-transform: translateY(100%);
-              transform: translateY(100%);
-    }
-
-  .Tooltip-Arrow_direction_upLeft,
-    .Tooltip-Arrow_direction_downLeft,
-    .Tooltip-Arrow_direction_downStartRight,
-    .Tooltip-Arrow_direction_upStartRight {
-      right: var(--tooltip-arrow-offset);
-    }
-
-  .Tooltip-Arrow_direction_upCenter,
-    .Tooltip-Arrow_direction_downCenter {
-      left: calc(50% - var(--tooltip-arrow-size));
-    }
-
-  .Tooltip-Arrow_direction_upRight,
-    .Tooltip-Arrow_direction_downRight,
-    .Tooltip-Arrow_direction_downStartLeft,
-    .Tooltip-Arrow_direction_upStartLeft {
-      left: var(--tooltip-arrow-offset);
-    }
-
-  .Tooltip-Arrow_direction_downLeft,
-    .Tooltip-Arrow_direction_downCenter,
-    .Tooltip-Arrow_direction_downRight,
-    .Tooltip-Arrow_direction_downStartLeft,
-    .Tooltip-Arrow_direction_downStartRight {
-      top: 0;
-      border-bottom-color: var(--tooltip-bg-color);
-      -webkit-transform: translateY(-100%);
-              transform: translateY(-100%);
-    }
-
-  .Tooltip-Arrow_direction_rightUp,
-    .Tooltip-Arrow_direction_rightCenter,
-    .Tooltip-Arrow_direction_rightDown,
-    .Tooltip-Arrow_direction_rightStartUp,
-    .Tooltip-Arrow_direction_rightStartDown {
-      left: 0;
-      border-right-color: var(--tooltip-bg-color);
-      -webkit-transform: translateX(-100%);
-              transform: translateX(-100%);
-    }
-
-  .Tooltip-Arrow_direction_rightUp,
-    .Tooltip-Arrow_direction_leftUp,
-    .Tooltip-Arrow_direction_leftStartDown,
-    .Tooltip-Arrow_direction_rightStartDown {
-      bottom: var(--tooltip-arrow-offset);
-    }
-
-  .Tooltip-Arrow_direction_rightCenter,
-    .Tooltip-Arrow_direction_leftCenter {
-      top: calc(50% - var(--tooltip-arrow-size));
-    }
-
-  .Tooltip-Arrow_direction_rightDown,
-    .Tooltip-Arrow_direction_leftDown,
-    .Tooltip-Arrow_direction_leftStartUp,
-    .Tooltip-Arrow_direction_rightStartUp {
-      top: var(--tooltip-arrow-offset);
-    }
-
-  .Tooltip-Arrow_direction_leftUp,
-    .Tooltip-Arrow_direction_leftCenter,
-    .Tooltip-Arrow_direction_leftDown,
-    .Tooltip-Arrow_direction_leftStartUp,
-    .Tooltip-Arrow_direction_leftStartDown {
-      right: 0;
-      border-left-color: var(--tooltip-bg-color);
-      -webkit-transform: translateX(100%);
-              transform: translateX(100%);
-    }

package/__internal__/src/components/Tooltip/Tooltip.js

@@ -1,6 +1,7 @@
 import { __assign, __read, __rest } from "tslib";
 import './Tooltip.css';
 import React, { useState } from 'react';
+import { cnMixPopoverArrow } from '../../mixs/MixPopoverArrow/MixPopoverArrow';
 import { cn } from '../../utils/bem';
 import { Popover } from '../Popover/Popover';
 import { Text } from '../Text/Text';
@@ -35,8 +36,8 @@ export var Tooltip = React.forwardRef(function (props, ref) {
         setDirection(direction);
     };
     return (React.createElement(ThemeContext.Provider, { value: { theme: tooltipTheme, themeClassNames: tooltipThemeClassNames } },
-        React.createElement(Popover, __assign({}, rest, { arrowOffset: ARROW_OFFSET + ARROW_SIZE, offset: ARROW_SIZE + 4, onSetDirection: onSetDirection, ref: ref, className: cnTooltip({ status: status }, [className]), style: __assign((_a = {}, _a['--tooltip-arrow-size'] = ARROW_SIZE + "px", _a['--tooltip-arrow-offset'] = ARROW_OFFSET + "px", _a), style) }),
+        React.createElement(Popover, __assign({}, rest, { arrowOffset: ARROW_OFFSET + ARROW_SIZE, offset: ARROW_SIZE + 4, onSetDirection: onSetDirection, ref: ref, className: cnTooltip({ status: status }, [className]), style: __assign((_a = {}, _a['--popover-arrow-size'] = ARROW_SIZE + "px", _a['--popover-arrow-offset'] = ARROW_OFFSET + "px", _a), style) }),
             React.createElement("div", { className: cnTooltip('Background') }),
-            React.createElement("div", { className: cnTooltip('Arrow', { direction: direction }) }),
+            React.createElement("div", { className: cnTooltip('Arrow', [cnMixPopoverArrow({ direction: direction })]) }),
             React.createElement("div", { className: cnTooltip('Content', { size: size }) }, renderChildren(children)))));
 });

package/__internal__/src/mixs/MixPopoverArrow/MixPopoverArrow.css

@@ -0,0 +1,88 @@
+.MixPopoverArrow {
+  --popover-arrow-size: 10px;
+  --popover-arrow-offset: 6px;
+  position: absolute;
+  border: var(--popover-arrow-size) solid transparent;
+}
+
+  .MixPopoverArrow_direction_upLeft,
+  .MixPopoverArrow_direction_upCenter,
+  .MixPopoverArrow_direction_upRight,
+  .MixPopoverArrow_direction_upStartLeft,
+  .MixPopoverArrow_direction_upStartRight {
+    bottom: 0;
+    border-top-color: var(--popover-arrow-bg-color);
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+  }
+
+  .MixPopoverArrow_direction_upLeft,
+  .MixPopoverArrow_direction_downLeft,
+  .MixPopoverArrow_direction_downStartRight,
+  .MixPopoverArrow_direction_upStartRight {
+    right: var(--popover-arrow-offset);
+  }
+
+  .MixPopoverArrow_direction_upCenter,
+  .MixPopoverArrow_direction_downCenter {
+    left: calc(50% - var(--popover-arrow-size));
+  }
+
+  .MixPopoverArrow_direction_upRight,
+  .MixPopoverArrow_direction_downRight,
+  .MixPopoverArrow_direction_downStartLeft,
+  .MixPopoverArrow_direction_upStartLeft {
+    left: var(--popover-arrow-offset);
+  }
+
+  .MixPopoverArrow_direction_downLeft,
+  .MixPopoverArrow_direction_downCenter,
+  .MixPopoverArrow_direction_downRight,
+  .MixPopoverArrow_direction_downStartLeft,
+  .MixPopoverArrow_direction_downStartRight {
+    top: 0;
+    border-bottom-color: var(--popover-arrow-bg-color);
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+  }
+
+  .MixPopoverArrow_direction_rightUp,
+  .MixPopoverArrow_direction_rightCenter,
+  .MixPopoverArrow_direction_rightDown,
+  .MixPopoverArrow_direction_rightStartUp,
+  .MixPopoverArrow_direction_rightStartDown {
+    left: 0;
+    border-right-color: var(--popover-arrow-bg-color);
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+
+  .MixPopoverArrow_direction_rightUp,
+  .MixPopoverArrow_direction_leftUp,
+  .MixPopoverArrow_direction_leftStartDown,
+  .MixPopoverArrow_direction_rightStartDown {
+    bottom: var(--popover-arrow-offset);
+  }
+
+  .MixPopoverArrow_direction_rightCenter,
+  .MixPopoverArrow_direction_leftCenter {
+    top: calc(50% - var(--popover-arrow-size));
+  }
+
+  .MixPopoverArrow_direction_rightDown,
+  .MixPopoverArrow_direction_leftDown,
+  .MixPopoverArrow_direction_leftStartUp,
+  .MixPopoverArrow_direction_rightStartUp {
+    top: var(--popover-arrow-offset);
+  }
+
+  .MixPopoverArrow_direction_leftUp,
+  .MixPopoverArrow_direction_leftCenter,
+  .MixPopoverArrow_direction_leftDown,
+  .MixPopoverArrow_direction_leftStartUp,
+  .MixPopoverArrow_direction_leftStartDown {
+    right: 0;
+    border-left-color: var(--popover-arrow-bg-color);
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+  }

package/__internal__/src/mixs/MixPopoverArrow/MixPopoverArrow.d.ts

@@ -0,0 +1,8 @@
+import './MixPopoverArrow.css';
+import { Direction } from '../../components/Popover/Popover';
+declare type Props = {
+    direction?: Direction;
+};
+declare type CnMixPopoverArrow = (elemNameOrBlockMods?: Props | string | null, elemModsOrBlockMix?: Props | Array<string | undefined> | null, elemMix?: Array<string | undefined>) => string;
+export declare const cnMixPopoverArrow: CnMixPopoverArrow;
+export {};

package/__internal__/src/mixs/MixPopoverArrow/MixPopoverArrow.js

@@ -0,0 +1,3 @@
+import './MixPopoverArrow.css';
+import { cn } from '../../utils/bem';
+export var cnMixPopoverArrow = cn('MixPopoverArrow');

package/createIcon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/createIcon",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/createResponsesImage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/createResponsesImage",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "keywords": [
     "ui-kit",
     "design-system",
@@ -42,6 +42,7 @@
     "Combobox",
     "ComboboxDeprecated",
     "ContextMenu",
+    "ContextMenuCanary",
     "DatePickerCanary",
     "DateTimeCanary",
     "DragNDropField",
@@ -262,6 +263,7 @@
     "MixCard",
     "MixFocus",
     "MixPopoverAnimate",
+    "MixPopoverArrow",
     "MixSpace",
     "MixVisuallyHidden",
     "Modal",

package/useBreakpoints/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useBreakpoints",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useChoiceGroup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useChoiceGroup",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useChoiceGroupIndexed/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useChoiceGroupIndexed",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useClickOutside/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useClickOutside",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useComponentSize/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useComponentSize",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useDebounce/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useDebounce",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useFlag/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useFlag",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useForkRef/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useForkRef",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useGlobalKeys/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useGlobalKeys",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useHideElementsInLine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useHideElementsInLine",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useKeys/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useKeys",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useMutableRef/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useMutableRef",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useOverflow/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useOverflow",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/usePrevious/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/usePrevious",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useRefs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useRefs",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useResizeObserved/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useResizeObserved",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useScrollElements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useScrollElements",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useScrollPosition/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useScrollPosition",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useSelect/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useSelect",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useSortSteps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useSortSteps",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useThemeVars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useThemeVars",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/useTimer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/useTimer",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [

package/withTooltip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit/withTooltip",
-  "version": "3.17.3",
+  "version": "3.18.0",
   "main": "index.js",
   "module": "es.js",
   "sideEffects": [