@carbon/react 1.66.0-rc.0 → 1.66.0

package/lib/components/Dropdown/Dropdown.js

@@ -195,7 +195,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     [`${prefix}--dropdown--readonly`]: readOnly,
     [`${prefix}--dropdown--${size}`]: size,
     [`${prefix}--list-box--up`]: direction === 'top',
-    [`${prefix}--dropdown--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: autoAlign
   });
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled,

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.d.ts

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+export interface FluidTextAreaSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+}
+declare function FluidTextAreaSkeleton({ className, ...other }: {
+    [x: string]: any;
+    className: any;
+}): void;
+declare namespace FluidTextAreaSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to be applied to the outer FluidForm wrapper
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default FluidTextAreaSkeleton;

package/lib/components/FluidTextArea/FluidTextArea.Skeleton.js

@@ -9,36 +9,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
-var React = require('react');
-var cx = require('classnames');
+require('react');
+require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
-var FormContext = require('../FluidForm/FormContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 function FluidTextAreaSkeleton(_ref) {
-  let {
-    className,
-    ...other
-  } = _ref;
-  const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
-    value: {
-      isFluid: true
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"](`${prefix}--form-item ${prefix}--text-area--fluid__skeleton`, className)
-  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--label ${prefix}--skeleton`
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--skeleton ${prefix}--text-area`
-  })));
+  usePrefix.usePrefix();
 }
 FluidTextAreaSkeleton.propTypes = {
   /**

package/lib/components/FluidTextArea/FluidTextArea.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Copyright IBM Corp. 2016, 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 React from 'react';
+export interface FluidTextAreaProps {
+    /**
+     * Provide a custom className that is applied directly to the underlying
+     * `<textarea>` node
+     */
+    className?: string;
+    /**
+     * Specify the `cols` attribute for the underlying `<textarea>` node
+     */
+    cols?: number;
+    /**
+     * Optionally provide the default value of the `<textarea>`
+     */
+    defaultValue?: string | number;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: React.ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Provide a unique identifier for the control
+     */
+    id?: string;
+    /**
+     * Specify whether the control is currently invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: React.ReactNode;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make tile background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * Max character count allowed for the textarea. This is needed in order for enableCounter to display
+     */
+    maxCount?: number;
+    /**
+     * Optionally provide an `onChange` handler that is called whenever `<textarea>`
+     * is updated
+     */
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+    /**
+     * Optionally provide an `onClick` handler that is called whenever the
+     * `<textarea>` is clicked
+     */
+    onClick?: React.MouseEventHandler<HTMLTextAreaElement>;
+    /**
+     * Specify the placeholder attribute for the `<textarea>`
+     */
+    placeholder?: string;
+    /**
+     * Specify the rows attribute for the `<textarea>`
+     */
+    rows?: number;
+    /**
+     * Provide the current value of the `<textarea>`
+     */
+    value?: string | number;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     *  Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidTextArea: React.FC<FluidTextAreaProps>;
+export default FluidTextArea;

package/lib/components/FluidTextArea/FluidTextArea.js

@@ -25,7 +25,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function FluidTextArea(_ref) {
+const FluidTextArea = _ref => {
   let {
     className,
     ...other
@@ -39,7 +39,7 @@ function FluidTextArea(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(TextArea["default"], _rollupPluginBabelHelpers["extends"]({
     className: classNames
   }, other)));
-}
+};
 FluidTextArea.propTypes = {
   /**
    * Provide a custom className that is applied directly to the underlying

package/lib/components/FluidTextArea/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2016, 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 FluidTextArea from './FluidTextArea';
+import { type FluidTextAreaProps } from './FluidTextArea';
+import { type FluidTextAreaSkeletonProps } from './FluidTextArea.Skeleton';
+export default FluidTextArea;
+export { FluidTextArea, type FluidTextAreaProps, type FluidTextAreaSkeletonProps, };
+export { default as FluidTextAreaSkeleton } from './FluidTextArea.Skeleton';

package/lib/components/IconButton/index.d.ts

@@ -13,6 +13,10 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
      * Specify how the trigger should align with the tooltip
      */
     align?: 'top' | 'top-left' | 'top-start' | 'top-right' | 'top-end' | 'bottom' | 'bottom-left' | 'bottom-start' | 'bottom-right' | 'bottom-end' | 'left' | 'right';
+    /**
+     * **Experimental**: Will attempt to automatically align the tooltip
+     */
+    autoAlign?: boolean;
     /**
      * Provide an icon or asset to be rendered inside of the IconButton
      */

package/lib/components/IconButton/index.js

@@ -28,6 +28,7 @@ const IconButtonKinds = ['primary', 'secondary', 'ghost', 'tertiary'];
 const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function IconButton(_ref, ref) {
   let {
     align,
+    autoAlign = false,
     children,
     className,
     closeOnActivation = true,
@@ -48,6 +49,7 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
   });
   return /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     align: align,
+    autoAlign: autoAlign,
     closeOnActivation: closeOnActivation,
     className: tooltipClasses,
     defaultOpen: defaultOpen,
@@ -69,6 +71,10 @@ IconButton.propTypes = {
    * Specify how the trigger should align with the tooltip
    */
   align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
+  /**
+   * **Experimental**: Will attempt to automatically align the tooltip
+   */
+  autoAlign: PropTypes__default["default"].bool,
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */

package/lib/components/Menu/Menu.js

@@ -292,7 +292,8 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     [`${prefix}--menu--box-shadow-top`]: menuAlignment && menuAlignment.slice(0, 3) === 'top',
     [`${prefix}--menu--open`]: open,
     [`${prefix}--menu--shown`]: open && !legacyAutoalign || position[0] >= 0 && position[1] >= 0,
-    [`${prefix}--menu--with-icons`]: childContext.state.hasIcons
+    [`${prefix}--menu--with-icons`]: childContext.state.hasIcons,
+    [`${prefix}--autoalign`]: !legacyAutoalign
   });
   const rendered = /*#__PURE__*/React__default["default"].createElement(MenuContext.MenuContext.Provider, {
     value: childContext

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -208,7 +208,8 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--list-box__wrapper--fluid--invalid`]: isFluid && invalid,
     [`${prefix}--list-box__wrapper--fluid--focus`]: isFluid && isFocused,
