diginet-core-ui 1.3.90 → 1.3.91

package/components/tree-view/index.js

@@ -1,14 +1,14 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useMemo, useState, useEffect, useRef, forwardRef, Fragment, useImperativeHandle } from 'react';
-import { render } from 'react-dom';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
-import { Accordion, AccordionSummary, AccordionDetails, Typography, Checkbox, Divider, InputBase, ButtonIcon } from '..';
-import { classNames, mapParent, randomString, removeUnicode } from "../../utils";
+import { css, jsx } from '@emotion/core';
+import { Accordion, AccordionDetails, AccordionSummary, ButtonIcon, Checkbox, Divider, InputBase, Typography } from "./..";
 import { getGlobal } from "../../global";
-import { itemsCenter, boxBorder, cursorPointer, displayBlock, displayInlineBlock, flexRow, positionRelative } from "../../styles/general";
-import theme from "../../theme/settings";
+import PropTypes from 'prop-types';
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { render } from 'react-dom';
+import { bgColor, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayInlineBlock, flexRow, itemsCenter, mgb, mgl, mgr, parseHeight, parseMinHeight, parseWidth, pd, pdl, positionRelative, textLeft } from "../../styles/general";
+import { useTheme } from "../../theme";
+import { classNames, mapParent, randomString, refType as ref, removeUnicode } from "../../utils";
 const {
   colors: {
     system: {
@@ -22,9 +22,8 @@ const {
     text: {
       main: textMain
     }
-  },
-  spacing
-} = theme;
+  }
+} = useTheme();
 const separatorPattern = /\{\w+\}/g;
 const currentValue = {},
   itemsRenderAsync = {};
@@ -61,6 +60,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   valueExpr,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const selectAllRef = useRef(null);
   const inputValueRef = useRef(null);
@@ -319,8 +319,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const checkBoxEl = currentTarget.querySelector('.TreeView-Item-Checkbox');
     if (multiple) {
       var _value;
-      let checked = false;
-      let inputEl = null;
+      let checked;
+      let inputEl;
       // Click on text (not checkbox)
       if (!checkBoxEl.contains(target)) {
         inputEl = checkBoxEl.querySelector('input');
@@ -604,7 +604,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         }
       }, jsx("div", {
         className: 'TreeView-Item'
-      }, (selectBox || multiple) && jsx("span", {
+      }, selectBox || multiple ? jsx("span", {
         className: 'TreeView-Item-Checkbox'
       }, jsx(Checkbox, {
         forTreeView: true,
@@ -612,19 +612,19 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         value: typeof data === 'object' ? data[valueExpr] : data,
         stopPropagation: false,
         disabled: disabled
-      })), renderContent(data, keyArr, index))), jsx(AccordionDetails, {
+      })) : null, renderContent(data, keyArr, index))), jsx(AccordionDetails, {
         id: id
       }, childItems.map((child, i) => renderTreeView(child, index + i, level + 1, sync, id))));
     }
     return jsx("div", {
-      className: 'TreeView-Item non-child ' + focusClass,
+      className: classNames('TreeView-Item', 'non-child', focusClass),
       style: {
         paddingLeft: 34 + 16 * level
       },
       onClick: multiple || selectBox || onChange ? e => onClickHandler(e, data) : undefined,
       key: index,
       tabIndex: "-1"
-    }, (selectBox || multiple) && jsx("span", {
+    }, selectBox || multiple ? jsx("span", {
       className: 'TreeView-Item-Checkbox'
     }, jsx(Checkbox, {
       forTreeView: true,
@@ -632,7 +632,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       value: typeof data === 'object' ? data[valueExpr] : data,
       stopPropagation: false,
       disabled: disabled
-    })), renderContent(data, keyArr, index));
+    })) : null, renderContent(data, keyArr, index));
   };
   useEffect(() => {
     currentValue[unique] = {};
@@ -756,7 +756,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return jsx("div", {
       css: TreeViewRootCSS,
       className: classNames('DGN-UI-TreeView', disabled && 'disabled')
-    }, showSelectedItems && jsx(InputBase, {
+    }, showSelectedItems && multiple ? jsx(InputBase, {
       inputRef: inputValueRef,
       viewType: 'outlined',
       readOnly: true,
@@ -774,12 +774,12 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         name: 'Cancel',
         onClick: clearAllValue
       })
-    }), allowSearch && jsx(InputBase, {
+    }) : null, allowSearch ? jsx(InputBase, {
       startIcon: 'Search',
       onChange: onChangeHandler,
       viewType: 'outlined',
       ...searchProps
-    }), multiple && selectAll && jsx(Fragment, null, jsx("div", {
+    }) : null, multiple && selectAll ? jsx(Fragment, null, jsx("div", {
       className: 'TreeView-All'
     }, jsx(Checkbox, {
       forTreeView: true,
@@ -788,10 +788,10 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       inputRef: selectAllRef,
       stopPropagation: false,
       disabled: disabled
-    })), jsx(Divider, null)), jsx("div", {
+    })), jsx(Divider, null)) : null, jsx("div", {
       ref: ref,
-      ...props,
-      className: classNames('TreeView-Content', disabled && 'disabled', className)
+      className: classNames('TreeView-Content', disabled && 'disabled', className),
+      ...props
     }, mapParent(dataSource, id, parentID, true).map((data, index) => renderTreeView(data, index.toString(), 0, sync))));
   }, [allowSearch, autoExpandToResult, className, collapseIcon, dataSource, disabled, disabledBoldResult, disabledRelevantValue, displayExpr, expandIcon, id, multiple, multipleValueMode, onChange, parentID, renderAsyncFromLevel, renderAsyncWithLength, renderItem, searchMode, searchProps, selectAll, selectAllLabel, selectBox, showChildrenOfResult, showSelectedItems, value, valueExpr]);
 }));
