@cube-dev/ui-kit 0.113.0 → 0.114.0

package/es/components/overlays/NewNotifications/NotificationView/NotificationView.js

@@ -1,86 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useFocusRing, useHover } from 'react-aria';
-import { useEvent, useTimer } from '../../../../_internal/index.js';
-import { tasty } from '../../../../tasty/index.js';
-import { ClearSlots, mergeProps } from '../../../../utils/react/index.js';
-import { useId } from '../../../../utils/react/useId.js';
-import { useNotificationsDialogContext } from '../Dialog/NotificationsDialogContext.js';
-import { NotificationCloseButton } from './NotificationCloseButton.js';
-import { NotificationDescription } from './NotificationDescription.js';
-import { NotificationFooter } from './NotificationFooter.js';
-import { NotificationHeader } from './NotificationHeader.js';
-import { NotificationIcon } from './NotificationIcon.js';
-import { NotificationProvider } from './NotificationProvider.js';
-const NotificationContainer = tasty({
-    styles: {
-        boxSizing: 'border-box',
-        position: 'relative',
-        display: 'grid',
-        width: '100%',
-        padding: '0.5x 0.5x 1.5x 1.5x',
-        gridAreas: `
-      ".    . .           .      close"
-      "icon . header      .      close"
-      "icon . description .      close"
-      ".    . footer      footer footer"
-    `,
-        gridColumns: 'min-content 1x minmax(0, auto) 1x minmax(0, min-content)',
-        gridRows: '1x minmax(0, auto) minmax(0, auto) minmax(0, auto)',
-        fill: '#white',
-        radius: '1cr',
-        boxShadow: {
-            '': '0 0 0 4bw #purple-04.0 inset',
-            focused: '0 0 0 4bw #purple-04 inset',
-        },
-        outline: 0,
-        border: {
-            '': '#border',
-            'type=success': '#success.4',
-            'type=danger': '#danger.4',
-            'type=attention': '#border',
-            // Clear border when inside dialog
-            'inside-dialog': false,
-        },
-    },
-});
-/**
- * @internal This component is unstable and is a subject to change.
- */
-export const NotificationView = forwardRef(function NotificationView(props, ref) {
-    const { onClose, actions, header, icon, description, id, styles, type = 'attention', isDismissible = true, duration = null, attributes = {}, qa = 'notification', timer: propsTimer, onDismiss, } = props;
-    const labelID = useId();
-    const descriptionID = useId();
-    // Detect if we're inside a NotificationsDialog specifically
-    const insideNotificationsDialog = useNotificationsDialogContext();
-    const onCloseEvent = useEvent(() => {
-        onClose?.();
-    });
-    const onDismissEvent = useEvent(() => {
-        if (isDismissible) {
-            onDismiss?.();
-        }
-    });
-    const { hoverProps, isHovered } = useHover({});
-    const { isFocusVisible, focusProps } = useFocusRing({ within: true });
-    useTimer({
-        timer: propsTimer,
-        delay: duration,
-        callback: onDismissEvent,
-        isDisabled: isFocusVisible || isHovered || !isDismissible,
-    });
-    return (_jsx(ClearSlots, { children: _jsx(NotificationProvider, { onClose: onClose, children: _jsxs(NotificationContainer, { ...mergeProps(attributes, hoverProps, focusProps), ref: ref, styles: styles, "data-id": id, "data-qa": qa, "data-type": type, "aria-labelledby": labelID, "aria-describedby": descriptionID, mods: {
-                    focused: isFocusVisible,
-                    'is-dismissible': isDismissible,
-                    'inside-dialog': insideNotificationsDialog,
-                }, children: [_jsx(NotificationIcon, { icon: icon, type: type }), _jsx(NotificationHeader, { header: header, id: labelID }), description && (_jsx(NotificationDescription, { description: description, id: descriptionID })), _jsx(NotificationFooter, { hasDescription: !!description, actions: actions, onClose: onCloseEvent, onDismiss: onDismissEvent }), isDismissible && (_jsx(NotificationCloseButton, { onPress: onDismissEvent }))] }) }) }));
-});
-
-        

