diginet-core-ui 1.3.47-beta.1 → 1.3.47-beta.4

package/components/accordion/css.js

@@ -1,37 +1,37 @@
 import { css } from '@emotion/core';
-import { typography } from '../../styles/typography';
-import { color as colors } from '../../styles/colors';
-import { alignCenter, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
+import theme from '../../theme/settings';
+import { alignCenter, alignStart, backgroundTransparent, borderBox, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, inlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from '../../styles/general';
 const {
-  heading3
-} = typography;
-const {
-  system: {
-    active,
-    disabled: systemDisabled
+  colors: {
+    system: {
+      active,
+      disabled: systemDisabled
+    },
+    fill: {
+      disabled: fillDisabled,
+      headerbar,
+      focus,
+      hover,
+      pressed
+    }
   },
-  fill: {
-    disabled: fillDisabled,
-    headerbar,
-    focus,
-    hover,
-    pressed
-  }
-} = colors;
-export const SummaryRootCSS = css`
+  typography: {
+    heading3
+  },
+  spacing
+} = theme;
+export const SummaryRootCSS = background => css`
     ${flexRow};
     ${positionRelative};
     ${justifyBetween};
-    ${alignCenter};
+    ${alignStart};
     ${cursorPointer};
     ${borderBox};
     ${borderRadius4px};
     width: 100%;
     min-height: 56px;
-    padding: 16px 24px;
-    &.background {
-        background-color: ${headerbar};
-    }
+    padding: ${spacing(4)}px ${spacing(6)}px;
+    ${background && `background-color: ${background === true ? headerbar : theme.colors[background] || background};`};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
         ${cursorPointer};
@@ -47,8 +47,7 @@ export const SummaryRootCSS = css`
         ${flexRow};
         .Accordion-Icon.rotate-able {
             ${borderBox};
-            width: 24px;
-            height: 24px;
+            ${parseWidthHeight(24, 24)};
             &:not(.TreeView) {
                 transform: rotateZ(0deg);
                 transform-origin: center;
@@ -62,7 +61,7 @@ export const SummaryRootCSS = css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            margin-right: 8px;
+            margin-right: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -70,7 +69,7 @@ export const SummaryRootCSS = css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            margin-left: 8px;
+            margin-left: ${spacing(2)}px;
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -144,8 +143,7 @@ export const SummaryRootCSS = css`
         ${displayInlineBlock};
         ${positionRelative};
         ${cursorPointer};
-        width: 24px;
-        height: 24px;
+        ${parseWidthHeight(24, 24)};
         transition: transform 200ms linear;
         .Accordion-Expand-Icon {
             transform: scale(1);
@@ -169,7 +167,6 @@ export const SummaryRootCSS = css`
             max-width: 34px;
             min-height: 24px;
             max-height: 34px;
-            padding: 3px;
         }
     }
 `;

package/components/accordion/details.js

@@ -5,16 +5,18 @@ import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderBox, displayBlock, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
-import { typography } from '../../styles/typography';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  paragraph1
-} = typography;
-const {
-  text: {
-    main
-  }
-} = colors;
+  colors: {
+    text: {
+      main
+    }
+  },
+  typography: {
+    paragraph1
+  },
+  spacing
+} = theme;
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   className,
@@ -52,7 +54,7 @@ const DetailsRootCSS = css`
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
         ${paragraph1};
-        padding: 0 24px 16px 24px;
+        padding: 0 ${spacing(6)}px ${spacing(4)}px ${spacing(6)}px;
         color: ${main};
         &.disabled {
             ${pointerEventsNone}
@@ -66,13 +68,13 @@ AccordionDetails.defaultProps = {
   id: ''
 };
 AccordionDetails.propTypes = {
-  /** The element to display in alert like text props (priority) */
+  /** The content of the component. */
   children: PropTypes.node,
 
-  /** class for De */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** style inline of component */
-  style: PropTypes.object
+  /** Class for component. */
+  className: PropTypes.string
 };
 export default AccordionDetails;

package/components/accordion/group.js

@@ -41,10 +41,10 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ref: ref,
       style: style,
       className: ['DGN-UI-Accordion-Group', className].join(' ').trim().replace(/\s+/g, ' ')
-    }, Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+    }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
       onExpand: e => onCollapseOther(e, child.props.onExpand)
     })));
-  }, [className, children]);
+  }, [style, className, children]);
 }));
 const AccordionGroupRootCSS = css`
     ${borderRadius4px};
@@ -113,16 +113,16 @@ AccordionGroup.defaultProps = {
   style: {}
 };
 AccordionGroup.propTypes = {
-  /** collapse other if true */
-  collapseOther: PropTypes.bool,
+  /** The content of the component. */
+  children: PropTypes.node,
 
-  /** class on element */
-  className: PropTypes.string,
+  /** Style inline of component. */
+  style: PropTypes.object,
 
-  /** insist <Accordion /> */
-  children: PropTypes.node.isRequired,
+  /** Class for component. */
+  className: PropTypes.string,
 
-  /** style inline of component */
-  style: PropTypes.object
+  /** If `true`, collapse other when expand */
+  collapseOther: PropTypes.bool
 };
 export default AccordionGroup;

package/components/accordion/index.js

@@ -7,13 +7,16 @@ import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
 import Divider from '../divider';
 import { borderRadius4px, displayBlock, positionRelative } from '../../styles/general';
-import { color as colors } from '../../styles/colors';
+import theme from '../../theme/settings';
 const {
-  line: {
-    category
+  colors: {
+    line: {
+      category
+    }
   }
-} = colors;
+} = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   disabled,
   expand,
   expanded,
@@ -57,6 +60,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
+      id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
@@ -78,7 +82,7 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [id, disabled, className, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};
@@ -102,31 +106,31 @@ Accordion.defaultProps = {
   style: {}
 };
 Accordion.propTypes = {
-  /** prevent all event if true */
+  /** The content of the component (insist <AccordionSummary />, <AccordionDetails />). */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** If `true`, the component is disabled. */
   disabled: PropTypes.bool,
 
-  /** expand immediate after render if true (don't use this) */
+  /** If `true`, expand immediate after render (shouldn't use this). */
   expand: PropTypes.bool,
 
-  /** expand state of accordion (use this) */
+  /** Expand state of accordion (should use this). */
   expanded: PropTypes.bool,
 
-  /** class on element */
-  className: PropTypes.string,
-
-  /** class on element */
+  /** The box-shadow of component. */
   boxShadow: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** The function will run after expand Accordion detail */
+  /** Callback fired when Accordion is expanded. */
   onExpand: PropTypes.func,
 
-  /** The function will run after collapse Accordion detail */
-  onCollapse: PropTypes.func,
-
-  /** insist <AccordionSummary />, <AccordionDetails /> */
-  children: PropTypes.node,
-
-  /** style inline of component */
-  style: PropTypes.object
+  /** Callback fired when Accordion is collapsed. */
+  onCollapse: PropTypes.func
 };
 export default Accordion;

package/components/accordion/summary.js

@@ -8,6 +8,7 @@ import { renderIcon } from '../../utils';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
   expandIcon,
   collapseIcon,
   expandIconAt,
@@ -18,9 +19,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   expandIconProps,
   style
 }, reference) => {
-  const ref = useRef(null);
-  const expandIconRef = useRef(null);
-  const timer = useRef(null);
   const {
     expanded,
     expandState,
@@ -30,8 +28,13 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onCollapse,
     setExpandState
   } = useContext(AccordionContext);
+  const ref = useRef(null);
+  const expandIconRef = useRef(null);
+  const timer = useRef(null);
 
-  const onClickHandler = e => {
+  const _SummaryRootCSS = SummaryRootCSS(background);
+
+  const _onClick = e => {
     if (!disabled) {
       const target = e.target;
 
@@ -93,19 +96,6 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useEffect(() => {
-    if (/^(#|rgb)/.test(background)) {
-      if (ref.current) {
-        ref.current.style.backgroundColor = background;
-      }
-
-      return () => {
-        if (ref.current) {
-          ref.current.style.backgroundColor = null;
-        }
-      };
-    }
-  }, [background]);
   useEffect(() => {
     if (expandState) {
       showHideDetailHandler('show');
@@ -124,19 +114,20 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
-      css: SummaryRootCSS,
+      id: id,
+      css: _SummaryRootCSS,
       ref: ref,
       tabIndex: "-1",
-      onClick: onClickHandler,
+      onClick: _onClick,
       style: style,
-      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', className, background === true ? 'background' : '', expandState ? 'expanding' : ''].join(' ').trim().replace(/\s+/g, ' ')
+      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
     }, children), !!expandIcon && jsx("div", {
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
-      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim()
+      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
     }, typeof expandIcon === 'string' ? renderIcon(expandIcon, 'effect', {
       className: 'Accordion-Expand-Icon'
     }) : jsx("span", {
@@ -146,7 +137,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
+  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, expandState]);
 }));
 AccordionSummary.defaultProps = {
   expandIconAt: 'start',
@@ -156,28 +147,28 @@ AccordionSummary.defaultProps = {
   style: {}
 };
 AccordionSummary.propTypes = {
-  /** the icon to display for expand icon */
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** Icon display for expand icon. */
   expandIcon: PropTypes.any,
 
-  /** the icon to display for collapse icon */
+  /** Icon display for collapse icon. */
   collapseIcon: PropTypes.any,
 
-  /** the position to render expand icon */
+  /** Position to render icon. */
   expandIconAt: PropTypes.oneOf(['start', 'end']),
 
-  /** background for label summary */
+  /** Background for label summary. */
   background: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 
-  /** class for Summary component */
-  className: PropTypes.string,
-
-  /** The element to display in alert like text props (priority) */
-  children: PropTypes.node,
-
-  /** props of expand and collapse icons */
-  expandIconProps: PropTypes.any,
-
-  /** style inline of component */
-  style: PropTypes.object
+  /** Other props of icons. */
+  expandIconProps: PropTypes.any
 };
 export default AccordionSummary;

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

@@ -1327,7 +1327,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     ...labelProps
   }, label) : null, [label, required, disabled, labelProps]);
   const inputComp = useMemo(() => {
-    const _InputCSS = InputCSS(multiple, renderSelectedItem, clearAble);
+    const _InputCSS = InputCSS(multiple, renderSelectedItem);
 
     const _DropdownFormCSS = DropdownFormCSS(viewType, multiple, placeholder, itemMultipleSize, renderSelectedItem, disabled);
 
@@ -1422,10 +1422,10 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }));
 /* Start styled */
 
-const InputCSS = (multiple, renderSelectedItem, clearAble) => css`
+const InputCSS = (multiple, renderSelectedItem) => css`
     ${flexRow};
     width: 100%;
-    ${!multiple && renderSelectedItem ? `width: calc(100% - 34px${clearAble ? ' - 18px' : ''})` : ''}
+    ${!multiple && renderSelectedItem ? `width: calc(100% - 34px)` : ''}
 `;
 
 const DropdownIconCSS = css`

package/components/grid/Col.js

@@ -0,0 +1,63 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import Grid from '.';
+
+const Col = props => {
+  return jsx(Grid, { ...props,
+    item: true
+  });
+};
+
+Col.defaultProps = {
+  style: {},
+  className: '',
+  columns: 12,
+  lg: false,
+  md: false,
+  sm: false,
+  xl: false,
+  xs: false,
+  zeroMinWidth: false,
+  wrap: 'wrap'
+};
+Col.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** The number of columns. */
+  columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
+  /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+  lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+  md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+  sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+  xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+  xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+  zeroMinWidth: PropTypes.bool
+};
+export default Col;

