@onesy/ui-react 1.0.164 → 1.0.165

package/esm/TopAppBar/TopAppBar.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "size", "center", "title", "start", "end", "position", "WrapperProps", "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 { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
@@ -121,27 +122,34 @@ const useStyle = styleMethod(theme => ({
   name: 'onesy-TopAppBar'
 });
 const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const $ = _c(24);
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTopAppBar?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTopAppBar?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Type = theme?.elements?.Type || TypeElement;
   const {
-      tonal = true,
-      color = 'primary',
-      version = 'small',
-      size = 'regular',
-      center = true,
+      tonal: t0,
+      color: t1,
+      version: t2,
+      size: t3,
+      center: t4,
       title: title_,
       start: start_,
       end: end_,
       position,
       WrapperProps,
-      Component = 'div',
+      Component: t5,
       className,
       children: children_
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "primary" : t1;
+  const version = t2 === undefined ? "small" : t2;
+  const size = t3 === undefined ? "regular" : t3;
+  const center = t4 === undefined ? true : t4;
+  const Component = t5 === undefined ? "div" : t5;
   const {
     classes
   } = useStyle();
@@ -149,40 +157,122 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     key: index,
     tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
     color: item.props.color !== undefined ? item.props.color : color,
-    version: item.props.version !== undefined ? item.props.version : 'filled',
+    version: item.props.version !== undefined ? item.props.version : "filled",
     elevation: item.props.elevation !== undefined ? item.props.elevation : false
   }));
