@onesy/ui-react 1.0.172 → 1.0.173

package/esm/Surface/Surface.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "elevation", "backgroundOpacity", "noBackground", "noOutline", "AdditionalProps", "Component", "className", "style", "children"];
@@ -8,6 +7,7 @@ import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   // Color
@@ -563,7 +563,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Surface'
 });
-const Surface = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Surface = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySurface?.props?.default), props_);
   const {
@@ -819,13 +819,13 @@ const Surface = /*#__PURE__*/React.forwardRef((props_, ref) => {
       palette
     }));
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref
-  }, AdditionalProps, {
+  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread(_objectSpread({}, AdditionalProps), {}, {
     className: classNames([staticClassName("Surface", theme) && ["onesy-Surface-root"], AdditionalProps?.className, className, classes.root, classes[`version_${version}`], classes[`version_${version}_color_${color}`], classes[`elevation_${elevation}`], tonal && classes[`version_${version}_tonal_${is("string", tonal) ? `${tonal}_` : ""}color_${color}`], noBackground && classes.noBackground, noOutline && classes.noOutline]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), children && React.Children.toArray(children).filter(Boolean).map(_temp));
-});
+  }, other), {}, {
+    children: children && React.Children.toArray(children).filter(Boolean).map(_temp)
+  }));
+};
 Surface.displayName = 'onesy-Surface';
 export default Surface;
 function _temp(item, index) {

package/esm/Switch/Switch.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 const _excluded = ["style", "children"],
@@ -12,6 +11,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import KeyframesElement from '../Keyframes';
 import IconButtonElement from '../IconButton';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -245,9 +245,11 @@ const Icon = props => {
   }
   let t2;
   if ($[10] !== other || $[11] !== t0 || $[12] !== t1) {
-    t2 = /*#__PURE__*/React.createElement("span", _extends({
+    t2 = /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
       style: t0
-    }, other), t1);
+    }, other), {}, {
+      children: t1
+    }));
     $[10] = other;
     $[11] = t0;
     $[12] = t1;
@@ -257,7 +259,7 @@ const Icon = props => {
   }
   return t2;
 };
-const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Switch = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesySwitch?.props?.default), props_);
   const Keyframes = theme?.elements?.Keyframes || KeyframesElement;
@@ -691,8 +693,7 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
         break;
     }
   };
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
     tabIndex: disabled ? -1 : 0,
     role: "switch",
     "aria-checked": value,
@@ -700,41 +701,48 @@ const Switch = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onKeyDown: onKeyDown,
     className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-root', `onesy-Switch-size-${size}`, value && `onesy-Switch-checked`, disabled && `onesy-Switch-disabled`], className, classes.root, classes[`color_${color}`], classes[`size_${size}`], tonal && classes[`tonal_color_${color}`], disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({}, style), styles.root)
