@carbon/react 1.29.0 → 1.30.0-rc.0

package/es/components/FluidTimePicker/FluidTimePicker.js

@@ -27,22 +27,19 @@ const FluidTimePicker = /*#__PURE__*/React__default.forwardRef(function FluidTim
   const prefix = usePrefix();
   const classNames = cx(className, {
     [`${prefix}--time-picker--fluid`]: true,
-    [`${prefix}--time-picker--equal-width`]: (children === null || children === void 0 ? void 0 : children.length) !== 2,
+    [`${prefix}--time-picker--equal-width`]: children?.length !== 2,
     [`${prefix}--time-picker--fluid--disabled`]: disabled,
     [`${prefix}--time-picker--fluid--invalid`]: invalid,
     [`${prefix}--time-picker--fluid--warning`]: warn
   });
-
   const errorText = () => {
     if (invalid) {
       return invalidText;
     }
-
     if (warn) {
       return warnText;
     }
   };
-
   const error = invalid || warn;
   return /*#__PURE__*/React__default.createElement("div", {
     className: classNames
@@ -72,38 +69,31 @@ FluidTimePicker.propTypes = {
    * The child node(s)
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the outer FluidTimePicker wrapper
    */
   className: PropTypes.string,
-
   /**
    * Specify whether the `<input>` should be disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify whether or not the control is invalid
    */
   invalid: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the control is in error state
    */
   invalidText: PropTypes.node,
-
   /**
    * Provide the text that will be read by a screen reader when visiting this
    * control
    */
   labelText: PropTypes.node.isRequired,
-
   /**
    * Specify whether the control is currently in warning state
    */
   warn: PropTypes.bool,
-
   /**
    * Provide the text that is displayed when the control is in warning state
    */

package/es/components/FluidTimePickerSelect/FluidTimePickerSelect.js

@@ -26,33 +26,27 @@ FluidTimePickerSelect.propTypes = {
    * Provide the contents of your Select
    */
   children: PropTypes.node,
-
   /**
    * Specify an optional className to be applied to the node containing the label and the select box
    */
   className: PropTypes.string,
-
   /**
    * Optionally provide the default value of the `<select>`
    */
   defaultValue: PropTypes.any,
-
   /**
    * Specify whether the control is disabled
    */
   disabled: PropTypes.bool,
-
   /**
    * Specify a custom `id` for the `<select>`
    */
   id: PropTypes.string.isRequired,
-
   /**
    * Provide label text to be read by screen readers when interacting with the
    * control
    */
   labelText: PropTypes.node,
-
   /**
    * Provide an optional `onChange` hook that is called each time the value of
    * the underlying `<input>` changes

package/es/components/Form/Form.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 { type ComponentProps } from 'react';
+type FormProps = ComponentProps<'form'>;
+declare function Form({ className, children, ...other }: FormProps): JSX.Element;
+declare namespace Form {
+    var propTypes: {
+        /**
+         * Provide children to be rendered inside of the <form> element
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className to be applied on the containing <form> node
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default Form;

package/es/components/Form/Form.js

@@ -11,7 +11,7 @@ import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-const Form = _ref => {
+function Form(_ref) {
   let {
     className,
     children,
@@ -22,19 +22,16 @@ const Form = _ref => {
   return /*#__PURE__*/React__default.createElement("form", _extends({
     className: classNames
   }, other), children);
-};
-
+}
 Form.propTypes = {
   /**
    * Provide children to be rendered inside of the <form> element
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom className to be applied on the containing <form> node
    */
   className: PropTypes.string
 };
-var Form$1 = Form;
 
-export { Form$1 as default };
+export { Form as default };

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

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export { default, default as Form } from './Form';

package/es/components/FormGroup/FormGroup.js

@@ -37,39 +37,32 @@ const FormGroup = _ref => {
     className: `${prefix}--form__requirements`
   }, messageText) : null);
 };
-
 FormGroup.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,
-
   /**
    * Specify whether the <FormGroup> is invalid
    */
   invalid: PropTypes.bool,
-
   /**
    * 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,
-
   /**
    * Specify whether the message should be displayed in the <FormGroup>
    */
   message: PropTypes.bool,