-    [`${prefix}--list-box__wrapper--slug`]: slug
+    [`${prefix}--list-box__wrapper--slug`]: slug,
+    [`${prefix}--autoalign`]: autoAlign
   });
   const helperId = !helperText ? undefined : `filterablemultiselect-helper-text-${filterableMultiSelectInstanceId}`;
   const labelId = `${id}-label`;

package/lib/components/MultiSelect/MultiSelect.js

@@ -290,6 +290,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     [`${prefix}--multi-select--selected`]: selectedItems && selectedItems.length > 0,
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--multi-select--readonly`]: readOnly,
+    [`${prefix}--autoalign`]: autoAlign,
     [`${prefix}--multi-select--selectall`]: selectAll
   });
 

package/lib/components/OverflowMenu/next/index.js

@@ -93,7 +93,9 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
       hookOnClick();
     }
   }
-  const containerClasses = cx__default["default"](className, `${prefix}--overflow-menu__container`);
+  const containerClasses = cx__default["default"](className, `${prefix}--overflow-menu__container`, {
+    [`${prefix}--autoalign`]: autoAlign
+  });
   const menuClasses = cx__default["default"](`${prefix}--overflow-menu__${menuAlignment}`);
   const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
     [`${prefix}--overflow-menu--open`]: open

package/lib/components/Popover/index.js

@@ -199,7 +199,7 @@ const Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popov
     [`${prefix}--popover--drop-shadow`]: dropShadow,
     [`${prefix}--popover--high-contrast`]: highContrast,
     [`${prefix}--popover--open`]: open,
-    [`${prefix}--popover--auto-align`]: autoAlign,
+    [`${prefix}--popover--auto-align ${prefix}--autoalign`]: autoAlign,
     [`${prefix}--popover--${currentAlignment}`]: true,
     [`${prefix}--popover--tab-tip`]: isTabTip
   }, customClassName);

package/lib/components/Tag/DismissibleTag.d.ts

@@ -43,6 +43,10 @@ export interface DismissibleTagBaseProps {
      * Provide text to be rendered inside of a the tag.
      */
     text?: string;
+    /**
+     * Provide a custom `title` to be inserted in the tag.
+     */
+    tagTitle?: string;
     /**
      * Text to show on clear filters
      */
@@ -54,7 +58,7 @@ export interface DismissibleTagBaseProps {
 }
 export type DismissibleTagProps<T extends React.ElementType> = PolymorphicProps<T, DismissibleTagBaseProps>;
 declare const DismissibleTag: {
-    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType<any, keyof React.JSX.IntrinsicElements>>({ className, disabled, id, renderIcon, title, onClose, slug, size, text, tagTitle, type, ...other }: DismissibleTagProps<T>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Provide a custom className that is applied to the containing <span>
@@ -90,6 +94,10 @@ declare const DismissibleTag: {
          * Provide text to be rendered inside of a the tag.
          */
         text: PropTypes.Requireable<string>;
+        /**
+         * Provide a custom `title` to be inserted in the tag.
+         */
+        tagTitle: PropTypes.Requireable<string>;
         /**
          * Text to show on clear filters
          */

package/lib/components/Tag/DismissibleTag.js

@@ -41,6 +41,7 @@ const DismissibleTag = _ref => {
     slug,
     size,
     text,
+    tagTitle,
     type,
     ...other
   } = _ref;
@@ -86,7 +87,7 @@ const DismissibleTag = _ref => {
   }, otherProps), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--interactive--tag-children`
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    title: text,
+    title: tagTitle ? tagTitle : text,
     className: `${prefix}--tag__label`
   }, text), /*#__PURE__*/React__default["default"].createElement(Tooltip.Tooltip, {
     label: isEllipsisApplied ? dismissLabel : title,
@@ -99,8 +100,7 @@ const DismissibleTag = _ref => {
     className: `${prefix}--tag__close-icon`,
     onClick: handleClose,
     disabled: disabled,
-    "aria-label": title,
-    title: title
+    "aria-label": title
   }, _Close || (_Close = /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, null)))), normalizedSlug));
 };
 DismissibleTag.propTypes = {
@@ -138,6 +138,10 @@ DismissibleTag.propTypes = {
    * Provide text to be rendered inside of a the tag.
    */
   text: PropTypes__default["default"].string,
+  /**
+   * Provide a custom `title` to be inserted in the tag.
+   */
+  tagTitle: PropTypes__default["default"].string,
   /**
    * Text to show on clear filters
    */

package/lib/components/Tag/Tag.js

@@ -141,10 +141,10 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
     definition: children !== null && children !== undefined ? children : typeText,
     className: `${prefix}--definition--tooltip--tag`
   }, /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    title: children !== null && children !== undefined ? children : typeText,
+    title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText)) : /*#__PURE__*/React__default["default"].createElement(Text.Text, {
-    title: children !== null && children !== undefined ? children : typeText,
+    title: children !== null && children !== undefined && typeof children === 'string' ? children : typeText,
     className: labelClasses
   }, children !== null && children !== undefined ? children : typeText), normalizedSlug);
 });

