diginet-core-ui 1.3.34 → 1.3.35

package/components/progress/circular.js

@@ -57,15 +57,14 @@ const getDimension = size => {
       strokeWidth = 8;
   }
 
-  ;
   return {
     labelStyle,
     rect,
     strokeWidth
   };
 };
-/**
- * Determinate circular progress 
+/**
+ * Determinate circular progress
  */
 
 
@@ -114,44 +113,44 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return angle;
   };
-  /**
-   * style
+  /**
+   * style
    */
 
 
   const containerCSS = css`
-        border-radius: 50%;
-        height       : ${containerW}px;
-        overflow     : hidden;
-        position     : relative;
-        width        : ${containerW}px;
-    `;
+                border-radius: 50%;
+                height: ${containerW}px;
+                overflow: hidden;
+                position: relative;
+                width: ${containerW}px;
+            `;
   const circleBackgroundCSS = css`
-        border-radius: 50%;
-        fill         : transparent;
-        overflow     : hidden;
-        stroke       : ${background};
-        stroke-width : ${circleStrokeW}px;
-    `;
+                border-radius: 50%;
+                fill: transparent;
+                overflow: hidden;
+                stroke: ${background};
+                stroke-width: ${circleStrokeW}px;
+            `;
   const circleMainCSS = css`
-        border-radius    : 50%;
-        fill             : transparent;
-        overflow         : hidden;
-        stroke           : ${color};
-        stroke-dasharray : ${`${circumference} ${circumference}`};
-        stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
-        stroke-linecap   : round;
-        stroke-width     : ${circleStrokeW}px;
-        transform        : rotate(${getDirection(direction)}deg);
-        transform-origin : 50% 50%;
-        transition       : stroke-dashoffset ${duration}s cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
-    `;
+                border-radius: 50%;
+                fill: transparent;
+                overflow: hidden;
+                stroke: ${color};
+                stroke-dasharray: ${`${circumference} ${circumference}`};
+                stroke-dashoffset: ${circumference - validatePercent(percent) / 100 * circumference};
+                stroke-linecap: round;
+                stroke-width: ${circleStrokeW}px;
+                transform: rotate(${getDirection(direction)}deg);
+                transform-origin: 50% 50%;
+                transition: stroke-dashoffset ${duration}s cubic-bezier(0.77, 0, 0.175, 1); /* easeInOutQuart */
+            `;
   const textCSS = css`
-        fill       : ${percentColor ? percentColor : color};
-        ${dimension.labelStyle}
-        text-anchor: middle;
-        user-select: none;
-    `;
+                fill: ${percentColor ? percentColor : color};
+                ${dimension.labelStyle}
+                text-anchor: middle;
+                user-select: none;
+            `;
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
     css: circleBackgroundCSS,
     cx: containerW / 2,
@@ -217,8 +216,8 @@ Determinate.propTypes = {
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress 
+/**
+ * Indeterminate circular progress
  */
 
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -255,40 +254,40 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-dashoffset: -${r * 124 / 200};
         }
     `;
-  /**
-   * style
+  /**
+   * style
    */
 
 
   const containerCSS = css`
-        animation    : ${keyframeRotate} 2s linear infinite;
-        border-radius: 50%;
-        height       : ${containerW}px;
-        overflow     : hidden;
-        position     : relative;
-        width        : ${containerW}px;
-    `;
+            animation: ${keyframeRotate} 2s linear infinite;
+            border-radius: 50%;
+            height: ${containerW}px;
+            overflow: hidden;
+            position: relative;
+            width: ${containerW}px;
+        `;
   const circleBackgroundCSS = css`
-        border-radius : 50%;
-        fill          : transparent;
-        overflow      : hidden;
-        stroke        : ${background};
-        stroke-linecap: round;
-        stroke-width  : ${circleStrokeW};
-    `;
+            border-radius: 50%;
+            fill: transparent;
+            overflow: hidden;
+            stroke: ${background};
+            stroke-linecap: round;
+            stroke-width: ${circleStrokeW};
+        `;
   const circleMainCSS = css`
