diginet-core-ui 1.3.88 → 1.3.89

package/components/index.js

@@ -1,47 +1,62 @@
-import * as components from '.'; //TOOLTIP
+import * as components from '.';
 
-export { default as Tooltip } from "./tooltip/index"; //TEXT
+//TOOLTIP
+export { default as Tooltip } from "./tooltip/index";
 
-export { default as Typography } from "./typography"; // PROGRESS
+//TEXT
+export { default as Typography } from "./typography";
 
+// PROGRESS
 export { default as CircularProgress } from "./progress/circular";
-export { default as LinearProgress } from "./progress/linear"; // ACCORDION
+export { default as LinearProgress } from "./progress/linear";
 
+// ACCORDION
 export { default as Accordion } from "./accordion";
 export { default as AccordionSummary } from "./accordion/summary";
 export { default as AccordionDetails } from "./accordion/details";
-export { default as AccordionGroup } from "./accordion/group"; // ALERT
+export { default as AccordionGroup } from "./accordion/group";
 
+// ALERT
 export { default as Alert } from "./alert";
-export { default as Notify } from "./alert/notify"; // AVATAR
+export { default as Notify } from "./alert/notify";
 
-export { default as Avatar } from "./avatar"; // BADGE
+// AVATAR
+export { default as Avatar } from "./avatar";
 
-export { default as Badge } from "./badge"; // BUTTON
+// BADGE
+export { default as Badge } from "./badge";
 
+// BUTTON
 export { default as Button } from "./button";
-export { default as ButtonIcon } from "./button/icon"; // CARD
+export { default as ButtonIcon } from "./button/icon";
 
+// CARD
 export { default as Card } from "./card";
 export { default as CardHeader } from "./card/header";
 export { default as CardBody } from "./card/body";
 export { default as CardFooter } from "./card/footer";
-export { default as CardExtra } from "./card/extra"; // CHART
+export { default as CardExtra } from "./card/extra";
 
+// CHART
 export { default as PieChart } from "./chart/Pie";
 export { default as ColumnChart } from "./chart/bar";
-export { default as LineChart } from "./chart/line"; // CHECK-TEXT
+export { default as LineChart } from "./chart/line";
 
+// CHECK-TEXT
 export { default as CheckTextConfirmation } from "./check-text/interview-confirmation";
-export { default as CheckTextStatus } from "./check-text/interview-status"; // CHIP
+export { default as CheckTextStatus } from "./check-text/interview-status";
 
+// CHIP
 export { default as Chip } from "./chip";
-export { default as AttachChip } from "./chip/attach"; // COLLAPSE
+export { default as AttachChip } from "./chip/attach";
 
-export { default as Collapse } from "./collapse"; // DIVIDER
+// COLLAPSE
+export { default as Collapse } from "./collapse";
 
-export { default as Divider } from "./divider"; // FORM CONTROL
+// DIVIDER
+export { default as Divider } from "./divider";
 
+// FORM CONTROL
 export { default as Attachment } from "./form-control/attachment";
 export { default as Checkbox } from "./form-control/checkbox";
 export { default as DatePicker } from "./form-control/date-picker";
@@ -57,60 +72,76 @@ export { default as HelperText } from "./form-control/helper-text";
 export { default as TextInput } from "./form-control/text-input";
 export { default as MoneyInput } from "./form-control/money-input";
 export { default as NumberInput } from "./form-control/number-input/index2";
-export { default as Toggle } from "./form-control/toggle"; // Grid
+export { default as Toggle } from "./form-control/toggle";
 
+// Grid
 export { default as Grid } from "./grid";
 export { default as Row } from "./grid/Row";
 export { default as Col } from "./grid/Col";
-export { default as Container } from "./grid/Container"; //Icon
+export { default as Container } from "./grid/Container";
 
-export { default as Icon } from "../icons/index"; //Image
+//Icon
+export { default as Icon } from "../icons/index";
 
-export { default as Image } from "./image"; // List
+//Image
+export { default as Image } from "./image";
 
+// List
 export { default as List } from "./list/list";
 export { default as ListItem } from "./list/list-item";
 export { default as ListItemIcon } from "./list/list-item-icon";
 export { default as ListItemText } from "./list/list-item-text";
-export { default as ListItemAction } from "./list/list-item-action"; // MODAL
+export { default as ListItemAction } from "./list/list-item-action";
 
+// MODAL
 export { default as ModalSample } from "./modal";
 export { default as Modal } from "./modal/modal";
 export { default as ModalHeader } from "./modal/header";
 export { default as ModalBody } from "./modal/body";
-export { default as ModalFooter } from "./modal/footer"; // PAGING
+export { default as ModalFooter } from "./modal/footer";
 
