@payfit/unity-components 2.6.0 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/esm/components/select/Select.d.ts +21 -0
  2. package/dist/esm/components/select/Select.js +82 -60
  3. package/dist/esm/components/select/TanstackSelect.js +24 -17
  4. package/dist/esm/components/select/parts/SelectButton.d.ts +13 -2
  5. package/dist/esm/components/select/parts/SelectButton.js +50 -48
  6. package/dist/esm/components/select-field/TanstackSelectField.js +22 -20
  7. package/package.json +7 -7
package/dist/esm/components/select/Select.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { Node } from '@react-types/shared';
1
2
  import { ForwardedRef, JSX, ReactNode } from 'react';
2
3
  import { PopoverProps as AriaPopoverProps, SelectProps as AriaSelectProps } from 'react-aria-components';
3
4
  export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'value' | 'defaultValue' | 'onChange' | 'selectionMode'> {
@@ -17,7 +18,27 @@ export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>,
17
18
  isSearchable?: boolean;
18
19
  /** The placement of the popover */
19
20
  placement?: Extract<AriaPopoverProps['placement'], 'top' | 'bottom'>;
21
+ /** The aria-label for the search input when isSearchable is true */
20
22
  searchInputAriaLabel?: string;
23
+ /**
24
+ * Custom content to render when the listbox has no options to display.
25
+ * This can occur when `items` is empty or when search filtering returns no results.
26
+ * If not provided, the listbox will appear empty.
27
+ * @example
28
+ * ```tsx
29
+ * <Select
30
+ * items={[]}
31
+ * renderEmptyState={
32
+ * <EmptyStateNoSearchResults description="No options available" />
33
+ * }
34
+ * >
35
+ * {item => <SelectOption>{item.name}</SelectOption>}
36
+ * </Select>
37
+ * ```
38
+ */
39
+ renderEmptyState?: ReactNode | (() => ReactNode);
40
+ /** Custom render function to format the selected value display */
41
+ renderValue?: (value: Node<T>) => ReactNode;
21
42
  }
22
43
  type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
23
44
  ref?: ForwardedRef<HTMLDivElement>;
