@cube-dev/ui-kit 0.0.0-canary-bea6dd5 → 0.0.0-canary-77aa518

package/types/components/actions/index.d.ts

@@ -7,5 +7,4 @@ declare const Button: import("react").ForwardRefExoticComponent<import("./Button
 };
 export * from './Button';
 export * from './Action';
-export * from './use-action';
 export { Button, ButtonGroup };

package/types/components/forms/RangeSlider/RangeInput.d.ts

@@ -6,6 +6,5 @@ export interface RangeInputProps extends CubeNumberInputProps {
     state: SliderState;
     min?: number;
     max?: number;
-    width?: string;
 }
 export declare function RangeInput(props: RangeInputProps): JSX.Element;

package/types/components/forms/RangeSlider/RangeSlider.d.ts

@@ -1,17 +1,15 @@
 /// <reference types="react" />
 import { FormFieldProps } from '../../../shared';
 import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Styles } from '../../../tasty';
-import { CubeNumberInputProps } from '../NumberInput/NumberInput';
 import { SliderValue } from './helpers';
 import type { AriaSliderProps, SliderProps } from '@react-types/slider';
-export interface CubeRangeSliderProps extends Omit<AriaSliderProps<SliderValue>, 'label'>, Omit<SliderProps<SliderValue>, 'label'>, BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps {
+export interface CubeRangeSliderProps extends AriaSliderProps<SliderValue>, SliderProps<SliderValue>, BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps {
     showInput?: boolean;
+    inputSuffix?: string;
     inputStyles?: Styles;
     gradation?: string[];
     onChange?: (range: SliderValue) => void;
     onChangeEnd?: (range: SliderValue) => void;
-    inputWidth?: string;
-    formatOptions?: CubeNumberInputProps['formatOptions'];
 }
 declare const __RangeSlider: import("react").ForwardRefExoticComponent<CubeRangeSliderProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
     cubeInputType: string;

package/types/components/forms/RangeSlider/helpers.d.ts

@@ -1,6 +1,6 @@
-export declare type SliderValue = number[] | number;
+export declare type SliderValue = number[];
 export declare function getRanges(value: any): number[];
 export declare function isNumber(val: any): val is number;
 export declare function isValueValid(value?: SliderValue): value is number[];
-export declare function getValidValue(value?: SliderValue, min?: number, max?: number): number | number[] | undefined;
+export declare function getValidValue(value?: SliderValue, min?: number, max?: number): number[] | undefined;
 export declare function getMinMaxValue(min?: number, max?: number, value?: SliderValue): (number | undefined)[];

package/types/components/overlays/Dialog/DialogTrigger.d.ts

@@ -25,6 +25,7 @@ export interface CubeDialogTriggerProps {
     mobileViewport?: number;
     /** The style map for the overlay **/
     styles?: Styles;
+    closeBehavior?: 'hide' | 'remove';
 }
 declare function DialogTrigger(props: any): JSX.Element;
 /**

package/types/components/overlays/Modal/Modal.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { BaseProps, Styles } from '../../../tasty';
+import { WithCloseBehavior } from './types';
 import type { ModalProps } from '@react-types/overlays';
 export declare const OVERLAY_WRAPPER_STYLES: Styles;
-export interface CubeModalProps extends Omit<ModalProps, 'container'> {
+export interface CubeModalProps extends Omit<ModalProps, 'container'>, WithCloseBehavior {
     container?: HTMLElement;
     qa?: BaseProps['qa'];
     onClose?: (action?: string) => void;

package/types/components/overlays/Modal/OpenTransition.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
-export declare function OpenTransition(props: any): JSX.Element;
+import type { TimeoutProps } from 'react-transition-group/Transition';
+export declare function OpenTransition(props: Omit<TimeoutProps<undefined>, 'timeout'>): JSX.Element;

package/types/components/overlays/Modal/Overlay.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
+import { WithCloseBehavior } from './types';
 import type { OverlayProps } from '@react-types/overlays';
-export interface CubeOverlayProps extends Omit<OverlayProps, 'container'> {
+export interface CubeOverlayProps extends Omit<OverlayProps, 'container'>, WithCloseBehavior {
     container?: HTMLElement | null;
 }
 declare let _Overlay: import("react").ForwardRefExoticComponent<CubeOverlayProps & import("react").RefAttributes<unknown>>;

package/types/components/overlays/Modal/Popover.d.ts

@@ -2,7 +2,8 @@ import { HTMLAttributes } from 'react';
 import { OverlayProps } from '@react-types/overlays';
 import { BaseProps } from '../../../tasty';
 import { PlacementAxis } from '../../../shared';
-export interface CubePopoverProps extends BaseProps, Omit<OverlayProps, 'children'> {
+import { WithCloseBehavior } from './types';
+export interface CubePopoverProps extends BaseProps, Omit<OverlayProps, 'children'>, WithCloseBehavior {
     container?: HTMLElement;
     placement?: PlacementAxis;
     arrowProps?: HTMLAttributes<HTMLElement>;

package/types/components/overlays/Modal/Tray.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { BaseProps, Styles } from '../../../tasty';
+import { WithCloseBehavior } from './types';
 import type { TrayProps } from '@react-types/overlays';
-export interface CubeTrayProps extends TrayProps {
+export interface CubeTrayProps extends TrayProps, WithCloseBehavior {
     container?: HTMLElement;
     qa?: BaseProps['qa'];
     onClose?: (action?: string) => void;

package/types/components/overlays/Modal/index.d.ts

@@ -3,3 +3,4 @@ export { Modal } from './Modal';
 export { Overlay } from './Overlay';
 export { Underlay } from './Underlay';
 export { Popover } from './Popover';
+export * from './types';

package/types/components/overlays/Modal/types.d.ts

@@ -0,0 +1,4 @@
+export declare type CloseBehavior = 'remove' | 'hide';
+export interface WithCloseBehavior {
+    closeBehavior?: CloseBehavior;
+}

package/types/components/pickers/Menu/styled.d.ts

@@ -75,7 +75,7 @@ export declare const StyledMenuHeader: import("react").ComponentType<{
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
     styleName?: string | undefined;
-    theme?: (string & {}) | "danger" | "default" | "special" | undefined;
+    theme?: (string & {}) | "danger" | "default" | undefined;
     key?: import("react").Key | null | undefined;
 } & {}>;
 export declare const StyledMenuSection: any;
@@ -154,6 +154,6 @@ export declare const StyledMenuSectionHeading: import("react").ComponentType<{
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
     styleName?: string | undefined;
-    theme?: (string & {}) | "danger" | "default" | "special" | undefined;
+    theme?: (string & {}) | "danger" | "default" | undefined;
     key?: import("react").Key | null | undefined;
 } & {}>;

package/types/components/pickers/Select/Select.d.ts

@@ -2,6 +2,7 @@ import { ReactElement, ReactNode, RefObject } from 'react';
 import { Item } from '@react-stately/collections';
 import { BasePropsWithoutChildren, BlockStyleProps, OuterStyleProps, Props, Styles } from '../../../tasty';
 import { FormFieldProps } from '../../../shared';
+import { CubeButtonProps } from '../../actions';
 import type { AriaSelectProps } from '@react-types/select';
 export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterStyleProps, FormFieldProps, BlockStyleProps, AriaSelectProps<T> {
     icon?: ReactElement;
@@ -20,7 +21,7 @@ export interface CubeSelectBaseProps<T> extends BasePropsWithoutChildren, OuterS
     direction?: 'top' | 'bottom';
     shouldFlip?: boolean;
     inputProps?: Props;
-    type?: 'secondary' | 'clear' | 'primary' | (string & {});
+    type?: CubeButtonProps['type'];
     suffixPosition?: 'before' | 'after';
 }
 export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
@@ -28,7 +29,6 @@ export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
     /** The ref for the list box. */
     listBoxRef?: RefObject<HTMLElement>;
     size?: 'small' | 'default' | 'large' | string;
-    ellipsis?: boolean;
 }
 export declare function ListBoxPopup({ state, popoverRef, listBoxRef, listBoxStyles, overlayStyles, optionStyles, overlayProps: parentOverlayProps, shouldUseVirtualFocus, placement, minWidth, ...otherProps }: {
     [x: string]: any;

package/types/stories/components/StyledButton.d.ts

@@ -78,7 +78,7 @@ export declare const StyledButton: import("react").ComponentType<{
     isHidden?: boolean | undefined;
     isDisabled?: boolean | undefined;
     styleName?: string | undefined;
-    theme?: (string & {}) | "danger" | "default" | "special" | undefined;
+    theme?: (string & {}) | "danger" | "default" | undefined;
     as?: keyof HTMLElementTagNameMap | undefined;
     autoFocus?: boolean | undefined;
     href?: string | undefined;

package/types/tasty/types.d.ts

@@ -37,7 +37,7 @@ export interface BasePropsWithoutChildren extends Pick<AllHTMLAttributes<HTMLEle
         [key: string]: string | number | null;
     });
     /** User-defined theme for the element. Mapped to data-theme attribute. Use `default`, or `danger`, or any custom string value you need. */
-    theme?: 'default' | 'danger' | 'special' | (string & {});
+    theme?: 'default' | 'danger' | (string & {});
 }
 export interface BaseProps extends BasePropsWithoutChildren, Pick<AllHTMLAttributes<HTMLElementTagNameMap['div']>, 'children'> {
 }

