@cube-dev/ui-kit 0.0.0-canary-fad98a1 → 0.0.0-canary-4e8aabc

package/es/_internal/hooks/use-timer/timer.js

@@ -1,57 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-export class Timer {
-    constructor(callback, delay) {
-        this.timerId = null;
-        this.startTime = null;
-        this._status = 'stopped';
-        this.callback = callback;
-        this.delay = delay;
-        this.remaining = delay;
-        this.resume();
-    }
-    get status() {
-        return this._status;
-    }
-    set status(status) {
-        this._status = status;
-    }
-    reset() {
-        this.clear();
-        this.remaining = this.delay;
-        this.status = 'stopped';
-    }
-    pause() {
-        if (this.timerId === null || this.startTime === null) {
-            return;
-        }
-        this.clear();
-        this.remaining -= Date.now() - this.startTime;
-        this.status = 'paused';
-    }
-    resume() {
-        if (this.timerId !== null)
-            return;
-        this.startTime = Date.now();
-        this.clear();
-        this.timerId = setTimeout(() => {
-            this.reset();
-            this.callback();
-        }, this.remaining);
-        this.status = 'running';
-    }
-    clear() {
-        if (this.timerId === null) {
-            return;
-        }
-        clearTimeout(this.timerId);
-        this.timerId = null;
-    }
-}
-
-        

package/es/_internal/hooks/use-timer/use-timer.js

@@ -1,45 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { useEffect, useState } from 'react';
-import { useEvent } from '../use-event';
-import { Timer } from './timer';
-export function useTimer(props = {}) {
-    const { callback, delay, isDisabled, timer: propsTimer = null } = props;
-    const callbackEvent = useEvent(() => callback === null || callback === void 0 ? void 0 : callback());
-    const [timer, setTimer] = useState(() => {
-        if (propsTimer) {
-            return propsTimer;
-        }
-        if (typeof delay === 'number') {
-            return new Timer(callbackEvent, delay);
-        }
-        return null;
-    });
-    if (isDisabled) {
-        timer === null || timer === void 0 ? void 0 : timer.reset();
-    }
-    else {
-        timer === null || timer === void 0 ? void 0 : timer.resume();
-    }
-    useEffect(() => {
-        setTimer(propsTimer);
-        return () => timer === null || timer === void 0 ? void 0 : timer.reset();
-    }, [propsTimer]);
-    useEffect(() => {
-        if (propsTimer)
-            return;
-        if (typeof delay === 'number') {
-            setTimer(new Timer(callbackEvent, delay));
-        }
-        return () => timer === null || timer === void 0 ? void 0 : timer.reset();
-    }, [delay, propsTimer]);
-    useEffect(() => () => timer === null || timer === void 0 ? void 0 : timer.reset(), [timer]);
-    return { timer };
-}
-
-        

package/es/components/overlays/NewNotifications/Bar/FloatingNotification.js

@@ -1,46 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useRef } from 'react';
-import { useChainedCallback, useEvent, useTimer } from '../../../../_internal';
-import { tasty } from '../../../../tasty';
-import { NotificationView } from '../NotificationView';
-import { useNotificationListItem, } from '../hooks';
-const NotificationContainer = tasty({
-    styles: { boxShadow: '0 0.5x 2x #shadow', pointerEvents: 'auto' },
-});
-export const FloatingNotification = memo(function FloatingNotification(props) {
-    const { item, state, onRemoveNotification, id, isDisabledTimer, onDismissNotification, } = props;
-    const { props: notificationProps, key } = item;
-    const ref = useRef(null);
-    const onCloseEvent = useChainedCallback(() => onRemoveNotification(id), notificationProps.onClose);
-    const chainedOnDismiss = useChainedCallback(() => onDismissNotification(id), () => onRemoveNotification(id));
-    const onKeyDown = useEvent(({ key }) => {
-        if (notificationProps.isDismissible === false) {
-            return;
-        }
-        const closeKeys = ['Delete', 'Backspace', 'Escape'];
-        if (closeKeys.includes(key)) {
-            chainedOnDismiss();
-        }
-    });
-    const { itemProps } = useNotificationListItem({ key, ref, state });
-    const { timer } = useTimer({
-        callback: chainedOnDismiss,
-        delay: notificationProps.duration,
-        isDisabled: isDisabledTimer,
-    });
-    return (_jsx(NotificationContainer, { children: _jsx(NotificationView, { ref: ref, ...notificationProps, timer: timer, attributes: {
-                ...itemProps,
-                onKeyDown,
-                role: 'status',
-                'aria-atomic': 'true',
-            }, onDismiss: chainedOnDismiss, onClose: onCloseEvent, qa: "floating-notification" }, void 0) }, void 0));
-});
-
-        

