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

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

@@ -4,6 +4,8 @@ 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,6 +4,8 @@ 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/internal-ui.cjs.development.js

@@ -1208,6 +1208,8 @@ const DatePickerMonth = ({
   onChange,
   min,
   max,
+  widthEmpty,
+  widthFilled,
   ...props
 }) => {
   const [date, setDate] = React__default.useState(null);
@@ -1220,14 +1222,11 @@ 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 ? '51px' : '58px',
+    width: date ? widthFilled : widthEmpty,
     onChange: e => {
       onChange(e.target.value);
       setDate(e.target.value);
@@ -1252,7 +1251,9 @@ const DatePickerMonth = ({
   }));
 };
 DatePickerMonth.defaultProps = {
-  'data-test-id': ''
+  'data-test-id': '',
+  widthEmpty: '58px',
+  widthFilled: '51px'
 };
 
 const transparent = 'transparent';
@@ -1662,7 +1663,9 @@ const MultiDatePickerMonth = ({
   onChange,
   isError = false,
   min = '2020-01-01',
-  max = '2020-12-31'
+  max = '2020-12-31',
+  widthEmpty,
+  widthFilled
 }) => {
   const [date, setDate] = React__default.useState([null, null]);
   return /*#__PURE__*/React__default.createElement(MultiDateWrapper, {
@@ -1674,7 +1677,9 @@ const MultiDatePickerMonth = ({
       setDate([val, date[1]]);
     },
     min: min,
-    max: max
+    max: max,
+    widthEmpty: widthEmpty,
+    widthFilled: widthFilled
   }), /*#__PURE__*/React__default.createElement(react.Box, null, "-"), /*#__PURE__*/React__default.createElement(DatePickerMonth, {
     "data-test-id": "CT_DatePickerMonth_EndDate",
     onChange: val => {
@@ -1682,13 +1687,17 @@ const MultiDatePickerMonth = ({
       setDate([date[0], val]);
     },
     min: min,
-    max: max
+    max: max,
+    widthEmpty: widthEmpty,
+    widthFilled: widthFilled
   }));
 };
 MultiDatePickerMonth.defaultProps = {
   min: '2020-01-01',
   max: '2020-12-31',
-  isError: false
+  isError: false,
+  widthEmpty: '58px',
+  widthFilled: '51px'
 };
 
 /* eslint-disable no-nested-ternary */