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

package/lib/esm/components-react/tree/controlled/component/ControlledTree.scss

@@ -0,0 +1,102 @@
+/*---------------------------------------------------------------------------------------------
+ * 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/scrollbar" as *;
+
+.components-controlledTree-loader {
+  position: relative;
+  display: block;
+  left: calc(50% - 24px);
+  top: calc(50% - 24px);
+  height: 48px;
+  width: 48px;
+}
+
+.components-controlledTree-errorMessage {
+  font-style: italic;
+  color: var(--iui-color-text-muted);
+  margin: 0 20%;
+  text-align: center;
+}
+
+.components-controlledTree {
+  color: var(--iui-color-text);
+  background-color: var(--iui-color-background);
+
+  /**
+   * Workaround for horizontal scroll issue.
+   * based on https://github.com/bvaughn/react-window/issues/681
+   */
+  .ReactVirtualized__Grid,
+  .ReactWindow__VariableSizeList {
+    overflow: scroll !important;
+    background-color: inherit;
+
+    @include uicore-scrollbar;
+
+    &:focus {
+      outline: none;
+    }
+
+    > div {
+      overflow: visible !important;
+      max-width: none !important;
+    }
+  }
+
+  .node-wrapper {
+    // The virtualized list wants to use absolute layout, but we
+    // need the inner container to grow in width based on the widest
+    // node. To workaround, we use relative layout with 0 heigh nodes.
+    position: relative !important;
+    height: 0 !important;
+    width: fit-content !important;
+    min-width: 100% !important;
+    overflow: visible !important;
+
+    &.is-selected {
+      // Prevent selected node's borders from being overdrawn by non-selected neighbors
+      z-index: 1;
+    }
+
+    .core-tree-node {
+      &.is-focused,
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  @mixin enable-border($edge) {
+    border-#{$edge}: 1px solid var(--iui-color-icon-accent);
+    padding-#{$edge}: 0;
+  }
+
+  .node-wrapper.is-selected {
+    .core-tree-node {
+      background: var(--iui-color-background-accent-muted);
+      @include enable-border("left");
+      @include enable-border("right");
+    }
+  }
+
+  .node-wrapper.is-selected:first-child,
+  .node-wrapper:not(.is-selected) + .node-wrapper.is-selected {
+    .core-tree-node {
+      @include enable-border("top");
+    }
+  }
+
+  .node-wrapper.is-selected + .node-wrapper:not(.is-selected) {
+    .core-tree-node {
+      @include enable-border("top");
+    }
+  }
+
+  .node-wrapper.is-selected:last-child {
+    .core-tree-node {
+      @include enable-border("bottom");
+    }
+  }
+}

package/lib/esm/components-react/tree/controlled/component/NodeContent.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.components-controlledTree-node-description {
+  color: var(--iui-color-text-muted);
+  font-size: var(--iui-font-size-0);
+  margin-top: 4px;
+
+  &.with-editor {
+    margin: 0;
+    padding-top: 1px;
+  }
+}
+
+.components-controlledTree-node-content {
+  height: 24px;
+  line-height: var(--iui-font-size-0);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  &.with-description {
+    height: 43px;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/components-react",
-  "version": "5.0.0-dev.2",
+  "version": "5.0.0",
   "description": "A react component library of iTwin.js UI data-oriented components",
   "type": "module",
   "types": "./lib/components-react.d.ts",
@@ -37,22 +37,19 @@
   "peerDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
     "@itwin/core-bentley": "^4.0.0",
-    "@itwin/core-react": "^5.0.0-dev.2",
+    "@itwin/core-react": "^5.0.0",
+    "@itwin/itwinui-react": "^3.15.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.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",
     "@itwin/core-bentley": "^4.0.0",
     "@itwin/core-common": "^4.0.0",
-    "@itwin/core-geometry": "^4.0.0",
     "@itwin/core-i18n": "^4.0.0",
     "@itwin/eslint-plugin": "^4.1.1",
+    "@itwin/itwinui-react": "^3.15.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -80,17 +77,10 @@
     "typescript": "~5.3.3",
     "upath": "^2.0.1",
     "vitest": "^1.6.0",
-    "@itwin/core-react": "5.0.0-dev.2"
+    "@itwin/core-react": "5.0.0"
   },
-  "//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-variables": "^3.0.0",
     "@itwin/itwinui-icons-react": "^2.8.0",
-    "@itwin/itwinui-react": "^3.11.2",
     "classnames": "2.5.1",
     "immer": "^10.1.1",
     "linkify-it": "~2.2.0",
@@ -101,9 +91,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\" ./lib",
     "copy:locale": "cpx ./src/components-react/UiComponents.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",