@carbon/react 1.22.0 → 1.23.0

package/lib/components/DataTable/TableSelectRow.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * 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 TableSelectRowProps {
+    /**
+     * Specify the aria label for the underlying input control
+     */
+    ariaLabel: string;
+    /**
+     * Specify whether this row is selected, or not
+     */
+    checked: boolean;
+    /**
+     * The CSS class names of the cell that wraps the underlying input control
+     */
+    className?: string;
+    /**
+     * Specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide an `id` for the underlying input control
+     */
+    id: string;
+    /**
+     * Provide a `name` for the underlying input control
+     */
+    name: string;
+    /**
+     * Provide an optional hook that is called each time the input is updated
+     */
+    onChange?: (value: boolean, name: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Provide a handler to listen to when a user initiates a selection request
+     */
+    onSelect: React.MouseEventHandler<HTMLInputElement>;
+    /**
+     * Specify whether the control should be a radio button or inline checkbox
+     */
+    radio?: boolean;
+}
+declare const TableSelectRow: {
+    ({ ariaLabel, checked, id, name, onSelect, onChange, disabled, radio, className, }: TableSelectRowProps): JSX.Element;
+    propTypes: {
+        /**
+         * Specify the aria label for the underlying input control
+         */
+        ariaLabel: PropTypes.Validator<string>;
+        /**
+         * Specify whether this row is selected, or not
+         */
+        checked: PropTypes.Validator<boolean>;
+        /**
+         * The CSS class names of the cell that wraps the underlying input control
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the control is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an `id` for the underlying input control
+         */
+        id: PropTypes.Validator<string>;
+        /**
+         * Provide a `name` for the underlying input control
+         */
+        name: PropTypes.Validator<string>;
+        /**
+         * Provide an optional hook that is called each time the input is updated
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide a handler to listen to when a user initiates a selection request
+         */
+        onSelect: PropTypes.Validator<(...args: any[]) => any>;
+        /**
+         * Specify whether the control should be a radio button or inline checkbox
+         */
+        radio: PropTypes.Requireable<boolean>;
+    };
+};
+export default TableSelectRow;

package/lib/components/DataTable/TableSelectRow.js

@@ -24,8 +24,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var TableSelectRow = function TableSelectRow(_ref) {
-  var _classNames;
-
   var ariaLabel = _ref.ariaLabel,
       checked = _ref.checked,
       id = _ref.id,
@@ -45,7 +43,7 @@ var TableSelectRow = function TableSelectRow(_ref) {
     disabled: disabled
   };
   var InlineInputComponent = radio ? RadioButton["default"] : InlineCheckbox["default"];
-  var tableSelectRowClasses = cx__default["default"]("".concat(prefix, "--table-column-checkbox"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--table-column-radio"), radio), _classNames));
+  var tableSelectRowClasses = cx__default["default"]("".concat(prefix, "--table-column-checkbox"), _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, className && _rollupPluginBabelHelpers.defineProperty({}, className, true)), {}, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--table-column-radio"), radio)));
   return /*#__PURE__*/React__default["default"].createElement("td", {
     className: tableSelectRowClasses
   }, /*#__PURE__*/React__default["default"].createElement(InlineInputComponent, _rollupPluginBabelHelpers["extends"]({}, selectionInputProps, radio && {
@@ -63,7 +61,7 @@ TableSelectRow.propTypes = {
   ariaLabel: PropTypes__default["default"].string.isRequired,
 
   /**
-   * Specify whether all items are selected, or not
+   * Specify whether this row is selected, or not
    */
   checked: PropTypes__default["default"].bool.isRequired,
 

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

@@ -27,6 +27,9 @@ var sortStates = require('../state/sortStates.js');
 
 var compare = function compare(a, b) {
   var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+  // prevent multiple null values in one column (sorting breaks)
+  a === null ? a = '' : null;
+  b === null ? b = '' : null;
 
   if (typeof a === 'number' && typeof b === 'number') {
     return a - b;

package/lib/components/DatePicker/DatePicker.js

@@ -14,7 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var flatpickr = require('flatpickr');
-var index = require('../../node_modules/flatpickr/dist/l10n/index.js');
+var l10n = require('flatpickr/dist/l10n/index');
 var DatePickerInput = require('../DatePickerInput/DatePickerInput.js');
 var appendToPlugin = require('./plugins/appendToPlugin.js');
 var fixEventsPlugin = require('./plugins/fixEventsPlugin.js');
@@ -34,16 +34,17 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var flatpickr__default = /*#__PURE__*/_interopDefaultLegacy(flatpickr);
+var l10n__default = /*#__PURE__*/_interopDefaultLegacy(l10n);
 
 var _excluded = ["allowInput", "appendTo", "children", "className", "closeOnSelect", "dateFormat", "datePickerType", "disable", "enable", "inline", "invalid", "invalidText", "warn", "warnText", "light", "locale", "maxDate", "minDate", "onChange", "onClose", "onOpen", "readOnly", "short", "value"];
 
-index["default"].en.weekdays.shorthand.forEach(function (_day, index$1) {
-  var currentDay = index["default"].en.weekdays.shorthand;
+l10n__default["default"].en.weekdays.shorthand.forEach(function (_day, index) {
+  var currentDay = l10n__default["default"].en.weekdays.shorthand;
 
-  if (currentDay[index$1] === 'Thu' || currentDay[index$1] === 'Th') {
-    currentDay[index$1] = 'Th';
+  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
+    currentDay[index] = 'Th';
   } else {
-    currentDay[index$1] = currentDay[index$1].charAt(0);
+    currentDay[index] = currentDay[index].charAt(0);
   }
 });
 var forEach = Array.prototype.forEach;
@@ -291,9 +292,9 @@ var DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Date
 
     if (_rollupPluginBabelHelpers["typeof"](locale) === 'object') {
       var location = locale.locale ? locale.locale : 'en';
-      localeData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, index["default"][location]), locale);
+      localeData = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, l10n__default["default"][location]), locale);
     } else {
-      localeData = index["default"][locale];
+      localeData = l10n__default["default"][locale];
     }
 
     var start = startInputField.current;

package/lib/components/DatePicker/plugins/fixEventsPlugin.js

@@ -69,7 +69,16 @@ var carbonFlatpickrFixEventsPlugin = (function (config) {
 
         if (selectedToDate && currentValueToDate && selectedToDate !== currentValueToDate) {
           // Update the calendar with the value of the `to` date input
-          fp.setDate([inputFrom.value, inputTo && inputTo.value], false, fp.config.dateFormat);
+          fp.setDate([inputFrom.value, inputTo && inputTo.value], true, fp.config.dateFormat);
+        }
+      } // save end date in calendar inmediately after it's been written down
+
+
+      if (inputTo === target && fp.selectedDates.length === 1 && inputTo.value) {
+        var currentEndDate = new Date(inputTo.value);
+
+        if (currentEndDate.toString() !== 'Invalid Date') {
+          fp.setDate([inputFrom.value, inputTo.value], true, fp.config.dateFormat);
         }
       }
     };

package/lib/components/DatePicker/plugins/rangePlugin.js

@@ -9,7 +9,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var rangePlugin = require('../../../node_modules/flatpickr/dist/plugins/rangePlugin.js');
+var rangePlugin = require('flatpickr/dist/plugins/rangePlugin');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var rangePlugin__default = /*#__PURE__*/_interopDefaultLegacy(rangePlugin);
 
 /**
  * @param {object} config Plugin configuration.
@@ -20,7 +24,7 @@ var rangePlugin = require('../../../node_modules/flatpickr/dist/plugins/rangePlu
  */
 
 var carbonFlatpickrRangePlugin = (function (config) {
-  var factory = rangePlugin["default"](Object.assign({
+  var factory = rangePlugin__default["default"](Object.assign({
     position: 'left'
   }, config));
   return function (fp) {

package/lib/components/FileUploader/FileUploaderButton.js

@@ -17,6 +17,7 @@ var types = require('../../prop-types/types.js');
 var uniqueId = require('../../tools/uniqueId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var FeatureFlags = require('@carbon/feature-flags');
+var deprecate = require('../../prop-types/deprecate.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -45,7 +46,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
 
-var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "role", "name", "size", "tabIndex", "innerRef"];
+var _excluded = ["accept", "buttonKind", "className", "disabled", "disableLabelChanges", "id", "labelText", "multiple", "onChange", "name", "size", "innerRef"];
 
 function noop() {}
 
@@ -67,13 +68,9 @@ function FileUploaderButton(_ref) {
       multiple = _ref$multiple === void 0 ? false : _ref$multiple,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
-      _ref$role = _ref.role,
-      role = _ref$role === void 0 ? 'button' : _ref$role,
       name = _ref.name,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'md' : _ref$size,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
       innerRef = _ref.innerRef,
       other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
@@ -102,6 +99,7 @@ function FileUploaderButton(_ref) {
 
   function onClick(event) {
     event.target.value = null;
+    inputNode.current.click();
   }
 
   function onKeyDown(event) {
@@ -125,16 +123,17 @@ function FileUploaderButton(_ref) {
     onChange(event);
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
-    ref: innerRef,
-    tabIndex: disabled ? -1 : tabIndex || 0,
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    disabled: disabled,
     className: classes,
-    onKeyDown: onKeyDown,
+    onClick: onClick,
+    onKeyDown: onKeyDown
+  }, other), labelText), /*#__PURE__*/React__default["default"].createElement("label", {
+    className: "".concat(prefix, "--visually-hidden"),
+    ref: innerRef,
     htmlFor: inputId
-  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
-    role: role,
-    "aria-disabled": disabled
-  }, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
+  }, /*#__PURE__*/React__default["default"].createElement("span", null, labelText)), /*#__PURE__*/React__default["default"].createElement("input", {
     className: "".concat(prefix, "--visually-hidden"),
     ref: inputNode,
     id: inputId,
@@ -144,8 +143,7 @@ function FileUploaderButton(_ref) {
     multiple: multiple,
     accept: accept,
     name: name,
-    onChange: handleOnChange,
-    onClick: onClick
+    onChange: handleOnChange
   }));
 }
 
@@ -223,7 +221,7 @@ FileUploaderButton.propTypes = {
   /**
    * Provide a custom tabIndex value for the `<FileUploaderButton>`
    */
-  tabIndex: PropTypes__default["default"].number
+  tabIndex: deprecate["default"](PropTypes__default["default"].number, 'The `tabIndex` prop for `FileUploaderButton` has ' + 'been deprecated since it now renders a button element by default.')
 };
 
 exports["default"] = FileUploaderButton;

package/lib/components/Grid/CSSGrid.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 { GridComponent } from './GridTypes';
+declare const CSSGridComponent: GridComponent;
+export { CSSGridComponent as CSSGrid };

package/lib/components/Grid/CSSGrid.js

@@ -64,11 +64,13 @@ function CSSGrid(_ref) {
     }, rest), children));
   }
 
-  var className = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--full-width"), fullWidth), _cx));
+  var className = cx__default["default"](customClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--condensed"), mode === 'condensed'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--narrow"), mode === 'narrow'), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--css-grid--full-width"), fullWidth), _cx)); // cast as any to let TypeScript allow passing in attributes to base component
+
+  var BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
     mode: "css-grid",
     subgrid: true
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children));
 }
@@ -107,7 +109,7 @@ CSSGrid.propTypes = {
   narrow: PropTypes__default["default"].bool
 };
 
-function Subgrid(_ref2) {
+var Subgrid = function Subgrid(_ref2) {
   var _cx2;
 
   var _ref2$as = _ref2.as,
@@ -122,7 +124,7 @@ function Subgrid(_ref2) {
   return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
-}
+};
 
 Subgrid.propTypes = {
   /**
@@ -145,5 +147,6 @@ Subgrid.propTypes = {
    */
   mode: PropTypes__default["default"].oneOf(['wide', 'narrow', 'condensed'])
 };
+var CSSGridComponent = CSSGrid;
 
-exports.CSSGrid = CSSGrid;
+exports.CSSGrid = CSSGridComponent;

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

@@ -0,0 +1,73 @@
+/**
+ * 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 React from 'react';
+import { PolymorphicProps } from '../../types/common';
+type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%';
+type ColumnSpanSimple = boolean | number | ColumnSpanPercent;
+interface ColumnSpanObject {
+    span?: ColumnSpanSimple;
+    offset?: number;
+    start?: number;
+    end?: number;
+}
+export type ColumnSpan = ColumnSpanSimple | ColumnSpanObject;
+interface ColumnBaseProps {
+    /**
+     * Pass in content that will be rendered within the `Column`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `Column`
+     */
+    className?: string;
+    /**
+     * Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
+     * This breakpoint supports 16 columns by default.
+     *
+     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     */
+    lg?: ColumnSpan;
+    /**
+     * Specify column span for the `max` breakpoint. This breakpoint supports 16
+     * columns by default.
+     *
+     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     */
+    max?: ColumnSpan;
+    /**
+     * Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
+     * This breakpoint supports 8 columns by default.
+     *
+     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     */
+    md?: ColumnSpan;
+    /**
+     * Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
+     * This breakpoint supports 4 columns by default.
+     *
+     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     */
+    sm?: ColumnSpan;
+    /**
+     * Specify column span for the `xlg` breakpoint (Default breakpoint up to
+     * 1584px) This breakpoint supports 16 columns by default.
+     *
+     * @see https://www.carbondesignsystem.com/guidelines/layout#breakpoints
+     */
+    xlg?: ColumnSpan;
+    /**
+     * Specify constant column span, start, or end values that will not change
+     * based on breakpoint
+     */
+    span?: ColumnSpan;
+}
+export type ColumnProps<T extends React.ElementType> = PolymorphicProps<T, ColumnBaseProps>;
+export interface ColumnComponent {
+    <T extends React.ElementType>(props: ColumnProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const _default: ColumnComponent;
+export default _default;

package/lib/components/Grid/Column.js

@@ -75,8 +75,10 @@ function Column(_ref) {
   }
 
   var columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
-  var className = cx__default["default"](customClassName, columnClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--col"), columnClassName.length === 0));
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+  var className = cx__default["default"](customClassName, columnClassName, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--col"), columnClassName.length === 0)); // cast as any to let TypeScript allow passing in attributes to base component
+
+  var BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children);
 }
@@ -281,28 +283,30 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    var span = breakpoint.span,
-        offset = breakpoint.offset,
-        start = breakpoint.start,
-        end = breakpoint.end;
+    if (_rollupPluginBabelHelpers["typeof"](breakpoint) === 'object') {
+      var span = breakpoint.span,
+          offset = breakpoint.offset,
+          start = breakpoint.start,
+          end = breakpoint.end;
 
-    if (typeof offset === 'number' && offset > 0) {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(offset + 1));
-    }
+      if (typeof offset === 'number' && offset > 0) {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(offset + 1));
+      }
 
-    if (typeof start === 'number') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(start));
-    }
+      if (typeof start === 'number') {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-start-").concat(start));
+      }
 
-    if (typeof end === 'number') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-end-").concat(end));
-    }
+      if (typeof end === 'number') {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-end-").concat(end));
+      }
 
-    if (typeof span === 'number') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span));
-    } else if (typeof span === 'string') {
-      classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span.slice(0, -1)));
-      continue;
+      if (typeof span === 'number') {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span));
+      } else if (typeof span === 'string') {
+        classNames.push("".concat(prefix, "--").concat(name, ":col-span-").concat(span.slice(0, -1)));
+        continue;
+      }
     }
   }
 
