@tamagui/core 1.0.1-beta.193 → 1.0.1-beta.195

package/dist/esm/helpers/getSplitStyles.js

@@ -3,7 +3,11 @@ import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } fro
 import { useInsertionEffect } from "react";
 import { getConfig } from "../config";
 import { isDevTools } from "../constants/isDevTools";
-import { mediaState as globalMediaState, mediaQueryConfig } from "../hooks/useMedia";
+import {
+  mediaState as globalMediaState,
+  mediaQueryConfig,
+  mergeMediaByImportance
+} from "../hooks/useMedia";
 import { createMediaStyle } from "./createMediaStyle";
 import { getPropMappedFontFamily } from "./createPropMapper";
 import { createProxy } from "./createProxy";
@@ -17,17 +21,21 @@ import {
   updateRules
 } from "./insertStyleRule";
 import { mergeTransform } from "./mergeTransform";
-import { normalizeValueWithProperty } from "./normalizeValueWithProperty.js";
+import {
+  normalizeValueWithProperty,
+  reverseMapClassNameToValue
+} from "./normalizeValueWithProperty.js";
 import { pseudoDescriptors } from "./pseudoDescriptors";
 const skipProps = {
   animation: true,
   animateOnly: true,
   debug: true,
-  componentName: true
+  componentName: true,
+  role: true,
+  tag: true
 };
 if (process.env.TAMAGUI_TARGET === "native") {
   Object.assign(skipProps, {
-    tag: true,
     whiteSpace: true,
     wordWrap: true,
     textOverflow: true,
@@ -40,15 +48,67 @@ if (process.env.TAMAGUI_TARGET === "native") {
     boxShadow: true
   });
 }
+const accessibilityDirectMap = {};
+if (process.env.TAMAGUI_TARGET === "web") {
+  const items = {
+    Hidden: true,
+    ActiveDescendant: true,
+    Atomic: true,
+    AutoComplete: true,
+    Busy: true,
+    Checked: true,
+    ColumnCount: "colcount",
+    ColumnIndex: "colindex",
+    ColumnSpan: "colspan",
+    Current: true,
+    Details: true,
+    ErrorMessage: true,
+    Expanded: true,
+    HasPopup: true,
+    Invalid: true,
+    Label: true,
+    Level: true,
+    Modal: true,
+    Multiline: true,
+    MultiSelectable: true,
+    Orientation: true,
+    Owns: true,
+    Placeholder: true,
+    PosInSet: true,
+    Pressed: true,
+    RoleDescription: true,
+    RowCount: true,
+    RowIndex: true,
+    RowSpan: true,
+    Selected: true,
+    SetSize: true,
+    Sort: true,
+    ValueMax: true,
+    ValueMin: true,
+    ValueNow: true,
+    ValueText: true
+  };
+  for (const key in items) {
+    let val = items[key];
+    if (val === true) {
+      val = key.toLowerCase();
+    }
+    accessibilityDirectMap[`accessibility${key}`] = `aria-${val}`;
+  }
+}
 let conf;
 const PROP_SPLIT = "-";
-const pseudoCNInverse = {
-  hover: "hoverStyle",
-  focus: "focusStyle",
-  press: "pressStyle"
+const accessibilityRoleToWebRole = {
+  adjustable: "slider",
+  header: "heading",
+  image: "img",
+  link: "link",
+  none: "presentation",
+  summary: "region"
 };
-const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, languageContext, debug) => {
-  var _a, _b;
+const isMediaKey = (key) => Boolean(key[0] === "$" && mediaQueryConfig[key.slice(1)]);
+const getSplitStyles = (props, staticConfig, theme, state, parentSplitStyles, languageContext, elementType, debug) => {
+  var _a, _b, _c, _d, _e;
   conf = conf || getConfig();
   const validStyleProps = staticConfig.isText ? stylePropsText : validStyles;
   const mediaKeys = [];
@@ -56,15 +116,12 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
   const pseudos = {};
   const medias = {};
   const mediaState = state.mediaState || globalMediaState;
-  const usedKeys = /* @__PURE__ */ new Set();
+  const usedKeys = {};
   const propKeys = Object.keys(props);
-  const shouldDoClasses = staticConfig.acceptsClassName && (isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames && !props.animation;
+  const shouldDoClasses = staticConfig.acceptsClassName && (isWeb || process.env.IS_STATIC === "is_static") && !state.noClassNames;
   const len = propKeys.length;
   const rulesToInsert = [];
   const style = {};
-  if (state.hasTextAncestor) {
-    style.display = "inline-flex";
-  }
   const classNames = {};
   const transforms = {};
   let fontFamily;
@@ -75,7 +132,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
     if (expandedKey) {
       keyInit = expandedKey;
     }
-    if (usedKeys.has(keyInit))
+    if (usedKeys[keyInit])
       continue;
     if (skipProps[keyInit])
       continue;
@@ -84,24 +141,97 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
     if (keyInit === "style" || keyInit.startsWith("_style")) {
       if (!valInit)
         continue;
-      for (const key in valInit) {
-        if (usedKeys.has(key))
+      const styles = Array.isArray(valInit) ? valInit : [valInit];
+      const styleLen = styles.length;
+      for (let j = styleLen; j >= 0; j--) {
+        const cur = styles[j];
+        if (!cur)
           continue;
-        if (valInit && typeof valInit === "object") {
-          for (const skey in valInit) {
-            if (usedKeys.has(skey))
-              continue;
-            usedKeys.add(skey);
-            style[skey] = valInit[skey];
-          }
-        } else {
-          usedKeys.add(key);
-          style[key] = valInit;
+        for (const key in cur) {
+          if (usedKeys[key])
+            continue;
+          usedKeys[key] = 1;
+          style[key] = cur[key];
         }
       }
       continue;
     }
     if (process.env.TAMAGUI_TARGET === "web") {
+      if (keyInit === "disabled" && valInit === true) {
+        usedKeys[keyInit] = 1;
+        viewProps["aria-disabled"] = true;
+        if (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") {
+          viewProps.disabled = true;
+        }
+        continue;
+      }
+      if (accessibilityDirectMap[keyInit]) {
+        viewProps[accessibilityDirectMap[keyInit]] = valInit;
+        usedKeys[keyInit] = 1;
+        continue;
+      }
+      let didUseKeyInit = true;
+      switch (keyInit) {
+        case "nativeID": {
+          viewProps.id = valInit;
+          break;
+        }
+        case "accessibilityRole": {
+          if (valInit === "none") {
+            viewProps.role = "presentation";
+          } else {
+            viewProps.role = accessibilityRoleToWebRole[valInit] || valInit;
+          }
+          break;
+        }
+        case "accessibilityControls": {
+          viewProps["aria-controls"] = processIDRefList(valInit);
+          break;
+        }
+        case "accessibilityDescribedBy": {
+          viewProps["aria-describedby"] = processIDRefList(valInit);
+          break;
+        }
+        case "accessibilityFlowTo": {
+          viewProps["aria-flowto"] = processIDRefList(valInit);
+          break;
+        }
+        case "accessibilityLabelledBy": {
+          viewProps["aria-labelledby"] = processIDRefList(valInit);
+          break;
+        }
+        case "accessibilityKeyShortcuts": {
+          if (Array.isArray(valInit)) {
+            viewProps["aria-keyshortcuts"] = valInit.join(" ");
+          }
+          break;
+        }
+        case "accessibilityLiveRegion": {
+          viewProps["aria-live"] = valInit === "none" ? "off" : valInit;
+          break;
+        }
+        case "accessibilityReadOnly": {
+          viewProps["aria-readonly"] = valInit;
+          if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+            viewProps.readOnly = true;
+          }
+          break;
+        }
+        case "accessibilityRequired": {
+          viewProps["aria-required"] = valInit;
+          if (elementType === "input" || elementType === "select" || elementType === "textarea") {
+            viewProps.required = true;
+          }
+          break;
+        }
+        default: {
+          didUseKeyInit = false;
+        }
+      }
+      if (didUseKeyInit) {
+        usedKeys[keyInit] = 1;
+        continue;
+      }
       if (keyInit === "className") {
         let nonTamaguis = "";
         if (!valInit)
@@ -111,7 +241,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
             const [shorthand, mediaOrPseudo] = cn.slice(1).split("-");
             const isMedia2 = mediaOrPseudo[0] === "_";
             const isPseudo2 = mediaOrPseudo[0] === "0";
-            const isMediaOrPseudo2 = isMedia2 || isPseudo2;
+            const isMediaOrPseudo = isMedia2 || isPseudo2;
             let fullKey = conf.shorthands[shorthand];
             if (isMedia2) {
               let mediaShortKey = mediaOrPseudo.slice(1);
@@ -121,24 +251,24 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
               const pseudoShortKey = mediaOrPseudo.slice(1);
               fullKey += `${PROP_SPLIT}${pseudoShortKey}`;
             }
-            usedKeys.add(fullKey);
-            mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo2);
+            usedKeys[fullKey] = 1;
+            mergeClassName(transforms, classNames, fullKey, cn, isMediaOrPseudo);
           } else {
             nonTamaguis += " " + cn;
           }
         }
         if (nonTamaguis) {
-          usedKeys.add(keyInit);
+          usedKeys[keyInit] = 1;
           mergeClassName(transforms, classNames, keyInit, nonTamaguis);
         }
         continue;
       }
       if (valInit && valInit[0] === "_") {
         const isValidClassName = validStyles[keyInit];
-        const isMediaOrPseudo2 = !isValidClassName && keyInit.includes(PROP_SPLIT) && validStyles[keyInit.split(PROP_SPLIT)[0]];
-        if (isValidClassName || isMediaOrPseudo2) {
-          usedKeys.add(keyInit);
-          mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo2);
+        const isMediaOrPseudo = !isValidClassName && keyInit.includes(PROP_SPLIT) && validStyles[keyInit.split(PROP_SPLIT)[0]];
+        if (isValidClassName || isMediaOrPseudo) {
+          usedKeys[keyInit] = 1;
+          mergeClassName(transforms, classNames, keyInit, valInit, isMediaOrPseudo);
           continue;
         }
       }
@@ -148,11 +278,10 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
         viewProps[keyInit] = valInit;
       }
     }
-    let isMedia = keyInit[0] === "$";
+    let isMedia = isMediaKey(keyInit);
     let isPseudo = validPseudoKeys[keyInit];
-    let isMediaOrPseudo = isMedia || isPseudo;
     if (!isMedia && !isPseudo && !((_a = staticConfig.variants) == null ? void 0 : _a[keyInit]) && !validStyleProps[keyInit] && !conf.shorthands[keyInit]) {
-      usedKeys.add(keyInit);
+      usedKeys[keyInit] = 1;
       viewProps[keyInit] = valInit;
       continue;
     }
@@ -173,25 +302,25 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
       fontFamily = getPropMappedFontFamily(expanded);
     }
     if (process.env.NODE_ENV === "development" && debug === "verbose") {
-      console.log("expanded", expanded);
-      console.log("usedKeys", [...usedKeys]);
+      if (isClient) {
+        console.log("expanded", expanded);
+        console.log("usedKeys", usedKeys);
+      }
       console.groupEnd();
     }
