@astral/ui 4.80.1 → 4.82.0

package/components/DashboardMenuSidebarButton/DashboardMenuSidebarButton.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useContext } from 'react';
-import { Collapse } from '../Collapse';
 import { DashboardSidebarButton } from '../DashboardSidebarButton';
 import { DashboardSidebarContext } from '../DashboardSidebarProvider';
 import { useLogic } from './useLogic';
 export const DashboardMenuSidebarButton = forwardRef((props, ref) => {
-    const { collapsedIn, isPopupOpen, setIsPopupOpen } = useContext(DashboardSidebarContext);
+    const { isPopupOpen, setIsPopupOpen } = useContext(DashboardSidebarContext);
     const { handleTogglePopover, popoverAnchorRef } = useLogic({
         isPopupOpen,
         setIsPopupOpen,
         ref,
     });
     const { children, popover, ...buttonProps } = props;
-    return (_jsxs(_Fragment, { children: [_jsx(DashboardSidebarButton, { ref: popoverAnchorRef, ...buttonProps, onClick: handleTogglePopover, selected: isPopupOpen, children: _jsx(Collapse, { orientation: "horizontal", in: collapsedIn, children: children }) }), popover] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DashboardSidebarButton, { ref: popoverAnchorRef, ...buttonProps, onClick: handleTogglePopover, selected: isPopupOpen, children: children }), popover] }));
 });

package/components/DashboardSidebarButton/styles.js

@@ -1,4 +1,4 @@
-import { Button as UIKitButton, } from '../Button';
+import { buttonClasses, Button as UIKitButton, } from '../Button';
 import { styled } from '../styled';
 export const SidebarButton = styled(UIKitButton, {
     shouldForwardProp: (prop) => !['$isOpen'].includes(prop),
@@ -18,12 +18,7 @@ export const SidebarButton = styled(UIKitButton, {
     });
 }};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    height: 48px;
