colibri-ui 0.7.81 → 0.7.82

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/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/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/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/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.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.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.81",
+  "version": "0.7.82",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},