@carbon/ibm-products 2.68.0 → 2.69.0-rc.0

package/es/node_modules/lodash.debounce/index.js

@@ -0,0 +1,367 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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 { commonjsGlobal } from '../../_virtual/_commonjsHelpers.js';
+
+var lodash_debounce;
+var hasRequiredLodash_debounce;
+function requireLodash_debounce() {
+  if (hasRequiredLodash_debounce) return lodash_debounce;
+  hasRequiredLodash_debounce = 1;
+  /** Used as the `TypeError` message for "Functions" methods. */
+  var FUNC_ERROR_TEXT = 'Expected a function';
+
+  /** Used as references for various `Number` constants. */
+  var NAN = 0 / 0;
+
+  /** `Object#toString` result references. */
+  var symbolTag = '[object Symbol]';
+
+  /** Used to match leading and trailing whitespace. */
+  var reTrim = /^\s+|\s+$/g;
+
+  /** Used to detect bad signed hexadecimal string values. */
+  var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+  /** Used to detect binary string values. */
+  var reIsBinary = /^0b[01]+$/i;
+
+  /** Used to detect octal string values. */
+  var reIsOctal = /^0o[0-7]+$/i;
+
+  /** Built-in method references without a dependency on `root`. */
+  var freeParseInt = parseInt;
+
+  /** Detect free variable `global` from Node.js. */
+  var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+  /** Detect free variable `self`. */
+  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+  /** Used as a reference to the global object. */
+  var root = freeGlobal || freeSelf || Function('return this')();
+
+  /** Used for built-in method references. */
+  var objectProto = Object.prototype;
+
+  /**
+   * Used to resolve the
+   * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+   * of values.
+   */
+  var objectToString = objectProto.toString;
+
+  /* Built-in method references for those with the same name as other `lodash` methods. */
+  var nativeMax = Math.max,
+    nativeMin = Math.min;
+
+  /**
+   * Gets the timestamp of the number of milliseconds that have elapsed since
+   * the Unix epoch (1 January 1970 00:00:00 UTC).
+   *
+   * @static
+   * @memberOf _
+   * @since 2.4.0
+   * @category Date
+   * @returns {number} Returns the timestamp.
+   * @example
+   *
+   * _.defer(function(stamp) {
+   *   console.log(_.now() - stamp);
+   * }, _.now());
+   * // => Logs the number of milliseconds it took for the deferred invocation.
+   */
+  var now = function () {
+    return root.Date.now();
+  };
+
+  /**
+   * Creates a debounced function that delays invoking `func` until after `wait`
+   * milliseconds have elapsed since the last time the debounced function was
+   * invoked. The debounced function comes with a `cancel` method to cancel
+   * delayed `func` invocations and a `flush` method to immediately invoke them.
+   * Provide `options` to indicate whether `func` should be invoked on the
+   * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+   * with the last arguments provided to the debounced function. Subsequent
+   * calls to the debounced function return the result of the last `func`
+   * invocation.
+   *
+   * **Note:** If `leading` and `trailing` options are `true`, `func` is
+   * invoked on the trailing edge of the timeout only if the debounced function
+   * is invoked more than once during the `wait` timeout.
+   *
+   * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+   * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+   *
+   * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+   * for details over the differences between `_.debounce` and `_.throttle`.
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Function
+   * @param {Function} func The function to debounce.
+   * @param {number} [wait=0] The number of milliseconds to delay.
+   * @param {Object} [options={}] The options object.
+   * @param {boolean} [options.leading=false]
+   *  Specify invoking on the leading edge of the timeout.
+   * @param {number} [options.maxWait]
+   *  The maximum time `func` is allowed to be delayed before it's invoked.
+   * @param {boolean} [options.trailing=true]
+   *  Specify invoking on the trailing edge of the timeout.
+   * @returns {Function} Returns the new debounced function.
+   * @example
+   *
+   * // Avoid costly calculations while the window size is in flux.
+   * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+   *
+   * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+   * jQuery(element).on('click', _.debounce(sendMail, 300, {
+   *   'leading': true,
+   *   'trailing': false
+   * }));
+   *
+   * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+   * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+   * var source = new EventSource('/stream');
+   * jQuery(source).on('message', debounced);
+   *
+   * // Cancel the trailing debounced invocation.
+   * jQuery(window).on('popstate', debounced.cancel);
+   */
+  function debounce(func, wait, options) {
+    var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+    if (typeof func != 'function') {
+      throw new TypeError(FUNC_ERROR_TEXT);
+    }
+    wait = toNumber(wait) || 0;
+    if (isObject(options)) {
+      leading = !!options.leading;
+      maxing = 'maxWait' in options;
+      maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+      trailing = 'trailing' in options ? !!options.trailing : trailing;
+    }
+    function invokeFunc(time) {
+      var args = lastArgs,
+        thisArg = lastThis;
+      lastArgs = lastThis = undefined;
+      lastInvokeTime = time;
+      result = func.apply(thisArg, args);
+      return result;
+    }
+    function leadingEdge(time) {
+      // Reset any `maxWait` timer.
+      lastInvokeTime = time;
+      // Start the timer for the trailing edge.
+      timerId = setTimeout(timerExpired, wait);
+      // Invoke the leading edge.
+      return leading ? invokeFunc(time) : result;
+    }
+    function remainingWait(time) {
+      var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        result = wait - timeSinceLastCall;
+      return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+    }
+    function shouldInvoke(time) {
+      var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime;
+
+      // Either this is the first call, activity has stopped and we're at the
+      // trailing edge, the system time has gone backwards and we're treating
+      // it as the trailing edge, or we've hit the `maxWait` limit.
+      return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+    }
+    function timerExpired() {
+      var time = now();
+      if (shouldInvoke(time)) {
+        return trailingEdge(time);
+      }
+      // Restart the timer.
+      timerId = setTimeout(timerExpired, remainingWait(time));
+    }
+    function trailingEdge(time) {
+      timerId = undefined;
+
+      // Only invoke if we have `lastArgs` which means `func` has been
+      // debounced at least once.
+      if (trailing && lastArgs) {
+        return invokeFunc(time);
+      }
+      lastArgs = lastThis = undefined;
+      return result;
+    }
+    function cancel() {
+      if (timerId !== undefined) {
+        clearTimeout(timerId);
+      }
+      lastInvokeTime = 0;
+      lastArgs = lastCallTime = lastThis = timerId = undefined;
+    }
+    function flush() {
+      return timerId === undefined ? result : trailingEdge(now());
+    }
+    function debounced() {
+      var time = now(),
+        isInvoking = shouldInvoke(time);
+      lastArgs = arguments;
+      lastThis = this;
+      lastCallTime = time;
+      if (isInvoking) {
+        if (timerId === undefined) {
+          return leadingEdge(lastCallTime);
+        }
+        if (maxing) {
+          // Handle invocations in a tight loop.
+          timerId = setTimeout(timerExpired, wait);
+          return invokeFunc(lastCallTime);
+        }
+      }
+      if (timerId === undefined) {
+        timerId = setTimeout(timerExpired, wait);
+      }
+      return result;
+    }
+    debounced.cancel = cancel;
+    debounced.flush = flush;
+    return debounced;
+  }
+
+  /**
+   * Checks if `value` is the
+   * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+   * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+   *
+   * @static
+   * @memberOf _
+   * @since 0.1.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+   * @example
+   *
+   * _.isObject({});
+   * // => true
+   *
+   * _.isObject([1, 2, 3]);
+   * // => true
+   *
+   * _.isObject(_.noop);
+   * // => true
+   *
+   * _.isObject(null);
+   * // => false
+   */
+  function isObject(value) {
+    var type = typeof value;
+    return !!value && (type == 'object' || type == 'function');
+  }
+
+  /**
+   * Checks if `value` is object-like. A value is object-like if it's not `null`
+   * and has a `typeof` result of "object".
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+   * @example
+   *
+   * _.isObjectLike({});
+   * // => true
+   *
+   * _.isObjectLike([1, 2, 3]);
+   * // => true
+   *
+   * _.isObjectLike(_.noop);
+   * // => false
+   *
+   * _.isObjectLike(null);
+   * // => false
+   */
+  function isObjectLike(value) {
+    return !!value && typeof value == 'object';
+  }
+
+  /**
+   * Checks if `value` is classified as a `Symbol` primitive or object.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to check.
+   * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+   * @example
+   *
+   * _.isSymbol(Symbol.iterator);
+   * // => true
+   *
+   * _.isSymbol('abc');
+   * // => false
+   */
+  function isSymbol(value) {
+    return typeof value == 'symbol' || isObjectLike(value) && objectToString.call(value) == symbolTag;
+  }
+
+  /**
+   * Converts `value` to a number.
+   *
+   * @static
+   * @memberOf _
+   * @since 4.0.0
+   * @category Lang
+   * @param {*} value The value to process.
+   * @returns {number} Returns the number.
+   * @example
+   *
+   * _.toNumber(3.2);
+   * // => 3.2
+   *
+   * _.toNumber(Number.MIN_VALUE);
+   * // => 5e-324
+   *
+   * _.toNumber(Infinity);
+   * // => Infinity
+   *
+   * _.toNumber('3.2');
+   * // => 3.2
+   */
+  function toNumber(value) {
+    if (typeof value == 'number') {
+      return value;
+    }
+    if (isSymbol(value)) {
+      return NAN;
+    }
+    if (isObject(value)) {
+      var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+      value = isObject(other) ? other + '' : other;
+    }
+    if (typeof value != 'string') {
+      return value === 0 ? value : +value;
+    }
+    value = value.replace(reTrim, '');
+    var isBinary = reIsBinary.test(value);
+    return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+  }
+  lodash_debounce = debounce;
+  return lodash_debounce;
+}
+
+export { requireLodash_debounce as __require };

