diginet-core-ui 1.3.83-beta.1 → 1.3.84-beta.1

package/components/status/index.js

@@ -1,51 +1,46 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
+import { Icon, Typography } from "./..";
+import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { Typography } from "../";
-import Icon from "../../icons";
-import { alignCenter, backgroundTransparent, borderBox, flexRow } from "../../styles/general";
-import theme from "../../theme/settings";
-import OptionWrapper from "../others/option-wrapper";
+import { alignCenter, backgroundTransparent, borderBox, flexRow, parseMinHeight, parseWidth } from "../../styles/general";
+import { useTheme, useColor as colors } from "../../theme";
+import { classNames } from "../../utils";
 const {
   colors: {
     system: {
-      active,
-      rest
-    },
-    semantic: {
-      success,
-      warning,
-      danger,
-      info
+      rest: systemRest
     },
     fill: {
-      sidebar
+      sidebar: fillSidebar
     }
-  }
-} = theme;
-const colorMap = new Map([['default', rest], ['primary', active], ['success', success], ['warning', warning], ['danger', danger], ['info', info]]);
+  },
+  spacing
+} = useTheme();
+const colorMap = new Map([['default', systemRest]]);
 const iconSizeMap = new Map([['small', '16px'], ['medium', '20px'], ['large', '24px']]);
 const typographySizeMap = new Map([['small', 'p3'], ['medium', 'p2'], ['large', 'p1']]);
-const filledPaddingSizeMap = new Map([['small', '2px 8px'], ['medium', '2px 12px'], ['large', '2px 12px']]);
+const filledPaddingSizeMap = new Map([['small', spacing([0.5, 2])], ['medium', spacing([0.5, 2])], ['large', spacing([0.5, 3])]]);
 const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   className,
-  color,
+  color: colorProp,
   icon,
+  id,
   size,
+  style,
   text,
-  viewType,
-  id,
-  style
+  viewType
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const ref = useRef(null);
   const outlinedPaddingSize = filledPaddingSizeMap.get(size);
-  const _color = colorMap.get(color) || color || rest;
+  const color = colorMap.get(colorProp) || colors[colorProp] || colorProp || systemRest;
   const iconSize = iconSizeMap.get(size);
   const typographySize = typographySizeMap.get(size);
-  const _StatusRoot = StatusRoot(iconSize, _color, size, outlinedPaddingSize);
+  const _StatusRootCSS = StatusRootCSS(iconSize, color, size, outlinedPaddingSize);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -56,40 +51,41 @@ const Status = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const StatusIcon = typeof icon === 'string' ? jsx(Icon, {
+  const StatusIconView = typeof icon === 'string' ? jsx(Icon, {
     name: icon,
     width: iconSize,
     height: iconSize,
     color: 'currentColor',
     viewBox: true
   }) : icon;
-  const StatusText = jsx(Typography, {
+  const StatusTextView = jsx(Typography, {
     css: TextCSS,
     type: typographySize,
     color: 'inherit'
   }, text);
   return useMemo(() => {
     return jsx("div", {
-      css: _StatusRoot,
+      css: _StatusRootCSS,
       ref: ref,
       id: id,
       style: style,
-      className: ['DGN-UI-Status', viewType, size, className].join(' ').trim().replace(/\s+/g, ' ')
-    }, StatusIcon, StatusText);
-  }, [className, color, icon, size, text, viewType, id, style]);
+      className: classNames('DGN-UI-Status', viewType, size, className)
+    }, StatusIconView, StatusTextView);
+  }, [className, colorProp, icon, id, size, style, text, viewType]);
 }));
-const StatusRoot = (iconSize, color, size, outlinedPaddingSize) => css`
+const StatusRootCSS = (iconSize, color, size, outlinedPaddingSize) => css`
     ${flexRow};
     ${alignCenter};
     ${backgroundTransparent};
     ${borderBox};
