@majoo-ui/react 1.53.1 → 1.53.2

package/index.esm.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useCallback, useReducer } from 'react';
+import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, forwardRef, cloneElement, useLayoutEffect, useCallback, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronLgLeftOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -3922,7 +3922,10 @@ const ButtonTableMenu = {
   }
 };
 const StyledIcon$2 = styled('div', {
-  verticalAlign: 'middle'
+  verticalAlign: 'middle',
+  '& svg': {
+    verticalAlign: 'middle'
+  }
 });
 const StyledIconLeft$4 = styled('div', {
   marginRight: '$spacing-03',
@@ -11740,7 +11743,15 @@ const StyledList = styled(TabsPrimitive.List, {
   flexShrink: 0,
   display: 'flex',
   borderBottom: '$medium',
-  boxShadow: '$medium'
+  boxShadow: '$medium',
+  overflowX: 'auto',
+  overflowY: 'hidden',
+  scrollBehavior: 'smooth',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  }
 });
 const StyledTrigger$1 = styled(TabsPrimitive.Trigger, {
   all: 'unset',
@@ -11807,6 +11818,47 @@ const StyledContent$5 = styled(TabsPrimitive.Content, {
   outline: 'none',
   boxShadow: '$medium'
 });
+const ScrollButton = styled(Button$3, {
+  width: '28px',
+  '&:hover': {
+    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.05)'
+  },
+  variants: {
+    position: {
+      left: {
+        '& svg': {
+          marginTop: '-1px',
+          marginLeft: '-2px'
+        }
+      },
+      right: {
+        '& svg': {
+          marginTop: 0,
+          marginLeft: 0
+        }
+      }
+    }
+  }
+});
+const ScrollButtonContainer = styled(Box, {
+  size: '28px',
+  position: 'absolute',
+  zIndex: '$sticky',
+  borderRadius: '$md',
+  top: '8px',
+  variants: {
+    position: {
+      left: {
+        left: '8px',
+        boxShadow: '10px 0 8px 2px rgba(255,255,255,1), -6px 0 8px 2px rgba(255,255,255,1)'
+      },
+      right: {
+        right: '8px',
+        boxShadow: '6px 0 8px 2px rgba(255,255,255,1), -10px 0 8px 2px rgba(255,255,255,1)'
+      }
+    }
+  }
+});
 const Tabs$1 = _ref => {
   let {
     children
@@ -11822,7 +11874,7 @@ const Tabs$1 = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 108,
+      lineNumber: 162,
       columnNumber: 5
     }
   }), addPropsToChildren(children, {
@@ -11836,16 +11888,94 @@ const TabsList$1 = _ref2 => {
   } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
-  return /*#__PURE__*/React__default.createElement(StyledList, _extends({}, props, {
+  const [listContainerScrollPosition, setlistContainerScrollPosition] = useState(0);
+  const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
+  const listContainerRef = useRef();
+  useLayoutEffect(() => {
+    if (listContainerRef && listContainerRef.current) {
+      setScrollAreaWidth(listContainerRef.current.scrollWidth - listContainerRef.current.clientWidth);
+    }
+  }, [listContainerRef, activeTabs]);
+  return /*#__PURE__*/React__default.createElement(Box, {
+    css: {
+      position: 'relative'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 121,
-      columnNumber: 10
+      lineNumber: 184,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledList, _extends({}, props, {
+    ref: listContainerRef,
+    onScroll: e => setlistContainerScrollPosition(e.target.scrollLeft),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 185,
+      columnNumber: 7
     }
   }), addPropsToChildren(children, {
     activeTabs
-  }));
+  })), listContainerScrollPosition > 10 && /*#__PURE__*/React__default.createElement(ScrollButtonContainer, {
+    position: "left",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 189,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(ScrollButton, {
+    position: "left",
+    type: "button",
+    buttonType: "ghost",
+    size: "xs",
+    icon: true,
+    onClick: () => listContainerRef.current.scrollLeft -= scrollAreaWidth / 2,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 190,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(ChevronLgLeftOutline, {
+    color: colors$4.iconGreen,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 198,
+      columnNumber: 13
+    }
+  }))), listContainerScrollPosition < scrollAreaWidth - 10 && /*#__PURE__*/React__default.createElement(ScrollButtonContainer, {
+    position: "right",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 203,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(ScrollButton, {
+    position: "right",
+    type: "button",
+    buttonType: "ghost",
+    size: "xs",
+    icon: true,
+    onClick: () => listContainerRef.current.scrollLeft += scrollAreaWidth / 2,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 204,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(ChevronLgRightOutline, {
+    color: colors$4.iconGreen,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 212,
+      columnNumber: 13
+    }
+  }))));
 };
 const TabsTrigger$1 = _ref3 => {
   let {
@@ -11863,7 +11993,7 @@ const TabsTrigger$1 = _ref3 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 127,
+      lineNumber: 223,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -11876,14 +12006,14 @@ const TabsTrigger$1 = _ref3 => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 131,
+        lineNumber: 227,
         columnNumber: 11
       }
     }, wrappedChildren),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 128,
+      lineNumber: 224,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11895,7 +12025,7 @@ const TabsTrigger$1 = _ref3 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 136,
+      lineNumber: 232,
       columnNumber: 9
     }
   }, icon && /*#__PURE__*/React__default.cloneElement(icon, {
@@ -11909,7 +12039,7 @@ const TabsContent$1 = _ref4 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$p,
-      lineNumber: 154,
+      lineNumber: 250,
       columnNumber: 58
     }
   }));
