@carbon/react 1.22.0 → 1.23.0

package/es/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/es/components/Grid/Column.js

@@ -46,8 +46,10 @@ function Column(_ref) {
   }
 
   var columnClassName = getClassNameForFlexGridBreakpoints([sm, md, lg, xlg, max], prefix);
-  var className = cx(customClassName, columnClassName, _defineProperty({}, "".concat(prefix, "--col"), columnClassName.length === 0));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  var className = cx(customClassName, columnClassName, _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.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }
@@ -252,28 +254,30 @@ function getClassNameForBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    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 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 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(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 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 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;
+      }
     }
   }
 
@@ -311,19 +315,21 @@ function getClassNameForFlexGridBreakpoints(breakpoints, prefix) {
       continue;
     }
 
-    var span = breakpoint.span,
-        offset = breakpoint.offset;
+    if (_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/es/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/es/components/Grid/ColumnHang.js

@@ -12,11 +12,11 @@ import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 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,
@@ -25,8 +25,10 @@ function ColumnHang(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var className = cx(customClassName, "".concat(prefix, "--grid-column-hang"));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
+  var className = cx(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.createElement(BaseComponentAsAny, _extends({}, rest, {
     className: className
   }), children);
 }
@@ -47,5 +49,6 @@ ColumnHang.propTypes = {
    */
   className: PropTypes.string
 };
+var ColumnHangComponent = ColumnHang;
 
-export { ColumnHang };
+export { ColumnHangComponent as ColumnHang };

package/es/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/es/components/Grid/FlexGrid.js

@@ -30,11 +30,13 @@ function FlexGrid(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--grid"), true), _defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _defineProperty(_cx, "".concat(prefix, "--grid--full-width"), fullWidth), _cx));
+  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--grid"), true), _defineProperty(_cx, "".concat(prefix, "--grid--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--grid--narrow"), narrow), _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.createElement(GridSettings, {
     mode: "flexbox",
     subgrid: false
-  }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  }, /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children));
 }
@@ -72,5 +74,6 @@ FlexGrid.propTypes = {
    */
   narrow: PropTypes.bool
 };
+var FlexGridComponent = FlexGrid;
 
-export { FlexGrid };
+export { FlexGridComponent as FlexGrid };

package/es/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/es/components/Grid/Grid.js

