@itwin/core-react 5.27.0 → 5.28.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log - @itwin/core-react
 
+## 5.28.0
+
+## 5.27.1
+
+### Patch Changes
+
+- 47cf43f: Fix usage of deprecated legacy SASS `if()` function.
+
 ## 5.27.0
 
 ## 5.26.0

package/lib/cjs/core-react/text/mixins.scss

@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+@use "sass:meta";
 @use "sass:map";
 
 @forward "../style/themecolors";
@@ -17,7 +18,9 @@
     small: var(--iui-font-size-0),
   );
 
-  $type: if(map.has-key($sizes, $type), $type, body);
+  $type: if(
+    sass(map.has-key($sizes, $type)): $type; else: body,
+  );
 
   font-size: map.get($sizes, $type);
   font-weight: var(--iui-font-weight-normal);

package/lib/core-react/text/mixins.scss

@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+@use "sass:meta";
 @use "sass:map";
 
 @forward "../style/themecolors";
@@ -17,7 +18,9 @@
     small: var(--iui-font-size-0),
   );
 
-  $type: if(map.has-key($sizes, $type), $type, body);
+  $type: if(
+    sass(map.has-key($sizes, $type)): $type; else: body,
+  );
 
   font-size: map.get($sizes, $type);
   font-weight: var(--iui-font-weight-normal);

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

@@ -2,6 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+@use "sass:meta";
 @use "sass:map";
 
 @forward "../style/themecolors";
@@ -17,7 +18,9 @@
     small: var(--iui-font-size-0),
   );
 
-  $type: if(map.has-key($sizes, $type), $type, body);
+  $type: if(
+    sass(map.has-key($sizes, $type)): $type; else: body,
+  );
 
   font-size: map.get($sizes, $type);
   font-weight: var(--iui-font-weight-normal);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/core-react",
-  "version": "5.27.0",
+  "version": "5.28.0",
   "description": "A react component library of iTwin.js UI general purpose components",
   "type": "module",
   "types": "./lib/core-react.d.ts",
@@ -44,61 +44,64 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@itwin/appui-abstract": "^5.1.0",
-    "@itwin/build-tools": "^5.7.0",
-    "@itwin/core-bentley": "^5.1.0",
-    "@itwin/core-common": "^5.1.0",
-    "@itwin/core-geometry": "^5.1.0",
-    "@itwin/core-i18n": "^5.1.0",
+    "@itwin/appui-abstract": "^5.8.1",
+    "@itwin/build-tools": "^5.8.1",
+    "@itwin/core-bentley": "^5.8.1",
+    "@itwin/core-common": "^5.8.1",
+    "@itwin/core-geometry": "^5.8.1",
+    "@itwin/core-i18n": "^5.8.1",
     "@itwin/eslint-plugin": "^6.0.0",
-    "@itwin/itwinui-react": "^3.20.1",
+    "@itwin/itwinui-react": "^3.20.2",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/lodash": "^4.17.23",
-    "@types/react": "^19.2.7",
+    "@types/lodash": "^4.17.24",
+    "@types/react": "^19.2.14",
     "@types/react-autosuggest": "10.1.2",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^3.0.6",
-    "cpx2": "^3.0.0",
-    "cross-env": "^5.1.4",
-    "eslint": "^9.39.2",
+    "@vitest/coverage-v8": "^3.2.4",
+    "cpx2": "^3.0.2",
+    "cross-env": "^5.2.1",
+    "eslint": "^9.39.4",
     "eslint-config-prettier": "^10.1.8",
     "ignore-styles": "^5.0.1",
-    "jsdom": "^24.0.0",
+    "jsdom": "^24.1.3",
     "npm-run-all": "^4.1.5",
-    "raf": "^3.4.0",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "rimraf": "^6.1.0",
+    "raf": "^3.4.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "rimraf": "^6.1.3",
     "typemoq": "^2.1.0",
-    "typescript": "~5.6.2",
+    "typescript": "~5.6.3",
     "upath": "^2.0.1",
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@itwin/itwinui-icons-react": "^2.8.0",
+    "@itwin/itwinui-icons-react": "^2.11.0",
     "classnames": "2.5.1",
-    "dompurify": "^3.3.2",
-    "lodash": "^4.17.23",
+    "dompurify": "^3.3.3",
+    "lodash": "^4.18.1",
     "react-autosuggest": "^10.1.0",
