@onesy/ui-react 1.0.134 → 1.0.135

package/MainProgress/MainProgress.d.ts

@@ -1,33 +1,10 @@
 import React from 'react';
-import { ILinearProress } from '../LinearProgress/LinearProgress';
-import { IElementReference, IPropsAny } from '../types';
-export type IMainProgressStartArgument = {
-    tonal?: boolean;
-    color?: string;
-};
+import { ILine } from '../Line/Line';
 export type IMainProgressValue = {
-    start: (value?: IMainProgressStartArgument) => void;
-    increment: () => void;
-    update: (value: number) => void;
+    start: () => void;
     done: () => void;
 };
-export type IMainProgress = ILinearProress & {
-    min?: number;
-    max?: number;
-    firstIncrement?: boolean;
-    incrementMin?: number;
-    incrementMax?: number;
-    stepMin?: number;
-    stepMax?: number;
-    stepInterval?: number;
-    onStart?: () => any;
-    onIncrement?: (value: number) => any;
-    onUpdate?: (value: number) => any;
-    onDone?: () => any;
-    fixed?: boolean;
-    position?: 'top' | 'bottom';
-    TransitionComponent?: IElementReference;
-    TransitionComponentProps?: IPropsAny;
-};
+export interface IMainProgress extends ILine {
+}
 declare const MainProgress: React.FC<IMainProgress>;
 export default MainProgress;

package/MainProgress/MainProgress.js

@@ -9,36 +9,38 @@ 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 _react = _interopRequireDefault(require("react"));
-var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
-var _Fade = _interopRequireDefault(require("../Fade"));
-var _LinearProgress = _interopRequireDefault(require("../LinearProgress"));
+var _useOpen = _interopRequireDefault(require("../useOpen"));
+var _Line = _interopRequireDefault(require("../Line"));
 var _Context = _interopRequireDefault(require("./Context"));
-var _utils2 = require("../utils");
-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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
-  root: {
-    zIndex: theme.z_index.tooltip - 14,
-    '&.onesy-LinearProgress-root': {
-      height: '2px'
+  '@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'
@@ -49,150 +51,39 @@ const MainProgress = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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.onesyMainProgress) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   }, [props_]);
-  const Fade = _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.Fade) || _Fade.default;
-  }, [theme]);
-  const LinearProgress = _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.LinearProgress) || _LinearProgress.default;
-  }, [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 = (0, _objectWithoutProperties2.default)(props, _excluded);
   const {
     classes
   } = useStyle();
-  const [inProp, setInProp] = _react.default.useState(false);
-  const [value, setValue] = _react.default.useState(min);
-  const refs = {
-    value_: _react.default.useRef({}),
-    value: _react.default.useRef(null),
-    min: _react.default.useRef(null),
-    max: _react.default.useRef(null),
-    firstIncrement: _react.default.useRef(null),
-    incrementMin: _react.default.useRef(null),
-    incrementMax: _react.default.useRef(null),
-    stepInterval: _react.default.useRef(null),
-    stepMin: _react.default.useRef(null),
-    stepMax: _react.default.useRef(null),
-    TransitionComponentProps: _react.default.useRef(null),
-    linearProgress: _react.default.useRef(null),
-    interval: _react.default.useRef(null),
-    props: _react.default.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.default.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 => (0, _utils.clamp)(previousValue + (0, _utils.random)(refs.stepMin.current, refs.stepMax.current), refs.min.current, refs.max.current));
-      }, stepInterval_);
-    }
-    if ((0, _utils.is)('function', onStart)) onStart();
-  }, []);
-  const increment = _react.default.useCallback(() => {
-    // Inc value random between incrementMin, incrementMax, with clam to min, max
-    let valueNew = refs.value.current;
-    valueNew += (0, _utils.clamp)((0, _utils.random)(refs.incrementMin.current, refs.incrementMax.current), refs.min.current, refs.max.current);
-    setValue(valueNew);
-    if ((0, _utils.is)('function', onIncrement)) onIncrement(valueNew);
+  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 open = (0, _useOpen.default)();
+  const start = _react.default.useCallback(() => {
+    open.onOpen();
   }, []);
-  const update = _react.default.useCallback(value_ => {
-    const valueNew = value_;
-    setValue(valueNew);
-    if ((0, _utils.is)('function', onUpdate)) onUpdate(valueNew);
+  const done = _react.default.useCallback(() => {
+    open.onClose();
   }, []);
-  const done = _react.default.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 (0, _utils.wait)(timeout);
-    setInProp(false);
-    if ((0, _utils.is)('function', onDone)) onDone();
+  const value = _react.default.useMemo(() => {
+    return {
+      start,
+      done
+    };
   }, []);
-  const onExited = () => {
-    // Reset
-    setValue(0);
-  };
-  _react.default.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.default.createElement(_Context.default.Provider, {
-    value: refs.value_.current
-  }, /*#__PURE__*/_react.default.createElement(TransitionComponent, (0, _extends2.default)({
-    in: inProp,
-    onExited: onExited
-  }, TransitionComponentProps), /*#__PURE__*/_react.default.createElement(LinearProgress, (0, _extends2.default)({
+    value: value
+  }, open.open && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
     ref: ref,
-    value: value,
-    version: "determinate",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MainProgress', theme) && [`onesy-MainProgress-root`], className, classes.root, classes[`position_${position}`], fixed && classes.fixed])
-  }, other, refs.linearProgress.current))), children);
+    fullWidth: true,
+    className: (0, _styleReact.classNames)(['onesy-MainProgress-root', className, classes.root])
+  }, other), /*#__PURE__*/_react.default.createElement(Line, {
+    className: classes.loader
+  })), children);
 });
