@onesy/ui-react 1.0.0

package/esm/MenuItem/MenuItem.js

@@ -0,0 +1,265 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "colorSelected", "size", "menu", "menuId", "menuOpen", "openMenu", "openMenuDefault", "openList", "openListDefault", "menuItem", "list", "preselected", "selected", "inset", "end", "indicator", "include", "footer", "menuCloseOnClick", "listCloseOnClick", "disabled", "onClick", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "ExpandIcon", "ListTransitionComponent", "ListProps", "ListTransitionComponentProps", "ExpandProps", "MenuProps"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is, isEnvironment } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialExpandMore from '@amaui/icons-material-rounded-react/IconMaterialExpandMoreW100';
+import IconMaterialArrowRight from '@amaui/icons-material-rounded-react/IconMaterialArrowRightW100';
+import ListItemElement from '../ListItem';
+import ListElement from '../List';
+import IconButtonElement from '../IconButton';
+import MenuElement from '../Menu';
+import ExpandElement from '../Expand';
+import FadeElement from '../Fade';
+import { iconFontSize, staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  icon: {
+    transition: theme.methods.transitions.make('transform')
+  },
+  icon_open: {
+    transform: 'rotate(-180deg)'
+  }
+}), {
+  name: 'onesy-ListItem'
+});
+const ListItemDelays = {
+  Transition: {
+    enter: 70
+  }
+};
+const MenuItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenuItem?.props?.default), props_), [props_]);
+  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const List = React.useMemo(() => theme?.elements?.List || ListElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
+  const Expand = React.useMemo(() => theme?.elements?.Expand || ExpandElement, [theme]);
+  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
+  const {
+      tonal = true,
+      color = 'default',
+      colorSelected = props.color,
+      size = 'regular',
+      menu,
+      menuId,
+      menuOpen,
+      openMenu: openMenu_,
+      openMenuDefault,
+      openList: openList_,
+      openListDefault,
+      menuItem,
+      list: list_,
+      preselected,
+      selected,
+      inset,
+      end: end_,
+      indicator = true,
+      include,
+      footer,
+      menuCloseOnClick,
+      listCloseOnClick,
+      disabled,
+      onClick: onClick_,
+      onFocus: onFocus_,
+      onBlur: onBlur_,
+      onMouseEnter: onMouseEnter_,
+      onMouseLeave: onMouseLeave_,
+      ExpandIcon = IconMaterialExpandMore,
+      ListTransitionComponent = Fade,
+      ListProps,
+      ListTransitionComponentProps: ListTransitionComponentProps_,
+      ExpandProps,
+      MenuProps = {
+        autoSelect: true
+      }
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [openMenu, setOpenMenu] = React.useState(openMenuDefault !== undefined ? openMenuDefault : openMenu_);
+  const [openList, setOpenList] = React.useState(openListDefault !== undefined ? openListDefault : openList_);
+  const [hover, setHover] = React.useState(false);
+  const [focus, setFocus] = React.useState(false);
+  const refs = {
+    root: React.useRef(undefined),
+    props: React.useRef(undefined),
+    openMenu: React.useRef(undefined),
+    openList: React.useRef(undefined),
+    focus: React.useRef(undefined),
+    ids: {
+      primary: React.useId(),
+      secondary: React.useId()
+    }
+  };
+  refs.props.current = props;
+  refs.openMenu.current = openMenu;
+  refs.openList.current = openList;
+  refs.focus.current = focus;
+  const ListTransitionComponentProps = _objectSpread({
+    add: true,
+    delay: {
+      enter: ListItemDelays.Transition.enter
+    }
+  }, ListTransitionComponentProps_);
+  const list = list_ && React.Children.toArray(list_).map((item, index) => (/*#__PURE__*/React.cloneElement(item, _objectSpread({
+    key: index,
+    onClick: event => {
+      if (item.props.listCloseOnClick) onCloseList();
+      if (is('function', item.props.onClick)) item.props.onClick(event);
+    }
+  }, item?.props))));
+  const onClick = React.useCallback(event => {
+    if (!refs.props.current.disabled) {
+      if (refs.props.current.list) setOpenList(!refs.openList.current);
+    }
+    if (is('function', onClick_)) onClick_(event);
+  }, [onClick_]);
+  let end = end_;
+  if (menu) end = end_ || /*#__PURE__*/React.createElement(IconMaterialArrowRight, null);
+  if (list) end = end_ || indicator && /*#__PURE__*/React.createElement(IconButton, {
+    size: 24,
+    fontSize: iconFontSize,
+    onClick: onClick,
+    className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-icon-button'], classes.iconButton])
+  }, /*#__PURE__*/React.createElement(ExpandIcon, {
+    className: classNames([classes.icon, openList && classes.icon_open])
+  }));
+  React.useEffect(() => {
+    const onKeyDown = event => {
+      if (!refs.props.current.disabled) {
+        if (menu) {
+          if (refs.openMenu.current && (theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight')) setOpenMenu(false);
+          if (!refs.openMenu.current && (theme.direction === 'ltr' && event.key === 'ArrowRight' || theme.direction === 'rtl' && event.key === 'ArrowLeft')) setOpenMenu(true);
+        } else if (list) {
+          if (refs.openList.current && (event.key === 'ArrowUp' || theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight')) setOpenMenu(false);
+          if (!refs.openList.current && (event.key === 'ArrowDown' || theme.direction === 'ltr' && event.key === 'ArrowRight' || theme.direction === 'rtl' && event.key === 'ArrowLeft')) setOpenMenu(true);
+          if (event.key === 'Enter' && refs.focus.current) onClick();
+        } else {
+          if (event.key === 'Enter' && !refs.props.current.button && refs.focus.current) {
+            if (is('function', refs.props.current.onClick)) refs.props.current.onClick(event);
+          }
+        }
+      }
+    };
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    rootDocument.addEventListener('keydown', onKeyDown);
+    return () => {
+      rootDocument.removeEventListener('keydown', onKeyDown);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (openMenu_ !== openMenu) setOpenMenu(openMenu_);
+  }, [openMenu_]);
+  React.useEffect(() => {
+    if (openList_ !== openList) setOpenList(openList_);
+  }, [openList_]);
+  React.useEffect(() => {
+    if (menuOpen && preselected) refs.root.current.focus();
+  }, [preselected, menuOpen]);
+  React.useEffect(() => {
+    if (menu) setOpenMenu(hover || preselected || selected);
+  }, [hover]);
+  React.useEffect(() => {
+    if (menu) setOpenMenu(hover || focus || preselected || selected);
+  }, [focus]);
+  const onMouseEnter = React.useCallback(event => {
+    if (!disabled) setHover(true);
+    if (is('function', onMouseEnter_)) onMouseEnter_(event);
+  }, []);
+  const onMouseLeave = React.useCallback(event => {
+    if (!disabled) {
+      setHover(false);
+      setFocus(false);
+    }
+    if (is('function', onMouseLeave_)) onMouseLeave_(event);
+  }, []);
+  const onFocus = React.useCallback(event => {
+    if (event.target === event.currentTarget && !disabled) setFocus(true);
+    if (is('function', onFocus_)) onFocus_(event);
+  }, []);
+  const onBlur = React.useCallback(event => {
+    if (event.target === event.currentTarget && !disabled) setFocus(false);
+    if (is('function', onBlur_)) onBlur_(event);
+  }, []);
+  const onCloseList = React.useCallback(() => {
+    if (!disabled) {
+      setOpenList(false);
+      setHover(false);
+      setFocus(false);
+
+      // if (is('function', onClose_)) onClose_();
+    }
+  }, []);
+  const onCloseMenu = React.useCallback(() => {
+    if (!disabled) {
+      setOpenMenu(false);
+      setHover(false);
+      setFocus(false);
+
+      // if (is('function', onClose_)) onClose_();
+    }
+  }, []);
+  ListTransitionComponentProps.in = !!openList;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ListItem, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: color,
+    colorSelected: colorSelected,
+    size: size,
+    inset: inset,
+    selected: selected,
+    preselected: preselected,
+    end: end,
+    disabled: disabled,
+    onClick: onClick,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    "aria-haspopup": !!menu,
+    "aria-expanded": openMenu,
+    menuItem: true,
+    className: classNames([staticClassName('MenuItem', theme) && ['onesy-MenuItem-root', `onesy-MenuItem-size-${size}`], classes.root]),
+    InteractionProps: {
+      focus
+    },
+    RootProps: {
+      className: classNames([staticClassName('ListItem', theme) && [menu && `onesy-ListItem-menu`, list && `onesy-ListItem-list`, menuItem && `onesy-ListItem-menu-item`, menuOpen && `onesy-ListItem-menu-open`, openMenu && `onesy-ListItem-open-menu`, openList && `onesy-ListItem-open-list`, menuItem && [inset && `onesy-ListItem-menu-item-inset`]]])
+    },
+    footer: /*#__PURE__*/React.createElement(React.Fragment, null, footer, /*#__PURE__*/React.createElement(Expand, _extends({
+      in: openList,
+      parent: refs.root.current
+    }, ExpandProps), /*#__PURE__*/React.createElement(ListTransitionComponent, ListTransitionComponentProps, /*#__PURE__*/React.createElement(List, _extends({
+      indent: 5
+    }, ListProps, {
+      className: classNames([staticClassName('ListItem', theme) && ['onesy-ListItem-list'], ListProps?.className, classes.list])
+    }), list))), menu && /*#__PURE__*/React.createElement(Menu, _extends({
+      open: !!openMenu,
+      include: include,
+      onClose: onCloseMenu,
+      closeOnClickAway: false,
+      anchorElement: refs.root.current,
+      menuItems: menu,
+      transformOrigin: "left top",
+      transformOriginSwitch: "right top",
+      transformOriginRtl: "left top",
+      transformOriginRtlSwitch: "right top",
+      position: "right",
+      alignment: "start",
+      onMouseEnter: onMouseEnter
+    }, MenuProps)))
+  }, other)));
+});
+MenuItem.displayName = 'onesy-MenuItem';
+export default MenuItem;

package/esm/MenuItem/index.js

@@ -0,0 +1 @@
+export { default } from './MenuItem';

package/esm/Meta/Meta.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["values", "separator", "ItemProps", "SeparatorProps", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import TypeElement from '../Type';
+import LineElement from '../Line';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    overflow: 'auto hidden',
+    '& > *': {
+      flex: '0 0 auto'
+    }
+  }
+}), {
+  name: 'onesy-Meta'
+});
+const Meta = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMeta?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      values: values_ = [],
+      separator: separator_ = '•',
+      ItemProps,
+      SeparatorProps,
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const separator = is('string', separator_) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: "b3",
+    priority: "secondary"
+  }, SeparatorProps), separator_) : separator_;
+  const getItem = (item, index) => {
+    if (is('simple', item)) return /*#__PURE__*/React.createElement(Type, {
+      key: index,
+      version: "b3",
+      priority: "secondary"
+    }, item);
+    return /*#__PURE__*/React.cloneElement(item, {
+      key: index
+    });
+  };
+  const values = values_?.filter(Boolean)?.flatMap((item, index) => !index ? getItem(item, index) : [separator, getItem(item, index)]);
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "flex-start",
+    className: classNames([staticClassName('Meta', theme) && ['onesy-Meta-root'], className, classes.root])
+  }, other), values);
+});
+Meta.displayName = 'onesy-Meta';
+export default Meta;

