@databiosphere/findable-ui 25.0.0 → 26.0.0

package/lib/styles/common/mui/button.js

@@ -1,4 +1,4 @@
-export const COLOR = {
+const COLOR = {
     ERROR: "error",
     INFO: "info",
     INHERIT: "inherit",
@@ -7,7 +7,12 @@ export const COLOR = {
     SUCCESS: "success",
     WARNING: "warning",
 };
-export const VARIANT = {
+const SIZE = {
+    LARGE: "large",
+    MEDIUM: "medium",
+    SMALL: "small",
+};
+const VARIANT = {
     ACTIVE_NAV: "activeNav",
     BACK_NAV: "backNav",
     CONTAINED: "contained",
@@ -15,3 +20,8 @@ export const VARIANT = {
     OUTLINED: "outlined",
     TEXT: "text",
 };
+export const BUTTON_PROPS = {
+    COLOR,
+    SIZE,
+    VARIANT,
+};

package/lib/tests/mui/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const MUI_CLASSES: {
     ACTIVE: string;
     COMPLETED: string;
+    SELECTED: string;
 };

package/lib/tests/mui/constants.js

@@ -1,4 +1,5 @@
 export const MUI_CLASSES = {
     ACTIVE: "Mui-active",
     COMPLETED: "Mui-completed",
+    SELECTED: "Mui-selected",
 };

package/lib/tests/testIds.d.ts

@@ -0,0 +1,19 @@
+export declare const TEST_IDS: {
+    CLEAR_ALL_FILTERS: string;
+    ENTITIES_VIEW: string;
+    EXPORT_BUTTON: string;
+    FILTERS: string;
+    FILTER_CONTROLS: string;
+    FILTER_COUNT: string;
+    FILTER_ITEM: string;
+    FILTER_POPOVER: string;
+    FILTER_RANGE: string;
+    FILTER_TERM: string;
+    SEARCH_ALL_FILTERS: string;
+    SIDEBAR: string;
+    SIDEBAR_DRAWER: string;
+    TABLE_FIRST_CELL: string;
+    TABLE_PAGINATION: string;
+    TABLE_PAGINATION_PAGE: string;
+    TABLE_PAGINATION_RESULTS: string;
+};

package/lib/tests/testIds.js

@@ -0,0 +1,19 @@
+export const TEST_IDS = {
+    CLEAR_ALL_FILTERS: "clear-all-filters",
+    ENTITIES_VIEW: "entities-view",
+    EXPORT_BUTTON: "export-button",
+    FILTERS: "filters",
+    FILTER_CONTROLS: "filter-controls",
+    FILTER_COUNT: "filter-count",
+    FILTER_ITEM: "filter-item",
+    FILTER_POPOVER: "filter-popover",
+    FILTER_RANGE: "filter-range",
+    FILTER_TERM: "filter-term",
+    SEARCH_ALL_FILTERS: "search-all-filters",
+    SIDEBAR: "sidebar",
+    SIDEBAR_DRAWER: "sidebar-drawer",
+    TABLE_FIRST_CELL: "table-first-cell",
+    TABLE_PAGINATION: "table-pagination",
+    TABLE_PAGINATION_PAGE: "table-pagination-page",
+    TABLE_PAGINATION_RESULTS: "table-pagination-results",
+};

package/lib/theme/common/components.d.ts

@@ -19,10 +19,9 @@ export declare const MuiAccordionSummary: Components["MuiAccordionSummary"];
 export declare const MuiAppBar: Components["MuiAppBar"];
 /**
  * MuiBackdrop Component
- * @param theme - Theme.
  * @returns MuiBackdrop component theme styles.
  */
-export declare const MuiBackdrop: (theme: Theme) => Components["MuiBackdrop"];
+export declare const MuiBackdrop: Components["MuiBackdrop"];
 /**
  * MuiBreadcrumbs Component
  * @param theme - Theme.
@@ -80,7 +79,7 @@ export declare const MuiCssBaseline: (theme: Theme) => Components["MuiCssBaselin
  * @param theme - Theme.
  * @returns MuiDialog component theme styles.
  */
-export declare const MuiDialog: (theme: Theme) => Components["MuiDialog"];
+export declare const MuiDialog: Components["MuiDialog"];
 /**
  * MuiDialogActions Component
  */

package/lib/theme/common/components.js

@@ -1,8 +1,9 @@
 import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
+import { PALETTE } from "../../styles/common/constants/palette";
+import { SHADOWS } from "../../styles/common/constants/shadows";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
-import { alpha32, alpha60, alpha64, alpha80, black04, black08, white, } from "./palette";
-import { strokeBottom, strokeTop } from "./shadows";
 import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_SMALL, } from "./typography";
 // Constants
 const FLEX_START = "flex-start";
@@ -21,13 +22,13 @@ export const MuiAccordion = (theme) => {
         styleOverrides: {
             root: {
                 backgroundColor: "transparent",
-                boxShadow: `${strokeTop} ${theme.palette.smoke.main}, ${strokeBottom} ${theme.palette.smoke.main}`,
+                boxShadow: `inset 0 1px 0 0 ${theme.palette.smoke.main}, inset 0 -1px 0 0 ${theme.palette.smoke.main}`,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:before": {
                     display: "none",
                 },
                 "&:nth-of-type(n+2)": {
-                    boxShadow: `${strokeBottom} ${theme.palette.smoke.main}`,
+                    boxShadow: `inset 0 -1px 0 0 ${theme.palette.smoke.main}`,
                 },
             },
         },
@@ -70,26 +71,23 @@ export const MuiAppBar = {
     },
     styleOverrides: {
         colorDefault: {
-            backgroundColor: white,
+            backgroundColor: PALETTE.COMMON_WHITE,
         },
     },
 };
 /**
  * MuiBackdrop Component
- * @param theme - Theme.
  * @returns MuiBackdrop component theme styles.
  */
-export const MuiBackdrop = (theme) => {
-    return {
-        styleOverrides: {
-            invisible: {
-                backgroundColor: "transparent",
-            },
-            root: {
-                backgroundColor: `${theme.palette.ink.main}${alpha80}`,
-            },
+export const MuiBackdrop = {
+    styleOverrides: {
+        invisible: {
+            backgroundColor: "transparent",
         },
-    };
+        root: {
+            backgroundColor: COLOR_MIXES.INK_MAIN_80,
+        },
+    },
 };
 /**
  * MuiBreadcrumbs Component
@@ -159,17 +157,17 @@ export const MuiButton = (theme) => {
             },
             containedSecondary: {
                 backgroundColor: theme.palette.common.white,
-                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
+                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
                 color: theme.palette.ink.main,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&.Mui-focusVisible": {
                     backgroundColor: theme.palette.common.white,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
                     backgroundColor: theme.palette.smoke.lightest,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:active": {
@@ -178,7 +176,7 @@ export const MuiButton = (theme) => {
                 },
                 "&:disabled": {
                     backgroundColor: theme.palette.common.white,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
+                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
                     color: theme.palette.ink.main,
                     opacity: 0.5,
                 },
@@ -189,19 +187,19 @@ export const MuiButton = (theme) => {
             outlinedSecondary: {
                 backgroundColor: "transparent",
                 border: "none",
-                boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${alpha32}`,
+                boxShadow: `inset 0 0 0 1px ${COLOR_MIXES.INK_MAIN_32}`,
                 color: theme.palette.ink.main,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
                     backgroundColor: "transparent",
                     border: "none",
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${alpha64}`,
+                    boxShadow: `inset 0 0 0 1px ${COLOR_MIXES.INK_MAIN_64}`,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:disabled": {
                     backgroundColor: "transparent",
                     border: "none",
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.ink.main}${alpha32}`,
+                    boxShadow: `inset 0 0 0 1px ${COLOR_MIXES.INK_MAIN_32}`,
                     color: theme.palette.ink.main,
                     opacity: 0.5,
                 },
@@ -460,7 +458,7 @@ export const MuiChip = (theme) => {
                 style: {
                     ...theme.typography[TEXT_BODY_SMALL_400],
                     backgroundColor: theme.palette.smoke.main,
-                    boxShadow: `0 0 0 2px ${white}`,
+                    boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
                     height: 24,
                     justifySelf: FLEX_START,
                     minWidth: 0,
@@ -470,7 +468,7 @@ export const MuiChip = (theme) => {
                 props: { variant: "status" },
                 style: {
                     ...theme.typography[TEXT_BODY_SMALL_500],
-                    boxShadow: `0 0 0 2px ${white}`,
+                    boxShadow: `0 0 0 2px ${PALETTE.COMMON_WHITE}`,
                     height: 20,
                     maxWidth: "fit-content",
                     minWidth: 0,
@@ -553,20 +551,18 @@ export const MuiCssBaseline = (theme) => {
  * @param theme - Theme.
  * @returns MuiDialog component theme styles.
  */
-export const MuiDialog = (theme) => {
-    return {
-        styleOverrides: {
-            paper: {
-                boxShadow: theme.shadows[2], // elevation02
-            },
-            root: {
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& .MuiBackdrop-root": {
-                    backgroundColor: `${theme.palette.ink.main}${alpha60}`,
-                },
+export const MuiDialog = {
+    styleOverrides: {
+        paper: {
+            boxShadow: SHADOWS["02"],
+        },
+        root: {
+            // eslint-disable-next-line sort-keys -- disabling key order for readability
+            "& .MuiBackdrop-root": {
+                backgroundColor: COLOR_MIXES.INK_MAIN_60,
             },
         },
-    };
+    },
 };
 /**
  * MuiDialogActions Component
@@ -721,7 +717,7 @@ export const MuiIconButton = (theme) => {
             },
             colorSecondary: {
                 backgroundColor: theme.palette.common.white,
-                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${black08}`,
+                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
                 color: theme.palette.ink.main,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&.Mui-disabled": {
@@ -956,8 +952,8 @@ export const MuiOutlinedInput = (theme) => {
                 borderColor: theme.palette.smoke.dark,
             },
             root: {
-                backgroundColor: white,
-                boxShadow: `inset 0 2px 0 0 ${black04}`,
+                backgroundColor: PALETTE.COMMON_WHITE,
+                boxShadow: `inset 0 2px 0 0 ${COLOR_MIXES.COMMON_BLACK_04}`,
                 paddingLeft: 12,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "& .MuiSvgIcon-root": {
@@ -1011,20 +1007,20 @@ export const MuiPaper = (theme) => {
             {
                 props: { elevation: 1 },
                 style: {
-                    boxShadow: theme.shadows[1], // elevation01
+                    boxShadow: SHADOWS["01"],
                 },
             },
             {
                 props: { elevation: 2 },
                 style: {
-                    boxShadow: theme.shadows[2], // elevation02
+                    boxShadow: SHADOWS["02"],
                 },
             },
             {
                 props: { variant: "footer" },
                 style: {
                     backgroundColor: theme.palette.smoke.light,
-                    boxShadow: `${strokeTop} ${theme.palette.smoke.main}, ${strokeBottom} ${theme.palette.smoke.main}`,
+                    boxShadow: `inset 0 1px 0 0 ${theme.palette.smoke.main}, inset 0 -1px 0 0 ${theme.palette.smoke.main}`,
                 },
             },
             {
@@ -1034,7 +1030,7 @@ export const MuiPaper = (theme) => {
                     borderRadius: 8,
                     borderStyle: "solid",
                     borderWidth: 1,
-                    boxShadow: theme.shadows[2], // elevation02
+                    boxShadow: SHADOWS["02"],
                 },
             },
             {
@@ -1043,7 +1039,7 @@ export const MuiPaper = (theme) => {
                     borderColor: theme.palette.smoke.main,
                     borderStyle: "solid",
                     borderWidth: 1,
-                    boxShadow: theme.shadows[1], // elevation01
+                    boxShadow: SHADOWS["01"],
                 },
             },
             {
@@ -1054,7 +1050,7 @@ export const MuiPaper = (theme) => {
                     borderRadius: 0,
                     borderStyle: "solid",
                     borderWidth: "0 0 1px 0",
-                    boxShadow: theme.shadows[1], // elevation01,
+                    boxShadow: SHADOWS["01"],
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
                     "&.MuiDialog-paper": {
                         marginLeft: 0,
@@ -1070,7 +1066,7 @@ export const MuiPaper = (theme) => {
                     borderColor: theme.palette.smoke.main,
                     borderStyle: "solid",
                     borderWidth: 1,
-                    boxShadow: theme.shadows[1], // elevation01
+                    boxShadow: SHADOWS["01"],
                 },
             },
         ],
@@ -1314,7 +1310,7 @@ export const MuiTabs = (theme) => {
                 height: 3,
             },
             root: {
-                boxShadow: `${strokeBottom} ${theme.palette.smoke.main}`,
+                boxShadow: `inset 0 -1px 0 0 ${theme.palette.smoke.main}`,
                 minHeight: "unset",
                 position: "relative", // Positions scroll fuzz.
             },
@@ -1351,10 +1347,10 @@ export const MuiToggleButton = (theme) => {
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&.Mui-selected": {
-                    backgroundColor: white,
+                    backgroundColor: PALETTE.COMMON_WHITE,
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
                     "&:hover": {
-                        backgroundColor: white,
+                        backgroundColor: PALETTE.COMMON_WHITE,
                     },
                 },
             },
@@ -1427,7 +1423,7 @@ export const MuiTooltip = (theme) => {
             tooltip: {
                 ...theme.typography[TEXT_BODY_SMALL_400],
                 backgroundColor: theme.palette.ink.main,
-                boxShadow: theme.shadows[2], // elevation02
+                boxShadow: SHADOWS["02"],
                 boxSizing: "content-box",
                 padding: "8px 12px",
             },

package/lib/theme/common/palette.d.ts

@@ -1,49 +1,5 @@
 import { PaletteColorOptions } from "@mui/material";
 import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
-/**
- * Color constants
- */
-export declare const alertLight: string;
-export declare const alertLightest: string;
-export declare const alertMain: string;
-export declare const backgroundDefault: string;
-export declare const infoContrastText: string;
-export declare const infoLight: string;
-export declare const infoLightest: string;
-export declare const infoMain: string;
-export declare const inkLight: string;
-export declare const inkMain: string;
-export declare const primaryDark: string;
-export declare const primaryLightest: string;
-export declare const primaryMain: string;
-export declare const smokeDark: string;
-export declare const smokeLight: string;
-export declare const smokeLightest: string;
-export declare const smokeMain: string;
-export declare const successLight: string;
-export declare const successLightest: string;
-export declare const successMain: string;
-export declare const textPrimary: string;
-export declare const warningContrastText: string;
-export declare const warningLight: string;
-export declare const warningLightest: string;
-export declare const warningMain: string;
-export declare const black: string;
-export declare const white: string;
-/**
- * Color alpha constants
- */
-export declare const alpha04: string;
-export declare const alpha08: string;
-export declare const alpha32: string;
-export declare const alpha60: string;
-export declare const alpha64: string;
-export declare const alpha80: string;
-/**
- * Shades
- */
-export declare const black04: string;
-export declare const black08: string;
 /**
  * Palette Option "Alert"
  */

package/lib/theme/common/palette.js

@@ -80,135 +80,80 @@ const BLACK = {
 const WHITE = {
     DEFAULT: "#ffffff",
 };
-/**
- * Color alpha
- */
-const ALPHA = {
-    A04: "0a",
-    A08: "14",
-    A32: "52",
-    A60: "99",
-    A64: "a3",
-    A80: "cc",
-};
-/**
- * Color constants
- */
-export const alertLight = ALERT.LIGHT;
-export const alertLightest = ALERT.LIGHTEST;
-export const alertMain = ALERT.MAIN;
-export const backgroundDefault = BACKGROUND.DEFAULT;
-export const infoContrastText = INFO.CONTRAST_TEXT;
-export const infoLight = INFO.LIGHT;
-export const infoLightest = INFO.LIGHTEST;
-export const infoMain = INFO.MAIN;
-export const inkLight = INK.LIGHT;
-export const inkMain = INK.MAIN;
-export const primaryDark = PRIMARY.DARK;
-export const primaryLightest = PRIMARY.LIGHTEST;
-export const primaryMain = PRIMARY.MAIN;
-export const smokeDark = SMOKE.DARK;
-export const smokeLight = SMOKE.LIGHT;
-export const smokeLightest = SMOKE.LIGHTEST;
-export const smokeMain = SMOKE.MAIN;
-export const successLight = SUCCESS.LIGHT;
-export const successLightest = SUCCESS.LIGHTEST;
-export const successMain = SUCCESS.MAIN;
-export const textPrimary = TEXT.PRIMARY;
-export const warningContrastText = WARNING.CONTRAST_TEXT;
-export const warningLight = WARNING.LIGHT;
-export const warningLightest = WARNING.LIGHTEST;
-export const warningMain = WARNING.MAIN;
-export const black = BLACK.DEFAULT;
-export const white = WHITE.DEFAULT;
-/**
- * Color alpha constants
- */
-export const alpha04 = ALPHA.A04;
-export const alpha08 = ALPHA.A08;
-export const alpha32 = ALPHA.A32;
-export const alpha60 = ALPHA.A60;
-export const alpha64 = ALPHA.A64;
-export const alpha80 = ALPHA.A80;
-/**
- * Shades
- */
-export const black04 = `${black}${alpha04}`;
-export const black08 = `${black}${alpha08}`;
 /**
  * Palette Option "Alert"
  */
 export const alert = {
-    light: alertLight,
-    lightest: alertLightest,
-    main: alertMain,
+    light: ALERT.LIGHT,
+    lightest: ALERT.LIGHTEST,
+    main: ALERT.MAIN,
 };
 /**
  * Palette Option "Background"
  */
 export const background = {
-    default: backgroundDefault,
+    default: BACKGROUND.DEFAULT,
 };
 /**
  * Palette Option "Common"
  */
 export const common = {
-    black: black,
-    white: white,
+    black: BLACK.DEFAULT,
+    white: WHITE.DEFAULT,
 };
 /**
  * Palette Option "Info"
  */
 export const info = {
-    contrastText: infoContrastText,
-    light: infoLight,
-    lightest: infoLightest,
-    main: infoMain,
+    contrastText: INFO.CONTRAST_TEXT,
+    light: INFO.LIGHT,
+    lightest: INFO.LIGHTEST,
+    main: INFO.MAIN,
 };
 /**
  * Palette Option "Ink"
  */
 export const ink = {
-    light: inkLight,
-    main: inkMain,
+    light: INK.LIGHT,
+    main: INK.MAIN,
 };
 /**
  * Palette Option "Primary"
  */
 export const primary = {
-    dark: primaryDark,
-    lightest: primaryLightest,
-    main: primaryMain,
+    dark: PRIMARY.DARK,
+    lightest: PRIMARY.LIGHTEST,
+    main: PRIMARY.MAIN,
 };
 /**
  * Palette Option "Smoke"
  */
 export const smoke = {
-    dark: smokeDark,
-    light: smokeLight,
-    lightest: smokeLightest,
-    main: smokeMain,
+    dark: SMOKE.DARK,
+    light: SMOKE.LIGHT,
+    lightest: SMOKE.LIGHTEST,
+    main: SMOKE.MAIN,
 };
 /**
  * Palette Option "Success"
  */
 export const success = {
-    light: successLight,
-    lightest: successLightest,
-    main: successMain,
+    light: SUCCESS.LIGHT,
+    lightest: SUCCESS.LIGHTEST,
+    main: SUCCESS.MAIN,
 };
 /**
  * Palette Option "Text"
  */
 export const text = {
-    primary: textPrimary,
+    primary: TEXT.PRIMARY,
 };
 /**
  * Palette Option "Warning"
  */
 export const warning = {
-    contrastText: warningContrastText,
-    light: warningLight,
-    lightest: warningLightest,
-    main: warningMain,
+    contrastText: WARNING.CONTRAST_TEXT,
+    light: WARNING.LIGHT,
+    lightest: WARNING.LIGHTEST,
+    main: WARNING.MAIN,
 };

package/lib/theme/common/shadows.d.ts

@@ -1,28 +1,2 @@
-declare enum ELEVATION {
-    E00 = "none",
-    E01 = "0 1px 4px 0 #00000012",
-    E02 = "0 8px 8px -4px #10182808, 0 20px 24px -4px #10182814"
-}
-/**
- * Stroke
- */
-declare enum STROKE {
-    BOTTOM = "inset 0 -1px 0 0",
-    TOP = "inset 0 1px 0 0"
-}
-/**
- * Elevation constants
- */
-export declare const elevation00 = ELEVATION.E00;
-export declare const elevation01 = ELEVATION.E01;
-export declare const elevation02 = ELEVATION.E02;
-/**
- * Shadows constants
- */
-export declare const shadows: ELEVATION[];
-/**
- * Stroke constants
- */
-export declare const strokeBottom = STROKE.BOTTOM;
-export declare const strokeTop = STROKE.TOP;
-export {};
+import { Shadows } from "@mui/material";
+export declare const shadows: Shadows;