package/cjs/components/actions/use-action.js

@@ -1,129 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-bea6dd5
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAction = exports.performClickHandler = exports.parseTo = exports.openLink = void 0;
-const react_1 = require("react");
-const interactions_1 = require("@react-aria/interactions");
-const button_1 = require("@react-aria/button");
-const utils_1 = require("@react-spectrum/utils");
-const provider_1 = require("../../provider");
-const react_2 = require("../../utils/react");
-const interactions_2 = require("../../utils/react/interactions");
-const tasty_1 = require("../../tasty");
-const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
-/**
- * Helper to open link.
- * @param {String} href
- * @param {String|Boolean} [target]
- */
-function openLink(href, target) {
-    const link = document.createElement('a');
-    link.href = href;
-    if (target) {
-        link.target = target === true ? '_blank' : target;
-    }
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-}
-exports.openLink = openLink;
-function parseTo(to) {
-    const newTab = to && typeof to === 'string' && to.startsWith('!');
-    const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
-    const href = to && typeof to === 'string'
-        ? newTab || nativeRoute
-            ? to.slice(1)
-            : to
-        : undefined;
-    return {
-        newTab,
-        nativeRoute,
-        href,
-    };
-}
-exports.parseTo = parseTo;
-function performClickHandler(evt, router, to, onPress) {
-    const { newTab, nativeRoute, href } = parseTo(to);
-    onPress?.(evt);
-    if (!to)
-        return;
-    if (evt.shiftKey || evt.metaKey || newTab) {
-        openLink(href, true);
-        return;
-    }
-    if (nativeRoute) {
-        openLink(href || window.location.href);
-    }
-    else if (href && href.startsWith('#')) {
-        const id = href.slice(1);
-        const element = document.getElementById(id);
-        if (element) {
-            element.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start',
-                inline: 'nearest',
-            });
-            return;
-        }
-    }
-    if (router) {
-        router.push(href);
-    }
-    else if (href) {
-        window.location.href = href;
-    }
-}
-exports.performClickHandler = performClickHandler;
-const useAction = function useAction({ to, as, htmlType, label, mods, onPress, ...props }, ref) {
-    as = to ? 'a' : as || 'button';
-    const router = (0, react_1.useContext)(provider_1.UIKitContext).router;
-    const isDisabled = props.isDisabled;
-    const { newTab, href } = parseTo(to);
-    const target = newTab ? '_blank' : undefined;
-    const domRef = (0, utils_1.useFocusableRef)(ref);
-    const customOnPress = (0, react_1.useCallback)((evt) => {
-        performClickHandler(evt, router, to, onPress);
-    }, [router, to, onPress]);
-    let { buttonProps, isPressed } = (0, button_1.useButton)({
-        ...props,
-        onPress: customOnPress,
-    }, domRef);
-    let { hoverProps, isHovered } = (0, interactions_1.useHover)({ isDisabled });
-    let { focusProps, isFocused } = (0, interactions_2.useFocus)({ isDisabled }, true);
-    const customProps = to
-        ? {
-            onClick(evt) {
-                evt.preventDefault();
-            },
-        }
-        : {};
-    return {
-        actionProps: {
-            mods: {
-                hovered: isHovered && !isDisabled,
-                pressed: isPressed && !isDisabled,
-                focused: isFocused && !isDisabled,
-                disabled: isDisabled,
-                ...mods,
-            },
-            ...(0, react_2.mergeProps)(buttonProps, hoverProps, focusProps, customProps, (0, tasty_1.filterBaseProps)(props, FILTER_OPTIONS)),
-            'aria-label': label,
-            ref: domRef,
-            type: htmlType || 'button',
-            rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined,
-            as,
-            isDisabled,
-            target,
-            href,
-        },
-    };
-};
-exports.useAction = useAction;
-
-        

