@itwin/core-react 3.5.0-dev.19 → 3.5.0-dev.21

package/lib/cjs/core-react/splitbutton/SplitButton.js

@@ -1,104 +1,104 @@
-"use strict";
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module SplitButton
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitButton = exports.SplitButtonActionType = void 0;
-require("./SplitButton.scss");
-const classnames_1 = require("classnames");
-const React = require("react");
-const PopupContextMenu_1 = require("../contextmenu/PopupContextMenu");
-const IconComponent_1 = require("../icons/IconComponent");
-const appui_abstract_1 = require("@itwin/appui-abstract");
-const Button_1 = require("../button/Button");
-// TODO: implement
-/** @internal */
-var SplitButtonActionType;
-(function (SplitButtonActionType) {
-    SplitButtonActionType[SplitButtonActionType["ContextMenu"] = 0] = "ContextMenu";
-    SplitButtonActionType[SplitButtonActionType["List"] = 1] = "List";
-})(SplitButtonActionType = exports.SplitButtonActionType || (exports.SplitButtonActionType = {}));
-/**
- * SplitButton with an action button on the left and an arrow button that displays a context menu on the right.
- * @public
- * @deprecated Use SplitButton in itwinui-react instead
- */
-class SplitButton extends React.Component {
-    constructor(props) {
-        super(props);
-        this._arrowElement = React.createRef();
-        this._buttonRef = React.createRef();
-        this._closing = false;
-        /** @internal */
-        this.state = { expanded: false };
-        this._handleKeyUp = (event) => {
-            if (event.key === appui_abstract_1.SpecialKey.Enter) {
-                this.props.onExecute && this.props.onExecute();
-            }
-            else if (event.key === appui_abstract_1.SpecialKey.ArrowDown && !this.state.expanded) {
-                this._closing = false;
-                this._open();
-            }
-            else {
-                this._closing = false;
-            }
-        };
-        this._open = () => {
-            // istanbul ignore else
-            if (!this.state.expanded && !this._closing) {
-                this.setState({ expanded: true });
-            }
-            else {
-                this._closing = false;
-            }
-        };
-        this._handleArrowClick = (event) => {
-            if (this.state.expanded) {
-                event.stopPropagation();
-                this.setState({ expanded: false });
-                this._closing = false;
-            }
-            else {
-                this._open();
-            }
-        };
-        this._handleClose = (event) => {
-            // istanbul ignore else
-            if (this._arrowElement.current && this._buttonRef.current) {
-                // istanbul ignore next
-                if (this.state.expanded && "target" in event && this._arrowElement.current.contains(event.target))
-                    this._closing = true;
-                this.setState((_prevState) => ({ expanded: false }));
-                this._buttonRef.current.focus();
-            }
-        };
-        this.state = {
-            expanded: props.initialExpanded !== undefined ? props.initialExpanded : false,
-        };
-    }
-    render() {
-        let icon = (React.createElement(React.Fragment, null));
-        if (this.props.icon !== undefined) {
-            icon = (React.createElement(IconComponent_1.Icon, { iconSpec: this.props.icon }));
-        }
-        const borderClassName = (this.props.drawBorder && this.props.buttonType === undefined) ? "core-split-button-border" : undefined;
-        const typeClassName = this.props.buttonType !== undefined ? (0, Button_1.getButtonTypeClassName)(this.props.buttonType) : "core-split-button-default-colors";
-        const classNames = (0, classnames_1.default)("core-split-button", typeClassName, borderClassName, this.state.expanded && "core-expanded", this.props.className);
-        const position = this.props.popupPosition !== undefined ? this.props.popupPosition : appui_abstract_1.RelativePosition.BottomLeft;
-        return (React.createElement("div", { "data-testid": "core-split-button-root", title: this.props.toolTip, className: classNames, style: this.props.style, tabIndex: 0, onKeyUp: this._handleKeyUp, ref: this._buttonRef, role: "button" },
-            React.createElement("div", { "data-testid": "core-split-button-label", onClick: this.props.onClick, className: (0, classnames_1.default)("core-split-button-label", this.props.drawBorder && "core-split-button-border"), role: "button", tabIndex: -1 },
-                icon,
-                " ",
-                this.props.label),
-            React.createElement("div", { className: (0, classnames_1.default)("core-split-button-divider", this.props.drawBorder && "core-split-button-border") }),
-            React.createElement("div", { className: "core-split-button-arrow", ref: this._arrowElement, onClick: this._handleArrowClick, role: "button", tabIndex: -1 },
-                React.createElement("div", { className: (0, classnames_1.default)("core-split-button-arrow-icon", "icon", "icon-chevron-down") }),
-                React.createElement(PopupContextMenu_1.PopupContextMenu, { position: position, target: this._buttonRef.current, animate: false, selectedIndex: 0, onSelect: this._handleClose, onOutsideClick: this._handleClose, onEsc: this._handleClose, isOpen: this.state.expanded, autoflip: false }, this.props.children))));
-    }
-}
-exports.SplitButton = SplitButton;
+"use strict";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module SplitButton
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitButton = exports.SplitButtonActionType = void 0;
+require("./SplitButton.scss");
+const classnames_1 = require("classnames");
+const React = require("react");
+const PopupContextMenu_1 = require("../contextmenu/PopupContextMenu");
+const IconComponent_1 = require("../icons/IconComponent");
+const appui_abstract_1 = require("@itwin/appui-abstract");
+const Button_1 = require("../button/Button");
+// TODO: implement
+/** @internal */
+var SplitButtonActionType;
+(function (SplitButtonActionType) {
+    SplitButtonActionType[SplitButtonActionType["ContextMenu"] = 0] = "ContextMenu";
+    SplitButtonActionType[SplitButtonActionType["List"] = 1] = "List";
+})(SplitButtonActionType = exports.SplitButtonActionType || (exports.SplitButtonActionType = {}));
+/**
+ * SplitButton with an action button on the left and an arrow button that displays a context menu on the right.
+ * @public
+ * @deprecated Use SplitButton in itwinui-react instead
+ */
+class SplitButton extends React.Component {
+    constructor(props) {
+        super(props);
+        this._arrowElement = React.createRef();
+        this._buttonRef = React.createRef();
+        this._closing = false;
+        /** @internal */
+        this.state = { expanded: false };
+        this._handleKeyUp = (event) => {
+            if (event.key === appui_abstract_1.SpecialKey.Enter) {
+                this.props.onExecute && this.props.onExecute();
+            }
+            else if (event.key === appui_abstract_1.SpecialKey.ArrowDown && !this.state.expanded) {
+                this._closing = false;
+                this._open();
+            }
+            else {
+                this._closing = false;
+            }
+        };
+        this._open = () => {
+            // istanbul ignore else
+            if (!this.state.expanded && !this._closing) {
+                this.setState({ expanded: true });
+            }
+            else {
+                this._closing = false;
+            }
+        };
+        this._handleArrowClick = (event) => {
+            if (this.state.expanded) {
+                event.stopPropagation();
+                this.setState({ expanded: false });
+                this._closing = false;
+            }
+            else {
+                this._open();
+            }
+        };
+        this._handleClose = (event) => {
+            // istanbul ignore else
+            if (this._arrowElement.current && this._buttonRef.current) {
+                // istanbul ignore next
+                if (this.state.expanded && "target" in event && this._arrowElement.current.contains(event.target))
+                    this._closing = true;
+                this.setState((_prevState) => ({ expanded: false }));
+                this._buttonRef.current.focus();
+            }
+        };
+        this.state = {
+            expanded: props.initialExpanded !== undefined ? props.initialExpanded : false,
+        };
+    }
+    render() {
+        let icon = (React.createElement(React.Fragment, null));
+        if (this.props.icon !== undefined) {
+            icon = (React.createElement(IconComponent_1.Icon, { iconSpec: this.props.icon }));
+        }
+        const borderClassName = (this.props.drawBorder && this.props.buttonType === undefined) ? "core-split-button-border" : undefined;
+        const typeClassName = this.props.buttonType !== undefined ? (0, Button_1.getButtonTypeClassName)(this.props.buttonType) : "core-split-button-default-colors";
+        const classNames = (0, classnames_1.default)("core-split-button", typeClassName, borderClassName, this.state.expanded && "core-expanded", this.props.className);
+        const position = this.props.popupPosition !== undefined ? this.props.popupPosition : appui_abstract_1.RelativePosition.BottomLeft;
+        return (React.createElement("div", { "data-testid": "core-split-button-root", title: this.props.toolTip, className: classNames, style: this.props.style, tabIndex: 0, onKeyUp: this._handleKeyUp, ref: this._buttonRef, role: "button" },
+            React.createElement("div", { "data-testid": "core-split-button-label", onClick: this.props.onClick, className: (0, classnames_1.default)("core-split-button-label", this.props.drawBorder && "core-split-button-border"), role: "button", tabIndex: -1 },
+                icon,
+                " ",
+                this.props.label),
+            React.createElement("div", { className: (0, classnames_1.default)("core-split-button-divider", this.props.drawBorder && "core-split-button-border") }),
+            React.createElement("div", { className: "core-split-button-arrow", ref: this._arrowElement, onClick: this._handleArrowClick, role: "button", tabIndex: -1 },
+                React.createElement("div", { className: (0, classnames_1.default)("core-split-button-arrow-icon", "icon", "icon-chevron-down") }),
+                React.createElement(PopupContextMenu_1.PopupContextMenu, { position: position, target: this._buttonRef.current, animate: false, selectedIndex: 0, onSelect: this._handleClose, onOutsideClick: this._handleClose, onEsc: this._handleClose, isOpen: this.state.expanded, autoflip: false }, this.props.children))));
+    }
+}
+exports.SplitButton = SplitButton;
 //# sourceMappingURL=SplitButton.js.map

