@povio/ui 2.2.9-rc.7 → 2.2.9-rc.8
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/inputs/Checkbox/Checkbox.js +6 -1
- package/dist/components/inputs/Checkbox/checkbox.cva.d.ts +3 -0
- package/dist/components/inputs/Checkbox/checkbox.cva.js +2 -1
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts +1 -0
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +2 -1
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +1 -0
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +2 -1
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +1 -0
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +2 -1
- package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +2 -1
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +4 -5
- package/dist/components/inputs/Inputs/InputItem.d.ts +5 -3
- package/dist/components/inputs/RadioGroup/RadioGroup.js +6 -1
- package/dist/components/inputs/RadioGroup/radio.cva.d.ts +3 -0
- package/dist/components/inputs/RadioGroup/radio.cva.js +2 -1
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts +3 -1
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +2 -2
- package/dist/components/inputs/Selection/Select/Select.d.ts +4 -2
- package/dist/components/inputs/Selection/Select/Select.js +2 -2
- package/dist/components/inputs/Selection/shared/SelectBase.d.ts +4 -1
- package/dist/components/inputs/Selection/shared/SelectBase.js +2 -1
- package/dist/components/inputs/Selection/shared/SelectDesktop.d.ts +1 -1
- package/dist/components/inputs/Selection/shared/SelectDesktop.js +3 -1
- package/dist/components/inputs/Selection/shared/SelectInput.d.ts +2 -2
- package/dist/components/inputs/Selection/shared/SelectInput.js +9 -1
- package/dist/components/inputs/Selection/shared/SelectMobile.d.ts +1 -1
- package/dist/components/inputs/Selection/shared/SelectMobile.js +3 -1
- package/dist/components/inputs/Selection/shared/select.context.d.ts +2 -2
- package/dist/components/inputs/Selection/shared/select.context.js +2 -2
- package/dist/components/inputs/Selection/shared/select.types.d.ts +2 -2
- package/dist/components/inputs/Toggle/Toggle.js +6 -1
- package/dist/components/inputs/Toggle/toggle.cva.d.ts +3 -0
- package/dist/components/inputs/Toggle/toggle.cva.js +2 -1
- package/dist/components/inputs/shared/CheckContent.d.ts +2 -1
- package/dist/components/inputs/shared/CheckContent.js +3 -4
- package/dist/config/uiConfig.context.d.ts +1 -1
- package/dist/config/uiConfig.context.js +2 -1
- package/dist/config/uiStyle.context.d.ts +3 -0
- package/dist/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { UIStyle } from "../../../config/uiStyle.context.js";
|
|
2
2
|
import { UIConfig } from "../../../config/uiConfig.context.js";
|
|
3
|
-
import { checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
|
|
3
|
+
import { checkboxContentClassName, checkboxIndicatorClass, checkboxTypography } from "./checkbox.cva.js";
|
|
4
4
|
import { FormFieldError } from "../FormField/FormFieldError.js";
|
|
5
5
|
import { CheckContent } from "../shared/CheckContent.js";
|
|
6
6
|
import { CheckboxCheckmark } from "./CheckboxCheckmark.js";
|
|
@@ -13,6 +13,7 @@ import { Controller } from "react-hook-form";
|
|
|
13
13
|
var CheckboxBase = (props) => {
|
|
14
14
|
const ui = UIConfig.useConfig();
|
|
15
15
|
const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
|
|
16
|
+
const checkboxContentClassNameMap = UIStyle.useMapper("checkbox.contentClassName", checkboxContentClassName);
|
|
16
17
|
const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel, ...rest } = props;
|
|
17
18
|
const formFieldErrorProps = {
|
|
18
19
|
error,
|
|
@@ -34,6 +35,10 @@ var CheckboxBase = (props) => {
|
|
|
34
35
|
variant,
|
|
35
36
|
...rest
|
|
36
37
|
}),
|
|
38
|
+
contentClassName: checkboxContentClassNameMap({
|
|
39
|
+
variant,
|
|
40
|
+
...rest
|
|
41
|
+
}),
|
|
37
42
|
children
|
|
38
43
|
})]
|
|
39
44
|
}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });
|
|
@@ -9,6 +9,9 @@ export declare const checkboxIndicatorClass = "group flex items-center gap-2";
|
|
|
9
9
|
export declare const checkboxTypography: (props: {
|
|
10
10
|
variant?: "default" | null | undefined;
|
|
11
11
|
}) => TypographyVariantProps | undefined;
|
|
12
|
+
export declare const checkboxContentClassName: (props: {
|
|
13
|
+
variant?: "default" | null | undefined;
|
|
14
|
+
}) => string | undefined;
|
|
12
15
|
export declare const checkboxIcon: (props?: ({
|
|
13
16
|
iconVariant?: "selected" | "indeterminate" | null | undefined;
|
|
14
17
|
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -39,6 +39,7 @@ var checkboxTypography = compoundMapper({ default: {
|
|
|
39
39
|
sizeMobile: "label-1",
|
|
40
40
|
variant: "default"
|
|
41
41
|
} });
|
|
42
|
+
var checkboxContentClassName = compoundMapper({ default: "text-text-default-2" });
|
|
42
43
|
var checkboxIcon = cva(["absolute hidden size-3"], {
|
|
43
44
|
variants: { iconVariant: {
|
|
44
45
|
selected: ["group-selected:block"],
|
|
@@ -47,4 +48,4 @@ var checkboxIcon = cva(["absolute hidden size-3"], {
|
|
|
47
48
|
defaultVariants: { iconVariant: "selected" }
|
|
48
49
|
});
|
|
49
50
|
//#endregion
|
|
50
|
-
export { checkbox, checkboxIcon, checkboxIndicatorClass, checkboxTypography };
|
|
51
|
+
export { checkbox, checkboxContentClassName, checkboxIcon, checkboxIndicatorClass, checkboxTypography };
|
|
@@ -16,6 +16,7 @@ interface DatePickerBaseProps extends FormFieldProps, InputVariantProps, Omit<Da
|
|
|
16
16
|
todayIconButtonSize?: DatePickerTodayIconButtonSize;
|
|
17
17
|
isDirty?: boolean;
|
|
18
18
|
disableManualEntry?: boolean;
|
|
19
|
+
autoFixYear?: boolean;
|
|
19
20
|
placeholder?: string;
|
|
20
21
|
inputClassName?: string;
|
|
21
22
|
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
@@ -20,7 +20,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
|
|
|
20
20
|
var PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
|
|
21
21
|
var DatePickerBase = (props) => {
|
|
22
22
|
const ui = UIConfig.useConfig();
|
|
23
|
-
const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
|
|
23
|
+
const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
|
|
24
24
|
const formFieldProps = {
|
|
25
25
|
error,
|
|
26
26
|
label,
|
|
@@ -131,6 +131,7 @@ var DatePickerBase = (props) => {
|
|
|
131
131
|
isDirty,
|
|
132
132
|
isDisabled,
|
|
133
133
|
disableManualEntry,
|
|
134
|
+
autoFixYear,
|
|
134
135
|
isInvalid: !!error,
|
|
135
136
|
disableDropdown,
|
|
136
137
|
variant,
|
|
@@ -18,6 +18,7 @@ interface DateRangePickerBaseProps extends FormFieldProps, InputVariantProps, Om
|
|
|
18
18
|
todayIconButtonSize?: DatePickerTodayIconButtonSize;
|
|
19
19
|
isDirty?: boolean;
|
|
20
20
|
disableManualEntry?: boolean;
|
|
21
|
+
autoFixYear?: boolean;
|
|
21
22
|
placeholder?: string;
|
|
22
23
|
inputClassName?: string;
|
|
23
24
|
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
@@ -24,7 +24,7 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
|
|
|
24
24
|
var DateRangePickerBase = (props) => {
|
|
25
25
|
const ui = UIConfig.useConfig();
|
|
26
26
|
const { t } = useTranslation();
|
|
27
|
-
const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
|
|
27
|
+
const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
|
|
28
28
|
const [validationRangeError, setValidationRangeError] = useState();
|
|
29
29
|
const datePickerInputRef = useRef(null);
|
|
30
30
|
const dateRangePickerRef = useMemo(() => ({ get current() {
|
|
@@ -487,6 +487,7 @@ var DateRangePickerBase = (props) => {
|
|
|
487
487
|
todayIconButtonSize,
|
|
488
488
|
isDirty,
|
|
489
489
|
disableManualEntry,
|
|
490
|
+
autoFixYear,
|
|
490
491
|
placeholder,
|
|
491
492
|
className: inputClassName,
|
|
492
493
|
onOpenDropdown: () => state.toggle()
|
|
@@ -16,6 +16,7 @@ interface DateTimePickerBaseProps extends FormFieldProps, InputVariantProps, Omi
|
|
|
16
16
|
todayIconButtonSize?: DatePickerTodayIconButtonSize;
|
|
17
17
|
isDirty?: boolean;
|
|
18
18
|
disableManualEntry?: boolean;
|
|
19
|
+
autoFixYear?: boolean;
|
|
19
20
|
placeholder?: string;
|
|
20
21
|
inputClassName?: string;
|
|
21
22
|
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
@@ -17,7 +17,7 @@ import { useCalendarState, useDatePickerState } from "react-stately";
|
|
|
17
17
|
//#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
|
|
18
18
|
var DateTimePickerBase = (props) => {
|
|
19
19
|
const ui = UIConfig.useConfig();
|
|
20
|
-
const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
|
|
20
|
+
const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
|
|
21
21
|
const formFieldProps = {
|
|
22
22
|
error,
|
|
23
23
|
label,
|
|
@@ -156,6 +156,7 @@ var DateTimePickerBase = (props) => {
|
|
|
156
156
|
todayIconButtonSize,
|
|
157
157
|
isRequired,
|
|
158
158
|
disableManualEntry,
|
|
159
|
+
autoFixYear,
|
|
159
160
|
placeholder,
|
|
160
161
|
onOpenDropdown: () => state.toggle(),
|
|
161
162
|
className: inputClassName
|
|
@@ -24,9 +24,10 @@ interface DatePickerInputProps extends InputVariantProps {
|
|
|
24
24
|
isDirty?: boolean;
|
|
25
25
|
isRequired?: boolean;
|
|
26
26
|
disableManualEntry?: boolean;
|
|
27
|
+
autoFixYear?: boolean;
|
|
27
28
|
placeholder?: string;
|
|
28
29
|
className?: string;
|
|
29
30
|
onOpenDropdown?: () => void;
|
|
30
31
|
}
|
|
31
|
-
export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare const DatePickerInput: ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize, isDirty, isRequired, disableManualEntry, autoFixYear, placeholder, className, onOpenDropdown, ...props }: DatePickerInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
32
33
|
export {};
|
|
@@ -2,7 +2,6 @@ import { CalendarIcon } from "../../../../assets/icons/Calendar.js";
|
|
|
2
2
|
import { DateTimeIcon } from "../../../../assets/icons/DateTime.js";
|
|
3
3
|
import { UIStyle } from "../../../../config/uiStyle.context.js";
|
|
4
4
|
import { Typography } from "../../../text/Typography/Typography.js";
|
|
5
|
-
import { IconButton } from "../../../buttons/IconButton/IconButton.js";
|
|
6
5
|
import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
|
|
7
6
|
import { TodayIcon } from "../../../../assets/icons/Today.js";
|
|
8
7
|
import { DateField } from "./DateField.js";
|
|
@@ -16,7 +15,7 @@ import { Button } from "react-aria-components";
|
|
|
16
15
|
import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
|
|
17
16
|
import { getLocalTimeZone, now, toCalendarDateTime, today } from "@internationalized/date";
|
|
18
17
|
//#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
|
|
19
|
-
var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", isDirty, isRequired, disableManualEntry, placeholder, className, onOpenDropdown, ...props }) => {
|
|
18
|
+
var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, ...props }) => {
|
|
20
19
|
const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
|
|
21
20
|
const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
|
|
22
21
|
const [canClear, setCanClear] = useState(false);
|
|
@@ -24,7 +23,7 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
|
|
|
24
23
|
const [isFocused, setIsFocused] = useState(false);
|
|
25
24
|
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocusWithin) => {
|
|
26
25
|
setIsFocused(isFocusWithin);
|
|
27
|
-
if (!isFocusWithin) {
|
|
26
|
+
if (!isFocusWithin && autoFixYear) {
|
|
28
27
|
dateFieldRef.current?.autoFixYear();
|
|
29
28
|
endDateFieldRef.current?.autoFixYear();
|
|
30
29
|
}
|
|
@@ -109,12 +108,12 @@ var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, buttonP
|
|
|
109
108
|
className: "absolute inset-0 z-0",
|
|
110
109
|
isDisabled
|
|
111
110
|
}),
|
|
112
|
-
todayIconComponent && /* @__PURE__ */ jsx(
|
|
111
|
+
todayIconComponent && /* @__PURE__ */ jsx(InlineIconButton, {
|
|
113
112
|
label: "",
|
|
114
113
|
icon: todayIconComponent,
|
|
115
114
|
size: todayIconButtonSize,
|
|
116
115
|
onPress: onToday,
|
|
117
|
-
className: "relative z-1"
|
|
116
|
+
className: "relative z-1 !border-none"
|
|
118
117
|
}),
|
|
119
118
|
disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
|
|
120
119
|
size: "label-1",
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ComponentProps, JSXElementConstructor, ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { Control, UseFormReturn } from 'react-hook-form';
|
|
3
3
|
import { z } from 'zod';
|
|
4
|
+
import { Autocomplete } from '../Selection/Autocomplete/Autocomplete';
|
|
5
|
+
import { Select } from '../Selection/Select/Select';
|
|
4
6
|
import { HasRequiredProperty } from '../../../types/common';
|
|
5
7
|
declare const componentRegistry: {
|
|
6
8
|
readonly toggle: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Toggle/Toggle').ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -10,10 +12,10 @@ declare const componentRegistry: {
|
|
|
10
12
|
readonly textInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextInput/TextInput').ControlledTextInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
11
13
|
readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
12
14
|
readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
-
readonly select:
|
|
15
|
+
readonly select: typeof Select;
|
|
14
16
|
readonly querySelect: <TFieldValues extends import('react-hook-form').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Select/QuerySelect.js').QuerySelectProps<TFieldValues, TQueryFn, TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
readonly autocomplete:
|
|
16
|
-
readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('
|
|
17
|
+
readonly autocomplete: typeof Autocomplete;
|
|
18
|
+
readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn<TSelectItem>>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
|
|
17
19
|
readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
18
20
|
readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
19
21
|
readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
|
|
|
2
2
|
import { UIConfig } from "../../../config/uiConfig.context.js";
|
|
3
3
|
import { CheckContent } from "../shared/CheckContent.js";
|
|
4
4
|
import { FormField } from "../FormField/FormField.js";
|
|
5
|
-
import { radio, radioIndicatorClass, radioTypography } from "./radio.cva.js";
|
|
5
|
+
import { radio, radioContentClassName, radioIndicatorClass, radioTypography } from "./radio.cva.js";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { clsx } from "clsx";
|
|
8
8
|
import { Radio, RadioGroup } from "react-aria-components";
|
|
@@ -13,6 +13,7 @@ var RadioGroupBase = (props) => {
|
|
|
13
13
|
const ui = UIConfig.useConfig();
|
|
14
14
|
const radioCva = UIStyle.useCva("radio.cva", radio);
|
|
15
15
|
const radioTypographyMap = UIStyle.useMapper("radio.typography", radioTypography);
|
|
16
|
+
const radioContentClassNameMap = UIStyle.useMapper("radio.contentClassName", radioContentClassName);
|
|
16
17
|
const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isDisabled, headerClassName, errorClassName, labelClassName, inputClassName, isHeaderHidden, error, className, options, variant = ui.radioGroup.variant, hideLabel = ui.radioGroup.hideLabel, ...rest } = props;
|
|
17
18
|
const formFieldProps = {
|
|
18
19
|
className,
|
|
@@ -49,6 +50,10 @@ var RadioGroupBase = (props) => {
|
|
|
49
50
|
variant,
|
|
50
51
|
...rest
|
|
51
52
|
}),
|
|
53
|
+
contentClassName: radioContentClassNameMap({
|
|
54
|
+
variant,
|
|
55
|
+
...rest
|
|
56
|
+
}),
|
|
52
57
|
className: labelClassName,
|
|
53
58
|
children: option.label
|
|
54
59
|
})]
|
|
@@ -9,3 +9,6 @@ export declare const radioIndicatorClass = "group flex items-center gap-2";
|
|
|
9
9
|
export declare const radioTypography: (props: {
|
|
10
10
|
variant?: "default" | null | undefined;
|
|
11
11
|
}) => TypographyVariantProps | undefined;
|
|
12
|
+
export declare const radioContentClassName: (props: {
|
|
13
|
+
variant?: "default" | null | undefined;
|
|
14
|
+
}) => string | undefined;
|
|
@@ -31,5 +31,6 @@ var radioTypography = compoundMapper({ default: {
|
|
|
31
31
|
sizeMobile: "label-1",
|
|
32
32
|
variant: "default"
|
|
33
33
|
} });
|
|
34
|
+
var radioContentClassName = compoundMapper({ default: "text-text-default-2" });
|
|
34
35
|
//#endregion
|
|
35
|
-
export { radio, radioIndicatorClass, radioTypography };
|
|
36
|
+
export { radio, radioContentClassName, radioIndicatorClass, radioTypography };
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
1
2
|
import { Key } from 'react-aria-components';
|
|
2
3
|
import { FieldValues } from 'react-hook-form';
|
|
3
4
|
import { SelectBaseProps } from '../shared/SelectBase';
|
|
@@ -5,4 +6,5 @@ import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps
|
|
|
5
6
|
import { OmitDiscriminatedUnion } from '../../../../types/common';
|
|
6
7
|
export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
|
|
7
8
|
export type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
|
|
8
|
-
export declare
|
|
9
|
+
export declare function Autocomplete<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: AutocompleteProps<TKey, TInitialSelectItem>): ReactElement;
|
|
10
|
+
export declare function Autocomplete<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;
|
|
@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { mergeRefs } from "@react-aria/utils";
|
|
4
4
|
import { Controller } from "react-hook-form";
|
|
5
5
|
//#region src/components/inputs/Selection/Autocomplete/Autocomplete.tsx
|
|
6
|
-
|
|
6
|
+
function Autocomplete(props) {
|
|
7
7
|
if ("formControl" in props && props.formControl) {
|
|
8
8
|
const { formControl, ref, ...innerProps } = props;
|
|
9
9
|
return /* @__PURE__ */ jsx(Controller, {
|
|
@@ -26,6 +26,6 @@ var Autocomplete = (props) => {
|
|
|
26
26
|
...props,
|
|
27
27
|
isSearchable: true
|
|
28
28
|
});
|
|
29
|
-
}
|
|
29
|
+
}
|
|
30
30
|
//#endregion
|
|
31
31
|
export { Autocomplete };
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
1
2
|
import { Key } from 'react-aria-components';
|
|
2
3
|
import { FieldValues } from 'react-hook-form';
|
|
3
4
|
import { SelectBaseProps } from '../shared/SelectBase';
|
|
4
5
|
import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectAsyncProps } from '../shared/select.types';
|
|
5
6
|
import { OmitDiscriminatedUnion } from '../../../../types/common';
|
|
6
7
|
export type SelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "initialSelection" | "mapInitialToSelectItem" | keyof SelectAsyncProps>;
|
|
7
|
-
export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey>;
|
|
8
|
-
export declare
|
|
8
|
+
export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
|
|
9
|
+
export declare function Select<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: SelectProps<TKey, TInitialSelectItem>): ReactElement;
|
|
10
|
+
export declare function Select<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>): ReactElement;
|
|
@@ -3,7 +3,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
3
3
|
import { mergeRefs } from "@react-aria/utils";
|
|
4
4
|
import { Controller } from "react-hook-form";
|
|
5
5
|
//#region src/components/inputs/Selection/Select/Select.tsx
|
|
6
|
-
|
|
6
|
+
function Select(props) {
|
|
7
7
|
if ("formControl" in props && props.formControl) {
|
|
8
8
|
const { formControl, ref, ...innerProps } = props;
|
|
9
9
|
return /* @__PURE__ */ jsx(Controller, {
|
|
@@ -22,6 +22,6 @@ var Select = (props) => {
|
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
return /* @__PURE__ */ jsx(SelectBase, { ...props });
|
|
25
|
-
}
|
|
25
|
+
}
|
|
26
26
|
//#endregion
|
|
27
27
|
export { Select };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FocusEventHandler, MouseEventHandler, ReactElement, Ref } from 'react';
|
|
1
|
+
import { FocusEventHandler, MouseEventHandler, ReactElement, ReactNode, Ref } from 'react';
|
|
2
2
|
import { AriaButtonProps } from 'react-aria';
|
|
3
3
|
import { Key } from 'react-aria-components';
|
|
4
4
|
import { FormFieldProps } from '../../FormField/FormField';
|
|
@@ -14,10 +14,13 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
|
|
|
14
14
|
isSearchable?: boolean;
|
|
15
15
|
isClearable?: boolean;
|
|
16
16
|
isClientSearchDisabled?: boolean;
|
|
17
|
+
ignoreInputValueFiltering?: boolean;
|
|
17
18
|
ignoreTriggerWidth?: boolean;
|
|
18
19
|
items: SelectItem<TKey>[];
|
|
19
20
|
inputClassName?: string;
|
|
20
21
|
containerClassName?: string;
|
|
22
|
+
leadingContent?: ReactNode;
|
|
23
|
+
trailingContent?: ReactNode;
|
|
21
24
|
customTrigger?: ReactElement;
|
|
22
25
|
selectedTagsType?: "tags" | "list";
|
|
23
26
|
collapseAfter?: number;
|
|
@@ -20,7 +20,8 @@ var SelectBase = (dProps) => {
|
|
|
20
20
|
ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
|
|
21
21
|
collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter,
|
|
22
22
|
hideSearchIcon: dProps.hideSearchIcon ?? ui.select.hideSearchIcon,
|
|
23
|
-
fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange
|
|
23
|
+
fireBlurOnChange: dProps.fireBlurOnChange ?? ui.select.fireBlurOnChange,
|
|
24
|
+
isClientSearchDisabled: dProps.ignoreInputValueFiltering ?? dProps.isClientSearchDisabled
|
|
24
25
|
};
|
|
25
26
|
const isDesktop = useBreakpoint("md");
|
|
26
27
|
return /* @__PURE__ */ jsx(SelectContext.Provider, {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Key } from 'react-aria-components';
|
|
2
2
|
import { SelectBaseProps } from './SelectBase';
|
|
3
3
|
type SelectDesktopProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
|
|
4
|
-
export declare const SelectDesktop: <TKey extends Key = Key>({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectDesktopProps<TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const SelectDesktop: <TKey extends Key = Key>({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectDesktopProps<TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -13,7 +13,7 @@ import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
|
|
|
13
13
|
import { useLabel, usePreventScroll } from "react-aria";
|
|
14
14
|
import { mergeRefs } from "@react-aria/utils";
|
|
15
15
|
//#region src/components/inputs/Selection/shared/SelectDesktop.tsx
|
|
16
|
-
var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
|
|
16
|
+
var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
|
|
17
17
|
const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, isSearchable, isClearable, isLoading, as, size, collapseAfter, selectedTagsType } = props;
|
|
18
18
|
const popoverCva = UIStyle.useCva("popover.cva", popover);
|
|
19
19
|
const formFieldProps = {
|
|
@@ -137,6 +137,8 @@ var SelectDesktop = ({ ref, error, ignoreTriggerWidth, showSelectionContent, inp
|
|
|
137
137
|
isClearable,
|
|
138
138
|
showSelectionContent,
|
|
139
139
|
inputClassName,
|
|
140
|
+
leadingContent,
|
|
141
|
+
trailingContent,
|
|
140
142
|
collapseAfter,
|
|
141
143
|
selectedTagsType,
|
|
142
144
|
isRequired,
|
|
@@ -4,12 +4,12 @@ import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
|
|
|
4
4
|
import { SelectBaseProps } from './SelectBase';
|
|
5
5
|
import { SelectItem } from './select.types';
|
|
6
6
|
import { InputVariantProps } from '../../shared/input.cva';
|
|
7
|
-
interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange" | "onMouseEnter" | "onFocusCapture"> {
|
|
7
|
+
interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter" | "isRequired" | "isDirty" | "fireBlurOnChange" | "leadingContent" | "trailingContent" | "onMouseEnter" | "onFocusCapture"> {
|
|
8
8
|
isInvalid?: boolean;
|
|
9
9
|
className?: string;
|
|
10
10
|
fieldProps?: AriaFieldProps;
|
|
11
11
|
headerProps?: FormFieldHeaderProps;
|
|
12
12
|
onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
|
|
13
13
|
}
|
|
14
|
-
export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
export {};
|
|
@@ -14,7 +14,7 @@ import { Button, ComboBoxStateContext, Input } from "react-aria-components";
|
|
|
14
14
|
import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
|
|
15
15
|
import { useTranslation } from "react-i18next";
|
|
16
16
|
//#region src/components/inputs/Selection/shared/SelectInput.tsx
|
|
17
|
-
var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, onMouseEnter, onFocusCapture, ...props }) => {
|
|
17
|
+
var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, isRequired, isDirty, onCloseComboBox, onBlur, fireBlurOnChange, leadingContent, trailingContent, onMouseEnter, onFocusCapture, ...props }) => {
|
|
18
18
|
const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
|
|
19
19
|
const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
|
|
20
20
|
const { t } = useTranslation("ui");
|
|
@@ -101,6 +101,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
|
|
|
101
101
|
...headerProps,
|
|
102
102
|
labelProps
|
|
103
103
|
}),
|
|
104
|
+
leadingContent && /* @__PURE__ */ jsx("div", {
|
|
105
|
+
className: "ml-input-side-default flex shrink-0 items-center",
|
|
106
|
+
children: leadingContent
|
|
107
|
+
}),
|
|
104
108
|
(showTags || isSearchable) && /* @__PURE__ */ jsxs("div", {
|
|
105
109
|
className: clsx("flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate", !isSearchable && "pointer-events-none z-1"),
|
|
106
110
|
children: [showTags && /* @__PURE__ */ jsx(SelectInputTags, {
|
|
@@ -133,6 +137,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
|
|
|
133
137
|
})
|
|
134
138
|
]
|
|
135
139
|
}),
|
|
140
|
+
trailingContent && /* @__PURE__ */ jsx("div", {
|
|
141
|
+
className: "flex shrink-0 items-center",
|
|
142
|
+
children: trailingContent
|
|
143
|
+
}),
|
|
136
144
|
isClearable && /* @__PURE__ */ jsx(InputClear, {
|
|
137
145
|
onClear: () => {
|
|
138
146
|
onClear();
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Key } from 'react-aria-components';
|
|
2
2
|
import { SelectBaseProps } from './SelectBase';
|
|
3
3
|
type SelectMobileProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
|
|
4
|
-
export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const SelectMobile: <TKey extends Key = Key>({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }: SelectMobileProps<TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
export {};
|
|
@@ -13,7 +13,7 @@ import { useRef } from "react";
|
|
|
13
13
|
import { DialogTrigger } from "react-aria-components";
|
|
14
14
|
import { useLabel } from "react-aria";
|
|
15
15
|
//#region src/components/inputs/Selection/shared/SelectMobile.tsx
|
|
16
|
-
var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
|
|
16
|
+
var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containerClassName, leadingContent, trailingContent, customTrigger, onBlur, onMouseEnter, onFocusCapture, ...props }) => {
|
|
17
17
|
const { label, tooltipText, helperText, isDirty, isRequired, rightContent, isHeaderHidden, headerClassName, errorClassName, placeholder, variant, isDisabled, className, hideLabel, hideDropdownIcon, hideSearchIcon, isSearchable, isClearable, as, size, collapseAfter, selectedTagsType } = props;
|
|
18
18
|
const formFieldProps = {
|
|
19
19
|
error,
|
|
@@ -81,6 +81,8 @@ var SelectMobile = ({ ref, error, showSelectionContent, inputClassName, containe
|
|
|
81
81
|
onBlur: void 0,
|
|
82
82
|
fieldProps,
|
|
83
83
|
headerProps,
|
|
84
|
+
leadingContent,
|
|
85
|
+
trailingContent,
|
|
84
86
|
collapseAfter,
|
|
85
87
|
selectedTagsType,
|
|
86
88
|
isRequired,
|
|
@@ -24,8 +24,8 @@ export declare namespace SelectContext {
|
|
|
24
24
|
selectedIds: Key[];
|
|
25
25
|
isMultiple: boolean;
|
|
26
26
|
} & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
|
|
27
|
-
export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled">;
|
|
28
|
-
export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled" | "ignoreInputValueFiltering">;
|
|
28
|
+
export const Provider: ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, children, mapInitialToSelectItem, ...props }: PropsWithChildren<ProviderProps>) => import("react/jsx-runtime").JSX.Element;
|
|
29
29
|
export const useSelect: () => Type;
|
|
30
30
|
export {};
|
|
31
31
|
}
|
|
@@ -10,7 +10,7 @@ var SelectContext;
|
|
|
10
10
|
id: item.id,
|
|
11
11
|
label: item.label ?? item.name ?? ""
|
|
12
12
|
});
|
|
13
|
-
_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
|
|
13
|
+
_SelectContext.Provider = ({ items, onInputChange, onSearchChange, showSelectAllOption, showNewItemOption, newItemMinLength, onNewItemOption, isLoading, hasLoadMore, isClientSearchDisabled, ignoreInputValueFiltering, children, mapInitialToSelectItem = defaultMapInitialToSelectItem, ...props }) => {
|
|
14
14
|
const isMultiple = props.selectionMode === "multiple";
|
|
15
15
|
const initialSelectedItems = useMemo(() => {
|
|
16
16
|
if (!props.initialSelection) return null;
|
|
@@ -42,7 +42,7 @@ var SelectContext;
|
|
|
42
42
|
newItemMinLength,
|
|
43
43
|
isLoading,
|
|
44
44
|
hasLoadMore,
|
|
45
|
-
isClientSearchDisabled
|
|
45
|
+
isClientSearchDisabled: ignoreInputValueFiltering ?? isClientSearchDisabled
|
|
46
46
|
});
|
|
47
47
|
const selectedItems = useMemo(() => allItems.filter(({ id }) => Array.isArray(fieldState.value) ? fieldState.value.includes(id) : id === fieldState.value), [allItems, fieldState.value]);
|
|
48
48
|
const selectedIds = useMemo(() => selectedItems.map(({ id }) => id), [selectedItems]);
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
2
|
import { Key } from 'react-aria-components';
|
|
3
3
|
import { FieldValues } from 'react-hook-form';
|
|
4
4
|
import { ControlProps } from '../../shared/form.types';
|
|
5
5
|
export interface SelectItem<TKey extends Key = Key> {
|
|
6
6
|
id: TKey;
|
|
7
7
|
label: string;
|
|
8
|
-
content?: string |
|
|
8
|
+
content?: string | ReactNode;
|
|
9
9
|
isDisabled?: boolean;
|
|
10
10
|
}
|
|
11
11
|
export interface ExtendedSelectItem<TKey extends Key = Key> extends SelectItem<TKey> {
|
|
@@ -2,7 +2,7 @@ import { UIStyle } from "../../../config/uiStyle.context.js";
|
|
|
2
2
|
import { UIConfig } from "../../../config/uiConfig.context.js";
|
|
3
3
|
import { FormFieldError } from "../FormField/FormFieldError.js";
|
|
4
4
|
import { CheckContent } from "../shared/CheckContent.js";
|
|
5
|
-
import { toggle, toggleTypography } from "./toggle.cva.js";
|
|
5
|
+
import { toggle, toggleContentClassName, toggleTypography } from "./toggle.cva.js";
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { clsx } from "clsx";
|
|
8
8
|
import { Switch } from "react-aria-components";
|
|
@@ -13,6 +13,7 @@ var ToggleBase = (props) => {
|
|
|
13
13
|
const ui = UIConfig.useConfig();
|
|
14
14
|
const toggleCva = UIStyle.useCva("toggle.cva", toggle);
|
|
15
15
|
const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
|
|
16
|
+
const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
|
|
16
17
|
const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
|
|
17
18
|
const formFieldErrorProps = {
|
|
18
19
|
error,
|
|
@@ -32,6 +33,10 @@ var ToggleBase = (props) => {
|
|
|
32
33
|
variant,
|
|
33
34
|
...rest
|
|
34
35
|
}),
|
|
36
|
+
contentClassName: toggleContentClassNameMap({
|
|
37
|
+
variant,
|
|
38
|
+
...rest
|
|
39
|
+
}),
|
|
35
40
|
children
|
|
36
41
|
})]
|
|
37
42
|
}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });
|
|
@@ -8,3 +8,6 @@ export interface ToggleVariantProps extends VariantProps<typeof toggle> {
|
|
|
8
8
|
export declare const toggleTypography: (props: {
|
|
9
9
|
variant?: "default" | null | undefined;
|
|
10
10
|
}) => TypographyVariantProps | undefined;
|
|
11
|
+
export declare const toggleContentClassName: (props: {
|
|
12
|
+
variant?: "default" | null | undefined;
|
|
13
|
+
}) => string | undefined;
|
|
@@ -26,5 +26,6 @@ var toggleTypography = compoundMapper({ default: {
|
|
|
26
26
|
sizeMobile: "label-1",
|
|
27
27
|
variant: "default"
|
|
28
28
|
} });
|
|
29
|
+
var toggleContentClassName = compoundMapper({ default: "text-text-default-2" });
|
|
29
30
|
//#endregion
|
|
30
|
-
export { toggle, toggleTypography };
|
|
31
|
+
export { toggle, toggleContentClassName, toggleTypography };
|
|
@@ -3,6 +3,7 @@ import { TypographyVariantProps } from '../../text/Typography/typography.cva';
|
|
|
3
3
|
interface CheckContentProps {
|
|
4
4
|
typography?: TypographyVariantProps;
|
|
5
5
|
className?: string;
|
|
6
|
+
contentClassName?: string;
|
|
6
7
|
}
|
|
7
|
-
export declare const CheckContent: ({ children, className, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const CheckContent: ({ children, className, contentClassName, ...props }: PropsWithChildren<CheckContentProps>) => import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
export {};
|
|
@@ -3,15 +3,14 @@ import { typography } from "../../text/Typography/typography.cva.js";
|
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import clsx$1 from "clsx";
|
|
5
5
|
//#region src/components/inputs/shared/CheckContent.tsx
|
|
6
|
-
var CheckContent = ({ children, className, ...props }) => {
|
|
6
|
+
var CheckContent = ({ children, className, contentClassName, ...props }) => {
|
|
7
7
|
return /* @__PURE__ */ jsx("div", {
|
|
8
8
|
className: clsx$1(UIStyle.useCva("typography.cva", typography)({
|
|
9
9
|
size: "label-1",
|
|
10
10
|
sizeMobile: "label-1",
|
|
11
11
|
variant: "default",
|
|
12
|
-
...props.typography
|
|
13
|
-
|
|
14
|
-
}), className),
|
|
12
|
+
...props.typography
|
|
13
|
+
}), contentClassName, className),
|
|
15
14
|
children
|
|
16
15
|
});
|
|
17
16
|
};
|
|
@@ -33,7 +33,7 @@ export declare namespace UIConfig {
|
|
|
33
33
|
};
|
|
34
34
|
toggle: Pick<ToggleProps, "variant">;
|
|
35
35
|
slider: Pick<SliderProps, "minValue" | "maxValue">;
|
|
36
|
-
dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry">;
|
|
36
|
+
dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear">;
|
|
37
37
|
actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
|
|
38
38
|
bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
|
|
39
39
|
tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;
|
|
@@ -47,10 +47,12 @@ export declare namespace UIStyle {
|
|
|
47
47
|
cva?: Cva<CheckboxVariantProps>;
|
|
48
48
|
iconCva?: Cva<CheckboxIconVariantProps>;
|
|
49
49
|
typography?: CompoundMapper<TypographyVariantProps, CheckboxVariantProps>;
|
|
50
|
+
contentClassName?: CompoundMapper<string, CheckboxVariantProps>;
|
|
50
51
|
};
|
|
51
52
|
radio: {
|
|
52
53
|
cva?: Cva<RadioVariantProps>;
|
|
53
54
|
typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
|
|
55
|
+
contentClassName?: CompoundMapper<string, RadioVariantProps>;
|
|
54
56
|
};
|
|
55
57
|
status: {
|
|
56
58
|
iconCva?: Cva<ToastVariantProps>;
|
|
@@ -75,6 +77,7 @@ export declare namespace UIStyle {
|
|
|
75
77
|
toggle: {
|
|
76
78
|
cva?: Cva<ToggleVariantProps>;
|
|
77
79
|
typography?: CompoundMapper<TypographyVariantProps, ToggleVariantProps>;
|
|
80
|
+
contentClassName?: CompoundMapper<string, ToggleVariantProps>;
|
|
78
81
|
};
|
|
79
82
|
typography: {
|
|
80
83
|
cva?: Cva<TypographyVariantProps>;
|
package/dist/index.d.ts
CHANGED
|
@@ -94,6 +94,8 @@ export type { RadioVariantProps } from './components/inputs/RadioGroup/radio.cva
|
|
|
94
94
|
export type { AutocompleteProps, ControlledAutocompleteProps, } from './components/inputs/Selection/Autocomplete/Autocomplete';
|
|
95
95
|
export { Autocomplete } from './components/inputs/Selection/Autocomplete/Autocomplete';
|
|
96
96
|
export { QueryAutocomplete } from './components/inputs/Selection/Autocomplete/QueryAutocomplete';
|
|
97
|
+
export type { SelectBaseProps } from './components/inputs/Selection/shared/SelectBase';
|
|
98
|
+
export type { DefaultInitialSelectItem, SelectAsyncProps, SelectItem, } from './components/inputs/Selection/shared/select.types';
|
|
97
99
|
export type { QuerySelectProps } from './components/inputs/Selection/Select/QuerySelect';
|
|
98
100
|
export { QuerySelect } from './components/inputs/Selection/Select/QuerySelect';
|
|
99
101
|
export type { ControlledSelectProps, SelectProps } from './components/inputs/Selection/Select/Select';
|