package/es/components/actions/use-action.js

@@ -1,122 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.0.0-canary-bea6dd5
- * Released under the MIT license.
- */
-
-import { useCallback, useContext } from 'react';
-import { useHover } from '@react-aria/interactions';
-import { useButton } from '@react-aria/button';
-import { useFocusableRef } from '@react-spectrum/utils';
-import { UIKitContext } from '../../provider';
-import { mergeProps } from '../../utils/react';
-import { useFocus } from '../../utils/react/interactions';
-import { filterBaseProps } from '../../tasty';
-const FILTER_OPTIONS = { propNames: new Set(['onMouseEnter', 'onMouseLeave']) };
-/**
- * Helper to open link.
- * @param {String} href
- * @param {String|Boolean} [target]
- */
-export function openLink(href, target) {
-    const link = document.createElement('a');
-    link.href = href;
-    if (target) {
-        link.target = target === true ? '_blank' : target;
-    }
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-}
-export function parseTo(to) {
-    const newTab = to && typeof to === 'string' && to.startsWith('!');
-    const nativeRoute = to && typeof to === 'string' && to.startsWith('@');
-    const href = to && typeof to === 'string'
-        ? newTab || nativeRoute
-            ? to.slice(1)
-            : to
-        : undefined;
-    return {
-        newTab,
-        nativeRoute,
-        href,
-    };
-}
-export function performClickHandler(evt, router, to, onPress) {
-    const { newTab, nativeRoute, href } = parseTo(to);
-    onPress?.(evt);
-    if (!to)
-        return;
-    if (evt.shiftKey || evt.metaKey || newTab) {
-        openLink(href, true);
-        return;
-    }
-    if (nativeRoute) {
-        openLink(href || window.location.href);
-    }
-    else if (href && href.startsWith('#')) {
-        const id = href.slice(1);
-        const element = document.getElementById(id);
-        if (element) {
-            element.scrollIntoView({
-                behavior: 'smooth',
-                block: 'start',
-                inline: 'nearest',
-            });
-            return;
-        }
-    }
-    if (router) {
-        router.push(href);
-    }
-    else if (href) {
-        window.location.href = href;
-    }
-}
-export const useAction = function useAction({ to, as, htmlType, label, mods, onPress, ...props }, ref) {
-    as = to ? 'a' : as || 'button';
-    const router = useContext(UIKitContext).router;
-    const isDisabled = props.isDisabled;
-    const { newTab, href } = parseTo(to);
-    const target = newTab ? '_blank' : undefined;
-    const domRef = useFocusableRef(ref);
-    const customOnPress = useCallback((evt) => {
-        performClickHandler(evt, router, to, onPress);
-    }, [router, to, onPress]);
-    let { buttonProps, isPressed } = useButton({
-        ...props,
-        onPress: customOnPress,
-    }, domRef);
-    let { hoverProps, isHovered } = useHover({ isDisabled });
-    let { focusProps, isFocused } = useFocus({ isDisabled }, true);
-    const customProps = to
-        ? {
-            onClick(evt) {
-                evt.preventDefault();
-            },
-        }
-        : {};
-    return {
-        actionProps: {
-            mods: {
-                hovered: isHovered && !isDisabled,
-                pressed: isPressed && !isDisabled,
-                focused: isFocused && !isDisabled,
-                disabled: isDisabled,
-                ...mods,
-            },
-            ...mergeProps(buttonProps, hoverProps, focusProps, customProps, filterBaseProps(props, FILTER_OPTIONS)),
-            'aria-label': label,
-            ref: domRef,
-            type: htmlType || 'button',
-            rel: as === 'a' && newTab ? 'rel="noopener noreferrer"' : undefined,
-            as,
-            isDisabled,
-            target,
-            href,
-        },
-    };
-};
-
-        