package/es/components/overlays/NewNotifications/NotificationView/index.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-export * from './NotificationView.js';
-export * from './NotificationAction.js';
-
-        

package/es/components/overlays/NewNotifications/NotificationView/types.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-export {};
-
-        

package/es/components/overlays/NewNotifications/NotificationsContext/NotificationsContext.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { createContext } from 'react';
-export const NotificationsContext = createContext(null);
-
-        

package/es/components/overlays/NewNotifications/NotificationsContext/NotificationsProvider.js

@@ -1,21 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { Portal } from '../../../portal/index.js';
-import { NotificationsBar } from '../Bar/index.js';
-import { NotificationsContext } from './NotificationsContext.js';
-import { useNotifications } from './use-notifications.js';
-export function NotificationsProvider(props) {
-    const { children, rootRef } = props;
-    const { notifications, api, addOnDismissListener, onDismissNotification } = useNotifications(rootRef);
-    const providerValue = useMemo(() => ({ api, addOnDismissListener }), []);
-    return (_jsxs(NotificationsContext.Provider, { value: providerValue, children: [_jsx(Portal, { children: _jsx(NotificationsBar, { items: notifications, onRemoveNotification: api.remove, onDismissNotification: onDismissNotification, children: (notification) => (_jsx(NotificationsBar.Item, { ...notification }, notification.id)) }) }), children] }));
-}
-
-        

package/es/components/overlays/NewNotifications/NotificationsContext/index.js

@@ -1,11 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-export { NotificationsProvider } from './NotificationsProvider.js';
-export { NotificationsContext } from './NotificationsContext.js';
-
-        

package/es/components/overlays/NewNotifications/NotificationsContext/use-notifications.js

@@ -1,91 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useEvent } from '../../../../_internal/index.js';
-const DISMISS_EVENT_NAME = 'cube:notification:dismiss';
-export function useNotifications(rootRef) {
-    const idPrefix = useMemo(() => new Date().getTime(), []);
-    const idRef = useRef(0);
-    const listeners = useRef([]);
-    const [notifications, setNotifications] = useState(new Map());
-    const addToast = Object.assign(useEvent((props) => {
-        const nextID = idRef.current++;
-        const { id = `${idPrefix}_${nextID}`, duration, isDismissible = true, ...rest } = props;
-        setNotifications((toasts) => {
-            const newToasts = new Map(toasts);
-            newToasts.set(id, {
-                id,
-                isDismissible,
-                duration: duration ?? (isDismissible ? 5_000 : null),
-                ...rest,
-            });
-            return newToasts;
-        });
-        return {
-            id,
-            remove: () => removeToast(id),
-            update: (props) => updateToast(id, props),
-        };
-    }), {
-        success: (props) => addToast({ type: 'success', ...props }),
-        danger: (props) => addToast({ type: 'danger', ...props }),
-        attention: (props) => addToast({ type: 'attention', ...props }),
-    });
-    const updateToast = useEvent((id, props) => {
-        setNotifications((toasts) => {
-            const currentToast = toasts.get(id);
-            if (currentToast) {
-                const newToasts = new Map(toasts);
-                newToasts.set(id, {
-                    ...currentToast,
-                    ...props,
-                });
-                return newToasts;
-            }
-            return toasts;
-        });
-    });
-    const removeToast = useEvent((id) => {
-        setNotifications((toasts) => {
-            if (toasts.has(id)) {
-                const newToasts = new Map(toasts);
-                newToasts.delete(id);
-                return newToasts;
-            }
-            return toasts;
-        });
-    });
-    const onDismissNotification = useEvent((id) => {
-        const toast = notifications.get(id);
-        if (toast == null) {
-            return;
-        }
-        if (toast?.putNotificationInDropdownOnDismiss !== false) {
-            rootRef?.current?.dispatchEvent(new CustomEvent(DISMISS_EVENT_NAME, { detail: toast }));
-        }
-    });
-    const addOnDismissListener = useEvent((listener) => {
-        const callback = (e) => listener(e.detail);
-        const unsub = () => rootRef?.current?.removeEventListener(DISMISS_EVENT_NAME, callback);
-        listeners.current.push(unsub);
-        rootRef?.current?.addEventListener(DISMISS_EVENT_NAME, callback);
-        return unsub;
-    });
-    useEffect(() => () => listeners.current.forEach((cb) => cb()), []);
-    const api = useMemo(() => ({ notify: addToast, update: updateToast, remove: removeToast }), 
-    // All deps are stable since we use `useEvent` hook
-    []);
-    return {
-        api,
-        notifications: useMemo(() => [...notifications.values()], [notifications]),
-        onDismissNotification,
-        addOnDismissListener,
-    };
-}
-
-        

