@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/select-list/helpers.js

@@ -0,0 +1,48 @@
+import { partition as l } from "./utils/partition.js";
+function c(r) {
+  return typeof r == "object" && r !== null && "children" in r && Array.isArray(r.children);
+}
+function d(r) {
+  const t = r[Symbol.iterator]().next();
+  return t.done ? !1 : c(t.value);
+}
+function u(r, n) {
+  const t = Array.from(r), [i, s] = l(
+    t,
+    (e) => n.has(e.id)
+  );
+  return { selectedItems: i, remainingItems: s };
+}
+function m(r) {
+  const n = [];
+  return Array.from(r).forEach((t) => {
+    c(t) && t.children.forEach((i) => {
+      n.push(i);
+    });
+  }), { allItems: n };
+}
+function h(r, n) {
+  const { allItems: t } = m(r), i = t.filter((e) => n.has(e.id)), s = Array.from(r).map((e) => {
+    if (c(e)) {
+      const o = e.children.filter(
+        (a) => !n.has(a.id)
+      );
+      return {
+        ...e,
+        children: o
+      };
+    }
+    return e;
+  }).filter((e) => c(e) && e.children.length > 0);
+  return {
+    selectedItems: i,
+    remainingSections: s
+  };
+}
+export {
+  m as extractAllSelectableItems,
+  c as hasSectionChildren,
+  d as isNestedStructure,
+  u as processSelectedItemsForFlatDynamicItems,
+  h as processSelectedItemsForNestedDynamicItems
+};

package/dist/esm/components/select-list/hooks/useControlledSelection.d.ts

@@ -0,0 +1,23 @@
+import { Key, Selection } from 'react-aria-components';
+/**
+ * Hook to manage controlled/uncontrolled selection state.
+ * Follows React's controlled component pattern.
+ * @param value - Controlled value (undefined for uncontrolled mode)
+ * @param onChange - Callback when selection changes
+ * @returns Tuple of [currentSelection, handleSelectionChange]
+ * @example
+ * ```tsx
+ * // Controlled mode
+ * const [selection, setSelection] = useControlledSelection(
+ *   selectedKeys,
+ *   handleChange
+ * )
+ *
+ * // Uncontrolled mode
+ * const [selection, setSelection] = useControlledSelection(
+ *   undefined,
+ *   handleChange
+ * )
+ * ```
+ */
+export declare function useControlledSelection(value: 'all' | Iterable<Key> | undefined, onChange?: (keys: Selection) => void): [Selection, (keys: Selection) => void];

package/dist/esm/components/select-list/hooks/useControlledSelection.js

@@ -0,0 +1,16 @@
+import { useState as i, useMemo as S, useCallback as a } from "react";
+function m(e, o) {
+  const [l, s] = i(/* @__PURE__ */ new Set()), t = e !== void 0, c = S(
+    () => t ? e === "all" ? "all" : e instanceof Set ? e : new Set(e) : l,
+    [t, e, l]
+  ), r = a(
+    (n) => {
+      t || s(n === "all" ? /* @__PURE__ */ new Set() : n), o?.(n);
+    },
+    [t, o]
+  );
+  return [c, r];
+}
+export {
+  m as useControlledSelection
+};

package/dist/esm/components/select-list/hooks/useSelectedFirstSorting.d.ts

@@ -0,0 +1,23 @@
+import { Selection } from 'react-aria-components';
+interface ProcessedItems<TType> {
+    selectedItems: TType[];
+    remainingItems: Iterable<TType> | undefined;
+}
+/**
+ * Hook to process items for selected-first sorting.
+ * Separates selected items into a dedicated section at the top.
+ * @param items - The items to process (flat or nested structure)
+ * @param selectedKeys - Currently selected keys
+ * @param enabled - Whether selected-first sorting is enabled
+ * @returns Processed items with selected items separated
+ * @example
+ * ```tsx
+ * const processed = useSelectedFirstSorting(
+ *   items,
+ *   selectedKeys,
+ *   sortSelectedFirst
+ * )
+ * ```
+ */
+export declare function useSelectedFirstSorting<TType extends object>(items: Iterable<TType> | undefined, selectedKeys: Selection, enabled: boolean): ProcessedItems<TType>;
+export {};

package/dist/esm/components/select-list/hooks/useSelectedFirstSorting.js

