@onesy/ui-react 1.0.132 → 1.0.134

package/Buttons/Buttons.js

@@ -39,7 +39,6 @@ const IconMaterialDone = exports.IconMaterialDone = /*#__PURE__*/_react.default.
 const useStyle = (0, _styleReact.style)(theme => ({
   root: {
     position: 'relative',
-    borderRadius: theme.methods.shape.radius.value('xl', 'px'),
     maxWidth: '100%'
   },
   orientation_horizontal_size_small: {
@@ -66,26 +65,6 @@ const useStyle = (0, _styleReact.style)(theme => ({
       width: '100% !important'
     }
   },
-  // Size
-  size_small: {
-    borderRadius: `${theme.shape.radius.unit * 2}px`
-  },
-  size_regular: {
-    borderRadius: `${theme.shape.radius.unit * 2.5}px`
-  },
-  size_large: {
-    borderRadius: `${theme.shape.radius.unit * 3.5}px`
-  },
-  // Size
-  chip_size_small: {
-    borderRadius: `${theme.shape.radius.unit - theme.shape.radius.unit / 4}px`
-  },
-  chip_size_regular: {
-    borderRadius: `${theme.shape.radius.unit}px`
-  },
-  chip_size_large: {
-    borderRadius: `${theme.shape.radius.unit + theme.shape.radius.unit / 4}px`
-  },
   // Shadows
   elevation: {
     boxShadow: theme.shadows.values.neutral[1],
@@ -348,7 +327,7 @@ const Buttons = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     gap: 0,
     direction: "row",
     display: "inline-flex",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Buttons', theme) && ['onesy-Buttons-root', `onesy-Buttons-version-${version}`, `onesy-Buttons-size-${size}`, disabled && `onesy-Buttons-disabled`], className, classes.root, classes[`size_${size}`], chip && classes[`chip_size_${size}`], classes[`orientation_${orientation}`], classes[`orientation_${orientation}_size_${size}`], fullWidth && classes.fullWidth, elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, disabled && classes.disabled])
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Buttons', theme) && ['onesy-Buttons-root', `onesy-Buttons-version-${version}`, `onesy-Buttons-size-${size}`, disabled && `onesy-Buttons-disabled`], className, classes.root, classes[`orientation_${orientation}`], classes[`orientation_${orientation}_size_${size}`], fullWidth && classes.fullWidth, elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, disabled && classes.disabled])
   }, other), children);
 });
 Buttons.displayName = 'onesy-Buttons';

package/TableCell/TableCell.js

@@ -67,7 +67,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
   },
   sticky: {
     position: 'sticky',
-    zIndex: '14',
+    zIndex: '14'
+  },
+  sticky_left: {
     '&::after': {
       content: "''",
       position: 'absolute',
@@ -79,11 +81,28 @@ const useStyle = (0, _styleReact.style)(theme => ({
       pointerEvents: 'none'
     }
   },
-  stickyActive: {
+  sticky_right: {
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      top: '0',
+      left: '-24px',
+      bottom: '0',
+      width: '24px',
+      transition: theme.methods.transitions.make('box-shadow'),
+      pointerEvents: 'none'
+    }
+  },
+  stickyActive_left: {
     '&::after': {
       boxShadow: `inset 11px 0 7px -7px ${theme.palette.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.14)'}`
     }
   },
+  stickyActive_right: {
+    '&::after': {
+      boxShadow: `inset -11px 0 7px -7px ${theme.palette.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.14)'}`
+    }
+  },
   sort: {
     cursor: 'pointer',
     borderRadius: 2,
@@ -195,15 +214,22 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     if (sticky) {
       if (root) {
-        const parentOverflow = (0, _utils2.getOverflowParent)(root);
-        const offsetPrevious = stickyPosition === 'left' ? root.offsetLeft : window.innerWidth - root.getBoundingClientRect().right;
+        const parentOverflow = (0, _utils2.getOverflowParent)(root.parentElement, false);
+        root.style.position = 'unset';
+        const offsetOriginal = root.offsetLeft;
+        root.style.position = 'sticky';
         const method = () => {
-          const offsetNew = stickyPosition === 'left' ? root.offsetLeft : window.innerWidth - root.getBoundingClientRect().right;
-          setStickyActive(offsetPrevious !== offsetNew);
+          const offsetNew = root.offsetLeft;
+          setStickyActive(offsetOriginal !== offsetNew);
         };
-        if (parentOverflow) parentOverflow.addEventListener('scroll', method, {
-          passive: false
-        });
+        if (parentOverflow) {
+          parentOverflow.addEventListener('scroll', method, {
+            passive: false
+          });
+
+          // initial
+          method();
+        }
         return () => {
           parentOverflow.removeEventListener('scroll', method);
         };
@@ -233,7 +259,7 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       setRoot(item);
     },
     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, stickyActive && classes.stickyActive]),
+    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}`]]),
     style: _objectSpread(_objectSpread({}, style), stylesOther)
   }, other), /*#__PURE__*/_react.default.createElement(Line, {
     gap: 0,

package/esm/Buttons/Buttons.js

@@ -32,7 +32,6 @@ export const IconMaterialDone = /*#__PURE__*/React.forwardRef((props, ref) => {
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
-    borderRadius: theme.methods.shape.radius.value('xl', 'px'),
     maxWidth: '100%'
   },
   orientation_horizontal_size_small: {
@@ -59,26 +58,6 @@ const useStyle = styleMethod(theme => ({
       width: '100% !important'
     }
   },
-  // Size
-  size_small: {
-    borderRadius: `${theme.shape.radius.unit * 2}px`
-  },
-  size_regular: {
-    borderRadius: `${theme.shape.radius.unit * 2.5}px`
-  },
-  size_large: {
-    borderRadius: `${theme.shape.radius.unit * 3.5}px`
-  },
-  // Size
-  chip_size_small: {
-    borderRadius: `${theme.shape.radius.unit - theme.shape.radius.unit / 4}px`
-  },
-  chip_size_regular: {
-    borderRadius: `${theme.shape.radius.unit}px`
-  },
-  chip_size_large: {
-    borderRadius: `${theme.shape.radius.unit + theme.shape.radius.unit / 4}px`
-  },
   // Shadows
   elevation: {
     boxShadow: theme.shadows.values.neutral[1],
@@ -328,7 +307,7 @@ const Buttons = /*#__PURE__*/React.forwardRef((props_, ref) => {
     gap: 0,
     direction: "row",
     display: "inline-flex",
-    className: classNames([staticClassName('Buttons', theme) && ['onesy-Buttons-root', `onesy-Buttons-version-${version}`, `onesy-Buttons-size-${size}`, disabled && `onesy-Buttons-disabled`], className, classes.root, classes[`size_${size}`], chip && classes[`chip_size_${size}`], classes[`orientation_${orientation}`], classes[`orientation_${orientation}_size_${size}`], fullWidth && classes.fullWidth, elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, disabled && classes.disabled])
+    className: classNames([staticClassName('Buttons', theme) && ['onesy-Buttons-root', `onesy-Buttons-version-${version}`, `onesy-Buttons-size-${size}`, disabled && `onesy-Buttons-disabled`], className, classes.root, classes[`orientation_${orientation}`], classes[`orientation_${orientation}_size_${size}`], fullWidth && classes.fullWidth, elevation && !disabled && ['filled', 'tonal'].includes(version) && classes.elevation, disabled && classes.disabled])
   }, other), children);
 });
 Buttons.displayName = 'onesy-Buttons';

package/esm/TableCell/TableCell.js

@@ -60,7 +60,9 @@ const useStyle = styleMethod(theme => ({
   },
   sticky: {
     position: 'sticky',
-    zIndex: '14',
+    zIndex: '14'
+  },
+  sticky_left: {
     '&::after': {
       content: "''",
       position: 'absolute',
@@ -72,11 +74,28 @@ const useStyle = styleMethod(theme => ({
       pointerEvents: 'none'
     }
   },
-  stickyActive: {
+  sticky_right: {
+    '&::after': {
+      content: "''",
+      position: 'absolute',
+      top: '0',
+      left: '-24px',
+      bottom: '0',
+      width: '24px',
+      transition: theme.methods.transitions.make('box-shadow'),
+      pointerEvents: 'none'
+    }
+  },
+  stickyActive_left: {
     '&::after': {
       boxShadow: `inset 11px 0 7px -7px ${theme.palette.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.14)'}`
     }
   },
