@itwin/core-react 3.0.0-dev.77 → 3.0.0-dev.81

package/lib/esm/core-react/checkbox/checkbox.scss

@@ -0,0 +1,129 @@
+/*---------------------------------------------------------------------------------------------
+* 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 "~@itwin/itwinui-css/scss/style/space";
+@import "~@itwin/itwinui-css/scss/style/speed";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "~@itwin/itwinui-css/scss/style/variables";
+
+@mixin uicore-inputs-checkbox {
+
+  display: block;
+  position: relative;
+  font-size: $iui-font-size;
+  line-height: normal;
+  cursor: pointer;
+  user-select: none;
+  color: $buic-foreground-body;
+  min-width: 1em;
+  min-height: 1.57em;
+
+  &.core-checkbox-no-label {
+    display: inline-block;
+    min-height: 1em;
+  }
+
+  > input {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    cursor: pointer;
+  }
+
+  .core-checkbox-label {
+    padding-left: $iui-l;
+  }
+
+  .core-checkbox-checkmark,
+  .core-checkbox-indeterminate {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    height: 1em;
+    width: 1em;
+    border: 1px solid $buic-foreground-disabled;
+    background-color:  $buic-background-control;
+    border-radius: $iui-border-radius;
+  }
+
+  &:hover:not(.core-disabled) input ~ .core-checkbox-checkmark,
+  &:hover:not(.core-disabled) input ~ .core-checkbox-indeterminate {
+    border-color:     $buic-foreground-activehover;
+    transition:       all $iui-speed-fast ease-out;
+  }
+
+  & input:checked ~ .core-checkbox-checkmark,
+  & input:checked ~ .core-checkbox-indeterminate {
+    border-color:     $buic-foreground-muted;
+  }
+
+  & input:active ~ .core-checkbox-checkmark,
+  & input:active ~ .core-checkbox-indeterminate,
+  & input:focus ~ .core-checkbox-checkmark,
+  & input:focus ~ .core-checkbox-indeterminate {
+    border-color:     $buic-foreground-focus-border;
+    box-shadow:       $uicore-inputs-focus-boxshadow;
+  }
+
+  .core-checkbox-checkmark::after,
+  .core-checkbox-indeterminate::after {
+    content: '';
+    position: absolute;
+    display: none;
+  }
+
+  & input:checked ~ .core-checkbox-checkmark::after,
+  & input:checked ~ .core-checkbox-indeterminate::after {
+    display: block;
+  }
+
+  & .core-checkbox-checkmark::after,
+  & .core-checkbox-indeterminate::after {
+    border: solid $buic-foreground-primary;
+  }
+
+  & input:not(:indeterminate) ~ .core-checkbox-checkmark::after {
+    top: 1px;
+    left: 4px;
+    width: 4px;
+    height: 8px;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  /* Support for using core-checkbox-indeterminate class */
+  & .core-checkbox-indeterminate::after {
+    top: 6px;
+    left: 3px;
+    width: 7px;
+    border-width: 0 1px 2px 0;
+  }
+
+  /* Support for using checkboxInput.current.indeterminate = true */
+  & input:indeterminate ~ .core-checkbox-checkmark::after {
+    display: block;
+    top: 6px;
+    left: 3px;
+    width: 7px;
+    border-width: 0 1px 2px 0;
+  }
+
+  &.core-disabled {
+    opacity: $uicore-opacity-disabled;
+    cursor: not-allowed;
+  }
+
+  &.success {
+    color: $buic-foreground-success;
+  }
+
+  &.warning {
+    color: $buic-foreground-warning;
+  }
+
+  &.error {
+    color: $buic-foreground-alert;
+  }
+}

package/lib/esm/core-react/checkbox/classes.scss

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./index";
+
+.uicore-inputs-checkbox { @include uicore-inputs-checkbox; }
+.core-checkbox { @include uicore-inputs-checkbox; }

package/lib/esm/core-react/checkbox/index.scss

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+* 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 "../inputs/variables";
+@import "./checkbox";

package/lib/esm/core-react/checklistbox/CheckListBox.d.ts

