@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/es/components/Cascade/Cascade.js

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef } from 'react';
 import { Grid } from '@carbon/react';
 import PropTypes from '../../_virtual/index.js';
@@ -13,10 +12,15 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["children", "className", "grid"];
-var blockClass = "".concat(pkg.prefix, "--cascade");
-var componentName = 'Cascade';
-var defaults = {
+// Copyright IBM Corp. 2021, 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.
+//
+
+const blockClass = `${pkg.prefix}--cascade`;
+const componentName = 'Cascade';
+const defaults = {
   grid: false
 };
 /**
@@ -28,35 +32,36 @@ the page. It should not be used on a page if it is the secondary focus of the
 page as that will distract the user.
 
 */
-var Cascade = /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-    className = props.className,
-    _props$grid = props.grid,
-    grid = _props$grid === void 0 ? defaults.grid : _props$grid,
-    rest = _objectWithoutProperties(props, _excluded);
-  var childProps = _objectSpread2(_objectSpread2({}, rest), {}, {
+let Cascade = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    grid = defaults.grid,
+    ...rest
+  } = props;
+  const childProps = {
+    ...rest,
     className: cx(blockClass, className),
-    ref: ref
-  }, getDevtoolsProps(componentName));
-  var modifyChildren = function modifyChildren(child) {
-    var className = cx(child.props.className, "".concat(blockClass, "__element"));
+    ref,
+    ...getDevtoolsProps(componentName)
+  };
+  const modifyChildren = child => {
+    const className = cx(child.props.className, `${blockClass}__element`);
     return /*#__PURE__*/React__default.cloneElement(child, {
-      className: className
+      className
     });
   };
-  var getModifiedChildren = function getModifiedChildren() {
-    return React__default.Children.map(children, function (child) {
-      return modifyChildren(child);
-    });
+  const getModifiedChildren = () => {
+    return React__default.Children.map(children, child => modifyChildren(child));
   };
   if (grid) {
-    var colIdx = 0;
-    var gridElm = React__default.Children.map(children, function (row) {
+    let colIdx = 0;
+    const gridElm = React__default.Children.map(children, row => {
       if (/*#__PURE__*/React__default.isValidElement(row)) {
-        var cols = React__default.Children.map(row === null || row === void 0 ? void 0 : row.props.children, function (col) {
+        const cols = React__default.Children.map(row?.props.children, col => {
           if (/*#__PURE__*/React__default.isValidElement(col)) {
             colIdx = colIdx + 1;
-            var colClassnames = cx(col.props.className, "".concat(blockClass, "__col"), "".concat(blockClass, "__col-").concat(colIdx));
+            const colClassnames = cx(col.props.className, `${blockClass}__col`, `${blockClass}__col-${colIdx}`);
             return /*#__PURE__*/React__default.cloneElement(col, {
               className: colClassnames
             });

package/es/components/Checklist/Checklist.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Section, Heading, IconButton, Button } from '@carbon/react';
 import { Themes, Kinds } from './Checklist.types.js';
 import React__default, { useState, useRef, useEffect } from 'react';
@@ -18,11 +18,9 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 
-var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "enableToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--checklist");
-var componentName = 'Checklist';
+const blockClass = `${pkg.prefix}--checklist`;
+const componentName = 'Checklist';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -36,11 +34,11 @@ var componentName = 'Checklist';
 // or assumption when a prop is not supplied.
 
 // Default values for props
-var defaults = {
+const defaults = {
   checklistAriaLabel: 'Checklist',
   checklistToggleAriaLabel: 'Checklist toggle',
-  onClickViewAll: function onClickViewAll() {},
-  onToggle: function onToggle() {},
+  onClickViewAll: () => {},
+  onToggle: () => {},
   open: true,
   enableToggle: true,
   taskLists: [],
@@ -54,62 +52,49 @@ var defaults = {
  * an icon that defines the item's state as "not started", "in progress",
  * and "complete".
  */
-var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var chartValue = _ref.chartValue,
-    chartLabel = _ref.chartLabel,
-    _ref$checklistAriaLab = _ref.checklistAriaLabel,
-    checklistAriaLabel = _ref$checklistAriaLab === void 0 ? defaults.checklistAriaLabel : _ref$checklistAriaLab,
-    _ref$checklistToggleA = _ref.checklistToggleAriaLabel,
-    checklistToggleAriaLabel = _ref$checklistToggleA === void 0 ? defaults.checklistToggleAriaLabel : _ref$checklistToggleA,
-    className = _ref.className,
-    _ref$onClickViewAll = _ref.onClickViewAll,
-    onClickViewAll = _ref$onClickViewAll === void 0 ? defaults.onClickViewAll : _ref$onClickViewAll,
-    _ref$onToggle = _ref.onToggle,
-    onToggle = _ref$onToggle === void 0 ? defaults.onToggle : _ref$onToggle,
-    _ref$open = _ref.open,
-    open = _ref$open === void 0 ? defaults.open : _ref$open,
-    _ref$enableToggle = _ref.enableToggle,
-    enableToggle = _ref$enableToggle === void 0 ? defaults.enableToggle : _ref$enableToggle,
-    _ref$taskLists = _ref.taskLists,
-    taskLists = _ref$taskLists === void 0 ? defaults.taskLists : _ref$taskLists,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    title = _ref.title,
-    _ref$toggleLabel = _ref.toggleLabel,
-    toggleLabel = _ref$toggleLabel === void 0 ? defaults.toggleLabel : _ref$toggleLabel,
-    _ref$toggleLabelAlign = _ref.toggleLabelAlign,
-    toggleLabelAlign = _ref$toggleLabelAlign === void 0 ? 'top' : _ref$toggleLabelAlign,
-    viewAllLabel = _ref.viewAllLabel,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(open),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var listContainerId = useRef(uuidv4()).current;
-  var chartLabelId = useRef(uuidv4()).current;
+let Checklist = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    chartValue,
+    chartLabel,
+    checklistAriaLabel = defaults.checklistAriaLabel,
+    checklistToggleAriaLabel = defaults.checklistToggleAriaLabel,
+    className,
+    onClickViewAll = defaults.onClickViewAll,
+    onToggle = defaults.onToggle,
+    open = defaults.open,
+    enableToggle = defaults.enableToggle,
+    taskLists = defaults.taskLists,
+    theme = defaults.theme,
+    title,
+    toggleLabel = defaults.toggleLabel,
+    toggleLabelAlign = 'top',
+    viewAllLabel,
+    ...rest
+  } = _ref;
+  const [isOpen, setIsOpen] = useState(open);
+  const listContainerId = useRef(uuidv4()).current;
+  const chartLabelId = useRef(uuidv4()).current;
 
   // Don't use this test: {chartValue && chartLabel && (render...)}.
   // If `chartValue` is 0 (zero) - a valid value - then it will render 0 and skip the remaining statement.
   // Use this test instead: {chartLabelAndValue && (render...)}.
   // The ChecklistChart component will validate `chartValue`.
-  var chartLabelAndValue = typeof chartValue === 'number' && chartLabel;
-  var handleClickToggle = function handleClickToggle() {
-    setIsOpen(function (prevOpen) {
-      return !prevOpen;
-    });
+  const chartLabelAndValue = typeof chartValue === 'number' && chartLabel;
+  const handleClickToggle = () => {
+    setIsOpen(prevOpen => !prevOpen);
   };
-  var handleClickViewAll = function handleClickViewAll() {
+  const handleClickViewAll = () => {
     onClickViewAll();
   };
 
   // If state changes, then trigger callback.
-  useEffect(function () {
+  useEffect(() => {
     onToggle(isOpen);
   }, [isOpen, onToggle]);
 
   // If the "open" prop is changed after initialization,
   // then update internal state.
-  useEffect(function () {
+  useEffect(() => {
     setIsOpen(open);
   }, [open]);
   return /*#__PURE__*/React__default.createElement(Section, _extends({}, rest, {
@@ -117,76 +102,80 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     as: "aside",
     className: cx(blockClass,
     // Apply the block class to the main HTML element
-    className, // Apply any supplied class names to the main HTML element.
+    className,
+    // Apply any supplied class names to the main HTML element.
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-    _defineProperty({}, "".concat(blockClass, "__closed"), !isOpen)),
+    {
+      [`${blockClass}__closed`]: !isOpen
+    }),
     ref: ref
   }, getDevtoolsProps(componentName)), (title || chartLabelAndValue) && /*#__PURE__*/React__default.createElement("header", {
-    className: "".concat(blockClass, "__header")
+    className: `${blockClass}__header`
   }, chartLabelAndValue && /*#__PURE__*/React__default.createElement(ChecklistChart, {
     "aria-labelledby": chartLabelId,
     theme: theme,
     value: chartValue
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__titles")
+    className: `${blockClass}__titles`
   }, title && /*#__PURE__*/React__default.createElement(Heading, {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__title`
   }, title), chartLabelAndValue && /*#__PURE__*/React__default.createElement("p", {
     id: chartLabelId,
-    className: "".concat(blockClass, "__chart-label")
+    className: `${blockClass}__chart-label`
   }, chartLabel)), enableToggle && /*#__PURE__*/React__default.createElement(IconButton, {
     align: toggleLabelAlign,
     "aria-controls": listContainerId,
     "aria-expanded": isOpen,
     "aria-label": checklistToggleAriaLabel,
-    className: "".concat(blockClass, "__toggle"),
+    className: `${blockClass}__toggle`,
     kind: "ghost",
     label: toggleLabel,
     onClick: handleClickToggle,
     size: "sm"
   }, /*#__PURE__*/React__default.createElement(ChevronUp, {
     size: 16,
-    className: cx("".concat(blockClass, "__chevron"))
+    className: cx(`${blockClass}__chevron`)
   }))), /*#__PURE__*/React__default.createElement("div", {
     id: listContainerId,
-    className: "".concat(blockClass, "__content-outer")
+    className: `${blockClass}__content-outer`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__content-inner")
+    className: `${blockClass}__content-inner`
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: cx("".concat(blockClass, "__body"))
-  }, taskLists.map(function (list, index) {
+    className: cx(`${blockClass}__body`)
+  }, taskLists.map((list, index) => {
     return /*#__PURE__*/React__default.createElement(Section, {
-      className: "".concat(blockClass, "__list-group"),
-      key: "".concat(list.title, "-").concat(index)
+      className: `${blockClass}__list-group`,
+      key: `${list.title}-${index}`
     }, list.title && /*#__PURE__*/React__default.createElement(Heading, {
       title: list.title,
-      className: "".concat(blockClass, "__list-title")
+      className: `${blockClass}__list-title`
     }, list.title), /*#__PURE__*/React__default.createElement("ol", {
-      className: "".concat(blockClass, "__list")
-    }, list.tasks.map(function (item, index) {
+      className: `${blockClass}__list`
+    }, list.tasks.map((item, index) => {
       return /*#__PURE__*/React__default.createElement("li", {
-        className: "".concat(blockClass, "__list-item"),
-        key: "".concat(item.label, "-").concat(index)
+        className: `${blockClass}__list-item`,
+        key: `${item.label}-${index}`
       }, /*#__PURE__*/React__default.createElement(ChecklistIcon, {
         kind: item.kind,
         theme: theme
       }), typeof item.onClick === 'function' ? /*#__PURE__*/React__default.createElement(Button, {
-        className: cx("".concat(blockClass, "__button"), _defineProperty({}, "".concat(blockClass, "__button--error"), item.kind === 'error')),
-        onClick: function onClick() {
-          var _item$onClick;
-          (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
+        className: cx(`${blockClass}__button`, {
+          [`${blockClass}__button--error`]: item.kind === 'error'
+        }),
+        onClick: () => {
+          item.onClick?.(item);
         },
         size: "sm",
         title: item.label
       }, /*#__PURE__*/React__default.createElement("div", null, item.label)) : /*#__PURE__*/React__default.createElement("div", {
-        className: cx("".concat(blockClass, "__label"), "".concat(blockClass, "__label--").concat(item.kind)),
+        className: cx(`${blockClass}__label`, `${blockClass}__label--${item.kind}`),
         title: item.label
       }, item.label));
     })));
   })), viewAllLabel && /*#__PURE__*/React__default.createElement("footer", {
-    className: "".concat(blockClass, "__footer")
+    className: `${blockClass}__footer`
   }, /*#__PURE__*/React__default.createElement(Button, {
-    className: cx("".concat(blockClass, "__button"), "".concat(blockClass, "__view-all")),
+    className: cx(`${blockClass}__button`, `${blockClass}__view-all`),
     onClick: handleClickViewAll,
     size: "sm"
   }, /*#__PURE__*/React__default.createElement("div", null, viewAllLabel))))));

package/es/components/Checklist/Checklist.types.js

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var Themes = /*#__PURE__*/function (Themes) {
+let Themes = /*#__PURE__*/function (Themes) {
   Themes["light"] = "light";
   Themes["dark"] = "dark";
   return Themes;
 }({});
-var Kinds = /*#__PURE__*/function (Kinds) {
+let Kinds = /*#__PURE__*/function (Kinds) {
   Kinds["unchecked"] = "unchecked";
   Kinds["indeterminate"] = "indeterminate";
   Kinds["checked"] = "checked";

package/es/components/Checklist/ChecklistChart.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, createForOfIteratorHelper as _createForOfIteratorHelper, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -15,46 +15,37 @@ import { pkg } from '../../settings.js';
 import { Themes } from './Checklist.types.js';
 import { clamp } from '../../global/js/utils/clamp.js';
 
-var _excluded = ["className", "value", "theme"];
-var blockClass = "".concat(pkg.prefix, "--checklist__chart");
-var componentName = 'ChecklistChart';
-var defaults = {
+const blockClass = `${pkg.prefix}--checklist__chart`;
+const componentName = 'ChecklistChart';
+const defaults = {
   theme: Themes.light
 };
 
 /**
  * Custom chart component used within Checklist PLG component
  */
-var ChecklistChart = /*#__PURE__*/React__default.forwardRef(
+let ChecklistChart = /*#__PURE__*/React__default.forwardRef(
 /**
  * @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
  */
-function (_ref, ref) {
-  var className = _ref.className,
-    value = _ref.value,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var numDegrees = clamp(value * 360, 0, 360);
-  var circleColor = theme === Themes.light ? gray20 : gray70; // $ui-03 (-ish)
-  var progressColor = purple50;
-  useEffect(function () {
-    var ele = document.getElementsByClassName("".concat(blockClass));
-    setTimeout(function () {
-      var _iterator = _createForOfIteratorHelper(ele),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var el = _step.value;
-          if (el instanceof HTMLElement) {
-            el.style.setProperty('background-image', "conic-gradient(".concat(progressColor, " ").concat(numDegrees, "deg, ").concat(circleColor, " ").concat(numDegrees, "deg 360deg)"));
-            el.style.setProperty('border-radius', '50%');
-          }
+(_ref, ref) => {
+  let {
+    className,
+    value,
+    theme = defaults.theme,
+    ...rest
+  } = _ref;
+  const numDegrees = clamp(value * 360, 0, 360);
+  const circleColor = theme === Themes.light ? gray20 : gray70; // $ui-03 (-ish)
+  const progressColor = purple50;
+  useEffect(() => {
+    const ele = document.getElementsByClassName(`${blockClass}`);
+    setTimeout(() => {
+      for (const el of ele) {
+        if (el instanceof HTMLElement) {
+          el.style.setProperty('background-image', `conic-gradient(${progressColor} ${numDegrees}deg, ${circleColor} ${numDegrees}deg 360deg)`);
+          el.style.setProperty('border-radius', '50%');
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
     }, 0);
   });

package/es/components/Checklist/ChecklistIcon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -14,11 +14,9 @@ import { pkg } from '../../settings.js';
 import { CircleDash, CheckmarkOutline, Incomplete, Warning } from '@carbon/react/icons';
 import { Themes, Kinds } from './Checklist.types.js';
 
-var _excluded = ["className", "kind", "theme"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(pkg.prefix, "--checklist__icon");
-var componentName = 'ChecklistIcon';
+const blockClass = `${pkg.prefix}--checklist__icon`;
+const componentName = 'ChecklistIcon';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
@@ -32,24 +30,25 @@ var componentName = 'ChecklistIcon';
 // or assumption when a prop is not supplied.
 
 // Default values for props
-var defaults = {
+const defaults = {
   theme: Themes.light
 };
 
 /**
  * TODO: A description of the component.
  */
-var ChecklistIcon = /*#__PURE__*/React__default.forwardRef(
+let ChecklistIcon = /*#__PURE__*/React__default.forwardRef(
 /**
  * @param {{className?: string, kind?: import('./Checklist.types').Kind, theme?: import('./Checklist.types').Theme}} props type description
  */
-function (_ref, ref) {
-  var className = _ref.className,
-    kind = _ref.kind,
-    _ref$theme = _ref.theme,
-    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var Icon;
+(_ref, ref) => {
+  let {
+    className,
+    kind,
+    theme = defaults.theme,
+    ...rest
+  } = _ref;
+  let Icon;
   switch (kind) {
     case 'error':
       Icon = Warning;
@@ -66,7 +65,7 @@ function (_ref, ref) {
       break;
   }
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
-    className: cx(blockClass, className, "".concat(blockClass, "--").concat(kind), "".concat(blockClass, "__").concat(theme)),
+    className: cx(blockClass, className, `${blockClass}--${kind}`, `${blockClass}__${theme}`),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(Icon, {
     size: 16