@itwin/components-react 5.28.1 → 5.29.0

package/lib/components-react/new-editors/Types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../src/components-react/new-editors/Types.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAsCH;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAG9B,EACA,MAAM,EACN,mBAAmB,EACnB,gBAAgB,GAKjB;IACC,OAAO;QACL,OAAO,EAAE,CAAC,QAAuB,EAAE,KAAa,EAAE,EAAE,CAClD,mBAAmB,CAAC,QAAQ,CAAC;YAC7B,CAAC,KAAK,KAAK,SAAS,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAClD,6DAA6D;QAC7D,MAAM,EAAE,MAAqD;KAC9D,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport type { ValueMetadata } from \"./values/Metadata.js\";\nimport type { Value } from \"./values/Values.js\";\n\n/**\n * An editor specification defining single editor with a predicate that determines if the editor can be used for a given value.\n * @beta\n */\nexport interface EditorSpec {\n  applies: (metaData: ValueMetadata, value: Value | undefined) => boolean;\n  Editor: React.ComponentType<EditorProps>;\n}\n\n/**\n * Generic editor props that are supplied to the editor for rendering.\n * @beta\n */\nexport interface EditorProps<TMetadata = ValueMetadata, TValue = Value> {\n  metadata: TMetadata;\n  value?: TValue;\n  onChange: (value?: TValue) => void;\n  /**\n   * Callback that allows editor implementation to indicate that editing is finished. This is useful if editor\n   * is rendered inside a container that waits for committing/cancelling action (like `ENTER` or `ESC` key press) but editor implementation\n   * has additional actions that should cause commit (closing popup, commit button, etc.).\n   */\n  commit?: () => void;\n  /**\n   * Callback that allows editor implementation to indicate that editing is cancelled. This is useful if editor\n   * is rendered inside a container that waits for committing/cancelling action (like `ENTER` or `ESC` key press) but editor implementation\n   * has additional actions that should cause cancellation (cancel button, etc).\n   */\n  cancel?: () => void;\n  disabled?: boolean;\n  size?: \"small\" | \"large\";\n}\n\n/**\n * Utility function to create an editor spec for editor with concrete metadata and value types.\n * @beta\n */\nexport function createEditorSpec<\n  TMetadata extends ValueMetadata,\n  TValue extends Value\n>({\n  Editor,\n  isMetadataSupported,\n  isValueSupported,\n}: {\n  isMetadataSupported: (metadata: ValueMetadata) => metadata is TMetadata;\n  isValueSupported: (value: Value) => value is TValue;\n  Editor: React.ComponentType<EditorProps<TMetadata, TValue>>;\n}): EditorSpec {\n  return {\n    applies: (metadata: ValueMetadata, value?: Value) =>\n      isMetadataSupported(metadata) &&\n      (value === undefined || isValueSupported(value)),\n    // typeguards in `applies` function will take care of casting\n    Editor: Editor as unknown as React.ComponentType<EditorProps>,\n  };\n}\n"]}
+{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../src/components-react/new-editors/Types.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AA4CH;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAG9B,EACA,MAAM,EACN,mBAAmB,EACnB,gBAAgB,GAKjB;IACC,OAAO;QACL,OAAO,EAAE,CAAC,QAAuB,EAAE,KAAa,EAAE,EAAE,CAClD,mBAAmB,CAAC,QAAQ,CAAC;YAC7B,CAAC,KAAK,KAAK,SAAS,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAClD,6DAA6D;QAC7D,MAAM,EAAE,MAAqD;KAC9D,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport type { ValueMetadata } from \"./values/Metadata.js\";\nimport type { Value } from \"./values/Values.js\";\n\n/**\n * An editor specification defining single editor with a predicate that determines if the editor can be used for a given value.\n * @beta\n */\nexport interface EditorSpec {\n  applies: (metaData: ValueMetadata, value: Value | undefined) => boolean;\n  Editor: React.ComponentType<EditorProps>;\n}\n\n/**\n * Generic editor props that are supplied to the editor for rendering.\n * @beta\n */\nexport interface EditorProps<TMetadata = ValueMetadata, TValue = Value> {\n  metadata: TMetadata;\n  value?: TValue;\n  onChange: (value?: TValue) => void;\n  /**\n   * Callback that allows editor implementation to indicate that editing is finished. This is useful if editor\n   * is rendered inside a container that waits for committing/cancelling action (like `ENTER` or `ESC` key press) but editor implementation\n   * has additional actions that should cause commit (closing popup, commit button, etc.).\n   */\n  commit?: () => void;\n  /**\n   * Callback that allows editor implementation to indicate that editing is cancelled. This is useful if editor\n   * is rendered inside a container that waits for committing/cancelling action (like `ENTER` or `ESC` key press) but editor implementation\n   * has additional actions that should cause cancellation (cancel button, etc).\n   */\n  cancel?: () => void;\n  disabled?: boolean;\n  size?: \"small\" | \"large\";\n  /**\n   * HTML `id` attribute forwarded to the interactive element. Used to associate\n   * the editor with a `<label htmlFor>` so that `getByLabelText` queries work and\n   * the UI meets accessibility requirements.\n   */\n  id?: string;\n}\n\n/**\n * Utility function to create an editor spec for editor with concrete metadata and value types.\n * @beta\n */\nexport function createEditorSpec<\n  TMetadata extends ValueMetadata,\n  TValue extends Value\n>({\n  Editor,\n  isMetadataSupported,\n  isValueSupported,\n}: {\n  isMetadataSupported: (metadata: ValueMetadata) => metadata is TMetadata;\n  isValueSupported: (value: Value) => value is TValue;\n  Editor: React.ComponentType<EditorProps<TMetadata, TValue>>;\n}): EditorSpec {\n  return {\n    applies: (metadata: ValueMetadata, value?: Value) =>\n      isMetadataSupported(metadata) &&\n      (value === undefined || isValueSupported(value)),\n    // typeguards in `applies` function will take care of casting\n    Editor: Editor as unknown as React.ComponentType<EditorProps>,\n  };\n}\n"]}

package/lib/components-react/new-editors/UseCommittableValue.d.ts

@@ -3,6 +3,7 @@
  */
 import * as React from "react";
 import type { Value } from "./values/Values.js";