-  }, other), /*#__PURE__*/React.createElement("input", {
-    ref: item_0 => {
-      if (inputRef) inputRef.current = item_0;
-      refs.input.current = item_0;
-    },
-    tabIndex: -1,
-    type: "checkbox",
-    checked: value,
-    onChange: onUpdate,
-    className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-input'], classes.input]),
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(Keyframes, {
-    keyframes: keyframes[refs.value.current ? 'checked' : 'unchecked'],
-    update: refs.value.current,
-    appendStatusPost: !refs.value.current ? 'doneStart' : 'doneEnd',
-    append: true
-  }, status => {
-    if (refs.value.current && status === 'doneEnd' || !refs.value.current && status === 'doneStart') refs.animation.current = false;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-background'], classes.background, disabled && classes.background_disabled]),
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.background), status === 'appended' && initial().background[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().background[status])
-    }), /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-border'], classes.border, classes[`color_${color}`], tonal && classes[`border_tonal_color_${color}`]]),
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.border), status === 'appended' && initial().border[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().border[status])
-    }), /*#__PURE__*/React.createElement(IconButton, {
-      tabIndex: "-1",
-      size: size,
-      className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-icon-button'], classes.iconButton]),
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.iconButton), status === 'appended' && initial().iconButton[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().iconButton[status])
-    }, /*#__PURE__*/React.createElement(Icon, {
-      size: size,
-      className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-icon'], classes.icon]),
-      style: _objectSpread(_objectSpread({}, status === 'appended' && initial().icon[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().icon[status])
-    }, (status === 'appended' && refs.value.current || ['growEnd', 'doneEnd'].includes(status)) && OnIcon || (status === 'appended' && !refs.value.current || ['growStart', 'doneStart'].includes(status)) && OffIcon)));
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx("input", {
+      ref: item_0 => {
+        if (inputRef) inputRef.current = item_0;
+        refs.input.current = item_0;
+      },
+      tabIndex: -1,
+      type: "checkbox",
+      checked: value,
+      onChange: onUpdate,
+      className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-input'], classes.input]),
+      disabled: disabled
+    }), /*#__PURE__*/_jsx(Keyframes, {
+      keyframes: keyframes[refs.value.current ? 'checked' : 'unchecked'],
+      update: refs.value.current,
+      appendStatusPost: !refs.value.current ? 'doneStart' : 'doneEnd',
+      append: true,
+      children: status => {
+        if (refs.value.current && status === 'doneEnd' || !refs.value.current && status === 'doneStart') refs.animation.current = false;
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("span", {
+            className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-background'], classes.background, disabled && classes.background_disabled]),
+            style: _objectSpread(_objectSpread(_objectSpread({}, styles.background), status === 'appended' && initial().background[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().background[status])
+          }), /*#__PURE__*/_jsx("span", {
+            className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-border'], classes.border, classes[`color_${color}`], tonal && classes[`border_tonal_color_${color}`]]),
+            style: _objectSpread(_objectSpread(_objectSpread({}, styles.border), status === 'appended' && initial().border[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().border[status])
+          }), /*#__PURE__*/_jsx(IconButton, {
+            tabIndex: "-1",
+            size: size,
+            className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-icon-button'], classes.iconButton]),
+            style: _objectSpread(_objectSpread(_objectSpread({}, styles.iconButton), status === 'appended' && initial().iconButton[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().iconButton[status]),
+            children: /*#__PURE__*/_jsx(Icon, {
+              size: size,
+              className: classNames([staticClassName('Switch', theme) && ['onesy-Switch-icon'], classes.icon]),
+              style: _objectSpread(_objectSpread({}, status === 'appended' && initial().icon[refs.value.current ? 'checked' : 'unchecked']), styleKeyframes().icon[status]),
+              children: (status === 'appended' && refs.value.current || ['growEnd', 'doneEnd'].includes(status)) && OnIcon || (status === 'appended' && !refs.value.current || ['growStart', 'doneStart'].includes(status)) && OffIcon
+            })
+          })]
+        });
+      }
+    })]
   }));
-});
+};
 Switch.displayName = 'onesy-Switch';
 export default Switch;

package/esm/Tab/Tab.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "version", "size", "value", "onChange", "active", "index", "name", "label", "icon", "iconPosition", "activateOnFocus", "tooltip", "disabled", "onBlur", "onFocus", "LineProps", "TooltipProps", "Component", "className", "children"];
@@ -14,6 +13,7 @@ import SurfaceElement from '../Surface';
 import LineElement from '../Line';
 import InteractionElement from '../Interaction';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     // Reset
@@ -73,8 +73,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Tab'
 });
