@itwin/components-react 5.3.1 → 5.5.0

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

@@ -0,0 +1,46 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import type { ValueMetadata } from "./values/Metadata.js";
+import type { Value } from "./values/Values.js";
+/**
+ * An editor specification defining single editor with a predicate that determines if the editor can be used for a given value.
+ * @beta
+ */
+export interface EditorSpec {
+    applies: (metaData: ValueMetadata, value: Value | undefined) => boolean;
+    Editor: React.ComponentType<EditorProps>;
+}
+/**
+ * Generic editor props that are supplied to the editor for rendering.
+ * @beta
+ */
+export interface EditorProps<TMetadata = ValueMetadata, TValue = Value> {
+    metadata: TMetadata;
+    value?: TValue;
+    onChange: (value?: TValue) => void;
+    /**
+     * Callback that allows editor implementation to indicate that editing is finished. This is useful if editor
+     * is rendered inside a container that waits for committing/cancelling action (like `ENTER` or `ESC` key press) but editor implementation
+     * has additional actions that should cause commit (closing popup, commit button, etc.).
+     */
+    commit?: () => void;
+    /**
+     * Callback that allows editor implementation to indicate that editing is cancelled. This is useful if editor
+     * is rendered inside a container that waits for committing/cancelling action (like `ENTER` or `ESC` key press) but editor implementation
+     * has additional actions that should cause cancellation (cancel button, etc).
+     */
+    cancel?: () => void;
+    disabled?: boolean;
+    size?: "small" | "large";
+}
+/**
+ * Utility function to create an editor spec for editor with concrete metadata and value types.
+ * @beta
+ */
+export declare function createEditorSpec<TMetadata extends ValueMetadata, TValue extends Value>({ Editor, isMetadataSupported, isValueSupported, }: {
+    isMetadataSupported: (metadata: ValueMetadata) => metadata is TMetadata;
+    isValueSupported: (value: Value) => value is TValue;
+    Editor: React.ComponentType<EditorProps<TMetadata, TValue>>;
+}): EditorSpec;
+//# sourceMappingURL=Types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Types.d.ts","sourceRoot":"","sources":["../../../src/components-react/new-editors/Types.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;GAGG;AACH,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,OAAO,CAAC;IACxE,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;CAC1C;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW,CAAC,SAAS,GAAG,aAAa,EAAE,MAAM,GAAG,KAAK;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,SAAS,aAAa,EAC/B,MAAM,SAAS,KAAK,EACpB,EACA,MAAM,EACN,mBAAmB,EACnB,gBAAgB,GACjB,EAAE;IACD,mBAAmB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,QAAQ,IAAI,SAAS,CAAC;IACxE,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,IAAI,MAAM,CAAC;IACpD,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;CAC7D,GAAG,UAAU,CAQb"}

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

