@ctlyst.id/internal-ui 1.0.4-canary.4 → 1.0.4-canary.5

package/dist/internal-ui.esm.js

@@ -1202,8 +1202,6 @@ const DatePickerMonth = ({
   onChange,
   min,
   max,
-  widthEmpty,
-  widthFilled,
   ...props
 }) => {
   const [date, setDate] = React__default.useState(null);
@@ -1216,11 +1214,14 @@ const DatePickerMonth = ({
           display: none;
           -webkit-appearance: none;
         }
+        input[value=''] {
+          width: 58px;
+        }
       `
   }, /*#__PURE__*/React__default.createElement(Input$1, {
     "data-test-id": props['data-test-id'],
     type: "date",
-    width: date ? widthFilled : widthEmpty,
+    width: date ? '51px' : '58px',
     onChange: e => {
       onChange(e.target.value);
       setDate(e.target.value);
@@ -1245,9 +1246,7 @@ const DatePickerMonth = ({
   }));
 };
 DatePickerMonth.defaultProps = {
-  'data-test-id': '',
-  widthEmpty: '58px',
-  widthFilled: '51px'
+  'data-test-id': ''
 };
 
 const transparent = 'transparent';
@@ -1657,9 +1656,7 @@ const MultiDatePickerMonth = ({
   onChange,
   isError = false,
   min = '2020-01-01',
-  max = '2020-12-31',
-  widthEmpty,
-  widthFilled
+  max = '2020-12-31'
 }) => {
   const [date, setDate] = React__default.useState([null, null]);
   return /*#__PURE__*/React__default.createElement(MultiDateWrapper, {
@@ -1671,9 +1668,7 @@ const MultiDatePickerMonth = ({
       setDate([val, date[1]]);
     },
     min: min,
-    max: max,
-    widthEmpty: widthEmpty,
-    widthFilled: widthFilled
+    max: max
   }), /*#__PURE__*/React__default.createElement(Box, null, "-"), /*#__PURE__*/React__default.createElement(DatePickerMonth, {
     "data-test-id": "CT_DatePickerMonth_EndDate",
     onChange: val => {
@@ -1681,17 +1676,13 @@ const MultiDatePickerMonth = ({
       setDate([date[0], val]);
     },
     min: min,
-    max: max,
-    widthEmpty: widthEmpty,
-    widthFilled: widthFilled
+    max: max
   }));
 };
 MultiDatePickerMonth.defaultProps = {
   min: '2020-01-01',
   max: '2020-12-31',
-  isError: false,
-  widthEmpty: '58px',
-  widthFilled: '51px'
+  isError: false
 };
 
 /* eslint-disable no-nested-ternary */
@@ -2369,23 +2360,46 @@ PaginationFilter.defaultProps = {
   label: undefined
 };
 
+const SelectWrapper = ({
+  children,
+  isError = false
+}) => {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    css: css`
+        .react-select__control {
+          border-color: ${isError ? colors.danger['500'] : colors.neutral['400']} !important;
+        }
+
+        .react-select__control:hover {
+          border-color: ${isError ? colors.danger['500'] : colors.primary['500']} !important;
+        }
+      `
+  }, children);
+};
+SelectWrapper.defaultProps = {
+  isError: false
+};
+
 const styleMd = textStyles.text.sm;
 const selectStyle = {
   fontSize: styleMd.fontSize,
   lineHeight: styleMd.lineHeight,
   letterSpacing: 0
 };
-function selectStyles(colorMode) {
+function selectStyles(colorMode, isError) {
+  const boxShadowStyle = isError ? `0 0 0 1px ${colors.danger['500']}` : `0 0 0 1px ${colors.primary['500']}`;
   return {
-    control: base => colorMode === 'dark' ? {
+    control: (base, state) => colorMode === 'dark' ? {
       ...base,
       ...selectStyle,
       background: 'transparent',
       color: colors.primary['300'],
-      borderColor: colors.secondary['500']
+      borderColor: colors.secondary['500'],
+      boxShadow: state.isFocused ? boxShadowStyle : `inherit`
     } : {
       ...base,
-      ...selectStyle
+      ...selectStyle,
+      boxShadow: state.isFocused ? boxShadowStyle : colors.neutral['500']
     },
     option: (base, {
       isSelected
@@ -2455,68 +2469,88 @@ const themeSelect = theme => {
   };
 };
 
+/* eslint-disable react/require-default-props */
 function Select({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
-      ...selectStyles(colorMode),
-      ...styles
+      ...selectStyles(colorMode, isError)
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 function SelectAsync({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(AsyncPaginate, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(AsyncPaginate, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 function SelectAsyncCreatable({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 function SelectCreatable({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = useColorMode();
-  return /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {