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

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

@@ -2,67 +2,73 @@ 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'
+  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
-        }
+ */
+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: {
-        [`[${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'
-        }
+    ':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
     },
-    disabled: {
-        color: tokens.colorNeutralForegroundDisabled,
-        ':hover': {
-            backgroundColor: tokens.colorTransparentBackground,
-            color: tokens.colorNeutralForegroundDisabled
-        },
-        ':active': {
-            backgroundColor: tokens.colorTransparentBackground,
-            color: tokens.colorNeutralForegroundDisabled
-        },
-        '@media (forced-colors: active)': {
-            color: 'GrayText'
-        }
+    '@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;
+ */
+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;
 };
+//# sourceMappingURL=usePromptOptionStyles.styles.raw.js.map

package/lib/components/motion/PromptListboxMotion.js

@@ -1,55 +1,53 @@
 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,2 +1,3 @@
 // Brought from Fluent UI
-export { };
+export {};
+//# sourceMappingURL=OptionCollection.types.js.map

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

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

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

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

package/lib/components/utils/dropdownKeyActions.js

@@ -1,57 +1,68 @@
 /**
  * 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';
+ */
+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';
     }
-    // select or close actions
-    if (code === keys.ArrowUp && altKey || code === keys.Enter) {
-        return 'CloseSelect';
+    return 'Type';
+  }
+  if (code === keys.ArrowUp) {
+    if (atEnd && isInSelectionMode) {
+      return 'Previous';
+    } else if (atStart && !isInSelectionMode) {
+      return 'Next';
+    } else if (atStart && isInSelectionMode) {
+      return 'Previous';
     }
-    // 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';
+    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,26 +1,28 @@
 // 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,36 +2,38 @@
 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;
-        };
-        return {
-            getCount,
-            getOptionById,
-            getOptionsMatchingValue
-        };
-    }, []);
-    const registerOption = React.useCallback((option)=>{
-        optionsById.current.set(option.id, option);
-        return ()=>optionsById.current.delete(option.id);
-    }, []);
+ */
+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 {
-        ...collectionAPI,
-        options: Array.from(optionsById.current.values()),
-        registerOption
+      getCount,
+      getOptionById,
+      getOptionsMatchingValue
     };
+  }, []);
+  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