@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.
Files changed (69) hide show
  1. package/dist/components/buttons/InlineIconButton/InlineIconButton.d.ts +1 -1
  2. package/dist/components/buttons/InlineIconButton/InlineIconButton.js +2 -2
  3. package/dist/components/inputs/Checkbox/Checkbox.js +6 -1
  4. package/dist/components/inputs/Checkbox/checkbox.cva.d.ts +3 -0
  5. package/dist/components/inputs/Checkbox/checkbox.cva.js +2 -1
  6. package/dist/components/inputs/DateTime/DatePicker/DatePicker.d.ts +7 -3
  7. package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +19 -5
  8. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +7 -3
  9. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +13 -2
  10. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +7 -3
  11. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +12 -2
  12. package/dist/components/inputs/DateTime/TimePicker/TimePicker.d.ts +3 -2
  13. package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +13 -3
  14. package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +5 -2
  15. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +16 -8
  16. package/dist/components/inputs/DateTime/shared/TimePickerInput.js +4 -1
  17. package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts +3 -0
  18. package/dist/components/inputs/DateTime/shared/datePickerInput.cva.d.ts +7 -0
  19. package/dist/components/inputs/DateTime/shared/datePickerInput.cva.js +13 -0
  20. package/dist/components/inputs/FormField/FormFieldHeader.js +3 -1
  21. package/dist/components/inputs/FormField/formFieldHeader.cva.d.ts +6 -0
  22. package/dist/components/inputs/FormField/formFieldHeader.cva.js +11 -0
  23. package/dist/components/inputs/Input/TextInput/TextInput.js +2 -0
  24. package/dist/components/inputs/Inputs/InputItem.d.ts +9 -15
  25. package/dist/components/inputs/Inputs/InputItem.js +4 -0
  26. package/dist/components/inputs/RadioGroup/RadioGroup.js +6 -1
  27. package/dist/components/inputs/RadioGroup/radio.cva.d.ts +3 -0
  28. package/dist/components/inputs/RadioGroup/radio.cva.js +2 -1
  29. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.d.ts +3 -1
  30. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +2 -2
  31. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts +3 -18
  32. package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +24 -7
  33. package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +30 -0
  34. package/dist/components/inputs/Selection/Select/QuerySelect.d.ts +14 -0
  35. package/dist/components/inputs/Selection/Select/QuerySelect.js +58 -0
  36. package/dist/components/inputs/Selection/Select/Select.d.ts +4 -2
  37. package/dist/components/inputs/Selection/Select/Select.js +2 -2
  38. package/dist/components/inputs/Selection/shared/SelectBase.d.ts +6 -1
  39. package/dist/components/inputs/Selection/shared/SelectBase.js +3 -2
  40. package/dist/components/inputs/Selection/shared/SelectDesktop.d.ts +1 -1
  41. package/dist/components/inputs/Selection/shared/SelectDesktop.js +8 -2
  42. package/dist/components/inputs/Selection/shared/SelectInput.d.ts +2 -2
  43. package/dist/components/inputs/Selection/shared/SelectInput.js +11 -1
  44. package/dist/components/inputs/Selection/shared/SelectListBox.d.ts +2 -2
  45. package/dist/components/inputs/Selection/shared/SelectListBox.js +2 -2
  46. package/dist/components/inputs/Selection/shared/SelectMobile.d.ts +1 -1
  47. package/dist/components/inputs/Selection/shared/SelectMobile.js +5 -1
  48. package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +6 -0
  49. package/dist/components/inputs/Selection/shared/querySelect.utils.js +13 -0
  50. package/dist/components/inputs/Selection/shared/select.context.d.ts +3 -2
  51. package/dist/components/inputs/Selection/shared/select.context.js +22 -4
  52. package/dist/components/inputs/Selection/shared/select.types.d.ts +3 -2
  53. package/dist/components/inputs/Selection/shared/selectDesktop.cva.d.ts +3 -0
  54. package/dist/components/inputs/Selection/shared/selectDesktop.cva.js +5 -0
  55. package/dist/components/inputs/Toggle/Toggle.js +6 -1
  56. package/dist/components/inputs/Toggle/toggle.cva.d.ts +3 -0
  57. package/dist/components/inputs/Toggle/toggle.cva.js +2 -1
  58. package/dist/components/inputs/shared/CheckContent.d.ts +2 -1
  59. package/dist/components/inputs/shared/CheckContent.js +3 -4
  60. package/dist/config/uiConfig.context.d.ts +7 -1
  61. package/dist/config/uiConfig.context.js +5 -1
  62. package/dist/config/uiStyle.context.d.ts +13 -2
  63. package/dist/helpers/dynamicInputs.d.ts +5 -5
  64. package/dist/helpers/dynamicInputs.js +3 -0
  65. package/dist/hooks/useQueryAutocomplete.d.ts +26 -0
  66. package/dist/hooks/useQueryAutocomplete.js +43 -0
  67. package/dist/index.d.ts +4 -0
  68. package/dist/index.js +4 -3
  69. 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 | ReactElement;
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;
@@ -0,0 +1,3 @@
1
+ import { VariantProps } from 'class-variance-authority';
2
+ export declare const selectPopoverCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
3
+ export type SelectPopoverCva = VariantProps<typeof selectPopoverCva>;
@@ -0,0 +1,5 @@
1
+ import { cva } from "class-variance-authority";
2
+ //#region src/components/inputs/Selection/shared/selectDesktop.cva.ts
3
+ var selectPopoverCva = cva("my-4 outline-none");
4
+ //#endregion
5
+ export { selectPopoverCva };
@@ -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
- className: "text-text-default-2"
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 };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@povio/ui",
3
- "version": "2.2.9-rc.1",
3
+ "version": "2.2.9-rc.11",
4
4
  "type": "module",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",