@povio/ui 2.2.9-rc.21 → 2.2.9-rc.22
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/Input/NumberInput/NumberInput.js +2 -2
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +3 -4
- package/dist/components/inputs/Selection/Select/Select.js +2 -0
- package/dist/components/inputs/Selection/shared/staticSelect.utils.js +4 -1
- package/dist/components/inputs/shared/StaticInput.d.ts +2 -1
- package/dist/components/inputs/shared/StaticInput.js +49 -36
- package/package.json +1 -1
|
@@ -185,8 +185,8 @@ var NumberInput = ({ renderStaticInput, ...props }) => {
|
|
|
185
185
|
dataIsFilled: !(`${staticValue}` === "" || staticValue === null || staticValue === void 0),
|
|
186
186
|
dataIsDirty: props.isDirty,
|
|
187
187
|
dataIsRequired: props.isRequired,
|
|
188
|
-
dataIsDisabled: isDisabled,
|
|
189
|
-
dataDisabled: isDisabled,
|
|
188
|
+
dataIsDisabled: props.isDisabled,
|
|
189
|
+
dataDisabled: props.isDisabled,
|
|
190
190
|
dataInvalid: !!props.error,
|
|
191
191
|
dataHasSelection: hasValue
|
|
192
192
|
},
|
|
@@ -257,6 +257,7 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
|
|
|
257
257
|
const size = props.size ?? ui.input.size;
|
|
258
258
|
const variant = props.variant ?? ui.input.variant;
|
|
259
259
|
const hideLabel = props.hideLabel ?? ui.input.hideLabel;
|
|
260
|
+
const isClearable = props.isClearable ?? ui.input.isClearable;
|
|
260
261
|
const isHeaderHidden = props.isHeaderHidden || as === "inline" || as === "filter" || as === "floating";
|
|
261
262
|
let isDisabled = !!props.isDisabled;
|
|
262
263
|
if (isFormControlDisabled) isDisabled = true;
|
|
@@ -276,10 +277,8 @@ var NumberRangeInput = ({ renderStaticInput, ...props }) => {
|
|
|
276
277
|
className: clsx("group w-full", as === "inline" && "h-full", props.className),
|
|
277
278
|
inputClassName: props.inputClassName,
|
|
278
279
|
displayValue,
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
onClear: () => {}
|
|
282
|
-
}),
|
|
280
|
+
isEmpty: !hasValue,
|
|
281
|
+
hasClearIcon: !props.isDisabled && isClearable,
|
|
283
282
|
dataAttributes: {
|
|
284
283
|
dataIsEmpty: !hasValue,
|
|
285
284
|
dataIsFilled: hasValue,
|
|
@@ -53,6 +53,7 @@ function Select({ renderStaticInput, ...props }) {
|
|
|
53
53
|
const as = props.as ?? ui.input.as;
|
|
54
54
|
let isDisabled = !!props.isDisabled;
|
|
55
55
|
if (isFormControlDisabled) isDisabled = true;
|
|
56
|
+
const isClearable = props.isClearable ?? ui.input.isClearable;
|
|
56
57
|
const mode = props.selectionMode ?? ui.select.selectionMode;
|
|
57
58
|
const { displayValue, isEmpty } = getStaticSelectValue({
|
|
58
59
|
items: props.items,
|
|
@@ -97,6 +98,7 @@ function Select({ renderStaticInput, ...props }) {
|
|
|
97
98
|
dataHasSearch: false
|
|
98
99
|
},
|
|
99
100
|
leadingContent: props.leadingContent,
|
|
101
|
+
hasClearIcon: isClearable,
|
|
100
102
|
trailingContent
|
|
101
103
|
});
|
|
102
104
|
}
|
|
@@ -27,7 +27,10 @@ var getStaticSelectValue = ({ items, value, selectionMode, initialSelection, map
|
|
|
27
27
|
return {
|
|
28
28
|
selectedItem,
|
|
29
29
|
selectedItems,
|
|
30
|
-
displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content :
|
|
30
|
+
displayValue: selectedItem != null ? showSelectionContent && selectedItem.content ? selectedItem.content : /* @__PURE__ */ jsx("div", {
|
|
31
|
+
className: "min-w-0 flex-1 truncate",
|
|
32
|
+
children: selectedItem.label
|
|
33
|
+
}) : "",
|
|
31
34
|
isEmpty: selectedItem == null
|
|
32
35
|
};
|
|
33
36
|
};
|
|
@@ -28,10 +28,11 @@ interface StaticInputProps extends FormFieldProps {
|
|
|
28
28
|
leadingVisual?: ReactNode;
|
|
29
29
|
leadingContent?: ReactNode;
|
|
30
30
|
leadingContentClassName?: string;
|
|
31
|
+
hasClearIcon?: boolean;
|
|
31
32
|
trailingContent?: ReactNode;
|
|
32
33
|
contentRowClassName?: string;
|
|
33
34
|
inputClassName?: string;
|
|
34
35
|
dataAttributes?: StaticInputDataAttributes;
|
|
35
36
|
}
|
|
36
|
-
export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare const StaticInput: ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }: StaticInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
38
|
export {};
|
|
@@ -6,7 +6,7 @@ import { FormField } from "../FormField/FormField.js";
|
|
|
6
6
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
import { clsx } from "clsx";
|
|
8
8
|
//#region src/components/inputs/shared/StaticInput.tsx
|
|
9
|
-
var StaticInput = ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled = false, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }) => {
|
|
9
|
+
var StaticInput = ({ onInteract, as, typographySize, size, variant, applyMinInputWidth, placeholder, showPlacholderIfFilled = false, displayValue, isEmpty, leadingVisual, leadingContent, leadingContentClassName, hasClearIcon, trailingContent, contentRowClassName, inputClassName, dataAttributes, className, ...formFieldProps }) => {
|
|
10
10
|
const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
|
|
11
11
|
const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
|
|
12
12
|
const typographyCva = UIStyle.useCva("typography.cva", typography);
|
|
@@ -48,42 +48,55 @@ var StaticInput = ({ onInteract, as, typographySize, size, variant, applyMinInpu
|
|
|
48
48
|
className: clsx("group/static-input group/input-content group/select-content relative flex items-center gap-input-gap-input-text-to-elements", applyMinInputWidth && "min-w-input-width-min-width", inputBaseCva({
|
|
49
49
|
as,
|
|
50
50
|
variant
|
|
51
|
-
}),
|
|
52
|
-
children: [
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
as
|
|
56
|
-
}), typographySize && typographyCva({ size: typographySize }), contentRowClassName),
|
|
57
|
-
children: [
|
|
58
|
-
leadingVisual && /* @__PURE__ */ jsx("div", {
|
|
59
|
-
className: "pointer-events-none shrink-0",
|
|
60
|
-
children: leadingVisual
|
|
61
|
-
}),
|
|
62
|
-
as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
|
|
63
|
-
as,
|
|
51
|
+
}), inputClassName),
|
|
52
|
+
children: [
|
|
53
|
+
/* @__PURE__ */ jsxs("div", {
|
|
54
|
+
className: clsx("group/input-content flex min-w-0 w-full items-center gap-input-gap-input-text-to-elements pr-0!", inputSizeCva({
|
|
64
55
|
size,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
56
|
+
as
|
|
57
|
+
}), typographySize && typographyCva({ size: typographySize }), contentRowClassName),
|
|
58
|
+
children: [
|
|
59
|
+
leadingVisual && /* @__PURE__ */ jsx("div", {
|
|
60
|
+
className: "pointer-events-none shrink-0",
|
|
61
|
+
children: leadingVisual
|
|
62
|
+
}),
|
|
63
|
+
as && ["filter", "floating"].includes(as) && /* @__PURE__ */ jsx(FormFieldLabel, {
|
|
64
|
+
as,
|
|
65
|
+
size,
|
|
66
|
+
label: formFieldProps.label,
|
|
67
|
+
isRequired: formFieldProps.isRequired,
|
|
68
|
+
isDisabled: formFieldProps.isDisabled
|
|
69
|
+
}),
|
|
70
|
+
leadingContent && /* @__PURE__ */ jsx("div", {
|
|
71
|
+
className: clsx("ml-input-side-default flex shrink-0 items-center", leadingContentClassName),
|
|
72
|
+
children: leadingContent
|
|
73
|
+
}),
|
|
74
|
+
!hasValue ? /* @__PURE__ */ jsx("div", {
|
|
75
|
+
className: "text-text-default-3",
|
|
76
|
+
children: staticDisplayContent
|
|
77
|
+
}) : staticDisplayContent,
|
|
78
|
+
shouldRenderFloatingLineSpacer && /* @__PURE__ */ jsx(Fragment, { children: "\xA0" }),
|
|
79
|
+
shouldRenderPlaceholderAfterValue && /* @__PURE__ */ jsx("div", {
|
|
80
|
+
className: "shrink-0 text-text-default-3",
|
|
81
|
+
children: placeholder
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
}),
|
|
85
|
+
hasClearIcon && /* @__PURE__ */ jsx("div", {
|
|
86
|
+
className: clsx("flex items-center gap-input-gap-trailing-elements py-0! pl-0!", inputSizeCva({
|
|
87
|
+
size,
|
|
88
|
+
as
|
|
89
|
+
})),
|
|
90
|
+
children: /* @__PURE__ */ jsx("div", { className: "size-6 shrink-0" })
|
|
91
|
+
}),
|
|
92
|
+
trailingContent && /* @__PURE__ */ jsx("div", {
|
|
93
|
+
className: clsx(inputSizeCva({
|
|
94
|
+
size,
|
|
95
|
+
as
|
|
96
|
+
}), "pointer-events-none flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
|
|
97
|
+
children: trailingContent
|
|
98
|
+
})
|
|
99
|
+
]
|
|
87
100
|
})
|
|
88
101
|
});
|
|
89
102
|
};
|