@ionic/react 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787076261.138d5922

package/dist/index.js

@@ -1084,6 +1084,13 @@ const NON_BOOLEAN_FALSE_ATTRIBUTES = new Set(['draggable', 'translate', 'spell-c
  * can be removed once React 18 support is dropped.
  */
 const isStaleFalseBooleanAttribute = (attribute) => !attribute.startsWith('aria-') && !attribute.startsWith('data-') && !NON_BOOLEAN_FALSE_ATTRIBUTES.has(attribute);
+/**
+ * Assigning `undefined` or `null` to a reflected prop like `id` writes the stringified value, so
+ * the element ends up with `id="undefined"` or `id="null"`. Only native properties are cleaned up
+ * here: a nullish component prop still has to reach the component, and Stencil clears the
+ * attribute for props declared `reflect: true`.
+ */
+const isNativeElementProperty = (name) => name in HTMLElement.prototype;
 const attachProps = (node, newProps, oldProps = {}) => {
     // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
     if (node instanceof Element) {
@@ -1109,12 +1116,19 @@ const attachProps = (node, newProps, oldProps = {}) => {
                 }
             }
             else {
-                node[name] = newProps[name];
-                const propType = typeof newProps[name];
+                const value = newProps[name];
+                node[name] = value;
+                if ((value === undefined || value === null) && isNativeElementProperty(name)) {
+                    // Remove both spellings: the property reflects `accesskey`, and dash-casing writes `access-key`.
+                    node.removeAttribute(name);
+                    node.removeAttribute(camelToDashCase(name));
+                    return;
+                }
+                const propType = typeof value;
                 if (propType === 'string') {
-                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                    node.setAttribute(camelToDashCase(name), value);
                 }
-                else if (newProps[name] === false) {
+                else if (value === false) {
                     const attribute = camelToDashCase(name);
                     if (isStaleFalseBooleanAttribute(attribute)) {
                         node.removeAttribute(attribute);
@@ -2935,6 +2949,13 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
     };
 }
 
+// TODO(FW-2959): types
+/**
+ * A hook for presenting/dismissing an IonModal component
+ * @param component The component that the modal will show. Can be a React Component, a functional component, or a JSX Element
+ * @param componentProps The props that will be passed to the component, if required
+ * @returns Returns the present and dismiss methods in an array
+ */
 function useIonModal(component, componentProps) {
     const controller = useOverlay('IonModal', modalController, defineCustomElement$1c, component, componentProps);
     const present = useCallback((options = {}) => {
@@ -2943,6 +2964,13 @@ function useIonModal(component, componentProps) {
     return [present, controller.dismiss];
 }
 
+// TODO(FW-2959): types
+/**
+ * A hook for presenting/dismissing an IonPicker component
+ * @param component The component that the popover will show. Can be a React Component, a functional component, or a JSX Element
+ * @param componentProps The props that will be passed to the component, if required
+ * @returns Returns the present and dismiss methods in an array
+ */
 function useIonPopover(component, componentProps) {
     const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1d, component, componentProps);
     const present = useCallback((options = {}) => {