@jobber/components 6.86.5 → 6.88.0

package/dist/AtlantisThemeContext/AtlantisThemeContext.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { AtlantisThemeContextProviderProps, AtlantisThemeContextValue } from "./types";
 export declare const atlantisThemeContextDefaultValues: AtlantisThemeContextValue;
-export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }: AtlantisThemeContextProviderProps): React.JSX.Element;
+export declare function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }: AtlantisThemeContextProviderProps): React.JSX.Element;
 export declare function useAtlantisTheme(): AtlantisThemeContextValue;

package/dist/AtlantisThemeContext/types.d.ts

@@ -9,6 +9,10 @@ export interface AtlantisThemeContextValue {
      * The design tokens for the current theme.
      */
     readonly tokens: typeof tokens;
+    /**
+     * Any overridden tokens supplied by the user.
+     */
+    readonly overrideTokens?: OverrideTokens;
 }
 export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
     /**
@@ -20,7 +24,20 @@ export interface AtlantisThemeContextProviderProps extends PropsWithChildren {
      * This is dangerous because the children in this provider will not be able to change the theme.
      */
     readonly dangerouslyOverrideTheme?: Theme;
+    /**
+     * Overrides existing design tokens with custom values. Can also supply custom tokens which will be accessible
+     * via useAtlantisTheme() context and css variables.
+     * If provided, these tokens will be used for both light and dark themes.
+     *
+     * **Important**: you should provide a constant or at least a memoized value for performance reasons.
+     */
+    readonly dangerouslyOverrideTokens?: OverrideTokens;
 }
+export type OverrideTokens = {
+    [K in keyof typeof tokens]?: (typeof tokens)[K];
+} & {
+    [customKey: string]: string | number;
+};
 export type Theme = "light" | "dark";
 export interface ThemeChangeDetails {
     theme: Theme;

package/dist/AtlantisThemeContext-cjs.js

@@ -342,7 +342,7 @@ var merge$1 = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(merge_1);
 
 const THEME_CHANGE_EVENT = "atlantis.toggle-theme";
 
-var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","spinning":"iq03qkKnXBA-"};
+var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
 
 const atlantisThemeContextDefaultValues = {
     theme: "light",
@@ -350,17 +350,17 @@ const atlantisThemeContextDefaultValues = {
 };
 const actualDarkTokens = merge$1({}, design.tokens, design.darkTokens);
 const AtlantisThemeContext = React.createContext(atlantisThemeContextDefaultValues);
-function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }) {
+function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }) {
     if (dangerouslyOverrideTheme) {
-        return (React.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
+        return (React.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
     }
-    return (React.createElement(InternalDynamicThemeProvider, null, children));
+    return (React.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens }, children));
 }
-function InternalDynamicThemeProvider({ children }) {
+function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, }) {
     var _a;
     const initialTheme = (_a = globalThis.document.documentElement.dataset.theme) !== null && _a !== void 0 ? _a : "light";
     const [internalTheme, setInternalTheme] = React.useState(initialTheme);
-    const currentTokens = internalTheme === "dark" ? actualDarkTokens : design.tokens;
+    const { finalTokens, cssVariableOverrides } = useTokens(internalTheme, dangerouslyOverrideTokens);
     const handleThemeChangeEvent = React.useCallback((event) => {
         const newTheme = event.detail.theme;
         setInternalTheme(newTheme);
@@ -375,20 +375,46 @@ function InternalDynamicThemeProvider({ children }) {
     }, [handleThemeChangeEvent]);
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
             theme: internalTheme,
-            tokens: currentTokens,
-        } }, children));
+            tokens: finalTokens,
+            overrideTokens: dangerouslyOverrideTokens,
+        } }, cssVariableOverrides ? (React.createElement("div", { className: styles.overrideTokensWrapper, style: cssVariableOverrides }, children)) : (children)));
 }
-function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, }) {
-    const currentTokens = dangerouslyOverrideTheme === "dark" ? actualDarkTokens : design.tokens;
+function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, dangerouslyOverrideTokens, }) {
+    const { finalTokens, cssVariableOverrides } = useTokens(dangerouslyOverrideTheme, dangerouslyOverrideTokens);
     return (React.createElement(AtlantisThemeContext.Provider, { value: {
             theme: dangerouslyOverrideTheme,
-            tokens: currentTokens,
+            tokens: finalTokens,
+            overrideTokens: dangerouslyOverrideTokens,
         } },
-        React.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper }, children)));
+        React.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper, style: cssVariableOverrides }, children)));
 }
 function useAtlantisTheme() {
     return React.useContext(AtlantisThemeContext);
 }
