@ultraviolet/form 3.1.1 → 3.3.0

package/dist/components/SliderField/index.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const ui = require("@ultraviolet/ui");
+const reactHookForm = require("react-hook-form");
+const index = require("../../providers/ErrorContext/index.cjs");
+const SliderField = ({
+  name,
+  control,
+  shouldUnregister,
+  max,
+  min,
+  required,
+  validate,
+  onBlur,
+  onChange,
+  label,
+  value,
+  defaultValue,
+  ...props
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    control,
+    shouldUnregister,
+    rules: {
+      max,
+      min,
+      required,
+      validate
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Slider, { name: field.name, value: field.value, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, max, min, error: getError({
+    label: label ?? "",
+    max,
+    min
+  }, error), label, required, ...props });
+};
+exports.SliderField = SliderField;

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

@@ -0,0 +1,9 @@
+import { Slider } from '@ultraviolet/ui';
+import type { ComponentProps, 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 {};

package/dist/components/SliderField/index.js

@@ -0,0 +1,53 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Slider } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const SliderField = ({
+  name,
+  control,
+  shouldUnregister,
+  max,
+  min,
+  required,
+  validate,
+  onBlur,
+  onChange,
+  label,
+  value,
+  defaultValue,
+  ...props
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    control,
+    shouldUnregister,
+    rules: {
+      max,
+      min,
+      required,
+      validate
+    }
+  });
+  return /* @__PURE__ */ jsx(Slider, { name: field.name, value: field.value, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, max, min, error: getError({
+    label: label ?? "",
+    max,
+    min
+  }, error), label, required, ...props });
+};
+export {
+  SliderField
+};

package/dist/components/TagInputField/index.cjs

@@ -3,8 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ui = require("@ultraviolet/ui");
 const reactHookForm = require("react-hook-form");
+const validateRegex = require("../../utils/validateRegex.cjs");
 const index = require("../../providers/ErrorContext/index.cjs");
 const TagInputField = ({
+  regex: regexes,
   className,
   disabled,
   id,
@@ -39,13 +41,19 @@ const TagInputField = ({
     rules: {
       required,
       shouldUnregister,
-      validate
+      validate: {
+        ...regexes ? {
+          pattern: (value) => validateRegex.validateRegex(value, regexes)
+        } : {},
+        ...validate
+      }
     }
   });
   return /* @__PURE__ */ jsxRuntime.jsx(ui.TagInput, { name: field.name, className, disabled, id, onChange: (newTags) => {
     field.onChange(newTags);
     onChange?.(newTags);
   }, placeholder, variant, value: field.value, "data-testid": dataTestId, clearable, label, labelDescription, size, success, error: getError({
+    regex: regexes,
     label: label ?? ""
   }, error), readOnly, tooltip });
 };

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

@@ -2,5 +2,7 @@ import { TagInput } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-export type TagInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof TagInput>, 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid' | 'clearable' | 'label' | 'labelDescription' | 'size' | 'success' | 'readOnly' | 'tooltip'>>;
-export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, disabled, id, control, name, onChange, placeholder, required, variant, shouldUnregister, "data-testid": dataTestId, clearable, label, labelDescription, size, success, readOnly, tooltip, validate, }: TagInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type TagInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Partial<Pick<ComponentProps<typeof TagInput>, 'variant' | 'placeholder' | 'disabled' | 'className' | 'id' | 'data-testid' | 'clearable' | 'label' | 'labelDescription' | 'size' | 'success' | 'readOnly' | 'tooltip'>> & {
+    regex?: (RegExp | RegExp[])[];
+};
+export declare const TagInputField: <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ regex: regexes, className, disabled, id, control, name, onChange, placeholder, required, variant, shouldUnregister, "data-testid": dataTestId, clearable, label, labelDescription, size, success, readOnly, tooltip, validate, }: TagInputFieldProps<TFieldValues, TFieldName>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/TagInputField/index.js

@@ -1,8 +1,10 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { TagInput } from "@ultraviolet/ui";
 import { useController } from "react-hook-form";
