@cube-dev/ui-kit 0.10.13 → 0.11.2

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

@@ -0,0 +1,64 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { tasty } from '../../../../tasty';
+import { Danger, Success, Attention } from '../../../../icons';
+const IconContainer = tasty({
+    styles: {
+        boxSizing: 'border-box',
+        display: 'flex',
+        alignSelf: 'start',
+        gridArea: 'icon',
+        minHeight: '3x',
+        placeContent: 'center',
+    },
+});
+const IconPreset = tasty({
+    styles: {
+        boxSizing: 'border-box',
+        display: 'flex',
+        fill: {
+            '': '#note-bg',
+            attention: '#note-bg',
+            success: '#success-bg',
+            danger: '#danger-bg',
+        },
+        color: {
+            '': '#note-text',
+            attention: '#note-text',
+            success: '#success-text',
+            danger: '#danger-text',
+        },
+        borderRadius: '0.5x',
+        width: '3x',
+        height: '3x',
+        padding: '0.5x',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& svg': {
+            width: '100%',
+            height: '100%',
+        },
+    },
+});
+export const NotificationIcon = memo(function NotificationIcon(props) {
+    const { icon, type } = props;
+    return (_jsx(IconContainer, { children: icon ? (icon) : (_jsx(IconPreset, { mods: {
+                attention: type === 'attention',
+                success: type === 'success',
+                danger: type === 'danger',
+            }, children: iconsByType[type] }, void 0)) }, void 0));
+});
+const iconsByType = {
+    attention: _jsx(Attention, {}, void 0),
+    success: _jsx(Success, {}, void 0),
+    danger: _jsx(Danger, {}, void 0),
+};
+
+        

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

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+const NotificationContext = createContext(null);
+export function NotificationProvider(props) {
+    const { children, ...value } = props;
+    return (_jsx(NotificationContext.Provider, { value: value, children: children }, void 0));
+}
+export function useNotificationContext() {
+    const context = useContext(NotificationContext);
+    invariant(context, 'This component cannot be used outside of <Notification />');
+    return context;
+}
+
+        

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

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useHover } from '@react-aria/interactions';
+import { useFocusRing } from '@react-aria/focus';
+import { mergeProps, useId } from '@react-aria/utils';
+import { tasty } from '../../../../tasty';
+import { useEvent, useTimer } from '../../../../_internal';
+import { ClearSlots } from '../../../../utils/react';
+import { NotificationIcon } from './NotificationIcon';
+import { NotificationHeader } from './NotificationHeader';
+import { NotificationDescription } from './NotificationDescription';
+import { NotificationFooter } from './NotificationFooter';
+import { NotificationCloseButton } from './NotificationCloseButton';
+import { NotificationProvider } from './NotificationProvider';
+const NotificationContainer = tasty({
+    styles: {
+        boxSizing: 'border-box',
+        position: 'relative',
+        display: 'grid',
+        width: '100%',
+        padding: '1.5x 1x 1.5x 1.5x',
+        radius: '0.5x',
+        gridAreas: `
+      "icon . header"
+      "icon . description"
+      ".    . footer"
+    `,
+        gridColumns: 'min-content 1x minmax(0, auto)',
+        gridRows: 'minmax(0, auto) minmax(0, auto) minmax(0, auto)',
+        fill: '#white',
+        boxShadow: {
+            '': '0 0 0 4bw #purple-04.0 inset',
+            focused: '0 0 0 4bw #purple-04 inset',
+        },
+    },
+});
+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();
+    const onCloseEvent = useEvent(() => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    });
+    const onDismissEvent = useEvent(() => {
+        if (isDismissible) {
+            onDismiss === null || onDismiss === void 0 ? void 0 : 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), styles: styles, ref: ref, "data-id": id, "data-qa": qa, "aria-labelledby": labelID, "aria-describedby": descriptionID, mods: { focused: isFocusVisible, 'is-dismissible': isDismissible }, children: [_jsx(NotificationIcon, { icon: icon, type: type }, void 0), _jsx(NotificationHeader, { header: header, id: labelID }, void 0), description && (_jsx(NotificationDescription, { description: description, id: descriptionID }, void 0)), _jsx(NotificationFooter, { hasDescription: !!description, actions: actions, onClose: onCloseEvent, onDismiss: onDismissEvent }, void 0), isDismissible && (_jsx(NotificationCloseButton, { onPress: onDismissEvent, isHovered: isHovered, isFocused: isFocusVisible }, void 0))] }, void 0) }, void 0) }, void 0));
+});
+
+        

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,87 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEvent } from '../../../../_internal';
+const DISMISS_EVENT_NAME = 'cube:notification:dismiss';
+export function useNotifications(rootRef) {
+    const idRef = useRef(0);
+    const listeners = useRef([]);
+    const [toasts, setToasts] = useState(new Map());
+    const addToast = Object.assign(useEvent((props) => {
+        const nextID = idRef.current++;
+        const { id = nextID, duration, isDismissible = true, ...rest } = props;
+        setToasts((toasts) => {
+            const newToasts = new Map(toasts);
+            newToasts.set(id, {
+                id,
+                isDismissible,
+                duration: (duration !== null && duration !== void 0 ? duration : isDismissible) ? 5000 : 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) => {
+        setToasts((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) => {
+        setToasts((toasts) => {
+            if (toasts.has(id)) {
+                const newToasts = new Map(toasts);
+                newToasts.delete(id);
+                return newToasts;
+            }
+            return toasts;
+        });
+    });
+    const onDismissNotification = useEvent((id) => {
+        var _a;
+        const toast = toasts.get(id);
+        if ((toast === null || toast === void 0 ? void 0 : toast.putNotificationInDropdownOnDismiss) !== false) {
+            (_a = rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent(DISMISS_EVENT_NAME, { detail: toast }));
+        }
+    });
+    const addOnDismissListener = useEvent((listener) => {
+        var _a;
+        const callback = (e) => listener(e.detail);
+        const unsub = () => { var _a; return (_a = rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(DISMISS_EVENT_NAME, callback); };
+        listeners.current.push(unsub);
+        (_a = rootRef === null || rootRef === void 0 ? void 0 : rootRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener(DISMISS_EVENT_NAME, callback);
+        return unsub;
+    });
+    useEffect(() => () => listeners.current.forEach((cb) => cb()), []);
+    const api = useMemo(() => ({ notify: addToast, update: updateToast, remove: removeToast }), []);
+    return {
+        api,
+        toasts: useMemo(() => [...toasts.values()], [toasts]),
+        onDismissNotification,
+        addOnDismissListener,
+    };
+}
+
+        

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

@@ -0,0 +1,39 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { Item } from '@react-stately/collections';
+import { tasty } from '../../../tasty';
+import { NotificationView } from './NotificationView';
+import { useNotificationListItem, useNotificationsList, } from './hooks';
+const NotificationListContainer = tasty({
+    styles: { boxSizing: 'border-box', width: '100%' },
+});
+export function NotificationsList(props) {
+    const { items, children } = 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 }, item.key))) }, void 0));
+}
+NotificationsList.Item = Item;
+const notificationStyles = {
+    borderBottom: { '': '1bw solid #border', ':last-child': 'none' },
+};
+function NotificationListItem(props) {
+    const { item, state } = props;
+    const { key, props: notificationProps } = item;
+    const ref = useRef(null);
+    const { itemProps } = useNotificationListItem({ ref, key, state });
+    return (_jsx(NotificationView, { ref: ref, attributes: itemProps, styles: notificationStyles, ...notificationProps, isDismissible: false }, void 0));
+}
+
+        

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { NotificationsContext } from '../NotificationsContext';
+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

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { useListState } from '@react-stately/list';
+import { useSelectableList } from '@react-aria/selection';
+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

@@ -0,0 +1,18 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { useContext, useEffect } from 'react';
+import { useEvent } from '../../../../_internal';
+import { NotificationsContext } from '../NotificationsContext';
+export function useNotificationsObserver(callback) {
+    var _a;
+    const { addOnDismissListener } = (_a = useContext(NotificationsContext)) !== null && _a !== void 0 ? _a : {};
+    const callbackEvent = useEvent(callback);
+    useEffect(() => addOnDismissListener === null || addOnDismissListener === void 0 ? void 0 : addOnDismissListener(callbackEvent), [addOnDismissListener]);
+}
+
+        

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

package/es/components/overlays/OverlayWrapper.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

package/es/components/overlays/Toasts/Toast.js

@@ -0,0 +1,36 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { useId } from '@react-aria/utils';
+import { useToastsApi } from './use-toasts-api';
+export function Toast(props) {
+    const { id: propsId } = props;
+    const { toast, update, remove } = useToastsApi();
+    const defaultId = useId();
+    const id = propsId !== null && propsId !== void 0 ? propsId : defaultId;
+    useEffect(() => {
+        toast({ ...props, id });
+        return () => remove(id);
+    }, [id]);
+    useEffect(() => {
+        update(id, props);
+    });
+    return null;
+}
+Toast.Success = function ToastSuccess(props) {
+    return _jsx(Toast, { type: "success", ...props }, void 0);
+};
+Toast.Danger = function ToastDanger(props) {
+    return _jsx(Toast, { type: "danger", ...props }, void 0);
+};
+Toast.Attention = function ToastAttention(props) {
+    return _jsx(Toast, { type: "attention", ...props }, void 0);
+};
+
+        

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

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+export * from './use-toasts-api';
+export * from './Toast';
+
+        

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

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

package/es/components/overlays/Toasts/use-toasts-api.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.2
+ * Released under the MIT license.
+ */
+
+import { useMemo } from 'react';
+import { isElement, isFragment } from 'react-is';
+import { useNotificationsApi } from '../NewNotifications';
+export function useToastsApi() {
+    const { notify, update, remove } = useNotificationsApi();
+    const toast = useMemo(() => Object.assign((props) => notify({
+        putNotificationInDropdownOnDismiss: false,
+        ...unwrapProps(props),
+    }), {
+        success: (props) => toast({ type: 'success', ...unwrapProps(props) }),
+        danger: (props) => toast({ type: 'danger', ...unwrapProps(props) }),
+        attention: (props) => toast({ type: 'attention', ...unwrapProps(props) }),
+    }), []);
+    return { toast, update, remove };
+}
+function unwrapProps(props) {
+    return {
+        ...(propsIsToastProps(props)
+            ? {
+                isDismissible: props.duration !== null,
+                duration: 5000,
+                ...props,
+            }
+            : { description: props, isDismissible: true, duration: 5000 }),
+    };
+}
+function propsIsToastProps(props) {
+    const isReactNode = isElement(props) ||
+        isFragment(props) ||
+        typeof props === 'string' ||
+        typeof props === 'number';
+    return !isReactNode;
+}
+
+        

package/es/components/overlays/Tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

package/es/components/overlays/Tooltip/TooltipProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

package/es/components/overlays/Tooltip/TooltipTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

package/es/components/overlays/Tooltip/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

package/es/components/pickers/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */
 

package/es/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.13
+ * @cube-dev/ui-kit v0.11.2
  * Released under the MIT license.
  */