@itwin/components-react 4.0.0-dev.8 → 4.0.0

package/lib/esm/components-react/editors/PopupButton.js

@@ -1,86 +1,88 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import "./PopupButton.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { RelativePosition, SpecialKey } from "@itwin/appui-abstract";
-import { Div, Icon, Popup, UiCore } from "@itwin/core-react";
-import { Button } from "@itwin/itwinui-react";
-/** PopupButton React component that is a button and property editor popup host
- * @alpha
- */
-export class PopupButton extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._buttonRef = React.createRef();
-        /** @internal */
-        this.state = {
-            showPopup: false,
-        };
-        this._togglePopup = (event) => {
-            this.setState((prevState) => ({ showPopup: !prevState.showPopup }), () => this.props.onClick && this.props.onClick(event));
-        };
-        this._closePopup = () => {
-            this.setState({ showPopup: false }, () => {
-                this.props.onClose && this.props.onClose();
-                // istanbul ignore else
-                if (this._buttonRef.current)
-                    this._buttonRef.current.focus();
-            });
-        };
-        this._handleKeyDown = (event) => {
-            // istanbul ignore else
-            if ((event.key === SpecialKey.ArrowDown || event.key === SpecialKey.Space || event.key === SpecialKey.Enter) && !this.state.showPopup) {
-                event.preventDefault();
-                event.stopPropagation();
-                this.setState({ showPopup: true });
-            }
-        };
-    }
-    /** @internal */
-    componentDidMount() {
-        if (this.props.setFocus && this._buttonRef.current)
-            this._buttonRef.current.focus();
-    }
-    closePopup() {
-        this._closePopup();
-    }
-    /** @internal */
-    render() {
-        var _a, _b, _c;
-        const showArrow = (_a = this.props.showArrow) !== null && _a !== void 0 ? _a : false;
-        const showShadow = (_b = this.props.showShadow) !== null && _b !== void 0 ? _b : false;
-        const moveFocus = (_c = this.props.moveFocus) !== null && _c !== void 0 ? _c : true;
-        const showPlaceholder = this.props.label === undefined && this.props.placeholder !== undefined;
-        const classNames = classnames("components-popup-button", this.state.showPopup && "components-popup-expanded");
-        const valueClassNames = classnames("components-popup-button-value", showPlaceholder && "components-popup-button-placeholder");
-        return (React.createElement("div", { className: this.props.className },
-            React.createElement("div", { className: classNames, onClick: this._togglePopup, onKeyDown: this._handleKeyDown, "data-testid": "components-popup-button", tabIndex: 0, ref: this._buttonRef, title: this.props.title, role: "button" },
-                React.createElement("div", { className: valueClassNames }, this.props.label || this.props.placeholder),
-                React.createElement("div", { className: "components-popup-button-arrow" },
-                    React.createElement("div", { className: classnames("components-popup-button-arrow-icon", "icon", "icon-chevron-down") }))),
-            React.createElement(Popup, { className: "components-popup-button-popup", isOpen: this.state.showPopup, position: RelativePosition.Bottom, onClose: this._closePopup, onEnter: this.props.onEnter, closeOnEnter: this.props.closeOnEnter, target: this._buttonRef.current, showArrow: showArrow, showShadow: showShadow, moveFocus: moveFocus, focusTarget: this.props.focusTarget }, this.props.children)));
-    }
-}
-/** Popup content with padding
- * @alpha
- */
-export function PopupContent(props) {
-    return React.createElement(Div, { ...props, mainClassName: "components-editor-popup-content" });
-}
-/** OK/Cancel Buttons
- * @alpha
- */
-export function PopupOkCancelButtons(props) {
-    return (React.createElement("div", { className: "components-popup-bottom-buttons" },
-        React.createElement(Button, { className: classnames("components-popup-large-button", "components-popup-ok-button"), "data-testid": "components-popup-ok-button", styleType: "cta", title: UiCore.translate("dialog.ok"), onClick: props.onOk },
-            React.createElement(Icon, { iconSpec: "icon-checkmark" })),
-        React.createElement(Button, { className: classnames("components-popup-large-button", "components-popup-cancel-button"), "data-testid": "components-popup-cancel-button", title: UiCore.translate("dialog.cancel"), onClick: props.onCancel },
-            React.createElement(Icon, { iconSpec: "icon-remove" }))));
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import "./PopupButton.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { RelativePosition, SpecialKey } from "@itwin/appui-abstract";
+import { Div, Icon, Popup, UiCore } from "@itwin/core-react";
+import { Button } from "@itwin/itwinui-react";
+import { SvgCheckmark, SvgChevronDown, SvgRemove } from "@itwin/itwinui-icons-react";
+/** PopupButton React component that is a button and property editor popup host
+ * @alpha
+ */
+export class PopupButton extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._buttonRef = React.createRef();
+        /** @internal */
+        this.state = {
+            showPopup: false,
+        };
+        this._togglePopup = (event) => {
+            this.setState((prevState) => ({ showPopup: !prevState.showPopup }), () => this.props.onClick && this.props.onClick(event));
+        };
+        this._closePopup = () => {
+            this.setState({ showPopup: false }, () => {
+                this.props.onClose && this.props.onClose();
+                // istanbul ignore else
+                if (this._buttonRef.current)
+                    this._buttonRef.current.focus();
+            });
+        };
+        this._handleKeyDown = (event) => {
+            // istanbul ignore else
+            if ((event.key === SpecialKey.ArrowDown || event.key === SpecialKey.Space || event.key === SpecialKey.Enter) && !this.state.showPopup) {
+                event.preventDefault();
+                event.stopPropagation();
+                this.setState({ showPopup: true });
+            }
+        };
+    }
+    /** @internal */
+    componentDidMount() {
+        if (this.props.setFocus && this._buttonRef.current)
+            this._buttonRef.current.focus();
+    }
+    closePopup() {
+        this._closePopup();
+    }
+    /** @internal */
+    render() {
+        var _a, _b, _c;
+        const showArrow = (_a = this.props.showArrow) !== null && _a !== void 0 ? _a : false;
+        const showShadow = (_b = this.props.showShadow) !== null && _b !== void 0 ? _b : false;
+        const moveFocus = (_c = this.props.moveFocus) !== null && _c !== void 0 ? _c : true;
+        const showPlaceholder = this.props.label === undefined && this.props.placeholder !== undefined;
+        const classNames = classnames("components-popup-button", this.state.showPopup && "components-popup-expanded");
+        const valueClassNames = classnames("components-popup-button-value", showPlaceholder && "components-popup-button-placeholder");
+        return (React.createElement("div", { className: this.props.className },
+            React.createElement("div", { className: classNames, onClick: this._togglePopup, onKeyDown: this._handleKeyDown, "data-testid": "components-popup-button", tabIndex: 0, ref: this._buttonRef, title: this.props.title, role: "button" },
+                React.createElement("div", { className: valueClassNames }, this.props.label || this.props.placeholder),
+                React.createElement("div", { className: "components-popup-button-arrow" },
+                    React.createElement("div", { className: classnames("components-popup-button-arrow-icon", "icon") },
+                        React.createElement(Icon, { iconSpec: React.createElement(SvgChevronDown, null) })))),
+            React.createElement(Popup, { className: "components-popup-button-popup", isOpen: this.state.showPopup, position: RelativePosition.Bottom, onClose: this._closePopup, onEnter: this.props.onEnter, closeOnEnter: this.props.closeOnEnter, target: this._buttonRef.current, showArrow: showArrow, showShadow: showShadow, moveFocus: moveFocus, focusTarget: this.props.focusTarget }, this.props.children)));
+    }
+}
+/** Popup content with padding
+ * @alpha
+ */
+export function PopupContent(props) {
+    return React.createElement(Div, { ...props, mainClassName: "components-editor-popup-content" });
+}
+/** OK/Cancel Buttons
+ * @alpha
+ */
+export function PopupOkCancelButtons(props) {
+    return (React.createElement("div", { className: "components-popup-bottom-buttons" },
+        React.createElement(Button, { className: classnames("components-popup-large-button", "components-popup-ok-button"), "data-testid": "components-popup-ok-button", styleType: "cta", title: UiCore.translate("dialog.ok"), onClick: props.onOk },
+            React.createElement(Icon, { iconSpec: React.createElement(SvgCheckmark, null) })),
+        React.createElement(Button, { className: classnames("components-popup-large-button", "components-popup-cancel-button"), "data-testid": "components-popup-cancel-button", title: UiCore.translate("dialog.cancel"), onClick: props.onCancel },
+            React.createElement(Icon, { iconSpec: React.createElement(SvgRemove, null) }))));
+}
 //# sourceMappingURL=PopupButton.js.map

