@carbon/react 1.28.0-rc.0 → 1.29.0-rc.0

package/es/internal/useEvent.js

@@ -7,6 +7,25 @@
 
 import { useRef, useEffect } from 'react';
 
+function useEvent(elementOrRef, eventName, callback) {
+  const savedCallback = useRef(null);
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+  useEffect(() => {
+    function handler(event) {
+      if (savedCallback.current) {
+        savedCallback.current(event);
+      }
+    }
+
+    const element = elementOrRef.current ?? elementOrRef;
+    element.addEventListener(eventName, handler);
+    return () => {
+      element.removeEventListener(eventName, handler);
+    };
+  }, [elementOrRef, eventName]);
+}
 function useWindowEvent(eventName, callback) {
   const savedCallback = useRef(null);
   useEffect(() => {
@@ -26,4 +45,4 @@ function useWindowEvent(eventName, callback) {
   }, [eventName]);
 }
 
-export { useWindowEvent };
+export { useEvent, useWindowEvent };

package/es/types/common.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type ReactAttr<T = HTMLElement> = React.HTMLAttributes<T>;
+export type ForwardRefProps<T, P = unknown> = React.PropsWithoutRef<React.PropsWithChildren<P>> & React.RefAttributes<T>;
+export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<ForwardRefProps<T, P>>;
+/**
+ * For "as" props.  Creates an "as" property that supports native html tags such as 'span', 'a', 'button' as well as custom functional components
+ * All native props for the supplied html tag/component are inferred as part of the base component props, allowing us to use props like `href` on an 'a' element ect
+ */
+export type PolymorphicProps<Element extends React.ElementType, Props> = Props & Omit<React.ComponentProps<Element>, 'as'> & {
+    as?: Element;
+};

package/lib/components/Checkbox/Checkbox.d.ts

@@ -44,7 +44,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the Checkbox is in an invalid state
      */
-    invalidText: React.ReactNode;
+    invalidText?: React.ReactNode;
     /**
      * Specify whether the Checkbox is currently invalid
      */
@@ -52,7 +52,7 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     /**
      * Provide the text that is displayed when the Checkbox is in an invalid state
      */
-    warnText: React.ReactNode;
+    warnText?: React.ReactNode;
     /**
      * Provide an optional handler that is called when the internal state of
      * Checkbox changes. This handler is called with event and state info.

package/lib/components/ContainedList/ContainedList.js

@@ -23,7 +23,49 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 const variants = ['on-page', 'disclosed'];
 
+function filterChildren(children) {
+  var _children$type;
+
+  if (Array.isArray(children)) {
+    return children === null || children === void 0 ? void 0 : children.filter(child => {
+      var _child$type;
+
+      return !['Search', 'ExpandableSearch'].includes(child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName);
+    });
+  }
+
+  if (children && !['Search', 'ExpandableSearch'].includes(children === null || children === void 0 ? void 0 : (_children$type = children.type) === null || _children$type === void 0 ? void 0 : _children$type.displayName)) {
+    return children;
+  }
+
+  return null;
+}
+
+function renderChildren(children) {
+  var _children$type2;
+
+  if (Array.isArray(children)) {
+    children.map((child, index) => {
+      var _child$type2;
+
+      if (index === 0 && ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === 'Search') {
+        return child;
+      }
+
+      return child;
+    });
+  }
+
+  if (children && ((_children$type2 = children.type) === null || _children$type2 === void 0 ? void 0 : _children$type2.displayName) === 'Search') {
+    return children;
+  }
+
+  return children;
+}
+
 function ContainedList(_ref) {
+  var _action$type;
+
   let {
     action,
     children,
@@ -38,6 +80,9 @@ function ContainedList(_ref) {
   const classes = cx__default["default"](`${prefix}--contained-list`, {
     [`${prefix}--contained-list--inset-rulers`]: isInset
   }, `${prefix}--contained-list--${kind}`, `${prefix}--contained-list--${size}`, className);
+  const filteredChildren = filterChildren(children);
+  const isActionSearch = ['Search', 'ExpandableSearch'].includes(action === null || action === void 0 ? void 0 : (_action$type = action.type) === null || _action$type === void 0 ? void 0 : _action$type.displayName);
+  const renderedChildren = renderChildren(children);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classes
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -45,11 +90,11 @@ function ContainedList(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     id: labelId,
     className: `${prefix}--contained-list__label`
-  }, label), action && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--contained-list__action`
-  }, action)), /*#__PURE__*/React__default["default"].createElement("ul", {
+  }, action)), children && /*#__PURE__*/React__default["default"].createElement("ul", {
     "aria-labelledby": labelId
-  }, children));
+  }, isActionSearch ? filteredChildren : renderedChildren));
 }
 
 ContainedList.propTypes = {

package/lib/components/DataTable/DataTable.js

@@ -435,33 +435,34 @@ class DataTable extends React__default["default"].Component {
 
     };
     this.instanceId = getInstanceId();
-  }
+  } // if state needs to be updated then wait for only update after state is finished
 
