@onesy/ui-react 1.0.59 → 1.0.63

package/esm/NavigationItem/NavigationItem.js

@@ -1,297 +0,0 @@
-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", "value", "vertical", "name", "label", "icon", "iconSelected", "selected", "disabled", "IconWrapperComponent", "onFocus", "onBlur", "onKeyDown", "onMouseDown", "onMouseEnter", "onMouseLeave", "onTouchStart", "TooltipProps", "IconWrapperProps", "className", "style", "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 { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import TypeElement from '../Type';
-import FadeElement from '../Fade';
-import LineElement from '../Line';
-import TooltipElement from '../Tooltip';
-import TransitionElement from '../Transition';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {
-    display: 'inline-flex',
-    justifyContent: 'center',
-    flex: '1 1 auto',
-    userSelect: 'none',
-    cursor: 'pointer',
-    padding: `${theme.methods.space.value(1.5, 'px')} 0 ${theme.methods.space.value(2, 'px')}`,
-    minHeight: '80px'
-  },
-  vertical: {
-    flex: '0 0 auto',
-    padding: '0px',
-    minHeight: '52px',
-    width: '100%'
-  },
-  iconWrapper: {
-    position: 'absolute',
-    top: '0',
-    height: '32px',
-    width: '64px'
-  },
-  iconWrapper_center: {
-    top: '50%',
-    transform: 'translateY(-50%)',
-    transition: theme.methods.transitions.make(['top', 'transform'])
-  },
-  iconWrapper_center_selected: {
-    top: '0',
-    transform: 'translateY(0)'
-  },
-  icon: {
-    lineHeight: '0'
-  },
-  labelWrapper: {
-    position: 'absolute',
-    bottom: '0'
-  },
-  label: {
-    position: 'absolute',
-    bottom: '0'
-  },
-  indicator: {
-    position: 'absolute',
-    inset: '0',
-    width: '100%',
-    height: '100%',
-    borderRadius: theme.methods.shape.radius.value(40, 'px'),
-    opacity: '0',
-    transform: 'scaleX(0.74)',
-    transition: theme.methods.transitions.make(['opacity', 'transform']),
-    pointerEvents: 'none',
-    background: 'currentColor'
-  },
-  indicator_enter: {
-    opacity: '0',
-    transform: 'scaleX(0.74)'
-  },
-  indicator_entering: {
-    opacity: '1',
-    transform: 'scaleX(1)'
-  },
-  indicator_entered: {
-    opacity: '1',
-    transform: 'scaleX(1)'
-  },
-  indicator_exit: {
-    opacity: '1',
-    transform: 'scaleX(1)'
-  },
-  indicator_exiting: {
-    opacity: '0',
-    transform: 'scaleX(1)',
-    transition: theme.methods.transitions.make(['opacity', 'transform'], {
-      duration: 0
-    })
-  },
-  indicator_exited: {
-    opacity: '0',
-    transform: 'scaleX(0.74)'
-  },
-  indicator_hover: {
-    opacity: theme.palette.visual_contrast.default.opacity.hover
-  },
-  indicator_selected: {
-    opacity: theme.palette.visual_contrast.default.opacity.selected
-  },
-  indicator_focus: {
-    opacity: theme.palette.visual_contrast.default.opacity.focus
-  },
-  indicator_pressed: {
-    opacity: theme.palette.visual_contrast.default.opacity.press
-  },
-  disabled: {
-    opacity: theme.palette.visual_contrast.default.opacity.disabled,
-    pointerEvents: 'none',
-    cursor: 'default'
-  }
-}), {
-  name: 'onesy-NavigationItem'
-});
-
-// To do
-
-// Long press label in tooltip
-
-const NavigationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNavigationItem?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Transition = React.useMemo(() => theme?.elements?.Transition || TransitionElement, [theme]);
-  const {
-      tonal = true,
-      color = 'primary',
-      version = 'regular',
-      value,
-      vertical,
-      name,
-      label,
-      icon,
-      iconSelected,
-      selected,
-      disabled,
-      IconWrapperComponent = 'span',
-      onFocus: onFocus_,
-      onBlur: onBlur_,
-      onKeyDown: onKeyDown_,
-      onMouseDown: onMouseDown_,
-      onMouseEnter: onMouseEnter_,
-      onMouseLeave: onMouseLeave_,
-      onTouchStart: onTouchStart_,
-      TooltipProps,
-      IconWrapperProps,
-      className,
-      style,
-      children: children_
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const [focus, setFocus] = React.useState(false);
-  const [hover, setHover] = React.useState(false);
-  const [mouseDown, setMouseDown] = React.useState(false);
-  const refs = {
-    root: React.useRef(undefined),
-    props: React.useRef(undefined),
-    hover: React.useRef(undefined)
-  };
-  const styles = {
-    root: {},
-    icon: {},
-    label: {},
-    indicator: {}
-  };
-  refs.props.current = props;
-  refs.hover.current = hover;
-  React.useEffect(() => {
-    const onMouseUp = () => {
-      if (!refs.props.current.disabled) {
-        setMouseDown(false);
-        setFocus(false);
-      }
-    };
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    rootDocument.addEventListener('mouseup', onMouseUp);
-    return () => {
-      rootDocument.removeEventListener('mouseup', onMouseUp);
-    };
-  }, []);
-  React.useEffect(() => {
-    if (!selected) {
-      if (refs.hover.current) setHover(false);
-    }
-  }, [selected]);
-  const onKeyDown = React.useCallback(event => {
-    if (!disabled) {
-      if (event.key === 'Enter') {
-        if (is('function', props.onClick)) props.onClick(event);
-      }
-    }
-    if (is('function', onKeyDown_)) onKeyDown_(event);
-  }, []);
-  const onFocus = React.useCallback(event => {
-    if (!disabled) setFocus(true);
-    if (is('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = React.useCallback(event => {
-    if (!disabled) setFocus(false);
-    if (is('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onTouchStart = React.useCallback(event => {
-    if (!disabled) setMouseDown(true);
-    if (is('function', onTouchStart)) onTouchStart(event);
-  }, []);
-  const onMouseDown = React.useCallback(event => {
-    if (!disabled) setMouseDown(true);
-    if (is('function', onMouseDown_)) onMouseDown_(event);
-  }, []);
-  const onMouseEnter = React.useCallback(event => {
-    if (!disabled) setHover(true);
-    if (is('function', onMouseEnter_)) onMouseEnter_(event);
-  }, []);
-  const onMouseLeave = React.useCallback(event => {
-    if (!refs.props.current.disabled) setHover(false);
-    if (is('function', onMouseLeave_)) onMouseLeave_(event);
-  }, []);
-  let palette;
-  if (!theme.palette.color[color] && !['themed', 'inverted', 'default', 'inherit'].includes(color)) {
-    palette = theme.methods.color(color);
-  }
-  if (!tonal) {
-    let background = theme.palette.color[color]?.main;
-    if (color === 'default') background = theme.palette.background.default.primary;
-    styles.icon.color = styles.label.color = styles.indicator.color = theme.methods.palette.color.text(palette?.main || background, true, 'light');
-  } else {
-    styles.indicator.color = palette?.main || (color === 'default' ? theme.palette.text.default.primary : theme.palette.color[color].main);
-    styles.icon.color = styles.label.color = theme.methods.palette.color.value(color, 5, true, palette);
-  }
-  const LabelWrapper = version === 'auto' ? Fade : React.Fragment;
-  const LabelWrapperProps = {};
-  if (version === 'auto') {
-    LabelWrapperProps.in = selected;
-    LabelWrapperProps.className = classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label'], classes.labelWrapper]);
-  }
-  const Icon = selected && iconSelected || icon;
-  return /*#__PURE__*/React.createElement(Tooltip, _extends({
-    label: label || value,
-    position: "top",
-    alignment: "center",
-    longPress: true,
-    touch: false,
-    hover: false,
-    focus: false
-  }, TooltipProps), /*#__PURE__*/React.createElement("span", _extends({
-    tabIndex: !disabled ? 0 : undefined,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onKeyDown: onKeyDown,
-    onTouchStart: onTouchStart,
-    onMouseDown: onMouseDown,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-root', selected && 'onesy-NavigationItem-selected', hover && `onesy-NavigationItem-hover`, mouseDown && `onesy-NavigationItem-mouse-down`, focus && `onesy-NavigationItem-focus`, disabled && `onesy-NavigationItem-disabled`], className, classes.root, vertical && classes.vertical, disabled && classes.disabled]),
-    style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    ref: item => {
-      if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
-      }
-      refs.root.current = item;
-    },
-    direction: "column",
-    align: "center",
-    justify: "center",
-    gap: 0.5,
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-item'], classes.item])
-  }, Icon && /*#__PURE__*/React.createElement(Line, {
-    Component: "span",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-icon-wrapper'], classes.iconWrapper, ['none', 'auto'].includes(version) && classes.iconWrapper_center, ['auto'].includes(version) && selected && classes.iconWrapper_center_selected])
-  }, /*#__PURE__*/React.createElement(Transition, {
-    in: hover || focus || selected
-  }, status => /*#__PURE__*/React.createElement("span", {
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-indicator'], classes.indicator, classes[`indicator_${status}`], selected && classes.indicator_selected, hover && classes.indicator_hover, focus && classes.indicator_focus, mouseDown && classes.indicator_pressed]),
-    style: styles.indicator
-  })), /*#__PURE__*/React.createElement(IconWrapperComponent, _extends({}, IconWrapperProps, {
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-icon'], IconWrapperProps?.className, classes.icon])
-  }), /*#__PURE__*/React.cloneElement(Icon, {
-    style: _objectSpread(_objectSpread({}, Icon.props.style), styles.icon)
-  }))), ['regular', 'auto'].includes(version) && /*#__PURE__*/React.createElement(LabelWrapper, LabelWrapperProps, /*#__PURE__*/React.createElement(Type, {
-    version: "b3",
-    className: classNames([staticClassName('NavigationItem', theme) && ['onesy-NavigationItem-label'], classes.label]),
-    style: styles.label
-  }, name !== undefined ? name : label)))));
-});
-NavigationItem.displayName = 'onesy-NavigationItem';
-export default NavigationItem;

package/esm/NotFound/NotFound.js

@@ -1,71 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["name", "to", "link", "renderButton", "fullHeight", "start", "end", "ButtonProps", "TypeProps", "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 { useNavigate } from 'react-router-dom';
-import { is, isEnvironment } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import SectionElement from '../Section';
-import TypeElement from '../Type';
-import ButtonElement from '../Button';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {},
-  fullHeight: {
-    height: '100vh'
-  }
-}), {
-  name: 'onesy-NotFound'
-});
-const NotFound = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyNotFound?.props?.default), props_), [props_]);
-  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
-  const {
-      name = 'Page not found 🫠',
-      to = '/',
-      link = '',
-      renderButton,
-      fullHeight,
-      start,
-      end,
-      ButtonProps,
-      TypeProps,
-      className
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const navigate = isEnvironment('browser') && useNavigate();
-  const onTo = React.useCallback(() => {
-    if (link) window.open(link, 'blank');else navigate(to);
-  }, [to, link]);
-  return /*#__PURE__*/React.createElement(Section, _extends({
-    ref: ref,
-    flex: true,
-    fullWidth: true,
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-root`], className, classes.root, fullHeight && classes.fullHeight])
-  }, other), start, /*#__PURE__*/React.createElement(Type, _extends({
-    version: "h3",
-    align: "center"
-  }, TypeProps, {
-    className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-type`], TypeProps?.className])
-  }), name), is('function', renderButton) ? renderButton({}) : /*#__PURE__*/React.createElement(Button, _extends({
-    color: "default",
-    version: "outlined",
-    size: "small",
-    onClick: onTo
-  }, ButtonProps, {
-    className: classNames([staticClassName('NotFound', theme) && [`onesy-NotFound-button`], ButtonProps?.className, classes.button])
-  }), "Back"), end);
-});
-NotFound.displayName = 'onesy-NotFound';
-export default NotFound;

