@databiosphere/findable-ui 35.1.0 → 36.0.0

package/lib/components/Table/components/TableCell/components/CodeCell/codeCell.styles.js

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../../styles/common/constants/palette";
+export const StyledChip = styled(Chip) `
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px ${PALETTE.COMMON_WHITE};
+  height: auto;
+  justify-self: flex-start;
+  min-width: 0;
+
+  .MuiChip-label {
+    padding: 2px 8px;
+    white-space: normal;
+  }
+`;

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.d.ts

@@ -0,0 +1,3 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../../types";
+export declare const RankedCell: <T extends RowData, TValue = string | undefined | null>({ className, column, getValue, row, table, }: BaseComponentProps & CellContext<T, TValue>) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/RankedCell/rankedCell.js

@@ -0,0 +1,25 @@
+import React, { Fragment } from "react";
+import { getTokens, getTokensRegex, isRankedCell } from "./utils";
+export const RankedCell = ({ className, column, getValue, row, table, }) => {
+    // Get the cell value.
+    const value = getValue();
+    // If the cell value is undefined or null, return null.
+    if (value === undefined || value === null)
+        return null;
+    // Convert the cell value to a string.
+    const stringValue = String(value);
+    // Check if the cell is ranked.
+    const isRanked = isRankedCell(table, row, column.id);
+    // Return the unranked cell, as-is.
+    if (!isRanked)
+        return React.createElement(Fragment, null, stringValue);
+    // Tokenise the current global filter.
+    const tokens = getTokens(table);
+    // If there are no tokens, return the value as-is.
+    if (tokens.length === 0)
+        return React.createElement(Fragment, null, stringValue);
+    // Create regex pattern.
+    const regex = getTokensRegex(tokens);
+    // Return the ranked cell, with highlighting.
+    return (React.createElement("span", { className: className }, stringValue.split(regex).map((part, i) => (React.createElement(Fragment, { key: i }, part.match(regex) ? React.createElement("mark", null, part) : part)))));
+};

package/lib/components/Table/components/TableCell/components/RankedCell/utils.d.ts

@@ -0,0 +1,30 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+/**
+ * Renders a cell value with highlighting if it matches item rank filter criteria.
+ * @param table - Table.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @param value - Cell value.
+ * @returns Rendered cell value with highlighting.
+ */
+export declare function renderRankedCell<T extends RowData>(table: Table<T>, row: Row<T>, columnId: string, value: string | undefined | null): string;
+/**
+ * Returns the current global filter tokens from the table.
+ * @param table - Table.
+ * @returns An array of search tokens.
+ */
+export declare function getTokens<T extends RowData>(table: Table<T>): string[];
+/**
+ * Returns a RegExp pattern for matching search tokens.
+ * @param tokens - Search tokens.
+ * @returns A RegExp pattern that matches any of the tokens.
+ */
+export declare function getTokensRegex(tokens: string[]): RegExp;
+/**
+ * Checks if a cell is ranked based on the global filter.
+ * @param table - Table.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @returns Whether the cell is ranked.
+ */
+export declare function isRankedCell<T extends RowData>(table: Table<T>, row: Row<T>, columnId: string): boolean;

package/lib/components/Table/components/TableCell/components/RankedCell/utils.js

