@overmap-ai/blocks 1.0.24 → 1.0.25-alpha.0

package/README.md

@@ -1,3 +1,3 @@
-# overmap-ai blocks
-
-Contains basic components used by overmap-ai libraries.
+# overmap-ai blocks
+
+Contains basic components used by overmap-ai libraries.

package/dist/BaseMenuGroups/typings.d.ts

@@ -1,5 +1,4 @@
-import { ComponentProps, ReactElement, ReactNode } from "react";
-import { DropdownMenu as RadixDropdownMenu } from "@radix-ui/themes";
+import { ReactElement, ReactNode } from "react";
 import { AllOrNone } from "../utils.ts";
 export interface BaseMenuGroupProps<TItemProps> {
     closeOnSelect?: boolean;
@@ -30,8 +29,4 @@ export type BaseMenuProps = {
      * @default false
      */
     disabled?: boolean;
-    /** determines on which side of the trigger the dropdown select renders on, if open space
-     * @default "bottom"
-     * */
-    side?: ComponentProps<typeof RadixDropdownMenu.Content>["side"];
 };

package/dist/DropdownItemMenu/DropdownItemMenu.d.ts

@@ -1,8 +1,9 @@
 import { FC } from "react";
-import { DropdownMenuItemGroupItemProps, DropdownMenuItemGroupProps } from "../DropdownMenu/DropdownMenuGroups.tsx";
+import { DropdownMenuItemGroupItemProps, DropdownMenuItemGroupProps } from "../DropdownMenu";
 import { BaseMenuProps } from "../BaseMenuGroups";
+import { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
 export type DropdownItemMenuItemProps = DropdownMenuItemGroupItemProps;
-export type DropdownItemMenuProps = DropdownMenuItemGroupProps & BaseMenuProps;
+export type DropdownItemMenuProps = DropdownMenuItemGroupProps & BaseMenuProps & DropdownMenuContentProps;
 /** The DropdownItemMenu component is a user interface element that provides a list of options for the user to choose from.
  * It is commonly used in web applications to present a set of related choices in a compact and organized manner.
  * This DropdownItemMenu component is a wrapper around the Radix-UI DropdownItemMenu component that can be found here https://www.radix-ui.com/themes/docs/components/dropdown-menu */

package/dist/DropdownMenu/DropdownMenu.d.ts

@@ -1,8 +1,9 @@
 import { FC, PropsWithChildren } from "react";
 import { DropdownMenuItemGroupItemProps } from "./DropdownMenuGroups.tsx";
 import { BaseMenuProps } from "../BaseMenuGroups";
+import { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
 export type DropdownMenuItemProps = DropdownMenuItemGroupItemProps;
-export type DropdownMenuProps = PropsWithChildren & BaseMenuProps;
+export type DropdownMenuProps = PropsWithChildren & BaseMenuProps & DropdownMenuContentProps;
 /** The DropdownMenu component is a user interface element that provides a list of options for the user to choose from.
  * It is commonly used in web applications to present a set of related choices in a compact and organized manner.
  * This DropdownMenu component is a wrapper around the Radix-UI DropdownMenu component that can be found here https://www.radix-ui.com/themes/docs/components/dropdown-menu */

package/dist/DropdownMultiSelect/DropdownMultiSelect.d.ts

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { DropdownMenuMultiSelectGroupItemProps, DropdownMenuMultiSelectGroupProps } from "../DropdownMenu";
 import { BaseMenuProps } from "../BaseMenuGroups";
+import { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
 export type DropdownMultiSelectItemProps = DropdownMenuMultiSelectGroupItemProps;
-export type DropdownMultiSelectProps = DropdownMenuMultiSelectGroupProps & BaseMenuProps;
+export type DropdownMultiSelectProps = DropdownMenuMultiSelectGroupProps & BaseMenuProps & DropdownMenuContentProps;
 export declare const DropdownMultiSelect: FC<DropdownMultiSelectProps>;

package/dist/DropdownSelect/DropdownSelect.d.ts

@@ -1,6 +1,7 @@
 import { FC } from "react";
-import { DropdownMenuItemGroupItemProps, DropdownMenuSelectGroupProps } from "../DropdownMenu/DropdownMenuGroups.tsx";
+import { DropdownMenuItemGroupItemProps, DropdownMenuSelectGroupProps } from "../DropdownMenu";
 import { BaseMenuProps } from "../BaseMenuGroups";
+import { DropdownMenuContentProps } from "@radix-ui/react-dropdown-menu";
 export type DropdownSelectItemProps = DropdownMenuItemGroupItemProps;
-export type DropdownSelectProps = DropdownMenuSelectGroupProps & BaseMenuProps;
+export type DropdownSelectProps = DropdownMenuSelectGroupProps & BaseMenuProps & DropdownMenuContentProps;
 export declare const DropdownSelect: FC<DropdownSelectProps>;

package/dist/Layout/SlideOutTrigger.d.ts

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

package/dist/SlideOutV3/SlideOutV3.d.ts

@@ -38,7 +38,7 @@ export interface SlideOutV3Props extends PropsWithChildren, PropsWithClassNameAn
     /** overlay to be rendered when the SlideOut is open*/
     overlayComponent?: ReactNode;
     /** content to be rendered within the SlideOut */
-    content: ReactNode;
+    content: ReactNode | undefined;
 }
 /** 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. */

package/dist/blocks.js

@@ -666,7 +666,7 @@ const DropdownMenu = memo(
     const infoColor = useSeverityColor("info");
     return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { children: [
       /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { disabled: disabled2, children: trigger }),
-      /* @__PURE__ */ jsx(DropdownMenu$1.Content, { variant: "soft", color: infoColor, ...rest, children })
+      /* @__PURE__ */ jsx(DropdownMenu$1.Content, { variant: "soft", ...rest, color: infoColor, children })
     ] });
   })
 );