package/components/grid/Row.js

@@ -0,0 +1,75 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import Grid from '.';
+
+const Row = props => {
+  return jsx(Grid, { ...props,
+    container: true
+  });
+};
+
+Row.defaultProps = {
+  style: {},
+  className: '',
+  columns: 12,
+  lg: false,
+  md: false,
+  sm: false,
+  xl: false,
+  xs: false,
+  zeroMinWidth: false,
+  spacing: 0,
+  direction: 'row',
+  wrap: 'wrap',
+  columnSpacing: 4
+};
+Row.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** The number of columns. */
+  columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
+  /** Defines the horizontal space between the type `Col` components. It overrides the value of the `spacing` prop. */
+  columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+  lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+  md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the vertical space between the type `Col` components. It overrides the value of the `spacing` prop. */
+  rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+  sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the space between the type `Col` components */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+  xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+  xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+  zeroMinWidth: PropTypes.bool
+};
+export default Row;

package/components/grid/context.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const GridContext = /*#__PURE__*/createContext();
+export default GridContext;

package/components/grid/index.js

@@ -0,0 +1,260 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { memo, useContext, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css } from '@emotion/core';
+import GridContext from './context';
+import theme from '../../theme/settings';
+import { breakpointKeys } from '../../theme/createBreakpoints';
+import { borderBox } from '../../styles/general';
+const {
+  breakpoints: themeBreakpoints,
+  spacing: themeSpacing
+} = theme;
+const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  id,
+  style,
+  className,
+  children,
+  columns: columnsProp,
+  columnSpacing: columnSpacingProp,
+  container,
+  direction,
+  item,
+  lg,
+  md,
+  rowSpacing: rowSpacingProp,
+  sm,
+  spacing,
+  wrap,
+  xl,
+  xs,
+  zeroMinWidth
+}, reference) => {
+  const columnsContext = useContext(GridContext);
+  const rowSpacing = rowSpacingProp || spacing;
+  const columnSpacing = columnSpacingProp || spacing;
+  const columns = container ? columnsProp : columnsContext;
+  const ref = useRef(null);
+
+  const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap);
+
+  const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing);
+
+  const _HandleGridCSS = HandleGridCSS([xs, sm, md, lg, xl], columns);
+
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    const _instance = {}; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+  return useMemo(() => {
+    return jsx("div", {
+      id: id,
+      ref: ref,
+      css: [_GridCSS, container && (rowSpacing || columnSpacing) && _GridSpacingCSS, _HandleGridCSS],
+      style: style,
+      className: [`DGN-UI-Grid${item ? '-item' : ''}`, className].join(' ').trim().replace(/\s+/g, ' ')
+    }, jsx(GridContext.Provider, {
+      value: columns
+    }, children));
+  }, [id, container, item, direction, wrap, rowSpacing, columnSpacing, xs, sm, md, lg, xl, spacing, zeroMinWidth, className, columns, children]);
+}));
+
+const getOffset = val => {
+  const parse = parseFloat(val);
+  return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
+};
+
+const handleBreakpoints = (propValue, cssFromPropValue) => {
+  let output = '';
+
+  if (Array.isArray(propValue)) {
+    propValue.map((item, index) => {
+      output = output.concat([themeBreakpoints.up(breakpointKeys[index])]).concat(`{${cssFromPropValue(propValue[index])}} `);
+    });
+    return output;
+  }
+
+  if (typeof propValue === 'object') {
+    Object.keys(propValue).map(item => {
+      if (breakpointKeys.includes(item)) {
+        output = output.concat([themeBreakpoints.up(item)]).concat(`{${cssFromPropValue(propValue[item])}} `);
+      }
+    });
+    return output;
+  }
+
+  output = cssFromPropValue(propValue);
+  return output;
+};
+
+const progessSizeArray = sizeArr => {
+  let lastValue = false;
+  sizeArr = sizeArr.map(item => {
+    if (item === false) return lastValue;else lastValue = item;
+    return item;
+  });
+  return sizeArr;
+};
+
+const handleGrid = (size, value, columns) => {
+  let css = '';
+
+  if (value === true) {
+    css = `
+            flex-basis: 0;
+            flex-grow: 1;
+            max-width: 100%;
+        `;
+  } else if (value === 'auto') {
+    css = `
+            flex-basis: auto;
+            flex-grow: 0;
+            flex-shrink: 0;
+            max-width: none;
+            width: auto;
+        `;
+  } else if (typeof value === 'number' && value !== 0) {
+    css = handleBreakpoints(columns, propValue => {
+      return `
+            flex-basis: ${Math.round(value / propValue * 10e7) / 10e5}%;
+            flex-grow: 0;
+            max-width: ${Math.round(value / propValue * 10e7) / 10e5}%;
+        `;
+    });
+  }
+
+  return `${themeBreakpoints.up(size)} {
+        ${css}
+    }`;
+};
+
+const GridCSS = (direction, zeroMinWidth, container, item, wrap) => css`
+    ${borderBox};
+    ${container && `
+        display: flex;
+        flex-wrap: ${wrap};
+        width: 100%;
+    `};
+    ${item && `
+        margin: 0;
+    `};
+    ${zeroMinWidth && `min-width: 0;`}
+    ${handleBreakpoints(direction, propValue => {
+  return `flex-direction: ${propValue}`;
+})};
+`;
+
+const GridSpacingCSS = (rowSpacing, columnSpacing) => css`
+    ${rowSpacing && handleBreakpoints(rowSpacing, propValue => {
+  const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
+  if (spacing !== '0px') {
+    return `
+            margin-top: -${getOffset(spacing)};
+            & > .DGN-UI-Grid-item {
+                padding-top: ${getOffset(spacing)};
+            }
+            `;
+  }
+
+  return '';
+})};
+    ${columnSpacing && handleBreakpoints(columnSpacing, propValue => {
+  const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
+  if (spacing !== '0px') {
+    return `
+                width: calc(100% + ${getOffset(spacing)});
+                margin-left: -${getOffset(spacing)};
+                & > .DGN-UI-Grid-item {
+                padding-left: ${getOffset(spacing)};
+            }
+            `;
+  }
+
+  return '';
+})};
+`;
+
+const HandleGridCSS = (sizeArr, columns) => css`
+    ${progessSizeArray(sizeArr).map((item, idx) => {
+  return handleGrid(breakpointKeys[idx], item, columns);
+})}
+`;
+
+Grid.defaultProps = {
+  style: {},
+  className: '',
+  columns: 12,
+  container: false,
+  item: false,
+  lg: false,
+  md: false,
+  sm: false,
+  xl: false,
+  xs: false,
+  zeroMinWidth: false,
+  spacing: 0,
+  direction: 'row',
+  wrap: 'wrap'
+};
+Grid.propTypes = {
+  /** The content of the component. */
+  children: PropTypes.node,
+
+  /** Style inline of component. */
+  style: PropTypes.object,
+
+  /** Class for component. */
+  className: PropTypes.string,
+
+  /** The number of columns. */
+  columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
+  /** Defines the horizontal space between the type `item` components. It overrides the value of the `spacing` prop. */
+  columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** If true, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. */
+  container: PropTypes.bool,
+
+  /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
+  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
+  /** If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. */
+  item: PropTypes.bool,
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
+  lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
+  md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the vertical space between the type `item` components. It overrides the value of the `spacing` prop. */
+  rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
+  sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** Defines the space between the type `item` components. It can only be used on a type `container` component. */
+  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
+  /** Defines the flex-wrap style property. It's applied for all screen sizes. */
+  wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
+  xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
+  xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
+  /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
+  zeroMinWidth: PropTypes.bool
+};
+export default Grid;

