fluentui-extended 0.1.0

package/dist/index.mjs

@@ -0,0 +1,493 @@
+import * as React from 'react';
+import { makeStyles, tokens, shorthands, Input, Button, Spinner, mergeClasses } from '@fluentui/react-components';
+import { DismissRegular, ChevronDownRegular } from '@fluentui/react-icons';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Lookup/Lookup.tsx
+var useLookupStyles = makeStyles({
+  root: {
+    position: "relative",
+    display: "inline-flex",
+    flexDirection: "column",
+    width: "100%"
+  },
+  inputWrapper: {
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    width: "100%"
+  },
+  input: {
+    width: "100%"
+  },
+  iconContainer: {
+    display: "flex",
+    alignItems: "center",
+    gap: "2px"
+  },
+  iconButton: {
+    minWidth: "20px",
+    minHeight: "20px",
+    padding: "0"
+  },
+  chevronIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "20px",
+    height: "20px"
+  },
+  dropdown: {
+    position: "absolute",
+    top: "100%",
+    left: 0,
+    right: 0,
+    zIndex: 1e3,
+    marginTop: "4px",
+    backgroundColor: tokens.colorNeutralBackground1,
+    borderRadius: tokens.borderRadiusMedium,
+    boxShadow: tokens.shadow16,
+    ...shorthands.border("1px", "solid", tokens.colorNeutralStroke1),
+    maxHeight: "350px",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  },
+  optionsList: {
+    listStyle: "none",
+    margin: 0,
+    padding: "4px"
+  },
+  option: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start",
+    padding: "8px 12px",
+    cursor: "pointer",
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: "transparent",
+    border: "none",
+    width: "100%",
+    textAlign: "left",
+    gap: "8px",
+    "&:hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    },
+    "&:focus": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      outline: `2px solid ${tokens.colorBrandStroke1}`,
+      outlineOffset: "-2px"
+    }
+  },
+  optionIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "20px",
+    height: "20px",
+    flexShrink: 0,
+    color: tokens.colorNeutralForeground3
+  },
+  optionContent: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    minWidth: 0
+  },
+  optionExpandButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "24px",
+    height: "24px",
+    flexShrink: 0,
+    cursor: "pointer",
+    borderRadius: tokens.borderRadiusSmall,
+    backgroundColor: "transparent",
+    border: "none",
+    color: tokens.colorNeutralForeground3,
+    transition: "transform 0.2s ease",
+    "&:hover": {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1
+    }
+  },
+  optionExpandButtonExpanded: {
+    transform: "rotate(180deg)"
+  },
+  optionHighlighted: {
+    backgroundColor: tokens.colorNeutralBackground1Hover
+  },
+  optionSelected: {
+    backgroundColor: tokens.colorBrandBackground2,
+    "&:hover": {
+      backgroundColor: tokens.colorBrandBackground2Hover
+    }
+  },
+  optionDisabled: {
+    cursor: "not-allowed",
+    opacity: 0.5,
+    "&:hover": {
+      backgroundColor: "transparent"
+    }
+  },
+  optionText: {
+    fontSize: tokens.fontSizeBase300,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground1
+  },
+  optionSecondaryText: {
+    fontSize: tokens.fontSizeBase200,
+    fontWeight: tokens.fontWeightRegular,
+    color: tokens.colorNeutralForeground3,
+    marginTop: "2px"
+  },
+  optionDetails: {
+    display: "flex",
+    flexDirection: "column",
+    marginTop: "4px",
+    paddingTop: "4px",
+    borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+    gap: "2px"
+  },
+  optionDetailRow: {
+    display: "flex",
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground3,
+    gap: "4px"
+  },
+  optionDetailLabel: {
+    color: tokens.colorNeutralForeground4
+  },
+  optionDetailValue: {
+    color: tokens.colorNeutralForeground3
+  },
+  loadingContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "16px"
+  },
+  noResults: {
+    padding: "16px",
+    textAlign: "center",
+    color: tokens.colorNeutralForeground3,
+    fontSize: tokens.fontSizeBase300
+  },
+  headerWrapper: {
+    padding: "2px",
+    backgroundColor: tokens.colorNeutralBackground1
+  },
+  header: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    borderRadius: tokens.borderRadiusMedium,
+    padding: "4px 12px",
+    backgroundColor: tokens.colorNeutralBackground3,
+    backgroundImage: `repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 1px,
+      rgba(0, 0, 0, 0.02) 1px,
+      rgba(0, 0, 0, 0.02) 2px
+    )`,
+    gap: "8px"
+  },
+  footerWrapper: {
+    padding: "8px",
+    paddingTop: "0",
+    backgroundColor: tokens.colorNeutralBackground1
+  },
+  footer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "6px 12px",
+    borderTop: `1px solid ${tokens.colorNeutralStroke2}`,
+    backgroundColor: tokens.colorNeutralBackground1,
+    fontSize: tokens.fontSizeBase200,
+    color: tokens.colorNeutralForeground2,
+    gap: "8px"
+  },
+  optionsContainer: {
+    maxHeight: "250px",
+    overflowY: "auto",
+    overflowX: "hidden"
+  }
+});
+var Lookup = ({
+  options = [],
+  selectedKey,
+  selectedOption: selectedOptionProp,
+  onOptionSelect,
+  onSearchChange,
+  placeholder = "Search...",
+  loading = false,
+  noResultsMessage = "No results found",
+  clearable = true,
+  minSearchLength = 0,
+  searchDebounceMs = 300,
+  disabled,
+  header,
+  footer,
+  ...inputProps
+}) => {
+  const styles = useLookupStyles();
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [searchText, setSearchText] = React.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+  const [expandedKeys, setExpandedKeys] = React.useState(/* @__PURE__ */ new Set());
+  const [internalSelectedOption, setInternalSelectedOption] = React.useState(null);
+  const inputRef = React.useRef(null);
+  const dropdownRef = React.useRef(null);
+  const debounceRef = React.useRef();
+  const justSelectedRef = React.useRef(false);
+  const selectedOption = React.useMemo(
+    () => selectedOptionProp ?? options.find((opt) => opt.key === selectedKey) ?? internalSelectedOption,
+    [selectedOptionProp, options, selectedKey, internalSelectedOption]
+  );
+  const filteredOptions = React.useMemo(() => {
+    if (!searchText || searchText.length < minSearchLength) {
+      return options;
+    }
+    const lowerSearch = searchText.toLowerCase();
+    return options.filter(
+      (opt) => opt.text.toLowerCase().includes(lowerSearch) || opt.secondaryText?.toLowerCase().includes(lowerSearch)
+    );
+  }, [options, searchText, minSearchLength]);
+  const displayValue = React.useMemo(() => {
+    if (isOpen) {
+      return searchText;
+    }
+    return selectedOption?.text ?? "";
+  }, [isOpen, searchText, selectedOption]);
+  const handleSearchChange = React.useCallback(
+    (value) => {
+      setSearchText(value);
+      setHighlightedIndex(-1);
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      if (onSearchChange && value.length >= minSearchLength) {
+        debounceRef.current = setTimeout(() => {
+          onSearchChange(value);
+        }, searchDebounceMs);
+      }
+    },
+    [onSearchChange, minSearchLength, searchDebounceMs]
+  );
+  const handleInputChange = React.useCallback(
+    (e) => {
+      const value = e.target.value;
+      handleSearchChange(value);
+      if (!isOpen) {
+        setIsOpen(true);
+      }
+    },
+    [handleSearchChange, isOpen]
+  );
+  const handleSelectOption = React.useCallback(
+    (option) => {
+      if (option.disabled) return;
+      justSelectedRef.current = true;
+      setInternalSelectedOption(option);
+      onOptionSelect?.(option);
+      setSearchText("");
+      setIsOpen(false);
+      setHighlightedIndex(-1);
+      inputRef.current?.focus();
+    },
+    [onOptionSelect]
+  );
+  const handleClear = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      setInternalSelectedOption(null);
+      onOptionSelect?.(null);
+      setSearchText("");
+      setHighlightedIndex(-1);
+      inputRef.current?.focus();
+    },
+    [onOptionSelect]
+  );
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (disabled) return;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          if (!isOpen) {
+            setIsOpen(true);
+          } else {
+            setHighlightedIndex(
+              (prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0
+            );
+          }
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          if (isOpen) {
+            setHighlightedIndex(
+              (prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1
+            );
+          }
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+            handleSelectOption(filteredOptions[highlightedIndex]);
+          }
+          break;
+        case "Escape":
+          e.preventDefault();
+          setIsOpen(false);
+          setSearchText("");
+          setHighlightedIndex(-1);
+          break;
+        case "Tab":
+          setIsOpen(false);
+          setSearchText("");
+          break;
+      }
+    },
+    [disabled, isOpen, highlightedIndex, filteredOptions, handleSelectOption]
+  );
+  const handleFocus = React.useCallback(() => {
+    if (!disabled) {
+      if (justSelectedRef.current) {
+        justSelectedRef.current = false;
+        return;
+      }
+      setIsOpen(true);
+    }
+  }, [disabled]);
+  React.useEffect(() => {
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target) && inputRef.current && !inputRef.current.contains(target)) {
+        setIsOpen(false);
+        setSearchText("");
+        setHighlightedIndex(-1);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  React.useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+  React.useEffect(() => {
+    if (highlightedIndex >= 0 && dropdownRef.current) {
+      const option = dropdownRef.current.querySelector(
+        `[data-index="${highlightedIndex}"]`
+      );
+      option?.scrollIntoView({ block: "nearest" });
+    }
+  }, [highlightedIndex]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.root, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.inputWrapper, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...inputProps,
+        ref: inputRef,
+        className: mergeClasses(styles.input, inputProps.className),
+        value: displayValue,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        placeholder,
+        disabled,
+        contentAfter: /* @__PURE__ */ jsxs("span", { className: styles.iconContainer, children: [
+          clearable && selectedOption && !disabled && /* @__PURE__ */ jsx(
+            Button,
+            {
+              appearance: "subtle",
+              size: "small",
+              icon: /* @__PURE__ */ jsx(DismissRegular, {}),
+              onClick: handleClear,
+              className: styles.iconButton,
+              "aria-label": "Clear selection"
+            }
+          ),
+          loading ? /* @__PURE__ */ jsx(Spinner, { size: "tiny" }) : /* @__PURE__ */ jsx("span", { className: styles.chevronIcon, children: /* @__PURE__ */ jsx(ChevronDownRegular, {}) })
+        ] })
+      }
+    ) }),
+    isOpen && !disabled && /* @__PURE__ */ jsxs("div", { className: styles.dropdown, ref: dropdownRef, role: "listbox", children: [
+      header && /* @__PURE__ */ jsx("div", { className: styles.headerWrapper, children: /* @__PURE__ */ jsx("div", { className: styles.header, children: header }) }),
+      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingContainer, children: /* @__PURE__ */ jsx(Spinner, { size: "small", label: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.noResults, children: noResultsMessage }) : /* @__PURE__ */ jsx("div", { className: styles.optionsContainer, children: /* @__PURE__ */ jsx("ul", { className: styles.optionsList, children: filteredOptions.map((option, index) => {
+        const isExpanded = expandedKeys.has(option.key);
+        const hasDetails = option.details && option.details.length > 0;
+        const handleExpandClick = (e) => {
+          e.stopPropagation();
+          setExpandedKeys((prev) => {
+            const next = new Set(prev);
+            if (next.has(option.key)) {
+              next.delete(option.key);
+            } else {
+              next.add(option.key);
+            }
+            return next;
+          });
+        };
+        return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "data-index": index,
+            "aria-selected": option.key === selectedKey,
+            "aria-disabled": option.disabled,
+            className: mergeClasses(
+              styles.option,
+              index === highlightedIndex && styles.optionHighlighted,
+              option.key === selectedKey && styles.optionSelected,
+              option.disabled && styles.optionDisabled
+            ),
+            onClick: () => handleSelectOption(option),
+            onMouseEnter: () => setHighlightedIndex(index),
+            children: [
+              option.icon && /* @__PURE__ */ jsx("span", { className: styles.optionIcon, children: option.icon }),
+              /* @__PURE__ */ jsxs("span", { className: styles.optionContent, children: [
+                /* @__PURE__ */ jsx("span", { className: styles.optionText, children: option.text }),
+                option.secondaryText && /* @__PURE__ */ jsx("span", { className: styles.optionSecondaryText, children: option.secondaryText }),
+                isExpanded && hasDetails && /* @__PURE__ */ jsx("div", { className: styles.optionDetails, children: option.details.map((detail, detailIndex) => /* @__PURE__ */ jsxs("div", { className: styles.optionDetailRow, children: [
+                  detail.label && /* @__PURE__ */ jsxs("span", { className: styles.optionDetailLabel, children: [
+                    detail.label,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: styles.optionDetailValue, children: detail.value })
+                ] }, detailIndex)) })
+              ] }),
+              hasDetails && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "button",
+                  tabIndex: -1,
+                  className: mergeClasses(
+                    styles.optionExpandButton,
+                    isExpanded && styles.optionExpandButtonExpanded
+                  ),
+                  onClick: handleExpandClick,
+                  "aria-label": isExpanded ? "Collapse details" : "Expand details",
+                  children: /* @__PURE__ */ jsx(ChevronDownRegular, {})
+                }
+              )
+            ]
+          }
+        ) }, option.key);
+      }) }) }),
+      footer && /* @__PURE__ */ jsx("div", { className: styles.footerWrapper, children: /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer }) })
+    ] })
+  ] });
+};
+Lookup.displayName = "Lookup";
+
+export { Lookup };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Lookup/Lookup.styles.ts","../src/components/Lookup/Lookup.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import { makeStyles, tokens, shorthands } from '@fluentui/react-components';\n\nexport const useLookupStyles = makeStyles({\n  root: {\n    position: 'relative',\n    display: 'inline-flex',\n    flexDirection: 'column',\n    width: '100%',\n  },\n\n  inputWrapper: {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n  },\n\n  input: {\n    width: '100%',\n  },\n\n  iconContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2px',\n  },\n\n  iconButton: {\n    minWidth: '20px',\n    minHeight: '20px',\n    padding: '0',\n  },\n\n  chevronIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '20px',\n    height: '20px',\n  },\n\n  dropdown: {\n    position: 'absolute',\n    top: '100%',\n    left: 0,\n    right: 0,\n    zIndex: 1000,\n    marginTop: '4px',\n    backgroundColor: tokens.colorNeutralBackground1,\n    borderRadius: tokens.borderRadiusMedium,\n    boxShadow: tokens.shadow16,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n    maxHeight: '350px',\n    display: 'flex',\n    flexDirection: 'column',\n    overflow: 'hidden',\n  },\n\n  optionsList: {\n    listStyle: 'none',\n    margin: 0,\n    padding: '4px',\n  },\n\n  option: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    padding: '8px 12px',\n    cursor: 'pointer',\n    borderRadius: tokens.borderRadiusSmall,\n    backgroundColor: 'transparent',\n    border: 'none',\n    width: '100%',\n    textAlign: 'left',\n    gap: '8px',\n\n    '&:hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n\n    '&:focus': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      outline: `2px solid ${tokens.colorBrandStroke1}`,\n      outlineOffset: '-2px',\n    },\n  },\n\n  optionIcon: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '20px',\n    height: '20px',\n    flexShrink: 0,\n    color: tokens.colorNeutralForeground3,\n  },\n\n  optionContent: {\n    display: 'flex',\n    flexDirection: 'column',\n    flex: 1,\n    minWidth: 0,\n  },\n\n  optionExpandButton: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: '24px',\n    height: '24px',\n    flexShrink: 0,\n    cursor: 'pointer',\n    borderRadius: tokens.borderRadiusSmall,\n    backgroundColor: 'transparent',\n    border: 'none',\n    color: tokens.colorNeutralForeground3,\n    transition: 'transform 0.2s ease',\n\n    '&:hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      color: tokens.colorNeutralForeground1,\n    },\n  },\n\n  optionExpandButtonExpanded: {\n    transform: 'rotate(180deg)',\n  },\n\n  optionHighlighted: {\n    backgroundColor: tokens.colorNeutralBackground1Hover,\n  },\n\n  optionSelected: {\n    backgroundColor: tokens.colorBrandBackground2,\n    '&:hover': {\n      backgroundColor: tokens.colorBrandBackground2Hover,\n    },\n  },\n\n  optionDisabled: {\n    cursor: 'not-allowed',\n    opacity: 0.5,\n    '&:hover': {\n      backgroundColor: 'transparent',\n    },\n  },\n\n  optionText: {\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground1,\n  },\n\n  optionSecondaryText: {\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground3,\n    marginTop: '2px',\n  },\n\n  optionDetails: {\n    display: 'flex',\n    flexDirection: 'column',\n    marginTop: '4px',\n    paddingTop: '4px',\n    borderTop: `1px solid ${tokens.colorNeutralStroke2}`,\n    gap: '2px',\n  },\n\n  optionDetailRow: {\n    display: 'flex',\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground3,\n    gap: '4px',\n  },\n\n  optionDetailLabel: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  optionDetailValue: {\n    color: tokens.colorNeutralForeground3,\n  },\n\n  loadingContainer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    padding: '16px',\n  },\n\n  noResults: {\n    padding: '16px',\n    textAlign: 'center',\n    color: tokens.colorNeutralForeground3,\n    fontSize: tokens.fontSizeBase300,\n  },\n\n  headerWrapper: {\n    padding: '2px',\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n\n  header: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    borderRadius: tokens.borderRadiusMedium,\n    padding: '4px 12px',\n    backgroundColor: tokens.colorNeutralBackground3,\n    backgroundImage: `repeating-linear-gradient(\n      -45deg,\n      transparent,\n      transparent 1px,\n      rgba(0, 0, 0, 0.02) 1px,\n      rgba(0, 0, 0, 0.02) 2px\n    )`,\n    gap: '8px',\n  },\n\n  footerWrapper: {\n    padding: '8px',\n    paddingTop: '0',\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n\n  footer: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    padding: '6px 12px',\n    borderTop: `1px solid ${tokens.colorNeutralStroke2}`,\n    backgroundColor: tokens.colorNeutralBackground1,\n    fontSize: tokens.fontSizeBase200,\n    color: tokens.colorNeutralForeground2,\n    gap: '8px',\n  },\n\n  optionsContainer: {\n    maxHeight: '250px',\n    overflowY: 'auto',\n    overflowX: 'hidden',\n  },\n});\n","import * as React from 'react';\nimport {\n  Input,\n  Spinner,\n  mergeClasses,\n  Button,\n} from '@fluentui/react-components';\nimport { SearchRegular, DismissRegular, ChevronDownRegular } from '@fluentui/react-icons';\nimport { useLookupStyles } from './Lookup.styles';\nimport type { LookupProps, LookupOption } from './Lookup.types';\n\nexport const Lookup: React.FC<LookupProps> = ({\n  options = [],\n  selectedKey,\n  selectedOption: selectedOptionProp,\n  onOptionSelect,\n  onSearchChange,\n  placeholder = 'Search...',\n  loading = false,\n  noResultsMessage = 'No results found',\n  clearable = true,\n  minSearchLength = 0,\n  searchDebounceMs = 300,\n  disabled,\n  header,\n  footer,\n  ...inputProps\n}) => {\n  const styles = useLookupStyles();\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [searchText, setSearchText] = React.useState('');\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const [expandedKeys, setExpandedKeys] = React.useState<Set<string>>(new Set());\n  const [internalSelectedOption, setInternalSelectedOption] = React.useState<LookupOption | null>(null);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout>>();\n  const justSelectedRef = React.useRef(false);\n\n  // Find the selected option - prefer props, fallback to internal state\n  const selectedOption = React.useMemo(\n    () => selectedOptionProp ?? options.find((opt) => opt.key === selectedKey) ?? internalSelectedOption,\n    [selectedOptionProp, options, selectedKey, internalSelectedOption]\n  );\n\n  // Filter options based on search text\n  const filteredOptions = React.useMemo(() => {\n    if (!searchText || searchText.length < minSearchLength) {\n      return options;\n    }\n    const lowerSearch = searchText.toLowerCase();\n    return options.filter(\n      (opt) =>\n        opt.text.toLowerCase().includes(lowerSearch) ||\n        opt.secondaryText?.toLowerCase().includes(lowerSearch)\n    );\n  }, [options, searchText, minSearchLength]);\n\n  // Display value in input\n  const displayValue = React.useMemo(() => {\n    if (isOpen) {\n      return searchText;\n    }\n    return selectedOption?.text ?? '';\n  }, [isOpen, searchText, selectedOption]);\n\n  // Handle search text change with debounce\n  const handleSearchChange = React.useCallback(\n    (value: string) => {\n      setSearchText(value);\n      setHighlightedIndex(-1);\n\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n\n      if (onSearchChange && value.length >= minSearchLength) {\n        debounceRef.current = setTimeout(() => {\n          onSearchChange(value);\n        }, searchDebounceMs);\n      }\n    },\n    [onSearchChange, minSearchLength, searchDebounceMs]\n  );\n\n  // Handle input change\n  const handleInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = e.target.value;\n      handleSearchChange(value);\n      if (!isOpen) {\n        setIsOpen(true);\n      }\n    },\n    [handleSearchChange, isOpen]\n  );\n\n  // Handle option selection\n  const handleSelectOption = React.useCallback(\n    (option: LookupOption) => {\n      if (option.disabled) return;\n\n      justSelectedRef.current = true;\n      setInternalSelectedOption(option);\n      onOptionSelect?.(option);\n      setSearchText('');\n      setIsOpen(false);\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    },\n    [onOptionSelect]\n  );\n\n  // Handle clear\n  const handleClear = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      setInternalSelectedOption(null);\n      onOptionSelect?.(null);\n      setSearchText('');\n      setHighlightedIndex(-1);\n      inputRef.current?.focus();\n    },\n    [onOptionSelect]\n  );\n\n  // Handle keyboard navigation\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!isOpen) {\n            setIsOpen(true);\n          } else {\n            setHighlightedIndex((prev) =>\n              prev < filteredOptions.length - 1 ? prev + 1 : 0\n            );\n          }\n          break;\n\n        case 'ArrowUp':\n          e.preventDefault();\n          if (isOpen) {\n            setHighlightedIndex((prev) =>\n              prev > 0 ? prev - 1 : filteredOptions.length - 1\n            );\n          }\n          break;\n\n        case 'Enter':\n          e.preventDefault();\n          if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {\n            handleSelectOption(filteredOptions[highlightedIndex]);\n          }\n          break;\n\n        case 'Escape':\n          e.preventDefault();\n          setIsOpen(false);\n          setSearchText('');\n          setHighlightedIndex(-1);\n          break;\n\n        case 'Tab':\n          setIsOpen(false);\n          setSearchText('');\n          break;\n      }\n    },\n    [disabled, isOpen, highlightedIndex, filteredOptions, handleSelectOption]\n  );\n\n  // Handle input focus\n  const handleFocus = React.useCallback(() => {\n    if (!disabled) {\n      // Don't reopen if we just selected an option\n      if (justSelectedRef.current) {\n        justSelectedRef.current = false;\n        return;\n      }\n      setIsOpen(true);\n    }\n  }, [disabled]);\n\n  // Handle click outside\n  React.useEffect(() => {\n    const handleClickOutside = (e: MouseEvent) => {\n      const target = e.target as Node;\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(target) &&\n        inputRef.current &&\n        !inputRef.current.contains(target)\n      ) {\n        setIsOpen(false);\n        setSearchText('');\n        setHighlightedIndex(-1);\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  // Cleanup debounce on unmount\n  React.useEffect(() => {\n    return () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n    };\n  }, []);\n\n  // Scroll highlighted option into view\n  React.useEffect(() => {\n    if (highlightedIndex >= 0 && dropdownRef.current) {\n      const option = dropdownRef.current.querySelector(\n        `[data-index=\"${highlightedIndex}\"]`\n      );\n      option?.scrollIntoView({ block: 'nearest' });\n    }\n  }, [highlightedIndex]);\n\n  return (\n    <div className={styles.root}>\n      <div className={styles.inputWrapper}>\n        <Input\n          {...inputProps}\n          ref={inputRef}\n          className={mergeClasses(styles.input, inputProps.className)}\n          value={displayValue}\n          onChange={handleInputChange}\n          onKeyDown={handleKeyDown}\n          onFocus={handleFocus}\n          placeholder={placeholder}\n          disabled={disabled}\n          contentAfter={\n            <span className={styles.iconContainer}>\n              {clearable && selectedOption && !disabled && (\n                <Button\n                  appearance=\"subtle\"\n                  size=\"small\"\n                  icon={<DismissRegular />}\n                  onClick={handleClear}\n                  className={styles.iconButton}\n                  aria-label=\"Clear selection\"\n                />\n              )}\n              {loading ? (\n                <Spinner size=\"tiny\" />\n              ) : (\n                <span className={styles.chevronIcon}>\n                  <ChevronDownRegular />\n                </span>\n              )}\n            </span>\n          }\n        />\n      </div>\n\n      {isOpen && !disabled && (\n        <div className={styles.dropdown} ref={dropdownRef} role=\"listbox\">\n          {header && (\n            <div className={styles.headerWrapper}>\n              <div className={styles.header}>{header}</div>\n            </div>\n          )}\n          {loading ? (\n            <div className={styles.loadingContainer}>\n              <Spinner size=\"small\" label=\"Loading...\" />\n            </div>\n          ) : filteredOptions.length === 0 ? (\n            <div className={styles.noResults}>{noResultsMessage}</div>\n          ) : (\n            <div className={styles.optionsContainer}>\n              <ul className={styles.optionsList}>\n                {filteredOptions.map((option, index) => {\n                  const isExpanded = expandedKeys.has(option.key);\n                  const hasDetails = option.details && option.details.length > 0;\n\n                  const handleExpandClick = (e: React.MouseEvent) => {\n                    e.stopPropagation();\n                    setExpandedKeys((prev) => {\n                      const next = new Set(prev);\n                      if (next.has(option.key)) {\n                        next.delete(option.key);\n                      } else {\n                        next.add(option.key);\n                      }\n                      return next;\n                    });\n                  };\n\n                  return (\n                    <li key={option.key}>\n                      <button\n                        type=\"button\"\n                        role=\"option\"\n                        data-index={index}\n                        aria-selected={option.key === selectedKey}\n                        aria-disabled={option.disabled}\n                        className={mergeClasses(\n                          styles.option,\n                          index === highlightedIndex && styles.optionHighlighted,\n                          option.key === selectedKey && styles.optionSelected,\n                          option.disabled && styles.optionDisabled\n                        )}\n                        onClick={() => handleSelectOption(option)}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {option.icon && (\n                          <span className={styles.optionIcon}>{option.icon}</span>\n                        )}\n                        <span className={styles.optionContent}>\n                          <span className={styles.optionText}>{option.text}</span>\n                          {option.secondaryText && (\n                            <span className={styles.optionSecondaryText}>\n                              {option.secondaryText}\n                            </span>\n                          )}\n                          {isExpanded && hasDetails && (\n                            <div className={styles.optionDetails}>\n                              {option.details!.map((detail, detailIndex) => (\n                                <div key={detailIndex} className={styles.optionDetailRow}>\n                                  {detail.label && (\n                                    <span className={styles.optionDetailLabel}>\n                                      {detail.label}:\n                                    </span>\n                                  )}\n                                  <span className={styles.optionDetailValue}>\n                                    {detail.value}\n                                  </span>\n                                </div>\n                              ))}\n                            </div>\n                          )}\n                        </span>\n                        {hasDetails && (\n                          <span\n                            role=\"button\"\n                            tabIndex={-1}\n                            className={mergeClasses(\n                              styles.optionExpandButton,\n                              isExpanded && styles.optionExpandButtonExpanded\n                            )}\n                            onClick={handleExpandClick}\n                            aria-label={isExpanded ? 'Collapse details' : 'Expand details'}\n                          >\n                            <ChevronDownRegular />\n                          </span>\n                        )}\n                      </button>\n                    </li>\n                  );\n                })}\n              </ul>\n            </div>\n          )}\n          {footer && (\n            <div className={styles.footerWrapper}>\n              <div className={styles.footer}>{footer}</div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nLookup.displayName = 'Lookup';\n"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "fluentui-extended",
+  "version": "0.1.0",
+  "description": "Extended Fluent UI v9 components styled after Dynamics 365 - Lookup with async search, expandable details, and more",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/garethcheyne/npm-fluentui-extended.git"
+  },
+  "homepage": "https://github.com/garethcheyne/npm-fluentui-extended#readme",
+  "bugs": {
+    "url": "https://github.com/garethcheyne/npm-fluentui-extended/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "demo": "vite demo",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "fluentui",
+    "fluent-ui",
+    "react",
+    "components",
+    "lookup",
+    "dropdown",
+    "dynamics365",
+    "dynamics-365",
+    "search",
+    "combobox"
+  ],
+  "author": "err403.com",
+  "license": "MIT",
+  "peerDependencies": {
+    "@fluentui/react-components": "^9.0.0",
+    "react": "^17.0.0 || ^18.0.0",
+    "@fluentui/react-icons": "^2.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@fluentui/react-components": "^9.56.0",
+    "@fluentui/react-icons": "^2.0.258",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tsup": "^8.3.0",
+    "typescript": "^5.6.0",
+    "vite": "^5.4.0"
+  }
+}