@rivm-loculus-tools/common-frontend 0.7.0 → 0.9.0

package/dist/components/ui/PageCommonHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_Fragment","MenuIcon","PageCommonHeader","theme","useTheme","use","PageCommonContext","onToggleDrawerButtonClick","useCallback","isDrawerOpen","setIsDrawerOpen","Box","beforeAppBarComponent","AppBar","appBarHeight","Toolbar","isNoInteraction","IconButton","appBarIcon","Fragment","Typography","title","centerComponent","beforeAppBarRightComponent","rightComponent","afterAppBarRightComponent","afterAppBarComponent"],"sources":["../../../../src/components/ui/PageCommonHeader/PageCommonHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  use,\n  useCallback,\n} from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Toolbar,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport MenuIcon from '@mui/icons-material/Menu';\n\nimport { PageCommonContext } from '../../../context/pageCommonContext';\n\n\nexport type PageCommonHeaderProps = {\n  readonly centerComponent?: ReactNode;\n  readonly rightComponent?: ReactNode;\n  readonly title: string;\n};\n\nexport const PageCommonHeader = ({ centerComponent, rightComponent, title }: PageCommonHeaderProps) => {\n  const theme = useTheme();\n  const { afterAppBarComponent, afterAppBarRightComponent, appBarHeight = 48, appBarIcon, beforeAppBarComponent, beforeAppBarRightComponent, isDrawerOpen, isNoInteraction, setIsDrawerOpen } = use(PageCommonContext);\n\n  const onToggleDrawerButtonClick = useCallback(() => {\n    setIsDrawerOpen(!isDrawerOpen);\n  }, [isDrawerOpen, setIsDrawerOpen]);\n\n  return (\n    <Box>\n      {beforeAppBarComponent}\n      <AppBar\n        elevation={1}\n        position={'static'}\n        sx={{\n          backgroundColor: 'primary.main',\n          color: '#FFFFFF',\n          height: appBarHeight,\n          justifyContent: 'center',\n          zIndex: theme.zIndex.drawer + 1,\n        }}\n      >\n        <Toolbar\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            px: `${theme.spacing(1)} !important`, // using !important to override media queries\n          }}\n          variant={'dense'}\n        >\n          {/* Left: Menu toggle and App Branding */}\n          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.5 }}>\n            {!isNoInteraction && (\n              <IconButton\n                aria-label={'open drawer'}\n                color={'inherit'}\n                edge={'start'}\n                onClick={onToggleDrawerButtonClick}\n                size={'small'}\n              >\n                <MenuIcon />\n              </IconButton>\n            )}\n            {appBarIcon && (\n              <>\n                {appBarIcon}\n              </>\n            )}\n            <Typography\n              component={'div'}\n              noWrap\n              sx={{ color: 'inherit', fontSize: '1.05rem', fontWeight: 700, letterSpacing: '-0.01em' }}\n              variant={'h6'}\n            >\n              {title}\n            </Typography>\n          </Box>\n          {!isNoInteraction && (\n            <>\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                {centerComponent}\n              </Box>\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                {beforeAppBarRightComponent && (\n                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                    {beforeAppBarRightComponent}\n                  </Box>\n                )}\n                <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                  {rightComponent}\n                </Box>\n                {afterAppBarRightComponent && (\n                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                    {afterAppBarRightComponent}\n                  </Box>\n                )}\n              </Box>\n            </>\n          )}\n        </Toolbar>\n      </AppBar>\n      {afterAppBarComponent}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AAwBA,IAAaE,KAAoB,EAAE,oBAAiB,mBAAgB,eAAmC;CACrG,IAAMC,IAAQC,EAAS,GACjB,EAAE,yBAAsB,8BAA2B,kBAAe,IAAI,eAAY,0BAAuB,+BAA4B,iBAAc,oBAAiB,uBAAoBC,EAAIC,CAAiB,GAE7MC,IAA4BC,QAAkB;EAClD,EAAgB,CAACC,CAAY;CAC/B,GAAG,CAACA,GAAcC,CAAe,CAAC;CAElC,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACC,GAAD;GACE,WAAW;GACX,UAAU;GACV,IAAI;IACF,iBAAiB;IACjB,OAAO;IACP,QAAQC;IACR,gBAAgB;IAChB,QAAQX,EAAM,OAAO,SAAS;GAChC;GAEA,UAAA,kBAACY,GAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI,GAAGZ,EAAM,QAAQ,CAAC,EAAE;IAC1B;IACA,SAAS;IANX,UAAA,CASE,kBAACQ,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAI;KAA3D,UAAA;MACG,CAACK,KACA,kBAACC,GAAD;OACE,cAAY;OACZ,OAAO;OACP,MAAM;OACN,SAASV;OACT,MAAM;OAEN,UAAA,kBAACN,GAAD,CAAW,CAAA;MACD,CAAA;MAEbiB,KACC,kBAAAlB,GAAA,EAAA,UACGkB,EACD,CAAA;MAEJ,kBAACE,GAAD;OACE,WAAW;OACX,QAAA;OACA,IAAI;QAAE,OAAO;QAAW,UAAU;QAAW,YAAY;QAAK,eAAe;OAAU;OACvF,SAAS;OAER,UAAAC;MACS,CAAA;KACT;IACJ,CAAA,GAAA,CAACL,KACA,kBAAAhB,GAAA,EAAA,UAAA,CACE,kBAACW,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAE;KACtD,UAAAW;IACE,CAAA,GACL,kBAACX,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAE;KAAzD,UAAA;MACGY,KACC,kBAACZ,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAY;MACE,CAAA;MAEP,kBAACZ,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAa;MACE,CAAA;MACJC,KACC,kBAACd,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAc;MACE,CAAA;KAEJ;IACL,CAAA,CAAA,EAAA,CAAA,CAEG;;EACH,CAAA;EACPC;CACE,EAAA,CAAA;AAET"}
+{"version":3,"file":"index.js","names":["_Fragment","MenuIcon","PageCommonHeader","useThemeProps","inProps","theme","useTheme","pageCommonHeaderTheme","useMemo","use","PageCommonContext","onToggleDrawerButtonClick","useCallback","isDrawerOpen","setIsDrawerOpen","Box","beforeAppBarComponent","AppBar","appBarHeight","Toolbar","isNoInteraction","IconButton","appBarIcon","Fragment","Typography","title","centerComponent","beforeAppBarRightComponent","rightComponent","afterAppBarRightComponent","afterAppBarComponent"],"sources":["../../../../src/components/ui/PageCommonHeader/PageCommonHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  use,\n  useCallback,\n  useMemo,\n} from 'react';\nimport {\n  AppBar,\n  Box,\n  IconButton,\n  Toolbar,\n  Typography,\n  useTheme,\n  useThemeProps,\n} from '@mui/material';\nimport MenuIcon from '@mui/icons-material/Menu';\n\nimport { PageCommonContext } from '../../../context/pageCommonContext';\n\nexport type PageCommonHeaderProps = {\n  readonly centerComponent?: ReactNode;\n  readonly rightComponent?: ReactNode;\n  readonly title: string;\n};\n\nexport interface PageCommonHeaderTheme {\n  backgroundColor: string;\n  color: string;\n}\n\nexport const PageCommonHeader = (inProps: PageCommonHeaderProps) => {\n  const { centerComponent, rightComponent, title } = useThemeProps({ name: 'RivmLoculusToolsCommonFrontendPageCommonHeader', props: inProps });\n  const theme = useTheme();\n  const pageCommonHeaderTheme = useMemo<PageCommonHeaderTheme>(() => ({\n    ...{\n      backgroundColor: theme.palette.primary.main,\n      color: theme.palette.primary.contrastText,\n    } satisfies PageCommonHeaderTheme,\n    ...(theme.components?.RivmLoculusToolsCommonFrontendPageCommonHeader ?? {}),\n  }), [theme]);\n\n\n  const { afterAppBarComponent, afterAppBarRightComponent, appBarHeight = 48, appBarIcon, beforeAppBarComponent, beforeAppBarRightComponent, isDrawerOpen, isNoInteraction, setIsDrawerOpen } = use(PageCommonContext);\n\n  const onToggleDrawerButtonClick = useCallback(() => {\n    setIsDrawerOpen(!isDrawerOpen);\n  }, [isDrawerOpen, setIsDrawerOpen]);\n\n  return (\n    <Box>\n      {beforeAppBarComponent}\n      <AppBar\n        elevation={1}\n        position={'static'}\n        sx={{\n          backgroundColor: pageCommonHeaderTheme.backgroundColor,\n          color: pageCommonHeaderTheme.color,\n          height: appBarHeight,\n          justifyContent: 'center',\n          zIndex: theme.zIndex.drawer + 1,\n        }}\n      >\n        <Toolbar\n          sx={{\n            display: 'flex',\n            justifyContent: 'space-between',\n            px: `${theme.spacing(1)} !important`, // using !important to override media queries\n          }}\n          variant={'dense'}\n        >\n          {/* Left: Menu toggle and App Branding */}\n          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.5 }}>\n            {!isNoInteraction && (\n              <IconButton\n                aria-label={'open drawer'}\n                color={'inherit'}\n                edge={'start'}\n                onClick={onToggleDrawerButtonClick}\n                size={'small'}\n              >\n                <MenuIcon />\n              </IconButton>\n            )}\n            {appBarIcon && (\n              <>\n                {appBarIcon}\n              </>\n            )}\n            <Typography\n              component={'div'}\n              noWrap\n              sx={{ color: 'inherit', fontSize: '1.05rem', fontWeight: 700, letterSpacing: '-0.01em' }}\n              variant={'h6'}\n            >\n              {title}\n            </Typography>\n          </Box>\n          {!isNoInteraction && (\n            <>\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                {centerComponent}\n              </Box>\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                {beforeAppBarRightComponent && (\n                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                    {beforeAppBarRightComponent}\n                  </Box>\n                )}\n                <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                  {rightComponent}\n                </Box>\n                {afterAppBarRightComponent && (\n                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>\n                    {afterAppBarRightComponent}\n                  </Box>\n                )}\n              </Box>\n            </>\n          )}\n        </Toolbar>\n      </AppBar>\n      {afterAppBarComponent}\n    </Box>\n  );\n};\n"],"mappings":";;;;;;AA8BA,IAAaE,KAAoB,MAAmC;CAClE,IAAM,EAAE,oBAAiB,mBAAgB,aAAUC,EAAc;EAAE,MAAM;EAAkD,OAAOC;CAAQ,CAAC,GACrIC,IAAQC,EAAS,GACjBC,IAAwBC,SAAsC;EAEhE,iBAAiBH,EAAM,QAAQ,QAAQ;EACvC,OAAOA,EAAM,QAAQ,QAAQ;EAE/B,GAAIA,EAAM,YAAY,kDAAkD,CAAC;CAC3E,IAAI,CAACA,CAAK,CAAC,GAGL,EAAE,yBAAsB,8BAA2B,kBAAe,IAAI,eAAY,0BAAuB,+BAA4B,iBAAc,oBAAiB,uBAAoBI,EAAIC,CAAiB,GAE7MC,IAA4BC,QAAkB;EAClD,EAAgB,CAACC,CAAY;CAC/B,GAAG,CAACA,GAAcC,CAAe,CAAC;CAElC,OACE,kBAACC,GAAD,EAAA,UAAA;EACGC;EACD,kBAACC,GAAD;GACE,WAAW;GACX,UAAU;GACV,IAAI;IACF,iBAAiBV,EAAsB;IACvC,OAAOA,EAAsB;IAC7B,QAAQW;IACR,gBAAgB;IAChB,QAAQb,EAAM,OAAO,SAAS;GAChC;GAEA,UAAA,kBAACc,GAAD;IACE,IAAI;KACF,SAAS;KACT,gBAAgB;KAChB,IAAI,GAAGd,EAAM,QAAQ,CAAC,EAAE;IAC1B;IACA,SAAS;IANX,UAAA,CASE,kBAACU,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAI;KAA3D,UAAA;MACG,CAACK,KACA,kBAACC,GAAD;OACE,cAAY;OACZ,OAAO;OACP,MAAM;OACN,SAASV;OACT,MAAM;OAEN,UAAA,kBAACV,GAAD,CAAW,CAAA;MACD,CAAA;MAEbqB,KACC,kBAAAtB,GAAA,EAAA,UACGsB,EACD,CAAA;MAEJ,kBAACE,GAAD;OACE,WAAW;OACX,QAAA;OACA,IAAI;QAAE,OAAO;QAAW,UAAU;QAAW,YAAY;QAAK,eAAe;OAAU;OACvF,SAAS;OAER,UAAAC;MACS,CAAA;KACT;IACJ,CAAA,GAAA,CAACL,KACA,kBAAApB,GAAA,EAAA,UAAA,CACE,kBAACe,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAE;KACtD,UAAAW;IACE,CAAA,GACL,kBAACX,GAAD;KAAK,IAAI;MAAE,YAAY;MAAU,SAAS;MAAQ,KAAK;KAAE;KAAzD,UAAA;MACGY,KACC,kBAACZ,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAY;MACE,CAAA;MAEP,kBAACZ,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAa;MACE,CAAA;MACJC,KACC,kBAACd,GAAD;OAAK,IAAI;QAAE,YAAY;QAAU,SAAS;QAAQ,KAAK;OAAE;OACtD,UAAAc;MACE,CAAA;KAEJ;IACL,CAAA,CAAA,EAAA,CAAA,CAEG;;EACH,CAAA;EACPC;CACE,EAAA,CAAA;AAET"}

package/dist/components/ui/SearchBar/SearchBar.d.ts

@@ -0,0 +1,15 @@
+import { ComponentsOverrides, Theme } from '@mui/material/styles';
+export type SearchBarProps = {
+    allowNavigation?: boolean;
+    highlightedIndex?: null | number;
+    numResults?: number;
+    onHighlightedIndexChange?: (index: number) => void;
+    onSearchQueryChange: (query: string) => void;
+    searchQuery: string;
+    truncated?: boolean;
+};
+export interface SearchBarTheme {
+    buttonColor: string;
+    styleOverrides?: ComponentsOverrides<Theme>['MuiFilledInput'];
+}
+export declare const SearchBar: (inProps: SearchBarProps) => import('react').JSX.Element;

package/dist/components/ui/SearchBar/SearchBarNodeCounter.d.ts

@@ -0,0 +1,8 @@
+import { ChipOwnProps } from '@mui/material';
+export type SearchBarNodeCounterProps = {
+    hasResultsChipColor?: ChipOwnProps['color'];
+    noResultsChipColor?: ChipOwnProps['color'];
+    numResults?: number;
+};
+export type SearchBarNodeCounterTheme = object;
+export declare const SearchBarNodeCounter: (inProps: SearchBarNodeCounterProps) => import('react').JSX.Element | null;

package/dist/components/ui/SearchBar/index.js

@@ -0,0 +1,136 @@
+import { Box as e, FilledInput as t, IconButton as n, InputAdornment as r, styled as i, useTheme as a, useThemeProps as o } from "@mui/material";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useMemo as d, useRef as f } from "react";
+import p from "@mui/icons-material/Search";
+import m from "@mui/icons-material/KeyboardArrowUp";
+import h from "@mui/icons-material/KeyboardArrowDown";
+import g from "@mui/icons-material/Close";
+// src/components/ui/SearchBar/SearchBar.tsx
+var _ = i(t, {
+	name: "RivmLoculusToolsCommonFrontendSearchBar",
+	slot: "Root"
+})(({ theme: e }) => ({
+	backgroundColor: e.palette.background.paper,
+	height: e.spacing(4)
+})), v = (t) => {
+	let { allowNavigation: i, highlightedIndex: v, numResults: y = 0, onHighlightedIndexChange: b, onSearchQueryChange: x, searchQuery: S, truncated: C } = o({
+		name: "RivmLoculusToolsCommonFrontendSearchBar",
+		props: t
+	}), w = a(), T = d(() => ({
+		buttonColor: w.palette.primary.main,
+		...w.components?.RivmLoculusToolsCommonFrontendSearchBar ?? {}
+	}), [w]), E = f(null), D = f(null), O = f(null), k = u((e) => {
+		let t = e.target.value;
+		x(t);
+	}, [x]), A = u(() => {
+		x(""), E.current?.focus();
+	}, [x]), j = u((e) => {
+		if (e.key === "Enter") {
+			if (!y) return;
+			e.preventDefault(), b?.(0), O.current?.focus();
+		}
+	}, [y, b]), M = u(() => {
+		if (!y) return;
+		let e = v == null || Number.isNaN(v) || v <= 0 ? y - 1 : v - 1;
+		b?.(e);
+	}, [
+		y,
+		v,
+		b
+	]), N = u(() => {
+		if (!y) return;
+		let e = v == null || Number.isNaN(v) || v >= y - 1 ? 0 : v + 1;
+		b?.(e);
+	}, [
+		y,
+		v,
+		b
+	]), P = u((e) => {
+		if (e.key === "ArrowRight") {
+			e.preventDefault();
+			let t = e.currentTarget.nextElementSibling;
+			t && t.focus();
+		}
+		if (e.key === "ArrowLeft") {
+			if (e.preventDefault(), e.target === D.current) {
+				E.current?.focus();
+				return;
+			}
+			let t = e.currentTarget.previousElementSibling;
+			t && t.focus();
+		}
+	}, []), F = d(() => S ? S && (Number.isNaN(y) || y <= 0) ? "No results" : v == null || Number.isNaN(v) || v < 0 || !i ? `${y}${C ? "+" : ""} results` : i ? `${v + 1}/${y}${C ? "+" : ""} results` : "" : "", [
+		S,
+		y,
+		v,
+		i,
+		C
+	]);
+	return /* @__PURE__ */ c(_, {
+		endAdornment: /* @__PURE__ */ l(r, {
+			position: "end",
+			children: [
+				F && /* @__PURE__ */ c(e, {
+					"aria-atomic": "true",
+					"aria-live": "polite",
+					role: "status",
+					sx: { fontSize: "1rem" },
+					children: F
+				}),
+				y > 0 && i && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(n, {
+					"aria-label": "Goto previous search result",
+					disabled: !y,
+					edge: "end",
+					onClick: M,
+					onKeyDown: P,
+					ref: D,
+					sx: { color: T.buttonColor },
+					children: /* @__PURE__ */ c(m, {})
+				}), /* @__PURE__ */ c(n, {
+					"aria-label": "Goto next search result",
+					disabled: !y,
+					edge: "end",
+					onClick: N,
+					onKeyDown: P,
+					ref: O,
+					sx: { color: T.buttonColor },
+					children: /* @__PURE__ */ c(h, {})
+				})] }),
+				S && /* @__PURE__ */ c(n, {
+					"aria-label": "Clear",
+					edge: "end",
+					onClick: A,
+					onKeyDown: P,
+					children: /* @__PURE__ */ c(g, {})
+				})
+			]
+		}),
+		fullWidth: !0,
+		inputRef: E,
+		name: "Search",
+		onChange: k,
+		onKeyDown: j,
+		placeholder: "Search",
+		size: "small",
+		slotProps: { input: {
+			"aria-label": "Search",
+			sx: {
+				"&::-webkit-search-cancel-button": { display: "none" },
+				fontSize: "1rem",
+				height: w.spacing(4),
+				outline: "none !important",
+				paddingBottom: "0 !important",
+				paddingTop: "0 !important"
+			}
+		} },
+		startAdornment: /* @__PURE__ */ c(r, {
+			position: "start",
+			children: /* @__PURE__ */ c(p, { fontSize: "small" })
+		}),
+		type: "search",
+		value: S
+	});
+};
+export { v as SearchBar };
+
+//# sourceMappingURL=index.js.map