+// PAGING
 export { default as PagingInfo } from "./paging/page-info";
-export { default as PagingSelector } from "./paging/page-selector2"; // PAPER
+export { default as PagingSelector } from "./paging/page-selector2";
 
-export { default as Paper } from "./paper"; // POPOVER
+// PAPER
+export { default as Paper } from "./paper";
 
+// POPOVER
 export { default as Popover } from "./popover";
 export { default as PopoverHeader } from "./popover/header";
 export { default as PopoverBody } from "./popover/body";
-export { default as PopoverFooter } from "./popover/footer"; // POPUP
+export { default as PopoverFooter } from "./popover/footer";
 
+// POPUP
 export { default as Popup } from "./popup/v2";
 export { default as PopupV2 } from "./popup/v2";
 export { default as DangerPopup } from "./popup/danger_popup";
-export { default as ProposalsPopup } from "./popup/proposals_popup"; // SLIDER
+export { default as ProposalsPopup } from "./popup/proposals_popup";
 
+// SLIDER
 export { default as Slider } from "./slider/slider-container";
-export { default as SliderItem } from "./slider/slider-item"; // Rating
+export { default as SliderItem } from "./slider/slider-item";
 
-export { default as Rating } from "./rating"; // STATUS
+// Rating
+export { default as Rating } from "./rating";
 
-export { default as Status } from "./status"; // TAB
+// STATUS
+export { default as Status } from "./status";
 
+// TAB
 export { default as TabContainer } from "./tab/tab-container";
 export { default as TabHeader } from "./tab/tab-header";
 export { default as TabPanel } from "./tab/tab-panel";
-export { default as TabItem } from "./tab/tab"; // TREE VIEW
+export { default as TabItem } from "./tab/tab";
 
-export { default as Transfer } from "./transfer"; // TREE VIEW
+// TREE VIEW
+export { default as Transfer } from "./transfer";
 
-export { default as TreeView } from "./tree-view"; // OTHERS
+// TREE VIEW
+export { default as TreeView } from "./tree-view";
 
+// OTHERS
 export { default as Extra } from "./others/extra";
 export { default as ScrollBar } from "./others/scrollbar";
 export default components;

