@ultraviolet/form 2.13.12 → 2.14.1

package/dist/components/UnitInputField/index.cjs

@@ -0,0 +1,65 @@
+"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 UnitInputField = ({
+  id,
+  name,
+  max = Number.MAX_SAFE_INTEGER,
+  min = 0,
+  size,
+  placeholder,
+  placeholderUnit,
+  onChange,
+  onChangeUnitValue,
+  disabled,
+  options,
+  className,
+  label,
+  required,
+  width,
+  selectInputWidth,
+  helper,
+  rules,
+  shouldUnregister = false,
+  validate
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field: unitField
+  } = reactHookForm.useController({
+    name: `${name}-unit`,
+    shouldUnregister,
+    rules: {
+      required
+    }
+  });
+  const {
+    field: valueField,
+    fieldState: valueFieldState
+  } = reactHookForm.useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      min,
+      max,
+      ...rules,
+      ...validate
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.UnitInput, { id, name, required, max, min, error: getError({
+    label
+  }, valueFieldState.error), size, placeholder, helper, onChange: (event) => {
+    valueField.onChange(event);
+    onChange?.(event);
+  }, onChangeUnitValue: (event) => {
+    unitField.onChange(event);
+    onChangeUnitValue?.(event);
+  }, value: valueField.value, unitValue: unitField.value, selectInputWidth, disabled, options, label, className, width, placeholderUnit });
+};
+exports.UnitInputField = UnitInputField;

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

@@ -0,0 +1,11 @@
+import { UnitInput } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type UnitInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Pick<ComponentProps<typeof UnitInput>, 'id' | 'name' | 'className' | 'data-testid' | 'disabled' | 'value' | 'max' | 'min' | 'options' | 'placeholder' | 'placeholderUnit' | 'size' | 'unitValue' | 'required' | 'width' | 'helper' | 'selectInputWidth'> & {
+    onChange?: ComponentProps<typeof UnitInput>['onChange'];
+    onChangeUnitValue?: ComponentProps<typeof UnitInput>['onChangeUnitValue'];
+    label: string;
+};
+export declare const UnitInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ id, name, max, min, size, placeholder, placeholderUnit, onChange, onChangeUnitValue, disabled, options, className, label, required, width, selectInputWidth, helper, rules, shouldUnregister, validate, }: UnitInputFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/UnitInputField/index.js

@@ -0,0 +1,65 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { UnitInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const UnitInputField = ({
+  id,
+  name,
+  max = Number.MAX_SAFE_INTEGER,
+  min = 0,
+  size,
+  placeholder,
+  placeholderUnit,
+  onChange,
+  onChangeUnitValue,
+  disabled,
+  options,
+  className,
+  label,
+  required,
+  width,
+  selectInputWidth,
+  helper,
+  rules,
+  shouldUnregister = false,
+  validate
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field: unitField
+  } = useController({
+    name: `${name}-unit`,
+    shouldUnregister,
+    rules: {
+      required
+    }
+  });
+  const {
+    field: valueField,
+    fieldState: valueFieldState
+  } = useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      min,
+      max,
+      ...rules,
+      ...validate
+    }
+  });
+  return /* @__PURE__ */ jsx(UnitInput, { id, name, required, max, min, error: getError({
+    label
+  }, valueFieldState.error), size, placeholder, helper, onChange: (event) => {
+    valueField.onChange(event);
+    onChange?.(event);
+  }, onChangeUnitValue: (event) => {
+    unitField.onChange(event);
+    onChangeUnitValue?.(event);
+  }, value: valueField.value, unitValue: unitField.value, selectInputWidth, disabled, options, label, className, width, placeholderUnit });
+};
+export {
+  UnitInputField
+};

package/dist/components/index.d.ts

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

package/dist/index.cjs

@@ -29,6 +29,7 @@ const index$i = require("./components/RadioGroupField/index.cjs");
 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");
 exports.FORM_ERROR = constants.FORM_ERROR;
 exports.ErrorProvider = index.ErrorProvider;
 exports.useErrors = index.useErrors;
@@ -82,3 +83,4 @@ exports.RadioGroupField = index$i.RadioGroupField;
 exports.KeyValueField = index$j.KeyValueField;
 exports.SelectableCardGroupField = index$k.SelectableCardGroupField;
 exports.SelectInputFieldV2 = index$l.SelectInputFieldV2;
+exports.UnitInputField = index$m.UnitInputField;

package/dist/index.js

@@ -27,6 +27,7 @@ import { RadioGroupField } from "./components/RadioGroupField/index.js";
 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";
 export {
   CheckboxField,
   CheckboxGroupField,
@@ -51,6 +52,7 @@ export {
   TextInputField2 as TextInputFieldV2,
   TimeField,
   ToggleField,
+  UnitInputField,
   useController,
   useErrors,
   useFieldArray,

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import type { FieldError, FieldPath, FieldValues, Path, PathValue, UseControllerProps, Validate } from 'react-hook-form';
+import type { FieldError, FieldPath, FieldPathValue, FieldValues, Path, PathValue, UseControllerProps, Validate } from 'react-hook-form';
 export type MetaField = {
     min?: number | string;
     max?: number | string;
@@ -19,10 +19,10 @@ export type FormErrors = {
 export type BaseFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = {
     name: TName;
     required?: boolean;
+    validate?: Record<string, Validate<FieldPathValue<TFieldValues, TName>, TFieldValues>>;
     /**
-     * @deprecated use rules props instead
+     * @deprecated Use individual props instead
      */
-    validate?: Validate<PathValue<TFieldValues, Path<TFieldValues>>, TFieldValues>;
     rules?: UseControllerProps<TFieldValues>['rules'];
     defaultValue?: PathValue<TFieldValues, Path<TFieldValues>>;
     label?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.13.12",
+  "version": "2.14.1",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -55,10 +55,10 @@
     "@emotion/styled": "11.11.5",
     "react": "18.x",
     "react-dom": "18.x",
-    "react-hook-form": "7.51.4"
+    "react-hook-form": "7.51.5"
   },
   "devDependencies": {
-    "@babel/core": "7.24.5",
+    "@babel/core": "7.24.6",
     "@types/final-form-focus": "1.1.7",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
@@ -67,12 +67,12 @@
     "@utils/test": "0.0.1"
   },
   "dependencies": {
-    "@babel/runtime": "7.24.5",
+    "@babel/runtime": "7.24.6",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "react-select": "5.8.0",
-    "react-hook-form": "7.51.4",
-    "@ultraviolet/ui": "1.53.4",
+    "react-hook-form": "7.51.5",
+    "@ultraviolet/ui": "1.55.0",
     "@ultraviolet/themes": "1.11.0"
   },
   "scripts": {
@@ -81,7 +81,7 @@
     "prebuild": "shx rm -rf dist",
     "size": "pnpm run build && size-limit",
     "test:unit:coverage": "pnpm test:unit --coverage",
-    "test:unit": "vitest --run --config vite.config.ts",
+    "test:unit": "LC_ALL=en_US.UTF-8 pnpm vitest --run --config vite.config.ts",
     "type:generate": "tsc --declaration -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "watch:build": "vite build --config vite.config.ts --watch",