-  componentDidUpdate(prevProps) {
-    if (prevProps === this.props) {
-      return;
-    }
 
-    const prevRowIds = prevProps.rows.map(row => row.id);
-    const rowIds = this.props.rows.map(row => row.id);
+  shouldComponentUpdate(nextProps) {
+    if (this.props !== nextProps) {
+      const nextRowIds = nextProps.rows.map(row => row.id);
+      const rowIds = this.props.rows.map(row => row.id);
 
-    if (!isEqual__default["default"](prevRowIds, rowIds)) {
-      this.setState(state => getDerivedStateFromProps["default"](this.props, state));
-      return;
-    }
+      if (!isEqual__default["default"](nextRowIds, rowIds)) {
+        this.setState(state => getDerivedStateFromProps["default"](this.props, state));
+        return false;
+      }
 
-    const prevHeaders = prevProps.headers.map(header => header.key);
-    const headers = this.props.headers.map(header => header.key);
+      const nextHeaders = nextProps.headers.map(header => header.key);
+      const headers = this.props.headers.map(header => header.key);
 
-    if (!isEqual__default["default"](prevHeaders, headers)) {
-      this.setState(state => getDerivedStateFromProps["default"](this.props, state));
-      return;
-    }
+      if (!isEqual__default["default"](nextHeaders, headers)) {
+        this.setState(state => getDerivedStateFromProps["default"](this.props, state));
+        return false;
+      }
 
-    if (!isEqual__default["default"](prevProps.rows, this.props.rows)) {
-      this.setState(state => getDerivedStateFromProps["default"](this.props, state));
-      return;
+      if (!isEqual__default["default"](nextProps.rows, this.props.rows)) {
+        this.setState(state => getDerivedStateFromProps["default"](this.props, state));
+        return false;
+      }
     }
+
+    return true;
   }
   /**
    * Get the props associated with the given header. Mostly used for adding in

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

@@ -0,0 +1,30 @@
+/**
+ * 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 HTMLAttributes } from 'react';
+export interface DatePickerSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    range?: boolean;
+}
+declare const DatePickerSkeleton: {
+    ({ range, id, className, ...rest }: DatePickerSkeletonProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the id to add.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the skeleton should be of range date picker.
+         */
+        range: PropTypes.Requireable<boolean>;
+    };
+};
+export default DatePickerSkeleton;
+export { DatePickerSkeleton };

package/lib/components/DatePicker/DatePicker.Skeleton.js

@@ -73,7 +73,6 @@ DatePickerSkeleton.propTypes = {
    */
   range: PropTypes__default["default"].bool
 };
-var DatePickerSkeleton$1 = DatePickerSkeleton;
 
 exports.DatePickerSkeleton = DatePickerSkeleton;
-exports["default"] = DatePickerSkeleton$1;
+exports["default"] = DatePickerSkeleton;

