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

package/lib/esm/appui-react/statusfields/toolassistance/touch-cursor-pan.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m11.86364 9h-.00139a9.06327 9.06327 0 0 0 -1.56688-3.6616c-.36107-.54315-1.59904-2.3384-2.29026-2.3384s-1.92918 1.79525-2.30053 2.34762a9.041 9.041 0 0 0 -1.56638 3.65238h-.00184l.00055.02238-.00045.00773h.00065a3.932 3.932 0 0 0 3.86289 3.96989 3.93249 3.93249 0 0 0 3.86314-3.97909h.00035l-.00025-.00406zm-3.86364 2.54167a2.50073 2.50073 0 1 1 2.44019-2.5 2.47063 2.47063 0 0 1 -2.44019 2.5z" fill-rule="evenodd"/><path d="m3.16931 8.6875h-1.10681v1.375l-2.0625-2.0625 2.0625-2.0625v1.375h1.46783a5.5664 5.5664 0 0 0 -.36102 1.375zm12.83069-.6875-2.0625-2.0625v1.375h-1.45776a5.476 5.476 0 0 1 .35333 1.375h1.10443v1.375z" opacity=".55"/></svg>

package/lib/esm/appui-react/statusfields/toolassistance/touch-cursor-point.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m12.25 11.6h-.00153c-.01447-1.33768-1.31731-3.41344-1.72356-4.02776-.39718-.59747-1.75891-2.57224-2.51929-2.57224s-2.1221 1.97477-2.53062 2.58238c-.40523.60273-1.70223 2.67945-1.723 4.01762h-.002l.0006.02462-.00049.0085h.00071a4.32523 4.32523 0 0 0 4.24918 4.36688 4.32575 4.32575 0 0 0 4.24945-4.377h.00039l-.00028-.00448zm-4.25 2.79583a2.75081 2.75081 0 1 1 2.68421-2.75 2.7177 2.7177 0 0 1 -2.68421 2.75z" fill-rule="evenodd"/><path d="m6.01337 5.23242a6.4677 6.4677 0 0 1 .71655-.7005 2 2 0 1 1 2.54669-.00537 6.37772 6.37772 0 0 1 .72077.697 3.00043 3.00043 0 1 0 -3.984.00885z" opacity=".55"/><circle cx="8" cy="3" r="1"/></svg>

package/lib/esm/appui-react/theme/ThemeManager.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-root {
+  height: 100%;
+  position: relative;
+}

package/lib/esm/appui-react/toolbar/new-toolbars/Badge.scss

@@ -0,0 +1,13 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-badge {
+  position: absolute;
+  left: -1px;
+  top: -1px;
+
+  svg {
+    fill: currentColor;
+  }
+}

package/lib/esm/appui-react/toolbar/new-toolbars/ExpandIndicator.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.
+ *--------------------------------------------------------------------------------------------*/
+@use "~@itwin/core-react/lib/core-react/geometry" as *;
+
+.uifw-toolbar-group-expandIndicator {
+  position: absolute;
+  bottom: 3px;
+  right: 3px;
+
+  @include triangle-bottom-right(
+    $width: 5px,
+    $height: 5px,
+    $color: currentColor
+  );
+}

package/lib/esm/appui-react/toolbar/new-toolbars/Surface.scss

@@ -0,0 +1,35 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-surface {
+  display: flex;
+  width: fit-content;
+  height: fit-content;
+  border-color: var(--iui-color-border-foreground);
+  transition: border-color var(--iui-duration-1) ease;
+  // TODO: needed due to opacity on toolbar container (since pointer events are disabled for center content).
+  pointer-events: all;
+  // TODO: fixes an issues on Safari where borders and backgrounds are overlapped by the viewport.
+  position: relative;
+
+  @supports (backdrop-filter: blur(5px)) {
+    background-color: hsl(
+      var(--iui-color-background-hsl) / var(--iui-opacity-2)
+    );
+    backdrop-filter: blur(5px);
+  }
+
+  &.uifw-vertical {
+    flex-direction: column;
+  }
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--iui-color-border-foreground-hover);
+  }
+
+  &:empty {
+    display: none;
+  }
+}

