@itwin/core-react 4.1.0 → 4.2.0

package/lib/cjs/core-react/button/UnderlinedButton.scss

@@ -1,33 +1,32 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index.scss";
-@import "../inputs/index.scss";
-
-$color: $buic-foreground-primary;
-$hoverColor: $buic-foreground-primary-tone;
-
-.core-underlined-button {
-  background: transparent;
-  color: $color;
-  border: 0px solid $color;
-  border-bottom-width: 1px;
-
-  width: fit-content;
-
-  cursor: pointer;
-
-  &:hover {
-    color: $hoverColor;
-    border-color: $hoverColor;
-  }
-
-  &:focus {
-    color: $hoverColor;
-    border-color: $hoverColor;
-    background-color: $buic-background-focus-overlay;
-    outline: none;
-  }
-
-}
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@import "../style/index.scss";
+@import "../inputs/index.scss";
+
+$color: $buic-foreground-primary;
+$hoverColor: $buic-foreground-primary-tone;
+
+.core-underlined-button {
+  background: transparent;
+  color: $color;
+  border: 0px solid $color;
+  border-bottom-width: 1px;
+
+  width: fit-content;
+
+  cursor: pointer;
+
+  &:hover {
+    color: $hoverColor;
+    border-color: $hoverColor;
+  }
+
+  &:focus {
+    color: $hoverColor;
+    border-color: $hoverColor;
+    background-color: $buic-background-focus-overlay;
+    outline: none;
+  }
+}

