@ionic/react 7.5.3-dev.11698856380.18896dcd → 7.5.3-dev.11698858201.14165f23

package/dist/components/IonicReactProps.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/__tests__/utils.spec.js

@@ -0,0 +1,50 @@
+"use strict";
+import * as utils from "../react-component-lib/utils";
+import "@testing-library/jest-dom/extend-expect";
+describe("isCoveredByReact", () => {
+  it("should identify standard events as covered by React", () => {
+    expect(utils.isCoveredByReact("click")).toEqual(true);
+  });
+  it("should identify custom events as not covered by React", () => {
+    expect(utils.isCoveredByReact("change")).toEqual(true);
+    expect(utils.isCoveredByReact("ionchange")).toEqual(false);
+  });
+});
+describe("syncEvent", () => {
+  it("should add event on sync and readd on additional syncs", () => {
+    var div = document.createElement("div");
+    const addEventListener = jest.spyOn(div, "addEventListener");
+    const removeEventListener = jest.spyOn(div, "removeEventListener");
+    const ionClickCallback = jest.fn();
+    utils.syncEvent(div, "ionClick", ionClickCallback);
+    expect(removeEventListener).not.toHaveBeenCalled();
+    expect(addEventListener).toHaveBeenCalledWith("ionClick", expect.any(Function));
+    utils.syncEvent(div, "ionClick", ionClickCallback);
+    expect(removeEventListener).toHaveBeenCalledWith("ionClick", expect.any(Function));
+    expect(addEventListener).toHaveBeenCalledWith("ionClick", expect.any(Function));
+    const event = new CustomEvent("ionClick", { detail: "test" });
+    div.dispatchEvent(event);
+    expect(ionClickCallback).toHaveBeenCalled();
+  });
+});
+describe("attachProps", () => {
+  it("should pass props to a dom node", () => {
+    const onIonClickCallback = () => {
+    };
+    var div = document.createElement("div");
+    utils.attachProps(div, {
+      children: [],
+      style: "color: red",
+      ref: () => {
+      },
+      onClick: () => {
+      },
+      onIonClick: onIonClickCallback,
+      testprop: ["red"]
+    });
+    expect(div.testprop).toEqual(["red"]);
+    expect(div).toHaveStyle(`display: block;`);
+    expect(Object.keys(div.__events)).toEqual(["ionClick"]);
+  });
+});
+//# sourceMappingURL=utils.spec.js.map

package/dist/components/__tests__/utils.spec.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/__tests__/utils.spec.ts"],
+  "sourcesContent": ["import * as utils from '../react-component-lib/utils';\nimport '@testing-library/jest-dom/extend-expect';\n\ndescribe('isCoveredByReact', () => {\n  it('should identify standard events as covered by React', () => {\n    expect(utils.isCoveredByReact('click')).toEqual(true);\n  });\n  it('should identify custom events as not covered by React', () => {\n    expect(utils.isCoveredByReact('change')).toEqual(true);\n    expect(utils.isCoveredByReact('ionchange')).toEqual(false);\n  });\n});\n\ndescribe('syncEvent', () => {\n  it('should add event on sync and readd on additional syncs', () => {\n    var div = document.createElement('div');\n    const addEventListener = jest.spyOn(div, 'addEventListener');\n    const removeEventListener = jest.spyOn(div, 'removeEventListener');\n    const ionClickCallback = jest.fn();\n\n    utils.syncEvent(div, 'ionClick', ionClickCallback);\n    expect(removeEventListener).not.toHaveBeenCalled();\n    expect(addEventListener).toHaveBeenCalledWith('ionClick', expect.any(Function));\n\n    utils.syncEvent(div, 'ionClick', ionClickCallback);\n    expect(removeEventListener).toHaveBeenCalledWith('ionClick', expect.any(Function));\n    expect(addEventListener).toHaveBeenCalledWith('ionClick', expect.any(Function));\n\n    const event = new CustomEvent('ionClick', { detail: 'test' });\n    div.dispatchEvent(event);\n    expect(ionClickCallback).toHaveBeenCalled();\n  });\n});\n\ndescribe('attachProps', () => {\n  it('should pass props to a dom node', () => {\n    const onIonClickCallback = () => {};\n\n    var div = document.createElement('div');\n    utils.attachProps(div, {\n      children: [],\n      style: 'color: red',\n      ref: () => {},\n      onClick: () => {},\n      onIonClick: onIonClickCallback,\n      testprop: ['red'],\n    });\n\n    expect((div as any).testprop).toEqual(['red']);\n    expect(div).toHaveStyle(`display: block;`);\n    expect(Object.keys((div as any).__events)).toEqual(['ionClick']);\n  });\n});\n"],
+  "mappings": ";AAAA,YAAY,WAAW;AACvB,OAAO;AAEP,SAAS,oBAAoB,MAAM;AACjC,KAAG,uDAAuD,MAAM;AAC9D,WAAO,MAAM,iBAAiB,OAAO,CAAC,EAAE,QAAQ,IAAI;AAAA,EACtD,CAAC;AACD,KAAG,yDAAyD,MAAM;AAChE,WAAO,MAAM,iBAAiB,QAAQ,CAAC,EAAE,QAAQ,IAAI;AACrD,WAAO,MAAM,iBAAiB,WAAW,CAAC,EAAE,QAAQ,KAAK;AAAA,EAC3D,CAAC;AACH,CAAC;AAED,SAAS,aAAa,MAAM;AAC1B,KAAG,0DAA0D,MAAM;AACjE,QAAI,MAAM,SAAS,cAAc,KAAK;AACtC,UAAM,mBAAmB,KAAK,MAAM,KAAK,kBAAkB;AAC3D,UAAM,sBAAsB,KAAK,MAAM,KAAK,qBAAqB;AACjE,UAAM,mBAAmB,KAAK,GAAG;AAEjC,UAAM,UAAU,KAAK,YAAY,gBAAgB;AACjD,WAAO,mBAAmB,EAAE,IAAI,iBAAiB;AACjD,WAAO,gBAAgB,EAAE,qBAAqB,YAAY,OAAO,IAAI,QAAQ,CAAC;AAE9E,UAAM,UAAU,KAAK,YAAY,gBAAgB;AACjD,WAAO,mBAAmB,EAAE,qBAAqB,YAAY,OAAO,IAAI,QAAQ,CAAC;AACjF,WAAO,gBAAgB,EAAE,qBAAqB,YAAY,OAAO,IAAI,QAAQ,CAAC;AAE9E,UAAM,QAAQ,IAAI,YAAY,YAAY,EAAE,QAAQ,OAAO,CAAC;AAC5D,QAAI,cAAc,KAAK;AACvB,WAAO,gBAAgB,EAAE,iBAAiB;AAAA,EAC5C,CAAC;AACH,CAAC;AAED,SAAS,eAAe,MAAM;AAC5B,KAAG,mCAAmC,MAAM;AAC1C,UAAM,qBAAqB,MAAM;AAAA,IAAC;AAElC,QAAI,MAAM,SAAS,cAAc,KAAK;AACtC,UAAM,YAAY,KAAK;AAAA,MACrB,UAAU,CAAC;AAAA,MACX,OAAO;AAAA,MACP,KAAK,MAAM;AAAA,MAAC;AAAA,MACZ,SAAS,MAAM;AAAA,MAAC;AAAA,MAChB,YAAY;AAAA,MACZ,UAAU,CAAC,KAAK;AAAA,IAClB,CAAC;AAED,WAAQ,IAAY,QAAQ,EAAE,QAAQ,CAAC,KAAK,CAAC;AAC7C,WAAO,GAAG,EAAE,YAAY,iBAAiB;AACzC,WAAO,OAAO,KAAM,IAAY,QAAQ,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;AAAA,EACjE,CAAC;AACH,CAAC;",
+  "names": []
+}

