@finos/legend-query-builder 4.14.51 → 4.14.53

Sign up to get free protection for your applications and to get access to all the features.
Files changed (219) hide show
  1. package/lib/components/QueryBuilder.d.ts.map +1 -1
  2. package/lib/components/QueryBuilder.js +1 -0
  3. package/lib/components/QueryBuilder.js.map +1 -1
  4. package/lib/components/QueryBuilderConstantExpressionPanel.js +1 -1
  5. package/lib/components/QueryBuilderConstantExpressionPanel.js.map +1 -1
  6. package/lib/components/QueryBuilderParametersPanel.js +1 -1
  7. package/lib/components/QueryBuilderParametersPanel.js.map +1 -1
  8. package/lib/components/QueryBuilderPropertyExpressionEditor.js +1 -1
  9. package/lib/components/QueryBuilderPropertyExpressionEditor.js.map +1 -1
  10. package/lib/components/QueryBuilderSideBar.d.ts.map +1 -1
  11. package/lib/components/QueryBuilderSideBar.js +1 -1
  12. package/lib/components/QueryBuilderSideBar.js.map +1 -1
  13. package/lib/components/QueryBuilder_LegendApplicationPlugin.d.ts +0 -1
  14. package/lib/components/QueryBuilder_LegendApplicationPlugin.d.ts.map +1 -1
  15. package/lib/components/ServiceQuerySetupUtils.d.ts.map +1 -1
  16. package/lib/components/__test-utils__/QueryBuilderComponentTestUtils.d.ts +1 -1
  17. package/lib/components/__test-utils__/QueryBuilderComponentTestUtils.d.ts.map +1 -1
  18. package/lib/components/__test-utils__/QueryBuilderComponentTestUtils.js +4 -2
  19. package/lib/components/__test-utils__/QueryBuilderComponentTestUtils.js.map +1 -1
  20. package/lib/components/execution-plan/AllocationExecutionNodeViewer.d.ts +0 -1
  21. package/lib/components/execution-plan/AllocationExecutionNodeViewer.d.ts.map +1 -1
  22. package/lib/components/execution-plan/ConstantExecutionNodeViewer.d.ts +0 -1
  23. package/lib/components/execution-plan/ConstantExecutionNodeViewer.d.ts.map +1 -1
  24. package/lib/components/execution-plan/DataTypeResultTypeViewer.d.ts +0 -1
  25. package/lib/components/execution-plan/DataTypeResultTypeViewer.d.ts.map +1 -1
  26. package/lib/components/execution-plan/ExecutionPlanViewer.d.ts +0 -1
  27. package/lib/components/execution-plan/ExecutionPlanViewer.d.ts.map +1 -1
  28. package/lib/components/execution-plan/FunctionParametersValidationNodeViewer.js +1 -1
  29. package/lib/components/execution-plan/ImplementationViewer.d.ts +0 -1
  30. package/lib/components/execution-plan/ImplementationViewer.d.ts.map +1 -1
  31. package/lib/components/execution-plan/PartialClassResultViewer.d.ts +0 -1
  32. package/lib/components/execution-plan/PartialClassResultViewer.d.ts.map +1 -1
  33. package/lib/components/execution-plan/PartialClassResultViewer.js +1 -1
  34. package/lib/components/execution-plan/RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.d.ts +0 -1
  35. package/lib/components/execution-plan/RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.d.ts.map +1 -1
  36. package/lib/components/execution-plan/RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.js +1 -1
  37. package/lib/components/execution-plan/RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.d.ts +0 -1
  38. package/lib/components/execution-plan/RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.d.ts.map +1 -1
  39. package/lib/components/execution-plan/RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.js +1 -1
  40. package/lib/components/execution-plan/RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.d.ts +0 -1
  41. package/lib/components/execution-plan/RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.d.ts.map +1 -1
  42. package/lib/components/execution-plan/RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.js +1 -1
  43. package/lib/components/execution-plan/RelationalTDSInstantiationExecutionNodeViewer.d.ts +0 -1
  44. package/lib/components/execution-plan/RelationalTDSInstantiationExecutionNodeViewer.d.ts.map +1 -1
  45. package/lib/components/execution-plan/ResultTypeViewer.d.ts +0 -1
  46. package/lib/components/execution-plan/ResultTypeViewer.d.ts.map +1 -1
  47. package/lib/components/execution-plan/SQLExecutionNodeViewer.d.ts +0 -1
  48. package/lib/components/execution-plan/SQLExecutionNodeViewer.d.ts.map +1 -1
  49. package/lib/components/execution-plan/SQLExecutionNodeViewer.js +1 -1
  50. package/lib/components/execution-plan/SequenceExecutionNodeViewer.d.ts +0 -1
  51. package/lib/components/execution-plan/SequenceExecutionNodeViewer.d.ts.map +1 -1
  52. package/lib/components/execution-plan/StoreMappingGlobalGraphFetchExecutionNodeViewer.d.ts +0 -1
  53. package/lib/components/execution-plan/StoreMappingGlobalGraphFetchExecutionNodeViewer.d.ts.map +1 -1
  54. package/lib/components/execution-plan/StoreMappingGlobalGraphFetchExecutionNodeViewer.js +2 -2
  55. package/lib/components/execution-plan/TDSResultTypeViewer.d.ts +0 -1
  56. package/lib/components/execution-plan/TDSResultTypeViewer.d.ts.map +1 -1
  57. package/lib/components/execution-plan/TDSResultTypeViewer.js +1 -1
  58. package/lib/components/execution-plan/TempTableStrategyViewer.d.ts +0 -1
  59. package/lib/components/execution-plan/TempTableStrategyViewer.d.ts.map +1 -1
  60. package/lib/components/explorer/QueryBuilderExplorerPanel.d.ts +0 -1
  61. package/lib/components/explorer/QueryBuilderExplorerPanel.d.ts.map +1 -1
  62. package/lib/components/explorer/QueryBuilderMilestoningParameterEditor.d.ts +2 -0
  63. package/lib/components/explorer/QueryBuilderMilestoningParameterEditor.d.ts.map +1 -1
  64. package/lib/components/explorer/QueryBuilderMilestoningParameterEditor.js +14 -7
  65. package/lib/components/explorer/QueryBuilderMilestoningParameterEditor.js.map +1 -1
  66. package/lib/components/fetch-structure/QueryBuilderGraphFetchTreePanel.d.ts +0 -1
  67. package/lib/components/fetch-structure/QueryBuilderGraphFetchTreePanel.d.ts.map +1 -1
  68. package/lib/components/fetch-structure/QueryBuilderPostFilterPanel.d.ts.map +1 -1
  69. package/lib/components/fetch-structure/QueryBuilderPostFilterPanel.js +1 -1
  70. package/lib/components/fetch-structure/QueryBuilderPostFilterPanel.js.map +1 -1
  71. package/lib/components/fetch-structure/QueryBuilderResultModifierPanel.d.ts.map +1 -1
  72. package/lib/components/fetch-structure/QueryBuilderResultModifierPanel.js +36 -11
  73. package/lib/components/fetch-structure/QueryBuilderResultModifierPanel.js.map +1 -1
  74. package/lib/components/fetch-structure/QueryBuilderTDSComponentHelper.d.ts +0 -1
  75. package/lib/components/fetch-structure/QueryBuilderTDSComponentHelper.d.ts.map +1 -1
  76. package/lib/components/fetch-structure/QueryBuilderTDSPanel.d.ts.map +1 -1
  77. package/lib/components/fetch-structure/QueryBuilderTDSPanel.js +5 -2
  78. package/lib/components/fetch-structure/QueryBuilderTDSPanel.js.map +1 -1
  79. package/lib/components/filter/QueryBuilderFilterPanel.d.ts.map +1 -1
  80. package/lib/components/filter/QueryBuilderFilterPanel.js +9 -4
  81. package/lib/components/filter/QueryBuilderFilterPanel.js.map +1 -1
  82. package/lib/components/result/QueryBuilderResultPanel.d.ts.map +1 -1
  83. package/lib/components/result/QueryBuilderResultPanel.js +1 -1
  84. package/lib/components/result/QueryBuilderResultPanel.js.map +1 -1
  85. package/lib/components/result/tds/QueryBuilderTDSGridResult.d.ts.map +1 -1
  86. package/lib/components/result/tds/QueryBuilderTDSGridResult.js +10 -8
  87. package/lib/components/result/tds/QueryBuilderTDSGridResult.js.map +1 -1
  88. package/lib/components/result/tds/QueryBuilderTDSResultShared.d.ts +0 -1
  89. package/lib/components/result/tds/QueryBuilderTDSResultShared.d.ts.map +1 -1
  90. package/lib/components/result/tds/QueryBuilderTDSResultShared.js.map +1 -1
  91. package/lib/components/result/tds/QueryBuilderTDSSimpleGridResult.js +2 -2
  92. package/lib/components/result/tds/QueryBuilderTDSSimpleGridResult.js.map +1 -1
  93. package/lib/components/shared/BasicValueSpecificationEditor.d.ts +19 -4
  94. package/lib/components/shared/BasicValueSpecificationEditor.d.ts.map +1 -1
  95. package/lib/components/shared/BasicValueSpecificationEditor.js +97 -36
  96. package/lib/components/shared/BasicValueSpecificationEditor.js.map +1 -1
  97. package/lib/components/shared/CustomDatePicker.d.ts +2 -1
  98. package/lib/components/shared/CustomDatePicker.d.ts.map +1 -1
  99. package/lib/components/shared/CustomDatePicker.js +8 -5
  100. package/lib/components/shared/CustomDatePicker.js.map +1 -1
  101. package/lib/components/shared/LambdaParameterValuesEditor.js +1 -1
  102. package/lib/components/shared/LambdaParameterValuesEditor.js.map +1 -1
  103. package/lib/components/shared/QueryBuilderPanelIssueCountBadge.d.ts +0 -1
  104. package/lib/components/shared/QueryBuilderPanelIssueCountBadge.d.ts.map +1 -1
  105. package/lib/components/shared/QueryBuilderPropertyInfoTooltip.d.ts +0 -1
  106. package/lib/components/shared/QueryBuilderPropertyInfoTooltip.d.ts.map +1 -1
  107. package/lib/components/shared/QueryBuilderRootClassInfoTooltip.d.ts +0 -1
  108. package/lib/components/shared/QueryBuilderRootClassInfoTooltip.d.ts.map +1 -1
  109. package/lib/components/shared/QueryBuilderVariableSelector.d.ts +3 -0
  110. package/lib/components/shared/QueryBuilderVariableSelector.d.ts.map +1 -1
  111. package/lib/components/shared/QueryBuilderVariableSelector.js +3 -3
  112. package/lib/components/shared/QueryBuilderVariableSelector.js.map +1 -1
  113. package/lib/components/workflows/ClassQueryBuilder.d.ts.map +1 -1
  114. package/lib/components/workflows/MappingQueryBuilder.d.ts.map +1 -1
  115. package/lib/components/workflows/ServiceQueryBuilder.d.ts.map +1 -1
  116. package/lib/graph/QueryBuilderMetaModelConst.d.ts +1 -0
  117. package/lib/graph/QueryBuilderMetaModelConst.d.ts.map +1 -1
  118. package/lib/graph/QueryBuilderMetaModelConst.js +1 -0
  119. package/lib/graph/QueryBuilderMetaModelConst.js.map +1 -1
  120. package/lib/graph-manager/protocol/pure/QueryBuilder_PureGraphManagerExtension.d.ts.map +1 -1
  121. package/lib/graph-manager/protocol/pure/QueryBuilder_PureGraphManagerExtension.js.map +1 -1
  122. package/lib/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.d.ts +1 -2
  123. package/lib/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.d.ts.map +1 -1
  124. package/lib/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.js +68 -8
  125. package/lib/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.js.map +1 -1
  126. package/lib/index.css +2 -2
  127. package/lib/index.css.map +1 -1
  128. package/lib/index.d.ts +1 -1
  129. package/lib/index.d.ts.map +1 -1
  130. package/lib/index.js +1 -1
  131. package/lib/index.js.map +1 -1
  132. package/lib/package.json +7 -7
  133. package/lib/stores/QueryBuilderState.d.ts +0 -1
  134. package/lib/stores/QueryBuilderState.d.ts.map +1 -1
  135. package/lib/stores/QueryBuilderState.js +1 -0
  136. package/lib/stores/QueryBuilderState.js.map +1 -1
  137. package/lib/stores/QueryBuilderStateBuilder.d.ts.map +1 -1
  138. package/lib/stores/QueryBuilderStateBuilder.js +5 -1
  139. package/lib/stores/QueryBuilderStateBuilder.js.map +1 -1
  140. package/lib/stores/QueryBuilderValueSpecificationHelper.js.map +1 -1
  141. package/lib/stores/QueryBuilder_LegendApplicationPlugin_Extension.d.ts +1 -2
  142. package/lib/stores/QueryBuilder_LegendApplicationPlugin_Extension.d.ts.map +1 -1
  143. package/lib/stores/__test-utils__/QueryBuilderStateTestUtils.d.ts.map +1 -1
  144. package/lib/stores/execution-plan/ExecutionPlanState.d.ts.map +1 -1
  145. package/lib/stores/explorer/QueryBuilderExplorerState.d.ts +0 -1
  146. package/lib/stores/explorer/QueryBuilderExplorerState.d.ts.map +1 -1
  147. package/lib/stores/explorer/QueryFunctionsExplorerState.d.ts.map +1 -1
  148. package/lib/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeUtil.d.ts.map +1 -1
  149. package/lib/stores/fetch-structure/graph-fetch/QueryBuilderGraphFetchTreeValueSpecificationBuilder.d.ts.map +1 -1
  150. package/lib/stores/fetch-structure/tds/QueryBuilderTDSState.d.ts +2 -0
  151. package/lib/stores/fetch-structure/tds/QueryBuilderTDSState.d.ts.map +1 -1
  152. package/lib/stores/fetch-structure/tds/QueryBuilderTDSState.js +6 -0
  153. package/lib/stores/fetch-structure/tds/QueryBuilderTDSState.js.map +1 -1
  154. package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.d.ts +11 -0
  155. package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.d.ts.map +1 -1
  156. package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.js +76 -20
  157. package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.js.map +1 -1
  158. package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.d.ts.map +1 -1
  159. package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.js +70 -34
  160. package/lib/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.js.map +1 -1
  161. package/lib/stores/filter/QueryBuilderFilterState.d.ts +2 -0
  162. package/lib/stores/filter/QueryBuilderFilterState.d.ts.map +1 -1
  163. package/lib/stores/filter/QueryBuilderFilterState.js +7 -0
  164. package/lib/stores/filter/QueryBuilderFilterState.js.map +1 -1
  165. package/lib/stores/milestoning/QueryBuilderMilestoningState.d.ts +2 -2
  166. package/lib/stores/milestoning/QueryBuilderMilestoningState.d.ts.map +1 -1
  167. package/lib/stores/milestoning/QueryBuilderMilestoningState.js +15 -4
  168. package/lib/stores/milestoning/QueryBuilderMilestoningState.js.map +1 -1
  169. package/lib/stores/shared/ValueSpecificationEditorHelper.d.ts +5 -2
  170. package/lib/stores/shared/ValueSpecificationEditorHelper.d.ts.map +1 -1
  171. package/lib/stores/shared/ValueSpecificationEditorHelper.js +20 -9
  172. package/lib/stores/shared/ValueSpecificationEditorHelper.js.map +1 -1
  173. package/lib/stores/shared/ValueSpecificationModifierHelper.d.ts.map +1 -1
  174. package/lib/stores/workflows/ClassQueryBuilderState.d.ts.map +1 -1
  175. package/lib/stores/workflows/MappingQueryBuilderState.d.ts.map +1 -1
  176. package/lib/stores/workflows/ServiceQueryBuilderState.d.ts.map +1 -1
  177. package/package.json +15 -15
  178. package/src/components/QueryBuilder.tsx +1 -0
  179. package/src/components/QueryBuilderConstantExpressionPanel.tsx +1 -1
  180. package/src/components/QueryBuilderParametersPanel.tsx +1 -1
  181. package/src/components/QueryBuilderPropertyExpressionEditor.tsx +1 -1
  182. package/src/components/QueryBuilderSideBar.tsx +1 -1
  183. package/src/components/__test-utils__/QueryBuilderComponentTestUtils.tsx +4 -1
  184. package/src/components/execution-plan/FunctionParametersValidationNodeViewer.tsx +1 -1
  185. package/src/components/execution-plan/PartialClassResultViewer.tsx +1 -1
  186. package/src/components/execution-plan/RelationalClassQueryTempTableGraphFetchExecutionNodeViewer.tsx +1 -1
  187. package/src/components/execution-plan/RelationalCrossRootQueryTempTableGraphFetchExecutionNodeViewer.tsx +1 -1
  188. package/src/components/execution-plan/RelationalRootQueryTempTableGraphFetchExecutionNodeViewer.tsx +1 -1
  189. package/src/components/execution-plan/SQLExecutionNodeViewer.tsx +1 -1
  190. package/src/components/execution-plan/StoreMappingGlobalGraphFetchExecutionNodeViewer.tsx +2 -2
  191. package/src/components/execution-plan/TDSResultTypeViewer.tsx +1 -1
  192. package/src/components/explorer/QueryBuilderMilestoningParameterEditor.tsx +60 -22
  193. package/src/components/fetch-structure/QueryBuilderPostFilterPanel.tsx +1 -1
  194. package/src/components/fetch-structure/QueryBuilderResultModifierPanel.tsx +156 -60
  195. package/src/components/fetch-structure/QueryBuilderTDSPanel.tsx +12 -2
  196. package/src/components/filter/QueryBuilderFilterPanel.tsx +18 -4
  197. package/src/components/result/QueryBuilderResultPanel.tsx +1 -0
  198. package/src/components/result/tds/QueryBuilderTDSGridResult.tsx +12 -13
  199. package/src/components/result/tds/QueryBuilderTDSResultShared.tsx +1 -1
  200. package/src/components/result/tds/QueryBuilderTDSSimpleGridResult.tsx +2 -2
  201. package/src/components/shared/BasicValueSpecificationEditor.tsx +257 -55
  202. package/src/components/shared/CustomDatePicker.tsx +36 -11
  203. package/src/components/shared/LambdaParameterValuesEditor.tsx +1 -1
  204. package/src/components/shared/QueryBuilderVariableSelector.tsx +13 -4
  205. package/src/graph/QueryBuilderMetaModelConst.ts +1 -0
  206. package/src/graph-manager/protocol/pure/QueryBuilder_PureGraphManagerExtension.ts +1 -1
  207. package/src/graph-manager/protocol/pure/v1/V1_QueryValueSpecificationBuilderHelper.ts +189 -18
  208. package/src/index.ts +1 -0
  209. package/src/stores/QueryBuilderState.ts +1 -0
  210. package/src/stores/QueryBuilderStateBuilder.ts +6 -1
  211. package/src/stores/QueryBuilderValueSpecificationHelper.ts +2 -2
  212. package/src/stores/QueryBuilder_LegendApplicationPlugin_Extension.ts +1 -1
  213. package/src/stores/fetch-structure/tds/QueryBuilderTDSState.ts +7 -0
  214. package/src/stores/fetch-structure/tds/projection/QueryBuilderProjectionStateBuilder.ts +167 -43
  215. package/src/stores/fetch-structure/tds/projection/QueryBuilderProjectionValueSpecificationBuilder.ts +145 -69
  216. package/src/stores/filter/QueryBuilderFilterState.ts +8 -0
  217. package/src/stores/milestoning/QueryBuilderMilestoningState.ts +22 -9
  218. package/src/stores/shared/ValueSpecificationEditorHelper.ts +47 -7
  219. package/tsconfig.package.json +1 -1