@@ -340,19 +344,21 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    var span = breakpoint.span,
-        offset = breakpoint.offset;
+    if (_rollupPluginBabelHelpers["typeof"](breakpoint) === 'object') {
+      var span = breakpoint.span,
+          offset = breakpoint.offset;
 
-    if (typeof span === 'number') {
-      classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(span));
-    }
+      if (typeof span === 'number') {
+        classNames.push("".concat(prefix, "--col-").concat(name, "-").concat(span));
+      }
 
-    if (span === true) {
-      classNames.push("".concat(prefix, "--col-").concat(name));
-    }
+      if (span === true) {
+        classNames.push("".concat(prefix, "--col-").concat(name));
+      }
 
-    if (typeof offset === 'number') {
-      classNames.push("".concat(prefix, "--offset-").concat(name, "-").concat(offset));
+      if (typeof offset === 'number') {
+        classNames.push("".concat(prefix, "--offset-").concat(name, "-").concat(offset));
+      }
     }
   }
 

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

@@ -0,0 +1,24 @@
+/**
+ * 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 React from 'react';
+import { PolymorphicProps } from '../../types/common';
+interface ColumnHangBaseProps {
+    /**
+     * Pass in content that will be rendered within the `ColumnHang`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `ColumnHang`
+     */
+    className?: string;
+}
+export type ColumnHangProps<T extends React.ElementType> = PolymorphicProps<T, ColumnHangBaseProps>;
+export interface ColumnHangComponent {
+    <T extends React.ElementType>(props: ColumnHangProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const ColumnHangComponent: ColumnHangComponent;
+export { ColumnHangComponent as ColumnHang };

package/lib/components/Grid/ColumnHang.js

@@ -22,11 +22,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _excluded = ["as", "className", "children"];
+
 /**
  * Helper component for rendering content that hangs on the column. Useful when
  * trying to align content across different grid modes
  */
-
 function ColumnHang(_ref) {
   var _ref$as = _ref.as,
       BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
@@ -35,8 +35,10 @@ function ColumnHang(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](customClassName, "".concat(prefix, "--grid-column-hang"));
-  return /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
+  var className = cx__default["default"](customClassName, "".concat(prefix, "--grid-column-hang")); // cast as any to let TypeScript allow passing in attributes to base component
+
+  var BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className
   }), children);
 }
