@wallarm-org/design-system 0.87.0 → 0.87.1

package/dist/components/Popover/PopoverContent.js

@@ -1,12 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Popover, usePopoverContext } from "@ark-ui/react";
 import { Portal } from "@ark-ui/react/portal";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
-import { ScrollArea, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
-import { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_HEIGHT, POPOVER_MIN_WIDTH } from "./constants.js";
-const PopoverContent = ({ children, minHeight = POPOVER_MIN_HEIGHT, maxHeight = POPOVER_MAX_HEIGHT, minWidth = POPOVER_MIN_WIDTH, maxWidth = POPOVER_MAX_WIDTH, className, 'data-testid': testIdProp, ...rest })=>{
+import { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_WIDTH } from "./constants.js";
+const PopoverContent = ({ children, minHeight, maxHeight = POPOVER_MAX_HEIGHT, minWidth = POPOVER_MIN_WIDTH, maxWidth = POPOVER_MAX_WIDTH, className, 'data-testid': testIdProp, ...rest })=>{
     const testId = useTestId('content', testIdProp);
     const { getContentProps } = usePopoverContext();
     const { id } = getContentProps();
@@ -28,21 +27,8 @@ const PopoverContent = ({ children, minHeight = POPOVER_MIN_HEIGHT, maxHeight =
                 id: id,
                 "data-testid": testId,
                 style: style,
-                className: cn('flex flex-col', 'min-w-(--popover-min-width)', 'max-w-[clamp(var(--popover-min-width),var(--available-width),var(--popover-max-width))]', 'min-h-(--popover-min-height)', 'max-h-[clamp(var(--popover-min-height),var(--available-height),var(--popover-max-height))]', 'p-12 bg-bg-surface-2 rounded-12 border border-border-primary-light shadow-md text-text-primary', 'z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]', '[&_[data-part=viewport]]:overscroll-contain', 'animate-in fade-in-0 zoom-in-95 origin-[--radix-tooltip-content-transform-origin]', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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),
-                asChild: true,
-                children: /*#__PURE__*/ jsxs(ScrollArea, {
-                    ids: {
-                        root: id
-                    },
-                    children: [
-                        /*#__PURE__*/ jsx(ScrollAreaViewport, {
-                            children: /*#__PURE__*/ jsx(ScrollAreaContent, {
-                                children: children
-                            })
-                        }),
-                        /*#__PURE__*/ jsx(ScrollAreaScrollbar, {})
-                    ]
-                })
+                className: cn('flex flex-col overflow-auto', 'min-w-(--popover-min-width)', 'max-w-[clamp(var(--popover-min-width),var(--available-width),var(--popover-max-width))]', 'min-h-(--popover-min-height)', 'max-h-[clamp(var(--popover-min-height,0px),var(--available-height),var(--popover-max-height))]', 'p-12 bg-bg-surface-2 rounded-12 border border-border-primary-light shadow-md text-text-primary', 'z-[calc(var(--drawer-positioner-z-index)+(var(--layer-index,0)*var(--drawer-level-ratio)))]', 'overscroll-contain', 'animate-in fade-in-0 zoom-in-95 origin-[--radix-tooltip-content-transform-origin]', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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),
+                children: children
             })
         })
     });

package/dist/components/Popover/constants.d.ts

@@ -1,5 +1,4 @@
 import type { PopoverSizeDimension } from './types';
-export declare const POPOVER_MIN_HEIGHT: PopoverSizeDimension;
 export declare const POPOVER_MAX_HEIGHT: PopoverSizeDimension;
 export declare const POPOVER_MIN_WIDTH: PopoverSizeDimension;
 export declare const POPOVER_MAX_WIDTH: PopoverSizeDimension;

package/dist/components/Popover/constants.js

@@ -1,5 +1,4 @@
-const POPOVER_MIN_HEIGHT = '156px';
 const POPOVER_MAX_HEIGHT = '560px';
 const POPOVER_MIN_WIDTH = '256px';
 const POPOVER_MAX_WIDTH = '560px';
-export { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_HEIGHT, POPOVER_MIN_WIDTH };
+export { POPOVER_MAX_HEIGHT, POPOVER_MAX_WIDTH, POPOVER_MIN_WIDTH };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.86.0",
-  "generatedAt": "2026-08-07T08:01:47.254Z",
+  "version": "0.87.0",
+  "generatedAt": "2026-08-07T08:50:50.859Z",
   "components": [
     {
       "name": "Accordion",
@@ -47718,8 +47718,7 @@
             {
               "name": "minHeight",
               "type": "PopoverSizeDimension | undefined",
-              "required": false,
-              "defaultValue": "POPOVER_MIN_HEIGHT"
+              "required": false
             },
             {
               "name": "maxHeight",

package/dist/theme/index.css

@@ -35,6 +35,28 @@
     }
 }
 
+/**
+ * Global native-scrollbar styling, matching the ScrollArea component's look
+ * (thin slate thumb, transparent track) for every plain `overflow:
+ * auto/scroll` element that isn't opting into ScrollArea's own JS-drawn
+ * thumb (excluded above via higher-specificity attribute selector). The
+ * thumb is permanently visible: `overflow: auto` already only renders a
+ * scrollbar when content overflows, so that's the only "show it when
+ * scrollable" gate this needs.
+ *
+ * Deliberately uses only the standard `scrollbar-width`/`scrollbar-color`
+ * properties, not `::-webkit-scrollbar-*`. The legacy pseudo-elements would
+ * allow a fully custom (rounded, inset) thumb, but their hover-driven state
+ * changes only repaint reliably when the pointer is over the scrollbar
+ * widget itself, not the rest of the scrollable container — unreliable
+ * enough that a permanently-visible thumb sidesteps the issue entirely.
+ */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--color-badge-slate-dark-alt) 50%, transparent)
+        transparent;
+}
+
 /** Remove when old DS will be removed **/
 :where(:root) {
     cursor: default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.87.0",
+  "version": "0.87.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",