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

package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js

@@ -1,160 +1,164 @@
-"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 LineWeight
- */
-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.WeightPickerButton = void 0;
-require("./WeightPickerButton.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 Swatch_1 = require("./Swatch");
-/** WeightPickerButton component
- * @public
- */
-class WeightPickerButton extends React.PureComponent {
-    /** @internal */
-    constructor(props) {
-        super(props);
-        this._target = React.createRef();
-        this._weightsContainer = null;
-        this._focusTarget = React.createRef(); // weight button that should receive focus after popup is open
-        this._togglePopup = () => {
-            if (this.props.readonly)
-                return;
-            this.setState((prevState) => ({ showPopup: !prevState.showPopup }));
-        };
-        this._onPopupOpened = () => {
-        };
-        this._closePopup = () => {
-            this.setState((_prevState) => ({ showPopup: false }));
-        };
-        this._handleWeightPicked = (weight) => {
-            this._closePopup();
-            this.props.onLineWeightPick && this.props.onLineWeightPick(weight);
-        };
-        this._handleKeyDown = (event) => {
-            if (event.key === appui_abstract_1.SpecialKey.Enter) {
-                event.preventDefault();
-                event.stopPropagation();
-                const weightButton = document.activeElement;
-                // istanbul ignore else
-                if (weightButton.tagName === "BUTTON") {
-                    try {
-                        const values = weightButton.id.split("-");
-                        // istanbul ignore else
-                        if (values.length) {
-                            const weight = parseInt(values[values.length - 1], 10);
-                            // istanbul ignore else
-                            if (!isNaN(weight)) {
-                                // istanbul ignore else
-                                if (this.props.onLineWeightPick)
-                                    this.props.onLineWeightPick(weight);
-                            }
-                        }
-                    }
-                    catch { }
-                }
-                this._closePopup();
-            }
-            else {
-                switch (event.key) {
-                    case appui_abstract_1.SpecialKey.ArrowDown:
-                        this.moveFocusInPopup(false, event);
-                        break;
-                    case appui_abstract_1.SpecialKey.ArrowUp:
-                        this.moveFocusInPopup(true, event);
-                        break;
-                }
-            }
-        };
-        this._setWeightContainer = (el) => {
-            this._weightsContainer = el;
-        };
-        this.state = { showPopup: false, targetElement: null };
-    }
-    setFocus() {
-        // istanbul ignore next
-        this._focusTarget.current && this._focusTarget.current.focus();
-    }
-    componentDidMount() {
-        // eslint-disable-next-line no-console
-        // console.log(`WeightPickerButton.componentDidMount focusRef=${this._focusTarget && this._focusTarget.current ? "set" : "unset"}`);
-        this.setState({ targetElement: this._target.current });
-    }
-    buildIdForWeight(weight) {
-        return `ui-core-lineweight-${weight}`;
-    }
-    moveFocusInPopup(moveUp, event) {
-        const activeElement = document.activeElement;
-        // istanbul ignore else
-        if (this._weightsContainer && activeElement && activeElement.tagName === "BUTTON") {
-            const values = activeElement.id.split("-");
-            // istanbul ignore else
-            if (values.length === 4 && values[2] === "lineweight") {
-                const weight = parseInt(values[3], 10);
-                const foundIndex = this.props.weights.findIndex((val) => val === weight);
-                // istanbul ignore next
-                if (foundIndex < 0)
-                    return;
-                const nextWeight = moveUp ? (foundIndex <= 0 ? this.props.weights[this.props.weights.length - 1] : this.props.weights[foundIndex - 1]) :
-                    (foundIndex < this.props.weights.length - 1 ? this.props.weights[foundIndex + 1] : this.props.weights[0]);
-                const focusLocation = this._weightsContainer.querySelector(`#${this.buildIdForWeight(nextWeight)}`);
-                // istanbul ignore else
-                if (focusLocation) {
-                    focusLocation.focus();
-                    event.preventDefault();
-                    event.stopPropagation();
-                }
-            }
-        }
-    }
-    renderPopup(title) {
-        return (React.createElement("div", { className: "components-weightpicker-popup-container" },
-            title && React.createElement("h4", null, title),
-            React.createElement("ul", { "data-testid": "components-weightpicker-popup-lines", className: "components-weightpicker-popup-lines", onKeyDown: this._handleKeyDown, ref: this._setWeightContainer }, this.props.weights.map((weight, index) => {
-                const classNames = (0, classnames_1.default)("components-weightpicker-swatch", weight === this.props.activeWeight && "active");
-                return (React.createElement(Swatch_1.LineWeightSwatch, { className: classNames, key: index, colorDef: this.props.colorDef, id: this.buildIdForWeight(weight), hideLabel: this.props.hideLabel, onClick: this._handleWeightPicked.bind(this, weight), weight: weight }));
-            }))));
-    }
-    /** @internal */
-    render() {
-        const buttonClassNames = (0, classnames_1.default)("components-weightpicker-button", this.props.className);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: this._target, style: this.props.style },
-                React.createElement(Swatch_1.LineWeightSwatch, { "data-testid": "components-weightpicker-button", className: buttonClassNames, weight: this.props.activeWeight, colorDef: this.props.colorDef, readonly: this.props.readonly, disabled: this.props.disabled, hideLabel: this.props.hideLabel, "aria-haspopup": "listbox", "aria-expanded": this.state.showPopup, onClick: this._togglePopup })),
-            React.createElement(core_react_1.ElementResizeObserver, { watchedElement: this.state.targetElement, render: ({ width }) => (React.createElement(core_react_1.Popup, { className: "components-weightpicker-popup", style: { width: `${width}px` }, isOpen: this.state.showPopup, position: appui_abstract_1.RelativePosition.Bottom, offset: 0, showShadow: false, onClose: this._closePopup, onOpen: this._onPopupOpened, focusTarget: `#${this.buildIdForWeight(this.props.activeWeight)}`, moveFocus: true, target: this.state.targetElement, closeOnNestedPopupOutsideClick: true }, this.renderPopup(this.props.dropDownTitle))) })));
-    }
-}
-exports.WeightPickerButton = WeightPickerButton;
-WeightPickerButton.defaultProps = {
-    weights: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
-};
+"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 LineWeight
+ */
+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.WeightPickerButton = void 0;
+require("./WeightPickerButton.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 Swatch_1 = require("./Swatch");
+/** WeightPickerButton component
+ * @public
+ */
+class WeightPickerButton extends React.PureComponent {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._target = React.createRef();
+        this._weightsContainer = null;
+        this._focusTarget = React.createRef(); // weight button that should receive focus after popup is open
+        this._togglePopup = () => {
+            if (this.props.readonly)
+                return;
+            this.setState((prevState) => ({ showPopup: !prevState.showPopup }));
+        };
+        this._onPopupOpened = () => {
+        };
+        this._closePopup = () => {
+            this.setState((_prevState) => ({ showPopup: false }));
+        };
+        this._handleWeightPicked = (weight) => {
+            this._closePopup();
+            this.props.onLineWeightPick && this.props.onLineWeightPick(weight);
+        };
+        this._handleKeyDown = (event) => {
+            if (event.key === appui_abstract_1.SpecialKey.Enter) {
+                event.preventDefault();
+                event.stopPropagation();
+                const weightButton = document.activeElement;
+                // istanbul ignore else
+                if (weightButton.tagName === "BUTTON") {
+                    try {
+                        const values = weightButton.id.split("-");
+                        // istanbul ignore else
+                        if (values.length) {
+                            const weight = parseInt(values[values.length - 1], 10);
+                            // istanbul ignore else
+                            if (!isNaN(weight)) {
+                                // istanbul ignore else
+                                if (this.props.onLineWeightPick)
+                                    this.props.onLineWeightPick(weight);
+                            }
+                        }
+                    }
+                    catch { }
+                }
+                this._closePopup();
+            }
+            else {
+                switch (event.key) {
+                    case appui_abstract_1.SpecialKey.ArrowDown:
+                        this.moveFocusInPopup(false, event);
+                        break;
+                    case appui_abstract_1.SpecialKey.ArrowUp:
+                        this.moveFocusInPopup(true, event);
+                        break;
+                }
+            }
+        };
+        this._setWeightContainer = (el) => {
+            this._weightsContainer = el;
+        };
+        this.state = { showPopup: false, targetElement: null };
+    }
+    setFocus() {
+        // istanbul ignore next
+        this._focusTarget.current && this._focusTarget.current.focus();
+    }
+    componentDidMount() {
+        // eslint-disable-next-line no-console
+        // console.log(`WeightPickerButton.componentDidMount focusRef=${this._focusTarget && this._focusTarget.current ? "set" : "unset"}`);
+        this.setState({ targetElement: this._target.current });
+    }
+    buildIdForWeight(weight) {
+        return `ui-core-lineweight-${weight}`;
+    }
+    moveFocusInPopup(moveUp, event) {
+        const activeElement = document.activeElement;
+        // istanbul ignore else
+        if (this._weightsContainer && activeElement && activeElement.tagName === "BUTTON") {
+            const values = activeElement.id.split("-");
+            // istanbul ignore else
+            if (values.length === 4 && values[2] === "lineweight") {
+                const weight = parseInt(values[3], 10);
+                const foundIndex = this.props.weights.findIndex((val) => val === weight);
+                // istanbul ignore next
+                if (foundIndex < 0)
+                    return;
+                const nextWeight = moveUp ? (foundIndex <= 0 ? this.props.weights[this.props.weights.length - 1] : this.props.weights[foundIndex - 1]) :
+                    (foundIndex < this.props.weights.length - 1 ? this.props.weights[foundIndex + 1] : this.props.weights[0]);
+                const focusLocation = this._weightsContainer.querySelector(`#${this.buildIdForWeight(nextWeight)}`);
+                // istanbul ignore else
+                if (focusLocation) {
+                    focusLocation.focus();
+                    event.preventDefault();
+                    event.stopPropagation();
+                }
+            }
+        }
+    }
+    renderPopup(title) {
+        return (React.createElement("div", { className: "components-weightpicker-popup-container" },
+            title && React.createElement("h4", null, title),
+            React.createElement("ul", { "data-testid": "components-weightpicker-popup-lines", className: "components-weightpicker-popup-lines", onKeyDown: this._handleKeyDown, ref: this._setWeightContainer }, this.props.weights.map((weight, index) => {
+                const classNames = (0, classnames_1.default)("components-weightpicker-swatch", weight === this.props.activeWeight && "active");
+                return (React.createElement(Swatch_1.LineWeightSwatch, { className: classNames, key: index, colorDef: this.props.colorDef, id: this.buildIdForWeight(weight), hideLabel: this.props.hideLabel, onClick: this._handleWeightPicked.bind(this, weight), weight: weight }));
+            }))));
+    }
+    /** @internal */
+    render() {
+        const buttonClassNames = (0, classnames_1.default)("components-weightpicker-button", this.props.className);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: this._target, style: this.props.style },
+                React.createElement(Swatch_1.LineWeightSwatch, { "data-testid": "components-weightpicker-button", className: buttonClassNames, weight: this.props.activeWeight, colorDef: this.props.colorDef, readonly: this.props.readonly, disabled: this.props.disabled, hideLabel: this.props.hideLabel, "aria-haspopup": "listbox", "aria-expanded": this.state.showPopup, onClick: this._togglePopup })),
+            React.createElement(core_react_1.ElementResizeObserver, { watchedElement: this.state.targetElement, render: ({ width }) => (React.createElement(core_react_1.Popup, { className: "components-weightpicker-popup", style: { width: `${width}px` }, isOpen: this.state.showPopup, position: appui_abstract_1.RelativePosition.Bottom, offset: 0, showShadow: false, onClose: this._closePopup, onOpen: this._onPopupOpened, focusTarget: `#${this.buildIdForWeight(this.props.activeWeight)}`, moveFocus: true, target: this.state.targetElement, closeOnNestedPopupOutsideClick: true }, this.renderPopup(this.props.dropDownTitle))) })));
+    }
+}
+WeightPickerButton.defaultProps = {
+    weights: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+};
+exports.WeightPickerButton = WeightPickerButton;
 //# sourceMappingURL=WeightPickerButton.js.map