-    "ts-key-enum": "~2.0.12"
+    "ts-key-enum": "~2.0.13"
   },
   "scripts": {
-    "start": "run-p -l \"build -- -w\" \"copy:** -- -w\"",
-    "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",
+    "dev": "pnpm \"/^dev:.*/\"",
+    "dev:css": "pnpm build:css -w",
+    "dev:locale": "pnpm build:locale -w",
+    "dev:tsc": "tsc -w --preserveWatchOutput",
+    "build": "pnpm \"/^build:.*/\"",
+    "build:compat:cjs": "cpx \"./src/**/*.{*css,svg}\" ./lib/cjs",
+    "build:compat:esm": "cpx \"./src/**/*.{*css,svg}\" ./lib/esm",
+    "build:locale": "cpx ./src/core-react/UiCore.json ./lib/public/locales/en",
+    "build:css": "cpx \"./src/**/*.{*css,svg}\" ./lib",
+    "build:tsc": "tsc",
     "clean": "rimraf -g lib",
     "cover": "vitest run --coverage",
     "lint": "eslint \"./src/**/*.{ts,tsx}\"",
-    "lint:fix": "npm run -s lint -- --fix",
+    "lint:fix": "pnpm lint --fix",
     "extract-api": "betools extract-api --entry=./lib/core-react --apiReportFolder=../../common/api --apiReportTempFolder=../../common/temp/api --apiSummaryFolder=../../common/api/summary",
     "test": "vitest",
-    "docs": "npm run -s docs:reference && npm run -s docs:changelog",
+    "docs": "pnpm \"/^docs:.*/\"",
     "docs:changelog": "cpx ./CHANGELOG.md ../../generated-docs/reference/core-react",
     "docs:reference": "cross-env NODE_PROJECT_ROOT_DIRECTORY=../../ betools docs --includes=../../generated-docs/extract --json=../../generated-docs/reference/core-react/file.json --tsIndexFile=./core-react.ts --onlyJson"
   }

package/ContributeGuidelines.md

@@ -1,98 +0,0 @@
-# Guidelines for Contributing to iTwin.js UI Source Code
-
-Copyright © Bentley Systems, Incorporated. All rights reserved. See LICENSE.md for license terms and full copyright notice.
-
-## Description
-
-In order to maintain consistency in the iTwin.js UI source code, please abide by the following guidelines for classes and React components.
-
-## Guidelines
-
-- Include a copyright notice at the top of **all** TypeScript and CSS/Sass files. The copyright notice comment should be similar to the following:
-
-```typescript
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-```
-
-- Document **all** exported classes, interfaces, enums, types, etc.
-- Add release tags (`@public`, `@beta`, `@alpha` or `@internal`) to all exported classes, interfaces, enums, types, etc. For more information on release tags, see [Release Tags](https://www.itwinjs.org/learning/guidelines/release-tags-guidelines/).
-- In addition, it’s preferable that all \*Props interface members and component public methods be documented. You can put `@internal` on React lifecycle and render methods.
-- Add a,
-
-  ```ts
-  /** @packageDocumentation
-   * @module xyz
-   */
-  ```
-
-  comment to the top of the TypeScript file for the documentation module. An existing documentation module will often be appropriate to use. However, if you need to add a documentation module, see additional guidelines below. Example of `@module` comment:
-
-  ```ts
-  /** @packageDocumentation
-   * @module Button
-   */
-  ```
-
-- Use the theme colors (e.g. $buic-text-color, $buic-background-control, $buic-background-widget, etc.). These are located in `appui/ui/core-react/src/core-react/style/themecolors.scss`. Please do **not** use $uicore-text-color, $uicore-black, $uicore-white, $uicore-gray\*, etc.)
-- Include an appropriate prefix on CSS class names to prevent class name clashes (e.g. `uifw-` in appui-react, `core-` in core-react, `components-` in components-react)
-- Add an export for the component to the barrel file of the package (e.g. appui-react.ts, components-react.ts, core-react.ts). Example:
-
-```typescript
-export * from "./core-react/badge/Badge";
-```
-
-- Localize all strings to be seen by the user and use `useTranslation` hook to get the localized string. Please do **not** use hard-coded strings. The translatable strings should be in a JSON file in the `src/{package-name}/{Package}.json` of the repository. Example:
-
-```json
-{
-  . . .
-  "dialog": {
-    "ok": "OK",
-    . . .
-  }
-}
-```
-
-```typescript
-buttonText = useTranslation("dialog.ok");
-```
-
-- Run `npm run extract-api` to update the `*api.md` file for the package
-- Write unit tests for the new component or class. The tests should cover as many code statements, branches, functions and lines as possible (100% is the goal). To run the tests, run `npm run test` or `pnpm test`. To run coverage, run `npm run cover`. To see the coverage report, open the report from one of the following directories in your browser:
-  - appui/ui/appui-react/lib/test/coverage/lcov-report/index.html
-  - appui/ui/components-react/lib/test/coverage/lcov-report/index.html
-  - appui/ui/core-react/lib/test/coverage/lcov-report/index.html
-  - appui/ui/imodel-components-react/lib/test/coverage/lcov-report/index.html
-
-## New Documentation Module
-
-If the component’s documentation @module is new, please follow these guidelines:
-
-- Add a `@docs-group-description` comment to the barrel file of the package. Example:
-
-```js
-/**
- * @docs-group-description Button
- * Classes for working with various Buttons.
- */
-```
-
-Note: The following steps are in [itwinjs-core](https://github.com/itwin/itwinjs-core) repository, NOT in the appui repository:
-
-- Add the module to the itwinjs-core/docs/ui/reference/leftNav.md file in alphabetical order. Example:
-
-```md
-- [Button]($core:Button)
-```
-
-- Add the module to the appropriate `index.md` in the Learning section (e.g. itwinjs-core/docs/ui/learning/components/index.md or itwinjs-core/docs/ui/learning/core/index.md). Example:
-
-```md
-- [Button](./Button.md)
-```
-
-- Add a markdown file in the same folder as the `index.md` above (e.g. itwinjs-core/docs/ui/learning/components/Timeline.md)
-- Add learning content and an example usage to the new markdown file