@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

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

@@ -0,0 +1,127 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Form
+ */
+import "./Form.scss";
+import * as React from "react";
+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
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const FormContext = React.createContext(undefined);
+FormContext.displayName = "core-react:FormContext";
+/** Component used to create a Form using supplied properties to specify the fields of the Form.
+ * @example
+ * // Example of using a form as contents of a modal dialog.
+ * export class ExampleForm extends React.Component {
+ *   public static open() {
+ *   const form = new ExampleForm({});
+ *   ModalDialogManager.openDialog(form.render());
+ * }
+ *
+ * protected async handleSubmit(values: FieldValues): Promise<void> {
+ *   await this.processFormSubmission(values);
+ *   ModalDialogManager.closeDialog();
+ *   const msg = JSON.stringify(values);
+ *   IModelApp.notifications.outputMessage(new NotifyMessageDetails(OutputMessagePriority.Info, "Form Submitted", msg));
+ * }
+ *
+ * protected async processFormSubmission(values: FieldValues): Promise<void> {
+ *   // if error occurs during async processing throw an Error and return error message back to form.
+ *   throw new Error("Error processing form");
+ * }
+ *
+ * protected handleCancel() {
+ *   ModalDialogManager.closeDialog();
+ * }
+ *
+ * public render() {
+ *   const fields: FieldDefinitions = {
+ *     Name: {
+ *       label: this._nameLabel,
+ *       editor: "textbox",
+ *       value: "John Smith",
+ *     },
+ *     PickList: {
+ *       label: this._pickListLabel,
+ *       editor: "dropdown",
+ *       value: "one",
+ *       options: ["one", "two", "three", "four"],
+ *     },
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <Dialog title="Example Form"
+ *         opened={true}
+ *         onClose={() => this.handleCancel()}>
+ *         <Form handleFormSubmit={(values: FieldValues) => this.handleSubmit(values)}
+ *           fields={fields}
+ *         />
+ *       </Dialog>
+ *     </div >
+ *   );
+ * }
+ * @public
+ */
+export class Form extends React.Component {
+    constructor(props) {
+        super(props);
+        this._submitButtonLabel = UiCore.translate("form.submitButtonLabel");
+        this._errorPrefix = UiCore.translate("form.errorPrefix");
+        this._errorSuffix = UiCore.translate("form.errorSuffix");
+        this._setValues = (values) => {
+            this.setState((prevState) => ({ values: { ...prevState.values, ...values } }));
+        };
+        this._handleSubmit = (event, values) => {
+            event.preventDefault();
+            // istanbul ignore next
+            if (!this.props.handleFormSubmit || !values || 0 === values.length)
+                throw new Error("A handleFormSubmit function and values must be defined");
+            this.props.handleFormSubmit(values)
+                .then(() => {
+                // Currently we don't need to do anything if successful. Typically the hosting dialog will close when the
+                // submission is successful.
+                // console.log(rtnMsg);
+            })
+                .catch((reason) => {
+                this.setState({ submitSuccess: false, errorMsg: reason.message });
+            });
+        };
+        // set initial values for field values
+        const values = {};
+        Object.keys(props.fields).forEach((key) => values[key] = props.fields[key].value);
+        this.state = {
+            errorMsg: "",
+            values,
+        };
+    }
+    /**
+     * Returns whether there is an errorMsg message in the state/context
+     * @param errorMsg - The form errorMsg
+     */
+    haveError(errorMsg) {
+        return errorMsg && errorMsg.length;
+    }
+    render() {
+        const { submitSuccess, errorMsg } = this.state;
+        const { fields, submitButtonLabel } = this.props;
+        const context = { ...this.state, setValues: this._setValues };
+        return (React.createElement(FormContext.Provider, { value: context },
+            React.createElement("div", { className: "core-form-wrapper" },
+                React.createElement("form", { onSubmit: (event) => this._handleSubmit(event, this.state.values), noValidate: true },
+                    React.createElement("div", { className: "core-form-container" },
+                        Object.keys(fields).map((key) => React.createElement(Field, { key: key, id: key, ...this.props.fields[key] })),
+                        React.createElement("div", { className: "core-form-footer" },
+                            React.createElement("div", { className: "core-form-buttons" },
+                                React.createElement(Button, { type: "submit", styleType: "high-visibility" }, submitButtonLabel ? submitButtonLabel : this._submitButtonLabel)),
+                            submitSuccess === false && this.haveError(errorMsg) && (React.createElement("div", { className: "core-form-alert", role: "alert" }, `${this._errorPrefix}-${errorMsg} ${this._errorSuffix}`))))))));
+    }
+}
+//# sourceMappingURL=Form.js.map

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

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

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