package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WeightPickerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/lineweight/WeightPickerButton.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 LineWeight\r\n */\r\n\r\nimport \"./WeightPickerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, ElementResizeObserver, Popup } from \"@itwin/core-react\";\r\nimport { LineWeightSwatch } from \"./Swatch\";\r\n\r\n// cSpell:ignore weightpicker lineweight\r\n\r\n/** Properties for the [[WeightPickerButton]] React component\r\n * @public\r\n */\r\nexport interface WeightPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** active weight */\r\n  activeWeight: number;\r\n  /** available weights */\r\n  weights: number[];\r\n  /** color specification */\r\n  colorDef?: ColorDef;\r\n  /** function to run when user selects weight swatch */\r\n  onLineWeightPick?: ((weight: number) => void) | undefined;\r\n  /** Disabled or not */\r\n  disabled?: boolean;\r\n  /** Readonly or not */\r\n  readonly?: boolean;\r\n  /** hide the weight label */\r\n  hideLabel?: boolean;\r\n  /** Title to show at top of DropDown */\r\n  dropDownTitle?: string;\r\n}\r\n\r\n/** @internal */\r\ninterface WeightPickerState {\r\n  showPopup: boolean;\r\n  targetElement: HTMLDivElement | null;\r\n}\r\n\r\n/** WeightPickerButton component\r\n * @public\r\n */\r\nexport class WeightPickerButton extends React.PureComponent<WeightPickerProps, WeightPickerState> {\r\n  private _target = React.createRef<HTMLDivElement>();\r\n  private _weightsContainer: HTMLDivElement | null = null;\r\n  private _focusTarget = React.createRef<HTMLButtonElement>();  // weight button that should receive focus after popup is open\r\n\r\n  /** @internal */\r\n  constructor(props: WeightPickerProps) {\r\n    super(props);\r\n\r\n    this.state = { showPopup: false, targetElement: null };\r\n  }\r\n\r\n  public setFocus(): void {\r\n    // istanbul ignore next\r\n    this._focusTarget.current && this._focusTarget.current.focus();\r\n  }\r\n\r\n  public static defaultProps = {\r\n    weights: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\r\n  };\r\n\r\n  private _togglePopup = () => {\r\n    if (this.props.readonly)\r\n      return;\r\n    this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\r\n  };\r\n\r\n  private _onPopupOpened = () => {\r\n  };\r\n\r\n  private _closePopup = () => {\r\n    this.setState((_prevState) => ({ showPopup: false }));\r\n  };\r\n\r\n  private _handleWeightPicked = (weight: number) => {\r\n    this._closePopup();\r\n    this.props.onLineWeightPick && this.props.onLineWeightPick(weight);\r\n  };\r\n\r\n  public override componentDidMount() {\r\n    // eslint-disable-next-line no-console\r\n    // console.log(`WeightPickerButton.componentDidMount focusRef=${this._focusTarget && this._focusTarget.current ? \"set\" : \"unset\"}`);\r\n    this.setState({ targetElement: this._target.current });\r\n  }\r\n\r\n  private buildIdForWeight(weight: number): string {\r\n    return `ui-core-lineweight-${weight}`;\r\n  }\r\n\r\n  private moveFocusInPopup(moveUp: boolean, event: React.KeyboardEvent<any>) {\r\n    const activeElement = document.activeElement;\r\n    // istanbul ignore else\r\n    if (this._weightsContainer && activeElement && activeElement.tagName === \"BUTTON\") {\r\n      const values = activeElement.id.split(\"-\");\r\n      // istanbul ignore else\r\n      if (values.length === 4 && values[2] === \"lineweight\") {\r\n        const weight = parseInt(values[3], 10);\r\n        const foundIndex = this.props.weights.findIndex((val) => val === weight);\r\n        // istanbul ignore next\r\n        if (foundIndex < 0)\r\n          return;\r\n\r\n        const nextWeight = moveUp ? (foundIndex <= 0 ? this.props.weights[this.props.weights.length - 1] : this.props.weights[foundIndex - 1]) :\r\n          (foundIndex < this.props.weights.length - 1 ? this.props.weights[foundIndex + 1] : this.props.weights[0]);\r\n\r\n        const focusLocation = this._weightsContainer.querySelector(`#${this.buildIdForWeight(nextWeight)}`) as HTMLButtonElement;\r\n        // istanbul ignore else\r\n        if (focusLocation) {\r\n          focusLocation.focus();\r\n          event.preventDefault();\r\n          event.stopPropagation();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private _handleKeyDown = (event: React.KeyboardEvent<any>) => {\r\n    if (event.key === SpecialKey.Enter) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      const weightButton = document.activeElement as HTMLElement;\r\n      // istanbul ignore else\r\n      if (weightButton.tagName === \"BUTTON\") {\r\n        try {\r\n          const values = weightButton.id.split(\"-\");\r\n          // istanbul ignore else\r\n          if (values.length) {\r\n            const weight = parseInt(values[values.length - 1], 10);\r\n            // istanbul ignore else\r\n            if (!isNaN(weight)) {\r\n              // istanbul ignore else\r\n              if (this.props.onLineWeightPick)\r\n                this.props.onLineWeightPick(weight);\r\n            }\r\n          }\r\n        } catch { }\r\n      }\r\n      this._closePopup();\r\n    } else {\r\n      switch (event.key) {\r\n        case SpecialKey.ArrowDown:\r\n          this.moveFocusInPopup(false, event);\r\n          break;\r\n        case SpecialKey.ArrowUp:\r\n          this.moveFocusInPopup(true, event);\r\n          break;\r\n      }\r\n    }\r\n  };\r\n\r\n  private _setWeightContainer = (el: any) => {\r\n    this._weightsContainer = el;\r\n  };\r\n\r\n  private renderPopup(title: string | undefined) {\r\n    return (\r\n      <div className=\"components-weightpicker-popup-container\">\r\n        {title && <h4>{title}</h4>}\r\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\r\n        <ul data-testid=\"components-weightpicker-popup-lines\" className=\"components-weightpicker-popup-lines\" onKeyDown={this._handleKeyDown} ref={this._setWeightContainer}>\r\n          {this.props.weights.map((weight, index) => {\r\n            const classNames = classnames(\r\n              \"components-weightpicker-swatch\",\r\n              weight === this.props.activeWeight && \"active\",\r\n            );\r\n            return (<LineWeightSwatch\r\n              className={classNames}\r\n              key={index}\r\n              colorDef={this.props.colorDef}\r\n              id={this.buildIdForWeight(weight)}\r\n              hideLabel={this.props.hideLabel}\r\n              onClick={this._handleWeightPicked.bind(this, weight)}\r\n              weight={weight} />);\r\n          })\r\n          }\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const buttonClassNames = classnames(\r\n      \"components-weightpicker-button\",\r\n      this.props.className,\r\n    );\r\n\r\n    return (\r\n      <>\r\n        <div ref={this._target} style={this.props.style} >\r\n          <LineWeightSwatch\r\n            data-testid=\"components-weightpicker-button\"\r\n            className={buttonClassNames}\r\n            weight={this.props.activeWeight}\r\n            colorDef={this.props.colorDef}\r\n            readonly={this.props.readonly}\r\n            disabled={this.props.disabled}\r\n            hideLabel={this.props.hideLabel}\r\n            aria-haspopup=\"listbox\"\r\n            aria-expanded={this.state.showPopup}\r\n            onClick={this._togglePopup} />\r\n        </div>\r\n        <ElementResizeObserver watchedElement={this.state.targetElement} render=\r\n          {({ width }) => (\r\n            <Popup\r\n              className=\"components-weightpicker-popup\"\r\n              style={{ width: `${width}px` }}\r\n              isOpen={this.state.showPopup}\r\n              position={RelativePosition.Bottom}\r\n              offset={0}\r\n              showShadow={false}\r\n              onClose={this._closePopup}\r\n              onOpen={this._onPopupOpened}\r\n              focusTarget={`#${this.buildIdForWeight(this.props.activeWeight)}`}\r\n              moveFocus={true}\r\n              target={this.state.targetElement}\r\n              closeOnNestedPopupOutsideClick\r\n            >\r\n              {this.renderPopup(this.props.dropDownTitle)}\r\n            </Popup>\r\n          )}\r\n        />\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"WeightPickerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/lineweight/WeightPickerButton.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 LineWeight\r\n */\r\n\r\nimport \"./WeightPickerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { ColorDef } from \"@itwin/core-common\";\r\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { CommonProps, ElementResizeObserver, Popup } from \"@itwin/core-react\";\r\nimport { LineWeightSwatch } from \"./Swatch\";\r\n\r\n// cSpell:ignore weightpicker lineweight\r\n\r\n/** Properties for the [[WeightPickerButton]] React component\r\n * @public\r\n */\r\nexport interface WeightPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {\r\n  /** active weight */\r\n  activeWeight: number;\r\n  /** available weights */\r\n  weights: number[];\r\n  /** color specification */\r\n  colorDef?: ColorDef;\r\n  /** function to run when user selects weight swatch */\r\n  onLineWeightPick?: ((weight: number) => void) | undefined;\r\n  /** Disabled or not */\r\n  disabled?: boolean;\r\n  /** Readonly or not */\r\n  readonly?: boolean;\r\n  /** hide the weight label */\r\n  hideLabel?: boolean;\r\n  /** Title to show at top of DropDown */\r\n  dropDownTitle?: string;\r\n}\r\n\r\n/** @internal */\r\ninterface WeightPickerState {\r\n  showPopup: boolean;\r\n  targetElement: HTMLDivElement | null;\r\n}\r\n\r\n/** WeightPickerButton component\r\n * @public\r\n */\r\nexport class WeightPickerButton extends React.PureComponent<WeightPickerProps, WeightPickerState> {\r\n  private _target = React.createRef<HTMLDivElement>();\r\n  private _weightsContainer: HTMLDivElement | null = null;\r\n  private _focusTarget = React.createRef<HTMLButtonElement>();  // weight button that should receive focus after popup is open\r\n\r\n  /** @internal */\r\n  constructor(props: WeightPickerProps) {\r\n    super(props);\r\n\r\n    this.state = { showPopup: false, targetElement: null };\r\n  }\r\n\r\n  public setFocus(): void {\r\n    // istanbul ignore next\r\n    this._focusTarget.current && this._focusTarget.current.focus();\r\n  }\r\n\r\n  public static defaultProps = {\r\n    weights: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],\r\n  };\r\n\r\n  private _togglePopup = () => {\r\n    if (this.props.readonly)\r\n      return;\r\n    this.setState((prevState) => ({ showPopup: !prevState.showPopup }));\r\n  };\r\n\r\n  private _onPopupOpened = () => {\r\n  };\r\n\r\n  private _closePopup = () => {\r\n    this.setState((_prevState) => ({ showPopup: false }));\r\n  };\r\n\r\n  private _handleWeightPicked = (weight: number) => {\r\n    this._closePopup();\r\n    this.props.onLineWeightPick && this.props.onLineWeightPick(weight);\r\n  };\r\n\r\n  public override componentDidMount() {\r\n    // eslint-disable-next-line no-console\r\n    // console.log(`WeightPickerButton.componentDidMount focusRef=${this._focusTarget && this._focusTarget.current ? \"set\" : \"unset\"}`);\r\n    this.setState({ targetElement: this._target.current });\r\n  }\r\n\r\n  private buildIdForWeight(weight: number): string {\r\n    return `ui-core-lineweight-${weight}`;\r\n  }\r\n\r\n  private moveFocusInPopup(moveUp: boolean, event: React.KeyboardEvent<any>) {\r\n    const activeElement = document.activeElement;\r\n    // istanbul ignore else\r\n    if (this._weightsContainer && activeElement && activeElement.tagName === \"BUTTON\") {\r\n      const values = activeElement.id.split(\"-\");\r\n      // istanbul ignore else\r\n      if (values.length === 4 && values[2] === \"lineweight\") {\r\n        const weight = parseInt(values[3], 10);\r\n        const foundIndex = this.props.weights.findIndex((val) => val === weight);\r\n        // istanbul ignore next\r\n        if (foundIndex < 0)\r\n          return;\r\n\r\n        const nextWeight = moveUp ? (foundIndex <= 0 ? this.props.weights[this.props.weights.length - 1] : this.props.weights[foundIndex - 1]) :\r\n          (foundIndex < this.props.weights.length - 1 ? this.props.weights[foundIndex + 1] : this.props.weights[0]);\r\n\r\n        const focusLocation = this._weightsContainer.querySelector(`#${this.buildIdForWeight(nextWeight)}`) as HTMLButtonElement;\r\n        // istanbul ignore else\r\n        if (focusLocation) {\r\n          focusLocation.focus();\r\n          event.preventDefault();\r\n          event.stopPropagation();\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  private _handleKeyDown = (event: React.KeyboardEvent<any>) => {\r\n    if (event.key === SpecialKey.Enter) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      const weightButton = document.activeElement as HTMLElement;\r\n      // istanbul ignore else\r\n      if (weightButton.tagName === \"BUTTON\") {\r\n        try {\r\n          const values = weightButton.id.split(\"-\");\r\n          // istanbul ignore else\r\n          if (values.length) {\r\n            const weight = parseInt(values[values.length - 1], 10);\r\n            // istanbul ignore else\r\n            if (!isNaN(weight)) {\r\n              // istanbul ignore else\r\n              if (this.props.onLineWeightPick)\r\n                this.props.onLineWeightPick(weight);\r\n            }\r\n          }\r\n        } catch { }\r\n      }\r\n      this._closePopup();\r\n    } else {\r\n      switch (event.key) {\r\n        case SpecialKey.ArrowDown:\r\n          this.moveFocusInPopup(false, event);\r\n          break;\r\n        case SpecialKey.ArrowUp:\r\n          this.moveFocusInPopup(true, event);\r\n          break;\r\n      }\r\n    }\r\n  };\r\n\r\n  private _setWeightContainer = (el: any) => {\r\n    this._weightsContainer = el;\r\n  };\r\n\r\n  private renderPopup(title: string | undefined) {\r\n    return (\r\n      <div className=\"components-weightpicker-popup-container\">\r\n        {title && <h4>{title}</h4>}\r\n        {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\r\n        <ul data-testid=\"components-weightpicker-popup-lines\" className=\"components-weightpicker-popup-lines\" onKeyDown={this._handleKeyDown} ref={this._setWeightContainer}>\r\n          {this.props.weights.map((weight, index) => {\r\n            const classNames = classnames(\r\n              \"components-weightpicker-swatch\",\r\n              weight === this.props.activeWeight && \"active\",\r\n            );\r\n            return (<LineWeightSwatch\r\n              className={classNames}\r\n              key={index}\r\n              colorDef={this.props.colorDef}\r\n              id={this.buildIdForWeight(weight)}\r\n              hideLabel={this.props.hideLabel}\r\n              onClick={this._handleWeightPicked.bind(this, weight)}\r\n              weight={weight} />);\r\n          })\r\n          }\r\n        </ul>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** @internal */\r\n  public override render() {\r\n    const buttonClassNames = classnames(\r\n      \"components-weightpicker-button\",\r\n      this.props.className,\r\n    );\r\n\r\n    return (\r\n      <>\r\n        <div ref={this._target} style={this.props.style} >\r\n          <LineWeightSwatch\r\n            data-testid=\"components-weightpicker-button\"\r\n            className={buttonClassNames}\r\n            weight={this.props.activeWeight}\r\n            colorDef={this.props.colorDef}\r\n            readonly={this.props.readonly}\r\n            disabled={this.props.disabled}\r\n            hideLabel={this.props.hideLabel}\r\n            aria-haspopup=\"listbox\"\r\n            aria-expanded={this.state.showPopup}\r\n            onClick={this._togglePopup} />\r\n        </div>\r\n        <ElementResizeObserver watchedElement={this.state.targetElement} render=\r\n          {({ width }) => (\r\n            <Popup\r\n              className=\"components-weightpicker-popup\"\r\n              style={{ width: `${width}px` }}\r\n              isOpen={this.state.showPopup}\r\n              position={RelativePosition.Bottom}\r\n              offset={0}\r\n              showShadow={false}\r\n              onClose={this._closePopup}\r\n              onOpen={this._onPopupOpened}\r\n              focusTarget={`#${this.buildIdForWeight(this.props.activeWeight)}`}\r\n              moveFocus={true}\r\n              target={this.state.targetElement}\r\n              closeOnNestedPopupOutsideClick\r\n            >\r\n              {this.renderPopup(this.props.dropDownTitle)}\r\n            </Popup>\r\n          )}\r\n        />\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/cjs/imodel-components-react/lineweight/WeightPickerButton.scss

