@jobber/components 6.82.6 → 6.83.0

package/dist/FormField/FormFieldPostFix.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface FormFieldPostFixProps {
     readonly variation: "select" | "spinner";
     readonly visible?: boolean;
+    readonly className?: string;
 }
-export declare function FormFieldPostFix({ variation, visible, }: FormFieldPostFixProps): React.JSX.Element | null;
+export declare function FormFieldPostFix({ variation, visible, className, }: FormFieldPostFixProps): React.JSX.Element | null;
 export {};

package/dist/FormField-cjs.js

@@ -252,10 +252,10 @@ function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEn
         React.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
-function FormFieldPostFix({ variation, visible = true, }) {
+function FormFieldPostFix({ variation, visible = true, className, }) {
     if (!visible)
         return null;
-    return (React.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
+    return (React.createElement("span", { className: classnames(styles$1.postfix, className) }, variation === "select" ? (React.createElement(Icon.Icon, { name: "arrowDown" })) : (React.createElement(Spinner.Spinner, { size: "small" }))));
 }
 
 /**

package/dist/FormField-es.js

@@ -250,10 +250,10 @@ function FormFieldWrapperToolbar({ toolbar, isToolbarVisible, toolbarAnimationEn
         React__default.createElement("div", { className: styles$1.toolbar, "data-testid": "ATL-InputText-Toolbar" }, toolbar)))));
 }
 
-function FormFieldPostFix({ variation, visible = true, }) {
+function FormFieldPostFix({ variation, visible = true, className, }) {
     if (!visible)
         return null;
-    return (React__default.createElement("span", { className: styles$1.postfix }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
+    return (React__default.createElement("span", { className: classnames(styles$1.postfix, className) }, variation === "select" ? (React__default.createElement(Icon, { name: "arrowDown" })) : (React__default.createElement(Spinner, { size: "small" }))));
 }
 
 /**

package/dist/InputTime/index.cjs

@@ -4,8 +4,8 @@ var React = require('react');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 var debounce = require('../debounce-cjs.js');
 var FormField = require('../FormField-cjs.js');
-require('@jobber/design');
 require('classnames');
+require('@jobber/design');
 require('react-hook-form');
 require('../Button-cjs.js');
 var omit = require('../omit-cjs.js');

package/dist/InputTime/index.mjs

@@ -2,8 +2,8 @@ import React__default, { useState, useCallback, useEffect, useRef, useId } from
 import { _ as __rest } from '../tslib.es6-es.js';
 import { a as debounce } from '../debounce-es.js';
 import { j as useFormFieldWrapperStyles, f as FormFieldWrapper, k as FormField } from '../FormField-es.js';
-import '@jobber/design';
 import 'classnames';
+import '@jobber/design';
 import 'react-hook-form';
 import '../Button-es.js';
 import { o as omit } from '../omit-es.js';

package/dist/Select/OptionGroup.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { ReactNode } from "react";
+export interface OptionGroupProps {
+    readonly children?: ReactNode;
+    readonly label: string;
+    readonly disabled?: boolean;
+    /**
+     * Use at your own risk: Custom classnames for specific elements. This should only be used as a
+     * last resort. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     *
+     * Additional details: The provided class names are applied to the root `<optgroup>` element.
+     * Only effective when `Select` version={2} is used with `UNSAFE_experimentalStyles`.
+     */
+    readonly UNSAFE_className?: string;
+    /**
+     * Use at your own risk: Custom style for specific elements. This should only be used as a
+     * last resort. Using this may result in unexpected side effects.
+     * More information in the [Customizing components Guide](https://atlantis.getjobber.com/guides/customizing-components).
+     *
+     * Additional details: Styles are applied directly to the root `<optgroup>` element via
+     * `UNSAFE_style.container`. Only effective when `Select` version={2} is used with
+     * `UNSAFE_experimentalStyles`.
+     */
+    readonly UNSAFE_style?: {
+        container?: React.CSSProperties;
+    };
+}
+export declare function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }: OptionGroupProps): React.JSX.Element;

package/dist/Select/Select.types.d.ts

@@ -14,4 +14,11 @@ export interface SelectRebuiltProps extends Omit<SelectLegacyProps, "defaultValu
     onChange?(newValue?: string | number): void;
     version: 2;
     error?: string;
+    /**
+     * Opt-in to the customizable select UI (Chromium 123+).
+     * When true, the component will apply the custom select styles
+     * Defaults to false for native behavior.
+     * Only supported by Select version={2}.
+     */
+    readonly UNSAFE_experimentalStyles?: boolean;
 }

package/dist/Select/index.cjs

@@ -3,7 +3,7 @@
 var React = require('react');
 var omit = require('../omit-cjs.js');
 var FormField = require('../FormField-cjs.js');
