@carbon/react 1.103.0 → 1.104.0

package/es/components/Select/Select.Skeleton.js

@@ -1,41 +1,38 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
 
-const SelectSkeleton = ({
-  hideLabel,
-  className,
-  ...rest
-}) => {
-  const prefix = usePrefix();
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: cx(`${prefix}--form-item`, className)
-  }, rest), !hideLabel && /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--label ${prefix}--skeleton`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--select ${prefix}--skeleton`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--select-input`
-  })));
+//#region src/components/Select/Select.Skeleton.tsx
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
+const SelectSkeleton = ({ hideLabel, className, ...rest }) => {
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(`${prefix}--form-item`, className),
+		...rest,
+		children: [!hideLabel && /* @__PURE__ */ jsx("span", { className: `${prefix}--label ${prefix}--skeleton` }), /* @__PURE__ */ jsx("div", {
+			className: `${prefix}--select ${prefix}--skeleton`,
+			children: /* @__PURE__ */ jsx("div", { className: `${prefix}--select-input` })
+		})]
+	});
 };
 SelectSkeleton.propTypes = {
-  /**
-   * Specify an optional className to add to the form item wrapper.
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the label should be hidden, or not
-   */
-  hideLabel: PropTypes.bool
+	className: PropTypes.string,
+	hideLabel: PropTypes.bool
 };
 
-export { SelectSkeleton, SelectSkeleton as default };
+//#endregion
+export { SelectSkeleton as default };

package/es/components/Select/Select.js

@@ -1,268 +1,189 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
-import React, { forwardRef, useContext, useState, cloneElement } from 'react';
-import cx from 'classnames';
-import { ChevronDown, WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import '../FluidForm/FluidForm.js';
-import { FormContext } from '../FluidForm/FormContext.js';
-import { composeEventHandlers } from '../../tools/events.js';
-import { Text } from '../Text/Text.js';
-import '../Text/TextDirection.js';
-import { AILabel } from '../AILabel/index.js';
-import { isComponentElement } from '../../internal/utils.js';
-import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Text } from "../Text/Text.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { AILabel } from "../AILabel/index.js";
+import { isComponentElement } from "../../internal/utils.js";
+import { composeEventHandlers } from "../../tools/events.js";
+import { FormContext } from "../FluidForm/FormContext.js";
+import { useNormalizedInputProps } from "../../internal/useNormalizedInputProps.js";
+import classNames from "classnames";
+import React, { cloneElement, forwardRef, useContext, useState } from "react";
+import PropTypes from "prop-types";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, WarningAltFilled, WarningFilled } from "@carbon/icons-react";
 
-const Select = /*#__PURE__*/forwardRef(({
-  className,
-  decorator,
-  id,
-  inline = false,
-  labelText = 'Select',
-  disabled = false,
-  children,
-  // reserved for use with Pagination component
-  noLabel = false,
-  hideLabel = false,
-  invalid = false,
-  invalidText = '',
-  helperText,
-  light = false,
-  readOnly,
-  size,
-  warn = false,
-  warnText,
-  onChange,
-  slug,
-  ...other
-}, ref) => {
-  const prefix = usePrefix();
-  const {
-    isFluid
-  } = useContext(FormContext);
-  const [isFocused, setIsFocused] = useState(false);
-  // Convert children to an array of valid elements once using type narrowing
-  const validChildren = React.Children.toArray(children).filter(child => /*#__PURE__*/React.isValidElement(child));
-
-  // Find the default option based on the specified defaultValue or value
-  const selectedValue = other?.value || other?.defaultValue;
-  const selectedOption = validChildren.find(child => child.props?.value === selectedValue);
-
-  // Use the provided title prop, or the selected option's text if available;
-  // otherwise, fallback to the first option's text
-  const initialTitle = other?.title || selectedOption?.props?.text || validChildren[0]?.props?.text || '';
-  const [title, setTitle] = useState(initialTitle);
-  const normalizedProps = useNormalizedInputProps({
-    id,
-    disabled,
-    readOnly,
-    invalid,
-    invalidText,
-    warn,
-    warnText
-  });
-  const selectClasses = cx({
-    [`${prefix}--select`]: true,
-    [`${prefix}--select--inline`]: inline,
-    [`${prefix}--select--light`]: light,
-    [`${prefix}--select--invalid`]: normalizedProps.invalid,
-    [`${prefix}--select--disabled`]: normalizedProps.disabled,
-    [`${prefix}--select--readonly`]: readOnly,
-    [`${prefix}--select--warning`]: normalizedProps.warn,
-    [`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
-    [`${prefix}--select--fluid--focus`]: isFluid && isFocused,
-    [`${prefix}--select--slug`]: slug,
-    [`${prefix}--select--decorator`]: decorator
-  });
-  const labelClasses = cx(`${prefix}--label`, {
-    [`${prefix}--visually-hidden`]: hideLabel,
-    [`${prefix}--label--disabled`]: normalizedProps.disabled
-  });
-  const inputClasses = cx({
-    [`${prefix}--select-input`]: true,
-    [`${prefix}--select-input--${size}`]: size
-  });
-  const error = normalizedProps.validation;
-  const helperTextClasses = cx(`${prefix}--form__helper-text`, {
-    [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
-  });
-  const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
-  const helper = hasHelper ? /*#__PURE__*/React.createElement(Text, {
-    as: "div",
-    id: normalizedProps.helperId,
-    className: helperTextClasses
-  }, helperText) : null;
-  const ariaProps = {};
-  if (normalizedProps.invalid) {
-    ariaProps['aria-describedby'] = normalizedProps.invalidId;
-  } else if (!inline && !isFluid) {
-    ariaProps['aria-describedby'] = helper ? normalizedProps.helperId : undefined;
-  }
-  const handleFocus = evt => {
-    setIsFocused(evt.type === 'focus');
-  };
-  const handleChange = evt => {
-    const selectedOption = evt?.target?.options[evt.target.selectedIndex];
-    setTitle(selectedOption?.text);
-  };
-  const readOnlyEventHandlers = {
-    onMouseDown: evt => {
-      // NOTE: does not prevent click
-      if (readOnly) {
-        evt.preventDefault();
-        // focus on the element as per readonly input behavior
-        evt.target.focus();
-      }
-    },
-    onKeyDown: evt => {
-      const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' '];
-      // This prevents the select from opening for the above keys
-      if (readOnly && selectAccessKeys.includes(evt.key)) {
-        evt.preventDefault();
-      }
-    }
-  };
-
-  // AILabel always size `mini`
-  const candidate = slug ?? decorator;
-  const candidateIsAILabel = isComponentElement(candidate, AILabel);
-  const normalizedDecorator = candidateIsAILabel ? /*#__PURE__*/cloneElement(candidate, {
-    size: 'mini'
-  }) : candidate;
-  const input = (() => {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("select", _extends({}, other, ariaProps, {
-      id: id,
-      className: inputClasses,
-      disabled: normalizedProps.disabled || undefined,
-      "aria-invalid": normalizedProps.invalid || undefined,
-      "aria-readonly": readOnly || undefined,
-      title: title,
-      onChange: composeEventHandlers([onChange, handleChange])
-    }, readOnlyEventHandlers, {
-      ref: ref
-    }), children), /*#__PURE__*/React.createElement(ChevronDown, {
-      className: `${prefix}--select__arrow`
-    }), normalizedProps.invalid && /*#__PURE__*/React.createElement(WarningFilled, {
-      className: `${prefix}--select__invalid-icon`
-    }), !normalizedProps.invalid && normalizedProps.warn && /*#__PURE__*/React.createElement(WarningAltFilled, {
-      className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`
-    }));
-  })();
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(`${prefix}--form-item`, className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: selectClasses
-  }, !noLabel && /*#__PURE__*/React.createElement(Text, {
-    as: "label",
-    htmlFor: id,
-    className: labelClasses
-  }, labelText), inline && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--select-input--inline__wrapper`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--select-input__wrapper`,
-    "data-invalid": normalizedProps.invalid || null
-  }, input), error), !inline && /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--select-input__wrapper`,
-    "data-invalid": normalizedProps.invalid || null,
-    onFocus: handleFocus,
-    onBlur: handleFocus
-  }, input, slug ? normalizedDecorator : decorator ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--select__inner-wrapper--decorator`
-  }, normalizedDecorator) : '', isFluid && /*#__PURE__*/React.createElement("hr", {
-    className: `${prefix}--select__divider`
-  }), isFluid && error ? error : null), !inline && !isFluid && error ? error : helper));
+//#region src/components/Select/Select.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* 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 Select = forwardRef(({ className, decorator, id, inline = false, labelText = "Select", disabled = false, children, noLabel = false, hideLabel = false, invalid = false, invalidText = "", helperText, light = false, readOnly, size, warn = false, warnText, onChange, slug, ...other }, ref) => {
+	const prefix = usePrefix();
+	const { isFluid } = useContext(FormContext);
+	const [isFocused, setIsFocused] = useState(false);
+	const validChildren = React.Children.toArray(children).filter((child) => React.isValidElement(child));
+	const selectedValue = other?.value || other?.defaultValue;
+	const selectedOption = validChildren.find((child) => child.props?.value === selectedValue);
+	const [title, setTitle] = useState(other?.title || selectedOption?.props?.text || validChildren[0]?.props?.text || "");
+	const normalizedProps = useNormalizedInputProps({
+		id,
+		disabled,
+		readOnly,
+		invalid,
+		invalidText,
+		warn,
+		warnText
+	});
+	const selectClasses = classNames({
+		[`${prefix}--select`]: true,
+		[`${prefix}--select--inline`]: inline,
+		[`${prefix}--select--light`]: light,
+		[`${prefix}--select--invalid`]: normalizedProps.invalid,
+		[`${prefix}--select--disabled`]: normalizedProps.disabled,
+		[`${prefix}--select--readonly`]: readOnly,
+		[`${prefix}--select--warning`]: normalizedProps.warn,
+		[`${prefix}--select--fluid--invalid`]: isFluid && normalizedProps.invalid,
+		[`${prefix}--select--fluid--focus`]: isFluid && isFocused,
+		[`${prefix}--select--slug`]: slug,
+		[`${prefix}--select--decorator`]: decorator
+	});
+	const labelClasses = classNames(`${prefix}--label`, {
+		[`${prefix}--visually-hidden`]: hideLabel,
+		[`${prefix}--label--disabled`]: normalizedProps.disabled
+	});
+	const inputClasses = classNames({
+		[`${prefix}--select-input`]: true,
+		[`${prefix}--select-input--${size}`]: size
+	});
+	const error = normalizedProps.validation;
+	const helperTextClasses = classNames(`${prefix}--form__helper-text`, { [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled });
+	const helper = typeof helperText !== "undefined" && helperText !== null ? /* @__PURE__ */ jsx(Text, {
+		as: "div",
+		id: normalizedProps.helperId,
+		className: helperTextClasses,
+		children: helperText
+	}) : null;
+	const ariaProps = {};
+	if (normalizedProps.invalid) ariaProps["aria-describedby"] = normalizedProps.invalidId;
+	else if (!inline && !isFluid) ariaProps["aria-describedby"] = helper ? normalizedProps.helperId : void 0;
+	const handleFocus = (evt) => {
+		setIsFocused(evt.type === "focus");
+	};
+	const handleChange = (evt) => {
+		const selectedOption = evt?.target?.options[evt.target.selectedIndex];
+		setTitle(selectedOption?.text);
+	};
+	const readOnlyEventHandlers = {
+		onMouseDown: (evt) => {
+			if (readOnly) {
+				evt.preventDefault();
+				evt.target.focus();
+			}
+		},
+		onKeyDown: (evt) => {
+			if (readOnly && [
+				"ArrowDown",
+				"ArrowUp",
+				" "
+			].includes(evt.key)) evt.preventDefault();
+		}
+	};
+	const candidate = slug ?? decorator;
+	const normalizedDecorator = isComponentElement(candidate, AILabel) ? cloneElement(candidate, { size: "mini" }) : candidate;
+	const input = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("select", {
+			...other,
+			...ariaProps,
+			id,
+			className: inputClasses,
+			disabled: normalizedProps.disabled || void 0,
+			"aria-invalid": normalizedProps.invalid || void 0,
+			"aria-readonly": readOnly || void 0,
+			title,
+			onChange: composeEventHandlers([onChange, handleChange]),
+			...readOnlyEventHandlers,
+			ref,
+			children
+		}),
+		/* @__PURE__ */ jsx(ChevronDown, { className: `${prefix}--select__arrow` }),
+		normalizedProps.invalid && /* @__PURE__ */ jsx(WarningFilled, { className: `${prefix}--select__invalid-icon` }),
+		!normalizedProps.invalid && normalizedProps.warn && /* @__PURE__ */ jsx(WarningAltFilled, { className: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning` })
+	] });
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(`${prefix}--form-item`, className),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: selectClasses,
+			children: [
+				!noLabel && /* @__PURE__ */ jsx(Text, {
+					as: "label",
+					htmlFor: id,
+					className: labelClasses,
+					children: labelText
+				}),
+				inline && /* @__PURE__ */ jsxs("div", {
+					className: `${prefix}--select-input--inline__wrapper`,
+					children: [/* @__PURE__ */ jsx("div", {
+						className: `${prefix}--select-input__wrapper`,
+						"data-invalid": normalizedProps.invalid || null,
+						children: input
+					}), error]
+				}),
+				!inline && /* @__PURE__ */ jsxs("div", {
+					className: `${prefix}--select-input__wrapper`,
+					"data-invalid": normalizedProps.invalid || null,
+					onFocus: handleFocus,
+					onBlur: handleFocus,
+					children: [
+						input,
+						slug ? normalizedDecorator : decorator ? /* @__PURE__ */ jsx("div", {
+							className: `${prefix}--select__inner-wrapper--decorator`,
+							children: normalizedDecorator
+						}) : "",
+						isFluid && /* @__PURE__ */ jsx("hr", { className: `${prefix}--select__divider` }),
+						isFluid && error ? error : null
+					]
+				}),
+				!inline && !isFluid && error ? error : helper
+			]
+		})
+	});
 });
