@onesy/ui-react 1.0.163 → 1.0.165

package/Transition/Transition.js

@@ -28,11 +28,9 @@ const STATUS = exports.STATUS = {
   removed: 'removed'
 };
 const Transition = props_ => {
+  var _theme$ui, _theme$ui2;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTransition) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTransition) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
     in: inProp_,
     name,
@@ -94,32 +92,32 @@ const Transition = props_ => {
   refs.inProp.current = inProp;
   refs.prefix.current = prefix;
   _react.default.useEffect(() => {
-    let statusNew;
+    let statusNew_0;
     if (status === 'appended') {
       if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, 'appended');
       if ((0, _utils.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 ((0, _utils.is)('function', onInit)) onInit(refs.root.current);
 
     // Update
-    update(statusNew);
+    update(statusNew_0);
     setInit(true);
   }, []);
   _react.default.useEffect(() => {
     if (init) {
       var _refs$root$current, _refs$root$current2;
-      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
@@ -130,8 +128,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.default.useEffect(() => {
@@ -152,13 +150,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) => {
@@ -177,23 +175,23 @@ const Transition = props_ => {
         return updateStatus(status_);
     }
   };
-  const delay = _react.default.useCallback(async status_ => {
+  const delay = async status__0 => {
     let value = delay_;
     if ((0, _utils.is)('string', value) && theme.transitions.duration[value] !== undefined) value = theme.transitions.duration[value];
-    if ((0, _utils.is)('object', value)) value = value[status_] !== undefined ? value[status_] : value.default;
+    if ((0, _utils.is)('object', value)) value = value[status__0] !== undefined ? value[status__0] : value.default;
     if (!((0, _utils.is)('number', value) && value > 0)) return;
     await (0, _utils.wait)(value);
-  }, [delay_, theme]);
-  const duration = _react.default.useCallback(async status_ => {
-    let value = duration_;
-    if ((0, _utils.is)('string', value) && theme.transitions.duration[value] !== undefined) value = theme.transitions.duration[value];
-    if ((0, _utils.is)('object', value)) value = value[status_] !== undefined ? value[status_] : value.default;
-    if (!(0, _utils.is)('number', value)) value = theme.transitions.duration.rg;
-    if (!((0, _utils.is)('number', value) && value > 0)) return;
-    await (0, _utils.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 ((0, _utils.is)('string', value_0) && theme.transitions.duration[value_0] !== undefined) value_0 = theme.transitions.duration[value_0];
+    if ((0, _utils.is)('object', value_0)) value_0 = value_0[status__1] !== undefined ? value_0[status__1] : value_0.default;
+    if (!(0, _utils.is)('number', value_0)) value_0 = theme.transitions.duration.rg;
+    if (!((0, _utils.is)('number', value_0) && value_0 > 0)) return;
+    await (0, _utils.wait)(value_0);
+  };
+  const add = async status__2 => {
+    if (!add_ || refs.status.current !== status__2) return;
     updateStatus('add');
     await delay('add');
 
@@ -203,11 +201,11 @@ 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_ => {
+  const enter = async status__3 => {
     var _refs$status$current;
-    if (!enter_ || status_ !== 'appended' && (refs.status.current !== status_ || !refs.inProp.current)) return;
+    if (!enter_ || status__3 !== 'appended' && (refs.status.current !== status__3 || !refs.inProp.current)) return;
     updateStatus('enter');
     await delay('enter');
 
@@ -217,9 +215,9 @@ const Transition = props_ => {
     await duration('enter');
     if (((_refs$status$current = refs.status.current) === null || _refs$status$current === void 0 ? void 0 : _refs$status$current.indexOf('exit')) === -1) updateStatus('entered');
   };
-  const exit = async status_ => {
+  const exit = async status__4 => {
     var _refs$status$current2;
-    if (!exit_ || refs.status.current !== status_ || refs.inProp.current) return;
+    if (!exit_ || refs.status.current !== status__4 || refs.inProp.current) return;
     updateStatus('exit');
     await delay('exit');
 
@@ -233,54 +231,54 @@ const Transition = props_ => {
     if ((0, _utils.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 ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onAppended)) onAppended(refs.root.current);
         break;
       case 'add':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onAdd)) onAdd(refs.root.current);
         break;
       case 'adding':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onAdding)) onAdding(refs.root.current);
         break;
       case 'added':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onAdded)) onAdded(refs.root.current);
         break;
       case 'enter':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onEnter)) onEnter(refs.root.current);
         break;
       case 'entering':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onEntering)) onEntering(refs.root.current);
         break;
       case 'entered':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onEntered)) onEntered(refs.root.current);
         break;
       case 'exit':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onExit)) onExit(refs.root.current);
         break;
       case 'exiting':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onExiting)) onExiting(refs.root.current);
         break;
       case 'exited':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onExited)) onExited(refs.root.current);
         break;
       case 'removed':
