@jobber/components 6.17.3 → 6.17.4-CLEANUPfi-cccea22.1

package/dist/Checkbox/Checkbox.d.ts

@@ -1,53 +1,2 @@
-import { ReactElement } from "react";
-import { XOR } from "ts-xor";
-interface BaseCheckboxProps {
-    /**
-     * Determines if the checkbox is checked or not.
-     */
-    readonly checked?: boolean;
-    /**
-     * Initial checked value of the checkbox. Only use this when you need to
-     * pre-populate the checked attribute that is not controlled by the component's
-     * state. If a state is controlling it, use the `checked` prop instead.
-     */
-    readonly defaultChecked?: boolean;
-    /**
-     * Disables the checkbox.
-     */
-    readonly disabled?: boolean;
-    /**
-     * When `true` the checkbox to appears in indeterminate.
-     *
-     * @default false
-     */
-    readonly indeterminate?: boolean;
-    /**
-     * Checkbox input name
-     */
-    readonly name?: string;
-    /**
-     * Value of the checkbox.
-     */
-    readonly value?: string;
-    /**
-     * Further description of the label
-     */
-    readonly description?: string;
-    onChange?(newValue: boolean): void;
-    onFocus?(): void;
-}
-interface CheckboxLabelProps extends BaseCheckboxProps {
-    /**
-     * Label that shows up beside the checkbox.
-     */
-    readonly label?: string;
-}
-interface CheckboxChildrenProps extends BaseCheckboxProps {
-    /**
-     * Component children, which shows up as a label
-     */
-    readonly children?: ReactElement;
-}
-type CheckboxProps = XOR<CheckboxLabelProps, CheckboxChildrenProps>;
-export declare function Checkbox({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, children, onChange, onFocus, }: CheckboxProps): JSX.Element;
-export {};
+import { CheckboxLegacyProps } from "./Checkbox.types";
+export declare function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, children, onBlur, onChange, onFocus, }: CheckboxLegacyProps): JSX.Element;

package/dist/Checkbox/Checkbox.rebuilt.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxRebuiltProps } from "./Checkbox.types";
+export declare function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate, description, id, onBlur, onChange, onFocus, }: CheckboxRebuiltProps): JSX.Element;

package/dist/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,91 @@
+import { ReactElement } from "react";
+import { XOR } from "ts-xor";
+export interface BaseCheckboxProps {
+    /**
+     * Determines if the checkbox is checked or not.
+     */
+    readonly checked?: boolean;
+    /**
+     * Initial checked value of the checkbox. Only use this when you need to
+     * pre-populate the checked attribute that is not controlled by the component's
+     * state. If a state is controlling it, use the `checked` prop instead.
+     */
+    readonly defaultChecked?: boolean;
+    /**
+     * Disables the checkbox.
+     */
+    readonly disabled?: boolean;
+    /**
+     * When `true` the checkbox to appears in indeterminate.
+     *
+     * @default false
+     */
+    readonly indeterminate?: boolean;
+    /**
+     * Checkbox input name
+     */
+    readonly name?: string;
+    /**
+     * Value of the checkbox.
+     */
+    readonly value?: string;
+    /**
+     * Further description of the label
+     */
+    readonly description?: string;
+    /**
+     * ID for the checkbox input
+     */
+    readonly id?: string;
+    /**
+     * Called when the checkbox value changes
+     */
+    onChange?(newValue: boolean): void;
+    /**
+     * Called when the checkbox is focused
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Called when the checkbox loses focus
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+}
+interface CheckboxLabelProps extends BaseCheckboxProps {
+    /**
+     * Label that shows up beside the checkbox.
+     */
+    readonly label?: string;
+}
+interface CheckboxChildrenProps extends BaseCheckboxProps {
+    /**
+     * Component children, which shows up as a label
+     */
+    readonly children?: ReactElement;
+}
+export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "description" | "children" | "onChange"> & {
+    /**
+     * Label that shows up beside the checkbox.
+     * String will be rendered with the default markup.
+     * ReactElement will be rendered with provided positionining.
+     */
+    label?: string | ReactElement;
+    /**
+     * Additional description of the checkbox.
+     * String will be rendered with the default markup.
+     * ReactElement will be rendered with provided positioning.
+     */
+    description?: string | ReactElement;
+    /**
+     * Called when the checkbox value changes.
+     * Includes the change event as a second argument.
+     */
+    onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
+    /**
+     * Version 2 is highly experimental, avoid using it unless you have talked with Atlantis first.
+     */
+    version: 2;
+};
+export type CheckboxLegacyProps = XOR<CheckboxLabelProps, CheckboxChildrenProps> & {
+    version?: 1;
+};
+export {};

