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

package/lib/cjs/appui-react/layout/widget/FloatingTab.scss

@@ -0,0 +1,36 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+
+.nz-widget-floatingTab {
+  position: absolute;
+  padding: 0 1em;
+  display: flex;
+  align-items: center;
+  background: var(--iui-color-background-backdrop-hover);
+  user-select: none;
+  -webkit-user-select: none;
+  white-space: nowrap;
+  height: $nz-widget-tab-height;
+  border-radius: $nz-widget-tab-border-radius;
+  color: var(--iui-color-text-disabled);
+  pointer-events: none;
+  opacity: $nz-dragged-widget-opacity;
+  gap: 6px;
+
+  @include uicore-z-index(drag-preview);
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  > span {
+    max-width: 12em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: $nz-widget-tab-font-size;
+  }
+}

package/lib/cjs/appui-react/layout/widget/FloatingWidget.scss

@@ -0,0 +1,128 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 "../widgetopacity" as *;
+@use "variables" as *;
+
+@layer appui.component {
+  .nz-widget-floatingWidget {
+    position: absolute;
+    border: 1px solid var(--iui-color-background-disabled);
+    border-radius: var(--iui-border-radius-1);
+    min-width: 200px;
+    min-height: 120px;
+    transition: opacity var(--iui-duration-2) ease;
+
+    @include uicore-z-index(dragged-widget);
+    @include nz-widget-opacity;
+
+    &.nz-floating-toolSettings {
+      min-height: 60px;
+    }
+
+    &.nz-minimized {
+      flex-grow: 0;
+
+      > .nz-content {
+        width: 0;
+      }
+    }
+
+    &.nz-hidden {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &.nz-dragged {
+      pointer-events: none;
+      opacity: $nz-dragged-widget-opacity;
+
+      @include uicore-z-index(drag-preview);
+    }
+
+    &.nz-minimized {
+      min-height: 30px;
+
+      .nz-widget-floatingWidget_handle {
+        visibility: hidden;
+      }
+    }
+  }
+
+  .nz-widget-floatingWidget_handle {
+    $size: 0.5em;
+    $cornerSize: 1em;
+
+    position: absolute;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &.nz-left,
+    &.nz-right {
+      height: 100%;
+      width: $size;
+      cursor: ew-resize;
+    }
+
+    &.nz-top,
+    &.nz-bottom {
+      width: 100%;
+      height: $size;
+      cursor: ns-resize;
+    }
+
+    &.nz-left {
+      left: -$size * 0.5;
+      top: 0;
+    }
+
+    &.nz-right {
+      right: -$size * 0.5;
+      top: 0;
+    }
+
+    &.nz-top {
+      left: 0;
+      top: -$size * 0.5;
+    }
+
+    &.nz-bottom {
+      left: 0;
+      bottom: -$size * 0.5;
+    }
+
+    &.nz-topLeft,
+    &.nz-topRight,
+    &.nz-bottomLeft,
+    &.nz-bottomRight {
+      height: $cornerSize;
+      width: $cornerSize;
+    }
+
+    &.nz-topLeft {
+      left: -$cornerSize * 0.3333;
+      top: -$cornerSize * 0.3333;
+      cursor: nwse-resize;
+    }
+
+    &.nz-topRight {
+      right: -$cornerSize * 0.3333;
+      top: -$cornerSize * 0.3333;
+      cursor: nesw-resize;
+    }
+
+    &.nz-bottomLeft {
+      left: -$cornerSize * 0.3333;
+      bottom: -$cornerSize * 0.3333;
+      cursor: nesw-resize;
+    }
+
+    &.nz-bottomRight {
+      right: -$cornerSize * 0.3333;
+      bottom: -$cornerSize * 0.3333;
+      cursor: nwse-resize;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/Menu.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.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-menu {
+  background: var(--iui-color-background);
+}
+
+.nz-widget-menu_tabs {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}

package/lib/cjs/appui-react/layout/widget/MenuTab.scss

@@ -0,0 +1,59 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-widget-menuTab {
+  display: flex;
+  line-height: 2em;
+  height: 2em;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  padding-right: 3em;
+  padding-left: 0.5em;
+
+  &.nz-no-icon {
+    padding-left: 1.25em;
+  }
+
+  > .nz-icon {
+    width: 2em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  > .nz-badge {
+    position: absolute;
+    left: 0.25em;
+  }
+
+  > span {
+    max-width: 15em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  > .nz-checkmark {
+    position: absolute;
+    right: 0.75em;
+    border-style: solid;
+    border-color: var(--iui-color-border-accent);
+    border-width: 0 0.15em 0.15em 0;
+    width: 0.5em;
+    height: 1em;
+    transform: rotate(45deg);
+
+    &.nz-hidden {
+      display: none;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      color: var(--iui-color-text-accent);
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/NavigationArea.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 "./tools/button/variables" as *;
+@use "../widgetopacity" as *;
+
+.nz-widget-navigationArea {
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+  display: grid;
+  box-sizing: border-box;
+  height: 100%;
+  grid-gap: 6px;
+  grid-template-columns: 1fr minmax($mls-navigation-aid-width, auto);
+  grid-template-rows: minmax($mls-navigation-aid-width, auto) 1fr;
+  justify-items: end;
+  grid-template-areas: "htools button" ". vtools";
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  > .nz-navigation-aid-container {
+    margin-bottom: 6px;
+    pointer-events: auto;
+    grid-area: button;
+
+    @include nz-widget-opacity;
+  }
+
+  > .nz-vertical-toolbar-container {
+    grid-area: vtools;
+    height: calc(100% - 60px);
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-end;
+    @include nz-widget-opacity;
+  }
+
+  > .nz-horizontal-toolbar-container {
+    grid-area: htools;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    min-width: 0;
+
+    @include nz-widget-opacity;
+
+    > .components-toolbar-overflow-sizer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/Overflow.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.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-overflow {
+  width: 2em;
+  position: relative;
+
+  &.nz-hidden {
+    display: none;
+  }
+
+  > .nz-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+
+    > .nz-icon {
+      background: var(--iui-color-background-hover);
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:after {
+        content: "";
+        display: block;
+        border-color: var(--iui-color-text-disabled);
+        border-style: solid;
+        border-width: 0.15em 0.15em 0 0;
+        width: 0.5em;
+        height: 0.5em;
+        margin-left: -0.15em;
+        box-sizing: border-box;
+        transform: rotate(45deg);
+      }
+    }
+
+    &:hover {
+      > .nz-icon {
+        &:after {
+          border-color: var(--iui-color-text);
+        }
+      }
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/PanelWidget.scss

@@ -0,0 +1,62 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-widget-panelWidget {
+  $border-width: 1px;
+  border: 0px solid var(--iui-color-border);
+
+  &.nz-border-top {
+    border-top-width: $border-width;
+  }
+
+  &.nz-border-bottom {
+    border-bottom-width: $border-width;
+  }
+
+  &.nz-border-left {
+    border-left-width: $border-width;
+  }
+
+  &.nz-border-right {
+    border-right-width: $border-width;
+  }
+
+  &.nz-widget-widget,
+  &.nz-init,
+  &.nz-transition {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  &.nz-horizontal {
+    &.nz-transition {
+      transition: flex-basis 0.25s ease-out;
+    }
+  }
+
+  &:not(.nz-horizontal) {
+    &.nz-transition {
+      transition: flex-basis 0.25s ease-out;
+    }
+  }
+
+  &.nz-fit {
+    flex: 0 1 auto;
+  }
+
+  &.nz-fill {
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 0px;
+    min-height: 0;
+  }
+
+  &:not(.nz-minimized) {
+    > .nz-content {
+      min-height: 0;
+      min-width: 0;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/Tab.scss

@@ -0,0 +1,90 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 *;
+
+.nz-widget-tab {
+  user-select: none;
+  -webkit-user-select: none;
+  white-space: nowrap;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 1em 0;
+  position: relative;
+  border: 0 solid var(--iui-color-border);
+  max-width: 9em;
+  background: var(--iui-color-background-backdrop);
+
+  > .nz-icon {
+    svg {
+      width: #{math.div(14, 16)}rem;
+      height: #{math.div(14, 16)}rem;
+      fill: currentColor;
+    }
+  }
+
+  > .nz-label {
+    font-size: $nz-widget-tab-font-size;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  > .nz-badge {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  &:not(.nz-minimized) {
+    &.nz-active {
+      background: var(--iui-color-background);
+      color: var(--iui-color-text-accent);
+      padding-bottom: 1px;
+      margin-bottom: -1px;
+
+      &:before {
+        $padding: 0.25em;
+        content: "";
+        position: absolute;
+        background: currentColor;
+        left: $padding;
+        top: 1px;
+        border-radius: 0.2em;
+        width: calc(100% - #{2 * $padding});
+        height: 0.15em;
+      }
+
+      &.nz-last {
+        border-right-width: 1px;
+      }
+    }
+  }
+
+  &:not(.nz-active),
+  &.nz-minimized {
+    color: var(--iui-color-text-muted);
+    border-right-width: 1px;
+  }
+
+  &:not(.nz-minimized) {
+    &.nz-first-inactive {
+      border-left-width: 1px;
+    }
+  }
+
+  &.nz-first {
+    border-top-left-radius: $nz-widget-tab-border-radius;
+  }
+
+  &:hover {
+    background: var(--iui-color-background);
+
+    &:not(.nz-active) {
+      color: var(--iui-color-text);
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/TabBar.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "variables" as *;
+
+@layer appui.component {
+  .nz-widget-tabBar {
+    background: var(--iui-color-background-backdrop);
+    display: flex;
+    border-radius: $nz-widget-tab-border-radius $nz-widget-tab-border-radius 0 0;
+    flex: 0 0 auto;
+    position: relative;
+    height: $nz-widget-tab-height;
+
+    &.nz-separator {
+      border-bottom: 1px solid var(--iui-color-border);
+    }
+
+    > .nz-handle {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      cursor: auto;
+      user-select: none;
+      -webkit-user-select: none;
+    }
+  }
+}

package/lib/cjs/appui-react/layout/widget/Tabs.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.
+ *--------------------------------------------------------------------------------------------*/
+.nz-widget-tabs {
+  display: flex;
+  flex: 1;
+  max-width: 100%;
+  min-width: 0;
+}

package/lib/cjs/appui-react/layout/widget/ToolsArea.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 "../widgetopacity" as *;
+
+.nz-tools-widget {
+  transition: visibility var(--iui-duration-2) ease,
+    opacity var(--iui-duration-2) ease;
+  box-sizing: border-box;
+  height: 100%;
+  grid-column: 1;
+
+  display: grid;
+  grid-gap: 6px;
+  grid-template:
+    "appButton htools" auto
+    "vtools ." 1fr / auto 1fr;
+  align-items: start;
+  justify-items: start;
+
+  &.nz-hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  > .nz-app-button {
+    grid-area: appButton;
+
+    pointer-events: auto;
+    @include nz-widget-opacity;
+  }
+
+  > .nz-vertical-toolbar-container {
+    grid-area: vtools;
+
+    height: calc(100% - 60px);
+    display: inline-flex;
+    flex-direction: column;
+    @include nz-widget-opacity;
+  }
+
+  > .nz-horizontal-toolbar-container {
+    grid-area: htools;
+
+    width: 100%;
+    min-width: 0;
+
+    @include nz-widget-opacity;
+  }
+}

package/lib/cjs/appui-react/layout/widget/Widget.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.nz-widget-widget {
+  background: var(--iui-color-background);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}

package/lib/cjs/appui-react/layout/widget/_variables.scss

@@ -0,0 +1,50 @@
+/*---------------------------------------------------------------------------------------------
+ * 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";
+@forward "~@itwin/core-react/lib/core-react/style/themecolors";
+
+$nz-tab-height: 60px;
+$nz-tab-width: 32px;
+$nz-tab-strip-width: 2px;
+$nz-tab-strip-margin: 2px;
+$nz-tab-background-color: var(--iui-color-background-backdrop);
+$nz-tab-color: var(--iui-color-text);
+
+$nz-active-tab-width: 36px;
+
+$nz-collapsed-tab-width: 6px;
+
+$nz-hovered-tab-color: var(--iui-color-text-accent-hover);
+$nz-active-tab-color: var(--iui-color-icon-accent);
+$nz-tab-shadow: drop-shadow(
+  (-0.4px) 0.9px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
+$nz-active-tab-shadow: drop-shadow(
+  0 1px 0 hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))
+);
+$nz-tab-no-shadow: drop-shadow(0 0 0 transparent);
+
+$nz-resize-grip-size: 8px;
+$nz-resize-grip-size-large: 14px;
+
+$nz-widget-background-color: var(--iui-color-background-hover);
+$nz-widget-border-color: var(--iui-color-background-disabled);
+$nz-widget-border-width: 1px;
+$nz-widget-border-radius: var(--iui-border-radius-1);
+$nz-widget-min-size: $nz-tab-height + 10px;
+
+@mixin nz-internal-grip-offset($property) {
+  #{$property}: -$nz-resize-grip-size * 0.5;
+
+  @include for-tablet-landscape-down {
+    #{$property}: -$nz-resize-grip-size-large * 0.5;
+  }
+}
+
+$nz-widget-tab-font-size: 0.9em;
+$nz-widget-tab-height: 2.1em;
+$nz-widget-tab-border-radius: 2px;
+
+$nz-dragged-widget-opacity: 0.6;