@overmap-ai/blocks 1.0.33-menu-styling-updates.6 → 1.0.33

package/dist/Layout/SlideOut.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { SlideOutV2Props } from "../SlideOut";
-import { SlideOutV3Props } from "../SlideOutV3";
-interface SlideOutProps extends Omit<SlideOutV3Props, "open" | "initialWidth"> {
+import { SlideOutProps } from "../SlideOut";
+interface SlideOutImplProps extends Omit<SlideOutProps, "open" | "initialWidth"> {
     /** controls if the SlideOut is initially open once mounted when NOT in smallMode.
      * NOTE: changing the value of this will cause the SlideOut to open/close after mounting NOT in smallMode depending on
      *  its passed in value.
@@ -11,13 +10,13 @@ interface SlideOutProps extends Omit<SlideOutV3Props, "open" | "initialWidth"> {
         large?: boolean;
     };
     /** optional prop to control the open state of the SlideOut */
-    open?: SlideOutV2Props["open"];
+    open?: SlideOutProps["open"];
     /** optional prop to control the initialWidth of the SlideOut
      * @default "30%" */
-    initialWidth?: SlideOutV2Props["initialWidth"];
+    initialWidth?: SlideOutProps["initialWidth"];
 }
 /** Type used for both Layout.LeftSlideOut and Layout.RightSlideOut */
-export interface LayoutSlideOutProps extends Omit<SlideOutProps, "side"> {
+export interface LayoutSlideOutProps extends Omit<SlideOutImplProps, "side"> {
 }
 /** TODO: Document */
 export declare const LeftSlideOut: import("react").NamedExoticComponent<LayoutSlideOutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Layout/SlideOutOverlay.d.ts

@@ -1,8 +1,8 @@
 import { ComponentProps, PropsWithoutRef } from "react";
-import { SlideOutV3Props } from "../SlideOutV3";
+import { SlideOutProps } from "../SlideOut";
 export interface LayoutOverlayProps extends PropsWithoutRef<ComponentProps<"div">> {
     active?: boolean;
-    side: SlideOutV3Props["side"];
+    side: SlideOutProps["side"];
     smallModeOnly?: boolean;
 }
 export declare const SlideOutOverlay: import("react").NamedExoticComponent<LayoutOverlayProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Layout/SlideOutTrigger.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from "react";
-import { SlideOutV3Props } from "../SlideOutV3";
+import { SlideOutProps } from "../SlideOut";
 export interface SlideOutTriggerProps extends PropsWithChildren {
-    side: SlideOutV3Props["side"];
+    side: SlideOutProps["side"];
     type?: "toggle" | "open" | "close";
 }
 export declare const SlideOutTrigger: import("react").NamedExoticComponent<SlideOutTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/{SlideOutV3/SlideOutV3.d.ts → SlideOut/SlideOut.d.ts}

@@ -1,6 +1,6 @@
 import { PropsWithChildren, ReactNode } from "react";
 import { PropsWithClassNameAndStyle } from "../typings";
-export interface SlideOutV3Props extends PropsWithChildren, PropsWithClassNameAndStyle {
+export interface SlideOutProps extends PropsWithChildren, PropsWithClassNameAndStyle {
     /** The controlled open state of the SlideOut */
     open: boolean;
     /** specifies if the SlideOut is in modal mode or not.
@@ -47,4 +47,4 @@ export interface SlideOutV3Props extends PropsWithChildren, PropsWithClassNameAn
 }
 /** The SlideOut component is a UI element that allows you to create a slide-in/slide-out effect for content within
  * your application. It provides a smooth transition animation for revealing and hiding content. */
-export declare const SlideOutV3: import("react").NamedExoticComponent<SlideOutV3Props & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SlideOut: import("react").NamedExoticComponent<SlideOutProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/SlideOut/index.d.ts

@@ -1 +1 @@
-export * from "./SlideOutV2";
+export * from "./SlideOut";

package/dist/blocks.js

@@ -22,8 +22,6 @@ import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
-import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
-import { Resizable } from "re-resizable";
 import * as RadixSwitch from "@radix-ui/react-switch";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import * as RadixToast from "@radix-ui/react-toast";
@@ -1659,8 +1657,8 @@ function useCallbackRef(callback) {
     return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
   }, []);
 }
-const TIMEOUT_DURATION$1 = 200;
-const SlideOutV3 = memo(
+const TIMEOUT_DURATION = 200;
+const SlideOut = memo(
   forwardRef((props, ref) => {
     const {
       className,
@@ -1779,7 +1777,7 @@ const SlideOutV3 = memo(
           {
             classNames: CSSTransitionClassNames,
             in: open,
-            timeout: TIMEOUT_DURATION$1,
+            timeout: TIMEOUT_DURATION,
             unmountOnExit: true,
             mountOnEnter: true,
             onEntering: onOpening,
@@ -1859,7 +1857,7 @@ const SlideOutV3 = memo(
   })
 );
 const DEFAULT_INITIAL_WIDTH = "30%";
-const SlideOut = memo(
+const SlideOutImpl = memo(
   forwardRef((props, ref) => {
     const { small, hideLayout } = useLayoutContext();
     const { className, showSlideOut, setShowSlideOut, defaultOpen, side, ...rest } = props;
@@ -1889,7 +1887,7 @@ const SlideOut = memo(
       [handleDismiss, rest, showSlideOut, small]
     );
     return !hideLayout && /* @__PURE__ */ jsx(
-      SlideOutV3,
+      SlideOut,
       {
         className: cx(`overmap-layout-slideOut-${side}`, className),
         side,
@@ -1903,7 +1901,7 @@ const LeftSlideOut = memo(
   forwardRef((props, ref) => {
     const { showLeftSlideOut, setShowLeftSlideOut } = useLayoutContext();
     return /* @__PURE__ */ jsx(
-      SlideOut,
+      SlideOutImpl,
       {
         side: "left",
         showSlideOut: showLeftSlideOut,
@@ -1918,7 +1916,7 @@ const RightSlideOut = memo(
   forwardRef((props, ref) => {
     const { showRightSlideOut, setShowRightSlideOut } = useLayoutContext();
     return /* @__PURE__ */ jsx(
-      SlideOut,
+      SlideOutImpl,
       {
         side: "right",
         showSlideOut: showRightSlideOut,
@@ -3535,125 +3533,6 @@ const Separator = forwardRef((props, ref) => {
   );
 });
 Separator.displayName = "Separator";
-const TIMEOUT_DURATION = 200;
-const SlideOutV2 = memo(
-  forwardRef((props, ref) => {
-    const {
-      className,
-      style,
-      children,
-      open,
-      modal = false,
-      resizeable = true,
-      side,
-      position = "relative",
-      initialWidth,
-      minWidth,
-      maxWidth,
-      onDismiss,
-      onOpening,
-      onClosed
-    } = props;
-    const isLeft = side === "left";
-    const [slideOutWidth, setSlideOutWidth] = useState(initialWidth);
-    const handleResize = useCallback(
-      (_event, _dir, ref2, _delta) => {
-        setSlideOutWidth(ref2.clientWidth);
-      },
-      []
-    );
-    const handleDismiss = useCallback(() => {
-      if (modal && onDismiss) {
-        onDismiss();
-      }
-    }, [modal, onDismiss]);
-    useEffect(() => {
-      setSlideOutWidth(initialWidth);
-    }, [initialWidth]);
-    const CSSTransitionClassNames = useMemo(
-      () => ({
-        enter: isLeft ? "-ml-(--slide-out-width)" : "-mr-(--slide-out-width)",
-        enterActive: isLeft ? "ease-linear duration-200 transition-[margin-left] ml-0" : "ease-linear duration-200 transition-[margin-right] mr-0",
-        enterDone: isLeft ? "ml-0" : "mr-0",
-        exitActive: isLeft ? "ease-linear duration-200 transition-[margin-left] -ml-(--slide-out-width)" : "ease-linear duration-200 transition-[margin-right] -mr-(--slide-out-width)",
-        exitDone: isLeft ? "-ml-(--slide-out-width)" : "-mr-(--slide-out-width)"
-      }),
-      [isLeft]
-    );
-    return (
-      /** The DismissableLayer Component is strictly a functionality-based component for emulating an overlay. Its main use is for
-       * detecting interactions OUTSIDE whatever content is placed within it, allowing the developer to decide what to do with that
-       * content when it is 'dismissed' (i.e closed, to be hidden, etc.).
-       *
-       * There are three main events that trigger this 'dismissal' behavior
-       * 1) Focus is given to an element outside the content rendered within the DismissableLayer component
-       * 2) PointerEvent occurs on an element outside the content rendered within the DismissableLayer component
-       * 3) Escape key is pressed
-       *
-       * The 'disableOutsidePointerEvents' prop is used for disabling focus and PointerEvents on outside elements.
-       * The dismissal behavior will still eb trigger, it just won't allow any elements to be interacted with until
-       * the DismissableLayer is removed from the DOM, or 'disableOutsidePointerEvents' is set to false
-       *
-       * In this use case, Overmap's SlideOut will have two specific behaviors
-       * 1) Modal mode - the SlideOut has modal-like behavior where it will dismiss PointerEvents and Focus of
-       * 		outside elements
-       * 2) Non-modal mode - the SlideOut behaves like a side panel the co-exists with content outside of it
-       * 		*/
-      /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-      /* @ts-ignore */
-      /* @__PURE__ */ jsx(
-        CSSTransition,
-        {
-          classNames: CSSTransitionClassNames,
-          in: open,
-          timeout: TIMEOUT_DURATION,
-          unmountOnExit: true,
-          mountOnEnter: true,
-          onEntering: onOpening,
-          onExited: onClosed,
-          children: /* @__PURE__ */ jsx(
-            DismissableLayer,
-            {
-              disableOutsidePointerEvents: modal,
-              style,
-              onInteractOutside: handleDismiss,
-              onEscapeKeyDown: handleDismiss,
-              asChild: true,
-              children: /* @__PURE__ */ jsx(
-                Slot,
-                {
-                  className: cx(className, "top-0", "bottom-0", {
-                    "left-0": isLeft,
-                    "right-0": !isLeft,
-                    absolute: position === "absolute",
-                    relative: position === "relative"
-                  }),
-                  ref,
-                  children: /* @__PURE__ */ jsx(
-                    Resizable,
-                    {
-                      onResize: handleResize,
-                      size: { width: slideOutWidth, height: "100%" },
-                      style: {
-                        position,
-                        "--slide-out-width": `${slideOutWidth}${typeof slideOutWidth === "number" ? "px" : ""}`
-                      },
-                      minWidth,
-                      maxWidth,
-                      enable: { left: resizeable && !isLeft, right: resizeable && isLeft },
-                      children
-                    }
-                  )
-                }
-              )
-            },
-            modal ? "1" : "0"
-          )
-        }
-      )
-    );
-  })
-);
 const Spinner = memo(() => {
   return /* @__PURE__ */ jsx("div", { className: "size-5 animate-spin rounded-full border-2 border-(--base-a12) border-b-transparent" });
 });
@@ -4553,8 +4432,7 @@ export {
   SegmentedControlRoot,
   SelectedIndicatorContext,
   Separator,
-  SlideOutV2,
-  SlideOutV3,
+  SlideOut,
   Spinner,
   Switch,
   SwitchRoot,