diginet-core-ui 1.3.66 → 1.3.68

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

@@ -101,9 +101,12 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   labelProps,
   errorStyle,
   children,
-  dropdownItemStyle
+  dropdownItemStyle,
+  searchExpr,
+  searchMode
 }, reference) => {
   if (multiple && selectBox === undefined) selectBox = true;
+  if (typeof searchExpr === 'string') searchExpr = [searchExpr];
   const ref = useRef(null);
   const dropdownRef = useRef(null);
   const loadingProgressRef = useRef(null);
@@ -122,6 +125,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }));
   const [openState, setOpenState] = useState(false);
   const [showClear, setShowClear] = useState(false);
+  const [textValue, setTextValue] = useState('');
 
   const _isMobile = isMobile.any();
 
@@ -169,6 +173,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const onClickInput = e => {
+    if (disabled || readOnly || loading) return;
+
     if (!dropdownListRef.current) {
       if (!multiple || !Array.from(inputRef.current.querySelectorAll('.DGN-UI-Chip')).some(item => item.contains(e === null || e === void 0 ? void 0 : e.target))) {
         if ((typeof renderSelectedItem === 'function' || iconExpr && iconExpr !== 'none') && !multiple) {
@@ -231,7 +237,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const dropdownHeight = Math.min(Math.max(1, (itemMode === 'normal' ? dropdown.props.children : mapParent(dataSource, treeViewID, treeViewParentID)).length || 1), 7) * 40 + (multiple ? 43 : 0);
     let positionTop = top + height + 4;
 
-    if (top + height + 4 + dropdownHeight > innerHeight) {
+    if (top + height + 4 + dropdownHeight + (allowSearch ? 40 : 0) > innerHeight) {
       if (top - dropdownHeight > 0) {
         positionTop = top - dropdownHeight;
       } else {
@@ -387,6 +393,29 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
+  const handleRenderBySearch = (data, searchValue) => {
+    let existExpr = [];
+    typeof data === 'object' ? existExpr = searchExpr.filter(value => Object.keys(data).includes(value)) : existExpr = [data];
+    return existExpr.every(key => {
+      // return searchByMode(data?.[key] || key.toString(), searchValue);
+      const _data = (data === null || data === void 0 ? void 0 : data[key]) || key.toString();
+
+      if (searchMode === 'contains') {
+        if (_data.indexOf(searchValue) !== -1) return false;
+      }
+
+      if (searchMode === 'startswith') {
+        if (_data.lastIndexOf(searchValue) === 0) return false;
+      }
+
+      if (searchMode === 'equals') {
+        if (_data == searchValue) return false;
+      }
+
+      return true;
+    });
+  };
+
   const mapDropdown = (pattern, keyArr) => {
     var _currentObjectDefault;
 
@@ -414,9 +443,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const length = dataSourceUsable.length;
 
     for (let index = 0; index < length; index++) {
+      var _searchExpr;
+
       const data = dataSourceUsable[index];
+      const itemHidden = typeof data === 'object' ? data['hidden'] : false;
+      if (itemHidden) continue;
       let displayText = typeof data === 'object' ? keyArr ? renderData(data, keyArr) : data[displayExpr] || data[valueExpr] : data;
-      if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
+
+      if (((_searchExpr = searchExpr) === null || _searchExpr === void 0 ? void 0 : _searchExpr.length) > 0 && pattern) {
+        if (handleRenderBySearch(data, pattern)) continue;
+      } else if (pattern && !new RegExp(pattern).test(displayText.normalize())) continue;
 
       if (renderItem && typeof renderItem === 'function') {
         displayText = renderItem({
@@ -785,11 +821,13 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     if (timing[unique]) clearTimeout(timing[unique]);
     timing[unique] = setTimeout(() => {
+      var _searchExpr2;
+
       // if (timerRef.current) {
       //     clearTimeout(timerRef.current);
       //     timerRef.current = null;
       // }
-      renderDropdown(new RegExp(value.normalize(), 'gim'));
+      renderDropdown(((_searchExpr2 = searchExpr) === null || _searchExpr2 === void 0 ? void 0 : _searchExpr2.length) > 0 ? value.normalize() : new RegExp(value.normalize(), 'gim'));
     }, timeout.current || searchDelayTime);
   };
 
@@ -931,6 +969,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     } else {
       inputRef.current.value = '';
+      setTextValue('');
     } // onChangeValue('', '');
 
 
@@ -962,6 +1001,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           inputRef.current.innerHTML = '';
         } else if (!isSearch[unique]) {
           inputRef.current.value = '';
+          setTextValue('');
         }
 
         currentValue[unique] = '';
@@ -1093,6 +1133,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       ReactDOM.render(valueWithIcon, inputRef.current.appendChild(el));
     } else {
       inputRef.current.value = text;
+      setTextValue(text);
     }
   };
 
@@ -1325,14 +1366,26 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return false;
         }
       }
-    }) : jsx("input", { ...inputProps,
-      style: inputStyle,
+    }) : jsx(Fragment, null, jsx("input", { ...inputProps,
+      style: openState || !textValue ? inputStyle : { ...inputStyle,
+        visibility: 'hidden'
+      },
       ref: inputRef,
       css: _DropdownInputCSS,
       type: "text",
       placeholder: placeholder,
-      disabled: disabled || openState && allowSearch
-    })), jsx("div", {
+      disabled: disabled || allowSearch
+    }), !openState && textValue && jsx(Typography, {
+      hoverTooltip: true,
+      lineClamp: 1,
+      type: 'p1',
+      css: _DropdownInputCSS,
+      style: {
+        position: 'absolute',
+        lineHeight: '24px'
+      },
+      onClick: onClickInput
+    }, textValue))), jsx("div", {
       ref: iconRef,
       css: _IconCSS,
       className: 'DGN-UI-Dropdown-Icon'
@@ -1356,7 +1409,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       },
       disabled: disabled || readOnly
     })));
