feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-combobox/lib/hooks/useComboboxFilter.js

@@ -0,0 +1,48 @@
+'use client';
+import * as React from 'react';
+import { Option } from '../Option';
+function defaultFilter(optionText, query) {
+    if (query === '') {
+        return true;
+    }
+    return optionText.toLowerCase().includes(query.toLowerCase());
+}
+function defaultToString(option) {
+    return typeof option === 'string' ? option : option.value;
+}
+/**
+ * @internal
+ */ export function useComboboxFilter(query, options, config) {
+    const { filter = defaultFilter, noOptionsMessage = "We couldn't find any matches.", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{
+        if (typeof option === 'string') {
+            return /*#__PURE__*/ React.createElement(Option, {
+                key: option
+            }, option);
+        }
+        return /*#__PURE__*/ React.createElement(Option, {
+            ...option,
+            key: optionToReactKey(option),
+            text: optionToText(option),
+            value: option.value
+        }, option.children);
+    } } = config;
+    const filteredOptions = React.useMemo(()=>{
+        const searchValue = query.trim();
+        return options.filter((option)=>filter(optionToText(option), searchValue));
+    }, [
+        options,
+        optionToText,
+        filter,
+        query
+    ]);
+    if (filteredOptions.length === 0) {
+        return [
+            /*#__PURE__*/ React.createElement(Option, {
+                "aria-disabled": "true",
+                key: "no-results",
+                text: ""
+            }, noOptionsMessage)
+        ];
+    }
+    return filteredOptions.map((option)=>renderOption(option));
+}

node_modules/@fluentui/react-combobox/lib/hooks/useComboboxFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Option } from '../Option';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n  /** Provides a custom filter for the option. */\n  filter?: (optionText: string, query: string) => boolean;\n\n  /** Provides a custom message to display when there are no options. */\n  noOptionsMessage?: React.ReactNode;\n\n  /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n  optionToReactKey?: (option: T) => string;\n\n  /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n  optionToText?: (option: T) => string;\n\n  /** Provides a custom render for the option. */\n  renderOption?: (option: T) => JSXElement;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n  if (query === '') {\n    return true;\n  }\n\n  return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n  return typeof option === 'string' ? option : option.value;\n}\n\n/**\n * @internal\n */\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n  query: string,\n  options: T[],\n  config: UseComboboxFilterConfig<T>,\n): JSXElement[] {\n  const {\n    filter = defaultFilter,\n    noOptionsMessage = \"We couldn't find any matches.\",\n    optionToReactKey = defaultToString,\n    optionToText = defaultToString,\n\n    renderOption = (option: T) => {\n      if (typeof option === 'string') {\n        return <Option key={option}>{option}</Option>;\n      }\n\n      return (\n        <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n          {option.children}\n        </Option>\n      );\n    },\n  } = config;\n\n  const filteredOptions = React.useMemo(() => {\n    const searchValue = query.trim();\n\n    return options.filter(option => filter(optionToText(option), searchValue));\n  }, [options, optionToText, filter, query]);\n\n  if (filteredOptions.length === 0) {\n    return [\n      <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n        {noOptionsMessage}\n      </Option>,\n    ];\n  }\n\n  return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,YAAY;AAoBnC,SAASC,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAEA;;CAEC,GACD,OAAO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,qBAAO,oBAACP;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,qBACE,oBAACP;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,MAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,oBAACxB;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}