@focus4/styling 11.7.0-rc.0 → 11.7.3

package/lib/focus4.styling.d.ts

@@ -1,4 +1,4 @@
-import "./variables";
-import "./global.css";
-export { PanelDescriptor, ScrollableContext, ScrollspyContext, cssTransitionProps, getDefaultTransition, getIcon, springTransition } from "./utils";
-export { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, ThemeContext, ToBem, fromBem, themr, toBem, useTheme } from "./theme";
+import "./variables";
+import "./global.css";
+export { PanelDescriptor, ScrollableContext, ScrollspyContext, cssTransitionProps, getDefaultTransition, getIcon, springTransition } from "./utils";
+export { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, ThemeContext, ToBem, fromBem, themr, toBem, useTheme } from "./theme";

package/lib/focus4.styling.js

@@ -6,138 +6,138 @@ import { pick, upperFirst } from 'lodash';
 import { useObserver } from 'mobx-react';
 import { themeable } from '@focus4/core';
 
-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
-    };
-}
-const springTransition = {
-    type: "spring",
-    stiffness: 170,
-    damping: 26,
-    restDelta: 1,
-    restSpeed: 1000
-};
-function cssTransitionProps({ enter, enterActive, exit, exitActive }) {
-    const { delay, duration } = get();
-    return {
-        timeout: delay + duration,
-        classNames: {
-            enter,
-            enterActive,
-            exit,
-            exitActive
-        }
-    };
-}
-function toMs(d) {
-    if (d.endsWith("s")) {
-        return +d.substring(0, d.length - 1) * 1000;
-    }
-    else {
-        return +d.substring(0, d.length - 2);
-    }
+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
+    };
+}
+const springTransition = {
+    type: "spring",
+    stiffness: 170,
+    damping: 26,
+    restDelta: 1,
+    restSpeed: 1000
+};
+function cssTransitionProps({ enter, enterActive, exit, exitActive }) {
+    const { delay, duration } = get();
+    return {
+        timeout: delay + duration,
+        classNames: {
+            enter,
+            enterActive,
+            exit,
+            exitActive
+        }
+    };
+}
+function toMs(d) {
+    if (d.endsWith("s")) {
+        return +d.substring(0, d.length - 1) * 1000;
+    }
+    else {
+        return +d.substring(0, d.length - 2);
+    }
 }
 
-function getIcon(name, isCustom) {
-    if (isCustom === undefined) {
-        isCustom = i18next.t(`${name}.library`) !== "material";
-        name = i18next.t(`${name}.name`);
-    }
-    if (isCustom) {
-        return jsx("span", { className: `icon-${name}` });
-    }
-    else {
-        return name;
-    }
+function getIcon(name, isCustom) {
+    if (isCustom === undefined) {
+        isCustom = i18next.t(`${name}.library`) !== "material";
+        name = i18next.t(`${name}.name`);
+    }
+    if (isCustom) {
+        return jsx("span", { className: `icon-${name}` });
+    }
+    else {
+        return name;
+    }
 }
 
-/** 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 () => {
-        };
-    }
+/** 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 () => {
+        };
+    }
 });
 
 const ThemeContext = createContext({});
 
-function toBem(css) {
-    const data = {};
-    for (const key in css) {
-        const [element, modifier] = key.split("--");
-        if (data[element] && modifier) {
-            data[element].push(modifier);
-        }
-        else if (!data[element]) {
-            data[element] = modifier ? [modifier] : [];
-        }
-    }
-    return Object.keys(data).reduce((bem, key) => ({
-        ...bem,
-        [key]: (mods = {}) => {
-            if (mods !== true) {
-                return classNames(css[key], ...data[key].filter(mod => mods[mod]).map(mod => css[`${key}--${mod}`]));
-            }
-            else {
-                return pick(css, key, ...data[key].map(mod => `${key}--${mod}`));
-            }
-        }
-    }), {});
-}
-function fromBem(css) {
-    const res = {};
-    for (const key in css) {
-        const value = css[key];
-        if (value) {
-            if (typeof value === "string") {
-                res[key] = value;
-            }
-            else {
-                Object.assign(res, value(true));
-            }
-        }
-    }
-    return res;
+function toBem(css) {
+    const data = {};
+    for (const key in css) {
+        const [element, modifier] = key.split("--");
+        if (data[element] && modifier) {
+            data[element].push(modifier);
+        }
+        else if (!data[element]) {
+            data[element] = modifier ? [modifier] : [];
+        }
+    }
+    return Object.keys(data).reduce((bem, key) => ({
+        ...bem,
+        [key]: (mods = {}) => {
+            if (mods !== true) {
+                return classNames(css[key], ...data[key].filter(mod => mods[mod]).map(mod => css[`${key}--${mod}`]));
+            }
+            else {
+                return pick(css, key, ...data[key].map(mod => `${key}--${mod}`));
+            }
+        }
+    }), {});
+}
+function fromBem(css) {
+    const res = {};
+    for (const key in css) {
+        const value = css[key];
+        if (value) {
+            if (typeof value === "string") {
+                res[key] = value;
+            }
+            else {
+                Object.assign(res, value(true));
+            }
+        }
+    }
+    return res;
 }
 
-/** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */
-function useTheme(name, ...themes) {
-    const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};
-    return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x))));
+/** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */
+function useTheme(name, ...themes) {
+    const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};
+    return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x))));
 }
 
