draft-components 3.5.0 → 4.0.0

package/dist/components/hero-icons/24/outline/arrow-small-down-icon.d.ts

@@ -1,3 +0,0 @@
-export declare const ArrowSmallDownIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/arrow-small-down-icon.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-export const ArrowSmallDownIcon = forwardRef(function ArrowSmallDownIcon(props, ref) {
-    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m0 0l6.75-6.75M12 19.5l-6.75-6.75" }) }));
-});

package/dist/components/hero-icons/24/outline/arrow-small-up-icon.d.ts

@@ -1,3 +0,0 @@
-export declare const ArrowSmallUpIcon: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<SVGSVGElement>>;

package/dist/components/hero-icons/24/outline/arrow-small-up-icon.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-export const ArrowSmallUpIcon = forwardRef(function ArrowSmallUpIcon(props, ref) {
-    return (_jsx("svg", { ref: ref, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 1.5, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" }) }));
-});

package/dist/components/popover/use-page-click.d.ts

@@ -1,16 +0,0 @@
-type Handler = (event: MouseEvent) => void;
-type Options = {
-    isEnabled: boolean;
-};
-/**
- * Invokes a given handler when the user clicks on any place on the page.
- * When multiple handlers are registered, only the last one will be invoked.
- * This behavior is used to close only top-level popover.
- *
- * @param handler The click handler.
- * @param options An object with hook options.
- * @param options.isEnabled - A flag that determines whether to run
- * the passed handler or not.
- */
-export declare function usePageClick(handler: Handler, options: Options): void;
-export {};

package/dist/components/popover/use-page-click.js

@@ -1,46 +0,0 @@
-import { useEffect, useRef } from 'react';
-const handlers = [];
-/**
- * Invokes a given handler when the user clicks on any place on the page.
- * When multiple handlers are registered, only the last one will be invoked.
- * This behavior is used to close only top-level popover.
- *
- * @param handler The click handler.
- * @param options An object with hook options.
- * @param options.isEnabled - A flag that determines whether to run
- * the passed handler or not.
- */
-export function usePageClick(handler, options) {
-    const handlerRef = useRef(handler);
-    const isEnabled = options.isEnabled;
-    useEffect(() => {
-        handlerRef.current = handler;
-    }, [handler]);
-    useEffect(() => {
-        if (!isEnabled) {
-            return;
-        }
-        const handler = handlerRef.current;
-        handlers.push(handler);
-        const handleBodyClick = (event) => {
-            const handleEvent = handlers[handlers.length - 1];
-            if (handleEvent) {
-                handleEvent(event);
-            }
-        };
-        // Add only one global `body` click handler.
-        if (handlers.length === 1) {
-            document.addEventListener('click', handleBodyClick, true);
-        }
-        return () => {
-            const index = handlers.indexOf(handler);
-            if (index >= 0) {
-                handlers.splice(index, 1);
-            }
-            // Remove the global `body` click handler if there are no active handlers.
-            if (handlers.length === 0) {
-                document.removeEventListener('click', handleBodyClick, true);
-            }
-        };
-    }, [isEnabled]);
-}

package/dist/components/positioner/calc-position.d.ts

@@ -1,32 +0,0 @@
-import { Alignment, Coordinates, Placement, Rect } from './types.js';
-export type CalcPositionParams = {
-    placement: Placement;
-    alignment: Alignment;
-    anchorRect: Rect;
-    contentRect: Rect;
-    viewportWidth: number;
-    viewportHeight: number;
-    scrollX: number;
-    scrollY: number;
-    anchorGap: number;
-    viewportGap: number;
-};
-export type CalcPositionResult = Coordinates & {
-    placement: Placement;
-    alignment: Alignment;
-};
-export declare function calcPosition({ placement, alignment, anchorRect, contentRect, viewportWidth, viewportHeight, scrollX, scrollY, anchorGap, viewportGap, }: CalcPositionParams): CalcPositionResult;
-type GetYAxisOffsetParams = {
-    placement: Placement;
-    anchorGap: number;
-    scrollY: number;
-    anchorY: number;
-    viewportHeight: number;
-    contentHeight: number;
-    anchorHeight: number;
-};
-export declare function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewportHeight, contentHeight, anchorHeight, }: GetYAxisOffsetParams): {
-    offset: number;
-    placement: Placement;
-};
-export {};

package/dist/components/positioner/calc-position.js

@@ -1,112 +0,0 @@
-export function calcPosition({ placement, alignment, anchorRect, contentRect, viewportWidth, viewportHeight, scrollX, scrollY, anchorGap, viewportGap, }) {
-    const maxWidth = viewportWidth - (2 * viewportGap);
-    const maxSideWidth = Math.max(anchorRect.left - anchorGap - viewportGap, viewportWidth - anchorRect.right - anchorGap - viewportGap);
-    if ((placement === 'left' || placement === 'right')
-        && contentRect.width >= maxSideWidth) {
-        placement = 'bottom';
-    }
-    let x;
-    let y;
-    if (contentRect.width >= maxWidth) {
-        x = scrollX + viewportGap;
-        const result = getYAxisOffset({
-            placement,
-            anchorGap,
-            scrollY,
-            viewportHeight,
-            anchorY: anchorRect.top,
-            anchorHeight: anchorRect.height,
-            contentHeight: contentRect.height,
-        });
-        y = result.offset;
-        placement = result.placement;
-    }
-    else if (placement === 'left' || placement === 'right') {
-        // noinspection JSSuspiciousNameCombination
-        const result = getYAxisOffset({
-            placement,
-            anchorGap,
-            scrollY: scrollX,
-            anchorY: anchorRect.left,
-            viewportHeight: viewportWidth,
-            contentHeight: contentRect.width,
-            anchorHeight: anchorRect.width,
-        });
-        x = result.offset;
-        placement = result.placement;
-        // noinspection JSSuspiciousNameCombination
-        y = getXAxisOffset({
-            alignment,
-            viewportGap,
-            scrollX: scrollY,
-            anchorX: anchorRect.top,
-            viewportWidth: viewportHeight,
-            contentWidth: contentRect.height,
-            anchorWidth: anchorRect.height,
-        });
-    }
-    else {
-        x = getXAxisOffset({
-            alignment,
-            viewportGap,
-            scrollX,
-            viewportWidth,
-            anchorX: anchorRect.left,
-            contentWidth: contentRect.width,
-            anchorWidth: anchorRect.width,
-        });
-        const result = getYAxisOffset({
-            placement,
-            anchorGap,
-            scrollY,
-            viewportHeight,
-            anchorY: anchorRect.top,
-            contentHeight: contentRect.height,
-            anchorHeight: anchorRect.height,
-        });
-        y = result.offset;
-        placement = result.placement;
-    }
-    return { x, y, placement, alignment };
-}
-function getXAxisOffset({ alignment, viewportGap, scrollX, anchorX, viewportWidth, contentWidth, anchorWidth, }) {
-    let x;
-    if (alignment === 'start') {
-        x = scrollX + anchorX;
-    }
-    else if (alignment === 'end') {
-        x = scrollX + anchorX + anchorWidth - contentWidth;
-    }
-    else {
-        x = scrollX + anchorX + (anchorWidth / 2) - (contentWidth / 2);
-    }
-    if (x < scrollX) {
-        x = scrollX + viewportGap;
-    }
-    else if (x + contentWidth > scrollX + viewportWidth) {
-        x = scrollX + viewportWidth - viewportGap - contentWidth;
-    }
-    return x;
-}
-export function getYAxisOffset({ placement, anchorGap, scrollY, anchorY, viewportHeight, contentHeight, anchorHeight, }) {
-    const anchorBottom = viewportHeight - anchorY + anchorHeight;
-    const top = scrollY + anchorY - anchorGap - contentHeight;
-    const bottom = scrollY + anchorY + anchorHeight + anchorGap;
-    let y;
-    if (placement === 'top' || placement === 'left') {
-        y = top;
-        if (y < scrollY && anchorY < anchorBottom) {
-            y = bottom;
-            placement = placement === 'top' ? 'bottom' : 'right';
-        }
-    }
-    else {
-        y = bottom;
-        if (y + contentHeight > scrollY + viewportHeight
-            && anchorY > anchorBottom) {
-            y = top;
-            placement = placement === 'bottom' ? 'top' : 'left';
-        }
-    }
-    return { offset: y, placement };
-}

package/dist/components/positioner/index.d.ts

@@ -1 +0,0 @@
-export * from './positioner.js';

package/dist/components/positioner/index.js

@@ -1 +0,0 @@
-export * from './positioner.js';

package/dist/components/positioner/positioner.d.ts

@@ -1,20 +0,0 @@
-import { CSSProperties, ReactNode, RefCallback } from 'react';
-import { Alignment, Placement } from './types.js';
-export type PositionerAnchorRenderFn = (params: {
-    setRef: RefCallback<HTMLElement>;
-}) => ReactNode;
-export type PositionerContentRenderFn = (params: {
-    setRef: RefCallback<HTMLElement>;
-    style: CSSProperties;
-}) => ReactNode;
-export type Position = 'fixed' | 'absolute';
-export type PositionerProps = {
-    anchorGap?: number;
-    viewportGap?: number;
-    position?: Position;
-    placement?: Placement;
-    alignment?: Alignment;
-    renderAnchor: PositionerAnchorRenderFn;
-    renderContent: PositionerContentRenderFn;
-};
-export declare function Positioner({ anchorGap, viewportGap, position, placement, alignment, renderAnchor, renderContent, }: PositionerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/positioner/positioner.js

@@ -1,59 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useState } from 'react';
-import { calcPosition } from './calc-position.js';
-import { Portal } from '../portal/index.js';
-export function Positioner({ anchorGap = 4, viewportGap = 8, position = 'fixed', placement = 'bottom', alignment = 'start', renderAnchor, renderContent, }) {
-    const [anchor, setAnchor] = useState(null);
-    const [content, setContent] = useState(null);
-    useLayoutEffect(() => {
-        if (!anchor || !content) {
-            return;
-        }
-        const calcContentPosition = () => {
-            const isPositionedFixed = position === 'fixed';
-            const result = calcPosition({
-                placement,
-                alignment,
-                anchorGap,
-                viewportGap,
-                anchorRect: getRect(anchor),
-                contentRect: getRect(content),
-                viewportWidth: document.documentElement.clientWidth,
-                viewportHeight: document.documentElement.clientHeight,
-                scrollX: isPositionedFixed ? 0 : Math.round(window.scrollX),
-                scrollY: isPositionedFixed ? 0 : Math.round(window.scrollY),
-            });
-            content.style.transform = `translate(${result.x}px, ${result.y}px)`;
-            content.dataset.position = `${result.placement}-${result.alignment}`;
-        };
-        calcContentPosition();
-        window.addEventListener('resize', calcContentPosition);
-        window.addEventListener('scroll', calcContentPosition);
-        return () => {
-            window.removeEventListener('resize', calcContentPosition);
-            window.removeEventListener('scroll', calcContentPosition);
-        };
-    }, [anchor, content, position, placement, alignment, anchorGap, viewportGap]);
-    return (_jsxs(_Fragment, { children: [renderAnchor({ setRef: setAnchor }), _jsx(Portal, { children: renderContent({
-                    setRef: setContent,
-                    style: {
-                        position,
-                        maxWidth: `calc(100% - ${viewportGap * 2}px)`,
-                    },
-                }) })] }));
-}
-function getRect(element) {
-    const domRect = element.getBoundingClientRect();
-    const width = Math.round(domRect.width);
-    const height = Math.round(domRect.height);
-    const top = Math.round(domRect.top);
-    const left = Math.round(domRect.left);
-    return {
-        width,
-        height,
-        top,
-        left,
-        right: left + width,
-        bottom: top + height,
-    };
-}

package/dist/components/positioner/types.d.ts

@@ -1,14 +0,0 @@
-export type Placement = 'top' | 'right' | 'bottom' | 'left';
-export type Alignment = 'start' | 'center' | 'end';
-export type Coordinates = {
-    x: number;
-    y: number;
-};
-export type Rect = {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-    width: number;
-    height: number;
-};

package/dist/components/positioner/types.js

@@ -1 +0,0 @@
-export {};

package/dist/components/slide-over/index.d.ts

@@ -1,4 +0,0 @@
-export { type SlideOverCloseCallback } from './types.js';
-export { SlideOver, type SlideOverProps, type SlideOverRef, } from './slide-over.js';
-export { SlideOverHeader, type SlideOverHeaderProps, } from './slide-over-header.js';
-export { SlideOverBody, type SlideOverBodyProps, } from './slide-over-body.js';

package/dist/components/slide-over/index.js

@@ -1,3 +0,0 @@
-export { SlideOver, } from './slide-over.js';
-export { SlideOverHeader, } from './slide-over-header.js';
-export { SlideOverBody, } from './slide-over-body.js';

package/dist/components/slide-over/slide-over-body.css

@@ -1,7 +0,0 @@
-.dc-slide-over-body {
-  box-sizing: border-box;
-  flex-grow: 1;
-  padding: 0 16px;
-  overflow: auto;
-  color: var(--dc-slide-over-text-color);
-}

package/dist/components/slide-over/slide-over-body.d.ts

@@ -1,3 +0,0 @@
-import { ComponentPropsWithoutRef } from 'react';
-export type SlideOverBodyProps = ComponentPropsWithoutRef<'div'>;
-export declare function SlideOverBody({ className, ...props }: SlideOverBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slide-over/slide-over-body.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from '../../lib/index.js';
-export function SlideOverBody({ className, ...props }) {
-    return (_jsx("div", { className: classNames('dc-slide-over-body', className), ...props }));
-}

package/dist/components/slide-over/slide-over-context.d.ts

@@ -1,14 +0,0 @@
-import { SlideOverCloseCallback } from './types.js';
-import { ReactNode } from 'react';
-export type SlideOverContext = {
-    titleId: string;
-    descriptionId: string;
-    closePanel: SlideOverCloseCallback;
-};
-export declare function useSlideOverContext(): SlideOverContext;
-export declare function SlideOverContextProvider({ titleId, descriptionId, closePanel, children, }: {
-    titleId: string;
-    descriptionId: string;
-    closePanel: SlideOverCloseCallback;
-    children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/components/slide-over/slide-over-context.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from 'react';
-const Context = createContext(null);
-export function useSlideOverContext() {
-    const ctx = useContext(Context);
-    if (!ctx) {
-        throw new Error('useSlideOverContext must be used within SlideOverContextProvider');
-    }
-    return ctx;
-}
-export function SlideOverContextProvider({ titleId, descriptionId, closePanel, children, }) {
-    const ctx = useMemo(() => ({
-        titleId,
-        descriptionId,
-        closePanel,
-    }), [titleId, descriptionId, closePanel]);
-    return (_jsx(Context.Provider, { value: ctx, children: children }));
-}

package/dist/components/slide-over/slide-over-header.css

@@ -1,29 +0,0 @@
-.dc-slide-over-header {
-  box-sizing: border-box;
-  padding: 16px;
-  color: var(--dc-slide-over-text-color);
-}
-
-.dc-slide-over-header__title {
-  display: flex;
-  align-items: center;
-}
-
-.dc-slide-over-header__title > h2 {
-  flex-grow: 1;
-  margin: 0;
-  font: 700 var(--dc-text-md);
-  color: inherit;
-}
-
-.dc-slide-over-header__description {
-  margin-top: 4px;
-  font: var(--dc-text-sm);
-  color: var(--dc-slide-over-secondary-text-color);
-}
-
-.dc-slide-over-header__content {
-  margin-top: 8px;
-  font: var(--dc-text-md);
-  color: var(--dc-slide-over-text-color);
-}

package/dist/components/slide-over/slide-over-header.d.ts

@@ -1,11 +0,0 @@
-import { ComponentPropsWithoutRef, MouseEventHandler, ReactNode } from 'react';
-export type SlideOverHeaderHTMLProps = ComponentPropsWithoutRef<'div'>;
-export type SlideOverHeaderBaseProps = Omit<SlideOverHeaderHTMLProps, 'title'>;
-export type SlideOverHeaderProps = {
-    htmlTitle?: SlideOverHeaderHTMLProps['title'];
-    title: ReactNode;
-    description?: ReactNode;
-    closeButtonAccessibleName?: string;
-    onClickCloseButton?: MouseEventHandler<HTMLButtonElement>;
-} & SlideOverHeaderBaseProps;
-export declare function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }: SlideOverHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/slide-over/slide-over-header.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from '../../lib/index.js';
-import { IconButton } from '../button/index.js';
-import { useSlideOverContext } from './slide-over-context.js';
-import { XMarkIcon } from '../hero-icons/24/outline/x-mark-icon.js';
-export function SlideOverHeader({ className, htmlTitle, title, children, description, closeButtonAccessibleName, onClickCloseButton, ...props }) {
-    const { titleId, descriptionId, closePanel } = useSlideOverContext();
-    const onCloseButtonClicked = (ev) => {
-        closePanel('close-button');
-        onClickCloseButton?.(ev);
-    };
-    return (_jsxs("div", { className: classNames('dc-slide-over-header', className), title: htmlTitle, ...props, children: [_jsxs("div", { className: "dc-slide-over-header__title", children: [_jsx("h2", { id: titleId, children: title }), _jsx(IconButton, { buttonStyle: "tinted", size: "xs", "aria-label": closeButtonAccessibleName, onClick: onCloseButtonClicked, children: _jsx(XMarkIcon, { width: 20, height: 20 }) })] }), description
-                ? (_jsx("div", { id: descriptionId, className: "dc-slide-over-header__description", children: description }))
-                : null, children
-                ? (_jsx("div", { className: "dc-slide-over-header__content", children: children }))
-                : null] }));
-}

package/dist/components/slide-over/slide-over.css

@@ -1,85 +0,0 @@
-.dc-slide-over-header {
-  box-sizing: border-box;
-  padding: 16px;
-  color: var(--dc-slide-over-text-color);
-}
-
-.dc-slide-over-header__title {
-  display: flex;
-  align-items: center;
-}
-
-.dc-slide-over-header__title > h2 {
-  flex-grow: 1;
-  margin: 0;
-  font: 700 var(--dc-text-md);
-  color: inherit;
-}
-
-.dc-slide-over-header__description {
-  margin-top: 4px;
-  font: var(--dc-text-sm);
-  color: var(--dc-slide-over-secondary-text-color);
-}
-
-.dc-slide-over-header__content {
-  margin-top: 8px;
-  font: var(--dc-text-md);
-  color: var(--dc-slide-over-text-color);
-}
-
-.dc-slide-over-body {
-  box-sizing: border-box;
-  flex-grow: 1;
-  padding: 0 16px;
-  overflow: auto;
-  color: var(--dc-slide-over-text-color);
-}
-
-.dc-slide-over {
-  --dc-slide-over-text-color: var(--dc-primary-text-color);
-  --dc-slide-over-secondary-text-color: var(--dc-secondary-text-color);
-  --dc-slide-over-panel-max-width: 512px;
-  --dc-slide-over-panel-bg: var(--dc-primary-bg);
-  --dc-slide-over-backdrop-color: rgb(var(--dc-gray-900-rgb) / 40%);
-
-  position: relative;
-  z-index: var(--dc-overlay-z-index);
-  color-scheme: light;
-}
-
-.dc-slide-over__backdrop,
-.dc-slide-over__panel {
-  position: fixed;
-  top: 0;
-  height: 100%;
-}
-
-.dc-slide-over__backdrop {
-  left: 0;
-  width: 100%;
-  background: var(--dc-slide-over-backdrop-color);
-}
-
-.dc-slide-over__panel {
-  right: 0;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: var(--dc-slide-over-panel-max-width);
-  color: var(--dc-primary-text-color);
-  background: var(--dc-slide-over-panel-bg);
-  box-shadow: var(--dc-shadow-md);
-}
-
-.dark .dc-slide-over,
-.dark.dc-slide-over {
-  --dc-slide-over-panel-bg: var(--dc-gray-800);
-
-  color-scheme: dark;
-}
-
-.dark .dc-slide-over__panel {
-  box-shadow: 0 0 0 1px var(--dc-border-color-transparent-1), var(--dc-shadow-md);
-}

package/dist/components/slide-over/slide-over.d.ts

@@ -1,25 +0,0 @@
-import { SlideOverCloseCallback } from './types.js';
-import { ComponentPropsWithoutRef } from 'react';
-import { SlideOverHeader } from './slide-over-header.js';
-import { SlideOverBody } from './slide-over-body.js';
-export type SlideOverHTMLProps = ComponentPropsWithoutRef<'div'>;
-export type SlideOverProps = SlideOverHTMLProps & {
-    animationDurationMs?: number;
-    animationDisabled?: boolean;
-    shouldCloseOnEscKeyPress?: boolean;
-    shouldCloseOnBackdropClick?: boolean;
-    onClose: SlideOverCloseCallback;
-};
-export type SlideOverRef = {
-    close: () => void;
-};
-export declare const SlideOver: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    animationDurationMs?: number;
-    animationDisabled?: boolean;
-    shouldCloseOnEscKeyPress?: boolean;
-    shouldCloseOnBackdropClick?: boolean;
-    onClose: SlideOverCloseCallback;
-} & import("react").RefAttributes<SlideOverRef>> & {
-    Header: typeof SlideOverHeader;
-    Body: typeof SlideOverBody;
-};