@itwin/core-react 3.0.0-dev.147 → 3.0.0-dev.148

package/lib/cjs/core-react/form/Field.d.ts

@@ -4,13 +4,13 @@
 import * as React from "react";
 import { FieldDef } from "./Form";
 /** Properties used to create a [[Field]] in a [[Form]]
- * @public
+ * @public @deprecated
  */
 export interface FieldProps extends FieldDef {
     id: string;
 }
 /** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.
- * @public
+ * @public @deprecated
  */
 export declare class Field extends React.Component<FieldProps> {
     constructor(props: FieldProps);

package/lib/cjs/core-react/form/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAiC,MAAM,QAAQ,CAAC;AAIjE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAE1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAID;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;gBACxC,KAAK,EAAE,UAAU;IAI7B,OAAO,CAAC,sBAAsB,CAc5B;IAEc,MAAM;CAkDvB"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAiC,MAAM,QAAQ,CAAC;AAIjE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAE1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAID;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;gBACxC,KAAK,EAAE,UAAU;IAI7B,OAAO,CAAC,sBAAsB,CAc5B;IAEc,MAAM;CAkDvB"}

package/lib/cjs/core-react/form/Field.js

@@ -3,6 +3,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
 /** @packageDocumentation
  * @module Form
  */
@@ -12,7 +13,7 @@ const React = require("react");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 const Form_1 = require("./Form");
 /** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.
- * @public
+ * @public @deprecated
  */
 class Field extends React.Component {
     constructor(props) {

package/lib/cjs/core-react/form/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Checkbox, Input, Select, SelectOption, Textarea } from \"@itwin/itwinui-react\";\r\nimport { FieldDef, FormContext, FormContextState } from \"./Form\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** Properties used to create a [[Field]] in a [[Form]]\r\n * @public\r\n */\r\nexport interface FieldProps extends FieldDef {\r\n  /* The unique field name */\r\n  id: string;\r\n}\r\n\r\ntype FieldDefOptions = FieldDef[\"options\"];\r\n\r\n/** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.\r\n * @public\r\n */\r\nexport class Field extends React.Component<FieldProps> {\r\n  constructor(props: FieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _generateSelectOptions = (propOptions: FieldDefOptions): SelectOption<string>[] => {\r\n    let selectOptions: SelectOption<string>[] = [];\r\n\r\n    if (propOptions instanceof Array) {\r\n      selectOptions = propOptions.map((option: string) => (\r\n        { value: option, label: option }\r\n      ));\r\n    } else if (propOptions !== undefined) {\r\n      selectOptions = Object.keys(propOptions).map((key) => (\r\n        { value: key, label: propOptions[key] }\r\n      ));\r\n    }\r\n\r\n    return selectOptions;\r\n  };\r\n\r\n  public override render() {\r\n    const selectOptions = this._generateSelectOptions(this.props.options);\r\n\r\n    return (\r\n      <FormContext.Consumer>\r\n        {(context: FormContextState | undefined) => (\r\n          <div className=\"core-form-group\">\r\n            {this.props.editor!.toLowerCase() !== \"checkbox\" && this.props.label && <label className=\"core-form-label\" htmlFor={this.props.id}>{this.props.label}</label>}\r\n\r\n            {this.props.editor!.toLowerCase() === \"textbox\" && (\r\n              <Input\r\n                id={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(event: React.ChangeEvent<HTMLInputElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\r\n                className=\"core-form-input\"\r\n                size=\"small\"\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"checkbox\" && (\r\n              <Checkbox\r\n                label={this.props.label}\r\n                id={this.props.id}\r\n                checked={context!.values[this.props.id]}\r\n                onChange={() => context!.setValues({ [this.props.id]: !context!.values[this.props.id] })}\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"multilinetextbox\" && (\r\n              <Textarea\r\n                id={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\r\n                className=\"core-form-textarea\"\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"dropdown\" && this.props.options && (\r\n              <Select\r\n                id={this.props.id}\r\n                // name={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(newValue: any) => context!.setValues({ [this.props.id]: newValue })}\r\n                options={selectOptions}\r\n                className=\"core-form-select\"\r\n                size=\"small\"\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n      </FormContext.Consumer>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Checkbox, Input, Select, SelectOption, Textarea } from \"@itwin/itwinui-react\";\r\nimport { FieldDef, FormContext, FormContextState } from \"./Form\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** Properties used to create a [[Field]] in a [[Form]]\r\n * @public @deprecated\r\n */\r\nexport interface FieldProps extends FieldDef {\r\n  /* The unique field name */\r\n  id: string;\r\n}\r\n\r\ntype FieldDefOptions = FieldDef[\"options\"];\r\n\r\n/** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.\r\n * @public @deprecated\r\n */\r\nexport class Field extends React.Component<FieldProps> {\r\n  constructor(props: FieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _generateSelectOptions = (propOptions: FieldDefOptions): SelectOption<string>[] => {\r\n    let selectOptions: SelectOption<string>[] = [];\r\n\r\n    if (propOptions instanceof Array) {\r\n      selectOptions = propOptions.map((option: string) => (\r\n        { value: option, label: option }\r\n      ));\r\n    } else if (propOptions !== undefined) {\r\n      selectOptions = Object.keys(propOptions).map((key) => (\r\n        { value: key, label: propOptions[key] }\r\n      ));\r\n    }\r\n\r\n    return selectOptions;\r\n  };\r\n\r\n  public override render() {\r\n    const selectOptions = this._generateSelectOptions(this.props.options);\r\n\r\n    return (\r\n      <FormContext.Consumer>\r\n        {(context: FormContextState | undefined) => (\r\n          <div className=\"core-form-group\">\r\n            {this.props.editor!.toLowerCase() !== \"checkbox\" && this.props.label && <label className=\"core-form-label\" htmlFor={this.props.id}>{this.props.label}</label>}\r\n\r\n            {this.props.editor!.toLowerCase() === \"textbox\" && (\r\n              <Input\r\n                id={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(event: React.ChangeEvent<HTMLInputElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\r\n                className=\"core-form-input\"\r\n                size=\"small\"\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"checkbox\" && (\r\n              <Checkbox\r\n                label={this.props.label}\r\n                id={this.props.id}\r\n                checked={context!.values[this.props.id]}\r\n                onChange={() => context!.setValues({ [this.props.id]: !context!.values[this.props.id] })}\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"multilinetextbox\" && (\r\n              <Textarea\r\n                id={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\r\n                className=\"core-form-textarea\"\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"dropdown\" && this.props.options && (\r\n              <Select\r\n                id={this.props.id}\r\n                // name={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(newValue: any) => context!.setValues({ [this.props.id]: newValue })}\r\n                options={selectOptions}\r\n                className=\"core-form-select\"\r\n                size=\"small\"\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n      </FormContext.Consumer>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/form/Form.d.ts

@@ -4,11 +4,11 @@
 import "./Form.scss";
 import * as React from "react";
 /** The available editors for the fields in a [[Form]].
- * @public
+ * @public @deprecated
  */
 export declare type FieldEditor = "textbox" | "multilinetextbox" | "dropdown" | "checkbox";
 /** Interface used to define each [[Field]] in a [[Form]]
- * @public
+ * @public @deprecated
  */
 export interface FieldDef {
     label?: string;
@@ -19,13 +19,13 @@ export interface FieldDef {
     value?: any;
 }
 /** Key/value pairs for all the field values with key being the field HTML Id.
- * @public
+ * @public @deprecated
  */
 export interface FieldValues {
     [key: string]: any;
 }
 /** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.
- * @public
+ * @public @deprecated
  */
 interface FormState {
     values: FieldValues;
@@ -34,13 +34,13 @@ interface FormState {
 }
 /**
  * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.
- * @public
+ * @public @deprecate
  */
 export interface FormContextState extends FormState {
     setValues: (values: FieldValues) => void;
 }
 /** React context used by Form as a Provider and by the Fields as Consumers and updaters.
- * @public
+ * @public @deprecated
  */
 export declare const FormContext: React.Context<FormContextState | undefined>;
 /** Key/value pairs for all the field definitions to be displayed in a [[Form]].
@@ -112,7 +112,7 @@ export interface FormProps {
  *     </div >
  *   );
  * }
- * @public
+ * @public @deprecate
  */
 export declare class Form extends React.Component<FormProps, FormState> {
     private _submitButtonLabel;

package/lib/cjs/core-react/form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;GAEG;AACH,oBAAY,WAAW,GAAG,SAAS,GAAG,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,QAAQ;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,WAAW,CAAC;IAGrB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAG/C,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,SAAS;IAEjB,MAAM,EAAE,WAAW,CAAC;IAGpB,QAAQ,EAAE,MAAM,CAAC;IAGjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,WAAW,6CAA+D,CAAC;AAGxF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iHAAiH;IACjH,gBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,wDAAwD;IACxD,MAAM,EAAE,gBAAgB,CAAC;IACzB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D,OAAO,CAAC,kBAAkB,CAA8C;IACxE,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,YAAY,CAAwC;gBAEhD,KAAK,EAAE,SAAS;IAa5B;;;OAGG;IACH,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,aAAa,CAgBnB;IAEc,MAAM;CA2BvB"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;GAEG;AACH,oBAAY,WAAW,GAAG,SAAS,GAAG,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,QAAQ;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,WAAW,CAAC;IAGrB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAG/C,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,SAAS;IAEjB,MAAM,EAAE,WAAW,CAAC;IAGpB,QAAQ,EAAE,MAAM,CAAC;IAGjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,WAAW,6CAA+D,CAAC;AAGxF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iHAAiH;IACjH,gBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,wDAAwD;IACxD,MAAM,EAAE,gBAAgB,CAAC;IACzB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D,OAAO,CAAC,kBAAkB,CAA8C;IACxE,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,YAAY,CAAwC;gBAEhD,KAAK,EAAE,SAAS;IAa5B;;;OAGG;IACH,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,aAAa,CAgBnB;IAEc,MAAM;CA2BvB"}

package/lib/cjs/core-react/form/Form.js

@@ -3,6 +3,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
 /** @packageDocumentation
  * @module Form
  */
@@ -14,7 +15,7 @@ const UiCore_1 = require("../UiCore");
 const Field_1 = require("./Field");
 const itwinui_react_1 = require("@itwin/itwinui-react");
 /** React context used by Form as a Provider and by the Fields as Consumers and updaters.
- * @public
+ * @public @deprecated
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 exports.FormContext = React.createContext(undefined);
@@ -71,7 +72,7 @@ exports.FormContext.displayName = "core-react:FormContext";
  *     </div >
  *   );
  * }
- * @public
+ * @public @deprecate
  */
 class Form extends React.Component {
     constructor(props) {

package/lib/cjs/core-react/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport \"./Form.scss\";\r\nimport * as React from \"react\";\r\nimport { UiCore } from \"../UiCore\";\r\nimport { Field } from \"./Field\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** The available editors for the fields in a [[Form]].\r\n * @public\r\n */\r\nexport type FieldEditor = \"textbox\" | \"multilinetextbox\" | \"dropdown\" | \"checkbox\";\r\n\r\n/** Interface used to define each [[Field]] in a [[Form]]\r\n * @public\r\n */\r\nexport interface FieldDef {\r\n  /* The label text for the field */\r\n  label?: string;\r\n\r\n  /* The editor for the field */\r\n  editor?: FieldEditor;\r\n\r\n  /* The drop down items for the field */\r\n  options?: string[] | { [key: string]: string };\r\n\r\n  /* The initial field value */\r\n  value?: any;\r\n}\r\n\r\n/** Key/value pairs for all the field values with key being the field HTML Id.\r\n * @public\r\n */\r\nexport interface FieldValues {\r\n  [key: string]: any;\r\n}\r\n\r\n/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.\r\n * @public\r\n */\r\ninterface FormState {\r\n  /* The field values */\r\n  values: FieldValues;\r\n\r\n  /* The errorMsg message return in catch of async submit button processing */\r\n  errorMsg: string;\r\n\r\n  /* Whether the form has been successfully submitted */\r\n  submitSuccess?: boolean;\r\n}\r\n\r\n/**\r\n * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.\r\n * @public\r\n */\r\nexport interface FormContextState extends FormState {\r\n  setValues: (values: FieldValues) => void;\r\n}\r\n\r\n/** React context used by Form as a Provider and by the Fields as Consumers and updaters.\r\n * @public\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const FormContext = React.createContext<FormContextState | undefined>(undefined);\r\nFormContext.displayName = \"core-react:FormContext\";\r\n\r\n/** Key/value pairs for all the field definitions to be displayed in a [[Form]].\r\n * @public\r\n */\r\nexport interface FieldDefinitions {\r\n  [key: string]: FieldDef;\r\n}\r\n\r\n/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.\r\n * @public\r\n */\r\nexport interface FormProps {\r\n  /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */\r\n  handleFormSubmit: (values: FieldValues) => Promise<void>;\r\n  /** Definition used to create each Field in the Form. */\r\n  fields: FieldDefinitions;\r\n  /** Optional label which will override default Submit button label. */\r\n  submitButtonLabel?: string;\r\n}\r\n\r\n/** Component used to create a Form using supplied properties to specify the fields of the Form.\r\n * @example\r\n * // Example of using a form as contents of a modal dialog.\r\n * export class ExampleForm extends React.Component {\r\n *   public static open() {\r\n *   const form = new ExampleForm({});\r\n *   ModalDialogManager.openDialog(form.render());\r\n * }\r\n *\r\n * protected async handleSubmit(values: FieldValues): Promise<void> {\r\n *   await this.processFormSubmission(values);\r\n *   ModalDialogManager.closeDialog();\r\n *   const msg = JSON.stringify(values);\r\n *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, \"Form Submitted\", msg));\r\n * }\r\n *\r\n * protected async processFormSubmission(values: FieldValues): Promise<void> {\r\n *   // if error occurs during async processing throw an Error and return error message back to form.\r\n *   throw new Error(\"Error processing form\");\r\n * }\r\n *\r\n * protected handleCancel() {\r\n *   ModalDialogManager.closeDialog();\r\n * }\r\n *\r\n * public render() {\r\n *   const fields: FieldDefinitions = {\r\n *     Name: {\r\n *       label: this._nameLabel,\r\n *       editor: \"textbox\",\r\n *       value: \"John Smith\",\r\n *     },\r\n *     PickList: {\r\n *       label: this._pickListLabel,\r\n *       editor: \"dropdown\",\r\n *       value: \"one\",\r\n *       options: [\"one\", \"two\", \"three\", \"four\"],\r\n *     },\r\n *   };\r\n *\r\n *   return (\r\n *     <div>\r\n *       <Dialog title=\"Example Form\"\r\n *         opened={true}\r\n *         onClose={() => this.handleCancel()}>\r\n *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}\r\n *           fields={fields}\r\n *         />\r\n *       </Dialog>\r\n *     </div >\r\n *   );\r\n * }\r\n * @public\r\n */\r\nexport class Form extends React.Component<FormProps, FormState> {\r\n  private _submitButtonLabel = UiCore.translate(\"form.submitButtonLabel\");\r\n  private _errorPrefix = UiCore.translate(\"form.errorPrefix\");\r\n  private _errorSuffix = UiCore.translate(\"form.errorSuffix\");\r\n\r\n  constructor(props: FormProps) {\r\n    super(props);\r\n\r\n    // set initial values for field values\r\n    const values: FieldValues = {};\r\n    Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);\r\n\r\n    this.state = {\r\n      errorMsg: \"\",\r\n      values,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Returns whether there is an errorMsg message in the state/context\r\n   * @param errorMsg - The form errorMsg\r\n   */\r\n  private haveError(errorMsg: string) {\r\n    return errorMsg && errorMsg.length;\r\n  }\r\n\r\n  private _setValues = (values: FieldValues) => {\r\n    this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));\r\n  };\r\n\r\n  private _handleSubmit = (event: React.FormEvent<HTMLFormElement>, values: FieldValues) => {\r\n    event.preventDefault();\r\n\r\n    // istanbul ignore next\r\n    if (!this.props.handleFormSubmit || !values || 0 === values.length)\r\n      throw new Error(\"A handleFormSubmit function and values must be defined\");\r\n\r\n    this.props.handleFormSubmit(values)\r\n      .then(() => {\r\n        // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the\r\n        // submission is successful.\r\n        // console.log(rtnMsg);\r\n      })\r\n      .catch((reason: Error) => {\r\n        this.setState({ submitSuccess: false, errorMsg: reason.message });\r\n      });\r\n  };\r\n\r\n  public override render() {\r\n    const { submitSuccess, errorMsg } = this.state;\r\n    const { fields, submitButtonLabel } = this.props;\r\n    const context: FormContextState = { ...this.state, setValues: this._setValues };\r\n\r\n    return (\r\n      <FormContext.Provider value={context}>\r\n        <div className=\"core-form-wrapper\">\r\n          <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => this._handleSubmit(event, this.state.values)} noValidate={true}>\r\n            <div className=\"core-form-container\">\r\n              {Object.keys(fields).map((key) => <Field key={key} id={key} {...this.props.fields[key]} />)}\r\n              <div className=\"core-form-footer\">\r\n                <div className=\"core-form-buttons\">\r\n                  <Button type=\"submit\" styleType=\"high-visibility\">\r\n                    {submitButtonLabel ? submitButtonLabel : this._submitButtonLabel}\r\n                  </Button>\r\n                </div>\r\n                {submitSuccess === false && this.haveError(errorMsg) && (\r\n                  <div className=\"core-form-alert\" role=\"alert\">{`${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`}</div>\r\n                )}\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </FormContext.Provider>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;AAEH,uBAAqB;AACrB,+BAA+B;AAC/B,sCAAmC;AACnC,mCAAgC;AAChC,wDAA8C;AAuD9C;;GAEG;AACH,gEAAgE;AACnD,QAAA,WAAW,GAAG,KAAK,CAAC,aAAa,CAA+B,SAAS,CAAC,CAAC;AACxF,mBAAW,CAAC,WAAW,GAAG,wBAAwB,CAAC;AAqBnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,MAAa,IAAK,SAAQ,KAAK,CAAC,SAA+B;IAK7D,YAAY,KAAgB;QAC1B,KAAK,CAAC,KAAK,CAAC,CAAC;QALP,uBAAkB,GAAG,eAAM,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;QAChE,iBAAY,GAAG,eAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACpD,iBAAY,GAAG,eAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QAuBpD,eAAU,GAAG,CAAC,MAAmB,EAAE,EAAE;YAC3C,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,SAAS,CAAC,MAAM,EAAE,GAAG,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC;QACjF,CAAC,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAuC,EAAE,MAAmB,EAAE,EAAE;YACvF,KAAK,CAAC,cAAc,EAAE,CAAC;YAEvB,uBAAuB;YACvB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,MAAM,CAAC,MAAM;gBAChE,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;YAE5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC;iBAChC,IAAI,CAAC,GAAG,EAAE;gBACT,yGAAyG;gBACzG,4BAA4B;gBAC5B,uBAAuB;YACzB,CAAC,CAAC;iBACD,KAAK,CAAC,CAAC,MAAa,EAAE,EAAE;gBACvB,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC;YACpE,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAtCA,sCAAsC;QACtC,MAAM,MAAM,GAAgB,EAAE,CAAC;QAC/B,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;QAElF,IAAI,CAAC,KAAK,GAAG;YACX,QAAQ,EAAE,EAAE;YACZ,MAAM;SACP,CAAC;IACJ,CAAC;IAED;;;OAGG;IACK,SAAS,CAAC,QAAgB;QAChC,OAAO,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC;IACrC,CAAC;IAwBe,MAAM;QACpB,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC/C,MAAM,EAAE,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjD,MAAM,OAAO,GAAqB,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;QAEhF,OAAO,CACL,oBAAC,mBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,OAAO;YAClC,6BAAK,SAAS,EAAC,mBAAmB;gBAChC,8BAAM,QAAQ,EAAE,CAAC,KAAuC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,UAAU,EAAE,IAAI;oBACzH,6BAAK,SAAS,EAAC,qBAAqB;wBACjC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAC,aAAK,IAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,KAAM,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,GAAI,CAAC;wBAC3F,6BAAK,SAAS,EAAC,kBAAkB;4BAC/B,6BAAK,SAAS,EAAC,mBAAmB;gCAChC,oBAAC,sBAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,iBAAiB,IAC9C,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CACzD,CACL;4BACL,aAAa,KAAK,KAAK,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CACtD,6BAAK,SAAS,EAAC,iBAAiB,EAAC,IAAI,EAAC,OAAO,IAAE,GAAG,IAAI,CAAC,YAAY,IAAI,QAAQ,IAAI,IAAI,CAAC,YAAY,EAAE,CAAO,CAC9G,CACG,CACF,CACD,CACH,CACe,CACxB,CAAC;IACJ,CAAC;CACF;AA3ED,oBA2EC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport \"./Form.scss\";\r\nimport * as React from \"react\";\r\nimport { UiCore } from \"../UiCore\";\r\nimport { Field } from \"./Field\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** The available editors for the fields in a [[Form]].\r\n * @public @deprecated\r\n */\r\nexport type FieldEditor = \"textbox\" | \"multilinetextbox\" | \"dropdown\" | \"checkbox\";\r\n\r\n/** Interface used to define each [[Field]] in a [[Form]]\r\n * @public @deprecated\r\n */\r\nexport interface FieldDef {\r\n  /* The label text for the field */\r\n  label?: string;\r\n\r\n  /* The editor for the field */\r\n  editor?: FieldEditor;\r\n\r\n  /* The drop down items for the field */\r\n  options?: string[] | { [key: string]: string };\r\n\r\n  /* The initial field value */\r\n  value?: any;\r\n}\r\n\r\n/** Key/value pairs for all the field values with key being the field HTML Id.\r\n * @public @deprecated\r\n */\r\nexport interface FieldValues {\r\n  [key: string]: any;\r\n}\r\n\r\n/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.\r\n * @public @deprecated\r\n */\r\ninterface FormState {\r\n  /* The field values */\r\n  values: FieldValues;\r\n\r\n  /* The errorMsg message return in catch of async submit button processing */\r\n  errorMsg: string;\r\n\r\n  /* Whether the form has been successfully submitted */\r\n  submitSuccess?: boolean;\r\n}\r\n\r\n/**\r\n * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.\r\n * @public @deprecate\r\n */\r\nexport interface FormContextState extends FormState {\r\n  setValues: (values: FieldValues) => void;\r\n}\r\n\r\n/** React context used by Form as a Provider and by the Fields as Consumers and updaters.\r\n * @public @deprecated\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const FormContext = React.createContext<FormContextState | undefined>(undefined);\r\nFormContext.displayName = \"core-react:FormContext\";\r\n\r\n/** Key/value pairs for all the field definitions to be displayed in a [[Form]].\r\n * @public\r\n */\r\nexport interface FieldDefinitions {\r\n  [key: string]: FieldDef;\r\n}\r\n\r\n/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.\r\n * @public\r\n */\r\nexport interface FormProps {\r\n  /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */\r\n  handleFormSubmit: (values: FieldValues) => Promise<void>;\r\n  /** Definition used to create each Field in the Form. */\r\n  fields: FieldDefinitions;\r\n  /** Optional label which will override default Submit button label. */\r\n  submitButtonLabel?: string;\r\n}\r\n\r\n/** Component used to create a Form using supplied properties to specify the fields of the Form.\r\n * @example\r\n * // Example of using a form as contents of a modal dialog.\r\n * export class ExampleForm extends React.Component {\r\n *   public static open() {\r\n *   const form = new ExampleForm({});\r\n *   ModalDialogManager.openDialog(form.render());\r\n * }\r\n *\r\n * protected async handleSubmit(values: FieldValues): Promise<void> {\r\n *   await this.processFormSubmission(values);\r\n *   ModalDialogManager.closeDialog();\r\n *   const msg = JSON.stringify(values);\r\n *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, \"Form Submitted\", msg));\r\n * }\r\n *\r\n * protected async processFormSubmission(values: FieldValues): Promise<void> {\r\n *   // if error occurs during async processing throw an Error and return error message back to form.\r\n *   throw new Error(\"Error processing form\");\r\n * }\r\n *\r\n * protected handleCancel() {\r\n *   ModalDialogManager.closeDialog();\r\n * }\r\n *\r\n * public render() {\r\n *   const fields: FieldDefinitions = {\r\n *     Name: {\r\n *       label: this._nameLabel,\r\n *       editor: \"textbox\",\r\n *       value: \"John Smith\",\r\n *     },\r\n *     PickList: {\r\n *       label: this._pickListLabel,\r\n *       editor: \"dropdown\",\r\n *       value: \"one\",\r\n *       options: [\"one\", \"two\", \"three\", \"four\"],\r\n *     },\r\n *   };\r\n *\r\n *   return (\r\n *     <div>\r\n *       <Dialog title=\"Example Form\"\r\n *         opened={true}\r\n *         onClose={() => this.handleCancel()}>\r\n *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}\r\n *           fields={fields}\r\n *         />\r\n *       </Dialog>\r\n *     </div >\r\n *   );\r\n * }\r\n * @public @deprecate\r\n */\r\nexport class Form extends React.Component<FormProps, FormState> {\r\n  private _submitButtonLabel = UiCore.translate(\"form.submitButtonLabel\");\r\n  private _errorPrefix = UiCore.translate(\"form.errorPrefix\");\r\n  private _errorSuffix = UiCore.translate(\"form.errorSuffix\");\r\n\r\n  constructor(props: FormProps) {\r\n    super(props);\r\n\r\n    // set initial values for field values\r\n    const values: FieldValues = {};\r\n    Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);\r\n\r\n    this.state = {\r\n      errorMsg: \"\",\r\n      values,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Returns whether there is an errorMsg message in the state/context\r\n   * @param errorMsg - The form errorMsg\r\n   */\r\n  private haveError(errorMsg: string) {\r\n    return errorMsg && errorMsg.length;\r\n  }\r\n\r\n  private _setValues = (values: FieldValues) => {\r\n    this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));\r\n  };\r\n\r\n  private _handleSubmit = (event: React.FormEvent<HTMLFormElement>, values: FieldValues) => {\r\n    event.preventDefault();\r\n\r\n    // istanbul ignore next\r\n    if (!this.props.handleFormSubmit || !values || 0 === values.length)\r\n      throw new Error(\"A handleFormSubmit function and values must be defined\");\r\n\r\n    this.props.handleFormSubmit(values)\r\n      .then(() => {\r\n        // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the\r\n        // submission is successful.\r\n        // console.log(rtnMsg);\r\n      })\r\n      .catch((reason: Error) => {\r\n        this.setState({ submitSuccess: false, errorMsg: reason.message });\r\n      });\r\n  };\r\n\r\n  public override render() {\r\n    const { submitSuccess, errorMsg } = this.state;\r\n    const { fields, submitButtonLabel } = this.props;\r\n    const context: FormContextState = { ...this.state, setValues: this._setValues };\r\n\r\n    return (\r\n      <FormContext.Provider value={context}>\r\n        <div className=\"core-form-wrapper\">\r\n          <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => this._handleSubmit(event, this.state.values)} noValidate={true}>\r\n            <div className=\"core-form-container\">\r\n              {Object.keys(fields).map((key) => <Field key={key} id={key} {...this.props.fields[key]} />)}\r\n              <div className=\"core-form-footer\">\r\n                <div className=\"core-form-buttons\">\r\n                  <Button type=\"submit\" styleType=\"high-visibility\">\r\n                    {submitButtonLabel ? submitButtonLabel : this._submitButtonLabel}\r\n                  </Button>\r\n                </div>\r\n                {submitSuccess === false && this.haveError(errorMsg) && (\r\n                  <div className=\"core-form-alert\" role=\"alert\">{`${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`}</div>\r\n                )}\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </FormContext.Provider>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/core-react/utils/UiEvent.d.ts

@@ -3,7 +3,7 @@
  */
 import { BeUiEvent } from "@itwin/core-bentley";
 /** iTwin.js UI UiEvent class is a subclass of BeEvent with argument type safety.
- * @public
+ * @public @deprecated Use UiEvent in appui-abstract instead
  */
 export declare class UiEvent<TEventArgs> extends BeUiEvent<TEventArgs> {
 }

package/lib/cjs/core-react/utils/UiEvent.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UiEvent = void 0;
 const core_bentley_1 = require("@itwin/core-bentley");
 /** iTwin.js UI UiEvent class is a subclass of BeEvent with argument type safety.
- * @public
+ * @public @deprecated Use UiEvent in appui-abstract instead
  */
 class UiEvent extends core_bentley_1.BeUiEvent {
 }

package/lib/cjs/core-react/utils/UiEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiEvent.js","sourceRoot":"","sources":["../../../../src/core-react/utils/UiEvent.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,sDAAgD;AAEhD;;GAEG;AACH,MAAa,OAAoB,SAAQ,wBAAqB;CAAI;AAAlE,0BAAkE","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Utilities\r\n */\r\n\r\nimport { BeUiEvent } from \"@itwin/core-bentley\";\r\n\r\n/** iTwin.js UI UiEvent class is a subclass of BeEvent with argument type safety.\r\n * @public\r\n */\r\nexport class UiEvent<TEventArgs> extends BeUiEvent<TEventArgs> { }\r\n"]}
+{"version":3,"file":"UiEvent.js","sourceRoot":"","sources":["../../../../src/core-react/utils/UiEvent.ts"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,sDAAgD;AAEhD;;GAEG;AACH,MAAa,OAAoB,SAAQ,wBAAqB;CAAI;AAAlE,0BAAkE","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Utilities\r\n */\r\n\r\nimport { BeUiEvent } from \"@itwin/core-bentley\";\r\n\r\n/** iTwin.js UI UiEvent class is a subclass of BeEvent with argument type safety.\r\n * @public @deprecated Use UiEvent in appui-abstract instead\r\n */\r\nexport class UiEvent<TEventArgs> extends BeUiEvent<TEventArgs> { }\r\n"]}

package/lib/esm/core-react/form/Field.d.ts

@@ -4,13 +4,13 @@
 import * as React from "react";
 import { FieldDef } from "./Form";
 /** Properties used to create a [[Field]] in a [[Form]]
- * @public
+ * @public @deprecated
  */
 export interface FieldProps extends FieldDef {
     id: string;
 }
 /** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.
- * @public
+ * @public @deprecated
  */
 export declare class Field extends React.Component<FieldProps> {
     constructor(props: FieldProps);

package/lib/esm/core-react/form/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAiC,MAAM,QAAQ,CAAC;AAIjE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAE1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAID;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;gBACxC,KAAK,EAAE,UAAU;IAI7B,OAAO,CAAC,sBAAsB,CAc5B;IAEc,MAAM;CAkDvB"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAiC,MAAM,QAAQ,CAAC;AAIjE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,QAAQ;IAE1C,EAAE,EAAE,MAAM,CAAC;CACZ;AAID;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC;gBACxC,KAAK,EAAE,UAAU;IAI7B,OAAO,CAAC,sBAAsB,CAc5B;IAEc,MAAM;CAkDvB"}

package/lib/esm/core-react/form/Field.js

@@ -2,6 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
 /** @packageDocumentation
  * @module Form
  */
@@ -9,7 +10,7 @@ import * as React from "react";
 import { Checkbox, Input, Select, Textarea } from "@itwin/itwinui-react";
 import { FormContext } from "./Form";
 /** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.
- * @public
+ * @public @deprecated
  */
 export class Field extends React.Component {
     constructor(props) {

package/lib/esm/core-react/form/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Checkbox, Input, Select, SelectOption, Textarea } from \"@itwin/itwinui-react\";\r\nimport { FieldDef, FormContext, FormContextState } from \"./Form\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** Properties used to create a [[Field]] in a [[Form]]\r\n * @public\r\n */\r\nexport interface FieldProps extends FieldDef {\r\n  /* The unique field name */\r\n  id: string;\r\n}\r\n\r\ntype FieldDefOptions = FieldDef[\"options\"];\r\n\r\n/** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.\r\n * @public\r\n */\r\nexport class Field extends React.Component<FieldProps> {\r\n  constructor(props: FieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _generateSelectOptions = (propOptions: FieldDefOptions): SelectOption<string>[] => {\r\n    let selectOptions: SelectOption<string>[] = [];\r\n\r\n    if (propOptions instanceof Array) {\r\n      selectOptions = propOptions.map((option: string) => (\r\n        { value: option, label: option }\r\n      ));\r\n    } else if (propOptions !== undefined) {\r\n      selectOptions = Object.keys(propOptions).map((key) => (\r\n        { value: key, label: propOptions[key] }\r\n      ));\r\n    }\r\n\r\n    return selectOptions;\r\n  };\r\n\r\n  public override render() {\r\n    const selectOptions = this._generateSelectOptions(this.props.options);\r\n\r\n    return (\r\n      <FormContext.Consumer>\r\n        {(context: FormContextState | undefined) => (\r\n          <div className=\"core-form-group\">\r\n            {this.props.editor!.toLowerCase() !== \"checkbox\" && this.props.label && <label className=\"core-form-label\" htmlFor={this.props.id}>{this.props.label}</label>}\r\n\r\n            {this.props.editor!.toLowerCase() === \"textbox\" && (\r\n              <Input\r\n                id={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(event: React.ChangeEvent<HTMLInputElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\r\n                className=\"core-form-input\"\r\n                size=\"small\"\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"checkbox\" && (\r\n              <Checkbox\r\n                label={this.props.label}\r\n                id={this.props.id}\r\n                checked={context!.values[this.props.id]}\r\n                onChange={() => context!.setValues({ [this.props.id]: !context!.values[this.props.id] })}\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"multilinetextbox\" && (\r\n              <Textarea\r\n                id={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\r\n                className=\"core-form-textarea\"\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"dropdown\" && this.props.options && (\r\n              <Select\r\n                id={this.props.id}\r\n                // name={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(newValue: any) => context!.setValues({ [this.props.id]: newValue })}\r\n                options={selectOptions}\r\n                className=\"core-form-select\"\r\n                size=\"small\"\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n      </FormContext.Consumer>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../../src/core-react/form/Field.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAgB,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACvF,OAAO,EAAY,WAAW,EAAoB,MAAM,QAAQ,CAAC;AAcjE;;GAEG;AACH,MAAM,OAAO,KAAM,SAAQ,KAAK,CAAC,SAAqB;IACpD,YAAY,KAAiB;QAC3B,KAAK,CAAC,KAAK,CAAC,CAAC;QAGP,2BAAsB,GAAG,CAAC,WAA4B,EAA0B,EAAE;YACxF,IAAI,aAAa,GAA2B,EAAE,CAAC;YAE/C,IAAI,WAAW,YAAY,KAAK,EAAE;gBAChC,aAAa,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,MAAc,EAAE,EAAE,CAAC,CAClD,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CACjC,CAAC,CAAC;aACJ;iBAAM,IAAI,WAAW,KAAK,SAAS,EAAE;gBACpC,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpD,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,WAAW,CAAC,GAAG,CAAC,EAAE,CACxC,CAAC,CAAC;aACJ;YAED,OAAO,aAAa,CAAC;QACvB,CAAC,CAAC;IAhBF,CAAC;IAkBe,MAAM;QACpB,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QAEtE,OAAO,CACL,oBAAC,WAAW,CAAC,QAAQ,QAClB,CAAC,OAAqC,EAAE,EAAE,CAAC,CAC1C,6BAAK,SAAS,EAAC,iBAAiB;YAC7B,IAAI,CAAC,KAAK,CAAC,MAAO,CAAC,WAAW,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,+BAAO,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,IAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAS;YAE5J,IAAI,CAAC,KAAK,CAAC,MAAO,CAAC,WAAW,EAAE,KAAK,SAAS,IAAI,CACjD,oBAAC,KAAK,IACJ,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EACjB,KAAK,EAAE,OAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EACrC,QAAQ,EAAE,CAAC,KAA0C,EAAE,EAAE,CAAC,OAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,EAC5H,SAAS,EAAC,iBAAiB,EAC3B,IAAI,EAAC,OAAO,GACZ,CACH;YACA,IAAI,CAAC,KAAK,CAAC,MAAO,CAAC,WAAW,EAAE,KAAK,UAAU,IAAI,CAClD,oBAAC,QAAQ,IACP,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EACjB,OAAO,EAAE,OAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EACvC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,OAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,GACxF,CACH;YACA,IAAI,CAAC,KAAK,CAAC,MAAO,CAAC,WAAW,EAAE,KAAK,kBAAkB,IAAI,CAC1D,oBAAC,QAAQ,IACP,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,EACjB,KAAK,EAAE,OAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EACrC,QAAQ,EAAE,CAAC,KAA6C,EAAE,EAAE,CAAC,OAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,EAC/H,SAAS,EAAC,oBAAoB,GAC9B,CACH;YACA,IAAI,CAAC,KAAK,CAAC,MAAO,CAAC,WAAW,EAAE,KAAK,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,CACxE,oBAAC,MAAM,IACL,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;gBACjB,uBAAuB;gBACvB,KAAK,EAAE,OAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EACrC,QAAQ,EAAE,CAAC,QAAa,EAAE,EAAE,CAAC,OAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAC9E,OAAO,EAAE,aAAa,EACtB,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,OAAO,GACZ,CACH,CACG,CACP,CACoB,CACxB,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport * as React from \"react\";\r\nimport { Checkbox, Input, Select, SelectOption, Textarea } from \"@itwin/itwinui-react\";\r\nimport { FieldDef, FormContext, FormContextState } from \"./Form\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** Properties used to create a [[Field]] in a [[Form]]\r\n * @public @deprecated\r\n */\r\nexport interface FieldProps extends FieldDef {\r\n  /* The unique field name */\r\n  id: string;\r\n}\r\n\r\ntype FieldDefOptions = FieldDef[\"options\"];\r\n\r\n/** Component that represents a single field in an input form. Only four type of editors are supported. Field gets/sets state data from/to the context control by the form.\r\n * @public @deprecated\r\n */\r\nexport class Field extends React.Component<FieldProps> {\r\n  constructor(props: FieldProps) {\r\n    super(props);\r\n  }\r\n\r\n  private _generateSelectOptions = (propOptions: FieldDefOptions): SelectOption<string>[] => {\r\n    let selectOptions: SelectOption<string>[] = [];\r\n\r\n    if (propOptions instanceof Array) {\r\n      selectOptions = propOptions.map((option: string) => (\r\n        { value: option, label: option }\r\n      ));\r\n    } else if (propOptions !== undefined) {\r\n      selectOptions = Object.keys(propOptions).map((key) => (\r\n        { value: key, label: propOptions[key] }\r\n      ));\r\n    }\r\n\r\n    return selectOptions;\r\n  };\r\n\r\n  public override render() {\r\n    const selectOptions = this._generateSelectOptions(this.props.options);\r\n\r\n    return (\r\n      <FormContext.Consumer>\r\n        {(context: FormContextState | undefined) => (\r\n          <div className=\"core-form-group\">\r\n            {this.props.editor!.toLowerCase() !== \"checkbox\" && this.props.label && <label className=\"core-form-label\" htmlFor={this.props.id}>{this.props.label}</label>}\r\n\r\n            {this.props.editor!.toLowerCase() === \"textbox\" && (\r\n              <Input\r\n                id={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(event: React.ChangeEvent<HTMLInputElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\r\n                className=\"core-form-input\"\r\n                size=\"small\"\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"checkbox\" && (\r\n              <Checkbox\r\n                label={this.props.label}\r\n                id={this.props.id}\r\n                checked={context!.values[this.props.id]}\r\n                onChange={() => context!.setValues({ [this.props.id]: !context!.values[this.props.id] })}\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"multilinetextbox\" && (\r\n              <Textarea\r\n                id={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => context!.setValues({ [this.props.id]: event.currentTarget.value })}\r\n                className=\"core-form-textarea\"\r\n              />\r\n            )}\r\n            {this.props.editor!.toLowerCase() === \"dropdown\" && this.props.options && (\r\n              <Select\r\n                id={this.props.id}\r\n                // name={this.props.id}\r\n                value={context!.values[this.props.id]}\r\n                onChange={(newValue: any) => context!.setValues({ [this.props.id]: newValue })}\r\n                options={selectOptions}\r\n                className=\"core-form-select\"\r\n                size=\"small\"\r\n              />\r\n            )}\r\n          </div>\r\n        )}\r\n      </FormContext.Consumer>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/core-react/form/Form.d.ts

@@ -4,11 +4,11 @@
 import "./Form.scss";
 import * as React from "react";
 /** The available editors for the fields in a [[Form]].
- * @public
+ * @public @deprecated
  */
 export declare type FieldEditor = "textbox" | "multilinetextbox" | "dropdown" | "checkbox";
 /** Interface used to define each [[Field]] in a [[Form]]
- * @public
+ * @public @deprecated
  */
 export interface FieldDef {
     label?: string;
@@ -19,13 +19,13 @@ export interface FieldDef {
     value?: any;
 }
 /** Key/value pairs for all the field values with key being the field HTML Id.
- * @public
+ * @public @deprecated
  */
 export interface FieldValues {
     [key: string]: any;
 }
 /** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.
- * @public
+ * @public @deprecated
  */
 interface FormState {
     values: FieldValues;
@@ -34,13 +34,13 @@ interface FormState {
 }
 /**
  * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.
- * @public
+ * @public @deprecate
  */
 export interface FormContextState extends FormState {
     setValues: (values: FieldValues) => void;
 }
 /** React context used by Form as a Provider and by the Fields as Consumers and updaters.
- * @public
+ * @public @deprecated
  */
 export declare const FormContext: React.Context<FormContextState | undefined>;
 /** Key/value pairs for all the field definitions to be displayed in a [[Form]].
@@ -112,7 +112,7 @@ export interface FormProps {
  *     </div >
  *   );
  * }
- * @public
+ * @public @deprecate
  */
 export declare class Form extends React.Component<FormProps, FormState> {
     private _submitButtonLabel;

package/lib/esm/core-react/form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;GAEG;AACH,oBAAY,WAAW,GAAG,SAAS,GAAG,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,QAAQ;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,WAAW,CAAC;IAGrB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAG/C,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,SAAS;IAEjB,MAAM,EAAE,WAAW,CAAC;IAGpB,QAAQ,EAAE,MAAM,CAAC;IAGjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,WAAW,6CAA+D,CAAC;AAGxF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iHAAiH;IACjH,gBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,wDAAwD;IACxD,MAAM,EAAE,gBAAgB,CAAC;IACzB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D,OAAO,CAAC,kBAAkB,CAA8C;IACxE,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,YAAY,CAAwC;gBAEhD,KAAK,EAAE,SAAS;IAa5B;;;OAGG;IACH,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,aAAa,CAgBnB;IAEc,MAAM;CA2BvB"}
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B;;GAEG;AACH,oBAAY,WAAW,GAAG,SAAS,GAAG,kBAAkB,GAAG,UAAU,GAAG,UAAU,CAAC;AAEnF;;GAEG;AACH,MAAM,WAAW,QAAQ;IAEvB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,MAAM,CAAC,EAAE,WAAW,CAAC;IAGrB,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,CAAC;IAG/C,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED;;GAEG;AACH,UAAU,SAAS;IAEjB,MAAM,EAAE,WAAW,CAAC;IAGpB,QAAQ,EAAE,MAAM,CAAC;IAGjB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,SAAS,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AAEH,eAAO,MAAM,WAAW,6CAA+D,CAAC;AAGxF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iHAAiH;IACjH,gBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACzD,wDAAwD;IACxD,MAAM,EAAE,gBAAgB,CAAC;IACzB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D,OAAO,CAAC,kBAAkB,CAA8C;IACxE,OAAO,CAAC,YAAY,CAAwC;IAC5D,OAAO,CAAC,YAAY,CAAwC;gBAEhD,KAAK,EAAE,SAAS;IAa5B;;;OAGG;IACH,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,UAAU,CAEhB;IAEF,OAAO,CAAC,aAAa,CAgBnB;IAEc,MAAM;CA2BvB"}

package/lib/esm/core-react/form/Form.js

@@ -2,6 +2,7 @@
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
+/* eslint-disable deprecation/deprecation */
 /** @packageDocumentation
  * @module Form
  */
@@ -11,7 +12,7 @@ import { UiCore } from "../UiCore";
 import { Field } from "./Field";
 import { Button } from "@itwin/itwinui-react";
 /** React context used by Form as a Provider and by the Fields as Consumers and updaters.
- * @public
+ * @public @deprecated
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const FormContext = React.createContext(undefined);
@@ -68,7 +69,7 @@ FormContext.displayName = "core-react:FormContext";
  *     </div >
  *   );
  * }
- * @public
+ * @public @deprecate
  */
 export class Form extends React.Component {
     constructor(props) {

package/lib/esm/core-react/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport \"./Form.scss\";\r\nimport * as React from \"react\";\r\nimport { UiCore } from \"../UiCore\";\r\nimport { Field } from \"./Field\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** The available editors for the fields in a [[Form]].\r\n * @public\r\n */\r\nexport type FieldEditor = \"textbox\" | \"multilinetextbox\" | \"dropdown\" | \"checkbox\";\r\n\r\n/** Interface used to define each [[Field]] in a [[Form]]\r\n * @public\r\n */\r\nexport interface FieldDef {\r\n  /* The label text for the field */\r\n  label?: string;\r\n\r\n  /* The editor for the field */\r\n  editor?: FieldEditor;\r\n\r\n  /* The drop down items for the field */\r\n  options?: string[] | { [key: string]: string };\r\n\r\n  /* The initial field value */\r\n  value?: any;\r\n}\r\n\r\n/** Key/value pairs for all the field values with key being the field HTML Id.\r\n * @public\r\n */\r\nexport interface FieldValues {\r\n  [key: string]: any;\r\n}\r\n\r\n/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.\r\n * @public\r\n */\r\ninterface FormState {\r\n  /* The field values */\r\n  values: FieldValues;\r\n\r\n  /* The errorMsg message return in catch of async submit button processing */\r\n  errorMsg: string;\r\n\r\n  /* Whether the form has been successfully submitted */\r\n  submitSuccess?: boolean;\r\n}\r\n\r\n/**\r\n * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.\r\n * @public\r\n */\r\nexport interface FormContextState extends FormState {\r\n  setValues: (values: FieldValues) => void;\r\n}\r\n\r\n/** React context used by Form as a Provider and by the Fields as Consumers and updaters.\r\n * @public\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const FormContext = React.createContext<FormContextState | undefined>(undefined);\r\nFormContext.displayName = \"core-react:FormContext\";\r\n\r\n/** Key/value pairs for all the field definitions to be displayed in a [[Form]].\r\n * @public\r\n */\r\nexport interface FieldDefinitions {\r\n  [key: string]: FieldDef;\r\n}\r\n\r\n/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.\r\n * @public\r\n */\r\nexport interface FormProps {\r\n  /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */\r\n  handleFormSubmit: (values: FieldValues) => Promise<void>;\r\n  /** Definition used to create each Field in the Form. */\r\n  fields: FieldDefinitions;\r\n  /** Optional label which will override default Submit button label. */\r\n  submitButtonLabel?: string;\r\n}\r\n\r\n/** Component used to create a Form using supplied properties to specify the fields of the Form.\r\n * @example\r\n * // Example of using a form as contents of a modal dialog.\r\n * export class ExampleForm extends React.Component {\r\n *   public static open() {\r\n *   const form = new ExampleForm({});\r\n *   ModalDialogManager.openDialog(form.render());\r\n * }\r\n *\r\n * protected async handleSubmit(values: FieldValues): Promise<void> {\r\n *   await this.processFormSubmission(values);\r\n *   ModalDialogManager.closeDialog();\r\n *   const msg = JSON.stringify(values);\r\n *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, \"Form Submitted\", msg));\r\n * }\r\n *\r\n * protected async processFormSubmission(values: FieldValues): Promise<void> {\r\n *   // if error occurs during async processing throw an Error and return error message back to form.\r\n *   throw new Error(\"Error processing form\");\r\n * }\r\n *\r\n * protected handleCancel() {\r\n *   ModalDialogManager.closeDialog();\r\n * }\r\n *\r\n * public render() {\r\n *   const fields: FieldDefinitions = {\r\n *     Name: {\r\n *       label: this._nameLabel,\r\n *       editor: \"textbox\",\r\n *       value: \"John Smith\",\r\n *     },\r\n *     PickList: {\r\n *       label: this._pickListLabel,\r\n *       editor: \"dropdown\",\r\n *       value: \"one\",\r\n *       options: [\"one\", \"two\", \"three\", \"four\"],\r\n *     },\r\n *   };\r\n *\r\n *   return (\r\n *     <div>\r\n *       <Dialog title=\"Example Form\"\r\n *         opened={true}\r\n *         onClose={() => this.handleCancel()}>\r\n *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}\r\n *           fields={fields}\r\n *         />\r\n *       </Dialog>\r\n *     </div >\r\n *   );\r\n * }\r\n * @public\r\n */\r\nexport class Form extends React.Component<FormProps, FormState> {\r\n  private _submitButtonLabel = UiCore.translate(\"form.submitButtonLabel\");\r\n  private _errorPrefix = UiCore.translate(\"form.errorPrefix\");\r\n  private _errorSuffix = UiCore.translate(\"form.errorSuffix\");\r\n\r\n  constructor(props: FormProps) {\r\n    super(props);\r\n\r\n    // set initial values for field values\r\n    const values: FieldValues = {};\r\n    Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);\r\n\r\n    this.state = {\r\n      errorMsg: \"\",\r\n      values,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Returns whether there is an errorMsg message in the state/context\r\n   * @param errorMsg - The form errorMsg\r\n   */\r\n  private haveError(errorMsg: string) {\r\n    return errorMsg && errorMsg.length;\r\n  }\r\n\r\n  private _setValues = (values: FieldValues) => {\r\n    this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));\r\n  };\r\n\r\n  private _handleSubmit = (event: React.FormEvent<HTMLFormElement>, values: FieldValues) => {\r\n    event.preventDefault();\r\n\r\n    // istanbul ignore next\r\n    if (!this.props.handleFormSubmit || !values || 0 === values.length)\r\n      throw new Error(\"A handleFormSubmit function and values must be defined\");\r\n\r\n    this.props.handleFormSubmit(values)\r\n      .then(() => {\r\n        // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the\r\n        // submission is successful.\r\n        // console.log(rtnMsg);\r\n      })\r\n      .catch((reason: Error) => {\r\n        this.setState({ submitSuccess: false, errorMsg: reason.message });\r\n      });\r\n  };\r\n\r\n  public override render() {\r\n    const { submitSuccess, errorMsg } = this.state;\r\n    const { fields, submitButtonLabel } = this.props;\r\n    const context: FormContextState = { ...this.state, setValues: this._setValues };\r\n\r\n    return (\r\n      <FormContext.Provider value={context}>\r\n        <div className=\"core-form-wrapper\">\r\n          <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => this._handleSubmit(event, this.state.values)} noValidate={true}>\r\n            <div className=\"core-form-container\">\r\n              {Object.keys(fields).map((key) => <Field key={key} id={key} {...this.props.fields[key]} />)}\r\n              <div className=\"core-form-footer\">\r\n                <div className=\"core-form-buttons\">\r\n                  <Button type=\"submit\" styleType=\"high-visibility\">\r\n                    {submitButtonLabel ? submitButtonLabel : this._submitButtonLabel}\r\n                  </Button>\r\n                </div>\r\n                {submitSuccess === false && this.haveError(errorMsg) && (\r\n                  <div className=\"core-form-alert\" role=\"alert\">{`${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`}</div>\r\n                )}\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </FormContext.Provider>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/core-react/form/Form.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module Form\r\n */\r\n\r\nimport \"./Form.scss\";\r\nimport * as React from \"react\";\r\nimport { UiCore } from \"../UiCore\";\r\nimport { Field } from \"./Field\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\n\r\n// cSpell:ignore multilinetextbox\r\n\r\n/** The available editors for the fields in a [[Form]].\r\n * @public @deprecated\r\n */\r\nexport type FieldEditor = \"textbox\" | \"multilinetextbox\" | \"dropdown\" | \"checkbox\";\r\n\r\n/** Interface used to define each [[Field]] in a [[Form]]\r\n * @public @deprecated\r\n */\r\nexport interface FieldDef {\r\n  /* The label text for the field */\r\n  label?: string;\r\n\r\n  /* The editor for the field */\r\n  editor?: FieldEditor;\r\n\r\n  /* The drop down items for the field */\r\n  options?: string[] | { [key: string]: string };\r\n\r\n  /* The initial field value */\r\n  value?: any;\r\n}\r\n\r\n/** Key/value pairs for all the field values with key being the field HTML Id.\r\n * @public @deprecated\r\n */\r\nexport interface FieldValues {\r\n  [key: string]: any;\r\n}\r\n\r\n/** The state data used by [[Form]] to hold state of each [[Field]] and the result of submit button processing.\r\n * @public @deprecated\r\n */\r\ninterface FormState {\r\n  /* The field values */\r\n  values: FieldValues;\r\n\r\n  /* The errorMsg message return in catch of async submit button processing */\r\n  errorMsg: string;\r\n\r\n  /* Whether the form has been successfully submitted */\r\n  submitSuccess?: boolean;\r\n}\r\n\r\n/**\r\n * FormContextState combines the Form's state data with the callbacks used to update the value of the state data.\r\n * @public @deprecate\r\n */\r\nexport interface FormContextState extends FormState {\r\n  setValues: (values: FieldValues) => void;\r\n}\r\n\r\n/** React context used by Form as a Provider and by the Fields as Consumers and updaters.\r\n * @public @deprecated\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const FormContext = React.createContext<FormContextState | undefined>(undefined);\r\nFormContext.displayName = \"core-react:FormContext\";\r\n\r\n/** Key/value pairs for all the field definitions to be displayed in a [[Form]].\r\n * @public\r\n */\r\nexport interface FieldDefinitions {\r\n  [key: string]: FieldDef;\r\n}\r\n\r\n/** Properties that define [[Form]] including the callback to be called when the Submit button is pressed.\r\n * @public\r\n */\r\nexport interface FormProps {\r\n  /** Required async callback the processes the Form data and throws and Error if the data cannot be processed.  */\r\n  handleFormSubmit: (values: FieldValues) => Promise<void>;\r\n  /** Definition used to create each Field in the Form. */\r\n  fields: FieldDefinitions;\r\n  /** Optional label which will override default Submit button label. */\r\n  submitButtonLabel?: string;\r\n}\r\n\r\n/** Component used to create a Form using supplied properties to specify the fields of the Form.\r\n * @example\r\n * // Example of using a form as contents of a modal dialog.\r\n * export class ExampleForm extends React.Component {\r\n *   public static open() {\r\n *   const form = new ExampleForm({});\r\n *   ModalDialogManager.openDialog(form.render());\r\n * }\r\n *\r\n * protected async handleSubmit(values: FieldValues): Promise<void> {\r\n *   await this.processFormSubmission(values);\r\n *   ModalDialogManager.closeDialog();\r\n *   const msg = JSON.stringify(values);\r\n *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, \"Form Submitted\", msg));\r\n * }\r\n *\r\n * protected async processFormSubmission(values: FieldValues): Promise<void> {\r\n *   // if error occurs during async processing throw an Error and return error message back to form.\r\n *   throw new Error(\"Error processing form\");\r\n * }\r\n *\r\n * protected handleCancel() {\r\n *   ModalDialogManager.closeDialog();\r\n * }\r\n *\r\n * public render() {\r\n *   const fields: FieldDefinitions = {\r\n *     Name: {\r\n *       label: this._nameLabel,\r\n *       editor: \"textbox\",\r\n *       value: \"John Smith\",\r\n *     },\r\n *     PickList: {\r\n *       label: this._pickListLabel,\r\n *       editor: \"dropdown\",\r\n *       value: \"one\",\r\n *       options: [\"one\", \"two\", \"three\", \"four\"],\r\n *     },\r\n *   };\r\n *\r\n *   return (\r\n *     <div>\r\n *       <Dialog title=\"Example Form\"\r\n *         opened={true}\r\n *         onClose={() => this.handleCancel()}>\r\n *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}\r\n *           fields={fields}\r\n *         />\r\n *       </Dialog>\r\n *     </div >\r\n *   );\r\n * }\r\n * @public @deprecate\r\n */\r\nexport class Form extends React.Component<FormProps, FormState> {\r\n  private _submitButtonLabel = UiCore.translate(\"form.submitButtonLabel\");\r\n  private _errorPrefix = UiCore.translate(\"form.errorPrefix\");\r\n  private _errorSuffix = UiCore.translate(\"form.errorSuffix\");\r\n\r\n  constructor(props: FormProps) {\r\n    super(props);\r\n\r\n    // set initial values for field values\r\n    const values: FieldValues = {};\r\n    Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);\r\n\r\n    this.state = {\r\n      errorMsg: \"\",\r\n      values,\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Returns whether there is an errorMsg message in the state/context\r\n   * @param errorMsg - The form errorMsg\r\n   */\r\n  private haveError(errorMsg: string) {\r\n    return errorMsg && errorMsg.length;\r\n  }\r\n\r\n  private _setValues = (values: FieldValues) => {\r\n    this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));\r\n  };\r\n\r\n  private _handleSubmit = (event: React.FormEvent<HTMLFormElement>, values: FieldValues) => {\r\n    event.preventDefault();\r\n\r\n    // istanbul ignore next\r\n    if (!this.props.handleFormSubmit || !values || 0 === values.length)\r\n      throw new Error(\"A handleFormSubmit function and values must be defined\");\r\n\r\n    this.props.handleFormSubmit(values)\r\n      .then(() => {\r\n        // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the\r\n        // submission is successful.\r\n        // console.log(rtnMsg);\r\n      })\r\n      .catch((reason: Error) => {\r\n        this.setState({ submitSuccess: false, errorMsg: reason.message });\r\n      });\r\n  };\r\n\r\n  public override render() {\r\n    const { submitSuccess, errorMsg } = this.state;\r\n    const { fields, submitButtonLabel } = this.props;\r\n    const context: FormContextState = { ...this.state, setValues: this._setValues };\r\n\r\n    return (\r\n      <FormContext.Provider value={context}>\r\n        <div className=\"core-form-wrapper\">\r\n          <form onSubmit={(event: React.FormEvent<HTMLFormElement>) => this._handleSubmit(event, this.state.values)} noValidate={true}>\r\n            <div className=\"core-form-container\">\r\n              {Object.keys(fields).map((key) => <Field key={key} id={key} {...this.props.fields[key]} />)}\r\n              <div className=\"core-form-footer\">\r\n                <div className=\"core-form-buttons\">\r\n                  <Button type=\"submit\" styleType=\"high-visibility\">\r\n                    {submitButtonLabel ? submitButtonLabel : this._submitButtonLabel}\r\n                  </Button>\r\n                </div>\r\n                {submitSuccess === false && this.haveError(errorMsg) && (\r\n                  <div className=\"core-form-alert\" role=\"alert\">{`${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`}</div>\r\n                )}\r\n              </div>\r\n            </div>\r\n          </form>\r\n        </div>\r\n      </FormContext.Provider>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/core-react/utils/UiEvent.d.ts

@@ -3,7 +3,7 @@
  */
 import { BeUiEvent } from "@itwin/core-bentley";
 /** iTwin.js UI UiEvent class is a subclass of BeEvent with argument type safety.
- * @public
+ * @public @deprecated Use UiEvent in appui-abstract instead
  */
 export declare class UiEvent<TEventArgs> extends BeUiEvent<TEventArgs> {
 }

package/lib/esm/core-react/utils/UiEvent.js

@@ -7,7 +7,7 @@
  */
 import { BeUiEvent } from "@itwin/core-bentley";
 /** iTwin.js UI UiEvent class is a subclass of BeEvent with argument type safety.
- * @public
+ * @public @deprecated Use UiEvent in appui-abstract instead
  */
 export class UiEvent extends BeUiEvent {
 }

package/lib/esm/core-react/utils/UiEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UiEvent.js","sourceRoot":"","sources":["../../../../src/core-react/utils/UiEvent.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;GAEG;AACH,MAAM,OAAO,OAAoB,SAAQ,SAAqB;CAAI","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Utilities\r\n */\r\n\r\nimport { BeUiEvent } from \"@itwin/core-bentley\";\r\n\r\n/** iTwin.js UI UiEvent class is a subclass of BeEvent with argument type safety.\r\n * @public\r\n */\r\nexport class UiEvent<TEventArgs> extends BeUiEvent<TEventArgs> { }\r\n"]}
+{"version":3,"file":"UiEvent.js","sourceRoot":"","sources":["../../../../src/core-react/utils/UiEvent.ts"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;GAEG;AACH,MAAM,OAAO,OAAoB,SAAQ,SAAqB;CAAI","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/** @packageDocumentation\r\n * @module Utilities\r\n */\r\n\r\nimport { BeUiEvent } from \"@itwin/core-bentley\";\r\n\r\n/** iTwin.js UI UiEvent class is a subclass of BeEvent with argument type safety.\r\n * @public @deprecated Use UiEvent in appui-abstract instead\r\n */\r\nexport class UiEvent<TEventArgs> extends BeUiEvent<TEventArgs> { }\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/core-react",
-  "version": "3.0.0-dev.147",
+  "version": "3.0.0-dev.148",
   "description": "iTwin.js UI core components",
   "main": "lib/cjs/core-react.js",
   "module": "lib/esm/core-react.js",
@@ -23,8 +23,8 @@
     "url": "http://www.bentley.com"
   },
   "peerDependencies": {
-    "@itwin/appui-abstract": "^3.0.0-dev.147",
-    "@itwin/core-bentley": "^3.0.0-dev.147",
+    "@itwin/appui-abstract": "^3.0.0-dev.148",
+    "@itwin/core-bentley": "^3.0.0-dev.148",
     "react": "^17.0.0",
     "react-dom": "^17.0.0"
   },
@@ -33,12 +33,12 @@
     "NOTE: All tools used by scripts in this package must be listed as devDependencies"
   ],
   "devDependencies": {
-    "@itwin/appui-abstract": "3.0.0-dev.147",
-    "@itwin/build-tools": "3.0.0-dev.147",
-    "@itwin/core-bentley": "3.0.0-dev.147",
-    "@itwin/core-common": "3.0.0-dev.147",
-    "@itwin/core-i18n": "3.0.0-dev.147",
-    "@itwin/eslint-plugin": "3.0.0-dev.147",
+    "@itwin/appui-abstract": "3.0.0-dev.148",
+    "@itwin/build-tools": "3.0.0-dev.148",
+    "@itwin/core-bentley": "3.0.0-dev.148",
+    "@itwin/core-common": "3.0.0-dev.148",
+    "@itwin/core-i18n": "3.0.0-dev.148",
+    "@itwin/eslint-plugin": "3.0.0-dev.148",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.2.1",