@cube-dev/ui-kit 0.10.11 → 0.11.0

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.0
+ * 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: 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.0
+ * 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.0
+ * 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.0
+ * 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.0
+ * 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.0
+ * 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.0
+ * 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.0
+ * 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.0
+ * 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.0
+ * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.0
+ * 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.0
+ * 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.0
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

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

@@ -0,0 +1,39 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * 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({
+        isDismissible: true,
+        putNotificationInDropdownOnDismiss: false,
+        duration: 5000,
+        ...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 {
+        ...(propsIsDescription(props)
+            ? { description: props }
+            : props),
+    };
+}
+function propsIsDescription(props) {
+    return (isElement(props) ||
+        isFragment(props) ||
+        typeof props === 'string' ||
+        typeof props === 'number');
+}
+
+        

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * 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.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 
@@ -18,7 +18,7 @@ import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
 import { useMenuContext } from './context';
 function Menu(props, ref) {
-    const { header, footer } = props;
+    const { header, footer, selectionIcon } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
     const completeProps = mergeProps(contextProps, props);
@@ -38,9 +38,9 @@ function Menu(props, ref) {
     useSyncRef(contextProps, domRef);
     return (_jsxs(StyledMenu, { ...mergeProps(menuProps, completeProps, baseProps), ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }, void 0), items.map((item) => {
                 if (item.type === 'section') {
-                    return (_jsx(MenuSection, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                    return (_jsx(MenuSection, { item: item, state: state, selectionIcon: selectionIcon, onAction: completeProps.onAction }, item.key));
                 }
-                let menuItem = (_jsx(MenuItem, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                let menuItem = (_jsx(MenuItem, { item: item, state: state, selectionIcon: selectionIcon, onAction: completeProps.onAction }, item.key));
                 if (item.wrapper) {
                     menuItem = item.wrapper(menuItem);
                 }

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

@@ -1,13 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../actions';
 import { Text } from '../../content/Text';
+import { tasty } from '../../../tasty';
 import { Space } from '../../layout/Space';
 import { CheckOutlined } from '@ant-design/icons';
 const ACTION_BUTTON = {
@@ -34,7 +35,8 @@ const ACTION_BUTTON = {
     shadow: '#clear',
     padding: {
         '': '(0.75x - 1px) (1.5x - 1px)',
-        'selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px + 22px)',
+        'selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px)',
+        'selectionIcon & selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px + 22px)',
     },
     display: 'flex',
     flow: 'row',
@@ -48,12 +50,38 @@ const ACTION_BUTTON = {
         },
     },
 };
+const RadioIcon = tasty({
+    styles: {
+        display: 'flex',
+        width: '1.875x',
+        placeContent: 'center',
+        '&::before': {
+            display: 'block',
+            content: '""',
+            width: '1x',
+            height: '1x',
+            radius: 'round',
+            fill: '#current',
+        },
+    },
+});
 const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix }, void 0)) : (postfix);
+const getSelectionTypeIcon = (selectionIcon) => {
+    switch (selectionIcon) {
+        case 'checkbox':
+            return _jsx(CheckOutlined, {}, void 0);
+        case 'radio':
+            return _jsx(RadioIcon, {}, void 0);
+        default:
+            return null;
+    }
+};
 export function MenuButton({ children, icon, postfix, ...props }) {
-    const { isSelected, isSelectable } = props;
-    const checkIcon = isSelectable && isSelected ? _jsx(CheckOutlined, {}, void 0) : null;
+    const { selectionIcon, isSelected, isSelectable } = props;
+    const checkIcon = isSelectable && isSelected ? getSelectionTypeIcon(selectionIcon) : null;
     const mods = {
         ...props.mods,
+        selectionIcon: !!selectionIcon,
         selectable: isSelectable,
         selected: isSelected,
     };

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 
@@ -16,7 +16,7 @@ import { StyledMenuItem } from './styled';
 import { MenuButton } from './MenuButton';
 /** @private */
 export function MenuItem(props) {
-    const { item, state, isVirtualized, onAction } = props;
+    const { item, state, selectionIcon, isVirtualized, onAction } = props;
     const { onClose, closeOnSelect } = useMenuContext();
     const { rendered, key, props: itemProps } = item;
     const isSelectable = state.selectionManager.selectionMode !== 'none';
@@ -34,7 +34,7 @@ export function MenuItem(props) {
         isVirtualized,
         onAction,
     }, state, ref);
-    let contents = typeof rendered === 'string' ? (_jsx(MenuButton, { ...itemProps, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
+    let contents = typeof rendered === 'string' ? (_jsx(MenuButton, { ...itemProps, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
     return (_jsx(FocusRing, { children: _jsx(StyledMenuItem, { ...mergeProps(menuItemProps, hoverProps), ref: ref, mods: {
                 disabled: isDisabled,
                 selected: isSelected,

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

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

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

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

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

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

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

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

package/es/components/pickers/Select/Select.js

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

package/es/components/portal/Portal.js

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

package/es/components/portal/PortalProvider.js

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

package/es/components/portal/index.js

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

package/es/components/portal/storybook/templates/CustomRoot.js

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

package/es/components/portal/storybook/templates/PortalOrder.js

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