@carbon/react 1.36.0 → 1.37.0-rc.1

package/es/components/DataTable/TableToolbarSearch.d.ts

@@ -0,0 +1,176 @@
+/**
+ * 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 React, { FocusEvent, ReactNode } from 'react';
+export interface TableToolbarSearchProps {
+    children?: ReactNode;
+    /**
+     * Provide an optional class name for the search container
+     */
+    className?: string;
+    /**
+     * Specifies if the search should initially render in an expanded state
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Provide an optional default value for the Search component
+     */
+    defaultValue?: string;
+    /**
+     * Specifies if the search should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specifies if the search should expand
+     */
+    expanded?: boolean;
+    /**
+     * Provide an optional id for the search container
+     */
+    id?: string;
+    /**
+     * Provide an optional label text for the Search component icon
+     */
+    labelText?: string;
+    /**
+     * Provide an optional function to be called when the search input loses focus, this will be
+     * passed the event as the first parameter and a function to handle the expanding of the search
+     * input as the second
+     */
+    onBlur?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?: (event: '' | Partial<React.ChangeEventHandler<HTMLInputElement>>, value?: string) => void;
+    /**
+     * Optional callback called when the search value is cleared.
+     */
+    onClear?: () => void;
+    /**
+     * Provide an optional hook that is called each time the input is expanded
+     */
+    onExpand?: (event: FocusEvent<HTMLInputElement>, value: boolean) => void;
+    /**
+     * Provide an optional function to be called when the search input gains focus, this will be
+     * passed the event as the first parameter and a function to handle the expanding of the search
+     * input as the second.
+     */
+    onFocus?: (event: FocusEvent<HTMLInputElement>, handleExpand: (event: FocusEvent<HTMLInputElement>, value: boolean) => void) => void;
+    /**
+     * Whether the search should be allowed to expand
+     */
+    persistent?: boolean;
+    /**
+     * Provide an optional placeholder text for the Search component
+     */
+    placeholder?: string;
+    /**
+     * Provide an optional className for the overall container of the Search
+     */
+    searchContainerClass?: string;
+    /**
+     * Specify the size of the Search
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+     */
+    tabIndex?: number | string;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId: (id: string) => string;
+}
+declare const TableToolbarSearch: {
+    ({ className, searchContainerClass, onChange: onChangeProp, onClear, translateWithId: t, placeholder, labelText, expanded: expandedProp, defaultExpanded, defaultValue, disabled, onExpand, persistent, id, onBlur, onFocus, size, tabIndex, ...rest }: TableToolbarSearchProps): JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional class name for the search container
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specifies if the search should initially render in an expanded state
+         */
+        defaultExpanded: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional default value for the Search component
+         */
+        defaultValue: PropTypes.Requireable<string>;
+        /**
+         * Specifies if the search should be disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Specifies if the search should expand
+         */
+        expanded: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional id for the search container
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional label text for the Search component icon
+         */
+        labelText: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function to be called when the search input loses focus, this will be
+         * passed the event as the first parameter and a function to handle the expanding of the search
+         * input as the second
+         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Optional callback called when the search value is cleared.
+         */
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional hook that is called each time the input is expanded
+         */
+        onExpand: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when the search input gains focus, this will be
+         * passed the event as the first parameter and a function to handle the expanding of the search
+         * input as the second.
+         */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Whether the search should be allowed to expand
+         */
+        persistent: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional placeholder text for the Search component
+         */
+        placeholder: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional className for the overall container of the Search
+         */
+        searchContainerClass: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the Search
+         */
+        size: PropTypes.Requireable<string>;
+        /**
+         * Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+         */
+        tabIndex: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        /**
+         * Provide custom text for the component for each translation id
+         */
+        translateWithId: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    defaultProps: {
+        tabIndex: string;
+        translateWithId: (id: string) => string;
+        persistent: boolean;
+        onClear: () => void;
+    };
+};
+export default TableToolbarSearch;

package/es/components/DataTable/TableToolbarSearch.js