package/es/components/overlays/NewNotifications/Bar/NotificationsBar.js

@@ -1,62 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
-import { TransitionGroup } from 'react-transition-group';
-import { Item } from '@react-stately/collections';
-import { useHover } from '@react-aria/interactions';
-import { useFocusRing, focusSafely } from '@react-aria/focus';
-import { tasty } from '../../../../tasty';
-import { TransitionComponent } from './TransitionComponent';
-import { FloatingNotification } from './FloatingNotification';
-import { useNotificationsList } from '../hooks';
-import { mergeProps } from '../../../../utils/react';
-import { useEvent } from '../../../../_internal';
-const NotificationsContainer = tasty({
-    styles: {
-        boxSizing: 'border-box',
-        position: 'fixed',
-        bottom: 'env(safe-area-inset-bottom, 0)',
-        right: 'env(safe-area-inset-right, 0)',
-        display: 'flex',
-        flexDirection: 'column-reverse',
-        width: 'auto 100% 45x',
-        height: '100vh max',
-        padding: '2x',
-        gap: '1x',
-        zIndex: '100',
-        overflow: 'hidden',
-        isolation: 'isolate',
-        pointerEvents: 'none',
-        '@supports (-webkit-touch-callout: none)': {
-            height: '-webkit-fill-available max',
-        },
-    },
-});
-export function NotificationsBar(props) {
-    const { items, children, onRemoveNotification, onDismissNotification } = props;
-    const ref = useRef(null);
-    const { listProps, state } = useNotificationsList({ items, children, ref });
-    const { hoverProps, isHovered } = useHover({});
-    const { focusProps, isFocusVisible } = useFocusRing({ within: true });
-    const moveFocus = useEvent((key) => {
-        var _a, _b, _c;
-        const nextKey = (_b = (_a = state.collection.getKeyBefore(key.toString())) !== null && _a !== void 0 ? _a : state.collection.getKeyAfter(key.toString())) !== null && _b !== void 0 ? _b : state.collection.getLastKey();
-        const elementToFocus = (_c = ref.current) === null || _c === void 0 ? void 0 : _c.querySelector(`[data-id="${nextKey}"]`);
-        if (elementToFocus) {
-            focusSafely(elementToFocus);
-        }
-    });
-    return (_jsx(NotificationsContainer, { ref: ref, "data-qa": "notifications-bar", role: "region", "aria-live": "polite", ...mergeProps(listProps, hoverProps, focusProps), children: _jsx(TransitionGroup, { component: null, enter: true, exit: true, children: [...state.collection].reverse().map((notification) => (_jsx(TransitionComponent, { children: _jsx(FloatingNotification, { isDisabledTimer: isHovered || isFocusVisible, id: notification.props.id, item: notification, state: state, onRemoveNotification: (key) => {
-                        onRemoveNotification(key);
-                        moveFocus(key);
-                    }, onDismissNotification: onDismissNotification }, void 0) }, notification.props.id))) }, void 0) }, void 0));
-}
-NotificationsBar.Item = Item;
-
-        

package/es/components/overlays/NewNotifications/Bar/TransitionComponent.js