package/lib/components/Toggletip/index.js

@@ -84,7 +84,8 @@ function Toggletip(_ref2) {
   const prefix = usePrefix.usePrefix();
   const id = useId.useId();
   const className = cx__default["default"](`${prefix}--toggletip`, customClassName, {
-    [`${prefix}--toggletip--open`]: open
+    [`${prefix}--toggletip--open`]: open,
+    [`${prefix}--autoalign`]: autoAlign
   });
   const actions = {
     toggle: () => {

package/lib/index.js

@@ -163,6 +163,8 @@ var SideNavMenuItem = require('./components/UIShell/SideNavMenuItem.js');
 var SideNavSwitcher = require('./components/UIShell/SideNavSwitcher.js');
 var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
 var index = require('./components/FeatureFlags/index.js');
+var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
+var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
 var index$c = require('./components/Heading/index.js');
 var index$d = require('./components/IconButton/index.js');
 var index$e = require('./components/Layer/index.js');
@@ -184,8 +186,6 @@ var usePrefix = require('./internal/usePrefix.js');
 var useIdPrefix = require('./internal/useIdPrefix.js');
 var FluidDatePicker_Skeleton = require('./components/FluidDatePicker/FluidDatePicker.Skeleton.js');
 var FluidSearch_Skeleton = require('./components/FluidSearch/FluidSearch.Skeleton.js');
-var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
-var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
 var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
 var FluidTextInput_Skeleton = require('./components/FluidTextInput/FluidTextInput.Skeleton.js');
 var PageSelector = require('./components/Pagination/experimental/PageSelector.js');
@@ -429,6 +429,8 @@ exports.UnorderedList = UnorderedList["default"];
 exports.unstable_FeatureFlags = index.FeatureFlags;
 exports.unstable_useFeatureFlag = index.useFeatureFlag;
 exports.unstable_useFeatureFlags = index.useFeatureFlags;
+exports.unstable__FluidTextArea = FluidTextArea["default"];
+exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
 exports.Heading = index$c.Heading;
 exports.Section = index$c.Section;
 exports.IconButton = index$d.IconButton;
@@ -466,8 +468,6 @@ exports.usePrefix = usePrefix.usePrefix;
 exports.useIdPrefix = useIdPrefix.useIdPrefix;
 exports.unstable__FluidDatePickerSkeleton = FluidDatePicker_Skeleton["default"];
 exports.unstable__FluidSearchSkeleton = FluidSearch_Skeleton["default"];
-exports.unstable__FluidTextArea = FluidTextArea["default"];
-exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
 exports.unstable__FluidTextInput = FluidTextInput["default"];
 exports.unstable__FluidTextInputSkeleton = FluidTextInput_Skeleton["default"];
 exports.unstable_PageSelector = PageSelector["default"];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.66.0-rc.0",
+  "version": "1.66.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -49,9 +49,9 @@
   "dependencies": {
     "@babel/runtime": "^7.24.7",
     "@carbon/feature-flags": "^0.22.0",
-    "@carbon/icons-react": "^11.49.0-rc.0",
-    "@carbon/layout": "^11.26.0-rc.0",
-    "@carbon/styles": "^1.65.0-rc.0",
+    "@carbon/icons-react": "^11.49.0",
+    "@carbon/layout": "^11.26.0",
+    "@carbon/styles": "^1.65.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -79,9 +79,9 @@
     "@babel/preset-env": "^7.24.7",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
-    "@carbon/test-utils": "^10.32.0-rc.0",
-    "@carbon/themes": "^11.40.0-rc.0",
-    "@figma/code-connect": "^1.0.4",
+    "@carbon/test-utils": "^10.32.0",
+    "@carbon/themes": "^11.40.0",
+    "@figma/code-connect": "^1.0.6",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -131,7 +131,7 @@
     "style-loader": "^4.0.0",
     "typescript-config-carbon": "^0.3.0",
     "webpack": "^5.65.0",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-dev-server": "^5.0.0"
   },
   "sideEffects": [
     "es/index.js",
@@ -144,5 +144,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "3bea42a9cef74114dc19f12d48519865bd8a4a17"
+  "gitHead": "d706ffca254bad174fdfc88c05f620ba547cc369"
 }