@carbon/react 1.110.0 → 1.111.0-rc.0

package/es/components/DataTable/TableSelectRow.js

@@ -10,8 +10,8 @@ import { useId } from "../../internal/useId.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import InlineCheckbox_default from "../InlineCheckbox/index.js";
 import RadioButton_default from "../RadioButton/index.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableSelectRow.tsx
@@ -57,15 +57,46 @@ const TableSelectRow = ({ ariaLabel: deprecatedAriaLabel, ["aria-label"]: ariaLa
 	});
 };
 TableSelectRow.propTypes = {
+	/**
+	* Specify the aria label for the underlying input control
+	*/
 	["aria-label"]: PropTypes.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify the aria label for the underlying input control
+	*/
 	ariaLabel: deprecate(PropTypes.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	/**
+	* Specify whether this row is selected, or not
+	*/
 	checked: PropTypes.bool,
+	/**
+	* The CSS class names of the cell that wraps the underlying input control
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether the control is disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide an `id` for the underlying input control
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Provide a `name` for the underlying input control
+	*/
 	name: PropTypes.string.isRequired,
+	/**
+	* Provide an optional hook that is called each time the input is updated
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide a handler to listen to when a user initiates a selection request
+	*/
 	onSelect: PropTypes.func.isRequired,
+	/**
+	* Specify whether the control should be a radio button or inline checkbox
+	*/
 	radio: PropTypes.bool
 };
 //#endregion

package/es/components/DataTable/TableSlugRow.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecateComponent } from "../../prop-types/deprecateComponent.js";
-import { cloneElement, isValidElement, useEffect } from "react";
 import classNames from "classnames";
+import { cloneElement, isValidElement, useEffect } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableSlugRow.tsx
@@ -34,7 +34,13 @@ const TableSlugRow = ({ className, slug }) => {
 };
 TableSlugRow.displayName = "TableSlugRow";
 TableSlugRow.propTypes = {
+	/**
+	* The CSS class names of the cell that wraps the underlying input control
+	*/
 	className: PropTypes.string,
+	/**
+	* Provide a `Slug` component to be rendered inside the `TableSlugRow` component
+	*/
 	slug: PropTypes.node
 };
 //#endregion

package/es/components/DataTable/TableToolbar.js

@@ -7,8 +7,8 @@
 
 import { usePrefix } from "../../internal/usePrefix.js";
 import { deprecate } from "../../prop-types/deprecate.js";
-import { createContext, useContext } from "react";
 import classNames from "classnames";