@@ -23668,12 +23798,12 @@ const Device = props => {
   };
 
   React.useEffect(() => {
-    if (props.withComponent) {
+    if (props.withComponent || (props === null || props === void 0 ? void 0 : props.variant)) {
       setTimeout(() => {
         setRender(prev => prev + 1);
       }, 100);
     }
-  }, [props.withComponent]);
+  }, [props.withComponent, props === null || props === void 0 ? void 0 : props.variant]);
 
   const renderVariant = variant => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/index.umd.js

@@ -4000,7 +4000,10 @@
     }
   };
   var StyledIcon$2 = styled('div', {
-    verticalAlign: 'middle'
+    verticalAlign: 'middle',
+    '& svg': {
+      verticalAlign: 'middle'
+    }
   });
   var StyledIconLeft$4 = styled('div', {
     marginRight: '$spacing-03',
@@ -11915,7 +11918,15 @@
     flexShrink: 0,
     display: 'flex',
     borderBottom: '$medium',
-    boxShadow: '$medium'
+    boxShadow: '$medium',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    scrollBehavior: 'smooth',
+    '-ms-overflow-style': 'none',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
   });
   const StyledTrigger$1 = styled(TabsPrimitive__namespace.Trigger, {
     all: 'unset',
@@ -11982,6 +11993,47 @@
     outline: 'none',
     boxShadow: '$medium'
   });
