@itwin/imodel-components-react 4.0.0-dev.12 → 4.0.0-dev.14

package/lib/esm/imodel-components-react/lineweight/Swatch.d.ts

@@ -1,34 +1,34 @@
-/** @packageDocumentation
- * @module LineWeight
- */
-import "./Swatch.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[LineWeightSwatch]] React component
- * @public
- */
-export interface LineWeightSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** color specification */
-    weight: number;
-    /** color specification */
-    colorDef?: ColorDef;
-    /** hide the weight label */
-    hideLabel?: boolean;
-    /** Disabled or not */
-    disabled?: boolean;
-    /** Readonly or not */
-    readonly?: boolean;
-    /** function to run when user selects a line weight swatch */
-    onClick?: () => void;
-}
-/** LineWeightSwatch Functional component
- * @public
- */
-export declare class LineWeightSwatch extends React.PureComponent<LineWeightSwatchProps> {
-    /** @internal */
-    constructor(props: LineWeightSwatchProps);
-    componentDidMount(): void;
-    render(): JSX.Element;
-}
+/** @packageDocumentation
+ * @module LineWeight
+ */
+import "./Swatch.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[LineWeightSwatch]] React component
+ * @public
+ */
+export interface LineWeightSwatchProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** color specification */
+    weight: number;
+    /** color specification */
+    colorDef?: ColorDef;
+    /** hide the weight label */
+    hideLabel?: boolean;
+    /** Disabled or not */
+    disabled?: boolean;
+    /** Readonly or not */
+    readonly?: boolean;
+    /** function to run when user selects a line weight swatch */
+    onClick?: () => void;
+}
+/** LineWeightSwatch Functional component
+ * @public
+ */
+export declare class LineWeightSwatch extends React.PureComponent<LineWeightSwatchProps> {
+    /** @internal */
+    constructor(props: LineWeightSwatchProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
 //# sourceMappingURL=Swatch.d.ts.map

package/lib/esm/imodel-components-react/lineweight/Swatch.js

@@ -1,60 +1,60 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./Swatch.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { getCSSColorFromDef } from "../color/getCSSColorFromDef";
-/** LineWeightSwatch Functional component
- * @public
- */
-export class LineWeightSwatch extends React.PureComponent {
-    /** @internal */
-    constructor(props) {
-        super(props);
-    }
-    componentDidMount() {
-        // eslint-disable-next-line no-console
-        // console.log(`LineWeightSwatchProps.componentDidMount setFocusRef=${this.props.setFocusRef} focusRef=${this.props.focusRef && this.props.focusRef.current ? "set" : "unset"}`);
-    }
-    render() {
-        const { onClick, colorDef, weight, hideLabel, className, // do not pass on color swatch specific props
-        // eslint-disable-next-line comma-dangle
-        disabled, readonly, ...otherProps // pass-through props
-         } = this.props;
-        let rgbaString = "";
-        if (colorDef) {
-            rgbaString = getCSSColorFromDef(colorDef);
-        }
-        const buttonStyle = colorDef ?
-            {
-                ...this.props.style,
-                color: rgbaString,
-            } :
-            {
-                ...this.props.style,
-            };
-        const svgStyle = colorDef ?
-            {
-                height: `${weight}px`,
-                background: rgbaString,
-            } :
-            {
-                height: `${weight}px`,
-            };
-        const handleClick = (_e) => {
-            // istanbul ignore else
-            if (onClick)
-                onClick();
-        };
-        const classes = classnames("components-lineweight-swatch", hideLabel && "hide-label", readonly && "readonly", className);
-        return (React.createElement("button", { ...otherProps, style: buttonStyle, className: classes, onClick: handleClick, disabled: disabled },
-            !hideLabel && React.createElement("span", null, weight.toFixed(0)),
-            React.createElement("div", { style: svgStyle })));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./Swatch.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { getCSSColorFromDef } from "../color/getCSSColorFromDef";
+/** LineWeightSwatch Functional component
+ * @public
+ */
+export class LineWeightSwatch extends React.PureComponent {
+    /** @internal */
+    constructor(props) {
+        super(props);
+    }
+    componentDidMount() {
+        // eslint-disable-next-line no-console
+        // console.log(`LineWeightSwatchProps.componentDidMount setFocusRef=${this.props.setFocusRef} focusRef=${this.props.focusRef && this.props.focusRef.current ? "set" : "unset"}`);
+    }
+    render() {
+        const { onClick, colorDef, weight, hideLabel, className, // do not pass on color swatch specific props
+        // eslint-disable-next-line comma-dangle
+        disabled, readonly, ...otherProps // pass-through props
+         } = this.props;
+        let rgbaString = "";
+        if (colorDef) {
+            rgbaString = getCSSColorFromDef(colorDef);
+        }
+        const buttonStyle = colorDef ?
+            {
+                ...this.props.style,
+                color: rgbaString,
+            } :
+            {
+                ...this.props.style,
+            };
+        const svgStyle = colorDef ?
+            {
+                height: `${weight}px`,
+                background: rgbaString,
+            } :
+            {
+                height: `${weight}px`,
+            };
+        const handleClick = (_e) => {
+            // istanbul ignore else
+            if (onClick)
+                onClick();
+        };
+        const classes = classnames("components-lineweight-swatch", hideLabel && "hide-label", readonly && "readonly", className);
+        return (React.createElement("button", { ...otherProps, style: buttonStyle, className: classes, onClick: handleClick, disabled: disabled },
+            !hideLabel && React.createElement("span", null, weight.toFixed(0)),
+            React.createElement("div", { style: svgStyle })));
+    }
+}
 //# sourceMappingURL=Swatch.js.map

package/lib/esm/imodel-components-react/lineweight/WeightPickerButton.d.ts

@@ -1,61 +1,61 @@
-/** @packageDocumentation
- * @module LineWeight
- */
-import "./WeightPickerButton.scss";
-import * as React from "react";
-import { ColorDef } from "@itwin/core-common";
-import { CommonProps } from "@itwin/core-react";
-/** Properties for the [[WeightPickerButton]] React component
- * @public
- */
-export interface WeightPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
-    /** active weight */
-    activeWeight: number;
-    /** available weights */
-    weights: number[];
-    /** color specification */
-    colorDef?: ColorDef;
-    /** function to run when user selects weight swatch */
-    onLineWeightPick?: ((weight: number) => void) | undefined;
-    /** Disabled or not */
-    disabled?: boolean;
-    /** Readonly or not */
-    readonly?: boolean;
-    /** hide the weight label */
-    hideLabel?: boolean;
-    /** Title to show at top of DropDown */
-    dropDownTitle?: string;
-}
-/** @internal */
-interface WeightPickerState {
-    showPopup: boolean;
-    targetElement: HTMLDivElement | null;
-}
-/** WeightPickerButton component
- * @public
- */
-export declare class WeightPickerButton extends React.PureComponent<WeightPickerProps, WeightPickerState> {
-    private _target;
-    private _weightsContainer;
-    private _focusTarget;
-    /** @internal */
-    constructor(props: WeightPickerProps);
-    setFocus(): void;
-    static defaultProps: {
-        weights: number[];
-    };
-    private _togglePopup;
-    private _onPopupOpened;
-    private _closePopup;
-    private _handleWeightPicked;
-    componentDidMount(): void;
-    private buildIdForWeight;
-    private moveFocusInPopup;
-    private _handleKeyDown;
-    private _setWeightContainer;
-    private renderPopup;
-    /** @internal */
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module LineWeight
+ */
+import "./WeightPickerButton.scss";
+import * as React from "react";
+import { ColorDef } from "@itwin/core-common";
+import { CommonProps } from "@itwin/core-react";
+/** Properties for the [[WeightPickerButton]] React component
+ * @public
+ */
+export interface WeightPickerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, CommonProps {
+    /** active weight */
+    activeWeight: number;
+    /** available weights */
+    weights: number[];
+    /** color specification */
+    colorDef?: ColorDef;
+    /** function to run when user selects weight swatch */
+    onLineWeightPick?: ((weight: number) => void) | undefined;
+    /** Disabled or not */
+    disabled?: boolean;
+    /** Readonly or not */
+    readonly?: boolean;
+    /** hide the weight label */
+    hideLabel?: boolean;
+    /** Title to show at top of DropDown */
+    dropDownTitle?: string;
+}
+/** @internal */
+interface WeightPickerState {
+    showPopup: boolean;
+    targetElement: HTMLDivElement | null;
+}
+/** WeightPickerButton component
+ * @public
+ */
+export declare class WeightPickerButton extends React.PureComponent<WeightPickerProps, WeightPickerState> {
+    private _target;
+    private _weightsContainer;
+    private _focusTarget;
+    /** @internal */
+    constructor(props: WeightPickerProps);
+    setFocus(): void;
+    static defaultProps: {
+        weights: number[];
+    };
+    private _togglePopup;
+    private _onPopupOpened;
+    private _closePopup;
+    private _handleWeightPicked;
+    componentDidMount(): void;
+    private buildIdForWeight;
+    private moveFocusInPopup;
+    private _handleKeyDown;
+    private _setWeightContainer;
+    private renderPopup;
+    /** @internal */
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=WeightPickerButton.d.ts.map

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

@@ -1,134 +1,135 @@
-/*---------------------------------------------------------------------------------------------
-* 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
- */
-import "./WeightPickerButton.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { RelativePosition, SpecialKey } from "@itwin/appui-abstract";
-import { ElementResizeObserver, Popup } from "@itwin/core-react";
-import { LineWeightSwatch } from "./Swatch";
-/** WeightPickerButton component
- * @public
- */
-export 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 === 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 SpecialKey.ArrowDown:
-                        this.moveFocusInPopup(false, event);
-                        break;
-                    case 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 = classnames("components-weightpicker-swatch", weight === this.props.activeWeight && "active");
-                return (React.createElement(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 = classnames("components-weightpicker-button", this.props.className);
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { ref: this._target, style: this.props.style },
-                React.createElement(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(ElementResizeObserver, { watchedElement: this.state.targetElement, render: ({ width }) => (React.createElement(Popup, { className: "components-weightpicker-popup", style: { width: `${width}px` }, isOpen: this.state.showPopup, position: 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],
-};
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./WeightPickerButton.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { RelativePosition, SpecialKey } from "@itwin/appui-abstract";
+import { ElementResizeObserver, Popup } from "@itwin/core-react";
+import { LineWeightSwatch } from "./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 === 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 SpecialKey.ArrowDown:
+                        this.moveFocusInPopup(false, event);
+                        break;
+                    case 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 = classnames("components-weightpicker-swatch", weight === this.props.activeWeight && "active");
+                return (React.createElement(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 = classnames("components-weightpicker-button", this.props.className);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { ref: this._target, style: this.props.style },
+                React.createElement(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(ElementResizeObserver, { watchedElement: this.state.targetElement, render: ({ width }) => (React.createElement(Popup, { className: "components-weightpicker-popup", style: { width: `${width}px` }, isOpen: this.state.showPopup, position: 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],
+};
+export { WeightPickerButton };
 //# sourceMappingURL=WeightPickerButton.js.map