@carbon/react 1.78.2 → 1.79.0

package/lib/components/Dialog/index.js

@@ -0,0 +1,190 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../internal/usePrefix.js');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var index = require('../IconButton/index.js');
+var noopFn = require('../../internal/noopFn.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const unstable__Dialog = /*#__PURE__*/React__default["default"].forwardRef((_ref, forwardRef) => {
+  let {
+    children,
+    className,
+    modal,
+    onCancel = noopFn.noopFn,
+    onClick = noopFn.noopFn,
+    onClose = noopFn.noopFn,
+    onRequestClose = noopFn.noopFn,
+    open = false,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+
+  // This component needs access to a ref, placed on the dialog, to call the
+  // various imperative dialog functions (show(), close(), etc.).
+  // If the parent component has not passed a ref for forwardRef, forwardRef
+  // will be null. A "backup" ref is needed to ensure the dialog's instance
+  // methods can always be called within this component.
+  const backupRef = React.useRef(null);
+  const ref = forwardRef ?? backupRef;
+
+  // Clicks on the backdrop of an open modal dialog should request the consuming component to close
+  // the dialog. Clicks elsewhere, or on non-modal dialogs should not request
+  // to close the dialog.
+  function handleModalBackdropClick(e) {
+    if (open && modal && e.target === ref.current) {
+      onRequestClose(e);
+    }
+  }
+  function handleClick(e) {
+    handleModalBackdropClick(e);
+
+    // onClick should always be called, no matter if the target is a modal
+    // dialog, modal dialog backdrop, or non-modal dialog.
+    onClick(e);
+  }
+  React.useEffect(() => {
+    if (ref.current) {
+      if (open) {
+        if (modal) {
+          // Display the dialog as a modal, over the top of any other dialogs
+          // that might be present. Everything outside the dialog are inert
+          // with interactions outside the dialog being blocked.
+          ref.current.showModal();
+        } else {
+          // Display the dialog modelessly, i.e. still allowing interaction
+          // with content outside of the dialog.
+          ref.current.show();
+        }
+      } else {
+        ref.current.close();
+      }
+    }
+  }, [modal, open]);
+  return /*#__PURE__*/React__default["default"].createElement("dialog", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](`${prefix}--dialog`, {
+      [`${prefix}--dialog--modal`]: modal
+    }, className),
+    ref: ref,
+    onCancel: onCancel,
+    onClick: handleClick,
+    onClose: onClose
+  }), children);
+});
+unstable__Dialog.displayName = 'Dialog';
+unstable__Dialog.propTypes = {
+  /**
+   * Provide children to be rendered inside of the Dialog
+   */
+  children: PropTypes__default["default"].node,
+  /**
+   * Specify an optional className to be applied to the modal root node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Modal specifies whether the Dialog is modal or non-modal. This cannot be
+   * changed while open=true
+   */
+  modal: PropTypes__default["default"].bool,
+  /**
+   * Specify a handler for closing Dialog.
+   * The handler should care of closing Dialog, e.g. changing `open` prop.
+   */
+  onRequestClose: PropTypes__default["default"].func,
+  /**
+   * open initial state
+   */
+  open: PropTypes__default["default"].bool
+};
+const DialogHeader = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: `${prefix}--dialog__header`,
+    ref: ref
+  }, rest), children);
+});
+DialogHeader.propTypes = {
+  /**
+   * Provide the contents to be rendered inside of this component
+   */
+  children: PropTypes__default["default"].node
+};
+const DialogControls = /*#__PURE__*/React__default["default"].forwardRef((_ref3, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref3;
+  const prefix = usePrefix.usePrefix();
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+      className: `${prefix}--dialog__header-controls`,
+      ref: ref
+    }, rest), children)
+  );
+});
+DialogControls.propTypes = {
+  /**
+   * Provide children to be rendered inside of this component
+   */
+  children: PropTypes__default["default"].node
+};
+const DialogCloseButton = /*#__PURE__*/React__default["default"].forwardRef((_ref4, ref) => {
+  let {
+    onClick,
+    ...rest
+  } = _ref4;
+  const prefix = usePrefix.usePrefix();
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({
+      kind: "ghost",
+      className: `${prefix}--dialog__close`,
+      label: "Close",
+      title: "Close",
+      "aria-label": "Close",
+      align: "left",
+      onClick: onClick
+    }, rest), /*#__PURE__*/React__default["default"].createElement(iconsReact.Close, {
+      size: 20,
+      "aria-hidden": "true",
+      tabIndex: "-1",
+      className: `${prefix}--icon__close`
+    }))
+  );
+});
+DialogCloseButton.propTypes = {
+  /**
+   * Specify a click handler applied to the IconButton
+   */
+  onClick: PropTypes__default["default"].func
+};
+
+exports.DialogCloseButton = DialogCloseButton;
+exports.DialogControls = DialogControls;
+exports.DialogHeader = DialogHeader;
+exports.unstable__Dialog = unstable__Dialog;