package/dist/components/createControllerComponent.js

@@ -0,0 +1,80 @@
+"use strict";
+import React from "react";
+import { attachProps, dashToPascalCase, setRef } from "./react-component-lib/utils";
+export const createControllerComponent = (tagName, controller, defineCustomElement) => {
+  if (defineCustomElement) {
+    defineCustomElement();
+  }
+  const displayName = dashToPascalCase(tagName);
+  const didDismissEventName = `on${displayName}DidDismiss`;
+  const didPresentEventName = `on${displayName}DidPresent`;
+  const willDismissEventName = `on${displayName}WillDismiss`;
+  const willPresentEventName = `on${displayName}WillPresent`;
+  class Overlay extends React.Component {
+    constructor(props) {
+      super(props);
+      this.willUnmount = false;
+      this.handleDismiss = this.handleDismiss.bind(this);
+    }
+    static get displayName() {
+      return displayName;
+    }
+    async componentDidMount() {
+      this.willUnmount = false;
+      const { isOpen } = this.props;
+      if (isOpen) {
+        this.present();
+      }
+    }
+    componentWillUnmount() {
+      this.willUnmount = true;
+      if (this.overlay) {
+        this.overlay.dismiss();
+      }
+    }
+    async componentDidUpdate(prevProps) {
+      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+        this.present(prevProps);
+      }
+      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+        await this.overlay.dismiss();
+      }
+    }
+    handleDismiss(event) {
+      if (this.props.onDidDismiss) {
+        this.props.onDidDismiss(event);
+      }
+      setRef(this.props.forwardedRef, null);
+    }
+    async present(prevProps) {
+      const { isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+      if (this.overlay) {
+        this.overlay.remove();
+      }
+      this.overlay = await controller.create({
+        ...cProps
+      });
+      attachProps(
+        this.overlay,
+        {
+          [didDismissEventName]: this.handleDismiss,
+          [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e),
+          [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+          [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e)
+        },
+        prevProps
+      );
+      if (this.props.isOpen === true && this.willUnmount === false) {
+        setRef(this.props.forwardedRef, this.overlay);
+        await this.overlay.present();
+      }
+    }
+    render() {
+      return null;
+    }
+  }
+  return React.forwardRef((props, ref) => {
+    return /* @__PURE__ */ React.createElement(Overlay, { ...props, forwardedRef: ref });
+  });
+};
+//# sourceMappingURL=createControllerComponent.js.map

