@jobber/components 6.101.5-JOB-140604-4c8f8f2.41 → 6.101.5-JOB-140604-4487daa.55

package/dist/Select/index.cjs

@@ -10,13 +10,14 @@ require('@jobber/hooks');
 require('framer-motion');
 require('@jobber/design');
 require('../Button-cjs.js');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 require('../_commonjsHelpers-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('../keysIn-cjs.js');
 require('../_baseAssignValue-cjs.js');
 require('../_baseFlatten-cjs.js');
@@ -42,11 +43,11 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
         const newValue = event.currentTarget.value;
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
     }
-    function handleBlur() {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
-    function handleFocus() {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     }
     return {
         handleChange,
@@ -55,27 +56,15 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
     };
 }
 
-/**
- * Hook for managing the props of a Select component.
- * Extracted from FormField's useAtlantisFormField.
- */
-function useSelectFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, }) {
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign({ id,
-        name,
-        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value }, (description &&
-        !inline && { "aria-describedby": descriptionIdentifier }));
-    return { fieldProps, descriptionIdentifier };
-}
-
 var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
 
 function SelectRebuilt(props) {
-    var _a, _b;
-    const selectRef = (_a = props.inputRef) !== null && _a !== void 0 ? _a : React.useRef(null);
-    const wrapperRef = React.useRef(null);
-    const { inputStyle } = FormField.useFormFieldWrapperStyles(Object.assign({}, omit.omit(props, ["version"])));
-    const id = useSelectId(props);
+    var _a;
+    const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    const generatedId = React.useId();
+    const id = props.id || generatedId;
+    const descriptionIdentifier = `descriptionUUID--${id}`;
     const { name } = FormField.useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -85,27 +74,23 @@ function SelectRebuilt(props) {
         onBlur: props.onBlur,
         onFocus: props.onFocus,
     });