+import type { EditorProps } from "./Types.js";
 interface UseCommittableValueProps {
     initialValue?: Value;
     onCommit: (value?: Value) => void;
@@ -40,12 +41,8 @@ interface UseCommittableValueProps {
  *
  * @beta
  */
-export declare function useCommittableValue({ initialValue, onCancel, onCommit, }: UseCommittableValueProps): {
-    onChange: (newValue?: Value) => void;
+export declare function useCommittableValue({ initialValue, onCancel, onCommit, }: UseCommittableValueProps): Pick<EditorProps, "commit" | "value" | "onChange" | "cancel"> & {
     onKeydown: (e: React.KeyboardEvent) => void;
-    commit: () => void;
-    cancel: () => void;
-    value: Value | undefined;
 };
 export {};
 //# sourceMappingURL=UseCommittableValue.d.ts.map

package/lib/components-react/new-editors/UseCommittableValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UseCommittableValue.d.ts","sourceRoot":"","sources":["../../../src/components-react/new-editors/UseCommittableValue.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAGhD,UAAU,wBAAwB;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,wBAAwB;0BAaQ,KAAK;mBAwBZ,KAAK,CAAC,aAAa;;;;EAiB9C"}
+{"version":3,"file":"UseCommittableValue.d.ts","sourceRoot":"","sources":["../../../src/components-react/new-editors/UseCommittableValue.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9C,UAAU,wBAAwB;IAChC,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,wBAAwB,GAAG,IAAI,CAChC,WAAW,EACX,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAC3C,GAAG;IAAE,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAA;CAAE,CAyDlD"}

package/lib/components-react/new-editors/UseCommittableValue.js

@@ -47,7 +47,10 @@ export function useCommittableValue({ initialValue, onCancel, onCommit, }) {
         value: initialValue,
     });
     const handleChange = (newValue) => {
-        currentValueRef.current = { state: "changed", value: newValue };
+        currentValueRef.current = {
+            state: "changed",
+            value: newValue,
+        };
         setCurrentValue(newValue);
     };
     const handleCommit = () => {

package/lib/components-react/new-editors/UseCommittableValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"UseCommittableValue.js","sourceRoot":"","sources":["../../../src/components-react/new-editors/UseCommittableValue.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAQtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,YAAY,EACZ,QAAQ,EACR,QAAQ,GACiB;IACzB,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CACpD,YAAY,CACb,CAAC;IACF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAGjC;QACD,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,YAAY;KACpB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,EAAE;QACxC,eAAe,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;QAChE,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IACE,eAAe,CAAC,OAAO,CAAC,KAAK,KAAK,SAAS;YAC3C,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,EACjE,CAAC;YACD,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;QACD,IAAI,eAAe,CAAC,OAAO,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;YAClD,OAAO;QACT,CAAC;QACD,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,eAAe,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;QACjD,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC/C,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACzC,YAAY,EAAE,CAAC;QACjB,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC9B,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO;QACL,QAAQ,EAAE,YAAY;QACtB,SAAS,EAAE,aAAa;QACxB,MAAM,EAAE,YAAY;QACpB,MAAM,EAAE,YAAY;QACpB,KAAK,EAAE,YAAY;KACpB,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport * as React from \"react\";\nimport type { Value } from \"./values/Values.js\";\nimport { areEqual } from \"./values/ValueUtilities.js\";\n\ninterface UseCommittableValueProps {\n  initialValue?: Value;\n  onCommit: (value?: Value) => void;\n  onCancel?: () => void;\n}\n\n/**\n * Custom React hook that provides to commit or cancel value changes by editor using\n * `Enter` or `Escape` keys.\n *\n * Example usage:\n *\n * ```tsx\n * function MyValueEditor({ initialValue, ...editorProps }: Props) {\n *   const { value, onChange, onKeyDown, commit, cancel } = useCommittableValue({\n *     initialValue,\n *     onCommit: (newValue) => {\n *       // commit new value\n *     }\n *     onCancel: () => {\n *       // restore to initial value or close editor\n *     }\n *   })\n *\n *   return <div onKeyDown={onKeydown}>\n *     <Editor\n *       {...editorProps}\n *       value={value}\n *       onChange={onChange}\n *       commit={commit}\n *       cancel={cancel}\n *     />\n *   </div>\n * }\n * ```\n *\n * @beta\n */\nexport function useCommittableValue({\n  initialValue,\n  onCancel,\n  onCommit,\n}: UseCommittableValueProps) {\n  const initialValueRef = React.useRef(initialValue);\n  const [currentValue, setCurrentValue] = React.useState<Value | undefined>(\n    initialValue\n  );\n  const currentValueRef = React.useRef<{\n    state: \"changed\" | \"cancelled\" | \"initial\";\n    value?: Value;\n  }>({\n    state: \"initial\",\n    value: initialValue,\n  });\n\n  const handleChange = (newValue?: Value) => {\n    currentValueRef.current = { state: \"changed\", value: newValue };\n    setCurrentValue(newValue);\n  };\n\n  const handleCommit = () => {\n    if (\n      currentValueRef.current.state === \"changed\" &&\n      !areEqual(currentValueRef.current.value, initialValueRef.current)\n    ) {\n      onCommit(currentValueRef.current.value);\n      return;\n    }\n    if (currentValueRef.current.state === \"cancelled\") {\n      return;\n    }\n    onCancel?.();\n  };\n\n  const handleCancel = () => {\n    currentValueRef.current = { state: \"cancelled\" };\n    onCancel?.();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    e.stopPropagation();\n\n    if (e.key === \"Enter\" || e.key === \"Tab\") {\n      handleCommit();\n    } else if (e.key === \"Escape\") {\n      handleCancel();\n    }\n  };\n\n  return {\n    onChange: handleChange,\n    onKeydown: handleKeyDown,\n    commit: handleCommit,\n    cancel: handleCancel,\n    value: currentValue,\n  };\n}\n"]}
+{"version":3,"file":"UseCommittableValue.js","sourceRoot":"","sources":["../../../src/components-react/new-editors/UseCommittableValue.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAStD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAClC,YAAY,EACZ,QAAQ,EACR,QAAQ,GACiB;IAIzB,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;IACnD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CACpD,YAAY,CACb,CAAC;IACF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAGjC;QACD,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,YAAY;KACpB,CAAC,CAAC;IAEH,MAAM,YAAY,GAA4B,CAAC,QAAgB,EAAE,EAAE;QACjE,eAAe,CAAC,OAAO,GAAG;YACxB,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE,QAAQ;SAChB,CAAC;QACF,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IACE,eAAe,CAAC,OAAO,CAAC,KAAK,KAAK,SAAS;YAC3C,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,eAAe,CAAC,OAAO,CAAC,EACjE,CAAC;YACD,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;QACD,IAAI,eAAe,CAAC,OAAO,CAAC,KAAK,KAAK,WAAW,EAAE,CAAC;YAClD,OAAO;QACT,CAAC;QACD,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,eAAe,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC;QACjD,QAAQ,EAAE,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC/C,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;YACzC,YAAY,EAAE,CAAC;QACjB,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC9B,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO;QACL,QAAQ,EAAE,YAAY;QACtB,SAAS,EAAE,aAAa;QACxB,MAAM,EAAE,YAAY;QACpB,MAAM,EAAE,YAAY;QACpB,KAAK,EAAE,YAAY;KACpB,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module PropertyEditors\n */\n\nimport * as React from \"react\";\nimport type { Value } from \"./values/Values.js\";\nimport { areEqual } from \"./values/ValueUtilities.js\";\nimport type { EditorProps } from \"./Types.js\";\n\ninterface UseCommittableValueProps {\n  initialValue?: Value;\n  onCommit: (value?: Value) => void;\n  onCancel?: () => void;\n}\n\n/**\n * Custom React hook that provides to commit or cancel value changes by editor using\n * `Enter` or `Escape` keys.\n *\n * Example usage:\n *\n * ```tsx\n * function MyValueEditor({ initialValue, ...editorProps }: Props) {\n *   const { value, onChange, onKeyDown, commit, cancel } = useCommittableValue({\n *     initialValue,\n *     onCommit: (newValue) => {\n *       // commit new value\n *     }\n *     onCancel: () => {\n *       // restore to initial value or close editor\n *     }\n *   })\n *\n *   return <div onKeyDown={onKeydown}>\n *     <Editor\n *       {...editorProps}\n *       value={value}\n *       onChange={onChange}\n *       commit={commit}\n *       cancel={cancel}\n *     />\n *   </div>\n * }\n * ```\n *\n * @beta\n */\nexport function useCommittableValue({\n  initialValue,\n  onCancel,\n  onCommit,\n}: UseCommittableValueProps): Pick<\n  EditorProps,\n  \"commit\" | \"value\" | \"onChange\" | \"cancel\"\n> & { onKeydown: (e: React.KeyboardEvent) => void } {\n  const initialValueRef = React.useRef(initialValue);\n  const [currentValue, setCurrentValue] = React.useState<Value | undefined>(\n    initialValue\n  );\n  const currentValueRef = React.useRef<{\n    state: \"changed\" | \"cancelled\" | \"initial\";\n    value?: Value;\n  }>({\n    state: \"initial\",\n    value: initialValue,\n  });\n\n  const handleChange: EditorProps[\"onChange\"] = (newValue?: Value) => {\n    currentValueRef.current = {\n      state: \"changed\",\n      value: newValue,\n    };\n    setCurrentValue(newValue);\n  };\n\n  const handleCommit = () => {\n    if (\n      currentValueRef.current.state === \"changed\" &&\n      !areEqual(currentValueRef.current.value, initialValueRef.current)\n    ) {\n      onCommit(currentValueRef.current.value);\n      return;\n    }\n    if (currentValueRef.current.state === \"cancelled\") {\n      return;\n    }\n    onCancel?.();\n  };\n\n  const handleCancel = () => {\n    currentValueRef.current = { state: \"cancelled\" };\n    onCancel?.();\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    e.stopPropagation();\n\n    if (e.key === \"Enter\" || e.key === \"Tab\") {\n      handleCommit();\n    } else if (e.key === \"Escape\") {\n      handleCancel();\n    }\n  };\n\n  return {\n    onChange: handleChange,\n    onKeydown: handleKeyDown,\n    commit: handleCommit,\n    cancel: handleCancel,\n    value: currentValue,\n  };\n}\n"]}

package/lib/components-react/new-editors/editors/BooleanEditor.d.ts

@@ -6,5 +6,5 @@ import type { BooleanValue } from "../values/Values.js";
  * Boolean value editor that renders `Checkbox` component for changing value.
  * @internal
  */
-export declare function BooleanEditor({ value, onChange, commit, disabled, }: EditorProps<ValueMetadata, BooleanValue>): React.JSX.Element;
+export declare function BooleanEditor({ value, onChange, commit, disabled, id, }: EditorProps<ValueMetadata, BooleanValue>): React.JSX.Element;
 //# sourceMappingURL=BooleanEditor.d.ts.map

package/lib/components-react/new-editors/editors/BooleanEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/BooleanEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,GACT,EAAE,WAAW,CAAC,aAAa,EAAE,YAAY,CAAC,qBAe1C"}
+{"version":3,"file":"BooleanEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/BooleanEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,EAAE,GACH,EAAE,WAAW,CAAC,aAAa,EAAE,YAAY,CAAC,qBAgB1C"}

package/lib/components-react/new-editors/editors/BooleanEditor.js

@@ -9,14 +9,14 @@ import { Checkbox } from "@itwin/itwinui-react";
  * Boolean value editor that renders `Checkbox` component for changing value.
  * @internal
  */
-export function BooleanEditor({ value, onChange, commit, disabled, }) {
+export function BooleanEditor({ value, onChange, commit, disabled, id, }) {
     const currentValue = value?.value ?? false;
     const handleChange = (e) => {
         const newValue = { value: e.target.checked };
         onChange(newValue);
         commit?.();
     };
-    return (React.createElement(Checkbox, { checked: currentValue, onChange: handleChange, disabled: disabled }));
+    return (React.createElement(Checkbox, { id: id, checked: currentValue, onChange: handleChange, disabled: disabled }));
 }
 /* v8 ignore stop */
 //# sourceMappingURL=BooleanEditor.js.map

package/lib/components-react/new-editors/editors/BooleanEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"BooleanEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/BooleanEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAKhD,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,GACiC;IACzC,MAAM,YAAY,GAAG,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAC7C,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,IACP,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { BooleanValue } from \"../values/Values.js\";\n\n/* v8 ignore start */\n\n/**\n * Boolean value editor that renders `Checkbox` component for changing value.\n * @internal\n */\nexport function BooleanEditor({\n  value,\n  onChange,\n  commit,\n  disabled,\n}: EditorProps<ValueMetadata, BooleanValue>) {\n  const currentValue = value?.value ?? false;\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = { value: e.target.checked };\n    onChange(newValue);\n    commit?.();\n  };\n\n  return (\n    <Checkbox\n      checked={currentValue}\n      onChange={handleChange}\n      disabled={disabled}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"BooleanEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/BooleanEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAKhD,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,EAAE,GACuC;IACzC,MAAM,YAAY,GAAG,KAAK,EAAE,KAAK,IAAI,KAAK,CAAC;IAC3C,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAC7C,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { BooleanValue } from \"../values/Values.js\";\n\n/* v8 ignore start */\n\n/**\n * Boolean value editor that renders `Checkbox` component for changing value.\n * @internal\n */\nexport function BooleanEditor({\n  value,\n  onChange,\n  commit,\n  disabled,\n  id,\n}: EditorProps<ValueMetadata, BooleanValue>) {\n  const currentValue = value?.value ?? false;\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = { value: e.target.checked };\n    onChange(newValue);\n    commit?.();\n  };\n\n  return (\n    <Checkbox\n      id={id}\n      checked={currentValue}\n      onChange={handleChange}\n      disabled={disabled}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors/DateEditor.d.ts

@@ -6,5 +6,5 @@ import type { DateValue } from "../values/Values.js";
  * Date value editor that render `DatePicker` component for changing value.
  * @internal
  */
-export declare function DateEditor({ value, onChange, commit, size, disabled, }: EditorProps<ValueMetadata, DateValue>): React.JSX.Element;
+export declare function DateEditor({ value, onChange, commit, size, disabled, id, }: EditorProps<ValueMetadata, DateValue>): React.JSX.Element;
 //# sourceMappingURL=DateEditor.d.ts.map

package/lib/components-react/new-editors/editors/DateEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE,WAAW,CAAC,aAAa,EAAE,SAAS,CAAC,qBAYvC"}
+{"version":3,"file":"DateEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,EAAE,GACH,EAAE,WAAW,CAAC,aAAa,EAAE,SAAS,CAAC,qBAavC"}

package/lib/components-react/new-editors/editors/DateEditor.js

@@ -9,10 +9,10 @@ import { DateInput } from "./DateInput.js";
  * Date value editor that render `DatePicker` component for changing value.
  * @internal
  */
-export function DateEditor({ value, onChange, commit, size, disabled, }) {
+export function DateEditor({ value, onChange, commit, size, disabled, id, }) {
     return (React.createElement(DateInput, { value: value?.value, onChange: (newValue) => {
             onChange({ value: newValue });
-        }, onClose: commit, size: size, disabled: disabled }));
+        }, onClose: commit, size: size, disabled: disabled, id: id }));
 }
 /* v8 ignore stop */
 //# sourceMappingURL=DateEditor.js.map

package/lib/components-react/new-editors/editors/DateEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GAC8B;IACtC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChC,CAAC,EACD,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { DateValue } from \"../values/Values.js\";\nimport { DateInput } from \"./DateInput.js\";\n\n/* v8 ignore start */\n\n/**\n * Date value editor that render `DatePicker` component for changing value.\n * @internal\n */\nexport function DateEditor({\n  value,\n  onChange,\n  commit,\n  size,\n  disabled,\n}: EditorProps<ValueMetadata, DateValue>) {\n  return (\n    <DateInput\n      value={value?.value}\n      onChange={(newValue) => {\n        onChange({ value: newValue });\n      }}\n      onClose={commit}\n      size={size}\n      disabled={disabled}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"DateEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,EAAE,GACoC;IACtC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChC,CAAC,EACD,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,GACN,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { DateValue } from \"../values/Values.js\";\nimport { DateInput } from \"./DateInput.js\";\n\n/* v8 ignore start */\n\n/**\n * Date value editor that render `DatePicker` component for changing value.\n * @internal\n */\nexport function DateEditor({\n  value,\n  onChange,\n  commit,\n  size,\n  disabled,\n  id,\n}: EditorProps<ValueMetadata, DateValue>) {\n  return (\n    <DateInput\n      value={value?.value}\n      onChange={(newValue) => {\n        onChange({ value: newValue });\n      }}\n      onClose={commit}\n      size={size}\n      disabled={disabled}\n      id={id}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors/DateInput.d.ts

@@ -6,10 +6,11 @@ interface DateInputProps {
     size?: "small" | "large";
     disabled?: boolean;
     showTimePicker?: boolean;
+    id?: string;
 }
 /**
  * @internal
  */
-export declare function DateInput({ value, onChange, onClose, size, showTimePicker, disabled, }: DateInputProps): React.JSX.Element;
+export declare function DateInput({ value, onChange, onClose, size, showTimePicker, disabled, id, }: DateInputProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=DateInput.d.ts.map

package/lib/components-react/new-editors/editors/DateInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateInput.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,cAAc,EACd,QAAQ,GACT,EAAE,cAAc,qBA4BhB"}
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateInput.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,cAAc,EACd,QAAQ,EACR,EAAE,GACH,EAAE,cAAc,qBA4BhB"}

package/lib/components-react/new-editors/editors/DateInput.js

@@ -7,7 +7,7 @@ import { Button, DatePicker, Popover } from "@itwin/itwinui-react";
 /**
  * @internal
  */
-export function DateInput({ value, onChange, onClose, size, showTimePicker, disabled, }) {
+export function DateInput({ value, onChange, onClose, size, showTimePicker, disabled, id, }) {
     const currentValue = value ?? new Date();
     const dateStr = showTimePicker
         ? currentValue.toLocaleString()
@@ -17,7 +17,7 @@ export function DateInput({ value, onChange, onClose, size, showTimePicker, disa
                 onClose?.();
             }
         } },
-        React.createElement(Button, { style: { width: "100%" }, size: size, disabled: disabled }, dateStr)));
+        React.createElement(Button, { id: id, style: { width: "100%" }, size: size, disabled: disabled }, dateStr)));
 }
 /* v8 ignore stop */
 //# sourceMappingURL=DateInput.js.map