package/components/index.js

@@ -53,7 +53,11 @@ export { default as HelperText } from './form-control/helper-text';
 export { default as TextInput } from './form-control/text-input';
 export { default as MoneyInput } from './form-control/money-input';
 export { default as NumberInput } from './form-control/number-input/index2';
-export { default as Toggle } from './form-control/toggle'; // List
+export { default as Toggle } from './form-control/toggle'; // Grid
+
+export { default as Grid } from './grid';
+export { default as Row } from './grid/Row';
+export { default as Col } from './grid/Col'; // List
 
 export { default as List } from './list/list';
 export { default as ListItem } from './list/list-item';

package/components/tree-view/css.js

@@ -7,6 +7,7 @@ export const TreeViewRootCSS = css`
     .DGN-UI-Accordion {
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
+            ${alignCenter};
             min-height: 40px;
             padding: 0;
             border-radius: 0;

package/components/typography/index.js

@@ -158,16 +158,16 @@ Typography.defaultProps = {
   hoverTooltip: false,
   tooltipDirection: 'bottom'
 };
-/** type of text<br/>
- * h1: Title <br/>
- * h2: Header Popup <br/>
- * h3: Header popup <br/>
- * h4: Button, Tab, Title group <br/>
- * h5: Label column, Title group <br/>
- * h6: Label form <br/>
- * p1: Body text <br/>
- * p2: Body text <br/>
- * p3: Notice, Tooltip <br/>
+/** type of text<br/>
+ * h1: Title <br/>
+ * h2: Header Popup <br/>
+ * h3: Header popup <br/>
+ * h4: Button, Tab, Title group <br/>
+ * h5: Label column, Title group <br/>
+ * h6: Label form <br/>
+ * p1: Body text <br/>
+ * p2: Body text <br/>
+ * p3: Notice, Tooltip <br/>
  */
 
 export const arrTypeTypography = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.47-beta.1",
+  "version": "1.3.47-beta.4",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",

package/styles/general.js

@@ -16,13 +16,16 @@ export const zIndex = number => {
   return rootZIndex + number;
 };
 /**
- * get value spacing with rooSpacing
- * @param vl - default 1
- * @returns {number}
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
-  return Number(vl) * rootSpacing;
+  if (typeof vl === 'number') return Number(vl) * rootSpacing;else if (Array.isArray(vl)) {
+    if (vl.length > 4) vl.length = 4;
+    return `${vl.flatMap(i => Number(i !== null && i !== void 0 ? i : 0) * rootSpacing).join('px ')}px`;
+  }
 };
 /**
  * replace rootZIndex

package/theme/createBreakpoints.js

@@ -0,0 +1,94 @@
+// Sorted ASC by size. That's important.
+// It can't be configured as it's used statically for propTypes.
+export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+const sortBreakpointsValues = values => {
+  const breakpointsAsArray = Object.keys(values).map(key => ({
+    key,
+    val: values[key]
+  })) || []; // Sort in ascending order
+
+  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
+  return breakpointsAsArray.reduce((acc, obj) => {
+    return { ...acc,
+      [obj.key]: obj.val
+    };
+  }, {});
+}; // Keep in mind that @media is inclusive by the CSS specification.
+
+
+const createBreakpoints = breakpoints => {
+  const {
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    values = {
+      xs: 0,
+      // extra-small
+      sm: 600,
+      // small
+      md: 900,
+      // medium
+      lg: 1200,
+      // large
+      xl: 1536 // extra-large
+
+    },
+    unit = 'px',
+    step = 5,
+    ...other
+  } = breakpoints;
+  const sortedValues = sortBreakpointsValues(values);
+  const keys = Object.keys(sortedValues);
+
+  const up = key => {
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (min-width:${value}${unit})`;
+  };
+
+  const down = key => {
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (max-width:${value - step / 100}${unit})`;
+  };
+
+  const between = (start, end) => {
+    const endIndex = keys.indexOf(end);
+    return `@media (min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
+  };
+
+  const only = key => {
+    if (keys.indexOf(key) + 1 < keys.length) {
+      return between(key, keys[keys.indexOf(key) + 1]);
+    }
+
+    return up(key);
+  };
+
+  const not = key => {
+    // handle first and last key separately, for better readability
+    const keyIndex = keys.indexOf(key);
+
+    if (keyIndex === 0) {
+      return up(keys[1]);
+    }
+
+    if (keyIndex === keys.length - 1) {
+      return down(keys[keyIndex]);
+    }
+
+    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
+  };
+
+  return {
+    keys,
+    values: sortedValues,
+    up,
+    down,
+    between,
+    only,
+    not,
+    unit,
+    ...other
+  };
+};
+
+export default createBreakpoints;

