glints-aries 4.0.387 → 4.0.388

package/es/@next/Tabs/Tab.d.ts

@@ -3,6 +3,7 @@ export declare type TabProps = {
     content: React.ReactNode;
     id?: string;
     selected?: boolean;
+    disabled?: boolean;
     onSelect: () => void;
 };
-export declare const Tab: ({ content, id, selected, onSelect }: TabProps) => JSX.Element;
+export declare const Tab: ({ content, id, selected, disabled, onSelect, }: TabProps) => JSX.Element;

package/es/@next/Tabs/Tab.js

@@ -5,9 +5,12 @@ export var Tab = function Tab(_ref) {
   var content = _ref.content,
     id = _ref.id,
     selected = _ref.selected,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onSelect = _ref.onSelect;
   var tabRef = useRef(null);
   var handleClick = function handleClick(event) {
+    if (disabled) return;
     event.preventDefault();
     tabRef.current.scrollIntoView({
       behavior: 'smooth'
@@ -17,6 +20,7 @@ export var Tab = function Tab(_ref) {
   return /*#__PURE__*/React.createElement(StyledTabButton, {
     ref: tabRef,
     "data-selected": selected,
+    "data-disabled": disabled,
     id: id,
     onClick: handleClick
   }, /*#__PURE__*/React.createElement(StyledSpan, null, /*#__PURE__*/React.createElement(Typography, {

package/es/@next/Tabs/TabStyle.js

@@ -25,4 +25,4 @@ export var StyledSpan = styled.span.withConfig({
 export var StyledTabButton = styled.button.withConfig({
   displayName: "TabStyle__StyledTabButton",
   componentId: "sc-3xj4eu-5"
-})(["border:0;background:transparent;height:56px;cursor:pointer;color:", ";width:100%;padding:0 ", ";&:hover{color:", ";}&:hover span::before{background:", ";}&[data-selected='true']{color:", ";}&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], Neutral.B40, space4, Neutral.B18, Blue.S100, Blue.S99, Blue.S99, Breakpoints.large);
+})(["border:0;background:transparent;height:56px;cursor:default;color:", ";width:100%;padding:0 ", ";&[data-disabled='false']{cursor:pointer;&:hover{color:", ";}&:hover span::before{background:", ";}}&&&[data-selected='true']{color:", ";}&&&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], Neutral.B40, space4, Neutral.B18, Blue.S100, Blue.S99, Blue.S99, Breakpoints.large);

package/es/@next/Tabs/Tabs.d.ts

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export declare type TabModel = {
     /** Id of the tab, a random id will nbe assigned if empty */
     id?: string;
     /** Content of the type header */
     content: React.ReactNode;
+    disabled?: boolean;
+    /** The contentWrapper will be a wrapper component for the content */
+    contentWrapper?: (children: ReactNode) => ReactNode;
 };
 export declare type TabsProps = {
     /** TabModel has 2 properties

package/es/@next/Tabs/Tabs.js

@@ -77,18 +77,20 @@ export var Tabs = /*#__PURE__*/React.forwardRef(function Tabs(_ref, ref) {
   };
   var renderTabs = tabs.map(function (tab, index) {
     var tabId = tab.id || nextId();
-    return /*#__PURE__*/React.createElement(StyledLi, {
-      key: tabId + "-" + index,
-      className: "tab-item"
-    }, /*#__PURE__*/React.createElement(Tab, {
+    var tabContent = /*#__PURE__*/React.createElement(Tab, {
       id: tabId,
       key: "tab-" + tabId + "-" + index,
       content: tab.content,
       onSelect: function onSelect() {
         return handleSelectedIndexChanged(index);
       },
-      selected: index === selectedTabIndex
-    }));
+      selected: index === selectedTabIndex,
+      disabled: tab.disabled
+    });
+    return /*#__PURE__*/React.createElement(StyledLi, {
+      key: tabId + "-" + index,
+      className: "tab-item"
+    }, tab.contentWrapper ? tab.contentWrapper(tabContent) : tabContent);
   });
   return /*#__PURE__*/React.createElement(StyledTabsContainer, {
     ref: ref,

package/es/@next/Tabs/Tabs.stories.d.ts

@@ -3,3 +3,5 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const Overflow: any;
+export declare const Disabled: any;
+export declare const CustomWrapper: any;

package/lib/@next/Tabs/Tab.d.ts

@@ -3,6 +3,7 @@ export declare type TabProps = {
     content: React.ReactNode;
     id?: string;
     selected?: boolean;
+    disabled?: boolean;
     onSelect: () => void;
 };
-export declare const Tab: ({ content, id, selected, onSelect }: TabProps) => JSX.Element;
+export declare const Tab: ({ content, id, selected, disabled, onSelect, }: TabProps) => JSX.Element;

package/lib/@next/Tabs/Tab.js

@@ -11,9 +11,12 @@ var Tab = function Tab(_ref) {
   var content = _ref.content,
     id = _ref.id,
     selected = _ref.selected,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onSelect = _ref.onSelect;
   var tabRef = (0, _react.useRef)(null);
   var handleClick = function handleClick(event) {
+    if (disabled) return;
     event.preventDefault();
     tabRef.current.scrollIntoView({
       behavior: 'smooth'
@@ -23,6 +26,7 @@ var Tab = function Tab(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabButton, {
     ref: tabRef,
     "data-selected": selected,
+    "data-disabled": disabled,
     id: id,
     onClick: handleClick
   }, /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledSpan, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {

package/lib/@next/Tabs/TabStyle.js

@@ -37,5 +37,5 @@ exports.StyledSpan = StyledSpan;
 var StyledTabButton = _styledComponents["default"].button.withConfig({
   displayName: "TabStyle__StyledTabButton",
   componentId: "sc-3xj4eu-5"
-})(["border:0;background:transparent;height:56px;cursor:pointer;color:", ";width:100%;padding:0 ", ";&:hover{color:", ";}&:hover span::before{background:", ";}&[data-selected='true']{color:", ";}&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], _colors.Neutral.B40, _spacing.space4, _colors.Neutral.B18, _colors.Blue.S100, _colors.Blue.S99, _colors.Blue.S99, Breakpoints.large);
+})(["border:0;background:transparent;height:56px;cursor:default;color:", ";width:100%;padding:0 ", ";&[data-disabled='false']{cursor:pointer;&:hover{color:", ";}&:hover span::before{background:", ";}}&&&[data-selected='true']{color:", ";}&&&[data-selected='true'] > span::before{background:", ";}@media (max-width:", "){height:48px;}"], _colors.Neutral.B40, _spacing.space4, _colors.Neutral.B18, _colors.Blue.S100, _colors.Blue.S99, _colors.Blue.S99, Breakpoints.large);
 exports.StyledTabButton = StyledTabButton;

package/lib/@next/Tabs/Tabs.d.ts

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export declare type TabModel = {
     /** Id of the tab, a random id will nbe assigned if empty */
     id?: string;
     /** Content of the type header */
     content: React.ReactNode;
+    disabled?: boolean;
+    /** The contentWrapper will be a wrapper component for the content */
+    contentWrapper?: (children: ReactNode) => ReactNode;
 };
 export declare type TabsProps = {
     /** TabModel has 2 properties

package/lib/@next/Tabs/Tabs.js

@@ -84,18 +84,20 @@ var Tabs = /*#__PURE__*/_react["default"].forwardRef(function Tabs(_ref, ref) {
   };
   var renderTabs = tabs.map(function (tab, index) {
     var tabId = tab.id || (0, _reactIdGenerator["default"])();
-    return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledLi, {
-      key: tabId + "-" + index,
-      className: "tab-item"
-    }, /*#__PURE__*/_react["default"].createElement(_Tab.Tab, {
+    var tabContent = /*#__PURE__*/_react["default"].createElement(_Tab.Tab, {
       id: tabId,
       key: "tab-" + tabId + "-" + index,
       content: tab.content,
       onSelect: function onSelect() {
         return handleSelectedIndexChanged(index);
       },
-      selected: index === selectedTabIndex
-    }));
+      selected: index === selectedTabIndex,
+      disabled: tab.disabled
+    });
+    return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledLi, {
+      key: tabId + "-" + index,
+      className: "tab-item"
+    }, tab.contentWrapper ? tab.contentWrapper(tabContent) : tabContent);
   });
   return /*#__PURE__*/_react["default"].createElement(_TabStyle.StyledTabsContainer, {
     ref: ref,

package/lib/@next/Tabs/Tabs.stories.d.ts

@@ -3,3 +3,5 @@ declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const Interactive: any;
 export declare const Overflow: any;
+export declare const Disabled: any;
+export declare const CustomWrapper: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.387",
+  "version": "4.0.388",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",