package/es/node_modules/prop-types/index.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { __module as propTypes } from '../../_virtual/index2.js';
+import { __module as propTypes } from '../../_virtual/index3.js';
 import require$$0 from 'react-is';
 import { __require as requireFactoryWithTypeCheckers } from './factoryWithTypeCheckers.js';
 import { __require as requireFactoryWithThrowingShims } from './factoryWithThrowingShims.js';

package/es/settings.js

@@ -11,9 +11,6 @@ import '@carbon/themes';
 import pconsole from './global/js/utils/pconsole.js';
 import { Canary } from './components/_Canary/Canary.js';
 
-const carbon = {
-  prefix: 'cds'
-};
 const componentDeprecatedWarning = (name, details) => `Carbon for IBM Products (WARNING): Component "${name}" is deprecated. ${details}`;
 pkg$1.logDeprecated = (component, name) => {
   if (component?.deprecated) {
@@ -85,4 +82,4 @@ pkg$1.checkComponentEnabled = (component, name) => {
 };
 const pkg = pkg$1;
 
-export { carbon, pkg };
+export { pkg };

package/lib/_virtual/_commonjsHelpers.js

@@ -7,8 +7,11 @@
 
 'use strict';
 
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
 
+exports.commonjsGlobal = commonjsGlobal;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/lib/_virtual/index2.js

@@ -7,6 +7,12 @@
 
 'use strict';
 
-var propTypes = {exports: {}};
+Object.defineProperty(exports, '__esModule', { value: true });
 
-exports.__module = propTypes;
+var _commonjsHelpers = require('./_commonjsHelpers.js');
+var index = require('../node_modules/lodash.debounce/index.js');
+
+var lodash_debounceExports = index.__require();
+var debounce = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_debounceExports);
+
+exports.default = debounce;

package/lib/_virtual/index3.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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';
+
+var propTypes = {exports: {}};
+
+exports.__module = propTypes;

package/lib/components/AddSelect/AddSelectColumn.js

@@ -17,9 +17,10 @@ var AddSelectList = require('./AddSelectList.js');
 var AddSelectSort = require('./AddSelectSort.js');
 var addSelectUtils = require('./add-select-utils.js');
 var useItemSort = require('./hooks/useItemSort.js');
-var uuidv4 = require('../../global/js/utils/uuidv4.js');
+var useId = require('../../global/js/utils/useId.js');
 var useParentSelect = require('./hooks/useParentSelect.js');
 
+var _Filter;
 const blockClass = `${settings.pkg.prefix}--add-select`;
 const colClass = `${blockClass}__column`;
 const componentName = 'AddSelectColumn';
@@ -37,11 +38,13 @@ let AddSelectColumn = _ref => {
     sortByLabel,
     ...props
   } = _ref;
-  const carbonPrefix = react.usePrefix();
   const {
     parentSelected,
     setParentSelected
   } = useParentSelect.default();
+  const selectAllId = useId.useId();
+  const filterId = useId.useId();
+  const searchId = useId.useId();
   const [searchTerm, setSearchTerm] = React.useState('');
   const {
     sortDirection,
@@ -49,6 +52,7 @@ let AddSelectColumn = _ref => {
     sortAttribute,
     setSortAttribute
   } = useItemSort.useItemSort();
+  const [filterOpen, setFilterOpen] = React.useState(false);
   const [filters, setFilters] = React.useState([]);
   const {
     entries,
@@ -114,6 +118,7 @@ let AddSelectColumn = _ref => {
     const filterByValue = item[filterBy];
     return filters.some(filter => filter === filterByValue);
   };
+  const filterBtnId = `filter-${filterId}`;
   const sortFn = addSelectUtils.sortItems(sortAttribute, sortDirection);
   const colItems = entries.filter(filterBySearch) // first check if the item meets the search
   .filter(filterByAttribute) // then check if the item is included in the filter
@@ -132,7 +137,7 @@ let AddSelectColumn = _ref => {
     onChange: e => setSearchTerm(e.target.value),
     placeholder: columnInputPlaceholder,
     className: `${colClass}-input`,
-    id: uuidv4.default(),
+    id: searchId,
     labelText: columnInputPlaceholder,
     size: "md"
   }), /*#__PURE__*/React.createElement("div", {
@@ -145,20 +150,38 @@ let AddSelectColumn = _ref => {
     sortDirection: sortDirection,
     sortBy: sortBy,
     sortByLabel: sortByLabel
-  }), filterByOpts.length > 0 && /*#__PURE__*/React.createElement(react.OverflowMenu, {
-    renderIcon: props => /*#__PURE__*/React.createElement(icons.Filter, _rollupPluginBabelHelpers.extends({
-      size: 32
-    }, props)),
-    className: `${colClass}-overflow`,
-    flipped: true,
-    "aria-label": filterByLabel,
-    iconDescription: filterByLabel
-  }, filterByOpts.map(opt => /*#__PURE__*/React.createElement("div", {
+  }), filterByOpts.length > 0 && /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+    enableV12DynamicFloatingStyles: true
+  }, /*#__PURE__*/React.createElement(react.Popover, {
+    align: "bottom-right",
+    isTabTip: true,
+    onKeyDown: e => {
+      if (e.key === 'Escape') {
+        setFilterOpen(false);
+        e.preventDefault(); // prevent modal close
+        e.stopPropagation();
+        const filterBtn = document.querySelector(`#${filterBtnId}`);
+        filterBtn?.focus(); // workaround to return focus, refs not possible on button inside popover for some reason
+      }
+    },
+    onRequestClose: () => setFilterOpen(false),
+    open: filterOpen
+  }, /*#__PURE__*/React.createElement(react.IconButton, {
+    size: "md",
+    id: filterBtnId,
+    hasIconOnly: true,
+    "aria-expanded": filterOpen,
+    badgeCount: filters.length > 0 ? 0 : undefined // setting to 0 renders an empty dot
+    ,
+    kind: "ghost",
+    label: filterByLabel || 'Filter',
+    onClick: () => {
+      setFilterOpen(prev => !prev);
+    }
+  }, _Filter || (_Filter = /*#__PURE__*/React.createElement(icons.Filter, null))), /*#__PURE__*/React.createElement(react.PopoverContent, {
+    className: `${colClass}-filter-popover`
+  }, filterByOpts.map(opt => /*#__PURE__*/React.createElement(react.Checkbox, {
     key: opt,
-    className: `${carbonPrefix}--overflow-menu-options__option`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${carbonPrefix}--overflow-menu-options__btn`
-  }, /*#__PURE__*/React.createElement(react.Checkbox, {
     id: opt,
     labelText: opt,
     onChange: (event, _ref3) => {
@@ -171,7 +194,7 @@ let AddSelectColumn = _ref => {
   }))))))), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tags`
   }, /*#__PURE__*/React.createElement(react.Checkbox, {
-    id: `${uuidv4.default()}-select-all`,
+    id: `${selectAllId}-select-all`,
     className: `${colClass}__select-all`,
     checked: allSelected,
     onChange: selectAllHandler,

package/lib/components/AddSelect/AddSelectSort.js

@@ -14,7 +14,6 @@ var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var settings = require('../../settings.js');
 
-var _ArrowUp, _ArrowDown;
 const blockClass = `${settings.pkg.prefix}--add-select-sort`;
 const componentName = 'AddSelectSort';
 const AddSelectSort = _ref => {
@@ -27,16 +26,12 @@ const AddSelectSort = _ref => {
   const sortByOpts = sortBy ? sortBy?.reduce((acc, cur) => {
     const opts = [{
       id: `${cur}-asc`,
-      itemText: /*#__PURE__*/React.createElement(React.Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React.createElement(icons.ArrowUp, {
-        size: 16
-      })), cur),
+      label: cur,
       direction: 'asc',
       attribute: cur
     }, {
       id: `${cur}-desc`,
-      itemText: /*#__PURE__*/React.createElement(React.Fragment, null, _ArrowDown || (_ArrowDown = /*#__PURE__*/React.createElement(icons.ArrowDown, {
-        size: 16
-      })), cur),
+      label: cur,
       direction: 'desc',
       attribute: cur
     }];
@@ -54,22 +49,26 @@ const AddSelectSort = _ref => {
   };
   return /*#__PURE__*/React.createElement("div", {
     className: blockClass
-  }, sortByOpts.length > 0 && /*#__PURE__*/React.createElement(react.OverflowMenu, {
+  }, sortByOpts.length > 0 && /*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
+    enableV12Overflowmenu: true
+  }, /*#__PURE__*/React.createElement(react.OverflowMenu
+  // @ts-ignore // TODO: remove after carbon fixes this ts error
+  , {
+    autoAlign: true,
+    menuAlignment: "bottom-end",
     renderIcon: props => /*#__PURE__*/React.createElement(icons.ArrowsVertical, _rollupPluginBabelHelpers.extends({
       size: 32
     }, props)),
     className: `${blockClass}_overflow`,
-    flipped: true,
-    "aria-label": sortByLabel,
-    iconDescription: sortByLabel
+    label: sortByLabel
   }, sortByOpts.map(opt => {
-    return /*#__PURE__*/React.createElement(react.OverflowMenuItem, {
+    return /*#__PURE__*/React.createElement(react.MenuItem, {
       className: `${blockClass}_overflow-item`,
       key: opt?.id,
-      itemText: opt?.itemText,
+      label: `${opt?.label} ${opt?.direction}`,
       onClick: () => sortHandler(opt)
     });
-  })));
+  }))));
 };
 AddSelectSort.propTypes = {
   setSortAttribute: index.default.func,

package/lib/components/AddSelect/types/index.d.ts

@@ -47,5 +47,5 @@ export interface SortOption {
     id?: string;
     direction?: string;
     attribute?: string;
-    itemText?: ReactNode;
+    label?: string;
 }

package/lib/components/Card/Card.d.ts

@@ -10,7 +10,7 @@ type LinkType = {
     [key: string]: unknown;
 };
 export interface ActionIcon extends Metadata {
-    onKeydown?: (event: KeyboardEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
     onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
     /**
      * @deprecated please use the `link.href` instead
@@ -22,7 +22,7 @@ type OverflowActions = {
     id?: string;
     itemText?: string;
     onClick?: () => void;
-    onKeydown?: () => void;
+    onKeyDown?: () => void;
 };
 interface CardProp extends PropsWithChildren {
     actionIcons?: readonly ActionIcon[];

package/lib/components/Card/Card.js

@@ -98,12 +98,15 @@ const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         let {
           id,
           itemText,
-          ...rest
+          onKeyDown,
+          onClick
         } = _ref2;
-        return /*#__PURE__*/React.createElement(react.MenuItem, _rollupPluginBabelHelpers.extends({
+        return /*#__PURE__*/React.createElement(react.MenuItem, {
           key: id,
-          label: itemText ?? ''
-        }, rest));
+          label: itemText ?? '',
+          onKeyDown: onKeyDown,
+          onClick: onClick
+        });
       }))));
     }
     const icons = getIcons().map(_ref3 => {