@focus4/styling 11.19.1 → 11.21.0-beta.0

package/lib/focus4.styling.d.ts

@@ -1,4 +1,5 @@
 import "./variables";
 import "./global.css";
-export { PanelDescriptor, ScrollableContext, ScrollspyContext, colorScheme, getDefaultTransition, initColorScheme, getSpringTransition } from "./utils";
-export { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, FocusCSSContext, ThemeContext, ThemeProvider, ThemeProviderProps, ToBem, fromBem, themr, toBem, useTheme } from "./theme";
+export { ThemeContext, ThemeProvider, fromBem, toBem, useTheme } from "./theme";
+export { colorScheme, getDefaultTransition, initColorScheme, getSpringTransition } from "./utils";
+export type { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, FocusCSSContext, ThemeProviderProps, ToBem } from "./theme";

package/lib/focus4.styling.js

@@ -1,83 +1,9 @@
 import { createContext, useContext, useMemo } from 'react';
-import { observable, autorun } from 'mobx';
 import { jsx } from 'react/jsx-runtime';
 import { themeable } from '@focus4/core';
 import classNames from 'classnames';
-import { pick, upperFirst } from 'lodash';
-import { useObserver } from 'mobx-react';
-
-function get() {
-    const { animationDelay, animationDuration, animationTimingFunction } = window.getComputedStyle(document.body);
-    const delay = toMs(animationDelay);
-    const duration = toMs(animationDuration);
-    const ease = animationTimingFunction.startsWith("cubic-bezier")
-        ? animationTimingFunction.substring(13).split(",").map(parseFloat)
-        : undefined;
-    return { delay, duration, ease };
-}
-function getDefaultTransition() {
-    const { delay, duration, ease } = get();
-    return {
-        delay: delay / 1000,
-        duration: duration / 1000,
-        ease
-    };
-}
-function getSpringTransition() {
-    return {
-        type: "spring",
-        bounce: 0,
-        duration: get().duration / 1000
-    };
-}
-function toMs(d) {
-    if (d.endsWith("ms")) {
-        return +d.substring(0, d.length - 2);
-    }
-    else {
-        return +d.substring(0, d.length - 1) * 1000;
-    }
-}
-
-const colorScheme = observable({ dark: false });
-/**
- * Permet d'initialiser l'utilisation du mode sombre dans une application Focus. Par défaut, il est initialisé avec le thème du navigateur de
- * l'utilisateur.
- * @param disableAutoDarkMode Désactive la prise en compte du thème de l'utilisateur et initialise toujours en thème clair.
- */
-function initColorScheme(disableAutoDarkMode = false) {
-    const ls = localStorage.getItem("color-scheme");
-    if (ls === "dark" || (!ls && !disableAutoDarkMode && window.matchMedia?.("(prefers-color-scheme: dark)").matches)) {
-        colorScheme.dark = true;
-    }
-    localStorage.setItem("color-scheme", colorScheme.dark ? "dark" : "light");
-    autorun(() => {
-        const darkModeAttribute = document.documentElement.hasAttribute("dark");
-        if (colorScheme.dark && !darkModeAttribute) {
-            document.documentElement.setAttribute("dark", "true");
-            localStorage.setItem("color-scheme", "dark");
-        }
-        else if (!colorScheme.dark && darkModeAttribute) {
-            document.documentElement.removeAttribute("dark");
-            localStorage.setItem("color-scheme", "light");
-        }
-    });
-}
-
-/** Contexte d'un Scrollable, expose les méthodes associées. */
-const ScrollableContext = createContext({});
-/** Contexte d'un ScrollspyContainer, expose les méthodes associées. */
-const ScrollspyContext = createContext({
-    /**
-     * Enregistre un panel dans le Scrollspu
-     * @param name L'id du panel souhaité.
-     * @param panel La description d'un panel
-     */
-    registerPanel(name, panel) {
-        return () => {
-        };
-    }
-});
+import { pick } from 'lodash';
+import { observable, autorun } from 'mobx';
 
 const ThemeContext = createContext({});
 
@@ -192,19 +118,63 @@ function useTheme(name, ...themes) {
     return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x))));
 }
 
+function get() {
+    const { animationDelay, animationDuration, animationTimingFunction } = window.getComputedStyle(document.body);
+    const delay = toMs(animationDelay);
+    const duration = toMs(animationDuration);
+    const ease = animationTimingFunction.startsWith("cubic-bezier")
+        ? animationTimingFunction.substring(13).split(",").map(parseFloat)
+        : undefined;
+    return { delay, duration, ease };
+}
+function getDefaultTransition() {
+    const { delay, duration, ease } = get();
+    return {
+        delay: delay / 1000,
+        duration: duration / 1000,
+        ease
+    };
+}
+function getSpringTransition() {
+    return {
+        type: "spring",
+        bounce: 0,
+        duration: get().duration / 1000
+    };
+}
+function toMs(d) {
+    if (d.endsWith("ms")) {
+        return +d.substring(0, d.length - 2);
+    }
+    else {
+        return +d.substring(0, d.length - 1) * 1000;
+    }
+}
+
+const colorScheme = observable({ dark: false });
 /**
- * Permet de créer un composant wrapper pour utiliser `useTheme` dans le `render()` d'un composant classe.
- * @param name Le nom de la clé de theme.
- * @param localTheme Le theme local, fourni par le composant.
+ * Permet d'initialiser l'utilisation du mode sombre dans une application Focus. Par défaut, il est initialisé avec le thème du navigateur de
+ * l'utilisateur.
+ * @param disableAutoDarkMode Désactive la prise en compte du thème de l'utilisateur et initialise toujours en thème clair.
  */
