@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/Checkbox/Checkbox.js

@@ -70,13 +70,13 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       if (el && indeterminate) {
         el.indeterminate = indeterminate;
       }
-
       if (typeof ref === 'function') {
         ref(el);
       } else if (ref && Object(ref) === ref) {
         ref.current = el;
       }
-    } // readonly attribute not applicable to type="checkbox"
+    }
+    // readonly attribute not applicable to type="checkbox"
     // see - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
     ,
     "aria-readonly": readOnly,
@@ -84,9 +84,8 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       if (readOnly) {
         // prevent default stops the checkbox being updated
         evt.preventDefault();
-      } // pass onClick event on to the user even if readonly
-
-
+      }
+      // pass onClick event on to the user even if readonly
       if (onClick) {
         onClick(evt);
       }
@@ -114,80 +113,65 @@ Checkbox.propTypes = {
    * Specify whether the underlying input should be checked
    */
   checked: PropTypes.bool,
-
   /**
    * Specify an optional className to be applied to the <label> node
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the underlying input should be checked by default
    */
   defaultChecked: PropTypes.bool,
-
   /**
    * Specify whether the Checkbox should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Provide text for the form group for additional help
    */
   helperText: PropTypes.node,
-
   /**
    * Specify whether the label should be hidden, or not
    */
   hideLabel: PropTypes.bool,
-
   /**
    * Provide an `id` to uniquely identify the Checkbox input
    */
   id: PropTypes.string.isRequired,
-
   /**
    * Specify whether the Checkbox is in an indeterminate state
    */
   indeterminate: PropTypes.bool,
-
   /**
    * Specify whether the Checkbox is currently invalid
    */
   invalid: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the Checkbox is in an invalid state
    */
   invalidText: PropTypes.node,
-
   /**
    * Provide a label to provide a description of the Checkbox input that you are
    * exposing to the user
    */
   labelText: PropTypes.node.isRequired,
-
   /**
    * Provide an optional handler that is called when the internal state of
    * Checkbox changes. This handler is called with event and state info.
    * `(event, { checked, id }) => void`
    */
   onChange: PropTypes.func,
-
   /**
    * Specify whether the Checkbox is read-only
    */
   readOnly: PropTypes.bool,
-
   /**
    * Specify a title for the <label> node for the Checkbox
    */
   title: PropTypes.string,
-
   /**
    * Specify whether the Checkbox is currently in warning state
    */
   warn: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the Checkbox is in warning state
    */

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -14,7 +14,6 @@ import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
 
 const getInstanceId = setupGetInstanceId();
-
 function CheckboxGroup(_ref) {
   let {
     children,
@@ -64,54 +63,44 @@ function CheckboxGroup(_ref) {
     className: `${prefix}--form-requirement`
   }, warnText))), showHelper && helper);
 }
-
 CheckboxGroup.propTypes = {
   /**
    * Provide the children form elements to be rendered inside of the <fieldset>
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom className to be applied to the containing <fieldset> node
    */
   className: PropTypes.string,
-
   /**
    * Provide text for the form group for additional help
    */
   helperText: PropTypes.node,
-
   /**
    * Specify whether the form group is currently invalid
    */
   invalid: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the form group is in an invalid state
    */
   invalidText: PropTypes.node,
-
   /**
    * Provide id for the fieldset <legend> which corresponds to the fieldset
    * `aria-labelledby`
    */
   legendId: PropTypes.node,
-
   /**
    * Provide the text to be rendered inside of the fieldset <legend>
    */
   legendText: PropTypes.node.isRequired,
-
   /**
    * Whether the CheckboxGroup should be read-only
    */
   readOnly: PropTypes.bool,
-
   /**
    * Specify whether the form group is currently in warning state
    */
   warn: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the form group is in warning state
    */

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

@@ -0,0 +1,26 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import { PropsWithChildren } from 'react';
+interface ClassPrefixProps {
+    /**
+     *   The value used to prefix the CSS selectors
+     *   used by Carbon components.
+     */
+    prefix: string;
+}
+declare function ClassPrefix({ children, prefix, }: PropsWithChildren<ClassPrefixProps>): JSX.Element;
+declare namespace ClassPrefix {
+    var propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The value used to prefix the CSS selectors used by Carbon components
+         */
+        prefix: PropTypes.Validator<string>;
+    };
+}
+export { ClassPrefix };

package/es/components/ClassPrefix/index.js

@@ -18,10 +18,8 @@ function ClassPrefix(_ref) {
     value: prefix
   }, children);
 }
