@dxos/react-ui-form 0.8.4-main.66e292d → 0.8.4-main.69d29f4

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 (170) hide show
  1. package/dist/lib/browser/index.mjs +2212 -2284
  2. package/dist/lib/browser/index.mjs.map +4 -4
  3. package/dist/lib/browser/meta.json +1 -1
  4. package/dist/lib/node-esm/index.mjs +2212 -2284
  5. package/dist/lib/node-esm/index.mjs.map +4 -4
  6. package/dist/lib/node-esm/meta.json +1 -1
  7. package/dist/types/src/components/ControlSection/ControlSection.d.ts +2 -2
  8. package/dist/types/src/components/ControlSection/ControlSection.d.ts.map +1 -1
  9. package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts +7 -4
  10. package/dist/types/src/components/ControlSection/ControlSection.stories.d.ts.map +1 -1
  11. package/dist/types/src/components/FieldEditor/FieldEditor.d.ts +6 -5
  12. package/dist/types/src/components/FieldEditor/FieldEditor.d.ts.map +1 -1
  13. package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts +9 -3
  14. package/dist/types/src/components/FieldEditor/FieldEditor.stories.d.ts.map +1 -1
  15. package/dist/types/src/components/Form/Form-old.stories.d.ts +131 -0
  16. package/dist/types/src/components/Form/Form-old.stories.d.ts.map +1 -0
  17. package/dist/types/src/components/Form/Form.d.ts +81 -27
  18. package/dist/types/src/components/Form/Form.d.ts.map +1 -1
  19. package/dist/types/src/components/Form/Form.stories.d.ts +53 -92
  20. package/dist/types/src/components/Form/Form.stories.d.ts.map +1 -1
  21. package/dist/types/src/components/Form/FormField.d.ts +37 -0
  22. package/dist/types/src/components/Form/FormField.d.ts.map +1 -0
  23. package/dist/types/src/components/Form/FormFieldComponent.d.ts +78 -0
  24. package/dist/types/src/components/Form/FormFieldComponent.d.ts.map +1 -0
  25. package/dist/types/src/components/Form/FormFieldComponent.stories.d.ts +9 -0
  26. package/dist/types/src/components/Form/FormFieldComponent.stories.d.ts.map +1 -0
  27. package/dist/types/src/components/Form/FormFieldSet.d.ts +19 -0
  28. package/dist/types/src/components/Form/FormFieldSet.d.ts.map +1 -0
  29. package/dist/types/src/components/Form/fields/ArrayField.d.ts +18 -0
  30. package/dist/types/src/components/Form/fields/ArrayField.d.ts.map +1 -0
  31. package/dist/types/src/components/Form/fields/BooleanField.d.ts +4 -0
  32. package/dist/types/src/components/Form/fields/BooleanField.d.ts.map +1 -0
  33. package/dist/types/src/components/Form/fields/GeoPointField.d.ts +5 -0
  34. package/dist/types/src/components/Form/fields/GeoPointField.d.ts.map +1 -0
  35. package/dist/types/src/components/Form/fields/MarkdownField.d.ts +4 -0
  36. package/dist/types/src/components/Form/fields/MarkdownField.d.ts.map +1 -0
  37. package/dist/types/src/components/Form/fields/NumberField.d.ts +4 -0
  38. package/dist/types/src/components/Form/fields/NumberField.d.ts.map +1 -0
  39. package/dist/types/src/components/Form/fields/RefField.d.ts +14 -0
  40. package/dist/types/src/components/Form/fields/RefField.d.ts.map +1 -0
  41. package/dist/types/src/components/Form/fields/SelectField.d.ts +10 -0
  42. package/dist/types/src/components/Form/fields/SelectField.d.ts.map +1 -0
  43. package/dist/types/src/components/Form/fields/SelectOptionField.d.ts +5 -0
  44. package/dist/types/src/components/Form/fields/SelectOptionField.d.ts.map +1 -0
  45. package/dist/types/src/components/Form/{custom/SelectOptionsInput.stories.d.ts → fields/SelectOptionField.stories.d.ts} +6 -3
  46. package/dist/types/src/components/Form/fields/SelectOptionField.stories.d.ts.map +1 -0
  47. package/dist/types/src/components/Form/fields/TextAreaField.d.ts +4 -0
  48. package/dist/types/src/components/Form/fields/TextAreaField.d.ts.map +1 -0
  49. package/dist/types/src/components/Form/fields/TextField.d.ts +4 -0
  50. package/dist/types/src/components/Form/fields/TextField.d.ts.map +1 -0
  51. package/dist/types/src/components/Form/fields/TupleField.d.ts +6 -0
  52. package/dist/types/src/components/Form/fields/TupleField.d.ts.map +1 -0
  53. package/dist/types/src/components/Form/fields/index.d.ts +12 -0
  54. package/dist/types/src/components/Form/fields/index.d.ts.map +1 -0
  55. package/dist/types/src/components/Form/index.d.ts +2 -4
  56. package/dist/types/src/components/Form/index.d.ts.map +1 -1
  57. package/dist/types/src/components/ObjectPicker/ObjectPicker.d.ts +14 -9
  58. package/dist/types/src/components/ObjectPicker/ObjectPicker.d.ts.map +1 -1
  59. package/dist/types/src/components/ObjectPicker/ObjectPicker.stories.d.ts +5 -2
  60. package/dist/types/src/components/ObjectPicker/ObjectPicker.stories.d.ts.map +1 -1
  61. package/dist/types/src/components/ViewEditor/ViewEditor.d.ts +6 -8
  62. package/dist/types/src/components/ViewEditor/ViewEditor.d.ts.map +1 -1
  63. package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts +5 -2
  64. package/dist/types/src/components/ViewEditor/ViewEditor.stories.d.ts.map +1 -1
  65. package/dist/types/src/components/testing.d.ts +0 -2
  66. package/dist/types/src/components/testing.d.ts.map +1 -1
  67. package/dist/types/src/hooks/index.d.ts +2 -3
  68. package/dist/types/src/hooks/index.d.ts.map +1 -1
  69. package/dist/types/src/hooks/useFormHandler.d.ts +82 -0
  70. package/dist/types/src/hooks/useFormHandler.d.ts.map +1 -0
  71. package/dist/types/src/hooks/useKeyHandler.d.ts +6 -0
  72. package/dist/types/src/hooks/useKeyHandler.d.ts.map +1 -0
  73. package/dist/types/src/translations.d.ts +6 -3
  74. package/dist/types/src/translations.d.ts.map +1 -1
  75. package/dist/types/src/util/echo.d.ts +6 -0
  76. package/dist/types/src/util/echo.d.ts.map +1 -0
  77. package/dist/types/src/util/index.d.ts +2 -1
  78. package/dist/types/src/util/index.d.ts.map +1 -1
  79. package/dist/types/src/util/properties.d.ts +7 -0
  80. package/dist/types/src/util/properties.d.ts.map +1 -0
  81. package/dist/types/src/util/refs.d.ts +1 -2
  82. package/dist/types/src/util/refs.d.ts.map +1 -1
  83. package/dist/types/tsconfig.tsbuildinfo +1 -1
  84. package/package.json +49 -44
  85. package/src/components/ControlSection/ControlSection.tsx +8 -8
  86. package/src/components/FieldEditor/FieldEditor.stories.tsx +42 -21
  87. package/src/components/FieldEditor/FieldEditor.tsx +72 -75
  88. package/src/components/Form/Form-old.stories.tsx +314 -0
  89. package/src/components/Form/Form.stories.tsx +146 -246
  90. package/src/components/Form/Form.tsx +320 -110
  91. package/src/components/Form/FormField.tsx +286 -0
  92. package/src/components/Form/FormFieldComponent.stories.tsx +65 -0
  93. package/src/components/Form/FormFieldComponent.tsx +174 -0
  94. package/src/components/Form/FormFieldSet.tsx +125 -0
  95. package/src/components/Form/README.md +3 -0
  96. package/src/components/Form/fields/ArrayField.tsx +151 -0
  97. package/src/components/Form/fields/BooleanField.tsx +22 -0
  98. package/src/components/Form/fields/GeoPointField.tsx +120 -0
  99. package/src/components/Form/fields/MarkdownField.tsx +78 -0
  100. package/src/components/Form/fields/NumberField.tsx +39 -0
  101. package/src/components/Form/fields/RefField.tsx +181 -0
  102. package/src/components/Form/fields/SelectField.tsx +65 -0
  103. package/src/components/Form/{custom/SelectOptionsInput.stories.tsx → fields/SelectOptionField.stories.tsx} +17 -14
  104. package/src/components/Form/{custom/SelectOptionsInput.tsx → fields/SelectOptionField.tsx} +20 -14
  105. package/src/components/Form/fields/TextAreaField.tsx +38 -0
  106. package/src/components/Form/fields/TextField.tsx +38 -0
  107. package/src/components/Form/{custom/TupleInput.tsx → fields/TupleField.tsx} +15 -8
  108. package/src/components/Form/fields/index.ts +15 -0
  109. package/src/components/Form/index.ts +3 -4
  110. package/src/components/ObjectPicker/ObjectPicker.stories.tsx +15 -8
  111. package/src/components/ObjectPicker/ObjectPicker.tsx +76 -62
  112. package/src/components/ViewEditor/ViewEditor.stories.tsx +29 -25
  113. package/src/components/ViewEditor/ViewEditor.test.tsx +6 -2
  114. package/src/components/ViewEditor/ViewEditor.tsx +223 -154
  115. package/src/components/testing.tsx +9 -7
  116. package/src/hooks/index.ts +2 -3
  117. package/src/hooks/useFormHandler.ts +362 -0
  118. package/src/hooks/useKeyHandler.tsx +37 -0
  119. package/src/translations.ts +8 -6
  120. package/src/util/echo.ts +25 -0
  121. package/src/util/index.ts +2 -1
  122. package/src/util/properties.ts +18 -0
  123. package/src/util/refs.ts +7 -13
  124. package/dist/types/src/components/Form/ArrayField.d.ts +0 -16
  125. package/dist/types/src/components/Form/ArrayField.d.ts.map +0 -1
  126. package/dist/types/src/components/Form/Defaults.d.ts +0 -14
  127. package/dist/types/src/components/Form/Defaults.d.ts.map +0 -1
  128. package/dist/types/src/components/Form/FormActions.d.ts +0 -9
  129. package/dist/types/src/components/Form/FormActions.d.ts.map +0 -1
  130. package/dist/types/src/components/Form/FormContent.d.ts +0 -63
  131. package/dist/types/src/components/Form/FormContent.d.ts.map +0 -1
  132. package/dist/types/src/components/Form/FormContext.d.ts +0 -23
  133. package/dist/types/src/components/Form/FormContext.d.ts.map +0 -1
  134. package/dist/types/src/components/Form/Input.d.ts +0 -29
  135. package/dist/types/src/components/Form/Input.d.ts.map +0 -1
  136. package/dist/types/src/components/Form/RefField.d.ts +0 -22
  137. package/dist/types/src/components/Form/RefField.d.ts.map +0 -1
  138. package/dist/types/src/components/Form/custom/GeoPointInput.d.ts +0 -4
  139. package/dist/types/src/components/Form/custom/GeoPointInput.d.ts.map +0 -1
  140. package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts +0 -4
  141. package/dist/types/src/components/Form/custom/SelectOptionsInput.d.ts.map +0 -1
  142. package/dist/types/src/components/Form/custom/SelectOptionsInput.stories.d.ts.map +0 -1
  143. package/dist/types/src/components/Form/custom/TupleInput.d.ts +0 -6
  144. package/dist/types/src/components/Form/custom/TupleInput.d.ts.map +0 -1
  145. package/dist/types/src/components/Form/custom/index.d.ts +0 -4
  146. package/dist/types/src/components/Form/custom/index.d.ts.map +0 -1
  147. package/dist/types/src/components/Form/factory.d.ts +0 -8
  148. package/dist/types/src/components/Form/factory.d.ts.map +0 -1
  149. package/dist/types/src/hooks/useForm.d.ts +0 -67
  150. package/dist/types/src/hooks/useForm.d.ts.map +0 -1
  151. package/dist/types/src/hooks/useQueryRefOptions.d.ts +0 -29
  152. package/dist/types/src/hooks/useQueryRefOptions.d.ts.map +0 -1
  153. package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts +0 -8
  154. package/dist/types/src/hooks/useRefQueryLookupHandler.d.ts.map +0 -1
  155. package/dist/types/src/util/schema.d.ts +0 -3
  156. package/dist/types/src/util/schema.d.ts.map +0 -1
  157. package/src/components/Form/ArrayField.tsx +0 -127
  158. package/src/components/Form/Defaults.tsx +0 -205
  159. package/src/components/Form/FormActions.tsx +0 -59
  160. package/src/components/Form/FormContent.tsx +0 -362
  161. package/src/components/Form/FormContext.tsx +0 -110
  162. package/src/components/Form/Input.tsx +0 -54
  163. package/src/components/Form/RefField.tsx +0 -283
  164. package/src/components/Form/custom/GeoPointInput.tsx +0 -80
  165. package/src/components/Form/custom/index.ts +0 -7
  166. package/src/components/Form/factory.tsx +0 -34
  167. package/src/hooks/useForm.ts +0 -296
  168. package/src/hooks/useQueryRefOptions.ts +0 -62
  169. package/src/hooks/useRefQueryLookupHandler.ts +0 -39
  170. package/src/util/schema.ts +0 -12
