npm - @cerberus-design/react - Versions diffs - 0.10.3 → 0.10.4 - Mend

@cerberus-design/react 0.10.3 → 0.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/build/legacy/context/notification-center.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/context/notification-center.tsx","../../../src/components/Show.tsx","../../../src/components/NotificationHeading.tsx","../../../src/components/NotificationDescription.tsx","../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Portal.tsx","../../../src/components/Button.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/*\n This module provides a context and hook for notifications.\n * @module\n /\n\nexport interface NotifyOptions {\n /\n The palette of the notification.\n * @default 'info'\n /\n palette: 'info' \| 'success' \| 'warning' \| 'danger'\n /\n The heading of the notification.\n /\n heading: string\n /\n The unique id of the notification.\n /\n id?: string\n /\n The description of the notification.\n /\n description?: ReactNode\n /\n The action to take when the notification is closed\n /\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue \| null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/\n Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n \n // Use the hook to show a notification.\n * const notify = useNotifications()\n \n const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n /\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"text\"\n >\n Close all\n </Button>\n </Show>\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string \| undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description } = props\n\n switch (palette) {\n case 'success':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"success\"\n >\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"warning\"\n >\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/\n The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n /\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/\n This module contains the Show component.\n * @module\n /\n\nexport interface ShowProps {\n /\n The condition to render memoized children or the fallback content.\n /\n when: boolean \| null \| undefined\n /\n The children to render when the condition is false.\n /\n fallback?: ReactNode\n}\n\n/\n Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n /\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module exports the NotificationHeading component.\n * @module\n /\n\nexport interface BaseNotificationHeadingProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n NotificationVariantProps\n\n/\n Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n /\nexport function NotificationHeading(props: NotificationHeadingProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n )\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module exports the NotificationDescription component.\n * @module\n /\n\nexport interface BaseNotificationDescriptionProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n NotificationVariantProps\n\n/\n Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n /\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p\n className={cx(nativeProps.className, styles.description)}\n {...nativeProps}\n />\n )\n}\n","'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/\n This module exports the Notification component.\n * @module\n /\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = props.palette \|\| 'info'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n /\n The unique id of the notification. Required for the onClose callback.\n /\n id: string\n /\n Called when the close button is clicked.\n /\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/\n A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n /\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n role=\"alert\"\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <Close />\n </button>\n </dialog>\n )\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType \| ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/\n This module contains substitute icons for the Checkbox component.\n * @module\n /\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/\n Checkmark icon for Checkbox component\n /\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/\n Indeterminate icon for Checkbox component\n /\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n","import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/\n This module is the Portal component.\n * @module\n /\n\nexport interface PortalProps {\n /\n The root container to render the children into.\n * @default document.body\n /\n container?: Element \| DocumentFragment\n /\n An optional key to use for the Portal component.\n /\n key?: null \| string\n}\n\n/\n The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n /\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n if (typeof window !== 'undefined') {\n const container = props.container \|\| document.body\n return createPortal(props.children, container, props.key)\n }\n\n return null\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n button,\n type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/\n This module contains the Button component.\n * @module\n /\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n ButtonVariantProps\n\n/\n A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n const { palette, usage, shape, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n />\n )\n}\n"],"mappings":"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","names":["import_react","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_icons","import_jsx_runtime","import_jsx_runtime","import_patterns","import_recipes","import_css","import_recipes","import_jsx_runtime","import_css","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../../src/context/notification-center.tsx","../../../src/components/Show.tsx","../../../src/components/NotificationHeading.tsx","../../../src/components/NotificationDescription.tsx","../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Portal.tsx","../../../src/components/Button.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/*\n This module provides a context and hook for notifications.\n * @module\n /\n\nexport interface NotifyOptions {\n /\n The palette of the notification.\n * @default 'info'\n /\n palette: 'info' \| 'success' \| 'warning' \| 'danger'\n /\n The heading of the notification.\n /\n heading: string\n /\n The unique id of the notification.\n /\n id?: string\n /\n The description of the notification.\n /\n description?: ReactNode\n /\n The action to take when the notification is closed\n /\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue \| null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/\n Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n \n // Use the hook to show a notification.\n * const notify = useNotifications()\n \n const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n /\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"text\"\n >\n Close all\n </Button>\n </Show>\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string \| undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description } = props\n\n switch (palette) {\n case 'success':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"success\"\n >\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"warning\"\n >\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/\n The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n /\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/\n This module contains the Show component.\n * @module\n /\n\nexport interface ShowProps {\n /\n The condition to render memoized children or the fallback content.\n /\n when: boolean \| null \| undefined\n /\n The children to render when the condition is false.\n /\n fallback?: ReactNode\n}\n\n/\n Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n /\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module exports the NotificationHeading component.\n * @module\n /\n\nexport interface BaseNotificationHeadingProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n NotificationVariantProps\n\n/\n Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n /\nexport function NotificationHeading(props: NotificationHeadingProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n )\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module exports the NotificationDescription component.\n * @module\n /\n\nexport interface BaseNotificationDescriptionProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n NotificationVariantProps\n\n/\n Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n /\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p\n className={cx(nativeProps.className, styles.description)}\n {...nativeProps}\n />\n )\n}\n","'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/\n This module exports the Notification component.\n * @module\n /\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = props.palette \|\| 'info'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n /\n The unique id of the notification. Required for the onClose callback.\n /\n id: string\n /\n Called when the close button is clicked.\n /\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/\n A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n /\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <Close />\n </button>\n </dialog>\n )\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType \| ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/\n This module contains substitute icons for the Checkbox component.\n * @module\n /\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/\n Checkmark icon for Checkbox component\n /\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/\n Indeterminate icon for Checkbox component\n /\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n","import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/\n This module is the Portal component.\n * @module\n /\n\nexport interface PortalProps {\n /\n The root container to render the children into.\n * @default document.body\n /\n container?: Element \| DocumentFragment\n /\n An optional key to use for the Portal component.\n /\n key?: null \| string\n}\n\n/\n The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n /\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n if (typeof window !== 'undefined') {\n const container = props.container \|\| document.body\n return createPortal(props.children, container, props.key)\n }\n\n return null\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n button,\n type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/\n This module contains the Button component.\n * @module\n /\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n ButtonVariantProps\n\n/\n A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n const { palette, usage, shape, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n />\n )\n}\n"],"mappings":"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","names":["import_react","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_react","import_icons","import_jsx_runtime","import_jsx_runtime","import_patterns","import_recipes","import_css","import_recipes","import_jsx_runtime","import_css","import_jsx_runtime"]}

package/build/legacy/index.cjs CHANGED Viewed

@@ -372,11 +372,13 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function CircularProgress(props) {
   const strokeW = 14;
   const radius = `calc(50% * (1 - ${strokeW}/100))`;
-  const status = props.label ?? "Done";
+  const status = props.syntax ?? "Done";
   const now = props.now >= 100 ? 100 : props.now;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
+      id: props.id,
+      "aria-label": props.label,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": now,
@@ -583,7 +585,7 @@ var import_css6 = require("@cerberus/styled-system/css");
 var import_recipes5 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function ProgressBar(props) {
-  const { indeterminate, size, usage, now, ...nativeProps } = props;
+  const { indeterminate, size, usage, now, label: label2, ...nativeProps } = props;
   const styles = (0, import_recipes5.progressBar)({ size, usage });
   const nowClamped = Math.min(100, Math.max(0, now || 0));
   const width = {
@@ -593,6 +595,7 @@ function ProgressBar(props) {
     "div",
     {
       ...nativeProps,
+      "aria-label": label2,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": indeterminate ? 0 : nowClamped,
@@ -705,7 +708,15 @@ function FileStatus(props) {
                   children: file
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ProgressBar, { now, size: "sm" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                ProgressBar,
+                {
+                  id: props.id,
+                  label: "File upload status",
+                  now,
+                  size: "sm"
+                }
+              ),
               /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Field, { invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 FieldMessage,
                 {
@@ -1289,7 +1300,6 @@ function Notification(props) {
       ),
       onKeyDown,
       ref,
-      role: "alert",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: styles.icon, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MatchNotificationIcon, { palette }) }),
         /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -1634,7 +1644,7 @@ function Tab(props) {
       "aria-controls": `panel:${value}`,
       "aria-busy": isPending,
       "aria-selected": isActive,
-      id: value,
+      id: `tab:${value}`,
       className: (0, import_css25.cx)(nativeProps.className, styles.tab),
       onClick: handleClick,
       role: "tab",
@@ -1655,7 +1665,7 @@ function TabList(props) {
     "div",
     {
       ...nativeProps,
-      "aria-describedby": description,
+      "aria-label": description,
       className: (0, import_css26.cx)(
         nativeProps.className,
         (0, import_patterns12.hstack)({
@@ -1663,7 +1673,8 @@ function TabList(props) {
         }),
         styles.tabList
       ),
-      id: id ?? nativeProps.id
+      id: id ?? nativeProps.id,
+      role: "tablist"
     }
   );
 }
@@ -1681,7 +1692,7 @@ function TabPanel(props) {
     {
       ...nativeProps,
       ...isActive && { tabIndex: 0 },
-      "aria-labelledby": tab,
+      "aria-labelledby": `tab:${tab}`,
       className: (0, import_css27.cx)(nativeProps.className, styles.tabPanel),
       id: `panel:${tab}`,
       role: "tabpanel"