@@ -0,0 +1,31 @@
+import { useMemo as m } from "react";
+import { isNestedStructure as c, processSelectedItemsForNestedDynamicItems as i, processSelectedItemsForFlatDynamicItems as o } from "../helpers.js";
+function d(e, s, n) {
+  const r = m(() => s === "all" ? /* @__PURE__ */ new Set() : s, [s]);
+  return m(() => {
+    if (!n || !e || r.size === 0)
+      return { selectedItems: [], remainingItems: e };
+    if (c(e)) {
+      const t = i(
+        e,
+        r
+      );
+      return {
+        selectedItems: t.selectedItems,
+        remainingItems: t.remainingSections
+      };
+    } else {
+      const t = o(
+        e,
+        r
+      );
+      return {
+        selectedItems: t.selectedItems,
+        remainingItems: t.remainingItems
+      };
+    }
+  }, [e, r, n]);
+}
+export {
+  d as useSelectedFirstSorting
+};

package/dist/esm/components/select-list/parts/SelectListEmptyState.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Component displayed when no search results are found
+ * @internal
+ */
+export declare const SelectListEmptyState: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/esm/components/select-list/parts/SelectListEmptyState.js

@@ -0,0 +1,25 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { Icon as s } from "@payfit/unity-icons";
+import { FormattedMessage as u } from "react-intl";
+import { Text as t } from "../../text/Text.js";
+const a = () => /* @__PURE__ */ r("div", { className: "uy:flex uy:flex-col uy:gap-200 uy:items-center uy:justify-center uy:h-full uy:py-600", children: [
+  /* @__PURE__ */ e(
+    t,
+    {
+      variant: "body",
+      className: "uy:w-500 uy:h-500 uy:bg-surface-neutral-lowest uy:flex uy:items-center uy:justify-center uy:rounded-75",
+      children: /* @__PURE__ */ e(s, { size: 24, src: "MagnifyingGlassOutlined" })
+    }
+  ),
+  /* @__PURE__ */ e(t, { variant: "bodyLarge", children: /* @__PURE__ */ e(
+    u,
+    {
+      id: "unity:component:autocomplete:panel:empty:label",
+      defaultMessage: "No results found"
+    }
+  ) })
+] });
+a.displayName = "SelectListEmptyState";
+export {
+  a as SelectListEmptyState
+};

package/dist/esm/components/select-list/parts/SelectListOptGroup.d.ts

