@addsign/moje-agenda-shared-lib 2.0.52 → 2.0.53

package/dist/popover--cBqrVd7.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-CZ8q92_F.js";
+import { h as hideOthers, R as ReactRemoveScroll, u as useFocusGuards, F as FocusScope } from "./Combination-DK1PD8Kn.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-BwPkj4HH.js";
+import { P as Portal$1 } from "./index-BP2JKuhl.js";
+import { P as Presence } from "./index-wO-IHm1z.js";
+import { P as Primitive } from "./index-BDmNRBtj.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--cBqrVd7.js.map

package/dist/popover--cBqrVd7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover--cBqrVd7.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":";;;;;;;;;;;;;AAqBA,IAAI,eAAe;AACnB,IAAI,CAAC,sBAAsB,kBAAkB,IAAI,mBAAmB,cAAc;AAAA,EAChF;AACF,CAAC;AACD,IAAI,iBAAiB,kBAAiB;AACtC,IAAI,CAAC,iBAAiB,iBAAiB,IAAI,qBAAqB,YAAY;AAC5E,IAAIA,YAAU,CAAC,UAAU;AACvB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACT,IAAG;AACJ,QAAM,cAAc,eAAe,cAAc;AACjD,QAAM,aAAa,MAAM,OAAO,IAAI;AACpC,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,KAAK;AAClE,QAAM,CAAC,OAAO,OAAO,OAAO,IAAI,qBAAqB;AAAA,IACnD,MAAM;AAAA,IACN,aAAa;AAAA,IACb,UAAU;AAAA,EACd,CAAG;AACD,SAAuB,oBAAIC,SAAsB,EAAE,GAAG,aAAa,UAA0B;AAAA,IAC3F;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,WAAW,MAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,cAAc,MAAM,YAAY,MAAM,QAAQ,CAAC,aAAa,CAAC,QAAQ,GAAG,CAAC,OAAO,CAAC;AAAA,MACjF;AAAA,MACA,mBAAmB,MAAM,YAAY,MAAM,mBAAmB,IAAI,GAAG,EAAE;AAAA,MACvE,sBAAsB,MAAM,YAAY,MAAM,mBAAmB,KAAK,GAAG,EAAE;AAAA,MAC3E;AAAA,MACA;AAAA,IACD;AAAA,EACF,EAAA,CAAE;AACL;AACAD,UAAQ,cAAc;AACtB,IAAI,cAAc;AAClB,IAAI,gBAAgB,MAAM;AAAA,EACxB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,gBAAgB,GAAG,YAAW,IAAK;AAC3C,UAAM,UAAU,kBAAkB,aAAa,cAAc;AAC7D,UAAM,cAAc,eAAe,cAAc;AACjD,UAAM,EAAE,mBAAmB,qBAAsB,IAAG;AACpD,UAAM,UAAU,MAAM;AACpB;AACA,aAAO,MAAM,qBAAoB;AAAA,IACvC,GAAO,CAAC,mBAAmB,oBAAoB,CAAC;AAC5C,WAAuB,oBAAIE,QAAwB,EAAE,GAAG,aAAa,GAAG,aAAa,KAAK,aAAY,CAAE;AAAA,EACzG;AACH;AACA,cAAc,cAAc;AAC5B,IAAI,eAAe;AACnB,IAAIC,mBAAiB,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,gBAAgB,GAAG,aAAY,IAAK;AAC5C,UAAM,UAAU,kBAAkB,cAAc,cAAc;AAC9D,UAAM,cAAc,eAAe,cAAc;AACjD,UAAM,qBAAqB,gBAAgB,cAAc,QAAQ,UAAU;AAC3E,UAAM,UAA0B;AAAA,MAC9B,UAAU;AAAA,MACV;AAAA,QACE,MAAM;AAAA,QACN,iBAAiB;AAAA,QACjB,iBAAiB,QAAQ;AAAA,QACzB,iBAAiB,QAAQ;AAAA,QACzB,cAAc,SAAS,QAAQ,IAAI;AAAA,QACnC,GAAG;AAAA,QACH,KAAK;AAAA,QACL,SAAS,qBAAqB,MAAM,SAAS,QAAQ,YAAY;AAAA,MAClE;AAAA,IACP;AACI,WAAO,QAAQ,kBAAkB,UAA0B,oBAAID,QAAwB,EAAE,SAAS,MAAM,GAAG,aAAa,UAAU,QAAS,CAAA;AAAA,EAC5I;AACH;AACAC,iBAAe,cAAc;AAC7B,IAAI,cAAc;AAClB,IAAI,CAAC,gBAAgB,gBAAgB,IAAI,qBAAqB,aAAa;AAAA,EACzE,YAAY;AACd,CAAC;AACD,IAAI,gBAAgB,CAAC,UAAU;AAC7B,QAAM,EAAE,gBAAgB,YAAY,UAAU,UAAS,IAAK;AAC5D,QAAM,UAAU,kBAAkB,aAAa,cAAc;AAC7D,SAAuB,oBAAI,gBAAgB,EAAE,OAAO,gBAAgB,YAAY,UAA0B,oBAAI,UAAU,EAAE,SAAS,cAAc,QAAQ,MAAM,UAA0B,oBAAIC,UAAiB,EAAE,SAAS,MAAM,WAAW,SAAQ,CAAE,EAAG,CAAA,EAAG,CAAA;AAC5P;AACA,cAAc,cAAc;AAC5B,IAAI,eAAe;AACnB,IAAIC,mBAAiB,MAAM;AAAA,EACzB,CAAC,OAAO,iBAAiB;AACvB,UAAM,gBAAgB,iBAAiB,cAAc,MAAM,cAAc;AACzE,UAAM,EAAE,aAAa,cAAc,YAAY,GAAG,aAAc,IAAG;AACnE,UAAM,UAAU,kBAAkB,cAAc,MAAM,cAAc;AACpE,WAAuB,oBAAI,UAAU,EAAE,SAAS,cAAc,QAAQ,MAAM,UAAU,QAAQ,QAAwB,oBAAI,qBAAqB,EAAE,GAAG,cAAc,KAAK,aAAc,CAAA,IAAoB,oBAAI,wBAAwB,EAAE,GAAG,cAAc,KAAK,aAAc,CAAA,EAAG,CAAA;AAAA,EAC/Q;AACH;AACAA,iBAAe,cAAc;AAC7B,IAAI,sBAAsB,MAAM;AAAA,EAC9B,CAAC,OAAO,iBAAiB;AACvB,UAAM,UAAU,kBAAkB,cAAc,MAAM,cAAc;AACpE,UAAM,aAAa,MAAM,OAAO,IAAI;AACpC,UAAM,eAAe,gBAAgB,cAAc,UAAU;AAC7D,UAAM,yBAAyB,MAAM,OAAO,KAAK;AACjD,UAAM,UAAU,MAAM;AACpB,YAAM,UAAU,WAAW;AAC3B,UAAI;AAAS,eAAO,WAAW,OAAO;AAAA,IACvC,GAAE,CAAE,CAAA;AACL,WAAuB,oBAAIC,mBAAc,EAAE,IAAI,MAAM,gBAAgB,MAAM,UAA0B;AAAA,MACnG;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,KAAK;AAAA,QACL,WAAW,QAAQ;AAAA,QACnB,6BAA6B;AAAA,QAC7B,kBAAkB,qBAAqB,MAAM,kBAAkB,CAAC,UAAU;;AACxE,gBAAM,eAAc;AACpB,cAAI,CAAC,uBAAuB;AAAS,0BAAQ,WAAW,YAAnB,mBAA4B;AAAA,QAC3E,CAAS;AAAA,QACD,sBAAsB;AAAA,UACpB,MAAM;AAAA,UACN,CAAC,UAAU;AACT,kBAAM,gBAAgB,MAAM,OAAO;AACnC,kBAAM,gBAAgB,cAAc,WAAW,KAAK,cAAc,YAAY;AAC9E,kBAAM,eAAe,cAAc,WAAW,KAAK;AACnD,mCAAuB,UAAU;AAAA,UAClC;AAAA,UACD,EAAE,0BAA0B,MAAO;AAAA,QACpC;AAAA,QACD,gBAAgB;AAAA,UACd,MAAM;AAAA,UACN,CAAC,UAAU,MAAM,eAAgB;AAAA,UACjC,EAAE,0BAA0B,MAAO;AAAA,QACpC;AAAA,MACF;AAAA,IACF,EAAA,CAAE;AAAA,EACJ;AACH;AACA,IAAI,yBAAyB,MAAM;AAAA,EACjC,CAAC,OAAO,iBAAiB;AACvB,UAAM,UAAU,kBAAkB,cAAc,MAAM,cAAc;AACpE,UAAM,0BAA0B,MAAM,OAAO,KAAK;AAClD,UAAM,2BAA2B,MAAM,OAAO,KAAK;AACnD,WAAuB;AAAA,MACrB;AAAA,MACA;AAAA,QACE,GAAG;AAAA,QACH,KAAK;AAAA,QACL,WAAW;AAAA,QACX,6BAA6B;AAAA,QAC7B,kBAAkB,CAAC,UAAU;;AAC3B,sBAAM,qBAAN,+BAAyB;AACzB,cAAI,CAAC,MAAM,kBAAkB;AAC3B,gBAAI,CAAC,wBAAwB;AAAS,4BAAQ,WAAW,YAAnB,mBAA4B;AAClE,kBAAM,eAAc;AAAA,UACrB;AACD,kCAAwB,UAAU;AAClC,mCAAyB,UAAU;AAAA,QACpC;AAAA,QACD,mBAAmB,CAAC,UAAU;;AAC5B,sBAAM,sBAAN,+BAA0B;AAC1B,cAAI,CAAC,MAAM,kBAAkB;AAC3B,oCAAwB,UAAU;AAClC,gBAAI,MAAM,OAAO,cAAc,SAAS,eAAe;AACrD,uCAAyB,UAAU;AAAA,YACpC;AAAA,UACF;AACD,gBAAM,SAAS,MAAM;AACrB,gBAAM,mBAAkB,aAAQ,WAAW,YAAnB,mBAA4B,SAAS;AAC7D,cAAI;AAAiB,kBAAM;AAC3B,cAAI,MAAM,OAAO,cAAc,SAAS,aAAa,yBAAyB,SAAS;AACrF,kBAAM,eAAc;AAAA,UACrB;AAAA,QACF;AAAA,MACF;AAAA,IACP;AAAA,EACG;AACH;AACA,IAAI,qBAAqB,MAAM;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACJ,IAAG;AACJ,UAAM,UAAU,kBAAkB,cAAc,cAAc;AAC9D,UAAM,cAAc,eAAe,cAAc;AACjD;AACA,WAAuB;AAAA,MACrB;AAAA,MACA;AAAA,QACE,SAAS;AAAA,QACT,MAAM;AAAA,QACN,SAAS;AAAA,QACT,kBAAkB;AAAA,QAClB,oBAAoB;AAAA,QACpB,UAA0B;AAAA,UACxB;AAAA,UACA;AAAA,YACE,SAAS;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,MAAM,QAAQ,aAAa,KAAK;AAAA,YAC3C,UAA0B;AAAA,cACxBC;AAAAA,cACA;AAAA,gBACE,cAAc,SAAS,QAAQ,IAAI;AAAA,gBACnC,MAAM;AAAA,gBACN,IAAI,QAAQ;AAAA,gBACZ,GAAG;AAAA,gBACH,GAAG;AAAA,gBACH,KAAK;AAAA,gBACL,OAAO;AAAA,kBACL,GAAG,aAAa;AAAA;AAAA,kBAEhB,GAAG;AAAA,oBACD,4CAA4C;AAAA,oBAC5C,2CAA2C;AAAA,oBAC3C,4CAA4C;AAAA,oBAC5C,iCAAiC;AAAA,oBACjC,kCAAkC;AAAA,kBACnC;AAAA,gBACF;AAAA,cACF;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACP;AAAA,EACG;AACH;AACA,IAAI,aAAa;AACd,IAAC,eAAe,MAAM;AAAA,EACvB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,gBAAgB,GAAG,WAAU,IAAK;AAC1C,UAAM,UAAU,kBAAkB,YAAY,cAAc;AAC5D,WAAuB;AAAA,MACrB,UAAU;AAAA,MACV;AAAA,QACE,MAAM;AAAA,QACN,GAAG;AAAA,QACH,KAAK;AAAA,QACL,SAAS,qBAAqB,MAAM,SAAS,MAAM,QAAQ,aAAa,KAAK,CAAC;AAAA,MAC/E;AAAA,IACP;AAAA,EACG;AACH;AACA,aAAa,cAAc;AAC3B,IAAI,aAAa;AACjB,IAAI,eAAe,MAAM;AAAA,EACvB,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,gBAAgB,GAAG,WAAU,IAAK;AAC1C,UAAM,cAAc,eAAe,cAAc;AACjD,WAAuB,oBAAIC,OAAuB,EAAE,GAAG,aAAa,GAAG,YAAY,KAAK,aAAY,CAAE;AAAA,EACvG;AACH;AACA,aAAa,cAAc;AAC3B,SAAS,SAAS,MAAM;AACtB,SAAO,OAAO,SAAS;AACzB;AACA,IAAI,QAAQR;AAEZ,IAAI,UAAUG;AACd,IAAI,SAAS;AACb,IAAI,WAAWE;AClSf,MAAM,UAAUI;AAEhB,MAAM,iBAAiBC;AAEvB,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAAG,QAC3D,oBAAAC,QAAA,EACC,UAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IACF;AAAA,IACC,GAAG;AAAA,EAAA;AACN,EAAA,CACF,CACD;AACD,eAAe,cAAcA,SAAyB;","x_google_ignoreList":[0]}