package/dist/components/ui/SearchBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","SearchIcon","KeyboardArrowUpIcon","KeyboardArrowDownIcon","CloseIcon","SearchBarFilledInput","styled","FilledInput","theme","SearchBar","useThemeProps","inProps","useTheme","searchBarTheme","useMemo","inputRef","useRef","arrowUpButtonRef","arrowDownButtonRef","onTextInputChange","useCallback","nextSearchText","event","onSearchQueryChange","onClearButtonClick","onTextInputKeyDown","numResults","onHighlightedIndexChange","onUpArrowButtonClick","newHighlightedIndex","highlightedIndex","onDownArrowButtonClick","onGenericKeyDown","nextFocusableElement","previousFocusableElement","searchResultStatusText","searchQuery","allowNavigation","truncated","InputAdornment","Box","Fragment","IconButton"],"sources":["../../../../src/components/ui/SearchBar/SearchBar.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  KeyboardEvent,\n} from 'react';\nimport {\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  Box,\n  FilledInput,\n  IconButton,\n  InputAdornment,\n  styled,\n  useTheme,\n  useThemeProps,\n} from '@mui/material';\nimport type {\n  ComponentsOverrides,\n  Theme,\n} from '@mui/material/styles';\nimport SearchIcon from '@mui/icons-material/Search';\nimport KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';\nimport CloseIcon from '@mui/icons-material/Close';\n\nexport type SearchBarProps = {\n  allowNavigation?: boolean;\n  highlightedIndex?: null | number;\n  numResults?: number;\n  onHighlightedIndexChange?: (index: number) => void;\n  onSearchQueryChange: (query: string) => void;\n  searchQuery: string;\n  truncated?: boolean;\n};\n\nexport interface SearchBarTheme {\n  buttonColor: string;\n  styleOverrides?: ComponentsOverrides<Theme>['MuiFilledInput'];\n}\n\nconst SearchBarFilledInput = styled(FilledInput, {\n  name: 'RivmLoculusToolsCommonFrontendSearchBar',\n  slot: 'Root',\n})(({ theme }) => ({\n  backgroundColor: theme.palette.background.paper,\n  height: theme.spacing(4),\n}));\n\nexport const SearchBar = (inProps: SearchBarProps) => {\n  const {\n    allowNavigation,\n    highlightedIndex,\n    numResults = 0,\n    onHighlightedIndexChange,\n    onSearchQueryChange,\n    searchQuery,\n    truncated,\n  } = useThemeProps({ name: 'RivmLoculusToolsCommonFrontendSearchBar', props: inProps });\n  const theme = useTheme();\n  const searchBarTheme = useMemo<SearchBarTheme>(() => ({\n    ...{\n      buttonColor: theme.palette.primary.main,\n    } satisfies SearchBarTheme,\n    ...(theme.components?.RivmLoculusToolsCommonFrontendSearchBar ?? {}),\n  }), [theme]);\n\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const arrowUpButtonRef = useRef<HTMLButtonElement>(null);\n  const arrowDownButtonRef = useRef<HTMLButtonElement>(null);\n\n  const onTextInputChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    const nextSearchText = event.target.value;\n    onSearchQueryChange(nextSearchText);\n  }, [onSearchQueryChange]);\n\n  const onClearButtonClick = useCallback(() => {\n    onSearchQueryChange('');\n    inputRef.current?.focus();\n  }, [onSearchQueryChange]);\n\n  const onTextInputKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\n    // on enter press, highlight the first result and focus the down arrow button\n    if (event.key === 'Enter') {\n      if (!numResults) {\n        return;\n      }\n      event.preventDefault();\n      onHighlightedIndexChange?.(0);\n      arrowDownButtonRef.current?.focus();\n    }\n  }, [numResults, onHighlightedIndexChange]);\n\n  const onUpArrowButtonClick = useCallback(() => {\n    // goto previous result\n    if (!numResults) {\n      return;\n    }\n    const newHighlightedIndex = highlightedIndex === null || highlightedIndex === undefined || Number.isNaN(highlightedIndex) || highlightedIndex <= 0 ? numResults - 1 : highlightedIndex - 1;\n\n    onHighlightedIndexChange?.(newHighlightedIndex);\n  }, [numResults, highlightedIndex, onHighlightedIndexChange]);\n\n  const onDownArrowButtonClick = useCallback(() => {\n    // goto next result\n    if (!numResults) {\n      return;\n    }\n    const newHighlightedIndex = highlightedIndex === null || highlightedIndex === undefined || Number.isNaN(highlightedIndex) || highlightedIndex >= numResults - 1 ? 0 : highlightedIndex + 1;\n    onHighlightedIndexChange?.(newHighlightedIndex);\n  }, [numResults, highlightedIndex, onHighlightedIndexChange]);\n\n  const onGenericKeyDown = useCallback((event: KeyboardEvent<HTMLButtonElement>) => {\n    // arrow right, focus the next focusable element\n    if (event.key === 'ArrowRight') {\n      event.preventDefault();\n      const nextFocusableElement = event.currentTarget.nextElementSibling as HTMLElement;\n      if (nextFocusableElement) {\n        nextFocusableElement.focus();\n      }\n    }\n    // arrow left, focus the previous focusable element\n    if (event.key === 'ArrowLeft') {\n      event.preventDefault();\n      if (event.target === arrowUpButtonRef.current) {\n        inputRef.current?.focus();\n        return;\n      }\n      const previousFocusableElement = event.currentTarget.previousElementSibling as HTMLElement;\n      if (previousFocusableElement) {\n        previousFocusableElement.focus();\n      }\n    }\n  }, []);\n\n  const searchResultStatusText = useMemo(() => {\n    if (!searchQuery) {\n      return '';\n    }\n    if (searchQuery && (Number.isNaN(numResults) || numResults <= 0)) {\n      return 'No results';\n    } else if (highlightedIndex === null || highlightedIndex === undefined || Number.isNaN(highlightedIndex) || highlightedIndex < 0 || !allowNavigation) {\n      return `${numResults}${truncated ? '+' : ''} results`;\n    } else if (allowNavigation) {\n      return `${highlightedIndex + 1}/${numResults}${truncated ? '+' : ''} results`;\n    }\n    return '';\n  }, [searchQuery, numResults, highlightedIndex, allowNavigation, truncated]);\n\n\n  return (\n    <SearchBarFilledInput\n      endAdornment={(\n        <InputAdornment position={'end'}>\n          {searchResultStatusText && (\n            <Box\n              aria-atomic={'true'}\n              aria-live={'polite'}\n              role={'status'}\n              sx={{\n                fontSize: '1rem',\n              }}\n            >\n              {searchResultStatusText}\n            </Box>\n          )}\n          {numResults > 0 && allowNavigation && (\n            <>\n              <IconButton\n                aria-label={'Goto previous search result'}\n                disabled={!numResults}\n                edge={'end'}\n                onClick={onUpArrowButtonClick}\n                onKeyDown={onGenericKeyDown}\n                ref={arrowUpButtonRef}\n                sx={{ color: searchBarTheme.buttonColor }}\n              >\n                <KeyboardArrowUpIcon />\n              </IconButton>\n              <IconButton\n                aria-label={'Goto next search result'}\n                disabled={!numResults}\n                edge={'end'}\n                onClick={onDownArrowButtonClick}\n                onKeyDown={onGenericKeyDown}\n                ref={arrowDownButtonRef}\n                sx={{ color: searchBarTheme.buttonColor }}\n              >\n                <KeyboardArrowDownIcon />\n              </IconButton>\n            </>\n          )}\n          {searchQuery && (\n            <IconButton\n              aria-label={'Clear'}\n              edge={'end'}\n              onClick={onClearButtonClick}\n              onKeyDown={onGenericKeyDown}\n            >\n              <CloseIcon />\n            </IconButton>\n          )}\n        </InputAdornment>\n      )}\n      fullWidth\n      inputRef={inputRef}\n      name={'Search'}\n      onChange={onTextInputChange}\n      onKeyDown={onTextInputKeyDown}\n      placeholder={'Search'}\n      size={'small'}\n      slotProps={{\n        input: {\n          'aria-label': 'Search',\n          sx: {\n            '&::-webkit-search-cancel-button': {\n              display: 'none',\n            },\n            fontSize: '1rem',\n            height: theme.spacing(4),\n            outline: 'none !important',\n            paddingBottom: '0 !important',\n            paddingTop: '0 !important',\n          },\n        },\n      }}\n      startAdornment={(\n        <InputAdornment position={'start'}>\n          <SearchIcon fontSize={'small'} />\n        </InputAdornment>\n      )}\n      type={'search'}\n      value={searchQuery}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/constants/page.constants.d.ts