+import { createContext, useContext } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableToolbar.tsx
@@ -39,9 +39,24 @@ const TableToolbar = ({ ["aria-label"]: ariaLabel = "data table toolbar", ariaLa
 	});
 };
 TableToolbar.propTypes = {
+	/**
+	* 'aria-label' of the TableToolbar component.
+	* Specify a label to be read by screen readers on the container node
+	*/
 	["aria-label"]: PropTypes.string,
+	/**
+	* Deprecated, please use `aria-label` instead.
+	* Specify a label to be read by screen readers on the container node.
+	* 'aria-label' of the TableToolbar component.
+	*/
 	ariaLabel: deprecate(PropTypes.string, "This prop syntax has been deprecated. Please use the new `aria-label`."),
+	/**
+	* Pass in the children that will be rendered inside the TableToolbar
+	*/
 	children: PropTypes.node,
+	/**
+	* `lg` Change the row height of table
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",

package/es/components/DataTable/TableToolbarMenu.js

@@ -8,8 +8,8 @@
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useTableToolbar } from "./TableToolbar.js";
 import OverflowMenu from "../OverflowMenu/index.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 import { Settings } from "@carbon/icons-react";
@@ -38,10 +38,25 @@ const TableToolbarMenu = ({ className, renderIcon = Settings, iconDescription =
 };
 TableToolbarMenu.propTypes = {
 	children: PropTypes.node.isRequired,
+	/**
+	* Provide an optional class name for the toolbar menu
+	*/
 	className: PropTypes.string,
+	/**
+	* The description of the menu icon.
+	*/
 	iconDescription: PropTypes.string,
+	/**
+	* Provide an optional class name for the toolbar menu
+	*/
 	menuOptionsClass: PropTypes.string,
+	/**
+	* A component used to render an icon.
+	*/
 	renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+	/**
+	* Specify the size of the ToolbarMenu.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",

package/es/components/DataTable/TableToolbarSearch.js

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { noopFn } from "../../internal/noopFn.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { useId } from "../../internal/useId.js";
+import { noopFn } from "../../internal/noopFn.js";
 import Search_default from "../Search/index.js";
 import { useTableToolbar } from "./TableToolbar.js";
-import { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
+import { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/DataTable/TableToolbarSearch.tsx
@@ -87,28 +87,86 @@ const TableToolbarSearch = ({ className, searchContainerClass, onChange: onChang
 };
 TableToolbarSearch.propTypes = {
 	children: PropTypes.node,
+	/**
+	* Provide an optional class name for the search container
+	*/
 	className: PropTypes.string,
+	/**
+	* Specifies if the search should initially render in an expanded state
+	*/
 	defaultExpanded: PropTypes.bool,
+	/**
+	* Provide an optional default value for the Search component
+	*/
 	defaultValue: PropTypes.string,
+	/**
+	* Specifies if the search should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specifies if the search should expand
+	*/
 	expanded: PropTypes.bool,
+	/**
+	* Provide an optional id for the search container
+	*/
 	id: PropTypes.string,
+	/**
+	* Provide an optional label text for the Search component icon
+	*/
 	labelText: PropTypes.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.func,
+	/**
+	* Provide an optional hook that is called each time the input is updated
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Optional callback called when the search value is cleared.
+	*/
 	onClear: PropTypes.func,
+	/**
+	* Provide an optional hook that is called each time the input is expanded
+	*/
 	onExpand: PropTypes.func,
+	/**
+	* 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.func,
+	/**
+	* Whether the search should be allowed to expand
+	*/
 	persistent: PropTypes.bool,
+	/**
+	* Provide an optional placeholder text for the Search component
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* Provide an optional className for the overall container of the Search
+	*/
 	searchContainerClass: PropTypes.string,
+	/**
+	* Specify the size of the Search
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
 		"md",
 		"lg"
 	]),
+	/**
+	* Optional prop to specify the tabIndex of the <Search> (in expanded state) or the container (in collapsed state)
+	*/
 	tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	/**
+	* Translates component strings using your i18n tool.
+	*/
 	translateWithId: PropTypes.func
 };
 //#endregion

package/es/components/DataTableSkeleton/DataTableSkeleton.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DataTableSkeleton/DataTableSkeleton.tsx
@@ -56,12 +56,33 @@ const DataTableSkeleton = ({ headers, rowCount = 5, columnCount = 5, zebra = fal
 	});
 };
 DataTableSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify the number of columns that you want to render in the skeleton state
+	*/
 	columnCount: PropTypes.number,
+	/**
+	* Optionally specify the displayed headers
+	*/
 	headers: PropTypes.arrayOf(PropTypes.shape({ header: PropTypes.node.isRequired }).isRequired),
+	/**
+	* Specify the number of rows that you want to render in the skeleton state
+	*/
 	rowCount: PropTypes.number,
+	/**
+	* Specify if the table header should be rendered as part of the skeleton.
+	*/
 	showHeader: PropTypes.bool,
+	/**
+	* Specify if the table toolbar should be rendered as part of the skeleton.
+	*/
 	showToolbar: PropTypes.bool,
+	/**
+	* Changes the row height of table.
+	*/
 	size: PropTypes.oneOf([
 		"xs",
 		"sm",
@@ -69,6 +90,9 @@ DataTableSkeleton.propTypes = {
 		"lg",
 		"xl"
 	]),
+	/**
+	* Optionally specify whether you want the DataTable to be zebra striped
+	*/
 	zebra: PropTypes.bool
 };
 //#endregion

package/es/components/DatePicker/DatePicker.Skeleton.js

@@ -6,8 +6,8 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
-import "react";
 import classNames from "classnames";
