@carbon/ibm-products 2.28.0 → 2.29.0-alpha.10

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/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/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Type layouts provide an orderly layout of terms and definitions.
+ */
+export let DescriptionList: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export function DescriptionListBody({ children, className, ...rest }: {
+    [x: string]: any;
+    children: any;
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace DescriptionListBody {
+    export namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let className: PropTypes.Requireable<string>;
+    }
+    export { componentNameBody as displayName };
+}
+export function DescriptionListRow({ children, className, ...other }: {
+    [x: string]: any;
+    children: any;
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace DescriptionListRow {
+    export namespace propTypes_1 { }
+    export { propTypes_1 as propTypes };
+    export { componentNameRow as displayName };
+}
+export function DescriptionListCell({ children, className, ...rest }: {
+    [x: string]: any;
+    children: any;
+    className: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace DescriptionListCell {
+    export namespace propTypes_2 { }
+    export { propTypes_2 as propTypes };
+    export { componentNameCell as displayName };
+}
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const componentNameBody: "DescriptionListBody";
+declare const componentNameRow: "DescriptionListRow";
+declare const componentNameCell: "DescriptionListCell";
+export {};

package/es/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,88 @@
+/**
+ * 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 { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { DescriptionListSize } from './constants.js';
+import { StructuredListWrapper } from '@carbon/react';
+
+var _excluded = ["border", "children", "className", "size"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--description-list");
+var componentName = 'DescriptionList';
+
+// 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
+var defaults = {
+  border: false,
+  size: DescriptionListSize.Medium
+};
+
+/**
+ * Type layouts provide an orderly layout of terms and definitions.
+ */
+var DescriptionList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _ref$border = _ref.border,
+    border = _ref$border === void 0 ? defaults.border : _ref$border,
+    children = _ref.children,
+    className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, // Apply the block class to the main HTML element
+    _defineProperty(_defineProperty({}, "".concat(blockClass, "--bordered"), border), "".concat(blockClass, "--").concat(size), size), className // Apply any supplied class names to the main HTML element.
+    ),
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(StructuredListWrapper, {
+    role: "table",
+    selection: false
+  }, children));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+DescriptionList = pkg.checkComponentEnabled(DescriptionList, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+DescriptionList.displayName = componentName;
+var propTypes = {
+  /** Provide the contents of the node */
+  children: PropTypes.node,
+  /** Provide an optional class to be applied to the containing node */
+  className: PropTypes.string
+};
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+DescriptionList.propTypes = _objectSpread2(_objectSpread2({}, propTypes), {}, {
+  /** Specify if the type layout has a border */
+  border: PropTypes.bool,
+  /** Specify the size of the type layout, from a list of available sizes */
+  size: PropTypes.oneOf(Object.values(DescriptionListSize))
+});
+_objectSpread2({}, propTypes);
+_objectSpread2({}, propTypes);
+_objectSpread2({}, propTypes);
+
+export { DescriptionList };

package/es/components/DescriptionList/constants.d.ts

@@ -0,0 +1,6 @@
+export namespace DescriptionListSize {
+    let XSmall: string;
+    let Small: string;
+    let Medium: string;
+    let Large: string;
+}

package/es/components/DescriptionList/constants.js

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+var DescriptionListSize = {
+  XSmall: 'xs',
+  Small: 'sm',
+  Medium: 'md',
+  // default
+  Large: 'lg'
+};
+
+export { DescriptionListSize };

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

@@ -0,0 +1 @@
+export { DescriptionList, DescriptionListBody, DescriptionListRow, DescriptionListCell } from "./DescriptionList";