-/**
- * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).
- * @param name Le nom de la clé de theme.
- * @param localTheme Le theme local, fourni par le composant.
- */
-function themr(name, localTheme) {
-    function TC({ children, theme }) {
-        const finalTheme = useTheme(name, localTheme, theme);
-        return useObserver(() => children(finalTheme));
-    }
-    TC.displayName = `${upperFirst(name)}ThemeConsumer`;
-    return TC;
+/**
+ * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).
+ * @param name Le nom de la clé de theme.
+ * @param localTheme Le theme local, fourni par le composant.
+ */
+function themr(name, localTheme) {
+    function TC({ children, theme }) {
+        const finalTheme = useTheme(name, localTheme, theme);
+        return useObserver(() => children(finalTheme));
+    }
+    TC.displayName = `${upperFirst(name)}ThemeConsumer`;
+    return TC;
 }
 
 export { ScrollableContext, ScrollspyContext, ThemeContext, cssTransitionProps, fromBem, getDefaultTransition, getIcon, springTransition, themr, toBem, useTheme };

package/lib/focus4.styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus4.styling.js","sources":["../src/utils/animation.ts","../src/utils/get-icon.tsx","../src/utils/scroll-contexts.ts","../src/theme/common.ts","../src/theme/to-bem.ts","../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 const springTransition = {\r\n    type: \"spring\",\r\n    stiffness: 170,\r\n    damping: 26,\r\n    restDelta: 1,\r\n    restSpeed: 1000\r\n} as const;\r\n\r\nexport function cssTransitionProps({\r\n    enter,\r\n    enterActive,\r\n    exit,\r\n    exitActive\r\n}: {\r\n    enter: string;\r\n    enterActive: string;\r\n    exit: string;\r\n    exitActive: string;\r\n}) {\r\n    const {delay, duration} = get();\r\n    return {\r\n        timeout: delay + duration,\r\n        classNames: {\r\n            enter,\r\n            enterActive,\r\n            exit,\r\n            exitActive\r\n        }\r\n    };\r\n}\r\n\r\nfunction toMs(d: string) {\r\n    if (d.endsWith(\"s\")) {\r\n        return +d.substring(0, d.length - 1) * 1000;\r\n    } else {\r\n        return +d.substring(0, d.length - 2);\r\n    }\r\n}\r\n","import i18next from \"i18next\";\r\nimport {ReactNode} from \"react\";\r\n\r\n/**\r\n * Récupère l'icône correspondante au nom.\r\n * @param name Le nom de l'icône.\r\n * @param isCustom Icône custom ou non.\r\n */\r\nexport function getIcon(name: ReactNode, isCustom: boolean): JSX.Element | string;\r\n/**\r\n * Récupère l'icône par sa clé i18n.\r\n * @param i18nKey La clé i18n de l'icône.\r\n */\r\nexport function getIcon(i18nKey: string): JSX.Element | string;\r\nexport function getIcon(name?: ReactNode, isCustom?: boolean) {\r\n    if (isCustom === undefined) {\r\n        isCustom = i18next.t(`${name as string}.library`) !== \"material\";\r\n        name = i18next.t(`${name as string}.name`);\r\n    }\r\n\r\n    if (isCustom) {\r\n        return <span className={`icon-${name as string}`} />;\r\n    } else {\r\n        return name;\r\n    }\r\n}\r\n","import {createContext, HTMLProps, 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 hauteur du header sticky.\r\n     * @returns La taille du header.\r\n     */\r\n    getHeaderHeight(): 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: JSX.Element, 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: JSX.Element): 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]: {[key: string]: BemFunction | 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\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\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 {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/** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */\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 * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).\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/utils/animation.ts","../src/utils/get-icon.tsx","../src/utils/scroll-contexts.ts","../src/theme/common.ts","../src/theme/to-bem.ts","../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 const springTransition = {\r\n    type: \"spring\",\r\n    stiffness: 170,\r\n    damping: 26,\r\n    restDelta: 1,\r\n    restSpeed: 1000\r\n} as const;\r\n\r\nexport function cssTransitionProps({\r\n    enter,\r\n    enterActive,\r\n    exit,\r\n    exitActive\r\n}: {\r\n    enter: string;\r\n    enterActive: string;\r\n    exit: string;\r\n    exitActive: string;\r\n}) {\r\n    const {delay, duration} = get();\r\n    return {\r\n        timeout: delay + duration,\r\n        classNames: {\r\n            enter,\r\n            enterActive,\r\n            exit,\r\n            exitActive\r\n        }\r\n    };\r\n}\r\n\r\nfunction toMs(d: string) {\r\n    if (d.endsWith(\"s\")) {\r\n        return +d.substring(0, d.length - 1) * 1000;\r\n    } else {\r\n        return +d.substring(0, d.length - 2);\r\n    }\r\n}\r\n","import i18next from \"i18next\";\r\nimport {ReactNode} from \"react\";\r\n\r\n/**\r\n * Récupère l'icône correspondante au nom.\r\n * @param name Le nom de l'icône.\r\n * @param isCustom Icône custom ou non.\r\n */\r\nexport function getIcon(name: ReactNode, isCustom: boolean): JSX.Element | string;\r\n/**\r\n * Récupère l'icône par sa clé i18n.\r\n * @param i18nKey La clé i18n de l'icône.\r\n */\r\nexport function getIcon(i18nKey: string): JSX.Element | string;\r\nexport function getIcon(name?: ReactNode, isCustom?: boolean) {\r\n    if (isCustom === undefined) {\r\n        isCustom = i18next.t(`${name as string}.library`) !== \"material\";\r\n        name = i18next.t(`${name as string}.name`);\r\n    }\r\n\r\n    if (isCustom) {\r\n        return <span className={`icon-${name as string}`} />;\r\n    } else {\r\n        return name;\r\n    }\r\n}\r\n","import {createContext, HTMLProps, 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: JSX.Element, 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: JSX.Element): 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]: {[key: string]: BemFunction | 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\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\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 {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/** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */\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 * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).\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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"}

package/lib/theme/common.d.ts

@@ -1,27 +1,27 @@
-/// <reference types="react" />
-export type CSSElement<T> = T & string & {
-    _element: void;
-};
-export type CSSMod<N extends string, T> = N & T & string & {
-    _mod: void;
-};
-export type CSSToStrings<T> = {
-    [P in keyof T]?: string;
-};
-export type Mods<CSS, E> = {
-    [P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never;
-}[keyof CSS];
-export type ModNames<CSS, E> = {
-    [P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never;
-}[keyof CSS];
-export type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {
-    [_ in ModNames<CSS, E> | P]: string;
-}) & (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {
-    [_ in Mods<CSS, E>]?: boolean;
-}) => string);
-export interface CSSContext {
-    [key: string]: {
-        [key: string]: BemFunction | string;
-    };
-}
-export declare const ThemeContext: import("react").Context<CSSContext>;
+/// <reference types="react" />
+export type CSSElement<T> = T & string & {
+    _element: void;
+};
+export type CSSMod<N extends string, T> = N & T & string & {
+    _mod: void;
+};
+export type CSSToStrings<T> = {
+    [P in keyof T]?: string;
+};
+export type Mods<CSS, E> = {
+    [P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never;
+}[keyof CSS];
+export type ModNames<CSS, E> = {
+    [P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never;
+}[keyof CSS];
+export type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {
+    [_ in ModNames<CSS, E> | P]: string;
+}) & (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {
+    [_ in Mods<CSS, E>]?: boolean;
+}) => string);
+export interface CSSContext {
+    [key: string]: {
+        [key: string]: BemFunction | string;
+    };
+}
+export declare const ThemeContext: import("react").Context<CSSContext>;

package/lib/theme/index.d.ts

@@ -1,4 +1,4 @@
-export { BemFunction, CSSContext, CSSElement, CSSMod, CSSToStrings, ThemeContext } from "./common";
-export { themr } from "./themr";
-export { CSSProp, ToBem, fromBem, toBem } from "./to-bem";
-export { useTheme } from "./use-theme";
+export { BemFunction, CSSContext, CSSElement, CSSMod, CSSToStrings, ThemeContext } from "./common";
+export { themr } from "./themr";
+export { CSSProp, ToBem, fromBem, toBem } from "./to-bem";
+export { useTheme } from "./use-theme";

package/lib/theme/themr.d.ts

@@ -1,13 +1,13 @@
-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;
-}
-/**
- * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).
- * @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>>;
+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;
+}
+/**
+ * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).
+ * @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/theme/to-bem.d.ts

@@ -1,10 +1,10 @@
-import { BemFunction, CSSElement, CSSMod, CSSToStrings } from "./common";
-export type AllMods<CSS> = {
-    [P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never;
-}[keyof CSS];
-export type ToBem<CSS> = Omit<{
-    [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E> ? BemFunction<CSS, P, E> : CSS[P] extends CSSMod<infer __, infer ___> ? never : BemFunction<CSS, P, string>;
-}, AllMods<CSS>>;
-export type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;
-export declare function toBem<CSS>(css: CSS): ToBem<CSS>;
-export declare function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T>;
+import { BemFunction, CSSElement, CSSMod, CSSToStrings } from "./common";
+export type AllMods<CSS> = {
+    [P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never;
+}[keyof CSS];
+export type ToBem<CSS> = Omit<{
+    [P in keyof CSS]-?: CSS[P] extends CSSElement<infer E> ? BemFunction<CSS, P, E> : CSS[P] extends CSSMod<infer __, infer ___> ? never : BemFunction<CSS, P, string>;
+}, AllMods<CSS>>;
+export type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;
+export declare function toBem<CSS>(css: CSS): ToBem<CSS>;
+export declare function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T>;

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

@@ -1,4 +1,4 @@
-import { CSSToStrings } from "./common";
-import { ToBem } from "./to-bem";
-/** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */
-export declare function useTheme<T>(name: string, ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]): ToBem<T>;
+import { CSSToStrings } from "./common";
+import { ToBem } from "./to-bem";
+/** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */
+export declare function useTheme<T>(name: string, ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]): ToBem<T>;

