@jobber/components 4.59.1-st-spike-w.6 → 4.60.0

package/dist/Chip/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Chip = require('../Chip-2d959a49.js');
+var Chip = require('../Chip-f8b8fd89.js');
 var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var Icon = require('../Icon-405a216c.js');

package/dist/{Chip-2d959a49.js → Chip-f8b8fd89.js}

@@ -70,7 +70,6 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, onClick, on
                     label,
                     React__default["default"].createElement("span", { ref: labelRef, className: styles.chipLabelRef })),
                 !labelFullyVisible && (React__default["default"].createElement("div", { className: styles.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" }))),
-            React__default["default"].createElement("span", null, "\u00A0"),
             suffix)));
 };
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {

package/dist/Combobox/index.js

@@ -14,7 +14,7 @@ var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
 var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
-var Chip = require('../Chip-2d959a49.js');
+var Chip = require('../Chip-f8b8fd89.js');
 require('@jobber/design');
 var useAssert = require('@jobber/hooks/useAssert');
 require('react-router-dom');

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

@@ -225,6 +225,10 @@ export interface DataListActionProps<T extends DataListObject> {
      * Adjust the styling of an action label and icon to be more destructive.
      */
     readonly destructive?: boolean;
+    /**
+     * Determine if the action is visible for a given item.
+     */
+    readonly visible?: (item: T) => boolean;
     /**
      * The callback function when the action is clicked.
      */
@@ -242,7 +246,7 @@ export interface DataListActionsProps<T extends DataListObject> {
      */
     readonly itemsToExpose?: number;
 }
-export interface DataListBulkActionProps extends DataListActionProps<DataListObject> {
+export interface DataListBulkActionProps extends Omit<DataListActionProps<DataListObject>, "visible"> {
     /**
      * The callback function when the action is clicked.
      */

package/dist/DataList/components/DataListAction/DataListAction.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { DataListActionProps, DataListObject } from "@jobber/components/DataList/DataList.types";
-export declare function DataListAction<T extends DataListObject>({ label, icon, destructive, onClick, }: DataListActionProps<T>): JSX.Element;
+export declare function DataListAction<T extends DataListObject>({ label, icon, destructive, visible, onClick, }: DataListActionProps<T>): JSX.Element | null;

package/dist/DataList/components/DataListItemActions/DataListItemActions.d.ts

@@ -1,4 +1,8 @@
-/// <reference types="react" />
-import { DataListItemActionsProps, DataListObject } from "../../DataList.types";
+import { ReactElement } from "react";
+import { DataListActionProps, DataListItemActionsProps, DataListObject } from "../../DataList.types";
 export declare function DataListItemActions<T extends DataListObject>(_: DataListItemActionsProps<T>): null;
-export declare function InternalDataListItemActions(): JSX.Element | null;
+interface InternalDataListItemActionsProps<T extends DataListObject> {
+    readonly actions: ReactElement<DataListActionProps<T>>[];
+}
+export declare function InternalDataListItemActions<T extends DataListObject>({ actions, }: InternalDataListItemActionsProps<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { DataListActionProps, DataListObject } from "../DataList.types";
+export declare function useGetItemActions<T extends DataListObject>(item: T): {
+    actions: ReactElement<DataListActionProps<T>, string | import("react").JSXElementConstructor<any>>[];
+    hasActions: boolean;
+};

package/dist/DataList/index.js

@@ -408,7 +408,7 @@ function DataListActionsMenu({ visible = false, position, onRequestClose, childr
     useOnKeyDown.useOnKeyDown(onRequestClose, "Escape");
     return ReactDOM.createPortal(React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement("div", { ref: focusTrapRef, onClick: handleClick },
         React__default["default"].createElement(framerMotion.motion.div, { role: "menu", ref: setRef, variants: variants$1, initial: "hidden", animate: "visible", exit: "hidden", transition: { duration: TRANSITION_DELAY_IN_SECONDS }, className: styles$7.menu, style: getPositionCssVars(), onClick: onRequestClose }, children),
-        React__default["default"].createElement("button", { className: styles$7.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
+        React__default["default"].createElement("button", { type: "button", className: styles$7.overlay, onClick: onRequestClose, "aria-label": "Close menu" })))), document.body);
     function handleClick(event) {
         // Prevent menu from firing the parent's onClick event when it is nested
         // within a clickable list item
@@ -466,6 +466,8 @@ function DataListActions({ children, itemsToExpose = 2, }) {
     childrenArray.splice(0, exposedActions.length);
     return (React__default["default"].createElement(DataListOverflowFade, null,
         exposedActions.map(({ props }) => {
+            if (props.visible && !props.visible(activeItem))
+                return null;
             if (!props.icon)
                 return null;
             return (React__default["default"].createElement(Tooltip.Tooltip, { key: props.label, message: props.label },
@@ -492,18 +494,12 @@ const variants = {
     hidden: { opacity: 0, y: 10 },
     visible: { opacity: 1, y: 0 },
 };
-function InternalDataListItemActions() {
-    const { itemActionComponent } = useDataListContext();
-    if (!itemActionComponent)
-        return null;
-    const { children } = itemActionComponent.props;
-    if (!children)
-        return null;
+function InternalDataListItemActions({ actions, }) {
     return (React__default["default"].createElement(framerMotion.motion.div, { variants: variants, initial: "hidden", animate: "visible", exit: "hidden", transition: {
             duration: TRANSITION_DURATION_IN_SECONDS,
             delay: TRANSITION_DELAY_IN_SECONDS,
         }, className: styles$c.menu, onContextMenu: handleContextMenu },
-        React__default["default"].createElement(DataListActions, null, children)));
+        React__default["default"].createElement(DataListActions, null, actions)));
 }
 function handleContextMenu(event) {
     event.stopPropagation();
@@ -567,15 +563,33 @@ function DataListItemClickable({ children }) {
     return React__default["default"].createElement(React__default["default"].Fragment, null, children);
 }
 
-function DataListItem({ item, layout, }) {
+function useGetItemActions(item) {
     const { itemActionComponent } = useDataListContext();
+    const itemActions = (itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children) || [];
+    const actionsArray = React.Children.toArray(itemActions);
+    const actions = React.useMemo(() => {
+        return actionsArray.filter(action => {
+            if (React.isValidElement(action) && action.props.visible) {
+                return action.props.visible(item);
+            }
+            return true;
+        });
+    }, [itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children, item]);
+    return {
+        actions: actions,
+        hasActions: Boolean(actions.length),
+    };
+}
+
+// eslint-disable-next-line max-statements
+function DataListItem({ item, layout, }) {
     const { hasInLayoutActions } = useDataListLayoutContext();
     const [showMenu, setShowMenu] = React.useState(false);
     const [contextPosition, setContextPosition] = React.useState();
     const generatedItem = React.useMemo(() => generateListItemElement(item), [item]);
-    const contextMenuActions = itemActionComponent === null || itemActionComponent === void 0 ? void 0 : itemActionComponent.props.children;
+    const { actions, hasActions } = useGetItemActions(item);
     const isContextMenuVisible = Boolean(contextPosition);
-    const shouldShowContextMenu = showMenu && isContextMenuVisible && Boolean(contextMenuActions);
+    const shouldShowContextMenu = showMenu && isContextMenuVisible && hasActions;
     return (React__default["default"].createElement(DataListLayoutActionsContext.Provider, { value: { activeItem: item } },
         React__default["default"].createElement("div", { onMouseEnter: handleShowMenu, onMouseLeave: handleHideMenu, onFocus: handleShowMenu, onBlur: handleHideMenu, onContextMenu: handleContextMenu, className: classnames__default["default"](styles$f.listItem, {
                 [styles$f.active]: showMenu && isContextMenuVisible,
@@ -583,8 +597,8 @@ function DataListItem({ item, layout, }) {
             React__default["default"].createElement(DataListItemInternal, { item: item },
                 React__default["default"].createElement(DataListItemClickable, null, layout(generatedItem))),
             React__default["default"].createElement(framerMotion.AnimatePresence, null,
-                showMenu && !hasInLayoutActions && React__default["default"].createElement(InternalDataListItemActions, null),
-                React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, contextMenuActions)))));
+                showMenu && hasActions && !hasInLayoutActions && (React__default["default"].createElement(InternalDataListItemActions, { actions: actions })),
+                React__default["default"].createElement(DataListActionsMenu, { key: item.id, visible: shouldShowContextMenu, position: contextPosition || { x: 0, y: 0 }, onRequestClose: () => setContextPosition(undefined) }, actions)))));
     function handleShowMenu() {
         setShowMenu(true);
     }
@@ -592,7 +606,7 @@ function DataListItem({ item, layout, }) {
         setShowMenu(false);
     }
     function handleContextMenu(event) {
-        if (!contextMenuActions || isContextMenuVisible)
+        if (!hasActions || isContextMenuVisible)
             return;
         event.preventDefault();
         setContextPosition({
@@ -944,10 +958,14 @@ var css_248z$1 = ".iyg43v-S9yU- {\n  display: -ms-flexbox;\n  display: flex;\n
 var styles$1 = {"action":"iyg43v-S9yU-","label":"AUJNqz93ZDA-"};
 styleInject_es.styleInject(css_248z$1);
 
-function DataListAction({ label, icon, destructive, onClick, }) {
+function DataListAction({ label, icon, destructive, visible = () => true, onClick, }) {
     const { activeItem } = useDataListLayoutActionsContext();
+    // Don't render if the item is not visible
+    if (activeItem && !visible(activeItem)) {
+        return null;
+    }
     const color = destructive ? "critical" : "blue";
-    return (React__default["default"].createElement("button", { className: styles$1.action, onClick: handleClick },
+    return (React__default["default"].createElement("button", { type: "button", className: styles$1.action, onClick: handleClick },
         icon && React__default["default"].createElement(Icon.Icon, { name: icon, color: color }),
         React__default["default"].createElement(Typography.Typography, { textColor: color },
             React__default["default"].createElement("span", { className: styles$1.label }, label))));

package/dist/InputPassword/InputPassword.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import { CommonFormFieldProps, FormFieldProps } from "../FormField";
 interface InputPasswordProps extends CommonFormFieldProps, Pick<FormFieldProps, "autocomplete" | "onEnter" | "onFocus" | "onBlur" | "inputRef" | "validations" | "defaultValue"> {
-    readonly value?: string;
+    value?: string;
     onChange?(newValue: string): void;
     /**
      * Display toggle to change the visibility of the password input
      * @default false
      */
-    readonly hasVisibility?: boolean;
+    hasVisibility?: boolean;
 }
 export declare function InputPassword(props: InputPasswordProps): JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.59.1-st-spike-w.6+464eded3",
+  "version": "4.60.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,7 @@
   ],
   "dependencies": {
     "@jobber/design": "^0.47.0",
-    "@jobber/formatters": "^0.2.2",
+    "@jobber/formatters": "*",
     "@jobber/hooks": "^2.7.0",
     "@popperjs/core": "^2.0.6",
     "@std-proposal/temporal": "0.0.1",
@@ -41,6 +41,7 @@
     "react-countdown": "^2.3.2",
     "react-datepicker": "^4.10.0",
     "react-dropzone": "^11.0.2",
+    "react-hook-form": "^7.43.7",
     "react-markdown": "^8.0.3",
     "react-popper": "^2.2.5",
     "react-router-dom": "^5.3.4",
@@ -76,13 +77,12 @@
   },
   "peerDependencies": {
     "react": "^18",
-    "react-dom": "^18",
-    "react-hook-form": "^7.43.7"
+    "react-dom": "^18"
   },
   "browserslist": [
     "last 1 version",
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "464eded363bb8f2bb697e86954eb8c7808e0e033"
+  "gitHead": "6d278cdff3de74aca7c90d7da59ac9c365dbd69c"
 }