@onesy/ui-react 1.0.59 → 1.0.63

package/build/esm/MenuDesktop/MenuDesktop.js

@@ -0,0 +1,474 @@
+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", "version", "items", "valueDefault", "value_", "openOnHover", "openOnClick", "openOnFocus", "renderItem", "indicator", "menuTransition", "menuTransitionClassName", "menuTransitionStyle", "onOpen", "onClose", "onChange", "TransitionComponent", "IconIndicator", "AppendProps", "TypeProps", "ItemProps", "IconProps", "TransitionComponentProps", "WrapperProps", "WrapperMenuProps", "className"];
+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 '@onesy/icons-material-rounded-react/IconMaterialExpandMoreW100';
+import GrowElement from '../Grow';
+import AppendElement from '../Append';
+import TransitionsElement from '../Transitions';
+import ClickListenerElement from '../ClickListener';
+import TransitionElement from '../Transition';
+import SurfaceElement from '../Surface';
+import TypeElement from '../Type';
+import LineElement from '../Line';
+import useMediaQuery from '../useMediaQuery';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    position: 'relative'
+  },
+  menuWrapper: {
+    position: 'relative',
+    overflow: 'hidden',
+    borderRadius: theme.methods.shape.radius.value(1.5, 'px'),
+    zIndex: theme.z_index.menu_modal,
+    '& > *': {
+      transition: theme.methods.transitions.make(['width', 'height', 'opacity', 'transform'])
+    }
+  },
+  menu: {
+    position: 'absolute',
+    inset: '0',
+    '&.enter': {
+      opacity: '0',
+      transform: 'translateX(-100%)'
+    },
+    '&.entering': {
+      opacity: '1',
+      transform: 'translateX(0%)'
+    },
+    '&.exit': {
+      opacity: '1',
+      transform: 'translateX(0%)'
+    },
+    '&.exiting': {
+      opacity: '0',
+      transition: 'none'
+    }
+  },
+  menu_reverse: {
+    position: 'absolute',
+    inset: '0',
+    '&.enter': {
+      opacity: '0',
+      transform: 'translateX(100%)'
+    },
+    '&.entering': {
+      opacity: '1',
+      transform: 'translateX(0%)'
+    },
+    '&.exit': {
+      opacity: '1',
+      transform: 'translateX(0%)'
+    },
+    '&.exiting': {
+      opacity: '0',
+      transition: 'none'
+    }
+  },
+  item: {
+    maxWidth: '140px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    padding: theme.methods.space.value(1, 'px'),
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  item_disabled: {
+    opacity: theme.palette.visual_contrast.default.opacity.disabled,
+    cursor: 'default',
+    pointerEvents: 'none'
+  },
+  indicator: {
+    color: [theme.palette.text.default.secondary, '!important'],
+    transition: theme.methods.transitions.make('transform')
+  },
+  indicator_open: {
+    transform: 'rotate(-180deg)'
+  }
+}), {
+  name: 'onesy-MenuDesktop'
+});
+const Wrapper = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const theme = useOnesyTheme();
+  const {
+    onMouseEnter,
+    onMouseLeave,
+    style
+  } = props;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    style: _objectSpread({
+      zIndex: theme.z_index.menu_modal
+    }, style)
+  }, props.children);
+});
+const MenuDesktop = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMenuDesktop?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Grow = React.useMemo(() => theme?.elements?.Grow || GrowElement, [theme]);
+  const Append = React.useMemo(() => theme?.elements?.Append || AppendElement, [theme]);
+  const Transitions = React.useMemo(() => theme?.elements?.Transitions || TransitionsElement, [theme]);
+  const ClickListener = React.useMemo(() => theme?.elements?.ClickListener || ClickListenerElement, [theme]);
+  const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      version = 'filled',
+      items,
+      valueDefault,
+      value_,
+      openOnHover = true,
+      openOnClick = true,
+      openOnFocus = true,
+      renderItem,
+      indicator,
+      menuTransition = true,
+      menuTransitionClassName,
+      menuTransitionStyle,
+      onOpen,
+      onClose: onClose_,
+      onChange,
+      TransitionComponent = Grow,
+      IconIndicator = IconMaterialExpandMore,
+      AppendProps,
+      TypeProps,
+      ItemProps,
+      IconProps,
+      TransitionComponentProps,
+      WrapperProps,
+      WrapperMenuProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = React.useState(false);
+  const [open, setOpen] = React.useState();
+  const [inProp, setInProp] = React.useState();
+  const [openItem, setOpenItem] = React.useState();
+  const [focus, setFocus] = React.useState();
+  const [append, setAppend] = React.useState();
+  const [menu, setMenu] = React.useState();
+  const refs = {
+    root: React.useRef(undefined),
+    open: React.useRef(undefined),
+    focus: React.useRef(undefined),
+    direction: React.useRef(undefined),
+    props: React.useRef(undefined),
+    items: React.useRef([]),
+    menu: React.useRef(undefined),
+    menus: React.useRef([]),
+    menuRects: React.useRef([]),
+    previousOpen: React.useRef(undefined),
+    previousOpenIndex: React.useRef(undefined),
+    anchorElement: React.useRef(undefined),
+    wrapper: React.useRef(undefined)
+  };
+  const mobile = useMediaQuery('(pointer: coarse)', {
+    element: refs.root.current
+  });
+  refs.open.current = open;
+  refs.focus.current = focus;
+  refs.direction.current = theme.direction;
+  refs.props.current = props;
+  const close = () => {
+    setOpen(false);
+    if (is('function', onClose_)) onClose_();
+  };
+  const onClose = () => {
+    setInProp(false);
+  };
+  const updateOpenItem = valueNew => {
+    setOpenItem(valueNew);
+    if (is('function', onChange)) onChange(valueNew);
+  };
+  const updateOpen = value__ => {
+    if (value__) {
+      const item = refs.props.current.items.find(item_ => item_.value === value__);
+      if (item) {
+        const itemHTML = refs.items.current.filter(Boolean).find(item_ => item_.dataset.value === item.value);
+        if (itemHTML) {
+          refs.anchorElement.current = itemHTML;
+          if (item.menu) setMenu(item.menu);
+        }
+      }
+    }
+    if (value__) updateOpenItem(value__);
+    if (refs.open.current) {
+      refs.previousOpenIndex.current = refs.props.current.items.findIndex(item_ => item_.value === refs.open.current);
+      refs.previousOpen.current = refs.props.current.items[refs.previousOpenIndex.current];
+    }
+    if (!value__) onClose();else {
+      setInProp(true);
+      setOpen(value__);
+      if (is('function', onOpen)) onOpen();
+    }
+  };
+  const updateOpenPure = () => {
+    setInProp(true);
+  };
+  React.useEffect(() => {
+    refs.menus.current.forEach((item, index) => {
+      if (item) {
+        refs.menuRects.current[index] = item.getBoundingClientRect();
+      }
+    });
+    setInit(true);
+  }, []);
+  React.useEffect(() => {
+    const method = event => {
+      switch (event.key) {
+        case 'Enter':
+          if (refs.focus.current) {
+            if (refs.open.current) updateOpen('');else updateOpen(refs.focus.current?.value);
+          }
+          break;
+        case 'Escape':
+          if (refs.open.current) updateOpen('');
+          break;
+        case 'Home':
+          // If any item is in the focus
+          if (refs.focus.current) {
+            event.preventDefault();
+            const tabIndexItems = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
+            refs.props.current.items.reverse();
+            let index = refs.props.current.items.findIndex(item_ => !item_.disabled && item_.menu);
+            refs.props.current.items.reverse();
+            if (index > -1) {
+              index = refs.props.current.items.length - 1 - index;
+              const item = refs.props.current.items[index];
+              if (item) {
+                const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
+                updateOpen(item.value);
+                if (itemHTML) itemHTML.focus();
+              }
+            }
+          }
+          break;
+        case 'End':
+          // If any item is in the focus
+          if (refs.focus.current) {
+            event.preventDefault();
+            const tabIndexItems = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
+            const index = refs.props.current.items.findIndex(item_ => !item_.disabled && item_.menu);
+            if (index > -1) {
+              const item = refs.props.current.items[index];
+              if (item) {
+                const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
+                updateOpen(item.value);
+                if (itemHTML) itemHTML.focus();
+              }
+            }
+          }
+          break;
+        case 'ArrowUp':
+        case 'ArrowDown':
+        case 'ArrowLeft':
+        case 'ArrowRight':
+          // If any item is in the focus
+          if (refs.focus.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            const tabIndexItems = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
+            const index = refs.props.current.items.findIndex(item_ => item_.value === refs.focus.current.value);
+            let indexNew;
+            let i = index;
+            let item;
+            while (indexNew === undefined && i >= 0 && i < refs.props.current.items.length) {
+              ['ArrowDown'].includes(event.key) || theme.direction === 'ltr' && event.key === 'ArrowLeft' || theme.direction === 'rtl' && event.key === 'ArrowRight' ? i-- : i++;
+              item = refs.props.current.items[i];
+              if (!item?.disabled && item?.menu) indexNew = i;
+            }
+            if (item) {
+              const itemHTML = tabIndexItems.find(item_ => item_.dataset.value === item.value);
+              updateOpen(item.value);
+              if (itemHTML) itemHTML.focus();
+            }
+          }
+          break;
+        default:
+          break;
+      }
+    };
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    rootDocument.addEventListener('keydown', method);
+    return () => {
+      rootDocument.removeEventListener('keydown', method);
+    };
+  }, []);
+  React.useEffect(() => {
+    if (open) {
+      const index = refs.props.current.items.findIndex(item => item?.value === open);
+      const rect = refs.menuRects.current[index];
+      if (rect) {
+        setAppend({
+          width: rect.width,
+          height: rect.height
+        });
+      }
+    }
+  }, [open]);
+  const onBlur = React.useCallback(() => {
+    if (refs.focus.current) {
+      updateOpen('');
+      setFocus('');
+    }
+  }, []);
+  const onFocus = React.useCallback(item => {
+    if (item && !item.disabled && item.menu) {
+      setFocus(item);
+      if (open !== item.value) updateOpen(item.value);
+    }
+  }, [open]);
+  const onMouseLeave = React.useCallback(item => {
+    updateOpen('');
+  }, []);
+  const onMouseEnter = React.useCallback(item => {
+    if (item && !item.disabled && item.menu) {
+      updateOpen(item.value);
+    }
+  }, []);
+  const onClick = React.useCallback(item => {
+    if (item && !item.disabled && item.menu) {
+      open ? updateOpen('') : updateOpen(item.value);
+      setTimeout(() => setFocus(''));
+    }
+  }, [open]);
+  const onClickOutside = React.useCallback(() => {
+    if (open) updateOpen('');
+  }, [open]);
+
+  // If no items don't render anything
+  // not to waste html space
+  if (!items?.length) return;
+  const openIndex = items.findIndex(item_ => item_?.value === open);
+  return /*#__PURE__*/React.createElement(ClickListener, {
+    onClickOutside: onClickOutside
+  }, /*#__PURE__*/React.createElement(Line, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    gap: 0,
+    direction: "column",
+    align: "unset",
+    justify: "unset",
+    className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-root'], className, classes.root])
+  }, other), /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    direction: "row",
+    align: "unset",
+    justify: "unset"
+  }, items.map((item, index) =>
+  // hovered and onClick add to the method
+  is('function', renderItem) ? renderItem(item, index) : /*#__PURE__*/React.createElement(Line, _extends({
+    key: index,
+    ref: item_ => {
+      if (!refs.items.current.includes(item)) refs.items.current.push(item_);
+    },
+    tabIndex: !item.disabled && item.menu ? 0 : undefined,
+    "data-value": item.value,
+    gap: 0.5,
+    direction: "row",
+    align: "center"
+  }, ItemProps, !!item.menu && openOnClick && {
+    onClick: () => onClick(item)
+  }, !!item.menu && !mobile && openOnFocus && {
+    onFocus: () => onFocus(item),
+    onBlur: () => onBlur()
+  }, !!item.menu && openOnHover && {
+    onMouseEnter: () => onMouseEnter(item),
+    onMouseLeave: () => onMouseLeave(item)
+  }, {
+    className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-item', open === item.value && `onesy-MenuDesktop-open`, item.disabled && `onesy-MenuDesktop-disabled`], ItemProps?.className, classes.item, item.disabled && classes.item_disabled])
+  }), /*#__PURE__*/React.createElement(Type, _extends({
+    version: "l1"
+  }, TypeProps), item.name !== undefined ? item.name : item.label), !!item.menu && /*#__PURE__*/React.createElement(IconIndicator, _extends({
+    size: 20,
+    className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-indicator'], classes.indicator, inProp && open === item.value && classes.indicator_open])
+  }, IconProps))))), !init && items.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    ref: item_ => refs.menus.current[index] = item_,
+    key: index,
+    style: {
+      position: 'absolute',
+      visibility: 'hidden'
+    }
+  }, item.menu)), /*#__PURE__*/React.createElement(Append, _extends({
+    open: !!open,
+    anchorElement: refs.anchorElement.current,
+    position: "bottom",
+    alignment: "start",
+    element: _ref => {
+      let {
+        ref: refAppend,
+        values,
+        style: styleAppend
+      } = _ref;
+      return /*#__PURE__*/React.createElement(Wrapper, _extends({
+        ref: refAppend,
+        onMouseEnter: updateOpenPure,
+        onMouseLeave: onMouseLeave
+      }, WrapperProps, {
+        style: _objectSpread(_objectSpread(_objectSpread({}, append), styleAppend), {}, {
+          transition: 'none'
+        }, WrapperProps?.style)
+      }), /*#__PURE__*/React.createElement(TransitionComponent, _extends({
+        in: inProp,
+        onEntered: () => {
+          if (refAppend.current) setTimeout(() => {
+            refAppend.current.style.transition = theme.methods.transitions.make(['width', 'height', 'transform']);
+          }, 14);
+        },
+        onExited: () => {
+          close();
+          if (refAppend.current) refAppend.current.style.transition = 'none';
+        },
+        add: true,
+        removeOnExited: true
+      }, TransitionComponentProps), /*#__PURE__*/React.createElement(Surface, _extends({
+        tonal: tonal,
+        color: color,
+        version: version
+      }, WrapperMenuProps, {
+        className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-menu-wrapper'], WrapperMenuProps?.className, classes.menuWrapper]),
+        style: _objectSpread(_objectSpread({}, append), WrapperMenuProps?.style)
+      }), menu && menuTransition && /*#__PURE__*/React.createElement(Transitions, {
+        switch: true,
+        mode: "in-out-follow"
+      }, /*#__PURE__*/React.createElement(Transition, {
+        key: openItem
+      }, status => {
+        return /*#__PURE__*/React.cloneElement(menu, {
+          // For manual onClose within the element
+          onMenuDesktopClose: onClose,
+          className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-menu', status], ...(is('function', menuTransitionClassName) ? menuTransitionClassName(status, openItem) : []), classes[theme.direction === 'ltr' ? openIndex <= 0 || openIndex < refs.previousOpenIndex.current ? 'menu' : 'menu_reverse' : openIndex <= 0 || openIndex < refs.previousOpenIndex.current ? 'menu_reverse' : 'menu']]),
+          style: _objectSpread(_objectSpread(_objectSpread({
+            position: 'absolute'
+          }, menu?.props?.style), refs.menu.current?.props.style), is('function', menuTransitionStyle) && menuTransitionStyle(status, openItem))
+        });
+      })), menu && !menuTransition && (/*#__PURE__*/React.cloneElement(menu, {
+        // For manual onClose within the element
+        onMenuDesktopClose: onClose,
+        className: classNames([staticClassName('MenuDesktop', theme) && ['onesy-MenuDesktop-menu'], classes.menu]),
+        style: _objectSpread(_objectSpread(_objectSpread({}, menu?.props?.style), refs.menu.current?.style), append)
+      })))));
+    }
+  }, AppendProps))));
+});
+MenuDesktop.displayName = 'onesy-MenuDesktop';
+export default MenuDesktop;