package/esm/Page/Page.js

@@ -1,112 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["back", "forward", "noHeader", "name", "IconBack", "IconForward", "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 { useNavigate } from 'react-router-dom';
-import { is, isEnvironment } from '@onesy/utils';
-import { style as styleMethod, classNames, useOnesyTheme } from '@onesy/style-react';
-import IconMaterialArrowBack from '@onesy/icons-material-rounded-react/IconMaterialArrowBackW100';
-import IconMaterialArrowForward from '@onesy/icons-material-rounded-react/IconMaterialArrowForwardW100';
-import IconButtonElement from '../IconButton';
-import LineElement from '../Line';
-import TooltipElement from '../Tooltip';
-import TypeElement from '../Type';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {
-    position: 'relative',
-    height: '100%',
-    maxWidth: '1024px',
-    padding: theme.methods.space.value(3, 'px'),
-    '& .onesy-overflow-y': {
-      height: '0px',
-      flex: '1 1 auto',
-      overflowX: 'hidden',
-      overflowY: 'auto'
-    }
-  },
-  name: {
-    maxWidth: '440px'
-  }
-}), {
-  name: 'onesy'
-});
-const Page = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPage?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const {
-      back,
-      forward,
-      noHeader,
-      name,
-      IconBack = IconMaterialArrowBack,
-      IconForward = IconMaterialArrowForward,
-      Component = Line,
-      className,
-      children
-    } = props,
-    other = _objectWithoutProperties(props, _excluded);
-  const {
-    classes
-  } = useStyle();
-  const navigate = isEnvironment('browser') && useNavigate();
-  const IconButtonProps = {
-    color: 'inherit'
-  };
-  const navigation = (back || forward) && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    fullWidth: true
-  }, back ? /*#__PURE__*/React.createElement(Tooltip, {
-    name: (back?.name !== undefined ? back.name : back?.label) || 'Back'
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => navigate(back?.to)
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconBack, null))) : /*#__PURE__*/React.createElement("span", null), forward ? /*#__PURE__*/React.createElement(Tooltip, {
-    name: (forward?.name !== undefined ? forward.name : forward?.label) || 'Forward'
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: () => navigate(forward?.to)
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconForward, null))) : /*#__PURE__*/React.createElement("span", null));
-  const header = !noHeader && (navigation || name) && /*#__PURE__*/React.createElement(Line, {
-    gap: 2,
-    direction: "column",
-    fullWidth: true
-  }, navigation, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    fullWidth: true
-  }, is('string', name) ? /*#__PURE__*/React.createElement(Type, {
-    version: "t1",
-    color: "inherit",
-    align: "center",
-    className: classes.name
-  }, name) : name));
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
-    gap: 4,
-    direction: "column",
-    justify: "unset",
-    align: "unset",
-    fullWidth: true,
-    flex: true,
-    className: classNames([staticClassName('Page', theme) && ['onesy-Page-root'], className, classes.root])
-  }, other), header, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "column",
-    justify: "unset",
-    align: "unset",
-    fullWidth: true,
-    flex: true
-  }, children));
-});
-Page.displayName = 'onesy-Page';
-export default Page;