package/lib/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,131 @@
+/**
+ * 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 { ReactNodeLike } from 'prop-types';
+import React, { ChangeEventHandler } from 'react';
+import { ReactAttr } from '../../types/common';
+type ExcludedAttributes = 'value' | 'onChange' | 'locale';
+export type DatePickerTypes = 'simple' | 'single' | 'range';
+export type CalRef = {
+    inline: boolean;
+    disableMobile: boolean;
+    defaultDate: Date;
+    closeOnSelect: (evt: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    mode: 'simple' | 'single' | 'range';
+    allowInput: boolean;
+    dateFormat: string;
+    locale: string;
+    plugins: [];
+    clickOpens: any;
+};
+interface DatePickerProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+    /**
+     * flatpickr prop passthrough. Allows the user to enter a date directly
+     * into the input field
+     */
+    allowInput: boolean | undefined;
+    /**
+     * The DOM element the flatpickr should be inserted into `<body>` by default.
+     */
+    appendTo: object | undefined;
+    /**
+     * The child nodes.
+     */
+    children: React.ReactNode | object;
+    /**
+     * The CSS class names.
+     */
+    className: string | undefined;
+    /**
+     * flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
+     */
+    closeOnSelect: boolean | undefined;
+    /**
+     * The date format.
+     */
+    dateFormat?: string;
+    /**
+     * The type of the date picker:
+     *
+     * * `simple` - Without calendar dropdown.
+     * * `single` - With calendar dropdown and single date.
+     * * `range` - With calendar dropdown and a date range.
+     */
+    datePickerType?: DatePickerTypes;
+    /**
+     * The flatpickr `disable` option that allows a user to disable certain dates.
+     */
+    disable?: string[];
+    /**
+     * The flatpickr `enable` option that allows a user to enable certain dates.
+     */
+    enable?: string[];
+    /**
+     * The flatpickr `inline` option.
+     */
+    inline: boolean | undefined;
+    /**
+     * Specify whether or not the control is invalid (Fluid only)
+     */
+    invalid: boolean | undefined;
+    /**
+     * Provide the text that is displayed when the control is in error state (Fluid Only)
+     */
+    invalidText: ReactNodeLike;
+    /**
+     * `true` to use the light version.
+     */
+    light: boolean;
+    /**
+     *  The language locale used to format the days of the week, months, and numbers. The full list of supported locales can be found here https://github.com/flatpickr/flatpickr/tree/master/src/l10n
+     */
+    locale?: string | any | 'ar' | 'at' | 'az' | 'be' | 'bg' | 'bn' | 'bs' | 'cat' | 'cs' | 'cy' | 'da' | 'de' | 'en' | 'eo' | 'es' | 'et' | 'fa' | 'fi' | 'fo' | 'fr' | 'ga' | 'gr' | 'he' | 'hi' | 'hr' | 'hu' | 'id' | 'is' | 'it' | 'ja' | 'ka' | 'km' | 'ko' | 'kz' | 'lt' | 'lv' | 'mk' | 'mn' | 'ms' | 'my' | 'nl' | 'no' | 'pa' | 'pl' | 'pt' | 'ro' | 'ru' | 'si' | 'sk' | 'sl' | 'sq' | 'sr' | 'sv' | 'th' | 'tr' | 'uk' | 'uz' | 'uz_latn' | 'vn' | 'zh_tw' | 'zh' | undefined;
+    /**
+     * The maximum date that a user can pick to.
+     */
+    maxDate?: string;
+    /**
+     * The minimum date that a user can start picking from.
+     */
+    minDate?: string;
+    /**
+     * The `change` event handler.
+     */
+    onChange?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * The `close` event handler.
+     */
+    onClose?: any;
+    /**
+     * The `open` event handler.
+     */
+    onOpen?: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * whether the DatePicker is to be readOnly
+     * if boolean applies to all inputs
+     * if array applies to each input in order
+     */
+    readOnly?: boolean | [] | any | undefined;
+    /**
+     * `true` to use the short version.
+     */
+    short?: boolean;
+    /**
+     * The value of the date value provided to flatpickr, could
+     * be a date, a date number, a date string, an array of dates.
+     */
+    value?: string | number | (string | number | object)[] | object | undefined;
+    /**
+     * Specify whether the control is currently in warning state (Fluid only)
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state (Fluid only)
+     */
+    warnText: ReactNodeLike;
+}
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePicker;

package/lib/components/DatePicker/DatePicker.js

@@ -36,6 +36,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
 var l10n__default = /*#__PURE__*/_interopDefaultLegacy(l10n);
 
+// Weekdays shorthand for english locale
 l10n__default["default"].en.weekdays.shorthand.forEach((_day, index) => {
   const currentDay = l10n__default["default"].en.weekdays.shorthand;
 
@@ -195,26 +196,29 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       setHasInput(true);
     }
   }, []);