package/dist/components/createControllerComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/createControllerComponent.tsx"],
+  "sourcesContent": ["import type { OverlayEventDetail } from '@ionic/core/components';\nimport React from 'react';\n\nimport { attachProps, dashToPascalCase, setRef } from './react-component-lib/utils';\n\ninterface OverlayBase extends HTMLElement {\n  present: () => Promise<void>;\n  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;\n}\n\nexport interface ReactControllerProps {\n  isOpen: boolean;\n  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;\n}\n\nexport const createControllerComponent = <OptionsType extends object, OverlayType extends OverlayBase>(\n  tagName: string,\n  controller: { create: (options: OptionsType) => Promise<OverlayType> },\n  defineCustomElement?: () => void\n) => {\n  if (defineCustomElement) {\n    defineCustomElement();\n  }\n\n  const displayName = dashToPascalCase(tagName);\n  const didDismissEventName = `on${displayName}DidDismiss`;\n  const didPresentEventName = `on${displayName}DidPresent`;\n  const willDismissEventName = `on${displayName}WillDismiss`;\n  const willPresentEventName = `on${displayName}WillPresent`;\n\n  type Props = OptionsType &\n    ReactControllerProps & {\n      forwardedRef?: React.ForwardedRef<OverlayType>;\n    };\n\n  class Overlay extends React.Component<Props> {\n    overlay?: OverlayType;\n    willUnmount = false;\n\n    constructor(props: Props) {\n      super(props);\n      this.handleDismiss = this.handleDismiss.bind(this);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n\n    async componentDidMount() {\n      /**\n       * Starting in React v18, strict mode will unmount and remount a component.\n       * See: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors\n       *\n       * We need to reset this flag when the component is re-mounted so that\n       * overlay.present() will be called and the overlay will display.\n       */\n      this.willUnmount = false;\n      const { isOpen } = this.props;\n      if (isOpen as boolean) {\n        this.present();\n      }\n    }\n\n    componentWillUnmount() {\n      this.willUnmount = true;\n      if (this.overlay) {\n        this.overlay.dismiss();\n      }\n    }\n\n    async componentDidUpdate(prevProps: Props) {\n      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {\n        this.present(prevProps);\n      }\n      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {\n        await this.overlay.dismiss();\n      }\n    }\n\n    handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {\n      if (this.props.onDidDismiss) {\n        this.props.onDidDismiss(event);\n      }\n      setRef(this.props.forwardedRef, null);\n    }\n\n    async present(prevProps?: Props) {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;\n\n      if (this.overlay) {\n        this.overlay.remove();\n      }\n\n      this.overlay = await controller.create({\n        ...(cProps as any),\n      });\n      attachProps(\n        this.overlay,\n        {\n          [didDismissEventName]: this.handleDismiss,\n          [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),\n          [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),\n          [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e),\n        },\n        prevProps\n      );\n      // Check isOpen again since the value could have changed during the async call to controller.create\n      // It's also possible for the component to have become unmounted.\n      if (this.props.isOpen === true && this.willUnmount === false) {\n        setRef(this.props.forwardedRef, this.overlay);\n        await this.overlay.present();\n      }\n    }\n\n    render(): null {\n      return null;\n    }\n  }\n\n  return React.forwardRef<OverlayType, Props>((props, ref) => {\n    return <Overlay {...props} forwardedRef={ref} />;\n  });\n};\n"],
+  "mappings": ";AACA,OAAO,WAAW;AAElB,SAAS,aAAa,kBAAkB,cAAc;AAe/C,aAAM,4BAA4B,CACvC,SACA,YACA,wBACG;AACH,MAAI,qBAAqB;AACvB,wBAAoB;AAAA,EACtB;AAEA,QAAM,cAAc,iBAAiB,OAAO;AAC5C,QAAM,sBAAsB,KAAK,WAAW;AAC5C,QAAM,sBAAsB,KAAK,WAAW;AAC5C,QAAM,uBAAuB,KAAK,WAAW;AAC7C,QAAM,uBAAuB,KAAK,WAAW;AAAA,EAO7C,MAAM,gBAAgB,MAAM,UAAiB;AAAA,IAI3C,YAAY,OAAc;AACxB,YAAM,KAAK;AAHb,yBAAc;AAIZ,WAAK,gBAAgB,KAAK,cAAc,KAAK,IAAI;AAAA,IACnD;AAAA,IAEA,WAAW,cAAc;AACvB,aAAO;AAAA,IACT;AAAA,IAEA,MAAM,oBAAoB;AAQxB,WAAK,cAAc;AACnB,YAAM,EAAE,OAAO,IAAI,KAAK;AACxB,UAAI,QAAmB;AACrB,aAAK,QAAQ;AAAA,MACf;AAAA,IACF;AAAA,IAEA,uBAAuB;AACrB,WAAK,cAAc;AACnB,UAAI,KAAK,SAAS;AAChB,aAAK,QAAQ,QAAQ;AAAA,MACvB;AAAA,IACF;AAAA,IAEA,MAAM,mBAAmB,WAAkB;AACzC,UAAI,UAAU,WAAW,KAAK,MAAM,UAAU,KAAK,MAAM,WAAW,MAAM;AACxE,aAAK,QAAQ,SAAS;AAAA,MACxB;AACA,UAAI,KAAK,WAAW,UAAU,WAAW,KAAK,MAAM,UAAU,KAAK,MAAM,WAAW,OAAO;AACzF,cAAM,KAAK,QAAQ,QAAQ;AAAA,MAC7B;AAAA,IACF;AAAA,IAEA,cAAc,OAA6C;AACzD,UAAI,KAAK,MAAM,cAAc;AAC3B,aAAK,MAAM,aAAa,KAAK;AAAA,MAC/B;AACA,aAAO,KAAK,MAAM,cAAc,IAAI;AAAA,IACtC;AAAA,IAEA,MAAM,QAAQ,WAAmB;AAE/B,YAAM,EAAE,QAAQ,cAAc,cAAc,eAAe,eAAe,GAAG,OAAO,IAAI,KAAK;AAE7F,UAAI,KAAK,SAAS;AAChB,aAAK,QAAQ,OAAO;AAAA,MACtB;AAEA,WAAK,UAAU,MAAM,WAAW,OAAO;AAAA,QACrC,GAAI;AAAA,MACN,CAAC;AACD;AAAA,QACE,KAAK;AAAA,QACL;AAAA,UACE,CAAC,mBAAmB,GAAG,KAAK;AAAA,UAC5B,CAAC,mBAAmB,GAAG,CAAC,MAAmB,KAAK,MAAM,gBAAgB,KAAK,MAAM,aAAa,CAAC;AAAA,UAC/F,CAAC,oBAAoB,GAAG,CAAC,MAAmB,KAAK,MAAM,iBAAiB,KAAK,MAAM,cAAc,CAAC;AAAA,UAClG,CAAC,oBAAoB,GAAG,CAAC,MAAmB,KAAK,MAAM,iBAAiB,KAAK,MAAM,cAAc,CAAC;AAAA,QACpG;AAAA,QACA;AAAA,MACF;AAGA,UAAI,KAAK,MAAM,WAAW,QAAQ,KAAK,gBAAgB,OAAO;AAC5D,eAAO,KAAK,MAAM,cAAc,KAAK,OAAO;AAC5C,cAAM,KAAK,QAAQ,QAAQ;AAAA,MAC7B;AAAA,IACF;AAAA,IAEA,SAAe;AACb,aAAO;AAAA,IACT;AAAA,EACF;AAEA,SAAO,MAAM,WAA+B,CAAC,OAAO,QAAQ;AAC1D,WAAO,oCAAC,WAAS,GAAG,OAAO,cAAc,KAAK;AAAA,EAChD,CAAC;AACH;",
+  "names": []
+}

