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

package/lib/esm/imodel-components-react/timeline/BaseTimelineDataProvider.js

@@ -1,66 +1,66 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Timeline
- */
-/** Base Timeline Data Provider
- * @alpha
- */
-export class BaseTimelineDataProvider {
-    constructor(viewport) {
-        this.id = "TestTimelineDataProvider";
-        this.viewId = "";
-        this.supportsTimelineAnimation = false; // set to true when provider determines animation data is available.
-        this.animationFraction = 0; // value from 0.0 to 1.0 that specifies the percentage complete for the animation.
-        this._settings = {
-            duration: 20 * 1000,
-            loop: true,
-        };
-        // istanbul ignore next
-        this.onPlaybackSettingChanged = (_settings) => {
-        };
-        // istanbul ignore next
-        this.onAnimationFractionChanged = (_animationFraction) => {
-        };
-        this._viewport = viewport;
-        // istanbul ignore if - WIP
-        if (viewport)
-            this.viewId = viewport.view.id;
-    }
-    // istanbul ignore next
-    async loadTimelineData() {
-        return false;
-    }
-    /** Called to get the initial scrubber location */
-    get initialDuration() {
-        return this.duration * this.animationFraction;
-    }
-    /** Called to get playback duration  */
-    get duration() {
-        return (this.getSettings().duration) ? this.getSettings().duration : /* istanbul ignore next */ 20000;
-    }
-    // istanbul ignore next - WIP
-    set viewport(viewport) {
-        this._viewport = viewport;
-        if (viewport)
-            this.viewId = viewport.view.id;
-        else
-            this.viewId = "";
-    }
-    // istanbul ignore next - WIP
-    get viewport() {
-        return this._viewport;
-    }
-    get loop() {
-        return (undefined === this.getSettings().loop) ? /* istanbul ignore next */ false : this.getSettings().loop;
-    }
-    getSettings() {
-        return this._settings;
-    }
-    updateSettings(settings) {
-        this._settings = { ...this._settings, ...settings };
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Timeline
+ */
+/** Base Timeline Data Provider
+ * @alpha
+ */
+export class BaseTimelineDataProvider {
+    constructor(viewport) {
+        this.id = "TestTimelineDataProvider";
+        this.viewId = "";
+        this.supportsTimelineAnimation = false; // set to true when provider determines animation data is available.
+        this.animationFraction = 0; // value from 0.0 to 1.0 that specifies the percentage complete for the animation.
+        this._settings = {
+            duration: 20 * 1000,
+            loop: true,
+        };
+        // istanbul ignore next
+        this.onPlaybackSettingChanged = (_settings) => {
+        };
+        // istanbul ignore next
+        this.onAnimationFractionChanged = (_animationFraction) => {
+        };
+        this._viewport = viewport;
+        // istanbul ignore if - WIP
+        if (viewport)
+            this.viewId = viewport.view.id;
+    }
+    // istanbul ignore next
+    async loadTimelineData() {
+        return false;
+    }
+    /** Called to get the initial scrubber location */
+    get initialDuration() {
+        return this.duration * this.animationFraction;
+    }
+    /** Called to get playback duration  */
+    get duration() {
+        return (this.getSettings().duration) ? this.getSettings().duration : /* istanbul ignore next */ 20000;
+    }
+    // istanbul ignore next - WIP
+    set viewport(viewport) {
+        this._viewport = viewport;
+        if (viewport)
+            this.viewId = viewport.view.id;
+        else
+            this.viewId = "";
+    }
+    // istanbul ignore next - WIP
+    get viewport() {
+        return this._viewport;
+    }
+    get loop() {
+        return (undefined === this.getSettings().loop) ? /* istanbul ignore next */ false : this.getSettings().loop;
+    }
+    getSettings() {
+        return this._settings;
+    }
+    updateSettings(settings) {
+        this._settings = { ...this._settings, ...settings };
+    }
+}
 //# sourceMappingURL=BaseTimelineDataProvider.js.map

package/lib/esm/imodel-components-react/timeline/InlineEdit.d.ts

@@ -1,28 +1,28 @@
-import "./InlineEdit.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-interface InlineEditProps extends CommonProps {
-    defaultValue: string;
-    onChange?: (value: string) => void;
-}
-interface InlineEditState {
-    value: string;
-    originalValue: string;
-}
-/** Duration Inline Editor
- * @internal
- */
-export declare class InlineEdit extends React.Component<InlineEditProps, InlineEditState> {
-    private _inputRef;
-    constructor(props: InlineEditProps);
-    /** @internal */
-    componentDidUpdate(prevProps: InlineEditProps, _prevState: InlineEditState): void;
-    private _onBlur;
-    private _onFocus;
-    private _onKeyDown;
-    private _onChange;
-    private _sendChange;
-    render(): JSX.Element;
-}
-export {};
+import "./InlineEdit.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+interface InlineEditProps extends CommonProps {
+    defaultValue: string;
+    onChange?: (value: string) => void;
+}
+interface InlineEditState {
+    value: string;
+    originalValue: string;
+}
+/** Duration Inline Editor
+ * @internal
+ */
+export declare class InlineEdit extends React.Component<InlineEditProps, InlineEditState> {
+    private _inputRef;
+    constructor(props: InlineEditProps);
+    /** @internal */
+    componentDidUpdate(prevProps: InlineEditProps, _prevState: InlineEditState): void;
+    private _onBlur;
+    private _onFocus;
+    private _onKeyDown;
+    private _onChange;
+    private _sendChange;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=InlineEdit.d.ts.map

package/lib/esm/imodel-components-react/timeline/InlineEdit.js

@@ -1,56 +1,56 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import "./InlineEdit.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { SpecialKey } from "@itwin/appui-abstract";
-import { Input } from "@itwin/itwinui-react";
-/** Duration Inline Editor
- * @internal
- */
-export class InlineEdit extends React.Component {
-    constructor(props) {
-        super(props);
-        this._inputRef = React.createRef();
-        // istanbul ignore next
-        this._onBlur = (event) => {
-            this._sendChange(event.target.value);
-        };
-        this._onFocus = (event) => {
-            event.target.select();
-        };
-        this._onKeyDown = (event) => {
-            switch (event.key) {
-                case SpecialKey.Escape:
-                    this.setState((prevState) => ({ value: prevState.originalValue }), () => this._inputRef.current.select());
-                    break;
-                case SpecialKey.Enter:
-                    this._sendChange(this.state.value);
-                    break;
-            }
-        };
-        this._onChange = (event) => {
-            this.setState({ value: event.target.value });
-        };
-        this.state = { value: this.props.defaultValue, originalValue: this.props.defaultValue };
-    }
-    /** @internal */
-    componentDidUpdate(prevProps, _prevState) {
-        if (prevProps.defaultValue !== this.props.defaultValue) {
-            this.setState((_, props) => {
-                return { value: props.defaultValue, originalValue: props.defaultValue };
-            });
-        }
-    }
-    _sendChange(value) {
-        // istanbul ignore else
-        if (this.props.onChange)
-            this.props.onChange(value);
-    }
-    render() {
-        return (React.createElement(Input, { "data-testid": "timeline-duration-edit-input", className: classnames("inline-edit-input", this.props.className), style: this.props.style, ref: this._inputRef, type: "text", value: this.state.value, size: "small", onFocus: this._onFocus, onBlur: this._onBlur, onKeyDown: this._onKeyDown, onChange: this._onChange }));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import "./InlineEdit.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { SpecialKey } from "@itwin/appui-abstract";
+import { Input } from "@itwin/itwinui-react";
+/** Duration Inline Editor
+ * @internal
+ */
+export class InlineEdit extends React.Component {
+    constructor(props) {
+        super(props);
+        this._inputRef = React.createRef();
+        // istanbul ignore next
+        this._onBlur = (event) => {
+            this._sendChange(event.target.value);
+        };
+        this._onFocus = (event) => {
+            event.target.select();
+        };
+        this._onKeyDown = (event) => {
+            switch (event.key) {
+                case SpecialKey.Escape:
+                    this.setState((prevState) => ({ value: prevState.originalValue }), () => this._inputRef.current.select());
+                    break;
+                case SpecialKey.Enter:
+                    this._sendChange(this.state.value);
+                    break;
+            }
+        };
+        this._onChange = (event) => {
+            this.setState({ value: event.target.value });
+        };
+        this.state = { value: this.props.defaultValue, originalValue: this.props.defaultValue };
+    }
+    /** @internal */
+    componentDidUpdate(prevProps, _prevState) {
+        if (prevProps.defaultValue !== this.props.defaultValue) {
+            this.setState((_, props) => {
+                return { value: props.defaultValue, originalValue: props.defaultValue };
+            });
+        }
+    }
+    _sendChange(value) {
+        // istanbul ignore else
+        if (this.props.onChange)
+            this.props.onChange(value);
+    }
+    render() {
+        return (React.createElement(Input, { "data-testid": "timeline-duration-edit-input", className: classnames("inline-edit-input", this.props.className), style: this.props.style, ref: this._inputRef, type: "text", value: this.state.value, size: "small", onFocus: this._onFocus, onBlur: this._onBlur, onKeyDown: this._onKeyDown, onChange: this._onChange }));
+    }
+}
 //# sourceMappingURL=InlineEdit.js.map

package/lib/esm/imodel-components-react/timeline/InlineEdit.scss

@@ -5,7 +5,7 @@
 @import "~@itwin/core-react/lib/cjs/core-react/style/themecolors";
 
 .inline-edit-input {
-  color: $buic-foreground-body;
+  color: var(--iui-color-text);
   background: inherit;
   border: 1px solid transparent;
   box-sizing: border-box;
@@ -22,6 +22,6 @@
     background: $buic-background-1;
     border: 1px solid $buic-background-5;
     outline: none;
-    color: $buic-foreground-activehover;
+    color: var(--iui-color-text-hover);
   }
 }

package/lib/esm/imodel-components-react/timeline/PlayerButton.d.ts

@@ -1,34 +1,34 @@
-import "./PlayerButton.scss";
-import * as React from "react";
-import { CommonProps } from "@itwin/core-react";
-/** Player button used by buttons on timeline control
- * @internal
- */
-export declare class PlayerButton extends React.PureComponent<any> {
-    private _onClick;
-    render(): JSX.Element;
-}
-/** Properties for Play/Pause button used on timeline control
- * @internal
- */
-export interface PlayerButtonProps extends CommonProps {
-    isPlaying: boolean;
-    onPlay?: () => void;
-    onPause?: () => void;
-    tooltip?: string;
-}
-interface PlayButtonState {
-    isPlaying: boolean;
-}
-/** Play/Pause button used on timeline control
- * @internal
- */
-export declare class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {
-    constructor(props: PlayerButtonProps, context?: any);
-    /** @internal */
-    componentDidUpdate(): void;
-    private _onClick;
-    render(): JSX.Element;
-}
-export {};
+import "./PlayerButton.scss";
+import * as React from "react";
+import { CommonProps } from "@itwin/core-react";
+/** Player button used by buttons on timeline control
+ * @internal
+ */
+export declare class PlayerButton extends React.PureComponent<any> {
+    private _onClick;
+    render(): JSX.Element;
+}
+/** Properties for Play/Pause button used on timeline control
+ * @internal
+ */
+export interface PlayerButtonProps extends CommonProps {
+    isPlaying: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    tooltip?: string;
+}
+interface PlayButtonState {
+    isPlaying: boolean;
+}
+/** Play/Pause button used on timeline control
+ * @internal
+ */
+export declare class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {
+    constructor(props: PlayerButtonProps, context?: any);
+    /** @internal */
+    componentDidUpdate(): void;
+    private _onClick;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=PlayerButton.d.ts.map

package/lib/esm/imodel-components-react/timeline/PlayerButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlayerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;IACxD,OAAO,CAAC,QAAQ,CAId;IAEc,MAAM;CAQvB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,eAAe,CAAC;gBAErE,KAAK,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,GAAG;IAMnD,gBAAgB;IACA,kBAAkB;IAMlC,OAAO,CAAC,QAAQ,CAcd;IAEc,MAAM;CAcvB"}
+{"version":3,"file":"PlayerButton.d.ts","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.tsx"],"names":[],"mappings":"AAIA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAQ,MAAM,mBAAmB,CAAC;AAItD;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC;IACxD,OAAO,CAAC,QAAQ,CAId;IAEc,MAAM;CAQvB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,eAAe;IACvB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,eAAe,CAAC;gBAErE,KAAK,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,GAAG;IAMnD,gBAAgB;IACA,kBAAkB;IAMlC,OAAO,CAAC,QAAQ,CAcd;IAEc,MAAM;CAcvB"}

package/lib/esm/imodel-components-react/timeline/PlayerButton.js

@@ -1,65 +1,69 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-import "./PlayerButton.scss";
-import classnames from "classnames";
-import * as React from "react";
-import { UiIModelComponents } from "../UiIModelComponents";
-/** Player button used by buttons on timeline control
- * @internal
- */
-export class PlayerButton extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this._onClick = () => {
-            // istanbul ignore else
-            if (this.props.onClick)
-                this.props.onClick();
-        };
-    }
-    render() {
-        const { icon, title } = this.props;
-        return (React.createElement("button", { "data-testid": this.props.className, className: classnames("player-button", this.props.className), onClick: this._onClick, title: title },
-            React.createElement("span", { className: classnames("icon", !!icon) })));
-    }
-}
-/** Play/Pause button used on timeline control
- * @internal
- */
-export class PlayButton extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-        this._onClick = () => {
-            const _isPlaying = !this.state.isPlaying;
-            this.setState({ isPlaying: _isPlaying });
-            if (_isPlaying) {
-                // istanbul ignore else
-                if (this.props.onPlay)
-                    this.props.onPlay();
-            }
-            else {
-                // istanbul ignore else
-                if (this.props.onPause)
-                    this.props.onPause();
-            }
-        };
-        this.state = { isPlaying: this.props.isPlaying };
-    }
-    /** @internal */
-    componentDidUpdate() {
-        if (this.props.isPlaying !== this.state.isPlaying) {
-            this.setState((_, props) => ({ isPlaying: props.isPlaying }));
-        }
-    }
-    render() {
-        const { tooltip } = this.props;
-        const iconClassName = this.state.isPlaying ? "icon icon-media-controls-pause" : "icon icon-media-controls-play";
-        let title = tooltip;
-        if (!title)
-            title = UiIModelComponents.translate(this.state.isPlaying ? "timeline.pause" : "timeline.play");
-        return (React.createElement("button", { "data-testid": this.props.className, title: title, className: classnames("player-button", this.props.className), onClick: this._onClick },
-            React.createElement("span", { className: iconClassName })));
-    }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+import "./PlayerButton.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Icon } from "@itwin/core-react";
+import { UiIModelComponents } from "../UiIModelComponents";
+import { SvgPause, SvgPlay } from "@itwin/itwinui-icons-react";
+/** Player button used by buttons on timeline control
+ * @internal
+ */
+export class PlayerButton extends React.PureComponent {
+    constructor() {
+        super(...arguments);
+        this._onClick = () => {
+            // istanbul ignore else
+            if (this.props.onClick)
+                this.props.onClick();
+        };
+    }
+    render() {
+        const { icon, title } = this.props;
+        return (React.createElement("button", { "data-testid": this.props.className, className: classnames("player-button", this.props.className), onClick: this._onClick, title: title },
+            React.createElement("span", { className: "icon" },
+                React.createElement(Icon, { iconSpec: icon }))));
+    }
+}
+/** Play/Pause button used on timeline control
+ * @internal
+ */
+export class PlayButton extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this._onClick = () => {
+            const _isPlaying = !this.state.isPlaying;
+            this.setState({ isPlaying: _isPlaying });
+            if (_isPlaying) {
+                // istanbul ignore else
+                if (this.props.onPlay)
+                    this.props.onPlay();
+            }
+            else {
+                // istanbul ignore else
+                if (this.props.onPause)
+                    this.props.onPause();
+            }
+        };
+        this.state = { isPlaying: this.props.isPlaying };
+    }
+    /** @internal */
+    componentDidUpdate() {
+        if (this.props.isPlaying !== this.state.isPlaying) {
+            this.setState((_, props) => ({ isPlaying: props.isPlaying }));
+        }
+    }
+    render() {
+        const { tooltip } = this.props;
+        const iconSpec = this.state.isPlaying ? React.createElement(SvgPause, null) : React.createElement(SvgPlay, null);
+        let title = tooltip;
+        if (!title)
+            title = UiIModelComponents.translate(this.state.isPlaying ? "timeline.pause" : "timeline.play");
+        return (React.createElement("button", { "data-testid": this.props.className, title: title, className: classnames("player-button", this.props.className), onClick: this._onClick },
+            React.createElement("span", { className: "icon", "data-testid": this.state.isPlaying ? "pause" : "play" },
+                React.createElement(Icon, { iconSpec: iconSpec, "data-testid": this.state.isPlaying ? "pause" : "play" }))));
+    }
+}
 //# sourceMappingURL=PlayerButton.js.map