package/lib/esm/appui-react/toolbar/new-toolbars/ToolGroup.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.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-toolbar-group-toolGroup_container {
+  flex: 1 1 100%;
+  min-width: 0;
+
+  &.uifw-vertical {
+    height: 100%;
+  }
+
+  &.uifw-end {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

package/lib/esm/appui-react/uiprovider/DefaultDialogGridContainer.scss

@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-default-center-across-width {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-content: center;
+  grid-column: 1 / span 2;
+}
+
+.uifw-default-inline-editor-group {
+  display: flex;
+  gap: var(--iui-size-xs);
+
+  .uifw-default-label {
+    margin-right: var(--iui-size-xs);
+  }
+}
+
+.uifw-default-lock-and-label {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.uifw-default-property-lock {
+  margin-right: var(--iui-size-s);
+}
+
+.uifw-default-inline-label-and-editor {
+  display: flex;
+  align-items: center;
+}
+
+.uifw-default-label {
+  white-space: nowrap;
+}
+
+.uifw-dockedBar .uifw-default-label {
+  margin-right: var(--iui-size-xs);
+}
+
+.uifw-default-narrow-only-display {
+  display: none;
+}
+
+.uifw-default-container {
+  min-width: 200px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-row-gap: 0px;
+  row-gap: 0px;
+  grid-column-gap: 8px;
+  column-gap: 8px;
+  font-family: var(--iui-font-sans);
+  font-size: 14px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  align-items: center;
+  margin: var(--iui-size-2xs);
+}
+
+.uifw-default-container.uifw-tool-settings-grid-container {
+  row-gap: var(--iui-size-xs);
+}
+
+.uifw-default-container.uifw-default-narrow {
+  grid-template-columns: 1fr;
+  row-gap: var(--iui-size-2xs);
+
+  .uifw-default-label {
+    margin-left: var(--iui-size-2xs);
+  }
+
+  .uifw-default-lock-and-label {
+    justify-content: flex-start;
+  }
+
+  .uifw-default-inline-label-and-editor {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .uifw-default-narrow-only-display {
+    display: block;
+  }
+
+  .uifw-default-wide-only-display {
+    display: none;
+  }
+
+  .uifw-default-center-across-width {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-content: center;
+    grid-column: 1 / span 1;
+  }
+}

package/lib/esm/appui-react/widget-panels/DockedBar.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-dockedBar {
+  position: relative;
+  background-color: var(--iui-color-background);
+  height: var(--iui-component-height);
+
+  &[data-placement="top"] {
+    border-block-end: 1px solid var(--iui-color-border);
+  }
+
+  &[data-placement="bottom"] {
+    border-block-start: 1px solid var(--iui-color-border);
+  }
+}

package/lib/esm/appui-react/widget-panels/Frontstage.scss

@@ -0,0 +1,19 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-widgetPanels-frontstage {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  > .uifw-widgetPanels {
+    flex: 1 1 auto;
+    min-height: 0;
+
+    > .nz-widgetPanels-content {
+      position: relative;
+      pointer-events: none;
+    }
+  }
+}

package/lib/esm/appui-react/widget-panels/ToolSettings.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.uifw-toolSettings-label-empty {
+  padding-right: var(--iui-size-s);
+}
+
+.uifw-floating-toolSettings-container {
+  padding-top: var(--iui-size-2xs);
+}

package/lib/esm/appui-react/widget-panels/Toolbars.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.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-widgetPanels-toolbars {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  padding: var(
+    --iui-size-s
+  ); // TODO: Change this to an AppUI global CSS variable.
+  box-sizing: border-box;
+  grid-template-columns: 1fr 1fr;
+
+  .nz-tools-widget {
+    grid-column: 1;
+
+    &.nz-widget-navigationArea {
+      grid-column: 2;
+    }
+  }
+}

package/lib/esm/appui-react/widgets/BackstageAppButton.scss

@@ -0,0 +1,46 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+.uifw-widget-backstageAppButton {
+  block-size: 2.5rem;
+  aspect-ratio: 1;
+}
+
+.uifw-widget-backstageAppButton_icon {
+  font-size: 1.5rem;
+
+  svg {
+    block-size: 1.5rem;
+    inline-size: 1.5rem;
+  }
+}
+
+.uifw-widget-backstageAppButton_label {
+  pointer-events: none;
+}
+
+.uifw-widget-backstageAppButton_bars {
+  height: 100%;
+
+  position: absolute;
+  top: 0;
+  left: -1px;
+
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+
+  > .uifw-bar {
+    background-color: var(--iui-color-icon);
+    width: 4px;
+    height: 2px;
+    border-top-right-radius: var(--iui-border-radius-round);
+    border-bottom-right-radius: var(--iui-border-radius-round);
+    filter: drop-shadow(0 1px 0 var(--buic-foreground-body-reverse));
+  }
+
+  > .uifw-bar:not(:first-child) {
+    margin-top: 5px;
+  }
+}

package/lib/public/locales/en/UiFramework.json

@@ -21,6 +21,10 @@
   "general": {
     "sheet": "Sheet",
     "alert": "Alert",
+    "error": "Error",
+    "warning": "Warning",
+    "information": "Information",
+    "success": "Success",
     "settings": "Settings",
     "minimize": "Minimize",
     "overflow": "Overflow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.0.0-dev.2",
+  "version": "5.0.0-dev.3",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -35,24 +35,21 @@
   },
   "peerDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/components-react": "^5.0.0-dev.2",
+    "@itwin/components-react": "^5.0.0-dev.3",
     "@itwin/core-bentley": "^4.0.0",
     "@itwin/core-common": "^4.0.0",
     "@itwin/core-frontend": "^4.0.0",
     "@itwin/core-geometry": "^4.0.0",
     "@itwin/core-quantity": "^4.0.0",
-    "@itwin/core-react": "^5.0.0-dev.2",
+    "@itwin/core-react": "^5.0.0-dev.3",
     "@itwin/core-telemetry": "^4.0.0",
-    "@itwin/imodel-components-react": "^5.0.0-dev.2",
+    "@itwin/imodel-components-react": "^5.0.0-dev.3",
+    "@itwin/itwinui-react": "^3.15.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-redux": "^7.2.2",
     "redux": "^4.1.0"
   },
-  "//devDependencies": [
-    "NOTE: All peerDependencies should also be listed as devDependencies since peerDependencies are not considered by npm install",
-    "NOTE: All tools used by scripts in this package must be listed as devDependencies"
-  ],
   "devDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
     "@itwin/build-tools": "4.10.0-dev.31",
@@ -65,6 +62,7 @@
     "@itwin/core-telemetry": "^4.0.0",
     "@itwin/ecschema-metadata": "^4.0.0",
     "@itwin/eslint-plugin": "^4.1.1",
+    "@itwin/itwinui-react": "^3.15.0",
     "@itwin/webgl-compatibility": "^4.0.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
@@ -96,18 +94,12 @@
     "typescript": "~5.3.3",
     "upath": "^2.0.1",
     "vitest": "^1.6.0",
-    "@itwin/components-react": "5.0.0-dev.2",
-    "@itwin/core-react": "5.0.0-dev.2",
-    "@itwin/imodel-components-react": "5.0.0-dev.2"
+    "@itwin/components-react": "5.0.0-dev.3",
+    "@itwin/imodel-components-react": "5.0.0-dev.3",
+    "@itwin/core-react": "5.0.0-dev.3"
   },
-  "//dependencies": [
-    "NOTE: these dependencies should be only for things that DO NOT APPEAR IN THE API",
-    "NOTE: core-frontend should remain UI technology agnostic, so no react/angular dependencies are allowed"
-  ],
   "dependencies": {
     "@bentley/icons-generic": "^1.0.34",
-    "@itwin/itwinui-react": "^3.11.2",
-    "@itwin/itwinui-variables": "^3.0.0",
     "@itwin/itwinui-icons-react": "^2.8.0",
     "@itwin/itwinui-illustrations-react": "^2.0.1",
     "classnames": "2.5.1",
@@ -121,9 +113,12 @@
   },
   "scripts": {
     "start": "run-p -l \"build -- -w\" \"copy:** -- -w\"",
-    "build": "npm run copy:css && npm run copy:locale && tsc",
+    "build": "npm run copy:css && npm run compat:css && npm run copy:locale && tsc",
     "copy:css": "cpx \"./src/**/*.{*css,json,svg}\" ./lib",
     "copy:locale": "cpx ./src/appui-react/UiFramework.json ./lib/public/locales/en",
+    "compat:css": "npm run compat:cjs && npm run compat:esm",
+    "compat:cjs": "cpx \"./src/**/*.{*css,svg}\" ./lib/cjs",
+    "compat:esm": "cpx \"./src/**/*.{*css,svg}\" ./lib/esm",
     "clean": "rimraf lib .rush/temp/package-deps*.json",
     "cover": "vitest run --coverage",
     "lint": "eslint -f visualstudio \"./src/**/*.{ts,tsx}\" 1>&2",