@form-eng/fluent 1.0.0 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +10 -1
  2. package/dist/index.d.mts +57 -19
  3. package/dist/index.d.ts +57 -19
  4. package/dist/index.js +508 -65
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +498 -64
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +2 -1
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @form-eng/fluent
2
2
 
3
- Fluent UI v9 field components for [`@form-eng/core`](https://www.npmjs.com/package/@form-eng/core). Provides 13 editable and 6 read-only field types that plug into the core form engine.
3
+ Fluent UI v9 field components for [`@form-eng/core`](https://www.npmjs.com/package/@form-eng/core). Provides 22 editable and 6 read-only field types that plug into the core form engine.
4
4
 
5
5
  ## Install
6
6
 
@@ -81,6 +81,15 @@ function App() {
81
81
  | `DocumentLinks` | `HookDocumentLinks` | URL link CRUD |
82
82
  | `StatusDropdown` | `HookStatusDropdown` | Dropdown with color status indicator |
83
83
  | `DynamicFragment` | `HookFragment` | Hidden field (form state only) |
84
+ | `RadioGroup` | `HookRadioGroup` | Single-select radio button group |
85
+ | `CheckboxGroup` | `HookCheckboxGroup` | Multi-select checkbox group (value: `string[]`) |
86
+ | `Rating` | `HookRating` | Star rating input (value: `number`; configurable `max`, `allowHalf`) |
87
+ | `ColorPicker` | `HookColorPicker` | Native color picker returning hex string |
88
+ | `Autocomplete` | `HookAutocomplete` | Searchable single-select with type-ahead |
89
+ | `FileUpload` | `HookFileUpload` | File picker (single or multiple); validates size via `config.maxSizeMb` |
90
+ | `DateRange` | `HookDateRange` | Two date inputs (From / To); value: `{ start, end }` ISO strings |
91
+ | `DateTime` | `HookDateTime` | Combined date+time input; value: ISO datetime-local string |
92
+ | `PhoneInput` | `HookPhoneInput` | Phone input with inline masking (`us`, `international`, `raw` formats) |
84
93
 
85
94
  ### Read-Only Fields
86
95
 
package/dist/index.d.mts CHANGED
@@ -4,45 +4,45 @@ import React from 'react';
4
4
  import { FieldError } from 'react-hook-form';
5
5
  import { OptionOnSelectData } from '@fluentui/react-components';
6
6
 
7
- interface IHookTextboxProps {
7
+ interface ITextboxProps {
8
8
  ellipsifyTextCharacters?: number;
9
9
  placeHolder?: string;
10
10
  multiline?: boolean;
11
11
  }
12
- declare const Textbox: (props: IFieldProps<IHookTextboxProps>) => react_jsx_runtime.JSX.Element;
12
+ declare const Textbox: (props: IFieldProps<ITextboxProps>) => react_jsx_runtime.JSX.Element;
13
13
 
14
14
  declare const NumberField: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
15
15
 
16
16
  declare const Toggle: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
17
17
 
18
- interface IHookDropdownProps {
18
+ interface IDropdownProps {
19
19
  placeHolder?: string;
20
20
  setDefaultKeyIfOnlyOneOption?: boolean;
21
21
  }
22
- declare const DropdownField: (props: IFieldProps<IHookDropdownProps>) => react_jsx_runtime.JSX.Element;
22
+ declare const DropdownField: (props: IFieldProps<IDropdownProps>) => react_jsx_runtime.JSX.Element;
23
23
 
24
24
  declare const MultiSelect: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
25
25
 
26
26
  declare const DateControl: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
27
27
 
28
- interface IHookSliderProps {
28
+ interface ISliderProps {
29
29
  max?: number;
30
30
  min?: number;
31
31
  step?: number;
32
32
  }
33
- declare const SliderField: (props: IFieldProps<IHookSliderProps>) => react_jsx_runtime.JSX.Element;
33
+ declare const SliderField: (props: IFieldProps<ISliderProps>) => react_jsx_runtime.JSX.Element;
34
34
 
35
35
  declare const Fragment: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
36
36
 
37
- interface IHookSimpleDropdownProps {
37
+ interface ISimpleDropdownProps {
38
38
  dropdownOptions?: string[];
39
39
  placeHolder?: string;
40
40
  }
41
- declare const SimpleDropdown: (props: IFieldProps<IHookSimpleDropdownProps>) => react_jsx_runtime.JSX.Element;
41
+ declare const SimpleDropdown: (props: IFieldProps<ISimpleDropdownProps>) => react_jsx_runtime.JSX.Element;
42
42
 
43
43
  declare const MultiSelectSearch: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
44
44
 
45
- interface IHookPopOutEditorProps {
45
+ interface IPopOutEditorProps {
46
46
  autoAdjustHeight?: boolean;
47
47
  numberOfRows?: number;
48
48
  ellipsifyTextCharacters?: number;
@@ -51,15 +51,53 @@ interface IHookPopOutEditorProps {
51
51
  saveCallback?: () => void;
52
52
  renderExtraModalFooter?: () => React.ReactNode;
53
53
  }
54
- declare const PopOutEditor: (props: IFieldProps<IHookPopOutEditorProps>) => react_jsx_runtime.JSX.Element;
54
+ declare const PopOutEditor: (props: IFieldProps<IPopOutEditorProps>) => react_jsx_runtime.JSX.Element;
55
55
 
56
56
  declare const DocumentLinksField: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
57
57
 
58
- interface IHookStatusDropdownProps {
58
+ interface IStatusDropdownProps$1 {
59
59
  placeHolder?: string;
60
60
  statusColors?: Dictionary<string>;
61
61
  }
62
- declare const StatusDropdownField: (props: IFieldProps<IHookStatusDropdownProps>) => react_jsx_runtime.JSX.Element;
62
+ declare const StatusDropdownField: (props: IFieldProps<IStatusDropdownProps$1>) => react_jsx_runtime.JSX.Element;
63
+
64
+ declare const RadioGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
65
+
66
+ declare const CheckboxGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
67
+
68
+ interface IRatingConfig {
69
+ max?: number;
70
+ allowHalf?: boolean;
71
+ }
72
+ declare const Rating: (props: IFieldProps<IRatingConfig>) => react_jsx_runtime.JSX.Element;
73
+
74
+ declare const ColorPicker: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
75
+
76
+ declare const Autocomplete: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
77
+
78
+ interface IFileUploadConfig {
79
+ multiple?: boolean;
80
+ accept?: string;
81
+ maxSizeMb?: number;
82
+ }
83
+ declare const FileUpload: (props: IFieldProps<IFileUploadConfig>) => react_jsx_runtime.JSX.Element;
84
+
85
+ interface IDateRangeConfig {
86
+ minDate?: string;
87
+ maxDate?: string;
88
+ }
89
+ declare const DateRange: (props: IFieldProps<IDateRangeConfig>) => react_jsx_runtime.JSX.Element;
90
+
91
+ interface IDateTimeConfig {
92
+ minDateTime?: string;
93
+ maxDateTime?: string;
94
+ }
95
+ declare const DateTime: (props: IFieldProps<IDateTimeConfig>) => react_jsx_runtime.JSX.Element;
96
+
97
+ interface IPhoneInputConfig {
98
+ format?: "us" | "international" | "raw";
99
+ }
100
+ declare const PhoneInput: (props: IFieldProps<IPhoneInputConfig>) => react_jsx_runtime.JSX.Element;
63
101
 
64
102
  interface IReadOnlyFieldProps {
65
103
  readonly value?: string;
@@ -72,22 +110,22 @@ interface IReadOnlyFieldProps {
72
110
  }
73
111
  declare const ReadOnlyText: React.FunctionComponent<IReadOnlyFieldProps>;
74
112
 
75
- interface IHookReadOnlyProps extends IReadOnlyFieldProps {
113
+ interface IReadOnlyFieldComponentProps extends IReadOnlyFieldProps {
76
114
  }
77
- declare const ReadOnly: (props: IFieldProps<IHookReadOnlyProps>) => react_jsx_runtime.JSX.Element;
115
+ declare const ReadOnly: (props: IFieldProps<IReadOnlyFieldComponentProps>) => react_jsx_runtime.JSX.Element;
78
116
 
79
117
  declare const ReadOnlyArray: (props: IFieldProps<IReadOnlyFieldProps>) => react_jsx_runtime.JSX.Element;
80
118
 
81
- interface IHookReadOnlyDateTimeProps {
119
+ interface IReadOnlyDateTimeProps {
82
120
  isListView?: boolean;
83
121
  hidetimeStamp?: boolean;
84
122
  }
85
- declare const ReadOnlyDateTime: (props: IFieldProps<IHookReadOnlyDateTimeProps>) => react_jsx_runtime.JSX.Element;
123
+ declare const ReadOnlyDateTime: (props: IFieldProps<IReadOnlyDateTimeProps>) => react_jsx_runtime.JSX.Element;
86
124
 
87
- interface IHookReadOnlyCumulativeNumberProps extends IReadOnlyFieldProps {
125
+ interface IReadOnlyCumulativeNumberProps extends IReadOnlyFieldProps {
88
126
  dependencyFields?: string[];
89
127
  }
90
- declare const ReadOnlyCumulativeNumber: (props: IFieldProps<IHookReadOnlyCumulativeNumberProps>) => react_jsx_runtime.JSX.Element;
128
+ declare const ReadOnlyCumulativeNumber: (props: IFieldProps<IReadOnlyCumulativeNumberProps>) => react_jsx_runtime.JSX.Element;
91
129
 
92
130
  declare const ReadOnlyRichText: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
93
131
 
@@ -187,4 +225,4 @@ declare const DocumentLinksStrings: {
187
225
  save: string;
188
226
  };
189
227
 
190
- export { DateControl, DocumentLink, DocumentLinks, DocumentLinksField, DocumentLinksStrings, DropdownField, FieldClassName, FormLoading, Fragment, GetFieldDataTestId, type IDocumentLink, type IReadOnlyFieldProps, MultiSelect, MultiSelectSearch, NumberField, PopOutEditor, ReadOnly, ReadOnlyArray, ReadOnlyCumulativeNumber, ReadOnlyDateTime, ReadOnlyRichText, ReadOnlyText, ReadOnlyWithButton, SimpleDropdown, SliderField, StatusColor, StatusDropdown, StatusDropdownField, StatusMessage, Textbox, Toggle, createFluentFieldRegistry, formatDateTime };
228
+ export { Autocomplete as AutocompleteField, CheckboxGroup as CheckboxGroupField, ColorPicker as ColorPickerField, DateControl, DateRange as DateRangeField, DateTime as DateTimeField, DocumentLink, DocumentLinks, DocumentLinksField, DocumentLinksStrings, DropdownField, FieldClassName, FileUpload as FileUploadField, FormLoading, Fragment, GetFieldDataTestId, type IDocumentLink, type IReadOnlyFieldProps, MultiSelect, MultiSelectSearch, NumberField, PhoneInput as PhoneInputField, PopOutEditor, RadioGroup as RadioGroupField, Rating as RatingField, ReadOnly, ReadOnlyArray, ReadOnlyCumulativeNumber, ReadOnlyDateTime, ReadOnlyRichText, ReadOnlyText, ReadOnlyWithButton, SimpleDropdown, SliderField, StatusColor, StatusDropdown, StatusDropdownField, StatusMessage, Textbox, Toggle, createFluentFieldRegistry, formatDateTime };
package/dist/index.d.ts CHANGED
@@ -4,45 +4,45 @@ import React from 'react';
4
4
  import { FieldError } from 'react-hook-form';
5
5
  import { OptionOnSelectData } from '@fluentui/react-components';
6
6
 
7
- interface IHookTextboxProps {
7
+ interface ITextboxProps {
8
8
  ellipsifyTextCharacters?: number;
9
9
  placeHolder?: string;
10
10
  multiline?: boolean;
11
11
  }
12
- declare const Textbox: (props: IFieldProps<IHookTextboxProps>) => react_jsx_runtime.JSX.Element;
12
+ declare const Textbox: (props: IFieldProps<ITextboxProps>) => react_jsx_runtime.JSX.Element;
13
13
 
14
14
  declare const NumberField: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
15
15
 
16
16
  declare const Toggle: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
17
17
 
18
- interface IHookDropdownProps {
18
+ interface IDropdownProps {
19
19
  placeHolder?: string;
20
20
  setDefaultKeyIfOnlyOneOption?: boolean;
21
21
  }
22
- declare const DropdownField: (props: IFieldProps<IHookDropdownProps>) => react_jsx_runtime.JSX.Element;
22
+ declare const DropdownField: (props: IFieldProps<IDropdownProps>) => react_jsx_runtime.JSX.Element;
23
23
 
24
24
  declare const MultiSelect: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
25
25
 
26
26
  declare const DateControl: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
27
27
 
28
- interface IHookSliderProps {
28
+ interface ISliderProps {
29
29
  max?: number;
30
30
  min?: number;
31
31
  step?: number;
32
32
  }
33
- declare const SliderField: (props: IFieldProps<IHookSliderProps>) => react_jsx_runtime.JSX.Element;
33
+ declare const SliderField: (props: IFieldProps<ISliderProps>) => react_jsx_runtime.JSX.Element;
34
34
 
35
35
  declare const Fragment: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
36
36
 
37
- interface IHookSimpleDropdownProps {
37
+ interface ISimpleDropdownProps {
38
38
  dropdownOptions?: string[];
39
39
  placeHolder?: string;
40
40
  }
41
- declare const SimpleDropdown: (props: IFieldProps<IHookSimpleDropdownProps>) => react_jsx_runtime.JSX.Element;
41
+ declare const SimpleDropdown: (props: IFieldProps<ISimpleDropdownProps>) => react_jsx_runtime.JSX.Element;
42
42
 
43
43
  declare const MultiSelectSearch: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
44
44
 
45
- interface IHookPopOutEditorProps {
45
+ interface IPopOutEditorProps {
46
46
  autoAdjustHeight?: boolean;
47
47
  numberOfRows?: number;
48
48
  ellipsifyTextCharacters?: number;
@@ -51,15 +51,53 @@ interface IHookPopOutEditorProps {
51
51
  saveCallback?: () => void;
52
52
  renderExtraModalFooter?: () => React.ReactNode;
53
53
  }
54
- declare const PopOutEditor: (props: IFieldProps<IHookPopOutEditorProps>) => react_jsx_runtime.JSX.Element;
54
+ declare const PopOutEditor: (props: IFieldProps<IPopOutEditorProps>) => react_jsx_runtime.JSX.Element;
55
55
 
56
56
  declare const DocumentLinksField: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
57
57
 
58
- interface IHookStatusDropdownProps {
58
+ interface IStatusDropdownProps$1 {
59
59
  placeHolder?: string;
60
60
  statusColors?: Dictionary<string>;
61
61
  }
62
- declare const StatusDropdownField: (props: IFieldProps<IHookStatusDropdownProps>) => react_jsx_runtime.JSX.Element;
62
+ declare const StatusDropdownField: (props: IFieldProps<IStatusDropdownProps$1>) => react_jsx_runtime.JSX.Element;
63
+
64
+ declare const RadioGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
65
+
66
+ declare const CheckboxGroup: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
67
+
68
+ interface IRatingConfig {
69
+ max?: number;
70
+ allowHalf?: boolean;
71
+ }
72
+ declare const Rating: (props: IFieldProps<IRatingConfig>) => react_jsx_runtime.JSX.Element;
73
+
74
+ declare const ColorPicker: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
75
+
76
+ declare const Autocomplete: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
77
+
78
+ interface IFileUploadConfig {
79
+ multiple?: boolean;
80
+ accept?: string;
81
+ maxSizeMb?: number;
82
+ }
83
+ declare const FileUpload: (props: IFieldProps<IFileUploadConfig>) => react_jsx_runtime.JSX.Element;
84
+
85
+ interface IDateRangeConfig {
86
+ minDate?: string;
87
+ maxDate?: string;
88
+ }
89
+ declare const DateRange: (props: IFieldProps<IDateRangeConfig>) => react_jsx_runtime.JSX.Element;
90
+
91
+ interface IDateTimeConfig {
92
+ minDateTime?: string;
93
+ maxDateTime?: string;
94
+ }
95
+ declare const DateTime: (props: IFieldProps<IDateTimeConfig>) => react_jsx_runtime.JSX.Element;
96
+
97
+ interface IPhoneInputConfig {
98
+ format?: "us" | "international" | "raw";
99
+ }
100
+ declare const PhoneInput: (props: IFieldProps<IPhoneInputConfig>) => react_jsx_runtime.JSX.Element;
63
101
 
64
102
  interface IReadOnlyFieldProps {
65
103
  readonly value?: string;
@@ -72,22 +110,22 @@ interface IReadOnlyFieldProps {
72
110
  }
73
111
  declare const ReadOnlyText: React.FunctionComponent<IReadOnlyFieldProps>;
74
112
 
75
- interface IHookReadOnlyProps extends IReadOnlyFieldProps {
113
+ interface IReadOnlyFieldComponentProps extends IReadOnlyFieldProps {
76
114
  }
77
- declare const ReadOnly: (props: IFieldProps<IHookReadOnlyProps>) => react_jsx_runtime.JSX.Element;
115
+ declare const ReadOnly: (props: IFieldProps<IReadOnlyFieldComponentProps>) => react_jsx_runtime.JSX.Element;
78
116
 
79
117
  declare const ReadOnlyArray: (props: IFieldProps<IReadOnlyFieldProps>) => react_jsx_runtime.JSX.Element;
80
118
 
81
- interface IHookReadOnlyDateTimeProps {
119
+ interface IReadOnlyDateTimeProps {
82
120
  isListView?: boolean;
83
121
  hidetimeStamp?: boolean;
84
122
  }
85
- declare const ReadOnlyDateTime: (props: IFieldProps<IHookReadOnlyDateTimeProps>) => react_jsx_runtime.JSX.Element;
123
+ declare const ReadOnlyDateTime: (props: IFieldProps<IReadOnlyDateTimeProps>) => react_jsx_runtime.JSX.Element;
86
124
 
87
- interface IHookReadOnlyCumulativeNumberProps extends IReadOnlyFieldProps {
125
+ interface IReadOnlyCumulativeNumberProps extends IReadOnlyFieldProps {
88
126
  dependencyFields?: string[];
89
127
  }
90
- declare const ReadOnlyCumulativeNumber: (props: IFieldProps<IHookReadOnlyCumulativeNumberProps>) => react_jsx_runtime.JSX.Element;
128
+ declare const ReadOnlyCumulativeNumber: (props: IFieldProps<IReadOnlyCumulativeNumberProps>) => react_jsx_runtime.JSX.Element;
91
129
 
92
130
  declare const ReadOnlyRichText: (props: IFieldProps<{}>) => react_jsx_runtime.JSX.Element;
93
131
 
@@ -187,4 +225,4 @@ declare const DocumentLinksStrings: {
187
225
  save: string;
188
226
  };
189
227
 
190
- export { DateControl, DocumentLink, DocumentLinks, DocumentLinksField, DocumentLinksStrings, DropdownField, FieldClassName, FormLoading, Fragment, GetFieldDataTestId, type IDocumentLink, type IReadOnlyFieldProps, MultiSelect, MultiSelectSearch, NumberField, PopOutEditor, ReadOnly, ReadOnlyArray, ReadOnlyCumulativeNumber, ReadOnlyDateTime, ReadOnlyRichText, ReadOnlyText, ReadOnlyWithButton, SimpleDropdown, SliderField, StatusColor, StatusDropdown, StatusDropdownField, StatusMessage, Textbox, Toggle, createFluentFieldRegistry, formatDateTime };
228
+ export { Autocomplete as AutocompleteField, CheckboxGroup as CheckboxGroupField, ColorPicker as ColorPickerField, DateControl, DateRange as DateRangeField, DateTime as DateTimeField, DocumentLink, DocumentLinks, DocumentLinksField, DocumentLinksStrings, DropdownField, FieldClassName, FileUpload as FileUploadField, FormLoading, Fragment, GetFieldDataTestId, type IDocumentLink, type IReadOnlyFieldProps, MultiSelect, MultiSelectSearch, NumberField, PhoneInput as PhoneInputField, PopOutEditor, RadioGroup as RadioGroupField, Rating as RatingField, ReadOnly, ReadOnlyArray, ReadOnlyCumulativeNumber, ReadOnlyDateTime, ReadOnlyRichText, ReadOnlyText, ReadOnlyWithButton, SimpleDropdown, SliderField, StatusColor, StatusDropdown, StatusDropdownField, StatusMessage, Textbox, Toggle, createFluentFieldRegistry, formatDateTime };