@@ -1,54 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useRef } from 'react';
-import { CSSTransition } from 'react-transition-group';
-import styled from 'styled-components';
-const CSS_TRANSITION_CLASS_NAME = 'cube-notifications-css-transition';
-const TRANSITION_TIMEOUT = 250;
-export function TransitionComponent(props) {
-    const { children, ...transitionProps } = props;
-    const notificationRef = useRef(null);
-    const calculateNotificationSize = useCallback(() => {
-        if (notificationRef.current) {
-            notificationRef.current.style.setProperty('--__notification-size__', `${notificationRef.current.scrollHeight}px`);
-        }
-    }, []);
-    return (_jsx(CSSTransition, { unmountOnExit: true, mountOnEnter: true, timeout: TRANSITION_TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAME, onEnter: calculateNotificationSize, onExit: calculateNotificationSize, ...transitionProps, children: _jsx(Transition, { ref: notificationRef, children: children }, void 0) }, void 0));
-}
-const Transition = styled.div `
-  transition-property: height, opacity, margin-top, margin-bottom;
-  transition-duration: ${TRANSITION_TIMEOUT}ms;
-  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
-
-  &.${CSS_TRANSITION_CLASS_NAME} {
-    &-enter {
-      height: 0;
-      opacity: 0;
-      will-change: height, opacity;
-    }
-    &-enter-active {
-      height: var(--__notification-size__);
-      opacity: 1;
-      will-change: height, opacity;
-    }
-    &-exit {
-      height: var(--__notification-size__);
-      opacity: 1;
-      will-change: height, opacity, margin-top;
-    }
-    &-exit-active {
-      margin-top: -8px;
-      height: 0;
-      opacity: 0;
-      will-change: height, opacity;
-    }
-  }
-`;
-
-        

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

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

package/es/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.js

@@ -1,38 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { Dialog, DialogTrigger, } from '../../Dialog';
-import { tasty } from '../../../../tasty';
-import { Flex } from '../../../layout/Flex';
-import { Title } from '../../../content/Title';
-import { ClearSlots } from '../../../../utils/react';
-import { useNotificationsObserver } from '../hooks';
-export function NotificationsDialogTrigger(props) {
-    const { onCloseNotificationInBar, ...dialogTriggerProps } = props;
-    useNotificationsObserver((args) => onCloseNotificationInBar === null || onCloseNotificationInBar === void 0 ? void 0 : onCloseNotificationInBar(args));
-    return _jsx(DialogTrigger, { ...dialogTriggerProps, type: "popover" }, void 0);
-}
-const StyledDialog = tasty(Dialog, { height: 'auto calc(100vh - 12x)' });
-const StyledDialogContent = tasty(Flex, {
-    styles: {
-        flow: 'column',
-        placeItems: 'start start',
-        styledScrollbar: true,
-        height: '100%',
-        border: '1bw solid #border',
-        radius: '0.5x',
-        overflow: 'auto',
-    },
-});
-export function NotificationsDialog(props) {
-    const { children, title = 'Notifications', ...dialogProps } = props;
-    return (_jsxs(StyledDialog, { ...dialogProps, children: [_jsx(VisuallyHidden, { children: _jsx(Title, { children: title }, void 0) }, void 0), _jsx(StyledDialogContent, { children: _jsx(ClearSlots, { children: children }, void 0) }, void 0)] }, void 0));
-}
-
-        

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

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

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

@@ -1,36 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { useId } from '@react-aria/utils';
-import { useNotificationsApi } from './hooks';
-export function Notification(props) {
-    const { id: propsId } = props;
-    const { notify, update, remove } = useNotificationsApi();
-    const defaultId = useId();
-    const id = propsId !== null && propsId !== void 0 ? propsId : defaultId;
-    useEffect(() => {
-        notify({ id, ...props });
-        return () => remove(id);
-    }, [id]);
-    useEffect(() => {
-        update(id, props);
-    });
-    return null;
-}
-Notification.Success = function NotificationSuccess(props) {
-    return _jsx(Notification, { type: "success", ...props }, void 0);
-};
-Notification.Danger = function NotificationDanger(props) {
-    return _jsx(Notification, { type: "danger", ...props }, void 0);
-};
-Notification.Attention = function NotificationAttention(props) {
-    return _jsx(Notification, { type: "attention", ...props }, void 0);
-};
-
-        

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