@@ -0,0 +1,38 @@
+/** @packageDocumentation
+ * @module CheckListBox
+ */
+import "./CheckListBox.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for the [[CheckListBoxItem]] component
+ * @public
+ */
+export interface CheckListBoxItemProps extends CommonProps {
+    /** Label */
+    label: string;
+    /** Indicates whether the item is checked or not */
+    checked?: boolean;
+    /** Indicates whether the item is disabled or not */
+    disabled?: boolean;
+    /** Function called when item is clicked. */
+    onClick?: () => any;
+    /** Function called when item is changed. */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => any;
+}
+/** Item with a checkbox added to a [[CheckListBox]].
+ * @public
+ */
+export declare class CheckListBoxItem extends React.PureComponent<CheckListBoxItemProps> {
+    render(): JSX.Element;
+}
+/** Separator added to a [[CheckListBox]].
+ * @public
+ */
+export declare function CheckListBoxSeparator(): JSX.Element;
+/** React component showing a list of Checkbox items.
+ * @public
+ */
+export declare class CheckListBox extends React.PureComponent<CommonProps> {
+    render(): JSX.Element;
+}
+//# sourceMappingURL=CheckListBox.d.ts.map

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

@@ -0,0 +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,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;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,CAAC;IAChD,MAAM;CAQvB"}

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

@@ -0,0 +1,37 @@
+/*---------------------------------------------------------------------------------------------
+* 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
+ */
+import "./CheckListBox.scss";
+import classnames from "classnames";
+import * as React from "react";
+import { Checkbox } from "@itwin/itwinui-react";
+/** Item with a checkbox added to a [[CheckListBox]].
+ * @public
+ */
+export class CheckListBoxItem extends React.PureComponent {
+    render() {
+        const className = classnames("core-chk-listboxitem-checkbox", this.props.className);
+        return (React.createElement("li", null,
+            React.createElement(Checkbox, { checked: this.props.checked, disabled: this.props.disabled, className: className, style: this.props.style, label: this.props.label, onClick: this.props.onClick, onChange: this.props.onChange, "data-testid": "core-chk-listboxitem-checkbox" })));
+    }
+}
+/** Separator added to a [[CheckListBox]].
+ * @public
+ */
+export function CheckListBoxSeparator() {
+    return (React.createElement("div", { className: "core-chk-listbox-separator" }));
+}
+/** React component showing a list of Checkbox items.
+ * @public
+ */
+export class CheckListBox extends React.PureComponent {
+    render() {
+        const className = classnames("core-chk-listbox", this.props.className);
+        return (React.createElement("ul", { className: className, style: this.props.style }, this.props.children));
+    }
+}
+//# sourceMappingURL=CheckListBox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckListBox.js","sourceRoot":"","sources":["../../../../src/core-react/checklistbox/CheckListBox.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,qBAAqB,CAAC;AAC7B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAmBhD;;GAEG;AACH,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,aAAoC;IAC9D,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QACpF,OAAO,CACL;YACE,oBAAC,QAAQ,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;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB;IACnC,OAAO,CACL,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CAC/C,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,aAA0B;IAChD,MAAM;QACpB,MAAM,SAAS,GAAG,UAAU,CAAC,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","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 { 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(\"core-chk-listboxitem-checkbox\", this.props.className);\n    return (\n      <li>\n        <Checkbox checked={this.props.checked} disabled={this.props.disabled}\n          className={className} style={this.props.style}\n          label={this.props.label} onClick={this.props.onClick} onChange={this.props.onChange}\n          data-testid=\"core-chk-listboxitem-checkbox\" />\n      </li>\n    );\n  }\n}\n\n/** Separator added to a [[CheckListBox]].\n * @public\n */\nexport function CheckListBoxSeparator() {\n  return (\n    <div className=\"core-chk-listbox-separator\" />\n  );\n}\n\n/** React component showing a list of Checkbox items.\n * @public\n */\nexport class CheckListBox extends React.PureComponent<CommonProps> {\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/esm/core-react/checklistbox/CheckListBox.scss

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../checkbox/index.scss";
+
+.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: $buic-inputs-border;
+    margin: 4px 0;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,18 @@
+/*---------------------------------------------------------------------------------------------
+* 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 "./button/classes";
+@import "./checkbox/classes";
+@import "./expandable/classes";
+@import "./icons/classes";
+@import "./inputs/classes";
+@import "./progress-indicators/classes";
+@import "./radio/classes";
+@import "./select/classes";
+@import "./tabs/classes";
+@import "./text/classes";
+@import "./tiles/classes";

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

@@ -0,0 +1,58 @@
+/*---------------------------------------------------------------------------------------------
+* 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/theme";
+
+// 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.
+ */
+
+@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.00);
+
+  --buic-background-editable:         #{mix($iui-color-background-1--light, $iui-color-background-primary--light, 70%)};
+  --buic-row-selection:               #{mix($iui-color-background-1--light, $iui-color-background-primary--light, 80%)};
+  --buic-row-hover:                   #{mix($iui-color-background-1--light, $iui-color-background-primary--light, 90%)};
+}
+
+@mixin dark-theme {
+  --buic-button-gradient1:            rgba(var(--iui-color-foreground-body-invert-rgb), 0.00);
+  --buic-button-gradient2:            rgba(var(--iui-color-foreground-body-invert-rgb), 0.25);
+
+  --buic-background-editable:         #{mix($iui-color-background-1--dark, $iui-color-background-primary--dark, 70%)};
+  --buic-row-selection:               #{mix($iui-color-background-1--dark, $iui-color-background-primary--dark, 80%)};
+  --buic-row-hover:                   #{mix($iui-color-background-1--dark, $iui-color-background-primary--dark, 90%)};
+}
+
+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/esm/core-react/colorvariables.scss

