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

package/dist/components/datepicker/components/datepicker-month/datepicker-month.d.ts

@@ -4,8 +4,6 @@ export interface DatePickerMonthProps {
     'data-test-id'?: string;
     min: string;
     max: string;
-    widthEmpty?: string | number;
-    widthFilled?: string | number;
 }
 declare const DatePickerMonth: FC<DatePickerMonthProps>;
 export default DatePickerMonth;

package/dist/components/datepicker/components/datepicker-month/multi-datepicker-month.d.ts

@@ -4,8 +4,6 @@ export interface MultiDatePickerMonthProps {
     min?: string;
     max?: string;
     isError?: boolean;
-    widthEmpty?: string | number;
-    widthFilled?: string | number;
 }
 declare const MultiDatePickerMonth: FC<MultiDatePickerMonthProps>;
 export default MultiDatePickerMonth;

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

@@ -1208,8 +1208,6 @@ const DatePickerMonth = ({
   onChange,
   min,
   max,
-  widthEmpty,
-  widthFilled,
   ...props
 }) => {
   const [date, setDate] = React__default.useState(null);
@@ -1222,11 +1220,14 @@ const DatePickerMonth = ({
           display: none;
           -webkit-appearance: none;
         }
+        input[value=''] {
+          width: 58px;
+        }
       `
   }, /*#__PURE__*/React__default.createElement(react.Input, {
     "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);
@@ -1251,9 +1252,7 @@ const DatePickerMonth = ({
   }));
 };
 DatePickerMonth.defaultProps = {
-  'data-test-id': '',
-  widthEmpty: '58px',
-  widthFilled: '51px'
+  'data-test-id': ''
 };
 
 const transparent = 'transparent';
@@ -1663,9 +1662,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, {
@@ -1677,9 +1674,7 @@ const MultiDatePickerMonth = ({
       setDate([val, date[1]]);
     },
     min: min,
-    max: max,
-    widthEmpty: widthEmpty,
-    widthFilled: widthFilled
+    max: max
   }), /*#__PURE__*/React__default.createElement(react.Box, null, "-"), /*#__PURE__*/React__default.createElement(DatePickerMonth, {
     "data-test-id": "CT_DatePickerMonth_EndDate",
     onChange: val => {
@@ -1687,17 +1682,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 */
@@ -2375,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
@@ -2461,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) => {