package/dist/Checkbox/index.cjs

@@ -1,15 +1,89 @@
 'use strict';
 
-var Checkbox = require('../Checkbox-cjs.js');
-require('../tslib.es6-cjs.js');
-require('react');
-require('classnames');
-require('react-hook-form');
-require('../Icon-cjs.js');
+var React = require('react');
+var tslib_es6 = require('../tslib.es6-cjs.js');
+var classnames = require('classnames');
+var reactHookForm = require('react-hook-form');
+var Icon = require('../Icon-cjs.js');
+var Text = require('../Text-cjs.js');
 require('@jobber/design');
-require('../Text-cjs.js');
 require('../Typography-cjs.js');
 
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
 
+function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
+    const { control, setValue, watch } = reactHookForm.useFormContext() != undefined
+        ? reactHookForm.useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            reactHookForm.useForm({ mode: "onTouched" });
+    const [identifier] = React.useState(React.useId());
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    const [controlledName] = React.useState(name ? name : `generatedName--${identifier}`);
+    React.useEffect(() => {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelText = label ? React.createElement(Text.Text, null, label) : children;
+    return (React.createElement(reactHookForm.Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = tslib_es6.__rest(_b, ["onChange", "name"]);
+            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
+            return (React.createElement("div", { className: styles.checkBoxParent },
+                React.createElement("label", { className: wrapperClassName },
+                    React.createElement("span", { className: styles.checkHolder },
+                        React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
+                        React.createElement("span", { className: styles.checkBox },
+                            React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
+                    labelText && React.createElement("span", { className: styles.label }, labelText)),
+                description && (React.createElement("div", { className: styles.description },
+                    React.createElement(Text.Text, { variation: "subdued", size: "small" }, description)))));
+            function handleChange(event) {
+                const newChecked = event.currentTarget.checked;
+                onChange && onChange(newChecked);
+                onControllerChange(event);
+            }
+        } }));
+}
 
-exports.Checkbox = Checkbox.Checkbox;
+function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, }) {
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelContent = typeof label === "string" ? React.createElement(Text.Text, null, label) : label;
+    const descriptionContent = typeof description === "string" ? (React.createElement(Text.Text, { size: "small", variation: "subdued" }, description)) : (description);
+    function handleChange(event) {
+        const newChecked = event.currentTarget.checked;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newChecked, event);
+    }
+    return (React.createElement("div", { className: styles.checkBoxParent },
+        React.createElement("label", { className: wrapperClassName },
+            React.createElement("span", { className: styles.checkHolder },
+                React.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("span", { className: styles.checkBox },
+                    React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
+            labelContent && React.createElement("span", { className: styles.label }, labelContent)),
+        description && (React.createElement("div", { className: styles.description }, descriptionContent))));
+}
+
+function isNewCheckboxProps(props) {
+    return props.version === 2;
+}
+function Checkbox(props) {
+    if (isNewCheckboxProps(props)) {
+        return React.createElement(CheckboxRebuilt, Object.assign({}, props));
+    }
+    return React.createElement(CheckboxLegacy, Object.assign({}, props));
+}
+
+exports.Checkbox = Checkbox;

package/dist/Checkbox/index.d.ts

@@ -1 +1,4 @@
-export { Checkbox } from "./Checkbox";
+import { CheckboxLegacyProps, CheckboxRebuiltProps } from "./Checkbox.types";
+type CheckboxShimProps = CheckboxLegacyProps | CheckboxRebuiltProps;
+export declare function Checkbox(props: CheckboxShimProps): JSX.Element;
+export type { CheckboxLegacyProps, CheckboxRebuiltProps };

package/dist/Checkbox/index.mjs

@@ -1,9 +1,87 @@
-export { C as Checkbox } from '../Checkbox-es.js';
-import '../tslib.es6-es.js';
-import 'react';
-import 'classnames';
-import 'react-hook-form';
-import '../Icon-es.js';
+import React, { useState, useId, useEffect } from 'react';
+import { _ as __rest } from '../tslib.es6-es.js';
+import classnames from 'classnames';
+import { useFormContext, useForm, Controller } from 'react-hook-form';
+import { I as Icon } from '../Icon-es.js';
+import { T as Text } from '../Text-es.js';
 import '@jobber/design';
-import '../Text-es.js';
 import '../Typography-es.js';
+
+var styles = {"checkBoxParent":"YxKKPXAU10s-","wrapper":"KxWx-msbH9c-","disabled":"TKr3J-6ARFo-","checkHolder":"NO34ZbhNqhI-","input":"XnCmS-EzK2M-","checkBox":"_-8JCQE6SA9s-","indeterminate":"rqHq3ff9In0-","label":"l8z5TxzVvqA-","description":"DcBfVgpiWa4-","spinning":"rFBN9M5-4Ok-"};
+
+function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, children, onBlur, onChange, onFocus, }) {
+    const { control, setValue, watch } = useFormContext() != undefined
+        ? useFormContext()
+        : // If there isn't a Form Context being provided, get a form for this field.
+            useForm({ mode: "onTouched" });
+    const [identifier] = useState(useId());
+    /**
+     * Generate a name if one is not supplied, this is the name
+     * that will be used for react-hook-form and not neccessarily
+     * attached to the DOM
+     */
+    const [controlledName] = useState(name ? name : `generatedName--${identifier}`);
+    useEffect(() => {
+        if (value != undefined) {
+            setValue(controlledName, value);
+        }
+    }, [value, watch(controlledName)]);
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelText = label ? React.createElement(Text, null, label) : children;
+    return (React.createElement(Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
+            var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = __rest(_b, ["onChange", "name"]);
+            const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
+            return (React.createElement("div", { className: styles.checkBoxParent },
+                React.createElement("label", { className: wrapperClassName },
+                    React.createElement("span", { className: styles.checkHolder },
+                        React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
+                        React.createElement("span", { className: styles.checkBox },
+                            React.createElement(Icon, { name: iconName, color: "surface" }))),
+                    labelText && React.createElement("span", { className: styles.label }, labelText)),
+                description && (React.createElement("div", { className: styles.description },
+                    React.createElement(Text, { variation: "subdued", size: "small" }, description)))));
+            function handleChange(event) {
+                const newChecked = event.currentTarget.checked;
+                onChange && onChange(newChecked);
+                onControllerChange(event);
+            }
+        } }));
+}
+
+function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, }) {
+    const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled);
+    const inputClassName = classnames(styles.input, {
+        [styles.indeterminate]: indeterminate,
+    });
+    const iconName = indeterminate ? "minus2" : "checkmark";
+    const labelContent = typeof label === "string" ? React.createElement(Text, null, label) : label;
+    const descriptionContent = typeof description === "string" ? (React.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description);
+    function handleChange(event) {
+        const newChecked = event.currentTarget.checked;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newChecked, event);
+    }
+    return (React.createElement("div", { className: styles.checkBoxParent },
+        React.createElement("label", { className: wrapperClassName },
+            React.createElement("span", { className: styles.checkHolder },
+                React.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("span", { className: styles.checkBox },
+                    React.createElement(Icon, { name: iconName, color: "surface" }))),
+            labelContent && React.createElement("span", { className: styles.label }, labelContent)),
+        description && (React.createElement("div", { className: styles.description }, descriptionContent))));
+}
+
+function isNewCheckboxProps(props) {
+    return props.version === 2;
+}
+function Checkbox(props) {
+    if (isNewCheckboxProps(props)) {
+        return React.createElement(CheckboxRebuilt, Object.assign({}, props));
+    }
+    return React.createElement(CheckboxLegacy, Object.assign({}, props));
+}
+
+export { Checkbox };

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/components/DataListHeader/index.cjs

