@carbon/react 1.44.0-rc.0 → 1.44.0

package/es/components/Accordion/AccordionItem.d.ts

@@ -47,7 +47,7 @@ interface AccordionItemProps {
      * The callback function to run on the `onAnimationEnd`
      * event for the list item.
      */
-    handleAnimationEnd?: AnimationEventHandler<HTMLLIElement>;
+    handleAnimationEnd?: AnimationEventHandler<HTMLElement>;
 }
 interface AccordionToggleProps {
     'aria-controls'?: AriaAttributes['aria-controls'];

package/es/components/Accordion/AccordionItem.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ChevronRight } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React__default, { useState, useContext } from 'react';
+import React__default, { useState, useContext, useRef } from 'react';
 import '../Text/index.js';
 import { useId } from '../../internal/useId.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -37,8 +37,6 @@ function AccordionItem(_ref) {
     ...rest
   } = _ref;
   const [isOpen, setIsOpen] = useState(open);
-  const [prevIsOpen, setPrevIsOpen] = useState(open);
-  const [animation, setAnimation] = useState('');
   const accordionState = useContext(AccordionContext);
   const disabledIsControlled = typeof controlledDisabled === 'boolean';
   const disabled = disabledIsControlled ? controlledDisabled : accordionState.disabled;
@@ -47,23 +45,28 @@ function AccordionItem(_ref) {
   const className = cx({
     [`${prefix}--accordion__item`]: true,
     [`${prefix}--accordion__item--active`]: isOpen,
-    [`${prefix}--accordion__item--${animation}`]: animation,
     [`${prefix}--accordion__item--disabled`]: disabled,
     [customClassName]: !!customClassName
   });
   const Toggle = renderToggle || renderExpando; // remove renderExpando in next major release
 
-  if (open !== prevIsOpen) {
-    setAnimation(isOpen ? 'collapsing' : 'expanding');
-    setIsOpen(open);
-    setPrevIsOpen(open);
-  }
+  const content = useRef(null);
 
   // When the AccordionItem heading is clicked, toggle the open state of the
   // panel
   function onClick(event) {
+    // type guard for ref
+    if (!content.current) {
+      return;
+    }
+    if (isOpen) {
+      // accordion closes
+      content.current.style.maxBlockSize = '';
+    } else {
+      // accordion opens
+      content.current.style.maxBlockSize = content.current.scrollHeight + 15 + 'px';
+    }
     const nextValue = !isOpen;
-    setAnimation(isOpen ? 'collapsing' : 'expanding');
     setIsOpen(nextValue);
     if (onHeadingClick) {
       // TODO: normalize signature, potentially:
@@ -85,13 +88,10 @@ function AccordionItem(_ref) {
     if (handleAnimationEnd) {
       handleAnimationEnd(event);
     }
-    setAnimation('');
   }
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: className
-  }, rest, {
-    onAnimationEnd: onAnimationEnd
-  }), /*#__PURE__*/React__default.createElement(Toggle, {
+  }, rest), /*#__PURE__*/React__default.createElement(Toggle, {
     disabled: disabled,
     "aria-controls": id,
     "aria-expanded": isOpen,
@@ -105,9 +105,13 @@ function AccordionItem(_ref) {
     as: "div",
     className: `${prefix}--accordion__title`
   }, title)), /*#__PURE__*/React__default.createElement("div", {
+    ref: content,
+    className: `${prefix}--accordion__wrapper`,
+    onTransitionEnd: onAnimationEnd
+  }, /*#__PURE__*/React__default.createElement("div", {
     id: id,
     className: `${prefix}--accordion__content`
-  }, children));
+  }, children)));
 }
 AccordionItem.propTypes = {
   /**

package/es/components/Checkbox/Checkbox.d.ts

@@ -45,6 +45,10 @@ 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;
+    /**
+     * Provide a `Slug` component to be rendered inside the `Checkbox` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify whether the Checkbox is currently invalid
      */

package/es/components/Checkbox/Checkbox.js

@@ -33,6 +33,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     title = '',
     warn,
     warnText,
+    slug,
     ...other
   } = _ref;
   const prefix = usePrefix();