package/components/list/list-item-action.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -18,26 +17,24 @@ const ListItemAction = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const ListItemActionRoot = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-        max-height: 24px;
-        margin-left: 16px;
-        line-height: 40px;
-        color: ${theme.colors.primary};
-        background-color: transparent;
-        box-sizing: border-box;
-        order: 3;
-        z-index: 1;
-    `;
+            display: flex;
+            position: relative;
+            align-items: center;
+            max-height: 24px;
+            margin-left: 16px;
+            line-height: 40px;
+            color: ${theme.colors.system.active};
+            background-color: transparent;
+            box-sizing: border-box;
+            order: 3;
+            z-index: 1;
+        `;
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
   const ListItemActionView = useMemo(() => {
     let node = children;
-
     if (!node) {
       node = jsx(ButtonIcon, {
         viewType: 'ghost',
@@ -45,7 +42,6 @@ const ListItemAction = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         onClick: onClick
       });
     }
-
     return jsx("div", {
       className: 'DGN-UI-List-Item-Action ' + className,
       css: ListItemActionRoot,
@@ -62,19 +58,14 @@ ListItemAction.defaultProps = {
 ListItemAction.propTypes = {
   /** the name of icon to display in ListItemAction (used instead of children) */
   name: PropTypes.string,
-
   /** classes name for list item action */
   className: PropTypes.string,
-
   /** the function to get ref of ListItemAction */
   refs: PropTypes.func,
-
   /** the function for click event */
   onClick: PropTypes.func,
-
   /** style inline of ListItemAction */
   style: PropTypes.object,
-
   /** content to display in ListItem */
   children: PropTypes.node
 };

package/components/list/list-item-icon.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -17,32 +16,28 @@ const ListItemIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const ListItemIconRoot = css`
-        display: flex;
-        position: relative;
-        align-items: center;
-        min-width: 40px;
-        color: ${theme.colors.primary};
-        background-color: transparent;
-        box-sizing: border-box;
-        order: 1;
-        z-index: 1;
-    `;
+            display: flex;
+            position: relative;
+            align-items: center;
+            min-width: 40px;
+            color: ${theme.colors.system.active};
+            background-color: transparent;
+            box-sizing: border-box;
+            order: 1;
+            z-index: 1;
+        `;
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
   const ListItemIconView = useMemo(() => {
     let node = children;
-
     if (!node) {
       const Icon = Icons[name];
-
       if (Icon) {
         node = jsx(Icon, null);
       }
     }
-
     return jsx("div", {
       css: ListItemIconRoot,
       className: 'DGN-UI-List-Item-Icon ' + className,
@@ -59,16 +54,12 @@ ListItemIcon.defaultProps = {
 ListItemIcon.propTypes = {
   /** the name of icon to display in ListItemIcon (used instead of children) */
   name: PropTypes.string,
-
   /** class for ListItemIcon */
   className: PropTypes.string,
-
   /** the function to get ref of ListItemIcon */
   refs: PropTypes.func,
-
   /** style inline of ListItemIcon */
   style: PropTypes.object,
-
   /** the icon to display in ListItem */
   children: PropTypes.node
 };

package/components/list/list-item-text.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -15,7 +14,6 @@ const ListItemText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const ListItemTextRoot = css`
         display: flex;
         flex: 1 1 auto;
@@ -43,13 +41,10 @@ ListItemText.defaultProps = {
 ListItemText.propTypes = {
   /** class for ListItemText */
   className: PropTypes.string,
-
   /** the function to get ref of ListItemText */
   refs: PropTypes.func,
-
   /** style inline of ListItemText */
   style: PropTypes.object,
-
   /** content to display in ListItem */
   children: PropTypes.node
 };

package/components/list/list-item.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -19,49 +18,45 @@ const ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const ListItemRoot = css`
-        display: flex;
-        position: relative;
-        flex: 1 1 auto;
-        flex-direction: row;
-        align-items: center;
-        width: 100%;
-        max-width: 360px;
-        height: auto;
-        min-height: 32px;
-        padding: 0 16px;
-        color: ${theme.colors.primary};
-        overflow: hidden;
-        background-color: inherit;
-        box-sizing: border-box;
-        &.click-able {
-            cursor: pointer;
-            user-select: none;
-            &:hover {
-                background-color: ${theme.colors.hover};
+            display: flex;
+            position: relative;
+            flex: 1 1 auto;
+            flex-direction: row;
+            align-items: center;
+            width: 100%;
+            max-width: 360px;
+            height: auto;
+            min-height: 32px;
+            padding: 0 16px;
+            color: ${theme.colors.system.active};
+            overflow: hidden;
+            background-color: inherit;
+            box-sizing: border-box;
+            &.click-able {
+                cursor: pointer;
+                user-select: none;
+                &:hover {
+                    background-color: ${theme.colors.fill.hover};
+                }
             }
-        }
-        &.DGN-Active {
-            background-color: ${theme.colors.hover};
-        }
-        &.inset {
-            padding-left: 56px;
-        }
-    `;
-
+            &.DGN-Active {
+                background-color: ${theme.colors.fill.hover};
+            }
+            &.inset {
+                padding-left: 56px;
+            }
+        `;
   const handleClick = e => {
     const {
       currentTarget,
       target
     } = e;
     const actionNode = currentTarget.querySelector('.DGN-UI-List-Item-Action');
-
     if (!actionNode || !actionNode.contains(target)) {
       onClick(e);
     }
   };
-
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
@@ -69,7 +64,6 @@ const ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (inset) {
       ref.current.classList.add('inset');
     }
-
     return () => {
       if (inset && ref.current) {
         ref.current.classList.remove('inset');
@@ -94,19 +88,14 @@ ListItem.defaultProps = {
 ListItem.propTypes = {
   /** has the same effect as a button if true */
   button: PropTypes.bool,
-
   /** classes name for list item */
   className: PropTypes.string,
-
   /** the function to get ref of ListItem */
   refs: PropTypes.func,
-
   /** the function for click event */
   onClick: PropTypes.func,
-
   /** style inline of ListItem */
   style: PropTypes.object,
-
   /** includes ListItemIcon, ListItemText, ListItemAction */
   children: PropTypes.node
 };

package/components/list/list.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -21,57 +20,56 @@ const List = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const ListRoot = css`
-        display: block;
-        position: relative;
-        width: ${isNaN(width) ? width : width + 'px'};
-        max-width: ${isNaN(maxWidth) ? maxWidth : maxWidth + 'px'};
-        height: auto;
-        padding: 5px 0;
-        background-color: #FFF;
-        box-sizing: border-box;
-        &.scroll-able {
-            max-height: ${maxHeight ? isNaN(maxHeight) ? maxHeight : maxHeight + 'px' : '300px'};
-            overflow-y: auto;
-            padding-top: 0;
-            &::-webkit-scrollbar {
+            display: block;
+            position: relative;
+            width: ${isNaN(width) ? width : width + 'px'};
+            max-width: ${isNaN(maxWidth) ? maxWidth : maxWidth + 'px'};
+            height: auto;
+            padding: 5px 0;
+            background-color: #fff;
+            box-sizing: border-box;
+            &.scroll-able {
+                max-height: ${maxHeight ? isNaN(maxHeight) ? maxHeight : maxHeight + 'px' : '300px'};
+                overflow-y: auto;
+                padding-top: 0;
+                &::-webkit-scrollbar {
                     width: 6px;
                     background-color: white;
                     border-radius: 4px;
                 }
-            &::-webkit-scrollbar-thumb{
+                &::-webkit-scrollbar-thumb {
                     border-radius: 10px;
                     mix-blend-mode: normal;
-                    background-color: ${theme.colors.disabled};
+                    background-color: ${theme.colors.system.disabled};
                     background-clip: content-box;
+                }
             }
-        }
-        .second {
-            padding: 0;
-            .DGN-UI-List-Item {
-                padding-left: 32px;
+            .second {
+                padding: 0;
+                .DGN-UI-List-Item {
+                    padding-left: 32px;
+                }
             }
-        }
-        .third {
-            padding: 0;
-            .DGN-UI-List-Item {
-                padding-left: 48px;
+            .third {
+                padding: 0;
+                .DGN-UI-List-Item {
+                    padding-left: 48px;
+                }
             }
-        }
-        .fourth {
-            padding: 0;
-            .DGN-UI-List-Item {
-                padding-left: 64px;
+            .fourth {
+                padding: 0;
+                .DGN-UI-List-Item {
+                    padding-left: 64px;
+                }
             }
-        }
-        .fifth {
-            padding: 0;
-            .DGN-UI-List-Item {
-                padding-left: 80px;
+            .fifth {
+                padding: 0;
+                .DGN-UI-List-Item {
+                    padding-left: 80px;
+                }
             }
-        }
-    `;
+        `;
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
@@ -79,7 +77,6 @@ const List = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (level && level > 1 && level < levels.length) {
       ref.current.classList.add(levels[level]);
     }
-
     return () => {
       if (ref.current && level && level > 1 && level < levels.length) {
         ref.current.classList.remove(levels[level]);
@@ -90,7 +87,6 @@ const List = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (scrollAble || maxHeight) {
       ref.current.classList.add('scroll-able');
     }
-
     return () => {
       if (ref.current && (scrollAble || maxHeight)) {
         ref.current.classList.remove('scroll-able');
@@ -101,7 +97,6 @@ const List = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (style) {
       Object.assign(ref.current.style, style);
     }
-
     return () => {
       if (style && ref.current) {
         ref.current.style = null;
@@ -125,29 +120,21 @@ List.defaultProps = {
 List.propTypes = {
   /** fixed height of List and positive scroll list items */
   scrollAble: PropTypes.bool,
-
   /** class for List */
   className: PropTypes.string,
-
   /** width of list */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** max width */
   maxWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** fixed height of List and positive scroll list items */
   maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** represents the level of nested List, The higher the level, the content will be pushed */
   level: PropTypes.number,
   // [1,2,3,4,5]
-
   /** the function to get ref */
   refs: PropTypes.func,
-
   /** style inline for List */
   style: PropTypes.object,
-
   /** include list subheader, list items */
   children: PropTypes.node
 };

package/components/list/sub-header.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useRef, forwardRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
@@ -15,20 +14,19 @@ const ListSubHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!ref) {
     ref = useRef(null);
   }
-
   const ListSubHeaderRoot = css`
-        display: block;
-        position: sticky;
-        top: 0;
-        width: 100%;
-        height: auto;
-        padding: 0 16px;
-        background-color: inherit;
-        box-sizing: border-box;
-        user-select: none;
-        text-align: left;
-        z-index: 2;
-    `;
+            display: block;
+            position: sticky;
+            top: 0;
+            width: 100%;
+            height: auto;
+            padding: 0 16px;
+            background-color: inherit;
+            box-sizing: border-box;
+            user-select: none;
+            text-align: left;
+            z-index: 2;
+        `;
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
@@ -39,7 +37,7 @@ const ListSubHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...props
   }, jsx(Typography, {
     type: 'h4',
-    color: theme.colors.disabled,
+    color: theme.colors.text.disabled,
     style: {
       textTransform: 'initial',
       lineHeight: '32px'
@@ -50,10 +48,8 @@ const ListSubHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 ListSubHeader.propTypes = {
   /** the function to get ref of ListSubHeader */
   refs: PropTypes.func,
-
   /** style inline of ListSubHeader */
   style: PropTypes.object,
-
   /** element to display is a subtitle */
   children: PropTypes.node
 };