package/lib/components-react/new-editors/editors/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateInput.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAanE;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,cAAc,EACd,QAAQ,GACO;IACf,MAAM,YAAY,GAAG,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,cAAc;QAC5B,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE;QAC/B,CAAC,CAAC,YAAY,CAAC,kBAAkB,EAAE,CAAC;IAEtC,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAC,QAAQ,EAClB,OAAO,EACL,oBAAC,UAAU,IACT,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,KAAK,EAC5B,QAAQ,EAAE,cAAc,GACxB,EAEJ,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE;YAC3B,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO,EAAE,EAAE,CAAC;YACd,CAAC;QACH,CAAC;QAED,oBAAC,MAAM,IAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAC7D,OAAO,CACD,CACD,CACX,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Button, DatePicker, Popover } from \"@itwin/itwinui-react\";\n\n/* v8 ignore start */\n\ninterface DateInputProps {\n  value?: Date;\n  onChange: (value: Date) => void;\n  onClose?: () => void;\n  size?: \"small\" | \"large\";\n  disabled?: boolean;\n  showTimePicker?: boolean;\n}\n\n/**\n * @internal\n */\nexport function DateInput({\n  value,\n  onChange,\n  onClose,\n  size,\n  showTimePicker,\n  disabled,\n}: DateInputProps) {\n  const currentValue = value ?? new Date();\n  const dateStr = showTimePicker\n    ? currentValue.toLocaleString()\n    : currentValue.toLocaleDateString();\n\n  return (\n    <Popover\n      placement=\"bottom\"\n      content={\n        <DatePicker\n          date={currentValue}\n          onChange={onChange}\n          showDatesOutsideMonth={false}\n          showTime={showTimePicker}\n        />\n      }\n      onVisibleChange={(visible) => {\n        if (!visible) {\n          onClose?.();\n        }\n      }}\n    >\n      <Button style={{ width: \"100%\" }} size={size} disabled={disabled}>\n        {dateStr}\n      </Button>\n    </Popover>\n  );\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"DateInput.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateInput.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAcnE;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,cAAc,EACd,QAAQ,EACR,EAAE,GACa;IACf,MAAM,YAAY,GAAG,KAAK,IAAI,IAAI,IAAI,EAAE,CAAC;IACzC,MAAM,OAAO,GAAG,cAAc;QAC5B,CAAC,CAAC,YAAY,CAAC,cAAc,EAAE;QAC/B,CAAC,CAAC,YAAY,CAAC,kBAAkB,EAAE,CAAC;IAEtC,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAC,QAAQ,EAClB,OAAO,EACL,oBAAC,UAAU,IACT,IAAI,EAAE,YAAY,EAClB,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,KAAK,EAC5B,QAAQ,EAAE,cAAc,GACxB,EAEJ,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE;YAC3B,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAO,EAAE,EAAE,CAAC;YACd,CAAC;QACH,CAAC;QAED,oBAAC,MAAM,IAAC,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,IACrE,OAAO,CACD,CACD,CACX,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Button, DatePicker, Popover } from \"@itwin/itwinui-react\";\n\n/* v8 ignore start */\n\ninterface DateInputProps {\n  value?: Date;\n  onChange: (value: Date) => void;\n  onClose?: () => void;\n  size?: \"small\" | \"large\";\n  disabled?: boolean;\n  showTimePicker?: boolean;\n  id?: string;\n}\n\n/**\n * @internal\n */\nexport function DateInput({\n  value,\n  onChange,\n  onClose,\n  size,\n  showTimePicker,\n  disabled,\n  id,\n}: DateInputProps) {\n  const currentValue = value ?? new Date();\n  const dateStr = showTimePicker\n    ? currentValue.toLocaleString()\n    : currentValue.toLocaleDateString();\n\n  return (\n    <Popover\n      placement=\"bottom\"\n      content={\n        <DatePicker\n          date={currentValue}\n          onChange={onChange}\n          showDatesOutsideMonth={false}\n          showTime={showTimePicker}\n        />\n      }\n      onVisibleChange={(visible) => {\n        if (!visible) {\n          onClose?.();\n        }\n      }}\n    >\n      <Button id={id} style={{ width: \"100%\" }} size={size} disabled={disabled}>\n        {dateStr}\n      </Button>\n    </Popover>\n  );\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors/DateTimeEditor.d.ts

