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

package/lib/esm/components-react/toolbar/Items.scss

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+$separator-color: var(--iui-color-border-subtle);
+
+.components-toolbar-items-container {
+  $border-radius: var(--iui-border-radius-1);
+
+  border-radius: $border-radius;
+  display: inline-block;
+  vertical-align: bottom;
+  box-sizing: border-box;
+
+  box-shadow: var(--iui-shadow-1);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  pointer-events: auto;
+
+  &.components-vertical {
+    width: $components-desktop-toolbar-width;
+
+    > * {
+      height: $components-desktop-item-height;
+
+      &:not(:first-child) {
+        margin-top: $components-desktop-space-between-toolbar-items;
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          pointer-events: none;
+          height: $components-desktop-space-between-toolbar-items;
+          width: 100%;
+          left: 0;
+          top: -$components-desktop-space-between-toolbar-items;
+        }
+      }
+    }
+  }
+
+  &.components-horizontal {
+    height: $components-desktop-toolbar-height;
+
+    > * {
+      display: inline-block;
+      height: 100%;
+      width: $components-desktop-item-width;
+
+      &:not(:first-child) {
+        margin-left: $components-desktop-space-between-toolbar-items;
+
+        &:before {
+          content: "";
+          display: block;
+          position: absolute;
+          pointer-events: none;
+          width: $components-desktop-space-between-toolbar-items;
+          height: 100%;
+          left: -$components-desktop-space-between-toolbar-items;
+          top: 0;
+        }
+      }
+    }
+  }
+
+  > * {
+    vertical-align: bottom;
+  }
+}
+
+/* modifications to the style to support the appearance of a tool button separator  */
+.components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before {
+  margin-left: $components-desktop-separator-gap-between-toolbar-items;
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-item-container.components-horizontal.components-toolbar-button-add-gap-before::before {
+  width: $components-desktop-separator-thickness;
+  background-color: $separator-color;
+  left: $components-desktop-separator-center-offset;
+}
+
+.components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before {
+  margin-top: $components-desktop-separator-gap-between-toolbar-items;
+}
+
+div.components-toolbar-items-container.components-toolbar-show-decorators
+  .components-toolbar-item-container.components-vertical.components-toolbar-button-add-gap-before::before {
+  height: $components-desktop-separator-thickness;
+  background-color: $separator-color;
+  top: $components-desktop-separator-center-offset;
+}

package/lib/esm/components-react/toolbar/Overflow.scss

@@ -0,0 +1,57 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "variables" as *;
+
+.components-toolbar-button-item.components-ellipsis-icon {
+  position: relative;
+  $ellipsis-size: 4px;
+  $ellipsis-spacing: 8px;
+
+  > .components-icon {
+    .components-ellipsis {
+      position: relative;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+
+    .components-ellipsis:before {
+      content: "";
+      position: absolute;
+      left: -$ellipsis-spacing;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+
+    .components-ellipsis:after {
+      content: "";
+      position: absolute;
+      left: $ellipsis-spacing;
+      width: $ellipsis-size;
+      height: $ellipsis-size;
+      border-radius: 50%;
+      background-color: currentColor;
+    }
+  }
+}
+
+.components-toolbar-overflow_popup {
+  border: none;
+  background: none;
+
+  @include uicore-z-index(toolbar-panels);
+
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/lib/esm/components-react/toolbar/OverflowPanel.scss

@@ -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.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.components-toolbar-overflow-panel {
+  background: var(--iui-color-background);
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  height: unset;
+  width: fit-content;
+  padding: unset;
+
+  &.components-vertical-components-direction-bottom {
+    right: -$components-items-border-width;
+    flex-direction: column;
+    top: 100%;
+  }
+
+  &.components-vertical-components-direction-top {
+    right: -$components-items-border-width;
+    flex-direction: column;
+    bottom: 100%;
+  }
+
+  &.components-horizontal-components-direction-right {
+    left: 100%;
+    bottom: -$components-items-border-width;
+    flex-direction: row;
+  }
+  &.components-horizontal-components-direction-left {
+    right: 100%;
+    bottom: -$components-items-border-width;
+    flex-direction: row;
+  }
+}

package/lib/esm/components-react/toolbar/PopupItem.scss

@@ -0,0 +1,81 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/z-index" as *;
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+@use "variables" as *;
+
+.components-toolbar-expandable-button {
+  $triangle-width: 4px;
+  $triangle-height: $triangle-width;
+  $shadow-vertical-offset: 1px;
+  $margin-from-triangle-to-stroke: 3px;
+  $arrow-shadow: $icon-shadow;
+  position: relative;
+
+  > .components-triangle {
+    border-radius: 0;
+    position: absolute;
+    right: $margin-from-triangle-to-stroke;
+    bottom: $margin-from-triangle-to-stroke;
+    filter: $arrow-shadow;
+    pointer-events: none;
+
+    @include triangle-bottom-right(
+      $width: $triangle-width,
+      $height: $triangle-height,
+      $color: var(--iui-color-text)
+    );
+  }
+
+  &:active > .components-triangle {
+    filter: $no-shadow;
+
+    @include triangle-bottom-right-color($pressed-icon-color);
+  }
+
+  &.components-active {
+    &:not(:active):not(.components-disabled) {
+      > .components-triangle {
+        filter: $no-shadow;
+
+        @include triangle-bottom-right-color($active-icon-color);
+      }
+    }
+  }
+
+  &.components-disabled {
+    > .components-triangle {
+      @include triangle-bottom-right-color($disabled-icon-color);
+    }
+  }
+
+  &.components-disabled-drag {
+    > .components-icon {
+      color: $disabled-icon-color;
+    }
+
+    > .components-triangle {
+      @include triangle-bottom-right-color($disabled-icon-color);
+    }
+  }
+}
+
+.components-toolbar-popupItem_popupItemPopup {
+  @include uicore-z-index(toolbar-panels);
+  width: fit-content;
+  background: var(--iui-color-background);
+  border-color: var(--iui-color-background-disabled);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--iui-border-radius-1);
+
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/lib/esm/components-react/toolbar/Toolbar.scss

@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-toolbar-overflow-sizer {
+  display: inline-block;
+  position: relative;
+
+  &.components-horizontal {
+    width: 100%;
+  }
+
+  &.components-vertical {
+    height: 100%;
+  }
+}

package/lib/esm/components-react/toolbar/_variables.scss

@@ -0,0 +1,34 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/breakpoints";
+
+$components-desktop-item-width: 40px;
+$components-desktop-item-height: 40px;
+
+$components-items-border-width: 1px;
+$components-desktop-space-between-toolbar-items: 1px;
+$components-desktop-separator-gap-between-toolbar-items: 5px;
+$components-desktop-separator-thickness: 1px;
+$components-desktop-separator-center-offset: -3px;
+
+$components-desktop-toolbar-width: 40px;
+$components-desktop-toolbar-height: 40px;
+
+$desktop-tool-stripe-width: 2px;
+$desktop-tool-stripe-height: 30px;
+
+$font-size: var(--iui-font-size-1);
+$icon-size: 16px;
+$icon-color: var(--iui-color-icon);
+$hovered-icon-color: var(--iui-color-icon-hover);
+$pressed-icon-color: var(--iui-color-text);
+$active-icon-color: var(--iui-color-icon-accent);
+$disabled-icon-color: var(--iui-color-icon-disabled);
+$icon-shadow-color: hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2));
+$icon-shadow: drop-shadow(0 1px 0 $icon-shadow-color);
+$no-shadow: drop-shadow(0 0 0 transparent);
+
+$desktop-tool-stripe-width: 2px;
+$desktop-tool-stripe-height: 30px;

package/lib/esm/components-react/toolbar/groupPanel/BackArrow.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 "sass:math";
+@use "../../target" as *;
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-backArrow {
+  $border: solid $back-arrow-thickness currentColor;
+  $size: math.sqrt($back-arrow-size-val * $back-arrow-size-val * 8) * 0.5 + px;
+
+  width: 15px;
+  height: 20px;
+
+  @include components-internal-targeted {
+    cursor: pointer;
+
+    &:after {
+      color: var(--iui-color-text-accent);
+    }
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    position: relative;
+    left: 3px;
+    top: 3px;
+    color: var(--iui-color-text);
+    width: $size;
+    height: $size;
+    border-top: $border;
+    border-left: $border;
+    margin-left: $back-arrow-thickness;
+    margin-top: $back-arrow-thickness;
+    box-sizing: border-box;
+    transform: rotate(-45deg);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}

package/lib/esm/components-react/toolbar/groupPanel/Column.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.
+ *--------------------------------------------------------------------------------------------*/
+.components-toolbar-item-expandable-group-column {
+  > *:not(:last-child) {
+    margin-bottom: 9px;
+  }
+}

package/lib/esm/components-react/toolbar/groupPanel/Columns.scss

@@ -0,0 +1,10 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.components-toolbar-item-expandable-group-columns {
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-gap: 12px;
+  grid-auto-flow: column;
+}

package/lib/esm/components-react/toolbar/groupPanel/Panel.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-panel {
+  line-height: normal;
+  background: var(--iui-color-background);
+  padding: 8px;
+  border-radius: var(--iui-border-radius-1);
+  pointer-events: auto;
+  border: 1px solid var(--iui-color-border);
+  font-size: $font-size;
+}

package/lib/esm/components-react/toolbar/groupPanel/Title.scss

@@ -0,0 +1,33 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-title {
+  white-space: nowrap;
+  text-align: center;
+  color: var(--iui-color-text);
+  margin-bottom: 9px;
+  margin-left: $title-horizontal-margin;
+  margin-right: $title-horizontal-margin;
+
+  @include title;
+}
+
+.components-toolbar-item-expandable-group-nested {
+  position: relative;
+
+  .components-back {
+    position: absolute;
+    left: 10px;
+    top: 8px;
+  }
+
+  > .components-toolbar-item-expandable-group-title {
+    /* Contributes to space available for back arrow */
+    min-height: 14px;
+    margin-left: $title-horizontal-back-arrow-margin;
+    margin-right: $title-horizontal-back-arrow-margin;
+  }
+}

package/lib/esm/components-react/toolbar/groupPanel/_variables.scss

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+@forward "~@itwin/core-react/lib/core-react/typography";
+@forward "../variables";
+
+$panel-padding-left: 16px;
+$panel-padding-right: 8px;
+$panel-padding-top: $panel-padding-right;
+$panel-padding-bottom: 12px;
+$title-color: var(--iui-color-text);
+$back-arrow-thickness: 2px;
+$back-arrow-size-val: 6;
+$title-horizontal-margin: 20px;
+$title-horizontal-back-arrow-margin: 28px;

package/lib/esm/components-react/toolbar/groupPanel/tool/Expander.scss

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "sass:math";
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-tool-expander {
+  > .components-expansion-indicator {
+    $border: solid $expander-arrow-thickness currentColor;
+    $size: math.sqrt($expander-arrow-size-val * $expander-arrow-size-val * 8) *
+      0.5 + px;
+
+    width: $size;
+    height: $size;
+    border-top: $border;
+    border-left: $border;
+    margin-left: $expander-arrow-thickness;
+    margin-top: $expander-arrow-thickness;
+    margin-right: $space-after-expander;
+    box-sizing: border-box;
+    transform: rotate(135deg);
+  }
+
+  &:active:not(.components-disabled) {
+    > .components-expansion-indicator {
+      filter: $no-shadow;
+    }
+  }
+}

package/lib/esm/components-react/toolbar/groupPanel/tool/Tool.scss

@@ -0,0 +1,117 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/typography" as *;
+@use "../../../target" as *;
+@use "variables" as *;
+
+.components-toolbar-item-expandable-group-tool-item {
+  $item-height: 32px;
+  $item-border-width: 2px;
+  $active-tool-stripe-height: 22px;
+  $active-tool-stripe-width: 2px;
+  $icon-size: 16px;
+  $space-between-icon-and-label: 32px - 16px;
+
+  white-space: nowrap;
+  height: $item-height;
+  color: var(--iui-color-text);
+  cursor: pointer;
+  border-radius: var(--iui-border-radius-1);
+  display: flex;
+  align-items: center;
+
+  @include body1;
+
+  @mixin components-active-tool {
+    &:not(.components-disabled) {
+      background: var(--iui-color-background-hover);
+      color: var(--iui-color-text-accent-hover);
+    }
+  }
+
+  > .components-icon {
+    width: $icon-size;
+    height: $icon-size;
+    display: inline-block;
+    margin-right: $space-between-icon-and-label;
+    margin-left: 8px;
+    position: relative;
+
+    > .components-badge {
+      position: absolute;
+      top: -8px;
+      left: -8px;
+    }
+  }
+
+  > .components-label {
+    display: inline-block;
+    margin-right: $space-after-label;
+    line-height: $item-height;
+
+    &:after {
+      display: block;
+      content: attr(title);
+      font-weight: bold;
+      height: 1px;
+      color: transparent;
+      overflow: hidden;
+      visibility: hidden;
+    }
+  }
+
+  @include components-internal-targeted {
+    &:not(.components-disabled) {
+      color: var(--iui-color-text-hover);
+
+      @include body1;
+    }
+  }
+
+  &:active {
+    @include components-active-tool;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &.components-pointer-up {
+    @include components-internal-targeted {
+      @include components-active-tool;
+    }
+  }
+
+  &.components-focused:not(.components-disabled) {
+    color: var(--iui-color-text-accent);
+    border-color: var(--iui-color-border-accent);
+    border-width: $item-border-width;
+    border-style: solid;
+
+    @include body1;
+  }
+
+  &.components-active:not(.components-disabled) {
+    color: var(--iui-color-text-accent);
+
+    @include body1;
+
+    &::before {
+      content: "";
+      background-color: var(--iui-color-border-accent);
+      display: block;
+      position: relative;
+      top: 0;
+      left: $item-border-width + 1;
+      width: $active-tool-stripe-width;
+      height: $active-tool-stripe-height;
+      border-radius: 2px;
+    }
+  }
+
+  &.components-disabled {
+    color: var(--iui-color-text-disabled);
+  }
+}

package/lib/esm/components-react/toolbar/groupPanel/tool/_variables.scss

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+
+$no-shadow: none;
+$shadow: drop-shadow(
+  0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
+$space-after-label: 16px;
+
+$expander-arrow-thickness: 2px;
+$expander-arrow-size-val: 6;
+$space-after-expander: 10px;

package/lib/esm/components-react/tree/HighlightingEngine.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.components-activehighlight {
+  background-color: orange;
+}