@carbon/ibm-products 2.80.0-rc.0 → 2.81.0-rc.0

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -1,239 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 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.
- */
-
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef, useContext, useState, useEffect, isValidElement } from 'react';
-import PropTypes from '../../_virtual/index.js';
-import cx from 'classnames';
-import { Grid, Column, FormGroup } from '@carbon/react';
-import { StepsContext, StepNumberContext } from './CreateTearsheet.js';
-import { pkg } from '../../settings.js';
-import pconsole from '../../global/js/utils/pconsole.js';
-import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
-import { useRetrieveStepData } from '../../global/js/hooks/useRetrieveStepData.js';
-
-const componentName = 'CreateTearsheetStep';
-const blockClass = `${pkg.prefix}--tearsheet-create__step`;
-
-// Default values for props
-const defaults = {
-  hasFieldset: true,
-  includeStep: true
-};
-
-/**
- * Configuration options for customizing the behavior of the experimentalSecondary submit button.
- *
- * @property {string} [labelText] - Optional text to replace the default button text.
- * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
- * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
- * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
- */
-
-const CreateTearsheetStep = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-
-    children,
-    className,
-    description,
-    disableSubmit,
-    experimentalSecondarySubmit,
-    fieldsetLegendText,
-    fieldsetLegendId,
-    hasFieldset = defaults.hasFieldset,
-    includeStep = defaults.includeStep,
-    introStep,
-    invalid,
-    onMount,
-    onNext,
-    onPrevious,
-    secondaryLabel,
-    subtitle,
-    title,
-    // Collect any other property values passed in.
-    ...rest
-  } = _ref;
-  const localRef = useRef(null);
-  const stepRef = ref || localRef;
-  const stepRefValue = stepRef.current;
-  const stepsContext = useContext(StepsContext);
-  const stepNumber = useContext(StepNumberContext);
-  const [shouldIncludeStep, setShouldIncludeStep] = useState(includeStep);
-  const previousState = usePreviousValue({
-    currentStep: stepsContext?.currentStep
-  });
-  useRetrieveStepData({
-    stepsContext,
-    stepNumber,
-    introStep: !!introStep,
-    shouldIncludeStep,
-    secondaryLabel: secondaryLabel || '',
-    title,
-    invalid: !!invalid
-  });
-
-  // This useEffect reports back the onMount value so that they can be used
-  // in the appropriate custom hooks.
-  useEffect(() => {
-    if (stepNumber === stepsContext?.currentStep && previousState?.currentStep !== stepsContext?.currentStep) {
-      stepsContext?.setOnMount(onMount);
-      stepsContext?.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
-    }
-  }, [onMount, experimentalSecondarySubmit, stepsContext, stepNumber, previousState?.currentStep]);
-
-  // Used to take the `includeStep` prop and use it as a local state value
-  useEffect(() => {
-    setShouldIncludeStep(includeStep);
-  }, [includeStep, stepsContext, title]);
-
-  // Whenever we are the current step, supply our disableSubmit and onNext values to the
-  // steps container context so that it can manage the 'Next' button appropriately.
-  useEffect(() => {
-    if (stepNumber === stepsContext?.currentStep) {
-      stepsContext.setIsDisabled(!!disableSubmit);
-      stepsContext?.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
-      stepsContext?.setOnPrevious(onPrevious);
-
-      //Handle props for experimentalSecondarySubmit button, depending on state change
-      stepsContext?.setExperimentalSecondarySubmit(experimentalSecondarySubmit);
-    }
-  }, [stepsContext, stepNumber, disableSubmit, onNext, onPrevious, stepRef, stepRefValue, experimentalSecondarySubmit]);
-  const renderDescription = () => {
-    if (description) {
-      if (typeof description === 'string') {
-        return /*#__PURE__*/React__default.createElement("p", {
-          className: `${blockClass}--description`
-        }, description);
-      }
-      if (/*#__PURE__*/isValidElement(description)) {
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: `${blockClass}--description`
-        }, description);
-      }
-    }
-    return null;
-  };
-  return stepsContext ? /*#__PURE__*/React__default.createElement("div", {
-    ref: stepRef,
-    inert: stepNumber !== stepsContext?.currentStep
-  }, /*#__PURE__*/React__default.createElement(Grid, _extends({}, rest, {
-    className: cx(blockClass, className, {
-      [`${blockClass}__step--hidden-step`]: stepNumber !== stepsContext?.currentStep,
-      [`${blockClass}__step--visible-step`]: stepNumber === stepsContext?.currentStep
-    })
-  }), /*#__PURE__*/React__default.createElement(Column, {
-    xlg: 12,
-    lg: 12,
-    md: 8,
-    sm: 4
-  }, /*#__PURE__*/React__default.createElement("h4", {
-    className: `${blockClass}--title`
-  }, title), subtitle && /*#__PURE__*/React__default.createElement("h5", {
-    className: `${blockClass}--subtitle`
-  }, subtitle), renderDescription()), /*#__PURE__*/React__default.createElement(Column, {
-    span: 100
-  }, hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
-    legendText: fieldsetLegendText,
-    className: `${blockClass}--fieldset`,
-    legendId: fieldsetLegendId
-  }, children) : children))) : pconsole.warn(`You have tried using a ${componentName} component outside of a CreateTearsheet. This is not allowed. ${componentName}s should always be children of the CreateTearsheet`);
-});
-CreateTearsheetStep.propTypes = {
-  /**
-   * Content that shows in the tearsheet step
-   */
-  children: PropTypes.node,
-  /**
-   * Sets an optional className to be added to the tearsheet step
-   */
-  className: PropTypes.string,
-  /**
-   * Sets an optional description on the step component
-   */
-  description: PropTypes.node,
-  /**
-   * This will conditionally disable the submit button in the multi step Tearsheet
-   */
-  disableSubmit: PropTypes.bool,
-  /**
-   * Configuration options for customizing the behavior of the experimentalSecondary submit button.
-   *
-   * @property {string} [labelText] - Optional text to replace the default button text.
-   * @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
-   * @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
-   * @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
-   */
-  /**@ts-ignore*/
-  experimentalSecondarySubmit: PropTypes.shape({
-    labelText: PropTypes.string,
-    disabled: PropTypes.bool,
-    hideSecondarySubmit: PropTypes.bool,
-    onClick: PropTypes.func
-  }),
-  /**
-   * This is the required legend id that appears as the aria-labelledby of fieldset for accessibility purposes.
-   */
-  /**@ts-ignore*/
-  fieldsetLegendId: PropTypes.node,
-  /**
-   * This is the required legend text that appears above a fieldset html element for accessibility purposes.
-   * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
-   * Otherwise, use CSS to hide/remove this label text.
-   */
-  /**@ts-ignore*/
-  fieldsetLegendText: PropTypes.string,
-  /**
-   * This optional prop will render your form content inside of a fieldset html element
-   * and is defaulted to true.
-   * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
-   */
-  /**@ts-ignore*/
-  hasFieldset: PropTypes.bool,
-  /**
-   * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
-   * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
-   */
-  includeStep: PropTypes.bool,
-  /**
-   * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
-   */
-  introStep: PropTypes.bool,
-  /**
-   * This optional prop will indicate an error icon on the progress indicator step item
-   */
-  invalid: PropTypes.bool,
-  /**
-   * Optional function to be called on initial mount of a step.
-   * For example, this can be used to fetch data that is required on a particular step.
-   */
-  onMount: PropTypes.func,
-  /**
-   * Optional function to be called when you move to the next step.
-   * For example, this can be used to validate input fields before proceeding to the next step.
-   * This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the next button.
-   */
-  onNext: PropTypes.func,
-  /**
-   * Optional function to be called when you move to the previous step.
-   */
-  onPrevious: PropTypes.func,
-  /**
-   * Sets the optional secondary label on the progress step component
-   */
-  secondaryLabel: PropTypes.string,
-  /**
-   * Sets an optional subtitle on the step component
-   */
-  subtitle: PropTypes.string,
-  /**
-   * Sets the title text for a tearsheet step
-   */
-  title: PropTypes.node.isRequired
-};
-
-export { CreateTearsheetStep };

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