package/lib/components/datatable/DataTableServer.tsx

@@ -28,11 +28,17 @@ import {
   MdOutlineUnfoldMore,
   MdSearch,
 } from "react-icons/md";
-import SelectField from "../form/SelectField";
-import InputField from "../form/InputField";
+import { Input } from "../ui/input";
 import { Resizable } from "./Resizable";
 import { DatatableSettings } from "./DatatableSettings";
 import { MultiSelect } from "../ui/multi-select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 
 import * as XLSX from "xlsx";
 
@@ -339,9 +345,16 @@ function DataTableServer<T extends DataTableInternalItems>({
           const options = await fetchFilterOptions(column);
 
           if (options && column.filterType === "select") {
+            // Filter out empty values and add a "clear" option
+            const filteredOptions = options.filter(
+              (option: IOptionItem) =>
+                option.value !== null &&
+                option.value !== undefined &&
+                option.value !== ""
+            );
             newFilterOptions[column.filterParam as string] = [
-              { value: "", label: "" },
-              ...options,
+              { value: "__clear__", label: "Všechny" },
+              ...filteredOptions,
             ];
           } else if (options && column.filterType === "multi-select") {
             newFilterOptions[column.filterParam as string] = options;
@@ -678,10 +691,8 @@ function DataTableServer<T extends DataTableInternalItems>({
     };
   }, [updateSyncWidth, data, isLoading]);
 
-  const handleItemsPerPageChange = (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    const selectedItemsPerPage = Number(event.target.value);
+  const handleItemsPerPageChange = (value: string) => {
+    const selectedItemsPerPage = Number(value);
     setItemsPerPageLocal(selectedItemsPerPage);
     setCurrentPage(0); // Reset the current page to 0 when changing items per page
   };
@@ -837,32 +848,57 @@ function DataTableServer<T extends DataTableInternalItems>({
                             <div
                               className="p-0 m-0 pb-2"
                               onClick={(e) => e.stopPropagation()}
+                              data-cy={"datatable-filter-container-" + id + "-" + String(key)}	
                             >
                               {filterType === "select" ? (
-                                <SelectField
-                                  //     key={JSON.stringify(mergedFilters)}
-                                  name={String(key) + "_filter"}
-                                  onInputChange={(e) =>
-                                    filterHandler(
-                                      filterParam as keyof T,
-                                      e.target.value
-                                    )
-                                  }
-                                  type={filterType}
-                                  options={
-                                    filterOptions[String(filterParam)] || []
-                                  }
+                                <Select
+                                  onValueChange={(value) => {
+                                    if (value === "__clear__") {
+                                      filterHandler(filterParam as keyof T, "");
+                                    } else {
+                                      filterHandler(
+                                        filterParam as keyof T,
+                                        value
+                                      );
+                                    }
+                                  }}
                                   value={
-                                    mergedFilters?.[String(filterParam)] ?? ""
+                                    mergedFilters?.[
+                                      String(filterParam)
+                                    ]?.toString() || "__clear__"
                                   }
-                                  clearable
-                                  className="px-0"
-                                  placeholder={"Zadejte filtr"}
-                                  rounded={true}
+                             
                                   disabled={Object.keys(
                                     (filters as object) || {}
                                   ).includes(String(filterParam))}
-                                />
+                                >
+                                  <SelectTrigger
+                                  
+                                    className="flex-1 w-full px-2 font-normal placeholder-muted-foreground"
+                                  >
+                                    <SelectValue placeholder="Zadejte filtr" />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    {filterOptions[String(filterParam)]
+                                      ?.filter(
+                                        (option: IOptionItem) =>
+                                          option.value !== null &&
+                                          option.value !== undefined &&
+                                          option.value !== ""
+                                      )
+                                      ?.map((option: IOptionItem) => (
+                                        <SelectItem
+                                          key={option.value}
+                                          value={
+                                            option.value?.toString() ||
+                                            "unknown"
+                                          }
+                                        >
+                                          {option.label}
+                                        </SelectItem>
+                                      ))}
+                                  </SelectContent>
+                                </Select>
                               ) : filterType === "multi-select" ? (
                                 <MultiSelect
                                   //    key={JSON.stringify(mergedFilters)}
@@ -885,7 +921,7 @@ function DataTableServer<T extends DataTableInternalItems>({
                                   ).includes(String(filterParam))}
                                   variant="secondary"
                                   maxCount={0}
-                                />
+                                 />
                               ) : filterType === "dateRange" ? (
                                 <DateRangeField
                                   //    key={JSON.stringify(mergedFilters)}
@@ -937,16 +973,13 @@ function DataTableServer<T extends DataTableInternalItems>({
                                   ).includes(String(filterParam))}
                                 />
                               ) : filterType === "text" ? (
-                                <InputField
-                                  // key={filterParam}
-                                  name={String(key) + "_filter"}
-                                  onInputChange={(e) =>
+                                <Input
+                                  onChange={(e) =>
                                     filterHandler(
                                       filterParam as keyof T,
                                       e.target.value
                                     )
                                   }
-                                  type={filterType}
                                   value={
                                     mergedFilters?.[String(filterParam)] || ""
                                   }
@@ -954,8 +987,8 @@ function DataTableServer<T extends DataTableInternalItems>({
                                     (filters as object) || {}
                                   ).includes(String(filterParam))}
                                   clearable
-                                  className=" min-w-[100px] px-0 "
-                                  rounded={true}
+                                  className="min-w-[100px] px-2 font-normal                 placeholder-muted-foreground
+"
                                   placeholder={"Zadejte filtr"}
                                   debounceTimeout={1000}
                                 />
@@ -1121,13 +1154,24 @@ function DataTableServer<T extends DataTableInternalItems>({
               <span className=" whitespace-nowrap flex-grow">
                 Počet řádků na stránku:
               </span>
-              <SelectField
-                name="itemsPerPage"
-                onInputChange={handleItemsPerPageChange}
-                className="!w-[100px]"
-                options={itemsPerPageOptions || defaultItemsPerPageOptions}
-                value={itemsPerPageLocal}
-              />
+              <Select
+                onValueChange={handleItemsPerPageChange}
+                value={itemsPerPageLocal?.toString()}
+              >
+                <SelectTrigger className="w-[100px]">
+                  <SelectValue placeholder="Vyberte počet" />
+                </SelectTrigger>
+                <SelectContent>
+                  {itemsPerPageOptions?.map((option) => (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value?.toString() || ""}
+                    >
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
           </div>
         )}

package/lib/components/ui/select.tsx

@@ -21,7 +21,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-ring placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-ring placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 text-left",
       className
     )}
     {...props}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@addsign/moje-agenda-shared-lib",
   "private": false,
-  "version": "2.0.52",
+  "version": "2.0.53",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",