@@ -0,0 +1,78 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+@import "../inputs/variables";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+$text-font-size: $iui-font-size;
+$text-font-color: $buic-text-color;
+$button-font-size: $iui-font-size-leading;
+
+.core-form-wrapper {
+  padding: 8px;
+  padding-bottom: 0;
+ }
+
+.core-form-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 14px;
+}
+
+.core-form-label {
+  padding:                0;
+  padding-bottom:         4px;
+  margin:                 0;
+  border:                 0 none transparent;
+  display:                block;
+  font-size:              $text-font-size;
+  line-height:            $uicore-inputs-height;
+  text-align:             left;
+  color:                  $buic-text-color;
+}
+
+.core-form-input {
+  line-height:            $uicore-inputs-height;
+}
+
+.core-form-textarea {
+  line-height:             $uicore-inputs-height;
+}
+
+.core-form-select {
+  line-height:            $uicore-inputs-height;
+  height:                 $uicore-inputs-height * 1.27;
+  width:                  fit-content;
+  min-width:              20%;
+}
+
+.core-form-footer {
+  flex-shrink: 0;
+  padding-bottom: 0;
+
+  > .core-form-buttons {
+    display: flex;
+    justify-content: flex-end;
+
+    > * {
+      min-width: 80px;
+      font-size:              $button-font-size;
+
+      &:not(:first-child) {
+        margin-left: $uicore-inputs-margin;
+      }
+    }
+  }
+}
+
+.core-form-alert {
+  padding: 0.75rem;
+  margin-top: .5rem;
+  margin-bottom: .25rem;
+  border: 1px solid transparent;
+  border-radius: 0.25rem;
+  color: $buic-accessory-alert;
+  background-color: $buic-accessory-alert-tint;
+}

package/lib/esm/core-react/hocs/withIsPressed.d.ts

