diginet-core-ui 1.3.42 → 1.3.43

package/components/form-control/number-input/index2.js

@@ -75,13 +75,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
 
   if (valueProps || valueProps === 0) valueProps = clamp(valueProps, min, max);
-  /**
-   * Convert number to format money
-   * @param vl {number} - value
-   * @type {function(*): number}
-   * @return {string}
-   * @example 1200300.123 => 1,200,300.123
-   * @example 1200300,123 => 1.200.300,123
+  /**
+   * Convert number to format money
+   * @param vl {number} - value
+   * @type {function(*): number}
+   * @return {string}
+   * @example 1200300.123 => 1,200,300.123
+   * @example 1200300,123 => 1.200.300,123
    */
 
   const parseNumberToMoney = useCallback((vl, isNumber) => {
@@ -117,13 +117,13 @@ const NumberInput = /*#__PURE__*/forwardRef(({
 
     return number;
   }, [decimalSymbol, max, value]);
-  /**
-   * Convert money to format number
-   * @param vl {string} - value
-   * @type {function(*): number}
-   * @return {number}
-   * @example 1,200,300.123 => 1200300.123
-   * @example 1.200.300,123 => 1200300.123
+  /**
+   * Convert money to format number
+   * @param vl {string} - value
+   * @type {function(*): number}
+   * @return {number}
+   * @example 1,200,300.123 => 1200300.123
+   * @example 1.200.300,123 => 1200300.123
    */
 
   const convertMoneyToNumber = useCallback((vl, isNumber) => {
@@ -172,6 +172,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     var _value$split, _value$split$;
 
     const {
+      key,
       keyCode,
       ctrlKey,
       metaKey,
@@ -183,10 +184,11 @@ const NumberInput = /*#__PURE__*/forwardRef(({
       }
     } = e; // 0-9 only
 
-    const isNumber = keyCode >= 48 && keyCode <= 57 && shiftKey === false || keyCode >= 96 && keyCode <= 105; // character input type="number"
+    const isNumber = keyCode >= 48 && keyCode <= 57 && shiftKey === false || keyCode >= 96 && keyCode <= 105 || keyCode === 231 && key >= '0' && key <= '9'; // character input type="number"
 
     const allowKeyTypeNumber = isNumber || keyCode === 8 || // key backspace
     keyCode > 34 && keyCode < 40 || keyCode === 190 || keyCode === 110 || // .
+    keyCode === 231 && key === '.' || // .
     keyCode === 188 || // ,
     (ctrlKey || metaKey) && (keyCode === 65 || keyCode === 67 || keyCode === 86) || // ctrl + A, ctrl + C, ctrl + V
     keyCode === 46 || // key delete
@@ -392,10 +394,10 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 

package/components/form-control/text-input/index.js

@@ -1,11 +1,12 @@
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
-import { memo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { memo, useEffect, useRef, forwardRef, useState, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, CircularProgress as Circular, HelperText, InputBase, Label } from '../../';
 import { renderIcon, onValidate } from '../../../utils';
+import { displayBlock, flexRow, positionRelative } from '../../../styles/general';
 const icons = {
   default: `<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path fillRule="evenodd" clipRule="evenodd" d="M15.5616 19.0007C15.4036 19.0007 15.2446 18.9637 15.0986 18.8877L9.99962 16.2237L4.90162 18.8877C4.56362 19.0627 4.15562 19.0327 3.84962 18.8087C3.54162 18.5847 3.38862 18.2057 3.45362 17.8307L4.42462 12.2027L0.304623 8.21765C0.030623 7.95265 -0.068377 7.55465 0.048623 7.19065C0.165623 6.82865 0.478623 6.56365 0.856623 6.50965L6.55662 5.68165L9.10462 0.555654C9.44262 -0.124346 10.5576 -0.124346 10.8956 0.555654L13.4436 5.68165L19.1436 6.50965C19.5216 6.56365 19.8346 6.82865 19.9516 7.19065C20.0686 7.55465 19.9696 7.95265 19.6956 8.21765L15.5756 12.2027L16.5466 17.8307C16.6116 18.2057 16.4576 18.5847 16.1506 18.8087C15.9766 18.9367 15.7696 19.0007 15.5616 19.0007Z" fill="#7F828E"/>
@@ -33,7 +34,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   label,
   defaultValue,
-  value,
+  value: valueProp,
   placeholder,
   resize,
   startIcon,
@@ -77,19 +78,20 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const iconRef = useRef(null);
   let currentValue = '';
-  const isError = !!error && !value && value !== 0;
+  const [value, setValue] = useState(valueProp || defaultValue);
+  const isError = !!error;
   /* Start styled */
 
   const TextInputRoot = css`
-                display: block;
-                position: relative;
-                margin-bottom: 20px;
+                ${displayBlock}
+                ${positionRelative}
+        margin-bottom: 20px;
             `;
   const TextInputIcon = css`
-                display: flex;
+                ${flexRow}
                 color: inherit;
                 .edit-icon-pen {
-                    display: flex;
+                    ${flexRow}
                 }
                 .edit-icon-confirm {
                     display: none;
@@ -176,12 +178,12 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     inputRef.current.disabled = false;
   };
 
+  useEffect(() => {
+    setValue(valueProp);
+  }, [valueProp]);
   useEffect(() => {
     !!refs && refs(ref);
-
-    if (defaultValue !== undefined && defaultValue !== '') {
-      currentValue = defaultValue;
-    }
+    currentValue = defaultValue || '';
   }, []);
   useEffect(() => {
     if (/^(quick)?Edit/i.test(type) && !multiline) {
@@ -326,7 +328,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     ref: ref,
     css: TextInputRoot,
-    className: ['DGN-UI-TextInput', className].join(' ').trim(),
+    className: ['DGN-UI-TextInput', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
     ...props
   }, !!label && jsx(Label, {
@@ -339,7 +341,6 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     inputRef: inputRef,
     viewType: viewType,
     defaultValue: defaultValue,
-    value: value,
     placeholder: placeholder,
     autoFocus: autoFocus,
     disabled: disabled,
@@ -360,7 +361,8 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onInput: onInput,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
-    onPaste: onPaste
+    onPaste: onPaste,
+    value: valueProp
   }), isError && jsx(HelperText, {
     disabled: disabled,
     status: status
@@ -497,10 +499,10 @@ TextInput.propTypes = {
   /** on focus function */
   onFocus: PropTypes.func,
 
-  /** validation value, argument can:<br/>
-   * * string: the validation rule. Example required.<br/>
-   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
-   * * array: the validation rule list, insist object/string
+  /** validation value, argument can:<br/>
+   * * string: the validation rule. Example required.<br/>
+   * * object: the validation rule insist name, property, message. Example {name: 'min', compareValue: 9, message: 'Error'} or {max: 99}<br/>
+   * * array: the validation rule list, insist object/string
    */
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 

package/components/form-control/toggle/index.js

@@ -7,7 +7,7 @@ import { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
 import theme from '../../../theme/settings';
 import generateRandom from '../../../utils/randomString';
 import Typography from '../../typography';
-import { alignCenter, cursorNotAllowed, cursorPointer, displayBlock, flexRow, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../../styles/general';
+import { alignCenter, cursorNoDrop, cursorPointer, displayBlock, flexRow, positionAbsolute, positionRelative } from '../../../styles/general';
 const {
   colors: {
     system: {
@@ -30,6 +30,7 @@ const {
 const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   id,
   disabled,
+  readOnly,
   name,
   height,
   width,
@@ -48,25 +49,21 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }
 
   const [checkedState, setCheckedState] = useState(Boolean(checked !== undefined ? checked : defaultChecked));
+  const padding = spacing(0.5);
   const formCheck = css`
                 ${positionRelative};
-                ${cursorPointer};
-                ${userSelectNone};
                 min-height: ${height}px;
-                &.disabled {
-                    ${pointerEventsNone};
-                }
+                padding: ${padding}px;
             `;
   const toggle = css`
                 ${flexRow};
                 ${alignCenter};
-                ${cursorPointer};
                 ${positionRelative};
+                ${cursorPointer};
                 margin: 0;
             `;
   const slider = css`
                 ${positionRelative};
-                ${cursorPointer};
                 ${displayBlock};
                 height: ${height}px;
                 width: ${width}px;
@@ -74,6 +71,12 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 border-radius: ${height}px;
                 background: ${clWhite};
                 outline: 1px solid ${clRest};
+                &.disabled {
+                    outline: 1px solid ${clDisabled} !important;
+                }
+                &.disabled, &.read-only{
+                    ${cursorNoDrop};
+                }
                 &::after {
                     ${positionAbsolute};
                     background: ${clRest};
@@ -84,20 +87,13 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                     left: 2px;
                     border-radius: 100%;
                     transition: 0.3s ease-in-out;
-                    margin: 0px auto;
-                }
-                &:hover {
-                    box-shadow: 0 0 0 2px ${clHover};
-                    background-color: ${clHover};
-                    outline-color: ${clPrimary};
+                    margin: 0px auto;pop
                 }
-                &:hover:after {
-                    background-color: ${clActive};
-                }
-                &:active,
-                &:focus {
-                    box-shadow: 0 0 0 2px ${clFillFocus};
-                    background-color: ${clFillFocus};
+                &:not(.disabled):not(.read-only) {
+                    &:active,
+                    &:focus {
+                        box-shadow: 0 0 0 2px ${clFillFocus};
+                    }
                 }
             `;
   const checkbox = css`
@@ -109,27 +105,27 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                         background: ${clWhite};
                         left: ${width - height}px;
                     }
-                }
-                &:disabled:checked + label > span.css-${slider.name} {
-                    ${userSelectNone};
-                    ${pointerEventsNone};
-                    ${cursorNotAllowed};
-                    background: ${clDisabled};
-                    outline-color: ${clDisabled};
-                }
-                &:hover:not(:checked) + label > span.css-${slider.name} {
-                    background: ${clHover};
-                    outline: 1px solid ${clPrimary};
-                    transition: 0.3s ease-in-out;
-                    ::after {
-                        background: ${clPrimary};
+                    &.disabled {
+                        background: ${clDisabled} !important;
                     }
                 }
-                &:disabled:not(:checked) + label > span.css-${slider.name} {
-                    ${pointerEventsNone};
-                    outline-color: ${clDisabled};
-                    ::after {
-                        background: ${clDisabled};
+                &:not(:checked) + label > span.css-${slider.name} {
+                    &:not(.disabled):not(.read-only) {
+                        &:hover {
+                            box-shadow: 0 0 0 2px ${clHover};
+                            outline-color: ${clPrimary};
+                            background-color: ${clHover};
+                        }
+                        &:hover:after {
+                            background-color: ${clActive};
+                        }
+                        &:active,
+                        &:focus {
+                            background-color: ${clFillFocus};
+                        }
+                    }
+                    &.disabled:after {
+                        background: ${clDisabled} !important;
                     }
                 }
             `;
@@ -139,7 +135,7 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
 
   const handleChange = () => {
-    if (disabled) return;
+    if (disabled || readOnly) return;
     setCheckedState(checked !== undefined ? Boolean(checked) : !checkedState);
     const e = {
       value: !checkedState,
@@ -150,19 +146,6 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     if (onChange) onChange(e);
   };
 
-  useEffect(() => {
-    if (disabled) {
-      inputRef.current.disabled = disabled;
-      inputRef.current.parentNode.parentNode.classList.add('disabled');
-    }
-
-    return () => {
-      if (disabled && inputRef.current) {
-        inputRef.current.disabled = false;
-        inputRef.current.parentNode.parentNode.classList.remove('disabled');
-      }
-    };
-  }, [disabled, onChange]);
   useEffect(() => {
     if (checked !== undefined) setCheckedState(Boolean(checked));
   }, [checked]);
@@ -176,6 +159,8 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     hidden: true,
     name: name,
     type: "checkbox",
+    disabled: disabled,
+    readOnly: readOnly,
     css: checkbox,
     checked: checkedState,
     onChange: handleChange
@@ -183,7 +168,8 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: toggle,
     onClick: handleChange
   }, jsx("span", {
-    css: slider
+    css: slider,
+    className: `${disabled ? 'disabled' : ''} ${readOnly ? 'read-only' : ''}`
   }), label !== undefined && jsx(Typography, {
     type: 'p1',
     style: {
@@ -194,10 +180,11 @@ const Toggle = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     hoverTooltip: hoverTooltip,
     lineClamp: lineClamp || null,
     mapping: 'label'
-  }, label))), [disabled, onChange, checkedState]);
+  }, label))), [disabled, onChange, checkedState, readOnly]);
 }));
 Toggle.defaultProps = {
   disabled: false,
+  readOnly: false,
   defaultChecked: false,
   label: '',
   value: '',
@@ -210,6 +197,9 @@ Toggle.propTypes = {
   /** * If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
+  /** prevent all event if true */
+  readOnly: PropTypes.bool,
+
   /** If `true`, the component is defaultChecked. */
   defaultChecked: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf([0, 1])]),
 

package/components/paging/page-info.js

@@ -323,15 +323,15 @@ PagingInfo.propTypes = {
   /** the function will run after change quantity on per page */
   onChangePerPage: PropTypes.func,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * onChangePage(page): Change page number
-   *  * @param {page} - number
-   * * onChangePerPage(per): Change quantity on per page
-   *  * @param {per} - number
-   * * setTotalItems(items): Set total items
-   *  * @param {items} - number
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * onChangePage(page): Change page number
+   *  * @param {page} - number
+   * * onChangePerPage(per): Change quantity on per page
+   *  * @param {per} - number
+   * * setTotalItems(items): Set total items
+   *  * @param {items} - number
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/popover/index.js

@@ -441,32 +441,32 @@ Popover.propTypes = {
   /** An HTML element, or a function that returns one. It's used to set the position of the popover. */
   anchor: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.func, PropTypes.object]),
 
-  /**
-   * This is the point on the anchor where the popover's anchor will attach to.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the anchor where the popover's anchor will attach to.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   anchorOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
 
-  /**
-   * This is the point on the popover which will attach to the anchor's origin.
-   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
+  /**
+   * This is the point on the popover which will attach to the anchor's origin.
+   * Options: vertical: [top, center, bottom]; horizontal: [left, center, right].
    */
   transformOrigin: PropTypes.shape({
     horizontal: PropTypes.oneOf(['center', 'left', 'right']),
     vertical: PropTypes.oneOf(['bottom', 'center', 'top'])
   }),
 
-  /**
-   * Direction when Popover shown.
-   * Note: This prop will overwrite anchorOrigin & transformOrigin.
-   *
-   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
-   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
-   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
-   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
+  /**
+   * Direction when Popover shown.
+   * Note: This prop will overwrite anchorOrigin & transformOrigin.
+   *
+   * * top: anchorOrigin: { vertical: 'top', horizontal: 'center' }, transformOrigin: { vertical: 'bottom', horizontal: 'center' }
+   * * left: anchorOrigin: { vertical: 'center', horizontal: 'left' }, transformOrigin: { vertical: 'center', horizontal: 'right' }
+   * * right: anchorOrigin: { vertical: 'center', horizontal: 'right' }, transformOrigin: { vertical: 'center', horizontal: 'left' }
+   * * right: anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' }
    */
   direction: PropTypes.oneOf(['top', 'left', 'right', 'bottom']),
 
@@ -485,13 +485,13 @@ Popover.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
 
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * show: Show popover
-   * * close: Close popover
-   * * setPosition(element): Set position of popover
-   *  * @param {element} - element
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * show: Show popover
+   * * close: Close popover
+   * * setPosition(element): Set position of popover
+   *  * @param {element} - element
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/components/popup/v2/index.js

@@ -465,13 +465,13 @@ Popup.propTypes = {
   /** the function will run when click on cancel button */
   onCancel: func,
 
-  /**
-   * named ref: get ref of Popup component, insist:<br />
-   * * element<br />
-   * * show: the method to show Popup (ref.current.show(options, callback))<br />
-   * &nbsp;&nbsp; + options: {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}<br />
-   * &nbsp;&nbsp; + callback: the function will run after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options<br />
-   * * close: the method to close Popup<br />
+  /**
+   * named ref: get ref of Popup component, insist:<br />
+   * * element<br />
+   * * show: the method to show Popup (ref.current.show(options, callback))<br />
+   * &nbsp;&nbsp; + options: {type, title, icon, yesNo, description, confirmProps, cancelProps, onCancel, onConfirm}<br />
+   * &nbsp;&nbsp; + callback: the function will run after click on button (callback(true) with confirm Button and callback(false) with cancel Button). Alternate both onCancel, onConfirm methods of options<br />
+   * * close: the method to close Popup<br />
    */
   reference: oneOfType([func, shape({
     current: instanceOf(elementType)

package/components/progress/circular.js

@@ -63,8 +63,8 @@ const getDimension = size => {
     strokeWidth
   };
 };
-/**
- * Determinate circular progress
+/**
+ * Determinate circular progress
  */
 
 
@@ -113,8 +113,8 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return angle;
   };
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -216,8 +216,8 @@ Determinate.propTypes = {
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress
+/**
+ * Indeterminate circular progress
  */
 
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -254,8 +254,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-dashoffset: -${r * 124 / 200};
         }
     `;
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -286,8 +286,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-linecap: round;
             stroke-width: ${circleStrokeW};
         `;
-  /**
-   * component
+  /**
+   * component
    */
 
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
@@ -330,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

@@ -14,7 +14,7 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   tabIndex,
   width,
   direction,
-  level = 'level1',
+  level,
   className,
   ...props
 }, reference) => {
@@ -29,6 +29,9 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
   if (level === 'level1') level = 'h3';
   if (level === 'level2') level = 'p1';
+
+  const _TabContainerCSS = TabContainerCSS(direction, width);
+
   useEffect(() => {
     if (isNumeric(value)) setTabIndexState(value);else setTabIndexState(tabIndex);
   }, [value, tabIndex]);
@@ -42,7 +45,7 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   return jsx("div", {
-    css: TabContainerCSS(direction, width),
+    css: _TabContainerCSS,
     className: ['DGN-UI-Tab-Container', className].join(' ').trim().replace(/\s+/g, ' '),
     id: `DGN-${id}-tab-button-container`,
     ref: ref,
@@ -59,9 +62,9 @@ const TabContainer = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 
 const TabContainerCSS = (direction, width) => css`
-    ${direction === 'vertical' ? flexRow : flexCol}
-    ${positionRelative}
-    ${parseWidth(width)}
+    ${direction === 'vertical' ? flexRow : flexCol};
+    ${positionRelative};
+    ${parseWidth(width)};
 `;
 
 TabContainer.defaultProps = {
@@ -74,27 +77,32 @@ TabContainer.defaultProps = {
 };
 const typesTypography = Typography.propTypes.type;
 TabContainer.propTypes = {
+  /** Width of component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
+  /** The value of the currently selected Tab. */
   tabIndex: PropTypes.number,
+
+  /** The content of the component. */
   children: PropTypes.node,
 
-  /** direction change the position of Tabs */
+  /** Direction change the position of Tabs. */
   direction: PropTypes.oneOf(['vertical', 'horizontal']),
 
-  /** direction change the size typography of Tab (typesTypography is types of Typography - exp: h1, h2, h3, p1 .....)*/
+  /** Direction change the size typography of Tab (typesTypography is types of Typography - exp: h1, h2, h3, p1 ...). */
   level: PropTypes.oneOfType([PropTypes.oneOf(['level1', 'level2']), typesTypography]),
 
-  /** class for component */
+  /** Class for component */
   className: PropTypes.string,
 
-  /** style inline of component */
+  /** Style inline of component. */
   style: PropTypes.object,
 
-  /** any props else */
+  /** Any props else. */
   props: PropTypes.any,
 
   /**
-   * ref methods
+   * Ref methods.
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)