@@ -8,17 +8,17 @@
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import { CSSGrid } from './CSSGrid.js';
-import { FlexGrid } from './FlexGrid.js';
+import { CSSGrid as CSSGridComponent } from './CSSGrid.js';
+import { FlexGrid as FlexGridComponent } from './FlexGrid.js';
 
 function Grid(props) {
   var enableCSSGrid = useFeatureFlag('enable-css-grid');
 
   if (enableCSSGrid) {
-    return /*#__PURE__*/React__default.createElement(CSSGrid, props);
+    return /*#__PURE__*/React__default.createElement(CSSGridComponent, props);
   }
 
-  return /*#__PURE__*/React__default.createElement(FlexGrid, props);
+  return /*#__PURE__*/React__default.createElement(FlexGridComponent, props);
 }
 
 Grid.propTypes = {
@@ -54,5 +54,6 @@ Grid.propTypes = {
    */
   narrow: PropTypes.bool
 };
+var GridAsGridComponent = Grid;
 
-export { Grid };
+export { GridAsGridComponent as Grid };

package/es/components/Grid/GridContext.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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 * as React from 'react';
+export type GridMode = 'flexbox' | 'css-grid';
+export interface GridSettingContext {
+    /**
+     * The grid mode for the GridContext
+     */
+    mode: GridMode;
+    /**
+     * Specifies whether subgrid should be enabled
+     */
+    subgrid?: boolean;
+}
+export interface GridSettingsProps {
+    /**
+     * Pass in components which will be rendered within the `GridSettings`
+     * component
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify the grid mode for the GridContext
+     */
+    mode: GridMode;
+    /**
+     * Specify whether subgrid should be enabled
+     */
+    subgrid?: boolean;
+}
+export declare const GridSettings: React.FC<GridSettingsProps>;
+/**
+ * Helper function for accessing the GridContext value
+ */
+export declare const useGridSettings: () => GridSettingContext;

package/es/components/Grid/GridContext.js

@@ -12,12 +12,11 @@ import * as React from 'react';
  * Provides a grid context for communication the grid "mode" (flexbox or
  * css-grid) along with subgrid information.
  */
-
 var GridSettingsContext = /*#__PURE__*/React.createContext({
   mode: 'flexbox',
   subgrid: false
 });
-function GridSettings(_ref) {
+var GridSettings = function GridSettings(_ref) {
   var children = _ref.children,
       mode = _ref.mode,
       _ref$subgrid = _ref.subgrid,
@@ -31,7 +30,8 @@ function GridSettings(_ref) {
   return /*#__PURE__*/React.createElement(GridSettingsContext.Provider, {
     value: value
   }, children);
-}
+};
+var gridModes = ['flexbox', 'css-grid'];
 GridSettings.propTypes = {
   /**
    * Pass in components which will be rendered within the `GridSettings`
@@ -42,7 +42,7 @@ GridSettings.propTypes = {
   /**
    * Specify the grid mode for the GridContext
    */
-  mode: PropTypes.oneOf(['flexbox', 'css-grid']).isRequired,
+  mode: PropTypes.oneOf(gridModes).isRequired,
 
   /**
    * Specify whether subgrid should be enabled
@@ -53,8 +53,8 @@ GridSettings.propTypes = {
  * Helper function for accessing the GridContext value
  */
 
-function useGridSettings() {
+var useGridSettings = function useGridSettings() {
   return React.useContext(GridSettingsContext);
-}
+};
 
 export { GridSettings, useGridSettings };

package/es/components/Grid/GridTypes.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+/// <reference types="react" />
+import { PolymorphicProps } from '../../types/common';
+interface GridBaseProps {
+    /**
+     * Pass in content that will be rendered within the `Grid`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `Grid`
+     */
+    className?: string;
+    /**
+     * Collapse the gutter to 1px. Useful for fluid layouts.
+     * Rows have 1px of margin between them to match gutter.
+     */
+    condensed?: boolean;
+    /**
+     * Remove the default max width that the grid has set
+     */
+    fullWidth?: boolean;
+    /**
+     * Container hangs 16px into the gutter. Useful for
+     * typographic alignment with and without containers.
+     */
+    narrow?: boolean;
+}
+export type GridProps<T extends React.ElementType> = PolymorphicProps<T, GridBaseProps>;
+export interface GridComponent {
+    <T extends React.ElementType>(props: GridProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+export {};

package/es/components/Grid/Row.d.ts

@@ -0,0 +1,34 @@
+/**
+ * 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';
+export interface RowBaseProps {
+    /**
+     * Pass in content that will be rendered within the `Row`
+     */
+    children?: React.ReactNode;
+    /**
+     * Specify a custom className to be applied to the `Row`
+     */
+    className?: string;
+    /**
+     * Specify a single row as condensed.Rows that are adjacent
+     * and are condensed will have 2px of margin between them to match gutter.
+     */
+    condensed?: boolean;
+    /**
+     * Specify a single row as narrow. The container will hang
+     * 16px into the gutter.
+     */
+    narrow?: boolean;
+}
+export type RowProps<T extends React.ElementType> = PolymorphicProps<T, RowBaseProps>;
+export interface RowComponent {
+    <T extends React.ElementType>(props: RowProps<T>, context?: any): React.ReactElement<any, any> | null;
+}
+declare const _default: RowComponent;
+export default _default;

package/es/components/Grid/Row.js

@@ -27,8 +27,10 @@ function Row(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--row"), true), _defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx));
-  return /*#__PURE__*/React__default.createElement(BaseComponent, _extends({
+  var className = cx(containerClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--row"), true), _defineProperty(_cx, "".concat(prefix, "--row--condensed"), condensed), _defineProperty(_cx, "".concat(prefix, "--row--narrow"), narrow), _cx)); // TypeScript type validation reports conflicts on different instances of keyof JSX.IntrinsicElements
+
+  var BaseComponentAsAny = BaseComponent;
+  return /*#__PURE__*/React__default.createElement(BaseComponentAsAny, _extends({
     className: className
   }, rest), children);
 }

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

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ */
+export { FlexGrid } from './FlexGrid';
+export { Grid } from './Grid';
+export { default as Row } from './Row';
+export { default as Column } from './Column';
+export { ColumnHang } from './ColumnHang';

package/es/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,132 @@
+/**
+ * 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 React, { ReactNode } from 'react';
+export declare const translationIds: {
+    'increment.number': string;
+    'decrement.number': string;
+};
+type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * `true` to allow empty string.
+     */
+    allowEmpty?: boolean;
+    /**
+     * Specify an optional className to be applied to the wrapper node
+     */
+    className?: string;
+    /**
+     * Optional starting value for uncontrolled state
+     */
+    defaultValue?: number | string;
+    /**
+     * Specify if the wheel functionality for the input should be disabled, or not
+     */
+    disableWheel?: boolean;
+    /**
+     * Specify if the control should be disabled, or not
+     */
+    disabled?: boolean;
+    /**
+     * Provide text that is used alongside the control label for additional help
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel?: boolean;
+    /**
+     * Specify whether you want the steppers to be hidden
+     */
+    hideSteppers?: boolean;
+    /**
+     * Provide a description for up/down icons that can be read by screen readers
+     */
+    iconDescription?: string;
+    /**
+     * Specify a custom `id` for the input
+     */
+    id: string;
+    /**
+     * Specify if the currently value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText?: ReactNode;
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label?: ReactNode;
+    /**
+     * `true` to use the light version.
+     *
+     * @deprecated The `light` prop for `NumberInput` is no longer needed and has
+     *     been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.
+     */
+    light?: boolean;
+    /**
+     * The maximum value.
+     */
+    max?: number;
+    /**
+     * The minimum value.
+     */
+    min?: number;
+    /**
+     * Provide an optional handler that is called when the internal state of
+     * NumberInput changes. This handler is called with event and state info.
+     * `(event, { value, direction }) => void`
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement>, state: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when the up/down button is clicked
+     */
+    onClick?: (event: React.MouseEvent<HTMLElement>, state?: {
+        value: number | string;
+        direction: string;
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * Specify if the component should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * Specify the size of the Number Input.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how much the values should increase/decrease upon clicking on up/down button
+     */
+    step?: number;
+    /**
+     * Provide custom text for the component for each translation id
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify the value of the input
+     */
+    value?: number | string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: ReactNode;
+}
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<unknown>>;
+export { NumberInput };