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

package/dist/components/select/components/select-async-creatable.d.ts

@@ -1,4 +1,5 @@
 import type { GroupBase } from 'react-select';
 import type { AsyncCreatableProps } from 'react-select/async-creatable';
-export declare type SelectAsyncCreatableProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = AsyncCreatableProps<Option, IsMulti, Group>;
-export default function SelectAsyncCreatable<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ styles, ...rest }: SelectAsyncCreatableProps<Option, IsMulti, Group>): JSX.Element;
+import type { ExtendedSelectProps } from './types/select.types';
+export declare type SelectAsyncCreatableProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = AsyncCreatableProps<Option, IsMulti, Group> & ExtendedSelectProps;
+export default function SelectAsyncCreatable<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ styles, isError, ...rest }: SelectAsyncCreatableProps<Option, IsMulti, Group>): JSX.Element;

package/dist/components/select/components/select-async.d.ts

@@ -1,5 +1,6 @@
 import type { GroupBase } from 'react-select';
 import type { AsyncPaginateProps } from 'react-select-async-paginate';
-export declare type SelectAsyncProps<OptionType = unknown, Group extends GroupBase<OptionType> = GroupBase<OptionType>, Additional = unknown, IsMulti extends boolean = false> = AsyncPaginateProps<OptionType, Group, Additional, IsMulti>;
-declare function SelectAsync<OptionType, Group extends GroupBase<OptionType>, Additional, IsMulti extends boolean = false>({ styles, ...rest }: SelectAsyncProps<OptionType, Group, Additional, IsMulti>): JSX.Element;
+import type { ExtendedSelectProps } from './types/select.types';
+export declare type SelectAsyncProps<OptionType = unknown, Group extends GroupBase<OptionType> = GroupBase<OptionType>, Additional = unknown, IsMulti extends boolean = false> = AsyncPaginateProps<OptionType, Group, Additional, IsMulti> & ExtendedSelectProps;
+declare function SelectAsync<OptionType, Group extends GroupBase<OptionType>, Additional, IsMulti extends boolean = false>({ styles, isError, ...rest }: SelectAsyncProps<OptionType, Group, Additional, IsMulti>): JSX.Element;
 export default SelectAsync;

package/dist/components/select/components/select-creatable.d.ts

@@ -1,4 +1,5 @@
 import type { GroupBase } from 'react-select';
 import type { CreatableProps } from 'react-select/creatable';
-export declare type SelectCreatableProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = CreatableProps<Option, IsMulti, Group>;
-export default function SelectCreatable<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ styles, ...rest }: SelectCreatableProps<Option, IsMulti, Group>): JSX.Element;
+import type { ExtendedSelectProps } from './types/select.types';
+export declare type SelectCreatableProps<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = CreatableProps<Option, IsMulti, Group> & ExtendedSelectProps;
+export default function SelectCreatable<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ styles, isError, ...rest }: SelectCreatableProps<Option, IsMulti, Group>): JSX.Element;

package/dist/components/select/components/select-wrapper.d.ts

@@ -0,0 +1,6 @@
+import type { FC, PropsWithChildren } from 'react';
+interface SelectWrapperProps {
+    isError?: boolean;
+}
+declare const SelectWrapper: FC<PropsWithChildren<SelectWrapperProps>>;
+export default SelectWrapper;

package/dist/components/select/components/select.d.ts

@@ -1,4 +1,5 @@
 import type { GroupBase, Props as ReactSelectProps } from 'react-select';
-export declare type SelectProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = ReactSelectProps<Option, IsMulti, Group>;
-declare function Select<OptionType, Group extends GroupBase<OptionType>, IsMulti extends boolean = false>({ styles, ...rest }: SelectProps<OptionType, IsMulti, Group>): JSX.Element;
+import type { ExtendedSelectProps } from './types/select.types';
+export declare type SelectProps<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>> = ReactSelectProps<Option, IsMulti, Group> & ExtendedSelectProps;
+declare function Select<OptionType, Group extends GroupBase<OptionType>, IsMulti extends boolean = false>({ styles, isError, ...rest }: SelectProps<OptionType, IsMulti, Group>): JSX.Element;
 export default Select;

package/dist/components/select/components/types/select.types.d.ts

@@ -0,0 +1,3 @@
+export declare type ExtendedSelectProps = {
+    isError?: boolean;
+};

package/dist/components/select/components/utils.d.ts

@@ -1,6 +1,6 @@
 import type { ColorMode } from '@chakra-ui/system';
 import type { GroupBase, StylesConfig, Theme } from 'react-select';
-export declare function selectStyles<OptionType = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(colorMode?: ColorMode): StylesConfig<OptionType, IsMulti, Group> | undefined;
+export declare function selectStyles<OptionType = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<OptionType> = GroupBase<OptionType>>(colorMode: ColorMode, isError: boolean): StylesConfig<OptionType, IsMulti, Group> | undefined;
 export declare const themeSelect: (theme: Theme) => {
     colors: {
         primary: string;

package/dist/internal-ui.cjs.development.js

@@ -2366,23 +2366,46 @@ PaginationFilter.defaultProps = {
   label: undefined
 };
 
+const SelectWrapper = ({
+  children,
+  isError = false
+}) => {
+  return /*#__PURE__*/React__default.createElement(react.Box, {
+    css: react$1.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
@@ -2452,68 +2475,88 @@ const themeSelect = theme => {
   };
 };
 
+/* eslint-disable react/require-default-props */
 function Select({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = system.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
   } = system.useColorMode();
-  return /*#__PURE__*/React__default.createElement(reactSelectAsyncPaginate.AsyncPaginate, Object.assign({}, rest, {
+  return /*#__PURE__*/React__default.createElement(SelectWrapper, {
+    isError: isError
+  }, /*#__PURE__*/React__default.createElement(reactSelectAsyncPaginate.AsyncPaginate, Object.assign({
+    classNamePrefix: "react-select"
+  }, rest, {
     styles: {
-      ...selectStyles(colorMode),
+      ...selectStyles(colorMode, isError),
       ...styles
     },
     theme: themeSelect
-  }));
+  })));
 }
 
 function SelectAsyncCreatable({
   styles,
+  isError = false,
   ...rest
 }) {
   const {
     colorMode
   } = system.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
   } = system.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__*/react.forwardRef((props, ref) => {