@czi-sds/components 15.1.0 → 15.2.0

package/dist/src/core/NavigationJumpTo/index.stories.js

@@ -0,0 +1,216 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Test = exports.LivePreview = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var React = __importStar(require("react"));
+var react_1 = require("react");
+var _1 = __importDefault(require("."));
+var InputSlider_1 = __importDefault(require("../InputSlider"));
+var TabPanel = React.forwardRef(function (props, ref) {
+    var children = props.children, sdsDemoHeight = props.sdsDemoHeight, other = __rest(props, ["children", "sdsDemoHeight"]);
+    return ((0, jsx_runtime_1.jsx)("div", __assign({ ref: ref, role: "tabpanel", style: {
+            alignItems: "center",
+            backgroundColor: "#f4f4f4",
+            color: "black",
+            display: "flex",
+            fontFamily: "Open Sans, sans-serif",
+            fontSize: "36px",
+            fontWeight: 100,
+            justifyContent: "center",
+            margin: "0px 22px 22px 6px",
+            minHeight: "".concat(sdsDemoHeight, "vh"),
+            textAlign: "center",
+        } }, other, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [children, (0, jsx_runtime_1.jsxs)("p", { style: { fontSize: 14, margin: "5px 0 0 0" }, children: ["height: ", sdsDemoHeight, " vh"] })] }) })));
+});
+var NavigationJumpTo = function (props) {
+    var _a = (0, react_1.useState)(100), navPanelHeight = _a[0], setNavPanelHeight = _a[1];
+    var sectionRef0 = React.useRef(null);
+    var sectionRef1 = React.useRef(null);
+    var sectionRef2 = React.useRef(null);
+    var sectionRef3 = React.useRef(null);
+    var sectionRef4 = React.useRef(null);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    fontFamily: "Open Sans, sans-serif",
+                    margin: "0 0 30px 6px",
+                    width: 250,
+                }, children: [(0, jsx_runtime_1.jsx)("p", { id: "nav-item-height-slider", style: { marginBottom: "5px" }, children: "Section panel height:" }), (0, jsx_runtime_1.jsx)(InputSlider_1.default, { "aria-labelledby": "nav-item-height-slider", min: 20, max: 120, step: 1, onChange: function (_, value) {
+                            setNavPanelHeight(value);
+                        }, defaultValue: 100, marks: [
+                            { label: "20", value: 20 },
+                            { label: "40", value: 40 },
+                            { label: "60", value: 60 },
+                            { label: "80", value: 80 },
+                            { label: "100", value: 100 },
+                            { label: "120", value: 120 },
+                        ] })] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    display: "flex",
+                    flexDirection: "row-reverse",
+                    position: "relative",
+                    width: "100%",
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { width: 150 }, children: (0, jsx_runtime_1.jsx)(_1.default, __assign({}, props, { items: [
+                                { elementRef: sectionRef0, title: "Section 1" },
+                                { elementRef: sectionRef1, title: "Section 2" },
+                                { elementRef: sectionRef2, title: "Section 3" },
+                                { elementRef: sectionRef3, title: "Section 4" },
+                                { elementRef: sectionRef4, title: "Section 5" },
+                            ] })) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            position: "relative",
+                            width: "100%",
+                        }, children: [(0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-1", ref: sectionRef0, sdsDemoHeight: navPanelHeight, children: "Section #1" }), (0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-2", ref: sectionRef1, sdsDemoHeight: navPanelHeight, children: "Section #2" }), (0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-3", ref: sectionRef2, sdsDemoHeight: navPanelHeight, children: "Section #3" }), (0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-4", ref: sectionRef3, sdsDemoHeight: navPanelHeight, children: "Section #4" }), (0, jsx_runtime_1.jsx)(TabPanel, { id: "navigation-panel-5", ref: sectionRef4, sdsDemoHeight: navPanelHeight, children: "Section #5" })] })] })] }));
+};
+var availableColorOptions = [
+    "beta",
+    "error",
+    "gray",
+    "info",
+    "primary",
+    "success",
+    "warning",
+];
+exports.default = {
+    argTypes: {
+        indicatorColor: {
+            control: {
+                labels: [
+                    "beta",
+                    "error",
+                    "gray",
+                    "info",
+                    "primary",
+                    "success",
+                    "warning",
+                ],
+                type: "select",
+            },
+            defaultValue: { summary: "primary" },
+            description: "Color of the tab indicator",
+            mapping: availableColorOptions,
+            options: Object.keys(availableColorOptions),
+        },
+        items: {
+            control: { require: true, type: "object" },
+            defaultValue: { summary: "-" },
+            description: "An array of object containing a title for the Navigation Tab and a ref to the section div.",
+        },
+        offsetTop: {
+            control: { description: "wew", type: "number" },
+            defaultValue: { summary: "0" },
+            description: "To apply the offsetTop to the component, please refresh the page.",
+        },
+    },
+    component: NavigationJumpTo,
+    title: "NavigationJumpTo",
+};
+// Default
+exports.Default = {
+    args: {
+        indicatorColor: "primary",
+        items: [],
+        offsetTop: 0,
+    },
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+// Live Preview
+var LivePreviewDemo = function (props) {
+    var items = props.items, rest = __rest(props, ["items"]);
+    return (0, jsx_runtime_1.jsx)(_1.default, __assign({ items: items }, rest));
+};
+exports.LivePreview = {
+    args: {
+        items: [
+            { elementRef: { current: null }, title: "Item 1" },
+            { elementRef: { current: null }, title: "Item 2" },
+            { elementRef: { current: null }, title: "Item 3" },
+            { elementRef: { current: null }, title: "Item 4" },
+            { elementRef: { current: null }, title: "Item 5" },
+        ],
+    },
+    parameters: {
+        axe: {
+            disabledRules: ["aria-valid-attr-value"],
+        },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(LivePreviewDemo, __assign({}, args)); },
+};
+// Test
+var TestDemo = function (props) {
+    var items = props.items, rest = __rest(props, ["items"]);
+    return ((0, jsx_runtime_1.jsx)(_1.default, __assign({ "data-testid": "navigation-jump-to", items: items }, rest)));
+};
+exports.Test = {
+    args: {
+        items: [
+            { elementRef: { current: null }, title: "Item 1" },
+            { elementRef: { current: null }, title: "Item 2" },
+            { elementRef: { current: null }, title: "Item 3" },
+            { elementRef: { current: null }, title: "Item 4" },
+            { elementRef: { current: null }, title: "Item 5" },
+        ],
+    },
+    parameters: {
+        axe: {
+            disabledRules: ["aria-valid-attr-value"],
+        },
+        controls: {
+            exclude: ["indicatorColor", "items"],
+        },
+        snapshot: {
+            skip: true,
+        },
+    },
+    render: function (args) { return (0, jsx_runtime_1.jsx)(TestDemo, __assign({}, args)); },
+};

package/dist/src/core/NavigationJumpTo/index.test.d.ts

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

package/dist/src/core/NavigationJumpTo/index.test.js

@@ -0,0 +1,87 @@
+"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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var story_utils_1 = require("@chanzuckerberg/story-utils");
+var react_1 = require("@storybook/react");
+var react_2 = require("@testing-library/react");
+var snapshotTestStoryFile = __importStar(require("./index.stories"));
+var index_stories_1 = __importStar(require("./index.stories"));
+// Returns a component that already contain all decorators from story level, meta level and global level.
+var Test = (0, react_1.composeStory)(index_stories_1.Test, index_stories_1.default);
+describe("<NavigationJumpTo />", function () {
+    (0, story_utils_1.generateSnapshots)(snapshotTestStoryFile);
+    it("renders navigation jump to component", function () {
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, {}));
+        var elements = react_2.screen.getAllByTestId("navigation-jump-to");
+        expect(elements).toBeTruthy();
+    });
+    it("renders the correct number of navigation items", function () {
+        var items = [
+            { elementRef: { current: null }, title: "Item 1" },
+            { elementRef: { current: null }, title: "Item 2" },
+            { elementRef: { current: null }, title: "Item 3" },
+        ];
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, { items: items }));
+        var navigationItems = react_2.screen.getAllByRole("tab");
+        expect(navigationItems).toHaveLength(items.length);
+    });
+    it("scrolls to the correct section when a navigation item is clicked", function () {
+        var items = [
+            {
+                elementRef: {
+                    current: {
+                        getAttribute: function () {
+                            return "test-item-1";
+                        },
+                        scrollIntoView: jest.fn(),
+                        setAttribute: jest.fn(),
+                    },
+                },
+                title: "Item 1",
+            },
+            {
+                elementRef: {
+                    current: {
+                        getAttribute: function () {
+                            return "test-item-1";
+                        },
+                        scrollIntoView: jest.fn(),
+                        setAttribute: jest.fn(),
+                    },
+                },
+                title: "Item 2",
+            },
+        ];
+        (0, react_2.render)((0, jsx_runtime_1.jsx)(Test, { items: items }));
+        var navigationItem = react_2.screen.getByText("Item 2");
+        react_2.fireEvent.click(navigationItem);
+        expect(items[1].elementRef.current.scrollIntoView).toHaveBeenCalledTimes(1);
+        expect(items[1].elementRef.current.scrollIntoView).toHaveBeenCalledWith({
+            behavior: "smooth",
+            block: "start",
+        });
+    });
+});

