@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.
@@ -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 '@web-site-utilities/common/types/FormConfig';
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");
@@ -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");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@web-site-utilities/feedback",
3
- "version": "0.0.10",
3
+ "version": "0.0.12",
4
4
  "workspaces": [
5
5
  "src/**",
6
6
  "examples/**"