package/lib/utils/animation.d.ts

@@ -1,26 +1,26 @@
-export declare function getDefaultTransition(): {
-    readonly delay: number;
-    readonly duration: number;
-    readonly ease: number[] | undefined;
-};
-export declare const springTransition: {
-    readonly type: "spring";
-    readonly stiffness: 170;
-    readonly damping: 26;
-    readonly restDelta: 1;
-    readonly restSpeed: 1000;
-};
-export declare function cssTransitionProps({ enter, enterActive, exit, exitActive }: {
-    enter: string;
-    enterActive: string;
-    exit: string;
-    exitActive: string;
-}): {
-    timeout: number;
-    classNames: {
-        enter: string;
-        enterActive: string;
-        exit: string;
-        exitActive: string;
-    };
-};
+export declare function getDefaultTransition(): {
+    readonly delay: number;
+    readonly duration: number;
+    readonly ease: number[] | undefined;
+};
+export declare const springTransition: {
+    readonly type: "spring";
+    readonly stiffness: 170;
+    readonly damping: 26;
+    readonly restDelta: 1;
+    readonly restSpeed: 1000;
+};
+export declare function cssTransitionProps({ enter, enterActive, exit, exitActive }: {
+    enter: string;
+    enterActive: string;
+    exit: string;
+    exitActive: string;
+}): {
+    timeout: number;
+    classNames: {
+        enter: string;
+        enterActive: string;
+        exit: string;
+        exitActive: string;
+    };
+};