-
 ClassPrefix.propTypes = {
   children: PropTypes.node,
-
   /**
    * The value used to prefix the CSS selectors used by Carbon components
    */

package/es/components/CodeSnippet/CodeSnippet.Skeleton.js

@@ -12,7 +12,6 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _span, _span2, _span3, _span4;
-
 function CodeSnippetSkeleton(_ref) {
   let {
     className: containerClassName,
@@ -26,7 +25,6 @@ function CodeSnippetSkeleton(_ref) {
     [`${prefix}--snippet--single`]: type === 'single',
     [`${prefix}--snippet--multi`]: type === 'multi'
   });
-
   if (type === 'single') {
     return /*#__PURE__*/React__default.createElement("div", _extends({
       className: className
@@ -34,7 +32,6 @@ function CodeSnippetSkeleton(_ref) {
       className: `${prefix}--snippet-container`
     }, _span || (_span = /*#__PURE__*/React__default.createElement("span", null))));
   }
-
   if (type === 'multi') {
     return /*#__PURE__*/React__default.createElement("div", _extends({
       className: className
@@ -43,13 +40,11 @@ function CodeSnippetSkeleton(_ref) {
     }, _span2 || (_span2 = /*#__PURE__*/React__default.createElement("span", null)), _span3 || (_span3 = /*#__PURE__*/React__default.createElement("span", null)), _span4 || (_span4 = /*#__PURE__*/React__default.createElement("span", null))));
   }
 }
-
 CodeSnippetSkeleton.propTypes = {
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * The type of the code snippet, including single or multi
    */

package/es/components/CodeSnippet/CodeSnippet.js

@@ -24,7 +24,6 @@ const defaultMaxCollapsedNumberOfRows = 15;
 const defaultMaxExpandedNumberOfRows = 0;
 const defaultMinCollapsedNumberOfRows = 3;
 const defaultMinExpandedNumberOfRows = 16;
-
 function CodeSnippet(_ref) {
   let {
     className,
@@ -63,7 +62,6 @@ function CodeSnippet(_ref) {
     if (type === 'single') {
       return codeContainerRef;
     }
-
     if (type === 'multi') {
       return codeContentRef;
     }
@@ -83,10 +81,9 @@ function CodeSnippet(_ref) {
     };
   }, [getCodeRef]);
   const handleScroll = useCallback(() => {
-    if (type === 'inline' || type === 'single' && !(codeContainerRef !== null && codeContainerRef !== void 0 && codeContainerRef.current) || type === 'multi' && !(codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current)) {
+    if (type === 'inline' || type === 'single' && !codeContainerRef?.current || type === 'multi' && !codeContentRef?.current) {
       return;
     }
-
     const {
       horizontalOverflow,
       codeClientWidth,
@@ -99,23 +96,20 @@ function CodeSnippet(_ref) {
   useResizeObserver({
     ref: getCodeRef(),
     onResize: () => {
-      if (codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current && type === 'multi') {
+      if (codeContentRef?.current && type === 'multi') {
         const {
           height
         } = codeContentRef.current.getBoundingClientRect();
-
         if (maxCollapsedNumberOfRows > 0 && (maxExpandedNumberOfRows <= 0 || maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && height > maxCollapsedNumberOfRows * rowHeightInPixels) {
           setShouldShowMoreLessBtn(true);
         } else {
           setShouldShowMoreLessBtn(false);
         }
-
         if (expandedCode && minExpandedNumberOfRows > 0 && height <= minExpandedNumberOfRows * rowHeightInPixels) {
           setExpandedCode(false);
         }
       }
-
-      if (codeContentRef !== null && codeContentRef !== void 0 && codeContentRef.current && type === 'multi' || codeContainerRef !== null && codeContainerRef !== void 0 && codeContainerRef.current && type === 'single') {
+      if (codeContentRef?.current && type === 'multi' || codeContainerRef?.current && type === 'single') {
         handleScroll();
       }
     }
@@ -123,19 +117,14 @@ function CodeSnippet(_ref) {
   useEffect(() => {
     handleScroll();
   }, [handleScroll]);
-
   const handleCopyClick = evt => {
-    if (copyText || innerCodeRef !== null && innerCodeRef !== void 0 && innerCodeRef.current) {
-      var _innerCodeRef$current;
-
-      copy(copyText ?? (innerCodeRef === null || innerCodeRef === void 0 ? void 0 : (_innerCodeRef$current = innerCodeRef.current) === null || _innerCodeRef$current === void 0 ? void 0 : _innerCodeRef$current.innerText));
+    if (copyText || innerCodeRef?.current) {
+      copy(copyText ?? innerCodeRef?.current?.innerText);
     }
-
     if (onClick) {
       onClick(evt);
     }
   };
-
   const codeSnippetClasses = cx(className, `${prefix}--snippet`, {
     [`${prefix}--snippet--${type}`]: type,
     [`${prefix}--snippet--disabled`]: type !== 'inline' && disabled,
@@ -146,7 +135,6 @@ function CodeSnippet(_ref) {
     [`${prefix}--snippet--has-right-overflow`]: type == 'multi' && hasRightOverflow
   });
   const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
-
   if (type === 'inline') {
     if (hideCopyButton) {
       return /*#__PURE__*/React__default.createElement("span", {
@@ -156,7 +144,6 @@ function CodeSnippet(_ref) {
         ref: innerCodeRef
       }, children));
     }
-
     return /*#__PURE__*/React__default.createElement(Copy, _extends({}, rest, {
       onClick: handleCopyClick,
       "aria-label": deprecatedAriaLabel || ariaLabel,
@@ -169,17 +156,13 @@ function CodeSnippet(_ref) {
       ref: innerCodeRef
     }, children));
   }
-
   let containerStyle = {};
-
   if (type === 'multi') {
     const styles = {};
-
     if (expandedCode) {
       if (maxExpandedNumberOfRows > 0) {
         styles.maxHeight = maxExpandedNumberOfRows * rowHeightInPixels;
       }
-
       if (minExpandedNumberOfRows > 0) {
         styles.minHeight = minExpandedNumberOfRows * rowHeightInPixels;
       }
@@ -187,17 +170,14 @@ function CodeSnippet(_ref) {
       if (maxCollapsedNumberOfRows > 0) {
         styles.maxHeight = maxCollapsedNumberOfRows * rowHeightInPixels;
       }
-
       if (minCollapsedNumberOfRows > 0) {
         styles.minHeight = minCollapsedNumberOfRows * rowHeightInPixels;
       }
     }
-
     if (Object.keys(styles).length) {
       containerStyle.style = styles;
     }
   }
-
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: codeSnippetClasses
   }), /*#__PURE__*/React__default.createElement("div", _extends({
@@ -238,111 +218,92 @@ function CodeSnippet(_ref) {
     role: "img"
   })));
 }
-
 CodeSnippet.propTypes = {
   /**
    * Specify a label to be read by screen readers on the containing <textbox>
    * node
    */
   ['aria-label']: PropTypes.string,
-
   /**
    * Deprecated, please use `aria-label` instead.
    * Specify a label to be read by screen readers on the containing <textbox>
    * node
    */
   ariaLabel: deprecate(PropTypes.string, 'This prop syntax has been deprecated. Please use the new `aria-label`.'),
-
   /**
    * Provide the content of your CodeSnippet as a node or string
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
-
   /**
    * Specify the description for the Copy Button
    */
   copyButtonDescription: PropTypes.string,
-
   /**
    * Optional text to copy. If not specified, the `children` node's `innerText`
    * will be used as the copy value.
    */
   copyText: PropTypes.string,
-
   /**
    * Specify whether or not the CodeSnippet should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify the string displayed when the snippet is copied
    */
   feedback: PropTypes.string,
-
   /**
    * Specify the time it takes for the feedback message to timeout
    */
   feedbackTimeout: PropTypes.number,
-
   /**
    * Specify whether or not a copy button should be used/rendered.
    */
   hideCopyButton: PropTypes.bool,
-
   /**
    * Specify whether you are using the light variant of the Code Snippet,
    * typically used for inline snippet to display an alternate color
    */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
 
+  light: deprecate(PropTypes.bool, 'The `light` prop for `CodeSnippet` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
   /**
    * Specify the maximum number of rows to be shown when in collapsed view
    */
   maxCollapsedNumberOfRows: PropTypes.number,
-
   /**
    * Specify the maximum number of rows to be shown when in expanded view
    */
   maxExpandedNumberOfRows: PropTypes.number,
-
   /**
    * Specify the minimum number of rows to be shown when in collapsed view
    */
   minCollapsedNumberOfRows: PropTypes.number,
-
   /**
    * Specify the minimum number of rows to be shown when in expanded view
    */
   minExpandedNumberOfRows: PropTypes.number,
-
   /**
    * An optional handler to listen to the `onClick` even fired by the Copy
    * Button
    */
   onClick: PropTypes.func,
-
   /**
    * Specify a string that is displayed when the Code Snippet has been
    * interacted with to show more lines
    */
   showLessText: PropTypes.string,
-
   /**
    * Specify a string that is displayed when the Code Snippet text is more
    * than 15 lines
    */
   showMoreText: PropTypes.string,
-
   /**
    * Provide the type of Code Snippet
    */
   type: PropTypes.oneOf(['single', 'inline', 'multi']),
-
   /**
    * Specify whether or not to wrap the text.
    */