+function getCssVariableOverrides(overrideTokens) {
+    const cssVariables = Object.entries(overrideTokens).reduce((variables, [tokenName, tokenValue]) => {
+        // @ts-expect-error - css variables are valid keys for style objects. @types/react may be outdated.
+        variables[`--${tokenName}`] = tokenValue;
+        return variables;
+    }, {});
+    return cssVariables;
+}
+function useTokens(theme, overrideTokens) {
+    const currentTokens = theme === "dark" ? actualDarkTokens : design.tokens;
+    const finalTokens = React.useMemo(() => {
+        if (overrideTokens) {
+            return merge$1({}, currentTokens, overrideTokens);
+        }
+        return currentTokens;
+    }, [currentTokens, overrideTokens]);
+    const cssVariableOverrides = overrideTokens
+        ? getCssVariableOverrides(overrideTokens)
+        : undefined;
+    return {
+        finalTokens,
+        cssVariableOverrides,
+    };
+}
 
 exports.AtlantisThemeContextProvider = AtlantisThemeContextProvider;
 exports.THEME_CHANGE_EVENT = THEME_CHANGE_EVENT;

package/dist/AtlantisThemeContext-es.js

@@ -1,5 +1,5 @@
 import { tokens, darkTokens } from '@jobber/design';
-import React__default, { createContext, useState, useCallback, useEffect, useContext } from 'react';
+import React__default, { createContext, useState, useCallback, useEffect, useContext, useMemo } from 'react';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-es.js';
 import { e as eq_1, c as _Stack } from './identity-es.js';
 import { _ as _baseAssignValue } from './_baseAssignValue-es.js';
@@ -340,7 +340,7 @@ var merge$1 = /*@__PURE__*/getDefaultExportFromCjs(merge_1);
 
 const THEME_CHANGE_EVENT = "atlantis.toggle-theme";
 
-var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","spinning":"iq03qkKnXBA-"};
+var styles = {"staticThemeProviderWrapper":"P6HrDSaI0Ac-","overrideTokensWrapper":"j-NMCOBL3-E-","spinning":"iq03qkKnXBA-"};
 
 const atlantisThemeContextDefaultValues = {
     theme: "light",
@@ -348,17 +348,17 @@ const atlantisThemeContextDefaultValues = {
 };
 const actualDarkTokens = merge$1({}, tokens, darkTokens);
 const AtlantisThemeContext = createContext(atlantisThemeContextDefaultValues);
-function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, }) {
+function AtlantisThemeContextProvider({ children, dangerouslyOverrideTheme, dangerouslyOverrideTokens, }) {
     if (dangerouslyOverrideTheme) {
-        return (React__default.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
+        return (React__default.createElement(InternalStaticThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens, dangerouslyOverrideTheme: dangerouslyOverrideTheme }, children));
     }
-    return (React__default.createElement(InternalDynamicThemeProvider, null, children));
+    return (React__default.createElement(InternalDynamicThemeProvider, { dangerouslyOverrideTokens: dangerouslyOverrideTokens }, children));
 }
-function InternalDynamicThemeProvider({ children }) {
+function InternalDynamicThemeProvider({ children, dangerouslyOverrideTokens, }) {
     var _a;
     const initialTheme = (_a = globalThis.document.documentElement.dataset.theme) !== null && _a !== void 0 ? _a : "light";
     const [internalTheme, setInternalTheme] = useState(initialTheme);
-    const currentTokens = internalTheme === "dark" ? actualDarkTokens : tokens;
+    const { finalTokens, cssVariableOverrides } = useTokens(internalTheme, dangerouslyOverrideTokens);
     const handleThemeChangeEvent = useCallback((event) => {
         const newTheme = event.detail.theme;
         setInternalTheme(newTheme);
@@ -373,19 +373,45 @@ function InternalDynamicThemeProvider({ children }) {
     }, [handleThemeChangeEvent]);
     return (React__default.createElement(AtlantisThemeContext.Provider, { value: {
             theme: internalTheme,
-            tokens: currentTokens,
-        } }, children));
+            tokens: finalTokens,
+            overrideTokens: dangerouslyOverrideTokens,
+        } }, cssVariableOverrides ? (React__default.createElement("div", { className: styles.overrideTokensWrapper, style: cssVariableOverrides }, children)) : (children)));
 }