package/lib/components/ExpandableSearch/ExpandableSearch.js

@@ -16,9 +16,9 @@ var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
-var mergeRefs = require('../../tools/mergeRefs.js');
-var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
+var mergeRefs = require('../../tools/mergeRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -14,6 +14,7 @@ export interface FeatureFlagsProps {
     enableV12Overflowmenu?: boolean;
     enableTreeviewControllable?: boolean;
     enableExperimentalFocusWrapWithoutSentinels?: boolean;
+    enableDialogElement?: boolean;
     enableV12DynamicFloatingStyles?: boolean;
 }
 /**
@@ -26,7 +27,7 @@ declare const FeatureFlagContext: React.Context<any>;
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableV12DynamicFloatingStyles, }: FeatureFlagsProps): JSX.Element;
+declare function FeatureFlags({ children, flags, enableV12TileDefaultIcons, enableV12TileRadioIcons, enableV12Overflowmenu, enableTreeviewControllable, enableExperimentalFocusWrapWithoutSentinels, enableDialogElement, enableV12DynamicFloatingStyles, }: FeatureFlagsProps): JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -39,6 +40,7 @@ declare namespace FeatureFlags {
         enableV12Overflowmenu: PropTypes.Requireable<boolean>;
         enableTreeviewControllable: PropTypes.Requireable<boolean>;
         enableExperimentalFocusWrapWithoutSentinels: PropTypes.Requireable<boolean>;
+        enableDialogElement: PropTypes.Requireable<boolean>;
         enableV12DynamicFloatingStyles: PropTypes.Requireable<boolean>;
     };
 }

package/lib/components/FeatureFlags/index.js

@@ -39,6 +39,7 @@ function FeatureFlags(_ref) {
     enableV12Overflowmenu = false,
     enableTreeviewControllable = false,
     enableExperimentalFocusWrapWithoutSentinels = false,
+    enableDialogElement = false,
     enableV12DynamicFloatingStyles = false
   } = _ref;
   const parentScope = React.useContext(FeatureFlagContext);
@@ -49,6 +50,7 @@ function FeatureFlags(_ref) {
     'enable-v12-overflowmenu': enableV12Overflowmenu,
     'enable-treeview-controllable': enableTreeviewControllable,
     'enable-experimental-focus-wrap-without-sentinels': enableExperimentalFocusWrapWithoutSentinels,
+    'enable-dialog-element': enableDialogElement,
     'enable-v12-dynamic-floating-styles': enableV12DynamicFloatingStyles,
     ...flags
   };
@@ -87,6 +89,7 @@ FeatureFlags.propTypes = {
   enableV12Overflowmenu: PropTypes__default["default"].bool,
   enableTreeviewControllable: PropTypes__default["default"].bool,
   enableExperimentalFocusWrapWithoutSentinels: PropTypes__default["default"].bool,
+  enableDialogElement: PropTypes__default["default"].bool,
   enableV12DynamicFloatingStyles: PropTypes__default["default"].bool
 };
 

package/lib/components/FileUploader/FileUploader.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/FileUploader/FileUploader.js

@@ -16,12 +16,12 @@ var React = require('react');
 var Filename = require('./Filename.js');
 var FileUploaderButton = require('./FileUploaderButton.js');
 var Button = require('../Button/Button.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
 var useId = require('../../internal/useId.js');
-var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/FileUploader/FileUploaderButton.js

@@ -13,13 +13,13 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var types = require('../../prop-types/types.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -13,13 +13,13 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var events = require('../../tools/events.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var noopFn = require('../../internal/noopFn.js');
-var match = require('../../internal/keyboard/match.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -81,14 +81,16 @@ function FileUploaderDropContainer(_ref) {
   }
   function handleChange(event) {
     const files = [...(event.target.files ?? [])];
-    const addedFiles = validateFiles(files);
+    const filesToValidate = multiple ? files : [files[0]];
+    const addedFiles = validateFiles(filesToValidate);
     return onAddFiles(event, {
       addedFiles
     });
   }
   function handleDrop(event) {
     const files = [...event.dataTransfer.files];
-    const addedFiles = validateFiles(files);
+    const filesToValidate = multiple ? files : [files[0]];
+    const addedFiles = validateFiles(filesToValidate);
     return onAddFiles(event, {
       addedFiles
     });

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

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/components/FileUploader/FileUploaderItem.js

@@ -14,15 +14,15 @@ var cx = require('classnames');
 var PropTypes = require('prop-types');
 var React = require('react');
 var Filename = require('./Filename.js');
+var keys = require('../../internal/keyboard/keys.js');
+var match = require('../../internal/keyboard/match.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 require('../Tooltip/DefinitionTooltip.js');
 var Tooltip = require('../Tooltip/Tooltip.js');
-var match = require('../../internal/keyboard/match.js');
 var Text = require('../Text/Text.js');
-var keys = require('../../internal/keyboard/keys.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/lib/components/Grid/CSSGrid.js

@@ -22,10 +22,10 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function CSSGrid(_ref) {
+const CSSGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     align,
-    as: BaseComponent = 'div',
+    as,
     children,
     className: customClassName,
     condensed = false,
@@ -48,7 +48,8 @@ function CSSGrid(_ref) {
       mode: "css-grid",
       subgrid: true
     }, /*#__PURE__*/React__default["default"].createElement(Subgrid, _rollupPluginBabelHelpers["extends"]({
-      as: BaseComponent,
+      ref: ref,
+      as: as,
       className: customClassName,
       mode: mode
     }, rest), children));
