@wallarm-org/design-system 0.30.0-rc-feature-AS-884.4 → 0.30.0

package/dist/components/Drawer/DrawerContent.d.ts

@@ -1,4 +1,4 @@
-import { type FC, type ReactNode, type Ref } from 'react';
+import type { FC, ReactNode, Ref } from 'react';
 export interface DrawerContentProps {
     children: ReactNode;
     asChild?: boolean;

package/dist/components/Drawer/DrawerContent.js

@@ -1,31 +1,22 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
 import { Dialog } from "@ark-ui/react/dialog";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
 import { drawerContentVariants } from "./classes.js";
-import { DrawerContentContext, useDrawerContext } from "./DrawerContext/index.js";
+import { useDrawerContext } from "./DrawerContext/index.js";
 import { DrawerOverlay } from "./DrawerOverlay.js";
 import { DrawerPortal } from "./DrawerPortal.js";
 import { DrawerPositioner } from "./DrawerPositioner.js";
 const DrawerContent = ({ children, asChild, ref })=>{
     const testId = useTestId('content');
     const { width, isResizing, overlay } = useDrawerContext();
-    const contentRef = useRef(null);
-    const setRef = useCallback((node)=>{
-        contentRef.current = node;
-        if ('function' == typeof ref) ref(node);
-        else if (ref) ref.current = node;
-    }, [
-        ref
-    ]);
     return /*#__PURE__*/ jsxs(DrawerPortal, {
         children: [
             overlay && /*#__PURE__*/ jsx(DrawerOverlay, {}),
             /*#__PURE__*/ jsx(DrawerPositioner, {
                 isResizing: isResizing,
                 children: /*#__PURE__*/ jsx(Dialog.Content, {
-                    ref: setRef,
+                    ref: ref,
                     "data-testid": testId,
                     className: cn(drawerContentVariants({
                         isResizing
@@ -34,10 +25,7 @@ const DrawerContent = ({ children, asChild, ref })=>{
                         width
                     },
                     asChild: asChild,
-                    children: /*#__PURE__*/ jsx(DrawerContentContext.Provider, {
-                        value: contentRef,
-                        children: children
-                    })
+                    children: children
                 })
             })
         ]

package/dist/components/Drawer/DrawerContext/index.d.ts

@@ -1,4 +1,3 @@
-export { DrawerContentContext, useOptionalDrawerContentRef } from './DrawerContentContext';
 export { DrawerContext } from './DrawerContext';
 export { DrawerProvider } from './DrawerProvider';
 export type { DrawerContextValue } from './types';

package/dist/components/Drawer/DrawerContext/index.js

@@ -1,5 +1,4 @@
-import { DrawerContentContext, useOptionalDrawerContentRef } from "./DrawerContentContext.js";
 import { DrawerContext } from "./DrawerContext.js";
 import { DrawerProvider } from "./DrawerProvider.js";
 import { useDrawerContext } from "./useDrawerContext.js";
-export { DrawerContentContext, DrawerContext, DrawerProvider, useDrawerContext, useOptionalDrawerContentRef };
+export { DrawerContext, DrawerProvider, useDrawerContext };

package/dist/components/Selection/Selection.js

@@ -70,7 +70,7 @@ const Selection = ({ items, getItemId, value, onChange, className, 'data-testid'
             children: /*#__PURE__*/ jsx("div", {
                 "data-slot": "selection",
                 "data-testid": testId,
-                className: cn('outline-none', className),
+                className: cn('relative outline-none', className),
                 children: children
             })
         })

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBar.d.ts

@@ -1,8 +1,22 @@
 import type { FC, ReactNode } from 'react';
+export type SelectionBulkBarPlacement = 'floating' | 'absolute';
 export interface SelectionBulkBarProps {
     /** Override the toolbar accessible name. Defaults to "Bulk actions". */
     'aria-label'?: string;
     'data-testid'?: string;
+    /**
+     * How the bar is positioned.
+     *
+     * - `'floating'` (default): portaled to `document.body` and pinned to the
+     *   bottom of the viewport with `position: fixed`. Use for page-level
+     *   selection lists.
+     * - `'absolute'`: rendered in place with `position: absolute`. Anchors to
+     *   the nearest positioned ancestor — by default the enclosing `Selection`
+     *   root (which is `position: relative`), so the bar pins to the bottom of
+     *   the selection area. Use this inside a Drawer or any other bounded
+     *   container.
+     */
+    placement?: SelectionBulkBarPlacement;
     children?: ReactNode;
 }
 export declare const SelectionBulkBar: FC<SelectionBulkBarProps>;

package/dist/components/Selection/SelectionBulkBar/SelectionBulkBar.js

@@ -1,40 +1,42 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Portal } from "@ark-ui/react/portal";
 import { Presence } from "@ark-ui/react/presence";
-import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
-import { useOptionalDrawerContentRef } from "../../Drawer/DrawerContext/index.js";
 import { HStack } from "../../Stack/index.js";
+import { selectionBulkBarVariants } from "../classes.js";
 import { useSelectionContext } from "../useSelectionContext.js";
 import { SelectionBulkBarSummary } from "./SelectionBulkBarSummary.js";
-const SelectionBulkBar = ({ 'aria-label': ariaLabel = 'Bulk actions', 'data-testid': testIdProp, children })=>{
+const TEST_ID_SLOT = 'bulk-bar';
+const DEFAULT_ARIA_LABEL = 'Bulk actions';
+const SelectionBulkBar = ({ 'aria-label': ariaLabel = DEFAULT_ARIA_LABEL, 'data-testid': testIdProp, placement = 'floating', children })=>{
     const { selectedIds } = useSelectionContext();
-    const fallbackTestId = useTestId('bulk-bar');
+    const fallbackTestId = useTestId(TEST_ID_SLOT);
     const testId = testIdProp ?? fallbackTestId;
-    const drawerContentRef = useOptionalDrawerContentRef();
-    const isInDrawer = !!drawerContentRef;
-    return /*#__PURE__*/ jsx(Portal, {
-        container: drawerContentRef ?? void 0,
-        children: /*#__PURE__*/ jsx(Presence, {
-            present: selectedIds.size > 0,
-            asChild: true,
-            children: /*#__PURE__*/ jsxs("div", {
-                role: "toolbar",
-                "aria-label": ariaLabel,
-                "data-slot": "selection-bulk-bar",
-                "data-testid": testId,
-                className: cn('z-[200] flex flex-nowrap items-center gap-8', isInDrawer ? 'absolute inset-x-12 bottom-12 justify-between' : 'fixed bottom-32 left-1/2 -translate-x-1/2 w-fit max-w-[calc(100vw-32px)]', 'bg-component-toast-bg rounded-16 shadow-lg', 'pl-12 pr-8 py-8', '[&_button]:shrink-0 [&_button]:whitespace-nowrap', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom data-[state=open]:duration-300', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom data-[state=closed]:duration-150'),
-                children: [
-                    /*#__PURE__*/ jsx(SelectionBulkBarSummary, {}),
-                    /*#__PURE__*/ jsx(HStack, {
-                        gap: 8,
-                        align: "center",
-                        children: children
-                    })
-                ]
-            })
+    const bar = /*#__PURE__*/ jsx(Presence, {
+        present: selectedIds.size > 0,
+        asChild: true,
+        children: /*#__PURE__*/ jsxs("div", {
+            role: "toolbar",
+            "aria-label": ariaLabel,
+            "data-slot": "selection-bulk-bar",
+            "data-testid": testId,
+            className: selectionBulkBarVariants({
+                placement
+            }),
+            children: [
+                /*#__PURE__*/ jsx(SelectionBulkBarSummary, {}),
+                /*#__PURE__*/ jsx(HStack, {
+                    gap: 8,
+                    align: "center",
+                    children: children
+                })
+            ]
         })
     });
+    if ('floating' === placement) return /*#__PURE__*/ jsx(Portal, {
+        children: bar
+    });
+    return bar;
 };
 SelectionBulkBar.displayName = 'SelectionBulkBar';
 export { SelectionBulkBar };

package/dist/components/Selection/SelectionBulkBar/index.d.ts

@@ -1 +1 @@
-export { SelectionBulkBar, type SelectionBulkBarProps } from './SelectionBulkBar';
+export { SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, } from './SelectionBulkBar';

package/dist/components/Selection/classes.d.ts

@@ -1 +1,4 @@
 export declare const selectionItemVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const selectionBulkBarVariants: (props?: ({
+    placement?: "absolute" | "floating" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Selection/classes.js

@@ -1,3 +1,15 @@
 import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
 const selectionItemVariants = cva('flex w-full min-w-0 items-start gap-12');
-export { selectionItemVariants };
+const selectionBulkBarVariants = cva(cn('z-[200] flex w-fit flex-nowrap items-center gap-16', 'bg-component-toast-bg rounded-16 shadow-lg', 'pl-12 pr-8 py-8', '[&_button]:shrink-0 [&_button]:whitespace-nowrap', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom data-[state=open]:duration-300', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom data-[state=closed]:duration-150'), {
+    variants: {
+        placement: {
+            absolute: 'absolute bottom-12 left-1/2 -translate-x-1/2 max-w-[calc(100%-48px)]',
+            floating: 'fixed bottom-32 left-1/2 -translate-x-1/2 max-w-[calc(100vw-32px)]'
+        }
+    },
+    defaultVariants: {
+        placement: 'floating'
+    }
+});
+export { selectionBulkBarVariants, selectionItemVariants };

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

@@ -1,4 +1,4 @@
 export { Selection, type SelectionProps } from './Selection';
 export { SelectionAll, type SelectionAllProps } from './SelectionAll';
-export { SelectionBulkBar, type SelectionBulkBarProps, } from './SelectionBulkBar';
+export { SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, } from './SelectionBulkBar';
 export { SelectionItem, type SelectionItemProps } from './SelectionItem';

package/dist/index.d.ts

@@ -44,7 +44,7 @@ export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaC
 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 { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, } from './components/Select';
-export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarProps, SelectionItem, type SelectionItemProps, type SelectionProps, } from './components/Selection';
+export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, SelectionItem, type SelectionItemProps, type SelectionProps, } from './components/Selection';
 export { Separator, type SeparatorProps } from './components/Separator';
 export { Skeleton, type SkeletonProps } from './components/Skeleton';
 export { SplitButton, type SplitButtonProps } from './components/SplitButton';

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
   "version": "0.29.2",
-  "generatedAt": "2026-04-27T21:07:40.981Z",
+  "generatedAt": "2026-04-28T07:02:22.140Z",
   "components": [
     {
       "name": "Alert",
@@ -23981,7 +23981,16 @@
           "description": "Controlled selection state — array of selected item ids."
         }
       ],
-      "variants": [],
+      "variants": [
+        {
+          "name": "placement",
+          "options": [
+            "absolute",
+            "floating"
+          ],
+          "defaultValue": "floating"
+        }
+      ],
       "subComponents": [
         {
           "name": "SelectionAll",
@@ -23989,7 +23998,14 @@
         },
         {
           "name": "SelectionBulkBar",
-          "props": []
+          "props": [
+            {
+              "name": "placement",
+              "type": "SelectionBulkBarPlacement | undefined",
+              "required": false,
+              "description": "How the bar is positioned.\n\n- `'floating'` (default): portaled to `document.body` and pinned to the\n  bottom of the viewport with `position: fixed`. Use for page-level\n  selection lists.\n- `'absolute'`: rendered in place with `position: absolute`. Anchors to\n  the nearest positioned ancestor — by default the enclosing `Selection`\n  root (which is `position: relative`), so the bar pins to the bottom of\n  the selection area. Use this inside a Drawer or any other bounded\n  container."
+            }
+          ]
         },
         {
           "name": "SelectionItem",
@@ -24045,7 +24061,7 @@
         },
         {
           "name": "InsideDrawer",
-          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Drawer width={720}>\n      <DrawerTrigger asChild>\n        <Button>Open drawer with selection</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerResizeHandle />\n        <DrawerHeader>\n          <DrawerTitle>Clusters</DrawerTitle>\n        </DrawerHeader>\n        <DrawerBody>\n          <Selection items={clusters} getItemId={c => c.id} value={selected} onChange={setSelected}>\n            <VStack gap={16}>\n              <HStack gap={8} align='center'>\n                <SelectionAll />\n                <Text size='sm' color='secondary'>\n                  Select all\n                </Text>\n              </HStack>\n\n              <VStack gap={12}>\n                {clusters.map(c => (\n                  <SelectionItem key={c.id} itemId={c.id}>\n                    <ClusterCard cluster={c} />\n                  </SelectionItem>\n                ))}\n              </VStack>\n            </VStack>\n\n            <SelectionBulkBar>\n              <Button\n                variant='secondary'\n                color='neutral-alt'\n                size='large'\n                onClick={() => alert(`Duplicate ${selected.length}`)}\n              >\n                <Copy /> Duplicate\n              </Button>\n              <Button\n                variant='secondary'\n                color='neutral-alt'\n                size='large'\n                onClick={() => alert(`Move ${selected.length}`)}\n              >\n                <Folder /> Move\n              </Button>\n              <Button\n                variant='secondary'\n                color='destructive'\n                size='large'\n                onClick={() => alert(`Delete ${selected.length}`)}\n              >\n                <Trash2 /> Delete\n              </Button>\n            </SelectionBulkBar>\n          </Selection>\n        </DrawerBody>\n      </DrawerContent>\n    </Drawer>\n  );\n}"
+          "code": "() => {\n  const [selected, setSelected] = useState<string[]>([]);\n\n  return (\n    <Drawer width={720}>\n      <DrawerTrigger asChild>\n        <Button>Open drawer with selection</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <Selection\n          items={clusters}\n          getItemId={c => c.id}\n          value={selected}\n          onChange={setSelected}\n          className='flex min-h-0 flex-1 flex-col'\n        >\n          <DrawerResizeHandle />\n          <DrawerHeader>\n            <DrawerTitle>Clusters</DrawerTitle>\n          </DrawerHeader>\n          <DrawerBody>\n            <VStack gap={16}>\n              <HStack gap={8} align='center'>\n                <SelectionAll />\n                <Text size='sm' color='secondary'>\n                  Select all\n                </Text>\n              </HStack>\n\n              <VStack gap={12}>\n                {clusters.map(c => (\n                  <SelectionItem key={c.id} itemId={c.id}>\n                    <ClusterCard cluster={c} />\n                  </SelectionItem>\n                ))}\n              </VStack>\n            </VStack>\n          </DrawerBody>\n\n          <SelectionBulkBar placement='absolute'>\n            <Button\n              variant='secondary'\n              color='neutral-alt'\n              size='large'\n              onClick={() => alert(`Duplicate ${selected.length}`)}\n            >\n              <Copy /> Duplicate\n            </Button>\n            <Button\n              variant='secondary'\n              color='neutral-alt'\n              size='large'\n              onClick={() => alert(`Move ${selected.length}`)}\n            >\n              <Folder /> Move\n            </Button>\n            <Button\n              variant='secondary'\n              color='destructive'\n              size='large'\n              onClick={() => alert(`Delete ${selected.length}`)}\n            >\n              <Trash2 /> Delete\n            </Button>\n          </SelectionBulkBar>\n        </Selection>\n      </DrawerContent>\n    </Drawer>\n  );\n}"
         }
       ]
     },

package/package.json

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

package/dist/components/Drawer/DrawerContext/DrawerContentContext.d.ts

@@ -1,11 +0,0 @@
-import { type RefObject } from 'react';
-/**
- * Holds a ref to the rendered DrawerContent root element.
- *
- * Descendants that need to portal/anchor against the drawer panel itself
- * (e.g. SelectionBulkBar) should read this — not the broader DrawerContext,
- * which is also active around DrawerTrigger and other ancestors that are
- * outside the panel.
- */
-export declare const DrawerContentContext: import("react").Context<RefObject<HTMLElement | null> | null>;
-export declare const useOptionalDrawerContentRef: () => RefObject<HTMLElement | null> | null;

package/dist/components/Drawer/DrawerContext/DrawerContentContext.js

@@ -1,4 +0,0 @@
-import { createContext, useContext } from "react";
-const DrawerContentContext = createContext(null);
-const useOptionalDrawerContentRef = ()=>useContext(DrawerContentContext);
-export { DrawerContentContext, useOptionalDrawerContentRef };