@fluentui-copilot/react-prompt-listbox 0.8.1-hotfix.1 → 0.8.1-hotfix.2

package/lib/components/utils/usePromptListboxFunctionality.js

@@ -11,131 +11,133 @@ import { promptOptionClassNames } from '../PromptOption';
 import { PromptListboxMotion } from '../motion/PromptListboxMotion';
 /**
  * @deprecated -- use usePromptListboxFunctionality from usePromptListboxFunctionalityV2.tsx instead
- */ export function usePromptListboxFunctionality(params) {
-    const { positioning, onOpenChange, onSelectionModeChange, listboxProps, fluid = false, allowArrowUpNavigation = false } = params;
-    const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
-        matchOption: (el)=>el.classList.contains(promptOptionClassNames.root)
+ */
+export function usePromptListboxFunctionality(params) {
+  const {
+    positioning,
+    onOpenChange,
+    onSelectionModeChange,
+    listboxProps,
+    fluid = false,
+    allowArrowUpNavigation = false
+  } = params;
+  const {
+    listboxRef: activeDescendantListboxRef,
+    activeParentRef,
+    controller: activeDescendantController
+  } = useActiveDescendant({
+    matchOption: el => el.classList.contains(promptOptionClassNames.root)
+  });
+  // useMergedRefs to normalize the ref into a React.RefObject type
+  const triggerRef = useMergedRefs(activeParentRef);
+  const selectionState = useSelection(listboxProps !== null && listboxProps !== void 0 ? listboxProps : {});
+  const {
+    selectOption
+  } = selectionState;
+  const optionCollection = useOptionCollection();
+  const {
+    getOptionById
+  } = optionCollection;
+  const [cursorPosition, setCursorPosition] = React.useState('end');
+  const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
+  const [open, setOpen] = useControllableState({
+    state: params.open,
+    defaultState: params.defaultOpen,
+    initialState: false
+  });
+  const setSelectionMode = React.useCallback(selectionMode => {
+    if (selectionMode === false) {
+      activeDescendantController.blur();
+      setHideActiveDescendant(true);
+    } else {
+      setHideActiveDescendant(false);
+    }
+    setIsInSelectionMode(selectionMode);
+    onSelectionModeChange === null || onSelectionModeChange === void 0 ? void 0 : onSelectionModeChange(selectionMode);
+  }, [activeDescendantController, onSelectionModeChange]);
+  const onBlur = event => {
+    setOpen(false);
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
+      event,
+      type: 'focus',
+      open: false
     });
-    // useMergedRefs to normalize the ref into a React.RefObject type
-    const triggerRef = useMergedRefs(activeParentRef);
-    const selectionState = useSelection(listboxProps !== null && listboxProps !== void 0 ? listboxProps : {});
-    const { selectOption } = selectionState;
-    const optionCollection = useOptionCollection();
-    const { getOptionById } = optionCollection;
-    const [cursorPosition, setCursorPosition] = React.useState('end');
-    const [isInSelectionMode, setIsInSelectionMode] = React.useState(false);
-    const [open, setOpen] = useControllableState({
-        state: params.open,
-        defaultState: params.defaultOpen,
-        initialState: false
-    });
-    const setSelectionMode = React.useCallback((selectionMode)=>{
-        if (selectionMode === false) {
-            activeDescendantController.blur();
-            setHideActiveDescendant(true);
-        } else {
-            setHideActiveDescendant(false);
-        }
-        setIsInSelectionMode(selectionMode);
-        onSelectionModeChange === null || onSelectionModeChange === void 0 ? void 0 : onSelectionModeChange(selectionMode);
-    }, [
-        activeDescendantController,
-        onSelectionModeChange
-    ]);
-    const onBlur = (event)=>{
-        setOpen(false);
-        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
-            event,
-            type: 'focus',
-            open: false
-        });
-        setSelectionMode(false);
-    };
-    const onFocus = (event)=>{
-        if (event.target === event.currentTarget) {
-            setOpen(true);
-            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
-                event,
-                type: 'focus',
-                open: true
-            });
-        }
-    };
-    const cursorPositionPlugin = /*#__PURE__*/ React.createElement(CursorPositionPlugin, {
-        setCursorPosition: setCursorPosition
-    });
-    const onListboxBlur = React.useCallback(()=>{
-        setSelectionMode(false);
-        onSelectionModeChange === null || onSelectionModeChange === void 0 ? void 0 : onSelectionModeChange(false);
-    }, [
-        onSelectionModeChange,
-        setSelectionMode
-    ]);
-    // handle combobox keyboard interaction
-    const onKeyDown = useTriggerKeydown({
-        ...optionCollection,
-        allowArrowUpNavigation,
-        activeDescendantController,
-        getOptionById,
-        onBlur: onListboxBlur,
-        selectOption,
-        cursorPosition,
-        open,
-        multiselect: false,
-        isInSelectionMode,
-        setSelectionMode
-    });
-    // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
-    // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
-    // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
-    const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
-    React.useEffect(()=>{
-        if (hideActiveDescendant) {
-            var _triggerRef_current;
-            (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.removeAttribute('aria-activedescendant');
-        }
+    setSelectionMode(false);
+  };
+  const onFocus = event => {
+    if (event.target === event.currentTarget) {
+      setOpen(true);
+      onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(event, {
+        event,
+        type: 'focus',
+        open: true
+      });
+    }
+  };
+  const cursorPositionPlugin = /*#__PURE__*/React.createElement(CursorPositionPlugin, {
+    setCursorPosition: setCursorPosition
+  });
+  const onListboxBlur = React.useCallback(() => {
+    setSelectionMode(false);
+    onSelectionModeChange === null || onSelectionModeChange === void 0 ? void 0 : onSelectionModeChange(false);
+  }, [onSelectionModeChange, setSelectionMode]);
+  // handle combobox keyboard interaction
+  const onKeyDown = useTriggerKeydown({
+    ...optionCollection,
+    allowArrowUpNavigation,
+    activeDescendantController,
+    getOptionById,
+    onBlur: onListboxBlur,
+    selectOption,
+    cursorPosition,
+    open,
+    multiselect: false,
+    isInSelectionMode,
+    setSelectionMode
+  });
+  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
+  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
+  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
+  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);
+  React.useEffect(() => {
+    if (hideActiveDescendant) {
+      var _triggerRef_current;
+      (_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.removeAttribute('aria-activedescendant');
+    }
     // We only want to run this when the hideActiveDescendant changes, if the triggerRef
     // is undefined, there's no need to remove theAttribute and we shouldn't be adding
     // refs as dependencies since it can blow up the number of runs.
     // eslint-disable-next-line react-compiler/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        hideActiveDescendant
-    ]);
-    const [comboboxPopupRef, comboboxTargetRef] = useListboxPositioning({
-        positioning,
-        fluid
-    });
-    const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.ref);
-    const listbox = React.useMemo(()=>{
-        return /*#__PURE__*/ React.createElement(PromptListboxMotion, {
-            visible: open
-        }, /*#__PURE__*/ React.createElement(PromptListbox, {
-            open: open,
-            ...listboxProps,
-            ...optionCollection,
-            ...selectionState,
-            ref: listboxMergedRef,
-            activeDescendantController: activeDescendantController
-        }));
-    }, [
-        activeDescendantController,
-        listboxMergedRef,
-        listboxProps,
-        open,
-        optionCollection,
-        selectionState
-    ]);
-    return {
-        promptListbox: listbox,
-        triggerProps: {
-            ref: triggerRef,
-            onBlur,
-            onFocus,
-            onKeyDown,
-            isInSelectionMode
-        },
-        containerRef: comboboxTargetRef,
-        cursorPositionPlugin
-    };
+  }, [hideActiveDescendant]);
+  const [comboboxPopupRef, comboboxTargetRef] = useListboxPositioning({
+    positioning,
+    fluid
+  });
+  const listboxMergedRef = useMergedRefs(comboboxPopupRef, activeDescendantListboxRef, listboxProps === null || listboxProps === void 0 ? void 0 : listboxProps.ref);
+  const listbox = React.useMemo(() => {
+    return /*#__PURE__*/React.createElement(PromptListboxMotion, {
+      visible: open
+    }, /*#__PURE__*/React.createElement(PromptListbox, {
+      open: open,
+      ...listboxProps,
+      ...optionCollection,
+      ...selectionState,
+      ref: listboxMergedRef,
+      activeDescendantController: activeDescendantController
+    }));
+  }, [activeDescendantController, listboxMergedRef, listboxProps, open, optionCollection, selectionState]);
+  return {
+    promptListbox: listbox,
+    triggerProps: {
+      ref: triggerRef,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      isInSelectionMode
+    },
+    containerRef: comboboxTargetRef,
+    cursorPositionPlugin
+  };
 }