@@ -802,20 +802,20 @@ const TreeViewRootCSS = css`
         box-shadow: none !important;
         .DGN-UI-Accordion-Summary {
             ${itemsCenter};
-            min-height: 40px;
-            padding: 0;
-            border-radius: 0;
+            ${parseMinHeight(40)};
+            ${pd(0)};
+            ${borderRadius(0)};
             &.focus {
-                background-color: ${fillFocus};
+                ${bgColor(fillFocus)};
             }
             .Accordion-Icon-Root {
                 ${flexRow};
-                margin-right: ${spacing([1])};
+                ${mgr([1])};
             }
         }
         .DGN-UI-Accordion-Details-Content {
-            padding: 0;
-            border-radius: 0;
+            ${pd(0)};
+            ${borderRadius(0)};
         }
         .Accordion-Icon-Root {
             ${flexRow};
@@ -834,40 +834,40 @@ const TreeViewRootCSS = css`
         ${displayBlock};
         ${positionRelative};
         .DGN-UI-Accordion {
-            margin-bottom: 0;
+            ${mgb(0)};
         }
     }
     .TreeView-Item-Checkbox {
         ${displayInlineBlock};
         ${positionRelative};
-        height: 100%;
-        margin-right: ${spacing([2])};
+        ${parseHeight('100%')};
+        ${mgr([2])};
     }
     .TreeView-Item {
         ${flexRow};
         ${positionRelative};
         ${itemsCenter};
         ${boxBorder};
-        min-height: 40px;
-        text-align: left;
+        ${parseWidth('100%')};
+        ${parseMinHeight(40)};
+        ${textLeft};
         color: ${textMain};
-        width: 100%;
         &.non-child {
             ${cursorPointer};
             transition: background-color 300ms ease;
             &.disabled {
+                ${cursorNotAllowed};
                 color: ${systemDisabled};
-                cursor: no-drop;
             }
             &:not(.disabled) {
                 &:hover {
-                    background-color: ${fillHover};
+                    ${bgColor(fillHover)};
                 }
                 &:focus {
-                    background-color: ${fillFocus};
+                    ${bgColor(fillFocus)};
                 }
                 &:active {
-                    background-color: ${fillPressed};
+                    ${bgColor(fillPressed)};
                 }
             }
             &.DGN-Hidden {
@@ -875,7 +875,7 @@ const TreeViewRootCSS = css`
             }
         }
         &.focus {
-            background-color: ${fillFocus};
+            ${bgColor(fillFocus)};
         }
         &.TreeView-Item-active .DGN-UI-Typography {
             font-weight: bold;
@@ -883,10 +883,10 @@ const TreeViewRootCSS = css`
     }
     &.expand-able {
         .TreeView-All {
-            margin-left: ${spacing([8.5])};
+            ${mgl([8.5])};
         }
         .TreeView-Item.non-child {
-            padding-left: ${spacing([8.5])};
+            ${pdl([8.5])};
         }
     }
 `;
@@ -918,72 +918,37 @@ TreeView.defaultProps = {
   valueExpr: ''
 };
 TreeView.propTypes = {
-  /** expand immediate if true */
-  expand: PropTypes.bool,
-  /** prevent all event if true */
-  disabled: PropTypes.bool,
-  /** show checkbox in each item */
-  selectBox: PropTypes.bool,
-  /** allow select multiple item if true */
-  multiple: PropTypes.bool,
-  /** allow select/unselect all items on one click (just support for multiple) */
-  selectAll: PropTypes.bool,
-  /** display input box search if true */
+  /** If `true`, display input box search. */
   allowSearch: PropTypes.bool,
-  /** display all value in a box */
-  showSelectedItems: PropTypes.bool,
-  /** disabled parent and children item if true (only supported for multipleValueMode is single) */
-  disabledRelevantValue: PropTypes.bool,
-  /** prevent display content of match values with bold style */
-  disabledBoldResult: PropTypes.bool,
-  /** expand TreeView to match result if true */
+  /** If `true`, expand TreeView to match result. */
   autoExpandToResult: PropTypes.bool,
-  /** still show children of last result was found if true */
-  showChildrenOfResult: PropTypes.bool,
-  /** Used to identify the parent key */
-  id: PropTypes.string.isRequired,
-  /** used for mapping into a nested list */
-  parentID: PropTypes.string.isRequired,
-  /** class on element */
+  /** Class for component. */
   className: PropTypes.string,
-  /**
-   * field name used for text display<br/>
+  /** Icon display for collapse icon. */
+  collapseIcon: PropTypes.any,
+  /** The array of elements that appear in the tree list. */
+  dataSource: PropTypes.array,
+  /** If `true`, the component is disabled. */
+  disabled: PropTypes.bool,
+  /** If `true`, prevent display content of match values with bold style. */
+  disabledBoldResult: PropTypes.bool,
+  /** If `true`, disabled parent and children item (only supported for multipleValueMode is single). */
+  disabledRelevantValue: PropTypes.bool,
+  /** Field name used for text display in dropdown list.<br/>
    * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
    * Note: don't use 'id - name', return undefined
    */
   displayExpr: PropTypes.string,
-  /** the key to determine value to return */
-  valueExpr: PropTypes.string,
-  /** return value for the select multiple use case */
+  /** If `true`, expand immediate after render (shouldn't use this). */
+  expand: PropTypes.bool,
+  /** Icon display for expand icon. */
+  expandIcon: PropTypes.any,
+  /** If `true`, value must be an array and the treeview will support multiple selections. */
+  multiple: PropTypes.bool,
+  /** Return value for the select multiple use case. */
   multipleValueMode: PropTypes.oneOf(['single', 'multiple', 'inheritance']),
   /**
-   * return value for the select multiple use case
-   * * contains: "Công ty" contains "công", but not contains "cong"
-   * * similar: "Công ty" contains "công" and "cong"
-   */
-  searchMode: PropTypes.oneOf(['contains', 'similar']),
-  /** The content display for label of checkbox select all */
-  selectAllLabel: PropTypes.string,
-  /**
-   * duration wait enter search content on search<br/>
-   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
-   */
-  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** will render asynchronously if the number of elements is greater than this number */
-  renderAsyncWithLength: PropTypes.number,
-  /** will render asynchronously from level equal this number */
-  renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
-  /** data to show in tree list */
-  dataSource: PropTypes.array,
-  /** the value was selected */
-  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
-  /** function displays items by custom<br/>
-   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
-   * --> such as: displayExpr={'name - role'}
-   */
-  renderItem: PropTypes.func,
-  /**
-   * on change value function<br />
+   * Callback fired when the value changes.<br />
    * return 2 parameters (e, data)<br />
    * * e: element (insist {value, justSelected, data})<br/>
    * &nbsp;&nbsp;&nbsp;&nbsp; + value is one or an array of selected values<br />
@@ -992,12 +957,43 @@ TreeView.propTypes = {
    * * data: array of selected values (not recommend because it's the same e.value)
    */
   onChange: PropTypes.func,
-  /** the icon to display for expand icon */
-  expandIcon: PropTypes.any,
-  /** the props for InputBase */
+  /** Used for mapping into a nested list. */
+  parentID: PropTypes.string.isRequired,
+  /** Will render asynchronously from level equal this number. */
+  renderAsyncFromLevel: PropTypes.oneOf([2, 3, 4, 5]),
+  /** Will render asynchronously if the number of elements is greater than this number. */
+  renderAsyncWithLength: PropTypes.number,
+  /** Function displays items by custom.<br/>
+   * renderItem={(data, index) => data.name + ' - ' + data.role}<br/>
+   * --> such as: displayExpr={'name - role'}
+   */
+  renderItem: PropTypes.func,
+  /**
+   * Duration wait enter search content on search.<br/>
+   * Example: 700 -> 700ms, '700ms' -> 700ms, '0.7s' -> 700ms, '1m' -> 60000ms
+   * If `true`, used default delayOnInput.
+   */
+  searchDelayTime: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Specifies a comparison operation used to search items. */
+  searchMode: PropTypes.oneOf(['contains', 'similar']),
+  /** The props for InputBase. */
   searchProps: PropTypes.object,
-  /** the icon to display for collapse icon */
-  collapseIcon: PropTypes.any,
+  /** If `true`, allow select/unselect all items on one click (just support for multiple). */
+  selectAll: PropTypes.bool,
+  /** The content display for label of checkbox select all */
+  selectAllLabel: PropTypes.string,
+  /** If `true`, show checkbox in each item. */
+  selectBox: PropTypes.bool,
+  /** If `true`, still show children of last result was found. */
+  showChildrenOfResult: PropTypes.bool,
+  /** If `true`, display all value in a box. */
+  showSelectedItems: PropTypes.bool,
+  /** Used to identify the parent key. */
+  id: PropTypes.string.isRequired,
+  /** The displayed value of component. */
+  value: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  /** The field name used for the returned result. */
+  valueExpr: PropTypes.string,
   /**
    * get ref of TreeView component, insist:<br/>
    * {<br/>
@@ -1015,6 +1011,6 @@ TreeView.propTypes = {
    * &nbsp;&nbsp;&nbsp;&nbsp;get: get DOM of TreeView component<br/>
    * }
    */
-  ref: PropTypes.any
+  ref: ref
 };
 export default TreeView;

package/components/typography/index.js

@@ -4,14 +4,11 @@ import { css, jsx } from '@emotion/core';
 import { Popover } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, pd, positionRelative, textCapitalize, textCenter, textColor, textLineThrough, textLowercase, textunderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
+import { breakAll, breakWord, cursorPointer, displayBlock, displayInlineBlock, italic, overflowHidden, parseHeight, parseMaxWidth, parseMinWidth, pd, positionRelative, textCapitalize, textCenter, textColor, textLineThrough, textLowercase, textUnderline, textUppercase, whiteSpaceBreakSpaces } from "../../styles/general";
 import { useTheme, useTypography as typography } from "../../theme";
 import { classNames, renderHTML } from "../../utils";
 const {
   colors: {
-    system: {
-      rest: systemRest
-    },
     text: {
       main: textMain
     },
@@ -20,8 +17,8 @@ const {
     }
   }
 } = useTheme();
-const colorMap = new Map([['default', textMain], ['secondary', systemRest]]);
-const formatMap = new Map([['capitalize', textCapitalize], ['uppercase', textUppercase], ['lowercase', textLowercase], ['italic', italic], ['line-through', textLineThrough], ['underline', textunderline]]);
+const colorMap = new Map([['default', textMain]]);
+const formatMap = new Map([['capitalize', textCapitalize], ['uppercase', textUppercase], ['lowercase', textLowercase], ['italic', italic], ['line-through', textLineThrough], ['underline', textUnderline]]);
 const isTextClamped = elm => (elm === null || elm === void 0 ? void 0 : elm.scrollHeight) > (elm === null || elm === void 0 ? void 0 : elm.clientHeight);
 const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -76,6 +73,7 @@ const Typography = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const classes = (inTooltip = false) => classNames('DGN-UI-Typography', center && 'DGN-Typography-center', fullWidth && 'DGN-Typography-fullWidth', `DGN-Typography-${type}`, uppercase && `DGN-Typography-Uppercase`, capitalize && 'DGN-Typography-Capitalize', !inTooltip && lineClamp && 'DGN-Typography-Clamp', className);
   const content = Array.isArray(children) && !children.some(node => node && String(node.$$typeof) === 'Symbol(react.element)') ? children.join('') : children;
   const renderTooltip = hoverTooltip ? jsx(Popover, {
+    css: [parseMinWidth(300)],
     open: openTooltip,
     pressESCToClose: false,
     fullScreen: false,

package/global/index.js

@@ -11,8 +11,8 @@ const globalObject = {
     noDataText: 'Không có dữ liệu',
     notify: 'Thông báo',
     ok: 'Đồng ý',
-    showLess: 'Thu gọn',
-    showMore: 'Chi tiết',
+    showLess: 'Rút gọn',
+    showMore: 'Xem thêm',
     yes: 'Có',
     warning: 'Cảnh Báo',
     // attachment

package/package.json

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

package/readme.md

@@ -38,6 +38,16 @@ npm test
 ```
 
 ## Changelog
+## 1.3.91
+- \[Changed\]: TreeView – Optimize code
+- \[Changed\]: Popup – Add defaultProps description
+- \[Changed\]: Grid – Add sx prop handle responsive css display
+- \[Changed\]: ButtonMore – Export component ButtonMore
+- \[Changed\]: DateRangePicker – Add description for prop value
+- \[Fixed\]: Avatar – Fix bug not clear avatar when src null
+- \[Fixed\]: Typography – Add min-width to popover hover tooltip
+- \[Fixed\]: DatePicker – Fix disabled button previous month in navigator
+
 ## 1.3.90
 - \[Added\]: Breadcrumb – Add component Breadcrumb
 - \[Added\]: Icon – Question, Pause, Cake, ChatAnswer

package/styles/general.js

@@ -95,6 +95,9 @@ const cursorDefault = css`
 const cursorInherit = css`
     cursor: inherit;
 `;
+const cursorInitial = css`
+    cursor: initial;
+`;
 const cursorMove = css`
     cursor: move;
 `;
@@ -410,7 +413,7 @@ const textLowercase = css`
 const textRight = css`
     text-align: right;
 `;
-const textunderline = css`
+const textUnderline = css`
     text-decoration: underline;
 `;
 const textUppercase = css`
@@ -442,4 +445,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/styles/sx/index.js

@@ -0,0 +1,23 @@
+import { css } from '@emotion/core';
+import { handleBreakpoints } from "../../utils";
+const cssKeyMap = new Map([['display', 'display']]);
+const sx = prop => {
+  if (typeof prop !== 'object' || Array.isArray(prop) || prop === null) return null;
+  let sxStyleCSS = '';
+  Object.keys(prop).forEach(key => {
+    const cssKey = cssKeyMap.get(key);
+    if (!cssKey) return null;
+    sxStyleCSS += handleBreakpoints(prop[key], propValue => {
+      if (propValue) {
+        return `
+                        ${cssKey}: ${propValue};
+                    `;
+      }
+      return '';
+    });
+  });
+  return css`
+        ${sxStyleCSS}
+    `;
+};
+export default sx;

package/styles/utils.js

@@ -1,31 +1,31 @@
 import { color as colors } from "./colors";
 
-/**
- * Parse css value
- *
- * @param {string | number} vl
- * @returns {string | number}
+/**
+ * Parse css value
+ *
+ * @param {string | number} vl
+ * @returns {string | number}
  */
 export const parseCSSValue = vl => {
   return isNaN(vl) ? vl : vl + 'px';
 };
 
-/**
- * Parse to pixel
- *
- * @param {number} vl
- * @returns {string}
+/**
+ * Parse to pixel
+ *
+ * @param {number} vl
+ * @returns {string}
  */
 export const parseToPixel = vl => {
   if (!vl) return '1px';
   return typeof vl === 'string' ? vl : `${vl}px`;
 };
 
-/**
- * Get color from CORE colors
- *
- * @param {string} cl
- * @returns {string}
+/**
+ * Get color from CORE colors
+ *
+ * @param {string} cl
+ * @returns {string}
  */
 export const getColor = cl => {
   if (typeof cl !== 'string') return;

package/utils/index.js

@@ -19,6 +19,7 @@ export { default as SbTemplate } from "./sb-template";
 export { default as updatePosition } from "./updatePosition";
 export { default as useDelayUnmount } from "./useDelayUnmount";
 export { default as useInput } from "./useInput";
+export { default as useIntersection } from "./intersectionObserver";
 export { default as useMediaQuery } from "./useMediaQuery";
 export { default as useOnClickOutside } from "./useOnClickOutside";
 export { default as usePortal } from "./usePortal";

package/utils/intersectionObserver.js

@@ -22,7 +22,7 @@ const getIntersectionObserver = () => {
   }
   return observer;
 };
-export const useIntersection = (elem, callback) => {
+const useIntersection = (elem, callback) => {
   useEffect(() => {
     let target = elem.current;
     let observer = getIntersectionObserver();
@@ -33,4 +33,5 @@ export const useIntersection = (elem, callback) => {
       observer.unobserve(target);
     };
   }, []);
-};
+};
+export default useIntersection;