diginet-core-ui 1.4.40 → 1.4.41-beta.1

package/assets/images/menu/dhr/MHRP29N0031.svg

@@ -0,0 +1,20 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1972_116)">
+<path d="M24.8 12.4L22 15.2C22 15.2 22 15.2 22 15.3V7.5C22 6.7 22.6 6.1 23.4 6.1C24.2 6.1 24.8 6.7 24.8 7.5V12.4Z" fill="#2680EB"/>
+<path d="M33.1 16.5C33.1 17.3 32.5 17.9 31.7 17.9H24.6C24.6 17.9 24.6 17.9 24.7 17.8L27.5 15H31.8C32.5 15.1 33.1 15.7 33.1 16.5Z" fill="#2680EB"/>
+<path d="M0 20.3C0 21.7 0 30.9 0 30.9V35.9C0 37.6 1.4 39 3.1 39H17.5C19.2 39 20.6 37.6 20.6 35.9V20.9C20.6 18 18.8 18.1 18.4 18V19C18.4 20.1 17.5 20.9 16.5 20.9H16.4C15.3 20.9 14.5 20 14.5 19V17.8H12.3V19C12.3 20.1 11.4 20.9 10.4 21H10.3C9.2 21 8.4 20.1 8.4 19V17.8H6.1V19C6.1 20.1 5.3 20.9 4.2 20.9H4.1C3 20.9 2.2 20 2.2 19V17.9C2.2 17.9 0 18.3 0 20.3ZM19 35.7C19 36.7 18.2 37.4 17.2 37.4H3.3C2.3 37.4 1.5 36.6 1.5 35.6V25.8C1.5 25.2 2 24.6 2.6 24.6C2.6 24.6 2.6 24.6 2.7 24.6H17.7C17.7 24.6 17.7 24.6 17.8 24.6C18.4 24.6 18.9 25.2 18.9 25.8C19 25.8 19 35.7 19 35.7Z" fill="#2680EB"/>
+<path d="M23.4 0C19.2 0 15.3 1.6 12.3 4.6C9.3 7.6 7.7 11.5 7.7 15.7C7.7 16.1 7.7 16.4 7.8 16.8H8.4C8.5 16.5 8.7 16.2 9 16C9.3 15.7 9.8 15.6 10.2 15.6H10.3C10.4 15.6 10.4 15.6 10.5 15.6C10.5 8.5 16.3 2.8 23.3 2.8C30.4 2.8 36.1 8.6 36.1 15.6C36.1 22.7 30.3 28.4 23.3 28.4C22.7 28.4 22 28.3 21.4 28.2V31C22 31.1 22.6 31.1 23.3 31.1C31.9 31.1 38.9 24.1 38.9 15.5C38.9 6.9 32 0 23.4 0Z" fill="#2680EB"/>
+<path d="M5.9 36H4.5C4.1 36 3.7 35.6 3.7 35.2V26.8C3.7 26.4 4.1 26 4.5 26H5.9C6.3 26 6.7 26.4 6.7 26.8V35.2C6.7 35.6 6.4 36 5.9 36Z" fill="#FF8C00"/>
+<path d="M10.9 36H9.5C9.1 36 8.7 35.6 8.7 35.2V26.8C8.7 26.4 9.1 26 9.5 26H10.9C11.3 26 11.7 26.4 11.7 26.8V35.2C11.7 35.6 11.4 36 10.9 36Z" fill="#FF8C00"/>
+<path d="M15.9 36H14.5C14.1 36 13.7 35.6 13.7 35.2V26.8C13.7 26.4 14.1 26 14.5 26H15.9C16.3 26 16.7 26.4 16.7 26.8V35.2C16.7 35.6 16.4 36 15.9 36Z" fill="#FF8C00"/>
+<path d="M22.4 17.5C21.9 17 21.9 16.1 22.4 15.6L29.2 8.8C29.7 8.3 30.6 8.3 31.1 8.8C31.6 9.3 31.6 10.2 31.1 10.7L24.3 17.5C23.5 18.3 22.6 17.8 22.4 17.5Z" fill="#FF4444"/>
+<path d="M10.3 20C9.7 20 9.2 19.5 9.2 18.9V17.7C9.2 17.1 9.7 16.6 10.3 16.6C10.9 16.6 11.4 17.1 11.4 17.7V18.9C11.3 19.5 10.9 20 10.3 20Z" fill="#7BC0F9"/>
+<path d="M4.1 20C3.5 20 3 19.5 3 18.9V17.7C3 17.1 3.5 16.6 4.1 16.6C4.7 16.6 5.2 17.1 5.2 17.7V18.9C5.2 19.5 4.7 20 4.1 20Z" fill="#7BC0F9"/>
+<path d="M16.4 20C15.8 20 15.3 19.5 15.3 18.9V17.7C15.3 17.1 15.8 16.6 16.4 16.6C17 16.6 17.5 17.1 17.5 17.7V18.9C17.5 19.5 17 20 16.4 20Z" fill="#7BC0F9"/>
+</g>
+<defs>
+<clipPath id="clip0_1972_116">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/accordion/context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+const AccordionContext = /*#__PURE__*/createContext({
+  onExpand: () => {},
+  onCollapse: () => {}
+});
+export default AccordionContext;