@@ -1,23 +0,0 @@
1
- import React, { type FocusEvent, type PropsWithChildren, type RefObject } from 'react';
2
- import { type AnyProperties } from '@dxos/echo/internal';
3
- import { type SimpleType } from '@dxos/effect';
4
- import { type FormHandler, type FormOptions } from '../../hooks';
5
- type FormContextValue<T extends AnyProperties> = FormHandler<T>;
6
- export declare const useFormContext: <T extends AnyProperties>() => FormContextValue<T>;
7
- export declare const useFormValues: (path?: (string | number)[]) => any;
8
- export type FormInputStateProps = {
9
- getStatus: () => {
10
- status?: 'error';
11
- error?: string;
12
- };
13
- getValue: <V>() => V | undefined;
14
- onValueChange: (type: SimpleType, value: any) => void;
15
- onBlur: (event: FocusEvent<HTMLElement>) => void;
16
- };
17
- export declare const useInputProps: (path?: (string | number)[]) => FormInputStateProps;
18
- export declare const FormProvider: ({ children, formRef, autoSave, ...formOptions }: PropsWithChildren<FormOptions<any> & {
19
- formRef?: RefObject<HTMLDivElement | null>;
20
- autoSave?: boolean;
21
- }>) => React.JSX.Element;
22
- export {};
23
- //# sourceMappingURL=FormContext.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FormContext.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/FormContext.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EACZ,KAAK,UAAU,EACf,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,aAAa,EAAY,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,KAAK,UAAU,EAAkB,MAAM,cAAc,CAAC;AAE/D,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,WAAW,EAAW,MAAM,aAAa,CAAC;AAE1E,KAAK,gBAAgB,CAAC,CAAC,SAAS,aAAa,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC;AAIhE,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,aAAa,OAAK,gBAAgB,CAAC,CAAC,CAE5E,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAM,CAAC,MAAM,GAAG,MAAM,CAAC,EAAO,KAAG,GAI9D,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,MAAM;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,QAAQ,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,SAAS,CAAC;IACjC,aAAa,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACtD,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,OAAM,CAAC,MAAM,GAAG,MAAM,CAAC,EAAO,KAAG,mBAa9D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,iDAK1B,iBAAiB,CAClB,WAAW,CAAC,GAAG,CAAC,GAAG;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CACF,sBA0CA,CAAC"}
@@ -1,29 +0,0 @@
1
- import React, { type FC } from 'react';
2
- import { type Format } from '@dxos/echo/internal';
3
- import { type SimpleType } from '@dxos/effect';
4
- import { type FormInputStateProps } from './FormContext';
5
- /**
6
- * Props passed to input components.
7
- */
8
- export type InputProps = {
9
- type: SimpleType;
10
- format?: Format.TypeFormat;
11
- label: string;
12
- placeholder?: string;
13
- inputOnly?: boolean;
14
- /**
15
- * Specifies the readonly variant: either disabled inputs, elements indicating they are usually editable but currently are not; or `static`, a field’s representation as regular content without signifiers that it is ever editable.
16
- */
17
- readonly?: 'disabled-input' | 'static' | false;
18
- } & FormInputStateProps;
19
- /**
20
- * Form input component.
21
- */
22
- export type InputComponent = FC<InputProps>;
23
- export type InputHeaderProps = {
24
- error?: string;
25
- label: string;
26
- readonly?: boolean;
27
- };
28
- export declare const InputHeader: ({ error, label, readonly }: InputHeaderProps) => React.JSX.Element;
29
- //# sourceMappingURL=Input.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/Input.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,GAAG,QAAQ,GAAG,KAAK,CAAC;CAChD,GAAG,mBAAmB,CAAC;AAExB;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC;AAE5C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,4BAA4B,gBAAgB,sBAavE,CAAC"}
@@ -1,22 +0,0 @@
1
- import '@dxos/lit-ui/dx-tag-picker.pcss';
2
- import type * as Schema from 'effect/Schema';
3
- import type * as SchemaAST from 'effect/SchemaAST';
4
- import React from 'react';
5
- import { type EchoSchema } from '@dxos/echo/internal';
6
- import { type QueryRefOptions } from '../../hooks';
7
- import { type InputProps } from './Input';
8
- export type RefFieldProps = InputProps & {
9
- ast?: SchemaAST.AST;
10
- array?: boolean;
11
- createOptionLabel?: [string, {
12
- ns: string;
13
- }];
14
- createOptionIcon?: string;
15
- onCreate?: (values: any) => void;
16
- createSchema?: Schema.Schema.AnyNoContext;
17
- createInitialValuePath?: string;
18
- onQueryRefOptions?: QueryRefOptions;
19
- schema?: EchoSchema;
20
- };
21
- export declare const RefField: ({ type, label, readonly, placeholder, inputOnly, array, ast, getValue, createOptionLabel, createOptionIcon, onBlur, onCreate, createSchema, createInitialValuePath, onQueryRefOptions, onValueChange, ...restInputProps }: RefFieldProps) => React.JSX.Element | null;
22
- //# sourceMappingURL=RefField.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"RefField.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/RefField.tsx"],"names":[],"mappings":"AAIA,OAAO,iCAAiC,CAAC;AAEzC,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAC7C,OAAO,KAAK,KAAK,SAAS,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EACL,KAAK,UAAU,EAMhB,MAAM,qBAAqB,CAAC;AAS7B,OAAO,EAAE,KAAK,eAAe,EAAsB,MAAM,aAAa,CAAC;AAKvE,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAEvD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG;IACvC,GAAG,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC7C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;IAC1C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,iBAAiB,CAAC,EAAE,eAAe,CAAC;IACpC,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB,CAAC;AAOF,eAAO,MAAM,QAAQ,GAAI,2NAkBtB,aAAa,6BAuKf,CAAC"}
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { type InputProps } from '../Input';
3
- export declare const GeoPointInput: ({ type, label, readonly, getStatus, getValue, onValueChange, onBlur }: InputProps) => React.JSX.Element;
4
- //# sourceMappingURL=GeoPointInput.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"GeoPointInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/GeoPointInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAO3F,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,aAAa,GAAI,uEAAuE,UAAU,sBAkE9G,CAAC"}
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { type InputProps } from '../Input';
3
- export declare const SelectOptionInput: ({ type, label, readonly, getStatus, getValue, onValueChange }: InputProps) => React.JSX.Element;
4
- //# sourceMappingURL=SelectOptionsInput.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOptionsInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/SelectOptionsInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAyF,MAAM,OAAO,CAAC;AAU9G,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAExD,eAAO,MAAM,iBAAiB,GAAI,+DAA+D,UAAU,sBA8K1G,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectOptionsInput.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/SelectOptionsInput.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAuCxC,QAAA,MAAM,IAAI;;eAEwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOA,CAAC;AAEtC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC"}
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- import { type InputProps } from '../Input';
3
- export declare const TupleInput: ({ binding, type, label, readonly, getStatus, getValue, onValueChange, onBlur, }: InputProps & {
4
- binding: string[];
5
- }) => React.JSX.Element;
6
- //# sourceMappingURL=TupleInput.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TupleInput.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/TupleInput.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAe,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AAIxD,eAAO,MAAM,UAAU,GAAI,iFASxB,UAAU,GAAG;IAAE,OAAO,EAAE,MAAM,EAAE,CAAA;CAAE,sBAuBpC,CAAC"}
@@ -1,4 +0,0 @@
1
- export * from './GeoPointInput';
2
- export * from './SelectOptionsInput';
3
- export * from './TupleInput';
4
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/Form/custom/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC"}
@@ -1,8 +0,0 @@
1
- import { Format } from '@dxos/echo/internal';
2
- import { type SimpleType } from '@dxos/effect';
3
- import { type InputComponent } from './Input';
4
- /**
5
- * Get property input component.
6
- */
7
- export declare const getInputComponent: (type: SimpleType, format?: Format.TypeFormat | string) => InputComponent | undefined;
8
- //# sourceMappingURL=factory.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../../../src/components/Form/factory.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAC5B,MAAM,UAAU,EAChB,SAAS,MAAM,CAAC,UAAU,GAAG,MAAM,KAClC,cAAc,GAAG,SAgBnB,CAAC"}
@@ -1,67 +0,0 @@
1
- import type * as Schema from 'effect/Schema';
2
- import { type AnyProperties } from '@dxos/echo/internal';
3
- import { type JsonPath, type SimpleType } from '@dxos/effect';
4
- import { type ValidationError } from '@dxos/schema';
5
- import { type MaybePromise } from '@dxos/util';
6
- /**
7
- * Return type from `useForm` hook.
8
- */
9
- export type FormHandler<T extends AnyProperties> = {
10
- values: Partial<T>;
11
- errors: Record<JsonPath, string>;
12
- touched: Record<JsonPath, boolean>;
13
- changed: Record<JsonPath, boolean>;
14
- canSave: boolean;
15
- formIsValid: boolean;
16
- handleSave: () => void;
17
- getStatus: (path: string | (string | number)[]) => {
18
- status?: 'error';
19
- error?: string;
20
- };
21
- getValue: <V>(path: (string | number)[]) => V | undefined;
22
- onValueChange: <V>(path: (string | number)[], type: SimpleType, value: V) => void;
23
- onTouched: (path: (string | number)[]) => void;
24
- };
25
- /**
26
- * Hook options.
27
- */
28
- export interface FormOptions<T extends AnyProperties> {
29
- /**
30
- * Effect schema (Type literal).
31
- */
32
- schema: Schema.Schema<T, any>;
33
- /**
34
- * Initial values (which may not pass validation).
35
- */
36
- initialValues: Partial<T>;
37
- /**
38
- * Callback for value changes. Note: This is called even when values are invalid.
39
- * Sometimes the parent component may want to know about changes even if the form is
40
- * in an invalid state.
41
- */
42
- onValuesChanged?: (values: Partial<T>) => void;
43
- /**
44
- * Custom validation function that runs only after schema validation passes.
45
- * Use this for complex validation logic that can't be expressed in the schema.
46
- * @returns Array of validation errors, or undefined if validation passes
47
- */
48
- onValidate?: (values: T) => ValidationError[] | undefined;
49
- /**
50
- * Called when the form is valid.
51
- */
52
- onValid?: (values: T, meta: {
53
- changed: FormHandler<T>['changed'];
54
- }) => void;
55
- /**
56
- * Called when the form is submitted and passes validation.
57
- */
58
- onSave?: (values: T, meta: {
59
- changed: FormHandler<T>['changed'];
60
- }) => MaybePromise<void>;
61
- }
62
- /**
63
- * Creates a hook for managing form state, including values, validation, and submission.
64
- * Deeply integrated with `@dxos/schema` for schema-based validation.
65
- */
66
- export declare const useForm: <T extends AnyProperties>({ schema, initialValues, onValuesChanged, onValidate, onValid, onSave, }: FormOptions<T>) => FormHandler<T>;
67
- //# sourceMappingURL=useForm.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,MAAM,eAAe,CAAC;AAI7C,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,UAAU,EAA4C,MAAM,cAAc,CAAC;AAGxG,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,cAAc,CAAC;AACpE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,aAAa,IAAI;IAKjD,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IACjC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,OAAO,CAAC;IAGrB,UAAU,EAAE,MAAM,IAAI,CAAC;IAMvB,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACxF,QAAQ,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,CAAC,GAAG,SAAS,CAAC;IAC1D,aAAa,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAClF,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,CAAC,SAAS,aAAa;IAClD;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAE9B;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;IAE1B;;;;OAIG;IACH,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAE/C;;;;OAIG;IAEH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IAE1D;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,IAAI,CAAC;IAE5E;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE;QAAE,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;KAAE,KAAK,YAAY,CAAC,IAAI,CAAC,CAAC;CAC1F;AAED;;;GAGG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,aAAa,EAAE,0EAO9C,WAAW,CAAC,CAAC,CAAC,KAAG,WAAW,CAAC,CAAC,CAsLhC,CAAC"}
@@ -1,29 +0,0 @@
1
- import { type TypeAnnotation } from '@dxos/echo/internal';
2
- import { type DXN } from '@dxos/keys';
3
- import { type Palette } from '@dxos/react-ui-types';
4
- import { type MaybePromise } from '@dxos/util';
5
- export type RefOption = {
6
- dxn: DXN;
7
- label?: string;
8
- };
9
- export type QueryRefOptions = (type: TypeAnnotation) => MaybePromise<RefOption[]>;
10
- export type QueryTag = {
11
- id: string;
12
- label: string;
13
- hue?: Palette;
14
- };
15
- type UseQueryRefOptionsProps = {
16
- refTypeInfo: TypeAnnotation | undefined;
17
- onQueryRefOptions?: QueryRefOptions;
18
- };
19
- /**
20
- * Hook to query reference options based on type information.
21
- * Used internally within forms to fetch and format reference options for reference fields.
22
- */
23
- export declare const useQueryRefOptions: ({ refTypeInfo, onQueryRefOptions }: UseQueryRefOptionsProps) => {
24
- options: QueryTag[];
25
- update: () => void;
26
- loading: boolean;
27
- };
28
- export {};
29
- //# sourceMappingURL=useQueryRefOptions.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useQueryRefOptions.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useQueryRefOptions.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG;IAAE,GAAG,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AACrD,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,cAAc,KAAK,YAAY,CAAC,SAAS,EAAE,CAAC,CAAC;AAElF,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAAE,WAAW,EAAE,cAAc,GAAG,SAAS,CAAC;IAAC,iBAAiB,CAAC,EAAE,eAAe,CAAA;CAAE,CAAC;AAEhH;;;GAGG;AAEH,eAAO,MAAM,kBAAkB,GAAI,oCAAoC,uBAAuB;;;;CAiC7F,CAAC"}
@@ -1,8 +0,0 @@
1
- import { type Space } from '@dxos/react-client/echo';
2
- import { type QueryRefOptions } from './useQueryRefOptions';
3
- type UseRefQueryLookupProps = {
4
- space?: Space;
5
- };
6
- export declare const useRefQueryLookupHandler: ({ space }: UseRefQueryLookupProps) => QueryRefOptions;
7
- export {};
8
- //# sourceMappingURL=useRefQueryLookupHandler.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useRefQueryLookupHandler.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useRefQueryLookupHandler.ts"],"names":[],"mappings":"AAQA,OAAO,EAAU,KAAK,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG7D,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAE5D,KAAK,sBAAsB,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAEhD,eAAO,MAAM,wBAAwB,GAAI,WAAW,sBAAsB,KAAG,eAuB5E,CAAC"}
@@ -1,3 +0,0 @@
1
- import * as SchemaAST from 'effect/SchemaAST';
2
- export declare const findArrayElementType: (ast: SchemaAST.AST) => SchemaAST.AST | undefined;
3
- //# sourceMappingURL=schema.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/util/schema.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,SAAS,MAAM,kBAAkB,CAAC;AAI9C,eAAO,MAAM,oBAAoB,GAAI,KAAK,SAAS,CAAC,GAAG,8BAGtD,CAAC"}
@@ -1,127 +0,0 @@
1
- //
2
- // Copyright 2025 DXOS.org
3
- //
4
-
5
- import * as Function from 'effect/Function';
6
- import * as SchemaAST from 'effect/SchemaAST';
7
- import * as String from 'effect/String';
8
- import React, { Fragment, useCallback } from 'react';
9
-
10
- import { SimpleType, findNode, getDiscriminatedType, isDiscriminatedUnion } from '@dxos/effect';
11
- import { invariant } from '@dxos/invariant';
12
- import { IconButton, useTranslation } from '@dxos/react-ui';
13
- import { type SchemaProperty, getSchemaProperties } from '@dxos/schema';
14
-
15
- import { translationKey } from '../../translations';
16
- import { findArrayElementType } from '../../util';
17
-
18
- import { type ComponentLookup } from './Form';
19
- import { FormField, type FormFieldProps } from './FormContent';
20
- import { type FormInputStateProps, useFormValues } from './FormContext';
21
- import { type InputComponent, InputHeader } from './Input';
22
-
23
- type ArrayFieldProps = {
24
- property: SchemaProperty<any>;
25
- inputProps: FormInputStateProps;
26
- path?: (string | number)[];
27
- Custom?: Partial<Record<string, InputComponent>>;
28
- lookupComponent?: ComponentLookup;
29
- } & Pick<FormFieldProps, 'readonly'>;
30
-
31
- export const ArrayField = ({ property, readonly, path, inputProps, Custom, lookupComponent }: ArrayFieldProps) => {
32
- const { t } = useTranslation(translationKey);
33
- const { ast, name, type, title } = property;
34
- // TODO(wittjosiah): The fallback to an empty array stops the form from crashing but isn't immediately live.
35
- // It doesn't become live until another field is touched, but that's better than the whole form crashing.
36
- const values = (useFormValues(path ?? []) ?? []) as any[];
37
- invariant(Array.isArray(values), `Values at path ${path?.join('.')} must be an array.`);
38
- const label = title ?? Function.pipe(name, String.capitalize);
39
-
40
- const elementType = findArrayElementType(ast);
41
-
42
- const getDefaultObjectValue = (typeNode: SchemaAST.AST): any => {
43
- const baseNode = findNode(typeNode, isDiscriminatedUnion);
44
- const typeLiteral = baseNode ? getDiscriminatedType(baseNode, {}) : findNode(typeNode, SchemaAST.isTypeLiteral);
45
- if (!typeLiteral) {
46
- return {};
47
- }
48
-
49
- return Object.fromEntries(
50
- getSchemaProperties(typeLiteral, {}, { form: true }).map((prop) => [prop.name, prop.defaultValue]),
51
- );
52
- };
53
-
54
- const getDefaultValue = () =>
55
- type === 'object' && elementType ? getDefaultObjectValue(elementType) : SimpleType.getDefaultValue(type);
56
-
57
- const handleAdd = useCallback(() => {
58
- inputProps.onValueChange(type, [...values, getDefaultValue()]);
59
- }, [type, elementType, inputProps, values]);
60
-
61
- const handleRemove = useCallback(
62
- (index: number) => {
63
- const newValues = values.filter((_, i) => i !== index);
64
- inputProps.onValueChange(type, newValues);
65
- },
66
- [type, inputProps, values],
67
- );
68
-
69
- if (!elementType) {
70
- return null;
71
- }
72
-
73
- return readonly && values.length < 1 ? null : (
74
- <>
75
- <InputHeader readonly label={label} />
76
- <div
77
- role='none'
78
- className={
79
- readonly
80
- ? 'flex flex-wrap gap-1 mlb-1'
81
- : values.length > 0
82
- ? 'grid gap-1 grid-cols-[1fr_min-content] mlb-1'
83
- : 'hidden'
84
- }
85
- >
86
- {values.map((_value, index) => {
87
- const field = (
88
- <FormField
89
- property={{
90
- ...property,
91
- array: false, // NOTE(ZaymonFC): This breaks arrays of arrays but ¯\_(ツ)_/¯. Ping me if you need that.
92
- ast: elementType,
93
- }}
94
- path={[...(path ?? []), index]}
95
- readonly={readonly}
96
- inline
97
- Custom={Custom}
98
- lookupComponent={lookupComponent}
99
- />
100
- );
101
- return readonly ? (
102
- field
103
- ) : (
104
- <Fragment key={index}>
105
- <div role='none'>{field}</div>
106
- <IconButton
107
- icon='ph--trash--regular'
108
- iconOnly
109
- label={t('button remove')}
110
- onClick={() => handleRemove(index)}
111
- classNames='self-center'
112
- />
113
- </Fragment>
114
- );
115
- })}
116
- </div>
117
- {!readonly && (
118
- <IconButton
119
- classNames='is-full mlb-cardSpacingBlock flex'
120
- icon='ph--plus--regular'
121
- label={t('add field')}
122
- onClick={handleAdd}
123
- />
124
- )}
125
- </>
126
- );
127
- };
@@ -1,205 +0,0 @@
1
- //
2
- // Copyright 2024 DXOS.org
3
- //
4
-
5
- import React, { useCallback, useEffect, useRef } from 'react';
6
-
7
- import { Input, Select, useTranslation } from '@dxos/react-ui';
8
-
9
- import { translationKey } from '../../translations';
10
-
11
- import { InputHeader, type InputProps } from './Input';
12
-
13
- export const TextInput = ({
14
- type,
15
- label,
16
- inputOnly,
17
- readonly,
18
- placeholder,
19
- getStatus,
20
- getValue,
21
- onValueChange,
22
- onBlur,
23
- }: InputProps) => {
24
- const { status, error } = getStatus();
25
-
26
- return readonly && !getValue() ? null : readonly === 'static' && inputOnly ? (
27
- <p>{getValue() ?? ''}</p>
28
- ) : (
29
- <Input.Root validationValence={status}>
30
- {!inputOnly && <InputHeader error={error} label={label} />}
31
- {readonly === 'static' ? (
32
- <p>{getValue() ?? ''}</p>
33
- ) : (
34
- <Input.TextInput
35
- disabled={!!readonly}
36
- placeholder={placeholder}
37
- value={getValue() ?? ''}
38
- onChange={(event) => onValueChange(type, event.target.value)}
39
- onBlur={onBlur}
40
- />
41
- )}
42
- {inputOnly && <Input.Validation>{error}</Input.Validation>}
43
- </Input.Root>
44
- );
45
- };
46
-
47
- export const NumberInput = ({
48
- type,
49
- label,
50
- inputOnly,
51
- readonly,
52
- placeholder,
53
- getStatus,
54
- getValue,
55
- onValueChange,
56
- onBlur,
57
- }: InputProps) => {
58
- const { status, error } = getStatus();
59
-
60
- return readonly && !getValue() ? null : readonly === 'static' && inputOnly ? (
61
- <p>{getValue() ?? ''}</p>
62
- ) : (
63
- <Input.Root validationValence={status}>
64
- {!inputOnly && <InputHeader error={error} label={label} />}
65
- {readonly === 'static' ? (
66
- <p>{getValue() ?? ''}</p>
67
- ) : (
68
- <Input.TextInput
69
- type='number'
70
- disabled={!!readonly}
71
- placeholder={placeholder}
72
- value={getValue()}
73
- onChange={(event) => onValueChange(type, event.target.value)}
74
- onBlur={onBlur}
75
- />
76
- )}
77
- {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
78
- </Input.Root>
79
- );
80
- };
81
-
82
- export const BooleanInput = ({ type, label, inputOnly, getStatus, getValue, onValueChange, readonly }: InputProps) => {
83
- const { status, error } = getStatus();
84
- const checked = Boolean(getValue());
85
- const { t } = useTranslation(translationKey);
86
-
87
- return (
88
- <Input.Root validationValence={status}>
89
- {!inputOnly && <InputHeader error={error} label={label} />}
90
- {readonly === 'static' ? (
91
- <p>{t(checked ? 'boolean input true value' : 'boolean input false value')}</p>
92
- ) : (
93
- <Input.Switch disabled={!!readonly} checked={checked} onCheckedChange={(value) => onValueChange(type, value)} />
94
- )}
95
- {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
96
- </Input.Root>
97
- );
98
- };
99
-
100
- export type SelectInputOptions = InputProps & {
101
- options?: Array<{ value: string | number; label?: string }>;
102
- };
103
-
104
- export const SelectInput = ({
105
- type,
106
- label,
107
- inputOnly,
108
- readonly,
109
- placeholder,
110
- options,
111
- getStatus,
112
- getValue,
113
- onValueChange,
114
- }: SelectInputOptions) => {
115
- const { status, error } = getStatus();
116
-
117
- const value = getValue() as string | undefined;
118
- const handleValueChange = useCallback((value: string | number) => onValueChange(type, value), [type, onValueChange]);
119
-
120
- return readonly && !value ? null : (
121
- <Input.Root validationValence={status}>
122
- {!inputOnly && <InputHeader error={error} label={label} />}
123
- {readonly === 'static' ? (
124
- <p>{options?.find(({ value: optionValue }) => optionValue === value)?.label ?? String(value)}</p>
125
- ) : (
126
- <Select.Root value={value} onValueChange={handleValueChange}>
127
- {/* TODO(burdon): Placeholder not working? */}
128
- <Select.TriggerButton classNames='is-full' disabled={!!readonly} placeholder={placeholder} />
129
- <Select.Portal>
130
- <Select.Content>
131
- <Select.Viewport>
132
- {options?.map(({ value, label }) => (
133
- // NOTE: Numeric values are converted to and from strings.
134
- <Select.Option key={String(value)} value={String(value)}>
135
- {label ?? String(value)}
136
- </Select.Option>
137
- ))}
138
- </Select.Viewport>
139
- <Select.Arrow />
140
- </Select.Content>
141
- </Select.Portal>
142
- </Select.Root>
143
- )}
144
- {inputOnly && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
145
- </Input.Root>
146
- );
147
- };
148
-
149
- export const MarkdownInput = ({
150
- type,
151
- label,
152
- inputOnly,
153
- readonly,
154
- placeholder,
155
- getStatus,
156
- getValue,
157
- onValueChange,
158
- onBlur,
159
- }: InputProps) => {
160
- const { status, error } = getStatus();
161
- const textareaRef = useRef<HTMLTextAreaElement>(null);
162
-
163
- // TODO(ZaymonFC): If we start using `Enter` for form submission, we should prevent default behavior here
164
- // since we're using a textarea element and the user needs to be able to enter new lines.
165
-
166
- const adjustHeight = useCallback(() => {
167
- const textarea = textareaRef.current;
168
- if (textarea) {
169
- textarea.style.blockSize = 'auto'; // For measurement.
170
- textarea.style.blockSize = `${textarea.scrollHeight + 2}px`;
171
- }
172
- }, []);
173
-
174
- // Adjust height on initial render.
175
- useEffect(() => {
176
- adjustHeight();
177
- }, [adjustHeight]);
178
-
179
- // Adjust height when the content changes.
180
- useEffect(() => {
181
- adjustHeight();
182
- }, [getValue(), adjustHeight]);
183
-
184
- return (
185
- <Input.Root validationValence={status}>
186
- {!inputOnly && <InputHeader error={error} label={label} />}
187
- {readonly === 'static' ? (
188
- <p>{getValue() ?? ''}</p>
189
- ) : (
190
- <Input.TextArea
191
- ref={textareaRef}
192
- disabled={!!readonly}
193
- placeholder={placeholder}
194
- value={getValue() ?? ''}
195
- classNames={'min-bs-auto max-bs-40 overflow-auto'}
196
- onChange={(event) => onValueChange(type, event.target.value)}
197
- onBlur={onBlur}
198
- style={{ resize: 'none' }}
199
- spellCheck={false}
200
- />
201
- )}
202
- {inputOnly && <Input.Validation>{error}</Input.Validation>}
203
- </Input.Root>
204
- );
205
- };