carbon-react 104.34.0 → 104.36.0

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

@@ -0,0 +1,421 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import propTypes from "@styled-system/prop-types";
+import invariant from "invariant";
+import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import StyledSelect from "../select.style";
+import SelectTextbox, { formInputPropTypes } from "../select-textbox/select-textbox.component";
+import SelectList from "../select-list/select-list.component";
+import guid from "../../../__internal__/utils/helpers/guid";
+import getNextChildByText from "../utils/get-next-child-by-text";
+import isExpectedOption from "../utils/is-expected-option";
+const SimpleSelect = /*#__PURE__*/React.forwardRef(({
+  value,
+  defaultValue,
+  id,
+  name,
+  disabled,
+  readOnly,
+  children,
+  transparent,
+  openOnFocus = false,
+  onOpen,
+  onChange,
+  onClick,
+  onFocus,
+  onKeyDown,
+  onBlur,
+  disablePortal,
+  isLoading,
+  onListScrollBottom,
+  tableHeader,
+  multiColumn,
+  tooltipPosition,
+  "data-component": dataComponent,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  listPlacement = "bottom-start",
+  flipEnabled = true,
+  ...props
+}, inputRef) => {
+  const selectListId = useRef(guid());
+  const labelId = useRef(guid());
+  const containerRef = useRef();
+  const listboxRef = useRef();
+  const filterTimer = useRef();
+  const isMouseDownReported = useRef();
+  const isControlled = useRef(value !== undefined);
+  const isTimerCounting = useRef();
+  const isClickTriggeredBySelect = useRef();
+  const filterText = useRef();
+  const [textboxRef, setTextboxRef] = useState();
+  const [isOpen, setOpenState] = useState(false);
+  const [activeDescendantId, setActiveDescendantId] = useState();
+  const [textValue, setTextValue] = useState("");
+  const [selectedValue, setSelectedValue] = useState(value || defaultValue || "");
+  const childOptions = useMemo(() => React.Children.toArray(children), [children]);
+  const createCustomEvent = useCallback(newValue => {
+    const customEvent = {
+      target: { ...(name && {
+          name
+        }),
+        ...(id && {
+          id
+        }),
+        value: newValue
+      }
+    };
+    return customEvent;
+  }, [name, id]);
+  const selectValueStartingWithText = useCallback(newFilterText => {
+    setSelectedValue(previousValue => {
+      const previousIndex = childOptions.findIndex(child => isExpectedOption(child, previousValue));
+      const match = getNextChildByText(newFilterText, childOptions, previousIndex);
+
+      if (!match) {
+        return previousValue;
+      }
+
+      if (onChange) {
+        onChange(createCustomEvent(match.props.value));
+      }
+
+      if (isControlled.current) {
+        return previousValue;
+      }
+
+      setTextValue(match.props.text);
+      return match.props.value;
+    });
+  }, [childOptions, createCustomEvent, onChange]);
+  const triggerFilterChange = useCallback(newCharacter => {
+    if (isTimerCounting.current) {
+      const newVal = filterText.current + newCharacter;
+      filterText.current = newVal;
+      selectValueStartingWithText(newVal);
+      clearTimeout(filterTimer.current);
+    } else {
+      filterText.current = newCharacter;
+      selectValueStartingWithText(newCharacter);
+    }
+
+    isTimerCounting.current = true;
+    clearTimeout(filterTimer.current);
+    filterTimer.current = setTimeout(() => {
+      isTimerCounting.current = false;
+      filterText.current = "";
+    }, 500);
+  }, [selectValueStartingWithText]);
+  const handleTextboxKeydown = useCallback(event => {
+    const {
+      key
+    } = event;
+
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+
+    if (readOnly) {
+      return;
+    }
+
+    if (key === "Enter" || key === " " || isNavigationKey(key)) {
+      event.preventDefault();
+      setOpenState(isAlreadyOpen => {
+        if (!isAlreadyOpen && onOpen) {
+          onOpen();
+        }
+
+        return true;
+      });
+    } else if (key.length === 1) {
+      triggerFilterChange(key);
+    }
+  }, [triggerFilterChange, onKeyDown, onOpen, readOnly]);
+  const handleGlobalClick = useCallback(event => {
+    const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
+    const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
+    isMouseDownReported.current = false;
+
+    if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
+      setOpenState(false);
+    }
+
+    isClickTriggeredBySelect.current = false;
+  }, []);
+  useEffect(() => {
+    const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
+    const onChangeMissingMessage = "onChange prop required when using a controlled input element";
+    invariant(isControlled.current === (value !== undefined), modeSwitchedMessage);
+    invariant(!isControlled.current || isControlled.current && onChange, onChangeMissingMessage);
+
+    if (isControlled.current) {
+      setSelectedValue(value);
+    }
+  }, [value, onChange]);
+  useEffect(() => {
+    const matchingOption = childOptions.find(child => isExpectedOption(child, selectedValue));
+    let newText = "";
+
+    if (matchingOption) {
+      newText = matchingOption.props.text;
+    }
+
+    setTextValue(newText);
+  }, [selectedValue, childOptions]);
+  useEffect(() => {
+    const clickEvent = "click";
+    window.addEventListener(clickEvent, handleGlobalClick);
+    return function cleanup() {
+      window.removeEventListener(clickEvent, handleGlobalClick);
+    };
+  }, [handleGlobalClick]);
+  useEffect(() => {
+    return function cleanup() {
+      clearTimeout(filterTimer.current);
+    };
+  }, []);
+
+  function handleDropdownIconClick(event) {
+    handleTextboxClick(event);
+  }
+
+  function handleListMouseDown() {
+    isMouseDownReported.current = true;
+  }
+
+  function handleTextboxBlur(event) {
+    if (isMouseDownReported.current) {
+      return;
+    }
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  }
+
+  function handleTextboxClick(event) {
+    isMouseDownReported.current = false;
+
+    if (onClick) {
+      onClick(event);
+    }
+
+    setOpenState(isAlreadyOpen => {
+      if (isAlreadyOpen) {
+        return false;
+      }
+
+      if (onOpen) {
+        onOpen();
+      }
+
+      return true;
+    });
+  }
+
+  function handleTextboxMouseDown() {
+    isMouseDownReported.current = true;
+  }
+
+  function handleTextboxFocus(event) {
+    if (isClickTriggeredBySelect.current) {
+      return;
+    }
+
+    if (onFocus) {
+      onFocus(event);
+    }
+
+    if (isMouseDownReported.current) {
+      isMouseDownReported.current = false;
+      return;
+    }
+
+    if (openOnFocus) {
+      setOpenState(isAlreadyOpen => {
+        if (isAlreadyOpen) {
+          return true;
+        }
+
+        if (onOpen) {
+          onOpen();
+        }
+
+        return true;
+      });
+    }
+  }
+
+  function onSelectOption(optionData) {
+    const {
+      text,
+      value: newValue,
+      selectionType,
+      id: selectedOptionId
+    } = optionData;
+    const isClickTriggered = selectionType === "click";
+    updateValue(newValue, text);
+    setActiveDescendantId(selectedOptionId);
+
+    if (selectionType !== "navigationKey") {
+      setOpenState(false);
+    }
+
+    if (isClickTriggered) {
+      isClickTriggeredBySelect.current = true;
+      textboxRef.focus();
+    }
+  }
+
+  function updateValue(newValue, text) {
+    if (!isControlled.current) {
+      setSelectedValue(newValue);
+      setTextValue(text);
+    }
+
+    if (onChange) {
+      onChange(createCustomEvent(newValue));
+    }
+  }
+
+  function onSelectListClose() {
+    setOpenState(false);
+  }
+
+  function isNavigationKey(key) {
+    return key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End";
+  }
+
+  function assignInput(input) {
+    setTextboxRef(input.current);
+
+    if (inputRef) {
+      inputRef.current = input.current;
+    }
+  }
+
+  function getTextboxProps() {
+    return {
+      id,
+      name,
+      disabled,
+      readOnly,
+      inputRef: assignInput,
+      selectedValue,
+      formattedValue: textValue,
+      onClick: handleTextboxClick,
+      iconOnClick: handleDropdownIconClick,
+      onMouseDown: handleTextboxMouseDown,
+      onFocus: handleTextboxFocus,
+      onKeyDown: handleTextboxKeydown,
+      onBlur: handleTextboxBlur,
+      tooltipPosition,
+      transparent,
+      ...filterOutStyledSystemSpacingProps(props)
+    };
+  }
+
+  const selectList = /*#__PURE__*/React.createElement(SelectList, {
+    ref: listboxRef,
+    id: selectListId.current,
+    labelId: labelId.current,
+    anchorElement: textboxRef && textboxRef.parentElement,
+    onSelect: onSelectOption,
+    onMouseDown: handleListMouseDown,
+    onSelectListClose: onSelectListClose,
+    highlightedValue: selectedValue,
+    disablePortal: disablePortal,
+    isLoading: isLoading,
+    onListScrollBottom: onListScrollBottom,
+    tableHeader: tableHeader,
+    multiColumn: multiColumn,
+    loaderDataRole: "simple-select-list-loader",
+    listPlacement: listPlacement,
+    flipEnabled: flipEnabled
+  }, children);
+  return /*#__PURE__*/React.createElement(StyledSelect, _extends({
+    transparent: transparent,
+    disabled: disabled,
+    readOnly: readOnly,
+    "aria-expanded": isOpen,
+    "aria-haspopup": "listbox",
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    isOpen: isOpen
+  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
+    "aria-controls": isOpen ? selectListId.current : undefined,
+    activeDescendantId: activeDescendantId,
+    labelId: labelId.current,
+    isOpen: isOpen,
+    textboxRef: textboxRef
+  }, getTextboxProps()))), isOpen && selectList);
+});
+SimpleSelect.propTypes = {
+  /** Styled system spacing props */
+  ...propTypes.space,
+  ...formInputPropTypes,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component": PropTypes.string,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element": PropTypes.string,
+
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role": PropTypes.string,
+
+  /** The selected value(s), when the component is operating in controlled mode */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+  /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
+  disablePortal: PropTypes.bool,
+
+  /** The default selected value(s), when the component is operating in uncontrolled mode */
+  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+  /** Child components (such as Option or OptionRow) for the SelectList */
+  children: PropTypes.node.isRequired,
+
+  /** If true the Component opens on focus */
+  openOnFocus: PropTypes.bool,
+
+  /** If true the component input has no border and a transparent background */
+  transparent: PropTypes.bool,
+
+  /** SelectList table header, should consist of multiple th elements.
+  Works only in multiColumn mode */
+  tableHeader: PropTypes.node,
+
+  /** When true component will work in multi column mode.
+  Children should consist of OptionRow components in this mode */
+  multiColumn: PropTypes.bool,
+
+  /** A custom callback for when the dropdown menu opens */
+  onOpen: PropTypes.func,
+
+  /** If true the loader animation is displayed below the last option */
+  isLoading: PropTypes.bool,
+
+  /** A callback that is triggered when a user scrolls to the bottom of the list */
+  onListScrollBottom: PropTypes.func,
+
+  /** Overrides the default tooltip position */
+  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+
+  /** Placement of the select list in relation to the input element */
+  listPlacement: PropTypes.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
+
+  /** Use the opposite list placement if the set placement does not fit */
+  flipEnabled: PropTypes.bool
+};
+SimpleSelect.defaultProps = {
+  disablePortal: false,
+  "data-component": "simple-select"
+};
+export default SimpleSelect;

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

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { FormInputPropTypes } from "../select-textbox/select-textbox";
+
+export interface SimpleSelectProps
+  extends Omit<FormInputPropTypes, "defaultValue"> {
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-component"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-element"?: string;
+  /** Identifier used for testing purposes, applied to the root element of the component. */
+  "data-role"?: string;
+  /** Child components (such as Option or OptionRow) for the SelectList */
+  children: React.ReactNode;
+  /** The default selected value(s), when the component is operating in uncontrolled mode */
+  defaultValue?: string | Record<string, unknown>;
+  /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
+  disablePortal?: boolean;
+  /** If true the loader animation is displayed in the option list */
+  isLoading?: boolean;
+  /** When true component will work in multi column mode.
+   * Children should consist of OptionRow components in this mode
+   */
+  multiColumn?: boolean;
+  /** A callback that is triggered when a user scrolls to the bottom of the list */
+  onListScrollBottom?: () => void;
+  /** A custom callback for when the dropdown menu opens */
+  onOpen?: () => void;
+  /** If true the Component opens on focus */
+  openOnFocus?: boolean;
+  /** SelectList table header, should consist of multiple th elements.
+   * Works only in multiColumn mode
+   */
+  tableHeader?: React.ReactNode;
+  /** If true the component input has no border and is transparent */
+  transparent?: boolean;
+  /** The selected value(s), when the component is operating in controlled mode */
+  value?: string | Record<string, unknown>;
+  /** Overrides the default tooltip position */
+  tooltipPosition?: "top" | "bottom" | "left" | "right";
+  /** Placement of the select list in relation to the input element */
+  listPlacement?:
+    | "auto"
+    | "auto-start"
+    | "auto-end"
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "left"
+    | "left-start"
+    | "left-end";
+  /** Use the opposite list placement if the set placement does not fit */
+  flipEnabled?: boolean;
+}
+
+declare function SimpleSelect(
+  props: SimpleSelectProps & React.RefAttributes<HTMLInputElement>
+): JSX.Element;
+
+export default SimpleSelect;

