@hanzogui/web 7.3.2 → 8.0.0

package/dist/cjs/helpers/getSplitStyles.cjs

@@ -34,9 +34,11 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var getSplitStyles_exports = {};
 __export(getSplitStyles_exports, {
   PROP_SPLIT: () => PROP_SPLIT,
+  STYLE_TOKEN_PROVENANCE_KEY: () => import_styleProvenance2.STYLE_TOKEN_PROVENANCE_KEY,
   getSplitStyles: () => getSplitStyles,
+  getStyleTokenProvenance: () => import_styleProvenance2.getStyleTokenProvenance,
   getSubStyle: () => getSubStyle,
-  styleOriginalValues: () => styleOriginalValues,
+  styleOriginalValues: () => import_styleOriginalValues.styleOriginalValues,
   useSplitStyles: () => useSplitStyles
 });
 module.exports = __toCommonJS(getSplitStyles_exports);
@@ -62,9 +64,12 @@ var import_propMapper = require("./propMapper.cjs");
 var import_pseudoDescriptors = require("./pseudoDescriptors.cjs");
 var import_skipProps = require("./skipProps.cjs");
 var import_sortString = require("./sortString.cjs");
+var import_styleOriginalValues = require("./styleOriginalValues.cjs");
+var import_styleProvenance = require("./styleProvenance.cjs");
 var import_transformsToString = require("./transformsToString.cjs");
+var import_styleProvenance2 = require("./styleProvenance.cjs");
+const shouldTrackStyleTokenProvenance = process.env.NODE_ENV === "development" && process.env.GUI_ENABLE_STYLE_TOKEN_PROVENANCE === "1";
 let conf;
