@focus4/styling 11.10.2 → 11.11.0-rc.0
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.
package/lib/focus4.styling.css
CHANGED
|
@@ -274,8 +274,6 @@
|
|
|
274
274
|
|
|
275
275
|
--color-black: 0, 0, 0;
|
|
276
276
|
--color-white: 255, 255, 255;
|
|
277
|
-
--color-dark-contrast: var(--color-white);
|
|
278
|
-
--color-light-contrast: var(--color-black);
|
|
279
277
|
}
|
|
280
278
|
|
|
281
279
|
:root {
|
|
@@ -285,11 +283,10 @@
|
|
|
285
283
|
--color-text-secondary: var(--palette-grey-600);
|
|
286
284
|
|
|
287
285
|
--color-primary: var(--palette-indigo-500);
|
|
286
|
+
--color-primary-light: var(--palette-indigo-100);
|
|
288
287
|
--color-primary-dark: var(--palette-indigo-700);
|
|
288
|
+
--color-primary-contrast: var(--color-white);
|
|
289
289
|
--color-accent: var(--palette-pink-a200);
|
|
290
|
-
--color-accent-dark: var(--palette-pink-700);
|
|
291
|
-
--color-primary-contrast: var(--color-dark-contrast);
|
|
292
|
-
--color-accent-contrast: var(--color-dark-contrast);
|
|
293
290
|
|
|
294
291
|
--unit: 10px;
|
|
295
292
|
|
|
@@ -307,6 +304,7 @@
|
|
|
307
304
|
--zdepth-shadow-5: 0 19px 60px rgba(0, 0, 0, 0.3), 0 15px 20px rgba(0, 0, 0, 0.22);
|
|
308
305
|
|
|
309
306
|
--animation-duration: 0.35s;
|
|
307
|
+
--animation-duration-short: 0.2s;
|
|
310
308
|
--animation-delay: calc(var(--animation-duration) / 5);
|
|
311
309
|
|
|
312
310
|
--animation-curve-fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
|
|
@@ -325,6 +323,9 @@
|
|
|
325
323
|
|
|
326
324
|
--color-white: 11, 11, 11;
|
|
327
325
|
--color-black: 238, 238, 238;
|
|
326
|
+
--color-primary: var(--palette-indigo-300);
|
|
327
|
+
--color-primary-light: var(--palette-indigo-800);
|
|
328
|
+
--color-primary-dark: var(--palette-indigo-100);
|
|
328
329
|
|
|
329
330
|
--palette-grey-50: 22, 22, 22;
|
|
330
331
|
--palette-grey-100: 33, 33, 33;
|
|
@@ -352,12 +353,6 @@ body {
|
|
|
352
353
|
animation-timing-function: var(--animation-curve-default);
|
|
353
354
|
}
|
|
354
355
|
|
|
355
|
-
fieldset {
|
|
356
|
-
border: 0;
|
|
357
|
-
margin: 0;
|
|
358
|
-
padding: 0;
|
|
359
|
-
}
|
|
360
|
-
|
|
361
356
|
textarea {
|
|
362
357
|
resize: vertical;
|
|
363
358
|
}
|
package/lib/focus4.styling.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import "./variables";
|
|
2
2
|
import "./global.css";
|
|
3
|
-
export { PanelDescriptor, ScrollableContext, ScrollspyContext, colorScheme, cssTransitionProps, getDefaultTransition, getIcon, initColorScheme,
|
|
3
|
+
export { PanelDescriptor, ScrollableContext, ScrollspyContext, colorScheme, cssTransitionProps, getDefaultTransition, getIcon, initColorScheme, getSpringTransition } from "./utils";
|
|
4
4
|
export { CSSContext, CSSElement, CSSMod, CSSProp, CSSToStrings, ThemeContext, ToBem, fromBem, themr, toBem, useTheme } from "./theme";
|
package/lib/focus4.styling.js
CHANGED
|
@@ -24,13 +24,13 @@ function getDefaultTransition() {
|
|
|
24
24
|
ease
|
|
25
25
|
};
|
|
26
26
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
}
|
|
27
|
+
function getSpringTransition() {
|
|
28
|
+
return {
|
|
29
|
+
type: "spring",
|
|
30
|
+
bounce: 0,
|
|
31
|
+
duration: get().duration / 1000
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
34
|
function cssTransitionProps({ enter, enterActive, exit, exitActive }) {
|
|
35
35
|
const { delay, duration } = get();
|
|
36
36
|
return {
|
|
@@ -161,5 +161,5 @@ function themr(name, localTheme) {
|
|
|
161
161
|
return TC;
|
|
162
162
|
}
|
|
163
163
|
|
|
164
|
-
export { ScrollableContext, ScrollspyContext, ThemeContext, colorScheme, cssTransitionProps, fromBem, getDefaultTransition, getIcon,
|
|
164
|
+
export { ScrollableContext, ScrollspyContext, ThemeContext, colorScheme, cssTransitionProps, fromBem, getDefaultTransition, getIcon, getSpringTransition, initColorScheme, themr, toBem, useTheme };
|
|
165
165
|
//# sourceMappingURL=focus4.styling.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus4.styling.js","sources":["../src/utils/animation.ts","../src/utils/get-icon.tsx","../src/utils/color-scheme.ts","../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(\"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 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 {autorun, observable} from \"mobx\";\r\n\r\nexport const colorScheme = observable({dark: false});\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, 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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"}
|
|
1
|
+
{"version":3,"file":"focus4.styling.js","sources":["../src/utils/animation.ts","../src/utils/get-icon.tsx","../src/utils/color-scheme.ts","../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 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\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(\"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 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 {autorun, observable} from \"mobx\";\r\n\r\nexport const colorScheme = observable({dark: false});\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, 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/utils/animation.d.ts
CHANGED
|
@@ -3,12 +3,10 @@ export declare function getDefaultTransition(): {
|
|
|
3
3
|
readonly duration: number;
|
|
4
4
|
readonly ease: number[] | undefined;
|
|
5
5
|
};
|
|
6
|
-
export declare
|
|
6
|
+
export declare function getSpringTransition(): {
|
|
7
7
|
readonly type: "spring";
|
|
8
|
-
readonly
|
|
9
|
-
readonly
|
|
10
|
-
readonly restDelta: 1;
|
|
11
|
-
readonly restSpeed: 1000;
|
|
8
|
+
readonly bounce: 0;
|
|
9
|
+
readonly duration: number;
|
|
12
10
|
};
|
|
13
11
|
export declare function cssTransitionProps({ enter, enterActive, exit, exitActive }: {
|
|
14
12
|
enter: string;
|
package/lib/utils/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { cssTransitionProps, getDefaultTransition,
|
|
1
|
+
export { cssTransitionProps, getDefaultTransition, getSpringTransition } from "./animation";
|
|
2
2
|
export { getIcon } from "./get-icon";
|
|
3
3
|
export { colorScheme, initColorScheme } from "./color-scheme";
|
|
4
4
|
export { PanelDescriptor, ScrollableContext, ScrollspyContext } from "./scroll-contexts";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@focus4/styling",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.11.0-rc.0",
|
|
4
4
|
"description": "Focus v4, styling module",
|
|
5
5
|
"main": "lib/focus4.styling.js",
|
|
6
6
|
"repository": {
|
|
@@ -18,18 +18,18 @@
|
|
|
18
18
|
"test-ci": "jest --ci --reporters=default --reporters=jest-junit"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@focus4/core": "11.
|
|
22
|
-
"@types/react-dom": "18.2.
|
|
21
|
+
"@focus4/core": "11.11.0-beta.0",
|
|
22
|
+
"@types/react-dom": "18.2.14",
|
|
23
23
|
"classnames": "2.3.2",
|
|
24
24
|
"mobx-react": "7.6.0",
|
|
25
25
|
"react": "18.2.0",
|
|
26
26
|
"react-dom": "18.2.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@types/jest": "29.5.
|
|
29
|
+
"@types/jest": "29.5.6",
|
|
30
30
|
"jest": "29.7.0",
|
|
31
31
|
"jest-junit": "16.0.0",
|
|
32
32
|
"ts-jest": "29.1.1"
|
|
33
33
|
},
|
|
34
|
-
"gitHead": "
|
|
34
|
+
"gitHead": "4e2950c9f2910fffe04ab1e67443d8bf05da1086"
|
|
35
35
|
}
|