@carbon/react 1.68.0-rc.0 → 1.68.0

package/es/components/FluidDatePickerInput/FluidDatePickerInput.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { DatePickerInputProps } from '../DatePickerInput';
+declare const FluidDatePickerInput: React.ForwardRefExoticComponent<DatePickerInputProps & React.RefAttributes<HTMLDivElement>>;
+export default FluidDatePickerInput;

package/es/components/FluidDatePickerInput/FluidDatePickerInput.js

@@ -22,6 +22,5 @@ const FluidDatePickerInput = /*#__PURE__*/React__default.forwardRef(function Flu
     ref: ref
   }, other)));
 });
-var FluidDatePickerInput$1 = FluidDatePickerInput;
 
-export { FluidDatePickerInput$1 as default };
+export { FluidDatePickerInput as default };

package/es/components/FluidDatePickerInput/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import FluidDatePickerInput from './FluidDatePickerInput';
+export default FluidDatePickerInput;
+export { FluidDatePickerInput };

package/es/components/Tabs/usePressable.js

@@ -7,6 +7,8 @@
 
 import { useRef, useState, useEffect } from 'react';
 
+/* istanbul ignore file */
+
 /**
  * @param {React.RefObject<HTMLElement>} ref
  *

package/es/index.js

@@ -159,6 +159,11 @@ export { default as SideNavMenuItem } from './components/UIShell/SideNavMenuItem
 export { default as SideNavSwitcher } from './components/UIShell/SideNavSwitcher.js';
 export { default as UnorderedList } from './components/UnorderedList/UnorderedList.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
+export { default as unstable__FluidComboBox } from './components/FluidComboBox/FluidComboBox.js';
+export { default as unstable__FluidComboBoxSkeleton } from './components/FluidComboBox/FluidComboBox.Skeleton.js';
+export { default as unstable__FluidDatePicker } from './components/FluidDatePicker/FluidDatePicker.js';
+export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
+export { default as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput/FluidDatePickerInput.js';
 export { default as unstable__FluidMultiSelect } from './components/FluidMultiSelect/FluidMultiSelect.js';
 export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
 export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
@@ -192,7 +197,6 @@ import './components/Text/index.js';
 export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from './components/Theme/index.js';
 export { PrefixContext, usePrefix } from './internal/usePrefix.js';
 export { useIdPrefix } from './internal/useIdPrefix.js';
-export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
 export { default as unstable_PageSelector } from './components/Pagination/experimental/PageSelector.js';
 export { default as unstable_Pagination } from './components/Pagination/experimental/Pagination.js';
 export { default as ContainedListItem } from './components/ContainedList/ContainedListItem/ContainedListItem.js';
@@ -201,10 +205,6 @@ export { default as useContextMenu } from './components/ContextMenu/useContextMe
 export { default as SliderSkeleton } from './components/Slider/Slider.Skeleton.js';
 export { default as TextInputSkeleton } from './components/TextInput/TextInput.Skeleton.js';
 export { default as TextInput } from './components/TextInput/TextInput.js';
-export { default as unstable__FluidComboBox } from './components/FluidComboBox/FluidComboBox.js';
-export { default as unstable__FluidComboBoxSkeleton } from './components/FluidComboBox/FluidComboBox.Skeleton.js';
-export { default as unstable__FluidDatePicker } from './components/FluidDatePicker/FluidDatePicker.js';
-export { default as unstable__FluidDatePickerInput } from './components/FluidDatePickerInput/FluidDatePickerInput.js';
 export { default as unstable__FluidDropdown } from './components/FluidDropdown/FluidDropdown.js';
 export { default as unstable__FluidDropdownSkeleton } from './components/FluidDropdown/FluidDropdown.Skeleton.js';
 export { LayoutDirection as unstable_LayoutDirection } from './components/LayoutDirection/LayoutDirection.js';

package/lib/components/ComboBox/ComboBox.d.ts

@@ -158,6 +158,7 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * Specify your own filtering logic by passing in a `shouldFilterItem`
      * function that takes in the current input and an item and passes back
      * whether or not the item should be filtered.
+     * this prop will be ignored if `typeahead` prop is enabled
      */
     shouldFilterItem?: (input: {
         item: ItemType;
@@ -177,6 +178,10 @@ export interface ComboBoxProps<ItemType> extends Omit<InputHTMLAttributes<HTMLIn
      * combobox via ARIA attributes.
      */
     titleText?: ReactNode;
+    /**
+     * **Experimental**: will enable autcomplete and typeahead for the input field
+     */
+    typeahead?: boolean;
     /**
      * Specify whether the control is currently in warning state
      */

package/lib/components/ComboBox/ComboBox.js

@@ -46,8 +46,7 @@ const {
   ItemMouseMove,
   InputKeyDownArrowUp,
   InputKeyDownArrowDown,
-  MenuMouseLeave,
-  FunctionSelectItem
+  MenuMouseLeave
 } = Downshift.useCombobox.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -62,26 +61,42 @@ const defaultItemToString = item => {
   return '';
 };
 const defaultShouldFilterItem = () => true;
-const getInputValue = _ref => {
+const autocompleteCustomFilter = _ref => {
+  let {
+    item,
+    inputValue
+  } = _ref;
+  if (inputValue === null || inputValue === '') {
+    return true; // Show all items if there's no input
+  }
+  const lowercaseItem = item.toLowerCase();
+  const lowercaseInput = inputValue.toLowerCase();
+  return lowercaseItem.startsWith(lowercaseInput);
+};
+const getInputValue = _ref2 => {
   let {
     initialSelectedItem,
     inputValue,
     itemToString,
-    selectedItem
-  } = _ref;
+    selectedItem,
+    prevSelectedItem
+  } = _ref2;
   if (selectedItem) {
     return itemToString(selectedItem);
   }
   if (initialSelectedItem) {
     return itemToString(initialSelectedItem);
   }
+  if (!selectedItem && prevSelectedItem) {
+    return '';
+  }
   return inputValue || '';
 };
-const findHighlightedIndex = (_ref2, inputValue) => {
+const findHighlightedIndex = (_ref3, inputValue) => {
   let {
     items,
     itemToString = defaultItemToString
-  } = _ref2;
+  } = _ref3;
   if (!inputValue) {
     return -1;
   }
@@ -104,6 +119,9 @@ const findHighlightedIndex = (_ref2, inputValue) => {
  */
 
 const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const [cursorPosition, setCursorPosition] = React.useState(0);
+  const prevInputLengthRef = React.useRef(0);
+  const inputRef = React.useRef(null);
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
@@ -132,6 +150,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     size,
     titleText,
     translateWithId,
+    typeahead = false,
     warn,
     warnText,
     allowCustomValue = false,
@@ -165,33 +184,68 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       }
     }
   }, [autoAlign, floatingStyles, refs.floating, parentWidth]);
