@mtes-mct/monitor-ui 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.6.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.5.1...v1.6.0) (2022-11-29)
+
+
+### Features
+
+* **fields:** add MultiCheckbox ([#37](https://github.com/MTES-MCT/monitor-ui/issues/37)) ([405ce01](https://github.com/MTES-MCT/monitor-ui/commit/405ce013e2eeac7d6143c1fab4f6d241133042e5))
+* **fields:** add MultiRadio ([#38](https://github.com/MTES-MCT/monitor-ui/issues/38)) ([de205f9](https://github.com/MTES-MCT/monitor-ui/commit/de205f9431a527bd5baf6dd85ac92d0126546c07))
+
 ## [1.5.1](https://github.com/MTES-MCT/monitor-ui/compare/v1.5.0...v1.5.1) (2022-11-29)
 
 

package/elements/Label.d.ts

@@ -1,3 +1,7 @@
 import type { LabelHTMLAttributes } from 'react';
-export declare type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
-export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;
+export declare type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+    isHidden: boolean;
+};
+export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    isHidden?: boolean | undefined;
+}, never>;

package/elements/Legend.d.ts

@@ -3,6 +3,3 @@ export declare type LegendProps = HTMLAttributes<HTMLLegendElement> & {
     isHidden?: boolean;
 };
 export declare function Legend({ isHidden, ...nativeProps }: LegendProps): JSX.Element;
-export declare const StyledLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
-    isHidden: boolean;
-}, never>;

package/fields/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-export declare type CheckboxProps = Omit<RsuiteCheckboxProps, 'checked' | 'onChange'> & {
+export declare type CheckboxProps = Omit<RsuiteCheckboxProps, 'checked' | 'id' | 'onChange'> & {
     label: string;
     name: string;
     onChange?: (isCheched: boolean) => Promisable<void>;

package/fields/MultiSelect.d.ts

@@ -1,12 +1,14 @@
 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'> & {
+export declare type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     defaultValue?: string[];
     /** Width in REM */
     fixedWidth?: number;
+    isLabelHidden?: boolean;
+    label: string;
     name: string;
     onChange?: (nextValue: string[] | undefined) => Promisable<void>;
     options: Option[];
 };
-export declare function MultiSelect({ fixedWidth, onChange, options, searchable, ...originalProps }: MultiSelectProps): JSX.Element;
+export declare function MultiSelect({ fixedWidth, isLabelHidden, label, onChange, options, searchable, ...originalProps }: MultiSelectProps): JSX.Element;

package/fields/Select.d.ts

@@ -1,10 +1,12 @@
 import type { Option } from '../types';
 import type { SelectPickerProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-export declare type SelectProps = Omit<SelectPickerProps<any>, 'as' | 'data' | 'defaultValue' | 'onChange' | 'value'> & {
+export declare type SelectProps = Omit<SelectPickerProps<any>, 'as' | 'data' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     defaultValue?: string;
+    isLabelHidden?: boolean;
+    label: string;
     name: string;
     onChange?: (nextValue: string | undefined) => Promisable<void>;
     options: Option[];
 };
-export declare function Select({ onChange, options, searchable, ...originalProps }: SelectProps): JSX.Element;
+export declare function Select({ isLabelHidden, label, onChange, options, searchable, ...originalProps }: SelectProps): JSX.Element;

package/fields/TextInput.d.ts

@@ -1,9 +1,11 @@
 import type { InputProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-export declare type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'onChange' | 'value'> & {
+export declare type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     defaultValue?: string;
+    isLabelHidden?: boolean;
+    label: string;
     name: string;
     onChange?: (nextValue: string | undefined) => Promisable<void>;
 };
-export declare function TextInput({ onChange, ...originalProps }: TextInputProps): JSX.Element;
+export declare function TextInput({ isLabelHidden, label, 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

@@ -1,9 +1,11 @@
 import type { TextareaHTMLAttributes } from 'react';
 import type { Promisable } from 'type-fest';
-export declare type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'onChange' | 'value'> & {
+export declare type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     defaultValue?: string;
+    isLabelHidden?: boolean;
+    label: string;
     name: string;
     onChange?: (nextValue: string | undefined) => Promisable<void>;
 };
-export declare function Textarea({ onChange, rows, ...originalProps }: TextareaProps): JSX.Element;
+export declare function Textarea({ isLabelHidden, label, 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/package.json

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

package/src/elements/Label.js

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 const Label = styled.label `
   color: ${p => p.theme.color.slateGray};
+  display: ${p => (p.isHidden ? 'none' : 'table')};
   font-size: 13px;
   line-height: 1.4;
   margin-bottom: 0.5rem;

package/src/elements/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sources":["../../../src/elements/Label.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport type { LabelHTMLAttributes } from 'react'\n\nexport type LabelProps = LabelHTMLAttributes<HTMLLabelElement>\nexport const Label = styled.label`\n  color: ${p => p.theme.color.slateGray};\n  font-size: 13px;\n  line-height: 1.4;\n  margin-bottom: 0.5rem;\n`\n"],"names":[],"mappings":";;AAKa,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,CAAA;WACtB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAA;;;;;;;;"}
+{"version":3,"file":"Label.js","sources":["../../../src/elements/Label.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport type { LabelHTMLAttributes } from 'react'\n\nexport type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  isHidden: boolean\n}\nexport const Label = styled.label<{\n  isHidden?: boolean\n}>`\n  color: ${p => p.theme.color.slateGray};\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n  font-size: 13px;\n  line-height: 1.4;\n  margin-bottom: 0.5rem;\n`\n"],"names":[],"mappings":";;AAOa,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAE/B,CAAA;WACS,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAA;AAC1B,WAAA,EAAA,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;;;;;;;;"}

package/src/elements/Legend.js

@@ -1,13 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
 import { Label } from './Label.js';
 
 function Legend({ isHidden = false, ...nativeProps }) {
-    return jsx(StyledLabel, { as: "legend", isHidden: isHidden, ...nativeProps });
+    return jsx(Label, { as: "legend", isHidden: isHidden, ...nativeProps });
 }
-const StyledLabel = styled(Label) `
-  display: ${p => (p.isHidden ? 'none' : 'table')};
-`;
 
-export { Legend, StyledLabel };
+export { Legend };
 //# sourceMappingURL=Legend.js.map

package/src/elements/Legend.js.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.js","sources":["../../../src/elements/Legend.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { Label } from './Label'\n\nimport type { HTMLAttributes } from 'react'\n\nexport type LegendProps = HTMLAttributes<HTMLLegendElement> & {\n  isHidden?: boolean\n}\nexport function Legend({ isHidden = false, ...nativeProps }: LegendProps) {\n  return <StyledLabel as=\"legend\" isHidden={isHidden} {...nativeProps} />\n}\n\nexport const StyledLabel = styled(Label)<{\n  isHidden: boolean\n}>`\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n`\n"],"names":["_jsx"],"mappings":";;;;AASM,SAAU,MAAM,CAAC,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,WAAW,EAAe,EAAA;AACtE,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAC,EAAA,EAAE,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,EAAM,GAAA,WAAW,GAAI,CAAA;AACzE,CAAC;MAEY,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAEtC,CAAA;AACW,WAAA,EAAA,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;;;;;"}
+{"version":3,"file":"Legend.js","sources":["../../../src/elements/Legend.tsx"],"sourcesContent":["import { Label } from './Label'\n\nimport type { HTMLAttributes } from 'react'\n\nexport type LegendProps = HTMLAttributes<HTMLLegendElement> & {\n  isHidden?: boolean\n}\nexport function Legend({ isHidden = false, ...nativeProps }: LegendProps) {\n  return <Label as=\"legend\" isHidden={isHidden} {...nativeProps} />\n}\n"],"names":["_jsx"],"mappings":";;;AAOM,SAAU,MAAM,CAAC,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,WAAW,EAAe,EAAA;AACtE,IAAA,OAAOA,GAAC,CAAA,KAAK,EAAC,EAAA,EAAE,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,EAAM,GAAA,WAAW,GAAI,CAAA;AACnE;;;;"}

package/src/fields/Checkbox.js

@@ -10,7 +10,7 @@ function Checkbox({ label, onChange, ...originalProps }) {
         }
         onChange(isChecked);
     }, [onChange]);
-    return (jsx(Checkbox$1, { onChange: handleChange, ...originalProps, children: label }, key));
+    return (jsx(Checkbox$1, { id: originalProps.name, onChange: handleChange, ...originalProps, children: label }, key));
 }
 
 export { Checkbox };

package/src/fields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/fields/Checkbox.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { Checkbox as RsuiteCheckbox } from 'rsuite'\n\nimport type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite'\nimport type { ValueType } from 'rsuite/esm/Checkbox'\nimport type { Promisable } from 'type-fest'\n\nexport type CheckboxProps = Omit<RsuiteCheckboxProps, 'checked' | 'onChange'> & {\n  label: string\n  name: string\n  onChange?: (isCheched: boolean) => Promisable<void>\n}\nexport function Checkbox({ label, onChange, ...originalProps }: CheckboxProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${String(originalProps.defaultChecked)}`,\n    [originalProps.defaultChecked, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (_: ValueType | undefined, isChecked: boolean) => {\n      if (!onChange) {\n        return\n      }\n\n      onChange(isChecked)\n    },\n    [onChange]\n  )\n\n  return (\n    <RsuiteCheckbox key={key} onChange={handleChange} {...originalProps}>\n      {label}\n    </RsuiteCheckbox>\n  )\n}\n"],"names":["_jsx","RsuiteCheckbox"],"mappings":";;;;AAYM,SAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAiB,EAAA;AAC3E,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAA,EAAG,aAAa,CAAC,IAAI,CAAA,CAAA,EAAI,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA,CAAE,EACrE,CAAC,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CACnD,CAAA;IAED,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAwB,EAAE,SAAkB,KAAI;QAC/C,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;QAED,QAAQ,CAAC,SAAS,CAAC,CAAA;AACrB,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;AAED,IAAA,QACEA,GAAA,CAACC,UAAc,EAAA,EAAW,QAAQ,EAAE,YAAY,EAAM,GAAA,aAAa,YAChE,KAAK,EAAA,EADa,GAAG,CAEP,EAClB;AACH;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/fields/Checkbox.tsx"],"sourcesContent":["import { useCallback, useMemo } from 'react'\nimport { Checkbox as RsuiteCheckbox } from 'rsuite'\n\nimport type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite'\nimport type { ValueType } from 'rsuite/esm/Checkbox'\nimport type { Promisable } from 'type-fest'\n\nexport type CheckboxProps = Omit<RsuiteCheckboxProps, 'checked' | 'id' | 'onChange'> & {\n  label: string\n  name: string\n  onChange?: (isCheched: boolean) => Promisable<void>\n}\nexport function Checkbox({ label, onChange, ...originalProps }: CheckboxProps) {\n  const key = useMemo(\n    () => `${originalProps.name}-${String(originalProps.defaultChecked)}`,\n    [originalProps.defaultChecked, originalProps.name]\n  )\n\n  const handleChange = useCallback(\n    (_: ValueType | undefined, isChecked: boolean) => {\n      if (!onChange) {\n        return\n      }\n\n      onChange(isChecked)\n    },\n    [onChange]\n  )\n\n  return (\n    <RsuiteCheckbox key={key} id={originalProps.name} onChange={handleChange} {...originalProps}>\n      {label}\n    </RsuiteCheckbox>\n  )\n}\n"],"names":["_jsx","RsuiteCheckbox"],"mappings":";;;;AAYM,SAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAiB,EAAA;AAC3E,IAAA,MAAM,GAAG,GAAG,OAAO,CACjB,MAAM,CAAA,EAAG,aAAa,CAAC,IAAI,CAAA,CAAA,EAAI,MAAM,CAAC,aAAa,CAAC,cAAc,CAAC,CAAA,CAAE,EACrE,CAAC,aAAa,CAAC,cAAc,EAAE,aAAa,CAAC,IAAI,CAAC,CACnD,CAAA;IAED,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,CAAwB,EAAE,SAAkB,KAAI;QAC/C,IAAI,CAAC,QAAQ,EAAE;YACb,OAAM;AACP,SAAA;QAED,QAAQ,CAAC,SAAS,CAAC,CAAA;AACrB,KAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAA;IAED,QACEA,IAACC,UAAc,EAAA,EAAW,EAAE,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,KAAM,aAAa,EAAA,QAAA,EACxF,KAAK,EADa,EAAA,GAAG,CAEP,EAClB;AACH;;;;"}

package/src/fields/MultiSelect.js

@@ -1,9 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
 import { TagPicker } from 'rsuite';
 import styled from 'styled-components';
+import { Field } from '../elements/Field.js';
+import { Label } from '../elements/Label.js';
 
-function MultiSelect({ fixedWidth = 5, onChange, options, 
+function MultiSelect({ fixedWidth = 5, isLabelHidden = false, label, 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]);
@@ -14,7 +16,7 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = !nextValue || !nextValue.length ? undefined : nextValue;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return (jsx(StyledTagPicker, { data: options, fixedWidth: fixedWidth, onChange: handleChange, searchable: searchable, ...originalProps }, key));
+    return (jsxs(Field, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledTagPicker, { data: options, fixedWidth: fixedWidth, id: originalProps.name, 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.

package/src/fields/MultiSelect.js.map

@@ -1 +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;;;;"}
+{"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 { Field } from '../elements/Field'\nimport { Label } from '../elements/Label'\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' | 'id' | 'onChange' | 'value'> & {\n  defaultValue?: string[]\n  /** Width in REM */\n  fixedWidth?: number\n  isLabelHidden?: boolean\n  label: string\n  name: string\n  onChange?: (nextValue: string[] | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function MultiSelect({\n  fixedWidth = 5,\n  isLabelHidden = false,\n  label,\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    <Field>\n      <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>\n        {label}\n      </Label>\n\n      <StyledTagPicker\n        key={key}\n        data={options}\n        fixedWidth={fixedWidth}\n        id={originalProps.name}\n        onChange={handleChange}\n        searchable={searchable}\n        {...originalProps}\n      />\n    </Field>\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":["_jsxs","_jsx"],"mappings":";;;;;;;SAqBgB,WAAW,CAAC,EAC1B,UAAU,GAAG,CAAC,EACd,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,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,KAAC,KAAK,EAAA,EAAA,QAAA,EAAA,CACJC,IAAC,KAAK,EAAA,EAAC,OAAO,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,EACxD,QAAA,EAAA,KAAK,GACA,EAERA,GAAA,CAAC,eAAe,EAAA,EAEd,IAAI,EAAE,OAAO,EACb,UAAU,EAAE,UAAU,EACtB,EAAE,EAAE,aAAa,CAAC,IAAI,EACtB,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,IANZ,GAAG,CAOR,CACI,EAAA,CAAA,EACT;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,9 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
 import { SelectPicker } from 'rsuite';
 import styled from 'styled-components';
+import { Field } from '../elements/Field.js';
+import { Label } from '../elements/Label.js';
 
-function Select({ onChange, options, 
+function Select({ isLabelHidden = false, label, 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]);
@@ -14,10 +16,10 @@ searchable = false, ...originalProps }) {
         const normalizedNextValue = nextValue ?? undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
-    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));
+    return (jsxs(Field, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledSelectPicker, { data: options, id: originalProps.name, 
+                // 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) ``;
 

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 } 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;;;;"}
+{"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 { Field } from '../elements/Field'\nimport { Label } from '../elements/Label'\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' | 'id' | 'onChange' | 'value'> & {\n  defaultValue?: string\n  isLabelHidden?: boolean\n  label: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n  options: Option[]\n}\nexport function Select({\n  isLabelHidden = false,\n  label,\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    <Field>\n      <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>\n        {label}\n      </Label>\n\n      <StyledSelectPicker\n        key={key}\n        data={options}\n        id={originalProps.name}\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    </Field>\n  )\n}\n\nconst StyledSelectPicker = styled(SelectPicker)``\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAmBgB,SAAA,MAAM,CAAC,EACrB,aAAa,GAAG,KAAK,EACrB,KAAK,EACL,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,IAAA,CAAC,KAAK,EAAA,EAAA,QAAA,EAAA,CACJC,GAAC,CAAA,KAAK,EAAC,EAAA,OAAO,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAA,QAAA,EACxD,KAAK,EAAA,CACA,EAERA,GAAA,CAAC,kBAAkB,EAEjB,EAAA,IAAI,EAAE,OAAO,EACb,EAAE,EAAE,aAAa,CAAC,IAAI;;;AAGtB,gBAAA,QAAQ,EAAE,YAAmB,EAC7B,UAAU,EAAE,UAAU,EAClB,GAAA,aAAa,EAPZ,EAAA,GAAG,CAQR,CAAA,EAAA,CACI,EACT;AACH,CAAC;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAA,EAAE;;;;"}

package/src/fields/TextInput.js

@@ -1,9 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
 import { Input } from 'rsuite';
 import styled from 'styled-components';
+import { Field } from '../elements/Field.js';
+import { Label } from '../elements/Label.js';
 
-function TextInput({ onChange, ...originalProps }) {
+function TextInput({ isLabelHidden = false, label, onChange, ...originalProps }) {
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
     const handleChange = useCallback((nextValue) => {
         if (!onChange) {
@@ -12,10 +14,11 @@ function TextInput({ onChange, ...originalProps }) {
         const normalizedNextValue = nextValue && nextValue.trim().length ? nextValue : undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return jsx(StyledInput, { onChange: handleChange, ...originalProps }, key);
+    return (jsxs(Field, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { id: originalProps.name, onChange: handleChange, ...originalProps }, key)] }));
 }
 const StyledInput = styled(Input) `
-  background-color: ${p => p.theme.color.white};
+  background-color: ${p => p.theme.color.gainsboro};
+  width: 100%;
 `;
 
 export { StyledInput, TextInput };

package/src/fields/TextInput.js.map

@@ -1 +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;;;;;"}
+{"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 { Field } from '../elements/Field'\nimport { Label } from '../elements/Label'\n\nimport type { InputProps } from 'rsuite'\nimport type { Promisable } from 'type-fest'\n\nexport type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {\n  defaultValue?: string\n  isLabelHidden?: boolean\n  label: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n}\nexport function TextInput({ isLabelHidden = false, label, 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 (\n    <Field>\n      <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>\n        {label}\n      </Label>\n\n      <StyledInput key={key} id={originalProps.name} onChange={handleChange} {...originalProps} />\n    </Field>\n  )\n}\n\nexport const StyledInput = styled(Input)`\n  background-color: ${p => p.theme.color.gainsboro};\n  width: 100%;\n`\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAiBgB,SAAA,SAAS,CAAC,EAAE,aAAa,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,aAAa,EAAkB,EAAA;AACpG,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;AAED,IAAA,QACEA,IAAC,CAAA,KAAK,EACJ,EAAA,QAAA,EAAA,CAAAC,GAAA,CAAC,KAAK,EAAC,EAAA,OAAO,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,YACxD,KAAK,EAAA,CACA,EAERA,GAAA,CAAC,WAAW,EAAW,EAAA,EAAE,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,KAAM,aAAa,EAAA,EAAtE,GAAG,CAAuE,CAAA,EAAA,CACtF,EACT;AACH,CAAC;MAEY,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA;sBAClB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAA;;;;;;"}

package/src/fields/Textarea.js

@@ -1,9 +1,11 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback } from 'react';
 import { Input } from 'rsuite';
 import styled from 'styled-components';
+import { Field } from '../elements/Field.js';
+import { Label } from '../elements/Label.js';
 
-function Textarea({ onChange, rows = 3, ...originalProps }) {
+function Textarea({ isLabelHidden = false, label, onChange, rows = 3, ...originalProps }) {
     const inputRef = useRef();
     const key = useMemo(() => `${originalProps.name}-${JSON.stringify(originalProps.defaultValue)}`, [originalProps.defaultValue, originalProps.name]);
     const handleChange = useCallback(() => {
@@ -14,9 +16,13 @@ function Textarea({ onChange, rows = 3, ...originalProps }) {
         const normalizedNextValue = nextValue.length ? nextValue : undefined;
         onChange(normalizedNextValue);
     }, [onChange]);
-    return jsx(StyledInput, { ref: inputRef, as: "textarea", onChange: handleChange, rows: rows, ...originalProps }, key);
+    return (jsxs(Field, { children: [jsx(Label, { htmlFor: originalProps.name, isHidden: isLabelHidden, children: label }), jsx(StyledInput, { ref: inputRef, as: "textarea", id: originalProps.name, onChange: handleChange, rows: rows, ...originalProps }, key)] }));
 }
-const StyledInput = styled(Input) ``;
+const StyledInput = styled(Input) `
+  background-color: ${p => p.theme.color.gainsboro};
+  border: 0;
+  width: 100%;
+`;
 
 export { StyledInput, Textarea };
 //# sourceMappingURL=Textarea.js.map

package/src/fields/Textarea.js.map

@@ -1 +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;;;;"}
+{"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 { Field } from '../elements/Field'\nimport { Label } from '../elements/Label'\n\nimport type { MutableRefObject, TextareaHTMLAttributes } from 'react'\nimport type { Promisable } from 'type-fest'\n\nexport type TextareaProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'defaultValue' | 'id' | 'onChange' | 'value'\n> & {\n  defaultValue?: string\n  isLabelHidden?: boolean\n  label: string\n  name: string\n  onChange?: (nextValue: string | undefined) => Promisable<void>\n}\nexport function Textarea({ isLabelHidden = false, label, 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 (\n    <Field>\n      <Label htmlFor={originalProps.name} isHidden={isLabelHidden}>\n        {label}\n      </Label>\n\n      <StyledInput\n        key={key}\n        ref={inputRef}\n        as=\"textarea\"\n        id={originalProps.name}\n        onChange={handleChange}\n        rows={rows}\n        {...originalProps}\n      />\n    </Field>\n  )\n}\n\nexport const StyledInput = styled(Input)`\n  background-color: ${p => p.theme.color.gainsboro};\n  border: 0;\n  width: 100%;\n`\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;SAoBgB,QAAQ,CAAC,EAAE,aAAa,GAAG,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,GAAG,CAAC,EAAE,GAAG,aAAa,EAAiB,EAAA;AAC5G,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,QACEA,KAAC,KAAK,EAAA,EAAA,QAAA,EAAA,CACJC,IAAC,KAAK,EAAA,EAAC,OAAO,EAAE,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,EACxD,QAAA,EAAA,KAAK,GACA,EAERA,GAAA,CAAC,WAAW,EAAA,EAEV,GAAG,EAAE,QAAQ,EACb,EAAE,EAAC,UAAU,EACb,EAAE,EAAE,aAAa,CAAC,IAAI,EACtB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,IAAI,EACN,GAAA,aAAa,IANZ,GAAG,CAOR,CACI,EAAA,CAAA,EACT;AACH,CAAC;MAEY,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA;sBAClB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAA;;;;;;;"}