@ultraviolet/form 2.8.1 → 2.8.3

package/dist/components/SelectableCardGroupField/index.js

@@ -0,0 +1,69 @@
+import { SelectableCardGroup } from '@ultraviolet/ui';
+import { useController } from 'react-hook-form';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { useErrors } from '../../providers/ErrorContext/index.js';
+
+const SelectableCardGroupField = ({
+  className,
+  legend,
+  name,
+  onChange,
+  required = false,
+  rules,
+  children,
+  label = '',
+  error: customError,
+  helper,
+  columns = 1,
+  showTick,
+  type = 'radio',
+  shouldUnregister = false
+}) => {
+  const {
+    getError
+  } = useErrors();
+  const {
+    field,
+    fieldState: {
+      error
+    }
+  } = useController({
+    name,
+    shouldUnregister,
+    rules: {
+      required,
+      ...rules
+    }
+  });
+  return jsx(SelectableCardGroup, {
+    legend: legend,
+    name: name,
+    type: type,
+    showTick: showTick,
+    value: field.value,
+    onChange: event => {
+      if (type === 'checkbox') {
+        const fieldValue = field.value ?? [];
+        if (fieldValue?.includes(event.currentTarget.value)) {
+          field.onChange(fieldValue?.filter(currentValue => currentValue !== event.currentTarget.value));
+        } else {
+          field.onChange([...fieldValue, event.currentTarget.value]);
+        }
+      } else {
+        field.onChange(event);
+      }
+      onChange?.(event);
+    },
+    error: getError({
+      label
+    }, error) ?? customError,
+    className: className,
+    columns: columns,
+    helper: helper,
+    required: required,
+    children: children
+  });
+};
+SelectableCardGroupField.Card = SelectableCardGroup.Card;
+
+export { SelectableCardGroupField };

package/dist/components/TextInputFieldV2/index.js

@@ -7,30 +7,38 @@ import { useErrors } from '../../providers/ErrorContext/index.js';
  * This component offers a form field based on Ultraviolet UI TextInputV2 component
  */
 const TextInputField = ({
-  autoFocus,
-  clearable,
+  validate,
+  regex: regexes,
+  id,
   className,
   tabIndex,
-  'data-testid': dataTestId,
-  disabled,
+  onChange,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  success,
   helper,
+  tooltip,
   label,
+  autoFocus,
+  required = false,
+  'data-testid': dataTestId,
+  name,
+  onFocus,
+  onBlur,
+  clearable = false,
   labelDescription,
+  type = 'text',
+  prefix,
+  suffix,
+  size = 'large',
   loading,
-  onChange,
+  onRandomize,
   minLength,
   maxLength,
-  name,
-  onFocus,
-  onBlur,
-  placeholder,
-  readOnly,
-  required,
-  success,
-  tooltip,
-  type,
-  validate,
-  regex: regexes
+  'aria-labelledby': ariaLabelledBy,
+  'aria-label': ariaLabel,
+  autoComplete
 }) => {
   const {
     getError
@@ -92,7 +100,15 @@ const TextInputField = ({
     tabIndex: tabIndex,
     tooltip: tooltip,
     type: type,
-    value: field.value
+    value: field.value,
+    id: id,
+    prefix: prefix,
+    suffix: suffix,
+    size: size,
+    onRandomize: onRandomize,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    autoComplete: autoComplete
   });
 };
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { Checkbox, CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard, NumberInput, NumberInputV2, TagInput, TextArea, TextInput, TextInputV2, TimeInput, Toggle, Button, RadioGroup } from '@ultraviolet/ui';
+import { Checkbox, CheckboxGroup, DateInput, Radio, SelectInput, SelectableCard, NumberInput, NumberInputV2, TagInput, TextArea, TextInput, TextInputV2, TimeInput, Toggle, Button, RadioGroup, SelectableCardGroup } from '@ultraviolet/ui';
 import * as react from 'react';
 import { ComponentProps, ReactNode, FocusEvent, ForwardedRef, FocusEventHandler, Ref, JSX } from 'react';
 import * as react_hook_form from 'react-hook-form';
@@ -301,7 +301,7 @@ type TextInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPa
 /**
  * This component offers a form field based on Ultraviolet UI TextInputV2 component
  */
-declare const TextInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ autoFocus, clearable, className, tabIndex, "data-testid": dataTestId, disabled, helper, label, labelDescription, loading, onChange, minLength, maxLength, name, onFocus, onBlur, placeholder, readOnly, required, success, tooltip, type, validate, regex: regexes, }: TextInputFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
+declare const TextInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ validate, regex: regexes, id, className, tabIndex, onChange, placeholder, disabled, readOnly, success, helper, tooltip, label, autoFocus, required, "data-testid": dataTestId, name, onFocus, onBlur, clearable, labelDescription, type, prefix, suffix, size, loading, onRandomize, minLength, maxLength, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, autoComplete, }: TextInputFieldProps<TFieldValues, TName>) => _emotion_react_jsx_runtime.JSX.Element;
 
 type TimeFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<ComponentProps<typeof TimeInput>, 'onChange'> & {
     name: string;
@@ -382,6 +382,44 @@ type KeyValueFieldProps<TFieldValues extends FieldValues, TFieldArrayName extend
  */
 declare const KeyValueField: <TFieldValues extends FieldValues = FieldValues, TFieldArrayName extends FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>>({ name, inputKey, inputValue, addButton, maxSize, readonly, control, }: KeyValueFieldProps<TFieldValues, TFieldArrayName>) => _emotion_react_jsx_runtime.JSX.Element;
 
+type SelectableCardGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Omit<BaseFieldProps<TFieldValues, TName>, 'label' | 'onChange'> & Partial<Pick<ComponentProps<typeof SelectableCardGroup>, 'helper' | 'error' | 'columns' | 'children' | 'showTick' | 'type' | 'className' | 'onChange'>> & Pick<ComponentProps<typeof SelectableCardGroup>, 'legend'>;
+declare const SelectableCardGroupField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, columns, showTick, type, shouldUnregister, }: SelectableCardGroupFieldProps<TFieldValues, TName>): JSX.Element;
+    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, "data-testid": dataTestId, }: {
+        value: string | number;
+        onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        disabled?: boolean | undefined;
+        children?: react.ReactNode | (({ disabled, checked, }: Pick<{
+            name?: string | undefined;
+            children?: react.ReactNode | any;
+            value: string | number;
+            onChange: react.ChangeEventHandler<HTMLInputElement>;
+            showTick?: boolean | undefined;
+            type?: "checkbox" | "radio" | undefined;
+            disabled?: boolean | undefined;
+            checked?: boolean | undefined;
+            className?: string | undefined;
+            isError?: boolean | undefined;
+            onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
+            onBlur?: react.FocusEventHandler<HTMLInputElement> | undefined;
+            id?: string | undefined;
+            tooltip?: string | undefined;
+            label?: react.ReactNode;
+            'data-testid'?: string | undefined;
+        }, "disabled" | "checked">) => react.ReactNode);
+        className?: string | undefined;
+        ref?: react.LegacyRef<HTMLDivElement> | undefined;
+        name?: string | undefined;
+        label?: react.ReactNode;
+        onFocus?: react.FocusEventHandler<HTMLInputElement> | undefined;
+        id?: string | undefined;
+        'data-testid'?: string | undefined;
+        tooltip?: string | undefined;
+        key?: react.Key | null | undefined;
+        isError?: boolean | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element;
+};
+
 type ErrorContextValue = {
     errors: RequiredErrors;
     getError: (meta: MetaField, error?: FieldError) => string | undefined;
@@ -508,4 +546,4 @@ declare const useFieldArrayDeprecated: <T, TFieldValues extends FieldValues = Fi
     };
 };
 
