colibri-ui 0.7.80 → 0.7.82

package/Chip/Chip.module.css

@@ -16,7 +16,7 @@
   transition-timing-function: ease;
 }
 .inner_active {
-  background: rgb(237, 237, 237);
+  background: var(--palette-bg-1);
 }
 .inner_inactive {
   background: var(--palette-white);
@@ -43,15 +43,18 @@
 }
 .inner[data-size=s] {
   border-radius: 32px;
-  height: 32px;
+  font-size: 15px;
+  line-height: 32px;
 }
 .inner[data-size=m] {
   border-radius: 36px;
-  height: 36px;
+  font-size: 16px;
+  line-height: 36px;
 }
 .inner[data-size=l] {
   border-radius: 44px;
-  height: 44px;
+  font-size: 18px;
+  line-height: 44px;
 }
 
 .content {

package/Chip/index.d.ts

@@ -1,14 +1,4 @@
-import React from "react";
-import type { FC, ReactNode } from "react";
-type Size = "s" | "m" | "l";
-type Props = {
-    size?: Size;
-    testID?: string;
-    isActive?: boolean;
-    iconOnRight?: React.ReactNode;
-    onClick?: () => void;
-    onIconOnRightClick?: () => void;
-    children?: ReactNode;
-};
+import type { Props } from "./index.props";
+import type { FC } from "react";
 declare const Chip: FC<Props>;
 export default Chip;

package/Chip/index.props.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Size = "s" | "m" | "l";
+export type Props = {
+    size?: Size;
+    testID?: string;
+    isActive?: boolean;
+    iconOnRight?: React.ReactNode;
+    onClick?: () => void;
+    onIconOnRightClick?: () => void;
+    children?: ReactNode;
+};
+export {};

package/TabsMenu/Tab/Tab.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { TabProps } from "./Tab.props";
+declare const Tab: FC<TabProps>;
+export default Tab;

package/TabsMenu/Tab/Tab.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./Tab.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Tab = function Tab(_a) {
+  var innerRef = _a.innerRef,
+    active = _a.active,
+    className = _a.className,
+    content = _a.content,
+    disabled = _a.disabled,
+    first = _a.first,
+    size = _a.size,
+    props = tslib.__rest(_a, ["innerRef", "active", "className", "content", "disabled", "first", "size"]);
+  return /*#__PURE__*/React__default.default.createElement("li", tslib.__assign({}, props, {
+    "aria-selected": active,
+    ref: innerRef,
+    className: clx(styles__default.default.tab, {
+      tab_inactive: !active,
+      tab_active: !!active,
+      tab_disabled: !!disabled,
+      tab_first: !!first
+    }, className),
+    "data-size": size,
+    role: "tab",
+    tabIndex: disabled ? undefined : active ? 0 : -1
+  }), content);
+};
+
+exports.default = Tab;

package/TabsMenu/Tab/Tab.module.css

@@ -0,0 +1,61 @@
+.tab {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 16px;
+  padding: 0 20px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition-duration: 0.3s;
+  transition-property: background, box-shadow, transform;
+  transition-timing-function: ease;
+  user-select: none;
+  white-space: nowrap;
+}
+.tab[data-size=s] {
+  border-radius: 32px;
+  font-size: 15px;
+  line-height: 32px;
+}
+.tab[data-size=m] {
+  border-radius: 36px;
+  font-size: 16px;
+  line-height: 36px;
+}
+.tab[data-size=l] {
+  border-radius: 44px;
+  font-size: 18px;
+  line-height: 44px;
+}
+.tab_active {
+  background: var(--palette-bg-1);
+}
+.tab_inactive {
+  background: var(--palette-white);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:hover {
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:active {
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  outline: 0;
+  transition-duration: 0.15s;
+}
+@media (hover: none) {
+  .tab_inactive:hover {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  }
+  .tab_inactive:active {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  }
+}
+.tab_first {
+  margin-left: 0;
+}
+.tab_disabled {
+  background: #f7f8f9;
+  box-shadow: none;
+  color: var(--palette-bg-3);
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/TabsMenu/Tab/Tab.props.d.ts

@@ -0,0 +1,16 @@
+import type { Size } from "../index.props";
+import type { KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from "react";
+export type TabProps = {
+    id?: string;
+    active?: boolean;
+    disabled?: boolean;
+    first?: boolean;
+    content?: ReactNode;
+    onClick?: MouseEventHandler<HTMLLIElement>;
+    innerRef?: RefObject<HTMLLIElement>;
+    className?: string;
+    role?: string;
+    tabIndex?: number;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    size?: Size;
+};

package/TabsMenu/TabsMenu.module.css

@@ -0,0 +1,4 @@
+.root {
+  margin: 0;
+  padding: 0;
+}

package/TabsMenu/index.d.ts

@@ -0,0 +1,4 @@
+import type { TabsMenuProps } from "./index.props";
+import type { FC } from "react";
+declare const TabsMenu: FC<TabsMenuProps>;
+export default TabsMenu;

package/TabsMenu/index.js

@@ -0,0 +1,94 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var keyboard = require('../lib/keyboard.js');
+var Tab = require('./Tab/Tab.js');
+var styles = require('./TabsMenu.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var TabsMenu = function TabsMenu(_a) {
+  var activeTab = _a.activeTab,
+    onChange = _a.onChange,
+    className = _a.className,
+    innerRef = _a.innerRef,
+    tabs = _a.tabs,
+    _b = _a.size,
+    size = _b === void 0 ? "m" : _b,
+    externalTabsRefs = _a.tabsRefs,
+    props = tslib.__rest(_a, ["activeTab", "onChange", "className", "innerRef", "tabs", "size", "tabsRefs"]);
+  var tabsRefs = externalTabsRefs || React.useMemo(function () {
+    return tabs.map(function () {
+      return /*#__PURE__*/React.createRef();
+    });
+  }, [tabs]);
+  var onKeyDown = React.useCallback(function (event) {
+    if (keyboard.isKey(event.key, [keyboard.Keys.LEFT, keyboard.Keys.DOWN, keyboard.Keys.RIGHT, keyboard.Keys.UP])) {
+      event.preventDefault();
+      var nextTabMenuIndex = 0;
+      var direction = keyboard.isKey(event.key, [keyboard.Keys.LEFT, keyboard.Keys.UP]) ? -1 : 1;
+      for (var i = 0; i < tabs.length; i++) {
+        if (tabs[i].id === activeTab) {
+          nextTabMenuIndex = i;
+          break;
+        }
+      }
+      for (var i = nextTabMenuIndex; i < tabs.length; i += direction) {
+        nextTabMenuIndex += direction;
+        var isEdge = nextTabMenuIndex >= tabs.length || nextTabMenuIndex < 0;
+        var isTabNonDisabled = tabs[nextTabMenuIndex] && !tabs[nextTabMenuIndex].disabled;
+        if (isEdge || isTabNonDisabled) {
+          break;
+        }
+      }
+      var nextTabMenu = tabs[nextTabMenuIndex];
+      var nextTabMenuRef = tabsRefs[nextTabMenuIndex];
+      if (nextTabMenu !== undefined && nextTabMenuRef !== undefined && nextTabMenuRef.current !== null && (nextTabMenu.onClick !== undefined || onChange !== undefined)) {
+        nextTabMenuRef.current.focus();
+        if (nextTabMenu.onClick !== undefined) {
+          nextTabMenu.onClick(event);
+        }
+        if (onChange !== undefined) {
+          onChange(nextTabMenuIndex.toString());
+        }
+      }
+    }
+  }, [activeTab, tabsRefs, tabs, onChange]);
+  return /*#__PURE__*/React__default.default.createElement("ul", tslib.__assign({}, props, {
+    className: clx(styles__default.default.root, className),
+    ref: innerRef,
+    role: "tablist"
+  }), tabs.map(function (_a, index) {
+    var id = _a.id,
+      disabled = _a.disabled,
+      tabProps = tslib.__rest(_a, ["id", "disabled"]);
+    return /*#__PURE__*/React__default.default.createElement(Tab.default, tslib.__assign({}, tabProps, {
+      innerRef: tabsRefs[index],
+      first: index === 0,
+      disabled: disabled,
+      size: size,
+      onClick: disabled || !onChange && !tabProps.onClick ? undefined : function (event) {
+        if (tabProps.onClick !== undefined) {
+          tabProps.onClick(event);
+        }
+        if (onChange !== undefined) {
+          onChange(id);
+        }
+      },
+      active: id === activeTab,
+      key: id,
+      onKeyDown: onKeyDown
+    }));
+  }));
+};
+
+exports.default = TabsMenu;

package/TabsMenu/index.props.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from "react";
+import type { TabProps } from "./Tab/Tab.props";
+export type Size = "s" | "m" | "l";
+export type TabsMenuProps = {
+    activeTab?: string;
+    onChange?: (tabId: string) => void;
+    tabs: TabProps[];
+    tabsRefs?: RefObject<HTMLLIElement>[];
+    innerRef?: RefObject<HTMLUListElement>;
+    className?: string;
+    size?: Size;
+};

package/TabsMenu/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/TabsMenu/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/esm/Chip/Chip.module.css

@@ -16,7 +16,7 @@
   transition-timing-function: ease;
 }
 .inner_active {
-  background: rgb(237, 237, 237);
+  background: var(--palette-bg-1);
 }
 .inner_inactive {
   background: var(--palette-white);
@@ -43,15 +43,18 @@
 }
 .inner[data-size=s] {
   border-radius: 32px;
-  height: 32px;
+  font-size: 15px;
+  line-height: 32px;
 }
 .inner[data-size=m] {
   border-radius: 36px;
-  height: 36px;
+  font-size: 16px;
+  line-height: 36px;
 }
 .inner[data-size=l] {
   border-radius: 44px;
-  height: 44px;
+  font-size: 18px;
+  line-height: 44px;
 }
 
 .content {

package/esm/Chip/index.d.ts

@@ -1,14 +1,4 @@
-import React from "react";
-import type { FC, ReactNode } from "react";
-type Size = "s" | "m" | "l";
-type Props = {
-    size?: Size;
-    testID?: string;
-    isActive?: boolean;
-    iconOnRight?: React.ReactNode;
-    onClick?: () => void;
-    onIconOnRightClick?: () => void;
-    children?: ReactNode;
-};
+import type { Props } from "./index.props";
+import type { FC } from "react";
 declare const Chip: FC<Props>;
 export default Chip;

package/esm/Chip/index.props.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+type Size = "s" | "m" | "l";
+export type Props = {
+    size?: Size;
+    testID?: string;
+    isActive?: boolean;
+    iconOnRight?: React.ReactNode;
+    onClick?: () => void;
+    onIconOnRightClick?: () => void;
+    children?: ReactNode;
+};
+export {};

package/esm/TabsMenu/Tab/Tab.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from "react";
+import type { TabProps } from "./Tab.props";
+declare const Tab: FC<TabProps>;
+export default Tab;

package/esm/TabsMenu/Tab/Tab.js

@@ -0,0 +1,31 @@
+import { __rest, __assign } from 'tslib';
+import React__default from 'react';
+import classNames from 'classnames/bind';
+import styles from './Tab.module.css';
+
+var clx = classNames.bind(styles);
+var Tab = function Tab(_a) {
+  var innerRef = _a.innerRef,
+    active = _a.active,
+    className = _a.className,
+    content = _a.content,
+    disabled = _a.disabled,
+    first = _a.first,
+    size = _a.size,
+    props = __rest(_a, ["innerRef", "active", "className", "content", "disabled", "first", "size"]);
+  return /*#__PURE__*/React__default.createElement("li", __assign({}, props, {
+    "aria-selected": active,
+    ref: innerRef,
+    className: clx(styles.tab, {
+      tab_inactive: !active,
+      tab_active: !!active,
+      tab_disabled: !!disabled,
+      tab_first: !!first
+    }, className),
+    "data-size": size,
+    role: "tab",
+    tabIndex: disabled ? undefined : active ? 0 : -1
+  }), content);
+};
+
+export { Tab as default };

package/esm/TabsMenu/Tab/Tab.module.css

@@ -0,0 +1,61 @@
+.tab {
+  cursor: pointer;
+  display: inline-block;
+  margin-left: 16px;
+  padding: 0 20px;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition-duration: 0.3s;
+  transition-property: background, box-shadow, transform;
+  transition-timing-function: ease;
+  user-select: none;
+  white-space: nowrap;
+}
+.tab[data-size=s] {
+  border-radius: 32px;
+  font-size: 15px;
+  line-height: 32px;
+}
+.tab[data-size=m] {
+  border-radius: 36px;
+  font-size: 16px;
+  line-height: 36px;
+}
+.tab[data-size=l] {
+  border-radius: 44px;
+  font-size: 18px;
+  line-height: 44px;
+}
+.tab_active {
+  background: var(--palette-bg-1);
+}
+.tab_inactive {
+  background: var(--palette-white);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:hover {
+  box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+}
+.tab_inactive:active {
+  background: rgba(0, 0, 0, 0.02);
+  box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  outline: 0;
+  transition-duration: 0.15s;
+}
+@media (hover: none) {
+  .tab_inactive:hover {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 5px 20px;
+  }
+  .tab_inactive:active {
+    box-shadow: rgba(193, 193, 193, 0.4) 0 1px 3px;
+  }
+}
+.tab_first {
+  margin-left: 0;
+}
+.tab_disabled {
+  background: #f7f8f9;
+  box-shadow: none;
+  color: var(--palette-bg-3);
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/esm/TabsMenu/Tab/Tab.props.d.ts

@@ -0,0 +1,16 @@
+import type { Size } from "../index.props";
+import type { KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from "react";
+export type TabProps = {
+    id?: string;
+    active?: boolean;
+    disabled?: boolean;
+    first?: boolean;
+    content?: ReactNode;
+    onClick?: MouseEventHandler<HTMLLIElement>;
+    innerRef?: RefObject<HTMLLIElement>;
+    className?: string;
+    role?: string;
+    tabIndex?: number;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    size?: Size;
+};

package/esm/TabsMenu/TabsMenu.module.css

@@ -0,0 +1,4 @@
+.root {
+  margin: 0;
+  padding: 0;
+}

package/esm/TabsMenu/index.d.ts

@@ -0,0 +1,4 @@
+import type { TabsMenuProps } from "./index.props";
+import type { FC } from "react";
+declare const TabsMenu: FC<TabsMenuProps>;
+export default TabsMenu;

package/esm/TabsMenu/index.js

@@ -0,0 +1,84 @@
+import { __rest, __assign } from 'tslib';
+import React__default, { useMemo, createRef, useCallback } from 'react';
+import classNames from 'classnames/bind';
+import { isKey, Keys } from '../lib/keyboard.js';
+import Tab from './Tab/Tab.js';
+import styles from './TabsMenu.module.css';
+
+var clx = classNames.bind(styles);
+var TabsMenu = function TabsMenu(_a) {
+  var activeTab = _a.activeTab,
+    onChange = _a.onChange,
+    className = _a.className,
+    innerRef = _a.innerRef,
+    tabs = _a.tabs,
+    _b = _a.size,
+    size = _b === void 0 ? "m" : _b,
+    externalTabsRefs = _a.tabsRefs,
+    props = __rest(_a, ["activeTab", "onChange", "className", "innerRef", "tabs", "size", "tabsRefs"]);
+  var tabsRefs = externalTabsRefs || useMemo(function () {
+    return tabs.map(function () {
+      return /*#__PURE__*/createRef();
+    });
+  }, [tabs]);
+  var onKeyDown = useCallback(function (event) {
+    if (isKey(event.key, [Keys.LEFT, Keys.DOWN, Keys.RIGHT, Keys.UP])) {
+      event.preventDefault();
+      var nextTabMenuIndex = 0;
+      var direction = isKey(event.key, [Keys.LEFT, Keys.UP]) ? -1 : 1;
+      for (var i = 0; i < tabs.length; i++) {
+        if (tabs[i].id === activeTab) {
+          nextTabMenuIndex = i;
+          break;
+        }
+      }
+      for (var i = nextTabMenuIndex; i < tabs.length; i += direction) {
+        nextTabMenuIndex += direction;
+        var isEdge = nextTabMenuIndex >= tabs.length || nextTabMenuIndex < 0;
+        var isTabNonDisabled = tabs[nextTabMenuIndex] && !tabs[nextTabMenuIndex].disabled;
+        if (isEdge || isTabNonDisabled) {
+          break;
+        }
+      }
+      var nextTabMenu = tabs[nextTabMenuIndex];
+      var nextTabMenuRef = tabsRefs[nextTabMenuIndex];
+      if (nextTabMenu !== undefined && nextTabMenuRef !== undefined && nextTabMenuRef.current !== null && (nextTabMenu.onClick !== undefined || onChange !== undefined)) {
+        nextTabMenuRef.current.focus();
+        if (nextTabMenu.onClick !== undefined) {
+          nextTabMenu.onClick(event);
+        }
+        if (onChange !== undefined) {
+          onChange(nextTabMenuIndex.toString());
+        }
+      }
+    }
+  }, [activeTab, tabsRefs, tabs, onChange]);
+  return /*#__PURE__*/React__default.createElement("ul", __assign({}, props, {
+    className: clx(styles.root, className),
+    ref: innerRef,
+    role: "tablist"
+  }), tabs.map(function (_a, index) {
+    var id = _a.id,
+      disabled = _a.disabled,
+      tabProps = __rest(_a, ["id", "disabled"]);
+    return /*#__PURE__*/React__default.createElement(Tab, __assign({}, tabProps, {
+      innerRef: tabsRefs[index],
+      first: index === 0,
+      disabled: disabled,
+      size: size,
+      onClick: disabled || !onChange && !tabProps.onClick ? undefined : function (event) {
+        if (tabProps.onClick !== undefined) {
+          tabProps.onClick(event);
+        }
+        if (onChange !== undefined) {
+          onChange(id);
+        }
+      },
+      active: id === activeTab,
+      key: id,
+      onKeyDown: onKeyDown
+    }));
+  }));
+};
+
+export { TabsMenu as default };

package/esm/TabsMenu/index.props.d.ts

@@ -0,0 +1,12 @@
+import type { RefObject } from "react";
+import type { TabProps } from "./Tab/Tab.props";
+export type Size = "s" | "m" | "l";
+export type TabsMenuProps = {
+    activeTab?: string;
+    onChange?: (tabId: string) => void;
+    tabs: TabProps[];
+    tabsRefs?: RefObject<HTMLLIElement>[];
+    innerRef?: RefObject<HTMLUListElement>;
+    className?: string;
+    size?: Size;
+};

package/esm/index.d.ts

@@ -21,6 +21,7 @@ export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
+export { default as TabsMenu } from "./TabsMenu";
 export { THEMES } from "./Theme";
 export { default as Tooltip } from "./Tooltip";
 export { default as TimeSelect } from "./TimeSelect";

package/esm/index.js

@@ -21,6 +21,7 @@ export { default as Select } from './Select/index.js';
 export { default as Separator } from './Separator/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { default as Switch } from './Switch/index.js';
+export { default as TabsMenu } from './TabsMenu/index.js';
 export { THEMES } from './Theme/index.js';
 export { default as Tooltip } from './Tooltip/index.js';
 export { default as TimeSelect } from './TimeSelect/index.js';

package/esm/lib/keyboard.d.ts

@@ -0,0 +1,4 @@
+export type Keys = Record<string, string> & Record<KeyboardKeys, string>;
+export type KeyboardKeys = "BACKSPACE" | "TAB" | "ENTER" | "CAPS_LOCK" | "ESC" | "SPACE" | "PAGE_UP" | "PAGE_DOWN" | "END" | "HOME" | "LEFT" | "UP" | "RIGHT" | "DOWN" | "INSERT" | "DELETE" | string;
+export declare const Keys: Keys;
+export declare function isKey(eventKey: string, keys: Array<KeyboardKeys | string>): boolean;

package/esm/lib/keyboard.js

@@ -0,0 +1,25 @@
+var Keys = {
+  BACKSPACE: "Backspace",
+  TAB: "Tab",
+  ENTER: "Enter",
+  CAPS_LOCK: "CapsLock",
+  ESC: "Escape",
+  SPACE: " ",
+  PAGE_UP: "PageUp",
+  PAGE_DOWN: "PageDown",
+  END: "End",
+  HOME: "Home",
+  LEFT: "ArrowLeft",
+  UP: "ArrowUp",
+  RIGHT: "ArrowRight",
+  DOWN: "ArrowDown",
+  INSERT: "Insert",
+  DELETE: "Delete"
+};
+function isKey(eventKey, keys) {
+  return keys.some(function (value) {
+    return Keys[value] === eventKey || value === eventKey;
+  });
+}
+
+export { Keys, isKey };

package/index.d.ts

@@ -21,6 +21,7 @@ export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
+export { default as TabsMenu } from "./TabsMenu";
 export { THEMES } from "./Theme";
 export { default as Tooltip } from "./Tooltip";
 export { default as TimeSelect } from "./TimeSelect";

package/index.js

@@ -23,13 +23,14 @@ var index$j = require('./Select/index.js');
 var index$k = require('./Separator/index.js');
 var index$l = require('./Skeleton/index.js');
 var index$m = require('./Switch/index.js');
-var index$n = require('./Theme/index.js');
-var index$o = require('./Tooltip/index.js');
-var index$p = require('./TimeSelect/index.js');
-var index$q = require('./Typography/index.js');
-var index$r = require('./hooks/useMediaSizes/index.js');
-var index$s = require('./hooks/useOnClickOutside/index.js');
-var index$t = require('./hooks/useScrollLock/index.js');
+var index$n = require('./TabsMenu/index.js');
+var index$o = require('./Theme/index.js');
+var index$p = require('./Tooltip/index.js');
+var index$q = require('./TimeSelect/index.js');
+var index$r = require('./Typography/index.js');
+var index$s = require('./hooks/useMediaSizes/index.js');
+var index$t = require('./hooks/useOnClickOutside/index.js');
+var index$u = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -73,13 +74,14 @@ exports.Separator = index$k.default;
 exports.SkeletonRect = index$l.SkeletonRect;
 exports.SkeletonText = index$l.SkeletonText;
 exports.Switch = index$m.default;
-exports.THEMES = index$n.THEMES;
-exports.Tooltip = index$o.default;
-exports.TimeSelect = index$p.default;
-exports.Typography = index$q.default;
-exports.useMediaSizes = index$r.default;
-exports.useOnClickOutside = index$s.default;
-exports.useScrollLock = index$t.default;
+exports.TabsMenu = index$n.default;
+exports.THEMES = index$o.THEMES;
+exports.Tooltip = index$p.default;
+exports.TimeSelect = index$q.default;
+exports.Typography = index$r.default;
+exports.useMediaSizes = index$s.default;
+exports.useOnClickOutside = index$t.default;
+exports.useScrollLock = index$u.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;

package/lib/keyboard.d.ts

@@ -0,0 +1,4 @@
+export type Keys = Record<string, string> & Record<KeyboardKeys, string>;
+export type KeyboardKeys = "BACKSPACE" | "TAB" | "ENTER" | "CAPS_LOCK" | "ESC" | "SPACE" | "PAGE_UP" | "PAGE_DOWN" | "END" | "HOME" | "LEFT" | "UP" | "RIGHT" | "DOWN" | "INSERT" | "DELETE" | string;
+export declare const Keys: Keys;
+export declare function isKey(eventKey: string, keys: Array<KeyboardKeys | string>): boolean;

package/lib/keyboard.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var Keys = {
+  BACKSPACE: "Backspace",
+  TAB: "Tab",
+  ENTER: "Enter",
+  CAPS_LOCK: "CapsLock",
+  ESC: "Escape",
+  SPACE: " ",
+  PAGE_UP: "PageUp",
+  PAGE_DOWN: "PageDown",
+  END: "End",
+  HOME: "Home",
+  LEFT: "ArrowLeft",
+  UP: "ArrowUp",
+  RIGHT: "ArrowRight",
+  DOWN: "ArrowDown",
+  INSERT: "Insert",
+  DELETE: "Delete"
+};
+function isKey(eventKey, keys) {
+  return keys.some(function (value) {
+    return Keys[value] === eventKey || value === eventKey;
+  });
+}
+
+exports.Keys = Keys;
+exports.isKey = isKey;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.80",
+  "version": "0.7.82",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},