@@ -47,11 +48,19 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   const wrapperClasses = cx(`${prefix}--form-item`, `${prefix}--checkbox-wrapper`, className, {
     [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
     [`${prefix}--checkbox-wrapper--invalid`]: !readOnly && invalid,
-    [`${prefix}--checkbox-wrapper--warning`]: showWarning
+    [`${prefix}--checkbox-wrapper--warning`]: showWarning,
+    [`${prefix}--checkbox-wrapper--slug`]: slug
   });
   const innerLabelClasses = cx(`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel
   });
+  let normalizedSlug;
+  if (slug && /*#__PURE__*/React__default.isValidElement(slug)) {
+    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
@@ -97,7 +106,7 @@ const Checkbox = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     title: title
   }, /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
-  }, labelText)), /*#__PURE__*/React__default.createElement("div", {
+  }, labelText, normalizedSlug)), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -165,6 +174,10 @@ Checkbox.propTypes = {
    * Specify whether the Checkbox is read-only
    */
   readOnly: PropTypes.bool,
+  /**
+   * Provide a `Slug` component to be rendered inside the `Checkbox` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify a title for the <label> node for the Checkbox
    */

package/es/components/CheckboxGroup/CheckboxGroup.js

@@ -26,6 +26,7 @@ function CheckboxGroup(_ref) {
     readOnly,
     warn,
     warnText,
+    slug,
     ...rest
   } = _ref;
   const prefix = usePrefix();
@@ -40,8 +41,18 @@ function CheckboxGroup(_ref) {
   const fieldsetClasses = cx(`${prefix}--checkbox-group`, className, {
     [`${prefix}--checkbox-group--readonly`]: readOnly,
     [`${prefix}--checkbox-group--invalid`]: !readOnly && invalid,
-    [`${prefix}--checkbox-group--warning`]: showWarning
+    [`${prefix}--checkbox-group--warning`]: showWarning,
+    [`${prefix}--checkbox-group--slug`]: slug
   });
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini',
+      kind: 'default'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("fieldset", _extends({
     className: fieldsetClasses,
     "data-invalid": invalid ? true : undefined,
@@ -51,7 +62,7 @@ function CheckboxGroup(_ref) {
   }, rest), /*#__PURE__*/React__default.createElement("legend", {
     className: `${prefix}--label`,
     id: legendId || rest['aria-labelledby']
-  }, legendText), children, /*#__PURE__*/React__default.createElement("div", {
+  }, legendText, normalizedSlug), children, /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--checkbox-group__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--checkbox__invalid-icon`
@@ -97,6 +108,10 @@ CheckboxGroup.propTypes = {
    * Whether the CheckboxGroup should be read-only
    */
   readOnly: PropTypes.bool,
+  /**
+   * Provide a `Slug` component to be rendered inside the `CheckboxGroup` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify whether the form group is currently in warning state
    */

package/es/components/DataTable/tools/sorting.js

@@ -33,7 +33,7 @@ const compare = function (a, b) {
 
   // if column has React elements, this should sort by the child string if there is one
   if (typeof a === 'object' && typeof b === 'object') {
-    if (typeof a.props.children === 'string' && typeof b.props.children === 'string') {
+    if (typeof a.props?.children === 'string' && typeof b.props?.children === 'string') {
       return compareStrings(a.props.children, b.props.children, locale);
     }
   }

package/es/components/FileUploader/FileUploader.js

@@ -106,11 +106,12 @@ class FileUploader extends React__default.Component {
     return /*#__PURE__*/React__default.createElement("div", _extends({
       className: classes
     }, other), !labelTitle ? null : /*#__PURE__*/React__default.createElement(Text, {
-      as: "p",
+      as: "h3",
       className: getHelperLabelClasses(`${prefix}--file--label`)
     }, labelTitle), /*#__PURE__*/React__default.createElement(Text, {
       as: "p",
-      className: getHelperLabelClasses(`${prefix}--label-description`)
+      className: getHelperLabelClasses(`${prefix}--label-description`),
+      id: "description"
     }, labelDescription), /*#__PURE__*/React__default.createElement(FileUploaderButton, {
       innerRef: this.uploaderButton,
       disabled: disabled,
@@ -121,7 +122,8 @@ class FileUploader extends React__default.Component {
       disableLabelChanges: true,
       accept: accept,
       name: name,
-      size: size
+      size: size,
+      "aria-describedby": "description"
     }), /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--file-container`
     }, this.state.filenames.length === 0 ? null : this.state.filenames.map((name, index) => /*#__PURE__*/React__default.createElement("span", _extends({

package/es/components/Grid/Column.js

@@ -102,6 +102,11 @@ Column.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
+   */
+  span: PropTypes.oneOfType([PropTypes.number, percentSpanType]),
   /**
    * Specify column span for the `xlg` breakpoint (Default breakpoint up to
    * 1584px) This breakpoint supports 16 columns by default.
@@ -311,8 +316,13 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
  */
 function getClassNameForSpan(value, prefix) {
   const classNames = [];
-  if (typeof value === 'number' || typeof value === 'string') {
+  if (typeof value === 'number') {
     classNames.push(`${prefix}--col-span-${value}`);
+  }
+  // If value is a string, the user has specified a percent
+  // they'd like this column to span.
+  else if (typeof value === 'string') {
+    classNames.push(`${prefix}--col-span-${value.slice(0, -1)}`);
   } else if (typeof value === 'object') {
     const {
       span,

package/es/components/MenuButton/index.js

@@ -29,6 +29,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
     kind = defaultButtonKind,
     label,
     size = 'lg',
+    tabIndex = 0,
     ...rest
   } = _ref;
   const id = useId('MenuButton');
@@ -69,6 +70,7 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(_r
   }), /*#__PURE__*/React__default.createElement(Button, {
     className: triggerClasses,
     size: size,
+    tabIndex: tabIndex,
     kind: buttonKind,
     renderIcon: ChevronDown,
     disabled: disabled,
@@ -114,7 +116,11 @@ MenuButton.propTypes = {
   /**
    * Specify the size of the button and menu.
    */
-  size: PropTypes.oneOf(['sm', 'md', 'lg'])
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  /**
+   * Specify the tabIndex of the button.
+   */
+  tabIndex: PropTypes.number
 };
 
 export { MenuButton };

package/es/components/RadioButton/RadioButton.d.ts

@@ -55,6 +55,10 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Provide a handler that is invoked when a user clicks on the control
      */
     onClick?: (evt: React.MouseEvent<HTMLInputElement>) => void;
+    /**
+     * Provide a `Slug` component to be rendered inside the `RadioButton` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the value of the `<RadioButton>`
      */

package/es/components/RadioButton/RadioButton.js

@@ -26,6 +26,7 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     name,
     onChange = () => {},
     value = '',
+    slug,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -38,9 +39,17 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     [`${prefix}--visually-hidden`]: hideLabel
   });
   const wrapperClasses = cx(className, `${prefix}--radio-button-wrapper`, {
-    [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right'
+    [`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== 'right',
+    [`${prefix}--radio-button-wrapper--slug`]: slug
   });
   const inputRef = useRef(null);
+  let normalizedSlug;
+  if (slug && /*#__PURE__*/React__default.isValidElement(slug)) {
+    const size = slug.props?.['kind'] === 'inline' ? 'md' : 'mini';
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default.createElement("input", _extends({}, rest, {
@@ -59,7 +68,7 @@ const RadioButton = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     className: `${prefix}--radio-button__appearance`
   }), labelText && /*#__PURE__*/React__default.createElement(Text, {
     className: innerLabelClasses
-  }, labelText)));
+  }, labelText, normalizedSlug)));
 });
 RadioButton.displayName = 'RadioButton';
 RadioButton.propTypes = {
@@ -110,6 +119,10 @@ RadioButton.propTypes = {
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes.func,
+  /**
+   * Provide a `Slug` component to be rendered inside the `RadioButton` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify the value of the `<RadioButton>`
    */

package/es/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -63,6 +63,10 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Whether the RadioButtonGroup should be read-only
      */
     readOnly?: boolean;
+    /**
+     * Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify whether the control is currently in warning state
      */

package/es/components/RadioButtonGroup/RadioButtonGroup.js

@@ -34,6 +34,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     valueSelected,
     warn = false,
     warnText,
+    slug,
     ...rest
   } = props;
   const prefix = usePrefix();
@@ -88,7 +89,8 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
     [`${prefix}--radio-button-group--readonly`]: readOnly,
     [`${prefix}--radio-button-group--invalid`]: !readOnly && invalid,
-    [`${prefix}--radio-button-group--warning`]: showWarning
+    [`${prefix}--radio-button-group--warning`]: showWarning,
+    [`${prefix}--radio-button-group--slug`]: slug
   });
   const helperClasses = cx(`${prefix}--form__helper-text`, {
     [`${prefix}--form__helper-text--disabled`]: disabled
@@ -99,6 +101,15 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     className: helperClasses
   }, helperText) : null;
   const divRef = useRef(null);