package/lib/cjs/core-react/splitbutton/SplitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.js","sourceRoot":"","sources":["../../../../src/core-react/splitbutton/SplitButton.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 SplitButton\n */\n\nimport \"./SplitButton.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { PopupContextMenu } from \"../contextmenu/PopupContextMenu\";\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\nimport { CommonProps } from \"../utils/Props\";\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\nimport { ButtonType, getButtonTypeClassName } from \"../button/Button\";\n\n// TODO: implement\n/** @internal */\nexport enum SplitButtonActionType {\n  ContextMenu, // eslint-disable-line @typescript-eslint/no-shadow\n  List,\n}\n\n/** Properties for [[SplitButton]] component\n * @public\n * @deprecated Use SplitButtonProps in itwinui-react instead\n */\nexport interface SplitButtonProps extends CommonProps {\n  /** Label to display in click area. */\n  label: string | React.ReactNode;\n  /** Listens for click events on button area */\n  onClick?: (event: any) => any;\n  /** Listens for execute on button area */\n  onExecute?: () => any;\n  /** Specifies icon for Splitbutton component */\n  icon?: IconSpec;\n  /** Indicates whether to draw a border around the button */\n  drawBorder?: boolean;\n  /** ToolTip text */\n  toolTip?: string;\n  /** Direction relative to the button to which the popup is expanded (defaults to Bottom) */\n  popupPosition?: RelativePosition;\n  /** 4 styles to tweak the content of the button */\n  buttonType?: ButtonType;  // eslint-disable-line deprecation/deprecation\n\n  /** @internal */\n  initialExpanded?: boolean;\n}\n\n/** @internal */\ninterface SplitButtonState {\n  expanded: boolean;\n}\n\n/**\n * SplitButton with an action button on the left and an arrow button that displays a context menu on the right.\n * @public\n * @deprecated Use SplitButton in itwinui-react instead\n */\nexport class SplitButton extends React.Component<SplitButtonProps, SplitButtonState> {    // eslint-disable-line deprecation/deprecation\n  private _arrowElement = React.createRef<HTMLDivElement>();\n  private _buttonRef = React.createRef<HTMLDivElement>();\n  private _closing: boolean = false;\n\n  /** @internal */\n  public override readonly state: Readonly<SplitButtonState> = { expanded: false };\n\n  constructor(props: SplitButtonProps) {    // eslint-disable-line deprecation/deprecation\n    super(props);\n\n    this.state = {\n      expanded: props.initialExpanded !== undefined ? props.initialExpanded : false,\n    };\n  }\n\n  public override render(): JSX.Element {\n    let icon = (<></>);\n    if (this.props.icon !== undefined) {\n      icon = (\n        <Icon iconSpec={this.props.icon} />\n      );\n    }\n\n    const borderClassName = (this.props.drawBorder && this.props.buttonType === undefined) ? \"core-split-button-border\" : undefined;\n    const typeClassName = this.props.buttonType !== undefined ? getButtonTypeClassName(this.props.buttonType) : \"core-split-button-default-colors\";\n    const classNames = classnames(\n      \"core-split-button\",\n      typeClassName,\n      borderClassName,\n      this.state.expanded && \"core-expanded\",\n      this.props.className);\n    const position = this.props.popupPosition !== undefined ? this.props.popupPosition : RelativePosition.BottomLeft;\n\n    return (\n      <div data-testid=\"core-split-button-root\" title={this.props.toolTip}\n        className={classNames}\n        style={this.props.style}\n        tabIndex={0}\n        onKeyUp={this._handleKeyUp}\n        ref={this._buttonRef}\n        role=\"button\"\n      >\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n        <div data-testid=\"core-split-button-label\" onClick={this.props.onClick}\n          className={classnames(\"core-split-button-label\", this.props.drawBorder && \"core-split-button-border\")}\n          role=\"button\" tabIndex={-1}\n        >\n          {icon} {this.props.label}\n        </div>\n        <div className={classnames(\"core-split-button-divider\", this.props.drawBorder && \"core-split-button-border\")} />\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n        <div className={\"core-split-button-arrow\"} ref={this._arrowElement} onClick={this._handleArrowClick}\n          role=\"button\" tabIndex={-1}\n        >\n          <div className={classnames(\"core-split-button-arrow-icon\", \"icon\", \"icon-chevron-down\")} />\n          <PopupContextMenu\n            position={position}\n            target={this._buttonRef.current}\n            animate={false}\n            selectedIndex={0}\n            onSelect={this._handleClose}\n            onOutsideClick={this._handleClose}\n            onEsc={this._handleClose}\n            isOpen={this.state.expanded}\n            autoflip={false}>\n            {this.props.children}\n          </PopupContextMenu>\n        </div>\n      </div>\n    );\n  }\n\n  private _handleKeyUp = (event: React.KeyboardEvent) => {\n    if (event.key === SpecialKey.Enter) {\n      this.props.onExecute && this.props.onExecute();\n    } else if (event.key === SpecialKey.ArrowDown && !this.state.expanded) {\n      this._closing = false;\n      this._open();\n    } else {\n      this._closing = false;\n    }\n  };\n\n  private _open = () => {\n    // istanbul ignore else\n    if (!this.state.expanded && !this._closing) {\n      this.setState({ expanded: true });\n    } else {\n      this._closing = false;\n    }\n  };\n\n  private _handleArrowClick = (event: React.MouseEvent) => {\n    if (this.state.expanded) {\n      event.stopPropagation();\n      this.setState({ expanded: false });\n      this._closing = false;\n    } else {\n      this._open();\n    }\n  };\n\n  private _handleClose = (event: any) => {\n    // istanbul ignore else\n    if (this._arrowElement.current && this._buttonRef.current) {\n      // istanbul ignore next\n      if (this.state.expanded && \"target\" in event && this._arrowElement.current.contains(event.target))\n        this._closing = true;\n      this.setState((_prevState) => ({ expanded: false }));\n      this._buttonRef.current.focus();\n    }\n  };\n}\n"]}
+{"version":3,"file":"SplitButton.js","sourceRoot":"","sources":["../../../../src/core-react/splitbutton/SplitButton.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 SplitButton\r\n */\r\n\r\nimport \"./SplitButton.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { PopupContextMenu } from \"../contextmenu/PopupContextMenu\";\r\nimport { Icon, IconSpec } from \"../icons/IconComponent\";\r\nimport { CommonProps } from \"../utils/Props\";\r\nimport { RelativePosition, SpecialKey } from \"@itwin/appui-abstract\";\r\nimport { ButtonType, getButtonTypeClassName } from \"../button/Button\";\r\n\r\n// TODO: implement\r\n/** @internal */\r\nexport enum SplitButtonActionType {\r\n  ContextMenu, // eslint-disable-line @typescript-eslint/no-shadow\r\n  List,\r\n}\r\n\r\n/** Properties for [[SplitButton]] component\r\n * @public\r\n * @deprecated Use SplitButtonProps in itwinui-react instead\r\n */\r\nexport interface SplitButtonProps extends CommonProps {\r\n  /** Label to display in click area. */\r\n  label: string | React.ReactNode;\r\n  /** Listens for click events on button area */\r\n  onClick?: (event: any) => any;\r\n  /** Listens for execute on button area */\r\n  onExecute?: () => any;\r\n  /** Specifies icon for Splitbutton component */\r\n  icon?: IconSpec;\r\n  /** Indicates whether to draw a border around the button */\r\n  drawBorder?: boolean;\r\n  /** ToolTip text */\r\n  toolTip?: string;\r\n  /** Direction relative to the button to which the popup is expanded (defaults to Bottom) */\r\n  popupPosition?: RelativePosition;\r\n  /** 4 styles to tweak the content of the button */\r\n  buttonType?: ButtonType;  // eslint-disable-line deprecation/deprecation\r\n\r\n  /** @internal */\r\n  initialExpanded?: boolean;\r\n}\r\n\r\n/** @internal */\r\ninterface SplitButtonState {\r\n  expanded: boolean;\r\n}\r\n\r\n/**\r\n * SplitButton with an action button on the left and an arrow button that displays a context menu on the right.\r\n * @public\r\n * @deprecated Use SplitButton in itwinui-react instead\r\n */\r\nexport class SplitButton extends React.Component<SplitButtonProps, SplitButtonState> {    // eslint-disable-line deprecation/deprecation\r\n  private _arrowElement = React.createRef<HTMLDivElement>();\r\n  private _buttonRef = React.createRef<HTMLDivElement>();\r\n  private _closing: boolean = false;\r\n\r\n  /** @internal */\r\n  public override readonly state: Readonly<SplitButtonState> = { expanded: false };\r\n\r\n  constructor(props: SplitButtonProps) {    // eslint-disable-line deprecation/deprecation\r\n    super(props);\r\n\r\n    this.state = {\r\n      expanded: props.initialExpanded !== undefined ? props.initialExpanded : false,\r\n    };\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    let icon = (<></>);\r\n    if (this.props.icon !== undefined) {\r\n      icon = (\r\n        <Icon iconSpec={this.props.icon} />\r\n      );\r\n    }\r\n\r\n    const borderClassName = (this.props.drawBorder && this.props.buttonType === undefined) ? \"core-split-button-border\" : undefined;\r\n    const typeClassName = this.props.buttonType !== undefined ? getButtonTypeClassName(this.props.buttonType) : \"core-split-button-default-colors\";\r\n    const classNames = classnames(\r\n      \"core-split-button\",\r\n      typeClassName,\r\n      borderClassName,\r\n      this.state.expanded && \"core-expanded\",\r\n      this.props.className);\r\n    const position = this.props.popupPosition !== undefined ? this.props.popupPosition : RelativePosition.BottomLeft;\r\n\r\n    return (\r\n      <div data-testid=\"core-split-button-root\" title={this.props.toolTip}\r\n        className={classNames}\r\n        style={this.props.style}\r\n        tabIndex={0}\r\n        onKeyUp={this._handleKeyUp}\r\n        ref={this._buttonRef}\r\n        role=\"button\"\r\n      >\r\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n        <div data-testid=\"core-split-button-label\" onClick={this.props.onClick}\r\n          className={classnames(\"core-split-button-label\", this.props.drawBorder && \"core-split-button-border\")}\r\n          role=\"button\" tabIndex={-1}\r\n        >\r\n          {icon} {this.props.label}\r\n        </div>\r\n        <div className={classnames(\"core-split-button-divider\", this.props.drawBorder && \"core-split-button-border\")} />\r\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\r\n        <div className={\"core-split-button-arrow\"} ref={this._arrowElement} onClick={this._handleArrowClick}\r\n          role=\"button\" tabIndex={-1}\r\n        >\r\n          <div className={classnames(\"core-split-button-arrow-icon\", \"icon\", \"icon-chevron-down\")} />\r\n          <PopupContextMenu\r\n            position={position}\r\n            target={this._buttonRef.current}\r\n            animate={false}\r\n            selectedIndex={0}\r\n            onSelect={this._handleClose}\r\n            onOutsideClick={this._handleClose}\r\n            onEsc={this._handleClose}\r\n            isOpen={this.state.expanded}\r\n            autoflip={false}>\r\n            {this.props.children}\r\n          </PopupContextMenu>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private _handleKeyUp = (event: React.KeyboardEvent) => {\r\n    if (event.key === SpecialKey.Enter) {\r\n      this.props.onExecute && this.props.onExecute();\r\n    } else if (event.key === SpecialKey.ArrowDown && !this.state.expanded) {\r\n      this._closing = false;\r\n      this._open();\r\n    } else {\r\n      this._closing = false;\r\n    }\r\n  };\r\n\r\n  private _open = () => {\r\n    // istanbul ignore else\r\n    if (!this.state.expanded && !this._closing) {\r\n      this.setState({ expanded: true });\r\n    } else {\r\n      this._closing = false;\r\n    }\r\n  };\r\n\r\n  private _handleArrowClick = (event: React.MouseEvent) => {\r\n    if (this.state.expanded) {\r\n      event.stopPropagation();\r\n      this.setState({ expanded: false });\r\n      this._closing = false;\r\n    } else {\r\n      this._open();\r\n    }\r\n  };\r\n\r\n  private _handleClose = (event: any) => {\r\n    // istanbul ignore else\r\n    if (this._arrowElement.current && this._buttonRef.current) {\r\n      // istanbul ignore next\r\n      if (this.state.expanded && \"target\" in event && this._arrowElement.current.contains(event.target))\r\n        this._closing = true;\r\n      this.setState((_prevState) => ({ expanded: false }));\r\n      this._buttonRef.current.focus();\r\n    }\r\n  };\r\n}\r\n"]}

