@visns-studio/visns-components 6.5.5 → 6.6.0

package/src/components/styles/Navigation.module.scss

@@ -34,6 +34,10 @@
                                  chips.                            default: 4px
      --nav-dropdown-item-padding padding on a dropdown menu row.
                                                               default: 8px 20px
+     --nav-logo-height           height of the logo plate, and the same figure
+                                 everywhere the rail, the content header and the
+                                 mobile drawer offset themselves by it.
+                                                                  default: 50px
 
    Two deliberate omissions: the icon-to-label gap inside a nav item and the
    padding on the chips themselves are internal alignment, not density — the
@@ -711,7 +715,7 @@
            A project whose page background is the same colour can merge the
            plate into the rail instead: `--nav-logo-bg: var(--nav-bg)`. */
         background: var(--nav-logo-bg, rgba(var(--tertiary-color-rgb), 0.95));
-        height: 50px;
+        height: var(--nav-logo-height, 50px);
         display: flex;
         flex-wrap: nowrap;
         justify-content: center;
@@ -727,7 +731,7 @@
             width: 100%;
             position: relative;
             overflow-y: auto; /* Enable vertical scrolling */
-            max-height: calc(100vh - 50px); /* Subtract the logo height */
+            max-height: calc(100vh - var(--nav-logo-height, 50px)); /* Subtract the logo height */
             scrollbar-width: none; /* Firefox */
             -ms-overflow-style: none; /* IE and Edge */
 
@@ -1029,7 +1033,7 @@
         background: var(--tertiary-color);
         box-sizing: border-box;
         padding: 0.15rem;
-        height: 50px;
+        height: var(--nav-logo-height, 50px);
         box-shadow: var(--box-shadow-small);
         display: flex;
         flex-wrap: nowrap;
@@ -1150,8 +1154,8 @@
            below it: start the drawer under the 50px header instead of
            letting the header paint over the drawer's top row. This also
            keeps the hamburger tappable while the drawer is open. */
-        top: 50px;
-        height: calc(100% - 50px);
+        top: var(--nav-logo-height, 50px);
+        height: calc(100% - var(--nav-logo-height, 50px));
         transform: translateX(-2000px);
         transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
         will-change: transform;
@@ -1214,13 +1218,13 @@
 
     .content--full {
         /* The 50px bar is still there below this width. */
-        min-height: calc(100vh - 50px);
+        min-height: calc(100vh - var(--nav-logo-height, 50px));
     }
 
     .drawer-backdrop {
         display: block;
         position: fixed;
-        top: 50px;
+        top: var(--nav-logo-height, 50px);
         left: 0;
         right: 0;
         bottom: 0;

package/src/components/styles/_controls.scss

@@ -17,7 +17,7 @@
     justify-content: center;
     gap: 0.4rem;
     width: max-content;
-    min-height: 2.5rem;
+    min-height: var(--control-height, 2.5rem);
     padding: 0 var(--spacing-md);
     border: 1px solid transparent;
     border-radius: var(--radius-sm);
@@ -102,7 +102,7 @@
 }
 
 @mixin button-small {
-    min-height: 2rem;
+    min-height: var(--control-height-sm, 2rem);
     padding: 0 var(--spacing-sm);
     font-size: var(--font-size-xs);
 }
@@ -111,8 +111,8 @@
 
 @mixin input-base {
     width: 100%;
-    min-height: 2.5rem;
-    padding: 0 0.65rem;
+    min-height: var(--control-height, 2.5rem);
+    padding: 0 var(--input-padding-x, 0.65rem);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-sm);
     background: var(--paper);

package/src/components/styles/density.css