-MainProgress.displayName = 'onesy-MainProgress';
 var _default = exports.default = MainProgress;

package/MainProgressMaterial/Context.d.ts

@@ -0,0 +1,2 @@
+declare const OnesyMainProgressContext: any;
+export default OnesyMainProgressContext;

package/MainProgressMaterial/Context.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+const OnesyMainProgressContext = /*#__PURE__*/_react.default.createContext(undefined);
+var _default = exports.default = OnesyMainProgressContext;

package/MainProgressMaterial/MainProgressMaterial.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { ILinearProress } from '../LinearProgress/LinearProgress';
+import { IElementReference, IPropsAny } from '../types';
+export type IMainProgressMaterialStartArgument = {
+    tonal?: boolean;
+    color?: string;
+};
+export type IMainProgressMaterialValue = {
+    start: (value?: IMainProgressMaterialStartArgument) => void;
+    increment: () => void;
+    update: (value: number) => void;
+    done: () => void;
+};
+export type IMainProgressMaterial = ILinearProress & {
+    min?: number;
+    max?: number;
+    firstIncrement?: boolean;
+    incrementMin?: number;
+    incrementMax?: number;
+    stepMin?: number;
+    stepMax?: number;
+    stepInterval?: number;
+    onStart?: () => any;
+    onIncrement?: (value: number) => any;
+    onUpdate?: (value: number) => any;
+    onDone?: () => any;
+    fixed?: boolean;
+    position?: 'top' | 'bottom';
+    TransitionComponent?: IElementReference;
+    TransitionComponentProps?: IPropsAny;
+};
+declare const MainProgressMaterial: React.FC<IMainProgressMaterial>;
+export default MainProgressMaterial;

package/MainProgressMaterial/MainProgressMaterial.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _Fade = _interopRequireDefault(require("../Fade"));
+var _LinearProgress = _interopRequireDefault(require("../LinearProgress"));
+var _Context = _interopRequireDefault(require("./Context"));
+var _utils2 = require("../utils");
+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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(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.default.forwardRef((props_, ref) => {
+  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.onesyMainProgressMaterial) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Fade = _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.Fade) || _Fade.default;
+  }, [theme]);
+  const LinearProgress = _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.LinearProgress) || _LinearProgress.default;
+  }, [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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [inProp, setInProp] = _react.default.useState(false);
+  const [value, setValue] = _react.default.useState(min);
+  const refs = {
+    value_: _react.default.useRef({}),
+    value: _react.default.useRef(null),
+    min: _react.default.useRef(null),
+    max: _react.default.useRef(null),
+    firstIncrement: _react.default.useRef(null),
+    incrementMin: _react.default.useRef(null),
+    incrementMax: _react.default.useRef(null),
+    stepInterval: _react.default.useRef(null),
+    stepMin: _react.default.useRef(null),
+    stepMax: _react.default.useRef(null),
+    TransitionComponentProps: _react.default.useRef(null),
+    linearProgress: _react.default.useRef(null),
+    interval: _react.default.useRef(null),
+    props: _react.default.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.default.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 => (0, _utils.clamp)(previousValue + (0, _utils.random)(refs.stepMin.current, refs.stepMax.current), refs.min.current, refs.max.current));
+      }, stepInterval_);
+    }
+    if ((0, _utils.is)('function', onStart)) onStart();
+  }, []);
+  const increment = _react.default.useCallback(() => {
+    // Inc value random between incrementMin, incrementMax, with clam to min, max
+    let valueNew = refs.value.current;
+    valueNew += (0, _utils.clamp)((0, _utils.random)(refs.incrementMin.current, refs.incrementMax.current), refs.min.current, refs.max.current);
+    setValue(valueNew);
+    if ((0, _utils.is)('function', onIncrement)) onIncrement(valueNew);
+  }, []);
+  const update = _react.default.useCallback(value_ => {
+    const valueNew = value_;
+    setValue(valueNew);
+    if ((0, _utils.is)('function', onUpdate)) onUpdate(valueNew);
+  }, []);
+  const done = _react.default.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 (0, _utils.wait)(timeout);
+    setInProp(false);
+    if ((0, _utils.is)('function', onDone)) onDone();
+  }, []);
+  const onExited = () => {
+    // Reset
+    setValue(0);
+  };
+  _react.default.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.default.createElement(_Context.default.Provider, {
+    value: refs.value_.current
+  }, /*#__PURE__*/_react.default.createElement(TransitionComponent, (0, _extends2.default)({
+    in: inProp,
+    onExited: onExited
+  }, TransitionComponentProps), /*#__PURE__*/_react.default.createElement(LinearProgress, (0, _extends2.default)({
+    ref: ref,
+    value: value,
+    version: "determinate",
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('MainProgressMaterial', theme) && [`onesy-MainProgressMaterial-root`], className, classes.root, classes[`position_${position}`], fixed && classes.fixed])
+  }, other, refs.linearProgress.current))), children);
+});
+MainProgressMaterial.displayName = 'onesy-MainProgressMaterial';
+var _default = exports.default = MainProgressMaterial;

