diginet-core-ui 1.4.7 → 1.4.8

package/components/avatar/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import { forwardRef, Fragment, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { borderNone, borderRadius, boxContent, cursorInherit, cursorPointer, displayBlock, displayFlex, displayInlineFlex, displayNone, flexCol, itemsCenter, overflowHidden, parseMinWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, userSelectNone, z } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames, isMobile } from "../../utils";
+import { classNames, isMobile, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
@@ -364,7 +364,7 @@ Avatar.propTypes = {
   /** the error to show on wrong type */
   wrongTypeError: PropTypes.string,
   /**
-   * ref methods
+   * ref methods (ref.current.instance.*method*)
    *
    * * option(): Gets all UI component properties
    *  * Returns value - object
@@ -377,9 +377,7 @@ Avatar.propTypes = {
    * * option(options): Updates the values of several properties
    *  * @param {options} - object
    */
-  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.instanceOf(Element)
-  })])
+  ref: ref
 };
 export { Avatar };
 export default OptionWrapper(Avatar);

package/components/card/body.js

@@ -4,7 +4,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -45,7 +45,22 @@ CardBody.propTypes = {
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
   /** The title of the component's header. */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * 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
+   */
+  ref: ref
 };
 export { CardBody };
 export default OptionWrapper(CardBody);

package/components/card/extra.js

@@ -4,7 +4,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const CardExtra = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -45,7 +45,22 @@ CardExtra.propTypes = {
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
   /** The title of the component's header. */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * 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
+   */
+  ref: ref
 };
 export { CardExtra };
 export default OptionWrapper(CardExtra);

package/components/card/footer.js

@@ -4,7 +4,7 @@ import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const CardFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -45,7 +45,22 @@ CardFooter.propTypes = {
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
   /** The title of the component's header. */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * 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
+   */
+  ref: ref
 };
 export { CardFooter };
 export default OptionWrapper(CardFooter);

package/components/card/header.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
 import OptionWrapper from "../others/option-wrapper";
 import Typography from "../typography";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const CardHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -48,7 +48,22 @@ CardHeader.propTypes = {
   /** If `true`, will have divider between body and footer. */
   style: PropTypes.object,
   /** The title of the component's header. */
-  title: PropTypes.string
+  title: PropTypes.string,
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * 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
+   */
+  ref: ref
 };
 export { CardHeader };
 export default OptionWrapper(CardHeader);

package/components/card/index.js

@@ -10,7 +10,7 @@ import CardHeader from "./header";
 import { CardFooter } from "./footer";
 import { CardBody } from "./body";
 import { getColor } from "../../styles/utils";