package/dist/components/createInlineOverlayComponent.js

@@ -0,0 +1,114 @@
+"use strict";
+import React, { createElement } from "react";
+import {
+  attachProps,
+  camelToDashCase,
+  dashToPascalCase,
+  isCoveredByReact,
+  mergeRefs
+} from "./react-component-lib/utils";
+import { createForwardRef } from "./utils";
+import { detachProps } from "./utils/detachProps";
+export const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateHost) => {
+  if (defineCustomElement) {
+    defineCustomElement();
+  }
+  const displayName = dashToPascalCase(tagName);
+  const ReactComponent = class extends React.Component {
+    constructor(props) {
+      super(props);
+      this.handleIonMount = () => {
+        this.setState({ isOpen: true });
+      };
+      this.handleWillPresent = (evt) => {
+        this.setState({ isOpen: true });
+        this.props.onWillPresent && this.props.onWillPresent(evt);
+      };
+      this.handleDidDismiss = (evt) => {
+        const wrapper = this.wrapperRef.current;
+        const el = this.ref.current;
+        if (wrapper && el) {
+          el.append(wrapper);
+          this.setState({ isOpen: false });
+        }
+        this.props.onDidDismiss && this.props.onDidDismiss(evt);
+      };
+      this.ref = React.createRef();
+      this.stableMergedRefs = mergeRefs(this.ref, this.props.forwardedRef);
+      this.state = { isOpen: false };
+      this.wrapperRef = React.createRef();
+    }
+    componentDidMount() {
+      this.componentDidUpdate(this.props);
+      this.ref.current?.addEventListener("ionMount", this.handleIonMount);
+      this.ref.current?.addEventListener("willPresent", this.handleWillPresent);
+      this.ref.current?.addEventListener("didDismiss", this.handleDidDismiss);
+    }
+    componentDidUpdate(prevProps) {
+      const node = this.ref.current;
+      const { onDidDismiss, onWillPresent, ...cProps } = this.props;
+      attachProps(node, cProps, prevProps);
+    }
+    componentWillUnmount() {
+      const node = this.ref.current;
+      if (node && this.state.isOpen) {
+        node.removeEventListener("didDismiss", this.handleDidDismiss);
+        node.remove();
+        detachProps(node, this.props);
+      }
+    }
+    render() {
+      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+      const propsToPass = Object.keys(cProps).reduce((acc, name) => {
+        if (name.indexOf("on") === 0 && name[2] === name[2].toUpperCase()) {
+          const eventName = name.substring(2).toLowerCase();
+          if (isCoveredByReact(eventName)) {
+            acc[name] = cProps[name];
+          }
+        } else if (["string", "boolean", "number"].includes(typeof cProps[name])) {
+          acc[camelToDashCase(name)] = cProps[name];
+        }
+        return acc;
+      }, {});
+      const newProps = {
+        ...propsToPass,
+        ref: this.stableMergedRefs,
+        style
+      };
+      const getWrapperClasses = () => {
+        if (hasDelegateHost) {
+          return `${DELEGATE_HOST} ion-page`;
+        }
+        return DELEGATE_HOST;
+      };
+      return createElement(
+        "template",
+        {},
+        createElement(
+          tagName,
+          newProps,
+          /**
+           * We only want the inner component
+           * to be mounted if the overlay is open,
+           * so conditionally render the component
+           * based on the isOpen state.
+           */
+          this.state.isOpen || this.props.keepContentsMounted ? createElement(
+            "div",
+            {
+              ref: this.wrapperRef,
+              className: getWrapperClasses()
+            },
+            children
+          ) : null
+        )
+      );
+    }
+    static get displayName() {
+      return displayName;
+    }
+  };
+  return createForwardRef(ReactComponent, displayName);
+};
+const DELEGATE_HOST = "ion-delegate-host";
+//# sourceMappingURL=createInlineOverlayComponent.js.map

