diginet-core-ui 1.3.94-beta.2 → 1.3.94-beta.4

package/components/button/more.js

@@ -20,6 +20,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   popoverProp,
   style
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const isOptionFull = optionType === 'full';
   const ref = useRef(null);
   const [openState, setOpenState] = useState(false);

package/components/modal/body.js

@@ -1,6 +1,7 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { boxBorder, displayBlock, displayNone, order, overflowAuto, parseWidthHeight, positionRelative } from "../../styles/general";
@@ -11,7 +12,8 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
   id,
-  style
+  style,
+  ...props
 }, reference) => {
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
@@ -31,9 +33,10 @@ const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       id: id,
       className: classNames('DGN-UI-Modal-Body', className),
-      style: style
+      style: style,
+      ...props
     }, children);
-  }, [children, className, id, style]);
+  }, [children, className, id, style, props]);
 }));
 const ModalBodyCSS = css`
     ${displayBlock};
@@ -59,4 +62,5 @@ ModalBody.propTypes = {
   /** Style inline of component. */
   style: PropTypes.object
 };
-export default ModalBody;
+export { ModalBody };
+export default OptionWrapper(ModalBody);

package/components/modal/footer.js

@@ -1,9 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { boxBorder, flexRow, itemsCenter, justifyEnd, order, parseWidth, positionRelative } from "../../styles/general";
+import { boxBorder, displayFlex, flexRow, itemsCenter, justifyEnd, order, parseWidth, positionRelative } from "../../styles/general";
 import { classNames } from "../../utils";
 import { responsivePaddingCSS } from "./header";
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -38,6 +39,7 @@ const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [boxShadow, children, className, id, style]);
 }));
 const ModalFooterCSS = boxShadow => css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${itemsCenter};
@@ -64,4 +66,5 @@ ModalFooter.propTypes = {
   /** Style inline of component. */
   style: PropTypes.object
 };
-export default ModalFooter;
+export { ModalFooter };
+export default OptionWrapper(ModalFooter);

package/components/modal/header.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { ButtonIcon, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { bgColor, boxBorder, cursorMove, displayFlex, flexRow, itemsCenter, justifyBetween, mgl, order, parseWidth, parseWidthHeight, positionRelative, truncate } from "../../styles/general";
@@ -114,4 +115,5 @@ ModalHeader.propTypes = {
   /** The content of the component if not have prop `children`. */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
-export default ModalHeader;
+export { ModalHeader };
+export default OptionWrapper(ModalHeader);

package/components/modal/modal.js

@@ -1,11 +1,12 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { animations } from "../../styles/animation";
-import { bgColor, borderRadius4px, boxBorder, cursorMove, flexCol, flexRow, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionRelative, top } from "../../styles/general";
+import { bgColor, borderRadius, boxBorder, cursorMove, displayFlex, flexCol, flexRow, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionRelative, top } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, useDelayUnmount } from "../../utils";
 import ModalContext from "./context";
@@ -187,6 +188,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [alignment, autoFocus, children, className, darkTheme, dragAnyWhere, id, moveable, moveOutScreen, onClose, open, pressESCToClose, style, width, zIndex, openState, showModal]);
 }));
 const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
+    ${displayFlex};
     ${flexRow};
     ${positionAbsolute}
     ${justifyCenter};
@@ -200,15 +202,16 @@ const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
 `;
 const ModalBoxCSS = (width, moveable, dragAnyWhere) => css`
     ${paragraph1};
+    ${displayFlex};
     ${flexCol};
     ${positionRelative};
-    ${borderRadius4px}
+    ${borderRadius(4)};
     ${boxBorder};
     ${parseWidthHeight(width, 'max-content')};
     ${parseMaxWidthHeight('90%', 'calc(100% - 12px)')};
     ${parseMinWidth(150)};
     ${moveable && dragAnyWhere && cursorMove};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     margin: 0 auto;
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     -webkit-box-orient: vertical;
@@ -267,4 +270,5 @@ Modal.propTypes = {
   /** The z-index of component. */
   zIndex: PropTypes.number
 };
-export default Modal;
+export { Modal };
+export default OptionWrapper(Modal);

package/components/paging/page-info.js

@@ -6,27 +6,18 @@ import OptionWrapper from "../others/option-wrapper";
 import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { itemsCenter, boxBorder, cursorPointer, flexRow, justifyCenter, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, textCenter, whiteSpaceNoWrap } from "../../styles/general";
+import { bgColor, borderTop, boxBorder, cursorPointer, displayFlex, flexRow, itemsCenter, justifyCenter, mg, mgb, mgl, noPadding, parseHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidthHeight, pd, textCenter, textColor, textLeft, whiteSpaceNoWrap } from "../../styles/general";
 import { useTheme } from "../../theme";
 import { classNames, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
-      active: systemActive,
-      white: systemWhite
-    },
-    line: {
-      system: lineSystem,
-      category: lineCategory
-    },
-    text: {
-      main: textMain
+      active: systemActive
     }
   },
   typography: {
     paragraph2
-  },
-  spacing
+  }
 } = useTheme();
 const getLastPage = (totalItems, itemsPerPage) => {
   let _lastPage = 0;
@@ -57,7 +48,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const timer = useRef(null);
-  const currentPageRef = useRef(null);
+  const currentPageRef = useRef(currentPage);
   const numberRef = useRef(null);
   const totalRef = useRef(null);
   const [totalItemsState, setTotalItemsState] = useState(totalItems);
@@ -67,7 +58,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const [disablePrevState, setDisablePrevState] = useState(true);
   const [disableNextState, setDisableNextState] = useState(!(totalItems > itemsPerPage));
   const [inputPageValue, setInputPageValue] = useState(currentPage);
-  const _pagingInfoCSS = pagingInfoCSS(bgColor, typeShort);
+  const _PagingInfoCSS = PagingInfoCSS(bgColor, typeShort);
   const _onChangePage = async ({
     page,
     e,
@@ -296,7 +287,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const showPaging = checkShowPaging();
     return showPaging ? jsx("div", {
       ref: ref,
-      css: _pagingInfoCSS,
+      css: _PagingInfoCSS,
       id: id,
       style: style,
       className: classNames('DGN-UI-PagingInfo', className)
@@ -363,9 +354,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         totalRef.current = refs;
         setWithNumber(refs, null);
       },
-      css: css`
-                                    ${whiteSpaceNoWrap}
-                                `,
+      css: whiteSpaceNoWrap,
       type: 'p2'
     }, lastPage)), jsx(ButtonIcon, {
       circular: true,
@@ -412,7 +401,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: lineCategory
+      color: 'line/category'
     }) : getGlobal('lineNumber'), jsx(Dropdown, {
       allowSearch: false,
       viewType: 'underlined',
@@ -435,57 +424,59 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, typeShort ? jsx(Divider, {
       direction: 'vertical',
       height: 24,
-      color: lineCategory
+      color: 'line/category'
     }) : getGlobal('total') + ':', totalItemsState)) : null;
   }, [bgColor, className, hideWithPage, style, typeShort, currentPageState, disableNextState, disablePrevState, inputPageValue, itemsPerPageState, listPerPageState, totalItemsState]);
 }));
 const ViewNumberInput = css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${justifyCenter};
+    ${mg([0, 1])};
     transition: all 0.1s;
-    margin: ${spacing([0, 1])};
 `;
