@itwin/imodel-components-react 4.0.0 → 4.0.1

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

@@ -1,48 +1,48 @@
-/*---------------------------------------------------------------------------------------------
-* 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/style/themecolors";
-
-.components-lineweight-swatch {
-  font-size: var(--iui-font-size-1);
-  color: var(--iui-color-text);
-  border: none;
-  background: inherit;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 3px 15px 3px 0;
-  min-height: 22px;
-  box-sizing: border-box;
-
-  // remove inner focus ring that is specific to Firefox.
-  &::-moz-focus-inner {
-    border: 0px;
-  }
-
-  &:focus {
-    outline: 1px solid $buic-row-selection;
-  }
-
-  &[disabled] {
-    opacity: 0.2;
-    cursor: default;
-  }
-
-  > span {
-    width: 1.5em;
-    text-align: right;
-  }
-
-  > div {
-    flex: 1;
-    background: $buic-foreground-body;
-    margin-left: 15px;
-  }
-}
-
-.components-lineweight-swatch.hide-label > span {
-  display: none;
-}
+/*---------------------------------------------------------------------------------------------
+* 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/style/themecolors";
+
+.components-lineweight-swatch {
+  font-size: var(--iui-font-size-1);
+  color: var(--iui-color-text);
+  border: none;
+  background: inherit;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 3px 15px 3px 0;
+  min-height: 22px;
+  box-sizing: border-box;
+
+  // remove inner focus ring that is specific to Firefox.
+  &::-moz-focus-inner {
+    border: 0px;
+  }
+
+  &:focus {
+    outline: 1px solid $buic-row-selection;
+  }
+
+  &[disabled] {
+    opacity: 0.2;
+    cursor: default;
+  }
+
+  > span {
+    width: 1.5em;
+    text-align: right;
+  }
+
+  > div {
+    flex: 1;
+    background: $buic-foreground-body;
+    margin-left: 15px;
+  }
+}
+
+.components-lineweight-swatch.hide-label > span {
+  display: none;
+}

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

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

@@ -1,51 +1,51 @@
-/*---------------------------------------------------------------------------------------------
-* 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/style/themecolors";
-
-.components-weightpicker-button {
-  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;
-
-  &:not(.readonly):not([disabled]) {
-    cursor: pointer;
-  }
-
-  &:active,
-  &:focus {
-    box-shadow: $buic-focus-boxshadow 0px 0px 0px 2px;
-  }
-}
-
-.components-weightpicker-popup {
-  &.core-popup {
-    background: var(--iui-color-background);
-    border: 1px solid var(--iui-color-border-foreground);
-  }
-
-  .components-weightpicker-popup-container {
-    color: var(--iui-color-text);
-    background: $buic-background-control;
-    min-width: 60px;
-    padding: 0 4px;
-    border-radius: var(--iui-border-radius-1);
-
-    > ul {
-      padding: 4px 0;
-      list-style: none;
-      margin: 0.25rem 0;
-
-      > .components-weightpicker-swatch:hover {
-        background: $buic-row-hover;
-      }
-
-      > .components-weightpicker-swatch.active {
-        background: $buic-row-selection;
-      }
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* 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/style/themecolors";
+
+.components-weightpicker-button {
+  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;
+
+  &:not(.readonly):not([disabled]) {
+    cursor: pointer;
+  }
+
+  &:active,
+  &:focus {
+    box-shadow: $buic-focus-boxshadow 0px 0px 0px 2px;
+  }
+}
+
+.components-weightpicker-popup {
+  &.core-popup {
+    background: var(--iui-color-background);
+    border: 1px solid var(--iui-color-border-foreground);
+  }
+
+  .components-weightpicker-popup-container {
+    color: var(--iui-color-text);
+    background: $buic-background-control;
+    min-width: 60px;
+    padding: 0 4px;
+    border-radius: var(--iui-border-radius-1);
+
+    > ul {
+      padding: 4px 0;
+      list-style: none;
+      margin: 0.25rem 0;
+
+      > .components-weightpicker-swatch:hover {
+        background: $buic-row-hover;
+      }
+
+      > .components-weightpicker-swatch.active {
+        background: $buic-row-selection;
+      }
+    }
+  }
+}

package/lib/esm/imodel-components-react/navigationaids/Cube.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cube.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/navigationaids/Cube.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 Cube\r\n */\r\n\r\nimport \"./Cube.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Matrix3d } from \"@itwin/core-geometry\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\n\r\n/** Cube Face enumeration\r\n * @public\r\n */\r\nexport enum Face {\r\n  None = \"\",\r\n  Left = \"left\",\r\n  Right = \"right\",\r\n  Back = \"back\",\r\n  Front = \"front\",\r\n  Bottom = \"bottom\",\r\n  Top = \"top\",\r\n}\r\n\r\n/** Properties for the [[Cube]] React component\r\n * @public\r\n */\r\nexport interface CubeProps extends React.AllHTMLAttributes<HTMLDivElement>, CommonProps {\r\n  faces?: { [key: string]: React.ReactNode };\r\n  rotMatrix: Matrix3d;\r\n}\r\n\r\n/** Cube React component used by the 3d Cube Navigation Aid\r\n * @public\r\n */\r\nexport class Cube extends React.PureComponent<CubeProps> {\r\n  public override render(): React.ReactNode {\r\n    const { faces, rotMatrix, className, ...props } = this.props;\r\n    return (\r\n      <div className={classnames(\"components-cube-css3d\", className)} data-testid=\"components-cube\" {...props}>\r\n        {[Face.Front, Face.Back, Face.Right, Face.Left, Face.Top, Face.Bottom]\r\n          .map((face: Face) => {\r\n            const content = faces && faces[face];\r\n            return (\r\n              <CubeFace\r\n                key={face}\r\n                rotMatrix={rotMatrix}\r\n                face={face}>\r\n                {content}\r\n              </CubeFace>\r\n            );\r\n          })}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n\r\n/** @internal */\r\nexport interface CubeFaceProps extends React.AllHTMLAttributes<HTMLDivElement> {\r\n  rotMatrix: Matrix3d;\r\n  face: Face;\r\n}\r\n\r\n/** @internal */\r\nexport class CubeFace extends React.Component<CubeFaceProps> {\r\n  private _faceWidth: number = 0;\r\n  public override render(): React.ReactNode {\r\n    const { rotMatrix, face, style, children, ...props } = this.props;\r\n    if (face === Face.None)\r\n      return null;\r\n    const classes = classnames(\"face\", this.getCSSClassNameFromFace(face));\r\n    // orient face (flip because of y axis reversal, rotate as necessary)\r\n    let reorient: Matrix3d = Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, 1);\r\n    // Position face correctly (applies to rotation, as well as translation)\r\n    let reposition: Matrix3d = Matrix3d.createIdentity();\r\n    switch (this.props.face) {\r\n      case Face.Bottom:\r\n        reposition = Matrix3d.createRowValues(-1, 0, 0, 0, 1, 0, 0, 0, -1);\r\n        reorient = Matrix3d.createRowValues(-1, 0, 0, 0, 1, 0, 0, 0, 1);\r\n        break;\r\n      case Face.Right:\r\n        reposition = Matrix3d.createRowValues(0, 0, 1, 0, 1, 0, -1, 0, 0);\r\n        reorient = Matrix3d.createRowValues(0, 1, 0, 1, 0, 0, 0, 0, 1);\r\n        break;\r\n      case Face.Left:\r\n        reposition = Matrix3d.createRowValues(0, 0, -1, 0, 1, 0, 1, 0, 0);\r\n        reorient = Matrix3d.createRowValues(0, -1, 0, -1, 0, 0, 0, 0, 1);\r\n        break;\r\n      case Face.Back:\r\n        reposition = Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0);\r\n        reorient = Matrix3d.createRowValues(-1, 0, 0, 0, 1, 0, 0, 0, 1);\r\n        break;\r\n      case Face.Front:\r\n        reposition = Matrix3d.createRowValues(1, 0, 0, 0, 0, -1, 0, 1, 0);\r\n        reorient = Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, 1);\r\n        break;\r\n    }\r\n    const repositioned = rotMatrix.multiplyMatrixMatrix(reposition);\r\n    const vect = repositioned.multiplyXYZ(0, 0, this._faceWidth);\r\n    const m = repositioned.multiplyMatrixMatrix(reorient);\r\n    const list = [\r\n      m.at(0, 0), -m.at(1, 0), m.at(2, 0), 0,\r\n      m.at(0, 1), -m.at(1, 1), m.at(2, 1), 0,\r\n      m.at(0, 2), -m.at(1, 2), m.at(2, 2), 0,\r\n      vect.at(0), -vect.at(1), vect.at(2) - this._faceWidth /* move back faceWidth so face is on screen level */, 1,\r\n    ];\r\n    const transform = `matrix3d(${list.join(\", \")})`;\r\n    const s: React.CSSProperties = {\r\n      transform,\r\n      // eslint-disable-next-line @typescript-eslint/naming-convention\r\n      WebkitTransform: transform,\r\n      ...style,\r\n    };\r\n\r\n    return (\r\n      <div style={s}\r\n        data-testid={`components-cube-face-${face}`}\r\n        className={classes}\r\n        ref={(e) => { this._faceWidth = (e && e.clientWidth / 2) || 0; }}\r\n        {...props}>\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private getCSSClassNameFromFace(face: Face): string {\r\n    let className = \"\";\r\n\r\n    // istanbul ignore else\r\n    if (face !== Face.None)\r\n      className = `cube-${face}`;\r\n\r\n    return className;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"Cube.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/navigationaids/Cube.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 Cube\n */\n\nimport \"./Cube.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Matrix3d } from \"@itwin/core-geometry\";\nimport { CommonProps } from \"@itwin/core-react\";\n\n/** Cube Face enumeration\n * @public\n */\nexport enum Face {\n  None = \"\",\n  Left = \"left\",\n  Right = \"right\",\n  Back = \"back\",\n  Front = \"front\",\n  Bottom = \"bottom\",\n  Top = \"top\",\n}\n\n/** Properties for the [[Cube]] React component\n * @public\n */\nexport interface CubeProps extends React.AllHTMLAttributes<HTMLDivElement>, CommonProps {\n  faces?: { [key: string]: React.ReactNode };\n  rotMatrix: Matrix3d;\n}\n\n/** Cube React component used by the 3d Cube Navigation Aid\n * @public\n */\nexport class Cube extends React.PureComponent<CubeProps> {\n  public override render(): React.ReactNode {\n    const { faces, rotMatrix, className, ...props } = this.props;\n    return (\n      <div className={classnames(\"components-cube-css3d\", className)} data-testid=\"components-cube\" {...props}>\n        {[Face.Front, Face.Back, Face.Right, Face.Left, Face.Top, Face.Bottom]\n          .map((face: Face) => {\n            const content = faces && faces[face];\n            return (\n              <CubeFace\n                key={face}\n                rotMatrix={rotMatrix}\n                face={face}>\n                {content}\n              </CubeFace>\n            );\n          })}\n      </div>\n    );\n  }\n}\n\n/** @internal */\nexport interface CubeFaceProps extends React.AllHTMLAttributes<HTMLDivElement> {\n  rotMatrix: Matrix3d;\n  face: Face;\n}\n\n/** @internal */\nexport class CubeFace extends React.Component<CubeFaceProps> {\n  private _faceWidth: number = 0;\n  public override render(): React.ReactNode {\n    const { rotMatrix, face, style, children, ...props } = this.props;\n    if (face === Face.None)\n      return null;\n    const classes = classnames(\"face\", this.getCSSClassNameFromFace(face));\n    // orient face (flip because of y axis reversal, rotate as necessary)\n    let reorient: Matrix3d = Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, 1);\n    // Position face correctly (applies to rotation, as well as translation)\n    let reposition: Matrix3d = Matrix3d.createIdentity();\n    switch (this.props.face) {\n      case Face.Bottom:\n        reposition = Matrix3d.createRowValues(-1, 0, 0, 0, 1, 0, 0, 0, -1);\n        reorient = Matrix3d.createRowValues(-1, 0, 0, 0, 1, 0, 0, 0, 1);\n        break;\n      case Face.Right:\n        reposition = Matrix3d.createRowValues(0, 0, 1, 0, 1, 0, -1, 0, 0);\n        reorient = Matrix3d.createRowValues(0, 1, 0, 1, 0, 0, 0, 0, 1);\n        break;\n      case Face.Left:\n        reposition = Matrix3d.createRowValues(0, 0, -1, 0, 1, 0, 1, 0, 0);\n        reorient = Matrix3d.createRowValues(0, -1, 0, -1, 0, 0, 0, 0, 1);\n        break;\n      case Face.Back:\n        reposition = Matrix3d.createRowValues(1, 0, 0, 0, 0, 1, 0, -1, 0);\n        reorient = Matrix3d.createRowValues(-1, 0, 0, 0, 1, 0, 0, 0, 1);\n        break;\n      case Face.Front:\n        reposition = Matrix3d.createRowValues(1, 0, 0, 0, 0, -1, 0, 1, 0);\n        reorient = Matrix3d.createRowValues(1, 0, 0, 0, -1, 0, 0, 0, 1);\n        break;\n    }\n    const repositioned = rotMatrix.multiplyMatrixMatrix(reposition);\n    const vect = repositioned.multiplyXYZ(0, 0, this._faceWidth);\n    const m = repositioned.multiplyMatrixMatrix(reorient);\n    const list = [\n      m.at(0, 0), -m.at(1, 0), m.at(2, 0), 0,\n      m.at(0, 1), -m.at(1, 1), m.at(2, 1), 0,\n      m.at(0, 2), -m.at(1, 2), m.at(2, 2), 0,\n      vect.at(0), -vect.at(1), vect.at(2) - this._faceWidth /* move back faceWidth so face is on screen level */, 1,\n    ];\n    const transform = `matrix3d(${list.join(\", \")})`;\n    const s: React.CSSProperties = {\n      transform,\n      // eslint-disable-next-line @typescript-eslint/naming-convention\n      WebkitTransform: transform,\n      ...style,\n    };\n\n    return (\n      <div style={s}\n        data-testid={`components-cube-face-${face}`}\n        className={classes}\n        ref={(e) => { this._faceWidth = (e && e.clientWidth / 2) || 0; }}\n        {...props}>\n        {children}\n      </div>\n    );\n  }\n\n  private getCSSClassNameFromFace(face: Face): string {\n    let className = \"\";\n\n    // istanbul ignore else\n    if (face !== Face.None)\n      className = `cube-${face}`;\n\n    return className;\n  }\n}\n"]}

