@fluentui-copilot/react-prompt-listbox 0.7.0 → 0.7.2-hotfix.1

package/lib/components/PromptOption/usePromptOption.js

@@ -11,91 +11,91 @@ import { useListboxContext_unstable } from '@fluentui/react-combobox';
  *
  * @param props - props from this instance of PromptOption
  * @param ref - reference to root HTMLElement of PromptOption
- */
-export const usePromptOption_unstable = (props, ref) => {
-  const {
-    controller: activeDescendantController
-  } = useActiveDescendantContext();
-  const {
-    children,
-    disabled,
-    text,
-    value
-  } = props;
-  const optionRef = React.useRef(null);
-  const optionText = getTextString(text, children);
-  const optionValue = value !== null && value !== void 0 ? value : optionText;
-  // use the id if provided, otherwise use a generated id
-  const id = useId('fluent-option', props.id);
-  // data used for context registration & events
-  const optionData = React.useMemo(() => ({
-    id,
-    disabled,
-    text: optionText,
-    value: optionValue
-  }), [id, disabled, optionText, optionValue]);
-  // context values
-  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);
-  const selected = useListboxContext_unstable(ctx => {
-    const selectedOptions = ctx.selectedOptions;
-    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;
-  });
-  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);
-  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);
-  const onClick = event => {
-    var _props_onClick;
-    if (disabled) {
-      event.preventDefault();
-      return;
-    }
-    activeDescendantController.focus(id);
-    // handle selection change
-    selectOption(event, optionData);
-    onOptionClick(event);
-    (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
-  };
-  // register option data with context
-  React.useEffect(() => {
-    if (id && optionRef.current) {
-      return registerOption(optionData, optionRef.current);
-    }
-  }, [id, optionData, registerOption]);
-  return {
-    components: {
-      root: 'div'
-    },
-    root: slot.always(getIntrinsicElementProps('div', {
-      ref: useMergedRefs(ref, optionRef),
-      'aria-disabled': disabled ? true : undefined,
-      id,
-      role: 'option',
-      ...props,
-      onClick
-    }), {
-      elementType: 'div'
-    }),
-    disabled,
-    selected
-  };
+ */ export const usePromptOption_unstable = (props, ref)=>{
+    const { controller: activeDescendantController } = useActiveDescendantContext();
+    const { children, disabled, text, value } = props;
+    const optionRef = React.useRef(null);
+    const optionText = getTextString(text, children);
+    const optionValue = value !== null && value !== void 0 ? value : optionText;
+    // use the id if provided, otherwise use a generated id
+    const id = useId('fluent-option', props.id);
+    // data used for context registration & events
+    const optionData = React.useMemo(()=>({
+            id,
+            disabled,
+            text: optionText,
+            value: optionValue
+        }), [
+        id,
+        disabled,
+        optionText,
+        optionValue
+    ]);
+    // context values
+    const registerOption = useListboxContext_unstable((ctx)=>ctx.registerOption);
+    const selected = useListboxContext_unstable((ctx)=>{
+        const selectedOptions = ctx.selectedOptions;
+        return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;
+    });
+    const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);
+    const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);
+    const onClick = (event)=>{
+        var _props_onClick;
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        activeDescendantController.focus(id);
+        // handle selection change
+        selectOption(event, optionData);
+        onOptionClick(event);
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+    };
+    // register option data with context
+    React.useEffect(()=>{
+        if (id && optionRef.current) {
+            return registerOption(optionData, optionRef.current);
+        }
+    }, [
+        id,
+        optionData,
+        registerOption
+    ]);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(ref, optionRef),
+            'aria-disabled': disabled ? true : undefined,
+            id,
+            role: 'option',
+            ...props,
+            onClick
+        }), {
+            elementType: 'div'
+        }),
+        disabled,
+        selected
+    };
 };
 function getTextString(text, children) {
-  if (text !== undefined) {
-    return text;
-  }
-  let textString = '';
-  let hasNonStringChild = false;
-  React.Children.forEach(children, child => {
-    if (typeof child === 'string') {
-      textString += child;
-    } else {
-      hasNonStringChild = true;
+    if (text !== undefined) {
+        return text;
+    }
+    let textString = '';
+    let hasNonStringChild = false;
+    React.Children.forEach(children, (child)=>{
+        if (typeof child === 'string') {
+            textString += child;
+        } else {
+            hasNonStringChild = true;
+        }
+    });
+    // warn if an Option has non-string children and no text prop
+    if (hasNonStringChild) {
+        // eslint-disable-next-line no-console
+        console.warn('Provide a `text` prop to Option components when they contain non-string children.');
     }
-  });
-  // warn if an Option has non-string children and no text prop
-  if (hasNonStringChild) {
-    // eslint-disable-next-line no-console
-    console.warn('Provide a `text` prop to Option components when they contain non-string children.');
-  }
-  return textString;
+    return textString;
 }
-//# sourceMappingURL=usePromptOption.js.map

package/lib/components/PromptOption/usePromptOptionStyles.styles.raw.js

@@ -0,0 +1,68 @@
+import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';
+import { tokens } from '@fluentui-copilot/tokens';
+import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
+export const promptOptionClassNames = {
+    root: 'fai-PromptOption'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        alignItems: 'center',
+        borderRadius: tokens.borderRadiusMedium,
+        color: tokens.colorNeutralForeground1,
+        columnGap: tokens.spacingHorizontalXS,
+        cursor: 'pointer',
+        display: 'flex',
+        fontFamily: tokens.fontFamilyBase,
+        fontSize: tokens.fontSizeBase300,
+        lineHeight: tokens.lineHeightBase300,
+        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,
+        position: 'relative',
+        ':hover': {
+            backgroundColor: tokens.colorNeutralBackground1Hover,
+            color: tokens.colorNeutralForeground1Hover
+        },
+        ':active': {
+            backgroundColor: tokens.colorNeutralBackground1Pressed,
+            color: tokens.colorNeutralForeground1Pressed
+        }
+    },
+    active: {
+        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {
+            content: '""',
+            position: 'absolute',
+            pointerEvents: 'none',
+            zIndex: 1,
+            ...shorthands.border(tokens.strokeWidthThick, `solid`, tokens.colorStrokeFocus2),
+            borderRadius: tokens.borderRadiusMedium,
+            top: '-2px',
+            bottom: '-2px',
+            left: '-2px',
+            right: '-2px'
+        }
+    },
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled,
+        ':hover': {
+            backgroundColor: tokens.colorTransparentBackground,
+            color: tokens.colorNeutralForegroundDisabled
+        },
+        ':active': {
+            backgroundColor: tokens.colorTransparentBackground,
+            color: tokens.colorNeutralForegroundDisabled
+        },
+        '@media (forced-colors: active)': {
+            color: 'GrayText'
+        }
+    }
+});
+/**
+ * Apply styling to the PromptOption slots based on the state
+ */ export const usePromptOptionStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled } = state;
+    const styles = useStyles();
+    state.root.className = mergeClasses(promptOptionClassNames.root, styles.root, styles.active, disabled && styles.disabled, state.root.className);
+    return state;
+};

