@overmap-ai/blocks 1.0.10-fix-dropdown-buttons.0 → 1.0.10

package/dist/BaseMenuGroups/BaseItemGroup/typings.d.ts

@@ -1,8 +1,9 @@
-import { FC } from "react";
+import { FC, ReactElement } from "react";
 import { MenuGroupProps, MenuItemProps } from "@radix-ui/react-menu";
 import { BaseMenuItemProps, BaseMenuGroupProps, TextFilterProps } from "../typings.ts";
 export type BaseItemProps = BaseMenuItemProps & Omit<MenuItemProps, "asChild" | "content"> & {
     shortcut?: string[];
+    itemDecorator?: (itemElement: ReactElement) => ReactElement;
 };
 export type BaseItemGroupProps = BaseMenuGroupProps<BaseItemProps> & Omit<MenuGroupProps, "asChild"> & TextFilterProps;
 export interface BaseItemGroupElementProps {

package/dist/BaseMenuGroups/BaseMenuComponents.d.ts

@@ -1,6 +1,7 @@
 import { FC, PropsWithChildren, ReactNode } from "react";
 import { InputProps } from "..";
 export interface BaseMenuItem extends PropsWithChildren {
+    className?: string;
     rightSlot?: ReactNode;
 }
 export declare const BaseMenuItem: FC<BaseMenuItem>;

package/dist/ButtonGroup/context.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ButtonProps } from "../Buttons/typings";
-export type ButtonContextType = Pick<ButtonProps, "variant" | "size" | "severity" | "hoverEffects" | "fluid">;
+export type ButtonContextType = Pick<ButtonProps, "variant" | "size" | "severity" | "hoverEffects" | "fluid" | "highContrast">;
 export declare const ButtonGroupContext: import("react").Context<ButtonContextType>;
 export declare const useButtonGroupContext: () => ButtonContextType;

package/dist/ButtonGroup/typings.d.ts

@@ -30,4 +30,8 @@ export interface ButtonGroupProps extends Omit<ComponentProps<typeof Flex>, keyo
      * @default false
      * */
     fluid?: boolean;
+    /** When set to true, all Buttons will have higher contrast
+     * @default false
+     * */
+    highContrast?: boolean;
 }

package/dist/SlideOut/SlideOut.d.ts

@@ -32,6 +32,7 @@ interface SlideOutProps extends Omit<DismissableLayerProps, "disableOutsidePoint
      * @default "absolute"
      * */
     position?: "absolute" | "relative";
