@onesy/ui-react 1.0.163 → 1.0.165

package/Fade/Fade.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
@@ -16,121 +17,230 @@ const _excluded = ["in", "prefix", "run", "append", "add", "enter", "exit", "ent
 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 Fade = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2;
+  const $ = (0, _compilerRuntime.c)(32);
   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.onesyFade) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const {
-      in: inProp,
-      prefix,
-      run,
-      append,
-      add,
-      enter,
-      exit,
-      enterOnAdd,
-      exitOnAdd,
-      noAbruption,
-      removeOnExited,
-      delay,
-      duration: duration_,
-      timing_function,
-      addTransition,
-      onTransition,
-      onAppended,
-      onAdd,
-      onAdding,
-      onAdded,
-      onEnter,
-      onEntering,
-      onEntered,
-      onExit,
-      onExiting,
-      onExited,
-      onRemoved,
-      className,
-      style,
-      children
-    } = props,
-    other = (0, _objectWithoutProperties2.default)(props, _excluded);
-  const refs = {
-    root: _react.default.useRef(undefined)
-  };
-  const styles = status => {
-    var _refs$root;
+  const t0 = 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;
+  const t1 = 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.onesyFade) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default;
+  let t2;
+  if ($[0] !== props_ || $[1] !== t0 || $[2] !== t1) {
+    t2 = _objectSpread(_objectSpread(_objectSpread({}, t0), t1), props_);
+    $[0] = props_;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const props = t2;
+  let addTransition;
+  let children;
+  let className;
+  let inProp;
+  let other;
+  let style;
+  let timing_function;
+  if ($[4] !== props) {
     const {
-      opacity = 1
-    } = refs.root.current && window.getComputedStyle((_refs$root = refs.root) === null || _refs$root === void 0 ? void 0 : _refs$root.current) || {};
-    const allStyles = {
-      appended: {
-        visibility: 'hidden'
-      },
-      add: {
-        transition: 'none',
-        opacity: 0
-      },
-      adding: {
-        opacity: 1
-      },
-      added: {
-        opacity: 1
-      },
-      enter: {
-        transition: 'none',
-        opacity: 0
-      },
-      entering: {
-        opacity: 1
-      },
-      // With no opacity
-      // as if there's inline opacity value
-      // it ie. overrides button disabled class
-      // opacity value
-      entered: {},
-      exit: {
-        opacity
-      },
-      exiting: {
-        opacity: 0
-      },
-      exited: {
-        opacity: 0
-      }
+        in: t3,
+        prefix,
+        run,
+        append,
+        add,
+        enter,
+        exit,
+        enterOnAdd,
+        exitOnAdd,
+        noAbruption,
+        removeOnExited,
+        delay,
+        duration: duration_,
+        timing_function: t4,
+        addTransition: t5,
+        onTransition,
+        onAppended,
+        onAdd,
+        onAdding,
+        onAdded,
+        onEnter,
+        onEntering,
+        onEntered,
+        onExit,
+        onExiting,
+        onExited,
+        onRemoved,
+        className: t6,
+        style: t7,
+        children: t8
+      } = props,
+      t9 = (0, _objectWithoutProperties2.default)(props, _excluded);
+    inProp = t3;
+    timing_function = t4;
+    addTransition = t5;
+    className = t6;
+    style = t7;
+    children = t8;
+    other = t9;
+    $[4] = props;
+    $[5] = addTransition;
+    $[6] = children;
+    $[7] = className;
+    $[8] = inProp;
+    $[9] = other;
+    $[10] = style;
+    $[11] = timing_function;
+  } else {
+    addTransition = $[5];
+    children = $[6];
+    className = $[7];
+    inProp = $[8];
+    other = $[9];
+    style = $[10];
+    timing_function = $[11];
+  }
+  const t3 = _react.default.useRef(undefined);
+  let t4;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      root: t3
     };
