@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.
- package/dist/components/datepicker/components/datepicker-month/datepicker-month.d.ts +0 -2
- package/dist/components/datepicker/components/datepicker-month/multi-datepicker-month.d.ts +0 -2
- 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 +69 -35
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +17 -6
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +69 -35
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +2 -2
package/dist/internal-ui.esm.js
CHANGED
@@ -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 ?
|
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(
|
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(
|
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(
|
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(
|
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) => {
|