@ndlib/component-library 0.0.50 → 0.0.52

package/dist/components/composites/DragDropList/index.js

@@ -12,16 +12,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { DragDropContext, Droppable, Draggable, } from 'react-beautiful-dnd';
 import DragIndicator from '@mui/icons-material/DragIndicator';
-import { useUniqueHtmlId } from '../../../utils/hooks/useUniqueHtmlId';
 import { BUTTON_TYPE, Button } from '../../elements/Button';
 import { Column } from '../../elements/layout/Column';
 import { Row } from '../../elements/layout/Row';
+import { useUniqueId } from '../../providers/uniqueIds';
 export const DragHandle = (_a) => {
     var { sx } = _a, props = __rest(_a, ["sx"]);
     return (_jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, primaryIcon: DragIndicator, disableFocusStyles: true, sx: Object.assign({ cursor: 'inherit' }, sx) }, props)));
 };
 export function DragDropList({ items, itemIdKey = 'id', wrapperStyles, itemStyles, children: renderChild, onReorder, disabled, dragItemsDirectly = false, }) {
-    const id = useUniqueHtmlId('dnd-list');
+    const id = useUniqueId('dnd-list');
     return (_jsx(DragDropContext, Object.assign({ onDragStart: (start, provided) => {
             const selectedItem = items.find((item) => String(item[itemIdKey]) === start.draggableId);
             provided.announce(`Selected item: ${selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.accessibleLabel}`);

package/dist/components/composites/DropdownLinks/index.js

@@ -13,16 +13,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useState } from 'react';
 import { autoPlacement, offset, size, useFloating } from '@floating-ui/react';
 import { ListBox } from '../../elements/ListBox';
-import { useUniqueHtmlId } from '../../../utils/hooks/useUniqueHtmlId';
 import { Link } from '../../elements/Link';
 import { Box } from '../../elements/layout/Box';
 import { useComponentConfig } from '../../providers/componentConfig';
+import { useUniqueId } from '../../providers/uniqueIds';
 export const DropdownLinks = (_a) => {
     var { children, options: optionsParam, renderOption: renderOptionParam, openNewTab, role = 'navigation' } = _a, rest = __rest(_a, ["children", "options", "renderOption", "openNewTab", "role"]);
     const [isOpen, setIsOpen] = useState(false);
     const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
-    const listboxId = useUniqueHtmlId('dropdown-links');
-    const anchorId = useUniqueHtmlId('dropdown-links-anchor');
+    const listboxId = useUniqueId('dropdown-links');
+    const anchorId = useUniqueId('dropdown-links-anchor');
     const { navigate } = useComponentConfig().link;
     const options = optionsParam.map((option) => (Object.assign(Object.assign({}, option), { onClick: () => {
             if (option.onClick) {

package/dist/components/composites/Modal/Modal.stories.js

@@ -14,7 +14,7 @@ const ModalExample = () => {
     const modalId = 'modal-example';
     const { open, close, state } = useDialog(modalId);
     const theme = useTheme();
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: theme.zIndex.DROPDOWN } }, { children: "Open Modal" })), _jsx(Modal, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: open, sx: { position: 'relative', zIndex: theme.zIndex.DIALOG } }, { children: "Open Modal" })), _jsx(Modal, Object.assign({ isOpen: state.isOpen, heading: "Heading", close: close, actions: [
                     {
                         label: 'Secondary',
                         isPrimary: false,

package/dist/components/composites/SnackBar/SnackBar.stories.d.ts

@@ -0,0 +1,8 @@
+import { SnackBar } from './';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof SnackBar>;
+export default meta;
+type Story = StoryObj<typeof SnackBar>;
+export declare const Default: Story;
+export declare const ReplaceMessage: Story;
+export declare const WipeMessages: Story;

package/dist/components/composites/SnackBar/SnackBar.stories.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SnackBar } from './';
+import { BasicExample, ReplaceMessageExample, WipeMessagesExample, } from './examples';
+const meta = {
+    title: 'Composites/SnackBar',
+    component: SnackBar,
+};
+export default meta;
+export const Default = {
+    render: () => _jsx(BasicExample, {}),
+    args: {},
+};
+export const ReplaceMessage = {
+    render: () => _jsx(ReplaceMessageExample, {}),
+    args: {},
+};
+export const WipeMessages = {
+    render: () => _jsx(WipeMessagesExample, {}),
+    args: {},
+};

package/dist/components/composites/SnackBar/SnackBar.test.d.ts

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

package/dist/components/composites/SnackBar/SnackBar.test.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { act, fireEvent, waitFor } from '@testing-library/react';
+import { vi } from 'vitest';
+import { render } from '../../../utils/test';
+import { BasicExample, ReplaceMessageExample, WipeMessagesExample, } from './examples';
+vi.useFakeTimers();
+describe('SnackBar', () => {
+    it('supports adding messages', () => {
+        const { getByText } = render(_jsx(BasicExample, {}));
+        expect(() => getByText('Message 1')).toThrow();
+        const addButton = getByText('Add Message');
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(getByText('Message 1')).toBeInTheDocument();
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(getByText('Message 1')).toBeInTheDocument();
+        expect(getByText('Message 2')).toBeInTheDocument();
+        act(() => {
+            vi.runAllTimers();
+        });
+        waitFor(() => {
+            expect(() => getByText('Message 1')).toThrow();
+            expect(() => getByText('Message 2')).toThrow();
+        });
+    });
+    it('supports replacing messages', () => {
+        const { getByText } = render(_jsx(ReplaceMessageExample, {}));
+        expect(() => getByText('Message 1')).toThrow();
+        const addButton = getByText('Add Message');
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(getByText('Message 1')).toBeInTheDocument();
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(() => getByText('Message 1')).toThrow();
+        expect(getByText('Message 2')).toBeInTheDocument();
+        act(() => {
+            vi.runAllTimers();
+        });
+        waitFor(() => {
+            expect(() => getByText('Message 2')).toThrow();
+        });
+    });
+    it('supports wiping messages', () => {
+        const { getByText } = render(_jsx(WipeMessagesExample, {}));
+        expect(() => getByText('Message 1')).toThrow();
+        const addButton = getByText('Add Message');
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        act(() => {
+            fireEvent.click(addButton);
+        });
+        expect(getByText('Message 1')).toBeInTheDocument();
+        expect(getByText('Message 2')).toBeInTheDocument();
+        const wipeButton = getByText('Wipe and Add');
+        act(() => {
+            fireEvent.click(wipeButton);
+        });
+        expect(() => getByText('Message 1')).toThrow();
+        expect(() => getByText('Message 2')).toThrow();
+        expect(getByText('Message 3')).toBeInTheDocument();
+        act(() => {
+            vi.runAllTimers();
+        });
+        waitFor(() => {
+            expect(() => getByText('Message 3')).toThrow();
+        });
+    });
+});

package/dist/components/composites/SnackBar/examples.d.ts

@@ -0,0 +1,3 @@
+export declare const BasicExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const ReplaceMessageExample: () => import("react/jsx-runtime").JSX.Element;
+export declare const WipeMessagesExample: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/composites/SnackBar/examples.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useSnackBar } from '../../providers/snackBar';
+import { Row } from '../../elements/layout/Row';
+import { Button } from '../../elements/Button';
+import { SnackBar } from '.';
+export const BasicExample = () => {
+    const { addMessage } = useSnackBar();
+    const [messageCount, setMessageCount] = useState(1);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => {
+                    setMessageCount(messageCount + 1);
+                    addMessage({ message: `Message ${messageCount}` });
+                } }, { children: "Add Message" })), _jsx(SnackBar, {})] }));
+};
+export const ReplaceMessageExample = () => {
+    const { addMessage } = useSnackBar();
+    const [messageCount, setMessageCount] = useState(1);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ onClick: () => {
+                    setMessageCount(messageCount + 1);
+                    addMessage({ message: `Message ${messageCount}`, id: 'same-id' });
+                } }, { children: "Add Message" })), _jsx(SnackBar, {})] }));
+};
+export const WipeMessagesExample = () => {
+    const { addMessage } = useSnackBar();
+    const [messageCount, setMessageCount] = useState(1);
+    return (_jsxs(Row, { children: [_jsx(Button, Object.assign({ onClick: () => {
+                    setMessageCount((count) => count + 1);
+                    addMessage({ message: `Message ${messageCount}` });
+                }, sx: { mr: 1 } }, { children: "Add Message" })), _jsx(Button, Object.assign({ onClick: () => {
+                    setMessageCount((count) => count + 1);
+                    addMessage({ message: `Message ${messageCount}` }, {
+                        wipePrevious: true,
+                    });
+                } }, { children: "Wipe and Add" })), _jsx(SnackBar, {})] }));
+};

