@onesy/ui-react 1.0.163 → 1.0.165

package/Table/Table.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 _styleReact = require("@onesy/style-react");
 var _Surface = _interopRequireDefault(require("../Surface"));
@@ -36,37 +37,85 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Table'
 });
 const Table = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2;
+  const $ = (0, _compilerRuntime.c)(14);
   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.onesyTable) === 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 Surface = _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.Surface) || _Surface.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.onesyTable) === 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 Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
   const {
-      tonal = true,
-      color = 'themed',
-      size = 'regular',
-      elevation = 1,
+      tonal: t0,
+      color: t1,
+      size: t2,
+      elevation: t3,
       header,
       footer,
       WrapperComponentProps,
-      TableComponent = 'table',
-      WrapperComponent = 'div',
-      Component = 'div',
+      TableComponent: t4,
+      WrapperComponent: t5,
+      Component: t6,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "themed" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const elevation = t3 === undefined ? 1 : t3;
+  const TableComponent = t4 === undefined ? "table" : t4;
+  const WrapperComponent = t5 === undefined ? "div" : t5;
+  const Component = t6 === undefined ? "div" : t6;
   const {
     classes
   } = useStyle();
+  const t7 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Table", theme) && ["onesy-Table-root", `onesy-Table-size-${size}`], className, classes.root]);
+  const t8 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Table", theme) && ["onesy-Table-wrapper"], WrapperComponentProps === null || WrapperComponentProps === void 0 ? void 0 : WrapperComponentProps.className, classes.wrapper]);
+  const t9 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("Table", theme) && ["onesy-Table-table", header && "onesy-Table-header", footer && "onesy-Table-footer"], classes.table]);
+  const t10 = _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,
+    size: item.props.size !== undefined ? item.props.size : size
+  }));
+  let t11;
+  if ($[0] !== TableComponent || $[1] !== t10 || $[2] !== t9) {
+    t11 = /*#__PURE__*/_react.default.createElement(TableComponent, {
+      className: t9
+    }, t10);
+    $[0] = TableComponent;
+    $[1] = t10;
+    $[2] = t9;
+    $[3] = t11;
+  } else {
+    t11 = $[3];
+  }
+  let t12;
+  if ($[4] !== WrapperComponent || $[5] !== WrapperComponentProps || $[6] !== t11 || $[7] !== t8) {
+    t12 = /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({}, WrapperComponentProps, {
+      className: t8
+    }), t11);
+    $[4] = WrapperComponent;
+    $[5] = WrapperComponentProps;
+    $[6] = t11;
+    $[7] = t8;
+    $[8] = t12;
+  } else {
+    t12 = $[8];
+  }
+  let t13;
+  if ($[9] !== color || $[10] !== footer || $[11] !== size || $[12] !== tonal) {
+    t13 = footer && /*#__PURE__*/_react.default.cloneElement(footer, {
+      tonal: footer.props.tonal !== undefined ? footer.props.tonal : tonal,
+      color: footer.props.color !== undefined ? footer.props.color : color,
+      size: footer.props.size !== undefined ? footer.props.size : size
+    });
+    $[9] = color;
+    $[10] = footer;
+    $[11] = size;
+    $[12] = tonal;
+    $[13] = t13;
+  } else {
+    t13 = $[13];
+  }
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     ref: ref,
     gap: 0,
@@ -81,24 +130,12 @@ const Table = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     AdditionalProps: {
       Component
     },
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Table', theme) && [`onesy-Table-root`, `onesy-Table-size-${size}`], className, classes.root])
+    className: t7
   }, other), header && /*#__PURE__*/_react.default.cloneElement(header, {
     tonal: header.props.tonal !== undefined ? header.props.tonal : tonal,
     color: header.props.color !== undefined ? header.props.color : color,
     size: header.props.size !== undefined ? header.props.size : size
-  }), /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({}, WrapperComponentProps, {
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Table', theme) && [`onesy-Table-wrapper`], WrapperComponentProps === null || WrapperComponentProps === void 0 ? void 0 : WrapperComponentProps.className, classes.wrapper])
-  }), /*#__PURE__*/_react.default.createElement(TableComponent, {
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('Table', theme) && [`onesy-Table-table`, header && `onesy-Table-header`, footer && `onesy-Table-footer`], classes.table])
-  }, _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,
-    size: item.props.size !== undefined ? item.props.size : size
-  }))))), footer && /*#__PURE__*/_react.default.cloneElement(footer, {
-    tonal: footer.props.tonal !== undefined ? footer.props.tonal : tonal,
-    color: footer.props.color !== undefined ? footer.props.color : color,
-    size: footer.props.size !== undefined ? footer.props.size : size
-  }));
+  }), t12, t13);
 });
 Table.displayName = 'onesy-Table';
 var _default = exports.default = Table;