-require('classnames');
+var classnames = require('classnames');
 require('../tslib.es6-cjs.js');
 require('react-hook-form');
 require('framer-motion');
@@ -67,6 +67,8 @@ function useSelectFormField({ id, name, disabled, autofocus, description, inline
     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);
@@ -97,8 +99,8 @@ function SelectRebuilt(props) {
         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 },
         React.createElement(React.Fragment, null,
-            React.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: inputStyle }), props.children),
-            React.createElement(FormField.FormFieldPostFix, { variation: "select" }))));
+            React.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }), props.children),
+            React.createElement(FormField.FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
 function useSelectId(props) {
     const generatedId = React.useId();
@@ -109,6 +111,10 @@ function SelectOption({ children, disabled, value }) {
     return (React.createElement("option", { disabled: disabled, value: value }, children));
 }
 
+function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
+    return (React.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, children));
+}
+
 function isNewSelectProps(props) {
     return props.version === 2;
 }
@@ -120,6 +126,8 @@ function Select(props) {
         return React.createElement(Select$1, Object.assign({}, props));
     }
 }
+Select.Option = SelectOption;
+Select.OptionGroup = OptionGroup;
 
 exports.Option = SelectOption;
 exports.Select = Select;

package/dist/Select/index.d.ts

@@ -3,4 +3,8 @@ import { type SelectLegacyProps, type SelectRebuiltProps } from "./Select.types"
 export { Option } from "./Option";
 export type SelectShimProps = SelectLegacyProps | SelectRebuiltProps;
 export declare function Select(props: SelectShimProps): React.JSX.Element;
+export declare namespace Select {
+    var Option: typeof import("./Option").Option;
+    var OptionGroup: typeof import("./OptionGroup").OptionGroup;
+}
 export type { SelectRebuiltProps, SelectLegacyProps };

package/dist/Select/index.mjs

@@ -1,7 +1,7 @@
 import React__default, { useRef, useId } 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 'classnames';
+import classnames from 'classnames';
 import '../tslib.es6-es.js';
 import 'react-hook-form';
 import 'framer-motion';
@@ -65,6 +65,8 @@ function useSelectFormField({ id, name, disabled, autofocus, description, inline
     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);
@@ -95,8 +97,8 @@ function SelectRebuilt(props) {
         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 },
         React__default.createElement(React__default.Fragment, null,
-            React__default.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: inputStyle }), props.children),
-            React__default.createElement(FormFieldPostFix, { variation: "select" }))));
+            React__default.createElement("select", Object.assign({}, fieldProps, { ref: selectRef, className: classnames(inputStyle, props.UNSAFE_experimentalStyles && styles.select) }), props.children),
+            React__default.createElement(FormFieldPostFix, { variation: "select", className: styles.selectPostfix }))));
 }
 function useSelectId(props) {
     const generatedId = useId();
@@ -107,6 +109,10 @@ function SelectOption({ children, disabled, value }) {
     return (React__default.createElement("option", { disabled: disabled, value: value }, children));
 }
 
+function OptionGroup({ children, label, disabled, UNSAFE_className, UNSAFE_style, }) {
+    return (React__default.createElement("optgroup", { label: label, disabled: disabled, className: UNSAFE_className, style: UNSAFE_style === null || UNSAFE_style === void 0 ? void 0 : UNSAFE_style.container }, children));
+}
+
 function isNewSelectProps(props) {
     return props.version === 2;
 }
@@ -118,5 +124,7 @@ function Select(props) {
         return React__default.createElement(Select$1, Object.assign({}, props));
     }
 }
+Select.Option = SelectOption;
+Select.OptionGroup = OptionGroup;
 
 export { SelectOption as Option, Select };

package/dist/styles.css

@@ -6024,6 +6024,174 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
 }
   }
 
