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

package/lib/esm/core-react/text/muted.scss

@@ -0,0 +1,7 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+@mixin uicore-text-muted {
+  color: var(--iui-color-text-muted);
+}

package/lib/esm/core-react/tree/Branch.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.core-tree-branch {
+  display: block;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 0 0 20px;
+  width: fit-content;
+  min-width: 100%;
+}

package/lib/esm/core-react/tree/ExpansionToggle.scss

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+.core-tree-expansionToggle {
+  &:focus {
+    outline: none;
+  }
+
+  > .toggle {
+    display: block;
+    width: 24px;
+    height: 24px;
+    padding: 6px;
+    font-size: 12px;
+    box-sizing: border-box;
+    transform: rotate(0);
+    transition: transform 100ms ease;
+    color: var(--iui-color-text);
+
+    svg {
+      display: block;
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &.is-expanded > .toggle {
+    transform: rotate(90deg);
+  }
+}

package/lib/esm/core-react/tree/Node.scss

@@ -0,0 +1,68 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+
+$node-font-size: var(--iui-font-size-1);
+
+.core-tree-node {
+  /* Rules applied to the <be-tree-node> itself */
+  display: flex;
+  box-sizing: border-box;
+  width: fit-content;
+  min-width: 100%;
+  font-family: var(--iui-font-sans);
+  font-size: $node-font-size;
+  color: var(--iui-color-text);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: default;
+  padding: 1px 1px 0px 1px;
+
+  > .contents {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    gap: 5px;
+
+    > .core-progress-indicator {
+      margin: 0 4px;
+    }
+
+    > .expansion-toggle {
+      display: inline-block;
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+
+    > .core-image-checkbox {
+      top: -1px;
+    }
+  }
+
+  &-icon {
+    width: 16px;
+
+    > .bui-webfont-icon {
+      display: inline-block;
+      width: 16px;
+      text-align: center;
+      vertical-align: middle;
+    }
+  }
+
+  &.is-focused,
+  &:focus {
+    outline: 1px dotted #000;
+  }
+
+  &:not(.is-hover-disabled) {
+    &:hover {
+      background: var(--iui-color-background-hover);
+    }
+  }
+
+  &.is-selected {
+    background: var(--iui-color-background-accent-muted);
+  }
+}

package/lib/esm/core-react/tree/Placeholder.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.
+ *--------------------------------------------------------------------------------------------*/
+
+.core-tree-placeholder {
+  display: block;
+  box-sizing: border-box;
+  height: 24px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  > .contents {
+    margin-left: 24px; // offset for expander
+    height: 18px;
+    background-color: var(--iui-color-background-backdrop);
+  }
+}

package/lib/esm/core-react/tree/Tree.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-tree {
+  user-select: none;
+  -webkit-user-select: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  > * {
+    position: relative;
+    display: block;
+    padding: 0;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/core-react",
-  "version": "5.0.0-dev.2",
+  "version": "5.0.0-dev.3",
   "description": "A react component library of iTwin.js UI general purpose components",
   "type": "module",
   "types": "./lib/core-react.d.ts",
@@ -39,13 +39,10 @@
   "peerDependencies": {
     "@itwin/appui-abstract": "^4.0.0",
     "@itwin/core-bentley": "^4.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",
@@ -53,6 +50,7 @@
     "@itwin/core-common": "^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",
@@ -79,14 +77,8 @@
     "upath": "^2.0.1",
     "vitest": "^1.6.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-react": "^3.11.2",
-    "@itwin/itwinui-variables": "^3.0.0",
     "@itwin/itwinui-icons-react": "^2.8.0",
     "classnames": "2.5.1",
     "dompurify": "^2.5.6",
@@ -96,9 +88,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,svg}\" ./lib",
     "copy:locale": "cpx ./src/core-react/UiCore.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",