-const pagingInfoCSS = (bgColor, typeShort) => css`
+const PagingInfoCSS = (bgCl, typeShort) => css`
+    ${displayFlex};
     ${flexRow};
     ${itemsCenter};
     ${paragraph2};
     ${boxBorder};
     ${parseHeight(40)};
-    border-top: solid 1px ${lineSystem};
-    padding: ${spacing([1, 0])};
-    background-color: ${bgColor};
-    color: ${textMain};
+    ${borderTop(1, 'line/system')};
+    ${pd([1, 0])};
+    ${bgColor(bgCl)};
+    ${textColor('text/main')};
     .inputPage {
         ${textCenter};
-        margin: ${spacing([0, 0.5])};
+        ${mg([0, 0.5])};
         .DGN-UI-InputBase {
             ${noPadding};
             input {
                 ${paragraph2};
                 ${textCenter};
-                color: ${systemActive};
-                text-align: left;
+                ${textColor('system/active')};
+                ${textLeft};
             }
         }
     }
     .txt-line-number {
+        ${displayFlex};
         ${whiteSpaceNoWrap};
         ${itemsCenter};
         opacity: 0;
-        display: flex !important;
         transition: opacity 0.3s ease;
     }
     .DGN-UI-Divider {
-        margin: ${spacing([0, 2])};
+        ${mg([0, 2])};
     }
     .DGN-UI-Dropdown {
-        margin-left: ${`${spacing(typeShort ? [0] : [2])}`};
-        margin-bottom: 0;
+        ${mgl([typeShort ? 0 : 2])};
+        ${mgb(0)};
         ${parseMinWidth(52)};
         .DGN-UI-Dropdown-Form {
             ${parseMinHeight(24)};
-            padding: 0;
+            ${pd(0)};
             input,
             span {
                 ${paragraph2};
@@ -493,7 +484,7 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
                 ${cursorPointer};
             }
             .DGN-UI-Dropdown-Icon {
-                margin-left: ${spacing([1.5])};
+                ${mgl([1.5])};
                 div,
                 span,
                 svg {
@@ -504,16 +495,17 @@ const pagingInfoCSS = (bgColor, typeShort) => css`
         }
     }
     .total-items {
-        ${whiteSpaceNoWrap};
+        ${displayFlex};
         ${flexRow};
+        ${whiteSpaceNoWrap};
         ${itemsCenter};
-        margin-left: ${`${spacing(typeShort ? [0] : [4])}`};
+        ${mgl([typeShort ? 0 : 4])};
         opacity: 0;
         transition: opacity 0.3s ease;
     }
 `;
 PagingInfo.defaultProps = {
-  bgColor: systemWhite,
+  bgColor: 'system/white',
   className: '',
   currentPage: 0,
   hideWithPage: 'none',
@@ -572,8 +564,19 @@ PagingInfo.propTypes = {
    *  * @param {per} - number
    * * setTotalItems(items): Set total items
    *  * @param {items} - number
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
-  reference: ref
+  ref: ref
 };
 export { PagingInfo };
 export default OptionWrapper(PagingInfo);

package/components/paging/page-selector2.js

@@ -1,13 +1,14 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useState, useRef, useEffect, useMemo, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import { getGlobal } from "../../global";
-import theme from "../../theme/settings";
-import { itemsCenter, boxBorder, flexRow, parseHeight } from "../../styles/general";
-import { ButtonIcon } from '..';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { boxBorder, flexRow, itemsCenter, parseHeight } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { refType as ref } from "../../utils";
 import { useElementSize } from "../../utils/useElementSize";
 const {
   colors: {
@@ -22,7 +23,7 @@ const {
     paragraph2
   },
   spacing
-} = theme;
+} = useTheme();
 const getLastPage = (totalItems, itemsPerPage) => {
   let _lastPage = 0;
   if (totalItems && totalItems >= 0 && itemsPerPage && itemsPerPage > 0) {
@@ -49,7 +50,7 @@ const PagingSelector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const timer = useRef(null);
-  const currentPageRef = useRef(null);
+  const currentPageRef = useRef(currentPage);
   const [totalItemsState, setTotalItemsState] = useState(totalItems);
   const [itemsPerPageState, setItemsPerPageState] = useState(itemsPerPage || 10);
   const [currentPageState, setCurrentPageState] = useState(currentPage);
@@ -377,9 +378,7 @@ PagingSelector.propTypes = {
    * * setTotalItems(items): Set total items
    *  * @param {items} - number
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  ref: ref
 };
 export { PagingSelector };
 export default OptionWrapper(PagingSelector);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.94-beta.2",
+  "version": "1.3.94-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",
@@ -68,6 +68,6 @@
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2",
     "run-script-os": "^1.1.6",
-    "sass": "^1.37.0"
+    "sass": "1.58.3"
   }
 }

package/styles/animations.js

@@ -0,0 +1,13 @@
+import { keyframes } from '@emotion/core';
+const fadeIn = keyframes`
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+`;
+export const animations = {
+  fadeIn
+};

package/styles/colors.js

@@ -301,7 +301,8 @@ color.fill = {
   tooltip: hexToRGBA(color.dark, 0.9),
   focus: color.blue16,
   focusshd: hexToRGBA(color.dark, 0.1),
-  headerUI: color.dark13
+  headerUI: color.dark13,
+  'header-datagrid': color.brand1
 };
 color.text = {
   main: color.dark,

package/styles/general.js

@@ -1,4 +1,5 @@
 import { css } from '@emotion/core';
+import { animations } from "./animations";
 import { getColor, parseCSSValue, parseToPixel } from "./utils";
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
@@ -43,6 +44,13 @@ export const setZIndex = number => {
 };
 
 // Common CSS
+const animation = ({
+  keyframes = animations.fadeIn,
+  duration = '0.5s',
+  timingFunction = 'ease'
+}) => css`
+    animation: ${keyframes} ${duration} ${timingFunction};
+`;
 const bgColor = cl => css`
     background-color: ${getColor(cl)};
 `;
@@ -53,10 +61,10 @@ const bgTransparent = css`
     background-color: transparent;
 `;
 const border = (withVl, colorVl) => css`
-    border: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system.dark')};
+    border: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
 `;
 const borderBottom = (withVl, colorVl) => css`
-    border-bottom: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system.dark')};
+    border-bottom: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
 `;
 const borderBottomColor = cl => css`
     border-bottom-color: ${getColor(cl)};
@@ -82,6 +90,12 @@ const borderRadius4px = css`
 const borderRadius50 = css`
     border-radius: 50%;
 `;
+const borderTop = (withVl, colorVl) => css`
+    border-top: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/dark')};
+`;
+const borderTopColor = cl => css`
+    border-top-color: ${getColor(cl)};
+`;
 const bottom = vl => css`
     bottom: ${parseCSSValue(vl)};
 `;
@@ -464,4 +478,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { animation, bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, borderTop, borderTopColor, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/utils/index.js

@@ -12,12 +12,14 @@ export { default as parseTextToHTML } from "./parseHTML";
 export { default as promisify } from "./promisify";
 export { default as randomString } from "./randomString";
 export { default as refType } from "./refType";
+export { default as refMethodType } from "./refMethodType";
 export { default as removeUnicode } from "./remove-unicode";
 export { default as renderHTML } from "./renderHTML";
 export { default as renderIcon } from "./renderIcon";
 export { default as SbTemplate } from "./sb-template";
 export { default as updatePosition } from "./updatePosition";
 export { default as useDelayUnmount } from "./useDelayUnmount";
+export { default as useElementSize } from "./useElementSize";
 export { default as useInput } from "./useInput";
 export { default as useIntersection } from "./intersectionObserver";
 export { default as useMediaQuery } from "./useMediaQuery";

package/utils/refMethodType.js

@@ -0,0 +1,6 @@
+const refMethodType = (props, propName, componentName) => {
+  if (propName in props) {
+    return new Error(`Invalid prop ${propName} passed to ${componentName}. Don't use this prop! This prop only used for showing ref methods on storybook!`);
+  }
+};
+export default refMethodType;

package/utils/useElementSize.js

@@ -51,4 +51,5 @@ export const useElementSize = () => {
     handleSize();
   }, [ref === null || ref === void 0 ? void 0 : ref.offsetHeight, ref === null || ref === void 0 ? void 0 : ref.offsetWidth]);
   return [setRef, size];
-};
+};
+export default useElementSize;