@carbon/react 1.51.0-rc.0 → 1.51.1

package/README.md

@@ -51,6 +51,25 @@ to include `node_modules` in its `includePaths` option. For more information,
 checkout the [configuration](../styles/docs/sass.md#configuration) section in
 our Sass docs.
 
+### TypeScript
+
+There is an ongoing project to add `*.d.ts` files to `@carbon/react`. Though not
+all components have yet been typed, you can still use the project successfully
+in a TypeScript setting, provided you amend to your `tsconfig.json` or
+equivalent configuration file. Include the `skipLibCheck: true` compiler option:
+
+```json
+{
+  "compilerOptions": {
+    "skipLibCheck": true
+  }
+}
+```
+
+To track the progress of TypeScript adoption, check out:
+
+- [TypeScript Adoption](https://github.com/orgs/carbon-design-system/projects/53)
+
 ## Usage
 
 The `@carbon/react` package provides components and icons for the Carbon Design

package/es/components/AiSkeleton/AiSkeletonIcon.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+import React from 'react';
+interface AiSkeletonIconProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * The CSS styles.
+     */
+    style?: React.CSSProperties;
+}
+declare const AiSkeletonIcon: {
+    ({ className, ...rest }: AiSkeletonIconProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The CSS styles.
+         */
+        style: PropTypes.Requireable<object>;
+    };
+};
+export default AiSkeletonIcon;

package/es/components/AiSkeleton/AiSkeletonPlaceholder.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+export interface AiSkeletonPlaceholderProps {
+    /**
+     * Add a custom class to the component to set the height and width
+     */
+    className?: string;
+}
+declare const AiSkeletonPlaceholder: {
+    ({ className, ...other }: AiSkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Add a custom class to the component
+         * to set the height and width
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default AiSkeletonPlaceholder;

package/es/components/AiSkeleton/AiSkeletonText.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+interface AiSkeletonTextProps {
+    /**
+     * Specify an optional className to be applied to the container node.
+     */
+    className?: string;
+    /**
+     * Generates skeleton text at a larger size.
+     */
+    heading?: boolean;
+    /**
+     * The number of lines shown if paragraph is true.
+     */
+    lineCount?: number;
+    /**
+     * Set this to true to generate multiple lines of text.
+     */
+    paragraph?: boolean;
+    /**
+     * Width (in px or %) of single line of text or max-width of paragraph lines.
+     */
+    width?: string;
+}
+declare const AiSkeletonText: {
+    ({ className, ...rest }: AiSkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * generates skeleton text at a larger size
+         */
+        heading: PropTypes.Requireable<boolean>;
+        /**
+         * the number of lines shown if paragraph is true
+         */
+        lineCount: PropTypes.Requireable<number>;
+        /**
+         * will generate multiple lines of text
+         */
+        paragraph: PropTypes.Requireable<boolean>;
+        /**
+         * width (in px or %) of single line of text or max-width of paragraph lines
+         */
+        width: PropTypes.Requireable<string>;
+    };
+};
+export default AiSkeletonText;

package/es/components/AiSkeleton/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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 AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+import AiSkeletonIcon from './AiSkeletonIcon';
+import AiSkeletonText from './AiSkeletonText';
+export { AiSkeletonText, AiSkeletonIcon, AiSkeletonPlaceholder };

package/es/components/ChatButton/ChatButton.js

@@ -21,12 +21,14 @@ const ChatButton = /*#__PURE__*/React__default.forwardRef(function ChatButton(_r
     isQuickAction,
     isSelected,
     kind,
+    renderIcon,
     size,
     ...other
   } = _ref;
   const prefix = usePrefix();
   const classNames = cx(className, {
     [`${prefix}--chat-btn`]: true,
+    [`${prefix}--chat-btn--with-icon`]: renderIcon,
     [`${prefix}--chat-btn--quick-action`]: isQuickAction,
     [`${prefix}--chat-btn--quick-action--selected`]: isSelected
   });
@@ -43,7 +45,8 @@ const ChatButton = /*#__PURE__*/React__default.forwardRef(function ChatButton(_r
     className: classNames,
     kind: kind,
     ref: ref,
-    size: size
+    size: size,
+    renderIcon: renderIcon
   }, other), children);
 });
 ChatButton.propTypes = {
@@ -71,6 +74,11 @@ ChatButton.propTypes = {
    * Specify the kind of `ChatButton` you want to create
    */
   kind: PropTypes.oneOf(['primary', 'secondary', 'danger', 'ghost', 'tertiary']),
+  /**
+   * Optional prop to specify an icon to be rendered.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * Specify the size of the `ChatButton`, from the following list of sizes:
    */

package/es/components/ComposedModal/ComposedModal.js

@@ -36,9 +36,8 @@ const ModalBody = /*#__PURE__*/React__default.forwardRef(function ModalBody(_ref
   const contentClass = cx({
     [`${prefix}--modal-content`]: true,
     [`${prefix}--modal-content--with-form`]: hasForm,
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
-    customClassName
-  });
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable
+  }, customClassName);
   useIsomorphicEffect(() => {
     if (contentRef.current) {
       setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);

package/lib/components/AiSkeleton/AiSkeletonIcon.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+import React from 'react';
+interface AiSkeletonIconProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+    /**
+     * The CSS styles.
+     */
+    style?: React.CSSProperties;
+}
+declare const AiSkeletonIcon: {
+    ({ className, ...rest }: AiSkeletonIconProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The CSS styles.
+         */
+        style: PropTypes.Requireable<object>;
+    };
+};
+export default AiSkeletonIcon;

package/lib/components/AiSkeleton/AiSkeletonPlaceholder.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+export interface AiSkeletonPlaceholderProps {
+    /**
+     * Add a custom class to the component to set the height and width
+     */
+    className?: string;
+}
+declare const AiSkeletonPlaceholder: {
+    ({ className, ...other }: AiSkeletonPlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Add a custom class to the component
+         * to set the height and width
+         */
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default AiSkeletonPlaceholder;

package/lib/components/AiSkeleton/AiSkeletonText.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright IBM Corp. 2016, 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 PropTypes from 'prop-types';
+interface AiSkeletonTextProps {
+    /**
+     * Specify an optional className to be applied to the container node.
+     */
+    className?: string;
+    /**
+     * Generates skeleton text at a larger size.
+     */
+    heading?: boolean;
+    /**
+     * The number of lines shown if paragraph is true.
+     */
+    lineCount?: number;
+    /**
+     * Set this to true to generate multiple lines of text.
+     */
+    paragraph?: boolean;
+    /**
+     * Width (in px or %) of single line of text or max-width of paragraph lines.
+     */
+    width?: string;
+}
+declare const AiSkeletonText: {
+    ({ className, ...rest }: AiSkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * generates skeleton text at a larger size
+         */
+        heading: PropTypes.Requireable<boolean>;
+        /**
+         * the number of lines shown if paragraph is true
+         */
+        lineCount: PropTypes.Requireable<number>;
+        /**
+         * will generate multiple lines of text
+         */
+        paragraph: PropTypes.Requireable<boolean>;
+        /**
+         * width (in px or %) of single line of text or max-width of paragraph lines
+         */
+        width: PropTypes.Requireable<string>;
+    };
+};
+export default AiSkeletonText;

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 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 AiSkeletonPlaceholder from './AiSkeletonPlaceholder';
+import AiSkeletonIcon from './AiSkeletonIcon';
+import AiSkeletonText from './AiSkeletonText';
+export { AiSkeletonText, AiSkeletonIcon, AiSkeletonPlaceholder };

package/lib/components/ChatButton/ChatButton.js

@@ -31,12 +31,14 @@ const ChatButton = /*#__PURE__*/React__default["default"].forwardRef(function Ch
     isQuickAction,
     isSelected,
     kind,
+    renderIcon,
     size,
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"](className, {
     [`${prefix}--chat-btn`]: true,
+    [`${prefix}--chat-btn--with-icon`]: renderIcon,
     [`${prefix}--chat-btn--quick-action`]: isQuickAction,
     [`${prefix}--chat-btn--quick-action--selected`]: isSelected
   });
@@ -53,7 +55,8 @@ const ChatButton = /*#__PURE__*/React__default["default"].forwardRef(function Ch
     className: classNames,
     kind: kind,
     ref: ref,
-    size: size
+    size: size,
+    renderIcon: renderIcon
   }, other), children);
 });
 ChatButton.propTypes = {
@@ -81,6 +84,11 @@ ChatButton.propTypes = {
    * Specify the kind of `ChatButton` you want to create
    */
   kind: PropTypes__default["default"].oneOf(['primary', 'secondary', 'danger', 'ghost', 'tertiary']),
+  /**
+   * Optional prop to specify an icon to be rendered.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Specify the size of the `ChatButton`, from the following list of sizes:
    */

package/lib/components/ComposedModal/ComposedModal.js

@@ -47,9 +47,8 @@ const ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function Mod
   const contentClass = cx__default["default"]({
     [`${prefix}--modal-content`]: true,
     [`${prefix}--modal-content--with-form`]: hasForm,
-    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable,
-    customClassName
-  });
+    [`${prefix}--modal-scroll-content`]: hasScrollingContent || isScrollable
+  }, customClassName);
   useIsomorphicEffect["default"](() => {
     if (contentRef.current) {
       setIsScrollable(contentRef.current.scrollHeight > contentRef.current.clientHeight);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.51.0-rc.0",
+  "version": "1.51.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -51,7 +51,7 @@
     "@carbon/feature-flags": "^0.16.0",
     "@carbon/icons-react": "^11.36.0",
     "@carbon/layout": "^11.20.0",
-    "@carbon/styles": "^1.51.0-rc.0",
+    "@carbon/styles": "^1.51.1",
     "@ibm/telemetry-js": "^1.2.0",
     "classnames": "2.5.1",
     "copy-to-clipboard": "^3.3.1",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.22.3",
     "@babel/preset-typescript": "^7.21.5",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.32.0-rc.0",
+    "@carbon/themes": "^11.32.0",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.0",
@@ -139,5 +139,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "c70f968d388bbf968269066402a741327b00ac1c"
+  "gitHead": "de5bf0cfcece9d4294a6f4569319a219cb6201fa"
 }

package/scss/components/skeleton-styles/_ai-skeleton-styles.scss

@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '@carbon/styles/scss/components/skeleton-styles/ai-skeleton-styles';