@addsign/moje-agenda-shared-lib 2.0.41 → 2.0.43

package/dist/popover-CcrzvSk7.js

@@ -0,0 +1,319 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { c as createContextScope, b as composeEventHandlers } from "./index-NZPkObcw.js";
+import { u as useComposedRefs, S as Slot } from "./index-D9mvqz1C.js";
+import { D as DismissableLayer } from "./index-BcR8DnnV.js";
+import { h as hideOthers, R as ReactRemoveScroll, u as useFocusGuards, F as FocusScope } from "./Combination-D2GKeTwa.js";
+import { u as useId } from "./index-DzfDO78K.js";
+import { c as createPopperScope, A as Anchor, C as Content, a as Arrow, R as Root2$1 } from "./index-CcNKXchf.js";
+import { P as Portal$1 } from "./index-D75exu1X.js";
+import { P as Presence } from "./index-wO-IHm1z.js";
+import { P as Primitive } from "./index-B761_inZ.js";
+import { u as useControllableState } from "./index-B0wyIFEr.js";
+import { cn } from "./utils/utils.js";
+var POPOVER_NAME = "Popover";
+var [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [
+  createPopperScope
+]);
+var usePopperScope = createPopperScope();
+var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
+var Popover$1 = (props) => {
+  const {
+    __scopePopover,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    modal = false
+  } = props;
+  const popperScope = usePopperScope(__scopePopover);
+  const triggerRef = React.useRef(null);
+  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ jsx(Root2$1, { ...popperScope, children: /* @__PURE__ */ jsx(
+    PopoverProvider,
+    {
+      scope: __scopePopover,
+      contentId: useId(),
+      triggerRef,
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      hasCustomAnchor,
+      onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
+      onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
+      modal,
+      children
+    }
+  ) });
+};
+Popover$1.displayName = POPOVER_NAME;
+var ANCHOR_NAME = "PopoverAnchor";
+var PopoverAnchor = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...anchorProps } = props;
+    const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
+    const popperScope = usePopperScope(__scopePopover);
+    const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
+    React.useEffect(() => {
+      onCustomAnchorAdd();
+      return () => onCustomAnchorRemove();
+    }, [onCustomAnchorAdd, onCustomAnchorRemove]);
+    return /* @__PURE__ */ jsx(Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
+  }
+);
+PopoverAnchor.displayName = ANCHOR_NAME;
+var TRIGGER_NAME = "PopoverTrigger";
+var PopoverTrigger$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...triggerProps } = props;
+    const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
+    const popperScope = usePopperScope(__scopePopover);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    const trigger = /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": context.open,
+        "aria-controls": context.contentId,
+        "data-state": getState(context.open),
+        ...triggerProps,
+        ref: composedTriggerRef,
+        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
+      }
+    );
+    return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(Anchor, { asChild: true, ...popperScope, children: trigger });
+  }
+);
+PopoverTrigger$1.displayName = TRIGGER_NAME;
+var PORTAL_NAME = "PopoverPortal";
+var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME, {
+  forceMount: void 0
+});
+var PopoverPortal = (props) => {
+  const { __scopePopover, forceMount, children, container } = props;
+  const context = usePopoverContext(PORTAL_NAME, __scopePopover);
+  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$1, { asChild: true, container, children }) }) });
+};
+PopoverPortal.displayName = PORTAL_NAME;
+var CONTENT_NAME = "PopoverContent";
+var PopoverContent$1 = React.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
+    const { forceMount = portalContext.forceMount, ...contentProps } = props;
+    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
+    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });
+  }
+);
+PopoverContent$1.displayName = CONTENT_NAME;
+var PopoverContentModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const isRightClickOutsideRef = React.useRef(false);
+    React.useEffect(() => {
+      const content = contentRef.current;
+      if (content)
+        return hideOthers(content);
+    }, []);
+    return /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx(
+      PopoverContentImpl,
+      {
+        ...props,
+        ref: composedRefs,
+        trapFocus: context.open,
+        disableOutsidePointerEvents: true,
+        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+          var _a;
+          event.preventDefault();
+          if (!isRightClickOutsideRef.current)
+            (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
+        }),
+        onPointerDownOutside: composeEventHandlers(
+          props.onPointerDownOutside,
+          (event) => {
+            const originalEvent = event.detail.originalEvent;
+            const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+            isRightClickOutsideRef.current = isRightClick;
+          },
+          { checkForDefaultPrevented: false }
+        ),
+        onFocusOutside: composeEventHandlers(
+          props.onFocusOutside,
+          (event) => event.preventDefault(),
+          { checkForDefaultPrevented: false }
+        )
+      }
+    ) });
+  }
+);
+var PopoverContentNonModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
+    const hasInteractedOutsideRef = React.useRef(false);
+    const hasPointerDownOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ jsx(
+      PopoverContentImpl,
+      {
+        ...props,
+        ref: forwardedRef,
+        trapFocus: false,
+        disableOutsidePointerEvents: false,
+        onCloseAutoFocus: (event) => {
+          var _a, _b;
+          (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
+          if (!event.defaultPrevented) {
+            if (!hasInteractedOutsideRef.current)
+              (_b = context.triggerRef.current) == null ? void 0 : _b.focus();
+            event.preventDefault();
+          }
+          hasInteractedOutsideRef.current = false;
+          hasPointerDownOutsideRef.current = false;
+        },
+        onInteractOutside: (event) => {
+          var _a, _b;
+          (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
+          if (!event.defaultPrevented) {
+            hasInteractedOutsideRef.current = true;
+            if (event.detail.originalEvent.type === "pointerdown") {
+              hasPointerDownOutsideRef.current = true;
+            }
+          }
+          const target = event.target;
+          const targetIsTrigger = (_b = context.triggerRef.current) == null ? void 0 : _b.contains(target);
+          if (targetIsTrigger)
+            event.preventDefault();
+          if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
+            event.preventDefault();
+          }
+        }
+      }
+    );
+  }
+);
+var PopoverContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopePopover,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      ...contentProps
+    } = props;
+    const context = usePopoverContext(CONTENT_NAME, __scopePopover);
+    const popperScope = usePopperScope(__scopePopover);
+    useFocusGuards();
+    return /* @__PURE__ */ jsx(
+      FocusScope,
+      {
+        asChild: true,
+        loop: true,
+        trapped: trapFocus,
+        onMountAutoFocus: onOpenAutoFocus,
+        onUnmountAutoFocus: onCloseAutoFocus,
+        children: /* @__PURE__ */ jsx(
+          DismissableLayer,
+          {
+            asChild: true,
+            disableOutsidePointerEvents,
+            onInteractOutside,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onFocusOutside,
+            onDismiss: () => context.onOpenChange(false),
+            children: /* @__PURE__ */ jsx(
+              Content,
+              {
+                "data-state": getState(context.open),
+                role: "dialog",
+                id: context.contentId,
+                ...popperScope,
+                ...contentProps,
+                ref: forwardedRef,
+                style: {
+                  ...contentProps.style,
+                  // re-namespace exposed content custom properties
+                  ...{
+                    "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
+                    "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
+                    "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
+                    "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
+                    "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
+                  }
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+var CLOSE_NAME = "PopoverClose";
+var PopoverClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...closeProps } = props;
+    const context = usePopoverContext(CLOSE_NAME, __scopePopover);
+    return /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        type: "button",
+        ...closeProps,
+        ref: forwardedRef,
+        onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))
+      }
+    );
+  }
+);
+PopoverClose.displayName = CLOSE_NAME;
+var ARROW_NAME = "PopoverArrow";
+var PopoverArrow = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopePopover, ...arrowProps } = props;
+    const popperScope = usePopperScope(__scopePopover);
+    return /* @__PURE__ */ jsx(Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
+  }
+);
+PopoverArrow.displayName = ARROW_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
+}
+var Root2 = Popover$1;
+var Trigger = PopoverTrigger$1;
+var Portal = PopoverPortal;
+var Content2 = PopoverContent$1;
+const Popover = Root2;
+const PopoverTrigger = Trigger;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+  Content2,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = Content2.displayName;
+export {
+  Popover as P,
+  PopoverTrigger as a,
+  PopoverContent as b,
+  PopoverClose as c
+};
+//# sourceMappingURL=popover-CcrzvSk7.js.map

