@web-site-utilities/feedback 0.0.11 → 0.0.12

package/dist/common/components/Checkbox.d.ts

@@ -2,20 +2,21 @@ import React from 'react';
 import { Variants } from '../theme/ThemeProvider';
 import { CommonFieldProps } from '../types/CommonFieldProps';
 import { Options } from '../types/Option';
+import { Nullable } from "../types/Nullable";
 type CheckboxProps = {
     label: string;
     onSelect: (value: Array<string>) => void;
-    value: Array<string>;
+    value: Nullable<Array<string>>;
     id: string;
     colorVariant?: Variants | undefined;
     name: string;
 };
 export declare const Checkbox: (props: CheckboxProps) => React.DOMElement<{
-    selected: boolean;
+    selected: boolean | undefined;
     children: (React.DOMElement<{
         id: string;
         type: string;
-        selected: boolean;
+        selected: boolean | undefined;
         colorVariant: Variants | undefined;
         onChange: () => void;
         name: string;

package/dist/fields/Field/Field.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { AllFields } from '@web-site-utilities/common/types/FormConfig';
+import { AllFields } from "@web-site-utilities/common/types/FormConfig";
 import { FormError } from '@web-site-utilities/common/types/FormError';
 import { Nullable } from '@web-site-utilities/common/types/Nullable';
+import { SelectProps } from "@web-site-utilities/common/components/Select";
 type Props = {
     type: AllFields['type'];
     fieldProps: AllFields;
@@ -13,6 +14,6 @@ type Props = {
     dataField: Nullable<string>;
 };
 export declare const Field: (props: Props) => React.DOMElement<{
-    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;
+    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;
 }, Element>;
 export {};

package/dist/index.cjs.js

@@ -2995,16 +2995,18 @@ const CheckboxRow = dt.label((props) => ({
   gap: "calc(var(--spacing) * 2)"
 }));
 const Checkbox = (props) => {
+  var _a;
   const id = React.useMemo(
     () => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
     []
   );
   const onSelect = (value) => {
+    var _a2;
     props.onSelect(
-      props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
+      ((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
     );
   };
-  const isSelected = props.value.includes(id);
+  const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
   return React.createElement(CheckboxRow, {
     selected: isSelected,
     children: [
@@ -3555,6 +3557,79 @@ const Textarea = (props) => {
     ]
   });
 };
+const StyledOption = dt.option(() => {
+  return {
+    borderRadius: "var(--radius-field)",
+    whiteSpace: "normal",
+    paddingBlock: ".375rem",
+    paddingInline: ".75rem",
+    transitionProperty: "color,background-color",
+    transitionDuration: ".2s",
+    transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
+  };
+});
+const SelectStyled = dt.select((props) => {
+  const color = useDefaultVariantColor(props.colorVariant);
+  return {
+    border: `var(--border-width)solid ${color}`,
+    backgroundColor: "var(--color-base-100)",
+    verticalAlign: "middle",
+    width: "clamp(3rem,30rem,100%)",
+    height: "calc(var(--size-field,.25rem)*10)",
+    touchAction: "manipulation",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    borderStartStartRadius: "var(--radius-field)",
+    borderStartEndRadius: "var(--radius-field)",
+    borderEndEndRadius: "var(--radius-field)",
+    borderEndStartRadius: "var(--radius-field)",
+    flexShrink: "1",
+    alignItems: "center",
+    gap: ".375rem",
+    paddingInline: ".75rem 1.75rem",
+    fontSize: ".875rem",
+    display: "inline-flex",
+    position: "relative",
+    overflow: "hidden"
+  };
+});
+const Select = (props) => {
+  const onChange = (e) => props.onChange(e.target.value);
+  return React.createElement("div", {
+    children: [
+      React.createElement(Typography, {
+        children: props.label,
+        variant: "section"
+      }),
+      React.createElement(SelectStyled, {
+        colorVariant: props.colorVariant,
+        value: props.value ?? null,
+        defaultChecked: false,
+        defaultValue: null,
+        onChange,
+        children: [
+          React.createElement(StyledOption, {
+            value: "",
+            selected: !props.value,
+            children: "Select an option",
+            key: ""
+          }),
+          props.options.map(
+            (o) => React.createElement(StyledOption, {
+              value: o.id,
+              selected: o.id === props.value,
+              children: o.label,
+              key: o.id
+            })
+          )
+        ]
+      }),
+      React.createElement(ErrorMessage, {
+        errors: props.errors
+      })
+    ]
+  });
+};
 const Div$1 = dt.div`
   width: 100%;
 `;
@@ -3614,6 +3689,13 @@ const Field = (props) => {
           max: 10
         });
       }
+      case "select": {
+        const fieldProps = props.fieldProps;
+        return React.createElement(Select, {
+          ...fieldProps,
+          ...commonFields
+        });
+      }
       case "radio-group": {
         const fieldProps = props.fieldProps;
         return React.createElement(RadioGroup, {
@@ -3632,7 +3714,8 @@ const Field = (props) => {
         const fieldProps = props.fieldProps;
         return React.createElement(RangeSlide, {
           ...fieldProps,
-          ...commonFields
+          ...commonFields,
+          initialValue: fieldProps.defaultValue ?? 0
         });
       }
       case "rating": {
@@ -4005,79 +4088,6 @@ const App = (props) => {
     children: [inPlaceForm, popupForm]
   });
 };
-const StyledOption = dt.option(() => {
-  return {
-    borderRadius: "var(--radius-field)",
-    whiteSpace: "normal",
-    paddingBlock: ".375rem",
-    paddingInline: ".75rem",
-    transitionProperty: "color,background-color",
-    transitionDuration: ".2s",
-    transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
-  };
-});
-const SelectStyled = dt.select((props) => {
-  const color = useDefaultVariantColor(props.colorVariant);
-  return {
-    border: `var(--border-width)solid ${color}`,
-    backgroundColor: "var(--color-base-100)",
-    verticalAlign: "middle",
-    width: "clamp(3rem,30rem,100%)",
-    height: "calc(var(--size-field,.25rem)*10)",
-    touchAction: "manipulation",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    borderStartStartRadius: "var(--radius-field)",
-    borderStartEndRadius: "var(--radius-field)",
-    borderEndEndRadius: "var(--radius-field)",
-    borderEndStartRadius: "var(--radius-field)",
-    flexShrink: "1",
-    alignItems: "center",
-    gap: ".375rem",
-    paddingInline: ".75rem 1.75rem",
-    fontSize: ".875rem",
-    display: "inline-flex",
-    position: "relative",
-    overflow: "hidden"
-  };
-});
-const Select = (props) => {
-  const onChange = (e) => props.onChange(e.target.value);
-  return React.createElement("div", {
-    children: [
-      React.createElement(Typography, {
-        children: props.label,
-        variant: "section"
-      }),
-      React.createElement(SelectStyled, {
-        colorVariant: props.colorVariant,
-        value: props.value ?? null,
-        defaultChecked: false,
-        defaultValue: null,
-        onChange,
-        children: [
-          React.createElement(StyledOption, {
-            value: "",
-            selected: !props.value,
-            children: "Select an option",
-            key: ""
-          }),
-          props.options.map(
-            (o) => React.createElement(StyledOption, {
-              value: o.id,
-              selected: o.id === props.value,
-              children: o.label,
-              key: o.id
-            })
-          )
-        ]
-      }),
-      React.createElement(ErrorMessage, {
-        errors: props.errors
-      })
-    ]
-  });
-};
 const initiateFeedbackModule = (options) => {
   if (!options) {
     console.error("options must be provided. Feedback module deactivated");

package/dist/index.es.js

@@ -2993,16 +2993,18 @@ const CheckboxRow = dt.label((props) => ({
   gap: "calc(var(--spacing) * 2)"
 }));
 const Checkbox = (props) => {
+  var _a;
   const id = useMemo(
     () => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
     []
   );
   const onSelect = (value) => {
+    var _a2;
     props.onSelect(
-      props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
+      ((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
     );
   };
-  const isSelected = props.value.includes(id);
+  const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
   return React.createElement(CheckboxRow, {
     selected: isSelected,
     children: [
@@ -3553,6 +3555,79 @@ const Textarea = (props) => {
     ]
   });
 };
+const StyledOption = dt.option(() => {
+  return {
+    borderRadius: "var(--radius-field)",
+    whiteSpace: "normal",
+    paddingBlock: ".375rem",
+    paddingInline: ".75rem",
+    transitionProperty: "color,background-color",
+    transitionDuration: ".2s",
+    transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
+  };
+});
+const SelectStyled = dt.select((props) => {
+  const color = useDefaultVariantColor(props.colorVariant);
+  return {
+    border: `var(--border-width)solid ${color}`,
+    backgroundColor: "var(--color-base-100)",
+    verticalAlign: "middle",
+    width: "clamp(3rem,30rem,100%)",
+    height: "calc(var(--size-field,.25rem)*10)",
+    touchAction: "manipulation",
+    whiteSpace: "nowrap",
+    textOverflow: "ellipsis",
+    borderStartStartRadius: "var(--radius-field)",
+    borderStartEndRadius: "var(--radius-field)",
+    borderEndEndRadius: "var(--radius-field)",
+    borderEndStartRadius: "var(--radius-field)",
+    flexShrink: "1",
+    alignItems: "center",
+    gap: ".375rem",
+    paddingInline: ".75rem 1.75rem",
+    fontSize: ".875rem",
+    display: "inline-flex",
+    position: "relative",
+    overflow: "hidden"
+  };
+});
+const Select = (props) => {
+  const onChange = (e) => props.onChange(e.target.value);
+  return React.createElement("div", {
+    children: [
+      React.createElement(Typography, {
+        children: props.label,
+        variant: "section"
+      }),
+      React.createElement(SelectStyled, {
+        colorVariant: props.colorVariant,
+        value: props.value ?? null,
+        defaultChecked: false,
+        defaultValue: null,
+        onChange,
+        children: [
+          React.createElement(StyledOption, {
+            value: "",
+            selected: !props.value,
+            children: "Select an option",
+            key: ""
+          }),
+          props.options.map(
+            (o) => React.createElement(StyledOption, {
+              value: o.id,
+              selected: o.id === props.value,
+              children: o.label,
+              key: o.id
+            })
+          )
+        ]
+      }),
+      React.createElement(ErrorMessage, {
+        errors: props.errors
+      })
+    ]
+  });
+};
 const Div$1 = dt.div`
   width: 100%;
 `;
@@ -3612,6 +3687,13 @@ const Field = (props) => {
           max: 10
         });
       }
+      case "select": {
+        const fieldProps = props.fieldProps;
+        return React.createElement(Select, {
+          ...fieldProps,
+          ...commonFields
+        });
+      }
       case "radio-group": {
         const fieldProps = props.fieldProps;
         return React.createElement(RadioGroup, {
@@ -3630,7 +3712,8 @@ const Field = (props) => {
         const fieldProps = props.fieldProps;
         return React.createElement(RangeSlide, {
           ...fieldProps,
-          ...commonFields
+          ...commonFields,
+          initialValue: fieldProps.defaultValue ?? 0
         });
       }
       case "rating": {
@@ -4003,79 +4086,6 @@ const App = (props) => {
     children: [inPlaceForm, popupForm]
   });
 };
-const StyledOption = dt.option(() => {
-  return {
-    borderRadius: "var(--radius-field)",
-    whiteSpace: "normal",
-    paddingBlock: ".375rem",
-    paddingInline: ".75rem",
-    transitionProperty: "color,background-color",
-    transitionDuration: ".2s",
-    transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
-  };
-});
-const SelectStyled = dt.select((props) => {
-  const color = useDefaultVariantColor(props.colorVariant);
-  return {
-    border: `var(--border-width)solid ${color}`,
-    backgroundColor: "var(--color-base-100)",
-    verticalAlign: "middle",
-    width: "clamp(3rem,30rem,100%)",
-    height: "calc(var(--size-field,.25rem)*10)",
-    touchAction: "manipulation",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-    borderStartStartRadius: "var(--radius-field)",
-    borderStartEndRadius: "var(--radius-field)",
-    borderEndEndRadius: "var(--radius-field)",
-    borderEndStartRadius: "var(--radius-field)",
-    flexShrink: "1",
-    alignItems: "center",
-    gap: ".375rem",
-    paddingInline: ".75rem 1.75rem",
-    fontSize: ".875rem",
-    display: "inline-flex",
-    position: "relative",
-    overflow: "hidden"
-  };
-});
-const Select = (props) => {
-  const onChange = (e) => props.onChange(e.target.value);
-  return React.createElement("div", {
-    children: [
-      React.createElement(Typography, {
-        children: props.label,
-        variant: "section"
-      }),
-      React.createElement(SelectStyled, {
-        colorVariant: props.colorVariant,
-        value: props.value ?? null,
-        defaultChecked: false,
-        defaultValue: null,
-        onChange,
-        children: [
-          React.createElement(StyledOption, {
-            value: "",
-            selected: !props.value,
-            children: "Select an option",
-            key: ""
-          }),
-          props.options.map(
-            (o) => React.createElement(StyledOption, {
-              value: o.id,
-              selected: o.id === props.value,
-              children: o.label,
-              key: o.id
-            })
-          )
-        ]
-      }),
-      React.createElement(ErrorMessage, {
-        errors: props.errors
-      })
-    ]
-  });
-};
 const initiateFeedbackModule = (options) => {
   if (!options) {
     console.error("options must be provided. Feedback module deactivated");

package/dist/index.iife.js

@@ -2993,16 +2993,18 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
     gap: "calc(var(--spacing) * 2)"
   }));
   const Checkbox = (props) => {
+    var _a;
     const id = React2.useMemo(
       () => `${props.id}-${props.label.replace(/\s/g, "-").toLowerCase()}`,
       []
     );
     const onSelect = (value) => {
+      var _a2;
       props.onSelect(
-        props.value.includes(value) ? props.value.filter((v2) => v2 !== value) : [...props.value, value]
+        ((_a2 = props.value) == null ? void 0 : _a2.includes(value)) ? props.value.filter((v2) => v2 !== value) : [...props.value ?? [], value]
       );
     };
-    const isSelected = props.value.includes(id);
+    const isSelected = (_a = props.value) == null ? void 0 : _a.includes(id);
     return React2.createElement(CheckboxRow, {
       selected: isSelected,
       children: [
@@ -3553,6 +3555,79 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
       ]
     });
   };
+  const StyledOption = dt.option(() => {
+    return {
+      borderRadius: "var(--radius-field)",
+      whiteSpace: "normal",
+      paddingBlock: ".375rem",
+      paddingInline: ".75rem",
+      transitionProperty: "color,background-color",
+      transitionDuration: ".2s",
+      transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
+    };
+  });
+  const SelectStyled = dt.select((props) => {
+    const color = useDefaultVariantColor(props.colorVariant);
+    return {
+      border: `var(--border-width)solid ${color}`,
+      backgroundColor: "var(--color-base-100)",
+      verticalAlign: "middle",
+      width: "clamp(3rem,30rem,100%)",
+      height: "calc(var(--size-field,.25rem)*10)",
+      touchAction: "manipulation",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      borderStartStartRadius: "var(--radius-field)",
+      borderStartEndRadius: "var(--radius-field)",
+      borderEndEndRadius: "var(--radius-field)",
+      borderEndStartRadius: "var(--radius-field)",
+      flexShrink: "1",
+      alignItems: "center",
+      gap: ".375rem",
+      paddingInline: ".75rem 1.75rem",
+      fontSize: ".875rem",
+      display: "inline-flex",
+      position: "relative",
+      overflow: "hidden"
+    };
+  });
+  const Select = (props) => {
+    const onChange = (e) => props.onChange(e.target.value);
+    return React2.createElement("div", {
+      children: [
+        React2.createElement(Typography, {
+          children: props.label,
+          variant: "section"
+        }),
+        React2.createElement(SelectStyled, {
+          colorVariant: props.colorVariant,
+          value: props.value ?? null,
+          defaultChecked: false,
+          defaultValue: null,
+          onChange,
+          children: [
+            React2.createElement(StyledOption, {
+              value: "",
+              selected: !props.value,
+              children: "Select an option",
+              key: ""
+            }),
+            props.options.map(
+              (o) => React2.createElement(StyledOption, {
+                value: o.id,
+                selected: o.id === props.value,
+                children: o.label,
+                key: o.id
+              })
+            )
+          ]
+        }),
+        React2.createElement(ErrorMessage, {
+          errors: props.errors
+        })
+      ]
+    });
+  };
   const Div$1 = dt.div`
   width: 100%;
 `;
@@ -3612,6 +3687,13 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
             max: 10
           });
         }
+        case "select": {
+          const fieldProps = props.fieldProps;
+          return React2.createElement(Select, {
+            ...fieldProps,
+            ...commonFields
+          });
+        }
         case "radio-group": {
           const fieldProps = props.fieldProps;
           return React2.createElement(RadioGroup, {
@@ -3630,7 +3712,8 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
           const fieldProps = props.fieldProps;
           return React2.createElement(RangeSlide, {
             ...fieldProps,
-            ...commonFields
+            ...commonFields,
+            initialValue: fieldProps.defaultValue ?? 0
           });
         }
         case "rating": {
@@ -4003,79 +4086,6 @@ var SiteUtilsFeedback = (function(exports, React2, require$$02) {
       children: [inPlaceForm, popupForm]
     });
   };
-  const StyledOption = dt.option(() => {
-    return {
-      borderRadius: "var(--radius-field)",
-      whiteSpace: "normal",
-      paddingBlock: ".375rem",
-      paddingInline: ".75rem",
-      transitionProperty: "color,background-color",
-      transitionDuration: ".2s",
-      transitionTimingFunction: "cubic-bezier(0,0,.2,1)"
-    };
-  });
-  const SelectStyled = dt.select((props) => {
-    const color = useDefaultVariantColor(props.colorVariant);
-    return {
-      border: `var(--border-width)solid ${color}`,
-      backgroundColor: "var(--color-base-100)",
-      verticalAlign: "middle",
-      width: "clamp(3rem,30rem,100%)",
-      height: "calc(var(--size-field,.25rem)*10)",
-      touchAction: "manipulation",
-      whiteSpace: "nowrap",
-      textOverflow: "ellipsis",
-      borderStartStartRadius: "var(--radius-field)",
-      borderStartEndRadius: "var(--radius-field)",
-      borderEndEndRadius: "var(--radius-field)",
-      borderEndStartRadius: "var(--radius-field)",
-      flexShrink: "1",
-      alignItems: "center",
-      gap: ".375rem",
-      paddingInline: ".75rem 1.75rem",
-      fontSize: ".875rem",
-      display: "inline-flex",
-      position: "relative",
-      overflow: "hidden"
-    };
-  });
-  const Select = (props) => {
-    const onChange = (e) => props.onChange(e.target.value);
-    return React2.createElement("div", {
-      children: [
-        React2.createElement(Typography, {
-          children: props.label,
-          variant: "section"
-        }),
-        React2.createElement(SelectStyled, {
-          colorVariant: props.colorVariant,
-          value: props.value ?? null,
-          defaultChecked: false,
-          defaultValue: null,
-          onChange,
-          children: [
-            React2.createElement(StyledOption, {
-              value: "",
-              selected: !props.value,
-              children: "Select an option",
-              key: ""
-            }),
-            props.options.map(
-              (o) => React2.createElement(StyledOption, {
-                value: o.id,
-                selected: o.id === props.value,
-                children: o.label,
-                key: o.id
-              })
-            )
-          ]
-        }),
-        React2.createElement(ErrorMessage, {
-          errors: props.errors
-        })
-      ]
-    });
-  };
   const initiateFeedbackModule = (options) => {
     if (!options) {
       console.error("options must be provided. Feedback module deactivated");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web-site-utilities/feedback",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "workspaces": [
     "src/**",
     "examples/**"