+
+  // Slug is always size `mini`
+  let normalizedSlug;
+  if (slug) {
+    normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      size: 'mini',
+      kind: 'default'
+    });
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: wrapperClasses,
     ref: mergeRefs(divRef, ref)
@@ -109,7 +120,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     "aria-describedby": showHelper && helperText ? helperId : undefined
   }, rest), legendText && /*#__PURE__*/React__default.createElement(Legend, {
     className: `${prefix}--label`
-  }, legendText), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
+  }, legendText, normalizedSlug), getRadioButtons()), /*#__PURE__*/React__default.createElement("div", {
     className: `${prefix}--radio-button__validation-msg`
   }, !readOnly && invalid && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(WarningFilled, {
     className: `${prefix}--radio-button__invalid-icon`
@@ -176,6 +187,10 @@ RadioButtonGroup.propTypes = {
    * Whether the RadioButtonGroup should be read-only
    */
   readOnly: PropTypes.bool,
+  /**
+   * Provide a `Slug` component to be rendered inside the `RadioButtonGroup` component
+   */
+  slug: PropTypes.node,
   /**
    * Specify the value that is currently selected in the group
    */

package/es/components/Select/Select.d.ts

@@ -90,5 +90,5 @@ interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, ExcludedAttr
      */
     warnText?: ReactNode;
 }
-declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onAnimationEnd" | "onKeyDown" | "tabIndex" | "color" | "lang" | "name" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "readOnly" | "required" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "slug" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
+declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, "value" | "children" | "disabled" | "form" | "slot" | "style" | "title" | "className" | "size" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "autoComplete" | "multiple" | "key" | "id" | "aria-controls" | "aria-expanded" | "onClick" | "onKeyDown" | "onTransitionEnd" | "tabIndex" | "color" | "lang" | "name" | "role" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inline" | "readOnly" | "required" | "light" | "invalid" | "labelText" | "helperText" | "invalidText" | "hideLabel" | "warn" | "warnText" | "slug" | "noLabel"> & React.RefAttributes<HTMLSelectElement>>;
 export default Select;

package/es/components/Slug/index.js

@@ -73,7 +73,7 @@ const Slug = /*#__PURE__*/React__default.forwardRef(function Slug(_ref3, ref) {
     children,
     className,
     dotType,
-    kind,
+    kind = 'default',
     onRevertClick,
     revertActive,
     revertLabel = 'Revert to AI input',

package/es/components/Tile/Tile.d.ts

@@ -1,9 +1,19 @@
 import React, { type ReactNode, type MouseEvent, type KeyboardEvent, type HTMLAttributes, type ChangeEvent, type ComponentType } from 'react';
+import { ReactNodeLike } from 'prop-types';
 export interface TileProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     className?: string;
     /** @deprecated */
     light?: boolean;
+    /**
+     * Specify if the `Tile` component should be rendered with rounded corners. Only valid
+     * when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
+    /**
+     * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     */
+    slug?: ReactNodeLike;
 }
 export declare const Tile: React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>>;
 export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
@@ -19,6 +29,11 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
      * Specify whether the ClickableTile should be disabled
      */
     disabled?: boolean;
+    /**
+     * Specify if the `ClickableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * The href for the link.
      */
@@ -41,6 +56,10 @@ export interface ClickableTileProps extends HTMLAttributes<HTMLAnchorElement> {
      * The rel property for the link.
      */
     rel?: string;
+    /**
+     * Specify if a `Slug` icon should be rendered inside the `ClickableTile`
+     */
+    slug?: boolean;
 }
 export declare const ClickableTile: React.ForwardRefExoticComponent<ClickableTileProps & React.RefAttributes<HTMLAnchorElement>>;
 export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
@@ -52,6 +71,11 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      * Specify whether the SelectableTile should be disabled
      */
     disabled?: boolean;
+    /**
+     * Specify if the `SelectableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * The ID of the `<input>`.
      */
@@ -77,6 +101,10 @@ export interface SelectableTileProps extends HTMLAttributes<HTMLDivElement> {
      * `true` to select this tile.
      */
     selected?: boolean;
+    /**
+     * Provide a `Slug` component to be rendered inside the `SelectableTile` component
+     */
+    slug?: ReactNodeLike;
     /**
      * Specify the tab index of the wrapper element
      */
@@ -101,6 +129,11 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
      * `true` if the tile is expanded.
      */
     expanded?: boolean;
+    /**
+     * Specify if the `ExpandableTile` component should be rendered with rounded corners.
+     * Only valid when `slug` prop is present
+     */
+    hasRoundedCorners?: boolean;
     /**
      * An ID that can be provided to aria-labelledby
      */
@@ -113,6 +146,10 @@ export interface ExpandableTileProps extends HTMLAttributes<HTMLDivElement> {
      * optional handler to trigger a function when a key is pressed
      */
     onKeyUp?(event: KeyboardEvent): void;
+    /**
+     * Provide a `Slug` component to be rendered inside the `ExpandableTile` component
+     */
+    slug?: ReactNodeLike;
     /**
      * The `tabindex` attribute.
      */