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

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.d.ts

@@ -0,0 +1,11 @@
+export function ConditionBuilderItemText({ conditionState, onChange }: {
+    conditionState: any;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderItemText {
+    namespace propTypes {
+        let conditionState: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemText/ConditionBuilderItemText.js

@@ -0,0 +1,40 @@
+/**
+ * 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 React__default from 'react';
+import { TextInput } from '@carbon/react';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { blockClass } from '../../ConditionBuilderContext/DataConfigs.js';
+
+var ConditionBuilderItemText = function ConditionBuilderItemText(_ref) {
+  var _conditionState$value, _conditionState$prope;
+  var conditionState = _ref.conditionState,
+    _onChange = _ref.onChange;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-text")
+  }, /*#__PURE__*/React__default.createElement(TextInput, {
+    labelText: conditionState.property,
+    hideLabel: true,
+    value: (_conditionState$value = conditionState.value) !== null && _conditionState$value !== void 0 ? _conditionState$value : '',
+    id: (_conditionState$prope = conditionState.property) === null || _conditionState$prope === void 0 ? void 0 : _conditionState$prope.replace(/\s/g, ''),
+    onChange: function onChange(e) {
+      _onChange(e.target.value);
+    }
+  }));
+};
+ConditionBuilderItemText.propTypes = {
+  /**
+   * current condition object
+   */
+  conditionState: PropTypes.object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: PropTypes.func
+};
+
+export { ConditionBuilderItemText };

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.d.ts

@@ -0,0 +1,11 @@
+export function ConditionBuilderItemTime({ onChange, config }: {
+    onChange: any;
+    config: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace ConditionBuilderItemTime {
+    namespace propTypes {
+        let config: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js

@@ -0,0 +1,82 @@
+/**
+ * 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 React__default, { useState, useEffect } from 'react';
+import { TimePicker, TimePickerSelect, SelectItem } from '@carbon/react';
+import PropTypes from '../../../../node_modules/prop-types/index.js';
+import { blockClass } from '../../ConditionBuilderContext/DataConfigs.js';
+
+var _SelectItem, _SelectItem2;
+var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
+  var _config$timeZones, _config$timeZones2;
+  var onChange = _ref.onChange,
+    config = _ref.config;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    timeValue = _useState2[0],
+    setTimeValue = _useState2[1];
+  var _useState3 = useState('AM'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    dayZoneValue = _useState4[0],
+    setDayZoneValue = _useState4[1];
+  var _useState5 = useState(config === null || config === void 0 || (_config$timeZones = config.timeZones) === null || _config$timeZones === void 0 ? void 0 : _config$timeZones[0]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    timeZoneValue = _useState6[0],
+    setTimeZoneValue = _useState6[1];
+  useEffect(function () {
+    var timeToUpdate = "".concat(timeValue !== null && timeValue !== void 0 ? timeValue : '', " ").concat(dayZoneValue !== null && dayZoneValue !== void 0 ? dayZoneValue : '', " ").concat(timeZoneValue !== null && timeZoneValue !== void 0 ? timeZoneValue : '');
+    onChange(timeValue ? timeToUpdate : undefined);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timeValue, dayZoneValue, timeZoneValue]);
+  var setTimeZone = function setTimeZone(e) {
+    setTimeZoneValue(e.target.value);
+  };
+  var setDayZone = function setDayZone(e) {
+    setDayZoneValue(e.target.value);
+  };
+  var setTime = function setTime(e) {
+    setTimeValue(e.target.value);
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-builder-item-time")
+  }, /*#__PURE__*/React__default.createElement(TimePicker, {
+    id: "time-picker",
+    labelText: "Select a time",
+    onChange: setTime
+  }, /*#__PURE__*/React__default.createElement(TimePickerSelect, {
+    id: "time-picker-day-zone",
+    onChange: setDayZone
+  }, _SelectItem || (_SelectItem = /*#__PURE__*/React__default.createElement(SelectItem, {
+    value: "AM",
+    text: "AM"
+  })), _SelectItem2 || (_SelectItem2 = /*#__PURE__*/React__default.createElement(SelectItem, {
+    value: "PM",
+    text: "PM"
+  }))), /*#__PURE__*/React__default.createElement(TimePickerSelect, {
+    id: "time-picker-select-2",
+    onChange: setTimeZone
+  }, config === null || config === void 0 || (_config$timeZones2 = config.timeZones) === null || _config$timeZones2 === void 0 ? void 0 : _config$timeZones2.map(function (timeZone, index) {
+    return /*#__PURE__*/React__default.createElement(SelectItem, {
+      key: index,
+      value: timeZone,
+      text: timeZone
+    });
+  }))));
+};
+ConditionBuilderItemTime.propTypes = {
+  /**
+   * current config object that this property is part of
+   */
+  config: PropTypes.object,
+  /**
+   * callback to update state oin date change
+   */
+  onChange: PropTypes.func
+};
+
+export { ConditionBuilderItemTime };

package/es/components/ConditionBuilder/ConditionConnector/ConditionConnector.d.ts

@@ -0,0 +1,15 @@
+export default ConditionConnector;
+declare function ConditionConnector({ operator, className, onChange, ...rest }: {
+    [x: string]: any;
+    operator: any;
+    className: any;
+    onChange: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionConnector {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let operator: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionConnector/ConditionConnector.js

@@ -0,0 +1,85 @@
+/**
+ * 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 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useCallback } from 'react';
+import { ConditionBuilderItem } from '../ConditionBuilderItem/ConditionBuilderItem.js';
+import { ConditionBuilderItemOption } from '../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js';
+import { translateWithId, connectorConfig } from '../ConditionBuilderContext/DataConfigs.js';
+import { pkg } from '../../../settings.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { focusThisField } from '../utils/util.js';
+
+var _excluded = ["operator", "className", "onChange"];
+var blockClass = "".concat(pkg.prefix, "--condition-builder");
+function ConditionConnector(_ref) {
+  var operator = _ref.operator,
+    className = _ref.className,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleConnectorHover = useCallback(function (parentGroup, isHover) {
+    if (isHover) {
+      parentGroup.classList.add('hoveredConnector');
+    } else {
+      parentGroup.classList.remove('hoveredConnector');
+    }
+  }, []);
+  var activeConnectorHandler = function activeConnectorHandler(e) {
+    var parentGroup = e.currentTarget.closest('.eachGroup');
+    handleConnectorHover(parentGroup, true);
+  };
+  var inActiveConnectorHandler = function inActiveConnectorHandler(e) {
+    var parentGroup = e.currentTarget.closest('.eachGroup');
+    handleConnectorHover(parentGroup, false);
+  };
+  var onChangeHandler = function onChangeHandler(op, e) {
+    onChange(op);
+    focusThisField(e);
+  };
+  return (
+    /*#__PURE__*/
+    // <div className={className} {...rest}>
+    React__default.createElement(ConditionBuilderItem, _extends({
+      label: operator,
+      title: translateWithId('connector'),
+      "data-name": "connectorField",
+      onMouseEnter: activeConnectorHandler,
+      onMouseLeave: inActiveConnectorHandler,
+      onFocus: activeConnectorHandler,
+      onBlur: inActiveConnectorHandler
+    }, rest, {
+      popOverClassName: className,
+      className: "".concat(blockClass, "__connector-button ")
+    }), /*#__PURE__*/React__default.createElement(ConditionBuilderItemOption, {
+      config: {
+        options: connectorConfig
+      },
+      conditionState: {
+        value: operator,
+        label: translateWithId('connector')
+      },
+      onChange: onChangeHandler
+    }))
+    // </div>
+  );
+}
+ConditionConnector.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * callback to update the current condition of the state tree
+   */
+  onChange: PropTypes.func,
+  /**
+   * string that defines the connector operator (and/or)
+   */
+  operator: PropTypes.string
+};
+
+export { ConditionConnector as default };

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.d.ts

@@ -0,0 +1,24 @@
+export default ConditionGroupBuilder;
+/**
+ *
+ *  state - this is the current group that is being rendered . This can be a inner group or outer group
+ * All the inner components of group are called from here.
+ * @returns
+ */
+declare function ConditionGroupBuilder({ state, aria, onRemove, onChange, conditionBuilderRef, }: {
+    state: any;
+    aria: any;
+    onRemove: any;
+    onChange: any;
+    conditionBuilderRef: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ConditionGroupBuilder {
+    namespace propTypes {
+        let aria: PropTypes.Requireable<object>;
+        let conditionBuilderRef: PropTypes.Requireable<object>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        let state: PropTypes.Requireable<object>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -0,0 +1,145 @@
+/**
+ * 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 { objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import ConditionBlock from '../ConditionBlock/ConditionBlock.js';
+import PropTypes from '../../../node_modules/prop-types/index.js';
+import { blockClass, translateWithId } from '../ConditionBuilderContext/DataConfigs.js';
+
+/**
+ *
+ *  state - this is the current group that is being rendered . This can be a inner group or outer group
+ * All the inner components of group are called from here.
+ * @returns
+ */
+var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
+  var _state$conditions;
+  var state = _ref.state,
+    aria = _ref.aria,
+    onRemove = _ref.onRemove,
+    onChange = _ref.onChange,
+    conditionBuilderRef = _ref.conditionBuilderRef;
+  var onRemoveHandler = function onRemoveHandler(conditionIndex, e) {
+    if (state.conditions.length > 1) {
+      onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+        conditions: state.conditions.filter(function (condition, cIndex) {
+          return conditionIndex !== cIndex;
+        })
+      }));
+      handleFocusOnClose(e);
+    } else {
+      onRemove();
+    }
+  };
+  var onChangeHandler = function onChangeHandler(updatedConditions, conditionIndex) {
+    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+      conditions: state.conditions.map(function (condition, cIndex) {
+        return conditionIndex === cIndex ? updatedConditions : condition;
+      })
+    }));
+  };
+  var addConditionHandler = function addConditionHandler(conditionIndex) {
+    onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+      conditions: [].concat(_toConsumableArray(state.conditions.slice(0, conditionIndex + 1)), [{
+        property: undefined,
+        operator: '',
+        value: '',
+        popoverToOpen: 'propertyField'
+      }], _toConsumableArray(state.conditions.slice(conditionIndex + 1)))
+    }));
+  };
+  var handleFocusOnClose = function handleFocusOnClose(e) {
+    var _e$currentTarget;
+    var previousClose = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.closest('[role="row"]')) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.previousSibling) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.querySelector('[data-name="closeCondition"]');
+    if (previousClose) {
+      previousClose.focus();
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: " ".concat(blockClass, "__condition-builder__group eachGroup")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__condition-wrapper"),
+    role: "grid",
+    "aria-label": translateWithId('condition_builder_group')
+  }, state === null || state === void 0 || (_state$conditions = state.conditions) === null || _state$conditions === void 0 ? void 0 : _state$conditions.map(function (eachCondition, conditionIndex) {
+    return /*#__PURE__*/React__default.createElement("div", {
+      key: conditionIndex
+    }, eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
+      aria: {
+        level: aria.level + 1,
+        posinset: conditionIndex + 1,
+        setsize: state.conditions.length
+      },
+      state: eachCondition,
+      onChange: function onChange(updatedConditions) {
+        onChangeHandler(updatedConditions, conditionIndex);
+      },
+      onRemove: function onRemove(e) {
+        onRemoveHandler(conditionIndex, e);
+      },
+      conditionBuilderRef: conditionBuilderRef,
+      key: conditionIndex
+    }), !eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionBlock, {
+      key: conditionIndex,
+      conjunction: conditionIndex > 0 ? state.groupOperator : undefined,
+      aria: {
+        level: aria.level + 1,
+        posinset: conditionIndex + 1,
+        setsize: state.conditions.length
+      },
+      isStatement: conditionIndex == 0,
+      state: eachCondition,
+      group: state,
+      conditionIndex: conditionIndex,
+      className: "".concat(blockClass, "__gap ").concat(blockClass, "__gap-bottom"),
+      onChange: function onChange(updatedConditions) {
+        onChangeHandler(updatedConditions, conditionIndex);
+      },
+      addConditionHandler: addConditionHandler,
+      onRemove: function onRemove(e) {
+        onRemoveHandler(conditionIndex, e);
+      },
+      onConnectorOperatorChange: function onConnectorOperatorChange(op) {
+        onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+          groupOperator: op
+        }));
+      },
+      onStatementChange: function onStatementChange(updatedStatement) {
+        onChange(_objectSpread2(_objectSpread2({}, state), {}, {
+          statement: updatedStatement
+        }));
+      }
+    }));
+  })));
+};
+var ConditionGroupBuilder$1 = ConditionGroupBuilder;
+ConditionGroupBuilder.propTypes = {
+  /**
+   * object contains the aria attributes
+   */
+  aria: PropTypes.object,
+  /**
+   * ref of condition builder
+   */
+  conditionBuilderRef: PropTypes.object,
+  /**
+  
+   * callback to update the current condition of the state tree
+   */
+  onChange: PropTypes.func,
+  /**
+   * call back to remove the particular group from the state tree
+   */
+  onRemove: PropTypes.func,
+  /**
+   * state defines the current group
+   */
+  state: PropTypes.object
+};
+
+export { ConditionGroupBuilder$1 as default };