@@ -0,0 +1,78 @@
+/** @packageDocumentation
+ * @module Common
+ */
+import * as React from "react";
+/** Properties for [[withIsPressed]] React higher-order component
+ * @public
+ */
+export interface WithIsPressedProps {
+    /** initial value for pressed status */
+    isPressed?: boolean;
+    /** callback function for [isPressed] change */
+    onIsPressedChange?: (isPressed: boolean) => void;
+}
+/** withIsPressed is a React higher-order component that adds pointer and mouse events.
+ * @public
+ */
+export declare const withIsPressed: <ComponentProps extends {}>(Component: React.ComponentType<ComponentProps>) => {
+    new (props: (ComponentProps & WithIsPressedProps) | Readonly<ComponentProps & WithIsPressedProps>): {
+        handleOnPointerDown: () => void;
+        handleOnPointerUp: () => void;
+        handleOnMouseLeave: () => void;
+        changeIsPressed: (isPressed: boolean) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps & WithIsPressedProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ComponentProps & WithIsPressedProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ComponentProps & WithIsPressedProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<ComponentProps & WithIsPressedProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: ComponentProps & WithIsPressedProps, context: any): {
+        handleOnPointerDown: () => void;
+        handleOnPointerUp: () => void;
+        handleOnMouseLeave: () => void;
+        changeIsPressed: (isPressed: boolean) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps & WithIsPressedProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ComponentProps & WithIsPressedProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ComponentProps & WithIsPressedProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<ComponentProps & WithIsPressedProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps & WithIsPressedProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+//# sourceMappingURL=withIsPressed.d.ts.map

package/lib/esm/core-react/hocs/withIsPressed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withIsPressed.d.ts","sourceRoot":"","sources":["../../../../src/core-react/hocs/withIsPressed.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;qCAiBe,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAAP,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;CAwB/C,CAAC"}

package/lib/esm/core-react/hocs/withIsPressed.js

@@ -0,0 +1,43 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Common
+ */
+import * as React from "react";
+/** withIsPressed is a React higher-order component that adds pointer and mouse events.
+ * @public
+ */
+export const withIsPressed = (
+// eslint-disable-next-line @typescript-eslint/naming-convention
+Component) => {
+    return class WithIsPressed extends React.PureComponent {
+        constructor() {
+            super(...arguments);
+            this.handleOnPointerDown = () => {
+                this.changeIsPressed(true);
+            };
+            this.handleOnPointerUp = () => {
+                this.changeIsPressed(false);
+            };
+            this.handleOnMouseLeave = () => {
+                this.changeIsPressed(false);
+            };
+            this.changeIsPressed = (isPressed) => {
+                if (this.props.isPressed === isPressed)
+                    return;
+                this.props.onIsPressedChange && this.props.onIsPressedChange(isPressed);
+            };
+        }
+        render() {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { isPressed, onIsPressedChange, ...props } = this.props; // todo: better solution to rest object of intersected type
+            return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            React.createElement("div", { className: "withispressed-wrapper", onMouseDown: this.handleOnPointerDown, onMouseUp: this.handleOnPointerUp, onTouchStart: this.handleOnPointerDown, onTouchEnd: this.handleOnPointerUp, onMouseLeave: this.handleOnMouseLeave },
+                React.createElement(Component, { ...props, ...this.state })));
+        }
+    };
+};
+//# sourceMappingURL=withIsPressed.js.map

package/lib/esm/core-react/hocs/withIsPressed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withIsPressed.js","sourceRoot":"","sources":["../../../../src/core-react/hocs/withIsPressed.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;AAC3B,gEAAgE;AAChE,SAA8C,EAC9C,EAAE;IACF,OAAO,MAAM,aAAc,SAAQ,KAAK,CAAC,aAAkD;QAApF;;YACE,wBAAmB,GAAG,GAAG,EAAE;gBAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;YAC7B,CAAC,CAAC;YAEK,sBAAiB,GAAG,GAAG,EAAE;gBAC9B,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAC9B,CAAC,CAAC;YAEK,uBAAkB,GAAG,GAAG,EAAE;gBAC/B,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;YAC9B,CAAC,CAAC;YAEK,oBAAe,GAAG,CAAC,SAAkB,EAAE,EAAE;gBAC9C,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS;oBACpC,OAAO;gBAET,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;YAC1E,CAAC,CAAC;QAkBJ,CAAC;QAhBiB,MAAM;YACpB,6DAA6D;YAC7D,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,2DAA2D;YAC1H,OAAO;YACL,mEAAmE;YACnE,6BAAK,SAAS,EAAC,uBAAuB,EACpC,WAAW,EAAE,IAAI,CAAC,mBAAmB,EACrC,SAAS,EAAE,IAAI,CAAC,iBAAiB,EACjC,YAAY,EAAE,IAAI,CAAC,mBAAmB,EACtC,UAAU,EAAE,IAAI,CAAC,iBAAiB,EAClC,YAAY,EAAE,IAAI,CAAC,kBAAkB;gBAErC,oBAAC,SAAS,OAAK,KAAuB,KAAM,IAAI,CAAC,KAAK,GAAI,CACtD,CACP,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC,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 Common\n */\n\nimport * as React from \"react\";\n\n/** Properties for [[withIsPressed]] React higher-order component\n * @public\n */\nexport interface WithIsPressedProps {\n  /** initial value for pressed status */\n  isPressed?: boolean;\n  /** callback function for [isPressed] change */\n  onIsPressedChange?: (isPressed: boolean) => void;\n}\n\n/** withIsPressed is a React higher-order component that adds pointer and mouse events.\n * @public\n */\nexport const withIsPressed = <ComponentProps extends {}>(\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  Component: React.ComponentType<ComponentProps>,\n) => {\n  return class WithIsPressed extends React.PureComponent<ComponentProps & WithIsPressedProps> {\n    public handleOnPointerDown = () => {\n      this.changeIsPressed(true);\n    };\n\n    public handleOnPointerUp = () => {\n      this.changeIsPressed(false);\n    };\n\n    public handleOnMouseLeave = () => {\n      this.changeIsPressed(false);\n    };\n\n    public changeIsPressed = (isPressed: boolean) => {\n      if (this.props.isPressed === isPressed)\n        return;\n\n      this.props.onIsPressedChange && this.props.onIsPressedChange(isPressed);\n    };\n\n    public override render() {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { isPressed, onIsPressedChange, ...props } = this.props; // todo: better solution to rest object of intersected type\n      return (\n        // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n        <div className=\"withispressed-wrapper\"\n          onMouseDown={this.handleOnPointerDown}\n          onMouseUp={this.handleOnPointerUp}\n          onTouchStart={this.handleOnPointerDown}\n          onTouchEnd={this.handleOnPointerUp}\n          onMouseLeave={this.handleOnMouseLeave}\n        >\n          <Component {...props as ComponentProps} {...this.state} />\n        </div>\n      );\n    }\n  };\n};\n"]}

