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

package/es/components/EditTearsheet/EditTearsheet.d.ts

@@ -1,89 +0,0 @@
-/**
- * Copyright IBM Corp. 2022, 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, { ReactNode, PropsWithChildren } from 'react';
-export type FormContextType = {
-    currentForm: number;
-    setFormTitle: () => void;
-};
-export declare const FormContext: React.Context<FormContextType | null>;
-export declare const FormNumberContext: React.Context<number>;
-interface EditTearsheetProps extends PropsWithChildren {
-    /**
-     * The cancel button text
-     */
-    cancelButtonText?: string;
-    /**
-     * The main content of the tearsheet
-     */
-    children?: ReactNode;
-    /**
-     * An optional class or classes to be added to the outermost element.
-     */
-    className?: string;
-    /**
-     * A description of the flow, displayed in the header area of the tearsheet.
-     */
-    description?: ReactNode;
-    /**
-     * Used to set the size of the influencer
-     */
-    influencerWidth?: 'narrow' | 'wide';
-    /**
-     * 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.
-     */
-    onClose?: () => boolean | void;
-    /**
-     * An optional handler that is called when a user changes forms via clicking
-     * an influencer nav item.
-     * Returns the index of the selected form.
-     */
-    onFormChange?: (formIndex: number) => number;
-    /**
-     * Specify a handler for submitting the tearsheet. Throughout its execution
-     * the submit button will be disabled and include a loading indicator.
-     */
-    onRequestSubmit: () => void;
-    /**
-     * Specifies whether the tearsheet is currently open.
-     */
-    open?: boolean;
-    /**
-     * Specifies the aria label for the SideNav from Carbon UIShell
-     */
-    sideNavAriaLabel?: string;
-    /**
-     * The submit button text
-     */
-    submitButtonText?: string;
-    /**
-     * 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?: 'normal' | 'lower';
-}
-/**
- * **This component is deprecated.** <br>
- * Use Tearsheet with medium to complex edits. See usage guidance for further information.
- * @deprecated
- */
-export declare const EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/es/components/EditTearsheet/EditTearsheet.js