+  stickyActive_right: {
+    '&::after': {
+      boxShadow: `inset -11px 0 7px -7px ${theme.palette.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.14)'}`
+    }
+  },
   sort: {
     cursor: 'pointer',
     borderRadius: 2,
@@ -172,15 +191,22 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     if (sticky) {
       if (root) {
-        const parentOverflow = getOverflowParent(root);
-        const offsetPrevious = stickyPosition === 'left' ? root.offsetLeft : window.innerWidth - root.getBoundingClientRect().right;
+        const parentOverflow = getOverflowParent(root.parentElement, false);
+        root.style.position = 'unset';
+        const offsetOriginal = root.offsetLeft;
+        root.style.position = 'sticky';
         const method = () => {
-          const offsetNew = stickyPosition === 'left' ? root.offsetLeft : window.innerWidth - root.getBoundingClientRect().right;
-          setStickyActive(offsetPrevious !== offsetNew);
+          const offsetNew = root.offsetLeft;
+          setStickyActive(offsetOriginal !== offsetNew);
         };
-        if (parentOverflow) parentOverflow.addEventListener('scroll', method, {
-          passive: false
-        });
+        if (parentOverflow) {
+          parentOverflow.addEventListener('scroll', method, {
+            passive: false
+          });
+
+          // initial
+          method();
+        }
         return () => {
           parentOverflow.removeEventListener('scroll', method);
         };
@@ -210,7 +236,7 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setRoot(item);
     },
     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, stickyActive && classes.stickyActive]),