@@ -0,0 +1,118 @@
+import { ListBoxSectionProps } from 'react-aria-components';
+export declare const selectListOptGroup: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    label: string;
+    separator: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    label: string;
+    separator: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    label: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the SelectListOptGroup component.
+ * @template TType - The type of items when using the dynamic API
+ */
+export interface SelectListOptGroupProps<TType extends object> extends ListBoxSectionProps<TType> {
+    /**
+     * The heading text for this group of options. Displayed above the group's options to provide visual and semantic organization.
+     */
+    label: string;
+    /**
+     * Adds a visual separator line below this group to create clear visual boundaries between groups. Set to `true` to enhance visual separation.
+     * @default false
+     */
+    withSeparator?: boolean;
+}
+/**
+ * Organizes related options into labeled sections within a `SelectList` component.
+ * Use this component to group related options together under a common label, improving scannability and organization for users. The component supports both static (directly nested children) and dynamic (items array with render function) APIs, and can optionally display a separator line to create clear visual boundaries between groups.
+ * @param {SelectListOptGroupProps} props - Regular props from React Aria's ListBoxSection, plus label and separator configuration
+ * @example
+ * ```tsx
+ * import { SelectList, SelectListOptGroup, SelectListOption } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const sections = [
+ *     {
+ *       id: 'fruits',
+ *       label: 'Fruits',
+ *       children: [
+ *         { id: 'apple', label: 'Apple' },
+ *         { id: 'banana', label: 'Banana' }
+ *       ]
+ *     },
+ *     {
+ *       id: 'vegetables',
+ *       label: 'Vegetables',
+ *       children: [
+ *         { id: 'carrot', label: 'Carrot' },
+ *         { id: 'lettuce', label: 'Lettuce' }
+ *       ]
+ *     }
+ *   ]
+ *
+ *   return (
+ *     <SelectList items={sections} selectionMode="multiple" value={new Set()} onChange={() => {}}>
+ *       {section => (
+ *         <SelectListOptGroup
+ *           id={section.id}
+ *           label={section.label}
+ *           items={section.children}
+ *           withSeparator
+ *         >
+ *           {item => (
+ *             <SelectListOption id={item.id}>
+ *               {item.label}
+ *             </SelectListOption>
+ *           )}
+ *         </SelectListOptGroup>
+ *       )}
+ *     </SelectList>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use the `label` prop to provide a descriptive heading that clearly identifies the group's category
+ * - Set `withSeparator` to `true` to add a visual separator line below the group for enhanced visual organization
+ * - Supports both static API (directly nest `SelectListOption` components) and dynamic API (provide `items` array with render function)
+ * - This component must be used within a `SelectList` parent component to function properly
+ * - Groups are accessible with proper ARIA semantics for screen readers
+ * @see {@link SelectListOptGroupProps} for all available props
+ * @see {@link SelectListOption} for the child option component
+ * @see {@link SelectList} for the parent component's API
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/select-list/parts GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/data-selectlist-selectlistoptgroup unity-components.payfit.io}
+ */
+declare function SelectListOptGroup<T extends object>(props: SelectListOptGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace SelectListOptGroup {
+    var displayName: string;
+}
+export { SelectListOptGroup };

package/dist/esm/components/select-list/parts/SelectListOptGroup.js

@@ -0,0 +1,28 @@
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { uyTv as c } from "@payfit/unity-themes";
+import { ListBoxSection as i, Header as p, Collection as b, Separator as m } from "react-aria-components";
+const d = c({
+  slots: {
+    base: "uy:flex uy:flex-col uy:bg-surface-neutral",
+    label: "uy:px-150 uy:py-100 uy:typography-body-strong uy:text-content-neutral",
+    separator: "uy:my-100 uy:border-t uy:border-border-neutral uy:border-solid"
+  }
+});
+function f(r) {
+  const { base: l, label: s, separator: a } = d(), {
+    label: o,
+    withSeparator: u = !1,
+    children: e,
+    ...n
+  } = r;
+  return /* @__PURE__ */ y(i, { ...n, className: l(), children: [
+    o && /* @__PURE__ */ t(p, { className: s(), children: o }),
+    typeof e == "function" ? /* @__PURE__ */ t(b, { items: r.items, children: e }) : e,
+    u && /* @__PURE__ */ t(m, { className: a() })
+  ] });
+}
+f.displayName = "SelectListOptGroup";
+export {
+  f as SelectListOptGroup,
+  d as selectListOptGroup
+};

package/dist/esm/components/select-list/parts/SelectListOption.d.ts

@@ -0,0 +1,24 @@
+import { default as React, ReactNode } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+/**
+ * Props for the SelectListOption component.
+ * @template TType - The type of the item this option represents
+ */
+export interface SelectListOptionProps<TType extends object> extends Omit<ListBoxItemProps<TType>, 'ref' | 'className' | 'style'> {
+    /**
+     * The content to display for this option. Typically a text label or rich content.
+     */
+    children: ReactNode;
+    /**
+     * Prevents the option from being selected when set to `true`. Disabled options are visually dimmed and cannot receive focus or interaction.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Supplementary text displayed below the main option label. Use this to provide additional context or description about the option.
+     */
+    helperText?: string;
+}
+export declare const SelectListOption: <T extends object>(props: SelectListOptionProps<T> & {
+    ref?: React.ForwardedRef<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/esm/components/select-list/parts/SelectListOption.js

@@ -0,0 +1,72 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { ListBoxItem as m } from "react-aria-components";
+import x from "../../../hooks/use-id.js";
+import { CheckboxIndicator as v } from "../../checkbox/parts/CheckboxIndicator.js";
+const h = b({
+  slots: {
+    base: [
+      "uy:flex uy:flex-col uy:transition",
+      "uy:w-full uy:px-150 uy:py-100",
+      "uy:rounded-50 uy:cursor-pointer",
+      "uy:hover:bg-surface-neutral-hover",
+      "uy:active:bg-surface-neutral-pressed",
+      "uy:data-[focus-visible]:outline uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:-outline-offset-2"
+    ],
+    label: "uy:inline-flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
+    helperText: "uy:inline-block uy:typography-body uy:text-content-neutral-low uy:pl-300"
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "uy:cursor-not-allowed!",
+        label: "uy:text-content-neutral-disabled"
+      },
+      false: {
+        base: ""
+      }
+    }
+  }
+});
+function a({
+  children: o,
+  isDisabled: i = !1,
+  textValue: u,
+  helperText: e,
+  ...r
+}, n) {
+  const l = x(), {
+    base: y,
+    label: c,
+    helperText: d
+  } = h({ isDisabled: i });
+  return /* @__PURE__ */ t(
+    m,
+    {
+      "data-dd-privacy": "mask",
+      ...r,
+      className: y(),
+      textValue: u ?? o,
+      "aria-describedby": e ? `${l}-helper-text` : void 0,
+      children: ({ isSelected: p }) => /* @__PURE__ */ s("div", { ref: n, children: [
+        /* @__PURE__ */ s("div", { className: c(), children: [
+          /* @__PURE__ */ t(
+            v,
+            {
+              isSelected: p,
+              isDisabled: i
+            }
+          ),
+          o
+        ] }),
+        e && /* @__PURE__ */ t("span", { id: `${l}-helper-text`, className: d(), children: e })
+      ] })
+    }
+  );
+}
+a.displayName = "SelectListOption";
+const C = f(a);
+export {
+  C as SelectListOption
+};

package/dist/esm/components/select-list/parts/SelectListSearchInput.d.ts

@@ -0,0 +1,2 @@
+declare const SelectListSearchInput: import('react').ForwardRefExoticComponent<import('react').RefAttributes<HTMLDivElement>>;
+export { SelectListSearchInput };

package/dist/esm/components/select-list/parts/SelectListSearchInput.js

@@ -0,0 +1,43 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { uyTv as a } from "@payfit/unity-themes";
+import { SearchField as c, Input as l } from "react-aria-components";
+import { useIntl as y } from "react-intl";
+import { CircularIconButton as m } from "../../icon-button/CircularIconButton.js";
+import { Icon as p } from "../../icon/Icon.js";
+const f = a({
+  slots: {
+    base: "uy:flex uy:gap-100 uy:items-center uy:transition-colors uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:bg-surface-form-high-enabled uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-2 uy:focus-within:outline-offset-2 uy:text-content-form-active uy:typography-body",
+    input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden",
+    button: "uy:text-content-neutral-enabled"
+  }
+}), d = s((h, e) => {
+  const o = y(), { base: n, input: u, button: r } = f();
+  return /* @__PURE__ */ i(c, { className: n(), ref: e, "data-dd-privacy": "mask", children: [
+    /* @__PURE__ */ t(
+      p,
+      {
+        src: "MagnifyingGlassOutlined",
+        role: "presentation",
+        color: "content.neutral.lowest"
+      }
+    ),
+    /* @__PURE__ */ t(l, { className: u() }),
+    /* @__PURE__ */ t(
+      m,
+      {
+        title: o.formatMessage({
+          id: "unity:component:common:clear:title",
+          defaultMessage: "Clear"
+        }),
+        className: r(),
+        icon: "CloseOutlined",
+        asElement: "button"
+      }
+    )
+  ] });
+});
+d.displayName = "SelectListSearchInput";
+export {
+  d as SelectListSearchInput
+};

package/dist/esm/components/select-list/parts/SelectedItemsSection.d.ts

@@ -0,0 +1,54 @@
+import { SelectionBehavior } from '@react-types/shared';
+import { Key, Selection, SelectionMode } from 'react-aria-components';
+interface SelectableItem {
+    id: Key;
+    label: string;
+    [key: string]: unknown;
+}
+export interface SelectedItemsSectionProps<TType extends SelectableItem> {
+    /**
+     * Array of selected items to display
+     */
+    items: TType[];
+    /**
+     * Currently selected keys
+     */
+    selectedKeys: Selection;
+    /**
+     * Callback when selection changes
+     */
+    onSelectionChange: (keys: Selection) => void;
+    /**
+     * Selection mode (single, multiple)
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Selection behavior (toggle, replace)
+     */
+    selectionBehavior?: SelectionBehavior;
+    /**
+     * Accessible label for the section
+     */
+    label: string;
+    /**
+     * CSS class for the ListBox
+     */
+    className: string;
+}
+/**
+ * Displays selected items in a dedicated section at the top of the list.
+ * Items in this section can be deselected to move them back to the main list.
+ * @example
+ * ```tsx
+ * <SelectedItemsSection
+ *   items={selectedItems}
+ *   selectedKeys={selectedKeys}
+ *   onSelectionChange={handleChange}
+ *   selectionMode="multiple"
+ *   label="Selected Options"
+ *   className={selectedListBoxStyles}
+ * />
+ * ```
+ */
+export declare function SelectedItemsSection<TType extends SelectableItem>({ items, selectedKeys, onSelectionChange, selectionMode, selectionBehavior, label, className, ...rest }: SelectedItemsSectionProps<TType>): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/esm/components/select-list/parts/SelectedItemsSection.js

@@ -0,0 +1,35 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Header as h, ListBox as p, Collection as u } from "react-aria-components";
+import { SelectListOption as f } from "./SelectListOption.js";
+function S({
+  items: r,
+  selectedKeys: o,
+  onSelectionChange: n,
+  selectionMode: i,
+  selectionBehavior: c,
+  label: t,
+  className: d,
+  ...s
+}) {
+  return r.length === 0 ? null : /* @__PURE__ */ a("div", { children: [
+    /* @__PURE__ */ e(h, { className: "uy:sr-only", children: t }),
+    /* @__PURE__ */ e(
+      p,
+      {
+        className: d,
+        items: r,
+        selectedKeys: o,
+        onSelectionChange: n,
+        selectionMode: i,
+        selectionBehavior: c,
+        escapeKeyBehavior: "none",
+        shouldFocusWrap: !1,
+        ...s,
+        children: /* @__PURE__ */ e(u, { items: r, children: (l) => /* @__PURE__ */ e(f, { id: l.id, children: l.label }) })
+      }
+    )
+  ] });
+}
+export {
+  S as SelectedItemsSection
+};

