@onesy/ui-react/esm/Tree/Tree.js

UI for React

import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["ref", "tonal", "color", "version", "open", "openDefault", "onChange", "selected", "line", "indicator", "arrow", "checkbox", "indicatorPosition", "level", "icon", "iconOpen", "start", "middle", "end", "button", "noTransition", "noExpand", "noPadding", "parentDisabled", "disabled", "ExpandProps", "MainProps", "StartProps", "MiddleProps", "EndProps", "IndicatorProps", "TransitionComponentProps", "TreeProps", "IconArrow", "TransitionComponent", "Component", "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 { clamp, 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 CheckboxElement from '../Checkbox';
import SurfaceElement from '../Surface';
import TypeElement from '../Type';
import FadeElement from '../Fade';
import ExpandElement from '../Expand';
import InteractionElement from '../Interaction';
import LineElement from '../Line';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(theme => ({
  root: {
    position: 'relative'
  },
  line: {
    '&::before': {
      content: "''",
      position: 'absolute',
      insetInlineStart: '-12px',
      height: '100%',
      width: '2px',
      background: theme.palette.light ? theme.palette.color.neutral[90] : theme.palette.color.neutral[40]
    },
    '&:last-of-type': {
      '&::before': {
        height: '2px'
      }
    }
  },
  main: {
    // Reset
    fontFamily: 'inherit',
    background: 'transparent',
    border: 'none',
    fontSize: '100%',
    lineHeight: '1.15',
    margin: '0',
    position: 'relative',
    padding: `${theme.methods.space.value(0.25, 'px')} ${theme.methods.space.value(1, 'px')}`,
    borderRadius: `${theme.shape.radius.unit * 0.5}px`
  },
  main_line: {
    '&::before': {
      content: "''",
      position: 'absolute',
      top: 'calc(50% - 15px)',
      insetInlineStart: '-12px',
      width: '10px',
      height: '14px',
      borderLeft: '2px solid',
      borderBottom: '2px solid',
      color: theme.palette.light ? theme.palette.color.neutral[90] : theme.palette.color.neutral[40],
      borderColor: theme.palette.light ? theme.palette.color.neutral[90] : theme.palette.color.neutral[40],
      borderBottomLeftRadius: '6px',
      transform: `rotateY(${theme.direction === 'ltr' ? 0 : 180}deg)`
    }
  },
  item: {
    padding: `${theme.methods.space.value(0.25, 'px')} 0`
  },
  middle: {
    flex: '1 1 auto'
  },
  indicator: {
    transition: theme.methods.transitions.make('transform')
  },
  indicator_open: {
    transform: 'rotate(-180deg)'
  },
  button: {
    // Reset
    fontFamily: 'inherit',
    '-webkit-appearance': 'none',
    appearance: 'none',
    color: 'inherit',
    background: 'transparent',
    border: 'none',
    fontSize: '100%',
    lineHeight: '1.15',
    padding: '0',
    margin: '0',
    overflow: 'visible',
    textTransform: 'none',
    userSelect: 'none',
    cursor: 'pointer'
  },
  disabled: {
    pointerEvents: 'none',
    cursor: 'default',
    opacity: theme.palette.visual_contrast.default.opacity.disabled
  }
}), {
  name: 'onesy-Tree'
});
const TreeDelays = {
  Transition: {
    enter: 70
  }
};
const Tree = props_ => {
  const theme = useOnesyTheme();
  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTree?.props?.default), props_);
  const Line = theme?.elements?.Line || LineElement;
  const Checkbox = theme?.elements?.Checkbox || CheckboxElement;
  const Surface = theme?.elements?.Surface || SurfaceElement;
  const Type = theme?.elements?.Type || TypeElement;
  const Fade = theme?.elements?.Fade || FadeElement;
  const Expand = theme?.elements?.Expand || ExpandElement;
  const Interaction = theme?.elements?.Interaction || InteractionElement;
  const {
      ref,
      tonal = true,
      color = 'inherit',
      version = 'text',
      open: open_,
      openDefault,
      onChange,
      selected,
      line,
      indicator,
      arrow = true,
      checkbox,
      indicatorPosition = 'start',
      level = 0,
      icon,
      iconOpen,
      start: start_,
      middle,
      end: end_,
      button = true,
      noTransition,
      noExpand,
      noPadding,
      parentDisabled,
      disabled,
      ExpandProps,
      MainProps: MainProps_,
      StartProps,
      MiddleProps,
      EndProps,
      IndicatorProps,
      TransitionComponentProps: TransitionComponentProps_,
      TreeProps,
      IconArrow = IconMaterialExpandMore,
      TransitionComponent: TransitionComponent_ = Fade,
      Component = 'div',
      className,
      style,
      children: children_
    } = props,
    other = _objectWithoutProperties(props, _excluded);
  const {
    classes
  } = useStyle();
  const [init, setInit] = React.useState(false);
  const [focus, setFocus] = React.useState(false);
  const [open, setOpen] = React.useState(openDefault !== undefined ? openDefault : open_);
  const refs = {
    root: React.useRef(undefined),
    ids: {
      middle: React.useId()
    },
    inProgressTransition: React.useRef(null)
  };
  const styles = {
    root: {}
  };
  let TransitionComponent = TransitionComponent_;
  let TransitionComponentProps = _objectSpread({
    add: true,
    delay: {
      enter: TreeDelays.Transition.enter
    }
  }, TransitionComponentProps_);
  React.useEffect(() => {
    setInit(true);
  }, []);
  React.useEffect(() => {
    if (init) {
      if (open_ !== open) setOpen(open_);
    }
  }, [open_]);
  const onKeyDown = event => {
    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
    if (level === 0) {
      let allElements = [];
      let index = 0;
      if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
        allElements = Array.from(refs.root.current.querySelectorAll(`[tabindex='0']`));
      }
      switch (event.key) {
        case 'ArrowUp':
        case 'ArrowDown':
          index = clamp(allElements.findIndex(item => item === rootDocument.activeElement), 0);
          event.key === 'ArrowDown' ? index++ : index--;
          allElements[clamp(index, 0, allElements.length - 1)].focus();
          event.preventDefault();
          return;
        default:
          break;
      }
    }
  };
  const onClick = event_0 => {
    if (is('function', MiddleProps?.onClick)) MiddleProps.onClick(event_0);
    if (refs.inProgressTransition.current) return;
    if (!disabled && !noExpand && children_) {
      const valueNew = !open;

      // Update inner or controlled
      if (!props.hasOwnProperty('open')) setOpen(valueNew);
      if (is('function', onChange)) onChange(valueNew);
    }
  };
  if (!noTransition) TransitionComponentProps.in = open;else {
    TransitionComponent = React.Fragment;
    TransitionComponentProps = {};
  }
  const onBlur = event_1 => {
    if (!disabled) setFocus(false);
  };
  const onFocus = event_2 => {
    if (!disabled) setFocus(true);
  };
  const start = React.Children.toArray(start_);

  // Icon
  if (!open ? icon : iconOpen || icon) start.push(!open ? icon : iconOpen || icon);
  const end = React.Children.toArray(end_);
  if (indicator && button && children_ && !noExpand) {
    let Indicator;
    if (arrow) {
      Indicator = /*#__PURE__*/_jsx(IconArrow, _objectSpread({
        className: classNames([classes.indicator, open && classes.indicator_open])
      }, IndicatorProps));
    }
    if (checkbox) {
      Indicator = /*#__PURE__*/_jsx(Checkbox, _objectSpread({
        size: "small",
        checked: open
      }, IndicatorProps));
    }
    if (indicatorPosition === 'start') start.unshift(Indicator);else if (indicatorPosition === 'end') end.push(Indicator);
  }
  const MainProps = _objectSpread({}, MainProps_);
  if (!disabled) {
    MainProps.onBlur = onBlur;
    MainProps.onFocus = onFocus;
  }
  if (level > 0 && !noPadding) {
    styles.root.marginInlineStart = `${theme.space.unit * 2.5}px`;
  }
  const children = React.Children.toArray(children_).map(item_0 => (/*#__PURE__*/React.cloneElement(item_0, {
    tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
    color: item_0.props.color !== undefined ? item_0.props.color : color,
    version: item_0.props.version !== undefined ? item_0.props.version : version,
    line: item_0.props.line !== undefined ? item_0.props.line : line,
    checkbox: item_0.props.checkbox !== undefined ? item_0.props.checkbox : checkbox,
    IconArrow: item_0.props.IconArrow !== undefined ? item_0.props.IconArrow : IconArrow,
    indicator: item_0.props.indicator !== undefined ? item_0.props.indicator : indicator,
    indicatorPosition: item_0.props.indicatorPosition !== undefined ? item_0.props.indicatorPosition : indicatorPosition,
    noExpand: item_0.props.noExpand !== undefined ? item_0.props.noExpand : noExpand,
    noTransition: item_0.props.noTransition !== undefined ? item_0.props.noTransition : noTransition,
    parentDisabled: item_0.props.parentDisabled !== undefined ? item_0.props.parentDisabled : parentDisabled || disabled,
    level: level + 1
  })));
  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
    ref: item_1 => {
      if (ref) {
        if (is('function', ref)) ref(item_1);else if (ref?.current) ref.current = item_1;
      }
      refs.root.current = item_1;
    },
    tonal: tonal,
    color: color,
    version: version,
    gap: 0,
    align: "unset",
    justify: "unset",
    onKeyDown: onKeyDown,
    role: level === 0 ? 'tree' : 'treeitem',
    "aria-labelledby": refs.ids.middle,
    "aria-expanded": open,
    "aria-selected": selected,
    Component: Line,
    AdditionalProps: {
      Component
    },
    className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-root', children ? `onesy-Tree-children` : `onesy-Tree-empty`, parentDisabled && `onesy-Tree-parent-disabled`, disabled && `onesy-Tree-disabled`], className, classes.root, level > 0 && line && classes.line, disabled && classes.disabled]),
    style: _objectSpread(_objectSpread({}, styles.root), style)
  }, other), {}, {
    children: [/*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
      gap: 1,
      tabIndex: !disabled && !parentDisabled ? 0 : -1,
      onClick: onClick,
      direction: "row",
      align: "center",
      justify: "unset",
      role: button && children ? 'button' : undefined,
      Component: button && children ? 'button' : 'div'
    }, MainProps), {}, {
      className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-main'], MainProps?.className, classes.main, button && classes.button, level > 0 && line && classes.main_line]),
      children: [button && /*#__PURE__*/_jsx(Interaction, {
        selected: selected,
        pulse: focus
      }), !!start.length && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
        gap: 0,
        direction: "row",
        align: "center",
        justify: "unset"
      }, StartProps), {}, {
        className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-start'], StartProps?.className, classes.item, classes.aside, classes.start]),
        children: start.map((item_2, index_0) => (/*#__PURE__*/React.cloneElement(item_2, {
          key: index_0
        })))
      })), middle && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
        gap: 0,
        id: refs.ids.middle,
        Component: is('simple', middle) ? Type : undefined
      }, MiddleProps), {}, {
        className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-middle', 'onesy-Tree-end'], MiddleProps?.className, classes.item, classes.middle]),
        children: middle
      })), !!end.length && /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
        gap: 0,
        direction: "row",
        align: "center",
        justify: "unset"
      }, EndProps), {}, {
        className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-end'], EndProps?.className, classes.item, classes.aside, classes.end]),
        children: end.map((item_3, index_1) => (/*#__PURE__*/React.cloneElement(item_3, {
          key: index_1
        })))
      }))]
    })), noExpand && children, !noExpand && children && /*#__PURE__*/_jsx(Expand, _objectSpread(_objectSpread({
      in: open,
      parent: parent || refs.root.current,
      onTransition: (element, status) => {
        refs.inProgressTransition.current = !['entered', 'removed'].includes(status);
      }
    }, ExpandProps), {}, {
      children: /*#__PURE__*/_jsx(TransitionComponent, _objectSpread(_objectSpread({}, TransitionComponentProps), {}, {
        children: /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
          gap: 0,
          align: "unset",
          justify: "unset",
          role: "group"
        }, TreeProps), {}, {
          className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-tree'], TreeProps?.className, classes.tree]),
          children: children.map((item_4, index_2) => (/*#__PURE__*/React.cloneElement(item_4, {
            key: index_2
          })))
        }))
      }))
    }))]
  }));
};
Tree.displayName = 'onesy-Tree';
export default Tree;