package/esm/components/select/utils/get-next-child-by-text.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
+export default function getNextChildByText(textToMatch: any, arrayOfChildren: any, previousIndex?: number): any;

package/esm/components/select/utils/get-next-child-by-text.js

@@ -0,0 +1,41 @@
+/**
+ * Recreates HTML Select element functionality of finding first match based on typed characters
+ * */
+export default function getNextChildByText(textToMatch, arrayOfChildren, previousIndex = -1) {
+  const lastCharacter = textToMatch.slice(-1);
+  const isTheSameCharacter = textToMatch.split("").every(character => character === lastCharacter);
+  let indexOfMatch = findElementStartingWithText(textToMatch, arrayOfChildren);
+  const listOfMatches = getListOfMatches(arrayOfChildren, lastCharacter);
+
+  if (isTheSameCharacter && listOfMatches.length > 1) {
+    indexOfMatch = getIndexOfNextElement(listOfMatches, previousIndex);
+  }
+
+  return arrayOfChildren[indexOfMatch];
+}
+
+function getListOfMatches(arrayOfChildren, lastCharacter) {
+  return arrayOfChildren.reduce((acc, child, index) => {
+    if (child.props.text && child.props.text.toLowerCase().startsWith(lastCharacter.toLowerCase())) {
+      acc.push(index);
+    }
+
+    return acc;
+  }, []);
+}
+
+function getIndexOfNextElement(listOfMatches, previousIndex) {
+  const isLastIndex = previousIndex === listOfMatches[listOfMatches.length - 1];
+
+  if (isLastIndex) {
+    return listOfMatches[0];
+  }
+
+  return listOfMatches[listOfMatches.indexOf(previousIndex) + 1];
+}
+
+function findElementStartingWithText(textToMatch, list) {
+  return list.findIndex(child => {
+    return child.props.text && child.props.text.toLowerCase().startsWith(textToMatch.toLowerCase());
+  });
+}

