@focus4/styling 11.7.0 → 11.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import "./variables";
2
- import "./global.css";
3
- export { PanelDescriptor, ScrollableContext, ScrollspyContext, cssTransitionProps, getDefaultTransition, getIcon, springTransition } from "./utils";
4
- export { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, ThemeContext, ToBem, fromBem, themr, toBem, useTheme } from "./theme";
1
+ import "./variables";
2
+ import "./global.css";
3
+ export { PanelDescriptor, ScrollableContext, ScrollspyContext, cssTransitionProps, getDefaultTransition, getIcon, springTransition } from "./utils";
4
+ export { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, ThemeContext, ToBem, fromBem, themr, toBem, useTheme } from "./theme";
@@ -6,138 +6,138 @@ import { pick, upperFirst } from 'lodash';
6
6
  import { useObserver } from 'mobx-react';
7
7
  import { themeable } from '@focus4/core';
8
8
 
9
- function get() {
10
- const { animationDelay, animationDuration, animationTimingFunction } = window.getComputedStyle(document.body);
11
- const delay = toMs(animationDelay);
12
- const duration = toMs(animationDuration);
13
- const ease = animationTimingFunction.startsWith("cubic-bezier")
14
- ? animationTimingFunction.substring(13).split(",").map(parseFloat)
15
- : undefined;
16
- return { delay, duration, ease };
17
- }
18
- function getDefaultTransition() {
19
- const { delay, duration, ease } = get();
20
- return {
21
- delay: delay / 1000,
22
- duration: duration / 1000,
23
- ease
24
- };
25
- }
26
- const springTransition = {
27
- type: "spring",
28
- stiffness: 170,
29
- damping: 26,
30
- restDelta: 1,
31
- restSpeed: 1000
32
- };
33
- function cssTransitionProps({ enter, enterActive, exit, exitActive }) {
34
- const { delay, duration } = get();
35
- return {
36
- timeout: delay + duration,
37
- classNames: {
38
- enter,
39
- enterActive,
40
- exit,
41
- exitActive
42
- }
43
- };
44
- }
45
- function toMs(d) {
46
- if (d.endsWith("s")) {
47
- return +d.substring(0, d.length - 1) * 1000;
48
- }
49
- else {
50
- return +d.substring(0, d.length - 2);
51
- }
9
+ function get() {
10
+ const { animationDelay, animationDuration, animationTimingFunction } = window.getComputedStyle(document.body);
11
+ const delay = toMs(animationDelay);
12
+ const duration = toMs(animationDuration);
13
+ const ease = animationTimingFunction.startsWith("cubic-bezier")
14
+ ? animationTimingFunction.substring(13).split(",").map(parseFloat)
15
+ : undefined;
16
+ return { delay, duration, ease };
17
+ }
18
+ function getDefaultTransition() {
19
+ const { delay, duration, ease } = get();
20
+ return {
21
+ delay: delay / 1000,
22
+ duration: duration / 1000,
23
+ ease
24
+ };
25
+ }
26
+ const springTransition = {
27
+ type: "spring",
28
+ stiffness: 170,
29
+ damping: 26,
30
+ restDelta: 1,
31
+ restSpeed: 1000
32
+ };
33
+ function cssTransitionProps({ enter, enterActive, exit, exitActive }) {
34
+ const { delay, duration } = get();
35
+ return {
36
+ timeout: delay + duration,
37
+ classNames: {
38
+ enter,
39
+ enterActive,
40
+ exit,
41
+ exitActive
42
+ }
43
+ };
44
+ }
45
+ function toMs(d) {
46
+ if (d.endsWith("s")) {
47
+ return +d.substring(0, d.length - 1) * 1000;
48
+ }
49
+ else {
50
+ return +d.substring(0, d.length - 2);
51
+ }
52
52
  }
53
53
 
54
- function getIcon(name, isCustom) {
55
- if (isCustom === undefined) {
56
- isCustom = i18next.t(`${name}.library`) !== "material";
57
- name = i18next.t(`${name}.name`);
58
- }
59
- if (isCustom) {
60
- return jsx("span", { className: `icon-${name}` });
61
- }
62
- else {
63
- return name;
64
- }
54
+ function getIcon(name, isCustom) {
55
+ if (isCustom === undefined) {
56
+ isCustom = i18next.t(`${name}.library`) !== "material";
57
+ name = i18next.t(`${name}.name`);
58
+ }
59
+ if (isCustom) {
60
+ return jsx("span", { className: `icon-${name}` });
61
+ }
62
+ else {
63
+ return name;
64
+ }
65
65
  }
66
66
 
67
- /** Contexte d'un Scrollable, expose les méthodes associées. */
68
- const ScrollableContext = createContext({});
69
- /** Contexte d'un ScrollspyContainer, expose les méthodes associées. */
70
- const ScrollspyContext = createContext({
71
- /**
72
- * Enregistre un panel dans le Scrollspu
73
- * @param name L'id du panel souhaité.
74
- * @param panel La description d'un panel
75
- */
76
- registerPanel(name, panel) {
77
- return () => {
78
- };
79
- }
67
+ /** Contexte d'un Scrollable, expose les méthodes associées. */
68
+ const ScrollableContext = createContext({});
69
+ /** Contexte d'un ScrollspyContainer, expose les méthodes associées. */
70
+ const ScrollspyContext = createContext({
71
+ /**
72
+ * Enregistre un panel dans le Scrollspu
73
+ * @param name L'id du panel souhaité.
74
+ * @param panel La description d'un panel
75
+ */
76
+ registerPanel(name, panel) {
77
+ return () => {
78
+ };
79
+ }
80
80
  });
81
81
 
82
82
  const ThemeContext = createContext({});
83
83
 
84
- function toBem(css) {
85
- const data = {};
86
- for (const key in css) {
87
- const [element, modifier] = key.split("--");
88
- if (data[element] && modifier) {
89
- data[element].push(modifier);
90
- }
91
- else if (!data[element]) {
92
- data[element] = modifier ? [modifier] : [];
93
- }
94
- }
95
- return Object.keys(data).reduce((bem, key) => ({
96
- ...bem,
97
- [key]: (mods = {}) => {
98
- if (mods !== true) {
99
- return classNames(css[key], ...data[key].filter(mod => mods[mod]).map(mod => css[`${key}--${mod}`]));
100
- }
101
- else {
102
- return pick(css, key, ...data[key].map(mod => `${key}--${mod}`));
103
- }
104
- }
105
- }), {});
106
- }
107
- function fromBem(css) {
108
- const res = {};
109
- for (const key in css) {
110
- const value = css[key];
111
- if (value) {
112
- if (typeof value === "string") {
113
- res[key] = value;
114
- }
115
- else {
116
- Object.assign(res, value(true));
117
- }
118
- }
119
- }
120
- return res;
84
+ function toBem(css) {
85
+ const data = {};
86
+ for (const key in css) {
87
+ const [element, modifier] = key.split("--");
88
+ if (data[element] && modifier) {
89
+ data[element].push(modifier);
90
+ }
91
+ else if (!data[element]) {
92
+ data[element] = modifier ? [modifier] : [];
93
+ }
94
+ }
95
+ return Object.keys(data).reduce((bem, key) => ({
96
+ ...bem,
97
+ [key]: (mods = {}) => {
98
+ if (mods !== true) {
99
+ return classNames(css[key], ...data[key].filter(mod => mods[mod]).map(mod => css[`${key}--${mod}`]));
100
+ }
101
+ else {
102
+ return pick(css, key, ...data[key].map(mod => `${key}--${mod}`));
103
+ }
104
+ }
105
+ }), {});
106
+ }
107
+ function fromBem(css) {
108
+ const res = {};
109
+ for (const key in css) {
110
+ const value = css[key];
111
+ if (value) {
112
+ if (typeof value === "string") {
113
+ res[key] = value;
114
+ }
115
+ else {
116
+ Object.assign(res, value(true));
117
+ }
118
+ }
119
+ }
120
+ return res;
121
121
  }
122
122
 
123
- /** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */
124
- function useTheme(name, ...themes) {
125
- const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};
126
- return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x))));
123
+ /** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */
124
+ function useTheme(name, ...themes) {
125
+ const contextTheme = fromBem(useContext(ThemeContext)[name]) || {};
126
+ return toBem(themeable(contextTheme, ...themes.filter(x => x).map(x => fromBem(x))));
127
127
  }
128
128
 
129
- /**
130
- * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).
131
- * @param name Le nom de la clé de theme.
132
- * @param localTheme Le theme local, fourni par le composant.
133
- */
134
- function themr(name, localTheme) {
135
- function TC({ children, theme }) {
136
- const finalTheme = useTheme(name, localTheme, theme);
137
- return useObserver(() => children(finalTheme));
138
- }
139
- TC.displayName = `${upperFirst(name)}ThemeConsumer`;
140
- return TC;
129
+ /**
130
+ * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).
131
+ * @param name Le nom de la clé de theme.
132
+ * @param localTheme Le theme local, fourni par le composant.
133
+ */
134
+ function themr(name, localTheme) {
135
+ function TC({ children, theme }) {
136
+ const finalTheme = useTheme(name, localTheme, theme);
137
+ return useObserver(() => children(finalTheme));
138
+ }
139
+ TC.displayName = `${upperFirst(name)}ThemeConsumer`;
140
+ return TC;
141
141
  }
142
142
 
143
143
  export { ScrollableContext, ScrollspyContext, ThemeContext, cssTransitionProps, fromBem, getDefaultTransition, getIcon, springTransition, themr, toBem, useTheme };
@@ -1,27 +1,27 @@
1
- /// <reference types="react" />
2
- export type CSSElement<T> = T & string & {
3
- _element: void;
4
- };
5
- export type CSSMod<N extends string, T> = N & T & string & {
6
- _mod: void;
7
- };
8
- export type CSSToStrings<T> = {
9
- [P in keyof T]?: string;
10
- };
11
- export type Mods<CSS, E> = {
12
- [P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never;
13
- }[keyof CSS];
14
- export type ModNames<CSS, E> = {
15
- [P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never;
16
- }[keyof CSS];
17
- export type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {
18
- [_ in ModNames<CSS, E> | P]: string;
19
- }) & (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {
20
- [_ in Mods<CSS, E>]?: boolean;
21
- }) => string);
22
- export interface CSSContext {
23
- [key: string]: {
24
- [key: string]: BemFunction | string;
25
- };
26
- }
27
- export declare const ThemeContext: import("react").Context<CSSContext>;
1
+ /// <reference types="react" />
2
+ export type CSSElement<T> = T & string & {
3
+ _element: void;
4
+ };
5
+ export type CSSMod<N extends string, T> = N & T & string & {
6
+ _mod: void;
7
+ };
8
+ export type CSSToStrings<T> = {
9
+ [P in keyof T]?: string;
10
+ };
11
+ export type Mods<CSS, E> = {
12
+ [P in keyof CSS]: CSS[P] extends CSSMod<infer M, E> ? M : never;
13
+ }[keyof CSS];
14
+ export type ModNames<CSS, E> = {
15
+ [P in keyof CSS]: CSS[P] extends CSSMod<infer _, E> ? P : never;
16
+ }[keyof CSS];
17
+ export type BemFunction<CSS = any, P extends number | string | symbol = any, E = any> = ((object: true) => {
18
+ [_ in ModNames<CSS, E> | P]: string;
19
+ }) & (Mods<CSS, E> extends never | undefined ? () => string : (mods?: {
20
+ [_ in Mods<CSS, E>]?: boolean;
21
+ }) => string);
22
+ export interface CSSContext {
23
+ [key: string]: {
24
+ [key: string]: BemFunction | string;
25
+ };
26
+ }
27
+ export declare const ThemeContext: import("react").Context<CSSContext>;
@@ -1,4 +1,4 @@
1
- export { BemFunction, CSSContext, CSSElement, CSSMod, CSSToStrings, ThemeContext } from "./common";
2
- export { themr } from "./themr";
3
- export { CSSProp, ToBem, fromBem, toBem } from "./to-bem";
4
- export { useTheme } from "./use-theme";
1
+ export { BemFunction, CSSContext, CSSElement, CSSMod, CSSToStrings, ThemeContext } from "./common";
2
+ export { themr } from "./themr";
3
+ export { CSSProp, ToBem, fromBem, toBem } from "./to-bem";
4
+ export { useTheme } from "./use-theme";
@@ -1,13 +1,13 @@
1
- import { FunctionComponent, ReactElement } from "react";
2
- import { CSSToStrings } from "./common";
3
- import { ToBem } from "./to-bem";
4
- export interface ThemeConsumerProps<T> {
5
- children: (theme: ToBem<T>) => ReactElement;
6
- theme?: CSSToStrings<T> | Partial<ToBem<T>> | T;
7
- }
8
- /**
9
- * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).
10
- * @param name Le nom de la clé de theme.
11
- * @param localTheme Le theme local, fourni par le composant.
12
- */
13
- export declare function themr<T>(name: string, localTheme?: T): FunctionComponent<ThemeConsumerProps<T>>;
1
+ import { FunctionComponent, ReactElement } from "react";
2
+ import { CSSToStrings } from "./common";
3
+ import { ToBem } from "./to-bem";
4
+ export interface ThemeConsumerProps<T> {
5
+ children: (theme: ToBem<T>) => ReactElement;
6
+ theme?: CSSToStrings<T> | Partial<ToBem<T>> | T;
7
+ }
8
+ /**
9
+ * Crée un composant pour injecter le theme souhaité dans un composant, via une render props (à la place du HoC de `react-css-themr`).
10
+ * @param name Le nom de la clé de theme.
11
+ * @param localTheme Le theme local, fourni par le composant.
12
+ */
13
+ export declare function themr<T>(name: string, localTheme?: T): FunctionComponent<ThemeConsumerProps<T>>;
@@ -1,10 +1,10 @@
1
- import { BemFunction, CSSElement, CSSMod, CSSToStrings } from "./common";
2
- export type AllMods<CSS> = {
3
- [P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never;
4
- }[keyof CSS];
5
- export type ToBem<CSS> = Omit<{
6
- [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>;
7
- }, AllMods<CSS>>;
8
- export type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;
9
- export declare function toBem<CSS>(css: CSS): ToBem<CSS>;
10
- export declare function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T>;
1
+ import { BemFunction, CSSElement, CSSMod, CSSToStrings } from "./common";
2
+ export type AllMods<CSS> = {
3
+ [P in keyof CSS]: CSS[P] extends CSSMod<infer _, infer __> ? P : never;
4
+ }[keyof CSS];
5
+ export type ToBem<CSS> = Omit<{
6
+ [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>;
7
+ }, AllMods<CSS>>;
8
+ export type CSSProp<CSS> = CSSToStrings<CSS> | Partial<ToBem<CSS>>;
9
+ export declare function toBem<CSS>(css: CSS): ToBem<CSS>;
10
+ export declare function fromBem<T>(css: CSSToStrings<T> | Partial<ToBem<T>> | T): CSSToStrings<T>;
@@ -1,4 +1,4 @@
1
- import { CSSToStrings } from "./common";
2
- import { ToBem } from "./to-bem";
3
- /** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */
4
- export declare function useTheme<T>(name: string, ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]): ToBem<T>;
1
+ import { CSSToStrings } from "./common";
2
+ import { ToBem } from "./to-bem";
3
+ /** Hook pour récupérer le theme du contexte et le fusionner avec d'autres. */
4
+ export declare function useTheme<T>(name: string, ...themes: (CSSToStrings<T> | Partial<ToBem<T>> | T | undefined)[]): ToBem<T>;
@@ -1,26 +1,26 @@
1
- export declare function getDefaultTransition(): {
2
- readonly delay: number;
3
- readonly duration: number;
4
- readonly ease: number[] | undefined;
5
- };
6
- export declare const springTransition: {
7
- readonly type: "spring";
8
- readonly stiffness: 170;
9
- readonly damping: 26;
10
- readonly restDelta: 1;
11
- readonly restSpeed: 1000;
12
- };
13
- export declare function cssTransitionProps({ enter, enterActive, exit, exitActive }: {
14
- enter: string;
15
- enterActive: string;
16
- exit: string;
17
- exitActive: string;
18
- }): {
19
- timeout: number;
20
- classNames: {
21
- enter: string;
22
- enterActive: string;
23
- exit: string;
24
- exitActive: string;
25
- };
26
- };
1
+ export declare function getDefaultTransition(): {
2
+ readonly delay: number;
3
+ readonly duration: number;
4
+ readonly ease: number[] | undefined;
5
+ };
6
+ export declare const springTransition: {
7
+ readonly type: "spring";
8
+ readonly stiffness: 170;
9
+ readonly damping: 26;
10
+ readonly restDelta: 1;
11
+ readonly restSpeed: 1000;
12
+ };
13
+ export declare function cssTransitionProps({ enter, enterActive, exit, exitActive }: {
14
+ enter: string;
15
+ enterActive: string;
16
+ exit: string;
17
+ exitActive: string;
18
+ }): {
19
+ timeout: number;
20
+ classNames: {
21
+ enter: string;
22
+ enterActive: string;
23
+ exit: string;
24
+ exitActive: string;
25
+ };
26
+ };
@@ -1,12 +1,12 @@
1
- import { ReactNode } from "react";
2
- /**
3
- * Récupère l'icône correspondante au nom.
4
- * @param name Le nom de l'icône.
5
- * @param isCustom Icône custom ou non.
6
- */
7
- export declare function getIcon(name: ReactNode, isCustom: boolean): JSX.Element | string;
8
- /**
9
- * Récupère l'icône par sa clé i18n.
10
- * @param i18nKey La clé i18n de l'icône.
11
- */
12
- export declare function getIcon(i18nKey: string): JSX.Element | string;
1
+ import { ReactNode } from "react";
2
+ /**
3
+ * Récupère l'icône correspondante au nom.
4
+ * @param name Le nom de l'icône.
5
+ * @param isCustom Icône custom ou non.
6
+ */
7
+ export declare function getIcon(name: ReactNode, isCustom: boolean): JSX.Element | string;
8
+ /**
9
+ * Récupère l'icône par sa clé i18n.
10
+ * @param i18nKey La clé i18n de l'icône.
11
+ */
12
+ export declare function getIcon(i18nKey: string): JSX.Element | string;
@@ -1,3 +1,3 @@
1
- export { cssTransitionProps, getDefaultTransition, springTransition } from "./animation";
2
- export { getIcon } from "./get-icon";
3
- export { PanelDescriptor, ScrollableContext, ScrollspyContext } from "./scroll-contexts";
1
+ export { cssTransitionProps, getDefaultTransition, springTransition } from "./animation";
2
+ export { getIcon } from "./get-icon";
3
+ export { PanelDescriptor, ScrollableContext, ScrollspyContext } from "./scroll-contexts";
@@ -1,64 +1,64 @@
1
- import { HTMLProps, ReactPortal } from "react";
2
- export interface PanelDescriptor {
3
- node: HTMLDivElement;
4
- title?: string;
5
- }
6
- /** Contexte d'un Scrollable, expose les méthodes associées. */
7
- export declare const ScrollableContext: import("react").Context<{
8
- /**
9
- * Retourne la status du header.
10
- * @returns La taille du header et s'il est sticky ou non.
11
- */
12
- getHeaderStatus(): {
13
- sticky: boolean;
14
- height: number;
15
- };
16
- /**
17
- * Affiche un élement dans le menu sticky du Scrollable
18
- * @param node Le noeud React.
19
- * @param parentNode Noeud à suivre pour positionner l'élément sticky.
20
- * @param retractable Menu rétractable.
21
- * @returns Le Portal associé.
22
- */
23
- menu(node: JSX.Element, parentNode: HTMLElement | null, retractable: boolean): ReactPortal | null;
24
- /**
25
- * Affiche un élement dans le Scrollable.
26
- * @param node Le noeud React.
27
- * @returns Le Portal associé.
28
- */
29
- portal(node: JSX.Element): ReactPortal;
30
- /**
31
- * Enregistre le header dans le Scrollable
32
- * @param nonStickyElement Le noeud DOM représentant le header non sticky.
33
- * @param canDeploy Précise si le header est toujours sticky ou non.
34
- * @returns Le disposer.
35
- */
36
- registerHeader(nonStickyElement: HTMLElement, canDeploy: boolean): () => void;
37
- /**
38
- * Set les props du header du Scrollable.
39
- * @param headerProps Les props du header.
40
- * @returns Le disposer.
41
- */
42
- registerHeaderProps(headerProps: HTMLProps<HTMLElement>): void;
43
- /**
44
- * Enregistre un observateur d'intersection avec le viewport du Scrollable.
45
- * @param node Le noeud DOM à observer.
46
- * @param onIntersect Le callback à appeler lors d'une intersection.
47
- * @returns Le disposer.
48
- */
49
- registerIntersect(node: HTMLElement, onIntersect: (ratio: number, isIntersecting: boolean) => void): () => void;
50
- /**
51
- * Scrolle vers la position demandée.
52
- * @param options Options.
53
- */
54
- scrollTo(options?: ScrollToOptions): void;
55
- }>;
56
- /** Contexte d'un ScrollspyContainer, expose les méthodes associées. */
57
- export declare const ScrollspyContext: import("react").Context<{
58
- /**
59
- * Enregistre un panel dans le Scrollspu
60
- * @param name L'id du panel souhaité.
61
- * @param panel La description d'un panel
62
- */
63
- registerPanel(name: string, panel: PanelDescriptor): (() => void) | undefined;
64
- }>;
1
+ import { HTMLProps, ReactPortal } from "react";
2
+ export interface PanelDescriptor {
3
+ node: HTMLDivElement;
4
+ title?: string;
5
+ }
6
+ /** Contexte d'un Scrollable, expose les méthodes associées. */
7
+ export declare const ScrollableContext: import("react").Context<{
8
+ /**
9
+ * Retourne la status du header.
10
+ * @returns La taille du header et s'il est sticky ou non.
11
+ */
12
+ getHeaderStatus(): {
13
+ sticky: boolean;
14
+ height: number;
15
+ };
16
+ /**
17
+ * Affiche un élement dans le menu sticky du Scrollable
18
+ * @param node Le noeud React.
19
+ * @param parentNode Noeud à suivre pour positionner l'élément sticky.
20
+ * @param retractable Menu rétractable.
21
+ * @returns Le Portal associé.
22
+ */
23
+ menu(node: JSX.Element, parentNode: HTMLElement | null, retractable: boolean): ReactPortal | null;
24
+ /**
25
+ * Affiche un élement dans le Scrollable.
26
+ * @param node Le noeud React.
27
+ * @returns Le Portal associé.
28
+ */
29
+ portal(node: JSX.Element): ReactPortal;
30
+ /**
31
+ * Enregistre le header dans le Scrollable
32
+ * @param nonStickyElement Le noeud DOM représentant le header non sticky.
33
+ * @param canDeploy Précise si le header est toujours sticky ou non.
34
+ * @returns Le disposer.
35
+ */
36
+ registerHeader(nonStickyElement: HTMLElement, canDeploy: boolean): () => void;
37
+ /**
38
+ * Set les props du header du Scrollable.
39
+ * @param headerProps Les props du header.
40
+ * @returns Le disposer.
41
+ */
42
+ registerHeaderProps(headerProps: HTMLProps<HTMLElement>): void;
43
+ /**
44
+ * Enregistre un observateur d'intersection avec le viewport du Scrollable.
45
+ * @param node Le noeud DOM à observer.
46
+ * @param onIntersect Le callback à appeler lors d'une intersection.
47
+ * @returns Le disposer.
48
+ */
49
+ registerIntersect(node: HTMLElement, onIntersect: (ratio: number, isIntersecting: boolean) => void): () => void;
50
+ /**
51
+ * Scrolle vers la position demandée.
52
+ * @param options Options.
53
+ */
54
+ scrollTo(options?: ScrollToOptions): void;
55
+ }>;
56
+ /** Contexte d'un ScrollspyContainer, expose les méthodes associées. */
57
+ export declare const ScrollspyContext: import("react").Context<{
58
+ /**
59
+ * Enregistre un panel dans le Scrollspu
60
+ * @param name L'id du panel souhaité.
61
+ * @param panel La description d'un panel
62
+ */
63
+ registerPanel(name: string, panel: PanelDescriptor): (() => void) | undefined;
64
+ }>;
@@ -1,2 +1,2 @@
1
- import "./colors.css";
2
- import "./variables.css";
1
+ import "./colors.css";
2
+ import "./variables.css";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@focus4/styling",
3
- "version": "11.7.0",
3
+ "version": "11.7.4",
4
4
  "description": "Focus v4, styling module",
5
5
  "main": "lib/focus4.styling.js",
6
6
  "repository": {
@@ -18,7 +18,7 @@
18
18
  "test-ci": "jest --ci --reporters=default --reporters=jest-junit"
19
19
  },
20
20
  "dependencies": {
21
- "@focus4/core": "11.7.0",
21
+ "@focus4/core": "11.7.4",
22
22
  "@types/react-dom": "18.0.11",
23
23
  "classnames": "2.3.2",
24
24
  "mobx-react": "7.6.0",
@@ -26,10 +26,10 @@
26
26
  "react-dom": "18.2.0"
27
27
  },
28
28
  "devDependencies": {
29
- "@types/jest": "29.4.0",
30
- "jest": "29.4.3",
31
- "jest-junit": "15.0.0",
32
- "ts-jest": "29.0.5"
29
+ "@types/jest": "29.5.0",
30
+ "jest": "29.5.0",
31
+ "jest-junit": "16.0.0",
32
+ "ts-jest": "29.1.0"
33
33
  },
34
- "gitHead": "81ad480399cc1cc9c6c57107efe5baa480f51187"
34
+ "gitHead": "a89449186e398da97cba6b3240e8255a7866d260"
35
35
  }