@carbon/ibm-products 2.28.1 → 2.29.0

package/lib/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/lib/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/lib/components/AboutModal/AboutModal.js

@@ -10,15 +10,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var react = require('@carbon/react');
 var React = require('react');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var settings = require('../../settings.js');
-var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var devtools = require('../../global/js/utils/devtools.js');
-var react = require('@carbon/react');
+var settings = require('../../settings.js');
 var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
+var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
+var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,7 +30,6 @@ var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrig
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--about-modal");
 var componentName = 'AboutModal';
-
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 /**
@@ -59,22 +58,27 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     hasScrollingContent = _useState2[0],
     setHasScrollingContent = _useState2[1];
-  var bodyRef = React.useRef();
-  var contentRef = React.useRef();
+  var bodyRef = React.useRef(null);
+  var contentRef = React.useRef(null);
   var contentId = uuidv4["default"]();
   var renderPortalUse = usePortalTarget.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
   React.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
@@ -98,8 +102,8 @@ exports.AboutModal = /*#__PURE__*/React__default["default"].forwardRef(function
     label: title,
     labelClassName: "".concat(blockClass, "__title")
   }), /*#__PURE__*/React__default["default"].createElement(react.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["default"].createElement("div", {

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -19,6 +19,7 @@ var settings = require('../../../settings.js');
 var stateReducer = require('./addons/stateReducer.js');
 var getNodeTextContent = require('../../../global/js/utils/getNodeTextContent.js');
 var DatagridSlug = require('./addons/Slug/DatagridSlug.js');
+var useInitialColumnSort = require('../useInitialColumnSort.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -101,6 +102,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     isTableSortable = datagridState.isTableSortable,
     rows = datagridState.rows,
     isFetching = datagridState.isFetching;
+  useInitialColumnSort.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
   React.useEffect(function () {

package/lib/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/lib/components/Datagrid/useInitialColumnSort.d.ts

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

package/lib/components/Datagrid/useInitialColumnSort.js

@@ -0,0 +1,46 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var useSortableColumns = require('./useSortableColumns.js');
+
+var useInitialColumnSort = function useInitialColumnSort(instance) {
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    hasInitialSort = _useState2[0],
+    setHasInitialSort = _useState2[1];
+  React.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 = useSortableColumns.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]);
+};
+
+exports.useInitialColumnSort = useInitialColumnSort;

package/lib/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/lib/components/Datagrid/useSortableColumns.js

@@ -29,6 +29,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,
@@ -137,24 +152,10 @@ 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;
 
 exports["default"] = useSortableColumns$1;
+exports.getNewSortOrder = getNewSortOrder;

package/lib/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';