glints-aries 4.0.386 → 4.0.388

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

@@ -8,6 +8,10 @@ export declare type AlertProps = {
     /** Duration of alert in miliseconds */
     duration?: number;
     zIndex?: number;
+    position?: {
+        top?: string;
+        right?: string;
+    };
     onDismissed?: () => void;
 };
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/es/@next/Alert/Alert.js

@@ -17,6 +17,7 @@ export var Alert = /*#__PURE__*/React.forwardRef(function Alert(_ref, ref) {
     duration = _ref$duration === void 0 ? 4000 : _ref$duration,
     children = _ref.children,
     zIndex = _ref.zIndex,
+    position = _ref.position,
     onDismissed = _ref.onDismissed;
   useEffect(function () {
     if (!show) {
@@ -43,7 +44,8 @@ export var Alert = /*#__PURE__*/React.forwardRef(function Alert(_ref, ref) {
     role: "alert",
     "data-titled": hasTitle,
     "data-status": status || 'info',
-    zIndex: zIndex
+    zIndex: zIndex,
+    position: position
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Icon, {
     name: iconName
   })), /*#__PURE__*/React.createElement("div", null, hasTitle && /*#__PURE__*/React.createElement(StyledAlertContentColumn, null, /*#__PURE__*/React.createElement(Typography, {

package/es/@next/Alert/AlertStyle.d.ts

@@ -1,5 +1,9 @@
 export declare const StyledAlertContainer: import("styled-components").StyledComponent<"div", any, {
     zIndex?: number;
+    position?: {
+        top?: string;
+        right?: string;
+    };
 }, never>;
 export declare const StyledAlertCloseIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAlertContentColumn: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/@next/Alert/AlertStyle.js

@@ -6,7 +6,13 @@ import { space12, space8 } from '../utilities/spacing';
 export var StyledAlertContainer = styled.div.withConfig({
   displayName: "AlertStyle__StyledAlertContainer",
   componentId: "sc-1e5i2kj-0"
-})(["position:fixed;top:90px;right:24px;display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], space12, space8, borderRadius4, function (props) {
+})(["position:fixed;top:", ";right:", ";display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], function (props) {
+  var _props$position;
+  return (_props$position = props.position) != null && _props$position.top ? props.position.top : '90px';
+}, function (props) {
+  var _props$position2;
+  return (_props$position2 = props.position) != null && _props$position2.right ? props.position.right : '24px';
+}, space12, space8, borderRadius4, function (props) {
   return props.zIndex ? props.zIndex : 100;
 }, Neutral.B18, Green.B89, Green.B61, Blue.S08, Blue.S99, Orange.S21, Orange.S86, Red.B100, Red.B93, Breakpoints.large, space8);
 export var StyledAlertCloseIconContainer = styled.div.withConfig({

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/Alert/Alert.d.ts

@@ -8,6 +8,10 @@ export declare type AlertProps = {
     /** Duration of alert in miliseconds */
     duration?: number;
     zIndex?: number;
+    position?: {
+        top?: string;
+        right?: string;
+    };
     onDismissed?: () => void;
 };
 export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;

package/lib/@next/Alert/Alert.js

@@ -23,6 +23,7 @@ var Alert = /*#__PURE__*/_react["default"].forwardRef(function Alert(_ref, ref)
     duration = _ref$duration === void 0 ? 4000 : _ref$duration,
     children = _ref.children,
     zIndex = _ref.zIndex,
+    position = _ref.position,
     onDismissed = _ref.onDismissed;
   (0, _react.useEffect)(function () {
     if (!show) {
@@ -49,7 +50,8 @@ var Alert = /*#__PURE__*/_react["default"].forwardRef(function Alert(_ref, ref)
     role: "alert",
     "data-titled": hasTitle,
     "data-status": status || 'info',
-    zIndex: zIndex
+    zIndex: zIndex,
+    position: position
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Icon.Icon, {
     name: iconName
   })), /*#__PURE__*/_react["default"].createElement("div", null, hasTitle && /*#__PURE__*/_react["default"].createElement(_AlertStyle.StyledAlertContentColumn, null, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {

package/lib/@next/Alert/AlertStyle.d.ts

@@ -1,5 +1,9 @@
 export declare const StyledAlertContainer: import("styled-components").StyledComponent<"div", any, {
     zIndex?: number;
+    position?: {
+        top?: string;
+        right?: string;
+    };
 }, never>;
 export declare const StyledAlertCloseIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledAlertContentColumn: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/@next/Alert/AlertStyle.js

@@ -13,7 +13,13 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var StyledAlertContainer = _styledComponents["default"].div.withConfig({
   displayName: "AlertStyle__StyledAlertContainer",
   componentId: "sc-1e5i2kj-0"
-})(["position:fixed;top:90px;right:24px;display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], _spacing.space12, _spacing.space8, _borderRadius.borderRadius4, function (props) {
+})(["position:fixed;top:", ";right:", ";display:flex;padding:", ";gap:", ";max-width:640px;width:fit-content;border-radius:", ";box-shadow:0px 8px 20px rgba(71,71,71,0.2),0px 3px 6px -3px rgba(71,71,71,0.08);animation:slide-from-right 400ms cubic-bezier(0.35,0.8,1,0.86);z-index:", ";color:", ";svg{display:block;height:24px;width:24px;}&[data-titled='true'] svg{margin-top:3px;}&[data-status='success']{background:", ";}&[data-status='success'] svg{fill:", ";}&[data-status='info']{background:", ";}&[data-status='info'] svg{fill:", ";}&[data-status='warning']{background:", ";}&[data-status='warning'] svg{fill:", ";}&[data-status='error']{background:", ";}&[data-status='error'] svg{fill:", ";}@media (max-width:", "){top:60px;&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}padding:", ";min-height:37px;}@media (max-width:480px){&[data-titled='true']{margin-top:-1px;}&[data-titled='true'] svg{margin-top:0;}max-width:calc(100vw - 48px);}@keyframes slide-from-right{0%{transform:translateX(50px);}50%{transform:translateX(0px);}75%{transform:translateX(-10px);}100%{transform:translateX(0px);}}"], function (props) {
+  var _props$position;
+  return (_props$position = props.position) != null && _props$position.top ? props.position.top : '90px';
+}, function (props) {
+  var _props$position2;
+  return (_props$position2 = props.position) != null && _props$position2.right ? props.position.right : '24px';
+}, _spacing.space12, _spacing.space8, _borderRadius.borderRadius4, function (props) {
   return props.zIndex ? props.zIndex : 100;
 }, _colors.Neutral.B18, _colors.Green.B89, _colors.Green.B61, _colors.Blue.S08, _colors.Blue.S99, _colors.Orange.S21, _colors.Orange.S86, _colors.Red.B100, _colors.Red.B93, Breakpoints.large, _spacing.space8);
 exports.StyledAlertContainer = StyledAlertContainer;

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.386",
+  "version": "4.0.388",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",