package/dist/components/composites/SnackBar/index.d.ts

@@ -0,0 +1 @@
+export declare const SnackBar: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/composites/SnackBar/index.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { keyframes } from '@emotion/react';
+import { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { BUTTON_TYPE, Button } from '../../elements/Button';
+import { Box } from '../../elements/layout/Box';
+import { Column } from '../../elements/layout/Column';
+import { Row } from '../../elements/layout/Row';
+import { useSnackBar } from '../../providers/snackBar';
+import CloseIcon from '@mui/icons-material/Close';
+import { Z_INDEX } from '../../../theme/custom';
+const getTransformForMessageCount = (messageCount) => messageCount ? `translateY(-${messageCount * 4 + 1}rem)` : '0rem';
+const getAnimation = (messageCount, previousMessageCount) => {
+    return keyframes `
+      from {
+        transform: ${getTransformForMessageCount(previousMessageCount)};
+      }
+      to {
+        transform: ${getTransformForMessageCount(messageCount)};
+      }
+    `;
+};
+export const SnackBar = () => {
+    const { messages, removeMessage, previousMessageCount } = useSnackBar();
+    const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM);
+    const animation = getAnimation(messages.length, previousMessageCount);
+    const animationStyle = `${animation} 100ms linear 1 forwards`;
+    return (_jsx(Column, Object.assign({ sx: {
+            position: 'fixed',
+            left: 0,
+            top: '100%',
+            width: '100vw',
+            display: 'flex',
+            alignItems: 'center',
+            pb: 3,
+            animation: animationStyle,
+            zIndex: Z_INDEX.DIALOG,
+        } }, { children: messages.map((message) => (_jsxs(Row, Object.assign({ sx: Object.assign({ width: ['90vw', '500px'], height: '56px', borderRadius: '4px', p: 4, mt: '0.5rem', border: '1px solid', bg: COLOR.PRIMARY, color: COLOR.WHITE, justifyContent: 'space-between', alignItems: 'center' }, typographyStyles) }, { children: [_jsx(Box, Object.assign({ sx: {
+                        overflow: 'hidden',
+                        whiteSpace: 'nowrap',
+                        textOverflow: 'ellipsis',
+                    }, "aria-live": "polite" }, { children: message.message })), _jsx(Box, { children: _jsx(Button, { "aria-label": "Dismiss Notice", type: BUTTON_TYPE.TEXT, primaryIcon: CloseIcon, onClick: () => {
+                            removeMessage(message.id);
+                        }, textColor: COLOR.WHITE }) })] }), message.id))) })));
+};