package/esm/components/select/utils/get-next-index-by-key.d.ts

@@ -0,0 +1 @@
+export default function getNextIndexByKey(key: any, currentIndex: any, lastIndex: any, isLoading: any): any;

package/esm/components/select/utils/get-next-index-by-key.js

@@ -0,0 +1,28 @@
+export default function getNextIndexByKey(key, currentIndex, lastIndex, isLoading) {
+  const isNoOptionSelected = currentIndex === -1;
+  let newIndex = currentIndex;
+
+  if (key === "Home") {
+    newIndex = 0;
+  } else if (key === "End") {
+    newIndex = lastIndex;
+  } else if (key === "ArrowDown") {
+    if (isLoading && currentIndex === lastIndex) {
+      return lastIndex;
+    }
+
+    if (currentIndex === lastIndex || isNoOptionSelected) {
+      newIndex = 0;
+    } else {
+      newIndex = currentIndex + 1;
+    }
+  } else if (key === "ArrowUp") {
+    if (currentIndex === 0 || isNoOptionSelected) {
+      newIndex = lastIndex;
+    } else {
+      newIndex = currentIndex - 1;
+    }
+  }
+
+  return newIndex;
+}

package/esm/components/select/utils/highlight-part-of-text.d.ts

@@ -0,0 +1 @@
+export default function highlightPartOfText(text: any, partToHighlight: any): any;