package/MainProgressMaterial/index.d.ts

@@ -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/MainProgressMaterial/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MainProgressMaterial", {
+  enumerable: true,
+  get: function () {
+    return _MainProgressMaterial.default;
+  }
+});
+Object.defineProperty(exports, "MainProgressMaterialContext", {
+  enumerable: true,
+  get: function () {
+    return _Context.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _MainProgressMaterial.default;
+  }
+});
+Object.defineProperty(exports, "useMainProgressMaterial", {
+  enumerable: true,
+  get: function () {
+    return _useMainProgressMaterial.default;
+  }
+});
+var _MainProgressMaterial = _interopRequireDefault(require("./MainProgressMaterial"));
+var _Context = _interopRequireDefault(require("./Context"));
+var _useMainProgressMaterial = _interopRequireDefault(require("./useMainProgressMaterial"));

package/MainProgressMaterial/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../esm/MainProgressMaterial/index.js",
+  "types": "./index.d.ts"
+}

package/MainProgressMaterial/useMainProgressMaterial.d.ts

@@ -0,0 +1,2 @@
+import { IMainProgressMaterialValue } from './MainProgressMaterial';
+export default function useMainProgress(): IMainProgressMaterialValue;

package/MainProgressMaterial/useMainProgressMaterial.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useMainProgress;
+var _react = _interopRequireDefault(require("react"));
+var _Context = _interopRequireDefault(require("./Context"));
+function useMainProgress() {
+  const value = _react.default.useContext(_Context.default);
+  return value;
+}

package/TableCell/TableCell.js

@@ -18,6 +18,7 @@ var _Type = _interopRequireDefault(require("../Type"));
 var _Divider = _interopRequireDefault(require("../Divider"));
 var _utils2 = require("../utils");
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _useResize = _interopRequireDefault(require("../useResize"));
 const _excluded = ["tonal", "color", "size", "position", "align", "justify", "noWeight", "sort", "sortedBy", "sortedByDefault", "onSort", "sticky", "stickyPosition", "stickyOffset", "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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -128,6 +129,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 });
 const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const theme = (0, _styleReact.useOnesyTheme)();
+  const windowWidth = (0, _useResize.default)();
   const l = theme.l;
   const props = _react.default.useMemo(() => {
     var _theme$ui, _theme$ui2;
@@ -207,7 +209,7 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   _react.default.useEffect(() => {
     // init
     init();
-  }, []);
+  }, [windowWidth]);
   _react.default.useEffect(() => {
     if (sortedBy !== sortedBy_) setSortedBy(sortedBy_);
   }, [sortedBy_]);
@@ -235,7 +237,7 @@ const TableCell = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         };
       }
     }
-  }, [sticky, stickyPosition, root]);
+  }, [windowWidth, sticky, stickyPosition, root]);
   const onSort = _react.default.useCallback(() => {
     let valueNew;
     setSortedBy(item => {