diginet-core-ui 1.4.16-beta.2 → 1.4.17

package/components/accordion/details.js

@@ -3,28 +3,23 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { boxBorder, overflowHidden, parseHeight, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { boxBorder, overflowHidden, parseHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+import { classNames } from "../../utils";
+const {
+  typography: {
+    paragraph1
+  }
+} = useTheme();
+const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  children,
+  className,
+  id,
+  style
+}, reference) => {
   if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'AccordionDetails'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    id,
-    style
-  } = props;
   const ref = useRef(null);
-  const _DetailsRootCSS = DetailsRootCSS(theme);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -37,7 +32,7 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, re
   });
   return useMemo(() => {
     return jsx("div", {
-      css: _DetailsRootCSS,
+      css: DetailsRootCSS,
       className: 'DGN-UI-Accordion-Details',
       ref: ref,
       id: id
@@ -45,35 +40,29 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, re
       style: style,
       className: classNames('DGN-UI-Accordion-Details-Content', className)
     }, children));
-  }, [children, className, id, style, theme]);
+  }, [children, className, id, style]);
 }));
-const DetailsRootCSS = ({
-  colors,
-  spacing,
-  typography
-}) => css`
+const DetailsRootCSS = css`
     ${positionRelative};
     ${overflowHidden};
     ${parseHeight(0)};
     transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     .DGN-UI-Accordion-Details-Content {
         ${boxBorder};
-        ${typography.paragraph1};
-        padding: ${spacing([0, 6, 4, 6])};
-        ${textColor(getProp(colors, 'text/main'))};
+        ${paragraph1};
+        ${pd([0, 6, 4, 6])};
+        ${textColor('text/main')};
         &.disabled {
             ${pointerEventsNone};
             ${userSelectNone};
         }
     }
 `;
-
-// AccordionDetails.defaultProps = {
-//     className: '',
-//     id: '',
-//     style: {},
-// };
-
+AccordionDetails.defaultProps = {
+  className: '',
+  id: '',
+  style: {}
+};
 AccordionDetails.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,

package/components/accordion/group.js

@@ -3,28 +3,17 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { Children, cloneElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { borderRadius, borderRadius4px } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
+import { borderRadius, borderRadius4px, mg } from "../../styles/general";
 import { classNames } from "../../utils";
-const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  children,
+  className,
+  collapseOther,
+  style
+}, reference) => {
   if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'AccordionGroup'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    collapseOther,
-    style
-  } = props;
   const ref = useRef(null);
-  const _AccordionGroupRootCSS = AccordionGroupRootCSS(theme);
   const onCollapseOther = (e, onExpand) => {
     if (collapseOther) {
       const accordions = ref.current.querySelectorAll('.DGN-UI-Accordion');
@@ -49,7 +38,7 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, refe
   });
   return useMemo(() => {
     return jsx("div", {
-      css: _AccordionGroupRootCSS,
+      css: AccordionGroupRootCSS,
       ref: ref,
       style: style,
       className: classNames('DGN-UI-Accordion-Group', className)
@@ -58,9 +47,7 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, refe
     })));
   }, [children, className, collapseOther, style]);
 }));
-const AccordionGroupRootCSS = ({
-  spacing
-}) => css`
+const AccordionGroupRootCSS = css`
     ${borderRadius4px};
     .DGN-UI-Accordion {
         &:first-of-type {
@@ -70,7 +57,7 @@ const AccordionGroupRootCSS = ({
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([0, 0, 4, 0])};
+                ${mg([0, 0, 4, 0])};
                 .DGN-UI-Divider {
                     display: none !important;
                 }
@@ -83,7 +70,7 @@ const AccordionGroupRootCSS = ({
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([4, 0, 0, 0])};
+                ${mg([4, 0, 0, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -99,7 +86,7 @@ const AccordionGroupRootCSS = ({
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([4, 0])};
+                ${mg([4, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -121,13 +108,11 @@ const AccordionGroupRootCSS = ({
         }
     }
 `;
-
-// AccordionGroup.defaultProps = {
-//     className: '',
-//     collapseOther: true,
-//     style: {},
-// };
-
+AccordionGroup.defaultProps = {
+  className: '',
+  collapseOther: true,
+  style: {}
+};
 AccordionGroup.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,

package/components/accordion/index.js

