carbon-react 104.34.1 → 104.37.0

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

@@ -0,0 +1,388 @@
+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, { useEffect, useState, useCallback, useLayoutEffect, useRef, useMemo } from "react";
+import PropTypes from "prop-types";
+import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
+import { StyledSelectList, StyledSelectLoaderContainer, StyledPopoverContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
+import Popover from "../../../__internal__/popover";
+import OptionRow from "../option-row/option-row.component";
+import updateListScrollTop from "./update-list-scroll";
+import getNextChildByText from "../utils/get-next-child-by-text";
+import getNextIndexByKey from "../utils/get-next-index-by-key";
+import ListActionButton from "../list-action-button/list-action-button.component";
+import StyledSelectListContainer from "./select-list-container.style";
+import Loader from "../../loader";
+import Option from "../option/option.component";
+import guid from "../../../__internal__/utils/helpers/guid/guid";
+import SelectListContext from "../__internal__/select-list-context";
+const fixedPopoverModifiers = [{
+  name: "offset",
+  options: {
+    offset: [0, 3]
+  }
+}, {
+  name: "preventOverflow",
+  options: {
+    mainAxis: false
+  }
+}];
+const SelectList = /*#__PURE__*/React.forwardRef(({
+  listActionButton,
+  id,
+  labelId,
+  children,
+  onSelect,
+  onSelectListClose,
+  filterText,
+  anchorElement,
+  highlightedValue,
+  disablePortal,
+  onListAction,
+  isLoading,
+  onListScrollBottom,
+  multiColumn,
+  tableHeader,
+  loaderDataRole,
+  listPlacement = "bottom-start",
+  flipEnabled = true,
+  ...listProps
+}, listContainerRef) => {
+  const [currentOptionsListIndex, setCurrentOptionsListIndex] = useState(-1);
+  const [listHeight, setListHeight] = useState(0);
+  const [listWidth, setListWidth] = useState(null);
+  const placement = useRef("bottom");
+  const lastFilter = useRef("");
+  const listRef = useRef();
+  const tableRef = useRef();
+  const listActionButtonRef = useRef();
+  const {
+    blockScroll,
+    allowScroll
+  } = useScrollBlock();
+  useEffect(() => {
+    blockScroll();
+    return () => {
+      allowScroll();
+    };
+  }, [allowScroll, blockScroll]);
+  const setPlacementCallback = useCallback(popper => {
+    placement.current = popper.placement;
+  }, [placement]);
+  const anchorRef = useMemo(() => ({
+    current: anchorElement
+  }), [anchorElement]);
+  const optionRefList = useMemo(() => React.Children.map(children, child => {
+    if ((child === null || child === void 0 ? void 0 : child.type) === Option || (child === null || child === void 0 ? void 0 : child.type) === OptionRow) {
+      return /*#__PURE__*/React.createRef();
+    }
+
+    return null;
+  }).filter(child => child), [children]);
+  const handleSelect = useCallback(optionData => {
+    onSelect({ ...optionData,
+      selectionType: "click"
+    });
+  }, [onSelect]);
+  const childrenWithListProps = useMemo(() => React.Children.map(children, (child, index) => {
+    if (!child || child.type !== Option && child.type !== OptionRow) {
+      return child;
+    }
+
+    const newProps = {
+      index,
+      id: guid(),
+      onSelect: handleSelect,
+      hidden: isLoading && React.Children.count(children) === 1,
+      ref: optionRefList[index]
+    };
+    return /*#__PURE__*/React.cloneElement(child, newProps);
+  }), [children, handleSelect, isLoading, optionRefList]);
+  const childrenList = useMemo(() => React.Children.toArray(childrenWithListProps), [childrenWithListProps]);
+  const lastOptionIndex = useMemo(() => {
+    let lastIndex = 0;
+    childrenList.forEach((element, index) => {
+      if (element.type === Option || element.type === OptionRow) {
+        lastIndex = index;
+      }
+    });
+    return lastIndex;
+  }, [childrenList]);
+  const getNextHighlightableItemIndex = useCallback((key, indexOfHighlighted) => {
+    const lastIndex = lastOptionIndex;
+    let nextIndex = getNextIndexByKey(key, indexOfHighlighted, lastIndex, isLoading);
+    const nextElement = childrenList[nextIndex];
+
+    if (nextElement && nextElement.type !== Option && nextElement.type !== OptionRow) {
+      nextIndex = getNextHighlightableItemIndex(key, nextIndex, lastIndex);
+    }
+
+    return nextIndex;
+  }, [childrenList, lastOptionIndex, isLoading]);
+  const getIndexOfMatch = useCallback(valueToMatch => {
+    return childrenList.findIndex(child => child.props.value === valueToMatch);
+  }, [childrenList]);
+  const highlightNextItem = useCallback(key => {
+    let currentIndex = currentOptionsListIndex;
+
+    if (highlightedValue) {
+      const indexOfHighlighted = getIndexOfMatch(highlightedValue);
+      currentIndex = indexOfHighlighted;
+    }
+
+    const nextIndex = getNextHighlightableItemIndex(key, currentIndex);
+
+    if (currentIndex === nextIndex) {
+      return;
+    }
+
+    const {
+      text,
+      value,
+      id: itemId
+    } = childrenList[nextIndex].props;
+    onSelect({
+      text,
+      value,
+      selectionType: "navigationKey",
+      id: itemId
+    });
+  }, [childrenList, currentOptionsListIndex, getIndexOfMatch, getNextHighlightableItemIndex, highlightedValue, onSelect]);
+  const handleActionButtonTab = useCallback((event, isActionButtonFocused) => {
+    if (isActionButtonFocused) {
+      onSelect({
+        selectionType: "tab"
+      });
+    } else {
+      event.preventDefault();
+      listActionButtonRef.current.focus();
+    }
+  }, [onSelect]);
+  const focusOnAnchor = useCallback(() => {
+    if (anchorElement) {
+      anchorElement.getElementsByTagName("input")[0].focus();
+    }
+  }, [anchorElement]);
+  const handleGlobalKeydown = useCallback(event => {
+    const {
+      key
+    } = event;
+    const isActionButtonFocused = document.activeElement === listActionButtonRef.current;
+
+    if (key === "Tab" && listActionButton) {
+      handleActionButtonTab(event, isActionButtonFocused);
+    } else if (key === "Tab" || key === "Escape") {
+      onSelectListClose();
+    } else if (key === "Enter" && !isActionButtonFocused) {
+      event.preventDefault();
+      const currentOption = childrenList[currentOptionsListIndex];
+
+      if (!currentOption) {
+        onSelectListClose();
+        return;
+      }
+
+      const {
+        id: itemId,
+        text,
+        value
+      } = currentOption.props;
+      onSelect({
+        id: itemId,
+        text,
+        value,
+        selectionType: "enterKey"
+      });
+    } else if (isNavigationKey(key)) {
+      focusOnAnchor();
+      highlightNextItem(key);
+    }
+  }, [childrenList, listActionButton, handleActionButtonTab, onSelectListClose, currentOptionsListIndex, onSelect, highlightNextItem, focusOnAnchor]);
+  const handleListScroll = useCallback(event => {
+    const element = event.target;
+
+    if (onListScrollBottom && element.scrollHeight - element.scrollTop === element.clientHeight) {
+      onListScrollBottom();
+    }
+  }, [onListScrollBottom]);
+  const assignListWidth = useCallback(() => {
+    if (anchorElement) {
+      const inputBoundingRect = anchorElement.getBoundingClientRect();
+      const width = `${inputBoundingRect.width}px`;
+      setListWidth(width);
+    }
+  }, [anchorElement]);
+  useLayoutEffect(() => {
+    assignListWidth();
+    window.addEventListener("resize", assignListWidth);
+    return () => {
+      window.removeEventListener("resize", assignListWidth);
+    };
+  }, [assignListWidth]);
+  useLayoutEffect(() => {
+    let newHeight;
+    newHeight = listRef.current.clientHeight;
+
+    if (listActionButtonRef.current) {
+      newHeight += listActionButtonRef.current.parentElement.clientHeight;
+    }
+
+    setListHeight(`${newHeight}px`);
+  }, [children, listRef.current]);
+  useEffect(() => {
+    const keyboardEvent = "keydown";
+    const listElement = listRef.current;
+    window.addEventListener(keyboardEvent, handleGlobalKeydown);
+    listElement.addEventListener("scroll", handleListScroll);
+    return function cleanup() {
+      window.removeEventListener(keyboardEvent, handleGlobalKeydown);
+      listElement.removeEventListener("scroll", handleListScroll);
+    };
+  }, [handleGlobalKeydown, handleListScroll]);
+  useEffect(() => {
+    if (!filterText || filterText === lastFilter.current) {
+      lastFilter.current = filterText;
+      return;
+    }
+
+    lastFilter.current = filterText;
+    setCurrentOptionsListIndex(previousIndex => {
+      const match = getNextChildByText(filterText, childrenList, previousIndex);
+
+      if (!match) {
+        return previousIndex;
+      }
+
+      const indexOfMatch = getIndexOfMatch(match.props.value);
+      updateListScrollTop(indexOfMatch, multiColumn ? tableRef.current : listRef.current, optionRefList);
+      return indexOfMatch;
+    });
+  }, [childrenList, filterText, getIndexOfMatch, lastFilter, multiColumn, optionRefList]);
+  useEffect(() => {
+    if (!highlightedValue) {
+      return;
+    }
+
+    const indexOfMatch = getIndexOfMatch(highlightedValue);
+    setCurrentOptionsListIndex(indexOfMatch);
+    updateListScrollTop(indexOfMatch, multiColumn ? tableRef.current : listRef.current, optionRefList);
+  }, [childrenList, getIndexOfMatch, highlightedValue, multiColumn, optionRefList]);
+  useEffect(() => {
+    if (isLoading && currentOptionsListIndex === lastOptionIndex) {
+      listRef.current.scrollTop = listRef.current.scrollHeight;
+    }
+  }, [children, currentOptionsListIndex, isLoading, lastOptionIndex]);
+  const popoverModifiers = useMemo(() => [...fixedPopoverModifiers, {
+    name: "flip",
+    enabled: flipEnabled
+  }], [flipEnabled]);
+
+  function isNavigationKey(keyEvent) {
+    return keyEvent === "ArrowDown" || keyEvent === "ArrowUp" || keyEvent === "Home" || keyEvent === "End";
+  }
+
+  const loader = () => /*#__PURE__*/React.createElement(StyledSelectLoaderContainer, {
+    key: "loader",
+    as: multiColumn ? "div" : "li"
+  }, /*#__PURE__*/React.createElement(Loader, {
+    "data-role": loaderDataRole
+  }));
+
+  let selectListContent = childrenWithListProps;
+
+  if (multiColumn) {
+    selectListContent = /*#__PURE__*/React.createElement(StyledSelectListTable, null, /*#__PURE__*/React.createElement(StyledSelectListTableHeader, null, tableHeader), /*#__PURE__*/React.createElement(StyledSelectListTableBody, {
+      ref: tableRef
+    }, childrenWithListProps));
+  }
+
+  return /*#__PURE__*/React.createElement(Popover, {
+    placement: listPlacement,
+    disablePortal: disablePortal,
+    reference: anchorRef,
+    onFirstUpdate: setPlacementCallback,
+    modifiers: popoverModifiers,
+    disableBackgroundUI: true
+  }, /*#__PURE__*/React.createElement(StyledPopoverContainer, {
+    height: listHeight,
+    width: listWidth,
+    ref: listContainerRef
+  }, /*#__PURE__*/React.createElement(SelectListContext.Provider, {
+    value: {
+      currentOptionsListIndex
+    }
+  }, /*#__PURE__*/React.createElement(StyledSelectListContainer, _extends({
+    "data-element": "select-list-wrapper",
+    height: listHeight,
+    placement: placement.current
+  }, listProps), /*#__PURE__*/React.createElement(StyledSelectList, {
+    id: id,
+    as: multiColumn ? "div" : "ul",
+    "aria-labelledby": labelId,
+    "data-element": "select-list",
+    role: "listbox",
+    ref: listRef,
+    tabIndex: "-1",
+    isLoading: isLoading,
+    multiColumn: multiColumn
+  }, selectListContent, isLoading && loader()), listActionButton && /*#__PURE__*/React.createElement(ListActionButton, {
+    ref: listActionButtonRef,
+    listActionButton: listActionButton,
+    onListAction: onListAction
+  })))));
+});
+SelectList.propTypes = {
+  /** The ID for the parent <div> */
+  id: PropTypes.string,
+
+  /** The Id of the label */
+  labelId: PropTypes.string,
+
+  /** Child components (such as <Option>) for the <ScrollableList> */
+  children: PropTypes.node,
+
+  /** Boolean to toggle where DatePicker is rendered in relation to the Date Input */
+  disablePortal: PropTypes.bool,
+
+  /** DOM element to position the dropdown menu list relative to */
+  anchorElement: PropTypes.object,
+
+  /** A callback for when a child is selected */
+  onSelect: PropTypes.func.isRequired,
+
+  /** A callback for when the list should be closed */
+  onSelectListClose: PropTypes.func.isRequired,
+
+  /** Text value to highlight an option */
+  filterText: PropTypes.string,
+
+  /** Value of option to be highlighted on component render */
+  highlightedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
+  /** True for default text button or a Button Component to be rendered */
+  listActionButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+
+  /** A callback for when the Action Button is triggered */
+  onListAction: 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,
+
+  /** 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,
+
+  /** Data role for loader component */
+  loaderDataRole: PropTypes.string,
+
+  /** Placement of the select list relative 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
+};
+export default SelectList;

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

@@ -0,0 +1,6 @@
+export const StyledPopoverContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledSelectList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export const StyledSelectLoaderContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
+export const StyledSelectListTable: import("styled-components").StyledComponent<"table", any, {}, never>;
+export const StyledSelectListTableHeader: import("styled-components").StyledComponent<"thead", any, {}, never>;
+export const StyledSelectListTableBody: import("styled-components").StyledComponent<"tbody", any, {}, never>;

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

@@ -0,0 +1,111 @@
+import styled, { css } from "styled-components";
+import { baseTheme } from "../../../style/themes";
+const overhang = 4; // TODO (design-tokens): no elovation/zindex tokens yet
+
+const StyledPopoverContainer = styled.div`
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  height: ${({
+  height
+}) => height};
+  width: calc(100% + ${2 * overhang}px);
+  ${({
+  width
+}) => css`
+      width: ${width};
+    `};
+`;
+StyledPopoverContainer.defaultProps = {
+  theme: baseTheme
+};
+const StyledSelectList = styled.ul`
+  ${({
+  isLoading,
+  multiColumn
+}) => css`
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    list-style-type: none;
+    max-height: ${({
+  maxHeight
+}) => `${maxHeight}`};
+    margin: 0;
+    outline: none;
+    overflow-x: hidden;
+    overflow-y: ${multiColumn ? "hidden" : "auto"};
+    padding: 0;
+
+    ${isLoading && css`
+        min-height: 150px;
+      `}}
+  `}
+`;
+StyledSelectList.defaultProps = {
+  maxHeight: "180px"
+};
+const StyledSelectLoaderContainer = styled.li`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  width: 100%;
+`;
+const StyledSelectListTable = styled.table`
+  background-color: var(--colorsUtilityYang100);
+  border-collapse: collapse;
+  border-radius: 0px;
+  border-spacing: 0;
+  min-width: 100%;
+  white-space: nowrap;
+  height: 180px;
+
+  thead,
+  tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed;
+  }
+`; // TODO (design-tokens): to match current style for border bottom colorsUtilityMajor100
+
+const StyledSelectListTableHeader = styled.thead`
+  th {
+    position: sticky;
+    top: 0;
+    padding: var(--spacing200);
+    border-bottom: 1px solid var(--colorsUtilityMajor050);
+    background-color: white;
+    text-align: left;
+    font-weight: 900;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: var(--colorsUtilityYin055);
+    :after {
+      content: "";
+      display: block;
+      position: absolute;
+      bottom: -8px;
+      left: 0px;
+      background-image: linear-gradient(
+        var(--colorsComponentsNavigationYin100),
+        var(--colorsUtilityYang100)
+      );
+      opacity: 0.03;
+      height: 8px;
+      width: 100%;
+    }
+  }
+`;
+const StyledSelectListTableBody = styled.tbody`
+  display: block;
+  overflow-y: auto;
+  width: 100%;
+  table-layout: fixed;
+  max-height: 132px;
+`;
+export { StyledPopoverContainer, StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody };

package/esm/components/select/select-list/update-list-scroll.d.ts

@@ -0,0 +1 @@
+export default function updateListScrollTop(indexOfCurrent: any, list: any, options: any): void;

package/esm/components/select/select-list/update-list-scroll.js

@@ -0,0 +1,21 @@
+export default function updateListScrollTop(indexOfCurrent, list, options) {
+  if (!list || !options[indexOfCurrent] || options[indexOfCurrent].current === null) {
+    list.scrollTop = 0;
+    return;
+  }
+
+  let newPosition = 0;
+  const {
+    offsetHeight: listHeight
+  } = list;
+  const {
+    offsetTop: itemTop,
+    offsetHeight: currentItemHeight
+  } = options[indexOfCurrent].current;
+
+  if (itemTop + currentItemHeight > listHeight) {
+    newPosition = itemTop + currentItemHeight - listHeight;
+  }
+
+  list.scrollTop = newPosition;
+}

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

@@ -0,0 +1 @@
+export { default } from "./select-textbox";

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

@@ -0,0 +1,131 @@
+export default SelectTextbox;
+declare function SelectTextbox({ accessibilityLabelId, "aria-controls": ariaControls, value, disabled, isOpen, readOnly, placeholder, labelId, size, onClick, onFocus, onBlur, onChange, selectedValue, required, textboxRef, hasTextCursor, transparent, activeDescendantId, ...restProps }: {
+    [x: string]: any;
+    accessibilityLabelId?: string | undefined;
+    "aria-controls": any;
+    value: any;
+    disabled: any;
+    isOpen: any;
+    readOnly: any;
+    placeholder: any;
+    labelId: any;
+    size: any;
+    onClick: any;
+    onFocus: any;
+    onBlur: any;
+    onChange: any;
+    selectedValue: any;
+    required: any;
+    textboxRef: any;
+    hasTextCursor: any;
+    transparent: any;
+    activeDescendantId: any;
+}): JSX.Element;
+declare namespace SelectTextbox {
+    const propTypes: {
+        /**
+         * @ignore
+         * @private
+         * Id attribute of the select list
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * @private
+         * @ignore
+         * Value to be displayed in the Textbox */
+        formattedValue: PropTypes.Requireable<string>;
+        /**
+         * @private
+         * @ignore
+         * If true, the input will be displayed */
+        hasTextCursor: PropTypes.Requireable<boolean>;
+        /**
+         * @private
+         * @ignore
+         * Value of the Select Input */
+        selectedValue: PropTypes.Requireable<string | object>;
+        /**
+         * Id of the element containing the currently displayed value
+         * to be read by voice readers
+         * @private
+         * @ignore
+         */
+        accessibilityLabelId: PropTypes.Requireable<string>;
+        /** Id attribute of the input element */
+        id: PropTypes.Requireable<string>;
+        /** Name attribute of the input element */
+        name: PropTypes.Requireable<string>;
+        /** If true the Component will be read-only */
+        readOnly: PropTypes.Requireable<boolean>;
+        /** If true the Component will be disabled */
+        disabled: PropTypes.Requireable<boolean>;
+        /** If true the Component will be focused when rendered */
+        autoFocus: PropTypes.Requireable<boolean>;
+        /**
+         * Label id passed from Select component
+         * @private
+         * @ignore
+         *
+         */
+        labelId: PropTypes.Requireable<string>;
+        /** Label */
+        label: PropTypes.Requireable<string>;
+        /** Text applied to label help tooltip */
+        labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /** When true, label is placed in line with an input */
+        labelInline: PropTypes.Requireable<boolean>;
+        /** Width of a label in percentage. Works only when labelInline is true */
+        labelWidth: PropTypes.Requireable<number>;
+        /** Width of an input in percentage. Works only when labelInline is true */
+        inputWidth: PropTypes.Requireable<number>;
+        /**
+         * @ignore
+         * @private
+         * If true, the select is open
+         */
+        isOpen: PropTypes.Requireable<boolean>;
+        /** Size of an input */
+        size: PropTypes.Requireable<string>;
+        /** Placeholder string to be displayed in input */
+        placeholder: PropTypes.Requireable<string>;
+        /** A custom callback for when changes occur */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox is clicked. */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox is focused. */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the Select Textbox loses it's focus. */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Callback function for when the key is pressed when focused on Select Textbox. */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
+        adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+        /** Flag to configure component as mandatory */
+        required: PropTypes.Requireable<boolean>;
+    };
+}
+export namespace formInputPropTypes {
+    const accessibilityLabelId: PropTypes.Requireable<string>;
+    const id: PropTypes.Requireable<string>;
+    const name: PropTypes.Requireable<string>;
+    const readOnly: PropTypes.Requireable<boolean>;
+    const disabled: PropTypes.Requireable<boolean>;
+    const autoFocus: PropTypes.Requireable<boolean>;
+    const labelId: PropTypes.Requireable<string>;
+    const label: PropTypes.Requireable<string>;
+    const labelHelp: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    const labelInline: PropTypes.Requireable<boolean>;
+    const labelWidth: PropTypes.Requireable<number>;
+    const inputWidth: PropTypes.Requireable<number>;
+    const isOpen: PropTypes.Requireable<boolean>;
+    const size: PropTypes.Requireable<string>;
+    const placeholder: PropTypes.Requireable<string>;
+    const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    const onClick: PropTypes.Requireable<(...args: any[]) => any>;
+    const onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+    const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+    const onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+    const adaptiveLabelBreakpoint: PropTypes.Requireable<number>;
+    const required: PropTypes.Requireable<boolean>;
+}
+import PropTypes from "prop-types";