package/lib/utils/get-icon.d.ts

@@ -1,12 +1,12 @@
-import { ReactNode } from "react";
-/**
- * Récupère l'icône correspondante au nom.
- * @param name Le nom de l'icône.
- * @param isCustom Icône custom ou non.
- */
-export declare function getIcon(name: ReactNode, isCustom: boolean): JSX.Element | string;
-/**
- * Récupère l'icône par sa clé i18n.
- * @param i18nKey La clé i18n de l'icône.
- */
-export declare function getIcon(i18nKey: string): JSX.Element | string;
+import { ReactNode } from "react";
+/**
+ * Récupère l'icône correspondante au nom.
+ * @param name Le nom de l'icône.
+ * @param isCustom Icône custom ou non.
+ */
+export declare function getIcon(name: ReactNode, isCustom: boolean): JSX.Element | string;
+/**
+ * Récupère l'icône par sa clé i18n.
+ * @param i18nKey La clé i18n de l'icône.
+ */
+export declare function getIcon(i18nKey: string): JSX.Element | string;

package/lib/utils/index.d.ts

@@ -1,3 +1,3 @@
-export { cssTransitionProps, getDefaultTransition, springTransition } from "./animation";
-export { getIcon } from "./get-icon";
-export { PanelDescriptor, ScrollableContext, ScrollspyContext } from "./scroll-contexts";
+export { cssTransitionProps, getDefaultTransition, springTransition } from "./animation";
+export { getIcon } from "./get-icon";
+export { PanelDescriptor, ScrollableContext, ScrollspyContext } from "./scroll-contexts";

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

