form-input-fields 1.0.5 → 1.0.6

package/README.md

@@ -32,7 +32,7 @@ yarn add @your-org/form-fields @mui/material @emotion/react @emotion/styled form
 ### Using pnpm
 
 ```bash
-pnpm add @your-org/form-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
+pnpm add form-input-fields @mui/material @emotion/react @emotion/styled formik @mui/x-date-pickers dayjs
 ```
 
 ### Peer Dependencies
@@ -41,7 +41,7 @@ Make sure your project includes these peer dependencies:
 
 ```json
 {
-  "peerDependencies": {
+  "devDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "@mui/material": "^5.0.0",
@@ -73,7 +73,7 @@ For Internet Explorer 11 support, you'll need to include polyfills. See [Browser
 After installation, you can import and use the components in your application:
 
 ```tsx
-import { FormTextField, FormDateField, FormMaskField } from '@your-org/form-fields';
+import { FormTextField, FormDateField, FormMaskField } from 'form-input-fields';
 ```
 
 ### Troubleshooting
@@ -100,7 +100,7 @@ If you encounter any issues during installation, try the following:
    pnpm install
    ```
 
-If you're still experiencing issues, please [open an issue](https://github.com/your-org/form-fields/issues) with details about your environment and the error message you're seeing.
+If you're still experiencing issues, please reach me at vladimir.vorobiev@gmail.com with details about your environment and the error message you're seeing.
 
 
 ## Table of Contents