-const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(29);
+const Tab = props_ => {
+  const $ = _c(28);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTab?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -159,7 +159,7 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t9 = classNames([staticClassName("Tab", theme) && ["onesy-Tab-root", `onesy-Tab-version-${version}`, `onesy-Tab-size-${size}`, active && "onesy-Tab-active", disabled && "onesy-Tab-disabled"], className, classes.root, classes[`size_${size}`], active && classes.active, disabled && classes.disabled]);
   let t10;
   if ($[0] !== Interaction || $[1] !== focus) {
-    t10 = /*#__PURE__*/React.createElement(Interaction, {
+    t10 = /*#__PURE__*/_jsx(Interaction, {
       pulse: focus
     });
     $[0] = Interaction;
@@ -173,24 +173,27 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t13 = "center";
   const t14 = "center";
   const t15 = classNames([staticClassName("Tab", theme) && ["onesy-Tab-line"], LineProps?.className, classes.line]);
-  const t16 = label !== undefined && (is("simple", label) ? /*#__PURE__*/React.createElement(Type, {
+  const t16 = label !== undefined && (is("simple", label) ? /*#__PURE__*/_jsx(Type, {
     version: typeVersion,
-    className: classNames([staticClassName("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]])
-  }, label) : label);
-  const t17 = children !== undefined && (is("simple", children) ? /*#__PURE__*/React.createElement(Type, {
+    className: classNames([staticClassName("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]]),
+    children: label
+  }) : label);
+  const t17 = children !== undefined && (is("simple", children) ? /*#__PURE__*/_jsx(Type, {
     version: typeVersion,
-    className: classNames([staticClassName("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]])
-  }, children) : children);
+    className: classNames([staticClassName("Tab", theme) && ["onesy-Tab-type"], classes[`type_${size}`]]),
+    children: children
+  }) : children);
   let t18;
   if ($[3] !== Line || $[4] !== LineProps || $[5] !== icon || $[6] !== t15 || $[7] !== t16 || $[8] !== t17) {
-    t18 = /*#__PURE__*/React.createElement(Line, _extends({
+    t18 = /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
       gap: t11,
       direction: t12,
       align: t13,
       justify: t14
-    }, LineProps, {
-      className: t15
-    }), icon, t16, t17);
+    }, LineProps), {}, {
+      className: t15,
+      children: [icon, t16, t17]
+    }));
     $[3] = Line;
     $[4] = LineProps;
     $[5] = icon;
@@ -202,9 +205,8 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
     t18 = $[9];
   }
   let t19;
-  if ($[10] !== Component || $[11] !== Surface || $[12] !== active || $[13] !== color || $[14] !== onBlur || $[15] !== onFocus || $[16] !== other || $[17] !== ref || $[18] !== t10 || $[19] !== t18 || $[20] !== t7 || $[21] !== t9 || $[22] !== tonal || $[23] !== value) {
-    t19 = /*#__PURE__*/React.createElement(Surface, _extends({
-      ref: ref,
+  if ($[10] !== Component || $[11] !== Surface || $[12] !== active || $[13] !== color || $[14] !== onBlur || $[15] !== onFocus || $[16] !== other || $[17] !== t10 || $[18] !== t18 || $[19] !== t7 || $[20] !== t9 || $[21] !== tonal || $[22] !== value) {
+    t19 = /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
       tabIndex: t7,
       tonal: tonal,
       color: color,
@@ -215,7 +217,9 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
       "data-onesy-tab-value": value,
       Component: Component,
       className: t9
-    }, other), t10, t18);
+    }, other), {}, {
+      children: [t10, t18]
+    }));
     $[10] = Component;
     $[11] = Surface;
     $[12] = active;
@@ -223,28 +227,29 @@ const Tab = /*#__PURE__*/React.forwardRef((props_, ref) => {
     $[14] = onBlur;
     $[15] = onFocus;
     $[16] = other;
-    $[17] = ref;
-    $[18] = t10;
-    $[19] = t18;
-    $[20] = t7;
-    $[21] = t9;
-    $[22] = tonal;
-    $[23] = value;
-    $[24] = t19;
+    $[17] = t10;
+    $[18] = t18;
+    $[19] = t7;
+    $[20] = t9;
+    $[21] = tonal;
+    $[22] = value;
+    $[23] = t19;
   } else {
-    t19 = $[24];
+    t19 = $[23];
   }
   let t20;
-  if ($[25] !== Wrapper || $[26] !== t19 || $[27] !== wrapperProps) {
-    t20 = /*#__PURE__*/React.createElement(Wrapper, wrapperProps, t19);
-    $[25] = Wrapper;
-    $[26] = t19;
-    $[27] = wrapperProps;
-    $[28] = t20;
+  if ($[24] !== Wrapper || $[25] !== t19 || $[26] !== wrapperProps) {
+    t20 = /*#__PURE__*/_jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
+      children: t19
+    }));
+    $[24] = Wrapper;
+    $[25] = t19;
+    $[26] = wrapperProps;
+    $[27] = t20;
   } else {
-    t20 = $[28];
+    t20 = $[27];
   }
   return t20;
-});
+};
 Tab.displayName = 'onesy-Tab';
 export default Tab;

package/esm/Table/Table.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "size", "elevation", "header", "footer", "WrapperComponentProps", "TableComponent", "WrapperComponent", "Component", "className", "children"];
@@ -10,6 +9,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import SurfaceElement from '../Surface';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: _objectSpread({
     borderRadius: `${theme.shape.radius.unit * 2}px`,
@@ -29,7 +29,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Table'
 });
-const Table = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Table = props_ => {
   const $ = _c(14);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTable?.props?.default), props_);
@@ -70,9 +70,10 @@ const Table = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }));
   let t11;
   if ($[0] !== TableComponent || $[1] !== t10 || $[2] !== t9) {
-    t11 = /*#__PURE__*/React.createElement(TableComponent, {
-      className: t9
-    }, t10);
+    t11 = /*#__PURE__*/_jsx(TableComponent, {
+      className: t9,
+      children: t10
+    });
     $[0] = TableComponent;
     $[1] = t10;
     $[2] = t9;
@@ -82,9 +83,10 @@ const Table = /*#__PURE__*/React.forwardRef((props_, ref) => {
   }
   let t12;
   if ($[4] !== WrapperComponent || $[5] !== WrapperComponentProps || $[6] !== t11 || $[7] !== t8) {
-    t12 = /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, WrapperComponentProps, {
-      className: t8
-    }), t11);
+    t12 = /*#__PURE__*/_jsx(WrapperComponent, _objectSpread(_objectSpread({}, WrapperComponentProps), {}, {
+      className: t8,
+      children: t11
+    }));
     $[4] = WrapperComponent;
     $[5] = WrapperComponentProps;
     $[6] = t11;
@@ -108,8 +110,7 @@ const Table = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } else {
     t13 = $[13];
   }
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     gap: 0,
     direction: "column",
     align: "unset",