package/lib/cjs/core-react/splitbutton/SplitButton.scss

@@ -1,137 +1,137 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../button/button";
-@import "../icons/variables";
-@import "../style/baseline";
-@import "../style/opacity";
-@import "../style/themecolors";
-@import "../text/mixins";
-@import "~@itwin/itwinui-css/scss/style/typography";
-
-// cspell:ignore themecolors unbordered
-
-$split-button-padding:  4px;
-
-.core-split-button {
-  flex-shrink: 1;
-
-  @include iui-font-family;
-  @include uicore-buttons-button;
-
-  padding:        $uicore-button-padding;
-  box-shadow:     none;
-
-  cursor:         pointer;
-  margin:         0;
-  display:        flex;
-  box-sizing:     border-box;
-  line-height:    $uicore-line-height;
-  outline:        none;
-
-  &.core-split-button-default-colors {
-    border-color:     $buic-background-control;
-    color:            $buic-foreground-body;
-    background-color: $buic-background-control;
-
-    > .core-split-button-label {
-      &:hover {
-        color: $buic-foreground-primary;
-      }
-    }
-
-    > .core-split-button-arrow {
-      > .core-split-button-arrow-icon {
-        &:hover {
-          color: $buic-foreground-primary;
-        }
-      }
-    }
-
-    &:focus {
-      > .core-split-button-arrow {
-        > .core-split-button-arrow-icon {
-          color: $buic-foreground-primary;
-        }
-      }
-    }
-  }
-
-  > .core-split-button-label {
-    flex: 1;
-    text-align: center;
-
-    &.core-split-button-border {
-      margin: 0 $split-button-padding;
-    }
-  }
-
-  &.core-split-button-border {
-    border-color:   $buic-text-color-disabled;
-    box-shadow:     $buic-inputs-boxshadow 0px 1px 1px inset;
-  }
-
-  > .core-split-button-divider {
-    width: $split-button-padding + 1px;
-
-    &.core-split-button-border {
-      border-right: 1px solid currentColor;
-      opacity: $uicore-opacity-disabled;
-    }
-  }
-
-  > .core-split-button-arrow {
-    > .core-split-button-arrow-icon {
-      transition: transform .2s;
-
-      text-align: center;
-      font-size: $uicore-icons-x-small;
-      line-height: $uicore-line-height;
-    }
-
-    width: $uicore-line-height;
-    height: $uicore-line-height;
-    margin-left: $split-button-padding;
-
-    > .context-menu {
-      top: $uicore-inputs-padding-bordered;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  &:active,
-  &:focus {
-    @include uicore-buttons-button-unbordered;
-    border-color:         $buic-foreground-focus;
-
-    &.core-split-button-border {
-      border-color:   $buic-background-control;
-      @include uicore-buttons-button-focused;
-    }
-  }
-
-  &:focus {
-    > .core-split-button-arrow {
-      border: none;
-      box-shadow: none;
-      outline: 0px;
-    }
-  }
-
-  &.core-expanded {
-    border-color:         $buic-foreground-focus;
-
-    &.core-split-button-border {
-      border-color:   $buic-background-control;
-      @include uicore-buttons-button-focused;
-    }
-
-    > .core-split-button-arrow > .core-split-button-arrow-icon {
-      transform: scaleY(-1);
-    }
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../button/button";
+@import "../icons/variables";
+@import "../style/baseline";
+@import "../style/opacity";
+@import "../style/themecolors";
+@import "../text/mixins";
+@import "~@itwin/itwinui-css/scss/style/typography";
+
+// cspell:ignore themecolors unbordered
+
+$split-button-padding:  4px;
+
+.core-split-button {
+  flex-shrink: 1;
+
+  @include iui-font-family;
+  @include uicore-buttons-button;
+
+  padding:        $uicore-button-padding;
+  box-shadow:     none;
+
+  cursor:         pointer;
+  margin:         0;
+  display:        flex;
+  box-sizing:     border-box;
+  line-height:    $uicore-line-height;
+  outline:        none;
+
+  &.core-split-button-default-colors {
+    border-color:     $buic-background-control;
+    color:            $buic-foreground-body;
+    background-color: $buic-background-control;
+
+    > .core-split-button-label {
+      &:hover {
+        color: $buic-foreground-primary;
+      }
+    }
+
+    > .core-split-button-arrow {
+      > .core-split-button-arrow-icon {
+        &:hover {
+          color: $buic-foreground-primary;
+        }
+      }
+    }
+
+    &:focus {
+      > .core-split-button-arrow {
+        > .core-split-button-arrow-icon {
+          color: $buic-foreground-primary;
+        }
+      }
+    }
+  }
+
+  > .core-split-button-label {
+    flex: 1;
+    text-align: center;
+
+    &.core-split-button-border {
+      margin: 0 $split-button-padding;
+    }
+  }
+
+  &.core-split-button-border {
+    border-color:   $buic-text-color-disabled;
+    box-shadow:     $buic-inputs-boxshadow 0px 1px 1px inset;
+  }
+
+  > .core-split-button-divider {
+    width: $split-button-padding + 1px;
+
+    &.core-split-button-border {
+      border-right: 1px solid currentColor;
+      opacity: $uicore-opacity-disabled;
+    }
+  }
+
+  > .core-split-button-arrow {
+    > .core-split-button-arrow-icon {
+      transition: transform .2s;
+
+      text-align: center;
+      font-size: $uicore-icons-x-small;
+      line-height: $uicore-line-height;
+    }
+
+    width: $uicore-line-height;
+    height: $uicore-line-height;
+    margin-left: $split-button-padding;
+
+    > .context-menu {
+      top: $uicore-inputs-padding-bordered;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &:active,
+  &:focus {
+    @include uicore-buttons-button-unbordered;
+    border-color:         $buic-foreground-focus;
+
+    &.core-split-button-border {
+      border-color:   $buic-background-control;
+      @include uicore-buttons-button-focused;
+    }
+  }
+
+  &:focus {
+    > .core-split-button-arrow {
+      border: none;
+      box-shadow: none;
+      outline: 0px;
+    }
+  }
+
+  &.core-expanded {
+    border-color:         $buic-foreground-focus;
+
+    &.core-split-button-border {
+      border-color:   $buic-background-control;
+      @include uicore-buttons-button-focused;
+    }
+
+    > .core-split-button-arrow > .core-split-button-arrow-icon {
+      transform: scaleY(-1);
+    }
+  }
+}

package/lib/cjs/core-react/style/baseline.scss

@@ -1,13 +1,13 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "~@itwin/itwinui-css/scss/style/baseline";
-
-$uicore-baseline:                  $iui-baseline;
-$uicore-line-height:               $iui-line-height;    ///  22px; /// ~1.618;
-
-$uicore-bordered-padding:          $uicore-baseline - 1px;
-$uicore-bordered-padding-large:    $uicore-baseline * 2 - 1px;
-$uicore-unbordered-padding:        $uicore-baseline;
-$uicore-unbordered-padding-large:  $uicore-baseline * 2;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "~@itwin/itwinui-css/scss/style/baseline";
+
+$uicore-baseline:                  $iui-baseline;
+$uicore-line-height:               $iui-line-height;    ///  22px; /// ~1.618;
+
+$uicore-bordered-padding:          $uicore-baseline - 1px;
+$uicore-bordered-padding-large:    $uicore-baseline * 2 - 1px;
+$uicore-unbordered-padding:        $uicore-baseline;
+$uicore-unbordered-padding-large:  $uicore-baseline * 2;

package/lib/cjs/core-react/style/breakpoints.scss

@@ -1,41 +1,41 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-/* Breakpoints */
-@mixin for-phone-only {
-  @media (max-width: 599px) { @content; }
-}
-
-@mixin for-tablet-portrait-up {
-  @media (min-width: 600px) { @content; }
-}
-
-@mixin for-tablet-portrait-down {
-  @media (max-width: 799px) { @content; }
-}
-
-@mixin for-tablet-landscape-up {
-  @media (min-width: 800px) { @content; }
-}
-
-@mixin for-tablet-landscape-down {
-  @media (max-width: 1099px) { @content; }
-}
-
-@mixin for-desktop-up {
-  @media (min-width: 1100px) { @content; }
-}
-
-@mixin for-small-desktop-down {
-  @media (max-width: 1299px) { @content; }
-}
-
-@mixin for-medium-desktop-up {
-  @media (min-width: 1300px) { @content; }
-}
-
-@mixin for-big-desktop-up {
-  @media (min-width: 1800px) { @content; }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+/* Breakpoints */
+@mixin for-phone-only {
+  @media (max-width: 599px) { @content; }
+}
+
+@mixin for-tablet-portrait-up {
+  @media (min-width: 600px) { @content; }
+}
+
+@mixin for-tablet-portrait-down {
+  @media (max-width: 799px) { @content; }
+}
+
+@mixin for-tablet-landscape-up {
+  @media (min-width: 800px) { @content; }
+}
+
+@mixin for-tablet-landscape-down {
+  @media (max-width: 1099px) { @content; }
+}
+
+@mixin for-desktop-up {
+  @media (min-width: 1100px) { @content; }
+}
+
+@mixin for-small-desktop-down {
+  @media (max-width: 1299px) { @content; }
+}
+
+@mixin for-medium-desktop-up {
+  @media (min-width: 1300px) { @content; }
+}
+
+@mixin for-big-desktop-up {
+  @media (min-width: 1800px) { @content; }
+}