diff --git a/examples/class-prefix/package.json b/examples/class-prefix/package.json index 12475eb4732e..96e166b196e7 100644 --- a/examples/class-prefix/package.json +++ b/examples/class-prefix/package.json @@ -1,7 +1,7 @@ { "name": "class-prefix", "private": true, - "version": "0.55.0", + "version": "0.55.1", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/custom-theme/package.json b/examples/custom-theme/package.json index 5c2a3cdc66b6..043891d2bfc0 100644 --- a/examples/custom-theme/package.json +++ b/examples/custom-theme/package.json @@ -1,7 +1,7 @@ { "name": "custom-theme", "private": true, - "version": "0.56.0", + "version": "0.56.1", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/id-prefix/package.json b/examples/id-prefix/package.json index 7b862c74f7f0..9817c4ab6a24 100644 --- a/examples/id-prefix/package.json +++ b/examples/id-prefix/package.json @@ -1,7 +1,7 @@ { "name": "id-prefix", "private": true, - "version": "0.55.0", + "version": "0.55.1", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/incremental-migration-vite/package.json b/examples/incremental-migration-vite/package.json index 203660571df3..26947d3e9090 100644 --- a/examples/incremental-migration-vite/package.json +++ b/examples/incremental-migration-vite/package.json @@ -1,7 +1,7 @@ { "name": "incremental-migration-vite", "private": true, - "version": "0.23.0", + "version": "0.23.1", "scripts": { "dev": "vite", "build": "vite build", @@ -12,7 +12,7 @@ }, "dependencies": { "@carbon/icons-react": "^10.49.0", - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "carbon-components": "^10.57.0", "carbon-components-react": "^7.57.0", "carbon-icons": "^7.0.7", diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json index 741ca46044e4..ca7a8d869a8c 100644 --- a/examples/light-dark-mode/package.json +++ b/examples/light-dark-mode/package.json @@ -1,7 +1,7 @@ { "name": "examples-light-dark", "private": true, - "version": "0.56.0", + "version": "0.56.1", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "next": "14.1.1", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 5da4a4e9a77a..3237bf458645 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -1,7 +1,7 @@ { "name": "examples-nextjs", "private": true, - "version": "0.58.0", + "version": "0.58.1", "scripts": { "build": "next build", "dev": "next dev", @@ -9,7 +9,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "next": "14.1.1", "react": "18.2.0", "react-dom": "18.2.0" diff --git a/examples/v10-token-compat-in-v11/package.json b/examples/v10-token-compat-in-v11/package.json index d9cc9d3de09d..edd066b311da 100644 --- a/examples/v10-token-compat-in-v11/package.json +++ b/examples/v10-token-compat-in-v11/package.json @@ -1,7 +1,7 @@ { "name": "v10-token-compat-in-v11", "private": true, - "version": "0.56.0", + "version": "0.56.1", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/examples/vite/package.json b/examples/vite/package.json index 997488599c31..0a5959b51152 100644 --- a/examples/vite/package.json +++ b/examples/vite/package.json @@ -1,7 +1,7 @@ { "name": "vite", "private": true, - "version": "0.56.0", + "version": "0.56.1", "type": "module", "scripts": { "dev": "vite", @@ -9,7 +9,7 @@ "preview": "vite preview" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json index c92d804854f9..24b3b73c9f32 100644 --- a/packages/carbon-components-react/package.json +++ b/packages/carbon-components-react/package.json @@ -1,7 +1,7 @@ { "name": "carbon-components-react", "description": "The Carbon Design System is IBM’s open-source design system for products and experiences.", - "version": "8.58.0", + "version": "8.58.1", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", @@ -42,7 +42,7 @@ "sass": "^1.33.0" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "@carbon/styles": "^1.58.0", "@ibm/telemetry-js": "^1.5.0", "chalk": "1.1.3" diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 5e5ec22fae25..6cee3f0b492f 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -8234,6 +8234,7 @@ Map { }, }, "Tag" => Object { + "$$typeof": Symbol(react.forward_ref), "propTypes": Object { "as": Object { "type": "elementType", @@ -8299,6 +8300,7 @@ Map { "type": "oneOf", }, }, + "render": [Function], }, "TagSkeleton" => Object { "propTypes": Object { diff --git a/packages/react/package.json b/packages/react/package.json index a2ea9ab57f09..356f3a26d3b3 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,7 +1,7 @@ { "name": "@carbon/react", "description": "React components for the Carbon Design System", - "version": "1.58.0", + "version": "1.58.1", "license": "Apache-2.0", "main": "lib/index.js", "module": "es/index.js", diff --git a/packages/react/src/components/Tag/DismissibleTag.tsx b/packages/react/src/components/Tag/DismissibleTag.tsx index b9223c6bdb5c..541602ea35ce 100644 --- a/packages/react/src/components/Tag/DismissibleTag.tsx +++ b/packages/react/src/components/Tag/DismissibleTag.tsx @@ -6,7 +6,7 @@ */ import PropTypes from 'prop-types'; -import React, { useLayoutEffect, useState, ReactNode } from 'react'; +import React, { useLayoutEffect, useState, ReactNode, useRef } from 'react'; import classNames from 'classnames'; import setupGetInstanceId from '../../tools/setupGetInstanceId'; import { usePrefix } from '../../internal/usePrefix'; @@ -15,6 +15,7 @@ import Tag, { SIZES, TYPES } from './Tag'; import { Close } from '@carbon/icons-react'; import { Tooltip } from '../Tooltip'; import { Text } from '../Text'; +import { isEllipsisActive } from './isEllipsisActive'; const getInstanceId = setupGetInstanceId(); @@ -91,22 +92,17 @@ const DismissibleTag = ({ ...other }: DismissibleTagProps) => { const prefix = usePrefix(); + const tagLabelRef = useRef(); const tagId = id || `tag-${getInstanceId()}`; const tagClasses = classNames(`${prefix}--tag--filter`, className); const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); - const isEllipsisActive = (element: any) => { - setIsEllipsisApplied(element.offsetWidth < element.scrollWidth); - return element.offsetWidth < element.scrollWidth; - }; - useLayoutEffect(() => { - const elementTagId = document.querySelector(`#${tagId}`); - const newElement = elementTagId?.getElementsByClassName( + const newElement = tagLabelRef.current?.getElementsByClassName( `${prefix}--tag__label` )[0]; - isEllipsisActive(newElement); - }, [prefix, tagId]); + setIsEllipsisApplied(isEllipsisActive(newElement)); + }, [prefix, tagLabelRef]); const handleClose = (event: React.MouseEvent) => { if (onClose) { event.stopPropagation(); @@ -134,7 +130,8 @@ const DismissibleTag = ({ const dismissLabel = `Dismiss "${text}"`; return ( - + ({ ...other }: OperationalTagProps) => { const prefix = usePrefix(); + const tagRef = useRef(); const tagId = id || `tag-${getInstanceId()}`; const tagClasses = classNames(`${prefix}--tag--operational`, className); const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); - const isEllipsisActive = (element: any) => { - setIsEllipsisApplied(element.offsetWidth < element.scrollWidth); - return element.offsetWidth < element.scrollWidth; - }; - useLayoutEffect(() => { - const elementTagId = document.querySelector(`#${tagId}`); - const newElement = elementTagId?.getElementsByClassName( + const newElement = tagRef.current?.getElementsByClassName( `${prefix}--tag__label` )[0]; - isEllipsisActive(newElement); - }, [prefix, tagId]); + setIsEllipsisApplied(isEllipsisActive(newElement)); + }, [prefix, tagRef]); let normalizedSlug; if (slug && slug['type']?.displayName === 'Slug') { @@ -135,9 +132,10 @@ const OperationalTag = ({ align="bottom" className={tooltipClasses} leaveDelayMs={0} - onMouseEnter={false} + onMouseEnter={() => false} closeOnActivation> - + ({ } return ( - + ({ ...other }: SelectableTagProps) => { const prefix = usePrefix(); + const tagRef = useRef(); const tagId = id || `tag-${getInstanceId()}`; const [selectedTag, setSelectedTag] = useState(selected); const tagClasses = classNames(`${prefix}--tag--selectable`, className, { @@ -85,18 +87,12 @@ const SelectableTag = ({ }); const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); - const isEllipsisActive = (element: any) => { - setIsEllipsisApplied(element.offsetWidth < element.scrollWidth); - return element.offsetWidth < element.scrollWidth; - }; - useLayoutEffect(() => { - const elementTagId = document.querySelector(`#${tagId}`); - const newElement = elementTagId?.getElementsByClassName( + const newElement = tagRef.current?.getElementsByClassName( `${prefix}--tag__label` )[0]; - isEllipsisActive(newElement); - }, [prefix, tagId]); + setIsEllipsisApplied(isEllipsisActive(newElement)); + }, [prefix, tagRef]); let normalizedSlug; if (slug && slug['type']?.displayName === 'Slug') { @@ -122,8 +118,9 @@ const SelectableTag = ({ align="bottom" className={tooltipClasses} leaveDelayMs={0} - onMouseEnter={false}> - + onMouseEnter={() => false}> + ({ } return ( - + ) => void; @@ -87,7 +95,7 @@ export interface TagBaseProps { slug?: ReactNode; /** - * @deprecated This property is deprecated and will be removed in the next major version. Use DismissibleTag instead. + * @deprecated The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead. */ title?: string; @@ -102,37 +110,36 @@ export type TagProps = PolymorphicProps< TagBaseProps >; -const Tag = ({ - children, - className, - id, - type, - filter, // remove filter in next major release - V12 - renderIcon: CustomIconElement, - title = 'Clear filter', // remove title in next major release - V12 - disabled, - onClose, // remove onClose in next major release - V12 - size, - as: BaseComponent, - slug, - ...other -}: TagProps) => { +const Tag = React.forwardRef(function Tag( + { + children, + className, + id, + type, + filter, // remove filter in next major release - V12 + renderIcon: CustomIconElement, + title = 'Clear filter', // remove title in next major release - V12 + disabled, + onClose, // remove onClose in next major release - V12 + size, + as: BaseComponent, + slug, + ...other + }: TagProps, + forwardRef: ForwardedRef +) { const prefix = usePrefix(); + const tagRef = useRef(); + const ref = useMergeRefs([forwardRef, tagRef]); const tagId = id || `tag-${getInstanceId()}`; const [isEllipsisApplied, setIsEllipsisApplied] = useState(false); - const isEllipsisActive = (element: any) => { - setIsEllipsisApplied(element.offsetWidth < element.scrollWidth); - return element.offsetWidth < element.scrollWidth; - }; - useLayoutEffect(() => { - const elementTagId = document.querySelector(`#${tagId}`); - const newElement = elementTagId?.getElementsByClassName( + const newElement = tagRef.current?.getElementsByClassName( `${prefix}--tag__label` )[0]; - isEllipsisActive(newElement); - }, [prefix, tagId]); + setIsEllipsisApplied(isEllipsisActive(newElement)); + }, [prefix, tagRef]); const conditions = [ `${prefix}--tag--selectable`, @@ -172,7 +179,7 @@ const Tag = ({ } if (filter) { - const ComponentTag = BaseComponent ?? 'div'; + const ComponentTag = (BaseComponent as React.ElementType) ?? 'div'; return ( {CustomIconElement && size !== 'sm' ? ( @@ -215,6 +222,7 @@ const Tag = ({ return ( ({ {normalizedSlug} ); -}; +}); Tag.propTypes = { /** @@ -283,7 +291,7 @@ Tag.propTypes = { */ filter: deprecate( PropTypes.bool, - 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.' + 'The `filter` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.' ), /** @@ -296,7 +304,7 @@ Tag.propTypes = { */ onClose: deprecate( PropTypes.func, - 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.' + 'The `onClose` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.' ), /** @@ -321,7 +329,7 @@ Tag.propTypes = { */ title: deprecate( PropTypes.string, - 'This property is deprecated and will be removed in the next major version. Use DismissibleTag instead.' + 'The `title` prop has been deprecated and will be removed in the next major version. Use DismissibleTag instead.' ), /** diff --git a/packages/react/src/components/Tag/isEllipsisActive.ts b/packages/react/src/components/Tag/isEllipsisActive.ts new file mode 100644 index 000000000000..8ae25c51e133 --- /dev/null +++ b/packages/react/src/components/Tag/isEllipsisActive.ts @@ -0,0 +1,13 @@ +/** + * 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. + */ + +export const isEllipsisActive = (element: any) => { + if (element) { + return element?.offsetWidth < element?.scrollWidth; + } + return false; +}; diff --git a/packages/react/src/components/Tooltip/Tooltip.tsx b/packages/react/src/components/Tooltip/Tooltip.tsx index ccd00475933b..e818293df2ee 100644 --- a/packages/react/src/components/Tooltip/Tooltip.tsx +++ b/packages/react/src/components/Tooltip/Tooltip.tsx @@ -160,7 +160,7 @@ function Tooltip({ function onMouseEnter() { // Interactive Tags should not support onMouseEnter - if (!rest?.onMouseEnter?.()) { + if (!rest?.onMouseEnter) { setIsPointerIntersecting(true); setOpen(true, enterDelayMs); } diff --git a/www/package.json b/www/package.json index 1f598e3d4a80..4f19c018eac1 100644 --- a/www/package.json +++ b/www/package.json @@ -1,7 +1,7 @@ { "name": "www", "private": true, - "version": "0.67.0", + "version": "0.67.1", "license": "Apache-2.0", "repository": { "type": "git", @@ -22,7 +22,7 @@ "start": "next start" }, "dependencies": { - "@carbon/react": "^1.58.0", + "@carbon/react": "^1.58.1", "@octokit/core": "^4.0.0", "@octokit/plugin-retry": "^3.0.9", "@octokit/plugin-throttling": "^4.0.0", diff --git a/yarn.lock b/yarn.lock index 29943bd3fd20..cc9a4aac225f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2041,7 +2041,7 @@ __metadata: languageName: unknown linkType: soft -"@carbon/react@npm:^1.58.0, @carbon/react@workspace:packages/react": +"@carbon/react@npm:^1.58.1, @carbon/react@workspace:packages/react": version: 0.0.0-use.local resolution: "@carbon/react@workspace:packages/react" dependencies: @@ -9811,7 +9811,7 @@ __metadata: "@babel/plugin-transform-react-constant-elements": "npm:^7.17.12" "@babel/preset-env": "npm:^7.18.2" "@babel/preset-react": "npm:^7.17.12" - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" "@carbon/styles": "npm:^1.58.0" "@carbon/test-utils": "npm:^10.30.0" "@ibm/telemetry-js": "npm:^1.5.0" @@ -10201,7 +10201,7 @@ __metadata: version: 0.0.0-use.local resolution: "class-prefix@workspace:examples/class-prefix" dependencies: - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -11556,7 +11556,7 @@ __metadata: version: 0.0.0-use.local resolution: "custom-theme@workspace:examples/custom-theme" dependencies: - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -13653,7 +13653,7 @@ __metadata: version: 0.0.0-use.local resolution: "examples-light-dark@workspace:examples/light-dark-mode" dependencies: - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" eslint: "npm:8.40.0" next: "npm:14.1.1" react: "npm:18.2.0" @@ -13666,7 +13666,7 @@ __metadata: version: 0.0.0-use.local resolution: "examples-nextjs@workspace:examples/nextjs" dependencies: - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" eslint: "npm:8.40.0" eslint-config-next: "npm:13.4.7" next: "npm:14.1.1" @@ -15822,7 +15822,7 @@ __metadata: version: 0.0.0-use.local resolution: "id-prefix@workspace:examples/id-prefix" dependencies: - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -15936,7 +15936,7 @@ __metadata: resolution: "incremental-migration-vite@workspace:examples/incremental-migration-vite" dependencies: "@carbon/icons-react": "npm:^10.49.0" - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" "@vitejs/plugin-react": "npm:4.0.0" carbon-components: "npm:^10.57.0" carbon-components-react: "npm:^7.57.0" @@ -27533,7 +27533,7 @@ __metadata: version: 0.0.0-use.local resolution: "v10-token-compat-in-v11@workspace:examples/v10-token-compat-in-v11" dependencies: - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -27819,7 +27819,7 @@ __metadata: version: 0.0.0-use.local resolution: "vite@workspace:examples/vite" dependencies: - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" "@vitejs/plugin-react": "npm:4.0.0" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -28389,7 +28389,7 @@ __metadata: version: 0.0.0-use.local resolution: "www@workspace:www" dependencies: - "@carbon/react": "npm:^1.58.0" + "@carbon/react": "npm:^1.58.1" "@octokit/core": "npm:^4.0.0" "@octokit/plugin-retry": "npm:^3.0.9" "@octokit/plugin-throttling": "npm:^4.0.0"