@vuu-ui/vuu-ui-controls 0.8.14-debug → 0.8.15-debug

package/cjs/index.js

@@ -490,7 +490,7 @@ var useCollectionItems = ({
   // revealSelected = false,
   source
 }) => {
-  var _a2;
+  var _a2, _b;
   const { getItemId } = options;
   const [, forceUpdate] = (0, import_react4.useState)(null);
   const inheritedCollectionHook = useCollection();
@@ -498,6 +498,7 @@ var useCollectionItems = ({
   const flattenedDataRef = (0, import_react4.useRef)([]);
   const EMPTY_COLLECTION = (0, import_react4.useMemo)(() => [], []);
   const filterPattern = (0, import_react4.useRef)((_a2 = options.filterPattern) != null ? _a2 : "");
+  const disableFilter = (_b = options.disableFilter) != null ? _b : false;
   const {
     getFilterRegex = getDefaultFilterRegex,
     noChildrenLabel,
@@ -509,14 +510,14 @@ var useCollectionItems = ({
   const addMetadataToItems = (0, import_react4.useCallback)(
     (items, indexer, level = 1, path = "", results = [], flattenedCollection2 = [], flattenedSource2 = []) => {
       items.forEach((item, i, all) => {
-        var _a3, _b;
+        var _a3, _b2;
         const isCollapsibleHeader = item.header && options.collapsibleHeaders;
         const isNonCollapsibleGroupNode = item.childNodes && options.collapsibleHeaders === false;
         const isLeaf3 = !item.childNodes || item.childNodes.length === 0;
         const nonCollapsible = isNonCollapsibleGroupNode || isLeaf3 && !isCollapsibleHeader;
         const childPath = path ? `${path}.${i}` : `item-${i}`;
         const id = (_a3 = item.id) != null ? _a3 : getItemId ? getItemId(i) : `${idRoot}-${childPath}`;
-        const expanded = nonCollapsible ? void 0 : (_b = item.expanded) != null ? _b : isExpanded2();
+        const expanded = nonCollapsible ? void 0 : (_b2 = item.expanded) != null ? _b2 : isExpanded2();
         const normalisedItem = {
           ...item,
           childNodes: void 0,
@@ -551,12 +552,12 @@ var useCollectionItems = ({
     [options.collapsibleHeaders, getItemId, idRoot, isExpanded2]
   );
   const getFilter = (0, import_react4.useCallback)(() => {
-    if (filterPattern.current) {
+    if (filterPattern.current && !disableFilter) {
       return getDefaultFilter(filterPattern.current, getFilterRegex);
     } else {
       return null;
     }
-  }, [getFilterRegex]);
+  }, [disableFilter, getFilterRegex]);
   const collectVisibleItems = (0, import_react4.useCallback)(
     (items, filter = getFilter(), results = [], idx = { value: 0 }) => {
       let skipToNextHeader = false;
@@ -5435,6 +5436,7 @@ var import_vuu_layout6 = require("@vuu-ui/vuu-layout");
 var import_react38 = require("react");
 var EnterOnly = ["Enter"];
 var useCombobox = ({
+  allowBackspaceClearsSelection,
   allowFreeText,
   ariaLabel,
   collectionHook,
@@ -5444,6 +5446,7 @@ var useCombobox = ({
   onBlur,
   onFocus,
   onChange,
+  onDeselect,
   onSelect,
   id,
   initialHighlightedIndex = -1,
@@ -5456,6 +5459,7 @@ var useCombobox = ({
   onSelectionChange,
   onSetSelectedText,
   selected: selectedProp,
+  selectionKeys = EnterOnly,
   selectionStrategy,
   value: valueProp,
   InputProps: inputProps = {
@@ -5466,7 +5470,7 @@ var useCombobox = ({
   }
 }) => {
   const isMultiSelect = isMultiSelection(selectionStrategy);
-  const { setFilterPattern } = collectionHook;
+  const { data, setFilterPattern } = collectionHook;
   const setHighlightedIndexRef = (0, import_react38.useRef)(null);
   const selectedRef = (0, import_react38.useRef)(isMultiSelect ? [] : null);
   const ignoreSelectOnFocus = (0, import_react38.useRef)(true);
@@ -5485,7 +5489,6 @@ var useCombobox = ({
   const highlightSelectedItem = (0, import_react38.useCallback)((selected2) => {
     var _a2;
     if (Array.isArray(selected2)) {
-      console.log("TODO multi selection");
     } else if (selected2 == null) {
       (_a2 = setHighlightedIndexRef.current) == null ? void 0 : _a2.call(setHighlightedIndexRef, -1);
     }
@@ -5583,7 +5586,7 @@ var useCombobox = ({
         setTextValue("", false);
       }
       setIsOpen(open);
-      onOpenChange == null ? void 0 : onOpenChange(open);
+      onOpenChange == null ? void 0 : onOpenChange(open, closeReason);
       if (!open && closeReason !== "Escape") {
         if (!selectFreeTextInputValue()) {
           applySelection();
@@ -5626,11 +5629,11 @@ var useCombobox = ({
     disableAriaActiveDescendant,
     disableHighlightOnFocus: true,
     disableTypeToSelect: true,
+    label: "combobox",
     onKeyboardNavigation: handleKeyboardNavigation,
-    // onKeyDown: handleInputKeyDown,
     onSelectionChange: handleSelectionChange,
     selected: collectionHook.itemToCollectionItemId(selectedProp),
-    selectionKeys: EnterOnly,
+    selectionKeys,
     selectionStrategy,
     tabToSelect: !isMultiSelect
   });
@@ -5657,6 +5660,15 @@ var useCombobox = ({
     },
     [setFilterPattern, setIsOpen, setValue]
   );
+  const handleInputKeyDown = (0, import_react38.useCallback)(
+    (e) => {
+      if (e.key === "Backspace" && allowBackspaceClearsSelection) {
+        selectedRef.current = null;
+        onDeselect == null ? void 0 : onDeselect();
+      }
+    },
+    [allowBackspaceClearsSelection, onDeselect]
+  );
   const { onFocus: inputOnFocus = onFocus } = inputProps;
   const { onFocus: listOnFocus } = listControlProps;
   const handleInputFocus = (0, import_react38.useCallback)(
@@ -5718,7 +5730,8 @@ var useCombobox = ({
     ...inputProps.inputProps,
     // "aria-owns": listId,
     "aria-label": ariaLabel,
-    autoComplete: "off"
+    autoComplete: "off",
+    onKeyDown: handleInputKeyDown
   };
   return {
     focusVisible,
@@ -5765,12 +5778,14 @@ var ComboBox = (0, import_react39.forwardRef)(function Combobox({
   PopupProps,
   ListItem: ListItem4,
   "aria-label": ariaLabel,
+  allowBackspaceClearsSelection,
   allowFreeText,
   children,
   defaultIsOpen,
   defaultSelected,
   defaultValue,
   disabled,
+  disableFilter,
   onBlur,
   onFocus,
   onChange,
@@ -5782,9 +5797,11 @@ var ComboBox = (0, import_react39.forwardRef)(function Combobox({
   isOpen: isOpenProp,
   itemToString: itemToString2 = itemToString,
   itemsToString,
+  onDeselect,
   onOpenChange: onOpenChangeProp,
   onSelectionChange,
   selected: selectedProp,
+  selectionKeys,
   selectionStrategy,
   source,
   value: valueProp,
@@ -5806,6 +5823,7 @@ var ComboBox = (0, import_react39.forwardRef)(function Combobox({
     source,
     children,
     options: {
+      disableFilter,
       filterPattern: initialValue,
       getFilterRegex,
       itemToString: itemToString2
@@ -5822,6 +5840,7 @@ var ComboBox = (0, import_react39.forwardRef)(function Combobox({
     selected
   } = useCombobox({
     InputProps: InputProps4,
+    allowBackspaceClearsSelection,
     allowFreeText,
     ariaLabel,
     collectionHook,
@@ -5834,6 +5853,7 @@ var ComboBox = (0, import_react39.forwardRef)(function Combobox({
     label: props.title,
     listRef,
     onBlur,
+    onDeselect,
     onFocus,
     onChange,
     onSelect,
@@ -5845,6 +5865,7 @@ var ComboBox = (0, import_react39.forwardRef)(function Combobox({
     onSelectionChange,
     onSetSelectedText,
     selected: selectedProp,
+    selectionKeys,
     selectionStrategy,
     value: initialValue
   });
@@ -5892,7 +5913,6 @@ var ComboBox = (0, import_react39.forwardRef)(function Combobox({
             focusVisible,
             highlightedIndex,
             itemTextHighlightPattern: String(inputProps.value) || void 0,
-            id: `${id}-list`,
             listHandlers,
             onSelectionChange,
             ref: listRef,
@@ -6645,6 +6665,7 @@ var import_vuu_layout12 = require("@vuu-ui/vuu-layout");
 var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var LayoutManagementContext = import_react55.default.createContext({
+  getApplicationSettings: () => void 0,
   layoutMetadata: [],
   saveLayout: () => void 0,
   // The default Application JSON will be served if no LayoutManagementProvider