diginet-core-ui 1.3.89-beta.4 → 1.3.90

package/components/avatar/index.js

@@ -1,19 +1,20 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { jsx, css, keyframes } from '@emotion/core';
 import AvatarDefault from "../../assets/avatar/default.svg";
-import { ButtonIcon, Image, ModalSample, Notify, Popover, Typography } from "./..";
-import OptionWrapper from "../others/option-wrapper";
+import { ButtonIcon, ModalSample, Popover, Popup, Typography } from "./..";
 import { getGlobal } from "../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, isValidElement, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { borderNone, borderRadius, boxContent, cursorInherit, cursorPointer, displayBlock, displayFlex, displayInlineFlex, displayNone, flexCol, itemsCenter, overflowHidden, parseMinWidth, parseWidthHeight, pd, positionAbsolute, positionRelative, userSelectNone, z } from "../../styles/general";
+import { itemsCenter, borderNone, displayBlock, displayNone, flexCol, displayInlineFlex, overflowHidden, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames, isMobile } from "../../utils";
+import { classNames, isMobile, randomString } from "../../utils";
+import { useIntersection } from "../../utils/intersectionObserver";
+import OptionWrapper from "../others/option-wrapper";
 const {
   colors: {
     system: {
-      white: systemWhite
+      white
     },
     fill: {
       tooltip: fillTooltip
@@ -21,8 +22,19 @@ const {
     text: {
       tooltip: textTooltip
     }
-  }
+  },
+  spacing,
+  zIndex: zIndexCORE
 } = useTheme();
+const existed = {},
+  urlAvatar = {};
+const blurKeyframe = keyframes`
+    0% { -webkit-filter: blur(4px);}
+    25% { -webkit-filter: blur(3px);}
+    50% { -webkit-filter: blur(2px);}
+    75% { -webkit-filter: blur(1px);}
+    100% { -webkit-filter: blur(0px);}
+`;
 const checkFileType = (type, matchType) => {
   if (typeof matchType === 'object' && matchType instanceof RegExp) {
     return matchType.test(type);
@@ -61,22 +73,30 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   width,
   wrongTypeError
 }, reference) => {
-  if (!reference) reference = useRef(null);
   if (!defaultSrc) defaultSrc = AvatarDefault;
   const ref = useRef(null);
   const inputRef = useRef(null);
   const avatarRef = useRef(null);
-  const notifyRef = useRef(null);
+  const popupRef = useRef(null);
+  const [unique] = useState(randomString(6, {
+    allowNumber: false,
+    allowSymbol: false
+  }));
   const [viewAvatar, setViewAvatar] = useState(false);
   const [viewMoreInfo, setViewMoreInfo] = useState(false);
   const [srcState, setSrcState] = useState(src);
+  const [isInView, setIsInView] = useState(false);
+  const [onLoaded, setOnLoaded] = useState(false);
+  useIntersection(ref, () => {
+    setIsInView(true);
+  });
   const _ActionIconCSS = ActionIconCSS(actionIconWidth);
-  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly || disabled);
-  const _AvatarContainerCSS = AvatarContainerCSS(_ActionIconCSS.name);
+  const _AvatarPreviewCSS = AvatarPreviewCSS(readOnly);
+  const _AvatarContainerCSS = AvatarContainerCSS(_AvatarPreviewCSS.name, _ActionIconCSS.name);
   const _AvatarRootCSS = AvatarRootCSS(width, height, outlined);
   const _isMobile = isMobile.any();
   const triggerInput = e => {
-    if (e || !srcState) {
+    if (e || !existed[unique]) {
       inputRef.current.click();
     } else {
       // on View
@@ -89,22 +109,29 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     const reader = new FileReader();
     if (!checkFileType(file.type, matchType)) {
       input.target.value = '';
-      notifyRef.current.instance.show(wrongTypeError);
+      popupRef.current.instance.show({
+        description: wrongTypeError
+      });
       return;
     }
     if (+maxSize && file.size > maxSize * 1024 ** 2) {
       input.target.value = '';
-      notifyRef.current.instance.show(maxSizeError);
+      popupRef.current.instance.show({
+        description: maxSizeError
+      });
       return;
     }
     reader.onload = e => {
-      setSrcState(e.target.result);
+      urlAvatar[unique] = e.target.result;
+      setSrcState(urlAvatar[unique]);
+      existed[unique] = true;
     };
     reader.readAsDataURL(file);
     !!onChange && onChange(input);
   };
   const onRemoveAvatar = () => {
     setSrcState(null);
+    existed[unique] = false;
     inputRef.current.value = '';
     !!onRemove && onRemove();
   };
@@ -125,6 +152,32 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       type: 'p1'
     }, getGlobal('noDataText'));
   };