-    if (!expanded) {
+    if (!expanded)
       continue;
-    }
     for (const [key, val] of expanded) {
       if (val === void 0)
         continue;
-      isMedia = key[0] === "$";
+      isMedia = isMediaKey(key);
       isPseudo = validPseudoKeys[key];
-      isMediaOrPseudo = isMedia || isPseudo;
-      if (!isMediaOrPseudo) {
-        if (usedKeys.has(key))
-          continue;
+      const isMediaOrPseudo = isMedia || isPseudo;
+      if (!isMediaOrPseudo && usedKeys[key]) {
+        continue;
       }
-      if (staticConfig.deoptProps && staticConfig.deoptProps.has(key) || staticConfig.inlineProps && staticConfig.inlineProps.has(key) || staticConfig.inlineWhenUnflattened && staticConfig.inlineWhenUnflattened.has(key)) {
-        usedKeys.add(key);
+      if (((_b = staticConfig.deoptProps) == null ? void 0 : _b.has(key)) || ((_c = staticConfig.inlineProps) == null ? void 0 : _c.has(key)) || ((_d = staticConfig.inlineWhenUnflattened) == null ? void 0 : _d.has(key))) {
+        usedKeys[key] = 1;
         viewProps[key] = props[key] ?? val;
       }
       if (isPseudo) {
@@ -200,7 +329,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
         if (key === "enterStyle" && state.mounted) {
           continue;
         }
-        pseudos[key] = pseudos[key] || {};
+        pseudos[key] ??= {};
         const pseudoStyleObject = getSubStyle(
           key,
           val,
@@ -216,17 +345,21 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
           ...pseudoStyleObject,
           ...pseudos[key]
         };
-        if (shouldDoClasses && key !== "enterStyle" && key !== "exitStyle") {
+        if (key === "enterStyle" || key === "exitStyle") {
+          continue;
+        }
+        if (shouldDoClasses) {
           const pseudoStyles = getAtomicStyle(pseudoStyleObject, pseudoDescriptors[key]);
           for (const style2 of pseudoStyles) {
-            const postfix = ((_b = pseudoDescriptors[key]) == null ? void 0 : _b.name) || key;
+            const postfix = ((_e = pseudoDescriptors[key]) == null ? void 0 : _e.name) || key;
             const fullKey = `${style2.property}${PROP_SPLIT}${postfix}`;
-            if (!usedKeys.has(fullKey)) {
-              usedKeys.add(fullKey);
+            if (!usedKeys[fullKey]) {
+              usedKeys[fullKey] = 1;
               addStyleToInsertRules(rulesToInsert, style2);
               mergeClassName(transforms, classNames, fullKey, style2.identifier, isMediaOrPseudo);
             }
           }
+        } else {
         }
         continue;
       }
@@ -234,18 +367,6 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
         const mediaKey = key;
         const mediaKeyShort = mediaKey.slice(1);
         mediaKeys.push(mediaKeyShort);
-        if (!mediaQueryConfig[mediaKeyShort]) {
-          if (process.env.NODE_ENV === "development" && debug) {
-            console.warn(
-              `Warning: using a $ prefixed prop that doesn't match to a media query, may be an error`,
-              key
-            );
-          }
-          if (!usedKeys.has(key)) {
-            viewProps[key] = val;
-          }
-          continue;
-        }
         const mediaStyle = getSubStyle(
           key,
           val,
@@ -264,34 +385,24 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
           for (const style2 of mediaStyles) {
             const out = createMediaStyle(style2, mediaKeyShort, mediaQueryConfig);
             const fullKey = `${style2.property}${PROP_SPLIT}${mediaKeyShort}`;
-            if (!usedKeys.has(fullKey)) {
-              usedKeys.add(fullKey);
+            if (!usedKeys[fullKey]) {
+              usedKeys[fullKey] = 1;
               addStyleToInsertRules(rulesToInsert, out);
               mergeClassName(transforms, classNames, fullKey, out.identifier, true);
             }
           }
-        } else {
-          if (mediaState[mediaKeyShort]) {
-            if (process.env.NODE_ENV === "development" && debug) {
-              console.log("apply media style", mediaKey, mediaState);
-            }
-            if (shouldDoClasses) {
-              Object.assign(medias, mediaStyle);
-            } else {
-              for (const key2 in mediaStyle) {
-                usedKeys.add(key2);
-                style[key2] = mediaStyle[key2];
-                if (key2 === "fontFamily") {
-                  fontFamily = mediaStyle[key2];
-                }
-              }
+        } else if (mediaState[mediaKeyShort]) {
+          for (const key2 in mediaStyle) {
+            const didMerge = mergeMediaByImportance(style, key2, mediaStyle[key2], usedKeys);
+            if (didMerge && key2 === "fontFamily") {
+              fontFamily = mediaStyle[key2];
             }
           }
         }
         continue;
       }
       if (!isWeb && key === "pointerEvents") {
-        usedKeys.add(key);
+        usedKeys[key] = 1;
         viewProps[key] = val;
         continue;
       }
@@ -299,7 +410,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
         fontFamily = valInit[0] === "$" ? valInit : val;
       }
       if (validStyleProps[key]) {
-        usedKeys.add(key);
+        usedKeys[key] = 1;
         if (val && val[0] === "_") {
           classNames[key] = val;
         } else if (key in stylePropsTransform) {
@@ -312,7 +423,7 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
       if (!staticConfig.variants || !(key in staticConfig.variants)) {
         if (!skipProps[key]) {
           viewProps[key] = val;
-          usedKeys.add(key);
+          usedKeys[key] = 1;
         }
       }
     }
@@ -321,10 +432,26 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
   if (isWeb) {
     styleToCSS(style);
   }
-  if (defaultClassNames) {
-    for (const key in defaultClassNames) {
-      if (!(key in classNames)) {
-        classNames[key] = defaultClassNames[key];
+  if (parentSplitStyles) {
+    if (process.env.TAMAGUI_TARGET === "web") {
+      for (const key in parentSplitStyles.classNames) {
+        if (key in classNames)
+          continue;
+        if (key in style)
+          continue;
+        const val = parentSplitStyles.classNames[key];
+        if (!shouldDoClasses) {
+          style[key] = reverseMapClassNameToValue(key, val);
+        } else {
+          classNames[key] = val;
+        }
+      }
+    }
+    if (!shouldDoClasses) {
+      for (const key in parentSplitStyles.style) {
+        if (key in style)
+          continue;
+        style[key] = parentSplitStyles.style[key];
       }
     }
   }
@@ -337,8 +464,6 @@ const getSplitStyles = (props, staticConfig, theme, state, defaultClassNames, la
         mergeClassName(transforms, classNames, key, atomicStyle.identifier);
       }
     }
-  }
-  if (process.env.TAMAGUI_TARGET === "web") {
     if (transforms) {
       for (const namespace in transforms) {
         if (!transforms[namespace]) {
@@ -489,12 +614,14 @@ function addStyleToInsertRules(rulesToInsert, styleObject) {
     rulesToInsert.push(styleObject);
   }
 }
+function processIDRefList(idRefList) {
+  return Array.isArray(idRefList) ? idRefList.join(" ") : idRefList;
+}
 export {
   PROP_SPLIT,
   getSplitStyles,
   getSubStyle,
   insertSplitStyles,
-  pseudoCNInverse,
   useSplitStyles
 };
 //# sourceMappingURL=getSplitStyles.js.map