-  const endInputField = React.useRef(null);
   const lastStartValue = React.useRef(''); // fix datepicker deleting the selectedDate when the calendar closes
 
   const onCalendarClose = (selectedDates, dateStr) => {
     setTimeout(() => {
       if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
+        var _endInputField$curren;
+
         startInputField.current.value = lastStartValue.current;
-        calendarRef.current.setDate([startInputField.current.value, endInputField.current.value], true, calendarRef.current.config.dateFormat);
+        calendarRef.current.setDate([startInputField.current.value, endInputField === null || endInputField === void 0 ? void 0 : (_endInputField$curren = endInputField.current) === null || _endInputField$curren === void 0 ? void 0 : _endInputField$curren.value], true, calendarRef.current.config.dateFormat);
       }
 
       if (onClose) {
         onClose(calendarRef.current.selectedDates, dateStr, calendarRef.current);
       }
     });
-  };
+  }; //const savedOnOpen = useSavedCallback(onOpen);
+
 
+  const endInputField = React.useRef(null);
   const calendarRef = React.useRef(null);
-  const savedOnChange = useSavedCallback.useSavedCallback(onChange);
+  const savedOnChange = useSavedCallback.useSavedCallback(() => onChange);
   const savedOnClose = useSavedCallback.useSavedCallback(datePickerType === 'range' ? onCalendarClose : onClose);