+import { validateRegex } from "../../utils/validateRegex.js";
 import { useErrors } from "../../providers/ErrorContext/index.js";
 const TagInputField = ({
+  regex: regexes,
   className,
   disabled,
   id,
@@ -37,13 +39,19 @@ const TagInputField = ({
     rules: {
       required,
       shouldUnregister,
-      validate
+      validate: {
+        ...regexes ? {
+          pattern: (value) => validateRegex(value, regexes)
+        } : {},
+        ...validate
+      }
     }
   });
   return /* @__PURE__ */ jsx(TagInput, { name: field.name, className, disabled, id, onChange: (newTags) => {
     field.onChange(newTags);
     onChange?.(newTags);
   }, placeholder, variant, value: field.value, "data-testid": dataTestId, clearable, label, labelDescription, size, success, error: getError({
+    regex: regexes,
     label: label ?? ""
   }, error), readOnly, tooltip });
 };

package/dist/components/TextInputFieldV2/index.cjs

@@ -82,6 +82,6 @@ const TextInputField = ({
     onChange?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic });
+  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value === void 0 ? "" : field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic });
 };
 exports.TextInputField = TextInputField;

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

@@ -2,7 +2,7 @@ import { TextInputV2 } from '@ultraviolet/ui';
 import type { ComponentProps } from 'react';
 import type { FieldPath, FieldValues } from 'react-hook-form';
 import type { BaseFieldProps } from '../../types';
-type TextInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof TextInputV2>, 'value' | 'error' | 'name' | 'onChange'> & {
+type TextInputFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TFieldName> & Omit<ComponentProps<typeof TextInputV2>, 'value' | 'error' | 'name'> & {
     regex?: (RegExp | RegExp[])[];
 };
 /**

package/dist/components/TextInputFieldV2/index.js

@@ -80,7 +80,7 @@ const TextInputField = ({
     onChange?.(event);
   }, onFocus: (event) => {
     onFocus?.(event);
-  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic });
+  }, placeholder, readOnly, required, success, tabIndex, tooltip, type, value: field.value === void 0 ? "" : field.value, id, prefix, suffix, size, onRandomize, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, autoComplete, role, "aria-live": ariaLive, "aria-atomic": ariaAtomic });
 };
 export {
   TextInputField

package/dist/components/index.d.ts

@@ -20,3 +20,4 @@ export { KeyValueField } from './KeyValueField';
 export { SelectableCardGroupField } from './SelectableCardGroupField';
 export { SelectInputFieldV2 } from './SelectInputFieldV2';
 export { UnitInputField } from './UnitInputField';
+export { SliderField } from './SliderField';

package/dist/index.cjs

@@ -25,6 +25,7 @@ const index$j = require("./components/KeyValueField/index.cjs");
 const index$k = require("./components/SelectableCardGroupField/index.cjs");
 const index$l = require("./components/SelectInputFieldV2/index.cjs");
 const index$m = require("./components/UnitInputField/index.cjs");
+const index$n = require("./components/SliderField/index.cjs");
 exports.ErrorProvider = index.ErrorProvider;
 exports.useErrors = index.useErrors;
 Object.defineProperty(exports, "useController", {
@@ -74,3 +75,4 @@ exports.KeyValueField = index$j.KeyValueField;
 exports.SelectableCardGroupField = index$k.SelectableCardGroupField;
 exports.SelectInputFieldV2 = index$l.SelectInputFieldV2;
 exports.UnitInputField = index$m.UnitInputField;
+exports.SliderField = index$n.SliderField;

package/dist/index.js

@@ -23,6 +23,7 @@ import { KeyValueField } from "./components/KeyValueField/index.js";
 import { SelectableCardGroupField } from "./components/SelectableCardGroupField/index.js";
 import { SelectInputFieldV2 } from "./components/SelectInputFieldV2/index.js";
 import { UnitInputField } from "./components/UnitInputField/index.js";
+import { SliderField } from "./components/SliderField/index.js";
 export {
   CheckboxField,
   CheckboxGroupField,
@@ -38,6 +39,7 @@ export {
   SelectInputFieldV2,
   SelectableCardField,
   SelectableCardGroupField,
+  SliderField,
   Submit,
   SubmitErrorAlert,
   TagInputField,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "3.1.1",
+  "version": "3.3.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -72,14 +72,14 @@
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
     "react-hook-form": "7.52.1",
-    "@ultraviolet/ui": "1.61.0",
-    "@ultraviolet/themes": "1.12.1"
+    "@ultraviolet/ui": "1.61.1",
+    "@ultraviolet/themes": "1.12.2"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",
     "build": "vite build --config vite.config.ts && pnpm run type:generate",
     "prebuild": "shx rm -rf dist",
-    "size": "pnpm run build && size-limit",
+    "size": "size-limit",
     "test:unit:coverage": "pnpm test:unit --coverage",
     "test:unit": "LC_ALL=en_US.UTF-8 pnpm vitest --run --config vite.config.ts",
     "type:generate": "tsc --declaration -p tsconfig.build.json",