-const styleOriginalValues = /* @__PURE__ */new WeakMap();
 const PROP_SPLIT = "-";
 function normalizeGroupKey(key, groupContext) {
   const parts = key.split("-");
@@ -78,6 +83,9 @@ function normalizeGroupKey(key, groupContext) {
 function isValidStyleKey(key, validStyles, accept) {
   return key in validStyles ? true : accept && key in accept;
 }
+function shouldSkipNativeHoverProp(key, isMedia) {
+  return false;
+}
 const getSplitStyles = (props, staticConfig, theme, themeName, componentState, styleProps, parentSplitStyles, componentContext, groupContext, elementType, startedUnhydrated, debug, animationDriver) => {
   conf = conf || (0, import_config.getConfig)();
   const driver = animationDriver || componentContext?.animationDriver || conf.animations;
@@ -204,7 +212,10 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
         const identifier = `t_group_${valInit}`;
         addStyleToInsertRules(rulesToInsert, ["container", void 0, identifier, void 0, [`.${identifier} { container-name: ${valInit}; container-type: ${webContainerType || "inline-size"}; }`]]);
       }
-      if (keyInit === "transition" && typeof valInit === "string" && !driver?.animations?.[valInit]) {} else continue;
+      if (keyInit === "transition" && typeof valInit === "string") {
+        const animationConfig = driver?.animations?.[valInit];
+        if (animationConfig && driver?.outputStyle === "css" && process.env.IS_STATIC === "is_static") valInit = `all ${animationConfig}`;else if (animationConfig) continue;
+      } else continue;
     }
     let isValidStyleKeyInit = isValidStyleKey(keyInit, validStyles, accept);
     if (staticConfig.isReactNative && keyInit.startsWith("data-")) {
@@ -216,7 +227,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     if (!noExpand) {
       if (keyInit === "disabled" && valInit === true) {
         viewProps["aria-disabled"] = true;
-        if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") viewProps.disabled = true;
+        if (isInput || elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") viewProps.disabled = true;
         if (!variants?.disabled) continue;
       }
       if (keyInit === "testID") {
@@ -238,6 +249,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
     let isMediaOrPseudo = Boolean(isMedia || isPseudo);
     if (isMediaOrPseudo && isMedia === "group") keyInit = normalizeGroupKey(keyInit, groupContext);
     const isStyleProp = isValidStyleKeyInit || isMediaOrPseudo || isVariant && !noExpand;
+    if (shouldSkipNativeHoverProp(keyInit, isMedia)) continue;
     if (isStyleProp && (asChild === "except-style" || asChild === "except-style-web")) continue;
     const shouldPassProp = !isStyleProp && isHOC || isHOC && parentVariants && keyInit in parentVariants || inlineProps?.has(keyInit);
     const parentVariant = parentVariants?.[keyInit];
@@ -297,6 +309,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       isMediaOrPseudo = Boolean(isMedia || isPseudo);
       isVariant = variants && key in variants;
       if (isMedia === "group") key = normalizeGroupKey(key, groupContext);
+      if (shouldSkipNativeHoverProp(key, isMedia)) return;
       if (inlineProps?.has(key) || process.env.IS_STATIC === "is_static" && inlineWhenUnflattened?.has(key)) viewProps[key] = props[key] ?? val;
       if (styleProps.noExpand && isPseudo || isHOC && (isMediaOrPseudo || parentStaticConfig?.variants?.[keyInit])) {
         passDownProp(viewProps, key, val, isMediaOrPseudo);
@@ -353,7 +366,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
             console.groupEnd();
           }
           const importance = descriptor.priority;
-          const pseudoOriginalValues = styleOriginalValues.get(pseudoStyleObject);
+          const pseudoOriginalValues = import_styleOriginalValues.styleOriginalValues.get(pseudoStyleObject);
           for (const pkey in pseudoStyleObject) {
             const val2 = pseudoStyleObject[pkey];
             if (isDisabled) applyDefaultStyle(pkey, styleState);else {
@@ -489,7 +502,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
               importanceBump = priority2;
             }
           } else if (isPlatformMedia) importanceBump = (0, import_isActivePlatform.getPlatformSpecificityBump)(mediaKeyShort);
-          const mediaOriginalValues = styleOriginalValues.get(mediaStyle);
+          const mediaOriginalValues = import_styleOriginalValues.styleOriginalValues.get(mediaStyle);
           if (isGroupMedia && mediaStyle.transition) {
             styleState.pseudoTransitions ||= {};
             styleState.pseudoTransitions[`$${mediaKeyShort}`] = mediaStyle.transition;
@@ -506,7 +519,7 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
                 if (!mediaState[subKey.slice(1)]) continue;
               }
               const nestedVal = mediaStyle[subKey];
-              const subOriginalValues = styleOriginalValues.get(nestedVal);
+              const subOriginalValues = import_styleOriginalValues.styleOriginalValues.get(nestedVal);
               const outerBase = !!mediaState[mediaKeyShort] ? (0, import_useMedia.getMediaKeyImportance)(mediaKeyShort) : import_pseudoDescriptors.defaultMediaImportance;
               let innerBase;
               if (subMediaType === "platform") innerBase = import_pseudoDescriptors.defaultMediaImportance + (0, import_isActivePlatform.getPlatformSpecificityBump)(subKey.slice(1));else if (subMediaType === true) innerBase = (0, import_useMedia.getMediaKeyImportance)(subKey.slice(1));else innerBase = import_pseudoDescriptors.defaultMediaImportance;
@@ -630,11 +643,28 @@ const getSplitStyles = (props, staticConfig, theme, themeName, componentState, s
       const style = isArray ? styleProp[i] : styleProp;
       if (style) if (style["$$css"]) Object.assign(styleState.classNames, style);else {
         styleState.style ||= {};
-        Object.assign(styleState.style, normalizeStyle(style));
+        const normalized = normalizeStyle(style);
+        Object.assign(styleState.style, normalized);
+        if (shouldTrackStyleTokenProvenance) {
+          const styleOriginals = import_styleOriginalValues.styleOriginalValues.get(normalized);
+          for (const k in normalized) recordStyleTokenProvenance(styleState, k, styleOriginals?.[k]);
+        }
       }
     }
   }
   if (process.env.NODE_ENV === "development" && (debug === "profile" || globalThis.time)) time`split-styles-pre-result`;
+  if (shouldTrackStyleTokenProvenance && styleState.style && styleState.tokenProvenance) {
+    const provenance = {};
+    let hasProvenance = false;
+    for (const key in styleState.tokenProvenance) {
+      provenance[key] = {
+        token: styleState.tokenProvenance[key],
+        theme: themeName
+      };
+      hasProvenance = true;
+    }
+    if (hasProvenance) (0, import_styleProvenance.setStyleTokenProvenance)(styleState.style, provenance);
+  }
   const result = {
     hasMedia,
     fontFamily: styleState.fontFamily,
@@ -738,9 +768,13 @@ function mergeStyle(styleState, key, val, importance, disableNormalize = false,
       styleState.style ||= {};
       usedKeys[key] = importance;
       styleState.style[key] = key === "transform" && Array.isArray(out) ? [...out] : out;
+      if (shouldTrackStyleTokenProvenance) recordStyleTokenProvenance(styleState, key, originalVal);
     }
   }
 }
+function recordStyleTokenProvenance(styleState, key, originalVal) {
+  if (typeof originalVal === "string" && originalVal[0] === "$") (styleState.tokenProvenance ||= {})[key] = originalVal;else if (styleState.tokenProvenance && key in styleState.tokenProvenance) delete styleState.tokenProvenance[key];
+}
 const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
   const {
     staticConfig,
@@ -749,29 +783,40 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
   } = styleState;
   const styleOut = {};
   let originalValues;
-  for (let key in styleIn) {
-    const val = styleIn[key];
-    key = conf2.shorthands[key] || key;
-    if (key === "transition") {
-      styleState.pseudoTransitions ||= {};
-      styleState.pseudoTransitions[subKey] = val;
-      const driver = styleState.animationDriver;
-      if (driver?.outputStyle === "css") {
-        const animationConfig = driver.animations?.[val];
-        if (animationConfig) styleOut["transition"] = `all ${animationConfig}${subKey[0] === "$" ? " !important" : ""}`;
+  const styleInOriginalValues = import_styleOriginalValues.styleOriginalValues.get(styleIn);
+  const parentProps = styleState.props;
+  styleState.props = {
+    ...parentProps,
+    ...styleIn
+  };
+  try {
+    for (let key in styleIn) {
+      const val = styleIn[key];
+      key = conf2.shorthands[key] || key;
+      if (key === "transition") {
+        styleState.pseudoTransitions ||= {};
+        styleState.pseudoTransitions[subKey] = val;
+        const driver = styleState.animationDriver;
+        if (driver?.outputStyle === "css") {
+          const animationConfig = driver.animations?.[val];
+          if (animationConfig) styleOut["transition"] = `all ${animationConfig}${subKey[0] === "$" ? " !important" : ""}`;
+        }
+        if (!styleOut["transition"] && typeof val === "string" && !driver?.animations?.[val]) styleOut["transition"] = val;
+        continue;
       }
-      if (!styleOut["transition"] && typeof val === "string" && !driver?.animations?.[val]) styleOut["transition"] = val;
-      continue;
+      if (!staticConfig.isHOC && key in import_skipProps.skipProps && !styleProps.noSkip) continue;
+      (0, import_propMapper.propMapper)(key, val, styleState, false, (skey, sval, originalVal) => {
+        const trackedOriginalVal = styleInOriginalValues?.[skey] ?? originalVal;
+        if (trackedOriginalVal !== void 0) {
+          originalValues ||= {};
+          originalValues[skey] = trackedOriginalVal;
+        }
+        if (skey in import_helpers.validPseudoKeys) sval = getSubStyle(styleState, skey, sval, avoidMergeTransform);
+        if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) mergeTransform(styleOut, skey, sval);else styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
+      });
     }
-    if (!staticConfig.isHOC && key in import_skipProps.skipProps && !styleProps.noSkip) continue;
-    (0, import_propMapper.propMapper)(key, val, styleState, false, (skey, sval, originalVal) => {
-      if (originalVal !== void 0) {
-        originalValues ||= {};
-        originalValues[skey] = originalVal;
-      }
-      if (skey in import_helpers.validPseudoKeys) sval = getSubStyle(styleState, skey, sval, avoidMergeTransform);
-      if (!avoidMergeTransform && skey in import_helpers.stylePropsTransform) mergeTransform(styleOut, skey, sval);else styleOut[skey] = styleProps.noNormalize ? sval : (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(sval, key);
-    });
+  } finally {
+    styleState.props = parentProps;
   }
   if (!avoidMergeTransform) {
     const parentTransform = styleState.style?.transform;
@@ -806,7 +851,7 @@ const getSubStyle = (styleState, subKey, styleIn, avoidMergeTransform) => {
     } else if (flatTransforms) mergeFlatTransforms(styleOut, flatTransforms);
   }
   if (!styleProps.noNormalize) (0, import_expandStyles.fixStyles)(styleOut);
-  if (originalValues) styleOriginalValues.set(styleOut, originalValues);
+  if (originalValues && Object.keys(originalValues).length) import_styleOriginalValues.styleOriginalValues.set(styleOut, originalValues);
   return styleOut;
 };
 const useInsertEffectCompat = import_constants.isWeb ? import_react.default.useInsertionEffect || import_constants.useIsomorphicLayoutEffect : () => {};
@@ -879,7 +924,7 @@ function mergeMediaByImportance(styleState, mediaKey, key, value, isSizeMedia, i
     const descriptor = import_pseudoDescriptors.pseudoDescriptors[key];
     const descriptorKey = descriptor.stateKey || descriptor.name;
     if (styleState.componentState[descriptorKey] === false) return false;
-    const pseudoOriginalValues = styleOriginalValues.get(value);
+    const pseudoOriginalValues = import_styleOriginalValues.styleOriginalValues.get(value);
     for (const subKey in value) mergeStyle(styleState, subKey, value[subKey], importance, false, pseudoOriginalValues?.[subKey]);
   } else mergeStyle(styleState, key, value, importance, false, originalVal);
   return true;