+  const renderImage = () => {
+    const _image = jsx(Fragment, null, !onLoaded && jsx("img", {
+      src: defaultSrc,
+      alt: '',
+      style: {
+        objectFit: 'cover'
+      }
+    }), jsx("img", {
+      css: blurAnimationCSS,
+      src: srcState,
+      alt: srcState,
+      style: {
+        objectFit: 'cover'
+      },
+      onLoad: () => setOnLoaded(true)
+    }));
+    if (lazyLoading) {
+      return isInView ? _image : jsx("img", {
+        src: defaultSrc,
+        alt: '',
+        style: {
+          objectFit: 'cover'
+        }
+      });
+    } else return _image;
+  };
   const showMoreInfo = () => {
     if (hoverAble) setViewMoreInfo(true);
   };
@@ -148,11 +201,22 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
   useEffect(() => {
     if (src) {
-      setSrcState(src);
+      if (isInView || !lazyLoading) {
+        inputRef.current.value = '';
+        const img = document.createElement('img');
+        urlAvatar[unique] = src;
+        img.src = src;
+        img.alt = '';
+        img.onerror = () => {
+          setSrcState(defaultSrc);
+          existed[unique] = false;
+        };
+        img.onload = () => {
+          setSrcState(src);
+          existed[unique] = true;
+        };
+      }
     }
-    return () => {
-      setSrcState(defaultSrc);
-    };
   }, [src]);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -166,9 +230,11 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx(Fragment, null, jsx("div", {
-      css: _AvatarContainerCSS
-    }, jsx("div", {
+      css: _AvatarContainerCSS,
       ref: ref,
+      id: unique,
+      className: classNames(disabled && 'disabled')
+    }, jsx("div", {
       css: _AvatarRootCSS,
       className: classNames('DGN-UI-Avatar', className),
       style: style,
@@ -181,21 +247,14 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       onChange: onChangeAvatar,
       disabled: disabled
     }), jsx("div", {
-      ref: avatarRef,
       css: _AvatarPreviewCSS,
       onClick: _onClick,
+      ref: avatarRef,
       onMouseEnter: _onMouseEnter,
       onMouseLeave: _onMouseLeave,
       tabIndex: "-1",
       onBlur: closeMoreInfo
-    }, jsx(Image, {
-      circular: true,
-      defaultSrc: defaultSrc,
-      src: srcState,
-      width: '100%',
-      height: '100%',
-      lazyLoading: lazyLoading
-    }))), allowEdit && !readOnly && !disabled ? jsx("span", {
+    }, renderImage())), allowEdit && !readOnly && !disabled && jsx("span", {
       css: _ActionIconCSS
     }, jsx(ButtonIcon, {
       viewType: 'ghost',
@@ -204,7 +263,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height: actionIconHeight,
       className: 'icon-edit',
       onClick: triggerInput
-    }), clearAble && srcState ? jsx(ButtonIcon, {
+    }), clearAble && srcState && jsx(ButtonIcon, {
       viewType: 'ghost',
       name: 'Delete',
       width: actionIconWidth,
@@ -214,55 +273,68 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: {
         marginTop: '8px'
       }
-    }) : null) : null), jsx(ModalSample, {
+    }))), jsx(ModalSample, {
       open: viewAvatar,
       onClose: () => setViewAvatar(false),
       width: 'max-content'
-    }, jsx(Image, {
-      defaultSrc: defaultSrc,
-      src: srcState,
-      width: '100%',
-      height: '100%'
-    })), hoverAble ? jsx(Popover, {
+    }, jsx("img", {
+      src: urlAvatar[unique],
+      alt: "",
+      style: {
+        objectFit: 'cover',
+        maxHeight: '100%',
+        maxWidth: '100%',
+        margin: 'auto',
+        display: 'block'
+      }
+    })), hoverAble && jsx(Popover, {
       arrow: true,
       open: viewMoreInfo,
       pressESCToClose: false,
       bgColor: fillTooltip,
       anchor: avatarRef,
       fullScreen: false,
+      width: 'max-content',
       direction: direction
     }, jsx("div", {
       css: MoreInfoCSS
-    }, typeof data === 'function' ? data() : renderData())) : null, jsx(Notify, {
-      ref: notifyRef,
-      progressing: true,
-      autoDisappear: true,
-      color: 'danger'
+    }, typeof data === 'function' ? data() : renderData())), !disabled && !readOnly && jsx(Popup, {
+      ref: popupRef,
+      type: 'danger'
     }));