@@ -22,6 +22,7 @@ import {
22
22
  type TooltipPlacement,
23
23
  type InputActionData,
24
24
  type SelectActionData,
25
+ type SelectComponent,
25
26
  Tooltip,
26
27
  DollarIcon,
27
28
  clsx,
@@ -41,6 +42,7 @@ import {
41
42
  type Type,
42
43
  type ValueSpecification,
43
44
  type PureModel,
45
+ type ObserverContext,
44
46
  PrimitiveInstanceValue,
45
47
  CollectionInstanceValue,
46
48
  EnumValueInstanceValue,
@@ -54,9 +56,9 @@ import {
54
56
  GenericType,
55
57
  Enumeration,
56
58
  getMultiplicityDescription,
57
- type ObserverContext,
58
59
  matchFunctionName,
59
60
  isSubType,
61
+ InstanceValue,
60
62
  } from '@finos/legend-graph';
61
63
  import {
62
64
  type DebouncedFunc,
@@ -220,14 +222,18 @@ const VariableExpressionParameterEditor = observer(
220
222
 
221
223
  const StringPrimitiveInstanceValueEditor = observer(
222
224
  forwardRef<
223
- HTMLInputElement,
225
+ HTMLInputElement | SelectComponent,
224
226
  {
225
227
  valueSpecification: PrimitiveInstanceValue;
226
228
  className?: string | undefined;
227
229
  setValueSpecification: (val: ValueSpecification) => void;
228
230
  resetValue: () => void;
229
231
  selectorConfig?: BasicValueSpecificationEditorSelectorConfig | undefined;
230
- obseverContext: ObserverContext;
232
+ observerContext: ObserverContext;
233
+ handleBlur?: (() => void) | undefined;
234
+ handleKeyDown?:
235
+ | ((event: React.KeyboardEvent<HTMLInputElement>) => void)
236
+ | undefined;
231
237
  }
232
238
  >(function StringPrimitiveInstanceValueEditor(props, ref) {
233
239
  const {
@@ -236,13 +242,15 @@ const StringPrimitiveInstanceValueEditor = observer(
236
242
  resetValue,
237
243
  setValueSpecification,
238
244
  selectorConfig,
239
- obseverContext,
245
+ observerContext,
246
+ handleBlur,
247
+ handleKeyDown,
240
248
  } = props;
241
249
  const useSelector = Boolean(selectorConfig);
242
250
  const applicationStore = useApplicationStore();
243
251
  const value = valueSpecification.values[0] as string | null;
244
252
  const updateValueSpec = (val: string): void => {
245
- instanceValue_setValue(valueSpecification, val, 0, obseverContext);
253
+ instanceValue_setValue(valueSpecification, val, 0, observerContext);
246
254
  setValueSpecification(valueSpecification);
247
255
  };
248
256
  const changeInputValue: React.ChangeEventHandler<HTMLInputElement> = (
@@ -287,9 +295,22 @@ const StringPrimitiveInstanceValueEditor = observer(
287
295
  : undefined;
288
296
  const noOptionsMessage =
289
297
  selectorConfig?.values === undefined ? (): null => null : undefined;
298
+ const resetButtonName = `reset-${valueSpecification.hashCode}`;
299
+ const inputName = `input-${valueSpecification.hashCode}`;
300
+
301
+ const onBlur = (
302
+ event: React.FocusEvent<HTMLInputElement, HTMLButtonElement>,
303
+ ): void => {
304
+ if (
305
+ event.relatedTarget?.name !== resetButtonName &&
306
+ event.relatedTarget?.name !== inputName
307
+ ) {
308
+ handleBlur?.();
309
+ }
310
+ };
290
311
 
291
312
  return (
292
- <div className={clsx('value-spec-editor', className)}>
313
+ <div className={clsx('value-spec-editor', className)} onBlur={onBlur}>
293
314
  {useSelector ? (
294
315
  <CustomSelectorInput
295
316
  className="value-spec-editor__enum-selector"
@@ -310,6 +331,9 @@ const StringPrimitiveInstanceValueEditor = observer(
310
331
  }}
311
332
  hasError={!isValidInstanceValue(valueSpecification)}
312
333
  placeholder={value === '' ? '(empty)' : undefined}
334
+ ref={ref as React.Ref<SelectComponent>}
335
+ onKeyDown={handleKeyDown}
336
+ inputName={inputName}
313
337
  />
314
338
  ) : (
315
339
  <InputWithInlineValidation
@@ -318,17 +342,19 @@ const StringPrimitiveInstanceValueEditor = observer(
318
342
  value={value ?? ''}
319
343
  placeholder={value === '' ? '(empty)' : undefined}
320
344
  onChange={changeInputValue}
321
- ref={ref}
345
+ ref={ref as React.Ref<HTMLInputElement>}
322
346
  error={
323
347
  !isValidInstanceValue(valueSpecification)
324
348
  ? 'Invalid String value'
325
349
  : undefined
326
350
  }
351
+ onKeyDown={handleKeyDown}
352
+ name={inputName}
327
353
  />
328
354
  )}
329
355
  <button
330
356
  className="value-spec-editor__reset-btn"
331
- name="Reset"
357
+ name={resetButtonName}
332
358
  title="Reset"
333
359
  onClick={resetValue}
334
360
  >
@@ -345,18 +371,18 @@ const BooleanPrimitiveInstanceValueEditor = observer(
345
371
  className?: string | undefined;
346
372
  resetValue: () => void;
347
373
  setValueSpecification: (val: ValueSpecification) => void;
348
- obseverContext: ObserverContext;
374
+ observerContext: ObserverContext;
349
375
  }) => {
350
376
  const {
351
377
  valueSpecification,
352
378
  className,
353
379
  resetValue,
354
380
  setValueSpecification,
355
- obseverContext,
381
+ observerContext,
356
382
  } = props;
357
383
  const value = valueSpecification.values[0] as boolean;
358
384
  const toggleValue = (): void => {
359
- instanceValue_setValue(valueSpecification, !value, 0, obseverContext);
385
+ instanceValue_setValue(valueSpecification, !value, 0, observerContext);
360
386
  setValueSpecification(valueSpecification);
361
387
  };
362
388
 
@@ -392,7 +418,11 @@ const NumberPrimitiveInstanceValueEditor = observer(
392
418
  className?: string | undefined;
393
419
  resetValue: () => void;
394
420
  setValueSpecification: (val: ValueSpecification) => void;
395
- obseverContext: ObserverContext;
421
+ observerContext: ObserverContext;
422
+ handleBlur?: (() => void) | undefined;
423
+ handleKeyDown?:
424
+ | ((event: React.KeyboardEvent<HTMLInputElement>) => void)
425
+ | undefined;
396
426
  }
397
427
  >(function NumberPrimitiveInstanceValueEditor(props, ref) {
398
428
  const {
@@ -401,7 +431,9 @@ const NumberPrimitiveInstanceValueEditor = observer(
401
431
  className,
402
432
  resetValue,
403
433
  setValueSpecification,
404
- obseverContext,
434
+ observerContext,
435
+ handleBlur,
436
+ handleKeyDown,
405
437
  } = props;
406
438
  const [value, setValue] = useState(
407
439
  valueSpecification.values[0] === null
@@ -429,7 +461,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
429
461
  valueSpecification,
430
462
  parsedValue,
431
463
  0,
432
- obseverContext,
464
+ observerContext,
433
465
  );
434
466
  setValueSpecification(valueSpecification);
435
467
  }
@@ -496,8 +528,24 @@ const NumberPrimitiveInstanceValueEditor = observer(
496
528
  }
497
529
  }, [numericValue, valueSpecification]);
498
530
 
531
+ const resetButtonName = `reset-${valueSpecification.hashCode}`;
532
+ const inputName = `input-${valueSpecification.hashCode}`;
533
+ const calculateButtonName = `calculate-${valueSpecification.hashCode}`;
534
+
535
+ const onBlur = (
536
+ event: React.FocusEvent<HTMLInputElement, HTMLButtonElement>,
537
+ ): void => {
538
+ if (
539
+ event.relatedTarget?.name !== resetButtonName &&
540
+ event.relatedTarget?.name !== inputName &&
541
+ event.relatedTarget?.name !== calculateButtonName
542
+ ) {
543
+ handleBlur?.();
544
+ }
545
+ };
546
+
499
547
  return (
500
- <div className={clsx('value-spec-editor', className)}>
548
+ <div className={clsx('value-spec-editor', className)} onBlur={onBlur}>
501
549
  <div className="value-spec-editor__number__input-container">
502
550
  <input
503
551
  ref={inputRef}
@@ -516,12 +564,17 @@ const NumberPrimitiveInstanceValueEditor = observer(
516
564
  value={value}
517
565
  onChange={handleInputChange}
518
566
  onBlur={calculateExpression}
519
- onKeyDown={onKeyDown}
567
+ onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
568
+ onKeyDown(event);
569
+ handleKeyDown?.(event);
570
+ }}
571
+ name={inputName}
520
572
  />
521
573
  <div className="value-spec-editor__number__actions">
522
574
  <button
523
575
  className="value-spec-editor__number__action"
524
576
  title="Evaluate Expression (Enter)"
577
+ name={calculateButtonName}
525
578
  onClick={calculateExpression}
526
579
  >
527
580
  <CalculateIcon />
@@ -530,7 +583,7 @@ const NumberPrimitiveInstanceValueEditor = observer(
530
583
  </div>
531
584
  <button
532
585
  className="value-spec-editor__reset-btn"
533
- name="Reset"
586
+ name={resetButtonName}
534
587
  title="Reset"
535
588
  onClick={resetValue}
536
589
  >
@@ -547,14 +600,16 @@ const EnumValueInstanceValueEditor = observer(
547
600
  className?: string | undefined;
548
601
  setValueSpecification: (val: ValueSpecification) => void;
549
602
  resetValue: () => void;
550
- obseverContext: ObserverContext;
603
+ observerContext: ObserverContext;
604
+ handleBlur?: (() => void) | undefined;
551
605
  }) => {
552
606
  const {
553
607
  valueSpecification,
554
608
  className,
555
609
  resetValue,
556
610
  setValueSpecification,
557
- obseverContext,
611
+ observerContext,
612
+ handleBlur,
558
613
  } = props;
559
614
  const applicationStore = useApplicationStore();
560
615
  const enumType = guaranteeType(
@@ -569,18 +624,33 @@ const EnumValueInstanceValueEditor = observer(
569
624
  label: value.name,
570
625
  value: value,
571
626
  }));
627
+ const resetButtonName = `reset-${valueSpecification.hashCode}`;
628
+ const inputName = `input-${valueSpecification.hashCode}`;
629
+
572
630
  const changeValue = (val: { value: Enum; label: string }): void => {
573
631
  instanceValue_setValue(
574
632
  valueSpecification,
575
633
  EnumValueExplicitReference.create(val.value),
576
634
  0,
577
- obseverContext,
635
+ observerContext,
578
636
  );
579
637
  setValueSpecification(valueSpecification);
638
+ handleBlur?.();
639
+ };
640
+
641
+ const onBlur = (
642
+ event: React.FocusEvent<HTMLInputElement, HTMLButtonElement>,
643
+ ): void => {
644
+ if (
645
+ event.relatedTarget?.name !== resetButtonName &&
646
+ event.relatedTarget?.name !== inputName
647
+ ) {
648
+ handleBlur?.();
649
+ }
580
650
  };
581
651
 
582
652
  return (
583
- <div className={clsx('value-spec-editor', className)}>
653
+ <div className={clsx('value-spec-editor', className)} onBlur={onBlur}>
584
654
  <CustomSelectorInput
585
655
  className="value-spec-editor__enum-selector"
586
656
  options={options}
@@ -591,10 +661,12 @@ const EnumValueInstanceValueEditor = observer(
591
661
  }
592
662
  hasError={!isValidInstanceValue(valueSpecification)}
593
663
  placeholder="Select value"
664
+ autoFocus={true}
665
+ inputName={inputName}
594
666
  />
595
667
  <button
596
668
  className="value-spec-editor__reset-btn"
597
- name="Reset"
669
+ name={resetButtonName}
598
670
  title="Reset"
599
671
  onClick={resetValue}
600
672
  >
@@ -672,7 +744,9 @@ const PrimitiveCollectionInstanceValueEditor = observer(
672
744
  { label: string; value: string }[]
673
745
  >(
674
746
  valueSpecification.values
675
- .map((valueSpec) => getValueSpecificationStringValue(valueSpec))
747
+ .map((valueSpec) =>
748
+ getValueSpecificationStringValue(valueSpec, applicationStore),
749
+ )
676
750
  .filter(isNonEmptyString)
677
751
  .map((value) => ({
678
752
  label: value,
@@ -707,7 +781,7 @@ const PrimitiveCollectionInstanceValueEditor = observer(
707
781
  value: ValueSpecification,
708
782
  ): { label: string; value: string } => {
709
783
  const stringValue = guaranteeNonNullable(
710
- getValueSpecificationStringValue(value),
784
+ getValueSpecificationStringValue(value, applicationStore),
711
785
  );
712
786
  return {
713
787
  label: stringValue,
@@ -736,10 +810,11 @@ const PrimitiveCollectionInstanceValueEditor = observer(
736
810
 
737
811
  if (
738
812
  newValueSpec === null ||
739
- getValueSpecificationStringValue(newValueSpec) === undefined ||
813
+ getValueSpecificationStringValue(newValueSpec, applicationStore) ===
814
+ undefined ||
740
815
  isValueAlreadySelected(
741
816
  guaranteeNonNullable(
742
- getValueSpecificationStringValue(newValueSpec),
817
+ getValueSpecificationStringValue(newValueSpec, applicationStore),
743
818
  ),
744
819
  )
745
820
  ) {
@@ -849,7 +924,7 @@ const PrimitiveCollectionInstanceValueEditor = observer(
849
924
  observerContext,
850
925
  );
851
926
  return newValueSpec
852
- ? getValueSpecificationStringValue(newValueSpec)
927
+ ? getValueSpecificationStringValue(newValueSpec, applicationStore)
853
928
  : null;
854
929
  })
855
930
  .filter(isNonNullable),
@@ -1009,7 +1084,7 @@ const CollectionValueInstanceValueEditor = observer(
1009
1084
  resetValue: () => void;
1010
1085
  setValueSpecification: (val: ValueSpecification) => void;
1011
1086
  selectorConfig?: BasicValueSpecificationEditorSelectorConfig | undefined;
1012
- obseverContext: ObserverContext;
1087
+ observerContext: ObserverContext;
1013
1088
  }) => {
1014
1089
  const {
1015
1090
  valueSpecification,
@@ -1018,7 +1093,7 @@ const CollectionValueInstanceValueEditor = observer(
1018
1093
  resetValue,
1019
1094
  setValueSpecification,
1020
1095
  selectorConfig,
1021
- obseverContext,
1096
+ observerContext,
1022
1097
  } = props;
1023
1098
 
1024
1099
  const [editable, setEditable] = useState(false);
@@ -1051,7 +1126,7 @@ const CollectionValueInstanceValueEditor = observer(
1051
1126
  {expectedType instanceof Enumeration ? (
1052
1127
  <EnumCollectionInstanceValueEditor
1053
1128
  valueSpecification={valueSpecification}
1054
- observerContext={obseverContext}
1129
+ observerContext={observerContext}
1055
1130
  saveEdit={saveEdit}
1056
1131
  />
1057
1132
  ) : (
@@ -1060,7 +1135,7 @@ const CollectionValueInstanceValueEditor = observer(
1060
1135
  expectedType={expectedType}
1061
1136
  saveEdit={saveEdit}
1062
1137
  selectorConfig={selectorConfig}
1063
- observerContext={obseverContext}
1138
+ observerContext={observerContext}
1064
1139
  />
1065
1140
  )}
1066
1141
  <button
@@ -1105,19 +1180,23 @@ const DateInstanceValueEditor = observer(
1105
1180
  (props: {
1106
1181
  valueSpecification: PrimitiveInstanceValue | SimpleFunctionExpression;
1107
1182
  graph: PureModel;
1108
- obseverContext: ObserverContext;
1183
+ observerContext: ObserverContext;
1109
1184
  typeCheckOption: TypeCheckOption;
1110
1185
  className?: string | undefined;
1111
1186
  setValueSpecification: (val: ValueSpecification) => void;
1112
1187
  resetValue: () => void;
1188
+ handleBlur?: (() => void) | undefined;
1189
+ displayAsEditableValue?: boolean | undefined;
1113
1190
  }) => {
1114
1191
  const {
1115
1192
  valueSpecification,
1116
1193
  setValueSpecification,
1117
1194
  graph,
1118
- obseverContext,
1195
+ observerContext,
1119
1196
  typeCheckOption,
1120
1197
  resetValue,
1198
+ handleBlur,
1199
+ displayAsEditableValue,
1121
1200
  } = props;
1122
1201
 
1123
1202
  return (
@@ -1125,22 +1204,26 @@ const DateInstanceValueEditor = observer(
1125
1204
  <CustomDatePicker
1126
1205
  valueSpecification={valueSpecification}
1127
1206
  graph={graph}
1128
- observerContext={obseverContext}
1207
+ observerContext={observerContext}
1129
1208
  typeCheckOption={typeCheckOption}
1130
1209
  setValueSpecification={setValueSpecification}
1131
1210
  hasError={
1132
1211
  valueSpecification instanceof PrimitiveInstanceValue &&
1133
1212
  !isValidInstanceValue(valueSpecification)
1134
1213
  }
1214
+ handleBlur={handleBlur}
1215
+ displayAsEditableValue={displayAsEditableValue}
1135
1216
  />
1136
- <button
1137
- className="value-spec-editor__reset-btn"
1138
- name="Reset"
1139
- title="Reset"
1140
- onClick={resetValue}
1141
- >
1142
- <RefreshIcon />
1143
- </button>
1217
+ {!displayAsEditableValue && (
1218
+ <button
1219
+ className="value-spec-editor__reset-btn"
1220
+ name="Reset"
1221
+ title="Reset"
1222
+ onClick={resetValue}
1223
+ >
1224
+ <RefreshIcon />
1225
+ </button>
1226
+ )}
1144
1227
  </div>
1145
1228
  );
1146
1229
  },
@@ -1157,25 +1240,33 @@ export const BasicValueSpecificationEditor = forwardRef<
1157
1240
  {
1158
1241
  valueSpecification: ValueSpecification;
1159
1242
  graph: PureModel;
1160
- obseverContext: ObserverContext;
1243
+ observerContext: ObserverContext;
1161
1244
  typeCheckOption: TypeCheckOption;
1162
1245
  className?: string | undefined;
1163
1246
  setValueSpecification: (val: ValueSpecification) => void;
1164
1247
  resetValue: () => void;
1165
- isConstant?: boolean;
1248
+ isConstant?: boolean | undefined;
1166
1249
  selectorConfig?: BasicValueSpecificationEditorSelectorConfig | undefined;
1250
+ handleBlur?: (() => void) | undefined;
1251
+ handleKeyDown?:
1252
+ | ((event: React.KeyboardEvent<HTMLInputElement>) => void)
1253
+ | undefined;
1254
+ displayDateEditorAsEditableValue?: boolean | undefined;
1167
1255
  }
1168
1256
  >(function BasicValueSpecificationEditor(props, ref) {
1169
1257
  const {
1170
1258
  className,
1171
1259
  valueSpecification,
1172
1260
  graph,
1173
- obseverContext,
1261
+ observerContext,
1174
1262
  typeCheckOption,
1175
1263
  setValueSpecification,
1176
1264
  resetValue,
1177
1265
  selectorConfig,
1178
1266
  isConstant,
1267
+ handleBlur,
1268
+ handleKeyDown,
1269
+ displayDateEditorAsEditableValue,
1179
1270
  } = props;
1180
1271
  if (valueSpecification instanceof PrimitiveInstanceValue) {
1181
1272
  const _type = valueSpecification.genericType.value.rawType;
@@ -1188,8 +1279,10 @@ export const BasicValueSpecificationEditor = forwardRef<
1188
1279
  className={className}
1189
1280
  resetValue={resetValue}
1190
1281
  selectorConfig={selectorConfig}
1191
- obseverContext={obseverContext}
1282
+ observerContext={observerContext}
1192
1283
  ref={ref}
1284
+ handleBlur={handleBlur}
1285
+ handleKeyDown={handleKeyDown}
1193
1286
  />
1194
1287
  );
1195
1288
  case PRIMITIVE_TYPE.BOOLEAN:
@@ -1199,7 +1292,7 @@ export const BasicValueSpecificationEditor = forwardRef<
1199
1292
  setValueSpecification={setValueSpecification}
1200
1293
  className={className}
1201
1294
  resetValue={resetValue}
1202
- obseverContext={obseverContext}
1295
+ observerContext={observerContext}
1203
1296
  />
1204
1297
  );
1205
1298
  case PRIMITIVE_TYPE.NUMBER:
@@ -1215,8 +1308,10 @@ export const BasicValueSpecificationEditor = forwardRef<
1215
1308
  setValueSpecification={setValueSpecification}
1216
1309
  className={className}
1217
1310
  resetValue={resetValue}
1218
- obseverContext={obseverContext}
1311
+ observerContext={observerContext}
1219
1312
  ref={ref}
1313
+ handleBlur={handleBlur}
1314
+ handleKeyDown={handleKeyDown}
1220
1315
  />
1221
1316
  );
1222
1317
  case PRIMITIVE_TYPE.DATE:
@@ -1227,11 +1322,13 @@ export const BasicValueSpecificationEditor = forwardRef<
1227
1322
  <DateInstanceValueEditor
1228
1323
  valueSpecification={valueSpecification}
1229
1324
  graph={graph}
1230
- obseverContext={obseverContext}
1325
+ observerContext={observerContext}
1231
1326
  typeCheckOption={typeCheckOption}
1232
1327
  className={className}
1233
1328
  setValueSpecification={setValueSpecification}
1234
1329
  resetValue={resetValue}
1330
+ handleBlur={handleBlur}
1331
+ displayAsEditableValue={displayDateEditorAsEditableValue}
1235
1332
  />
1236
1333
  );
1237
1334
  default:
@@ -1244,7 +1341,8 @@ export const BasicValueSpecificationEditor = forwardRef<
1244
1341
  className={className}
1245
1342
  resetValue={resetValue}
1246
1343
  setValueSpecification={setValueSpecification}
1247
- obseverContext={obseverContext}
1344
+ observerContext={observerContext}
1345
+ handleBlur={handleBlur}
1248
1346
  />
1249
1347
  );
1250
1348
  } else if (
@@ -1263,7 +1361,7 @@ export const BasicValueSpecificationEditor = forwardRef<
1263
1361
  resetValue={resetValue}
1264
1362
  setValueSpecification={setValueSpecification}
1265
1363
  selectorConfig={selectorConfig}
1266
- obseverContext={obseverContext}
1364
+ observerContext={observerContext}
1267
1365
  />
1268
1366
  );
1269
1367
  }
@@ -1282,10 +1380,13 @@ export const BasicValueSpecificationEditor = forwardRef<
1282
1380
  <BasicValueSpecificationEditor
1283
1381
  valueSpecification={valueSpecification.getValue()}
1284
1382
  graph={graph}
1285
- obseverContext={obseverContext}
1383
+ observerContext={observerContext}
1286
1384
  typeCheckOption={typeCheckOption}
1287
1385
  setValueSpecification={setValueSpecification}
1288
1386
  resetValue={resetValue}
1387
+ handleBlur={handleBlur}
1388
+ handleKeyDown={handleKeyDown}
1389
+ displayDateEditorAsEditableValue={displayDateEditorAsEditableValue}
1289
1390
  />
1290
1391
  );
1291
1392
  } else if (valueSpecification instanceof SimpleFunctionExpression) {
@@ -1295,11 +1396,13 @@ export const BasicValueSpecificationEditor = forwardRef<
1295
1396
  <DateInstanceValueEditor
1296
1397
  valueSpecification={valueSpecification}
1297
1398
  graph={graph}
1298
- obseverContext={obseverContext}
1399
+ observerContext={observerContext}
1299
1400
  typeCheckOption={typeCheckOption}
1300
1401
  className={className}
1301
1402
  setValueSpecification={setValueSpecification}
1302
1403
  resetValue={resetValue}
1404
+ handleBlur={handleBlur}
1405
+ displayAsEditableValue={displayDateEditorAsEditableValue}
1303
1406
  />
1304
1407
  );
1305
1408
  } else {
@@ -1316,7 +1419,7 @@ export const BasicValueSpecificationEditor = forwardRef<
1316
1419
  ) {
1317
1420
  const simplifiedValue = simplifyValueExpression(
1318
1421
  valueSpecification,
1319
- obseverContext,
1422
+ observerContext,
1320
1423
  );
1321
1424
  if (
1322
1425
  simplifiedValue instanceof PrimitiveInstanceValue &&
@@ -1335,8 +1438,10 @@ export const BasicValueSpecificationEditor = forwardRef<
1335
1438
  setValueSpecification={setValueSpecification}
1336
1439
  className={className}
1337
1440
  resetValue={resetValue}
1338
- obseverContext={obseverContext}
1441
+ observerContext={observerContext}
1339
1442
  ref={ref}
1443
+ handleBlur={handleBlur}
1444
+ handleKeyDown={handleKeyDown}
1340
1445
  />
1341
1446
  );
1342
1447
  }
@@ -1345,3 +1450,100 @@ export const BasicValueSpecificationEditor = forwardRef<
1345
1450
 
1346
1451
  return <UnsupportedValueSpecificationEditor />;
1347
1452
  });
1453
+
1454
+ export const EditableBasicValueSpecificationEditor = observer(
1455
+ (props: {
1456
+ valueSpecification: ValueSpecification;
1457
+ setValueSpecification: (valueSpec: ValueSpecification) => void;
1458
+ graph: PureModel;
1459
+ observerContext: ObserverContext;
1460
+ typeCheckOption: TypeCheckOption;
1461
+ resetValue: () => void;
1462
+ selectorConfig?: BasicValueSpecificationEditorSelectorConfig | undefined;
1463
+ isConstant?: boolean;
1464
+ initializeAsEditable?: boolean;
1465
+ }) => {
1466
+ const {
1467
+ valueSpecification,
1468
+ setValueSpecification,
1469
+ graph,
1470
+ observerContext,
1471
+ typeCheckOption,
1472
+ resetValue,
1473
+ selectorConfig,
1474
+ isConstant,
1475
+ initializeAsEditable,
1476
+ } = props;
1477
+ const applicationStore = useApplicationStore();
1478
+
1479
+ const [isEditingValue, setIsEditingValue] = useState(
1480
+ initializeAsEditable ?? false,
1481
+ );
1482
+ const inputRef = useRef<HTMLInputElement>(null);
1483
+
1484
+ useEffect(() => {
1485
+ if (isEditingValue) {
1486
+ inputRef.current?.focus();
1487
+ }
1488
+ }, [isEditingValue, inputRef]);
1489
+
1490
+ const editableDisplayValueSupported =
1491
+ (valueSpecification instanceof PrimitiveInstanceValue &&
1492
+ !isSubType(
1493
+ valueSpecification.genericType.value.rawType,
1494
+ PrimitiveType.DATE,
1495
+ ) &&
1496
+ valueSpecification.genericType.value.rawType !==
1497
+ PrimitiveType.BOOLEAN) ||
1498
+ valueSpecification instanceof EnumValueInstanceValue;
1499
+
1500
+ const shouldRenderEditor = isEditingValue || !editableDisplayValueSupported;
1501
+
1502
+ const valueSpecStringValue = getValueSpecificationStringValue(
1503
+ valueSpecification,
1504
+ applicationStore,
1505
+ {
1506
+ omitEnumOwnerName: true,
1507
+ },
1508
+ );
1509
+
1510
+ return shouldRenderEditor ? (
1511
+ <BasicValueSpecificationEditor
1512
+ valueSpecification={valueSpecification}
1513
+ setValueSpecification={setValueSpecification}
1514
+ graph={graph}
1515
+ observerContext={observerContext}
1516
+ typeCheckOption={typeCheckOption}
1517
+ resetValue={resetValue}
1518
+ selectorConfig={selectorConfig}
1519
+ isConstant={isConstant}
1520
+ ref={inputRef}
1521
+ handleBlur={() => setIsEditingValue(false)}
1522
+ handleKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
1523
+ if (event.key === 'Enter') {
1524
+ setIsEditingValue(false);
1525
+ }
1526
+ }}
1527
+ displayDateEditorAsEditableValue={true}
1528
+ />
1529
+ ) : (
1530
+ <div className="value-spec-editor__editable__display">
1531
+ <span
1532
+ className={clsx(
1533
+ 'value-spec-editor__editable__display--content editable-value',
1534
+ {
1535
+ 'value-spec-editor__editable__display--content--error':
1536
+ valueSpecification instanceof InstanceValue &&
1537
+ !isValidInstanceValue(valueSpecification),
1538
+ },
1539
+ )}
1540
+ onClick={() => {
1541
+ setIsEditingValue(true);
1542
+ }}
1543
+ >
1544
+ {`"${valueSpecStringValue !== undefined ? valueSpecStringValue : ''}"`}
1545
+ </span>
1546
+ </div>
1547
+ );
1548
+ },
1549
+ );