@dreamcommerce/aurora 2.7.0-3 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3,6 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
+ var classnames = require('classnames');
6
7
  var css_classes = require('../css_classes.js');
7
8
  var context = require('../context.js');
8
9
  var main_module = require('../../../css/tabs/main.module.less.js');
@@ -10,16 +11,20 @@ var main_module = require('../../../css/tabs/main.module.less.js');
10
11
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
11
12
 
12
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
+ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
13
15
 
14
- const Tabs = ({ initialActiveTabId, children, onChange }) => {
16
+ const Tabs = ({ initialActiveTabId, secondary, children, onChange }) => {
15
17
  const { setActiveId, activeId } = React.useContext(context.TabsContext);
18
+ const tabsClasses = classnames__default['default'](main_module['default'][css_classes['default'].tabs], {
19
+ [main_module['default'][css_classes['default'].tabsSecondary]]: secondary
20
+ });
16
21
  React.useEffect(() => {
17
22
  setActiveId(initialActiveTabId);
18
23
  }, [setActiveId, initialActiveTabId]);
19
24
  React.useEffect(() => {
20
25
  activeId && (onChange === null || onChange === void 0 ? void 0 : onChange(activeId));
21
26
  }, [activeId]);
22
- return React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].tabs] }, children);
27
+ return React__default['default'].createElement("div", { className: tabsClasses }, children);
23
28
  };
24
29
 
