@hanzogui/react-native-web-internals 2.0.0

package/dist/cjs/modules/UIManager/__tests__/index-test.cjs

@@ -0,0 +1,90 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+    get: () => from[key],
+    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+  });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: !0
+}) : target, mod));
+var import__ = __toESM(require("../index.cjs"), 1);
+const createStyledNode = (name = "div", style = {}) => {
+    const root = document.createElement(name);
+    return Object.keys(style).forEach(prop => {
+      root.style[prop] = style[prop];
+    }), root;
+  },
+  componentStub = {
+    _reactInternalInstance: {
+      _currentElement: {
+        _owner: {}
+      },
+      _debugID: 1
+    }
+  };
+describe("apis/UIManager", () => {
+  describe("focus", () => {
+    test('sets tabIndex="-1" on elements not programmatically focusable by default', () => {
+      const node = createStyledNode();
+      import__.default.focus(node), expect(node.getAttribute("tabIndex")).toEqual("-1");
+    }), test(`doesn't set tabIndex="-1" on elements with an existing tabIndex`, () => {
+      const node = createStyledNode();
+      node.tabIndex = 0, import__.default.focus(node), expect(node.getAttribute("tabIndex")).toEqual("0");
+    }), test(`doesn't set tabIndex="-1" on elements focusable by default`, () => {
+      ["a", "input", "select", "textarea"].forEach(name => {
+        const node = createStyledNode(name);
+        import__.default.focus(node), expect(node.getAttribute("tabIndex")).toBeNull();
+      });
+    });
+  }), describe("updateView", () => {
+    test("supports className alias for class", () => {
+      const node = createStyledNode(),
+        props = {
+          className: "extra"
+        };
+      import__.default.updateView(node, props, componentStub), expect(node.getAttribute("class")).toEqual("extra");
+    }), test("adds correct DOM styles to existing style", () => {
+      const node = createStyledNode("div", {
+          color: "red"
+        }),
+        props = {
+          style: {
+            marginTop: 0,
+            marginBottom: 0,
+            opacity: 0
+          }
+        };
+      import__.default.updateView(node, props, componentStub), expect(node.getAttribute("style")).toEqual("color: red; margin-top: 0px; margin-bottom: 0px; opacity: 0;");
+    }), test("replaces input and textarea text", () => {
+      const node = createStyledNode("textarea");
+      node.value = "initial";
+      const textProp = {
+          text: "expected-text"
+        },
+        valueProp = {
+          value: "expected-value"
+        };
+      import__.default.updateView(node, textProp), expect(node.value).toEqual("expected-text"), import__.default.updateView(node, valueProp), expect(node.value).toEqual("expected-value");
+    }), test("sets other attribute values", () => {
+      const node = createStyledNode(),
+        props = {
+          "aria-level": "4",
+          "data-of-type": "string"
+        };
+      import__.default.updateView(node, props), expect(node.getAttribute("aria-level")).toEqual("4"), expect(node.getAttribute("data-of-type")).toEqual("string");
+    });
+  });
+});

package/dist/cjs/modules/UIManager/index.cjs

@@ -0,0 +1,60 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var UIManager_exports = {};
+__export(UIManager_exports, {
+  UIManager: () => UIManager
+});
+module.exports = __toCommonJS(UIManager_exports);
+var import_use_element_layout = require("@hanzogui/use-element-layout");
+const focusableElements = {
+    A: !0,
+    INPUT: !0,
+    SELECT: !0,
+    TEXTAREA: !0
+  },
+  UIManager = {
+    blur(node) {
+      try {
+        node.blur();
+      } catch {}
+    },
+    focus(node) {
+      try {
+        const name = node.nodeName;
+        node.getAttribute("tabIndex") == null && focusableElements[name] == null && node.setAttribute("tabIndex", "-1"), node.focus();
+      } catch {}
+    },
+    measure(node, callback) {
+      return (0, import_use_element_layout.measure)(node, callback);
+    },
+    measureInWindow(node, callback) {
+      return (0, import_use_element_layout.measureInWindow)(node, callback);
+    },
+    // note its flipped fail and success on purpose lol
+    async measureLayout(node, relativeToNativeNode, onFail, onSuccess) {
+      return measureLayout(node, relativeToNativeNode, onSuccess);
+    },
+    configureNextLayoutAnimation(config, onAnimationDidEnd) {
+      onAnimationDidEnd();
+    },
+    // mocks
+    setLayoutAnimationEnabledExperimental() {}
+  };

