@ultraviolet/form 3.3.0 → 3.4.0

package/dist/components/KeyValueField/index.cjs

@@ -10,7 +10,7 @@ const KeyValueField = ({
   inputValue,
   addButton,
   maxSize = 100,
-  readonly = false,
+  readOnly = false,
   control
 }) => {
   const {
@@ -25,9 +25,9 @@ const KeyValueField = ({
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
   return /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { gap: 3, children: [
     fields.length ? /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { gap: 3, children: fields.map((field, index$1) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly: readonly, required: inputKey.required, name: `${name}.${index$1}.key`, label: inputKey.label, regex: inputKey.regex }),
-      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly: readonly, required: inputValue.required, name: `${name}.${index$1}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { disabled: readonly, "data-testid": `remove-button-${index$1}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index$1) })
+      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly, required: inputKey.required, name: `${name}.${index$1}.key`, label: inputKey.label, regex: inputKey.regex }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.TextInputField, { readOnly, required: inputValue.required, name: `${name}.${index$1}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { disabled: readOnly, "data-testid": `remove-button-${index$1}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index$1) })
     ] }, field.id)) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.Button,
@@ -37,7 +37,7 @@ const KeyValueField = ({
         variant: "filled",
         sentiment: "neutral",
         fullWidth: addButton.fullWidth,
-        disabled: !canAdd || readonly,
+        disabled: !canAdd || readOnly,
         tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
         onClick: () => append({
           key: "",

package/dist/components/KeyValueField/index.d.ts

@@ -23,11 +23,11 @@ type KeyValueFieldProps<TFieldValues extends FieldValues, TFieldArrayName extend
     inputValue: InputValueProps;
     addButton: AddButtonProps;
     maxSize?: number;
-    readonly?: boolean;
+    readOnly?: boolean;
     control?: Control<TFieldValues>;
 };
 /**
  * A React component that allows users to manage key-value pairs
  */
-export declare const KeyValueField: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, inputKey, inputValue, addButton, maxSize, readonly, control, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const KeyValueField: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, inputKey, inputValue, addButton, maxSize, readOnly, control, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/KeyValueField/index.js

@@ -8,7 +8,7 @@ const KeyValueField = ({
   inputValue,
   addButton,
   maxSize = 100,
-  readonly = false,
+  readOnly = false,
   control
 }) => {
   const {
@@ -23,9 +23,9 @@ const KeyValueField = ({
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
   return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
     fields.length ? /* @__PURE__ */ jsx(Stack, { gap: 3, children: fields.map((field, index) => /* @__PURE__ */ jsxs(Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
-      /* @__PURE__ */ jsx(TextInputField, { readOnly: readonly, required: inputKey.required, name: `${name}.${index}.key`, label: inputKey.label, regex: inputKey.regex }),
-      /* @__PURE__ */ jsx(TextInputField, { readOnly: readonly, required: inputValue.required, name: `${name}.${index}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
-      /* @__PURE__ */ jsx(Button, { disabled: readonly, "data-testid": `remove-button-${index}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index) })
+      /* @__PURE__ */ jsx(TextInputField, { readOnly, required: inputKey.required, name: `${name}.${index}.key`, label: inputKey.label, regex: inputKey.regex }),
+      /* @__PURE__ */ jsx(TextInputField, { readOnly, required: inputValue.required, name: `${name}.${index}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
+      /* @__PURE__ */ jsx(Button, { disabled: readOnly, "data-testid": `remove-button-${index}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index) })
     ] }, field.id)) }) : null,
     /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsx(
       Button,
@@ -35,7 +35,7 @@ const KeyValueField = ({
         variant: "filled",
         sentiment: "neutral",
         fullWidth: addButton.fullWidth,
-        disabled: !canAdd || readonly,
+        disabled: !canAdd || readOnly,
         tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
         onClick: () => append({
           key: "",

package/dist/components/SliderField/index.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ui = require("@ultraviolet/ui");
+const react = require("react");
 const reactHookForm = require("react-hook-form");
 const index = require("../../providers/ErrorContext/index.cjs");
 const SliderField = ({
@@ -17,6 +18,7 @@ const SliderField = ({
   label,
   value,
   defaultValue,
+  options,
   ...props
 }) => {
   const {
@@ -38,16 +40,35 @@ const SliderField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { name: field.name, value: field.value, onBlur: (event) => {
+  const finalValue = react.useMemo(() => {
+    if (options && field.value) {
+      if (!Array.isArray(field.value)) {
+        const processedValue = options.map((option) => option.value).indexOf(field.value);
+        return processedValue;
+      }
+      if (Array.isArray(field.value)) {
+        const processedValue = field.value.map((val) => options.map((option) => option.value).indexOf(val));
+        return processedValue;
+      }
+    }
+    return field.value;
+  }, [field.value, options]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { name: field.name, value: finalValue, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
-    field.onChange(newValue);
-    onChange?.(newValue);
+    if (options) {
+      const processedValue = !Array.isArray(newValue) ? options[newValue].value : newValue.map((val) => val ? options[val].value : options[0].value);
+      field.onChange(processedValue);
+      onChange?.(processedValue);
+    } else {
+      field.onChange(newValue);
+      onChange?.(newValue);
+    }
   }, max, min, error: getError({
     label: label ?? "",
     max,
     min
-  }, error), label, required, ...props });
+  }, error), label, required, options, ...props });
 };
 exports.SliderField = SliderField;

package/dist/components/SliderField/index.d.ts

@@ -1,9 +1,9 @@
 import { Slider } from '@ultraviolet/ui';
-import type { ComponentProps, ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
 type SliderFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof Slider>, 'value' | 'onChange'> & {
     suffix?: string | ReactNode[];
 };
-export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SliderField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, control, shouldUnregister, max, min, required, validate, onBlur, onChange, label, value, defaultValue, options, ...props }: SliderFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SliderField/index.js

@@ -1,5 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { Slider } from "@ultraviolet/ui";
+import { useMemo } from "react";
 import { useController } from "react-hook-form";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const SliderField = ({
@@ -15,6 +16,7 @@ const SliderField = ({
   label,
   value,
   defaultValue,
+  options,
   ...props
 }) => {
   const {
@@ -36,17 +38,36 @@ const SliderField = ({
       validate
     }
   });
-  return /* @__PURE__ */ jsx(Slider, { name: field.name, value: field.value, onBlur: (event) => {
+  const finalValue = useMemo(() => {
+    if (options && field.value) {
+      if (!Array.isArray(field.value)) {
+        const processedValue = options.map((option) => option.value).indexOf(field.value);
+        return processedValue;
+      }
+      if (Array.isArray(field.value)) {
+        const processedValue = field.value.map((val) => options.map((option) => option.value).indexOf(val));
+        return processedValue;
+      }
+    }
+    return field.value;
+  }, [field.value, options]);
+  return /* @__PURE__ */ jsx(Slider, { name: field.name, value: finalValue, onBlur: (event) => {
     field.onBlur();
     onBlur?.(event);
   }, onChange: (newValue) => {
-    field.onChange(newValue);
-    onChange?.(newValue);
+    if (options) {
+      const processedValue = !Array.isArray(newValue) ? options[newValue].value : newValue.map((val) => val ? options[val].value : options[0].value);
+      field.onChange(processedValue);
+      onChange?.(processedValue);
+    } else {
+      field.onChange(newValue);
+      onChange?.(newValue);
+    }
   }, max, min, error: getError({
     label: label ?? "",
     max,
     min
-  }, error), label, required, ...props });
+  }, error), label, required, options, ...props });
 };
 export {
   SliderField

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -58,7 +58,7 @@
     "react-hook-form": "7.52.1"
   },
   "devDependencies": {
-    "@babel/core": "7.24.7",
+    "@babel/core": "7.24.9",
     "@types/final-form-focus": "1.1.7",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
@@ -67,12 +67,12 @@
     "@utils/test": "0.0.1"
   },
   "dependencies": {
-    "@babel/runtime": "7.24.7",
+    "@babel/runtime": "7.24.8",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
     "react-hook-form": "7.52.1",
-    "@ultraviolet/ui": "1.61.1",
+    "@ultraviolet/ui": "1.63.0",
     "@ultraviolet/themes": "1.12.2"
   },
   "scripts": {