diginet-core-ui 1.4.20 → 1.4.21

package/components/accordion/details.js

@@ -3,23 +3,28 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { boxBorder, overflowHidden, parseHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { boxBorder, overflowHidden, parseHeight, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames } from "../../utils";
-const {
-  typography: {
-    paragraph1
-  }
-} = useTheme();
-const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  id,
-  style
-}, reference) => {
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp } from "../../utils";
+const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, 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;
@@ -32,7 +37,7 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
-      css: DetailsRootCSS,
+      css: _DetailsRootCSS,
       className: 'DGN-UI-Accordion-Details',
       ref: ref,
       id: id
@@ -40,29 +45,35 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames('DGN-UI-Accordion-Details-Content', className)
     }, children));
-  }, [children, className, id, style]);
+  }, [children, className, id, style, theme]);
 }));
-const DetailsRootCSS = css`
+const DetailsRootCSS = ({
+  colors,
+  spacing,
+  typography
+}) => css`
     ${positionRelative};
     ${overflowHidden};
     ${parseHeight(0)};
     transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     .DGN-UI-Accordion-Details-Content {
         ${boxBorder};
-        ${paragraph1};
-        ${pd([0, 6, 4, 6])};
-        ${textColor('text/main')};
+        ${typography.paragraph1};
+        padding: ${spacing([0, 6, 4, 6])};
+        ${textColor(getProp(colors, '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,17 +3,28 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { Children, cloneElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { borderRadius, borderRadius4px, mg } from "../../styles/general";
+import { borderRadius, borderRadius4px } from "../../styles/general";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames } from "../../utils";
-const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  collapseOther,
-  style
-}, reference) => {
+const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, 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');
@@ -38,7 +49,7 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
-      css: AccordionGroupRootCSS,
+      css: _AccordionGroupRootCSS,
       ref: ref,
       style: style,
       className: classNames('DGN-UI-Accordion-Group', className)
@@ -47,7 +58,9 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     })));
   }, [children, className, collapseOther, style]);
 }));
-const AccordionGroupRootCSS = css`
+const AccordionGroupRootCSS = ({
+  spacing
+}) => css`
     ${borderRadius4px};
     .DGN-UI-Accordion {
         &:first-of-type {
@@ -57,7 +70,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                ${mg([0, 0, 4, 0])};
+                margin: ${spacing([0, 0, 4, 0])};
                 .DGN-UI-Divider {
                     display: none !important;
                 }
@@ -70,7 +83,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                ${mg([4, 0, 0, 0])};
+                margin: ${spacing([4, 0, 0, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -86,7 +99,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                ${mg([4, 0])};
+                margin: ${spacing([4, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -108,11 +121,13 @@ const AccordionGroupRootCSS = css`
         }
     }
 `;
-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,7 +5,9 @@ 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 { classNames } from "../../utils";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp } from "../../utils";
 import AccordionContext from "./context";
 const handleTransition = (timer, el, beginHeight, endHeight = null) => {
   const getAutoHeightDuration = height => {
@@ -27,26 +29,34 @@ const handleTransition = (timer, el, beginHeight, endHeight = null) => {
     el.style.height = endHeight;
   }, duration);
 };
-const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  boxShadow,
-  children,
-  className,
-  disabled,
-  expand,
-  expanded,
-  fullHeight,
-  id,
-  onClick,
-  onCollapse,
-  onExpand,
-  style
-}, reference) => {
+const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, 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);
+  const _AccordionRootCSS = AccordionRootCSS(fullHeight, expandState, theme);
   useEffect(() => {
     if (ref.current) {
       if (fullHeight) {
@@ -104,15 +114,17 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [boxShadow, children, className, disabled, expand, expanded, fullHeight, id, onClick, onCollapse, onExpand, style, expandState]);
+  }, [boxShadow, children, className, disabled, expand, expanded, fullHeight, id, onClick, onCollapse, onExpand, style, expandState, theme]);
 }));
-const AccordionRootCSS = (fullHeight, expandState) => css`
+const AccordionRootCSS = (fullHeight, expandState, {
+  colors
+}) => css`
     ${displayBlock};
     ${positionRelative};
     ${borderRadius4px};
     ${parseWidth('100%')};
     ${fullHeight && expandState && parseHeight('100%')};
-    ${bgColor('system/white')};
+    ${bgColor(getProp(colors, 'system/standard'))};
     transition: margin 300ms ease, height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 `;
 const AccordionRootBoxShadowCSS = css`
@@ -122,14 +134,16 @@ 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,37 +4,38 @@ 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, mgl, mgr, parseMaxWidthHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, 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, parseMaxWidthHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames } from "../../utils";
+import { classNames, getProp } from "../../utils";
 import AccordionContext from "./context";
-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) => {
+import useThemeProps from "../../theme/utils/useThemeProps";
+const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, 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,
@@ -49,7 +50,8 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const expandIconRef = useRef(null);
   const timer = useRef(null);
-  const _SummaryRootCSS = SummaryRootCSS(background);
+  const background = getProp(colors, backgroundProp, backgroundProp);
+  const _SummaryRootCSS = SummaryRootCSS(background, theme);
   const _onClick = e => {
     if (disabled) return;
     const target = e.target;
@@ -139,9 +141,13 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [background, children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, disabled, expanded, expandState, onClickAccordion, onCollapse, onExpand]);
+  }, [children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, background, disabled, expanded, expandState, onClickAccordion, theme, onCollapse, onExpand]);
 }));
