carbon-react 123.5.1 → 123.7.0

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -86,7 +86,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const createCustomEvent = useCallback(newValue => {
+  const createCustomEvent = useCallback((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -96,13 +96,14 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
-  const triggerChange = useCallback(newValue => {
+  const triggerChange = useCallback((newValue, selectionConfirmed) => {
     if (onChange) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
   }, [onChange, createCustomEvent]);
   function findElementWithMatchingText(textToMatch, list) {
@@ -110,7 +111,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       const {
         text
       } = child.props;
-      return text && text.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
+      return text?.toLowerCase().indexOf(textToMatch?.toLowerCase()) !== -1;
     });
   }
   const updateValues = useCallback((newFilterText, isDeleteEvent) => {
@@ -119,15 +120,15 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       const isFilterCleared = isDeleteEvent && newFilterText === "";
       if (!match || isFilterCleared) {
         setTextValue(newFilterText);
-        triggerChange("");
+        triggerChange("", false);
         return "";
       }
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      triggerChange(match.props.value);
-      if (match.props.text.toLowerCase().startsWith(newFilterText.toLowerCase())) {
+      triggerChange(match.props.value, false);
+      if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
@@ -143,7 +144,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text.toLowerCase().startsWith(filterText.toLowerCase())) {
+    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -156,7 +157,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   }, [updateValues]);
   const fillLastFilterCharacter = useCallback(key => {
     setFilterText(previousFilterText => {
-      if (previousFilterText.length === textValue.length - 1 && key === textValue.slice(-1)) {
+      if (previousFilterText?.length === textValue?.length - 1 && key === textValue.slice(-1)) {
         return textValue;
       }
       return previousFilterText;
@@ -251,9 +252,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     };
   }, [handleGlobalClick]);
   useEffect(() => {
-    const textStartsWithFilter = textValue.toLowerCase().startsWith(filterText.toLowerCase());
+    const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && filterText.length && textValue.length > filterText.length && textStartsWithFilter) {
+    if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
       textboxRef.selectionStart = filterText.length;
     }
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
@@ -262,7 +263,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       id: selectedOptionId,
       text,
       value: newValue,
-      selectionType
+      selectionType,
+      selectionConfirmed
     } = optionData;
     if (selectionType === "tab") {
       setOpen(false);
@@ -273,8 +275,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       setSelectedValue(newValue);
       setHighlightedValue(newValue);
     }
-    setTextValue(text);
-    triggerChange(newValue);
+    setTextValue(text || /* istanbul ignore next */"");
+    triggerChange(newValue, selectionConfirmed);
     setActiveDescendantId(selectedOptionId);
     if (selectionType !== "navigationKey") {
       setOpen(false);

package/esm/components/select/index.d.ts

@@ -5,7 +5,7 @@ export type { OptionRowProps } from "./option-row";
 export { default as OptionGroupHeader } from "./option-group-header";
 export type { OptionGroupHeaderProps } from "./option-group-header";
 export { default as Select } from "./simple-select";
-export type { SimpleSelectProps } from "./simple-select";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select";
 export { default as FilterableSelect } from "./filterable-select";
 export type { FilterableSelectProps } from "./filterable-select";
 export { default as MultiSelect } from "./multi-select";

package/esm/components/select/multi-select/multi-select.component.js

@@ -100,7 +100,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return true;
     });
   }, [onOpen]);
-  const createCustomEvent = useCallback(newValue => {
+  const createCustomEvent = useCallback((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -110,7 +110,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
@@ -119,11 +120,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
    * components, both with and without onChange.
    * It accepts a function to update the value, which is assumed to be have no side effects and therefore
    * be safe to run more than once if needed. */
-  const updateValue = useCallback(updateFunction => {
+  const updateValue = useCallback((updateFunction, selectionConfirmed) => {
     const newValue = updateFunction(actualValue);
     // only call onChange if an option has been selected or deselected
     if (onChange && newValue.length !== actualValue?.length) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
 
     // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
@@ -158,7 +159,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       const newValue = previousValue.slice(); // spreading does not work but slice does - see https://github.com/microsoft/TypeScript/issues/53670
       newValue.splice(index, 1);
       return newValue;
-    });
+    }, true);
   }, [updateValue]);
   const handleTextboxKeydown = useCallback(event => {
     const {
@@ -210,6 +211,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     return actualValue.map((singleValue, index) => {
       const matchingOption = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && isExpectedOption(child, singleValue));
       let pillProps = {};
+      if (!matchingOption) {
+        return null;
+      }
+
+      /* istanbul ignore else */
       if ( /*#__PURE__*/React.isValidElement(matchingOption)) {
         pillProps = {
           title: matchingOption.props.text,
@@ -217,8 +223,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
           borderColor: matchingOption.props.borderColor
         };
       }
-      const title = pillProps.title || "";
-      const key = title + ( /*#__PURE__*/React.isValidElement(matchingOption) && matchingOption.props.value || index);
+      const title = pillProps.title || /* istanbul ignore next */"";
+      const key = title + ( /*#__PURE__*/React.isValidElement(matchingOption) && matchingOption.props.value || /* istanbul ignore next */index);
       return /*#__PURE__*/React.createElement(StyledSelectPillContainer, {
         key: key
       }, /*#__PURE__*/React.createElement(Pill, _extends({
@@ -331,7 +337,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     const {
       value: newValue,
       selectionType,
-      id: selectedOptionId
+      id: selectedOptionId,
+      selectionConfirmed
     } = optionData;
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
@@ -350,7 +357,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
         return previousValue;
       }
       return [...previousValue, newValue];
-    });
+    }, selectionConfirmed);
   }, [textboxRef, actualValue, updateValue]);
   const onSelectListClose = useCallback(() => {
     setOpenState(false);

package/esm/components/select/option/option.component.js

@@ -42,7 +42,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
     role: "option",
     hidden: hidden,
     style: style
-  }, rest), children || text);
+  }, rest, {
+    fill: undefined
+  }), children || text);
 });
 Option.propTypes = {
   "about": PropTypes.string,

package/esm/components/select/select-list/select-list.component.d.ts

@@ -17,6 +17,7 @@ export interface SelectListProps {
         value?: string | Record<string, unknown>;
         id?: string;
         selectionType: string;
+        selectionConfirmed: boolean;
     }) => void;
     /** A callback for when the list should be closed */
     onSelectListClose: () => void;

package/esm/components/select/select-list/select-list.component.js

@@ -93,7 +93,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const handleSelect = useCallback(optionData => {
     onSelect({
       ...optionData,
-      selectionType: "click"
+      selectionType: "click",
+      selectionConfirmed: true
     });
   }, [onSelect]);
   const childIdsRef = useRef(null);
@@ -177,13 +178,15 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined
+      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined,
+      selectionConfirmed: false
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
   const handleActionButtonTab = useCallback((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
-        selectionType: "tab"
+        selectionType: "tab",
+        selectionConfirmed: false
       });
     } else {
       event.preventDefault();
@@ -222,7 +225,8 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
         id: childIds ? childIds[currentOptionsListIndex] : /* istanbul ignore next */undefined,
         text,
         value,
-        selectionType: "enterKey"
+        selectionType: "enterKey",
+        selectionConfirmed: true
       });
     } else if (isNavigationKey(key)) {
       focusOnAnchor();

package/esm/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { CommonTextboxProps } from "../../textbox";
 import { ValidationProps } from "../../../__internal__/validations";
-export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick"> {
+import { CustomSelectChangeEvent } from "../simple-select/simple-select.component";
+export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange"> {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Prop to specify the aria-label attribute of the component input */
@@ -29,7 +30,7 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
     /** Specify a callback triggered on blur */
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on change */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on click */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */

package/esm/components/select/simple-select/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./simple-select.component";
-export type { SimpleSelectProps } from "./simple-select.component";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select.component";

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -1,6 +1,16 @@
 import React from "react";
 import { Side } from "@floating-ui/dom";
 import { FormInputPropTypes } from "../select-textbox";
+export interface OptionData {
+    text?: string;
+    value?: string | Record<string, unknown>;
+    id?: string;
+    selectionType: string;
+    selectionConfirmed?: boolean;
+}
+export interface CustomSelectChangeEvent extends React.ChangeEvent<HTMLInputElement> {
+    selectionConfirmed?: boolean;
+}
 export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;

package/esm/components/select/simple-select/simple-select.component.js

@@ -82,7 +82,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
   const childOptions = useMemo(() => React.Children.toArray(children), [children]);
-  const createCustomEvent = useCallback(newValue => {
+  const createCustomEvent = useCallback((newValue, selectionConfirmed = false) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -92,7 +92,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
@@ -245,13 +246,13 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       });
     }
   }
