@consta/uikit 3.23.1 → 3.24.0

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

@@ -0,0 +1,97 @@
+import React from 'react';
+import { IconComponent, IconPropSize } from '../../icons/Icon/Icon';
+import { PropsWithHTMLAttributesAndRef } from '../../utils/types/PropsWithHTMLAttributes';
+export declare type TabDimensions = {
+    size: number;
+    gap: number;
+};
+export declare type TabsItemDefault = {
+    label: string | number;
+    icon?: IconComponent;
+};
+export declare const tabsSizes: readonly ["m", "s"];
+export declare type TabsPropSize = typeof tabsSizes[number];
+export declare const tabsDefaultSize: TabsPropSize;
+export declare const tabsViews: readonly ["bordered", "clear"];
+export declare type TabsPropView = typeof tabsViews[number];
+export declare const tabsDefaultView: TabsPropView;
+export declare const tabsLinePositions: readonly ["bottom", "top", "left", "right"];
+export declare type TabsPropLinePosition = typeof tabsLinePositions[number];
+export declare const tabsDefaultLinePosition: TabsPropLinePosition;
+export declare const tabsFitModes: readonly ["scroll", "dropdown"];
+export declare type TabsPropFitMode = typeof tabsFitModes[number];
+export declare const tabsDefaultFitMode: TabsPropFitMode;
+export declare type TabsPropGetItemLabel<ITEM> = (item: ITEM) => string | number;
+export declare type TabsPropGetItemChecked<ITEM> = (item: ITEM) => boolean | undefined;
+export declare type TabsPropGetItemIcon<ITEM> = (item: ITEM) => IconComponent | undefined;
+export declare type TabsPropOnChange<ITEM> = (props: {
+    e: React.MouseEvent;
+    value: ITEM;
+}) => void;
+export declare type RenderItemProps<ITEM> = {
+    item: ITEM;
+    onChange: React.MouseEventHandler;
+    checked: boolean;
+    label: string;
+    icon?: IconComponent;
+    size: TabsPropSize;
+    iconSize?: IconPropSize;
+    onlyIcon?: boolean;
+};
+export declare type RenderItem<ITEM> = (props: RenderItemProps<ITEM>) => React.ReactElement | null;
+export declare type TabsFitModeWrapperProps<ITEM> = {
+    items: ITEM[];
+    tabsDimensions: TabDimensions[];
+    getItemLabel: TabsPropGetItemLabel<ITEM>;
+    getItemChecked: TabsPropGetItemChecked<ITEM>;
+    renderItem: (item: ITEM) => React.ReactNode;
+    renderItemsList: RenderItemsListProp;
+    tabRefs: Array<React.RefObject<HTMLElement>>;
+};
+export declare type TabsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<{
+    size?: TabsPropSize;
+    onlyIcon?: boolean;
+    view?: TabsPropView;
+    iconSize?: IconPropSize;
+    items: ITEM[];
+    value?: ITEM | null;
+    getItemIcon?: TabsPropGetItemIcon<ITEM>;
+    getItemLabel?: TabsPropGetItemLabel<ITEM>;
+    children?: never;
+    onChange: TabsPropOnChange<ITEM>;
+    renderItem?: RenderItem<ITEM>;
+} & ({
+    linePosition?: Extract<TabsPropLinePosition, 'bottom' | 'top'>;
+    fitMode?: 'dropdown' | 'scroll';
+} | {
+    linePosition: Extract<TabsPropLinePosition, 'left' | 'right'>;
+    fitMode?: never;
+}), HTMLDivElement> & (ITEM extends {
+    label: TabsItemDefault['label'];
+} ? {} : {
+    getItemLabel: TabsPropGetItemLabel<ITEM>;
+});
+export declare type TabsComponent = <ITEM>(props: TabsProps<ITEM>) => React.ReactElement | null;
+export declare type TabsTabProps = {
+    size: TabsPropSize;
+    onlyIcon?: boolean;
+    icon?: IconComponent;
+    iconSize?: IconPropSize;
+    label: string;
+    checked: boolean;
+    onChange: React.MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+};
+export declare type TabsMoreItemsProps<ITEM = TabsItemDefault> = PropsWithHTMLAttributesAndRef<{
+    items: ITEM[];
+    renderItem: (item: ITEM, onClick: () => void) => React.ReactNode;
+    getItemLabel: TabsPropGetItemLabel<ITEM>;
+    getItemChecked: TabsPropGetItemChecked<ITEM>;
+    height: number;
+} & React.RefAttributes<HTMLDivElement>, HTMLDivElement>;
+export declare type TabsMoreItemsComponent = <ITEM>(props: TabsMoreItemsProps<ITEM>) => React.ReactElement | null;
+export declare type RenderItemsListProp = (props: {
+    withRunningLine?: boolean;
+    getTabClassName?: (idx: number) => string | undefined;
+}) => React.ReactNode;
+export declare type TabsDirection = 'horizontal' | 'vertical';

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

