@arc-ui/components 12.0.0-beta.18 → 12.0.0-beta.20

package/lib/Drawer/Drawer.cjs

@@ -5,10 +5,9 @@ var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
 var React = require('react');
 var index$2 = require('../_shared/cjs/index-CTlXMLug.cjs');
 var index$1 = require('../_shared/cjs/index-DAr_oO4-.cjs');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
 var index = require('../_shared/cjs/index-DXNM3D1d.cjs');
-var Heading = require('../_shared/cjs/Heading-BEMSkLYR.cjs');
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-BJvST6WP.cjs');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
+var Rule = require('../_shared/cjs/Rule-DMQsi2L6.cjs');
 require('../_shared/cjs/Combination-B-rSVLfT.cjs');
 require('react/jsx-runtime');
 require('react-dom');
@@ -17,314 +16,11 @@ require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
 require('../_shared/cjs/index-DR8Rkav9.cjs');
 require('../_shared/cjs/Surface-BFx1yNsq.cjs');
 
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-const LEFT = "Left";
-const RIGHT = "Right";
-const UP = "Up";
-const DOWN = "Down";
-
-/* global document */
-const defaultProps = {
-    delta: 10,
-    preventScrollOnSwipe: false,
-    rotationAngle: 0,
-    trackMouse: false,
-    trackTouch: true,
-    swipeDuration: Infinity,
-    touchEventOptions: { passive: true },
-};
-const initialState = {
-    first: true,
-    initial: [0, 0],
-    start: 0,
-    swiping: false,
-    xy: [0, 0],
-};
-const mouseMove = "mousemove";
-const mouseUp = "mouseup";
-const touchEnd = "touchend";
-const touchMove = "touchmove";
-const touchStart = "touchstart";
-function getDirection(absX, absY, deltaX, deltaY) {
-    if (absX > absY) {
-        if (deltaX > 0) {
-            return RIGHT;
-        }
-        return LEFT;
-    }
-    else if (deltaY > 0) {
-        return DOWN;
-    }
-    return UP;
-}
-function rotateXYByAngle(pos, angle) {
-    if (angle === 0)
-        return pos;
-    const angleInRadians = (Math.PI / 180) * angle;
-    const x = pos[0] * Math.cos(angleInRadians) + pos[1] * Math.sin(angleInRadians);
-    const y = pos[1] * Math.cos(angleInRadians) - pos[0] * Math.sin(angleInRadians);
-    return [x, y];
-}
-function getHandlers(set, handlerProps) {
-    const onStart = (event) => {
-        const isTouch = "touches" in event;
-        // if more than a single touch don't track, for now...
-        if (isTouch && event.touches.length > 1)
-            return;
-        set((state, props) => {
-            // setup mouse listeners on document to track swipe since swipe can leave container
-            if (props.trackMouse && !isTouch) {
-                document.addEventListener(mouseMove, onMove);
-                document.addEventListener(mouseUp, onUp);
-            }
-            const { clientX, clientY } = isTouch ? event.touches[0] : event;
-            const xy = rotateXYByAngle([clientX, clientY], props.rotationAngle);
-            props.onTouchStartOrOnMouseDown &&
-                props.onTouchStartOrOnMouseDown({ event });
-            return Object.assign(Object.assign(Object.assign({}, state), initialState), { initial: xy.slice(), xy, start: event.timeStamp || 0 });
-        });
-    };
-    const onMove = (event) => {
-        set((state, props) => {
-            const isTouch = "touches" in event;
-            // Discount a swipe if additional touches are present after
-            // a swipe has started.
-            if (isTouch && event.touches.length > 1) {
-                return state;
-            }
-            // if swipe has exceeded duration stop tracking
-            if (event.timeStamp - state.start > props.swipeDuration) {
-                return state.swiping ? Object.assign(Object.assign({}, state), { swiping: false }) : state;
-            }
-            const { clientX, clientY } = isTouch ? event.touches[0] : event;
-            const [x, y] = rotateXYByAngle([clientX, clientY], props.rotationAngle);
-            const deltaX = x - state.xy[0];
-            const deltaY = y - state.xy[1];
-            const absX = Math.abs(deltaX);
-            const absY = Math.abs(deltaY);
-            const time = (event.timeStamp || 0) - state.start;
-            const velocity = Math.sqrt(absX * absX + absY * absY) / (time || 1);
-            const vxvy = [deltaX / (time || 1), deltaY / (time || 1)];
-            const dir = getDirection(absX, absY, deltaX, deltaY);
-            // if swipe is under delta and we have not started to track a swipe: skip update
-            const delta = typeof props.delta === "number"
-                ? props.delta
-                : props.delta[dir.toLowerCase()] ||
-                    defaultProps.delta;
-            if (absX < delta && absY < delta && !state.swiping)
-                return state;
-            const eventData = {
-                absX,
-                absY,
-                deltaX,
-                deltaY,
-                dir,
-                event,
-                first: state.first,
-                initial: state.initial,
-                velocity,
-                vxvy,
-            };
-            // call onSwipeStart if present and is first swipe event
-            eventData.first && props.onSwipeStart && props.onSwipeStart(eventData);
-            // call onSwiping if present
-            props.onSwiping && props.onSwiping(eventData);
-            // track if a swipe is cancelable (handler for swiping or swiped(dir) exists)
-            // so we can call preventDefault if needed
-            let cancelablePageSwipe = false;
-            if (props.onSwiping ||
-                props.onSwiped ||
-                props[`onSwiped${dir}`]) {
-                cancelablePageSwipe = true;
-            }
-            if (cancelablePageSwipe &&
-                props.preventScrollOnSwipe &&
-                props.trackTouch &&
-                event.cancelable) {
-                event.preventDefault();
-            }
-            return Object.assign(Object.assign({}, state), { 
-                // first is now always false
-                first: false, eventData, swiping: true });
-        });
-    };
-    const onEnd = (event) => {
-        set((state, props) => {
-            let eventData;
-            if (state.swiping && state.eventData) {
-                // if swipe is less than duration fire swiped callbacks
-                if (event.timeStamp - state.start < props.swipeDuration) {
-                    eventData = Object.assign(Object.assign({}, state.eventData), { event });
-                    props.onSwiped && props.onSwiped(eventData);
-                    const onSwipedDir = props[`onSwiped${eventData.dir}`];
-                    onSwipedDir && onSwipedDir(eventData);
-                }
-            }
-            else {
-                props.onTap && props.onTap({ event });
-            }
-            props.onTouchEndOrOnMouseUp && props.onTouchEndOrOnMouseUp({ event });
-            return Object.assign(Object.assign(Object.assign({}, state), initialState), { eventData });
-        });
-    };
-    const cleanUpMouse = () => {
-        // safe to just call removeEventListener
-        document.removeEventListener(mouseMove, onMove);
-        document.removeEventListener(mouseUp, onUp);
-    };
-    const onUp = (e) => {
-        cleanUpMouse();
-        onEnd(e);
-    };
-    /**
-     * The value of passive on touchMove depends on `preventScrollOnSwipe`:
-     * - true => { passive: false }
-     * - false => { passive: true } // Default
-     *
-     * NOTE: When preventScrollOnSwipe is true, we attempt to call preventDefault to prevent scroll.
-     *
-     * props.touchEventOptions can also be set for all touch event listeners,
-     * but for `touchmove` specifically when `preventScrollOnSwipe` it will
-     * supersede and force passive to false.
-     *
-     */
-    const attachTouch = (el, props) => {
-        let cleanup = () => { };
-        if (el && el.addEventListener) {
-            const baseOptions = Object.assign(Object.assign({}, defaultProps.touchEventOptions), props.touchEventOptions);
-            // attach touch event listeners and handlers
-            const tls = [
-                [touchStart, onStart, baseOptions],
-                // preventScrollOnSwipe option supersedes touchEventOptions.passive
-                [
-                    touchMove,
-                    onMove,
-                    Object.assign(Object.assign({}, baseOptions), (props.preventScrollOnSwipe ? { passive: false } : {})),
-                ],
-                [touchEnd, onEnd, baseOptions],
-            ];
-            tls.forEach(([e, h, o]) => el.addEventListener(e, h, o));
-            // return properly scoped cleanup method for removing listeners, options not required
-            cleanup = () => tls.forEach(([e, h]) => el.removeEventListener(e, h));
-        }
-        return cleanup;
-    };
-    const onRef = (el) => {
-        // "inline" ref functions are called twice on render, once with null then again with DOM element
-        // ignore null here
-        if (el === null)
-            return;
-        set((state, props) => {
-            // if the same DOM el as previous just return state
-            if (state.el === el)
-                return state;
-            const addState = {};
-            // if new DOM el clean up old DOM and reset cleanUpTouch
-            if (state.el && state.el !== el && state.cleanUpTouch) {
-                state.cleanUpTouch();
-                addState.cleanUpTouch = void 0;
-            }
-            // only attach if we want to track touch
-            if (props.trackTouch && el) {
-                addState.cleanUpTouch = attachTouch(el, props);
-            }
-            // store event attached DOM el for comparison, clean up, and re-attachment
-            return Object.assign(Object.assign(Object.assign({}, state), { el }), addState);
-        });
-    };
-    // set ref callback to attach touch event listeners
-    const output = {
-        ref: onRef,
-    };
-    // if track mouse attach mouse down listener
-    if (handlerProps.trackMouse) {
-        output.onMouseDown = onStart;
-    }
-    return [output, attachTouch];
-}
-function updateTransientState(state, props, previousProps, attachTouch) {
-    // if trackTouch is off or there is no el, then remove handlers if necessary and exit
-    if (!props.trackTouch || !state.el) {
-        if (state.cleanUpTouch) {
-            state.cleanUpTouch();
-        }
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: undefined });
-    }
-    // trackTouch is on, so if there are no handlers attached, attach them and exit
-    if (!state.cleanUpTouch) {
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: attachTouch(state.el, props) });
-    }
-    // trackTouch is on and handlers are already attached, so if preventScrollOnSwipe changes value,
-    // remove and reattach handlers (this is required to update the passive option when attaching
-    // the handlers)
-    if (props.preventScrollOnSwipe !== previousProps.preventScrollOnSwipe ||
-        props.touchEventOptions.passive !== previousProps.touchEventOptions.passive) {
-        state.cleanUpTouch();
-        return Object.assign(Object.assign({}, state), { cleanUpTouch: attachTouch(state.el, props) });
-    }
-    return state;
-}
-function useSwipeable(options) {
-    const { trackMouse } = options;
-    const transientState = React__namespace.useRef(Object.assign({}, initialState));
-    const transientProps = React__namespace.useRef(Object.assign({}, defaultProps));
-    // track previous rendered props
-    const previousProps = React__namespace.useRef(Object.assign({}, transientProps.current));
-    previousProps.current = Object.assign({}, transientProps.current);
-    // update current render props & defaults
-    transientProps.current = Object.assign(Object.assign({}, defaultProps), options);
-    // Force defaults for config properties
-    let defaultKey;
-    for (defaultKey in defaultProps) {
-        if (transientProps.current[defaultKey] === void 0) {
-            transientProps.current[defaultKey] = defaultProps[defaultKey];
-        }
-    }
-    const [handlers, attachTouch] = React__namespace.useMemo(() => getHandlers((stateSetter) => (transientState.current = stateSetter(transientState.current, transientProps.current)), { trackMouse }), [trackMouse]);
-    transientState.current = updateTransientState(transientState.current, transientProps.current, previousProps.current, attachTouch);
-    return handlers;
-}
-
 var Drawer = function (_a) {
-    var isOpen = _a.isOpen, title = _a.title, children = _a.children, onRequestClose = _a.onRequestClose, footer = _a.footer, _b = _a.position, position = _b === void 0 ? "right" : _b, _c = _a.isOverlayVisible, isOverlayVisible = _c === void 0 ? true : _c, _d = _a.shouldReturnFocus, shouldReturnFocus = _d === void 0 ? true : _d, _e = _a.size, size = _e === void 0 ? "s" : _e, props = filterAttrs.__rest(_a, ["isOpen", "title", "children", "onRequestClose", "footer", "position", "isOverlayVisible", "shouldReturnFocus", "size"]);
+    var isOpen = _a.isOpen, children = _a.children, onRequestClose = _a.onRequestClose, _b = _a.noOverlay, noOverlay = _b === void 0 ? false : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, height = _a.height, width = _a.width, _e = _a.position, position = _e === void 0 ? "right" : _e, props = filterAttrs.__rest(_a, ["isOpen", "children", "onRequestClose", "noOverlay", "shouldReturnFocus", "size", "height", "width", "position"]);
     var _f = index.useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
     var triggerRef = React.useRef(null);
     var _g = React.useState(null), exitTranslateValue = _g[0], setExitTranslateValue = _g[1];
-    var handlers = useSwipeable({
-        onSwiped: function (_a) {
-            var dir = _a.dir;
-            if (position === "left" && dir === "Left") {
-                setExitTranslateValue([-100, 0]);
-            }
-            if (position === "right" && dir === "Right") {
-                setExitTranslateValue([100, 0]);
-            }
-            if (position === "top" && dir === "Up") {
-                setExitTranslateValue([0, -100]);
-            }
-            if (position === "bottom" && dir === "Down") {
-                setExitTranslateValue([0, 100]);
-            }
-        },
-    });
     var setTriggerElement = function () {
         return shouldReturnFocus &&
             (triggerRef.current = document.activeElement);
@@ -346,30 +42,57 @@ var Drawer = function (_a) {
             },
         }
         : {};
+    var sizingProperties = filterAttrs.__assign(filterAttrs.__assign({}, (position !== "bottom" && { width: width })), (position === "bottom" && { height: height }));
     return (React.createElement("div", { ref: setThemeElement },
         React.createElement(index$1.Root, { open: isOpen },
             React.createElement(index$1.Portal, { container: themeElement },
                 React.createElement(index$1.Overlay, { style: exitTransitionStyle.overlay, className: index$2.classNames("arc-Drawer-overlay", {
-                        "arc-Drawer-overlay--visible": isOverlayVisible,
+                        "arc-Drawer-overlay--visible": !noOverlay,
                     }) },
                     React.createElement(index$1.Content, filterAttrs.__assign({ onTransitionEnd: function () {
                             setExitTranslateValue(null);
                             onRequestClose();
-                        }, className: index$2.classNames("arc-Drawer-slider", "arc-Drawer-slider--".concat(size), "arc-Drawer-slider--".concat(position)), style: exitTransitionStyle.slider, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onRequestClose, onInteractOutside: onRequestClose, "aria-modal": "true" }, handlers, filterAttrs.filterAttrs(props)),
-                        React.createElement("div", { className: "arc-Drawer-content" },
-                            React.createElement("div", { className: "arc-Drawer-section" }, children)),
-                        React.createElement("div", { className: "arc-Drawer-footer" },
-                            React.createElement(VerticalSpace.VerticalSpace, { size: "32" }),
-                            footer),
-                        React.createElement("div", { className: "arc-Drawer-header" },
-                            React.createElement("div", { className: "arc-Drawer-closeButtonContainer" },
-                                React.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
-                                    React.createElement(ThemeIcon.ThemeIcon, { size: 48, icon: "drawerClose" }))),
-                            React.createElement("div", { className: "arc-Drawer-headerContent" },
-                                React.createElement("div", { className: "arc-Drawer-titleContainer" },
-                                    React.createElement(index$1.Title, { asChild: true },
-                                        React.createElement(Heading.Heading, { level: "1", size: "l" }, title)))),
-                            React.createElement(VerticalSpace.VerticalSpace, { size: "32" }))))))));
+                        }, className: index$2.classNames("arc-Drawer-slider", "arc-Drawer-slider--".concat(size), "arc-Drawer-slider--".concat(position)), style: (filterAttrs.__assign({}, sizingProperties)), onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: onRequestClose, onInteractOutside: onRequestClose, "aria-modal": "true" }, filterAttrs.filterAttrs(props)),
+                        children,
+                        React.createElement("div", { className: "arc-Drawer-closeButtonContainer" },
+                            React.createElement("button", { "aria-label": "close", onClick: onRequestClose, className: "arc-Drawer-closeButton" },
+                                React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "drawerClose" })))))))));
+};
+
+var DrawerHeader = function (_a) {
+    var title = _a.title, _b = _a.isFixed, isFixed = _b === void 0 ? false : _b, props = filterAttrs.__rest(_a, ["title", "isFixed"]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", filterAttrs.__assign({ className: index$2.classNames("arc-DrawerHeader", {
+                "arc-DrawerHeader--isFixed": isFixed,
+            }) }, filterAttrs.filterAttrs(props)),
+            React.createElement("div", { className: "arc-DrawerHeader-content" },
+                React.createElement("div", { className: "arc-DrawerHeader-titleContainer" },
+                    React.createElement(index$1.Title, { asChild: true },
+                        React.createElement("h1", { className: "arc-DrawerHeader-title" }, title)))),
+            isFixed && (React.createElement("div", { className: "arc-DrawerHeader-divider" },
+                React.createElement(Rule.Rule, null))))));
+};
+
+var DrawerFooter = function (_a) {
+    var isFixed = _a.isFixed, children = _a.children;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: index$2.classNames("arc-DrawerFooter", {
+                "arc-DrawerFooter--isFixed": isFixed,
+            }) },
+            isFixed && (React.createElement("div", { className: "arc-DrawerFooter-divider" },
+                React.createElement(Rule.Rule, null))),
+            children)));
+};
+
+var DrawerContent = function (_a) {
+    var isFullBleed = _a.isFullBleed, children = _a.children;
+    return (React.createElement("div", { className: index$2.classNames("arc-DrawerContent", {
+            "arc-DrawerContent--isFullBleed": isFullBleed,
+        }) },
+        React.createElement("div", { className: "arc-Drawer-section" }, children)));
 };
 
 exports.Drawer = Drawer;
+exports.DrawerContent = DrawerContent;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;