-    const inputProps = omit.omit(props, [
-        "onChange",
-        "onBlur",
-        "onFocus",
-        "size",
-        "placeholder",
-        "version",
-    ]);
-    const { fieldProps, descriptionIdentifier } = useSelectFormField(Object.assign(Object.assign({}, inputProps), { id,
-        name,
-        handleChange,
-        handleBlur,
-        handleFocus }));
-    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autofocus, name: name, wrapperRef: wrapperRef, error: (_b = props.error) !== null && _b !== void 0 ? _b : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    return (React.createElement(FormField.FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
         React.createElement(React.Fragment, null,
-            React.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }), props.children),
+            React.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+                    ? descriptionIdentifier
+                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(FormField.formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
             React.createElement(FormField.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
-function useSelectId(props) {
-    const generatedId = React.useId();
-    return props.id || generatedId;
+function useSelectRefs(inputRef) {
+    const internalRef = React.useRef(null);
+    const mergedRef = FormField.mergeRefs([
+        internalRef,
+        inputRef,
+    ]);
+    const wrapperRef = React.useRef(null);
+    return { mergedRef, wrapperRef };
 }
 
 function SelectOption({ children, disabled, value }) {

package/dist/Select/index.mjs

@@ -1,6 +1,6 @@
-import React__default, { useRef, useId } from 'react';
+import React__default, { useId, useRef } from 'react';
 import { o as omit } from '../omit-es.js';
-import { k as FormField, j as useFormFieldWrapperStyles, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as FormFieldPostFix } from '../FormField-es.js';
+import { k as FormField, b as useAtlantisFormFieldName, f as FormFieldWrapper, l as formFieldStyles, m as FormFieldPostFix, n as mergeRefs } from '../FormField-es.js';
 import classnames from 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
@@ -8,13 +8,14 @@ import '@jobber/hooks';
 import 'framer-motion';
 import '@jobber/design';
 import '../Button-es.js';
+import { f as filterDataAttributes } from '../filterDataAttributes-es.js';
 import '../_commonjsHelpers-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 '../keysIn-es.js';
 import '../_baseAssignValue-es.js';
 import '../_baseFlatten-es.js';
@@ -40,11 +41,11 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
         const newValue = event.currentTarget.value;
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue, event);
     }
-    function handleBlur() {
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    function handleBlur(event) {
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
     }
-    function handleFocus() {
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus();
+    function handleFocus(event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     }
     return {
         handleChange,
@@ -53,27 +54,15 @@ function useSelectActions({ onChange, onBlur, onFocus, }) {
     };
 }
 
-/**
- * Hook for managing the props of a Select component.
- * Extracted from FormField's useAtlantisFormField.
- */
-function useSelectFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, }) {
-    const descriptionIdentifier = `descriptionUUID--${id}`;
-    const fieldProps = Object.assign({ id,
-        name,
-        disabled, autoFocus: autofocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value }, (description &&
-        !inline && { "aria-describedby": descriptionIdentifier }));
-    return { fieldProps, descriptionIdentifier };
-}
-
 var styles = {"select":"-hmXAsAfH9U-","selectPostfix":"_5ST4c1fXDYU-","spinning":"oOACJmrVDf0-"};
 
 function SelectRebuilt(props) {
-    var _a, _b;
-    const selectRef = (_a = props.inputRef) !== null && _a !== void 0 ? _a : useRef(null);
-    const wrapperRef = useRef(null);
-    const { inputStyle } = useFormFieldWrapperStyles(Object.assign({}, omit(props, ["version"])));
-    const id = useSelectId(props);
+    var _a;
+    const { mergedRef, wrapperRef } = useSelectRefs(props.inputRef);
+    const dataAttrs = filterDataAttributes(props);
+    const generatedId = useId();
+    const id = props.id || generatedId;
+    const descriptionIdentifier = `descriptionUUID--${id}`;
     const { name } = useAtlantisFormFieldName({
         nameProp: props.name,
         id: id,
@@ -83,27 +72,23 @@ function SelectRebuilt(props) {
         onBlur: props.onBlur,
         onFocus: props.onFocus,
     });
-    const inputProps = omit(props, [
-        "onChange",
-        "onBlur",
-        "onFocus",
-        "size",
-        "placeholder",
-        "version",
-    ]);
-    const { fieldProps, descriptionIdentifier } = useSelectFormField(Object.assign(Object.assign({}, inputProps), { id,
-        name,
-        handleChange,
-        handleBlur,
-        handleFocus }));
-    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, autofocus: props.autofocus, name: name, wrapperRef: wrapperRef, error: (_b = props.error) !== null && _b !== void 0 ? _b : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never", maxLength: props.maxLength },
+    const descriptionVisible = props.description && !props.inline;
+    const isInvalid = Boolean(props.error || props.invalid);
+    return (React__default.createElement(FormFieldWrapper, { disabled: props.disabled, size: props.size, align: props.align, inline: props.inline, name: name, wrapperRef: wrapperRef, error: (_a = props.error) !== null && _a !== void 0 ? _a : "", invalid: props.invalid, identifier: id, descriptionIdentifier: descriptionIdentifier, description: props.description, type: "select", placeholder: props.placeholder, value: props.value, prefix: props.prefix, suffix: props.suffix, clearable: "never" },
         React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }), props.children),
+            React__default.createElement("select", Object.assign({ id: id, name: name, disabled: props.disabled, autoFocus: props.autoFocus, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, value: props.value, "aria-label": props["aria-label"], "aria-describedby": descriptionVisible
+                    ? descriptionIdentifier
+                    : props["aria-describedby"], "aria-invalid": isInvalid ? true : undefined, "aria-required": props["aria-required"], ref: mergedRef, className: classnames(formFieldStyles.input, props.UNSAFE_experimentalStyles && styles.select) }, dataAttrs), props.children),
             React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
-function useSelectId(props) {
-    const generatedId = useId();
-    return props.id || generatedId;
+function useSelectRefs(inputRef) {
+    const internalRef = useRef(null);
+    const mergedRef = mergeRefs([
+        internalRef,
+        inputRef,
+    ]);
+    const wrapperRef = useRef(null);
+    return { mergedRef, wrapperRef };
 }
 
 function SelectOption({ children, disabled, value }) {

package/dist/StatusLabel/StatusLabel.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { StatusIndicatorType } from "../StatusIndicator/StatusIndicator.type";
 export interface StatusLabelType {
     readonly statusLabel: string;
@@ -21,5 +22,5 @@ interface StatusLabelProps {
      */
     readonly status: StatusIndicatorType;
 }
-export declare function StatusLabel({ label, alignment, status, }: StatusLabelProps): JSX.Element;
+export declare function StatusLabel({ label, alignment, status, }: StatusLabelProps): React.JSX.Element;
 export {};

package/dist/Tabs/hooks/useTabsOverflow.d.ts

@@ -1,8 +1,8 @@
-import type { MutableRefObject } from "react";
+import type { RefObject } from "react";
 interface UseTabsOverflow {
     overflowRight: boolean;
     overflowLeft: boolean;
-    tabRow: MutableRefObject<HTMLUListElement>;
+    tabRow: RefObject<HTMLUListElement | null>;
 }
 export declare function useTabsOverflow(): UseTabsOverflow;
 export {};

package/dist/Tabs-cjs.js

@@ -84,7 +84,7 @@ var throttle$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(throttle_
 function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = React.useState(false);
     const [overflowLeft, setOverflowLeft] = React.useState(false);
-    const tabRow = React.useRef();
+    const tabRow = React.useRef(null);
     const handleOverflowing = () => {
         if (tabRow.current) {
             const scrollWidth = tabRow.current.scrollWidth;
@@ -197,7 +197,9 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
                         }
                     }, tabIndex: activeTab === index ? 0 : -1 }));
             }))),
