@koobiq/react-components 0.7.1 → 0.9.0
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/Alert/Alert.js +5 -3
- package/dist/components/Alert/types.d.ts +0 -3
- package/dist/components/Backdrop/Backdrop.js +1 -1
- package/dist/components/Backdrop/types.d.ts +4 -1
- package/dist/components/Button/Button.js +7 -7
- package/dist/components/Button/types.d.ts +0 -4
- package/dist/components/ButtonToggleGroup/ButtonToggleGroup.js +6 -6
- package/dist/components/ButtonToggleGroup/components/ButtonToggle/ButtonToggle.js +6 -6
- package/dist/components/ButtonToggleGroup/components/ButtonToggle/types.d.ts +0 -1
- package/dist/components/ButtonToggleGroup/types.d.ts +0 -3
- package/dist/components/Checkbox/Checkbox.d.ts +1 -1
- package/dist/components/Checkbox/Checkbox.js +6 -6
- package/dist/components/Checkbox/types.d.ts +0 -5
- package/dist/components/Container/Container.js +2 -2
- package/dist/components/Container/types.d.ts +0 -2
- package/dist/components/DateInput/DateInput.js +27 -17
- package/dist/components/DateInput/types.d.ts +20 -6
- package/dist/components/DateInput/types.js +5 -0
- package/dist/components/DatePicker/DatePicker.js +5 -1
- package/dist/components/DatePicker/types.d.ts +14 -3
- package/dist/components/Dialog/Dialog.js +1 -1
- package/dist/components/Dialog/components/DialogCloseButton.d.ts +2 -2
- package/dist/components/Dialog/types.d.ts +0 -1
- package/dist/components/Divider/Divider.js +5 -4
- package/dist/components/Divider/types.d.ts +0 -2
- package/dist/components/FieldComponents/Field/Field.d.ts +4 -0
- package/dist/components/FieldComponents/Field/Field.js +10 -0
- package/dist/components/FieldComponents/Field/Field.module.css.js +8 -0
- package/dist/components/FieldComponents/Field/index.d.ts +2 -0
- package/dist/components/FieldComponents/Field/types.d.ts +4 -0
- package/dist/components/FieldComponents/FieldAddon/FieldAddon.js +4 -4
- package/dist/components/FieldComponents/FieldContentGroup/FieldContentGroup.js +2 -2
- package/dist/components/FieldComponents/FieldError/FieldError.d.ts +4 -2
- package/dist/components/FieldComponents/FieldError/FieldError.js +6 -8
- package/dist/components/FieldComponents/FieldInput/FieldInput.js +3 -3
- package/dist/components/FieldComponents/FieldInputDate/FieldInputDate.js +2 -2
- package/dist/components/FieldComponents/FieldSelect/FieldSelect.js +3 -3
- package/dist/components/FieldComponents/index.d.ts +1 -2
- package/dist/components/FormControl/FormControl.d.ts +4 -0
- package/dist/components/FormControl/FormControl.js +33 -0
- package/dist/components/FormControl/FormControl.module.css.js +17 -0
- package/dist/components/FormControl/index.d.ts +2 -0
- package/dist/components/FormControl/types.d.ts +19 -0
- package/dist/components/FormControl/types.js +6 -0
- package/dist/components/FormControlLabel/FormControlLabel.d.ts +4 -2
- package/dist/components/{FieldComponents/FieldLabel/FieldLabel.js → FormControlLabel/FormControlLabel.js} +7 -7
- package/dist/components/FormControlLabel/FormControlLabel.module.css.js +14 -0
- package/dist/components/FormControlLabel/types.d.ts +6 -31
- package/dist/components/IconButton/IconButton.js +4 -4
- package/dist/components/IconButton/types.d.ts +0 -3
- package/dist/components/Input/Input.d.ts +8 -5
- package/dist/components/Input/Input.js +25 -15
- package/dist/components/Input/Input.module.css.js +4 -0
- package/dist/components/Input/types.d.ts +20 -13
- package/dist/components/Input/types.js +5 -0
- package/dist/components/InputNumber/InputNumber.d.ts +8 -5
- package/dist/components/InputNumber/InputNumber.js +21 -15
- package/dist/components/InputNumber/types.d.ts +19 -12
- package/dist/components/InputNumber/types.js +5 -0
- package/dist/components/Link/Link.js +3 -3
- package/dist/components/Link/types.d.ts +0 -5
- package/dist/components/List/components/ListOption/ListOption.js +5 -5
- package/dist/components/List/components/ListSection/ListSection.js +1 -1
- package/dist/components/Modal/Modal.js +1 -1
- package/dist/components/Modal/types.d.ts +1 -5
- package/dist/components/Popover/PopoverInner.js +2 -2
- package/dist/components/Popover/types.d.ts +0 -4
- package/dist/components/RadioGroup/RadioGroup.js +73 -23
- package/dist/components/RadioGroup/RadioGroup.module.css.js +8 -0
- package/dist/components/RadioGroup/components/Radio/Radio.d.ts +1 -1
- package/dist/components/RadioGroup/components/Radio/types.d.ts +0 -1
- package/dist/components/RadioGroup/components/index.d.ts +0 -2
- package/dist/components/RadioGroup/types.d.ts +38 -10
- package/dist/components/RadioGroup/types.js +5 -0
- package/dist/components/SearchInput/SearchInput.d.ts +8 -5
- package/dist/components/SearchInput/SearchInput.js +26 -19
- package/dist/components/SearchInput/types.d.ts +20 -8
- package/dist/components/SearchInput/types.js +5 -0
- package/dist/components/Select/Select.js +30 -26
- package/dist/components/Select/Select.module.css.js +0 -6
- package/dist/components/Select/components/SelectOption/SelectOption.js +5 -5
- package/dist/components/Select/types.d.ts +22 -8
- package/dist/components/Select/types.js +5 -0
- package/dist/components/SidePanel/SidePanel.js +1 -1
- package/dist/components/SidePanel/types.d.ts +0 -5
- package/dist/components/Table/Table.js +4 -4
- package/dist/components/Table/components/TableRow/TableRow.js +5 -5
- package/dist/components/Table/types.d.ts +0 -2
- package/dist/components/TagGroup/components/Tag/Tag.js +6 -6
- package/dist/components/Textarea/Textarea.d.ts +4 -3
- package/dist/components/Textarea/Textarea.js +13 -10
- package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.d.ts +1 -1
- package/dist/components/Textarea/components/TextareaContextConsumer/TextareaContextConsumer.js +10 -10
- package/dist/components/Textarea/types.d.ts +19 -12
- package/dist/components/Textarea/types.js +5 -0
- package/dist/components/TimePicker/TimePicker.d.ts +1 -1
- package/dist/components/TimePicker/TimePicker.js +34 -24
- package/dist/components/TimePicker/types.d.ts +19 -5
- package/dist/components/TimePicker/types.js +7 -0
- package/dist/components/Toggle/Toggle.d.ts +1 -1
- package/dist/components/Toggle/Toggle.js +3 -3
- package/dist/components/Toggle/types.d.ts +0 -3
- package/dist/components/Tooltip/Tooltip.d.ts +1 -1
- package/dist/components/Tooltip/Tooltip.js +9 -9
- package/dist/components/Tooltip/types.d.ts +0 -3
- package/dist/components/index.d.ts +2 -0
- package/dist/index.js +31 -11
- package/dist/style.css +103 -80
- package/package.json +5 -5
- package/dist/components/FieldComponents/FieldControl/FieldControl.d.ts +0 -8
- package/dist/components/FieldComponents/FieldControl/FieldControl.js +0 -17
- package/dist/components/FieldComponents/FieldControl/FieldControl.module.css.js +0 -11
- package/dist/components/FieldComponents/FieldControl/index.d.ts +0 -1
- package/dist/components/FieldComponents/FieldLabel/FieldLabel.d.ts +0 -9
- package/dist/components/FieldComponents/FieldLabel/FieldLabel.module.css.js +0 -14
- package/dist/components/FieldComponents/FieldLabel/index.d.ts +0 -1
- package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.d.ts +0 -7
- package/dist/components/RadioGroup/components/RadioGroupDescription/RadioGroupDescription.js +0 -21
- package/dist/components/RadioGroup/components/RadioGroupDescription/index.d.ts +0 -1
- package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.d.ts +0 -6
- package/dist/components/RadioGroup/components/RadioGroupLabel/RadioGroupLabel.js +0 -14
- package/dist/components/RadioGroup/components/RadioGroupLabel/index.d.ts +0 -1
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { NumberField } from '@koobiq/react-primitives';
|
|
2
|
-
import { type
|
|
3
|
-
|
|
2
|
+
import { type FieldCaptionProps, type FieldContentGroupProps, type FieldInputProps, type FieldErrorProps } from '../FieldComponents';
|
|
3
|
+
import { type FormControlProps } from '../FormControl';
|
|
4
|
+
import { type FormControlLabelProps } from '../FormControlLabel';
|
|
5
|
+
export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<Omit<import("@koobiq/react-primitives").NumberFieldProps, "children" | "validationState" | "description" | "inputElementType">, "caption" | "style" | "className" | "labelPlacement" | "labelAlign" | "fullWidth" | "variant" | "slotProps" | "data-testid" | "startAddon" | "endAddon" | "isLabelHidden" | keyof {
|
|
4
6
|
disabled?: boolean;
|
|
5
7
|
error?: boolean;
|
|
6
8
|
required?: boolean;
|
|
@@ -8,18 +10,19 @@ export declare const InputNumber: import("react").ForwardRefExoticComponent<Omit
|
|
|
8
10
|
hiddenLabel?: boolean;
|
|
9
11
|
}> & {
|
|
10
12
|
className?: string;
|
|
11
|
-
errorMessage?: import("react").ReactNode;
|
|
12
13
|
startAddon?: import("react").ReactNode;
|
|
13
14
|
endAddon?: import("react").ReactNode;
|
|
14
15
|
variant?: import("./types").InputNumberPropVariant;
|
|
15
16
|
fullWidth?: boolean;
|
|
16
17
|
isLabelHidden?: boolean;
|
|
18
|
+
labelPlacement?: import("./types").InputNumberPropLabelPlacement;
|
|
19
|
+
labelAlign?: import("./types").InputNumberPropLabelAlign;
|
|
17
20
|
caption?: import("react").ReactNode;
|
|
18
21
|
style?: import("react").CSSProperties;
|
|
19
22
|
'data-testid'?: string | number;
|
|
20
23
|
slotProps?: {
|
|
21
|
-
root?:
|
|
22
|
-
label?:
|
|
24
|
+
root?: FormControlProps<typeof NumberField>;
|
|
25
|
+
label?: FormControlLabelProps;
|
|
23
26
|
input?: FieldInputProps;
|
|
24
27
|
caption?: FieldCaptionProps;
|
|
25
28
|
group?: FieldContentGroupProps;
|
|
@@ -5,8 +5,9 @@ import { deprecate } from "@koobiq/logger";
|
|
|
5
5
|
import { useDOMRef, mergeProps } from "@koobiq/react-core";
|
|
6
6
|
import { NumberField } from "@koobiq/react-primitives";
|
|
7
7
|
import { InputNumberCounterControls } from "./components/InputNumberCounterControls.js";
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
8
|
+
import { FormControl } from "../FormControl/FormControl.js";
|
|
9
|
+
import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
|
|
10
|
+
import { Field } from "../FieldComponents/Field/Field.js";
|
|
10
11
|
import { FieldContentGroup } from "../FieldComponents/FieldContentGroup/FieldContentGroup.js";
|
|
11
12
|
import { FieldInput } from "../FieldComponents/FieldInput/FieldInput.js";
|
|
12
13
|
import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
|
|
@@ -15,7 +16,7 @@ const InputNumber = forwardRef(
|
|
|
15
16
|
(props, ref) => {
|
|
16
17
|
const {
|
|
17
18
|
variant = "filled",
|
|
18
|
-
fullWidth
|
|
19
|
+
fullWidth,
|
|
19
20
|
hiddenLabel,
|
|
20
21
|
isLabelHidden: isLabelHiddenProp,
|
|
21
22
|
disabled,
|
|
@@ -27,6 +28,8 @@ const InputNumber = forwardRef(
|
|
|
27
28
|
readonly,
|
|
28
29
|
isReadOnly: isReadOnlyProp,
|
|
29
30
|
label,
|
|
31
|
+
labelAlign,
|
|
32
|
+
labelPlacement,
|
|
30
33
|
startAddon,
|
|
31
34
|
endAddon,
|
|
32
35
|
errorMessage,
|
|
@@ -35,11 +38,11 @@ const InputNumber = forwardRef(
|
|
|
35
38
|
...other
|
|
36
39
|
} = props;
|
|
37
40
|
const inputRef = useDOMRef(ref);
|
|
38
|
-
const isDisabled = isDisabledProp ?? disabled
|
|
39
|
-
const isRequired = isRequiredProp ?? required
|
|
40
|
-
const isReadOnly = isReadOnlyProp ?? readonly
|
|
41
|
-
const isInvalid = isInvalidProp ?? error
|
|
42
|
-
const isLabelHidden = isLabelHiddenProp ?? hiddenLabel
|
|
41
|
+
const isDisabled = isDisabledProp ?? disabled;
|
|
42
|
+
const isRequired = isRequiredProp ?? required;
|
|
43
|
+
const isReadOnly = isReadOnlyProp ?? readonly;
|
|
44
|
+
const isInvalid = isInvalidProp ?? error;
|
|
45
|
+
const isLabelHidden = isLabelHiddenProp ?? hiddenLabel;
|
|
43
46
|
if (process.env.NODE_ENV !== "production" && "disabled" in props) {
|
|
44
47
|
deprecate(
|
|
45
48
|
'InputNumber: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
|
|
@@ -68,6 +71,8 @@ const InputNumber = forwardRef(
|
|
|
68
71
|
const rootProps = mergeProps(
|
|
69
72
|
{
|
|
70
73
|
label,
|
|
74
|
+
labelAlign,
|
|
75
|
+
labelPlacement,
|
|
71
76
|
fullWidth,
|
|
72
77
|
isDisabled,
|
|
73
78
|
isRequired,
|
|
@@ -75,12 +80,11 @@ const InputNumber = forwardRef(
|
|
|
75
80
|
isInvalid,
|
|
76
81
|
errorMessage,
|
|
77
82
|
"data-variant": variant,
|
|
78
|
-
"data-fullwidth": fullWidth,
|
|
79
83
|
...other
|
|
80
84
|
},
|
|
81
85
|
slotProps?.root
|
|
82
86
|
);
|
|
83
|
-
return /* @__PURE__ */ jsx(
|
|
87
|
+
return /* @__PURE__ */ jsx(FormControl, { as: NumberField, ...rootProps, children: ({ isInvalid: isInvalid2, isRequired: isRequired2, isDisabled: isDisabled2 }) => {
|
|
84
88
|
const labelProps = mergeProps(
|
|
85
89
|
{ isHidden: isLabelHidden, children: label, isRequired: isRequired2 },
|
|
86
90
|
slotProps?.label
|
|
@@ -95,7 +99,7 @@ const InputNumber = forwardRef(
|
|
|
95
99
|
slotProps?.input
|
|
96
100
|
);
|
|
97
101
|
const captionProps = mergeProps({ children: caption }, slotProps?.caption);
|
|
98
|
-
const errorProps = mergeProps({
|
|
102
|
+
const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage);
|
|
99
103
|
const groupProps = mergeProps(
|
|
100
104
|
{
|
|
101
105
|
endAddon: /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -110,10 +114,12 @@ const InputNumber = forwardRef(
|
|
|
110
114
|
slotProps?.group
|
|
111
115
|
);
|
|
112
116
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
113
|
-
/* @__PURE__ */ jsx(
|
|
114
|
-
/* @__PURE__ */
|
|
115
|
-
|
|
116
|
-
|
|
117
|
+
/* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
|
|
118
|
+
/* @__PURE__ */ jsxs(Field, { children: [
|
|
119
|
+
/* @__PURE__ */ jsx(FieldContentGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FieldInput, { ...inputProps }) }),
|
|
120
|
+
/* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
|
|
121
|
+
/* @__PURE__ */ jsx(FieldError, { ...errorProps })
|
|
122
|
+
] })
|
|
117
123
|
] });
|
|
118
124
|
} });
|
|
119
125
|
}
|
|
@@ -1,41 +1,42 @@
|
|
|
1
1
|
import type { ComponentRef, CSSProperties, ReactNode } from 'react';
|
|
2
2
|
import type { ExtendableProps } from '@koobiq/react-core';
|
|
3
3
|
import type { NumberField, NumberFieldProps } from '@koobiq/react-primitives';
|
|
4
|
-
import { type FieldCaptionProps, type
|
|
4
|
+
import { type FieldCaptionProps, type FieldErrorProps, type FieldContentGroupProps, type FieldInputProps, type FieldContentGroupPropVariant } from '../FieldComponents';
|
|
5
|
+
import { type FormControlProps, type FormControlPropLabelAlign, type FormControlPropLabelPlacement } from '../FormControl';
|
|
6
|
+
import type { FormControlLabelProps } from '../FormControlLabel';
|
|
5
7
|
export declare const inputNumberPropVariant: readonly ["filled", "transparent"];
|
|
6
8
|
export type InputNumberPropVariant = FieldContentGroupPropVariant;
|
|
9
|
+
export declare const inputNumberPropLabelPlacement: readonly ["top", "side"];
|
|
10
|
+
export type InputNumberPropLabelPlacement = FormControlPropLabelPlacement;
|
|
11
|
+
export declare const inputNumberPropLabelAlign: readonly ["start", "end"];
|
|
12
|
+
export type InputNumberPropLabelAlign = FormControlPropLabelAlign;
|
|
7
13
|
type InputNumberDeprecatedProps = {
|
|
8
14
|
/**
|
|
9
15
|
* If `true`, the component is disabled.
|
|
10
|
-
* @default false
|
|
11
16
|
* @deprecated
|
|
12
17
|
* The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
|
|
13
18
|
*/
|
|
14
19
|
disabled?: boolean;
|
|
15
20
|
/**
|
|
16
21
|
* If `true`, the input will indicate an error.
|
|
17
|
-
* @default false
|
|
18
22
|
* @deprecated
|
|
19
23
|
* The "error" prop is deprecated. Use "isInvalid" prop to replace it.
|
|
20
24
|
*/
|
|
21
25
|
error?: boolean;
|
|
22
26
|
/**
|
|
23
27
|
* If `true`, the label is displayed as required and the input element is required.
|
|
24
|
-
* @default false
|
|
25
28
|
* @deprecated
|
|
26
29
|
* The "required" prop is deprecated. Use "isRequired" prop to replace it.
|
|
27
30
|
*/
|
|
28
31
|
required?: boolean;
|
|
29
32
|
/**
|
|
30
33
|
* If `true`, the input can be selected but not changed by the user.
|
|
31
|
-
* @default false
|
|
32
34
|
* @deprecated
|
|
33
35
|
* The "readonly" prop is deprecated. Use "isReadOnly" prop to replace it.
|
|
34
36
|
*/
|
|
35
37
|
readonly?: boolean;
|
|
36
38
|
/**
|
|
37
39
|
* If `true`, the label is hidden. Be sure to add aria-label to the input element.
|
|
38
|
-
* @default false
|
|
39
40
|
* @deprecated
|
|
40
41
|
* The "hiddenLabel" prop is deprecated. Use "isLabelHidden" prop to replace it.
|
|
41
42
|
*/
|
|
@@ -44,8 +45,6 @@ type InputNumberDeprecatedProps = {
|
|
|
44
45
|
export type InputNumberProps = ExtendableProps<{
|
|
45
46
|
/** Additional CSS-classes. */
|
|
46
47
|
className?: string;
|
|
47
|
-
/** An error message for the field. */
|
|
48
|
-
errorMessage?: ReactNode;
|
|
49
48
|
/** Addon placed before the children. */
|
|
50
49
|
startAddon?: ReactNode;
|
|
51
50
|
/** Addon placed after the children. */
|
|
@@ -57,14 +56,22 @@ export type InputNumberProps = ExtendableProps<{
|
|
|
57
56
|
variant?: InputNumberPropVariant;
|
|
58
57
|
/**
|
|
59
58
|
* If true, the input will take up the full width of its container.
|
|
60
|
-
* @default false
|
|
61
59
|
*/
|
|
62
60
|
fullWidth?: boolean;
|
|
63
61
|
/**
|
|
64
62
|
* If `true`, the label is hidden. Be sure to add aria-label to the input element.
|
|
65
|
-
* @default false
|
|
66
63
|
*/
|
|
67
64
|
isLabelHidden?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* The label's overall position relative to the element it is labeling.
|
|
67
|
+
* @default 'top'
|
|
68
|
+
*/
|
|
69
|
+
labelPlacement?: InputNumberPropLabelPlacement;
|
|
70
|
+
/**
|
|
71
|
+
* The label's horizontal alignment relative to the element it is labeling.
|
|
72
|
+
* @default 'start'
|
|
73
|
+
*/
|
|
74
|
+
labelAlign?: InputNumberPropLabelAlign;
|
|
68
75
|
/** The helper text content. */
|
|
69
76
|
caption?: ReactNode;
|
|
70
77
|
/** Inline styles. */
|
|
@@ -73,8 +80,8 @@ export type InputNumberProps = ExtendableProps<{
|
|
|
73
80
|
'data-testid'?: string | number;
|
|
74
81
|
/** The props used for each slot inside. */
|
|
75
82
|
slotProps?: {
|
|
76
|
-
root?:
|
|
77
|
-
label?:
|
|
83
|
+
root?: FormControlProps<typeof NumberField>;
|
|
84
|
+
label?: FormControlLabelProps;
|
|
78
85
|
input?: FieldInputProps;
|
|
79
86
|
caption?: FieldCaptionProps;
|
|
80
87
|
group?: FieldContentGroupProps;
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { fieldContentGroupPropVariant } from "../FieldComponents/FieldContentGroup/types.js";
|
|
2
|
+
import { formControlPropLabelPlacement, formControlPropLabelAlign } from "../FormControl/types.js";
|
|
2
3
|
const inputNumberPropVariant = fieldContentGroupPropVariant;
|
|
4
|
+
const inputNumberPropLabelPlacement = formControlPropLabelPlacement;
|
|
5
|
+
const inputNumberPropLabelAlign = formControlPropLabelAlign;
|
|
3
6
|
export {
|
|
7
|
+
inputNumberPropLabelAlign,
|
|
8
|
+
inputNumberPropLabelPlacement,
|
|
4
9
|
inputNumberPropVariant
|
|
5
10
|
};
|
|
@@ -20,9 +20,9 @@ const Link = polymorphicForwardRef((props, ref) => {
|
|
|
20
20
|
className,
|
|
21
21
|
...other
|
|
22
22
|
} = props;
|
|
23
|
-
const allowVisited = allowVisitedProp ?? visitable
|
|
24
|
-
const isDisabled = isDisabledProp ?? disabled
|
|
25
|
-
const isPseudo = isPseudoProp ?? pseudo
|
|
23
|
+
const allowVisited = allowVisitedProp ?? visitable;
|
|
24
|
+
const isDisabled = isDisabledProp ?? disabled;
|
|
25
|
+
const isPseudo = isPseudoProp ?? pseudo;
|
|
26
26
|
const hasIcon = Boolean(startIcon || endIcon);
|
|
27
27
|
if (process.env.NODE_ENV !== "production" && "visitable" in props) {
|
|
28
28
|
deprecate(
|
|
@@ -6,21 +6,18 @@ export type LinkPropVariant = Extract<TypographyPropVariant, 'text-compact' | 't
|
|
|
6
6
|
type LinkDeprecatedProps = {
|
|
7
7
|
/**
|
|
8
8
|
* If `true`, the component is disabled.
|
|
9
|
-
* @default false
|
|
10
9
|
* @deprecated
|
|
11
10
|
* The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
|
|
12
11
|
*/
|
|
13
12
|
disabled?: boolean;
|
|
14
13
|
/**
|
|
15
14
|
* If `true`, displays :visited CSS-state.
|
|
16
|
-
* @default false
|
|
17
15
|
* @deprecated
|
|
18
16
|
* The "visitable" prop is deprecated. Use "isVisitable" prop to replace it.
|
|
19
17
|
*/
|
|
20
18
|
visitable?: boolean;
|
|
21
19
|
/**
|
|
22
20
|
* If `true`, displays the link as a pseudo-link.
|
|
23
|
-
* @default false
|
|
24
21
|
* @deprecated
|
|
25
22
|
* The "pseudo" prop is deprecated. Use "isPseudo" prop to replace it.
|
|
26
23
|
*/
|
|
@@ -37,12 +34,10 @@ export type LinkBaseProps = ExtendableProps<{
|
|
|
37
34
|
endIcon?: ReactNode;
|
|
38
35
|
/**
|
|
39
36
|
* If `true`, displays :visited CSS-state.
|
|
40
|
-
* @default false
|
|
41
37
|
*/
|
|
42
38
|
allowVisited?: boolean;
|
|
43
39
|
/**
|
|
44
40
|
* If `true`, displays the link as a pseudo-link.
|
|
45
|
-
* @default false
|
|
46
41
|
*/
|
|
47
42
|
isPseudo?: boolean;
|
|
48
43
|
/** Additional CSS-classes. */
|
|
@@ -24,11 +24,11 @@ function ListOption({ item, state }) {
|
|
|
24
24
|
className: clsx(listItem, textVariant["text-normal"], className),
|
|
25
25
|
style,
|
|
26
26
|
ref,
|
|
27
|
-
"data-hovered": isHovered,
|
|
28
|
-
"data-pressed": isPressed,
|
|
29
|
-
"data-disabled": isDisabled,
|
|
30
|
-
"data-selected": isSelected,
|
|
31
|
-
"data-focus-visible": isFocusVisible,
|
|
27
|
+
"data-hovered": isHovered || void 0,
|
|
28
|
+
"data-pressed": isPressed || void 0,
|
|
29
|
+
"data-disabled": isDisabled || void 0,
|
|
30
|
+
"data-selected": isSelected || void 0,
|
|
31
|
+
"data-focus-visible": isFocusVisible || void 0,
|
|
32
32
|
children: item.rendered
|
|
33
33
|
}
|
|
34
34
|
);
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useListBoxSection } from "@koobiq/react-primitives";
|
|
4
4
|
import s from "./ListSection.module.css.js";
|
|
5
|
-
import { ListOption } from "../ListOption/ListOption.js";
|
|
6
5
|
import { Typography } from "../../../Typography/Typography.js";
|
|
6
|
+
import { ListOption } from "../ListOption/ListOption.js";
|
|
7
7
|
function ListSection({ section, state }) {
|
|
8
8
|
const { itemProps, headingProps, groupProps } = useListBoxSection({
|
|
9
9
|
heading: section.rendered,
|
|
@@ -32,7 +32,7 @@ export type ModalProps = {
|
|
|
32
32
|
control?: ModalPropControl;
|
|
33
33
|
/**
|
|
34
34
|
* If `true`, the close button isn't shown.
|
|
35
|
-
* @default
|
|
35
|
+
* @default
|
|
36
36
|
*/
|
|
37
37
|
hideCloseButton?: boolean;
|
|
38
38
|
/** Handler that is called when the modal's open state changes. */
|
|
@@ -44,17 +44,14 @@ export type ModalProps = {
|
|
|
44
44
|
portalContainer?: Element;
|
|
45
45
|
/**
|
|
46
46
|
* If `true`, the modal window won't close when clicked outside of it.
|
|
47
|
-
* @default false
|
|
48
47
|
*/
|
|
49
48
|
disableExitOnClickOutside?: boolean;
|
|
50
49
|
/**
|
|
51
50
|
* If `true`, the modal window won't close when the ESC key is pressed.
|
|
52
|
-
* @default false
|
|
53
51
|
*/
|
|
54
52
|
disableExitOnEscapeKeyDown?: boolean;
|
|
55
53
|
/**
|
|
56
54
|
* If `true`, the underlay (backdrop) under the modal window isn't shown.
|
|
57
|
-
* @default false
|
|
58
55
|
*/
|
|
59
56
|
hideBackdrop?: boolean;
|
|
60
57
|
/** Additional CSS-classes. */
|
|
@@ -63,7 +60,6 @@ export type ModalProps = {
|
|
|
63
60
|
'data-testid'?: string | number;
|
|
64
61
|
/**
|
|
65
62
|
* If `true`, the focus trap in modal window is disabled.
|
|
66
|
-
* @default false
|
|
67
63
|
*/
|
|
68
64
|
disableFocusManagement?: boolean;
|
|
69
65
|
/**
|
|
@@ -11,12 +11,12 @@ const PopoverInner = (props) => {
|
|
|
11
11
|
offset = 0,
|
|
12
12
|
size = "medium",
|
|
13
13
|
crossOffset = 0,
|
|
14
|
-
hideArrow = false,
|
|
15
14
|
containerPadding = 12,
|
|
16
15
|
arrowBoundaryOffset = 20,
|
|
17
16
|
placement: placementProp = "top",
|
|
18
17
|
maxBlockSize = 480,
|
|
19
18
|
type = "dialog",
|
|
19
|
+
hideArrow,
|
|
20
20
|
state,
|
|
21
21
|
control,
|
|
22
22
|
children,
|
|
@@ -117,7 +117,7 @@ const PopoverInner = (props) => {
|
|
|
117
117
|
{
|
|
118
118
|
ref: domRef,
|
|
119
119
|
"data-size": size,
|
|
120
|
-
"data-arrow": showArrow,
|
|
120
|
+
"data-arrow": showArrow || void 0,
|
|
121
121
|
"data-placement": placement,
|
|
122
122
|
"data-transition": transition,
|
|
123
123
|
className: clsx(s.base, s[size], className),
|
|
@@ -38,7 +38,6 @@ export type PopoverProps = {
|
|
|
38
38
|
size?: PopoverPropSize;
|
|
39
39
|
/**
|
|
40
40
|
* If `true`, the close button isn't shown.
|
|
41
|
-
* @default false
|
|
42
41
|
*/
|
|
43
42
|
hideCloseButton?: boolean;
|
|
44
43
|
/** Handler that is called when the modal's open state changes. */
|
|
@@ -50,7 +49,6 @@ export type PopoverProps = {
|
|
|
50
49
|
portalContainer?: Element;
|
|
51
50
|
/**
|
|
52
51
|
* If `true`, the modal window won't close when the ESC key is pressed.
|
|
53
|
-
* @default false
|
|
54
52
|
*/
|
|
55
53
|
disableExitOnEscapeKeyDown?: boolean;
|
|
56
54
|
/** Additional CSS-classes. */
|
|
@@ -61,7 +59,6 @@ export type PopoverProps = {
|
|
|
61
59
|
'data-testid'?: string | number;
|
|
62
60
|
/**
|
|
63
61
|
* If `true`, the focus trap in modal window is disabled.
|
|
64
|
-
* @default false
|
|
65
62
|
*/
|
|
66
63
|
disableFocusManagement?: boolean;
|
|
67
64
|
/**
|
|
@@ -73,7 +70,6 @@ export type PopoverProps = {
|
|
|
73
70
|
anchorRef?: RefObject<HTMLElement | null>;
|
|
74
71
|
/**
|
|
75
72
|
* If `true`, the arrow isn't shown.
|
|
76
|
-
* @default false
|
|
77
73
|
*/
|
|
78
74
|
hideArrow?: boolean;
|
|
79
75
|
/**
|
|
@@ -1,35 +1,53 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs,
|
|
2
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import { deprecate } from "@koobiq/logger";
|
|
5
|
-
import { mergeProps
|
|
5
|
+
import { mergeProps } from "@koobiq/react-core";
|
|
6
6
|
import { RadioGroup as RadioGroup$1 } from "@koobiq/react-primitives";
|
|
7
|
-
import
|
|
7
|
+
import s from "./RadioGroup.module.css.js";
|
|
8
8
|
import { RadioGroupContext } from "./RadioContext.js";
|
|
9
|
-
import { RadioGroupDescription } from "./components/RadioGroupDescription/RadioGroupDescription.js";
|
|
10
9
|
import { flex } from "../layout/flex/flex.js";
|
|
10
|
+
import { FormControl } from "../FormControl/FormControl.js";
|
|
11
|
+
import { FormControlLabel } from "../FormControlLabel/FormControlLabel.js";
|
|
12
|
+
import { Field } from "../FieldComponents/Field/Field.js";
|
|
13
|
+
import { FieldCaption } from "../FieldComponents/FieldCaption/FieldCaption.js";
|
|
14
|
+
import { FieldError } from "../FieldComponents/FieldError/FieldError.js";
|
|
11
15
|
const RadioGroup = forwardRef(
|
|
12
16
|
(props, ref) => {
|
|
13
17
|
const {
|
|
14
|
-
size,
|
|
18
|
+
size = "normal",
|
|
15
19
|
label,
|
|
16
20
|
children,
|
|
17
21
|
slotProps,
|
|
22
|
+
style,
|
|
23
|
+
className,
|
|
18
24
|
description,
|
|
25
|
+
caption: captionProp,
|
|
19
26
|
orientation,
|
|
20
27
|
isInvalid: isInvalidProp,
|
|
21
28
|
isDisabled: isDisabledProp,
|
|
22
29
|
isRequired: isRequiredProp,
|
|
23
30
|
isReadOnly: isReadOnlyProp,
|
|
31
|
+
"data-testid": testId,
|
|
32
|
+
errorMessage,
|
|
33
|
+
labelAlign,
|
|
34
|
+
labelPlacement,
|
|
35
|
+
isLabelHidden,
|
|
24
36
|
disabled,
|
|
25
37
|
error,
|
|
26
38
|
readonly,
|
|
27
39
|
required
|
|
28
40
|
} = props;
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
const
|
|
41
|
+
const caption = captionProp ?? description;
|
|
42
|
+
const isDisabled = isDisabledProp ?? disabled;
|
|
43
|
+
const isInvalid = isInvalidProp ?? error;
|
|
44
|
+
const isReadOnly = isReadOnlyProp ?? readonly;
|
|
45
|
+
const isRequired = isRequiredProp ?? required;
|
|
46
|
+
if (process.env.NODE_ENV !== "production" && "description" in props) {
|
|
47
|
+
deprecate(
|
|
48
|
+
'RadioGroup: the "description" prop is deprecated. Use "caption" prop to replace it.'
|
|
49
|
+
);
|
|
50
|
+
}
|
|
33
51
|
if (process.env.NODE_ENV !== "production" && "disabled" in props) {
|
|
34
52
|
deprecate(
|
|
35
53
|
'RadioGroup: the "disabled" prop is deprecated. Use "isDisabled" prop to replace it.'
|
|
@@ -50,24 +68,56 @@ const RadioGroup = forwardRef(
|
|
|
50
68
|
'RadioGroup: the "required" prop is deprecated. Use "isRequired" prop to replace it.'
|
|
51
69
|
);
|
|
52
70
|
}
|
|
53
|
-
const
|
|
54
|
-
{ ...props, isDisabled, isInvalid, isReadOnly, isRequired },
|
|
71
|
+
const rootProps = mergeProps(
|
|
55
72
|
{
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
73
|
+
style,
|
|
74
|
+
labelPlacement,
|
|
75
|
+
className,
|
|
76
|
+
labelAlign,
|
|
77
|
+
isDisabled,
|
|
78
|
+
isInvalid,
|
|
79
|
+
isReadOnly,
|
|
80
|
+
isRequired,
|
|
81
|
+
...props,
|
|
82
|
+
ref,
|
|
83
|
+
"data-size": size,
|
|
84
|
+
"data-testid": testId,
|
|
85
|
+
"data-orientation": orientation
|
|
63
86
|
},
|
|
64
87
|
slotProps?.root
|
|
65
88
|
);
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
89
|
+
const radioGroupProps = mergeProps(
|
|
90
|
+
{
|
|
91
|
+
className: flex({
|
|
92
|
+
direction: orientation === "horizontal" ? "row" : "column",
|
|
93
|
+
alignItems: orientation === "horizontal" ? "center" : "flex-start",
|
|
94
|
+
gap: "s"
|
|
95
|
+
})
|
|
96
|
+
},
|
|
97
|
+
slotProps?.radioGroup
|
|
98
|
+
);
|
|
99
|
+
return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(FormControl, { as: RadioGroup$1, ...rootProps, children: ({ isRequired: isRequired2 }) => {
|
|
100
|
+
const labelProps = mergeProps(
|
|
101
|
+
{
|
|
102
|
+
as: "span",
|
|
103
|
+
isRequired: isRequired2,
|
|
104
|
+
children: label,
|
|
105
|
+
className: s.label,
|
|
106
|
+
isHidden: isLabelHidden
|
|
107
|
+
},
|
|
108
|
+
slotProps?.label
|
|
109
|
+
);
|
|
110
|
+
const errorProps = mergeProps({ children: errorMessage }, slotProps?.errorMessage);
|
|
111
|
+
const captionProps = mergeProps({ children: caption }, slotProps?.caption);
|
|
112
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
113
|
+
/* @__PURE__ */ jsx(FormControlLabel, { ...labelProps }),
|
|
114
|
+
/* @__PURE__ */ jsxs(Field, { children: [
|
|
115
|
+
/* @__PURE__ */ jsx("div", { ...radioGroupProps, children }),
|
|
116
|
+
/* @__PURE__ */ jsx(FieldCaption, { ...captionProps }),
|
|
117
|
+
/* @__PURE__ */ jsx(FieldError, { ...errorProps })
|
|
118
|
+
] })
|
|
119
|
+
] });
|
|
120
|
+
} }) });
|
|
71
121
|
}
|
|
72
122
|
);
|
|
73
123
|
RadioGroup.displayName = "RadioGroup";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type RadioProps as RadioPropsPrimitive } from '@koobiq/react-primitives';
|
|
2
|
-
export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioPropsPrimitive, "children" | "style" | "className" | "disabled" | "size" | "
|
|
2
|
+
export declare const Radio: import("react").ForwardRefExoticComponent<Omit<RadioPropsPrimitive, "children" | "style" | "className" | "disabled" | "size" | "labelPlacement" | "slotProps" | "data-testid"> & {
|
|
3
3
|
children?: import("react").ReactNode;
|
|
4
4
|
size?: import("./types").RadioPropSize;
|
|
5
5
|
labelPlacement?: import("./types").RadioPropLabelPlacement;
|
|
@@ -8,7 +8,6 @@ export type RadioPropLabelPlacement = (typeof radioPropLabelPlacement)[number];
|
|
|
8
8
|
type RadioDeprecatedProps = {
|
|
9
9
|
/**
|
|
10
10
|
* If `true`, the component is disabled.
|
|
11
|
-
* @default false
|
|
12
11
|
* @deprecated
|
|
13
12
|
* The "disabled" prop is deprecated. Use "isDisabled" prop to replace it.
|
|
14
13
|
*/
|