@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2021
- *
- * 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 { CreateTearsheet } from './CreateTearsheet';
-export { CreateTearsheetStep } from './CreateTearsheetStep';
-export { CreateTearsheetDivider } from './CreateTearsheetDivider';
-export type { CreateTearsheetProps } from './CreateTearsheet';

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts

@@ -1,86 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2021
- *
- * 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, { PropsWithChildren, ReactNode } from 'react';
-type VerticalPosition = 'normal' | 'lower';
-export interface CreateTearsheetNarrowProps extends PropsWithChildren {
-    /**
-     * Provide the contents of the CreateTearsheetNarrow.
-     */
-    children: ReactNode;
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * A description of the flow, displayed in the header area of the tearsheet.
-     */
-    description?: ReactNode;
-    /**
-     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
-     * Returning `true` prevents the primary button from being clicked until required fields are completed.
-     */
-    disableSubmit?: boolean;
-    /**
-     * Specifies an optional field that provides a additional context for a form
-     */
-    formDescription?: ReactNode;
-    /**
-     * Specifies a field that provides a title for a form
-     */
-    formTitle?: ReactNode;
-    /**
-     * A label for the tearsheet, displayed in the header area of the tearsheet
-     * to maintain context for the tearsheet (e.g. as the title changes from page
-     * to page of a multi-page task).
-     */
-    label?: ReactNode;
-    /**
-     * An optional handler that is called when the user closes the tearsheet (by
-     * clicking the close button, if enabled, or clicking outside, if enabled).
-     * Returning `false` here prevents the modal from closing.
-     */
-    onRequestClose?: () => void;
-    /**
-     * Specifies an optional handler which is called when the CreateTearsheetNarrow
-     * primary button is pressed.
-     */
-    onRequestSubmit?: () => void;
-    /**
-     * Specifies whether the tearsheet is currently open.
-     */
-    open?: boolean;
-    /**
-     * Specifies the primary button's text in the CreateTearsheetNarrow.
-     */
-    primaryButtonText: string;
-    /**
-     * Specifies the secondary button's text in the CreateTearsheetNarrow.
-     */
-    secondaryButtonText: string;
-    /**
-     * Specifies which DOM element in the form should be focused.
-     */
-    selectorPrimaryFocus?: ReactNode;
-    /**
-     * The main title of the tearsheet, displayed in the header area.
-     */
-    title?: ReactNode;
-    /**
-     * The position of the top of tearsheet in the viewport. The 'normal'
-     * position (the default) is a short distance down from the top of the
-     * viewport, leaving room at the top for a global header bar to show through
-     * from below. The 'lower' position provides a little extra room at the top
-     * to allow an action bar navigation or breadcrumbs to also show through.
-     */
-    verticalPosition?: VerticalPosition;
-}
-/**
- * Use a narrow tearsheet as an alternative to a modal when there is scrolling.
- * Use when the form fields can be broken down into sections using section headers.
- */
-export declare const CreateTearsheetNarrow: React.ForwardRefExoticComponent<CreateTearsheetNarrowProps & React.RefAttributes<unknown>>;
-export {};