-        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status_);
+        if ((0, _utils.is)('function', onTransition)) onTransition(refs.root.current, status__5);
         if ((0, _utils.is)('function', onRemoved)) onRemoved(refs.root.current);
         break;
       default:
@@ -296,7 +294,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$cl2 = refs.root.current.className) !== null && _refs$root$current$cl2 !== void 0 && _refs$root$current$cl2.baseVal) refs.root.current.className.baseVal = className_;else refs.root.current.className = className_;
     }
@@ -311,11 +309,11 @@ const Transition = props_ => {
   return /*#__PURE__*/_react.default.createElement(_Context.default.Provider, {
     value: value_
   }, (0, _utils.is)('function', children) ? children(status, refs.root) : /*#__PURE__*/_react.default.cloneElement(children, {
-    ref: item => {
+    ref: item_1 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_1);else ref.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     }
   }));
 };

package/Transition/useTransition.js

@@ -8,6 +8,6 @@ exports.default = useTransition;
 var _react = _interopRequireDefault(require("react"));
 var _Context = _interopRequireDefault(require("./Context"));
 function useTransition() {
-  const value = _react.default.useContext(_Context.default);
+  const value = _react.default.use(_Context.default);
   return value;
 }

package/Transitions/Transitions.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IPropsAny } from '../types';
-export type TTransitionsMode = 'in-out' | 'in-out-follow' | 'out-in';
-export type ITransitions = {
+export declare type TTransitionsMode = 'in-out' | 'in-out-follow' | 'out-in';
+export declare type ITransitions = {
     id?: string;
     mode?: TTransitionsMode;
     switch?: boolean;

package/Transitions/Transitions.js

@@ -13,11 +13,9 @@ var _ = require("..");
 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) { (0, _defineProperty2.default)(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; }
 const Transitions = props_ => {
+  var _theme$ui, _theme$ui2;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTransitions) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTransitions) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
     mode = 'out-in',
     switch: switch_,
@@ -66,7 +64,7 @@ const Transitions = props_ => {
         let newItems = (0, _utils.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 !== null && prev !== void 0 && prev.props.in);
 
           // New or readded previous add it
@@ -112,20 +110,20 @@ const Transitions = props_ => {
     if ((0, _utils.is)('function', element_.props.onExited)) element_.props.onExited(elementHTML);
 
     // Update
-    setChildren(items => {
-      const newItems = [...items];
-      const index = newItems.findIndex(item => (item === null || item === void 0 ? void 0 : item.key) === (element_ === null || element_ === void 0 ? void 0 : 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 === null || item_0 === void 0 ? void 0 : item_0.key) === (element_ === null || element_ === void 0 ? void 0 : 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.default.cloneElement(item, _objectSpread({
+    children_ = children_.map(item_1 => /*#__PURE__*/_react.default.cloneElement(item_1, _objectSpread({
       in: true,
-      onExited: onExited(item)
+      onExited: onExited(item_1)
     }, other)));
   }
 

package/Tree/Tree.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IBaseElement, IElement, IPropsAny, IElementReference, IVersion } from '../types';
-export type ITree = Omit<IBaseElement, 'onChange'> & {
+export declare type ITree = Omit<IBaseElement, 'onChange'> & {
     open?: boolean;
     openDefault?: boolean;
     version?: IVersion;

package/Tree/Tree.js

@@ -113,39 +113,16 @@ const TreeDelays = {
   }
 };
 const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTree) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Checkbox = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Checkbox) || _Checkbox.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
-  }, [theme]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Fade) || _Fade.default;
-  }, [theme]);
-  const Expand = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Expand) || _Expand.default;
-  }, [theme]);
-  const Interaction = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Interaction) || _Interaction.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyTree) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Checkbox = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Checkbox) || _Checkbox.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Fade) || _Fade.default;
+  const Expand = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Expand) || _Expand.default;
+  const Interaction = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Interaction) || _Interaction.default;
   const {
       tonal = true,
       color = 'inherit',
@@ -240,8 +217,8 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     }
   };
