@bwp-web/components 1.0.1 → 1.0.3

package/dist/index.d.ts

@@ -5,4 +5,5 @@ export * from './BiampLayout';
 export * from './BiampTable';
 export * from './BiampBanner';
 export * from './BiampSegmentedButton';
+export * from './BiampGlobalSearch';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACtE,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -1954,6 +1954,360 @@ function SegmentedButtonGroup({ children, sx, ...props }) {
     }
   );
 }
+
+// src/BiampGlobalSearch/BiampGlobalSearch.tsx
+import { createContext, forwardRef, useContext } from "react";
+import {
+  Autocomplete,
+  Box as Box11,
+  Chip,
+  InputAdornment as InputAdornment3,
+  Paper,
+  TextField as TextField3,
+  Typography as Typography6
+} from "@mui/material";
+import { KeyArrowDownIcon, KeyArrowUpIcon, SearchIcon as SearchIcon3 } from "@bwp-web/assets";
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+var SearchContext = createContext({
+  hasOptions: true,
+  loading: false,
+  noResultsText: "No results found",
+  query: ""
+});
+function KeyCap({
+  children,
+  variant = "icon"
+}) {
+  return /* @__PURE__ */ jsx23(
+    Box11,
+    {
+      component: "kbd",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: 20,
+        height: 20,
+        px: variant === "text" ? "8px" : 0.5,
+        borderRadius: "4px",
+        bgcolor: "grey.100",
+        color: "grey.400",
+        fontFamily: "inherit",
+        fontSize: "caption.fontSize",
+        fontStyle: "normal",
+        fontWeight: (theme) => theme.typography.fontWeightMedium,
+        border: "none",
+        "& svg": { width: 12, height: 12 }
+      },
+      children
+    }
+  );
+}
+var BiampGlobalSearchPaper = forwardRef(
+  function BiampGlobalSearchPaper2({ children, ...props }, ref) {
+    const { hasOptions, loading, noResultsText } = useContext(SearchContext);
+    return /* @__PURE__ */ jsxs10(Paper, { ref, ...props, children: [
+      hasOptions || loading ? children : /* @__PURE__ */ jsx23(
+        Typography6,
+        {
+          variant: "body2",
+          color: "text.secondary",
+          sx: { px: 2, py: 1.5 },
+          children: noResultsText
+        }
+      ),
+      hasOptions && /* @__PURE__ */ jsxs10(
+        Box11,
+        {
+          sx: {
+            borderTop: ({ palette }) => `0.6px solid ${palette.dividers.secondary}`,
+            display: "flex",
+            alignItems: "center",
+            gap: 1,
+            p: 1.5
+          },
+          children: [
+            /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                /* @__PURE__ */ jsx23(KeyCap, { children: /* @__PURE__ */ jsx23(KeyArrowDownIcon, {}) }),
+                /* @__PURE__ */ jsx23(KeyCap, { children: /* @__PURE__ */ jsx23(KeyArrowUpIcon, {}) })
+              ] }),
+              /* @__PURE__ */ jsx23(
+                Typography6,
+                {
+                  variant: "caption",
+                  fontWeight: (theme) => theme.typography.fontWeightMedium,
+                  color: "text.secondary",
+                  children: "Select"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs10(Box11, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+              /* @__PURE__ */ jsx23(KeyCap, { variant: "text", children: "Enter" }),
+              /* @__PURE__ */ jsx23(
+                Typography6,
+                {
+                  variant: "caption",
+                  fontWeight: (theme) => theme.typography.fontWeightMedium,
+                  color: "text.secondary",
+                  children: "Open"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+);
+function HighlightText({ text, query }) {
+  if (!query) return /* @__PURE__ */ jsx23(Fragment4, { children: text });
+  const index = text.toLowerCase().indexOf(query.toLowerCase());
+  if (index === -1) return /* @__PURE__ */ jsx23(Fragment4, { children: text });
+  const before = text.slice(0, index);
+  const match = text.slice(index, index + query.length);
+  const after = text.slice(index + query.length);
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    before,
+    /* @__PURE__ */ jsx23(
+      Box11,
+      {
+        component: "span",
+        sx: {
+          bgcolor: "background.info",
+          borderRadius: "4px",
+          color: "info.main",
+          paddingTop: "2px",
+          paddingBottom: "2px"
+        },
+        children: match
+      }
+    ),
+    after
+  ] });
+}
+function BiampGlobalSearchListItem({
+  option,
+  props: liProps
+}) {
+  const { query } = useContext(SearchContext);
+  const { key, ...rest } = liProps;
+  const maxChips = 3;
+  const chips = option.associatedItems?.slice(0, maxChips) ?? [];
+  const overflow = (option.associatedItems?.length ?? 0) - maxChips;
+  return /* @__PURE__ */ jsxs10(
+    "li",
+    {
+      ...rest,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        gap: 8,
+        ...rest.style
+      },
+      children: [
+        option.icon && /* @__PURE__ */ jsx23(
+          Box11,
+          {
+            sx: {
+              width: 24,
+              height: 24,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: option.icon
+          }
+        ),
+        /* @__PURE__ */ jsx23(Typography6, { variant: "body2", noWrap: true, sx: { flexShrink: 0 }, children: /* @__PURE__ */ jsx23(HighlightText, { text: option.title, query }) }),
+        option.subtitle && /* @__PURE__ */ jsx23(
+          Typography6,
+          {
+            className: "hoverContent",
+            variant: "body2",
+            color: "text.secondary",
+            noWrap: true,
+            sx: { flexShrink: 1, minWidth: 0, display: "none" },
+            children: option.subtitle
+          }
+        ),
+        chips.length > 0 && /* @__PURE__ */ jsxs10(
+          Box11,
+          {
+            className: "hoverContent",
+            sx: {
+              display: "none",
+              alignItems: "center",
+              gap: 1,
+              ml: "auto",
+              flexShrink: 0,
+              px: 2
+            },
+            children: [
+              chips.map((item, i) => /* @__PURE__ */ jsx23(
+                Chip,
+                {
+                  size: "small",
+                  label: item.label,
+                  sx: {
+                    bgcolor: "background.info",
+                    borderRadius: "2px",
+                    borderColor: ({ palette }) => palette.dividers.primary,
+                    padding: "0px 6px",
+                    "& .MuiChip-label": {
+                      typography: "caption",
+                      fontWeight: (theme) => theme.typography.fontWeightMedium
+                    }
+                  }
+                },
+                i
+              )),
+              overflow > 0 && /* @__PURE__ */ jsx23(
+                Chip,
+                {
+                  size: "small",
+                  label: `+${overflow}`,
+                  sx: {
+                    bgcolor: "background.info",
+                    borderRadius: "2px",
+                    borderColor: ({ palette }) => palette.dividers.primary,
+                    padding: "0px 6px",
+                    "& .MuiChip-label": {
+                      typography: "caption",
+                      fontWeight: (theme) => theme.typography.fontWeightMedium
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        option.endIcon && /* @__PURE__ */ jsx23(
+          Box11,
+          {
+            className: "endIcon",
+            sx: {
+              width: 48,
+              height: 48,
+              flexShrink: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              ml: chips.length > 0 ? 0 : "auto",
+              visibility: "hidden",
+              "& .MuiSvgIcon-root": { fontSize: 14 }
+            },
+            children: option.endIcon
+          }
+        )
+      ]
+    },
+    key
+  );
+}
+function BiampGlobalSearch({
+  placeholder = "Search...",
+  noResultsText = "No results found",
+  options = [],
+  inputValue: inputValueProp,
+  loading = false,
+  clearOnSelect = true,
+  onChange,
+  onInputChange,
+  ...props
+}) {
+  const hasOptions = options.length > 0;
+  const handleChange = (event, value, reason, details) => {
+    if (value && typeof value !== "string" && value.onClick) {
+      value.onClick();
+    }
+    onChange?.(event, value, reason, details);
+  };
+  const handleInputChange = (event, value, reason) => {
+    if (clearOnSelect && (reason === "selectOption" || reason === "reset")) {
+      onInputChange?.(event, "", reason);
+      return;
+    }
+    onInputChange?.(event, value, reason);
+  };
+  return /* @__PURE__ */ jsx23(
+    SearchContext.Provider,
+    {
+      value: {
+        hasOptions,
+        loading,
+        noResultsText,
+        query: inputValueProp ?? ""
+      },
+      children: /* @__PURE__ */ jsx23(
+        Autocomplete,
+        {
+          options,
+          inputValue: inputValueProp,
+          loading,
+          onChange: handleChange,
+          onInputChange: handleInputChange,
+          loadingText: /* @__PURE__ */ jsx23(Typography6, { variant: "body2", color: "text.secondary", children: "Loading\u2026" }),
+          freeSolo: true,
+          filterOptions: (x) => x,
+          getOptionLabel: (option) => typeof option === "string" ? option : option.title,
+          noOptionsText: noResultsText,
+          slots: { paper: BiampGlobalSearchPaper },
+          slotProps: {
+            listbox: {
+              sx: {
+                "& .MuiAutocomplete-option": {
+                  paddingRight: "0px !important"
+                },
+                "& li:hover .hoverContent, & li.Mui-focused .hoverContent": {
+                  display: "flex"
+                },
+                "& li:hover p.hoverContent, & li.Mui-focused p.hoverContent": {
+                  display: "block"
+                },
+                "& li:hover .endIcon, & li.Mui-focused .endIcon": {
+                  visibility: "visible"
+                }
+              }
+            }
+          },
+          renderInput: (params) => /* @__PURE__ */ jsx23(
+            TextField3,
+            {
+              ...params,
+              placeholder,
+              fullWidth: true,
+              sx: {
+                "& .MuiOutlinedInput-root": { padding: "0px !important" },
+                "& .MuiInputBase-input": { paddingLeft: "8px !important" }
+              },
+              slotProps: {
+                input: {
+                  ...params.InputProps,
+                  startAdornment: /* @__PURE__ */ jsxs10(Fragment4, { children: [
+                    /* @__PURE__ */ jsx23(InputAdornment3, { position: "start", children: /* @__PURE__ */ jsx23(SearchIcon3, {}) }),
+                    params.InputProps.startAdornment
+                  ] })
+                }
+              }
+            }
+          ),
+          renderOption: (optionProps, option) => /* @__PURE__ */ jsx23(
+            BiampGlobalSearchListItem,
+            {
+              option,
+              props: optionProps
+            },
+            optionProps.key
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
 export {
   BIAMP_TABLE_DEBOUNCE_DELAY,
   BiampAppDialog,
@@ -1963,6 +2317,7 @@ export {
   BiampBannerActions,
   BiampBannerContent,
   BiampBannerIcon,
+  BiampGlobalSearch,
   BiampHeader,
   BiampHeaderActions,
   BiampHeaderButton,