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

package/dist/internal-ui.esm.js

@@ -2360,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
@@ -2446,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) => {