@payfit/unity-components 2.0.0 → 2.2.0

package/dist/esm/components/list-view/parts/RawListViewItem.d.ts

@@ -0,0 +1,102 @@
+import { JSX, ReactNode, Ref } from 'react';
+import { ListBoxItemProps } from 'react-aria-components';
+export declare const listViewItem: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            prefix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            suffix?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            prefix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            suffix?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    wrapper: string[];
+    prefix: string[];
+    content: string[];
+    suffix: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            prefix?: import('tailwind-merge').ClassNameValue;
+            root?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            suffix?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    wrapper: string[];
+    prefix: string[];
+    content: string[];
+    suffix: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    root: string[];
+    wrapper: string[];
+    prefix: string[];
+    content: string[];
+    suffix: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type RawListViewItemProps<TItem extends object> = Omit<ListBoxItemProps<TItem>, 'ref' | 'children' | 'className' | 'style'> & {
+    prefix?: JSX.Element;
+    suffix?: JSX.Element;
+    hideDisclosureIndicator?: boolean;
+    children: ReactNode;
+};
+type RawListViewItemComponentType = {
+    <TItem extends object>(props: RawListViewItemProps<TItem> & {
+        ref?: Ref<HTMLDivElement>;
+    }): JSX.Element;
+    displayName: string;
+};
+/**
+ * The RawListViewItem component represents an individual item within a ListView, providing a flexible layout structure with prefix, content, and suffix slots.
+ *
+ * RawListViewItem handles interactive states (hover, focus, pressed, disabled) and automatically displays a disclosure indicator for navigation affordance unless explicitly hidden. When an `href` prop is provided, the item renders as a semantic link element. This component serves as the building block for all list item content within ListView, managing the layout and interaction patterns consistently.
+ * @param {RawListViewItemProps} props - The props for the RawListViewItem component, including all ListBoxItem props plus `prefix`, `suffix`, and `hideDisclosureIndicator`
+ * @example
+ * ```tsx
+ * import { ListView, RawListViewItem, ListViewItemLabel } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ListView aria-label="Users">
+ *       <RawListViewItem
+ *         href="/users/1"
+ *         prefix={<Icon src="UserFilled" />}
+ *         suffix={<Badge>New</Badge>}
+ *       >
+ *         <ListViewItemLabel>John Doe</ListViewItemLabel>
+ *       </RawListViewItem>
+ *     </ListView>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Always include a `ListViewItemLabel`, `aria-label`, or `textValue` prop for accessibility
+ * - Use the `prefix` prop for leading icons, avatars, or indicators
+ * - Use the `suffix` prop for trailing metadata, badges, or values
+ * - Set `hideDisclosureIndicator` to `true` when the item doesn't navigate to additional content
+ * - Set `isDisabled` to `true` to prevent interaction with the item
+ * - Provide an `href` prop to render the item as a semantic link for navigation
+ * - The component automatically manages hover, focus, and pressed states
+ * @see {@link RawListViewItemProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/list-view/parts GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-listview-rawlistviewitem--docs unity-components.payfit.io}
+ */
+declare const RawListViewItem: RawListViewItemComponentType;
+export { RawListViewItem };

package/dist/esm/components/list-view/parts/RawListViewItem.js