@@ -123,11 +124,13 @@ const Table = /*#__PURE__*/React.forwardRef((props_, ref) => {
       Component
     },
     className: t7
-  }, other), header && /*#__PURE__*/React.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
-  }), t12, t13);
-});
+  }, other), {}, {
+    children: [header && /*#__PURE__*/React.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
+    }), t12, t13]
+  }));
+};
 Table.displayName = 'onesy-Table';
 export default Table;

package/esm/TableBody/TableBody.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "size", "loading", "Component", "className", "children"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import SurfaceElement from '../Surface';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     display: 'table-row-group',
@@ -28,8 +28,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TableBody'
 });
-const TableBody = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(9);
+const TableBody = props_ => {
+  const $ = _c(8);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableBody?.props?.default), props_);
   const Surface = theme?.elements?.Surface || SurfaceElement;
@@ -67,28 +67,28 @@ const TableBody = /*#__PURE__*/React.forwardRef((props_, ref) => {
     position: "body"
   }));
   let t7;
-  if ($[0] !== Component || $[1] !== Surface || $[2] !== color || $[3] !== other || $[4] !== ref || $[5] !== t5 || $[6] !== t6 || $[7] !== tonal) {
-    t7 = /*#__PURE__*/React.createElement(Surface, _extends({
-      ref: ref,
+  if ($[0] !== Component || $[1] !== Surface || $[2] !== color || $[3] !== other || $[4] !== t5 || $[5] !== t6 || $[6] !== tonal) {
+    t7 = /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       role: t4,
       Component: Component,
       className: t5
-    }, other), t6);
+    }, other), {}, {
+      children: t6
+    }));
     $[0] = Component;
     $[1] = Surface;
     $[2] = color;
     $[3] = other;
-    $[4] = ref;
-    $[5] = t5;
-    $[6] = t6;
-    $[7] = tonal;
-    $[8] = t7;
+    $[4] = t5;
+    $[5] = t6;
+    $[6] = tonal;
+    $[7] = t7;
   } else {
-    t7 = $[8];
+    t7 = $[7];
   }
   return t7;
-});
+};
 TableBody.displayName = 'onesy-TableBody';
 export default TableBody;