package/dist/components/createInlineOverlayComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/createInlineOverlayComponent.tsx"],
+  "sourcesContent": ["import type { HTMLIonOverlayElement, OverlayEventDetail } from '@ionic/core/components';\nimport React, { createElement } from 'react';\n\nimport {\n  attachProps,\n  camelToDashCase,\n  dashToPascalCase,\n  isCoveredByReact,\n  mergeRefs,\n} from './react-component-lib/utils';\nimport { createForwardRef } from './utils';\nimport { detachProps } from './utils/detachProps';\n\n// TODO(FW-2959): types\n\ntype InlineOverlayState = {\n  isOpen: boolean;\n};\n\ninterface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {\n  forwardedRef?: React.ForwardedRef<ElementType>;\n  ref?: React.Ref<any>;\n  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;\n  keepContentsMounted?: boolean;\n}\n\nexport const createInlineOverlayComponent = <PropType, ElementType>(\n  tagName: string,\n  defineCustomElement?: () => void,\n  hasDelegateHost?: boolean\n) => {\n  if (defineCustomElement) {\n    defineCustomElement();\n  }\n  const displayName = dashToPascalCase(tagName);\n  const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>, InlineOverlayState> {\n    ref: React.RefObject<HTMLIonOverlayElement>;\n    wrapperRef: React.RefObject<HTMLElement>;\n    stableMergedRefs: React.RefCallback<HTMLElement>;\n\n    constructor(props: IonicReactInternalProps<PropType>) {\n      super(props);\n      // Create a local ref to to attach props to the wrapped element.\n      this.ref = React.createRef();\n      // React refs must be stable (not created inline).\n      this.stableMergedRefs = mergeRefs(this.ref, this.props.forwardedRef);\n      // Component is hidden by default\n      this.state = { isOpen: false };\n      // Create a local ref to the inner child element.\n      this.wrapperRef = React.createRef();\n    }\n\n    componentDidMount() {\n      this.componentDidUpdate(this.props);\n\n      this.ref.current?.addEventListener('ionMount', this.handleIonMount);\n      this.ref.current?.addEventListener('willPresent', this.handleWillPresent);\n      this.ref.current?.addEventListener('didDismiss', this.handleDidDismiss);\n    }\n\n    componentDidUpdate(prevProps: IonicReactInternalProps<PropType>) {\n      const node = this.ref.current! as HTMLElement;\n      /**\n       * onDidDismiss and onWillPresent have manual implementations that\n       * will invoke the original handler. We need to filter those out\n       * so they don't get attached twice and called twice.\n       */\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onDidDismiss, onWillPresent, ...cProps } = this.props;\n      attachProps(node, cProps, prevProps);\n    }\n\n    componentWillUnmount() {\n      const node = this.ref.current;\n      /**\n       * If the overlay is being unmounted, but is still\n       * open, this means the unmount was triggered outside\n       * of the overlay being dismissed.\n       *\n       * This can happen with:\n       * - The parent component being unmounted\n       * - The overlay being conditionally rendered\n       * - A route change (push/pop/replace)\n       *\n       * Unmounting the overlay at this stage should skip\n       * the dismiss lifecycle, including skipping the transition.\n       *\n       */\n      if (node && this.state.isOpen) {\n        /**\n         * Detach the local event listener that performs the state updates,\n         * before dismissing the overlay, to prevent the callback handlers\n         * executing after the component has been unmounted. This is to\n         * avoid memory leaks.\n         */\n        node.removeEventListener('didDismiss', this.handleDidDismiss);\n        node.remove();\n        detachProps(node, this.props);\n      }\n    }\n\n    render() {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;\n\n      const propsToPass = Object.keys(cProps).reduce((acc, name) => {\n        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n          const eventName = name.substring(2).toLowerCase();\n          if (isCoveredByReact(eventName)) {\n            (acc as any)[name] = (cProps as any)[name];\n          }\n        } else if (['string', 'boolean', 'number'].includes(typeof (cProps as any)[name])) {\n          (acc as any)[camelToDashCase(name)] = (cProps as any)[name];\n        }\n        return acc;\n      }, {});\n\n      const newProps: IonicReactInternalProps<PropType> = {\n        ...propsToPass,\n        ref: this.stableMergedRefs,\n        style,\n      };\n\n      /**\n       * Some overlays need `.ion-page` so content\n       * takes up the full size of the parent overlay.\n       */\n      const getWrapperClasses = () => {\n        if (hasDelegateHost) {\n          return `${DELEGATE_HOST} ion-page`;\n        }\n\n        return DELEGATE_HOST;\n      };\n\n      return createElement(\n        'template',\n        {},\n        createElement(\n          tagName,\n          newProps,\n          /**\n           * We only want the inner component\n           * to be mounted if the overlay is open,\n           * so conditionally render the component\n           * based on the isOpen state.\n           */\n          this.state.isOpen || this.props.keepContentsMounted\n            ? createElement(\n                'div',\n                {\n                  ref: this.wrapperRef,\n                  className: getWrapperClasses(),\n                },\n                children\n              )\n            : null\n        )\n      );\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n\n    private handleIonMount = () => {\n      /**\n       * Mount the inner component when the\n       * overlay is about to open.\n       *\n       * For ion-popover, this is when `ionMount` is emitted.\n       * For other overlays, this is when `willPresent` is emitted.\n       */\n      this.setState({ isOpen: true });\n    };\n\n    private handleWillPresent = (evt: any) => {\n      this.setState({ isOpen: true });\n      /**\n       * Manually call the onWillPresent\n       * handler if present as setState will\n       * cause the event handlers to be\n       * destroyed and re-created.\n       */\n      this.props.onWillPresent && this.props.onWillPresent(evt);\n    };\n\n    private handleDidDismiss = (evt: any) => {\n      const wrapper = this.wrapperRef.current;\n      const el = this.ref.current;\n\n      /**\n       * This component might be unmounted already, if the containing\n       * element was removed while the overlay was still open. (For\n       * example, if an item contains an inline overlay with a button\n       * that removes the item.)\n       */\n      if (wrapper && el) {\n        el.append(wrapper);\n        this.setState({ isOpen: false });\n      }\n\n      this.props.onDidDismiss && this.props.onDidDismiss(evt);\n    };\n  };\n  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);\n};\n\nconst DELEGATE_HOST = 'ion-delegate-host';\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/createOverlayComponent.js

@@ -0,0 +1,88 @@
+"use strict";
+import React from "react";
+import ReactDOM from "react-dom";
+import { attachProps, dashToPascalCase, setRef } from "./react-component-lib/utils";
+export const createOverlayComponent = (tagName, controller, defineCustomElement) => {
+  if (defineCustomElement !== void 0) {
+    defineCustomElement();
+  }
+  const displayName = dashToPascalCase(tagName);
+  const didDismissEventName = `on${displayName}DidDismiss`;
+  const didPresentEventName = `on${displayName}DidPresent`;
+  const willDismissEventName = `on${displayName}WillDismiss`;
+  const willPresentEventName = `on${displayName}WillPresent`;
+  class Overlay extends React.Component {
+    constructor(props) {
+      super(props);
+      this.isDismissing = false;
+      if (typeof document !== "undefined") {
+        this.el = document.createElement("div");
+      }
+      this.handleDismiss = this.handleDismiss.bind(this);
+    }
+    static get displayName() {
+      return displayName;
+    }
+    componentDidMount() {
+      if (this.props.isOpen) {
+        this.present();
+      }
+    }
+    componentWillUnmount() {
+      if (this.overlay) {
+        this.overlay.dismiss();
+      }
+    }
+    handleDismiss(event) {
+      if (this.props.onDidDismiss) {
+        this.props.onDidDismiss(event);
+      }
+      setRef(this.props.forwardedRef, null);
+    }
+    shouldComponentUpdate(nextProps) {
+      if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {
+        this.isDismissing = true;
+      }
+      return true;
+    }
+    async componentDidUpdate(prevProps) {
+      if (this.overlay) {
+        attachProps(this.overlay, this.props, prevProps);
+      }
+      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {
+        this.present(prevProps);
+      }
+      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {
+        await this.overlay.dismiss();
+        this.isDismissing = false;
+        this.forceUpdate();
+      }
+    }
+    async present(prevProps) {
+      const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;
+      const elementProps = {
+        ...cProps,
+        ref: this.props.forwardedRef,
+        [didDismissEventName]: this.handleDismiss,
+        [didPresentEventName]: (e) => this.props.onDidPresent && this.props.onDidPresent(e),
+        [willDismissEventName]: (e) => this.props.onWillDismiss && this.props.onWillDismiss(e),
+        [willPresentEventName]: (e) => this.props.onWillPresent && this.props.onWillPresent(e)
+      };
+      this.overlay = await controller.create({
+        ...elementProps,
+        component: this.el,
+        componentProps: {}
+      });
+      setRef(this.props.forwardedRef, this.overlay);
+      attachProps(this.overlay, elementProps, prevProps);
+      await this.overlay.present();
+    }
+    render() {
+      return ReactDOM.createPortal(this.props.isOpen || this.isDismissing ? this.props.children : null, this.el);
+    }
+  }
+  return React.forwardRef((props, ref) => {
+    return /* @__PURE__ */ React.createElement(Overlay, { ...props, forwardedRef: ref });
+  });
+};
+//# sourceMappingURL=createOverlayComponent.js.map

package/dist/components/createOverlayComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/createOverlayComponent.tsx"],
+  "sourcesContent": ["import type { OverlayEventDetail } from '@ionic/core/components';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { attachProps, dashToPascalCase, setRef } from './react-component-lib/utils';\n\ninterface OverlayElement extends HTMLElement {\n  present: () => Promise<void>;\n  dismiss: (data?: any, role?: string | undefined) => Promise<boolean>;\n}\n\nexport interface ReactOverlayProps {\n  children?: React.ReactNode;\n  isOpen: boolean;\n  onDidDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;\n  onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;\n}\n\nexport const createOverlayComponent = <OverlayComponent extends object, OverlayType extends OverlayElement>(\n  tagName: string,\n  controller: { create: (options: any) => Promise<OverlayType> },\n  defineCustomElement?: () => void\n) => {\n  if (defineCustomElement !== undefined) {\n    defineCustomElement();\n  }\n\n  const displayName = dashToPascalCase(tagName);\n  const didDismissEventName = `on${displayName}DidDismiss`;\n  const didPresentEventName = `on${displayName}DidPresent`;\n  const willDismissEventName = `on${displayName}WillDismiss`;\n  const willPresentEventName = `on${displayName}WillPresent`;\n\n  type Props = OverlayComponent &\n    ReactOverlayProps & {\n      forwardedRef?: React.ForwardedRef<OverlayType>;\n    };\n\n  class Overlay extends React.Component<Props> {\n    overlay?: OverlayType;\n    el!: HTMLDivElement;\n    isDismissing = false;\n    constructor(props: Props) {\n      super(props);\n      if (typeof document !== 'undefined') {\n        this.el = document.createElement('div');\n      }\n      this.handleDismiss = this.handleDismiss.bind(this);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n\n    componentDidMount() {\n      if (this.props.isOpen) {\n        this.present();\n      }\n    }\n\n    componentWillUnmount() {\n      if (this.overlay) {\n        this.overlay.dismiss();\n      }\n    }\n\n    handleDismiss(event: CustomEvent<OverlayEventDetail<any>>) {\n      if (this.props.onDidDismiss) {\n        this.props.onDidDismiss(event);\n      }\n      setRef(this.props.forwardedRef, null);\n    }\n\n    shouldComponentUpdate(nextProps: Props) {\n      // Check if the overlay component is about to dismiss\n      if (this.overlay && nextProps.isOpen !== this.props.isOpen && nextProps.isOpen === false) {\n        this.isDismissing = true;\n      }\n\n      return true;\n    }\n\n    async componentDidUpdate(prevProps: Props) {\n      if (this.overlay) {\n        attachProps(this.overlay, this.props, prevProps);\n      }\n\n      if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen === true) {\n        this.present(prevProps);\n      }\n      if (this.overlay && prevProps.isOpen !== this.props.isOpen && this.props.isOpen === false) {\n        await this.overlay.dismiss();\n        this.isDismissing = false;\n\n        /**\n         * Now that the overlay is dismissed\n         * we need to render again so that any\n         * inner components will be unmounted\n         */\n        this.forceUpdate();\n      }\n    }\n\n    async present(prevProps?: Props) {\n      /* eslint-disable @typescript-eslint/no-unused-vars */\n      const { children, isOpen, onDidDismiss, onDidPresent, onWillDismiss, onWillPresent, ...cProps } = this.props;\n      const elementProps = {\n        ...cProps,\n        ref: this.props.forwardedRef,\n        [didDismissEventName]: this.handleDismiss,\n        [didPresentEventName]: (e: CustomEvent) => this.props.onDidPresent && this.props.onDidPresent(e),\n        [willDismissEventName]: (e: CustomEvent) => this.props.onWillDismiss && this.props.onWillDismiss(e),\n        [willPresentEventName]: (e: CustomEvent) => this.props.onWillPresent && this.props.onWillPresent(e),\n      };\n      /* eslint-enable @typescript-eslint/no-unused-vars */\n\n      this.overlay = await controller.create({\n        ...elementProps,\n        component: this.el,\n        componentProps: {},\n      });\n\n      setRef(this.props.forwardedRef, this.overlay);\n      attachProps(this.overlay, elementProps, prevProps);\n\n      await this.overlay.present();\n    }\n\n    render() {\n      /**\n       * Continue to render the component even when\n       * overlay is dismissing otherwise component\n       * will be hidden before animation is done.\n       */\n      return ReactDOM.createPortal(this.props.isOpen || this.isDismissing ? this.props.children : null, this.el);\n    }\n  }\n\n  return React.forwardRef<OverlayType, Props>((props, ref) => {\n    return <Overlay {...props} forwardedRef={ref} />;\n  });\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/components/createRoutingComponent.js

@@ -0,0 +1,79 @@
+"use strict";
+import React, { createElement } from "react";
+import { NavContext } from "../contexts/NavContext";
+import {
+  attachProps,
+  camelToDashCase,
+  dashToPascalCase,
+  defineCustomElement,
+  isCoveredByReact,
+  mergeRefs
+} from "./react-component-lib/utils";
+import { createForwardRef } from "./utils";
+export const createRoutingComponent = (tagName, customElement) => {
+  defineCustomElement(tagName, customElement);
+  const displayName = dashToPascalCase(tagName);
+  const ReactComponent = class extends React.Component {
+    constructor(props) {
+      super(props);
+      this.handleClick = (e) => {
+        const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
+        if (routerLink !== void 0) {
+          e.preventDefault();
+          this.context.navigate(routerLink, routerDirection, void 0, routerAnimation, routerOptions);
+        }
+      };
+      this.ref = React.createRef();
+      this.stableMergedRefs = mergeRefs(this.ref, this.props.forwardedRef);
+    }
+    componentDidMount() {
+      this.componentDidUpdate(this.props);
+    }
+    componentDidUpdate(prevProps) {
+      const node = this.ref.current;
+      attachProps(node, this.props, prevProps);
+    }
+    render() {
+      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+      const propsToPass = Object.keys(cProps).reduce((acc, name) => {
+        if (name.indexOf("on") === 0 && name[2] === name[2].toUpperCase()) {
+          const eventName = name.substring(2).toLowerCase();
+          if (isCoveredByReact(eventName)) {
+            acc[name] = cProps[name];
+          }
+        } else if (["string", "boolean", "number"].includes(typeof cProps[name])) {
+          acc[camelToDashCase(name)] = cProps[name];
+        }
+        return acc;
+      }, {});
+      const newProps = {
+        ...propsToPass,
+        ref: this.stableMergedRefs,
+        style
+      };
+      if (this.props.routerLink && !this.props.href) {
+        newProps.href = this.props.routerLink;
+      }
+      if (newProps.onClick) {
+        const oldClick = newProps.onClick;
+        newProps.onClick = (e) => {
+          oldClick(e);
+          if (!e.defaultPrevented) {
+            this.handleClick(e);
+          }
+        };
+      } else {
+        newProps.onClick = this.handleClick;
+      }
+      return createElement(tagName, newProps, children);
+    }
+    static get displayName() {
+      return displayName;
+    }
+    static get contextType() {
+      return NavContext;
+    }
+  };
+  return createForwardRef(ReactComponent, displayName);
+};
+//# sourceMappingURL=createRoutingComponent.js.map

package/dist/components/createRoutingComponent.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/createRoutingComponent.tsx"],
+  "sourcesContent": ["import type { AnimationBuilder } from '@ionic/core/components';\nimport React, { createElement } from 'react';\n\nimport { NavContext } from '../contexts/NavContext';\nimport type { RouterOptions } from '../models';\nimport type { RouterDirection } from '../models/RouterDirection';\n\nimport {\n  attachProps,\n  camelToDashCase,\n  dashToPascalCase,\n  defineCustomElement,\n  isCoveredByReact,\n  mergeRefs,\n} from './react-component-lib/utils';\nimport { createForwardRef } from './utils';\n\n// TODO(FW-2959): types\n\ninterface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {\n  forwardedRef?: React.ForwardedRef<ElementType>;\n  href?: string;\n  routerLink?: string;\n  ref?: React.Ref<any>;\n  routerDirection?: RouterDirection;\n  routerOptions?: RouterOptions;\n  routerAnimation?: AnimationBuilder;\n}\n\nexport const createRoutingComponent = <PropType, ElementType>(tagName: string, customElement?: any) => {\n  defineCustomElement(tagName, customElement);\n\n  const displayName = dashToPascalCase(tagName);\n  const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>> {\n    context!: React.ContextType<typeof NavContext>;\n    ref: React.RefObject<HTMLElement>;\n    stableMergedRefs: React.RefCallback<HTMLElement>;\n\n    constructor(props: IonicReactInternalProps<PropType>) {\n      super(props);\n      // Create a local ref to to attach props to the wrapped element.\n      this.ref = React.createRef();\n      // React refs must be stable (not created inline).\n      this.stableMergedRefs = mergeRefs(this.ref, this.props.forwardedRef);\n    }\n\n    componentDidMount() {\n      this.componentDidUpdate(this.props);\n    }\n\n    componentDidUpdate(prevProps: IonicReactInternalProps<PropType>) {\n      const node = this.ref.current! as HTMLElement;\n      attachProps(node, this.props, prevProps);\n    }\n\n    private handleClick = (e: React.MouseEvent<PropType>) => {\n      const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;\n      if (routerLink !== undefined) {\n        e.preventDefault();\n        this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);\n      }\n    };\n\n    render() {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;\n\n      const propsToPass = Object.keys(cProps).reduce((acc, name) => {\n        if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {\n          const eventName = name.substring(2).toLowerCase();\n          if (isCoveredByReact(eventName)) {\n            (acc as any)[name] = (cProps as any)[name];\n          }\n        } else if (['string', 'boolean', 'number'].includes(typeof (cProps as any)[name])) {\n          (acc as any)[camelToDashCase(name)] = (cProps as any)[name];\n        }\n        return acc;\n      }, {});\n\n      const newProps: IonicReactInternalProps<PropType> = {\n        ...propsToPass,\n        ref: this.stableMergedRefs,\n        style,\n      };\n\n      if (this.props.routerLink && !this.props.href) {\n        newProps.href = this.props.routerLink;\n      }\n      if (newProps.onClick) {\n        const oldClick = newProps.onClick;\n        newProps.onClick = (e: React.MouseEvent<PropType>) => {\n          oldClick(e);\n          if (!e.defaultPrevented) {\n            this.handleClick(e);\n          }\n        };\n      } else {\n        newProps.onClick = this.handleClick;\n      }\n\n      return createElement(tagName, newProps, children);\n    }\n\n    static get displayName() {\n      return displayName;\n    }\n\n    static get contextType() {\n      return NavContext;\n    }\n  };\n  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);\n};\n"],
+  "mappings": ";AACA,OAAO,SAAS,qBAAqB;AAErC,SAAS,kBAAkB;AAI3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AAc1B,aAAM,yBAAyB,CAAwB,SAAiB,kBAAwB;AACrG,sBAAoB,SAAS,aAAa;AAE1C,QAAM,cAAc,iBAAiB,OAAO;AAC5C,QAAM,iBAAiB,cAAc,MAAM,UAA6C;AAAA,IAKtF,YAAY,OAA0C;AACpD,YAAM,KAAK;AAgBb,WAAQ,cAAc,CAAC,MAAkC;AACvD,cAAM,EAAE,YAAY,iBAAiB,eAAe,gBAAgB,IAAI,KAAK;AAC7E,YAAI,eAAe,QAAW;AAC5B,YAAE,eAAe;AACjB,eAAK,QAAQ,SAAS,YAAY,iBAAiB,QAAW,iBAAiB,aAAa;AAAA,QAC9F;AAAA,MACF;AApBE,WAAK,MAAM,MAAM,UAAU;AAE3B,WAAK,mBAAmB,UAAU,KAAK,KAAK,KAAK,MAAM,YAAY;AAAA,IACrE;AAAA,IAEA,oBAAoB;AAClB,WAAK,mBAAmB,KAAK,KAAK;AAAA,IACpC;AAAA,IAEA,mBAAmB,WAA8C;AAC/D,YAAM,OAAO,KAAK,IAAI;AACtB,kBAAY,MAAM,KAAK,OAAO,SAAS;AAAA,IACzC;AAAA,IAUA,SAAS;AAEP,YAAM,EAAE,UAAU,cAAc,OAAO,WAAW,KAAK,GAAG,OAAO,IAAI,KAAK;AAE1E,YAAM,cAAc,OAAO,KAAK,MAAM,EAAE,OAAO,CAAC,KAAK,SAAS;AAC5D,YAAI,KAAK,QAAQ,IAAI,MAAM,KAAK,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,YAAY,GAAG;AACjE,gBAAM,YAAY,KAAK,UAAU,CAAC,EAAE,YAAY;AAChD,cAAI,iBAAiB,SAAS,GAAG;AAC/B,YAAC,IAAY,IAAI,IAAK,OAAe,IAAI;AAAA,UAC3C;AAAA,QACF,WAAW,CAAC,UAAU,WAAW,QAAQ,EAAE,SAAS,OAAQ,OAAe,IAAI,CAAC,GAAG;AACjF,UAAC,IAAY,gBAAgB,IAAI,CAAC,IAAK,OAAe,IAAI;AAAA,QAC5D;AACA,eAAO;AAAA,MACT,GAAG,CAAC,CAAC;AAEL,YAAM,WAA8C;AAAA,QAClD,GAAG;AAAA,QACH,KAAK,KAAK;AAAA,QACV;AAAA,MACF;AAEA,UAAI,KAAK,MAAM,cAAc,CAAC,KAAK,MAAM,MAAM;AAC7C,iBAAS,OAAO,KAAK,MAAM;AAAA,MAC7B;AACA,UAAI,SAAS,SAAS;AACpB,cAAM,WAAW,SAAS;AAC1B,iBAAS,UAAU,CAAC,MAAkC;AACpD,mBAAS,CAAC;AACV,cAAI,CAAC,EAAE,kBAAkB;AACvB,iBAAK,YAAY,CAAC;AAAA,UACpB;AAAA,QACF;AAAA,MACF,OAAO;AACL,iBAAS,UAAU,KAAK;AAAA,MAC1B;AAEA,aAAO,cAAc,SAAS,UAAU,QAAQ;AAAA,IAClD;AAAA,IAEA,WAAW,cAAc;AACvB,aAAO;AAAA,IACT;AAAA,IAEA,WAAW,cAAc;AACvB,aAAO;AAAA,IACT;AAAA,EACF;AACA,SAAO,iBAAwC,gBAAgB,WAAW;AAC5E;",
+  "names": []
+}

package/dist/components/hrefprops.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=hrefprops.js.map

package/dist/components/hrefprops.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}