@ultraviolet/form 3.13.22 → 3.14.0

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

@@ -12,7 +12,7 @@ export declare const RadioGroupField: {
         className?: string;
         'data-testid'?: string;
         tooltip?: string;
-    } & Required<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange">> & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "required" | "onBlur" | "disabled" | "name" | "autoFocus" | "id" | "onFocus" | "tabIndex" | "checked" | "onKeyDown"> & import("node_modules/@ultraviolet/ui/dist/types").LabelProp)) & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+    } & Required<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange">> & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "required" | "onBlur" | "disabled" | "name" | "autoFocus" | "id" | "onClick" | "onFocus" | "tabIndex" | "checked" | "onKeyDown"> & import("node_modules/@ultraviolet/ui/dist/types").LabelProp)) & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
         name?: string;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };

package/dist/components/SelectableCardOptionGroupField/index.cjs

@@ -0,0 +1,60 @@
+"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 SelectableCardOptionGroupField = ({
+  className,
+  legend,
+  control,
+  name,
+  onChange,
+  onChangeOption,
+  required = false,
+  children,
+  label = "",
+  error: customError,
+  helper,
+  columns,
+  shouldUnregister = false,
+  validate
+}) => {
+  const {
+    getError
+  } = index.useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = reactHookForm.useController({
+    name,
+    control,
+    shouldUnregister,
+    rules: {
+      required,
+      validate
+    }
+  });
+  const {
+    field: optionField
+  } = reactHookForm.useController({
+    name: `${name}-option`,
+    shouldUnregister,
+    rules: {
+      required
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.SelectableCardOptionGroup, { legend, name, value: field.value, optionValue: String(optionField.value), onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event);
+  }, onChangeOption: (value) => {
+    optionField.onChange(value);
+    onChangeOption?.(value);
+  }, error: getError({
+    label
+  }, error) ?? customError, className, columns, helper, required, children });
+};
+SelectableCardOptionGroupField.Option = ui.SelectableCardOptionGroup.Option;
+exports.SelectableCardOptionGroupField = SelectableCardOptionGroupField;

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

@@ -0,0 +1,19 @@
+import { SelectableCardOptionGroup } from '@ultraviolet/ui';
+import type { ComponentProps, JSX } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type SelectableCardOptionGroupFieldProps<TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues>> = ComponentProps<typeof SelectableCardOptionGroup> & BaseFieldProps<TFieldValues, TFieldName> & Omit<BaseFieldProps<TFieldValues, TFieldName>, 'label'>;
+export declare const SelectableCardOptionGroupField: {
+    <TFieldValues extends FieldValues, TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, control, name, onChange, onChangeOption, required, children, label, error: customError, helper, columns, shouldUnregister, validate, }: SelectableCardOptionGroupFieldProps<TFieldValues, TFieldName>): JSX.Element;
+    Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, image, disabled, id, }: Omit<import("node_modules/@ultraviolet/ui/dist/components/SelectableCard").SelectableCardProps & import("react").RefAttributes<HTMLDivElement>, "onChange"> & {
+        value: string;
+        className?: string;
+        children?: import("react").ReactNode;
+        options: ComponentProps<typeof import("@ultraviolet/ui").SelectInputV2>["options"];
+        optionValue?: ComponentProps<typeof import("@ultraviolet/ui").SelectInputV2>["value"];
+        image?: import("react").ReactNode;
+        labelDescription?: ComponentProps<typeof import("@ultraviolet/ui").Label>["labelDescription"];
+        id?: string;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/SelectableCardOptionGroupField/index.js

@@ -0,0 +1,60 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { SelectableCardOptionGroup } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const SelectableCardOptionGroupField = ({
+  className,
+  legend,
+  control,
+  name,
+  onChange,
+  onChangeOption,
+  required = false,
+  children,
+  label = "",
+  error: customError,
+  helper,
+  columns,
+  shouldUnregister = false,
+  validate
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    control,
+    shouldUnregister,
+    rules: {
+      required,
+      validate
+    }
+  });
+  const {
+    field: optionField
+  } = useController({
+    name: `${name}-option`,
+    shouldUnregister,
+    rules: {
+      required
+    }
+  });
+  return /* @__PURE__ */ jsx(SelectableCardOptionGroup, { legend, name, value: field.value, optionValue: String(optionField.value), onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event);
+  }, onChangeOption: (value) => {
+    optionField.onChange(value);
+    onChangeOption?.(value);
+  }, error: getError({
+    label
+  }, error) ?? customError, className, columns, helper, required, children });
+};
+SelectableCardOptionGroupField.Option = SelectableCardOptionGroup.Option;
+export {
+  SelectableCardOptionGroupField
+};

package/dist/components/index.d.ts

@@ -24,3 +24,4 @@ export { UnitInputField } from './UnitInputField';
 export { SliderField } from './SliderField';
 export { SwitchButtonField } from './SwitchButtonField';
 export { VerificationCodeField } from './VerificationCodeField';
+export { SelectableCardOptionGroupField } from './SelectableCardOptionGroupField';

package/dist/index.cjs

@@ -29,6 +29,7 @@ const index$n = require("./components/UnitInputField/index.cjs");
 const index$o = require("./components/SliderField/index.cjs");
 const index$p = require("./components/SwitchButtonField/index.cjs");
 const index$q = require("./components/VerificationCodeField/index.cjs");
+const index$r = require("./components/SelectableCardOptionGroupField/index.cjs");
 exports.ErrorProvider = index.ErrorProvider;
 exports.useErrors = index.useErrors;
 Object.defineProperty(exports, "useController", {
@@ -82,3 +83,4 @@ exports.UnitInputField = index$n.UnitInputField;
 exports.SliderField = index$o.SliderField;
 exports.SwitchButtonField = index$p.SwitchButtonField;
 exports.VerificationCodeField = index$q.VerificationCodeField;
+exports.SelectableCardOptionGroupField = index$r.SelectableCardOptionGroupField;

package/dist/index.js

@@ -27,6 +27,7 @@ import { UnitInputField } from "./components/UnitInputField/index.js";
 import { SliderField } from "./components/SliderField/index.js";
 import { SwitchButtonField } from "./components/SwitchButtonField/index.js";
 import { VerificationCodeField } from "./components/VerificationCodeField/index.js";
+import { SelectableCardOptionGroupField } from "./components/SelectableCardOptionGroupField/index.js";
 export {
   CheckboxField,
   CheckboxGroupField,
@@ -42,6 +43,7 @@ export {
   SelectInputFieldV2,
   SelectableCardField,
   SelectableCardGroupField,
+  SelectableCardOptionGroupField,
   SliderField,
   Submit,
   SubmitErrorAlert,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "3.13.22",
+  "version": "3.14.0",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -70,9 +70,9 @@
   "dependencies": {
     "@babel/runtime": "7.26.9",
     "react-hook-form": "7.54.2",
-    "react-select": "5.8.3",
+    "react-select": "5.10.0",
     "@ultraviolet/themes": "1.16.0",
-    "@ultraviolet/ui": "1.88.0"
+    "@ultraviolet/ui": "1.89.0"
   },
   "scripts": {
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",