@hanzogui/web 8.3.0 → 8.3.2

package/dist/cjs/hooks/useProps.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProps = useProps;
+exports.useStyle = useStyle;
+exports.usePropsAndStyle = usePropsAndStyle;
+const tslib_1 = require("tslib");
+const constants_1 = require("@hanzogui/constants");
+const react_1 = tslib_1.__importDefault(require("react"));
+const config_ts_1 = require("../config.js");
+const ComponentContext_tsx_1 = require("../contexts/ComponentContext.js");
+const GroupContext_tsx_1 = require("../contexts/GroupContext.js");
+const getSplitStyles_tsx_1 = require("../helpers/getSplitStyles.js");
+const subscribeToContextGroup_tsx_1 = require("../helpers/subscribeToContextGroup.js");
+const View_tsx_1 = require("../views/View.js");
+const useComponentState_ts_1 = require("./useComponentState.js");
+const mediaState_ts_1 = require("../helpers/mediaState.js");
+const useMedia_tsx_1 = require("./useMedia.js");
+const useTheme_tsx_1 = require("./useTheme.js");
+/**
+ * Returns props and style as a single object, expanding and merging shorthands and media queries.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+function useProps(props, opts) {
+    const [propsOut, styleOut] = usePropsAndStyle(props, {
+        ...opts,
+        noExpand: true,
+        noNormalize: true,
+        resolveValues: 'none',
+    });
+    return {
+        ...propsOut,
+        ...styleOut,
+    };
+}
+/**
+ * Returns only style values fully resolved and flattened with merged media queries and shorthands with all theme and token values resolved.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+function useStyle(props, opts) {
+    return usePropsAndStyle(props, opts)[1] || {};
+}
+/**
+ * Returns [props, styles, theme, media] fully resolved and flattened with merged media queries and shorthands with all theme and token values resolved.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+function usePropsAndStyle(props, opts) {
+    const staticConfig = opts?.forComponent?.staticConfig ?? View_tsx_1.View.staticConfig;
+    const [theme, themeState] = (0, useTheme_tsx_1.useThemeWithState)({
+        componentName: staticConfig.componentName,
+        name: 'theme' in props ? props.theme : undefined,
+        needsUpdate() {
+            return true;
+        },
+    });
+    const componentContext = react_1.default.useContext(ComponentContext_tsx_1.ComponentContext);
+    const groupContext = react_1.default.useContext(GroupContext_tsx_1.GroupContext);
+    const { state, disabled, setStateShallow } = (0, useComponentState_ts_1.useComponentState)(props, componentContext.animationDriver, staticConfig, (0, config_ts_1.getConfig)());
+    const mediaStateNow = opts?.noMedia
+        ? // not safe to use mediaState but really marginal to hit this
+            mediaState_ts_1.mediaState
+        : (0, useMedia_tsx_1.useMedia)();
+    const splitStyles = (0, getSplitStyles_tsx_1.useSplitStyles)(props, staticConfig, theme, themeState?.name || '', state, {
+        isAnimated: false,
+        mediaState: mediaStateNow,
+        noSkip: true,
+        noMergeStyle: true,
+        noClass: true,
+        resolveValues: 'auto',
+        ...opts,
+    }, null, componentContext, groupContext);
+    const { mediaGroups, pseudoGroups } = splitStyles || {};
+    (0, constants_1.useIsomorphicLayoutEffect)(() => {
+        if (disabled) {
+            return;
+        }
+        if (state.unmounted) {
+            setStateShallow({ unmounted: false });
+            return;
+        }
+        if (groupContext) {
+            return (0, subscribeToContextGroup_tsx_1.subscribeToContextGroup)({
+                groupContext,
+                setStateShallow,
+                mediaGroups,
+                pseudoGroups,
+            });
+        }
+    }, [
+        disabled,
+        groupContext,
+        pseudoGroups ? Object.keys([...pseudoGroups]).join('') : 0,
+        mediaGroups ? Object.keys([...mediaGroups]).join('') : 0,
+    ]);
+    return [
+        splitStyles?.viewProps || {},
+        splitStyles?.style || {},
+        theme,
+        mediaState_ts_1.mediaState,
+    ];
+}
+//# sourceMappingURL=useProps.js.map

package/dist/cjs/hooks/useProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useProps.js","sourceRoot":"","sources":["../../../src/hooks/useProps.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/hooks/useTheme.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeWithState = exports.useTheme = void 0;
+const react_1 = require("react");
+const getThemeProxied_ts_1 = require("./getThemeProxied.js");
+const useThemeState_ts_1 = require("./useThemeState.js");
+const EMPTY = {};
+const useTheme = () => {
+    'use no memo';
+    const [theme] = (0, exports.useThemeWithState)(EMPTY);
+    const res = theme;
+    return res;
+};
+exports.useTheme = useTheme;
+/**
+ * Adds a proxy around themeState that tracks update keys
+ */
+const useThemeWithState = (props, isRoot = false, 
+// <Theme> components push their themeState.id into ThemeStateContext,
+// so their descendants subscribe under this id; <Theme> needs to schedule
+// descendant updates when its propsKey changes. Leaf styled components
+// (createComponent, useProps, useTheme, animation hooks) do NOT push a
+// context — listenersByParent[componentId] is always empty — so the
+// schedule-update effect is a no-op for them and can be skipped to save
+// one hook slot per styled component on mount. Theme.tsx passes true.
+forThemeView = false) => {
+    'use no memo';
+    // single useRef holding both keys + schemeKeys; saves one hook slot per
+    // component vs separate useRef calls. these still look like MutableRefObject
+    // to getThemeProxied which only reads/writes `.current`.
+    const bag = (0, react_1.useRef)(null);
+    if (!bag.current) {
+        bag.current = {
+            keys: { current: null },
+            schemeKeys: { current: null },
+        };
+    }
+    const { keys, schemeKeys } = bag.current;
+    const themeState = (0, useThemeState_ts_1.useThemeState)(props, isRoot, keys, schemeKeys, forThemeView);
+    if (process.env.NODE_ENV === 'development') {
+        if (!props.passThrough && !themeState?.theme) {
+            if (process.env.GUI_DISABLE_NO_THEME_WARNING !== '1') {
+                console.error(`[hanzogui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(props)}).\n\nIf this is intended and you are using Gui without any themes, you can disable this warning by setting the environment variable GUI_DISABLE_NO_THEME_WARNING=1`);
+            }
+        }
+    }
+    const themeProxied = props.passThrough
+        ? {}
+        : (0, getThemeProxied_ts_1.getThemeProxied)(props, themeState, keys, schemeKeys);
+    return [themeProxied, themeState];
+};
+exports.useThemeWithState = useThemeWithState;
+//# sourceMappingURL=useTheme.js.map