package/lib/esm/components-react/editors/PopupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/editors/PopupButton.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAA+B,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC1F,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AA0C9C;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,KAAK,CAAC,aAAiD;IAAxF;;QACU,eAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAEvD,gBAAgB;QACS,UAAK,GAA+B;YAC3D,SAAS,EAAE,KAAK;SACjB,CAAC;QAQM,iBAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;YACjD,IAAI,CAAC,QAAQ,CACX,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,EACpD,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;QAC3D,CAAC,CAAC;QAMM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CACX,EAAE,SAAS,EAAE,KAAK,EAAE,EACpB,GAAG,EAAE;gBACH,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;gBAE3C,uBAAuB;gBACvB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO;oBACzB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YACpC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC;QAEM,mBAAc,GAAG,CAAC,KAA0B,EAAE,EAAE;YACtD,uBAAuB;YACvB,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;gBACrI,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;aACpC;QACH,CAAC,CAAC;IAgDJ,CAAC;IAnFC,gBAAgB;IACA,iBAAiB;QAC/B,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO;YAChD,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACpC,CAAC;IAQM,UAAU;QACf,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAuBD,gBAAgB;IACA,MAAM;;QACpB,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,mCAAI,KAAK,CAAC;QAChD,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,UAAU,mCAAI,KAAK,CAAC;QAClD,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,SAAS,mCAAI,IAAI,CAAC;QAC/C,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC;QAE/F,MAAM,UAAU,GAAG,UAAU,CAC3B,yBAAyB,EACzB,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,2BAA2B,CACpD,CAAC;QAEF,MAAM,eAAe,GAAG,UAAU,CAChC,+BAA+B,EAC/B,eAAe,IAAI,qCAAqC,CACzD,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;YAClC,6BAAK,SAAS,EAAE,UAAU,EACxB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,cAAc,iBAClB,yBAAyB,EACrC,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,IAAI,EAAC,QAAQ;gBAEb,6BAAK,SAAS,EAAE,eAAe,IAC5B,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,CACvC;gBACN,6BAAK,SAAS,EAAE,+BAA+B;oBAC7C,6BAAK,SAAS,EAAE,UAAU,CAAC,oCAAoC,EAAE,MAAM,EAAE,mBAAmB,CAAC,GAAI,CAC7F,CACF;YACN,oBAAC,KAAK,IAAC,SAAS,EAAC,+BAA+B,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,gBAAgB,CAAC,MAAM,EAC9G,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,EAC9H,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAC5C,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,IAExD,IAAI,CAAC,KAAK,CAAC,QAAQ,CACd,CACJ,CAEP,CAAC;IACJ,CAAC;CACF;AAED;;GAEG;AACH,MAAM,UAAU,YAAY,CAAC,KAAqB;IAChD,OAAO,oBAAC,GAAG,OAAK,KAAK,EAAE,aAAa,EAAC,iCAAiC,GAAG,CAAC;AAC5E,CAAC;AAUD;;GAEG;AACH,MAAM,UAAU,oBAAoB,CAAC,KAAoB;IACvD,OAAO,CACL,6BAAK,SAAS,EAAC,iCAAiC;QAC9C,oBAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE,4BAA4B,CAAC,iBACxE,4BAA4B,EACxC,SAAS,EAAC,KAAK,EACf,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,EACpC,OAAO,EAAE,KAAK,CAAC,IAAI;YAEnB,oBAAC,IAAI,IAAC,QAAQ,EAAC,gBAAgB,GAAG,CAC3B;QACT,oBAAC,MAAM,IACL,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE,gCAAgC,CAAC,iBAC5E,gCAAgC,EAC5C,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,EACxC,OAAO,EAAE,KAAK,CAAC,QAAQ;YAEvB,oBAAC,IAAI,IAAC,QAAQ,EAAC,aAAa,GAAG,CACxB,CACL,CACP,CAAC;AACJ,CAAC","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 PropertyEditors\r\n */\r\n\r\nimport \"./PopupButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonDivProps, CommonProps, Div, Icon, Popup, UiCore } from \"@itwin/core-react\";\r\nimport { Button } from \"@itwin/itwinui-react\";\r\n\r\n/** Properties for [[PopupButton]] component\r\n * @alpha\r\n */\r\nexport interface PopupButtonProps extends CommonProps {\r\n  /** Label to display in click area. */\r\n  label?: string | React.ReactNode;\r\n  /* Placeholder text used when there is no label yet */\r\n  placeholder?: string;\r\n  /** Contents of the popup */\r\n  children: React.ReactNode;\r\n  /** Title to display as tooltip. */\r\n  title?: string;\r\n\r\n  /** Set focus to popup - default is to set focus */\r\n  moveFocus?: boolean;\r\n  /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */\r\n  focusTarget?: React.RefObject<HTMLElement> | string;\r\n\r\n  /** Show or hide the box shadow (defaults to false) */\r\n  showShadow?: boolean;\r\n  /** Show or hide the arrow (defaults to false) */\r\n  showArrow?: boolean;\r\n  /** Indicates whether to set focus to the input element */\r\n  setFocus?: boolean;\r\n  /** Indicates whether to close the popup when Enter is pressed (defaults to true) */\r\n  closeOnEnter?: boolean;\r\n\r\n  /** Listens for click events on button area */\r\n  onClick?: (event: React.MouseEvent) => void;\r\n  /** Listens for popup close events */\r\n  onClose?: () => void;\r\n  /** Listens for Enter key in popup */\r\n  onEnter?: () => void;\r\n}\r\n\r\n/** @internal */\r\ninterface PopupButtonState {\r\n  showPopup: boolean;\r\n}\r\n\r\n/** PopupButton React component that is a button and property editor popup host\r\n * @alpha\r\n */\r\nexport class PopupButton extends React.PureComponent<PopupButtonProps, PopupButtonState> {\r\n  private _buttonRef = React.createRef<HTMLDivElement>();\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<PopupButtonState> = {\r\n    showPopup: false,\r\n  };\r\n\r\n  /** @internal */\r\n  public override componentDidMount() {\r\n    if (this.props.setFocus && this._buttonRef.current)\r\n      this._buttonRef.current.focus();\r\n  }\r\n\r\n  private _togglePopup = (event: React.MouseEvent) => {\r\n    this.setState(\r\n      (prevState) => ({ showPopup: !prevState.showPopup }),\r\n      () => this.props.onClick && this.props.onClick(event));\r\n  };\r\n\r\n  public closePopup() {\r\n    this._closePopup();\r\n  }\r\n\r\n  private _closePopup = () => {\r\n    this.setState(\r\n      { showPopup: false },\r\n      () => {\r\n        this.props.onClose && this.props.onClose();\r\n\r\n        // istanbul ignore else\r\n        if (this._buttonRef.current)\r\n          this._buttonRef.current.focus();\r\n      });\r\n  };\r\n\r\n  private _handleKeyDown = (event: React.KeyboardEvent) => {\r\n    // istanbul ignore else\r\n    if ((event.key === SpecialKey.ArrowDown || event.key === SpecialKey.Space || event.key === SpecialKey.Enter) && !this.state.showPopup) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.setState({ showPopup: true });\r\n    }\r\n  };\r\n\r\n  /** @internal */\r\n  public override render(): React.ReactNode {\r\n    const showArrow = this.props.showArrow ?? false;\r\n    const showShadow = this.props.showShadow ?? false;\r\n    const moveFocus = this.props.moveFocus ?? true;\r\n    const showPlaceholder = this.props.label === undefined && this.props.placeholder !== undefined;\r\n\r\n    const classNames = classnames(\r\n      \"components-popup-button\",\r\n      this.state.showPopup && \"components-popup-expanded\",\r\n    );\r\n\r\n    const valueClassNames = classnames(\r\n      \"components-popup-button-value\",\r\n      showPlaceholder && \"components-popup-button-placeholder\",\r\n    );\r\n\r\n    return (\r\n      <div className={this.props.className}>\r\n        <div className={classNames}\r\n          onClick={this._togglePopup}\r\n          onKeyDown={this._handleKeyDown}\r\n          data-testid=\"components-popup-button\"\r\n          tabIndex={0}\r\n          ref={this._buttonRef}\r\n          title={this.props.title}\r\n          role=\"button\"\r\n        >\r\n          <div className={valueClassNames}>\r\n            {this.props.label || this.props.placeholder}\r\n          </div>\r\n          <div className={\"components-popup-button-arrow\"}>\r\n            <div className={classnames(\"components-popup-button-arrow-icon\", \"icon\", \"icon-chevron-down\")} />\r\n          </div>\r\n        </div>\r\n        <Popup className=\"components-popup-button-popup\" isOpen={this.state.showPopup} position={RelativePosition.Bottom}\r\n          onClose={this._closePopup} onEnter={this.props.onEnter} closeOnEnter={this.props.closeOnEnter} target={this._buttonRef.current}\r\n          showArrow={showArrow} showShadow={showShadow}\r\n          moveFocus={moveFocus} focusTarget={this.props.focusTarget}\r\n        >\r\n          {this.props.children}\r\n        </Popup>\r\n      </div>\r\n\r\n    );\r\n  }\r\n}\r\n\r\n/** Popup content with padding\r\n * @alpha\r\n */\r\nexport function PopupContent(props: CommonDivProps) {\r\n  return <Div {...props} mainClassName=\"components-editor-popup-content\" />;\r\n}\r\n\r\n/** Properties for [[PopupOkCancelButtons]] component\r\n * @alpha\r\n */\r\nexport interface OkCancelProps {\r\n  onOk: (event: React.MouseEvent) => void;\r\n  onCancel: (event: React.MouseEvent) => void;\r\n}\r\n\r\n/** OK/Cancel Buttons\r\n * @alpha\r\n */\r\nexport function PopupOkCancelButtons(props: OkCancelProps) {\r\n  return (\r\n    <div className=\"components-popup-bottom-buttons\">\r\n      <Button\r\n        className={classnames(\"components-popup-large-button\", \"components-popup-ok-button\")}\r\n        data-testid=\"components-popup-ok-button\"\r\n        styleType=\"cta\"\r\n        title={UiCore.translate(\"dialog.ok\")}\r\n        onClick={props.onOk}\r\n      >\r\n        <Icon iconSpec=\"icon-checkmark\" />\r\n      </Button>\r\n      <Button\r\n        className={classnames(\"components-popup-large-button\", \"components-popup-cancel-button\")}\r\n        data-testid=\"components-popup-cancel-button\"\r\n        title={UiCore.translate(\"dialog.cancel\")}\r\n        onClick={props.onCancel}\r\n      >\r\n        <Icon iconSpec=\"icon-remove\" />\r\n      </Button>\r\n    </div>\r\n  );\r\n}\r\n"]}
+{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/editors/PopupButton.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 PropertyEditors\n */\n\nimport \"./PopupButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\nimport { CommonDivProps, CommonProps, Div, Icon, Popup, UiCore } from \"@itwin/core-react\";\nimport { Button } from \"@itwin/itwinui-react\";\nimport { SvgCheckmark, SvgChevronDown, SvgRemove } from \"@itwin/itwinui-icons-react\";\n\n/** Properties for [[PopupButton]] component\n * @alpha\n */\nexport interface PopupButtonProps extends CommonProps {\n  /** Label to display in click area. */\n  label?: string | React.ReactNode;\n  /* Placeholder text used when there is no label yet */\n  placeholder?: string;\n  /** Contents of the popup */\n  children: React.ReactNode;\n  /** Title to display as tooltip. */\n  title?: string;\n\n  /** Set focus to popup - default is to set focus */\n  moveFocus?: boolean;\n  /** Element to receive focus, specified by React.RefObject or CSS selector string. If undefined and moveFocus is true then focus is moved to first focusable element. */\n  focusTarget?: React.RefObject<HTMLElement> | string;\n\n  /** Show or hide the box shadow (defaults to false) */\n  showShadow?: boolean;\n  /** Show or hide the arrow (defaults to false) */\n  showArrow?: boolean;\n  /** Indicates whether to set focus to the input element */\n  setFocus?: boolean;\n  /** Indicates whether to close the popup when Enter is pressed (defaults to true) */\n  closeOnEnter?: boolean;\n\n  /** Listens for click events on button area */\n  onClick?: (event: React.MouseEvent) => void;\n  /** Listens for popup close events */\n  onClose?: () => void;\n  /** Listens for Enter key in popup */\n  onEnter?: () => void;\n}\n\n/** @internal */\ninterface PopupButtonState {\n  showPopup: boolean;\n}\n\n/** PopupButton React component that is a button and property editor popup host\n * @alpha\n */\nexport class PopupButton extends React.PureComponent<PopupButtonProps, PopupButtonState> {\n  private _buttonRef = React.createRef<HTMLDivElement>();\n\n  /** @internal */\n  public override readonly state: Readonly<PopupButtonState> = {\n    showPopup: false,\n  };\n\n  /** @internal */\n  public override componentDidMount() {\n    if (this.props.setFocus && this._buttonRef.current)\n      this._buttonRef.current.focus();\n  }\n\n  private _togglePopup = (event: React.MouseEvent) => {\n    this.setState(\n      (prevState) => ({ showPopup: !prevState.showPopup }),\n      () => this.props.onClick && this.props.onClick(event));\n  };\n\n  public closePopup() {\n    this._closePopup();\n  }\n\n  private _closePopup = () => {\n    this.setState(\n      { showPopup: false },\n      () => {\n        this.props.onClose && this.props.onClose();\n\n        // istanbul ignore else\n        if (this._buttonRef.current)\n          this._buttonRef.current.focus();\n      });\n  };\n\n  private _handleKeyDown = (event: React.KeyboardEvent) => {\n    // istanbul ignore else\n    if ((event.key === SpecialKey.ArrowDown || event.key === SpecialKey.Space || event.key === SpecialKey.Enter) && !this.state.showPopup) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.setState({ showPopup: true });\n    }\n  };\n\n  /** @internal */\n  public override render(): React.ReactNode {\n    const showArrow = this.props.showArrow ?? false;\n    const showShadow = this.props.showShadow ?? false;\n    const moveFocus = this.props.moveFocus ?? true;\n    const showPlaceholder = this.props.label === undefined && this.props.placeholder !== undefined;\n\n    const classNames = classnames(\n      \"components-popup-button\",\n      this.state.showPopup && \"components-popup-expanded\",\n    );\n\n    const valueClassNames = classnames(\n      \"components-popup-button-value\",\n      showPlaceholder && \"components-popup-button-placeholder\",\n    );\n\n    return (\n      <div className={this.props.className}>\n        <div className={classNames}\n          onClick={this._togglePopup}\n          onKeyDown={this._handleKeyDown}\n          data-testid=\"components-popup-button\"\n          tabIndex={0}\n          ref={this._buttonRef}\n          title={this.props.title}\n          role=\"button\"\n        >\n          <div className={valueClassNames}>\n            {this.props.label || this.props.placeholder}\n          </div>\n          <div className={\"components-popup-button-arrow\"}>\n            <div className={classnames(\"components-popup-button-arrow-icon\", \"icon\")}><Icon iconSpec={<SvgChevronDown />} /></div>\n          </div>\n        </div>\n        <Popup className=\"components-popup-button-popup\" isOpen={this.state.showPopup} position={RelativePosition.Bottom}\n          onClose={this._closePopup} onEnter={this.props.onEnter} closeOnEnter={this.props.closeOnEnter} target={this._buttonRef.current}\n          showArrow={showArrow} showShadow={showShadow}\n          moveFocus={moveFocus} focusTarget={this.props.focusTarget}\n        >\n          {this.props.children}\n        </Popup>\n      </div>\n\n    );\n  }\n}\n\n/** Popup content with padding\n * @alpha\n */\nexport function PopupContent(props: CommonDivProps) {\n  return <Div {...props} mainClassName=\"components-editor-popup-content\" />;\n}\n\n/** Properties for [[PopupOkCancelButtons]] component\n * @alpha\n */\nexport interface OkCancelProps {\n  onOk: (event: React.MouseEvent) => void;\n  onCancel: (event: React.MouseEvent) => void;\n}\n\n/** OK/Cancel Buttons\n * @alpha\n */\nexport function PopupOkCancelButtons(props: OkCancelProps) {\n  return (\n    <div className=\"components-popup-bottom-buttons\">\n      <Button\n        className={classnames(\"components-popup-large-button\", \"components-popup-ok-button\")}\n        data-testid=\"components-popup-ok-button\"\n        styleType=\"cta\"\n        title={UiCore.translate(\"dialog.ok\")}\n        onClick={props.onOk}\n      >\n        <Icon iconSpec={<SvgCheckmark />} />\n      </Button>\n      <Button\n        className={classnames(\"components-popup-large-button\", \"components-popup-cancel-button\")}\n        data-testid=\"components-popup-cancel-button\"\n        title={UiCore.translate(\"dialog.cancel\")}\n        onClick={props.onCancel}\n      >\n        <Icon iconSpec={<SvgRemove />} />\n      </Button>\n    </div>\n  );\n}\n"]}