-    return allStyles[status];
-  };
-  const duration = (status, property = 'opacity') => {
-    const properties = {
-      opacity: theme.transitions.duration.sm
-    };
-    return `${((0, _utils.is)('simple', duration) ? duration : duration[status]) || properties[property]}ms`;
-  };
-  const timingFunction = status => ((0, _utils.is)('simple', timing_function) ? timing_function : timing_function[status]) || theme.transitions.timing_function.standard;
-  return /*#__PURE__*/_react.default.createElement(_.Transition, (0, _extends2.default)({}, props, {
-    name: "fade"
-  }), (status, ref_) => {
-    var _children$props, _props;
-    return /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, other), {}, {
-      ref: item => {
-        refs.root.current = item;
-        if (ref) {
-          if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
-        }
-        if (ref_) {
-          if ((0, _utils.is)('function', ref_)) ref_(item);else ref_.current = item;
-        }
-        if (children.ref) {
-          if ((0, _utils.is)('function', children.ref)) children.ref(item);else children.ref.current = item;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const refs = t4;
+  let t5;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = status => {
+      var _refs$root;
+      const {
+        opacity: t6
+      } = refs.root.current && window.getComputedStyle((_refs$root = refs.root) === null || _refs$root === void 0 ? void 0 : _refs$root.current) || {};
+      const opacity = t6 === undefined ? 1 : t6;
+      const allStyles = {
+        appended: {
+          visibility: "hidden"
+        },
+        add: {
+          transition: "none",
+          opacity: 0
+        },
+        adding: {
+          opacity: 1
+        },
+        added: {
+          opacity: 1
+        },
+        enter: {
+          transition: "none",
+          opacity: 0
+        },
+        entering: {
+          opacity: 1
+        },
+        entered: {},
+        exit: {
+          opacity
+        },
+        exiting: {
+          opacity: 0
+        },
+        exited: {
+          opacity: 0
         }
-      },
-      className: (0, _styleReact.classNames)([className, children === null || children === void 0 || (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.className]),
-      style: _objectSpread(_objectSpread(_objectSpread({
-        visibility: status === 'exited' && !inProp ? 'hidden' : undefined,
-        transition: `opacity ${duration(status)} ${timingFunction(status)} ${addTransition ? `, ${addTransition}` : ''}`
-      }, styles(status)), children === null || children === void 0 || (_props = children.props) === null || _props === void 0 ? void 0 : _props.style), style)
-    }));
-  });
+      };
+      return allStyles[status];
+    };
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  const styles = t5;
+  let duration;
+  if ($[14] !== theme) {
+    duration = (status_0, t6) => {
+      const property = t6 === undefined ? "opacity" : t6;
+      const properties = {
+        opacity: theme.transitions.duration.sm
+      };
+      return `${((0, _utils.is)("simple", duration) ? duration : duration[status_0]) || properties[property]}ms`;
+    };
+    $[14] = theme;
+    $[15] = duration;
+  } else {
+    duration = $[15];
+  }
+  let t6;
+  if ($[16] !== theme || $[17] !== timing_function) {
+    t6 = status_1 => ((0, _utils.is)("simple", timing_function) ? timing_function : timing_function[status_1]) || theme.transitions.timing_function.standard;
+    $[16] = theme;
+    $[17] = timing_function;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  const timingFunction = t6;
+  let t7;
+  if ($[19] !== addTransition || $[20] !== children || $[21] !== className || $[22] !== duration || $[23] !== inProp || $[24] !== other || $[25] !== ref || $[26] !== style || $[27] !== timingFunction) {
+    t7 = (status_2, ref_) => {
+      var _children, _children2;
+      return /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, other), {}, {
+        ref: item => {
+          refs.root.current = item;
+          if (ref) {
+            if ((0, _utils.is)("function", ref)) {
+              ref(item);
+            } else {
+              ref.current = item;
+            }
+          }
+          if (ref_) {
+            if ((0, _utils.is)("function", ref_)) {
+              ref_(item);
+            } else {
+              ref_.current = item;
+            }
+          }
+          if (children.ref) {
+            if ((0, _utils.is)("function", children.ref)) {
+              children.ref(item);
+            } else {
+              children.ref.current = item;
+            }
+          }
+        },
+        className: (0, _styleReact.classNames)([className, (_children = children) === null || _children === void 0 || (_children = _children.props) === null || _children === void 0 ? void 0 : _children.className]),
+        style: _objectSpread(_objectSpread(_objectSpread({
+          visibility: status_2 === "exited" && !inProp ? "hidden" : undefined,
+          transition: `opacity ${duration(status_2)} ${timingFunction(status_2)} ${addTransition ? `, ${addTransition}` : ""}`
+        }, styles(status_2)), (_children2 = children) === null || _children2 === void 0 || (_children2 = _children2.props) === null || _children2 === void 0 ? void 0 : _children2.style), style)
+      }));
+    };
+    $[19] = addTransition;
+    $[20] = children;
+    $[21] = className;
+    $[22] = duration;
+    $[23] = inProp;
+    $[24] = other;
+    $[25] = ref;
+    $[26] = style;
+    $[27] = timingFunction;
+    $[28] = t7;
+  } else {
+    t7 = $[28];
+  }
+  let t8;
+  if ($[29] !== props || $[30] !== t7) {
+    t8 = /*#__PURE__*/_react.default.createElement(_.Transition, (0, _extends2.default)({}, props, {
+      name: "fade"
+    }), t7);
+    $[29] = props;
+    $[30] = t7;
+    $[31] = t8;
+  } else {
+    t8 = $[31];
+  }
+  return t8;
 });
 Fade.displayName = 'onesy-Fade';
 var _default = exports.default = Fade;

