@jobber/components 6.19.1 → 6.20.0

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

@@ -285,6 +285,10 @@ export interface DataListActionProps<T extends DataListObject> {
      * The URL to navigate to when the action is clicked.
      */
     readonly actionUrl?: string;
+    /**
+     * Determine if the action is always visible. It is not recommended to set this to true on more then one action.
+     */
+    readonly alwaysVisible?: boolean;
 }
 export interface DataListActionsProps<T extends DataListObject> {
     /**

package/dist/DataList.utils-cjs.js

@@ -150,8 +150,11 @@ function getExposedActions(childrenArray, childCount = 2) {
     const firstNChildren = childrenArray.slice(0, childCount);
     return firstNChildren.reduce((result, child, i) => {
         const hasIcon = Boolean(child.props.icon);
-        if (!hasIcon)
-            return result; // If the child does not have an icon, continue.
+        const isAlwaysVisible = child.props.alwaysVisible; // If true, the child action will always be visible and not nested in the dropdown.
+        if (isAlwaysVisible === false ||
+            (isAlwaysVisible === undefined && !hasIcon)) {
+            return result;
+        }
         const isLastChildAdded = result.length === i;
         // If it's the first child or if the previous child was added, then add this child.
         if (i === 0 || (i < childCount && isLastChildAdded)) {

package/dist/DataList.utils-es.js

@@ -148,8 +148,11 @@ function getExposedActions(childrenArray, childCount = 2) {
     const firstNChildren = childrenArray.slice(0, childCount);
     return firstNChildren.reduce((result, child, i) => {
         const hasIcon = Boolean(child.props.icon);
-        if (!hasIcon)
-            return result; // If the child does not have an icon, continue.
+        const isAlwaysVisible = child.props.alwaysVisible; // If true, the child action will always be visible and not nested in the dropdown.
+        if (isAlwaysVisible === false ||
+            (isAlwaysVisible === undefined && !hasIcon)) {
+            return result;
+        }
         const isLastChildAdded = result.length === i;
         // If it's the first child or if the previous child was added, then add this child.
         if (i === 0 || (i < childCount && isLastChildAdded)) {

package/dist/DataListActions-cjs.js

@@ -14,10 +14,11 @@ function DataListActions({ children, itemsToExpose = 2, }) {
     childrenArray.splice(0, exposedActions.length);
     return (React.createElement(React.Fragment, null,
         exposedActions.map(({ props }) => {
-            if (props.visible && !props.visible(activeItem))
-                return null;
-            if (!props.icon)
+            const isVisible = props.visible ? props.visible(activeItem) : true;
+            const hasIconOrAlwaysVisible = props.icon || props.alwaysVisible;
+            if (!isVisible || !hasIconOrAlwaysVisible) {
                 return null;
+            }
             function getActionLabel() {
                 if (typeof props.label === "string") {
                     return props.label;
@@ -27,6 +28,13 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                 }
             }
             const actionLabel = getActionLabel();
+            // If the action is always visible, we don't want a tooltip.
+            if (props.alwaysVisibled) {
+                return (React.createElement(Button.Button, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
+                        var _a;
+                        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                    }, type: "secondary", variation: "subtle" }));
+            }
             return (React.createElement(Tooltip.Tooltip, { key: actionLabel, message: actionLabel },
                 React.createElement(Button.Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;

package/dist/DataListActions-es.js

@@ -12,10 +12,11 @@ function DataListActions({ children, itemsToExpose = 2, }) {
     childrenArray.splice(0, exposedActions.length);
     return (React.createElement(React.Fragment, null,
         exposedActions.map(({ props }) => {
-            if (props.visible && !props.visible(activeItem))
-                return null;
-            if (!props.icon)
+            const isVisible = props.visible ? props.visible(activeItem) : true;
+            const hasIconOrAlwaysVisible = props.icon || props.alwaysVisible;
+            if (!isVisible || !hasIconOrAlwaysVisible) {
                 return null;
+            }
             function getActionLabel() {
                 if (typeof props.label === "string") {
                     return props.label;
@@ -25,6 +26,13 @@ function DataListActions({ children, itemsToExpose = 2, }) {
                 }
             }
             const actionLabel = getActionLabel();
+            // If the action is always visible, we don't want a tooltip.
+            if (props.alwaysVisibled) {
+                return (React.createElement(Button, { ariaLabel: actionLabel, key: props.label, icon: props.icon, label: actionLabel, onClick: () => {
+                        var _a;
+                        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, activeItem);
+                    }, type: "secondary", variation: "subtle" }));
+            }
             return (React.createElement(Tooltip, { key: actionLabel, message: actionLabel },
                 React.createElement(Button, { icon: props.icon, ariaLabel: actionLabel, onClick: () => {
                         var _a, _b;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.19.1",
+  "version": "6.20.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -489,5 +489,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "8bdfcad7ad4f56fc40d669239db76f46243542d7"
+  "gitHead": "2558b87c3c62b4adb43d4fd74f8d0a2e747061eb"
 }