@itwin/tree-widget-react 1.2.1 → 2.0.0-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/tree-widget-react",
-  "version": "1.2.1",
+  "version": "2.0.0-dev.0",
   "description": "Tree Widget React",
   "keywords": [
     "Bentley",
@@ -20,59 +20,92 @@
   "main": "lib/cjs/tree-widget-react.js",
   "module": "lib/esm/tree-widget-react.js",
   "typings": "lib/cjs/tree-widget-react",
+  "scripts": {
+    "start:test-viewer": "node ./scripts/start-test-viewer.js",
+    "start:test-viewer:watch": "node ./scripts/start-test-viewer.js --watch",
+    "build": "npm run -s dual-build && npm run -s copy:assets",
+    "dual-build": "npm run -s build:cjs && npm run -s build:esm",
+    "build:cjs": "tsc 1>&2 --outDir lib/cjs",
+    "build:esm": "tsc 1>&2 --module ES2020 --outDir lib/esm",
+    "copy:assets": "npm run -s copy:public && npm run -s copy:cjs && npm run -s copy:esm",
+    "copy:public": "cpx \"./public/**/*\" ./lib/public",
+    "copy:cjs": "cpx \"./src/**/*.{scss,json}\" ./lib/cjs",
+    "copy:esm": "cpx \"./src/**/*.{scss,json}\" ./lib/esm",
+    "cover": "nyc npm run test",
+    "extract-api": "betools extract-api --entry=tree-widget-react --apiReportFolder=./api --apiReportTempFolder=./api/temp --apiSummaryFolder=./api",
+    "lint": "npm run lint:eslint && npm run lint:stylelint",
+    "lint:eslint": "eslint -f visualstudio \"./src/**/*.{ts,tsx}\" 1>&2",
+    "lint:stylelint": "stylelint \"./src/**/*.scss\"",
+    "lint:fix": "npm run lint:eslint -- --fix && npm run lint:stylelint -- --fix",
+    "pseudolocalize": "betools pseudolocalize --englishDir ./public/locales/en --out ./lib/public/locales/en-PSEUDO",
+    "test": "mocha \"./lib/cjs/test/**/*.test.js\"",
+    "test:e2e": "node ../../../scripts/run-e2e-with-docker.js tree-widget",
+    "test:e2e:local": "node ../../../scripts/run-e2e-tests.js",
+    "test:e2e:debug": "cross-env PWDEBUG=1 playwright test --ui",
+    "clean": "rimraf lib",
+    "rebuild": "npm run clean && npm run build"
+  },
+  "peerDependencies": {
+    "@itwin/appui-abstract": "^4.0.0",
+    "@itwin/appui-react": "^4.6.0",
+    "@itwin/components-react": "^4.6.0",
+    "@itwin/core-frontend": "^4.0.0",
+    "@itwin/core-react": "^4.6.0",
+    "@itwin/presentation-components": "^5.0.0-dev.3",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
   "dependencies": {
     "@bentley/icons-generic": "^1.0.34",
-    "@itwin/itwinui-icons-react": "^2.1.0",
+    "@itwin/itwinui-icons-react": "^2.8.0",
     "@itwin/itwinui-illustrations-react": "^2.1.0",
-    "@itwin/itwinui-react": "^2.11.0",
+    "@itwin/itwinui-react": "^3.4.2",
     "classnames": "^2.3.1",
     "i18next": "^10.2.2",
     "react-error-boundary": "^4.0.10",
-    "rxjs": "^6.6.2"
+    "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/appui-layout-react": "^4.5.0",
-    "@itwin/appui-react": "^4.5.0",
-    "@itwin/build-tools": "^4.0.0",
-    "@itwin/components-react": "^4.5.0",
-    "@itwin/core-backend": "^4.0.0",
-    "@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-i18n": "^4.0.0",
-    "@itwin/core-markup": "^4.0.0",
-    "@itwin/core-orbitgt": "^4.0.0",
-    "@itwin/core-quantity": "^4.0.0",
-    "@itwin/core-react": "^4.5.0",
-    "@itwin/core-telemetry": "^4.0.0",
-    "@itwin/ecschema-metadata": "^4.0.0",
+    "@itwin/appui-abstract": "^4.4.0",
+    "@itwin/appui-react": "^4.9.0",
+    "@itwin/build-tools": "^4.4.0",
+    "@itwin/components-react": "^4.9.0",
+    "@itwin/core-backend": "^4.4.0",
+    "@itwin/core-bentley": "^4.4.0",
+    "@itwin/core-common": "^4.4.0",
+    "@itwin/core-frontend": "^4.4.0",
+    "@itwin/core-geometry": "^4.4.0",
+    "@itwin/core-i18n": "^4.4.0",
+    "@itwin/core-markup": "^4.4.0",
+    "@itwin/core-orbitgt": "^4.4.0",
+    "@itwin/core-quantity": "^4.4.0",
+    "@itwin/core-react": "^4.9.0",
+    "@itwin/core-telemetry": "^4.4.0",
+    "@itwin/ecschema-metadata": "^4.4.0",
     "@itwin/eslint-plugin": "^4.0.0-dev.38",
-    "@itwin/imodel-components-react": "^4.5.0",
-    "@itwin/presentation-backend": "^4.0.0",
-    "@itwin/presentation-common": "^4.0.0",
-    "@itwin/presentation-components": "^4.1.0",
-    "@itwin/presentation-frontend": "^4.0.0",
-    "@itwin/presentation-testing": "^4.0.0",
-    "@itwin/webgl-compatibility": "^4.0.0",
-    "@playwright/test": "^1.36.2",
-    "@rushstack/eslint-patch": "1.2.0",
-    "@testing-library/dom": "^8.12.0",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.2",
-    "@testing-library/user-event": "14.4.3",
+    "@itwin/imodel-components-react": "^4.9.0",
+    "@itwin/presentation-backend": "^4.4.0",
+    "@itwin/presentation-common": "^4.4.0",
+    "@itwin/presentation-components": "5.0.0-dev.3",
+    "@itwin/presentation-frontend": "^4.4.0",
+    "@itwin/presentation-testing": "5.0.0-dev.3",
+    "@itwin/webgl-compatibility": "^4.4.0",
+    "@playwright/test": "^1.41.2",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/chai": "4.3.5",
     "@types/chai-jest-snapshot": "^1.3.4",
     "@types/chai-subset": "1.3.3",
     "@types/deep-equal": "^1.0.1",
     "@types/i18next": "^8.4.2",
-    "@types/jsdom-global": "^3.0.4",
-    "@types/mocha": "^10.0.1",
-    "@types/react": "^17.0.19",
-    "@types/react-dom": "^17.0.9",
-    "@types/sinon": "^10.0.15",
-    "@types/sinon-chai": "^3.2.9",
+    "@types/jsdom": "^21.1.6",
+    "@types/mocha": "^10.0.6",
+    "@types/node": "^18.18.10",
+    "@types/react": "^18.0.34",
+    "@types/react-dom": "^18.0.11",
+    "@types/sinon": "^17.0.2",
+    "@types/sinon-chai": "^3.2.12",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "@typescript-eslint/parser": "^5.59.8",
     "chai": "^4.3.7",
@@ -81,69 +114,37 @@
     "cpx2": "^3.0.0",
     "cross-env": "^7.0.3",
     "deep-equal": "^1.0.0",
+    "dotenv": "^16.3.1",
     "eslint": "^8.41.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-unused-imports": "^2.0.0",
+    "global-jsdom": "^9.2.0",
     "ignore-styles": "^5.0.1",
-    "jsdom": "^22.1.0",
-    "jsdom-global": "3.0.2",
+    "jsdom": "^23.1.0",
     "mocha": "^10.2.0",
     "nyc": "15.1.0",
+    "postcss": "^8.4.32",
     "raf": "^3.4.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.2.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-redux": "^7.2.9",
     "redux": "^4.1.0",
     "rimraf": "^3.0.2",
-    "sinon": "^15.1.0",
+    "sinon": "^17.0.1",
     "sinon-chai": "^3.7.0",
     "source-map-support": "^0.5.6",
     "stylelint": "^15.11.0",
     "stylelint-config-standard-scss": "^11.1.0",
     "typemoq": "^2.1.0",
     "typescript": "~5.0.0",
-    "xmlhttprequest": "^1.8.0"
-  },
-  "peerDependencies": {
-    "@itwin/appui-abstract": "^4.0.0",
-    "@itwin/appui-react": "^4.3.0",
-    "@itwin/components-react": "^4.3.0",
-    "@itwin/core-frontend": "^4.0.0",
-    "@itwin/core-react": "^4.3.0",
-    "@itwin/presentation-components": "^4.0.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "xmlhttprequest": "^1.8.0",
+    "sanitize-filename": "^1.6.3"
   },
   "eslintConfig": {
     "extends": [
       ".eslintrc.js"
     ]
-  },
-  "scripts": {
-    "start:test-viewer": "node ./scripts/start-test-viewer.js",
-    "start:test-viewer:watch": "node ./scripts/start-test-viewer.js --watch",
-    "build": "npm run -s dual-build && npm run -s copy:assets",
-    "dual-build": "npm run -s build:cjs && npm run -s build:esm",
-    "build:cjs": "tsc 1>&2 --outDir lib/cjs",
-    "build:esm": "tsc 1>&2 --module ES2020 --outDir lib/esm",
-    "copy:assets": "npm run -s copy:public && npm run -s copy:cjs && npm run -s copy:esm",
-    "copy:public": "cpx \"./public/**/*\" ./lib/public",
-    "copy:cjs": "cpx \"./src/**/*.{scss,json}\" ./lib/cjs",
-    "copy:esm": "cpx \"./src/**/*.{scss,json}\" ./lib/esm",
-    "cover": "nyc npm run test",
-    "extract-api": "betools extract-api --entry=tree-widget-react",
-    "lint": "npm run lint:eslint && npm run lint:stylelint",
-    "lint:eslint": "eslint -f visualstudio \"./src/**/*.{ts,tsx}\" 1>&2",
-    "lint:stylelint": "stylelint \"./src/**/*.scss\"",
-    "lint:fix": "npm run lint:eslint -- --fix && npm run lint:stylelint -- --fix",
-    "pseudolocalize": "betools pseudolocalize --englishDir ./public/locales/en --out ./lib/public/locales/en-PSEUDO",
-    "test": "mocha \"./lib/cjs/test/**/*.test.js\"",
-    "test:e2e": "",
-    "//test:e2e": "node ../../../common/scripts/run-e2e-with-docker.js tree-widget",
-    "test:e2e:local": "node ../../../common/scripts/run-e2e-tests.js",
-    "test:e2e:debug": "cross-env PWDEBUG=1 playwright test --ui",
-    "clean": "rimraf lib .rush/temp/package-deps*.json",
-    "rebuild": "npm run clean && npm run build"
-  },
-  "readme": "# @itwin/tree-widget-react\n\nCopyright © Bentley Systems, Incorporated. All rights reserved.\n\nThe `@itwin/tree-widget-react` package provides React components to build a widget with tree components' selector, along with all the building blocks that can be used individually.\n\n![Widget example](./media/widget.png)\n\n## Usage\n\nTypically, the package is used with an [AppUI](https://github.com/iTwin/appui/tree/master/ui/appui-react) based application, but the building blocks may as well be used with any other iTwin.js React app.\n\nIn any case, **before** using any APIs or components delivered with the package, it needs to be initialized:\n\n```ts\nimport { IModelApp } from \"@itwin/core-frontend\";\nimport { TreeWidget } from \"@itwin/tree-widget-react\";\n...\nawait TreeWidget.initialize(IModelApp.localization);\n```\n\nIn [AppUI](https://github.com/iTwin/appui/tree/master/ui/appui-react) based applications widgets are typically provided using `UiItemsProvider` implementations. The `@itwin/tree-widget-react` package delivers `TreeWidgetUiItemsProvider` that can be used to add the tree widget to UI:\n\n```ts\nimport { UiItemsManager } from \"@itwin/appui-react\";\nimport { TreeWidgetUiItemsProvider } from \"@itwin/tree-widget-react\";\n...\nUiItemsManager.register(\n  new TreeWidgetUiItemsProvider()\n);\n```\n\nThe above example uses default widget parameters and results in a component similar to the one visible at the top of this README. Customization is also possible:\n\n```ts\nimport { UiItemsManager } from \"@itwin/appui-react\";\nimport { TreeWidgetUiItemsProvider, ModelsTreeComponent } from \"@itwin/tree-widget-react\";\n...\nUiItemsManager.register(\n  new TreeWidgetUiItemsProvider({\n    // defaults to `StagePanelLocation.Right`\n    defaultPanelLocation: StagePanelLocation.Left,\n    // defaults to `StagePanelSection.Start`\n    defaultPanelSection: StagePanelSection.End,\n    // defaults to whatever the default `Widget.priority` in AppUI is\n    defaultTreeWidgetPriority: 1000,\n    // defaults to `ModelsTreeComponent` and `CategoriesTreeComponent`\n    trees: [{\n        id: ModelsTreeComponent.id,\n        getLabel: ModelsTreeComponent.getLabel,\n        render: () => <ModelsTreeComponent />,\n    }, {\n        id: \"my-tree-id\",\n        getLabel: \"My Custom Tree\",\n        render: () => <>This is my custom tree.</>,\n    }];\n  })\n);\n```\n\nAs seen in the above code snippet, `TreeWidgetUiItemsProvider` takes a list of trees that are displayed in the widget. This package delivers a number of tree components for everyone's use (see below), but providing custom trees is also an option.\n\n## Components\n\nWhile we expect this package to be mostly used with [AppUI](https://github.com/iTwin/appui/tree/master/ui/appui-react) and widget created through `TreeWidgetUiItemsProvider`, the package delivers components used within the widget to meet other use cases:\n\n- `SelectableTree` renders a tree selector and selected tree (based on the `trees` prop).\n\n- Visibility tree components help you build trees that look and feel like [Models](#models-tree) and [Categories](#categories-tree) trees, letting you control display of elements in the hierarchy.\n\n  - `createVisibilityTreeRenderer` returns a tree renderer that renders nodes with \"eye\" checkboxes. Its building blocks:\n    - `createVisibilityTreeNodeRenderer`\n    - `VisibilityTreeNodeCheckbox`\n  - `useVisibilityTreeFiltering` is used to filter the hierarchy.\n  - `VisibilityTreeNoFilteredData` is used to render a \"no results\" when filtering.\n  - `VisibilityTreeEventHandler` is an extension of [UnifiedSelectionTreeEventHandler](https://www.itwinjs.org/reference/presentation-components/tree/unifiedselectiontreeeventhandler/), that additionally handles checkbox events and calls provided `IVisibilityHandler` to get/set display of the elements in the hierarchy.\n  - `useTreeTransientState` is used to persist tree scroll position when tree is used in [AppUI](https://github.com/iTwin/appui/tree/master/ui/appui-react) widget.\n\n### Models tree\n\nThe component renders a tree that tries to replicate how a typical \"Models\" tree of the iModel would look like in the source application. There's also a header that renders models search box and various visibility control buttons.\n\n![Models tree example](./media/models-tree.png)\n\nTypical usage:\n\n```tsx\nimport { ModelsTreeComponent, ClassGroupingOption } from \"@itwin/tree-widget-react\";\nimport { SelectionMode } from \"@itwin/components-react\";\n...\nfunction MyWidget() {\n  return (\n    <ModelsTreeComponent\n      headerButtons={[\n        (props) => <ModelsTreeComponent.ShowAllButton {...props} />,\n        (props) => <ModelsTreeComponent.HideAllButton {...props} />,\n        (props) => <MyCustomButton />,\n      ]}\n      selectionMode={SelectionMode.Extended}\n      hierarchyConfig={{\n        enableElementsClassGrouping: ClassGroupingOption.Yes,\n      }}\n    />\n  );\n}\n```\n\nAvailable header buttons:\n\n- `ModelsTreeComponent.ShowAllButton` makes everything in the iModel displayed.\n- `ModelsTreeComponent.HideAllButton` makes everything in the iModel hidden by turning off all models.\n- `ModelsTreeComponent.InvertButton` inverts display of all models.\n- `ModelsTreeComponent.View2DButton` toggles plan projection models' display.\n- `ModelsTreeComponent.View3DButton` toggles non-plan projection models' display.\n\n`ModelsTreeComponent` building blocks:\n\n- `ModelsTree` renders the tree without the header.\n- `ModelsVisibilityHandler` knows how to get and control display of various concepts displayed in the Models tree: Subjects, Models, Categories, Elements.\n\n### Categories tree\n\nThe component, based on the active view, renders a hierarchy of either spatial (3d) or drawing (2d) categories. The hierarchy consists of two levels - the category (spatial or drawing) and its sub-categories. There's also a header that renders categories search box and various visibility control buttons.\n\n![Categories tree example](./media/categories-tree.png)\n\nTypical usage:\n\n```tsx\nimport { CategoriesTreeComponent } from \"@itwin/tree-widget-react\";\n...\nfunction MyWidget() {\n  return (\n    <CategoriesTreeComponent\n      headerButtons={[\n        (props) => <CategoriesTreeComponent.ShowAllButton {...props} />,\n        (props) => <CategoriesTreeComponent.HideAllButton {...props} />,\n        (props) => <MyCustomButton />,\n      ]}\n    />\n  );\n}\n```\n\nAvailable header buttons:\n\n- `ModelsTreeComponent.ShowAllButton` makes all categories and their subcategories displayed.\n- `ModelsTreeComponent.HideAllButton` makes all categories hidden.\n- `ModelsTreeComponent.InvertButton` inverts display of all categories.\n\n`CategoriesTreeComponent` building blocks:\n\n- `CategoryTree` renders the tree without the header.\n- `CategoryVisibilityHandler` knows how to get and control display of Categories and SubCategories.\n\n### IModel content tree\n\nThe component renders a similar hierarchy to [Models tree](#models-tree), but with the following changes:\n\n- Only the hierarchy, without a header is rendered.\n- Visibility control is not allowed.\n- There's less hiding of `Subject` and `Model` nodes.\n- Show not only geometric, but all Models.\n\nIn general, the component is expected to be used by advanced users to inspect contents of the iModel.\n\n![IModel content tree example](./media/imodel-content-tree.png)\n\nTypical usage:\n\n```tsx\nimport { IModelContentTreeComponent } from \"@itwin/tree-widget-react\";\n...\nfunction MyWidget() {\n  return (\n    <IModelContentTreeComponent />\n  );\n}\n```\n"
-}
+  }
+}