@itwin/components-react 4.0.0-dev.9 → 4.0.1

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

@@ -1,114 +1,119 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PopupOkCancelButtons = exports.PopupContent = exports.PopupButton = void 0;
-require("./PopupButton.scss");
-const classnames_1 = __importDefault(require("classnames"));
-const React = __importStar(require("react"));
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const core_react_1 = require("@itwin/core-react");
-const itwinui_react_1 = require("@itwin/itwinui-react");
-/** PopupButton React component that is a button and property editor popup host
- * @alpha
- */
-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 === appui_abstract_1.SpecialKey.ArrowDown || event.key === appui_abstract_1.SpecialKey.Space || event.key === appui_abstract_1.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 = (0, classnames_1.default)("components-popup-button", this.state.showPopup && "components-popup-expanded");
-        const valueClassNames = (0, classnames_1.default)("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: (0, classnames_1.default)("components-popup-button-arrow-icon", "icon", "icon-chevron-down") }))),
-            React.createElement(core_react_1.Popup, { className: "components-popup-button-popup", isOpen: this.state.showPopup, position: appui_abstract_1.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)));
-    }
-}
-exports.PopupButton = PopupButton;
-/** Popup content with padding
- * @alpha
- */
-function PopupContent(props) {
-    return React.createElement(core_react_1.Div, { ...props, mainClassName: "components-editor-popup-content" });
-}
-exports.PopupContent = PopupContent;
-/** OK/Cancel Buttons
- * @alpha
- */
-function PopupOkCancelButtons(props) {
-    return (React.createElement("div", { className: "components-popup-bottom-buttons" },
-        React.createElement(itwinui_react_1.Button, { className: (0, classnames_1.default)("components-popup-large-button", "components-popup-ok-button"), "data-testid": "components-popup-ok-button", styleType: "cta", title: core_react_1.UiCore.translate("dialog.ok"), onClick: props.onOk },
-            React.createElement(core_react_1.Icon, { iconSpec: "icon-checkmark" })),
-        React.createElement(itwinui_react_1.Button, { className: (0, classnames_1.default)("components-popup-large-button", "components-popup-cancel-button"), "data-testid": "components-popup-cancel-button", title: core_react_1.UiCore.translate("dialog.cancel"), onClick: props.onCancel },
-            React.createElement(core_react_1.Icon, { iconSpec: "icon-remove" }))));
-}
-exports.PopupOkCancelButtons = PopupOkCancelButtons;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupOkCancelButtons = exports.PopupContent = exports.PopupButton = void 0;
+require("./PopupButton.scss");
+const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const core_react_1 = require("@itwin/core-react");
+const itwinui_react_1 = require("@itwin/itwinui-react");
+const itwinui_icons_react_1 = require("@itwin/itwinui-icons-react");
+/** PopupButton React component that is a button and property editor popup host
+ * @alpha
+ */
+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 === appui_abstract_1.SpecialKey.ArrowDown || event.key === appui_abstract_1.SpecialKey.Space || event.key === appui_abstract_1.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() {
+        const showArrow = this.props.showArrow ?? false;
+        const showShadow = this.props.showShadow ?? false;
+        const moveFocus = this.props.moveFocus ?? true;
+        const showPlaceholder = this.props.label === undefined && this.props.placeholder !== undefined;
+        const classNames = (0, classnames_1.default)("components-popup-button", this.state.showPopup && "components-popup-expanded");
+        const valueClassNames = (0, classnames_1.default)("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: (0, classnames_1.default)("components-popup-button-arrow-icon", "icon") },
+                        React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgChevronDown, null) })))),
+            React.createElement(core_react_1.Popup, { className: "components-popup-button-popup", isOpen: this.state.showPopup, position: appui_abstract_1.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)));
+    }
+}
+exports.PopupButton = PopupButton;
+/** Popup content with padding
+ * @alpha
+ */
+function PopupContent(props) {
+    return React.createElement(core_react_1.Div, { ...props, mainClassName: "components-editor-popup-content" });
+}
+exports.PopupContent = PopupContent;
+/** OK/Cancel Buttons
+ * @alpha
+ */
+function PopupOkCancelButtons(props) {
+    return (React.createElement("div", { className: "components-popup-bottom-buttons" },
+        React.createElement(itwinui_react_1.Button, { className: (0, classnames_1.default)("components-popup-large-button", "components-popup-ok-button"), "data-testid": "components-popup-ok-button", styleType: "cta", title: core_react_1.UiCore.translate("dialog.ok"), onClick: props.onOk },
+            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgCheckmark, null) })),
+        React.createElement(itwinui_react_1.Button, { className: (0, classnames_1.default)("components-popup-large-button", "components-popup-cancel-button"), "data-testid": "components-popup-cancel-button", title: core_react_1.UiCore.translate("dialog.cancel"), onClick: props.onCancel },
+            React.createElement(core_react_1.Icon, { iconSpec: React.createElement(itwinui_icons_react_1.SvgRemove, null) }))));
+}
+exports.PopupOkCancelButtons = PopupOkCancelButtons;
 //# sourceMappingURL=PopupButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopupButton.js","sourceRoot":"","sources":["../../../../src/components-react/editors/PopupButton.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 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/cjs/components-react/editors/PopupButton.scss

@@ -1,116 +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";
-
-.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: 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: $buic-foreground-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: $buic-foreground-primary;
-      }
-
-      text-align: center;
-      font-size: $uicore-icons-x-small;
-      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: $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);
+    }
+  }
+}