@@ -1,28 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { tasty } from '../../../../tasty';
-import { Button } from '../../../actions';
-import { useEvent } from '../../../../_internal';
-import { useNotificationContext } from './NotificationProvider';
-const Action = tasty(Button, {
-    color: { '': '#purple-text', primary: '#purple-text', secondary: '#dark-03' },
-});
-export function NotificationAction(props) {
-    const { children, onPress, type = 'primary', disableCloseOnAction = false, ...buttonProps } = props;
-    const { onClose } = useNotificationContext();
-    const onPressEvent = useEvent((e) => {
-        onPress === null || onPress === void 0 ? void 0 : onPress(e);
-        if (!disableCloseOnAction) {
-            onClose === null || onClose === void 0 ? void 0 : onClose();
-        }
-    });
-    return (_jsx(Action, { ...buttonProps, onPress: onPressEvent, type: "link", size: "small", mods: { primary: type === 'primary', secondary: type === 'secondary' }, children: children }, void 0));
-}
-
-        

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

@@ -1,37 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Button } from '../../../actions';
-import { tasty } from '../../../../tasty';
-import { Cross } from '../../../../icons';
-const CloseButton = tasty(Button, {
-    styles: {
-        position: 'absolute',
-        right: '-0.75x',
-        top: '-0.75x',
-        display: 'flex',
-        placeItems: 'center',
-        padding: '0.75x',
-        width: '3.5x',
-        height: '3.5x',
-        fill: '#white',
-        shadow: '0 0.5x 2x #shadow',
-        color: { '': '#dark-02', hovered: '#dark-03', pressed: '#dark-02' },
-        borderRadius: '50%',
-        visibility: { '': 'hidden', show: 'visible' },
-        opacity: { '': '0', show: '1' },
-        transition: 'opacity, visibility 0.2s ease-in-out',
-    },
-});
-export const NotificationCloseButton = memo(function NotificationCloseButton(props) {
-    const { onPress, isHovered, isFocused } = props;
-    return (_jsx(CloseButton, { qa: "notification-close-button", type: "neutral", mods: { show: isHovered || isFocused }, onPress: onPress, icon: _jsx(Cross, {}, void 0), label: "Close the notification" }, void 0));
-});
-
-        

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

@@ -1,27 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { tasty } from '../../../../tasty';
-import { Paragraph } from '../../../content/Paragraph';
-const Description = tasty(Paragraph, {
-    as: 'p',
-    styles: {
-        gridArea: 'description',
-        display: '-webkit-box',
-        '-webkit-line-clamp': 3,
-        '-webkit-box-orient': 'vertical',
-        overflow: 'hidden',
-    },
-});
-export const NotificationDescription = memo(function NotificationDescription(props) {
-    const { description, ...descriptionProps } = props;
-    return _jsx(Description, { ...descriptionProps, children: description }, void 0);
-});
-
-        

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

@@ -1,40 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { memo } from 'react';
-import { isElement } from 'react-is';
-import flatten from 'react-keyed-flatten-children';
-import { tasty } from '../../../../tasty';
-import { ButtonGroup } from '../../../actions';
-const FooterArea = tasty(ButtonGroup, {
-    gridArea: 'footer',
-    gap: '2x',
-    styles: {
-        '&:not(:empty)': {
-            margin: { '': '0.5x top', 'has-description': '1x top' },
-        },
-    },
-});
-export const NotificationFooter = memo(function NotificationFooter(props) {
-    const { actions, onClose, onDismiss, hasDescription } = props;
-    return (_jsx(FooterArea, { mods: { 'has-description': hasDescription }, children: flatten(typeof actions === 'function'
-            ? actions({ onClose, onDismiss })
-            : actions)
-            .filter((action) => isElement(action))
-            .map((action, index) => {
-            var _a;
-            const { props } = action;
-            const defaultType = index === 0 ? 'primary' : 'secondary';
-            return React.cloneElement(action, {
-                ...props,
-                type: (_a = props.type) !== null && _a !== void 0 ? _a : defaultType,
-            }, props.children);
-        }) }, void 0));
-});
-
-        

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

@@ -1,18 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { Title } from '../../../content/Title';
-import { tasty } from '../../../../tasty';
-const Header = tasty(Title, { gridArea: 'header', margin: '0.25x 0 0.5x' });
-export const NotificationHeader = memo(function NotificationHeader(props) {
-    const { header, ...headerProps } = props;
-    return (_jsx(Header, { as: "div", preset: "h6", ...headerProps, children: header }, void 0));
-});
-
-        

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

@@ -1,64 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * 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

@@ -1,22 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-fad98a1
- * 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;
-}
-
-