package/dist/cjs/modules/canUseDOM.cjs

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var canUseDOM_exports = {};
+__export(canUseDOM_exports, {
+  canUseDOM: () => canUseDOM
+});
+module.exports = __toCommonJS(canUseDOM_exports);
+const canUseDOM = !!(typeof window < "u" && window.document && window.document.createElement);

package/dist/cjs/modules/createDOMProps/__tests__/index-test.cjs

@@ -0,0 +1,156 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+    get: () => from[key],
+    enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+  });
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: !0
+}) : target, mod));
+var import__ = __toESM(require("../index.cjs"), 1);
+const createProps = props => (0, import__.default)(null, props);
+describe("modules/createDOMProps", () => {
+  describe("focus-related accessibility attributes", () => {
+    test("with no accessibility props", () => {
+      expect(createProps({})).toEqual({});
+    }), describe('"accessibilityRole" of "link"', () => {
+      const accessibilityRole = "link";
+      test("default case", () => {
+        expect(createProps({
+          accessibilityRole
+        })).toEqual(expect.not.objectContaining({
+          tabIndex: "-1"
+        }));
+      }), test('when "focusable" is true', () => {
+        expect(createProps({
+          accessibilityRole,
+          focusable: !0
+        })).toEqual(expect.not.objectContaining({
+          tabIndex: "-1"
+        }));
+      }), test('when "focusable" is false', () => {
+        expect(createProps({
+          accessibilityRole,
+          focusable: !1
+        })).toEqual(expect.objectContaining({
+          tabIndex: "-1"
+        }));
+      }), test('when "accessibilityDisabled" is true', () => {
+        expect(createProps({
+          accessibilityRole,
+          accessibilityDisabled: !0
+        })).toEqual(expect.objectContaining({
+          "aria-disabled": !0
+        }));
+      }), test('when "disabled" is false', () => {
+        expect(createProps({
+          accessibilityRole,
+          accessibilityDisabled: !1
+        })).toEqual(expect.not.objectContaining({
+          tabIndex: "-1"
+        }));
+      });
+    });
+    const testFocusableRole = accessibilityRole => {
+      test("default case", () => {
+        expect(createProps({
+          accessibilityRole
+        })).toEqual(expect.objectContaining({
+          tabIndex: "0"
+        }));
+      }), test('when "focusable" is true', () => {
+        expect(createProps({
+          accessibilityRole,
+          focusable: !0
+        })).toEqual(expect.objectContaining({
+          tabIndex: "0"
+        }));
+      }), test('when "focusable" is false', () => {
+        expect(createProps({
+          accessibilityRole,
+          focusable: !1
+        })).toEqual(expect.objectContaining({
+          tabIndex: "-1"
+        }));
+      }), test('when "accessibilityDisabled" is true', () => {
+        expect(createProps({
+          accessibilityRole,
+          accessibilityDisabled: !0
+        })).toEqual(expect.objectContaining({
+          "aria-disabled": !0
+        }));
+      }), test('when "accessibilityDisabled" is false', () => {
+        expect(createProps({
+          accessibilityRole,
+          accessibilityDisabled: !1
+        })).toEqual(expect.objectContaining({
+          tabIndex: "0"
+        }));
+      });
+    };
+    describe('"accessibilityRole" of "button"', () => {
+      testFocusableRole("button");
+    }), describe("with unfocusable accessibilityRole", () => {
+      test('when "focusable" is true', () => {
+        expect(createProps({
+          focusable: !0
+        })).toEqual(expect.objectContaining({
+          tabIndex: "0"
+        }));
+      }), test('when "focusable" is false', () => {
+        expect(createProps({
+          focusable: !1
+        })).toEqual(expect.objectContaining({
+          tabIndex: "-1"
+        }));
+      });
+    });
+  }), test('prop "accessibilityLabel" becomes "aria-label"', () => {
+    const accessibilityLabel = "accessibilityLabel",
+      props = createProps({
+        accessibilityLabel
+      });
+    expect(props["aria-label"]).toEqual(accessibilityLabel);
+  }), test('prop "accessibilityLiveRegion" becomes "aria-live"', () => {
+    const props = createProps({
+      accessibilityLiveRegion: "none"
+    });
+    expect(props["aria-live"]).toEqual("off");
+  }), test('prop "accessibilityRole" becomes "role"', () => {
+    const props = createProps({
+      accessibilityRole: "button"
+    });
+    expect(props.role).toEqual("button");
+  }), test('prop "className" is preserved', () => {
+    const className = "external-class-name",
+      props = createProps({
+        className
+      });
+    expect(props.className).toEqual(className);
+  }), test('prop "nativeID" becomes "id"', () => {
+    const nativeID = "Example.nativeID",
+      props = createProps({
+        nativeID
+      });
+    expect(props.id).toEqual(nativeID);
+  }), test('prop "testID" becomes "data-testid"', () => {
+    const testID = "Example.testID",
+      props = createProps({
+        testID
+      });
+    expect(props["data-testid"]).toEqual(testID);
+  });
+});

