@mtes-mct/monitor-ui 6.5.1 → 6.5.2
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/CHANGELOG.md +8 -0
- package/index.js +82 -45
- package/index.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [6.5.1](https://github.com/MTES-MCT/monitor-ui/compare/v6.5.0...v6.5.1) (2023-05-26)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **fields:** add missing onBlur & onFocus props passing in NumberInput ([25c210e](https://github.com/MTES-MCT/monitor-ui/commit/25c210e498c37f275aa32dc5104e0c2824eb4a64))
|
|
7
|
+
* **fields:** prevent wheel event in NumberInput, DatePicker & DateRangePicker ([21a1c20](https://github.com/MTES-MCT/monitor-ui/commit/21a1c205620e977b411e755793ff92dfc17da20b))
|
|
8
|
+
|
|
1
9
|
# [6.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v6.4.1...v6.5.0) (2023-05-25)
|
|
2
10
|
|
|
3
11
|
|
package/index.js
CHANGED
|
@@ -2174,9 +2174,9 @@ function stopMouseEventPropagation(event) {
|
|
|
2174
2174
|
|
|
2175
2175
|
function RawDialog({ children, className, isAbsolute = false, ...nativeProps }) {
|
|
2176
2176
|
const controlledClassName = classnames('Component-Dialog', className);
|
|
2177
|
-
return (jsxs(Box$
|
|
2177
|
+
return (jsxs(Box$h, { "$isAbsolute": isAbsolute, className: controlledClassName, onClick: stopMouseEventPropagation, ...nativeProps, children: [jsx(Overlay, { "$isAbsolute": isAbsolute }), jsx(Window, { "$isAbsolute": isAbsolute, children: children })] }));
|
|
2178
2178
|
}
|
|
2179
|
-
const Box$
|
|
2179
|
+
const Box$h = styled.div `
|
|
2180
2180
|
position: ${p => (p.$isAbsolute ? 'absolute' : 'fixed')};
|
|
2181
2181
|
top: 0;
|
|
2182
2182
|
bottom: 0;
|
|
@@ -3185,9 +3185,9 @@ function SingleTag({ children, className, onDelete, ...nativeProps }) {
|
|
|
3185
3185
|
onDelete();
|
|
3186
3186
|
}
|
|
3187
3187
|
}, [onDelete]);
|
|
3188
|
-
return (jsxs(Box$
|
|
3188
|
+
return (jsxs(Box$g, { className: controlledClassName, ...nativeProps, children: [jsx(Text, { children: children }), jsx(StyledIconButton, { accent: Accent.TERTIARY, Icon: Close, iconSize: 10, onClick: handleDelete })] }));
|
|
3189
3189
|
}
|
|
3190
|
-
const Box$
|
|
3190
|
+
const Box$g = styled.div `
|
|
3191
3191
|
align-items: center;
|
|
3192
3192
|
display: inline-flex;
|
|
3193
3193
|
`;
|
|
@@ -3242,9 +3242,9 @@ p.disabled ? p.theme.color.lightGray : p.hasError ? p.theme.color.maximumRed : p
|
|
|
3242
3242
|
|
|
3243
3243
|
function Fieldset({ children, className, hasBorder = false, hasError = false, isLegendHidden = false, isLight = false, legend, ...nativeProps }) {
|
|
3244
3244
|
const hasLegend = useMemo(() => Boolean(legend), [legend]);
|
|
3245
|
-
return (jsxs(Box$
|
|
3245
|
+
return (jsxs(Box$f, { className: classnames('Element-Fieldset', className), ...nativeProps, children: [legend && (jsx(Legend, { disabled: nativeProps.disabled, hasError: hasError, isHidden: isLegendHidden, children: legend })), jsx(InnerBox, { "$hasBorder": hasBorder, "$hasLegend": hasLegend, "$isLight": isLight, children: children })] }));
|
|
3246
3246
|
}
|
|
3247
|
-
const Box$
|
|
3247
|
+
const Box$f = styled.fieldset `
|
|
3248
3248
|
align-items: flex-start;
|
|
3249
3249
|
border: 0;
|
|
3250
3250
|
display: flex;
|
|
@@ -3307,10 +3307,10 @@ function Tag({ accent, bullet, bulletColor, children, className, color, Icon, is
|
|
|
3307
3307
|
case Accent.TERTIARY:
|
|
3308
3308
|
return jsx(TertiaryTag, { ...commonProps });
|
|
3309
3309
|
default:
|
|
3310
|
-
return jsx(Box$
|
|
3310
|
+
return jsx(Box$e, { "$color": color, ...commonProps });
|
|
3311
3311
|
}
|
|
3312
3312
|
}
|
|
3313
|
-
const Box$
|
|
3313
|
+
const Box$e = styled.span `
|
|
3314
3314
|
align-items: center;
|
|
3315
3315
|
background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
|
|
3316
3316
|
border-radius: 11px;
|
|
@@ -3332,16 +3332,16 @@ const Box$d = styled.span `
|
|
|
3332
3332
|
margin-right: 4px;
|
|
3333
3333
|
}
|
|
3334
3334
|
`;
|
|
3335
|
-
const PrimaryTag = styled(Box$
|
|
3335
|
+
const PrimaryTag = styled(Box$e) `
|
|
3336
3336
|
background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
|
|
3337
3337
|
color: ${p => p.theme.color.gunMetal};
|
|
3338
3338
|
`;
|
|
3339
3339
|
// TODO Fix this color.
|
|
3340
|
-
const SecondaryTag = styled(Box$
|
|
3340
|
+
const SecondaryTag = styled(Box$e) `
|
|
3341
3341
|
background-color: ${p => (p.$isLight ? '#f6d012' : '#f6d012')};
|
|
3342
3342
|
color: ${p => p.theme.color.gunMetal};
|
|
3343
3343
|
`;
|
|
3344
|
-
const TertiaryTag = styled(Box$
|
|
3344
|
+
const TertiaryTag = styled(Box$e) `
|
|
3345
3345
|
background-color: ${p => (p.$isLight ? p.theme.color.charcoal : p.theme.color.charcoal)};
|
|
3346
3346
|
color: ${p => p.theme.color.white};
|
|
3347
3347
|
`;
|
|
@@ -20799,7 +20799,7 @@ function Search({ baseContainer, className, customSearch = undefined, customSear
|
|
|
20799
20799
|
useEffect(() => {
|
|
20800
20800
|
forceUpdate();
|
|
20801
20801
|
}, [forceUpdate]);
|
|
20802
|
-
return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$
|
|
20802
|
+
return (jsxs(Field$2, { className: controlledClassName, children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsxs(Box$d, { ref: boxRef, isLight: isLight, children: [boxRef.current && (jsx(StyledAutoComplete, { "$isLight": isLight, container: boxRef.current,
|
|
20803
20803
|
// When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
|
|
20804
20804
|
// when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
|
|
20805
20805
|
data: controlledRsuiteData || data,
|
|
@@ -20848,7 +20848,7 @@ const StyledAutoComplete = styled(AutoComplete) `
|
|
|
20848
20848
|
}
|
|
20849
20849
|
}
|
|
20850
20850
|
`;
|
|
20851
|
-
const Box$
|
|
20851
|
+
const Box$d = styled.div `
|
|
20852
20852
|
background-color: ${p => (p.isLight ? p.theme.color.white : p.theme.color.gainsboro)};
|
|
20853
20853
|
position: relative;
|
|
20854
20854
|
width: 100%;
|
|
@@ -21149,11 +21149,11 @@ function CalendarPicker({ isHistorical, isOpen, onChange, value }) {
|
|
|
21149
21149
|
// and can be used as a container for <RsuiteDatePicker />
|
|
21150
21150
|
forceUpdate();
|
|
21151
21151
|
}, [forceUpdate]);
|
|
21152
|
-
return (jsx(Box$
|
|
21152
|
+
return (jsx(Box$c, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DatePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, oneTap: true, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate,
|
|
21153
21153
|
// eslint-disable-next-line no-null/no-null
|
|
21154
21154
|
value: controlledValue ?? null })) }));
|
|
21155
21155
|
}
|
|
21156
|
-
const Box$
|
|
21156
|
+
const Box$c = styled.div `
|
|
21157
21157
|
height: 0;
|
|
21158
21158
|
position: relative;
|
|
21159
21159
|
user-select: none;
|
|
@@ -21502,10 +21502,10 @@ function DateInputWithRef({ baseContainer, disabled = false, isCompact, isEndDat
|
|
|
21502
21502
|
];
|
|
21503
21503
|
onChange(nextDateTuple, isFilled);
|
|
21504
21504
|
}, [baseDocument, onChange]);
|
|
21505
|
-
return (jsxs(Box$
|
|
21505
|
+
return (jsxs(Box$b, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isForcedFocused || isFocused, "$isLight": isLight, children: [jsxs("div", { children: [isRange && isStartDate && jsx("span", { children: "Du " }), isRange && isEndDate && jsx("span", { children: "Au " }), jsx(NumberInput$1, { ref: dayInputRef, "aria-label": `Jour${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 31, min: 1, onBack: onBack, onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => monthInputRef.current?.focus(), onPrevious: onPrevious, size: 2, value: controlledValue && controlledValue[2] }), "/", jsx(NumberInput$1, { ref: monthInputRef, "aria-label": `Mois${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 12, min: 1, onBack: () => dayInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: () => yearInputRef.current?.focus(), onPrevious: () => dayInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] }), "/", jsx(NumberInput$1, { ref: yearInputRef, "aria-label": `Année${isRange && isStartDate ? ' de début' : ''}${isRange && isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 2030, min: 2020, onBack: () => monthInputRef.current?.focus(), onBlur: handleBlur, onClick: onClick, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => monthInputRef.current?.focus(), size: 4, value: controlledValue && controlledValue[0] })] }), !isCompact && jsx(Calendar, {})] }));
|
|
21506
21506
|
}
|
|
21507
21507
|
const DateInput = forwardRef(DateInputWithRef);
|
|
21508
|
-
const Box$
|
|
21508
|
+
const Box$b = styled.div `
|
|
21509
21509
|
align-items: center;
|
|
21510
21510
|
background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
|
|
21511
21511
|
box-shadow: ${p => p.$hasError || p.$isFocused
|
|
@@ -21578,9 +21578,9 @@ function RangedTimePicker({ filter, minutesRange, onChange }) {
|
|
|
21578
21578
|
if (!filteredRangedTimeOptions.length) {
|
|
21579
21579
|
return jsx(Fragment, {});
|
|
21580
21580
|
}
|
|
21581
|
-
return (jsx(Box$
|
|
21581
|
+
return (jsx(Box$a, { onClick: stopMouseEventPropagation, role: "listbox", children: filteredRangedTimeOptions.map(({ label, value }, index) => (jsx(Option, { "aria-selected": false, className: "js-ranged-time-picker-option", isSelected: index === selectedOptionIndex, onClick: () => onChange(value), role: "option", tabIndex: -1, children: spannedLabels[index] }, label))) }));
|
|
21582
21582
|
}
|
|
21583
|
-
const Box$
|
|
21583
|
+
const Box$a = styled.div `
|
|
21584
21584
|
background-color: ${p => p.theme.color.white};
|
|
21585
21585
|
box-shadow: inset 0px 0px 0px 1px ${p => p.theme.color.lightGray};
|
|
21586
21586
|
display: flex;
|
|
@@ -21718,10 +21718,10 @@ function TimeInputWithRef({ baseContainer, disabled = false, isCompact, isEndDat
|
|
|
21718
21718
|
}
|
|
21719
21719
|
setControlledValue(value);
|
|
21720
21720
|
}, [isFocused, previousValue, value]);
|
|
21721
|
-
return (jsxs(Box$
|
|
21721
|
+
return (jsxs(Box$9, { ref: boxRef, "$hasError": hasFormatError || hasValidationError, "$isCompact": isCompact, "$isDisabled": disabled, "$isFocused": isFocused, "$isLight": isLight, children: [jsxs(InputGroup, { children: [jsxs("div", { children: [jsx(NumberInput$1, { ref: hourInputRef, "aria-label": `Heure${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 23, min: 0, onBack: handleBack, onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: handleHourInput, onNext: () => minuteInputRef.current?.focus(), onPrevious: onPrevious, size: 2, value: controlledValue && controlledValue[0] }), ":", jsx(NumberInput$1, { ref: minuteInputRef, "aria-label": `Minute${isStartDate ? ' de début' : ''}${isEndDate ? ' de fin' : ''}`, disabled: disabled, isLight: isLight, max: 59, min: 0, onBack: () => hourInputRef.current?.focus(), onBlur: handleBlur, onClick: openRangedTimePicker, onFilled: submit, onFocus: handleFocus, onFormatError: handleFormatError, onInput: onInput, onNext: onNext, onPrevious: () => hourInputRef.current?.focus(), size: 2, value: controlledValue && controlledValue[1] })] }), !isCompact && jsx(Clock, {})] }), isTimePickerOpen && (jsx(RangedTimePicker, { filter: timePickerFilter, minutesRange: minutesRange, onChange: handleTimePickerChange }))] }));
|
|
21722
21722
|
}
|
|
21723
21723
|
const TimeInput = forwardRef(TimeInputWithRef);
|
|
21724
|
-
const Box$
|
|
21724
|
+
const Box$9 = styled.div `
|
|
21725
21725
|
background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
|
|
21726
21726
|
box-shadow: ${p => p.$hasError || p.$isFocused
|
|
21727
21727
|
? `inset 0px 0px 0px 1px ${p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100]}`
|
|
@@ -21893,17 +21893,28 @@ function DatePicker({ baseContainer, className, defaultValue, disabled = false,
|
|
|
21893
21893
|
selectedUtcTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedUtcDateAsDayjsRef.current);
|
|
21894
21894
|
forceUpdate();
|
|
21895
21895
|
}, [defaultValue, forceUpdate, previousDefaultValue]);
|
|
21896
|
-
return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$
|
|
21896
|
+
return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$8, { ref: boxRef, "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field$1, { children: jsx(DateInput, { ref: dateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: isEndDate, isForcedFocused: isCalendarPickerOpenRef.current, isLight: isLight, onChange: handleDateInputChange, onClick: openCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleDateInputNext, value: selectedUtcDateTupleRef.current }) }), withTime && (jsx(Field$1, { "$isTimeField": true, children: jsx(TimeInput, { ref: timeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, minutesRange: minutesRange, onBack: () => dateInputRef.current?.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => dateInputRef.current?.focus(true), value: selectedUtcTimeTupleRef.current }, JSON.stringify(selectedUtcTimeTupleRef.current)) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(CalendarPicker, { isHistorical: isHistorical, isOpen: isCalendarPickerOpenRef.current, onChange: handleCalendarPickerChange, value: calendarPickerDefaultValue })] }));
|
|
21897
21897
|
}
|
|
21898
|
-
const Box$
|
|
21898
|
+
const Box$8 = styled.div `
|
|
21899
21899
|
* {
|
|
21900
21900
|
font-weight: 500;
|
|
21901
21901
|
line-height: 1;
|
|
21902
21902
|
}
|
|
21903
21903
|
|
|
21904
21904
|
color: ${p => p.theme.color.gunMetal};
|
|
21905
|
+
display: inline-flex;
|
|
21905
21906
|
font-size: 13px;
|
|
21907
|
+
outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
|
|
21906
21908
|
position: relative;
|
|
21909
|
+
|
|
21910
|
+
${p => p.$isDisabled &&
|
|
21911
|
+
css `
|
|
21912
|
+
* {
|
|
21913
|
+
background-color: ${p.theme.color.cultured} !important;
|
|
21914
|
+
color: ${p.theme.color.lightGray} !important;
|
|
21915
|
+
cursor: not-allowed;
|
|
21916
|
+
}
|
|
21917
|
+
`}
|
|
21907
21918
|
`;
|
|
21908
21919
|
const Field$1 = styled.span `
|
|
21909
21920
|
font-size: inherit;
|
|
@@ -21949,12 +21960,12 @@ function RangeCalendarPicker({ defaultValue, isHistorical, isOpen, onChange }) {
|
|
|
21949
21960
|
// and can be used as a container for <RsuiteDateRangePicker />
|
|
21950
21961
|
forceUpdate();
|
|
21951
21962
|
}, [forceUpdate]);
|
|
21952
|
-
return (jsx(Box$
|
|
21963
|
+
return (jsx(Box$7, { ref: boxRef, onClick: stopMouseEventPropagation, children: boxRef.current && (jsx(DateRangePicker$1, { container: boxRef.current, format: "yyyy-MM-dd", locale: RSUITE_CALENDAR_LOCALE, onSelect: handleSelect, open: isOpen, ranges: [], shouldDisableDate: shouldDisableDate,
|
|
21953
21964
|
// `defaultValue` seems to be immediatly cancelled so we come down to using a controlled `value`
|
|
21954
21965
|
// eslint-disable-next-line no-null/no-null
|
|
21955
21966
|
value: controlledValue ?? null })) }));
|
|
21956
21967
|
}
|
|
21957
|
-
const Box$
|
|
21968
|
+
const Box$7 = styled.div `
|
|
21958
21969
|
height: 0;
|
|
21959
21970
|
position: relative;
|
|
21960
21971
|
user-select: none;
|
|
@@ -22348,19 +22359,21 @@ function DateRangePicker({ baseContainer, className, defaultValue, disabled = fa
|
|
|
22348
22359
|
selectedEndTimeTupleRef.current = getUtcTimeTupleFromDayjs(selectedEndDateAsDayjsRef.current);
|
|
22349
22360
|
forceUpdate();
|
|
22350
22361
|
}, [defaultValue, forceUpdate, previousDefaultValue]);
|
|
22351
|
-
return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$
|
|
22362
|
+
return (jsxs(Fieldset, { className: controlledClassName, disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, legend: label, ...nativeProps, children: [jsxs(Box$6, { "$hasError": hasError, "$isDisabled": disabled, children: [jsx(Field, { children: jsx(DateInput, { ref: startDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, isStartDate: true, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.START, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleStartDateInputNext, value: selectedStartDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: startTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isLight: isLight, isStartDate: true, minutesRange: minutesRange, onBack: () => startDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.START, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: () => endDateInputRef.current?.focus(), onPrevious: () => startDateInputRef.current?.focus(true), value: selectedStartTimeTupleRef.current }) })), jsx(Field, { isEndDateField: true, children: jsx(DateInput, { ref: endDateInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isForcedFocused: isRangeCalendarPickerOpenRef.current, isLight: isLight, isRange: true, onBack: handleEndDateInputPrevious, onChange: (nextDateTuple, isFilled) => handleDateInputChange(DateRangePosition.END, nextDateTuple, isFilled), onClick: openRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onNext: handleEndDateInputNext, onPrevious: handleEndDateInputPrevious, value: selectedEndDateTupleRef.current }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: endTimeInputRef, baseContainer: baseContainer || undefined, disabled: disabled, isCompact: isCompact, isEndDate: true, isLight: isLight, minutesRange: minutesRange, onBack: () => endDateInputRef.current?.focus(true), onChange: nextTimeTuple => handleTimeInputFilled(DateRangePosition.END, nextTimeTuple), onFocus: closeRangeCalendarPicker, onInput: handleDateOrTimeInputInput, onPrevious: () => endDateInputRef.current?.focus(true), value: selectedEndTimeTupleRef.current }) }))] }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError }), jsx(RangeCalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, isOpen: isRangeCalendarPickerOpenRef.current, onChange: handleRangeCalendarPickerChange })] }));
|
|
22352
22363
|
}
|
|
22353
|
-
const Box$
|
|
22364
|
+
const Box$6 = styled.div `
|
|
22354
22365
|
* {
|
|
22355
22366
|
font-weight: 500;
|
|
22356
22367
|
line-height: 1;
|
|
22357
22368
|
}
|
|
22358
22369
|
|
|
22359
22370
|
color: ${p => p.theme.color.gunMetal};
|
|
22371
|
+
display: inline-flex;
|
|
22360
22372
|
font-size: 13px;
|
|
22373
|
+
outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
|
|
22361
22374
|
position: relative;
|
|
22362
22375
|
|
|
22363
|
-
${p => p
|
|
22376
|
+
${p => p.$isDisabled &&
|
|
22364
22377
|
css `
|
|
22365
22378
|
* {
|
|
22366
22379
|
background-color: ${p.theme.color.cultured} !important;
|
|
@@ -25793,7 +25806,7 @@ function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength =
|
|
|
25793
25806
|
useEffect(() => {
|
|
25794
25807
|
forceUpdate();
|
|
25795
25808
|
}, [forceUpdate]);
|
|
25796
|
-
return (jsxs(Field$2, { className: "Field-MultiSelect", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$
|
|
25809
|
+
return (jsxs(Field$2, { className: "Field-MultiSelect", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box$5, { ref: boxRef, "$hasError": hasError, "$isActive": isOpen, "$isLight": isLight, onClick: toggle, children: boxRef.current && (jsx(TagPicker, { container: boxRef.current,
|
|
25797
25810
|
// When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
|
|
25798
25811
|
// when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
|
|
25799
25812
|
data: controlledRsuiteData || rsuiteData, disabled: disabled, id: originalProps.name, onChange: handleChange, onClick: toggle, onSearch: handleSearch, open: isOpen, renderMenuItem: renderMenuItem, searchable: !!customSearch || searchable,
|
|
@@ -25801,7 +25814,7 @@ function MultiSelect({ baseContainer, customSearch, customSearchMinQueryLength =
|
|
|
25801
25814
|
// that's why we send this "always true" filter to disable Rsuite TagPicker internal search filtering
|
|
25802
25815
|
searchBy: (customSearch ? () => true : undefined), value: selectedRsuiteValue, ...originalProps }, key)) }), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
|
|
25803
25816
|
}
|
|
25804
|
-
const Box$
|
|
25817
|
+
const Box$5 = styled.div `
|
|
25805
25818
|
position: relative;
|
|
25806
25819
|
user-select: none;
|
|
25807
25820
|
width: 100%;
|
|
@@ -25827,7 +25840,7 @@ const Box$4 = styled.div `
|
|
|
25827
25840
|
|
|
25828
25841
|
:active,
|
|
25829
25842
|
:focus {
|
|
25830
|
-
border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
|
|
25843
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
|
|
25831
25844
|
}
|
|
25832
25845
|
|
|
25833
25846
|
> .rs-picker-toggle {
|
|
@@ -25935,13 +25948,14 @@ function MultiRadio({ disabled = false, error, isErrorMessageHidden = false, isI
|
|
|
25935
25948
|
onChange(nextCheckedOptionValue);
|
|
25936
25949
|
}, [onChange]);
|
|
25937
25950
|
useFieldUndefineEffect(isUndefinedWhenDisabled && disabled, onChange);
|
|
25938
|
-
return (jsxs(Fieldset, { className: "Field-MultiRadio", disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(
|
|
25951
|
+
return (jsxs(Fieldset, { className: "Field-MultiRadio", disabled: disabled, hasError: hasError, isLegendHidden: isLabelHidden, isLight: isLight, legend: label, children: [jsx(Box$4, { "$hasError": hasError, "$isInline": isInline, children: options.map(option => (jsx(Radio, { checked: equals$1(option.value, value), disabled: disabled, name: name, onChange: (_, isChecked) => handleChange(option.value, isChecked), children: option.label }, JSON.stringify(option.value)))) }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
|
|
25939
25952
|
}
|
|
25940
|
-
const
|
|
25953
|
+
const Box$4 = styled.div `
|
|
25941
25954
|
color: ${p => p.theme.color.gunMetal};
|
|
25942
25955
|
display: flex;
|
|
25943
25956
|
flex-direction: ${p => (p.$isInline ? 'row' : 'column')};
|
|
25944
25957
|
font-weight: 500;
|
|
25958
|
+
outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
|
|
25945
25959
|
|
|
25946
25960
|
> .rs-radio {
|
|
25947
25961
|
* {
|
|
@@ -26081,19 +26095,23 @@ function NumberInput({ className, error, isErrorMessageHidden = false, isLabelHi
|
|
|
26081
26095
|
}
|
|
26082
26096
|
const StyledInput$2 = styled(Input) `
|
|
26083
26097
|
background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
|
|
26084
|
-
border: solid 1px ${p => p.theme.color.
|
|
26098
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
|
|
26085
26099
|
border-radius: 0;
|
|
26086
26100
|
font-size: 13px;
|
|
26087
26101
|
/* TODO It should be 18px but computed line-height is stuck to min. 18.5px. Investigate that. */
|
|
26088
26102
|
line-height: 19px;
|
|
26089
|
-
outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
|
|
26090
26103
|
padding: 3px 8px 6px;
|
|
26091
26104
|
vertical-align: center;
|
|
26092
26105
|
width: 100%;
|
|
26093
26106
|
|
|
26107
|
+
:hover {
|
|
26108
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
|
|
26109
|
+
}
|
|
26110
|
+
|
|
26111
|
+
:active,
|
|
26094
26112
|
:focus {
|
|
26095
|
-
|
|
26096
|
-
outline
|
|
26113
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
|
|
26114
|
+
outline: 0;
|
|
26097
26115
|
}
|
|
26098
26116
|
`;
|
|
26099
26117
|
|
|
@@ -35057,7 +35075,7 @@ function Select({ baseContainer, customSearch, customSearchMinQueryLength = 1, d
|
|
|
35057
35075
|
useEffect(() => {
|
|
35058
35076
|
forceUpdate();
|
|
35059
35077
|
}, [forceUpdate]);
|
|
35060
|
-
return (jsxs(Field$2, { className: "Field-Select", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current,
|
|
35078
|
+
return (jsxs(Field$2, { className: "Field-Select", children: [jsx(Label, { disabled: disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(Box, { ref: boxRef, "$hasError": hasError, onClick: toggle, children: boxRef.current && (jsx(StyledSelectPicker, { "$isLight": isLight, cleanable: isCleanable, container: boxRef.current,
|
|
35061
35079
|
// When we use a custom search, we use `controlledRsuiteData` to provide the matching options (data),
|
|
35062
35080
|
// when we don't, we don't need to control that and just pass the non-internally-controlled `rsuiteData`
|
|
35063
35081
|
data: controlledRsuiteData || rsuiteData, disabled: disabled, id: originalProps.name, onClean: handleClean, onSearch: handleSearch,
|
|
@@ -35083,18 +35101,18 @@ const Box = styled.div `
|
|
|
35083
35101
|
width: 100%;
|
|
35084
35102
|
|
|
35085
35103
|
> .rs-picker-toggle {
|
|
35086
|
-
border: solid 1px ${p => p.theme.color.gainsboro} !important;
|
|
35104
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)} !important;
|
|
35087
35105
|
font-size: 13px;
|
|
35088
35106
|
line-height: 1.3846;
|
|
35089
35107
|
padding: 4px 40px 6px 8px;
|
|
35090
35108
|
|
|
35091
35109
|
:hover {
|
|
35092
|
-
border: solid 1px ${p => p.theme.color.blueYonder[100]} !important;
|
|
35110
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
|
|
35093
35111
|
}
|
|
35094
35112
|
|
|
35095
35113
|
:active,
|
|
35096
35114
|
:focus {
|
|
35097
|
-
border: solid 1px ${p => p.theme.color.blueGray[100]} !important;
|
|
35115
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
|
|
35098
35116
|
}
|
|
35099
35117
|
|
|
35100
35118
|
> .rs-stack {
|
|
@@ -35164,11 +35182,11 @@ function Textarea({ error, isErrorMessageHidden = false, isLabelHidden = false,
|
|
|
35164
35182
|
onChange(normalizedNextValue);
|
|
35165
35183
|
}, [onChange]);
|
|
35166
35184
|
useFieldUndefineEffect(isUndefinedWhenDisabled && originalProps.disabled, onChange);
|
|
35167
|
-
return (jsxs(Field$2, { className: "Field-Textarea", children: [jsx(Label, { disabled: originalProps.disabled, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
|
|
35185
|
+
return (jsxs(Field$2, { className: "Field-Textarea", children: [jsx(Label, { disabled: originalProps.disabled, hasError: hasError, htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput$1, { ref: inputRef, "$hasError": hasError, "$isLight": isLight, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, value: value || '', ...originalProps }, key), !isErrorMessageHidden && hasError && jsx(FieldError, { children: controlledError })] }));
|
|
35168
35186
|
}
|
|
35169
35187
|
const StyledInput$1 = styled(Input) `
|
|
35170
35188
|
background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
|
|
35171
|
-
border:
|
|
35189
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
|
|
35172
35190
|
font-size: 13px;
|
|
35173
35191
|
padding: 7px 11px;
|
|
35174
35192
|
width: 100%;
|
|
@@ -35176,6 +35194,16 @@ const StyledInput$1 = styled(Input) `
|
|
|
35176
35194
|
::placeholder {
|
|
35177
35195
|
color: ${p => (p.$isLight ? p.theme.color.slateGray : p.theme.color.slateGray)};
|
|
35178
35196
|
}
|
|
35197
|
+
|
|
35198
|
+
:hover {
|
|
35199
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
|
|
35200
|
+
}
|
|
35201
|
+
|
|
35202
|
+
:active,
|
|
35203
|
+
:focus {
|
|
35204
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
|
|
35205
|
+
outline: 0;
|
|
35206
|
+
}
|
|
35179
35207
|
`;
|
|
35180
35208
|
|
|
35181
35209
|
function TextInput({ className, error, Icon, isErrorMessageHidden = false, isLabelHidden = false, isLight = false, isUndefinedWhenDisabled = false, label, onChange, size = Size.NORMAL, style, value, ...originalProps }) {
|
|
@@ -35205,12 +35233,11 @@ const PADDING_WITH_ICON = {
|
|
|
35205
35233
|
};
|
|
35206
35234
|
const StyledInput = styled(Input) `
|
|
35207
35235
|
background-color: ${p => (p.$isLight ? p.theme.color.white : p.theme.color.gainsboro)};
|
|
35208
|
-
border: solid 1px ${p => p.theme.color.
|
|
35236
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.gainsboro)};
|
|
35209
35237
|
border-radius: 0;
|
|
35210
35238
|
font-size: 13px;
|
|
35211
35239
|
/* TODO It should be 18px but computed line-height is stuck to min. 18.5px. Investigate that. */
|
|
35212
35240
|
line-height: 19px;
|
|
35213
|
-
outline: ${p => (p.$hasError ? `1px solid ${p.theme.color.maximumRed}` : 0)};
|
|
35214
35241
|
padding: ${p => (p.$hasIcon ? PADDING_WITH_ICON[p.$size] : PADDING[p.$size])};
|
|
35215
35242
|
vertical-align: center;
|
|
35216
35243
|
width: 100%;
|
|
@@ -35218,6 +35245,16 @@ const StyledInput = styled(Input) `
|
|
|
35218
35245
|
::placeholder {
|
|
35219
35246
|
color: ${p => (p.$isLight ? p.theme.color.slateGray : p.theme.color.slateGray)};
|
|
35220
35247
|
}
|
|
35248
|
+
|
|
35249
|
+
:hover {
|
|
35250
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueYonder[100])} !important;
|
|
35251
|
+
}
|
|
35252
|
+
|
|
35253
|
+
:active,
|
|
35254
|
+
:focus {
|
|
35255
|
+
border: solid 1px ${p => (p.$hasError ? p.theme.color.maximumRed : p.theme.color.blueGray[100])} !important;
|
|
35256
|
+
outline: 0;
|
|
35257
|
+
}
|
|
35221
35258
|
`;
|
|
35222
35259
|
const InputBox = styled.div `
|
|
35223
35260
|
position: relative;
|