diginet-core-ui 1.3.91 → 1.3.92-beta.1

package/components/accordion/details.js

@@ -1,22 +1,16 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { boxBorder, displayBlock, overflowHidden, parseHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { boxBorder, overflowHidden, parseHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
 const {
-  colors: {
-    text: {
-      main
-    }
-  },
   typography: {
     paragraph1
-  },
-  spacing
-} = theme;
+  }
+} = useTheme();
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -24,6 +18,7 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   style
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -48,16 +43,15 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [children, className, id, style]);
 }));
 const DetailsRootCSS = css`
-    ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
     ${parseHeight(0)};
-    transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     .DGN-UI-Accordion-Details-Content {
         ${boxBorder};
         ${paragraph1};
-        padding: ${spacing([0, 6, 4, 6])};
-        color: ${main};
+        ${pd([0, 6, 4, 6])};
+        ${textColor('text.main')};
         &.disabled {
             ${pointerEventsNone};
             ${userSelectNone};

package/components/accordion/group.js

@@ -1,14 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { borderRadius4px } from "../../styles/general";
-import classNames from "../../utils/classNames";
-import theme from "../../theme/settings";
-const {
-  spacing
-} = theme;
+import { Children, cloneElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { borderRadius, borderRadius4px, mg } from "../../styles/general";
+import { classNames } from "../../utils";
 const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -16,6 +12,7 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   collapseOther,
   style
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const onCollapseOther = (e, onExpand) => {
     if (collapseOther) {
@@ -60,7 +57,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([0, 0, 4, 0])};
+                ${mg([0, 0, 4, 0])};
                 .DGN-UI-Divider {
                     display: none !important;
                 }
@@ -73,7 +70,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([4, 0, 0, 0])};
+                ${mg([4, 0, 0, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -85,11 +82,11 @@ const AccordionGroupRootCSS = css`
         &:not(:first-of-type):not(:last-child) {
             &,
             .DGN-UI-Accordion-Summary {
-                border-radius: 0px;
+                ${borderRadius(0)};
             }
             &.expanding {
                 ${borderRadius4px};
-                margin: ${spacing([4, 0])};
+                ${mg([4, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }

package/components/accordion/index.js

@@ -1,20 +1,40 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useState, useMemo, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
+import { Divider } from "./..";
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { borderRadius4px, cursorNotAllowed, displayBlock, parseHeight, parseWidth, positionRelative, shadowNone } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { classNames } from "../../utils";
 import AccordionContext from "./context";
-import Divider from "../divider";
-import { borderRadius4px, displayBlock, parseWidth, positionRelative } from "../../styles/general";
-import classNames from "../../utils/classNames";
-import theme from "../../theme/settings";
 const {
   colors: {
     line: {
-      category
+      category: lineCategory
     }
   }
-} = theme;
+} = useTheme();
+const handleTransition = (timer, el, beginHeight, endHeight = null) => {
+  const getAutoHeightDuration = height => {
+    if (!height) {
+      return 0;
+    }
+    const constant = height / 36;
+
+    // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10
+    return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10);
+  };
+  const duration = getAutoHeightDuration(beginHeight);
+  el.style.transitionDuration = `${duration}ms`;
+  el.style.height = `${beginHeight}px`;
+  if (timer.current) {
+    clearTimeout(timer.current);
+  }
+  timer.current = setTimeout(() => {
+    el.style.height = endHeight;
+  }, duration);
+};
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   boxShadow,
@@ -23,16 +43,24 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   disabled,
   expand,
   expanded,
+  fullHeight,
   id,
   onClick,
   onCollapse,
   onExpand,
   style
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
+  const timer = useRef(null);
   const [expandState, setExpandState] = useState(expanded || expand);
+  const _AccordionRootCSS = AccordionRootCSS(fullHeight, expandState);
   useEffect(() => {
     if (ref.current) {
+      if (fullHeight) {
+        handleTransition(timer, ref.current, ref.current.clientHeight, expandState ? '100%' : null);
+      }
+      // Handle margin top bot when in group
       const previous = ref.current.previousElementSibling;
       if (previous) {
         expandState ? previous.classList.add('previousExpanding') : previous.classList.remove('previousExpanding');
@@ -58,12 +86,13 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   return useMemo(() => {
+    var _ref$current;
     return jsx("div", {
       id: id,
-      css: AccordionRootCSS,
+      css: [_AccordionRootCSS, boxShadow && AccordionRootBoxShadowCSS, disabled && AccordionRootDisabledCSS],
       ref: ref,
       style: style,
-      className: classNames('DGN-UI-Accordion', disabled && 'disabled', boxShadow === true && 'boxShadow', expandState && 'expanding', className)
+      className: classNames('DGN-UI-Accordion', disabled && 'disabled', expandState && 'expanding', className)
     }, jsx(AccordionContext.Provider, {
       value: {
         expanded,
@@ -72,41 +101,45 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         onClickAccordion: onClick ? onClickAccordion : null,
         onExpand,
         onCollapse,
-        setExpandState
+        setExpandState,
+        handleTransition,
+        fullHeight: fullHeight ? ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) || 0 : 0
       }
     }, children, jsx(Divider, {
-      color: category,
+      color: lineCategory,
       style: {
         margin: 0,
         display: 'none'
       }
     })));
-  }, [boxShadow, children, className, disabled, expanded, id, onClick, onCollapse, onExpand, style, expandState]);
+  }, [boxShadow, children, className, disabled, expand, expanded, fullHeight, id, onClick, onCollapse, onExpand, style, expandState]);
 }));