@@ -113,6 +113,14 @@ If you're still experiencing issues, please [open an issue](https://github.com/y
     - [Basic Text Input](#basic-text-input)
     - [Text Field with Formik](#text-field-with-formik)
     - [Custom Validation](#custom-validation)
+- [FormDropDownField](#formdropdownfield)
+  - [Features](#features-4)
+  - [Basic Usage](#basic-usage-4)
+  - [Props](#props-4)
+  - [Examples](#examples-4)
+    - [Basic Dropdown](#basic-dropdown)
+    - [Dropdown with Default Selection](#dropdown-with-default-selection)
+    - [Required Dropdown with Validation](#required-dropdown-with-validation)
 - [FormDateField](#formdatefield)
   - [Features](#features)
   - [Available Date Formats](#available-date-formats)
@@ -280,6 +288,131 @@ The FormTextField component accepts all props from `FormTextFieldProps`, `FieldP
 
 ---
 
+## FormDropDownField
+
+A customizable dropdown/select component that integrates Material-UI's Select with Formik form handling.
+
+### Features
+
+- **Seamless Formik Integration**: Automatically handles form state, validation, and error messages
+- **Material-UI Styling**: Consistent look and feel with Material Design
+- **TypeScript Support**: Fully typed component with proper type definitions
+- **Flexible Data Binding**: Works with array of objects with `id` and `description` properties
+- **Optional Default Selection**: Add a default "Select" option with customizable text
+- **Form Validation**: Built-in error state management with Formik
+- **Responsive Design**: Works well across different screen sizes
+
+### Basic Usage
+
+```tsx
+import { Formik, Field } from 'formik';
+import { FormDropDownField } from 'form-input-fields';
+
+const items = [
+  { id: '1', description: 'Option 1' },
+  { id: '2', description: 'Option 2' },
+  { id: '3', description: 'Option 3' },
+];
+
+<Formik
+  initialValues={{ category: '' }}
+  onSubmit={(values) => console.log(values)}
+>
+  <Field
+    component={FormDropDownField}
+    name="category"
+    label="Category"
+    items={items}
+    addInputSelect={true}
+  />
+</Formik>
+```
+
+### Props
+
+The FormDropDownField component accepts all props from `FormDropDownFieldProps`, `FieldProps` (Formik), and Material-UI's `TextFieldProps` (with some exceptions).
+
+#### FormDropDownFieldProps Interface
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `Array<{ id: string | number; description: string }>` | `[]` | Array of items to display in the dropdown |
+| `addInputSelect` | `boolean` | `false` | Whether to show a default "Select" option as the first item |
+| `selectText` | `string` | `'Select'` | Text to display for the default "Select" option |
+| `required` | `boolean` | `false` | Whether the field is required |
+| `disabled` | `boolean` | `false` | Whether the field is disabled |
+| `className` | `string` | - | Custom class name for the root element |
+| `helperText` | `string` | - | Helper text to display below the field |
+| `error` | `boolean` | - | Error state of the field (overrides Formik error state) |
+| `onChange` | `(value: any) => void` | - | Custom change handler |
+| `onBlur` | `(event: React.FocusEvent<HTMLInputElement>) => void` | - | Custom blur handler |
+
+### Examples
+
+#### Basic Dropdown
+
+```tsx
+const items = [
+  { id: 'us', description: 'United States' },
+  { id: 'ca', description: 'Canada' },
+  { id: 'uk', description: 'United Kingdom' },
+];
+
+<Field
+  component={FormDropDownField}
+  name="country"
+  label="Country"
+  items={items}
+  fullWidth
+/>
+```
+
+#### Dropdown with Default Selection
+
+```tsx
+<Field
+  component={FormDropDownField}
+  name="category"
+  label="Category"
+  items={categories}
+  addInputSelect={true}
+  selectText="Select a category"
+  helperText="Please select a category from the list"
+/>
+```
+
+#### Required Dropdown with Validation
+
+```tsx
+<Formik
+  initialValues={{ department: '' }}
+  validationSchema={Yup.object({
+    department: Yup.string().required('Department is required'),
+  })}
+  onSubmit={(values) => console.log(values)}
+>
+  {({ errors, touched }) => (
+    <Form>
+      <Field
+        component={FormDropDownField}
+        name="department"
+        label="Department"
+        items={departments}
+        addInputSelect={true}
+        required
+        error={touched.department && Boolean(errors.department)}
+        helperText={touched.department && errors.department}
+      />
+      <Button type="submit" variant="contained" color="primary">
+        Submit
+      </Button>
+    </Form>
+  )}
+</Formik>
+```
+
+---
+
 ## FormDateField
 
 A date input field component with Material-UI and Formik integration, powered by MUI X Date Pickers.

package/dist/controls/FormDropDownField/FormDropDownField.d.ts

@@ -0,0 +1,56 @@
+import { FieldProps } from 'formik';
+import { TextFieldProps } from '@mui/material';
+export interface FormDropDownFieldProps {
+    /**
+     * Array of items to display in the dropdown
+     * Each item should have an `id` and `description` property
+     */
+    items: Array<{
+        id: string | number;
+        description: string;
+    }>;
+    /**
+     * Whether to show a default "Select" option as the first item
+     * @default false
+     */
+    addInputSelect?: boolean;
+    /**
+     * Text to display for the default "Select" option
+     * @default 'Select'
+     */
+    selectText?: string;
+    /**
+     * Whether the field is required
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom class name for the root element
+     */
+    className?: string;
+    /**
+     * Helper text to display below the field
+     */
+    helperText?: string;
+    /**
+     * Error state of the field
+     */
+    error?: boolean;
+    /**
+     * Custom onChange handler
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Custom onBlur handler
+     */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+}
+type FormDropDownFieldComponentProps = FormDropDownFieldProps & FieldProps & Omit<TextFieldProps, 'value' | 'onChange' | 'onBlur' | 'name' | 'defaultValue' | 'onError' | 'onFocus' | 'InputProps' | 'select' | 'SelectProps'>;
+export declare const FormDropDownField: ({ field, form, items, addInputSelect, selectText, required, disabled, className, helperText, error, onChange, onBlur, ...props }: FormDropDownFieldComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FormDropDownField.d.ts.map

package/dist/controls/FormDropDownField/FormDropDownField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormDropDownField.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDropDownField/FormDropDownField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,QAAQ,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAoC,MAAM,eAAe,CAAC;AAGjF,MAAM,WAAW,sBAAsB;IACrC;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAE3D;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAEhC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED,KAAK,+BAA+B,GAAG,sBAAsB,GAC3D,UAAU,GACV,IAAI,CACF,cAAc,EACZ,OAAO,GACP,UAAU,GACV,QAAQ,GACR,MAAM,GACN,cAAc,GACd,SAAS,GACT,SAAS,GACT,YAAY,GACZ,QAAQ,GACR,aAAa,CAChB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,GAAI,kIAc/B,+BAA+B,4CAiEjC,CAAC"}

package/dist/controls/FormDropDownField/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const useStyles: (props?: any) => import('@mui/styles').ClassNameMap<"margin" | "inputSelect">;
+//# sourceMappingURL=styles.d.ts.map

package/dist/controls/FormDropDownField/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/controls/FormDropDownField/styles.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,+EAYrB,CAAC"}

package/dist/index.d.ts

@@ -4,4 +4,5 @@ export { FormDateField, type FormDateFieldProps, } from './controls/FormDateFiel
 export { FormCheckboxField, type FormCheckboxFieldProps, } from './controls/FormCheckboxField/FormCheckboxField';
 export { FormDateTextField, type FormDateTextFieldProps, } from './controls/FormDateTextField/FormDateTextField';
 export { FormTextField, type FormTextFieldProps, } from './controls/FormTextField/FormTextField';
+export { FormDropDownField, type FormDropDownFieldProps, } from './controls/FormDropDownField/FormDropDownField';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AAExD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,UAAU,EACV,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,KAAK,UAAU,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AAExD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EACL,aAAa,EACb,KAAK,kBAAkB,GACxB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACL,iBAAiB,EACjB,KAAK,sBAAsB,GAC5B,MAAM,gDAAgD,CAAC"}