@jobber/components 6.104.0 → 6.105.0

package/dist/Autocomplete/Autocomplete.types.d.ts

@@ -1,6 +1,14 @@
 import type { CSSProperties, Key, Ref, RefObject } from "react";
+import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
 import type { FormFieldProps } from "../FormField";
 import type { InputTextRebuiltProps, InputTextRef } from "../InputText";
+/**
+ * ARIA attributes for Autocomplete with managed/orchestrated behavior.
+ * Certain ARIA attributes are controlled internally by Autocomplete's
+ * state management and floating-ui integration and shouldn't be overridden.
+ */
+interface AriaInputPropsManaged extends Omit<AriaInputProps, "aria-controls" | "aria-expanded" | "aria-activedescendant" | "aria-autocomplete"> {
+}
 export type ExtraProps = Record<string, unknown>;
 type OptionValue = string | number;
 export interface BaseOption {
@@ -222,8 +230,7 @@ export type MenuFooter<Extra extends object = ExtraProps> = Extra & {
 };
 export type MenuItem<T extends OptionLike, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = MenuSection<T, SectionExtra, ActionExtra> | MenuOptions<T, ActionExtra> | MenuHeader<ActionExtra> | MenuFooter<ActionExtra>;
 export type AutocompleteValue<Value extends OptionLike, Multiple extends boolean> = Multiple extends true ? Value[] : Value | undefined;
-interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> {
-    version: 2;
+interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> extends AriaInputPropsManaged, Pick<HTMLInputBaseProps, "name" | "disabled" | "readOnly" | "autoFocus">, Pick<RebuiltInputCommonProps, "placeholder" | "error" | "invalid" | "loading" | "description" | "size" | "prefix" | "suffix" | "version">, FocusEvents<HTMLInputElement | HTMLTextAreaElement> {
     /**
      * Whether the autocomplete allows multiple selections.
      * WARNING: This is currently incomplete and will not display selections, only data is returned.
@@ -243,14 +250,6 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      * Callback invoked when the input value changes.
      */
     readonly onInputChange: (value: string) => void;
-    /**
-     * Callback invoked when the input is blurred.
-     */
-    readonly onBlur?: () => void;
-    /**
-     * Callback invoked when the input is focused.
-     */
-    readonly onFocus?: () => void;
     /**
      * Custom equality for input text to option mapping.
      * Defaults to case-sensitive label equality via getOptionLabel.
@@ -384,42 +383,6 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      * @default true
      */
     readonly openOnFocus?: boolean;
-    /**
-     * The placeholder text for the input.
-     */
-    readonly placeholder?: string;
-    /**
-     * Whether the input is disabled.
-     */
-    readonly disabled?: boolean;
-    /**
-     * Error message to display below the input
-     * When present, invalid appearance applied to the input
-     */
-    readonly error?: string;
-    /**
-     * Whether the input is invalid. Receives invalid appearance.
-     */
-    readonly invalid?: boolean;
-    /**
-     * Whether the input is read-only.
-     * @default false
-     */
-    readonly readOnly?: boolean;
-    /**
-     * Description to display below the input
-     */
-    readonly description?: string;
-    /**
-     * Name of the input for form submission
-     */
-    readonly name?: string;
-    /**
-     * Size of the input
-     */
-    readonly size?: InputTextRebuiltProps["size"];
-    readonly suffix?: InputTextRebuiltProps["suffix"];
-    readonly prefix?: InputTextRebuiltProps["prefix"];
     /**
      * Callback invoked when the menu opens.
      *
@@ -430,11 +393,6 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      *
      */
     readonly onClose?: () => void;
-    /**
-     * Whether the menu is loading.
-     * Displays glimmers in the menu
-     */
-    readonly loading?: boolean;
     /**
      * Custom render prop for content to render when `loading` is true.
      */

package/dist/Autocomplete/index.cjs

@@ -13,6 +13,7 @@ var Icon = require('../Icon-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
 var Glimmer = require('../Glimmer-cjs.js');
 var FormField = require('../FormField-cjs.js');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
@@ -20,18 +21,6 @@ require('react-hook-form');
 require('framer-motion');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../omit-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../_baseGet-cjs.js');
-require('../isTypedArray-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../identity-cjs.js');
-require('../_getTag-cjs.js');
-require('../isSymbol-cjs.js');
-require('../keysIn-cjs.js');
-require('../_baseAssignValue-cjs.js');
-require('../_baseFlatten-cjs.js');
-require('../_setToString-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
@@ -510,18 +499,18 @@ function useAutocomplete(props) {
         multiple,
         value,
     ]);
-    const onInputFocus = React.useCallback(() => {
+    const onInputFocus = React.useCallback((event) => {
         var _a;
         setInputFocused(true);
         if (!readOnly && openOnFocus)
             setOpen(true);
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
     }, [props.onFocus, readOnly, openOnFocus, setOpen]);
-    const onInputBlur = React.useCallback(() => {
+    const onInputBlur = React.useCallback((event) => {
         var _a, _b;
         setInputFocused(false);
         if (readOnly) {
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
             return;
         }
         if (props.allowFreeForm === true) {
@@ -533,7 +522,7 @@ function useAutocomplete(props) {
             tryRestoreInputToSelectedLabel();
         }
         lastInputWasUser.current = false;
-        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props);
+        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, event);
     }, [
         readOnly,
         props.allowFreeForm,
@@ -920,10 +909,11 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onFocus: onInputFocus,
         onBlur: onInputBlur,
     });
-    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
-        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
+        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
             ? `${listboxId}-item-${activeIndex}`
-            : undefined });
+            : undefined }), dataAttrs);
     const referenceInputRef = (node) => {
         setReferenceElement(node);
         // Workaround to get the width of the visual InputText element, which is not the same as

package/dist/Autocomplete/index.mjs

@@ -11,6 +11,7 @@ import { I as Icon } from '../Icon-es.js';
 import { InputText } from '../InputText/index.mjs';
 import { G as Glimmer } from '../Glimmer-es.js';
 import { m as mergeRefs } from '../FormField-es.js';
+import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import { _ as __rest, a as __awaiter } from '../tslib.es6-es.js';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -18,18 +19,6 @@ import 'react-hook-form';
 import 'framer-motion';
 import '../Button-es.js';
 import 'react-router-dom';
-import '../omit-es.js';
-import '../_commonjsHelpers-es.js';
-import '../_baseGet-es.js';
-import '../isTypedArray-es.js';
-import '../isObjectLike-es.js';
-import '../identity-es.js';
-import '../_getTag-es.js';
-import '../isSymbol-es.js';
-import '../keysIn-es.js';
-import '../_baseAssignValue-es.js';
-import '../_baseFlatten-es.js';
-import '../_setToString-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
@@ -508,18 +497,18 @@ function useAutocomplete(props) {
         multiple,
         value,
     ]);
-    const onInputFocus = useCallback(() => {
+    const onInputFocus = useCallback((event) => {
         var _a;
         setInputFocused(true);
         if (!readOnly && openOnFocus)
             setOpen(true);
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
     }, [props.onFocus, readOnly, openOnFocus, setOpen]);
-    const onInputBlur = useCallback(() => {
+    const onInputBlur = useCallback((event) => {
         var _a, _b;
         setInputFocused(false);
         if (readOnly) {
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
             return;
         }
         if (props.allowFreeForm === true) {
@@ -531,7 +520,7 @@ function useAutocomplete(props) {
             tryRestoreInputToSelectedLabel();
         }
         lastInputWasUser.current = false;
-        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props);
+        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, event);
     }, [
         readOnly,
         props.allowFreeForm,
@@ -918,10 +907,11 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onFocus: onInputFocus,
         onBlur: onInputBlur,
     });
-    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
-        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
+    const dataAttrs = filterDataAttributes(props);
+    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
+        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
             ? `${listboxId}-item-${activeIndex}`
-            : undefined });
+            : undefined }), dataAttrs);
     const referenceInputRef = (node) => {
         setReferenceElement(node);
         // Workaround to get the width of the visual InputText element, which is not the same as

package/dist/Autocomplete/tests/Autocomplete.setup.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { type AutocompleteRebuiltProps, type MenuItem, type OptionLike } from "../Autocomplete.types";
-export declare function Wrapper<T extends OptionLike>({ initialValue, initialInputValue, onChange, onInputChange, onBlur, onFocus, menu, openOnFocus, filterOptions, emptyActions, customRenderOption, customRenderAction, customRenderSection, customRenderInput, customRenderHeader, customRenderFooter, loading, customRenderLoading, emptyStateMessage, ref, readOnly, UNSAFE_className, UNSAFE_styles, debounce, }: {
+export declare function Wrapper<T extends OptionLike>({ initialValue, initialInputValue, onChange, onInputChange, onBlur, onFocus, menu, openOnFocus, filterOptions, emptyActions, customRenderOption, customRenderAction, customRenderSection, customRenderInput, customRenderHeader, customRenderFooter, loading, customRenderLoading, emptyStateMessage, ref, readOnly, UNSAFE_className, UNSAFE_styles, debounce, ...props }: {
     readonly initialValue?: T;
     readonly initialInputValue?: string;
     readonly onChange?: (v: T | undefined) => void;

package/dist/Autocomplete/useAutocomplete.d.ts

@@ -59,8 +59,8 @@ export declare function useAutocomplete<Value extends OptionLike, Multiple exten
     onSelection: (option: Value) => void;
     onAction: (action: ActionConfig) => void;
     onInputChangeFromUser: (val: string) => void;
-    onInputBlur: () => void;
-    onInputFocus: () => void;
+    onInputBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onInputFocus: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onInputKeyDown: (event: React.KeyboardEvent) => void;
     setReferenceElement: (el: HTMLElement | null) => void;
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
-export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<Omit<import("./Checkbox.types").BaseCheckboxProps, "children" | "onChange" | "label" | "description"> & {
+export declare const CheckboxRebuilt: React.ForwardRefExoticComponent<import("./Checkbox.types").CheckboxCoreProps & import("../sharedHelpers/types").AriaInputProps & import("../sharedHelpers/types").FocusEvents<HTMLInputElement> & import("../sharedHelpers/types").MouseEvents<HTMLInputElement> & Pick<import("../sharedHelpers/types").HTMLInputBaseProps, "id" | "name" | "disabled"> & Pick<import("../sharedHelpers/types").RebuiltInputCommonProps, "version"> & {
     label?: string | React.ReactElement;
     description?: React.ReactNode;
+    invalid?: boolean;
     onChange?(newValue: boolean, event: React.ChangeEvent<HTMLInputElement>): void;
-    version: 2;
 } & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,6 +1,10 @@
 import type { ReactElement, ReactNode } from "react";
 import type { XOR } from "ts-xor";
-export interface BaseCheckboxProps {
+import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, MouseEvents, RebuiltInputCommonProps } from "../sharedHelpers/types";
+/**
+ * Shared checkbox-specific props used by both legacy and rebuilt versions
+ */
+export interface CheckboxCoreProps {
     /**
      * Determines if the checkbox is checked or not.
      */
@@ -11,24 +15,29 @@ export interface BaseCheckboxProps {
      * 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;
+}
+/**
+ * Base props for legacy checkbox
+ */
+export interface BaseCheckboxProps extends CheckboxCoreProps {
+    /**
+     * Disables the checkbox.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Checkbox input name
+     */
+    readonly name?: string;
     /**
      * Further description of the label
      */
@@ -49,10 +58,6 @@ export interface BaseCheckboxProps {
      * Called when the checkbox loses focus
      */
     onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
-    /**
-     * Whether the checkbox is invalid
-     */
-    invalid?: boolean;
 }
 interface CheckboxLabelProps extends BaseCheckboxProps {
     /**
@@ -66,7 +71,7 @@ interface CheckboxChildrenProps extends BaseCheckboxProps {
      */
     readonly children?: ReactElement;
 }
-export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "description" | "children" | "onChange"> & {
+export type CheckboxRebuiltProps = CheckboxCoreProps & AriaInputProps & FocusEvents<HTMLInputElement> & MouseEvents<HTMLInputElement> & Pick<HTMLInputBaseProps, "id" | "name" | "disabled"> & Pick<RebuiltInputCommonProps, "version"> & {
     /**
      * Label that shows up beside the checkbox.
      * String will be rendered with the default markup.
@@ -79,15 +84,16 @@ export type CheckboxRebuiltProps = Omit<BaseCheckboxProps, "label" | "descriptio
      * ReactElement will be rendered with provided positioning.
      */
     description?: ReactNode;
+    /**
+     * Whether the checkbox is invalid
+     */
+    invalid?: boolean;
     /**
      * Called when the checkbox value changes.
      * Includes the change event as a second argument.
+     * This is the recommended event handler to access the new value.
      */
     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;

package/dist/Checkbox/index.cjs

@@ -6,6 +6,7 @@ var classnames = require('classnames');
 var reactHookForm = require('react-hook-form');
 var Icon = require('../Icon-cjs.js');
 var Text = require('../Text-cjs.js');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 require('@jobber/design');
 require('../Typography-cjs.js');
 
@@ -54,12 +55,16 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
+const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal(props, ref) {
+    const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
     const descriptionIdentifier = React.useId();
+    const descriptionVisible = Boolean(description);
     const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
+    const isInvalid = Boolean(invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
     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);
@@ -70,7 +75,9 @@ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ chec
     return (React.createElement("div", { className: styles.checkBoxParent },
         React.createElement("label", { className: wrapperClassName },
             React.createElement("span", { className: styles.checkHolder },
-                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+                        ? descriptionIdentifier
+                        : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
                 React.createElement("span", { className: styles.checkBox },
                     React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
             labelContent && React.createElement("span", { className: styles.label }, labelContent)),

package/dist/Checkbox/index.mjs

@@ -4,6 +4,7 @@ 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 { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import '@jobber/design';
 import '../Typography-es.js';
 
@@ -52,12 +53,16 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
+const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal(props, ref) {
+    const { checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, onClick, onMouseDown, onMouseUp, onPointerDown, onPointerUp, invalid, } = props;
     const descriptionIdentifier = useId();
+    const descriptionVisible = Boolean(description);
     const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
+    const isInvalid = Boolean(invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
+    const dataAttrs = filterDataAttributes(props);
     const iconName = indeterminate ? "minus2" : "checkmark";
     const labelContent = typeof label === "string" ? React__default.createElement(Text, null, label) : label;
     const descriptionContent = typeof description === "string" ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description);
@@ -68,7 +73,9 @@ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, d
     return (React__default.createElement("div", { className: styles.checkBoxParent },
         React__default.createElement("label", { className: wrapperClassName },
             React__default.createElement("span", { className: styles.checkHolder },
-                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React__default.createElement("input", Object.assign({ ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+                        ? descriptionIdentifier
+                        : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onPointerDown: onPointerDown, onPointerUp: onPointerUp }, dataAttrs)),
                 React__default.createElement("span", { className: styles.checkBox },
                     React__default.createElement(Icon, { name: iconName, color: "surface" }))),
             labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),

package/dist/Chips/InternalChipDismissible/hooks/index.cjs

@@ -4,12 +4,12 @@ var useScrollToActive = require('../../../useScrollToActive-cjs.js');
 require('react');
 require('../../../_commonjsHelpers-cjs.js');
 require('../../../_baseFlatten-cjs.js');
-require('../../../_baseGet-cjs.js');
+require('../../../_getAllKeys-cjs.js');
 require('../../../isTypedArray-cjs.js');
 require('../../../isObjectLike-cjs.js');
+require('../../../isSymbol-cjs.js');
 require('../../../identity-cjs.js');
 require('../../../_getTag-cjs.js');
-require('../../../isSymbol-cjs.js');
 require('../../../_baseEach-cjs.js');
 require('../../../_baseFor-cjs.js');
 require('../../../_isIterateeCall-cjs.js');

package/dist/Chips/InternalChipDismissible/hooks/index.mjs

@@ -2,12 +2,12 @@ export { b as useInView, u as useInternalChipDismissible, a as useInternalChipDi
 import 'react';
 import '../../../_commonjsHelpers-es.js';
 import '../../../_baseFlatten-es.js';
-import '../../../_baseGet-es.js';
+import '../../../_getAllKeys-es.js';
 import '../../../isTypedArray-es.js';
 import '../../../isObjectLike-es.js';
+import '../../../isSymbol-es.js';
 import '../../../identity-es.js';
 import '../../../_getTag-es.js';
-import '../../../isSymbol-es.js';
 import '../../../_baseEach-es.js';
 import '../../../_baseFor-es.js';
 import '../../../_isIterateeCall-es.js';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -5,12 +5,12 @@ require('react');
 require('../../useScrollToActive-cjs.js');
 require('../../_commonjsHelpers-cjs.js');
 require('../../_baseFlatten-cjs.js');
-require('../../_baseGet-cjs.js');
+require('../../_getAllKeys-cjs.js');
 require('../../isTypedArray-cjs.js');
 require('../../isObjectLike-cjs.js');
+require('../../isSymbol-cjs.js');
 require('../../identity-cjs.js');
 require('../../_getTag-cjs.js');
-require('../../isSymbol-cjs.js');
 require('../../_baseEach-cjs.js');
 require('../../_baseFor-cjs.js');
 require('../../_isIterateeCall-cjs.js');

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -3,12 +3,12 @@ import 'react';
 import '../../useScrollToActive-es.js';
 import '../../_commonjsHelpers-es.js';
 import '../../_baseFlatten-es.js';
-import '../../_baseGet-es.js';
+import '../../_getAllKeys-es.js';
 import '../../isTypedArray-es.js';
 import '../../isObjectLike-es.js';
+import '../../isSymbol-es.js';
 import '../../identity-es.js';
 import '../../_getTag-es.js';
-import '../../isSymbol-es.js';
 import '../../_baseEach-es.js';
 import '../../_baseFor-es.js';
 import '../../_isIterateeCall-es.js';

package/dist/Chips/index.cjs

@@ -7,12 +7,12 @@ var Chips = require('../Chips-cjs.js');
 require('../useScrollToActive-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../_baseFlatten-cjs.js');
-require('../_baseGet-cjs.js');
+require('../_getAllKeys-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
+require('../isSymbol-cjs.js');
 require('../identity-cjs.js');
 require('../_getTag-cjs.js');
-require('../isSymbol-cjs.js');
 require('../_baseEach-cjs.js');
 require('../_baseFor-cjs.js');
 require('../_isIterateeCall-cjs.js');

package/dist/Chips/index.mjs

@@ -5,12 +5,12 @@ export { C as Chips } from '../Chips-es.js';
 import '../useScrollToActive-es.js';
 import '../_commonjsHelpers-es.js';
 import '../_baseFlatten-es.js';
-import '../_baseGet-es.js';
+import '../_getAllKeys-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
+import '../isSymbol-es.js';
 import '../identity-es.js';
 import '../_getTag-es.js';
-import '../isSymbol-es.js';
 import '../_baseEach-es.js';
 import '../_baseFor-es.js';
 import '../_isIterateeCall-es.js';

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

@@ -30,6 +30,7 @@ require('react-router-dom');
 require('../../../tslib.es6-cjs.js');
 require('../../../Checkbox/index.cjs');
 require('react-hook-form');
+require('../../../filterDataAttributes-cjs.js');
 require('../../../DataList.module-cjs.js');
 require('../../../DataListBulkActions-cjs.js');
 require('../../../DataListActions-cjs.js');

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

@@ -28,6 +28,7 @@ import 'react-router-dom';
 import '../../../tslib.es6-es.js';
 import '../../../Checkbox/index.mjs';
 import 'react-hook-form';
+import '../../../filterDataAttributes-es.js';
 import '../../../DataList.module-es.js';
 import '../../../DataListBulkActions-es.js';
 import '../../../DataListActions-es.js';

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

@@ -38,6 +38,7 @@ require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
 require('../../../Checkbox/index.cjs');
 require('react-hook-form');
+require('../../../filterDataAttributes-cjs.js');
 require('../../../useBatchSelect-cjs.js');
 require('../../../DataList.module-cjs.js');
 require('../../../DataListItemClickable-cjs.js');

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

@@ -36,6 +36,7 @@ import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
 import '../../../Checkbox/index.mjs';
 import 'react-hook-form';
+import '../../../filterDataAttributes-es.js';
 import '../../../useBatchSelect-es.js';
 import '../../../DataList.module-es.js';
 import '../../../DataListItemClickable-es.js';

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

@@ -39,6 +39,7 @@ require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
 require('../../../Checkbox/index.cjs');
 require('react-hook-form');
+require('../../../filterDataAttributes-cjs.js');
 require('../../../useBatchSelect-cjs.js');
 require('../../../DataList.module-cjs.js');
 require('../../../DataListItemClickable-cjs.js');

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

@@ -37,6 +37,7 @@ import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
 import '../../../Checkbox/index.mjs';
 import 'react-hook-form';
+import '../../../filterDataAttributes-es.js';
 import '../../../useBatchSelect-es.js';
 import '../../../DataList.module-es.js';
 import '../../../DataListItemClickable-es.js';

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

@@ -40,6 +40,7 @@ require('../../../DataListItemActionsOverflow-cjs.js');
 require('../../../DataListActionsMenu-cjs.js');
 require('../../../Checkbox/index.cjs');
 require('react-hook-form');
+require('../../../filterDataAttributes-cjs.js');
 require('../../../useBatchSelect-cjs.js');
 require('../../../DataList.module-cjs.js');
 require('../../../DataListItemClickable-cjs.js');

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

@@ -38,6 +38,7 @@ import '../../../DataListItemActionsOverflow-es.js';
 import '../../../DataListActionsMenu-es.js';
 import '../../../Checkbox/index.mjs';
 import 'react-hook-form';
+import '../../../filterDataAttributes-es.js';
 import '../../../useBatchSelect-es.js';
 import '../../../DataList.module-es.js';
 import '../../../DataListItemClickable-es.js';