diginet-core-ui 1.4.39 → 1.4.40

package/components/button/ripple-effect.js

@@ -1,81 +0,0 @@
-/* eslint-disable react/prop-types */
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx, keyframes } from '@emotion/core';
-import { forwardRef, memo, useImperativeHandle, useLayoutEffect, useState } from 'react';
-import { bgColor, borderRadius, inset, overflowHidden, positionAbsolute } from "../../styles/general";
-const useDebouncedRippleCleanUp = (rippleCount, duration, cleanUpFunction) => {
-  useLayoutEffect(() => {
-    if (rippleCount > 0) {
-      const bounce = setTimeout(() => cleanUpFunction(), duration);
-      return () => clearTimeout(bounce);
-    }
-    return undefined;
-  }, [rippleCount, duration, cleanUpFunction]);
-};
-const Ripple = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  duration = 850,
-  color = 'system/standard',
-  circular = false,
-  ...props
-}, ref) => {
-  const [rippleArray, setRippleArray] = useState([]);
-  useDebouncedRippleCleanUp(rippleArray.length, duration, () => {
-    setRippleArray([]);
-  });
-  const _RippleChildCSS = RippleChildCSS(circular, color, duration);
-  const addRipple = event => {
-    const rippleContainer = event.currentTarget.getBoundingClientRect();
-    const size = rippleContainer.width > rippleContainer.height ? rippleContainer.width : rippleContainer.height;
-    const x = event.pageX - rippleContainer.x - rippleContainer.width / 2;
-    const y = event.pageY - rippleContainer.y - rippleContainer.width / 2;
-    const newRippleArray = {
-      x,
-      y,
-      size
-    };
-    setRippleArray(prevState => [...prevState, newRippleArray]);
-  };
-  useImperativeHandle(ref, () => ({
-    start: addRipple
-  }));
-  return jsx("span", {
-    css: RippleContainerCSS,
-    className: 'DGN-UI-Ripple',
-    ...props
-  }, rippleArray.length > 0 && rippleArray.map((ripple, index) => {
-    return jsx("span", {
-      key: 'ripple_' + index,
-      css: _RippleChildCSS,
-      className: 'DGN-UI-Ripple-Child',
-      style: {
-        top: ripple.y,
-        left: ripple.x,
-        width: ripple.size,
-        height: ripple.size
-      }
-    });
-  }));
-}));
-const rippleKeyframes = keyframes`
-	to {
-		opacity: 0;
-		transform: scale(2);
-	}
-`;
-const RippleContainerCSS = css`
-    ${overflowHidden};
-    ${positionAbsolute};
-    z-index: 0;
-    ${inset(0)};
-    border-radius: inherit;
-`;
-const RippleChildCSS = (circular, color, duration) => css`
-    ${positionAbsolute};
-    ${borderRadius(circular ? '50%' : '100%')};
-    opacity: 0.75;
-    transform: scale(0);
-    ${bgColor(color)};
-    animation: ${rippleKeyframes} ${duration}ms;
-`;
-export default Ripple;

package/components/card/body.js

@@ -1,76 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, refType as ref } from "../../utils";
-const CardBody = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'CardBody'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    id,
-    style
-  } = props;
-  const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return useMemo(() => {
-    return jsx("div", {
-      id: id,
-      ref: ref,
-      style: style,
-      className: classNames(`DGN-UI-Card-Body`, className)
-    }, children);
-  }, [children, className, id, style]);
-}));
-
-// CardBody.defaultProps = {
-//     className: '',
-//     style: {},
-// };
-
-CardBody.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
-  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /** If `true`, will have divider between body and footer. */
-  style: PropTypes.object,
-  /** The title of the component's header. */
-  title: PropTypes.string,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-  ref: ref
-};
-export { CardBody };
-export default OptionWrapper(CardBody);

package/components/card/extra.js

@@ -1,76 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, refType as ref } from "../../utils";
-const CardExtra = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'CardExtra'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    id,
-    style
-  } = props;
-  const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return useMemo(() => {
-    return jsx("div", {
-      id: id,
-      ref: ref,
-      style: style,
-      className: classNames(`DGN-UI-Card-Extra`, className)
-    }, children);
-  }, [children, className, id, style]);
-}));
-
-// CardExtra.defaultProps = {
-//     className: '',
-//     style: {},
-// };
-
-CardExtra.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
-  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /** If `true`, will have divider between body and footer. */
-  style: PropTypes.object,
-  /** The title of the component's header. */
-  title: PropTypes.string,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-  ref: ref
-};
-export { CardExtra };
-export default OptionWrapper(CardExtra);

package/components/card/footer.js