package/esm/TableCell/TableCell.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "size", "position", "align", "justify", "noWeight", "sort", "sortedBy", "sortedByDefault", "onSort", "sticky", "stickyPosition", "stickyOffset", "timeout", "disabled", "IconArrow", "IconButtonSortProps", "TypeProps", "DividerProps", "Component", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "size", "position", "align", "justify", "noWeight", "sort", "sortedBy", "sortedByDefault", "onSort", "sticky", "stickyPosition", "stickyOffset", "timeout", "disabled", "IconArrow", "IconButtonSortProps", "TypeProps", "DividerProps", "Component", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -15,6 +14,7 @@ import DividerElement from '../Divider';
 import { staticClassName } from '../utils';
 import Tooltip from '../Tooltip';
 import useResize from '../useResize';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: _objectSpread(_objectSpread({
     display: 'table-cell',
@@ -120,7 +120,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TableCell'
 });
-const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const TableCell = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableCell?.props?.default), props_);
@@ -129,6 +129,7 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const Divider = theme?.elements?.Divider || DividerElement;
   const {
+      ref,
       tonal = true,
       color,
       size = 'regular',
@@ -271,7 +272,7 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
     stylesOther[stickyPosition === 'left' ? 'left' : 'right'] = offset + (stickyOffset !== undefined ? stickyOffset : 0);
     if (position === 'head') stylesOther.zIndex = '17';
   }
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
     ref: item_3 => {
       if (ref) {
         if (is('function', ref)) ref(item_3);
@@ -283,31 +284,37 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
     role: "cell",
     className: classNames([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}`]]),
     style: _objectSpread(_objectSpread({}, style), stylesOther)
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: align,
-    justify: justify,
-    className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-value`], classes.value, classes[`size_${size}`], sort !== undefined && classes.sort])
-  }, is('simple', children) ? /*#__PURE__*/React.createElement(Type, _extends({
-    version: "l2",
-    tabIndex: sort !== undefined ? 0 : undefined
-  }, TypeProps, {
-    className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-value-type`], TypeProps?.className])
-  }), children) : children && /*#__PURE__*/React.cloneElement(children, {
-    tabIndex: sort !== undefined ? 0 : undefined
-  }), sort && /*#__PURE__*/React.createElement(Tooltip, {
-    name: sortedBy === 'asc' ? l('Ascending') : l('Descending')
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    size: "small",
-    onClick: onSort,
-    disabled: disabled,
-    className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-sort-icon-button`], classes.sortedBy, classes[`sortedBy_${sortedBy}`]])
-  }, /*#__PURE__*/React.createElement(IconArrow, null)))), /*#__PURE__*/React.createElement(Divider, _extends({
-    color: "inherit"
-  }, DividerProps, {
-    className: classNames([DividerProps?.className, classes.divider])
-  })));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsxs(Line, {
+      gap: 0,
+      direction: "row",
+      align: align,
+      justify: justify,
+      className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-value`], classes.value, classes[`size_${size}`], sort !== undefined && classes.sort]),
+      children: [is('simple', children) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
+        version: "l2",
+        tabIndex: sort !== undefined ? 0 : undefined
+      }, TypeProps), {}, {
+        className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-value-type`], TypeProps?.className]),
+        children: children
+      })) : children && /*#__PURE__*/React.cloneElement(children, {
+        tabIndex: sort !== undefined ? 0 : undefined
+      }), sort && /*#__PURE__*/_jsx(Tooltip, {
+        name: sortedBy === 'asc' ? l('Ascending') : l('Descending'),
+        children: /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          onClick: onSort,
+          disabled: disabled,
+          className: classNames([staticClassName('TableCell', theme) && [`onesy-TableCell-sort-icon-button`], classes.sortedBy, classes[`sortedBy_${sortedBy}`]]),
+          children: /*#__PURE__*/_jsx(IconArrow, {})
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Divider, _objectSpread(_objectSpread({
+      color: "inherit"
+    }, DividerProps), {}, {
+      className: classNames([DividerProps?.className, classes.divider])
+    }))]
+  }));
+};
 TableCell.displayName = 'onesy-TableCell';
 export default TableCell;

package/esm/TableFooter/TableFooter.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "size", "Component", "className", "children"];
@@ -9,6 +8,7 @@ import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import SurfaceElement from '../Surface';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   size_small: {
@@ -23,8 +23,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-TableFooter'
 });
-const TableFooter = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(9);
+const TableFooter = props_ => {
+  const $ = _c(8);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableFooter?.props?.default), props_);
   const Surface = theme?.elements?.Surface || SurfaceElement;
@@ -46,27 +46,27 @@ const TableFooter = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } = useStyle();
   const t4 = classNames([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.createElement(Surface, _extends({
-      ref: ref,
+  if ($[0] !== Component || $[1] !== Surface || $[2] !== children || $[3] !== color || $[4] !== other || $[5] !== t4 || $[6] !== tonal) {
+    t5 = /*#__PURE__*/_jsx(Surface, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       Component: Component,
       className: t4
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[0] = Component;
     $[1] = Surface;
     $[2] = children;
     $[3] = color;
     $[4] = other;
-    $[5] = ref;
-    $[6] = t4;
-    $[7] = tonal;
-    $[8] = t5;
+    $[5] = t4;
+    $[6] = tonal;
+    $[7] = t5;
   } else {
-    t5 = $[8];
+    t5 = $[7];
   }
   return t5;
-});
+};
 TableFooter.displayName = 'onesy-TableFooter';
 export default TableFooter;