@povio/ui 2.3.2-rc.1 → 2.3.2-rc.3
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/DateTime/DatePicker/DatePicker.d.ts +2 -1
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +7 -2
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +2 -1
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +7 -2
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.d.ts +2 -1
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +7 -2
- package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +1 -0
- package/dist/components/inputs/DateTime/shared/DatePickerInput.d.ts +3 -2
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +109 -108
- package/dist/components/inputs/DateTime/shared/datePicker.types.d.ts +1 -0
- package/dist/components/inputs/DateTime/shared/datePickerTodayIcon.d.ts +2 -1
- package/dist/components/inputs/DateTime/shared/datePickerTodayIcon.js +14 -99
- package/dist/components/inputs/Inputs/InputItem.d.ts +2 -2
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +1 -0
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts +1 -1
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +73 -3
- package/dist/components/inputs/Selection/Select/QuerySelect.d.ts +3 -3
- package/dist/components/inputs/Selection/Select/QuerySelect.js +72 -3
- package/dist/components/inputs/Selection/Select/Select.js +1 -0
- package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +5 -0
- package/dist/components/inputs/Selection/shared/querySelect.utils.js +15 -3
- package/dist/components/inputs/Skeleton/InputFrame.d.ts +2 -0
- package/dist/components/inputs/Skeleton/InputFrame.js +353 -333
- package/dist/config/uiConfig.context.d.ts +1 -0
- package/dist/config/uiConfig.context.js +1 -0
- package/dist/tw-ui-plugin.js +4 -0
- package/package.json +1 -1
- package/dist/components/inputs/shared/StaticInput.d.ts +0 -38
|
@@ -1,12 +1,7 @@
|
|
|
1
|
-
import { UIStyle } from "../../../../config/uiStyle.context.js";
|
|
2
|
-
import { UIConfig } from "../../../../config/uiConfig.context.js";
|
|
3
|
-
import { button, buttonContent, buttonIconSize, buttonSize } from "../../../buttons/Button/button.cva.js";
|
|
4
1
|
import { IconButton } from "../../../buttons/IconButton/IconButton.js";
|
|
2
|
+
import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
|
|
5
3
|
import { TodayIcon } from "../../../../assets/icons/Today.js";
|
|
6
|
-
import {
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
import { clsx } from "clsx";
|
|
9
|
-
import { cloneElement, isValidElement } from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
5
|
//#region src/components/inputs/DateTime/shared/datePickerTodayIcon.tsx
|
|
11
6
|
var getDatePickerTodayIcon = (todayIcon) => {
|
|
12
7
|
if (!todayIcon) return null;
|
|
@@ -15,103 +10,23 @@ var getDatePickerTodayIcon = (todayIcon) => {
|
|
|
15
10
|
var renderDatePickerTodayIcon = (todayIcon, options) => {
|
|
16
11
|
const icon = getDatePickerTodayIcon(todayIcon);
|
|
17
12
|
if (!icon) return;
|
|
18
|
-
const { className, isDisabled, onPress, renderStatic, size = "none" } = options ?? {};
|
|
19
|
-
const
|
|
20
|
-
if (renderStatic) return /* @__PURE__ */ jsx(StaticDatePickerTodayIcon, {
|
|
21
|
-
icon,
|
|
22
|
-
className: todayIconClassName,
|
|
23
|
-
isDisabled,
|
|
24
|
-
size
|
|
25
|
-
});
|
|
26
|
-
return /* @__PURE__ */ jsx(IconButton, {
|
|
13
|
+
const { className, isDisabled, onPress, renderStatic, size = "none", todayIconButtonComponent = "iconButton" } = options ?? {};
|
|
14
|
+
const buttonProps = {
|
|
27
15
|
label: "",
|
|
28
16
|
icon,
|
|
29
17
|
size,
|
|
30
18
|
isDisabled,
|
|
31
|
-
onPress
|
|
32
|
-
|
|
19
|
+
onPress
|
|
20
|
+
};
|
|
21
|
+
if (todayIconButtonComponent === "inlineIconButton") return /* @__PURE__ */ jsx(InlineIconButton, {
|
|
22
|
+
...buttonProps,
|
|
23
|
+
staticRender: renderStatic,
|
|
24
|
+
className: className ?? "relative z-1 !border-none"
|
|
25
|
+
});
|
|
26
|
+
return /* @__PURE__ */ jsx(IconButton, {
|
|
27
|
+
...buttonProps,
|
|
28
|
+
className: className ?? "relative z-1"
|
|
33
29
|
});
|
|
34
|
-
};
|
|
35
|
-
var StaticDatePickerTodayIcon = (t0) => {
|
|
36
|
-
const $ = c(19);
|
|
37
|
-
const { icon, className, isDisabled, size } = t0;
|
|
38
|
-
const uiConfig = UIConfig.useConfig();
|
|
39
|
-
const buttonCva = UIStyle.useCva("button.cva", button);
|
|
40
|
-
const buttonSizeCva = UIStyle.useCva("button.sizeCva", buttonSize);
|
|
41
|
-
const buttonContentCva = UIStyle.useCva("button.contentCva", buttonContent);
|
|
42
|
-
const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
|
|
43
|
-
let t1;
|
|
44
|
-
if ($[0] !== buttonIconSizeCva || $[1] !== icon || $[2] !== size) {
|
|
45
|
-
const iconClassName = buttonIconSizeCva({
|
|
46
|
-
size,
|
|
47
|
-
className: "shrink-0"
|
|
48
|
-
});
|
|
49
|
-
bb0: {
|
|
50
|
-
if (isValidElement(icon)) {
|
|
51
|
-
t1 = cloneElement(icon, { className: clsx(iconClassName, icon.props.className) });
|
|
52
|
-
break bb0;
|
|
53
|
-
}
|
|
54
|
-
const Icon = icon;
|
|
55
|
-
let t2;
|
|
56
|
-
if ($[4] !== Icon || $[5] !== iconClassName) {
|
|
57
|
-
t2 = /* @__PURE__ */ jsx(Icon, { className: iconClassName });
|
|
58
|
-
$[4] = Icon;
|
|
59
|
-
$[5] = iconClassName;
|
|
60
|
-
$[6] = t2;
|
|
61
|
-
} else t2 = $[6];
|
|
62
|
-
t1 = t2;
|
|
63
|
-
}
|
|
64
|
-
$[0] = buttonIconSizeCva;
|
|
65
|
-
$[1] = icon;
|
|
66
|
-
$[2] = size;
|
|
67
|
-
$[3] = t1;
|
|
68
|
-
} else t1 = $[3];
|
|
69
|
-
const renderedIcon = t1;
|
|
70
|
-
const variant = uiConfig.button.variant;
|
|
71
|
-
let t2;
|
|
72
|
-
if ($[7] !== buttonContentCva || $[8] !== buttonCva || $[9] !== buttonSizeCva || $[10] !== className || $[11] !== size || $[12] !== variant) {
|
|
73
|
-
t2 = clsx(buttonCva({
|
|
74
|
-
className,
|
|
75
|
-
size,
|
|
76
|
-
variant,
|
|
77
|
-
width: "hug"
|
|
78
|
-
}), buttonSizeCva({
|
|
79
|
-
iconOnly: true,
|
|
80
|
-
size
|
|
81
|
-
}), buttonContentCva({
|
|
82
|
-
iconOnly: true,
|
|
83
|
-
iconPosition: "left",
|
|
84
|
-
size
|
|
85
|
-
}));
|
|
86
|
-
$[7] = buttonContentCva;
|
|
87
|
-
$[8] = buttonCva;
|
|
88
|
-
$[9] = buttonSizeCva;
|
|
89
|
-
$[10] = className;
|
|
90
|
-
$[11] = size;
|
|
91
|
-
$[12] = variant;
|
|
92
|
-
$[13] = t2;
|
|
93
|
-
} else t2 = $[13];
|
|
94
|
-
let t3;
|
|
95
|
-
if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
|
|
96
|
-
t3 = /* @__PURE__ */ jsx("span", { className: "sr-only" });
|
|
97
|
-
$[14] = t3;
|
|
98
|
-
} else t3 = $[14];
|
|
99
|
-
let t4;
|
|
100
|
-
if ($[15] !== isDisabled || $[16] !== renderedIcon || $[17] !== t2) {
|
|
101
|
-
t4 = /* @__PURE__ */ jsxs("button", {
|
|
102
|
-
type: "button",
|
|
103
|
-
"aria-hidden": "true",
|
|
104
|
-
tabIndex: -1,
|
|
105
|
-
disabled: isDisabled,
|
|
106
|
-
className: t2,
|
|
107
|
-
children: [renderedIcon, t3]
|
|
108
|
-
});
|
|
109
|
-
$[15] = isDisabled;
|
|
110
|
-
$[16] = renderedIcon;
|
|
111
|
-
$[17] = t2;
|
|
112
|
-
$[18] = t4;
|
|
113
|
-
} else t4 = $[18];
|
|
114
|
-
return t4;
|
|
115
30
|
};
|
|
116
31
|
//#endregion
|
|
117
32
|
export { renderDatePickerTodayIcon };
|
|
@@ -14,9 +14,9 @@ declare const componentRegistry: {
|
|
|
14
14
|
readonly passwordInput: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/PasswordInput/PasswordInput').ControlledPasswordInputProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
15
15
|
readonly textArea: <TFieldValues extends import('react-hook-form').FieldValues>(props: import('../Input/TextArea/TextArea').ControlledTextAreaProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
readonly select: typeof Select;
|
|
17
|
-
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
|
|
17
|
+
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, TInitialSelectItem = import('../../..').DefaultInitialSelectItem<TKey>>(props: import('../Selection/Select/QuerySelect.js').QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
readonly autocomplete: typeof Autocomplete;
|
|
19
|
-
readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>(
|
|
19
|
+
readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>(props: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
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;
|
|
21
21
|
readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, granularity, minValue, maxValue, renderStaticInput, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
22
22
|
readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, renderStaticInput, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { FieldValues } from 'react-hook-form';
|
|
2
2
|
import { QueryAutocompleteProps, QueryFn } from './queryAutocomplete.types';
|
|
3
3
|
import { SelectItem } from '../shared/select.types';
|
|
4
|
-
export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn>(
|
|
4
|
+
export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn>(props: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
import { UIConfig } from "../../../../config/uiConfig.context.js";
|
|
2
2
|
import { Autocomplete } from "./Autocomplete.js";
|
|
3
|
-
import { getQueryItems,
|
|
3
|
+
import { getQueryItems, shouldEnableQueryForSelection } from "../shared/querySelect.utils.js";
|
|
4
4
|
import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
|
|
5
|
+
import { c } from "react/compiler-runtime";
|
|
5
6
|
import { jsx } from "react/jsx-runtime";
|
|
6
7
|
import { useState } from "react";
|
|
8
|
+
import { mergeRefs } from "@react-aria/utils";
|
|
9
|
+
import { Controller } from "react-hook-form";
|
|
7
10
|
//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
|
|
8
|
-
var
|
|
11
|
+
var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
|
|
9
12
|
"use no memo";
|
|
10
13
|
const ui = UIConfig.useConfig();
|
|
11
14
|
const [search, setSearch] = useState("");
|
|
@@ -16,7 +19,11 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingCo
|
|
|
16
19
|
queryOptions,
|
|
17
20
|
mapItems: (data) => getQueryItems(data, queryMap),
|
|
18
21
|
search,
|
|
19
|
-
initialQueryState:
|
|
22
|
+
initialQueryState: shouldEnableQueryForSelection({
|
|
23
|
+
initialSelection: props.initialSelection,
|
|
24
|
+
value: "value" in props ? props.value : void 0,
|
|
25
|
+
mapInitialToSelectItem: props.mapInitialToSelectItem
|
|
26
|
+
}) ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
|
|
20
27
|
});
|
|
21
28
|
const handleChange = (value) => {
|
|
22
29
|
onChange?.(value);
|
|
@@ -42,5 +49,68 @@ var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingCo
|
|
|
42
49
|
onLoadMore: fetchNextPage
|
|
43
50
|
});
|
|
44
51
|
};
|
|
52
|
+
var QueryAutocomplete = (props) => {
|
|
53
|
+
const $ = c(16);
|
|
54
|
+
if ("formControl" in props && props.formControl) {
|
|
55
|
+
let formControl;
|
|
56
|
+
let innerProps;
|
|
57
|
+
let ref;
|
|
58
|
+
if ($[0] !== props) {
|
|
59
|
+
({formControl, ref, ...innerProps} = props);
|
|
60
|
+
$[0] = props;
|
|
61
|
+
$[1] = formControl;
|
|
62
|
+
$[2] = innerProps;
|
|
63
|
+
$[3] = ref;
|
|
64
|
+
} else {
|
|
65
|
+
formControl = $[1];
|
|
66
|
+
innerProps = $[2];
|
|
67
|
+
ref = $[3];
|
|
68
|
+
}
|
|
69
|
+
const controlWithOptions = formControl.control;
|
|
70
|
+
let t0;
|
|
71
|
+
if ($[4] !== controlWithOptions || $[5] !== innerProps || $[6] !== props.error || $[7] !== props.isDisabled || $[8] !== ref) {
|
|
72
|
+
t0 = (t1) => {
|
|
73
|
+
const { field, fieldState: t2 } = t1;
|
|
74
|
+
const { error, isDirty } = t2;
|
|
75
|
+
return /* @__PURE__ */ jsx(QueryAutocompleteContent, {
|
|
76
|
+
...innerProps,
|
|
77
|
+
ref: mergeRefs(ref, field.ref),
|
|
78
|
+
value: field.value,
|
|
79
|
+
onChange: field.onChange,
|
|
80
|
+
onBlur: field.onBlur,
|
|
81
|
+
isDirty,
|
|
82
|
+
isDisabled: field.disabled || props.isDisabled || !!controlWithOptions._options?.disabled,
|
|
83
|
+
error: props.error ?? error?.message
|
|
84
|
+
});
|
|
85
|
+
};
|
|
86
|
+
$[4] = controlWithOptions;
|
|
87
|
+
$[5] = innerProps;
|
|
88
|
+
$[6] = props.error;
|
|
89
|
+
$[7] = props.isDisabled;
|
|
90
|
+
$[8] = ref;
|
|
91
|
+
$[9] = t0;
|
|
92
|
+
} else t0 = $[9];
|
|
93
|
+
let t1;
|
|
94
|
+
if ($[10] !== formControl.control || $[11] !== formControl.name || $[12] !== t0) {
|
|
95
|
+
t1 = /* @__PURE__ */ jsx(Controller, {
|
|
96
|
+
control: formControl.control,
|
|
97
|
+
name: formControl.name,
|
|
98
|
+
render: t0
|
|
99
|
+
});
|
|
100
|
+
$[10] = formControl.control;
|
|
101
|
+
$[11] = formControl.name;
|
|
102
|
+
$[12] = t0;
|
|
103
|
+
$[13] = t1;
|
|
104
|
+
} else t1 = $[13];
|
|
105
|
+
return t1;
|
|
106
|
+
}
|
|
107
|
+
let t0;
|
|
108
|
+
if ($[14] !== props) {
|
|
109
|
+
t0 = /* @__PURE__ */ jsx(QueryAutocompleteContent, { ...props });
|
|
110
|
+
$[14] = props;
|
|
111
|
+
$[15] = t0;
|
|
112
|
+
} else t0 = $[15];
|
|
113
|
+
return t0;
|
|
114
|
+
};
|
|
45
115
|
//#endregion
|
|
46
116
|
export { QueryAutocomplete };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
+
import { Key } from 'react-aria-components';
|
|
2
|
+
import { FieldValues } from 'react-hook-form';
|
|
1
3
|
import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
|
|
2
4
|
import { SelectProps } from './Select';
|
|
3
5
|
import { QueryDataType, QueryFn } from '../shared/querySelect.utils';
|
|
4
6
|
import { OmitDiscriminatedUnion } from '../../../../types/common';
|
|
5
|
-
import { Key } from 'react-aria-components';
|
|
6
|
-
import { FieldValues } from 'react-hook-form';
|
|
7
7
|
export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectProps<TKey, TInitialSelectItem>, "items" | "totalItems" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem> & {
|
|
8
8
|
query: TQueryFn;
|
|
9
9
|
queryParams?: Parameters<TQueryFn>[0];
|
|
@@ -11,4 +11,4 @@ export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends
|
|
|
11
11
|
queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
|
|
12
12
|
isInitialQueryDisabled?: boolean;
|
|
13
13
|
};
|
|
14
|
-
export declare const QuerySelect: <TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key
|
|
14
|
+
export declare const QuerySelect: <TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { UIConfig } from "../../../../config/uiConfig.context.js";
|
|
2
2
|
import { Select } from "./Select.js";
|
|
3
|
-
import { getQueryItems,
|
|
3
|
+
import { getQueryItems, shouldEnableQueryForSelection } from "../shared/querySelect.utils.js";
|
|
4
4
|
import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
|
|
5
5
|
import { c } from "react/compiler-runtime";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
import { useState } from "react";
|
|
8
|
+
import { mergeRefs } from "@react-aria/utils";
|
|
9
|
+
import { Controller } from "react-hook-form";
|
|
8
10
|
//#region src/components/inputs/Selection/Select/QuerySelect.tsx
|
|
9
|
-
var
|
|
11
|
+
var QuerySelectContent = (t0) => {
|
|
10
12
|
const $ = c(28);
|
|
11
13
|
const { query, queryParams, queryOptions, queryMap, ...props } = t0;
|
|
12
14
|
const ui = UIConfig.useConfig();
|
|
@@ -19,7 +21,11 @@ var QuerySelect = (t0) => {
|
|
|
19
21
|
$[1] = t1;
|
|
20
22
|
} else t1 = $[1];
|
|
21
23
|
const t2 = isSearchable ? search : void 0;
|
|
22
|
-
const t3 =
|
|
24
|
+
const t3 = shouldEnableQueryForSelection({
|
|
25
|
+
initialSelection: props.initialSelection,
|
|
26
|
+
value: "value" in props ? props.value : void 0,
|
|
27
|
+
mapInitialToSelectItem: props.mapInitialToSelectItem
|
|
28
|
+
}) ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
|
|
23
29
|
let t4;
|
|
24
30
|
if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
|
|
25
31
|
t4 = {
|
|
@@ -100,5 +106,68 @@ var QuerySelect = (t0) => {
|
|
|
100
106
|
} else t7 = $[27];
|
|
101
107
|
return t7;
|
|
102
108
|
};
|
|
109
|
+
var QuerySelect = (props) => {
|
|
110
|
+
const $ = c(16);
|
|
111
|
+
if ("formControl" in props && props.formControl) {
|
|
112
|
+
let formControl;
|
|
113
|
+
let innerProps;
|
|
114
|
+
let ref;
|
|
115
|
+
if ($[0] !== props) {
|
|
116
|
+
({formControl, ref, ...innerProps} = props);
|
|
117
|
+
$[0] = props;
|
|
118
|
+
$[1] = formControl;
|
|
119
|
+
$[2] = innerProps;
|
|
120
|
+
$[3] = ref;
|
|
121
|
+
} else {
|
|
122
|
+
formControl = $[1];
|
|
123
|
+
innerProps = $[2];
|
|
124
|
+
ref = $[3];
|
|
125
|
+
}
|
|
126
|
+
const controlWithOptions = formControl.control;
|
|
127
|
+
let t0;
|
|
128
|
+
if ($[4] !== controlWithOptions || $[5] !== innerProps || $[6] !== props.error || $[7] !== props.isDisabled || $[8] !== ref) {
|
|
129
|
+
t0 = (t1) => {
|
|
130
|
+
const { field, fieldState: t2 } = t1;
|
|
131
|
+
const { error, isDirty } = t2;
|
|
132
|
+
return /* @__PURE__ */ jsx(QuerySelectContent, {
|
|
133
|
+
...innerProps,
|
|
134
|
+
ref: mergeRefs(ref, field.ref),
|
|
135
|
+
value: field.value,
|
|
136
|
+
onChange: field.onChange,
|
|
137
|
+
onBlur: field.onBlur,
|
|
138
|
+
isDirty,
|
|
139
|
+
isDisabled: field.disabled || props.isDisabled || !!controlWithOptions._options?.disabled,
|
|
140
|
+
error: props.error ?? error?.message
|
|
141
|
+
});
|
|
142
|
+
};
|
|
143
|
+
$[4] = controlWithOptions;
|
|
144
|
+
$[5] = innerProps;
|
|
145
|
+
$[6] = props.error;
|
|
146
|
+
$[7] = props.isDisabled;
|
|
147
|
+
$[8] = ref;
|
|
148
|
+
$[9] = t0;
|
|
149
|
+
} else t0 = $[9];
|
|
150
|
+
let t1;
|
|
151
|
+
if ($[10] !== formControl.control || $[11] !== formControl.name || $[12] !== t0) {
|
|
152
|
+
t1 = /* @__PURE__ */ jsx(Controller, {
|
|
153
|
+
control: formControl.control,
|
|
154
|
+
name: formControl.name,
|
|
155
|
+
render: t0
|
|
156
|
+
});
|
|
157
|
+
$[10] = formControl.control;
|
|
158
|
+
$[11] = formControl.name;
|
|
159
|
+
$[12] = t0;
|
|
160
|
+
$[13] = t1;
|
|
161
|
+
} else t1 = $[13];
|
|
162
|
+
return t1;
|
|
163
|
+
}
|
|
164
|
+
let t0;
|
|
165
|
+
if ($[14] !== props) {
|
|
166
|
+
t0 = /* @__PURE__ */ jsx(QuerySelectContent, { ...props });
|
|
167
|
+
$[14] = props;
|
|
168
|
+
$[15] = t0;
|
|
169
|
+
} else t0 = $[15];
|
|
170
|
+
return t0;
|
|
171
|
+
};
|
|
103
172
|
//#endregion
|
|
104
173
|
export { QuerySelect };
|
|
@@ -91,6 +91,7 @@ function SelectInner(t0) {
|
|
|
91
91
|
className: clsx("w-full", props.containerClassName),
|
|
92
92
|
inputClassName: clsx(props.className, props.inputClassName),
|
|
93
93
|
contentWrapperClassName: selectInputTagsContentWrapperCva({ isSearchable }),
|
|
94
|
+
contentGroup: "select",
|
|
94
95
|
typographySize: "label-1",
|
|
95
96
|
labelPlacement: "content-row",
|
|
96
97
|
dataAttributes,
|
|
@@ -4,4 +4,9 @@ import { SelectItem } from './select.types';
|
|
|
4
4
|
export type QueryFn<TData = any> = (...args: any[]) => UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
|
|
5
5
|
export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
|
|
6
6
|
export declare const isInitialSelectionLabelMissing: <TInitialSelectItem>(initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined, mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem) => boolean;
|
|
7
|
+
export declare const shouldEnableQueryForSelection: <TInitialSelectItem, TKey extends Key = Key>({ initialSelection, value, mapInitialToSelectItem, }: {
|
|
8
|
+
initialSelection: TInitialSelectItem | TInitialSelectItem[] | null | undefined;
|
|
9
|
+
value: TKey | TKey[] | null | undefined;
|
|
10
|
+
mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;
|
|
11
|
+
}) => boolean;
|
|
7
12
|
export declare const getQueryItems: <TQueryFn extends QueryFn, TKey extends Key = Key>(data: QueryDataType<TQueryFn> | undefined, queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[]) => SelectItem<TKey>[];
|
|
@@ -5,11 +5,23 @@ var getDefaultInitialSelectionLabel = (initialSelection) => {
|
|
|
5
5
|
if ("name" in initialSelection && typeof initialSelection.name === "string") return initialSelection.name;
|
|
6
6
|
return "";
|
|
7
7
|
};
|
|
8
|
+
var getInitialSelectionItems = (initialSelection) => {
|
|
9
|
+
return Array.isArray(initialSelection) ? initialSelection : initialSelection != null ? [initialSelection] : [];
|
|
10
|
+
};
|
|
11
|
+
var getInitialSelectionLabel = (initialSelection, mapInitialToSelectItem) => mapInitialToSelectItem?.(initialSelection).label ?? getDefaultInitialSelectionLabel(initialSelection);
|
|
8
12
|
var isInitialSelectionLabelMissing = (initialSelection, mapInitialToSelectItem) => {
|
|
9
|
-
return (
|
|
10
|
-
return (
|
|
13
|
+
return getInitialSelectionItems(initialSelection).some((item) => {
|
|
14
|
+
return getInitialSelectionLabel(item, mapInitialToSelectItem) === "";
|
|
11
15
|
});
|
|
12
16
|
};
|
|
17
|
+
var shouldEnableQueryForSelection = ({ initialSelection, value, mapInitialToSelectItem }) => {
|
|
18
|
+
if (isInitialSelectionLabelMissing(initialSelection, mapInitialToSelectItem)) return true;
|
|
19
|
+
const values = Array.isArray(value) ? value : value != null ? [value] : [];
|
|
20
|
+
if (values.length === 0) return false;
|
|
21
|
+
const initialSelections = getInitialSelectionItems(initialSelection);
|
|
22
|
+
const labeledInitialSelectionIds = new Set(initialSelections.filter((item) => getInitialSelectionLabel(item, mapInitialToSelectItem) !== "").map((item) => mapInitialToSelectItem?.(item).id ?? item.id));
|
|
23
|
+
return values.some((id) => !labeledInitialSelectionIds.has(id));
|
|
24
|
+
};
|
|
13
25
|
var getQueryItems = (data, queryMap) => {
|
|
14
26
|
if (!data) return [];
|
|
15
27
|
if (queryMap) return queryMap(data);
|
|
@@ -21,4 +33,4 @@ var getQueryItems = (data, queryMap) => {
|
|
|
21
33
|
return [];
|
|
22
34
|
};
|
|
23
35
|
//#endregion
|
|
24
|
-
export { getQueryItems,
|
|
36
|
+
export { getQueryItems, shouldEnableQueryForSelection };
|
|
@@ -39,6 +39,7 @@ type InputFrameChildProps = InputFrameDataAttributeProps & {
|
|
|
39
39
|
type InputFrameChildren = ReactNode | ((childProps: InputFrameChildProps) => ReactNode);
|
|
40
40
|
type InputFrameLabelPlacement = "content-wrapper" | "content-row";
|
|
41
41
|
type InputFrameActionContentPlacement = "content-wrapper" | "content-row";
|
|
42
|
+
type InputFrameContentGroup = "date-picker" | "input" | "select";
|
|
42
43
|
export interface InputFrameProps extends InputVariantProps, Partial<FormFieldProps> {
|
|
43
44
|
ref?: Ref<HTMLDivElement>;
|
|
44
45
|
children: InputFrameChildren;
|
|
@@ -69,6 +70,7 @@ export interface InputFrameProps extends InputVariantProps, Partial<FormFieldPro
|
|
|
69
70
|
inputClassName?: string;
|
|
70
71
|
contentClassName?: string;
|
|
71
72
|
contentWrapperClassName?: string;
|
|
73
|
+
contentGroup?: InputFrameContentGroup;
|
|
72
74
|
contentAndTrailingClassName?: string;
|
|
73
75
|
wrapContentAndTrailing?: boolean;
|
|
74
76
|
wrapTrailingContent?: boolean;
|