@@ -0,0 +1,112 @@
+/*---------------------------------------------------------------------------------------------
+* 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/theme";
+
+// 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.
+ */
+
+:root {
+
+  // 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-rgb:                    var(--iui-color-background-1-rgb);
+  --buic-background-2-rgb:                    var(--iui-color-background-2-rgb);
+  --buic-background-3-rgb:                    var(--iui-color-background-3-rgb);
+  --buic-background-4-rgb:                    var(--iui-color-background-4-rgb);
+  --buic-background-5-rgb:                    var(--iui-color-background-5-rgb);
+
+  --buic-background-1:                        var(--iui-color-background-1);
+  --buic-background-2:                        var(--iui-color-background-2);
+  --buic-background-3:                        var(--iui-color-background-3);
+  --buic-background-4:                        var(--iui-color-background-4);
+  --buic-background-5:                        var(--iui-color-background-5);
+  --buic-background-primary:                  var(--iui-color-background-primary);
+  --buic-background-tooltip:                  rgba(var(--iui-color-background-5-rgb), 0.90);
+  --buic-background-scrollbar:                rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --buic-background-scrollbar-hover:          rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
+
+  --buic-foreground-body-rgb:                 var(--iui-text-color-rgb);
+  --buic-foreground-body:                     var(--iui-text-color);
+  --buic-foreground-body-reverse-rgb:         var(--iui-color-foreground-body-invert-rgb);
+  --buic-foreground-body-reverse:             rgba(var(--iui-color-foreground-body-invert-rgb), var(--iui-opacity-2));
+  --buic-foreground-muted:                    var(--iui-text-color-muted);
+  --buic-foreground-disabled:                 var(--iui-text-color-placeholder);
+  --buic-foreground-activehover:              var(--iui-icons-color-actionable-hover);
+
+  --buic-inputs-border:                       rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
+  --buic-inputs-boxshadow:                    var(--iui-focus-box-shadow);
+  --buic-popup-boxshadow:                     var(--buic-inputs-boxshadow);
+
+  --buic-foreground-primary:                  var(--iui-icons-color-primary);
+  --buic-foreground-primary-tone:             var(--iui-color-foreground-primary-overlay);
+  --buic-foreground-focus:                    var(--iui-color-foreground-primary-overlay);
+  --buic-foreground-focus-border:             var(--buic-inputs-border);
+  --buic-focus-boxshadow:                     rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-4));
+
+  --buic-foreground-accessory:                var(--iui-color-foreground-accessory);
+  --buic-foreground-success:                  var(--iui-color-foreground-positive);
+  --buic-foreground-positive:                 var(--iui-color-foreground-positive);
+  --buic-foreground-positive-rgb:             var(--iui-color-foreground-positive-rgb);
+  --buic-foreground-alert:                    var(--iui-color-foreground-negative);
+  --buic-foreground-negative:                 var(--iui-color-foreground-negative);
+  --buic-foreground-negative-rgb:             var(--iui-color-foreground-negative-rgb);
+  --buic-foreground-warning:                  var(--iui-color-foreground-warning);
+  --buic-foreground-warning-rgb:              var(--iui-color-foreground-warning-rgb);
+
+  --buic-background-focus-overlay:            rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
+  --buic-background-hover-overlay:            rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  --buic-background-active-overlay:           rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
+  --buic-background-pressed-overlay:          rgba(var(--iui-color-foreground-primary-rgb), 0.3);
+
+  --buic-background-card:                     var(--buic-background-tooltip);
+  --buic-background-striped_row:              rgba(var(--iui-color-foreground-body-rgb), 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-panel:                    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);
+
+  /** background.1 */
+  --buic-background-control:                  var(--buic-background-1);
+}

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