package/es/components/overlays/NewNotifications/NotificationsList/NotificationsList.js

@@ -1,45 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { Item } from 'react-stately';
-import { tasty } from '../../../../tasty/index.js';
-import { useNotificationsList } from '../hooks/index.js';
-import { NotificationListItem } from './NotificationsListItem.js';
-const NotificationListContainer = tasty({
-    qa: 'NotificationsList',
-    styles: { boxSizing: 'border-box', width: '100%' },
-});
-/**
- * Provides ability to show notifications as a list.
- *
- * @example
- *   <NotificationsList>
- *     <NotificationsList.Item key="id_1" type="success" description="Edit and test your schema without affecting the production." />
- *     <NotificationsList.Item key="id_2" type="attention" description="Edit and test your schema without affecting the production." />
- *     <NotificationsList.Item key="id_3" type="danger" description="Edit and test your schema without affecting the production." />
- *   </NotificationsList>
- *
- * @example Removing a notification
- *   <NotificationsList onDismiss={(id) => removeNotification(id)}>
- *     <NotificationsList.Item key="id_1" type="success" description="Edit and test your schema without affecting the production." />
- *   </NotificationsList>
- */
-export function NotificationsList(props) {
-    const { items, children, onDismiss } = props;
-    const ref = useRef(null);
-    const { state, listProps } = useNotificationsList({
-        items,
-        children,
-        ref,
-    });
-    return (_jsx(NotificationListContainer, { ref: ref, ...listProps, children: [...state.collection].map((item) => (_jsx(NotificationListItem, { item: item, state: state, onDismiss: onDismiss }, item.key))) }));
-}
-NotificationsList.Item = Item;
-
-        

package/es/components/overlays/NewNotifications/NotificationsList/NotificationsListItem.js

@@ -1,29 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { useEvent } from '../../../../_internal/index.js';
-import { tasty } from '../../../../tasty/index.js';
-import { useNotificationListItem } from '../hooks/index.js';
-import { NotificationView } from '../NotificationView/index.js';
-const NotificationListItemWrap = tasty({
-    styles: { borderBottom: { '': '1bw solid #border', ':last-child': 'none' } },
-});
-/**
- * @internal This component is not intended to be used
- */
-export function NotificationListItem(props) {
-    const { item, state, onDismiss } = props;
-    const { key, props: notificationProps } = item;
-    const ref = useRef(null);
-    const onDismissEvent = useEvent(() => onDismiss?.(key));
-    const { itemProps } = useNotificationListItem({ ref, key, state });
-    return (_jsx(NotificationListItemWrap, { children: _jsx(NotificationView, { ref: ref, attributes: itemProps, ...notificationProps, isDismissible: !!onDismiss, onDismiss: onDismissEvent }) }));
-}
-
-        

package/es/components/overlays/NewNotifications/NotificationsList/index.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-export * from './NotificationsList.js';
-
-        

package/es/components/overlays/NewNotifications/hooks/index.js

@@ -1,14 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-export * from './use-notifications-list.js';
-export * from './use-notification-list-item.js';
-export * from './use-notifications-api.js';
-export * from './use-notifications-observer.js';
-export * from './types.js';
-
-        

package/es/components/overlays/NewNotifications/hooks/types.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-export {};
-
-        

package/es/components/overlays/NewNotifications/hooks/use-notification-list-item.js

@@ -1,15 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { useSelectableItem } from '@react-aria/selection';
-export function useNotificationListItem(props) {
-    const { ref, key, state: { selectionManager }, } = props;
-    // @ts-ignore
-    return useSelectableItem({ ref, key, selectionManager });
-}
-
-        