-  const onClick = _react.default.useCallback(event => {
-    if ((0, _utils.is)('function', MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.onClick)) MiddleProps.onClick(event);
+  const onClick = event_0 => {
+    if ((0, _utils.is)('function', MiddleProps === null || MiddleProps === void 0 ? void 0 : MiddleProps.onClick)) MiddleProps.onClick(event_0);
     if (refs.inProgressTransition.current) return;
     if (!disabled && !noExpand && children_) {
       const valueNew = !open;
@@ -250,17 +227,17 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (!props.hasOwnProperty('open')) setOpen(valueNew);
       if ((0, _utils.is)('function', onChange)) onChange(valueNew);
     }
-  }, [open, noExpand, children_, disabled]);
+  };
   if (!noTransition) TransitionComponentProps.in = open;else {
     TransitionComponent = _react.default.Fragment;
     TransitionComponentProps = {};
   }
-  const onBlur = _react.default.useCallback(event => {
+  const onBlur = event_1 => {
     if (!disabled) setFocus(false);
-  }, [disabled]);
-  const onFocus = _react.default.useCallback(event => {
+  };
+  const onFocus = event_2 => {
     if (!disabled) setFocus(true);
-  }, [disabled]);
+  };
   const start = _react.default.Children.toArray(start_);
 
   // Icon
@@ -289,26 +266,26 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   if (level > 0 && !noPadding) {
     styles.root.marginInlineStart = `${theme.space.unit * 2.5}px`;
   }
-  const children = _react.default.Children.toArray(children_).map(item => (/*#__PURE__*/_react.default.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.default.Children.toArray(children_).map(item_0 => (/*#__PURE__*/_react.default.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.default.createElement(Surface, (0, _extends2.default)({
-    ref: item => {
+    ref: item_1 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_1);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     },
     tonal: tonal,
     color: color,
@@ -348,8 +325,8 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     justify: "unset"
   }, StartProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-start'], StartProps === null || StartProps === void 0 ? void 0 : StartProps.className, classes.item, classes.aside, classes.start])
-  }), start.map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-    key: index
+  }), start.map((item_2, index_0) => (/*#__PURE__*/_react.default.cloneElement(item_2, {
+    key: index_0
   })))), middle && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     gap: 0,
     id: refs.ids.middle,
@@ -363,8 +340,8 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     justify: "unset"
   }, EndProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-item', 'onesy-Tree-aside', 'onesy-Tree-end'], EndProps === null || EndProps === void 0 ? void 0 : EndProps.className, classes.item, classes.aside, classes.end])
