@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.
- package/dist/components/select/components/select-async-creatable.d.ts +3 -2
- package/dist/components/select/components/select-async.d.ts +3 -2
- package/dist/components/select/components/select-creatable.d.ts +3 -2
- package/dist/components/select/components/select-wrapper.d.ts +6 -0
- package/dist/components/select/components/select.d.ts +3 -2
- package/dist/components/select/components/types/select.types.d.ts +3 -0
- package/dist/components/select/components/utils.d.ts +1 -1
- package/dist/internal-ui.cjs.development.js +60 -17
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +13 -5
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +60 -17
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +2 -2
package/dist/internal-ui.esm.js
CHANGED
@@ -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(
|
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(
|
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(
|
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(
|
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) => {
|