@@ -0,0 +1,85 @@
+/* ============================================================================
+   Display density
+   ----------------------------------------------------------------------------
+   One opt-in mode — `large` — for the projects that run on a shop-floor
+   monitor, a wall-mounted screen or in front of someone who would rather not
+   lean in. Everything in this file hangs off `:root[data-density='large']`,
+   and that attribute is only ever written by GenericAuth when the app passes
+   the `density` prop:
+
+       <GenericAuth density="large" ... />
+
+   No prop, no attribute, no rule in here matches — an app that never opts in
+   renders exactly as it always has. There is nothing to import, disable or
+   fork on that path.
+
+   The lever is rem, not a table of overrides. `font-size: 112.5%` on the root
+   takes the browser's 16px up to 18px, and every rem-based token, control,
+   gap and type size in the library follows on its own — that is most of the
+   mode, done once. The custom properties below only exist to catch what rem
+   cannot reach: the px-valued hooks the components expose (row heights, cell
+   padding, fixed chrome heights, pocket squares) and the page-width caps that
+   should simply stop capping when the screen is being used as a big screen.
+
+   Overriding a value
+   ------------------
+   Apps override any of these from their own global stylesheet with the more
+   specific selector:
+
+       html:root[data-density='large'] {
+           --control-height: 3rem;
+           --grid-cell-padding: 12px 14px;
+       }
+
+   `html:root[...]` outweighs the plain `:root[...]` used here on specificity
+   alone, so it wins no matter which stylesheet the bundler emits first — no
+   `!important`, no import-order archaeology.
+
+   The root font-size has its own escape hatch so an app can dial the whole
+   mode up or down without restating a single hook:
+
+       html:root[data-density='large'] { --density-root-font-size: 125%; }
+
+   Anything the app sets on plain `:root` stays the shared value for both
+   densities — set it here only when `large` should differ.
+   ========================================================================= */
+
+:root[data-density='large'] {
+    font-size: var(--density-root-font-size, 112.5%);
+
+    /* Page frame — a large display is asked for width, so stop capping it. */
+    --page-max-width: none;
+    --page-gutter-x: clamp(0.5rem, 1vw, 1rem);
+    --page-gutter-y: 0.75rem;
+    --page-gutter-narrow: 0.5rem;
+
+    /* Controls */
+    --control-height: 2.75rem;
+    --control-height-sm: 2.25rem;
+
+    /* Data grid — px, because the grid measures and lays out in px. */
+    --grid-toolbar-height: 46px;
+    --grid-cell-padding: 9px 10px;
+    --grid-checkbox-col-width: 72px;
+
+    /* Fixed chrome */
+    --content-header-height: 60px;
+    --nav-logo-height: 56px;
+
+    /* Field pockets (the square icon/affix tiles beside an input) */
+    --field-pocket-size: 44px;
+    --field-pocket-size-sm: 34px;
+    --field-suggestion-font-size: 16px;
+
+    /* Detail pages */
+    --detail-max-width: 1600px;
+}
+
+/* The row-select checkbox column, one step wider again on a tablet view —
+   the row is 60px tall there, so the tap zone should be square-ish. The JS
+   side of this number lives in utils/useDensity.js (checkboxColWidth); the
+   two must agree, since the grid lays the column out from the JS value and
+   these custom properties only hold the cell against Inovua's inline width. */
+:root[data-density='large'] body.tablet-mode {
+    --grid-checkbox-col-width: 80px;
+}

package/src/components/styles/global-datagrid.css

@@ -45,10 +45,14 @@ div[role="tooltip"],
     border-radius: 0 !important;
 }
 