+    overlayClassName?: string;
 }
 /** 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

@@ -319,6 +319,7 @@ const _Button$1 = forwardRef(function Button$1(props, ref) {
     severity = buttonGroupContext.severity ?? "primary",
     hoverEffects = buttonGroupContext.hoverEffects ?? [],
     variant = buttonGroupContext.variant,
+    highContrast = buttonGroupContext.highContrast ?? false,
     shortcut = {
       keys: [],
       action: () => {
@@ -347,6 +348,7 @@ const _Button$1 = forwardRef(function Button$1(props, ref) {
       size: useResponsiveMapping(size, SizeMapping),
       variant,
       disabled: loading || disabled,
+      highContrast,
       ...rest,
       children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : children
     }
@@ -364,6 +366,7 @@ const _Button = forwardRef(function Button3(props, ref) {
     severity = buttonGroupContext.severity ?? "primary",
     hoverEffects = buttonGroupContext.hoverEffects ?? [],
     variant = buttonGroupContext.variant,
+    highContrast = buttonGroupContext.highContrast ?? false,
     shortcut = {
       keys: [],
       action: () => {
@@ -388,6 +391,7 @@ const _Button = forwardRef(function Button3(props, ref) {
       size: useResponsiveMapping(size, SizeMapping),
       variant,
       type,
+      highContrast,
       ...rest,
       children
     }
@@ -413,6 +417,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
   variant,
   hoverEffects,
   fluid: fluid2,
+  highContrast,
   ...rest
 }, ref) {
   const ghostSize = useResponsiveMapping(size, GhostVariantSizeToGapMapping[direction]);
@@ -428,7 +433,7 @@ const _ButtonGroup = forwardRef(function ButtonGroup2({
       direction,
       "data-direction": direction,
       ...rest,
-      children: /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: { size, severity, variant, hoverEffects, fluid: fluid2 }, children })
+      children: /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: { size, severity, variant, hoverEffects, fluid: fluid2, highContrast }, children })
     }
   );
 });
@@ -656,10 +661,10 @@ const DropdownMenu = memo(
     ] });
   })
 );
-const BaseMenuItem$1 = "_BaseMenuItem_1s610_1";
-const RemoveOutline = "_RemoveOutline_1s610_15";
-const BaseMenuSeparator$1 = "_BaseMenuSeparator_1s610_19";
-const BaseMenuInput$1 = "_BaseMenuInput_1s610_27";
+const BaseMenuItem$1 = "_BaseMenuItem_5r3et_1";
+const RemoveOutline = "_RemoveOutline_5r3et_15";
+const BaseMenuSeparator$1 = "_BaseMenuSeparator_5r3et_19";
+const BaseMenuInput$1 = "_BaseMenuInput_5r3et_27";
 const styles$h = {
   BaseMenuItem: BaseMenuItem$1,
   RemoveOutline,
@@ -667,11 +672,22 @@ const styles$h = {
   BaseMenuInput: BaseMenuInput$1
 };
 const BaseMenuItem = memo(
-  forwardRef(({ children, rightSlot }, ref) => {
-    return /* @__PURE__ */ jsx(Box, { className: styles$h.BaseMenuItem, ref, position: "relative", px: "2", height: "6", children: /* @__PURE__ */ jsxs(Flex, { gap: "6", height: "100%", align: "center", children: [
-      /* @__PURE__ */ jsx(Flex, { grow: "1", height: "100%", align: "center", gap: "1", children }),
-      /* @__PURE__ */ jsx(Flex, { height: "100%", width: "4", align: "center", justify: "end", children: rightSlot })
-    ] }) });
+  forwardRef(({ children, rightSlot, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: classNames(styles$h.BaseMenuItem, className),
+        ref,
+        position: "relative",
+        px: "2",
+        height: "6",
+        ...rest,
+        children: /* @__PURE__ */ jsxs(Flex, { gap: "6", height: "100%", align: "center", children: [
+          /* @__PURE__ */ jsx(Flex, { grow: "1", height: "100%", align: "center", gap: "1", children }),
+          /* @__PURE__ */ jsx(Flex, { height: "100%", width: "4", align: "center", justify: "end", children: rightSlot })
+        ] })
+      }
+    );
   })
 );
 const BaseMenuInput = memo(
@@ -739,16 +755,21 @@ const BaseItemGroup = memo(function BaseItemGroup2({
         ),
         items.length !== 0 && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
       ] }),
-      items.map(({ content, shortcut, className, onSelect, ...rest2 }, index) => /* @__PURE__ */ jsx(
-        ItemElement,
-        {
-          className: classNames(className, styles$h.RemoveOutline),
-          onSelect: closeOnSelectHandler(onSelect),
-          ...rest2,
-          children: /* @__PURE__ */ jsx(BaseMenuItem, { rightSlot: shortcut == null ? void 0 : shortcut.map((key, index2) => /* @__PURE__ */ jsx(Kbd, { children: key }, index2)), children: content })
-        },
-        index
-      ))
+      items.map(({ content, itemDecorator, shortcut, className, onSelect, ...rest2 }, index) => {
+        const itemContent = /* @__PURE__ */ jsx(
+          ItemElement,
+          {
+            className: classNames(className, styles$h.RemoveOutline),
+            onSelect: closeOnSelectHandler(onSelect),
+            textValue: "",
+            asChild: true,
+            ...rest2,
+            children: /* @__PURE__ */ jsx(BaseMenuItem, { rightSlot: shortcut == null ? void 0 : shortcut.map((key, index2) => /* @__PURE__ */ jsx(Kbd, { children: key }, index2)), children: content })
+          },
+          index
+        );
+        return itemDecorator ? itemDecorator(itemContent) : itemContent;
+      })
     ] }) }),
     separator && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
   ] });