package/types/components/actions/use-action.d.ts

@@ -1,42 +0,0 @@
-import { MouseEventHandler } from 'react';
-import { AriaButtonProps } from '@react-types/button';
-import { FocusableRef } from '@react-types/shared';
-import { BaseProps, TagNameProps } from '../../tasty';
-export interface CubeUseActionProps extends BaseProps, TagNameProps, Omit<AriaButtonProps, 'type'> {
-    to?: string;
-    label?: string;
-    htmlType?: 'button' | 'submit' | 'reset' | undefined;
-    onClick?: MouseEventHandler;
-    onMouseEnter?: MouseEventHandler;
-    onMouseLeave?: MouseEventHandler;
-}
-/**
- * Helper to open link.
- * @param {String} href
- * @param {String|Boolean} [target]
- */
-export declare function openLink(href: any, target?: any): void;
-export declare function parseTo(to: any): {
-    newTab: boolean;
-    nativeRoute: boolean;
-    href: string | undefined;
-};
-export declare function performClickHandler(evt: any, router: any, to: any, onPress: any): void;
-export declare const useAction: ({ to, as, htmlType, label, mods, onPress, ...props }: CubeUseActionProps, ref: FocusableRef<HTMLElement>) => {
-    actionProps: {
-        'aria-label': string | undefined;
-        ref: import("react").RefObject<HTMLElement>;
-        type: "button" | "reset" | "submit";
-        rel: string | undefined;
-        as: "object" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "font" | "dir" | "frame" | "frameset" | "marquee";
-        isDisabled: boolean | undefined;
-        target: string | undefined;
-        href: string | undefined;
-        mods: {
-            hovered: boolean;
-            pressed: boolean;
-            focused: boolean;
-            disabled: boolean | undefined;
-        };
-    };
-};