@web-site-utilities/feedback 0.0.10 → 0.0.12
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/common/components/Checkbox.d.ts +4 -3
- package/dist/fields/Field/Field.d.ts +3 -2
- package/dist/index.cjs.js +88 -78
- package/dist/index.es.js +88 -78
- package/dist/index.iife.js +88 -78
- package/package.json +1 -1
|
@@ -2,20 +2,21 @@ import React from 'react';
|
|
|
2
2
|
import { Variants } from '../theme/ThemeProvider';
|
|
3
3
|
import { CommonFieldProps } from '../types/CommonFieldProps';
|
|
4
4
|
import { Options } from '../types/Option';
|
|
5
|
+
import { Nullable } from "../types/Nullable";
|
|
5
6
|
type CheckboxProps = {
|
|
6
7
|
label: string;
|
|
7
8
|
onSelect: (value: Array<string>) => void;
|
|
8
|
-
value: Array<string
|
|
9
|
+
value: Nullable<Array<string>>;
|
|
9
10
|
id: string;
|
|
10
11
|
colorVariant?: Variants | undefined;
|
|
11
12
|
name: string;
|
|
12
13
|
};
|
|
13
14
|
export declare const Checkbox: (props: CheckboxProps) => React.DOMElement<{
|
|
14
|
-
selected: boolean;
|
|
15
|
+
selected: boolean | undefined;
|
|
15
16
|
children: (React.DOMElement<{
|
|
16
17
|
id: string;
|
|
17
18
|
type: string;
|
|
18
|
-
selected: boolean;
|
|
19
|
+
selected: boolean | undefined;
|
|
19
20
|
colorVariant: Variants | undefined;
|
|
20
21
|
onChange: () => void;
|
|
21
22
|
name: string;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { AllFields } from
|
|
2
|
+
import { AllFields } from "@web-site-utilities/common/types/FormConfig";
|
|
3
3
|
import { FormError } from '@web-site-utilities/common/types/FormError';
|
|
4
4
|
import { Nullable } from '@web-site-utilities/common/types/Nullable';
|
|
5
|
+
import { SelectProps } from "@web-site-utilities/common/components/Select";
|
|
5
6
|
type Props = {
|
|
6
7
|
type: AllFields['type'];
|
|
7
8
|
fieldProps: AllFields;
|
|
@@ -13,6 +14,6 @@ type Props = {
|
|
|
13
14
|
dataField: Nullable<string>;
|
|
14
15
|
};
|
|
15
16
|
export declare const Field: (props: Props) => React.DOMElement<{
|
|
16
|
-
children: React.FunctionComponentElement<import("@web-site-utilities/common/components/QuestionMatrix").QuestionMatrixProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Radio").RadioGroupProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Checkbox").CheckboxGroupProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/RangeSlide").RangeSlideProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Rating").RatingProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Textarea").TextareaProps> | null;
|
|
17
|
+
children: React.FunctionComponentElement<import("@web-site-utilities/common/components/QuestionMatrix").QuestionMatrixProps> | React.FunctionComponentElement<SelectProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Radio").RadioGroupProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Checkbox").CheckboxGroupProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/RangeSlide").RangeSlideProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Rating").RatingProps> | React.FunctionComponentElement<import("@web-site-utilities/common/components/Textarea").TextareaProps> | null;
|
|
17
18
|
}, Element>;
|
|
18
19
|
export {};
|
package/dist/index.cjs.js
CHANGED
|
@@ -2995,16 +2995,18 @@ const CheckboxRow = dt.label((props) => ({
|
|
|
2995
2995
|
gap: "calc(var(--spacing) * 2)"
|
|
2996
2996
|
}));
|
|
2997
2997
|
const Checkbox = (props) => {
|
|
2998
|
+
var _a;
|
|
2998
2999
|
const id = React.useMemo(
|
|
2999
3000
|
() => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
|
|
3000
3001
|
[]
|
|
3001
3002
|
);
|
|
3002
3003
|
const onSelect = (value) => {
|
|
3004
|
+
var _a2;
|
|
3003
3005
|
props.onSelect(
|
|
3004
|
-
props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
|
|
3006
|
+
((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
|
|
3005
3007
|
);
|
|
3006
3008
|
};
|
|
3007
|
-
const isSelected = props.value.includes(id);
|
|
3009
|
+
const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
|
|
3008
3010
|
return React.createElement(CheckboxRow, {
|
|
3009
3011
|
selected: isSelected,
|
|
3010
3012
|
children: [
|
|
@@ -3555,6 +3557,79 @@ const Textarea = (props) => {
|
|
|
3555
3557
|
]
|
|
3556
3558
|
});
|
|
3557
3559
|
};
|
|
3560
|
+
const StyledOption = dt.option(() => {
|
|
3561
|
+
return {
|
|
3562
|
+
borderRadius: "var(--radius-field)",
|
|
3563
|
+
whiteSpace: "normal",
|
|
3564
|
+
paddingBlock: ".375rem",
|
|
3565
|
+
paddingInline: ".75rem",
|
|
3566
|
+
transitionProperty: "color,background-color",
|
|
3567
|
+
transitionDuration: ".2s",
|
|
3568
|
+
transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
|
|
3569
|
+
};
|
|
3570
|
+
});
|
|
3571
|
+
const SelectStyled = dt.select((props) => {
|
|
3572
|
+
const color = useDefaultVariantColor(props.colorVariant);
|
|
3573
|
+
return {
|
|
3574
|
+
border: `var(--border-width)solid ${color}`,
|
|
3575
|
+
backgroundColor: "var(--color-base-100)",
|
|
3576
|
+
verticalAlign: "middle",
|
|
3577
|
+
width: "clamp(3rem,30rem,100%)",
|
|
3578
|
+
height: "calc(var(--size-field,.25rem)*10)",
|
|
3579
|
+
touchAction: "manipulation",
|
|
3580
|
+
whiteSpace: "nowrap",
|
|
3581
|
+
textOverflow: "ellipsis",
|
|
3582
|
+
borderStartStartRadius: "var(--radius-field)",
|
|
3583
|
+
borderStartEndRadius: "var(--radius-field)",
|
|
3584
|
+
borderEndEndRadius: "var(--radius-field)",
|
|
3585
|
+
borderEndStartRadius: "var(--radius-field)",
|
|
3586
|
+
flexShrink: "1",
|
|
3587
|
+
alignItems: "center",
|
|
3588
|
+
gap: ".375rem",
|
|
3589
|
+
paddingInline: ".75rem 1.75rem",
|
|
3590
|
+
fontSize: ".875rem",
|
|
3591
|
+
display: "inline-flex",
|
|
3592
|
+
position: "relative",
|
|
3593
|
+
overflow: "hidden"
|
|
3594
|
+
};
|
|
3595
|
+
});
|
|
3596
|
+
const Select = (props) => {
|
|
3597
|
+
const onChange = (e) => props.onChange(e.target.value);
|
|
3598
|
+
return React.createElement("div", {
|
|
3599
|
+
children: [
|
|
3600
|
+
React.createElement(Typography, {
|
|
3601
|
+
children: props.label,
|
|
3602
|
+
variant: "section"
|
|
3603
|
+
}),
|
|
3604
|
+
React.createElement(SelectStyled, {
|
|
3605
|
+
colorVariant: props.colorVariant,
|
|
3606
|
+
value: props.value ?? null,
|
|
3607
|
+
defaultChecked: false,
|
|
3608
|
+
defaultValue: null,
|
|
3609
|
+
onChange,
|
|
3610
|
+
children: [
|
|
3611
|
+
React.createElement(StyledOption, {
|
|
3612
|
+
value: "",
|
|
3613
|
+
selected: !props.value,
|
|
3614
|
+
children: "Select an option",
|
|
3615
|
+
key: ""
|
|
3616
|
+
}),
|
|
3617
|
+
props.options.map(
|
|
3618
|
+
(o) => React.createElement(StyledOption, {
|
|
3619
|
+
value: o.id,
|
|
3620
|
+
selected: o.id === props.value,
|
|
3621
|
+
children: o.label,
|
|
3622
|
+
key: o.id
|
|
3623
|
+
})
|
|
3624
|
+
)
|
|
3625
|
+
]
|
|
3626
|
+
}),
|
|
3627
|
+
React.createElement(ErrorMessage, {
|
|
3628
|
+
errors: props.errors
|
|
3629
|
+
})
|
|
3630
|
+
]
|
|
3631
|
+
});
|
|
3632
|
+
};
|
|
3558
3633
|
const Div$1 = dt.div`
|
|
3559
3634
|
width: 100%;
|
|
3560
3635
|
`;
|
|
@@ -3614,6 +3689,13 @@ const Field = (props) => {
|
|
|
3614
3689
|
max: 10
|
|
3615
3690
|
});
|
|
3616
3691
|
}
|
|
3692
|
+
case "select": {
|
|
3693
|
+
const fieldProps = props.fieldProps;
|
|
3694
|
+
return React.createElement(Select, {
|
|
3695
|
+
...fieldProps,
|
|
3696
|
+
...commonFields
|
|
3697
|
+
});
|
|
3698
|
+
}
|
|
3617
3699
|
case "radio-group": {
|
|
3618
3700
|
const fieldProps = props.fieldProps;
|
|
3619
3701
|
return React.createElement(RadioGroup, {
|
|
@@ -3632,7 +3714,8 @@ const Field = (props) => {
|
|
|
3632
3714
|
const fieldProps = props.fieldProps;
|
|
3633
3715
|
return React.createElement(RangeSlide, {
|
|
3634
3716
|
...fieldProps,
|
|
3635
|
-
...commonFields
|
|
3717
|
+
...commonFields,
|
|
3718
|
+
initialValue: fieldProps.defaultValue ?? 0
|
|
3636
3719
|
});
|
|
3637
3720
|
}
|
|
3638
3721
|
case "rating": {
|
|
@@ -3678,7 +3761,7 @@ const InPlaceForm = (props) => {
|
|
|
3678
3761
|
if (!stateHeight || stateHeight < h) return h;
|
|
3679
3762
|
return stateHeight;
|
|
3680
3763
|
});
|
|
3681
|
-
}, [setMaxHeight]);
|
|
3764
|
+
}, [setMaxHeight, props.inlineForm.form.steps]);
|
|
3682
3765
|
const populatedForm = useForm({
|
|
3683
3766
|
form: props.inlineForm.form,
|
|
3684
3767
|
formId: props.formId,
|
|
@@ -3880,7 +3963,7 @@ const PopupForm = (props) => {
|
|
|
3880
3963
|
if (!stateHeight || stateHeight < h) return h;
|
|
3881
3964
|
return stateHeight;
|
|
3882
3965
|
});
|
|
3883
|
-
}, [setMaxHeight]);
|
|
3966
|
+
}, [setMaxHeight, props.popupForm.form.steps]);
|
|
3884
3967
|
const populatedForm = useForm({
|
|
3885
3968
|
form: props.popupForm.form,
|
|
3886
3969
|
formId: props.formId,
|
|
@@ -4005,79 +4088,6 @@ const App = (props) => {
|
|
|
4005
4088
|
children: [inPlaceForm, popupForm]
|
|
4006
4089
|
});
|
|
4007
4090
|
};
|
|
4008
|
-
const StyledOption = dt.option(() => {
|
|
4009
|
-
return {
|
|
4010
|
-
borderRadius: "var(--radius-field)",
|
|
4011
|
-
whiteSpace: "normal",
|
|
4012
|
-
paddingBlock: ".375rem",
|
|
4013
|
-
paddingInline: ".75rem",
|
|
4014
|
-
transitionProperty: "color,background-color",
|
|
4015
|
-
transitionDuration: ".2s",
|
|
4016
|
-
transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
|
|
4017
|
-
};
|
|
4018
|
-
});
|
|
4019
|
-
const SelectStyled = dt.select((props) => {
|
|
4020
|
-
const color = useDefaultVariantColor(props.colorVariant);
|
|
4021
|
-
return {
|
|
4022
|
-
border: `var(--border-width)solid ${color}`,
|
|
4023
|
-
backgroundColor: "var(--color-base-100)",
|
|
4024
|
-
verticalAlign: "middle",
|
|
4025
|
-
width: "clamp(3rem,30rem,100%)",
|
|
4026
|
-
height: "calc(var(--size-field,.25rem)*10)",
|
|
4027
|
-
touchAction: "manipulation",
|
|
4028
|
-
whiteSpace: "nowrap",
|
|
4029
|
-
textOverflow: "ellipsis",
|
|
4030
|
-
borderStartStartRadius: "var(--radius-field)",
|
|
4031
|
-
borderStartEndRadius: "var(--radius-field)",
|
|
4032
|
-
borderEndEndRadius: "var(--radius-field)",
|
|
4033
|
-
borderEndStartRadius: "var(--radius-field)",
|
|
4034
|
-
flexShrink: "1",
|
|
4035
|
-
alignItems: "center",
|
|
4036
|
-
gap: ".375rem",
|
|
4037
|
-
paddingInline: ".75rem 1.75rem",
|
|
4038
|
-
fontSize: ".875rem",
|
|
4039
|
-
display: "inline-flex",
|
|
4040
|
-
position: "relative",
|
|
4041
|
-
overflow: "hidden"
|
|
4042
|
-
};
|
|
4043
|
-
});
|
|
4044
|
-
const Select = (props) => {
|
|
4045
|
-
const onChange = (e) => props.onChange(e.target.value);
|
|
4046
|
-
return React.createElement("div", {
|
|
4047
|
-
children: [
|
|
4048
|
-
React.createElement(Typography, {
|
|
4049
|
-
children: props.label,
|
|
4050
|
-
variant: "section"
|
|
4051
|
-
}),
|
|
4052
|
-
React.createElement(SelectStyled, {
|
|
4053
|
-
colorVariant: props.colorVariant,
|
|
4054
|
-
value: props.value ?? null,
|
|
4055
|
-
defaultChecked: false,
|
|
4056
|
-
defaultValue: null,
|
|
4057
|
-
onChange,
|
|
4058
|
-
children: [
|
|
4059
|
-
React.createElement(StyledOption, {
|
|
4060
|
-
value: "",
|
|
4061
|
-
selected: !props.value,
|
|
4062
|
-
children: "Select an option",
|
|
4063
|
-
key: ""
|
|
4064
|
-
}),
|
|
4065
|
-
props.options.map(
|
|
4066
|
-
(o) => React.createElement(StyledOption, {
|
|
4067
|
-
value: o.id,
|
|
4068
|
-
selected: o.id === props.value,
|
|
4069
|
-
children: o.label,
|
|
4070
|
-
key: o.id
|
|
4071
|
-
})
|
|
4072
|
-
)
|
|
4073
|
-
]
|
|
4074
|
-
}),
|
|
4075
|
-
React.createElement(ErrorMessage, {
|
|
4076
|
-
errors: props.errors
|
|
4077
|
-
})
|
|
4078
|
-
]
|
|
4079
|
-
});
|
|
4080
|
-
};
|
|
4081
4091
|
const initiateFeedbackModule = (options) => {
|
|
4082
4092
|
if (!options) {
|
|
4083
4093
|
console.error("options must be provided. Feedback module deactivated");
|
package/dist/index.es.js
CHANGED
|
@@ -2993,16 +2993,18 @@ const CheckboxRow = dt.label((props) => ({
|
|
|
2993
2993
|
gap: "calc(var(--spacing) * 2)"
|
|
2994
2994
|
}));
|
|
2995
2995
|
const Checkbox = (props) => {
|
|
2996
|
+
var _a;
|
|
2996
2997
|
const id = useMemo(
|
|
2997
2998
|
() => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
|
|
2998
2999
|
[]
|
|
2999
3000
|
);
|
|
3000
3001
|
const onSelect = (value) => {
|
|
3002
|
+
var _a2;
|
|
3001
3003
|
props.onSelect(
|
|
3002
|
-
props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
|
|
3004
|
+
((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
|
|
3003
3005
|
);
|
|
3004
3006
|
};
|
|
3005
|
-
const isSelected = props.value.includes(id);
|
|
3007
|
+
const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
|
|
3006
3008
|
return React.createElement(CheckboxRow, {
|
|
3007
3009
|
selected: isSelected,
|
|
3008
3010
|
children: [
|
|
@@ -3553,6 +3555,79 @@ const Textarea = (props) => {
|
|
|
3553
3555
|
]
|
|
3554
3556
|
});
|
|
3555
3557
|
};
|
|
3558
|
+
const StyledOption = dt.option(() => {
|
|
3559
|
+
return {
|
|
3560
|
+
borderRadius: "var(--radius-field)",
|
|
3561
|
+
whiteSpace: "normal",
|
|
3562
|
+
paddingBlock: ".375rem",
|
|
3563
|
+
paddingInline: ".75rem",
|
|
3564
|
+
transitionProperty: "color,background-color",
|
|
3565
|
+
transitionDuration: ".2s",
|
|
3566
|
+
transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
|
|
3567
|
+
};
|
|
3568
|
+
});
|
|
3569
|
+
const SelectStyled = dt.select((props) => {
|
|
3570
|
+
const color = useDefaultVariantColor(props.colorVariant);
|
|
3571
|
+
return {
|
|
3572
|
+
border: `var(--border-width)solid ${color}`,
|
|
3573
|
+
backgroundColor: "var(--color-base-100)",
|
|
3574
|
+
verticalAlign: "middle",
|
|
3575
|
+
width: "clamp(3rem,30rem,100%)",
|
|
3576
|
+
height: "calc(var(--size-field,.25rem)*10)",
|
|
3577
|
+
touchAction: "manipulation",
|
|
3578
|
+
whiteSpace: "nowrap",
|
|
3579
|
+
textOverflow: "ellipsis",
|
|
3580
|
+
borderStartStartRadius: "var(--radius-field)",
|
|
3581
|
+
borderStartEndRadius: "var(--radius-field)",
|
|
3582
|
+
borderEndEndRadius: "var(--radius-field)",
|
|
3583
|
+
borderEndStartRadius: "var(--radius-field)",
|
|
3584
|
+
flexShrink: "1",
|
|
3585
|
+
alignItems: "center",
|
|
3586
|
+
gap: ".375rem",
|
|
3587
|
+
paddingInline: ".75rem 1.75rem",
|
|
3588
|
+
fontSize: ".875rem",
|
|
3589
|
+
display: "inline-flex",
|
|
3590
|
+
position: "relative",
|
|
3591
|
+
overflow: "hidden"
|
|
3592
|
+
};
|
|
3593
|
+
});
|
|
3594
|
+
const Select = (props) => {
|
|
3595
|
+
const onChange = (e) => props.onChange(e.target.value);
|
|
3596
|
+
return React.createElement("div", {
|
|
3597
|
+
children: [
|
|
3598
|
+
React.createElement(Typography, {
|
|
3599
|
+
children: props.label,
|
|
3600
|
+
variant: "section"
|
|
3601
|
+
}),
|
|
3602
|
+
React.createElement(SelectStyled, {
|
|
3603
|
+
colorVariant: props.colorVariant,
|
|
3604
|
+
value: props.value ?? null,
|
|
3605
|
+
defaultChecked: false,
|
|
3606
|
+
defaultValue: null,
|
|
3607
|
+
onChange,
|
|
3608
|
+
children: [
|
|
3609
|
+
React.createElement(StyledOption, {
|
|
3610
|
+
value: "",
|
|
3611
|
+
selected: !props.value,
|
|
3612
|
+
children: "Select an option",
|
|
3613
|
+
key: ""
|
|
3614
|
+
}),
|
|
3615
|
+
props.options.map(
|
|
3616
|
+
(o) => React.createElement(StyledOption, {
|
|
3617
|
+
value: o.id,
|
|
3618
|
+
selected: o.id === props.value,
|
|
3619
|
+
children: o.label,
|
|
3620
|
+
key: o.id
|
|
3621
|
+
})
|
|
3622
|
+
)
|
|
3623
|
+
]
|
|
3624
|
+
}),
|
|
3625
|
+
React.createElement(ErrorMessage, {
|
|
3626
|
+
errors: props.errors
|
|
3627
|
+
})
|
|
3628
|
+
]
|
|
3629
|
+
});
|
|
3630
|
+
};
|
|
3556
3631
|
const Div$1 = dt.div`
|
|
3557
3632
|
width: 100%;
|
|
3558
3633
|
`;
|
|
@@ -3612,6 +3687,13 @@ const Field = (props) => {
|
|
|
3612
3687
|
max: 10
|
|
3613
3688
|
});
|
|
3614
3689
|
}
|
|
3690
|
+
case "select": {
|
|
3691
|
+
const fieldProps = props.fieldProps;
|
|
3692
|
+
return React.createElement(Select, {
|
|
3693
|
+
...fieldProps,
|
|
3694
|
+
...commonFields
|
|
3695
|
+
});
|
|
3696
|
+
}
|
|
3615
3697
|
case "radio-group": {
|
|
3616
3698
|
const fieldProps = props.fieldProps;
|
|
3617
3699
|
return React.createElement(RadioGroup, {
|
|
@@ -3630,7 +3712,8 @@ const Field = (props) => {
|
|
|
3630
3712
|
const fieldProps = props.fieldProps;
|
|
3631
3713
|
return React.createElement(RangeSlide, {
|
|
3632
3714
|
...fieldProps,
|
|
3633
|
-
...commonFields
|
|
3715
|
+
...commonFields,
|
|
3716
|
+
initialValue: fieldProps.defaultValue ?? 0
|
|
3634
3717
|
});
|
|
3635
3718
|
}
|
|
3636
3719
|
case "rating": {
|
|
@@ -3676,7 +3759,7 @@ const InPlaceForm = (props) => {
|
|
|
3676
3759
|
if (!stateHeight || stateHeight < h) return h;
|
|
3677
3760
|
return stateHeight;
|
|
3678
3761
|
});
|
|
3679
|
-
}, [setMaxHeight]);
|
|
3762
|
+
}, [setMaxHeight, props.inlineForm.form.steps]);
|
|
3680
3763
|
const populatedForm = useForm({
|
|
3681
3764
|
form: props.inlineForm.form,
|
|
3682
3765
|
formId: props.formId,
|
|
@@ -3878,7 +3961,7 @@ const PopupForm = (props) => {
|
|
|
3878
3961
|
if (!stateHeight || stateHeight < h) return h;
|
|
3879
3962
|
return stateHeight;
|
|
3880
3963
|
});
|
|
3881
|
-
}, [setMaxHeight]);
|
|
3964
|
+
}, [setMaxHeight, props.popupForm.form.steps]);
|
|
3882
3965
|
const populatedForm = useForm({
|
|
3883
3966
|
form: props.popupForm.form,
|
|
3884
3967
|
formId: props.formId,
|
|
@@ -4003,79 +4086,6 @@ const App = (props) => {
|
|
|
4003
4086
|
children: [inPlaceForm, popupForm]
|
|
4004
4087
|
});
|
|
4005
4088
|
};
|
|
4006
|
-
const StyledOption = dt.option(() => {
|
|
4007
|
-
return {
|
|
4008
|
-
borderRadius: "var(--radius-field)",
|
|
4009
|
-
whiteSpace: "normal",
|
|
4010
|
-
paddingBlock: ".375rem",
|
|
4011
|
-
paddingInline: ".75rem",
|
|
4012
|
-
transitionProperty: "color,background-color",
|
|
4013
|
-
transitionDuration: ".2s",
|
|
4014
|
-
transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
|
|
4015
|
-
};
|
|
4016
|
-
});
|
|
4017
|
-
const SelectStyled = dt.select((props) => {
|
|
4018
|
-
const color = useDefaultVariantColor(props.colorVariant);
|
|
4019
|
-
return {
|
|
4020
|
-
border: `var(--border-width)solid ${color}`,
|
|
4021
|
-
backgroundColor: "var(--color-base-100)",
|
|
4022
|
-
verticalAlign: "middle",
|
|
4023
|
-
width: "clamp(3rem,30rem,100%)",
|
|
4024
|
-
height: "calc(var(--size-field,.25rem)*10)",
|
|
4025
|
-
touchAction: "manipulation",
|
|
4026
|
-
whiteSpace: "nowrap",
|
|
4027
|
-
textOverflow: "ellipsis",
|
|
4028
|
-
borderStartStartRadius: "var(--radius-field)",
|
|
4029
|
-
borderStartEndRadius: "var(--radius-field)",
|
|
4030
|
-
borderEndEndRadius: "var(--radius-field)",
|
|
4031
|
-
borderEndStartRadius: "var(--radius-field)",
|
|
4032
|
-
flexShrink: "1",
|
|
4033
|
-
alignItems: "center",
|
|
4034
|
-
gap: ".375rem",
|
|
4035
|
-
paddingInline: ".75rem 1.75rem",
|
|
4036
|
-
fontSize: ".875rem",
|
|
4037
|
-
display: "inline-flex",
|
|
4038
|
-
position: "relative",
|
|
4039
|
-
overflow: "hidden"
|
|
4040
|
-
};
|
|
4041
|
-
});
|
|
4042
|
-
const Select = (props) => {
|
|
4043
|
-
const onChange = (e) => props.onChange(e.target.value);
|
|
4044
|
-
return React.createElement("div", {
|
|
4045
|
-
children: [
|
|
4046
|
-
React.createElement(Typography, {
|
|
4047
|
-
children: props.label,
|
|
4048
|
-
variant: "section"
|
|
4049
|
-
}),
|
|
4050
|
-
React.createElement(SelectStyled, {
|
|
4051
|
-
colorVariant: props.colorVariant,
|
|
4052
|
-
value: props.value ?? null,
|
|
4053
|
-
defaultChecked: false,
|
|
4054
|
-
defaultValue: null,
|
|
4055
|
-
onChange,
|
|
4056
|
-
children: [
|
|
4057
|
-
React.createElement(StyledOption, {
|
|
4058
|
-
value: "",
|
|
4059
|
-
selected: !props.value,
|
|
4060
|
-
children: "Select an option",
|
|
4061
|
-
key: ""
|
|
4062
|
-
}),
|
|
4063
|
-
props.options.map(
|
|
4064
|
-
(o) => React.createElement(StyledOption, {
|
|
4065
|
-
value: o.id,
|
|
4066
|
-
selected: o.id === props.value,
|
|
4067
|
-
children: o.label,
|
|
4068
|
-
key: o.id
|
|
4069
|
-
})
|
|
4070
|
-
)
|
|
4071
|
-
]
|
|
4072
|
-
}),
|
|
4073
|
-
React.createElement(ErrorMessage, {
|
|
4074
|
-
errors: props.errors
|
|
4075
|
-
})
|
|
4076
|
-
]
|
|
4077
|
-
});
|
|
4078
|
-
};
|
|
4079
4089
|
const initiateFeedbackModule = (options) => {
|
|
4080
4090
|
if (!options) {
|
|
4081
4091
|
console.error("options must be provided. Feedback module deactivated");
|
package/dist/index.iife.js
CHANGED
|
@@ -2993,16 +2993,18 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
|
|
|
2993
2993
|
gap: "calc(var(--spacing) * 2)"
|
|
2994
2994
|
}));
|
|
2995
2995
|
const Checkbox = (props) => {
|
|
2996
|
+
var _a;
|
|
2996
2997
|
const id = React2.useMemo(
|
|
2997
2998
|
() => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
|
|
2998
2999
|
[]
|
|
2999
3000
|
);
|
|
3000
3001
|
const onSelect = (value) => {
|
|
3002
|
+
var _a2;
|
|
3001
3003
|
props.onSelect(
|
|
3002
|
-
props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
|
|
3004
|
+
((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
|
|
3003
3005
|
);
|
|
3004
3006
|
};
|
|
3005
|
-
const isSelected = props.value.includes(id);
|
|
3007
|
+
const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
|
|
3006
3008
|
return React2.createElement(CheckboxRow, {
|
|
3007
3009
|
selected: isSelected,
|
|
3008
3010
|
children: [
|
|
@@ -3553,6 +3555,79 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
|
|
|
3553
3555
|
]
|
|
3554
3556
|
});
|
|
3555
3557
|
};
|
|
3558
|
+
const StyledOption = dt.option(() => {
|
|
3559
|
+
return {
|
|
3560
|
+
borderRadius: "var(--radius-field)",
|
|
3561
|
+
whiteSpace: "normal",
|
|
3562
|
+
paddingBlock: ".375rem",
|
|
3563
|
+
paddingInline: ".75rem",
|
|
3564
|
+
transitionProperty: "color,background-color",
|
|
3565
|
+
transitionDuration: ".2s",
|
|
3566
|
+
transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
|
|
3567
|
+
};
|
|
3568
|
+
});
|
|
3569
|
+
const SelectStyled = dt.select((props) => {
|
|
3570
|
+
const color = useDefaultVariantColor(props.colorVariant);
|
|
3571
|
+
return {
|
|
3572
|
+
border: `var(--border-width)solid ${color}`,
|
|
3573
|
+
backgroundColor: "var(--color-base-100)",
|
|
3574
|
+
verticalAlign: "middle",
|
|
3575
|
+
width: "clamp(3rem,30rem,100%)",
|
|
3576
|
+
height: "calc(var(--size-field,.25rem)*10)",
|
|
3577
|
+
touchAction: "manipulation",
|
|
3578
|
+
whiteSpace: "nowrap",
|
|
3579
|
+
textOverflow: "ellipsis",
|
|
3580
|
+
borderStartStartRadius: "var(--radius-field)",
|
|
3581
|
+
borderStartEndRadius: "var(--radius-field)",
|
|
3582
|
+
borderEndEndRadius: "var(--radius-field)",
|
|
3583
|
+
borderEndStartRadius: "var(--radius-field)",
|
|
3584
|
+
flexShrink: "1",
|
|
3585
|
+
alignItems: "center",
|
|
3586
|
+
gap: ".375rem",
|
|
3587
|
+
paddingInline: ".75rem 1.75rem",
|
|
3588
|
+
fontSize: ".875rem",
|
|
3589
|
+
display: "inline-flex",
|
|
3590
|
+
position: "relative",
|
|
3591
|
+
overflow: "hidden"
|
|
3592
|
+
};
|
|
3593
|
+
});
|
|
3594
|
+
const Select = (props) => {
|
|
3595
|
+
const onChange = (e) => props.onChange(e.target.value);
|
|
3596
|
+
return React2.createElement("div", {
|
|
3597
|
+
children: [
|
|
3598
|
+
React2.createElement(Typography, {
|
|
3599
|
+
children: props.label,
|
|
3600
|
+
variant: "section"
|
|
3601
|
+
}),
|
|
3602
|
+
React2.createElement(SelectStyled, {
|
|
3603
|
+
colorVariant: props.colorVariant,
|
|
3604
|
+
value: props.value ?? null,
|
|
3605
|
+
defaultChecked: false,
|
|
3606
|
+
defaultValue: null,
|
|
3607
|
+
onChange,
|
|
3608
|
+
children: [
|
|
3609
|
+
React2.createElement(StyledOption, {
|
|
3610
|
+
value: "",
|
|
3611
|
+
selected: !props.value,
|
|
3612
|
+
children: "Select an option",
|
|
3613
|
+
key: ""
|
|
3614
|
+
}),
|
|
3615
|
+
props.options.map(
|
|
3616
|
+
(o) => React2.createElement(StyledOption, {
|
|
3617
|
+
value: o.id,
|
|
3618
|
+
selected: o.id === props.value,
|
|
3619
|
+
children: o.label,
|
|
3620
|
+
key: o.id
|
|
3621
|
+
})
|
|
3622
|
+
)
|
|
3623
|
+
]
|
|
3624
|
+
}),
|
|
3625
|
+
React2.createElement(ErrorMessage, {
|
|
3626
|
+
errors: props.errors
|
|
3627
|
+
})
|
|
3628
|
+
]
|
|
3629
|
+
});
|
|
3630
|
+
};
|
|
3556
3631
|
const Div$1 = dt.div`
|
|
3557
3632
|
width: 100%;
|
|
3558
3633
|
`;
|
|
@@ -3612,6 +3687,13 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
|
|
|
3612
3687
|
max: 10
|
|
3613
3688
|
});
|
|
3614
3689
|
}
|
|
3690
|
+
case "select": {
|
|
3691
|
+
const fieldProps = props.fieldProps;
|
|
3692
|
+
return React2.createElement(Select, {
|
|
3693
|
+
...fieldProps,
|
|
3694
|
+
...commonFields
|
|
3695
|
+
});
|
|
3696
|
+
}
|
|
3615
3697
|
case "radio-group": {
|
|
3616
3698
|
const fieldProps = props.fieldProps;
|
|
3617
3699
|
return React2.createElement(RadioGroup, {
|
|
@@ -3630,7 +3712,8 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
|
|
|
3630
3712
|
const fieldProps = props.fieldProps;
|
|
3631
3713
|
return React2.createElement(RangeSlide, {
|
|
3632
3714
|
...fieldProps,
|
|
3633
|
-
...commonFields
|
|
3715
|
+
...commonFields,
|
|
3716
|
+
initialValue: fieldProps.defaultValue ?? 0
|
|
3634
3717
|
});
|
|
3635
3718
|
}
|
|
3636
3719
|
case "rating": {
|
|
@@ -3676,7 +3759,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
|
|
|
3676
3759
|
if (!stateHeight || stateHeight < h) return h;
|
|
3677
3760
|
return stateHeight;
|
|
3678
3761
|
});
|
|
3679
|
-
}, [setMaxHeight]);
|
|
3762
|
+
}, [setMaxHeight, props.inlineForm.form.steps]);
|
|
3680
3763
|
const populatedForm = useForm({
|
|
3681
3764
|
form: props.inlineForm.form,
|
|
3682
3765
|
formId: props.formId,
|
|
@@ -3878,7 +3961,7 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
|
|
|
3878
3961
|
if (!stateHeight || stateHeight < h) return h;
|
|
3879
3962
|
return stateHeight;
|
|
3880
3963
|
});
|
|
3881
|
-
}, [setMaxHeight]);
|
|
3964
|
+
}, [setMaxHeight, props.popupForm.form.steps]);
|
|
3882
3965
|
const populatedForm = useForm({
|
|
3883
3966
|
form: props.popupForm.form,
|
|
3884
3967
|
formId: props.formId,
|
|
@@ -4003,79 +4086,6 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
|
|
|
4003
4086
|
children: [inPlaceForm, popupForm]
|
|
4004
4087
|
});
|
|
4005
4088
|
};
|
|
4006
|
-
const StyledOption = dt.option(() => {
|
|
4007
|
-
return {
|
|
4008
|
-
borderRadius: "var(--radius-field)",
|
|
4009
|
-
whiteSpace: "normal",
|
|
4010
|
-
paddingBlock: ".375rem",
|
|
4011
|
-
paddingInline: ".75rem",
|
|
4012
|
-
transitionProperty: "color,background-color",
|
|
4013
|
-
transitionDuration: ".2s",
|
|
4014
|
-
transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
|
|
4015
|
-
};
|
|
4016
|
-
});
|
|
4017
|
-
const SelectStyled = dt.select((props) => {
|
|
4018
|
-
const color = useDefaultVariantColor(props.colorVariant);
|
|
4019
|
-
return {
|
|
4020
|
-
border: `var(--border-width)solid ${color}`,
|
|
4021
|
-
backgroundColor: "var(--color-base-100)",
|
|
4022
|
-
verticalAlign: "middle",
|
|
4023
|
-
width: "clamp(3rem,30rem,100%)",
|
|
4024
|
-
height: "calc(var(--size-field,.25rem)*10)",
|
|
4025
|
-
touchAction: "manipulation",
|
|
4026
|
-
whiteSpace: "nowrap",
|
|
4027
|
-
textOverflow: "ellipsis",
|
|
4028
|
-
borderStartStartRadius: "var(--radius-field)",
|
|
4029
|
-
borderStartEndRadius: "var(--radius-field)",
|
|
4030
|
-
borderEndEndRadius: "var(--radius-field)",
|
|
4031
|
-
borderEndStartRadius: "var(--radius-field)",
|
|
4032
|
-
flexShrink: "1",
|
|
4033
|
-
alignItems: "center",
|
|
4034
|
-
gap: ".375rem",
|
|
4035
|
-
paddingInline: ".75rem 1.75rem",
|
|
4036
|
-
fontSize: ".875rem",
|
|
4037
|
-
display: "inline-flex",
|
|
4038
|
-
position: "relative",
|
|
4039
|
-
overflow: "hidden"
|
|
4040
|
-
};
|
|
4041
|
-
});
|
|
4042
|
-
const Select = (props) => {
|
|
4043
|
-
const onChange = (e) => props.onChange(e.target.value);
|
|
4044
|
-
return React2.createElement("div", {
|
|
4045
|
-
children: [
|
|
4046
|
-
React2.createElement(Typography, {
|
|
4047
|
-
children: props.label,
|
|
4048
|
-
variant: "section"
|
|
4049
|
-
}),
|
|
4050
|
-
React2.createElement(SelectStyled, {
|
|
4051
|
-
colorVariant: props.colorVariant,
|
|
4052
|
-
value: props.value ?? null,
|
|
4053
|
-
defaultChecked: false,
|
|
4054
|
-
defaultValue: null,
|
|
4055
|
-
onChange,
|
|
4056
|
-
children: [
|
|
4057
|
-
React2.createElement(StyledOption, {
|
|
4058
|
-
value: "",
|
|
4059
|
-
selected: !props.value,
|
|
4060
|
-
children: "Select an option",
|
|
4061
|
-
key: ""
|
|
4062
|
-
}),
|
|
4063
|
-
props.options.map(
|
|
4064
|
-
(o) => React2.createElement(StyledOption, {
|
|
4065
|
-
value: o.id,
|
|
4066
|
-
selected: o.id === props.value,
|
|
4067
|
-
children: o.label,
|
|
4068
|
-
key: o.id
|
|
4069
|
-
})
|
|
4070
|
-
)
|
|
4071
|
-
]
|
|
4072
|
-
}),
|
|
4073
|
-
React2.createElement(ErrorMessage, {
|
|
4074
|
-
errors: props.errors
|
|
4075
|
-
})
|
|
4076
|
-
]
|
|
4077
|
-
});
|
|
4078
|
-
};
|
|
4079
4089
|
const initiateFeedbackModule = (options) => {
|
|
4080
4090
|
if (!options) {
|
|
4081
4091
|
console.error("options must be provided. Feedback module deactivated");
|