@payfit/unity-components 2.19.2 → 2.20.0

package/dist/esm/components/data-table/parts/DataTableBulkActions.js

@@ -1,65 +1,150 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useRef as i, useState as A, useCallback as R } from "react";
-import { useHotkeys as u } from "react-hotkeys-hook";
-import { ActionBar as S } from "../../action-bar/ActionBar.js";
-import { ActionBarAction as p } from "../../action-bar/parts/ActionBarAction.js";
-import { ActionBarRoot as B } from "../../action-bar/parts/ActionBarRoot.js";
-function b({
-  table: e,
-  actions: s
+import { jsx as o, jsxs as m, Fragment as A } from "react/jsx-runtime";
+import { useRef as d, useState as S, useCallback as k } from "react";
+import { useHotkeys as f } from "react-hotkeys-hook";
+import { useIntl as v, FormattedMessage as c } from "react-intl";
+import { ActionBar as I } from "../../action-bar/ActionBar.js";
+import { ActionBarButton as P } from "../../action-bar/parts/ActionBarButton.js";
+import { ActionBarIconButton as R } from "../../action-bar/parts/ActionBarIconButton.js";
+import { ActionBarRoot as w } from "../../action-bar/parts/ActionBarRoot.js";
+import { Button as x } from "../../button/Button.js";
+function F({
+  selectionCount: t,
+  onClearSelection: a,
+  renderSelectionText: r,
+  hasKeyshortcuts: s,
+  keyShortcuts: n
 }) {
-  const n = i(null), r = i(null), [a, t] = A(!1);
-  u(
-    "f6",
+  return /* @__PURE__ */ m(A, { children: [
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: "uy:typography-body uy:whitespace-nowrap! uy:sr-only uy:md:not-sr-only",
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: [
+          r ? r(t) : /* @__PURE__ */ o(
+            c,
+            {
+              id: "unity:component:action-bar:selection-count-text",
+              defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
+              values: { selectionCount: t }
+            }
+          ),
+          s && /* @__PURE__ */ o("span", { className: "uy:sr-only", children: /* @__PURE__ */ o(
+            c,
+            {
+              id: "unity:component:action-bar:key-shortcuts-text",
+              defaultMessage: "Use {keyShortcuts} to focus the action bar",
+              values: {
+                keyShortcuts: n
+              }
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o(x, { color: "inverted", variant: "ghost", onPress: a, children: /* @__PURE__ */ o(
+      c,
+      {
+        id: "unity:component:action-bar:clear-selection-button",
+        defaultMessage: "Clear selection"
+      }
+    ) })
+  ] });
+}
+const C = (t) => t.type === "icon-button";
+function M({
+  table: t,
+  actions: a,
+  renderSelectionText: r
+}) {
+  const s = d(null), n = d(null), [g, i] = S(!1), p = v(), l = "f6";
+  f(
+    l,
     () => {
-      if ((e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected()) && s && n.current) {
-        const l = n.current.querySelectorAll(
+      if ((t.getIsAllPageRowsSelected() || t.getIsSomePageRowsSelected()) && s.current) {
+        const u = s.current.querySelectorAll(
           'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
         );
-        r.current = document.activeElement, l.length > 0 && (l[0].focus(), t(!0));
+        n.current = document.activeElement, u.length > 0 && (u[0].focus(), i(!0));
       }
     },
     {
       enableOnFormTags: !0
     }
-  ), u(
+  ), f(
     "esc",
     () => {
-      a && r.current && (r.current.focus(), t(!1));
+      g && n.current && (n.current.focus(), i(!1));
     },
     {
       enableOnFormTags: !0
     }
   );
-  const f = e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(), m = e.getSelectedRowModel().rows.length, d = e.getPageCount() > 0, g = R(() => {
-    e.resetRowSelection();
-  }, [e]);
-  return s ? /* @__PURE__ */ c(
-    B,
+  const b = t.getIsAllPageRowsSelected() || t.getIsSomePageRowsSelected(), y = t.getSelectedRowModel().rows.length, h = t.getPageCount() > 0, B = k(() => {
+    t.resetRowSelection();
+  }, [t]);
+  return /* @__PURE__ */ o(
+    w,
     {
-      isVisible: f,
-      offsetBottom: d ? "$600" : 0,
-      children: /* @__PURE__ */ c(
-        S,
+      isVisible: b,
+      offsetBottom: h ? "$600" : 0,
+      children: /* @__PURE__ */ o(
+        I,
         {
-          ref: n,
-          actions: s,
-          selectionCount: m,
-          onClearSelection: g,
+          ref: s,
+          actions: a,
+          prefixContent: /* @__PURE__ */ o(
+            F,
+            {
+              selectionCount: y,
+              onClearSelection: B,
+              renderSelectionText: r,
+              hasKeyshortcuts: !0,
+              keyShortcuts: l
+            }
+          ),
           onFocus: () => {
-            t(!0);
+            i(!0);
           },
           onBlur: () => {
-            t(!1);
+            i(!1);
           },
-          "aria-keyshortcuts": "f6",
-          children: (o) => /* @__PURE__ */ c(p, { ...o, children: o.label }, o.id)
+          "aria-keyshortcuts": l,
+          "aria-label": p.formatMessage({
+            id: "unity:component:action-bar:toolbar-label",
+            defaultMessage: "Bulk actions toolbar"
+          }),
+          children: (e) => C(e) ? /* @__PURE__ */ o(
+            R,
+            {
+              icon: e.meta.icon,
+              label: e.label,
+              variant: e.variant,
+              onPress: e.meta.onPress,
+              isDisabled: e.meta.isDisabled,
+              isLoading: e.meta.isLoading
+            },
+            e.id
+          ) : /* @__PURE__ */ o(
+            P,
+            {
+              variant: e.variant,
+              onPress: e.meta?.onPress,
+              prefixIcon: e.meta?.prefixIcon,
+              isDisabled: e.meta?.isDisabled,
+              isLoading: e.meta?.isLoading,
+              children: e.label
+            },
+            e.id
+          )
         }
       )
     }
-  ) : null;
+  );
 }
-b.displayName = "DataTableBulkActions";
+M.displayName = "DataTableBulkActions";
 export {
-  b as DataTableBulkActions
+  M as DataTableBulkActions
 };

package/dist/esm/components/icon-button/IconButton.d.ts

@@ -1,5 +1,6 @@
 import { UnityIcon } from '@payfit/unity-icons';
 import { AriaRole, ButtonHTMLAttributes } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { IconButtonGhost, IconButtonPrimary, IconButtonSecondary } from './IconButton.variants.js';
 interface IconButtonBaseProps {
     /** Label used to describe the action of the button */
@@ -8,6 +9,8 @@ interface IconButtonBaseProps {
     icon: UnityIcon;
     /** The function to trigger when the button is clicked */
     onClick?: () => void;
+    /** The function to trigger when the button is clicked or pressed in touch devices */
+    onPress?: AriaButtonProps['onPress'];
     /** Override the icon role */
     iconRole?: AriaRole;
     /** className to add to the button */
@@ -22,5 +25,6 @@ interface IconButtonVariantsSecondaryProps extends IconButtonBaseProps, Omit<Ico
 }
 interface IconButtonVariantsGhostProps extends IconButtonBaseProps, Omit<IconButtonGhost, 'variant' | 'color'>, Required<Pick<IconButtonGhost, 'variant' | 'color'>> {
 }
+export type IconButtonProps = IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps;
 export declare const IconButton: import('react').ForwardRefExoticComponent<(IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps) & import('react').RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/esm/components/icon-button/IconButton.js

@@ -1,50 +1,59 @@
-import { jsx as e, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { Button as b } from "react-aria-components";
-import B from "../../hooks/use-id.js";
-import { Icon as h } from "../icon/Icon.js";
-import { Spinner as I } from "../spinner/Spinner.js";
-import { Tooltip as N } from "../tooltip/Tooltip.js";
-import { iconButtonPrimary as x, iconButtonSecondary as j, iconButtonGhost as w } from "./IconButton.variants.js";
+import { jsx as e, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { Button as B } from "react-aria-components";
+import h from "../../hooks/use-id.js";
+import { Icon as I } from "../icon/Icon.js";
+import { Spinner as N } from "../spinner/Spinner.js";
+import { Tooltip as x } from "../tooltip/Tooltip.js";
+import { iconButtonPrimary as P, iconButtonSecondary as j, iconButtonGhost as w } from "./IconButton.variants.js";
 const C = ({
   variant: o,
   color: r,
-  isLoading: t,
-  isDisabled: n
-}) => o === "primary" ? x({
+  isLoading: n,
+  isDisabled: t
+}) => o === "primary" ? P({
   variant: o,
   color: r,
-  isDisabled: n,
-  isLoading: t
+  isDisabled: t,
+  isLoading: n
 }) : o === "secondary" ? j({
   variant: o,
   color: r,
-  isDisabled: n,
-  isLoading: t
+  isDisabled: t,
+  isLoading: n
 }) : w({
   variant: o,
   color: r,
-  isDisabled: n,
-  isLoading: t
-}), P = y(
+  isDisabled: t,
+  isLoading: n
+}), R = b(
   (o, r) => {
-    const t = B(), { button: n, icon: s } = C(o), { onClick: a, icon: m, isLoading: l, label: i, isDisabled: d, iconRole: u, ...f } = o, c = `icon-button-label-${t}`;
-    return /* @__PURE__ */ e(N, { title: i, children: /* @__PURE__ */ p(
-      b,
+    const n = h(), { button: t, icon: s } = C(o), {
+      onClick: a,
+      onPress: m,
+      icon: d,
+      isLoading: l,
+      label: i,
+      isDisabled: u,
+      iconRole: f,
+      ...p
+    } = o, c = `icon-button-label-${n}`;
+    return /* @__PURE__ */ e(x, { title: i, children: /* @__PURE__ */ y(
+      B,
       {
         ref: r,
         "data-dd-privacy": "allow",
-        ...f,
-        className: n({ class: o.className }),
-        onPress: a,
-        isDisabled: d || l,
+        ...p,
+        className: t({ class: o.className }),
+        onPress: m ?? a,
+        isDisabled: u || l,
         "aria-label": i,
         children: [
-          l ? /* @__PURE__ */ e(I, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
-            h,
+          l ? /* @__PURE__ */ e(N, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+            I,
             {
-              role: u,
-              src: m,
+              role: f,
+              src: d,
               className: s(),
               "aria-labelledby": c,
               color: "inherit"
@@ -56,7 +65,7 @@ const C = ({
     ) });
   }
 );
-P.displayName = "IconButton";
+R.displayName = "IconButton";
 export {
-  P as IconButton
+  R as IconButton
 };

package/dist/esm/components/menu/parts/RawMenuItem.d.ts

@@ -5,10 +5,11 @@ export interface MenuItemProps extends DataAttributes {
     children?: MenuItemAriaComponentProps['children'];
     href?: MenuItemAriaComponentProps['href'];
     onAction?: MenuItemAriaComponentProps['onAction'];
+    isDisabled?: MenuItemAriaComponentProps['isDisabled'];
     prefix?: ReactNode;
     className?: string;
 }
-export declare function RawMenuItem({ prefix, children, href, onAction, className, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
+export declare function RawMenuItem({ prefix, children, href, onAction, className, isDisabled, ...dataAttributes }: PropsWithChildren<MenuItemProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace RawMenuItem {
     var displayName: string;
 }

package/dist/esm/components/menu/parts/RawMenuItem.js

@@ -1,32 +1,34 @@
-import { jsxs as o, jsx as s } from "react/jsx-runtime";
-import { uyMerge as y } from "@payfit/unity-themes";
-import { MenuItem as i } from "react-aria-components";
-function l({
+import { jsxs as s, jsx as y } from "react/jsx-runtime";
+import { uyMerge as i } from "@payfit/unity-themes";
+import { MenuItem as l } from "react-aria-components";
+function c({
   prefix: e,
   children: u,
   href: t,
   onAction: r,
   className: a,
-  ...n
+  isDisabled: n,
+  ...o
 }) {
-  return /* @__PURE__ */ o(
-    i,
+  return /* @__PURE__ */ s(
+    l,
     {
       href: t,
+      isDisabled: n,
       onAction: r,
-      className: y(
+      className: i(
         "uy:cursor-pointer uy:flex uy:p-100 uy:items-start uy:gap-100 uy:rounded-25 uy:typography-body uy:text-content-neutral uy:hover:bg-surface-neutral-hover uy:data-[pressed]:bg-surface-neutral-pressed uy:focus-visible:outline-utility-focus-ring uy:active:bg-surface-neutral-active",
         a
       ),
-      ...n,
+      ...o,
       children: [
-        /* @__PURE__ */ s("div", { className: "uy:text-content-neutral-low", children: e || null }),
+        /* @__PURE__ */ y("div", { className: "uy:text-content-neutral-low", children: e || null }),
         u
       ]
     }
   );
 }
-l.displayName = "RawMenuItem";
+c.displayName = "RawMenuItem";
 export {
-  l as RawMenuItem
+  c as RawMenuItem
 };

package/dist/esm/index.d.ts

@@ -1,6 +1,7 @@
 export * from './components/actionable/Actionable.js';
 export * from './components/action-bar/ActionBar.js';
-export * from './components/action-bar/parts/ActionBarAction.js';
+export * from './components/action-bar/parts/ActionBarButton.js';
+export * from './components/action-bar/parts/ActionBarIconButton.js';
 export * from './components/action-bar/parts/ActionBarRoot.js';
 export * from './components/alert/Alert.js';
 export * from './components/alert/parts/AlertActions.js';