package/TableBody/TableBody.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export type ITableBody = ISurface & {
+export declare type ITableBody = ISurface & {
     loading?: boolean;
 };
 declare const TableBody: React.FC<ITableBody>;

package/TableBody/TableBody.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 _styleReact = require("@onesy/style-react");
 var _Surface = _interopRequireDefault(require("../Surface"));
@@ -35,47 +36,67 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TableBody'
 });
 const TableBody = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(9);
   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.onesyTableBody) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Surface = _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.Surface) || _Surface.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.onesyTableBody) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
   const {
-      tonal = true,
-      color = 'themed',
-      size = 'regular',
+      tonal: t0,
+      color: t1,
+      size: t2,
       loading,
-      Component = 'tbody',
+      Component: t3,
       className,
       children: children_
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "themed" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const Component = t3 === undefined ? "tbody" : t3;
   const {
     classes
   } = useStyle();
   const [children, setChildren] = _react.default.useState(children_);
   _react.default.useEffect(() => {
     if (!loading) {
-      if (children_ !== children) setChildren(children_);
+      if (children_ !== children) {
+        setChildren(children_);
+      }
     }
   }, [loading, children_]);
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: ref,
-    tonal: tonal,
-    color: color,
-    role: "rowgroup",
-    Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TableBody', theme) && [`onesy-TableBody-root`, `onesy-TableBody-size-${size}`], className, classes.root, loading && classes.loading])
-  }, other), _react.default.Children.toArray(children).map(item => (/*#__PURE__*/_react.default.cloneElement(item, {
+  const t4 = "rowgroup";
+  const t5 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("TableBody", theme) && ["onesy-TableBody-root", `onesy-TableBody-size-${size}`], className, classes.root, loading && classes.loading]);
+  const t6 = _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,
     size: item.props.size !== undefined ? item.props.size : size,
-    position: 'body'
-  }))));
+    position: "body"
+  }));
+  let t7;
+  if ($[0] !== Component || $[1] !== Surface || $[2] !== color || $[3] !== other || $[4] !== ref || $[5] !== t5 || $[6] !== t6 || $[7] !== tonal) {
+    t7 = /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+      ref: ref,
+      tonal: tonal,
+      color: color,
+      role: t4,
+      Component: Component,
+      className: t5
+    }, other), t6);
+    $[0] = Component;
+    $[1] = Surface;
+    $[2] = color;
+    $[3] = other;
+    $[4] = ref;
+    $[5] = t5;
+    $[6] = t6;
+    $[7] = tonal;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  return t7;
 });
 TableBody.displayName = 'onesy-TableBody';
 var _default = exports.default = TableBody;

package/TableCell/TableCell.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { TLineAlign, TLineJustify } from '../Line/Line';
 import { IBaseElement, IPropsAny } from '../types';
-export type ITableCellSort = 'asc' | 'desc';
-export type ITableCell = IBaseElement & {
+export declare type ITableCellSort = 'asc' | 'desc';
+export declare type ITableCell = IBaseElement & {
     sort?: boolean;
     sortedByDefault?: ITableCellSort;
     sortedBy?: ITableCellSort;

package/TableCell/TableCell.js

@@ -128,28 +128,14 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TableCell'
 });
 const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  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.onesyTableCell) === 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 IconButton = _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.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Divider = _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.Divider) || _Divider.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.onesyTableCell) === 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 IconButton = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.IconButton) || _IconButton.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Divider) || _Divider.default;
   const {
       tonal = true,
       color,
@@ -193,7 +179,7 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   };
   refs.root.current = root;
   refs.sticky.current = sticky;