-function themr(name, localTheme) {
-    function TC({ children, theme }) {
-        const finalTheme = useTheme(name, localTheme, theme);
-        return useObserver(() => children(finalTheme));
+function initColorScheme(disableAutoDarkMode = false) {
+    const ls = localStorage.getItem("color-scheme");
+    if (ls === "dark" || (!ls && !disableAutoDarkMode && window.matchMedia?.("(prefers-color-scheme: dark)").matches)) {
+        colorScheme.dark = true;
     }
-    TC.displayName = `${upperFirst(name)}ThemeConsumer`;
-    return TC;
+    localStorage.setItem("color-scheme", colorScheme.dark ? "dark" : "light");
+    autorun(() => {
+        const darkModeAttribute = document.documentElement.hasAttribute("dark");
+        if (colorScheme.dark && !darkModeAttribute) {
+            document.documentElement.setAttribute("dark", "true");
+            localStorage.setItem("color-scheme", "dark");
+        }
+        else if (!colorScheme.dark && darkModeAttribute) {
+            document.documentElement.removeAttribute("dark");
+            localStorage.setItem("color-scheme", "light");
+        }
+    });
 }
 
-export { ScrollableContext, ScrollspyContext, ThemeContext, ThemeProvider, colorScheme, fromBem, getDefaultTransition, getSpringTransition, initColorScheme, themr, toBem, useTheme };
+export { ThemeContext, ThemeProvider, colorScheme, fromBem, getDefaultTransition, getSpringTransition, initColorScheme, toBem, useTheme };
 //# sourceMappingURL=focus4.styling.js.map

package/lib/focus4.styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus4.styling.js","sources":["../src/utils/animation.ts","../src/utils/color-scheme.ts","../src/utils/scroll-contexts.ts","../src/theme/common.ts","../src/theme/to-bem.ts","../src/theme/theme-provider.tsx","../src/theme/use-theme.ts","../src/theme/themr.tsx"],"sourcesContent":["function get() {\r\n    const {animationDelay, animationDuration, animationTimingFunction} = window.getComputedStyle(document.body);\r\n\r\n    const delay = toMs(animationDelay);\r\n    const duration = toMs(animationDuration);\r\n    const ease = animationTimingFunction.startsWith(\"cubic-bezier\")\r\n        ? animationTimingFunction.substring(13).split(\",\").map(parseFloat)\r\n        : undefined;\r\n\r\n    return {delay, duration, ease};\r\n}\r\n\r\nexport function getDefaultTransition() {\r\n    const {delay, duration, ease} = get();\r\n    return {\r\n        delay: delay / 1000,\r\n        duration: duration / 1000,\r\n        ease\r\n    } as const;\r\n}\r\n\r\nexport function getSpringTransition() {\r\n    return {\r\n        type: \"spring\",\r\n        bounce: 0,\r\n        duration: get().duration / 1000\r\n    } as const;\r\n}\r\n\r\nfunction toMs(d: string) {\r\n    if (d.endsWith(\"ms\")) {\r\n        return +d.substring(0, d.length - 2);\r\n    } else {\r\n        return +d.substring(0, d.length - 1) * 1000;\r\n    }\r\n}\r\n","import {autorun, observable} from \"mobx\";\r\n\r\nexport const colorScheme = observable({dark: false});\r\n\r\n/**\r\n * Permet d'initialiser l'utilisation du mode sombre dans une application Focus. Par défaut, il est initialisé avec le thème du navigateur de\r\n * l'utilisateur.\r\n * @param disableAutoDarkMode Désactive la prise en compte du thème de l'utilisateur et initialise toujours en thème clair.\r\n */\r\nexport function initColorScheme(disableAutoDarkMode = false) {\r\n    const ls = localStorage.getItem(\"color-scheme\");\r\n    if (ls === \"dark\" || (!ls && !disableAutoDarkMode && window.matchMedia?.(\"(prefers-color-scheme: dark)\").matches)) {\r\n        colorScheme.dark = true;\r\n    }\r\n    localStorage.setItem(\"color-scheme\", colorScheme.dark ? \"dark\" : \"light\");\r\n\r\n    autorun(() => {\r\n        const darkModeAttribute = document.documentElement.hasAttribute(\"dark\");\r\n        if (colorScheme.dark && !darkModeAttribute) {\r\n            document.documentElement.setAttribute(\"dark\", \"true\");\r\n            localStorage.setItem(\"color-scheme\", \"dark\");\r\n        } else if (!colorScheme.dark && darkModeAttribute) {\r\n            document.documentElement.removeAttribute(\"dark\");\r\n            localStorage.setItem(\"color-scheme\", \"light\");\r\n        }\r\n    });\r\n}\r\n","import {createContext, HTMLProps, ReactElement, ReactPortal} from \"react\";\r\n\r\nexport interface PanelDescriptor {\r\n    node: HTMLDivElement;\r\n    title?: string;\r\n}\r\n\r\n/** Contexte d'un Scrollable, expose les méthodes associées. */\r\nexport const ScrollableContext = createContext<{\r\n    /**\r\n     * Retourne la status du header.\r\n     * @returns La taille du header et s'il est sticky ou non.\r\n     */\r\n    getHeaderStatus(): {sticky: boolean; height: number};\r\n    /**\r\n     * Affiche un élement dans le menu sticky du Scrollable\r\n     * @param node Le noeud React.\r\n     * @param parentNode Noeud à suivre pour positionner l'élément sticky.\r\n     * @param retractable Menu rétractable.\r\n     * @returns Le Portal associé.\r\n     */\r\n    menu(node: ReactElement, parentNode: HTMLElement | null, retractable: boolean): ReactPortal | null;\r\n    /**\r\n     * Affiche un élement dans le Scrollable.\r\n     * @param node Le noeud React.\r\n     * @returns Le Portal associé.\r\n     */\r\n    portal(node: ReactElement): ReactPortal;\r\n    /**\r\n     * Enregistre le header dans le Scrollable\r\n     * @param nonStickyElement Le noeud DOM représentant le header non sticky.\r\n     * @param canDeploy Précise si le header est toujours sticky ou non.\r\n     * @returns Le disposer.\r\n     */\r\n    registerHeader(nonStickyElement: HTMLElement, canDeploy: boolean): () => void;\r\n    /**\r\n     * Set les props du header du Scrollable.\r\n     * @param headerProps Les props du header.\r\n     * @returns Le disposer.\r\n     */\r\n    registerHeaderProps(headerProps: HTMLProps<HTMLElement>): void;\r\n    /**\r\n     * Enregistre un observateur d'intersection avec le viewport du Scrollable.\r\n     * @param node Le noeud DOM à observer.\r\n     * @param onIntersect Le callback à appeler lors d'une intersection.\r\n     * @returns Le disposer.\r\n     */\r\n    registerIntersect(node: HTMLElement, onIntersect: (ratio: number, isIntersecting: boolean) => void): () => void;\r\n    /**\r\n     * Scrolle vers la position demandée.\r\n     * @param options Options.\r\n     */\r\n    scrollTo(options?: ScrollToOptions): void;\r\n}>({} as any);\r\n\r\n/** Contexte d'un ScrollspyContainer, expose les méthodes associées. */\r\nexport const ScrollspyContext = createContext({\r\n    /**\r\n     * Enregistre un panel dans le Scrollspu\r\n     * @param name L'id du panel souhaité.\r\n     * @param panel La description d'un panel\r\n     */\r\n    registerPanel(name: string, panel: PanelDescriptor): (() => void) | undefined {\r\n        return () => {\r\n            // eslint-disable-next-line @typescript-eslint/no-unused-expressions\r\n            name;\r\n            // eslint-disable-next-line @typescript-eslint/no-unused-expressions\r\n            panel;\r\n        };\r\n    }\r\n});\r\n","import {createContext} from \"react\";\r\n\r\nexport type CSSElement<T> = T & string & {_element: void};\r\nexport type CSSMod<N extends string, T> = N & T & string & {_mod: void};\r\nexport type CSSToStrings<T> = {[P in keyof T]?: string};\r\n\r\nexport type Mods<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never}[keyof CSS];\r\nexport type ModNames<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never}[keyof CSS];\r\nexport type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {\r\n    [_ in ModNames<CSS, E> | P]: string;\r\n}) &\r\n    (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {[_ in Mods<CSS, E>]?: boolean}) => string);\r\n\r\nexport interface CSSContext {\r\n    [key: string]: {};\r\n}\r\n\r\nexport const ThemeContext = createContext<CSSContext>({});\r\n","import classNames from \"classnames\";\r\nimport {pick} from \"lodash\";\r\n\r\nimport {BemFunction, CSSElement, CSSMod, CSSToStrings} from \"./common\";\r\n\r\nexport type AllMods<CSS> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never}[keyof CSS];\r\nexport type ToBem<CSS> = Omit<\r\n    {\r\n        [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E>\r\n            ? BemFunction<CSS, P, E>\r\n            : CSS[P] extends CSSMod<infer __, infer ___>\r\n            ? never\r\n            : BemFunction<CSS, P, string>;\r\n    },\r\n    AllMods<CSS>\r\n>;\r\n\r\nexport type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;\r\n\r\n/**\r\n * `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM\r\n * en un objet contenant une fonction par \"élément\" à laquelle on peut appliquer ses \"modificateurs\".\r\n *\r\n * Par exemple, un objet contenant les classes\r\n * ```ts\r\n * [\"panel\", \"panel--editing\", \"panel--loading\", \"title\", \"title--top\", \"title--bottom\"]\r\n * ```\r\n * sera transformé en un objet avec 2 fonctions `panel` et `title` :\r\n * ```ts\r\n * {\r\n *     panel({editing?: boolean; loading?: boolean}) => string;\r\n *     title({top?: boolean; bottom?: boolean}) => string;\r\n * }\r\n * ```\r\n * Un appel à une fonction retournera la classe CSS de l'\"élément\", à laquelle seront ajoutées ou non les classes des différents \"modificateurs\",\r\n * selon les valeurs des différents booléens.\r\n *\r\n * Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.\r\n * Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.\r\n *\r\n * _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._\r\n *\r\n * _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._\r\n */\r\nexport function toBem<CSS>(css: CSS): ToBem<CSS> {\r\n    const data: {[key: string]: string[]} = {};\r\n    for (const key in css) {\r\n        const [element, modifier] = key.split(\"--\");\r\n        if (data[element] && modifier) {\r\n            data[element].push(modifier);\r\n        } else if (!data[element]) {\r\n            data[element] = modifier ? [modifier] : [];\r\n        }\r\n    }\r\n\r\n    return Object.keys(data).reduce(\r\n        (bem, key) => ({\r\n            ...bem,\r\n            [key]: (mods: true | {[key: string]: boolean} = {}) => {\r\n                if (mods !== true) {\r\n                    return classNames(\r\n                        (css as any)[key],\r\n                        ...data[key].filter(mod => mods[mod]).map(mod => (css as any)[`${key}--${mod}`])\r\n                    );\r\n                } else {\r\n                    return pick(css, key, ...data[key].map(mod => `${key}--${mod}`));\r\n                }\r\n            }\r\n        }),\r\n        {}\r\n    ) as ToBem<CSS>;\r\n}\r\n\r\n/**\r\n * `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet\r\n * qui contient toutes les classes CSS qui le compose.\r\n */\r\nexport function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T> {\r\n    const res: CSSToStrings<T> = {};\r\n\r\n    for (const key in css as any) {\r\n        const value = (css as any)[key];\r\n        if (value) {\r\n            if (typeof value === \"string\") {\r\n                (res as any)[key] = value;\r\n            } else {\r\n                Object.assign(res, value(true));\r\n            }\r\n        }\r\n    }\r\n\r\n    return res;\r\n}\r\n","import {ReactNode, useContext, useMemo} from \"react\";\r\n\r\nimport {themeable} from \"@focus4/core\";\r\n\r\nimport {CSSContext, ThemeContext} from \"./common\";\r\nimport {fromBem} from \"./to-bem\";\r\n\r\n/** Contient l'ensemble des classes CSS surchargeables (elles le sont toutes), regroupées par composant. */\r\nexport interface FocusCSSContext extends CSSContext {\r\n    // Collections\r\n    actionBar: {};\r\n    advancedSearch: {};\r\n    contextualActions: {};\r\n    facet: {};\r\n    facetBox: {};\r\n    group: {};\r\n    list: {};\r\n    listBase: {};\r\n    searchBar: {};\r\n    summary: {};\r\n    table: {};\r\n    timeline: {};\r\n\r\n    // Forms\r\n    booleanRadio: {};\r\n    display: {};\r\n    field: {};\r\n    form: {};\r\n    inputDate: {};\r\n    label: {};\r\n    panel: {};\r\n    select: {};\r\n    selectCheckbox: {};\r\n    selectChips: {};\r\n    selectRadio: {};\r\n\r\n    // Layout\r\n    buttonBTT: {};\r\n    dialog: {};\r\n    header: {};\r\n    layout: {};\r\n    mainMenu: {};\r\n    overlay: {};\r\n    popin: {};\r\n    scrollable: {};\r\n    scrollspy: {};\r\n\r\n    // Toolbox\r\n    autocomplete: {};\r\n    button: {};\r\n    calendar: {};\r\n    checkbox: {};\r\n    chip: {};\r\n    dropdown: {};\r\n    floatingActionButton: {};\r\n    iconButton: {};\r\n    menu: {};\r\n    progressIndicator: {};\r\n    radio: {};\r\n    ripple: {};\r\n    slider: {};\r\n    snackbar: {};\r\n    switch: {};\r\n    textField: {};\r\n    tabs: {};\r\n    tooltip: {};\r\n}\r\n\r\n/** Props du ThemeProvider. */\r\nexport interface ThemeProviderProps {\r\n    /** Objet faisant correspondre à un identifiant de composant son objet de classes CSS associé.  */\r\n    appTheme: Partial<FocusCSSContext>;\r\n    /** Enfants. */\r\n    children: ReactNode;\r\n}\r\n\r\n/**\r\n * Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés\r\n * à l'intérieur (via un context React).\r\n *\r\n * Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,\r\n * y compris sur les mêmes composants.\r\n */\r\nexport function ThemeProvider({appTheme, children}: ThemeProviderProps) {\r\n    const context = useContext(ThemeContext);\r\n\r\n    const mergedContext = useMemo(() => {\r\n        const mc = {} as CSSContext;\r\n\r\n        for (const key in context) {\r\n            if (key in appTheme && appTheme[key]) {\r\n                mc[key] = themeable(fromBem(context[key]), fromBem(appTheme[key]));\r\n            } else {\r\n                mc[key] = context[key];\r\n            }\r\n        }\r\n\r\n        for (const key in appTheme) {\r\n            if (!(key in context) && appTheme[key]) {\r\n                mc[key] = appTheme[key]!;\r\n            }\r\n        }\r\n        return mc;\r\n    }, [appTheme, context]);\r\n\r\n    return <ThemeContext.Provider value={mergedContext}>{children}</ThemeContext.Provider>;\r\n}\r\n","import {useContext} from \"react\";\r\n\r\nimport {themeable} from \"@focus4/core\";\r\n\r\nimport {CSSToStrings, ThemeContext} from \"./common\";\r\nimport {fromBem, toBem, ToBem} from \"./to-bem\";\r\n\r\n/**\r\n * `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS\r\n * passées en paramètre.\r\n *\r\n * `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.\r\n *\r\n * @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`\r\n * @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.\r\n */\r\nexport function useTheme<T>(\r\n    name: string,\r\n    ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]\r\n): ToBem<T> {\r\n    const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};\r\n    return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x!))) as T);\r\n}\r\n","import {upperFirst} from \"lodash\";\r\nimport {useObserver} from \"mobx-react\";\r\nimport {FunctionComponent, ReactElement} from \"react\";\r\n\r\nimport {CSSToStrings} from \"./common\";\r\nimport {ToBem} from \"./to-bem\";\r\nimport {useTheme} from \"./use-theme\";\r\n\r\nexport interface ThemeConsumerProps<T> {\r\n    children: (theme: ToBem<T>) => ReactElement;\r\n    theme?: CSSToStrings<T> | Partial<ToBem<T>> | T;\r\n}\r\n\r\n/**\r\n * Permet de créer un composant wrapper pour utiliser `useTheme` dans le `render()` d'un composant classe.\r\n * @param name Le nom de la clé de theme.\r\n * @param localTheme Le theme local, fourni par le composant.\r\n */\r\nexport function themr<T>(name: string, localTheme?: T): FunctionComponent<ThemeConsumerProps<T>> {\r\n    function TC({children, theme}: ThemeConsumerProps<T>) {\r\n        const finalTheme = useTheme(name, localTheme, theme);\r\n        return useObserver(() => children(finalTheme));\r\n    }\r\n\r\n    TC.displayName = `${upperFirst(name)}ThemeConsumer`;\r\n\r\n    return TC;\r\n}\r\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"focus4.styling.js","sources":["../src/theme/common.ts","../src/theme/to-bem.ts","../src/theme/theme-provider.tsx","../src/theme/use-theme.ts","../src/utils/animation.ts","../src/utils/color-scheme.ts"],"sourcesContent":["import {createContext} from \"react\";\r\n\r\nexport type CSSElement<T> = T & string & {_element: void};\r\nexport type CSSMod<N extends string, T> = N & T & string & {_mod: void};\r\nexport type CSSToStrings<T> = {[P in keyof T]?: string};\r\n\r\nexport type Mods<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never}[keyof CSS];\r\nexport type ModNames<CSS, E> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never}[keyof CSS];\r\nexport type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {\r\n    [_ in ModNames<CSS, E> | P]: string;\r\n}) &\r\n    (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {[_ in Mods<CSS, E>]?: boolean}) => string);\r\n\r\nexport interface CSSContext {\r\n    [key: string]: {};\r\n}\r\n\r\nexport const ThemeContext = createContext<CSSContext>({});\r\n","import classNames from \"classnames\";\r\nimport {pick} from \"lodash\";\r\n\r\nimport {BemFunction, CSSElement, CSSMod, CSSToStrings} from \"./common\";\r\n\r\nexport type AllMods<CSS> = {[P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never}[keyof CSS];\r\nexport type ToBem<CSS> = Omit<\r\n    {\r\n        [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E>\r\n            ? BemFunction<CSS, P, E>\r\n            : CSS[P] extends CSSMod<infer __, infer ___>\r\n            ? never\r\n            : BemFunction<CSS, P, string>;\r\n    },\r\n    AllMods<CSS>\r\n>;\r\n\r\nexport type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;\r\n\r\n/**\r\n * `toBem` permet de transformer un objet de classes CSS, tel que celui importé d'un module CSS, dont les noms respectent la convention BEM\r\n * en un objet contenant une fonction par \"élément\" à laquelle on peut appliquer ses \"modificateurs\".\r\n *\r\n * Par exemple, un objet contenant les classes\r\n * ```ts\r\n * [\"panel\", \"panel--editing\", \"panel--loading\", \"title\", \"title--top\", \"title--bottom\"]\r\n * ```\r\n * sera transformé en un objet avec 2 fonctions `panel` et `title` :\r\n * ```ts\r\n * {\r\n *     panel({editing?: boolean; loading?: boolean}) => string;\r\n *     title({top?: boolean; bottom?: boolean}) => string;\r\n * }\r\n * ```\r\n * Un appel à une fonction retournera la classe CSS de l'\"élément\", à laquelle seront ajoutées ou non les classes des différents \"modificateurs\",\r\n * selon les valeurs des différents booléens.\r\n *\r\n * Vous pouvez utiliser `toBem` pour éviter d'avoir à concaténer des classes CSS à la main et pour rendre vos composants et votre CSS plus propres.\r\n * Son usage est bien évidemment totalement facultatif et à utiliser si cela vous arrange.\r\n *\r\n * _Remarque 1 : Les modules CSS importés doivent avoir des définitions Typescript générés par la commande `focus4 cssgen` du module `@focus4/tooling`._\r\n *\r\n * _Remarque 2 : Les propriétés `theme` des différents composants Focus acceptent aussi bien un objet CSS classique ou un objet créé par `toBem`._\r\n */\r\nexport function toBem<CSS>(css: CSS): ToBem<CSS> {\r\n    const data: {[key: string]: string[]} = {};\r\n    for (const key in css) {\r\n        const [element, modifier] = key.split(\"--\");\r\n        if (data[element] && modifier) {\r\n            data[element].push(modifier);\r\n        } else if (!data[element]) {\r\n            data[element] = modifier ? [modifier] : [];\r\n        }\r\n    }\r\n\r\n    return Object.keys(data).reduce(\r\n        (bem, key) => ({\r\n            ...bem,\r\n            [key]: (mods: true | {[key: string]: boolean} = {}) => {\r\n                if (mods !== true) {\r\n                    return classNames(\r\n                        (css as any)[key],\r\n                        ...data[key].filter(mod => mods[mod]).map(mod => (css as any)[`${key}--${mod}`])\r\n                    );\r\n                } else {\r\n                    return pick(css, key, ...data[key].map(mod => `${key}--${mod}`));\r\n                }\r\n            }\r\n        }),\r\n        {}\r\n    ) as ToBem<CSS>;\r\n}\r\n\r\n/**\r\n * `fromBem` permet de faire la transformation inverse de `toBem`, à savoir prendre l'objet résultant d'un appel à `toBem` et de ressortir un objet\r\n * qui contient toutes les classes CSS qui le compose.\r\n */\r\nexport function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T> {\r\n    const res: CSSToStrings<T> = {};\r\n\r\n    for (const key in css as any) {\r\n        const value = (css as any)[key];\r\n        if (value) {\r\n            if (typeof value === \"string\") {\r\n                (res as any)[key] = value;\r\n            } else {\r\n                Object.assign(res, value(true));\r\n            }\r\n        }\r\n    }\r\n\r\n    return res;\r\n}\r\n","import {ReactNode, useContext, useMemo} from \"react\";\r\n\r\nimport {themeable} from \"@focus4/core\";\r\n\r\nimport {CSSContext, ThemeContext} from \"./common\";\r\nimport {fromBem} from \"./to-bem\";\r\n\r\n/** Contient l'ensemble des classes CSS surchargeables (elles le sont toutes), regroupées par composant. */\r\nexport interface FocusCSSContext extends CSSContext {\r\n    // Collections\r\n    actionBar: {};\r\n    advancedSearch: {};\r\n    contextualActions: {};\r\n    facet: {};\r\n    facetBox: {};\r\n    group: {};\r\n    list: {};\r\n    listBase: {};\r\n    searchBar: {};\r\n    summary: {};\r\n    table: {};\r\n    timeline: {};\r\n\r\n    // Forms\r\n    booleanRadio: {};\r\n    display: {};\r\n    field: {};\r\n    form: {};\r\n    inputDate: {};\r\n    label: {};\r\n    select: {};\r\n    selectCheckbox: {};\r\n    selectChips: {};\r\n    selectRadio: {};\r\n\r\n    // Layout\r\n    dialog: {};\r\n    header: {};\r\n    lateralMenu: {};\r\n    layout: {};\r\n    mainMenu: {};\r\n    overlay: {};\r\n    panel: {};\r\n    popin: {};\r\n    scrollable: {};\r\n    scrollspy: {};\r\n\r\n    // Toolbox\r\n    autocomplete: {};\r\n    button: {};\r\n    calendar: {};\r\n    checkbox: {};\r\n    chip: {};\r\n    dropdown: {};\r\n    floatingActionButton: {};\r\n    iconButton: {};\r\n    menu: {};\r\n    progressIndicator: {};\r\n    radio: {};\r\n    ripple: {};\r\n    slider: {};\r\n    snackbar: {};\r\n    switch: {};\r\n    textField: {};\r\n    tabs: {};\r\n    tooltip: {};\r\n}\r\n\r\n/** Props du ThemeProvider. */\r\nexport interface ThemeProviderProps {\r\n    /** Objet faisant correspondre à un identifiant de composant son objet de classes CSS associé.  */\r\n    appTheme: Partial<FocusCSSContext>;\r\n    /** Enfants. */\r\n    children: ReactNode;\r\n}\r\n\r\n/**\r\n * Le `ThemeProvider` permet d'ajouter des classes CSS aux composants Focus (et autres composants utilisant `useTheme`) posés\r\n * à l'intérieur (via un context React).\r\n *\r\n * Les classes CSS ajoutées dans un `ThemeProvider` s'ajouteront aux éventuelles classes posées par un `ThemeProvider` parent,\r\n * y compris sur les mêmes composants.\r\n */\r\nexport function ThemeProvider({appTheme, children}: ThemeProviderProps) {\r\n    const context = useContext(ThemeContext);\r\n\r\n    const mergedContext = useMemo(() => {\r\n        const mc = {} as CSSContext;\r\n\r\n        for (const key in context) {\r\n            if (key in appTheme && appTheme[key]) {\r\n                mc[key] = themeable(fromBem(context[key]), fromBem(appTheme[key]));\r\n            } else {\r\n                mc[key] = context[key];\r\n            }\r\n        }\r\n\r\n        for (const key in appTheme) {\r\n            if (!(key in context) && appTheme[key]) {\r\n                mc[key] = appTheme[key]!;\r\n            }\r\n        }\r\n        return mc;\r\n    }, [appTheme, context]);\r\n\r\n    return <ThemeContext.Provider value={mergedContext}>{children}</ThemeContext.Provider>;\r\n}\r\n","import {useContext} from \"react\";\r\n\r\nimport {themeable} from \"@focus4/core\";\r\n\r\nimport {CSSToStrings, ThemeContext} from \"./common\";\r\nimport {fromBem, toBem, ToBem} from \"./to-bem\";\r\n\r\n/**\r\n * `useTheme` permet de récupérer les classes CSS passées dans un éventuel `ThemeProvider` parent et de les fusionner avec d'autres classes CSS\r\n * passées en paramètre.\r\n *\r\n * `useTheme` accepte aussi bien des objets de classes CSS classiques (importés d'un module CSS), que des objets créés avec `toBem`.\r\n *\r\n * @param name L'identifiant du composant dans le `appTheme` du `ThemeProvider`\r\n * @param themes Les objets de classes CSS à fusionner ensemble et avec celui du contexte.\r\n */\r\nexport function useTheme<T>(\r\n    name: string,\r\n    ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]\r\n): ToBem<T> {\r\n    const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};\r\n    return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x!))) as T);\r\n}\r\n","function get() {\r\n    const {animationDelay, animationDuration, animationTimingFunction} = window.getComputedStyle(document.body);\r\n\r\n    const delay = toMs(animationDelay);\r\n    const duration = toMs(animationDuration);\r\n    const ease = animationTimingFunction.startsWith(\"cubic-bezier\")\r\n        ? animationTimingFunction.substring(13).split(\",\").map(parseFloat)\r\n        : undefined;\r\n\r\n    return {delay, duration, ease};\r\n}\r\n\r\nexport function getDefaultTransition() {\r\n    const {delay, duration, ease} = get();\r\n    return {\r\n        delay: delay / 1000,\r\n        duration: duration / 1000,\r\n        ease\r\n    } as const;\r\n}\r\n\r\nexport function getSpringTransition() {\r\n    return {\r\n        type: \"spring\",\r\n        bounce: 0,\r\n        duration: get().duration / 1000\r\n    } as const;\r\n}\r\n\r\nfunction toMs(d: string) {\r\n    if (d.endsWith(\"ms\")) {\r\n        return +d.substring(0, d.length - 2);\r\n    } else {\r\n        return +d.substring(0, d.length - 1) * 1000;\r\n    }\r\n}\r\n","import {autorun, observable} from \"mobx\";\r\n\r\nexport const colorScheme = observable({dark: false});\r\n\r\n/**\r\n * Permet d'initialiser l'utilisation du mode sombre dans une application Focus. Par défaut, il est initialisé avec le thème du navigateur de\r\n * l'utilisateur.\r\n * @param disableAutoDarkMode Désactive la prise en compte du thème de l'utilisateur et initialise toujours en thème clair.\r\n */\r\nexport function initColorScheme(disableAutoDarkMode = false) {\r\n    const ls = localStorage.getItem(\"color-scheme\");\r\n    if (ls === \"dark\" || (!ls && !disableAutoDarkMode && window.matchMedia?.(\"(prefers-color-scheme: dark)\").matches)) {\r\n        colorScheme.dark = true;\r\n    }\r\n    localStorage.setItem(\"color-scheme\", colorScheme.dark ? \"dark\" : \"light\");\r\n\r\n    autorun(() => {\r\n        const darkModeAttribute = document.documentElement.hasAttribute(\"dark\");\r\n        if (colorScheme.dark && !darkModeAttribute) {\r\n            document.documentElement.setAttribute(\"dark\", \"true\");\r\n            localStorage.setItem(\"color-scheme\", \"dark\");\r\n        } else if (!colorScheme.dark && darkModeAttribute) {\r\n            document.documentElement.removeAttribute(\"dark\");\r\n            localStorage.setItem(\"color-scheme\", \"light\");\r\n        }\r\n    });\r\n}\r\n"],"names":["_jsx"],"mappings":"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"}

package/lib/theme/index.d.ts

@@ -1,5 +1,7 @@
-export { CSSContext, CSSElement, CSSMod, CSSToStrings, ThemeContext } from "./common";
-export { FocusCSSContext, ThemeProvider, ThemeProviderProps } from "./theme-provider";
-export { themr } from "./themr";
-export { CSSProp, ToBem, fromBem, toBem } from "./to-bem";
+export { ThemeContext } from "./common";
+export { ThemeProvider } from "./theme-provider";
+export { fromBem, toBem } from "./to-bem";
 export { useTheme } from "./use-theme";
+export type { CSSContext, CSSElement, CSSMod, CSSToStrings } from "./common";
+export type { FocusCSSContext, ThemeProviderProps } from "./theme-provider";
+export type { CSSProp, ToBem } from "./to-bem";

package/lib/theme/theme-provider.d.ts

@@ -20,17 +20,17 @@ export interface FocusCSSContext extends CSSContext {
     form: {};
     inputDate: {};
     label: {};
-    panel: {};
     select: {};
     selectCheckbox: {};
     selectChips: {};
     selectRadio: {};
-    buttonBTT: {};
     dialog: {};
     header: {};
+    lateralMenu: {};
     layout: {};
     mainMenu: {};
     overlay: {};
+    panel: {};
     popin: {};
     scrollable: {};
     scrollspy: {};

package/lib/utils/index.d.ts

@@ -1,3 +1,2 @@
 export { getDefaultTransition, getSpringTransition } from "./animation";
 export { colorScheme, initColorScheme } from "./color-scheme";
-export { PanelDescriptor, ScrollableContext, ScrollspyContext } from "./scroll-contexts";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@focus4/styling",
-    "version": "11.19.1",
+    "version": "11.21.0-beta.0",
     "description": "Focus v4, styling module",
     "main": "lib/focus4.styling.js",
     "type": "module",
@@ -16,12 +16,12 @@
         "postinstall": "node postinstall.js"
     },
     "dependencies": {
-        "@focus4/core": "11.19.1",
+        "@focus4/core": "11.20.0",
         "@types/react-dom": "18.3.0",
         "classnames": "2.5.1",
         "mobx-react": "7.6.0",
         "react": "18.3.1",
         "react-dom": "18.3.1"
     },
-    "gitHead": "597eb36d1f0267d2576b0316bc39858ebd0165d8"
+    "gitHead": "f88405740c7d54054d8bc69e042ac0b25aa6144f"
 }

package/lib/theme/themr.d.ts

@@ -1,13 +0,0 @@
-import { FunctionComponent, ReactElement } from "react";
-import { CSSToStrings } from "./common";
-import { ToBem } from "./to-bem";
-export interface ThemeConsumerProps<T> {
-    children: (theme: ToBem<T>) => ReactElement;
-    theme?: CSSToStrings<T> | Partial<ToBem<T>> | T;
-}
-/**
- * Permet de créer un composant wrapper pour utiliser `useTheme` dans le `render()` d'un composant classe.
- * @param name Le nom de la clé de theme.
- * @param localTheme Le theme local, fourni par le composant.
- */
-export declare function themr<T>(name: string, localTheme?: T): FunctionComponent<ThemeConsumerProps<T>>;

package/lib/utils/scroll-contexts.d.ts

@@ -1,64 +0,0 @@
-import { HTMLProps, ReactElement, ReactPortal } from "react";
-export interface PanelDescriptor {
-    node: HTMLDivElement;
-    title?: string;
-}
-/** Contexte d'un Scrollable, expose les méthodes associées. */
-export declare const ScrollableContext: import("react").Context<{
-    /**
-     * Retourne la status du header.
-     * @returns La taille du header et s'il est sticky ou non.
-     */
-    getHeaderStatus(): {
-        sticky: boolean;
-        height: number;
-    };
-    /**
-     * Affiche un élement dans le menu sticky du Scrollable
-     * @param node Le noeud React.
-     * @param parentNode Noeud à suivre pour positionner l'élément sticky.
-     * @param retractable Menu rétractable.
-     * @returns Le Portal associé.
-     */
-    menu(node: ReactElement, parentNode: HTMLElement | null, retractable: boolean): ReactPortal | null;
-    /**
-     * Affiche un élement dans le Scrollable.
-     * @param node Le noeud React.
-     * @returns Le Portal associé.
-     */
-    portal(node: ReactElement): ReactPortal;
-    /**
-     * Enregistre le header dans le Scrollable
-     * @param nonStickyElement Le noeud DOM représentant le header non sticky.
-     * @param canDeploy Précise si le header est toujours sticky ou non.
-     * @returns Le disposer.
-     */
-    registerHeader(nonStickyElement: HTMLElement, canDeploy: boolean): () => void;
-    /**
-     * Set les props du header du Scrollable.
-     * @param headerProps Les props du header.
-     * @returns Le disposer.
-     */
-    registerHeaderProps(headerProps: HTMLProps<HTMLElement>): void;
-    /**
-     * Enregistre un observateur d'intersection avec le viewport du Scrollable.
-     * @param node Le noeud DOM à observer.
-     * @param onIntersect Le callback à appeler lors d'une intersection.
-     * @returns Le disposer.
-     */
-    registerIntersect(node: HTMLElement, onIntersect: (ratio: number, isIntersecting: boolean) => void): () => void;
-    /**
-     * Scrolle vers la position demandée.
-     * @param options Options.
-     */
-    scrollTo(options?: ScrollToOptions): void;
-}>;
-/** Contexte d'un ScrollspyContainer, expose les méthodes associées. */
-export declare const ScrollspyContext: import("react").Context<{
-    /**
-     * Enregistre un panel dans le Scrollspu
-     * @param name L'id du panel souhaité.
-     * @param panel La description d'un panel
-     */
-    registerPanel(name: string, panel: PanelDescriptor): (() => void) | undefined;
-}>;