-    max-height: 48px;
-  }
-
-  && > .MuiButton-startIcon {
+  && > .${buttonClasses.startIcon} {
     margin-right: ${({ theme, $isOpen }) => !$isOpen ? theme.spacing(-2) : theme.spacing(0)};
 
     transition: ${({ theme }) => {
@@ -33,7 +28,7 @@ export const SidebarButton = styled(UIKitButton, {
 }};
   }
 
-  && > .MuiButton-endIcon {
+  && > .${buttonClasses.endIcon} {
     margin-right: ${({ theme, $isOpen }) => !$isOpen ? theme.spacing(2) : theme.spacing(0)};
 
     transition: ${({ theme }) => {
@@ -42,4 +37,25 @@ export const SidebarButton = styled(UIKitButton, {
     });
 }};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    min-width: 100%;
+    max-width: 100%;
+    height: 48px;
+    max-height: 48px;
+
+    transition: none;
+
+    && > .${buttonClasses.startIcon} {
+      margin-right: ${({ theme }) => theme.spacing(0)};
+
+      transition: none;
+    }
+
+    && > .${buttonClasses.endIcon} {
+      margin-right: ${({ theme }) => theme.spacing(0)};
+
+      transition: none;
+    }
+  }
 `;

package/components/TagsList/Tag/Tag.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { OverflowTypography } from '../../OverflowTypography';
 import { StyledTag } from './styles';
 import { useLogic } from './useLogic';
 export const Tag = (props) => {
     const { onMouseDown } = useLogic();
-    const { shrinks, isDisabled, ...restProps } = props;
-    return (_jsx(StyledTag, { "$shrinks": shrinks, color: "grey", variant: "light", disabled: isDisabled, ...restProps, onMouseDown: onMouseDown }));
+    const { shrinks, isDisabled, label, ...restProps } = props;
+    return (_jsx(StyledTag, { "$shrinks": shrinks, color: "grey", variant: "light", disabled: isDisabled, label: _jsx(OverflowTypography, { children: label }), ...restProps, onMouseDown: onMouseDown }));
 };

package/node/components/DashboardMenuSidebarButton/DashboardMenuSidebarButton.js

@@ -3,17 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DashboardMenuSidebarButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const Collapse_1 = require("../Collapse");
 const DashboardSidebarButton_1 = require("../DashboardSidebarButton");
 const DashboardSidebarProvider_1 = require("../DashboardSidebarProvider");
 const useLogic_1 = require("./useLogic");
 exports.DashboardMenuSidebarButton = (0, react_1.forwardRef)((props, ref) => {
-    const { collapsedIn, isPopupOpen, setIsPopupOpen } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
+    const { isPopupOpen, setIsPopupOpen } = (0, react_1.useContext)(DashboardSidebarProvider_1.DashboardSidebarContext);
     const { handleTogglePopover, popoverAnchorRef } = (0, useLogic_1.useLogic)({
         isPopupOpen,
         setIsPopupOpen,
         ref,
     });
     const { children, popover, ...buttonProps } = props;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DashboardSidebarButton_1.DashboardSidebarButton, { ref: popoverAnchorRef, ...buttonProps, onClick: handleTogglePopover, selected: isPopupOpen, children: (0, jsx_runtime_1.jsx)(Collapse_1.Collapse, { orientation: "horizontal", in: collapsedIn, children: children }) }), popover] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(DashboardSidebarButton_1.DashboardSidebarButton, { ref: popoverAnchorRef, ...buttonProps, onClick: handleTogglePopover, selected: isPopupOpen, children: children }), popover] }));
 });

package/node/components/DashboardSidebarButton/styles.js

@@ -21,12 +21,7 @@ exports.SidebarButton = (0, styled_1.styled)(Button_1.Button, {
     });
 }};
 
-  ${({ theme }) => theme.breakpoints.down('sm')} {
-    height: 48px;
-    max-height: 48px;
-  }
-
-  && > .MuiButton-startIcon {
+  && > .${Button_1.buttonClasses.startIcon} {
     margin-right: ${({ theme, $isOpen }) => !$isOpen ? theme.spacing(-2) : theme.spacing(0)};
 
     transition: ${({ theme }) => {
@@ -36,7 +31,7 @@ exports.SidebarButton = (0, styled_1.styled)(Button_1.Button, {
 }};
   }
 
-  && > .MuiButton-endIcon {
+  && > .${Button_1.buttonClasses.endIcon} {
     margin-right: ${({ theme, $isOpen }) => !$isOpen ? theme.spacing(2) : theme.spacing(0)};
 
     transition: ${({ theme }) => {
@@ -45,4 +40,25 @@ exports.SidebarButton = (0, styled_1.styled)(Button_1.Button, {
     });
 }};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    min-width: 100%;
+    max-width: 100%;
+    height: 48px;
+    max-height: 48px;
+
+    transition: none;
+
+    && > .${Button_1.buttonClasses.startIcon} {
+      margin-right: ${({ theme }) => theme.spacing(0)};
+
+      transition: none;
+    }
+
+    && > .${Button_1.buttonClasses.endIcon} {
+      margin-right: ${({ theme }) => theme.spacing(0)};
+
+      transition: none;
+    }
+  }
 `;

package/node/components/TagsList/Tag/Tag.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tag = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const OverflowTypography_1 = require("../../OverflowTypography");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const Tag = (props) => {
     const { onMouseDown } = (0, useLogic_1.useLogic)();
-    const { shrinks, isDisabled, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTag, { "$shrinks": shrinks, color: "grey", variant: "light", disabled: isDisabled, ...restProps, onMouseDown: onMouseDown }));
+    const { shrinks, isDisabled, label, ...restProps } = props;
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTag, { "$shrinks": shrinks, color: "grey", variant: "light", disabled: isDisabled, label: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { children: label }), ...restProps, onMouseDown: onMouseDown }));
 };
 exports.Tag = Tag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.80.1",
+  "version": "4.82.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {