@carbon/react 1.46.1-rc.0 → 1.47.0-rc.0

package/es/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,179 @@
+/**
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
+    /**
+     * Provide `<ProgressStep>` components to be rendered in the
+     * `<ProgressIndicator>`
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide an optional className to be applied to the containing node
+     */
+    className?: string;
+    /**
+     * Optionally specify the current step array index
+     */
+    currentIndex?: number;
+    /**
+     * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+     */
+    onChange?: (data: number) => void;
+    /**
+     * Specify whether the progress steps should be split equally in size in the div
+     */
+    spaceEqually?: boolean;
+    /**
+     * Determines whether or not the ProgressIndicator should be rendered vertically.
+     */
+    vertical?: boolean;
+}
+declare function ProgressIndicator({ children, className: customClassName, currentIndex: controlledIndex, onChange, spaceEqually, vertical, ...rest }: ProgressIndicatorProps): JSX.Element;
+declare namespace ProgressIndicator {
+    var propTypes: {
+        /**
+         * Provide `<ProgressStep>` components to be rendered in the
+         * `<ProgressIndicator>`
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional className to be applied to the containing node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Optionally specify the current step array index
+         */
+        currentIndex: PropTypes.Requireable<number>;
+        /**
+         * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify whether the progress steps should be split equally in size in the div
+         */
+        spaceEqually: PropTypes.Requireable<boolean>;
+        /**
+         * Determines whether or not the ProgressIndicator should be rendered vertically.
+         */
+        vertical: PropTypes.Requireable<boolean>;
+    };
+}
+interface ProgressStepProps {
+    /**
+     * Provide an optional className to be applied to the containing `<li>` node
+     */
+    className?: string;
+    /**
+     * Specify whether the step has been completed
+     */
+    complete?: boolean;
+    /**
+     * Specify whether the step is the current step
+     */
+    current?: boolean;
+    /**
+     * Provide a description for the `<ProgressStep>`
+     */
+    description?: string;
+    /**
+     * Specify whether the step is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Index of the current step within the ProgressIndicator
+     */
+    index?: number;
+    /**
+     * Specify whether the step is invalid
+     */
+    invalid?: boolean;
+    /**
+     * Provide the label for the `<ProgressStep>`
+     */
+    label: string;
+    /**
+     * A callback called if the step is clicked or the enter key is pressed
+     */
+    onClick?: (event: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Provide the props that describe a progress step tooltip
+     */
+    overflowTooltipProps?: object;
+    /**
+     * Provide an optional secondary label
+     */
+    secondaryLabel?: string;
+    /**
+     * The ID of the tooltip content.
+     */
+    tooltipId?: string;
+    /**
+     * Optional method that takes in a message id and returns an
+     * internationalized string.
+     */
+    translateWithId?: (id: string) => string;
+}
+declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): JSX.Element;
+declare namespace ProgressStep {
+    var propTypes: {
+        /**
+         * Provide an optional className to be applied to the containing `<li>` node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the step has been completed
+         */
+        complete: PropTypes.Requireable<boolean>;
+        /**
+         * Specify whether the step is the current step
+         */
+        current: PropTypes.Requireable<boolean>;
+        /**
+         * Provide a description for the `<ProgressStep>`
+         */
+        description: PropTypes.Requireable<string>;
+        /**
+         * Specify whether the step is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Index of the current step within the ProgressIndicator
+         */
+        index: PropTypes.Requireable<number>;
+        /**
+         * Specify whether the step is invalid
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * Provide the label for the `<ProgressStep>`
+         */
+        label: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        /**
+         * A callback called if the step is clicked or the enter key is pressed
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide the props that describe a progress step tooltip
+         */
+        overflowTooltipProps: PropTypes.Requireable<object>;
+        /**
+         * Provide an optional secondary label
+         */
+        secondaryLabel: PropTypes.Requireable<string>;
+        /**
+         * The ID of the tooltip content.
+         */
+        tooltipId: PropTypes.Requireable<string>;
+        /**
+         * Optional method that takes in a message id and returns an
+         * internationalized string.
+         */
+        translateWithId: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+}
+export { ProgressIndicator, ProgressStep };

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -42,7 +42,7 @@ function ProgressIndicator(_ref) {
     [`${prefix}--progress`]: true,
     [`${prefix}--progress--vertical`]: vertical,
     [`${prefix}--progress--space-equal`]: spaceEqually && !vertical,
-    [customClassName]: customClassName
+    [customClassName ?? '']: customClassName
   });
   if (controlledIndex !== prevControlledIndex) {
     setCurrentIndex(controlledIndex);
@@ -130,15 +130,13 @@ function ProgressStep(_ref2) {
     [`${prefix}--progress-step--complete`]: complete,
     [`${prefix}--progress-step--incomplete`]: !complete && !current,
     [`${prefix}--progress-step--disabled`]: disabled,
-    [className]: className
+    [className ?? '']: className
   });
   const handleKeyDown = e => {
-    if (matches(e, [Enter, Space])) {
-      onClick();
+    if (matches(e, [Enter, Space]) && onClick) {
+      onClick(e);
     }
   };
-
-  // eslint-disable-next-line react/prop-types
   const SVGIcon = _ref3 => {
     let {
       complete,

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

@@ -0,0 +1,8 @@
+/**
+ * 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 { default as ProgressIndicatorSkeleton } from './ProgressIndicator.Skeleton';
+export * from './ProgressIndicator';

package/es/components/Search/Search.js

@@ -120,14 +120,15 @@ const Search = /*#__PURE__*/React__default.forwardRef(function Search(_ref, forw
     "aria-label": placeholder,
     className: searchClasses
   }, /*#__PURE__*/React__default.createElement("div", {
+    "aria-label": "button",
     "aria-labelledby": onExpand ? uniqueId : undefined,
-    role: onExpand ? 'button' : undefined,
+    role: "button",
     className: `${prefix}--search-magnifier`,
     onClick: onExpand,
     onKeyDown: handleExpandButtonKeyDown,
     tabIndex: onExpand && !isExpanded ? 0 : -1,
     ref: expandButtonRef,
-    "aria-expanded": onExpand && isExpanded ? true : undefined,
+    "aria-expanded": onExpand && isExpanded ? true : false,
     "aria-controls": onExpand ? uniqueId : undefined
   }, /*#__PURE__*/React__default.createElement(CustomSearchIcon, {
     icon: renderIcon

package/es/components/SecondaryButton/SecondaryButton.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 { ButtonProps } from '../Button';
+declare const SecondaryButton: <T extends React.ElementType<any>>(props: ButtonProps<T>) => JSX.Element;
+export default SecondaryButton;

package/es/components/SecondaryButton/SecondaryButton.js

@@ -13,6 +13,5 @@ import '../Button/Button.Skeleton.js';
 const SecondaryButton = props => /*#__PURE__*/React__default.createElement(Button, _extends({
   kind: "secondary"
 }, props));
-var SecondaryButton$1 = SecondaryButton;
 
-export { SecondaryButton$1 as default };
+export { SecondaryButton as default };

package/es/components/SecondaryButton/index.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 SecondaryButton from './SecondaryButton';
+export default SecondaryButton;
+export { SecondaryButton };

package/es/components/SkeletonIcon/SkeletonIcon.js

@@ -34,6 +34,5 @@ SkeletonIcon.propTypes = {
    */
   style: PropTypes.object
 };
-var SkeletonIcon$1 = SkeletonIcon;
 
-export { SkeletonIcon$1 as default };
+export { SkeletonIcon as default };

package/es/components/SkeletonIcon/index.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 SkeletonIcon from './SkeletonIcon';
+export default SkeletonIcon;
+export { SkeletonIcon };

package/es/components/Slider/Slider.Skeleton.js

@@ -78,6 +78,5 @@ SliderSkeleton.propTypes = {
    */
   twoHandles: PropTypes.bool
 };
-var SliderSkeleton$1 = SliderSkeleton;
 
-export { SliderSkeleton, SliderSkeleton$1 as default };
+export { SliderSkeleton, SliderSkeleton as default };

package/es/components/Slider/Slider.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 React, { KeyboardEventHandler, PureComponent } from 'react';
+import React, { type KeyboardEventHandler, PureComponent } from 'react';
 import PropTypes, { ReactNodeLike } from 'prop-types';
 /**
  * Distinguish two handles by lower and upper positions.

package/es/components/Slider/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.
+ */
+/// <reference types="react" />
+declare const Slider: import("react").FunctionComponent<import("./Slider").SliderProps>;
+export { default as SliderSkeleton } from './Slider.Skeleton';
+export default Slider;
+export { Slider };

package/es/components/Stack/Stack.d.ts

@@ -0,0 +1,58 @@
+/**
+ * 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';
+/**
+ * The steps in the spacing scale
+ * @type {Array<number>}
+ */
+declare const SPACING_STEPS: number[];
+interface StackProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Provide a custom element type to render as the outermost element in
+     * the Stack component. By default, this component will render a `div`.
+     */
+    as?: (() => React.ReactNode) | string | React.ElementType;
+    /**
+     * Provide the elements that will be rendered as children inside of the Stack
+     * component. These elements will have having spacing between them according
+     * to the `step` and `orientation` prop
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom class name to be used by the outermost element rendered by
+     * Stack
+     */
+    className?: string;
+    /**
+     * Provide either a custom value or a step from the spacing scale to be used
+     * as the gap in the layout
+     */
+    gap?: string | (typeof SPACING_STEPS)[number];
+    /**
+     * Specify the orientation of them items in the Stack
+     */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * The Stack component is a useful layout utility in a component-based model.
+ * This allows components to not use margin and instead delegate the
+ * responsibility of positioning and layout to parent components.
+ *
+ * In the case of the Stack component, it uses the spacing scale from the
+ * Design Language in order to determine how much space there should be between
+ * items rendered by the Stack component. It also supports a custom `gap` prop
+ * which will allow a user to provide a custom value for the gap of the layout.
+ *
+ * This component supports both horizontal and vertical orientations.
+ *
+ * Inspiration for this component:
+ *
+ * - https://paste.twilio.design/layout/stack/
+ * - https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
+ */
+declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<React.ReactNode>>;
+export { Stack };

package/es/components/Stack/Stack.js

@@ -21,7 +21,6 @@ const SPACING_STEPS = Array.from({
 }).map((_, step) => {
   return step + 1;
 });
-
 /**
  * The Stack component is a useful layout utility in a component-based model.
  * This allows components to not use margin and instead delegate the

package/es/components/Stack/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.
+ */
+import React from 'react';
+import { Stack } from './Stack';
+declare const HStack: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare const VStack: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export { HStack, Stack, VStack };

package/es/components/Switch/Switch.js

@@ -105,6 +105,5 @@ Switch.propTypes = {
    */
   text: PropTypes.string
 };
-var Switch$1 = Switch;
 
-export { Switch$1 as default };
+export { Switch as default };

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

@@ -0,0 +1,10 @@
+/**
+ * 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 Switch from './Switch';
+import IconSwitch from './IconSwitch';
+export default Switch;
+export { Switch, IconSwitch };

package/es/components/TextArea/TextArea.d.ts

@@ -73,6 +73,11 @@ export interface TextAreaProps extends React.InputHTMLAttributes<HTMLTextAreaEle
      * `<textarea>` is clicked
      */
     onClick?: (evt: React.MouseEvent<HTMLTextAreaElement>) => void;
+    /**
+     * Optionally provide an `onKeyDown` handler that is called whenever `<textarea>`
+     * is keyed
+     */
+    onKeyDown?: (evt: React.KeyboardEvent<HTMLTextAreaElement>) => void;
     /**
      * Specify the placeholder attribute for the `<textarea>`
      */

package/es/components/TextArea/TextArea.js

@@ -32,6 +32,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     hideLabel,
     onChange = noopFn,
     onClick = noopFn,
+    onKeyDown = noopFn,
     invalid = false,
     invalidText = '',
     helperText = '',
@@ -90,6 +91,9 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
           evt.preventDefault();
         }
       }
+      if (!disabled && onKeyDown) {
+        onKeyDown(evt);
+      }
     },
     onPaste: evt => {
       if (!disabled) {
@@ -320,6 +324,11 @@ TextArea.propTypes = {
    * `<textarea>` is clicked
    */
   onClick: PropTypes.func,
+  /**
+   * Optionally provide an `onKeyDown` handler that is called whenever `<textarea>`
+   * is keyed
+   */
+  onKeyDown: PropTypes.func,
   /**
    * Specify the placeholder attribute for the `<textarea>`
    */

package/es/components/TileGroup/TileGroup.d.ts

@@ -0,0 +1,83 @@
+/**
+ * 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 PropTypes, { ReactNodeLike } from 'prop-types';
+import { ReactAttr } from '../../types/common';
+type ExcludedAttributes = 'onChange';
+export interface TileGroupProps extends Omit<ReactAttr<HTMLFieldSetElement>, ExcludedAttributes> {
+    /**
+     * Provide a collection of <RadioTile> components to render in the group
+     */
+    children?: ReactNodeLike;
+    /**
+     * Provide an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Specify the the value of <RadioTile> to be selected by default
+     */
+    defaultSelected?: string | number;
+    /**
+     * Specify whether the group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Provide an optional legend for this group
+     */
+    legend?: string;
+    /**
+     * Specify the name of the underlying `<input>` nodes
+     */
+    name: string;
+    /**
+     * Provide an optional `onChange` hook that is called whenever the value of the group changes
+     */
+    onChange?: (selection: unknown, name: string, evt: unknown) => void;
+    /**
+     * Specify the value that is currently selected in the group
+     */
+    valueSelected?: string | number;
+}
+declare const TileGroup: {
+    (props: any): JSX.Element;
+    propTypes: {
+        /**
+         * Provide a collection of <RadioTile> components to render in the group
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * Provide an optional className to be applied to the container node
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Specify the the value of <RadioTile> to be selected by default
+         */
+        defaultSelected: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        /**
+         * Specify whether the group is disabled
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * Provide an optional legend for this group
+         */
+        legend: PropTypes.Requireable<string>;
+        /**
+         * Specify the name of the underlying `<input>` nodes
+         */
+        name: PropTypes.Validator<string>;
+        /**
+         * Provide an optional `onChange` hook that is called whenever the value of
+         * the group changes
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Specify the value that is currently selected in the group
+         */
+        valueSelected: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+    };
+    displayName: string;
+};
+export default TileGroup;