-function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, }) {
-    const currentTokens = dangerouslyOverrideTheme === "dark" ? actualDarkTokens : tokens;
+function InternalStaticThemeProvider({ dangerouslyOverrideTheme, children, dangerouslyOverrideTokens, }) {
+    const { finalTokens, cssVariableOverrides } = useTokens(dangerouslyOverrideTheme, dangerouslyOverrideTokens);
     return (React__default.createElement(AtlantisThemeContext.Provider, { value: {
             theme: dangerouslyOverrideTheme,
-            tokens: currentTokens,
+            tokens: finalTokens,
+            overrideTokens: dangerouslyOverrideTokens,
         } },
-        React__default.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper }, children)));
+        React__default.createElement("div", { "data-theme": dangerouslyOverrideTheme, className: styles.staticThemeProviderWrapper, style: cssVariableOverrides }, children)));
 }
 function useAtlantisTheme() {
     return useContext(AtlantisThemeContext);
 }
+function getCssVariableOverrides(overrideTokens) {
+    const cssVariables = Object.entries(overrideTokens).reduce((variables, [tokenName, tokenValue]) => {
+        // @ts-expect-error - css variables are valid keys for style objects. @types/react may be outdated.
+        variables[`--${tokenName}`] = tokenValue;
+        return variables;
+    }, {});
+    return cssVariables;
+}
+function useTokens(theme, overrideTokens) {
+    const currentTokens = theme === "dark" ? actualDarkTokens : tokens;
+    const finalTokens = useMemo(() => {
+        if (overrideTokens) {
+            return merge$1({}, currentTokens, overrideTokens);
+        }
+        return currentTokens;
+    }, [currentTokens, overrideTokens]);
+    const cssVariableOverrides = overrideTokens
+        ? getCssVariableOverrides(overrideTokens)
+        : undefined;
+    return {
+        finalTokens,
+        cssVariableOverrides,
+    };
+}
 
 export { AtlantisThemeContextProvider as A, THEME_CHANGE_EVENT as T, atlantisThemeContextDefaultValues as a, useAtlantisTheme as u };

package/dist/Combobox/Combobox.types.d.ts

@@ -109,8 +109,10 @@ export interface ComboboxOptionProps {
      * Advanced: A custom render prop to completely control how this option is rendered.
      * The function receives the option's props, and a boolean indicating if the option is selected.
      */
-    readonly customRender?: (option: Omit<ComboboxOptionProps, "customRender"> & {
+    readonly customRender?: (option: Pick<ComboboxOptionProps, "id" | "label" | "prefix"> & {
         isSelected: boolean;
+        /** Render the default option content. */
+        defaultContent: ReactElement;
     }) => React.ReactNode;
     /**
      * Callback function invoked when the option is clicked.

package/dist/ComboboxOption-cjs.js

@@ -18,7 +18,7 @@ function ComboboxOption(props) {
         selectionHandler === null || selectionHandler === void 0 ? void 0 : selectionHandler({ id, label });
         onClick === null || onClick === void 0 ? void 0 : onClick({ id, label });
     };
-    return (React.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: handleClick, className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected }))) : (React.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
+    return (React.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: handleClick, className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected, defaultContent: (React.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected }))) }))) : (React.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
 }
 function InternalDefaultContent(props) {
     return (React.createElement(React.Fragment, null,

package/dist/ComboboxOption-es.js

@@ -16,7 +16,7 @@ function ComboboxOption(props) {
         selectionHandler === null || selectionHandler === void 0 ? void 0 : selectionHandler({ id, label });
         onClick === null || onClick === void 0 ? void 0 : onClick({ id, label });
     };
-    return (React__default.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: handleClick, className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected }))) : (React__default.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
+    return (React__default.createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: handleClick, className: classnames(styles.option) }, customRender ? (customRender(Object.assign(Object.assign({}, contentProps), { isSelected, defaultContent: (React__default.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected }))) }))) : (React__default.createElement(InternalDefaultContent, Object.assign({}, contentProps, { isSelected: isSelected })))));
 }
 function InternalDefaultContent(props) {
     return (React__default.createElement(React__default.Fragment, null,

package/dist/styles.css

@@ -2,6 +2,10 @@
   display: contents;
 }
 
+.j-NMCOBL3-E- {
+  display: contents;
+}
+
 ._37kZB-nYE08- {
   display: -ms-flexbox;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.86.5",
+  "version": "6.88.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -543,5 +543,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "69bf4a19f39dc779173c705accb66f3514f80604"
+  "gitHead": "b315d894eb1d6f8ea122c880c0338234c860404a"
 }