@@ -63,23 +64,24 @@ function CSSGrid(_ref) {
   });
 
   // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponentAsAny = BaseComponent;
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
     mode: "css-grid",
     subgrid: true
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
-    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    className: className,
+    ref: ref
   }, rest), children));
-}
+});
 CSSGrid.propTypes = {
-  /**
-   * Specify grid alignment. Default is center
-   */
-  align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
   /**
    * Provide a custom element to render instead of the default <div>
    */
   as: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].elementType]),
+  /**
+   * Specify grid alignment. Default is center
+   */
+  align: PropTypes__default["default"].oneOf(['start', 'center', 'end']),
   /**
    * Pass in content that will be rendered within the `Grid`
    */
@@ -103,9 +105,9 @@ CSSGrid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
-const Subgrid = _ref2 => {
+const Subgrid = /*#__PURE__*/React__default["default"].forwardRef((_ref2, ref) => {
   let {
-    as: BaseComponent = 'div',
+    as,
     className: customClassName,
     children,
     mode,
@@ -118,10 +120,12 @@ const Subgrid = _ref2 => {
     [`${prefix}--subgrid--narrow`]: mode === 'narrow',
     [`${prefix}--subgrid--wide`]: mode === 'wide'
   });
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+    ref: ref,
     className: className
   }), children);
-};
+});
 Subgrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/lib/components/Grid/Column.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import { PolymorphicProps } from '../../types/common';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%';
 type ColumnSpanSimple = boolean | number | ColumnSpanPercent;
 export interface ColumnSpanObject {
@@ -65,7 +65,7 @@ export interface ColumnBaseProps {
      */
     span?: ColumnSpan;
 }
-export type ColumnProps<T extends React.ElementType> = PolymorphicProps<T, ColumnBaseProps>;
+export type ColumnProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ColumnBaseProps>;
 export interface ColumnComponent {
     <T extends React.ElementType>(props: ColumnProps<T>, context?: any): React.ReactElement<any, any> | null;
 }

package/lib/components/Grid/Column.js

@@ -42,9 +42,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function Column(_ref) {
+const Column = /*#__PURE__*/React__default["default"].forwardRef(function Column(_ref, ref) {
   let {
-    as: BaseComponent = 'div',
+    as,
     children,
     className: customClassName,
     sm,
@@ -58,6 +58,7 @@ function Column(_ref) {
     mode
   } = GridContext.useGridSettings();
   const prefix = usePrefix.usePrefix();
+  const BaseComponent = as || 'div';
   if (mode === 'css-grid') {
     return /*#__PURE__*/React__default["default"].createElement(CSSGridColumn, _rollupPluginBabelHelpers["extends"]({
       as: BaseComponent,
@@ -73,13 +74,11 @@ function Column(_ref) {
   const className = cx__default["default"](customClassName, columnClassName, {
     [`${prefix}--col`]: columnClassName.length === 0
   });
-
-  // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponentAsAny = BaseComponent;
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
-    className: className
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    className: className,
+    ref: ref
   }, rest), children);
-}
+});
 const percentSpanType = PropTypes__default["default"].oneOf(['25%', '50%', '75%', '100%']);
 const spanPropType = FeatureFlags__namespace.enabled('enable-css-grid') ? PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].shape({
   span: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, percentSpanType]),

package/lib/components/Grid/FlexGrid.js

@@ -22,9 +22,9 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-function FlexGrid(_ref) {
+const FlexGrid = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
-    as: BaseComponent = 'div',
+    as,
     condensed = false,
     narrow = false,
     fullWidth = false,
@@ -40,14 +40,15 @@ function FlexGrid(_ref) {
     [`${prefix}--grid--full-width`]: fullWidth
   });
   // cast as any to let TypeScript allow passing in attributes to base component
-  const BaseComponentAsAny = BaseComponent;
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
-    className: className
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+    className: className,
+    ref: ref
   }, rest), children));
