diginet-core-ui 1.3.79-beta.3 → 1.3.79-beta.4

package/components/button/icon.js

@@ -329,7 +329,7 @@ ButtonIcon.propTypes = {
    * * large (button 48px, icon 32px)
    * * giant (button 56px, icon 40px)
    * */
-  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant']),
+  size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
   style: PropTypes.object,
   /** If `true`, icon has view box. */

package/components/button/more.js

@@ -55,7 +55,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   const renderOptions = () => {
-    return options.map(item => {
+    return options.map((item, idx) => {
       if ( /*#__PURE__*/isValidElement(item)) return item;else {
         const icon = item === null || item === void 0 ? void 0 : item.icon;
         const label = item === null || item === void 0 ? void 0 : item.label;
@@ -65,7 +65,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         };
         if (icon && !iconState) setIconState(true);
         return isOptionFull ? jsx("button", {
-          key: item,
+          key: idx,
           css: OptionFullCSS,
           className: 'DGN-UI-ButtonMore-Option',
           onClick: action
@@ -80,7 +80,7 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           className: 'DGN-UI-ButtonMore-Label',
           ...labelProp
         }, label)) : jsx(ButtonIcon, {
-          key: item,
+          key: idx,
           className: 'DGN-UI-ButtonMore-Option',
           circular: true,
           name: icon,

package/components/divider/index.js

@@ -1,78 +1,78 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useEffect, useRef, forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { noBorder } from "../../styles/general";
-import { color as colors } from "../../styles/colors";
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { noBorder, parseWidthHeight } from "../../styles/general";
+import { useColor as colors, useTheme } from "../../theme";
+import { classNames } from "../../utils";
 const {
-  system: {
-    disabled: systemDisabled
+  colors: {
+    system: {
+      disabled: systemDisabled
+    }
   }
-} = colors;
+} = useTheme();
 const Divider = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  width,
-  height,
-  direction,
-  color,
+  action = {},
   className,
+  color,
+  direction,
+  height,
+  id,
   style,
-  ...props
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
-  if (typeof width === 'number') width = `${width}px`;
-  if (typeof height === 'number') height = `${height}px`;
-  const DividerRoot = css`
-            ${noBorder}
-            flex-shrink: 0;
-            margin: 0;
-            background-color: ${colors.semantic[color] || color};
-            &.vertical {
-                width: ${width || '1px'};
-                height: ${height || '100%'};
-                /* margin: auto 5px; */
-            }
-            &.horizontal {
-                width: ${width || '100%'};
-                height: ${height || '1px'};
-                /* margin: 5px auto; */
-            }
-        `;
-  useEffect(() => {
-    if (direction === 'vertical' && !height && ref.current && ref.current.parentNode) {
-      ref.current.style.height = ref.current.parentNode.offsetHeight + 'px';
-    }
-  }, []);
+  width
+}, reference) => {
+  const ref = useRef(null);
+  const _DividerRoot = DividerRoot(color, width, height);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => jsx("hr", {
-    css: DividerRoot,
+    css: _DividerRoot,
     ref: ref,
+    id: id,
     style: style,
-    className: ['DGN-UI-Divider', direction, className].join(' ').trim(),
-    ...props
-  }), [width, height, color, style, className]);
+    className: classNames('DGN-UI-Divider', direction, className)
+  }), [className, color, direction, height, id, style, width]);
 }));