package/theme/make-styles.js

@@ -1,8 +1,10 @@
 import { css } from '@emotion/core';
 import theme from './settings';
-export const makeStylesEls = [];
+export let makeStylesEls = [];
 
 const makeStyle = obj => {
+  makeStylesEls = [];
+
   if (typeof obj === 'function') {
     obj = obj(theme);
   }

package/theme/settings.js

@@ -9,6 +9,7 @@ const {
   fontFamilyMedium
 } = font;
 import { typography as typographies } from '../styles/typography';
+import createBreakpoints from './createBreakpoints';
 const settings = {
   border: {
     radius: '4px',
@@ -55,53 +56,22 @@ const settings = {
     },
     ...typographies
   },
-  breakpoints: {
+  breakpoints: createBreakpoints({
     values: {
       xs: 0,
+      // extra-small
       sm: 600,
-      md: 960,
-      lg: 1280,
-      xl: 1920
-    },
-    down: value => getMedia(value, 'max'),
-    up: value => getMedia(value, 'min'),
-    only: value => getMedia(value, 'min', value),
-    between: (start, end) => getMedia(start, 'min', end)
-  },
+      // small
+      md: 900,
+      // medium
+      lg: 1200,
+      // large
+      xl: 1536 // extra-large
+
+    }
+  }),
   spacing: vl => getSpacing(vl),
   zIndex: vl => zIndex(vl),
   setZIndex: vl => setZIndex(vl)
 };
-
-const getMedia = (value, type, value2 = '') => {
-  const values = settings.breakpoints.values;
-  let px1,
-      px2 = '';
-
-  if (typeof value === 'number') {
-    px1 = value + 'px'; // eslint-disable-next-line no-constant-condition
-  } else if (/^xs|sm|md|lg|xl$/) {
-    px1 = values[value] - (type === 'max' ? 0.05 : 0) + 'px';
-  }
-
-  if (value2) {
-    const keys = Object.keys(values);
-
-    if (value2 === value) {
-      // only
-      value2 = values[keys[keys.indexOf(value) + 1]] - 0.05 + 'px';
-    } else {
-      if (typeof value2 === 'number') {
-        value2 += 'px'; // eslint-disable-next-line no-constant-condition
-      } else if (/^xs|sm|md|lg|xl$/) {
-        value2 = values[keys[keys.indexOf(value2) + 1]] - 0.05 + 'px';
-      }
-    }
-
-    px2 = ` and (max-width: ${value2})`;
-  }
-
-  return `@media (${type}-width: ${px1}${px2})`;
-};
-
 export default settings;