-        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
+        React.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": typeof (activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label) === "string"
+                ? activeTabProps.label
+                : undefined }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
 }
 function Tab({ label }) {
     return React.createElement(React.Fragment, null, label);

package/dist/Tabs-es.js

@@ -1,7 +1,7 @@
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import classnames from 'classnames';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
-import { a as debounce_1 } from './debounce-es.js';
+import { d as debounce_1 } from './debounce-es.js';
 import { a as isObject_1 } from './isObjectLike-es.js';
 import { T as Typography } from './Typography-es.js';
 
@@ -82,7 +82,7 @@ var throttle$1 = /*@__PURE__*/getDefaultExportFromCjs(throttle_1);
 function useTabsOverflow() {
     const [overflowRight, setOverflowRight] = useState(false);
     const [overflowLeft, setOverflowLeft] = useState(false);
-    const tabRow = useRef();
+    const tabRow = useRef(null);
     const handleOverflowing = () => {
         if (tabRow.current) {
             const scrollWidth = tabRow.current.scrollWidth;
@@ -195,7 +195,9 @@ function Tabs({ children, defaultTab = 0, activeTab: controlledActiveTab, onTabC
                         }
                     }, tabIndex: activeTab === index ? 0 : -1 }));
             }))),
-        React__default.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
+        React__default.createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": typeof (activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.label) === "string"
+                ? activeTabProps.label
+                : undefined }, activeTabProps === null || activeTabProps === void 0 ? void 0 : activeTabProps.children)));
 }
 function Tab({ label }) {
     return React__default.createElement(React__default.Fragment, null, label);

package/dist/Tooltip/useTooltipPositioning.d.ts

@@ -11,7 +11,7 @@ export declare function useTooltipPositioning({ preferredPlacement, }: ToolTipPo
         }) | undefined;
     };
     placement: import("@floating-ui/utils").Placement;
-    shadowRef: import("react").RefObject<HTMLSpanElement>;
+    shadowRef: import("react").RefObject<HTMLSpanElement | null>;
     setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
     setTooltipRef: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
 };

package/dist/_baseEach-cjs.js

@@ -2,7 +2,7 @@
 
 var identity$1 = require('./identity-cjs.js');
 var isObjectLike$1 = require('./isObjectLike-cjs.js');
-var _baseGet = require('./_baseGet-cjs.js');
+var _getAllKeys = require('./_getAllKeys-cjs.js');
 var _getTag = require('./_getTag-cjs.js');
 var isTypedArray$1 = require('./isTypedArray-cjs.js');
 var _commonjsHelpers = require('./_commonjsHelpers-cjs.js');
@@ -351,7 +351,7 @@ function equalByTag$1(object, other, tag, bitmask, customizer, equalFunc, stack)
 
 var _equalByTag = equalByTag$1;
 
-var getAllKeys = _baseGet._getAllKeys;
+var getAllKeys = _getAllKeys._getAllKeys;
 
 /** Used to compose bitmasks for value comparisons. */
 var COMPARE_PARTIAL_FLAG$3 = 1;