@@ -0,0 +1,80 @@
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as g, useRef as w, useLayoutEffect as x } from "react";
+import { Icon as v } from "@payfit/unity-icons";
+import { uyTv as h } from "@payfit/unity-themes";
+import { ListBoxItem as I } from "react-aria-components";
+const L = h({
+  // add the component styles
+  slots: {
+    root: ["uy:group uy:focus-visible:outline-0"],
+    wrapper: [
+      "uy:p-200",
+      "uy:flex uy:gap-150",
+      "uy:transition-colors",
+      "uy:bg-surface-neutral",
+      "uy:border-b uy:border-b-solid uy:border-b-border-neutral",
+      // Hover when list is static
+      "uy:group-hover:bg-surface-neutral-hover uy:group-hover:cursor-pointer",
+      // Hover when list is interactive
+      "uy:group-data-[hovered=true]:bg-surface-neutral-hover uy:group-data-[hovered=true]:cursor-pointer",
+      // Press styles when list is interactive
+      "uy:group-data-[pressed=true]:bg-surface-neutral-pressed",
+      // Focus styles when list is interactive
+      "uy:group-data-[focus-visible=true]:bg-surface-neutral-focus uy:group-data-[focus-visible=true]:outline uy:group-data-[focus-visible=true]:-outline-offset-4 uy:group-data-[focus-visible=true]:outline-utility-focus-ring",
+      // disabled Styles when list is interactive
+      "uy:group-data-[disabled=true]:bg-surface-neutral-disabled uy:group-data-[disabled=true]:text-content-neutral-disabled uy:group-data-[disabled=true]:cursor-not-allowed",
+      // current page styles
+      'uy:group-data-[status="active"]:bg-surface-neutral-selected'
+    ],
+    prefix: ["uy:grow-0"],
+    content: ["uy:flex-1 uy:typography-body-small"],
+    suffix: ["uy:grow-0 uy:flex uy:gap-100"]
+  }
+}), V = (n, r) => {
+  const o = w(), { children: c, prefix: u, suffix: a, hideDisclosureIndicator: s, ...e } = n, {
+    root: d,
+    wrapper: f,
+    prefix: y,
+    suffix: p,
+    content: b
+  } = L(), m = !!a || !s;
+  return x(() => {
+    const t = o.current;
+    if (!t) return;
+    t.querySelector('[data-unity-slot="ListViewItemLabel"]') || !("aria-label" in e) && !("aria-labelledby" in e) && !("textValue" in e) && console.error(
+      "ListViewItem: Either a ListViewItemLabel component, an aria-label, aria-labelledby, or textValue prop is required for accessibility. Provide one to ensure screen reader users can identify the item."
+    );
+  }, [e, o]), /* @__PURE__ */ i(I, { ...e, className: d(), "data-dd-privacy": "mask", children: /* @__PURE__ */ l(
+    "div",
+    {
+      ref: (t) => {
+        o.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
+      },
+      "data-unity-slot": "ListViewItem",
+      className: f(),
+      children: [
+        u && /* @__PURE__ */ i("div", { "data-unity-slot": "ListViewItem.prefix", className: y(), children: u }),
+        /* @__PURE__ */ i("div", { "data-unity-slot": "ListViewItem.content", className: b(), children: c }),
+        m && /* @__PURE__ */ l("div", { "data-unity-slot": "ListViewItem.suffix", className: p(), children: [
+          a,
+          !s && /* @__PURE__ */ i(
+            v,
+            {
+              src: "CaretRightOutlined",
+              role: "presentation",
+              size: 20,
+              color: e.isDisabled ? "content.neutral.disabled" : "content.neutral.low"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}, R = g(
+  V
+);
+R.displayName = "RawListViewItem";
+export {
+  R as RawListViewItem,
+  L as listViewItem
+};

package/dist/esm/components/multi-select/MultiSelect.d.ts

@@ -1,5 +1,4 @@
-import { MultiSelectComponent, MultiSelectProps } from './Multiselect.types.js';
-declare const MultiSelectComponent: <TItem extends Record<string | number, unknown>, TItemKey extends keyof TItem, TKeyType extends TItem[TItemKey] & (string | number)>(props: MultiSelectProps<TItem, TItemKey, TKeyType>, ref: React.ForwardedRef<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;
+import { MultiSelectComponent } from './MultiselectTypes.js';
 /**
  * The MultiSelect component allows users to select multiple items from a dropdown list.
  * The component provides two different APIs:
@@ -52,11 +51,10 @@ declare const MultiSelectComponent: <TItem extends Record<string | number, unkno
  * </MultiSelect>
  * ```
  * @component
- * @template TItem - The type of items in the collection. When using the dynamic API, it must be a Record or an object. For the static API, it defaults to a string or number.
- * @template TItemKey - The key name within TItem used as the selection value (must be a key of TItem). Applies only to the dynamic API.
- * @template TKeyType - The type of the property at TItem[TItemKey] (must be string or number). Applies only to the dynamic API.
+ * @template TItems - The type of the items collection. Use `Set<T>` for flat lists or `Map<string, T[]>` for grouped lists. When omitted or undefined, the component uses the static API with React children.
  * @remarks
  * [API & Docs](https://unity-components.payfit.io/?path=/docs/inputs-multiselect--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/928776-multiselect)
  */
-export declare const MultiSelect: MultiSelectComponent;
-export {};
+export declare const MultiSelect: MultiSelectComponent & {
+    displayName: string;
+};

package/dist/esm/components/multi-select/MultiSelect.js

@@ -1,233 +1,256 @@
-import { jsx as i, jsxs as q } from "react/jsx-runtime";
-import { forwardRef as Se, useMemo as S, useCallback as d } from "react";
-import { ComboboxProvider as pe, SelectProvider as z } from "@ariakit/react";
+import { jsx as f, jsxs as ie, Fragment as fe } from "react/jsx-runtime";
+import { forwardRef as de, useMemo as I, useCallback as i, useRef as me } from "react";
+import { ComboboxProvider as Se, SelectProvider as q, useSelectContext as ye, useStoreState as pe } from "@ariakit/react";
 import { useComboboxFilter as he } from "./hooks/use-combobox-filter.js";
 import { useMultiSelectionState as Ve } from "./hooks/use-multiselection-state.js";
-import { MultiSelectContext as J } from "./Multiselect.context.js";
-import { MultiSelectButton as U } from "./parts/MultiSelectButton.js";
-import { MultiSelectPopover as W } from "./parts/MultiSelectPopover.js";
-function X(t) {
+import { MultiSelectContext as z } from "./Multiselect.context.js";
+import { MultiSelectButton as ge } from "./parts/MultiSelectButton.js";
+import { MultiSelectPopover as ve } from "./parts/MultiSelectPopover.js";
+function J(t) {
   return t instanceof Map;
 }
-function ge(t) {
+function Ie(t) {
   return !Object.prototype.hasOwnProperty.call(t, "items");
 }
 function a(t) {
   return String(t);
 }
-function p(t) {
+function b(t) {
   return isNaN(Number(t)) ? t : Number(t);
 }
-function Z(t) {
+function X(t) {
   return Array.from(t, a);
 }
-function Y(t) {
-  return new Set(Z(t));
+function U(t) {
+  return new Set(X(t));
 }
-const $ = (t, P) => {
-  const n = ge(t), A = (e) => {
-    if (Object.hasOwnProperty.call(e, "value"))
-      return e.value;
-    if (Object.prototype.hasOwnProperty.call(e, "id"))
-      return e.id;
-    if (typeof e == "string")
-      return e;
-    const r = Object.keys(e)[0];
-    return e[r];
-  }, ee = n ? (e) => Array.from(e).map(String).join(", ") : (e) => Array.from(e).map((r) => A(r)).join(", "), m = t, w = t, c = S(
-    () => n ? void 0 : m.items,
-    [n, m.items]
-  ), s = n ? void 0 : m.getItemValue ?? A, { children: V } = n ? w : m, te = n ? void 0 : m.searchOptions, { children: C } = w, {
+function W({
+  props: t,
+  ref: C,
+  content: r,
+  typedRenderValue: A,
+  selectedItemsForDisplay: O
+}) {
+  const K = ye(), P = pe(K, "open"), u = me(!1), {
+    placeholder: M,
+    isDisabled: c,
+    isReadOnly: y,
+    isLoading: p,
+    isInvalid: w,
+    onClearButtonPress: x,
+    onBlur: n,
+    onFocus: R,
+    ...j
+  } = t, h = i(() => {
+    P || !u.current && n && (u.current = !0, n());
+  }, [P, n]), d = i(() => {
+    u.current = !1, R?.();
+  }, [R]), V = i(() => {
+    setTimeout(() => {
+      const S = document.activeElement, g = K?.getState().contentElement;
+      g && S !== g && !g.contains(S) && !u.current && n && (u.current = !0, n());
+    }, 0);
+  }, [n, K]);
+  return /* @__PURE__ */ ie(fe, { children: [
+    /* @__PURE__ */ f(
+      ge,
+      {
+        ref: C,
+        placeholder: M,
+        isDisabled: c,
+        isReadOnly: y,
+        isLoading: p,
+        isInvalid: w,
+        renderValue: A,
+        selectedItems: O,
+        onClearButtonPress: x,
+        onBlur: h,
+        onFocus: d,
+        ...j
+      }
+    ),
+    /* @__PURE__ */ f(ve, { onBlur: V, children: r })
+  ] });
+}
+const be = (t, C) => {
+  const r = Ie(t), A = (e) => typeof e == "object" && e !== null && "value" in e && (typeof e.value == "string" || typeof e.value == "number") ? e.value : typeof e == "object" && e !== null && "id" in e && (typeof e.id == "string" || typeof e.id == "number") ? e.id : typeof e == "string" || typeof e == "number" ? e : String(e), P = r ? (e) => Array.from(e).map(String).join(", ") : (e) => Array.from(e).map((o) => A(o)).join(", "), u = t, M = t, c = I(
+    () => r ? void 0 : u.items,
+    [r, u.items]
+  ), y = r ? void 0 : u.getItemValue, { children: p } = r ? M : u, w = r ? void 0 : u.searchOptions, { children: x } = M, n = i(
+    (e) => r || !y ? A(e) : y(e),
+    [r, y]
+  ), {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    children: be,
+    children: R,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    getItemValue: Ke,
-    value: g,
-    defaultValue: f,
-    onChange: v,
-    onBlur: O,
-    isDisabled: M,
-    isInvalid: x,
-    isLoading: j,
-    isReadOnly: D,
-    isSearchable: h,
-    placeholder: R,
-    onClearButtonPress: F,
-    renderValue: re,
-    maxVisibleItems: N = 7,
-    ...B
-  } = t, ne = re ?? ee, y = d(() => n || !c ? [] : X(c) ? Array.from(c.values()).flat() : Array.from(c), [c, n]), oe = d(() => {
+    getItemValue: j,
+    value: h,
+    defaultValue: d,
+    onChange: V,
+    isSearchable: S,
+    renderValue: g,
+    maxVisibleItems: N = 7
+  } = t, Y = g ?? P, v = i(() => r || !c ? [] : J(c) ? Array.from(c.values()).flat() : Array.from(c), [c, r]), Z = i(() => {
     if ("value" in t)
-      return g ? Y(g) : /* @__PURE__ */ new Set();
-  }, [t, g]), le = d(() => f ? Y(f) : /* @__PURE__ */ new Set(), [f]), ae = d(
+      return h ? U(h) : /* @__PURE__ */ new Set();
+  }, [t, h]), $ = i(() => d ? U(d) : /* @__PURE__ */ new Set(), [d]), ee = i(
     (e) => {
-      if (!v) return;
-      const r = new Set(
-        Array.from(e).map((l) => p(l))
+      if (!V) return;
+      const o = new Set(
+        Array.from(e).map((s) => b(s))
       );
-      v(r);
+      V(o);
     },
-    [v]
+    [V]
   ), {
-    selectedKeys: u,
-    selectKey: L,
+    selectedKeys: m,
+    selectKey: E,
     unselectKey: T
   } = Ve({
-    selectedKeys: oe(),
-    defaultSelectedKeys: le(),
-    onSelectionChange: ae
-  }), se = d(
+    selectedKeys: Z(),
+    defaultSelectedKeys: $(),
+    onSelectionChange: ee
+  }), te = i(
     (e) => {
-      L(a(e));
+      E(a(e));
     },
-    [L]
-  ), ce = d(
+    [E]
+  ), re = i(
     (e) => {
       T(a(e));
     },
     [T]
-  ), { setSearchQuery: ue, matchingItems: I } = he({
-    items: y(),
-    extractSearchableText: (e) => n ? [""] : [
-      a(
-        s?.(e) || ""
-      )
-    ],
-    enabled: h,
-    searchOptions: te
-  }), ie = () => {
-    if (n) return Array.from(u);
-    const e = y();
-    return Array.from(u).map((r) => {
-      const l = e.find(
-        (o) => a(
-          s?.(o) || ""
-        ) === r
+  ), { setSearchQuery: ne, matchingItems: F } = he({
+    items: v(),
+    extractSearchableText: (e) => r ? [""] : [a(n(e))],
+    enabled: S,
+    searchOptions: w
+  }), oe = () => {
+    if (r) return Array.from(m);
+    const e = v();
+    return Array.from(m).map((o) => {
+      const s = e.find(
+        (l) => a(n(l)) === o
       );
-      return l && s ? s(l) : p(r);
+      return s ? n(s) : b(o);
     });
-  }, de = () => {
-    if (n)
+  }, le = () => {
+    if (r)
       return new Set(
-        Array.from(u).map((l) => p(l))
+        Array.from(m).map((s) => b(s))
       );
-    const e = y(), r = /* @__PURE__ */ new Set();
-    return Array.from(u).forEach((l) => {
-      const o = e.find(
-        (K) => a(
-          s?.(K) || ""
-        ) === l
+    const e = v(), o = /* @__PURE__ */ new Set();
+    return Array.from(m).forEach((s) => {
+      const l = e.find(
+        (D) => a(n(D)) === s
       );
-      o && r.add(o);
-    }), r;
-  }, fe = () => {
-    if (f)
-      return Z(f);
-  }, b = S(ie, [
-    u,
+      l && o.add(l);
+    }), o;
+  }, se = () => {
+    if (d)
+      return X(d);
+  }, B = I(oe, [
+    m,
+    r,
     n,
-    s,
-    y
-  ]), _ = S(de, [
-    u,
+    v
+  ]), G = I(le, [
+    m,
+    r,
     n,
-    s,
-    y
-  ]), G = S(fe, [f]), k = (e) => {
-    const r = new Set(e), l = new Set(
-      b.map((o) => a(o))
-    );
-    for (const o of r)
-      l.has(o) || se(p(o));
-    for (const o of l)
-      r.has(o) || ce(p(o));
-  }, E = d(() => n ? C : c ? X(c) ? Array.from(c.entries()).map(([e, r]) => {
-    const l = r.filter(
-      (o) => I.some((K) => {
-        const me = s?.(o) || "", ye = s?.(K) || "";
-        return a(ye) === a(me);
-      })
+    v
+  ]), L = I(se, [d]), _ = (e) => {
+    const o = new Set(e), s = new Set(B.map((l) => a(l)));
+    for (const l of o)
+      s.has(l) || te(b(l));
+    for (const l of s)
+      o.has(l) || re(b(l));
+  }, H = i(() => {
+    if (r)
+      return x;
+    if (!c) return null;
+    if (J(c)) {
+      const e = c;
+      return Array.from(e.entries()).map(
+        ([o, s]) => {
+          const l = s.filter(
+            (D) => F.some((ue) => {
+              const ce = n(D), ae = n(ue);
+              return a(ae) === a(ce);
+            })
+          );
+          return p(o, l);
+        }
+      );
+    }
+    return F.map(
+      (e) => p(e)
     );
-    return V(e, l);
-  }) : I.map(
-    (e) => V(
-      e
-    )
-  ) : null, [V, c, I, C, s, n]), H = S(() => E(), [E]), Q = ne;
-  return h ? /* @__PURE__ */ i(pe, { resetValueOnHide: !0, setValue: ue, children: /* @__PURE__ */ i(
-    z,
+  }, [
+    p,
+    c,
+    F,
+    x,
+    n,
+    r
+  ]), Q = I(() => H(), [H]), k = Y;
+  return S ? /* @__PURE__ */ f(Se, { resetValueOnHide: !0, setValue: ne, children: /* @__PURE__ */ f(
+    q,
     {
-      value: b.map(
+      value: B.map(
         (e) => a(e)
       ),
-      defaultValue: G,
-      setValue: k,
+      defaultValue: L,
+      setValue: _,
       focusLoop: !0,
-      children: /* @__PURE__ */ q(
-        J.Provider,
+      children: /* @__PURE__ */ f(
+        z.Provider,
         {
-          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: u },
-          children: [
-            /* @__PURE__ */ i(
-              U,
-              {
-                ref: P,
-                placeholder: R,
-                isDisabled: M,
-                isReadOnly: D,
-                isLoading: j,
-                isInvalid: x,
-                renderValue: Q,
-                selectedItems: _,
-                onClearButtonPress: F,
-                ...B
-              }
-            ),
-            /* @__PURE__ */ i(W, { onBlur: O, children: H })
-          ]
+          value: { isSearchable: S, maxVisibleItems: N, selectedKeys: m },
+          children: /* @__PURE__ */ f(
+            W,
+            {
+              props: t,
+              ref: C,
+              content: Q,
+              typedRenderValue: k,
+              selectedItemsForDisplay: G
+            }
+          )
         }
       )
     }
-  ) }) : /* @__PURE__ */ i(
-    z,
+  ) }) : /* @__PURE__ */ f(
+    q,
     {
-      value: b.map(
+      value: B.map(
         (e) => a(e)
       ),
-      defaultValue: G,
-      setValue: k,
+      defaultValue: L,
+      setValue: _,
       focusLoop: !0,
-      children: /* @__PURE__ */ q(
-        J.Provider,
+      children: /* @__PURE__ */ f(
+        z.Provider,
         {
-          value: { isSearchable: h, maxVisibleItems: N, selectedKeys: u },
-          children: [
-            /* @__PURE__ */ i(
-              U,
-              {
-                ref: P,
-                placeholder: R,
-                isDisabled: M,
-                isReadOnly: D,
-                isLoading: j,
-                isInvalid: x,
-                renderValue: Q,
-                selectedItems: _,
-                onClearButtonPress: F,
-                ...B
-              }
-            ),
-            /* @__PURE__ */ i(W, { onBlur: O, children: H })
-          ]
+          value: { isSearchable: S, maxVisibleItems: N, selectedKeys: m },
+          children: /* @__PURE__ */ f(
+            W,
+            {
+              props: t,
+              ref: C,
+              content: Q,
+              typedRenderValue: k,
+              selectedItemsForDisplay: G
+            }
+          )
         }
       )
     }
   );
-};
-$.displayName = "MultiSelect";
-const De = Se(
-  $
+}, Ce = de(
+  be
 );
+Ce.displayName = "MultiSelect";
 export {
-  De as MultiSelect
+  Ce as MultiSelect
 };