+import "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/DatePicker/DatePicker.Skeleton.tsx
@@ -44,9 +44,21 @@ const DatePickerSkeleton = ({ range, id, hideLabel, className, ...rest }) => {
 	});
 };
 DatePickerSkeleton.propTypes = {
+	/**
+	* Specify an optional className to add.
+	*/
 	className: PropTypes.string,
+	/**
+	* Specify whether to hide the label.
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Specify the id to add.
+	*/
 	id: PropTypes.string,
+	/**
+	* Specify whether to render the range skeleton variant.
+	*/
 	range: PropTypes.bool
 };
 //#endregion

package/es/components/DatePicker/DatePicker.js

@@ -17,8 +17,8 @@ import { isEmptyDateValue } from "./utils.js";
 import { rangePlugin } from "./plugins/rangePlugin.js";
 import { useSavedCallback } from "../../internal/useSavedCallback.js";
 import { SUPPORTED_LOCALES } from "./DatePickerLocales.js";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import classNames from "classnames";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import flatpickr from "flatpickr";
@@ -446,31 +446,110 @@ const DatePicker = forwardRef((props, ref) => {
 	});
 });
 DatePicker.propTypes = {
+	/**
+	* Flatpickr prop passthrough enables direct date input, and when set to
+	* false, we must clear dates manually by resetting the value prop to an empty
+	* value (such as `""`, `null`, or `undefined`) or an array of all empty
+	* values, making it a controlled input.
+	*/
 	allowInput: PropTypes.bool,
+	/**
+	* The DOM element the Flatpicker should be inserted into. `<body>` by default.
+	*/
 	appendTo: PropTypes.object,
+	/**
+	* The child nodes.
+	*/
 	children: PropTypes.node,
+	/**
+	* The CSS class names.
+	*/
 	className: PropTypes.string,
+	/**
+	* flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
+	*/
 	closeOnSelect: PropTypes.bool,
+	/**
+	* The date format.
+	*/
 	dateFormat: PropTypes.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: PropTypes.oneOf([
 		"simple",
 		"single",
 		"range"
 	]),
+	/**
+	* The flatpickr `disable` option that allows a user to disable certain dates.
+	*/
 	disable: PropTypes.array,
+	/**
+	* The flatpickr `enable` option that allows a user to enable certain dates.
+	*/
 	enable: PropTypes.array,
+	/**
+	* The flatpickr `inline` option.
+	*/
 	inline: PropTypes.bool,
+	/**
+	* Specify whether or not the control is invalid (Fluid only)
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* `true` to use the light version.
+	*/
 	light: deprecate(PropTypes.bool, "The `light` prop for `DatePicker` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	/**
+	*  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: PropTypes.oneOfType([PropTypes.object, PropTypes.oneOf(SUPPORTED_LOCALES)]),
+	/**
+	* The maximum date that a user can pick to.
+	*/
 	maxDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* The minimum date that a user can start picking from.
+	*/
 	minDate: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	/**
+	* The `change` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onChange: PropTypes.func,
+	/**
+	* The `close` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onClose: PropTypes.func,
+	/**
+	* The `open` event handler.
+	* `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
+	*/
 	onOpen: PropTypes.func,
+	/**
+	* flatpickr prop passthrough. Controls how dates are parsed.
+	*/
 	parseDate: PropTypes.func,
+	/**
+	* whether the DatePicker is to be readOnly
+	* if boolean applies to all inputs
+	* if array applies to each input in order
+	*/
 	readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
+	/**
+	* `true` to use the short version.
+	*/
 	short: PropTypes.bool,
+	/**
+	* The value of the date value provided to flatpickr, could
+	* be a date, a date number, a date string, an array of dates.
+	*/
 	value: PropTypes.oneOfType([
 		PropTypes.string,
 		PropTypes.arrayOf(PropTypes.oneOfType([
@@ -481,8 +560,17 @@ DatePicker.propTypes = {
 		PropTypes.object,
 		PropTypes.number
 	]),
+	/**
+	* Specify whether the control is currently in warning state (Fluid only)
+	*/
 	warn: PropTypes.bool,
+	/**
+	* Accessible aria-label for the "next month" arrow icon.
+	*/
 	nextMonthAriaLabel: PropTypes.string,
+	/**
+	* Accessible aria-label for the "previous month" arrow icon.
+	*/
 	prevMonthAriaLabel: PropTypes.string
 };
 //#endregion

package/es/components/DatePickerInput/DatePickerInput.js

@@ -5,17 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { warning } from "../../internal/warning.js";
 import { usePrefix } from "../../internal/usePrefix.js";
 import { Text } from "../Text/Text.js";
 import { useId } from "../../internal/useId.js";
+import { warning } from "../../internal/warning.js";
 import { deprecate } from "../../prop-types/deprecate.js";
 import { isComponentElement } from "../../internal/utils.js";
 import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
 import { AILabel } from "../AILabel/index.js";
 import { FormContext } from "../FluidForm/FormContext.js";
-import { cloneElement, forwardRef, useContext } from "react";
 import classNames from "classnames";
+import { cloneElement, forwardRef, useContext } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Calendar, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
@@ -136,32 +136,92 @@ const DatePickerInput = forwardRef((props, ref) => {
 	});
 });
 DatePickerInput.propTypes = {
+	/**
+	* 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: PropTypes.oneOf([
 		"simple",
 		"single",
 		"range"
 	]),
+	/**
+	* **Experimental**: Provide a decorator component to be rendered inside the `RadioButton` component
+	*/
 	decorator: PropTypes.node,
+	/**
+	* Specify whether or not the input should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Provide text that is used alongside the control label for additional help
+	*/
 	helperText: PropTypes.node,
+	/**
+	* Specify if the label should be hidden
+	*/
 	hideLabel: PropTypes.bool,
+	/**
+	* Specify an id that uniquely identifies the `<input>`
+	*/
 	id: PropTypes.string.isRequired,
+	/**
+	* Specify whether or not the input should be invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Specify the text to be rendered when the input is invalid
+	*/
 	invalidText: PropTypes.node,
+	/**
+	* Provide the text that will be read by a screen reader when visiting this
+	* control
+	*/
 	labelText: PropTypes.node.isRequired,
+	/**
+	* Specify an `onChange` handler that is called whenever a change in the
+	* input field has occurred
+	*/
 	onChange: PropTypes.func,
+	/**
+	* Provide a function to be called when the input field is clicked
+	*/
 	onClick: PropTypes.func,
+	/**
+	* Provide a regular expression pattern string that the input value must match
+	*/
 	pattern: PropTypes.string,
+	/**
+	* Specify the placeholder text
+	*/
 	placeholder: PropTypes.string,
+	/**
+	* whether the DatePicker is to be readOnly
+	*/
 	readOnly: PropTypes.bool,
+	/**
+	* Specify the size of the Date Picker Input. Currently supports either `sm`, `md`, or `lg` as an option.
+	*/
 	size: PropTypes.oneOf([
 		"sm",
 		"md",
 		"lg"
 	]),
 	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	/**
+	* Specify the type of the `<input>`
+	*/
 	type: PropTypes.string,
+	/**
+	* 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
+	*/
 	warnText: PropTypes.node
 };
 function DatePickerIcon({ datePickerType, invalid, warn, disabled, readOnly }) {
@@ -184,14 +244,33 @@ function DatePickerIcon({ datePickerType, invalid, warn, disabled, readOnly }) {
 	});
 }
 DatePickerIcon.propTypes = {
+	/**
+	* 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: PropTypes.oneOf([
 		"simple",
 		"single",
 		"range"
 	]),
+	/**
+	* Specify whether or not the input should be invalid
+	*/
 	invalid: PropTypes.bool,
+	/**
+	* Specify whether the control is currently in warning state
+	*/
 	warn: PropTypes.bool,
+	/**
+	* Specify whether or not the input should be disabled
+	*/
 	disabled: PropTypes.bool,
+	/**
+	* Specify whether the input is readonly
+	*/
 	readOnly: PropTypes.bool
 };
 //#endregion