-  const end = React.Children.toArray(end_).map((item, index) => /*#__PURE__*/React.cloneElement(item, {
-    key: index,
-    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-    color: item.props.color !== undefined ? item.props.color : color,
-    version: item.props.version !== undefined ? item.props.version : 'filled',
-    elevation: item.props.elevation !== undefined ? item.props.elevation : false
+  const end = React.Children.toArray(end_).map((item_0, index_0) => /*#__PURE__*/React.cloneElement(item_0, {
+    key: index_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 : "filled",
+    elevation: item_0.props.elevation !== undefined ? item_0.props.elevation : false
   }));
-  const classNameTitle = classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-title'], classes.title, classes[`title_version_${version}`], version === 'small' && !start.length && classes.title_no_start]);
-  const classNameTitleMedium = classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-title', 'onesy-TopAppBar-title-medium'], classes.title, classes[`title_version_${version}`]]);
+  const classNameTitle = classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-title"], classes.title, classes[`title_version_${version}`], version === "small" && !start.length && classes.title_no_start]);
+  const classNameTitleMedium = classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-title", "onesy-TopAppBar-title-medium"], classes.title, classes[`title_version_${version}`]]);
   let title;
   if (title_) {
-    if (['small', 'center'].includes(version)) {
-      title = is('simple', title_) ? /*#__PURE__*/React.createElement(Type, {
+    if (["small", "center"].includes(version)) {
+      title = is("simple", title_) ? /*#__PURE__*/React.createElement(Type, {
         version: "t1",
         className: classNameTitle
       }, title_) : title_ && /*#__PURE__*/React.cloneElement(title_, {
         tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
-        color: title_.props.color !== undefined ? title_.props.color : 'inherit',
+        color: title_.props.color !== undefined ? title_.props.color : "inherit",
         className: classNameTitle
       });
     } else {
-      title = is('simple', title_) ? /*#__PURE__*/React.createElement(Type, {
-        version: version === 'medium' ? 'h3' : 'h2',
+      title = is("simple", title_) ? /*#__PURE__*/React.createElement(Type, {
+        version: version === "medium" ? "h3" : "h2",
         className: classNameTitleMedium
       }, title_) : title_ && /*#__PURE__*/React.cloneElement(title_, {
         tonal: title_.props.tonal !== undefined ? title_.props.tonal : tonal,
-        color: title_.props.color !== undefined ? title_.props.color : 'inherit',
+        color: title_.props.color !== undefined ? title_.props.color : "inherit",
         className: classNameTitleMedium
       });
     }
   }
+  const t6 = classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-root", `onesy-TopAppBar-version-${version}`, `onesy-TopAppBar-size-${size}`], className, classes.root, position && classes[`position_${position}`], center && classes[`center${["absolute", "fixed"].includes(position) ? "_absolute" : ""}`]]);
+  const t7 = "row";
+  const t8 = "center";
+  const t9 = "space-between";
+  const t10 = 0;
+  const t11 = classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-wrapper"], WrapperProps?.className, classes.wrapper, classes[`version_small_size_${size}`]]);
+  let t12;
+  if ($[0] !== Line || $[1] !== classes.aside || $[2] !== start || $[3] !== theme) {
+    t12 = !!start.length && /*#__PURE__*/React.createElement(Line, {
+      direction: "row",
+      align: "center",
+      justify: "flex-start",
+      gap: 0,
+      className: classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-start"], classes.aside])
+    }, start);
+    $[0] = Line;
+    $[1] = classes.aside;
+    $[2] = start;
+    $[3] = theme;
+    $[4] = t12;
+  } else {
+    t12 = $[4];
+  }
+  let t13;
+  if ($[5] !== title || $[6] !== version) {
+    t13 = ["small", "center"].includes(version) && title;
+    $[5] = title;
+    $[6] = version;
+    $[7] = t13;
+  } else {
+    t13 = $[7];
+  }
+  let t14;
+  if ($[8] !== Line || $[9] !== classes.aside || $[10] !== end || $[11] !== theme) {
+    t14 = !!end.length && /*#__PURE__*/React.createElement(Line, {
+      direction: "row",
+      align: "center",
+      justify: "flex-end",
+      gap: 0,
+      className: classNames([staticClassName("TopAppBar", theme) && ["onesy-TopAppBar-aside", "onesy-TopAppBar-end"], classes.aside])
+    }, end);
+    $[8] = Line;
+    $[9] = classes.aside;
+    $[10] = end;
+    $[11] = theme;
+    $[12] = t14;
+  } else {
+    t14 = $[12];
+  }
+  let t15;
+  if ($[13] !== Line || $[14] !== WrapperProps || $[15] !== t11 || $[16] !== t12 || $[17] !== t13 || $[18] !== t14) {
+    t15 = /*#__PURE__*/React.createElement(Line, _extends({
+      direction: t7,
+      align: t8,
+      justify: t9,
+      gap: t10
+    }, WrapperProps, {
+      className: t11
+    }), t12, t13, t14);
+    $[13] = Line;
+    $[14] = WrapperProps;
+    $[15] = t11;
+    $[16] = t12;
+    $[17] = t13;
+    $[18] = t14;
+    $[19] = t15;
+  } else {
+    t15 = $[19];
+  }
+  let t16;
+  if ($[20] !== Line || $[21] !== title || $[22] !== version) {
+    t16 = ["medium", "large"].includes(version) && /*#__PURE__*/React.createElement(Line, {
+      justify: "flex-end",
+      gap: 0
+    }, title);
+    $[20] = Line;
+    $[21] = title;
+    $[22] = version;
+    $[23] = t16;
+  } else {
+    t16 = $[23];
+  }
   return /*#__PURE__*/React.createElement(Surface, _extends({
     ref: ref,
     color: color,
@@ -193,30 +283,8 @@ const TopAppBar = /*#__PURE__*/React.forwardRef((props_, ref) => {
     AdditionalProps: {
       Component
     },
-    className: classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-root', `onesy-TopAppBar-version-${version}`, `onesy-TopAppBar-size-${size}`], className, classes.root, position && classes[`position_${position}`], center && classes[`center${['absolute', 'fixed'].includes(position) ? '_absolute' : ''}`]])
-  }, other), /*#__PURE__*/React.createElement(Line, _extends({
-    direction: "row",
-    align: "center",
-    justify: "space-between",
-    gap: 0
-  }, WrapperProps, {
-    className: classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-wrapper'], WrapperProps?.className, classes.wrapper, classes[`version_small_size_${size}`]])
-  }), !!start.length && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    gap: 0,
-    className: classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-aside', `onesy-TopAppBar-start`], classes.aside])
-  }, start), ['small', 'center'].includes(version) && title, !!end.length && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "flex-end",
-    gap: 0,
-    className: classNames([staticClassName('TopAppBar', theme) && ['onesy-TopAppBar-aside', `onesy-TopAppBar-end`], classes.aside])
-  }, end)), ['medium', 'large'].includes(version) && /*#__PURE__*/React.createElement(Line, {
-    justify: "flex-end",
-    gap: 0
-  }, title));
+    className: t6
+  }, other), t15, t16);
 });
 TopAppBar.displayName = 'onesy-TopAppBar';
 export default TopAppBar;

package/esm/Transition/Transition.js

@@ -22,7 +22,7 @@ export const STATUS = {
 };
 const Transition = props_ => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTransition?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTransition?.props?.default), props_);
   const {
     in: inProp_,
     name,
@@ -84,31 +84,31 @@ const Transition = props_ => {
   refs.inProp.current = inProp;
   refs.prefix.current = prefix;
   React.useEffect(() => {
-    let statusNew;
+    let statusNew_0;
     if (status === 'appended') {
       if (is('function', onTransition)) onTransition(refs.root.current, 'appended');
       if (is('function', onAppended)) onAppended(refs.root.current);
     }
     if (inProp) {
-      statusNew = add_ ? STATUS.add : STATUS.entered;
-      if (enterOnAdd) statusNew = STATUS.enter;
+      statusNew_0 = add_ ? STATUS.add : STATUS.entered;
+      if (enterOnAdd) statusNew_0 = STATUS.enter;
     } else {
-      statusNew = enterOnAdd || removeOnExited ? STATUS.removed : STATUS.exited;
-      if (exitOnAdd) statusNew = STATUS.exit;
+      statusNew_0 = enterOnAdd || removeOnExited ? STATUS.removed : STATUS.exited;
+      if (exitOnAdd) statusNew_0 = STATUS.exit;
     }
     if (is('function', onInit)) onInit(refs.root.current);
 
     // Update
-    update(statusNew);
+    update(statusNew_0);
     setInit(true);
   }, []);
   React.useEffect(() => {
     if (init) {
-      let statusNew;
+      let statusNew_1;
       if (inProp) {
-        if ([STATUS.enter, STATUS.entered].indexOf(status) === -1) statusNew = STATUS.enter;
+        if ([STATUS.enter, STATUS.entered].indexOf(status) === -1) statusNew_1 = STATUS.enter;
       } else {
-        if ([STATUS.exit, STATUS.exited].indexOf(status) === -1) statusNew = STATUS.exit;
+        if ([STATUS.exit, STATUS.exited].indexOf(status) === -1) statusNew_1 = STATUS.exit;
       }
 
       // Added
@@ -119,8 +119,8 @@ const Transition = props_ => {
         update('appended');
 
         // Prevent update batches
-        setTimeout(() => update(statusNew), preEnterAppendTimeout);
-      } else update(statusNew);
+        setTimeout(() => update(statusNew_1), preEnterAppendTimeout);
+      } else update(statusNew_1);
     }
   }, [inProp]);
   React.useEffect(() => {
@@ -141,13 +141,13 @@ const Transition = props_ => {
       };
       subs.current.status.subscribe(sub);
     } else if (inProp_ && noAbruption && ['exit', 'exiting'].indexOf(subs.current.status.value) > -1) {
-      const sub = item => {
-        if (item === 'exited') {
+      const sub_0 = item_0 => {
+        if (item_0 === 'exited') {
           setInProp(inProp_);
-          subs.current.status.unsubscribe(sub);
+          subs.current.status.unsubscribe(sub_0);
         }
       };
-      subs.current.status.subscribe(sub);
+      subs.current.status.subscribe(sub_0);
     } else if (!inProp_ && noAbruption && subs.current.status.value === 'entered' || inProp_ && noAbruption && subs.current.status.value === 'exited' || inProp_ !== inProp) setInProp(inProp_);
   }, [inProp_]);
   const update = async (status_, pause) => {
@@ -166,23 +166,23 @@ const Transition = props_ => {
         return updateStatus(status_);
     }
   };
-  const delay = React.useCallback(async status_ => {
+  const delay = async status__0 => {
     let value = delay_;
     if (is('string', value) && theme.transitions.duration[value] !== undefined) value = theme.transitions.duration[value];
-    if (is('object', value)) value = value[status_] !== undefined ? value[status_] : value.default;
+    if (is('object', value)) value = value[status__0] !== undefined ? value[status__0] : value.default;
     if (!(is('number', value) && value > 0)) return;
     await wait(value);
-  }, [delay_, theme]);
-  const duration = React.useCallback(async status_ => {
-    let value = duration_;
-    if (is('string', value) && theme.transitions.duration[value] !== undefined) value = theme.transitions.duration[value];
-    if (is('object', value)) value = value[status_] !== undefined ? value[status_] : value.default;
-    if (!is('number', value)) value = theme.transitions.duration.rg;
-    if (!(is('number', value) && value > 0)) return;
-    await wait(value);
-  }, [duration_, theme]);
-  const add = async status_ => {
-    if (!add_ || refs.status.current !== status_) return;
+  };
+  const duration = async status__1 => {
+    let value_0 = duration_;
+    if (is('string', value_0) && theme.transitions.duration[value_0] !== undefined) value_0 = theme.transitions.duration[value_0];
+    if (is('object', value_0)) value_0 = value_0[status__1] !== undefined ? value_0[status__1] : value_0.default;
+    if (!is('number', value_0)) value_0 = theme.transitions.duration.rg;
+    if (!(is('number', value_0) && value_0 > 0)) return;
+    await wait(value_0);
+  };
+  const add = async status__2 => {
+    if (!add_ || refs.status.current !== status__2) return;
     updateStatus('add');
     await delay('add');
 
@@ -192,10 +192,10 @@ const Transition = props_ => {
 
     // await duration('add');
 
-    if (refs.status.current === status_) updateStatus('added');
+    if (refs.status.current === status__2) updateStatus('added');
   };
-  const enter = async status_ => {
-    if (!enter_ || status_ !== 'appended' && (refs.status.current !== status_ || !refs.inProp.current)) return;
+  const enter = async status__3 => {
+    if (!enter_ || status__3 !== 'appended' && (refs.status.current !== status__3 || !refs.inProp.current)) return;
     updateStatus('enter');
     await delay('enter');
 
@@ -205,8 +205,8 @@ const Transition = props_ => {
     await duration('enter');
     if (refs.status.current?.indexOf('exit') === -1) updateStatus('entered');
   };
-  const exit = async status_ => {
-    if (!exit_ || refs.status.current !== status_ || refs.inProp.current) return;
+  const exit = async status__4 => {
+    if (!exit_ || refs.status.current !== status__4 || refs.inProp.current) return;
     updateStatus('exit');
     await delay('exit');
 
@@ -220,54 +220,54 @@ const Transition = props_ => {
     if (is('function', onEntered_)) onEntered_(element);
     if (run && inProp) setInProp(false);
   };
-  const updateStatus = status_ => {
-    setStatus(status_);
+  const updateStatus = status__5 => {
+    setStatus(status__5);
 
     // Subscriptions
-    subs.current.status.emit(status_);
-    switch (status_) {
+    subs.current.status.emit(status__5);
+    switch (status__5) {
       case 'appended':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onAppended)) onAppended(refs.root.current);
         break;
       case 'add':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onAdd)) onAdd(refs.root.current);
         break;
       case 'adding':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onAdding)) onAdding(refs.root.current);
         break;
       case 'added':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onAdded)) onAdded(refs.root.current);
         break;
       case 'enter':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onEnter)) onEnter(refs.root.current);
         break;
       case 'entering':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onEntering)) onEntering(refs.root.current);
         break;
       case 'entered':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onEntered)) onEntered(refs.root.current);
         break;
       case 'exit':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onExit)) onExit(refs.root.current);
         break;
       case 'exiting':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onExiting)) onExiting(refs.root.current);
         break;
       case 'exited':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onExited)) onExited(refs.root.current);
         break;
       case 'removed':