-Select.displayName = 'Select';
+Select.displayName = "Select";
 Select.propTypes = {
-  /**
-   * Provide the contents of your Select
-   */
-  children: PropTypes.node,
-  /**
-   * Specify an optional className to be applied to the node containing the label and the select box
-   */
-  className: PropTypes.string,
-  /**
-   * **Experimental**: Provide a decorator component to be rendered inside the `Select` component
-   */
-  decorator: PropTypes.node,
-  /**
-   * Optionally provide the default value of the `<select>`
-   */
-  defaultValue: PropTypes.any,
-  /**
-   * Specify whether the control is disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Provide text that is used alongside the control label for additional help
-   */
-  helperText: PropTypes.node,
-  /**
-   * Specify whether the label should be hidden, or not
-   */
-  hideLabel: PropTypes.bool,
-  /**
-   * Specify a custom `id` for the `<select>`
-   */
-  id: PropTypes.string.isRequired,
-  /**
-   * Specify whether you want the inline version of this control
-   */
-  inline: PropTypes.bool,
-  /**
-   * Specify if the currently value is invalid.
-   */
-  invalid: PropTypes.bool,
-  /**
-   * Message which is displayed if the value is invalid.
-   */
-  invalidText: PropTypes.node,
-  /**
-   * Provide label text to be read by screen readers when interacting with the
-   * control
-   */
-  labelText: PropTypes.node,
-  /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
-   * Don't use this to make tile background color same as container background color.
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `Select` is no longer needed and has ' + 'been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release.'),
-  /**
-   * Reserved for use with Pagination component. Will not render a label for the
-   * select since Pagination renders one for us.
-   */
-  noLabel: PropTypes.bool,
-  /**
-   * Provide an optional `onChange` hook that is called each time the value of
-   * the underlying `<input>` changes
-   */
-  onChange: PropTypes.func,
-  /**
-   * Whether the select should be read-only
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Specify the size of the Select Input.
-   */
-  size: PropTypes.oneOf(['sm', 'md', 'lg']),
-  slug: deprecate(PropTypes.node, 'The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead.'),
-  /**
-   * Specify whether the control is currently in warning state
-   */
-  warn: PropTypes.bool,
-  /**
-   * Provide the text that is displayed when the control is in warning state
-   */
-  warnText: PropTypes.node
+	children: PropTypes.node,
+	className: PropTypes.string,
+	decorator: PropTypes.node,
+	defaultValue: PropTypes.any,
+	disabled: PropTypes.bool,
+	helperText: PropTypes.node,
+	hideLabel: PropTypes.bool,
+	id: PropTypes.string.isRequired,
+	inline: PropTypes.bool,
+	invalid: PropTypes.bool,
+	invalidText: PropTypes.node,
+	labelText: PropTypes.node,
+	light: deprecate(PropTypes.bool, "The `light` prop for `Select` is no longer needed and has been deprecated in v11 in favor of the new `Layer` component. It will be moved in the next major release."),
+	noLabel: PropTypes.bool,
+	onChange: PropTypes.func,
+	readOnly: PropTypes.bool,
+	size: PropTypes.oneOf([
+		"sm",
+		"md",
+		"lg"
+	]),
+	slug: deprecate(PropTypes.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
+	warn: PropTypes.bool,
+	warnText: PropTypes.node
 };
 
-export { Select as default };
+//#endregion
+export { Select as default };

package/es/components/Select/index.js

@@ -1,13 +1,21 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 Select from './Select.js';
-export { SelectSkeleton } from './Select.Skeleton.js';
-
+import Select from "./Select.js";
+import SelectSkeleton from "./Select.Skeleton.js";
 
+//#region src/components/Select/index.ts
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
+var Select_default = Select;
 
-export { Select, Select as default };
+//#endregion
+export { Select_default as default };

package/es/components/SelectItem/SelectItem.js

@@ -1,59 +1,44 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * 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 { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const SelectItem = ({
-  className,
-  value = '',
-  disabled = false,
-  hidden = false,
-  text = '',
-  ...other
-}) => {
-  const prefix = usePrefix();
-  const selectItemClasses = cx({
-    [`${prefix}--select-option`]: true,
-    ...(className && {
-      [className]: className
-    })
-  });
-  return /*#__PURE__*/React.createElement("option", _extends({}, other, {
-    className: selectItemClasses,
-    value: value,
-    disabled: disabled,
-    hidden: hidden
-  }), text);
+//#region src/components/SelectItem/SelectItem.tsx
+/**
+* Copyright IBM Corp. 2016, 2026
+*
+* 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 SelectItem = ({ className, value = "", disabled = false, hidden = false, text = "", ...other }) => {
+	const selectItemClasses = classNames({
+		[`${usePrefix()}--select-option`]: true,
+		...className && { [className]: className }
+	});
+	return /* @__PURE__ */ jsx("option", {
+		...other,
+		className: selectItemClasses,
+		value,
+		disabled,
+		hidden,
+		children: text
+	});
 };
 SelectItem.propTypes = {
-  /**
-   * Specify an optional className to be applied to the node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the <SelectItem> should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify whether the <SelectItem> is hidden
-   */
-  hidden: PropTypes.bool,
-  /**
-   * Provide the contents of your <SelectItem>
-   */
-  text: PropTypes.string.isRequired,
-  /**
-   * Specify the value of the <SelectItem>
-   */
-  value: PropTypes.any.isRequired
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	hidden: PropTypes.bool,
+	text: PropTypes.string.isRequired,
+	value: PropTypes.any.isRequired
 };
 
-export { SelectItem as default };
+//#endregion
+export { SelectItem as default };