carbon-react 109.3.2 → 109.3.5

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

@@ -64,6 +64,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const [highlightedValue, setHighlightedValue] = useState("");
   const [filterText, setFilterText] = useState("");
   const [placeholderOverride, setPlaceholderOverride] = useState();
+  const actualValue = isControlled.current ? value : selectedValue;
   const setOpen = useCallback(() => {
     setOpenState(isAlreadyOpen => {
       if (!isAlreadyOpen && onOpen) {
@@ -86,6 +87,23 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     };
     return customEvent;
   }, [name, id]);
+  /* generic value update function which can be used for both controlled and uncontrolled
+   * 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 newValue = updateFunction(actualValue); // only call onChange if an option has been selected or deselected
+
+    if (onChange && newValue.length !== actualValue.length) {
+      onChange(createCustomEvent(newValue));
+    } // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
+
+
+    if (!isControlled.current) {
+      setSelectedValue(updateFunction);
+    }
+  }, [createCustomEvent, onChange, actualValue]);
   const handleTextboxChange = useCallback(event => {
     const newValue = event.target.value;
     const match = findElementWithMatchingText(newValue, children);
@@ -99,24 +117,17 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     setOpen();
   }, [children, setOpen]);
   const removeSelectedValue = useCallback(index => {
-    setSelectedValue(previousValue => {
-      isClickTriggeredBySelect.current = true;
-
+    isClickTriggeredBySelect.current = true;
+    updateValue(previousValue => {
       if (!previousValue.length) {
         return previousValue;
       }
 
       const newValue = [...previousValue];
       newValue.splice(index, 1);
-
-      if (onChange) {
-        onChange(createCustomEvent(newValue));
-        return newValue;
-      }
-
       return newValue;
     });
-  }, [createCustomEvent, onChange]);
+  }, [updateValue]);
   const handleTextboxKeydown = useCallback(event => {
     const {
       key
@@ -142,12 +153,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = useMemo(() => {
-    return selectedValue && selectedValue.length ? React.Children.map(children, child => {
-      return selectedValue.includes(child.props.value) ? child.props.text : false;
+    return actualValue && actualValue.length ? React.Children.map(children, child => {
+      return actualValue.includes(child.props.value) ? child.props.text : false;
     }).filter(child => child).reduce((acc, item) => {
       return acc ? `${acc}, ${item}` : item;
     }, "") : null;
-  }, [children, selectedValue]);
+  }, [children, actualValue]);
   const handleGlobalClick = useCallback(event => {
     isMouseDownReported.current = false;
 
@@ -170,11 +181,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const mapValuesToPills = useMemo(() => {
     const canDelete = !disabled && !readOnly;
 
-    if (!selectedValue.length) {
+    if (!actualValue.length) {
       return "";
     }
 
-    return selectedValue.map((singleValue, index) => {
+    return actualValue.map((singleValue, index) => {
       const matchingOption = React.Children.toArray(children).find(child => isExpectedOption(child, singleValue));
       let pillProps = {};
 
@@ -203,22 +214,18 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
     !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
-
-    if (isControlled.current) {
-      setSelectedValue(value);
-    }
   }, [value, onChange]); // removes placeholder when a value is present
 
   useEffect(() => {
     const hasValue = value === null || value === void 0 ? void 0 : value.length;
-    const hasSelectedValue = selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length;
+    const hasSelectedValue = actualValue === null || actualValue === void 0 ? void 0 : actualValue.length;
 
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");
     } else {
       setPlaceholderOverride(placeholder);
     }
-  }, [value, selectedValue, placeholder]);
+  }, [value, actualValue, placeholder]);
   useEffect(() => {
     const clickEvent = "click";
     window.addEventListener(clickEvent, handleGlobalClick);
@@ -335,27 +342,22 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     }
 
     setTextValue("");
-    const isAlreadySelected = selectedValue.findIndex(val => isExpectedValue(val, newValue)) !== -1;
+    const isAlreadySelected = actualValue.findIndex(val => isExpectedValue(val, newValue)) !== -1;
 
     if (!isAlreadySelected && isControlled.current && onChange) {
-      onChange(createCustomEvent([...selectedValue, newValue]));
+      onChange(createCustomEvent([...actualValue, newValue]));
     }
 
-    setSelectedValue(previousValue => {
-      textboxRef.focus();
-      isMouseDownReported.current = false;
-
+    textboxRef.focus();
+    isMouseDownReported.current = false;
+    updateValue(previousValue => {
       if (isAlreadySelected) {
         return previousValue;
       }
 
-      if (onChange) {
-        onChange(createCustomEvent([...previousValue, newValue]));
-      }
-
       return [...previousValue, newValue];
     });
-  }, [createCustomEvent, onChange, textboxRef, selectedValue]);
+  }, [createCustomEvent, onChange, textboxRef, actualValue, updateValue]);
 
   function onSelectListClose() {
     setOpenState(false);
@@ -389,7 +391,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       leftChildren: mapValuesToPills,
       inputRef: assignInput,
       formattedValue: textValue,
-      selectedValue,
+      selectedValue: actualValue,
       onClick: handleTextboxClick,
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
@@ -423,7 +425,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
-    multiselectValues: selectedValue
+    multiselectValues: actualValue
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
     disabled: disabled,

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

@@ -51,6 +51,7 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
   const [listHeight, setListHeight] = useState(0);
   const [listWidth, setListWidth] = useState(null);
+  const [scrollbarWidth, setScrollbarWidth] = useState(0);
   const placement = useRef("bottom");
   const lastFilter = useRef("");
   const listRef = useRef();
@@ -66,6 +67,11 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       allowScroll();
     };
   }, [allowScroll, blockScroll]);
+  useLayoutEffect(() => {
+    if (multiColumn) {
+      setScrollbarWidth(tableRef.current.offsetWidth - tableRef.current.clientWidth);
+    }
+  }, [multiColumn]);
   const setPlacementCallback = useCallback(popper => {
     placement.current = popper.placement;
   }, [placement]);
@@ -287,7 +293,9 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
   let selectListContent = childrenWithListProps;
 
   if (multiColumn) {
-    selectListContent = /*#__PURE__*/React.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, null, tableHeader), /*#__PURE__*/React.createElement(StyledSelectListTableBody, {
+    selectListContent = /*#__PURE__*/React.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, {
+      scrollbarWidth: scrollbarWidth
+    }, tableHeader), /*#__PURE__*/React.createElement(StyledSelectListTableBody, {
       ref: tableRef
     }, childrenWithListProps));
   }

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