@@ -1027,12 +1027,12 @@ const DropdownSelect = memo(
       onFilterValueChange,
       closeOnSelect = true,
       icons,
-      side
+      ...rest
     }, ref) => {
       const infoColor = useSeverityColor("info");
       return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { children: [
         /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { disabled: disabled2, children: trigger }),
-        /* @__PURE__ */ jsx(DropdownMenu$1.Content, { ref, variant: "soft", color: infoColor, side, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DropdownMenu$1.Content, { ref, variant: "soft", ...rest, color: infoColor, children: /* @__PURE__ */ jsx(
           DropdownMenuSelectGroup,
           {
             value,
@@ -1062,12 +1062,12 @@ const DropdownMultiSelect = memo(
       onFilterValueChange,
       closeOnSelect = false,
       icons,
-      side
+      ...rest
     }, ref) => {
       const infoColor = useSeverityColor("info");
       return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { children: [
         /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { disabled: disabled2, children: trigger }),
-        /* @__PURE__ */ jsx(DropdownMenu$1.Content, { ref, variant: "soft", color: infoColor, side, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(DropdownMenu$1.Content, { ref, variant: "soft", ...rest, color: infoColor, children: /* @__PURE__ */ jsx(
           DropdownMenuMultiSelectGroup,
           {
             values,
@@ -1659,18 +1659,18 @@ const SlideOutV3 = memo(
         height: "100%",
         direction: "row",
         position: "relative",
-        style: { overflow: "hidden" },
+        style: { overflow: "hidden", maxWidth: "100%", maxHeight: "100%" },
         children: [
           side === "left" && /* @__PURE__ */ jsxs(Fragment, { children: [
             open && overlayComponent,
             " ",
-            SlideOut2
+            content && SlideOut2
           ] }),
-          /* @__PURE__ */ jsx(Flex$1, { ref: childrenContainerRef, grow: "1", height: "100%", children }),
+          /* @__PURE__ */ jsx(Flex$1, { ref: childrenContainerRef, grow: "1", height: "100%", style: { maxWidth: "100%" }, children }),
           side === "right" && /* @__PURE__ */ jsxs(Fragment, { children: [
             open && overlayComponent,
             " ",
-            SlideOut2
+            content && SlideOut2
           ] })
         ]
       }
@@ -1748,17 +1748,24 @@ const RightSlideOut = memo(
     );
   })
 );
+function nextStateBasedOnType(prevState, type) {
+  switch (type) {
+    case "toggle":
+      return !prevState;
+    case "open":
+      return true;
+    case "close":
+      return false;
+  }
+}
 const SlideOutTrigger = memo(
   forwardRef((props, ref) => {
-    const { side, children } = props;
+    const { side, type = "toggle", children } = props;
     const { setShowLeftSlideOut, setShowRightSlideOut } = useLayoutContext();
     const handleClick = useCallback(() => {
-      if (side === "left") {
-        setShowLeftSlideOut((prevState) => !prevState);
-      } else {
-        setShowRightSlideOut((prevState) => !prevState);
-      }
-    }, [setShowLeftSlideOut, setShowRightSlideOut, side]);
+      const setShowSlideOut = side === "left" ? setShowLeftSlideOut : setShowRightSlideOut;
+      setShowSlideOut((prevState) => nextStateBasedOnType(prevState, type));
+    }, [setShowLeftSlideOut, setShowRightSlideOut, side, type]);
     return /* @__PURE__ */ jsx(Slot, { ref, onClick: handleClick, children });
   })
 );