@@ -5,9 +5,7 @@ import { Divider } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { bgColor, borderRadius4px, cursorNotAllowed, displayBlock, parseHeight, parseWidth, positionRelative, shadowNone } from "../../styles/general";
-import { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
+import { classNames } from "../../utils";
 import AccordionContext from "./context";
 const handleTransition = (timer, el, beginHeight, endHeight = null) => {
   const getAutoHeightDuration = height => {
@@ -29,34 +27,26 @@ const handleTransition = (timer, el, beginHeight, endHeight = null) => {
     el.style.height = endHeight;
   }, duration);
 };
-const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  boxShadow,
+  children,
+  className,
+  disabled,
+  expand,
+  expanded,
+  fullHeight,
+  id,
+  onClick,
+  onCollapse,
+  onExpand,
+  style
+}, reference) => {
   if (!reference) reference = useRef(null);
-  const theme = useTheme();
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Accordion'
-  });
-  const {
-    action = {},
-    boxShadow,
-    children,
-    className,
-    disabled,
-    expand,
-    expanded,
-    fullHeight,
-    id,
-    onClick,
-    onCollapse,
-    onExpand,
-    style
-  } = props;
   const ref = useRef(null);
   const timer = useRef(null);
   const [expandState, setExpandState] = useState(expanded || expand);
-  const _AccordionRootCSS = AccordionRootCSS(fullHeight, expandState, theme);
+  const _AccordionRootCSS = AccordionRootCSS(fullHeight, expandState);
   useEffect(() => {
     if (ref.current) {
       if (fullHeight) {
@@ -114,17 +104,15 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference
         display: 'none'
       }
     })));
-  }, [boxShadow, children, className, disabled, expand, expanded, fullHeight, id, onClick, onCollapse, onExpand, style, expandState, theme]);
+  }, [boxShadow, children, className, disabled, expand, expanded, fullHeight, id, onClick, onCollapse, onExpand, style, expandState]);
 }));
-const AccordionRootCSS = (fullHeight, expandState, {
-  colors
-}) => css`
+const AccordionRootCSS = (fullHeight, expandState) => css`
     ${displayBlock};
     ${positionRelative};
     ${borderRadius4px};
     ${parseWidth('100%')};
     ${fullHeight && expandState && parseHeight('100%')};
-    ${bgColor(getProp(colors, 'system/standard'))};
+    ${bgColor('system/white')};
     transition: margin 300ms ease, height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 `;
 const AccordionRootBoxShadowCSS = css`
@@ -134,16 +122,14 @@ const AccordionRootDisabledCSS = css`
     ${cursorNotAllowed};
     ${shadowNone};
 `;
-
-// Accordion.defaultProps = {
-//     boxShadow: true,
-//     className: '',
-//     disabled: false,
-//     expand: false,
-//     fullHeight: false,
-//     style: {},
-// };
-
+Accordion.defaultProps = {
+  boxShadow: true,
+  className: '',
+  disabled: false,
+  expand: false,
+  fullHeight: false,
+  style: {}
+};
 Accordion.propTypes = {
   /** The box-shadow of component. */
   boxShadow: PropTypes.bool,

package/components/accordion/summary.js

@@ -4,38 +4,37 @@ import { css, jsx } from '@emotion/core';
 import { ButtonIcon, Typography } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, bgTransparent, borderRadius4px, boxBorder, breakWord, cursorPointer, displayFlex, displayInlineBlock, displayInlineFlex, flexRow, flexRowReverse, inset, itemsCenter, justifyBetween, justifyCenter, justifyEnd, parseMaxWidthHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { bgColor, bgTransparent, borderRadius4px, boxBorder, breakWord, cursorPointer, displayFlex, displayInlineBlock, displayInlineFlex, flexRow, flexRowReverse, inset, itemsCenter, justifyBetween, justifyCenter, justifyEnd, mgl, mgr, parseMaxWidthHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames, getProp } from "../../utils";
+import { classNames } from "../../utils";
 import AccordionContext from "./context";
-import useThemeProps from "../../theme/utils/useThemeProps";
-const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
+const {
+  colors: {
+    system: {
+      active: systemActive,
+      disabled: systemDisabled
+    }
+  },
+  typography: {
+    heading3
+  },
+  spacing
+} = useTheme();
+const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  background,
+  children,
+  className,
+  collapseIcon,
+  expandIcon,
+  expandIconAt,
+  expandIconProps,
+  id,
+  onClick,
+  style,
+  title
+}, reference) => {
   if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors,
-    spacing
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'AccordionSummary'
-  });
-  const {
-    action = {},
-    background: backgroundProp,
-    children,
-    className,
-    collapseIcon,
-    expandIcon,
-    expandIconAt,
-    expandIconProps,
-    id,
-    onClick,
-    style,
-    title
-  } = props;
   const {
     expanded,
     expandState,
@@ -50,8 +49,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, re
   const ref = useRef(null);
   const expandIconRef = useRef(null);
   const timer = useRef(null);
-  const background = getProp(colors, backgroundProp, backgroundProp);
-  const _SummaryRootCSS = SummaryRootCSS(background, theme);
+  const _SummaryRootCSS = SummaryRootCSS(background);
   const _onClick = e => {
     if (disabled) return;
     const target = e.target;
@@ -141,13 +139,9 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, re
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, background, disabled, expanded, expandState, onClickAccordion, theme, onCollapse, onExpand]);
+  }, [background, children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, disabled, expanded, expandState, onClickAccordion, onCollapse, onExpand]);
 }));