@@ -29,7 +29,7 @@ require('../../../AnimatedSwitcher-cjs.js');
 require('framer-motion');
 require('../../../Button-cjs.js');
 require('react-router-dom');
-require('../../../Checkbox-cjs.js');
+require('../../../Checkbox/index.cjs');
 require('../../../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../../../DataList.module-cjs.js');

package/dist/DataList/components/DataListHeader/index.mjs

@@ -27,7 +27,7 @@ import '../../../AnimatedSwitcher-es.js';
 import 'framer-motion';
 import '../../../Button-es.js';
 import 'react-router-dom';
-import '../../../Checkbox-es.js';
+import '../../../Checkbox/index.mjs';
 import '../../../tslib.es6-es.js';
 import 'react-hook-form';
 import '../../../DataList.module-es.js';

package/dist/DataList/components/DataListItem/index.cjs

@@ -38,7 +38,7 @@ require('../../../Heading-cjs.js');
 require('../../../DataListLayoutContext-cjs2.js');
 require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
-require('../../../Checkbox-cjs.js');
+require('../../../Checkbox/index.cjs');
 require('../../../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../../../useBatchSelect-cjs.js');

package/dist/DataList/components/DataListItem/index.mjs

@@ -36,7 +36,7 @@ import '../../../Heading-es.js';
 import '../../../DataListLayoutContext-es2.js';
 import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
