@onesy/ui-react 1.0.134 → 1.0.136

package/esm/MainProgress/MainProgress.js

@@ -1,37 +1,39 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["min", "max", "firstIncrement", "incrementMin", "incrementMax", "stepMin", "stepMax", "stepInterval", "onStart", "onIncrement", "onUpdate", "onDone", "fixed", "position", "TransitionComponent", "TransitionComponentProps", "className", "children"];
+const _excluded = ["children", "className"];
 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';
-import { is, wait, random, clamp } from '@onesy/utils';
-import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
-import FadeElement from '../Fade';
-import LinearProgressElement from '../LinearProgress';
+import { classNames, style, useOnesyTheme } from '@onesy/style-react';
+import useOpen from '../useOpen';
+import LineElement from '../Line';
 import MainProgressContext from './Context';
-import { staticClassName } from '../utils';
-const useStyle = styleMethod(theme => ({
-  root: {
-    zIndex: theme.z_index.tooltip - 14,
-    '&.onesy-LinearProgress-root': {
-      height: '2px'
+const useStyle = style(theme => ({
+  '@keyframes move': {
+    from: {
+      transform: 'translateX(-100%)'
     },
-    '& .onesy-LinearProgress-buffer': {
-      background: 'transparent'
-    }
-  },
-  fixed: {
-    insetInline: '0',
-    '&.onesy-LinearProgress-root': {
-      position: 'fixed'
+    to: {
+      transform: 'translateX(250%)'
     }
   },
-  position_top: {
-    top: '0'
+  root: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    height: 3,
+    overflow: 'hidden',
+    pointerEvents: 'none',
+    transition: theme.methods.transitions.make('opacity'),
+    zIndex: theme.z_index.tooltip
   },
-  position_bottom: {
-    bottom: '0'
+  loader: {
+    position: 'relative',
+    width: '50%',
+    height: '100%',
+    background: `linear-gradient(to right, transparent, ${theme.palette.color.primary[50]}, transparent)`,
+    animation: '$move 2s linear infinite'
   }
 }), {
   name: 'onesy-MainProgress'
@@ -39,144 +41,36 @@ const useStyle = styleMethod(theme => ({
 const MainProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMainProgress?.props?.default), props_), [props_]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const LinearProgress = React.useMemo(() => theme?.elements?.LinearProgress || LinearProgressElement, [theme]);
   const {
-      min = 0,
-      max = 99,
-      firstIncrement = true,
-      incrementMin = 4,
-      incrementMax = 14,
-      stepMin = 1,
-      stepMax = 4,
-      stepInterval = 700,
-      onStart,
-      onIncrement,
-      onUpdate,
-      onDone,
-      fixed = true,
-      position = 'top',
-      TransitionComponent = Fade,
-      TransitionComponentProps = {},
-      className,
-      children
+      children,
+      className
     } = props,
     other = _objectWithoutProperties(props, _excluded);
   const {
     classes
   } = useStyle();
-  const [inProp, setInProp] = React.useState(false);
-  const [value, setValue] = React.useState(min);
-  const refs = {
-    value_: React.useRef({}),
-    value: React.useRef(null),
-    min: React.useRef(null),
-    max: React.useRef(null),
-    firstIncrement: React.useRef(null),
-    incrementMin: React.useRef(null),
-    incrementMax: React.useRef(null),
-    stepInterval: React.useRef(null),
-    stepMin: React.useRef(null),
-    stepMax: React.useRef(null),
-    TransitionComponentProps: React.useRef(null),
-    linearProgress: React.useRef(null),
-    interval: React.useRef(null),
-    props: React.useRef(null)
-  };
-  refs.value.current = value;
-  refs.props.current = props;
-  refs.min.current = min;
-  refs.max.current = max;
-  refs.firstIncrement.current = firstIncrement;
-  refs.incrementMin.current = incrementMin;
-  refs.incrementMax.current = incrementMax;
-  refs.stepInterval.current = stepInterval;
-  refs.stepMin.current = stepMin;
-  refs.stepMax.current = stepMax;
-  refs.TransitionComponentProps.current = TransitionComponentProps;
-  const clear = () => {
-    if (refs.interval.current) {
-      clearInterval(refs.interval.current);
-      refs.interval.current = undefined;
-    }
-  };
-  const start = React.useCallback(value_ => {
-    // Reset
-    clear();
-
-    // Update
-    refs.linearProgress.current = value_;
-
-    // Open
-    setInProp(true);
-
-    // Set initial value to min
-    const min_ = refs.min.current !== undefined ? refs.min.current : 0;
-    const max_ = refs.max.current !== undefined ? refs.max.current : 0;
-    setValue(min_);
-
-    // start inc interval for steps
-    // in refs.interval
-
-    // in interval, remove interval if value is >= max
-    if (min_ < max_) {
-      const stepInterval_ = refs.stepInterval.current !== undefined ? refs.stepInterval.current : 700;
-      refs.interval.current = setInterval(() => {
-        if (refs.value.current >= max_) clearInterval(refs.interval.current);
-        setValue(previousValue => clamp(previousValue + random(refs.stepMin.current, refs.stepMax.current), refs.min.current, refs.max.current));
-      }, stepInterval_);
-    }
-    if (is('function', onStart)) onStart();
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const open = useOpen();
+  const start = React.useCallback(() => {
+    open.onOpen();
   }, []);
-  const increment = React.useCallback(() => {
-    // Inc value random between incrementMin, incrementMax, with clam to min, max
-    let valueNew = refs.value.current;
-    valueNew += clamp(random(refs.incrementMin.current, refs.incrementMax.current), refs.min.current, refs.max.current);
-    setValue(valueNew);
-    if (is('function', onIncrement)) onIncrement(valueNew);
+  const done = React.useCallback(() => {
+    open.onClose();
   }, []);
-  const update = React.useCallback(value_ => {
-    const valueNew = value_;
-    setValue(valueNew);
-    if (is('function', onUpdate)) onUpdate(valueNew);
+  const value = React.useMemo(() => {
+    return {
+      start,
+      done
+    };
   }, []);
-  const done = React.useCallback(async () => {
-    clear();
-
-    // Update value to 100
-    setValue(100);
-
-    // Update inProp to false with the timeout value
-    const timeout = theme.transitions.duration.rg + 44;
-    await wait(timeout);
-    setInProp(false);
-    if (is('function', onDone)) onDone();
-  }, []);
-  const onExited = () => {
-    // Reset
-    setValue(0);
-  };
-  React.useEffect(() => {
-    if (inProp) {
-      if (refs.firstIncrement.current) increment();
-    }
-  }, [inProp]);
-  TransitionComponentProps.in = inProp;
-  refs.value_.current.start = start;
-  refs.value_.current.increment = increment;
-  refs.value_.current.update = update;
-  refs.value_.current.done = done;
   return /*#__PURE__*/React.createElement(MainProgressContext.Provider, {
-    value: refs.value_.current
-  }, /*#__PURE__*/React.createElement(TransitionComponent, _extends({
-    in: inProp,
-    onExited: onExited
-  }, TransitionComponentProps), /*#__PURE__*/React.createElement(LinearProgress, _extends({
+    value: value
+  }, open.open && /*#__PURE__*/React.createElement(Line, _extends({
     ref: ref,
-    value: value,
-    version: "determinate",
-    className: classNames([staticClassName('MainProgress', theme) && [`onesy-MainProgress-root`], className, classes.root, classes[`position_${position}`], fixed && classes.fixed])
-  }, other, refs.linearProgress.current))), children);
+    fullWidth: true,
+    className: classNames(['onesy-MainProgress-root', className, classes.root])
+  }, other), /*#__PURE__*/React.createElement(Line, {
+    className: classes.loader
+  })), children);
 });
-MainProgress.displayName = 'onesy-MainProgress';
 export default MainProgress;

package/esm/MainProgressMaterial/Context.js

@@ -0,0 +1,3 @@
+import React from 'react';
+const OnesyMainProgressContext = /*#__PURE__*/React.createContext(undefined);
+export default OnesyMainProgressContext;

package/esm/MainProgressMaterial/MainProgressMaterial.js

@@ -0,0 +1,182 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["min", "max", "firstIncrement", "incrementMin", "incrementMax", "stepMin", "stepMax", "stepInterval", "onStart", "onIncrement", "onUpdate", "onDone", "fixed", "position", "TransitionComponent", "TransitionComponentProps", "className", "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';
+import { is, wait, random, clamp } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import FadeElement from '../Fade';
+import LinearProgressElement from '../LinearProgress';
+import MainProgressMaterialContext from './Context';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    zIndex: theme.z_index.tooltip - 14,
+    '&.onesy-LinearProgress-root': {
+      height: '2px'
+    },
+    '& .onesy-LinearProgress-buffer': {
+      background: 'transparent'
+    }
+  },
+  fixed: {
+    insetInline: '0',
+    '&.onesy-LinearProgress-root': {
+      position: 'fixed'
+    }
+  },
+  position_top: {
+    top: '0'
+  },
+  position_bottom: {
+    bottom: '0'
+  }
+}), {
+  name: 'onesy-MainProgressMaterial'
+});
+const MainProgressMaterial = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyMainProgressMaterial?.props?.default), props_), [props_]);
+  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
+  const LinearProgress = React.useMemo(() => theme?.elements?.LinearProgress || LinearProgressElement, [theme]);
+  const {
+      min = 0,
+      max = 99,
+      firstIncrement = true,
+      incrementMin = 4,
+      incrementMax = 14,
+      stepMin = 1,
+      stepMax = 4,
+      stepInterval = 700,
+      onStart,
+      onIncrement,
+      onUpdate,
+      onDone,
+      fixed = true,
+      position = 'top',
+      TransitionComponent = Fade,
+      TransitionComponentProps = {},
+      className,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [inProp, setInProp] = React.useState(false);
+  const [value, setValue] = React.useState(min);
+  const refs = {
+    value_: React.useRef({}),
+    value: React.useRef(null),
+    min: React.useRef(null),
+    max: React.useRef(null),
+    firstIncrement: React.useRef(null),
+    incrementMin: React.useRef(null),
+    incrementMax: React.useRef(null),
+    stepInterval: React.useRef(null),
+    stepMin: React.useRef(null),
+    stepMax: React.useRef(null),
+    TransitionComponentProps: React.useRef(null),
+    linearProgress: React.useRef(null),
+    interval: React.useRef(null),
+    props: React.useRef(null)
+  };
+  refs.value.current = value;
+  refs.props.current = props;
+  refs.min.current = min;
+  refs.max.current = max;
+  refs.firstIncrement.current = firstIncrement;
+  refs.incrementMin.current = incrementMin;
+  refs.incrementMax.current = incrementMax;
+  refs.stepInterval.current = stepInterval;
+  refs.stepMin.current = stepMin;
+  refs.stepMax.current = stepMax;
+  refs.TransitionComponentProps.current = TransitionComponentProps;
+  const clear = () => {
+    if (refs.interval.current) {
+      clearInterval(refs.interval.current);
+      refs.interval.current = undefined;
+    }
+  };
+  const start = React.useCallback(value_ => {
+    // Reset
+    clear();
+
+    // Update
+    refs.linearProgress.current = value_;
+
+    // Open
+    setInProp(true);
+
+    // Set initial value to min
+    const min_ = refs.min.current !== undefined ? refs.min.current : 0;
+    const max_ = refs.max.current !== undefined ? refs.max.current : 0;
+    setValue(min_);
+
+    // start inc interval for steps
+    // in refs.interval
+
+    // in interval, remove interval if value is >= max
+    if (min_ < max_) {
+      const stepInterval_ = refs.stepInterval.current !== undefined ? refs.stepInterval.current : 700;
+      refs.interval.current = setInterval(() => {
+        if (refs.value.current >= max_) clearInterval(refs.interval.current);
+        setValue(previousValue => clamp(previousValue + random(refs.stepMin.current, refs.stepMax.current), refs.min.current, refs.max.current));
+      }, stepInterval_);
+    }
+    if (is('function', onStart)) onStart();
+  }, []);
+  const increment = React.useCallback(() => {
+    // Inc value random between incrementMin, incrementMax, with clam to min, max
+    let valueNew = refs.value.current;
+    valueNew += clamp(random(refs.incrementMin.current, refs.incrementMax.current), refs.min.current, refs.max.current);
+    setValue(valueNew);
+    if (is('function', onIncrement)) onIncrement(valueNew);
+  }, []);
+  const update = React.useCallback(value_ => {
+    const valueNew = value_;
+    setValue(valueNew);
+    if (is('function', onUpdate)) onUpdate(valueNew);
+  }, []);
+  const done = React.useCallback(async () => {
+    clear();
+
+    // Update value to 100
+    setValue(100);
+
+    // Update inProp to false with the timeout value
+    const timeout = theme.transitions.duration.rg + 44;
+    await wait(timeout);
+    setInProp(false);
+    if (is('function', onDone)) onDone();
+  }, []);
+  const onExited = () => {
+    // Reset
+    setValue(0);
+  };
+  React.useEffect(() => {
+    if (inProp) {
+      if (refs.firstIncrement.current) increment();
+    }
+  }, [inProp]);
+  TransitionComponentProps.in = inProp;
+  refs.value_.current.start = start;
+  refs.value_.current.increment = increment;
+  refs.value_.current.update = update;
+  refs.value_.current.done = done;
+  return /*#__PURE__*/React.createElement(MainProgressMaterialContext.Provider, {
+    value: refs.value_.current
+  }, /*#__PURE__*/React.createElement(TransitionComponent, _extends({
+    in: inProp,
+    onExited: onExited
+  }, TransitionComponentProps), /*#__PURE__*/React.createElement(LinearProgress, _extends({
+    ref: ref,
+    value: value,
+    version: "determinate",
+    className: classNames([staticClassName('MainProgressMaterial', theme) && [`onesy-MainProgressMaterial-root`], className, classes.root, classes[`position_${position}`], fixed && classes.fixed])
+  }, other, refs.linearProgress.current))), children);
+});
+MainProgressMaterial.displayName = 'onesy-MainProgressMaterial';
+export default MainProgressMaterial;

package/esm/MainProgressMaterial/index.js

@@ -0,0 +1,4 @@
+export { default } from './MainProgressMaterial';
+export { default as MainProgressMaterialContext } from './Context';
+export { default as MainProgressMaterial } from './MainProgressMaterial';
+export { default as useMainProgressMaterial } from './useMainProgressMaterial';

package/esm/MainProgressMaterial/useMainProgressMaterial.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import MainProgressMaterialContext from './Context';
+export default function useMainProgress() {
+  const value = React.useContext(MainProgressMaterialContext);
+  return value;
+}

package/esm/TableCell/TableCell.js

@@ -14,6 +14,7 @@ import TypeElement from '../Type';
 import DividerElement from '../Divider';
 import { getOverflowParent, staticClassName } from '../utils';
 import Tooltip from '../Tooltip';
+import useResize from '../useResize';
 const useStyle = styleMethod(theme => ({
   root: _objectSpread(_objectSpread({
     display: 'table-cell',
@@ -121,6 +122,7 @@ const useStyle = styleMethod(theme => ({
 });
 const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
+  const windowWidth = useResize();
   const l = theme.l;
   const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyTableCell?.props?.default), props_), [props_]);
   const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
@@ -184,7 +186,7 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     // init
     init();
-  }, []);
+  }, [windowWidth]);
   React.useEffect(() => {
     if (sortedBy !== sortedBy_) setSortedBy(sortedBy_);
   }, [sortedBy_]);
@@ -208,11 +210,11 @@ const TableCell = /*#__PURE__*/React.forwardRef((props_, ref) => {
           method();
         }
         return () => {
-          parentOverflow.removeEventListener('scroll', method);
+          if (parentOverflow) parentOverflow.removeEventListener('scroll', method);
         };
       }
     }
-  }, [sticky, stickyPosition, root]);
+  }, [windowWidth, sticky, stickyPosition, root]);
   const onSort = React.useCallback(() => {
     let valueNew;
     setSortedBy(item => {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.133
+/** @license UiReact v1.0.135
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -226,8 +226,8 @@ export { default as ViewSplit } from './ViewSplit';
 export * from './ViewSplit';
 export { default as WindowSplit } from './WindowSplit';
 export * from './WindowSplit';
-export { default as MainProgress } from './MainProgress';
-export * from './MainProgress';
+export { default as MainProgressMaterial } from './MainProgressMaterial';
+export * from './MainProgressMaterial';
 export { default as Image } from './Image';
 export * from './Image';
 export { default as SpyScroll } from './SpyScroll';
@@ -427,4 +427,14 @@ export * from './CalendarMenu';
 export { default as Whiteboard } from './Whiteboard';
 export * from './Whiteboard';
 export { default as CookieBanner } from './CookieBanner';
-export * from './CookieBanner';
+export * from './CookieBanner';
+export { default as MainProgress } from './MainProgress';
+export * from './MainProgress';
+export { default as useOnline } from './useOnline';
+export * from './useOnline';
+export { default as useOpen } from './useOpen';
+export * from './useOpen';
+export { default as useResize } from './useResize';
+export * from './useResize';
+export { default as useTabs } from './useTabs';
+export * from './useTabs';

package/esm/useOnline/index.js

@@ -0,0 +1 @@
+export { default } from './useOnline';

package/esm/useOnline/useOnline.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { isEnvironment } from '@onesy/utils';
+const useOnline = () => {
+  const [online, setOnline] = React.useState(isEnvironment('browser') ? window.navigator.onLine : true);
+  React.useEffect(() => {
+    const onOnline = () => setOnline(true);
+    const onOffline = () => setOnline(false);
+    window.addEventListener('online', onOnline);
+    window.addEventListener('offline', onOffline);
+    return () => {
+      window.removeEventListener('online', onOnline);
+      window.removeEventListener('offline', onOffline);
+    };
+  }, []);
+  return online;
+};
+export default useOnline;

package/esm/useOpen/index.js

@@ -0,0 +1 @@
+export { default } from './useOpen';

package/esm/useOpen/useOpen.js

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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';
+import { is } from '@onesy/utils';
+const useOpen = props => {
+  const {
+    open: openProps
+  } = props || {};
+  const [open, setOpen] = React.useState(_objectSpread({
+    open: false
+  }, openProps));
+  const onOpen = React.useCallback(item => {
+    setOpen(_objectSpread({
+      open: true
+    }, item));
+  }, []);
+  const onClose = React.useCallback(() => {
+    setOpen(previous => _objectSpread(_objectSpread({}, previous), {}, {
+      open: false
+    }));
+  }, []);
+  const onToggle = React.useCallback(() => {
+    setOpen(previous => _objectSpread(_objectSpread({}, previous), {}, {
+      open: !previous?.open
+    }));
+  }, []);
+  const onChange = React.useCallback(value => {
+    setOpen(() => _objectSpread(_objectSpread({}, value), {}, {
+      open: is('boolean', value) ? value : !!value?.open
+    }));
+  }, []);
+  const result = React.useMemo(() => {
+    return {
+      open: open?.open,
+      item: open,
+      onOpen,
+      onClose,
+      onToggle,
+      onChange,
+      setOpen
+    };
+  }, [open, setOpen]);
+  return result;
+};
+export default useOpen;

package/esm/useResize/index.js

@@ -0,0 +1 @@
+export { default } from './useResize';

package/esm/useResize/useResize.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { isEnvironment } from '@onesy/utils';
+const useWindowWidth = () => {
+  const [windowWidth, setWindowWidth] = React.useState(() => {
+    if (isEnvironment('browser')) return window.innerWidth;
+    return 0;
+  });
+  React.useEffect(() => {
+    const onResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    if (isEnvironment('browser')) {
+      setWindowWidth(window.innerWidth);
+      window.addEventListener('resize', onResize);
+      return () => window.removeEventListener('resize', onResize);
+    }
+  }, []);
+  return windowWidth;
+};
+export default useWindowWidth;

package/esm/useTabs/index.js

@@ -0,0 +1 @@
+export { default } from './useTabs';

package/esm/useTabs/useTabs.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { is } from '@onesy/utils';
+const useTabs = props => {
+  const [tab, setTab] = React.useState(is('string', props) ? props : props?.tab);
+  const onChange = React.useCallback(item => {
+    setTab(item);
+  }, []);
+  const result = React.useMemo(() => {
+    return {
+      value: tab,
+      onChange,
+      setTab
+    };
+  }, [tab]);
+  return result;
+};
+export default useTabs;

package/index.d.ts

@@ -221,8 +221,8 @@ export { default as ViewSplit } from './ViewSplit';
 export * from './ViewSplit';
 export { default as WindowSplit } from './WindowSplit';
 export * from './WindowSplit';
-export { default as MainProgress } from './MainProgress';
-export * from './MainProgress';
+export { default as MainProgressMaterial } from './MainProgressMaterial';
+export * from './MainProgressMaterial';
 export { default as Image } from './Image';
 export * from './Image';
 export { default as SpyScroll } from './SpyScroll';
@@ -423,3 +423,13 @@ export { default as Whiteboard } from './Whiteboard';
 export * from './Whiteboard';
 export { default as CookieBanner } from './CookieBanner';
 export * from './CookieBanner';
+export { default as MainProgress } from './MainProgress';
+export * from './MainProgress';
+export { default as useOnline } from './useOnline';
+export * from './useOnline';
+export { default as useOpen } from './useOpen';
+export * from './useOpen';
+export { default as useResize } from './useResize';
+export * from './useResize';
+export { default as useTabs } from './useTabs';
+export * from './useTabs';