+//# sourceMappingURL=usePromptListboxFunctionality.js.map

package/lib/components/utils/usePromptListboxFunctionalityV2.js

@@ -6,119 +6,134 @@ import { CursorPositionPlugin } from '../../plugins/CursorPositionPlugin';
 import { useListboxPositioning } from './useListboxPositioning';
 import { Portal } from '@fluentui/react-components';
 export function usePromptListboxFunctionality(params) {
-    var _params_listboxProps, _params_listboxProps1;
-    const { fluid = false, allowArrowUpNavigation = false, onSelectionModeChange } = params;
-    const [open, setOpen] = useControllableState({
-        state: params.open,
-        defaultState: params.defaultOpen,
-        initialState: false
+  var _params_listboxProps, _params_listboxProps1;
+  const {
+    fluid = false,
+    allowArrowUpNavigation = false,
+    onSelectionModeChange
+  } = params;
+  const [open, setOpen] = useControllableState({
+    state: params.open,
+    defaultState: params.defaultOpen,
+    initialState: false
+  });
+  const [cursorPosition, setCursorPosition] = React.useState('end');
+  const overrideActionHandler = (e, {
+    activeOption,
+    action,
+    activeDescendantController,
+    isInSelectionMode
+  }) => {
+    var _params_overrideActionHandler;
+    const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
+    const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
+    let newAction = undefined;
+    let newIsInSelection = undefined;
+    const firstOption = activeDescendantController.first({
+      passive: true
     });
-    const [cursorPosition, setCursorPosition] = React.useState('end');
-    const overrideActionHandler = (e, { activeOption, action, activeDescendantController, isInSelectionMode })=>{
-        var _params_overrideActionHandler;
-        const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
-        const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
-        let newAction = undefined;
-        let newIsInSelection = undefined;
-        const firstOption = activeDescendantController.first({
-            passive: true
-        });
-        switch(action){
-            case 'Next':
-                if (!isInSelectionMode && !atEnd) {
-                    newAction = 'Type';
-                    newIsInSelection = false;
-                }
-                break;
-            case 'Previous':
-                if (!isInSelectionMode && !atStart) {
-                    newAction = 'Type';
-                    newIsInSelection = false;
-                } else if (isInSelectionMode && !allowArrowUpNavigation && atEnd && activeOption !== undefined && activeOption.id === firstOption) {
-                    newAction = 'Type';
-                    newIsInSelection = false;
-                    e.preventDefault();
-                }
-                break;
-            case 'First':
-            case 'Last':
-            case 'PageDown':
-            case 'PageUp':
-                if (!isInSelectionMode) {
-                    newAction = 'Type';
-                    newIsInSelection = false;
-                }
-                break;
+    switch (action) {
+      case 'Next':
+        if (!isInSelectionMode && !atEnd) {
+          newAction = 'Type';
+          newIsInSelection = false;
         }
-        const userOverrides = (_params_overrideActionHandler = params.overrideActionHandler) === null || _params_overrideActionHandler === void 0 ? void 0 : _params_overrideActionHandler.call(params, e, {
-            activeOption,
-            action,
-            activeDescendantController,
-            isInSelectionMode
-        });
-        return {
-            action: newAction,
-            isInSelectionMode: newIsInSelection,
-            ...userOverrides
-        };
-    };
-    const baseListboxFunctionality = useInputListboxFunctionality({
-        ...params,
-        onSelectionModeChange,
-        overrideActionHandler
-    });
-    const { onBlur: baseOnBlur, onKeyDown: baseOnKeyDown, ref: triggerRef, isInSelectionMode } = baseListboxFunctionality.triggerProps;
-    const onFocus = (event)=>{
-        if (event.target === event.currentTarget) {
-            var _params_onOpenChange;
-            setOpen(true);
-            (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, event, {
-                event,
-                type: 'focus',
-                open: true
-            });
+        break;
+      case 'Previous':
+        if (!isInSelectionMode && !atStart) {
+          newAction = 'Type';
+          newIsInSelection = false;
+        } else if (isInSelectionMode && !allowArrowUpNavigation && atEnd && activeOption !== undefined && activeOption.id === firstOption) {
+          newAction = 'Type';
+          newIsInSelection = false;
+          e.preventDefault();
         }
-    };
-    const onBlur = useEventCallback(mergeCallbacks(baseOnBlur, (e)=>{
-        var _params_onOpenChange;
-        setOpen(false);
-        (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, e, {
-            event: e,
-            type: 'focus',
-            open: false
-        });
-    }));
-    const [listboxRef, anchorRef] = useListboxPositioning({
-        fluid,
-        positioning: params.positioning
-    });
-    const listboxId = useId('prompt-listbox', (_params_listboxProps = params.listboxProps) === null || _params_listboxProps === void 0 ? void 0 : _params_listboxProps.id);
-    const cursorPositionPlugin = /*#__PURE__*/ React.createElement(CursorPositionPlugin, {
-        setCursorPosition: setCursorPosition
-    });
-    const innerListbox = /*#__PURE__*/ React.createElement(InputListbox, {
-        ...params.listboxProps,
-        ...baseListboxFunctionality.inputListboxProps,
-        id: listboxId,
-        ref: useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, (_params_listboxProps1 = params.listboxProps) === null || _params_listboxProps1 === void 0 ? void 0 : _params_listboxProps1.ref)
+        break;
+      case 'First':
+      case 'Last':
+      case 'PageDown':
+      case 'PageUp':
+        if (!isInSelectionMode) {
+          newAction = 'Type';
+          newIsInSelection = false;
+        }
+        break;
+    }
+    const userOverrides = (_params_overrideActionHandler = params.overrideActionHandler) === null || _params_overrideActionHandler === void 0 ? void 0 : _params_overrideActionHandler.call(params, e, {
+      activeOption,
+      action,
+      activeDescendantController,
+      isInSelectionMode
     });
-    const listbox = /*#__PURE__*/ React.createElement(PromptListboxMotion, {
-        visible: open
-    }, /*#__PURE__*/ React.createElement("span", {
-        "aria-owns": open ? listboxId : undefined
-    }, open && (params.inline ? innerListbox : /*#__PURE__*/ React.createElement(Portal, {
-        mountNode: params.mountNode
-    }, innerListbox))));
     return {
-        promptListbox: listbox,
-        cursorPositionPlugin,
-        triggerProps: {
-            ref: triggerRef,
-            isInSelectionMode,
-            onFocus,
-            onKeyDown: baseOnKeyDown,
-            onBlur
-        },
-        containerRef: anchorRef
+      action: newAction,
+      isInSelectionMode: newIsInSelection,
+      ...userOverrides
     };
+  };
+  const baseListboxFunctionality = useInputListboxFunctionality({
+    ...params,
+    onSelectionModeChange,
+    overrideActionHandler
+  });
+  const {
+    onBlur: baseOnBlur,
+    onKeyDown: baseOnKeyDown,
+    ref: triggerRef,
+    isInSelectionMode
+  } = baseListboxFunctionality.triggerProps;
+  const onFocus = event => {
+    if (event.target === event.currentTarget) {
+      var _params_onOpenChange;
+      setOpen(true);
+      (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, event, {
+        event,
+        type: 'focus',
+        open: true
+      });
+    }
+  };
+  const onBlur = useEventCallback(mergeCallbacks(baseOnBlur, e => {
+    var _params_onOpenChange;
+    setOpen(false);
+    (_params_onOpenChange = params.onOpenChange) === null || _params_onOpenChange === void 0 ? void 0 : _params_onOpenChange.call(params, e, {
+      event: e,
+      type: 'focus',
+      open: false
+    });
+  }));
+  const [listboxRef, anchorRef] = useListboxPositioning({
+    fluid,
+    positioning: params.positioning
+  });
+  const listboxId = useId('prompt-listbox', (_params_listboxProps = params.listboxProps) === null || _params_listboxProps === void 0 ? void 0 : _params_listboxProps.id);
+  const cursorPositionPlugin = /*#__PURE__*/React.createElement(CursorPositionPlugin, {
+    setCursorPosition: setCursorPosition
+  });
+  const innerListbox = /*#__PURE__*/React.createElement(InputListbox, {
+    ...params.listboxProps,
+    ...baseListboxFunctionality.inputListboxProps,
+    id: listboxId,
+    ref: useMergedRefs(baseListboxFunctionality.inputListboxProps.ref, listboxRef, (_params_listboxProps1 = params.listboxProps) === null || _params_listboxProps1 === void 0 ? void 0 : _params_listboxProps1.ref)
+  });
+  const listbox = /*#__PURE__*/React.createElement(PromptListboxMotion, {
+    visible: open
+  }, /*#__PURE__*/React.createElement("span", {
+    "aria-owns": open ? listboxId : undefined
+  }, open && (params.inline ? innerListbox : /*#__PURE__*/React.createElement(Portal, {
+    mountNode: params.mountNode
+  }, innerListbox))));
+  return {
+    promptListbox: listbox,
+    cursorPositionPlugin,
+    triggerProps: {
+      ref: triggerRef,
+      isInSelectionMode,
+      onFocus,
+      onKeyDown: baseOnKeyDown,
+      onBlur
+    },
+    containerRef: anchorRef
+  };
 }
+//# sourceMappingURL=usePromptListboxFunctionalityV2.js.map

package/lib/components/utils/useSelection.js

@@ -1,62 +1,54 @@
 // Brought from Fluent UI
 import { useCallback } from 'react';
 import { useControllableState } from '@fluentui/react-utilities';
-export const useSelection = (props)=>{
-    const { defaultSelectedOptions, multiselect, onOptionSelect } = props;
-    const [selectedOptions, setSelectedOptions] = useControllableState({
-        state: props.selectedOptions,
-        defaultState: defaultSelectedOptions,
-        initialState: []
+export const useSelection = props => {
+  const {
+    defaultSelectedOptions,
+    multiselect,
+    onOptionSelect
+  } = props;
+  const [selectedOptions, setSelectedOptions] = useControllableState({
+    state: props.selectedOptions,
+    defaultState: defaultSelectedOptions,
+    initialState: []
+  });
+  const selectOption = useCallback((event, option) => {
+    // if the option is disabled, do nothing
+    if (option.disabled) {
+      return;
+    }
+    // for single-select, always return the selected option
+    let newSelection = [option.value];
+    // toggle selected state of the option for multiselect
+    if (multiselect) {
+      const selectedIndex = selectedOptions.findIndex(o => o === option.value);
+      if (selectedIndex > -1) {
+        // deselect option
+        newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];
+      } else {
+        // select option
+        newSelection = [...selectedOptions, option.value];
+      }
+    }
+    setSelectedOptions(newSelection);
+    onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
+      optionValue: option.value,
+      optionText: option.text,
+      selectedOptions: newSelection
     });
-    const selectOption = useCallback((event, option)=>{
-        // if the option is disabled, do nothing
-        if (option.disabled) {
-            return;
-        }
-        // for single-select, always return the selected option
-        let newSelection = [
-            option.value
-        ];
-        // toggle selected state of the option for multiselect
-        if (multiselect) {
-            const selectedIndex = selectedOptions.findIndex((o)=>o === option.value);
-            if (selectedIndex > -1) {
-                // deselect option
-                newSelection = [
-                    ...selectedOptions.slice(0, selectedIndex),
-                    ...selectedOptions.slice(selectedIndex + 1)
-                ];
-            } else {
-                // select option
-                newSelection = [
-                    ...selectedOptions,
-                    option.value
-                ];
-            }
-        }
-        setSelectedOptions(newSelection);
-        onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
-            optionValue: option.value,
-            optionText: option.text,
-            selectedOptions: newSelection
-        });
-    }, [
-        onOptionSelect,
-        multiselect,
-        selectedOptions,
-        setSelectedOptions
-    ]);
-    const clearSelection = (event)=>{
-        setSelectedOptions([]);
-        onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
-            optionValue: undefined,
-            optionText: undefined,
-            selectedOptions: []
-        });
-    };
-    return {
-        clearSelection,
-        selectOption,
-        selectedOptions
-    };
+  }, [onOptionSelect, multiselect, selectedOptions, setSelectedOptions]);
+  const clearSelection = event => {
+    setSelectedOptions([]);
+    onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect(event, {
+      optionValue: undefined,
+      optionText: undefined,
+      selectedOptions: []
+    });
+  };
+  return {
+    clearSelection,
+    selectOption,
+    selectedOptions
+  };
 };
+//# sourceMappingURL=useSelection.js.map