@@ -6,5 +6,5 @@ import type { DateValue } from "../values/Values.js";
  * Date time value editor that render `DatePicker` component with time selector for changing value.
  * @internal
  */
-export declare function DateTimeEditor({ value, onChange, commit, size, disabled, }: EditorProps<ValueMetadata, DateValue>): React.JSX.Element;
+export declare function DateTimeEditor({ value, onChange, commit, size, disabled, id, }: EditorProps<ValueMetadata, DateValue>): React.JSX.Element;
 //# sourceMappingURL=DateTimeEditor.d.ts.map

package/lib/components-react/new-editors/editors/DateTimeEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateTimeEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE,WAAW,CAAC,aAAa,EAAE,SAAS,CAAC,qBAavC"}
+{"version":3,"file":"DateTimeEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateTimeEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,EAAE,GACH,EAAE,WAAW,CAAC,aAAa,EAAE,SAAS,CAAC,qBAcvC"}

package/lib/components-react/new-editors/editors/DateTimeEditor.js

@@ -9,10 +9,10 @@ import { DateInput } from "./DateInput.js";
  * Date time value editor that render `DatePicker` component with time selector for changing value.
  * @internal
  */
-export function DateTimeEditor({ value, onChange, commit, size, disabled, }) {
+export function DateTimeEditor({ value, onChange, commit, size, disabled, id, }) {
     return (React.createElement(DateInput, { value: value?.value, onChange: (newValue) => {
             onChange({ value: newValue });
-        }, onClose: commit, size: size, disabled: disabled, showTimePicker: true }));
+        }, onClose: commit, size: size, disabled: disabled, showTimePicker: true, id: id }));
 }
 /* v8 ignore stop */
 //# sourceMappingURL=DateTimeEditor.js.map