-import { classNames } from "../../utils";
+import { classNames, refType as ref } from "../../utils";
 const {
   colors: {
     system: {
@@ -173,7 +173,22 @@ Card.propTypes = {
   /** The title of the component's header. */
   title: PropTypes.string,
   /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * 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
+   */
+  ref: ref
 };
 export { Card };
 export default OptionWrapper(Card);

package/components/chip/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from "../";
 import Icon from "../../icons";
-import { itemsCenter, border, boxBorder, flexRow, displayInlineFlex, justifyCenter, positionRelative, userSelectNone, cursorNotAllowed, positionAbsolute, overflowHidden } from "../../styles/general";
+import { itemsCenter, border, boxBorder, flexRow, displayInlineFlex, justifyCenter, positionRelative, userSelectNone, cursorNotAllowed, positionAbsolute, overflowHidden, pointerEventsNone } from "../../styles/general";
 import { hexToRGBA } from "../../styles/color-helper";
 import { useTheme, useColor as colors } from "../../theme";
 const {
@@ -183,6 +183,7 @@ const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
                 content: '';
                 width: 100%;
                 height: 100%;
+                ${pointerEventsNone};
             }
             &:hover::after,
             &:focus::after {

package/components/form-control/calendar/function.js

@@ -5,7 +5,7 @@ import { Button, ButtonIcon, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import { render } from 'react-dom';
-import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, mgt, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pd, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
+import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, insetX, insetY, itemsCenter, justifyBetween, mg, mgt, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pd, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { date as moment } from "../../../utils";
 const {
@@ -131,7 +131,8 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 }
                 ::before {
                     ${positionAbsolute};
-                    ${inset('1px -2px')};
+                    ${insetY(1)};
+                    ${insetX(-2)};
                     content: '';
                 }
             }

package/components/form-control/date-picker/index.js

@@ -511,7 +511,7 @@ const ControlContainerCSS = css`
     ${mg([0, 4, 4])};
 `;
 const PickerCSS = {
-  backGr: `background-color: transparent; inset: 0px; pointer-events: auto; position: fixed; z-index: ${zIndexCORE(1)};`,
+  backGr: `background-color: transparent; top: 0px; bottom: 0px; left: 0px; right: 0px; pointer-events: auto; position: fixed; z-index: ${zIndexCORE(1)};`,
   picker: (position, positionLeft, width) => css`
         ${positionFixed};
         ${borderRadius4px};

package/components/form-control/date-range-picker/index.js

@@ -1024,7 +1024,7 @@ const ControlContainerCSS = css`
 const pickerCSS = {
   backGr: `
         background-color: transparent; 
-        inset: 0px; pointer-events: auto; 
+        top: 0px; bottom: 0px; left: 0px; right: 0px; pointer-events: auto; 
         position: fixed; 
         z-index: ${zIndexCORE(1)};`,
   container: css`

package/components/modal/modal.js

@@ -6,7 +6,7 @@ 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, borderRadius, boxBorder, cursorMove, displayFlex, flexCol, flexRow, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionRelative, top } from "../../styles/general";
+import { bgColor, borderRadius, boxBorder, cursorMove, displayFlex, flexCol, flexRow, inset, justifyCenter, left, parseMaxWidthHeight, parseMinWidth, parseWidthHeight, pdt, positionAbsolute, positionFixed, positionRelative, top } from "../../styles/general";
 import { makeStyles, useTheme } from "../../theme";
 import { classNames, useDelayUnmount } from "../../utils";
 import ModalContext from "./context";
@@ -49,6 +49,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const modalBoxRef = useRef(null);
   const [openState, setOpenState] = useState(open);
   const showModal = useDelayUnmount(openState, 200);
+  const _ModalCSS = ModalCSS(zIndex);
   const _ModalContainerCSS = ModalContainerCSS(zIndex, alignment, darkTheme);
   const _ModalBoxCSS = ModalBoxCSS(width, moveable, dragAnyWhere);
   const onShowModal = () => {
@@ -163,11 +164,7 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (showModal) {
       const node = jsx("div", {
         className: 'DGN-UI-Portal DGN-UI-Modal',
-        style: {
-          position: 'fixed',
-          zIndex,
-          inset: 0
-        }
+        css: _ModalCSS
       }, jsx("div", {
         id: id,
         css: _ModalContainerCSS,
@@ -191,6 +188,11 @@ const Modal = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return null;
   }, [alignment, autoFocus, children, className, darkTheme, dragAnyWhere, id, moveable, moveOutScreen, onClose, open, pressESCToClose, style, width, zIndex, openState, showModal]);
 }));
+const ModalCSS = zIndex => css`
+    ${positionFixed};
+    z-index: ${zIndex};
+    ${inset(0)};
+`;
 const ModalContainerCSS = (zIndex, alignment, darkTheme) => css`
     ${displayFlex};
     ${flexRow};

package/components/others/option-wrapper/index.js

@@ -1,10 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { useState, forwardRef, useEffect } from 'react';
+import { useState, forwardRef, useEffect, memo } from 'react';
 import { jsx } from '@emotion/core';
 import sx from "../../../styles/sx";
 const OptionWrapper = WrappedComponent => {
-  return /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/memo( /*#__PURE__*/forwardRef((props, ref) => {
     const [options, setOptions] = useState({});
     const option = (option, optionValue) => {
       if (typeof option === 'undefined') {
@@ -32,6 +32,6 @@ const OptionWrapper = WrappedComponent => {
       ref: ref,
       css: sx(props === null || props === void 0 ? void 0 : props.sx)
     });
-  });
+  }));
 };
 export default OptionWrapper;

package/components/paging/page-info.js

@@ -273,6 +273,7 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   return useMemo(() => {
+    var _lastPage$toString;
     const lastPage = getLastPage(totalItemsState, itemsPerPageState);
     let listPerPageData = !listPerPageState.includes(itemsPerPageState) ? [{
       name: itemsPerPageState,
@@ -348,7 +349,8 @@ const PagingInfo = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       placeholder: '',
       max: lastPage,
       onKeyDown: checkKeyPress,
-      onChange: onTypePaging
+      onChange: onTypePaging,
+      maxDigit: (_lastPage$toString = lastPage.toString()) === null || _lastPage$toString === void 0 ? void 0 : _lastPage$toString.length
     }), "/", jsx(Typography, {
       ref: refs => {
         totalRef.current = refs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.4.7",
+  "version": "1.4.8",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.4.8
+- \[Changed\]: Storybook – Update storybook of some components
+- \[Fixed\]: General – Fix bug css inset cannot use on Safari below 14
+- \[Fixed\]: PagingInfo – Fix stretch UI NumberInput
+- \[Fixed\]: Chip – Fix clear button cannot with viewType filled
+
 ## 1.4.7
 - \[Changed\]: Button – Remove attribute disabled in button tag
 

package/styles/general.js

@@ -208,7 +208,8 @@ const gapY = vl => css`
     column-gap: ${getSpacing(vl)};
 `;
 const inset = vl => css`
-    inset: ${parseCSSValue(vl)};
+    ${insetX(vl)};
+    ${insetY(vl)};
 `;
 const insetX = vl => css`
     right: ${parseCSSValue(vl)};

package/utils/render-portal.js

@@ -11,7 +11,7 @@ export const getPortal = () => {
   if (portal) return portal;
   const node = document.createElement('div');
   node.id = idPortal;
-  node.style.cssText = `position: fixed; inset: 0; pointer-events: none; z-index: ${zIndex()};`;
+  node.style.cssText = `position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; pointer-events: none; z-index: ${zIndex()};`;
   return document.body.appendChild(node);
 };
 export const isLastChildNode = node => {