diginet-core-ui 1.3.65 → 1.3.66

package/components/status/index.js

@@ -1,103 +1,105 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useMemo, forwardRef, useRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { Typography } from '../';
 import Icon from '../../icons';
-import { alignCenter, backgroundTransparent, borderBox, inlineFlex, justifyCenter } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
+import { alignCenter, backgroundTransparent, borderBox, flexRow } from '../../styles/general';
+import theme from '../../theme/settings';
+import OptionWrapper from '../others/option-wrapper';
 const {
-  system: {
-    active,
-    rest
-  },
-  semantic: {
-    success,
-    warning,
-    danger,
-    info
-  },
-  fill: {
-    sidebar
+  colors: {
+    system: {
+      active,
+      rest
+    },
+    semantic: {
+      success,
+      warning,
+      danger,
+      info
+    },
+    fill: {
+      sidebar
+    }
   }
-} = colors;
+} = theme;
 const colorMap = new Map([['default', rest], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
 const iconSizeMap = new Map([['small', '16px'], ['medium', '20px'], ['large', '24px']]);
 const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
-const filledPaddingSizeMap = new Map([['small', '0px 8px'], ['medium', '0px 12px'], ['large', '0px 16px']]);
+const filledPaddingSizeMap = new Map([['small', '2px 8px'], ['medium', '2px 12px'], ['large', '2px 12px']]);
 const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  style,
-  viewType,
-  size,
+  className,
+  color,
   icon,
+  size,
   text,
-  color,
-  className,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-
+  viewType,
+  id,
+  style
+}, reference) => {
+  const ref = useRef(null);
   const outlinedPaddingSize = filledPaddingSizeMap.get(size);
 
-  const _color = colorMap.get(color);
+  const _color = colorMap.get(color) || color || rest;
 
   const iconSize = iconSizeMap.get(size);
   const typographySize = typographySizeMap.get(size);
-  const StatusRoot = css`
-        ${inlineFlex}
-        ${alignCenter}
-        ${justifyCenter}
-        ${backgroundTransparent}
-        ${borderBox}
-        min-height: ${iconSize};
-        margin: 0 5px;
-        color: ${_color || color || rest};
-        &.filled {
-            color: ${sidebar};
-            background-color: ${_color || color || rest};
-            border-radius: 12px;
-            &.${size} {
-                padding: ${outlinedPaddingSize}
-            }
-        }
-    `;
-  const TextCSS = css`
-        white-space: nowrap;
-    `;
-  const StatusText = useMemo(() => jsx(Typography, {
+
+  const _StatusRoot = StatusRoot(iconSize, _color, size, outlinedPaddingSize);
+
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
+  const StatusIcon = typeof icon === 'string' ? jsx(Icon, {
+    name: icon,
+    width: iconSize,
+    height: iconSize,
+    color: 'currentColor',
+    viewBox: true
+  }) : icon;
+  const StatusText = jsx(Typography, {
     css: TextCSS,
     type: typographySize,
     color: 'inherit'
-  }, text), [text, size]);
-  const StatusIcon = useMemo(() => {
-    let node = icon;
+  }, text);
+  return useMemo(() => {
+    return jsx("div", {
+      css: _StatusRoot,
+      ref: ref,
+      id: id,
+      style: style,
+      className: ['DGN-UI-Status', viewType, size, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, StatusIcon, StatusText);
+  }, [className, color, icon, size, text, viewType, id, style]);
+}));
 
-    if (typeof node === 'string') {
-      node = jsx(Icon, {
-        name: node,
-        width: iconSize,
-        height: iconSize,
-        color: 'currentColor',
-        viewBox: true
-      });
+const StatusRoot = (iconSize, color, size, outlinedPaddingSize) => css`
+    ${flexRow};
+    ${alignCenter};
+    ${backgroundTransparent};
+    ${borderBox};
+    gap: ${size === 'small' ? '2px' : '4px'};
+    min-height: ${iconSize};
+    color: ${color};
+    &.filled {
+        color: ${sidebar};
+        background-color: ${color};
+        border-radius: 12px;
+        &.${size} {
+            padding: ${outlinedPaddingSize};
+        }
     }
+`;
 
-    return node;
-  }, [icon]);
-  return jsx("div", {
-    css: StatusRoot,
-    style: style,
-    className: ['DGN-UI-Status', viewType, size, className].join(' ').trim().replace(/\s+/g, ' '),
-    ref: ref,
-    ...props
-  }, StatusIcon, StatusText);
-}));
+const TextCSS = css`
+    white-space: nowrap;
+`;
 Status.defaultProps = {
-  viewType: 'default',
+  viewType: 'ghost',
   text: '',
   icon: '',
   size: 'medium',
@@ -105,25 +107,26 @@ Status.defaultProps = {
   style: {}
 };
 Status.propTypes = {
-  /** type of status, has background or none */
-  viewType: PropTypes.oneOf(['filled', 'default']),
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** size of status */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** The color of the component. */
+  color: PropTypes.string,
 
-  /** content to display in status */
-  text: PropTypes.string,
+  /** [Icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic--basic) or element placed before the content. */
+  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
-  /** color of text or background */
-  color: PropTypes.string,
+  /** The size of the component. */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
 
-  /** class of Status component */
-  className: PropTypes.string,
+  /** The content of the component. */
+  text: PropTypes.string,
 
-  /** style inline for Status */
-  style: PropTypes.object,
+  /** The variant to use. */
+  viewType: PropTypes.oneOf(['filled', 'default', 'ghost']),
 
-  /** icon to display before content, allow name of icons store */
-  icon: PropTypes.any
+  /** Style inline of component. */
+  style: PropTypes.object
 };
-export default Status;
+export { Status };
+export default OptionWrapper(Status);

package/components/tooltip/index.js

@@ -64,7 +64,6 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   size,
   forceDirection,
   hoverDelay,
-  onToggle,
   padding,
   style,
   tagCreatedName: TagCreatedName,
@@ -73,9 +72,10 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   tooltipMaxWidth,
   viewportPadding,
   className,
+  disabled,
   ...props
 }, reference) => {
-  const Id = randomString(length = 6, {
+  const Id = randomString(6, {
     allowSymbol: false
   });
   const IDs = {
@@ -442,6 +442,7 @@ const Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setOpenTrue = () => {
+    if (disabled) return;
     setOpen(true);
   };
 
@@ -545,7 +546,8 @@ Tooltip.defaultProps = {
   tagCreatedName: 'div',
   textAlign: 'center',
   viewportPadding: defaultViewPadding,
-  className: ''
+  className: '',
+  disabled: false
 };
 Tooltip.propTypes = {
   /** alignMode use to set align-items of the tooltip*/
@@ -569,6 +571,9 @@ Tooltip.propTypes = {
   /** initialize direction of the tooltip */
   direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
 
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+
   /** distance between the tooltip and the children */
   distance: PropTypes.number,
 

package/components/transfer/index.js

@@ -15,12 +15,10 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   selectAll,
   iconExpr,
   displayExpr,
-  valueExpr,
   width,
   height,
   paperProps,
   renderItem,
-  onChange,
   ...props
 }, ref) => {
   if (!ref) {
@@ -42,97 +40,97 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         [determinateLeft, setDeterminateLeft] = useState(true),
         [determinateRight, setDeterminateRight] = useState(true);
   const TransferRoot = css`
-        display: flex;
-        position: relative;
-    `;
+                display: flex;
+                position: relative;
+            `;
   const TransferBox = css`
-        display: block;
-        position: relative;
-        margin: 8px 0;
-        &.select-all {
-            max-height: calc(100% - 72px);
-            overflow-y: auto;
-            &::-webkit-scrollbar {
-                width: 8px;
-                background-color: #FFF !important;
-                border-radius: 4px;
-            }
-            &::-webkit-scrollbar-thumb {
-                border-radius: 4px;
-                mix-blend-mode: normal;
-                background-color: ${theme.colors.dark12} !important;
-                background-clip: content-box;
-            }
-        }
-    `;
+                display: block;
+                position: relative;
+                margin: 8px 0;
+                &.select-all {
+                    max-height: calc(100% - 72px);
+                    overflow-y: auto;
+                    &::-webkit-scrollbar {
+                        width: 8px;
+                        background-color: #fff !important;
+                        border-radius: 4px;
+                    }
+                    &::-webkit-scrollbar-thumb {
+                        border-radius: 4px;
+                        mix-blend-mode: normal;
+                        background-color: ${theme.colors.dark12} !important;
+                        background-clip: content-box;
+                    }
+                }
+            `;
   const TransferItem = css`
-        display: flex;
-        position: relative;
-        min-height: 40px;
-        &:hover {
-            background-color: ${theme.colors.hover};
-        }
-    `;
+                display: flex;
+                position: relative;
+                min-height: 40px;
+                &:hover {
+                    background-color: ${theme.colors.hover};
+                }
+            `;
   const TransferItemContent = css`
-        display: flex;
-        position: relative;
-        margin: 0 16px;
-        width: 100%;
-        align-items: center;
-        box-sizing: border-box;
-    `;
+                display: flex;
+                position: relative;
+                margin: 0 16px;
+                width: 100%;
+                align-items: center;
+                box-sizing: border-box;
+            `;
   const TransferItemHeader = css`
-        display: flex;
-        position: sticky;
-        top: 0;
-        background-color: inherit;
-        width: 100%;
-        height: 56px;
-        padding: 8px 16px;
-        align-items: center;
-        box-sizing: border-box;
-        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-        z-index: 2;
-    `;
+                display: flex;
+                position: sticky;
+                top: 0;
+                background-color: inherit;
+                width: 100%;
+                height: 56px;
+                padding: 8px 16px;
+                align-items: center;
+                box-sizing: border-box;
+                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+                z-index: 2;
+            `;
   const HeaderCheckbox = css`
-        display: inline-flex;
-        position: relative;
-        width: 40px;
-        height: 40px;
-        align-items: center;
-    `;
+                display: inline-flex;
+                position: relative;
+                width: 40px;
+                height: 40px;
+                align-items: center;
+            `;
   const HeaderTitle = css`
-        display: block;
-        position: relative;
-    `;
+                display: block;
+                position: relative;
+            `;
   const ItemCheckbox = css`
-        display: block;
-        position: relative;
-        margin-right: 19px;
-    `;
+                display: block;
+                position: relative;
+                margin-right: 19px;
+            `;
   const ItemContent = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-    `;
+                display: flex;
+                position: relative;
+                align-items: center;
+            `;
   const ItemImage = css`
-        width: 24px;
-        height: 24px;
-        margin-right: 8px;
-        object-fit: cover;
-    `;
+                width: 24px;
+                height: 24px;
+                margin-right: 8px;
+                object-fit: cover;
+            `;
   const DashboardRoot = css`
-        display: flex;
-        position: relative;
-        flex-direction: column;
-        justify-content: center;
-        margin-left: 5px;
-        margin-right: 5px;
-        button {
-            margin-top: 5px;
-            margin-bottom: 5px;
-        }
-    `;
+                display: flex;
+                position: relative;
+                flex-direction: column;
+                justify-content: center;
+                margin-left: 5px;
+                margin-right: 5px;
+                button {
+                    margin-top: 5px;
+                    margin-bottom: 5px;
+                }
+            `;
 
   const updateSelectedItemQuantity = (side, newTotal) => {
     const sideRef = side === 'right' ? chosenTextRightRef : chosenTextLeftRef;
@@ -241,7 +239,7 @@ const Transfer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       const keyArr = displayExpr && displayExpr.match(/\{\w+\}/g);
 
       if (keyArr) {
-        const pattern = keyArr.join('|').replace(/([\{\}])/g, '\\$1');
+        const pattern = keyArr.join('|').replace(/([\\{\\}])/g, '\\$1');
         const separatorArr = displayExpr.split(new RegExp(pattern));
         let str = '';
         let i = 0;
@@ -458,15 +456,12 @@ Transfer.propTypes = {
   /** field name used for icon display */
   iconExpr: string,
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: oneOfType([string, array]),
 
-  /** the field name used for the returned result */
-  valueExpr: string,
-
   /** display header to select all choices if true */
   selectAll: bool,
 
@@ -480,9 +475,6 @@ Transfer.propTypes = {
   paperProps: object,
 
   /** the function to render content in transfer item */
-  renderItem: func,
-
-  /** the function for transfer item between two list */
-  onChange: func
+  renderItem: func
 };
 export default Transfer;

package/icons/effect.js

@@ -15,7 +15,6 @@ const {
   }
 } = colors;
 const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
   name,
   className,
   style,
@@ -23,30 +22,29 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   height,
   viewBox,
-  disabled,
   onClick,
   ...props
 }, reference) => {
   const ref = useRef(null);
   const IconCss = css`
-                ${flexRow}
-                ${justifyCenter}
-        ${alignCenter}
-        ${borderBox}
-        ${outlineNone}
-        ${userSelectNone}
-        width: max-content;
-                height: max-content;
-                min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
-            `;
+            ${flexRow};
+            ${justifyCenter};
+            ${alignCenter};
+            ${borderBox};
+            ${outlineNone};
+            ${userSelectNone};
+            width: max-content;
+            height: max-content;
+            min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+            min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
+        `;
   const NotFoundIcon = css`
-                ${flexRow}
-                ${borderBox}
-        width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-                border: 1px dashed ${rest};
-            `;
+            ${flexRow};
+            ${borderBox};
+            width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+            height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+            border: 1px dashed ${rest};
+        `;
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     const _instance = {}; // methods
@@ -96,8 +94,8 @@ Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** color of icon<br />
-   * default: #7F828E
+  /** color of icon<br />
+   * default: #7F828E
    */
   color: PropTypes.string,
 
@@ -119,19 +117,19 @@ Icon.propTypes = {
   /** have view box if true */
   onClick: PropTypes.func,
 
-  /**
-   * ref methods
-   *
-   * * 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 methods
+   *
+   * * 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: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/icons/general/clock/clock.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const Clock = ({

package/icons/general/color-handler/background.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const BackgroundColor = ({

package/icons/general/color-handler/text.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const TextColor = ({

package/icons/general/emoji/emoji.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const Emoji = ({

package/icons/general/font-properties/bold.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const Bold = ({

package/icons/general/font-properties/font-family.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const FontFamily = ({

package/icons/general/font-properties/font-size.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const FontSize = ({

package/icons/general/font-properties/italic.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const Italic = ({

package/icons/general/font-properties/underline.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const Underline = ({

package/icons/general/hyperlink/hyperlink.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const Hyperlink = ({

package/icons/general/indent/decrease.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 
 const Decrease = ({