package/dist/src/core/NavigationJumpTo/style.d.ts

@@ -0,0 +1,106 @@
+/// <reference types="react" />
+import { TabsProps } from "@mui/material";
+import { CommonThemeProps } from "../styles";
+export interface NavigationJumpToExtraProps extends Omit<TabsProps, "indicatorColor" | "nonce" | "rev" | "rel" | "autoFocus" | "content">, CommonThemeProps {
+    sdsIndicatorColor?: "primary" | "error" | "info" | "success" | "warning" | "gray" | "beta";
+}
+export declare const StyledTabs: import("@emotion/styled").StyledComponent<{
+    action?: import("react").Ref<import("@mui/material").TabsActions> | undefined;
+    allowScrollButtonsMobile?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    centered?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TabsClasses> | undefined;
+    slots?: {
+        StartScrollButtonIcon?: import("react").ElementType<any> | undefined;
+        EndScrollButtonIcon?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    slotProps?: {
+        startScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsStartScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+        endScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsEndScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+    } | undefined;
+    indicatorColor?: import("@mui/types").OverridableStringUnion<"primary" | "secondary", import("@mui/material").TabsPropsIndicatorColorOverrides> | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: any) => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    ScrollButtonComponent?: import("react").ElementType<any> | undefined;
+    scrollButtons?: boolean | "auto" | undefined;
+    selectionFollowsFocus?: boolean | undefined;
+    TabIndicatorProps?: (import("react").HTMLAttributes<HTMLDivElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    TabScrollButtonProps?: Partial<import("@mui/material").TabScrollButtonProps> | undefined;
+    textColor?: "inherit" | "primary" | "secondary" | undefined;
+    value?: any;
+    variant?: "fullWidth" | "standard" | "scrollable" | undefined;
+    visibleScrollbar?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "disabled" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef">, keyof import("@mui/material/OverridableComponent").CommonProps | "onChange" | "children" | "sx" | "variant" | "aria-label" | "aria-labelledby" | "action" | "orientation" | "value" | "slotProps" | "slots" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & NavigationJumpToExtraProps, {}, {}>;
+export declare const StyledTab: import("@emotion/styled").StyledComponent<{
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").TabClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    icon?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    iconPosition?: "bottom" | "top" | "end" | "start" | undefined;
+    label?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    value?: any;
+    wrapped?: boolean | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "disabled" | "label" | "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "icon" | "iconPosition" | "wrapped"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, {}, {}>;

package/dist/src/core/NavigationJumpTo/style.js

@@ -0,0 +1,27 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTab = exports.StyledTabs = void 0;
+var material_1 = require("@mui/material");
+var styles_1 = require("@mui/material/styles");
+var styles_2 = require("../styles");
+var doNotForwardProps = ["items", "sdsIndicatorColor"];
+exports.StyledTabs = (0, styles_1.styled)(material_1.Tabs, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (props) {
+    var _a = props.sdsIndicatorColor, sdsIndicatorColor = _a === void 0 ? "primary" : _a;
+    var colors = (0, styles_2.getColors)(props);
+    var spaces = (0, styles_2.getSpaces)(props);
+    return "\n      &:before {\n        background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        content: \"\";\n        height: 100%;\n        left: 0;\n        position: absolute;\n        top: 0;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      max-width: 180px;\n      top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n      margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n      position: sticky;\n      .MuiTabs-indicator {\n        background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors[sdsIndicatorColor][400], " !important;\n        border-radius: 2px;\n        left: 0;\n        width: 2px;\n      }\n    ");
+});
+exports.StyledTab = (0, styles_1.styled)(material_1.Tab, {
+    shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n"])), styles_2.fontBodyXs, function (props) {
+    var spaces = (0, styles_2.getSpaces)(props);
+    var colors = (0, styles_2.getColors)(props);
+    return "\n      box-sizing: border-box;\n      max-width: 180px;\n      padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n      align-items: start;\n      min-height: unset;\n      max-height: unset;\n      text-transform: none;\n      &:last-child {\n        margin-bottom: 0;\n      }\n      &:before {\n        content: \"\";\n        position: absolute;\n        left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n        height: 100%;\n        background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n        display: none;\n        border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &:hover {\n        color: black;\n        &:before {\n          display: block;\n        }\n      }\n      &.Mui-selected {\n        color: black;\n        font-weight: 600;\n      }\n      &.MuiTabs-indicator {\n        backgroundColor: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n        width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n      }\n      &.MuiButtonBase-root {\n        white-space: nowrap;\n        padding: 0;\n        overflow: visible;\n      }\n    ");
+});
+var templateObject_1, templateObject_2;

package/dist/src/core/NavigationJumpTo/useIntersection.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+/**
+ * Custom hook that observes elements to determine if they are in the viewport.
+ *
+ * @param items - Array of items to observe.
+ * @returns Object containing the visibility status of each observed item.
+ */
+export default function useInView(items: Array<{
+    title: string;
+    elementRef: React.MutableRefObject<HTMLElement | null>;
+}>): {
+    el: React.MutableRefObject<HTMLElement | null>;
+    isInView: boolean;
+}[] | {
+    [key: string]: {
+        intersectionEntry: IntersectionObserverEntry;
+        isInView: boolean;
+    };
+};

package/dist/src/core/NavigationJumpTo/useIntersection.js

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+/**
+ * Custom hook that observes elements to determine if they are in the viewport.
+ *
+ * @param items - Array of items to observe.
+ * @returns Object containing the visibility status of each observed item.
+ */
+function useInView(items) {
+    // If the window object is not available (e.g., in a node environment) or
+    // If the IntersectionObserver is not available (e.g., in a test environment),
+    // return a default result indicating that all elements are not in view
+    if (typeof window === "undefined" || !window.IntersectionObserver) {
+        return items.map(function (item) {
+            return {
+                el: item.elementRef,
+                isInView: false,
+            };
+        });
+    }
+    var _a = (0, react_1.useState)({}), elements = _a[0], setElements = _a[1];
+    (0, react_1.useEffect)(function () {
+        /**
+         * Callback function called by the IntersectionObserver.
+         * Updates the visibility status of observed elements.
+         *
+         * @param entries - IntersectionObserverEntry array containing information about each observed element.
+         */
+        var observerCallback = function (entries) {
+            entries.forEach(function (entry, index) {
+                var name = entry.target.getAttribute("id") || index;
+                setElements(function (prev) {
+                    var _a;
+                    return __assign(__assign({}, prev), (_a = {}, _a[name] = {
+                        intersectionEntry: entry,
+                        isInView: entry.isIntersecting,
+                    }, _a));
+                });
+            });
+        };
+        var observer = new IntersectionObserver(observerCallback);
+        // Observe each item's element
+        items.forEach(function (item) {
+            if (item.elementRef.current) {
+                observer.observe(item.elementRef.current);
+            }
+        });
+        // Cleanup function to disconnect the IntersectionObserver
+        return function () {
+            observer.disconnect();
+        };
+    }, []);
+    return elements;
+}
+exports.default = useInView;

package/dist/src/core/Notification/Notification.namespace-test.d.ts

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

package/dist/src/core/Notification/Notification.namespace-test.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@czi-sds/components");
+var utils_1 = require("src/common/utils");
+var NotificationNameSpaceTest = function (props) {
+    return ((0, jsx_runtime_1.jsx)(components_1.Notification, { autoDismiss: true, dismissed: false, slideDirection: "left", intent: "info", onClose: utils_1.noop, buttonOnClick: utils_1.noop, buttonText: "Text", children: "This is a notification!" }));
+};

package/dist/src/core/Notification/index.d.ts

@@ -0,0 +1,17 @@
+import { AlertProps } from "@mui/lab";
+import React from "react";
+export interface NotificationProps {
+    autoDismiss?: boolean | number;
+    buttonOnClick?: (event: React.SyntheticEvent) => void;
+    buttonText?: string;
+    dismissed?: boolean;
+    slideDirection: "left" | "right";
+    extraContent?: boolean;
+    intent: "info" | "error" | "success" | "warning";
+}
+export type ExposedNotificationProps = Omit<AlertProps, "nonce" | "rev" | "rel" | "autoFocus" | "content"> & NotificationProps;
+/**
+ * @see https://mui.com/material-ui/react-alert/
+ */
+declare const Notification: ({ autoDismiss, children, dismissed, slideDirection, intent, onClose, buttonOnClick, buttonText, ...rest }: ExposedNotificationProps) => JSX.Element;
+export default Notification;

package/dist/src/core/Notification/index.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var material_1 = require("@mui/material");
+var react_1 = require("react");
+var Button_1 = __importDefault(require("../Button"));
+var ButtonIcon_1 = __importDefault(require("../ButtonIcon"));
+var Icon_1 = __importDefault(require("../Icon"));
+var style_1 = require("./style");
+/**
+ * @see https://mui.com/material-ui/react-alert/
+ */
+var Notification = function (_a) {
+    var autoDismiss = _a.autoDismiss, children = _a.children, dismissed = _a.dismissed, _b = _a.slideDirection, slideDirection = _b === void 0 ? "left" : _b, intent = _a.intent, onClose = _a.onClose, buttonOnClick = _a.buttonOnClick, buttonText = _a.buttonText, rest = __rest(_a, ["autoDismiss", "children", "dismissed", "slideDirection", "intent", "onClose", "buttonOnClick", "buttonText"]);
+    var _c = (0, react_1.useState)(dismissed), hide = _c[0], setHide = _c[1];
+    // remove prop used only for stories
+    var passedProps = __assign({}, rest);
+    delete passedProps.extraContent;
+    (0, react_1.useEffect)(function () {
+        setHide(dismissed);
+        if (autoDismiss) {
+            var timeout = typeof autoDismiss === "boolean" ? 8000 : autoDismiss;
+            setTimeout(function () {
+                setHide(true);
+            }, timeout);
+        }
+    }, [dismissed, autoDismiss]);
+    var handleClose = function (event) {
+        setHide(true);
+        if (onClose)
+            onClose(event);
+    };
+    var getIcon = function () {
+        switch (intent) {
+            case "success":
+                return (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "checkCircle", sdsType: "static" });
+            case "info":
+                return (0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "infoCircle", sdsType: "static" });
+            default:
+                return ((0, jsx_runtime_1.jsx)(Icon_1.default, { sdsSize: "l", sdsIcon: "exclamationMarkCircle", sdsType: "static" }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: (0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(style_1.StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? ((0, jsx_runtime_1.jsx)(ButtonIcon_1.default, { onClick: handleClose, sdsSize: "small", sdsType: "tertiary", "data-testid": "notificationCloseButton", sdsIcon: "xMark" })) : null, icon: getIcon(), className: "elevated", severity: intent }, passedProps, { children: [children, buttonOnClick && ((0, jsx_runtime_1.jsx)(Button_1.default, { sdsStyle: "minimal", sdsType: "secondary", onClick: buttonOnClick, children: buttonText }))] })) }) }) }));
+};
+exports.default = Notification;