@@ -74,11 +74,18 @@ const StyledSelectListTable = styled.table`
 `; // TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
 
 const StyledSelectListTableHeader = styled.thead`
+  border-bottom: 1px solid var(--colorsUtilityMajor050);
+
+  tr {
+    width: ${({
+  scrollbarWidth
+}) => `calc(100% - ${scrollbarWidth}px)`};
+  }
+
   th {
     position: sticky;
     top: 0;
     padding: var(--spacing200);
-    border-bottom: 1px solid var(--colorsUtilityMajor050);
     background-color: white;
     text-align: left;
     font-weight: 900;

package/esm/components/split-button/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./split-button";
-export type { SplitButtonProps } from "./split-button";
+export { default } from "./split-button.component";
+export type { SplitButtonProps } from "./split-button.component";

package/esm/components/split-button/split-button-children.style.d.ts

@@ -0,0 +1,8 @@
+import { ThemeObject } from "../../style/themes/base";
+declare type StyledSplitButtonChildrenContainerProps = {
+    theme: ThemeObject;
+    align: "left" | "right";
+    minWidth: number;
+};
+declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledSplitButtonChildrenContainerProps, never>;
+export default StyledSplitButtonChildrenContainer;

package/esm/components/split-button/split-button-children.style.js

@@ -4,12 +4,11 @@ import StyledButton from "../button/button.style";
 const StyledSplitButtonChildrenContainer = styled.div`
   ${({
   theme,
-  align
+  align,
+  minWidth
 }) => css`
     background-color: var(--colorsActionMajorYang100);
-    min-width: ${({
-  minWidth
-}) => minWidth}px;
+    min-width: ${minWidth}px;
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -0,0 +1,10 @@
+declare type StyledSplitButtonToggleProps = {
+    buttonType: "primary" | "secondary";
+    disabled: boolean;
+    displayed: boolean;
+    size: "small" | "medium" | "large";
+};
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../button").ButtonProps & {
+    iconOnly?: boolean | undefined;
+} & StyledSplitButtonToggleProps, never>;
+export default StyledSplitButtonToggle;

package/esm/components/split-button/split-button.component.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, MarginProps {
+    /** Set align of the rendered content */
+    align?: "left" | "right";
+    /** Button type: "primary" | "secondary" */
+    buttonType?: "primary" | "secondary";
+    /** The additional button to display. */
+    children: React.ReactNode;
+    /** A custom value for the data-element attribute */
+    "data-element"?: string;
+    /** A custom value for the data-role attribute */
+    "data-role"?: string;
+    /** Gives the button a disabled state. */
+    disabled?: boolean;
+    /** Defines an Icon position within the button: "before" | "after" */
+    iconPosition?: "before" | "after";
+    /** Defines an Icon type within the button */
+    iconType?: IconType;
+    /** The size of the buttons in the SplitButton. */
+    size?: "small" | "medium" | "large";
+    /** Second text child, renders under main text, only when size is "large" */
+    subtext?: string;
+    /** The text to be displayed in the SplitButton. */
+    text: string;
+}
+export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: SplitButtonProps) => JSX.Element;
+export default SplitButton;