@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/Layout/LayoutDirection.js

@@ -5,22 +5,20 @@
  * 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 PropTypes from 'prop-types';
 import React__default from 'react';
 import { LayoutDirectionContext } from './LayoutDirectionContext.js';
 export { LayoutDirectionContext } from './LayoutDirectionContext.js';
 
-var _excluded = ["as", "children", "dir"];
-
 function LayoutDirection(_ref) {
-  var _ref$as = _ref.as,
-      BaseComponent = _ref$as === void 0 ? 'div' : _ref$as,
-      children = _ref.children,
-      dir = _ref.dir,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var value = React__default.useMemo(function () {
+  let {
+    as: BaseComponent = 'div',
+    children,
+    dir,
+    ...rest
+  } = _ref;
+  const value = React__default.useMemo(() => {
     return {
       direction: dir
     };

package/es/components/Layout/LayoutDirectionContext.js

@@ -7,7 +7,7 @@
 
 import React__default from 'react';
 
-var LayoutDirectionContext = /*#__PURE__*/React__default.createContext({
+const LayoutDirectionContext = /*#__PURE__*/React__default.createContext({
   direction: 'ltr'
 });
 

package/es/components/Link/Link.js

@@ -5,35 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "className", "href", "disabled", "inline", "visited", "renderIcon", "size"];
-var Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
-  var _cx;
-
-  var children = _ref.children,
-      customClassName = _ref.className,
-      href = _ref.href,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$visited = _ref.visited,
-      visited = _ref$visited === void 0 ? false : _ref$visited,
-      Icon = _ref.renderIcon,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--link"), customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--link--disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--link--inline"), inline), _defineProperty(_cx, "".concat(prefix, "--link--visited"), visited), _defineProperty(_cx, "".concat(prefix, "--link--").concat(size), size), _cx));
-  var rel = rest.target === '_blank' ? 'noopener' : null;
-  var linkProps = {
-    className: className,
-    rel: rel
+const Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
+  let {
+    children,
+    className: customClassName,
+    href,
+    disabled = false,
+    inline = false,
+    visited = false,
+    renderIcon: Icon,
+    size,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--link`, customClassName, {
+    [`${prefix}--link--disabled`]: disabled,
+    [`${prefix}--link--inline`]: inline,
+    [`${prefix}--link--visited`]: visited,
+    [`${prefix}--link--${size}`]: size
+  });
+  const rel = rest.target === '_blank' ? 'noopener' : null;
+  const linkProps = {
+    className,
+    rel
   }; // Reference for disabled links:
   // https://www.scottohara.me/blog/2021/05/28/disabled-links.html
 
@@ -47,7 +47,7 @@ var Link = /*#__PURE__*/React__default.forwardRef(function Link(_ref, ref) {
   return /*#__PURE__*/React__default.createElement("a", _extends({
     ref: ref
   }, linkProps, rest), children, !inline && Icon && /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--link__icon")
+    className: `${prefix}--link__icon`
   }, /*#__PURE__*/React__default.createElement(Icon, null)));
 });
 Link.displayName = 'Link';

package/es/components/ListBox/ListBox.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default, { useContext } from 'react';
 import PropTypes from 'prop-types';
@@ -15,15 +15,13 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 
-var _excluded = ["children", "className", "disabled", "type", "size", "invalid", "invalidText", "warn", "warnText", "light", "isOpen"];
-
-var handleOnKeyDown = function handleOnKeyDown(event) {
+const handleOnKeyDown = event => {
   if (event.keyCode === 27) {
     event.stopPropagation();
   }
 };
 
-var handleClick = function handleClick(event) {
+const handleClick = event => {
   event.preventDefault();
   event.stopPropagation();
 };
@@ -32,29 +30,38 @@ var handleClick = function handleClick(event) {
  * `ListBox` is a generic container component that handles creating the
  * container class name in response to certain props.
  */
-var ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref) {
-  var _objectSpread2$1;
-
-  var children = _ref.children,
-      containerClassName = _ref.className,
-      disabled = _ref.disabled,
-      type = _ref.type,
-      size = _ref.size,
-      invalid = _ref.invalid,
-      invalidText = _ref.invalidText,
-      warn = _ref.warn,
-      warnText = _ref.warnText,
-      light = _ref.light,
-      isOpen = _ref.isOpen,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-
-  var _useContext = useContext(FormContext),
-      isFluid = _useContext.isFluid;
-
-  var showWarning = !invalid && warn;
-  var className = cx(_objectSpread2(_objectSpread2({}, containerClassName && _defineProperty({}, containerClassName, true)), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box"), true), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--").concat(size), size), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--inline"), type === 'inline'), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--disabled"), disabled), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--light"), light), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--expanded"), isOpen), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--invalid"), invalid), _defineProperty(_objectSpread2$1, "".concat(prefix, "--list-box--warning"), showWarning), _objectSpread2$1)));
+const ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref) {
+  let {
+    children,
+    className: containerClassName,
+    disabled,
+    type,
+    size,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
+    light,
+    isOpen,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const {
+    isFluid
+  } = useContext(FormContext);
+  const showWarning = !invalid && warn;
+  const className = cx({ ...(containerClassName && {
+      [containerClassName]: true
+    }),
+    [`${prefix}--list-box`]: true,
+    [`${prefix}--list-box--${size}`]: size,
+    [`${prefix}--list-box--inline`]: type === 'inline',
+    [`${prefix}--list-box--disabled`]: disabled,
+    [`${prefix}--list-box--light`]: light,
+    [`${prefix}--list-box--expanded`]: isOpen,
+    [`${prefix}--list-box--invalid`]: invalid,
+    [`${prefix}--list-box--warning`]: showWarning
+  });
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: className,
     ref: ref,
@@ -62,11 +69,11 @@ var ListBox = /*#__PURE__*/React__default.forwardRef(function ListBox(_ref, ref)
     onClick: handleClick,
     "data-invalid": invalid || undefined
   }), children), isFluid && /*#__PURE__*/React__default.createElement("hr", {
-    className: "".concat(prefix, "--list-box__divider")
+    className: `${prefix}--list-box__divider`
   }), invalid ? /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, invalidText) : null, showWarning ? /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--form-requirement")
+    className: `${prefix}--form-requirement`
   }, warnText) : null);
 });
 ListBox.displayName = 'ListBox';

package/es/components/ListBox/ListBoxField.js

@@ -5,27 +5,26 @@
  * 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 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "disabled", "tabIndex"];
-
 /**
  * `ListBoxField` is responsible for creating the containing node for valid
  * elements inside of a field. It also provides a11y-related attributes like
  * `role` to make sure a user can focus the given field.
  */
 function ListBoxField(_ref) {
-  var children = _ref.children,
-      disabled = _ref.disabled,
-      tabIndex = _ref.tabIndex,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
+  let {
+    children,
+    disabled,
+    tabIndex,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", _extends({
-    className: "".concat(prefix, "--list-box__field"),
+    className: `${prefix}--list-box__field`,
     tabIndex: !disabled && tabIndex || -1
   }, rest), children);
 }

package/es/components/ListBox/ListBoxMenu.js

@@ -5,29 +5,28 @@
  * 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 { usePrefix } from '../../internal/usePrefix.js';
 import PropTypes from 'prop-types';
 import ListBoxMenuItem from './ListBoxMenuItem.js';
 
-var _excluded = ["children", "id"];
-
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given
  * `children` components.
  */
-var ListBoxMenu = /*#__PURE__*/React__default.forwardRef(function ListBoxMenu(_ref, ref) {
-  var children = _ref.children,
-      id = _ref.id,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
+const ListBoxMenu = /*#__PURE__*/React__default.forwardRef(function ListBoxMenu(_ref, ref) {
+  let {
+    children,
+    id,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: ref,
     id: id,
-    className: "".concat(prefix, "--list-box__menu"),
+    className: `${prefix}--list-box__menu`,
     role: "listbox"
   }, rest), children);
 });

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -5,35 +5,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { ChevronDown } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _defaultTranslations;
-var translationIds = {
+const translationIds = {
   'close.menu': 'close.menu',
   'open.menu': 'open.menu'
 };
-var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['close.menu'], 'Close menu'), _defineProperty(_defaultTranslations, translationIds['open.menu'], 'Open menu'), _defaultTranslations);
-
-var defaultTranslateWithId = function defaultTranslateWithId(id) {
-  return defaultTranslations[id];
+const defaultTranslations = {
+  [translationIds['close.menu']]: 'Close menu',
+  [translationIds['open.menu']]: 'Open menu'
 };
 
+const defaultTranslateWithId = id => defaultTranslations[id];
+
 /**
  * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
  * state of the menu for a given `ListBox`
  */
-var ListBoxMenuIcon = function ListBoxMenuIcon(_ref) {
-  var isOpen = _ref.isOpen,
-      _ref$translateWithId = _ref.translateWithId,
-      t = _ref$translateWithId === void 0 ? defaultTranslateWithId : _ref$translateWithId;
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--list-box__menu-icon"), _defineProperty({}, "".concat(prefix, "--list-box__menu-icon--open"), isOpen));
-  var description = isOpen ? t('close.menu') : t('open.menu');
+const ListBoxMenuIcon = _ref => {
+  let {
+    isOpen,
+    translateWithId: t = defaultTranslateWithId
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--list-box__menu-icon`, {
+    [`${prefix}--list-box__menu-icon--open`]: isOpen
+  });
+  const description = isOpen ? t('close.menu') : t('open.menu');
   return /*#__PURE__*/React__default.createElement("div", {
     className: className
   }, /*#__PURE__*/React__default.createElement(ChevronDown, {

package/es/components/ListBox/ListBoxMenuItem.js

@@ -5,24 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["children", "isActive", "isHighlighted", "title"];
-
 function useIsTruncated(ref) {
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isTruncated = _useState2[0],
-      setIsTruncated = _useState2[1];
-
-  useEffect(function () {
-    var _ref$current = ref.current,
-        offsetWidth = _ref$current.offsetWidth,
-        scrollWidth = _ref$current.scrollWidth;
+  const [isTruncated, setIsTruncated] = useState(false);
+  useEffect(() => {
+    const {
+      offsetWidth,
+      scrollWidth
+    } = ref.current;
     setIsTruncated(offsetWidth < scrollWidth);
   }, [ref, setIsTruncated]);
   return isTruncated;
@@ -33,25 +28,27 @@ function useIsTruncated(ref) {
  * name, alongside any classes for any corresponding states, for a generic list
  * box menu item.
  */
-var ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
-  var _cx;
-
-  var children = _ref.children,
-      isActive = _ref.isActive,
-      isHighlighted = _ref.isHighlighted,
-      title = _ref.title,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix();
-  var ref = useRef(null);
-  var isTruncated = useIsTruncated((forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref);
-  var className = cx("".concat(prefix, "--list-box__menu-item"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--active"), isActive), _defineProperty(_cx, "".concat(prefix, "--list-box__menu-item--highlighted"), isHighlighted), _cx));
+const ListBoxMenuItem = /*#__PURE__*/React__default.forwardRef(function ListBoxMenuItem(_ref, forwardedRef) {
+  let {
+    children,
+    isActive,
+    isHighlighted,
+    title,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix();
+  const ref = useRef(null);
+  const isTruncated = useIsTruncated((forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref);
+  const className = cx(`${prefix}--list-box__menu-item`, {
+    [`${prefix}--list-box__menu-item--active`]: isActive,
+    [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
+  });
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: className,
     title: isTruncated ? title : undefined,
     tabIndex: -1
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(prefix, "--list-box__menu-item__option"),
+    className: `${prefix}--list-box__menu-item__option`,
     ref: (forwardedRef === null || forwardedRef === void 0 ? void 0 : forwardedRef.menuItemOptionRef) || ref
   }, children));
 });

package/es/components/ListBox/ListBoxPropTypes.js

@@ -7,9 +7,9 @@
 
 import PropTypes from 'prop-types';
 
-var listBoxTypes = ['default', 'inline'];
-var listBoxSizes = ['sm', 'md', 'lg'];
-var ListBoxType = PropTypes.oneOf(listBoxTypes);
-var ListBoxSize = PropTypes.oneOf(listBoxSizes);
+const listBoxTypes = ['default', 'inline'];
+const listBoxSizes = ['sm', 'md', 'lg'];
+const ListBoxType = PropTypes.oneOf(listBoxTypes);
+const ListBoxSize = PropTypes.oneOf(listBoxSizes);
 
 export { ListBoxSize, ListBoxType };

package/es/components/ListBox/ListBoxSelection.js

@@ -5,33 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import cx from 'classnames';
 import React__default from 'react';
 import PropTypes from 'prop-types';
 import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _Close, _Close2, _defaultTranslations;
+var _Close, _Close2;
 
 /**
  * `ListBoxSelection` is used to provide controls for clearing a selection, in
  * addition to conditionally rendering a badge if the control has more than one
  * selection.
  */
-var ListBoxSelection = function ListBoxSelection(_ref) {
-  var _cx;
-
-  var clearSelection = _ref.clearSelection,
-      selectionCount = _ref.selectionCount,
-      t = _ref.translateWithId,
-      disabled = _ref.disabled,
-      onClearSelection = _ref.onClearSelection,
-      readOnly = _ref.readOnly;
-  var prefix = usePrefix();
-  var className = cx("".concat(prefix, "--list-box__selection"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tag--filter"), selectionCount), _defineProperty(_cx, "".concat(prefix, "--list-box__selection--multi"), selectionCount), _cx));
-
-  var handleOnClick = function handleOnClick(event) {
+const ListBoxSelection = _ref => {
+  let {
+    clearSelection,
+    selectionCount,
+    translateWithId: t,
+    disabled,
+    onClearSelection,
+    readOnly
+  } = _ref;
+  const prefix = usePrefix();
+  const className = cx(`${prefix}--list-box__selection`, {
+    [`${prefix}--tag--filter`]: selectionCount,
+    [`${prefix}--list-box__selection--multi`]: selectionCount
+  });
+
+  const handleOnClick = event => {
     event.stopPropagation();
 
     if (disabled || readOnly) {
@@ -45,19 +47,21 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
     }
   };
 
-  var description = selectionCount ? t('clear.all') : t('clear.selection');
-  var tagClasses = cx("".concat(prefix, "--tag"), "".concat(prefix, "--tag--filter"), "".concat(prefix, "--tag--high-contrast"), _defineProperty({}, "".concat(prefix, "--tag--disabled"), disabled));
+  const description = selectionCount ? t('clear.all') : t('clear.selection');
+  const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
+    [`${prefix}--tag--disabled`]: disabled
+  });
   /* eslint-disable jsx-a11y/click-events-have-key-events */
 
   return selectionCount ? /*#__PURE__*/React__default.createElement("div", {
     className: tagClasses
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--tag__label"),
-    title: "".concat(selectionCount)
+    className: `${prefix}--tag__label`,
+    title: `${selectionCount}`
   }, selectionCount), /*#__PURE__*/React__default.createElement("div", {
     role: "button",
     tabIndex: -1,
-    className: "".concat(prefix, "--tag__close-icon"),
+    className: `${prefix}--tag__close-icon`,
     onClick: handleOnClick,
     "aria-label": t('clear.all'),
     title: description,
@@ -72,11 +76,14 @@ var ListBoxSelection = function ListBoxSelection(_ref) {
   }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React__default.createElement(Close, null)));
 };
 
-var translationIds = {
+const translationIds = {
   'clear.all': 'clear.all',
   'clear.selection': 'clear.selection'
 };
-var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationIds['clear.all'], 'Clear all selected items'), _defineProperty(_defaultTranslations, translationIds['clear.selection'], 'Clear selected item'), _defaultTranslations);
+const defaultTranslations = {
+  [translationIds['clear.all']]: 'Clear all selected items',
+  [translationIds['clear.selection']]: 'Clear selected item'
+};
 ListBoxSelection.propTypes = {
   /**
    * Specify a function to be invoked when a user interacts with the clear
@@ -114,9 +121,7 @@ ListBoxSelection.propTypes = {
   translateWithId: PropTypes.func.isRequired
 };
 ListBoxSelection.defaultProps = {
-  translateWithId: function translateWithId(id) {
-    return defaultTranslations[id];
-  }
+  translateWithId: id => defaultTranslations[id]
 };
 
 export { ListBoxSelection as default, translationIds };

package/es/components/ListBox/index.js

@@ -13,7 +13,7 @@ import ListBoxMenuIcon from './ListBoxMenuIcon.js';
 import ListBoxMenuItem from './ListBoxMenuItem.js';
 import ListBoxSelection from './ListBoxSelection.js';
 
-var ListBox = Object.assign(ListBox$1, {
+const ListBox = Object.assign(ListBox$1, {
   Field: ListBoxField,
   Menu: ListBoxMenu,
   MenuIcon: ListBoxMenuIcon,