diginet-core-ui 1.4.39 → 1.4.40

package/components/accordion/group.js

@@ -1,135 +0,0 @@
-/** @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

@@ -1,178 +0,0 @@
-/** @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;

package/components/accordion/summary.js

@@ -1,324 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Typography } from "./..";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useContext, useEffect, useImperativeHandle, 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 { useTheme } from "../../theme";
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, getProp } from "../../utils";
-import AccordionContext from "./context";
-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: expandIconProp,
-    expandIconAt,
-    expandIconProps,
-    id,
-    onClick,
-    style,
-    title
-  } = props;
-  const {
-    expanded,
-    expandState,
-    disabled,
-    onClickAccordion,
-    onExpand,
-    onCollapse,
-    setExpandState,
-    handleTransition,
-    fullHeight
-  } = useContext(AccordionContext);
-  const expandIcon = expandIconProp === true ? 'ArrowRight' : expandIconProp;
-  const ref = useRef(null);
-  const expandIconRef = useRef(null);
-  const timer = useRef(null);
-  const background = getProp(colors, backgroundProp, backgroundProp);
-  const _SummaryRootCSS = SummaryRootCSS(background, theme);
-  const _onClick = e => {
-    if (disabled) return;
-    const target = e.target;
-    if (onClickAccordion) {
-      onClickAccordion();
-      return;
-    }
-    if (onClick && (!expandIconRef.current || !expandIconRef.current.contains(target))) {
-      onClick(e);
-      return;
-    }
-    if (expandState) {
-      if (expanded === undefined) setExpandState(false);
-      !!onCollapse && onCollapse(ref.current);
-    } else if (!expandState) {
-      if (expanded === undefined) setExpandState(true);
-      !!onExpand && onExpand(ref.current);
-    }
-  };
-  const showHideDetailHandler = type => {
-    if (!ref.current) return;
-    const detailEl = ref.current.nextElementSibling;
-    if (detailEl) {
-      const summaryHeight = ref.current.clientHeight;
-      if (type === 'show') {
-        const height = Math.max(detailEl.scrollHeight, fullHeight - summaryHeight);
-        handleTransition(timer, detailEl, height, `calc(100% - ${summaryHeight}px)`);
-      } else {
-        if (detailEl.style.height) {
-          const height = detailEl.scrollHeight;
-          handleTransition(timer, detailEl, height);
-        }
-      }
-    }
-  };
-  useEffect(() => {
-    if (expandState) {
-      showHideDetailHandler('show');
-    } else {
-      showHideDetailHandler('hide');
-    }
-  }, [expandState]);
-  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", {
-    id: id,
-    css: _SummaryRootCSS,
-    ref: ref,
-    tabIndex: "-1",
-    onClick: _onClick,
-    style: style,
-    className: classNames('DGN-UI-Accordion-Summary', disabled && 'disabled', expandIcon && expandIconAt, expandState && 'expanding', className)
-  }, jsx("div", {
-    className: 'DGN-UI-Accordion-Summary-Content'
-  }, jsx(Typography, {
-    type: 'h3',
-    lineClamp: 2,
-    color: disabled ? 'system/disabled' : 'system/active',
-    style: {
-      marginRight: children && title ? spacing([4]) : 0
-    }
-  }, title || ''), children), !!expandIcon && jsx("div", {
-    className: 'Accordion-Icon-Root'
-  }, jsx("div", {
-    ...expandIconProps,
-    ref: expandIconRef,
-    className: classNames('Accordion-Icon', !collapseIcon && 'rotate-able', expandIconProps === null || expandIconProps === void 0 ? void 0 : expandIconProps.className)
-  }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: expandIcon,
-    className: 'Accordion-Expand-Icon'
-  }) : jsx("span", {
-    className: 'Accordion-Expand-Icon effect'
-  }, expandIcon), !!collapseIcon && (typeof collapseIcon === 'string' ? jsx(ButtonIcon, {
-    viewType: 'ghost',
-    name: collapseIcon,
-    className: 'Accordion-Collapse-Icon'
-  }) : jsx("span", {
-    className: 'Accordion-Collapse-Icon effect'
-  }, collapseIcon)))));
-}));
-const SummaryRootCSS = (background, {
-  colors,
-  spacing,
-  typography
-}) => css`
-    ${displayFlex};
-    ${flexRow};
-    ${positionRelative};
-    ${justifyBetween};
-    ${itemsCenter};
-    ${cursorPointer};
-    ${boxBorder};
-    ${borderRadius4px};
-    ${parseWidth('100%')};
-    ${parseMinHeight(56)};
-    padding: ${spacing([4, 6])};
-    ${bgColor(background)};
-    .Accordion-Expand-Icon,
-    .Accordion-Collapse-Icon {
-        ${cursorPointer};
-        color: ${getProp(colors, 'system/active')} !important;
-        &:active,
-        &:focus,
-        &:hover {
-            ${bgColor('transparent')};
-            ${textColor(getProp(colors, '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 {
-            margin-right: ${spacing([2])};
-            &.TreeView {
-                transform: rotateZ(-90deg);
-            }
-        }
-    }
-    &.end {
-        .Accordion-Icon.rotate-able {
-            margin-left: ${spacing([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(getProp(colors, 'fill/hover'))};
-        }
-        &:focus {
-            ${bgColor(getProp(colors, 'fill/focus'))};
-        }
-        &:active {
-            ${bgColor(getProp(colors, 'fill/pressed'))};
-        }
-    }
-    &.disabled {
-        ${pointerEventsNone};
-        ${bgColor(getProp(colors, 'fill/disabled'))};
-        .DGN-UI-Accordion-Summary-Content,
-        .Accordion-Expand-Icon {
-            color: ${getProp(colors, 'system/disabled')} !important;
-        }
-    }
-    &.treeview-disabled {
-        ${pointerEventsNone};
-        &:hover {
-            ${bgTransparent};
-        }
-        .TreeView-Item {
-            ${textColor(getProp(colors, 'system/disabled'))};
-        }
-        .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
-            ${cursorPointer};
-            ${pointerEventsInitial};
-        }
-    }
-    .DGN-UI-Accordion-Summary-Content {
-        ${typography.heading3};
-        ${flexRow};
-        ${positionRelative};
-        ${breakWord};
-        ${userSelectNone};
-        ${boxBorder}
-        ${itemsCenter};
-        ${textColor(getProp(colors, '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)};
-        }
-    }
-`;
-
-//Check defaultProps at src/theme/setting.js
-
-AccordionSummary.propTypes = {
-  /** Background color for the label summary. */
-  background: PropTypes.string,
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** CSS class for the component. */
-  className: PropTypes.string,
-  /** Icon to display for the collapse action. If `false`, the collapse icon is hidden. */
-  collapseIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.node, PropTypes.string]),
-  /** Icon to display for the expand action. If `false`, the expand icon is hidden. */
-  expandIcon: PropTypes.oneOfType([PropTypes.bool, PropTypes.node, PropTypes.string]),
-  /** Position to render the icon. */
-  expandIconAt: PropTypes.oneOf(['start', 'end']),
-  /** Additional props for the icon. */
-  expandIconProps: PropTypes.any,
-  /** Callback function fired when the component is clicked. */
-  onClick: PropTypes.func,
-  /** Inline style object for the component. */
-  style: PropTypes.object,
-  /** The title of the component. */
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
-};
-export default AccordionSummary;