-import '../../../Checkbox-es.js';
+import '../../../Checkbox/index.mjs';
 import '../../../tslib.es6-es.js';
 import 'react-hook-form';
 import '../../../useBatchSelect-es.js';

package/dist/DataList/components/DataListItems/index.cjs

@@ -39,7 +39,7 @@ require('../../../Heading-cjs.js');
 require('../../../DataListLayoutContext-cjs2.js');
 require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
-require('../../../Checkbox-cjs.js');
+require('../../../Checkbox/index.cjs');
 require('../../../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../../../useBatchSelect-cjs.js');

package/dist/DataList/components/DataListItems/index.mjs

@@ -37,7 +37,7 @@ import '../../../Heading-es.js';
 import '../../../DataListLayoutContext-es2.js';
 import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
-import '../../../Checkbox-es.js';
+import '../../../Checkbox/index.mjs';
 import '../../../tslib.es6-es.js';
 import 'react-hook-form';
 import '../../../useBatchSelect-es.js';

package/dist/DataList/components/DataListLayout/index.cjs

@@ -40,7 +40,7 @@ require('../../../Heading-cjs.js');
 require('../../../DataListLayoutContext-cjs2.js');
 require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
-require('../../../Checkbox-cjs.js');
+require('../../../Checkbox/index.cjs');
 require('../../../tslib.es6-cjs.js');
 require('react-hook-form');
 require('../../../useBatchSelect-cjs.js');

package/dist/DataList/components/DataListLayout/index.mjs

@@ -38,7 +38,7 @@ import '../../../Heading-es.js';
 import '../../../DataListLayoutContext-es2.js';
 import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
-import '../../../Checkbox-es.js';
+import '../../../Checkbox/index.mjs';
 import '../../../tslib.es6-es.js';
 import 'react-hook-form';
 import '../../../useBatchSelect-es.js';

package/dist/DataList/index.cjs

@@ -49,7 +49,7 @@ require('../Heading-cjs.js');
 require('../DataListLayoutContext-cjs2.js');
 require('../DataListItemActionsOverflow-cjs.js');
 require('../DataListActionsMenu-cjs.js');
-require('../Checkbox-cjs.js');
+require('../Checkbox/index.cjs');
 require('react-hook-form');
 require('../useBatchSelect-cjs.js');
 require('../DataListItemClickable-cjs.js');

package/dist/DataList/index.mjs

@@ -47,7 +47,7 @@ import '../Heading-es.js';
 import '../DataListLayoutContext-es2.js';
 import '../DataListItemActionsOverflow-es.js';
 import '../DataListActionsMenu-es.js';
-import '../Checkbox-es.js';
+import '../Checkbox/index.mjs';
 import 'react-hook-form';
 import '../useBatchSelect-es.js';
 import '../DataListItemClickable-es.js';

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/dist/DataListHeader-cjs.js

@@ -8,7 +8,7 @@ var classnames = require('classnames');
 var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 var Text = require('./Text-cjs.js');
 var Button = require('./Button-cjs.js');