package/dist/cjs/hooks/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../../src/hooks/useTheme.tsx"],"names":[],"mappings":";;;AAAA,iCAAqD;AAErD,6DAAyE;AACzE,yDAAkD;AAElD,MAAM,KAAK,GAAG,EAAE,CAAA;AAOT,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,aAAa,CAAA;IAEb,MAAM,CAAC,KAAK,CAAC,GAAG,IAAA,QAAA,iBAAiB,EAAC,KAAK,CAAC,CAAA;IACxC,MAAM,GAAG,GAAG,KAAK,CAAA;IACjB,OAAO,GAAmB,CAAA;AAC5B,CAAC,CAAA;AANY,QAAA,QAAQ,GAAR,QAAQ,CAMpB;AAID;;GAEG;AACI,MAAM,iBAAiB,GAAG,CAC/B,KAA6B,EAC7B,MAAM,GAAG,KAAK;AACd,sEAAsE;AACtE,0EAA0E;AAC1E,uEAAuE;AACvE,uEAAuE;AACvE,oEAAoE;AACpE,wEAAwE;AACxE,sEAAsE;AACtE,YAAY,GAAG,KAAK,EACJ,EAAE;IAClB,aAAa,CAAA;IAEb,wEAAwE;IACxE,6EAA6E;IAC7E,yDAAyD;IACzD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAA;IACxC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;QACjB,GAAG,CAAC,OAAO,GAAG;YACZ,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;YACvB,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;SAC9B,CAAA;IACH,CAAC;IACD,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IACxC,MAAM,UAAU,GAAG,IAAA,gCAAa,EAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,CAAC,CAAA;IAE/E,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,aAAa,EAAE,CAAC;QAC3C,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;YAC7C,IAAI,OAAO,CAAC,GAAG,CAAC,4BAA4B,KAAK,GAAG,EAAE,CAAC;gBACrD,OAAO,CAAC,KAAK,CACX,4FAA4F,IAAI,CAAC,SAAS,CACxG,KAAK,CACN,qKAAqK,CACvK,CAAA;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW;QACpC,CAAC,CAAC,EAAE;QACJ,CAAC,CAAC,IAAA,oCAAe,EAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,CAAC,CAAA;IAExD,OAAO,CAAC,YAAY,EAAE,UAAU,CAAC,CAAA;AACnC,CAAC,CAAA;AA5CY,QAAA,iBAAiB,GAAjB,iBAAiB,CA4C7B"}

package/dist/cjs/hooks/useThemeName.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeName = useThemeName;
+const useThemeState_ts_1 = require("./useThemeState.js");
+// can probably simplify this way down
+const forceUpdateState = { forceClassName: true, deopt: true, needsUpdate: () => true };
+const forceKeys = { current: new Set(['']) };
+function useThemeName() {
+    return (0, useThemeState_ts_1.useThemeState)(forceUpdateState, false, forceKeys)?.name || '';
+}
+//# sourceMappingURL=useThemeName.js.map

package/dist/cjs/hooks/useThemeName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeName.js","sourceRoot":"","sources":["../../../src/hooks/useThemeName.tsx"],"names":[],"mappings":";;;AACA,yDAAkD;AAElD,sCAAsC;AACtC,MAAM,gBAAgB,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,EAAE,CAAA;AACvF,MAAM,SAAS,GAAG,EAAE,OAAO,EAAE,IAAI,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;AAE5C;IACE,OAAO,IAAA,gCAAa,EAAC,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,EAAE,IAAI,IAAI,EAAE,CAAA;AACtE,CAAC"}