-        if (is('function', onTransition)) onTransition(refs.root.current, status_);
+        if (is('function', onTransition)) onTransition(refs.root.current, status__5);
         if (is('function', onRemoved)) onRemoved(refs.root.current);
         break;
       default:
@@ -282,7 +282,7 @@ const Transition = props_ => {
       className_ = className_.replace(new RegExp(`(^| )${refs.prefix.current || ''}(add|enter|exit)(ed|ing)?($| )`, 'g'), ' ');
 
       // Add
-      className_ += ` ${refs.prefix.current || ''}${status_}`;
+      className_ += ` ${refs.prefix.current || ''}${status__5}`;
       className_ = className_.replace(/ +/g, ' ').trim();
       if (refs.root.current.className?.baseVal) refs.root.current.className.baseVal = className_;else refs.root.current.className = className_;
     }
@@ -297,11 +297,11 @@ const Transition = props_ => {
   return /*#__PURE__*/React.createElement(TransitionContext.Provider, {
     value: value_
   }, is('function', children) ? children(status, refs.root) : /*#__PURE__*/React.cloneElement(children, {
-    ref: item => {
+    ref: item_1 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_1);else ref.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     }
   }));
 };

package/esm/Transition/useTransition.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import TransitionContext from './Context';
 export default function useTransition() {
-  const value = React.useContext(TransitionContext);
+  const value = React.use(TransitionContext);
   return value;
 }