package/es/components/ConditionBuilder/utils/util.d.ts

@@ -0,0 +1,4 @@
+export function focusThisField(e: any): void;
+export function focusThisItem(currentElement: any): void;
+export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
+export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;

package/es/components/ConditionBuilder/utils/util.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 focusThisField = function focusThisField(e) {
+  setTimeout(function () {
+    var _e$target$closest, _e$target$closest2;
+    (_e$target$closest = e.target.closest('[role="gridcell"]')) === null || _e$target$closest === void 0 || (_e$target$closest = _e$target$closest.querySelector('button')) === null || _e$target$closest === void 0 || _e$target$closest.click();
+    (_e$target$closest2 = e.target.closest('[role="gridcell"]')) === null || _e$target$closest2 === void 0 || (_e$target$closest2 = _e$target$closest2.querySelector('button')) === null || _e$target$closest2 === void 0 || _e$target$closest2.focus();
+  }, 0);
+};
+
+export { focusThisField };

package/es/components/CreateTearsheet/CreateTearsheet.d.ts

@@ -1,4 +1,106 @@
-export const StepsContext: React.Context<null>;
-export const StepNumberContext: React.Context<number>;
-export let CreateTearsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2021, 2022
+ *
+ * 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, PropsWithChildren, Dispatch, SetStateAction } from 'react';
+export interface StepsContextType {
+    currentStep: number;
+    setIsDisabled: Dispatch<SetStateAction<boolean>>;
+    setOnPrevious: (fn: any) => void;
+    setOnNext: (fn: any) => void;
+    setOnMount: (fn: any) => void;
+    setStepData: Dispatch<SetStateAction<Step[]>>;
+    stepData: Step[];
+}
+export declare const StepsContext: React.Context<StepsContextType | null>;
+export declare const StepNumberContext: React.Context<number>;
+interface CreateTearsheetProps extends PropsWithChildren {
+    /**
+     * The back button text
+     */
+    backButtonText: string;
+    /**
+     * The cancel button text
+     */
+    cancelButtonText: string;
+    /**
+     * The main content of the tearsheet
+     */
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Specifies elements to focus on first on render.
+     */
+    firstFocusElement?: string;
+    /**
+     * Used to set the size of the influencer
+     */
+    influencerWidth?: 'narrow' | 'wide';
+    /**
+     * 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;
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * The next button text
+     */
+    nextButtonText: string;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => void;
+    /**
+     * Specify a handler for submitting the multi step tearsheet (final step).
+     * This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the create button.
+     */
+    onRequestSubmit: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
+     */
+    slug?: ReactNode;
+    /**
+     * The submit button text
+     */
+    submitButtonText: string;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /**
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position (the default) is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: 'normal' | 'lower';
+}
+interface Step {
+    introStep?: boolean;
+    secondaryLabel?: string;
+    shouldIncludeStep?: boolean;
+    title?: string;
+}
+export declare let CreateTearsheet: React.ForwardRefExoticComponent<CreateTearsheetProps & React.RefAttributes<HTMLDivElement>>;
+export {};