@jobber/components 6.85.2 → 6.85.3-CLEANUPre-6d043f4.28

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/index.d.ts

@@ -1,3 +1,3 @@
 export { AtlantisThemeContextProvider, atlantisThemeContextDefaultValues, useAtlantisTheme, } from "./AtlantisThemeContext";
-export { THEME_CHANGE_EVENT, type AtlantisThemeContextProviderProps, type AtlantisThemeContextValue, type Theme, type ThemeChangeDetails, } from "./types";
+export { THEME_CHANGE_EVENT, type AtlantisThemeContextProviderProps, type AtlantisThemeContextValue, type Theme, type OverrideTokens, type ThemeChangeDetails, } from "./types";
 export { updateTheme } from "./updateTheme";

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,12 +1,12 @@
 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';
 import { _ as _baseFor } from './_baseFor-es.js';
 import { _ as _copyObject, k as keysIn_1, a as _cloneBufferExports, b as _cloneTypedArray, c as _copyArray, d as _initCloneObject, i as isPlainObject_1 } from './keysIn-es.js';
 import { b as isArrayLike_1, i as isArguments_1, a as isArray_1, c as isBufferExports, j as isFunction_1, d as isTypedArray_1 } from './isTypedArray-es.js';
-import { a as isObjectLike_1, i as isObject_1 } from './isObjectLike-es.js';
+import { i as isObjectLike_1, a as isObject_1 } from './isObjectLike-es.js';
 import { _ as _baseRest, a as _isIterateeCall } from './_isIterateeCall-es.js';
 
 var baseAssignValue = _baseAssignValue,
@@ -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/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,7 @@
 import type { Ref, RefAttributes } from "react";
 import React from "react";
-import { type AnyOption, type AutocompleteProps, type Option } from "./Autocomplete.types";
+import { type AnyOption, type AutocompleteLegacyProps, type Option } from "./Autocomplete.types";
 import type { InputTextRef } from "../InputText";
-declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu, ...inputProps }: AutocompleteProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<InputTextRef>): React.JSX.Element;
-export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<InputTextRef>) => ReturnType<typeof AutocompleteInternal>;
+declare function AutocompleteInternal<GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>({ initialOptions, value, allowFreeForm, size, debounce: debounceRate, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu, ...inputProps }: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue>, ref: Ref<InputTextRef>): React.JSX.Element;
+export declare const Autocomplete: <GenericOption extends AnyOption = AnyOption, GenericOptionValue extends Option = Option, GenericGetOptionsValue extends AnyOption = AnyOption>(props: AutocompleteLegacyProps<GenericOption, GenericOptionValue, GenericGetOptionsValue> & RefAttributes<InputTextRef>) => ReturnType<typeof AutocompleteInternal>;
 export {};

package/dist/Autocomplete/Autocomplete.rebuilt.d.ts

@@ -0,0 +1,8 @@
+import type { Ref } from "react";
+import React from "react";
+import type { AutocompleteRebuiltProps, OptionLike } from "./Autocomplete.types";
+export declare const AutocompleteRebuilt: <Value extends OptionLike = OptionLike, Multiple extends boolean = false>(props: AutocompleteRebuiltProps<Value, Multiple> & {
+    ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+}) => ReturnType<typeof AutocompleteRebuiltInternal>;
+declare function AutocompleteRebuiltInternal<Value extends OptionLike, Multiple extends boolean = false>(props: AutocompleteRebuiltProps<Value, Multiple>, forwardedRef: Ref<HTMLInputElement | HTMLTextAreaElement>): React.JSX.Element;
+export {};