package/dist/popover-CcrzvSk7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-CcrzvSk7.js","sources":["../node_modules/@radix-ui/react-popover/dist/index.mjs","../lib/components/ui/popover.tsx"],"sourcesContent":["\"use client\";\n\n// packages/react/popover/src/Popover.tsx\nimport * as React from \"react\";\nimport { composeEventHandlers } from \"@radix-ui/primitive\";\nimport { useComposedRefs } from \"@radix-ui/react-compose-refs\";\nimport { createContextScope } from \"@radix-ui/react-context\";\nimport { DismissableLayer } from \"@radix-ui/react-dismissable-layer\";\nimport { useFocusGuards } from \"@radix-ui/react-focus-guards\";\nimport { FocusScope } from \"@radix-ui/react-focus-scope\";\nimport { useId } from \"@radix-ui/react-id\";\nimport * as PopperPrimitive from \"@radix-ui/react-popper\";\nimport { createPopperScope } from \"@radix-ui/react-popper\";\nimport { Portal as PortalPrimitive } from \"@radix-ui/react-portal\";\nimport { Presence } from \"@radix-ui/react-presence\";\nimport { Primitive } from \"@radix-ui/react-primitive\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { hideOthers } from \"aria-hidden\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { jsx } from \"react/jsx-runtime\";\nvar POPOVER_NAME = \"Popover\";\nvar [createPopoverContext, createPopoverScope] = createContextScope(POPOVER_NAME, [\n  createPopperScope\n]);\nvar usePopperScope = createPopperScope();\nvar [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);\nvar Popover = (props) => {\n  const {\n    __scopePopover,\n    children,\n    open: openProp,\n    defaultOpen,\n    onOpenChange,\n    modal = false\n  } = props;\n  const popperScope = usePopperScope(__scopePopover);\n  const triggerRef = React.useRef(null);\n  const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);\n  const [open = false, setOpen] = useControllableState({\n    prop: openProp,\n    defaultProp: defaultOpen,\n    onChange: onOpenChange\n  });\n  return /* @__PURE__ */ jsx(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ jsx(\n    PopoverProvider,\n    {\n      scope: __scopePopover,\n      contentId: useId(),\n      triggerRef,\n      open,\n      onOpenChange: setOpen,\n      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),\n      hasCustomAnchor,\n      onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),\n      onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),\n      modal,\n      children\n    }\n  ) });\n};\nPopover.displayName = POPOVER_NAME;\nvar ANCHOR_NAME = \"PopoverAnchor\";\nvar PopoverAnchor = React.forwardRef(\n  (props, forwardedRef) => {\n    const { __scopePopover, ...anchorProps } = props;\n    const context = usePopoverContext(ANCHOR_NAME, __scopePopover);\n    const popperScope = usePopperScope(__scopePopover);\n    const { onCustomAnchorAdd, onCustomAnchorRemove } = context;\n    React.useEffect(() => {\n      onCustomAnchorAdd();\n      return () => onCustomAnchorRemove();\n    }, [onCustomAnchorAdd, onCustomAnchorRemove]);\n    return /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });\n  }\n);\nPopoverAnchor.displayName = ANCHOR_NAME;\nvar TRIGGER_NAME = \"PopoverTrigger\";\nvar PopoverTrigger = React.forwardRef(\n  (props, forwardedRef) => {\n    const { __scopePopover, ...triggerProps } = props;\n    const context = usePopoverContext(TRIGGER_NAME, __scopePopover);\n    const popperScope = usePopperScope(__scopePopover);\n    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n    const trigger = /* @__PURE__ */ jsx(\n      Primitive.button,\n      {\n        type: \"button\",\n        \"aria-haspopup\": \"dialog\",\n        \"aria-expanded\": context.open,\n        \"aria-controls\": context.contentId,\n        \"data-state\": getState(context.open),\n        ...triggerProps,\n        ref: composedTriggerRef,\n        onClick: composeEventHandlers(props.onClick, context.onOpenToggle)\n      }\n    );\n    return context.hasCustomAnchor ? trigger : /* @__PURE__ */ jsx(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: trigger });\n  }\n);\nPopoverTrigger.displayName = TRIGGER_NAME;\nvar PORTAL_NAME = \"PopoverPortal\";\nvar [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME, {\n  forceMount: void 0\n});\nvar PopoverPortal = (props) => {\n  const { __scopePopover, forceMount, children, container } = props;\n  const context = usePopoverContext(PORTAL_NAME, __scopePopover);\n  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(PortalPrimitive, { asChild: true, container, children }) }) });\n};\nPopoverPortal.displayName = PORTAL_NAME;\nvar CONTENT_NAME = \"PopoverContent\";\nvar PopoverContent = React.forwardRef(\n  (props, forwardedRef) => {\n    const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);\n    const { forceMount = portalContext.forceMount, ...contentProps } = props;\n    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);\n    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });\n  }\n);\nPopoverContent.displayName = CONTENT_NAME;\nvar PopoverContentModal = React.forwardRef(\n  (props, forwardedRef) => {\n    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);\n    const contentRef = React.useRef(null);\n    const composedRefs = useComposedRefs(forwardedRef, contentRef);\n    const isRightClickOutsideRef = React.useRef(false);\n    React.useEffect(() => {\n      const content = contentRef.current;\n      if (content) return hideOthers(content);\n    }, []);\n    return /* @__PURE__ */ jsx(RemoveScroll, { as: Slot, allowPinchZoom: true, children: /* @__PURE__ */ jsx(\n      PopoverContentImpl,\n      {\n        ...props,\n        ref: composedRefs,\n        trapFocus: context.open,\n        disableOutsidePointerEvents: true,\n        onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {\n          event.preventDefault();\n          if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();\n        }),\n        onPointerDownOutside: composeEventHandlers(\n          props.onPointerDownOutside,\n          (event) => {\n            const originalEvent = event.detail.originalEvent;\n            const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n            const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n            isRightClickOutsideRef.current = isRightClick;\n          },\n          { checkForDefaultPrevented: false }\n        ),\n        onFocusOutside: composeEventHandlers(\n          props.onFocusOutside,\n          (event) => event.preventDefault(),\n          { checkForDefaultPrevented: false }\n        )\n      }\n    ) });\n  }\n);\nvar PopoverContentNonModal = React.forwardRef(\n  (props, forwardedRef) => {\n    const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);\n    const hasInteractedOutsideRef = React.useRef(false);\n    const hasPointerDownOutsideRef = React.useRef(false);\n    return /* @__PURE__ */ jsx(\n      PopoverContentImpl,\n      {\n        ...props,\n        ref: forwardedRef,\n        trapFocus: false,\n        disableOutsidePointerEvents: false,\n        onCloseAutoFocus: (event) => {\n          props.onCloseAutoFocus?.(event);\n          if (!event.defaultPrevented) {\n            if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();\n            event.preventDefault();\n          }\n          hasInteractedOutsideRef.current = false;\n          hasPointerDownOutsideRef.current = false;\n        },\n        onInteractOutside: (event) => {\n          props.onInteractOutside?.(event);\n          if (!event.defaultPrevented) {\n            hasInteractedOutsideRef.current = true;\n            if (event.detail.originalEvent.type === \"pointerdown\") {\n              hasPointerDownOutsideRef.current = true;\n            }\n          }\n          const target = event.target;\n          const targetIsTrigger = context.triggerRef.current?.contains(target);\n          if (targetIsTrigger) event.preventDefault();\n          if (event.detail.originalEvent.type === \"focusin\" && hasPointerDownOutsideRef.current) {\n            event.preventDefault();\n          }\n        }\n      }\n    );\n  }\n);\nvar PopoverContentImpl = React.forwardRef(\n  (props, forwardedRef) => {\n    const {\n      __scopePopover,\n      trapFocus,\n      onOpenAutoFocus,\n      onCloseAutoFocus,\n      disableOutsidePointerEvents,\n      onEscapeKeyDown,\n      onPointerDownOutside,\n      onFocusOutside,\n      onInteractOutside,\n      ...contentProps\n    } = props;\n    const context = usePopoverContext(CONTENT_NAME, __scopePopover);\n    const popperScope = usePopperScope(__scopePopover);\n    useFocusGuards();\n    return /* @__PURE__ */ jsx(\n      FocusScope,\n      {\n        asChild: true,\n        loop: true,\n        trapped: trapFocus,\n        onMountAutoFocus: onOpenAutoFocus,\n        onUnmountAutoFocus: onCloseAutoFocus,\n        children: /* @__PURE__ */ jsx(\n          DismissableLayer,\n          {\n            asChild: true,\n            disableOutsidePointerEvents,\n            onInteractOutside,\n            onEscapeKeyDown,\n            onPointerDownOutside,\n            onFocusOutside,\n            onDismiss: () => context.onOpenChange(false),\n            children: /* @__PURE__ */ jsx(\n              PopperPrimitive.Content,\n              {\n                \"data-state\": getState(context.open),\n                role: \"dialog\",\n                id: context.contentId,\n                ...popperScope,\n                ...contentProps,\n                ref: forwardedRef,\n                style: {\n                  ...contentProps.style,\n                  // re-namespace exposed content custom properties\n                  ...{\n                    \"--radix-popover-content-transform-origin\": \"var(--radix-popper-transform-origin)\",\n                    \"--radix-popover-content-available-width\": \"var(--radix-popper-available-width)\",\n                    \"--radix-popover-content-available-height\": \"var(--radix-popper-available-height)\",\n                    \"--radix-popover-trigger-width\": \"var(--radix-popper-anchor-width)\",\n                    \"--radix-popover-trigger-height\": \"var(--radix-popper-anchor-height)\"\n                  }\n                }\n              }\n            )\n          }\n        )\n      }\n    );\n  }\n);\nvar CLOSE_NAME = \"PopoverClose\";\nvar PopoverClose = React.forwardRef(\n  (props, forwardedRef) => {\n    const { __scopePopover, ...closeProps } = props;\n    const context = usePopoverContext(CLOSE_NAME, __scopePopover);\n    return /* @__PURE__ */ jsx(\n      Primitive.button,\n      {\n        type: \"button\",\n        ...closeProps,\n        ref: forwardedRef,\n        onClick: composeEventHandlers(props.onClick, () => context.onOpenChange(false))\n      }\n    );\n  }\n);\nPopoverClose.displayName = CLOSE_NAME;\nvar ARROW_NAME = \"PopoverArrow\";\nvar PopoverArrow = React.forwardRef(\n  (props, forwardedRef) => {\n    const { __scopePopover, ...arrowProps } = props;\n    const popperScope = usePopperScope(__scopePopover);\n    return /* @__PURE__ */ jsx(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });\n  }\n);\nPopoverArrow.displayName = ARROW_NAME;\nfunction getState(open) {\n  return open ? \"open\" : \"closed\";\n}\nvar Root2 = Popover;\nvar Anchor2 = PopoverAnchor;\nvar Trigger = PopoverTrigger;\nvar Portal = PopoverPortal;\nvar Content2 = PopoverContent;\nvar Close = PopoverClose;\nvar Arrow2 = PopoverArrow;\nexport {\n  Anchor2 as Anchor,\n  Arrow2 as Arrow,\n  Close,\n  Content2 as Content,\n  Popover,\n  PopoverAnchor,\n  PopoverArrow,\n  PopoverClose,\n  PopoverContent,\n  PopoverPortal,\n  PopoverTrigger,\n  Portal,\n  Root2 as Root,\n  Trigger,\n  createPopoverScope\n};\n//# sourceMappingURL=index.mjs.map\n","\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\n\r\nimport { cn } from \"../../utils/utils\";\r\n\r\nconst Popover = PopoverPrimitive.Root;\r\n\r\nconst PopoverTrigger = PopoverPrimitive.Trigger;\r\n\r\nconst PopoverContent = React.forwardRef<\r\n  React.ElementRef<typeof PopoverPrimitive.Content>,\r\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\r\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\r\n  <PopoverPrimitive.Portal>\r\n    <PopoverPrimitive.Content\r\n      ref={ref}\r\n      align={align}\r\n      sideOffset={sideOffset}\r\n      className={cn(\r\n        \"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  </PopoverPrimitive.Portal>\r\n));\r\nPopoverContent.displayName = PopoverPrimitive.Content.displayName;\r\n\r\nexport { Popover, PopoverTrigger, PopoverContent };\r\n"],"names":["Popover","PopperPrimitive.Root","PopperPrimitive.Anchor","PopoverTrigger","PortalPrimitive","PopoverContent","RemoveScroll","PopperPrimitive.Content","PopperPrimitive.Arrow","PopoverPrimitive.Root","PopoverPrimitive.Trigger","PopoverPrimitive.Portal","PopoverPrimitive.Content"],"mappings":"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","x_google_ignoreList":[0]}