-  function updateValue(newValue, text) {
+  function updateValue(newValue, text, selectionConfirmed) {
     if (!isControlled.current) {
       setSelectedValue(newValue);
       setTextValue(text);
     }
     if (onChange) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
   }
   function onSelectOption(optionData) {
@@ -259,10 +260,11 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       text,
       value: newValue,
       selectionType,
-      id: selectedOptionId
+      id: selectedOptionId,
+      selectionConfirmed
     } = optionData;
     const isClickTriggered = selectionType === "click";
-    updateValue(newValue, text);
+    updateValue(newValue, text, selectionConfirmed);
     setActiveDescendantId(selectedOptionId);
     if (selectionType !== "navigationKey") {
       setOpenState(false);

package/esm/components/toast/toast.component.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
 declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice" | "neutral" | "notification";
 declare type AlignOptions = "left" | "center" | "right";
+declare type AlignYOptions = "top" | "center" | "bottom";
 export interface ToastProps {
-    /** Sets the alignment of the component. */
+    /** Sets the horizontal alignment of the component. */
     align?: AlignOptions;
+    /** Sets the vertical alignment of the component */
+    alignY?: AlignYOptions;
     /** The rendered children of the component. */
     children: React.ReactNode;
     /** Customizes the appearance in the DLS theme */

package/esm/components/toast/toast.component.js

@@ -13,6 +13,7 @@ import Logger from "../../__internal__/utils/logger";
 let isDeprecationWarningTriggered = false;
 const Toast = /*#__PURE__*/React.forwardRef(({
   align,
+  alignY,
   children,
   className,
   id,
@@ -121,6 +122,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       nodeRef: toastContentNodeRef
     }, /*#__PURE__*/React.createElement(ToastStyle, _extends({
       align: align,
+      alignY: alignY,
       isNotice: isNotice,
       isNotification: isNotification,
       className: className
@@ -145,6 +147,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   return /*#__PURE__*/React.createElement(StyledPortal, {
     id: targetPortalId,
     align: align,
+    alignY: alignY,
     isCenter: isCenter,
     isNotice: isNotice
   }, /*#__PURE__*/React.createElement(ToastWrapper, {
@@ -156,6 +159,7 @@ const Toast = /*#__PURE__*/React.forwardRef(({
 });
 Toast.propTypes = {
   "align": PropTypes.oneOf(["center", "left", "right"]),
+  "alignY": PropTypes.oneOf(["bottom", "center", "top"]),
   "children": PropTypes.node,
   "className": PropTypes.string,
   "data-component": PropTypes.string,

package/esm/components/toast/toast.style.d.ts

@@ -2,6 +2,7 @@
 import TypeIcon from "../message/type-icon/type-icon.style";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;
+    alignY?: "bottom" | "top" | "center" | undefined;
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
@@ -10,6 +11,7 @@ declare const ToastStyle: import("styled-components").StyledComponent<"div", any
     transparent?: boolean | undefined;
 } & import("styled-system").MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     align?: "left" | "right" | "center" | undefined;
+    alignY?: "bottom" | "top" | "center" | undefined;
     maxWidth?: string | undefined;
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;

package/esm/components/toast/toast.style.js

@@ -11,7 +11,8 @@ const StyledPortal = styled(Portal)`
   theme,
   isCenter,
   isNotice,
-  align
+  align,
+  alignY
 }) => css`
     position: fixed;
     top: 0;
@@ -24,8 +25,8 @@ const StyledPortal = styled(Portal)`
     `}
 
     ${align === "left" && css`
-      left: 12%;
-      transform: translateX(-50%);
+      left: 0;
+      transform: translateX(50%);
     `}
 
     ${align === "center" && css`
@@ -34,7 +35,6 @@ const StyledPortal = styled(Portal)`
     `}
 
     ${align === "right" && css`
-      display: flex;
       right: 0;
       transform: translateX(-50%);
     `}
@@ -43,6 +43,23 @@ const StyledPortal = styled(Portal)`
       bottom: 0;
       top: auto;
       width: 100%;
+    `}    
+
+    ${alignY === "top" && css`
+      top: 0;
+      bottom: auto;
+    `}
+
+    ${alignY === "center" && css`
+      top: 50%;
+      transform: translate(${align === "left" ? "50%" : "-50%"}, -50%);
+    `}
+
+    ${alignY === "bottom" && css`
+      bottom: 0;
+      top: auto;
+      display: flex;
+      flex-direction: column-reverse;
     `}
   `}
 `;
@@ -56,15 +73,19 @@ const ToastStyle = styled(MessageStyle)`
   maxWidth,
   isCenter,
   align,
-  isNotification
+  isNotification,
+  alignY,
+  isNotice
 }) => css`
     box-shadow: 0 10px 30px 0 rgba(0, 20, 29, 0.1),
       0 30px 60px 0 rgba(0, 20, 29, 0.1);
     line-height: 22px;
-    margin-top: 30px;
+    margin-top: ${alignY === "top" && isNotice || alignY === "center" ? "0" : "30px"};
+    margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
     margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
+    margin-left: ${isCenter || align === "left" ? "auto" : "30px"};
 
     ${isNotification && css`
       border: 1px solid var(--colorsSemanticInfo500);
@@ -91,7 +112,10 @@ const ToastStyle = styled(MessageStyle)`
 
   &${animationName}-exit${animationName}-exit-active {
     opacity: 0;
-    margin-top: -40px;
+
+    ${({
+  alignY
+}) => alignY === "bottom" ? "margin-bottom: -40px" : "margin-top: -40px"};
     transition: all 150ms ease-out;
   }
 
@@ -103,7 +127,8 @@ const ToastStyle = styled(MessageStyle)`
   }
 
   ${({
-  isNotice
+  isNotice,
+  alignY
 }) => isNotice && css`
       background-color: var(--colorsUtilityMajor400);
       border: none;
@@ -120,24 +145,24 @@ const ToastStyle = styled(MessageStyle)`
       }
 
       &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
-        bottom: -40px;
+        ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
         opacity: 0;
       }
 
       &${alternativeAnimationName}-exit {
-        bottom: 0;
+        ${alignY === "top" ? "top: 0" : "bottom: 0"};
         opacity: 1;
       }
 
       &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
         &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
-        bottom: 0;
+        ${alignY === "top" ? "top: 0" : "bottom: 0"};
         opacity: 1;
         transition: all 400ms ease;
       }
 
       &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
-        bottom: -40px;
+        ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
         opacity: 0;
         transition: all 200ms ease;
       }

package/lib/components/select/filterable-select/filterable-select.component.js

@@ -95,7 +95,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
-  const createCustomEvent = (0, _react.useCallback)(newValue => {
+  const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -105,13 +105,14 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
-  const triggerChange = (0, _react.useCallback)(newValue => {
+  const triggerChange = (0, _react.useCallback)((newValue, selectionConfirmed) => {
     if (onChange) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
   }, [onChange, createCustomEvent]);
   function findElementWithMatchingText(textToMatch, list) {
@@ -119,7 +120,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       const {
         text
       } = child.props;
-      return text && text.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
+      return text?.toLowerCase().indexOf(textToMatch?.toLowerCase()) !== -1;
     });
   }
   const updateValues = (0, _react.useCallback)((newFilterText, isDeleteEvent) => {
@@ -128,15 +129,15 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       const isFilterCleared = isDeleteEvent && newFilterText === "";
       if (!match || isFilterCleared) {
         setTextValue(newFilterText);
-        triggerChange("");
+        triggerChange("", false);
         return "";
       }
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
-      triggerChange(match.props.value);
-      if (match.props.text.toLowerCase().startsWith(newFilterText.toLowerCase())) {
+      triggerChange(match.props.value, false);
+      if (match.props.text?.toLowerCase().startsWith(newFilterText.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
@@ -152,7 +153,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, newValue));
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
-    } else if (isClosing || matchingOption.props.text.toLowerCase().startsWith(filterText.toLowerCase())) {
+    } else if (isClosing || matchingOption.props.text?.toLowerCase().startsWith(filterText?.toLowerCase())) {
       setTextValue(matchingOption.props.text);
     }
   }, [children, filterText]);
@@ -165,7 +166,7 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   }, [updateValues]);
   const fillLastFilterCharacter = (0, _react.useCallback)(key => {
     setFilterText(previousFilterText => {
-      if (previousFilterText.length === textValue.length - 1 && key === textValue.slice(-1)) {
+      if (previousFilterText?.length === textValue?.length - 1 && key === textValue.slice(-1)) {
         return textValue;
       }
       return previousFilterText;
@@ -260,9 +261,9 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
     };
   }, [handleGlobalClick]);
   (0, _react.useEffect)(() => {
-    const textStartsWithFilter = textValue.toLowerCase().startsWith(filterText.toLowerCase());
+    const textStartsWithFilter = textValue?.toLowerCase().startsWith(filterText?.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
-    if (isTextboxActive && textboxRef && filterText.length && textValue.length > filterText.length && textStartsWithFilter) {
+    if (isTextboxActive && textboxRef && filterText?.length && textValue?.length > filterText?.length && textStartsWithFilter) {
       textboxRef.selectionStart = filterText.length;
     }
   }, [textValue, filterText, textboxRef, disabled, readOnly]);
@@ -271,7 +272,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       id: selectedOptionId,
       text,
       value: newValue,
-      selectionType
+      selectionType,
+      selectionConfirmed
     } = optionData;
     if (selectionType === "tab") {
       setOpen(false);
@@ -282,8 +284,8 @@ const FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
       setSelectedValue(newValue);
       setHighlightedValue(newValue);
     }
-    setTextValue(text);
-    triggerChange(newValue);
+    setTextValue(text || /* istanbul ignore next */"");
+    triggerChange(newValue, selectionConfirmed);
     setActiveDescendantId(selectedOptionId);
     if (selectionType !== "navigationKey") {
       setOpen(false);

package/lib/components/select/index.d.ts

@@ -5,7 +5,7 @@ export type { OptionRowProps } from "./option-row";
 export { default as OptionGroupHeader } from "./option-group-header";
 export type { OptionGroupHeaderProps } from "./option-group-header";
 export { default as Select } from "./simple-select";
-export type { SimpleSelectProps } from "./simple-select";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select";
 export { default as FilterableSelect } from "./filterable-select";
 export type { FilterableSelectProps } from "./filterable-select";
 export { default as MultiSelect } from "./multi-select";

package/lib/components/select/multi-select/multi-select.component.js

@@ -109,7 +109,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       return true;
     });
   }, [onOpen]);
-  const createCustomEvent = (0, _react.useCallback)(newValue => {
+  const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -119,7 +119,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
@@ -128,11 +129,11 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
    * components, both with and without onChange.
    * It accepts a function to update the value, which is assumed to be have no side effects and therefore
    * be safe to run more than once if needed. */
-  const updateValue = (0, _react.useCallback)(updateFunction => {
+  const updateValue = (0, _react.useCallback)((updateFunction, selectionConfirmed) => {
     const newValue = updateFunction(actualValue);
     // only call onChange if an option has been selected or deselected
     if (onChange && newValue.length !== actualValue?.length) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
 
     // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
@@ -167,7 +168,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       const newValue = previousValue.slice(); // spreading does not work but slice does - see https://github.com/microsoft/TypeScript/issues/53670
       newValue.splice(index, 1);
       return newValue;
-    });
+    }, true);
   }, [updateValue]);
   const handleTextboxKeydown = (0, _react.useCallback)(event => {
     const {
@@ -219,6 +220,11 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     return actualValue.map((singleValue, index) => {
       const matchingOption = _react.default.Children.toArray(children).find(child => /*#__PURE__*/_react.default.isValidElement(child) && (0, _isExpectedOption.default)(child, singleValue));
       let pillProps = {};
+      if (!matchingOption) {
+        return null;
+      }
+
+      /* istanbul ignore else */
       if ( /*#__PURE__*/_react.default.isValidElement(matchingOption)) {
         pillProps = {
           title: matchingOption.props.text,
@@ -226,8 +232,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
           borderColor: matchingOption.props.borderColor
         };
       }
-      const title = pillProps.title || "";
-      const key = title + ( /*#__PURE__*/_react.default.isValidElement(matchingOption) && matchingOption.props.value || index);
+      const title = pillProps.title || /* istanbul ignore next */"";
+      const key = title + ( /*#__PURE__*/_react.default.isValidElement(matchingOption) && matchingOption.props.value || /* istanbul ignore next */index);
       return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectPillContainer, {
         key: key
       }, /*#__PURE__*/_react.default.createElement(_pill.default, _extends({
@@ -340,7 +346,8 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     const {
       value: newValue,
       selectionType,
-      id: selectedOptionId
+      id: selectedOptionId,
+      selectionConfirmed
     } = optionData;
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
@@ -359,7 +366,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
         return previousValue;
       }
       return [...previousValue, newValue];
-    });
+    }, selectionConfirmed);
   }, [textboxRef, actualValue, updateValue]);
   const onSelectListClose = (0, _react.useCallback)(() => {
     setOpenState(false);

package/lib/components/select/option/option.component.js

@@ -51,7 +51,9 @@ const Option = /*#__PURE__*/_react.default.forwardRef(({
     role: "option",
     hidden: hidden,
     style: style
-  }, rest), children || text);
+  }, rest, {
+    fill: undefined
+  }), children || text);
 });
 Option.propTypes = {
   "about": _propTypes.default.string,

package/lib/components/select/select-list/select-list.component.d.ts

@@ -17,6 +17,7 @@ export interface SelectListProps {
         value?: string | Record<string, unknown>;
         id?: string;
         selectionType: string;
+        selectionConfirmed: boolean;
     }) => void;
     /** A callback for when the list should be closed */
     onSelectListClose: () => void;

package/lib/components/select/select-list/select-list.component.js

@@ -102,7 +102,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
   const handleSelect = (0, _react.useCallback)(optionData => {
     onSelect({
       ...optionData,
-      selectionType: "click"
+      selectionType: "click",
+      selectionConfirmed: true
     });
   }, [onSelect]);
   const childIdsRef = (0, _react.useRef)(null);
@@ -186,13 +187,15 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
       text,
       value,
       selectionType: "navigationKey",
-      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined
+      id: childIds ? childIds[nextIndex] : /* istanbul ignore next */undefined,
+      selectionConfirmed: false
     });
   }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect, childIds]);
   const handleActionButtonTab = (0, _react.useCallback)((event, isActionButtonFocused) => {
     if (isActionButtonFocused) {
       onSelect({
-        selectionType: "tab"
+        selectionType: "tab",
+        selectionConfirmed: false
       });
     } else {
       event.preventDefault();
@@ -231,7 +234,8 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
         id: childIds ? childIds[currentOptionsListIndex] : /* istanbul ignore next */undefined,
         text,
         value,
-        selectionType: "enterKey"
+        selectionType: "enterKey",
+        selectionConfirmed: true
       });
     } else if ((0, _isNavigationKey.default)(key)) {
       focusOnAnchor();

package/lib/components/select/select-textbox/select-textbox.component.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import { CommonTextboxProps } from "../../textbox";
 import { ValidationProps } from "../../../__internal__/validations";
-export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick"> {
+import { CustomSelectChangeEvent } from "../simple-select/simple-select.component";
+export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange"> {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Prop to specify the aria-label attribute of the component input */
@@ -29,7 +30,7 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
     /** Specify a callback triggered on blur */
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on change */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on click */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */

package/lib/components/select/simple-select/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./simple-select.component";
-export type { SimpleSelectProps } from "./simple-select.component";
+export type { SimpleSelectProps, CustomSelectChangeEvent, } from "./simple-select.component";

package/lib/components/select/simple-select/simple-select.component.d.ts

@@ -1,6 +1,16 @@
 import React from "react";
 import { Side } from "@floating-ui/dom";
 import { FormInputPropTypes } from "../select-textbox";
+export interface OptionData {
+    text?: string;
+    value?: string | Record<string, unknown>;
+    id?: string;
+    selectionType: string;
+    selectionConfirmed?: boolean;
+}
+export interface CustomSelectChangeEvent extends React.ChangeEvent<HTMLInputElement> {
+    selectionConfirmed?: boolean;
+}
 export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;

package/lib/components/select/simple-select/simple-select.component.js

@@ -91,7 +91,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
   const childOptions = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
-  const createCustomEvent = (0, _react.useCallback)(newValue => {
+  const createCustomEvent = (0, _react.useCallback)((newValue, selectionConfirmed = false) => {
     const customEvent = {
       target: {
         ...(name && {
@@ -101,7 +101,8 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
           id
         }),
         value: newValue
-      }
+      },
+      selectionConfirmed
     };
     return customEvent;
   }, [name, id]);
@@ -254,13 +255,13 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       });
     }
   }