-var Checkbox = require('./Checkbox-cjs.js');
+var Checkbox_index = require('./Checkbox/index.cjs');
 var DataList_module = require('./DataList.module-cjs.js');
 var DataListBulkActions = require('./DataListBulkActions-cjs.js');
 var useBatchSelect = require('./useBatchSelect-cjs.js');
@@ -27,7 +27,7 @@ function DataListHeaderCheckbox({ children }) {
         React.createElement("div", { className: classnames(DataList_module.styles.selectAllCheckbox, {
                 [DataList_module.styles.visible]: canSelectAll,
             }) },
-            React.createElement(Checkbox.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
+            React.createElement(Checkbox_index.Checkbox, { checked: isAllSelected(), indeterminate: isIndeterminate(), onChange: handleSelectAll },
                 React.createElement("div", { className: DataList_module.styles.srOnly }, selectedLabel))),
         React.createElement(AnimatedSwitcher.AnimatedSwitcher, { switched: hasAtLeastOneSelected, initialChild: children, switchTo: React.createElement("div", { className: DataList_module.styles.batchSelectContainer },
                 React.createElement("div", { className: DataList_module.styles.headerBatchSelect },

package/dist/DataListHeader-es.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 import { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 import { T as Text } from './Text-es.js';
 import { B as Button } from './Button-es.js';
-import { C as Checkbox } from './Checkbox-es.js';
+import { Checkbox } from './Checkbox/index.mjs';
 import { s as styles } from './DataList.module-es.js';
 import { I as InternalDataListBulkActions } from './DataListBulkActions-es.js';
 import { u as useBatchSelect } from './useBatchSelect-es.js';

package/dist/DataListItem-cjs.js

@@ -8,7 +8,7 @@ var DataListItemActions = require('./DataListItemActions-cjs.js');
 var DataListActionsMenu = require('./DataListActionsMenu-cjs.js');
 var DataListLayoutContext$1 = require('./DataListLayoutContext-cjs2.js');
 var DataList_utils = require('./DataList.utils-cjs.js');
-var Checkbox = require('./Checkbox-cjs.js');
+var Checkbox_index = require('./Checkbox/index.cjs');
 var useBatchSelect = require('./useBatchSelect-cjs.js');
 var DataList_module = require('./DataList.module-cjs.js');
 var DataListItemClickable = require('./DataListItemClickable-cjs.js');
@@ -22,7 +22,7 @@ function DataListItemInternal({ children, item, }) {
             [DataList_module.styles.selected]: hasAtLeastOneSelected,
         }) },
         children,
-        React.createElement(Checkbox.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
+        React.createElement(Checkbox_index.Checkbox, { checked: getIsChecked(), onChange: handleChange })));
     function getIsChecked() {
         const isItemInSelectedIDs = selectedIDs.includes(item.id);
         // If we're in a "select all" state, the selectedID's becomes a list of

package/dist/DataListItem-es.js

@@ -6,7 +6,7 @@ import { I as InternalDataListItemActions } from './DataListItemActions-es.js';
 import { D as DataListActionsMenu } from './DataListActionsMenu-es.js';
 import { D as DataListLayoutActionsContext } from './DataListLayoutContext-es2.js';
 import { d as generateListItemElement } from './DataList.utils-es.js';
-import { C as Checkbox } from './Checkbox-es.js';
+import { Checkbox } from './Checkbox/index.mjs';
 import { u as useBatchSelect } from './useBatchSelect-es.js';
 import { s as styles } from './DataList.module-es.js';
 import { D as DataListItemClickable } from './DataListItemClickable-es.js';

package/dist/LightBox/LightBox.d.ts

@@ -1,6 +1,7 @@
 interface PresentedImage {
     title?: string;
     caption?: string;
+    alt?: string;
     url: string;
 }
 interface RequestCloseOptions {
@@ -13,7 +14,7 @@ interface LightBoxProps {
     readonly open: boolean;
     /**
      * Images is an array of objects defining a LightBox image. This object consists of
-     * `title`, `caption` and `url`. `title` and `caption` are optional, `url` is
+     * `title`, `caption`, `alt` and `url`. `title`, `alt` and `caption` are optional, `url` is
      * required, for each image.
      */
     readonly images: PresentedImage[];