package/esm/components/select/utils/highlight-part-of-text.js

@@ -0,0 +1,29 @@
+import React from "react";
+import MatchingText from "./matching-text.style";
+export default function highlightPartOfText(text, partToHighlight) {
+  if (!partToHighlight || !partToHighlight.length || !text) return text;
+  const lowercaseText = text.toLowerCase();
+  const lowercasePart = partToHighlight.toLowerCase();
+  const indexOfFirstMatch = lowercaseText.indexOf(lowercasePart);
+
+  if (indexOfFirstMatch === -1) {
+    return text;
+  }
+
+  const precedingText = text.substr(0, indexOfFirstMatch);
+  const matchingText = text.substr(indexOfFirstMatch, partToHighlight.length);
+  let followingText = text.substr(indexOfFirstMatch + partToHighlight.length, text.length);
+
+  if (followingText.length >= partToHighlight.length) {
+    followingText = highlightPartOfText(followingText, partToHighlight);
+  }
+
+  const newValue = [/*#__PURE__*/React.createElement("span", {
+    key: "preceding"
+  }, precedingText), /*#__PURE__*/React.createElement(MatchingText, {
+    key: "match"
+  }, matchingText), /*#__PURE__*/React.createElement("span", {
+    key: "following"
+  }, followingText)];
+  return newValue;
+}