-
   /**
    * Provide the text for the message in the <FormGroup>
    */

package/es/components/FormItem/FormItem.js

@@ -23,13 +23,11 @@ function FormItem(_ref) {
     className: classNames
   }, rest), children);
 }
-
 FormItem.propTypes = {
   /**
    * Provide content to be rendered in the form item
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom className to be applied to the containing node
    */

package/es/components/FormLabel/FormLabel.js

@@ -10,7 +10,6 @@ import PropTypes from 'prop-types';
 import React__default from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
-import * as FeatureFlags from '@carbon/feature-flags';
 
 function FormLabel(_ref) {
   let {
@@ -20,26 +19,21 @@ function FormLabel(_ref) {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const className = cx(`${prefix}--label`, {
-    [`${prefix}--label--no-margin`]: FeatureFlags.enabled('enable-v11-release')
-  }, customClassName);
+  const className = cx(`${prefix}--label`, `${prefix}--label--no-margin`, customClassName);
   return /*#__PURE__*/React__default.createElement("label", _extends({
     htmlFor: id,
     className: className
   }, rest), children);
 }
-
 FormLabel.propTypes = {
   /**
    * Specify the content of the form label
    */
   children: PropTypes.node,
-
   /**
    * Provide a custom className to be applied to the containing <label> node
    */
   className: PropTypes.string,
-
   /**
    * Provide a unique id for the given <FormLabel>
    */

package/es/components/Grid/CSSGrid.js

@@ -27,13 +27,11 @@ function CSSGrid(_ref) {
     subgrid
   } = useGridSettings();
   let mode = 'wide';
-
   if (narrow) {
     mode = 'narrow';
   } else if (condensed) {
     mode = 'condensed';
   }
-
   if (subgrid) {
     return /*#__PURE__*/React__default.createElement(GridSettings, {
       mode: "css-grid",
@@ -44,14 +42,14 @@ function CSSGrid(_ref) {
       mode: mode
     }, rest), children));
   }
-
   const className = cx(customClassName, {
     [`${prefix}--css-grid`]: true,
     [`${prefix}--css-grid--condensed`]: mode === 'condensed',
     [`${prefix}--css-grid--narrow`]: mode === 'narrow',
     [`${prefix}--css-grid--full-width`]: fullWidth
-  }); // cast as any to let TypeScript allow passing in attributes to base component
+  });
 
+  // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(GridSettings, {
     mode: "css-grid",
@@ -60,41 +58,34 @@ function CSSGrid(_ref) {
     className: className
   }, rest), children));
 }
-
 CSSGrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Pass in content that will be rendered within the `Grid`
    */
   children: PropTypes.node,
-
   /**
    * Specify a custom className to be applied to the `Grid`
    */
   className: PropTypes.string,
-
   /**
    * Collapse the gutter to 1px. Useful for fluid layouts.
    * Rows have 1px of margin between them to match gutter.
    */
   condensed: PropTypes.bool,
-
   /**
    * Remove the default max width that the grid has set
    */
   fullWidth: PropTypes.bool,
-
   /**
    * Container hangs 16px into the gutter. Useful for
    * typographic alignment with and without containers.
    */
   narrow: PropTypes.bool
 };
-
 const Subgrid = _ref2 => {
   let {
     as: BaseComponent = 'div',
@@ -114,23 +105,19 @@ const Subgrid = _ref2 => {
     className: className
   }), children);
 };
-
 Subgrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Pass in content that will be rendered within the `Subgrid`
    */
   children: PropTypes.node,
-
   /**
    * Specify a custom className to be applied to the `Subgrid`
    */
   className: PropTypes.string,
-
   /**
    * Specify the grid mode for the subgrid
    */

package/es/components/Grid/Column.js

@@ -29,7 +29,6 @@ function Column(_ref) {
     mode
   } = useGridSettings();
   const prefix = usePrefix();
-
   if (mode === 'css-grid') {
     return /*#__PURE__*/React__default.createElement(CSSGridColumn, _extends({
       as: BaseComponent,
@@ -41,18 +40,17 @@ function Column(_ref) {
       max: max
     }, rest), children);
   }
-
   const columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
   const className = cx(customClassName, columnClassName, {
     [`${prefix}--col`]: columnClassName.length === 0
-  }); // cast as any to let TypeScript allow passing in attributes to base component
+  });
 