package/lib/esm/core-react/hocs/withOnOutsideClick.d.ts

@@ -0,0 +1,104 @@
+/** @packageDocumentation
+ * @module Common
+ */
+import * as React from "react";
+/** Properties for [[withOnOutsideClick]] React higher-order component
+ * @public
+ */
+export interface WithOnOutsideClickProps {
+    /** Outside click callback function */
+    onOutsideClick?: (event: MouseEvent) => any;
+    /** If false outside click processing and closing are skipped if click occurs in another Popup component, default to false. */
+    closeOnNestedPopupOutsideClick?: boolean;
+}
+/** withOnOutsideClick is a React higher-order component that adds outside click support.
+ * @public
+ */
+export declare const withOnOutsideClick: <ComponentProps extends {}>(Component: React.ComponentType<ComponentProps>, defaultOnOutsideClick?: ((event: MouseEvent) => any) | undefined, useCapture?: boolean, usePointerEvents?: boolean) => {
+    new (props: (ComponentProps & WithOnOutsideClickProps) | Readonly<ComponentProps & WithOnOutsideClickProps>): {
+        /** @internal */
+        outsideClickContainerDiv?: HTMLDivElement | null | undefined;
+        /** @internal */
+        isDownOutside: boolean;
+        /** @internal */
+        isInCorePopup(element: HTMLElement): boolean;
+        /** @internal */
+        onOutsideClick(e: MouseEvent): any;
+        /** @internal */
+        handleDocumentClick: (e: MouseEvent) => any;
+        /** @internal */
+        handleDocumentPointerDown: (e: PointerEvent) => void;
+        /** @internal */
+        handleDocumentPointerUp: (e: PointerEvent) => void;
+        handleOutsideClickContainerDivSet: (outsideClickContainerDiv: HTMLDivElement | null) => void;
+        getParentDocument(): Document;
+        componentDidMount(): void;
+        /** @internal */
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps & WithOnOutsideClickProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ComponentProps & WithOnOutsideClickProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ComponentProps & WithOnOutsideClickProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<ComponentProps & WithOnOutsideClickProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: ComponentProps & WithOnOutsideClickProps, context: any): {
+        /** @internal */
+        outsideClickContainerDiv?: HTMLDivElement | null | undefined;
+        /** @internal */
+        isDownOutside: boolean;
+        /** @internal */
+        isInCorePopup(element: HTMLElement): boolean;
+        /** @internal */
+        onOutsideClick(e: MouseEvent): any;
+        /** @internal */
+        handleDocumentClick: (e: MouseEvent) => any;
+        /** @internal */
+        handleDocumentPointerDown: (e: PointerEvent) => void;
+        /** @internal */
+        handleDocumentPointerUp: (e: PointerEvent) => void;
+        handleOutsideClickContainerDivSet: (outsideClickContainerDiv: HTMLDivElement | null) => void;
+        getParentDocument(): Document;
+        componentDidMount(): void;
+        /** @internal */
+        componentWillUnmount(): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<ComponentProps & WithOnOutsideClickProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<ComponentProps & WithOnOutsideClickProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<ComponentProps & WithOnOutsideClickProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<ComponentProps & WithOnOutsideClickProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<ComponentProps & WithOnOutsideClickProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+//# sourceMappingURL=withOnOutsideClick.d.ts.map

package/lib/esm/core-react/hocs/withOnOutsideClick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withOnOutsideClick.d.ts","sourceRoot":"","sources":["../../../../src/core-react/hocs/withOnOutsideClick.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,sCAAsC;IACtC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC;IAC5C,8HAA8H;IAC9H,8BAA8B,CAAC,EAAE,OAAO,CAAC;CAC1C;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,+GAGG,UAAU,KAAK,GAAG,4BACtC,OAAO,qBACD,OAAO;;QAGvB,gBAAgB;;QAEhB,gBAAgB;;QAGhB,gBAAgB;+BACc,WAAW,GAAG,OAAO;QAcnD,gBAAgB;0BACS,UAAU;QAcnC,gBAAgB;iCACiB,UAAU;QAO3C,gBAAgB;uCACuB,YAAY;QAQnD,gBAAgB;qCACqB,YAAY;sEAYqB,cAAc,GAAG,IAAI;;;QAiB3F,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;QAlFhB,gBAAgB;;QAEhB,gBAAgB;;QAGhB,gBAAgB;+BACc,WAAW,GAAG,OAAO;QAcnD,gBAAgB;0BACS,UAAU;QAcnC,gBAAgB;iCACiB,UAAU;QAO3C,gBAAgB;uCACuB,YAAY;QAQnD,gBAAgB;qCACqB,YAAY;sEAYqB,cAAc,GAAG,IAAI;;;QAiB3F,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;CAmBnB,CAAC"}

package/lib/esm/core-react/hocs/withOnOutsideClick.js

@@ -0,0 +1,109 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Common
+ */
+import * as React from "react";
+/** withOnOutsideClick is a React higher-order component that adds outside click support.
+ * @public
+ */
+export const withOnOutsideClick = (
+// eslint-disable-next-line @typescript-eslint/naming-convention
+Component, defaultOnOutsideClick, useCapture = true, usePointerEvents = true) => {
+    return class WithOnOutsideClick extends React.PureComponent {
+        constructor() {
+            super(...arguments);
+            /** @internal */
+            this.outsideClickContainerDiv = null;
+            /** @internal */
+            this.isDownOutside = false;
+            /** @internal */
+            this.handleDocumentClick = (e) => {
+                if (!this.outsideClickContainerDiv || !(e.target instanceof Node) || this.outsideClickContainerDiv.contains(e.target))
+                    return;
+                return this.onOutsideClick(e);
+            };
+            /** @internal */
+            this.handleDocumentPointerDown = (e) => {
+                this.isDownOutside = true;
+                if (this.outsideClickContainerDiv) {
+                    // typically e.target test for instance of Node, but this is not working from pop out windows
+                    this.isDownOutside = !!e.target && !this.outsideClickContainerDiv.contains(e.target);
+                }
+            };
+            /** @internal */
+            this.handleDocumentPointerUp = (e) => {
+                let isUpOutside = true;
+                if (this.outsideClickContainerDiv) {
+                    // typically e.target test for instance of Node, but this is not working from pop out windows
+                    isUpOutside = !!e.target && !this.outsideClickContainerDiv.contains(e.target);
+                }
+                const isOutsideClick = isUpOutside && this.isDownOutside;
+                this.isDownOutside = false;
+                isOutsideClick && this.onOutsideClick(e);
+            };
+            this.handleOutsideClickContainerDivSet = (outsideClickContainerDiv) => {
+                this.outsideClickContainerDiv = outsideClickContainerDiv;
+            };
+        }
+        /** @internal */
+        isInCorePopup(element) {
+            if (element.nodeName === "DIV") {
+                if (element.classList && element.classList.contains("core-popup"))
+                    return true;
+                if (element.parentElement && this.isInCorePopup(element.parentElement))
+                    return true;
+            }
+            else {
+                // istanbul ignore else
+                if (element.parentElement && this.isInCorePopup(element.parentElement))
+                    return true;
+            }
+            return false;
+        }
+        /** @internal */
+        onOutsideClick(e) {
+            // istanbul ignore else
+            if (e.target instanceof Node && e.target.nodeType === Node.ELEMENT_NODE) {
+                // istanbul ignore else
+                if (!this.props.closeOnNestedPopupOutsideClick && this.isInCorePopup(e.target))
+                    return;
+            }
+            if (this.props.onOutsideClick)
+                return this.props.onOutsideClick(e);
+            else if (defaultOnOutsideClick)
+                return defaultOnOutsideClick(e);
+        }
+        getParentDocument() {
+            var _a, _b;
+            return (_b = (_a = this.outsideClickContainerDiv) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
+        }
+        componentDidMount() {
+            const outsideClickParentDocument = this.getParentDocument();
+            if (usePointerEvents) {
+                outsideClickParentDocument.addEventListener("pointerdown", this.handleDocumentPointerDown, useCapture);
+                outsideClickParentDocument.addEventListener("pointerup", this.handleDocumentPointerUp, useCapture);
+            }
+            else
+                outsideClickParentDocument.addEventListener("click", this.handleDocumentClick, useCapture);
+        }
+        /** @internal */
+        componentWillUnmount() {
+            const outsideClickParentDocument = this.getParentDocument();
+            if (usePointerEvents) {
+                outsideClickParentDocument.removeEventListener("pointerdown", this.handleDocumentPointerDown, useCapture);
+                outsideClickParentDocument.removeEventListener("pointerup", this.handleDocumentPointerUp, useCapture);
+            }
+            else
+                outsideClickParentDocument.removeEventListener("click", this.handleDocumentClick, useCapture);
+        }
+        render() {
+            const { onOutsideClick, closeOnNestedPopupOutsideClick, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars
+            return (React.createElement("div", { ref: this.handleOutsideClickContainerDivSet },
+                React.createElement(Component, { ...props })));
+        }
+    };
+};
+//# sourceMappingURL=withOnOutsideClick.js.map

package/lib/esm/core-react/hocs/withOnOutsideClick.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withOnOutsideClick.js","sourceRoot":"","sources":["../../../../src/core-react/hocs/withOnOutsideClick.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 Common\n */\n\nimport * as React from \"react\";\n\n/** Properties for [[withOnOutsideClick]] React higher-order component\n * @public\n */\nexport interface WithOnOutsideClickProps {\n  /** Outside click callback function */\n  onOutsideClick?: (event: MouseEvent) => any;\n  /** If false outside click processing and closing are skipped if click occurs in another Popup component, default to false. */\n  closeOnNestedPopupOutsideClick?: boolean;\n}\n\n/** withOnOutsideClick is a React higher-order component that adds outside click support.\n * @public\n */\nexport const withOnOutsideClick = <ComponentProps extends {}>(\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  Component: React.ComponentType<ComponentProps>,\n  defaultOnOutsideClick?: (event: MouseEvent) => any,\n  useCapture: boolean = true,\n  usePointerEvents: boolean = true,\n) => {\n  return class WithOnOutsideClick extends React.PureComponent<ComponentProps & WithOnOutsideClickProps> {\n    /** @internal */\n    public outsideClickContainerDiv?: HTMLDivElement | null = null;\n    /** @internal */\n    public isDownOutside = false;\n\n    /** @internal */\n    public isInCorePopup(element: HTMLElement): boolean {\n      if (element.nodeName === \"DIV\") {\n        if (element.classList && element.classList.contains(\"core-popup\"))\n          return true;\n        if (element.parentElement && this.isInCorePopup(element.parentElement))\n          return true;\n      } else {\n        // istanbul ignore else\n        if (element.parentElement && this.isInCorePopup(element.parentElement))\n          return true;\n      }\n      return false;\n    }\n\n    /** @internal */\n    public onOutsideClick(e: MouseEvent) {\n      // istanbul ignore else\n      if (e.target instanceof Node && e.target.nodeType === Node.ELEMENT_NODE) {\n        // istanbul ignore else\n        if (!this.props.closeOnNestedPopupOutsideClick && this.isInCorePopup(e.target as HTMLElement))\n          return;\n      }\n\n      if (this.props.onOutsideClick)\n        return this.props.onOutsideClick(e);\n      else if (defaultOnOutsideClick)\n        return defaultOnOutsideClick(e);\n    }\n\n    /** @internal */\n    public handleDocumentClick = (e: MouseEvent) => {\n      if (!this.outsideClickContainerDiv || !(e.target instanceof Node) || this.outsideClickContainerDiv.contains(e.target))\n        return;\n\n      return this.onOutsideClick(e);\n    };\n\n    /** @internal */\n    public handleDocumentPointerDown = (e: PointerEvent) => {\n      this.isDownOutside = true;\n      if (this.outsideClickContainerDiv) {\n        // typically e.target test for instance of Node, but this is not working from pop out windows\n        this.isDownOutside = !!e.target && !this.outsideClickContainerDiv.contains(e.target as any);\n      }\n    };\n\n    /** @internal */\n    public handleDocumentPointerUp = (e: PointerEvent) => {\n      let isUpOutside = true;\n      if (this.outsideClickContainerDiv) {\n        // typically e.target test for instance of Node, but this is not working from pop out windows\n        isUpOutside = !!e.target && !this.outsideClickContainerDiv.contains(e.target as any);\n      }\n\n      const isOutsideClick = isUpOutside && this.isDownOutside;\n      this.isDownOutside = false;\n      isOutsideClick && this.onOutsideClick(e);\n    };\n\n    public handleOutsideClickContainerDivSet = (outsideClickContainerDiv: HTMLDivElement | null) => {\n      this.outsideClickContainerDiv = outsideClickContainerDiv;\n    };\n\n    public getParentDocument() {\n      return this.outsideClickContainerDiv?.ownerDocument ?? document;\n    }\n\n    public override componentDidMount() {\n      const outsideClickParentDocument = this.getParentDocument();\n      if (usePointerEvents) {\n        outsideClickParentDocument.addEventListener(\"pointerdown\", this.handleDocumentPointerDown, useCapture);\n        outsideClickParentDocument.addEventListener(\"pointerup\", this.handleDocumentPointerUp, useCapture);\n      } else\n        outsideClickParentDocument.addEventListener(\"click\", this.handleDocumentClick, useCapture);\n    }\n\n    /** @internal */\n    public override componentWillUnmount() {\n      const outsideClickParentDocument = this.getParentDocument();\n      if (usePointerEvents) {\n        outsideClickParentDocument.removeEventListener(\"pointerdown\", this.handleDocumentPointerDown, useCapture);\n        outsideClickParentDocument.removeEventListener(\"pointerup\", this.handleDocumentPointerUp, useCapture);\n      } else\n        outsideClickParentDocument.removeEventListener(\"click\", this.handleDocumentClick, useCapture);\n    }\n\n    public override render() {\n      const { onOutsideClick, closeOnNestedPopupOutsideClick, ...props } = this.props; // eslint-disable-line @typescript-eslint/no-unused-vars\n      return (\n        <div ref={this.handleOutsideClickContainerDivSet}>\n          <Component {...props as ComponentProps} />\n        </div>\n      );\n    }\n  };\n};\n"]}