@ultraviolet/form 3.3.1 → 3.4.0

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.1",
+  "version": "3.4.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -72,7 +72,7 @@
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
     "react-hook-form": "7.52.1",
-    "@ultraviolet/ui": "1.62.0",
+    "@ultraviolet/ui": "1.63.0",
     "@ultraviolet/themes": "1.12.2"
   },
   "scripts": {