package/lib/components/PromptOption/usePromptOptionStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePromptOptionStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@fluentui/react-components';\nimport { tokens } from '@fluentui-copilot/tokens';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport type { PromptOptionSlots, PromptOptionState } from './PromptOption.types';\nimport type { SlotClassNames } from '@fluentui/react-components';\n\nexport const promptOptionClassNames: SlotClassNames<PromptOptionSlots> = {\n  root: 'fai-PromptOption',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    borderRadius: tokens.borderRadiusMedium,\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXS,\n    cursor: 'pointer',\n    display: 'flex',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n    position: 'relative',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  active: {\n    [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.border(tokens.strokeWidthThick, `solid`, tokens.colorStrokeFocus2),\n      borderRadius: tokens.borderRadiusMedium,\n\n      top: '-2px',\n      bottom: '-2px',\n      left: '-2px',\n      right: '-2px',\n    },\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\n/**\n * Apply styling to the PromptOption slots based on the state\n */\nexport const usePromptOptionStyles_unstable = (state: PromptOptionState): PromptOptionState => {\n  'use no memo';\n\n  const { disabled } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    promptOptionClassNames.root,\n    styles.root,\n    styles.active,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","promptOptionClassNames","root","useStyles","alignItems","borderRadius","borderRadiusMedium","color","colorNeutralForeground1","columnGap","spacingHorizontalXS","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","padding","spacingVerticalSNudge","spacingHorizontalS","position","backgroundColor","colorNeutralBackground1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralForeground1Pressed","active","content","pointerEvents","zIndex","border","strokeWidthThick","colorStrokeFocus2","top","bottom","left","right","disabled","colorNeutralForegroundDisabled","colorTransparentBackground","usePromptOptionStyles_unstable","state","styles","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,6BAA6B;AAClF,SAASC,MAAM,QAAQ,2BAA2B;AAClD,SAASC,uCAAuC,QAAQ,uBAAuB;AAI/E,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,YAAY;QACZC,cAAcN,OAAOO,kBAAkB;QACvCC,OAAOR,OAAOS,uBAAuB;QACrCC,WAAWV,OAAOW,mBAAmB;QACrCC,QAAQ;QACRC,SAAS;QACTC,YAAYd,OAAOe,cAAc;QACjCC,UAAUhB,OAAOiB,eAAe;QAChCC,YAAYlB,OAAOmB,iBAAiB;QACpCC,SAAS,CAAC,EAAEpB,OAAOqB,qBAAqB,CAAC,CAAC,EAAErB,OAAOsB,kBAAkB,CAAC,CAAC;QACvEC,UAAU;QAEV,UAAU;YACRC,iBAAiBxB,OAAOyB,4BAA4B;YACpDjB,OAAOR,OAAO0B,4BAA4B;QAC5C;QAEA,WAAW;YACTF,iBAAiBxB,OAAO2B,8BAA8B;YACtDnB,OAAOR,OAAO4B,8BAA8B;QAC9C;IACF;IAEAC,QAAQ;QACN,CAAC,CAAC,CAAC,EAAE5B,wCAAwC,QAAQ,CAAC,CAAC,EAAE;YACvD6B,SAAS;YACTP,UAAU;YACVQ,eAAe;YACfC,QAAQ;YAER,GAAGjC,WAAWkC,MAAM,CAACjC,OAAOkC,gBAAgB,EAAE,CAAC,KAAK,CAAC,EAAElC,OAAOmC,iBAAiB,CAAC;YAChF7B,cAAcN,OAAOO,kBAAkB;YAEvC6B,KAAK;YACLC,QAAQ;YACRC,MAAM;YACNC,OAAO;QACT;IACF;IAEAC,UAAU;QACRhC,OAAOR,OAAOyC,8BAA8B;QAE5C,UAAU;YACRjB,iBAAiBxB,OAAO0C,0BAA0B;YAClDlC,OAAOR,OAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTjB,iBAAiBxB,OAAO0C,0BAA0B;YAClDlC,OAAOR,OAAOyC,8BAA8B;QAC9C;QAEA,kCAAkC;YAChCjC,OAAO;QACT;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMmC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASzC;IACfwC,MAAMzC,IAAI,CAAC2C,SAAS,GAAGhD,aACrBI,uBAAuBC,IAAI,EAC3B0C,OAAO1C,IAAI,EACX0C,OAAOhB,MAAM,EACbW,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMzC,IAAI,CAAC2C,SAAS;IAGtB,OAAOF;AACT,EAAE"}

