@itwin/core-react 5.0.0-dev.2 → 5.0.0

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

@@ -0,0 +1,51 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "sass:map";
+@use "sass:meta";
+@use "_helpers";
+
+@forward "_helpers";
+
+// Order matters, last is top-most on screen.
+$uicore-internal-z-index-layers: view-overlay, view-content-dialog,
+  content-card-popup, widget-grip, drop-target, dragged-widget, zone-target,
+  zone-outline, toolbar-panels, tool-settings-popup, status-overflow-popup,
+  status-popup, modal-frontstage-overlay, modal-frontstage, dialog, dialog-popup,
+  status-message, tooltip, context-menu-z, dragdrop, cursor-overlay, drag-target,
+  drag-preview, backstage-overlay, backstage, keyin-palette-overlay;
+
+$uicore-z-index-step: 1000;
+
+@function uicore-internal-get-next-z-index-step($counter) {
+  @return $counter + $uicore-z-index-step;
+}
+
+$uicore-internal-z-index-layer-map: helpers.uicore-map-from-array-with-result-arg(
+  $uicore-internal-z-index-layers,
+  meta.get-function(uicore-internal-get-next-z-index-step),
+  0
+);
+
+// Use this to get z-index value
+@function uicore-get-z-index($layer) {
+  @if map.has-key($uicore-internal-z-index-layer-map, $layer) {
+    @return map.get($uicore-internal-z-index-layer-map, $layer);
+  } @else {
+    @error "Failed to get z-index for $layer: #{$layer}";
+  }
+}
+
+// Use this to add z-index property
+@mixin uicore-z-index($layer) {
+  z-index: uicore-get-z-index($layer);
+}
+
+// Use this to add a CSS variable for each z-index layer
+@mixin uicore-z-index-variables() {
+  @each $layer in $uicore-internal-z-index-layers {
+    $z-index: uicore-get-z-index($layer);
+    --uicore-z-index-#{$layer}: #{$z-index};
+  }
+}

package/lib/esm/core-react/autosuggest/AutoSuggest.scss