@@ -806,6 +827,7 @@ const BaseSelectGroup = memo(function BaseSelectGroup2({
           onCheckedChange: handleCheckedChange(itemValue),
           onSelect: closeOnSelectHandler(onSelect),
           textValue: "",
+          asChild: true,
           ...rest,
           children: /* @__PURE__ */ jsx(
             BaseMenuItem,
@@ -884,6 +906,7 @@ const BaseMultiSelectGroup = memo(function BaseMultiSelectGroup2({
           onCheckedChange: handleCheckedChange(value),
           checked: values.includes(value),
           textValue: "",
+          asChild: true,
           ...rest,
           children: /* @__PURE__ */ jsx(
             BaseMenuItem,
@@ -910,7 +933,7 @@ const BaseSubMenuGroup = memo(function BaseSubMenuGroup2({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(GroupElement, { ...rest, children: items.map(({ triggerIndicator, content, subContent, className, ...rest2 }, index) => /* @__PURE__ */ jsxs(SubElement, { children: [
-      /* @__PURE__ */ jsx(SubTriggerElement, { className: classNames(className, styles$h.RemoveOutline), ...rest2, children: /* @__PURE__ */ jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
+      /* @__PURE__ */ jsx(SubTriggerElement, { className: classNames(className, styles$h.RemoveOutline), asChild: true, ...rest2, children: /* @__PURE__ */ jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
       /* @__PURE__ */ jsx(SubContentElement, { sideOffset: 10, children: subContent })
     ] }, index)) }),
     separator && /* @__PURE__ */ jsx(BaseMenuSeparator, {})
@@ -966,7 +989,7 @@ const DropdownItemMenu = memo(
       ...rest
     }) => {
       const infoColor = useSeverityColor("info");
-      return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { modal: false, children: [
+      return /* @__PURE__ */ jsxs(DropdownMenu$1.Root, { children: [
         /* @__PURE__ */ jsx(DropdownMenu$1.Trigger, { disabled, children: trigger }),
         /* @__PURE__ */ jsx(DropdownMenu$1.Content, { variant: "soft", ...rest, color: infoColor, children: /* @__PURE__ */ jsx(
           DropdownMenuItemGroup,
@@ -1326,15 +1349,15 @@ const _Sidebar = forwardRef(function Sidebar2({
   ] }) });
 });
 const Sidebar = memo(_Sidebar);
-const outerContent = "_outerContent_1iy9c_1";
-const enter = "_enter_1iy9c_4";
-const right$1 = "_right_1iy9c_4";
-const left$1 = "_left_1iy9c_8";
-const enterActive = "_enterActive_1iy9c_12";
-const exitActive = "_exitActive_1iy9c_22";
-const exitDone = "_exitDone_1iy9c_32";
-const resizable$1 = "_resizable_1iy9c_41";
-const slideOutOverlay = "_slideOutOverlay_1iy9c_47";
+const outerContent = "_outerContent_n84eo_1";
+const enter = "_enter_n84eo_4";
+const right$1 = "_right_n84eo_7";
+const left$1 = "_left_n84eo_11";
+const enterActive = "_enterActive_n84eo_15";
+const exitActive = "_exitActive_n84eo_28";
+const exitDone = "_exitDone_n84eo_41";
+const resizable$1 = "_resizable_n84eo_53";
+const slideOutOverlay = "_slideOutOverlay_n84eo_59";
 const styles$d = {
   outerContent,
   enter,
@@ -1359,6 +1382,7 @@ const SlideOut = memo(function SlideOut2({
   modal = false,
   resizeHandle: resizeHandle2,
   position = "absolute",
+  overlayClassName,
   ...rest
 }) {
   const contentRef = useRef(null);
@@ -1389,7 +1413,12 @@ const SlideOut = memo(function SlideOut2({
       unmountOnExit: true,
       mountOnEnter: true,
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
-        overlay2 && /* @__PURE__ */ jsx("div", { className: classNames("overamp-slide-out-overlay", styles$d.slideOutOverlay) }),
+        overlay2 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classNames("overmap-slide-out-overlay", styles$d.slideOutOverlay, overlayClassName)
+          }
+        ),
         /* @__PURE__ */ jsx(DismissableLayer, { disableOutsidePointerEvents: modal, asChild: true, ...rest, children: /* @__PURE__ */ jsx(
           Flex$1,
           {