-/* Ensure consistent border radius for cells and reduce padding for compact rows */
-.InovuaReactDataGrid__cell {
+/* Ensure consistent border radius for cells and reduce padding for compact rows.
+   :not(--no-padding): the grid zeroes padding inline on its spacer/expand
+   cells (group nesting columns) and sizes them width:0 when unused — an
+   unconditional !important here re-inflates those to pure padding and
+   shifts group rows out of line with the headers. */
+.InovuaReactDataGrid__cell:not(.InovuaReactDataGrid__cell--no-padding) {
     border-radius: 0 !important;
-    padding: 6px 8px !important; /* Reduced from default padding */
+    padding: var(--grid-cell-padding, 6px 8px) !important; /* Reduced from default padding */
 }
 
 /* Word wrap enabled cells - specific class for columns with wordWrap: true */
@@ -84,10 +88,13 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap span {
     max-height: 100% !important;
 }
 
-body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap {
+body.tablet-mode
+    .InovuaReactDataGrid__cell.cell-word-wrap:not(
+        .InovuaReactDataGrid__cell--no-padding
+    ) {
     height: 100% !important;
     align-items: center !important;
-    padding: 6px 8px !important;
+    padding: var(--grid-cell-padding, 6px 8px) !important;
 }
 
 body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
@@ -103,10 +110,10 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     overflow: hidden !important;
 }
 
-/* Reduce header cell padding as well */
-.InovuaReactDataGrid__header-cell {
-    padding: 6px 8px !important;
-}
+/* NOTE: this fork renders header cells as .InovuaReactDataGrid__column-header
+   (there is no __header-cell class in its DOM), so header padding is left to
+   the module stylesheet; a __header-cell padding rule that used to sit here
+   was dead code and has been removed. */
 
 /* Fix for focus outline */
 .InovuaReactDataGrid:focus,
@@ -115,173 +122,49 @@ body.tablet-mode .InovuaReactDataGrid__cell.cell-word-wrap > div {
     box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 59, 130, 246), 0.2) !important;
 }
 
-/* Checkbox column improvements for touch devices - Compact version */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-    padding: 6px 8px !important; /* Reduced padding for compact rows */
-    min-width: 60px !important;
-    width: 60px !important;
-    max-width: 60px !important;
-    position: relative !important;
-    cursor: pointer !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    /* Ensure the entire cell is clickable */
-    user-select: none !important;
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
-}
-
-/* Improve checkbox touch targets */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    input[type='checkbox'] {
-    width: 20px !important;
-    height: 20px !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-    position: relative !important;
-    z-index: 2 !important;
-}
-
-/* Create larger touch target area around checkbox */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    .InovuaReactDataGrid__checkbox-wrapper,
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
+/* Checkbox column.
+
+   The rules that used to live here keyed every declaration on
+   [data-column-id='__checkbox-column'] — an attribute this datagrid fork has
+   never rendered — so none of them ever matched: not the 60px width pins,
+   not the 44px touch wrappers. Discovered Aug 2026 when the column collapsed
+   to the grid's internal 40px default with no CSS backstop to catch it.
+
+   The column's width is owned by the JS side (checkboxColumnProps in
+   DataGrid.jsx, fed from utils/useDensity.js checkboxColWidth); CSS cannot
+   safely fight the grid's layout engine on width. What CSS can usefully add
+   is glyph size and cursor, on the classes that actually exist:
+   .InovuaReactDataGrid__checkbox is the toolkit checkbox root in body cells
+   (it draws a 16px svg with a proper viewBox, so CSS sizing scales it
+   cleanly), and the header cell holds a native input rendered by
+   DataGrid.jsx. Gated on large density; default-density apps keep the
+   rendering they have always had. */
+:root[data-density='large']
+    .InovuaReactDataGrid__cell
     .InovuaReactDataGrid__checkbox {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    min-height: 44px !important;
-    min-width: 44px !important;
-    padding: 12px !important;
-    margin: -12px !important;
-    cursor: pointer !important;
-    border-radius: 4px !important;
-    transition: background-color 0.2s ease !important;
-}
-
-/* Touch-friendly hover effect for the entire cell */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']:hover {
-    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.05) !important;
-}
-
-/* Touch-friendly hover effect for checkbox wrapper */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    .InovuaReactDataGrid__checkbox-wrapper:hover,
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    .InovuaReactDataGrid__checkbox:hover {
-    background-color: rgba(var(--primary-rgb, 59, 130, 246), 0.1) !important;
+    cursor: pointer;
 }
 