package/esm/Meta/index.js

@@ -0,0 +1 @@
+export { default } from './Meta';

package/esm/Modal/Modal.js

@@ -0,0 +1,312 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "size", "open", "openDefault", "mainRef", "backgroundRef", "partialyOpened", "minWidth", "maxWidth", "fullScreen", "fullWidth", "background", "modalWrapper", "modalWrapperSurface", "portal", "focus", "freezeScroll", "disableKeyboardClose", "disableBackgroundClose", "backgroundInvisible", "onClose", "NoSurfaceProps", "SurfaceProps", "BackgroundProps", "PortalProps", "TransitionComponentProps", "BackgroundComponent", "TransitionComponent", "Component", "className", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is, isEnvironment } from '@onesy/utils';
+import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
+import PortalElement from '../Portal';
+import FocusElement from '../Focus';
+import FadeElement from '../Fade';
+import SurfaceElement from '../Surface';
+import useMediaQuery from '../useMediaQuery';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'fixed',
+    inset: '0',
+    zIndex: theme.z_index.modal,
+    pointerEvents: 'none'
+  },
+  // Size
+  size_small: {
+    padding: theme.methods.space.value(2, 'px'),
+    borderRadius: `${theme.shape.radius.unit * 2 + theme.shape.radius.unit / 2}px`
+  },
+  size_regular: {
+    padding: theme.methods.space.value('md', 'px'),
+    borderRadius: `${theme.shape.radius.unit * 3 + theme.shape.radius.unit / 2}px`
+  },
+  size_large: {
+    padding: theme.methods.space.value('lg', 'px'),
+    borderRadius: `${theme.shape.radius.unit * 4 + theme.shape.radius.unit / 2}px`
+  },
+  background: {
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    background: 'rgba(0, 0, 0, 0.44)',
+    zIndex: -1,
+    pointerEvents: 'all'
+  },
+  backgroundInvisible: {
+    background: 'transparent'
+  },
+  modalRoot: {
+    position: 'relative',
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    pointerEvents: 'none'
+  },
+  surface: {
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: `280px`,
+    maxHeight: `calc(100% - ${theme.methods.space.value('xl') * 2}px)`,
+    margin: theme.methods.space.value('xl', 'px'),
+    overflow: 'hidden',
+    pointerEvents: 'all'
+  },
+  noSurface: {
+    pointerEvents: 'all',
+    maxWidth: '100%'
+  },
+  fullScreen: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '0 !important',
+    maxWidth: 'unset !important',
+    maxHeight: 'unset !important',
+    margin: '0 !important'
+  },
+  fullWidth: {
+    width: `calc(100% - ${theme.methods.space.value('xl') * 2}px)`
+  },
+  // minWidth
+  minWidth_xxs: {
+    minWidth: 'clamp(0px, 320px, calc(100vw - 48px))'
+  },
+  minWidth_xs: {
+    minWidth: 'clamp(0px, 400px, calc(100vw - 48px))'
+  },
+  minWidth_sm: {
+    minWidth: 'clamp(0px, 480px, calc(100vw - 48px))'
+  },
+  minWidth_rg: {
+    minWidth: 'clamp(0px, 560px, calc(100vw - 48px))'
+  },
+  minWidth_lg: {
+    minWidth: 'clamp(0px, 800px, calc(100vw - 48px))'
+  },
+  minWidth_xl: {
+    minWidth: 'clamp(0px, 1120px, calc(100vw - 48px))'
+  },
+  minWidth_xxl: {
+    minWidth: 'clamp(0px, 1360px, calc(100vw - 48px))'
+  },
+  minWidth_unset: {
+    minWidth: `unset`
+  },
+  // maxWidth
+  maxWidth_xxs: {
+    maxWidth: `320px`
+  },
+  maxWidth_xs: {
+    maxWidth: `400px`
+  },
+  maxWidth_sm: {
+    maxWidth: `480px`
+  },
+  maxWidth_rg: {
+    maxWidth: `560px`
+  },
+  maxWidth_lg: {
+    maxWidth: `800px`
+  },
+  maxWidth_xl: {
+    maxWidth: `1120px`
+  },
+  maxWidth_xxl: {
+    maxWidth: `1360px`
+  },
+  maxWidth_unset: {
+    maxWidth: `unset`
+  }
+}), {
+  name: 'onesy-Modal'
+});
+let MODALS_OPEN = 0;
+
+// To do
+
+// 1. Add padding right for freezeScroll for the scroll bar if it exists and width that it is
+
+const Modal = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyModal?.props?.default), props_), [props_]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Portal = React.useMemo(() => theme?.elements?.Portal || PortalElement, [theme]);
+  const Focus = React.useMemo(() => theme?.elements?.Focus || FocusElement, [theme]);
+  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      size = 'regular',
+      open: open_,
+      openDefault,
+      mainRef,
+      backgroundRef,
+      partialyOpened,
+      minWidth: minWidth_,
+      maxWidth: maxWidth_ = 'rg',
+      fullScreen,
+      fullWidth,
+      background = true,
+      modalWrapper = true,
+      modalWrapperSurface = true,
+      portal = true,
+      focus = true,
+      freezeScroll = true,
+      disableKeyboardClose,
+      disableBackgroundClose,
+      backgroundInvisible,
+      onClose: onClose_,
+      NoSurfaceProps,
+      SurfaceProps,
+      BackgroundProps,
+      PortalProps: PortalProps_,
+      TransitionComponentProps,
+      BackgroundComponent = Fade,
+      TransitionComponent = Fade,
+      Component = 'div',
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [open, setOpen] = React.useState(openDefault !== undefined ? openDefault : open_);
+  const [inProp, setInProp] = React.useState(open_);
+  const [portalElement, setPortalElement] = React.useState();
+  const refs = {
+    root: React.useRef(undefined),
+    focus: React.useRef(undefined),
+    open: React.useRef(open),
+    freezeScroll: React.useRef(undefined),
+    interval: React.useRef(undefined)
+  };
+  const mobile = useMediaQuery('(max-width: 767px)', {
+    element: refs.root.current
+  });
+  const minWidth = minWidth_ !== undefined ? minWidth_ : !mobile ? 'sm' : undefined;
+  refs.open.current = open;
+  refs.freezeScroll.current = freezeScroll;
+  const modal = {
+    open: () => {
+      MODALS_OPEN++;
+      const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+      if (freezeScroll) rootDocument.body.style.overflow = 'hidden';
+    },
+    close: () => {
+      MODALS_OPEN--;
+      const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+      if (MODALS_OPEN <= 0 && freezeScroll) rootDocument.body.style.removeProperty('overflow');
+    }
+  };
+  let maxWidth = maxWidth_;
+  if (fullWidth) maxWidth = undefined;
+  const onClose = () => {
+    if (is('function', onClose_) && open) onClose_();
+  };
+  const onKeyDown = event => {
+    if (!refs.open.current) return;
+    if (event.key === 'Escape' && !disableKeyboardClose) {
+      event.stopPropagation();
+      onClose();
+    }
+  };
+  React.useEffect(() => {
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    if (open) modal.open();
+
+    // Bug clean up fix
+    refs.interval.current = setInterval(() => {
+      if (MODALS_OPEN <= 0 && refs.freezeScroll.current && rootDocument.body.style.overflow === 'hidden') {
+        rootDocument.body.style.removeProperty('overflow');
+      }
+    }, 1400);
+    return () => {
+      if (open) modal.close();
+      clearInterval(refs.interval.current);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (open_ && !open) {
+      setOpen(true);
+      setInProp(true);
+      modal.open();
+    } else if (!open_ && open) modalWrapper ? setInProp(false) : setOpen(false);
+  }, [open_]);
+  React.useEffect(() => {
+    if (open) refs.focus.current?.focus();
+  }, [open]);
+  const onExited = value => {
+    setOpen(false);
+    modal.close();
+    if (is('function', TransitionComponentProps?.onExited)) TransitionComponentProps?.onExited(value);
+  };
+  if (!open && !partialyOpened) return null;
+  const PortalComponent = portal ? Portal : React.Fragment;
+  let PortalProps = {};
+  if (portal) {
+    const rootDocumentElement = isEnvironment('browser') ? (portalElement || refs.root.current)?.ownerDocument || window.document : undefined;
+    if (isEnvironment('browser')) PortalProps.element = rootDocumentElement.body;
+    PortalProps = _objectSpread(_objectSpread({}, PortalProps), PortalProps_);
+  }
+  const FocusComponent = focus ? Focus : React.Fragment;
+  const FocusProps = focus ? {
+    ref: refs.focus,
+    onKeyDown
+  } : {};
+  const MainProps = {
+    role: 'dialog',
+    'aria-labelledby': 'onesy-modal-title',
+    'aria-describedby': 'onesy-modal-text',
+    'aria-modal': 'true',
+    'aria-live': 'assertive'
+  };
+  let Main = children && /*#__PURE__*/React.cloneElement(children, _objectSpread({}, MainProps));
+  if (modalWrapper) Main = /*#__PURE__*/React.createElement("div", _extends({}, MainProps, {
+    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-modal-root'], classes.modalRoot])
+  }), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
+    in: inProp
+  }, TransitionComponentProps, {
+    onExited: onExited,
+    add: true
+  }), !modalWrapperSurface ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-no-surface'], NoSurfaceProps?.className, classes.noSurface])
+  }, children) : /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: mainRef,
+    tonal: tonal,
+    color: color,
+    tabIndex: "-1"
+  }, SurfaceProps, {
+    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-surface', `onesy-Modal-size-${size}`], classes.surface, classes[`minWidth_${minWidth}`], classes[`maxWidth_${maxWidth}`], classes[`size_${size}`], fullScreen && classes.fullScreen, fullWidth && classes.fullWidth, SurfaceProps?.className]),
+    onKeyDown: onKeyDown
+  }), children)));
+  return /*#__PURE__*/React.createElement(PortalComponent, PortalProps, /*#__PURE__*/React.createElement(Component, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+      setPortalElement(item);
+    },
+    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-root', open && `onesy-Modal-open`, focus && `onesy-Modal-focus`], className, classes.root])
+  }, other), /*#__PURE__*/React.createElement(FocusComponent, FocusProps, background && /*#__PURE__*/React.createElement(BackgroundComponent, _extends({
+    in: inProp,
+    add: true
+  }, BackgroundProps), /*#__PURE__*/React.createElement("div", {
+    ref: backgroundRef,
+    onClick: () => !disableBackgroundClose && onClose(),
+    className: classNames([staticClassName('Modal', theme) && ['onesy-Modal-background', backgroundInvisible && 'onesy-Modal-background-invisible'], classes.background, backgroundInvisible && classes.backgroundInvisible])
+  })), Main)));
+});
+Modal.displayName = 'onesy-Modal';
+export default Modal;

package/esm/Modal/index.js

@@ -0,0 +1 @@
+export { default } from './Modal';