@databiosphere/findable-ui 50.1.1 → 50.3.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "50.1.1"
+  ".": "50.3.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [50.3.0](https://github.com/DataBiosphere/findable-ui/compare/v50.2.1...v50.3.0) (2026-03-27)
+
+
+### Features
+
+* convert input to controlled component with inputprovider ([#815](https://github.com/DataBiosphere/findable-ui/issues/815)) ([#843](https://github.com/DataBiosphere/findable-ui/issues/843)) ([699f186](https://github.com/DataBiosphere/findable-ui/commit/699f186f8bff76a0806e2afe93bfd5815fea698b))
+
+## [50.2.1](https://github.com/DataBiosphere/findable-ui/compare/v50.2.0...v50.2.1) (2026-03-25)
+
+
+### Bug Fixes
+
+* set poweredbyclevercanary image height to 32px ([#845](https://github.com/DataBiosphere/findable-ui/issues/845)) ([fd1cbcc](https://github.com/DataBiosphere/findable-ui/commit/fd1cbcc985f4b56d7cca53d5eddf0c710d889c92))
+
+## [50.2.0](https://github.com/DataBiosphere/findable-ui/compare/v50.1.1...v50.2.0) (2026-03-25)
+
+
+### Features
+
+* add poweredbyclevercanary component to footer ([#838](https://github.com/DataBiosphere/findable-ui/issues/838)) ([#840](https://github.com/DataBiosphere/findable-ui/issues/840)) ([fbdcfaf](https://github.com/DataBiosphere/findable-ui/commit/fbdcfaf1b377ed765934cb885a923ae06122c540))
+
+
+### Chores
+
+* update storybook to 10.3.3 ([#839](https://github.com/DataBiosphere/findable-ui/issues/839)) ([95b3792](https://github.com/DataBiosphere/findable-ui/commit/95b3792dc7033f8ff664e247285c205243b1fdce))
+* update storybook to 10.3.3 ([#841](https://github.com/DataBiosphere/findable-ui/issues/841)) ([95b3792](https://github.com/DataBiosphere/findable-ui/commit/95b3792dc7033f8ff664e247285c205243b1fdce))
+
 ## [50.1.1](https://github.com/DataBiosphere/findable-ui/compare/v50.1.0...v50.1.1) (2026-03-23)
 
 

package/lib/components/Layout/components/Footer/components/PoweredByCleverCanary/poweredByCleverCanary.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from "react";
+import { PoweredByCleverCanaryProps } from "./types";
+/**
+ * A component that displays a "Powered by CleverCanary" link with an image.
+ *
+ * @param props - Component props.
+ * @param props.className - An optional class name for styling.
+ * @param props.alt - The alt text for the image.
+ * @param props.src - The source URL for the image.
+ * @returns The rendered component or null if not powered by CleverCanary.
+ */
+export declare const PoweredByCleverCanary: ({ alt, className, ...props }: PoweredByCleverCanaryProps) => JSX.Element | null;

package/lib/components/Layout/components/Footer/components/PoweredByCleverCanary/poweredByCleverCanary.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ANCHOR_TARGET } from "../../../../../Links/common/entities";
+import { Logo } from "../../../Header/components/Content/components/Logo/logo";
+/**
+ * A component that displays a "Powered by CleverCanary" link with an image.
+ *
+ * @param props - Component props.
+ * @param props.className - An optional class name for styling.
+ * @param props.alt - The alt text for the image.
+ * @param props.src - The source URL for the image.
+ * @returns The rendered component or null if not powered by CleverCanary.
+ */
+export const PoweredByCleverCanary = ({ alt = "Powered by CleverCanary", className, ...props /* StaticImageProps */ }) => {
+    if (!props.src)
+        return null;
+    return (_jsx(Logo, { alt: alt, className: className, height: 32, link: "https://www.clevercanary.com", src: props.src, target: ANCHOR_TARGET.BLANK }));
+};

package/lib/components/Layout/components/Footer/components/PoweredByCleverCanary/types.d.ts

@@ -0,0 +1,6 @@
+import { StaticImageProps } from "../../../../../common/StaticImage/staticImage";
+import { BaseComponentProps } from "../../../../../types";
+export type PoweredByCleverCanaryProps = BaseComponentProps & Omit<StaticImageProps, "alt" | "src"> & {
+    alt?: string;
+    src?: StaticImageProps["src"];
+};

package/lib/components/Layout/components/Footer/components/PoweredByCleverCanary/types.js

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

package/lib/components/Layout/components/Footer/footer.d.ts

@@ -1,11 +1,15 @@
 import { JSX, ReactNode } from "react";
 import { Social } from "../../../common/Socials/socials";
+import { StaticImageProps } from "../../../common/StaticImage/staticImage";
 import { NavLinkItem } from "../Header/components/Content/components/Navigation/navigation";
 export interface FooterProps {
     Branding?: ReactNode;
     className?: string;
     navLinks?: NavLinkItem[];
+    poweredByCC?: Omit<StaticImageProps, "alt"> & {
+        alt?: string;
+    };
     socials?: Social[];
     versionInfo?: ReactNode;
 }
-export declare const Footer: ({ Branding, className, navLinks, socials, versionInfo, }: FooterProps) => JSX.Element;
+export declare const Footer: ({ Branding, className, navLinks, poweredByCC, socials, versionInfo, }: FooterProps) => JSX.Element;

package/lib/components/Layout/components/Footer/footer.js

@@ -4,10 +4,11 @@ import { SELECTOR } from "../../../../common/selectors";
 import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { isNodeBoolean } from "../../../utils";
+import { PoweredByCleverCanary } from "./components/PoweredByCleverCanary/poweredByCleverCanary";
 import { VersionInfo } from "./components/VersionInfo/versionInfo";
 import { AppBar, Link, Links, Socials } from "./footer.styles";
-export const Footer = ({ Branding, className, navLinks, socials, versionInfo, }) => {
+export const Footer = ({ Branding, className, navLinks, poweredByCC, socials, versionInfo, }) => {
     const { footerRef } = useLayoutDimensions();
-    return (_jsx(AppBar, { className: className, color: "inherit", component: "footer", id: SELECTOR.FOOTER, ref: footerRef, variant: "footer", children: _jsxs(Toolbar, { variant: "dense", children: [Branding, (navLinks || socials || versionInfo) && (_jsxs(Links, { children: [navLinks &&
-                            navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (_jsx(Link, { label: label, target: target, url: url }, `${url}${i}`))), socials && _jsx(Socials, { buttonSize: "small", socials: socials }), isNodeBoolean(versionInfo) ? _jsx(VersionInfo, {}) : versionInfo] }))] }) }));
+    return (_jsx(AppBar, { className: className, color: "inherit", component: "footer", id: SELECTOR.FOOTER, ref: footerRef, variant: "footer", children: _jsxs(Toolbar, { variant: "dense", children: [Branding, (navLinks || socials || versionInfo || poweredByCC) && (_jsxs(Links, { children: [navLinks &&
+                            navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (_jsx(Link, { label: label, target: target, url: url }, `${url}${i}`))), socials && _jsx(Socials, { buttonSize: "small", socials: socials }), isNodeBoolean(versionInfo) ? _jsx(VersionInfo, {}) : versionInfo, _jsx(PoweredByCleverCanary, { ...poweredByCC })] }))] }) }));
 };

package/lib/components/Layout/components/Footer/stories/footer.stories.d.ts

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

package/lib/components/Layout/components/Footer/{footer.stories.js → stories/footer.stories.js}

@@ -1,28 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import logo from "../../../../images/logo.svg";
-import { DiscourseIcon } from "../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
-import { FacebookIcon } from "../../../common/CustomIcon/components/FacebookIcon/facebookIcon";
-import { GitHubIcon } from "../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
-import { XIcon } from "../../../common/CustomIcon/components/XIcon/xIcon";
-import { YouTubeIcon } from "../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
-import { Logo } from "../Header/components/Content/components/Logo/logo";
-import { Footer } from "./footer";
+import { DiscourseIcon } from "../../../../common/CustomIcon/components/DiscourseIcon/discourseIcon";
+import { FacebookIcon } from "../../../../common/CustomIcon/components/FacebookIcon/facebookIcon";
+import { GitHubIcon } from "../../../../common/CustomIcon/components/GitHubIcon/gitHubIcon";
+import { XIcon } from "../../../../common/CustomIcon/components/XIcon/xIcon";
+import { YouTubeIcon } from "../../../../common/CustomIcon/components/YouTubeIcon/youTubeIcon";
+import { Logo } from "../../Header/components/Content/components/Logo/logo";
+import { Footer } from "../footer";
 const meta = {
-    argTypes: {
-        Branding: { control: { disabled: true } },
-        navLinks: { control: "object" },
-        socials: { control: { disabled: true } },
-    },
     component: Footer,
-    parameters: {
-        layout: "fullscreen",
-    },
-    title: "Components/Layout/Footer",
+    parameters: { layout: "fullscreen" },
 };
 export default meta;
-export const FooterStory = {
+export const Default = {
     args: {
-        Branding: _jsx(Logo, { alt: "logo", height: 24, link: "/", src: logo.src }),
+        Branding: (_jsx(Logo, { alt: "logo", height: 24, link: "/", src: "src/images/logo.svg" })),
         navLinks: [
             {
                 label: "Help",
@@ -33,6 +24,7 @@ export const FooterStory = {
                 url: "https://policies.google.com/privacy?hl=en-US",
             },
         ],
+        poweredByCC: { src: "src/images/cc.svg" },
         socials: [
             {
                 Icon: DiscourseIcon,

package/lib/views/ResearchView/assistant/assistant.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useChatState } from "../state/hooks/UseChatState/hook";
+import { Drawer } from "./components/Drawer/drawer";
 import { Form } from "./components/Form/form";
 import { Input } from "./components/Input/input";
 import { getPlaceholder } from "./components/Input/utils";
 import { Messages } from "./components/Messages/messages";
-import { Drawer } from "./components/Drawer/drawer";
 import { ToggleButtonGroup } from "./components/ToggleButtonGroup/toggleButtonGroup";
 /**
  * Renders the research assistant drawer.

package/lib/views/ResearchView/assistant/components/Form/form.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TEST_IDS } from "../../../../../tests/testIds";
 import { useQuery } from "../../../state/query/hooks/UseQuery/hook";
-import { FIELD_NAME } from "./constants";
 import { StyledForm } from "./form.styles";
 import { getPayload } from "./utils";
 /**
@@ -15,13 +14,6 @@ import { getPayload } from "./utils";
 export const Form = ({ children, className, status, }) => {
     const { onSubmit } = useQuery();
     return (_jsx(StyledForm, { className: className, "data-testid": TEST_IDS.RESEARCH_FORM, onSubmit: async (e) => {
-            await onSubmit(e, getPayload(e), {
-                onSettled: (form) => {
-                    const input = form.elements.namedItem(FIELD_NAME.AI_PROMPT);
-                    if (input instanceof HTMLElement)
-                        input.focus();
-                },
-                status,
-            });
+            await onSubmit(e, getPayload(e), { status });
         }, children: children }));
 };

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/hook.d.ts

@@ -0,0 +1,6 @@
+import { UseControlledInputProps } from "./types";
+/**
+ * Manages controlled input state with automatic clearing on form reset.
+ * @returns The controlled input state including value, onChange, setValue, and inputRef.
+ */
+export declare const useControlledInput: () => UseControlledInputProps;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/hook.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+/**
+ * Manages controlled input state with automatic clearing on form reset.
+ * @returns The controlled input state including value, onChange, setValue, and inputRef.
+ */
+export const useControlledInput = () => {
+    const inputRef = useRef(null);
+    const [value, setValue] = useState("");
+    const onChange = useCallback((e) => {
+        setValue(e.target.value);
+    }, []);
+    useEffect(() => {
+        const form = inputRef.current?.form;
+        if (!form)
+            return;
+        const onReset = () => {
+            setValue("");
+            inputRef.current?.focus();
+        };
+        form.addEventListener("reset", onReset);
+        return () => {
+            form.removeEventListener("reset", onReset);
+        };
+    }, []);
+    return { inputRef, onChange, setValue, value };
+};

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/types.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEvent, Dispatch, RefObject, SetStateAction } from "react";
+export type InputElement = HTMLInputElement | HTMLTextAreaElement;
+export type SetValue = Dispatch<SetStateAction<string>>;
+export interface UseControlledInputProps {
+    inputRef: RefObject<InputElement | null>;
+    onChange: (e: ChangeEvent<InputElement>) => void;
+    setValue: SetValue;
+    value: string;
+}

package/lib/views/ResearchView/assistant/components/Input/hooks/UseControlledInput/types.js

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

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.d.ts

@@ -1,6 +1,8 @@
+import { SetValue } from "../UseControlledInput/types";
 import { UseKeyShortCutsProps } from "./types";
 /**
  * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @param setValue - Setter for the controlled input value.
  * @returns An object containing the onKeyDown handler.
  */
-export declare const useKeyShortCuts: () => UseKeyShortCutsProps;
+export declare const useKeyShortCuts: (setValue: SetValue) => UseKeyShortCutsProps;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/hook.js

@@ -4,9 +4,10 @@ import { KEY } from "./constants";
 import { getHistory, handleArrowKey, handleEnterKey, handleEscapeKey, handleTabKey, } from "./utils";
 /**
  * Provides a keydown handler that implements keyboard shortcuts for the assistant input.
+ * @param setValue - Setter for the controlled input value.
  * @returns An object containing the onKeyDown handler.
  */
-export const useKeyShortCuts = () => {
+export const useKeyShortCuts = (setValue) => {
     const { state } = useChatState();
     const { messages } = state;
     const history = getHistory(messages);
@@ -22,11 +23,11 @@ export const useKeyShortCuts = () => {
         if (e.key === KEY.ENTER)
             return handleEnterKey(e);
         if (e.key === KEY.ESCAPE)
-            return handleEscapeKey(e, refs);
+            return handleEscapeKey(refs, setValue);
         if (e.key === KEY.ARROW_UP || e.key === KEY.ARROW_DOWN)
-            return handleArrowKey(e, history, refs);
+            return handleArrowKey(e, history, refs, setValue);
         if (e.key === KEY.TAB)
-            return handleTabKey(e);
-    }, [history]);
+            return handleTabKey(e, setValue);
+    }, [history, setValue]);
     return { onKeyDown };
 };

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/types.d.ts

@@ -1,8 +1,10 @@
 import { KeyboardEvent, RefObject } from "react";
+import { InputElement } from "../UseControlledInput/types";
+export type KeyboardInputEvent = KeyboardEvent<InputElement>;
 export interface Refs {
     draftRef: RefObject<string>;
     historyIndexRef: RefObject<number>;
 }
 export interface UseKeyShortCutsProps {
-    onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown: (e: KeyboardInputEvent) => void;
 }

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.d.ts

@@ -1,6 +1,6 @@
-import { KeyboardEvent } from "react";
 import { Message } from "../../../../../state/types";
-import { Refs } from "./types";
+import { SetValue } from "../UseControlledInput/types";
+import { KeyboardInputEvent, Refs } from "./types";
 /**
  * Extracts the text of user messages from a list of messages and returns them in reverse order.
  * @param messages - An array of Message objects to extract user messages from.
@@ -12,21 +12,27 @@ export declare function getHistory(messages: Message[]): string[];
  * @param e - The keyboard event.
  * @param history - The history entries to navigate.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleArrowKey(e: KeyboardEvent<HTMLInputElement>, history: string[], refs: Refs): void;
+export declare function handleArrowKey(e: KeyboardInputEvent, history: string[], refs: Refs, setValue: SetValue): void;
 /**
  * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
  * @param e - The keyboard event.
+ * @returns Void.
  */
-export declare function handleEnterKey(e: KeyboardEvent<HTMLInputElement>): void;
+export declare function handleEnterKey(e: KeyboardInputEvent): void;
 /**
  * Handles the Escape key press to clear the input and reset history navigation.
- * @param e - The keyboard event.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleEscapeKey(e: KeyboardEvent<HTMLInputElement>, refs: Refs): void;
+export declare function handleEscapeKey(refs: Refs, setValue: SetValue): void;
 /**
  * Handles the Tab key press to auto-fill the input with the placeholder.
  * @param e - The keyboard event.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export declare function handleTabKey(e: KeyboardEvent<HTMLInputElement>): void;
+export declare function handleTabKey(e: KeyboardInputEvent, setValue: SetValue): void;

package/lib/views/ResearchView/assistant/components/Input/hooks/UseKeyShortCuts/utils.js

@@ -16,31 +16,33 @@ export function getHistory(messages) {
  * @param e - The keyboard event.
  * @param history - The history entries to navigate.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleArrowKey(e, history, refs) {
+export function handleArrowKey(e, history, refs, setValue) {
     const { draftRef, historyIndexRef } = refs;
-    const inputEl = e.currentTarget;
     if (e.key === KEY.ARROW_DOWN && historyIndexRef.current === -1) {
         return;
     }
     if (historyIndexRef.current === -1) {
-        draftRef.current = inputEl.value;
+        draftRef.current = e.currentTarget.value;
     }
     const currentIndex = historyIndexRef.current;
     const newIndex = e.key === KEY.ARROW_UP
         ? Math.min(currentIndex + 1, history.length - 1)
         : Math.max(currentIndex - 1, -1);
     if (newIndex === -1) {
-        inputEl.value = draftRef.current;
+        setValue(draftRef.current);
         historyIndexRef.current = -1;
         return;
     }
-    inputEl.value = history[newIndex] || "";
+    setValue(history[newIndex] || "");
     historyIndexRef.current = newIndex;
 }
 /**
  * Handles the Enter key press to submit the form, or allows newline on Shift+Enter.
  * @param e - The keyboard event.
+ * @returns Void.
  */
 export function handleEnterKey(e) {
     if (e.shiftKey)
@@ -51,24 +53,26 @@ export function handleEnterKey(e) {
 }
 /**
  * Handles the Escape key press to clear the input and reset history navigation.
- * @param e - The keyboard event.
  * @param refs - Refs for draft text and history index.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleEscapeKey(e, refs) {
+export function handleEscapeKey(refs, setValue) {
     const { draftRef, historyIndexRef } = refs;
-    const inputEl = e.currentTarget;
-    inputEl.value = "";
+    setValue("");
     draftRef.current = "";
     historyIndexRef.current = -1;
 }
 /**
  * Handles the Tab key press to auto-fill the input with the placeholder.
  * @param e - The keyboard event.
+ * @param setValue - Setter for the controlled input value.
+ * @returns Void.
  */
-export function handleTabKey(e) {
+export function handleTabKey(e, setValue) {
     const inputEl = e.currentTarget;
     if (inputEl.value)
         return;
     e.preventDefault();
-    inputEl.value = inputEl.placeholder;
+    setValue(inputEl.placeholder);
 }

package/lib/views/ResearchView/assistant/components/Input/input.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton, InputBase, Stack } from "@mui/material";
-import { INPUT_BASE_PROPS } from "./constants";
-import { StyledBox, StyledPaper } from "./input.styles";
 import { UpArrowIcon } from "../../../../../components/common/CustomIcon/components/UpArrowIcon/upArrowIcon";
 import { ICON_BUTTON_PROPS } from "../../../../../styles/common/mui/iconButton";
-import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { STACK_PROPS } from "../../../../../styles/common/mui/stack";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { INPUT_BASE_PROPS } from "./constants";
+import { useControlledInput } from "./hooks/UseControlledInput/hook";
 import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
+import { StyledBox, StyledPaper } from "./input.styles";
 /**
  * Renders an input component for the research panel.
  * @param props - Component props.
@@ -14,6 +15,7 @@ import { useKeyShortCuts } from "./hooks/UseKeyShortCuts/hook";
  * @returns Research panel input component.
  */
 export const Input = ({ disabled, ...props }) => {
-    const { onKeyDown } = useKeyShortCuts();
-    return (_jsx(StyledBox, { children: _jsxs(StyledPaper, { elevation: 0, children: [_jsx(InputBase, { ...INPUT_BASE_PROPS, onKeyDown: onKeyDown, ...props }), _jsx(Stack, { direction: STACK_PROPS.DIRECTION.ROW, gap: 2, children: _jsx(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: disabled, size: ICON_BUTTON_PROPS.SIZE.XSMALL, type: "submit", children: _jsx(UpArrowIcon, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }) }) })] }) }));
+    const { inputRef, onChange, setValue, value } = useControlledInput();
+    const { onKeyDown } = useKeyShortCuts(setValue);
+    return (_jsx(StyledBox, { children: _jsxs(StyledPaper, { elevation: 0, children: [_jsx(InputBase, { ...INPUT_BASE_PROPS, inputRef: inputRef, onChange: onChange, onKeyDown: onKeyDown, value: value, ...props }), _jsx(Stack, { direction: STACK_PROPS.DIRECTION.ROW, gap: 2, children: _jsx(IconButton, { color: ICON_BUTTON_PROPS.COLOR.SECONDARY, disabled: disabled, size: ICON_BUTTON_PROPS.SIZE.XSMALL, type: "submit", children: _jsx(UpArrowIcon, { fontSize: SVG_ICON_PROPS.FONT_SIZE.SMALL }) }) })] }) }));
 };

package/lib/views/ResearchView/assistant/components/Input/types.d.ts

@@ -1,2 +1,2 @@
 import { IconButtonProps, InputBaseProps } from "@mui/material";
-export type InputProps = InputBaseProps & Pick<IconButtonProps, "disabled">;
+export type InputProps = Omit<InputBaseProps, "onChange" | "value"> & Pick<IconButtonProps, "disabled">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "50.1.1",
+  "version": "50.3.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -26,7 +26,7 @@
     "@commitlint/config-conventional": "^20.2.0",
     "@emotion/jest": "^11.14.2",
     "@next/eslint-plugin-next": "^15.5.13",
-    "@storybook/nextjs-vite": "^10.1.10",
+    "@storybook/nextjs-vite": "^10.3.3",
     "@testing-library/react": "^16.3.1",
     "@types/d3": "^7.4.3",
     "@types/jest": "^29.5.14",
@@ -44,7 +44,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-sonarjs": "^0.25.1",
     "eslint-plugin-sort-destructure-keys": "^2.0.0",
-    "eslint-plugin-storybook": "^10.1.10",
+    "eslint-plugin-storybook": "^10.3.3",
     "eslint-plugin-typescript-sort-keys": "^3.3.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
@@ -52,7 +52,7 @@
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^3.7.4",
     "prettier-plugin-organize-imports": "^4.3.0",
-    "storybook": "^10.1.10",
+    "storybook": "^10.3.3",
     "ts-jest": "^29.4.6",
     "typescript": "^5.9.3"
   },

package/src/components/Layout/components/Footer/components/PoweredByCleverCanary/poweredByCleverCanary.tsx

@@ -0,0 +1,31 @@
+import { JSX } from "react";
+import { ANCHOR_TARGET } from "../../../../../Links/common/entities";
+import { Logo } from "../../../Header/components/Content/components/Logo/logo";
+import { PoweredByCleverCanaryProps } from "./types";
+
+/**
+ * A component that displays a "Powered by CleverCanary" link with an image.
+ *
+ * @param props - Component props.
+ * @param props.className - An optional class name for styling.
+ * @param props.alt - The alt text for the image.
+ * @param props.src - The source URL for the image.
+ * @returns The rendered component or null if not powered by CleverCanary.
+ */
+export const PoweredByCleverCanary = ({
+  alt = "Powered by CleverCanary",
+  className,
+  ...props /* StaticImageProps */
+}: PoweredByCleverCanaryProps): JSX.Element | null => {
+  if (!props.src) return null;
+  return (
+    <Logo
+      alt={alt}
+      className={className}
+      height={32}
+      link="https://www.clevercanary.com"
+      src={props.src}
+      target={ANCHOR_TARGET.BLANK}
+    />
+  );
+};

package/src/components/Layout/components/Footer/components/PoweredByCleverCanary/types.ts

@@ -0,0 +1,8 @@
+import { StaticImageProps } from "../../../../../common/StaticImage/staticImage";
+import { BaseComponentProps } from "../../../../../types";
+
+export type PoweredByCleverCanaryProps = BaseComponentProps &
+  Omit<StaticImageProps, "alt" | "src"> & {
+    alt?: string;
+    src?: StaticImageProps["src"];
+  };

package/src/components/Layout/components/Footer/footer.tsx

@@ -3,9 +3,11 @@ import { JSX, ReactNode } from "react";
 import { SELECTOR } from "../../../../common/selectors";
 import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
 import { Social } from "../../../common/Socials/socials";
+import { StaticImageProps } from "../../../common/StaticImage/staticImage";
 import { ANCHOR_TARGET } from "../../../Links/common/entities";
 import { isNodeBoolean } from "../../../utils";
 import { NavLinkItem } from "../Header/components/Content/components/Navigation/navigation";
+import { PoweredByCleverCanary } from "./components/PoweredByCleverCanary/poweredByCleverCanary";
 import { VersionInfo } from "./components/VersionInfo/versionInfo";
 import { AppBar, Link, Links, Socials } from "./footer.styles";
 
@@ -13,6 +15,7 @@ export interface FooterProps {
   Branding?: ReactNode;
   className?: string;
   navLinks?: NavLinkItem[];
+  poweredByCC?: Omit<StaticImageProps, "alt"> & { alt?: string };
   socials?: Social[];
   versionInfo?: ReactNode;
 }
@@ -21,6 +24,7 @@ export const Footer = ({
   Branding,
   className,
   navLinks,
+  poweredByCC,
   socials,
   versionInfo,
 }: FooterProps): JSX.Element => {
@@ -36,7 +40,7 @@ export const Footer = ({
     >
       <Toolbar variant="dense">
         {Branding}
-        {(navLinks || socials || versionInfo) && (
+        {(navLinks || socials || versionInfo || poweredByCC) && (
           <Links>
             {navLinks &&
               navLinks.map(({ label, target = ANCHOR_TARGET.SELF, url }, i) => (
@@ -49,6 +53,7 @@ export const Footer = ({
               ))}
             {socials && <Socials buttonSize="small" socials={socials} />}
             {isNodeBoolean(versionInfo) ? <VersionInfo /> : versionInfo}
+            <PoweredByCleverCanary {...poweredByCC} />
           </Links>
         )}
       </Toolbar>