@digigov/form 2.0.0-13876dba → 2.0.0-16fbe090

package/inputs/OtpInput/index.js

@@ -1,147 +1,123 @@
-import React, { useState, useCallback } from "react";
-import SingleCharacterInputs, {
-  SingleCharacterInput
-} from "@digigov/ui/form/SingleCharacterInputs";
+import react, { useCallback, useState } from "react";
+import SingleCharacterInputs, { SingleCharacterInput } from "@digigov/ui/form/SingleCharacterInputs/index.js";
 const RE_DIGIT = new RegExp(/^\d+$/);
 const REMOVE_SPACES = new RegExp(/\s+/g);
 function useOtp(onChange, maxLength) {
-  const [otpValues, setOtpValues] = useState(Array(maxLength).fill(""));
-  const handleChange = useCallback(
-    (otp) => {
-      setOtpValues(otp);
-      const otpValue = otp.join("");
-      onChange(otpValue);
-    },
-    [onChange]
-  );
-  const setOtp = (item, idx) => {
-    const updatedOTPValues = [...otpValues];
-    if (item.length === 1 || item.length === 0) {
-      updatedOTPValues[idx] = item[0] || "";
-      handleChange(updatedOTPValues);
-    } else if (item.length === maxLength) {
-      const valueArray = item.split("").slice(0, maxLength);
-      handleChange(valueArray);
-    }
-  };
-  const setSelectionRange = useCallback((target) => {
-    return target.setSelectionRange(0, target.value.length);
-  }, []);
-  const focusToNextInput = useCallback((target) => {
-    const nextElement = target.nextElementSibling;
-    if (nextElement) {
-      nextElement.focus();
-    }
-  }, []);
-  const focusToPrevInput = useCallback((target) => {
-    const previousElement = target.previousElementSibling;
-    if (previousElement) {
-      previousElement.focus();
-    }
-  }, []);
-  const handleKeyDown = useCallback(
-    (e, idx) => {
-      const { key } = e;
-      const target = e.target;
-      let targetValue = target.value;
-      setSelectionRange(target);
-      if (key === "ArrowRight" || key === "ArrowDown") {
-        e.preventDefault();
-        return focusToNextInput(target);
-      }
-      if (key === "ArrowLeft" || key === "ArrowUp") {
-        e.preventDefault();
-        return focusToPrevInput(target);
-      }
-      if (e.key === "Backspace" || e.key === "Delete") {
-        if (targetValue !== "") {
-          targetValue = "";
-        } else {
-          focusToPrevInput(target);
+    const [otpValues, setOtpValues] = useState(Array(maxLength).fill(''));
+    const handleChange = useCallback((otp)=>{
+        setOtpValues(otp);
+        const otpValue = otp.join('');
+        onChange(otpValue);
+    }, [
+        onChange
+    ]);
+    const setOtp = (item, idx)=>{
+        const updatedOTPValues = [
+            ...otpValues
+        ];
+        if (1 === item.length || 0 === item.length) {
+            updatedOTPValues[idx] = item[0] || '';
+            handleChange(updatedOTPValues);
+        } else if (item.length === maxLength) {
+            const valueArray = item.split('').slice(0, maxLength);
+            handleChange(valueArray);
         }
-        setOtp(targetValue, idx);
-        return e.preventDefault();
-      }
-    },
-    [setOtp, focusToPrevInput, focusToNextInput]
-  );
-  const handleFocus = useCallback(
-    (e) => {
-      const { target } = e;
-      setSelectionRange(target);
-    },
-    [setSelectionRange]
-  );
-  const handleOtpChange = useCallback(
-    (e, idx) => {
-      const target = e.target;
-      const targetValue = target.value;
-      const isTargetValueDigit = RE_DIGIT.test(targetValue);
-      if (isTargetValueDigit || targetValue === "") {
-        setOtp(targetValue, idx);
-        if (target.value.length > 1) {
-          target.blur();
+    };
+    const setSelectionRange = useCallback((target)=>target.setSelectionRange(0, target.value.length), []);
+    const focusToNextInput = useCallback((target)=>{
+        const nextElement = target.nextElementSibling;
+        if (nextElement) nextElement.focus();
+    }, []);
+    const focusToPrevInput = useCallback((target)=>{
+        const previousElement = target.previousElementSibling;
+        if (previousElement) previousElement.focus();
+    }, []);
+    const handleKeyDown = useCallback((e, idx)=>{
+        const { key } = e;
+        const target = e.target;
+        let targetValue = target.value;
+        setSelectionRange(target);
+        if ('ArrowRight' === key || 'ArrowDown' === key) {
+            e.preventDefault();
+            return focusToNextInput(target);
         }
-        focusToNextInput(target);
-      }
-    },
-    [setOtp, handleKeyDown, handleFocus]
-  );
-  const handlePaste = useCallback(
-    (e) => {
-      e.preventDefault();
-      const pastedData = e.clipboardData.getData("text/plain").replace(REMOVE_SPACES, "");
-      if (pastedData) {
-        setOtp(pastedData, 0);
-      }
-    },
-    []
-  );
-  return {
-    otpValues,
-    handleOtpChange,
-    handleKeyDown,
-    handleFocus,
-    handlePaste
-  };
-}
-const SingleCharacterInputPart = ({ ...props }) => {
-  return /* @__PURE__ */ React.createElement(SingleCharacterInput, { ...props });
-};
-const OtpInput = ({ name, maxLength = 6, ...props }) => {
-  const otp = useOtp(props.onChange, maxLength);
-  return /* @__PURE__ */ React.createElement(SingleCharacterInputs, null, otp.otpValues.map((digit, idx) => /* @__PURE__ */ React.createElement(
-    SingleCharacterInputPart,
-    {
-      name: `${name}-${idx}`,
-      id: `${name}-${idx}`,
-      type: "text",
-      key: idx,
-      autoComplete: "one-time-code",
-      pattern: "\\d{1}",
-      maxLength,
-      value: digit,
-      disabled: props.disabled,
-      "aria-required": props["aria-required"],
-      onChange: (e) => otp.handleOtpChange(e, idx),
-      onInput: (e) => {
-        if (e.target.value === digit) {
-          otp.handleOtpChange(e, idx);
+        if ('ArrowLeft' === key || 'ArrowUp' === key) {
+            e.preventDefault();
+            return focusToPrevInput(target);
+        }
+        if ('Backspace' === e.key || 'Delete' === e.key) {
+            if ('' !== targetValue) targetValue = '';
+            else focusToPrevInput(target);
+            setOtp(targetValue, idx);
+            return e.preventDefault();
         }
-      },
-      onKeyDown: (e) => otp.handleKeyDown(e, idx),
-      onFocus: otp.handleFocus,
-      onPaste: otp.handlePaste,
-      error: !digit ? props.error : false
-    }
-  )));
-};
-var OtpInput_default = OtpInput;
-export {
-  OtpInput,
-  REMOVE_SPACES,
-  RE_DIGIT,
-  OtpInput_default as default,
-  useOtp
-};
-//# sourceMappingURL=index.js.map
+    }, [
+        setOtp,
+        focusToPrevInput,
+        focusToNextInput
+    ]);
+    const handleFocus = useCallback((e)=>{
+        const { target } = e;
+        setSelectionRange(target);
+    }, [
+        setSelectionRange
+    ]);
+    const handleOtpChange = useCallback((e, idx)=>{
+        const target = e.target;
+        const targetValue = target.value;
+        const isTargetValueDigit = RE_DIGIT.test(targetValue);
+        if (isTargetValueDigit || '' === targetValue) {
+            setOtp(targetValue, idx);
+            if (target.value.length > 1) target.blur();
+            focusToNextInput(target);
+        }
+    }, [
+        setOtp,
+        handleKeyDown,
+        handleFocus
+    ]);
+    const handlePaste = useCallback((e)=>{
+        e.preventDefault();
+        const pastedData = e.clipboardData.getData('text/plain').replace(REMOVE_SPACES, '');
+        if (pastedData) setOtp(pastedData, 0);
+    }, []);
+    return {
+        otpValues,
+        handleOtpChange,
+        handleKeyDown,
+        handleFocus,
+        handlePaste
+    };
+}
+const SingleCharacterInputPart = /*#__PURE__*/ react.forwardRef(({ ...props }, ref)=>/*#__PURE__*/ react.createElement(SingleCharacterInput, {
+        ...props,
+        ref: ref
+    }));
+SingleCharacterInputPart.displayName = 'SingleCharacterInputPart';
+const OtpInput_OtpInput = /*#__PURE__*/ react.forwardRef(({ name, maxLength = 6, ...props }, ref)=>{
+    const otp = useOtp(props.onChange, maxLength);
+    return /*#__PURE__*/ react.createElement(SingleCharacterInputs, null, otp.otpValues.map((digit, idx)=>/*#__PURE__*/ react.createElement(SingleCharacterInputPart, {
+            ref: 0 === idx ? ref : null,
+            name: `${name}-${idx}`,
+            id: `${name}-${idx}`,
+            type: "text",
+            key: idx,
+            autoComplete: "one-time-code",
+            pattern: "\\d{1}",
+            maxLength: maxLength,
+            value: digit,
+            disabled: props.disabled,
+            "aria-required": props['aria-required'],
+            onChange: (e)=>otp.handleOtpChange(e, idx),
+            onInput: (e)=>{
+                if (e.target.value === digit) otp.handleOtpChange(e, idx);
+            },
+            onKeyDown: (e)=>otp.handleKeyDown(e, idx),
+            onFocus: otp.handleFocus,
+            onPaste: otp.handlePaste,
+            error: digit ? false : props.error
+        })));
+});
+OtpInput_OtpInput.displayName = 'OtpInput';
+const OtpInput = OtpInput_OtpInput;
+export { OtpInput_OtpInput as OtpInput, REMOVE_SPACES, RE_DIGIT, OtpInput as default, useOtp };

package/inputs/Radio/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+import type { FieldOptionProps } from '../Label/index.js';
 export interface RadioButtonsGroupProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra: {
         className?: string;
@@ -8,10 +9,11 @@ export interface RadioButtonsGroupProps extends Omit<UncontrolledFieldProps, 'ex
         dense?: boolean;
     };
     fieldComponent?: React.FC<Omit<UncontrolledFieldProps, 'register'>>;
+    resetField: UseFormReturn['resetField'];
 }
 export declare const RadioButtonsGroup: React.FC<RadioButtonsGroupProps>;
-export declare const ControlledRadioButtonsGroup: React.FC<RadioButtonsGroupProps & {
+export declare const ControlledRadioButtonsGroup: React.ForwardRefExoticComponent<RadioButtonsGroupProps & {
     onChange: (e: any) => void;
     value: any;
-}>;
+} & React.RefAttributes<HTMLInputElement>>;
 export default RadioButtonsGroup;

package/inputs/Radio/index.js

@@ -1,104 +1,73 @@
-import React from "react";
+import react from "react";
 import { useWatch } from "react-hook-form";
-import {
-  RadioContainer,
-  RadioItem,
-  RadioConditional
-} from "@digigov/ui/form/RadioContainer";
-import { useTranslation } from "@digigov/ui/i18n";
-import { Hint } from "@digigov/ui/typography/Hint";
-import { Base } from "@digigov/ui/utils/Base";
-const RadioButtonsGroup = ({
-  name,
-  control,
-  register,
-  extra: { options, className },
-  disabled,
-  Field,
-  ...props
-}) => {
-  const currentValue = useWatch({ control, name });
-  const { t } = useTranslation();
-  return /* @__PURE__ */ React.createElement(RadioContainer, { className, id: name }, options.map(
-    ({
-      label,
-      value: v,
-      show,
-      disabled: optionDisabled,
-      selected,
-      ...option
-    }) => /* @__PURE__ */ React.createElement(Base, { as: "div", key: `${name}.${v}` }, /* @__PURE__ */ React.createElement(
-      RadioItem,
-      {
-        ...register(name),
-        id: `${name}.${v}`,
-        value: v,
-        disabled: disabled || optionDisabled,
-        ...option,
-        ...{
-          ...props,
-          reset: void 0,
-          required: void 0,
-          error: void 0,
-          "aria-describedby": void 0,
-          type: "radio"
-        }
-      },
-      label && label.primary && /* @__PURE__ */ React.createElement(Base, { as: "span" }, t(label.primary) || v),
-      label && label.secondary && /* @__PURE__ */ React.createElement(Hint, null, t(label.secondary))
-    ), selected && selected(), currentValue === v && show && Field && /* @__PURE__ */ React.createElement(RadioConditional, null, show.map((fieldName) => /* @__PURE__ */ React.createElement(Field, { name: fieldName, key: fieldName }))))
-  ));
+import { omit } from "../../utils.js";
+import { RadioConditional, RadioContainer, RadioItem } from "@digigov/ui/form/RadioContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+import { Base } from "@digigov/ui/utils/Base/index.js";
+const RadioButtonsGroup = ({ name, control, register, extra: { options, className }, disabled, Field, ...props })=>{
+    const currentValue = useWatch({
+        control,
+        name
+    });
+    const { t } = useTranslation();
+    return /*#__PURE__*/ react.createElement(RadioContainer, {
+        className: className,
+        id: name
+    }, options.map(({ label, value: v, show, disabled: optionDisabled, selected, ...option })=>/*#__PURE__*/ react.createElement(Base, {
+            as: "div",
+            key: `${name}.${v}`
+        }, /*#__PURE__*/ react.createElement(RadioItem, {
+            ...register(name),
+            id: `${name}.${v}`,
+            value: v,
+            disabled: disabled || optionDisabled,
+            ...option,
+            ...omit(props, [
+                'resetField'
+            ]),
+            reset: void 0,
+            required: void 0,
+            error: void 0,
+            'aria-describedby': void 0,
+            type: 'radio'
+        }, label && label.primary && /*#__PURE__*/ react.createElement(Base, {
+            as: "span"
+        }, t(label.primary) || v), label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && Field && /*#__PURE__*/ react.createElement(RadioConditional, null, show.map((fieldName)=>/*#__PURE__*/ react.createElement(Field, {
+                name: fieldName,
+                key: fieldName
+            }))))));
 };
-const ControlledRadioButtonsGroup = ({
-  name,
-  extra: { options, className },
-  disabled,
-  onChange,
-  value,
-  Field,
-  ...props
-}) => {
-  const currentValue = value;
-  const { t } = useTranslation();
-  return /* @__PURE__ */ React.createElement(RadioContainer, { className, id: name }, options.map(
-    ({
-      label,
-      value: v,
-      show,
-      disabled: optionDisabled,
-      selected,
-      ...option
-    }) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `${name}.${v}` }, /* @__PURE__ */ React.createElement(
-      RadioItem,
-      {
-        onChange: (e) => {
-          console.log(e);
-          onChange(e);
-        },
-        id: `${name}.${v}`,
-        value: v,
-        checked: currentValue === v,
-        disabled: disabled || optionDisabled,
-        ...option,
-        ...{
-          ...props,
-          reset: void 0,
-          required: void 0,
-          error: void 0,
-          Field: void 0,
-          "aria-describedby": void 0,
-          type: "radio"
-        }
-      },
-      label && label.primary && t(label.primary) || v,
-      label && label.secondary && /* @__PURE__ */ React.createElement(Hint, null, t(label.secondary))
-    ), selected && selected(), currentValue === v && show && /* @__PURE__ */ React.createElement(RadioConditional, null, show.map((fieldName) => /* @__PURE__ */ React.createElement(Field, { name: fieldName, key: fieldName }))))
-  ));
-};
-var Radio_default = RadioButtonsGroup;
-export {
-  ControlledRadioButtonsGroup,
-  RadioButtonsGroup,
-  Radio_default as default
-};
-//# sourceMappingURL=index.js.map
+const Radio_ControlledRadioButtonsGroup = /*#__PURE__*/ react.forwardRef(function({ name, extra: { options, className }, disabled, onChange, value, Field, ...props }, ref) {
+    const currentValue = value;
+    const { t } = useTranslation();
+    return /*#__PURE__*/ react.createElement(RadioContainer, {
+        className: className,
+        id: name
+    }, options.map(({ label, value: v, show, disabled: optionDisabled, selected, ...option }, index)=>/*#__PURE__*/ react.createElement(react.Fragment, {
+            key: `${name}.${v}`
+        }, /*#__PURE__*/ react.createElement(RadioItem, {
+            ref: 0 === index ? ref : void 0,
+            onChange: (e)=>{
+                console.log(e);
+                onChange(e);
+            },
+            id: `${name}.${v}`,
+            value: v,
+            checked: currentValue === v,
+            disabled: disabled || optionDisabled,
+            ...option,
+            ...props,
+            reset: void 0,
+            required: void 0,
+            error: void 0,
+            Field: void 0,
+            'aria-describedby': void 0,
+            type: 'radio'
+        }, label && label.primary && t(label.primary) || v, label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary))), selected && selected(), currentValue === v && show && /*#__PURE__*/ react.createElement(RadioConditional, null, show.map((fieldName)=>/*#__PURE__*/ react.createElement(Field, {
+                name: fieldName,
+                key: fieldName
+            }))))));
+});
+const Radio = RadioButtonsGroup;
+export { Radio_ControlledRadioButtonsGroup as ControlledRadioButtonsGroup, RadioButtonsGroup, Radio as default };