-}
+});
 FlexGrid.propTypes = {
   /**
    * Provide a custom element to render instead of the default <div>

package/lib/components/Grid/GridTypes.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.
  */
-import { PolymorphicProps } from '../../types/common';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 export interface GridBaseProps {
     /**
      * Pass in content that will be rendered within the `Grid`
@@ -29,7 +29,9 @@ export interface GridBaseProps {
      */
     narrow?: boolean;
 }
-export type GridProps<T extends React.ElementType> = PolymorphicProps<T, GridBaseProps>;
+export type GridProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, GridBaseProps>;
 export interface GridComponent {
-    <T extends React.ElementType>(props: GridProps<T>, context?: any): React.ReactElement<any, any> | null;
+    <T extends React.ElementType = 'div'>(props: GridProps<T>): React.ReactElement | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<GridProps<any>>;
 }

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

@@ -86,9 +86,9 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
-     * Specify the size of the Button. Defaults to `md`.
+     * Specify the size of the Button.
      */
-    size?: ButtonSize;
+    size?: Extract<ButtonSize, 'sm' | 'md' | 'lg'>;
     /**
      * Optionally specify a `target` when using an `<a>` element.
      */

package/lib/components/IconButton/index.js

@@ -86,9 +86,9 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
     kind: kind,
     ref: ref,
     size: size,
-    className: cx__default["default"](`${prefix}--btn--icon-only`, {
-      [`${prefix}--btn--selected`]: isSelected
-    }, className),
+    isSelected: isSelected,
+    hasIconOnly: true,
+    className: className,
     "aria-describedby": badgeCount && badgeId
   }), children, !disabled && badgeCount !== undefined && /*#__PURE__*/React__default["default"].createElement(index.BadgeIndicator, {
     id: badgeId,
@@ -194,7 +194,7 @@ IconButton.propTypes = {
    */
   rel: PropTypes__default["default"].string,
   /**
-   * Specify the size of the Button. Defaults to `md`.
+   * Specify the size of the Button.
    */
   size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
   /**

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

@@ -6,7 +6,7 @@
  */
 import React from 'react';
 import { LayerLevel } from './LayerLevel';
-import { PolymorphicProps } from '../../types/common';
+import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
 /**
  * A custom hook that will return information about the current layer. A common
  * field to pull from this is the `level` for the layer that the component that
@@ -30,8 +30,6 @@ export interface LayerBaseProps {
      */
     level?: LayerLevel;
 }
-export type LayerProps<T extends React.ElementType> = PolymorphicProps<T, LayerBaseProps>;
-export interface LayerComponent {
-    <T extends React.ElementType>(props: LayerProps<T>, context?: any): React.ReactElement<any, any> | null;
-}
-export declare const Layer: LayerComponent;
+export type LayerProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, LayerBaseProps>;
+declare const Layer: React.ForwardRefExoticComponent<Omit<LayerProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+export { Layer };

package/lib/components/Layer/index.js

@@ -34,9 +34,9 @@ function useLayer() {
     level
   };
 }
-const LayerRenderFunction = /*#__PURE__*/React__default["default"].forwardRef(function Layer(_ref, ref) {
+const Layer = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
-    as = 'div',
+    as,
     className: customClassName,
     children,
     level: overrideLevel,
@@ -48,7 +48,7 @@ const LayerRenderFunction = /*#__PURE__*/React__default["default"].forwardRef(fu
   const className = cx__default["default"](`${prefix}--layer-${LayerLevel.levels[level]}`, customClassName);
   // The level should be between MIN_LEVEL and MAX_LEVEL
   const value = Math.max(LayerLevel.MIN_LEVEL, Math.min(level + 1, LayerLevel.MAX_LEVEL));
-  const BaseComponent = as;
+  const BaseComponent = as || 'div';
   return /*#__PURE__*/React__default["default"].createElement(LayerContext.LayerContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
@@ -57,8 +57,8 @@ const LayerRenderFunction = /*#__PURE__*/React__default["default"].forwardRef(fu
     className: className
   }), children));
 });
-LayerRenderFunction.displayName = 'Layer';
-LayerRenderFunction.propTypes = {
+Layer.displayName = 'Layer';
+Layer.propTypes = {
   /**
    * Specify a custom component or element to be rendered as the top-level
    * element in the component
@@ -78,7 +78,6 @@ LayerRenderFunction.propTypes = {
    */
   level: PropTypes__default["default"].oneOf([0, 1, 2])
 };
-const Layer = LayerRenderFunction;
 
 exports.Layer = Layer;
 exports.useLayer = useLayer;