@jobber/components 7.1.2 → 7.2.0

package/dist/Chip/Chip.d.ts

@@ -2,7 +2,13 @@ import React from "react";
 import { ChipPrefix } from "./components/ChipPrefix/Chip.Prefix";
 import { ChipSuffix } from "./components/ChipSuffix/Chip.Suffix";
 import type { ChipProps } from "./Chip.types";
-export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
+type ChipElement = HTMLButtonElement | HTMLDivElement;
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.HTMLAttributes<ChipElement> & {
+    readonly "data-testid"?: string;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+} & React.RefAttributes<HTMLDivElement | HTMLButtonElement>> & {
     Prefix: typeof ChipPrefix;
     Suffix: typeof ChipSuffix;
 };
+export {};

package/dist/Chip/Chip.types.d.ts

@@ -44,9 +44,14 @@ export interface ChipProps extends PropsWithChildren {
      */
     readonly variation?: ChipVariations;
     /**
-     * Chip Click Callback. Sends an event and sometimes a value (SelectableChip).
+     * Chip click callback using a standard event-first signature.
      */
-    readonly onClick?: (value: string | number | undefined, ev: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    readonly onClick?: (ev: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /**
+     * Value-first click callback retained as an upgrade path for existing consumers.
+     * @deprecated Prefer `onClick` with a closure over the value.
+     */
+    readonly onClickValue?: (value: string | number | undefined, ev: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     /**
      * Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed.
      */

package/dist/Chip/index.cjs

@@ -2,6 +2,7 @@
 
 var Chip = require('../Chip-cjs.js');
 var ChipDismissible = require('../ChipDismissible-cjs.js');
+require('../tslib.es6-cjs.js');
 require('react');
 require('classnames');
 require('@jobber/hooks');
@@ -18,7 +19,6 @@ require('react/jsx-runtime');
 require('react-dom');
 require('../floating-ui.react-dom-cjs.js');
 require('framer-motion');
-require('../tslib.es6-cjs.js');
 
 
 

package/dist/Chip/index.mjs

@@ -1,5 +1,6 @@
 export { C as Chip } from '../Chip-es.js';
 export { a as ChipDismissible, C as ChipSelectable } from '../ChipDismissible-es.js';
+import '../tslib.es6-es.js';
 import 'react';
 import 'classnames';
 import '@jobber/hooks';
@@ -16,4 +17,3 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import '../floating-ui.react-dom-es.js';
 import 'framer-motion';
-import '../tslib.es6-es.js';

package/dist/Chip-cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
 var classnames = require('classnames');
 var jobberHooks = require('@jobber/hooks');
@@ -64,13 +65,14 @@ function ChipSuffix({ children, className, onClick, testID, ariaLabel, }) {
     return (React.createElement("span", { className: classnames(onClick ? styles$1.clickableSuffix : styles$1.suffix, className, !singleChild && styles$1.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
 }
 
-const ChipComponent = React.forwardRef(({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }, ref) => {
+const ChipComponent = React.forwardRef((_a, ref) => {
+    var { ariaLabel, "aria-label": ariaLabelProp, disabled, heading, invalid, label, value, testID, onClick, onClickValue, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", className, style, onFocus, onBlur, onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, title, "data-testid": dataTestId } = _a, rest = tslib_es6.__rest(_a, ["ariaLabel", "aria-label", "disabled", "heading", "invalid", "label", "value", "testID", "onClick", "onClickValue", "onKeyDown", "children", "role", "tabIndex", "variation", "className", "style", "onFocus", "onBlur", "onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd", "onContextMenu", "title", "data-testid"]);
     const classes = classnames(styles$1.chip, {
         [styles$1.invalid]: invalid,
         [styles$1.base]: variation === "base",
         [styles$1.subtle]: variation === "subtle",
         [styles$1.disabled]: disabled,
-    });
+    }, className);
     const prefix = useChildComponent.useChildComponent(children, d => d.type === ChipPrefix);
     const suffix = useChildComponent.useChildComponent(children, d => d.type === ChipSuffix);
     const [labelRef, labelFullyVisible] = jobberHooks.useInView();
@@ -90,29 +92,42 @@ const ChipComponent = React.forwardRef(({ ariaLabel, disabled, heading, invalid,
             !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
                 React.createElement("span", null)))),
         suffix));
-    // Use createElement to properly handle the ref typing
-    return (React.createElement(Tooltip.Tooltip, { message: tooltipMessage, setTabIndex: false }, onClick
-        ? React.createElement("button", {
-            className: classes,
-            onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev),
-            tabIndex: disabled ? -1 : tabIndex,
-            onKeyDown,
-            "aria-label": ariaLabel,
-            disabled,
-            role,
-            "data-testid": testID,
-            type: "button",
-            ref,
-        }, chipContent)
-        : React.createElement("div", {
-            className: classes,
-            tabIndex: disabled ? -1 : tabIndex,
-            onKeyDown,
-            "aria-label": ariaLabel,
-            role,
-            "data-testid": testID,
-            ref,
-        }, chipContent)));
+    const isClickable = Boolean(onClick || onClickValue);
+    const handleClick = (ev) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+        onClickValue === null || onClickValue === void 0 ? void 0 : onClickValue(value, ev);
+    };
+    return (React.createElement(Tooltip.Tooltip, { message: tooltipMessage, setTabIndex: false }, isClickable
+        ? React.createElement("button", Object.assign(Object.assign({}, rest), { className: classes, style, onClick: handleClick, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
+            onFocus,
+            onBlur,
+            onPointerDown,
+            onPointerUp,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, disabled,
+            role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title, type: "button", ref }), chipContent)
+        : React.createElement("div", Object.assign(Object.assign({}, rest), { className: classes, style, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
+            onFocus,
+            onBlur,
+            onPointerDown,
+            onPointerUp,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title,
+            ref }), chipContent)));
 });
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
     let message = "";

package/dist/Chip-es.js

@@ -1,3 +1,4 @@
+import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useRef, forwardRef } from 'react';
 import classnames from 'classnames';
 import { useInView } from '@jobber/hooks';
@@ -62,13 +63,14 @@ function ChipSuffix({ children, className, onClick, testID, ariaLabel, }) {
     return (React__default.createElement("span", { className: classnames(onClick ? styles$1.clickableSuffix : styles$1.suffix, className, !singleChild && styles$1.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
 }
 
-const ChipComponent = forwardRef(({ ariaLabel, disabled, heading, invalid, label, value, testID, onClick, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", }, ref) => {
+const ChipComponent = forwardRef((_a, ref) => {
+    var { ariaLabel, "aria-label": ariaLabelProp, disabled, heading, invalid, label, value, testID, onClick, onClickValue, onKeyDown, children, role = "button", tabIndex = 0, variation = "base", className, style, onFocus, onBlur, onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, onTouchStart, onTouchEnd, onContextMenu, title, "data-testid": dataTestId } = _a, rest = __rest(_a, ["ariaLabel", "aria-label", "disabled", "heading", "invalid", "label", "value", "testID", "onClick", "onClickValue", "onKeyDown", "children", "role", "tabIndex", "variation", "className", "style", "onFocus", "onBlur", "onPointerDown", "onPointerUp", "onPointerEnter", "onPointerLeave", "onMouseDown", "onMouseUp", "onMouseEnter", "onMouseLeave", "onTouchStart", "onTouchEnd", "onContextMenu", "title", "data-testid"]);
     const classes = classnames(styles$1.chip, {
         [styles$1.invalid]: invalid,
         [styles$1.base]: variation === "base",
         [styles$1.subtle]: variation === "subtle",
         [styles$1.disabled]: disabled,
-    });
+    }, className);
     const prefix = useChildComponent(children, d => d.type === ChipPrefix);
     const suffix = useChildComponent(children, d => d.type === ChipSuffix);
     const [labelRef, labelFullyVisible] = useInView();
@@ -88,29 +90,42 @@ const ChipComponent = forwardRef(({ ariaLabel, disabled, heading, invalid, label
             !labelFullyVisible && (React__default.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
                 React__default.createElement("span", null)))),
         suffix));
-    // Use createElement to properly handle the ref typing
-    return (React__default.createElement(Tooltip, { message: tooltipMessage, setTabIndex: false }, onClick
-        ? React__default.createElement("button", {
-            className: classes,
-            onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev),
-            tabIndex: disabled ? -1 : tabIndex,
-            onKeyDown,
-            "aria-label": ariaLabel,
-            disabled,
-            role,
-            "data-testid": testID,
-            type: "button",
-            ref,
-        }, chipContent)
-        : React__default.createElement("div", {
-            className: classes,
-            tabIndex: disabled ? -1 : tabIndex,
-            onKeyDown,
-            "aria-label": ariaLabel,
-            role,
-            "data-testid": testID,
-            ref,
-        }, chipContent)));
+    const isClickable = Boolean(onClick || onClickValue);
+    const handleClick = (ev) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+        onClickValue === null || onClickValue === void 0 ? void 0 : onClickValue(value, ev);
+    };
+    return (React__default.createElement(Tooltip, { message: tooltipMessage, setTabIndex: false }, isClickable
+        ? React__default.createElement("button", Object.assign(Object.assign({}, rest), { className: classes, style, onClick: handleClick, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
+            onFocus,
+            onBlur,
+            onPointerDown,
+            onPointerUp,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, disabled,
+            role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title, type: "button", ref }), chipContent)
+        : React__default.createElement("div", Object.assign(Object.assign({}, rest), { className: classes, style, tabIndex: disabled ? -1 : tabIndex, onKeyDown,
+            onFocus,
+            onBlur,
+            onPointerDown,
+            onPointerUp,
+            onPointerEnter,
+            onPointerLeave,
+            onMouseDown,
+            onMouseUp,
+            onMouseEnter,
+            onMouseLeave,
+            onTouchStart,
+            onTouchEnd,
+            onContextMenu, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelProp, role, "data-testid": testID !== null && testID !== void 0 ? testID : dataTestId, title,
+            ref }), chipContent)));
 });
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {
     let message = "";

package/dist/Combobox/components/ComboboxTrigger/index.cjs

@@ -3,6 +3,7 @@
 var ComboboxTrigger = require('../../../ComboboxTrigger-cjs.js');
 require('react');
 require('../../../Chip-cjs.js');
+require('../../../tslib.es6-cjs.js');
 require('classnames');
 require('@jobber/hooks');
 require('../../../Avatar-cjs.js');
@@ -18,7 +19,6 @@ require('react/jsx-runtime');
 require('react-dom');
 require('../../../floating-ui.react-dom-cjs.js');
 require('framer-motion');
-require('../../../tslib.es6-cjs.js');
 require('../../../ComboboxProvider-cjs.js');
 
 

package/dist/Combobox/components/ComboboxTrigger/index.mjs

@@ -1,6 +1,7 @@
 export { C as ComboboxTrigger } from '../../../ComboboxTrigger-es.js';
 import 'react';
 import '../../../Chip-es.js';
+import '../../../tslib.es6-es.js';
 import 'classnames';
 import '@jobber/hooks';
 import '../../../Avatar-es.js';
@@ -16,5 +17,4 @@ import 'react/jsx-runtime';
 import 'react-dom';
 import '../../../floating-ui.react-dom-es.js';
 import 'framer-motion';
-import '../../../tslib.es6-es.js';
 import '../../../ComboboxProvider-es.js';

package/dist/InternalChipDismissible-cjs.js

@@ -14,7 +14,7 @@ var Chip = require('./Chip-cjs.js');
 require('./tslib.es6-cjs.js');
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React.createElement(Chip.Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+    return (React.createElement(Chip.Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick, label: label },
         prefix && React.createElement(Chip.Chip.Prefix, null, prefix),
         suffix && React.createElement(Chip.Chip.Suffix, null, suffix)));
 }

package/dist/InternalChipDismissible-es.js

@@ -12,7 +12,7 @@ import { C as Chip, I as InternalChipButton } from './Chip-es.js';
 import './tslib.es6-es.js';
 
 function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick ? (_, ev) => onClick(ev) : undefined, label: label },
+    return (React__default.createElement(Chip, { disabled: disabled, invalid: invalid, onKeyDown: onKeyDown, testID: "ATL-InternalChip", ariaLabel: ariaLabel, tabIndex: tabIndex, variation: active ? "base" : "subtle", role: tabIndex !== undefined ? "option" : undefined, onClick: onClick, label: label },
         prefix && React__default.createElement(Chip.Prefix, null, prefix),
         suffix && React__default.createElement(Chip.Suffix, null, suffix)));
 }

package/dist/docs/Chip/Chip.md

@@ -362,11 +362,13 @@ those more complex selection flows.
 |------|------|----------|---------|-------------|
 | `label` | `string` | Yes | — | The content of the chip. Will be displayed on the right if you include a heading. |
 | `ariaLabel` | `string` | No | — | Accessible label, which can be different from the primary label. |
+| `data-testid` | `string` | No | — |  |
 | `disabled` | `boolean` | No | — | Disables both mouse and keyboard functionality, and updates the visual style of the Chip to appear disabled. |
 | `heading` | `string` | No | — | Adds more prominent text to act as a heading. Will be displayed on the left with a | separator. |
 | `invalid` | `boolean` | No | — | Changes Chip styling to inform the user of an issue. |
-| `onClick` | `(value: string | number, ev: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void` | No | — | Chip Click Callback. Sends an event and sometimes a value (SelectableChip). |
-| `onKeyDown` | `(ev: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void` | No | — | Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed. |
+| `onClick` | `((ev: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void) & MouseEventHandler<ChipElement>` | No | — | Chip click callback using a standard event-first signature. |
+| `onClickValue` | `(value: string | number, ev: MouseEvent<HTMLButtonElement | HTMLDivElement, MouseEvent>) => void` | No | — | Value-first click callback retained as an upgrade path for existing consumers. @deprecated Prefer `onClick` with a cl... |
+| `onKeyDown` | `((ev: KeyboardEvent<HTMLButtonElement | HTMLDivElement>) => void) & KeyboardEventHandler<ChipElement>` | No | — | Callback. Called when you keydown on Chip. Ships the event, so you can get the key pushed. |
 | `ref` | `Ref<HTMLButtonElement | HTMLDivElement>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
 | `role` | `string` | No | `button` | The accessible role the Chip is fulfilling. Defaults to 'button' |
 | `tabIndex` | `number` | No | `0` | Used for accessibility purpopses, specifically using the tab key as navigation. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.1.2",
+  "version": "7.2.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "51968df8e0c2cc9dab415e165643c88284e8bf28"
+  "gitHead": "3e24f22e0704d0c879ccd8d76c37ac0ff9866094"
 }