package/FileChoose/FileChoose.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IRef, IElementReference, IPropsAny } from '../types';
-export type TFileChooseValue = File | Array<File>;
-export type IFileChoose = Omit<ILine, 'onClick' | 'onChange'> & {
+export declare type TFileChooseValue = File | Array<File>;
+export declare type IFileChoose = Omit<ILine, 'onClick' | 'onChange'> & {
     inputRef?: IRef;
     max?: number;
     allowedTypes?: Array<string>;

package/FileChoose/FileChoose.js

@@ -49,31 +49,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-FileChoose'
 });
 const FileChoose = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
   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.onesyFileChoose) === 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 Type = _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.Type) || _Type.default;
-  }, [theme]);
-  const Button = _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.Button) || _Button.default;
-  }, [theme]);
-  const IconButton = _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.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Tree = _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.Tree) || _Tree.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.onesyFileChoose) === 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 Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Button) || _Button.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  const Tree = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tree) || _Tree.default;
   const {
       tonal = true,
       color = 'default',
@@ -123,7 +106,7 @@ const FileChoose = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (value_ !== refs.value.current) setValue(value_);
     }
   }, [value_]);
-  const onChange = _react.default.useCallback(valueNew_ => {
+  const onChange = valueNew_ => {
     let valueNew = valueNew_;
 
     // Allowed types
@@ -133,19 +116,19 @@ const FileChoose = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (refs.max.current) valueNew = valueNew.slice(0, refs.max.current);
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
-  }, []);
-  const onChangeMethod = _react.default.useCallback(event => {
-    const valueNew = Array.from(refs.input.current.files);
-    onChange(valueNew);
-  }, []);
+  };
+  const onChangeMethod = event => {
+    const valueNew_0 = Array.from(refs.input.current.files);
+    onChange(valueNew_0);
+  };
   const onRemove = index => {
-    const valueNew = [...value];
-    valueNew.splice(index, 1);
-    onChange(valueNew);
+    const valueNew_1 = [...value];
+    valueNew_1.splice(index, 1);
+    onChange(valueNew_1);
   };