package/components/accordion/details.js

@@ -0,0 +1,76 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useRef } from 'react';
+import { boxBorder, overflowHidden, parseHeight, 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) => {
+  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;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return jsx("div", {
+    css: _DetailsRootCSS,
+    className: 'DGN-UI-Accordion-Details',
+    ref: ref,
+    id: id
+  }, jsx("div", {
+    style: style,
+    className: classNames('DGN-UI-Accordion-Details-Content', className)
+  }, children));
+}));
+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};
+        ${typography.paragraph1};
+        padding: ${spacing([0, 6, 4, 6])};
+        ${textColor(getProp(colors, 'text/main'))};
+        &.disabled {
+            ${pointerEventsNone};
+            ${userSelectNone};
+        }
+    }
+`;
+AccordionDetails.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+  /** CSS class for the component. */
+  className: PropTypes.string,
+  /** Inline style object for the component. */
+  style: PropTypes.object
+};
+export default AccordionDetails;

package/components/accordion/group.js

@@ -0,0 +1,135 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { Children, cloneElement, forwardRef, memo, useImperativeHandle, useRef } from 'react';
+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((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');
+      accordions.forEach(accordion => {
+        if (!accordion.contains(e.target)) {
+          const summary = accordion.querySelector('.DGN-UI-Accordion-Summary.expanding');
+          !!summary && summary.click();
+        }
+      });
+      !!onExpand && onExpand(e);
+    }
+  };
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return jsx("div", {
+    css: _AccordionGroupRootCSS,
+    ref: ref,
+    style: style,
+    className: classNames('DGN-UI-Accordion-Group', className)
+  }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
+    onExpand: e => onCollapseOther(e, child.props.onExpand)
+  })));
+}));
+const AccordionGroupRootCSS = ({
+  spacing
+}) => css`
+    ${borderRadius4px};
+    .DGN-UI-Accordion {
+        &:first-of-type {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 4px 4px 0px 0px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: ${spacing([0, 0, 4, 0])};
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:last-child {
+            &,
+            .DGN-UI-Accordion-Summary {
+                border-radius: 0px 0px 4px 4px;
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: ${spacing([4, 0, 0, 0])};
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:not(:first-of-type):not(:last-child) {
+            &,
+            .DGN-UI-Accordion-Summary {
+                ${borderRadius(0)};
+            }
+            &.expanding {
+                ${borderRadius4px};
+                margin: ${spacing([4, 0])};
+                .DGN-UI-Accordion-Summary {
+                    border-radius: 4px 4px 0px 0px;
+                }
+                .DGN-UI-Divider {
+                    display: none !important;
+                }
+            }
+        }
+        &:not(:last-child) {
+            .DGN-UI-Divider {
+                display: block !important;
+            }
+            box-shadow: -2px 0px 2px -2px rgba(0, 0, 0, 0.25), 2px 0px 2px -2px rgba(0, 0, 0, 0.25);
+            &.expanding,
+            &.previousExpanding {
+                ${borderRadius4px};
+                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+            }
+        }
+    }
+`;
+
+//Check defaultProps at src/theme/setting.js
+
+AccordionGroup.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+  /** CSS class for the component. */
+  className: PropTypes.string,
+  /** If `true`, collapses others when one is expanded. */
+  collapseOther: PropTypes.bool,
+  /** Inline style object for the component. */
+  style: PropTypes.object
+};
+export default AccordionGroup;

package/components/accordion/index.js

@@ -0,0 +1,178 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { Divider } from "./..";
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useEffect, useImperativeHandle, 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 AccordionContext from "./context";
+
+/**
+ * Handles the transition of an element's height with a smooth animation.
+ *
+ * @param {Object} timer - A timer object used to manage the timeout for setting the final height.
+ * @param {HTMLElement} el - The target element on which the transition effect will be applied.
+ * @param {number} beginHeight - The initial height of the element in pixels.
+ * @param {number|null} [endHeight=null] - The final height of the element in pixels. If not provided, the element's height will remain unchanged.
+ */
+const handleTransition = (timer, el, beginHeight, endHeight = null) => {
+  /**
+   * Calculates the duration for the transition based on the initial height.
+   *
+   * @param {number} height - The initial height of the element in pixels.
+   * @returns {number} - The rounded duration in milliseconds.
+   */
+  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
+    // Formula: (4 + 15 * (x / 36) ** 0.25 + (x / 36) / 5) * 10
+    const constantPart = 4 + 15 * Math.pow(constant, 0.25) + constant / 5;
+    return Math.round(constantPart * 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((inProps, reference) => {
+  var _ref$current;
+  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);
+  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');
+      }
+    }
+  }, [expandState]);
+  useEffect(() => {
+    expanded !== undefined ? setExpandState(expanded) : setExpandState(expand);
+  }, [expand, expanded]);
+  const onClickAccordion = () => {
+    !!onClick && onClick({
+      target: ref.current
+    });
+  };
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      expandState: expandState,
+      setExpandState: setExpandState,
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return jsx("div", {
+    id: id,
+    css: [_AccordionRootCSS, boxShadow && AccordionRootBoxShadowCSS, disabled && AccordionRootDisabledCSS],
+    ref: ref,
+    style: style,
+    className: classNames('DGN-UI-Accordion', disabled && 'disabled', expandState && 'expanding', className)
+  }, jsx(AccordionContext.Provider, {
+    value: {
+      expanded,
+      expandState,
+      disabled,
+      onClickAccordion: onClick ? onClickAccordion : null,
+      onExpand,
+      onCollapse,
+      setExpandState,
+      handleTransition,
+      fullHeight: fullHeight ? ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.clientHeight) || 0 : 0
+    }
+  }, children, jsx(Divider, {
+    color: 'line/category',
+    style: {
+      margin: 0,
+      display: 'none'
+    }
+  })));
+}));
+const AccordionRootCSS = (fullHeight, expandState, {
+  colors
+}) => css`
+    ${displayBlock};
+    ${positionRelative};
+    ${borderRadius4px};
+    ${parseWidth('100%')};
+    ${fullHeight && expandState && parseHeight('100%')};
+    ${bgColor(getProp(colors, 'system/standard'))};
+    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};
+`;
+
+//Check defaultProps at src/theme/setting.js
+
+Accordion.propTypes = {
+  /** The box-shadow of the component. */
+  boxShadow: PropTypes.bool,
+  /** The content of the component (consists of <AccordionSummary /> and <AccordionDetails />). */
+  children: PropTypes.node,
+  /** CSS class for the component. */
+  className: PropTypes.string,
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, expands immediately after render (without state management) (shouldn't use this). */
+  expand: PropTypes.bool,
+  /** The expanded state of the accordion (with state management) (should use this). */
+  expanded: PropTypes.bool,
+  /** If `true`, the Accordion will have a height of 100% of its parent. */
+  fullHeight: PropTypes.bool,
+  /** Callback function fired when the Accordion is collapsed. */
+  onCollapse: PropTypes.func,
+  /** Callback function fired when the Accordion is expanded. */
+  onExpand: PropTypes.func,
+  /** Inline style object for the component. */
+  style: PropTypes.object
+};
+export default Accordion;