@@ -0,0 +1,20 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+/**
+ * Utility function to create an editor spec for editor with concrete metadata and value types.
+ * @beta
+ */
+export function createEditorSpec({ Editor, isMetadataSupported, isValueSupported, }) {
+    return {
+        applies: (metadata, value) => isMetadataSupported(metadata) &&
+            (value === undefined || isValueSupported(value)),
+        // typeguards in `applies` function will take care of casting
+        Editor: Editor,
+    };
+}
+//# sourceMappingURL=Types.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,51 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import * as React from "react";
+import type { Value } from "./values/Values.js";
+interface UseCommittableValueProps {
+    initialValue?: Value;
+    onCommit: (value?: Value) => void;
+    onCancel?: () => void;
+}
+/**
+ * Custom React hook that provides to commit or cancel value changes by editor using
+ * `Enter` or `Escape` keys.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * function MyValueEditor({ initialValue, ...editorProps }: Props) {
+ *   const { value, onChange, onKeyDown, commit, cancel } = useCommittableValue({
+ *     initialValue,
+ *     onCommit: (newValue) => {
+ *       // commit new value
+ *     }
+ *     onCancel: () => {
+ *       // restore to initial value or close editor
+ *     }
+ *   })
+ *
+ *   return <div onKeyDown={onKeydown}>
+ *     <Editor
+ *       {...editorProps}
+ *       value={value}
+ *       onChange={onChange}
+ *       commit={commit}
+ *       cancel={cancel}
+ *     />
+ *   </div>
+ * }
+ * ```
+ *
+ * @beta
+ */
+export declare function useCommittableValue({ initialValue, onCancel, onCommit, }: UseCommittableValueProps): {
+    onChange: (newValue?: Value) => void;
+    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

@@ -0,0 +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"}

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

@@ -0,0 +1,85 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import * as React from "react";
+import { areEqual } from "./values/ValueUtilities.js";
+/**
+ * Custom React hook that provides to commit or cancel value changes by editor using
+ * `Enter` or `Escape` keys.
+ *
+ * Example usage:
+ *
+ * ```tsx
+ * function MyValueEditor({ initialValue, ...editorProps }: Props) {
+ *   const { value, onChange, onKeyDown, commit, cancel } = useCommittableValue({
+ *     initialValue,
+ *     onCommit: (newValue) => {
+ *       // commit new value
+ *     }
+ *     onCancel: () => {
+ *       // restore to initial value or close editor
+ *     }
+ *   })
+ *
+ *   return <div onKeyDown={onKeydown}>
+ *     <Editor
+ *       {...editorProps}
+ *       value={value}
+ *       onChange={onChange}
+ *       commit={commit}
+ *       cancel={cancel}
+ *     />
+ *   </div>
+ * }
+ * ```
+ *
+ * @beta
+ */
+export function useCommittableValue({ initialValue, onCancel, onCommit, }) {
+    const initialValueRef = React.useRef(initialValue);
+    const [currentValue, setCurrentValue] = React.useState(initialValue);
+    const currentValueRef = React.useRef({
+        state: "initial",
+        value: initialValue,
+    });
+    const handleChange = (newValue) => {
+        currentValueRef.current = { state: "changed", value: newValue };
+        setCurrentValue(newValue);
+    };
+    const handleCommit = () => {
+        if (currentValueRef.current.state === "changed" &&
+            !areEqual(currentValueRef.current.value, initialValueRef.current)) {
+            onCommit(currentValueRef.current.value);
+            return;
+        }
+        if (currentValueRef.current.state === "cancelled") {
+            return;
+        }
+        onCancel?.();
+    };
+    const handleCancel = () => {
+        currentValueRef.current = { state: "cancelled" };
+        onCancel?.();
+    };
+    const handleKeyDown = (e) => {
+        e.stopPropagation();
+        if (e.key === "Enter" || e.key === "Tab") {
+            handleCommit();
+        }
+        else if (e.key === "Escape") {
+            handleCancel();
+        }
+    };
+    return {
+        onChange: handleChange,
+        onKeydown: handleKeyDown,
+        commit: handleCommit,
+        cancel: handleCancel,
+        value: currentValue,
+    };
+}
+//# sourceMappingURL=UseCommittableValue.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { EditorProps } from "../Types.js";
+import type { ValueMetadata } from "../values/Metadata.js";
+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;
+//# sourceMappingURL=BooleanEditor.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Checkbox } from "@itwin/itwinui-react";
+/* v8 ignore start */
+/**
+ * Boolean value editor that renders `Checkbox` component for changing value.
+ * @internal
+ */
+export function BooleanEditor({ value, onChange, commit, disabled, }) {
+    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 }));
+}
+/* v8 ignore stop */
+//# sourceMappingURL=BooleanEditor.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { EditorProps } from "../Types.js";
+import type { ValueMetadata } from "../values/Metadata.js";
+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;
+//# sourceMappingURL=DateEditor.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { DateInput } from "./DateInput.js";
+/* v8 ignore start */
+/**
+ * Date value editor that render `DatePicker` component for changing value.
+ * @internal
+ */
+export function DateEditor({ value, onChange, commit, size, disabled, }) {
+    return (React.createElement(DateInput, { value: value?.value, onChange: (newValue) => {
+            onChange({ value: newValue });
+        }, onClose: commit, size: size, disabled: disabled }));
+}
+/* v8 ignore stop */
+//# sourceMappingURL=DateEditor.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface DateInputProps {
+    value?: Date;
+    onChange: (value: Date) => void;
+    onClose?: () => void;
+    size?: "small" | "large";
+    disabled?: boolean;
+    showTimePicker?: boolean;
+}
+/**
+ * @internal
+ */
+export declare function DateInput({ value, onChange, onClose, size, showTimePicker, disabled, }: DateInputProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=DateInput.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Button, DatePicker, Popover } from "@itwin/itwinui-react";
+/**
+ * @internal
+ */
+export function DateInput({ value, onChange, onClose, size, showTimePicker, disabled, }) {
+    const currentValue = value ?? new Date();
+    const dateStr = showTimePicker
+        ? currentValue.toLocaleString()
+        : currentValue.toLocaleDateString();
+    return (React.createElement(Popover, { placement: "bottom", content: React.createElement(DatePicker, { date: currentValue, onChange: onChange, showDatesOutsideMonth: false, showTime: showTimePicker }), onVisibleChange: (visible) => {
+            if (!visible) {
+                onClose?.();
+            }
+        } },
+        React.createElement(Button, { 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

@@ -0,0 +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"]}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { EditorProps } from "../Types.js";
+import type { ValueMetadata } from "../values/Metadata.js";
+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;
+//# sourceMappingURL=DateTimeEditor.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { DateInput } from "./DateInput.js";
+/* v8 ignore start */
+/**
+ * Date time value editor that render `DatePicker` component with time selector for changing value.
+ * @internal
+ */
+export function DateTimeEditor({ value, onChange, commit, size, disabled, }) {
+    return (React.createElement(DateInput, { value: value?.value, onChange: (newValue) => {
+            onChange({ value: newValue });
+        }, onClose: commit, size: size, disabled: disabled, showTimePicker: true }));
+}
+/* v8 ignore stop */
+//# sourceMappingURL=DateTimeEditor.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { EditorProps } from "../Types.js";
+import type { EnumValueMetadata } from "../values/Metadata.js";
+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;
+//# sourceMappingURL=EnumEditor.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Select } from "@itwin/itwinui-react";
+/* v8 ignore start */
+/**
+ * Enum value editor that renders `Select` component for changing value.
+ * @internal
+ */
+export function EnumEditor({ metadata, value, onChange, commit, size, disabled, }) {
+    const choices = metadata.choices;
+    const currentValue = getEnumValue(value, choices);
+    const handleChange = (newChoice) => {
+        const choice = choices.find((c) => c.value === newChoice);
+        const newValue = { choice: newChoice, label: choice?.label ?? "" };
+        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 }));
+}
+function getEnumValue(value, choices) {
+    const defaultValue = choices.length > 0
+        ? { choice: choices[0].value, label: choices[0].label }
+        : { choice: "", label: "" };
+    return value ? value : defaultValue;
+}
+/* v8 ignore stop */
+//# sourceMappingURL=EnumEditor.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+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;
+//# sourceMappingURL=FallbackEditor.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,41 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from "react";
+import { Input } from "@itwin/itwinui-react";
+import { isBoolean, isDate, isEnum, isInstanceKey, isNumeric, isText, } from "../values/ValueUtilities.js";
+/* v8 ignore start */
+/**
+ * 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 });
+}
+function getTextValue(value) {
+    if (value === undefined) {
+        return value;
+    }
+    if (isBoolean(value)) {
+        return value.value ? "true" : "false";
+    }
+    if (isDate(value)) {
+        return value.value.toDateString();
+    }
+    if (isEnum(value)) {
+        return value.choice;
+    }
+    if (isNumeric(value)) {
+        return value.displayValue;
+    }
+    if (isText(value)) {
+        return value.value;
+    }
+    if (isInstanceKey(value)) {
+        return value.label;
+    }
+    return "";
+}
+/* v8 ignore stop */
+//# sourceMappingURL=FallbackEditor.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,24 @@
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import * as React from "react";
+import type { NumericValue } from "../values/Values.js";
+/**
+ * Props for FormattedNumericInput component.
+ * @beta
+ */
+interface FormattedNumericInputProps {
+    value: NumericValue;
+    onChange: (value: NumericValue) => void;
+    parseValue: (value: string) => number | undefined;
+    formatValue: (num: number) => string;
+    disabled?: boolean;
+    size?: "small" | "large";
+}
+/**
+ * A numeric input that allows to pass custom parsing/formatting logic to handle values with units etc.
+ * @beta
+ */
+export declare function FormattedNumericInput({ onChange, value, parseValue, formatValue, disabled, size, }: FormattedNumericInputProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=FormattedNumericInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedNumericInput.d.ts","sourceRoot":"","sources":["../../../../src/components-react/new-editors/editors/FormattedNumericInput.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;;GAGG;AACH,UAAU,0BAA0B;IAClC,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;IAClD,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;CAC1B;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,KAAK,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,IAAI,GACL,EAAE,0BAA0B,qBAgB5B"}