package/lib/esm/components-react/editors/PopupButton.scss

@@ -1,120 +1,116 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
-@import "~@itwin/core-react/lib/cjs/core-react/style/baseline";
-@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/style/variables";
-@import "~@itwin/itwinui-css/scss/style/variables";
-
-.components-popup-button {
-  min-width: 100%;
-  min-height: $uicore-component-height-normal;
-  height: 100%;
-  margin: 0;
-  padding: 0;
-  background-color: $buic-background-control;
-  border: 1px solid $buic-inputs-border;
-  border-radius: $iui-border-radius;
-  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
-  box-sizing: border-box;
-  cursor: pointer;
-
-  display: flex;
-  flex-shrink: 1;
-  align-items: center;
-
-  font-weight: normal;
-
-  >.components-popup-button-value {
-    flex-grow: 1;
-    max-width: calc(100% - #{$uicore-line-height});
-    overflow-x: hidden;
-    padding: 0 3px;
-
-    &.components-popup-button-placeholder {
-      color: $buic-foreground-disabled;
-    }
-  }
-
-  >.components-popup-button-arrow {
-    background-color: $buic-background-control;
-    width: $uicore-line-height;
-    height: $uicore-line-height;
-
-    >.components-popup-button-arrow-icon {
-      transition: transform .2s;
-
-      &:hover {
-        color: $buic-foreground-primary;
-      }
-
-      text-align: center;
-      font-size: $uicore-icons-x-small;
-      line-height: $uicore-line-height;
-    }
-  }
-
-  &:focus,
-  &.components-popup-expanded {
-    border-color: $buic-foreground-focus;
-    outline: 0px;
-    box-shadow: $uicore-inputs-focus-boxshadow;
-
-    >.components-popup-button-arrow {
-      border: none;
-      box-shadow: none;
-      outline: 0px;
-
-      >.components-popup-button-arrow-icon {
-        color: $buic-foreground-primary;
-      }
-    }
-  }
-
-}
-
-.components-smallEditor-host {
-  .components-popup-button {
-    min-height: $uicore-component-height-small !important;
-  }
-}
-
-.components-popup-button-popup {
-  background-color: $buic-background-dialog;
-}
-
-.components-editor-popup-content {
-  padding: 4px 8px;
-}
-
-.components-popup-bottom-buttons {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 4px;
-
-  >.components-popup-large-button {
-    width: 70px;
-    font-size: 20px;
-    margin-left: 6px;
-  }
-
-  >.components-popup-cancel-button {
-
-    &,
-    &:active,
-    &:focus {
-      border: none;
-      background-color: $uicore-gray;
-      color: $uicore-white;
-    }
-
-    &:hover {
-      background-color: $uicore-gray-5;
-      color: $uicore-white;
-    }
-
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/core-react/lib/cjs/core-react/icons/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/inputs/variables";
+@import "~@itwin/core-react/lib/cjs/core-react/style/baseline";
+@import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
+@import "./variables.scss";
+
+.components-popup-button {
+  min-width: 100%;
+  min-height: 28px;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-color: $buic-background-control;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-radius: var(--iui-border-radius-1);
+  box-shadow: $buic-inputs-boxshadow 0px 1px 1px inset;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  display: flex;
+  flex-shrink: 1;
+  align-items: center;
+
+  font-weight: normal;
+
+  > .components-popup-button-value {
+    flex-grow: 1;
+    max-width: calc(100% - var(--iui-size-l));
+    overflow-x: hidden;
+    padding: 0 3px;
+
+    &.components-popup-button-placeholder {
+      color: var(--iui-color-text-disabled);
+    }
+  }
+
+  > .components-popup-button-arrow {
+    background-color: $buic-background-control;
+    width: var(--iui-size-l);
+    height: var(--iui-size-l);
+
+    > .components-popup-button-arrow-icon {
+      transition: transform 0.2s;
+
+      &:hover {
+        color: var(--iui-color-text-accent);
+      }
+
+      text-align: center;
+      font-size: var(--iui-font-size-0);
+      line-height: var(--iui-size-l);
+    }
+  }
+
+  &:focus,
+  &.components-popup-expanded {
+    border-color: $buic-foreground-focus;
+    outline: 0px;
+    box-shadow: $uicore-inputs-focus-boxshadow;
+
+    > .components-popup-button-arrow {
+      border: none;
+      box-shadow: none;
+      outline: 0px;
+
+      > .components-popup-button-arrow-icon {
+        color: var(--iui-color-text-accent);
+      }
+    }
+  }
+}
+
+.components-smallEditor-host {
+  .components-popup-button {
+    min-height: $editor-component-height-small !important;
+  }
+}
+
+.components-popup-button-popup {
+  background-color: var(--iui-color-background);
+}
+
+.components-editor-popup-content {
+  padding: 4px 8px;
+}
+
+.components-popup-bottom-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4px;
+
+  > .components-popup-large-button {
+    width: 70px;
+    font-size: 20px;
+    margin-left: 6px;
+  }
+
+  > .components-popup-cancel-button {
+    &,
+    &:active,
+    &:focus {
+      border: none;
+      background-color: var(--iui-color-background-negative);
+      color: var(--iui-color-white);
+    }
+
+    &:hover {
+      background-color: var(--iui-color-background-negative-hover);
+      color: var(--iui-color-white);
+    }
+  }
+}

package/lib/esm/components-react/editors/PropertyEditorManager.d.ts

@@ -1,73 +1,73 @@
-/** @packageDocumentation
- * @module PropertyEditors
- */
-import * as React from "react";
-import { DisplayMessageType, MessageSeverity, PropertyDescription, PropertyRecord, PropertyValue } from "@itwin/appui-abstract";
-/** Asynchronous Error Message returned as part of [[AsyncValueProcessingResult]]
- * @public
- */
-export interface AsyncErrorMessage {
-    severity: MessageSeverity;
-    briefMessage: string;
-    detailedMessage?: string;
-    messageType?: DisplayMessageType;
-}
-/** Asynchronous Value Process Result
- * @public
- */
-export interface AsyncValueProcessingResult {
-    encounteredError: boolean;
-    returnValue?: PropertyValue;
-    errorMessage?: AsyncErrorMessage;
-}
-/** DataControllers can be implemented per typename to validate and commit values.
- * @public
- */
-export interface DataController {
-    validateValue(newValue: PropertyValue, record: PropertyRecord): Promise<AsyncValueProcessingResult>;
-    commitValue(newValue: PropertyValue, record: PropertyRecord): Promise<AsyncValueProcessingResult>;
-}
-/** PropertyEditor is the base class for all property editors.
- * @public
- */
-export declare abstract class PropertyEditorBase implements DataController {
-    get containerHandlesBlur(): boolean;
-    get containerHandlesEscape(): boolean;
-    get containerHandlesEnter(): boolean;
-    get containerHandlesTab(): boolean;
-    get containerStopsKeydownPropagation(): boolean;
-    customDataController: DataController | undefined;
-    abstract get reactNode(): React.ReactNode;
-    applyEditorParams(_property: PropertyDescription, _record: PropertyRecord): void;
-    commitValue(newValue: PropertyValue, record: PropertyRecord): Promise<AsyncValueProcessingResult>;
-    validateValue(newValue: PropertyValue, record: PropertyRecord): Promise<AsyncValueProcessingResult>;
-}
-/** DataControllerBase is the base class for all Data Controllers.
- * @public
- */
-export declare abstract class DataControllerBase implements DataController {
-    commitValue(_newValue: PropertyValue, _record: PropertyRecord): Promise<AsyncValueProcessingResult>;
-    validateValue(_newValue: PropertyValue, _record: PropertyRecord): Promise<AsyncValueProcessingResult>;
-}
-/** Manages Property Editors. Property Editors are registered with and created by the manager.
- * @public
- */
-export declare class PropertyEditorManager {
-    private static _editors;
-    private static _dataControllers;
-    static registerEditor(editType: string, editor: new () => PropertyEditorBase, editorName?: string): void;
-    private static getFullEditorName;
-    static registerDataController(controllerName: string, controller: new () => DataControllerBase): void;
-    /** @internal */
-    static deregisterDataController(controllerName: string): void;
-    static createEditor(editType: string, editorName?: string, dataControllerName?: string): PropertyEditorBase;
-    static hasCustomEditor(editType: string, editorName: string): boolean;
-}
-/** Basic Property Editor registered for the "text" and "string" type names.
- * It uses the [[TextEditor]] React component.
- * @public
- */
-export declare class BasicPropertyEditor extends PropertyEditorBase {
-    get reactNode(): React.ReactNode;
-}
+/** @packageDocumentation
+ * @module PropertyEditors
+ */
+import * as React from "react";
+import { DisplayMessageType, MessageSeverity, PropertyDescription, PropertyRecord, PropertyValue } from "@itwin/appui-abstract";
+/** Asynchronous Error Message returned as part of [[AsyncValueProcessingResult]]
+ * @public
+ */
+export interface AsyncErrorMessage {
+    severity: MessageSeverity;
+    briefMessage: string;
+    detailedMessage?: string;
+    messageType?: DisplayMessageType;
+}
+/** Asynchronous Value Process Result
+ * @public
+ */
+export interface AsyncValueProcessingResult {
+    encounteredError: boolean;
+    returnValue?: PropertyValue;
+    errorMessage?: AsyncErrorMessage;
+}
+/** DataControllers can be implemented per typename to validate and commit values.
+ * @public
+ */
+export interface DataController {
+    validateValue(newValue: PropertyValue, record: PropertyRecord): Promise<AsyncValueProcessingResult>;
+    commitValue(newValue: PropertyValue, record: PropertyRecord): Promise<AsyncValueProcessingResult>;
+}
+/** PropertyEditor is the base class for all property editors.
+ * @public
+ */
+export declare abstract class PropertyEditorBase implements DataController {
+    get containerHandlesBlur(): boolean;
+    get containerHandlesEscape(): boolean;
+    get containerHandlesEnter(): boolean;
+    get containerHandlesTab(): boolean;
+    get containerStopsKeydownPropagation(): boolean;
+    customDataController: DataController | undefined;
+    abstract get reactNode(): React.ReactNode;
+    applyEditorParams(_property: PropertyDescription, _record: PropertyRecord): void;
+    commitValue(newValue: PropertyValue, record: PropertyRecord): Promise<AsyncValueProcessingResult>;
+    validateValue(newValue: PropertyValue, record: PropertyRecord): Promise<AsyncValueProcessingResult>;
+}
+/** DataControllerBase is the base class for all Data Controllers.
+ * @public
+ */
+export declare abstract class DataControllerBase implements DataController {
+    commitValue(_newValue: PropertyValue, _record: PropertyRecord): Promise<AsyncValueProcessingResult>;
+    validateValue(_newValue: PropertyValue, _record: PropertyRecord): Promise<AsyncValueProcessingResult>;
+}
+/** Manages Property Editors. Property Editors are registered with and created by the manager.
+ * @public
+ */
+export declare class PropertyEditorManager {
+    private static _editors;
+    private static _dataControllers;
+    static registerEditor(editType: string, editor: new () => PropertyEditorBase, editorName?: string): void;
+    private static getFullEditorName;
+    static registerDataController(controllerName: string, controller: new () => DataControllerBase): void;
+    /** @internal */
+    static deregisterDataController(controllerName: string): void;
+    static createEditor(editType: string, editorName?: string, dataControllerName?: string): PropertyEditorBase;
+    static hasCustomEditor(editType: string, editorName: string): boolean;
+}
+/** Basic Property Editor registered for the "text" and "string" type names.
+ * It uses the [[TextEditor]] React component.
+ * @public
+ */
+export declare class BasicPropertyEditor extends PropertyEditorBase {
+    get reactNode(): React.ReactNode;
+}
 //# sourceMappingURL=PropertyEditorManager.d.ts.map