package/lib/esm/imodel-components-react/navigationaids/Cube.scss

@@ -1,19 +1,19 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-$cube-width: 128px;
-$cube-side-width: 12px;
-
-.components-cube-css3d {
-  width: $cube-width;
-  height: $cube-width;
-  perspective: 300px;
-  transform-style: preserve-3d;
-  .face {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    backface-visibility: inherit;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+$cube-width: 128px;
+$cube-side-width: 12px;
+
+.components-cube-css3d {
+  width: $cube-width;
+  height: $cube-width;
+  perspective: 300px;
+  transform-style: preserve-3d;
+  .face {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    backface-visibility: inherit;
+  }
+}

package/lib/esm/imodel-components-react/navigationaids/CubeNavigationAid.js

@@ -137,9 +137,8 @@ class CubeNavigationAid extends React.Component {
             }
         };
         this._handleCellHoverChange = (vect, state) => {
-            var _a, _b;
             if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.props.onAnimationEnd?.();
                 return;
             }
             const hoverMap = this.state.hoverMap;
@@ -154,10 +153,9 @@ class CubeNavigationAid extends React.Component {
             return false;
         };
         this._onArrowClick = (arrow) => {
-            var _a, _b;
             if (this._isInteractionLocked()) {
                 // istanbul ignore next
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.props.onAnimationEnd?.();
                 return;
             }
             const { newRotation, face } = this.getArrowRotationAndFace(arrow);
@@ -165,9 +163,8 @@ class CubeNavigationAid extends React.Component {
         };
         this._lastClientXY = Vector2d.createZero();
         this._handleBoxMouseDown = (event) => {
-            var _a, _b;
             if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.props.onAnimationEnd?.();
                 return;
             }
             event.preventDefault();
@@ -192,9 +189,8 @@ class CubeNavigationAid extends React.Component {
         };
         // istanbul ignore next - unable to test touch
         this._handleBoxTouchStart = (event) => {
-            var _a, _b;
             if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.props.onAnimationEnd?.();
                 return;
             }
             if (1 !== event.targetTouches.length)
@@ -223,9 +219,8 @@ class CubeNavigationAid extends React.Component {
             window.removeEventListener("touchend", this._onTouchEnd);
         };
         this._handleFaceCellClick = (pos, face) => {
-            var _a, _b;
             if (this._isInteractionLocked()) {
-                (_b = (_a = this.props).onAnimationEnd) === null || _b === void 0 ? void 0 : _b.call(_a);
+                this.props.onAnimationEnd?.();
                 return;
             }
             const { endRotMatrix } = this.state;