@jobber/components 7.14.1 → 7.14.3

package/dist/Button/Button.d.ts

@@ -2,10 +2,11 @@ import React from "react";
 import type { ButtonProps } from "./Button.types";
 import { ButtonIcon, ButtonLabel } from "./ButtonInternals";
 type ButtonElement = HTMLAnchorElement | HTMLButtonElement;
-type ButtonRuntimeProps = ButtonProps & React.HTMLAttributes<ButtonElement> & {
+type ButtonRuntimeProps = ButtonProps & Pick<React.HTMLAttributes<ButtonElement>, "aria-controls" | "aria-haspopup" | "aria-expanded" | "aria-label" | "onKeyDown" | "onKeyUp" | "onFocus" | "onBlur" | "onPointerDown" | "onPointerUp" | "onPointerEnter" | "onPointerLeave" | "onMouseEnter" | "onMouseLeave" | "onTouchStart" | "onTouchEnd" | "onContextMenu" | "tabIndex" | "title"> & {
     readonly className?: string;
     readonly ref?: React.Ref<ButtonElement>;
     readonly style?: React.CSSProperties;
+    readonly [key: `data-${string}`]: unknown;
 };
 declare function Button(props: ButtonRuntimeProps): React.JSX.Element;
 declare namespace Button {

package/dist/Button-cjs.js

@@ -80,7 +80,8 @@ function ButtonWrapper(props) {
     const { combined } = useButtonStyles(props);
     const isLinkButton = Boolean(url || to);
     const buttonClassNames = classnames(combined, UNSAFE_className.container, className);
-    const sharedTagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { className: buttonClassNames, id, style: Object.assign(Object.assign({}, style), UNSAFE_style.container) }), (!disabled && {
+    const dataAttributes = Object.fromEntries(Object.entries(rest).filter(([key]) => key.startsWith("data-")));
+    const sharedTagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, dataAttributes), { className: buttonClassNames, id, style: Object.assign(Object.assign({}, style), UNSAFE_style.container) }), (!disabled && {
         onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         },

package/dist/Button-es.js

@@ -78,7 +78,8 @@ function ButtonWrapper(props) {
     const { combined } = useButtonStyles(props);
     const isLinkButton = Boolean(url || to);
     const buttonClassNames = classnames(combined, UNSAFE_className.container, className);
-    const sharedTagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rest), { className: buttonClassNames, id, style: Object.assign(Object.assign({}, style), UNSAFE_style.container) }), (!disabled && {
+    const dataAttributes = Object.fromEntries(Object.entries(rest).filter(([key]) => key.startsWith("data-")));
+    const sharedTagProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, dataAttributes), { className: buttonClassNames, id, style: Object.assign(Object.assign({}, style), UNSAFE_style.container) }), (!disabled && {
         onClick: (event) => {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         },

package/dist/DatePicker-cjs.js

@@ -12758,7 +12758,7 @@ function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline,
     const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, renderInsidePortal);
     const { handleChange, handleCalendarOpen, handleCalendarClose } = useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus !== null && smartAutofocus !== void 0 ? smartAutofocus : true, focusOnSelectedDate);
     jobberHooks.useRefocusOnActivator(smartAutofocus ? open : false);
-    return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated", onKeyDown: event => {
+    return (React.createElement("div", { className: wrapperClassName, ref: ref, onKeyDown: event => {
             // Stop Escape from bubbling to parent floating elements (e.g. Modal).
             if (event.key === "Escape" && open) {
                 event.stopPropagation();
@@ -12809,7 +12809,7 @@ function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortall
 function DatePickerPortal({ portalId }) {
     const nodeId = floatingUi_react.useFloatingNodeId();
     const parentNodeId = floatingUi_react.useFloatingParentNodeId();
-    const portalDiv = React.createElement("div", { id: portalId, className: styles.portalContainer });
+    const portalDiv = (React.createElement("div", { id: portalId, className: styles.portalContainer, "data-elevation": "elevated" }));
     if (parentNodeId) {
         return (React.createElement(floatingUi_react.FloatingTree, null,
             React.createElement(floatingUi_react.FloatingNode, { id: nodeId },

package/dist/DatePicker-es.js

@@ -12756,7 +12756,7 @@ function DatePicker({ onChange, onMonthChange, onOpenChange, activator, inline,
     const { pickerRef } = useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, renderInsidePortal);
     const { handleChange, handleCalendarOpen, handleCalendarClose } = useDatePickerHandlers(onChange, setOpen, onOpenChange, smartAutofocus !== null && smartAutofocus !== void 0 ? smartAutofocus : true, focusOnSelectedDate);
     useRefocusOnActivator(smartAutofocus ? open : false);
-    return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated", onKeyDown: event => {
+    return (React__default.createElement("div", { className: wrapperClassName, ref: ref, onKeyDown: event => {
             // Stop Escape from bubbling to parent floating elements (e.g. Modal).
             if (event.key === "Escape" && open) {
                 event.stopPropagation();
@@ -12807,7 +12807,7 @@ function useEscapeKeyToCloseDatePicker(open, ref, focusOnSelectedDate, isPortall
 function DatePickerPortal({ portalId }) {
     const nodeId = useFloatingNodeId();
     const parentNodeId = useFloatingParentNodeId();
-    const portalDiv = React__default.createElement("div", { id: portalId, className: styles.portalContainer });
+    const portalDiv = (React__default.createElement("div", { id: portalId, className: styles.portalContainer, "data-elevation": "elevated" }));
     if (parentNodeId) {
         return (React__default.createElement(FloatingTree, null,
             React__default.createElement(FloatingNode, { id: nodeId },

package/dist/docs/Button/Button.md

@@ -908,6 +908,7 @@ export const styles = StyleSheet.create({
 | `ariaExpanded` | `boolean` | No | — |  |
 | `ariaHaspopup` | `boolean` | No | — |  |
 | `ariaLabel` | `string` | No | — |  |
+| `className` | `string` | No | — |  |
 | `disabled` | `boolean` | No | — |  |
 | `external` | `boolean` | No | — |  |
 | `fullWidth` | `boolean` | No | — |  |
@@ -917,10 +918,12 @@ export const styles = StyleSheet.create({
 | `label` | `string` | No | — |  |
 | `loading` | `boolean` | No | — |  |
 | `name` | `string` | No | — |  |
-| `onClick` | `((event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void) & MouseEventHandler<ButtonElement>` | No | — |  |
-| `onMouseDown` | `((event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void) & MouseEventHandler<ButtonElement>` | No | — |  |
+| `onClick` | `(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void` | No | — |  |
+| `onMouseDown` | `(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void` | No | — |  |
 | `ref` | `Ref<ButtonElement>` | No | — |  |
+| `role` | `string` | No | — | Used to override the default button role. |
 | `size` | `ButtonSize` | No | — |  |
+| `style` | `CSSProperties` | No | — |  |
 | `submit` | `boolean` | No | — | Allows the button to submit a form |
 | `to` | `LocationDescriptor<unknown> | ((location: Location<unknown>) => LocationDescriptor<unknown>)` | No | — | **Deprecated**: to will be removed in the next major version @deprecated |
 | `type` | `ButtonType` | No | — |  |

package/dist/styles.css

@@ -8788,8 +8788,7 @@ h2.react-datepicker__current-month {
 .Ma55F5Y-XhE- .react-datepicker__header {
   padding: 0;
   border-bottom: none;
-  background: rgba(255, 255, 255, 1);
-  background: var(--color-surface);
+  background-color: transparent;
 }
 
 .Epg-Ub8Dn9A- {
@@ -8835,6 +8834,12 @@ h2.react-datepicker__current-month {
   background: var(--color-interactive--background);
 }
 
+.Ma55F5Y-XhE- .react-datepicker__day--outside-month:last-child,
+.Ma55F5Y-XhE- .react-datepicker__day--outside-month:last-child:hover {
+  border-radius: 0 0 calc(4px + (4px / 2)) 0;
+  border-radius: 0 0 calc(var(--radius-small) + (var(--radius-small) / 2)) 0;
+}
+
 .Ma55F5Y-XhE- .react-datepicker__day--disabled {
   color: hsl(0, 0%, 58%);
   color: var(--color-disabled);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.14.1",
+  "version": "7.14.3",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "ff6902159ff1dc5baf938ffd349c558e4f581bb3"
+  "gitHead": "f1b2b9d6af409fb6ba45e91396ca75d2ac223eac"
 }