@@ -57,5 +59,6 @@ ColumnHang.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
+var ColumnHangComponent = ColumnHang;
 
-exports.ColumnHang = ColumnHang;
+exports.ColumnHang = ColumnHangComponent;

package/lib/components/Grid/FlexGrid.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 { GridComponent } from './GridTypes';
+declare const FlexGridComponent: GridComponent;
+export { FlexGridComponent as FlexGrid };

package/lib/components/Grid/FlexGrid.js

@@ -40,11 +40,13 @@ function FlexGrid(_ref) {
       rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix.usePrefix();
-  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--full-width"), fullWidth), _cx));
+  var className = cx__default["default"](containerClassName, (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--grid--full-width"), fullWidth), _cx)); // cast as any to let TypeScript allow passing in attributes to base component
+
+  var BaseComponentAsAny = BaseComponent;
   return /*#__PURE__*/React__default["default"].createElement(GridContext.GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({
+  }, /*#__PURE__*/React__default["default"].createElement(BaseComponentAsAny, _rollupPluginBabelHelpers["extends"]({
     className: className
   }, rest), children));
 }
@@ -82,5 +84,6 @@ FlexGrid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
+var FlexGridComponent = FlexGrid;
 
-exports.FlexGrid = FlexGrid;
+exports.FlexGrid = FlexGridComponent;

package/lib/components/Grid/Grid.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 { GridComponent } from './GridTypes';
+declare const GridAsGridComponent: GridComponent;
+export { GridAsGridComponent as Grid };

package/lib/components/Grid/Grid.js

@@ -63,5 +63,6 @@ Grid.propTypes = {
    */
   narrow: PropTypes__default["default"].bool
 };
+var GridAsGridComponent = Grid;
 
-exports.Grid = Grid;
+exports.Grid = GridAsGridComponent;