-  }), end.map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-    key: index
+  }), end.map((item_3, index_1) => (/*#__PURE__*/_react.default.cloneElement(item_3, {
+    key: index_1
   }))))), noExpand && children, !noExpand && children && /*#__PURE__*/_react.default.createElement(Expand, (0, _extends2.default)({
     in: open,
     parent: parent || refs.root.current,
@@ -378,8 +355,8 @@ const Tree = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     role: "group"
   }, TreeProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Tree', theme) && ['onesy-Tree-tree'], TreeProps === null || TreeProps === void 0 ? void 0 : TreeProps.className, classes.tree])
-  }), children.map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
-    key: index
+  }), children.map((item_4, index_2) => (/*#__PURE__*/_react.default.cloneElement(item_4, {
+    key: index_2
   })))))));
 });
 Tree.displayName = 'onesy-Tree';

package/Type/Type.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TTypographyItem } from '@onesy/style-react';
 import { IBaseElement } from '../types';
-export type IType = IBaseElement & {
+export declare type IType = IBaseElement & {
     responsive?: boolean;
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
     version?: TTypographyItem;

package/Type/Type.js

@@ -195,16 +195,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Type'
 });
 const Type = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyType) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyType) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
-      color = 'inherit',
-      responsive = true,
+      color: t0,
+      responsive: t1,
       priority,
-      version = 'b2',
+      version: t2,
       align,
       transform,
       size,
@@ -218,6 +216,9 @@ const Type = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const color = t0 === undefined ? "inherit" : t0;
+  const responsive = t1 === undefined ? true : t1;
+  const version = t2 === undefined ? "b2" : t2;
   const {
     classes
   } = useStyle();
@@ -226,24 +227,30 @@ const Type = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   let Component = Component_;
   const map = {
-    h1: ['d1', 'd2', 'd3', 'h1'],
-    h2: ['h2'],
-    h3: ['h3'],
-    h4: ['h4', 't1', 't2', 't3'],
-    h5: ['h5', 'l1', 'l2', 'l3'],
-    p: ['b1', 'b2', 'b3', 'm1', 'm2', 'm3']
+    h1: ["d1", "d2", "d3", "h1"],
+    h2: ["h2"],
+    h3: ["h3"],
+    h4: ["h4", "t1", "t2", "t3"],
+    h5: ["h5", "l1", "l2", "l3"],
+    p: ["b1", "b2", "b3", "m1", "m2", "m3"]
   };
   Object.keys(map).forEach(item => {
-    if (map[item].includes(version) && !Component) Component = item;
+    if (map[item].includes(version) && !Component) {
+      Component = item;
+    }
   });
-  if (!Component) Component = 'p';
+  if (!Component) {
+    Component = "p";
+  }
   if (!classes[`color_${color}`]) {
     styles.root.color = color;
   }
-  if (size !== undefined) styles.root.fontSize = size;
+  if (size !== undefined) {
+    styles.root.fontSize = size;
+  }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Type', theme) && ['onesy-Type-root', version && `onesy-Type-version-${version}`, size && (0, _utils.is)('string', size) && `onesy-Type-size-${size}`, disabled && `onesy-Type-disabled`], className, classes.root, classes[`version_${version}`], responsive && classes[`version_${version}_responsive`], classes[`color_${color}`], priority && classes[`priority_${priority}`], align && classes[`align_${align}`], transform && classes[`transform_${transform}`], fullWidth && classes.fullWidth, disabled && classes.disabled]),
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("Type", theme) && ["onesy-Type-root", version && `onesy-Type-version-${version}`, size && (0, _utils.is)("string", size) && `onesy-Type-size-${size}`, disabled && "onesy-Type-disabled"], className, classes.root, classes[`version_${version}`], responsive && classes[`version_${version}_responsive`], classes[`color_${color}`], priority && classes[`priority_${priority}`], align && classes[`align_${align}`], transform && classes[`transform_${transform}`], fullWidth && classes.fullWidth, disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({
       whiteSpace,
       fontWeight: weight

package/VideoPlayer/VideoPlayer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElementReference, IPropsAny } from '../types';
-export type IVideoPlayer = ILine & {
+export declare type IVideoPlayer = ILine & {
     name?: string;
     src?: string;
     mime?: string;