package/dist/esm/components/select-list/utils/partition.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Partitions an array into two arrays based on a predicate function.
+ * More efficient than using filter twice.
+ * @param array - Array to partition
+ * @param predicate - Function to test each element
+ * @returns Tuple of [passing items, failing items]
+ * @example
+ * ```tsx
+ * const [evens, odds] = partition([1, 2, 3, 4], n => n % 2 === 0)
+ * // evens: [2, 4], odds: [1, 3]
+ * ```
+ */
+export declare function partition<T>(array: T[], predicate: (item: T) => boolean): [T[], T[]];

package/dist/esm/components/select-list/utils/partition.js

@@ -0,0 +1,9 @@
+function e(n, i) {
+  const o = [], s = [];
+  for (const t of n)
+    i(t) ? o.push(t) : s.push(t);
+  return [o, s];
+}
+export {
+  e as partition
+};

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.context.d.ts

@@ -1,6 +1,2 @@
 import { ToggleGroupState } from 'react-stately';
-export interface SelectableButtonGroupContextValue {
-    state: ToggleGroupState;
-    isInvalid?: boolean;
-}
-export declare const SelectableButtonGroupContext: import('react').Context<SelectableButtonGroupContextValue | null>;
+export declare const SelectableButtonGroupContext: import('react').Context<ToggleGroupState | null>;

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { AriaToggleButtonGroupProps } from 'react-aria';
 import { Key } from 'react-stately';
-export declare const selectableButtonGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:gap-100", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:gap-100", unknown, unknown, undefined>>;
+export declare const selectableButtonGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:group uy:flex uy:gap-100 uy:flex-wrap", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:group uy:flex uy:gap-100 uy:flex-wrap", unknown, unknown, undefined>>;
 export interface SelectableButtonGroupProps extends VariantProps<typeof selectableButtonGroup>, Omit<AriaToggleButtonGroupProps, 'selectedKeys' | 'defaultSelectedKeys' | 'onSelectionChange' | 'style'> {
     /**
      * The SelectableButton components to render within the group.
@@ -26,6 +26,11 @@ export interface SelectableButtonGroupProps extends VariantProps<typeof selectab
      * Required when using the component in controlled mode.
      */
     onChange?: (keys: Key[]) => void;
+    /**
+     * Callback fired when focus leaves the group.
+     * Useful for form validation and tracking user interaction.
+     */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
     /**
      * Marks the group and all contained buttons as invalid, applying error styles.
      * Use this to indicate a validation error for the group.