-const SummaryRootCSS = (background, {
-  colors,
-  spacing,
-  typography
-}) => css`
+const SummaryRootCSS = background => css`
     ${displayFlex};
     ${flexRow};
     ${positionRelative};
@@ -158,17 +152,17 @@ const SummaryRootCSS = (background, {
     ${borderRadius4px};
     ${parseWidth('100%')};
     ${parseMinHeight(56)};
-    padding: ${spacing([4, 6])};
+    ${pd([4, 6])};
     ${bgColor(background)};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
         ${cursorPointer};
-        color: ${getProp(colors, 'system/active')} !important;
+        color: ${systemActive} !important;
         &:active,
         &:focus,
         &:hover {
             ${bgColor('transparent')};
-            ${textColor(getProp(colors, 'system/active'))};
+            ${textColor('system/active')};
         }
     }
     .Accordion-Icon-Root {
@@ -190,7 +184,7 @@ const SummaryRootCSS = (background, {
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            margin-right: ${spacing([2])};
+            ${mgr([2])};
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -198,7 +192,7 @@ const SummaryRootCSS = (background, {
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            margin-left: ${spacing([2])};
+            ${mgl([2])};
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -226,21 +220,21 @@ const SummaryRootCSS = (background, {
     &:not(.disabled) {
         transition: background-color 300ms ease;
         &:hover {
-            ${bgColor(getProp(colors, 'fill/hover'))};
+            ${bgColor('fill.hover')};
         }
         &:focus {
-            ${bgColor(getProp(colors, 'fill/focus'))};
+            ${bgColor('fill.focus')};
         }
         &:active {
-            ${bgColor(getProp(colors, 'fill/pressed'))};
+            ${bgColor('fill.pressed')};
         }
     }
     &.disabled {
         ${pointerEventsNone};
-        ${bgColor(getProp(colors, 'fill/disabled'))};
+        ${bgColor('fill.disabled')};
         .DGN-UI-Accordion-Summary-Content,
         .Accordion-Expand-Icon {
-            color: ${getProp(colors, 'system/disabled')} !important;
+            color: ${systemDisabled} !important;
         }
     }
     &.treeview-disabled {
@@ -249,7 +243,7 @@ const SummaryRootCSS = (background, {
             ${bgTransparent};
         }
         .TreeView-Item {
-            ${textColor(getProp(colors, 'system/disabled'))};
+            ${textColor('system.disabled')};
         }
         .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
             ${cursorPointer};
@@ -257,14 +251,14 @@ const SummaryRootCSS = (background, {
         }
     }
     .DGN-UI-Accordion-Summary-Content {
-        ${typography.heading3};
+        ${heading3};
         ${flexRow};
         ${positionRelative};
         ${breakWord};
         ${userSelectNone};
         ${boxBorder}
         ${itemsCenter};
-        ${textColor(getProp(colors, 'system/active'))};
+        ${textColor('system.active')};
         ${parseWidth('100%')};
         ${parseMinHeight(24)};
     }
@@ -297,16 +291,14 @@ const SummaryRootCSS = (background, {
         }
     }
 `;
-
-// AccordionSummary.defaultProps = {
-//     background: 'system/standard',
-//     className: '',
-//     expandIcon: 'ArrowRight',
-//     expandIconAt: 'start',
-//     expandIconProps: {},
-//     style: {},
-// };
-
+AccordionSummary.defaultProps = {
+  background: 'system/white',
+  className: '',
+  expandIcon: 'ArrowRight',
+  expandIconAt: 'start',
+  expandIconProps: {},
+  style: {}
+};
 AccordionSummary.propTypes = {
   /** Background for label summary. */
   background: PropTypes.string,