@@ -1,76 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, refType as ref } from "../../utils";
-const CardFooter = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'CardFooter'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    id,
-    style
-  } = props;
-  const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return useMemo(() => {
-    return jsx("div", {
-      id: id,
-      ref: ref,
-      style: style,
-      className: classNames(`DGN-UI-Card-Footer`, className)
-    }, children);
-  }, [children, className, id, style]);
-}));
-
-// CardFooter.defaultProps = {
-//     className: '',
-//     style: {},
-// };
-
-CardFooter.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
-  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /** If `true`, will have divider between body and footer. */
-  style: PropTypes.object,
-  /** The title of the component's header. */
-  title: PropTypes.string,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-  ref: ref
-};
-export { CardFooter };
-export default OptionWrapper(CardFooter);

package/components/card/header.js

@@ -1,80 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import useThemeProps from "../../theme/utils/useThemeProps";
-import { classNames, refType as ref } from "../../utils";
-const CardHeader = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'CardHeader'
-  });
-  const {
-    action = {},
-    children,
-    className,
-    id,
-    style,
-    title
-  } = props;
-  const ref = useRef(null);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  return useMemo(() => {
-    return jsx("div", {
-      id: id,
-      ref: ref,
-      style: style,
-      className: classNames(`DGN-UI-Card-Header`, className)
-    }, children || jsx(Typography, {
-      type: 'h3'
-    }, title));
-  }, [children, className, id, style, title]);
-}));
-
-// CardHeader.defaultProps = {
-//     className: '',
-//     style: {},
-// };
-
-CardHeader.propTypes = {
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
-  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /** If `true`, will have divider between body and footer. */
-  style: PropTypes.object,
-  /** The title of the component's header. */
-  title: PropTypes.string,
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-  ref: ref
-};
-export { CardHeader };
-export default OptionWrapper(CardHeader);

package/components/card/index.js

