@carbon/ibm-products 2.28.1 → 2.29.0

package/es/components/APIKeyModal/APIKeyModal.d.ts

@@ -1,2 +1,3 @@
-export let APIKeyModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { APIKeyModalProps } from './APIKeyModal.types';
+export declare let APIKeyModal: React.FC<APIKeyModalProps>;

package/es/components/APIKeyModal/APIKeyModal.js

@@ -25,9 +25,10 @@ var componentName = 'APIKeyModal';
 // Default values for props
 var defaults = {
   apiKeyName: '',
-  customSteps: Object.freeze([])
+  customSteps: []
 };
 var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _customSteps$currentS3;
   var apiKey = _ref.apiKey,
     apiKeyLabel = _ref.apiKeyLabel,
     _ref$apiKeyName = _ref.apiKeyName,
@@ -117,8 +118,9 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (loading) {
       return true;
     }
-    if (hasSteps && 'valid' in customSteps[currentStep]) {
-      return !customSteps[currentStep].valid;
+    if (hasSteps && 'valid' in ((customSteps === null || customSteps === void 0 ? void 0 : customSteps[currentStep]) || [])) {
+      var _customSteps$currentS;
+      return !((_customSteps$currentS = customSteps[currentStep]) !== null && _customSteps$currentS !== void 0 && _customSteps$currentS.valid);
     }
     if (!hasSteps && nameRequired && !name) {
       return true;
@@ -149,7 +151,8 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     } else if (apiKeyLoaded) {
       setTitle(generateSuccessTitle);
     } else if (hasSteps) {
-      setTitle(customSteps[currentStep].title);
+      var _customSteps$currentS2;
+      setTitle((_customSteps$currentS2 = customSteps[currentStep]) === null || _customSteps$currentS2 === void 0 ? void 0 : _customSteps$currentS2.title);
     } else {
       setTitle(generateTitle);
     }
@@ -160,7 +163,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onCloseHandler = function onCloseHandler() {
     setName('');
     setCurrentStep(0);
-    onClose();
+    onClose === null || onClose === void 0 || onClose();
   };
   var submitHandler = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
@@ -204,9 +207,9 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
             break;
           case 21:
             if (editing) {
-              onRequestEdit(name);
+              onRequestEdit === null || onRequestEdit === void 0 || onRequestEdit(name);
             } else {
-              onRequestGenerate(name);
+              onRequestGenerate === null || onRequestGenerate === void 0 || onRequestGenerate(name);
             }
           case 22:
           case "end":
@@ -240,7 +243,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     label: modalLabel
   }), /*#__PURE__*/React__default.createElement(ModalBody, {
     className: "".concat(blockClass, "__body-container")
-  }, hasSteps && !apiKeyLoaded ? customSteps[currentStep].content : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, body && /*#__PURE__*/React__default.createElement("p", {
+  }, hasSteps && !apiKeyLoaded ? (_customSteps$currentS3 = customSteps[currentStep]) === null || _customSteps$currentS3 === void 0 ? void 0 : _customSteps$currentS3.content : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, body && /*#__PURE__*/React__default.createElement("p", {
     className: "".concat(blockClass, "__body")
   }, body), !editing && apiKey && hasAPIKeyVisibilityToggle && /*#__PURE__*/React__default.createElement(PasswordInput, {
     value: apiKey,
@@ -255,7 +258,7 @@ var APIKeyModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     id: apiKeyInputId.current
   }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/React__default.createElement(Form, {
     onSubmit: submitHandler,
-    "aria-label": title
+    "aria-label": title !== null && title !== void 0 ? title : undefined
   }, /*#__PURE__*/React__default.createElement(TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,
@@ -363,6 +366,7 @@ APIKeyModal.propTypes = {
   /**
    * if you need more options for key creation beyond just the name use custom steps to obtain whatever data is required.
    */
+  /**@ts-ignore*/
   customSteps: PropTypes.arrayOf(PropTypes.shape({
     /**
      * designates if the step has passed whatever validation rules are in place.

package/es/components/APIKeyModal/APIKeyModal.types.d.ts

@@ -0,0 +1,206 @@
+import { ReactNode } from 'react';
+interface APIKeyModalCommonProps {
+    /**
+     * the api key that's displayed to the user when a request to create is fulfilled.
+     */
+    apiKey?: string;
+    /**
+     * label for the text input that holds the api key.
+     */
+    apiKeyLabel?: string;
+    /**
+     * the name of the api key. should only be supplied in edit mode.
+     */
+    apiKeyName?: string;
+    /**
+     * body content for the modal
+     */
+    body?: string;
+    /**
+     * optional class name
+     */
+    className?: string;
+    /**
+     * text for the close button
+     */
+    closeButtonText?: string;
+    /**
+     * text for the copy button
+     */
+    copyButtonText?: string;
+    /**
+     * Error message for when the copy function fails
+     */
+    copyErrorText?: string;
+    /**
+     * text description for the copy button icon
+     */
+    copyIconDescription?: string;
+    /**
+     * if you need more options for key creation beyond just the name use custom steps to obtain whatever data is required.
+     */
+    customSteps?: Array<{
+        valid?: boolean;
+        content?: ReactNode;
+        title?: string;
+    }>;
+    /**
+     * designates if the modal is in the edit mode
+     */
+    editing?: boolean;
+    /**
+     * designates if an error has occurred in a request
+     */
+    error?: boolean;
+    /**
+     * text to display if an error has occurred
+     */
+    errorText?: string;
+    /**
+     * default primary button text for modal in assumed default mode create or generate.
+     * in create mode this is the button text prior to supplying an api key, which then
+     * uses copyButtonText
+     */
+    generateButtonText?: string;
+    /**
+     * content to display if generate request was successful
+     */
+    generateSuccessBody?: ReactNode;
+    /**
+     * title for a successful key generation
+     */
+    generateSuccessTitle?: string;
+    /**
+     * default title for the modal in generate key mode
+     */
+    generateTitle?: string;
+    /**
+     * designates if the api input has the visibility toggle enabled
+     */
+    hasAPIKeyVisibilityToggle?: boolean;
+    /**
+     * designates if user is able to download the api key
+     */
+    hasDownloadLink?: boolean;
+    /**
+     * label text that's displayed when hovering over visibility toggler to hide key
+     */
+    hideAPIKeyLabel?: string;
+    /**
+     * designates if the modal is in a loading state via a request or some other in progress operation
+     */
+    loading?: boolean;
+    /**
+     * text that displays while modal is in the loading state
+     */
+    loadingText?: string;
+    /**
+     * general label text for modal
+     */
+    modalLabel?: string;
+    /**
+     * helper text for name input
+     */
+    nameHelperText?: string;
+    /**
+     * label for api key name input
+     */
+    nameLabel?: string;
+    /**
+     * placeholder text for api key name input
+     */
+    namePlaceholder?: string;
+    /**
+     * designates if a name is required or not for key generation. NOTE- if using custom steps set this to false since you will be using your own validation
+     */
+    nameRequired?: boolean;
+    /**
+     * handler for on modal close
+     */
+    onClose?(): void;
+    /**
+     * Optional callback if you want to use your own copy function instead of the build in one
+     * onCopy(apiKey)
+     */
+    onCopy?(apiKey: string): void;
+    /**
+     * handler for api key edit
+     */
+    onRequestEdit?(apiKeyName: string): void;
+    /**
+     * handler for api key generation
+     */
+    onRequestGenerate?(apiKeyName: string): void;
+    /**
+     * designates if modal is open or closed
+     */
+    open: boolean;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget: ReactNode;
+    /**
+     * label text that's displayed when hovering over visibility toggler to show key
+     */
+    showAPIKeyLabel?: string;
+}
+type CustomStepConditionalProps = {
+    /**
+     * if you need more options for key creation beyond just the name use custom steps to obtain whatever data is required.
+     */
+    customSteps?: Array<{
+        valid?: boolean;
+        content?: ReactNode;
+        title?: string;
+    }>;
+    /**
+     * text that displays in the secondary button when using custom steps to indicate to the user that there is a previous step
+     */
+    previousStepButtonText: string;
+    /**
+     * text that displays in the primary button when using custom steps to indicate to the user that there is a next step
+     */
+    nextStepButtonText: string;
+};
+type EditingConditionalProps = {
+    /**
+     * designates if the modal is in the edit mode
+     */
+    editing?: boolean;
+    /**
+     * text for the edit button
+     */
+    editButtonText: string;
+    /**
+     * designates if the edit request was successful
+     */
+    editSuccess: boolean;
+    /**
+     * title for a successful edit
+     */
+    editSuccessTitle: string;
+};
+type HasDownloadLinkProps = {
+    /**
+     * designates if user is able to download the api key
+     */
+    hasDownloadLink?: boolean;
+    /**
+     * the content that appears that indicates the key is downloadable
+     */
+    downloadBodyText: string;
+    /**
+     * designates the name of downloadable json file with the key. if not specified will default to 'apikey'
+     */
+    downloadFileName: string;
+    /**
+     * designates the file type for the downloadable key
+     */
+    downloadFileType: 'txt' | 'json';
+    /**
+     * anchor text for the download link
+     */
+    downloadLinkText: string;
+};
+export type APIKeyModalProps = APIKeyModalCommonProps & CustomStepConditionalProps & EditingConditionalProps & HasDownloadLinkProps;
+export {};

package/es/components/AboutModal/AboutModal.d.ts

@@ -1,3 +1,74 @@
+/**
+ * Copyright IBM Corp. 2020, 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, { ReactNode } from 'react';
+interface AboutModalProps {
+    /**
+     * If you are legally required to display logos of technologies used
+     * to build your product you can provide this in the additionalInfo.
+     * Additional information will be displayed in the footer.
+     */
+    additionalInfo?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the modal root node.
+     */
+    className?: string;
+    /**
+     * The accessibility title for the close icon.
+     */
+    closeIconDescription: string;
+    /**
+     * Subhead text providing any relevant product disclaimers including
+     * legal information (optional)
+     */
+    content?: ReactNode;
+    /**
+     * Trademark and copyright information. Displays first year of
+     * product release to current year.
+     */
+    copyrightText: string;
+    /**
+     * An array of Carbon `Link` component if there are additional information
+     * to call out within the card. The about modal should be used to display
+     * the product information and not where users go to find help (optional)
+     */
+    links?: ReactNode[];
+    /**
+     * A visual symbol used to represent the product.
+     */
+    logo: ReactNode;
+    /**
+     * Specifies aria label for AboutModal
+     */
+    modalAriaLabel?: string;
+    /**
+     * Specifies an optional handler which is called when the AboutModal
+     * is closed. Returning `false` prevents the AboutModal from closing.
+     */
+    onClose?: () => void | boolean;
+    /**
+     * Specifies whether the AboutModal is open or not.
+     */
+    open?: boolean;
+    /**
+     * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget?: ReactNode;
+    /**
+     * Header text that provides the product name. The IBM Services logo
+     * consists of two discrete, but required, elements: the iconic
+     * IBM 8-bar logo represented alongside the IBM Services logotype.
+     * Please follow these guidelines to ensure proper execution.
+     */
+    title: ReactNode;
+    /**
+     * Text that provides information on the version number of your product.
+     */
+    version: string;
+}
 /**
  * The `AboutModal` component provides a way to communicate product information
  * to users. It is triggered by a user’s action, appears on top of the main
@@ -5,5 +76,5 @@
  * should be immediately apparent to the user, with a clear and obvious path
  * to completion.
  */
-export let AboutModal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let AboutModal: React.ForwardRefExoticComponent<AboutModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/AboutModal/AboutModal.js

@@ -6,22 +6,21 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
 import React__default, { useState, useRef, useEffect } from 'react';
-import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { pkg } from '../../settings.js';
-import uuidv4 from '../../global/js/utils/uuidv4.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
-import { ComposedModal, ModalHeader, ModalBody, Theme, ModalFooter } from '@carbon/react';
+import { pkg } from '../../settings.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
+import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
+import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrightText", "content", "links", "logo", "modalAriaLabel", "onClose", "open", "portalTarget", "title", "version"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--about-modal");
 var componentName = 'AboutModal';
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -50,22 +49,27 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     hasScrollingContent = _useState2[0],
     setHasScrollingContent = _useState2[1];
-  var bodyRef = useRef();
-  var contentRef = useRef();
+  var bodyRef = useRef(null);
+  var contentRef = useRef(null);
   var contentId = uuidv4();
   var renderPortalUse = usePortalTarget(portalTargetIn);
   var handleResize = function handleResize() {
+    var _bodyRef$current, _bodyRef$current2, _bodyRef$current3, _bodyRef$current4;
+    if (!((_bodyRef$current = bodyRef.current) !== null && _bodyRef$current !== void 0 && _bodyRef$current.clientHeight)) {
+      return;
+    }
     setHasScrollingContent(
     // if our scroll height exceeds the client height enable scrolling
-    bodyRef.current.clientHeight < (hasScrollingContent ?
+    ((_bodyRef$current2 = bodyRef.current) === null || _bodyRef$current2 === void 0 ? void 0 : _bodyRef$current2.clientHeight) < (hasScrollingContent ?
     // Carbon modal adds 32px bottom margin when scrolling content is enabled
-    bodyRef.current.scrollHeight - 32 : bodyRef.current.scrollHeight));
+    ((_bodyRef$current3 = bodyRef.current) === null || _bodyRef$current3 === void 0 ? void 0 : _bodyRef$current3.scrollHeight) - 32 : (_bodyRef$current4 = bodyRef.current) === null || _bodyRef$current4 === void 0 ? void 0 : _bodyRef$current4.scrollHeight));
   };
 
   // We can't add a ref directly to the ModalBody, so track it in a ref
   // as the parent of the current bodyRef element
   useEffect(function () {
-    bodyRef.current = contentRef.current.parentElement;
+    var _contentRef$current;
+    bodyRef.current = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.parentElement;
   }, [bodyRef]);
 
   // Detect resize of the ModalBody to recalculate whether scrolling is enabled
@@ -89,8 +93,8 @@ var AboutModal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     label: title,
     labelClassName: "".concat(blockClass, "__title")
   }), /*#__PURE__*/React__default.createElement(ModalBody, {
-    "aria-label": hasScrollingContent ? '' : null,
-    "aria-labelledby": hasScrollingContent ? contentId : null,
+    "aria-label": hasScrollingContent ? '' : undefined,
+    "aria-labelledby": hasScrollingContent ? contentId : undefined,
     className: "".concat(blockClass, "__body"),
     hasScrollingContent: hasScrollingContent
   }, /*#__PURE__*/React__default.createElement("div", {

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -15,6 +15,7 @@ import { pkg } from '../../../settings.js';
 import { handleColumnResizeEndEvent, handleColumnResizingEvent } from './addons/stateReducer.js';
 import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent.js';
 import { DatagridSlug } from './addons/Slug/DatagridSlug.js';
+import { useInitialColumnSort } from '../useInitialColumnSort.js';
 
 var _th;
 var _excluded = ["role"],
@@ -92,6 +93,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     isTableSortable = datagridState.isTableSortable,
     rows = datagridState.rows,
     isFetching = datagridState.isFetching;
+  useInitialColumnSort(datagridState);
   // Used to measure the height of the table and uses that value
   // to display a vertical line to indicate the column you are resizing
   useEffect(function () {

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.d.ts

@@ -6,7 +6,7 @@ declare function RowSizeDropdown({ align, legendText, ...props }: {
 }): import("react/jsx-runtime").JSX.Element;
 declare namespace RowSizeDropdown {
     namespace propTypes {
-        let align: React.Validator<"left" | "right" | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | null | undefined> | undefined;
+        let align: any;
         let datagridName: PropTypes.Requireable<string>;
         let legendText: PropTypes.Requireable<string>;
         let light: PropTypes.Requireable<boolean>;
@@ -14,5 +14,4 @@ declare namespace RowSizeDropdown {
         let selectedOption: PropTypes.Requireable<string>;
     }
 }
-import React from 'react';
 import PropTypes from 'prop-types';

package/es/components/Datagrid/useInitialColumnSort.d.ts

@@ -0,0 +1 @@
+export function useInitialColumnSort(instance: any): void;

package/es/components/Datagrid/useInitialColumnSort.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { useState, useEffect } from 'react';
+import { getNewSortOrder } from './useSortableColumns.js';
+
+var useInitialColumnSort = function useInitialColumnSort(instance) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    hasInitialSort = _useState2[0],
+    setHasInitialSort = _useState2[1];
+  useEffect(function () {
+    var initialState = instance.initialState,
+      headers = instance.headers,
+      onSort = instance.onSort,
+      isTableSortable = instance.isTableSortable;
+    var sortableColumn = initialState.sortableColumn;
+    var foundSortedCol = headers.some(function (h) {
+      return h.isSorted;
+    });
+    if (foundSortedCol || hasInitialSort || !isTableSortable) {
+      return;
+    }
+    if (sortableColumn) {
+      var columnId = sortableColumn.id,
+        order = sortableColumn.order;
+      var _getNewSortOrder = getNewSortOrder(order),
+        newSortDesc = _getNewSortOrder.newSortDesc,
+        newOrder = _getNewSortOrder.newOrder;
+      onSort === null || onSort === void 0 || onSort(columnId, newOrder);
+      instance.toggleSortBy(columnId, newSortDesc, false);
+      setHasInitialSort(true);
+    }
+  }, [instance, hasInitialSort]);
+};
+
+export { useInitialColumnSort };

package/es/components/Datagrid/useSortableColumns.d.ts

@@ -1,2 +1,6 @@
+export function getNewSortOrder(sortOrder: any): {
+    newSortDesc: undefined;
+    newOrder: string;
+};
 export default useSortableColumns;
 declare function useSortableColumns(hooks: any): void;

package/es/components/Datagrid/useSortableColumns.js

@@ -20,6 +20,21 @@ var ordering = {
   DESC: 'DESC',
   NONE: 'NONE'
 };
+var getNewSortOrder = function getNewSortOrder(sortOrder) {
+  var order = {
+    newSortDesc: undefined,
+    newOrder: ordering.NONE
+  };
+  if (sortOrder === false || sortOrder === ordering.DESC) {
+    order.newOrder = ordering.DESC;
+    order.newSortDesc = true;
+  }
+  if (sortOrder === undefined || sortOrder === ordering.ASC) {
+    order.newOrder = ordering.ASC;
+    order.newSortDesc = false;
+  }
+  return order;
+};
 var getAriaSortValue = function getAriaSortValue(col, _ref) {
   var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
     descendingSortableLabelText = _ref.descendingSortableLabelText,
@@ -128,24 +143,9 @@ var useSortableColumns = function useSortableColumns(hooks) {
       isTableSortable: true
     });
   };
-  var getNewSortOrder = function getNewSortOrder(sortOrder) {
-    var order = {
-      newSortDesc: undefined,
-      newOrder: ordering.NONE
-    };
-    if (sortOrder === false) {
-      order.newOrder = ordering.DESC;
-      order.newSortDesc = true;
-    }
-    if (sortOrder === undefined) {
-      order.newOrder = ordering.ASC;
-      order.newSortDesc = false;
-    }
-    return order;
-  };
   hooks.visibleColumns.push(sortableVisibleColumns);
   hooks.useInstance.push(sortInstanceProps);
 };
 var useSortableColumns$1 = useSortableColumns;
 
-export { useSortableColumns$1 as default };
+export { useSortableColumns$1 as default, getNewSortOrder };

package/es/components/Decorator/Decorator.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The Decorator groups a key/value pair to look and behave like a single UI element.
+ */
+export let Decorator: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';