@@ -0,0 +1,79 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../scrollbar" as *;
+@use "../inputs/variables" as *;
+
+.uicore-autosuggest__container {
+  position: relative;
+}
+
+.uicore-autosuggest__input {
+  min-height: 28px !important;
+  padding: $uicore-iui-input-padding !important;
+}
+
+.uicore-autosuggest__input--focused {
+  outline: none;
+}
+
+.uicore-autosuggest__input::-ms-clear {
+  display: none;
+}
+
+.uicore-autosuggest__input--open {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.uicore-autosuggest__suggestions-container {
+  display: none;
+}
+
+.uicore-autosuggest__suggestions-container--open {
+  display: block;
+  position: absolute;
+  width: 100%;
+  border: 1px solid var(--iui-color-border-foreground);
+  border-top: 0;
+  background-color: var(--iui-color-background);
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+  box-sizing: border-box;
+  max-height: 400px;
+  overflow-y: auto;
+  z-index: 2;
+
+  @include uicore-touch-scrolling;
+  @include uicore-scrollbar();
+}
+
+.uicore-autosuggest__suggestions-list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.uicore-autosuggest__suggestion {
+  cursor: pointer;
+  padding: 5px 10px;
+}
+
+.uicore-autosuggest__suggestion--highlighted {
+  background-color: var(--iui-color-background-accent-muted);
+}
+
+.uicore-autosuggest__section-container {
+  border-top: 1px dashed var(--iui-color-background-backdrop-hover);
+}
+
+.uicore-autosuggest__section-container--first {
+  border-top: 0;
+}
+
+.uicore-autosuggest__section-title {
+  padding: 10px 0 0 10px;
+  font-size: var(--iui-font-size-0);
+  color: var(--iui-color-background-backdrop-hover);
+}

package/lib/esm/core-react/badge/DeprecatedBadge.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-badge-deprecatedBadge {
+  transform: rotate(270deg);
+
+  svg {
+    fill: rgba(0, 0, 0, 0.85);
+  }
+}

package/lib/esm/core-react/badge/NewBadge.scss

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-badge-newBadge {
+  color: var(--iui-color-text-positive);
+  transform: rotate(270deg);
+
+  svg {
+    fill: currentColor;
+  }
+}

package/lib/esm/core-react/badge/TechnicalPreviewBadge.scss

@@ -0,0 +1,11 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.core-badge-technicalPreviewBadge {
+  transform: rotate(270deg);
+
+  svg {
+    fill: rgba(0, 0, 0, 0.85);
+  }
+}

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

@@ -0,0 +1,44 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../_scrollbar";
+
+@forward "../_scrollbar";
+
+@mixin uicore-centered {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin uicore-full-height {
+  height: 100%;
+}
+
+@mixin uicore-full-width {
+  width: 100%;
+}
+
+@mixin uicore-full-size {
+  @include uicore-full-height;
+  @include uicore-full-width;
+}
+
+@mixin uicore-fill-centered {
+  @include uicore-centered;
+  @include uicore-full-size;
+}
+
+@mixin uicore-scrollview {
+  @include uicore-full-size;
+  overflow-y: auto;
+
+  @include scrollbar.uicore-touch-scrolling;
+  @include scrollbar.uicore-scrollbar();
+}
+
+@mixin uicore-flex-wrap-container {
+  display: flex;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,27 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "./index" as *;
+
+.uicore-centered {
+  @include uicore-centered;
+}
+.uicore-full-height {
+  @include uicore-full-height;
+}
+.uicore-full-width {
+  @include uicore-full-width;
+}
+.uicore-full-size {
+  @include uicore-full-size;
+}
+.uicore-fill-centered {
+  @include uicore-fill-centered;
+}
+.uicore-scrollview {
+  @include uicore-scrollview;
+}
+.uicore-flex-wrap-container {
+  @include uicore-flex-wrap-container;
+}

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

@@ -0,0 +1,5 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "./base";

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

@@ -0,0 +1,29 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+$color: var(--iui-color-icon-accent);
+$hoverColor: var(--iui-color-text-accent-hover);
+
+.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: hsl(var(--iui-opacity-6));
+    outline: none;
+  }
+}

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

@@ -0,0 +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;
+  }
+}

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

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

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

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * 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);

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

@@ -0,0 +1,139 @@
+/*---------------------------------------------------------------------------------------------
+ * 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="appui-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-editable: var(--iui-color-background);
+  --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);
+
+  /* Unused gradient variables, left for backwards compatibility */
+  --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
+  );
+}

package/lib/esm/core-react/contextmenu/ContextMenu.scss