-        animation        : ${keyframeDash(radiusX10)} 2s ease-in-out infinite;
-        border-radius    : 50%;
-        fill             : transparent;
-        overflow         : hidden;
-        stroke           : ${color};
-        stroke-dasharray : 10, ${radiusX10};
-        stroke-dashoffset: 0;
-        stroke-linecap   : round;
-        stroke-width     : ${circleStrokeW};
-    `;
-  /**
-   * component
+            animation: ${keyframeDash(radiusX10)} 2s ease-in-out infinite;
+            border-radius: 50%;
+            fill: transparent;
+            overflow: hidden;
+            stroke: ${color};
+            stroke-dasharray: 10, ${radiusX10};
+            stroke-dashoffset: 0;
+            stroke-linecap: round;
+            stroke-width: ${circleStrokeW};
+        `;
+  /**
+   * component
    */
 
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
@@ -331,8 +330,8 @@ Indeterminate.propTypes = {
   width: PropTypes.number
 };
 export const IndeterminateCircularProgress = Indeterminate;
-/**
- * Circular progress
+/**
+ * Circular progress
  */
 
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({

package/components/tab/tab-container.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import React, { forwardRef, useState, memo, useEffect } from 'react';
+import React, { forwardRef, useState, memo, useEffect, useRef, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { randomString } from '../../utils';
 import TabContext from './context';
 import { isNumeric } from '../../utils/type';
 import Typography from '../typography';
-import { flexRow, positionRelative } from '../../styles/general';
+import { flexCol, flexRow, positionRelative, parseWidth } from '../../styles/general';
 const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   tabIndex,
@@ -17,7 +17,8 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   level = 'level1',
   className,
   ...props
-}, ref) => {
+}, reference) => {
+  const ref = useRef(null);
   const {
     value
   } = props;
@@ -26,19 +27,22 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     allowNumber: false,
     allowSymbol: false
   }));
+  if (level === 'level1') level = 'h3';
+  if (level === 'level2') level = 'p1';
   useEffect(() => {
     if (isNumeric(value)) setTabIndexState(value);else setTabIndexState(tabIndex);
   }, [value, tabIndex]);
-  const TabContainer = css`
-            ${flexRow}
-            ${positionRelative}
-            flex-direction: ${direction === 'vertical' ? 'row' : 'column'};
-            width: ${isNaN(width) ? width : width + 'px'};
-        `;
-  if (level === 'level1') level = 'h3';
-  if (level === 'level2') level = 'p1';
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", {
-    css: TabContainer,
+    css: TabContainerCSS(direction, width),
     className: ['DGN-UI-Tab-Container', className].join(' ').trim().replace(/\s+/g, ' '),
     id: `DGN-${id}-tab-button-container`,
     ref: ref,
@@ -49,10 +53,17 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       setTabIndexState,
       direction
     }
-  }, React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+  }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
     level
   }))));
 }));