package/lib/esm/imodel-components-react/timeline/PlayerButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.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\nimport \"./PlayerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\n\r\n/** Player button used by buttons on timeline control\r\n * @internal\r\n */\r\nexport class PlayerButton extends React.PureComponent<any> {\r\n  private _onClick = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onClick)\r\n      this.props.onClick();\r\n  };\r\n\r\n  public override render() {\r\n    const { icon, title } = this.props;\r\n    return (\r\n      <button data-testid={this.props.className} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick} title={title}>\r\n        <span className={classnames(\"icon\", !!icon)}></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport interface PlayerButtonProps extends CommonProps {\r\n  isPlaying: boolean;\r\n  onPlay?: () => void;\r\n  onPause?: () => void;\r\n  tooltip?: string;\r\n}\r\n\r\ninterface PlayButtonState {\r\n  isPlaying: boolean;\r\n}\r\n\r\n/** Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {\r\n\r\n  constructor(props: PlayerButtonProps, context?: any) {\r\n    super(props, context);\r\n\r\n    this.state = { isPlaying: this.props.isPlaying };\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate() {\r\n    if (this.props.isPlaying !== this.state.isPlaying) {\r\n      this.setState((_, props) => ({ isPlaying: props.isPlaying }));\r\n    }\r\n  }\r\n\r\n  private _onClick = () => {\r\n    const _isPlaying = !this.state.isPlaying;\r\n\r\n    this.setState({ isPlaying: _isPlaying });\r\n\r\n    if (_isPlaying) {\r\n      // istanbul ignore else\r\n      if (this.props.onPlay)\r\n        this.props.onPlay();\r\n    } else {\r\n      // istanbul ignore else\r\n      if (this.props.onPause)\r\n        this.props.onPause();\r\n    }\r\n  };\r\n\r\n  public override render() {\r\n    const { tooltip } = this.props;\r\n    const iconClassName = this.state.isPlaying ? \"icon icon-media-controls-pause\" : \"icon icon-media-controls-play\";\r\n    let title = tooltip;\r\n\r\n    if (!title)\r\n      title = UiIModelComponents.translate(this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\");\r\n\r\n    return (\r\n      <button data-testid={this.props.className} title={title} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick}>\r\n        <span className={iconClassName}></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"PlayerButton.js","sourceRoot":"","sources":["../../../../src/imodel-components-react/timeline/PlayerButton.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\nimport \"./PlayerButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps, Icon } from \"@itwin/core-react\";\r\nimport { UiIModelComponents } from \"../UiIModelComponents\";\r\nimport { SvgPause, SvgPlay } from \"@itwin/itwinui-icons-react\";\r\n\r\n/** Player button used by buttons on timeline control\r\n * @internal\r\n */\r\nexport class PlayerButton extends React.PureComponent<any> {\r\n  private _onClick = () => {\r\n    // istanbul ignore else\r\n    if (this.props.onClick)\r\n      this.props.onClick();\r\n  };\r\n\r\n  public override render() {\r\n    const { icon, title } = this.props;\r\n    return (\r\n      <button data-testid={this.props.className} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick} title={title}>\r\n        <span className=\"icon\"><Icon iconSpec={icon} /></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n\r\n/** Properties for Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport interface PlayerButtonProps extends CommonProps {\r\n  isPlaying: boolean;\r\n  onPlay?: () => void;\r\n  onPause?: () => void;\r\n  tooltip?: string;\r\n}\r\n\r\ninterface PlayButtonState {\r\n  isPlaying: boolean;\r\n}\r\n\r\n/** Play/Pause button used on timeline control\r\n * @internal\r\n */\r\nexport class PlayButton extends React.Component<PlayerButtonProps, PlayButtonState> {\r\n\r\n  constructor(props: PlayerButtonProps, context?: any) {\r\n    super(props, context);\r\n\r\n    this.state = { isPlaying: this.props.isPlaying };\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate() {\r\n    if (this.props.isPlaying !== this.state.isPlaying) {\r\n      this.setState((_, props) => ({ isPlaying: props.isPlaying }));\r\n    }\r\n  }\r\n\r\n  private _onClick = () => {\r\n    const _isPlaying = !this.state.isPlaying;\r\n\r\n    this.setState({ isPlaying: _isPlaying });\r\n\r\n    if (_isPlaying) {\r\n      // istanbul ignore else\r\n      if (this.props.onPlay)\r\n        this.props.onPlay();\r\n    } else {\r\n      // istanbul ignore else\r\n      if (this.props.onPause)\r\n        this.props.onPause();\r\n    }\r\n  };\r\n\r\n  public override render() {\r\n    const { tooltip } = this.props;\r\n    const iconSpec = this.state.isPlaying ? <SvgPause /> : <SvgPlay />;\r\n    let title = tooltip;\r\n\r\n    if (!title)\r\n      title = UiIModelComponents.translate(this.state.isPlaying ? \"timeline.pause\" : \"timeline.play\");\r\n\r\n    return (\r\n      <button data-testid={this.props.className} title={title} className={classnames(\"player-button\", this.props.className)} onClick={this._onClick}>\r\n        <span className=\"icon\" data-testid={this.state.isPlaying ? \"pause\" : \"play\"} ><Icon iconSpec={iconSpec} data-testid={this.state.isPlaying ? \"pause\" : \"play\"} /></span>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/imodel-components-react/timeline/PlayerButton.scss

@@ -2,7 +2,6 @@
 * 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";
 
 .player-button {
   width: 38px;
@@ -13,19 +12,17 @@
   font-size: 16px;
   outline: none;
   border-radius: var(--iui-border-radius-1);
-  border: solid 1px $buic-background-5;
-  // background-image: linear-gradient(to bottom, $buic-background-1, $buic-background-2);
-  background-image: linear-gradient(
-      to bottom,
-      $buic-background-3,
-      $buic-background-3
-    ),
-    linear-gradient(to bottom, $buic-background-1, $buic-background-1);
-  color: $buic-foreground-body;
-
+  border: solid 1px var(--iui-color-border-foreground);
+  background-color: var(--iui-color-background);
+  color: var(--iui-color-icon);
   cursor: pointer;
 
   &:hover {
-    color: $buic-foreground-activehover;
+    color: var(--iui-color-icon-hover);
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--iui-color-border-accent);
+    outline-offset: -1px;
   }
 }