-  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, srcState, viewAvatar, viewMoreInfo]);
+  }, [actionIconHeight, actionIconWidth, allowEdit, clearAble, data, defaultSrc, direction, disabled, height, hoverAble, lazyLoading, matchType, maxSize, maxSizeError, outlined, readOnly, width, isInView, onLoaded, srcState, viewAvatar, viewMoreInfo]);
 }));
 const ActionIconCSS = actionIconWidth => css`
-    ${displayFlex};
     ${flexCol};
     ${positionAbsolute};
-    ${parseMinWidth(actionIconWidth)};
     right: ${-actionIconWidth}px;
+    min-width: ${actionIconWidth}px;
     transition: opacity 0.5s;
     opacity: 0;
-    ${z(2)};
+    z-index: ${zIndexCORE(2)};
 `;
-const AvatarPreviewCSS = isDisabled => css`
+const AvatarPreviewCSS = readOnly => css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
-    ${parseWidthHeight('100%')};
-    ${borderRadius('50%')};
-    ${isDisabled ? cursorInherit : cursorPointer};
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    cursor: ${readOnly ? 'initial' : 'pointer'};
 `;
-const AvatarContainerCSS = ActionIconCSSName => css`
+const AvatarContainerCSS = (AvatarPreviewCSSName, ActionIconCSSName) => css`
     ${displayInlineFlex};
     ${positionRelative};
     ${itemsCenter};
