colibri-ui 0.7.82 → 0.7.84

package/Grid/Grid.module.css

@@ -6,7 +6,7 @@
 @supports (display: grid) {
   .root {
     display: grid;
-    grid-auto-rows: minmax(150px, auto);
+    grid-auto-rows: minmax(50px, auto);
     grid-gap: 10px;
   }
   .root > * {

package/Grid/index.js

@@ -19,7 +19,7 @@ var Grid = function Grid(_a) {
     _c = _a.gridColumnGap,
     gridColumnGap = _c === void 0 ? 16 : _c,
     _d = _a.gridItemMinWidth,
-    gridItemMinWidth = _d === void 0 ? 250 : _d,
+    gridItemMinWidth = _d === void 0 ? 100 : _d,
     className = _a.className;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: classNames__default.default(styles__default.default.root, className),

package/TabsPanes/Pane/Pane.d.ts

@@ -0,0 +1,3 @@
+import type { PaneProps } from "./index.props";
+import type { FC } from "react";
+export declare const TabsPanesPane: FC<PaneProps>;

package/TabsPanes/Pane/Pane.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var TabsPanesPane = function TabsPanesPane(_a) {
+  var content = _a.content,
+    className = _a.className,
+    props = tslib.__rest(_a, ["content", "className"]);
+  return /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({}, props, {
+    role: "tabpanel",
+    className: classNames__default.default(null, className)
+  }), content);
+};
+
+exports.TabsPanesPane = TabsPanesPane;

package/TabsPanes/Pane/index.props.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export type PaneProps = {
+    content?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+};

package/TabsPanes/index.d.ts

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

package/TabsPanes/index.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames');
+var Pane = require('./Pane/Pane.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+
+var TabsPanes = function TabsPanes(_a) {
+  var activePane = _a.activePane,
+    className = _a.className,
+    innerRef = _a.innerRef,
+    panes = _a.panes,
+    props = tslib.__rest(_a, ["activePane", "className", "innerRef", "panes"]);
+  var currentPane = panes.reduce(function (acc, pane) {
+    if (acc !== null) {
+      return acc;
+    }
+    return pane.id === activePane ? pane : null;
+  }, null);
+  var _b = currentPane || {},
+    id = _b.id,
+    paneProps = tslib.__rest(_b, ["id"]);
+  return /*#__PURE__*/React__default.default.createElement("div", tslib.__assign({}, props, {
+    ref: innerRef,
+    role: "menutabpanes",
+    className: classNames__default.default(null, [className])
+  }), currentPane && /*#__PURE__*/React__default.default.createElement(Pane.TabsPanesPane, tslib.__assign({}, paneProps)));
+};
+
+exports.default = TabsPanes;

package/TabsPanes/index.props.d.ts

@@ -0,0 +1,8 @@
+import type { RefObject } from "react";
+import type { PaneProps } from "./Pane/index.props";
+export type TabsPanesProps = {
+    activePane?: string;
+    panes: PaneProps[];
+    innerRef?: RefObject<HTMLDivElement>;
+    className?: string;
+};

package/TabsPanes/package.json

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

package/esm/Grid/Grid.module.css

@@ -6,7 +6,7 @@
 @supports (display: grid) {
   .root {
     display: grid;
-    grid-auto-rows: minmax(150px, auto);
+    grid-auto-rows: minmax(50px, auto);
     grid-gap: 10px;
   }
   .root > * {

package/esm/Grid/index.js

@@ -9,7 +9,7 @@ var Grid = function Grid(_a) {
     _c = _a.gridColumnGap,
     gridColumnGap = _c === void 0 ? 16 : _c,
     _d = _a.gridItemMinWidth,
-    gridItemMinWidth = _d === void 0 ? 250 : _d,
+    gridItemMinWidth = _d === void 0 ? 100 : _d,
     className = _a.className;
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames(styles.root, className),

package/esm/TabsPanes/Pane/Pane.d.ts

@@ -0,0 +1,3 @@
+import type { PaneProps } from "./index.props";
+import type { FC } from "react";
+export declare const TabsPanesPane: FC<PaneProps>;

package/esm/TabsPanes/Pane/Pane.js

@@ -0,0 +1,15 @@
+import { __rest, __assign } from 'tslib';
+import React__default from 'react';
+import classNames from 'classnames';
+
+var TabsPanesPane = function TabsPanesPane(_a) {
+  var content = _a.content,
+    className = _a.className,
+    props = __rest(_a, ["content", "className"]);
+  return /*#__PURE__*/React__default.createElement("div", __assign({}, props, {
+    role: "tabpanel",
+    className: classNames(null, className)
+  }), content);
+};
+
+export { TabsPanesPane };

package/esm/TabsPanes/Pane/index.props.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export type PaneProps = {
+    content?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    id?: string;
+};

package/esm/TabsPanes/index.d.ts

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

package/esm/TabsPanes/index.js

@@ -0,0 +1,28 @@
+import { __rest, __assign } from 'tslib';
+import React__default from 'react';
+import classNames from 'classnames';
+import { TabsPanesPane } from './Pane/Pane.js';
+
+var TabsPanes = function TabsPanes(_a) {
+  var activePane = _a.activePane,
+    className = _a.className,
+    innerRef = _a.innerRef,
+    panes = _a.panes,
+    props = __rest(_a, ["activePane", "className", "innerRef", "panes"]);
+  var currentPane = panes.reduce(function (acc, pane) {
+    if (acc !== null) {
+      return acc;
+    }
+    return pane.id === activePane ? pane : null;
+  }, null);
+  var _b = currentPane || {},
+    id = _b.id,
+    paneProps = __rest(_b, ["id"]);
+  return /*#__PURE__*/React__default.createElement("div", __assign({}, props, {
+    ref: innerRef,
+    role: "menutabpanes",
+    className: classNames(null, [className])
+  }), currentPane && /*#__PURE__*/React__default.createElement(TabsPanesPane, __assign({}, paneProps)));
+};
+
+export { TabsPanes as default };

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

@@ -0,0 +1,8 @@
+import type { RefObject } from "react";
+import type { PaneProps } from "./Pane/index.props";
+export type TabsPanesProps = {
+    activePane?: string;
+    panes: PaneProps[];
+    innerRef?: RefObject<HTMLDivElement>;
+    className?: string;
+};

package/esm/index.d.ts

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

package/esm/index.js

@@ -22,6 +22,7 @@ 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 { default as TabsPanes } from './TabsPanes/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/index.d.ts

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

package/index.js

@@ -24,13 +24,14 @@ 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('./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');
+var index$o = require('./TabsPanes/index.js');
+var index$p = require('./Theme/index.js');
+var index$q = require('./Tooltip/index.js');
+var index$r = require('./TimeSelect/index.js');
+var index$s = require('./Typography/index.js');
+var index$t = require('./hooks/useMediaSizes/index.js');
+var index$u = require('./hooks/useOnClickOutside/index.js');
+var index$v = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -75,13 +76,14 @@ exports.SkeletonRect = index$l.SkeletonRect;
 exports.SkeletonText = index$l.SkeletonText;
 exports.Switch = index$m.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.TabsPanes = index$o.default;
+exports.THEMES = index$p.THEMES;
+exports.Tooltip = index$q.default;
+exports.TimeSelect = index$r.default;
+exports.Typography = index$s.default;
+exports.useMediaSizes = index$t.default;
+exports.useOnClickOutside = index$u.default;
+exports.useScrollLock = index$v.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;

package/package.json

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