@@ -0,0 +1,92 @@
+/** @packageDocumentation
+ * @module ContextMenu
+ */
+import "./ContextMenu.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+import { ContextMenuDirection } from "./ContextMenuDirection";
+import { ContextSubMenu } from "./ContextSubMenu";
+/** Properties for the [[ContextMenu]] component
+  * @public
+  */
+export interface ContextMenuProps extends CommonProps {
+    /** Whether ContextMenu is currently opened. */
+    opened: boolean;
+    /** Which direction the menu opens. Default: ContextMenuDirection.BottomRight */
+    direction?: ContextMenuDirection;
+    /** When click is registered outside of ContextMenu. */
+    onOutsideClick?: (event: MouseEvent) => any;
+    /** When list item or submenu is selected */
+    onSelect?: (event: any) => any;
+    /** when Escape button is pressed */
+    onEsc?: (data: any) => any;
+    /** Whether menu flips directions based on screen edge. Default: true */
+    autoflip?: boolean;
+    /** Whether menu hugs screen edge when autoflip is off. Default: true */
+    edgeLimit?: boolean;
+    /** Whether Hotkey press selects item, or just highlights item. Default: true */
+    hotkeySelect?: boolean;
+    /** starting menu item selected index Default: -1 */
+    selectedIndex?: number;
+    /** whether menu floats on the viewport, or the page. When false, container elements can clip menu with overflow: hidden; Default: true */
+    floating?: boolean;
+    /** @internal */
+    parentMenu?: ContextMenu;
+    /** @internal */
+    parentSubmenu?: ContextSubMenu;
+    /** @internal */
+    ignoreNextKeyUp?: boolean;
+}
+/** @internal */
+interface ContextMenuState {
+    selectedIndex: number;
+    direction: ContextMenuDirection;
+    ignoreNextKeyUp: boolean;
+}
+/**
+  * 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;
+    private _selectedElement;
+    private _length;
+    private _hotKeyMap;
+    private _lastChildren;
+    private _lastDirection;
+    private _lastSelectedIndex;
+    private _injectedChildren;
+    private _parentWindowHeight;
+    private _parentWindowWidth;
+    static defaultProps: Partial<ContextMenuProps>;
+    /** @internal */
+    readonly state: Readonly<ContextMenuState>;
+    constructor(props: ContextMenuProps);
+    /** @internal */
+    static autoFlip: (dir: ContextMenuDirection, rect: DOMRectReadOnly, windowWidth: number, windowHeight: number) => ContextMenuDirection;
+    private _handleHotKeyParsed;
+    private _handleOnOutsideClick;
+    render(): JSX.Element;
+    /** @internal */
+    static getCSSClassNameFromDirection: (direction?: ContextMenuDirection | undefined) => string;
+    private _injectMenuItemProps;
+    private _rootRef;
+    private _menuRef;
+    private getWindow;
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    private checkRenderDirection;
+    focus: () => void;
+    blur: () => void;
+    getRect: () => DOMRect;
+    private _handleFocusChange;
+    private _handleClick;
+    private _handleKeyUp;
+    componentDidUpdate(prevProps: ContextMenuProps): void;
+}
+export {};
+//# sourceMappingURL=ContextMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../../../src/core-react/contextmenu/ContextMenu.tsx"],"names":[],"mappings":"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"}