diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 51aa7c1f42..c2e5d8ee42 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -25,7 +25,7 @@ jobs: node-version: '20.x' cache: yarn - name: Cache dependencies - uses: actions/cache@v2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0 with: path: '**/node_modules' key: build-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }} @@ -45,7 +45,7 @@ jobs: node-version: '20.x' cache: yarn - name: Cache dependencies - uses: actions/cache@v2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0 with: path: '**/node_modules' key: lint-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }} @@ -65,7 +65,7 @@ jobs: node-version: '20.x' cache: yarn - name: Cache dependencies - uses: actions/cache@v2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0 with: path: '**/node_modules' key: lint-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }} @@ -85,7 +85,7 @@ jobs: node-version: '20.x' cache: yarn - name: Cache dependencies - uses: actions/cache@v2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0 with: path: '**/node_modules' key: spellcheck-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }} @@ -105,7 +105,7 @@ jobs: node-version: '20.x' cache: yarn - name: Cache dependencies - uses: actions/cache@v2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0 with: path: '**/node_modules' key: test-c4p-modules-${{ runner.os }}-${{ hashFiles('yarn.lock') }} @@ -130,7 +130,7 @@ jobs: node-version: '20.x' cache: yarn - name: Cache dependencies - uses: actions/cache@v2 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0 with: path: '**/node_modules' key: diff --git a/.github/workflows/update-example-gallery.yml b/.github/workflows/update-example-gallery.yml index d84bc622ea..33421f5823 100644 --- a/.github/workflows/update-example-gallery.yml +++ b/.github/workflows/update-example-gallery.yml @@ -20,7 +20,7 @@ jobs: cache: yarn - name: Cache dependencies - uses: actions/cache@v4 + uses: actions/cache@1bd1e32a3bdc45362d1e726936510720a7c30a57 #4.2.0 with: path: '**/node_modules' key: check-gallery-${{ runner.os }}-${{ hashFiles('yarn.lock') }} diff --git a/config/babel-preset-ibm-cloud-cognitive/CHANGELOG.md b/config/babel-preset-ibm-cloud-cognitive/CHANGELOG.md index 0900278590..08cd923f19 100644 --- a/config/babel-preset-ibm-cloud-cognitive/CHANGELOG.md +++ b/config/babel-preset-ibm-cloud-cognitive/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.16.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.14.40...babel-preset-ibm-cloud-cognitive@0.16.0-rc.0) (2025-01-13) + +**Note:** Version bump only for package babel-preset-ibm-cloud-cognitive + + + + + +## [0.15.1](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.15.1-rc.0...babel-preset-ibm-cloud-cognitive@0.15.1) (2025-01-10) + +**Note:** Version bump only for package babel-preset-ibm-cloud-cognitive + + + + + +## [0.15.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.14.40...babel-preset-ibm-cloud-cognitive@0.15.1-rc.0) (2025-01-09) + +**Note:** Version bump only for package babel-preset-ibm-cloud-cognitive + + + + + +# [0.15.0](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.15.0-rc.0...babel-preset-ibm-cloud-cognitive@0.15.0) (2025-01-08) + +**Note:** Version bump only for package babel-preset-ibm-cloud-cognitive + + + + + # [0.15.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/babel-preset-ibm-cloud-cognitive@0.14.40...babel-preset-ibm-cloud-cognitive@0.15.0-rc.0) (2024-12-24) **Note:** Version bump only for package babel-preset-ibm-cloud-cognitive diff --git a/config/babel-preset-ibm-cloud-cognitive/package.json b/config/babel-preset-ibm-cloud-cognitive/package.json index 2ac7e7bdbc..a754ad690e 100644 --- a/config/babel-preset-ibm-cloud-cognitive/package.json +++ b/config/babel-preset-ibm-cloud-cognitive/package.json @@ -1,7 +1,7 @@ { "name": "babel-preset-ibm-cloud-cognitive", "private": true, - "version": "0.15.0-rc.0", + "version": "0.16.0-rc.0", "license": "Apache-2.0", "main": "index.js", "repository": { diff --git a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md index 916ee6afd2..af8a6b450f 100644 --- a/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md +++ b/config/jest-config-ibm-cloud-cognitive/CHANGELOG.md @@ -3,6 +3,44 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.17.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.13.0-rc.0...jest-config-ibm-cloud-cognitive@1.17.0-rc.0) (2025-01-13) + + +### Bug Fixes + +* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56)) + + + + + +## [1.16.1](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.16.1-rc.0...jest-config-ibm-cloud-cognitive@1.16.1) (2025-01-10) + +**Note:** Version bump only for package jest-config-ibm-cloud-cognitive + + + + + +## [1.16.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.13.0-rc.0...jest-config-ibm-cloud-cognitive@1.16.1-rc.0) (2025-01-09) + + +### Bug Fixes + +* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56)) + + + + + +# [1.16.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.16.0-rc.0...jest-config-ibm-cloud-cognitive@1.16.0) (2025-01-08) + +**Note:** Version bump only for package jest-config-ibm-cloud-cognitive + + + + + # [1.16.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/jest-config-ibm-cloud-cognitive@1.13.0-rc.0...jest-config-ibm-cloud-cognitive@1.16.0-rc.0) (2024-12-24) diff --git a/config/jest-config-ibm-cloud-cognitive/index.js b/config/jest-config-ibm-cloud-cognitive/index.js index f85b56be75..0bd2e5f3b4 100644 --- a/config/jest-config-ibm-cloud-cognitive/index.js +++ b/config/jest-config-ibm-cloud-cognitive/index.js @@ -33,9 +33,9 @@ module.exports = { setupFiles: [require.resolve('./setup/setupFiles.js')], setupFilesAfterEnv: [require.resolve('./setup/setupFilesAfterEnv.js')], testMatch: [ - '<rootDir>/**/__tests__/**/*.js?(x)', - '<rootDir>/**/*.(spec|test).js?(x)', - '<rootDir>/**/*-(spec|test).js?(x)', + '<rootDir>/**/__tests__/**/*.(js|jsx|ts|tsx)?(x)', + '<rootDir>/**/*.(spec|test).(js|jsx|ts|tsx)?(x)', + '<rootDir>/**/*-(spec|test).(js|jsx|ts|tsx)?(x)', ], transform: { '^.+\\.(mjs|cjs|js|jsx|ts|tsx)$': require.resolve( diff --git a/config/jest-config-ibm-cloud-cognitive/package.json b/config/jest-config-ibm-cloud-cognitive/package.json index 12bc95c2b0..23706e605b 100644 --- a/config/jest-config-ibm-cloud-cognitive/package.json +++ b/config/jest-config-ibm-cloud-cognitive/package.json @@ -1,7 +1,7 @@ { "name": "jest-config-ibm-cloud-cognitive", "private": true, - "version": "1.16.0-rc.0", + "version": "1.17.0-rc.0", "license": "Apache-2.0", "main": "index.js", "repository": { @@ -39,7 +39,7 @@ "accessibility-checker": "^3.1.78", "axe-core": "^4.8.3", "babel-jest": "^29.7.0", - "babel-preset-ibm-cloud-cognitive": "^0.15.0-rc.0", + "babel-preset-ibm-cloud-cognitive": "^0.16.0-rc.0", "chalk": "^4.1.2", "identity-obj-proxy": "^3.0.0", "jest-circus": "^29.7.0", diff --git a/config/storybook-addon-carbon-theme/CHANGELOG.md b/config/storybook-addon-carbon-theme/CHANGELOG.md index 3186bf1cf4..ac4b97e07f 100644 --- a/config/storybook-addon-carbon-theme/CHANGELOG.md +++ b/config/storybook-addon-carbon-theme/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.7.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.3.0-rc.0...@carbon/storybook-addon-theme@2.7.0-rc.0) (2025-01-13) + +**Note:** Version bump only for package @carbon/storybook-addon-theme + + + + + +## [2.6.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.6.1-rc.0...@carbon/storybook-addon-theme@2.6.1) (2025-01-10) + +**Note:** Version bump only for package @carbon/storybook-addon-theme + + + + + +## [2.6.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.3.0-rc.0...@carbon/storybook-addon-theme@2.6.1-rc.0) (2025-01-09) + +**Note:** Version bump only for package @carbon/storybook-addon-theme + + + + + +# [2.6.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.6.0-rc.0...@carbon/storybook-addon-theme@2.6.0) (2025-01-08) + +**Note:** Version bump only for package @carbon/storybook-addon-theme + + + + + # [2.6.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/storybook-addon-theme@2.3.0-rc.0...@carbon/storybook-addon-theme@2.6.0-rc.0) (2024-12-24) **Note:** Version bump only for package @carbon/storybook-addon-theme diff --git a/config/storybook-addon-carbon-theme/package.json b/config/storybook-addon-carbon-theme/package.json index 806cca8080..f8dc393c66 100644 --- a/config/storybook-addon-carbon-theme/package.json +++ b/config/storybook-addon-carbon-theme/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/storybook-addon-theme", "description": "Carbon theme switcher for Storybook", - "version": "2.6.0-rc.0", + "version": "2.7.0-rc.0", "license": "Apache-2.0", "main": "dist/react.js", "repository": { diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 0b872e35c2..f44ec0029b 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,54 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.34.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.30.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.34.0-rc.0) (2025-01-13) + + +### Bug Fixes + +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) + + +### Features + +* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc)) + + + + + +## [2.33.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.33.1-rc.0...@carbon/ibm-cloud-cognitive-core@2.33.1) (2025-01-10) + +**Note:** Version bump only for package @carbon/ibm-cloud-cognitive-core + + + + + +## [2.33.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.30.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.33.1-rc.0) (2025-01-09) + + +### Bug Fixes + +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) + + +### Features + +* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc)) + + + + + +# [2.33.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.33.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.33.0) (2025-01-08) + +**Note:** Version bump only for package @carbon/ibm-cloud-cognitive-core + + + + + # [2.33.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-cloud-cognitive-core@2.30.0-rc.0...@carbon/ibm-cloud-cognitive-core@2.33.0-rc.0) (2024-12-24) diff --git a/packages/core/package.json b/packages/core/package.json index 5aa1e9aeb4..9b950e1ff8 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibm-cloud-cognitive-core", "private": true, - "version": "2.33.0-rc.0", + "version": "2.34.0-rc.0", "license": "Apache-2.0", "main": "scripts/build.js", "repository": { @@ -29,7 +29,7 @@ }, "devDependencies": { "@carbon/grid": "^11.29.0", - "@carbon/ibm-products-styles": "^2.53.0-rc.0", + "@carbon/ibm-products-styles": "^2.54.0-rc.0", "@carbon/layout": "^11.28.0", "@carbon/motion": "^11.24.0", "@carbon/react": "^1.72.0", diff --git a/packages/ibm-products-styles/CHANGELOG.md b/packages/ibm-products-styles/CHANGELOG.md index 352c76f176..3bf68405e5 100644 --- a/packages/ibm-products-styles/CHANGELOG.md +++ b/packages/ibm-products-styles/CHANGELOG.md @@ -3,6 +3,61 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.54.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.50.0-rc.0...@carbon/ibm-products-styles@2.54.0-rc.0) (2025-01-13) + + +### Bug Fixes + +* **APIKeyModal:** improve screen reader announcement ([#6481](https://github.com/carbon-design-system/ibm-products/issues/6481)) ([bea9003](https://github.com/carbon-design-system/ibm-products/commit/bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d)) +* **conditionbuilder:** property text to be bold ([#6658](https://github.com/carbon-design-system/ibm-products/issues/6658)) ([cfc7b39](https://github.com/carbon-design-system/ibm-products/commit/cfc7b3928b1e16847a7370413d2f52588beca03e)) +* pageheader subtitle truncation visibility ([#6551](https://github.com/carbon-design-system/ibm-products/issues/6551)) ([26394dd](https://github.com/carbon-design-system/ibm-products/commit/26394dd2b740f19306e8fbbbd6c2195fc5a3bbed)) +* **pageHeader:** menu button overflow issue on small screens ([#6502](https://github.com/carbon-design-system/ibm-products/issues/6502)) ([0072e42](https://github.com/carbon-design-system/ibm-products/commit/0072e424fc1f25fbf58be67f7d4d792643f26c30)) + + +### Features + +* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579)) +* **sidepanel:** implement decorator prop ([#6511](https://github.com/carbon-design-system/ibm-products/issues/6511)) ([336a5b0](https://github.com/carbon-design-system/ibm-products/commit/336a5b0ad06051bd52080e5d7cd610feb56604c8)) + + + + + +## [2.53.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.53.1-rc.0...@carbon/ibm-products-styles@2.53.1) (2025-01-10) + +**Note:** Version bump only for package @carbon/ibm-products-styles + + + + + +## [2.53.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.50.0-rc.0...@carbon/ibm-products-styles@2.53.1-rc.0) (2025-01-09) + + +### Bug Fixes + +* **APIKeyModal:** improve screen reader announcement ([#6481](https://github.com/carbon-design-system/ibm-products/issues/6481)) ([bea9003](https://github.com/carbon-design-system/ibm-products/commit/bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d)) +* pageheader subtitle truncation visibility ([#6551](https://github.com/carbon-design-system/ibm-products/issues/6551)) ([26394dd](https://github.com/carbon-design-system/ibm-products/commit/26394dd2b740f19306e8fbbbd6c2195fc5a3bbed)) +* **pageHeader:** menu button overflow issue on small screens ([#6502](https://github.com/carbon-design-system/ibm-products/issues/6502)) ([0072e42](https://github.com/carbon-design-system/ibm-products/commit/0072e424fc1f25fbf58be67f7d4d792643f26c30)) + + +### Features + +* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579)) +* **sidepanel:** implement decorator prop ([#6511](https://github.com/carbon-design-system/ibm-products/issues/6511)) ([336a5b0](https://github.com/carbon-design-system/ibm-products/commit/336a5b0ad06051bd52080e5d7cd610feb56604c8)) + + + + + +# [2.53.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.53.0-rc.0...@carbon/ibm-products-styles@2.53.0) (2025-01-08) + +**Note:** Version bump only for package @carbon/ibm-products-styles + + + + + # [2.53.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-styles@2.50.0-rc.0...@carbon/ibm-products-styles@2.53.0-rc.0) (2024-12-24) diff --git a/packages/ibm-products-styles/package.json b/packages/ibm-products-styles/package.json index 9f5ccb2b40..1448d5f6ba 100644 --- a/packages/ibm-products-styles/package.json +++ b/packages/ibm-products-styles/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibm-products-styles", "description": "Carbon for IBM Products styles", - "version": "2.53.0-rc.0", + "version": "2.54.0-rc.0", "license": "Apache-2.0", "installConfig": { "hoistingLimits": "none" @@ -52,7 +52,7 @@ "cross-env": "^7.0.3", "glob": "^10.3.10", "jest": "^29.7.0", - "jest-config-ibm-cloud-cognitive": "^1.16.0-rc.0", + "jest-config-ibm-cloud-cognitive": "^1.17.0-rc.0", "jest-environment-jsdom": "^29.7.0", "npm-check-updates": "^17.1.11", "npm-run-all": "^4.1.5", diff --git a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss index bd3b95b762..0d018a6872 100644 --- a/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss +++ b/packages/ibm-products-styles/src/components/ConditionBuilder/styles/_conditionBuilderItem.scss @@ -31,7 +31,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder; transition: all $duration-fast-02 motion(standard, productive); } -.#{$block-class}__condition-wrapper * { +.#{$block-class}__condition-wrapper { @include type-style('body-01'); } diff --git a/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss b/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss index 207d86585d..897310cc29 100644 --- a/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss +++ b/packages/ibm-products-styles/src/components/TagOverflow/_tag-overflow.scss @@ -26,13 +26,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--tag-overflow; $block-class-overflow: #{$block-class}-popover; $block-class-modal: #{$block-class}-modal; -.#{$block-class} { +.#{$block-class}__visible-tags { display: flex; - width: 100%; - min-width: $spacing-12; - align-items: center; - justify-content: flex-start; - white-space: nowrap; } .#{$block-class}--align-end { diff --git a/packages/ibm-products-web-components/.storybook/main.ts b/packages/ibm-products-web-components/.storybook/main.ts index 89486e35d0..af240786b1 100644 --- a/packages/ibm-products-web-components/.storybook/main.ts +++ b/packages/ibm-products-web-components/.storybook/main.ts @@ -1,6 +1,5 @@ import { mergeConfig } from 'vite'; import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader'; -import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon-loader'; const glob = require('fast-glob'); const stories = glob.sync( [ @@ -36,11 +35,7 @@ const config = { }, async viteFinal(config) { return mergeConfig(config, { - plugins: [ - litStyleLoader(), - litTemplateLoader(), - viteSVGResultCarbonIconLoader(), - ], + plugins: [litStyleLoader(), litTemplateLoader()], }); }, }; diff --git a/packages/ibm-products-web-components/CHANGELOG.md b/packages/ibm-products-web-components/CHANGELOG.md index 3635388b0b..d9f2108175 100644 --- a/packages/ibm-products-web-components/CHANGELOG.md +++ b/packages/ibm-products-web-components/CHANGELOG.md @@ -3,6 +3,51 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.7.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.3.0-rc.0...@carbon/ibm-products-web-components@0.7.0-rc.0) (2025-01-13) + + +### Bug Fixes + +* **Side Panel Web components:** storybook controls issue ([#6500](https://github.com/carbon-design-system/ibm-products/issues/6500)) ([19a7536](https://github.com/carbon-design-system/ibm-products/commit/19a75363d0683ed6765e0d713c3f68878eaeaef2)) +* **Tearsheet in Web Components:** cancel button not working as expected ([#6458](https://github.com/carbon-design-system/ibm-products/issues/6458)) ([2461f81](https://github.com/carbon-design-system/ibm-products/commit/2461f8120431c125ceb826ccb5d139a82d49f39c)) +* **Tearsheet web components:** control changes doesn't reflect in stories ([#6413](https://github.com/carbon-design-system/ibm-products/issues/6413)) ([84f6d14](https://github.com/carbon-design-system/ibm-products/commit/84f6d140d0476868a13b18ea886515d856bb0835)) +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) +* **web-components:** addresses issues in wc build script ([#6675](https://github.com/carbon-design-system/ibm-products/issues/6675)) ([90dc01c](https://github.com/carbon-design-system/ibm-products/commit/90dc01cf337a252c1f7698121820f0ca4cd40755)) + + + + + +## [0.6.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.6.1-rc.0...@carbon/ibm-products-web-components@0.6.1) (2025-01-10) + +**Note:** Version bump only for package @carbon/ibm-products-web-components + + + + + +## [0.6.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.3.0-rc.0...@carbon/ibm-products-web-components@0.6.1-rc.0) (2025-01-09) + + +### Bug Fixes + +* **Side Panel Web components:** storybook controls issue ([#6500](https://github.com/carbon-design-system/ibm-products/issues/6500)) ([19a7536](https://github.com/carbon-design-system/ibm-products/commit/19a75363d0683ed6765e0d713c3f68878eaeaef2)) +* **Tearsheet in Web Components:** cancel button not working as expected ([#6458](https://github.com/carbon-design-system/ibm-products/issues/6458)) ([2461f81](https://github.com/carbon-design-system/ibm-products/commit/2461f8120431c125ceb826ccb5d139a82d49f39c)) +* **Tearsheet web components:** control changes doesn't reflect in stories ([#6413](https://github.com/carbon-design-system/ibm-products/issues/6413)) ([84f6d14](https://github.com/carbon-design-system/ibm-products/commit/84f6d140d0476868a13b18ea886515d856bb0835)) +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) + + + + + +# [0.6.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.6.0-rc.0...@carbon/ibm-products-web-components@0.6.0) (2025-01-08) + +**Note:** Version bump only for package @carbon/ibm-products-web-components + + + + + # [0.6.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products-web-components@0.3.0-rc.0...@carbon/ibm-products-web-components@0.6.0-rc.0) (2024-12-24) diff --git a/packages/ibm-products-web-components/package.json b/packages/ibm-products-web-components/package.json index 5200fb8de7..992a206d42 100644 --- a/packages/ibm-products-web-components/package.json +++ b/packages/ibm-products-web-components/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibm-products-web-components", "description": "Carbon for IBM Products Web Components", - "version": "0.6.0-rc.0", + "version": "0.7.0-rc.0", "license": "Apache-2.0", "main": "es/index.js", "module": "es/index.js", @@ -12,21 +12,21 @@ "url": "https://github.com/carbon-design-system/ibm-products.git", "directory": "packages/ibm-products-web-components" }, + "files": [ + "custom-elements.json", + "es/**/*", + "lib/**/*", + "scss/**/*" + ], "publishConfig": { "access": "public", "provenance": true }, "exports": { - "./es/components/*": { - "node": "./lib/components/*", - "default": "./es/components/*" - }, - "./es/globals/*": { - "node": "./lib/globals/*", - "default": "./es/globals/*" - }, "./es/*": "./es/*", "./lib/*": "./lib/*", + "./dist/*": "./dist/*", + "./scss/*": "./scss/*", "./custom-elements.json": "./custom-elements.json", "./package.json": "./package.json" }, @@ -49,12 +49,14 @@ "wca": "web-component-analyzer analyze src --outFile custom-elements.json" }, "dependencies": { - "@carbon/ibm-products-styles": "^2.53.0-rc.0", + "@carbon/ibm-products-styles": "^2.54.0-rc.0", "@carbon/styles": "1.71.0", "@carbon/web-components": "2.19.0", - "lit": "^3.1.0" + "lit": "^3.1.0", + "tslib": "^2.6.3" }, "devDependencies": { + "@carbon/icon-helpers": "^10.54.0", "@carbon/icons": "^11.53.0", "@carbon/motion": "^11.24.0", "@mordech/vite-lit-loader": "^0.35.0", diff --git a/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts b/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts index fe7b498300..47bfb57880 100644 --- a/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts +++ b/packages/ibm-products-web-components/src/components/side-panel/side-panel.ts @@ -21,8 +21,8 @@ import { SIDE_PANEL_SIZE, SIDE_PANEL_PLACEMENT } from './defs'; import styles from './side-panel.scss?lit'; import { selectorTabbable } from '@carbon/web-components/es/globals/settings.js'; import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js'; -import ArrowLeft16 from '@carbon/icons/lib/arrow--left/16'; -import Close20 from '@carbon/icons/lib/close/20'; +import ArrowLeft16 from '@carbon/web-components/es/icons/arrow--left/16'; +import Close20 from '@carbon/web-components/es/icons/close/20'; import { moderate02 } from '@carbon/motion'; import Handle from '../../globals/internal/handle'; import '@carbon/web-components/es/components/button/index.js'; diff --git a/packages/ibm-products-web-components/tasks/build.js b/packages/ibm-products-web-components/tasks/build.js index 35a96de035..385ffa8c2a 100644 --- a/packages/ibm-products-web-components/tasks/build.js +++ b/packages/ibm-products-web-components/tasks/build.js @@ -12,8 +12,6 @@ import { globby } from 'globby'; import { rollup } from 'rollup'; import alias from '@rollup/plugin-alias'; import autoprefixer from 'autoprefixer'; -import carbonIcons from '../tools/rollup-plugin-icons.js'; -import carbonIconPaths from '../tools/rollup-plugin-icon-paths.js'; import commonjs from '@rollup/plugin-commonjs'; import copy from 'rollup-plugin-copy'; import cssnano from 'cssnano'; @@ -46,7 +44,8 @@ async function build() { ]); const iconInput = await globby([ - 'node_modules/@carbon/icons/lib/**/*.js', + '../node_modules/@carbon/icons/lib/**/*.js', + '../../node_modules/@carbon/icons/lib/**/*.js', '!**/index.js', ]); @@ -148,7 +147,6 @@ function getRollupConfig(input, rootDir, outDir, iconInput) { ).css; }, }), - carbonIcons(iconInput, banner), typescript({ noEmitOnError: true, compilerOptions: { @@ -156,7 +154,6 @@ function getRollupConfig(input, rootDir, outDir, iconInput) { outDir, }, }), - carbonIconPaths(), ], }; } diff --git a/packages/ibm-products-web-components/tools/rollup-plugin-icon-paths.js b/packages/ibm-products-web-components/tools/rollup-plugin-icon-paths.js deleted file mode 100644 index 7349229dd4..0000000000 --- a/packages/ibm-products-web-components/tools/rollup-plugin-icon-paths.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2020, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import path from 'path'; -import { fileURLToPath } from 'url'; - -/** - * @returns {object} The rollup plugin to transform `@carbon/icons/lib` imports to relative path in build. - */ -export default function rollupPluginIconPaths() { - return { - name: 'transform-icon-paths', - - generateBundle(options, bundle) { - function transformIconPaths(filePath, content) { - const __dirname = path.dirname(fileURLToPath(import.meta.url)); - const iconPathRegex = /@carbon\/icons\/lib/g; - const filenameES = filePath.replace(/[/\\]src[/\\]/, '/es/'); - const iconsDir = path.relative( - path.dirname(filenameES), - path.resolve(__dirname, '../icons') - ); - return content.replace(iconPathRegex, iconsDir); - } - - for (const [fileName, fileData] of Object.entries(bundle)) { - if (fileData.type === 'chunk') { - fileData.code = transformIconPaths(fileName, fileData.code); - } - } - }, - }; -} diff --git a/packages/ibm-products-web-components/tools/rollup-plugin-icons.js b/packages/ibm-products-web-components/tools/rollup-plugin-icons.js deleted file mode 100644 index 1b76dcab39..0000000000 --- a/packages/ibm-products-web-components/tools/rollup-plugin-icons.js +++ /dev/null @@ -1,73 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2024 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import path from 'path'; -import { createRequire } from 'node:module'; -import { fileURLToPath } from 'url'; -import icon from './svg-result-carbon-icon.js'; - -/** - * @param {Array} [inputs] icon files of the @carbon/icons/lib folder from node_modules - * @param {String} [banner] license banner to prepend to file - * @returns {object} The rollup plugin to generate lit svg template icon files. - */ -export default function rollupPluginIcons(inputs, banner) { - return { - name: 'carbon-icons', - - async buildEnd() { - const __dirname = path.dirname(fileURLToPath(import.meta.url)); - const require = createRequire(import.meta.url); - - for (const input of inputs) { - const iconPath = path.resolve(__dirname, `../${input}`); - - const svg = await import(iconPath); - - const iconsDir = path.dirname(require.resolve('@carbon/icons/lib')); - const iconsESPath = path.resolve( - 'es', - 'icons', - path.relative(iconsDir, iconPath) - ); - - const code = `${banner} -import { svg } from 'lit'; -import spread from '@carbon/web-components/es/globals/directives/spread.js'; - -const svgResultCarbonIcon = ${icon(svg.default)}; -export default svgResultCarbonIcon;`; - - this.emitFile({ - type: 'asset', - fileName: `icons/${path.relative(iconsDir, iconPath)}`, - source: code, - }); - - // emit icon type file - const typeCode = `${banner} -import { SVGTemplateResult } from 'lit-html'; -declare const svgResultCarbonIcon: ({ children, ...attrs }?: { children?: SVGTemplateResult; [attr: string]: any }) => SVGTemplateResult; -export default svgResultCarbonIcon;`; - - const typePath = path.format({ - ...path.parse(iconPath), - base: '', - ext: '.d.ts', - }); - - this.emitFile({ - type: 'asset', - fileName: `icons/${path.relative(iconsDir, typePath)}`, - source: typeCode, - }); - } - }, - }; -} diff --git a/packages/ibm-products-web-components/tools/svg-result-carbon-icon-loader.js b/packages/ibm-products-web-components/tools/svg-result-carbon-icon-loader.js deleted file mode 100644 index 34db97b433..0000000000 --- a/packages/ibm-products-web-components/tools/svg-result-carbon-icon-loader.js +++ /dev/null @@ -1,28 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -const path = require('path'); -const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon'); - -/** - * A Vite loader to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`. - * - * @returns {string} The massaged module content. - */ -function svgResultCarbonIconLoader() { - const descriptor = require(this.resourcePath); // eslint-disable-line global-require - return ` - import { svg } from 'lit'; - import spread from '@carbon/web-components/es/globals/directives/spread.js'; - const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(descriptor)}; - export default svgResultCarbonIcon; - `; -} - -module.exports = svgResultCarbonIconLoader; diff --git a/packages/ibm-products-web-components/tools/svg-result-carbon-icon.js b/packages/ibm-products-web-components/tools/svg-result-carbon-icon.js deleted file mode 100644 index 5c738e011e..0000000000 --- a/packages/ibm-products-web-components/tools/svg-result-carbon-icon.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2024 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import { getAttributes, formatAttributes } from '@carbon/icon-helpers'; - -// TODO: update @carbon/icon-helpers with this version of toString -const toString = (descriptor) => { - if (typeof descriptor === 'string') { - return descriptor; - } - const { elem = 'svg', attrs = {}, content = [] } = descriptor; - const children = content.map(toString).join(''); - if (elem !== 'svg') { - return `<${elem} ${formatAttributes(attrs)}>${children}</${elem}>`; - } - return `<${elem} ${formatAttributes( - getAttributes(attrs) - )}>${children}</${elem}>`; -}; - -/** - * Function that takes a valid @carbon/icons style icon descriptor and returns a lit-html svg instance - * - * @param {object} descriptor Object representation of an SVG icon as generated by @carbon/icons - */ -const icon = (descriptor) => { - descriptor.attrs = getAttributes( - Object.assign(descriptor.attrs, { - '...': '${spread(attrs)}', // eslint-disable-line no-template-curly-in-string - }) - ); - descriptor?.content?.unshift('${children}'); // eslint-disable-line no-template-curly-in-string - return `({ children, ...attrs } = {}) => svg\`${toString(descriptor)}\``; -}; - -export default icon; diff --git a/packages/ibm-products-web-components/tools/vite-svg-result-carbon-icon-loader.ts b/packages/ibm-products-web-components/tools/vite-svg-result-carbon-icon-loader.ts deleted file mode 100644 index b1e08ae759..0000000000 --- a/packages/ibm-products-web-components/tools/vite-svg-result-carbon-icon-loader.ts +++ /dev/null @@ -1,65 +0,0 @@ -/** - * @license - * - * Copyright IBM Corp. 2019, 2023 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -const path = require('path'); -const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon'); - -/** - * A Vite plugin to generate `lit-html`'s `SVGResult` from an icon descriptor from `@carbon/icons`. - * - * @returns {string} The massaged module content. - */ -export default function svgResultCarbonIconLoader() { - const svgRegex = /@carbon[\\/]icons[\\/]/i; - - const paths = new Map<string, string>(); - - return { - name: 'svg-result-carbon-icon-loader', - enforce: 'pre', - - resolveId(id: string): string | null { - if (id.match(svgRegex)) { - paths.set(id, id); - return id; - } else { - return null; - } - }, - - async load(id: string): Promise<string | undefined> { - let outcome: string | undefined; - if (!id.match(svgRegex)) { - return outcome; - } - return ``; - }, - - async transform(src: string, id: string) { - if (!paths.has(id)) { - return null; - } - - const outcome: string | undefined = src; - if (!id.match(svgRegex)) { - return outcome; - } - - const descriptor = require(id); - return ` - import { svg } from 'lit'; - import spread from '@carbon/web-components/es/globals/directives/spread.js'; - const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon.default( - descriptor - )}; - export default svgResultCarbonIcon; - `; - }, - }; -} diff --git a/packages/ibm-products-web-components/vite.config.ts b/packages/ibm-products-web-components/vite.config.ts index ba3b1ff6de..dbf7d912d0 100644 --- a/packages/ibm-products-web-components/vite.config.ts +++ b/packages/ibm-products-web-components/vite.config.ts @@ -8,14 +8,8 @@ import { defineConfig, configDefaults } from 'vitest/config'; import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader'; -// https://vitejs.dev/config/ export default defineConfig({ - plugins: [ - // @ts-ignore - litStyleLoader(), - // @ts-ignore - litTemplateLoader(), - ], + plugins: [litStyleLoader(), litTemplateLoader()], test: { environment: 'happy-dom', include: ['./src/**/*.{test,spec}.{js,ts}'], diff --git a/packages/ibm-products/CHANGELOG.md b/packages/ibm-products/CHANGELOG.md index 1927252bdc..21dcff0e91 100644 --- a/packages/ibm-products/CHANGELOG.md +++ b/packages/ibm-products/CHANGELOG.md @@ -3,6 +3,111 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.58.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.54.0-rc.0...@carbon/ibm-products@2.58.0-rc.0) (2025-01-13) + + +### Bug Fixes + +* **APIKeyModal:** implement focus return to generate button ([#6440](https://github.com/carbon-design-system/ibm-products/issues/6440)) ([535e871](https://github.com/carbon-design-system/ibm-products/commit/535e87142413695c530952f7b314201c8a35becc)) +* **APIKeyModal:** implement useFocus hook ([#6290](https://github.com/carbon-design-system/ibm-products/issues/6290)) ([4a92770](https://github.com/carbon-design-system/ibm-products/commit/4a92770d9179f6b59bfe18e53c998fdb51bd794a)) +* **APIKeyModal:** improve screen reader announcement ([#6481](https://github.com/carbon-design-system/ibm-products/issues/6481)) ([bea9003](https://github.com/carbon-design-system/ibm-products/commit/bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d)) +* **Condition builder:** correct and add more storybook data ([#6545](https://github.com/carbon-design-system/ibm-products/issues/6545)) ([8301cc1](https://github.com/carbon-design-system/ibm-products/commit/8301cc11def0e87cc9a1d8112066e06a00947a1a)) +* **Condition builder:** initial state getting reset on re-rendering ([#6555](https://github.com/carbon-design-system/ibm-products/issues/6555)) ([ea0989a](https://github.com/carbon-design-system/ibm-products/commit/ea0989ae23b6a23450491c4994bf4e46687dbeb2)) +* **conditionBuilder:** issue fix and data correction ([#6421](https://github.com/carbon-design-system/ibm-products/issues/6421)) ([1f5b63e](https://github.com/carbon-design-system/ibm-products/commit/1f5b63ec428ddd2a2b2ee7c4153c83c2fff6a61c)) +* **CreateTearsheet:** Dynamically disable/hide the experimentalSecondarySubmit button in CreateTearsheet ([#6412](https://github.com/carbon-design-system/ibm-products/issues/6412)) ([2eab4db](https://github.com/carbon-design-system/ibm-products/commit/2eab4db31164aed9f84c003466fce0bc74467ce3)) +* datagrid select all behavior in virtual scroll ([#6546](https://github.com/carbon-design-system/ibm-products/issues/6546)) ([b80d7f0](https://github.com/carbon-design-system/ibm-products/commit/b80d7f03a79a1802279e6142432a52fdb36a966a)) +* **Datagrid:** onRowClick results in toggleRow.toggleRowSelected is not a function error in console ([#6633](https://github.com/carbon-design-system/ibm-products/issues/6633)) ([82ce15c](https://github.com/carbon-design-system/ibm-products/commit/82ce15c9b96b5d80f6f566084f177e47a56054f7)) +* **Emptystate:** accessibility violation ([#6605](https://github.com/carbon-design-system/ibm-products/issues/6605)) ([cc8f1aa](https://github.com/carbon-design-system/ibm-products/commit/cc8f1aa66a80346104f28b173a4228a012fe0643)) +* **EmptyState:** empty states throws hydration errors in next js due to dynamic id ([#6508](https://github.com/carbon-design-system/ibm-products/issues/6508)) ([d5767e8](https://github.com/carbon-design-system/ibm-products/commit/d5767e8e9e5bc078d7324fbda71268a4d42d0bee)) +* **FullPageError:** accessibility violations ([#6503](https://github.com/carbon-design-system/ibm-products/issues/6503)) ([3f45528](https://github.com/carbon-design-system/ibm-products/commit/3f45528cd037c0232c2699c18d8bf63a5da8891b)) +* onclose callback triggered twice ([#6582](https://github.com/carbon-design-system/ibm-products/issues/6582)) ([8361907](https://github.com/carbon-design-system/ibm-products/commit/83619075773be394ffb9b46fe06dde16defba498)) +* pageheader subtitle truncation visibility ([#6551](https://github.com/carbon-design-system/ibm-products/issues/6551)) ([26394dd](https://github.com/carbon-design-system/ibm-products/commit/26394dd2b740f19306e8fbbbd6c2195fc5a3bbed)) +* remove tooltip from tagoverflow ([#6463](https://github.com/carbon-design-system/ibm-products/issues/6463)) ([c6f0ac0](https://github.com/carbon-design-system/ibm-products/commit/c6f0ac0f444165b55e37873c80462401fd34f14f)) +* reverts framer-motion to v6 ([#6679](https://github.com/carbon-design-system/ibm-products/issues/6679)) ([13fbc56](https://github.com/carbon-design-system/ibm-products/commit/13fbc567bcb4bd6a688da81b13a7c704628cef9b)) +* **side panel in react:** slideIn not working as expected ([#6501](https://github.com/carbon-design-system/ibm-products/issues/6501)) ([9d07dab](https://github.com/carbon-design-system/ibm-products/commit/9d07dab82cefd4046f65f8cac25d1d829f6d7c1a)) +* **SidePanel:** resolve storybook SlideOver animation flickering in doc page ([#6554](https://github.com/carbon-design-system/ibm-products/issues/6554)) ([03c31fc](https://github.com/carbon-design-system/ibm-products/commit/03c31fc3625afadc16d6eb2ca7d91c898bf18de6)) +* **tearsheet:** address portalTarget type ([#6400](https://github.com/carbon-design-system/ibm-products/issues/6400)) ([a11d036](https://github.com/carbon-design-system/ibm-products/commit/a11d0364a5beaa3d018db559656c3d7806e1b484)) +* **tearsheet:** resolve focusing elements multiple times while rendering ([#6513](https://github.com/carbon-design-system/ibm-products/issues/6513)) ([1c918d1](https://github.com/carbon-design-system/ibm-products/commit/1c918d1605f2a370988d7ade503c1e57e0d43df1)) +* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56)) +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) +* **useravatar:** accessibility issue and add avt complex state ([#6399](https://github.com/carbon-design-system/ibm-products/issues/6399)) ([4a70821](https://github.com/carbon-design-system/ibm-products/commit/4a70821b85688730a9d4484340da2517ee079db1)) + + +### Features + +* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc)) +* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579)) +* **coachmark:** Add default opening for not-stacked coachmarks ([#6516](https://github.com/carbon-design-system/ibm-products/issues/6516)) ([73ee693](https://github.com/carbon-design-system/ibm-products/commit/73ee693dda68bbbc0ccc6ed802b0efe8f528950e)) +* **CoachmarkOverlayElements:** Add next/back callbacks and currentStep properties ([#6548](https://github.com/carbon-design-system/ibm-products/issues/6548)) ([36bd4f9](https://github.com/carbon-design-system/ibm-products/commit/36bd4f96c4d5ab6f3fd5ef1a732e9efbf6ec5212)) +* **ConditionBuilder:** customize primary conditions using custom statement configuration ([#6663](https://github.com/carbon-design-system/ibm-products/issues/6663)) ([8eeab4c](https://github.com/carbon-design-system/ibm-products/commit/8eeab4c770f3a09585f187e8282f8c5d371d86f7)) +* Decouple lottie-web dependency from our repo ([#6477](https://github.com/carbon-design-system/ibm-products/issues/6477)) ([6b0a75b](https://github.com/carbon-design-system/ibm-products/commit/6b0a75ba4d15d7b2e640b4bb6992635ec3ab770c)) +* **productive card:** floating ui for overflow menu ([#6395](https://github.com/carbon-design-system/ibm-products/issues/6395)) ([42a1362](https://github.com/carbon-design-system/ibm-products/commit/42a1362ad2ff4998f8286ed0698a82c4ec8ea552)) +* **sidepanel:** implement decorator prop ([#6511](https://github.com/carbon-design-system/ibm-products/issues/6511)) ([336a5b0](https://github.com/carbon-design-system/ibm-products/commit/336a5b0ad06051bd52080e5d7cd610feb56604c8)) + + + + + +## [2.57.1](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.57.1-rc.0...@carbon/ibm-products@2.57.1) (2025-01-10) + +**Note:** Version bump only for package @carbon/ibm-products + + + + + +## [2.57.1-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.54.0-rc.0...@carbon/ibm-products@2.57.1-rc.0) (2025-01-09) + + +### Bug Fixes + +* **APIKeyModal:** implement focus return to generate button ([#6440](https://github.com/carbon-design-system/ibm-products/issues/6440)) ([535e871](https://github.com/carbon-design-system/ibm-products/commit/535e87142413695c530952f7b314201c8a35becc)) +* **APIKeyModal:** implement useFocus hook ([#6290](https://github.com/carbon-design-system/ibm-products/issues/6290)) ([4a92770](https://github.com/carbon-design-system/ibm-products/commit/4a92770d9179f6b59bfe18e53c998fdb51bd794a)) +* **APIKeyModal:** improve screen reader announcement ([#6481](https://github.com/carbon-design-system/ibm-products/issues/6481)) ([bea9003](https://github.com/carbon-design-system/ibm-products/commit/bea9003e1c1dcf2f1c19ecaccd6a4096bc313d8d)) +* **Condition builder:** correct and add more storybook data ([#6545](https://github.com/carbon-design-system/ibm-products/issues/6545)) ([8301cc1](https://github.com/carbon-design-system/ibm-products/commit/8301cc11def0e87cc9a1d8112066e06a00947a1a)) +* **Condition builder:** initial state getting reset on re-rendering ([#6555](https://github.com/carbon-design-system/ibm-products/issues/6555)) ([ea0989a](https://github.com/carbon-design-system/ibm-products/commit/ea0989ae23b6a23450491c4994bf4e46687dbeb2)) +* **conditionBuilder:** issue fix and data correction ([#6421](https://github.com/carbon-design-system/ibm-products/issues/6421)) ([1f5b63e](https://github.com/carbon-design-system/ibm-products/commit/1f5b63ec428ddd2a2b2ee7c4153c83c2fff6a61c)) +* **CreateTearsheet:** Dynamically disable/hide the experimentalSecondarySubmit button in CreateTearsheet ([#6412](https://github.com/carbon-design-system/ibm-products/issues/6412)) ([2eab4db](https://github.com/carbon-design-system/ibm-products/commit/2eab4db31164aed9f84c003466fce0bc74467ce3)) +* datagrid select all behavior in virtual scroll ([#6546](https://github.com/carbon-design-system/ibm-products/issues/6546)) ([b80d7f0](https://github.com/carbon-design-system/ibm-products/commit/b80d7f03a79a1802279e6142432a52fdb36a966a)) +* **Emptystate:** accessibility violation ([#6605](https://github.com/carbon-design-system/ibm-products/issues/6605)) ([cc8f1aa](https://github.com/carbon-design-system/ibm-products/commit/cc8f1aa66a80346104f28b173a4228a012fe0643)) +* **EmptyState:** empty states throws hydration errors in next js due to dynamic id ([#6508](https://github.com/carbon-design-system/ibm-products/issues/6508)) ([d5767e8](https://github.com/carbon-design-system/ibm-products/commit/d5767e8e9e5bc078d7324fbda71268a4d42d0bee)) +* **FullPageError:** accessibility violations ([#6503](https://github.com/carbon-design-system/ibm-products/issues/6503)) ([3f45528](https://github.com/carbon-design-system/ibm-products/commit/3f45528cd037c0232c2699c18d8bf63a5da8891b)) +* onclose callback triggered twice ([#6582](https://github.com/carbon-design-system/ibm-products/issues/6582)) ([8361907](https://github.com/carbon-design-system/ibm-products/commit/83619075773be394ffb9b46fe06dde16defba498)) +* pageheader subtitle truncation visibility ([#6551](https://github.com/carbon-design-system/ibm-products/issues/6551)) ([26394dd](https://github.com/carbon-design-system/ibm-products/commit/26394dd2b740f19306e8fbbbd6c2195fc5a3bbed)) +* remove tooltip from tagoverflow ([#6463](https://github.com/carbon-design-system/ibm-products/issues/6463)) ([c6f0ac0](https://github.com/carbon-design-system/ibm-products/commit/c6f0ac0f444165b55e37873c80462401fd34f14f)) +* reverts framer-motion to v6 ([#6679](https://github.com/carbon-design-system/ibm-products/issues/6679)) ([13fbc56](https://github.com/carbon-design-system/ibm-products/commit/13fbc567bcb4bd6a688da81b13a7c704628cef9b)) +* **side panel in react:** slideIn not working as expected ([#6501](https://github.com/carbon-design-system/ibm-products/issues/6501)) ([9d07dab](https://github.com/carbon-design-system/ibm-products/commit/9d07dab82cefd4046f65f8cac25d1d829f6d7c1a)) +* **SidePanel:** resolve storybook SlideOver animation flickering in doc page ([#6554](https://github.com/carbon-design-system/ibm-products/issues/6554)) ([03c31fc](https://github.com/carbon-design-system/ibm-products/commit/03c31fc3625afadc16d6eb2ca7d91c898bf18de6)) +* **tearsheet:** address portalTarget type ([#6400](https://github.com/carbon-design-system/ibm-products/issues/6400)) ([a11d036](https://github.com/carbon-design-system/ibm-products/commit/a11d0364a5beaa3d018db559656c3d7806e1b484)) +* **tearsheet:** resolve focusing elements multiple times while rendering ([#6513](https://github.com/carbon-design-system/ibm-products/issues/6513)) ([1c918d1](https://github.com/carbon-design-system/ibm-products/commit/1c918d1605f2a370988d7ade503c1e57e0d43df1)) +* update accessibility-checker version ([#6525](https://github.com/carbon-design-system/ibm-products/issues/6525)) ([d8c7051](https://github.com/carbon-design-system/ibm-products/commit/d8c70518087e7e41fdf1aa45cbbf692389058d56)) +* update to Carbon 11 compatible versions to latest ([#6437](https://github.com/carbon-design-system/ibm-products/issues/6437)) ([48d5c34](https://github.com/carbon-design-system/ibm-products/commit/48d5c34dca79a4b00fc69391a513431fa21295ee)) +* **useravatar:** accessibility issue and add avt complex state ([#6399](https://github.com/carbon-design-system/ibm-products/issues/6399)) ([4a70821](https://github.com/carbon-design-system/ibm-products/commit/4a70821b85688730a9d4484340da2517ee079db1)) + + +### Features + +* add utils section to storybook ([#6394](https://github.com/carbon-design-system/ibm-products/issues/6394)) ([711eb72](https://github.com/carbon-design-system/ibm-products/commit/711eb72ef00d1f1935fd0fcec9e0c0383dff53dc)) +* **BreadcrumbWithOverflow:** adopt overflowMenuV12 and floating ui ([#6411](https://github.com/carbon-design-system/ibm-products/issues/6411)) ([f716852](https://github.com/carbon-design-system/ibm-products/commit/f716852c979a0b9556e853fad7e7a7774b4c6579)) +* **coachmark:** Add default opening for not-stacked coachmarks ([#6516](https://github.com/carbon-design-system/ibm-products/issues/6516)) ([73ee693](https://github.com/carbon-design-system/ibm-products/commit/73ee693dda68bbbc0ccc6ed802b0efe8f528950e)) +* **CoachmarkOverlayElements:** Add next/back callbacks and currentStep properties ([#6548](https://github.com/carbon-design-system/ibm-products/issues/6548)) ([36bd4f9](https://github.com/carbon-design-system/ibm-products/commit/36bd4f96c4d5ab6f3fd5ef1a732e9efbf6ec5212)) +* **ConditionBuilder:** customize primary conditions using custom statement configuration ([#6663](https://github.com/carbon-design-system/ibm-products/issues/6663)) ([8eeab4c](https://github.com/carbon-design-system/ibm-products/commit/8eeab4c770f3a09585f187e8282f8c5d371d86f7)) +* Decouple lottie-web dependency from our repo ([#6477](https://github.com/carbon-design-system/ibm-products/issues/6477)) ([6b0a75b](https://github.com/carbon-design-system/ibm-products/commit/6b0a75ba4d15d7b2e640b4bb6992635ec3ab770c)) +* **productive card:** floating ui for overflow menu ([#6395](https://github.com/carbon-design-system/ibm-products/issues/6395)) ([42a1362](https://github.com/carbon-design-system/ibm-products/commit/42a1362ad2ff4998f8286ed0698a82c4ec8ea552)) +* **sidepanel:** implement decorator prop ([#6511](https://github.com/carbon-design-system/ibm-products/issues/6511)) ([336a5b0](https://github.com/carbon-design-system/ibm-products/commit/336a5b0ad06051bd52080e5d7cd610feb56604c8)) + + + + + +# [2.57.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.57.0-rc.0...@carbon/ibm-products@2.57.0) (2025-01-08) + +**Note:** Version bump only for package @carbon/ibm-products + + + + + # [2.57.0-rc.0](https://github.com/carbon-design-system/ibm-products/compare/@carbon/ibm-products@2.54.0-rc.0...@carbon/ibm-products@2.57.0-rc.0) (2024-12-24) diff --git a/packages/ibm-products/package.json b/packages/ibm-products/package.json index 996d27298b..b95d29e462 100644 --- a/packages/ibm-products/package.json +++ b/packages/ibm-products/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/ibm-products", "description": "Carbon for IBM Products", - "version": "2.57.0-rc.0", + "version": "2.58.0-rc.0", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -72,7 +72,7 @@ "@rollup/plugin-typescript": "^12.1.1", "@types/react-table": "^7.7.20", "babel-plugin-dev-expression": "^0.2.3", - "babel-preset-ibm-cloud-cognitive": "^0.15.0-rc.0", + "babel-preset-ibm-cloud-cognitive": "^0.16.0-rc.0", "chalk": "^4.1.2", "change-case": "4.1.2", "classnames": "^2.5.1", @@ -81,7 +81,7 @@ "fs-extra": "^11.2.0", "glob": "^10.3.10", "jest": "^29.7.0", - "jest-config-ibm-cloud-cognitive": "^1.16.0-rc.0", + "jest-config-ibm-cloud-cognitive": "^1.17.0-rc.0", "jest-environment-jsdom": "^29.7.0", "namor": "^1.1.2", "npm-check-updates": "^17.1.11", @@ -96,14 +96,14 @@ "dependencies": { "@babel/runtime": "^7.23.9", "@carbon/feature-flags": "^0.24.0", - "@carbon/ibm-products-styles": "^2.53.0-rc.0", + "@carbon/ibm-products-styles": "^2.54.0-rc.0", "@carbon/telemetry": "^0.1.0", "@dnd-kit/core": "^6.0.8", "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", "@ibm/telemetry-js": "^1.5.0", - "framer-motion": "^11.11.17", + "framer-motion": "^6.5.1 < 7", "immutability-helper": "^3.1.1", "lodash": "^4.17.21", "lottie-web": "^5.12.2", diff --git a/packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js b/packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js index d8aa1a717d..7aed7eee87 100644 --- a/packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js +++ b/packages/ibm-products/src/components/BigNumbers/BigNumbers.test.js @@ -9,7 +9,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro import { Button } from '@carbon/react'; import { Edit } from '@carbon/react/icons'; -import { pkg } from '../../settings'; +import { pkg, carbon } from '../../settings'; import uuidv4 from '../../global/js/utils/uuidv4'; import { BigNumbers } from '.'; import { BigNumbersSize } from './constants'; @@ -138,4 +138,17 @@ describe(componentName, () => { componentName ); }); + + it('should render a tooltip ', async () => { + renderBigNumbers({ + tooltipDescription: 'Tooltip description', + trending: true, + 'data-testid': dataTestId, + }); + const element = screen.getByTestId(dataTestId); + const tooltipElement = element + .querySelector(`.${blockClass}__label`) + .getElementsByClassName(`span.${carbon.prefix}--tooltip`); + expect(tooltipElement).toBeTruthy(); + }); }); diff --git a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts index 49f572490b..daddf1e47a 100644 --- a/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts +++ b/packages/ibm-products/src/components/ConditionBuilder/ConditionBuilder.types.ts @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ import { TextAreaProps, TextInputProps } from '@carbon/react'; -import { CarbonIconType } from '@carbon/react/icons'; +import { CarbonIconType } from '@carbon/icons-react'; import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput'; import { Dispatch, diff --git a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx index 2383da3fff..1d6423c1c6 100644 --- a/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx +++ b/packages/ibm-products/src/components/DataSpreadsheet/DataSpreadsheetBody.tsx @@ -789,7 +789,6 @@ export const DataSpreadsheetBody = forwardRef( [ prepareRow, renderRowHeader, - renderRowHeaderDirection, rows, hasCustomRowHeader, activeCellCoordinates?.row, @@ -797,8 +796,9 @@ export const DataSpreadsheetBody = forwardRef( handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, - defaultColumn, columns, + defaultColumn, + renderRowHeaderDirection, ] ); diff --git a/packages/ibm-products/src/components/Datagrid/useOnRowClick.ts b/packages/ibm-products/src/components/Datagrid/useOnRowClick.ts index 152bde3663..4a1b3c541f 100644 --- a/packages/ibm-products/src/components/Datagrid/useOnRowClick.ts +++ b/packages/ibm-products/src/components/Datagrid/useOnRowClick.ts @@ -36,7 +36,7 @@ const useOnRowClick = (hooks: Hooks) => { if (!withSelectRows) { instance.selectedFlatRows && instance.selectedFlatRows.map((toggleRow) => - toggleRow.toggleRowSelected(false) + toggleRow.toggleRowSelected?.(false) ); toggleRowSelected(id, true); } diff --git a/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx b/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx index d39f2a9288..decd22fffe 100644 --- a/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx +++ b/packages/ibm-products/src/components/FilterSummary/FilterSummary.tsx @@ -158,7 +158,7 @@ const FilterSummary = React.forwardRef( [`${blockClass}__expanded`]: multiline, })} > - <AnimatePresence mode="wait"> + <AnimatePresence exitBeforeEnter> {!multiline && renderTagSet('single')} {multiline && renderTagSet('multiline')} </AnimatePresence> diff --git a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx index fcf585087d..db0de19a27 100644 --- a/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx +++ b/packages/ibm-products/src/components/InterstitialScreen/InterstitialScreen.tsx @@ -25,6 +25,7 @@ import React, { isValidElement, useCallback, useEffect, + useMemo, useRef, useState, } from 'react'; @@ -288,6 +289,14 @@ export let InterstitialScreen = React.forwardRef< return () => window.removeEventListener('keydown', close); }, [handleClose]); + const stepSize = useMemo( + () => + children && Children.count(children) > 1 + ? parseFloat((1 / (Children.count(children) - 1)).toFixed(2)) + : 0, + [children] + ); + if (!isOpen) { return null; } @@ -394,6 +403,11 @@ export let InterstitialScreen = React.forwardRef< ); }; + const scrollToCurrentStep = (scrollPercent) => { + const currentStep = scrollPercent / stepSize; + setProgStep(Math.ceil(currentStep)); + }; + const renderBody = () => { { /* eslint-disable jsx-a11y/no-noninteractive-tabindex */ @@ -419,9 +433,7 @@ export let InterstitialScreen = React.forwardRef< <Carousel disableArrowScroll ref={scrollRef} - onScroll={(scrollPercent) => { - scrollPercent === 0 && setProgStep(0); - }} + onScroll={scrollToCurrentStep} > {children} </Carousel> @@ -461,9 +473,7 @@ export let InterstitialScreen = React.forwardRef< <Carousel disableArrowScroll ref={scrollRef} - onScroll={(scrollPercent) => { - scrollPercent === 0 && setProgStep(0); - }} + onScroll={scrollToCurrentStep} > {children} </Carousel> diff --git a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx index 8f53e32c28..d6083e6ee4 100644 --- a/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx +++ b/packages/ibm-products/src/components/NotificationsPanel/NotificationsPanel.tsx @@ -33,7 +33,11 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { pkg } from '../../settings'; import { prepareProps } from '../../global/js/utils/props-helper'; import { timeAgo } from './utils'; -import { useClickOutside, usePreviousValue } from '../../global/js/hooks'; +import { + useClickOutside, + useIsomorphicEffect, + usePreviousValue, +} from '../../global/js/hooks'; import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion'; import wrapFocus from '../../global/js/utils/wrapFocus'; @@ -646,6 +650,18 @@ export let NotificationsPanel = React.forwardRef( }, ]); + useIsomorphicEffect(() => { + // setTimeout ensures that this gets run + const timeout = setTimeout(() => { + if (notificationPanelRef.current && !reducedMotion) { + notificationPanelRef.current.style.animation = open + ? 'fade-in 250ms' + : 'fade-out forwards 250ms'; + } + }, 0); + return () => clearTimeout(timeout); + }, [open, reducedMotion]); + return shouldRender ? ( <> <button @@ -668,11 +684,6 @@ export let NotificationsPanel = React.forwardRef( } id={blockClass} className={cx(blockClass, className, `${blockClass}__container`)} - style={{ - animation: !reducedMotion - ? `${open ? 'fade-in 250ms' : 'fade-out forwards 250ms'}` - : undefined, - }} onAnimationEnd={onAnimationEnd} ref={ (ref as MutableRefObject<HTMLDivElement | null>) || diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.test.js b/packages/ibm-products/src/components/PageHeader/PageHeader.test.js index 7ee965e467..d1d43aaa58 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeader.test.js +++ b/packages/ibm-products/src/components/PageHeader/PageHeader.test.js @@ -1,3 +1,5 @@ +/* eslint react/forbid-component-props: 0 */ + /** * Copyright IBM Corp. 2020, 2023 * @@ -337,10 +339,11 @@ describe('PageHeader', () => { ).toHaveLength(1); // When withoutBackground is false this should result in the value 1 for opacity - const regStyle = new RegExp( - `--${prefix}--page-header--background-opacity: 1` - ); - expect(header.getAttribute('style')).toMatch(regStyle); + const backgroundOpacity = window + .getComputedStyle(header) + .getPropertyValue(`--${prefix}--page-header--background-opacity`); + + expect(backgroundOpacity).toBe('1'); }); const dataTestId = 'data-testid'; @@ -711,10 +714,10 @@ describe('PageHeader', () => { const header = screen.getByTestId(dataTestId); // When withoutBackground is true this should result in the value 0 for opacity - const regStyle = new RegExp( - `--${prefix}--page-header--background-opacity: 0` - ); - expect(header.getAttribute('style')).toMatch(regStyle); + const backgroundOpacity = window + .getComputedStyle(header) + .getPropertyValue(`--${prefix}--page-header--background-opacity`); + expect(backgroundOpacity).toBe('0'); }); it('Works, for now, with deprecated props', async () => @@ -731,10 +734,10 @@ describe('PageHeader', () => { const header = screen.getByTestId(dataTestId); // When hasBackgroundAlways is false this should result in the value 0 for opacity - const regStyle = new RegExp( - `--${prefix}--page-header--background-opacity: 0` - ); - expect(header.getAttribute('style')).toMatch(regStyle); + const backgroundOpacity = window + .getComputedStyle(header) + .getPropertyValue(`--${prefix}--page-header--background-opacity`); + expect(backgroundOpacity).toBe('0'); })); it('PageHeader grid settings narrow and fullWidth', async () => { diff --git a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx index 8d339ec5e2..db5fac8d40 100644 --- a/packages/ibm-products/src/components/PageHeader/PageHeader.tsx +++ b/packages/ibm-products/src/components/PageHeader/PageHeader.tsx @@ -39,7 +39,11 @@ import { deprecateProp, prepareProps, } from '../../global/js/utils/props-helper'; -import { useNearestScroll, useWindowResize } from '../../global/js/hooks'; +import { + useIsomorphicEffect, + useNearestScroll, + useWindowResize, +} from '../../global/js/hooks'; import { ActionBar } from '../ActionBar/'; import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow'; @@ -421,6 +425,10 @@ interface Metrics { navigationRowHeight?: number; } +interface HTMLElementStyled extends HTMLElement { + style: CSSStyleDeclaration; +} + export let PageHeader = React.forwardRef( ( { @@ -476,8 +484,9 @@ export let PageHeader = React.forwardRef( }); // refs - const localHeaderRef = useRef(null); - const headerRef = ref || localHeaderRef; + const localHeaderRef = useRef<HTMLDivElement | null>(null); + const headerRef = (ref || + localHeaderRef) as MutableRefObject<HTMLElementStyled>; const sizingContainerRef: MutableRefObject<HTMLDivElement | null> = useRef(null); const offsetTopMeasuringRef = useRef(null); @@ -903,6 +912,17 @@ export let PageHeader = React.forwardRef( const displayedBreadcrumbs = getBreadcrumbs(); + useIsomorphicEffect(() => { + Object.keys(pageHeaderStyles).forEach((key) => { + // check if style is a css var + if (key.startsWith('--')) { + headerRef.current.style.setProperty(key, pageHeaderStyles[key]); + } else { + headerRef.current.style[key] = pageHeaderStyles[key]; + } + }); + }, [headerRef, pageHeaderStyles]); + const subtitleRef = useRef<HTMLSpanElement>(null); const isOverflowing = checkHeightOverflow(subtitleRef.current); const subtitleContent = ( @@ -928,7 +948,6 @@ export let PageHeader = React.forwardRef( [`${blockClass}--has-navigation-tags-only`]: !navigation && tags, }, ])} - style={pageHeaderStyles} ref={headerRef} {...getDevtoolsProps(componentName)} > diff --git a/packages/ibm-products/src/components/ScrollGradient/ScrollGradient.js b/packages/ibm-products/src/components/ScrollGradient/ScrollGradient.js index 7d49554600..32cbad3432 100644 --- a/packages/ibm-products/src/components/ScrollGradient/ScrollGradient.js +++ b/packages/ibm-products/src/components/ScrollGradient/ScrollGradient.js @@ -20,6 +20,7 @@ import { getScrollState, useIsOverflow, } from './constants'; +import { useIsomorphicEffect } from '../../global/js/hooks'; const blockClass = `${pkg.prefix}--scroll-gradient`; const componentName = 'ScrollGradient'; @@ -48,12 +49,47 @@ export let ScrollGradient = React.forwardRef( }, ref ) => { + const scrollContainer = useRef(undefined); + const contentChildrenContainer = useRef(undefined); + const { xScrollable, yScrollable } = useIsOverflow(scrollContainer); + + const gradientRight = + yScrollable && scrollContainer.current && contentChildrenContainer.current + ? scrollContainer.current.offsetWidth - + contentChildrenContainer.current.offsetWidth + : 0; + const gradientBottom = + xScrollable && scrollContainer.current && contentChildrenContainer.current + ? scrollContainer.current.offsetHeight - + contentChildrenContainer.current.offsetHeight + : 0; + const [verticalPosition, setVerticalPosition] = useState(ScrollStates.NONE); const [horizontalPosition, setHorizontalPosition] = useState( ScrollStates.NONE ); - const scrollContainer = useRef(undefined); - const contentChildrenContainer = useRef(undefined); + + const startVerticalRef = useRef(null); + const startHorizontalRef = useRef(null); + const endVerticalRef = useRef(null); + const endHorizontalRef = useRef(null); + + useIsomorphicEffect(() => { + // start vertical styles + startVerticalRef.current.style.right = gradientRight; + startVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, transparent, ${color} 90%)`; + // start horizontal styles + startHorizontalRef.current.backgroundImage = `linear-gradient(-90deg, transparent, ${color} 90%)`; + startHorizontalRef.current.bottom = gradientBottom; + // end vertical styles + endVerticalRef.current.style.right = gradientRight; + endVerticalRef.current.style.bottom = gradientBottom; + endVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, ${color} 10%, transparent)`; + // end horizontal styles + endHorizontalRef.current.style.right = gradientRight; + endHorizontalRef.current.style.bottom = gradientBottom; + endHorizontalRef.current.style.backgroundImage = `linear-gradient(-90deg, ${color} 10%, transparent)`; + }, [color, gradientRight, gradientBottom]); const updateScrollState = throttle(() => { const updatedVerticalVal = getScrollState( @@ -85,19 +121,6 @@ export let ScrollGradient = React.forwardRef( scrollHandler(); }, [scrollHandler]); - const { xScrollable, yScrollable } = useIsOverflow(scrollContainer); - - const gradientRight = - yScrollable && scrollContainer.current && contentChildrenContainer.current - ? scrollContainer.current.offsetWidth - - contentChildrenContainer.current.offsetWidth - : 0; - const gradientBottom = - xScrollable && scrollContainer.current && contentChildrenContainer.current - ? scrollContainer.current.offsetHeight - - contentChildrenContainer.current.offsetHeight - : 0; - return ( <div {...rest} @@ -134,42 +157,28 @@ export let ScrollGradient = React.forwardRef( {!hideStartGradient && ( <> <div + ref={startVerticalRef} className={`${blockClass}__start-vertical`} - style={{ - right: gradientRight, - backgroundImage: `linear-gradient(0deg, transparent, ${color} 90%)`, - }} role="presentation" aria-hidden /> <div + ref={startHorizontalRef} className={`${blockClass}__start-horizontal`} - style={{ - backgroundImage: `linear-gradient(-90deg, transparent, ${color} 90%)`, - bottom: gradientBottom, - }} role="presentation" aria-hidden /> </> )} <div + ref={endVerticalRef} className={`${blockClass}__end-vertical`} - style={{ - right: gradientRight, - bottom: gradientBottom, - backgroundImage: `linear-gradient(0deg, ${color} 10%, transparent)`, - }} role="presentation" aria-hidden /> <div + ref={endHorizontalRef} className={`${blockClass}__end-horizontal`} - style={{ - right: gradientRight, - bottom: gradientBottom, - backgroundImage: `linear-gradient(-90deg, ${color} 10%, transparent)`, - }} role="presentation" aria-hidden /> diff --git a/packages/ibm-products/src/components/StringFormatter/StringFormatter.js b/packages/ibm-products/src/components/StringFormatter/StringFormatter.js index a656b3f05c..141f8605cd 100644 --- a/packages/ibm-products/src/components/StringFormatter/StringFormatter.js +++ b/packages/ibm-products/src/components/StringFormatter/StringFormatter.js @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. */ -import React from 'react'; +import React, { useRef } from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; @@ -20,6 +20,7 @@ import { propMappingFunction, } from './utils/enums'; import { allPropTypes } from '../../global/js/utils/props-helper'; +import { useIsomorphicEffect } from '../../global/js/hooks'; const blockClass = `${pkg.prefix}--string-formatter`; const componentName = 'StringFormatter'; @@ -48,15 +49,19 @@ export let StringFormatter = React.forwardRef( }, ref ) => { + const contentRef = useRef(null); + + useIsomorphicEffect(() => { + contentRef.current.style.maxWidth = width; + contentRef.current.style.WebkitLineClamp = lines; + }, [lines, width]); + const stringFormatterContent = ( <span + ref={contentRef} className={cx(`${blockClass}--content`, { [`${blockClass}--truncate`]: truncate, })} - style={{ - maxWidth: width, - WebkitLineClamp: lines, - }} > {value} </span> diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.stories.jsx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.stories.jsx index e7fd34845e..e10ac46038 100644 --- a/packages/ibm-products/src/components/TagOverflow/TagOverflow.stories.jsx +++ b/packages/ibm-products/src/components/TagOverflow/TagOverflow.stories.jsx @@ -75,6 +75,7 @@ export const TagsWithOverflowCount = Template.bind({}); TagsWithOverflowCount.args = { containerWidth: 250, items: fiveTags, + onOverflowTagChange: (items) => console.log(items), }; export const TagsWithTruncation = Template.bind({}); diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.test.js b/packages/ibm-products/src/components/TagOverflow/TagOverflow.test.js index 263e41f434..85727438fa 100644 --- a/packages/ibm-products/src/components/TagOverflow/TagOverflow.test.js +++ b/packages/ibm-products/src/components/TagOverflow/TagOverflow.test.js @@ -6,7 +6,7 @@ */ import React from 'react'; -import { fireEvent, render, screen } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; // https://testing-library.com/docs/react-testing-library/intro import { pkg } from '../../settings'; import uuidv4 from '../../global/js/utils/uuidv4'; @@ -104,12 +104,9 @@ describe(componentName, () => { it('Obeys max visible', async () => { render(<TagOverflow {...tagOverflowProps} maxVisible={3} />); - - expect( - screen.getAllByText(/Tag [0-9]+/, { - selector: `.${blockClass}__item--tag span`, - }).length - ).toEqual(3); + await waitFor(() => { + expect(screen.getByText('+2')); + }); }); // The below test case is failing due to ResizeObserver mock diff --git a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx index ee592090a9..582b0833a2 100644 --- a/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx +++ b/packages/ibm-products/src/components/TagOverflow/TagOverflow.tsx @@ -7,12 +7,10 @@ import React, { ReactNode, - Ref, RefObject, createElement, forwardRef, useCallback, - useEffect, useRef, useState, } from 'react'; @@ -26,7 +24,7 @@ import cx from 'classnames'; import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { isRequiredIf } from '../../global/js/utils/props-helper'; import { pkg } from '../../settings'; -import { useResizeObserver } from '../../global/js/hooks/useResizeObserver'; +import { useOverflowItems } from '../../global/js/hooks/useOverflowItems'; export interface TagOverflowItem { className?: string; /** @@ -61,10 +59,19 @@ export interface TagOverflowProps { allTagsModalTitle?: string; autoAlign?: boolean; className?: string; - containingElementRef?: RefObject<HTMLElement>; + /** + * @deprecated The `containingElementRef` prop is no longer going to be used in favor of the forwarded ref. + */ + containingElementRef?: RefObject<HTMLDivElement>; items: TagOverflowItem[]; maxVisible?: number; + /** + * @deprecated The `measurementOffset` prop is no longer going to be used. This value will now be calculated automatically. + */ measurementOffset?: number; + /** + * @deprecated The `multiline` prop is no longer going to be used. This component should only be used when you need to hide overflowing items. + */ multiline?: boolean; overflowAlign?: | 'top' @@ -90,8 +97,8 @@ const blockClass = `${pkg.prefix}--tag-overflow`; const componentName = 'TagOverflow'; const allTagsModalSearchThreshold = 10; -export let TagOverflow = forwardRef( - (props: TagOverflowProps, ref: Ref<HTMLDivElement>) => { +export let TagOverflow = forwardRef<HTMLDivElement, TagOverflowProps>( + (props, ref) => { const { align = 'start', allTagsModalAriaLabel, @@ -101,11 +108,8 @@ export let TagOverflow = forwardRef( allTagsModalTitle, autoAlign, className, - containingElementRef, items, maxVisible, - measurementOffset = 0, - multiline, overflowAlign = 'bottom', overflowClassName, overflowType = 'default', @@ -114,26 +118,22 @@ export let TagOverflow = forwardRef( tagComponent, ...rest } = props; - - const localContainerRef = useRef<HTMLDivElement>(null); - const containerRef = ref || localContainerRef; - const itemRefs = useRef<Map<string, string> | null>(null); - const overflowRef = useRef<HTMLDivElement>(null); - // itemOffset is the value of margin applied on each items - // This value is required for calculating how many items will fit within the container - const itemOffset = 4; - const overflowIndicatorWidth = 40; - - const [containerWidth, setContainerWidth] = useState<number>(0); - const [visibleItems, setVisibleItems] = useState<TagOverflowItem[]>([]); - const [overflowItems, setOverflowItems] = useState<TagOverflowItem[]>([]); + const containerRef = useRef<HTMLDivElement>(null); + const offsetRef = useRef<HTMLDivElement>(null); const [showAllModalOpen, setShowAllModalOpen] = useState<boolean>(false); const [popoverOpen, setPopoverOpen] = useState<boolean>(false); - const resizeElm = - containingElementRef && containingElementRef.current - ? containingElementRef - : containerRef; + const { + visibleItems, + hiddenItems: overflowItems, + itemRefHandler, + } = useOverflowItems( + items, + containerRef, + offsetRef, + maxVisible, + onOverflowTagChange + ); const handleShowAllClick = () => { setShowAllModalOpen(true); @@ -143,110 +143,17 @@ export let TagOverflow = forwardRef( setShowAllModalOpen(false); }; - const handleResize = () => { - if (typeof resizeElm !== 'function' && resizeElm.current) { - setContainerWidth(resizeElm.current.offsetWidth); - } - }; - - useResizeObserver(resizeElm, handleResize); - - const getMap = () => { - if (!itemRefs.current) { - itemRefs.current = new Map(); - } - return itemRefs.current; - }; - - const itemRefHandler = (id, node) => { - const map = getMap(); - if (id && node && map.get(id) !== node.offsetWidth) { - map.set(id, node.offsetWidth); - } - }; - - const getVisibleItems = useCallback(() => { - if (!itemRefs.current) { - return items; - } - - if (multiline) { - const visibleItems = maxVisible ? items?.slice(0, maxVisible) : items; - return visibleItems; - } - - const map = getMap(); - const optionalContainingElement = containingElementRef?.current; - const measurementOffsetValue = - typeof measurementOffset === 'number' ? measurementOffset : 0; - const spaceAvailable = optionalContainingElement - ? optionalContainingElement.offsetWidth - measurementOffsetValue - : containerWidth; - - const overflowContainerWidth = - overflowRef && - overflowRef.current && - overflowRef.current.offsetWidth > overflowIndicatorWidth - ? overflowRef.current.offsetWidth - : overflowIndicatorWidth; - const maxWidth = spaceAvailable - overflowContainerWidth; - - let childrenWidth = 0; - let maxReached = false; - - return items.reduce((prev: TagOverflowItem[], cur: TagOverflowItem) => { - if (!maxReached) { - const itemWidth = (map ? Number(map.get(cur.id)) : 0) + itemOffset; - const fits = itemWidth + childrenWidth < maxWidth; - - if (fits) { - childrenWidth += itemWidth; - prev.push(cur); - } else { - maxReached = true; - } - } - return prev; - }, []); - }, [ - containerWidth, - containingElementRef, - items, - maxVisible, - measurementOffset, - multiline, - ]); - const getCustomComponent = ( item: TagOverflowItem, tagComponent: string ) => { - const { className, id, ...other } = item; + const { className, ...other } = item; return createElement(tagComponent, { ...other, - key: id, className: cx(`${blockClass}__item`, className), - ref: (node) => itemRefHandler(id, node), }); }; - useEffect(() => { - let visibleItemsArr = getVisibleItems(); - - if (maxVisible && maxVisible < visibleItemsArr.length) { - visibleItemsArr = visibleItemsArr?.slice(0, maxVisible); - } - - const hiddenItems = items?.slice(visibleItemsArr.length); - const overflowItemsArr = hiddenItems?.map(({ tagType, ...other }) => { - return { type: tagType, ...other }; - }); - - setVisibleItems(visibleItemsArr); - setOverflowItems(overflowItemsArr); - onOverflowTagChange?.(overflowItemsArr); - }, [getVisibleItems, items, maxVisible, onOverflowTagChange]); - const handleTagOnClose = useCallback( (onClose, index) => { onClose?.(); @@ -259,51 +166,52 @@ export let TagOverflow = forwardRef( return ( <div - { - // Pass through any other property values as HTML attributes. - ...rest - } - className={cx(blockClass, className, `${blockClass}--align-${align}`, { - [`${blockClass}--multiline`]: multiline, - })} - ref={containerRef} + {...rest} + className={cx(blockClass, className)} {...getDevtoolsProps(componentName)} + ref={ref} > - {visibleItems?.length > 0 && - visibleItems.map((item, index) => { - // Render custom components - if (tagComponent) { - return getCustomComponent(item, tagComponent); - } else { - const { id, label, tagType, onClose, filter, ...other } = item; - // If there is no template prop, then render items as Tags - return ( - <div ref={(node) => itemRefHandler(id, node)} key={id}> - {typeof onClose === 'function' || filter ? ( - <DismissibleTag - {...other} - className={`${blockClass}__item--tag`} - type={tagType} - onClose={() => handleTagOnClose(onClose, index)} - text={label} - /> - ) : ( - <Tag - {...other} - className={`${blockClass}__item--tag`} - type={tagType} - > - {label} - </Tag> - )} - </div> - ); - } + <div + className={cx( + `${blockClass}__visible-tags`, + `${blockClass}--align-${align}` + )} + ref={containerRef} + > + {visibleItems.map((item, index) => { + const { id, label, tagType, onClose, filter, ...other } = item; + return ( + <div + className={`${blockClass}__tag-container`} + ref={(node) => { + itemRefHandler(id, node); + }} + key={id} + > + {tagComponent ? ( + getCustomComponent(item, tagComponent) + ) : typeof onClose === 'function' || filter ? ( + <DismissibleTag + {...other} + className={`${blockClass}__item--tag`} + type={tagType} + onClose={() => handleTagOnClose(onClose, index)} + text={label} + /> + ) : ( + <Tag + {...other} + className={`${blockClass}__item--tag`} + type={tagType} + > + {label} + </Tag> + )} + </div> + ); })} - - <span className={`${blockClass}__indicator`} ref={overflowRef}> - {overflowItems?.length > 0 && ( - <> + {overflowItems.length > 0 && ( + <div className={`${blockClass}__indicator`} ref={offsetRef}> <TagOverflowPopover allTagsModalSearchThreshold={allTagsModalSearchThreshold} className={overflowClassName} @@ -313,7 +221,7 @@ export let TagOverflow = forwardRef( overflowType={overflowType} showAllTagsLabel={showAllTagsLabel} key="tag-overflow-popover" - ref={overflowRef} + ref={offsetRef} popoverOpen={popoverOpen} setPopoverOpen={setPopoverOpen} autoAlign={autoAlign} @@ -329,9 +237,9 @@ export let TagOverflow = forwardRef( searchPlaceholder={allTagsModalSearchPlaceholderText} portalTarget={allTagsModalTarget} /> - </> + </div> )} - </span> + </div> </div> ); } diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js b/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js index 4f9feba2cf..710b842c74 100644 --- a/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js +++ b/packages/ibm-products/src/components/Tearsheet/Tearsheet.test.js @@ -11,7 +11,6 @@ import userEvent from '@testing-library/user-event'; import { expectWarn, expectMultipleError, - required, } from '../../global/js/utils/test-helper'; import uuidv4 from '../../global/js/utils/uuidv4'; @@ -131,7 +130,6 @@ const DummyComponent = ({ props, open }) => { // These are tests than apply to both Tearsheet and TearsheetNarrow // and also (with extra props and omitting button tests) to CreateTearsheetNarrow let tooManyButtonsTestedAlready = false; -let closeIconDescriptionTestedAlready = false; const commonTests = (Ts, name, props, testActions) => { it(`renders a component ${name}`, async () => { render(<Ts {...{ ...props, closeIconDescription }} />); @@ -229,24 +227,6 @@ const commonTests = (Ts, name, props, testActions) => { screen.getByRole('button', { name: closeIconDescription }); }); - if (testActions) { - it('requires closeIconDescription when there are no actions', async () => - expectMultipleError( - // prop-types only reports the first occurrence of each distinct error, - // which creates an unfortunate dependency between test runs - closeIconDescriptionTestedAlready - ? [required('closeIconDescription', name)] - : [ - required('closeIconDescription', name), - required('closeIconDescription', 'TearsheetShell'), - ], - () => { - render(<Ts {...props} />); - closeIconDescriptionTestedAlready = true; - } - )); - } - it('renders description', async () => { render(<Ts {...{ ...props, closeIconDescription, description }} />); screen.getByText(descriptionFragment); diff --git a/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx b/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx index 655a76b8b1..836d8cb26a 100644 --- a/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx +++ b/packages/ibm-products/src/components/Tearsheet/Tearsheet.tsx @@ -9,7 +9,7 @@ import { Button, type ButtonProps } from '@carbon/react'; // Import portions of React that are needed. import React, { ForwardedRef, PropsWithChildren, ReactNode } from 'react'; -import { TearsheetShell, tearsheetHasCloseIcon } from './TearsheetShell'; +import { TearsheetShell } from './TearsheetShell'; import { ActionSet } from '../ActionSet'; // Other standard imports. @@ -22,23 +22,6 @@ import { portalType } from './TearsheetShell'; const componentName = 'Tearsheet'; // NOTE: the component SCSS is not imported here: it is rolled up separately. - -/** - * The accessibility title for the close icon (if shown). - * - * **Note:** This prop is only required if a close icon is shown, i.e. if - * there are a no navigation actions and/or hasCloseIcon is true. - */ -export type CloseIconDescriptionTypes = - | { - hasCloseIcon?: false; - closeIconDescription?: string; - } - | { - hasCloseIcon: true; - closeIconDescription: string; - }; - // The types and DocGen commentary for the component props, // in alphabetical order (for consistency). // See https://www.npmjs.com/package/prop-types#usage. @@ -76,6 +59,12 @@ export interface TearsheetProps extends PropsWithChildren { */ className?: string; + /** + * The accessibility title for the close icon (if shown). + * + */ + closeIconDescription?: string; + /** * A description of the flow, displayed in the header area of the tearsheet. */ @@ -194,7 +183,7 @@ export let Tearsheet = React.forwardRef( influencerPosition = 'left', influencerWidth = 'narrow', ...rest - }: TearsheetProps & CloseIconDescriptionTypes, + }: TearsheetProps, ref: ForwardedRef<HTMLDivElement> ) => ( <TearsheetShell @@ -287,13 +276,8 @@ Tearsheet.propTypes = { /** * The accessibility title for the close icon (if shown). * - * **Note:** This prop is only required if a close icon is shown, i.e. if - * there are a no navigation actions and/or hasCloseIcon is true. */ - /**@ts-ignore */ - closeIconDescription: PropTypes.string.isRequired.if( - ({ actions, hasCloseIcon }) => tearsheetHasCloseIcon(actions, hasCloseIcon) - ), + closeIconDescription: PropTypes.string, /** * A description of the flow, displayed in the header area of the tearsheet. @@ -308,7 +292,6 @@ Tearsheet.propTypes = { * tearsheet"), and that behavior can be overridden if required by setting * this prop to either true or false. */ - /**@ts-ignore */ hasCloseIcon: PropTypes.bool, /** diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx index 0d2e51d871..c05757e4b0 100644 --- a/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx +++ b/packages/ibm-products/src/components/Tearsheet/TearsheetNarrow.tsx @@ -8,10 +8,8 @@ // Carbon and package components we use. import { Button, ButtonProps } from '@carbon/react'; import { - CloseIconDescriptionTypes, TearsheetShell, tearsheetShellWideProps as blocked, - tearsheetHasCloseIcon, } from './TearsheetShell'; // Import portions of React that are needed. import React, { ForwardedRef, PropsWithChildren, ReactNode } from 'react'; @@ -24,7 +22,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools'; import { pkg } from '../../settings'; import { portalType } from './TearsheetShell'; -interface TearsheetNarrowBaseProps extends PropsWithChildren { +export interface TearsheetNarrowProps extends PropsWithChildren { /** * The navigation actions to be shown as buttons in the action area at the * bottom of the tearsheet. Each action is specified as an object with @@ -51,6 +49,12 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren { */ className?: string; + /** + * The accessibility title for the close icon (if shown). + * + */ + closeIconDescription?: string; + /** * A description of the flow, displayed in the header area of the tearsheet. */ @@ -118,9 +122,6 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren { verticalPosition?: 'normal' | 'lower'; } -export type TearsheetNarrowProps = TearsheetNarrowBaseProps & - CloseIconDescriptionTypes; - const componentName = 'TearsheetNarrow'; // NOTE: the component SCSS is not imported here: it is rolled up separately. @@ -236,14 +237,8 @@ TearsheetNarrow.propTypes = { /** * The accessibility title for the close icon (if shown). * - * **Note:** This prop is only required if a close icon is shown, i.e. if - * there are a no navigation actions and/or hasCloseIcon is true. */ - /**@ts-ignore */ - closeIconDescription: PropTypes.string.isRequired.if( - ({ actions, hasCloseIcon }) => tearsheetHasCloseIcon(actions, hasCloseIcon) - ), - + closeIconDescription: PropTypes.string, /** * A description of the flow, displayed in the header area of the tearsheet. */ @@ -255,7 +250,6 @@ TearsheetNarrow.propTypes = { * the tearsheet is read-only or has no navigation actions (sometimes called * a "passive tearsheet"). */ - /**@ts-ignore*/ hasCloseIcon: PropTypes.bool, /** diff --git a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx index 456671512d..a5626228ad 100644 --- a/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx +++ b/packages/ibm-products/src/components/Tearsheet/TearsheetShell.tsx @@ -39,8 +39,8 @@ import { import { ActionSet } from '../ActionSet'; import { Wrap } from '../../global/js/utils/Wrap'; import { usePortalTarget } from '../../global/js/hooks/usePortalTarget'; +import { useIsomorphicEffect, usePreviousValue } from '../../global/js/hooks'; import { claimFocus, useFocus } from '../../global/js/hooks/useFocus'; -import { usePreviousValue } from '../../global/js/hooks'; import { TearsheetAction } from './Tearsheet'; // The block part of our conventional BEM class names (bc__E--M). @@ -59,6 +59,14 @@ interface TearsheetShellProps extends PropsWithChildren { */ className?: string; + /** + * The accessibility title for the close icon (if shown). + * + * **Note:** This prop is only required if a close icon is shown, i.e. if + * there are a no navigation actions and/or hasCloseIcon is true. + */ + closeIconDescription?: string; + /** * Used to track the current step on components which use `StepsContext` and `TearsheetShell` */ @@ -185,16 +193,6 @@ interface TearsheetShellProps extends PropsWithChildren { slug?: ReactNode; } -export type CloseIconDescriptionTypes = - | { - hasCloseIcon?: false; - closeIconDescription?: string; - } - | { - hasCloseIcon: true; - closeIconDescription: string; - }; - // NOTE: the component SCSS is not imported here: it is rolled up separately. // Global data structure to communicate the state of tearsheet stacking @@ -247,7 +245,7 @@ export const TearsheetShell = React.forwardRef( ariaLabel, children, className, - closeIconDescription, + closeIconDescription = 'Close', currentStep, description, hasCloseIcon, @@ -270,7 +268,7 @@ export const TearsheetShell = React.forwardRef( launcherButtonRef, // Collect any other property values passed in. ...rest - }: TearsheetShellProps & CloseIconDescriptionTypes, + }: TearsheetShellProps, ref: ForwardedRef<HTMLDivElement> ) => { const carbonPrefix = usePrefix(); @@ -384,6 +382,28 @@ export const TearsheetShell = React.forwardRef( }; }, [open, size]); + const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1; + + useIsomorphicEffect(() => { + const setScaleValues = () => { + if (!areAllSameSizeVariant()) { + return { + [`--${bc}--stacking-scale-factor-single`]: 1, + [`--${bc}--stacking-scale-factor-double`]: 1, + }; + } + return { + [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width, + [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width, + }; + }; + if (modalRef.current) { + Object.entries(setScaleValues()).map(([key, value]) => { + modalRef.current.style.setProperty(key, String(value)); + }); + } + }, [modalRef, width]); + if (position <= depth) { // Include a modal header if and only if one or more of these is given. // We can't use a Wrap for the ModalHeader because ComposedModal requires @@ -401,18 +421,6 @@ export const TearsheetShell = React.forwardRef( const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1; - const setScaleValues = () => { - if (!areAllSameSizeVariant()) { - return { - [`--${bc}--stacking-scale-factor-single`]: 1, - [`--${bc}--stacking-scale-factor-double`]: 1, - }; - } - return { - [`--${bc}--stacking-scale-factor-single`]: (width - 32) / width, - [`--${bc}--stacking-scale-factor-double`]: (width - 64) / width, - }; - }; return renderPortalUse( <FeatureFlags enableExperimentalFocusWrapWithoutSentinels> <ComposedModal @@ -435,7 +443,6 @@ export const TearsheetShell = React.forwardRef( [`${bc}--has-close`]: effectiveHasCloseIcon, })} decorator={decorator || deprecated_slug} - style={setScaleValues()} containerClassName={cx(`${bc}__container`, { [`${bc}__container--lower`]: verticalPosition === 'lower', [`${bc}__container--mixed-size-stacking`]: @@ -644,9 +651,7 @@ TearsheetShell.propTypes = { * there are a no navigation actions and/or hasCloseIcon is true. */ /**@ts-ignore*/ - closeIconDescription: PropTypes.string.isRequired.if( - ({ actions, hasCloseIcon }) => tearsheetHasCloseIcon(actions, hasCloseIcon) - ), + closeIconDescription: PropTypes.string, /** * Optional prop that allows you to pass any component. diff --git a/packages/ibm-products/src/components/TruncatedList/TruncatedList.tsx b/packages/ibm-products/src/components/TruncatedList/TruncatedList.tsx index 07aec989e6..a0881ddf2e 100644 --- a/packages/ibm-products/src/components/TruncatedList/TruncatedList.tsx +++ b/packages/ibm-products/src/components/TruncatedList/TruncatedList.tsx @@ -22,6 +22,7 @@ import { Button } from '@carbon/react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { getDevtoolsProps } from '../../global/js/utils/devtools'; +import { useIsomorphicEffect } from '../../global/js/hooks'; // The block part of our conventional BEM class names (blockClass__E--M). const blockClass = `${pkg.prefix}--truncated-list`; @@ -140,6 +141,12 @@ export let TruncatedList = React.forwardRef<HTMLDivElement, TruncatedListProps>( } }, [childrenArray, minItems, maxItems, isCollapsed, listRef]); + useIsomorphicEffect(() => { + if (listRef.current) { + listRef.current.style.height = `${listHeight}px`; + } + }, [listHeight]); + return ( <div {...rest} @@ -156,11 +163,7 @@ export let TruncatedList = React.forwardRef<HTMLDivElement, TruncatedListProps>( ref={ref} {...getDevtoolsProps(componentName)} > - <List - className={`${blockClass}__list`} - ref={listRef} - style={{ height: listHeight }} - > + <List className={`${blockClass}__list`} ref={listRef}> {isCollapsed ? childrenArray.slice(0, minItems) : children} </List> diff --git a/packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx b/packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx index a0ff859eae..e4ca4df6cc 100644 --- a/packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx +++ b/packages/ibm-products/src/components/WebTerminal/WebTerminal.tsx @@ -11,10 +11,12 @@ import { Close, Help } from '@carbon/react/icons'; // Import portions of React that are needed. import React, { ForwardedRef, + MutableRefObject, PropsWithChildren, ReactNode, useEffect, useMemo, + useRef, useState, } from 'react'; @@ -26,6 +28,7 @@ import { moderate02 } from '@carbon/motion'; import { pkg } from '../../settings'; import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMotion'; import { useWebTerminal } from './hooks'; +import { useIsomorphicEffect } from '../../global/js/hooks'; // The block part of our conventional BEM class names (blockClass__E--M). const componentName = 'WebTerminal'; @@ -87,6 +90,10 @@ export interface WebTerminalProps extends PropsWithChildren { webTerminalAriaLabel?: string; } +interface HTMLElementStyled extends HTMLDivElement { + style: CSSStyleDeclaration; +} + /** * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI. */ @@ -108,6 +115,10 @@ export let WebTerminal = React.forwardRef( }: WebTerminalProps, ref: ForwardedRef<HTMLDivElement> ) => { + const localRef = useRef<HTMLDivElement>(); + const webTerminalRef = (ref ?? + localRef) as MutableRefObject<HTMLElementStyled>; + const { open, closeWebTerminal, openWebTerminal } = useWebTerminal(); const [shouldRender, setRender] = useState(open); @@ -117,6 +128,15 @@ export let WebTerminal = React.forwardRef( open ? 'web-terminal-entrance' : 'web-terminal-exit forwards' } ${moderate02}`; + useIsomorphicEffect(() => { + const timeout = setTimeout(() => { + if (webTerminalRef.current && !shouldReduceMotion) { + webTerminalRef.current.style.animation = webTerminalAnimationName; + } + }, 0); + return () => clearTimeout(timeout); + }, [shouldReduceMotion, webTerminalAnimationName, webTerminalRef]); + const showDocumentationLinks = useMemo( () => documentationLinks.length > 0, [documentationLinks] @@ -164,7 +184,7 @@ export let WebTerminal = React.forwardRef( ...rest, ...getDevtoolsProps(componentName), }} - ref={ref} + ref={webTerminalRef} className={cx([ blockClass, className, @@ -173,9 +193,6 @@ export let WebTerminal = React.forwardRef( [`${blockClass}--closed`]: !open, }, ])} - style={{ - animation: !shouldReduceMotion ? webTerminalAnimationName : '', - }} onAnimationEnd={onAnimationEnd} > <header diff --git a/packages/ibm-products/src/custom-typings/index.d.ts b/packages/ibm-products/src/custom-typings/index.d.ts index 0517f20f1b..8078d72e7f 100644 --- a/packages/ibm-products/src/custom-typings/index.d.ts +++ b/packages/ibm-products/src/custom-typings/index.d.ts @@ -212,7 +212,6 @@ declare module '@carbon/react' { usePrefix, } from '@carbon/react'; } - declare module '@carbon/colors'; declare module '@carbon/motion'; declare module '@carbon/feature-flags'; diff --git a/packages/ibm-products/src/global/js/hooks/useOverflowItems.ts b/packages/ibm-products/src/global/js/hooks/useOverflowItems.ts new file mode 100644 index 0000000000..f18955a9e3 --- /dev/null +++ b/packages/ibm-products/src/global/js/hooks/useOverflowItems.ts @@ -0,0 +1,99 @@ +/** + * Copyright IBM Corp. 2025, 2025 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import { RefObject, useRef, useState } from 'react'; +import { useResizeObserver } from './useResizeObserver'; + +type Item = { + id: string; +}; + +export const useOverflowItems = <T extends Item>( + items: T[] = [], + containerRef: RefObject<HTMLDivElement>, + offsetRef?: RefObject<HTMLDivElement>, + maxItems?: number, + onChange?: (hiddenItems: T[]) => void +) => { + const itemsRef = useRef<Map<string, number> | null>(null); + const [maxWidth, setMaxWidth] = useState(0); + const visibleItemCount = useRef<number>(0); + + const handleResize = () => { + if (containerRef.current) { + const offset = offsetRef?.current?.offsetWidth || 0; + const newMax = containerRef.current.offsetWidth - offset; + setMaxWidth(newMax); + } + }; + + useResizeObserver(containerRef, handleResize); + + const getMap = () => { + if (!itemsRef.current) { + itemsRef.current = new Map(); + } + return itemsRef.current; + }; + + const itemRefHandler = (id: string, node: HTMLDivElement | null) => { + const map = getMap(); + if (node) { + const style = getComputedStyle?.(node); + const totalWidth = + node.offsetWidth + + parseInt(style.marginLeft) + + parseInt(style.marginRight); + map.set(id, totalWidth); + } + + return () => { + map.delete(id); + }; + }; + + const getVisibleItems = () => { + if (!containerRef) { + return items; + } + + const map = getMap(); + let maxReached = false; + let accumulatedWidth = 0; + + const visibleItems = items.slice(0, maxItems).reduce((prev, cur) => { + if (maxReached) { + return prev; + } + + const itemWidth = map.get(cur.id) || 0; + const willFit = accumulatedWidth + itemWidth <= maxWidth; + if (willFit) { + accumulatedWidth += itemWidth; + prev.push(cur); + } else { + maxReached = true; + } + return prev; + }, [] as T[]); + return visibleItems; + }; + + const visibleItems = getVisibleItems(); + const hiddenItems = items.slice(visibleItems.length); + // only call the change handler when the number of visible items has changed + if (visibleItems.length !== visibleItemCount.current) { + visibleItemCount.current = visibleItems.length; + onChange?.(hiddenItems); + } + + return { + visibleItems, + itemRefHandler, + hiddenItems, + }; +}; diff --git a/packages/ibm-products/telemetry.yml b/packages/ibm-products/telemetry.yml index be04f5afec..96cefb2114 100644 --- a/packages/ibm-products/telemetry.yml +++ b/packages/ibm-products/telemetry.yml @@ -134,11 +134,13 @@ collect: - hasActions - hasCloseIcon - hasCustomRowHeader + - hasError - hasFieldset - headerActions - headerGroups - HeaderRow - headers + - headingAs - headRef - hideConditionPreviewHandler - hideConditionSubGroupPreviewHandler @@ -346,6 +348,7 @@ collect: - sortByLabel - startConditionLabel - state + - statementConfigCustom - status - style - submitButtonText diff --git a/yarn.lock b/yarn.lock index e952a9c971..29eb00548a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1681,7 +1681,7 @@ __metadata: resolution: "@carbon/ibm-cloud-cognitive-core@workspace:packages/core" dependencies: "@carbon/grid": "npm:^11.29.0" - "@carbon/ibm-products-styles": "npm:^2.53.0-rc.0" + "@carbon/ibm-products-styles": "npm:^2.54.0-rc.0" "@carbon/layout": "npm:^11.28.0" "@carbon/motion": "npm:^11.24.0" "@carbon/react": "npm:^1.72.0" @@ -1722,7 +1722,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/ibm-products-styles@npm:^2.53.0-rc.0, @carbon/ibm-products-styles@workspace:packages/ibm-products-styles": +"@carbon/ibm-products-styles@npm:^2.54.0-rc.0, @carbon/ibm-products-styles@workspace:packages/ibm-products-styles": version: 0.0.0-use.local resolution: "@carbon/ibm-products-styles@workspace:packages/ibm-products-styles" dependencies: @@ -1732,7 +1732,7 @@ __metadata: cross-env: "npm:^7.0.3" glob: "npm:^10.3.10" jest: "npm:^29.7.0" - jest-config-ibm-cloud-cognitive: "npm:^1.16.0-rc.0" + jest-config-ibm-cloud-cognitive: "npm:^1.17.0-rc.0" jest-environment-jsdom: "npm:^29.7.0" npm-check-updates: "npm:^17.1.11" npm-run-all: "npm:^4.1.5" @@ -1752,7 +1752,8 @@ __metadata: version: 0.0.0-use.local resolution: "@carbon/ibm-products-web-components@workspace:packages/ibm-products-web-components" dependencies: - "@carbon/ibm-products-styles": "npm:^2.53.0-rc.0" + "@carbon/ibm-products-styles": "npm:^2.54.0-rc.0" + "@carbon/icon-helpers": "npm:^10.54.0" "@carbon/icons": "npm:^11.53.0" "@carbon/motion": "npm:^11.24.0" "@carbon/styles": "npm:1.71.0" @@ -1789,6 +1790,7 @@ __metadata: sass: "npm:^1.80.6" storybook: "npm:^8.4.5" storybook-addon-accessibility-checker: "npm:^3.1.61-rc.3" + tslib: "npm:^2.6.3" typescript: "npm:^5.5.3" vite: "npm:^6.0.3" vitest: "npm:^2.1.2" @@ -1811,7 +1813,7 @@ __metadata: "@babel/preset-typescript": "npm:^7.21.5" "@babel/runtime": "npm:^7.23.9" "@carbon/feature-flags": "npm:^0.24.0" - "@carbon/ibm-products-styles": "npm:^2.53.0-rc.0" + "@carbon/ibm-products-styles": "npm:^2.54.0-rc.0" "@carbon/telemetry": "npm:^0.1.0" "@dnd-kit/core": "npm:^6.0.8" "@dnd-kit/modifiers": "npm:^7.0.0" @@ -1825,18 +1827,18 @@ __metadata: "@rollup/plugin-typescript": "npm:^12.1.1" "@types/react-table": "npm:^7.7.20" babel-plugin-dev-expression: "npm:^0.2.3" - babel-preset-ibm-cloud-cognitive: "npm:^0.15.0-rc.0" + babel-preset-ibm-cloud-cognitive: "npm:^0.16.0-rc.0" chalk: "npm:^4.1.2" change-case: "npm:4.1.2" classnames: "npm:^2.5.1" copyfiles: "npm:^2.4.1" cross-env: "npm:^7.0.3" - framer-motion: "npm:^11.11.17" + framer-motion: "npm:^6.5.1 < 7" fs-extra: "npm:^11.2.0" glob: "npm:^10.3.10" immutability-helper: "npm:^3.1.1" jest: "npm:^29.7.0" - jest-config-ibm-cloud-cognitive: "npm:^1.16.0-rc.0" + jest-config-ibm-cloud-cognitive: "npm:^1.17.0-rc.0" jest-environment-jsdom: "npm:^29.7.0" lodash: "npm:^4.17.21" lottie-web: "npm:^5.12.2" @@ -2866,6 +2868,22 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^0.8.2": + version: 0.8.8 + resolution: "@emotion/is-prop-valid@npm:0.8.8" + dependencies: + "@emotion/memoize": "npm:0.7.4" + checksum: e85bdeb9d9d23de422f271e0f5311a0142b15055bb7e610440dbf250f0cdfd049df88af72a49e2c6081954481f1cbeca9172e2116ff536b38229397dfbed8082 + languageName: node + linkType: hard + +"@emotion/memoize@npm:0.7.4": + version: 0.7.4 + resolution: "@emotion/memoize@npm:0.7.4" + checksum: 4e3920d4ec95995657a37beb43d3f4b7d89fed6caa2b173a4c04d10482d089d5c3ea50bbc96618d918b020f26ed6e9c4026bbd45433566576c1f7b056c3271dc + languageName: node + linkType: hard + "@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" @@ -4098,6 +4116,71 @@ __metadata: languageName: node linkType: hard +"@motionone/animation@npm:^10.12.0": + version: 10.18.0 + resolution: "@motionone/animation@npm:10.18.0" + dependencies: + "@motionone/easing": "npm:^10.18.0" + "@motionone/types": "npm:^10.17.1" + "@motionone/utils": "npm:^10.18.0" + tslib: "npm:^2.3.1" + checksum: c7fc04dd10d6cade3d3b63d26f2532a2b2731233afc0454722e55ad8061fb3923d926db9cc09f1bcedb39f504fcee1e80adaab270523846998aad3017364a583 + languageName: node + linkType: hard + +"@motionone/dom@npm:10.12.0": + version: 10.12.0 + resolution: "@motionone/dom@npm:10.12.0" + dependencies: + "@motionone/animation": "npm:^10.12.0" + "@motionone/generators": "npm:^10.12.0" + "@motionone/types": "npm:^10.12.0" + "@motionone/utils": "npm:^10.12.0" + hey-listen: "npm:^1.0.8" + tslib: "npm:^2.3.1" + checksum: 6fd7804b8adba5578d700fced12df6e7fca366aeda8837471286481ebfb5275facd3883448df84a2f772c32e7e3297fc696d3a19b110214f070f305b1ab21c67 + languageName: node + linkType: hard + +"@motionone/easing@npm:^10.18.0": + version: 10.18.0 + resolution: "@motionone/easing@npm:10.18.0" + dependencies: + "@motionone/utils": "npm:^10.18.0" + tslib: "npm:^2.3.1" + checksum: a455a06ccee907ce9da7b1dfe392060a473132733e3f92bbee3a99c36af7baa333cf3c6e38c6d44ad0f9878fdafca3c3f4bcfe55aaeb2a633e45d8e0429f8fa5 + languageName: node + linkType: hard + +"@motionone/generators@npm:^10.12.0": + version: 10.18.0 + resolution: "@motionone/generators@npm:10.18.0" + dependencies: + "@motionone/types": "npm:^10.17.1" + "@motionone/utils": "npm:^10.18.0" + tslib: "npm:^2.3.1" + checksum: 149720881e8db6a1ff38cea98349c3a00f72e5318b645459b68a2aeddb1f2be63ad2ae8978f6c4a63e2414f39e65f06de13a43fd35cf24dc3fb3e3c7f87526bc + languageName: node + linkType: hard + +"@motionone/types@npm:^10.12.0, @motionone/types@npm:^10.17.1": + version: 10.17.1 + resolution: "@motionone/types@npm:10.17.1" + checksum: 21d92d733ba30f810b72609fe04f2ef86125ba0160b826974605cc4cc5fbb6ab7bbf1640cbc64fd6298eb8d36fb920ad3ca646c76adf0e2c47a4920200616952 + languageName: node + linkType: hard + +"@motionone/utils@npm:^10.12.0, @motionone/utils@npm:^10.18.0": + version: 10.18.0 + resolution: "@motionone/utils@npm:10.18.0" + dependencies: + "@motionone/types": "npm:^10.17.1" + hey-listen: "npm:^1.0.8" + tslib: "npm:^2.3.1" + checksum: 0fa9232d132383880d6004522ded763d60f490946584e02bca7f64df98fae07421071f3a85de06aa6ecb52632a47a7586b4143e824e459a87cc852fab657e549 + languageName: node + linkType: hard + "@mswjs/interceptors@npm:^0.35.8": version: 0.35.9 resolution: "@mswjs/interceptors@npm:0.35.9" @@ -8990,7 +9073,7 @@ __metadata: languageName: node linkType: hard -"babel-preset-ibm-cloud-cognitive@npm:^0.15.0-rc.0, babel-preset-ibm-cloud-cognitive@workspace:config/babel-preset-ibm-cloud-cognitive": +"babel-preset-ibm-cloud-cognitive@npm:^0.16.0-rc.0, babel-preset-ibm-cloud-cognitive@workspace:config/babel-preset-ibm-cloud-cognitive": version: 0.0.0-use.local resolution: "babel-preset-ibm-cloud-cognitive@workspace:config/babel-preset-ibm-cloud-cognitive" dependencies: @@ -13007,23 +13090,33 @@ __metadata: languageName: node linkType: hard -"framer-motion@npm:^11.11.17": - version: 11.11.17 - resolution: "framer-motion@npm:11.11.17" +"framer-motion@npm:^6.5.1 < 7": + version: 6.5.1 + resolution: "framer-motion@npm:6.5.1" dependencies: - tslib: "npm:^2.4.0" + "@emotion/is-prop-valid": "npm:^0.8.2" + "@motionone/dom": "npm:10.12.0" + framesync: "npm:6.0.1" + hey-listen: "npm:^1.0.8" + popmotion: "npm:11.0.3" + style-value-types: "npm:5.0.0" + tslib: "npm:^2.1.0" peerDependencies: - "@emotion/is-prop-valid": "*" - react: ^18.0.0 - react-dom: ^18.0.0 - peerDependenciesMeta: + react: ">=16.8 || ^17.0.0 || ^18.0.0" + react-dom: ">=16.8 || ^17.0.0 || ^18.0.0" + dependenciesMeta: "@emotion/is-prop-valid": optional: true - react: - optional: true - react-dom: - optional: true - checksum: 85193dea8ea4161efa20604db31d82761008b56f1c68097239e6e825a422c4fcc8e3b06c3a81e9cbbb1905c4b9d69632b520db2f9dd4808e03bf83e1826791ea + checksum: ecdb2cceb0ff400f2bddc8800b74e0b377fd7d627a051437ec510cf3c1e7184b6a0afc68696e70cb21bf277e41ea41813e2833f8878e23de178be10d7b2978e5 + languageName: node + linkType: hard + +"framesync@npm:6.0.1": + version: 6.0.1 + resolution: "framesync@npm:6.0.1" + dependencies: + tslib: "npm:^2.1.0" + checksum: 38a985189c90867a969e9acc1d31bfcab8184bccc0f1ad41a12dbd573e3ec0ba74259d12f3fcabaccd914330601cabd686f47b543798cf6e8c4ad23ea3c0a581 languageName: node linkType: hard @@ -13787,6 +13880,13 @@ __metadata: languageName: node linkType: hard +"hey-listen@npm:^1.0.8": + version: 1.0.8 + resolution: "hey-listen@npm:1.0.8" + checksum: 744b5f4c18c7cfb82b22bd22e1d300a9ac4eafe05a22e58fb87e48addfca8be00604d9aa006434ea02f9530990eb4b393ddb28659e2ab7f833ce873e32eb809c + languageName: node + linkType: hard + "hosted-git-info@npm:^2.1.4": version: 2.8.9 resolution: "hosted-git-info@npm:2.8.9" @@ -14925,7 +15025,7 @@ __metadata: languageName: node linkType: hard -"jest-config-ibm-cloud-cognitive@npm:^1.16.0-rc.0, jest-config-ibm-cloud-cognitive@workspace:config/jest-config-ibm-cloud-cognitive": +"jest-config-ibm-cloud-cognitive@npm:^1.17.0-rc.0, jest-config-ibm-cloud-cognitive@workspace:config/jest-config-ibm-cloud-cognitive": version: 0.0.0-use.local resolution: "jest-config-ibm-cloud-cognitive@workspace:config/jest-config-ibm-cloud-cognitive" dependencies: @@ -14940,7 +15040,7 @@ __metadata: accessibility-checker: "npm:^3.1.78" axe-core: "npm:^4.8.3" babel-jest: "npm:^29.7.0" - babel-preset-ibm-cloud-cognitive: "npm:^0.15.0-rc.0" + babel-preset-ibm-cloud-cognitive: "npm:^0.16.0-rc.0" chalk: "npm:^4.1.2" identity-obj-proxy: "npm:^3.0.0" jest-circus: "npm:^29.7.0" @@ -18719,6 +18819,18 @@ __metadata: languageName: node linkType: hard +"popmotion@npm:11.0.3": + version: 11.0.3 + resolution: "popmotion@npm:11.0.3" + dependencies: + framesync: "npm:6.0.1" + hey-listen: "npm:^1.0.8" + style-value-types: "npm:5.0.0" + tslib: "npm:^2.1.0" + checksum: d2b6f16536b093d6106ab4caff105b1b4a8bb260e1deb316ca4fe81997c2ca1fc9e2d7747cee08dc2ce34d23ef7be8fd096efa7bc7f6908479da9d16343e1f63 + languageName: node + linkType: hard + "possible-typed-array-names@npm:^1.0.0": version: 1.0.0 resolution: "possible-typed-array-names@npm:1.0.0" @@ -21179,6 +21291,16 @@ __metadata: languageName: node linkType: hard +"style-value-types@npm:5.0.0": + version: 5.0.0 + resolution: "style-value-types@npm:5.0.0" + dependencies: + hey-listen: "npm:^1.0.8" + tslib: "npm:^2.1.0" + checksum: a4043bcc8e9f73e393c48f3f3d26f0ed42ac518cf623b1966737a17dc07ef9a4bcefaa81bfb91037c38b160a7683e139132c87fe747aebe6527b785a04262dd8 + languageName: node + linkType: hard + "stylehacks@npm:^7.0.4": version: 7.0.4 resolution: "stylehacks@npm:7.0.4" @@ -21937,6 +22059,13 @@ __metadata: languageName: node linkType: hard +"tslib@npm:^2.3.1": + version: 2.8.1 + resolution: "tslib@npm:2.8.1" + checksum: 3e2e043d5c2316461cb54e5c7fe02c30ef6dccb3384717ca22ae5c6b5bc95232a6241df19c622d9c73b809bea33b187f6dbc73030963e29950c2141bc32a79f7 + languageName: node + linkType: hard + "tslib@npm:^2.6.3": version: 2.7.0 resolution: "tslib@npm:2.7.0"