@jobber/components 6.55.0 → 6.56.0

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 },