@itwin/components-react 5.28.1 → 5.30.0

package/lib/components-react/filter-builder/FilterBuilderRuleValue.d.ts

@@ -4,35 +4,72 @@
 import * as React from "react";
 import type { PropertyDescription, PropertyValue } from "@itwin/appui-abstract";
 import type { PropertyFilterBuilderRuleOperator } from "./Operators.js";
-/**
- * Props for [[PropertyFilterBuilderRuleValue]] component.
- * @beta
- */
-export interface PropertyFilterBuilderRuleValueProps {
+/** @beta */
+interface PropertyFilterBuilderRuleValueBaseProps {
     /** Currently entered value. */
     value?: PropertyValue;
     /** Property used in rule to which this value will be compared to. */
     property: PropertyDescription;
     /** Callback that is invoked when value changes. */
     onChange: (value: PropertyValue) => void;
+}
+/** @beta */
+interface PropertyFilterBuilderRuleValueLegacyProps extends PropertyFilterBuilderRuleValueBaseProps {
+    /**
+     * Specifies which editors system should be used: legacy or the new one.
+     * @default "legacy"
+     * @beta
+     * @deprecated in 5.30. Legacy editors system is deprecated. Use `editorSystem: "new"`.
+     */
+    editorSystem?: "legacy";
+}
+/** @beta */
+interface PropertyFilterBuilderRuleValueNewProps extends PropertyFilterBuilderRuleValueBaseProps {
     /**
      * Specifies which editors system should be used: legacy or the new one.
      * @default "legacy"
      * @beta
      */
-    editorSystem?: "legacy" | "new";
+    editorSystem: "new";
 }
+/**
+ * Props for [[PropertyFilterBuilderRuleValue]] component.
+ * @beta
+ * @deprecated in 5.30.0. Use `React.ComponentProps<typeof PropertyFilterBuilderRuleValue>` instead.
+ */
+export type PropertyFilterBuilderRuleValueProps = PropertyFilterBuilderRuleValueLegacyProps | PropertyFilterBuilderRuleValueNewProps;
 /**
  * Props for custom [[PropertyFilterBuilderRuleValue]] renderer.
  * @beta
  */
-export interface PropertyFilterBuilderRuleValueRendererProps extends PropertyFilterBuilderRuleValueProps {
+export type PropertyFilterBuilderRuleValueRendererProps = PropertyFilterBuilderRuleValueProps & {
     /** Current operator. */
     operator: PropertyFilterBuilderRuleOperator;
+};
+interface PropertyFilterBuilderRuleValueComponent {
+    /**
+     * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.
+     * @beta
+     */
+    (props: PropertyFilterBuilderRuleValueNewProps & {
+        /** Current operator. */
+        operator: PropertyFilterBuilderRuleOperator;
+    }): React.JSX.Element;
+    /**
+     * @deprecated in 5.30. Use `PropertyFilterBuilderRuleValue` with `editorSystem="new"` instead.
+     * @beta
+     */
+    (props: PropertyFilterBuilderRuleValueLegacyProps & {
+        /** Current operator. */
+        operator: PropertyFilterBuilderRuleOperator;
+    }): React.JSX.Element;
+    /** @beta */
+    (props: PropertyFilterBuilderRuleValueRendererProps): React.JSX.Element;
 }
 /**
  * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.
  * @beta
  */
-export declare function PropertyFilterBuilderRuleValue(props: PropertyFilterBuilderRuleValueRendererProps): React.JSX.Element;
+export declare const PropertyFilterBuilderRuleValue: PropertyFilterBuilderRuleValueComponent;
+export {};
 //# sourceMappingURL=FilterBuilderRuleValue.d.ts.map

package/lib/components-react/filter-builder/FilterBuilderRuleValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleValue.d.ts","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAMhF,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AAIxE;;;GAGG;AACH,MAAM,WAAW,mCAAmC;IAClD,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qEAAqE;IACrE,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,YAAY,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;CACjC;AAED;;;GAGG;AACH,MAAM,WAAW,2CACf,SAAQ,mCAAmC;IAC3C,wBAAwB;IACxB,QAAQ,EAAE,iCAAiC,CAAC;CAC7C;AAED;;;GAGG;AACH,wBAAgB,8BAA8B,CAC5C,KAAK,EAAE,2CAA2C,qBASnD"}
+{"version":3,"file":"FilterBuilderRuleValue.d.ts","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAKhF,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,gBAAgB,CAAC;AAIxE,YAAY;AACZ,UAAU,uCAAuC;IAC/C,+BAA+B;IAC/B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,qEAAqE;IACrE,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,mDAAmD;IACnD,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED,YAAY;AACZ,UAAU,yCACR,SAAQ,uCAAuC;IAC/C;;;;;OAKG;IACH,YAAY,CAAC,EAAE,QAAQ,CAAC;CACzB;AAED,YAAY;AACZ,UAAU,sCACR,SAAQ,uCAAuC;IAC/C;;;;OAIG;IACH,YAAY,EAAE,KAAK,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,MAAM,mCAAmC,GAC3C,yCAAyC,GACzC,sCAAsC,CAAC;AAE3C;;;GAGG;AACH,MAAM,MAAM,2CAA2C,GAErD,mCAAmC,GAAG;IACpC,wBAAwB;IACxB,QAAQ,EAAE,iCAAiC,CAAC;CAC7C,CAAC;AAEJ,UAAU,uCAAuC;IAC/C;;;OAGG;IACH,CACE,KAAK,EAAE,sCAAsC,GAAG;QAC9C,wBAAwB;QACxB,QAAQ,EAAE,iCAAiC,CAAC;KAC7C,GACA,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACrB;;;OAGG;IACH,CACE,KAAK,EAAE,yCAAyC,GAAG;QACjD,wBAAwB;QACxB,QAAQ,EAAE,iCAAiC,CAAC;KAC7C,GACA,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IACrB,YAAY;IACZ,CAAC,KAAK,EAAE,2CAA2C,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CACzE;AAED;;;GAGG;AACH,eAAO,MAAM,8BAA8B,EAAE,uCAS1C,CAAC"}

package/lib/components-react/filter-builder/FilterBuilderRuleValue.js

@@ -7,7 +7,6 @@
  */
 import * as React from "react";
 import { PropertyRecord, PropertyValueFormat } from "@itwin/appui-abstract";
-import { EditorContainer } from "../editors/EditorContainer.js";
 import { Flex, Text } from "@itwin/itwinui-react";
 import { PropertyFilterBuilderRuleRangeValue } from "./FilterBuilderRangeValue.js";
 import { useTranslation } from "../l10n/useTranslation.js";
@@ -16,20 +15,26 @@ import { PropertyRecordEditor } from "../new-editors/interop/PropertyRecordEdito
  * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.
  * @beta
  */
-export function PropertyFilterBuilderRuleValue(props) {
+export const PropertyFilterBuilderRuleValue = (props) => {
     const { operator, ...restProps } = props;
     return operator === "between" || operator === "not-between" ? (React.createElement(FilterBuilderRuleRangeValueRenderer, { ...restProps })) : (React.createElement(FilterBuilderRulePrimitiveValueRenderer, { ...restProps }));
-}
-function FilterBuilderRulePrimitiveValueRenderer({ property, value, onChange, editorSystem, }) {
+};
+function FilterBuilderRulePrimitiveValueRenderer({ property, value, onChange, 
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+editorSystem, }) {
     const propertyRecord = React.useMemo(() => {
         return new PropertyRecord(value ?? { valueFormat: PropertyValueFormat.Primitive }, property);
     }, [value, property]);
     const onValueChange = React.useCallback(({ newValue }) => {
         onChange(newValue);
     }, [onChange]);
-    return (React.createElement(PropertyRecordEditor, { propertyRecord: propertyRecord, onCancel: () => { }, onCommit: onValueChange, size: "small", editorSystem: editorSystem }));
+    return (React.createElement(PropertyRecordEditor, { propertyRecord: propertyRecord, onCancel: () => { }, onCommit: onValueChange, size: "small", 
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        editorSystem: editorSystem }));
 }
-function FilterBuilderRuleRangeValueRenderer({ property, value, onChange, }) {
+function FilterBuilderRuleRangeValueRenderer({ property, value, onChange, 
+// eslint-disable-next-line @typescript-eslint/no-deprecated
+editorSystem, }) {
     const { translate } = useTranslation();
     const { from, to } = React.useMemo(() => {
         const rangeValue = PropertyFilterBuilderRuleRangeValue.parse(value);
@@ -46,10 +51,14 @@ function FilterBuilderRuleRangeValueRenderer({ property, value, onChange, }) {
     }, [onChange, from]);
     return (React.createElement(Flex, { className: "rule-value-range", display: "inline-flex", flexDirection: "row" },
         React.createElement(Flex.Item, null,
-            React.createElement(EditorContainer, { propertyRecord: from, onCancel: () => { }, onCommit: handleFromValue, setFocus: false, shouldCommitOnChange: false })),
+            React.createElement(PropertyRecordEditor, { propertyRecord: from, onCancel: () => { }, onCommit: handleFromValue, 
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                editorSystem: editorSystem })),
         React.createElement(Text, null, translate("filterBuilder.operators.and").toLowerCase()),
         React.createElement(Flex.Item, null,
-            React.createElement(EditorContainer, { propertyRecord: to, onCancel: () => { }, onCommit: handleToValue, setFocus: false, shouldCommitOnChange: false }))));
+            React.createElement(PropertyRecordEditor, { propertyRecord: to, onCancel: () => { }, onCommit: handleToValue, 
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                editorSystem: editorSystem }))));
 }
 function getSerializedRangeValue(from, to) {
     return PropertyFilterBuilderRuleRangeValue.serialize({

package/lib/components-react/filter-builder/FilterBuilderRuleValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBuilderRuleValue.js","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"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","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 PropertyFilterBuilder\n */\n\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { PropertyUpdatedArgs } from \"../editors/EditorContainer.js\";\nimport { EditorContainer } from \"../editors/EditorContainer.js\";\nimport { Flex, Text } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderRuleRangeValue } from \"./FilterBuilderRangeValue.js\";\nimport type { PropertyFilterBuilderRuleOperator } from \"./Operators.js\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\nimport { PropertyRecordEditor } from \"../new-editors/interop/PropertyRecordEditor.js\";\n\n/**\n * Props for [[PropertyFilterBuilderRuleValue]] component.\n * @beta\n */\nexport interface PropertyFilterBuilderRuleValueProps {\n  /** Currently entered value. */\n  value?: PropertyValue;\n  /** Property used in rule to which this value will be compared to. */\n  property: PropertyDescription;\n  /** Callback that is invoked when value changes. */\n  onChange: (value: PropertyValue) => void;\n  /**\n   * Specifies which editors system should be used: legacy or the new one.\n   * @default \"legacy\"\n   * @beta\n   */\n  editorSystem?: \"legacy\" | \"new\";\n}\n\n/**\n * Props for custom [[PropertyFilterBuilderRuleValue]] renderer.\n * @beta\n */\nexport interface PropertyFilterBuilderRuleValueRendererProps\n  extends PropertyFilterBuilderRuleValueProps {\n  /** Current operator. */\n  operator: PropertyFilterBuilderRuleOperator;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.\n * @beta\n */\nexport function PropertyFilterBuilderRuleValue(\n  props: PropertyFilterBuilderRuleValueRendererProps\n) {\n  const { operator, ...restProps } = props;\n\n  return operator === \"between\" || operator === \"not-between\" ? (\n    <FilterBuilderRuleRangeValueRenderer {...restProps} />\n  ) : (\n    <FilterBuilderRulePrimitiveValueRenderer {...restProps} />\n  );\n}\n\nfunction FilterBuilderRulePrimitiveValueRenderer({\n  property,\n  value,\n  onChange,\n  editorSystem,\n}: PropertyFilterBuilderRuleValueProps) {\n  const propertyRecord = React.useMemo(() => {\n    return new PropertyRecord(\n      value ?? { valueFormat: PropertyValueFormat.Primitive },\n      property\n    );\n  }, [value, property]);\n\n  const onValueChange = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(newValue);\n    },\n    [onChange]\n  );\n\n  return (\n    <PropertyRecordEditor\n      propertyRecord={propertyRecord}\n      onCancel={() => {}}\n      onCommit={onValueChange}\n      size=\"small\"\n      editorSystem={editorSystem}\n    />\n  );\n}\n\nfunction FilterBuilderRuleRangeValueRenderer({\n  property,\n  value,\n  onChange,\n}: PropertyFilterBuilderRuleValueProps) {\n  const { translate } = useTranslation();\n  const { from, to } = React.useMemo(() => {\n    const rangeValue = PropertyFilterBuilderRuleRangeValue.parse(value);\n    return {\n      from: new PropertyRecord(rangeValue.from, property),\n      to: new PropertyRecord(rangeValue.to, property),\n    };\n  }, [property, value]);\n\n  const handleFromValue = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(getSerializedRangeValue(newValue, to.value));\n    },\n    [onChange, to]\n  );\n\n  const handleToValue = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(getSerializedRangeValue(from.value, newValue));\n    },\n    [onChange, from]\n  );\n\n  return (\n    <Flex\n      className=\"rule-value-range\"\n      display=\"inline-flex\"\n      flexDirection=\"row\"\n    >\n      <Flex.Item>\n        <EditorContainer\n          propertyRecord={from}\n          onCancel={() => {}}\n          onCommit={handleFromValue}\n          setFocus={false}\n          shouldCommitOnChange={false}\n        />\n      </Flex.Item>\n      <Text>{translate(\"filterBuilder.operators.and\").toLowerCase()}</Text>\n      <Flex.Item>\n        <EditorContainer\n          propertyRecord={to}\n          onCancel={() => {}}\n          onCommit={handleToValue}\n          setFocus={false}\n          shouldCommitOnChange={false}\n        />\n      </Flex.Item>\n    </Flex>\n  );\n}\n\nfunction getSerializedRangeValue(from: PropertyValue, to: PropertyValue) {\n  return PropertyFilterBuilderRuleRangeValue.serialize({\n    from:\n      from.valueFormat === PropertyValueFormat.Primitive\n        ? from\n        : { valueFormat: PropertyValueFormat.Primitive },\n    to:\n      to.valueFormat === PropertyValueFormat.Primitive\n        ? to\n        : { valueFormat: PropertyValueFormat.Primitive },\n  });\n}\n"]}
+{"version":3,"file":"FilterBuilderRuleValue.js","sourceRoot":"","sources":["../../../src/components-react/filter-builder/FilterBuilderRuleValue.tsx"],"names":[],"mappings":"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","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 PropertyFilterBuilder\n */\n\nimport * as React from \"react\";\nimport type { PropertyDescription, PropertyValue } from \"@itwin/appui-abstract\";\nimport { PropertyRecord, PropertyValueFormat } from \"@itwin/appui-abstract\";\nimport type { PropertyUpdatedArgs } from \"../editors/EditorContainer.js\";\nimport { Flex, Text } from \"@itwin/itwinui-react\";\nimport { PropertyFilterBuilderRuleRangeValue } from \"./FilterBuilderRangeValue.js\";\nimport type { PropertyFilterBuilderRuleOperator } from \"./Operators.js\";\nimport { useTranslation } from \"../l10n/useTranslation.js\";\nimport { PropertyRecordEditor } from \"../new-editors/interop/PropertyRecordEditor.js\";\n\n/** @beta */\ninterface PropertyFilterBuilderRuleValueBaseProps {\n  /** Currently entered value. */\n  value?: PropertyValue;\n  /** Property used in rule to which this value will be compared to. */\n  property: PropertyDescription;\n  /** Callback that is invoked when value changes. */\n  onChange: (value: PropertyValue) => void;\n}\n\n/** @beta */\ninterface PropertyFilterBuilderRuleValueLegacyProps\n  extends PropertyFilterBuilderRuleValueBaseProps {\n  /**\n   * Specifies which editors system should be used: legacy or the new one.\n   * @default \"legacy\"\n   * @beta\n   * @deprecated in 5.30. Legacy editors system is deprecated. Use `editorSystem: \"new\"`.\n   */\n  editorSystem?: \"legacy\";\n}\n\n/** @beta */\ninterface PropertyFilterBuilderRuleValueNewProps\n  extends PropertyFilterBuilderRuleValueBaseProps {\n  /**\n   * Specifies which editors system should be used: legacy or the new one.\n   * @default \"legacy\"\n   * @beta\n   */\n  editorSystem: \"new\";\n}\n\n/**\n * Props for [[PropertyFilterBuilderRuleValue]] component.\n * @beta\n * @deprecated in 5.30.0. Use `React.ComponentProps<typeof PropertyFilterBuilderRuleValue>` instead.\n */\nexport type PropertyFilterBuilderRuleValueProps =\n  | PropertyFilterBuilderRuleValueLegacyProps\n  | PropertyFilterBuilderRuleValueNewProps;\n\n/**\n * Props for custom [[PropertyFilterBuilderRuleValue]] renderer.\n * @beta\n */\nexport type PropertyFilterBuilderRuleValueRendererProps =\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  PropertyFilterBuilderRuleValueProps & {\n    /** Current operator. */\n    operator: PropertyFilterBuilderRuleOperator;\n  };\n\ninterface PropertyFilterBuilderRuleValueComponent {\n  /**\n   * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.\n   * @beta\n   */\n  (\n    props: PropertyFilterBuilderRuleValueNewProps & {\n      /** Current operator. */\n      operator: PropertyFilterBuilderRuleOperator;\n    }\n  ): React.JSX.Element;\n  /**\n   * @deprecated in 5.30. Use `PropertyFilterBuilderRuleValue` with `editorSystem=\"new\"` instead.\n   * @beta\n   */\n  (\n    props: PropertyFilterBuilderRuleValueLegacyProps & {\n      /** Current operator. */\n      operator: PropertyFilterBuilderRuleOperator;\n    }\n  ): React.JSX.Element;\n  /** @beta */\n  (props: PropertyFilterBuilderRuleValueRendererProps): React.JSX.Element;\n}\n\n/**\n * Component that renders [[PropertyFilterBuilderRuleRenderer]] value input.\n * @beta\n */\nexport const PropertyFilterBuilderRuleValue: PropertyFilterBuilderRuleValueComponent =\n  (props: PropertyFilterBuilderRuleValueRendererProps) => {\n    const { operator, ...restProps } = props;\n\n    return operator === \"between\" || operator === \"not-between\" ? (\n      <FilterBuilderRuleRangeValueRenderer {...restProps} />\n    ) : (\n      <FilterBuilderRulePrimitiveValueRenderer {...restProps} />\n    );\n  };\n\nfunction FilterBuilderRulePrimitiveValueRenderer({\n  property,\n  value,\n  onChange,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  editorSystem,\n}: // eslint-disable-next-line @typescript-eslint/no-deprecated\nPropertyFilterBuilderRuleValueProps) {\n  const propertyRecord = React.useMemo(() => {\n    return new PropertyRecord(\n      value ?? { valueFormat: PropertyValueFormat.Primitive },\n      property\n    );\n  }, [value, property]);\n\n  const onValueChange = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(newValue);\n    },\n    [onChange]\n  );\n\n  return (\n    <PropertyRecordEditor\n      propertyRecord={propertyRecord}\n      onCancel={() => {}}\n      onCommit={onValueChange}\n      size=\"small\"\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      editorSystem={editorSystem}\n    />\n  );\n}\n\nfunction FilterBuilderRuleRangeValueRenderer({\n  property,\n  value,\n  onChange,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  editorSystem,\n}: // eslint-disable-next-line @typescript-eslint/no-deprecated\nPropertyFilterBuilderRuleValueProps) {\n  const { translate } = useTranslation();\n  const { from, to } = React.useMemo(() => {\n    const rangeValue = PropertyFilterBuilderRuleRangeValue.parse(value);\n    return {\n      from: new PropertyRecord(rangeValue.from, property),\n      to: new PropertyRecord(rangeValue.to, property),\n    };\n  }, [property, value]);\n\n  const handleFromValue = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(getSerializedRangeValue(newValue, to.value));\n    },\n    [onChange, to]\n  );\n\n  const handleToValue = React.useCallback(\n    ({ newValue }: PropertyUpdatedArgs) => {\n      onChange(getSerializedRangeValue(from.value, newValue));\n    },\n    [onChange, from]\n  );\n\n  return (\n    <Flex\n      className=\"rule-value-range\"\n      display=\"inline-flex\"\n      flexDirection=\"row\"\n    >\n      <Flex.Item>\n        <PropertyRecordEditor\n          propertyRecord={from}\n          onCancel={() => {}}\n          onCommit={handleFromValue}\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          editorSystem={editorSystem}\n        />\n      </Flex.Item>\n      <Text>{translate(\"filterBuilder.operators.and\").toLowerCase()}</Text>\n      <Flex.Item>\n        <PropertyRecordEditor\n          propertyRecord={to}\n          onCancel={() => {}}\n          onCommit={handleToValue}\n          // eslint-disable-next-line @typescript-eslint/no-deprecated\n          editorSystem={editorSystem}\n        />\n      </Flex.Item>\n    </Flex>\n  );\n}\n\nfunction getSerializedRangeValue(from: PropertyValue, to: PropertyValue) {\n  return PropertyFilterBuilderRuleRangeValue.serialize({\n    from:\n      from.valueFormat === PropertyValueFormat.Primitive\n        ? from\n        : { valueFormat: PropertyValueFormat.Primitive },\n    to:\n      to.valueFormat === PropertyValueFormat.Primitive\n        ? to\n        : { valueFormat: PropertyValueFormat.Primitive },\n  });\n}\n"]}

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

@@ -0,0 +1,62 @@
+import type { PropertyRecord } from "@itwin/appui-abstract";
+import type { NumericValueMetadata } from "./values/Metadata.js";
+/** @internal */
+export interface StringPropertyValueConstraints {
+    minimumLength?: number;
+    maximumLength?: number;
+}
+/** @internal */
+export type NumericPropertyValueConstraints = Required<NumericValueMetadata>["constraints"];
+/** @internal */
+export interface ArrayPropertyValueConstraints {
+    minOccurs?: number;
+    maxOccurs?: number;
+}
+/**
+ * Copy of `PropertyValueConstraints` from @itwin/presentation-common package to support pre-5.0 version.
+ * @internal
+ */
+export type PropertyValueConstraints = StringPropertyValueConstraints | NumericPropertyValueConstraints | ArrayPropertyValueConstraints;
+/**
+ * Expands specified type with additional constraints property.
+ * @internal
+ */
+export type WithConstraints<T extends object> = T & {
+    constraints?: PropertyValueConstraints;
+};
+/**
+ * `PropertyRecord` with `constraints` on its `property` field.
+ *
+ * @internal
+ */
+export type PropertyRecordWithConstraints = Omit<PropertyRecord, "property"> & {
+    property: WithConstraints<PropertyRecord["property"]>;
+};
+/**
+ * Extracts `minimumValue`/`maximumValue` from a `PropertyValueConstraints` object.
+ * Returns `{ min: undefined, max: undefined }` if the constraint object doesn't have those keys.
+ * @internal
+ */
+export declare function getNumericConstraints(constraints: PropertyValueConstraints | undefined): {
+    min?: number;
+    max?: number;
+};
+/**
+ * Clamps `value` to `[min, max]`.
+ * @internal
+ */
+export declare function applyNumericConstraints({ value, min, max, }: {
+    value: number;
+    min?: number;
+    max?: number;
+}): number;
+/**
+ * Extracts `minimumLength`/`maximumLength` from a `PropertyValueConstraints` object.
+ * Returns `{ minLength: undefined, maxLength: undefined }` if the constraint object doesn't have those keys.
+ * @internal
+ */
+export declare function getStringConstraints(constraints: PropertyValueConstraints | undefined): {
+    minLength?: number;
+    maxLength?: number;
+};
+//# sourceMappingURL=ConstraintUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConstraintUtils.d.ts","sourceRoot":"","sources":["../../../src/components-react/new-editors/ConstraintUtils.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,gBAAgB;AAChB,MAAM,WAAW,8BAA8B;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,gBAAgB;AAChB,MAAM,MAAM,+BAA+B,GACzC,QAAQ,CAAC,oBAAoB,CAAC,CAAC,aAAa,CAAC,CAAC;AAEhD,gBAAgB;AAChB,MAAM,WAAW,6BAA6B;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAChC,8BAA8B,GAC9B,+BAA+B,GAC/B,6BAA6B,CAAC;AAElC;;;GAGG;AACH,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,GAAG;IAClD,WAAW,CAAC,EAAE,wBAAwB,CAAC;CACxC,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,6BAA6B,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,GAAG;IAC7E,QAAQ,EAAE,eAAe,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,wBAAwB,GAAG,SAAS,GAChD;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,CAWhC;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,KAAK,EACL,GAAG,EACH,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd,GAAG,MAAM,CAST;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,wBAAwB,GAAG,SAAS,GAChD;IAAE,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,CAW5C"}

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

@@ -0,0 +1,49 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+/**
+ * Extracts `minimumValue`/`maximumValue` from a `PropertyValueConstraints` object.
+ * Returns `{ min: undefined, max: undefined }` if the constraint object doesn't have those keys.
+ * @internal
+ */
+export function getNumericConstraints(constraints) {
+    if (constraints &&
+        ("minimumValue" in constraints || "maximumValue" in constraints)) {
+        return {
+            min: constraints.minimumValue,
+            max: constraints.maximumValue,
+        };
+    }
+    return { min: undefined, max: undefined };
+}
+/**
+ * Clamps `value` to `[min, max]`.
+ * @internal
+ */
+export function applyNumericConstraints({ value, min, max, }) {
+    let clamped = value;
+    if (min !== undefined) {
+        clamped = Math.max(clamped, min);
+    }
+    if (max !== undefined) {
+        clamped = Math.min(clamped, max);
+    }
+    return clamped;
+}
+/**
+ * Extracts `minimumLength`/`maximumLength` from a `PropertyValueConstraints` object.
+ * Returns `{ minLength: undefined, maxLength: undefined }` if the constraint object doesn't have those keys.
+ * @internal
+ */
+export function getStringConstraints(constraints) {
+    if (constraints &&
+        ("minimumLength" in constraints || "maximumLength" in constraints)) {
+        return {
+            minLength: constraints.minimumLength,
+            maxLength: constraints.maximumLength,
+        };
+    }
+    return { minLength: undefined, maxLength: undefined };
+}
+//# sourceMappingURL=ConstraintUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConstraintUtils.js","sourceRoot":"","sources":["../../../src/components-react/new-editors/ConstraintUtils.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AA+ChG;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CACnC,WAAiD;IAEjD,IACE,WAAW;QACX,CAAC,cAAc,IAAI,WAAW,IAAI,cAAc,IAAI,WAAW,CAAC,EAChE,CAAC;QACD,OAAO;YACL,GAAG,EAAE,WAAW,CAAC,YAAY;YAC7B,GAAG,EAAE,WAAW,CAAC,YAAY;SAC9B,CAAC;IACJ,CAAC;IACD,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC;AAC5C,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CAAC,EACtC,KAAK,EACL,GAAG,EACH,GAAG,GAKJ;IACC,IAAI,OAAO,GAAG,KAAK,CAAC;IACpB,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACtB,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACnC,CAAC;IACD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACtB,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,oBAAoB,CAClC,WAAiD;IAEjD,IACE,WAAW;QACX,CAAC,eAAe,IAAI,WAAW,IAAI,eAAe,IAAI,WAAW,CAAC,EAClE,CAAC;QACD,OAAO;YACL,SAAS,EAAE,WAAW,CAAC,aAAa;YACpC,SAAS,EAAE,WAAW,CAAC,aAAa;SACrC,CAAC;IACJ,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;AACxD,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\nimport type { PropertyRecord } from \"@itwin/appui-abstract\";\nimport type { NumericValueMetadata } from \"./values/Metadata.js\";\n\n/** @internal */\nexport interface StringPropertyValueConstraints {\n  minimumLength?: number;\n  maximumLength?: number;\n}\n\n/** @internal */\nexport type NumericPropertyValueConstraints =\n  Required<NumericValueMetadata>[\"constraints\"];\n\n/** @internal */\nexport interface ArrayPropertyValueConstraints {\n  minOccurs?: number;\n  maxOccurs?: number;\n}\n\n/**\n * Copy of `PropertyValueConstraints` from @itwin/presentation-common package to support pre-5.0 version.\n * @internal\n */\nexport type PropertyValueConstraints =\n  | StringPropertyValueConstraints\n  | NumericPropertyValueConstraints\n  | ArrayPropertyValueConstraints;\n\n/**\n * Expands specified type with additional constraints property.\n * @internal\n */\nexport type WithConstraints<T extends object> = T & {\n  constraints?: PropertyValueConstraints;\n};\n\n/**\n * `PropertyRecord` with `constraints` on its `property` field.\n *\n * @internal\n */\nexport type PropertyRecordWithConstraints = Omit<PropertyRecord, \"property\"> & {\n  property: WithConstraints<PropertyRecord[\"property\"]>;\n};\n\n/**\n * Extracts `minimumValue`/`maximumValue` from a `PropertyValueConstraints` object.\n * Returns `{ min: undefined, max: undefined }` if the constraint object doesn't have those keys.\n * @internal\n */\nexport function getNumericConstraints(\n  constraints: PropertyValueConstraints | undefined\n): { min?: number; max?: number } {\n  if (\n    constraints &&\n    (\"minimumValue\" in constraints || \"maximumValue\" in constraints)\n  ) {\n    return {\n      min: constraints.minimumValue,\n      max: constraints.maximumValue,\n    };\n  }\n  return { min: undefined, max: undefined };\n}\n\n/**\n * Clamps `value` to `[min, max]`.\n * @internal\n */\nexport function applyNumericConstraints({\n  value,\n  min,\n  max,\n}: {\n  value: number;\n  min?: number;\n  max?: number;\n}): number {\n  let clamped = value;\n  if (min !== undefined) {\n    clamped = Math.max(clamped, min);\n  }\n  if (max !== undefined) {\n    clamped = Math.min(clamped, max);\n  }\n  return clamped;\n}\n\n/**\n * Extracts `minimumLength`/`maximumLength` from a `PropertyValueConstraints` object.\n * Returns `{ minLength: undefined, maxLength: undefined }` if the constraint object doesn't have those keys.\n * @internal\n */\nexport function getStringConstraints(\n  constraints: PropertyValueConstraints | undefined\n): { minLength?: number; maxLength?: number } {\n  if (\n    constraints &&\n    (\"minimumLength\" in constraints || \"maximumLength\" in constraints)\n  ) {\n    return {\n      minLength: constraints.minimumLength,\n      maxLength: constraints.maximumLength,\n    };\n  }\n  return { minLength: undefined, maxLength: undefined };\n}\n"]}

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

@@ -33,6 +33,12 @@ export interface EditorProps<TMetadata = ValueMetadata, TValue = Value> {
     cancel?: () => void;
     disabled?: boolean;
     size?: "small" | "large";
+    /**
+     * HTML `id` attribute forwarded to the interactive element. Used to associate
+     * the editor with a `<label htmlFor>` so that `getByLabelText` queries work and
+     * the UI meets accessibility requirements.
+     */
+    id?: string;
 }
 /**
  * Utility function to create an editor spec for editor with concrete metadata and value types.

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

@@ -1 +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"}
+{"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;IACzB;;;;OAIG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;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.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