-  function updateValue(newValue, text) {
+  function updateValue(newValue, text, selectionConfirmed) {
     if (!isControlled.current) {
       setSelectedValue(newValue);
       setTextValue(text);
     }
     if (onChange) {
-      onChange(createCustomEvent(newValue));
+      onChange(createCustomEvent(newValue, selectionConfirmed));
     }
   }
   function onSelectOption(optionData) {
@@ -268,10 +269,11 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
       text,
       value: newValue,
       selectionType,
-      id: selectedOptionId
+      id: selectedOptionId,
+      selectionConfirmed
     } = optionData;
     const isClickTriggered = selectionType === "click";
-    updateValue(newValue, text);
+    updateValue(newValue, text, selectionConfirmed);
     setActiveDescendantId(selectedOptionId);
     if (selectionType !== "navigationKey") {
       setOpenState(false);

package/lib/components/toast/toast.component.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
 declare type ToastVariants = "error" | "info" | "success" | "warning" | "notice" | "neutral" | "notification";
 declare type AlignOptions = "left" | "center" | "right";
+declare type AlignYOptions = "top" | "center" | "bottom";
 export interface ToastProps {
-    /** Sets the alignment of the component. */
+    /** Sets the horizontal alignment of the component. */
     align?: AlignOptions;
+    /** Sets the vertical alignment of the component */
+    alignY?: AlignYOptions;
     /** The rendered children of the component. */
     children: React.ReactNode;
     /** Customizes the appearance in the DLS theme */

package/lib/components/toast/toast.component.js

@@ -22,6 +22,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 let isDeprecationWarningTriggered = false;
 const Toast = /*#__PURE__*/_react.default.forwardRef(({
   align,
+  alignY,
   children,
   className,
   id,
@@ -130,6 +131,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
       nodeRef: toastContentNodeRef
     }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
       align: align,
+      alignY: alignY,
       isNotice: isNotice,
       isNotification: isNotification,
       className: className
@@ -154,6 +156,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
   return /*#__PURE__*/_react.default.createElement(_toast.StyledPortal, {
     id: targetPortalId,
     align: align,
+    alignY: alignY,
     isCenter: isCenter,
     isNotice: isNotice
   }, /*#__PURE__*/_react.default.createElement(_toast.ToastWrapper, {
@@ -166,6 +169,7 @@ const Toast = /*#__PURE__*/_react.default.forwardRef(({
 exports.Toast = Toast;
 Toast.propTypes = {
   "align": _propTypes.default.oneOf(["center", "left", "right"]),
+  "alignY": _propTypes.default.oneOf(["bottom", "center", "top"]),
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "data-component": _propTypes.default.string,

package/lib/components/toast/toast.style.d.ts

@@ -2,6 +2,7 @@
 import TypeIcon from "../message/type-icon/type-icon.style";
 declare const StyledPortal: import("styled-components").StyledComponent<({ children, className, id, onReposition }: import("../portal/portal").PortalProps) => import("react").JSX.Element, any, {
     align?: "left" | "right" | "center" | undefined;
+    alignY?: "bottom" | "top" | "center" | undefined;
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;
 }, never>;
@@ -10,6 +11,7 @@ declare const ToastStyle: import("styled-components").StyledComponent<"div", any
     transparent?: boolean | undefined;
 } & import("styled-system").MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
     align?: "left" | "right" | "center" | undefined;
+    alignY?: "bottom" | "top" | "center" | undefined;
     maxWidth?: string | undefined;
     isCenter?: boolean | undefined;
     isNotice?: boolean | undefined;

package/lib/components/toast/toast.style.js

@@ -26,7 +26,8 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
   theme,
   isCenter,
   isNotice,
-  align
+  align,
+  alignY
 }) => (0, _styledComponents.css)`
     position: fixed;
     top: 0;
@@ -39,8 +40,8 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
     `}
 
     ${align === "left" && (0, _styledComponents.css)`
-      left: 12%;
-      transform: translateX(-50%);
+      left: 0;
+      transform: translateX(50%);
     `}
 
     ${align === "center" && (0, _styledComponents.css)`
@@ -49,7 +50,6 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
     `}
 
     ${align === "right" && (0, _styledComponents.css)`
-      display: flex;
       right: 0;
       transform: translateX(-50%);
     `}
@@ -58,6 +58,23 @@ const StyledPortal = (0, _styledComponents.default)(_portal.default)`
       bottom: 0;
       top: auto;
       width: 100%;
+    `}    
+
+    ${alignY === "top" && (0, _styledComponents.css)`
+      top: 0;
+      bottom: auto;
+    `}
+
+    ${alignY === "center" && (0, _styledComponents.css)`
+      top: 50%;
+      transform: translate(${align === "left" ? "50%" : "-50%"}, -50%);
+    `}
+
+    ${alignY === "bottom" && (0, _styledComponents.css)`
+      bottom: 0;
+      top: auto;
+      display: flex;
+      flex-direction: column-reverse;
     `}
   `}
 `;
@@ -72,15 +89,19 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
   maxWidth,
   isCenter,
   align,
-  isNotification
+  isNotification,
+  alignY,
+  isNotice
 }) => (0, _styledComponents.css)`
     box-shadow: 0 10px 30px 0 rgba(0, 20, 29, 0.1),
       0 30px 60px 0 rgba(0, 20, 29, 0.1);
     line-height: 22px;
-    margin-top: 30px;
+    margin-top: ${alignY === "top" && isNotice || alignY === "center" ? "0" : "30px"};
+    margin-bottom: ${alignY === "bottom" && !isNotice ? "30px" : "0"};
     max-width: ${!maxWidth ? "300px" : maxWidth};
     position: relative;
     margin-right: ${isCenter || align === "right" ? "auto" : "30px"};
+    margin-left: ${isCenter || align === "left" ? "auto" : "30px"};
 
     ${isNotification && (0, _styledComponents.css)`
       border: 1px solid var(--colorsSemanticInfo500);
@@ -107,7 +128,10 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
 
   &${animationName}-exit${animationName}-exit-active {
     opacity: 0;
-    margin-top: -40px;
+
+    ${({
+  alignY
+}) => alignY === "bottom" ? "margin-bottom: -40px" : "margin-top: -40px"};
     transition: all 150ms ease-out;
   }
 
@@ -119,7 +143,8 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
   }
 
   ${({
-  isNotice
+  isNotice,
+  alignY
 }) => isNotice && (0, _styledComponents.css)`
       background-color: var(--colorsUtilityMajor400);
       border: none;
@@ -136,24 +161,24 @@ const ToastStyle = (0, _styledComponents.default)(_message.default)`
       }
 
       &${alternativeAnimationName}-appear, &${alternativeAnimationName}-enter {
-        bottom: -40px;
+        ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
         opacity: 0;
       }
 
       &${alternativeAnimationName}-exit {
-        bottom: 0;
+        ${alignY === "top" ? "top: 0" : "bottom: 0"};
         opacity: 1;
       }
 
       &${alternativeAnimationName}-appear${alternativeAnimationName}-appear-active,
         &${alternativeAnimationName}-enter${alternativeAnimationName}-enter-active {
-        bottom: 0;
+        ${alignY === "top" ? "top: 0" : "bottom: 0"};
         opacity: 1;
         transition: all 400ms ease;
       }
 
       &${alternativeAnimationName}-exit${alternativeAnimationName}-exit-active {
-        bottom: -40px;
+        ${alignY === "top" ? "top: -40px" : "bottom: -40px"};
         opacity: 0;
         transition: all 200ms ease;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "123.5.1",
+  "version": "123.7.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",