@@ -0,0 +1,64 @@
+import { escapeRegExp } from "../../../../../../common/utils";
+import { parseSearchTerms } from "../../../../columnDef/globalFilter/utils";
+/**
+ * Renders a cell value with highlighting if it matches item rank filter criteria.
+ * @param table - Table.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @param value - Cell value.
+ * @returns Rendered cell value with highlighting.
+ */
+export function renderRankedCell(table, row, columnId, value) {
+    // If the cell value is undefined or null, return an empty string.
+    if (value === undefined || value === null)
+        return "";
+    const stringValue = String(value);
+    // Check if the cell is ranked.
+    const isRanked = isRankedCell(table, row, columnId);
+    // Return the unranked cell, as-is, in string form.
+    if (!isRanked)
+        return stringValue;
+    // Tokenise the current global filter.
+    const tokens = getTokens(table);
+    // If there are no tokens, return the value as-is, in string form.
+    if (tokens.length === 0)
+        return stringValue;
+    // Create regex pattern.
+    const regex = getTokensRegex(tokens);
+    return stringValue.replace(regex, "<mark>$1</mark>");
+}
+/**
+ * Returns the current global filter tokens from the table.
+ * @param table - Table.
+ * @returns An array of search tokens.
+ */
+export function getTokens(table) {
+    const { getState } = table;
+    const { globalFilter } = getState();
+    return parseSearchTerms(globalFilter);
+}
+/**
+ * Returns a RegExp pattern for matching search tokens.
+ * @param tokens - Search tokens.
+ * @returns A RegExp pattern that matches any of the tokens.
+ */
+export function getTokensRegex(tokens) {
+    return new RegExp(`(${tokens.map(escapeRegExp).join("|")})`, "gi");
+}
+/**
+ * Checks if a cell is ranked based on the global filter.
+ * @param table - Table.
+ * @param row - Row.
+ * @param columnId - Column identifier.
+ * @returns Whether the cell is ranked.
+ */
+export function isRankedCell(table, row, columnId) {
+    const { getState } = table;
+    const { globalFilter } = getState();
+    // If there is no global filter, return the value as-is.
+    if (!globalFilter)
+        return false;
+    // Check if the column has filter metadata with itemRank.passed
+    const columnFilterMeta = row.columnFiltersMeta[columnId];
+    return columnFilterMeta?.passed ?? false;
+}

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.js

@@ -1,4 +1,4 @@
-import { Checkbox, ListItemButton, ListItemText, Button as MButton, Typography, } from "@mui/material";
+import { Checkbox, Grid, ListItemButton, ListItemText, Typography, } from "@mui/material";
 import React, { Fragment } from "react";
 import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
@@ -6,22 +6,26 @@ import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIco
 import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { useMenu } from "../../../../common/Menu/hooks/useMenu";
+import { FilterCountChip } from "../../../../Filter/components/FilterCountChip/filterCountChip";
 import { getColumnHeader } from "../../../common/utils";
 import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
-import { StyledMenu } from "./columnFilter.styles";
-import { MENU_PROPS } from "./constants";
+import { StyledButton, StyledMenu } from "./columnFilter.styles";
+import { GRID_PROPS, MENU_PROPS } from "./constants";
 import { updater } from "./utils";
 /**
  *  Column filter component with supported filter functions:
  *  - `arrIncludesSome`
  */