+  // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }
-
 const percentSpanType = PropTypes.oneOf(['25%', '50%', '75%', '100%']);
 const spanPropType = FeatureFlags.enabled('enable-css-grid') ? PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.shape({
   span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
@@ -68,17 +66,14 @@ Column.propTypes = {
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Pass in content that will be rendered within the `Column`
    */
   children: PropTypes.node,
-
   /**
    * Specify a custom className to be applied to the `Column`
    */
   className: PropTypes.string,
-
   /**
    * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
    * This breakpoint supports 16 columns by default.
@@ -86,7 +81,6 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   lg: spanPropType,
-
   /**
    * Specify column span for the `max` breakpoint. This breakpoint supports 16
    * columns by default.
@@ -94,7 +88,6 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   max: spanPropType,
-
   /**
    * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
    * This breakpoint supports 8 columns by default.
@@ -102,7 +95,6 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   md: spanPropType,
-
   /**
    * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
    * This breakpoint supports 4 columns by default.
@@ -110,7 +102,6 @@ Column.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   sm: spanPropType,
-
   /**
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
@@ -119,7 +110,6 @@ Column.propTypes = {
    */
   xlg: spanPropType
 };
-
 function CSSGridColumn(_ref2) {
   let {
     as: BaseComponent = 'div',
@@ -143,23 +133,19 @@ function CSSGridColumn(_ref2) {
     className: className
   }, rest), children);
 }
-
 CSSGridColumn.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Pass in content that will be rendered within the `Column`
    */
   children: PropTypes.node,
-
   /**
    * Specify a custom className to be applied to the `Column`
    */
   className: PropTypes.string,
-
   /**
    * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
    * This breakpoint supports 16 columns by default.
@@ -167,7 +153,6 @@ CSSGridColumn.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   lg: spanPropType,
-
   /**
    * Specify column span for the `max` breakpoint. This breakpoint supports 16
    * columns by default.
@@ -175,7 +160,6 @@ CSSGridColumn.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   max: spanPropType,
-
   /**
    * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
    * This breakpoint supports 8 columns by default.
@@ -183,7 +167,6 @@ CSSGridColumn.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   md: spanPropType,
-
   /**
    * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
    * This breakpoint supports 4 columns by default.
@@ -191,7 +174,6 @@ CSSGridColumn.propTypes = {
    * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
    */
   sm: spanPropType,
-
   /**
    * Specify constant column span, start,  or end values that will not change
    * based on breakpoint
@@ -201,7 +183,6 @@ CSSGridColumn.propTypes = {
     start: PropTypes.number,
     end: PropTypes.number
   })]),
-
   /**
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
@@ -211,6 +192,7 @@ CSSGridColumn.propTypes = {
   xlg: spanPropType
 };
 const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
+
 /**
  * @typedef {object} Breakpoint
  * @property {boolean|number} [span]
@@ -222,39 +204,35 @@ const breakpointNames = ['sm', 'md', 'lg', 'xlg', 'max'];
  * @param {Array<boolean|number|Breakpoint>} breakpoints
  * @returns {string}
  */
-
 function getClassNameForBreakpoints(breakpoints, prefix) {
   const classNames = [];
-
   for (let i = 0; i < breakpoints.length; i++) {
     const breakpoint = breakpoints[i];
-
     if (breakpoint === undefined || breakpoint === null) {
       continue;
     }
+    const name = breakpointNames[i];
 
-    const name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
+    // If our breakpoint is a boolean, the user has specified that the column
     // should be "auto" at this size
-
     if (breakpoint === true) {
       classNames.push(`${prefix}--${name}:col-span-auto`);
       continue;
-    } // If our breakpoint is a string, the user has specified a percent
-    // they'd like this column to span.
-
+    }
 
+    // If our breakpoint is a string, the user has specified a percent
+    // they'd like this column to span.
     if (typeof breakpoint === 'string') {
       classNames.push(`${prefix}--${name}:col-span-${breakpoint.slice(0, -1)}`);
       continue;
-    } // If our breakpoint is a number, the user has specified the number of
-    // columns they'd like this column to span
-
+    }
 
+    // If our breakpoint is a number, the user has specified the number of
+    // columns they'd like this column to span
     if (typeof breakpoint === 'number') {
       classNames.push(`${prefix}--${name}:col-span-${breakpoint}`);
       continue;
     }
-
     if (typeof breakpoint === 'object') {
       const {
         span,
@@ -262,19 +240,15 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
         start,
         end
       } = breakpoint;
-
       if (typeof offset === 'number' && offset > 0) {
         classNames.push(`${prefix}--${name}:col-start-${offset + 1}`);
       }
-
       if (typeof start === 'number') {
         classNames.push(`${prefix}--${name}:col-start-${start}`);
       }
-
       if (typeof end === 'number') {
         classNames.push(`${prefix}--${name}:col-end-${end}`);
       }
-
       if (typeof span === 'number') {
         classNames.push(`${prefix}--${name}:col-span-${span}`);
       } else if (typeof span === 'string') {
@@ -283,71 +257,60 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       }
     }
   }