+
+const TabContainerCSS = (direction, width) => css`
+    ${direction === 'vertical' ? flexRow : flexCol}
+    ${positionRelative}
+    ${parseWidth(width)}
+`;
+
 TabContainer.defaultProps = {
   width: '100%',
   direction: 'horizontal',
@@ -80,6 +91,13 @@ TabContainer.propTypes = {
   style: PropTypes.object,
 
   /** any props else */
-  props: PropTypes.any
+  props: PropTypes.any,
+
+  /**
+   * ref methods
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export default TabContainer;

package/components/tab/tab-header.js

@@ -1,13 +1,13 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import React, { memo, forwardRef, useContext, useRef, useState } from 'react';
+import React, { memo, forwardRef, useContext, useRef, useState, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { color as colors } from '../../styles/colors';
 import TabContext from './context';
 import ButtonIcon from '../button/icon';
-import { borderBox, flexCol, flexRow, overflowHidden, positionRelative } from '../../styles/general';
+import { borderBox, displayNone, flexCol, flexRow, justifyCenter, overflowHidden, positionRelative, whiteSpaceNoWrap } from '../../styles/general';
 const {
   line: {
     tab
@@ -19,63 +19,19 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   level,
   scrollButtons,
+  centered,
   ...props
 }, reference) => {
   var _ref$current, _ref$current2;
 
-  const ref = useRef(null);
   const {
     direction
   } = useContext(TabContext);
-  const isVertical = direction === 'vertical';
+  const ref = useRef(null);
   const [scrollLeft, setScrollLeft] = useState(0);
+  const isVertical = direction === 'vertical';
   let showScrollLeftButton = !isVertical && scrollLeft > 0;
   let showScrollRightButton = !isVertical && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.offsetWidth) + scrollLeft < (ref === null || ref === void 0 ? void 0 : (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollWidth);
-  const Container = css`
-            ${flexRow}
-            ${overflowHidden}
-            ${positionRelative}
-            ${borderBox}
-            height: auto;
-            min-height: 2.5rem;
-            flex-direction: ${isVertical ? 'column' : 'row'};
-            max-width: ${isVertical ? 'max-content' : '100%'};
-            width: 100%;
-            padding: 0;
-            ${isVertical ? `border-right: solid 1px ${tab}` : `border-bottom: solid 1px ${tab}`};
-        `;
-  const TabHeader = isVertical ? css`
-                  ${flexCol}
-                  padding: 0 3px 0 0;
-              ` : css`
-                  ${flexRow}
-                  ${positionRelative}
-                  white-space: nowrap;
-                  margin: 0;
-                  list-style: none;
-                  overflow-x: auto;
-                  scroll-behavior: smooth;
-                  scroll-snap-type: x mandatory;
-                  scroll-padding: 50%;
-                  transition: 0.3s ease-in-out 0.3s;
-                  &::-webkit-scrollbar {
-                      display: none;
-                  }
-              `;
-
-  const scrollButton = scrollPrevious => css`
-            overflow: initial;
-            width: 24px;
-            height: 24px;
-            align-self: center;
-            margin: ${scrollPrevious ? '0 8px 0 0' : '0 0 0 8px'};
-            opacity: ${scrollPrevious && showScrollLeftButton || !scrollPrevious && showScrollRightButton ? '1' : '0'};
-            :disabled {
-                span {
-                    cursor: default !important;
-                }
-            }
-        `;
 
   const _onClickScrollButton = scrollPrevious => {
     let scrollValue = scrollPrevious ? ref.current.scrollLeft - (ref.current.offsetWidth + 30) : ref.current.scrollLeft + (ref.current.offsetWidth + 30);
@@ -83,14 +39,23 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     setScrollLeft(scrollValue);
   };
 
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", {
-    css: Container,
+    css: ContainerCSS(centered, isVertical),
     id: `DGN-control`,
     className: ['DGN-UI-Tab-Header-Container', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     ...props
   }, scrollButtons && jsx(ButtonIcon, {
-    css: scrollButton(true),
+    css: scrollButtonCSS(true, showScrollLeftButton, showScrollRightButton),
     name: isVertical ? 'ArrowUp' : 'ArrowLeft',
     viewType: 'text',
     size: 'tiny',
@@ -98,7 +63,7 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: !showScrollLeftButton,
     onClick: () => _onClickScrollButton(true)
   }), jsx("div", {
-    css: TabHeader,
+    css: TabHeaderCSS(isVertical),
     className: 'DGN-UI-Tab-Header',
     ref: ref,
     onScroll: e => {
@@ -106,10 +71,10 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
       return scrollButtons && setScrollLeft((e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollLeft) || 0);
     }
-  }, React.Children.map(children, child => /*#__PURE__*/React.cloneElement(child, {
+  }, React.Children.map(children, child => child && /*#__PURE__*/React.cloneElement(child, {
     level
   }))), scrollButtons && jsx(ButtonIcon, {
-    css: scrollButton(false),
+    css: scrollButtonCSS(false, showScrollLeftButton, showScrollRightButton),
     name: isVertical ? 'ArrowDown' : 'ArrowRight',
     viewType: 'text',
     size: 'tiny',
@@ -118,10 +83,60 @@ const TabHeader = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onClick: () => _onClickScrollButton(false)
   }));
 }));