-/* Header checkbox improvements - Compact version */
-.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
-    padding: 6px 8px !important; /* Reduced padding for compact rows */
-    min-width: 60px !important;
-    width: 60px !important;
-    max-width: 60px !important;
+:root[data-density='large']
+    .InovuaReactDataGrid__cell
+    .InovuaReactDataGrid__checkbox svg {
+    width: 22px;
+    height: 22px;
 }
 
-.InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
+/* !important because global.css draws every non-react-toggle checkbox at a
+   fixed 14px !important — an inline style cannot beat that, and neither can
+   this rule without its own !important. The header cell in this fork is
+   .InovuaReactDataGrid__column-header (never __header-cell). */
+:root[data-density='large']
+    .InovuaReactDataGrid__column-header
     input[type='checkbox'] {
-    width: 20px !important;
-    height: 20px !important;
-    margin: 0 !important;
-    cursor: pointer !important;
-}
-
-/* Prevent text selection in checkbox column */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-    user-select: none !important;
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
+    width: 22px !important;
+    height: 22px !important;
+    cursor: pointer;
 }
 
-/* Additional checkbox styling for better UX */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    .InovuaReactDataGrid__cell-content {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    width: 100% !important;
-    height: 100% !important;
-}
 
-/* Focus styles for accessibility */
-.InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-    input[type='checkbox']:focus {
-    outline: 2px solid rgba(var(--primary-rgb, 59, 130, 246), 0.5) !important;
-    outline-offset: 2px !important;
-}
-
-/* Ensure checkbox column doesn't interfere with row hover */
-.InovuaReactDataGrid__row:hover
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-    background-color: inherit !important;
-}
-
-/* Mobile-specific improvements - Compact version */
-@media (max-width: 768px) {
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-        min-width: 70px !important;
-        width: 70px !important;
-        max-width: 70px !important;
-        padding: 8px 12px !important; /* Reduced padding for compact rows */
-    }
-
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        input[type='checkbox'] {
-        width: 24px !important;
-        height: 24px !important;
-    }
-
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        .InovuaReactDataGrid__checkbox-wrapper,
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        .InovuaReactDataGrid__checkbox {
-        min-height: 48px !important;
-        min-width: 48px !important;
-        padding: 16px !important;
-        margin: -16px !important;
-    }
-
-    .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column'] {
-        min-width: 70px !important;
-        width: 70px !important;
-        max-width: 70px !important;
-        padding: 8px 12px !important; /* Reduced padding for compact rows */
-    }
-
-    .InovuaReactDataGrid__header-cell[data-column-id='__checkbox-column']
-        input[type='checkbox'] {
-        width: 24px !important;
-        height: 24px !important;
-    }
-}
-
-/* Touch device specific improvements - Compact version */
-@media (hover: none) and (pointer: coarse) {
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column'] {
-        padding: 12px !important; /* Reduced padding for compact rows */
-    }
-
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        input[type='checkbox'] {
-        width: 28px !important;
-        height: 28px !important;
-    }
-
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        .InovuaReactDataGrid__checkbox-wrapper,
-    .InovuaReactDataGrid__cell[data-column-id='__checkbox-column']
-        .InovuaReactDataGrid__checkbox {
-        min-height: 52px !important;
-        min-width: 52px !important;
-        padding: 18px !important;
-        margin: -18px !important;
-    }
-}
 
 /* Group expand/collapse icon fixes - Enhanced for better visibility */
 .InovuaReactDataGrid__group-expand-icon,

package/src/components/utils/useDensity.js

@@ -0,0 +1,225 @@
+import { useMemo, useState, useEffect, useSyncExternalStore } from 'react';
+
+/**
+ * Display density, in JS.
+ *
+ * Two independent switches decide how roomy the UI is, and both live on the
+ * document rather than in React state, because both are set by whoever owns
+ * the page rather than by the component reading them:
+ *
+ *   - `data-density` on `<html>` — the app-wide opt-in, written by GenericAuth
+ *     from its `density` prop (see `styles/density.css` for the CSS half).
+ *   - `tablet-mode` on `<body>` — the per-view opt-in, written by GenericIndex
+ *     when a view config sets `"tabletMode": true`.
+ *
+ * They compose: a tablet view inside a large-density app is the roomiest of
+ * the four combinations. CSS reads both selectors directly; anything that has
+ * to lay out in JS — the datagrid measures and sizes rows in px — reads them
+ * through `useDensity()` so there is one table of numbers instead of a
+ * `isTabletMode ? 52 : 32` at every call site.
+ */
+
+/**
+ * The px geometry the datagrid cannot express in CSS.
+ *
+ * `default.desktop` / `default.tablet` are the values the grid has always
+ * used and must not drift — `tests/density.test.mjs` pins them.
+ *
+ *   rowHeight      fixed row height, or null to let the grid measure rows.
+ *   minRowHeight   floor applied to measured rows.
+ *   rowUnit        the height one row actually occupies, used to work out how
+ *                  many rows fit a page.
+ *   columnMinWidth floor for a column with no explicit `minWidth`.
+ *   actionColUnit  width one action icon needs inside an action column.
+ *   checkboxColWidth  fixed width of the row-select checkbox column.
+ */
+export const DENSITY_GRID = {
+    default: {
+        desktop: {
+            rowHeight: null,
+            minRowHeight: 32,
+            rowUnit: 32,
+            columnMinWidth: 80,
+            actionColUnit: 34,
+            checkboxColWidth: 60,
+        },
+        tablet: {
+            rowHeight: 52,
+            minRowHeight: 52,
+            rowUnit: 52,
+            columnMinWidth: 80,
+            actionColUnit: 44,
+            checkboxColWidth: 60,
+        },
+    },
+    large: {
+        desktop: {
+            rowHeight: null,
+            minRowHeight: 40,
+            rowUnit: 40,
+            columnMinWidth: 96,
+            actionColUnit: 44,
+            checkboxColWidth: 72,
+        },
+        tablet: {
+            rowHeight: 60,
+            minRowHeight: 60,
+            rowUnit: 60,
+            columnMinWidth: 96,
+            actionColUnit: 52,
+            checkboxColWidth: 80,
+        },
+    },
+};
+
+export const DEFAULT_DENSITY = 'default';
+
+const SERVER_SNAPSHOT = `${DEFAULT_DENSITY}|false`;
+
+/**
+ * Read both switches off the document as one string. A string (not an object)
+ * so `useSyncExternalStore` can compare snapshots by value — returning a fresh
+ * object from `getSnapshot` makes React re-render forever.
+ */
+const readSnapshot = () => {
+    if (typeof document === 'undefined') {
+        return SERVER_SNAPSHOT;
+    }
+
+    const density =
+        document.documentElement?.getAttribute('data-density') ||
+        DEFAULT_DENSITY;
+    const isTablet = Boolean(
+        document.body && document.body.classList.contains('tablet-mode')
+    );
+
+    return `${density}|${isTablet}`;
+};
+
+const getServerSnapshot = () => SERVER_SNAPSHOT;
+
+/**
+ * Notify on either switch changing. Two observers rather than one on the
+ * document, because we only care about one attribute on each of two nodes and
+ * a subtree observer would fire on every class change anywhere in the app.
+ */
+const subscribe = (onChange) => {
+    if (
+        typeof document === 'undefined' ||
+        typeof MutationObserver === 'undefined'
+    ) {
+        return () => {};
+    }
+
+    const observers = [];
+
+    if (document.documentElement) {
+        const rootObserver = new MutationObserver(onChange);
+        rootObserver.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-density'],
+        });
+        observers.push(rootObserver);
+    }
+
+    if (document.body) {
+        const bodyObserver = new MutationObserver(onChange);
+        bodyObserver.observe(document.body, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        observers.push(bodyObserver);
+    }
+
+    return () => observers.forEach((observer) => observer.disconnect());
+};
+
+/**
+ * Resolve a snapshot string into the shape callers want.
+ *
+ * @param {string} snapshot `"<density>|<isTabletMode>"`
+ * @returns {{density: string, isLarge: boolean, isTabletMode: boolean, grid: object}}
+ */
+export const parseDensitySnapshot = (snapshot) => {
+    const [rawDensity, rawTablet] = String(snapshot).split('|');
+    // An unrecognised attribute value styles as nothing in CSS, so it must
+    // measure as nothing here too.
+    const density = DENSITY_GRID[rawDensity] ? rawDensity : DEFAULT_DENSITY;
+    const isTabletMode = rawTablet === 'true';
+
+    return {
+        density,
+        isLarge: density === 'large',
+        isTabletMode,
+        grid: DENSITY_GRID[density][isTabletMode ? 'tablet' : 'desktop'],
+    };
+};
+
+/**
+ * @returns {{density: string, isLarge: boolean, isTabletMode: boolean, grid: object}}
+ *          `grid` is a stable reference out of `DENSITY_GRID`, so it is safe
+ *          in a dependency array.
+ */
+export const useDensity = () => {
+    const snapshot = useSyncExternalStore(
+        subscribe,
+        readSnapshot,
+        getServerSnapshot
+    );
+
+    return useMemo(() => parseDensitySnapshot(snapshot), [snapshot]);
+};
+
+/**
+ * Height left on screen below `ref`'s element, for panes that should fill the
+ * window instead of taking a fraction of it.
+ *
+ * Returns `null` until it can measure — no element, no window, or a
+ * measurement that comes out non-positive (the element is display:none, or
+ * scrolled out of view) — so callers can keep their own fallback rather than
+ * flashing a zero-height pane.
+ *
+ * @param {{current: HTMLElement|null}} ref     wrapper to measure from.
+ * @param {object}  [options]
+ * @param {boolean} [options.enabled=true]      false parks the hook at null.
+ * @param {number}  [options.bottomGutter=16]   px left below the element.
+ * @param {*}       [options.recomputeKey]      change it to force a re-measure
+ *                                              (e.g. the app's window height).
+ * @returns {number|null}
+ */
+export const useAvailableHeight = (
+    ref,
+    { enabled = true, bottomGutter = 16, recomputeKey } = {}
+) => {
+    const [height, setHeight] = useState(null);
+
+    useEffect(() => {
+        if (!enabled || typeof window === 'undefined') {
+            setHeight(null);
+            return undefined;
+        }
+
+        const measure = () => {
+            const node = ref?.current;
+
+            if (!node || typeof node.getBoundingClientRect !== 'function') {
+                setHeight(null);
+                return;
+            }
+
+            const { top } = node.getBoundingClientRect();
+            const next = window.innerHeight - top - bottomGutter;
+
+            setHeight(Number.isFinite(next) && next > 0 ? next : null);
+        };
+
+        measure();
+        window.addEventListener('resize', measure);
+
+        return () => window.removeEventListener('resize', measure);
+    }, [ref, enabled, bottomGutter, recomputeKey]);
+
+    return height;
+};
+
+export default useDensity;

package/src/index.js

@@ -7,6 +7,7 @@ import SortableList from './components/sorting/List';
 /** Utility Components */
 import { confirmDialog } from './components/utils/ConfirmDialog';
 import { showConfirmDialog } from './components/generic/ConfirmationDialog';
+import { useDensity, useAvailableHeight, DENSITY_GRID } from './components/utils/useDensity';
 
 /** CRM Components */
 import AsyncSelect from './components/AsyncSelect';
@@ -121,6 +122,7 @@ export {
     DataGrid,
     DataGridSearch,
     DatePickerPortal,
+    DENSITY_GRID,
     Download,
     DropZone,
     CategorizedDropZone,
@@ -173,6 +175,8 @@ export {
     StandardModal,
     Table,
     TableFilter,
+    useAvailableHeight,
+    useDensity,
     VariableInserter,
     Verify,
 };