cozy-ui 128.6.0 → 128.8.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [128.8.0](https://github.com/cozy/cozy-ui/compare/v128.7.0...v128.8.0) (2025-09-09)
+
+
+### Features
+
+* **NavDesktopDropdown:** introduce NavDesktopDropdown component for enhanced navigation item management ([3cb8a44](https://github.com/cozy/cozy-ui/commit/3cb8a44))
+
+# [128.7.0](https://github.com/cozy/cozy-ui/compare/v128.6.0...v128.7.0) (2025-09-09)
+
+
+### Features
+
+* Add Storage component ([76c74ed](https://github.com/cozy/cozy-ui/commit/76c74ed))
+
 # [128.6.0](https://github.com/cozy/cozy-ui/compare/v128.5.0...v128.6.0) (2025-09-08)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "128.6.0",
+  "version": "128.8.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/Layout/Layout.md

@@ -4,6 +4,7 @@ The Layout component brings a strong context for apps with any screen resolution
 * `<Content />` is the main content or your app.
 * ⚠️ Secondary `<NavItem />` are not visible on mobile and tablets
 * `<NavDesktopLimiter />` is a component that allows you to limit the number of visible items in a list and toggle between showing a limited view and displaying all items.
+* `<NavDesktopDropdown />` is a component that allows you to show / hide the items in a list when the number of items exceeds a defined limit
 
 ### NavDesktopLimiter
 
@@ -16,17 +17,24 @@ It can be used to wrap any list of React elements, automatically providing funct
 * **children**: React.ReactNode (required) - The list items or elements that **NavDesktopLimiter** will manage.
 * **max**: number (optional) - The maximum number of items to display initially. Default is **5**.
 
-**Features**:
+### NavDesktopDropdown
 
-* **Toggle Visibility**: Allows users to toggle between seeing the limited view and the full list of items.
-* **Customizable Limit**: Users can specify how many items should be shown in the limited view.
-* **Ease of Use**: Seamlessly integrates with existing list components from cozy-ui or standard JSX elements.
+The **NavDesktopDropdown** component is designed to manage the display of nav items efficiently, allowing users to toggle between showing a collapsed view and displaying all items. This component enhances the UI/UX by providing a clean and intuitive way to handle dropdowns with many items.
+
+It can be used to wrap any list of React elements, automatically providing functionality to limit the number of displayed elements based on the `limit` prop (defaulting to **5**). Users can toggle the dropdown to show or hide the items as needed.
+
+**Props**:
+
+* **label**: string (required) - The label for the dropdown.
+* **children**: React.ReactNode (required) - The list items or elements that **NavDesktopDropdown** will manage.
+* **defaultOpen**: boolean (optional) - Determines whether the dropdown is open by default. Default is **true**.
+* **limit**: number (optional) - The maximum number of items to display before enabling collapsing. Default is **5**.
 
 ```jsx
 import { useState } from 'react'
 import { Layout, Main, Content } from 'cozy-ui/transpiled/react/Layout'
 import Sidebar from 'cozy-ui/transpiled/react/Sidebar'
-import Nav, { NavItem, NavIcon, NavText, genNavLink, NavDesktopLimiter } from 'cozy-ui/transpiled/react/Nav'
+import Nav, { NavItem, NavIcon, NavText, genNavLink, NavDesktopLimiter, NavDesktopDropdown } from 'cozy-ui/transpiled/react/Nav'
 import cx from 'classnames'
 import isEqual from 'lodash/isEqual'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -83,7 +91,7 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const initialVariants = [{ monoColumn: false, withTopBar: true, longContent: true }]
+const initialVariants = [{ monoColumn: false, withTopBar: true, longContent: true, moreThanMax: true }]
 const [active, setActive] = useState(['Section 1', 'Subsection 1'])
 const [showDialog, setShowDialog] = useState(isTesting() ? true : false)
 const styles = useStyles()
@@ -130,6 +138,17 @@ const SideBar = ({ variant }) => {
             <NavText>Section 3</NavText>
           </NavLink>
         </NavItem>
+        <NavDesktopDropdown label="Section 4" max={5}>
+        {
+          Array.from(Array(variant.moreThanMax ? 6 : 3).keys()).map(i => (
+            <NavItem secondary key={i}>
+              <NavLink>
+                <NavText>Subsection {i}</NavText>
+              </NavLink>
+            </NavItem>
+          ))
+        }
+        </NavDesktopDropdown>
       </Nav>
     </Sidebar>
   )

package/react/Nav/index.jsx

@@ -3,9 +3,11 @@ import React, { Children, isValidElement, useState, forwardRef } from 'react'
 
 import withNavLocales from './locales/withNavLocales'
 import styles from './styles.styl'
+import DropdownText from '../DropdownText'
 import Icon from '../Icon'
 import BottomIcon from '../Icons/Bottom'
 import TopIcon from '../Icons/Top'
+import ListItem from '../ListItem'
 import useBreakpoints from '../providers/Breakpoints'
 import { useI18n } from '../providers/I18n'
 
@@ -116,5 +118,46 @@ const _NavDesktopLimiter = ({ children, max = 5 }) => {
 
 export const NavDesktopLimiter = withNavLocales(_NavDesktopLimiter)
 
+export const NavDesktopDropdown = ({
+  label,
+  children,
+  defaultOpen = true,
+  limit = 5
+}) => {
+  const { isDesktop } = useBreakpoints()
+  const [open, setOpen] = useState(defaultOpen)
+  const isActivated =
+    Children.toArray(children).filter(isValidElement).length > limit
+
+  const innerIconProps = {
+    rotate: open ? 0 : -90,
+    ...(!isActivated && { className: 'u-dn' })
+  }
+
+  if (!isDesktop) return null
+
+  return (
+    <>
+      <ListItem size="small" className={isActivated ? 'u-c-pointer' : ''}>
+        <DropdownText
+          variant="subtitle2"
+          color="textSecondary"
+          innerIconProps={innerIconProps}
+          onClick={() => {
+            if (!isActivated) {
+              return
+            }
+            setOpen(!open)
+          }}
+        >
+          {label}
+        </DropdownText>
+      </ListItem>
+
+      {open && <>{children}</>}
+    </>
+  )
+}
+
 export default Nav
 Nav.NavItem = NavItem

package/react/Storage/Readme.md

@@ -0,0 +1,46 @@
+```jsx
+import Storage from 'cozy-ui/transpiled/react/Storage'
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+
+const client = {
+  store: {
+    getState: () => {},
+    subscribe: () => {},
+    unsubscribe: () => {}
+  },
+  getInstanceOptions: () => {},
+  query: () => {},
+  getQueryFromState: queryName => {
+    if (queryName === 'io.cozy.settings/io.cozy.settings.instance') {
+      return {
+        data: {
+          uuid: "uid123"
+        }
+      }
+    } else if (queryName === 'io.cozy.settings/io.cozy.settings.context') {
+      return {
+        data: {
+          manager_url: "http://manager-url/",
+          enable_premium_links: true
+        }
+      }
+    } else if (queryName === 'io.cozy.settings/io.cozy.settings.disk-usage') {
+      return {
+        data: {
+          used: "500000000",
+          quota: "1000000000"
+        }
+      }
+    }
+  }
+}
+
+;
+
+<DemoProvider client={client}>
+  <div className="u-p-1-half u-maw-5">
+    <Storage onlyDesktop={false} />
+  </div>
+</DemoProvider>
+
+```

package/react/Storage/StorageButton.jsx

@@ -0,0 +1,34 @@
+import cx from 'classnames'
+import React from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { buildPremiumLink } from 'cozy-client/dist/models/instance'
+
+import { locales } from './locales'
+import Button from '../Buttons'
+import Icon from '../Icon'
+import TwakeWorkplaceIcon from '../Icons/TwakeWorkplace'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+const StorageButton = ({ className }) => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+  const instanceInfo = useInstanceInfo()
+
+  return (
+    <Button
+      className={cx('u-bdrs-4', className)}
+      variant="secondary"
+      label={t('Storage.increase')}
+      startIcon={<Icon icon={TwakeWorkplaceIcon} size={22} />}
+      size="small"
+      height="auto"
+      fullWidth
+      component="a"
+      target="_blank"
+      href={buildPremiumLink(instanceInfo)}
+    />
+  )
+}
+
+export default StorageButton

package/react/Storage/StorageProgress.jsx

@@ -0,0 +1,52 @@
+import React from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { makeDiskInfos } from 'cozy-client/dist/models/instance'
+
+import { locales } from './locales'
+import Icon from '../Icon'
+import CloudIcon from '../Icons/Cloud'
+import { LinearProgress } from '../Progress'
+import Typography from '../Typography'
+import { useI18n, useExtendI18n } from '../providers/I18n'
+
+/**
+ * Show remaining disk space with a progress bar
+ */
+const StorageProgress = () => {
+  useExtendI18n(locales)
+  const { t } = useI18n()
+
+  const { diskUsage } = useInstanceInfo()
+
+  const { humanDiskQuota, humanDiskUsage, percentUsage } = makeDiskInfos(
+    diskUsage.data?.used,
+    diskUsage.data?.quota
+  )
+
+  return (
+    <>
+      <div className="u-flex u-flex-items-center">
+        <Icon
+          className="u-mr-half"
+          icon={CloudIcon}
+          size={24}
+          color="var(--iconTextColor)"
+        />
+        <Typography variant="caption">{t('Storage.title')}</Typography>
+      </div>
+      <LinearProgress
+        className="u-mv-half"
+        variant="determinate"
+        value={parseInt(percentUsage)}
+      />
+      <Typography variant="caption">
+        {t('Storage.availability', {
+          smart_count: (humanDiskQuota - humanDiskUsage).toFixed(2)
+        })}
+      </Typography>
+    </>
+  )
+}
+
+export default StorageProgress

package/react/Storage/index.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useInstanceInfo } from 'cozy-client'
+import { shouldDisplayOffers } from 'cozy-client/dist/models/instance'
+import { isFlagshipApp } from 'cozy-device-helper'
+
+import StorageButton from './StorageButton'
+import StorageProgress from './StorageProgress'
+import useBreakpoints from '../providers/Breakpoints'
+
+const Storage = ({ onlyDesktop }) => {
+  const { isDesktop, isMobile } = useBreakpoints()
+  const instanceInfo = useInstanceInfo()
+
+  if (onlyDesktop && !isDesktop) return null
+
+  const showStorageButton =
+    instanceInfo.isLoaded &&
+    !isFlagshipApp() &&
+    !isMobile &&
+    shouldDisplayOffers(instanceInfo)
+
+  return (
+    <>
+      <StorageProgress />
+      {showStorageButton && <StorageButton className="u-mt-1" />}
+    </>
+  )
+}
+
+Storage.propTypes = {
+  /** Component enabled only for desktop. Using `false` will enable it for mobile and tablet also. */
+  onlyDesktop: PropTypes.bool
+}
+
+Storage.defaultProps = {
+  onlyDesktop: true
+}
+
+export default Storage

package/react/Storage/locales/en.json

@@ -0,0 +1,7 @@
+{
+  "Storage": {
+    "title": "Storage",
+    "availability": "%{smart_count} GB available",
+    "increase": "Increase the space"
+  }
+}

package/react/Storage/locales/fr.json

@@ -0,0 +1,7 @@
+{
+  "Storage": {
+    "title": "Stockage",
+    "availability": "%{smart_count} Go disponible",
+    "increase": "Augmenter l'espace"
+  }
+}

package/react/Storage/locales/index.jsx

@@ -0,0 +1,7 @@
+import en from './en.json'
+import fr from './fr.json'
+
+export const locales = {
+  en,
+  fr
+}

package/transpiled/react/Nav/index.d.ts

@@ -23,6 +23,12 @@ export function NavIcon({ className, icon }: {
     icon: any;
 }): JSX.Element;
 export const NavDesktopLimiter: any;
+export function NavDesktopDropdown({ label, children, defaultOpen, limit }: {
+    label: any;
+    children: any;
+    defaultOpen?: boolean | undefined;
+    limit?: number | undefined;
+}): JSX.Element | null;
 export default Nav;
 import React from "react";
 declare function Nav({ className, children }: {

package/transpiled/react/Nav/index.js

@@ -1,8 +1,14 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children", "secondary"],
     _excluded2 = ["to", "children"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import cx from 'classnames';
 import React, { Children, isValidElement, useState, forwardRef } from 'react';
 import withNavLocales from "cozy-ui/transpiled/react/Nav/locales/withNavLocales";
@@ -16,9 +22,11 @@ var styles = {
   "c-nav-item-secondary": "styles__c-nav-item-secondary___k14rf",
   "c-nav-limiter": "styles__c-nav-limiter___3oxQU"
 };
+import DropdownText from "cozy-ui/transpiled/react/DropdownText";
 import Icon from "cozy-ui/transpiled/react/Icon";
 import BottomIcon from "cozy-ui/transpiled/react/Icons/Bottom";
 import TopIcon from "cozy-ui/transpiled/react/Icons/Top";
+import ListItem from "cozy-ui/transpiled/react/ListItem";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { useI18n } from "cozy-ui/transpiled/react/providers/I18n";
 export var NavItem = function NavItem(_ref) {
@@ -136,5 +144,46 @@ var _NavDesktopLimiter = function _NavDesktopLimiter(_ref7) {
 };
 
 export var NavDesktopLimiter = withNavLocales(_NavDesktopLimiter);
+export var NavDesktopDropdown = function NavDesktopDropdown(_ref8) {
+  var label = _ref8.label,
+      children = _ref8.children,
+      _ref8$defaultOpen = _ref8.defaultOpen,
+      defaultOpen = _ref8$defaultOpen === void 0 ? true : _ref8$defaultOpen,
+      _ref8$limit = _ref8.limit,
+      limit = _ref8$limit === void 0 ? 5 : _ref8$limit;
+
+  var _useBreakpoints2 = useBreakpoints(),
+      isDesktop = _useBreakpoints2.isDesktop;
+
+  var _useState3 = useState(defaultOpen),
+      _useState4 = _slicedToArray(_useState3, 2),
+      open = _useState4[0],
+      setOpen = _useState4[1];
+
+  var isActivated = Children.toArray(children).filter(isValidElement).length > limit;
+
+  var innerIconProps = _objectSpread({
+    rotate: open ? 0 : -90
+  }, !isActivated && {
+    className: 'u-dn'
+  });
+
+  if (!isDesktop) return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, {
+    size: "small",
+    className: isActivated ? 'u-c-pointer' : ''
+  }, /*#__PURE__*/React.createElement(DropdownText, {
+    variant: "subtitle2",
+    color: "textSecondary",
+    innerIconProps: innerIconProps,
+    onClick: function onClick() {
+      if (!isActivated) {
+        return;
+      }
+
+      setOpen(!open);
+    }
+  }, label)), open && /*#__PURE__*/React.createElement(React.Fragment, null, children));
+};
 export default Nav;
 Nav.NavItem = NavItem;

package/transpiled/react/Storage/StorageButton.d.ts

@@ -0,0 +1,4 @@
+export default StorageButton;
+declare function StorageButton({ className }: {
+    className: any;
+}): JSX.Element;

package/transpiled/react/Storage/StorageButton.js

@@ -0,0 +1,36 @@
+import cx from 'classnames';
+import React from 'react';
+import { useInstanceInfo } from 'cozy-client';
+import { buildPremiumLink } from 'cozy-client/dist/models/instance';
+import { locales } from "cozy-ui/transpiled/react/Storage/locales";
+import Button from "cozy-ui/transpiled/react/Buttons";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import TwakeWorkplaceIcon from "cozy-ui/transpiled/react/Icons/TwakeWorkplace";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+
+var StorageButton = function StorageButton(_ref) {
+  var className = _ref.className;
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var instanceInfo = useInstanceInfo();
+  return /*#__PURE__*/React.createElement(Button, {
+    className: cx('u-bdrs-4', className),
+    variant: "secondary",
+    label: t('Storage.increase'),
+    startIcon: /*#__PURE__*/React.createElement(Icon, {
+      icon: TwakeWorkplaceIcon,
+      size: 22
+    }),
+    size: "small",
+    height: "auto",
+    fullWidth: true,
+    component: "a",
+    target: "_blank",
+    href: buildPremiumLink(instanceInfo)
+  });
+};
+
+export default StorageButton;

package/transpiled/react/Storage/StorageProgress.d.ts

@@ -0,0 +1,5 @@
+export default StorageProgress;
+/**
+ * Show remaining disk space with a progress bar
+ */
+declare function StorageProgress(): JSX.Element;

package/transpiled/react/Storage/StorageProgress.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { useInstanceInfo } from 'cozy-client';
+import { makeDiskInfos } from 'cozy-client/dist/models/instance';
+import { locales } from "cozy-ui/transpiled/react/Storage/locales";
+import Icon from "cozy-ui/transpiled/react/Icon";
+import CloudIcon from "cozy-ui/transpiled/react/Icons/Cloud";
+import { LinearProgress } from "cozy-ui/transpiled/react/Progress";
+import Typography from "cozy-ui/transpiled/react/Typography";
+import { useI18n, useExtendI18n } from "cozy-ui/transpiled/react/providers/I18n";
+/**
+ * Show remaining disk space with a progress bar
+ */
+
+var StorageProgress = function StorageProgress() {
+  var _diskUsage$data, _diskUsage$data2;
+
+  useExtendI18n(locales);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var _useInstanceInfo = useInstanceInfo(),
+      diskUsage = _useInstanceInfo.diskUsage;
+
+  var _makeDiskInfos = makeDiskInfos((_diskUsage$data = diskUsage.data) === null || _diskUsage$data === void 0 ? void 0 : _diskUsage$data.used, (_diskUsage$data2 = diskUsage.data) === null || _diskUsage$data2 === void 0 ? void 0 : _diskUsage$data2.quota),
+      humanDiskQuota = _makeDiskInfos.humanDiskQuota,
+      humanDiskUsage = _makeDiskInfos.humanDiskUsage,
+      percentUsage = _makeDiskInfos.percentUsage;
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "u-flex u-flex-items-center"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: "u-mr-half",
+    icon: CloudIcon,
+    size: 24,
+    color: "var(--iconTextColor)"
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, t('Storage.title'))), /*#__PURE__*/React.createElement(LinearProgress, {
+    className: "u-mv-half",
+    variant: "determinate",
+    value: parseInt(percentUsage)
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "caption"
+  }, t('Storage.availability', {
+    smart_count: (humanDiskQuota - humanDiskUsage).toFixed(2)
+  })));
+};
+
+export default StorageProgress;

package/transpiled/react/Storage/index.d.ts

@@ -0,0 +1,14 @@
+export default Storage;
+declare function Storage({ onlyDesktop }: {
+    onlyDesktop: any;
+}): JSX.Element | null;
+declare namespace Storage {
+    namespace propTypes {
+        const onlyDesktop: PropTypes.Requireable<boolean>;
+    }
+    namespace defaultProps {
+        const onlyDesktop_1: boolean;
+        export { onlyDesktop_1 as onlyDesktop };
+    }
+}
+import PropTypes from "prop-types";

package/transpiled/react/Storage/index.js

@@ -0,0 +1,32 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useInstanceInfo } from 'cozy-client';
+import { shouldDisplayOffers } from 'cozy-client/dist/models/instance';
+import { isFlagshipApp } from 'cozy-device-helper';
+import StorageButton from "cozy-ui/transpiled/react/Storage/StorageButton";
+import StorageProgress from "cozy-ui/transpiled/react/Storage/StorageProgress";
+import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
+
+var Storage = function Storage(_ref) {
+  var onlyDesktop = _ref.onlyDesktop;
+
+  var _useBreakpoints = useBreakpoints(),
+      isDesktop = _useBreakpoints.isDesktop,
+      isMobile = _useBreakpoints.isMobile;
+
+  var instanceInfo = useInstanceInfo();
+  if (onlyDesktop && !isDesktop) return null;
+  var showStorageButton = instanceInfo.isLoaded && !isFlagshipApp() && !isMobile && shouldDisplayOffers(instanceInfo);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StorageProgress, null), showStorageButton && /*#__PURE__*/React.createElement(StorageButton, {
+    className: "u-mt-1"
+  }));
+};
+
+Storage.propTypes = {
+  /** Component enabled only for desktop. Using `false` will enable it for mobile and tablet also. */
+  onlyDesktop: PropTypes.bool
+};
+Storage.defaultProps = {
+  onlyDesktop: true
+};
+export default Storage;

package/transpiled/react/Storage/locales/index.d.ts

@@ -0,0 +1,6 @@
+export namespace locales {
+    export { en };
+    export { fr };
+}
+import en from "./en.json";
+import fr from "./fr.json";

package/transpiled/react/Storage/locales/index.js

@@ -0,0 +1,18 @@
+var en = {
+  Storage: {
+    title: "Storage",
+    availability: "%{smart_count} GB available",
+    increase: "Increase the space"
+  }
+};
+var fr = {
+  Storage: {
+    title: "Stockage",
+    availability: "%{smart_count} Go disponible",
+    increase: "Augmenter l'espace"
+  }
+};
+export var locales = {
+  en: en,
+  fr: fr
+};

package/transpiled/react/deprecated/Menus/index.d.ts

@@ -12,11 +12,11 @@ declare var _default: React.ComponentType<Pick<Pick<PropTypes.InferProps<{
     component: PropTypes.Requireable<PropTypes.ReactElementLike>;
     /** placement for the popover */
     placement: PropTypes.Requireable<string>;
-}>, "disabled" | "placement" | "component">> & Partial<Pick<{
+}>, "disabled" | "component" | "placement">> & Partial<Pick<{
     disabled: boolean;
     component: null;
     placement: string;
-}, never>>, "disabled" | "placement" | "component"> & import("@material-ui/styles/withStyles/withStyles").StyledComponentProps<"root" | "paper">>;
+}, never>>, "disabled" | "component" | "placement"> & import("@material-ui/styles/withStyles/withStyles").StyledComponentProps<"root" | "paper">>;
 export default _default;
 export { MenuButton };
 import PropTypes from "prop-types";