-  const onReset = event => {
+  const onReset = event_0 => {
     if (refs.input.current) refs.input.current.value = '';
-    if ((0, _utils.is)('function', onClick)) onClick(event);
+    if ((0, _utils.is)('function', onClick)) onClick(event_0);
   };
   const Wrapper = files ? Line : _react.default.Fragment;
   const WrapperProps = files ? _objectSpread(_objectSpread({
@@ -170,9 +153,9 @@ const FileChoose = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onClick: onReset,
     size: size
   }, ComponentProps), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-    ref: item => {
-      if (inputRef) inputRef.current = item;
-      refs.input.current = item;
+    ref: item_0 => {
+      if (inputRef) inputRef.current = item_0;
+      refs.input.current = item_0;
     },
     type: "file",
     accept: accept,
@@ -193,8 +176,8 @@ const FileChoose = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     indicator: true,
     indicatorPosition: "end",
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('FileChoose', theme) && ['onesy-FileChoose-files'], classes.files])
-  }, value.map((item, index) => /*#__PURE__*/_react.default.createElement(Tree, {
-    key: index,
+  }, value.map((item_1, index_0) => /*#__PURE__*/_react.default.createElement(Tree, {
+    key: index_0,
     icon: /*#__PURE__*/_react.default.createElement(_IconMaterialDraftW.default, {
       size: "small"
     }),
@@ -203,7 +186,7 @@ const FileChoose = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       color: "default",
       size: 20,
       fontSize: _utils2.iconFontSize,
-      onClick: () => onRemove(index)
+      onClick: () => onRemove(index_0)
     }, /*#__PURE__*/_react.default.createElement(_IconMaterialCloseW.default, null)),
     middle: /*#__PURE__*/_react.default.createElement(Line, {
       gap: 1,
@@ -212,10 +195,10 @@ const FileChoose = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     }, /*#__PURE__*/_react.default.createElement(Type, {
       version: "b2",
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('FileChoose', theme) && ['onesy-FileChoose-file'], classes.file])
-    }, item.name), /*#__PURE__*/_react.default.createElement(Type, {
+    }, item_1.name), /*#__PURE__*/_react.default.createElement(Type, {
       version: "b3",
       priority: "secondary"
-    }, (0, _utils.to)(item.size, 'size-format')))
+    }, (0, _utils.to)(item_1.size, 'size-format')))
   })))));
 });
 FileChoose.displayName = 'onesy-FileChoose';

package/Focus/Focus.d.ts

@@ -2,6 +2,6 @@ import React from 'react';
 import { IBaseElement } from '../types';
 export declare const matches: (value: Element) => any;
 export declare const queryMatchFocusable = "button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled]), details:not([disabled]), summary:not(:disabled)";
-export type IFocus = IBaseElement & {};
+export declare type IFocus = IBaseElement & {};
 declare const Focus: React.FC<IFocus>;
 export default Focus;

package/Focus/Focus.js

@@ -25,11 +25,9 @@ const matches = value => {
 exports.matches = matches;
 const queryMatchFocusable = exports.queryMatchFocusable = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)';
 const Focus = /*#__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.onesyFocus) === 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.onesyFocus) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const refs = {
     focusStart: _react.default.useRef(undefined),
     focusEnd: _react.default.useRef(undefined)
@@ -49,7 +47,7 @@ const Focus = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       element = element.nextSibling;
     }
     const focusEndIndex = allElements.findIndex(item => item === refs.focusEnd.current);
-    return allElements.slice(0, focusEndIndex).flatMap(item => [matches(item)(queryMatchFocusable) ? item : undefined, ...Array.from(item.querySelectorAll(queryMatchFocusable))].filter(Boolean));
+    return allElements.slice(0, focusEndIndex).flatMap(item_0 => [matches(item_0)(queryMatchFocusable) ? item_0 : undefined, ...Array.from(item_0.querySelectorAll(queryMatchFocusable))].filter(Boolean));
   };
   const onKeyDownUp = event => {
     const isTabPressed = event.key === 'Tab' || event.code === KEYCODES.tab;
@@ -62,8 +60,8 @@ const Focus = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }
     } else {
       if (document.activeElement === refs.focusEnd.current || document.activeElement === refs.focusStart.current) {
-        const elements = getElements();
-        if (elements.length) elements[0].focus();
+        const elements_0 = getElements();
+        if (elements_0.length) elements_0[0].focus();
         event.preventDefault();
       }
     }
@@ -79,11 +77,11 @@ const Focus = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-    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.focusStart.current = item;
+      refs.focusStart.current = item_1;
     },
     tabIndex: 0
   }, other)), children, /*#__PURE__*/_react.default.createElement("div", {

package/Form/Form.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElement } from '../types';
-export type IForm = Omit<ILine, 'onSubmit'> & {
+export declare type IForm = Omit<ILine, 'onSubmit'> & {
     accordion?: boolean;
     divider?: boolean;
     name?: string | IElement;