+
+const ContainerCSS = (centered, isVertical) => css`
+    ${flexRow}
+    ${overflowHidden}
+    ${positionRelative}
+    ${borderBox}
+    ${centered && justifyCenter}
+    height: auto;
+    min-height: 2.5rem;
+    flex-direction: ${isVertical ? 'column' : 'row'};
+    max-width: ${isVertical ? 'max-content' : '100%'};
+    width: 100%;
+    padding: 0;
+    ${isVertical ? `border-right: solid 1px ${tab}` : `border-bottom: solid 1px ${tab}`};
+`;
+
+const TabHeaderCSS = isVertical => isVertical ? css`
+              ${flexCol}
+              padding: 0 3px 0 0;
+          ` : css`
+              ${flexRow}
+              ${positionRelative}
+			${whiteSpaceNoWrap}
+			margin: 0;
+              list-style: none;
+              overflow-x: auto;
+              scroll-behavior: smooth;
+              scroll-snap-type: x mandatory;
+              scroll-padding: 50%;
+              transition: 0.3s ease-in-out 0.3s;
+              &::-webkit-scrollbar {
+                  ${displayNone}
+              }
+          `;
+
+const scrollButtonCSS = (scrollPrevious, showScrollLeftButton, showScrollRightButton) => css`
+    overflow: initial;
+    width: 24px;
+    height: 24px;
+    align-self: center;
+    margin: ${scrollPrevious ? '0 8px 0 0' : '0 0 0 8px'};
+    opacity: ${scrollPrevious && showScrollLeftButton || !scrollPrevious && showScrollRightButton ? '1' : '0'};
+    :disabled {
+        span {
+            cursor: default !important;
+        }
+    }
+`;
+
 TabHeader.defaultProps = {
   scrollButtons: false,
   className: '',
-  style: {}
+  style: {},
+  centered: false
 };
 TabHeader.propTypes = {
   /** element to display in Tabs (like text) */
@@ -136,7 +151,17 @@ TabHeader.propTypes = {
   /** show scroll buttons if true */
   scrollButtons: PropTypes.bool,
 
+  /** If true, the tabs are centered */
+  centered: PropTypes.bool,
+
   /** any props else */
-  props: PropTypes.any
+  props: PropTypes.any,
+
+  /**
+   * ref methods
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export default TabHeader;

package/components/tab/tab-panel.js

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, forwardRef, useContext } from 'react';
+import { memo, forwardRef, useContext, useRef, useEffect, useState, useImperativeHandle } from 'react';
 import { jsx, css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { color as colors } from '../../styles/colors';
 import TabContext from './context';
-import { borderBox, positionRelative } from '../../styles/general';
+import { borderBox, displayNone, flexCol, positionRelative } from '../../styles/general';
 const {
   text: {
     main
@@ -17,25 +17,31 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   index,
   style,
   className,
+  lazyLoading,
   ...props
-}, ref) => {
+}, reference) => {
   const {
     tabIndexState,
     direction
   } = useContext(TabContext);
+  const [isRendered, setIsRendered] = useState(false);
+  const ref = useRef(null);
   const isVertical = direction === 'vertical';
-  const TabPanel = css`
-            display: ${index === tabIndexState ? 'flex' : 'none'};
-            ${borderBox}
-            ${positionRelative}
-            color: ${main};
-            height: ${isVertical ? '300px' : '100%'};
-            padding: 0px ${isVertical ? '12px' : '10'};
-            width: 100%;
-            flex-direction: column;
-        `;
+  const isActive = index === tabIndexState;
+  useEffect(() => {
+    if (isRendered) return;else if (index === tabIndexState) setIsRendered(true);
+  }, [tabIndexState]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return jsx("div", {
-    css: TabPanel,
+    css: TabPanelCSS(isVertical, isActive),
     "aria-labelledby": `tab-${index}`,
     id: `tab-panel-${index}`,
     className: ['DGN-UI-Tab-Panel', className].join(' ').trim().replace(/\s+/g, ' '),
@@ -43,11 +49,24 @@ const TabPanel = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     role: 'tab-panel',
     ref: ref,
     ...props
-  }, children);
+  }, isActive || !lazyLoading || isRendered ? children : null);
 }));
+
+const TabPanelCSS = (isVertical, isActive) => css`
+    ${flexCol}
+    ${borderBox}
+    ${positionRelative}
+    ${isActive ? flexCol : displayNone}
+    color: ${main};
+    height: ${isVertical ? '300px' : '100%'};
+    padding: 0px ${isVertical ? '12px' : '10'};
+    width: 100%;
+`;
+
 TabPanel.defaultProps = {
   className: '',
-  style: {}
+  style: {},
+  lazyLoading: false
 };
 TabPanel.propTypes = {
   /** element to display in Tabs (like text) */
@@ -62,7 +81,17 @@ TabPanel.propTypes = {
   /** style inline of component */
   style: PropTypes.object,
 
+  /** lazy loading mode */
+  lazyLoading: PropTypes.bool,
+
   /** any props else */
-  props: PropTypes.any
+  props: PropTypes.any,
+
+  /**
+   * ref methods
+   */
+  reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.instanceOf(Element)
+  })])
 };
 export default TabPanel;