diginet-core-ui 1.3.82 → 1.3.83

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

@@ -5,7 +5,7 @@ import { Typography } from "../..";
 import OptionWrapper from "../../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { flexRow, typographyTypes } from "../../../styles/general";
+import { flexRow, parseMinHeight, typographyTypes } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames } from "../../../utils";
 const {
@@ -33,6 +33,7 @@ const Label = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   type,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -71,19 +72,19 @@ const LabelContainerCSS = css`
     }
 `;
 const LabelRootCSS = css`
-    min-height: 16px;
+    ${parseMinHeight(16)};
     margin: 0;
     word-break: break-all;
 `;
 Label.defaultProps = {
-  type: 'h6',
+  children: '',
+  className: '',
   color: normal_label,
-  lineClamp: 1,
-  required: false,
   disabled: false,
+  lineClamp: 1,
   readOnly: false,
-  className: '',
-  children: ''
+  required: false,
+  type: 'h6'
 };
 Label.propTypes = {
   /** The content of the component. */
@@ -99,7 +100,7 @@ Label.propTypes = {
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
   color: PropTypes.string,
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
-  lineClamp: PropTypes.number,
+  lineClamp: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */
   hoverTooltip: PropTypes.bool,
   /** Consult [Typography's](https://core.diginet.com.vn/ui/?path=/docs/typography) documents. */

package/components/grid/Col.js

@@ -1,10 +1,10 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import Grid from '.';
+import PropTypes from 'prop-types';
 import { makeStyles } from "../../theme";
 import { classNames } from "../../utils";
+import Grid from '.';
 const useStyles = makeStyles({
   customCol: {
     '& .DGN-UI-Control': {
@@ -45,6 +45,7 @@ Col.defaultProps = {
   md: false,
   sm: false,
   style: {},
+  verticalAlign: 'auto',
   wrap: 'wrap',
   xl: false,
   xs: true,
@@ -67,6 +68,8 @@ Col.propTypes = {
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
   /** Style inline of component. */
   style: PropTypes.object,
+  /** Self-align of the grid item. */
+  verticalAlign: PropTypes.oneOf(['auto', 'start', 'center', 'end']),
   /** 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. */

package/components/grid/Container.js

@@ -1,9 +1,9 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import Grid from '.';
+import PropTypes from 'prop-types';
 import { classNames } from "../../utils";
+import Grid from '.';
 const checkChildren = children => {
   if (!children) return false;
   if (Array.isArray(children)) {

package/components/grid/Row.js

@@ -1,9 +1,9 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
-import Grid from '.';
+import PropTypes from 'prop-types';
 import { classNames } from "../../utils";
+import Grid from '.';
 const checkChildren = children => {
   if (!children) return false;
   if (Array.isArray(children)) {

package/components/grid/index.js

@@ -1,17 +1,17 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useContext, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
+import { css, jsx } from '@emotion/core';
 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 { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { borderBox } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { breakpointKeys } from "../../theme/createBreakpoints";
 import { classNames, handleBreakpoints } from "../../utils";
+import GridContext from "./context";
 const {
   breakpoints: themeBreakpoints,
   spacing: themeSpacing
-} = theme;
+} = useTheme();
 const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   children,
@@ -30,6 +30,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   spacing,
   style,
   topSpacing: topSpacingProp,
+  verticalAlign,
   wrap,
   xl,
   xs,
@@ -42,7 +43,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const topSpacing = topSpacingProp !== null && topSpacingProp !== void 0 ? topSpacingProp : rowSpacing;
   const leftSpacing = leftSpacingProp !== null && leftSpacingProp !== void 0 ? leftSpacingProp : columnSpacing;
   const ref = useRef(null);
-  const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap);
+  const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap, verticalAlign);
   const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing, topSpacing, leftSpacing);
   const _HandleGridCSS = HandleGridCSS([xs, sm, md, lg, xl], columns);
   useImperativeHandle(reference, () => {
@@ -65,7 +66,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, jsx(GridContext.Provider, {
       value: columns
     }, children));
-  }, [columns, columnSpacing, leftSpacing, rowSpacing, topSpacing, children, className, container, direction, id, item, lg, md, sm, spacing, style, wrap, xl, xs, zeroMinWidth]);
+  }, [columns, columnSpacing, leftSpacing, rowSpacing, topSpacing, children, className, container, direction, id, item, lg, md, sm, spacing, style, verticalAlign, wrap, xl, xs, zeroMinWidth]);
 }));
 const getOffset = val => {
   const parse = parseFloat(val);
@@ -108,7 +109,7 @@ const handleGrid = (size, value, columns) => {
         ${css}
     }`;
 };
-const GridCSS = (direction, zeroMinWidth, container, item, wrap) => css`
+const GridCSS = (direction, zeroMinWidth, container, item, wrap, verticalAlign) => css`
     ${borderBox};
     ${container && `
         display: flex;
@@ -117,6 +118,7 @@ const GridCSS = (direction, zeroMinWidth, container, item, wrap) => css`
     `};
     ${item && `
         margin: 0;
+        align-self: ${verticalAlign}
     `};
     ${zeroMinWidth && `min-width: 0;`}
     ${handleBreakpoints(direction, propValue => {
@@ -182,6 +184,7 @@ Grid.defaultProps = {
   sm: false,
   spacing: 0,
   style: {},
+  verticalAlign: 'auto',
   wrap: 'wrap',
   xl: false,
   xs: false,
@@ -218,6 +221,8 @@ Grid.propTypes = {
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
   /** Defines the vertical space of `container` components. */
   topSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+  /** Self-align of the grid item. */
+  verticalAlign: PropTypes.oneOf(['auto', 'start', 'center', 'end']),
   /** 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. */

package/components/popover/index.js

@@ -182,7 +182,7 @@ const Popover = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   const updatePositionPopover = (el = null, cb) => {
     var _window, _window2, _anchor6, _anchorRect, _anchorRect2, _anchor7, _anchorRect3, _anchorRect4, _anchorRect5, _anchorRect6, _anchorRect7, _anchorRect8, _anchorRect9, _anchorRect10, _anchorRect11, _anchorRect12, _newDirectionObject, _newDirectionObject$t, _transformOrigin, _newDirectionObject2, _newDirectionObject2$, _transformOrigin2;
-    setElement(el instanceof Element ? el : null);
+    if (el instanceof Element) setElement(el);
     if (!ref.current) {
       window.removeEventListener('resize', updatePositionPopover);
       return;

package/components/typography/index.js

@@ -176,7 +176,7 @@ Typography.propTypes = {
   /** If `true`, hover will show tooltip when text clamped. */
   hoverTooltip: PropTypes.bool,
   /** The line-clamp property truncates text at a specific number of lines. */
-  lineClamp: PropTypes.number,
+  lineClamp: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
   /** The component used for the root node. Either a string to use a HTML element or a component. */
   mapping: PropTypes.string,
   /** Callback fired when the component is clicked. */

package/icons/menu/v2/index.js

@@ -2,18 +2,32 @@
 /* eslint-disable no-empty */
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, forwardRef, useRef, useMemo } from 'react';
-import PropTypes from 'prop-types';
 import { jsx } from '@emotion/core';
+import PropTypes from 'prop-types';
+import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
+import { classNames } from "../../../utils";
 const IconMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  type,
+  action,
+  className,
+  height,
+  id,
   name,
-  width,
-  height
-}, ref) => {
-  if (!ref) {
-    ref = useRef(null);
-  }
+  style,
+  type,
+  width
+}, reference) => {
+  if (!reference) reference = useRef(null);
+  const ref = useRef(null);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = {
+      ...action
+    }; // methods
+    _instance.__proto__ = {}; // hidden methods
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   const getResourceImage = fileName => {
     let icon = require("../../../assets/images/menu/dhr/Default.svg");
     try {
@@ -22,26 +36,36 @@ const IconMenu = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return icon;
   };
   return useMemo(() => jsx("img", {
+    ref: ref,
+    id: id,
+    className: classNames('DGN-UI-IconMenu', className),
+    style: style,
     src: getResourceImage(name + '.svg'),
     width: width,
     height: height,
-    alt: ''
-  }), [type, name, width, height]);
+    alt: name
+  }), [className, height, id, name, style, type, width]);
 }));
 IconMenu.defaultProps = {
+  className: '',
+  height: '100%',
   name: 'Default',
   type: 'dhr',
   width: '100%',
-  height: '100%'
+  style: {}
 };
 IconMenu.propTypes = {
-  /** Menu type (DHR || ERP || BEM). */
-  type: PropTypes.oneOf(['dhr', 'erp', 'bem']),
+  /** Class for component. */
+  className: PropTypes.string,
+  /** Height of icon. */
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   /** Name of icon. */
   name: PropTypes.string,
+  /** Menu type (DHR || ERP || BEM). */
+  type: PropTypes.oneOf(['dhr', 'erp', 'bem']),
   /** Width of icon. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /** Height of icon. */
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  /** Style inline of component. */
+  style: PropTypes.object
 };
 export default IconMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.82",
+  "version": "1.3.83",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,12 @@ npm test
 ```
 
 ## Changelog
+## 1.3.83
+- \[Changed\]: IconMenu – Add prop className, style
+- \[Changed\]: Grid – Add prop verticalAlign
+- \[Changed\]: Label– Add lineClamp auto
+- \[Fixed\]: Popover – Fix bug not save last position of anchor
+
 ## 1.3.82
 - \[Fixed\]: CircularProgress – Fix transform rotate wrong inside flex column
 

package/utils/index.js

@@ -1,30 +1,31 @@
 import * as utils from '.';
-export * from "./array/array";
+export { default as capitalize } from "./string/capitalize";
+export { default as capitalizeSentenceCase } from "./string/capitalizeSentenceCase";
 export { default as classNames } from "./classNames";
-export * from "./date";
 export { default as date } from "./date";
 export { default as getFileType } from "./getFileType";
 export { default as handleBreakpoints } from "./handleBreakpoints";
 export { default as isMobile } from "./isMobile";
 export { default as mapParent } from "./map-parent";
+export { default as onValidate } from "./validate";
 export { default as parseTextToHTML } from "./parseHTML";
 export { default as promisify } from "./promisify";
 export { default as randomString } from "./randomString";
 export { default as refType } from "./refType";
 export { default as removeUnicode } from "./remove-unicode";
-export * from "./render-portal";
 export { default as renderHTML } from "./renderHTML";
 export { default as renderIcon } from "./renderIcon";
-export * from "./sb-template";
 export { default as SbTemplate } from "./sb-template";
-export { default as capitalize } from "./string/capitalize";
-export { default as capitalizeSentenceCase } from "./string/capitalizeSentenceCase";
-export * from "./string/string";
 export { default as updatePosition } from "./updatePosition";
 export { default as useDelayUnmount } from "./useDelayUnmount";
+export { default as useInput } from "./useInput";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useOnClickOutside } from "./useOnClickOutside";
 export { default as usePortal } from "./usePortal";
+export * from "./array/array";
+export * from "./date";
+export * from "./render-portal";
+export * from "./sb-template";
+export * from "./string/string";
 export * from "./validate";
-export { default as onValidate } from "./validate";
 export default utils;