-  const init = _react.default.useCallback(() => {
+  const init = () => {
     setTimeout(() => {
       if (sticky) {
         var _refs$root$current;
@@ -202,16 +188,16 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           const elements = Array.from(parent.children);
           const index = elements.findIndex(item => item === refs.root.current);
           let elementsOffset = stickyPosition === 'left' ? elements.slice(0, index) : elements.slice(index + 1);
-          elementsOffset = elementsOffset.filter(item => item.classList.contains('onesy-TableCell-sticky'));
-          const offset_ = elementsOffset.reduce((result, item) => {
-            result += item.clientWidth;
+          elementsOffset = elementsOffset.filter(item_0 => item_0.classList.contains('onesy-TableCell-sticky'));
+          const offset_ = elementsOffset.reduce((result, item_1) => {
+            result += item_1.clientWidth;
             return result;
           }, 0);
           setOffset((0, _utils.clamp)(offset_, 0));
         }
       }
     }, 140);
-  }, [sticky, stickyPosition]);
+  };
   _react.default.useEffect(() => {
     // init
     init();
@@ -219,19 +205,19 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     if (sortedBy !== sortedBy_) setSortedBy(sortedBy_);
   }, [sortedBy_]);
-  const onStickyMove = _react.default.useCallback(() => {
+  const onStickyMove = () => {
     const offsetNew = refs.root.current.offsetLeft;
     setStickyActive(refs.offset.current !== offsetNew);
-  }, []);
-  const onStickyInit = _react.default.useCallback(() => {
+  };
+  const onStickyInit = () => {
     if (refs.sticky.current && refs.root.current) {
       refs.root.current.style.position = 'unset';
       refs.offset.current = refs.root.current.offsetLeft;
       refs.root.current.style.position = 'sticky';
       onStickyMove();
     }
-  }, []);
-  const onObserve = _react.default.useCallback(() => {
+  };
+  const onObserve = () => {
     var _refs$root$current2;
     const element = (_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.closest('table');
 
@@ -261,7 +247,7 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     refs.observer.current = new MutationObserver(method);
     refs.observer.current.observe(element, config);
     return refs.observer.current;
-  }, []);
+  };
   _react.default.useEffect(() => {
     if (root && sticky) {
       onStickyInit();
@@ -282,27 +268,27 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       };
     }
   }, [timeout, windowWidth, sticky, stickyPosition, root]);
-  const onSort = _react.default.useCallback(() => {
+  const onSort = () => {
     let valueNew;
-    setSortedBy(item => {
-      valueNew = item === 'asc' ? 'desc' : 'asc';
+    setSortedBy(item_2 => {
+      valueNew = item_2 === 'asc' ? 'desc' : 'asc';
       return valueNew;
     });
     if ((0, _utils.is)('function', onSort_)) onSort_(valueNew);
-  }, [onSort_]);
+  };
   const stylesOther = {};
   if (sticky) {
     stylesOther[stickyPosition === 'left' ? 'left' : 'right'] = offset + (stickyOffset !== undefined ? stickyOffset : 0);
     if (position === 'head') stylesOther.zIndex = '17';
   }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    ref: item => {
+    ref: item_3 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);
-        ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_3);
+        ref.current = item_3;
       }
-      refs.root.current = item;
-      setRoot(item);
+      refs.root.current = item_3;
+      setRoot(item_3);
     },
     role: "cell",
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TableCell', theme) && [`onesy-TableCell-root`, `onesy-TableCell-size-${size}`, sticky && `onesy-TableCell-sticky`, stickyPosition && `onesy-TableCell-sticky-position-${stickyPosition}`, stickyActive && `onesy-TableHead-sticky-active`], className, classes.root, position === 'head' ? classes.head : classes.body, noWeight && classes.noWeight, sticky && [classes.sticky, classes[`sticky_${stickyPosition}`]], stickyActive && classes[`stickyActive_${stickyPosition}`]]),

package/TableFooter/TableFooter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export type ITableFooter = ISurface & {};
+export declare type ITableFooter = ISurface & {};
 declare const TableFooter: React.FC<ITableFooter>;
 export default TableFooter;

package/TableFooter/TableFooter.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 _styleReact = require("@onesy/style-react");
 var _Surface = _interopRequireDefault(require("../Surface"));
@@ -30,34 +31,50 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TableFooter'
 });
 const TableFooter = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements;
+  const $ = (0, _compilerRuntime.c)(9);
   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.onesyTableFooter) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Surface = _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.Surface) || _Surface.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.onesyTableFooter) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
   const {
-      tonal = true,
-      color = 'themed',
-      size = 'regular',
-      Component = 'div',
+      tonal: t0,
+      color: t1,
+      size: t2,
+      Component: t3,
       className,
       children
     } = props,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const tonal = t0 === undefined ? true : t0;