-  const savedOnOpen = useSavedCallback.useSavedCallback(onOpen);
+  const savedOnOpen = useSavedCallback.useSavedCallback(() => onOpen);
   const datePickerClasses = cx__default["default"](`${prefix}--date-picker`, {
     [`${prefix}--date-picker--short`]: short,
     [`${prefix}--date-picker--light`]: light,
@@ -224,7 +228,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     [`${prefix}--date-picker--nolabel`]: datePickerType === 'range' && isLabelTextEmpty(children)
   });
   const wrapperClasses = cx__default["default"](`${prefix}--form-item`, {
-    [className]: className
+    [String(className)]: className
   });
   const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => {
     if (index === 0 && child.type === React__default["default"].createElement(DatePickerInput["default"], child.props).type) {
@@ -280,7 +284,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     // is provided, we return the default empty disabled array, allowing all dates.
 
 
-    let enableOrDisable = enable ? 'enable' : 'disable';
+    const enableOrDisable = enable ? 'enable' : 'disable';
     let enableOrDisableArr;
 
     if (!enable && !disable) {
@@ -294,7 +298,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     let localeData;
 
     if (typeof locale === 'object') {
-      let location = locale.locale ? locale.locale : 'en';
+      const location = locale.locale ? locale.locale : 'en';
       localeData = { ...l10n__default["default"][location],
         ...locale
       };
@@ -308,7 +312,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     const {
       current: end
     } = endInputField;
-    const calendar = new flatpickr__default["default"](start, {
+    const flatpickerconfig = {
       inline: inline ?? false,
       disableMobile: true,
       defaultDate: value,
@@ -352,7 +356,8 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
         savedOnOpen(...arguments);
       },
       onValueUpdate: onHook
-    });
+    };
+    const calendar = flatpickr__default["default"](start, flatpickerconfig);
     calendarRef.current = calendar;
 
     function handleArrowDown(event) {
@@ -740,6 +745,5 @@ DatePicker.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var DatePicker$1 = DatePicker;
 
-exports["default"] = DatePicker$1;
+exports["default"] = DatePicker;

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

@@ -0,0 +1,10 @@
+/**
+ * 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 DatePicker from './DatePicker';
+export { default as DatePickerSkeleton, type DatePickerSkeletonProps, } from './DatePicker.Skeleton';
+export default DatePicker;
+export { DatePicker };

package/lib/components/DatePicker/index.js

@@ -10,8 +10,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DatePicker = require('./DatePicker.js');
+var DatePicker_Skeleton = require('./DatePicker.Skeleton.js');
 
 
 
 exports.DatePicker = DatePicker["default"];
 exports["default"] = DatePicker["default"];
+exports.DatePickerSkeleton = DatePicker_Skeleton["default"];

package/lib/components/DatePickerInput/DatePickerInput.d.ts

@@ -0,0 +1,93 @@
+/**
+ * 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 { ReactElementLike, ReactNodeArray } from 'prop-types';
+import React from 'react';
+import { ReactAttr } from '../../types/common';
+type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
+export type ReactNodeLike = ReactElementLike | ReactNodeArray | string | number | boolean | null | undefined;
+export type func = (...args: any[]) => any;
+interface DatePickerInputProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+    /**
+     * The type of the date picker:
+     *
+     * * `simple` - Without calendar dropdown.
+     * * `single` - With calendar dropdown and single date.
+     * * `range` - With calendar dropdown and a date range.
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+    /**
+     * Specify whether or not the input should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNodeLike;
+    /**
+     * Specify if the label should be hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify an id that uniquely identifies the `<input>`
+     */
+    id: string;
+    /**
+     * Specify whether or not the input should be invalid
+     */
+    invalid?: boolean;
+    /**
+     * Specify the text to be rendered when the input is invalid
+     */
+    invalidText: ReactNodeLike;
+    /**
+     * Provide the text that will be read by a screen reader when visiting this
+     * control
+     */
+    labelText: ReactNodeLike;
+    /**
+     * Specify an `onChange` handler that is called whenever a change in the
+     * input field has occurred
+     */
+    onChange?: func;
+    /**
+     * Provide a function to be called when the input field is clicked
+     */
+    onClick?: func;
+    /**
+     * Provide a regular expression that the input value must match
+     * TODO:need to be rewritten
+     */
+    pattern: (props: {
+        [key: string]: any;
+    }, propName: string, componentName: string) => null | any | Error;
+    /**
+     * Specify the placeholder text
+     */
+    placeholder?: string;
+    /**
+     * whether the DatePicker is to be readOnly
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify the type of the `<input>`
+     */
+    type?: string;
+    /**
+     * 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?: ReactNodeLike;
+}
+declare const DatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePickerInput;

package/lib/components/ExpandableSearch/ExpandableSearch.d.ts

@@ -9,5 +9,6 @@ import { type SearchProps } from '../Search';
 declare function ExpandableSearch({ onBlur, onChange, onExpand, onFocus, ...props }: SearchProps): JSX.Element;
 declare namespace ExpandableSearch {
     var propTypes: React.WeakValidationMap<SearchProps & React.RefAttributes<HTMLInputElement>> | undefined;
+    var displayName: string;
 }
 export default ExpandableSearch;

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -73,5 +73,6 @@ function ExpandableSearch(_ref) {
 }
 
 ExpandableSearch.propTypes = Search["default"].propTypes;
+ExpandableSearch.displayName = 'ExpandableSearch';
 
 exports["default"] = ExpandableSearch;

package/lib/components/FluidDatePicker/FluidDatePicker.js

@@ -14,6 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var DatePicker = require('../DatePicker/DatePicker.js');
+require('../DatePicker/DatePicker.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FormContext = require('../FluidForm/FormContext.js');
 

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

@@ -0,0 +1,51 @@
+/**
+ * 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 ElementType } from 'react';
+import type { PolymorphicProps } from '../../types/common';
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type SectionBaseProps = {
+    level?: HeadingLevel;
+};
+type SectionProps<E extends ElementType> = PolymorphicProps<E, SectionBaseProps>;
+export declare function Section<E extends ElementType = 'section'>({ as: BaseComponent, level: levelOverride, ...rest }: SectionProps<E>): JSX.Element;
+export declare namespace Section {
+    var propTypes: {
+        /**
+         * Provide an alternative tag or component to use instead of the default
+         * <section> element
+         */
+        as: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        /**
+         * Specify the content that will be placed in the component
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify a class name for the outermost node of the component
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Overrides the level of the section
+         */
+        level: PropTypes.Requireable<number>;
+    };
+}
+type HeadingProps = JSX.IntrinsicElements[`h${HeadingLevel}`];
+export declare function Heading(props: HeadingProps): JSX.Element;
+export declare namespace Heading {
+    var propTypes: {
+        /**
+         * Specify the content that will be placed in the component
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Specify a class name for the outermost node of the component
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export {};