@wallarm-org/design-system 0.86.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/components/Select/SelectEmptyState.d.ts

@@ -1,2 +1,5 @@
-import type { FC } from 'react';
-export declare const SelectEmptyState: FC;
+import type { FC, ReactNode } from 'react';
+export interface SelectEmptyStateProps {
+    description?: ReactNode;
+}
+export declare const SelectEmptyState: FC<SelectEmptyStateProps>;

package/dist/components/Select/SelectEmptyState.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { EmptyState, EmptyStateDescription, EmptyStateMessage } from "../EmptyState/index.js";
-const SelectEmptyState = ()=>/*#__PURE__*/ jsx(EmptyState, {
+const SelectEmptyState = ({ description = 'No results' })=>/*#__PURE__*/ jsx(EmptyState, {
         type: "no-results",
         children: /*#__PURE__*/ jsx(EmptyStateMessage, {
             children: /*#__PURE__*/ jsx(EmptyStateDescription, {
-                children: "No results"
+                children: description
             })
         })
     });

package/dist/components/Select/index.d.ts

@@ -4,6 +4,7 @@ export { SelectButton } from './SelectButton';
 export { SelectButtonTag, SelectButtonTagValue } from './SelectButtonTag';
 export { SelectClearTrigger } from './SelectClearTrigger';
 export { SelectContent } from './SelectContent';
+export { SelectEmptyState, type SelectEmptyStateProps } from './SelectEmptyState';
 export { SelectFooter } from './SelectFooter';
 export { SelectGroup } from './SelectGroup';
 export { SelectGroupLabel } from './SelectGroupLabel';
@@ -17,3 +18,4 @@ export { SelectPositioner } from './SelectPositioner';
 export { SelectSearchInput, type SelectSearchInputProps } from './SelectSearchInput';
 export { SelectSeparator, type SelectSeparatorProps } from './SelectSeparator';
 export type { SelectDataItem } from './types';
+export { type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './useSelectSearch';

package/dist/components/Select/index.js

@@ -4,6 +4,7 @@ export { SelectButton } from "./SelectButton.js";
 export { SelectButtonTag, SelectButtonTagValue } from "./SelectButtonTag/index.js";
 export { SelectClearTrigger } from "./SelectClearTrigger.js";
 export { SelectContent } from "./SelectContent.js";
+export { SelectEmptyState } from "./SelectEmptyState.js";
 export { SelectFooter } from "./SelectFooter.js";
 export { SelectGroup } from "./SelectGroup.js";
 export { SelectGroupLabel } from "./SelectGroupLabel.js";
@@ -16,3 +17,4 @@ export { SelectOptionText } from "./SelectOptionText.js";
 export { SelectPositioner } from "./SelectPositioner.js";
 export { SelectSearchInput } from "./SelectSearchInput.js";
 export { SelectSeparator } from "./SelectSeparator.js";
+export { useSelectSearch } from "./useSelectSearch.js";

package/dist/components/Select/useSelectSearch.d.ts

@@ -0,0 +1,16 @@
+import type { CollectionItem, ListCollection } from '@ark-ui/react/collection';
+export interface UseSelectSearchOptions<T extends CollectionItem> {
+    /**
+     * Overrides the default case-insensitive substring match against the
+     * item's stringified label. Receives the same `itemString` `collection`
+     * already computes via `itemToString`, plus the raw item for matching on
+     * other fields (e.g. `description`).
+     */
+    filterFn?: (itemString: string, item: T, query: string) => boolean;
+}
+export interface UseSelectSearchResult<T extends CollectionItem> {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    filteredCollection: ListCollection<T>;
+}
+export declare const useSelectSearch: <T extends CollectionItem>(collection: ListCollection<T>, options?: UseSelectSearchOptions<T>) => UseSelectSearchResult<T>;

package/dist/components/Select/useSelectSearch.js

@@ -0,0 +1,20 @@
+import { useMemo, useState } from "react";
+const defaultFilterFn = (itemString, query)=>itemString.toLowerCase().includes(query.toLowerCase());
+const useSelectSearch = (collection, options)=>{
+    const [searchValue, setSearchValue] = useState('');
+    const filterFn = options?.filterFn;
+    const filteredCollection = useMemo(()=>{
+        if (!searchValue) return collection;
+        return collection.filter((itemString, _index, item)=>filterFn ? filterFn(itemString, item, searchValue) : defaultFilterFn(itemString, searchValue));
+    }, [
+        collection,
+        searchValue,
+        filterFn
+    ]);
+    return {
+        searchValue,
+        onSearchChange: setSearchValue,
+        filteredCollection
+    };
+};
+export { useSelectSearch };

package/dist/index.d.ts

@@ -62,7 +62,7 @@ export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type Respon
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
-export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, } from './components/Select';
+export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectEmptyState, type SelectEmptyStateProps, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './components/Select';
 export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, type SelectionContextValue, SelectionItem, type SelectionItemProps, type SelectionProps, useSelectionContext, } from './components/Selection';
 export { Separator, type SeparatorProps } from './components/Separator';
 export { Skeleton, type SkeletonProps } from './components/Skeleton';

package/dist/index.js

@@ -51,7 +51,7 @@ export { RESPONSE_CODE_COLOR, ResponseCode, getResponseCodeCategory } from "./co
 export { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
 export { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
-export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection } from "./components/Select/index.js";
+export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectEmptyState, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection, useSelectSearch } from "./components/Select/index.js";
 export { Selection, SelectionAll, SelectionBulkBar, SelectionItem, useSelectionContext } from "./components/Selection/index.js";
 export { Separator } from "./components/Separator/index.js";
 export { Skeleton } from "./components/Skeleton/index.js";

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.85.1",
-  "generatedAt": "2026-08-07T06:49:22.264Z",
+  "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",
@@ -53952,6 +53951,17 @@
       "props": [],
       "variants": [],
       "subComponents": [
+        {
+          "name": "SelectEmptyState",
+          "props": [
+            {
+              "name": "description",
+              "type": "ReactNode",
+              "required": false,
+              "defaultValue": "No results"
+            }
+          ]
+        },
         {
           "name": "SelectSearchInput",
           "props": [
@@ -54554,7 +54564,7 @@
         },
         {
           "name": "WithSearch",
-          "code": "() => {\n  const [searchValue, setSearchValue] = useState<string>('');\n\n  const collection = createListCollection({\n    items: skillsWithoutIcons,\n    groupBy: item => item.category ?? '',\n    itemToString: item => item.label,\n  });\n\n  return (\n    <div className='w-300'>\n      <Select collection={collection}>\n        <SelectButton />\n\n        <SelectPositioner>\n          <SelectHeader>\n            <SelectSearchInput value={searchValue} onChange={setSearchValue} />\n          </SelectHeader>\n\n          <SelectContent>\n            {collection\n              .filter(skill => skill.toLowerCase().includes(searchValue.toLowerCase()))\n              .group()\n              .map(([category, group], index) => (\n                <SelectGroup key={category}>\n                  <SelectGroupLabel>\n                    {category}\n                    {index === 0 && <SelectClearTrigger>Clear all</SelectClearTrigger>}\n                  </SelectGroupLabel>\n                  {group.map(skill => (\n                    <SelectOption key={skill.value} item={skill}>\n                      <SelectOptionText>{skill.label}</SelectOptionText>\n                      {skill.description && (\n                        <SelectOptionDescription>{skill.description}</SelectOptionDescription>\n                      )}\n                      <SelectOptionIndicator />\n                    </SelectOption>\n                  ))}\n                </SelectGroup>\n              ))}\n          </SelectContent>\n\n          <SelectFooter>\n            <HStack justify='between'>\n              <Button variant='ghost' color='neutral' size='small'>\n                <SquareArrowOutUpRight />\n                See all\n              </Button>\n\n              <HStack justify='end'>\n                <Button variant='ghost' color='neutral' size='small'>\n                  Cancel\n                </Button>\n\n                <Button variant='primary' color='brand' size='small'>\n                  Apply\n                </Button>\n              </HStack>\n            </HStack>\n          </SelectFooter>\n        </SelectPositioner>\n      </Select>\n    </div>\n  );\n}"
+          "code": "() => {\n  const collection = createListCollection({\n    items: skillsWithoutIcons,\n    groupBy: item => item.category ?? '',\n    itemToString: item => item.label,\n  });\n\n  const { searchValue, onSearchChange, filteredCollection } = useSelectSearch(collection);\n\n  return (\n    <div className='w-300'>\n      <Select collection={collection}>\n        <SelectButton />\n\n        <SelectPositioner>\n          <SelectHeader>\n            <SelectSearchInput value={searchValue} onChange={onSearchChange} />\n          </SelectHeader>\n\n          <SelectContent>\n            {filteredCollection.size === 0 ? (\n              <SelectEmptyState description={`No results for \"${searchValue}\"`} />\n            ) : (\n              filteredCollection.group().map(([category, group], index) => (\n                <SelectGroup key={category}>\n                  <SelectGroupLabel>\n                    {category}\n                    {index === 0 && <SelectClearTrigger>Clear all</SelectClearTrigger>}\n                  </SelectGroupLabel>\n                  {group.map(skill => (\n                    <SelectOption key={skill.value} item={skill}>\n                      <SelectOptionText>{skill.label}</SelectOptionText>\n                      {skill.description && (\n                        <SelectOptionDescription>{skill.description}</SelectOptionDescription>\n                      )}\n                      <SelectOptionIndicator />\n                    </SelectOption>\n                  ))}\n                </SelectGroup>\n              ))\n            )}\n          </SelectContent>\n\n          <SelectFooter>\n            <HStack justify='between'>\n              <Button variant='ghost' color='neutral' size='small'>\n                <SquareArrowOutUpRight />\n                See all\n              </Button>\n\n              <HStack justify='end'>\n                <Button variant='ghost' color='neutral' size='small'>\n                  Cancel\n                </Button>\n\n                <Button variant='primary' color='brand' size='small'>\n                  Apply\n                </Button>\n              </HStack>\n            </HStack>\n          </SelectFooter>\n        </SelectPositioner>\n      </Select>\n    </div>\n  );\n}"
         },
         {
           "name": "WithFormField",

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.86.0",
+  "version": "0.87.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",