package/dist/components/elements/Fields/Select/index.js

@@ -8,11 +8,11 @@ import { INPUT_SIZE, labelOffsetMap, labelTypographyMap } from '../TextInput';
 import { ListBox } from '../../ListBox';
 import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../../Button';
 import { defaultRenderOptionLabel, getOptionId, } from '../option';
-import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
 import { KEY_CODES, importedDefaultComponentShim } from '../../../../utils/misc';
 import { COLOR } from '../../../../theme/colors';
 import { Box } from '../../layout/Box';
 import { Label } from '../../text/Label';
+import { useUniqueId } from '../../../providers/uniqueIds';
 const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
 const typographyMap = {
     [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
@@ -32,8 +32,8 @@ const buttonSizeMap = {
 const DEFAULT_WIDTH = '16rem';
 export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }) {
     const theme = useTheme();
-    const listboxId = useUniqueHtmlId('select-list-box');
-    const inputId = useUniqueHtmlId('select-input');
+    const listboxId = useUniqueId('select-list-box');
+    const inputId = useUniqueId('select-input');
     const [isOpen, setIsOpen] = useState(false);
     const [stagedOptionValue, setStagedOptionValue] = useState();
     const currentOption = useMemo(() => {
@@ -132,7 +132,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     overflow: 'hidden',
                     minWidth: '0%',
                     borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
-                    zIndex: theme.zIndex.LABEL,
+                    zIndex: theme.zIndex.ELEVATED,
                 } }, { children: _jsx("legend", Object.assign({ style: {
                         width: 'auto',
                         float: 'unset',
@@ -154,7 +154,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     position: 'absolute',
                     left: '0.5rem',
                     lineHeight: 1,
-                    zIndex: theme.zIndex.LABEL,
+                    zIndex: theme.zIndex.ELEVATED,
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.PRIMARY,
                     px: 1,
                     top: labelOffsetMap[size],
@@ -171,7 +171,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {
-                    zIndex: theme.zIndex.DROPDOWN,
+                    zIndex: theme.zIndex.DIALOG,
                 }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted
                         ? theme.boxShadow.INVERTED
                         : theme.boxShadow.NORMAL }) }))] })));

