@xsolla/xui-b2b-group-select 0.149.0-pr270.1777888548

package/README.md

@@ -0,0 +1,9 @@
+# @xsolla/xui-b2b-group-select
+
+B2B grouped multi-select panel: search, category list (left) with checkboxes and counters, and selectable items (right). Intended for dropdown/popover bodies (e.g. regions and countries).
+
+- **Docs:** [b2b-group-select.md](../../../docs/api/components/b2b-group-select.md)
+- **Storybook:** B2B → Product Components → Group select
+- **Field + panel:** pair with `@xsolla/xui-multi-select` (`dropdownMenu={false}`, shared `value` / `onChange`); use exported **`GROUP_SELECT_MIN_PANEL_WIDTH`** (540) with `menuMinWidth`.
+- **A11y / tests:** landmark regions, list semantics, keyboard on category controls, live empty state; unit tests in `src/__tests__/GroupSelect.test.tsx` (run `yarn test:run` in this package).
+- **React 16 / RN:** `react >= 16.8`; `yarn build:web` and `yarn build:native` both target the shared source (see API doc).

package/native/index.d.mts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type GroupSelectItem = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+type GroupSelectGroup = {
+    id: string;
+    label: string;
+    items: GroupSelectItem[];
+};
+type GroupSelectProps = ThemeOverrideProps & {
+    /** Accessible name for the panel root (`role="region"`). */
+    ariaLabel?: string;
+    /** Category list with nested selectable items */
+    groups: GroupSelectGroup[];
+    /** Selected item ids (flat across all groups) */
+    value: string[];
+    onChange: (nextValue: string[]) => void;
+    /** Controlled active category id */
+    activeGroupId?: string;
+    /** When active category changes (controlled or uncontrolled) */
+    onActiveGroupChange?: (groupId: string) => void;
+    /** Placeholder for search input */
+    searchPlaceholder?: string;
+    /** Message when search/filter yields nothing */
+    emptyMessage?: string;
+    /** Left column width (Figma default 280) */
+    leftColumnWidth?: number;
+    /** Max height for scrollable lists */
+    listMaxHeight?: number;
+    /** Label for bulk-select action when not everything visible is selected */
+    selectAllLabel?: string;
+    /** Label when all visible items are selected */
+    unselectAllLabel?: string;
+};
+
+/** Default `minWidth` of the panel root; keep in sync with MultiSelect external-field default. */
+declare const GROUP_SELECT_MIN_PANEL_WIDTH = 540;
+declare const GroupSelect: React.FC<GroupSelectProps>;
+
+export { GROUP_SELECT_MIN_PANEL_WIDTH, GroupSelect, type GroupSelectGroup, type GroupSelectItem, type GroupSelectProps };

package/native/index.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ThemeOverrideProps } from '@xsolla/xui-core';
+
+type GroupSelectItem = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+type GroupSelectGroup = {
+    id: string;
+    label: string;
+    items: GroupSelectItem[];
+};
+type GroupSelectProps = ThemeOverrideProps & {
+    /** Accessible name for the panel root (`role="region"`). */
+    ariaLabel?: string;
+    /** Category list with nested selectable items */
+    groups: GroupSelectGroup[];
+    /** Selected item ids (flat across all groups) */
+    value: string[];
+    onChange: (nextValue: string[]) => void;
+    /** Controlled active category id */
+    activeGroupId?: string;
+    /** When active category changes (controlled or uncontrolled) */
+    onActiveGroupChange?: (groupId: string) => void;
+    /** Placeholder for search input */
+    searchPlaceholder?: string;
+    /** Message when search/filter yields nothing */
+    emptyMessage?: string;
+    /** Left column width (Figma default 280) */
+    leftColumnWidth?: number;
+    /** Max height for scrollable lists */
+    listMaxHeight?: number;
+    /** Label for bulk-select action when not everything visible is selected */
+    selectAllLabel?: string;
+    /** Label when all visible items are selected */
+    unselectAllLabel?: string;
+};
+
+/** Default `minWidth` of the panel root; keep in sync with MultiSelect external-field default. */
+declare const GROUP_SELECT_MIN_PANEL_WIDTH = 540;
+declare const GroupSelect: React.FC<GroupSelectProps>;
+
+export { GROUP_SELECT_MIN_PANEL_WIDTH, GroupSelect, type GroupSelectGroup, type GroupSelectItem, type GroupSelectProps };