package/lib/components-react/new-editors/editors/DateTimeEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateTimeEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GAC8B;IACtC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChC,CAAC,EACD,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,IAAI,GACpB,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { DateValue } from \"../values/Values.js\";\nimport { DateInput } from \"./DateInput.js\";\n\n/* v8 ignore start */\n\n/**\n * Date time value editor that render `DatePicker` component with time selector for changing value.\n * @internal\n */\nexport function DateTimeEditor({\n  value,\n  onChange,\n  commit,\n  size,\n  disabled,\n}: EditorProps<ValueMetadata, DateValue>) {\n  return (\n    <DateInput\n      value={value?.value}\n      onChange={(newValue) => {\n        onChange({ value: newValue });\n      }}\n      onClose={commit}\n      size={size}\n      disabled={disabled}\n      showTimePicker={true}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"DateTimeEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/DateTimeEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,EAAE,GACoC;IACtC,OAAO,CACL,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,EAAE,KAAK,EACnB,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;QAChC,CAAC,EACD,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,IAAI,EACpB,EAAE,EAAE,EAAE,GACN,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { DateValue } from \"../values/Values.js\";\nimport { DateInput } from \"./DateInput.js\";\n\n/* v8 ignore start */\n\n/**\n * Date time value editor that render `DatePicker` component with time selector for changing value.\n * @internal\n */\nexport function DateTimeEditor({\n  value,\n  onChange,\n  commit,\n  size,\n  disabled,\n  id,\n}: EditorProps<ValueMetadata, DateValue>) {\n  return (\n    <DateInput\n      value={value?.value}\n      onChange={(newValue) => {\n        onChange({ value: newValue });\n      }}\n      onClose={commit}\n      size={size}\n      disabled={disabled}\n      showTimePicker={true}\n      id={id}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors/EnumEditor.d.ts

@@ -6,5 +6,5 @@ import type { EnumValue } from "../values/Values.js";
  * Enum value editor that renders `Select` component for changing value.
  * @internal
  */
-export declare function EnumEditor({ metadata, value, onChange, commit, size, disabled, }: EditorProps<EnumValueMetadata, EnumValue>): React.JSX.Element;
+export declare function EnumEditor({ metadata, value, onChange, commit, size, disabled, id, }: EditorProps<EnumValueMetadata, EnumValue>): React.JSX.Element;
 //# sourceMappingURL=EnumEditor.d.ts.map

package/lib/components-react/new-editors/editors/EnumEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnumEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/EnumEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE,WAAW,CAAC,iBAAiB,EAAE,SAAS,CAAC,qBAoB3C"}
+{"version":3,"file":"EnumEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/EnumEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAc,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,EAAE,GACH,EAAE,WAAW,CAAC,iBAAiB,EAAE,SAAS,CAAC,qBAqB3C"}

package/lib/components-react/new-editors/editors/EnumEditor.js

@@ -9,7 +9,7 @@ import { Select } from "@itwin/itwinui-react";
  * Enum value editor that renders `Select` component for changing value.
  * @internal
  */