package/dist/components/elements/Fields/TextInput/index.js

@@ -16,7 +16,7 @@ import { useTheme } from '../../../../theme';
 import { Icon } from '../../Icon';
 import { COLOR } from '../../../../theme/colors';
 import { Label } from '../../text/Label';
-import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
+import { useUniqueId } from '../../../providers/uniqueIds';
 export var INPUT_SIZE;
 (function (INPUT_SIZE) {
     INPUT_SIZE["SM"] = "sm";
@@ -50,7 +50,7 @@ const defaultHeight = {
 };
 export const TextInput = React.forwardRef((_a, ref) => {
     var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx, disabled } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx", "disabled"]);
-    const id = useUniqueHtmlId('text-input');
+    const id = useUniqueId('text-input');
     const theme = useTheme();
     const size = sizeParam || INPUT_SIZE.MD;
     const display = inline === false ? 'flex' : 'inline-flex';
@@ -79,7 +79,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     overflow: 'hidden',
                     minWidth: '0%',
                     borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
-                    zIndex: theme.zIndex.LABEL,
+                    zIndex: theme.zIndex.ELEVATED,
                 }, "aria-ignore": true }, { children: _jsx("legend", Object.assign({ style: {
                         width: 'auto',
                         float: 'unset',
@@ -112,7 +112,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
                     left: '0.5rem',
                     lineHeight: 1,
-                    zIndex: theme.zIndex.LABEL,
+                    zIndex: theme.zIndex.ELEVATED,
                     px: 1,
                     top: labelOffsetMap[size],
                 } }, { children: label })))] })));

package/dist/components/elements/ListBox/index.d.ts