package/esm/components/select/utils/is-expected-option.d.ts

@@ -0,0 +1 @@
+export default function isExpectedOption(element: any, expectedValue: any): boolean;

package/esm/components/select/utils/is-expected-option.js

@@ -0,0 +1,22 @@
+import Option from "../option/option.component";
+import OptionRow from "../option-row/option-row.component";
+import isExpectedValue from "./is-expected-value";
+export default function isExpectedOption(element, expectedValue) {
+  if (element.type !== Option && element.type !== OptionRow) {
+    return false;
+  }
+
+  if (expectedValue === null || expectedValue === undefined) {
+    return false;
+  }
+
+  const {
+    length
+  } = typeof expectedValue === "string" ? expectedValue : Object.keys(expectedValue);
+
+  if (!length) {
+    return false;
+  }
+
+  return isExpectedValue(element.props.value, expectedValue);
+}

package/esm/components/select/utils/is-expected-value.d.ts

@@ -0,0 +1 @@
+export default function isExpectedValue(currentValue: any, expectedValue: any): boolean;

package/esm/components/select/utils/is-expected-value.js

@@ -0,0 +1,7 @@
+export default function isExpectedValue(currentValue, expectedValue) {
+  if (typeof currentValue === "object" && currentValue.id !== null && currentValue.id !== undefined) {
+    return currentValue.id === expectedValue.id;
+  }
+
+  return currentValue === expectedValue;
+}

package/esm/components/select/utils/matching-text.style.d.ts

@@ -0,0 +1,2 @@
+export default MatchingText;
+declare const MatchingText: import("styled-components").StyledComponent<"span", any, {}, never>;

package/esm/components/select/utils/matching-text.style.js

@@ -0,0 +1,6 @@
+import styled from "styled-components";
+const MatchingText = styled.span`
+  font-weight: 700;
+  text-decoration: underline;
+`;
+export default MatchingText;

package/esm/components/select/utils/with-filter.hoc.d.ts

@@ -0,0 +1,4 @@
+export default withFilter;
+/** Filters wrapped component children based on provided filter text and highlights matching content */
+declare function withFilter(WrappedComponent: any): React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";