@@ -0,0 +1,8 @@
+export var tabsSizes = ['m', 's'];
+export var tabsDefaultSize = tabsSizes[0];
+export var tabsViews = ['bordered', 'clear'];
+export var tabsDefaultView = tabsViews[0];
+export var tabsLinePositions = ['bottom', 'top', 'left', 'right'];
+export var tabsDefaultLinePosition = 'bottom';
+export var tabsFitModes = ['scroll', 'dropdown'];
+export var tabsDefaultFitMode = 'dropdown';

package/__internal__/src/utils/getByMap.d.ts

@@ -1 +1 @@
-export declare function getByMap<COMPONENT_SIZE extends string | number, SIZE>(map: Record<COMPONENT_SIZE, SIZE>, componentSize: COMPONENT_SIZE, size?: SIZE): SIZE;
+export declare function getByMap<KEY extends string | number, VALUE>(map: Record<KEY, VALUE>, key: KEY, value?: VALUE): VALUE;

package/__internal__/src/utils/getByMap.js

@@ -1,6 +1,6 @@
-export function getByMap(map, componentSize, size) {
-    if (size) {
-        return size;
+export function getByMap(map, key, value) {
+    if (value) {
+        return value;
     }
-    return map[componentSize];
+    return map[key];
 }

package/__internal__/src/utils/getGroups.js

@@ -1,5 +1,9 @@
 import { __values } from "tslib";
 export var defaultGroupKey = 'no-group';
+var getItemGroupKeyGuard = function (getter, item, noGroupKey) {
+    var key = getter(item);
+    return typeof key === 'undefined' ? noGroupKey : key;
+};
 /**
  * @param items список который нужно групировать
  * @param getItemGroupKey признак принадлежности к группе
@@ -16,7 +20,7 @@ export function getGroups(items, getItemGroupKey, groups, getGroupKey, sortGroup
     }
     var resultGroups = [];
     var _loop_1 = function (item) {
-        var itemGroupKey = getItemGroupKey(item) || noGroupKey;
+        var itemGroupKey = getItemGroupKeyGuard(getItemGroupKey, item, noGroupKey);
         var resultGroupIndex = resultGroups.findIndex(function (group) { return group.key === itemGroupKey; });
         if (resultGroupIndex >= 0) {
             resultGroups[resultGroupIndex].items.push(item);

package/createIcon/package.json

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

package/createResponsesImage/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@consta/uikit",
-  "version": "3.23.1",
+  "version": "3.24.0",
   "keywords": [
     "ui-kit",
     "design-system",
@@ -36,7 +36,9 @@
     "Card",
     "Checkbox",
     "CheckboxGroup",
+    "CheckboxGroupCanary",
     "ChoiceGroup",
+    "ChoiceGroupCanary",
     "Collapse",
     "CollapseGroup",
     "Combobox",
@@ -312,8 +314,10 @@
     "StepsCanary",
     "Switch",
     "SwitchGroup",
+    "SwitchGroupCanary",
     "Table",
     "Tabs",
+    "TabsCanary",
     "Tag",
     "TagBase",
     "Text",

package/useBreakpoints/package.json

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

package/useChoiceGroup/package.json

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

package/useChoiceGroupIndexed/package.json

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

package/useClickOutside/package.json

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

package/useComponentSize/package.json

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

package/useDebounce/package.json

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

package/useFlag/package.json

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

package/useForkRef/package.json

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

package/useGlobalKeys/package.json

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

package/useHideElementsInLine/package.json

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

package/useKeys/package.json

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

package/useMutableRef/package.json

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

package/useOverflow/package.json

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

package/usePrevious/package.json

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

package/useRefs/package.json

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

package/useResizeObserved/package.json

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

package/useScrollElements/package.json

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

package/useScrollPosition/package.json

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

package/useSelect/package.json

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

package/useSortSteps/package.json

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

package/useThemeVars/package.json

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

package/useTimer/package.json

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

package/withTooltip/package.json

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

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.css

@@ -1,9 +0,0 @@
-.DateTimeAdditionalControls {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-top: var(--space-l);
-  gap: var(--space-s);
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.d.ts

@@ -1,9 +0,0 @@
-import './DateTimeAdditionalControls.css';
-import React from 'react';
-import { DateTimeAdditionalControlRenderProp } from '../helpers';
-declare type Props = {
-    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
-    currentVisibleDate?: Date;
-};
-export declare const DateTimeAdditionalControls: React.FC<Props>;
-export {};

package/__internal__/cjs-src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.js

@@ -1,21 +0,0 @@
-"use strict";
-exports.__esModule = true;
-exports.DateTimeAdditionalControls = void 0;
-var tslib_1 = require("tslib");
-require("./DateTimeAdditionalControls.css");
-var react_1 = tslib_1.__importDefault(require("react"));
-var bem_1 = require("../../../utils/bem");
-function isRenderFn(fn) {
-    return fn.call !== undefined;
-}
-var cnDateTimeAdditionalControls = bem_1.cn('DateTimeAdditionalControls');
-exports.DateTimeAdditionalControls = function (props) {
-    var renderAdditionalControls = props.renderAdditionalControls, currentVisibleDate = props.currentVisibleDate;
-    if (typeof renderAdditionalControls !== 'undefined') {
-        var content = isRenderFn(renderAdditionalControls)
-            ? renderAdditionalControls({ currentVisibleDate: currentVisibleDate })
-            : renderAdditionalControls;
-        return react_1["default"].createElement("div", { className: cnDateTimeAdditionalControls() }, content);
-    }
-    return null;
-};

package/__internal__/src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.css

@@ -1,9 +0,0 @@
-.DateTimeAdditionalControls {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  margin-top: var(--space-l);
-  gap: var(--space-s);
-  -ms-flex-wrap: wrap;
-      flex-wrap: wrap;
-}

package/__internal__/src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.d.ts

@@ -1,9 +0,0 @@
-import './DateTimeAdditionalControls.css';
-import React from 'react';
-import { DateTimeAdditionalControlRenderProp } from '../helpers';
-declare type Props = {
-    renderAdditionalControls?: DateTimeAdditionalControlRenderProp;
-    currentVisibleDate?: Date;
-};
-export declare const DateTimeAdditionalControls: React.FC<Props>;
-export {};

package/__internal__/src/components/DateTimeCanary/DateTimeAdditionalControls/DateTimeAdditionalControls.js

@@ -1,17 +0,0 @@
-import './DateTimeAdditionalControls.css';
-import React from 'react';
-import { cn } from '../../../utils/bem';
-function isRenderFn(fn) {
-    return fn.call !== undefined;
-}
-var cnDateTimeAdditionalControls = cn('DateTimeAdditionalControls');
-export var DateTimeAdditionalControls = function (props) {
-    var renderAdditionalControls = props.renderAdditionalControls, currentVisibleDate = props.currentVisibleDate;
-    if (typeof renderAdditionalControls !== 'undefined') {
-        var content = isRenderFn(renderAdditionalControls)
-            ? renderAdditionalControls({ currentVisibleDate: currentVisibleDate })
-            : renderAdditionalControls;
-        return React.createElement("div", { className: cnDateTimeAdditionalControls() }, content);
-    }
-    return null;
-};