package/dist/cjs/modules/createDOMProps/index.cjs

@@ -0,0 +1,179 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: !0
+}), mod);
+var createDOMProps_exports = {};
+__export(createDOMProps_exports, {
+  createDOMProps: () => createDOMProps,
+  stylesFromProps: () => stylesFromProps
+});
+module.exports = __toCommonJS(createDOMProps_exports);
+var import_web = require("@hanzogui/web"),
+  import_AccessibilityUtil = require("../AccessibilityUtil/index.cjs");
+const emptyObject = {},
+  hasOwnProperty = Object.prototype.hasOwnProperty,
+  isArray = Array.isArray,
+  reactNativeOnlyProps = {
+    collapsable: !0,
+    contentContainerStyle: !0,
+    contentOffset: !0,
+    decelerationRate: !0,
+    maintainVisibleContentPosition: !0,
+    onLayout: !0,
+    onMomentumScrollBegin: !0,
+    onMomentumScrollEnd: !0,
+    onMoveShouldSetResponder: !0,
+    onMoveShouldSetResponderCapture: !0,
+    onResponderEnd: !0,
+    onResponderGrant: !0,
+    onResponderMove: !0,
+    onResponderReject: !0,
+    onResponderRelease: !0,
+    onResponderStart: !0,
+    onResponderTerminate: !0,
+    onResponderTerminationRequest: !0,
+    onScrollBeginDrag: !0,
+    onScrollEndDrag: !0,
+    onScrollShouldSetResponder: !0,
+    onScrollShouldSetResponderCapture: !0,
+    onSelectionChangeShouldSetResponder: !0,
+    onSelectionChangeShouldSetResponderCapture: !0,
+    onStartShouldSetResponder: !0,
+    onStartShouldSetResponderCapture: !0,
+    refreshControl: !0,
+    removeClippedSubviews: !0,
+    scrollEnabled: !0,
+    scrollEventThrottle: !0,
+    scrollIndicatorInsets: !0,
+    showsHorizontalScrollIndicator: !0,
+    showsVerticalScrollIndicator: !0,
+    snapToAlignment: !0,
+    snapToEnd: !0,
+    snapToInterval: !0,
+    snapToOffsets: !0,
+    snapToStart: !0,
+    stickyHeaderIndices: !0,
+    ScrollComponent: !0
+  },
+  uppercasePattern = /[A-Z]/g;
+function toHyphenLower(match) {
+  return "-" + match.toLowerCase();
+}
+function hyphenateString(str) {
+  return str.replace(uppercasePattern, toHyphenLower);
+}
+function processIDRefList(idRefList) {
+  return isArray(idRefList) ? idRefList.join(" ") : idRefList;
+}
+function flattenStyle(style) {
+  if (style === null || typeof style != "object") return;
+  if (!isArray(style)) return style;
+  const result = {};
+  for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
+    const computedStyle = flattenStyle(style[i]);
+    if (computedStyle) for (const key in computedStyle) hasOwnProperty.call(computedStyle, key) && (result[key] = computedStyle[key]);
+  }
+  return result;
+}
+const stylesFromProps = /* @__PURE__ */new WeakMap(),
+  createDOMProps = (elementType, props, options) => {
+    props || (props = emptyObject);
+    const {
+      accessibilityActiveDescendant,
+      accessibilityAtomic,
+      accessibilityAutoComplete,
+      accessibilityBusy,
+      accessibilityChecked,
+      accessibilityColumnCount,
+      accessibilityColumnIndex,
+      accessibilityColumnSpan,
+      accessibilityControls,
+      accessibilityCurrent,
+      accessibilityDescribedBy,
+      accessibilityDetails,
+      accessibilityDisabled,
+      accessibilityErrorMessage,
+      accessibilityExpanded,
+      accessibilityFlowTo,
+      accessibilityHasPopup,
+      accessibilityHidden,
+      accessibilityInvalid,
+      accessibilityKeyShortcuts,
+      accessibilityLabel,
+      accessibilityLabelledBy,
+      accessibilityLevel,
+      accessibilityLiveRegion,
+      accessibilityModal,
+      accessibilityMultiline,
+      accessibilityMultiSelectable,
+      accessibilityOrientation,
+      accessibilityOwns,
+      accessibilityPlaceholder,
+      accessibilityPosInSet,
+      accessibilityPressed,
+      accessibilityReadOnly,
+      accessibilityRequired,
+      /* eslint-disable */
+      accessibilityRole,
+      /* eslint-enable */
+      accessibilityRoleDescription,
+      accessibilityRowCount,
+      accessibilityRowIndex,
+      accessibilityRowSpan,
+      accessibilitySelected,
+      accessibilitySetSize,
+      accessibilitySort,
+      accessibilityValueMax,
+      accessibilityValueMin,
+      accessibilityValueNow,
+      accessibilityValueText,
+      dataSet,
+      focusable,
+      nativeID,
+      pointerEvents,
+      style,
+      testID,
+      id,
+      // Rest
+      ...domProps
+    } = props;
+    for (const key in domProps) reactNativeOnlyProps[key] && delete domProps[key];
+    const disabled = accessibilityDisabled,
+      role = import_AccessibilityUtil.AccessibilityUtil.propsToAriaRole(props);
+    accessibilityActiveDescendant != null && (domProps["aria-activedescendant"] = accessibilityActiveDescendant), accessibilityAtomic != null && (domProps["aria-atomic"] = accessibilityAtomic), accessibilityAutoComplete != null && (domProps["aria-autocomplete"] = accessibilityAutoComplete), accessibilityBusy != null && (domProps["aria-busy"] = accessibilityBusy), accessibilityChecked != null && (domProps["aria-checked"] = accessibilityChecked), accessibilityColumnCount != null && (domProps["aria-colcount"] = accessibilityColumnCount), accessibilityColumnIndex != null && (domProps["aria-colindex"] = accessibilityColumnIndex), accessibilityColumnSpan != null && (domProps["aria-colspan"] = accessibilityColumnSpan), accessibilityControls != null && (domProps["aria-controls"] = processIDRefList(accessibilityControls)), accessibilityCurrent != null && (domProps["aria-current"] = accessibilityCurrent), accessibilityDescribedBy != null && (domProps["aria-describedby"] = processIDRefList(accessibilityDescribedBy)), accessibilityDetails != null && (domProps["aria-details"] = accessibilityDetails), disabled === !0 && (domProps["aria-disabled"] = !0, (elementType === "button" || elementType === "form" || elementType === "input" || elementType === "select" || elementType === "textarea") && (domProps.disabled = !0)), accessibilityErrorMessage != null && (domProps["aria-errormessage"] = accessibilityErrorMessage), accessibilityExpanded != null && (domProps["aria-expanded"] = accessibilityExpanded), accessibilityFlowTo != null && (domProps["aria-flowto"] = processIDRefList(accessibilityFlowTo)), accessibilityHasPopup != null && (domProps["aria-haspopup"] = accessibilityHasPopup), accessibilityHidden === !0 && (domProps["aria-hidden"] = accessibilityHidden), accessibilityInvalid != null && (domProps["aria-invalid"] = accessibilityInvalid), accessibilityKeyShortcuts != null && Array.isArray(accessibilityKeyShortcuts) && (domProps["aria-keyshortcuts"] = accessibilityKeyShortcuts.join(" ")), accessibilityLabel != null && (domProps["aria-label"] = accessibilityLabel), accessibilityLabelledBy != null && (domProps["aria-labelledby"] = processIDRefList(accessibilityLabelledBy)), accessibilityLevel != null && (domProps["aria-level"] = accessibilityLevel), accessibilityLiveRegion != null && (domProps["aria-live"] = accessibilityLiveRegion === "none" ? "off" : accessibilityLiveRegion), accessibilityModal != null && (domProps["aria-modal"] = accessibilityModal), accessibilityMultiline != null && (domProps["aria-multiline"] = accessibilityMultiline), accessibilityMultiSelectable != null && (domProps["aria-multiselectable"] = accessibilityMultiSelectable), accessibilityOrientation != null && (domProps["aria-orientation"] = accessibilityOrientation), accessibilityOwns != null && (domProps["aria-owns"] = processIDRefList(accessibilityOwns)), accessibilityPlaceholder != null && (domProps["aria-placeholder"] = accessibilityPlaceholder), accessibilityPosInSet != null && (domProps["aria-posinset"] = accessibilityPosInSet), accessibilityPressed != null && (domProps["aria-pressed"] = accessibilityPressed), accessibilityReadOnly != null && (domProps["aria-readonly"] = accessibilityReadOnly, (elementType === "input" || elementType === "select" || elementType === "textarea") && (domProps.readOnly = !0)), accessibilityRequired != null && (domProps["aria-required"] = accessibilityRequired, (elementType === "input" || elementType === "select" || elementType === "textarea") && (domProps.required = !0)), role != null && (domProps.role = role === "none" ? "presentation" : role), accessibilityRoleDescription != null && (domProps["aria-roledescription"] = accessibilityRoleDescription), accessibilityRowCount != null && (domProps["aria-rowcount"] = accessibilityRowCount), accessibilityRowIndex != null && (domProps["aria-rowindex"] = accessibilityRowIndex), accessibilityRowSpan != null && (domProps["aria-rowspan"] = accessibilityRowSpan), accessibilitySelected != null && (domProps["aria-selected"] = accessibilitySelected), accessibilitySetSize != null && (domProps["aria-setsize"] = accessibilitySetSize), accessibilitySort != null && (domProps["aria-sort"] = accessibilitySort), accessibilityValueMax != null && (domProps["aria-valuemax"] = accessibilityValueMax), accessibilityValueMin != null && (domProps["aria-valuemin"] = accessibilityValueMin), accessibilityValueNow != null && (domProps["aria-valuenow"] = accessibilityValueNow), accessibilityValueText != null && (domProps["aria-valuetext"] = accessibilityValueText);
+    const tmgCN = dataSet ? dataSet.className : void 0,
+      tmgID = dataSet ? dataSet.id : void 0;
+    if (dataSet != null) {
+      for (const dataProp in dataSet) if (!(dataProp === "className" || dataProp === "id") && hasOwnProperty.call(dataSet, dataProp)) {
+        const dataName = hyphenateString(dataProp),
+          dataValue = dataSet[dataProp];
+        dataValue != null && (domProps[`data-${dataName}`] = dataValue);
+      }
+    }
+    focusable === !1 && (domProps.tabIndex = "-1"),
+    // These native elements are keyboard focusable by default
+    elementType === "a" || elementType === "button" || elementType === "input" || elementType === "select" || elementType === "textarea" ? (focusable === !1 || accessibilityDisabled === !0) && (domProps.tabIndex = "-1") : /* These roles are made keyboard focusable by default */role === "button" || role === "checkbox" || role === "link" || role === "radio" || role === "textbox" || role === "switch" ? focusable !== !1 && (domProps.tabIndex = "0") : focusable === !0 && (domProps.tabIndex = "0");
+    const flat = flattenStyle(style);
+    let className = tmgCN || "";
+    props.className && (className += ` ${props.className}`);
+    const stylesAtomic = flat ? (0, import_web.getCSSStylesAtomic)(flat) : [];
+    stylesFromProps.set(domProps, stylesAtomic), domProps.style = stylesAtomic.reduce((acc, [key, value]) => key[0] === "_" || key.startsWith("is_") || key.startsWith("font_") ? (className += ` ${key}`, acc) : (key === "$$css" || key === "" || (acc[key] = value), acc), {}), className && (domProps.className = className);
+    const _id = tmgID || id || nativeID;
+    return _id && (domProps.id = _id), testID != null && (domProps["data-testid"] = testID), domProps;
+  };