@contember/react-utils 1.2.0-beta.3 → 1.2.0-rc.1
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/dist/development/context/createOptionalContextFactory.js +13 -0
- package/dist/development/context/createOptionalContextFactory.js.map +1 -0
- package/dist/development/debug-context/Context.js +3 -3
- package/dist/development/debug-context/Context.js.map +1 -1
- package/dist/development/hooks/useAddClassNameDuringResize.js +3 -0
- package/dist/development/hooks/useAddClassNameDuringResize.js.map +1 -1
- package/dist/development/hooks/useContainerWidth.js +14 -0
- package/dist/development/hooks/useContainerWidth.js.map +1 -0
- package/dist/development/hooks/useDocumentTitle.js +22 -0
- package/dist/development/hooks/useDocumentTitle.js.map +1 -0
- package/dist/development/hooks/useExpectSameValueReference.js +7 -4
- package/dist/development/hooks/useExpectSameValueReference.js.map +1 -1
- package/dist/development/index.js +23 -0
- package/dist/development/index.js.map +1 -1
- package/dist/development/theming/ColorSchemeProvider.js +18 -0
- package/dist/development/theming/ColorSchemeProvider.js.map +1 -0
- package/dist/development/theming/GlobalClassNamePrefixContext.js +6 -0
- package/dist/development/theming/GlobalClassNamePrefixContext.js.map +1 -0
- package/dist/development/theming/contexts.js +12 -0
- package/dist/development/theming/contexts.js.map +1 -0
- package/dist/development/theming/useClassName.js +17 -0
- package/dist/development/theming/useClassName.js.map +1 -0
- package/dist/development/theming/useClassNameFactory.js +20 -0
- package/dist/development/theming/useClassNameFactory.js.map +1 -0
- package/dist/development/theming/useThemedClassName.js +17 -0
- package/dist/development/theming/useThemedClassName.js.map +1 -0
- package/dist/development/theming/useThemedClassNameFactory.js +27 -0
- package/dist/development/theming/useThemedClassNameFactory.js.map +1 -0
- package/dist/production/context/createOptionalContextFactory.js +13 -0
- package/dist/production/context/createOptionalContextFactory.js.map +1 -0
- package/dist/production/debug-context/Context.js +3 -3
- package/dist/production/debug-context/Context.js.map +1 -1
- package/dist/production/hooks/useAddClassNameDuringResize.js +3 -0
- package/dist/production/hooks/useAddClassNameDuringResize.js.map +1 -1
- package/dist/production/hooks/useContainerWidth.js +14 -0
- package/dist/production/hooks/useContainerWidth.js.map +1 -0
- package/dist/production/hooks/useDocumentTitle.js +22 -0
- package/dist/production/hooks/useDocumentTitle.js.map +1 -0
- package/dist/production/hooks/useExpectSameValueReference.js.map +1 -1
- package/dist/production/index.js +23 -0
- package/dist/production/index.js.map +1 -1
- package/dist/production/theming/ColorSchemeProvider.js +14 -0
- package/dist/production/theming/ColorSchemeProvider.js.map +1 -0
- package/dist/production/theming/GlobalClassNamePrefixContext.js +6 -0
- package/dist/production/theming/GlobalClassNamePrefixContext.js.map +1 -0
- package/dist/production/theming/contexts.js +12 -0
- package/dist/production/theming/contexts.js.map +1 -0
- package/dist/production/theming/useClassName.js +17 -0
- package/dist/production/theming/useClassName.js.map +1 -0
- package/dist/production/theming/useClassNameFactory.js +20 -0
- package/dist/production/theming/useClassNameFactory.js.map +1 -0
- package/dist/production/theming/useThemedClassName.js +17 -0
- package/dist/production/theming/useThemedClassName.js.map +1 -0
- package/dist/production/theming/useThemedClassNameFactory.js +27 -0
- package/dist/production/theming/useThemedClassNameFactory.js.map +1 -0
- package/dist/types/context/createOptionalContextFactory.d.ts +3 -0
- package/dist/types/context/createOptionalContextFactory.d.ts.map +1 -0
- package/dist/types/context/index.d.ts +1 -0
- package/dist/types/context/index.d.ts.map +1 -1
- package/dist/types/debug-context/Context.d.ts +2 -2
- package/dist/types/debug-context/Context.d.ts.map +1 -1
- package/dist/types/hooks/index.d.ts +2 -0
- package/dist/types/hooks/index.d.ts.map +1 -1
- package/dist/types/hooks/useAddClassNameDuringResize.d.ts.map +1 -1
- package/dist/types/hooks/useContainerWidth.d.ts +4 -0
- package/dist/types/hooks/useContainerWidth.d.ts.map +1 -0
- package/dist/types/hooks/useDocumentTitle.d.ts +2 -0
- package/dist/types/hooks/useDocumentTitle.d.ts.map +1 -0
- package/dist/types/hooks/useExpectSameValueReference.d.ts +22 -0
- package/dist/types/hooks/useExpectSameValueReference.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/theming/ColorSchemeProvider.d.ts +7 -0
- package/dist/types/theming/ColorSchemeProvider.d.ts.map +1 -0
- package/dist/types/theming/GlobalClassNamePrefixContext.d.ts +2 -0
- package/dist/types/theming/GlobalClassNamePrefixContext.d.ts.map +1 -0
- package/dist/types/theming/contexts.d.ts +12 -0
- package/dist/types/theming/contexts.d.ts.map +1 -0
- package/dist/types/theming/index.d.ts +8 -0
- package/dist/types/theming/index.d.ts.map +1 -0
- package/dist/types/theming/useClassName.d.ts +11 -0
- package/dist/types/theming/useClassName.d.ts.map +1 -0
- package/dist/types/theming/useClassNameFactory.d.ts +17 -0
- package/dist/types/theming/useClassNameFactory.d.ts.map +1 -0
- package/dist/types/theming/useThemedClassName.d.ts +39 -0
- package/dist/types/theming/useThemedClassName.d.ts.map +1 -0
- package/dist/types/theming/useThemedClassNameFactory.d.ts +3 -0
- package/dist/types/theming/useThemedClassNameFactory.d.ts.map +1 -0
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/context/createOptionalContextFactory.ts +13 -0
- package/src/context/index.ts +1 -0
- package/src/debug-context/Context.tsx +5 -5
- package/src/hooks/index.ts +2 -0
- package/src/hooks/useAddClassNameDuringResize.ts +4 -0
- package/src/hooks/useContainerWidth.ts +13 -0
- package/src/hooks/useDocumentTitle.ts +21 -0
- package/src/hooks/useExpectSameValueReference.ts +27 -2
- package/src/index.ts +1 -0
- package/src/theming/ColorSchemeProvider.tsx +19 -0
- package/src/theming/GlobalClassNamePrefixContext.ts +3 -0
- package/src/theming/contexts.ts +18 -0
- package/src/theming/index.ts +7 -0
- package/src/theming/useClassName.ts +28 -0
- package/src/theming/useClassNameFactory.ts +47 -0
- package/src/theming/useThemedClassName.ts +54 -0
- package/src/theming/useThemedClassNameFactory.ts +41 -0
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
function createOptionalContextFactory(name, initialValue) {
|
|
3
|
+
const OptionalContext = createContext(initialValue);
|
|
4
|
+
OptionalContext.displayName = name;
|
|
5
|
+
const useOptionalContext = () => {
|
|
6
|
+
return useContext(OptionalContext) ?? initialValue;
|
|
7
|
+
};
|
|
8
|
+
return [OptionalContext, useOptionalContext];
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
createOptionalContextFactory
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=createOptionalContextFactory.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createOptionalContextFactory.js","sources":["../../../src/context/createOptionalContextFactory.ts"],"sourcesContent":["import type { Context } from 'react'\nimport { createContext, useContext } from 'react'\n\nexport function createOptionalContextFactory<T>(name: string, initialValue: T): [Context<T>, () => T] {\n const OptionalContext = createContext<T>(initialValue)\n OptionalContext.displayName = name\n\n const useOptionalContext = () => {\n return useContext(OptionalContext) ?? initialValue\n }\n\n return [OptionalContext, useOptionalContext]\n}\n"],"names":[],"mappings":";AAGgB,SAAA,6BAAgC,MAAc,cAAwC;AAC9F,QAAA,kBAAkB,cAAiB,YAAY;AACrD,kBAAgB,cAAc;AAE9B,QAAM,qBAAqB,MAAM;AACxB,WAAA,WAAW,eAAe,KAAK;AAAA,EAAA;AAGjC,SAAA,CAAC,iBAAiB,kBAAkB;AAC7C;"}
|
|
@@ -39,16 +39,16 @@ ScopedConsoleContext.displayName = "ScopedConsoleContext";
|
|
|
39
39
|
function parentScopedConsoleOrNone(parentConsole) {
|
|
40
40
|
return isNoopScopedConsole(parentConsole) ? void 0 : parentConsole;
|
|
41
41
|
}
|
|
42
|
-
const useScopedConsoleRef = (prefix) => {
|
|
42
|
+
const useScopedConsoleRef = (prefix, override) => {
|
|
43
43
|
assert("prefix is non-empty string", prefix, isNonEmptyString);
|
|
44
44
|
const parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext));
|
|
45
45
|
const scopedConsole = useMemo(() => {
|
|
46
|
-
if (parentConsole) {
|
|
46
|
+
if (override !== false && (parentConsole || override)) {
|
|
47
47
|
return createPrefixedConsole(prefix, parentConsole);
|
|
48
48
|
} else {
|
|
49
49
|
return noopScopedConsole;
|
|
50
50
|
}
|
|
51
|
-
}, [parentConsole, prefix]);
|
|
51
|
+
}, [override, parentConsole, prefix]);
|
|
52
52
|
const ref = useRef(scopedConsole);
|
|
53
53
|
ref.current = scopedConsole;
|
|
54
54
|
return ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Context.js","sources":["../../../src/debug-context/Context.tsx"],"sourcesContent":["import { assert, isNonEmptyString } from '@contember/utilities'\nimport { ReactNode, createContext, memo, useContext, useMemo, useRef } from 'react'\nimport { isNoopScopedConsole, noopScopedConsole } from './Constants'\nimport { ScopedConsoleContextType } from './Types'\n\nfunction createPrefixedConsole(message: string, prefixedConsole?: ScopedConsoleContextType): ScopedConsoleContextType {\n\treturn {\n\t\terror: function error(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).error(message, ...parameters)\n\t\t},\n\t\terrored: function errored<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).error(message, value)\n\t\t\treturn value\n\t\t},\n\t\tlog: function log(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).log(message, ...parameters)\n\t\t},\n\t\tlogged: function logged<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).log(message, value)\n\t\t\treturn value\n\t\t},\n\t\ttrace: function trace(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).trace(message, ...parameters)\n\t\t},\n\t\ttraced: function traced<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).trace(message, value)\n\t\t\treturn value\n\t\t},\n\t\twarn: function warn(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).warn(message, ...parameters)\n\t\t},\n\t\twarned: function warned<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).warn(message, value)\n\t\t\treturn value\n\t\t},\n\t}\n}\n\nexport const ScopedConsoleContext = createContext<ScopedConsoleContextType>(null!)\nScopedConsoleContext.displayName = 'ScopedConsoleContext'\n\nfunction parentScopedConsoleOrNone(parentConsole: ScopedConsoleContextType): ScopedConsoleContextType | undefined {\n\treturn isNoopScopedConsole(parentConsole) ? undefined : parentConsole\n}\n\nexport const useScopedConsoleRef = (prefix: string) => {\n\tassert('prefix is non-empty string', prefix, isNonEmptyString)\n\n\tconst parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext))\n\n\tconst scopedConsole = useMemo(() => {\n\t\tif (parentConsole) {\n\t\t\treturn createPrefixedConsole(prefix, parentConsole)\n\t\t} else {\n\t\t\treturn noopScopedConsole\n\t\t}\n\t}, [parentConsole, prefix])\n\n\tconst ref = useRef(scopedConsole)\n\tref.current = scopedConsole\n\n\treturn ref\n}\n\nexport type DebugChildrenProps =\n\t| { active
|
|
1
|
+
{"version":3,"file":"Context.js","sources":["../../../src/debug-context/Context.tsx"],"sourcesContent":["import { assert, isNonEmptyString } from '@contember/utilities'\nimport { ReactNode, createContext, memo, useContext, useMemo, useRef } from 'react'\nimport { isNoopScopedConsole, noopScopedConsole } from './Constants'\nimport { ScopedConsoleContextType } from './Types'\n\nfunction createPrefixedConsole(message: string, prefixedConsole?: ScopedConsoleContextType): ScopedConsoleContextType {\n\treturn {\n\t\terror: function error(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).error(message, ...parameters)\n\t\t},\n\t\terrored: function errored<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).error(message, value)\n\t\t\treturn value\n\t\t},\n\t\tlog: function log(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).log(message, ...parameters)\n\t\t},\n\t\tlogged: function logged<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).log(message, value)\n\t\t\treturn value\n\t\t},\n\t\ttrace: function trace(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).trace(message, ...parameters)\n\t\t},\n\t\ttraced: function traced<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).trace(message, value)\n\t\t\treturn value\n\t\t},\n\t\twarn: function warn(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).warn(message, ...parameters)\n\t\t},\n\t\twarned: function warned<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).warn(message, value)\n\t\t\treturn value\n\t\t},\n\t}\n}\n\nexport const ScopedConsoleContext = createContext<ScopedConsoleContextType>(null!)\nScopedConsoleContext.displayName = 'ScopedConsoleContext'\n\nfunction parentScopedConsoleOrNone(parentConsole: ScopedConsoleContextType): ScopedConsoleContextType | undefined {\n\treturn isNoopScopedConsole(parentConsole) ? undefined : parentConsole\n}\n\nexport const useScopedConsoleRef = (prefix: string, override?: boolean) => {\n\tassert('prefix is non-empty string', prefix, isNonEmptyString)\n\n\tconst parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext))\n\n\tconst scopedConsole = useMemo(() => {\n\t\tif (override !== false && (parentConsole || override)) {\n\t\t\treturn createPrefixedConsole(prefix, parentConsole)\n\t\t} else {\n\t\t\treturn noopScopedConsole\n\t\t}\n\t}, [override, parentConsole, prefix])\n\n\tconst ref = useRef(scopedConsole)\n\tref.current = scopedConsole\n\n\treturn ref\n}\n\nexport type DebugChildrenProps =\n\t| { active?: true; children: ReactNode; id: string }\n\t| { active?: false; children: ReactNode; id?: string }\n\nexport const DebugChildren = memo<DebugChildrenProps>(({ active = true, children, id }) => {\n\tconst parentScopedConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext))\n\n\tconst console = active && id\n\t\t? createPrefixedConsole(id, parentScopedConsole)\n\t\t: noopScopedConsole\n\n\treturn (\n\t\t<ScopedConsoleContext.Provider value={active ? console : noopScopedConsole}>\n\t\t\t{children}\n\t\t</ScopedConsoleContext.Provider>\n\t)\n})\nDebugChildren.displayName = 'DebugChildren'\n"],"names":["message","console","this"],"mappings":";;;;AAKA,SAAS,sBAAsB,SAAiB,iBAAsE;AAC9G,SAAA;AAAA,IACN,OAAO,SAAS,SAAS,YAAmB;AAC3C,OAAC,mBAAmB,SAAS,MAAM,SAAS,GAAG,UAAU;AAAA,IAC1D;AAAA,IACA,SAAS,SAAS,QAAWA,UAAiB,OAAa;AAC1D,OAAC,mBAAmB,SAAS,MAAMA,UAAS,KAAK;AAC1C,aAAA;AAAA,IACR;AAAA,IACA,KAAK,SAAS,OAAO,YAAmB;AACvC,OAAC,mBAAmB,SAAS,IAAI,SAAS,GAAG,UAAU;AAAA,IACxD;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,IAAIA,UAAS,KAAK;AACxC,aAAA;AAAA,IACR;AAAA,IACA,OAAO,SAAS,SAAS,YAAmB;AAC3C,OAAC,mBAAmB,SAAS,MAAM,SAAS,GAAG,UAAU;AAAA,IAC1D;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,MAAMA,UAAS,KAAK;AAC1C,aAAA;AAAA,IACR;AAAA,IACA,MAAM,SAAS,QAAQ,YAAmB;AACzC,OAAC,mBAAmB,SAAS,KAAK,SAAS,GAAG,UAAU;AAAA,IACzD;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,KAAKA,UAAS,KAAK;AACzC,aAAA;AAAA,IACR;AAAA,EAAA;AAEF;AAEa,MAAA,uBAAuB,cAAwC,IAAK;AACjF,qBAAqB,cAAc;AAEnC,SAAS,0BAA0B,eAA+E;AAC1G,SAAA,oBAAoB,aAAa,IAAI,SAAY;AACzD;AAEa,MAAA,sBAAsB,CAAC,QAAgB,aAAuB;AACnE,SAAA,8BAA8B,QAAQ,gBAAgB;AAE7D,QAAM,gBAAgB,0BAA0B,WAAW,oBAAoB,CAAC;AAE1E,QAAA,gBAAgB,QAAQ,MAAM;AAC/B,QAAA,aAAa,UAAU,iBAAiB,WAAW;AAC/C,aAAA,sBAAsB,QAAQ,aAAa;AAAA,IAAA,OAC5C;AACC,aAAA;AAAA,IACR;AAAA,EACE,GAAA,CAAC,UAAU,eAAe,MAAM,CAAC;AAE9B,QAAA,MAAM,OAAO,aAAa;AAChC,MAAI,UAAU;AAEP,SAAA;AACR;AAMa,MAAA,gBAAgB,KAAyB,CAAC,EAAE,SAAS,MAAM,UAAU,SAAS;AAC1F,QAAM,sBAAsB,0BAA0B,WAAW,oBAAoB,CAAC;AAEtF,QAAMC,WAAU,UAAU,KACvB,sBAAsB,IAAI,mBAAmB,IAC7C;AAGF,SAAA,uBAAC,qBAAqB,UAArB,EAA8B,OAAO,SAASA,WAAU,mBACvD,SADF,GAAA,QAAA,OAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAEA,GAAAC,UAAA;AAEF,CAAC;AACD,cAAc,cAAc;"}
|
|
@@ -24,6 +24,9 @@ function useAddClassNameDuringResize(className, timeoutToRestore = 300, element)
|
|
|
24
24
|
timeoutID.current = setTimeout(() => {
|
|
25
25
|
addClassName(className, element ?? document.body);
|
|
26
26
|
}, timeoutToRestore);
|
|
27
|
+
return () => {
|
|
28
|
+
clearTimeout(timeoutID.current);
|
|
29
|
+
};
|
|
27
30
|
});
|
|
28
31
|
useLayoutEffect(addTemporaryClassName, [addTemporaryClassName]);
|
|
29
32
|
useOnWindowResize(addTemporaryClassName);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAddClassNameDuringResize.js","sources":["../../../src/hooks/useAddClassNameDuringResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nfunction intendedFlushOfCSSChangesToCauseImmediateReflow(element: HTMLElement) {\n\telement.offsetHeight\n}\n\nfunction addClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (element.classList.contains(className)) {\n\t\telement.classList.remove(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\nfunction removeClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (!element.classList.contains(className)) {\n\t\telement.classList.add(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\n/**\n * Adds CSS class during resize event to element\n *\n * - Falls back to document.body when no element is specified\n * - Adds CSS class to element also on the initial load\n * - Uses element.classList directly\n *\n * @param className - CSS class to apply during the resize event\n * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class\n * @param element - Optional HTML element to apply CSS class to\n */\nexport function useAddClassNameDuringResize(\n\tclassName: string,\n\ttimeoutToRestore: number = 300,\n\telement?: HTMLElement,\n) {\n\tconst timeoutID = useRef<number>()\n\n\tconst addTemporaryClassName = useReferentiallyStableCallback(() => {\n\t\tclearTimeout(timeoutID.current)\n\t\tremoveClassName(className, element ?? document.body)\n\n\t\ttimeoutID.current = setTimeout(() => {\n\t\t\taddClassName(className, element ?? document.body)\n\t\t}, timeoutToRestore)\n\t})\n\n\tuseLayoutEffect(addTemporaryClassName, [addTemporaryClassName])\n\tuseOnWindowResize(addTemporaryClassName)\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,gDAAgD,SAAsB;AACtE,UAAA;AACT;AAEA,SAAS,aACR,WACA,SACC;AACD,MAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AAClC,YAAA,UAAU,OAAO,SAAS;AAClC,oDAAgD,OAAO;AAAA,EACxD;AACD;AAEA,SAAS,gBACR,WACA,SACC;AACD,MAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,GAAG;AACnC,YAAA,UAAU,IAAI,SAAS;AAC/B,oDAAgD,OAAO;AAAA,EACxD;AACD;AAaO,SAAS,4BACf,WACA,mBAA2B,KAC3B,SACC;AACD,QAAM,YAAY;AAEZ,QAAA,wBAAwB,+BAA+B,MAAM;AAClE,iBAAa,UAAU,OAAO;AACd,oBAAA,WAAW,WAAW,SAAS,IAAI;AAEzC,cAAA,UAAU,WAAW,MAAM;AACvB,mBAAA,WAAW,WAAW,SAAS,IAAI;AAAA,OAC9C,gBAAgB;AAAA,
|
|
1
|
+
{"version":3,"file":"useAddClassNameDuringResize.js","sources":["../../../src/hooks/useAddClassNameDuringResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nfunction intendedFlushOfCSSChangesToCauseImmediateReflow(element: HTMLElement) {\n\telement.offsetHeight\n}\n\nfunction addClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (element.classList.contains(className)) {\n\t\telement.classList.remove(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\nfunction removeClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (!element.classList.contains(className)) {\n\t\telement.classList.add(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\n/**\n * Adds CSS class during resize event to element\n *\n * - Falls back to document.body when no element is specified\n * - Adds CSS class to element also on the initial load\n * - Uses element.classList directly\n *\n * @param className - CSS class to apply during the resize event\n * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class\n * @param element - Optional HTML element to apply CSS class to\n */\nexport function useAddClassNameDuringResize(\n\tclassName: string,\n\ttimeoutToRestore: number = 300,\n\telement?: HTMLElement,\n) {\n\tconst timeoutID = useRef<number>()\n\n\tconst addTemporaryClassName = useReferentiallyStableCallback(() => {\n\t\tclearTimeout(timeoutID.current)\n\t\tremoveClassName(className, element ?? document.body)\n\n\t\ttimeoutID.current = setTimeout(() => {\n\t\t\taddClassName(className, element ?? document.body)\n\t\t}, timeoutToRestore)\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutID.current)\n\t\t}\n\t})\n\n\tuseLayoutEffect(addTemporaryClassName, [addTemporaryClassName])\n\tuseOnWindowResize(addTemporaryClassName)\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,gDAAgD,SAAsB;AACtE,UAAA;AACT;AAEA,SAAS,aACR,WACA,SACC;AACD,MAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AAClC,YAAA,UAAU,OAAO,SAAS;AAClC,oDAAgD,OAAO;AAAA,EACxD;AACD;AAEA,SAAS,gBACR,WACA,SACC;AACD,MAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,GAAG;AACnC,YAAA,UAAU,IAAI,SAAS;AAC/B,oDAAgD,OAAO;AAAA,EACxD;AACD;AAaO,SAAS,4BACf,WACA,mBAA2B,KAC3B,SACC;AACD,QAAM,YAAY;AAEZ,QAAA,wBAAwB,+BAA+B,MAAM;AAClE,iBAAa,UAAU,OAAO;AACd,oBAAA,WAAW,WAAW,SAAS,IAAI;AAEzC,cAAA,UAAU,WAAW,MAAM;AACvB,mBAAA,WAAW,WAAW,SAAS,IAAI;AAAA,OAC9C,gBAAgB;AAEnB,WAAO,MAAM;AACZ,mBAAa,UAAU,OAAO;AAAA,IAAA;AAAA,EAC/B,CACA;AAEe,kBAAA,uBAAuB,CAAC,qBAAqB,CAAC;AAC9D,oBAAkB,qBAAqB;AACxC;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
import { useWindowSize } from "./useWindowSize.js";
|
|
3
|
+
const ContainerWidthContext = createContext(null);
|
|
4
|
+
ContainerWidthContext.displayName = "ContainerWidthContext";
|
|
5
|
+
function useContainerWidth() {
|
|
6
|
+
const maybeContainerWidth = useContext(ContainerWidthContext);
|
|
7
|
+
const { width: windowWidth } = useWindowSize();
|
|
8
|
+
return maybeContainerWidth ?? windowWidth;
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
ContainerWidthContext,
|
|
12
|
+
useContainerWidth
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=useContainerWidth.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useContainerWidth.js","sources":["../../../src/hooks/useContainerWidth.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { useWindowSize } from './useWindowSize'\n\nexport type ContainerWidthContextType = number\nexport const ContainerWidthContext = createContext<ContainerWidthContextType | null>(null)\nContainerWidthContext.displayName = 'ContainerWidthContext'\n\nexport function useContainerWidth(): number {\n\tconst maybeContainerWidth = useContext(ContainerWidthContext)\n\tconst { width: windowWidth } = useWindowSize()\n\n\treturn maybeContainerWidth ?? windowWidth\n}\n"],"names":[],"mappings":";;AAIa,MAAA,wBAAwB,cAAgD,IAAI;AACzF,sBAAsB,cAAc;AAE7B,SAAS,oBAA4B;AACrC,QAAA,sBAAsB,WAAW,qBAAqB;AAC5D,QAAM,EAAE,OAAO,YAAY,IAAI,cAAc;AAE7C,SAAO,uBAAuB;AAC/B;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useRef, useEffect } from "react";
|
|
2
|
+
function useDocumentTitle(title, formatter) {
|
|
3
|
+
const initialTitle = useRef(document.title).current;
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
if (title) {
|
|
6
|
+
if (formatter) {
|
|
7
|
+
document.title = formatter(title, initialTitle);
|
|
8
|
+
} else {
|
|
9
|
+
document.title = title;
|
|
10
|
+
}
|
|
11
|
+
} else {
|
|
12
|
+
document.title = initialTitle;
|
|
13
|
+
}
|
|
14
|
+
return () => {
|
|
15
|
+
document.title = initialTitle;
|
|
16
|
+
};
|
|
17
|
+
}, [formatter, initialTitle, title]);
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
useDocumentTitle
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=useDocumentTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDocumentTitle.js","sources":["../../../src/hooks/useDocumentTitle.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport function useDocumentTitle(title: string | null | undefined, formatter?: (title: string, initialTitle: string) => string) {\n\tconst initialTitle = useRef(document.title).current\n\n\tuseEffect(() => {\n\t\tif (title) {\n\t\t\tif (formatter) {\n\t\t\t\tdocument.title = formatter(title, initialTitle)\n\t\t\t} else {\n\t\t\t\tdocument.title = title\n\t\t\t}\n\t\t} else {\n\t\t\tdocument.title = initialTitle\n\t\t}\n\n\t\treturn () => {\n\t\t\tdocument.title = initialTitle\n\t\t}\n\t}, [formatter, initialTitle, title])\n}\n"],"names":[],"mappings":";AAEgB,SAAA,iBAAiB,OAAkC,WAA6D;AAC/H,QAAM,eAAe,OAAO,SAAS,KAAK,EAAE;AAE5C,YAAU,MAAM;AACf,QAAI,OAAO;AACV,UAAI,WAAW;AACL,iBAAA,QAAQ,UAAU,OAAO,YAAY;AAAA,MAAA,OACxC;AACN,iBAAS,QAAQ;AAAA,MAClB;AAAA,IAAA,OACM;AACN,eAAS,QAAQ;AAAA,IAClB;AAEA,WAAO,MAAM;AACZ,eAAS,QAAQ;AAAA,IAAA;AAAA,EAEhB,GAAA,CAAC,WAAW,cAAc,KAAK,CAAC;AACpC;"}
|
|
@@ -4,10 +4,13 @@ function useExpectSameValueReference(next, shouldThrow = false) {
|
|
|
4
4
|
const previous = useRef(next);
|
|
5
5
|
if (next !== previous.current && typeof next === "object" && typeof previous.current === "object" && deepEqual(next, previous.current)) {
|
|
6
6
|
{
|
|
7
|
-
console.error(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
console.error(
|
|
8
|
+
"Previous and next values do not match in reference although match in value. Try declaring constants outside of the component scope. Otherwise try to memoize callbacks with useCallback, useReferentiallyStableCallback useEvent, useRef or useMemo.",
|
|
9
|
+
{
|
|
10
|
+
previous: previous.current,
|
|
11
|
+
next
|
|
12
|
+
}
|
|
13
|
+
);
|
|
11
14
|
}
|
|
12
15
|
if (shouldThrow) {
|
|
13
16
|
throw new Error("Expecting same reference for same values");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpectSameValueReference.js","sources":["../../../src/hooks/useExpectSameValueReference.ts"],"sourcesContent":["import deepEqual from 'deep-equal'\nimport { useRef } from 'react'\n\n
|
|
1
|
+
{"version":3,"file":"useExpectSameValueReference.js","sources":["../../../src/hooks/useExpectSameValueReference.ts"],"sourcesContent":["import deepEqual from 'deep-equal'\nimport { useRef } from 'react'\n\n/**\n * Checks whether the next value is the same reference as the previous one\n *\n * If not, it checks whether the values are deeply equal. If not, it logs an error.\n *\n * @param next - Value to be checked.\n * @param shouldThrow - If true, it throws an error instead of logging it. Defaults to false.\n * @returns void\n * -\n * @example\n * ```ts\n * useExpectSameValueReference(style)\n * ```\n * @example\n * ```ts\n * useExpectSameValueReference(style, true)\n * ```\n * @example\n * ```ts\n * useExpectSameValueReference(style, import.meta.env.DEV)\n * ```\n */\nexport function useExpectSameValueReference<T>(next: T, shouldThrow: boolean = false) {\n\tconst previous = useRef(next)\n\n\tif (next !== previous.current\n\t\t&& typeof next === 'object'\n\t\t&& typeof previous.current === 'object'\n\t\t&& deepEqual(next, previous.current)\n\t) {\n\t\tif (import.meta.env.DEV) {\n\t\t\tconsole.error(\n\t\t\t\t'Previous and next values do not match in reference although match in value. ' +\n\t\t\t\t'Try declaring constants outside of the component scope. ' +\n\t\t\t\t'Otherwise try to memoize callbacks with useCallback, ' +\n\t\t\t\t'useReferentiallyStableCallback useEvent, useRef or useMemo.', {\n\t\t\t\tprevious: previous.current,\n\t\t\t\tnext,\n\t\t\t})\n\t\t}\n\n\t\tif (shouldThrow) {\n\t\t\tthrow new Error('Expecting same reference for same values')\n\t\t}\n\t}\n\n\tprevious.current = next\n}\n"],"names":[],"mappings":";;AAyBgB,SAAA,4BAA+B,MAAS,cAAuB,OAAO;AAC/E,QAAA,WAAW,OAAO,IAAI;AAE5B,MAAI,SAAS,SAAS,WAClB,OAAO,SAAS,YAChB,OAAO,SAAS,YAAY,YAC5B,UAAU,MAAM,SAAS,OAAO,GAClC;AACwB;AAChB,cAAA;AAAA,QACP;AAAA,QAG+D;AAAA,UAC/D,UAAU,SAAS;AAAA,UACnB;AAAA,QACD;AAAA,MAAA;AAAA,IACD;AAEA,QAAI,aAAa;AACV,YAAA,IAAI,MAAM,0CAA0C;AAAA,IAC3D;AAAA,EACD;AAEA,WAAS,UAAU;AACpB;"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { createNonNullableContextFactory } from "./context/createNonNullableContextFactory.js";
|
|
2
|
+
import { createOptionalContextFactory } from "./context/createOptionalContextFactory.js";
|
|
2
3
|
import { isNoopScopedConsole, noopLog, noopLogged, noopScopedConsole } from "./debug-context/Constants.js";
|
|
3
4
|
import { DebugChildren, ScopedConsoleContext, useScopedConsoleRef } from "./debug-context/Context.js";
|
|
4
5
|
import { unwrapRefValue } from "./hooks/unwrapRefValue.js";
|
|
@@ -8,8 +9,10 @@ import { useArrayMapMemo } from "./hooks/useArrayMapMemo.js";
|
|
|
8
9
|
import { useComposeRef } from "./hooks/useComposeRef.js";
|
|
9
10
|
import { useConstantLengthInvariant } from "./hooks/useConstantLengthInvariant.js";
|
|
10
11
|
import { useConstantValueInvariant } from "./hooks/useConstantValueInvariant.js";
|
|
12
|
+
import { ContainerWidthContext, useContainerWidth } from "./hooks/useContainerWidth.js";
|
|
11
13
|
import { useDebounce } from "./hooks/useDebounce.js";
|
|
12
14
|
import { useDebounceCallback } from "./hooks/useDebounceCallback.js";
|
|
15
|
+
import { useDocumentTitle } from "./hooks/useDocumentTitle.js";
|
|
13
16
|
import { useElementSize } from "./hooks/useElementSize.js";
|
|
14
17
|
import { useEventHandler } from "./hooks/useEventHandler.js";
|
|
15
18
|
import { useExpectSameValueReference } from "./hooks/useExpectSameValueReference.js";
|
|
@@ -31,10 +34,23 @@ import { noop } from "./referentiallyStable/noop.js";
|
|
|
31
34
|
import { returnFalse } from "./referentiallyStable/returnFalse.js";
|
|
32
35
|
import { returnTrue } from "./referentiallyStable/returnTrue.js";
|
|
33
36
|
import { useReferentiallyStableCallback } from "./referentiallyStable/useReferentiallyStableCallback.js";
|
|
37
|
+
import { ColorSchemeProvider } from "./theming/ColorSchemeProvider.js";
|
|
38
|
+
import { GlobalClassNamePrefixContext } from "./theming/GlobalClassNamePrefixContext.js";
|
|
39
|
+
import { ColorSchemeContext, DEFAULT_COLOR_SCHEME, useColorScheme } from "./theming/contexts.js";
|
|
40
|
+
import { useClassName } from "./theming/useClassName.js";
|
|
41
|
+
import { useClassNameFactory } from "./theming/useClassNameFactory.js";
|
|
42
|
+
import { useThemedClassName } from "./theming/useThemedClassName.js";
|
|
43
|
+
import { useThemedClassNameFactory } from "./theming/useThemedClassNameFactory.js";
|
|
34
44
|
export {
|
|
45
|
+
ColorSchemeContext,
|
|
46
|
+
ColorSchemeProvider,
|
|
47
|
+
ContainerWidthContext,
|
|
48
|
+
DEFAULT_COLOR_SCHEME,
|
|
35
49
|
DebugChildren,
|
|
50
|
+
GlobalClassNamePrefixContext,
|
|
36
51
|
ScopedConsoleContext,
|
|
37
52
|
createNonNullableContextFactory,
|
|
53
|
+
createOptionalContextFactory,
|
|
38
54
|
emptyArray,
|
|
39
55
|
emptyObject,
|
|
40
56
|
identityFunction,
|
|
@@ -49,11 +65,16 @@ export {
|
|
|
49
65
|
useAbortController,
|
|
50
66
|
useAddClassNameDuringResize,
|
|
51
67
|
useArrayMapMemo,
|
|
68
|
+
useClassName,
|
|
69
|
+
useClassNameFactory,
|
|
70
|
+
useColorScheme,
|
|
52
71
|
useComposeRef,
|
|
53
72
|
useConstantLengthInvariant,
|
|
54
73
|
useConstantValueInvariant,
|
|
74
|
+
useContainerWidth,
|
|
55
75
|
useDebounce,
|
|
56
76
|
useDebounceCallback,
|
|
77
|
+
useDocumentTitle,
|
|
57
78
|
useElementSize,
|
|
58
79
|
useEventHandler,
|
|
59
80
|
useExpectSameValueReference,
|
|
@@ -68,6 +89,8 @@ export {
|
|
|
68
89
|
useScopedConsoleRef,
|
|
69
90
|
useScrollOffsets,
|
|
70
91
|
useSessionStorageState,
|
|
92
|
+
useThemedClassName,
|
|
93
|
+
useThemedClassNameFactory,
|
|
71
94
|
useUpdatedRef,
|
|
72
95
|
useWindowSize
|
|
73
96
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { jsxDEV } from "react/jsx-dev-runtime";
|
|
2
|
+
import { memo } from "react";
|
|
3
|
+
import { useColorScheme, ColorSchemeContext } from "./contexts.js";
|
|
4
|
+
const ColorSchemeProvider = memo(
|
|
5
|
+
({ children, scheme }) => {
|
|
6
|
+
const inheritedColorScheme = useColorScheme();
|
|
7
|
+
return /* @__PURE__ */ jsxDEV(ColorSchemeContext.Provider, { value: scheme ?? inheritedColorScheme, children }, void 0, false, {
|
|
8
|
+
fileName: "/__w/interface/interface/packages/react-utils/src/theming/ColorSchemeProvider.tsx",
|
|
9
|
+
lineNumber: 15,
|
|
10
|
+
columnNumber: 4
|
|
11
|
+
}, globalThis);
|
|
12
|
+
}
|
|
13
|
+
);
|
|
14
|
+
ColorSchemeProvider.displayName = "Interface.ColorSchemeProvider";
|
|
15
|
+
export {
|
|
16
|
+
ColorSchemeProvider
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=ColorSchemeProvider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ColorSchemeProvider.js","sources":["../../../src/theming/ColorSchemeProvider.tsx"],"sourcesContent":["import { KebabCase } from '@contember/utilities'\nimport { memo } from 'react'\nimport { ColorSchemeContext, useColorScheme } from './contexts'\n\nexport type ColorSchemeProviderProps<T extends KebabCase<string>> = {\n\tchildren: React.ReactNode\n\tscheme?: T\n}\n\nexport const ColorSchemeProvider = memo(\n\t<T extends KebabCase<string>>({ children, scheme }: ColorSchemeProviderProps<T>) => {\n\t\tconst inheritedColorScheme = useColorScheme()\n\n\t\treturn (\n\t\t\t<ColorSchemeContext.Provider value={scheme ?? inheritedColorScheme}>{children}</ColorSchemeContext.Provider>\n\t\t)\n\t},\n)\nColorSchemeProvider.displayName = 'Interface.ColorSchemeProvider'\n"],"names":["this"],"mappings":";;;AASO,MAAM,sBAAsB;AAAA,EAClC,CAA8B,EAAE,UAAU,aAA0C;AACnF,UAAM,uBAAuB;AAE7B,kCACE,mBAAmB,UAAnB,EAA4B,OAAO,UAAU,sBAAuB,SAArE,GAAA,QAAA,OAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAA8E,GAAAA,UAAA;AAAA,EAEhF;AACD;AACA,oBAAoB,cAAc;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GlobalClassNamePrefixContext.js","sources":["../../../src/theming/GlobalClassNamePrefixContext.ts"],"sourcesContent":["import { createContext } from 'react'\n\nexport const GlobalClassNamePrefixContext = createContext<string>('cui-')\n"],"names":[],"mappings":";AAEa,MAAA,+BAA+B,cAAsB,MAAM;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { createOptionalContextFactory } from "../context/createOptionalContextFactory.js";
|
|
2
|
+
const DEFAULT_COLOR_SCHEME = "system";
|
|
3
|
+
const [ColorSchemeContext, useColorScheme] = createOptionalContextFactory(
|
|
4
|
+
"Interface.ColorScheme",
|
|
5
|
+
DEFAULT_COLOR_SCHEME
|
|
6
|
+
);
|
|
7
|
+
export {
|
|
8
|
+
ColorSchemeContext,
|
|
9
|
+
DEFAULT_COLOR_SCHEME,
|
|
10
|
+
useColorScheme
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=contexts.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"contexts.js","sources":["../../../src/theming/contexts.ts"],"sourcesContent":["import { createOptionalContextFactory } from '../context'\n\nexport const DEFAULT_COLOR_SCHEME = 'system'\n\n\n/**\n * @group UI\n *\n * @description\n * Provides the current color scheme, possible values are `'light'`, `'dark'` or `'system'`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme\n *\n */\nexport const [ColorSchemeContext, useColorScheme] = createOptionalContextFactory<string>(\n\t'Interface.ColorScheme',\n\tDEFAULT_COLOR_SCHEME,\n)\n"],"names":[],"mappings":";AAEO,MAAM,uBAAuB;AAYvB,MAAA,CAAC,oBAAoB,cAAc,IAAI;AAAA,EACnD;AAAA,EACA;AACD;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { flatClassNameList, deduplicateClassName } from "@contember/utilities";
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
|
|
4
|
+
function useClassName(componentClassName, additionalClassName = null, prefixOverride) {
|
|
5
|
+
const contextPrefix = useContext(GlobalClassNamePrefixContext);
|
|
6
|
+
const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
|
|
7
|
+
const componentClassNameList = flatClassNameList(componentClassName).map(
|
|
8
|
+
(componentClassName2) => `${classNamePrefix}${componentClassName2}`
|
|
9
|
+
);
|
|
10
|
+
return deduplicateClassName(componentClassNameList.concat(
|
|
11
|
+
flatClassNameList(additionalClassName)
|
|
12
|
+
)).join(" ");
|
|
13
|
+
}
|
|
14
|
+
export {
|
|
15
|
+
useClassName
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=useClassName.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useClassName.js","sources":["../../../src/theming/useClassName.ts"],"sourcesContent":["import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\n\n/**\n * Hook for component class name accepting outer class name\n *\n * @param componentClassName - Component class name\n * @param additionalClassName - Additional class name\n * @param prefixOverride - Context component prefix override\n * @returns Prefixed component class name.\n */\nexport function useClassName (\n\tcomponentClassName: NestedClassName,\n\tadditionalClassName: NestedClassName = null,\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\treturn deduplicateClassName(componentClassNameList.concat(\n\t\tflatClassNameList(additionalClassName),\n\t)).join(' ')\n}\n"],"names":["componentClassName"],"mappings":";;;AAYO,SAAS,aACf,oBACA,sBAAuC,MACvC,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAG5C,SAAO,qBAAqB,uBAAuB;AAAA,IAClD,kBAAkB,mBAAmB;AAAA,EAAA,CACrC,EAAE,KAAK,GAAG;AACZ;"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { flatClassNameList, deduplicateClassName } from "@contember/utilities";
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
|
|
4
|
+
function useClassNameFactory(componentClassName, glue = "-", prefixOverride) {
|
|
5
|
+
const contextPrefix = useContext(GlobalClassNamePrefixContext);
|
|
6
|
+
const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
|
|
7
|
+
const componentClassNameList = flatClassNameList(componentClassName).map(
|
|
8
|
+
(componentClassName2) => `${classNamePrefix}${componentClassName2}`
|
|
9
|
+
);
|
|
10
|
+
return function componentClassNameFor(suffix = null, additionalClassName = null) {
|
|
11
|
+
const classNameSuffix = suffix ?? "";
|
|
12
|
+
return deduplicateClassName((classNameSuffix ? classNameSuffix.match(/^[a-zA-Z0-9]/) ? componentClassNameList.map((componentClassName2) => `${componentClassName2}${glue}${classNameSuffix}`) : componentClassNameList.map((componentClassName2) => `${componentClassName2}${classNameSuffix}`) : componentClassNameList).concat(
|
|
13
|
+
flatClassNameList(additionalClassName)
|
|
14
|
+
)).join(" ");
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
export {
|
|
18
|
+
useClassNameFactory
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=useClassNameFactory.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useClassNameFactory.js","sources":["../../../src/theming/useClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\n\n/**\n * Hook for component class name accepting outer class name\n *\n * Returns a reusable function almost that is handy for components\n * with many sub-component parts that should inherit the root component\n * name.\n *\n * Also, product of the factory is a function that can be used outside of rules of hooks.\n *\n * @param componentClassName - Component class name\n * @param glue - String to use to glue component and sub-component suffix\n * @param prefixOverride - Context component prefix override\n * @returns\n */\nexport function useClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\treturn function componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(additionalClassName),\n\t\t)).join(' ')\n\t}\n}\n"],"names":["componentClassName"],"mappings":";;;AAkBO,SAAS,oBACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAG5C,SAAO,SAAS,sBACf,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD,kBAAkB,mBAAmB;AAAA,IAAA,CACrC,EAAE,KAAK,GAAG;AAAA,EAAA;AAEb;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { filterThemedClassName, colorSchemeClassName } from "@contember/utilities";
|
|
2
|
+
import { useColorScheme } from "./contexts.js";
|
|
3
|
+
import { useClassName } from "./useClassName.js";
|
|
4
|
+
function useThemedClassName(componentClassName, additionalClassName, prefixOverride) {
|
|
5
|
+
return useClassName(
|
|
6
|
+
componentClassName,
|
|
7
|
+
filterThemedClassName(
|
|
8
|
+
additionalClassName,
|
|
9
|
+
colorSchemeClassName(useColorScheme())
|
|
10
|
+
),
|
|
11
|
+
prefixOverride
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
export {
|
|
15
|
+
useThemedClassName
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=useThemedClassName.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useThemedClassName.js","sources":["../../../src/theming/useThemedClassName.ts"],"sourcesContent":["import { NestedClassName, colorSchemeClassName, filterThemedClassName } from '@contember/utilities'\nimport { useColorScheme } from './contexts'\nimport { useClassName } from './useClassName'\n\n/**\n * Hook for component class name accepting outer class name with theme-* and scheme-* class manes\n *\n * It looks for theme CSS classes in the given class name, deduplicates them and returns final theme class name with scheme CSS class set\n * @internal\n *\n * @param componentClassName - Component class name\n * @param additionalClassName - Additional class name\n * @param prefixOverride - Context component prefix override\n * @returns string\n * @see useColorScheme\n *\n * @example\n * ```tsx\n * function Button({ className }: { className?: string | string[] }) {\n * \t const [contentThemeClassName, controlsThemeClassName] = useThemedClassName(className)\n *\n * \t return (\n * \t\t <div className={contentThemeClassName}>\n * \t\t\t <button className={controlsThemeClassName}>Click me</button>\n * \t\t </div>\n * \t )\n * }\n *\n * function App() {\n * \t return (\n * \t\t <Button className=\"theme-default theme-danger:hover\" />\n * \t )\n * }\n *\n * // renders:\n * // <div class=\"scheme-system theme-default-content theme-danger-content:hover\">\n * // \t<button class=\"scheme-system theme-default-controls theme-danger-controls:hover\">Click me</button>\n * // </div>\n * ```\n */\nexport function useThemedClassName(\n\tcomponentClassName: NestedClassName,\n\tadditionalClassName: NestedClassName,\n\tprefixOverride?: string | null | undefined,\n): string {\n\treturn useClassName(\n\t\tcomponentClassName,\n\t\tfilterThemedClassName(\n\t\t\tadditionalClassName,\n\t\t\tcolorSchemeClassName(useColorScheme()),\n\t\t),\n\t\tprefixOverride,\n\t)\n}\n"],"names":[],"mappings":";;;AAwCgB,SAAA,mBACf,oBACA,qBACA,gBACS;AACF,SAAA;AAAA,IACN;AAAA,IACA;AAAA,MACC;AAAA,MACA,qBAAqB,gBAAgB;AAAA,IACtC;AAAA,IACA;AAAA,EAAA;AAEF;"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { flatClassNameList, colorSchemeClassName, deduplicateClassName, filterThemedClassName } from "@contember/utilities";
|
|
2
|
+
import { useContext } from "react";
|
|
3
|
+
import { GlobalClassNamePrefixContext } from "./GlobalClassNamePrefixContext.js";
|
|
4
|
+
import { useColorScheme } from "./contexts.js";
|
|
5
|
+
function useThemedClassNameFactory(componentClassName, glue = "-", prefixOverride) {
|
|
6
|
+
const contextPrefix = useContext(GlobalClassNamePrefixContext);
|
|
7
|
+
const classNamePrefix = prefixOverride === null || prefixOverride === "" ? "" : prefixOverride || contextPrefix;
|
|
8
|
+
const componentClassNameList = flatClassNameList(componentClassName).map(
|
|
9
|
+
(componentClassName2) => `${classNamePrefix}${componentClassName2}`
|
|
10
|
+
);
|
|
11
|
+
const colorScheme = colorSchemeClassName(useColorScheme());
|
|
12
|
+
return function componentClassNameFor(suffix = null, additionalClassName = null) {
|
|
13
|
+
const classNameSuffix = suffix ?? "";
|
|
14
|
+
return deduplicateClassName((classNameSuffix ? classNameSuffix.match(/^[a-zA-Z0-9]/) ? componentClassNameList.map((componentClassName2) => `${componentClassName2}${glue}${classNameSuffix}`) : componentClassNameList.map((componentClassName2) => `${componentClassName2}${classNameSuffix}`) : componentClassNameList).concat(
|
|
15
|
+
flatClassNameList(
|
|
16
|
+
filterThemedClassName(
|
|
17
|
+
additionalClassName,
|
|
18
|
+
colorScheme
|
|
19
|
+
)
|
|
20
|
+
)
|
|
21
|
+
)).join(" ");
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export {
|
|
25
|
+
useThemedClassNameFactory
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=useThemedClassNameFactory.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useThemedClassNameFactory.js","sources":["../../../src/theming/useThemedClassNameFactory.ts"],"sourcesContent":["import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'\nimport { useContext } from 'react'\nimport { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'\nimport { useColorScheme } from './contexts'\n\nexport function useThemedClassNameFactory(\n\tcomponentClassName: NestedClassName,\n\tglue: string | null = '-',\n\tprefixOverride?: string | null | undefined,\n) {\n\tconst contextPrefix = useContext(GlobalClassNamePrefixContext)\n\tconst classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix\n\n\tconst componentClassNameList: string[] = flatClassNameList(componentClassName).map(\n\t\tcomponentClassName => `${classNamePrefix}${componentClassName}`,\n\t)\n\n\tconst colorScheme = colorSchemeClassName(useColorScheme())\n\n\treturn function componentClassNameFor(\n\t\tsuffix: string | null | undefined = null,\n\t\tadditionalClassName: NestedClassName = null,\n\t): string {\n\t\tconst classNameSuffix: string = suffix ?? ''\n\n\t\treturn deduplicateClassName((classNameSuffix\n\t\t\t? (classNameSuffix.match(/^[a-zA-Z0-9]/)\n\t\t\t\t? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)\n\t\t\t\t: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)\n\t\t\t)\n\t\t\t: componentClassNameList\n\t\t).concat(\n\t\t\tflatClassNameList(\n\t\t\t\tfilterThemedClassName(\n\t\t\t\t\tadditionalClassName,\n\t\t\t\t\tcolorScheme,\n\t\t\t\t),\n\t\t\t),\n\t\t)).join(' ')\n\t}\n}\n"],"names":["componentClassName"],"mappings":";;;;AAKO,SAAS,0BACf,oBACA,OAAsB,KACtB,gBACC;AACK,QAAA,gBAAgB,WAAW,4BAA4B;AAC7D,QAAM,kBAA0B,mBAAmB,QAAQ,mBAAmB,KAAK,KAAK,kBAAkB;AAEpG,QAAA,yBAAmC,kBAAkB,kBAAkB,EAAE;AAAA,IAC9E,CAAAA,wBAAsB,GAAG,kBAAkBA;AAAAA,EAAA;AAGtC,QAAA,cAAc,qBAAqB,eAAA,CAAgB;AAEzD,SAAO,SAAS,sBACf,SAAoC,MACpC,sBAAuC,MAC9B;AACT,UAAM,kBAA0B,UAAU;AAEnC,WAAA,sBAAsB,kBACzB,gBAAgB,MAAM,cAAc,IACpC,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,OAAO,iBAAiB,IACjG,uBAAuB,IAAI,CAAAA,wBAAsB,GAAGA,sBAAqB,iBAAiB,IAE3F,wBACD;AAAA,MACD;AAAA,QACC;AAAA,UACC;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IAAA,CACA,EAAE,KAAK,GAAG;AAAA,EAAA;AAEb;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
function createOptionalContextFactory(name, initialValue) {
|
|
3
|
+
const OptionalContext = createContext(initialValue);
|
|
4
|
+
OptionalContext.displayName = name;
|
|
5
|
+
const useOptionalContext = () => {
|
|
6
|
+
return useContext(OptionalContext) ?? initialValue;
|
|
7
|
+
};
|
|
8
|
+
return [OptionalContext, useOptionalContext];
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
createOptionalContextFactory
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=createOptionalContextFactory.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"createOptionalContextFactory.js","sources":["../../../src/context/createOptionalContextFactory.ts"],"sourcesContent":["import type { Context } from 'react'\nimport { createContext, useContext } from 'react'\n\nexport function createOptionalContextFactory<T>(name: string, initialValue: T): [Context<T>, () => T] {\n const OptionalContext = createContext<T>(initialValue)\n OptionalContext.displayName = name\n\n const useOptionalContext = () => {\n return useContext(OptionalContext) ?? initialValue\n }\n\n return [OptionalContext, useOptionalContext]\n}\n"],"names":[],"mappings":";AAGgB,SAAA,6BAAgC,MAAc,cAAwC;AAC9F,QAAA,kBAAkB,cAAiB,YAAY;AACrD,kBAAgB,cAAc;AAE9B,QAAM,qBAAqB,MAAM;AACxB,WAAA,WAAW,eAAe,KAAK;AAAA,EAAA;AAGjC,SAAA,CAAC,iBAAiB,kBAAkB;AAC7C;"}
|
|
@@ -39,16 +39,16 @@ ScopedConsoleContext.displayName = "ScopedConsoleContext";
|
|
|
39
39
|
function parentScopedConsoleOrNone(parentConsole) {
|
|
40
40
|
return isNoopScopedConsole(parentConsole) ? void 0 : parentConsole;
|
|
41
41
|
}
|
|
42
|
-
const useScopedConsoleRef = (prefix) => {
|
|
42
|
+
const useScopedConsoleRef = (prefix, override) => {
|
|
43
43
|
assert("prefix is non-empty string", prefix, isNonEmptyString);
|
|
44
44
|
const parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext));
|
|
45
45
|
const scopedConsole = useMemo(() => {
|
|
46
|
-
if (parentConsole) {
|
|
46
|
+
if (override !== false && (parentConsole || override)) {
|
|
47
47
|
return createPrefixedConsole(prefix, parentConsole);
|
|
48
48
|
} else {
|
|
49
49
|
return noopScopedConsole;
|
|
50
50
|
}
|
|
51
|
-
}, [parentConsole, prefix]);
|
|
51
|
+
}, [override, parentConsole, prefix]);
|
|
52
52
|
const ref = useRef(scopedConsole);
|
|
53
53
|
ref.current = scopedConsole;
|
|
54
54
|
return ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Context.js","sources":["../../../src/debug-context/Context.tsx"],"sourcesContent":["import { assert, isNonEmptyString } from '@contember/utilities'\nimport { ReactNode, createContext, memo, useContext, useMemo, useRef } from 'react'\nimport { isNoopScopedConsole, noopScopedConsole } from './Constants'\nimport { ScopedConsoleContextType } from './Types'\n\nfunction createPrefixedConsole(message: string, prefixedConsole?: ScopedConsoleContextType): ScopedConsoleContextType {\n\treturn {\n\t\terror: function error(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).error(message, ...parameters)\n\t\t},\n\t\terrored: function errored<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).error(message, value)\n\t\t\treturn value\n\t\t},\n\t\tlog: function log(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).log(message, ...parameters)\n\t\t},\n\t\tlogged: function logged<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).log(message, value)\n\t\t\treturn value\n\t\t},\n\t\ttrace: function trace(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).trace(message, ...parameters)\n\t\t},\n\t\ttraced: function traced<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).trace(message, value)\n\t\t\treturn value\n\t\t},\n\t\twarn: function warn(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).warn(message, ...parameters)\n\t\t},\n\t\twarned: function warned<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).warn(message, value)\n\t\t\treturn value\n\t\t},\n\t}\n}\n\nexport const ScopedConsoleContext = createContext<ScopedConsoleContextType>(null!)\nScopedConsoleContext.displayName = 'ScopedConsoleContext'\n\nfunction parentScopedConsoleOrNone(parentConsole: ScopedConsoleContextType): ScopedConsoleContextType | undefined {\n\treturn isNoopScopedConsole(parentConsole) ? undefined : parentConsole\n}\n\nexport const useScopedConsoleRef = (prefix: string) => {\n\tassert('prefix is non-empty string', prefix, isNonEmptyString)\n\n\tconst parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext))\n\n\tconst scopedConsole = useMemo(() => {\n\t\tif (parentConsole) {\n\t\t\treturn createPrefixedConsole(prefix, parentConsole)\n\t\t} else {\n\t\t\treturn noopScopedConsole\n\t\t}\n\t}, [parentConsole, prefix])\n\n\tconst ref = useRef(scopedConsole)\n\tref.current = scopedConsole\n\n\treturn ref\n}\n\nexport type DebugChildrenProps =\n\t| { active
|
|
1
|
+
{"version":3,"file":"Context.js","sources":["../../../src/debug-context/Context.tsx"],"sourcesContent":["import { assert, isNonEmptyString } from '@contember/utilities'\nimport { ReactNode, createContext, memo, useContext, useMemo, useRef } from 'react'\nimport { isNoopScopedConsole, noopScopedConsole } from './Constants'\nimport { ScopedConsoleContextType } from './Types'\n\nfunction createPrefixedConsole(message: string, prefixedConsole?: ScopedConsoleContextType): ScopedConsoleContextType {\n\treturn {\n\t\terror: function error(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).error(message, ...parameters)\n\t\t},\n\t\terrored: function errored<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).error(message, value)\n\t\t\treturn value\n\t\t},\n\t\tlog: function log(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).log(message, ...parameters)\n\t\t},\n\t\tlogged: function logged<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).log(message, value)\n\t\t\treturn value\n\t\t},\n\t\ttrace: function trace(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).trace(message, ...parameters)\n\t\t},\n\t\ttraced: function traced<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).trace(message, value)\n\t\t\treturn value\n\t\t},\n\t\twarn: function warn(...parameters: any[]) {\n\t\t\t(prefixedConsole ?? console).warn(message, ...parameters)\n\t\t},\n\t\twarned: function warned<T>(message: string, value: T): T {\n\t\t\t(prefixedConsole ?? console).warn(message, value)\n\t\t\treturn value\n\t\t},\n\t}\n}\n\nexport const ScopedConsoleContext = createContext<ScopedConsoleContextType>(null!)\nScopedConsoleContext.displayName = 'ScopedConsoleContext'\n\nfunction parentScopedConsoleOrNone(parentConsole: ScopedConsoleContextType): ScopedConsoleContextType | undefined {\n\treturn isNoopScopedConsole(parentConsole) ? undefined : parentConsole\n}\n\nexport const useScopedConsoleRef = (prefix: string, override?: boolean) => {\n\tassert('prefix is non-empty string', prefix, isNonEmptyString)\n\n\tconst parentConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext))\n\n\tconst scopedConsole = useMemo(() => {\n\t\tif (override !== false && (parentConsole || override)) {\n\t\t\treturn createPrefixedConsole(prefix, parentConsole)\n\t\t} else {\n\t\t\treturn noopScopedConsole\n\t\t}\n\t}, [override, parentConsole, prefix])\n\n\tconst ref = useRef(scopedConsole)\n\tref.current = scopedConsole\n\n\treturn ref\n}\n\nexport type DebugChildrenProps =\n\t| { active?: true; children: ReactNode; id: string }\n\t| { active?: false; children: ReactNode; id?: string }\n\nexport const DebugChildren = memo<DebugChildrenProps>(({ active = true, children, id }) => {\n\tconst parentScopedConsole = parentScopedConsoleOrNone(useContext(ScopedConsoleContext))\n\n\tconst console = active && id\n\t\t? createPrefixedConsole(id, parentScopedConsole)\n\t\t: noopScopedConsole\n\n\treturn (\n\t\t<ScopedConsoleContext.Provider value={active ? console : noopScopedConsole}>\n\t\t\t{children}\n\t\t</ScopedConsoleContext.Provider>\n\t)\n})\nDebugChildren.displayName = 'DebugChildren'\n"],"names":["message","console"],"mappings":";;;;AAKA,SAAS,sBAAsB,SAAiB,iBAAsE;AAC9G,SAAA;AAAA,IACN,OAAO,SAAS,SAAS,YAAmB;AAC3C,OAAC,mBAAmB,SAAS,MAAM,SAAS,GAAG,UAAU;AAAA,IAC1D;AAAA,IACA,SAAS,SAAS,QAAWA,UAAiB,OAAa;AAC1D,OAAC,mBAAmB,SAAS,MAAMA,UAAS,KAAK;AAC1C,aAAA;AAAA,IACR;AAAA,IACA,KAAK,SAAS,OAAO,YAAmB;AACvC,OAAC,mBAAmB,SAAS,IAAI,SAAS,GAAG,UAAU;AAAA,IACxD;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,IAAIA,UAAS,KAAK;AACxC,aAAA;AAAA,IACR;AAAA,IACA,OAAO,SAAS,SAAS,YAAmB;AAC3C,OAAC,mBAAmB,SAAS,MAAM,SAAS,GAAG,UAAU;AAAA,IAC1D;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,MAAMA,UAAS,KAAK;AAC1C,aAAA;AAAA,IACR;AAAA,IACA,MAAM,SAAS,QAAQ,YAAmB;AACzC,OAAC,mBAAmB,SAAS,KAAK,SAAS,GAAG,UAAU;AAAA,IACzD;AAAA,IACA,QAAQ,SAAS,OAAUA,UAAiB,OAAa;AACxD,OAAC,mBAAmB,SAAS,KAAKA,UAAS,KAAK;AACzC,aAAA;AAAA,IACR;AAAA,EAAA;AAEF;AAEa,MAAA,uBAAuB,cAAwC,IAAK;AACjF,qBAAqB,cAAc;AAEnC,SAAS,0BAA0B,eAA+E;AAC1G,SAAA,oBAAoB,aAAa,IAAI,SAAY;AACzD;AAEa,MAAA,sBAAsB,CAAC,QAAgB,aAAuB;AACnE,SAAA,8BAA8B,QAAQ,gBAAgB;AAE7D,QAAM,gBAAgB,0BAA0B,WAAW,oBAAoB,CAAC;AAE1E,QAAA,gBAAgB,QAAQ,MAAM;AAC/B,QAAA,aAAa,UAAU,iBAAiB,WAAW;AAC/C,aAAA,sBAAsB,QAAQ,aAAa;AAAA,IAAA,OAC5C;AACC,aAAA;AAAA,IACR;AAAA,EACE,GAAA,CAAC,UAAU,eAAe,MAAM,CAAC;AAE9B,QAAA,MAAM,OAAO,aAAa;AAChC,MAAI,UAAU;AAEP,SAAA;AACR;AAMa,MAAA,gBAAgB,KAAyB,CAAC,EAAE,SAAS,MAAM,UAAU,SAAS;AAC1F,QAAM,sBAAsB,0BAA0B,WAAW,oBAAoB,CAAC;AAEtF,QAAMC,WAAU,UAAU,KACvB,sBAAsB,IAAI,mBAAmB,IAC7C;AAGF,SAAA,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,SAASA,WAAU,mBACvD,SACF,CAAA;AAEF,CAAC;AACD,cAAc,cAAc;"}
|
|
@@ -24,6 +24,9 @@ function useAddClassNameDuringResize(className, timeoutToRestore = 300, element)
|
|
|
24
24
|
timeoutID.current = setTimeout(() => {
|
|
25
25
|
addClassName(className, element ?? document.body);
|
|
26
26
|
}, timeoutToRestore);
|
|
27
|
+
return () => {
|
|
28
|
+
clearTimeout(timeoutID.current);
|
|
29
|
+
};
|
|
27
30
|
});
|
|
28
31
|
useLayoutEffect(addTemporaryClassName, [addTemporaryClassName]);
|
|
29
32
|
useOnWindowResize(addTemporaryClassName);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAddClassNameDuringResize.js","sources":["../../../src/hooks/useAddClassNameDuringResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nfunction intendedFlushOfCSSChangesToCauseImmediateReflow(element: HTMLElement) {\n\telement.offsetHeight\n}\n\nfunction addClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (element.classList.contains(className)) {\n\t\telement.classList.remove(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\nfunction removeClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (!element.classList.contains(className)) {\n\t\telement.classList.add(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\n/**\n * Adds CSS class during resize event to element\n *\n * - Falls back to document.body when no element is specified\n * - Adds CSS class to element also on the initial load\n * - Uses element.classList directly\n *\n * @param className - CSS class to apply during the resize event\n * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class\n * @param element - Optional HTML element to apply CSS class to\n */\nexport function useAddClassNameDuringResize(\n\tclassName: string,\n\ttimeoutToRestore: number = 300,\n\telement?: HTMLElement,\n) {\n\tconst timeoutID = useRef<number>()\n\n\tconst addTemporaryClassName = useReferentiallyStableCallback(() => {\n\t\tclearTimeout(timeoutID.current)\n\t\tremoveClassName(className, element ?? document.body)\n\n\t\ttimeoutID.current = setTimeout(() => {\n\t\t\taddClassName(className, element ?? document.body)\n\t\t}, timeoutToRestore)\n\t})\n\n\tuseLayoutEffect(addTemporaryClassName, [addTemporaryClassName])\n\tuseOnWindowResize(addTemporaryClassName)\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,gDAAgD,SAAsB;AACtE,UAAA;AACT;AAEA,SAAS,aACR,WACA,SACC;AACD,MAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AAClC,YAAA,UAAU,OAAO,SAAS;AAClC,oDAAgD,OAAO;AAAA,EACxD;AACD;AAEA,SAAS,gBACR,WACA,SACC;AACD,MAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,GAAG;AACnC,YAAA,UAAU,IAAI,SAAS;AAC/B,oDAAgD,OAAO;AAAA,EACxD;AACD;AAaO,SAAS,4BACf,WACA,mBAA2B,KAC3B,SACC;AACD,QAAM,YAAY;AAEZ,QAAA,wBAAwB,+BAA+B,MAAM;AAClE,iBAAa,UAAU,OAAO;AACd,oBAAA,WAAW,WAAW,SAAS,IAAI;AAEzC,cAAA,UAAU,WAAW,MAAM;AACvB,mBAAA,WAAW,WAAW,SAAS,IAAI;AAAA,OAC9C,gBAAgB;AAAA,
|
|
1
|
+
{"version":3,"file":"useAddClassNameDuringResize.js","sources":["../../../src/hooks/useAddClassNameDuringResize.ts"],"sourcesContent":["import { useLayoutEffect, useRef } from 'react'\nimport { useReferentiallyStableCallback } from '../referentiallyStable'\nimport { useOnWindowResize } from './useOnWindowResize'\n\nfunction intendedFlushOfCSSChangesToCauseImmediateReflow(element: HTMLElement) {\n\telement.offsetHeight\n}\n\nfunction addClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (element.classList.contains(className)) {\n\t\telement.classList.remove(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\nfunction removeClassName(\n\tclassName: string,\n\telement: HTMLElement,\n) {\n\tif (!element.classList.contains(className)) {\n\t\telement.classList.add(className)\n\t\tintendedFlushOfCSSChangesToCauseImmediateReflow(element)\n\t}\n}\n\n/**\n * Adds CSS class during resize event to element\n *\n * - Falls back to document.body when no element is specified\n * - Adds CSS class to element also on the initial load\n * - Uses element.classList directly\n *\n * @param className - CSS class to apply during the resize event\n * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class\n * @param element - Optional HTML element to apply CSS class to\n */\nexport function useAddClassNameDuringResize(\n\tclassName: string,\n\ttimeoutToRestore: number = 300,\n\telement?: HTMLElement,\n) {\n\tconst timeoutID = useRef<number>()\n\n\tconst addTemporaryClassName = useReferentiallyStableCallback(() => {\n\t\tclearTimeout(timeoutID.current)\n\t\tremoveClassName(className, element ?? document.body)\n\n\t\ttimeoutID.current = setTimeout(() => {\n\t\t\taddClassName(className, element ?? document.body)\n\t\t}, timeoutToRestore)\n\n\t\treturn () => {\n\t\t\tclearTimeout(timeoutID.current)\n\t\t}\n\t})\n\n\tuseLayoutEffect(addTemporaryClassName, [addTemporaryClassName])\n\tuseOnWindowResize(addTemporaryClassName)\n}\n"],"names":[],"mappings":";;;AAIA,SAAS,gDAAgD,SAAsB;AACtE,UAAA;AACT;AAEA,SAAS,aACR,WACA,SACC;AACD,MAAI,QAAQ,UAAU,SAAS,SAAS,GAAG;AAClC,YAAA,UAAU,OAAO,SAAS;AAClC,oDAAgD,OAAO;AAAA,EACxD;AACD;AAEA,SAAS,gBACR,WACA,SACC;AACD,MAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,GAAG;AACnC,YAAA,UAAU,IAAI,SAAS;AAC/B,oDAAgD,OAAO;AAAA,EACxD;AACD;AAaO,SAAS,4BACf,WACA,mBAA2B,KAC3B,SACC;AACD,QAAM,YAAY;AAEZ,QAAA,wBAAwB,+BAA+B,MAAM;AAClE,iBAAa,UAAU,OAAO;AACd,oBAAA,WAAW,WAAW,SAAS,IAAI;AAEzC,cAAA,UAAU,WAAW,MAAM;AACvB,mBAAA,WAAW,WAAW,SAAS,IAAI;AAAA,OAC9C,gBAAgB;AAEnB,WAAO,MAAM;AACZ,mBAAa,UAAU,OAAO;AAAA,IAAA;AAAA,EAC/B,CACA;AAEe,kBAAA,uBAAuB,CAAC,qBAAqB,CAAC;AAC9D,oBAAkB,qBAAqB;AACxC;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
import { useWindowSize } from "./useWindowSize.js";
|
|
3
|
+
const ContainerWidthContext = createContext(null);
|
|
4
|
+
ContainerWidthContext.displayName = "ContainerWidthContext";
|
|
5
|
+
function useContainerWidth() {
|
|
6
|
+
const maybeContainerWidth = useContext(ContainerWidthContext);
|
|
7
|
+
const { width: windowWidth } = useWindowSize();
|
|
8
|
+
return maybeContainerWidth ?? windowWidth;
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
ContainerWidthContext,
|
|
12
|
+
useContainerWidth
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=useContainerWidth.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useContainerWidth.js","sources":["../../../src/hooks/useContainerWidth.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { useWindowSize } from './useWindowSize'\n\nexport type ContainerWidthContextType = number\nexport const ContainerWidthContext = createContext<ContainerWidthContextType | null>(null)\nContainerWidthContext.displayName = 'ContainerWidthContext'\n\nexport function useContainerWidth(): number {\n\tconst maybeContainerWidth = useContext(ContainerWidthContext)\n\tconst { width: windowWidth } = useWindowSize()\n\n\treturn maybeContainerWidth ?? windowWidth\n}\n"],"names":[],"mappings":";;AAIa,MAAA,wBAAwB,cAAgD,IAAI;AACzF,sBAAsB,cAAc;AAE7B,SAAS,oBAA4B;AACrC,QAAA,sBAAsB,WAAW,qBAAqB;AAC5D,QAAM,EAAE,OAAO,YAAY,IAAI,cAAc;AAE7C,SAAO,uBAAuB;AAC/B;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useRef, useEffect } from "react";
|
|
2
|
+
function useDocumentTitle(title, formatter) {
|
|
3
|
+
const initialTitle = useRef(document.title).current;
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
if (title) {
|
|
6
|
+
if (formatter) {
|
|
7
|
+
document.title = formatter(title, initialTitle);
|
|
8
|
+
} else {
|
|
9
|
+
document.title = title;
|
|
10
|
+
}
|
|
11
|
+
} else {
|
|
12
|
+
document.title = initialTitle;
|
|
13
|
+
}
|
|
14
|
+
return () => {
|
|
15
|
+
document.title = initialTitle;
|
|
16
|
+
};
|
|
17
|
+
}, [formatter, initialTitle, title]);
|
|
18
|
+
}
|
|
19
|
+
export {
|
|
20
|
+
useDocumentTitle
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=useDocumentTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDocumentTitle.js","sources":["../../../src/hooks/useDocumentTitle.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\n\nexport function useDocumentTitle(title: string | null | undefined, formatter?: (title: string, initialTitle: string) => string) {\n\tconst initialTitle = useRef(document.title).current\n\n\tuseEffect(() => {\n\t\tif (title) {\n\t\t\tif (formatter) {\n\t\t\t\tdocument.title = formatter(title, initialTitle)\n\t\t\t} else {\n\t\t\t\tdocument.title = title\n\t\t\t}\n\t\t} else {\n\t\t\tdocument.title = initialTitle\n\t\t}\n\n\t\treturn () => {\n\t\t\tdocument.title = initialTitle\n\t\t}\n\t}, [formatter, initialTitle, title])\n}\n"],"names":[],"mappings":";AAEgB,SAAA,iBAAiB,OAAkC,WAA6D;AAC/H,QAAM,eAAe,OAAO,SAAS,KAAK,EAAE;AAE5C,YAAU,MAAM;AACf,QAAI,OAAO;AACV,UAAI,WAAW;AACL,iBAAA,QAAQ,UAAU,OAAO,YAAY;AAAA,MAAA,OACxC;AACN,iBAAS,QAAQ;AAAA,MAClB;AAAA,IAAA,OACM;AACN,eAAS,QAAQ;AAAA,IAClB;AAEA,WAAO,MAAM;AACZ,eAAS,QAAQ;AAAA,IAAA;AAAA,EAEhB,GAAA,CAAC,WAAW,cAAc,KAAK,CAAC;AACpC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useExpectSameValueReference.js","sources":["../../../src/hooks/useExpectSameValueReference.ts"],"sourcesContent":["import deepEqual from 'deep-equal'\nimport { useRef } from 'react'\n\n
|
|
1
|
+
{"version":3,"file":"useExpectSameValueReference.js","sources":["../../../src/hooks/useExpectSameValueReference.ts"],"sourcesContent":["import deepEqual from 'deep-equal'\nimport { useRef } from 'react'\n\n/**\n * Checks whether the next value is the same reference as the previous one\n *\n * If not, it checks whether the values are deeply equal. If not, it logs an error.\n *\n * @param next - Value to be checked.\n * @param shouldThrow - If true, it throws an error instead of logging it. Defaults to false.\n * @returns void\n * -\n * @example\n * ```ts\n * useExpectSameValueReference(style)\n * ```\n * @example\n * ```ts\n * useExpectSameValueReference(style, true)\n * ```\n * @example\n * ```ts\n * useExpectSameValueReference(style, import.meta.env.DEV)\n * ```\n */\nexport function useExpectSameValueReference<T>(next: T, shouldThrow: boolean = false) {\n\tconst previous = useRef(next)\n\n\tif (next !== previous.current\n\t\t&& typeof next === 'object'\n\t\t&& typeof previous.current === 'object'\n\t\t&& deepEqual(next, previous.current)\n\t) {\n\t\tif (import.meta.env.DEV) {\n\t\t\tconsole.error(\n\t\t\t\t'Previous and next values do not match in reference although match in value. ' +\n\t\t\t\t'Try declaring constants outside of the component scope. ' +\n\t\t\t\t'Otherwise try to memoize callbacks with useCallback, ' +\n\t\t\t\t'useReferentiallyStableCallback useEvent, useRef or useMemo.', {\n\t\t\t\tprevious: previous.current,\n\t\t\t\tnext,\n\t\t\t})\n\t\t}\n\n\t\tif (shouldThrow) {\n\t\t\tthrow new Error('Expecting same reference for same values')\n\t\t}\n\t}\n\n\tprevious.current = next\n}\n"],"names":[],"mappings":";;AAyBgB,SAAA,4BAA+B,MAAS,cAAuB,OAAO;AAC/E,QAAA,WAAW,OAAO,IAAI;AAE5B,MAAI,SAAS,SAAS,WAClB,OAAO,SAAS,YAChB,OAAO,SAAS,YAAY,YAC5B,UAAU,MAAM,SAAS,OAAO,GAClC;AAYD,QAAI,aAAa;AACV,YAAA,IAAI,MAAM,0CAA0C;AAAA,IAC3D;AAAA,EACD;AAEA,WAAS,UAAU;AACpB;"}
|