package/lib/cjs/core-react/checklistbox/CheckListBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckListBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/checklistbox/CheckListBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,YAAY;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,GAAG,CAAC;CAC5D;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9D,MAAM;CAWvB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,gBAIpC;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CAAC,WAAW,GAAG;IAClE,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;IACgB,MAAM;CAQvB"}
+{"version":3,"file":"CheckListBox.d.ts","sourceRoot":"","sources":["../../../../src/core-react/checklistbox/CheckListBox.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAE7B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,YAAY;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,GAAG,CAAC;IACpB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,GAAG,CAAC;CAC5D;AAED;;GAEG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC;IAC9D,MAAM;CAoBvB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,gBAEpC;AAED;;GAEG;AACH,qBAAa,YAAa,SAAQ,KAAK,CAAC,aAAa,CACnD,WAAW,GAAG;IACZ,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CACF;IACiB,MAAM;CAQvB"}

package/lib/cjs/core-react/checklistbox/CheckListBox.js

@@ -1,8 +1,8 @@
 "use strict";
 /*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
 /** @packageDocumentation
  * @module CheckListBox
  */
@@ -27,7 +27,7 @@ exports.CheckListBoxItem = CheckListBoxItem;
  * @public
  */
 function CheckListBoxSeparator() {
-    return (React.createElement("div", { className: "core-chk-listbox-separator" }));
+    return React.createElement("div", { className: "core-chk-listbox-separator" });
 }
 exports.CheckListBoxSeparator = CheckListBoxSeparator;
 /** React component showing a list of Checkbox items.

package/lib/cjs/core-react/checklistbox/CheckListBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckListBox.js","sourceRoot":"","sources":["../../../../src/core-react/checklistbox/CheckListBox.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F;;GAEG;;;AAEH,+BAA6B;AAC7B,2CAAoC;AACpC,+BAA+B;AAC/B,wDAAgD;AAmBhD;;GAEG;AACH,MAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACpF,OAAO,CACL;YACE,oBAAC,wBAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAClE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAC7C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,iBACvE,+BAA+B,GAAG,CAC7C,CACN,CAAC;IACJ,CAAC;CACF;AAZD,4CAYC;AAED;;GAEG;AACH,SAAgB,qBAAqB;IACnC,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CAC/C,CAAC;AACJ,CAAC;AAJD,sDAIC;AAED;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,aAGtC;IACgB,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACvE,OAAO,CACL,4BAAI,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,CACjB,CACN,CAAC;IACJ,CAAC;CACF;AAZD,oCAYC","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 CheckListBox\r\n */\r\n\r\nimport \"./CheckListBox.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { Checkbox } from \"@itwin/itwinui-react\";\r\nimport type { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[CheckListBoxItem]] component\r\n * @public\r\n */\r\nexport interface CheckListBoxItemProps extends CommonProps {\r\n  /** Label */\r\n  label: string;\r\n  /** Indicates whether the item is checked or not */\r\n  checked?: boolean;\r\n  /** Indicates whether the item is disabled or not */\r\n  disabled?: boolean;\r\n  /** Function called when item is clicked. */\r\n  onClick?: () => any;\r\n  /** Function called when item is changed. */\r\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => any;\r\n}\r\n\r\n/** Item with a checkbox added to a [[CheckListBox]].\r\n * @public\r\n */\r\nexport class CheckListBoxItem extends React.PureComponent<CheckListBoxItemProps> {\r\n  public override render() {\r\n    const className = classnames(\"core-chk-listboxitem-checkbox\", this.props.className);\r\n    return (\r\n      <li>\r\n        <Checkbox checked={this.props.checked} disabled={this.props.disabled}\r\n          className={className} style={this.props.style}\r\n          label={this.props.label} onClick={this.props.onClick} onChange={this.props.onChange}\r\n          data-testid=\"core-chk-listboxitem-checkbox\" />\r\n      </li>\r\n    );\r\n  }\r\n}\r\n\r\n/** Separator added to a [[CheckListBox]].\r\n * @public\r\n */\r\nexport function CheckListBoxSeparator() {\r\n  return (\r\n    <div className=\"core-chk-listbox-separator\" />\r\n  );\r\n}\r\n\r\n/** React component showing a list of Checkbox items.\r\n * @public\r\n */\r\nexport class CheckListBox extends React.PureComponent<CommonProps & {\r\n  /** Content */\r\n  children?: React.ReactNode;\r\n}> {\r\n  public override render() {\r\n    const className = classnames(\"core-chk-listbox\", this.props.className);\r\n    return (\r\n      <ul className={className} style={this.props.style}>\r\n        {this.props.children}\r\n      </ul>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"CheckListBox.js","sourceRoot":"","sources":["../../../../src/core-react/checklistbox/CheckListBox.tsx"],"names":[],"mappings":";AAAA;;;gGAGgG;AAChG;;GAEG;;;AAEH,+BAA6B;AAC7B,2CAAoC;AACpC,+BAA+B;AAC/B,wDAAgD;AAmBhD;;GAEG;AACH,MAAa,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAC1B,+BAA+B,EAC/B,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,OAAO,CACL;YACE,oBAAC,wBAAQ,IACP,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,iBACjB,+BAA+B,GAC3C,CACC,CACN,CAAC;IACJ,CAAC;CACF;AArBD,4CAqBC;AAED;;GAEG;AACH,SAAgB,qBAAqB;IACnC,OAAO,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CAAC;AACxD,CAAC;AAFD,sDAEC;AAED;;GAEG;AACH,MAAa,YAAa,SAAQ,KAAK,CAAC,aAKvC;IACiB,MAAM;QACpB,MAAM,SAAS,GAAG,IAAA,oBAAU,EAAC,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACvE,OAAO,CACL,4BAAI,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9C,IAAI,CAAC,KAAK,CAAC,QAAQ,CACjB,CACN,CAAC;IACJ,CAAC;CACF;AAdD,oCAcC","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 CheckListBox\n */\n\nimport \"./CheckListBox.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { Checkbox } from \"@itwin/itwinui-react\";\nimport type { CommonProps } from \"../utils/Props\";\n\n/** Properties for the [[CheckListBoxItem]] component\n * @public\n */\nexport interface CheckListBoxItemProps extends CommonProps {\n  /** Label */\n  label: string;\n  /** Indicates whether the item is checked or not */\n  checked?: boolean;\n  /** Indicates whether the item is disabled or not */\n  disabled?: boolean;\n  /** Function called when item is clicked. */\n  onClick?: () => any;\n  /** Function called when item is changed. */\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => any;\n}\n\n/** Item with a checkbox added to a [[CheckListBox]].\n * @public\n */\nexport class CheckListBoxItem extends React.PureComponent<CheckListBoxItemProps> {\n  public override render() {\n    const className = classnames(\n      \"core-chk-listboxitem-checkbox\",\n      this.props.className\n    );\n    return (\n      <li>\n        <Checkbox\n          checked={this.props.checked}\n          disabled={this.props.disabled}\n          className={className}\n          style={this.props.style}\n          label={this.props.label}\n          onClick={this.props.onClick}\n          onChange={this.props.onChange}\n          data-testid=\"core-chk-listboxitem-checkbox\"\n        />\n      </li>\n    );\n  }\n}\n\n/** Separator added to a [[CheckListBox]].\n * @public\n */\nexport function CheckListBoxSeparator() {\n  return <div className=\"core-chk-listbox-separator\" />;\n}\n\n/** React component showing a list of Checkbox items.\n * @public\n */\nexport class CheckListBox extends React.PureComponent<\n  CommonProps & {\n    /** Content */\n    children?: React.ReactNode;\n  }\n> {\n  public override render() {\n    const className = classnames(\"core-chk-listbox\", this.props.className);\n    return (\n      <ul className={className} style={this.props.style}>\n        {this.props.children}\n      </ul>\n    );\n  }\n}\n"]}

