@ctlyst.id/internal-ui 1.0.4-canary.3 → 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.
@@ -2360,23 +2360,46 @@ PaginationFilter.defaultProps = {
2360
2360
  label: undefined
2361
2361
  };
2362
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
+
2363
2383
  const styleMd = textStyles.text.sm;
2364
2384
  const selectStyle = {
2365
2385
  fontSize: styleMd.fontSize,
2366
2386
  lineHeight: styleMd.lineHeight,
2367
2387
  letterSpacing: 0
2368
2388
  };
2369
- 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']}`;
2370
2391
  return {
2371
- control: base => colorMode === 'dark' ? {
2392
+ control: (base, state) => colorMode === 'dark' ? {
2372
2393
  ...base,
2373
2394
  ...selectStyle,
2374
2395
  background: 'transparent',
2375
2396
  color: colors.primary['300'],
2376
- borderColor: colors.secondary['500']
2397
+ borderColor: colors.secondary['500'],
2398
+ boxShadow: state.isFocused ? boxShadowStyle : `inherit`
2377
2399
  } : {
2378
2400
  ...base,
2379
- ...selectStyle
2401
+ ...selectStyle,
2402
+ boxShadow: state.isFocused ? boxShadowStyle : colors.neutral['500']
2380
2403
  },
2381
2404
  option: (base, {
2382
2405
  isSelected
@@ -2446,68 +2469,88 @@ const themeSelect = theme => {
2446
2469
  };
2447
2470
  };
2448
2471
 
2472
+ /* eslint-disable react/require-default-props */
2449
2473
  function Select({
2450
2474
  styles,
2475
+ isError = false,
2451
2476
  ...rest
2452
2477
  }) {
2453
2478
  const {
2454
2479
  colorMode
2455
2480
  } = useColorMode();
2456
- 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, {
2457
2486
  styles: {
2458
- ...selectStyles(colorMode),
2459
- ...styles
2487
+ ...selectStyles(colorMode, isError)
2460
2488
  },
2461
2489
  theme: themeSelect
2462
- }));
2490
+ })));
2463
2491
  }
2464
2492
 
2465
2493
  function SelectAsync({
2466
2494
  styles,
2495
+ isError = false,
2467
2496
  ...rest
2468
2497
  }) {
2469
2498
  const {
2470
2499
  colorMode
2471
2500
  } = useColorMode();
2472
- 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, {
2473
2506
  styles: {
2474
- ...selectStyles(colorMode),
2507
+ ...selectStyles(colorMode, isError),
2475
2508
  ...styles
2476
2509
  },
2477
2510
  theme: themeSelect
2478
- }));
2511
+ })));
2479
2512
  }
2480
2513
 
2481
2514
  function SelectAsyncCreatable({
2482
2515
  styles,
2516
+ isError = false,
2483
2517
  ...rest
2484
2518
  }) {
2485
2519
  const {
2486
2520
  colorMode
2487
2521
  } = useColorMode();
2488
- 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, {
2489
2527
  styles: {
2490
- ...selectStyles(colorMode),
2528
+ ...selectStyles(colorMode, isError),
2491
2529
  ...styles
2492
2530
  },
2493
2531
  theme: themeSelect
2494
- }));
2532
+ })));
2495
2533
  }
2496
2534
 
2497
2535
  function SelectCreatable({
2498
2536
  styles,
2537
+ isError = false,
2499
2538
  ...rest
2500
2539
  }) {
2501
2540
  const {
2502
2541
  colorMode
2503
2542
  } = useColorMode();
2504
- 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, {
2505
2548
  styles: {
2506
- ...selectStyles(colorMode),
2549
+ ...selectStyles(colorMode, isError),
2507
2550
  ...styles
2508
2551
  },
2509
2552
  theme: themeSelect
2510
- }));
2553
+ })));
2511
2554
  }
2512
2555
 
2513
2556
  const Tab = /*#__PURE__*/forwardRef$1((props, ref) => {