@@ -41,6 +41,7 @@ const TableToolbarSearch = _ref => {
     onBlur,
     onFocus,
     size = 'lg',
+    tabIndex,
     ...rest
   } = _ref;
   const {
@@ -54,18 +55,19 @@ const TableToolbarSearch = _ref => {
   const prefix = usePrefix();
   useEffect(() => {
     if (focusTarget) {
-      focusTarget.current.querySelector('input').focus();
+      focusTarget.current?.querySelector?.('input')?.focus();
       setFocusTarget(null);
     }
   }, [focusTarget]);
   useEffect(() => {
     if (defaultValue) {
-      onChangeProp('', defaultValue);
+      onChangeProp?.('', defaultValue);
     }
   },
   //eslint-disable-next-line react-hooks/exhaustive-deps
   []);
   const searchClasses = cx(className, {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     [searchContainerClass]: searchContainerClass,
     [`${prefix}--toolbar-search-container-active`]: expanded,
     [`${prefix}--toolbar-search-container-disabled`]: disabled,
@@ -103,6 +105,10 @@ const TableToolbarSearch = _ref => {
     onFocus: onFocus ? event => onFocus(event, handleExpand) : handleOnFocus,
     onBlur: onBlur ? event => onBlur(event, handleExpand) : handleOnBlur,
     size: size
+    // HTMLAttributes defines tabIndex as number | undefined but in reality it
+    // also accepts a string, so we cast here to convince Typescript this is okay.
+    ,
+    tabIndex: tabIndex
   }, rest));
 };
 TableToolbarSearch.propTypes = {
@@ -190,6 +196,5 @@ TableToolbarSearch.defaultProps = {
   persistent: false,
   onClear: () => {}
 };
-var TableToolbarSearch$1 = TableToolbarSearch;
 
-export { TableToolbarSearch$1 as default };
+export { TableToolbarSearch as default };

package/es/components/Dropdown/Dropdown.d.ts

@@ -71,7 +71,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * given item to a string label. By default, it extracts the `label` field
      * from a given item to serve as the item label in the list.
      */
-    itemToString?(item: ItemType): string;
+    itemToString?(item: ItemType | null): string;
     /**
      * We try to stay as generic as possible here to allow individuals to pass
      * in a collection of whatever kind of data structure they prefer

package/es/components/Dropdown/Dropdown.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useState, useContext, useRef } from 'react';
+import React__default, { useContext, useRef, useState } from 'react';
 import { useSelect } from 'downshift';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -22,11 +22,11 @@ import { ListBoxSize, ListBoxType } from '../ListBox/ListBoxPropTypes.js';
 
 const getInstanceId = setupGetInstanceId();
 const {
-  MenuBlur,
-  MenuKeyDownArrowDown,
-  MenuKeyDownArrowUp,
-  MenuKeyDownEscape,
-  ToggleButtonClick
+  ToggleButtonKeyDownArrowDown,
+  ToggleButtonKeyDownArrowUp,
+  ToggleButtonKeyDownHome,
+  ToggleButtonKeyDownEnd,
+  ItemMouseMove
 } = useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -72,7 +72,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const [highlightedIndex, setHighlightedIndex] = useState();
   const {
     isFluid
   } = useContext(FormContext);
@@ -80,31 +79,43 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     ...downshiftProps,
     items,
     itemToString,
-    highlightedIndex,
     initialSelectedItem,
     onSelectedItemChange,
-    onStateChange
+    stateReducer,
+    isItemDisabled(item, _index) {
+      const isObject = item !== null && typeof item === 'object';
+      return isObject && 'disabled' in item && item.disabled === true;
+    }
   };
   const {
     current: dropdownInstanceId
   } = useRef(getInstanceId());
-  function onStateChange(changes) {
+  function stateReducer(state, actionAndChanges) {
     const {
+      changes,
+      props,
       type
+    } = actionAndChanges;
+    const {
+      highlightedIndex
     } = changes;
     switch (type) {
-      case MenuKeyDownArrowDown:
-      case MenuKeyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case MenuBlur:
-      case MenuKeyDownEscape:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case ToggleButtonClick:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
+      case ToggleButtonKeyDownArrowDown:
+      case ToggleButtonKeyDownArrowUp:
+      case ToggleButtonKeyDownHome:
+      case ToggleButtonKeyDownEnd:
+        if (highlightedIndex > -1) {
+          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+          props.scrollIntoView(itemArray[highlightedIndex]);
+        }
+        return changes;
+      case ItemMouseMove:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
     }
+    return changes;
   }
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
@@ -118,7 +129,8 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     getLabelProps,
     getMenuProps,
     getItemProps,
-    selectedItem
+    selectedItem,
+    highlightedIndex
   } = useSelect(selectProps);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
@@ -162,14 +174,12 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     let {
       selectedItem
     } = _ref2;
-    setIsFocused(false);
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null
       });
     }
   }
-  const menuItemOptionRefs = useRef(items.map(_ => /*#__PURE__*/React__default.createRef()));
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
@@ -200,10 +210,6 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
         setIsTyping(true);
       }
       if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
-        if (evt.code === 'Space') {
-          evt.preventDefault();
-          return;
-        }
         if (currTimer) {
           clearTimeout(currTimer);
         }
@@ -211,7 +217,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
           setIsTyping(false);
         }, 3000));
       }
-      toggleButtonProps.onKeyDown(evt);
+      if (toggleButtonProps.onKeyDown) {
+        toggleButtonProps.onKeyDown(evt);
+      }
     }
   };
   const menuProps = getMenuProps();