@@ -13,7 +13,7 @@ type ListBoxProps<Value extends Key, Option extends BasicOption<Value>> = Styled
     onBlur?: () => void;
 }>;
 export declare const ListBox: <Value extends React.Key = string, Option extends BasicOption<Value> = any>(props: {
-    sx?: import("../../../theme").StylesProp | undefined;
+    sx?: import("../../..").StylesProp | undefined;
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
     options: Option[];

package/dist/components/elements/TabList/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
-import { useUniqueHtmlId } from '../../../utils/hooks/useUniqueHtmlId';
+import { useUniqueId } from '../../providers/uniqueIds';
 export const TabList = (_a) => {
     var { children, sx } = _a, props = __rest(_a, ["children", "sx"]);
     return (_jsx("div", Object.assign({ role: "tablist", sx: Object.assign({ flexDirection: 'row' }, sx) }, props, { children: children })));
@@ -20,7 +20,7 @@ export const TabList = (_a) => {
 export const Tab = (_a) => {
     var { selected, children } = _a, rest = __rest(_a, ["selected", "children"]);
     const typographyStyles = getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE);
-    const labelId = useUniqueHtmlId('tab-label');
+    const labelId = useUniqueId('tab-label');
     return (_jsx("button", Object.assign({ role: "tab", sx: Object.assign({ height: '3.25rem', boxSizing: 'border-box', px: 4, bg: COLOR.WHITE, color: selected ? COLOR.DARK_GRAY : COLOR.GRAY, border: 'none', borderBottom: selected ? 'solid 3px' : 'solid 1px', borderColor: selected ? COLOR.ND_BLUE_BRIGHT : COLOR.LIGHT_GRAY, cursor: 'pointer' }, typographyStyles), "aria-labelledby": labelId, "aria-selected": selected ? 'true' : 'false' }, rest, { children: _jsx("div", Object.assign({ id: labelId, sx: {
                 transform: selected ? 'scale(1.1)' : undefined,
                 ':hover': {

package/dist/components/providers/menu.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { useEnvironment } from './env';
 import { KEY_CODES, equals } from '../../utils/misc';
-import { useUniqueHtmlId } from '../../utils/hooks/useUniqueHtmlId';
 import { useCheckMidClick } from '../../utils/hooks/useCheckMidClick';
+import { useUniqueId } from './uniqueIds';
 export var MENU_ACTION_TYPE;
 (function (MENU_ACTION_TYPE) {
     MENU_ACTION_TYPE["SUBMENU"] = "SUBMENU";
@@ -41,14 +41,14 @@ const inactiveStyles = {
 };
 export const MenuProvider = ({ menu, children, }) => {
     const { flagInDevelopment } = useEnvironment();
-    const salt = useUniqueHtmlId();
+    const menuId = useUniqueId('hcl-menu');
     const { isMidClick, elementProps: checkMidclickProps } = useCheckMidClick();
     const [usingKeyboard, setUsingKeyboard] = useState(false);
     const closeOnBlurTimeout = React.useRef();
     const initialPath = React.useMemo(() => [menu.items[0].id], [menu]);
     const [activePath, setActivePath] = useState(initialPath);
     const [isOpen, setIsOpen] = useState(false);
-    const getItemId = React.useCallback((path) => `menu-${salt}-item-${path.join('-')}`, [salt]);
+    const getItemId = React.useCallback((path) => `${menuId}-item-${path.join('-')}`, [menuId]);
     useEffect(() => {
         if (activePath && isOpen) {
             const activeChild = window.document.getElementById(getItemId(activePath));

package/dist/components/providers/snackBar.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+type SnackBarMessage = {
+    message: string;
+    content?: JSX.Element;
+    id?: string;
+};
+type SendMessageOptions = {
+    timeout?: number;
+    wipePrevious?: boolean;
+};
+type SnackBarMessageWithId = Omit<SnackBarMessage, 'id'> & {
+    id: string;
+};
+type AddMessage = (message: SnackBarMessage, options?: SendMessageOptions) => void;
+type SnackBarContextType = {
+    addMessage: AddMessage;
+    removeMessage: (id: string) => void;
+    messages: SnackBarMessageWithId[];
+    previousMessageCount: number;
+};
+export declare const SnackBarProvider: React.FC<React.PropsWithChildren>;
+export declare const useSnackBar: () => SnackBarContextType;
+export {};

package/dist/components/providers/snackBar.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useRef, useState, } from 'react';
+const DEFAULT_TIMEOUT = 10000;
+const SnackBarContext = createContext({
+    addMessage: () => { },
+    removeMessage: () => { },
+    previousMessageCount: 0,
+    messages: [],
+});
+export const SnackBarProvider = ({ children, }) => {
+    const [messages, setMessages] = useState([]);
+    const removeMessageTimeouts = useRef([]);
+    const previousMessageCount = useRef(0);
+    const removeMessage = useCallback((id) => {
+        setMessages((messages) => {
+            previousMessageCount.current = messages.length;
+            return messages.filter((m) => m.id !== id);
+        });
+    }, []);
+    const addMessage = useCallback((message, options = {}) => {
+        const newRandomId = Math.random().toString(36).substring(7);
+        setMessages((messages) => {
+            previousMessageCount.current = options.wipePrevious
+                ? 0
+                : messages.length;
+            let newMessages = options.wipePrevious ? [] : [...messages];
+            newMessages = newMessages.filter((m) => m.id !== message.id);
+            newMessages.push(Object.assign(Object.assign({}, message), { id: message.id || newRandomId }));
+            if (newMessages.length > 3) {
+                newMessages.shift();
+            }
+            return newMessages;
+        });
+        const removeMessageTimeout = setTimeout(() => {
+            removeMessage(newRandomId);
+        }, options.timeout || DEFAULT_TIMEOUT);
+        removeMessageTimeouts.current.push(removeMessageTimeout);
+    }, [removeMessage]);
+    useEffect(() => {
+        return () => {
+            removeMessageTimeouts.current.forEach((timeout) => clearTimeout(timeout));
+        };
+    }, []);
+    return (_jsx(SnackBarContext.Provider, Object.assign({ value: {
+            messages,
+            removeMessage,
+            previousMessageCount: previousMessageCount.current,
+            addMessage,
+        } }, { children: children })));
+};
+export const useSnackBar = () => {
+    return useContext(SnackBarContext);
+};

package/dist/components/providers/ui.js

@@ -7,7 +7,9 @@ import { FontLoader } from '../../FontLoader';
 import { GlobalStyles } from '../../theme/GlobalStyles';
 import { DialogsProvider } from './dialogs';
 import { MediaSizeProvider } from './media';
+import { SnackBarProvider } from './snackBar';
+import { UniqueIdProvider } from './uniqueIds';
 export const UiProvider = ({ env, components, alertsConfig, children, includeTheme = true, loadFonts, loadGlobalStyles, }) => {
-    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
+    const core = (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(MediaSizeProvider, { children: _jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(UniqueIdProvider, { children: _jsx(SnackBarProvider, { children: _jsx(DialogsProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) }) }) })) }), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
     return includeTheme ? _jsx(ThemeProvider, { children: core }) : core;
 };

package/dist/components/providers/uniqueIds.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const UniqueIdProvider: React.FC<React.PropsWithChildren>;
+export declare const useUniqueId: (prefix: string) => string;

package/dist/components/providers/uniqueIds.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef } from 'react';
+const UniqueIdContext = createContext({});
+export const UniqueIdProvider = ({ children, }) => {
+    const countIndexRef = useRef({});
+    return (_jsx(UniqueIdContext.Provider, Object.assign({ value: countIndexRef.current }, { children: children })));
+};
+export const useUniqueId = (prefix) => {
+    const countIndex = useContext(UniqueIdContext);
+    return useMemo(() => {
+        var _a;
+        const idForPrefix = ((_a = countIndex[prefix]) === null || _a === void 0 ? void 0 : _a.count) || 1;
+        if (!countIndex[prefix]) {
+            countIndex[prefix] = {
+                count: 2,
+            };
+        }
+        else {
+            countIndex[prefix].count += 1;
+        }
+        return `${prefix}-${idForPrefix}`;
+    }, []);
+};

package/dist/components/providers/uniqueIds.test.d.ts

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

package/dist/components/providers/uniqueIds.test.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { UniqueIdProvider, useUniqueId } from './uniqueIds';
+const ExampleInner = () => {
+    const uniqueId1 = useUniqueId('test-1');
+    const uniqueId2 = useUniqueId('test-1');
+    const uniqueId3 = useUniqueId('test-2');
+    return (_jsxs(_Fragment, { children: [_jsx("div", { children: uniqueId1 }), _jsx("div", { children: uniqueId2 }), _jsx("div", { children: uniqueId3 })] }));
+};
+const ExampleOuter = () => {
+    return (_jsxs(UniqueIdProvider, { children: [_jsx(ExampleInner, {}), _jsx(ExampleInner, {}), _jsx(ExampleInner, {})] }));
+};
+describe('UniqueIdProvider', () => {
+    it('should generate unique ids', () => {
+        const { getByText } = render(_jsx(ExampleOuter, {}));
+        expect(getByText('test-1-1')).toBeInTheDocument();
+        expect(getByText('test-1-2')).toBeInTheDocument();
+        expect(getByText('test-2-1')).toBeInTheDocument();
+        expect(getByText('test-1-3')).toBeInTheDocument();
+        expect(getByText('test-1-4')).toBeInTheDocument();
+        expect(getByText('test-2-2')).toBeInTheDocument();
+        expect(getByText('test-1-5')).toBeInTheDocument();
+        expect(getByText('test-1-6')).toBeInTheDocument();
+        expect(getByText('test-2-3')).toBeInTheDocument();
+    });
+});

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { theme, ThemeProvider, useTheme } from './theme';
+export type { StylesProp } from './theme';
 export { COLOR } from './theme/colors';
 export { TYPOGRAPHY_TYPE, FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, } from './theme/typography';
 export { GlobalStyles } from './theme/GlobalStyles';
@@ -31,6 +32,7 @@ export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
+export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
@@ -39,7 +41,9 @@ export { DragDropList, DragHandle } from './components/composites/DragDropList';
 export { Seo } from './components/composites/Seo';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
+export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
+export { useUniqueId } from './components/providers/uniqueIds';
 export { useHover } from './utils/hooks/useHover';

package/dist/index.js

@@ -31,6 +31,7 @@ export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Table, TableColumn } from './components/elements/Table';
 export { TabList, Tab } from './components/elements/TabList';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
+export { SnackBar } from './components/composites/SnackBar';
 export { NavMenu } from './components/composites/NavMenu';
 export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
@@ -39,7 +40,9 @@ export { DragDropList, DragHandle } from './components/composites/DragDropList';
 export { Seo } from './components/composites/Seo';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';
+export { SnackBarProvider, useSnackBar } from './components/providers/snackBar';
 export { useAlerts, AlertsProvider, ALERT_DOMAIN, } from './components/providers/alerts';
 export { MediaSizeProvider, useMediaQuery } from './components/providers/media';
 export { DialogsProvider, useDialog } from './components/providers/dialogs';
+export { useUniqueId } from './components/providers/uniqueIds';
 export { useHover } from './utils/hooks/useHover';

package/dist/theme/custom.d.ts

@@ -5,7 +5,7 @@ export declare enum BOX_SHADOW {
 }
 export declare enum Z_INDEX {
     NORMAL = 1,
-    LABEL = 2,
-    DROPDOWN = 3,
+    ELEVATED = 2,
+    DIALOG = 3,
     MODAL = 4
 }

package/dist/theme/custom.js

@@ -7,7 +7,7 @@ export var BOX_SHADOW;
 export var Z_INDEX;
 (function (Z_INDEX) {
     Z_INDEX[Z_INDEX["NORMAL"] = 1] = "NORMAL";
-    Z_INDEX[Z_INDEX["LABEL"] = 2] = "LABEL";
-    Z_INDEX[Z_INDEX["DROPDOWN"] = 3] = "DROPDOWN";
+    Z_INDEX[Z_INDEX["ELEVATED"] = 2] = "ELEVATED";
+    Z_INDEX[Z_INDEX["DIALOG"] = 3] = "DIALOG";
     Z_INDEX[Z_INDEX["MODAL"] = 4] = "MODAL";
 })(Z_INDEX || (Z_INDEX = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -44,7 +44,6 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.11.16",
-    "@types/pretty": "^2.0.1",
     "@storybook/addon-essentials": "^7.0.17",
     "@storybook/addon-interactions": "^7.0.18",
     "@storybook/addon-links": "^7.0.17",
@@ -54,6 +53,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/pretty": "^2.0.1",
     "@types/react": "^18.0.28",
     "@types/react-beautiful-dnd": "^13.1.5",
     "@types/react-datepicker": "^4.15.0",

package/dist/utils/hooks/useUniqueHtmlId.d.ts

@@ -1 +0,0 @@
-export declare const useUniqueHtmlId: (prefix?: string) => string;

package/dist/utils/hooks/useUniqueHtmlId.js

@@ -1,7 +0,0 @@
-import { useMemo } from 'react';
-export const useUniqueHtmlId = (prefix) => {
-    return useMemo(() => {
-        const random = Math.random().toString().slice(2);
-        return `${prefix}-${random}`;
-    }, [prefix]);
-};