package/lib/components/ConfirmationModalDialog.tsx

@@ -61,7 +61,7 @@ export function ConfirmationModalDialog({
               <FaRegTrashAlt className="w-6 h-6 left-[12px] top-[12px] absolute" />
             </div>
             <div className="self-stretch h-16 flex-col justify-start items-start gap-1 flex">
-              <div className="self-stretch text-gray-900 text-lg font-semibold font-['Inter'] leading-7">
+              <div className="self-stretch text-muted-foreground text-lg font-semibold font-['Inter'] leading-7">
                 {title}
               </div>
               <div className="self-stretch text-slate-600 text-sm font-normal font-['Open Sans'] leading-tight">

package/lib/components/Modal.tsx

@@ -41,7 +41,7 @@ export function Modal({
               <FaRegTrashAlt className="w-6 h-6 left-[12px] top-[12px] absolute" />
             </div>
             <div className="self-stretch h-16 flex-col justify-start items-start gap-1 flex">
-              <div className="self-stretch text-gray-900 text-lg font-semibold font-['Inter'] leading-7">
+              <div className="self-stretch text-muted-foreground text-lg font-semibold font-['Inter'] leading-7">
                 {title}
               </div>
               <div className="self-stretch text-slate-600 text-sm font-normal font-['Open Sans'] leading-tight">

package/lib/components/datatable/DataTable.tsx

@@ -352,7 +352,7 @@ function DataTable<T extends DataTableInternalItems>({
                       className={`px-5 py-2
                    ${
                      colIndex == 0
-                       ? " font-medium text-gray-900"
+                       ? " font-medium text-muted-foreground"
                        : " text-gray-700"
                    } ${classes}`}
                     >

package/lib/components/datatable/DataTableServer.tsx

@@ -31,6 +31,7 @@ import SelectField from "../form/SelectField";
 import InputField from "../form/InputField";
 import { Resizable } from "./Resizable";
 import { DatatableSettings } from "./DatatableSettings";
+import { MultiSelect } from "../ui/multi-select";
 
 import * as XLSX from "xlsx";
 
@@ -186,12 +187,24 @@ function DataTableServer<T extends DataTableInternalItems>({
       if (currentPage === undefined) return;
       setIsLoading(true);
 
-      //odebrani prazdny filteru
+      //odebrani prazdny filteru a transformace multi-select hodnot
       const filteredMergedFilters = Object.entries(mergedFilters).reduce(
         (acc: Record<string, any>, [key, value]) => {
-          if (value !== null && value !== "") {
-            acc[key] = value;
+          // Skip null and empty string values
+          if (value === null || value === "") {
+            return acc;
           }
+
+          // Handle multi-select values (arrays)
+          if (Array.isArray(value)) {
+            if (value.length > 0) {
+              acc[key] = value.join(",");
+            }
+            return acc;
+          }
+
+          // Handle other values
+          acc[key] = value;
           return acc;
         },
         {}
@@ -199,7 +212,7 @@ function DataTableServer<T extends DataTableInternalItems>({
 
       federationContext.apiClient
         .get(url, {
-          signal: currentAbortController.signal, // Pass the AbortController signal to the request
+          signal: currentAbortController.signal,
           params: {
             ...filteredMergedFilters,
             pageSize: itemsPerPageLocal,
@@ -282,7 +295,6 @@ function DataTableServer<T extends DataTableInternalItems>({
   useEffect(() => {
     const fetchFilterOptions = async (column: DataTableColumn<T>) => {
       if (column.filterOptions) {
-        // if filterOptions is provided, use it directly
         return column.filterOptions;
       } else if (column.filterSource) {
         try {
@@ -291,8 +303,8 @@ function DataTableServer<T extends DataTableInternalItems>({
           );
 
           const options = response.data.map((item: any) => ({
-            value: item[column.filterValueKey as keyof typeof item],
-            label: item[column.filterLabelKey as keyof typeof item],
+            value: item[column.filterValueKey as keyof typeof item]?.toString(),
+            label: item[column.filterLabelKey as keyof typeof item]?.toString(),
           }));
           return options;
         } catch (error) {
@@ -303,12 +315,14 @@ function DataTableServer<T extends DataTableInternalItems>({
         return [];
       }
     };
+
     const updateFilterOptions = async () => {
       const newFilterOptions: Record<string, any[]> = {};
 
       for (const column of columns) {
         if (
-          column.filterType === "select" &&
+          (column.filterType === "select" ||
+            column.filterType === "multi-select") &&
           (column.filterSource || column.filterOptions) &&
           column.filterValueKey &&
           column.filterLabelKey &&
@@ -316,11 +330,13 @@ function DataTableServer<T extends DataTableInternalItems>({
         ) {
           const options = await fetchFilterOptions(column);
 
-          if (options) {
+          if (options && column.filterType === "select") {
             newFilterOptions[column.filterParam as string] = [
               { value: "", label: "" },
               ...options,
             ];
+          } else if (options && column.filterType === "multi-select") {
+            newFilterOptions[column.filterParam as string] = options;
           }
         }
       }
@@ -428,7 +444,7 @@ function DataTableServer<T extends DataTableInternalItems>({
   // Pagination display logic
   const paginationDisplay = `Strana ${(currentPage || 0) + 1} z ${data?.totalPages || 1}`;
 
-  const filterHandler = (filterParam: keyof T, value: string) => {
+  const filterHandler = (filterParam: keyof T, value: string | string[]) => {
     setColumnFilters((prev) => ({ ...prev, [filterParam]: value }));
     setCurrentPage(0);
   };
@@ -738,7 +754,6 @@ function DataTableServer<T extends DataTableInternalItems>({
                             >
                               {filterType === "select" ? (
                                 <SelectField
-                                  //  label={header}
                                   key={JSON.stringify(mergedFilters)}
                                   name={String(key) + "_filter"}
                                   onInputChange={(e) =>
@@ -755,16 +770,37 @@ function DataTableServer<T extends DataTableInternalItems>({
                                     mergedFilters?.[String(filterParam)] ?? ""
                                   }
                                   clearable
-                                  className=" px-0"
+                                  className="px-0"
                                   placeholder={"Zadejte filtr"}
                                   rounded={true}
                                   disabled={Object.keys(
                                     (filters as object) || {}
                                   ).includes(String(filterParam))}
                                 />
+                              ) : filterType === "multi-select" ? (
+                                <MultiSelect
+                                  key={JSON.stringify(mergedFilters)}
+                                  options={
+                                    filterOptions[String(filterParam)] || []
+                                  }
+                                  onChange={(values) =>
+                                    filterHandler(
+                                      filterParam as keyof T,
+                                      values
+                                    )
+                                  }
+                                  value={
+                                    mergedFilters?.[String(filterParam)] || []
+                                  }
+                                  placeholder={"Zadejte filtr"}
+                                  className="px-0"
+                                  disabled={Object.keys(
+                                    (filters as object) || {}
+                                  ).includes(String(filterParam))}
+                                  variant="secondary"
+                                />
                               ) : filterType === "dateRange" ? (
                                 <DateRangeField
-                                  //    label={header}
                                   key={JSON.stringify(mergedFilters)}
                                   name={String(filterParam)}
                                   nameEnd={String(filterParam2)}
@@ -793,7 +829,6 @@ function DataTableServer<T extends DataTableInternalItems>({
                                 />
                               ) : filterType === "date" ? (
                                 <DateField
-                                  //    label={header}
                                   key={JSON.stringify(mergedFilters)}
                                   name={String(filterParam)}
                                   onInputChange={(e) =>
@@ -816,7 +851,6 @@ function DataTableServer<T extends DataTableInternalItems>({
                                 />
                               ) : filterType === "text" ? (
                                 <InputField
-                                  //    label={header}
                                   key={filterParam}
                                   name={String(key) + "_filter"}
                                   onInputChange={(e) =>
@@ -882,7 +916,7 @@ function DataTableServer<T extends DataTableInternalItems>({
                           }
                           className={`px-3 py-2 ${rowAction ? "cursor-pointer" : ""}  ${
                             colIndex === 0
-                              ? "font-medium text-gray-900"
+                              ? "font-medium text-muted-foreground"
                               : "text-gray-700"
                           } ${classes || ""}`}
                         >
@@ -898,7 +932,7 @@ function DataTableServer<T extends DataTableInternalItems>({
                               .map((action, actionIndex) => (
                                 <div
                                   key={`${rowIndex}-${colIndex}-${actionIndex}`}
-                                  className="flex inline-flex align-middle"
+                                  className="inline-flex align-middle"
                                 >
                                   {action.icon && (
                                     <Button

package/lib/components/form/AutocompleteSearchBar.tsx

@@ -401,19 +401,19 @@ const SearchInput: React.FC<SearchInputProps> = ({
       )}
       {isFocused && !isLoading && (
         <MdExpandLess
-          className="material-icons absolute right-0 cursor-pointer text-gray-900 lext-lg"
+          className="material-icons absolute right-0 cursor-pointer text-muted-foreground lext-lg"
           onClick={onBlur}
         />
       )}
       {!isFocused && !isLoading && (
         <MdExpandMore
-          className="material-icons absolute right-0 cursor-pointer text-gray-900 lext-lg"
+          className="material-icons absolute right-0 cursor-pointer text-muted-foreground lext-lg"
           onClick={handleExpandMoreClick}
         />
       )}
       {value && clearable && !isLoading && (
         <MdClose
-          className="material-icons absolute right-6 cursor-pointer text-gray-900 lext-lg"
+          className="material-icons absolute right-6 cursor-pointer text-muted-foreground lext-lg"
           onClick={handleClearQuery}
         />
       )}

package/lib/components/form/DateRangeField.tsx

@@ -83,14 +83,14 @@ export default function DateRangeField({
             inputClassName={(className) => {
               return (
                 className +
-                `  focus:!ring-indigo-200 focus:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? " rounded-lg " : " !rounded-none "} outline-none shadow-none `
+                `  focus:!ring-indigo-200 focus:!border-indigo-300  focus:ring-4 border !border-gray-200 !pr-8 !pl-[8px] font-normal ${rounded ? " rounded-lg " : " !rounded-none "} outline-none shadow-none  placeholder-muted-foreground`
               );
             }}
             containerClassName={(className) => {
               return className + " ";
             }}
             separator={"-"}
-            toggleClassName="absolute rounded-r-lg right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-80 disabled:cursor-not-allowed text-gray-900"
+            toggleClassName="absolute rounded-r-lg right-0 h-full px-3 text-gray-400 focus:outline-none disabled:opacity-80 disabled:cursor-not-allowed text-muted-foreground"
             {...rest}
           />
         </div>