@@ -0,0 +1,226 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "../icons/variables" as *;
+@use "../style/baseline" as *;
+@use "../z-index" as *;
+
+$uicore-menu-padding: $uicore-bordered-padding;
+$uicore-menu-top-bottom-padding: calc(#{$uicore-menu-padding} * 0.6667);
+
+.core-context-menu-global {
+  position: fixed;
+  width: 0px;
+  height: 0px;
+
+  @include uicore-z-index(context-menu-z);
+}
+
+.core-context-menu {
+  color: var(--iui-color-text);
+  width: 0px;
+  height: 0px;
+  position: relative;
+
+  @include uicore-z-index(context-menu-z);
+
+  &:hover {
+    color: var(--iui-color-text-hover);
+    cursor: auto;
+  }
+
+  .core-context-menu-container {
+    position: absolute;
+    border-radius: var(--iui-border-radius-1);
+    padding: 4px 0;
+    box-shadow: var(--iui-shadow-1);
+    background-color: var(--iui-color-background);
+    text-overflow: ellipsis;
+    min-width: max-content;
+    max-width: 350px;
+    visibility: hidden;
+    transform: scaleY(0);
+    display: table;
+    border: 1px solid var(--iui-color-border);
+
+    &.core-context-menu-floating {
+      position: fixed;
+    }
+
+    &.core-context-menu-opened {
+      visibility: inherit;
+      transform-origin: top;
+      transform: scaleY(1);
+    }
+
+    &.core-context-menu-center {
+      transform: translate(-50%, -50%);
+    }
+
+    &.core-context-menu-right {
+      transform: translate(0%, -50%);
+    }
+
+    &.core-context-menu-left {
+      transform: translate(-100%, -50%);
+    }
+
+    &.core-context-menu-top {
+      transform: translate(-50%, -100%);
+
+      &.core-context-menu-right {
+        transform: translate(0%, -100%);
+      }
+
+      &.core-context-menu-left {
+        transform: translate(-100%, -100%);
+      }
+    }
+
+    &.core-context-menu-bottom {
+      transform: translate(-50%, 0%);
+
+      &.core-context-menu-right {
+        transform: translate(0%, 0%);
+      }
+
+      &.core-context-menu-left {
+        transform: translate(-100%, 0%);
+      }
+    }
+
+    .core-context-menu-item {
+      display: flex;
+      cursor: default;
+      padding: $uicore-menu-top-bottom-padding $uicore-menu-padding;
+      width: calc(100% - 2 * #{$uicore-menu-padding});
+      align-items: center;
+      position: relative;
+      box-sizing: content-box;
+
+      &:hover {
+        background-color: var(--iui-color-background-hover);
+      }
+
+      &.core-context-menu-is-selected {
+        background-color: var(--iui-color-background-accent-muted);
+      }
+
+      &.core-context-menu-disabled {
+        color: var(--iui-color-text-disabled);
+      }
+
+      &.core-context-menu-hidden {
+        display: none;
+      }
+
+      > .core-context-menu-icon {
+        flex-shrink: 0;
+        flex-grow: 0;
+        width: $uicore-icons-small;
+        height: var(--iui-size-l);
+        font-size: var(--iui-font-size-2);
+        line-height: var(--iui-size-l);
+        text-align: center;
+        margin-right: $uicore-unbordered-padding;
+        opacity: var(--iui-opacity-2);
+        display: flex;
+        align-items: center;
+
+        &.core-context-menu-icon-right {
+          margin-left: $uicore-unbordered-padding;
+          margin-right: 0;
+        }
+      }
+
+      > .core-context-menu-content {
+        flex-shrink: 0;
+        flex-grow: 1;
+        font-size: var(--iui-font-size-1);
+        text-align: left;
+      }
+
+      > .core-context-menu-badge {
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    &:focus {
+      border: 1px solid var(--iui-color-background-backdrop-hover);
+      box-shadow: var(--iui-shadow-1);
+      outline: 0px;
+
+      > .core-context-menu-item.is-selected,
+      > .context-submenu > .core-context-menu-item.is-selected {
+        // .is-selected being applied on hover, overriding with hover color
+        background-color: var(--iui-color-background-hover);
+      }
+    }
+
+    .core-context-submenu {
+      display: flex;
+
+      &.core-context-menu-top {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &.core-context-menu-left {
+        flex-direction: row-reverse;
+        align-items: center;
+      }
+
+      &.core-context-menu-right {
+        flex-direction: row;
+        align-items: center;
+      }
+
+      &.core-context-menu-center {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      &.core-context-menu-top.core-context-menu-left {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      &.core-context-menu-top.core-context-menu-right {
+        flex-direction: row;
+        align-items: flex-end;
+      }
+
+      &.core-context-menu-bottom.core-context-menu-left {
+        flex-direction: row-reverse;
+        align-items: flex-start;
+      }
+
+      &.core-context-menu-bottom.core-context-menu-right {
+        flex-direction: row;
+        align-items: flex-start;
+      }
+
+      .core-context-submenu-container .core-context-submenu-arrow {
+        margin-left: var(--iui-size-s);
+        margin-top: var(--iui-size-3xs);
+        margin-bottom: calc(var(--iui-size-3xs) * -1);
+      }
+    }
+  }
+
+  .core-context-menu-divider {
+    border-bottom: 1px solid var(--iui-color-border-foreground);
+    height: 0px;
+  }
+
+  .core-context-submenu-popup {
+    transform: translateY(-5px); // Compensate for the vertical padding
+  }
+}