-const AccordionRootCSS = css`
+const AccordionRootCSS = (fullHeight, expandState) => css`
     ${displayBlock};
     ${positionRelative};
     ${borderRadius4px};
     ${parseWidth('100%')};
-    transition: margin 300ms ease;
-    &.boxShadow {
-        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
-    }
-    &.disabled {
-        cursor: no-drop;
-        box-shadow: none;
-    }
+    ${fullHeight && expandState && parseHeight('100%')};
+    transition: margin 300ms ease, height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+`;
+const AccordionRootBoxShadowCSS = css`
+    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+`;
+const AccordionRootDisabledCSS = css`
+    ${cursorNotAllowed};
+    ${shadowNone};
 `;
 Accordion.defaultProps = {
   boxShadow: true,
   className: '',
   disabled: false,
   expand: false,
+  fullHeight: false,
   style: {}
 };
 Accordion.propTypes = {
   /** The box-shadow of component. */
-  boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  boxShadow: PropTypes.bool,
   /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
   children: PropTypes.node,
   /** Class for component. */
@@ -117,6 +150,8 @@ Accordion.propTypes = {
   expand: PropTypes.bool,
   /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
+  /** If `true`, Accordion height will 100% of it parent. */
+  fullHeight: PropTypes.bool,
   /** Callback fired when Accordion is collapsed. */
   onCollapse: PropTypes.func,
   /** Callback fired when Accordion is expanded. */

package/components/accordion/summary.js

@@ -1,22 +1,25 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useEffect, useRef, useContext, forwardRef, useMemo, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
+import { ButtonIcon, Typography } from "./..";
 import PropTypes from 'prop-types';
-import { jsx } from '@emotion/core';
-import { SummaryRootCSS } from "./css";
-import AccordionContext from "./context";
-import { ButtonIcon, Typography } from '..';
+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 { useTheme } from "../../theme";
 import { classNames } from "../../utils";
-import theme from "../../theme/settings";
+import AccordionContext from "./context";
 const {
   colors: {
     system: {
-      active,
+      active: systemActive,
       disabled: systemDisabled
     }
   },
+  typography: {
+    heading3
+  },
   spacing
-} = theme;
+} = useTheme();
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   background,
@@ -31,6 +34,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   style,
   title
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const {
     expanded,
     expandState,
@@ -38,7 +42,9 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClickAccordion,
     onExpand,
     onCollapse,
-    setExpandState
+    setExpandState,
+    handleTransition,
+    fullHeight
   } = useContext(AccordionContext);
   const ref = useRef(null);
   const expandIconRef = useRef(null);
@@ -64,32 +70,17 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
   const showHideDetailHandler = type => {
-    if (ref.current) {
-      const detailsEl = ref.current.nextElementSibling;
+    if (!ref.current) return;
+    const detailEl = ref.current.nextElementSibling;
+    if (detailEl) {
+      const summaryHeight = ref.current.clientHeight;
       if (type === 'show') {
-        if (detailsEl) {
-          const scrollHeight = detailsEl.scrollHeight;
-          const duration = Math.max(Math.min(scrollHeight, 1500), 200);
-          detailsEl.style.height = scrollHeight + 'px';
-          if (!detailsEl.style.transitionDuration) {
-            detailsEl.style.transitionDuration = duration + 'ms';
-          }
-          if (timer.current) {
-            clearTimeout(timer.current);
-          }
-          timer.current = setTimeout(() => {
-            detailsEl.style.height = 'auto';
-          }, (detailsEl.firstChild.childNodes.length || 2.5) * 100);
-        }
+        const height = Math.max(detailEl.scrollHeight, fullHeight - summaryHeight);
+        handleTransition(timer, detailEl, height, `calc(100% - ${summaryHeight}px)`);
       } else {
-        if (detailsEl && detailsEl.style.height) {
-          detailsEl.style.height = detailsEl.scrollHeight + 'px';
-          if (timer.current) {
-            clearTimeout(timer.current);
-          }
-          timer.current = setTimeout(() => {
-            detailsEl.style.height = null;
-          }, 10);
+        if (detailEl.style.height) {
+          const height = detailEl.scrollHeight;
+          handleTransition(timer, detailEl, height);
         }
       }
     }
@@ -125,7 +116,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(Typography, {
       type: 'h3',
       lineClamp: 2,
-      color: disabled ? systemDisabled : active,
+      color: disabled ? systemDisabled : systemActive,
       style: {
         marginRight: children && title ? spacing([4]) : 0
       }
@@ -150,6 +141,156 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, collapseIcon)))));
   }, [background, children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, disabled, expanded, expandState, onClickAccordion, onCollapse, onExpand]);
 }));
+const SummaryRootCSS = background => css`
+    ${displayFlex};
+    ${flexRow};
+    ${positionRelative};
+    ${justifyBetween};
+    ${itemsCenter};
+    ${cursorPointer};
+    ${boxBorder};
+    ${borderRadius4px};
+    ${parseWidth('100%')};
+    ${parseMinHeight(56)};
+    ${pd([4, 6])};
+    ${background && bgColor(background === true ? 'fill.headerbar' : background)};
+    .Accordion-Expand-Icon,
+    .Accordion-Collapse-Icon {
+        ${cursorPointer};
+        color: ${systemActive} !important;
+        &:active,
+        &:focus,
+        &:hover {
+            ${bgTransparent};
+            ${textColor('system.active')};
+        }
+    }
+    .Accordion-Icon-Root {
+        ${displayFlex};
+        ${flexRow};
+        .Accordion-Icon.rotate-able {
+            ${boxBorder};
+            ${parseWidthHeight(24)};
+            &:not(.TreeView) {
+                transform: rotateZ(0deg);
+                transform-origin: center;
+            }
+            &.TreeView {
+                transform-origin: center;
+            }
+        }
+    }
+    &.start {
+        ${flexRowReverse};
+        ${justifyEnd};
+        .Accordion-Icon.rotate-able {
+            ${mgr([2])};
+            &.TreeView {
+                transform: rotateZ(-90deg);
+            }
+        }
+    }
+    &.end {
+        .Accordion-Icon.rotate-able {
+            ${mgl([2])};
+            &.TreeView {
+                transform: rotateZ(90deg);
+            }
+        }
+    }
+    &.expanding {
+        border-radius: 4px 4px 0px 0px;
+        .Accordion-Icon.rotate-able {
+            &:not(.TreeView) {
+                transform: rotateZ(90deg);
+            }
+            &.TreeView {
+                transform: rotateZ(0deg);
+            }
+        }
+        .Accordion-Icon:not(.rotate-able) {
+            .Accordion-Expand-Icon {
+                transform: scale(0);
+            }
+            .Accordion-Collapse-Icon {
+                transform: scale(1);
+            }
+        }
+    }
+    &:not(.disabled) {
+        transition: background-color 300ms ease;
+        &:hover {
+            ${bgColor('fill.hover')};
+        }
+        &:focus {
+            ${bgColor('fill.focus')};
+        }
+        &:active {
+            ${bgColor('fill.pressed')};
+        }
+    }
+    &.disabled {
+        ${pointerEventsNone};
+        ${bgColor('fill.disabled')};
+        .DGN-UI-Accordion-Summary-Content,
+        .Accordion-Expand-Icon {
+            color: ${systemDisabled} !important;
+        }
+    }
+    &.treeview-disabled {
+        ${pointerEventsNone};
+        &:hover {
+            ${bgTransparent};
+        }
+        .TreeView-Item {
+            ${textColor('system.disabled')};
+        }
+        .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
+            ${cursorPointer};
+            ${pointerEventsInitial};
+        }
+    }
+    .DGN-UI-Accordion-Summary-Content {
+        ${heading3};
+        ${flexRow};
+        ${positionRelative};
+        ${breakWord};
+        ${userSelectNone};
+        ${boxBorder}
+        ${itemsCenter};
+        ${textColor('system.active')};
+        ${parseWidth('100%')};
+        ${parseMinHeight(24)};
+    }
+    .Accordion-Icon {
+        ${displayInlineBlock};
+        ${positionRelative};
+        ${cursorPointer};
+        ${parseWidthHeight(24)};
+        transition: transform 200ms linear;
+        .Accordion-Expand-Icon {
+            transform: scale(1);
+            transition: transform 200ms linear;
+            &.effect {
+                ${positionRelative};
+            }
+        }
+        .Accordion-Collapse-Icon {
+            ${positionAbsolute};
+            ${inset(0)};
+            transform: scale(0);
+            transition: transform 200ms linear;
+        }
+        .effect {
+            ${displayInlineFlex};
+            ${justifyCenter};
+            ${itemsCenter};
+            ${cursorPointer};
+            ${parseMinWidthHeight(24)};
+            ${parseMaxWidthHeight(34)};
+        }
+    }
+`;
 AccordionSummary.defaultProps = {
   className: '',
   expandIcon: 'ArrowRight',