package/esm/Transitions/Transitions.js

@@ -7,7 +7,7 @@ import { useOnesyTheme } from '@onesy/style-react';
 import { STATUS } from '..';
 const Transitions = props_ => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTransitions?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTransitions?.props?.default), props_);
   const {
     mode = 'out-in',
     switch: switch_,
@@ -56,7 +56,7 @@ const Transitions = props_ => {
         let newItems = unique([...items, ...newChildren], 'key');
         newItems = newItems.map(item => {
           const prev = items.find(item_ => item_.key === item.key);
-          const next = newChildren.find(item_ => item_.key === item.key);
+          const next = newChildren.find(item__0 => item__0.key === item.key);
           const isExiting = !prev?.props.in;
 
           // New or readded previous add it
@@ -102,20 +102,20 @@ const Transitions = props_ => {
     if (is('function', element_.props.onExited)) element_.props.onExited(elementHTML);
 
     // Update
-    setChildren(items => {
-      const newItems = [...items];
-      const index = newItems.findIndex(item => item?.key === element_?.key);
-      if (index > -1) newItems.splice(index, 1);
-      return newItems;
+    setChildren(items_0 => {
+      const newItems_0 = [...items_0];
+      const index = newItems_0.findIndex(item_0 => item_0?.key === element_?.key);
+      if (index > -1) newItems_0.splice(index, 1);
+      return newItems_0;
     });
   };
   let children_ = children;
 
   // Init
   if (!init && !switch_) {
-    children_ = children_.map(item => /*#__PURE__*/React.cloneElement(item, _objectSpread({
+    children_ = children_.map(item_1 => /*#__PURE__*/React.cloneElement(item_1, _objectSpread({
       in: true,
-      onExited: onExited(item)
+      onExited: onExited(item_1)
     }, other)));
   }
 

package/esm/Tree/Tree.js

@@ -107,14 +107,14 @@ const TreeDelays = {
 };
 const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTree?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Checkbox = React.useMemo(() => theme?.elements?.Checkbox || CheckboxElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Expand = React.useMemo(() => theme?.elements?.Expand || ExpandElement, [theme]);
-  const Interaction = React.useMemo(() => theme?.elements?.Interaction || InteractionElement, [theme]);
+  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 {
       tonal = true,
       color = 'inherit',
@@ -208,8 +208,8 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
       }
     }
   };
-  const onClick = React.useCallback(event => {
-    if (is('function', MiddleProps?.onClick)) MiddleProps.onClick(event);
+  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;
@@ -218,17 +218,17 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (!props.hasOwnProperty('open')) setOpen(valueNew);
       if (is('function', onChange)) onChange(valueNew);
     }
-  }, [open, noExpand, children_, disabled]);
+  };
   if (!noTransition) TransitionComponentProps.in = open;else {
     TransitionComponent = React.Fragment;
     TransitionComponentProps = {};
   }
-  const onBlur = React.useCallback(event => {
+  const onBlur = event_1 => {
     if (!disabled) setFocus(false);
-  }, [disabled]);
-  const onFocus = React.useCallback(event => {
+  };
+  const onFocus = event_2 => {
     if (!disabled) setFocus(true);
-  }, [disabled]);
+  };
   const start = React.Children.toArray(start_);
 
   // Icon
@@ -257,26 +257,26 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
   if (level > 0 && !noPadding) {
     styles.root.marginInlineStart = `${theme.space.unit * 2.5}px`;
   }
-  const children = React.Children.toArray(children_).map(item => (/*#__PURE__*/React.cloneElement(item, {
-    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-    color: item.props.color !== undefined ? item.props.color : color,
-    version: item.props.version !== undefined ? item.props.version : version,
-    line: item.props.line !== undefined ? item.props.line : line,
-    checkbox: item.props.checkbox !== undefined ? item.props.checkbox : checkbox,
-    IconArrow: item.props.IconArrow !== undefined ? item.props.IconArrow : IconArrow,
-    indicator: item.props.indicator !== undefined ? item.props.indicator : indicator,
-    indicatorPosition: item.props.indicatorPosition !== undefined ? item.props.indicatorPosition : indicatorPosition,
-    noExpand: item.props.noExpand !== undefined ? item.props.noExpand : noExpand,
-    noTransition: item.props.noTransition !== undefined ? item.props.noTransition : noTransition,
-    parentDisabled: item.props.parentDisabled !== undefined ? item.props.parentDisabled : parentDisabled || disabled,
+  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__*/React.createElement(Surface, _extends({
-    ref: item => {
+    ref: item_1 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
+        if (is('function', ref)) ref(item_1);else if (ref?.current) ref.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     },
     tonal: tonal,
     color: color,
@@ -316,8 +316,8 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
     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])
-  }), start.map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
-    key: index
+  }), start.map((item_2, index_0) => (/*#__PURE__*/React.cloneElement(item_2, {
+    key: index_0
   })))), middle && /*#__PURE__*/React.createElement(Line, _extends({
     gap: 0,
     id: refs.ids.middle,
@@ -331,8 +331,8 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
     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])
-  }), end.map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
-    key: index
+  }), end.map((item_3, index_1) => (/*#__PURE__*/React.cloneElement(item_3, {
+    key: index_1
   }))))), noExpand && children, !noExpand && children && /*#__PURE__*/React.createElement(Expand, _extends({
     in: open,
     parent: parent || refs.root.current,
@@ -346,8 +346,8 @@ const Tree = /*#__PURE__*/React.forwardRef((props_, ref) => {
     role: "group"
   }, TreeProps, {
     className: classNames([staticClassName('Tree', theme) && ['onesy-Tree-tree'], TreeProps?.className, classes.tree])
-  }), children.map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
-    key: index
+  }), children.map((item_4, index_2) => (/*#__PURE__*/React.cloneElement(item_4, {
+    key: index_2
   })))))));
 });
 Tree.displayName = 'onesy-Tree';