@@ -635,7 +635,7 @@ function isStrictComparable$2(value) {
 var _isStrictComparable = isStrictComparable$2;
 
 var isStrictComparable$1 = _isStrictComparable,
-    keys$1 = _baseGet.keys_1;
+    keys$1 = _getAllKeys.keys_1;
 
 /**
  * Gets the property names, values, and compare flags of `object`.
@@ -704,7 +704,7 @@ function baseMatches$1(source) {
 
 var _baseMatches = baseMatches$1;
 
-var baseGet$1 = _baseGet._baseGet;
+var baseGet$1 = _getAllKeys._baseGet;
 
 /**
  * Gets the value at `path` of `object`. If the resolved value is
@@ -755,12 +755,12 @@ function baseHasIn$1(object, key) {
 
 var _baseHasIn = baseHasIn$1;
 
-var castPath = _baseGet._castPath,
+var castPath = _getAllKeys._castPath,
     isArguments = isTypedArray$1.isArguments_1,
     isArray$1 = isTypedArray$1.isArray_1,
     isIndex = identity$1._isIndex,
     isLength = isTypedArray$1.isLength_1,
-    toKey$2 = _baseGet._toKey;
+    toKey$2 = _getAllKeys._toKey;
 
 /**
  * Checks if `path` exists on `object`.
@@ -833,10 +833,10 @@ var hasIn_1 = hasIn$1;
 var baseIsEqual = _baseIsEqual,
     get = get_1,
     hasIn = hasIn_1,
-    isKey$1 = _baseGet._isKey,
+    isKey$1 = _getAllKeys._isKey,
     isStrictComparable = _isStrictComparable,
     matchesStrictComparable = _matchesStrictComparable,
-    toKey$1 = _baseGet._toKey;
+    toKey$1 = _getAllKeys._toKey;
 
 /** Used to compose bitmasks for value comparisons. */
 var COMPARE_PARTIAL_FLAG = 1,
@@ -880,7 +880,7 @@ function baseProperty$1(key) {
 
 var _baseProperty = baseProperty$1;
 
-var baseGet = _baseGet._baseGet;
+var baseGet = _getAllKeys._baseGet;
 
 /**
  * A specialized version of `baseProperty` which supports deep paths.
@@ -899,8 +899,8 @@ var _basePropertyDeep = basePropertyDeep$1;
 
 var baseProperty = _baseProperty,
     basePropertyDeep = _basePropertyDeep,
-    isKey = _baseGet._isKey,
-    toKey = _baseGet._toKey;
+    isKey = _getAllKeys._isKey,
+    toKey = _getAllKeys._toKey;
 
 /**
  * Creates a function that returns the value at `path` of a given object.
@@ -963,7 +963,7 @@ function baseIteratee(value) {
 var _baseIteratee = baseIteratee;
 
 var baseFor = _baseFor._baseFor,
-    keys = _baseGet.keys_1;
+    keys = _getAllKeys.keys_1;
 
 /**
  * The base implementation of `_.forOwn` without support for iteratee shorthands.

package/dist/_baseEach-es.js

@@ -1,6 +1,6 @@
 import { g as _MapCache, d as _Uint8Array, e as eq_1, c as _Stack, a as _isIndex, i as identity_1 } from './identity-es.js';
 import { b as _Symbol, i as isObjectLike_1, a as isObject_1 } from './isObjectLike-es.js';
-import { e as _getAllKeys, k as keys_1, b as _baseGet, f as _castPath, g as _toKey, h as _isKey } from './_baseGet-es.js';
+import { e as _getAllKeys, k as keys_1, b as _baseGet, f as _castPath, g as _toKey, h as _isKey } from './_getAllKeys-es.js';
 import { a as _getTag } from './_getTag-es.js';
 import { c as isBufferExports, d as isTypedArray_1, a as isArray_1, i as isArguments_1, m as isLength_1, b as isArrayLike_1 } from './isTypedArray-es.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';

package/dist/_baseFlatten-cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var _baseGet = require('./_baseGet-cjs.js');
+var _getAllKeys = require('./_getAllKeys-cjs.js');
 var isObjectLike = require('./isObjectLike-cjs.js');
 var isTypedArray = require('./isTypedArray-cjs.js');
 
@@ -25,7 +25,7 @@ function isFlattenable$1(value) {
 
 var _isFlattenable = isFlattenable$1;
 
-var arrayPush = _baseGet._arrayPush,
+var arrayPush = _getAllKeys._arrayPush,
     isFlattenable = _isFlattenable;
 
 /**

package/dist/_baseFlatten-es.js

@@ -1,4 +1,4 @@
-import { _ as _arrayPush } from './_baseGet-es.js';
+import { _ as _arrayPush } from './_getAllKeys-es.js';
 import { b as _Symbol } from './isObjectLike-es.js';
 import { i as isArguments_1, a as isArray_1 } from './isTypedArray-es.js';