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

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

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

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

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

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

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