25
30
  exports.default = Tabs;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var CSS_CLASSES = {
6
6
  tabs: 'tabs',
7
+ tabsSecondary: 'tabs_secondary',
7
8
  tabsItemList: 'tabs__item-list',
8
9
  tabsItem: 'tabs__item',
9
10
  tabsItemActive: 'tabs__item_active',
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
6
6
 
7
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tabs__item-list__2R9BF {\n display: flex;\n gap: 8px;\n list-style: none;\n}\n.main-module_tabs__item__2peSO {\n display: flex;\n align-items: center;\n padding: 8px 12px;\n background-color: #f3f4f8;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n font-weight: 600;\n color: #5c657e;\n text-transform: uppercase;\n cursor: pointer;\n}\n.main-module_tabs__item_active__1LSjR {\n position: relative;\n margin-top: -2px;\n margin-bottom: -1px;\n background-color: #ffffff;\n border-top: 2px solid #3c83ec;\n border-bottom: 1px solid #ffffff;\n color: #2d3748;\n box-shadow: 0 0 9px 0 rgba(92, 101, 126, 0.2);\n -webkit-clip-path: inset(-9px -9px 0 -9px);\n clip-path: inset(-9px -9px 0 -9px);\n z-index: 1;\n}\n.main-module_tabs__panel-list__3Ob_w {\n margin: 0 -16px;\n padding: 16px 16px 0 16px;\n background-color: #ffffff;\n box-shadow: 0 -1px 5px 0 rgba(92, 101, 126, 0.1);\n -webkit-clip-path: inset(-5px 0 0 0);\n clip-path: inset(-5px 0 0 0);\n}\n";
8
- var cssClasses = {"tabs__item-list":"main-module_tabs__item-list__2R9BF","tabs__item":"main-module_tabs__item__2peSO","tabs__item_active":"main-module_tabs__item_active__1LSjR","tabs__panel-list":"main-module_tabs__panel-list__3Ob_w"};
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tabs__item-list__2R9BF {\n display: flex;\n list-style: none;\n}\n.main-module_tabs__item-list__2R9BF:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item-list__2R9BF) {\n gap: 8px;\n}\n.main-module_tabs__item__2peSO {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.main-module_tabs__item__2peSO:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO) {\n padding: 8px 12px;\n background-color: #f3f4f8;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n font-weight: 600;\n color: #5c657e;\n text-transform: uppercase;\n}\n.main-module_tabs__item_active__1LSjR {\n position: relative;\n z-index: 1;\n}\n.main-module_tabs__item_active__1LSjR:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR) {\n margin-top: -2px;\n margin-bottom: -1px;\n background-color: #ffffff;\n border-top: 2px solid #3c83ec;\n border-bottom: 1px solid #ffffff;\n color: #2d3748;\n box-shadow: 0 0 9px 0 rgba(92, 101, 126, 0.2);\n -webkit-clip-path: inset(-9px -9px 0 -9px);\n clip-path: inset(-9px -9px 0 -9px);\n}\n.main-module_tabs__panel-list__3Ob_w:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__panel-list__3Ob_w) {\n margin: 0 -16px;\n padding: 16px 16px 0 16px;\n background-color: #ffffff;\n box-shadow: 0 -1px 5px 0 rgba(92, 101, 126, 0.1);\n -webkit-clip-path: inset(-5px 0 0 0);\n clip-path: inset(-5px 0 0 0);\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item-list__2R9BF {\n border: 1px solid #f3f4f8;\n border-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO {\n position: relative;\n flex: 1;\n justify-content: center;\n padding: 10px;\n background-color: transparent;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO:last-child) {\n border-right: 1px solid #f3f4f8;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR {\n background-color: #3c83ec;\n color: #ffffff;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR > * {\n fill: #ffffff;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR:first-child {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR:last-child {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR::after {\n content: '';\n position: absolute;\n bottom: -8px;\n width: 0;\n height: 0;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-top: 8px solid #3c83ec;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__panel-list__3Ob_w {\n margin-top: 8px;\n}\n";
8
+ var cssClasses = {"tabs__item-list":"main-module_tabs__item-list__2R9BF","tabs_secondary":"main-module_tabs_secondary__1QmBJ","tabs__item":"main-module_tabs__item__2peSO","tabs__item_active":"main-module_tabs__item_active__1LSjR","tabs__panel-list":"main-module_tabs__panel-list__3Ob_w"};
9
9
  styleInject_es['default'](css_248z);
10
10
 
11
11
  exports.default = cssClasses;
@@ -1,17 +1,21 @@
1
1
  import React, { useContext, useEffect } from 'react';
2
+ import classnames from 'classnames';
2
3
  import CSS_CLASSES from '../css_classes.js';
3
4
  import { TabsContext } from '../context.js';
4
5
  import cssClasses from '../../../css/tabs/main.module.less.js';
5
6
 
6
- const Tabs = ({ initialActiveTabId, children, onChange }) => {
7
+ const Tabs = ({ initialActiveTabId, secondary, children, onChange }) => {
7
8
  const { setActiveId, activeId } = useContext(TabsContext);
9
+ const tabsClasses = classnames(cssClasses[CSS_CLASSES.tabs], {
10
+ [cssClasses[CSS_CLASSES.tabsSecondary]]: secondary
11
+ });
8
12
  useEffect(() => {
9
13
  setActiveId(initialActiveTabId);
10
14
  }, [setActiveId, initialActiveTabId]);
11
15
  useEffect(() => {
12
16
  activeId && (onChange === null || onChange === void 0 ? void 0 : onChange(activeId));
13
17
  }, [activeId]);
14
- return React.createElement("div", { className: cssClasses[CSS_CLASSES.tabs] }, children);
18
+ return React.createElement("div", { className: tabsClasses }, children);
15
19
  };
16
20
 
17
21
  export default Tabs;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,5 +1,6 @@
1
1
  declare const _default: {
2
2
  tabs: string;
3
+ tabsSecondary: string;
3
4
  tabsItemList: string;
4
5
  tabsItem: string;
5
6
  tabsItemActive: string;
@@ -1,5 +1,6 @@
1
1
  var CSS_CLASSES = {
2
2
  tabs: 'tabs',
3
+ tabsSecondary: 'tabs_secondary',
3
4
  tabsItemList: 'tabs__item-list',
4
5
  tabsItem: 'tabs__item',
5
6
  tabsItemActive: 'tabs__item_active',
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -26,5 +26,6 @@ export interface ITabsWrapperProps {
26
26
  export interface ITabsProps {
27
27
  children: ReactNode;
28
28
  initialActiveTabId: string;
29
+ secondary?: boolean;
29
30
  onChange?: (id: string) => void;
30
31
  }
@@ -1,7 +1,7 @@
1
1
  import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tabs__item-list__2R9BF {\n display: flex;\n gap: 8px;\n list-style: none;\n}\n.main-module_tabs__item__2peSO {\n display: flex;\n align-items: center;\n padding: 8px 12px;\n background-color: #f3f4f8;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n font-weight: 600;\n color: #5c657e;\n text-transform: uppercase;\n cursor: pointer;\n}\n.main-module_tabs__item_active__1LSjR {\n position: relative;\n margin-top: -2px;\n margin-bottom: -1px;\n background-color: #ffffff;\n border-top: 2px solid #3c83ec;\n border-bottom: 1px solid #ffffff;\n color: #2d3748;\n box-shadow: 0 0 9px 0 rgba(92, 101, 126, 0.2);\n -webkit-clip-path: inset(-9px -9px 0 -9px);\n clip-path: inset(-9px -9px 0 -9px);\n z-index: 1;\n}\n.main-module_tabs__panel-list__3Ob_w {\n margin: 0 -16px;\n padding: 16px 16px 0 16px;\n background-color: #ffffff;\n box-shadow: 0 -1px 5px 0 rgba(92, 101, 126, 0.1);\n -webkit-clip-path: inset(-5px 0 0 0);\n clip-path: inset(-5px 0 0 0);\n}\n";
4
- var cssClasses = {"tabs__item-list":"main-module_tabs__item-list__2R9BF","tabs__item":"main-module_tabs__item__2peSO","tabs__item_active":"main-module_tabs__item_active__1LSjR","tabs__panel-list":"main-module_tabs__panel-list__3Ob_w"};
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_tabs__item-list__2R9BF {\n display: flex;\n list-style: none;\n}\n.main-module_tabs__item-list__2R9BF:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item-list__2R9BF) {\n gap: 8px;\n}\n.main-module_tabs__item__2peSO {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.main-module_tabs__item__2peSO:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO) {\n padding: 8px 12px;\n background-color: #f3f4f8;\n border-top-left-radius: 3px;\n border-top-right-radius: 3px;\n font-weight: 600;\n color: #5c657e;\n text-transform: uppercase;\n}\n.main-module_tabs__item_active__1LSjR {\n position: relative;\n z-index: 1;\n}\n.main-module_tabs__item_active__1LSjR:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR) {\n margin-top: -2px;\n margin-bottom: -1px;\n background-color: #ffffff;\n border-top: 2px solid #3c83ec;\n border-bottom: 1px solid #ffffff;\n color: #2d3748;\n box-shadow: 0 0 9px 0 rgba(92, 101, 126, 0.2);\n -webkit-clip-path: inset(-9px -9px 0 -9px);\n clip-path: inset(-9px -9px 0 -9px);\n}\n.main-module_tabs__panel-list__3Ob_w:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__panel-list__3Ob_w) {\n margin: 0 -16px;\n padding: 16px 16px 0 16px;\n background-color: #ffffff;\n box-shadow: 0 -1px 5px 0 rgba(92, 101, 126, 0.1);\n -webkit-clip-path: inset(-5px 0 0 0);\n clip-path: inset(-5px 0 0 0);\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item-list__2R9BF {\n border: 1px solid #f3f4f8;\n border-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO {\n position: relative;\n flex: 1;\n justify-content: center;\n padding: 10px;\n background-color: transparent;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO:not(.main-module_tabs_secondary__1QmBJ .main-module_tabs__item__2peSO:last-child) {\n border-right: 1px solid #f3f4f8;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR {\n background-color: #3c83ec;\n color: #ffffff;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR > * {\n fill: #ffffff;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR:first-child {\n border-top-left-radius: 2px;\n border-bottom-left-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR:last-child {\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__item_active__1LSjR::after {\n content: '';\n position: absolute;\n bottom: -8px;\n width: 0;\n height: 0;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-top: 8px solid #3c83ec;\n}\n.main-module_tabs_secondary__1QmBJ .main-module_tabs__panel-list__3Ob_w {\n margin-top: 8px;\n}\n";
4
+ var cssClasses = {"tabs__item-list":"main-module_tabs__item-list__2R9BF","tabs_secondary":"main-module_tabs_secondary__1QmBJ","tabs__item":"main-module_tabs__item__2peSO","tabs__item_active":"main-module_tabs__item_active__1LSjR","tabs__panel-list":"main-module_tabs__panel-list__3Ob_w"};
5
5
  styleInject(css_248z);
6
6
 
7
7
  export default cssClasses;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "2.7.0-3",
5
+ "version": "2.7.1",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",