-const SummaryRootCSS = background => css`
+const SummaryRootCSS = (background, {
+  colors,
+  spacing,
+  typography
+}) => css`
     ${displayFlex};
     ${flexRow};
     ${positionRelative};
@@ -152,17 +158,17 @@ const SummaryRootCSS = background => css`
     ${borderRadius4px};
     ${parseWidth('100%')};
     ${parseMinHeight(56)};
-    ${pd([4, 6])};
+    padding: ${spacing([4, 6])};
     ${bgColor(background)};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
         ${cursorPointer};
-        color: ${systemActive} !important;
+        color: ${getProp(colors, 'system/active')} !important;
         &:active,
         &:focus,
         &:hover {
             ${bgColor('transparent')};
-            ${textColor('system/active')};
+            ${textColor(getProp(colors, 'system/active'))};
         }
     }
     .Accordion-Icon-Root {
@@ -184,7 +190,7 @@ const SummaryRootCSS = background => css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            ${mgr([2])};
+            margin-right: ${spacing([2])};
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -192,7 +198,7 @@ const SummaryRootCSS = background => css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            ${mgl([2])};
+            margin-left: ${spacing([2])};
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -220,21 +226,21 @@ const SummaryRootCSS = background => css`
     &:not(.disabled) {
         transition: background-color 300ms ease;
         &:hover {
-            ${bgColor('fill.hover')};
+            ${bgColor(getProp(colors, 'fill/hover'))};
         }
         &:focus {
-            ${bgColor('fill.focus')};
+            ${bgColor(getProp(colors, 'fill/focus'))};
         }
         &:active {
-            ${bgColor('fill.pressed')};
+            ${bgColor(getProp(colors, 'fill/pressed'))};
         }
     }
     &.disabled {
         ${pointerEventsNone};
-        ${bgColor('fill.disabled')};
+        ${bgColor(getProp(colors, 'fill/disabled'))};
         .DGN-UI-Accordion-Summary-Content,
         .Accordion-Expand-Icon {
-            color: ${systemDisabled} !important;
+            color: ${getProp(colors, 'system/disabled')} !important;
         }
     }
     &.treeview-disabled {
@@ -243,7 +249,7 @@ const SummaryRootCSS = background => css`
             ${bgTransparent};
         }
         .TreeView-Item {
-            ${textColor('system.disabled')};
+            ${textColor(getProp(colors, 'system/disabled'))};
         }
         .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
             ${cursorPointer};
@@ -251,14 +257,14 @@ const SummaryRootCSS = background => css`
         }
     }
     .DGN-UI-Accordion-Summary-Content {
-        ${heading3};
+        ${typography.heading3};
         ${flexRow};
         ${positionRelative};
         ${breakWord};
         ${userSelectNone};
         ${boxBorder}
         ${itemsCenter};
-        ${textColor('system.active')};
+        ${textColor(getProp(colors, 'system/active'))};
         ${parseWidth('100%')};
         ${parseMinHeight(24)};
     }
@@ -291,14 +297,16 @@ const SummaryRootCSS = background => css`
         }
     }
 `;
-AccordionSummary.defaultProps = {
-  background: 'system/white',
-  className: '',
-  expandIcon: 'ArrowRight',
-  expandIconAt: 'start',
-  expandIconProps: {},
-  style: {}
-};
+
+// AccordionSummary.defaultProps = {
+//     background: 'system/standard',
+//     className: '',
+//     expandIcon: 'ArrowRight',
+//     expandIconAt: 'start',
+//     expandIconProps: {},
+//     style: {},
+// };
+
 AccordionSummary.propTypes = {
   /** Background for label summary. */
   background: PropTypes.string,