@@ -1,61 +1,64 @@
-import { HTMLProps, 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 hauteur du header sticky.
-     * @returns La taille du header.
-     */
-    getHeaderHeight(): 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: JSX.Element, parentNode: HTMLElement | null, retractable: boolean): ReactPortal | null;
-    /**
-     * Affiche un élement dans le Scrollable.
-     * @param node Le noeud React.
-     * @returns Le Portal associé.
-     */
-    portal(node: JSX.Element): 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;
-}>;
+import { HTMLProps, 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: JSX.Element, parentNode: HTMLElement | null, retractable: boolean): ReactPortal | null;
+    /**
+     * Affiche un élement dans le Scrollable.
+     * @param node Le noeud React.
+     * @returns Le Portal associé.
+     */
+    portal(node: JSX.Element): 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;
+}>;

package/lib/variables/index.d.ts

@@ -1,2 +1,2 @@
-import "./colors.css";
-import "./variables.css";
+import "./colors.css";
+import "./variables.css";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@focus4/styling",
-    "version": "11.7.0-rc.0",
+    "version": "11.7.3",
     "description": "Focus v4, styling module",
     "main": "lib/focus4.styling.js",
     "repository": {
@@ -18,7 +18,7 @@
         "test-ci": "jest --ci --reporters=default --reporters=jest-junit"
     },
     "dependencies": {
-        "@focus4/core": "11.7.0-rc.0",
+        "@focus4/core": "11.7.3",
         "@types/react-dom": "18.0.11",
         "classnames": "2.3.2",
         "mobx-react": "7.6.0",
@@ -26,10 +26,10 @@
         "react-dom": "18.2.0"
     },
     "devDependencies": {
-        "@types/jest": "29.4.0",
-        "jest": "29.4.3",
+        "@types/jest": "29.5.0",
+        "jest": "29.5.0",
         "jest-junit": "15.0.0",
         "ts-jest": "29.0.5"
     },
-    "gitHead": "11c6e7f53e9efbd123d4fe775370d64439c2e632"
+    "gitHead": "3f0c3acf7d5e20c406f2ef6a4d0129dd9fc8b08a"
 }