+    &.disabled {
+        .css-${AvatarPreviewCSSName} {
+            ${pointerEventsNone}
+            cursor: inherit;
+        }
+        .css-${ActionIconCSSName} {
+            display: none !important;
+        }
+    }
     &:hover {
         .css-${ActionIconCSSName} {
             opacity: 1;
@@ -275,18 +347,25 @@ const AvatarRootCSS = (width, height, outlined) => css`
     ${overflowHidden};
     ${userSelectNone};
     ${borderNone};
-    ${boxContent};
     ${parseWidthHeight(width, height)};
-    ${borderRadius('50%')};
-    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${systemWhite}` : outlined};
+    border: ${typeof outlined === 'boolean' && outlined ? `1px solid ${white}` : outlined};
+    border-radius: 50%;
+    box-sizing: content-box;
     input {
         ${displayNone};
     }
+    img {
+        width: 100%;
+        height: 100%;
+    }
 `;
 const MoreInfoCSS = css`
     ${displayBlock};
     ${positionRelative};
-    ${pd([2])};
+    padding: ${spacing([2])};
+`;
+const blurAnimationCSS = css`
+    animation: ${blurKeyframe} 1s ease;
 `;
 Avatar.defaultProps = {
   actionIconHeight: 24,

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

@@ -1301,8 +1301,7 @@ Attachment.defaultProps = {
     maxSize: getGlobal(['errorDefault', 'maxSize']),
     fileType: getGlobal(['errorDefault', 'fileType']),
     existingFile: getGlobal(['errorDefault', 'existingFile'])
-  },
-  viewType: 'detail'
+  }
 };
 Attachment.propTypes = {
   /** File types that can be accepted. */

package/components/form-control/date-range-picker/index.js

@@ -1182,7 +1182,7 @@ DateRangePicker.propTypes = {
   style: PropTypes.object,
   /** Text align of the input. */
   textAlign: PropTypes.oneOf(['center', 'end', 'start']),
-  /** The value of the input element, required for a controlled component. String must be [Date string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date): YYYY/MM/DD, MM/DD/YYYY,...*/
+  /** The value of the input element, required for a controlled component. */
   value: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string])),
   /** The variant to use. */
   viewType: PropTypes.oneOf(['outlined', 'underlined'])

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

@@ -6,18 +6,29 @@ import { getGlobal } from "../../../global";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
-import { bgColor, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius4px, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, fill, flexColReverse, flexRow, flexWrap, inset, insetX, italic, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, textColor, userSelectNone, z } from "../../../styles/general";
+import { bgColor, bgTransparent, border, borderNone, borderRadius, borderRadius4px, boxBorder, breakWord, cursorDefault, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, flexColReverse, flexRow, flexWrap, inset, insetX, itemsCenter, justifyCenter, justifyStart, mgb, mgl, mgr, mgt, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMinHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdt, pdy, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, userSelectNone, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { classNames, isMobile, mapParent, randomString, refType as ref, updatePosition } from "../../../utils";
 const {
   colors: {
     system: {
+      active: systemActive,
+      disabled: systemDisabled,
+      rest: systemRest,
       white: systemWhite
     },
+    semantic: {
+      danger: semanticDanger
+    },
     fill: {
+      hover: fillHover,
       'scrollbar-tabbar': fillScrollbar
     },
+    line: {
+      focus: lineFocus
+    },
     text: {
+      main: textMain,
       sub: textSub
     }
   },
@@ -1178,17 +1189,16 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           return false;
         }
       }
-    }) : jsx("div", {
-      css: _DropdownInputCSS,
-      onClick: onClickInput
-    }, jsx(Typography, {
+    }) : jsx(Fragment, null, jsx(Typography, {
       ref: inputRef,
+      css: _DropdownInputCSS,
       hoverTooltip: true,
       lineClamp: multilineSelectedItem ? undefined : 1,
       type: 'p1',
       style: {
         lineHeight: multiple ? '30px' : '24px'
       },
+      onClick: onClickInput,
       tabIndex: -1
     }, textValue))), jsx("div", {
       ref: iconRef,
@@ -1246,7 +1256,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
     ${paragraph1};
     ${disabled ? cursorNotAllowed : readOnly ? cursorDefault : cursorPointer};
     ${parseWidth('100%')};
-    ${textColor('text.main')};
+    color: ${textMain};
     ${pdt(0)};
     ${pdb([viewType !== 'outlined' ? 0 : 'inherit'])};
     ${pdl([viewType !== 'outlined' ? 0 : 4])};
@@ -1267,7 +1277,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
             ${itemsCenter};
             ${justifyCenter};
             content: '${placeholder}';
-            ${textColor('text.sub')};
+            color: ${textSub};
         }
         &:not(:empty)::after {
             visibility: hidden;
@@ -1286,7 +1296,7 @@ const DropdownInputCSS = (viewType, multiple, placeholder, disabled, readOnly) =
         }
     }
     .DGN-UI-Typography {
-        ${disabled && textColor('system.disabled')};
+        ${disabled && `color: ${systemDisabled}`};
     }
 `;
 const IconCSS = viewType => css`
@@ -1303,24 +1313,24 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${boxBorder};
               ${parseWidth('100%')};
               ${pdy([multiple ? 0.25 : 1])};
-              ${!disabled && css`
-                  &:not(:focus-within):hover {
-                      &::before {
-                          ${borderBottomColor('system.active')};
-                      }
-                      .css-${DropdownInputCSSName} {
-                          ${textColor('system.active')};
-                      }
-                  }
+              ${!disabled && `
+                    &:not(:focus-within):hover {
+                        &::before {
+                            border-bottom-color: ${systemActive};
+                        }
+                        .css-${DropdownInputCSSName} {
+                            color: ${systemActive};
+                        }
+                    }
               `}
               &:focus-within {
-                  ${borderBottomColor('line.focus')};
+                  border-bottom-color: ${lineFocus};
                   &::after {
-                      ${borderBottomColor('inherit')};
+                      border-bottom-color: inherit;
                       transform: scaleX(1);
                   }
                   .css-${DropdownInputCSSName} {
-                      ${textColor('system.active')};
+                      color: ${systemActive};
                   }
               }
               &.dropdown-showing {
@@ -1332,27 +1342,27 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '${placeholder}';
                   ${parseHeight('100%')};
                   ${overflowHidden};
-                  ${textColor('text.sub')};
+                  color: ${textSub};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  ${textColor('text.sub')};
+                  color: ${textSub};
               }
               &::before {
                   ${positionAbsolute};
                   content: '';
                   ${insetX(0)};
                   bottom: 0;
-                  ${viewType === 'underlined' && borderBottom(1, disabled ? 'system.disabled' : 'system.rest')}
+                  ${viewType === 'underlined' && `border-bottom: 1px solid ${disabled ? systemDisabled : systemRest};`}
               }
               &::after {
                   ${positionAbsolute};
                   content: '';
                   ${insetX(0)};
                   bottom: -1px;
-                  ${borderBottom(2, 'transparent')};
+                  border-bottom: 2px solid transparent;
                   transform: scaleX(0);
                   transform-origin: center;
                   transition: all 0.2s ease;
@@ -1364,21 +1374,21 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
               ${positionRelative};
               ${borderRadius4px};
               ${boxBorder};
-              ${border(1, disabled ? 'system.disabled' : 'system.rest')};
+              ${border(1, disabled ? systemDisabled : systemRest)};
               ${parseWidth('100%')};
               ${parseMinHeight(40)};
               ${mgt([0.5])};
-              ${!disabled && css`
-                  &:not(:focus-within):hover {
-                      ${bgColor('fill.hover')};
-                      ${borderColor('system.active')};
-                      input {
-                          ${bgColor('fill.hover')};
-                      }
-                  }
+              ${!disabled && `
+                &:not(:focus-within):hover {
+                    ${bgColor(fillHover)};
+                    border-color: ${systemActive};
+                    input {
+                        ${bgColor(fillHover)};
+                    }
+                }
               `}
               &:focus-within {
-                  ${borderColor('line.focus')};
+                  border-color: ${lineFocus};
               }
               &.dropdown-showing {
                   .icon-dropdown {
@@ -1389,13 +1399,13 @@ const DropdownFormCSS = (viewType, multiple, disabled, placeholder, DropdownInpu
                   content: '${placeholder}';
                   ${parseHeight('100%')};
                   ${overflowHidden};
-                  ${textColor('text.sub')};
+                  color: ${textSub};
                   display: -webkit-box;
                   -webkit-line-clamp: 1;
                   -webkit-box-orient: vertical;
               }
               &::placeholder {
-                  ${textColor('text.sub')};
+                  color: ${textSub};
               }
               &::after {
                   ${positionAbsolute};
@@ -1414,7 +1424,7 @@ const DropdownListCSS = loading => css`
     ${parseWidth('100%')};
     ${parseMaxHeight(280)};
     ${loading ? overflowHidden : overflowAuto};
-    ${bgColor('system.white')};
+    ${bgColor(systemWhite)};
     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
     ${z(1)};
     &::-webkit-scrollbar {
@@ -1444,19 +1454,19 @@ const DropdownItemCSS = (multiple, selectBox) => css`
     ${userSelectNone};
     ${parseMinHeight(40)};
     ${parseWidth('100%')};
-    ${bgColor('system.white')};
+    ${bgColor(systemWhite)};
     ${pd([2, multiple && selectBox ? 0 : 4])};
-    ${textColor('text.main')};
+    color: ${textMain};
     &.no-data {
         ${justifyCenter};
         ${cursorDefault};
-        ${italic};
+        font-style: italic;
     }
     &:not(.no-data):hover,
     &:not(.no-data):focus {
         ${outlineNone};
-        ${bgColor('fill.hover')};
-        ${textColor('system.active')};
+        ${bgColor(fillHover)};
+        color: ${systemActive};
     }
 `;
 const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
@@ -1466,21 +1476,21 @@ const DropdownRootCSS = (DropdownFormCSSName, DropdownInputCSSName) => css`
     ${parseHeight('max-content')};
     &.error {
         .css-${DropdownFormCSSName} {
-            ${borderColor('semantic.danger')};
+            border-color: ${semanticDanger};
             path {
-                ${fill('semantic.danger')};
+                fill: ${semanticDanger};
             }
             &::before {
-                ${borderColor('semantic.danger')};
+                border-color: ${semanticDanger};
             }
         }
     }
     &.dgn-dropdown-loading,
     &.disabled {
         .css-${DropdownFormCSSName} {
-            ${borderColor('system.disabled')};
+            border-color: ${systemDisabled};
             &::before {
-                ${borderColor('system.disabled')};
+                border-color: ${systemDisabled};
             }
         }
     }
@@ -1497,11 +1507,10 @@ const DropdownCSS = (top, left, width, isMobile, allowSearch) => css`
     ${parseWidth(width)};
     top: ${top}px;
     left: ${left}px;
-    ${bgColor('system.white')};
+    ${bgColor(systemWhite)};
     ${z(1)};
-    ${isMobile && allowSearch && css`
+    ${isMobile && allowSearch && `
         ${parseHeight('max-content')};
-        ${displayFlex};
         ${flexColReverse};
         bottom: 0;
         top: auto;

package/components/grid/index.js

@@ -1,7 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import { boxBorder } from "../../styles/general";
@@ -233,5 +232,4 @@ Grid.propTypes = {
   /** 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 { Grid };
-export default OptionWrapper(Grid);
+export default Grid;