package/inputs/Select/index.d.ts

@@ -1,11 +1,14 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
-export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra'> {
+import type { UseFormReturn } from 'react-hook-form';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
+import type { FieldOptionProps } from '../Label/index.js';
+export interface SelectProps extends Omit<UncontrolledFieldProps, 'extra' | 'Field'> {
     extra: {
         className?: string;
         options: FieldOptionProps[];
     };
+    Field?: UncontrolledFieldProps['Field'];
+    resetField: UseFormReturn['resetField'];
 }
 export declare const Select: React.ExoticComponent<SelectProps>;
 export default Select;

package/inputs/Select/index.js

@@ -1,32 +1,24 @@
-import React from "react";
-import {
-  SelectContainer,
-  SelectOption
-} from "@digigov/ui/form/SelectContainer";
-const Select = React.forwardRef(
-  function WrappedSelect({ name, extra: { options, className }, disabled, ...props }, ref) {
-    return /* @__PURE__ */ React.createElement(
-      SelectContainer,
-      {
-        className,
-        ref,
-        name,
+import react from "react";
+import { omit } from "../../utils.js";
+import { SelectContainer, SelectOption } from "@digigov/ui/form/SelectContainer/index.js";
+const Select = /*#__PURE__*/ react.forwardRef(function({ name, extra: { options, className }, disabled, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(SelectContainer, {
+        className: className,
+        ref: ref,
+        name: name,
         id: name,
-        disabled,
-        ...{
-          ...props,
-          reset: void 0,
-          required: void 0,
-          Field: void 0
-        }
-      },
-      options.map(({ value, label }) => /* @__PURE__ */ React.createElement(SelectOption, { key: value, value }, label && label.primary ? label.primary : value))
-    );
-  }
-);
-var Select_default = Select;
-export {
-  Select,
-  Select_default as default
-};
-//# sourceMappingURL=index.js.map
+        disabled: disabled,
+        ...omit(props, [
+            'Field',
+            'resetField'
+        ]),
+        reset: void 0,
+        error: void 0,
+        required: void 0
+    }, options.map(({ value, label }, index)=>/*#__PURE__*/ react.createElement(SelectOption, {
+            key: index,
+            value: value
+        }, label && label.primary ? label.primary : value)));
+});
+const inputs_Select = Select;
+export { Select, inputs_Select as default };

package/inputs/index.d.ts

@@ -1,9 +1,9 @@
-export { default as Checkboxes } from '@digigov/form/inputs/Checkboxes';
-export { default as DateInput } from '@digigov/form/inputs/DateInput';
-export { default as OtpInput } from '@digigov/form/inputs/OtpInput';
-export { default as FileInput } from '@digigov/form/inputs/FileInput';
-export { default as ImageInput } from '@digigov/form/inputs/ImageInput';
-export { default as Input } from '@digigov/form/inputs/Input';
-export { default as Label } from '@digigov/form/inputs/Label';
-export { default as Radio } from '@digigov/form/inputs/Radio';
-export { default as Select } from '@digigov/form/inputs/Select';
+export { default as Checkboxes } from './Checkboxes/index.js';
+export { default as DateInput } from './DateInput/index.js';
+export { default as OtpInput } from './OtpInput/index.js';
+export { default as FileInput } from './FileInput/index.js';
+export { default as ImageInput } from './ImageInput/index.js';
+export { default as Input } from './Input/index.js';
+export { default as Label } from './Label/index.js';
+export { default as Radio } from './Radio/index.js';
+export { default as Select } from './Select/index.js';

package/inputs/index.js

@@ -1,21 +1,10 @@
-import { default as default2 } from "@digigov/form/inputs/Checkboxes";
-import { default as default3 } from "@digigov/form/inputs/DateInput";
-import { default as default4 } from "@digigov/form/inputs/OtpInput";
-import { default as default5 } from "@digigov/form/inputs/FileInput";
-import { default as default6 } from "@digigov/form/inputs/ImageInput";
-import { default as default7 } from "@digigov/form/inputs/Input";
-import { default as default8 } from "@digigov/form/inputs/Label";
-import { default as default9 } from "@digigov/form/inputs/Radio";
-import { default as default10 } from "@digigov/form/inputs/Select";
-export {
-  default2 as Checkboxes,
-  default3 as DateInput,
-  default5 as FileInput,
-  default6 as ImageInput,
-  default7 as Input,
-  default8 as Label,
-  default4 as OtpInput,
-  default9 as Radio,
-  default10 as Select
-};
-//# sourceMappingURL=index.js.map
+import Checkboxes from "./Checkboxes/index.js";
+import DateInput from "./DateInput/index.js";
+import OtpInput from "./OtpInput/index.js";
+import FileInput from "./FileInput/index.js";
+import ImageInput from "./ImageInput/index.js";
+import Input from "./Input/index.js";
+import Label from "./Label/index.js";
+import Radio from "./Radio/index.js";
+import Select from "./Select/index.js";
+export { Checkboxes, DateInput, FileInput, ImageInput, Input, Label, OtpInput, Radio, Select };

package/{Field/utils/index.d.ts → inputs/registry.d.ts}

@@ -1,4 +1,5 @@
-import { FieldComponentRegistry } from '@digigov/form/Field/types';
+import { type FieldComponentItem } from '../Field/types.js';
+export type FieldComponentRegistry = Record<string, FieldComponentItem>;
 export declare const FIELD_COMPONENTS: FieldComponentRegistry;
 export declare const ALTERNATIVE_COMPONENTS: FieldComponentRegistry;
 export declare const CONTROLLED_FIELD_COMPONENTS: FieldComponentRegistry;