@@ -1 +1 @@
-export declare const DRAWER_WIDTH = 340;
+export declare const DRAWER_WIDTH = 540;

package/dist/constants/page.constants.js

@@ -1,5 +1,5 @@
 // src/constants/page.constants.ts
-var e = 340;
+var e = 540;
 export { e as DRAWER_WIDTH };
 
 //# sourceMappingURL=page.constants.js.map

package/dist/constants/page.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.constants.js","names":["DRAWER_WIDTH"],"sources":["../../src/constants/page.constants.ts"],"sourcesContent":["export const DRAWER_WIDTH = 340;\n"],"mappings":";AAAA,IAAaA,IAAe"}
+{"version":3,"file":"page.constants.js","names":["DRAWER_WIDTH"],"sources":["../../src/constants/page.constants.ts"],"sourcesContent":["export const DRAWER_WIDTH = 540;\n"],"mappings":";AAAA,IAAaA,IAAe"}

package/dist/theme/demoTheme/index.js

@@ -214,7 +214,32 @@ var t = "data:font/woff2;base64,d09GMgABAAAAC2dAABUAAAAZt9gAC2a/AAEAAAAAAAAAAAAA
 				fontSize: "1.143rem",
 				fontWeight: 700
 			}
-		} }
+		} },
+		RivmLoculusToolsCommonFrontendButtonWithMenu: { styleOverrides: { root: {
+			"&:hover": { backgroundColor: "rgba(255, 255, 255, 0.25)" },
+			backgroundColor: "rgba(255, 255, 255, 0.15)",
+			color: "#FFFFFF"
+		} } },
+		RivmLoculusToolsCommonFrontendFastaPageHeaderCenterComponent: { styleOverrides: { root: {
+			backgroundColor: "rgba(255, 255, 255, 0.2)",
+			color: "#FFFFFF",
+			fontSize: "0.75rem",
+			fontWeight: 600
+		} } },
+		RivmLoculusToolsCommonFrontendFastaPageHeaderImportButton: { styleOverrides: { root: {
+			"&:hover": { backgroundColor: "rgba(255, 255, 255, 0.25)" },
+			backgroundColor: "rgba(255, 255, 255, 0.15)",
+			color: "#FFFFFF"
+		} } },
+		RivmLoculusToolsCommonFrontendPageCommonHeader: {
+			backgroundColor: "#5160ab",
+			color: "#fff"
+		},
+		RivmLoculusToolsCommonFrontendSearchBar: {
+			buttonColor: "#5160ab",
+			styleOverrides: { root: { backgroundColor: e === "light" ? "#fff" : "#121212" } }
+		},
+		RivmLoculusToolsCommonFrontendSearchBarNodeCounter: {}
 	},
 	palette: {
 		divider: "#eeeeee",