package/lib/cjs/core-react/checklistbox/CheckListBox.scss

@@ -1,22 +1,22 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-.core-chk-listbox {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  position: relative;
-
-  > li > .core-chk-listboxitem-checkbox {
-    margin: 4px 0;
-  }
-
-  > .core-chk-listbox-separator {
-    height: 1px;
-    background: var(--iui-color-border-foreground);
-    margin: 4px 0;
-    pointer-events: none;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.core-chk-listbox {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+
+  > li > .core-chk-listboxitem-checkbox {
+    margin: 4px 0;
+  }
+
+  > .core-chk-listbox-separator {
+    height: 1px;
+    background: var(--iui-color-border-foreground);
+    margin: 4px 0;
+    pointer-events: none;
+  }
+}

package/lib/cjs/core-react/classes.scss

@@ -1,11 +1,11 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./style/index";
-@import "./base/classes";
-@import "./expandable/classes";
-@import "./icons/classes";
-@import "./inputs/classes";
-@import "./tabs/classes";
-@import "./text/classes";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./style/index";
+@import "./base/classes";
+@import "./expandable/classes";
+@import "./icons/classes";
+@import "./inputs/classes";
+@import "./tabs/classes";
+@import "./text/classes";

package/lib/cjs/core-react/colorthemes.scss

@@ -1,61 +1,61 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-// cspell:ignore colorvariables
-
-/** @note: This file should only be imported by UiCore.ts.
- *  It should NOT be imported by any *.scss or other ui-core files.
- */
-
-$background: var(--iui-color-background);
-$accent: var(--iui-color-background-accent);
-
-@mixin light-theme {
-  --buic-button-gradient1: rgba(
-    var(--iui-color-foreground-body-invert-rgb),
-    0.65
-  );
-  --buic-button-gradient2: rgba(var(--iui-color-foreground-body-invert-rgb), 0);
-
-  --buic-background-editable: var(--iui-color-background);
-}
-
-@mixin dark-theme {
-  --buic-button-gradient1: rgba(var(--iui-color-foreground-body-invert-rgb), 0);
-  --buic-button-gradient2: rgba(
-    var(--iui-color-foreground-body-invert-rgb),
-    0.25
-  );
-
-  --buic-background-editable: var(--iui-color-background);
-}
-
-html,
-html[data-theme="light"] {
-  @include light-theme;
-}
-
-html[data-theme="dark"] {
-  @include dark-theme;
-}
-
-@media (prefers-color-scheme: light) {
-  html[data-theme="SYSTEM_PREFERRED"] {
-    @include light-theme;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  html[data-theme="SYSTEM_PREFERRED"] {
-    @include dark-theme;
-  }
-}
-
-html.theme-transition,
-html.theme-transition *,
-html.theme-transition *:before,
-html.theme-transition *:after {
-  transition: all 100ms !important;
-  transition-delay: 0 !important;
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+// cspell:ignore colorvariables
+
+/** @note: This file should only be imported by UiCore.ts.
+ *  It should NOT be imported by any *.scss or other ui-core files.
+ */
+
+$background: var(--iui-color-background);
+$accent: var(--iui-color-background-accent);
+
+@mixin light-theme {
+  --buic-button-gradient1: rgba(
+    var(--iui-color-foreground-body-invert-rgb),
+    0.65
+  );
+  --buic-button-gradient2: rgba(var(--iui-color-foreground-body-invert-rgb), 0);
+
+  --buic-background-editable: var(--iui-color-background);
+}
+
+@mixin dark-theme {
+  --buic-button-gradient1: rgba(var(--iui-color-foreground-body-invert-rgb), 0);
+  --buic-button-gradient2: rgba(
+    var(--iui-color-foreground-body-invert-rgb),
+    0.25
+  );
+
+  --buic-background-editable: var(--iui-color-background);
+}
+
+html,
+html[data-theme="light"] {
+  @include light-theme;
+}
+
+html[data-theme="dark"] {
+  @include dark-theme;
+}
+
+@media (prefers-color-scheme: light) {
+  html[data-theme="SYSTEM_PREFERRED"] {
+    @include light-theme;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  html[data-theme="SYSTEM_PREFERRED"] {
+    @include dark-theme;
+  }
+}
+
+html.theme-transition,
+html.theme-transition *,
+html.theme-transition *:before,
+html.theme-transition *:after {
+  transition: all 100ms !important;
+  transition-delay: 0 !important;
+}

package/lib/cjs/core-react/colorvariables.scss

@@ -1,131 +1,131 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-
-// cspell:ignore mediumgray titlebar toolbutton outoffocus
-
-/** @note: This file should only be imported by UiCore.ts.
- *  It should NOT be imported by any *.scss or other ui-core files.
- */
-
-[data-root-container="iui-root-id"] {
-  // NEEDSWORK - Need to deprecate these accessory colors
-  --buic-accessory-hollow: rgb(255, 255, 255);
-  --buic-accessory-primary: rgb(000, 139, 225);
-  --buic-accessory-success: rgb(083, 162, 026);
-  --buic-accessory-alert: rgb(211, 010, 010);
-  --buic-accessory-warning: rgb(241, 139, 018);
-  --buic-accessory-primary-tint: rgb(165, 215, 245);
-  --buic-accessory-success-tint: rgb(195, 225, 175);
-  --buic-accessory-alert-tint: rgb(239, 169, 169);
-  --buic-accessory-warning-tint: rgb(249, 215, 171);
-
-  --buic-background-1: var(--iui-color-background);
-  --buic-background-2: var(--iui-color-background-hover);
-  --buic-background-3: var(--iui-color-background-backdrop);
-  --buic-background-4: var(--iui-color-background-backdrop-hover);
-  --buic-background-5: var(--iui-color-background-disabled);
-  --buic-background-primary: var(--iui-color-background-accent);
-  --buic-background-tooltip: hsl(var(--iui-color-background-hsl) / 0.9);
-  --buic-background-scrollbar: hsl(
-    var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
-  );
-  --buic-background-scrollbar-hover: hsl(
-    var(--iui-color-foreground-hsl) / var(--iui-opacity-3)
-  );
-
-  --buic-foreground-body-rgb: var(--iui-color-foreground-hsl);
-  --buic-foreground-body: var(--iui-color-text);
-
-  --buic-foreground-body-reverse-rgb: var(--iui-color-foreground-hsl);
-  --buic-foreground-body-reverse: hsl(
-    var(--iui-color-background-hsl) / var(--iui-opacity-2)
-  );
-  --buic-foreground-muted: var(--iui-color-text-muted);
-  --buic-foreground-disabled: var(--iui-color-text-disabled);
-  --buic-foreground-activehover: var(--iui-color-text);
-
-  --buic-inputs-border: hsl(
-    var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
-  );
-  --buic-inputs-boxshadow: var(--iui-focus-box-shadow);
-  --buic-popup-boxshadow: var(--buic-inputs-boxshadow);
-
-  --buic-foreground-primary: var(--iui-color-icon-accent);
-  --buic-foreground-primary-tone: var(--iui-color-text-accent-hover);
-  --buic-foreground-focus: var(--iui-color-text-accent-hover);
-  --buic-foreground-focus-border: var(--buic-inputs-border);
-  --buic-focus-boxshadow: hsl(
-    var(--iui-color-accent-hsl) / var(--iui-opacity-4)
-  );
-
-  // The following two are still in use by DatePicker and there is no itwinui equivalent
-  --buic-focus-boxshadow-gradient1: hsl(
-    var(--buic-foreground-primary-tone-rgb) / 0
-  );
-  --buic-focus-boxshadow-gradient2: hsl(
-    var(--buic-foreground-primary-rgb) / 0.65
-  );
-
-  --buic-foreground-accessory: var(--iui-color-white);
-  --buic-foreground-success: var(--iui-color-text-positive);
-  --buic-foreground-positive: var(--iui-color-text-positive);
-  --buic-foreground-positive-rgb: var(--iui-color-positive-hsl);
-  --buic-foreground-alert: var(--iui-color-text-negative);
-  --buic-foreground-negative: var(--iui-color-text-negative);
-  --buic-foreground-negative-rgb: var(--iui-color-negative-hsl);
-  --buic-foreground-warning: var(--iui-color-text-warning);
-  --buic-foreground-warning-rgb: var(--iui-color-warning-hsl);
-
-  --buic-background-focus-overlay: hsl(var(--iui-opacity-6));
-  --buic-background-hover-overlay: hsl(
-    var(--iui-color-accent-hsl) / var(--iui-opacity-5)
-  );
-  --buic-background-active-overlay: hsl(
-    var(--iui-color-accent-hsl) / var(--iui-opacity-5)
-  );
-  --buic-background-pressed-overlay: hsl(var(--iui-color-accent-hsl) / 0.3);
-
-  --buic-background-card: var(--buic-background-tooltip);
-  --buic-background-striped_row: hsl(var(--iui-color-foreground-hsl) / 0.03);
-
-  /** background.5 */
-  --buic-background-titlebar: var(--buic-background-5);
-  --buic-background-dialog-stroke: var(--buic-background-5);
-  --buic-background-widget-stroke: var(--buic-background-5);
-  --buic-background-control-stroke: var(--buic-background-5);
-  --buic-background-panel-stroke: var(--buic-background-5);
-  --buic-background-toolbutton-stroke: var(--buic-background-5);
-
-  /** background.4 */
-  --buic-background-titlebar-outoffocus: var(--buic-background-4);
-  --buic-background-divider: var(--buic-background-4);
-  --buic-background-widget-element-stroke: var(--buic-background-4);
-  --buic-background-statusbar: var(--buic-background-4);
-  --buic-background-table-header: var(--buic-background-4);
-  --buic-background-control-stroke-disabled: var(--buic-background-4);
-
-  /** background.3 */
-  --buic-background-tab-inactive: var(--buic-background-3);
-  --buic-background-toolbutton-inactive: var(--buic-background-3);
-  --buic-background-context-menu: var(--buic-background-3);
-  --buic-background-widget-panel: var(--buic-background-3);
-  --buic-background-placeholder: var(--buic-background-3);
-  --buic-background-control-disabled: var(--buic-background-3);
-
-  /** background.2 */
-  --buic-background-tab-active: var(--buic-background-2);
-  --buic-background-dialog: var(--buic-background-2);
-  --buic-background-widget: var(--buic-background-2);
-  --buic-background-window: var(--buic-background-2);
-  --buic-background-toolbar: var(--buic-background-2);
-  --buic-background-panel: var(--buic-background-2);
-
-  /** background.1 */
-  --buic-background-control: var(--buic-background-1);
-
-  // Color variables
-  --buic-row-selection: var(--iui-color-background-accent-muted);
-  --buic-row-hover: var(--iui-color-background-hover);
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+
+// cspell:ignore mediumgray titlebar toolbutton outoffocus
+
+/** @note: This file should only be imported by UiCore.ts.
+ *  It should NOT be imported by any *.scss or other ui-core files.
+ */
+
+[data-root-container="iui-root-id"] {
+  // NEEDSWORK - Need to deprecate these accessory colors
+  --buic-accessory-hollow: rgb(255, 255, 255);
+  --buic-accessory-primary: rgb(000, 139, 225);
+  --buic-accessory-success: rgb(083, 162, 026);
+  --buic-accessory-alert: rgb(211, 010, 010);
+  --buic-accessory-warning: rgb(241, 139, 018);
+  --buic-accessory-primary-tint: rgb(165, 215, 245);
+  --buic-accessory-success-tint: rgb(195, 225, 175);
+  --buic-accessory-alert-tint: rgb(239, 169, 169);
+  --buic-accessory-warning-tint: rgb(249, 215, 171);
+
+  --buic-background-1: var(--iui-color-background);
+  --buic-background-2: var(--iui-color-background-hover);
+  --buic-background-3: var(--iui-color-background-backdrop);
+  --buic-background-4: var(--iui-color-background-backdrop-hover);
+  --buic-background-5: var(--iui-color-background-disabled);
+  --buic-background-primary: var(--iui-color-background-accent);
+  --buic-background-tooltip: hsl(var(--iui-color-background-hsl) / 0.9);
+  --buic-background-scrollbar: hsl(
+    var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+  );
+  --buic-background-scrollbar-hover: hsl(
+    var(--iui-color-foreground-hsl) / var(--iui-opacity-3)
+  );
+
+  --buic-foreground-body-rgb: var(--iui-color-foreground-hsl);
+  --buic-foreground-body: var(--iui-color-text);
+
+  --buic-foreground-body-reverse-rgb: var(--iui-color-foreground-hsl);
+  --buic-foreground-body-reverse: hsl(
+    var(--iui-color-background-hsl) / var(--iui-opacity-2)
+  );
+  --buic-foreground-muted: var(--iui-color-text-muted);
+  --buic-foreground-disabled: var(--iui-color-text-disabled);
+  --buic-foreground-activehover: var(--iui-color-text);
+
+  --buic-inputs-border: hsl(
+    var(--iui-color-foreground-hsl) / var(--iui-opacity-4)
+  );
+  --buic-inputs-boxshadow: var(--iui-focus-box-shadow);
+  --buic-popup-boxshadow: var(--buic-inputs-boxshadow);
+
+  --buic-foreground-primary: var(--iui-color-icon-accent);
+  --buic-foreground-primary-tone: var(--iui-color-text-accent-hover);
+  --buic-foreground-focus: var(--iui-color-text-accent-hover);
+  --buic-foreground-focus-border: var(--buic-inputs-border);
+  --buic-focus-boxshadow: hsl(
+    var(--iui-color-accent-hsl) / var(--iui-opacity-4)
+  );
+
+  // The following two are still in use by DatePicker and there is no itwinui equivalent
+  --buic-focus-boxshadow-gradient1: hsl(
+    var(--buic-foreground-primary-tone-rgb) / 0
+  );
+  --buic-focus-boxshadow-gradient2: hsl(
+    var(--buic-foreground-primary-rgb) / 0.65
+  );
+
+  --buic-foreground-accessory: var(--iui-color-white);
+  --buic-foreground-success: var(--iui-color-text-positive);
+  --buic-foreground-positive: var(--iui-color-text-positive);
+  --buic-foreground-positive-rgb: var(--iui-color-positive-hsl);
+  --buic-foreground-alert: var(--iui-color-text-negative);
+  --buic-foreground-negative: var(--iui-color-text-negative);
+  --buic-foreground-negative-rgb: var(--iui-color-negative-hsl);
+  --buic-foreground-warning: var(--iui-color-text-warning);
+  --buic-foreground-warning-rgb: var(--iui-color-warning-hsl);
+
+  --buic-background-focus-overlay: hsl(var(--iui-opacity-6));
+  --buic-background-hover-overlay: hsl(
+    var(--iui-color-accent-hsl) / var(--iui-opacity-5)
+  );
+  --buic-background-active-overlay: hsl(
+    var(--iui-color-accent-hsl) / var(--iui-opacity-5)
+  );
+  --buic-background-pressed-overlay: hsl(var(--iui-color-accent-hsl) / 0.3);
+
+  --buic-background-card: var(--buic-background-tooltip);
+  --buic-background-striped_row: hsl(var(--iui-color-foreground-hsl) / 0.03);
+
+  /** background.5 */
+  --buic-background-titlebar: var(--buic-background-5);
+  --buic-background-dialog-stroke: var(--buic-background-5);
+  --buic-background-widget-stroke: var(--buic-background-5);
+  --buic-background-control-stroke: var(--buic-background-5);
+  --buic-background-panel-stroke: var(--buic-background-5);
+  --buic-background-toolbutton-stroke: var(--buic-background-5);
+
+  /** background.4 */
+  --buic-background-titlebar-outoffocus: var(--buic-background-4);
+  --buic-background-divider: var(--buic-background-4);
+  --buic-background-widget-element-stroke: var(--buic-background-4);
+  --buic-background-statusbar: var(--buic-background-4);
+  --buic-background-table-header: var(--buic-background-4);
+  --buic-background-control-stroke-disabled: var(--buic-background-4);
+
+  /** background.3 */
+  --buic-background-tab-inactive: var(--buic-background-3);
+  --buic-background-toolbutton-inactive: var(--buic-background-3);
+  --buic-background-context-menu: var(--buic-background-3);
+  --buic-background-widget-panel: var(--buic-background-3);
+  --buic-background-placeholder: var(--buic-background-3);
+  --buic-background-control-disabled: var(--buic-background-3);
+
+  /** background.2 */
+  --buic-background-tab-active: var(--buic-background-2);
+  --buic-background-dialog: var(--buic-background-2);
+  --buic-background-widget: var(--buic-background-2);
+  --buic-background-window: var(--buic-background-2);
+  --buic-background-toolbar: var(--buic-background-2);
+  --buic-background-panel: var(--buic-background-2);
+
+  /** background.1 */
+  --buic-background-control: var(--buic-background-1);
+
+  // Color variables
+  --buic-row-selection: var(--iui-color-background-accent-muted);
+  --buic-row-hover: var(--iui-color-background-hover);
+}

package/lib/cjs/core-react/contextmenu/ContextMenu.d.ts

@@ -7,8 +7,8 @@ import type { CommonProps } from "../utils/Props";
 import { ContextMenuDirection } from "./ContextMenuDirection";
 import { ContextSubMenu } from "./ContextSubMenu";
 /** Properties for the [[ContextMenu]] component
-  * @public
-  */
+ * @public
+ */
 export interface ContextMenuProps extends CommonProps {
     /** Whether ContextMenu is currently opened. */
     opened: boolean;
@@ -46,10 +46,10 @@ interface ContextMenuState {
     ignoreNextKeyUp: boolean;
 }
 /**
-  * A context menu populated with [[ContextMenuItem]] components.
-  * Can be nested using [[ContextSubMenu]] component.
-  * @public
-  */
+ * A context menu populated with [[ContextMenuItem]] components.
+ * Can be nested using [[ContextSubMenu]] component.
+ * @public
+ */
 export declare class ContextMenu extends React.PureComponent<ContextMenuProps, ContextMenuState> {
     private _rootElement;
     private _menuElement;
@@ -70,7 +70,7 @@ export declare class ContextMenu extends React.PureComponent<ContextMenuProps, C
     static autoFlip: (dir: ContextMenuDirection, rect: DOMRectReadOnly, windowWidth: number, windowHeight: number) => ContextMenuDirection;
     private _handleHotKeyParsed;
     private _handleOnOutsideClick;
-    render(): JSX.Element;
+    render(): React.ReactElement;
     /** @internal */
     static getCSSClassNameFromDirection: (direction?: ContextMenuDirection) => string;
     private _injectMenuItemProps;

package/lib/cjs/core-react/contextmenu/ContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/ContextMenu.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAI9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;IAEI;AACJ,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,+CAA+C;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,gFAAgF;IAChF,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC;IAC5C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC/B,oCAAoC;IACpC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0IAA0I;IAC1I,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,gBAAgB;IAChB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,gBAAgB;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,gBAAgB;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,oBAAoB,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;;;IAII;AACJ,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IACtF,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,gBAAgB,CAAiD;IACzE,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,UAAU,CAAkC;IAEpD,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,cAAc,CAAsE;IAC5F,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,mBAAmB,CAAa;IACxC,OAAO,CAAC,kBAAkB,CAAa;IAEvC,OAAc,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAOnD;IAEF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;gBAC/C,KAAK,EAAE,gBAAgB;IASnC,gBAAgB;IAChB,OAAc,QAAQ,QAAS,oBAAoB,QAAQ,eAAe,eAAe,MAAM,gBAAgB,MAAM,KAAG,oBAAoB,CAsD1I;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAGF,OAAO,CAAC,qBAAqB,CAG3B;IAEc,MAAM,IAAI,GAAG,CAAC,OAAO;IA2CrC,gBAAgB;IAChB,OAAc,4BAA4B,eAAgB,oBAAoB,KAAG,MAAM,CAyCrF;IAEF,OAAO,CAAC,oBAAoB,CAiC1B;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,SAAS;IAOjB,gBAAgB;IACA,iBAAiB;IAWjC,gBAAgB;IACA,oBAAoB;IAMpC,OAAO,CAAC,oBAAoB;IAqBrB,KAAK,aAIV;IAEK,IAAI,aAIT;IAEK,OAAO,QAAO,OAAO,CAQ1B;IAEF,OAAO,CAAC,kBAAkB,CAIxB;IAEF,OAAO,CAAC,YAAY,CAGlB;IAEF,OAAO,CAAC,YAAY,CA6ElB;IAEc,kBAAkB,CAAC,SAAS,EAAE,gBAAgB;CAa/D"}
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/ContextMenu.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,oBAAoB,CAAC;AAE5B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAI9D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,+CAA+C;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,gFAAgF;IAChF,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,uDAAuD;IACvD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,GAAG,CAAC;IAC5C,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,GAAG,CAAC;IAC/B,oCAAoC;IACpC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,GAAG,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wEAAwE;IACxE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oDAAoD;IACpD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0IAA0I;IAC1I,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB;IAChB,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,gBAAgB;IAChB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,gBAAgB;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,gBAAgB;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,oBAAoB,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAED;;;;GAIG;AACH,qBAAa,WAAY,SAAQ,KAAK,CAAC,aAAa,CAClD,gBAAgB,EAChB,gBAAgB,CACjB;IACC,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,YAAY,CAA4B;IAChD,OAAO,CAAC,gBAAgB,CAAiD;IACzE,OAAO,CAAC,OAAO,CAAa;IAC5B,OAAO,CAAC,UAAU,CAAkC;IAEpD,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,cAAc,CACa;IACnC,OAAO,CAAC,kBAAkB,CAAa;IACvC,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,mBAAmB,CAAa;IACxC,OAAO,CAAC,kBAAkB,CAAa;IAEvC,OAAc,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAOnD;IAEF,gBAAgB;IAChB,SAAyB,KAAK,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC;gBAC/C,KAAK,EAAE,gBAAgB;IASnC,gBAAgB;IAChB,OAAc,QAAQ,QACf,oBAAoB,QACnB,eAAe,eACR,MAAM,gBACL,MAAM,KACnB,oBAAoB,CAsDrB;IAEF,OAAO,CAAC,mBAAmB,CAEzB;IAGF,OAAO,CAAC,qBAAqB,CAG3B;IAEc,MAAM,IAAI,KAAK,CAAC,YAAY;IAqE5C,gBAAgB;IAChB,OAAc,4BAA4B,eAC5B,oBAAoB,KAC/B,MAAM,CAuCP;IAEF,OAAO,CAAC,oBAAoB,CAgD1B;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,SAAS;IASjB,gBAAgB;IACA,iBAAiB;IAUjC,gBAAgB;IACA,oBAAoB;IAMpC,OAAO,CAAC,oBAAoB;IA8BrB,KAAK,aAGV;IAEK,IAAI,aAGT;IAEK,OAAO,QAAO,OAAO,CAQ1B;IAEF,OAAO,CAAC,kBAAkB,CAUxB;IAEF,OAAO,CAAC,YAAY,CAElB;IAEF,OAAO,CAAC,YAAY,CAiFlB;IAEc,kBAAkB,CAAC,SAAS,EAAE,gBAAgB;CAa/D"}