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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1202,8 +1202,6 @@ const DatePickerMonth = ({
1202
1202
  onChange,
1203
1203
  min,
1204
1204
  max,
1205
- widthEmpty,
1206
- widthFilled,
1207
1205
  ...props
1208
1206
  }) => {
1209
1207
  const [date, setDate] = React__default.useState(null);
@@ -1216,11 +1214,14 @@ const DatePickerMonth = ({
1216
1214
  display: none;
1217
1215
  -webkit-appearance: none;
1218
1216
  }
1217
+ input[value=''] {
1218
+ width: 58px;
1219
+ }
1219
1220
  `
1220
1221
  }, /*#__PURE__*/React__default.createElement(Input$1, {
1221
1222
  "data-test-id": props['data-test-id'],
1222
1223
  type: "date",
1223
- width: date ? widthFilled : widthEmpty,
1224
+ width: date ? '51px' : '58px',
1224
1225
  onChange: e => {
1225
1226
  onChange(e.target.value);
1226
1227
  setDate(e.target.value);
@@ -1245,9 +1246,7 @@ const DatePickerMonth = ({
1245
1246
  }));
1246
1247
  };
1247
1248
  DatePickerMonth.defaultProps = {
1248
- 'data-test-id': '',
1249
- widthEmpty: '58px',
1250
- widthFilled: '51px'
1249
+ 'data-test-id': ''
1251
1250
  };
1252
1251
 
1253
1252
  const transparent = 'transparent';
@@ -1657,9 +1656,7 @@ const MultiDatePickerMonth = ({
1657
1656
  onChange,
1658
1657
  isError = false,
1659
1658
  min = '2020-01-01',
1660
- max = '2020-12-31',
1661
- widthEmpty,
1662
- widthFilled
1659
+ max = '2020-12-31'
1663
1660
  }) => {
1664
1661
  const [date, setDate] = React__default.useState([null, null]);
1665
1662
  return /*#__PURE__*/React__default.createElement(MultiDateWrapper, {
@@ -1671,9 +1668,7 @@ const MultiDatePickerMonth = ({
1671
1668
  setDate([val, date[1]]);
1672
1669
  },
1673
1670
  min: min,
1674
- max: max,
1675
- widthEmpty: widthEmpty,
1676
- widthFilled: widthFilled
1671
+ max: max
1677
1672
  }), /*#__PURE__*/React__default.createElement(Box, null, "-"), /*#__PURE__*/React__default.createElement(DatePickerMonth, {
1678
1673
  "data-test-id": "CT_DatePickerMonth_EndDate",
1679
1674
  onChange: val => {
@@ -1681,17 +1676,13 @@ const MultiDatePickerMonth = ({
1681
1676
  setDate([date[0], val]);
1682
1677
  },
1683
1678
  min: min,
1684
- max: max,
1685
- widthEmpty: widthEmpty,
1686
- widthFilled: widthFilled
1679
+ max: max
1687
1680
  }));
1688
1681
  };
1689
1682
  MultiDatePickerMonth.defaultProps = {
1690
1683
  min: '2020-01-01',
1691
1684
  max: '2020-12-31',
1692
- isError: false,
1693
- widthEmpty: '58px',
1694
- widthFilled: '51px'
1685
+ isError: false
1695
1686
  };
1696
1687
 
1697
1688
  /* eslint-disable no-nested-ternary */
@@ -2369,23 +2360,46 @@ PaginationFilter.defaultProps = {
2369
2360
  label: undefined
2370
2361
  };
2371
2362
 
2363
+ const SelectWrapper = ({
2364
+ children,
2365
+ isError = false
2366
+ }) => {
2367
+ return /*#__PURE__*/React__default.createElement(Box, {
2368
+ css: css`
2369
+ .react-select__control {
2370
+ border-color: ${isError ? colors.danger['500'] : colors.neutral['400']} !important;
2371
+ }
2372
+
2373
+ .react-select__control:hover {
2374
+ border-color: ${isError ? colors.danger['500'] : colors.primary['500']} !important;
2375
+ }
2376
+ `
2377
+ }, children);
2378
+ };
2379
+ SelectWrapper.defaultProps = {
2380
+ isError: false
2381
+ };
2382
+
2372
2383
  const styleMd = textStyles.text.sm;
2373
2384
  const selectStyle = {
2374
2385
  fontSize: styleMd.fontSize,
2375
2386
  lineHeight: styleMd.lineHeight,
2376
2387
  letterSpacing: 0
2377
2388
  };
2378
- function selectStyles(colorMode) {
2389
+ function selectStyles(colorMode, isError) {
2390
+ const boxShadowStyle = isError ? `0 0 0 1px ${colors.danger['500']}` : `0 0 0 1px ${colors.primary['500']}`;
2379
2391
  return {
2380
- control: base => colorMode === 'dark' ? {
2392
+ control: (base, state) => colorMode === 'dark' ? {
2381
2393
  ...base,
2382
2394
  ...selectStyle,
2383
2395
  background: 'transparent',
2384
2396
  color: colors.primary['300'],
2385
- borderColor: colors.secondary['500']
2397
+ borderColor: colors.secondary['500'],
2398
+ boxShadow: state.isFocused ? boxShadowStyle : `inherit`
2386
2399
  } : {
2387
2400
  ...base,
2388
- ...selectStyle
2401
+ ...selectStyle,
2402
+ boxShadow: state.isFocused ? boxShadowStyle : colors.neutral['500']
2389
2403
  },
2390
2404
  option: (base, {
2391
2405
  isSelected
@@ -2455,68 +2469,88 @@ const themeSelect = theme => {
2455
2469
  };
2456
2470
  };
2457
2471
 
2472
+ /* eslint-disable react/require-default-props */
2458
2473
  function Select({
2459
2474
  styles,
2475
+ isError = false,
2460
2476
  ...rest
2461
2477
  }) {
2462
2478
  const {
2463
2479
  colorMode
2464
2480
  } = useColorMode();
2465
- return /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({}, rest, {
2481
+ return /*#__PURE__*/React__default.createElement(SelectWrapper, {
2482
+ isError: isError
2483
+ }, /*#__PURE__*/React__default.createElement(ReactSelect, Object.assign({
2484
+ classNamePrefix: "react-select"
2485
+ }, rest, {
2466
2486
  styles: {
2467
- ...selectStyles(colorMode),
2468
- ...styles
2487
+ ...selectStyles(colorMode, isError)
2469
2488
  },
2470
2489
  theme: themeSelect
2471
- }));
2490
+ })));
2472
2491
  }
2473
2492
 
2474
2493
  function SelectAsync({
2475
2494
  styles,
2495
+ isError = false,
2476
2496
  ...rest
2477
2497
  }) {
2478
2498
  const {
2479
2499
  colorMode
2480
2500
  } = useColorMode();
2481
- return /*#__PURE__*/React__default.createElement(AsyncPaginate, Object.assign({}, rest, {
2501
+ return /*#__PURE__*/React__default.createElement(SelectWrapper, {
2502
+ isError: isError
2503
+ }, /*#__PURE__*/React__default.createElement(AsyncPaginate, Object.assign({
2504
+ classNamePrefix: "react-select"
2505
+ }, rest, {
2482
2506
  styles: {
2483
- ...selectStyles(colorMode),
2507
+ ...selectStyles(colorMode, isError),
2484
2508
  ...styles
2485
2509
  },
2486
2510
  theme: themeSelect
2487
- }));
2511
+ })));
2488
2512
  }
2489
2513
 
2490
2514
  function SelectAsyncCreatable({
2491
2515
  styles,
2516
+ isError = false,
2492
2517
  ...rest
2493
2518
  }) {
2494
2519
  const {
2495
2520
  colorMode
2496
2521
  } = useColorMode();
2497
- return /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({}, rest, {
2522
+ return /*#__PURE__*/React__default.createElement(SelectWrapper, {
2523
+ isError: isError
2524
+ }, /*#__PURE__*/React__default.createElement(ReactSelectAsyncCreatable, Object.assign({
2525
+ classNamePrefix: "react-select"
2526
+ }, rest, {
2498
2527
  styles: {
2499
- ...selectStyles(colorMode),
2528
+ ...selectStyles(colorMode, isError),
2500
2529
  ...styles
2501
2530
  },
2502
2531
  theme: themeSelect
2503
- }));
2532
+ })));
2504
2533
  }
2505
2534
 
2506
2535
  function SelectCreatable({
2507
2536
  styles,
2537
+ isError = false,
2508
2538
  ...rest
2509
2539
  }) {
2510
2540
  const {
2511
2541
  colorMode
2512
2542
  } = useColorMode();
2513
- return /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({}, rest, {
2543
+ return /*#__PURE__*/React__default.createElement(SelectWrapper, {
2544
+ isError: isError
2545
+ }, /*#__PURE__*/React__default.createElement(ReactSelectCreatable, Object.assign({
2546
+ classNamePrefix: "react-select"
2547
+ }, rest, {
2514
2548
  styles: {
2515
- ...selectStyles(colorMode),
2549
+ ...selectStyles(colorMode, isError),
2516
2550
  ...styles
2517
2551
  },
2518
2552
  theme: themeSelect
2519
- }));
2553
+ })));
2520
2554
  }
2521
2555
 
2522
2556
  const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {