@databiosphere/findable-ui 46.1.2 → 47.0.2

package/.eslintrc.json

@@ -71,7 +71,8 @@
     {
       "files": "**/*.test.ts",
       "rules": {
-        "@typescript-eslint/no-explicit-any": "off"
+        "@typescript-eslint/no-explicit-any": "off",
+        "sonarjs/no-duplicate-string": "off"
       }
     }
   ]

package/.github/copilot-instructions.md

@@ -0,0 +1,176 @@
+# Copilot Instructions for findable-ui
+
+## Repository Purpose
+
+This is a TypeScript library package (`@databiosphere/findable-ui`) that provides reusable UI components and utilities for Data Biosphere applications, particularly the Data Browser. It's designed as an npm package that exports compiled JavaScript from the `lib` directory.
+
+## Key Project Information
+
+- **Language**: TypeScript with strict mode enabled
+- **Node Version**: 20.10.0 (enforced)
+- **UI Framework**: React 18 with Material-UI (MUI) v7
+- **Build System**: TypeScript compiler (tsc)
+- **Testing**: Jest with React Testing Library
+- **Package Type**: Library package that compiles to `lib/` directory
+
+## Repository Structure
+
+- `/src` - TypeScript source files (compiles to `/lib`)
+  - `/components` - React UI components
+  - `/hooks` - Custom React hooks
+  - `/providers` - React context providers
+  - `/utils` - Utility functions
+  - `/theme` - MUI theme configuration
+  - `/config` - Configuration files
+  - `/apis` - API client code
+  - `/services` - Business logic services
+  - `/types` - TypeScript type definitions
+  - `/views` - Page-level components
+- `/tests` - Jest test files (separate from src)
+- `/lib` - Compiled JavaScript output (git-ignored)
+- `/.storybook` - Storybook configuration
+
+## Code Style and Standards
+
+### TypeScript Requirements
+
+- **Strict mode enabled**: All TypeScript strict checks are enforced
+- **Explicit return types required**: All functions must have explicit return type annotations (except in `.styles.ts(x)` files)
+- **No implicit any**: Avoid `any` type; use proper typing (exceptions allowed in test files)
+- **Null safety**: Strict null checks are enforced
+
+### Code Organization
+
+- **Sort keys**: Object keys, destructured keys, interface properties, and string enums must be sorted alphabetically (enforced by ESLint)
+- **Import organization**: Imports are auto-organized with prettier-plugin-organize-imports
+- **File naming**: Use kebab-case for file names (e.g., `my-component.tsx`)
+
+### Documentation Requirements
+
+All code must include JSDoc comments with:
+
+- **Function descriptions**: Required for all functions
+- **Parameter documentation**: `@param` tags with descriptions for all parameters
+- **Return value documentation**: `@returns` tag with description
+- **Hyphen before param descriptions**: Required format
+
+Example:
+
+```typescript
+/**
+ * Transforms a route by removing inactivity parameters.
+ * @param routes - Array of route strings to transform.
+ * @returns The first non-login route without inactivity param, or undefined.
+ */
+function transformRoute(routes: string[]): string | undefined {
+  // implementation
+}
+```
+
+### React Patterns
+
+- **Hooks dependencies**: The `react-hooks/exhaustive-deps` rule is enforced - always include all dependencies in useEffect, useCallback, etc.
+- **Component structure**: Use functional components with hooks
+- **Styling**: Use Emotion styled components (`.styles.ts` or `.styles.tsx` files)
+
+## Build, Test, and Validation Steps
+
+### Before Making Changes
+
+1. Install dependencies: `npm ci`
+2. Run all checks to verify baseline:
+   ```bash
+   npm run check-format
+   npm run lint
+   npm run test
+   npm run test-compile
+   ```
+
+### During Development
+
+1. **Check formatting**: `npm run check-format` (Prettier)
+2. **Lint code**: `npm run lint` (ESLint with TypeScript, SonarJS, and other plugins)
+3. **Run tests**: `npm run test` (Jest with jsdom environment)
+4. **Type check**: `npm run test-compile` (TypeScript compiler without emit)
+5. **Compile library**: `npx tsc` (when making changes that need to be tested in consuming apps)
+
+### All PRs Must Pass
+
+- Prettier formatting check
+- ESLint with no errors
+- All Jest tests passing
+- TypeScript compilation without errors
+
+## Testing Guidelines
+
+- **Test location**: Tests live in the `/tests` directory (not co-located with source files)
+- **Test framework**: Jest with `@testing-library/react` for component tests
+- **Test naming**: Use `.test.ts` or `.test.tsx` extension
+- **Setup**: Tests use Storybook decorators and parameters (see `tests/setup.ts`)
+- **Mocking**: Global mocks for ResizeObserver, TextEncoder, and TextDecoder are pre-configured
+- **Test structure**: Follow the existing pattern of describe/it blocks with clear descriptions
+
+Example test structure:
+
+```typescript
+describe("ComponentName", () => {
+  it("should do something specific", () => {
+    // Arrange
+    const input = "test";
+
+    // Act
+    const result = functionUnderTest(input);
+
+    // Assert
+    expect(result).toBe("expected");
+  });
+});
+```
+
+## Contribution Workflow
+
+1. **Make minimal changes**: This is a library package - changes impact all consumers
+2. **Maintain backward compatibility**: Breaking changes require major version bumps
+3. **Update documentation**: Keep README and inline docs current
+4. **No breaking test changes**: Don't remove or modify existing tests unless fixing bugs
+5. **Test compilation**: Always run `npm run test-compile` to ensure TypeScript compilation succeeds
+
+## Peer Dependencies
+
+This package has extensive peer dependencies that consuming applications must provide:
+
+- React 18.3+
+- Material-UI (@mui/material, @mui/icons-material) v7
+- Next.js 14.2+ and next-auth
+- Emotion (@emotion/react, @emotion/styled)
+- TanStack Table and Virtual (@tanstack/react-table, @tanstack/react-virtual)
+- Various utilities (ky, uuid, yup, etc.)
+
+**Do not add these as direct dependencies** - they must remain as peer dependencies.
+
+## Common Pitfalls to Avoid
+
+1. **Don't import from lib/**: Always import from src/ during development
+2. **Don't add dependencies to dependencies**: New packages should go in peerDependencies or devDependencies
+3. **Don't disable ESLint rules without justification**: The strict rules maintain code quality
+4. **Don't skip JSDoc**: All public functions require documentation
+5. **Don't modify package-lock.json manually**: Use npm commands
+6. **Don't commit lib/ directory**: It's build output and git-ignored
+
+## Special Notes
+
+- **Storybook**: Available for component development (`npm run storybook`)
+- **Husky hooks**: Pre-commit hooks are configured via `.husky`
+- **Release management**: Uses release-please for automated versioning and changelog
+- **Link for local development**: Use `npm link` to test changes in Data Browser locally (see README)
+
+## Development with Data Browser
+
+When developing findable-ui alongside the Data Browser:
+
+1. Clone both repos in the same parent directory
+2. In findable-ui: Run `npm ci`, bump version, run `npx tsc`
+3. In data-browser/explorer: Run `npm link ../../findable-ui`
+4. May need to comment out certain packages in next.config.mjs webpack config
+
+See README.md for complete local development workflow.

package/.github/workflows/release-please.yml

@@ -7,6 +7,7 @@ on:
 permissions:
   contents: write
   pull-requests: write
+  id-token: write # Required for trusted publishing to npm
 
 name: release-please
 
@@ -27,8 +28,13 @@ jobs:
       - uses: actions/setup-node@v4
         if: ${{ steps.release.outputs.release_created }}
         with:
-          node-version: 20
+          node-version: "22.12.0"
           registry-url: "https://registry.npmjs.org"
+          always-auth: true # Enable authentication for trusted publishing
+
+      - name: Upgrade npm for trusted publishing
+        if: ${{ steps.release.outputs.release_created }}
+        run: npm install -g npm@^11.5.1
 
       - name: Install dependencies
         if: ${{ steps.release.outputs.release_created }}
@@ -40,6 +46,4 @@ jobs:
 
       - name: Publish to NPM
         if: ${{ steps.release.outputs.release_created }}
-        run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.DATABIOSPHERE_FINDABLE_UI_NPM_PUBLISH_TOKEN }} # Ensure this token is scoped to only the permissions required for npm publication to limit security risks.
+        run: npm publish --provenance --access public

package/.github/workflows/run-checks.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20.10.0"
+          node-version: "22.12.0"
           cache: "npm"
 
       - name: Install dependencies
@@ -41,7 +41,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20.10.0"
+          node-version: "22.12.0"
           cache: "npm"
 
       - name: Remove package lock

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "46.1.2"
+  ".": "47.0.2"
 }

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## [47.0.2](https://github.com/DataBiosphere/findable-ui/compare/v47.0.1...v47.0.2) (2025-12-11)
+
+
+### Chores
+
+* remove trailing whitespace from README to trigger release ([#728](https://github.com/DataBiosphere/findable-ui/issues/728)) ([5f24174](https://github.com/DataBiosphere/findable-ui/commit/5f24174aed98fc54429e939d9b63c542f1cce0b8))
+
+## [47.0.1](https://github.com/DataBiosphere/findable-ui/compare/v47.0.0...v47.0.1) (2025-12-11)
+
+
+### Chores
+
+* add GitHub Copilot instructions for repository ([#709](https://github.com/DataBiosphere/findable-ui/issues/709)) ([#710](https://github.com/DataBiosphere/findable-ui/issues/710)) ([e2bf4fb](https://github.com/DataBiosphere/findable-ui/commit/e2bf4fb81b46fc1376c7797141fc41a8a6029c9f))
+
+## [47.0.0](https://github.com/DataBiosphere/findable-ui/compare/v46.1.3...v47.0.0) (2025-12-11)
+
+
+### ⚠ BREAKING CHANGES
+
+* upgrade Node.js from 20.10.0 to 22.12.0 ([#713](https://github.com/DataBiosphere/findable-ui/issues/713)) (#716)
+
+### Chores
+
+* update the package-lock ([#720](https://github.com/DataBiosphere/findable-ui/issues/720)) ([#721](https://github.com/DataBiosphere/findable-ui/issues/721)) ([6cf79a9](https://github.com/DataBiosphere/findable-ui/commit/6cf79a9b18ac39365b92ae041df1ab67fe825434))
+* upgrade Node.js from 20.10.0 to 22.12.0 ([#713](https://github.com/DataBiosphere/findable-ui/issues/713)) ([#716](https://github.com/DataBiosphere/findable-ui/issues/716)) ([26d97dd](https://github.com/DataBiosphere/findable-ui/commit/26d97dd951c65099b5e868ead0b03205eb15235a))
+
+## [46.1.3](https://github.com/DataBiosphere/findable-ui/compare/v46.1.2...v46.1.3) (2025-12-01)
+
+
+### Chores
+
+* bump nextjs version to fix vulnerabilities ([#704](https://github.com/DataBiosphere/findable-ui/issues/704)) ([#705](https://github.com/DataBiosphere/findable-ui/issues/705)) ([096ba35](https://github.com/DataBiosphere/findable-ui/commit/096ba35d926fe8b40b1c0b981770076355cae8ab))
+
 ## [46.1.2](https://github.com/DataBiosphere/findable-ui/compare/v46.1.1...v46.1.2) (2025-11-21)
 
 

package/README.md

@@ -12,24 +12,18 @@
 
 1. Clone this repository into the same parent folder as
    the [Data Biosphere Data Browser](https://github.com/DataBiosphere/data-browser).
-2. Set `node` version to `20.10.0` (this is also the version used by the Data Browser).
+2. Set `node` version to `22.12.0` (this is also the version used by the Data Browser).
 3. In the `findable-ui` repository directory:
-    - Run `npm ci`.
-    - [Bump the version number](https://docs.npmjs.com/cli/v6/commands/npm-version) in `package.json`
-      e.g. `npm version <update_type>`.
+    - Run `npm update`.
     - Run `npx tsc` (this should be run when this repository is first downloaded and when any changes are made to the
       source files; one way this can be done more efficiently is
       by [setting the default build task](https://code.visualstudio.com/docs/typescript/typescript-compiling#_step-3-make-the-typescript-build-the-default)
       in VS Code so that it can be done with a keyboard shortcut).
 4. In the Data Browser `explorer` directory (e.g. `data-browser/explorer`):
-    - Run `npm ci`.
-    - Update the `@databiosphere/findable-ui` dependency in the `package.json` file to use the new version
-      of Findable UI.
-    - Run `npm link ../../findable-ui`, which will create a symlink in node_modules pointing
+    - Run `npm update`.
+    - Run `npm link ../findable-ui`, which will create a symlink in node_modules pointing
       to findable-ui.
     - If any packages are later installed or uninstalled, the symlink will need to be created again, which can be done
       with the same command or by running `npm link @databiosphere/findable-ui`. 
     - To successfully link to findable-ui, you may need to comment out the following packages from the `next.config.mjs` webpack configuration:
       - `@tanstack/react-table`
-      - `axios`
-

package/docs/TRUSTED_PUBLISHING.md

@@ -0,0 +1,133 @@
+# Trusted Publishing Setup for NPM
+
+This repository uses GitHub's trusted publishing workflow to securely publish packages to npm without using long-lived access tokens.
+
+## What is Trusted Publishing?
+
+Trusted publishing is a security feature that allows GitHub Actions to publish packages to npm using short-lived, automatically generated tokens via OpenID Connect (OIDC). This eliminates the need to store long-lived npm tokens as repository secrets, reducing the attack surface and improving supply chain security.
+
+## Configuration
+
+### GitHub Actions Workflow
+
+The `.github/workflows/release-please.yml` workflow is configured with the following settings for trusted publishing:
+
+#### Required Permissions
+
+```yaml
+permissions:
+  contents: write # Required for release-please to create releases
+  pull-requests: write # Required for release-please to create PRs
+  id-token: write # Required for trusted publishing to npm
+```
+
+The `id-token: write` permission enables the workflow to request OIDC tokens from GitHub's OIDC provider.
+
+#### Node.js Setup
+
+```yaml
+- uses: actions/setup-node@v4
+  with:
+    node-version: "22.12.0"
+    registry-url: "https://registry.npmjs.org"
+    always-auth: true # Enable authentication for trusted publishing
+```
+
+The `always-auth: true` setting ensures that authentication is enabled when publishing packages.
+
+#### Publishing with Provenance
+
+```yaml
+- name: Publish to NPM
+  run: npm publish --provenance --access public
+```
+
+The `--provenance` flag enables build provenance, which creates a publicly verifiable link between the package and its source code and build. The `--access public` flag ensures the package is published as public.
+
+## NPM Setup Requirements
+
+To enable trusted publishing for this package on npm, you need to:
+
+1. **Log in to npm** and navigate to the package settings for `@databiosphere/findable-ui`
+2. **Add a GitHub Actions Publishing Workflow**:
+
+   - Go to the package's publishing settings
+   - Click "Add GitHub Actions Publishing Workflow"
+   - Configure the trusted publisher with:
+     - **Repository**: `DataBiosphere/findable-ui`
+     - **Workflow**: `.github/workflows/release-please.yml`
+     - **Environment**: (leave blank, no environment is used)
+
+3. **Verify the Configuration**:
+   - Ensure the trusted publisher is listed in the package settings
+   - The workflow will use OIDC to authenticate automatically when publishing
+
+## Security Benefits
+
+- **No Long-Lived Tokens**: Eliminates the need to store npm access tokens as GitHub secrets
+- **Automatic Rotation**: Tokens are short-lived and automatically generated for each workflow run
+- **Build Provenance**: The `--provenance` flag creates verifiable attestations linking the package to its source
+- **Reduced Attack Surface**: Compromised secrets cannot be used outside the workflow context
+- **Audit Trail**: All publishes are tied to specific GitHub Actions workflow runs
+
+## Migration Notes
+
+### Removed Configuration
+
+The following configuration is no longer needed with trusted publishing:
+
+- **Repository Secret**: `DATABIOSPHERE_FINDABLE_UI_NPM_PUBLISH_TOKEN` - This secret can be safely removed from the repository settings as it is no longer used. **Important**: Only remove this secret after confirming the trusted publishing workflow works successfully in production to avoid disrupting the release process.
+- **NODE_AUTH_TOKEN Environment Variable**: No longer required in the publish step
+
+### Workflow Changes
+
+1. Added `id-token: write` permission
+2. Added `always-auth: true` to `setup-node` action
+3. Removed `NODE_AUTH_TOKEN` environment variable from publish step
+4. Added `--provenance` and `--access public` flags to `npm publish`
+
+## Testing
+
+To test the trusted publishing workflow:
+
+1. Create a test commit on a feature branch
+2. Merge to the `main` branch
+3. If the commit triggers a release (based on conventional commits), the workflow will:
+   - Create a release PR via release-please
+   - Once merged, create a GitHub release
+   - Automatically publish to npm using trusted publishing
+
+Monitor the workflow run in the Actions tab to verify successful publication.
+
+## References
+
+- [npm Trusted Publishers Documentation](https://docs.npmjs.com/trusted-publishers)
+- [GitHub: Publishing Node.js Packages](https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages/publishing-nodejs-packages-from-github-actions)
+- [npm Provenance Documentation](https://docs.npmjs.com/generating-provenance-statements)
+- [OpenID Connect in GitHub Actions](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
+
+## Troubleshooting
+
+### Publishing Fails with Authentication Error
+
+If the workflow fails with an authentication error:
+
+1. Verify that trusted publishing is properly configured on npm for the package
+2. Ensure the repository, workflow path, and environment (if any) match exactly in the npm settings
+3. Confirm that the workflow has the `id-token: write` permission
+
+### Provenance Attestation Not Generated
+
+If the package is published but provenance is not attached:
+
+1. Ensure the `--provenance` flag is included in the `npm publish` command
+2. Verify that the workflow has `id-token: write` permission
+3. Check that the package is being published from a supported environment (GitHub Actions)
+
+### Package Access Issues
+
+If the package fails to publish due to access issues:
+
+1. Ensure the `--access public` flag is set (for public packages)
+2. Verify that the npm package settings allow public access
+3. Confirm that the organization and package name are correct

package/lib/common/utils.js

@@ -7,7 +7,7 @@ export function isValidUrl(testUrl) {
     try {
         return Boolean(new URL(testUrl));
     }
-    catch (e) {
+    catch {
         return false;
     }
 }

package/lib/components/DataDictionary/components/Table/columns/columnDef.d.ts

@@ -0,0 +1,6 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Attribute } from "../../../../../common/entities";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+import { AttributeValue } from "./types";
+export declare const COLUMN_DEF: Record<keyof typeof COLUMN_IDENTIFIER, ColumnDef<Attribute, AttributeValue>>;
+export declare const COLUMN_DEFS: ColumnDef<Attribute, AttributeValue>[];

package/lib/components/DataDictionary/components/Table/columns/columnDef.js

@@ -0,0 +1,33 @@
+import { BasicCell } from "../components/BasicCell/basicCell";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
+const COLUMN_DEF_DESCRIPTION = {
+    accessorFn: (row) => row.description,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Description",
+    id: COLUMN_IDENTIFIER.DESCRIPTION,
+    meta: { width: { max: "2fr", min: "480px" } },
+};
+const COLUMN_DEF_KEY = {
+    accessorFn: (row) => row.key,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Key",
+    id: COLUMN_IDENTIFIER.KEY,
+    meta: { width: { max: "1fr", min: "180px" } },
+};
+const COLUMN_DEF_LABEL = {
+    accessorFn: (row) => row.label,
+    cell: (props) => BasicCell({ ...props }),
+    header: "Label",
+    id: COLUMN_IDENTIFIER.LABEL,
+    meta: { width: { max: "1fr", min: "200px" } },
+};
+export const COLUMN_DEF = {
+    DESCRIPTION: COLUMN_DEF_DESCRIPTION,
+    KEY: COLUMN_DEF_KEY,
+    LABEL: COLUMN_DEF_LABEL,
+};
+export const COLUMN_DEFS = [
+    COLUMN_DEF.LABEL,
+    COLUMN_DEF.KEY,
+    COLUMN_DEF.DESCRIPTION,
+];

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.d.ts

@@ -0,0 +1,5 @@
+export declare const COLUMN_IDENTIFIER: {
+    readonly DESCRIPTION: "description";
+    readonly KEY: "key";
+    readonly LABEL: "label";
+};

package/lib/components/DataDictionary/components/Table/columns/columnIdentifier.js

@@ -0,0 +1,5 @@
+export const COLUMN_IDENTIFIER = {
+    DESCRIPTION: "description",
+    KEY: "key",
+    LABEL: "label",
+};

package/lib/components/DataDictionary/components/Table/columns/types.d.ts

@@ -0,0 +1,2 @@
+import { Attribute } from "../../../../../common/entities";
+export type AttributeValue = Attribute[keyof Attribute];

package/lib/components/DataDictionary/components/Table/columns/types.js

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

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.d.ts

@@ -0,0 +1,4 @@
+import { CellContext } from "@tanstack/react-table";
+import { Attribute } from "../../../../../../common/entities";
+import { AttributeValue } from "../../columns/types";
+export type BasicCellProps = CellContext<Attribute, AttributeValue>;

package/lib/components/DataDictionary/components/Table/components/BasicCell/types.js

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

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.d.ts

@@ -0,0 +1,4 @@
+import { RowData } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { UseDataDictionary } from "./types";
+export declare const useDataDictionary: <T extends RowData = Attribute>() => UseDataDictionary<T>;

package/lib/components/DataDictionary/hooks/UseDataDictionary/hook.js

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { useConfig } from "../../../../hooks/useConfig";
+import { buildClassesOutline } from "../../components/Outline/utils";
+import { useTable } from "../../components/Table/hook";
+export const useDataDictionary = () => {
+    const { config: { dataDictionaries: dataDictionaryConfigs }, } = useConfig();
+    // Get dictionary config.
+    const dataDictionaryConfig = dataDictionaryConfigs?.[0]; // TODO: Handle multiple data dictionaries
+    // Get configured dictionary classes, column definitions and table options.
+    const { classes, columnDefs, tableOptions, title } = useMemo(() => {
+        return {
+            classes: dataDictionaryConfig?.dataDictionary?.classes || [],
+            columnDefs: dataDictionaryConfig?.columnDefs || [],
+            tableOptions: dataDictionaryConfig?.tableOptions || {},
+            title: dataDictionaryConfig?.dataDictionary?.title || "",
+        };
+    }, [dataDictionaryConfig]);
+    // Build table instance.
+    const table = useTable(classes, columnDefs, tableOptions);
+    // Build outline.
+    const outline = buildClassesOutline(table);
+    return { outline, table, title };
+};

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.d.ts

@@ -0,0 +1,8 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { Attribute } from "../../../../common/entities";
+import { OutlineItem } from "../../../Layout/components/Outline/types";
+export interface UseDataDictionary<T extends RowData = Attribute> {
+    outline: OutlineItem[];
+    table: Table<T>;
+    title: string;
+}

package/lib/components/DataDictionary/hooks/UseDataDictionary/types.js

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

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/hook.d.ts

@@ -0,0 +1,2 @@
+import { UseLayoutSpacing } from "./types";
+export declare const useLayoutSpacing: () => UseLayoutSpacing;

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/hook.js

@@ -0,0 +1,10 @@
+import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+export const useLayoutSpacing = () => {
+    const { dimensions } = useLayoutDimensions();
+    return {
+        spacing: {
+            bottom: dimensions.footer.height,
+            top: dimensions.header.height,
+        },
+    };
+};

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/types.d.ts

@@ -0,0 +1,7 @@
+export interface LayoutSpacing {
+    bottom: number;
+    top: number;
+}
+export interface UseLayoutSpacing {
+    spacing: LayoutSpacing;
+}

package/lib/components/DataDictionary/hooks/UseLayoutSpacing/types.js

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

package/lib/components/Detail/components/Table/components/TableHead/tableHead.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+import { ROW_DIRECTION } from "../../../../../Table/common/entities";
+export interface TableBodyProps<T> {
+    rowDirection: ROW_DIRECTION;
+    tableInstance: Table<T>;
+}
+export declare const TableHead: <T extends object>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Detail/components/Table/components/TableHead/tableHead.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableHead = void 0;
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../../../../Table/common/entities");
+const TableHead = ({ rowDirection, tableInstance, }) => {
+    return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
+        tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
+            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id }, (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()))))))))));
+};
+exports.TableHead = TableHead;