+const DividerRoot = (color, width, height) => css`
+    ${noBorder}
+    flex-shrink: 0;
+    margin: 0;
+    background-color: ${colors[color] || color};
+    &.vertical {
+        ${parseWidthHeight(width || '1px', height || 'auto')};
+    }
+    &.horizontal {
+        ${parseWidthHeight(width || '100%', height || '1px')};
+    }
+`;
 Divider.defaultProps = {
+  className: '',
   color: systemDisabled,
   direction: 'horizontal',
-  style: {},
-  className: ''
+  style: {}
 };
 Divider.propTypes = {
-  /** width of divider */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** color of divider */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** color of divider */
+  /** Class for component. */
+  className: PropTypes.string,
+  /** The color of the component. */
   color: PropTypes.string,
   /** direction of divider */
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  /** style inline of divider */
+  /** Height oof the component. */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Style inline of component. */
   style: PropTypes.object,
-  /** className of divider */
-  className: PropTypes.string,
-  /** any props else */
-  props: PropTypes.object
+  /** Width of the component. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 export default Divider;

package/components/form-control/attachment/index.js

@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom';
 import { ButtonIcon, HelperText, LinearProgress, List, ListItem, ListItemText, ModalSample, Notify, Popover, Popup, ScrollBar, Slider, SliderItem, Typography } from "../../";
 import { getGlobal } from "../../../global";
 import { Another, Compressed, Image, Pdf, Presentation, Sheet, Word } from "../../../icons";
-import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseMaxWidthHeight, parseMinHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
+import { alignCenter, border, borderBox, borderRadius4px, borderRadius50, breakWord, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexRow, flexWrap, justifyBetween, justifyCenter, justifyStart, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textCenter, userSelectNone } from "../../../styles/general";
 import { makeStyles, useTheme } from "../../../theme";
 import { classNames, date as moment, getFileType } from "../../../utils";
 import Label from "../label";
@@ -102,7 +102,6 @@ const oldAttached = [];
 const allNewAttached = new FormData();
 const attached = [];
 const chosenItems = [];
-let timer = null;
 let prevent = false;
 let existClickOutOfItem = false;
 let maxSize = Infinity;
@@ -202,15 +201,16 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const isDeleteAll = useRef(false);
   const PushNotify = useRef(null);
   const removedAttachedRef = useRef([]);
-  const [open, setOpen] = useState(false);
-  const [popup, setPopup] = useState(false);
-  const [popover, setPopover] = useState(false);
+  const timer = useRef(null);
+  const [showModal, setShowModal] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [showPopover, setShowPopover] = useState(false);
   const [viewTypeState, setViewTypeState] = useState(viewType);
   const [isEmpty, setIsEmpty] = useState(null);
 
   // Start handler
   const onShowSortPopover = () => {
-    setPopover(true);
+    setShowPopover(true);
   };
   const onSortElement = (e, type) => {
     let multi = 1;
@@ -271,7 +271,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     attachedList.forEach(el => {
       attachedRef.current.appendChild(el);
     });
-    setPopover(false);
+    setShowPopover(false);
   };
   const afterChangeFile = (length = 0) => {
     setIsEmpty(!length);
@@ -467,10 +467,10 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return totalSize + ' ' + unitSizeName;
   };
   const onShowPopup = () => {
-    setPopup(true);
+    setShowPopup(true);
   };
   const onClosePopup = () => {
-    setPopup(false);
+    setShowPopup(false);
     if (isDeleteAll.current) {
       isDeleteAll.current = false;
       chosenItems.length = 0;
@@ -535,9 +535,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onView(node, AttachmentID);
   };
   const onView = (node, AttachmentID) => {
-    if (timer) {
+    if (timer.current) {
       prevent = true;
-      clearTimeout(timer);
+      clearTimeout(timer.current);
       // if (existClickOutOfItem) {
       //     removeAllChosenItems();
       //     attachedRef.current.querySelectorAll('.chosen').forEach(itemEl => {
@@ -548,7 +548,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     const index = Array.from(attachedRef.current.children).indexOf(node);
     if (onViewProp) onViewProp(AttachmentID, index);else {
-      setOpen(true);
+      setShowModal(true);
     }
     setTimeout(() => {
       prevent = false;
@@ -656,7 +656,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const ctrlKey = e.ctrlKey;
     const shiftKey = e.shiftKey;
     const itemEl = e.currentTarget;
-    timer = setTimeout(() => {
+    timer.current = setTimeout(() => {
       if (!prevent) {
         const index = Array.from(attachedRef.current.children).indexOf(itemEl.parentNode);
         if (shiftKey && !ctrlKey) {
@@ -1058,14 +1058,14 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: 'download',
     name: 'download',
     onClick: onDownloadMultiple
-  }), !readOnly && jsx(ButtonIcon, {
+  }), !readOnly ? jsx(ButtonIcon, {
     viewType: 'ghost',
     className: 'delete',
     name: 'delete',
     onClick: onShowPopup
-  })), jsx("div", {
+  }) : null), jsx("div", {
     css: isEmpty ? AttachmentImageEmptyCSS : AttachmentImageCSS
-  }, !(readOnly || disabled) && jsx("div", {
+  }, !(readOnly || disabled) ? jsx("div", {
     css: AttachmentImageCenterCSS
   }, jsx(ButtonIcon, {
     css: isEmpty && ButtonAttachmentCSS,
@@ -1078,7 +1078,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: userSelectNone,
     type: 'p3',
     color: systemRest
-  }, hintText) : null)), allowSort && !isEmpty ? jsx(ButtonIcon, {
+  }, hintText) : null) : null), allowSort && !isEmpty ? jsx(ButtonIcon, {
     viewType: 'ghost',
     name: 'Sort',
     ref: sortIconRef,
@@ -1086,11 +1086,11 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       marginRight: 8
     },
     onClick: onShowSortPopover
-  }) : null, jsx(ButtonIcon, {
+  }) : null, !isEmpty ? jsx(ButtonIcon, {
     viewType: 'ghost',
     name: viewTypeState === 'detail' ? 'IconView' : 'ListView',
     onClick: () => setViewTypeState(viewTypeState === 'icon' ? 'detail' : 'icon')
-  }))), [error, allowSort, disabled, readOnly, label, required, hintText, domain, viewTypeState, isEmpty]);
+  }) : null)), [error, allowSort, disabled, readOnly, label, required, hintText, domain, viewTypeState, isEmpty]);
   const AttachmentInputView = useMemo(() => jsx("div", {
     css: AttachmentInputCSS,
     className: 'DGN-UI-Attachment-Input'
@@ -1103,14 +1103,8 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...inputProps
   })), [inputProps]);
   const AttachedView = useMemo(() => jsx(ScrollBar, {
-    className: 'DGN-UI-Attachment-List',
-    style: {
-      marginRight: 5,
-      paddingTop: 0,
-      paddingBottom: 0,
-      paddingRight: 7,
-      overflowY: 'overlay'
-    }
+    css: AttachmentListCSS,
+    className: 'DGN-UI-Attachment-List'
   }, jsx("div", {
     css: AttachedCSS,
     ref: attachedRef,
@@ -1118,7 +1112,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   })), [viewTypeState]);
   const PopoverView = useMemo(() => {
     return jsx(Popover, {
-      open: popover,
+      open: showPopover,
       ref: popoverRef,
       anchor: sortIconRef,
       width: 'max-content',
@@ -1131,7 +1125,7 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         vertical: 'top',
         horizontal: 'right'
       },
-      onClose: () => setPopover(false)
+      onClose: () => setShowPopover(false)
     }, jsx(List, null, jsx(ListItem, {
       className: classes.listItem,
       button: true,
@@ -1153,9 +1147,9 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       button: true,
       onClick: e => onSortElement(e, 'username')
     }, jsx(ListItemText, null, "By owner"))));
-  }, [popover]);
+  }, [showPopover]);
   const PopupView = useMemo(() => jsx(Popup, {
-    open: popup,
+    open: showPopup,
     ref: popupRef,
     type: 'yes-no',
     variant: 'warning',
@@ -1166,20 +1160,20 @@ const Attachment = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClose: onClosePopup,
     onConfirm: onRemoveMultiple,
     onCancel: onClosePopup
-  }), [deleteNotifyText, onChange, onRemoveProp, popup]);
+  }), [deleteNotifyText, onChange, onRemoveProp, showPopup]);
   const ModalView = useMemo(() => {
-    if (!chosenItems.length) return setOpen(false);
+    if (!chosenItems.length) return setShowModal(false);
     const index = chosenItems[0];
     const data = mountDomain(attached[index]);
     // let data = oldAttached[index] || allNewAttached.getAll('files')[index-oldAttached.length];
     return jsx(ModalSample, {
-      open: open,
+      open: showModal,
       title: data.FileName,
-      onClose: () => setOpen(false)
+      onClose: () => setShowModal(false)
     }, jsx(Slider, null, jsx(SliderItem, {
       url: data.URL
     })));
-  }, [domain, open]);
+  }, [domain, showModal]);
   // End view
 
   useImperativeHandle(reference, () => {
@@ -1234,6 +1228,7 @@ const AttachmentHeaderCSS = css`
     ${alignCenter};
     ${justifyBetween};
     ${borderBox};
+    ${parseWidth('100%')};
     padding: ${spacing([4, 4])};
 `;
 const AttachmentInfoCSS = css`
@@ -1250,7 +1245,6 @@ const AttachmentInputCSS = css`
     ${parseWidthHeight('100%', '100%')};
     top: 0;
     left: 0;
-    z-index: 4;
     input {
         ${positionRelative};
         ${parseWidthHeight('100%', 'calc(100% + 20px)')};
@@ -1283,13 +1277,12 @@ const AttachedItemInfoCSS = css`
     ${alignCenter};
     ${borderRadius4px};
     ${userSelectNone};
+    ${parseMinWidth('calc(50% - 10px)')};
     margin-right: ${spacing([2])};
-    min-width: calc(50% - 10px);
 `;
 const AttachedItemInfoIconCSS = css`
     ${flexRow};
     ${positionRelative};
-    ${cursorPointer};
     ${parseMaxWidthHeight(14, 16)};
     padding: ${spacing([1, 1.25])};
     box-sizing: content-box;
@@ -1297,7 +1290,7 @@ const AttachedItemInfoIconCSS = css`
         content: '';
         ${positionAbsolute};
         ${borderRadius50};
-        ${parseWidthHeight(4, 4)}
+        ${parseWidthHeight(4, 4)};
         top: 4.5px;
         left: -2px;
         background: ${semanticSuccess};
@@ -1305,7 +1298,6 @@ const AttachedItemInfoIconCSS = css`
 `;
 const AttachedItemInfoNameCSS = css`
     ${paragraph1};
-    ${cursorPointer};
     ${ellipsis};
     color: ${systemDark};
     margin-left: ${spacing([3])};
@@ -1317,9 +1309,8 @@ const AttachedItemOwnerCSS = css`
     ${flexRow};
     ${positionRelative};
     ${alignCenter};
-    ${cursorPointer};
     ${userSelectNone};
-    height: 100%;
+    ${parseHeight('100%')};
     color: ${textSub};
     .detail-info {
         ${flexRow};
@@ -1353,17 +1344,17 @@ const AttachedLinearCSS = css`
 const AttachedItemCSS = css`
     ${flexRow};
     ${justifyBetween};
-    ${alignCenter};
     ${positionRelative};
     ${borderRadius4px};
+    ${cursorPointer};
     ${parseHeight(24)};
     padding: ${spacing([0, 2])};
     transition: padding 0.5s ease;
 `;
 const AttachedCSS = css`
     ${positionRelative};
-    height: 100%;
-    max-height: 152px;
+    ${parseHeight('100%')};
+    ${parseMaxHeight(152)};
     margin-left: ${spacing([2])};
     margin-right: ${spacing([2])};
     z-index: 1;
@@ -1383,10 +1374,10 @@ const AttachedCSS = css`
             content: '';
             flex: auto;
         }
-        max-height: 200px;
+        ${parseMaxHeight(200)};
+        ${parseWidth('max-content')};
+        ${parseMaxWidth('calc(100% - 26px)')};
         margin-left: 0;
-        width: max-content;
-        max-width: calc(100% - 26px);
         .attachment-row {
             ${positionRelative};
             margin-left: ${spacing([4])};
@@ -1402,17 +1393,16 @@ const AttachedCSS = css`
                 ${positionRelative};
                 ${textCenter};
                 ${ellipsis};
-                width: max-content;
-                max-width: 80px;
+                ${parseWidth('max-content')};
+                ${parseMaxWidth(80)};
+                ${parseMinWidth(70)};
                 margin-left: auto;
                 margin-right: auto;
-                min-width: 70px;
                 .css-${AttachedItemInfoIconCSS.name} {
                     ${displayBlock};
                     ${parseWidthHeight(40, 40)};
-                    max-height: 40px;
-                    max-width: 40px;
-                    margin: 4px auto 2px;
+                    ${parseMaxWidthHeight(40, 40)};
+                    margin: ${spacing([1, 'auto', 0.5])};
                     padding: 0;
                     &.new-file:after {
                         ${parseWidthHeight(8, 8)};
@@ -1424,9 +1414,9 @@ const AttachedCSS = css`
                     ${paragraph3};
                     ${textCenter};
                     ${breakWord};
+                    ${parseMaxWidth('100%')};
                     margin: ${spacing([0, 2])};
                     display: -webkit-box;
-                    max-width: 100%;
                     white-space: pre-wrap;
                     -webkit-line-clamp: 2;
                     -webkit-box-orient: vertical;
@@ -1452,6 +1442,12 @@ const AttachedCSS = css`
         min-width: 684px;
     }
 `;
+const AttachmentListCSS = css`
+    ${borderBox};
+    margin-right: ${spacing([1.25])};
+    padding: ${spacing([0, 1.75, 0])};
+    overflow-y: overlay;
+`;
 const AttachmentRootCSS = css`
     ${flexCol};
     ${flexWrap};
@@ -1493,10 +1489,10 @@ const AttachmentRootCSS = css`
     }
     @media (max-width: 716px) {
         .css-${AttachedCSS.name}:not(.icon-view) {
-            min-width: 575px;
+            ${parseMinWidth(575)};
         }
         .css-${AttachedItemInfoCSS.name} {
-            max-width: calc(40% - 10px);
+            ${parseMaxWidth('calc(40% - 10px)')};
         }
     }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.79-beta.3",
+  "version": "1.3.79-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/components/divider/style.js

@@ -1,12 +0,0 @@
-export default ((width, height) => ({
-  vertical: `
-        width: ${isNaN(width) ? width : width + 'px'};
-        height: 100%;
-        margin: auto 5px;
-    `,
-  horizontal: `
-        width: 100%;
-        height: ${isNaN(height) ? height : height + 'px'};
-        margin: 5px auto;
-    `
-}));