+  const ScrollButton = styled(Button$3, {
+    width: '28px',
+    '&:hover': {
+      boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.05)'
+    },
+    variants: {
+      position: {
+        left: {
+          '& svg': {
+            marginTop: '-1px',
+            marginLeft: '-2px'
+          }
+        },
+        right: {
+          '& svg': {
+            marginTop: 0,
+            marginLeft: 0
+          }
+        }
+      }
+    }
+  });
+  const ScrollButtonContainer = styled(Box, {
+    size: '28px',
+    position: 'absolute',
+    zIndex: '$sticky',
+    borderRadius: '$md',
+    top: '8px',
+    variants: {
+      position: {
+        left: {
+          left: '8px',
+          boxShadow: '10px 0 8px 2px rgba(255,255,255,1), -6px 0 8px 2px rgba(255,255,255,1)'
+        },
+        right: {
+          right: '8px',
+          boxShadow: '6px 0 8px 2px rgba(255,255,255,1), -10px 0 8px 2px rgba(255,255,255,1)'
+        }
+      }
+    }
+  });
   const Tabs$1 = _ref => {
     let {
       children
@@ -11997,7 +12049,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 108,
+        lineNumber: 162,
         columnNumber: 5
       }
     }), addPropsToChildren(children, {
@@ -12011,16 +12063,94 @@
     } = _ref2,
         props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
+    const [listContainerScrollPosition, setlistContainerScrollPosition] = React.useState(0);
+    const [scrollAreaWidth, setScrollAreaWidth] = React.useState(0);
+    const listContainerRef = React.useRef();
+    React.useLayoutEffect(() => {
+      if (listContainerRef && listContainerRef.current) {
+        setScrollAreaWidth(listContainerRef.current.scrollWidth - listContainerRef.current.clientWidth);
+      }
+    }, [listContainerRef, activeTabs]);
+    return /*#__PURE__*/React__default["default"].createElement(Box, {
+      css: {
+        position: 'relative'
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 121,
-        columnNumber: 10
+        lineNumber: 184,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({}, props, {
+      ref: listContainerRef,
+      onScroll: e => setlistContainerScrollPosition(e.target.scrollLeft),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 185,
+        columnNumber: 7
       }
     }), addPropsToChildren(children, {
       activeTabs
-    }));
+    })), listContainerScrollPosition > 10 && /*#__PURE__*/React__default["default"].createElement(ScrollButtonContainer, {
+      position: "left",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 189,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ScrollButton, {
+      position: "left",
+      type: "button",
+      buttonType: "ghost",
+      size: "xs",
+      icon: true,
+      onClick: () => listContainerRef.current.scrollLeft -= scrollAreaWidth / 2,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 190,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgLeftOutline, {
+      color: colors$4.iconGreen,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 198,
+        columnNumber: 13
+      }
+    }))), listContainerScrollPosition < scrollAreaWidth - 10 && /*#__PURE__*/React__default["default"].createElement(ScrollButtonContainer, {
+      position: "right",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 203,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(ScrollButton, {
+      position: "right",
+      type: "button",
+      buttonType: "ghost",
+      size: "xs",
+      icon: true,
+      onClick: () => listContainerRef.current.scrollLeft += scrollAreaWidth / 2,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 204,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronLgRightOutline, {
+      color: colors$4.iconGreen,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 212,
+        columnNumber: 13
+      }
+    }))));
   };
   const TabsTrigger$1 = _ref3 => {
     let {
@@ -12038,7 +12168,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 127,
+        lineNumber: 223,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -12051,14 +12181,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$p,
-          lineNumber: 131,
+          lineNumber: 227,
           columnNumber: 11
         }
       }, wrappedChildren),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 128,
+        lineNumber: 224,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -12070,7 +12200,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 136,
+        lineNumber: 232,
         columnNumber: 9
       }
     }, icon && /*#__PURE__*/React__default["default"].cloneElement(icon, {
@@ -12084,7 +12214,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$p,
-        lineNumber: 154,
+        lineNumber: 250,
         columnNumber: 58
       }
     }));
@@ -24067,14 +24197,14 @@
     };
 
     React__namespace.useEffect(function () {
-      if (props.withComponent) {
+      if (props.withComponent || (props === null || props === void 0 ? void 0 : props.variant)) {
         setTimeout(function () {
           setRender(function (prev) {
             return prev + 1;
           });
         }, 100);
       }
-    }, [props.withComponent]);
+    }, [props.withComponent, props === null || props === void 0 ? void 0 : props.variant]);
 
     var renderVariant = function renderVariant(variant) {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.53.1",
+  "version": "1.53.2",
   "dependencies": {
     "@majoo-ui/core": "^1.31.1",
     "@majoo-ui/helpers": "^1.30.5",
-    "@majoo-ui/icons": "^1.38.0",
+    "@majoo-ui/icons": "^1.38.1",
     "@stitches/react": "^1.2.8",
     "@radix-ui/react-alert-dialog": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.0",