package/es/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -1,166 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 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.
- */
-
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
-import { Form } from '@carbon/react';
-import PropTypes from '../../_virtual/index.js';
-import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow.js';
-import cx from 'classnames';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { pkg } from '../../settings.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-const blockClass = `${pkg.prefix}--create-tearsheet-narrow`;
-const componentName = 'CreateTearsheetNarrow';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-/**
- * Use a narrow tearsheet as an alternative to a modal when there is scrolling.
- * Use when the form fields can be broken down into sections using section headers.
- */
-const CreateTearsheetNarrow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    children,
-    className,
-    description,
-    disableSubmit,
-    formDescription,
-    formTitle,
-    label,
-    open,
-    onRequestClose,
-    onRequestSubmit,
-    primaryButtonText,
-    secondaryButtonText,
-    selectorPrimaryFocus,
-    title,
-    verticalPosition,
-    ...rest
-  } = _ref;
-  const actions = [{
-    label: primaryButtonText,
-    onClick: onRequestSubmit,
-    kind: 'primary',
-    disabled: disableSubmit
-  }, {
-    label: secondaryButtonText,
-    onClick: onRequestClose,
-    kind: 'secondary'
-  }];
-  const formTextClass = `${blockClass}__content-text`;
-  const formTitleId = uuidv4();
-  return /*#__PURE__*/React__default.createElement(TearsheetNarrow, _extends({}, rest, {
-    title: title,
-    description: description,
-    className: cx(blockClass, className),
-    actions: actions,
-    open: open,
-    ref: ref,
-    onClose: () => {
-      onRequestClose?.();
-      return false;
-    },
-    label: label,
-    selectorPrimaryFocus: selectorPrimaryFocus,
-    verticalPosition: verticalPosition,
-    role: "presentation"
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("h3", {
-    className: cx(`${blockClass}__form-title-text`, formTextClass),
-    id: formTitleId
-  }, formTitle), /*#__PURE__*/React__default.createElement("p", {
-    className: cx(`${blockClass}__form-description-text`, formTextClass)
-  }, formDescription), /*#__PURE__*/React__default.createElement(Form, {
-    className: `${blockClass}__form`,
-    "aria-labelledby": formTitleId,
-    onSubmit: e => e.preventDefault()
-  }, children));
-});
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-CreateTearsheetNarrow.displayName = componentName;
-
-// The types and DocGen commentary for the component props,
-// in alphabetical order (for consistency).
-// See https://www.npmjs.com/package/prop-types#usage.
-CreateTearsheetNarrow.propTypes = {
-  /**
-   * Provide the contents of the CreateTearsheetNarrow.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Provide an optional class to be applied to the containing node.
-   */
-  className: PropTypes.string,
-  /**
-   * A description of the flow, displayed in the header area of the tearsheet.
-   */
-  description: PropTypes.node,
-  /**
-   * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
-   * Returning `true` prevents the primary button from being clicked until required fields are completed.
-   */
-  disableSubmit: PropTypes.bool,
-  /**
-   * Specifies an optional field that provides a additional context for a form
-   */
-  formDescription: PropTypes.node,
-  /**
-   * Specifies a field that provides a title for a form
-   */
-  formTitle: PropTypes.node,
-  /**
-   * A label for the tearsheet, displayed in the header area of the tearsheet
-   * to maintain context for the tearsheet (e.g. as the title changes from page
-   * to page of a multi-page task).
-   */
-  label: PropTypes.node,
-  /**
-   * An optional handler that is called when the user closes the tearsheet (by
-   * clicking the close button, if enabled, or clicking outside, if enabled).
-   * Returning `false` here prevents the modal from closing.
-   */
-  onRequestClose: PropTypes.func,
-  /**
-   * Specifies an optional handler which is called when the CreateTearsheetNarrow
-   * primary button is pressed.
-   */
-  onRequestSubmit: PropTypes.func,
-  /**
-   * Specifies whether the tearsheet is currently open.
-   */
-  open: PropTypes.bool,
-  /**
-   * Specifies the primary button's text in the CreateTearsheetNarrow.
-   */
-  primaryButtonText: PropTypes.string.isRequired,
-  /**
-   * Specifies the secondary button's text in the CreateTearsheetNarrow.
-   */
-  secondaryButtonText: PropTypes.string.isRequired,
-  /**
-   * Specifies which DOM element in the form should be focused.
-   */
-  selectorPrimaryFocus: PropTypes.node,
-  /**
-   * The main title of the tearsheet, displayed in the header area.
-   */
-  title: PropTypes.node,
-  /**
-   * The position of the top of tearsheet in the viewport. The 'normal'
-   * position (the default) is a short distance down from the top of the
-   * viewport, leaving room at the top for a global header bar to show through
-   * from below. The 'lower' position provides a little extra room at the top
-   * to allow an action bar navigation or breadcrumbs to also show through.
-   */
-  verticalPosition: PropTypes.oneOf(['normal', 'lower'])
-};
-
-export { CreateTearsheetNarrow };

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