@@ -1,225 +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, useState, useRef, createContext } from 'react';
-import PropTypes from '../../_virtual/index.js';
-import cx from 'classnames';
-import { Form, SideNav, SideNavItems, SideNavMenuItem } from '@carbon/react';
-import { pkg } from '../../settings.js';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { TearsheetShell } from '../Tearsheet/TearsheetShell.js';
-import { prepareProps } from '../../global/js/utils/props-helper.js';
-
-const componentName = 'EditTearsheet';
-const blockClass = `${pkg.prefix}--tearsheet-edit`;
-// This is a general context for the forms container
-// containing information about the state of the container
-// and providing some callback methods for forms to use
-const FormContext = /*#__PURE__*/createContext(null);
-
-// This is a context supplied separately to each form in the container
-// to let it know what number it is in the sequence of forms
-const FormNumberContext = /*#__PURE__*/createContext(0);
-
-// Default values for props
-const defaults = {
-  verticalPosition: 'normal',
-  influencerWidth: 'narrow',
-  sideNavAriaLabel: 'Side navigation'
-};
-
-// Note that the descriptions here should be kept in sync with those for the
-// corresponding props for TearsheetNarrow and TearsheetShell components.
-
-/**
- * **This component is deprecated.** <br>
- * Use Tearsheet with medium to complex edits. See usage guidance for further information.
- * @deprecated
- */
-const EditTearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-    cancelButtonText,
-    children,
-    className,
-    description,
-    influencerWidth = defaults.influencerWidth,
-    label,
-    onClose,
-    open,
-    submitButtonText,
-    title,
-    verticalPosition = defaults.verticalPosition,
-    onRequestSubmit,
-    onFormChange,
-    sideNavAriaLabel = defaults.sideNavAriaLabel,
-    // Collect any other property values passed in.
-    ...rest
-  } = _ref;
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const handleOnRequestSubmit = async () => {
-    setIsSubmitting(true);
-    try {
-      await onRequestSubmit();
-    } catch (error) {
-      console.warn(`${componentName} submit error: ${error}`);
-    }
-    setIsSubmitting(false);
-  };
-  const actions = [{
-    key: 'edit-action-button-submit',
-    label: submitButtonText,
-    onClick: () => handleOnRequestSubmit(),
-    loading: isSubmitting,
-    kind: 'primary'
-  }, {
-    key: 'edit-action-button-cancel',
-    label: cancelButtonText,
-    onClick: onClose,
-    kind: 'ghost'
-  }];
-  const [currentForm, setCurrentForm] = useState(0);
-  const [formTitles, setFormTitles] = useState([]);
-  const contentRef = useRef(null);
-  const handleCurrentForm = formIndex => {
-    setCurrentForm(formIndex);
-    if (onFormChange) {
-      onFormChange(formIndex);
-    }
-  };
-  function defaultInfluencer() {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: `${blockClass}__side-nav-wrapper`
-    }, /*#__PURE__*/React__default.createElement(SideNav, {
-      "aria-label": sideNavAriaLabel,
-      className: `${blockClass}__side-nav`,
-      expanded: true,
-      isFixedNav: false
-    }, /*#__PURE__*/React__default.createElement(SideNavItems, null, formTitles.map((title, index) => {
-      return /*#__PURE__*/React__default.createElement(SideNavMenuItem, {
-        key: index,
-        onClick: () => handleCurrentForm(index),
-        isActive: currentForm === index
-      }, title);
-    }))));
-  }
-  return /*#__PURE__*/React__default.createElement(TearsheetShell, _extends({}, getDevtoolsProps(componentName), prepareProps(rest), {
-    actions,
-    children,
-    className: cx(blockClass, className),
-    description,
-    influencerPosition: 'left',
-    influencerWidth,
-    label,
-    onClose,
-    open,
-    size: 'wide',
-    title,
-    verticalPosition
-  }, rest, {
-    hasCloseIcon: false,
-    influencer: defaultInfluencer(),
-    ref
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__content`,
-    ref: contentRef,
-    role: "main"
-  }, /*#__PURE__*/React__default.createElement(Form, null, /*#__PURE__*/React__default.createElement(FormContext.Provider, {
-    value: {
-      currentForm,
-      setFormTitles
-    }
-  }, React__default.Children.map(children, (child, index) => /*#__PURE__*/React__default.createElement(FormNumberContext.Provider, {
-    value: index
-  }, child))))));
-});
-
-/**@ts-ignore*/
-EditTearsheet.deprecated = {
-  level: 'warn',
-  details: `This component is deprecated and will be removed in the next major version.`
-};
-
-// Return a placeholder if not released and not enabled by feature flag
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-EditTearsheet.displayName = componentName;
-
-// Note that the descriptions here should be kept in sync with those for the
-// corresponding props for TearsheetNarrow and TearsheetShell components.
-EditTearsheet.propTypes = {
-  /**
-   * The cancel button text
-   */
-  cancelButtonText: PropTypes.string,
-  /**
-   * The main content of the tearsheet
-   */
-  children: PropTypes.node,
-  /**
-   * An optional class or classes to be added to the outermost element.
-   */
-  className: PropTypes.string,
-  /**
-   * A description of the flow, displayed in the header area of the tearsheet.
-   */
-  description: PropTypes.node,
-  /**
-   * Used to set the size of the influencer
-   */
-  influencerWidth: PropTypes.oneOf(['narrow', 'wide']),
-  /**
-   * 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.
-   */
-  onClose: PropTypes.func,
-  /**
-   * An optional handler that is called when a user changes forms via clicking
-   * an influencer nav item.
-   * Returns the index of the selected form.
-   */
-  onFormChange: PropTypes.func,
-  /**
-   * Specify a handler for submitting the tearsheet.
-   */
-  onRequestSubmit: PropTypes.func.isRequired,
-  /**
-   * Specifies whether the tearsheet is currently open.
-   */
-  open: PropTypes.bool,
-  /**
-   * Specifies the aria label for the SideNav from Carbon UIShell
-   */
-  sideNavAriaLabel: PropTypes.string,
-  /**
-   * The submit button text
-   */
-  submitButtonText: PropTypes.string,
-  /**
-   * 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 { EditTearsheet, FormContext, FormNumberContext };

package/es/components/EditTearsheet/EditTearsheetForm.d.ts

@@ -1,47 +0,0 @@
-/**
- * Copyright IBM Corp. 2022, 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 React, { ReactNode } from 'react';
-interface EditTearsheetFormBaseProps {
-    /**
-     * Content that shows in the tearsheet form
-     */
-    children?: ReactNode;
-    /**
-     * Sets an optional className to be added to the tearsheet form
-     */
-    className?: string;
-    /**
-     * Sets an optional description on the form component
-     */
-    description?: 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 form content.
-     */
-    hasFieldset?: boolean;
-    /**
-     * Sets an optional subtitle on the form component
-     */
-    subtitle?: string;
-    /**
-     * Sets the title text for a tearsheet form
-     */
-    title: ReactNode;
-}
-type EditTearsheetFormFieldsetTypes = {
-    hasFieldset?: false;
-    fieldsetLegendText: string;
-    fieldsetLegendId?: React.ReactNode;
-} | {
-    hasFieldset: true;
-    fieldsetLegendText: string;
-    fieldsetLegendId: React.ReactNode;
-};
-type EditTearsheetFormProps = EditTearsheetFormBaseProps & EditTearsheetFormFieldsetTypes;
-export declare const EditTearsheetForm: React.ForwardRefExoticComponent<EditTearsheetFormProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/es/components/EditTearsheet/EditTearsheetForm.js

@@ -1,118 +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, useContext } from 'react';
-import PropTypes from '../../_virtual/index.js';
-import cx from 'classnames';
-import { Grid, Column, FormGroup } from '@carbon/react';
-import { FormContext, FormNumberContext } from './EditTearsheet.js';
-import { pkg } from '../../settings.js';
-import pconsole from '../../global/js/utils/pconsole.js';
-import { useRetrieveFormTitles } from '../../global/js/hooks/useRetrieveFormTitles.js';
-
-const componentName = 'EditTearsheetForm';
-const blockClass = `${pkg.prefix}--tearsheet-edit__form`;
-
-// Default values for props
-const defaults = {
-  hasFieldset: true
-};
-const EditTearsheetForm = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-
-    children,
-    className,
-    description,
-    fieldsetLegendText,
-    fieldsetLegendId,
-    hasFieldset = defaults.hasFieldset,
-    subtitle,
-    title,
-    // Collect any other property values passed in.
-    ...rest
-  } = _ref;
-  const formContext = useContext(FormContext);
-  const formNumber = useContext(FormNumberContext);
-  useRetrieveFormTitles({
-    formContext,
-    formNumber,
-    title
-  });
-  return formContext ? /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className, {
-      [`${blockClass}__form--hidden-form`]: formNumber !== formContext?.currentForm,
-      [`${blockClass}__form--visible-form`]: formNumber === formContext?.currentForm
-    }),
-    ref: ref
-  }), /*#__PURE__*/React__default.createElement(Grid, null, /*#__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), description && /*#__PURE__*/React__default.createElement("p", {
-    className: `${blockClass}--description`
-  }, description)), /*#__PURE__*/React__default.createElement(Column, {
-    span: 100
-  }, hasFieldset ? /*#__PURE__*/React__default.createElement(FormGroup, {
-    legendText: fieldsetLegendText,
-    className: `${blockClass}--fieldset`,
-    legendId: fieldsetLegendId
-  }, /*#__PURE__*/React__default.createElement(Grid, null, children)) : children))) : pconsole.warn(`You have tried using a ${componentName} component outside of a EditTearsheet. This is not allowed. ${componentName}s should always be children of the EditTearsheet`);
-});
-
-// Return a placeholder if not released and not enabled by feature flag
-
-EditTearsheetForm.propTypes = {
-  /**
-   * Content that shows in the tearsheet form
-   */
-  children: PropTypes.node,
-  /**
-   * Sets an optional className to be added to the tearsheet form
-   */
-  className: PropTypes.string,
-  /**
-   * Sets an optional description on the form component
-   */
-  description: PropTypes.string,
-  /**
-   * 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 form 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 form content.
-   */
-  /**@ts-ignore*/
-  hasFieldset: PropTypes.bool,
-  /**
-   * Sets an optional subtitle on the form component
-   */
-  /**@ts-ignore*/
-  subtitle: PropTypes.string,
-  /**
-   * Sets the title text for a tearsheet form
-   */
-  title: PropTypes.node.isRequired
-};
-
-export { EditTearsheetForm };

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

@@ -1,2 +0,0 @@
-export { EditTearsheet } from "./EditTearsheet";
-export { EditTearsheetForm } from "./EditTearsheetForm";

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.d.ts

@@ -1,23 +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 React, { ReactNode } from 'react';
-export interface EditTearsheetNarrowProps {
-    /**
-     * Provide the contents of the EditTearsheetNarrow.
-     */
-    children: ReactNode;
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-}
-/**
- * **This component is deprecated.** <br>
- * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
- * @deprecated
- */
-export declare const EditTearsheetNarrow: React.ForwardRefExoticComponent<EditTearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -1,95 +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 PropTypes from '../../_virtual/index.js';
-import cx from 'classnames';
-import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { pkg } from '../../settings.js';
-
-// Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-const blockClass = `${pkg.prefix}--edit-tearsheet-narrow`;
-const componentName = 'EditTearsheetNarrow';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
-// const defaults = {
-//   /* TODO: add defaults for relevant props if needed */
-// };
-
-/**
- * **This component is deprecated.** <br>
- * Use a narrow tearsheet as an alternative to a modal when there is scrolling. See usage guidance for further information.
- * @deprecated
- */
-const EditTearsheetNarrow = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
-    // The component props, in alphabetical order (for consistency).
-
-    children /* TODO: remove if not needed. */,
-    className,
-    /* TODO: add other props for EditTearsheetNarrow, with default values if needed */
-
-    // Collect any other property values passed in.
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    className: cx(blockClass,
-    // Apply the block class to the main HTML element
-    className,
-    // Apply any supplied class names to the main HTML element.
-    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-    {
-      // switched classes dependant on props or state
-      // example: [`${blockClass}__here-if-small`]: size === 'sm',
-    }),
-    ref: ref,
-    role: "main"
-  }, getDevtoolsProps(componentName)), children);
-});
-
-/**@ts-ignore*/
-EditTearsheetNarrow.deprecated = {
-  level: 'warn',
-  details: `This component is deprecated and will be removed in the next major version.`
-};
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-EditTearsheetNarrow.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.
-EditTearsheetNarrow.propTypes = {
-  /**
-   * Provide the contents of the EditTearsheetNarrow.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Provide an optional class to be applied to the containing node.
-   */
-  className: PropTypes.string
-
-  /* TODO: add types and DocGen for all props. */
-};
-
-export { EditTearsheetNarrow };

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

@@ -1,8 +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.
- */
-export { EditTearsheetNarrow } from './EditTearsheetNarrow';
-export type { EditTearsheetNarrowProps } from './EditTearsheetNarrow';