-export const ColumnFilter = ({ Button = MButton, className, column, ...props /* MuiMenuProps */ }) => {
+export const ColumnFilter = ({ Button = StyledButton, className, column, ...props /* MuiMenuProps */ }) => {
     const { anchorEl, onClose, onOpen, open } = useMenu();
     const facetedUniqueValues = column.getFacetedUniqueValues();
     const sortedValues = getSortedFacetedValues(facetedUniqueValues);
     const filterValue = (column.getFilterValue() || []);
     return (React.createElement(Fragment, null,
-        React.createElement(Button, { key: column.id, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen }, getColumnHeader(column)),
+        React.createElement(Button, { key: column.id, disabled: sortedValues.length === 0, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen, open: open },
+            React.createElement(Grid, { ...GRID_PROPS },
+                getColumnHeader(column),
+                React.createElement(FilterCountChip, { count: filterValue.length }))),
         React.createElement(StyledMenu, { ...MENU_PROPS, ...props, className: className, anchorEl: anchorEl, onClose: onClose, open: open },
             sortedValues.map(([value, occurrence]) => (React.createElement(ListItemButton, { key: String(value), selected: filterValue.includes(value), onClick: () => column.setFilterValue(updater(value)) },
                 React.createElement(Checkbox, { checked: filterValue.includes(value), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.d.ts

@@ -1,3 +1,12 @@
+interface Props {
+    open: boolean;
+}
+export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "href" | "action" | "loading" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "loadingIndicator" | "loadingPosition" | "startIcon"> & {
+    theme?: import("@emotion/react").Theme;
+} & Props, {}, {}>;
 export declare const StyledMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
+export {};

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.js

@@ -1,7 +1,26 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { Menu, menuClasses, paperClasses } from "@mui/material";
+import { Button, Menu, menuClasses, paperClasses } from "@mui/material";
+import { PALETTE } from "../../../../../styles/common/constants/palette";
 import { MAX_LIST_HEIGHT_PX } from "../../../../Filter/common/constants";
 import { MuiListItemButtonRoot, MuiListItemTextRoot, } from "../../../../Filter/components/FilterList/filterList.styles";
+export const StyledButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== "open",
+}) `
+  &.MuiButtonGroup-grouped {
+    gap: 0;
+
+    .MuiButton-endIcon {
+      margin-left: 0;
+      margin-right: -8px;
+    }
+
+    ${({ open }) => open &&
+    css `
+        background-color: ${PALETTE.SMOKE_LIGHT};
+      `}
+  }
+`;
 export const StyledMenu = styled(Menu) `
   .${paperClasses.root} {
     margin: 4px 0;

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { ColumnFilterTagProps } from "./types";
+export declare const ColumnFilterTag: <T extends RowData>({ className, column, ...props }: ColumnFilterTagProps<T>) => JSX.Element;

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.js

@@ -0,0 +1,9 @@
+import { CloseRounded } from "@mui/icons-material";
+import React, { Fragment } from "react";
+import { updater } from "../../../../../components/TableFeatures/ColumnFilter/utils";
+import { StyledChip } from "./columnFilterTag.styles";
+import { CHIP_PROPS, SVG_ICON_PROPS } from "./constants";
+export const ColumnFilterTag = ({ className, column, ...props /* MuiChipProps */ }) => {
+    const filterValue = column.getFilterValue();
+    return (React.createElement(Fragment, null, filterValue.map((value) => (React.createElement(StyledChip, { ...CHIP_PROPS, key: String(value), className: className, deleteIcon: React.createElement(CloseRounded, { ...SVG_ICON_PROPS }), label: String(value), onClick: () => column.setFilterValue(updater(value)), onDelete: () => column.setFilterValue(updater(value)), ...props })))));
+};

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledChip: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "label" | "style" | "className" | "classes" | "tabIndex" | "color" | "children" | "sx" | "variant" | "disabled" | "size" | "avatar" | "clickable" | "deleteIcon" | "icon" | "onDelete" | "skipFocusWhenDisabled"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/columnFilterTag.styles.js

@@ -0,0 +1,24 @@
+import styled from "@emotion/styled";
+import { Chip } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+export const StyledChip = styled(Chip) `
+  border-radius: 4px;
+  box-shadow: 0 0 0 2px ${PALETTE.COMMON_WHITE};
+  cursor: pointer;
+  gap: 4px;
+  justify-self: flex-start;
+  padding: 0 8px;
+
+  .MuiChip-label {
+    padding: 0;
+  }
+
+  .MuiChip-deleteIcon {
+    font-size: 16px;
+    margin: 0 -4px 0 0;
+
+    &:hover {
+      color: inherit;
+    }
+  }
+`;

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/constants.d.ts

@@ -0,0 +1,3 @@
+import { ChipProps, SvgIconProps } from "@mui/material";
+export declare const CHIP_PROPS: ChipProps;
+export declare const SVG_ICON_PROPS: SvgIconProps;

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/constants.js

@@ -0,0 +1,10 @@
+import { CHIP_PROPS as MUI_CHIP_PROPS } from "../../../../../../../styles/common/mui/chip";
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../../styles/common/mui/svgIcon";
+export const CHIP_PROPS = {
+    clickable: false,
+    color: MUI_CHIP_PROPS.COLOR.DEFAULT,
+    size: MUI_CHIP_PROPS.SIZE.MEDIUM,
+};
+export const SVG_ICON_PROPS = {
+    color: MUI_SVG_ICON_PROPS.COLOR.INHERIT,
+};

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/stories/columFilterTag.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ColumnFilterTag } from "../columnFilterTag";
+declare const meta: Meta<typeof ColumnFilterTag>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/stories/columFilterTag.stories.js

@@ -0,0 +1,17 @@
+import { Box } from "@mui/material";
+import React from "react";
+import { BIONETWORK } from "../../../../../../../DataDictionary/components/Filters/stories/constants";
+import { ColumnFilterTag } from "../columnFilterTag";
+const meta = {
+    component: ColumnFilterTag,
+    decorators: [
+        (Story) => (React.createElement(Box, { sx: { display: "grid", gap: 2, gridAutoFlow: "column" } },
+            React.createElement(Story, null))),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        column: BIONETWORK,
+    },
+};

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/types.d.ts

@@ -0,0 +1,6 @@
+import { ChipProps } from "@mui/material";
+import { Column, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../../../types";
+export interface ColumnFilterTagProps<T extends RowData> extends BaseComponentProps, ChipProps {
+    column: Column<T>;
+}

package/lib/components/Table/components/TableFeatures/ColumnFilter/components/ColumnFilterTag/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/components/TableFeatures/ColumnFilter/constants.d.ts

@@ -1,2 +1,3 @@
-import { MenuProps } from "@mui/material";
+import { GridProps, MenuProps } from "@mui/material";
+export declare const GRID_PROPS: GridProps;
 export declare const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open">;

package/lib/components/Table/components/TableFeatures/ColumnFilter/constants.js

@@ -1,3 +1,9 @@
+export const GRID_PROPS = {
+    alignItems: "center",
+    container: true,
+    direction: "row",
+    gap: 1,
+};
 export const MENU_PROPS = {
     anchorOrigin: {
         horizontal: "right",

package/lib/components/Table/components/TableFeatures/ColumnFilter/types.d.ts

@@ -1,7 +1,8 @@
-import { Button, MenuProps } from "@mui/material";
+import { MenuProps } from "@mui/material";
 import { Column, RowData } from "@tanstack/react-table";
 import { BaseComponentProps } from "../../../../types";
+import { StyledButton } from "./columnFilter.styles";
 export interface ColumnFilterProps<T extends RowData> extends BaseComponentProps, Omit<MenuProps, "anchorEl" | "onClose" | "open"> {
-    Button?: typeof Button;
+    Button?: typeof StyledButton;
     column: Column<T>;
 }

package/lib/components/Table/components/TableFeatures/GlobalFilter/constants.d.ts

@@ -0,0 +1,2 @@
+import { OutlinedInputProps } from "@mui/material";
+export declare const OUTLINED_INPUT_PROPS: OutlinedInputProps;

package/lib/components/Table/components/TableFeatures/GlobalFilter/constants.js

@@ -0,0 +1,6 @@
+import { OUTLINED_INPUT_PROPS as MUI_OUTLINED_INPUT_PROPS } from "../../../../../styles/common/mui/outlinedInput";
+export const OUTLINED_INPUT_PROPS = {
+    color: MUI_OUTLINED_INPUT_PROPS.COLOR.SECONDARY,
+    fullWidth: true,
+    id: "global-filter",
+};

package/lib/components/Table/components/TableFeatures/GlobalFilter/globalFilter.d.ts

@@ -0,0 +1,3 @@
+import { RowData } from "@tanstack/react-table";
+import { GlobalFilterProps } from "./types";
+export declare const GlobalFilter: <T extends RowData>({ className, table, ...props }: GlobalFilterProps<T>) => JSX.Element;

package/lib/components/Table/components/TableFeatures/GlobalFilter/globalFilter.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { ClearInputAdornment } from "../../../../common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment";
+import { SearchInputAdornment } from "../../../../common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/searchInputAdornment";
+import { StyledOutlinedInput } from "../../../../common/OutlinedInput/outlinedInput.styles";
+import { OUTLINED_INPUT_PROPS } from "./constants";
+export const GlobalFilter = ({ className, table, ...props /* MuiOutlinedInputProps */ }) => {
+    const { getState, setGlobalFilter } = table;
+    const { globalFilter } = getState();
+    return (React.createElement(StyledOutlinedInput, { ...OUTLINED_INPUT_PROPS, className: className, endAdornment: React.createElement(ClearInputAdornment, { in: !!globalFilter, onClick: () => setGlobalFilter(undefined) }), hasValue: !!globalFilter, onChange: (e) => setGlobalFilter(e.target.value), startAdornment: React.createElement(SearchInputAdornment, null), value: globalFilter ?? "", ...props }));
+};

package/lib/components/Table/components/TableFeatures/GlobalFilter/types.d.ts

@@ -0,0 +1,6 @@
+import { OutlinedInputProps } from "@mui/material";
+import { RowData, Table } from "@tanstack/react-table";
+import { BaseComponentProps } from "components/types";
+export interface GlobalFilterProps<T extends RowData> extends BaseComponentProps, OutlinedInputProps {
+    table: Table<T>;
+}

package/lib/components/Table/components/TableFeatures/GlobalFilter/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/coreOptions/state/pagination/constants.d.ts

@@ -0,0 +1,2 @@
+import { PaginationTableState } from "@tanstack/react-table";
+export declare const PAGINATION_TABLE_STATE: PaginationTableState;

package/lib/components/Table/coreOptions/state/pagination/constants.js

@@ -0,0 +1,6 @@
+export const PAGINATION_TABLE_STATE = {
+    pagination: {
+        pageIndex: 0,
+        pageSize: 10,
+    },
+};

package/lib/components/Table/coreOptions/state/pagination/utils.d.ts

@@ -0,0 +1,9 @@
+import { InitialTableState, PaginationTableState } from "@tanstack/react-table";
+/**
+ * Initializes pagination state by merging default values with initial state.
+ * TanStack Table always applies a default pagination of `{ pageIndex: 0, pageSize: 10 }`,
+ * so this function ensures custom pagination state is properly initialized from the initial state.
+ * @param initialState - The initial state.
+ * @returns The initialized pagination state.
+ */
+export declare function initPaginationState(initialState?: InitialTableState): PaginationTableState;

package/lib/components/Table/coreOptions/state/pagination/utils.js

@@ -0,0 +1,18 @@
+import { PAGINATION_TABLE_STATE } from "./constants";
+/**
+ * Initializes pagination state by merging default values with initial state.
+ * TanStack Table always applies a default pagination of `{ pageIndex: 0, pageSize: 10 }`,
+ * so this function ensures custom pagination state is properly initialized from the initial state.
+ * @param initialState - The initial state.
+ * @returns The initialized pagination state.
+ */
+export function initPaginationState(initialState) {
+    if (!initialState?.pagination)
+        return PAGINATION_TABLE_STATE;
+    return {
+        pagination: {
+            ...PAGINATION_TABLE_STATE.pagination,
+            ...initialState.pagination,
+        },
+    };
+}

package/lib/components/common/AnchorLink/anchorLink.js

@@ -1,7 +1,9 @@
 import { LinkRounded } from "@mui/icons-material";
+import { useRouter } from "next/router";
 import React from "react";
-import { AnchorLink as Link } from "./anchorLink.styles";
+import { StyledNextLink } from "./anchorLink.styles";
 export const AnchorLink = ({ anchorLink, className, }) => {
-    return (React.createElement(Link, { "aria-label": anchorLink, className: className, href: `#${anchorLink}` },
+    const { query } = useRouter();
+    return (React.createElement(StyledNextLink, { "aria-label": anchorLink, className: className, href: { hash: anchorLink, query } },
         React.createElement(LinkRounded, { fontSize: "xsmall" })));
 };

package/lib/components/common/AnchorLink/anchorLink.styles.d.ts

@@ -1,4 +1,4 @@
-export declare const AnchorLink: import("@emotion/styled").StyledComponent<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, keyof {
+export declare const StyledNextLink: import("@emotion/styled").StyledComponent<Omit<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, keyof {
     href: string | import("url").UrlObject;
     as?: string | import("url").UrlObject;
     replace?: boolean;

package/lib/components/common/AnchorLink/anchorLink.styles.js

@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import Link from "next/link";
 import { inkLight } from "../../../styles/common/mixins/colors";
-export const AnchorLink = styled(Link) `
+export const StyledNextLink = styled(Link) `
   color: ${inkLight};
   margin-left: 4px;
   opacity: 0;

package/lib/components/common/CustomIcon/components/SearchIcon/searchIcon.d.ts

@@ -1,5 +1,5 @@
-import { CustomSVGIconProps } from "../../common/entities";
+import { SvgIconProps } from "@mui/material";
 /**
  * Custom search icon.
  */
-export declare const SearchIcon: ({ fontSize, viewBox, ...props }: CustomSVGIconProps) => JSX.Element;
+export declare const SearchIcon: ({ fontSize, viewBox, ...props }: SvgIconProps) => JSX.Element;

package/lib/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment.d.ts

@@ -0,0 +1,2 @@
+import { ClearInputAdornmentProps } from "./types";
+export declare const ClearInputAdornment: ({ in: isIn, onClick, }: ClearInputAdornmentProps) => JSX.Element | null;

package/lib/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment.js

@@ -0,0 +1,13 @@
+import { CloseRounded } from "@mui/icons-material";
+import { IconButton } from "@mui/material";
+import React from "react";
+import { SVG_ICON_PROPS } from "../constants";
+import { StyledInputAdornment } from "./clearInputAdornment.styles";
+import { ICON_BUTTON_PROPS, INPUT_ADORNMENT_PROPS } from "./constants";
+export const ClearInputAdornment = ({ in: isIn, onClick, }) => {
+    if (!isIn)
+        return null;
+    return (React.createElement(StyledInputAdornment, { ...INPUT_ADORNMENT_PROPS },
+        React.createElement(IconButton, { ...ICON_BUTTON_PROPS, onClick: onClick },
+            React.createElement(CloseRounded, { ...SVG_ICON_PROPS }))));
+};

package/lib/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledInputAdornment: import("@emotion/styled").StyledComponent<import("@mui/material").InputAdornmentOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "position" | "sx" | "variant" | "disableTypography" | "disablePointerEvents"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/clearInputAdornment.styles.js

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+import { InputAdornment } from "@mui/material";
+import { PALETTE } from "../../../../../../../styles/common/constants/palette";
+export const StyledInputAdornment = styled(InputAdornment) `
+  color: ${PALETTE.INK_LIGHT};
+  margin: 0;
+
+  .MuiIconButton-root {
+    margin-right: -10px;
+  }
+`;

package/lib/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/constants.d.ts

@@ -0,0 +1,3 @@
+import { IconButtonProps, InputAdornmentProps } from "@mui/material";
+export declare const ICON_BUTTON_PROPS: IconButtonProps;
+export declare const INPUT_ADORNMENT_PROPS: InputAdornmentProps;

package/lib/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/constants.js

@@ -0,0 +1,10 @@
+import { ICON_BUTTON_PROPS as MUI_ICON_BUTTON_PROPS } from "../../../../../../../styles/common/mui/iconButton";
+import { INPUT_ADORNMENT_PROPS as MUI_INPUT_ADORNMENT_PROPS } from "../../../../../../../styles/common/mui/inputAdornment";
+export const ICON_BUTTON_PROPS = {
+    color: MUI_ICON_BUTTON_PROPS.COLOR.INHERIT,
+    edge: MUI_ICON_BUTTON_PROPS.EDGE.END,
+    size: MUI_ICON_BUTTON_PROPS.SIZE.MEDIUM,
+};
+export const INPUT_ADORNMENT_PROPS = {
+    position: MUI_INPUT_ADORNMENT_PROPS.POSITION.END,
+};

package/lib/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/types.d.ts

@@ -0,0 +1,4 @@
+export interface ClearInputAdornmentProps {
+    in?: boolean;
+    onClick: () => void;
+}

package/lib/components/common/OutlinedInput/components/InputAdornment/components/ClearInputAdornment/types.js

@@ -0,0 +1 @@
+export {};

package/lib/components/common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/constants.d.ts

@@ -0,0 +1,2 @@
+import { InputAdornmentProps } from "@mui/material";
+export declare const INPUT_ADORNMENT_PROPS: InputAdornmentProps;

package/lib/components/common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/constants.js

@@ -0,0 +1,5 @@
+import { INPUT_ADORNMENT_PROPS as MUI_INPUT_ADORNMENT_PROPS } from "../../../../../../../styles/common/mui/inputAdornment";
+export const INPUT_ADORNMENT_PROPS = {
+    disablePointerEvents: true,
+    position: MUI_INPUT_ADORNMENT_PROPS.POSITION.START,
+};

package/lib/components/common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/searchInputAdornment.d.ts

@@ -0,0 +1 @@
+export declare const SearchInputAdornment: () => JSX.Element;

package/lib/components/common/OutlinedInput/components/InputAdornment/components/SearchInputAdornment/searchInputAdornment.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { SearchIcon } from "../../../../../CustomIcon/components/SearchIcon/searchIcon";
+import { StyledInputAdornment } from "../../inputAdornment.styles";
+import { SVG_ICON_PROPS } from "../constants";
+import { INPUT_ADORNMENT_PROPS } from "./constants";
+export const SearchInputAdornment = () => {
+    return (React.createElement(StyledInputAdornment, { ...INPUT_ADORNMENT_PROPS },
+        React.createElement(SearchIcon, { ...SVG_ICON_PROPS })));
+};

package/lib/components/common/OutlinedInput/components/InputAdornment/components/constants.d.ts

@@ -0,0 +1,2 @@
+import { SvgIconProps } from "@mui/material";
+export declare const SVG_ICON_PROPS: SvgIconProps;

package/lib/components/common/OutlinedInput/components/InputAdornment/components/constants.js

@@ -0,0 +1,5 @@
+import { SVG_ICON_PROPS as MUI_SVG_ICON_PROPS } from "../../../../../../styles/common/mui/svgIcon";
+export const SVG_ICON_PROPS = {
+    color: MUI_SVG_ICON_PROPS.COLOR.INHERIT,
+    fontSize: MUI_SVG_ICON_PROPS.FONT_SIZE.SMALL,
+};

package/lib/components/common/OutlinedInput/components/InputAdornment/inputAdornment.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledInputAdornment: import("@emotion/styled").StyledComponent<import("@mui/material").InputAdornmentOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "style" | "className" | "classes" | "children" | "position" | "sx" | "variant" | "disableTypography" | "disablePointerEvents"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;

package/lib/components/common/OutlinedInput/components/InputAdornment/inputAdornment.styles.js

@@ -0,0 +1,5 @@
+import styled from "@emotion/styled";
+import { InputAdornment } from "@mui/material";
+export const StyledInputAdornment = styled(InputAdornment) `
+  color: inherit;
+`;

package/lib/components/common/OutlinedInput/outlinedInput.styles.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    hasValue: boolean;
+}
+export declare const StyledOutlinedInput: import("@emotion/styled").StyledComponent<import("@mui/material").OutlinedInputProps & {
+    theme?: import("@emotion/react").Theme;
+} & Props, {}, {}>;
+export {};