@mtes-mct/monitor-ui 1.4.0 → 1.5.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [1.5.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.4.0...v1.5.0) (2022-11-29)
+
+
+### Features
+
+* **fields:** add MultiSelect ([#26](https://github.com/MTES-MCT/monitor-ui/issues/26)) ([e1123b1](https://github.com/MTES-MCT/monitor-ui/commit/e1123b1e09dd55135b6806fdbe7615eab5f65704))
+* **fields:** add Textarea ([#30](https://github.com/MTES-MCT/monitor-ui/issues/30)) ([0cd9b13](https://github.com/MTES-MCT/monitor-ui/commit/0cd9b132b0607b109dbec4ec54e7184e71b8f9d9))
+* **fields:** add TextInput ([#28](https://github.com/MTES-MCT/monitor-ui/issues/28)) ([cdd610f](https://github.com/MTES-MCT/monitor-ui/commit/cdd610f679bfb967f2f6403f9c4c397bfafb0948))
+* **formiks:** add FormikMultiSelect ([#27](https://github.com/MTES-MCT/monitor-ui/issues/27)) ([414c4da](https://github.com/MTES-MCT/monitor-ui/commit/414c4dad1a6a639ae4b1f7cbf61f851d778f08b7))
+* **formiks:** add FormikTextarea ([#31](https://github.com/MTES-MCT/monitor-ui/issues/31)) ([59aa260](https://github.com/MTES-MCT/monitor-ui/commit/59aa260cc8efeec29d795d73261bc77263b67ab4))
+* **formiks:** add FormikTextInput ([#29](https://github.com/MTES-MCT/monitor-ui/issues/29)) ([8feddd3](https://github.com/MTES-MCT/monitor-ui/commit/8feddd39d05484a2c2469e019baacf5b60a10000))
+
+# [1.4.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.3.0...v1.4.0) (2022-11-28)
+
+
+### Features
+
+* **fields:** add Checkbox ([#21](https://github.com/MTES-MCT/monitor-ui/issues/21)) ([37a1746](https://github.com/MTES-MCT/monitor-ui/commit/37a1746676da210f437453cfa3812bd537b33661))
+* **formiks:** add FormikCheckbox ([#22](https://github.com/MTES-MCT/monitor-ui/issues/22)) ([f018046](https://github.com/MTES-MCT/monitor-ui/commit/f01804690b045b0d2e7356eb5c6c1cac6c0a5dbe))
+
 # [1.3.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.2.0...v1.3.0) (2022-11-24)
 
 

package/fields/MultiSelect.d.ts

@@ -0,0 +1,12 @@
+import type { Option } from '../types';
+import type { TagPickerProps } from 'rsuite';
+import type { Promisable } from 'type-fest';
+export declare type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {
+    defaultValue?: string[];
+    /** Width in REM */
+    fixedWidth?: number;
+    name: string;
+    onChange?: (nextValue: string[] | undefined) => Promisable<void>;
+    options: Option[];
+};
+export declare function MultiSelect({ fixedWidth, onChange, options, searchable, ...originalProps }: MultiSelectProps): JSX.Element;

package/fields/Select.d.ts

@@ -1,18 +1,10 @@
 import type { Option } from '../types';
-import type { SelectPickerProps as RsuiteSelectPickerProps, TagPickerProps } from 'rsuite';
+import type { SelectPickerProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-declare type SelectCommonProps = {
+export declare type SelectProps = Omit<SelectPickerProps<any>, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {
+    defaultValue?: string;
     name: string;
+    onChange?: (nextValue: string | undefined) => Promisable<void>;
     options: Option[];
 };
-export declare type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'onChange' | 'value'> & SelectCommonProps & {
-    isMulti: true;
-    onChange?: (values: string[] | undefined) => Promisable<void>;
-};
-export declare type SingleSelectProps = Omit<RsuiteSelectPickerProps<any>, 'as' | 'data' | 'onChange' | 'value'> & SelectCommonProps & {
-    isMulti?: false;
-    onChange?: (value: string | undefined) => Promisable<void>;
-};
-export declare type SelectProps = MultiSelectProps | SingleSelectProps;
-export declare function Select({ isMulti, onChange, options, searchable, ...originalProps }: SelectProps): JSX.Element;
-export {};
+export declare function Select({ onChange, options, searchable, ...originalProps }: SelectProps): JSX.Element;

package/fields/TextInput.d.ts

@@ -0,0 +1,9 @@
+import type { InputProps } from 'rsuite';
+import type { Promisable } from 'type-fest';
+export declare type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'onChange' | 'value'> & {
+    defaultValue?: string;
+    name: string;
+    onChange?: (nextValue: string | undefined) => Promisable<void>;
+};
+export declare function TextInput({ onChange, ...originalProps }: TextInputProps): JSX.Element;
+export declare const StyledInput: import("styled-components").StyledComponent<import("rsuite/esm/@types/common").RsRefForwardingComponent<"input", InputProps>, import("styled-components").DefaultTheme, {}, never>;

package/fields/Textarea.d.ts

@@ -0,0 +1,9 @@
+import type { TextareaHTMLAttributes } from 'react';
+import type { Promisable } from 'type-fest';
+export declare type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'onChange' | 'value'> & {
+    defaultValue?: string;
+    name: string;
+    onChange?: (nextValue: string | undefined) => Promisable<void>;
+};
+export declare function Textarea({ onChange, rows, ...originalProps }: TextareaProps): JSX.Element;
+export declare const StyledInput: import("styled-components").StyledComponent<import("rsuite/esm/@types/common").RsRefForwardingComponent<"input", import("rsuite").InputProps>, import("styled-components").DefaultTheme, {}, never>;

package/formiks/FormikCheckbox.d.ts

@@ -1,5 +1,3 @@
 import type { CheckboxProps } from '../fields/Checkbox';
-export declare type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'> & {
-    name: string;
-};
+export declare type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'>;
 export declare function FormikCheckbox({ name, ...originalProps }: FormikCheckboxProps): JSX.Element;

package/formiks/FormikMultiSelect.d.ts

@@ -0,0 +1,3 @@
+import type { MultiSelectProps } from '../fields/MultiSelect';
+export declare type FormikMultiSelectProps = Omit<MultiSelectProps, 'defaultValue' | 'onChange'>;
+export declare function FormikMultiSelect({ name, ...originalProps }: FormikMultiSelectProps): JSX.Element;

package/formiks/FormikSelect.d.ts

@@ -1,5 +1,3 @@
 import type { SelectProps } from '../fields/Select';
-export declare type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'> & {
-    name: string;
-};
+export declare type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'>;
 export declare function FormikSelect({ name, ...originalProps }: FormikSelectProps): JSX.Element;

package/formiks/FormikTextInput.d.ts

@@ -0,0 +1,3 @@
+import type { TextInputProps } from '../fields/TextInput';
+export declare type FormikTextInputProps = Omit<TextInputProps, 'defaultValue' | 'onChange'>;
+export declare function FormikTextInput({ name, ...originalProps }: FormikTextInputProps): JSX.Element;

package/formiks/FormikTextarea.d.ts

@@ -0,0 +1,3 @@
+import type { TextareaProps } from '../fields/Textarea';
+export declare type FormikTextareaProps = Omit<TextareaProps, 'defaultValue' | 'onChange'>;
+export declare function FormikTextarea({ name, ...originalProps }: FormikTextareaProps): JSX.Element;

package/index.d.ts

@@ -3,20 +3,32 @@ export { THEME } from './theme';
 export { Checkbox } from './fields/Checkbox';
 export { DateRangePicker } from './fields/DateRangePicker';
 export { DatePicker } from './fields/DatePicker';
+export { MultiSelect } from './fields/MultiSelect';
 export { Select } from './fields/Select';
+export { Textarea } from './fields/Textarea';
+export { TextInput } from './fields/TextInput';
 export { FormikCheckbox } from './formiks/FormikCheckbox';
 export { FormikDatePicker } from './formiks/FormikDatePicker';
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker';
 export { FormikEffect } from './formiks/FormikEffect';
+export { FormikMultiSelect } from './formiks/FormikMultiSelect';
 export { FormikSelect } from './formiks/FormikSelect';
+export { FormikTextarea } from './formiks/FormikTextarea';
+export { FormikTextInput } from './formiks/FormikTextInput';
 export { ThemeProvider } from './ThemeProvider';
 export type { PartialTheme, Theme } from './theme';
 export type { CheckboxProps } from './fields/Checkbox';
 export type { DateRangePickerProps } from './fields/DateRangePicker';
 export type { DatePickerProps } from './fields/DatePicker';
+export type { MultiSelectProps } from './fields/MultiSelect';
 export type { SelectProps } from './fields/Select';
+export type { TextareaProps } from './fields/Textarea';
+export type { TextInputProps } from './fields/TextInput';
 export type { FormikCheckboxProps } from './formiks/FormikCheckbox';
 export type { FormikDatePickerProps } from './formiks/FormikDatePicker';
 export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker';
 export type { FormikEffectProps } from './formiks/FormikEffect';
+export type { FormikMultiSelectProps } from './formiks/FormikMultiSelect';
 export type { FormikSelectProps } from './formiks/FormikSelect';
+export type { FormikTextareaProps } from './formiks/FormikTextarea';
+export type { FormikTextInputProps } from './formiks/FormikTextInput';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React UI components and styles for Monitorfish and Monitorenv.",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "license": "AGPL-3.0",
   "engines": {
     "node": "18",

package/src/fields/MultiSelect.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { TagPicker } from 'rsuite';
+import styled from 'styled-components';
+
+function MultiSelect({ fixedWidth = 5, onChange, options, 
+// eslint-disable-next-line @typescript-eslint/naming-convention
+searchable = false, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback((nextValue) => {
+        if (!onChange) {
+            return;
+        }
+        const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return (jsx(StyledTagPicker, { data: options, fixedWidth: fixedWidth, onChange: handleChange, searchable: searchable, ...originalProps }, key));
+}
+// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.
+// We should hack that.
+const StyledTagPicker = styled(TagPicker) `
+  cursor: pointer;
+  width: ${p => p.fixedWidth}rem;
+
+  > .rs-picker-toggle {
+    cursor: inherit;
+  }
+`;
+
+export { MultiSelect };
+//# sourceMappingURL=MultiSelect.js.map

package/src/fields/MultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/fields/MultiSelect.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { TagPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { TagPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string[]\n  /** Width in REM */\n  fixedWidth?: number\n  name: string\n  onChange?: (nextValue: string[] | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function MultiSelect({\n  fixedWidth = 5,\n  onChange,\n  options,\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  searchable = false,\n  ...originalProps\n}: MultiSelectProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (nextValue: string[] | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue\n\n      onChange(normalizedNextValue)\n    },\n    [onChange]\n  )\n\n  return (\n    <StyledTagPicker\n      key={key}\n      data={options}\n      fixedWidth={fixedWidth}\n      onChange={handleChange}\n      searchable={searchable}\n      {...originalProps}\n    />\n  )\n}\n\n// TODO A width seems to be mandatory in rsuite which is a very dirty behavior.\n// We should hack that.\nconst StyledTagPicker = styled(TagPicker)<{\n  fixedWidth: number\n}>`\n  cursor: pointer;\n  width: ${p => p.fixedWidth}rem;\n\n  > .rs-picker-toggle {\n    cursor: inherit;\n  }\n`\n"],"names":["_jsx"],"mappings":";;;;;AAgBM,SAAU,WAAW,CAAC,EAC1B,UAAU,GAAG,CAAC,EACd,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACC,EAAA;AACjB,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAA0B,KAAI;QAC7B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAEnF,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,QACEA,GAAC,CAAA,eAAe,EAEd,EAAA,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,EALZ,EAAA,GAAG,CAMR,EACH;AACH,CAAC;AAED;AACA;AACA,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAEvC,CAAA;;AAES,SAAA,EAAA,CAAC,IAAI,CAAC,CAAC,UAAU,CAAA;;;;;CAK3B;;;;"}

package/src/fields/Select.js

@@ -1,39 +1,25 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
-import { SelectPicker, TagPicker } from 'rsuite';
+import { SelectPicker } from 'rsuite';
 import styled from 'styled-components';
 
-function Select({ isMulti = false, onChange, options, 
+function Select({ onChange, options, 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 searchable = false, ...originalProps }) {
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
-    const handleChange = useCallback((valueOrValues) => {
+    const handleChange = useCallback((nextValue) => {
         if (!onChange) {
             return;
         }
-        const normalizedValueOrValues = !valueOrValues || (Array.isArray(valueOrValues) && !valueOrValues.length) ? undefined : valueOrValues;
-        onChange(normalizedValueOrValues);
+        const normalizedNextValue = nextValue ?? undefined;
+        onChange(normalizedNextValue);
     }, [onChange]);
-    if (isMulti) {
-        return jsx(StyledTagPicker, { data: options, onChange: handleChange, searchable: searchable, ...originalProps });
-    }
     return (jsx(StyledSelectPicker, { data: options, 
         // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.
         // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`
         onChange: handleChange, searchable: searchable, ...originalProps }, key));
 }
-const StyledSelectPicker = styled(SelectPicker) `
-  display: inline-flex;
-  width: 9.25rem;
-`;
-const StyledTagPicker = styled(TagPicker) `
-  cursor: pointer;
-  width: 9.25rem;
-
-  > .rs-picker-toggle {
-    cursor: inherit;
-  }
-`;
+const StyledSelectPicker = styled(SelectPicker) ``;
 
 export { Select };
 //# sourceMappingURL=Select.js.map

package/src/fields/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/fields/Select.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { SelectPicker, TagPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { SelectPickerProps as RsuiteSelectPickerProps, TagPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\ntype SelectCommonProps = {\n  name: string\n  options: Option[]\n}\nexport type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'onChange' | 'value'> &\n  SelectCommonProps & {\n    isMulti: true\n    onChange?: (values: string[] | undefined) => Promisable<void>\n  }\nexport type SingleSelectProps = Omit<RsuiteSelectPickerProps<any>, 'as' | 'data' | 'onChange' | 'value'> &\n  SelectCommonProps & {\n    isMulti?: false\n    onChange?: (value: string | undefined) => Promisable<void>\n  }\nexport type SelectProps = MultiSelectProps | SingleSelectProps\nexport function Select({\n  isMulti = false,\n  onChange,\n  options,\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  searchable = false,\n  ...originalProps\n}: SelectProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (valueOrValues: string | string[] | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedValueOrValues =\n        !valueOrValues || (Array.isArray(valueOrValues) && !valueOrValues.length) ? undefined : valueOrValues\n\n      ;(onChange as (valueOrValues: string | string[] | undefined) => Promisable<void>)(normalizedValueOrValues)\n    },\n    [onChange]\n  )\n\n  if (isMulti) {\n    return <StyledTagPicker data={options} onChange={handleChange} searchable={searchable} {...originalProps} />\n  }\n\n  return (\n    <StyledSelectPicker\n      key={key}\n      data={options}\n      // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.\n      // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`\n      onChange={handleChange as any}\n      searchable={searchable}\n      {...originalProps}\n    />\n  )\n}\n\nconst StyledSelectPicker = styled(SelectPicker)`\n  display: inline-flex;\n  width: 9.25rem;\n`\n\nconst StyledTagPicker = styled(TagPicker)`\n  cursor: pointer;\n  width: 9.25rem;\n\n  > .rs-picker-toggle {\n    cursor: inherit;\n  }\n`\n"],"names":["_jsx"],"mappings":";;;;;AAuBM,SAAU,MAAM,CAAC,EACrB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACJ,EAAA;AACZ,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,aAAuC,KAAI;QAC1C,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;QAED,MAAM,uBAAuB,GAC3B,CAAC,aAAa,KAAK,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,GAAG,SAAS,GAAG,aAAa,CAEtG;QAAC,QAA+E,CAAC,uBAAuB,CAAC,CAAA;AAC5G,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,IAAI,OAAO,EAAE;AACX,QAAA,OAAOA,IAAC,eAAe,EAAA,EAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAM,GAAA,aAAa,GAAI,CAAA;AAC7G,KAAA;AAED,IAAA,QACEA,GAAC,CAAA,kBAAkB,EAEjB,EAAA,IAAI,EAAE,OAAO;;;AAGb,QAAA,QAAQ,EAAE,YAAmB,EAC7B,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,EANZ,EAAA,GAAG,CAOR,EACH;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,CAAA;;;CAG9C,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA,CAAA;;;;;;;CAOxC;;;;"}
+{"version":3,"file":"Select.js","sources":["../../../src/fields/Select.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { SelectPicker } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { Option } from '../types'\nimport type { SelectPickerProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type SelectProps = Omit<SelectPickerProps<any>, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function Select({\n  onChange,\n  options,\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  searchable = false,\n  ...originalProps\n}: SelectProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (nextValue: string | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedNextValue = nextValue ?? undefined\n\n      onChange(normalizedNextValue)\n    },\n    [onChange]\n  )\n\n  return (\n    <StyledSelectPicker\n      key={key}\n      data={options}\n      // The `unknown` type from Rsuite library is wrong. It should be inferred from `data` prop type.\n      // `onChange: ((value: unknown, event: React.SyntheticEvent<Element, Event>) => void) | undefined`\n      onChange={handleChange as any}\n      searchable={searchable}\n      {...originalProps}\n    />\n  )\n}\n\nconst StyledSelectPicker = styled(SelectPicker)``\n"],"names":["_jsx"],"mappings":";;;;;SAcgB,MAAM,CAAC,EACrB,QAAQ,EACR,OAAO;AACP;AACA,UAAU,GAAG,KAAK,EAClB,GAAG,aAAa,EACJ,EAAA;AACZ,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAAwB,KAAI;QAC3B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,SAAS,IAAI,SAAS,CAAA;QAElD,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,QACEA,GAAC,CAAA,kBAAkB,EAEjB,EAAA,IAAI,EAAE,OAAO;;;AAGb,QAAA,QAAQ,EAAE,YAAmB,EAC7B,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,EANZ,EAAA,GAAG,CAOR,EACH;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,EAAE;;;;"}

package/src/fields/TextInput.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { Input } from 'rsuite';
+import styled from 'styled-components';
+
+function TextInput({ onChange, ...originalProps }) {
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback((nextValue) => {
+        if (!onChange) {
+            return;
+        }
+        const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return jsx(StyledInput, { onChange: handleChange, ...originalProps }, key);
+}
+const StyledInput = styled(Input) `
+  background-color: ${p => p.theme.color.white};
+`;
+
+export { StyledInput, TextInput };
+//# sourceMappingURL=TextInput.js.map

package/src/fields/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../../src/fields/TextInput.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { Input } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { InputProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n}\nexport function TextInput({ onChange, ...originalProps }: TextInputProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (nextValue: string | null) => {\n      if (!onChange) {\n        return\n      }\n\n      const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined\n\n      onChange(normalizedNextValue)\n    },\n    [onChange]\n  )\n\n  return <StyledInput key={key} onChange={handleChange} {...originalProps} />\n}\n\nexport const StyledInput = styled(Input)`\n  background-color: ${p => p.theme.color.white};\n`\n"],"names":["_jsx"],"mappings":";;;;;AAYM,SAAU,SAAS,CAAC,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAkB,EAAA;AACtE,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,SAAwB,KAAI;QAC3B,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;AAED,QAAA,MAAM,mBAAmB,GAAG,SAAS,IAAI,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAExF,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,OAAOA,GAAA,CAAC,WAAW,EAAA,EAAW,QAAQ,EAAE,YAAY,EAAA,GAAM,aAAa,EAAA,EAA9C,GAAG,CAA+C,CAAA;AAC7E,CAAC;MAEY,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA;sBAClB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAA;;;;;"}

package/src/fields/Textarea.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useCallback } from 'react';
+import { Input } from 'rsuite';
+import styled from 'styled-components';
+
+function Textarea({ onChange, rows = 3, ...originalProps }) {
+    const inputRef = useRef();
+    const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
+    const handleChange = useCallback(() => {
+        if (!onChange) {
+            return;
+        }
+        const nextValue = inputRef.current.value.trim();
+        const normalizedNextValue = nextValue.length ? nextValue : undefined;
+        onChange(normalizedNextValue);
+    }, [onChange]);
+    return jsx(StyledInput, { ref: inputRef, as: "textarea", onChange: handleChange, rows: rows, ...originalProps }, key);
+}
+const StyledInput = styled(Input) ``;
+
+export { StyledInput, Textarea };
+//# sourceMappingURL=Textarea.js.map

package/src/fields/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/fields/Textarea.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef } from 'react'\nimport { Input } from 'rsuite'\nimport styled from 'styled-components'\n\nimport type { MutableRefObject, TextareaHTMLAttributes } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'onChange' | 'value'> & {\n  defaultValue?: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n}\nexport function Textarea({ onChange, rows = 3, ...originalProps }: TextareaProps) {\n  const inputRef = useRef() as MutableRefObject<HTMLTextAreaElement>\n\n  const key = useMemo(\n    () => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`,\n    [originalProps.defaultValue, originalProps.name]\n  )\n\n  const handleChange = useCallback(() => {\n    if (!onChange) {\n      return\n    }\n\n    const nextValue = inputRef.current.value.trim()\n    const normalizedNextValue = nextValue.length ? nextValue : undefined\n\n    onChange(normalizedNextValue)\n  }, [onChange])\n\n  return <StyledInput key={key} ref={inputRef} as=\"textarea\" onChange={handleChange} rows={rows} {...originalProps} />\n}\n\nexport const StyledInput = styled(Input)``\n"],"names":["_jsx"],"mappings":";;;;;AAYgB,SAAA,QAAQ,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,aAAa,EAAiB,EAAA;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,EAA2C,CAAA;AAElE,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAG,EAAA,aAAa,CAAC,IAAI,CAAI,CAAA,EAAA,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY,CAAC,CAAE,CAAA,EAC3E,CAAC,aAAa,CAAC,YAAY,EAAE,aAAa,CAAC,IAAI,CAAC,CACjD,CAAA;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;QACpC,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;QAED,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,CAAA;AAC/C,QAAA,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAA;QAEpE,QAAQ,CAAC,mBAAmB,CAAC,CAAA;AAC/B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAOA,GAAA,CAAC,WAAW,EAAW,EAAA,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAC,UAAU,EAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,KAAM,aAAa,EAAA,EAAvF,GAAG,CAAwF,CAAA;AACtH,CAAC;AAEY,MAAA,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA;;;;"}

package/src/formiks/FormikCheckbox.js

@@ -1,18 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { useField } from 'formik';
-import { useMemo, useCallback } from 'react';
+import { useMemo, useCallback, useEffect } from 'react';
 import { Checkbox } from '../fields/Checkbox.js';
 
 function FormikCheckbox({ name, ...originalProps }) {
     const [field, , helpers] = useField(name);
     const value = useMemo(() => field.value, [field.value]);
+    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+    // both because it is useless and it will trigger infinite hook calls
     const setValue = useMemo(() => helpers.setValue, [helpers.setValue]);
-    // We don't include `setValues` in  `useCallback()` dependencok calls
-    // both because it is useless and it will trigger infinite ho
     const handleChange = useCallback((isChecked) => {
         setValue(isChecked);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => setValue(undefined), []);
     return jsx(Checkbox, { defaultChecked: value, name: name, onChange: handleChange, ...originalProps });
 }
 

package/src/formiks/FormikCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormikCheckbox.js","sources":["../../../src/formiks/FormikCheckbox.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useMemo } from 'react'\n\nimport { Checkbox } from '../fields/Checkbox'\n\nimport type { CheckboxProps } from '../fields/Checkbox'\n\nexport type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'> & {\n  name: string\n}\nexport function FormikCheckbox({ name, ...originalProps }: FormikCheckboxProps) {\n  const [field, , helpers] = useField(name)\n\n  const value = useMemo(() => field.value, [field.value])\n  const setValue = useMemo(() => helpers.setValue, [helpers.setValue])\n\n  // We don't include `setValues` in  `useCallback()` dependencok calls\n  // both because it is useless and it will trigger infinite ho\n  const handleChange = useCallback((isChecked: boolean) => {\n    setValue(isChecked)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  return <Checkbox defaultChecked={value} name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAUM,SAAU,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAuB,EAAA;AAC5E,IAAA,MAAM,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;AAEzC,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;AACvD,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,OAAO,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;;;AAIpE,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAAkB,KAAI;QACtD,QAAQ,CAAC,SAAS,CAAC,CAAA;;KAGpB,EAAE,EAAE,CAAC,CAAA;AAEN,IAAA,OAAOA,IAAC,QAAQ,EAAA,EAAC,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AACnG;;;;"}
+{"version":3,"file":"FormikCheckbox.js","sources":["../../../src/formiks/FormikCheckbox.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useEffect, useMemo } from 'react'\n\nimport { Checkbox } from '../fields/Checkbox'\n\nimport type { CheckboxProps } from '../fields/Checkbox'\n\nexport type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'>\nexport function FormikCheckbox({ name, ...originalProps }: FormikCheckboxProps) {\n  const [field, , helpers] = useField(name)\n\n  const value = useMemo(() => field.value, [field.value])\n  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  const setValue = useMemo(() => helpers.setValue, [helpers.setValue])\n\n  const handleChange = useCallback((isChecked: boolean) => {\n    setValue(isChecked)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <Checkbox defaultChecked={value} name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAQM,SAAU,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAuB,EAAA;AAC5E,IAAA,MAAM,CAAC,KAAK,IAAI,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;AAEzC,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAA;;;AAGvD,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,OAAO,CAAC,QAAQ,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEpE,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAAkB,KAAI;QACtD,QAAQ,CAAC,SAAS,CAAC,CAAA;;KAGpB,EAAE,EAAE,CAAC,CAAA;;AAGN,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9C,IAAA,OAAOA,IAAC,QAAQ,EAAA,EAAC,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AACnG;;;;"}

package/src/formiks/FormikDatePicker.js

@@ -6,7 +6,7 @@ import { DatePicker } from '../fields/DatePicker/index.js';
 function FormikDatePicker({ name, ...originalProps }) {
     const [, , helpers] = useField(name);
     const { setValue } = helpers;
-    // We don't include `setValues` in  `useEffect()` dependencies
+    // We don't include `setValues` in `useEffect()` dependencies
     // both because it is useless and it will trigger infinite hook calls
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(() => () => setValue(undefined), []);

package/src/formiks/FormikDatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormikDatePicker.js","sources":["../../../src/formiks/FormikDatePicker.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useEffect } from 'react'\n\nimport { DatePicker } from '../fields/DatePicker'\n\nimport type { DatePickerProps } from '../fields/DatePicker'\n\nexport type FormikDatePickerProps = Omit<DatePickerProps, 'onChange'> & {\n  name: string\n}\nexport function FormikDatePicker({ name, ...originalProps }: FormikDatePickerProps) {\n  const [, , helpers] = useField(name)\n  const { setValue } = helpers\n\n  // We don't include `setValues` in  `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <DatePicker onChange={setValue} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAUM,SAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAyB,EAAA;IAChF,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;AACpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;;;;AAK5B,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;IAE9C,OAAOA,GAAA,CAAC,UAAU,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA,GAAM,aAAa,EAAA,CAAI,CAAA;AAC9D;;;;"}
+{"version":3,"file":"FormikDatePicker.js","sources":["../../../src/formiks/FormikDatePicker.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useEffect } from 'react'\n\nimport { DatePicker } from '../fields/DatePicker'\n\nimport type { DatePickerProps } from '../fields/DatePicker'\n\nexport type FormikDatePickerProps = Omit<DatePickerProps, 'onChange'> & {\n  name: string\n}\nexport function FormikDatePicker({ name, ...originalProps }: FormikDatePickerProps) {\n  const [, , helpers] = useField(name)\n  const { setValue } = helpers\n\n  // We don't include `setValues` in `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <DatePicker onChange={setValue} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAUM,SAAU,gBAAgB,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAyB,EAAA;IAChF,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;AACpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;;;;AAK5B,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;IAE9C,OAAOA,GAAA,CAAC,UAAU,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAA,GAAM,aAAa,EAAA,CAAI,CAAA;AAC9D;;;;"}

package/src/formiks/FormikMultiSelect.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useField } from 'formik';
+import { useCallback, useEffect } from 'react';
+import { MultiSelect } from '../fields/MultiSelect.js';
+
+function FormikMultiSelect({ name, ...originalProps }) {
+    const [, , helpers] = useField(name);
+    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+    // both because it is useless and it will trigger infinite hook calls
+    const { setValue } = helpers;
+    const handleChange = useCallback((nextValue) => {
+        setValue(nextValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => setValue(undefined), []);
+    return jsx(MultiSelect, { name: name, onChange: handleChange, ...originalProps });
+}
+
+export { FormikMultiSelect };
+//# sourceMappingURL=FormikMultiSelect.js.map

package/src/formiks/FormikMultiSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikMultiSelect.js","sources":["../../../src/formiks/FormikMultiSelect.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useEffect } from 'react'\n\nimport { MultiSelect } from '../fields/MultiSelect'\n\nimport type { MultiSelectProps } from '../fields/MultiSelect'\n\nexport type FormikMultiSelectProps = Omit<MultiSelectProps, 'defaultValue' | 'onChange'>\nexport function FormikMultiSelect({ name, ...originalProps }: FormikMultiSelectProps) {\n  const [, , helpers] = useField(name)\n  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  const { setValue } = helpers\n\n  const handleChange = useCallback((nextValue: string[] | undefined) => {\n    setValue(nextValue)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <MultiSelect name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAQM,SAAU,iBAAiB,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAA0B,EAAA;IAClF,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;;;AAGpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;AAE5B,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAA+B,KAAI;QACnE,QAAQ,CAAC,SAAS,CAAC,CAAA;;KAGpB,EAAE,EAAE,CAAC,CAAA;;AAGN,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9C,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AAC/E;;;;"}

package/src/formiks/FormikSelect.js

@@ -8,8 +8,8 @@ function FormikSelect({ name, ...originalProps }) {
     // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
     // both because it is useless and it will trigger infinite hook calls
     const { setValue } = helpers;
-    const handleChange = useCallback((valueOrValues) => {
-        setValue(valueOrValues);
+    const handleChange = useCallback((nextValue) => {
+        setValue(nextValue);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/formiks/FormikSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormikSelect.js","sources":["../../../src/formiks/FormikSelect.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useEffect } from 'react'\n\nimport { Select } from '../fields/Select'\n\nimport type { SelectProps } from '../fields/Select'\n\nexport type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'> & {\n  name: string\n}\nexport function FormikSelect({ name, ...originalProps }: FormikSelectProps) {\n  const [, , helpers] = useField(name)\n  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  const { setValue } = helpers\n\n  const handleChange = useCallback((valueOrValues: string | string[] | undefined) => {\n    setValue(valueOrValues)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <Select name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAUM,SAAU,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAqB,EAAA;IACxE,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;;;AAGpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;AAE5B,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,aAA4C,KAAI;QAChF,QAAQ,CAAC,aAAa,CAAC,CAAA;;KAGxB,EAAE,EAAE,CAAC,CAAA;;AAGN,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9C,IAAA,OAAOA,GAAC,CAAA,MAAM,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AAC1E;;;;"}
+{"version":3,"file":"FormikSelect.js","sources":["../../../src/formiks/FormikSelect.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useEffect } from 'react'\n\nimport { Select } from '../fields/Select'\n\nimport type { SelectProps } from '../fields/Select'\n\nexport type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'>\nexport function FormikSelect({ name, ...originalProps }: FormikSelectProps) {\n  const [, , helpers] = useField(name)\n  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  const { setValue } = helpers\n\n  const handleChange = useCallback((nextValue: string | undefined) => {\n    setValue(nextValue)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <Select name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAQM,SAAU,YAAY,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAqB,EAAA;IACxE,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;;;AAGpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;AAE5B,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAA6B,KAAI;QACjE,QAAQ,CAAC,SAAS,CAAC,CAAA;;KAGpB,EAAE,EAAE,CAAC,CAAA;;AAGN,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9C,IAAA,OAAOA,GAAC,CAAA,MAAM,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AAC1E;;;;"}

package/src/formiks/FormikTextInput.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useField } from 'formik';
+import { useCallback, useEffect } from 'react';
+import { TextInput } from '../fields/TextInput.js';
+
+function FormikTextInput({ name, ...originalProps }) {
+    const [, , helpers] = useField(name);
+    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+    // both because it is useless and it will trigger infinite hook calls
+    const { setValue } = helpers;
+    const handleChange = useCallback((nextValue) => {
+        setValue(nextValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => setValue(undefined), []);
+    return jsx(TextInput, { name: name, onChange: handleChange, ...originalProps });
+}
+
+export { FormikTextInput };
+//# sourceMappingURL=FormikTextInput.js.map

package/src/formiks/FormikTextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikTextInput.js","sources":["../../../src/formiks/FormikTextInput.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useEffect } from 'react'\n\nimport { TextInput } from '../fields/TextInput'\n\nimport type { TextInputProps } from '../fields/TextInput'\n\nexport type FormikTextInputProps = Omit<TextInputProps, 'defaultValue' | 'onChange'>\nexport function FormikTextInput({ name, ...originalProps }: FormikTextInputProps) {\n  const [, , helpers] = useField(name)\n  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  const { setValue } = helpers\n\n  const handleChange = useCallback((nextValue: string | undefined) => {\n    setValue(nextValue)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <TextInput name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAQM,SAAU,eAAe,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAwB,EAAA;IAC9E,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;;;AAGpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;AAE5B,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAA6B,KAAI;QACjE,QAAQ,CAAC,SAAS,CAAC,CAAA;;KAGpB,EAAE,EAAE,CAAC,CAAA;;AAGN,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9C,IAAA,OAAOA,GAAC,CAAA,SAAS,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AAC7E;;;;"}

package/src/formiks/FormikTextarea.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { useField } from 'formik';
+import { useCallback, useEffect } from 'react';
+import { Textarea } from '../fields/Textarea.js';
+
+function FormikTextarea({ name, ...originalProps }) {
+    const [, , helpers] = useField(name);
+    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
+    // both because it is useless and it will trigger infinite hook calls
+    const { setValue } = helpers;
+    const handleChange = useCallback((nextValue) => {
+        setValue(nextValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(() => () => setValue(undefined), []);
+    return jsx(Textarea, { name: name, onChange: handleChange, ...originalProps });
+}
+
+export { FormikTextarea };
+//# sourceMappingURL=FormikTextarea.js.map

package/src/formiks/FormikTextarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormikTextarea.js","sources":["../../../src/formiks/FormikTextarea.tsx"],"sourcesContent":["import { useField } from 'formik'\nimport { useCallback, useEffect } from 'react'\n\nimport { Textarea } from '../fields/Textarea'\n\nimport type { TextareaProps } from '../fields/Textarea'\n\nexport type FormikTextareaProps = Omit<TextareaProps, 'defaultValue' | 'onChange'>\nexport function FormikTextarea({ name, ...originalProps }: FormikTextareaProps) {\n  const [, , helpers] = useField(name)\n  // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies\n  // both because it is useless and it will trigger infinite hook calls\n  const { setValue } = helpers\n\n  const handleChange = useCallback((nextValue: string | undefined) => {\n    setValue(nextValue)\n\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => () => setValue(undefined), [])\n\n  return <Textarea name={name} onChange={handleChange} {...originalProps} />\n}\n"],"names":["_jsx"],"mappings":";;;;;AAQM,SAAU,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,aAAa,EAAuB,EAAA;IAC5E,MAAM,KAAK,OAAO,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;;;AAGpC,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,CAAA;AAE5B,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,SAA6B,KAAI;QACjE,QAAQ,CAAC,SAAS,CAAC,CAAA;;KAGpB,EAAE,EAAE,CAAC,CAAA;;AAGN,IAAA,SAAS,CAAC,MAAM,MAAM,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAA;AAE9C,IAAA,OAAOA,GAAC,CAAA,QAAQ,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,GAAI,CAAA;AAC5E;;;;"}

package/src/index.js

@@ -4,11 +4,17 @@ export { THEME } from './theme.js';
 export { Checkbox } from './fields/Checkbox.js';
 export { DateRangePicker } from './fields/DateRangePicker/index.js';
 export { DatePicker } from './fields/DatePicker/index.js';
+export { MultiSelect } from './fields/MultiSelect.js';
 export { Select } from './fields/Select.js';
+export { Textarea } from './fields/Textarea.js';
+export { TextInput } from './fields/TextInput.js';
 export { FormikCheckbox } from './formiks/FormikCheckbox.js';
 export { FormikDatePicker } from './formiks/FormikDatePicker.js';
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker.js';
 export { FormikEffect } from './formiks/FormikEffect.js';
+export { FormikMultiSelect } from './formiks/FormikMultiSelect.js';
 export { FormikSelect } from './formiks/FormikSelect.js';
+export { FormikTextarea } from './formiks/FormikTextarea.js';
+export { FormikTextInput } from './formiks/FormikTextInput.js';
 export { ThemeProvider } from './ThemeProvider.js';
 //# sourceMappingURL=index.js.map

package/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}