-export function EnumEditor({ metadata, value, onChange, commit, size, disabled, }) {
+export function EnumEditor({ metadata, value, onChange, commit, size, disabled, id, }) {
     const choices = metadata.choices;
     const currentValue = getEnumValue(value, choices);
     const handleChange = (newChoice) => {
@@ -18,7 +18,7 @@ export function EnumEditor({ metadata, value, onChange, commit, size, disabled,
         onChange(newValue);
         commit?.();
     };
-    return (React.createElement(Select, { size: size, value: currentValue.choice, onChange: handleChange, options: choices.map((c) => ({ value: c.value, label: c.label })), disabled: disabled }));
+    return (React.createElement(Select, { id: id, size: size, value: currentValue.choice, onChange: handleChange, options: choices.map((c) => ({ value: c.value, label: c.label })), disabled: disabled }));
 }
 function getEnumValue(value, choices) {
     const defaultValue = choices.length > 0

package/lib/components-react/new-editors/editors/EnumEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnumEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/EnumEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAK9C,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACkC;IAC1C,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;IACjC,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,CAAC,SAA0B,EAAE,EAAE;QAClD,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;QAC1D,MAAM,QAAQ,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC;QACnE,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,YAAY,CAAC,MAAM,EAC1B,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,EACjE,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CACnB,KAA4B,EAC5B,OAAqB;IAErB,MAAM,YAAY,GAChB,OAAO,CAAC,MAAM,GAAG,CAAC;QAChB,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;QACvD,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAChC,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC;AACtC,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Select } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { EnumChoice, EnumValueMetadata } from \"../values/Metadata.js\";\nimport type { EnumValue } from \"../values/Values.js\";\n\n/* v8 ignore start */\n\n/**\n * Enum value editor that renders `Select` component for changing value.\n * @internal\n */\nexport function EnumEditor({\n  metadata,\n  value,\n  onChange,\n  commit,\n  size,\n  disabled,\n}: EditorProps<EnumValueMetadata, EnumValue>) {\n  const choices = metadata.choices;\n  const currentValue = getEnumValue(value, choices);\n\n  const handleChange = (newChoice: number | string) => {\n    const choice = choices.find((c) => c.value === newChoice);\n    const newValue = { choice: newChoice, label: choice?.label ?? \"\" };\n    onChange(newValue);\n    commit?.();\n  };\n\n  return (\n    <Select\n      size={size}\n      value={currentValue.choice}\n      onChange={handleChange}\n      options={choices.map((c) => ({ value: c.value, label: c.label }))}\n      disabled={disabled}\n    />\n  );\n}\n\nfunction getEnumValue(\n  value: EnumValue | undefined,\n  choices: EnumChoice[]\n): EnumValue {\n  const defaultValue =\n    choices.length > 0\n      ? { choice: choices[0].value, label: choices[0].label }\n      : { choice: \"\", label: \"\" };\n  return value ? value : defaultValue;\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"EnumEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/EnumEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAK9C,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,EAAE,GACwC;IAC1C,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;IACjC,MAAM,YAAY,GAAG,YAAY,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,CAAC,SAA0B,EAAE,EAAE;QAClD,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC;QAC1D,MAAM,QAAQ,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC;QACnE,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,YAAY,CAAC,MAAM,EAC1B,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,EACjE,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CACnB,KAA4B,EAC5B,OAAqB;IAErB,MAAM,YAAY,GAChB,OAAO,CAAC,MAAM,GAAG,CAAC;QAChB,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE;QACvD,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAChC,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC;AACtC,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Select } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { EnumChoice, EnumValueMetadata } from \"../values/Metadata.js\";\nimport type { EnumValue } from \"../values/Values.js\";\n\n/* v8 ignore start */\n\n/**\n * Enum value editor that renders `Select` component for changing value.\n * @internal\n */\nexport function EnumEditor({\n  metadata,\n  value,\n  onChange,\n  commit,\n  size,\n  disabled,\n  id,\n}: EditorProps<EnumValueMetadata, EnumValue>) {\n  const choices = metadata.choices;\n  const currentValue = getEnumValue(value, choices);\n\n  const handleChange = (newChoice: number | string) => {\n    const choice = choices.find((c) => c.value === newChoice);\n    const newValue = { choice: newChoice, label: choice?.label ?? \"\" };\n    onChange(newValue);\n    commit?.();\n  };\n\n  return (\n    <Select\n      id={id}\n      size={size}\n      value={currentValue.choice}\n      onChange={handleChange}\n      options={choices.map((c) => ({ value: c.value, label: c.label }))}\n      disabled={disabled}\n    />\n  );\n}\n\nfunction getEnumValue(\n  value: EnumValue | undefined,\n  choices: EnumChoice[]\n): EnumValue {\n  const defaultValue =\n    choices.length > 0\n      ? { choice: choices[0].value, label: choices[0].label }\n      : { choice: \"\", label: \"\" };\n  return value ? value : defaultValue;\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors/FallbackEditor.d.ts

@@ -4,5 +4,5 @@ import type { EditorProps } from "../Types.js";
  * Fallback editor that renders readonly value if no editor is found.
  * @internal
  */
-export declare function FallbackEditor({ value, size }: EditorProps): React.JSX.Element;
+export declare function FallbackEditor({ value, size, id }: EditorProps): React.JSX.Element;
 //# sourceMappingURL=FallbackEditor.d.ts.map

package/lib/components-react/new-editors/editors/FallbackEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FallbackEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FallbackEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAa/C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,WAAW,qBAE1D"}
+{"version":3,"file":"FallbackEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FallbackEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAa/C;;;GAGG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,WAAW,qBAE9D"}

package/lib/components-react/new-editors/editors/FallbackEditor.js

@@ -10,8 +10,8 @@ import { isBoolean, isDate, isEnum, isInstanceKey, isNumeric, isText, } from "..
  * Fallback editor that renders readonly value if no editor is found.
  * @internal
  */
-export function FallbackEditor({ value, size }) {
-    return React.createElement(Input, { readOnly: true, value: getTextValue(value), size: size });
+export function FallbackEditor({ value, size, id }) {
+    return React.createElement(Input, { id: id, readOnly: true, value: getTextValue(value), size: size });
 }
 function getTextValue(value) {
     if (value === undefined) {

package/lib/components-react/new-editors/editors/FallbackEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"FallbackEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FallbackEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG7C,OAAO,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,aAAa,EACb,SAAS,EACT,MAAM,GACP,MAAM,6BAA6B,CAAC;AAErC,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAe;IACzD,OAAO,oBAAC,KAAK,IAAC,QAAQ,QAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACpE,CAAC;AAED,SAAS,YAAY,CAAC,KAAa;IACjC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACxC,CAAC;IACD,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IACpC,CAAC;IACD,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,MAAM,CAAC;IACtB,CAAC;IACD,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC,YAAY,CAAC;IAC5B,CAAC;IACD,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,KAAK,CAAC;IACrB,CAAC;IACD,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,KAAK,CAAC;IACrB,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { Value } from \"../values/Values.js\";\nimport {\n  isBoolean,\n  isDate,\n  isEnum,\n  isInstanceKey,\n  isNumeric,\n  isText,\n} from \"../values/ValueUtilities.js\";\n\n/* v8 ignore start */\n\n/**\n * Fallback editor that renders readonly value if no editor is found.\n * @internal\n */\nexport function FallbackEditor({ value, size }: EditorProps) {\n  return <Input readOnly value={getTextValue(value)} size={size} />;\n}\n\nfunction getTextValue(value?: Value) {\n  if (value === undefined) {\n    return value;\n  }\n  if (isBoolean(value)) {\n    return value.value ? \"true\" : \"false\";\n  }\n  if (isDate(value)) {\n    return value.value.toDateString();\n  }\n  if (isEnum(value)) {\n    return value.choice;\n  }\n  if (isNumeric(value)) {\n    return value.displayValue;\n  }\n  if (isText(value)) {\n    return value.value;\n  }\n  if (isInstanceKey(value)) {\n    return value.label;\n  }\n  return \"\";\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"FallbackEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FallbackEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAG7C,OAAO,EACL,SAAS,EACT,MAAM,EACN,MAAM,EACN,aAAa,EACb,SAAS,EACT,MAAM,GACP,MAAM,6BAA6B,CAAC;AAErC,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAe;IAC7D,OAAO,oBAAC,KAAK,IAAC,EAAE,EAAE,EAAE,EAAE,QAAQ,QAAC,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AAC5E,CAAC;AAED,SAAS,YAAY,CAAC,KAAa;IACjC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IACxC,CAAC;IACD,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;IACpC,CAAC;IACD,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,MAAM,CAAC;IACtB,CAAC;IACD,IAAI,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;QACrB,OAAO,KAAK,CAAC,YAAY,CAAC;IAC5B,CAAC;IACD,IAAI,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,KAAK,CAAC;IACrB,CAAC;IACD,IAAI,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;QACzB,OAAO,KAAK,CAAC,KAAK,CAAC;IACrB,CAAC;IACD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { Value } from \"../values/Values.js\";\nimport {\n  isBoolean,\n  isDate,\n  isEnum,\n  isInstanceKey,\n  isNumeric,\n  isText,\n} from \"../values/ValueUtilities.js\";\n\n/* v8 ignore start */\n\n/**\n * Fallback editor that renders readonly value if no editor is found.\n * @internal\n */\nexport function FallbackEditor({ value, size, id }: EditorProps) {\n  return <Input id={id} readOnly value={getTextValue(value)} size={size} />;\n}\n\nfunction getTextValue(value?: Value) {\n  if (value === undefined) {\n    return value;\n  }\n  if (isBoolean(value)) {\n    return value.value ? \"true\" : \"false\";\n  }\n  if (isDate(value)) {\n    return value.value.toDateString();\n  }\n  if (isEnum(value)) {\n    return value.choice;\n  }\n  if (isNumeric(value)) {\n    return value.displayValue;\n  }\n  if (isText(value)) {\n    return value.value;\n  }\n  if (isInstanceKey(value)) {\n    return value.label;\n  }\n  return \"\";\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors/NumericEditor.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import type { EditorProps } from "../Types.js";
-import type { ValueMetadata } from "../values/Metadata.js";
+import type { NumericValueMetadata } from "../values/Metadata.js";
 import type { NumericValue } from "../values/Values.js";
 /**
  * Numeric value editor that renders `Input` components for changing value.
  * @internal
  */
-export declare function NumericEditor({ value, onChange, size, disabled, }: EditorProps<ValueMetadata, NumericValue>): React.JSX.Element;
+export declare function NumericEditor({ metadata, value, onChange, size, disabled, id, }: EditorProps<NumericValueMetadata, NumericValue>): React.JSX.Element;
 //# sourceMappingURL=NumericEditor.d.ts.map

package/lib/components-react/new-editors/editors/NumericEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumericEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/NumericEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,GACT,EAAE,WAAW,CAAC,aAAa,EAAE,YAAY,CAAC,qBAkB1C"}
+{"version":3,"file":"NumericEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/NumericEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAQxD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,EAAE,GACH,EAAE,WAAW,CAAC,oBAAoB,EAAE,YAAY,CAAC,qBAsBjD"}

package/lib/components-react/new-editors/editors/NumericEditor.js

@@ -4,19 +4,23 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import { Input } from "@itwin/itwinui-react";
+import { applyNumericConstraints, getNumericConstraints, } from "../ConstraintUtils.js";
 /* v8 ignore start */
 /**
  * Numeric value editor that renders `Input` components for changing value.
  * @internal
  */
-export function NumericEditor({ value, onChange, size, disabled, }) {
+export function NumericEditor({ metadata, value, onChange, size, disabled, id, }) {
     const currentValue = getNumericValue(value);
-    return (React.createElement(Input, { value: currentValue.displayValue, onChange: (e) => {
+    return (React.createElement(Input, { id: id, value: currentValue.displayValue, onChange: (e) => {
             const parsedValue = parseFloat(e.target.value);
             onChange({
                 rawValue: Number.isNaN(parsedValue)
                     ? undefined
-                    : parseFloat(e.target.value),
+                    : applyNumericConstraints({
+                        ...getNumericConstraints(metadata.constraints),
+                        value: parsedValue,
+                    }),
                 displayValue: e.target.value,
             });
         }, size: size, disabled: disabled }));

package/lib/components-react/new-editors/editors/NumericEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumericEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/NumericEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAK7C,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,GACiC;IACzC,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,YAAY,CAAC,YAAY,EAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/C,QAAQ,CAAC;gBACP,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC;oBACjC,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;gBAC9B,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;aAC7B,CAAC,CAAC;QACL,CAAC,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,KAA+B;IACtD,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;AACnE,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { NumericValue } from \"../values/Values.js\";\n\n/* v8 ignore start */\n\n/**\n * Numeric value editor that renders `Input` components for changing value.\n * @internal\n */\nexport function NumericEditor({\n  value,\n  onChange,\n  size,\n  disabled,\n}: EditorProps<ValueMetadata, NumericValue>) {\n  const currentValue = getNumericValue(value);\n  return (\n    <Input\n      value={currentValue.displayValue}\n      onChange={(e) => {\n        const parsedValue = parseFloat(e.target.value);\n        onChange({\n          rawValue: Number.isNaN(parsedValue)\n            ? undefined\n            : parseFloat(e.target.value),\n          displayValue: e.target.value,\n        });\n      }}\n      size={size}\n      disabled={disabled}\n    />\n  );\n}\n\nfunction getNumericValue(value: NumericValue | undefined): NumericValue {\n  return value ? value : { rawValue: undefined, displayValue: \"\" };\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"NumericEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/NumericEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAI7C,OAAO,EACL,uBAAuB,EACvB,qBAAqB,GACtB,MAAM,uBAAuB,CAAC;AAE/B,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,EAAE,GAC8C;IAChD,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,YAAY,CAAC,YAAY,EAChC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/C,QAAQ,CAAC;gBACP,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC;oBACjC,CAAC,CAAC,SAAS;oBACX,CAAC,CAAC,uBAAuB,CAAC;wBACtB,GAAG,qBAAqB,CAAC,QAAQ,CAAC,WAAW,CAAC;wBAC9C,KAAK,EAAE,WAAW;qBACnB,CAAC;gBACN,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;aAC7B,CAAC,CAAC;QACL,CAAC,EACD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,KAA+B;IACtD,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC;AACnE,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { NumericValueMetadata } from \"../values/Metadata.js\";\nimport type { NumericValue } from \"../values/Values.js\";\nimport {\n  applyNumericConstraints,\n  getNumericConstraints,\n} from \"../ConstraintUtils.js\";\n\n/* v8 ignore start */\n\n/**\n * Numeric value editor that renders `Input` components for changing value.\n * @internal\n */\nexport function NumericEditor({\n  metadata,\n  value,\n  onChange,\n  size,\n  disabled,\n  id,\n}: EditorProps<NumericValueMetadata, NumericValue>) {\n  const currentValue = getNumericValue(value);\n  return (\n    <Input\n      id={id}\n      value={currentValue.displayValue}\n      onChange={(e) => {\n        const parsedValue = parseFloat(e.target.value);\n        onChange({\n          rawValue: Number.isNaN(parsedValue)\n            ? undefined\n            : applyNumericConstraints({\n                ...getNumericConstraints(metadata.constraints),\n                value: parsedValue,\n              }),\n          displayValue: e.target.value,\n        });\n      }}\n      size={size}\n      disabled={disabled}\n    />\n  );\n}\n\nfunction getNumericValue(value: NumericValue | undefined): NumericValue {\n  return value ? value : { rawValue: undefined, displayValue: \"\" };\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors/TextEditor.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import type { EditorProps } from "../Types.js";
-import type { ValueMetadata } from "../values/Metadata.js";
+import type { TextValueMetadata } from "../values/Metadata.js";
 import type { TextValue } from "../values/Values.js";
 /**
  * Text value editor that renders `Input` component for changing value.
  * @internal
  */
-export declare function TextEditor({ value, onChange, size, disabled, }: EditorProps<ValueMetadata, TextValue>): React.JSX.Element;
+export declare function TextEditor({ metadata, value, onChange, size, disabled, id, }: EditorProps<TextValueMetadata, TextValue>): React.JSX.Element;
 //# sourceMappingURL=TextEditor.d.ts.map

package/lib/components-react/new-editors/editors/TextEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/TextEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAIrD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,GACT,EAAE,WAAW,CAAC,aAAa,EAAE,SAAS,CAAC,qBAWvC"}
+{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/TextEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAKrD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,EAAE,GACH,EAAE,WAAW,CAAC,iBAAiB,EAAE,SAAS,CAAC,qBAe3C"}

package/lib/components-react/new-editors/editors/TextEditor.js

@@ -4,14 +4,16 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from "react";
 import { Input } from "@itwin/itwinui-react";
+import { getStringConstraints } from "../ConstraintUtils.js";
 /* v8 ignore start */
 /**
  * Text value editor that renders `Input` component for changing value.
  * @internal
  */
-export function TextEditor({ value, onChange, size, disabled, }) {
+export function TextEditor({ metadata, value, onChange, size, disabled, id, }) {
     const currentValue = value ? value : { value: "" };
-    return (React.createElement(Input, { value: currentValue.value, onChange: (e) => onChange({ value: e.target.value }), size: size, disabled: disabled }));
+    const { maxLength, minLength } = getStringConstraints(metadata.constraints);
+    return (React.createElement(Input, { id: id, value: currentValue.value, onChange: (e) => onChange({ value: e.target.value }), maxLength: maxLength, minLength: minLength, size: size, disabled: disabled }));
 }
 /* v8 ignore stop */
 //# sourceMappingURL=TextEditor.js.map

package/lib/components-react/new-editors/editors/TextEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/TextEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAK7C,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,GAC8B;IACtC,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IAEnD,OAAO,CACL,oBAAC,KAAK,IACJ,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EACpD,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { TextValue } from \"../values/Values.js\";\n\n/* v8 ignore start */\n\n/**\n * Text value editor that renders `Input` component for changing value.\n * @internal\n */\nexport function TextEditor({\n  value,\n  onChange,\n  size,\n  disabled,\n}: EditorProps<ValueMetadata, TextValue>) {\n  const currentValue = value ? value : { value: \"\" };\n\n  return (\n    <Input\n      value={currentValue.value}\n      onChange={(e) => onChange({ value: e.target.value })}\n      size={size}\n      disabled={disabled}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"TextEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/TextEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAI7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,EAAE,GACwC;IAC1C,MAAM,YAAY,GAAG,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;IACnD,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,oBAAoB,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAE5E,OAAO,CACL,oBAAC,KAAK,IACJ,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,EACpD,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport { Input } from \"@itwin/itwinui-react\";\nimport type { EditorProps } from \"../Types.js\";\nimport type { TextValueMetadata } from \"../values/Metadata.js\";\nimport type { TextValue } from \"../values/Values.js\";\nimport { getStringConstraints } from \"../ConstraintUtils.js\";\n\n/* v8 ignore start */\n\n/**\n * Text value editor that renders `Input` component for changing value.\n * @internal\n */\nexport function TextEditor({\n  metadata,\n  value,\n  onChange,\n  size,\n  disabled,\n  id,\n}: EditorProps<TextValueMetadata, TextValue>) {\n  const currentValue = value ? value : { value: \"\" };\n  const { maxLength, minLength } = getStringConstraints(metadata.constraints);\n\n  return (\n    <Input\n      id={id}\n      value={currentValue.value}\n      onChange={(e) => onChange({ value: e.target.value })}\n      maxLength={maxLength}\n      minLength={minLength}\n      size={size}\n      disabled={disabled}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors/ToggleEditor.d.ts

@@ -6,5 +6,5 @@ import type { EditorProps } from "../Types.js";
  * Boolean value editor that renders `ToggleSwitch` component for changing value.
  * @internal
  */
-export declare function ToggleEditor({ value, onChange, commit, disabled, size, }: EditorProps<ValueMetadata, BooleanValue>): React.JSX.Element;
+export declare function ToggleEditor({ value, onChange, commit, disabled, size, id, }: EditorProps<ValueMetadata, BooleanValue>): React.JSX.Element;
 //# sourceMappingURL=ToggleEditor.d.ts.map

package/lib/components-react/new-editors/editors/ToggleEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/ToggleEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,GACL,EAAE,WAAW,CAAC,aAAa,EAAE,YAAY,CAAC,qBAgB1C"}
+{"version":3,"file":"ToggleEditor.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/ToggleEditor.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK/C;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,EAAE,GACH,EAAE,WAAW,CAAC,aAAa,EAAE,YAAY,CAAC,qBAiB1C"}

package/lib/components-react/new-editors/editors/ToggleEditor.js

@@ -9,14 +9,14 @@ import { ToggleSwitch } from "@itwin/itwinui-react";
  * Boolean value editor that renders `ToggleSwitch` component for changing value.
  * @internal
  */
-export function ToggleEditor({ value, onChange, commit, disabled, size, }) {
+export function ToggleEditor({ value, onChange, commit, disabled, size, id, }) {
     const currentValue = value ?? { value: false };
     const handleChange = (e) => {
         const newValue = { value: e.target.checked };
         onChange(newValue);
         commit?.();
     };
-    return (React.createElement(ToggleSwitch, { checked: currentValue.value, onChange: handleChange, disabled: disabled, size: size === "small" ? "small" : undefined }));
+    return (React.createElement(ToggleSwitch, { id: id, checked: currentValue.value, onChange: handleChange, disabled: disabled, size: size === "small" ? "small" : undefined }));
 }
 /* v8 ignore stop */
 //# sourceMappingURL=ToggleEditor.js.map

package/lib/components-react/new-editors/editors/ToggleEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/ToggleEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,GACqC;IACzC,MAAM,YAAY,GAAG,KAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IAC/C,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAC7C,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,IACX,OAAO,EAAE,YAAY,CAAC,KAAK,EAC3B,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,GAC5C,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { BooleanValue } from \"../values/Values.js\";\nimport type { EditorProps } from \"../Types.js\";\nimport { ToggleSwitch } from \"@itwin/itwinui-react\";\n\n/* v8 ignore start */\n\n/**\n * Boolean value editor that renders `ToggleSwitch` component for changing value.\n * @internal\n */\nexport function ToggleEditor({\n  value,\n  onChange,\n  commit,\n  disabled,\n  size,\n}: EditorProps<ValueMetadata, BooleanValue>) {\n  const currentValue = value ?? { value: false };\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = { value: e.target.checked };\n    onChange(newValue);\n    commit?.();\n  };\n\n  return (\n    <ToggleSwitch\n      checked={currentValue.value}\n      onChange={handleChange}\n      disabled={disabled}\n      size={size === \"small\" ? \"small\" : undefined}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}
+{"version":3,"file":"ToggleEditor.js","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/ToggleEditor.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEpD,qBAAqB;AAErB;;;GAGG;AACH,MAAM,UAAU,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,EAAE,GACuC;IACzC,MAAM,YAAY,GAAG,KAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;IAC/C,MAAM,YAAY,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC9D,MAAM,QAAQ,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAC7C,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACnB,MAAM,EAAE,EAAE,CAAC;IACb,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,IACX,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,YAAY,CAAC,KAAK,EAC3B,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,GAC5C,CACH,CAAC;AACJ,CAAC;AAED,oBAAoB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n\nimport * as React from \"react\";\nimport type { ValueMetadata } from \"../values/Metadata.js\";\nimport type { BooleanValue } from \"../values/Values.js\";\nimport type { EditorProps } from \"../Types.js\";\nimport { ToggleSwitch } from \"@itwin/itwinui-react\";\n\n/* v8 ignore start */\n\n/**\n * Boolean value editor that renders `ToggleSwitch` component for changing value.\n * @internal\n */\nexport function ToggleEditor({\n  value,\n  onChange,\n  commit,\n  disabled,\n  size,\n  id,\n}: EditorProps<ValueMetadata, BooleanValue>) {\n  const currentValue = value ?? { value: false };\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = { value: e.target.checked };\n    onChange(newValue);\n    commit?.();\n  };\n\n  return (\n    <ToggleSwitch\n      id={id}\n      checked={currentValue.value}\n      onChange={handleChange}\n      disabled={disabled}\n      size={size === \"small\" ? \"small\" : undefined}\n    />\n  );\n}\n\n/* v8 ignore stop */\n"]}

package/lib/components-react/new-editors/editors-registry/DefaultEditors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultEditors.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors-registry/DefaultEditors.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAYhE,sBAAsB;AAEtB;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAK3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAK3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAK/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAK3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAK9B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAK3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,UAM7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAAU,EAW1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAAU,EAS1C,CAAC;AAEF,qBAAqB"}
+{"version":3,"file":"DefaultEditors.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors-registry/DefaultEditors.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,aAAa,CAAC;AAiBhE,sBAAsB;AAEtB;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAK3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAK3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAK/B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAK3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAK9B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,UAK3B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,UAM7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAAU,EAW1C,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,EAAE,UAAU,EAS1C,CAAC;AAEF,qBAAqB"}