package/es/components/overlays/NewNotifications/hooks/use-notifications-api.js

@@ -1,17 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { useContext } from 'react';
-import invariant from 'tiny-invariant';
-import { NotificationsContext } from '../NotificationsContext/index.js';
-export function useNotificationsApi() {
-    const context = useContext(NotificationsContext);
-    invariant(context !== null, "You can't use Notifications outside of the <Root /> component. Please, check if your component is descendant of <Root/> component");
-    return context.api;
-}
-
-        

package/es/components/overlays/NewNotifications/hooks/use-notifications-list.js

@@ -1,29 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { useSelectableList } from '@react-aria/selection';
-import { useListState } from 'react-stately';
-export function useNotificationsList(props) {
-    const { ref, children, items } = props;
-    const state = useListState({
-        selectionMode: 'none',
-        children: children,
-        items: items,
-        suppressTextValueWarning: true,
-    });
-    const { listProps } = useSelectableList({
-        ref,
-        allowsTabNavigation: true,
-        ...state,
-    });
-    return {
-        listProps,
-        state,
-    };
-}
-
-        

package/es/components/overlays/NewNotifications/hooks/use-notifications-observer.js

@@ -1,17 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { useContext, useEffect } from 'react';
-import { useEvent } from '../../../../_internal/index.js';
-import { NotificationsContext } from '../NotificationsContext/index.js';
-export function useNotificationsObserver(callback) {
-    const { addOnDismissListener } = useContext(NotificationsContext) ?? {};
-    const callbackEvent = useEvent(callback);
-    useEffect(() => addOnDismissListener?.(callbackEvent), [addOnDismissListener]);
-}
-
-        

package/es/components/overlays/NewNotifications/index.js

@@ -1,15 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-export { NotificationsProvider, NotificationsContext, } from './NotificationsContext/index.js';
-export * from './NotificationsList/index.js';
-export * from './hooks/index.js';
-export { NotificationAction } from './NotificationView/index.js';
-export * from './Dialog/index.js';
-export * from './Notification.js';
-
-        

package/es/components/overlays/NewNotifications/types.js

@@ -1,10 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-export {};
-
-        

package/es/components/overlays/Notification/Notification.js

@@ -1,80 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import THEMES from '../../../data/themes.js';
-import { CheckIcon, CloseIcon, ExclamationIcon, InfoIcon, } from '../../../icons/index.js';
-import { tasty } from '../../../tasty/index.js';
-import { Action } from '../../actions/index.js';
-import { Block } from '../../Block.js';
-import { Card } from '../../content/Card/Card.js';
-const NotificationElement = tasty(Card, {
-    role: 'region',
-    styles: {
-        display: 'grid',
-        color: '#dark-02',
-        padding: '.5x',
-        shadow: true,
-        border: false,
-        margin: '1x bottom',
-        radius: '1x',
-        gridColumns: 'auto 1fr auto',
-        placeItems: 'center start',
-        gap: '2x',
-        preset: 't3',
-        Icon: {
-            display: 'flex',
-            radius: '1r',
-            width: '5x',
-            height: '5x',
-            placeContent: 'center',
-            placeItems: 'center',
-            preset: 't2',
-            color: {
-                '': '#dark-02',
-                ...Object.keys(THEMES).reduce((map, theme) => {
-                    map[`theme=${theme}`] = THEMES[theme].color;
-                    return map;
-                }, {}),
-            },
-            fill: {
-                '': '#clear',
-                ...Object.keys(THEMES).reduce((map, theme) => {
-                    map[`theme=${theme}`] = THEMES[theme].fill;
-                    return map;
-                }, {}),
-            },
-        },
-    },
-});
-const CloseButton = tasty(Action, {
-    styles: {
-        color: { '': '#dark-02', hovered: '#primary' },
-        width: '5x',
-        height: '5x',
-        label: 'Close',
-    },
-});
-export function Notification(allProps) {
-    let { theme, type, children, onClose, ...props } = allProps;
-    theme = theme || type || 'note';
-    let Icon;
-    switch (theme) {
-        case 'success':
-            Icon = CheckIcon;
-            break;
-        case 'danger':
-            Icon = ExclamationIcon;
-            break;
-        default:
-            Icon = InfoIcon;
-            break;
-    }
-    return (_jsxs(NotificationElement, { ...props, "data-theme": theme, children: [_jsx("div", { "data-element": "Icon", children: _jsx(Icon, {}) }), _jsx(Block, { children: children }), _jsx(CloseButton, { onPress: onClose, children: _jsx(CloseIcon, {}) })] }));
-}
-
-        

