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

package/dist/styles.css

@@ -99,11 +99,13 @@
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
   border-bottom: 1px solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
+  cursor: default;
 }
 
 .Twgjn26oldE- {
   padding: 8px 16px;
   padding: var(--space-small) var(--space-base);
+  cursor: default;
 }
 
 .mc1-CEwZtHE- {
@@ -132,6 +134,7 @@
 .vxk57ZhP8GU- {
   padding: 8px 0 4px 8px;
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
+  cursor: default;
 }
 
 .j4h-0Mxa5gk- {
@@ -2427,6 +2430,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 
   display: block;
   width: 100%;
+  box-sizing: border-box;
   border: 1px solid hsl(200, 13%, 87%);
   border: var(--card--border);
   border-radius: 8px;
@@ -2460,11 +2464,18 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 .Iilm5Uhxo50-::before {
   content: " ";
   display: block;
-  margin: 0 calc(-1 * 1px);
-  margin: 0 calc(-1 * var(--border-base));
-  border-top: 0.375rem solid var(--card--accent-color);
+  position: relative;
+  top: 1px;
+  top: var(--border-base);
+  height: calc(0.375rem - 1px * 2);
+  height: calc(0.375rem - var(--border-base) * 2);
+  box-shadow: 0 0 0 1px var(--card--accent-color);
+  box-shadow: 0 0 0 var(--border-base) var(--card--accent-color);
+  margin: 0 0 calc(1px * 2);
+  margin: 0 0 calc(var(--border-base) * 2);
   border-radius: 8px 8px 0 0;
   border-radius: var(--radius-base) var(--radius-base) 0 0;
+  background-color: var(--card--accent-color);
 }
 
 .Vppn4k0fBsc- {
@@ -6393,10 +6404,9 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       -webkit-transform: translateY(0) scale(1);
               transform: translateY(0) scale(1);
     }
-  .-hmXAsAfH9U- {
 
     /* options */
-    option {
+    .-hmXAsAfH9U- option {
       padding: 4px 0;
       padding: var(--space-smaller) 0;
       color: hsl(198, 35%, 21%);
@@ -6406,16 +6416,16 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
       cursor: pointer;
     }
 
-    option:hover,
-    option:focus,
-    option:focus-visible,
-    option:checked {
+    .-hmXAsAfH9U- option:hover,
+    .-hmXAsAfH9U- option:focus,
+    .-hmXAsAfH9U- option:focus-visible,
+    .-hmXAsAfH9U- option:checked {
       background-color: hsl(53, 21%, 93%);
       background-color: var(--color-surface--hover);
     }
 
     /* optgroup headers */
-    optgroup {
+    .-hmXAsAfH9U- optgroup {
       padding: 8px 0 0 0;
       padding: var(--space-small) 0 0 0;
       color: hsl(197, 90%, 12%);
@@ -6430,36 +6440,35 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
     }
 
     /* Divider directly under the group label */
-    optgroup option:first-child {
+    .-hmXAsAfH9U- optgroup option:first-child {
       border-top: 1px solid hsl(200, 13%, 87%);
       border-top: var(--border-base) solid var(--color-border);
     }
 
     /* Disabled groups and their options */
-    optgroup[disabled] {
+    .-hmXAsAfH9U- optgroup[disabled] {
       color: hsl(0, 0%, 58%);
       color: var(--color-disabled);
     }
-    optgroup[disabled] option,
-    option[disabled] {
+    .-hmXAsAfH9U- optgroup[disabled] option,
+    .-hmXAsAfH9U- option[disabled] {
       color: hsl(0, 0%, 58%);
       color: var(--color-disabled);
       cursor: default;
     }
 
-    optgroup[disabled] option:focus,
-    optgroup[disabled] option:focus-visible,
-    optgroup[disabled] option:checked,
-    optgroup[disabled] option:hover,
-    option[disabled]:focus,
-    option[disabled]:focus-visible,
-    option[disabled]:checked,
-    option[disabled]:hover {
+    .-hmXAsAfH9U- optgroup[disabled] option:focus,
+    .-hmXAsAfH9U- optgroup[disabled] option:focus-visible,
+    .-hmXAsAfH9U- optgroup[disabled] option:checked,
+    .-hmXAsAfH9U- optgroup[disabled] option:hover,
+    .-hmXAsAfH9U- option[disabled]:focus,
+    .-hmXAsAfH9U- option[disabled]:focus-visible,
+    .-hmXAsAfH9U- option[disabled]:checked,
+    .-hmXAsAfH9U- option[disabled]:hover {
       background-color: transparent;
     }
 
     /* Animate the chevron rotation for the provided postfix class */
-  }
     .-hmXAsAfH9U- + ._5ST4c1fXDYU- svg {
       transition: -webkit-transform 100ms;
       transition: -webkit-transform var(--timing-quick);

package/dist/useChildComponent-cjs.js

@@ -5,7 +5,7 @@ var React = require('react');
 /**
  * Returns the first React Child that receives `true` from isCorrectComponent
  * @param children React Children
- * @param isCorrectComponent a function that accepts a JSX Element and returns a boolean.
+ * @param isCorrectComponent a function that accepts a ReactElement and returns a boolean.
  * @returns The first child component that returns true on isCorrectComponent
  */
 function useChildComponent(children, isCorrectComponent) {

package/dist/useChildComponent-es.js

@@ -3,7 +3,7 @@ import React__default, { useMemo, isValidElement } from 'react';
 /**
  * Returns the first React Child that receives `true` from isCorrectComponent
  * @param children React Children
- * @param isCorrectComponent a function that accepts a JSX Element and returns a boolean.
+ * @param isCorrectComponent a function that accepts a ReactElement and returns a boolean.
  * @returns The first child component that returns true on isCorrectComponent
  */
 function useChildComponent(children, isCorrectComponent) {

package/dist/useScrollToActive-cjs.js

@@ -3,7 +3,7 @@
 var React = require('react');
 var _commonjsHelpers = require('./_commonjsHelpers-cjs.js');
 var _baseFlatten = require('./_baseFlatten-cjs.js');
-var _baseGet = require('./_baseGet-cjs.js');
+var _getAllKeys = require('./_getAllKeys-cjs.js');
 var _baseEach = require('./_baseEach-cjs.js');
 var isTypedArray = require('./isTypedArray-cjs.js');
 var isSymbol$1 = require('./isSymbol-cjs.js');
@@ -148,8 +148,8 @@ function compareMultiple$1(object, other, orders) {
 
 var _compareMultiple = compareMultiple$1;
 
-var arrayMap = _baseGet._arrayMap,
-    baseGet = _baseGet._baseGet,
+var arrayMap = _getAllKeys._arrayMap,
+    baseGet = _getAllKeys._baseGet,
     baseIteratee = _baseEach._baseIteratee,
     baseMap = _baseMap,
     baseSortBy = _baseSortBy,

package/dist/useScrollToActive-es.js

@@ -1,14 +1,14 @@
 import React__default, { useState, useId, useEffect, useRef } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { _ as _baseFlatten } from './_baseFlatten-es.js';
-import { a as _arrayMap, b as _baseGet } from './_baseGet-es.js';
+import { a as _arrayMap, b as _baseGet } from './_getAllKeys-es.js';
 import { _ as _baseEach, a as _baseIteratee } from './_baseEach-es.js';
 import { b as isArrayLike_1, k as _baseUnary, a as isArray_1 } from './isTypedArray-es.js';
 import { i as isSymbol_1 } from './isSymbol-es.js';
 import { i as identity_1 } from './identity-es.js';
 import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-es.js';
 import { useLiveAnnounce } from '@jobber/hooks';
-import { d as debounce } from './debounce-es.js';
+import { a as debounce } from './debounce-es.js';
 import { I as Icon } from './Icon-es.js';
 import { u as useFloating, o as offset, f as flip, c as size, b as autoUpdate } from './floating-ui.react-es.js';
 import { c as calculateMaxHeight } from './maxHeight-es.js';

package/dist/utils/mergeRefs.d.ts

@@ -1,6 +1,6 @@
-import type { LegacyRef, MutableRefObject, RefCallback } from "react";
+import type { LegacyRef, RefCallback, RefObject } from "react";
 /**
  * Given an array of refs, merge them into a single ref callback.
  * This is useful for cases where you need to pass a multiple refs to a component.
  */
-export declare function mergeRefs<T = unknown>(refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T>;
+export declare function mergeRefs<T = unknown>(refs: Array<RefObject<T> | LegacyRef<T> | undefined | null>): RefCallback<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.101.5-JOB-140604-4c8f8f2.41+4c8f8f2c3",
+  "version": "6.101.5-JOB-140604-4487daa.55+4487daa56",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -473,7 +473,7 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.5",
-    "@jobber/formatters": "^0.5.1-JOB-140604-4c8f8f2.120+4c8f8f2c3",
+    "@jobber/formatters": "^0.5.0",
     "@tanstack/react-table": "8.5.13",
     "@types/color": "^3.0.1",
     "@types/lodash": "^4.14.136",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4c8f8f2c37844355a5d654999ce62550aeeba2d8"
+  "gitHead": "4487daa56640c85a2198bde0b6296c4a290f623a"
 }

package/dist/InputEmail/hooks/useInputEmailFormField.d.ts

@@ -1,32 +0,0 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
-export interface UseInputEmailFormFieldProps {
-    readonly id: string;
-    readonly name: string;
-    readonly disabled?: boolean;
-    readonly autofocus?: boolean;
-    readonly error?: string;
-    readonly inline?: boolean;
-    readonly description?: ReactNode;
-    readonly invalid?: boolean;
-    readonly value?: string;
-    readonly handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    readonly handleBlur: (event?: FocusEvent<HTMLInputElement>) => void;
-    readonly handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    readonly handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-}
-export interface UseInputEmailFormFieldReturn {
-    readonly fieldProps: {
-        readonly id: string;
-        readonly name: string;
-        readonly disabled?: boolean;
-        readonly autofocus?: boolean;
-        readonly onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-        readonly onBlur: (event?: FocusEvent<HTMLInputElement>) => void;
-        readonly onFocus: (event: FocusEvent<HTMLInputElement>) => void;
-        readonly onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-        readonly value?: string;
-        readonly "aria-describedby"?: string;
-    };
-    readonly descriptionIdentifier: string;
-}
-export declare function useInputEmailFormField({ id, name, disabled, autofocus, description, inline, value, handleChange, handleBlur, handleFocus, handleKeyDown, error, ...rest }: UseInputEmailFormFieldProps): UseInputEmailFormFieldReturn;

package/dist/InputPhoneNumber/hooks/useInputPhoneFormField.d.ts

@@ -1,71 +0,0 @@
-import type { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from "react";
-export interface useInputPhoneFormFieldProps {
-    /**
-     * The html id for the field
-     */
-    readonly id: string;
-    /**
-     * The auto-generated name for the html input field if a nameProp is not provided
-     */
-    readonly name: string;
-    /**
-     * The error message for the field
-     */
-    readonly error?: string;
-    /**
-     * Adjusts the form field to go inline with a content. This also silences the
-     * given `validations` prop. You'd have to used the `onValidate` prop to
-     * capture the message and render it somewhere else using the
-     * `InputValidation` component.
-     */
-    readonly inline?: boolean;
-    /**
-     * Further description of the input, can be used for a hint.
-     */
-    readonly description?: ReactNode;
-    /**
-     * Callback for when the field value changes
-     */
-    handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Callback for when the field loses focus
-     */
-    handleBlur: () => void;
-    /**
-     * Callback for when the field gains focus
-     */
-    handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Callback for when keydown event is triggered on the field
-     */
-    handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-    readonly invalid?: boolean;
-    readonly disabled?: boolean;
-    readonly autofocus?: boolean;
-    readonly value?: string;
-    readonly readonly?: boolean;
-}
-export interface UseInputPhoneFormFieldReturn {
-    fieldProps: React.InputHTMLAttributes<HTMLInputElement>;
-}
-/**
- * Provides the props for the html fields rendered by the html input.
- *  DO not repeat this pattern. We are doing this as a proof of concept relating to the refactoring of Form inputs to see what can be removed.
- */
-export declare function useInputPhoneFormField({ id, name, description, inline, handleChange, handleBlur, handleFocus, handleKeyDown, error, disabled, autofocus, value, readonly, ...rest }: useInputPhoneFormFieldProps): {
-    fieldProps: {
-        readOnly: boolean | undefined;
-        "aria-describedby"?: string | undefined;
-        id: string;
-        name: string;
-        disabled: boolean | undefined;
-        autoFocus: boolean | undefined;
-        onChange: (event: ChangeEvent<HTMLInputElement>) => void;
-        onBlur: () => void;
-        onFocus: (event: FocusEvent<HTMLInputElement>) => void;
-        onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
-        value: string | undefined;
-        invalid: string | undefined;
-    };
-    descriptionIdentifier: string;
-};