-    gap: ${size === 'small' ? '2px' : '4px'};
-    min-height: ${iconSize};
+    ${parseWidth('fit-content')};
+    ${parseMinHeight(iconSize)};
+    gap: ${spacing([size === 'small' ? 0.5 : 1])};
     color: ${color};
     &.filled {
-        color: ${sidebar};
+        color: ${fillSidebar};
         background-color: ${color};
-        border-radius: 12px;
+        border-radius: 20px;
         &.${size} {
             padding: ${outlinedPaddingSize};
         }
@@ -99,12 +95,12 @@ const TextCSS = css`
     white-space: nowrap;
 `;
 Status.defaultProps = {
-  viewType: 'ghost',
-  text: '',
+  className: '',
   icon: '',
   size: 'medium',
-  className: '',
-  style: {}
+  style: {},
+  text: '',
+  viewType: 'ghost'
 };
 Status.propTypes = {
   /** Class for component. */
@@ -115,12 +111,12 @@ Status.propTypes = {
   icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /** The size of the component. */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /** Style inline of component. */
+  style: PropTypes.object,
   /** The content of the component. */
   text: PropTypes.string,
   /** The variant to use. */
-  viewType: PropTypes.oneOf(['filled', 'default', 'ghost']),
-  /** Style inline of component. */
-  style: PropTypes.object
+  viewType: PropTypes.oneOf(['filled', 'ghost'])
 };
 export { Status };
 export default OptionWrapper(Status);

package/package.json

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

package/readme.md

@@ -38,6 +38,10 @@ npm test
 ```
 
 ## Changelog
+## 1.3.84
+- \[Fixed\]: Badge – Remove animation, conditional rendering with prop invisible
+- \[Fixed\]: InputBase – Fix css focus when readOnly
+
 ## 1.3.83
 - \[Changed\]: IconMenu – Add prop className, style
 - \[Changed\]: Grid – Add prop verticalAlign

package/styles/general.js

@@ -1,15 +1,14 @@
-/* eslint-disable no-unused-vars */
-import { css, jsx } from '@emotion/core';
+import { css } from '@emotion/core';
 import { color } from "./colors";
 import { parseToPixel } from "./utils";
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
 export const typographyTypes = ['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'];
 
-/**
- * get value spacing with rootZIndex
- * @param number
- * @return {number}
+/**
+ * get value spacing with rootZIndex
+ * @param number
+ * @return {number}
  */
 export const zIndex = number => {
   number = Number(number || 0);
@@ -17,10 +16,10 @@ export const zIndex = number => {
   return rootZIndex + number;
 };
 
-/**
- * get value spacing with rootSpacing
- * @param {(number|number[])} vl - default 1
- * @returns {(number|string)}
+/**
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
@@ -30,191 +29,194 @@ export const getSpacing = (vl = 1) => {
   }
 };
 
-/**
- * replace rootZIndex
- * @param number
+/**
+ * replace rootZIndex
+ * @param number
  */
 export const setZIndex = number => {
   number = Number(number || 0);
   if (!isNaN(number)) rootZIndex = number;
 };
-export const flexRow = css`
-    display: flex;
-    flex-direction: row;
-`;
-export const inlineFlex = css`
-    display: inline-flex;
-`;
-export const flexCol = css`
-    display: flex;
-    flex-direction: column;
-`;
-export const flexColReverse = css`
-    display: flex;
-    flex-direction: column-reverse;
-`;
-export const flexRowReverse = css`
-    flex-direction: row-reverse;
-`;
-export const flexWrap = css`
-    display: flex;
-    flex-wrap: wrap;
-`;
-export const alignStart = css`
-    align-items: flex-start;
-`;
-export const alignCenter = css`
+
+// Common CSS
+const alignCenter = css`
     align-items: center;
 `;
-export const alignEnd = css`
+const alignEnd = css`
     align-items: flex-end;
 `;
-export const justifyStart = css`
-    justify-content: flex-start;
-`;
-export const justifyCenter = css`
-    justify-content: center;
-`;
-export const justifyEnd = css`
-    justify-content: flex-end;
-`;
-export const justifyBetween = css`
-    justify-content: space-between;
+const alignStart = css`
+    align-items: flex-start;
 `;
-export const displayBlock = css`
-    display: block;
+const backgroundTransparent = css`
+    background-color: transparent;
 `;
-export const displayInlineBlock = css`
-    display: inline-block;
+const border = (withVl, colorVl) => css`
+    border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
 `;
-export const positionRelative = css`
-    position: relative;
+const borderBox = css`
+    box-sizing: border-box;
 `;
-export const positionAbsolute = css`
-    position: absolute;
+const borderNone = css`
+    border: none;
 `;
-export const positionFixed = css`
-    position: fixed;
+const borderRadius100 = css`
+    border-radius: 100%;
 `;
-export const borderRadius4px = css`
+const borderRadius4px = css`
     border-radius: 4px;
 `;
-export const borderRadius50 = css`
+const borderRadius50 = css`
     border-radius: 50%;
 `;
-export const borderRadius100 = css`
-    border-radius: 100%;
+const boxShadowNone = css`
+    box-shadow: none;
 `;
-export const borderBox = css`
-    box-sizing: border-box;
+const breakAll = css`
+    word-break: break-all;
+`;
+const breakWord = css`
+    word-break: break-word;
 `;
-export const cursorDefault = css`
+const cursorDefault = css`
     cursor: default;
 `;
-export const cursorInherit = css`
+const cursorInherit = css`
     cursor: inherit;
 `;
-export const cursorNotAllowed = css`
+const cursorNoDrop = css`
+    cursor: no-drop !important;
+`;
+const cursorNotAllowed = css`
     cursor: not-allowed;
 `;
-export const cursorPointer = css`
+const cursorPointer = css`
     cursor: pointer;
 `;
-export const overflowAuto = css`
-    overflow: auto;
+const displayBlock = css`
+    display: block;
 `;
-export const overflowHidden = css`
-    overflow: hidden;
+const displayInlineBlock = css`
+    display: inline-block;
 `;
-export const backgroundTransparent = css`
-    background-color: transparent;
+const displayNone = css`
+    display: none;
 `;
-export const ellipsis = css`
+const ellipsis = css`
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 `;
-export const whiteSpaceNoWrap = css`
-    white-space: nowrap;
-`;
-export const breakAll = css`
-    word-break: break-all;
+const flexCol = css`
+    display: flex;
+    flex-direction: column;
 `;
-export const breakWord = css`
-    word-break: break-word;
+const flexColReverse = css`
+    display: flex;
+    flex-direction: column-reverse;
 `;
-export const textCapitalize = css`
-    text-transform: capitalize;
+const flexRow = css`
+    display: flex;
+    flex-direction: row;
 `;
-export const textUppercase = css`
-    text-transform: uppercase;
+const flexRowReverse = css`
+    flex-direction: row-reverse;
 `;
-export const textCenter = css`
-    text-align: center;
+const flexWrap = css`
+    display: flex;
+    flex-wrap: wrap;
 `;
-export const outlineNone = css`
-    outline: none;
+const inlineFlex = css`
+    display: inline-flex;
 `;
-export const userSelectNone = css`
-    user-select: none;
+const justifyBetween = css`
+    justify-content: space-between;
 `;
-export const cursorNoDrop = css`
-    cursor: no-drop !important;
+const justifyCenter = css`
+    justify-content: center;
 `;
-export const pointerEventsNone = css`
-    pointer-events: none;
+const justifyEnd = css`
+    justify-content: flex-end;
 `;
-export const borderNone = css`
-    border: none;
+const justifyStart = css`
+    justify-content: flex-start;
 `;
-export const boxShadowNone = css`
-    box-shadow: none;
+const noBorder = css`
+    border: none !important;
 `;
-export const displayNone = css`
-    display: none;
+const noBoxShadow = css`
+    box-shadow: none !important;
 `;
-export const noMargin = css`
+const noMargin = css`
     margin: 0 !important;
 `;
-export const noPadding = css`
+const noPadding = css`
     padding: 0 !important;
 `;
-export const noBorder = css`
-    border: none !important;
-`;
-export const noBoxShadow = css`
-    box-shadow: none !important;
+const outlineNone = css`
+    outline: none;
 `;
-export const border = (withVl, colorVl) => css`
-    border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
+const overflowAuto = css`
+    overflow: auto;
 `;
-export const parseWidth = width => css`
-    width: ${isNaN(width) ? width : width + 'px'};
+const overflowHidden = css`
+    overflow: hidden;
 `;
-export const parseHeight = height => css`
+const parseHeight = height => css`
     height: ${isNaN(height) ? height : height + 'px'};
 `;
-export const parseWidthHeight = (width, height = width) => css`
-    width: ${isNaN(width) ? width : width + 'px'};
-    height: ${isNaN(height) ? height : height + 'px'};
+const parseMaxHeight = height => css`
+    max-height: ${isNaN(height) ? height : height + 'px'};
 `;
-export const parseMinWidth = width => css`
-    min-width: ${isNaN(width) ? width : width + 'px'};
+const parseMaxWidth = width => css`
+    max-width: ${isNaN(width) ? width : width + 'px'};
+`;
+const parseMaxWidthHeight = (width, height = width) => css`
+    max-width: ${isNaN(width) ? width : width + 'px'};
+    max-height: ${isNaN(height) ? height : height + 'px'};
 `;
-export const parseMinHeight = height => css`
+const parseMinHeight = height => css`
     min-height: ${isNaN(height) ? height : height + 'px'};
 `;
-export const parseMinWidthHeight = (width, height = width) => css`
+const parseMinWidth = width => css`
+    min-width: ${isNaN(width) ? width : width + 'px'};
+`;
+const parseMinWidthHeight = (width, height = width) => css`
     min-width: ${isNaN(width) ? width : width + 'px'};
     min-height: ${isNaN(height) ? height : height + 'px'};
 `;
-export const parseMaxWidth = width => css`
-    max-width: ${isNaN(width) ? width : width + 'px'};
+const parseWidth = width => css`
+    width: ${isNaN(width) ? width : width + 'px'};
 `;
-export const parseMaxHeight = height => css`
-    max-height: ${isNaN(height) ? height : height + 'px'};
+const parseWidthHeight = (width, height = width) => css`
+    width: ${isNaN(width) ? width : width + 'px'};
+    height: ${isNaN(height) ? height : height + 'px'};
 `;
-export const parseMaxWidthHeight = (width, height = width) => css`
-    max-width: ${isNaN(width) ? width : width + 'px'};
-    max-height: ${isNaN(height) ? height : height + 'px'};
-`;
+const pointerEventsNone = css`
+    pointer-events: none;
+`;
+const positionAbsolute = css`
+    position: absolute;
+`;
+const positionFixed = css`
+    position: fixed;
+`;
+const positionRelative = css`
+    position: relative;
+`;
+const textCapitalize = css`
+    text-transform: capitalize;
+`;
+const textCenter = css`
+    text-align: center;
+`;
+const textUppercase = css`
+    text-transform: uppercase;
+`;
+const userSelectNone = css`
+    user-select: none;
+`;
+const whiteSpaceNoWrap = css`
+    white-space: nowrap;
+`;
+export { alignCenter, alignEnd, alignStart, backgroundTransparent, border, borderBox, borderNone, borderRadius100, borderRadius4px, borderRadius50, boxShadowNone, breakAll, breakWord, cursorDefault, cursorInherit, cursorNoDrop, cursorNotAllowed, cursorPointer, displayBlock, displayInlineBlock, displayNone, ellipsis, flexCol, flexColReverse, flexRow, flexRowReverse, flexWrap, inlineFlex, justifyBetween, justifyCenter, justifyEnd, justifyStart, noBorder, noBoxShadow, noMargin, noPadding, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, textCapitalize, textCenter, textUppercase, userSelectNone, whiteSpaceNoWrap };