@luscii-healthtech/web-ui 2.16.0 → 2.16.2
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/ConfirmationDialog/ConfirmationDialogChoices.d.ts +3 -1
- package/dist/components/ConfirmationDialog/types/ConfirmationDialog.types.d.ts +1 -1
- package/dist/components/Form/FormInput.d.ts +1 -1
- package/dist/components/Form/form.types.d.ts +6 -4
- package/dist/components/Input/Input.d.ts +2 -2
- package/dist/components/Input/SearchInput.d.ts +1 -1
- package/dist/web-ui.cjs.development.js +54 -25
- package/dist/web-ui.cjs.development.js.map +1 -1
- package/dist/web-ui.cjs.production.min.js +1 -1
- package/dist/web-ui.cjs.production.min.js.map +1 -1
- package/dist/web-ui.esm.js +54 -25
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { ConfirmationDialogProps } from "./types/ConfirmationDialog.types";
|
|
2
|
+
import { ConfirmationDialogChoice, ConfirmationDialogProps } from "./types/ConfirmationDialog.types";
|
|
3
3
|
export declare const ConfirmationDialogChoices: React.FC<{
|
|
4
4
|
choices: ConfirmationDialogProps["choices"];
|
|
5
|
+
onChoiceChangeCallback?: (choice: ConfirmationDialogChoice) => void;
|
|
6
|
+
selectedChoice?: ConfirmationDialogChoice;
|
|
5
7
|
}>;
|
|
@@ -19,7 +19,7 @@ export interface ConfirmationDialogProps {
|
|
|
19
19
|
texts: ConfirmationDialogTexts;
|
|
20
20
|
isOpen: boolean;
|
|
21
21
|
onCancel: () => void;
|
|
22
|
-
onConfirm: () => void;
|
|
22
|
+
onConfirm: (choice?: ConfirmationDialogChoice) => void;
|
|
23
23
|
isProcessing?: boolean;
|
|
24
24
|
withTitle?: {
|
|
25
25
|
title: string;
|
|
@@ -3,4 +3,4 @@ import { FormInputProps } from "./form.types";
|
|
|
3
3
|
/**
|
|
4
4
|
* Input field that can be used in any react-hook-form context.
|
|
5
5
|
*/
|
|
6
|
-
export declare const FormInput: React.ForwardRefExoticComponent<
|
|
6
|
+
export declare const FormInput: React.ForwardRefExoticComponent<FormInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -31,10 +31,10 @@ export interface FormFieldRowProps<TFieldValues> extends Record<keyof FormFieldG
|
|
|
31
31
|
key: string;
|
|
32
32
|
fields: FormFieldProps<TFieldValues>[];
|
|
33
33
|
}
|
|
34
|
-
interface FormFieldInputProps<TFieldValues> extends FormFieldGenericProps<Omit<InputProps, "name">, TFieldValues> {
|
|
34
|
+
export interface FormFieldInputProps<TFieldValues> extends FormFieldGenericProps<Omit<InputProps, "name">, TFieldValues> {
|
|
35
35
|
type: AllowedTextInputTypes;
|
|
36
36
|
}
|
|
37
|
-
interface FormFieldRadioGroupProps<TFieldValues> extends FormFieldGenericProps<Omit<RadioGroupProps, "name">, TFieldValues> {
|
|
37
|
+
export interface FormFieldRadioGroupProps<TFieldValues> extends FormFieldGenericProps<Omit<RadioGroupProps, "name">, TFieldValues> {
|
|
38
38
|
type: "radioGroup";
|
|
39
39
|
}
|
|
40
40
|
export interface FormFieldSelectProps<TFieldValues> extends FormFieldGenericProps<SelectProps, TFieldValues> {
|
|
@@ -53,15 +53,17 @@ export interface FormFieldDecoratorWithGeneratedProps extends FormFieldDecorator
|
|
|
53
53
|
children?: React.ReactNode;
|
|
54
54
|
}
|
|
55
55
|
export interface FormInputProps extends Omit<InputProps, "name">, FormFieldDecoratorWithGeneratedProps {
|
|
56
|
+
control: Control;
|
|
57
|
+
rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
|
|
56
58
|
type: Extract<HTMLInputTypeAttribute, "email" | "number" | "password" | "text">;
|
|
57
59
|
}
|
|
58
|
-
export interface FormRadioGroupProps extends RadioGroupProps, FormFieldDecoratorWithGeneratedProps {
|
|
60
|
+
export interface FormRadioGroupProps extends Omit<RadioGroupProps, "name">, FormFieldDecoratorWithGeneratedProps {
|
|
59
61
|
}
|
|
60
62
|
export interface FormSelectProps extends Omit<SelectProps, "name">, FormFieldDecoratorWithGeneratedProps {
|
|
61
63
|
control: Control;
|
|
62
64
|
rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
|
|
63
65
|
}
|
|
64
|
-
export interface FormImagePickerProps extends
|
|
66
|
+
export interface FormImagePickerProps extends ImagePickerFieldProps, FormFieldDecoratorWithGeneratedProps {
|
|
65
67
|
control: Control;
|
|
66
68
|
rules?: Exclude<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">;
|
|
67
69
|
}
|
|
@@ -7,7 +7,7 @@ export declare const INPUT_TYPES: Record<string, AllowedTextInputTypes>;
|
|
|
7
7
|
* It's very complicated to tap into the onChange events of inputs,
|
|
8
8
|
* so I omit the type it requires and add a easier one to deal with.
|
|
9
9
|
*/
|
|
10
|
-
declare type CustomHTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, "onChange"> & {
|
|
10
|
+
declare type CustomHTMLInputProps = Omit<React.HTMLProps<HTMLInputElement>, "onChange" | "ref"> & {
|
|
11
11
|
isError?: boolean;
|
|
12
12
|
};
|
|
13
13
|
declare type FakeEventTarget = {
|
|
@@ -29,5 +29,5 @@ export interface InputProps extends CustomHTMLInputProps {
|
|
|
29
29
|
icon?: React.VoidFunctionComponent<IconProps>;
|
|
30
30
|
onChange?: (event: FakeEventTarget) => void;
|
|
31
31
|
}
|
|
32
|
-
declare const Input: React.ForwardRefExoticComponent<
|
|
32
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
33
33
|
export default Input;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { InputProps } from "./Input";
|
|
3
3
|
export declare type SearchInputProps = Omit<InputProps, "icon" | "withSuffix" | "withPrefix" | "type" | "clearable">;
|
|
4
|
-
export declare const SearchInput: React.ForwardRefExoticComponent<
|
|
4
|
+
export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1423,7 +1423,7 @@ var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
1423
1423
|
});
|
|
1424
1424
|
};
|
|
1425
1425
|
|
|
1426
|
-
var isClearIconVisible = clearable &&
|
|
1426
|
+
var isClearIconVisible = clearable && innerValue;
|
|
1427
1427
|
return /*#__PURE__*/React__default.createElement(FlexRow, {
|
|
1428
1428
|
spacing: "none",
|
|
1429
1429
|
"data-test-id": "input-component-container",
|
|
@@ -2701,13 +2701,9 @@ var RadioGroupV2 = /*#__PURE__*/React__default.forwardRef(function (props, ref)
|
|
|
2701
2701
|
});
|
|
2702
2702
|
|
|
2703
2703
|
var ConfirmationDialogChoices = function ConfirmationDialogChoices(props) {
|
|
2704
|
-
var choices = props.choices
|
|
2705
|
-
|
|
2706
|
-
|
|
2707
|
-
return choice.value === choices.defaultChoice;
|
|
2708
|
-
})),
|
|
2709
|
-
selectedChoice = _useState[0],
|
|
2710
|
-
setSelectedChoice = _useState[1];
|
|
2704
|
+
var choices = props.choices,
|
|
2705
|
+
onChoiceChangeCallback = props.onChoiceChangeCallback,
|
|
2706
|
+
selectedChoice = props.selectedChoice;
|
|
2711
2707
|
|
|
2712
2708
|
if (!choices) {
|
|
2713
2709
|
return null;
|
|
@@ -2720,10 +2716,7 @@ var ConfirmationDialogChoices = function ConfirmationDialogChoices(props) {
|
|
|
2720
2716
|
value: choice.value,
|
|
2721
2717
|
info: choice.description,
|
|
2722
2718
|
onChange: function onChange() {
|
|
2723
|
-
|
|
2724
|
-
|
|
2725
|
-
(_props$choices = props.choices) == null ? void 0 : _props$choices.onChoiceChange(choice);
|
|
2726
|
-
setSelectedChoice(choice);
|
|
2719
|
+
onChoiceChangeCallback == null ? void 0 : onChoiceChangeCallback(choice);
|
|
2727
2720
|
}
|
|
2728
2721
|
};
|
|
2729
2722
|
});
|
|
@@ -2738,12 +2731,34 @@ var ConfirmationDialogChoices = function ConfirmationDialogChoices(props) {
|
|
|
2738
2731
|
};
|
|
2739
2732
|
|
|
2740
2733
|
var ConfirmationDialog = function ConfirmationDialog(props) {
|
|
2734
|
+
var choices = props.choices;
|
|
2735
|
+
|
|
2736
|
+
var _useState = React.useState(choices == null ? void 0 : choices.options.find(function (choice) {
|
|
2737
|
+
return choice.value === choices.defaultChoice;
|
|
2738
|
+
})),
|
|
2739
|
+
selectedChoice = _useState[0],
|
|
2740
|
+
setSelectedChoice = _useState[1];
|
|
2741
|
+
|
|
2741
2742
|
var handleOnCloseClick = function handleOnCloseClick() {
|
|
2742
2743
|
if (!props.isProcessing) {
|
|
2743
2744
|
props.onCancel();
|
|
2744
2745
|
}
|
|
2745
2746
|
};
|
|
2746
2747
|
|
|
2748
|
+
var onChoiceChange = function onChoiceChange(choice) {
|
|
2749
|
+
setSelectedChoice(choice);
|
|
2750
|
+
|
|
2751
|
+
if (choice) {
|
|
2752
|
+
var _props$choices;
|
|
2753
|
+
|
|
2754
|
+
(_props$choices = props.choices) == null ? void 0 : _props$choices.onChoiceChange(choice);
|
|
2755
|
+
}
|
|
2756
|
+
};
|
|
2757
|
+
|
|
2758
|
+
var onConfirmHandler = function onConfirmHandler() {
|
|
2759
|
+
props.onConfirm(selectedChoice);
|
|
2760
|
+
};
|
|
2761
|
+
|
|
2747
2762
|
var modalButtons = [/*#__PURE__*/React__default.createElement(SecondaryButton, {
|
|
2748
2763
|
key: "confirmation-dialog-button-cancel",
|
|
2749
2764
|
"data-test-id": "button-cancel",
|
|
@@ -2755,7 +2770,7 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
|
|
|
2755
2770
|
className: "ml-2.5",
|
|
2756
2771
|
"data-test-id": "button-confirm",
|
|
2757
2772
|
text: props.texts.confirmLabel,
|
|
2758
|
-
onClick:
|
|
2773
|
+
onClick: onConfirmHandler,
|
|
2759
2774
|
isPending: props.isProcessing
|
|
2760
2775
|
})];
|
|
2761
2776
|
return /*#__PURE__*/React__default.createElement(ModalWithButtons, {
|
|
@@ -2774,7 +2789,9 @@ var ConfirmationDialog = function ConfirmationDialog(props) {
|
|
|
2774
2789
|
text: props.texts.message,
|
|
2775
2790
|
containsDangerousHtml: true
|
|
2776
2791
|
}), /*#__PURE__*/React__default.createElement(ConfirmationDialogChoices, {
|
|
2777
|
-
choices: props.choices
|
|
2792
|
+
choices: props.choices,
|
|
2793
|
+
onChoiceChangeCallback: onChoiceChange,
|
|
2794
|
+
selectedChoice: selectedChoice
|
|
2778
2795
|
})));
|
|
2779
2796
|
};
|
|
2780
2797
|
|
|
@@ -6183,13 +6200,15 @@ var isRequired = function isRequired(options) {
|
|
|
6183
6200
|
return !!(options && "required" in options);
|
|
6184
6201
|
};
|
|
6185
6202
|
|
|
6186
|
-
var _excluded$n = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
|
|
6203
|
+
var _excluded$n = ["control", "name", "rules", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
|
|
6187
6204
|
/**
|
|
6188
6205
|
* Input field that can be used in any react-hook-form context.
|
|
6189
6206
|
*/
|
|
6190
6207
|
|
|
6191
|
-
var FormInput = /*#__PURE__*/React__default.forwardRef(function (_ref,
|
|
6192
|
-
var
|
|
6208
|
+
var FormInput = /*#__PURE__*/React__default.forwardRef(function (_ref, innerRef) {
|
|
6209
|
+
var control = _ref.control,
|
|
6210
|
+
name = _ref.name,
|
|
6211
|
+
rules = _ref.rules,
|
|
6193
6212
|
fieldErrors = _ref.fieldErrors,
|
|
6194
6213
|
fieldRequired = _ref.fieldRequired,
|
|
6195
6214
|
label = _ref.label,
|
|
@@ -6204,11 +6223,18 @@ var FormInput = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
6204
6223
|
label: label,
|
|
6205
6224
|
info: info,
|
|
6206
6225
|
decoratorClassname: decoratorClassname
|
|
6207
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
6208
|
-
|
|
6209
|
-
|
|
6210
|
-
|
|
6211
|
-
|
|
6226
|
+
}, /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
|
|
6227
|
+
name: name,
|
|
6228
|
+
control: control,
|
|
6229
|
+
rules: rules,
|
|
6230
|
+
render: function render(_ref2) {
|
|
6231
|
+
var field = _ref2.field;
|
|
6232
|
+
return /*#__PURE__*/React__default.createElement(Input, _extends({}, fieldProps, field, {
|
|
6233
|
+
isError: hasError(name, fieldErrors),
|
|
6234
|
+
ref: innerRef
|
|
6235
|
+
}));
|
|
6236
|
+
}
|
|
6237
|
+
}));
|
|
6212
6238
|
});
|
|
6213
6239
|
|
|
6214
6240
|
var _excluded$o = ["name", "fieldErrors", "fieldRequired", "label", "info", "decoratorClassname"];
|
|
@@ -6732,12 +6758,15 @@ function FormFieldMapper(formFieldProps, useFormReturn) {
|
|
|
6732
6758
|
case "email":
|
|
6733
6759
|
case "password":
|
|
6734
6760
|
return /*#__PURE__*/React__default.createElement(FormInput, _extends({
|
|
6735
|
-
key: name
|
|
6761
|
+
key: name,
|
|
6762
|
+
name: name
|
|
6736
6763
|
}, decoratorProps, {
|
|
6737
6764
|
fieldRequired: isRequired(options),
|
|
6738
6765
|
fieldErrors: errors
|
|
6739
|
-
}, fieldProps,
|
|
6740
|
-
|
|
6766
|
+
}, fieldProps, {
|
|
6767
|
+
control: control,
|
|
6768
|
+
rules: options,
|
|
6769
|
+
type: type
|
|
6741
6770
|
}));
|
|
6742
6771
|
|
|
6743
6772
|
case "select":
|