-  const prefix = usePrefix.usePrefix();
-  const {
-    isFluid
-  } = React.useContext(FormContext.FormContext);
-  const textInput = React.useRef(null);
-  const comboBoxInstanceId = useId.useId();
   const [inputValue, setInputValue] = React.useState(getInputValue({
     initialSelectedItem,
     inputValue: '',
     itemToString,
     selectedItem: selectedItemProp
   }));
+  const [typeaheadText, setTypeaheadText] = React.useState('');
+  React.useEffect(() => {
+    if (typeahead) {
+      if (inputValue.length >= prevInputLengthRef.current) {
+        if (inputValue) {
+          const filteredItems = items.filter(item => autocompleteCustomFilter({
+            item: itemToString(item),
+            inputValue: inputValue
+          }));
+          if (filteredItems.length > 0) {
+            const suggestion = itemToString(filteredItems[0]);
+            setTypeaheadText(suggestion.slice(inputValue.length));
+          } else {
+            setTypeaheadText('');
+          }
+        } else {
+          setTypeaheadText('');
+        }
+      } else {
+        setTypeaheadText('');
+      }
+      prevInputLengthRef.current = inputValue.length;
+    }
+  }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
+  const prefix = usePrefix.usePrefix();
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const textInput = React.useRef(null);
+  const comboBoxInstanceId = useId.useId();
   const [isFocused, setIsFocused] = React.useState(false);
-  const [prevSelectedItem, setPrevSelectedItem] = React.useState();
-  const [doneInitialSelectedItem, setDoneInitialSelectedItem] = React.useState(false);
   const savedOnInputChange = React.useRef(onInputChange);
-  if (!doneInitialSelectedItem || prevSelectedItem !== selectedItemProp) {
-    setDoneInitialSelectedItem(true);
-    setPrevSelectedItem(selectedItemProp);
-    setInputValue(getInputValue({
-      initialSelectedItem,
-      inputValue,
-      itemToString,
-      selectedItem: selectedItemProp
-    }));
-  }
-  const filterItems = (items, itemToString, inputValue) => items.filter(item => shouldFilterItem ? shouldFilterItem({
+  const prevSelectedItemProp = React.useRef(selectedItemProp);
+
+  // fully controlled combobox: handle changes to selectedItemProp
+  React.useEffect(() => {
+    if (prevSelectedItemProp.current !== selectedItemProp) {
+      const currentInputValue = getInputValue({
+        initialSelectedItem,
+        inputValue,
+        itemToString,
+        selectedItem: selectedItemProp,
+        prevSelectedItem: prevSelectedItemProp.current
+      });
+      setInputValue(currentInputValue);
+      onChange({
+        selectedItem: selectedItemProp,
+        inputValue: currentInputValue
+      });
+      prevSelectedItemProp.current = selectedItemProp;
+    }
+  }, [selectedItemProp]);
+  const filterItems = (items, itemToString, inputValue) => items.filter(item => typeahead ? autocompleteCustomFilter({
+    item: itemToString(item),
+    inputValue
+  }) : shouldFilterItem ? shouldFilterItem({
     item,
     itemToString,
     inputValue
@@ -214,7 +268,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...props,
     items: filteredItems(inputValue)
   }, inputValue);
-  const stateReducer = React__default["default"].useCallback((state, actionAndChanges) => {
+  const stateReducer = React.useCallback((state, actionAndChanges) => {
     const {
       type,
       changes
@@ -250,14 +304,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           }
           return changes;
         }
-      case FunctionSelectItem:
-        if (onChange) {
-          onChange({
-            selectedItem: changes.selectedItem,
-            inputValue: changes.inputValue
-          });
-        }
-        return changes;
       case InputKeyDownEnter:
         if (allowCustomValue) {
           setInputValue(inputValue);
@@ -387,25 +433,34 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     itemToString: item => {
       return itemToString(item);
     },
-    onInputValueChange(_ref3) {
+    onInputValueChange(_ref4) {
       let {
         inputValue
-      } = _ref3;
-      setInputValue(inputValue || '');
-      setHighlightedIndex(indexToHighlight(inputValue));
+      } = _ref4;
+      const normalizedInput = inputValue || '';
+      setInputValue(normalizedInput);
+      if (selectedItemProp && !inputValue) {
+        // ensure onChange is called when selectedItem is cleared
+        onChange({
+          selectedItem,
+          inputValue: normalizedInput
+        });
+      }
+      setHighlightedIndex(indexToHighlight(normalizedInput));
+      setCursorPosition(inputValue === null ? 0 : normalizedInput.length);
     },
-    onSelectedItemChange(_ref4) {
+    onSelectedItemChange(_ref5) {
       let {
         selectedItem
-      } = _ref4;
+      } = _ref5;
       onChange({
         selectedItem
       });
     },
-    onHighlightedIndexChange: _ref5 => {
+    onHighlightedIndexChange: _ref6 => {
       let {
         highlightedIndex
-      } = _ref5;
+      } = _ref6;
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
         const highlightedItem = itemArray[highlightedIndex];
@@ -441,6 +496,11 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       };
     }
   }, [closeMenu, openMenu, reset, selectItem, setHighlightedIndex, downshiftSetInputValue, toggleMenu]);
+  React.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+    }
+  }, [inputValue, cursorPosition]);
   const buttonProps = getToggleButtonProps({
     disabled: disabled || readOnly,
     onClick: handleToggleClick(isOpen),
@@ -487,6 +547,16 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     'aria-label': deprecatedAriaLabel || ariaLabel,
     ref: autoAlign ? refs.setFloating : null
   }), [autoAlign, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
+  React.useEffect(() => {
+    if (textInput.current) {
+      if (inputRef.current && typeaheadText) {
+        const selectionStart = inputValue.length;
+        const selectionEnd = selectionStart + typeaheadText.length;
+        inputRef.current.value = inputValue + typeaheadText;
+        inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      }
+    }
+  }, [inputValue, typeaheadText]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
@@ -519,7 +589,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, getInputProps({
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
-    ref: mergeRefs["default"](textInput, ref),
+    value: inputValue,
+    onChange: e => {
+      const newValue = e.target.value;
+      downshiftSetInputValue(newValue);
+    },
+    ref: mergeRefs["default"](textInput, ref, inputRef),
     onKeyDown: event => {
       if (match.match(event, keys.Space)) {
         event.stopPropagation();
@@ -567,6 +642,16 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           toggleMenu();
         }
       }
+      if (typeahead && event.key === 'Tab') {
+        //  event.preventDefault();
+        const matchingItem = items.find(item => itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
+        if (matchingItem) {
+          const newValue = itemToString(matchingItem);
+          downshiftSetInputValue(newValue);
+          setCursorPosition(newValue.length);
+          selectItem(matchingItem);
+        }
+      }
     }
   }), rest, readOnlyEventHandlers, {
     readOnly: readOnly,
@@ -759,6 +844,7 @@ ComboBox.propTypes = {
    * Specify your own filtering logic by passing in a `shouldFilterItem`
    * function that takes in the current input and an item and passes back
    * whether or not the item should be filtered.
+   * this prop will be ignored if `typeahead` prop is enabled
    */
   shouldFilterItem: PropTypes__default["default"].func,
   /**
@@ -779,6 +865,10 @@ ComboBox.propTypes = {
    * and returns the localized string for the message
    */
   translateWithId: PropTypes__default["default"].func,
+  /**
+   * **Experimental**: will enable autcomplete and typeahead for the input field
+   */
+  typeahead: PropTypes__default["default"].bool,
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/components/DatePicker/DatePicker.js

@@ -403,9 +403,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     }
     function handleOnChange(event) {
-      if (datePickerType == 'single' && closeOnSelect) {
-        calendar.calendarContainer.classList.remove('open');
-      }
       const {
         target
       } = event;
@@ -421,12 +418,16 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       if (calendar.selectedDates.length === 0) {
         return;
       }
-      calendar.clear();
-      calendar.input.focus();
+    }
+    function handleKeyPress(event) {
+      if (match.match(event, keys.Enter) && closeOnSelect && datePickerType == 'single') {
+        calendar.calendarContainer.classList.remove('open');
+      }
     }
     if (start) {
       start.addEventListener('keydown', handleArrowDown);
       start.addEventListener('change', handleOnChange);
+      start.addEventListener('keypress', handleKeyPress);
       if (calendar && calendar.calendarContainer) {
         // Flatpickr's calendar dialog is not rendered in a landmark causing an
         // error with IBM Equal Access Accessibility Checker so we add an aria
@@ -439,6 +440,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     if (end) {
       end.addEventListener('keydown', handleArrowDown);
       end.addEventListener('change', handleOnChange);
+      end.addEventListener('keypress', handleKeyPress);
     }
 
     //component did unmount equivalent
@@ -462,10 +464,12 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       if (start) {
         start.removeEventListener('keydown', handleArrowDown);
         start.removeEventListener('change', handleOnChange);
+        start.removeEventListener('keypress', handleKeyPress);
       }
       if (end) {
         end.removeEventListener('keydown', handleArrowDown);
         end.removeEventListener('change', handleOnChange);
+        end.removeEventListener('change', handleKeyPress);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/components/FileUploader/FileUploaderDropContainer.js

@@ -153,7 +153,7 @@ function FileUploaderDropContainer(_ref) {
     multiple: multiple,
     onChange: handleChange,
     onClick: evt => {
-      evt.target.value = null;
+      evt.target.value = '';
     }
   }));
 }

package/lib/components/FluidComboBox/FluidComboBox.Skeleton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface FluidComboBoxSkeletonProps {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare const FluidComboBoxSkeleton: React.FC<FluidComboBoxSkeletonProps>;
+export default FluidComboBoxSkeleton;

package/lib/components/FluidComboBox/FluidComboBox.Skeleton.js

@@ -44,6 +44,5 @@ FluidComboBoxSkeleton.propTypes = {
    */
   className: PropTypes__default["default"].string
 };
-var FluidComboBoxSkeleton$1 = FluidComboBoxSkeleton;
 
-exports["default"] = FluidComboBoxSkeleton$1;
+exports["default"] = FluidComboBoxSkeleton;

package/lib/components/FluidComboBox/FluidComboBox.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ComponentType } from 'react';
+import { ComboBoxProps } from '../ComboBox/ComboBox';
+type ItemToStringHandler<ItemType> = (item: ItemType | null) => string;
+interface OnChangeData<ItemType> {
+    selectedItem: ItemType | null | undefined;
+    inputValue?: string | null;
+}
+export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType> {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify the direction of the dropdown. Can be either top or bottom.
+     */
+    direction?: 'top' | 'bottom';
+    /**
+     * Specify whether the `<input>` should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify a custom `id` for the `<input>`
+     */
+    id: string;
+    /**
+     * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+     * from their collection that are pre-selected
+     */
+    initialSelectedItem?: ItemType;
+    /**
+     * Specify if the currently selected value is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Specify if the `FluidComboBox` should render its menu items in condensed mode
+     */
+    isCondensed?: boolean;
+    /**
+     * Function to render items as custom components instead of strings.
+     * Defaults to null and is overridden by a getter
+     */
+    itemToElement?: ComponentType<ItemType> | null;
+    /**
+     * Helper function passed to downshift that allows the library to render a
+     * given item to a string label. By default, it extracts the `label` field
+     * from a given item to serve as the item label in the list.
+     */
+    itemToString?: ItemToStringHandler<ItemType>;
+    /**
+     * We try to stay as generic as possible here to allow individuals to pass
+     * in a collection of whatever kind of data structure they prefer
+     */
+    items: ItemType[];
+    /**
+     * Generic `label` that will be used as the textual representation of what
+     * this field is for
+     */
+    label: React.ReactNode;
+    /**
+     * `onChange` is a utility for this controlled component to communicate to a
+     * consuming component what kind of internal state changes are occurring.
+     */
+    onChange: (data: OnChangeData<ItemType>) => void;
+    /**
+     * An optional callback to render the currently selected item as a react element instead of only
+     * as a string.
+     */
+    renderSelectedItem?: (selectedItem: ItemType) => React.ReactNode;
+    /**
+     * In the case you want to control the dropdown selection entirely.
+     * */
+    selectedItem?: ItemType | null;
+    /**
+     * Provide the title text that will be read by a screen reader when
+     * visiting this control
+     */
+    titleText?: React.ReactNode;
+    /**
+     * Callback function for translating ListBoxMenuIcon SVG title
+     */
+    translateWithId?: (id: string) => string;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
+}
+declare const FluidComboBox: React.ForwardRefExoticComponent<FluidComboBoxProps<unknown> & React.RefAttributes<HTMLInputElement>>;
+export default FluidComboBox;

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -101,7 +101,7 @@ FluidComboBox.propTypes = {
    * `onChange` is a utility for this controlled component to communicate to a
    * consuming component what kind of internal state changes are occurring.
    */
-  onChange: PropTypes__default["default"].func,
+  onChange: PropTypes__default["default"].func.isRequired,
   /**
    * An optional callback to render the currently selected item as a react element instead of only
    * as a string.
@@ -129,6 +129,5 @@ FluidComboBox.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var FluidComboBox$1 = FluidComboBox;
 
-exports["default"] = FluidComboBox$1;
+exports["default"] = FluidComboBox;

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import FluidComboBox from './FluidComboBox';
+import type { FluidComboBoxProps } from './FluidComboBox';
+import type { FluidComboBoxSkeletonProps } from './FluidComboBox.Skeleton';
+export type { FluidComboBoxProps, FluidComboBoxSkeletonProps };
+export default FluidComboBox;
+export { FluidComboBox };
+export { default as FluidComboBoxSkeleton } from './FluidComboBox.Skeleton';

package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+export interface FluidDatePickerSkeletonProps {
+    /**
+     * Specify an optional className to be applied to the outer FluidForm wrapper
+     */
+    className?: string;
+    /**
+     * Specify which variant of the DatePicker the skeleton should mimic
+     */
+    datePickerType?: 'simple' | 'single' | 'range';
+}
+declare const FluidDatePickerSkeleton: React.FC<FluidDatePickerSkeletonProps>;
+export default FluidDatePickerSkeleton;

package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js

@@ -23,7 +23,7 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-function FluidDatePickerSkeleton(_ref) {
+const FluidDatePickerSkeleton = _ref => {
   let {
     className,
     datePickerType = 'single',
@@ -60,7 +60,7 @@ function FluidDatePickerSkeleton(_ref) {
     role: "img",
     "aria-hidden": "true"
   }))));
-}
+};
 FluidDatePickerSkeleton.propTypes = {
   /**
    * Specify an optional className to be applied to the outer FluidForm wrapper