+    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,

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.131
+/** @license UiReact v1.0.133
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/utils.js

@@ -208,10 +208,15 @@ export const importIframeStyles = iframeDocument => {
     iframeDocument.head.append(style);
   }
 };
-export const getOverflowParent = element => {
+export const getOverflowParent = (element, vertical = true) => {
   if (!element) return;
-  if (element.scrollHeight > element.clientHeight) return element;
-  return getOverflowParent(element.parentElement);
+
+  // height
+  if (vertical && element.scrollHeight > element.clientHeight) return element;
+
+  // width
+  if (!vertical && element.scrollWidth > element.clientWidth) return element;
+  return getOverflowParent(element.parentElement, vertical);
 };
 export const keyboardStandardCommands = ['a', 'c', 'v', 'y', 'z'];
 export const keyboardStyleCommands = ['b', 'i', 'u'];

package/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.131
+/** @license UiReact v1.0.133
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.132",
+  "version": "1.0.134",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar Erić <lazareric1@proton.me>",

package/utils.d.ts

@@ -26,7 +26,7 @@ export declare const minMaxBetweenNumbers: (value?: number, min?: number, max?:
 export declare const sanitize: (value: string) => string;
 export declare const replace: (value: string, split: string, join: string) => string;
 export declare const importIframeStyles: (iframeDocument: Document) => void;
-export declare const getOverflowParent: (element: HTMLElement) => HTMLElement;
+export declare const getOverflowParent: (element: HTMLElement, vertical?: boolean) => any;
 export declare const keyboardStandardCommands: string[];
 export declare const keyboardStyleCommands: string[];
 export declare const caret: any;

package/utils.js

@@ -238,10 +238,15 @@ const importIframeStyles = iframeDocument => {
   }
 };
 exports.importIframeStyles = importIframeStyles;
-const getOverflowParent = element => {
+const getOverflowParent = (element, vertical = true) => {
   if (!element) return;
-  if (element.scrollHeight > element.clientHeight) return element;
-  return getOverflowParent(element.parentElement);
+
+  // height
+  if (vertical && element.scrollHeight > element.clientHeight) return element;
+
+  // width
+  if (!vertical && element.scrollWidth > element.clientWidth) return element;
+  return getOverflowParent(element.parentElement, vertical);
 };
 exports.getOverflowParent = getOverflowParent;
 const keyboardStandardCommands = exports.keyboardStandardCommands = ['a', 'c', 'v', 'y', 'z'];