@@ -3,12 +3,11 @@
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
-@import "~@itwin/core-react/lib/cjs/core-react/button/button";
 
 .components-weightpicker-button {
-  color: $buic-foreground-body;
-  background: $buic-background-control;
-  border: 1px solid $buic-inputs-border;
+  color: var(--iui-color-text);
+  background: var(--iui-color-background);
+  border: 1px solid var(--iui-color-border-foreground);
   border-radius: var(--iui-border-radius-1);
   min-width: 100px;
 
@@ -18,18 +17,18 @@
 
   &:active,
   &:focus {
-    @include uicore-buttons-button-focused;
+    box-shadow: $buic-focus-boxshadow 0px 0px 0px 2px;
   }
 }
 
 .components-weightpicker-popup {
   &.core-popup {
-    background: $buic-background-control;
-    border: 1px solid $buic-inputs-border;
+    background: var(--iui-color-background);
+    border: 1px solid var(--iui-color-border-foreground);
   }
 
   .components-weightpicker-popup-container {
-    color: $buic-foreground-body;
+    color: var(--iui-color-text);
     background: $buic-background-control;
     min-width: 60px;
     padding: 0 4px;

package/lib/cjs/imodel-components-react/navigationaids/Cube.d.ts

@@ -1,46 +1,46 @@
-/** @packageDocumentation
- * @module Cube
- */
-import "./Cube.scss";
-import * as React from "react";
-import { Matrix3d } from "@itwin/core-geometry";
-import { CommonProps } from "@itwin/core-react";
-/** Cube Face enumeration
- * @public
- */
-export declare enum Face {
-    None = "",
-    Left = "left",
-    Right = "right",
-    Back = "back",
-    Front = "front",
-    Bottom = "bottom",
-    Top = "top"
-}
-/** Properties for the [[Cube]] React component
- * @public
- */
-export interface CubeProps extends React.AllHTMLAttributes<HTMLDivElement>, CommonProps {
-    faces?: {
-        [key: string]: React.ReactNode;
-    };
-    rotMatrix: Matrix3d;
-}
-/** Cube React component used by the 3d Cube Navigation Aid
- * @public
- */
-export declare class Cube extends React.PureComponent<CubeProps> {
-    render(): React.ReactNode;
-}
-/** @internal */
-export interface CubeFaceProps extends React.AllHTMLAttributes<HTMLDivElement> {
-    rotMatrix: Matrix3d;
-    face: Face;
-}
-/** @internal */
-export declare class CubeFace extends React.Component<CubeFaceProps> {
-    private _faceWidth;
-    render(): React.ReactNode;
-    private getCSSClassNameFromFace;
-}
+/** @packageDocumentation
+ * @module Cube
+ */
+import "./Cube.scss";
+import * as React from "react";
+import { Matrix3d } from "@itwin/core-geometry";
+import { CommonProps } from "@itwin/core-react";
+/** Cube Face enumeration
+ * @public
+ */
+export declare enum Face {
+    None = "",
+    Left = "left",
+    Right = "right",
+    Back = "back",
+    Front = "front",
+    Bottom = "bottom",
+    Top = "top"
+}
+/** Properties for the [[Cube]] React component
+ * @public
+ */
+export interface CubeProps extends React.AllHTMLAttributes<HTMLDivElement>, CommonProps {
+    faces?: {
+        [key: string]: React.ReactNode;
+    };
+    rotMatrix: Matrix3d;
+}
+/** Cube React component used by the 3d Cube Navigation Aid
+ * @public
+ */
+export declare class Cube extends React.PureComponent<CubeProps> {
+    render(): React.ReactNode;
+}
+/** @internal */
+export interface CubeFaceProps extends React.AllHTMLAttributes<HTMLDivElement> {
+    rotMatrix: Matrix3d;
+    face: Face;
+}
+/** @internal */
+export declare class CubeFace extends React.Component<CubeFaceProps> {
+    private _faceWidth;
+    render(): React.ReactNode;
+    private getCSSClassNameFromFace;
+}
 //# sourceMappingURL=Cube.d.ts.map