@jobber/components 6.55.0 → 6.56.1

package/dist/DataList/DataList.types.d.ts

@@ -245,6 +245,11 @@ interface BaseDataListItemActionsProps<T extends DataListObject> {
      * Callback when an item is clicked.
      */
     readonly onClick?: (item: T, event?: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * Disable the custom context menu. This allows the browser's native context menu to be shown.
+     * @default false
+     */
+    readonly disableContextMenu?: boolean;
 }
 export interface DataListBulkActionsProps {
     /**

package/dist/DataList/hooks/useGetItemActions.d.ts

@@ -3,4 +3,5 @@ import { DataListActionProps, DataListObject } from "../DataList.types";
 export declare function useGetItemActions<T extends DataListObject>(item: T): {
     actions: ReactElement<DataListActionProps<T>>[];
     hasActions: boolean;
+    disableContextMenu: boolean;
 };

package/dist/DataListItem-cjs.js

@@ -59,9 +59,11 @@ function DataListItemInternal({ children, item, }) {
 }
 
 function useGetItemActions(item) {
+    var _a;
     const { itemActionComponent } = DataListContext.useDataListContext();
     const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
     const actionsArray = React.Children.toArray(itemActions);
+    const disableContextMenu = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.disableContextMenu) !== null && _a !== void 0 ? _a : false;
     const actions = React.useMemo(() => {
         return actionsArray.filter(action => {
             if (React.isValidElement(action) && action.props.visible) {
@@ -73,6 +75,7 @@ function useGetItemActions(item) {
     return {
         actions: actions,
         hasActions: Boolean(actions.length),
+        disableContextMenu,
     };
 }
 
@@ -81,12 +84,12 @@ function DataListItem({ item, layout, }) {
     const [showMenu, setShowMenu] = React.useState(false);
     const [contextPosition, setContextPosition] = React.useState();
     const generatedItem = React.useMemo(() => DataList_utils.generateListItemElement(item), [item]);
-    const { actions, hasActions } = useGetItemActions(item);
+    const { actions, hasActions, disableContextMenu } = useGetItemActions(item);
     const isContextMenuVisible = Boolean(contextPosition);
     const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
     const shouldShowHoverMenu = showMenu && hasActions && !hasInLayoutActions && !shouldShowContextMenu;
     return (React.createElement(DataListLayoutContext$1.DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
-        React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(DataList_module.styles.listItem, {
+        React.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: disableContextMenu ? undefined : handleContextMenu, className: classnames(DataList_module.styles.listItem, {
                 [DataList_module.styles.active]: showMenu && isContextMenuVisible,
             }), key: item.id },
             React.createElement(DataListItemInternal, { item: item },

package/dist/DataListItem-es.js

@@ -57,9 +57,11 @@ function DataListItemInternal({ children, item, }) {
 }
 
 function useGetItemActions(item) {
+    var _a;
     const { itemActionComponent } = useDataListContext();
     const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
     const actionsArray = Children.toArray(itemActions);
+    const disableContextMenu = (_a = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.disableContextMenu) !== null && _a !== void 0 ? _a : false;
     const actions = useMemo(() => {
         return actionsArray.filter(action => {
             if (isValidElement(action) && action.props.visible) {
@@ -71,6 +73,7 @@ function useGetItemActions(item) {
     return {
         actions: actions,
         hasActions: Boolean(actions.length),
+        disableContextMenu,
     };
 }
 
@@ -79,12 +82,12 @@ function DataListItem({ item, layout, }) {
     const [showMenu, setShowMenu] = useState(false);
     const [contextPosition, setContextPosition] = useState();
     const generatedItem = useMemo(() => generateListItemElement(item), [item]);
-    const { actions, hasActions } = useGetItemActions(item);
+    const { actions, hasActions, disableContextMenu } = useGetItemActions(item);
     const isContextMenuVisible = Boolean(contextPosition);
     const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
     const shouldShowHoverMenu = showMenu && hasActions && !hasInLayoutActions && !shouldShowContextMenu;
     return (React__default.createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
-        React__default.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames(styles.listItem, {
+        React__default.createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: disableContextMenu ? undefined : handleContextMenu, className: classnames(styles.listItem, {
                 [styles.active]: showMenu && isContextMenuVisible,
             }), key: item.id },
             React__default.createElement(DataListItemInternal, { item: item },

package/dist/DatePicker/DatePickerActivator.d.ts

@@ -1,5 +1,5 @@
-import React, { ChangeEvent, ReactElement } from "react";
-import { ReactDatePickerProps } from "react-datepicker";
+import React, { ChangeEvent, ReactElement, RefObject } from "react";
+import ReactDatePicker, { ReactDatePickerProps } from "react-datepicker";
 export interface DatePickerActivatorProps extends Pick<ReactDatePickerProps, "value" | "id" | "ariaDescribedBy" | "ariaInvalid" | "ariaLabelledBy" | "ariaRequired"> {
     readonly activator?: ReactElement | ((props: DatePickerActivatorProps) => ReactElement);
     readonly fullWidth?: boolean;
@@ -8,5 +8,6 @@ export interface DatePickerActivatorProps extends Pick<ReactDatePickerProps, "va
     onClick?(): void;
     onFocus?(): void;
     onKeyDown?(): void;
+    readonly pickerRef: RefObject<ReactDatePicker>;
 }
 export declare const DatePickerActivator: React.ForwardRefExoticComponent<DatePickerActivatorProps & React.RefAttributes<HTMLElement>>;

package/dist/DatePicker-cjs.js

@@ -7317,7 +7317,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         React.useEffect(focusOnSelectedDate, [open]);
     }
     return (React.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React.createElement(Ht, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+        React.createElement(Ht, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React.createElement(DatePickerActivator, { pickerRef: pickerRef, activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
@@ -7368,5 +7368,4 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
 }
 
 exports.DatePicker = DatePicker;
-exports.format = format;
 exports.isValid = isValid;

package/dist/DatePicker-es.js

@@ -7315,7 +7315,7 @@ function DatePicker({ onChange, onMonthChange, activator, inline, selected, read
         useEffect(focusOnSelectedDate, [open]);
     }
     return (React__default.createElement("div", { className: wrapperClassName, ref: ref, "data-elevation": "elevated" },
-        React__default.createElement(Ht, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default.createElement(DatePickerActivator, { activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
+        React__default.createElement(Ht, { ref: pickerRef, calendarClassName: datePickerClassNames, showPopperArrow: false, selected: selected, inline: inline, disabled: disabled, readOnly: readonly, onChange: handleChange, maxDate: maxDate, preventOpenOnFocus: true, minDate: minDate, useWeekdaysShort: true, customInput: React__default.createElement(DatePickerActivator, { pickerRef: pickerRef, activator: activator, fullWidth: fullWidth }), renderCustomHeader: props => React__default.createElement(DatePickerCustomHeader, Object.assign({}, props)), onCalendarOpen: handleCalendarOpen, onCalendarClose: handleCalendarClose, dateFormat: [
                 dateFormat,
                 "P",
                 "PP",
@@ -7365,4 +7365,4 @@ function useEscapeKeyToCloseDatePicker(open, ref) {
     };
 }
 
-export { DatePicker as D, format as f, isValid as i };
+export { DatePicker as D, isValid as i };

package/dist/InputDate/index.cjs

@@ -10,7 +10,6 @@ require('react-hook-form');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
-var AtlantisContext = require('../AtlantisContext-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
 require('../_commonjsHelpers-cjs.js');
 require('../_baseGet-cjs.js');
@@ -28,6 +27,7 @@ require('react-dom');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
 require('../Typography-cjs.js');
+require('../AtlantisContext-cjs.js');
 require('../Icon-cjs.js');
 require('../Text-cjs.js');
 require('../useFormFieldFocus-cjs.js');
@@ -38,9 +38,8 @@ require('../useSafeLayoutEffect-cjs.js');
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = React.useRef(null);
-    const { dateFormat } = AtlantisContext.useAtlantisContext();
     return (React.createElement(DatePicker.DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-            const { onChange, onClick, value } = activatorProps;
+            const { onChange, onClick, value, pickerRef } = activatorProps;
             const newActivatorProps = omit.omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = React.useState(false);
             const suffix = inputProps.showIcon !== false
@@ -63,6 +62,7 @@ function InputDate$1(inputProps) {
                 React.createElement(FormField.FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                         onChange && onChange(event);
                     }, onBlur: () => {
+                        var _a;
                         inputProps.onBlur && inputProps.onBlur();
                         activatorProps.onBlur && activatorProps.onBlur();
                         setIsFocused(false);
@@ -83,12 +83,8 @@ function InputDate$1(inputProps) {
                          */
                         if (inputProps.restoreLastValueOnBlur) {
                             if ((!value || !DatePicker.isValid(value)) && inputProps.value) {
-                                onChange === null || onChange === void 0 ? void 0 : onChange({
-                                    // @ts-expect-error -- This is a hack to sync the value back to ReactDatePicker
-                                    target: {
-                                        value: DatePicker.format(inputProps.value, dateFormat),
-                                    },
-                                });
+                                // @ts-expect-error -- ReactDatePicker types don't include setSelected
+                                (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setSelected(inputProps.value);
                             }
                         }
                     }, onFocus: () => {

package/dist/InputDate/index.mjs

@@ -1,6 +1,6 @@
 import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
 import { o as omit } from '../omit-es.js';
-import { D as DatePicker, i as isValid, f as format } from '../DatePicker-es.js';
+import { D as DatePicker, i as isValid } from '../DatePicker-es.js';
 import { k as FormField } from '../FormField-es.js';
 import 'classnames';
 import '../tslib.es6-es.js';
@@ -8,7 +8,6 @@ import 'react-hook-form';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
-import { u as useAtlantisContext } from '../AtlantisContext-es.js';
 import { InputText } from '../InputText/index.mjs';
 import '../_commonjsHelpers-es.js';
 import '../_baseGet-es.js';
@@ -26,6 +25,7 @@ import 'react-dom';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
 import '../Typography-es.js';
+import '../AtlantisContext-es.js';
 import '../Icon-es.js';
 import '../Text-es.js';
 import '../useFormFieldFocus-es.js';
@@ -36,9 +36,8 @@ import '../useSafeLayoutEffect-es.js';
 
 function InputDate$1(inputProps) {
     const formFieldActionsRef = useRef(null);
-    const { dateFormat } = useAtlantisContext();
     return (React__default.createElement(DatePicker, { selected: inputProps.value, onChange: inputProps.onChange, disabled: inputProps.disabled, readonly: inputProps.readonly, fullWidth: !inputProps.inline, minDate: inputProps.minDate, maxDate: inputProps.maxDate, smartAutofocus: false, activator: activatorProps => {
-            const { onChange, onClick, value } = activatorProps;
+            const { onChange, onClick, value, pickerRef } = activatorProps;
             const newActivatorProps = omit(activatorProps, ["activator"]);
             const [isFocused, setIsFocused] = useState(false);
             const suffix = inputProps.showIcon !== false
@@ -61,6 +60,7 @@ function InputDate$1(inputProps) {
                 React__default.createElement(FormField, Object.assign({}, newActivatorProps, inputProps, { value: showEmptyValueLabel ? inputProps.emptyValueLabel || "" : value, placeholder: inputProps.placeholder, onChange: (_, event) => {
                         onChange && onChange(event);
                     }, onBlur: () => {
+                        var _a;
                         inputProps.onBlur && inputProps.onBlur();
                         activatorProps.onBlur && activatorProps.onBlur();
                         setIsFocused(false);
@@ -81,12 +81,8 @@ function InputDate$1(inputProps) {
                          */
                         if (inputProps.restoreLastValueOnBlur) {
                             if ((!value || !isValid(value)) && inputProps.value) {
-                                onChange === null || onChange === void 0 ? void 0 : onChange({
-                                    // @ts-expect-error -- This is a hack to sync the value back to ReactDatePicker
-                                    target: {
-                                        value: format(inputProps.value, dateFormat),
-                                    },
-                                });
+                                // @ts-expect-error -- ReactDatePicker types don't include setSelected
+                                (_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.setSelected(inputProps.value);
                             }
                         }
                     }, onFocus: () => {