-  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear]);
+  }, [viewType, inputProps, inputStyle, multiple, clearAble, onChange, disabled, readOnly, loading, renderSelectedItem, placeholder, itemMultipleSize, openState, showClear, textValue]);
   const ErrorView = useMemo(() => error && jsx(HelperText, {
     disabled: disabled,
     style: {
@@ -1382,6 +1435,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
 const InputCSS = (multiple, renderSelectedItem) => css`
     ${flexRow};
+    ${positionRelative};
     width: 100%;
     ${!multiple && renderSelectedItem ? `width: calc(100% - 34px)` : ''}
 `;
@@ -1757,7 +1811,8 @@ Dropdown.defaultProps = {
   inputProps: {},
   formStyle: {},
   dataSource: [],
-  onInput: null
+  onInput: null,
+  searchMode: 'contains'
 };
 Dropdown.propTypes = {
   /**The variant to use. */
@@ -1928,6 +1983,12 @@ Dropdown.propTypes = {
   /** The contents in Dropdown box (Exp: TreeView). */
   children: PropTypes.node,
 
+  /** Specifies a data object's field name or an expression whose value is compared to the search string. */
+  searchExpr: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+
+  /** Specifies a comparison operation used to search items. */
+  searchMode: PropTypes.oneOf(['contains', 'startswith', 'equals']),
+
   /**
    * ref methods
    *

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

@@ -28,7 +28,8 @@ const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   className,
   style,
   children,
-  id
+  id,
+  ...props
 }, ref) => {
   const color = colorMap.get(status);
   return jsx(Typography, {
@@ -40,7 +41,8 @@ const HelperText = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: HelperTextRootCSS,
     className: ['DGN-UI-HelperText', className].join(' ').trim().replace(/\s+/g, ' '),
     style: style,
-    lineClamp: 1
+    lineClamp: 1,
+    ...props
   }, typeof children === 'boolean' ? getGlobal('thisFieldIsRequired') : children);
 }));
 const HelperTextRootCSS = css`
@@ -67,6 +69,9 @@ HelperText.propTypes = {
   style: PropTypes.object,
 
   /** Content to display in component. */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+
+  /** [Props](https://core.diginet.com.vn/ui/?path=/docs/typography) of Typography */
+  props: PropTypes.any
 };
 export default HelperText;

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

@@ -45,20 +45,24 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onKeyDown,
   onKeyUp,
   delayOnChange,
+  autoWidth,
   ...props
 }, reference) => {
+  const _onChange = e => {
+    onChange && onChange(e);
+    dynamicWidth(e);
+  };
+
   const {
     bind
-  } = useInput({
-    defaultValue,
-    valueProp,
-    onChange,
-    onInput,
-    delayOnChange
-  });
+  } = useInput(defaultValue, valueProp, _onChange, onInput, delayOnChange);
+  if (!autoWidth && inputProps !== null && inputProps !== void 0 && inputProps.autoWidth) autoWidth = inputProps.autoWidth;
   if (!inputBaseRef) inputBaseRef = useRef(null);
   const ref = useRef(null);
   const valueArray = useRef([]);
+  const canvas = document.createElement('canvas');
+  const styleInputBase = useRef(null);
+  const widthInit = useRef(null);
   const isEnabled = !readOnly && !disabled;
   /* Start styled */
 
@@ -68,6 +72,7 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 align-items: center;
                 position: relative;
                 height: max-content;
+                width: ${autoWidth ? 'max-content' : 'auto'};
                 &:hover,
                 &:focus-within {
                     .start-icon:not(.non-effect) {
@@ -231,9 +236,10 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
                 flex: 1 1 auto;
             `;
   const inputCSS = css`
-                width: 100%;
+                width: ${autoWidth ? '10px' : '100%'};
                 border: none;
                 outline: none;
+                transition: all 0.1s;
                 color: ${colors.input};
                 background-color: transparent;
                 padding-top: 0;
@@ -507,6 +513,12 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (multiline && !/\d+/.test(rows)) {
         inputBaseRef.current.style.height = 0;
         inputBaseRef.current.style.height = Math.max(defaultHeight, inputBaseRef.current.scrollHeight) + 'px';
+      } else {
+        dynamicWidth({
+          target: {
+            value: valueProp
+          }
+        });
       }
     }
 
@@ -532,8 +544,27 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, [disabled]);
   /* End handler */
 
+  const saveInitInfo = refs => {
+    inputBaseRef.current = refs;
+    if (!autoWidth) return;
+    const style = window.getComputedStyle(refs) || refs.currentStyle;
+    if (!widthInit.current) widthInit.current = parseInt(style.width);
+    styleInputBase.current = style;
+  };
+
+  const dynamicWidth = e => {
+    if (!autoWidth || !inputBaseRef.current) return;
+    if (!canvas || !styleInputBase.current || !inputBaseRef.current) return;
+    const context = canvas.getContext('2d');
+    context.font = styleInputBase.current.font;
+    const {
+      width
+    } = context.measureText(e.target.value);
+    inputBaseRef.current.style.width = `${Math.max(width, widthInit.current)}px`;
+  };
   /* Start component */
 
+
   const newClass = (viewType === 'outlined' ? 'outlined' : 'underlined') + (nonStyle ? ' non-style' : '');
   const MultipleInputComp = jsx("div", {
     css: multilineCSS,
@@ -605,7 +636,10 @@ const InputBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     readOnly: readOnly,
     style: inputStyle || (inputProps === null || inputProps === void 0 ? void 0 : inputProps.style),
     className: [newClass, inputProps === null || inputProps === void 0 ? void 0 : inputProps.className].join(' '),
-    ref: inputBaseRef,
+    ref: refs => {
+      if (!refs) return;
+      saveInitInfo(refs);
+    },
     css: inputCSS,
     onKeyDown: onKeyDown,
     onKeyUp: onKeyUp,
@@ -744,6 +778,9 @@ InputBase.propTypes = {
   inputRef: PropTypes.any,
 
   /** delayOnChange of InputBase component */
-  delayOnChange: PropTypes.number
+  delayOnChange: PropTypes.number,
+
+  /** autoWidth of TextInput component, don't run with multiline = true */
+  autoWidth: PropTypes.bool
 };
 export default InputBase;

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

@@ -123,6 +123,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   convertToWords,
   prefix,
   suffix,
+  labelProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -418,7 +419,7 @@ const MoneyInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: MoneyInputRoot,
     className: ['DGN-UI-Money-Input', className].join(' ').trim().replace(/\s+/g, ' '),
     ...props
-  }, !!label && jsx(Label, {
+  }, !!label && jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -581,6 +582,9 @@ MoneyInput.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of MoneyInput component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default MoneyInput;

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

@@ -578,23 +578,23 @@ NumberInput.propTypes = {
   /** style inline of input in NumberInput component */
   inputStyle: PropTypes.object,
 
-  /**
-   * the format to display value<br/>
-   * * function: value => function(value)<br/>
-   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
+  /**
+   * the format to display value<br/>
+   * * function: value => function(value)<br/>
+   * * string: Example: '#.###', '# ###', '#.### 2%', '#.### %%'<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;#: integer part digit<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;. / '_': separator symbol<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;%: decimal digit, '2%' === '%%'
    */
   format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
 
   /** The function to get ref of NumberInput component */
   refs: 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/number-input/index2.js

@@ -51,7 +51,9 @@ const NumberInput = /*#__PURE__*/forwardRef(({
   delayOnChange,
   fixedDecimalDigit,
   className,
-  maxDigit
+  maxDigit,
+  autoWidth,
+  labelProps
 }, reference) => {
   inputRef = inputRef || useRef(null);
   const pos = useRef(null);
@@ -156,7 +158,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     let value = (_e$value = e.value) !== null && _e$value !== void 0 ? _e$value : e.target.value;
     if (fixedDecimalDigit) value = Number(value).toFixed(decimalDigit);
 
-    if (value && (typeof min !== 'undefined' || typeof max !== 'undefined')) {
+    if ((value || value === '' && typeof min !== 'undefined') && (typeof min !== 'undefined' || typeof max !== 'undefined')) {
       value = convertMoneyToNumber(value);
 
       if (Number(value) < min || Number(value) > max) {
@@ -269,7 +271,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     ref: ref,
     css: NumberInputRoot,
     className: ['DGN-UI-NumberInput', className].join(' ').trim().replace(/\s+/g, ' ')
-  }, !!label && jsx(Label, {
+  }, !!label && jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -283,6 +285,7 @@ const NumberInput = /*#__PURE__*/forwardRef(({
     readOnly: readOnly,
     status: !!error || validateResult ? 'danger' : 'default',
     inputProps: inputProps,
+    autoWidth: autoWidth,
     inputStyle: inputStyle,
     startIcon: startIcon,
     endIcon: endIcon,
@@ -435,6 +438,12 @@ NumberInput.propTypes = {
   className: PropTypes.string,
 
   /** max character is number of NumberInput component */
-  maxDigit: PropTypes.number
+  maxDigit: PropTypes.number,
+
+  /** autoWidth of TextInput component, don't run with multiline = true */
+  autoWidth: PropTypes.bool,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default NumberInput;

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

@@ -42,6 +42,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onInput,
   onKeyDown,
   onKeyUp,
+  labelProps,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -295,7 +296,7 @@ const PhoneInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       marginBottom: '20px'
     },
     ...props
-  }, jsx(Label, {
+  }, jsx(Label, { ...labelProps,
     required: required,
     disabled: disabled
   }, label), jsx(InputBase, {
@@ -396,13 +397,13 @@ PhoneInput.propTypes = {
   /** on input function */
   onInput: PropTypes.func,
 
-  /**
-   * on change function. Return a object, example:<br/>
-   * {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
-   * }
+  /**
+   * on change function. Return a object, example:<br/>
+   * {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;target: {value: "(+84) 123 456 789", ...}<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;value: 0123456789<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;countryCode: 84<br/>
+   * }
    */
   onChange: PropTypes.func,
 
@@ -413,6 +414,9 @@ PhoneInput.propTypes = {
   onFocus: PropTypes.func,
 
   /** inputRef of PhoneInput component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /**  [Props](https://core.diginet.com.vn/ui/?path=/docs/form-control-text-label) of label. */
+  labelProps: PropTypes.object
 };
 export default PhoneInput;

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

@@ -66,6 +66,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   onKeyUp,
   onPaste,
   validates,
+  autoWidth,
   ...props
 }, reference) => {
   const ref = useRef(null);
@@ -244,11 +245,12 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   }, [error, value]);
   useEffect(() => {
-    if (placeholder !== undefined) {
+    if (placeholder !== undefined && inputRef.current) {
       inputRef.current.placeholder = placeholder;
     }
   }, [placeholder]);
   useEffect(() => {
+    if (!inputRef.current) return;
     inputRef.current.readOnly = !!readOnly;
 
     if (/^(quick)?Edit/i.test(type) && !multiline && readOnly) {
@@ -347,6 +349,7 @@ const TextInput = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     disabled: disabled,
     readOnly: readOnly,
     multiline: multiline,
+    autoWidth: autoWidth,
     rows: rows,
     maxRows: maxRows,
     status: isError || validateResult ? 'danger' : 'default',
@@ -387,7 +390,8 @@ TextInput.defaultProps = {
   disabled: false,
   readOnly: false,
   multiline: false,
-  iconStyle: {}
+  iconStyle: {},
+  autoWidth: false
 };
 TextInput.propTypes = {
   /** type of input */
@@ -500,6 +504,12 @@ TextInput.propTypes = {
   validates: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array, PropTypes.func]),
 
   /** inputRef of TextInput component */
-  inputRef: PropTypes.any
+  inputRef: PropTypes.any,
+
+  /** autoWidth of TextInput component, don't run with multiline = true */
+  autoWidth: PropTypes.bool,
+
+  /** If `true`, a textarea element is rendered. */
+  multiline: PropTypes.bool
 };
 export default TextInput;

package/components/grid/Container.js

@@ -0,0 +1,110 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import PropTypes from 'prop-types';
+import { jsx } from '@emotion/core';
+import Grid from '.';
+
+const checkChildren = children => {
+  if (!children) return false;
+
+  if (Array.isArray(children)) {
+    return !children.every(v => v === false);
+  }
+
+  return true;
+};
+
+const Container = props => {
+  const {
+    className,
+    children
+  } = props;
+  return checkChildren(children) ? jsx(Grid, { ...props,
+    className: ['DGN-UI-Container', className].join(' ').trim().replace(/\s+/g, ' '),
+    container: true
+  }) : null;
+};
+
+Container.defaultProps = {
+  style: {},
+  className: '',
+  columns: 12,
+  lg: false,
+  md: false,
+  sm: false,
+  xl: false,
+  xs: false,
+  zeroMinWidth: false,
+  spacing: 0,
+  direction: 'row',
+  wrap: 'wrap',
+  columnSpacing: {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 6
+  },
+  rowSpacing: {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 4
+  },
+  topSpacing: {
+    xs: 2,
+    sm: 2,
+    md: 2,
+    lg: 2,
+    xl: 2
+  }
+};
+Container.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 Container;

package/components/grid/Row.js

@@ -51,7 +51,7 @@ Row.defaultProps = {
     sm: 4,
     md: 4,
     lg: 4,
-    xl: 6
+    xl: 4
   }
 };
 Row.propTypes = {