@carbon/ibm-products 2.34.0 → 2.36.0-alpha.27

package/lib/components/CoachmarkBeacon/CoachmarkBeacon.js

@@ -31,7 +31,6 @@ var componentName = 'CoachmarkBeacon';
 var defaults = {
   kind: 'default'
 };
-
 /**
  * Use beacon for the target prop of a Coachmark component.
  */
@@ -63,8 +62,7 @@ exports.CoachmarkBeacon = /*#__PURE__*/React__default["default"].forwardRef(func
     "aria-label": label,
     className: "".concat(blockClass, "__target")
   }), /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: "".concat(blockClass, "__center"),
-    alt: ""
+    className: "".concat(blockClass, "__center")
   }, _circle || (_circle = /*#__PURE__*/React__default["default"].createElement("circle", {
     r: 1,
     cx: 38,

package/lib/components/CoachmarkFixed/CoachmarkFixed.js

@@ -94,7 +94,7 @@ exports.CoachmarkFixed = /*#__PURE__*/React__default["default"].forwardRef(funct
     }
   }, [prefersReducedMotion.matches]);
   var handleTransitionEnd = function handleTransitionEnd(e) {
-    console.log('Hererrrrrreee at transition end... ', e.propertyName === 'transform' && !fixedIsVisible);
+    console.log('Here at transition end... ', e.propertyName === 'transform' && !fixedIsVisible);
     if (e.propertyName === 'transform' && !fixedIsVisible) {
       setIsOpen(false);
       onClose();

package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.d.ts

@@ -1,7 +1,33 @@
+/**
+ * Copyright IBM Corp. 2023, 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 React, { ReactNode } from 'react';
+interface CoachmarkOverlayElementProps {
+    /**
+     * An optional button can be rendered below the description.
+     * This can be a link, button, Coachmark button, etc.
+     */
+    button?: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The description of the Coachmark.
+     */
+    description: ReactNode;
+    /**
+     * The title of the Coachmark.
+     */
+    title: string;
+}
 /**
  * Component to be displayed within a CoachmarkOverlayElements container.
  * Can be used 1 to N number, to display content in a Coachmark's overlay
  * in a carousel fashion.
  */
-export let CoachmarkOverlayElement: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkOverlayElement: React.ForwardRefExoticComponent<CoachmarkOverlayElementProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/CoachmarkOverlayElement/CoachmarkOverlayElement.js

@@ -26,7 +26,6 @@ var _excluded = ["button", "className", "description", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-element");
 var componentName = 'CoachmarkOverlayElement';
-
 /**
  * Component to be displayed within a CoachmarkOverlayElements container.
  * Can be used 1 to N number, to display content in a Coachmark's overlay

package/lib/components/ConditionBuilder/ConditionBuilder.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TODO: A description of the component.
+ */
+export let ConditionBuilder: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/ConditionBuilder/ConditionBuilder.js

@@ -0,0 +1,132 @@
+/**
+ * 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 react = require('@carbon/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 ConditionBuilderContent = require('./ConditionBuilderContent/ConditionBuilderContent.js');
+var DataTreeContext = require('./ConditionBuilderContext/DataTreeContext.js');
+
+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 = ["className", "inputConfig", "startConditionLabel", "popOverSearchThreshold"];
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
+var componentName = 'ConditionBuilder';
+
+// 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
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+
+exports.ConditionBuilder = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    inputConfig = _ref.inputConfig,
+    startConditionLabel = _ref.startConditionLabel,
+    popOverSearchThreshold = _ref.popOverSearchThreshold,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(DataTreeContext.ConditionBuilderProvider, {
+    inputConfig: inputConfig,
+    popOverSearchThreshold: popOverSearchThreshold
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](blockClass,
+    // Apply the block class to the main HTML element
+    className,
+    // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {
+      // switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref,
+    role: "main"
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(react.VStack, null, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderContent["default"], {
+    startConditionLabel: startConditionLabel
+  }))));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.ConditionBuilder = settings.pkg.checkComponentEnabled(exports.ConditionBuilder, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.ConditionBuilder.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.ConditionBuilder.propTypes = {
+  /**
+   * Provide the contents of the ConditionBuilder.
+   */
+  //children: PropTypes.node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * This is a mandatory prop that defines the input to the condition builder.
+   
+   */
+  inputConfig: index["default"].shape({
+    properties: index["default"].arrayOf(index["default"].shape({
+      id: index["default"].string,
+      label: index["default"].string,
+      icon: index["default"].func,
+      type: index["default"].oneOf(['text', 'number', 'date', 'option']),
+      config: index["default"].shape({
+        options: index["default"].arrayOf(index["default"].shape({
+          id: index["default"].string,
+          label: index["default"].string,
+          icon: index["default"].func
+        })),
+        includeSearch: index["default"].bool
+      })
+    }))
+  }).isRequired,
+  /**
+   * Provide an mandatory numeric value that will be used to enable search option in the popovers with list.
+   */
+  popOverSearchThreshold: index["default"].number.isRequired,
+  /**
+   * Provide a label to the button that starts condition builder
+   */
+  startConditionLabel: index["default"].string.isRequired
+
+  /* TODO: add types and DocGen for all props. */
+};

package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.d.ts

@@ -0,0 +1,10 @@
+export default ConditionBuilderContent;
+declare function ConditionBuilderContent({ startConditionLabel }: {
+    startConditionLabel: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionBuilderContent {
+    namespace propTypes {
+        let startConditionLabel: PropTypes.Validator<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionBuilderContent/ConditionBuilderContent.js

@@ -0,0 +1,100 @@
+/**
+ * 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 settings = require('../../../settings.js');
+var index = require('../../../node_modules/prop-types/index.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+var DataTreeContext = require('../ConditionBuilderContext/DataTreeContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var blockClass = "".concat(settings.pkg.prefix, "--condition-builder");
+function ConditionBuilderContent(_ref) {
+  var _rootState$groups2;
+  var startConditionLabel = _ref.startConditionLabel;
+  var _useContext = React.useContext(DataTreeContext.ConditionBuilderContext),
+    rootState = _useContext.rootState,
+    setRootState = _useContext.setRootState;
+  var _useState = React.useState(true),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isConditionBuilderActive = _useState2[0],
+    setIsConditionBuilderActive = _useState2[1];
+  var conditionBuilderRef = React.useRef();
+  React.useEffect(function () {
+    var _rootState$groups;
+    if (rootState !== null && rootState !== void 0 && (_rootState$groups = rootState.groups) !== null && _rootState$groups !== void 0 && _rootState$groups.length) {
+      setIsConditionBuilderActive(false);
+      if (rootState.groups[0].conditions.length == 1 && rootState.groups[0].conditions[0].property == undefined) {
+        // when the add condition clicked to start the condition building, we by default open the popover of the first property
+        setTimeout(function () {
+          conditionBuilderRef.current.querySelector('.propertyField').click();
+        }, 0);
+      }
+    } else {
+      setIsConditionBuilderActive(true);
+    }
+  }, [rootState]);
+  var onStartConditionBuilder = function onStartConditionBuilder() {
+    //when add condition button is clicked.
+    setIsConditionBuilderActive(false);
+    setRootState(DataTreeContext.emptyState); //here we can set an empty skeleton object for an empty condition builder,
+    //or we can even pre-populate some existing builder and continue editing
+  };
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: conditionBuilderRef,
+    className: "".concat(blockClass, "__content-container")
+  }, isConditionBuilderActive && /*#__PURE__*/React__default["default"].createElement(react.Button, {
+    className: "".concat(blockClass, "__condition-builder"),
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React__default["default"].createElement(icons.Add, _rollupPluginBabelHelpers["extends"]({
+        size: 16
+      }, props));
+    },
+    iconDescription: startConditionLabel,
+    kind: "ghost",
+    size: "sm",
+    onClick: onStartConditionBuilder
+  }, startConditionLabel), rootState && (rootState === null || rootState === void 0 || (_rootState$groups2 = rootState.groups) === null || _rootState$groups2 === void 0 ? void 0 : _rootState$groups2.map(function () {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, "conditionBuilder group renders here")
+    // <ConditionBuilderGroup
+    //   state={eachGroup}
+    //   onRemove={() => {
+    //     onRemove(groupIndex);
+    //   }}
+    //   onChange={(updatedGroup) => {
+    //     /**
+    //      * This method is triggered from inner components. This will be called every time when any change is to be updated in the rootState.
+    //      * This gets the updated group as argument.
+    //      */
+    //     setRootState({
+    //       ...rootState,
+    //       groups: rootState.groups.map((group, gIndex) =>
+    //         groupIndex === gIndex ? updatedGroup : group
+    //       ),
+    //     });
+    //   }}
+    //>
+    ;
+  })));
+}
+ConditionBuilderContent.propTypes = {
+  /**
+   * Provide a label to the button that starts condition builder
+   */
+  startConditionLabel: index["default"].string.isRequired
+};
+
+exports["default"] = ConditionBuilderContent;

package/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.d.ts

@@ -0,0 +1,38 @@
+export namespace emptyState {
+    let groups: {
+        groupSeparateOperator: null;
+        groupOperator: string;
+        statement: string;
+        conditions: {
+            property: undefined;
+            operator: string;
+            value: string;
+        }[];
+    }[];
+}
+export const ConditionBuilderContext: React.Context<any>;
+export function ConditionBuilderProvider(props: any): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderProvider {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let inputConfig: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            properties: PropTypes.Requireable<(PropTypes.InferProps<{
+                id: PropTypes.Requireable<string>;
+                label: PropTypes.Requireable<string>;
+                icon: PropTypes.Requireable<(...args: any[]) => any>;
+                type: PropTypes.Requireable<string>;
+                config: PropTypes.Requireable<PropTypes.InferProps<{
+                    options: PropTypes.Requireable<(PropTypes.InferProps<{
+                        id: PropTypes.Requireable<string>;
+                        label: PropTypes.Requireable<string>;
+                        icon: PropTypes.Requireable<(...args: any[]) => any>;
+                    }> | null | undefined)[]>;
+                    includeSearch: PropTypes.Requireable<boolean>;
+                }>>;
+            }> | null | undefined)[]>;
+        }>>>;
+        let popOverSearchThreshold: PropTypes.Validator<number>;
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/lib/components/ConditionBuilder/ConditionBuilderContext/DataTreeContext.js

@@ -0,0 +1,98 @@
+/**
+ * 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');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var emptyState = {
+  groups: [{
+    groupSeparateOperator: null,
+    groupOperator: 'and',
+    statement: 'if',
+    conditions: [{
+      property: undefined,
+      operator: '',
+      value: ''
+    }]
+  }]
+};
+var ConditionBuilderContext = /*#__PURE__*/React.createContext();
+
+// const rootReducer=(state,action)=>{
+//   switch(action.type){
+//   case 'update':
+//      ;
+//     return {
+//       ...state,
+//       ...action.payload
+//     }
+//     break;
+//     default:
+//       return state;
+//   }
+
+// }
+
+var ConditionBuilderProvider = function ConditionBuilderProvider(props) {
+  var _useState = React.useState({
+      groups: []
+    }),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    rootState = _useState2[0],
+    setRootState = _useState2[1];
+  return /*#__PURE__*/React__default["default"].createElement(ConditionBuilderContext.Provider, {
+    value: {
+      rootState: rootState,
+      setRootState: setRootState,
+      inputConfig: props.inputConfig,
+      popOverSearchThreshold: props.popOverSearchThreshold
+    }
+  },
+  // eslint-disable-next-line react/prop-types
+  props.children);
+};
+ConditionBuilderProvider.propTypes = {
+  /**
+   * Provide the contents of the ConditionBuilder.
+   */
+  children: index["default"].node.isRequired,
+  /**
+   * This is a mandatory prop that defines the input to the condition builder.
+   
+   */
+  inputConfig: index["default"].shape({
+    properties: index["default"].arrayOf(index["default"].shape({
+      id: index["default"].string,
+      label: index["default"].string,
+      icon: index["default"].func,
+      type: index["default"].oneOf(['text', 'number', 'date', 'option']),
+      config: index["default"].shape({
+        options: index["default"].arrayOf(index["default"].shape({
+          id: index["default"].string,
+          label: index["default"].string,
+          icon: index["default"].func
+        })),
+        includeSearch: index["default"].bool
+      })
+    }))
+  }).isRequired,
+  popOverSearchThreshold: index["default"].number.isRequired
+  /* TODO: add types and DocGen for all props. */
+};
+
+exports.ConditionBuilderContext = ConditionBuilderContext;
+exports.ConditionBuilderProvider = ConditionBuilderProvider;
+exports.emptyState = emptyState;

package/lib/components/ConditionBuilder/assets/sampleInput.d.ts

@@ -0,0 +1,58 @@
+export declare const inputData: {
+    properties: ({
+        id: string;
+        label: string;
+        icon: import("@carbon/react/icons").CarbonIconType;
+        type: string;
+        config: {
+            options: {
+                label: string;
+                id: string;
+            }[];
+            includeSearch?: undefined;
+            min?: undefined;
+            step?: undefined;
+            unit?: undefined;
+        };
+    } | {
+        id: string;
+        label: string;
+        icon: import("@carbon/react/icons").CarbonIconType;
+        type: string;
+        config: {
+            options: {
+                label: string;
+                id: string;
+                icon: import("@carbon/react/icons").CarbonIconType;
+            }[];
+            includeSearch: boolean;
+            min?: undefined;
+            step?: undefined;
+            unit?: undefined;
+        };
+    } | {
+        id: string;
+        label: string;
+        icon: import("@carbon/react/icons").CarbonIconType;
+        type: string;
+        config: {
+            options?: undefined;
+            includeSearch?: undefined;
+            min?: undefined;
+            step?: undefined;
+            unit?: undefined;
+        };
+    } | {
+        id: string;
+        label: string;
+        icon: import("@carbon/react/icons").CarbonIconType;
+        type: string;
+        config: {
+            min: number;
+            step: number;
+            unit: string;
+            options?: undefined;
+            includeSearch?: undefined;
+        };
+    })[];
+};

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

@@ -0,0 +1 @@
+export { ConditionBuilder } from "./ConditionBuilder";

package/lib/components/CreateFullPage/CreateFullPage.d.ts

@@ -1,5 +1,122 @@
-export const StepsContext: React.Context<null>;
-export const StepNumberContext: React.Context<number>;
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * 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';
+export declare const StepsContext: React.Context<null>;
+export declare const StepNumberContext: React.Context<number>;
+interface HeaderBreadcrumbs {
+    /** breadcrumb item key */
+    key: string;
+    /** breadcrumb item label */
+    label: string;
+    /** breadcrumb item link */
+    href?: string;
+    /** breadcrumb item title tooltip */
+    title?: string;
+    /** Provide if this breadcrumb item represents the current page */
+    isCurrentPage?: boolean;
+}
+type CreateFullPageBreadcrumbsProps = {
+    /** The header breadcrumbs */
+    breadcrumbs?: null | undefined;
+    /**
+     * Label for open/close overflow button used for breadcrumb items that do not fit
+     */
+    breadcrumbsOverflowAriaLabel?: never;
+} | {
+    /** The header breadcrumbs */
+    breadcrumbs: HeaderBreadcrumbs;
+    /**
+     * Label for open/close overflow button used for breadcrumb items that do not fit
+     */
+    breadcrumbsOverflowAriaLabel: string;
+};
+type CreateFullPageBaseProps = {
+    /**
+     * The back button text
+     */
+    backButtonText?: string;
+    /**
+     * The cancel button text
+     */
+    cancelButtonText: string;
+    /**
+     * The main content of the full page
+     */
+    children?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Specifies elements to focus on first on render.
+     */
+    firstFocusElement?: string;
+    /**
+     * This can be used to open the component to a step other than the first step.
+     * For example, a create flow was previously in progress, data was saved, and
+     * is now being completed.
+     */
+    initialStep?: number;
+    /**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
+    maxVisibleBreadcrumbs?: number;
+    /**
+     * The primary 'danger' button text in the modal
+     */
+    modalDangerButtonText: string;
+    /**
+     * The description located below the title in the modal
+     */
+    modalDescription?: string;
+    /**
+     * The secondary button text in the modal
+     */
+    modalSecondaryButtonText: string;
+    /**
+     * The title located in the header of the modal
+     */
+    modalTitle: string;
+    /**
+     * The next button text
+     */
+    nextButtonText: string;
+    /**
+     * A prop to omit the trailing slash for the breadcrumbs
+     */
+    noTrailingSlash?: boolean;
+    /**
+     * An optional handler that is called when the user closes the full page (by
+     * clicking the secondary button, located in the modal, which triggers after
+     * clicking the ghost button in the modal
+     */
+    onClose?: () => void;
+    /**
+     * Specify a handler for submitting the multi step full page (final step).
+     * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the create button.
+     */
+    onRequestSubmit: () => void;
+    /**
+     * A secondary title of the full page, displayed in the influencer area
+     */
+    secondaryTitle?: string;
+    /**
+     * @ignore
+     * The aria label to be used for the UI Shell SideNav Carbon component
+     */
+    sideNavAriaLabel?: string;
+    /**
+     * The submit button text
+     */
+    submitButtonText: string;
+    /**
+     * The main title of the full page, displayed in the header area
+     */
+    title?: string;
+};
+type CreateFullPageProps = CreateFullPageBaseProps & CreateFullPageBreadcrumbsProps;
 /**
  * Use with creations that must be completed in order for a service to be usable.
  *
@@ -12,5 +129,5 @@ on the Carbon's grid system
 include `<Row>` and `<Column>` components inside of each `CreateFullPageStep`
 component to get the desired affect.
  */
-export let CreateFullPage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateFullPage: React.ForwardRefExoticComponent<CreateFullPageProps & React.RefAttributes<HTMLDivElement>>;
+export {};