package/dist/esm/components/select/Select.js CHANGED
@@ -1,93 +1,115 @@
1
- import { jsxs as c, jsx as e } from "react/jsx-runtime";
2
- import { forwardRef as B, useState as C } from "react";
3
- import { uyTv as F } from "@payfit/unity-themes";
4
- import { useFilter as I, Select as M, Popover as z, Autocomplete as A, Virtualizer as p, ListLayout as d, ListBox as y } from "react-aria-components";
5
- import { useIntl as T } from "react-intl";
6
- import { SearchInput as U } from "./parts/SearchInput.js";
7
- import { SelectButton as V } from "./parts/SelectButton.js";
8
- const $ = F({
1
+ import { jsxs as d, jsx as e } from "react/jsx-runtime";
2
+ import { forwardRef as C, useState as F, useMemo as I } from "react";
3
+ import { uyTv as A } from "@payfit/unity-themes";
4
+ import { useFilter as T, Select as U, Popover as V, Autocomplete as $, Virtualizer as f, ListLayout as y, ListBox as m } from "react-aria-components";
5
+ import { useIntl as k } from "react-intl";
6
+ import { SearchInput as q } from "./parts/SearchInput.js";
7
+ import { SelectButton as G } from "./parts/SelectButton.js";
8
+ const H = A({
9
9
  slots: {
10
10
  base: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
11
11
  popover: "uy:rounded-100 uy:sm:rounded-75 uy:border uy:border-solid uy:border-border-neutral uy:w-[var(--trigger-width)] uy:bg-surface-neutral uy:shadow-300",
12
12
  listbox: "uy:overflow-y-auto uy:max-h-[296px] uy:pt-100 uy:pb-100"
13
13
  }
14
- }), k = ({
15
- children: t,
16
- items: o,
17
- placeholder: r,
18
- isDisabled: s,
19
- isInvalid: l,
20
- isReadOnly: a,
21
- value: n,
22
- defaultValue: m,
23
- onChange: i,
24
- isSearchable: f = !1,
25
- onBlur: b,
26
- placement: h,
27
- searchInputAriaLabel: x,
28
- ...S
29
- }, g) => {
30
- const v = T(), [w, N] = C(!1), { contains: O } = I({ sensitivity: "base" }), { base: L, popover: P, listbox: u } = $(), j = n !== void 0 || i !== void 0 ? {
31
- value: n,
32
- onChange: i
33
- } : { defaultValue: m };
34
- return /* @__PURE__ */ c(
35
- M,
14
+ }), J = ({
15
+ children: r,
16
+ items: t,
17
+ placeholder: s,
18
+ isDisabled: l,
19
+ isInvalid: n,
20
+ isReadOnly: i,
21
+ value: a,
22
+ defaultValue: b,
23
+ onChange: u,
24
+ isSearchable: h = !1,
25
+ onBlur: v,
26
+ placement: x,
27
+ searchInputAriaLabel: g,
28
+ renderEmptyState: o,
29
+ renderValue: S,
30
+ ...w
31
+ }, N) => {
32
+ const O = k(), [L, M] = F(!1), { contains: P } = T({ sensitivity: "base" }), { base: j, popover: z, listbox: c } = H(), B = a !== void 0 || u !== void 0 ? {
33
+ value: a,
34
+ onChange: u
35
+ } : { defaultValue: b }, p = I(() => {
36
+ if (o !== void 0)
37
+ return typeof o == "function" ? o : () => o;
38
+ }, [o]);
39
+ return /* @__PURE__ */ d(
40
+ U,
36
41
  {
37
- onOpenChange: N,
38
- ...S,
39
- ref: g,
40
- className: L(),
41
- placeholder: s ? void 0 : r,
42
- isDisabled: s || a,
43
- isInvalid: l,
44
- onBlur: b,
45
- ...j,
42
+ onOpenChange: M,
43
+ ...w,
44
+ ref: N,
45
+ className: j(),
46
+ placeholder: l ? void 0 : s,
47
+ isDisabled: l || i,
48
+ isInvalid: n,
49
+ onBlur: v,
50
+ ...B,
46
51
  children: [
47
52
  /* @__PURE__ */ e(
48
- V,
53
+ G,
49
54
  {
50
- isDisabled: s,
51
- isInvalid: l,
52
- isReadOnly: a,
53
- isOpen: w
55
+ isDisabled: l,
56
+ isInvalid: n,
57
+ isReadOnly: i,
58
+ isOpen: L,
59
+ renderValue: S
54
60
  }
55
61
  ),
56
62
  /* @__PURE__ */ e(
57
- z,
63
+ V,
58
64
  {
59
65
  offset: 1,
60
66
  containerPadding: 8,
61
- className: P(),
62
- placement: h,
63
- children: f ? /* @__PURE__ */ c(A, { filter: O, children: [
67
+ className: z(),
68
+ placement: x,
69
+ children: h ? /* @__PURE__ */ d($, { filter: P, children: [
64
70
  /* @__PURE__ */ e(
65
- U,
71
+ q,
66
72
  {
67
- "aria-label": x ?? v.formatMessage({
73
+ "aria-label": g ?? O.formatMessage({
68
74
  id: "unity:component:select:search:label",
69
75
  defaultMessage: "Search options"
70
76
  })
71
77
  }
72
78
  ),
73
79
  /* @__PURE__ */ e(
74
- p,
80
+ f,
75
81
  {
76
- layout: d,
82
+ layout: y,
77
83
  layoutOptions: {
78
84
  padding: 8
79
85
  },
80
- children: /* @__PURE__ */ e(y, { items: o, className: u(), children: t })
86
+ children: /* @__PURE__ */ e(
87
+ m,
88
+ {
89
+ items: t,
90
+ className: c(),
91
+ renderEmptyState: p,
92
+ children: r
93
+ }
94
+ )
81
95
  }
82
96
  )
83
97
  ] }) : /* @__PURE__ */ e(
84
- p,
98
+ f,
85
99
  {
86
- layout: d,
100
+ layout: y,
87
101
  layoutOptions: {
88
102
  padding: 8
89
103
  },
90
- children: /* @__PURE__ */ e(y, { items: o, className: u(), children: t })
104
+ children: /* @__PURE__ */ e(
105
+ m,
106
+ {
107
+ items: t,
108
+ className: c(),
109
+ renderEmptyState: p,
110
+ children: r
111
+ }
112
+ )
91
113
  }
92
114
  )
93
115
  }
@@ -95,10 +117,10 @@ const $ = F({
95
117
  ]
96
118
  }
97
119
  );
98
- }, q = B(function(o, r) {
99
- return k(o, r);
120
+ }, K = C(function(t, s) {
121
+ return J(t, s);
100
122
  });
101
- q.displayName = "Select";
123
+ K.displayName = "Select";
102
124
  export {
103
- q as Select
125
+ K as Select
104
126
  };
package/dist/esm/components/select/TanstackSelect.js CHANGED
@@ -1,15 +1,21 @@
1
- import { jsx as d } from "react/jsx-runtime";
2
- import { forwardRef as m } from "react";
3
- import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
4
- import { useFieldA11yContext as u } from "../form-field/TanstackFormField.context.js";
5
- import { Select as p } from "./Select.js";
6
- const b = ({ onBlur: o, isReadOnly: a, isDisabled: l, ...r }, s) => {
7
- const e = f(), t = u(), c = e.state.meta.isTouched && !e.state.meta.isValid, i = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
8
- return /* @__PURE__ */ d(
9
- p,
1
+ import { jsx as m } from "react/jsx-runtime";
2
+ import { forwardRef as f } from "react";
3
+ import { useFieldContext as u } from "../../hooks/tanstack-form-context.js";
4
+ import { useFieldA11yContext as p } from "../form-field/TanstackFormField.context.js";
5
+ import { Select as b } from "./Select.js";
6
+ const h = ({
7
+ onBlur: o,
8
+ isReadOnly: a,
9
+ isDisabled: l,
10
+ renderValue: r,
11
+ ...s
12
+ }, c) => {
13
+ const e = u(), t = p(), d = e.state.meta.isTouched && !e.state.meta.isValid, i = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
14
+ return /* @__PURE__ */ m(
15
+ b,
10
16
  {
11
- ...r,
12
- ref: s,
17
+ ...s,
18
+ ref: c,
13
19
  value: e.state.value ?? "",
14
20
  onChange: (n) => {
15
21
  e.handleChange(n);
@@ -19,16 +25,17 @@ const b = ({ onBlur: o, isReadOnly: a, isDisabled: l, ...r }, s) => {
19
25
  },
20
26
  isReadOnly: a,
21
27
  isDisabled: l,
22
- isInvalid: c,
28
+ isInvalid: d,
23
29
  "aria-labelledby": t.labelId,
24
30
  "aria-describedby": i.length > 0 ? i : void 0,
25
- "aria-details": t.contextualLinkId
31
+ "aria-details": t.contextualLinkId,
32
+ renderValue: r
26
33
  }
27
34
  );
28
- }, h = m(function(a, l) {
29
- return b(a, l);
35
+ }, x = f(function(a, l) {
36
+ return h(a, l);
30
37
  });
31
- h.displayName = "TanstackSelect";
38
+ x.displayName = "TanstackSelect";
32
39
  export {
33
- h as TanstackSelect
40
+ x as TanstackSelect
34
41
  };
package/dist/esm/components/select/parts/SelectButton.d.ts CHANGED
@@ -1,8 +1,19 @@
1
- export interface SelectButtonProps {
1
+ import { Node } from '@react-types/shared';
2
+ import { ReactNode } from 'react';
3
+ export interface SelectButtonProps<T extends object> {
4
+ /** Whether the button is disabled */
2
5
  isDisabled?: boolean;
6
+ /** Whether the button is in an invalid state */
3
7
  isInvalid?: boolean;
8
+ /** Whether the button is read-only */
4
9
  isReadOnly?: boolean;
10
+ /** Whether the select popover is currently open */
5
11
  isOpen: boolean;
12
+ /** Custom render function to format the selected value display */
13
+ renderValue?: (selectedItem: Node<T>) => ReactNode;
6
14
  }
7
- declare const SelectButton: import('react').ForwardRefExoticComponent<SelectButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
15
+ declare const SelectButton: {
16
+ <T extends object>({ isDisabled, isInvalid, isReadOnly, isOpen, renderValue, }: SelectButtonProps<T>): import("react/jsx-runtime").JSX.Element;
17
+ displayName: string;
18
+ };
8
19
  export { SelectButton };
package/dist/esm/components/select/parts/SelectButton.js CHANGED
@@ -1,10 +1,9 @@
1
- import { jsxs as o, jsx as e } from "react/jsx-runtime";
2
- import { forwardRef as f } from "react";
3
- import { uyTv as m } from "@payfit/unity-themes";
4
- import { Button as b, SelectValue as p } from "react-aria-components";
1
+ import { jsxs as l, jsx as e } from "react/jsx-runtime";
2
+ import { uyTv as b } from "@payfit/unity-themes";
3
+ import { Button as p, SelectValue as n } from "react-aria-components";
5
4
  import { useIntl as v } from "react-intl";
6
- import { Icon as a } from "../../icon/Icon.js";
7
- const x = m({
5
+ import { Icon as u } from "../../icon/Icon.js";
6
+ const x = b({
8
7
  slots: {
9
8
  base: "uy:flex uy:flex-row uy:gap-100 uy:h-5.5 uy:sm:h-500 uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:border-solid uy:focus-visible:ring-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:ring-offset-2 uy:outline-none uy:border",
10
9
  selectValue: [
@@ -52,49 +51,52 @@ const x = m({
52
51
  isInvalid: !1,
53
52
  isReadOnly: !1
54
53
  }
55
- }), h = f(
56
- ({ isDisabled: r, isInvalid: t, isReadOnly: s, isOpen: u }, l) => {
57
- const n = v(), { base: i, selectValue: d, iconWrapper: y, icon: c } = x({
54
+ }), h = ({
55
+ isDisabled: r,
56
+ isInvalid: t,
57
+ isReadOnly: i,
58
+ isOpen: d,
59
+ renderValue: o
60
+ }) => {
61
+ const c = v(), { base: y, selectValue: a, iconWrapper: f, icon: m } = x({
62
+ isDisabled: r,
63
+ isInvalid: t,
64
+ isReadOnly: i
65
+ });
66
+ return /* @__PURE__ */ l(
67
+ p,
68
+ {
69
+ "data-dd-privacy": "mask",
70
+ className: y(),
58
71
  isDisabled: r,
59
- isInvalid: t,
60
- isReadOnly: s
61
- });
62
- return /* @__PURE__ */ o(
63
- b,
64
- {
65
- "data-dd-privacy": "mask",
66
- className: i(),
67
- ref: l,
68
- isDisabled: r,
69
- "data-unity-slot": "select-button",
70
- children: [
71
- /* @__PURE__ */ e(p, { className: d(), translate: "no" }),
72
- /* @__PURE__ */ o("div", { className: y(), children: [
73
- t && /* @__PURE__ */ e(
74
- a,
75
- {
76
- src: "WarningCircleOutlined",
77
- color: "content.form.invalid",
78
- alt: n.formatMessage({
79
- id: "unity:component:form-field:form-input:error:alt",
80
- defaultMessage: "Error"
81
- })
82
- }
83
- ),
84
- /* @__PURE__ */ e(
85
- a,
86
- {
87
- className: c(),
88
- "aria-hidden": "true",
89
- src: u ? "CaretUpOutlined" : "CaretDownOutlined"
90
- }
91
- )
92
- ] })
93
- ]
94
- }
95
- );
96
- }
97
- );
72
+ "data-unity-slot": "select-button",
73
+ children: [
74
+ o ? /* @__PURE__ */ e(n, { className: a(), translate: "no", children: ({ state: s }) => s.selectedItems[0] ? o(s.selectedItems[0]) : null }) : /* @__PURE__ */ e(n, { className: a(), translate: "no" }),
75
+ /* @__PURE__ */ l("div", { className: f(), children: [
76
+ t && /* @__PURE__ */ e(
77
+ u,
78
+ {
79
+ src: "WarningCircleOutlined",
80
+ color: "content.form.invalid",
81
+ alt: c.formatMessage({
82
+ id: "unity:component:form-field:form-input:error:alt",
83
+ defaultMessage: "Error"
84
+ })
85
+ }
86
+ ),
87
+ /* @__PURE__ */ e(
88
+ u,
89
+ {
90
+ className: m(),
91
+ "aria-hidden": "true",
92
+ src: d ? "CaretUpOutlined" : "CaretDownOutlined"
93
+ }
94
+ )
95
+ ] })
96
+ ]
97
+ }
98
+ );
99
+ };
98
100
  h.displayName = "SelectButton";
99
101
  export {
100
102
  h as SelectButton
package/dist/esm/components/select-field/TanstackSelectField.js CHANGED
@@ -1,11 +1,11 @@
1
- import { jsxs as s, jsx as r } from "react/jsx-runtime";
2
- import { forwardRef as d } from "react";
3
- import { TanstackFormFeedbackText as f } from "../form-field/parts/TanstackFormFeedbackText.js";
4
- import { TanstackFormHelperText as k } from "../form-field/parts/TanstackFormHelperText.js";
5
- import { TanstackFormLabel as p } from "../form-field/parts/TanstackFormLabel.js";
6
- import { TanstackFormField as F } from "../form-field/TanstackFormField.js";
7
- import { TanstackSelect as T } from "../select/TanstackSelect.js";
8
- const S = ({
1
+ import { jsxs as d, jsx as r } from "react/jsx-runtime";
2
+ import { forwardRef as f } from "react";
3
+ import { TanstackFormFeedbackText as k } from "../form-field/parts/TanstackFormFeedbackText.js";
4
+ import { TanstackFormHelperText as p } from "../form-field/parts/TanstackFormHelperText.js";
5
+ import { TanstackFormLabel as F } from "../form-field/parts/TanstackFormLabel.js";
6
+ import { TanstackFormField as T } from "../form-field/TanstackFormField.js";
7
+ import { TanstackSelect as S } from "../select/TanstackSelect.js";
8
+ const x = ({
9
9
  label: a,
10
10
  helperText: t,
11
11
  contextualLink: e,
@@ -13,32 +13,34 @@ const S = ({
13
13
  isDisabled: c,
14
14
  isReadOnly: m,
15
15
  requiredVariant: n,
16
- ...i
17
- }, l) => /* @__PURE__ */ s(F, { children: [
16
+ renderValue: i,
17
+ ...l
18
+ }, s) => /* @__PURE__ */ d(T, { children: [
18
19
  /* @__PURE__ */ r(
19
- p,
20
+ F,
20
21
  {
21
22
  requiredVariant: n,
22
23
  isRequired: o,
23
24
  children: a
24
25
  }
25
26
  ),
26
- t && /* @__PURE__ */ r(k, { children: t }),
27
+ t && /* @__PURE__ */ r(p, { children: t }),
27
28
  /* @__PURE__ */ r(
28
- T,
29
+ S,
29
30
  {
30
- ref: l,
31
+ ref: s,
31
32
  isDisabled: c,
32
33
  isReadOnly: m,
33
- ...i
34
+ renderValue: i,
35
+ ...l
34
36
  }
35
37
  ),
36
- /* @__PURE__ */ r(f, {}),
38
+ /* @__PURE__ */ r(k, {}),
37
39
  e
38
- ] }), x = d(function(t, e) {
39
- return S(t, e);
40
+ ] }), u = f(function(t, e) {
41
+ return x(t, e);
40
42
  });
41
- x.displayName = "TanstackSelectField";
43
+ u.displayName = "TanstackSelectField";
42
44
  export {
43
- x as TanstackSelectField
45
+ u as TanstackSelectField
44
46
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payfit/unity-components",
3
- "version": "2.6.0",
3
+ "version": "2.7.1",
4
4
  "module": "./dist/esm/index.js",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -42,7 +42,7 @@
42
42
  "@hookform/devtools": "4.4.0",
43
43
  "@hookform/resolvers": "5.2.1",
44
44
  "@internationalized/date": "3.11.0",
45
- "@payfit/unity-illustrations": "2.6.0",
45
+ "@payfit/unity-illustrations": "2.7.1",
46
46
  "@radix-ui/react-avatar": "1.1.11",
47
47
  "@radix-ui/react-slot": "1.2.4",
48
48
  "@react-aria/interactions": "3.27.0",
@@ -71,8 +71,8 @@
71
71
  },
72
72
  "peerDependencies": {
73
73
  "@hookform/devtools": "^4",
74
- "@payfit/unity-icons": "2.6.0",
75
- "@payfit/unity-themes": "2.6.0",
74
+ "@payfit/unity-icons": "2.7.1",
75
+ "@payfit/unity-themes": "2.7.1",
76
76
  "@storybook/react-vite": "^10.2.2",
77
77
  "@tanstack/react-query": "^5",
78
78
  "@tanstack/react-router": "^1.131",
@@ -91,9 +91,9 @@
91
91
  "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
92
92
  "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
93
93
  "@payfit/storybook-config": "0.0.0-use.local",
94
- "@payfit/unity-icons": "2.6.0",
95
- "@payfit/unity-illustrations": "2.6.0",
96
- "@payfit/unity-themes": "2.6.0",
94
+ "@payfit/unity-icons": "2.7.1",
95
+ "@payfit/unity-illustrations": "2.7.1",
96
+ "@payfit/unity-themes": "2.7.1",
97
97
  "@payfit/vite-configs": "0.0.0-use.local",
98
98
  "@storybook/addon-a11y": "10.2.7",
99
99
  "@storybook/addon-docs": "10.2.7",