-export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, FORM_ERROR, Form, type FormErrors, type FormProps, KeyValueField, NumberInputField, NumberInputFieldV2, RadioField, RadioGroupField, SelectInputField, SelectableCardField, Submit, SubmitErrorAlert, TagInputField, TextAreaField, TextInputField$1 as TextInputField, TextInputField as TextInputFieldV2, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };
+export { type BaseFieldProps, CheckboxField, CheckboxGroupField, DateField, ErrorProvider, FORM_ERROR, Form, type FormErrors, type FormProps, KeyValueField, NumberInputField, NumberInputFieldV2, RadioField, RadioGroupField, SelectInputField, SelectableCardField, SelectableCardGroupField, Submit, SubmitErrorAlert, TagInputField, TextAreaField, TextInputField$1 as TextInputField, TextInputField as TextInputFieldV2, TimeField, ToggleField, useErrors, useFieldArrayDeprecated, useFieldDeprecated, useFormDeprecated, useFormStateDeprecated, useOnFieldChange };

package/dist/index.js

@@ -25,3 +25,4 @@ export { ToggleField } from './components/ToggleField/index.js';
 export { Submit } from './components/Submit/index.js';
 export { RadioGroupField } from './components/RadioGroupField/index.js';
 export { KeyValueField } from './components/KeyValueField/index.js';
+export { SelectableCardGroupField } from './components/SelectableCardGroupField/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/form",
-  "version": "2.8.1",
+  "version": "2.8.3",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -36,24 +36,24 @@
     "@emotion/styled": "11.11.0",
     "react": "18.x",
     "react-dom": "18.x",
-    "react-hook-form": "7.50.1"
+    "react-hook-form": "7.51.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.9",
+    "@babel/core": "7.24.0",
     "@types/final-form-focus": "1.1.7",
-    "@types/react": "18.2.55",
+    "@types/react": "18.2.61",
     "@types/react-dom": "18.2.19",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "dependencies": {
-    "@babel/runtime": "7.23.9",
+    "@babel/runtime": "7.24.0",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.0",
     "react-select": "5.8.0",
-    "react-hook-form": "7.50.1",
-    "@ultraviolet/ui": "1.40.0"
+    "react-hook-form": "7.51.0",
+    "@ultraviolet/ui": "1.41.0"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",