@@ -1,203 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
-import PropTypes from 'prop-types';
-import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, borderRadius4px, boxBorder, flexCol, flexRow, justifyEnd, overflowHidden, parseWidth, parseWidthHeight, positionAbsolute, positionRelative } from "../../styles/general";
-import { getColor } from "../../styles/utils";
-import { useTheme } from "../../theme";
-import { classNames, getProp, refType as ref } from "../../utils";
-import { CardBody } from "./body";
-import { CardFooter } from "./footer";
-import CardHeader from "./header";
-import useThemeProps from "../../theme/utils/useThemeProps";
-const Card = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((inProps, reference) => {
-  if (!reference) reference = useRef(null);
-  const theme = useTheme();
-  const {
-    colors
-  } = theme;
-
-  // props priority: `inProps` > `themeDefaultProps`
-  const props = useThemeProps({
-    props: inProps,
-    name: 'Card'
-  });
-  const {
-    action = {},
-    body: bodyProp,
-    bodyStyle,
-    children,
-    className,
-    dividerColor,
-    direction,
-    footer,
-    footerDivider,
-    footerStyle,
-    header,
-    headerDivider,
-    headerStyle,
-    height,
-    id,
-    style,
-    title,
-    width
-  } = props;
-  const ref = useRef(null);
-  const _CardCSS = CardCSS(width, height, headerDivider, footerDivider, getProp(colors, dividerColor, dividerColor), direction, theme);
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    currentRef.element = ref.current;
-    const _instance = {
-      ...action
-    }; // methods
-    _instance.__proto__ = {}; // hidden methods
-    currentRef.instance = _instance;
-    return currentRef;
-  });
-  const head = header || title ? jsx(CardHeader, {
-    className: classNames(className === null || className === void 0 ? void 0 : className.header),
-    style: headerStyle,
-    title: title
-  }, header) : null;
-  const foot = footer ? jsx(CardFooter, {
-    className: classNames(className === null || className === void 0 ? void 0 : className.footer),
-    style: footerStyle
-  }, footer) : null;
-  const body = bodyProp || children && (head || foot) ? jsx(CardBody, {
-    className: classNames(className === null || className === void 0 ? void 0 : className.body),
-    style: bodyStyle
-  }, bodyProp || children) : null;
-  return useMemo(() => {
-    return jsx("div", {
-      id: id,
-      ref: ref,
-      css: _CardCSS,
-      style: style,
-      className: classNames(`DGN-UI-Card`, (className === null || className === void 0 ? void 0 : className.container) || className)
-    }, head, body || children, foot);
-  }, [bodyProp, bodyStyle, children, className, dividerColor, direction, footer, footerDivider, footerStyle, header, headerDivider, headerStyle, height, id, style, title, width]);
-}));
-const CardCSS = (width, height, headerDivider, footerDivider, dividerColor, direction, {
-  colors,
-  spacing
-}) => css`
-    ${direction === 'vertical' ? flexCol : flexRow};
-    ${positionRelative};
-    ${boxBorder};
-    ${borderRadius4px};
-    ${overflowHidden}
-    ${parseWidthHeight(width, height)};
-    ${parseWidth(width)};
-    ${bgColor(getProp(colors, 'system/standard'))};
-    .DGN-UI-Card-Header {
-        ${flexRow};
-        ${positionRelative};
-        ${boxBorder};
-        order: 1;
-        padding: ${spacing([4])};
-        &:after {
-            ${positionAbsolute};
-            content: '';
-            left: 0;
-            right: 0;
-            bottom: 0;
-            margin: ${spacing([0, 4])};
-            border-bottom: ${headerDivider ? `1px solid ${getColor(dividerColor)}` : 'none'};
-        }
-    }
-    .DGN-UI-Card-Body {
-        ${flexCol};
-        ${positionRelative};
-        ${boxBorder};
-        order: 2;
-        padding: ${spacing(headerDivider ? [4] : [0, 4, 4])};
-    }
-    .DGN-UI-Card-Footer {
-        ${flexRow};
-        ${justifyEnd};
-        ${positionRelative};
-        ${boxBorder};
-        order: 3;
-        padding: ${spacing(footerDivider ? [4] : [0, 4, 4])};
-        &:before {
-            ${positionAbsolute};
-            content: '';
-            left: 0;
-            right: 0;
-            top: 0;
-            margin: ${spacing([0, 4])};
-            border-top: ${footerDivider ? `1px solid ${getColor(dividerColor)}` : 'none'};
-        }
-    }
-    .DGN-UI-Card-Extra {
-        ${flexCol};
-        ${positionRelative};
-        ${boxBorder};
-    }
-`;
-
-// Card.defaultProps = {
-//     bodyStyle: {},
-//     className: '',
-//     dividerColor: 'line/category',
-//     direction: 'vertical',
-//     footerDivider: false,
-//     footerStyle: {},
-//     headerDivider: true,
-//     headerStyle: {},
-//     style: {},
-//     width: 258,
-//     height: 'max-content',
-// };
-
-Card.propTypes = {
-  /** The content of the component's body. */
-  body: PropTypes.node,
-  /** The content of the component's body. */
-  bodyStyle: PropTypes.object,
-  /** The content of the component. */
-  children: PropTypes.node,
-  /** Class for component. ({container: '', header: '', body: '', footer: ''}) */
-  className: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /** Color of divider. */
-  dividerColor: PropTypes.string,
-  /** The content of the component's footer. */
-  footer: PropTypes.node,
-  /** If `true`, will have divider between body and footer. */
-  footerDivider: PropTypes.bool,
-  /** Style inline of component's footer. */
-  footerStyle: PropTypes.object,
-  /** The content of the component's header. */
-  header: PropTypes.node,
-  /** If `true`, will have divider between header and body. */
-  headerDivider: PropTypes.bool,
-  /** Style inline of component's header. */
-  headerStyle: PropTypes.object,
-  /** Height of the component. */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Style inline of component. */
-  style: PropTypes.object,
-  /** The title of the component's header. */
-  title: PropTypes.string,
-  /** Width of the component. */
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
-   */
-  ref: ref
-};
-export { Card };
-export default OptionWrapper(Card);

package/components/chart/Pie/Circle.js

@@ -1,50 +0,0 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import PropTypes from 'prop-types';
-import { memo, forwardRef } from 'react';
-import { jsx } from '@emotion/core';
-const Circle = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(({
-  center,
-  color,
-  onMouseEnter,
-  onMouseLeave,
-  onTouchEnd,
-  onTouchStart,
-  className,
-  radius,
-  strokeColor,
-  strokeWidth,
-  name,
-  quantity
-}, ref) => {
-  return jsx("ellipse", {
-    ref: ref,
-    cx: center,
-    cy: center,
-    fill: color,
-    className: className,
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
-    onTouchEnd: onTouchEnd,
-    onTouchStart: onTouchStart,
-    rx: radius,
-    ry: radius,
-    stroke: strokeColor,
-    strokeWidth: strokeWidth
-  }, name && jsx("title", null, name, ": ", quantity));
-}));
-Circle.propTypes = {
-  className: PropTypes.string,
-  onMouseEnter: PropTypes.func,
-  onMouseLeave: PropTypes.func,
-  onTouchEnd: PropTypes.func,
-  onTouchStart: PropTypes.func,
-  center: PropTypes.number.isRequired,
-  color: PropTypes.string.isRequired,
-  radius: PropTypes.number.isRequired,
-  strokeColor: PropTypes.string,
-  strokeWidth: PropTypes.number,
-  name: PropTypes.string,
-  quantity: PropTypes.number
-};
-export default Circle;