@@ -240,16 +248,12 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     type: "button"
     // aria-expanded is already being passed through {...toggleButtonProps}
     ,
-    role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
-    ,
-    "aria-owns": getMenuProps().id,
-    "aria-controls": getMenuProps().id,
     className: `${prefix}--list-box__field`,
     disabled: disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
     "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
-    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : label
+    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : defaultItemToString(label)
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
   }), /*#__PURE__*/React__default.createElement("span", {
@@ -259,11 +263,9 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     translateWithId: translateWithId
   })), /*#__PURE__*/React__default.createElement(ListBox.Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
-    const disabled = isObject && 'disabled' in item && item.disabled === true;
     const itemProps = getItemProps({
       item,
-      index,
-      disabled
+      index
     });
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
@@ -271,9 +273,7 @@ const Dropdown = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index,
       title: title,
-      ref: {
-        menuItemOptionRef: menuItemOptionRefs.current[index]
-      }
+      disabled: itemProps['aria-disabled']
     }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends({
       key: itemProps.id
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(Checkmark, {

package/es/components/FileUploader/FileUploader.Skeleton.d.ts

@@ -13,10 +13,7 @@ export interface FileUploaderSkeletonProps extends ReactAttr<HTMLDivElement> {
      */
     className?: string;
 }
-declare function FileUploaderSkeleton({ className, ...rest }: {
-    [x: string]: any;
-    className: any;
-}): JSX.Element;
+declare function FileUploaderSkeleton({ className, ...rest }: FileUploaderSkeletonProps): JSX.Element;
 declare namespace FileUploaderSkeleton {
     var propTypes: {
         /**

package/es/components/FileUploader/FileUploaderDropContainer.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
+import React from 'react';
 import PropTypes from 'prop-types';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButtonElement>, 'tabIndex'> {
@@ -39,9 +39,10 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
     name?: string;
     /**
      * Event handler that is called after files are added to the uploader
-     * The event handler signature looks like `onAddFiles(evt, { addedFiles })`
      */
-    onAddFiles?: () => void;
+    onAddFiles?: (event: React.SyntheticEvent<HTMLElement>, content: {
+        addedFiles: File[];
+    }) => void;
     /**
      * Provide an optional function to be called when the button element
      * is clicked
@@ -51,6 +52,10 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
      * Provide a custom regex pattern for the acceptedTypes
      */
     pattern?: string;
+    /**
+     * Ref to pass to the inner button element
+     */
+    innerRef?: React.LegacyRef<HTMLButtonElement>;
     /**
      * @deprecated The `role` prop for `FileUploaderButton` has been deprecated since it now renders a button element by default, and has an implicit role of button.
      */
@@ -60,20 +65,7 @@ export interface FileUploaderDropContainerProps extends Omit<ReactAttr<HTMLButto
      */
     tabIndex?: number | string;
 }
-declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: {
-    [x: string]: any;
-    accept: any;
-    className: any;
-    id: any;
-    disabled: any;
-    labelText: any;
-    multiple: any;
-    name: any;
-    onAddFiles: any;
-    onClick: any;
-    pattern: any;
-    innerRef: any;
-}): JSX.Element;
+declare function FileUploaderDropContainer({ accept, className, id, disabled, labelText, multiple, name, onAddFiles, onClick, pattern, innerRef, ...rest }: FileUploaderDropContainerProps): JSX.Element;
 declare namespace FileUploaderDropContainer {
     var propTypes: {
         /**

package/es/components/FileUploader/FileUploaderDropContainer.js

@@ -18,16 +18,16 @@ import { Enter, Space } from '../../internal/keyboard/keys.js';
 
 function FileUploaderDropContainer(_ref) {
   let {
-    accept,
+    accept = [],
     className,
     id,
     disabled,
-    labelText,
-    multiple,
+    labelText = 'Add file',
+    multiple = false,
     name,
-    onAddFiles,
+    onAddFiles = () => {},
     onClick,
-    pattern,
+    pattern = '.[0-9a-z]+$',
     // eslint-disable-next-line react/prop-types
     innerRef,
     ...rest
@@ -40,16 +40,13 @@ function FileUploaderDropContainer(_ref) {
   const [isActive, setActive] = useState(false);
   const dropareaClasses = cx(`${prefix}--file__drop-container`, `${prefix}--file-browse-btn`, {
     [`${prefix}--file__drop-container--drag-over`]: isActive,
-    [`${prefix}--file-browse-btn--disabled`]: disabled,
-    [className]: className
-  });
+    [`${prefix}--file-browse-btn--disabled`]: disabled
+  }, className);
 
   /**
    * Filters the array of added files based on file type restrictions
-   * @param {Event} event - Event object, used to get the list of files added
    */
-  function validateFiles(event) {
-    const transferredFiles = event.type === 'drop' ? [...event.dataTransfer.files] : [...event.target.files];
+  function validateFiles(transferredFiles) {
     if (!accept.length) {
       return transferredFiles;
     }
@@ -60,11 +57,10 @@ function FileUploaderDropContainer(_ref) {
         type: mimeType = ''
       } = curr;
       const fileExtensionRegExp = new RegExp(pattern, 'i');
-      const hasFileExtension = fileExtensionRegExp.test(name);
-      if (!hasFileExtension) {
+      const [fileExtension] = name.match(fileExtensionRegExp) ?? [];
+      if (fileExtension === undefined) {
         return acc;
       }
-      const [fileExtension] = name.match(fileExtensionRegExp);
       if (acceptedTypes.has(mimeType) || acceptedTypes.has(fileExtension.toLowerCase())) {
         return acc.concat([curr]);
       }
@@ -73,7 +69,15 @@ function FileUploaderDropContainer(_ref) {
     }, []);
   }
   function handleChange(event) {
-    const addedFiles = validateFiles(event);
+    const files = [...(event.target.files ?? [])];
+    const addedFiles = validateFiles(files);
+    return onAddFiles(event, {
+      addedFiles
+    });
+  }
+  function handleDrop(event) {
+    const files = [...event.dataTransfer.files];
+    const addedFiles = validateFiles(files);
     return onAddFiles(event, {
       addedFiles
     });
@@ -110,7 +114,7 @@ function FileUploaderDropContainer(_ref) {
         return;
       }
       setActive(false);
-      handleChange(evt);
+      handleDrop(evt);
     }
   }, /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button",
@@ -133,7 +137,7 @@ function FileUploaderDropContainer(_ref) {
     ref: inputRef,
     tabIndex: -1,
     disabled: disabled,
-    accept: accept,
+    accept: accept.join(','),
     name: name,
     multiple: multiple,
     onChange: handleChange,

package/es/components/FileUploader/FileUploaderItem.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/// <reference types="react" />
 import PropTypes from 'prop-types';
+import React from 'react';
 import { ReactAttr } from '../../types/common';
 export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
     /**
@@ -32,7 +32,7 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      * Event handler that is called after removing a file from the file uploader
      * The event handler signature looks like `onDelete(evt, { uuid })`
      */
-    onDelete?: (event: any, opts: {
+    onDelete?: (event: React.SyntheticEvent<HTMLElement>, opts: {
         uuid: string;
     }) => void;
     /**
@@ -49,18 +49,7 @@ export interface FileUploaderItemProps extends ReactAttr<HTMLSpanElement> {
      */
     uuid?: string;
 }
-declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: {
-    [x: string]: any;
-    uuid: any;
-    name: any;
-    status: any;
-    iconDescription: any;
-    onDelete: any;
-    invalid: any;
-    errorSubject: any;
-    errorBody: any;
-    size: any;
-}): JSX.Element;
+declare function FileUploaderItem({ uuid, name, status, iconDescription, onDelete, invalid, errorSubject, errorBody, size, ...other }: FileUploaderItemProps): JSX.Element;
 declare namespace FileUploaderItem {
     var propTypes: {
         /**

package/es/components/FileUploader/FileUploaderItem.js

@@ -19,9 +19,9 @@ function FileUploaderItem(_ref) {
   let {
     uuid,
     name,
-    status,
+    status = 'uploading',
     iconDescription,
-    onDelete,
+    onDelete = () => {},
     invalid,
     errorSubject,
     errorBody,
@@ -34,8 +34,8 @@ function FileUploaderItem(_ref) {
   } = useRef(uuid || uniqueId());
   const classes = cx(`${prefix}--file__selected-file`, {
     [`${prefix}--file__selected-file--invalid`]: invalid,
-    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
-    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
+    [`${prefix}--file__selected-file--md`]: size === 'md',
+    [`${prefix}--file__selected-file--sm`]: size === 'sm'
   });
   return /*#__PURE__*/React__default.createElement("span", _extends({
     className: classes

package/es/components/FormLabel/FormLabel.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 React from 'react';
+export interface FormLabelProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'> {
+    /**
+     * Specify the content of the form label
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom className to be applied to the containing <label> node
+     */
+    className?: string;
+    /**
+     * Provide a unique id for the given <FormLabel>
+     */
+    id?: string;
+}
+declare function FormLabel({ className: customClassName, children, id, ...rest }: FormLabelProps): JSX.Element;
+declare namespace FormLabel {
+    var propTypes: {
+        /**
+         * Specify the content of the form label
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide a custom className to be applied to the containing <label> node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Provide a unique id for the given <FormLabel>
+         */
+        id: PropTypes.Requireable<string>;
+    };
+}
+export default FormLabel;

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

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