package/es/services/notification.js

@@ -1,71 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createRef } from 'react';
-import { createRoot } from 'react-dom/client';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { Notification, } from '../components/overlays/Notification/Notification.js';
-let ID = 0;
-/**
- * @deprecated consider using `useNotificationsApi` instead
- */
-export const notification = {
-    root: null,
-    defaultOptions: {
-        duration: 5000,
-    },
-    items: [],
-    init() {
-        if (this.root)
-            return;
-        this.root = document.createElement('div');
-        this.root.classList.add('cube-notification-container');
-        document.body.appendChild(this.root);
-        this._render([]);
-    },
-    render() {
-        this.init();
-        this._render();
-    },
-    _render(items) {
-        if (!items) {
-            items = this.items;
-        }
-        if (!this.root)
-            return;
-        const root = createRoot(this.root);
-        root.render(_jsx(TransitionGroup, { className: "cube-notifications", children: items.map((item) => {
-                const nodeRef = createRef();
-                return (_jsx(CSSTransition, { nodeRef: nodeRef, timeout: 400, classNames: "cube-notification", children: _jsx("div", { ref: nodeRef, children: _jsx(Notification, { type: item.type, onClose: () => this.close(item.id), children: item.message }) }) }, item.id));
-            }) }));
-    },
-    show(type, message, options = {}) {
-        options = Object.assign({}, this.defaultOptions, options);
-        const id = ++ID;
-        this.items.push({ id, type, message });
-        this.render();
-        setTimeout(() => {
-            this.close(id);
-        }, options.duration);
-    },
-    close(id) {
-        this.items = this.items.filter((item) => item.id !== id);
-        this.render();
-    },
-    success(message, options) {
-        this.show('success', message, options);
-    },
-    danger(message, options) {
-        this.show('danger', message, options);
-    },
-    info(message, options) {
-        this.show('note', message, options);
-    },
-};
-
-        

package/types/components/overlays/NewNotifications/Bar/FloatingNotification.d.ts

@@ -1,15 +0,0 @@
-import { Key } from 'react';
-import { NotificationItemNode, NotificationsListState } from '../hooks';
-import { CubeNotifyApiPropsWithID } from '../types';
-export type FloatingNotificationProps = {
-    id: Key;
-    isDisabledTimer: boolean;
-    onRemoveNotification: (id: Key) => void;
-    onDismissNotification: (id: Key) => void;
-    item: NotificationItemNode<CubeNotifyApiPropsWithID>;
-    state: NotificationsListState<CubeNotifyApiPropsWithID>;
-};
-/**
- * @internal This component is unstable and must not be used outside of `NotificationsBar`.
- */
-export declare const FloatingNotification: import("react").NamedExoticComponent<FloatingNotificationProps>;

package/types/components/overlays/NewNotifications/Bar/NotificationsBar.d.ts

@@ -1,21 +0,0 @@
-import { Key } from 'react';
-import { CollectionChildren } from '../hooks';
-import { CubeNotifyApiPropsWithID } from '../types';
-export type NotificationsBarProps = {
-    items: Iterable<CubeNotifyApiPropsWithID>;
-    children: CollectionChildren<CubeNotifyApiPropsWithID>;
-    onRemoveNotification: (id: Key) => void;
-    onDismissNotification: (id: Key) => void;
-    /**
-     * Defines the amount of notifications that can be displayed at once.
-     * @default 5
-     */
-    limit?: number;
-};
-/**
- * @internal Do not use it
- */
-export declare function NotificationsBar(props: NotificationsBarProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace NotificationsBar {
-    var Item: (props: CubeNotifyApiPropsWithID) => null;
-}