+/* stylelint-disable selector-pseudo-class-no-unknown */
+/* stylelint-disable selector-pseudo-element-no-unknown */
+/**
+ * Chrome 123+ customizable select styling for option groups
+ * Based on: https://developer.chrome.com/blog/a-customizable-select
+ *
+ * IMPORTANT: All custom styling is gated behind a feature query so that
+ * unsupported browsers fall back to the native select without any layout
+ * regressions in our FormField wrapper.
+ */
+@supports ((-webkit-appearance: base-select) or (appearance: base-select)) {
+    /* opt into customizing select */
+    .-hmXAsAfH9U-,
+    .-hmXAsAfH9U-::picker(select) {
+      -webkit-appearance: base-select;
+              appearance: base-select;
+
+      /* Dropdown styling */
+    }
+      .-hmXAsAfH9U-::picker(select), .-hmXAsAfH9U-::picker(select)::picker(select) {
+        box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+        box-shadow: var(--shadow-base);
+        margin-top: 8px;
+        margin-top: var(--space-small);
+        padding: 0;
+        border: 1px solid hsl(200, 13%, 87%);
+        border: var(--border-base) solid var(--color-border);
+        border-radius: 8px;
+        border-radius: var(--radius-base);
+        background: rgba(255, 255, 255, 1);
+        background: var(--color-surface);
+      }
+
+    /* enable transitions in the drop down */
+    .-hmXAsAfH9U-::picker(select) {
+      transition:
+        opacity 200ms ease,
+        display 200ms allow-discrete,
+        overlay 200ms allow-discrete,
+        -webkit-transform 200ms ease-out;
+      transition:
+        opacity var(--timing-base) ease,
+        display var(--timing-base) allow-discrete,
+        overlay var(--timing-base) allow-discrete,
+        -webkit-transform var(--timing-base) ease-out;
+      transition:
+        opacity 200ms ease,
+        transform 200ms ease-out,
+        display 200ms allow-discrete,
+        overlay 200ms allow-discrete;
+      transition:
+        opacity var(--timing-base) ease,
+        transform var(--timing-base) ease-out,
+        display var(--timing-base) allow-discrete,
+        overlay var(--timing-base) allow-discrete;
+      transition:
+        opacity 200ms ease,
+        transform 200ms ease-out,
+        display 200ms allow-discrete,
+        overlay 200ms allow-discrete,
+        -webkit-transform 200ms ease-out;
+      transition:
+        opacity var(--timing-base) ease,
+        transform var(--timing-base) ease-out,
+        display var(--timing-base) allow-discrete,
+        overlay var(--timing-base) allow-discrete,
+        -webkit-transform var(--timing-base) ease-out;
+    }
+
+    .-hmXAsAfH9U-::picker-icon {
+      display: none;
+    }
+
+    .-hmXAsAfH9U-:not(:open)::picker(select) {
+      opacity: 0;
+      -webkit-transform: scale(0.95);
+              transform: scale(0.95);
+    }
+
+    .-hmXAsAfH9U-:open::picker(select) {
+      opacity: 1;
+      -webkit-transform: translateY(0) scale(1);
+              transform: translateY(0) scale(1);
+    }
+  .-hmXAsAfH9U- {
+
+    /* options */
+    option {
+      padding: 4px 0;
+      padding: var(--space-smaller) 0;
+      color: hsl(198, 35%, 21%);
+      color: var(--color-text);
+      text-indent: 8px;
+      text-indent: var(--space-small);
+      cursor: pointer;
+    }
+
+    option:hover,
+    option:focus,
+    option:focus-visible,
+    option:checked {
+      background-color: hsl(53, 21%, 93%);
+      background-color: var(--color-surface--hover);
+    }
+
+    /* optgroup headers */
+    optgroup {
+      padding: 8px 0 0 0;
+      padding: var(--space-small) 0 0 0;
+      color: hsl(197, 90%, 12%);
+      color: var(--color-heading);
+      font-size: 14px;
+      font-size: var(--typography--fontSize-base);
+      font-style: normal;
+      font-weight: 700;
+      text-indent: 8px;
+      text-indent: var(--space-small);
+      background-color: transparent;
+    }
+
+    /* Divider directly under the group label */
+    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] {
+      color: hsl(0, 0%, 72%);
+      color: var(--color-disabled);
+    }
+    optgroup[disabled] option,
+    option[disabled] {
+      color: hsl(0, 0%, 72%);
+      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 {
+      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);
+      transition: transform 100ms;
+      transition: transform var(--timing-quick);
+      transition: transform 100ms, -webkit-transform 100ms;
+      transition: transform var(--timing-quick), -webkit-transform var(--timing-quick);
+      -webkit-transform-origin: 50% 50%;
+              transform-origin: 50% 50%;
+    }
+    /* Rotate the postfix chevron when the select is open */
+    .-hmXAsAfH9U-:open + ._5ST4c1fXDYU- svg {
+      -webkit-transform: rotate(180deg);
+              transform: rotate(180deg);
+    }
+}
+
 .wMM6V80Rt-w- {
   padding: 16px;
   padding: var(--space-base);

package/dist/utils/meta/meta.json

@@ -166,6 +166,8 @@
     "SegmentedControlContext.Provider",
     "SegmentedControlProvider",
     "Select",
+    "Select.Option",
+    "Select.OptionGroup",
     "SideDrawer",
     "SideDrawer.Actions",
     "SideDrawer.BackButton",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.82.6",
+  "version": "6.83.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -547,5 +547,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "d42f49fcff1b4ff5e5b5a6ce9ef3e16cdaeab281"
+  "gitHead": "199760ca563702adca0a1e359c2a7b67406c39df"
 }