@ultraviolet/form 2.8.2 → 2.8.4

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/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';
@@ -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.2",
+  "version": "2.8.4",
   "description": "Ultraviolet Form",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -36,7 +36,7 @@
     "@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.24.0",
@@ -52,8 +52,8 @@
     "@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.1"
+    "react-hook-form": "7.51.0",
+    "@ultraviolet/ui": "1.41.1"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",