@povio/ui 2.2.9-rc.1 → 2.2.9-rc.11
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/buttons/InlineIconButton/InlineIconButton.d.ts +1 -1
- package/dist/components/buttons/InlineIconButton/InlineIconButton.js +2 -2
- 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 +7 -3
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +19 -5
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +7 -3
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +13 -2
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +7 -3
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +12 -2
- package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts +3 -2
- package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +13 -3
- package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +5 -2
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +16 -8
- package/dist/components/inputs/DateTime/shared/TimePickerInput.js +4 -1
- package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts +3 -0
- package/dist/components/inputs/DateTime/shared/datePickerInput.cva.d.ts +7 -0
- package/dist/components/inputs/DateTime/shared/datePickerInput.cva.js +13 -0
- package/dist/components/inputs/FormField/FormFieldHeader.js +3 -1
- package/dist/components/inputs/FormField/formFieldHeader.cva.d.ts +6 -0
- package/dist/components/inputs/FormField/formFieldHeader.cva.js +11 -0
- package/dist/components/inputs/Input/TextInput/TextInput.js +2 -0
- package/dist/components/inputs/Inputs/InputItem.d.ts +9 -15
- package/dist/components/inputs/Inputs/InputItem.js +4 -0
- 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/Autocomplete/QueryAutocomplete.d.ts +3 -18
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +24 -7
- package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +30 -0
- package/dist/components/inputs/Selection/Select/QuerySelect.d.ts +14 -0
- package/dist/components/inputs/Selection/Select/QuerySelect.js +58 -0
- 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 +6 -1
- package/dist/components/inputs/Selection/shared/SelectBase.js +3 -2
- package/dist/components/inputs/Selection/shared/SelectDesktop.d.ts +1 -1
- package/dist/components/inputs/Selection/shared/SelectDesktop.js +8 -2
- package/dist/components/inputs/Selection/shared/SelectInput.d.ts +2 -2
- package/dist/components/inputs/Selection/shared/SelectInput.js +11 -1
- package/dist/components/inputs/Selection/shared/SelectListBox.d.ts +2 -2
- package/dist/components/inputs/Selection/shared/SelectListBox.js +2 -2
- package/dist/components/inputs/Selection/shared/SelectMobile.d.ts +1 -1
- package/dist/components/inputs/Selection/shared/SelectMobile.js +5 -1
- package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +6 -0
- package/dist/components/inputs/Selection/shared/querySelect.utils.js +13 -0
- package/dist/components/inputs/Selection/shared/select.context.d.ts +3 -2
- package/dist/components/inputs/Selection/shared/select.context.js +22 -4
- package/dist/components/inputs/Selection/shared/select.types.d.ts +3 -2
- package/dist/components/inputs/Selection/shared/selectDesktop.cva.d.ts +3 -0
- package/dist/components/inputs/Selection/shared/selectDesktop.cva.js +5 -0
- 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 +7 -1
- package/dist/config/uiConfig.context.js +5 -1
- package/dist/config/uiStyle.context.d.ts +13 -2
- package/dist/helpers/dynamicInputs.d.ts +5 -5
- package/dist/helpers/dynamicInputs.js +3 -0
- package/dist/hooks/useQueryAutocomplete.d.ts +26 -0
- package/dist/hooks/useQueryAutocomplete.js +43 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +4 -3
- package/package.json +1 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
//#region src/components/inputs/Selection/shared/querySelect.utils.ts
|
|
2
|
+
var getQueryItems = (data, queryMap) => {
|
|
3
|
+
if (!data) return [];
|
|
4
|
+
if (queryMap) return queryMap(data);
|
|
5
|
+
if (Array.isArray(data)) return data;
|
|
6
|
+
if (typeof data === "object" && data !== null) {
|
|
7
|
+
if ("items" in data && Array.isArray(data.items)) return data.items;
|
|
8
|
+
if ("pages" in data && Array.isArray(data.pages)) return data.pages.flatMap((page) => page && typeof page === "object" && "items" in page && Array.isArray(page.items) ? page.items : []);
|
|
9
|
+
}
|
|
10
|
+
return [];
|
|
11
|
+
};
|
|
12
|
+
//#endregion
|
|
13
|
+
export { getQueryItems };
|
|
@@ -17,14 +17,15 @@ export declare namespace SelectContext {
|
|
|
17
17
|
onClear: () => void;
|
|
18
18
|
onSelectAll: () => void;
|
|
19
19
|
onRemove: (val: Key) => void;
|
|
20
|
+
onBlur: () => void;
|
|
20
21
|
listItems: ExtendedSelectItem[];
|
|
21
22
|
selectableListItems: SelectItem[];
|
|
22
23
|
selectedItems: SelectItem[];
|
|
23
24
|
selectedIds: Key[];
|
|
24
25
|
isMultiple: boolean;
|
|
25
26
|
} & Pick<SelectBaseProps, "onInputChange" | "isLoading" | "hasLoadMore">;
|
|
26
|
-
export type ProviderProps = GroupedSelectProps & Pick<SelectBaseProps, "items" | "onInputChange" | "onSearchChange" | "showSelectAllOption" | "showNewItemOption" | "newItemMinLength" | "onNewItemOption" | "isLoading" | "hasLoadMore" | "mapInitialToSelectItem" | "isSearchable" | "isClientSearchDisabled">;
|
|
27
|
-
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;
|
|
28
29
|
export const useSelect: () => Type;
|
|
29
30
|
export {};
|
|
30
31
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { useSelectItems } from "./useSelectItems.js";
|
|
2
1
|
import { useDebounceCallback } from "../../../../hooks/useDebounceCallback.js";
|
|
2
|
+
import { useSelectItems } from "./useSelectItems.js";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
5
5
|
//#region src/components/inputs/Selection/shared/select.context.tsx
|
|
@@ -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]);
|
|
@@ -84,7 +84,7 @@ var SelectContext;
|
|
|
84
84
|
else updateValue(value);
|
|
85
85
|
}, [props.value]);
|
|
86
86
|
useEffect(() => {
|
|
87
|
-
if (!isMultiple && fieldState.value && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
|
|
87
|
+
if (!isMultiple && props.value !== null && props.value !== void 0 && fieldState.value !== null && fieldState.value !== void 0 && fieldState.inputValue === "" && getItem(fieldState.value)?.label) syncFieldState(fieldState.value);
|
|
88
88
|
}, [allListItems]);
|
|
89
89
|
const handleInputChange = useCallback((inputValue) => {
|
|
90
90
|
const newFieldState = {
|
|
@@ -144,6 +144,22 @@ var SelectContext;
|
|
|
144
144
|
fieldState.value,
|
|
145
145
|
onChange
|
|
146
146
|
]);
|
|
147
|
+
const onBlur = useCallback(() => {
|
|
148
|
+
if (props.isSearchable && isMultiple && fieldState.searchValue !== "") {
|
|
149
|
+
const newFieldState = {
|
|
150
|
+
...fieldState,
|
|
151
|
+
inputValue: "",
|
|
152
|
+
searchValue: ""
|
|
153
|
+
};
|
|
154
|
+
setFieldState(newFieldState);
|
|
155
|
+
emitStateChanges(newFieldState);
|
|
156
|
+
setShowAll(true);
|
|
157
|
+
}
|
|
158
|
+
}, [
|
|
159
|
+
props.isSearchable,
|
|
160
|
+
isMultiple,
|
|
161
|
+
fieldState
|
|
162
|
+
]);
|
|
147
163
|
const value = useMemo(() => ({
|
|
148
164
|
fieldState,
|
|
149
165
|
isOpen,
|
|
@@ -154,6 +170,7 @@ var SelectContext;
|
|
|
154
170
|
onClear,
|
|
155
171
|
onSelectAll,
|
|
156
172
|
onRemove,
|
|
173
|
+
onBlur,
|
|
157
174
|
listItems,
|
|
158
175
|
selectableListItems,
|
|
159
176
|
selectedItems,
|
|
@@ -171,6 +188,7 @@ var SelectContext;
|
|
|
171
188
|
onClear,
|
|
172
189
|
onSelectAll,
|
|
173
190
|
onRemove,
|
|
191
|
+
onBlur,
|
|
174
192
|
listItems,
|
|
175
193
|
selectableListItems,
|
|
176
194
|
selectedIds,
|
|
@@ -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> {
|
|
@@ -54,6 +54,7 @@ export interface SelectAsyncProps {
|
|
|
54
54
|
onLoadMore?: () => void;
|
|
55
55
|
}
|
|
56
56
|
export interface SelectVirtualizationProps {
|
|
57
|
+
totalItems?: number;
|
|
57
58
|
virtualizerOptions?: {
|
|
58
59
|
rowHeight?: number;
|
|
59
60
|
estimatedRowHeight?: number;
|
|
@@ -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
|
};
|
|
@@ -25,9 +25,15 @@ export declare namespace UIConfig {
|
|
|
25
25
|
radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
|
|
26
26
|
checkbox: Pick<CheckboxProps, "variant">;
|
|
27
27
|
select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange">;
|
|
28
|
+
queryAutocomplete: {
|
|
29
|
+
isInitialQueryDisabled?: boolean;
|
|
30
|
+
};
|
|
31
|
+
querySelect: {
|
|
32
|
+
isInitialQueryDisabled?: boolean;
|
|
33
|
+
};
|
|
28
34
|
toggle: Pick<ToggleProps, "variant">;
|
|
29
35
|
slider: Pick<SliderProps, "minValue" | "maxValue">;
|
|
30
|
-
dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
|
|
36
|
+
dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "shouldForceLeadingZeros" | "disableManualEntry" | "autoFixYear">;
|
|
31
37
|
actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
|
|
32
38
|
bottomSheet: Pick<BottomSheetProps, "closeDragThreshold" | "closeVelocityThreshold" | "hideThumb" | "headerTypography">;
|
|
33
39
|
tableHeaderText: Pick<HeaderTextProps, "variant" | "size">;
|
|
@@ -34,6 +34,8 @@ var UIConfig;
|
|
|
34
34
|
hideSearchIcon: false,
|
|
35
35
|
fireBlurOnChange: false
|
|
36
36
|
},
|
|
37
|
+
queryAutocomplete: { isInitialQueryDisabled: false },
|
|
38
|
+
querySelect: { isInitialQueryDisabled: false },
|
|
37
39
|
toggle: { variant: "default" },
|
|
38
40
|
slider: {
|
|
39
41
|
minValue: 0,
|
|
@@ -41,8 +43,10 @@ var UIConfig;
|
|
|
41
43
|
},
|
|
42
44
|
dateInput: {
|
|
43
45
|
todayIcon: false,
|
|
46
|
+
todayIconButtonSize: "none",
|
|
44
47
|
shouldForceLeadingZeros: false,
|
|
45
|
-
disableManualEntry: false
|
|
48
|
+
disableManualEntry: false,
|
|
49
|
+
autoFixYear: false
|
|
46
50
|
},
|
|
47
51
|
actionModal: {
|
|
48
52
|
titleTypography: {
|
|
@@ -4,9 +4,13 @@ import { BreadcrumbChevronVariantProps, BreadcrumbIconVariantProps, BreadcrumbIt
|
|
|
4
4
|
import { ButtonVariantProps } from '../components/buttons/Button/button.cva';
|
|
5
5
|
import { PillButtonVariants } from '../components/buttons/PillButton/pillButton.cva';
|
|
6
6
|
import { CheckboxIconVariantProps, CheckboxVariantProps } from '../components/inputs/Checkbox/checkbox.cva';
|
|
7
|
+
import { DatePickerInputContentRowProps } from '../components/inputs/DateTime/shared/datePickerInput.cva';
|
|
7
8
|
import { FormFieldErrorVariantProps } from '../components/inputs/FormField/formFieldError.cva';
|
|
9
|
+
import { FormFieldHeaderVariantProps } from '../components/inputs/FormField/formFieldHeader.cva';
|
|
8
10
|
import { FormFieldHelperVariantProps } from '../components/inputs/FormField/formFieldHelper.cva';
|
|
9
11
|
import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
|
|
12
|
+
import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDesktop.cva';
|
|
13
|
+
import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
|
|
10
14
|
import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
|
|
11
15
|
import { LabelBaseProps } from '../components/inputs/shared/label.cva';
|
|
12
16
|
import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
|
|
@@ -24,13 +28,12 @@ import { LinkVariantProps } from '../components/text/Link/link.cva';
|
|
|
24
28
|
import { TagVariantProps } from '../components/text/Tag/tag.cva';
|
|
25
29
|
import { TypographyVariantProps } from '../components/text/Typography/typography.cva';
|
|
26
30
|
import { CompoundMapper, ConfigSchema } from '../utils/compoundMapper';
|
|
27
|
-
import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
|
|
28
31
|
export declare namespace UIStyle {
|
|
29
32
|
export type Cva<T> = (props: (T & ClassProp) | ClassProp) => string;
|
|
30
33
|
type OptionKey = {
|
|
31
34
|
[K in keyof Options]: Options[K] extends object ? `${K & string}.${keyof Options[K] & string}` : never;
|
|
32
35
|
}[keyof Options];
|
|
33
|
-
interface Options {
|
|
36
|
+
export interface Options {
|
|
34
37
|
button: {
|
|
35
38
|
cva?: Cva<ButtonVariantProps>;
|
|
36
39
|
sizeCva?: Cva<ButtonVariantProps>;
|
|
@@ -46,10 +49,12 @@ export declare namespace UIStyle {
|
|
|
46
49
|
cva?: Cva<CheckboxVariantProps>;
|
|
47
50
|
iconCva?: Cva<CheckboxIconVariantProps>;
|
|
48
51
|
typography?: CompoundMapper<TypographyVariantProps, CheckboxVariantProps>;
|
|
52
|
+
contentClassName?: CompoundMapper<string, CheckboxVariantProps>;
|
|
49
53
|
};
|
|
50
54
|
radio: {
|
|
51
55
|
cva?: Cva<RadioVariantProps>;
|
|
52
56
|
typography?: CompoundMapper<TypographyVariantProps, RadioVariantProps>;
|
|
57
|
+
contentClassName?: CompoundMapper<string, RadioVariantProps>;
|
|
53
58
|
};
|
|
54
59
|
status: {
|
|
55
60
|
iconCva?: Cva<ToastVariantProps>;
|
|
@@ -67,6 +72,9 @@ export declare namespace UIStyle {
|
|
|
67
72
|
sizeCva?: Cva<InputSizeProps>;
|
|
68
73
|
sideCva?: Cva<InputSideProps>;
|
|
69
74
|
};
|
|
75
|
+
datePickerInput: {
|
|
76
|
+
contentRowCva?: Cva<DatePickerInputContentRowProps>;
|
|
77
|
+
};
|
|
70
78
|
label: {
|
|
71
79
|
cva?: Cva<LabelBaseProps>;
|
|
72
80
|
typography?: CompoundMapper<TypographyVariantProps, LabelBaseProps>;
|
|
@@ -74,6 +82,7 @@ export declare namespace UIStyle {
|
|
|
74
82
|
toggle: {
|
|
75
83
|
cva?: Cva<ToggleVariantProps>;
|
|
76
84
|
typography?: CompoundMapper<TypographyVariantProps, ToggleVariantProps>;
|
|
85
|
+
contentClassName?: CompoundMapper<string, ToggleVariantProps>;
|
|
77
86
|
};
|
|
78
87
|
typography: {
|
|
79
88
|
cva?: Cva<TypographyVariantProps>;
|
|
@@ -145,11 +154,13 @@ export declare namespace UIStyle {
|
|
|
145
154
|
cva?: Cva<PopoverVariantProps>;
|
|
146
155
|
};
|
|
147
156
|
formField: {
|
|
157
|
+
headerCva?: Cva<FormFieldHeaderVariantProps>;
|
|
148
158
|
errorLabelCva?: Cva<FormFieldErrorVariantProps>;
|
|
149
159
|
helperLabelCva?: Cva<FormFieldHelperVariantProps>;
|
|
150
160
|
};
|
|
151
161
|
select: {
|
|
152
162
|
listBoxItemCva?: Cva<SelectListBoxItemCva>;
|
|
163
|
+
popoverCva?: Cva<SelectPopoverCva>;
|
|
153
164
|
};
|
|
154
165
|
}
|
|
155
166
|
interface ProviderProps {
|
|
@@ -21,14 +21,14 @@ export type AllowedComponentType<TZodType extends z.ZodType> = ZodUtils.ZodTypeS
|
|
|
21
21
|
datetime: "datePicker" | "dateTimePicker" | "timePicker";
|
|
22
22
|
dateRange: "dateRangePicker";
|
|
23
23
|
boolean: "toggle" | "checkbox";
|
|
24
|
-
number: "numberInput" | "slider" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
|
|
25
|
-
enum: "select" | "autocomplete" | "segment";
|
|
26
|
-
string: "textInput" | "passwordInput" | "textArea" | "select" | "autocomplete" | "queryAutocomplete" | "segment";
|
|
24
|
+
number: "numberInput" | "slider" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
|
|
25
|
+
enum: "select" | "querySelect" | "autocomplete" | "segment";
|
|
26
|
+
string: "textInput" | "passwordInput" | "textArea" | "textEditor" | "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
|
|
27
27
|
email: "textInput";
|
|
28
|
-
array: "select" | "autocomplete" | "queryAutocomplete" | "segment";
|
|
28
|
+
array: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
|
|
29
29
|
object: InputComponentType;
|
|
30
30
|
unknown: InputComponentType;
|
|
31
|
-
uuid: "select" | "autocomplete" | "queryAutocomplete" | "segment";
|
|
31
|
+
uuid: "select" | "querySelect" | "autocomplete" | "queryAutocomplete" | "segment";
|
|
32
32
|
}>;
|
|
33
33
|
interface DynamicInputDefBase<TProps> {
|
|
34
34
|
label?: string;
|
|
@@ -81,6 +81,7 @@ var getDefaultProps = (componentType, keyType) => {
|
|
|
81
81
|
].includes(componentType)) props.items = getDefaultSelectionItems(unwrappedType);
|
|
82
82
|
if ([
|
|
83
83
|
"select",
|
|
84
|
+
"querySelect",
|
|
84
85
|
"autocomplete",
|
|
85
86
|
"queryAutocomplete",
|
|
86
87
|
"segment"
|
|
@@ -146,6 +147,8 @@ var populateInputDef = (schema, schemaKey, value, options) => {
|
|
|
146
147
|
const inputWrapper = value.inputWrapper ?? options.globalInputWrapper;
|
|
147
148
|
if ("render" in value) return {
|
|
148
149
|
name,
|
|
150
|
+
label,
|
|
151
|
+
placeholder,
|
|
149
152
|
render: value.render
|
|
150
153
|
};
|
|
151
154
|
const schemaKeyType = schema.shape[schemaKey];
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
|
|
2
|
+
import { Key } from 'react-aria-components';
|
|
3
|
+
import { SelectItem } from '../components/inputs/Selection/shared/select.types';
|
|
4
|
+
type QueryResult<TData = any> = UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
|
|
5
|
+
type QueryFn<TData = any> = (...args: any[]) => QueryResult<TData>;
|
|
6
|
+
type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
|
|
7
|
+
interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey extends Key = Key> {
|
|
8
|
+
query: TQueryFn;
|
|
9
|
+
queryParams?: Parameters<TQueryFn>[0];
|
|
10
|
+
queryOptions?: Parameters<TQueryFn>[1];
|
|
11
|
+
mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
|
|
12
|
+
initialQueryState?: boolean;
|
|
13
|
+
search?: string;
|
|
14
|
+
}
|
|
15
|
+
export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, initialQueryState, search, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
|
|
16
|
+
data: any;
|
|
17
|
+
isLoading: boolean;
|
|
18
|
+
isQueryEnabled: boolean;
|
|
19
|
+
handleEnableQuery: () => void;
|
|
20
|
+
items: SelectItem<TKey>[];
|
|
21
|
+
totalItems: any;
|
|
22
|
+
hasNextPage: boolean;
|
|
23
|
+
fetchNextPage: (() => Promise<unknown>) | ((options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<any, Error>>) | undefined;
|
|
24
|
+
isFetchingNextPage: boolean;
|
|
25
|
+
};
|
|
26
|
+
export {};
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { useMemo, useState } from "react";
|
|
2
|
+
//#region src/hooks/useQueryAutocomplete.ts
|
|
3
|
+
var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
|
|
4
|
+
const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
|
|
5
|
+
const queryResult = query(search === void 0 ? queryParams : {
|
|
6
|
+
search,
|
|
7
|
+
...queryParams
|
|
8
|
+
}, {
|
|
9
|
+
...queryOptions,
|
|
10
|
+
enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
|
|
11
|
+
});
|
|
12
|
+
const data = queryResult.data;
|
|
13
|
+
const isLoading = queryResult.isLoading;
|
|
14
|
+
const isInfiniteQueryResult = (result) => {
|
|
15
|
+
return "hasNextPage" in result && "fetchNextPage" in result;
|
|
16
|
+
};
|
|
17
|
+
const isInfiniteQuery = isInfiniteQueryResult(queryResult);
|
|
18
|
+
const handleEnableQuery = () => {
|
|
19
|
+
setIsQueryEnabled(true);
|
|
20
|
+
};
|
|
21
|
+
const infiniteQueryResult = isInfiniteQuery ? queryResult : void 0;
|
|
22
|
+
const hasNextPage = infiniteQueryResult?.hasNextPage ?? false;
|
|
23
|
+
const fetchNextPage = infiniteQueryResult?.fetchNextPage;
|
|
24
|
+
const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
|
|
25
|
+
const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
|
|
26
|
+
const items = useMemo(() => {
|
|
27
|
+
if (!data) return [];
|
|
28
|
+
return mapItems(data);
|
|
29
|
+
}, [data, mapItems]);
|
|
30
|
+
return {
|
|
31
|
+
data,
|
|
32
|
+
isLoading: isLoading || isFetchingNextPage,
|
|
33
|
+
isQueryEnabled,
|
|
34
|
+
handleEnableQuery,
|
|
35
|
+
items,
|
|
36
|
+
totalItems,
|
|
37
|
+
hasNextPage,
|
|
38
|
+
fetchNextPage,
|
|
39
|
+
isFetchingNextPage
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
//#endregion
|
|
43
|
+
export { useQueryAutocomplete };
|
package/dist/index.d.ts
CHANGED
|
@@ -94,6 +94,10 @@ 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';
|
|
99
|
+
export type { QuerySelectProps } from './components/inputs/Selection/Select/QuerySelect';
|
|
100
|
+
export { QuerySelect } from './components/inputs/Selection/Select/QuerySelect';
|
|
97
101
|
export type { ControlledSelectProps, SelectProps } from './components/inputs/Selection/Select/Select';
|
|
98
102
|
export { Select } from './components/inputs/Selection/Select/Select';
|
|
99
103
|
export type { ControlledSliderProps, SliderProps } from './components/inputs/Slider/Slider';
|
package/dist/index.js
CHANGED
|
@@ -68,10 +68,10 @@ import { Checkbox } from "./components/inputs/Checkbox/Checkbox.js";
|
|
|
68
68
|
import { useLongPressRepeat } from "./hooks/useLongPressRepeat.js";
|
|
69
69
|
import { useScrollableListBox } from "./hooks/useScrollableListBox.js";
|
|
70
70
|
import { FormField } from "./components/inputs/FormField/FormField.js";
|
|
71
|
+
import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
|
|
71
72
|
import { DateTimeUtils } from "./utils/date-time.utils.js";
|
|
72
73
|
import { DatePicker } from "./components/inputs/DateTime/DatePicker/DatePicker.js";
|
|
73
74
|
import { Tag } from "./components/text/Tag/Tag.js";
|
|
74
|
-
import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
|
|
75
75
|
import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
|
|
76
76
|
import { TextInput } from "./components/inputs/Input/TextInput/TextInput.js";
|
|
77
77
|
import { Select } from "./components/inputs/Selection/Select/Select.js";
|
|
@@ -92,6 +92,8 @@ import { QueryAutocomplete } from "./components/inputs/Selection/Autocomplete/Qu
|
|
|
92
92
|
import { Slider } from "./components/inputs/Slider/Slider.js";
|
|
93
93
|
import { Toggle } from "./components/inputs/Toggle/Toggle.js";
|
|
94
94
|
import { Segment } from "./components/segment/Segment.js";
|
|
95
|
+
import { QuerySelect } from "./components/inputs/Selection/Select/QuerySelect.js";
|
|
96
|
+
import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
|
|
95
97
|
import { StringUtils } from "./utils/string.utils.js";
|
|
96
98
|
import { dynamicInputs } from "./helpers/dynamicInputs.js";
|
|
97
99
|
import { Form } from "./components/inputs/Inputs/Form.js";
|
|
@@ -102,7 +104,6 @@ import { Stepper } from "./components/navigation/Stepper/Stepper.js";
|
|
|
102
104
|
import { Modal } from "./components/overlays/Modal/Modal.js";
|
|
103
105
|
import { ActionModal } from "./components/overlays/ActionModal/ActionModal.js";
|
|
104
106
|
import { Drawer } from "./components/overlays/Drawer/Drawer.js";
|
|
105
|
-
import { ResponsivePopover } from "./components/overlays/ResponsivePopover/ResponsivePopover.js";
|
|
106
107
|
import { TooltipEllipsis } from "./components/overlays/Tooltip/TooltipEllipsis.js";
|
|
107
108
|
import { PaginationList } from "./components/shared/pagination/PaginationList.js";
|
|
108
109
|
import { Pagination } from "./components/shared/pagination/Pagination.js";
|
|
@@ -135,4 +136,4 @@ import { useTableColumnConfig } from "./hooks/useTableColumnConfig.js";
|
|
|
135
136
|
import { ArrayUtils } from "./utils/array.utils.js";
|
|
136
137
|
import { QueriesUtils } from "./utils/queries.utils.js";
|
|
137
138
|
import { RoutingUtils } from "./utils/routing.utils.js";
|
|
138
|
-
export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
|
|
139
|
+
export { Accordion, ActionModal, Alert, AlignCenterIcon, AlignLeftIcon, AlignLeftRightIcon, AlignRightIcon, ArrayUtils, ArrowDropDownIcon, ArrowDropUpIcon, ArrowLeftIcon, ArrowRightIcon, Autocomplete, BoldIcon, BottomSheet, Breadcrumbs, BulletedListIcon, Button, CalendarIcon, CellText, CheckIcon, Checkbox, CheckboxCheckmarkIcon, CheckboxIndeterminateIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ClockIcon, CloseIcon, ColumnConfigModal, Confirmation, DatePicker, DateRangePicker, DateTimeIcon, DateTimePicker, DateTimeUtils, DateUtils, DomUtils, Drawer, FileUpload, FileUploadContainer, FileUtils, Form, FormField, HeaderText, HighlightIcon, HighlightOnIcon, HomeIcon, IconButton, InfiniteTable, InfoIcon, InlineIconButton, InputUpload, Inputs, ItalicIcon, Link, LinkContext, LinkIcon, Loader, Menu, MenuIcon, MenuItem, MenuPopover, Modal, NumberInput, NumberedListIcon, ObjectUtils, PaginatedTable, Pagination, PaginationList, PasswordInput, PillButton, PointerHorizontalIcon, PointerVerticalIcon, ProgressBar, QueriesUtils, QueryAutocomplete, QuerySelect, RadioGroup, ResponsivePopover, RestUtils, RoutingUtils, Segment, Select, SendIcon, Slider, SplitButton, Stepper, StrikethroughIcon, StringUtils, Table, Tag, TextArea, TextButton, TextColorIcon, TextInput, ThemeContext, TimePicker, Toast, ToastContainer, Toggle, ToggleButton, Tooltip, TooltipEllipsis, Typography, UIConfig, UIRouter, UIStyle, UnderlinedIcon, VisibilityIcon, VisibilityOffIcon, compoundMapper, dynamicColumns, dynamicInputs, isEqual, logger, ns, resources, uiOutlineClass, useAutosave, useBreakpoint, useDebounceCallback, useDeepCompareEffect, useDeepCompareLayoutEffect, useDeepCompareMemo, useFilters, useForm, useFormAutosave, useIntersectionObserver, useLocalStorage, useLongPressRepeat, usePagination, useScrollableListBox, useSorting, useStateAndRef, useTableColumnConfig, useTableNav, useToast, useTranslationMemo };
|