-
   return classNames.join(' ');
 }
+
 /**
  * Build the appropriate className for the given set of breakpoints.
  * @param {Array<boolean|number|Breakpoint>} breakpoints
  * @returns {string}
  */
-
-
 function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
   const classNames = [];
-
   for (let i = 0; i < breakpoints.length; i++) {
     const breakpoint = breakpoints[i];
-
     if (breakpoint === undefined || breakpoint === null) {
       continue;
     }
+    const name = breakpointNames[i];
 
-    const name = breakpointNames[i]; // If our breakpoint is a boolean, the user has specified that the column
+    // If our breakpoint is a boolean, the user has specified that the column
     // should be "auto" at this size
-
     if (breakpoint === true) {
       classNames.push(`${prefix}--col-${name}`);
       continue;
-    } // If our breakpoint is a number, the user has specified the number of
-    // columns they'd like this column to span
-
+    }
 
+    // If our breakpoint is a number, the user has specified the number of
+    // columns they'd like this column to span
     if (typeof breakpoint === 'number') {
       classNames.push(`${prefix}--col-${name}-${breakpoint}`);
       continue;
     }
-
     if (typeof breakpoint === 'object') {
       const {
         span,
         offset
       } = breakpoint;
-
       if (typeof span === 'number') {
         classNames.push(`${prefix}--col-${name}-${span}`);
       }
-
       if (span === true) {
         classNames.push(`${prefix}--col-${name}`);
       }
-
       if (typeof offset === 'number') {
         classNames.push(`${prefix}--offset-${name}-${offset}`);
       }
     }
   }
-
   return classNames.join(' ');
 }
+
 /**
  * Build the appropriate className for a span value
  */
-
-
 function getClassNameForSpan(value, prefix) {
   const classNames = [];
-
   if (typeof value === 'number' || typeof value === 'string') {
     classNames.push(`${prefix}--col-span-${value}`);
   } else if (typeof value === 'object') {
@@ -356,20 +319,16 @@ function getClassNameForSpan(value, prefix) {
       start,
       end
     } = value;
-
     if (span !== undefined && span !== null) {
       classNames.push(`${prefix}--col-span-${span}`);
     }
-
     if (start !== undefined && start !== null) {
       classNames.push(`${prefix}--col-start-${start}`);
     }
-
     if (end !== undefined && end !== null) {
       classNames.push(`${prefix}--col-end-${end}`);
     }
   }
-
   return classNames.join('');
 }
 

package/es/components/Grid/ColumnHang.js

@@ -23,25 +23,22 @@ function ColumnHang(_ref) {
     ...rest
   } = _ref;
   const prefix = usePrefix();
-  const className = cx(customClassName, `${prefix}--grid-column-hang`); // cast as any to let TypeScript allow passing in attributes to base component
-
+  const className = cx(customClassName, `${prefix}--grid-column-hang`);
+  // cast as any to let TypeScript allow passing in attributes to base component
   const BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className
   }), children);
 }
-
 ColumnHang.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-
   /**
    * Pass in content that will be rendered within the `Grid`
    */
   children: PropTypes.node,
-
   /**
    * Specify a custom className to be applied to the `Grid`
    */