@payfit/unity-components 1.2.0 → 2.1.4

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.

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.js

@@ -1,40 +1,40 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as c, useRef as s } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { useToggleButtonGroup as m, mergeProps as f } from "react-aria";
+import { forwardRef as i, useRef as s, useCallback as m } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { useToggleButtonGroup as y } from "react-aria";
 import { useToggleGroupState as g } from "react-stately";
 import { SelectableButtonGroupContext as v } from "./SelectableButtonGroup.context.js";
-const y = d({
-  base: "uy:flex uy:gap-100"
-}), G = c((e, l) => {
-  const t = s(null), o = g({
+const B = f({
+  base: "uy:group uy:flex uy:gap-100 uy:flex-wrap"
+}), b = i((e, t) => {
+  const o = s(null), u = g({
     ...e,
     selectedKeys: e.value,
     defaultSelectedKeys: e.defaultValue,
-    onSelectionChange: (i) => {
-      e.onChange?.(Array.from(i));
+    onSelectionChange: (l) => {
+      e.onChange?.(Array.from(l));
     }
-  }), { groupProps: r } = m(e, o, t), n = y({ className: e.className }), { ref: u } = f({ ref: t }, { ref: l });
+  }), { groupProps: n } = y(e, u, o), r = B({ className: e.className }), c = m(
+    (l) => {
+      o.current = l, typeof t == "function" ? t(l) : t && (t.current = l);
+    },
+    [t]
+  );
   return /* @__PURE__ */ a(
     "div",
     {
-      ...r,
-      className: n,
-      ref: u,
+      ...n,
+      className: r,
+      ref: c,
       "data-dd-privacy": "allow",
       "aria-invalid": e.isInvalid,
-      children: /* @__PURE__ */ a(
-        v.Provider,
-        {
-          value: { state: o, isInvalid: e.isInvalid },
-          children: e.children
-        }
-      )
+      onBlur: e.onBlur,
+      children: /* @__PURE__ */ a(v.Provider, { value: u, children: e.children })
     }
   );
 });
-G.displayName = "SelectableButtonGroup";
+b.displayName = "SelectableButtonGroup";
 export {
-  G as SelectableButtonGroup,
-  y as selectableButtonGroup
+  b as SelectableButtonGroup,
+  B as selectableButtonGroup
 };

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

@@ -0,0 +1,27 @@
+import { SelectableButtonGroupProps } from './SelectableButtonGroup.js';
+export type TanstackSelectableButtonGroupProps = Omit<SelectableButtonGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableButtonGroup` is a selectable button group wired to the TanStack Form field context.
+ * It is based on the Unity `SelectableButtonGroup` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ choice: string[] }>({ validators: {} })
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="choice">
+ *         {(field) => (
+ *           <field.SelectableButtonGroup selectionMode="single">
+ *             <SelectableButton value="option1">Option 1</SelectableButton>
+ *             <SelectableButton value="option2">Option 2</SelectableButton>
+ *           </field.SelectableButtonGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableButtonGroup: import('react').ForwardRefExoticComponent<TanstackSelectableButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableButtonGroup };

package/dist/esm/components/selectable-button-group/TanstackSelectableButtonGroup.js

@@ -0,0 +1,34 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as u, useCallback as m } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as p } from "../form-field/TanstackFormField.context.js";
+import { SelectableButtonGroup as b } from "./SelectableButtonGroup.js";
+const T = u(({ onChange: o, ...l }, n) => {
+  const e = f(), a = p(), i = e.state.meta.isTouched && !e.state.meta.isValid, d = m(
+    (t) => {
+      const r = t.relatedTarget, s = t.currentTarget;
+      (!r || !s.contains(r)) && e.handleBlur();
+    },
+    [e]
+  );
+  return /* @__PURE__ */ c(
+    b,
+    {
+      ...l,
+      ref: n,
+      value: e.state.value,
+      onChange: (t) => {
+        e.handleChange(t), o?.(t);
+      },
+      onBlur: d,
+      isInvalid: i,
+      "aria-labelledby": a.labelId,
+      "aria-describedby": [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ") || void 0,
+      "aria-details": a.contextualLinkId
+    }
+  );
+});
+T.displayName = "TanstackSelectableButtonGroup";
+export {
+  T as TanstackSelectableButtonGroup
+};

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

@@ -1,6 +1,6 @@
 import { AriaToggleButtonProps } from 'react-aria';
-import { UnityIcon } from '@payfit/unity-icons';
 import { ToggleButtonProps } from 'react-aria-components';
+import { UnityIcon } from '@payfit/unity-icons';
 export declare const selectableButton: import('tailwind-variants').TVReturnType<{
     hasIcon: {
         true: {
@@ -10,11 +10,6 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
-    isInvalid: {
-        true: {
-            base: string;
-        };
-    };
 }, {
     base: string[];
     icon: string[];
@@ -28,11 +23,6 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
-    isInvalid: {
-        true: {
-            base: string;
-        };
-    };
 }, {
     base: string[];
     icon: string[];
@@ -46,11 +36,6 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
-    isInvalid: {
-        true: {
-            base: string;
-        };
-    };
 }, {
     base: string[];
     icon: string[];