@carbon/ibm-products 2.84.0 → 2.85.0

package/lib/components/EditInPlace/EditInPlace.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren } from 'react';
+import PropTypes from 'prop-types';
 type Size = 'sm' | 'md' | 'lg';
 type AlignPropType = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
 type Shape = {
@@ -68,13 +69,23 @@ export interface EditInplaceProps extends PropsWithChildren {
     /**
      * determines if the input is in readOnly mode
      */
+    readOnly: PropTypes.bool;
     /**
-     * label for the edit button that displays when in read only mode
+     * label for the edit off button that displays when in read only mode
      */
+    readOnlyLabel?: PropTypes.string;
+    /**
+     * text for the toggletip that displays when in read only mode
+     */
+    readOnlyToggleTipText?: string;
     /**
      * label for save button
      */
     saveLabel: string;
+    /**
+     * alignment for the toggletip that displays when in read only mode
+     */
+    toggleTipAlignment?: AlignPropType;
     /**
      * vertical size of control
      */

package/lib/components/EditInPlace/EditInPlace.js

@@ -16,7 +16,7 @@ var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 
-var _Close, _Checkmark, _Edit;
+var _EditOff, _Close, _Checkmark, _Edit;
 const componentName = 'EditInPlace';
 const blockClass = `${settings.pkg.prefix}--edit-in-place`;
 const defaults = {
@@ -36,10 +36,12 @@ const EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange,
     onSave,
     onBlur,
-    // readOnly,
-    // readOnlyLabel,
+    readOnly,
+    readOnlyLabel,
+    readOnlyToggleTipText,
     saveLabel,
     size = 'sm',
+    toggleTipAlignment,
     tooltipAlignment,
     value,
     placeholder,
@@ -79,10 +81,6 @@ const EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange(target.value);
   };
   const onFocusHandler = e => {
-    // if (readOnly) {
-    //   return;
-    // }
-
     if (!isTargetingChild(e)) {
       inputRef.current?.focus();
       setFocused(true);
@@ -145,37 +143,49 @@ const EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     escaping.current = false;
   };
-  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    ref: ref
-  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, `${blockClass}--${size}`, {
-      [`${blockClass}--focused`]: focused,
-      [`${blockClass}--invalid`]: invalid,
-      [`${blockClass}--inherit-type`]: inheritTypography,
-      [`${blockClass}--overflows`]: inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth
-      // [`${blockClass}--readonly`]: readOnly,
-    }),
-    onFocus: onFocusHandler,
-    onBlur: onBlurHandler
-  }, /*#__PURE__*/React.createElement("input", {
+  const inputElement = /*#__PURE__*/React.createElement("input", {
     id: id,
     className: cx(`${blockClass}__text-input`, `${carbonPrefix}--text-input`, `${carbonPrefix}--text-input--${size}`),
     type: "text",
     placeholder: placeholder,
     value: value,
     onChange: onChangeHandler,
-    ref: inputRef
-    // readOnly={readOnly}
-    ,
+    ref: inputRef,
+    readOnly: readOnly,
     onKeyDown: onKeyHandler,
     "aria-label": labelText,
     "aria-invalid": invalid
-  }), /*#__PURE__*/React.createElement("div", {
+  });
+  const inputContainer = /*#__PURE__*/React.createElement("div", {
+    className: cx(blockClass, `${blockClass}--${size}`, {
+      [`${blockClass}--focused`]: focused,
+      [`${blockClass}--invalid`]: invalid,
+      [`${blockClass}--inherit-type`]: inheritTypography,
+      [`${blockClass}--overflows`]: inputRef.current && inputRef.current.scrollWidth > inputRef.current.offsetWidth,
+      [`${blockClass}--readonly`]: readOnly
+    }),
+    onFocus: onFocusHandler,
+    onBlur: onBlurHandler
+  }, readOnly ? /*#__PURE__*/React.createElement(react.Toggletip, {
+    align: toggleTipAlignment,
+    className: `${blockClass}__toggletip-wrapper`
+  }, /*#__PURE__*/React.createElement(react.ToggletipButton, {
+    label: readOnlyLabel || 'Edit off'
+  }, inputElement), /*#__PURE__*/React.createElement(react.ToggletipContent, null, /*#__PURE__*/React.createElement("p", null, readOnlyToggleTipText || 'This field is read-only and cannot be edited'))) : inputElement, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__toolbar`
   }, invalid && /*#__PURE__*/React.createElement(icons.WarningFilled, {
     size: 16,
     className: `${blockClass}__warning-icon`
-  }), focused ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.IconButton, {
+  }), readOnly ? /*#__PURE__*/React.createElement(react.IconButton, {
+    className: `${blockClass}__btn-readonly`,
+    size: size,
+    label: readOnlyLabel || 'Edit off',
+    kind: "ghost",
+    key: "readonly",
+    onClick: onFocusHandler
+  }, _EditOff || (_EditOff = /*#__PURE__*/React.createElement(icons.EditOff, {
+    size: 16
+  }))) : focused ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(react.IconButton, {
     align: tipAlignments.cancel,
     size: size,
     label: cancelLabel,
@@ -208,7 +218,10 @@ const EditInPlace = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     key: "edit"
   }, _Edit || (_Edit = /*#__PURE__*/React.createElement(icons.Edit, {
     size: 16
-  }))))), invalid && /*#__PURE__*/React.createElement("p", {
+  })))));
+  return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), inputContainer, invalid && /*#__PURE__*/React.createElement("p", {
     className: `${blockClass}__warning-text`
   }, invalidText ?? deprecated_invalidLabel));
 });
@@ -282,11 +295,15 @@ EditInPlace.propTypes = {
   /**
    * determines if the input is in readOnly mode
    */
-  // readOnly: PropTypes.bool,
+  readOnly: index.default.bool,
+  /**
+   * label for the edit off button that displays when in read only mode
+   */
+  readOnlyLabel: index.default.string,
   /**
-   * label for the edit button that displays when in read only mode
+   * text for the toggletip that displays when in read only mode
    */
-  // readOnlyLabel: PropTypes.string,
+  readOnlyToggleTipText: index.default.string,
   /**
    * label for save button
    */
@@ -295,6 +312,10 @@ EditInPlace.propTypes = {
    * vertical size of control
    */
   size: index.default.oneOf(['sm', 'md', 'lg']),
+  /**
+   * alignment for the toggletip that displays when in read only mode
+   */
+  toggleTipAlignment: alignPropType,
   /**
    * tooltipAlignment from the standard tooltip. Default center.
    *

package/lib/components/ImportModal/ImportModal.d.ts

@@ -59,6 +59,10 @@ export interface ImportModalProps {
      * Label that appears when a file is uploaded to show number of files (1 / 1)
      */
     fileUploadLabel?: string;
+    /**
+     * Hide input label
+     */
+    hideInputLabel?: boolean;
     /**
      * Button icon for import by url button
      */
@@ -74,7 +78,7 @@ export interface ImportModalProps {
     /**
      * Header to display above import by url
      */
-    inputLabel?: string;
+    inputLabel: string;
     /**
      * Placeholder for text input
      */

package/lib/components/ImportModal/ImportModal.js

@@ -33,6 +33,7 @@ const ImportModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fileDropHeader,
     fileDropLabel,
     fileUploadLabel,
+    hideInputLabel,
     inputButtonIcon,
     inputButtonText,
     inputId,
@@ -182,18 +183,19 @@ const ImportModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onAddFiles: onAddFile,
     disabled: hasFiles,
     "data-modal-primary-focus": true
-  }), inputLabel && /*#__PURE__*/React.createElement("p", {
-    className: `${blockClass}__label`
-  }, inputLabel), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__input-group`
   }, /*#__PURE__*/React.createElement(react.TextInput, {
-    labelText: "",
+    labelText: /*#__PURE__*/React.createElement("p", {
+      className: `${blockClass}__label`
+    }, inputLabel),
     id: inputId || '',
     onChange: inputHandler,
     placeholder: inputPlaceholder,
     value: importUrl,
     disabled: hasFiles,
-    "aria-label": inputLabel
+    "aria-label": inputLabel,
+    hideLabel: hideInputLabel
   }), /*#__PURE__*/React.createElement(react.Button, {
     onClick: fetchFile,
     className: `${blockClass}__import-button`,
@@ -275,6 +277,10 @@ ImportModal.propTypes = {
    * Label that appears when a file is uploaded to show number of files (1 / 1)
    */
   fileUploadLabel: index.default.string,
+  /**
+   * Hide input label
+   */
+  hideInputLabel: index.default.bool,
   /**
    * Button icon for import by url button
    */
@@ -290,7 +296,7 @@ ImportModal.propTypes = {
   /**
    * Header to display above import by url
    */
-  inputLabel: index.default.string,
+  inputLabel: index.default.string.isRequired,
   /**
    * Placeholder for text input
    */

package/lib/components/PageHeader/next/PageHeader.d.ts

@@ -1,226 +1,30 @@
 /**
- * Copyright IBM Corp. 2025, 2025
+ * Copyright IBM Corp. 2025, 2026
  *
  * 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, { type ComponentType, type FunctionComponent } from 'react';
-import { IconButtonProps, BreadcrumbItemProps, BreadcrumbProps } from '@carbon/react';
+import React from 'react';
+import { PageHeaderBreadcrumbBar, type PageHeaderBreadcrumbBarProps } from './PageHeaderBreadcrumbBar';
+import { PageHeaderContent, type PageHeaderContentProps } from './PageHeaderContent';
+import { PageHeaderContentPageActions, type PageHeaderContentPageActionsProps } from './PageHeaderContentPageActions';
+import { PageHeaderContentText, type PageHeaderContentTextProps } from './PageHeaderContentText';
+import { PageHeaderHeroImage, type PageHeaderHeroImageProps } from './PageHeaderHeroImage';
+import { PageHeaderTabBar, type PageHeaderTabBarProps } from './PageHeaderTabBar';
+import { PageHeaderTagOverflow, type PageHeaderTagOverflowProps } from './PageHeaderTagOverflow';
+import { PageHeaderScrollButton, type PageHeaderScrollButtonProps } from './PageHeaderScrollButton';
+import { PageHeaderTitleBreadcrumb } from './PageHeaderTitleBreadcrumb';
+import { PageHeaderBreadcrumbOverflow, type PageHeaderBreadcrumbOverflowProps } from './PageHeaderBreadcrumbOverflow';
 /**
  * ----------
  * PageHeader
  * ----------
  */
-interface PageHeaderProps {
+export interface PageHeaderProps {
     children?: React.ReactNode;
     className?: string;
 }
 declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * -----------------------
- * PageHeaderBreadcrumbBar
- * -----------------------
- */
-interface PageHeaderBreadcrumbBarProps {
-    /**
-     * `true` by default to render BreadcrumbBar bottom border.
-     */
-    border?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    /**
-     * Provide an optional icon to render in front of the PageHeaderContent's title.
-     */
-    renderIcon?: ComponentType | FunctionComponent;
-    /**
-     * The PageHeaderBreadcrumbBar's content actions
-     */
-    contentActions?: React.ReactNode;
-    /**
-     * `true` to set content actions flush against page actions
-     */
-    contentActionsFlush?: boolean;
-    /**
-     * The PageHeaderContent's page actions
-     */
-    pageActions?: React.ReactNode;
-    /**
-     * `true` to set page actions flush with page
-     */
-    pageActionsFlush?: boolean;
-}
-declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * -----------------
- * PageHeaderContent
- * -----------------
- */
-interface PageHeaderContentProps {
-    /**
-     * Provide child elements to be rendered inside PageHeaderContent.
-     */
-    children?: React.ReactNode;
-    /**
-     * Specify an optional className to be added to your PageHeaderContent
-     */
-    className?: string;
-    /**
-     * Provide an optional icon to render in front of the PageHeaderContent's title.
-     */
-    renderIcon?: ComponentType | FunctionComponent;
-    /**
-     * The PageHeaderContent's title
-     */
-    title: string;
-    /**
-     * The PageHeaderContent's contextual actions
-     */
-    contextualActions?: React.ReactNode;
-    /**
-     * The PageHeaderContent's page actions
-     */
-    pageActions?: React.ReactNode;
-}
-declare const PageHeaderContent: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
-/**
- * ----------------
- * PageHeaderContentPageActions
- * ----------------
- */
-interface PageHeaderContentPageActionsProps {
-    /**
-     * Provide child elements to be rendered inside PageHeaderContentPageActions.
-     */
-    children?: React.ReactNode;
-    /**
-     * Specify an optional className to be added to your PageHeaderContentPageActions
-     */
-    className?: string;
-    /**
-     * The PageHeaderContent's page actions collapsible Menu button label
-     */
-    menuButtonLabel?: string;
-    /**
-     * The PageHeaderContent's page actions
-     */
-    actions?: React.ReactNode;
-}
-declare const PageHeaderContentPageActions: {
-    ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): React.JSX.Element;
-    displayName: string;
-    propTypes: {
-        /**
-         * The PageHeaderContent's page actions
-         */
-        actions: any;
-        /**
-         * Provide child elements to be rendered inside PageHeaderContentPageActions.
-         */
-        children: any;
-        /**
-         * Specify an optional className to be added to your PageHeaderContentPageActions
-         */
-        className: any;
-        /**
-         * The PageHeaderContent's collapsible Menu button label
-         */
-        menuButtonLabel: any;
-    };
-};
-/**
- * ----------------
- * PageHeaderContentText
- * ----------------
- */
-interface PageHeaderContentTextProps {
-    /**
-     * Provide child elements to be rendered inside PageHeaderContentText.
-     */
-    children?: React.ReactNode;
-    /**
-     * Specify an optional className to be added to your PageHeaderContentText
-     */
-    className?: string;
-    /**
-     * The PageHeaderContent's subtitle
-     */
-    subtitle?: string;
-}
-declare const PageHeaderContentText: {
-    ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): React.JSX.Element;
-    displayName: string;
-    propTypes: {
-        /**
-         * Provide child elements to be rendered inside PageHeaderContentText.
-         */
-        children: any;
-        /**
-         * Specify an optional className to be added to your PageHeaderContentText
-         */
-        className: any;
-        /**
-         * The PageHeaderContent's subtitle
-         */
-        subtitle: any;
-    };
-};
-/**
- * ----------------
- * PageHeaderHeroImage
- * ----------------
- */
-interface PageHeaderHeroImageProps {
-    /**
-     * Provide child elements to be rendered inside PageHeaderHeroImage.
-     */
-    children?: React.ReactNode;
-    /**
-     * Specify an optional className to be added to your PageHeaderHeroImage
-     */
-    className?: string;
-}
-declare const PageHeaderHeroImage: {
-    ({ className, children, ...other }: PageHeaderHeroImageProps): React.JSX.Element;
-    displayName: string;
-    propTypes: {
-        /**
-         * Provide child elements to be rendered inside PageHeaderHeroImage.
-         */
-        children: any;
-        /**
-         * Specify an optional className to be added to your PageHeaderHeroImage
-         */
-        className: any;
-    };
-};
-/**
- * ----------------
- * PageHeaderTabBar
- * ----------------
- */
-interface PageHeaderTabBarProps {
-    children?: React.ReactNode;
-    className?: string;
-    tags?: React.ReactNode;
-    scroller?: React.ReactNode;
-}
-declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-interface PageHeaderTagOverflowProps {
-    children: React.ReactNode;
-    renderOverflowTag?: (hiddenBreadcrumbs: HTMLElement[], handleOverflowClick: (event: React.MouseEvent) => void, openPopover: boolean) => React.ReactElement;
-    renderPopoverContent?: (hiddenBreadcrumbs: HTMLElement[]) => React.ReactElement;
-}
-declare const PageHeaderTagOverflow: React.ForwardRefExoticComponent<PageHeaderTagOverflowProps & React.RefAttributes<HTMLDivElement>>;
-interface PageHeaderScrollButtonProps extends IconButtonProps {
-    collapseText?: string;
-    expandText?: string;
-}
-declare const PageHeaderScrollButton: React.ForwardRefExoticComponent<PageHeaderScrollButtonProps & React.RefAttributes<HTMLDivElement>>;
-declare const PageHeaderTitleBreadcrumb: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
-interface PageHeaderBreadcrumbOverflowProps extends BreadcrumbProps {
-    renderOverflowBreadcrumb?: (hiddenBreadcrumbs: HTMLElement[]) => React.ReactElement<BreadcrumbItemProps>;
-}
-declare const PageHeaderBreadcrumbOverflow: React.ForwardRefExoticComponent<PageHeaderBreadcrumbOverflowProps & React.RefAttributes<HTMLElement>>;
 /**
  * -------
  * Exports
@@ -233,21 +37,9 @@ declare const ContentPageActions: {
     ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): React.JSX.Element;
     displayName: string;
     propTypes: {
-        /**
-         * The PageHeaderContent's page actions
-         */
         actions: any;
-        /**
-         * Provide child elements to be rendered inside PageHeaderContentPageActions.
-         */
         children: any;
-        /**
-         * Specify an optional className to be added to your PageHeaderContentPageActions
-         */
         className: any;
-        /**
-         * The PageHeaderContent's collapsible Menu button label
-         */
         menuButtonLabel: any;
     };
 };
@@ -255,17 +47,8 @@ declare const ContentText: {
     ({ className, children, subtitle, ...other }: PageHeaderContentTextProps): React.JSX.Element;
     displayName: string;
     propTypes: {
-        /**
-         * Provide child elements to be rendered inside PageHeaderContentText.
-         */
         children: any;
-        /**
-         * Specify an optional className to be added to your PageHeaderContentText
-         */
         className: any;
-        /**
-         * The PageHeaderContent's subtitle
-         */
         subtitle: any;
     };
 };
@@ -273,20 +56,14 @@ declare const HeroImage: {
     ({ className, children, ...other }: PageHeaderHeroImageProps): React.JSX.Element;
     displayName: string;
     propTypes: {
-        /**
-         * Provide child elements to be rendered inside PageHeaderHeroImage.
-         */
         children: any;
-        /**
-         * Specify an optional className to be added to your PageHeaderHeroImage
-         */
         className: any;
     };
 };
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollButton: React.ForwardRefExoticComponent<PageHeaderScrollButtonProps & React.RefAttributes<HTMLDivElement>>;
-declare const TitleBreadcrumb: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const TitleBreadcrumb: React.ForwardRefExoticComponent<import("@carbon/react").BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
 declare const BreadcrumbOverflow: React.ForwardRefExoticComponent<PageHeaderBreadcrumbOverflowProps & React.RefAttributes<HTMLElement>>;
 declare const TagOverflow: React.ForwardRefExoticComponent<PageHeaderTagOverflowProps & React.RefAttributes<HTMLDivElement>>;
 export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderScrollButton, PageHeaderTitleBreadcrumb, PageHeaderBreadcrumbOverflow, PageHeaderTagOverflow, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, ScrollButton, TitleBreadcrumb, BreadcrumbOverflow, TagOverflow, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, };
+export type { PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderScrollButtonProps, PageHeaderTagOverflowProps, PageHeaderBreadcrumbOverflowProps, };