+  const color = t1 === undefined ? "themed" : t1;
+  const size = t2 === undefined ? "regular" : t2;
+  const Component = t3 === undefined ? "div" : t3;
   const {
     classes
   } = useStyle();
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: ref,
-    tonal: tonal,
-    color: color,
-    Component: Component,
-    className: (0, _styleReact.classNames)([(0, _utils.staticClassName)('TableFooter', theme) && [`onesy-TableFooter-root`, `onesy-TableFooter-size-${size}`], className, classes.root, classes[`size_${size}`]])
-  }, other), children);
+  const t4 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("TableFooter", theme) && ["onesy-TableFooter-root", `onesy-TableFooter-size-${size}`], className, classes.root, classes[`size_${size}`]]);
+  let t5;
+  if ($[0] !== Component || $[1] !== Surface || $[2] !== children || $[3] !== color || $[4] !== other || $[5] !== ref || $[6] !== t4 || $[7] !== tonal) {
+    t5 = /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+      ref: ref,
+      tonal: tonal,
+      color: color,
+      Component: Component,
+      className: t4
+    }, other), children);
+    $[0] = Component;
+    $[1] = Surface;
+    $[2] = children;
+    $[3] = color;
+    $[4] = other;
+    $[5] = ref;
+    $[6] = t4;
+    $[7] = tonal;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
 });
 TableFooter.displayName = 'onesy-TableFooter';
 var _default = exports.default = TableFooter;

package/TableHead/TableHead.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export type ITableHead = ISurface & {
+export declare type ITableHead = ISurface & {
     sticky?: boolean;
     stickyOffset?: number;
     loading?: boolean;

package/TableHead/TableHead.js

@@ -48,23 +48,12 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-TableHead'
 });
 const TableHead = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   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.onesyTableHead) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Surface = _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.Surface) || _Surface.default;
-  }, [theme]);
-  const TableRow = _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.TableRow) || _TableRow.default;
-  }, [theme]);
-  const LinearProgress = _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.LinearProgress) || _LinearProgress.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.onesyTableHead) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Surface = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Surface) || _Surface.default;
+  const TableRow = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.TableRow) || _TableRow.default;
+  const LinearProgress = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.LinearProgress) || _LinearProgress.default;
   const {
       tonal = true,
       color = 'themed',
@@ -97,19 +86,19 @@ const TableHead = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   refs.sticky.current = sticky;
   const styleOther = {};
   if (sticky && stickyOffset !== undefined) styleOther.top = stickyOffset;
-  const onStickyMove = _react.default.useCallback(() => {
+  const onStickyMove = () => {
     const offsetNew = refs.root.current.offsetLeft;
     setStickyActive(refs.offset.current !== offsetNew);
-  }, []);
-  const onStickyInit = _react.default.useCallback(() => {
+  };
+  const onStickyInit = () => {
     if (refs.sticky.current && refs.root.current) {
       refs.root.current.style.position = 'unset';
       refs.offset.current = refs.root.current.offsetLeft;
       refs.root.current.style.position = 'sticky';
       onStickyMove();
     }
-  }, []);
-  const onObserve = _react.default.useCallback(() => {
+  };
+  const onObserve = () => {
     var _refs$root$current;
     const element = (_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.closest('table');
 
@@ -139,7 +128,7 @@ const TableHead = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     refs.observer.current = new MutationObserver(method);
     refs.observer.current.observe(element, config);
     return refs.observer.current;
-  }, []);
+  };
   _react.default.useEffect(() => {
     if (root && sticky) {
       onStickyInit();
@@ -175,11 +164,11 @@ const TableHead = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Component: Component,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TableHead', theme) && [`onesy-TableHead-root`, `onesy-TableHead-size-${size}`, sticky && `onesy-TableHead-sticky`, stickyActive && `onesy-TableHead-sticky-active`], className, classes.root, sticky && classes.sticky, stickyActive && classes.stickyActive]),
     style: _objectSpread(_objectSpread({}, style), styleOther)
-  }, other), _react.default.Children.toArray(children).map((item, index) => (/*#__PURE__*/_react.default.cloneElement(item, {
+  }, other), _react.default.Children.toArray(children).map((item_0, index) => (/*#__PURE__*/_react.default.cloneElement(item_0, {
     key: index,
-    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
-    color: item.props.color !== undefined ? item.props.color : color,
-    size: item.props.size !== undefined ? item.props.size : size,
+    tonal: item_0.props.tonal !== undefined ? item_0.props.tonal : tonal,
+    color: item_0.props.color !== undefined ? item_0.props.color : color,
+    size: item_0.props.size !== undefined ? item_0.props.size : size,
     position: 'head'
   }))), loading && /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({}, TableRowLoaderProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('TableHead', theme) && [`onesy-TableHead-row-loader`], TableRowLoaderProps === null || TableRowLoaderProps === void 0 ? void 0 : TableRowLoaderProps.className, classes.rowLoader])

package/TableHeader/TableHeader.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { ISurface } from '../Surface/Surface';
-export type ITableHeader = ISurface & {};
+export declare type ITableHeader = ISurface & {};
 declare const TableHeader: React.FC<ITableHeader>;
 export default TableHeader;