@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2021
- *
- * 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 { CreateTearsheetNarrow } from './CreateTearsheetNarrow';
-export type { CreateTearsheetNarrowProps } from './CreateTearsheetNarrow';

package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts

@@ -1,96 +0,0 @@
-/**
- * Copyright IBM Corp. 2022, 2022
- *
- * 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 { Size, Theme } from './types';
-import { Column } from 'react-table';
-import React from 'react';
-export interface DataSpreadsheetProps {
-    /**
-     * Specifies the cell height
-     */
-    cellSize?: Size;
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The data that will build the column headers
-     */
-    columns?: readonly Column<object>[];
-    /**
-     * Disable column swapping, default false
-     */
-    disableColumnSwapping?: boolean;
-    /**
-     * The spreadsheet data that will be rendered in the body of the spreadsheet component
-     */
-    data?: readonly object[];
-    /**
-     * Sets the number of empty rows to be created when there is no data provided
-     */
-    defaultEmptyRowCount?: number;
-    /**
-     * Check if has custom row header component attached
-     */
-    hasCustomRowHeader?: boolean;
-    /**
-     * The spreadsheet id
-     */
-    id?: number | string;
-    /**
-     * The event handler that is called when the active cell changes
-     */
-    onActiveCellChange?: () => void;
-    /**
-     * Callback for columns after being dragged
-     */
-    onColDrag?: ({ ...args }: {
-        [x: string]: any;
-    }) => void;
-    /**
-     * The setter fn for the data prop
-     */
-    onDataUpdate?: ({ ...args }: {
-        [x: string]: any;
-    }) => void;
-    /**
-     * The event handler that is called when the selection area values change
-     */
-    onSelectionAreaChange?: () => void;
-    /**
-     * Read-only table
-     */
-    readOnlyTable?: boolean;
-    /**
-     * Position of the custom row numbering component
-     */
-    renderRowHeaderDirection?: 'left' | 'right';
-    /**
-     * Component next to numbering rows
-     */
-    renderRowHeader?: (index: number) => any[];
-    /**
-     * The aria label applied to the Select all button
-     */
-    selectAllAriaLabel: string;
-    /**
-     * The aria label applied to the Data spreadsheet component
-     */
-    spreadsheetAriaLabel: string;
-    /**
-     * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
-     */
-    theme?: Theme;
-    /**
-     * The total number of columns to be initially visible, additional columns will be rendered and
-     * visible via horizontal scrollbar
-     */
-    totalVisibleColumns?: number;
-}
-/**
- * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
- */
-export declare const DataSpreadsheet: React.ForwardRefExoticComponent<DataSpreadsheetProps & React.RefAttributes<HTMLDivElement>>;