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

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/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