@payfit/unity-components 2.46.39 → 2.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.46.39",
+  "version": "2.47.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -92,7 +92,7 @@
     "tailwind-variants": "3.2.2",
     "usehooks-ts": "3.1.1",
     "zod": "4.4.3",
-    "@payfit/unity-illustrations": "2.46.39"
+    "@payfit/unity-illustrations": "2.47.0"
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
@@ -104,8 +104,8 @@
     "react-hook-form": "^7",
     "react-router-dom": "^5",
     "zod": "^3 || ^4",
-    "@payfit/unity-icons": "2.46.39",
-    "@payfit/unity-themes": "2.46.39"
+    "@payfit/unity-icons": "2.47.0",
+    "@payfit/unity-themes": "2.47.0"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.8",
@@ -154,9 +154,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.46.39",
-    "@payfit/unity-illustrations": "2.46.39",
-    "@payfit/unity-themes": "2.46.39",
+    "@payfit/unity-icons": "2.47.0",
+    "@payfit/unity-illustrations": "2.47.0",
+    "@payfit/unity-themes": "2.47.0",
     "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependenciesMeta": {

package/dist/esm/components/multi-select/hooks/use-combobox-filter.d.ts

@@ -1,12 +0,0 @@
-export interface UseComboboxFilterProps<T> {
-    items?: T[];
-    extractSearchableText?: (item: T) => string[];
-    enabled?: boolean;
-    searchOptions?: Intl.CollatorOptions;
-}
-export interface UseComboboxFilterReturn<T> {
-    searchQuery: string;
-    setSearchQuery: (value: string) => void;
-    matchingItems: T[];
-}
-export declare function useComboboxFilter<T>({ items, extractSearchableText, enabled, searchOptions, }: UseComboboxFilterProps<T>): UseComboboxFilterReturn<T>;

package/dist/esm/components/multi-select/hooks/use-combobox-filter.js

@@ -1,22 +0,0 @@
-import { useState as m, useMemo as l, startTransition as y } from "react";
-import { useFilter as b } from "react-aria-components/Autocomplete";
-function p({
-  items: e = [],
-  extractSearchableText: s = (t) => [String(t)],
-  enabled: n = !1,
-  searchOptions: c = { sensitivity: "base" }
-}) {
-  const [t, a] = m(""), o = b(c), i = o.contains.bind(o), u = (r) => {
-    y(() => {
-      a(r);
-    });
-  }, h = l(() => !n || t.length === 0 ? e : e.filter((r) => s(r).some((f) => i(f, t))), [n, e, t, s, i]);
-  return {
-    searchQuery: t,
-    setSearchQuery: u,
-    matchingItems: h
-  };
-}
-export {
-  p as useComboboxFilter
-};

package/dist/esm/components/multi-select/hooks/use-multiselection-state.d.ts

@@ -1,14 +0,0 @@
-interface UseMultiSelectionStateProps<V extends string | number = string> {
-    selectedKeys?: Set<V>;
-    defaultSelectedKeys?: Set<V>;
-    onSelectionChange?: (keys: Set<V>) => void;
-}
-interface UseMultiSelectionStateReturn<V extends string | number = string> {
-    selectedKeys: Set<V>;
-    isSelected: (key: V) => boolean;
-    selectKey: (key: V) => void;
-    unselectKey: (key: V) => void;
-    toggleKey: (key: V) => void;
-}
-export declare function useMultiSelectionState<V extends string | number = string>({ selectedKeys: controlledKeys, defaultSelectedKeys, onSelectionChange, }: UseMultiSelectionStateProps<V>): UseMultiSelectionStateReturn<V>;
-export {};

package/dist/esm/components/multi-select/hooks/use-multiselection-state.js

@@ -1,47 +0,0 @@
-import { useState as w } from "react";
-function a({
-  selectedKeys: c,
-  defaultSelectedKeys: K,
-  onSelectionChange: d
-}) {
-  const [u, r] = w(
-    () => K ?? /* @__PURE__ */ new Set()
-  ), n = c !== void 0, l = n ? c : u;
-  return {
-    selectedKeys: l,
-    isSelected: (t) => l.has(t),
-    selectKey: (t) => {
-      if (n && d) {
-        const e = new Set(l);
-        e.add(t), d(e);
-      } else
-        r((e) => {
-          const s = new Set(e);
-          return s.add(t), d?.(s), s;
-        });
-    },
-    unselectKey: (t) => {
-      if (n && d) {
-        const e = new Set(l);
-        e.delete(t), d(e);
-      } else
-        r((e) => {
-          const s = new Set(e);
-          return s.delete(t), d?.(s), s;
-        });
-    },
-    toggleKey: (t) => {
-      if (n && d) {
-        const e = new Set(l);
-        e.has(t) ? e.delete(t) : e.add(t), d(e);
-      } else
-        r((e) => {
-          const s = new Set(e);
-          return s.has(t) ? s.delete(t) : s.add(t), d?.(s), s;
-        });
-    }
-  };
-}
-export {
-  a as useMultiSelectionState
-};

package/dist/esm/components/multi-select/parts/MultiSelectButton.d.ts

@@ -1,18 +0,0 @@
-import { ForwardedRef, ReactElement } from 'react';
-export interface MultiSelectButtonProps<TItem> {
-    placeholder?: string;
-    isDisabled?: boolean;
-    isReadOnly?: boolean;
-    isLoading?: boolean;
-    isInvalid?: boolean;
-    /** The selected items to show in the button */
-    selectedItems: Set<TItem>;
-    /** Function to render the selected items */
-    renderValue: (values: Set<TItem>) => string;
-    onClearButtonPress?: () => void;
-    onBlur?: () => void;
-    onFocus?: () => void;
-}
-export declare const MultiSelectButton: <TItem>(props: MultiSelectButtonProps<TItem> & {
-    ref?: ForwardedRef<HTMLButtonElement>;
-}) => ReactElement;

package/dist/esm/components/multi-select/parts/MultiSelectButton.js

@@ -1,174 +0,0 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { memo as D, forwardRef as k, useContext as A, useMemo as K } from "react";
-import { useSelectContext as R, useStoreState as $, Select as L } from "@ariakit/react";
-import { uyTv as P } from "@payfit/unity-themes";
-import { useId as T } from "react-aria/useId";
-import { useIntl as U } from "react-intl";
-import { Badge as W } from "../../badge/Badge.js";
-import { CircularIconButton as q } from "../../icon-button/CircularIconButton.js";
-import { Icon as b } from "../../icon/Icon.js";
-import { Spinner as F } from "../../spinner/Spinner.js";
-import { MultiSelectContext as G } from "../Multiselect.context.js";
-const H = P({
-  slots: {
-    base: "uy:h-5.5 uy:sm:h-500 uy:flex uy:items-center uy:justify-between uy:py-125 uy:sm:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
-    inputValue: "uy:flex-1 uy:typography-body uy:text-left uy:line-clamp-1",
-    state: "uy:grow-0 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:inline-flex uy:gap-50 uy:items-center uy:px-100",
-    suffix: "uy:text-content-neutral-lowest"
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        base: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled uy:text-content-form-disabled",
-        inputValue: "uy:text-content-form-disabled!",
-        state: "uy:text-content-form-disabled",
-        suffix: "uy:text-content-form-disabled"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy:bg-surface-form-disabled uy:cursor-not-allowed uy:border-border-form-disabled",
-        inputValue: "uy:text-content-form-disabled",
-        state: "uy:text-content-form-disabled",
-        suffix: "uy:text-content-form-disabled"
-      }
-    },
-    isInvalid: {
-      true: {
-        base: "uy:bg-surface-form-error uy:border-border-form-error",
-        inputValue: "uy:text-content-form-error",
-        state: "uy:text-content-form-error"
-        // suffix: 'uy:text-content-form-error',
-      }
-    },
-    isEmpty: {
-      true: {
-        inputValue: "uy:text-content-neutral-lowest"
-      },
-      false: {
-        inputValue: "uy:text-content-form-enabled"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isInvalid: !1,
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-        inputValue: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
-        state: "uy:text-content-neutral-disabled"
-      }
-    },
-    {
-      isEmpty: !0,
-      isDisabled: !1,
-      isReadOnly: !1,
-      isInvalid: !1,
-      className: {
-        inputValue: "uy:text-content-neutral-lowest"
-      }
-    }
-  ]
-});
-function J({
-  isDisabled: n,
-  isReadOnly: t,
-  isLoading: c,
-  isInvalid: r,
-  placeholder: s,
-  selectedItems: x,
-  renderValue: d,
-  onClearButtonPress: g,
-  onBlur: w,
-  onFocus: h,
-  ...S
-}, v) {
-  const m = T(), u = U(), C = R(), I = $(C, "open"), y = A(G), a = y.maxVisibleItems ?? 0, i = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(x), { base: M, inputValue: V, state: B, suffix: N } = H({
-    isDisabled: !!n,
-    isReadOnly: !!t,
-    isInvalid: !!r,
-    isEmpty: i.size === 0
-  }), f = Math.max(
-    o.length - a,
-    0
-  ), O = i.size > 0 && !n && !t && !c, z = K(() => {
-    if (o.length === 0) return s;
-    const E = o.slice(0, a), j = new Set(E);
-    return d(j);
-  }, [o, a, d, s]);
-  return /* @__PURE__ */ l(
-    L,
-    {
-      ...S,
-      ref: v,
-      className: M(),
-      disabled: n || t,
-      "aria-invalid": r,
-      "aria-readonly": t,
-      "aria-labelledby": `${m}-select-button-label`,
-      "data-dd-privacy": "mask",
-      onBlur: w,
-      onFocus: h,
-      children: [
-        /* @__PURE__ */ e("span", { id: `${m}-select-button-label`, className: V(), children: i.size > 0 ? z : s }),
-        /* @__PURE__ */ l("div", { className: B(), children: [
-          c && /* @__PURE__ */ e(
-            F,
-            {
-              color: "inherit",
-              size: "small",
-              label: u.formatMessage({
-                id: "unity:component:form-field:form-input:spinner:label",
-                defaultMessage: "Loading"
-              })
-            }
-          ),
-          r && /* @__PURE__ */ e(
-            b,
-            {
-              src: "WarningCircleOutlined",
-              color: "content.form.invalid",
-              alt: u.formatMessage({
-                id: "unity:component:form-field:form-input:error:alt",
-                defaultMessage: "Error"
-              })
-            }
-          ),
-          f > 0 && /* @__PURE__ */ l(W, { variant: "numeric", children: [
-            "+",
-            f
-          ] }),
-          O && /* @__PURE__ */ e(
-            q,
-            {
-              title: u.formatMessage({
-                id: "unity:component:common:clear:title",
-                defaultMessage: "Clear"
-              }),
-              icon: "CloseOutlined",
-              onPress: () => {
-                g?.();
-              }
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          b,
-          {
-            className: N(),
-            src: I ? "CaretUpOutlined" : "CaretDownOutlined",
-            role: "presentation"
-          }
-        )
-      ]
-    }
-  );
-}
-const p = D(k(J));
-p.displayName = "MultiselectButton";
-const ue = p;
-export {
-  ue as MultiSelectButton
-};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.d.ts

@@ -1,7 +0,0 @@
-import { SelectPopoverProps } from '@ariakit/react';
-type MultiSelectPopoverProps = SelectPopoverProps & {
-    onBlur?: () => void;
-};
-declare function MultiSelectPopoverComponent({ children, ...props }: MultiSelectPopoverProps): import("react/jsx-runtime").JSX.Element;
-export declare const MultiSelectPopover: import('react').MemoExoticComponent<typeof MultiSelectPopoverComponent>;
-export {};

package/dist/esm/components/multi-select/parts/MultiSelectPopover.js

@@ -1,65 +0,0 @@
-import { jsx as o, jsxs as e, Fragment as m } from "react/jsx-runtime";
-import { memo as b, useContext as f } from "react";
-import { SelectPopover as h, Combobox as v, ComboboxList as x } from "@ariakit/react";
-import { uyTv as t } from "@payfit/unity-themes";
-import { Icon as g } from "../../icon/Icon.js";
-import { MultiSelectContext as w } from "../Multiselect.context.js";
-const S = t({
-  slots: {
-    base: "uy:shadow-300 uy:absolute uy:top-full uy:left-0 uy:z-50 uy:w-full uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:overflow-auto uy:max-h-[min(var(--popover-available-height,300px),300px)] uy:outline-none",
-    list: "uy:p-100"
-  }
-}), N = t({
-  slots: {
-    wrapper: "uy:sticky uy:top-0 uy:bg-surface-neutral uy:pt-100 uy:px-100",
-    base: "uy:flex uy:w-full uy:gap-100 uy:sm:h-500 uy:transition-colors uy:rounded-100 uy:sm:rounded-75 uy:py-125 uy:sm:py-100 uy:bg-surface-form-high-enabled uy:px-125 uy:sm:px-150 uy:typography-body uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border uy:active:border-solid uy:active:border-border-form-active",
-    input: "uy:focus-visible:outline-none",
-    divider: "uy:my-100 uy:border-t uy:border-border-neutral"
-  }
-});
-function C({
-  children: r,
-  ...s
-}) {
-  const i = f(w), { base: l, list: u } = S(), { base: n, input: a, wrapper: y, divider: c } = N(), { onBlur: d, ...p } = s;
-  return /* @__PURE__ */ o(
-    h,
-    {
-      portal: !0,
-      sameWidth: !0,
-      unmountOnHide: !0,
-      className: l(),
-      onClose: () => d?.(),
-      ...p,
-      children: i.isSearchable ? /* @__PURE__ */ e(m, { children: [
-        /* @__PURE__ */ e("div", { className: y(), children: [
-          /* @__PURE__ */ e("div", { className: n(), children: [
-            /* @__PURE__ */ o(
-              g,
-              {
-                src: "MagnifyingGlassOutlined",
-                color: "content.neutral.lowest",
-                "aria-hidden": !0
-              }
-            ),
-            /* @__PURE__ */ o(
-              v,
-              {
-                autoSelect: !0,
-                placeholder: "Search...",
-                className: a()
-              }
-            )
-          ] }),
-          /* @__PURE__ */ o("hr", { className: c() })
-        ] }),
-        /* @__PURE__ */ o(x, { className: u(), children: r })
-      ] }) : /* @__PURE__ */ o("div", { className: u(), children: r })
-    }
-  );
-}
-const M = b(C);
-M.displayName = "MultiSelectPopover";
-export {
-  M as MultiSelectPopover
-};

package/dist/esm/components/select/parts/SearchInput.d.ts

@@ -1,5 +0,0 @@
-export interface SearchInputProps {
-    'aria-label': string;
-}
-declare const SearchInput: import('react').ForwardRefExoticComponent<SearchInputProps & import('react').RefAttributes<HTMLDivElement>>;
-export { SearchInput };

package/dist/esm/components/select/parts/SearchInput.js

@@ -1,59 +0,0 @@
-import { jsxs as e, Fragment as l, jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { uyTv as c } from "@payfit/unity-themes";
-import { Input as y } from "react-aria-components/Input";
-import { SearchField as d } from "react-aria-components/SearchField";
-import { useIntl as p } from "react-intl";
-import { CircularIconButton as f } from "../../icon-button/CircularIconButton.js";
-import { Icon as b } from "../../icon/Icon.js";
-const h = c({
-  slots: {
-    base: "uy:flex uy:gap-100 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:text-content-form-active uy:mt-100 uy:mb-100 uy:ml-100 uy:mr-100 uy:typography-body uy:focus-within:border uy:focus-within:border-solid uy:focus-within:border-border-form-active",
-    input: "uy:flex-grow uy:outline-none uy:[&::-webkit-search-cancel-button]:hidden uy:min-h-300",
-    button: "uy:text-content-neutral-enabled",
-    separator: "uy:h-[1px] uy:bg-surface-neutral-lowest uy:w-full uy:mt-100"
-  }
-}), g = m(
-  ({ "aria-label": r }, o) => {
-    const a = p(), { base: u, input: n, button: i, separator: s } = h();
-    return /* @__PURE__ */ e(l, { children: [
-      /* @__PURE__ */ e(
-        d,
-        {
-          className: u(),
-          ref: o,
-          "data-dd-privacy": "mask",
-          "aria-label": r,
-          children: [
-            /* @__PURE__ */ t(
-              b,
-              {
-                src: "MagnifyingGlassOutlined",
-                "aria-hidden": "true",
-                color: "content.neutral.lowest"
-              }
-            ),
-            /* @__PURE__ */ t(y, { className: n() }),
-            /* @__PURE__ */ t(
-              f,
-              {
-                title: a.formatMessage({
-                  id: "unity:component:common:clear:title",
-                  defaultMessage: "Clear"
-                }),
-                className: i(),
-                icon: "CloseOutlined",
-                asElement: "button"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ t("div", { "aria-hidden": "true", className: s() })
-    ] });
-  }
-);
-g.displayName = "SearchInput";
-export {
-  g as SearchInput
-};