package/lib/components/motion/PromptListboxMotion.js

@@ -1,53 +1,55 @@
 import { createPresenceComponent, motionTokens } from '@fluentui/react-components';
-const collapseMotion = ({
-  element
-}) => {
-  const fromOpacity = 0;
-  const toOpacity = 1;
-  const fromHeight = '0';
-  const toHeight = `${element.scrollHeight}px`;
-  const overflow = 'hidden';
-  const duration = motionTokens.durationNormal;
-  const easing = motionTokens.curveEasyEaseMax;
-  const enterKeyframes = [{
-    opacity: fromOpacity,
-    maxHeight: fromHeight,
-    overflow
-  },
-  // Transition to the height of the content, at 99.99% of the duration.
-  {
-    opacity: toOpacity,
-    maxHeight: toHeight,
-    offset: 0.9999,
-    overflow
-  },
-  // On completion, remove the maxHeight because the content might need to expand later.
-  {
-    opacity: toOpacity,
-    maxHeight: 'unset',
-    overflow
-  }];
-  const exitKeyframes = [{
-    opacity: toOpacity,
-    maxHeight: toHeight,
-    overflow
-  }, {
-    opacity: fromOpacity,
-    maxHeight: fromHeight,
-    overflow
-  }];
-  return {
-    enter: {
-      duration,
-      easing,
-      keyframes: enterKeyframes
-    },
-    exit: {
-      duration,
-      easing,
-      keyframes: exitKeyframes
-    }
-  };
+const collapseMotion = ({ element })=>{
+    const fromOpacity = 0;
+    const toOpacity = 1;
+    const fromHeight = '0';
+    const toHeight = `${element.scrollHeight}px`;
+    const overflow = 'hidden';
+    const duration = motionTokens.durationNormal;
+    const easing = motionTokens.curveEasyEaseMax;
+    const enterKeyframes = [
+        {
+            opacity: fromOpacity,
+            maxHeight: fromHeight,
+            overflow
+        },
+        // Transition to the height of the content, at 99.99% of the duration.
+        {
+            opacity: toOpacity,
+            maxHeight: toHeight,
+            offset: 0.9999,
+            overflow
+        },
+        // On completion, remove the maxHeight because the content might need to expand later.
+        {
+            opacity: toOpacity,
+            maxHeight: 'unset',
+            overflow
+        }
+    ];
+    const exitKeyframes = [
+        {
+            opacity: toOpacity,
+            maxHeight: toHeight,
+            overflow
+        },
+        {
+            opacity: fromOpacity,
+            maxHeight: fromHeight,
+            overflow
+        }
+    ];
+    return {
+        enter: {
+            duration,
+            easing,
+            keyframes: enterKeyframes
+        },
+        exit: {
+            duration,
+            easing,
+            keyframes: exitKeyframes
+        }
+    };
 };
 export const PromptListboxMotion = createPresenceComponent(collapseMotion);
-//# sourceMappingURL=PromptListboxMotion.js.map

package/lib/components/utils/OptionCollection.types.js

@@ -1,3 +1,2 @@
 // Brought from Fluent UI
-export {};
-//# sourceMappingURL=OptionCollection.types.js.map
+export { };

package/lib/components/utils/PromptListboxFunctionality.types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=PromptListboxFunctionality.types.js.map
+export { };

package/lib/components/utils/PromptListboxFunctionality.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PromptListboxFunctionality.types.ts"],"sourcesContent":["import type React from 'react';\nimport type { PromptListboxProps } from '../../components/PromptListbox';\nimport type { PositioningShorthand } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\n\n// Note: While we are removing multiselect, we are keeping the logic and disabling it\n// in case it's needed in the future.\nexport type ProcessedPromptListboxProps = Partial<\n  Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>\n> & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref?: React.MutableRefObject<any>;\n};\n\nexport type UsePromptListboxFunctionality = {\n  /**\n   * Component to be rendered in the Input component. This should be passed to the listbox prop.\n   */\n  promptListbox: JSX.Element;\n  /**\n   * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n   * work correctly.\n   */\n  triggerProps: {\n    ref: React.RefObject<HTMLSpanElement>;\n    /**\n     * Whether the listbox is being used to go through options or the user is currently typing.\n     */\n    isInSelectionMode: boolean;\n  } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n  /**\n   * Ref used to point which element the listbox should be anchored to. Most use cases\n   * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n   * this is provided directly to the component and not the slot).\n   *\n   * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n   * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  containerRef: React.MutableRefObject<any>;\n  /**\n   * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n   * keyboard behavior. This should be passed as children in the PromptInput.\n   */\n  cursorPositionPlugin: JSX.Element;\n};\n\nexport type UsePromptListboxFunctionalityParams = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: EventHandler<OnOpenChangeData>;\n  positioning?: PositioningShorthand;\n\n  /**\n   * Callback to call when the selection mode (selecting an action vs typing) changes.\n   */\n  onSelectionModeChange?: (isInSelectionMode: boolean) => void;\n\n  /**\n   * Props to be passed to the ListboxComponent\n   */\n  listboxProps?: ProcessedPromptListboxProps;\n\n  /**\n   * Whether the listbox's width should take all the available space or only\n   * the required space.\n   *\n   * @default false\n   */\n  fluid?: boolean;\n\n  /**\n   * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n   * Note, this prop is meant to be used with the following positioning props:\n   * ```ts\n   *  usePromptListboxFunctionality({\n   *    positioning: {\n   *      position: 'above',\n   *      fallbackPositions: ['above']\n   *    }\n   *  });\n   * ```\n   * This is useful when using PromptListbox with other components such as ChatInput since\n   * the input will always stay at the bottom therefore the listbox would always get cut.\n   *\n   * @default false\n   */\n  allowArrowUpNavigation?: boolean;\n};\n\nexport type OnOpenChangeData = (\n  | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n  | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n  | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n  open: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA2FA,WAME"}
+{"version":3,"sources":["PromptListboxFunctionality.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PromptListboxProps } from '../../components/PromptListbox';\nimport type { PositioningShorthand } from '@fluentui/react-components';\nimport type { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { EditorInputProps } from '@fluentui-copilot/react-editor-input';\n\n// Note: While we are removing multiselect, we are keeping the logic and disabling it\n// in case it's needed in the future.\nexport type ProcessedPromptListboxProps = Partial<\n  Omit<PromptListboxProps, 'activeDescendantController' | 'multiselect'>\n> & {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ref?: React.MutableRefObject<any>;\n};\n\nexport type UsePromptListboxFunctionality = {\n  /**\n   * Component to be rendered in the Input component. This should be passed to the listbox prop.\n   */\n  promptListbox: JSX.Element;\n  /**\n   * Props to be spread in the PromptInput, these props are needed for the keyboard behavior to\n   * work correctly.\n   */\n  triggerProps: {\n    ref: React.RefObject<HTMLSpanElement>;\n    /**\n     * Whether the listbox is being used to go through options or the user is currently typing.\n     */\n    isInSelectionMode: boolean;\n  } & Required<Pick<EditorInputProps, 'onBlur' | 'onFocus' | 'onKeyDown'>>;\n  /**\n   * Ref used to point which element the listbox should be anchored to. Most use cases\n   * will provide this prop to the PromptInput's EditorInput (since this is the root slot,\n   * this is provided directly to the component and not the slot).\n   *\n   * Note: If the containerRef is the same as the trigger, the ref provided in triggerProps needs\n   * to be merged with this one using `useMergedRefs(containerRef, triggerProps.ref);`\n   */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  containerRef: React.MutableRefObject<any>;\n  /**\n   * Plugin used to tell where the cursor is in the EditorInput, this is important for the\n   * keyboard behavior. This should be passed as children in the PromptInput.\n   */\n  cursorPositionPlugin: JSX.Element;\n};\n\nexport type UsePromptListboxFunctionalityParams = {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: EventHandler<OnOpenChangeData>;\n  positioning?: PositioningShorthand;\n\n  /**\n   * Callback to call when the selection mode (selecting an action vs typing) changes.\n   */\n  onSelectionModeChange?: (isInSelectionMode: boolean) => void;\n\n  /**\n   * Props to be passed to the ListboxComponent\n   */\n  listboxProps?: ProcessedPromptListboxProps;\n\n  /**\n   * Whether the listbox's width should take all the available space or only\n   * the required space.\n   *\n   * @default false\n   */\n  fluid?: boolean;\n\n  /**\n   * Whether to allow reaching the listbox options by arrowing up at the start of the input.\n   * Note, this prop is meant to be used with the following positioning props:\n   * ```ts\n   *  usePromptListboxFunctionality({\n   *    positioning: {\n   *      position: 'above',\n   *      fallbackPositions: ['above']\n   *    }\n   *  });\n   * ```\n   * This is useful when using PromptListbox with other components such as ChatInput since\n   * the input will always stay at the bottom therefore the listbox would always get cut.\n   *\n   * @default false\n   */\n  allowArrowUpNavigation?: boolean;\n};\n\nexport type OnOpenChangeData = (\n  | EventData<'click', React.MouseEvent<HTMLSpanElement>>\n  | EventData<'focus', React.FocusEvent<HTMLSpanElement>>\n  | EventData<'keyboard', React.KeyboardEvent<HTMLSpanElement>>\n) & {\n  open: boolean;\n};\n"],"names":[],"rangeMappings":"","mappings":"AA2FA,WAME"}

package/lib/components/utils/Selection.types.js

@@ -1,3 +1,2 @@
 // Brought from Fluent UI
-/** Possible event types for onOptionSelect */export {};
-//# sourceMappingURL=Selection.types.js.map
+/** Possible event types for onOptionSelect */ export { };

package/lib/components/utils/dropdownKeyActions.js

@@ -1,68 +1,57 @@
 /**
  * Note, this is mainly brought from Fluent UI, only removed the closing and
  * opening logic since that's not needed for this use case.
- */import * as keys from '@fluentui/keyboard-keys';
+ */ import * as keys from '@fluentui/keyboard-keys';
 /**
  * Converts a keyboard interaction into a defined action
- */
-export function getDropdownActionFromKey(e, options) {
-  const {
-    cursorPosition,
-    allowArrowUpNavigation,
-    isInSelectionMode
-  } = options;
-  const code = e.key;
-  const {
-    altKey,
-    ctrlKey,
-    key,
-    metaKey
-  } = e;
-  // typing action occurs whether open or closed
-  if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {
-    return 'Type';
-  }
-  // select or close actions
-  if (code === keys.ArrowUp && altKey || code === keys.Enter) {
-    return 'CloseSelect';
-  }
-  // navigation interactions
-  const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
-  const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
-  if (code === keys.ArrowDown) {
-    if (atEnd) {
-      return 'Next';
-    } else if (atStart && isInSelectionMode) {
-      return 'Next';
+ */ export function getDropdownActionFromKey(e, options) {
+    const { cursorPosition, allowArrowUpNavigation, isInSelectionMode } = options;
+    const code = e.key;
+    const { altKey, ctrlKey, key, metaKey } = e;
+    // typing action occurs whether open or closed
+    if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {
+        return 'Type';
     }
-    return 'Type';
-  }
-  if (code === keys.ArrowUp) {
-    if (atEnd && isInSelectionMode) {
-      return 'Previous';
-    } else if (atStart && !isInSelectionMode) {
-      return 'Next';
-    } else if (atStart && isInSelectionMode) {
-      return 'Previous';
+    // select or close actions
+    if (code === keys.ArrowUp && altKey || code === keys.Enter) {
+        return 'CloseSelect';
     }
-    return 'Type';
-  }
-  if (code === keys.Home) {
-    return atEnd || atStart ? 'First' : 'Type';
-  }
-  if (code === keys.End) {
-    return atEnd || atStart ? 'Last' : 'Type';
-  }
-  if (code === keys.PageUp) {
-    return 'PageUp';
-  }
-  if (code === keys.PageDown) {
-    return 'PageDown';
-  }
-  if (code === keys.Tab) {
-    return 'Tab';
-  }
-  // if nothing matched, return none
-  return 'None';
+    // navigation interactions
+    const atStart = allowArrowUpNavigation && (cursorPosition === 'start' || cursorPosition === 'start-end');
+    const atEnd = cursorPosition === 'end' || cursorPosition === 'start-end';
+    if (code === keys.ArrowDown) {
+        if (atEnd) {
+            return 'Next';
+        } else if (atStart && isInSelectionMode) {
+            return 'Next';
+        }
+        return 'Type';
+    }
+    if (code === keys.ArrowUp) {
+        if (atEnd && isInSelectionMode) {
+            return 'Previous';
+        } else if (atStart && !isInSelectionMode) {
+            return 'Next';
+        } else if (atStart && isInSelectionMode) {
+            return 'Previous';
+        }
+        return 'Type';
+    }
+    if (code === keys.Home) {
+        return atEnd || atStart ? 'First' : 'Type';
+    }
+    if (code === keys.End) {
+        return atEnd || atStart ? 'Last' : 'Type';
+    }
+    if (code === keys.PageUp) {
+        return 'PageUp';
+    }
+    if (code === keys.PageDown) {
+        return 'PageDown';
+    }
+    if (code === keys.Tab) {
+        return 'Tab';
+    }
+    // if nothing matched, return none
+    return 'None';
 }
-//# sourceMappingURL=dropdownKeyActions.js.map

package/lib/components/utils/useListboxPositioning.js

@@ -1,28 +1,26 @@
 // Brought from Fluent UI
 import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
 export function useListboxPositioning(props) {
-  const {
-    positioning,
-    fluid
-  } = props;
-  const fallbackPositions = ['below'];
-  // popper options
-  const popperOptions = {
-    position: 'below',
-    align: 'start',
-    offset: {
-      crossAxis: 0,
-      mainAxis: 2
-    },
-    fallbackPositions: fallbackPositions,
-    matchTargetSize: fluid ? 'width' : undefined,
-    autoSize: true,
-    ...resolvePositioningShorthand(positioning)
-  };
-  const {
-    containerRef: listboxRef,
-    targetRef: anchorRef
-  } = usePositioning(popperOptions);
-  return [listboxRef, anchorRef];
+    const { positioning, fluid } = props;
+    const fallbackPositions = [
+        'below'
+    ];
+    // popper options
+    const popperOptions = {
+        position: 'below',
+        align: 'start',
+        offset: {
+            crossAxis: 0,
+            mainAxis: 2
+        },
+        fallbackPositions: fallbackPositions,
+        matchTargetSize: fluid ? 'width' : undefined,
+        autoSize: true,
+        ...resolvePositioningShorthand(positioning)
+    };
+    const { containerRef: listboxRef, targetRef: anchorRef } = usePositioning(popperOptions);
+    return [
+        listboxRef,
+        anchorRef
+    ];
 }
-//# sourceMappingURL=useListboxPositioning.js.map

package/lib/components/utils/useOptionCollection.js

@@ -2,38 +2,36 @@
 import * as React from 'react';
 /**
  * A hook for managing a collection of child Options
- */
-export const useOptionCollection = () => {
-  const optionsById = React.useRef(new Map());
-  const collectionAPI = React.useMemo(() => {
-    const getCount = () => optionsById.current.size;
-    // index searches are no longer used
-    const getOptionById = id => {
-      return optionsById.current.get(id);
-    };
-    const getOptionsMatchingValue = matcher => {
-      const matches = [];
-      for (const option of optionsById.current.values()) {
-        if (matcher(option.value)) {
-          matches.push(option);
-        }
-      }
-      return matches;
-    };
+ */ export const useOptionCollection = ()=>{
+    const optionsById = React.useRef(new Map());
+    const collectionAPI = React.useMemo(()=>{
+        const getCount = ()=>optionsById.current.size;
+        // index searches are no longer used
+        const getOptionById = (id)=>{
+            return optionsById.current.get(id);
+        };
+        const getOptionsMatchingValue = (matcher)=>{
+            const matches = [];
+            for (const option of optionsById.current.values()){
+                if (matcher(option.value)) {
+                    matches.push(option);
+                }
+            }
+            return matches;
+        };
+        return {
+            getCount,
+            getOptionById,
+            getOptionsMatchingValue
+        };
+    }, []);
+    const registerOption = React.useCallback((option)=>{
+        optionsById.current.set(option.id, option);
+        return ()=>optionsById.current.delete(option.id);
+    }, []);
     return {
-      getCount,
-      getOptionById,
-      getOptionsMatchingValue
+        ...collectionAPI,
+        options: Array.from(optionsById.current.values()),
+        registerOption
     };
-  }, []);
-  const registerOption = React.useCallback(option => {
-    optionsById.current.set(option.id, option);
-    return () => optionsById.current.delete(option.id);
-  }, []);
-  return {
-    ...collectionAPI,
-    options: Array.from(optionsById.current.values()),
-    registerOption
-  };
 };
-//# sourceMappingURL=useOptionCollection.js.map