@astroapps/aria-base 1.1.0 → 1.2.0

package/lib/Modal.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { AriaModalOverlayProps } from "react-aria";
+import { OverlayTriggerProps, OverlayTriggerState } from "react-stately";
+import { DialogProps, DialogClasses } from "./Dialog";
+export interface ModalClasses {
+    underlayClass?: string;
+    containerClass?: string;
+}
+export interface ModalDialogClasses extends DialogClasses, ModalClasses {
+}
+export declare const DefaultModalDialogClasses: ModalDialogClasses;
+export interface ModalProps extends AriaModalOverlayProps, ModalClasses {
+    state: OverlayTriggerState;
+    children: React.ReactElement;
+}
+export interface ModalDialogTriggerProps extends OverlayTriggerProps, AriaModalOverlayProps {
+    trigger: React.ReactElement;
+    children: React.ReactElement;
+}
+export interface ModalDialogProps extends ModalDialogTriggerProps, Omit<DialogProps, "children">, ModalDialogClasses {
+    footer?: React.ReactNode;
+}
+export declare function Modal({ state, children, isDismissable, isKeyboardDismissDisabled, shouldCloseOnInteractOutside, ...props }: ModalProps): React.JSX.Element;
+export declare function ModalTrigger({ trigger, children, ...props }: ModalDialogTriggerProps): React.JSX.Element;
+export declare function ModalDialog({ children, footer, defaultOpen, isDismissable, titleClass, ...props }: ModalDialogProps): React.JSX.Element;

package/lib/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Button";
 export * from "./Dialog";
 export * from "./Popover";
+export * from "./Modal";

package/lib/index.js

@@ -1,5 +1,6 @@
 var reactAria = require('react-aria');
 var React = require('react');
+var reactStately = require('react-stately');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,17 +19,17 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
+    if (e.includes(n)) continue;
     t[n] = r[n];
   }
   return t;
 }
 
-var _excluded$2 = ["children", "className"];
+var _excluded$3 = ["children", "className"];
 function Button(_ref) {
   var children = _ref.children,
     className = _ref.className,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var ref = React.useRef(null);
   var _useButton = reactAria.useButton(props, ref),
     buttonProps = _useButton.buttonProps;
@@ -38,12 +39,12 @@ function Button(_ref) {
   }));
 }
 
-var _excluded$1 = ["title", "children"];
+var _excluded$2 = ["title", "children"];
 var DefaultDialogClasses = {};
 function Dialog(_ref) {
   var title = _ref.title,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var ref = React.useRef(null);
   var _DefaultDialogClasses = _extends({}, DefaultDialogClasses, props),
     className = _DefaultDialogClasses.className,
@@ -59,7 +60,7 @@ function Dialog(_ref) {
   }), title), children);
 }
 
-var _excluded = ["children", "state", "renderArrow", "portalContainer"];
+var _excluded$1 = ["children", "state", "renderArrow", "portalContainer"];
 var DefaultPopoverClasses = {
   underlayClass: "fixed inset-0",
   popoverClass: "bg-white"
@@ -69,7 +70,7 @@ function Popover(_ref) {
     state = _ref.state,
     renderArrow = _ref.renderArrow,
     portalContainer = _ref.portalContainer,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var popoverRef = React.useRef(null);
   var _DefaultPopoverClasse = _extends({}, DefaultPopoverClasses, props),
     popoverClass = _DefaultPopoverClasse.popoverClass,
@@ -95,9 +96,83 @@ function Popover(_ref) {
   })));
 }
 
+var _excluded = ["state", "children", "isDismissable", "isKeyboardDismissDisabled", "shouldCloseOnInteractOutside"],
+  _excluded2 = ["trigger", "children"],
+  _excluded3 = ["onPress"],
+  _excluded4 = ["children", "footer", "defaultOpen", "isDismissable", "titleClass"];
+var DefaultModalDialogClasses = {
+  underlayClass: "fixed z-[100] inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-[2px]",
+  containerClass: "relative m-4 p-4 w-3/5 min-w-[400px] max-w-[80%] rounded-lg bg-white shadow-sm",
+  className: "w-full h-full min-h-[100px] flex flex-col gap-2 focus-visible:outline-none gap-2"
+};
+function Modal(_ref) {
+  var state = _ref.state,
+    children = _ref.children,
+    isDismissable = _ref.isDismissable,
+    isKeyboardDismissDisabled = _ref.isKeyboardDismissDisabled,
+    shouldCloseOnInteractOutside = _ref.shouldCloseOnInteractOutside,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var ref = React__default["default"].useRef(null);
+  var _useModalOverlay = reactAria.useModalOverlay({
+      isDismissable: isDismissable,
+      isKeyboardDismissDisabled: isKeyboardDismissDisabled,
+      shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
+    }, state, ref),
+    modalProps = _useModalOverlay.modalProps,
+    underlayProps = _useModalOverlay.underlayProps;
+  var _DefaultModalDialogCl = _extends({}, DefaultModalDialogClasses, props),
+    underlayClass = _DefaultModalDialogCl.underlayClass,
+    containerClass = _DefaultModalDialogCl.containerClass;
+  return /*#__PURE__*/React__default["default"].createElement(reactAria.Overlay, null, /*#__PURE__*/React__default["default"].createElement("div", _extends({
+    className: underlayClass
+  }, underlayProps), /*#__PURE__*/React__default["default"].createElement("div", _extends({}, modalProps, {
+    ref: ref,
+    className: containerClass
+  }), children)));
+}
+function ModalTrigger(_ref2) {
+  var trigger = _ref2.trigger,
+    children = _ref2.children,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  var state = reactStately.useOverlayTriggerState(_extends({}, props));
+  var _useOverlayTrigger = reactAria.useOverlayTrigger({
+      type: "dialog"
+    }, state),
+    triggerProps = _useOverlayTrigger.triggerProps,
+    overlayProps = _useOverlayTrigger.overlayProps;
+  var onPress = triggerProps.onPress,
+    otherTriggerProps = _objectWithoutPropertiesLoose(triggerProps, _excluded3);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].cloneElement(trigger, _extends({}, otherTriggerProps, {
+    onClick: onPress
+  })), state.isOpen && /*#__PURE__*/React__default["default"].createElement(Modal, _extends({
+    state: state
+  }, props), React__default["default"].cloneElement(children, overlayProps)));
+}
+function ModalDialog(_ref3) {
+  var children = _ref3.children,
+    footer = _ref3.footer,
+    _ref3$defaultOpen = _ref3.defaultOpen,
+    defaultOpen = _ref3$defaultOpen === void 0 ? false : _ref3$defaultOpen,
+    _ref3$isDismissable = _ref3.isDismissable,
+    isDismissable = _ref3$isDismissable === void 0 ? true : _ref3$isDismissable,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded4);
+  var _DefaultModalDialogCl2 = _extends({}, DefaultModalDialogClasses, props),
+    className = _DefaultModalDialogCl2.className;
+  return /*#__PURE__*/React__default["default"].createElement(ModalTrigger, _extends({
+    defaultOpen: defaultOpen,
+    isDismissable: isDismissable
+  }, props), /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({
+    className: className
+  }, props), children, footer));
+}
+
 exports.Button = Button;
 exports.DefaultDialogClasses = DefaultDialogClasses;
+exports.DefaultModalDialogClasses = DefaultModalDialogClasses;
 exports.DefaultPopoverClasses = DefaultPopoverClasses;
 exports.Dialog = Dialog;
+exports.Modal = Modal;
+exports.ModalDialog = ModalDialog;
+exports.ModalTrigger = ModalTrigger;
 exports.Popover = Popover;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/Button.tsx","../src/Dialog.tsx","../src/Popover.tsx"],"sourcesContent":["import { AriaButtonProps, useButton } from \"react-aria\";\nimport React, { useRef } from \"react\";\n\nexport function Button({\n  children,\n  className,\n  ...props\n}: AriaButtonProps<\"button\"> & { className?: string }) {\n  const ref = useRef(null);\n  const { buttonProps } = useButton(props, ref);\n  return <button {...buttonProps} className={className} children={children} />;\n}\n","import type { AriaDialogProps } from \"react-aria\";\nimport { useDialog } from \"react-aria\";\nimport React, { useRef } from \"react\";\n\nexport interface DialogClasses {\n  className?: string;\n  titleClass?: string;\n}\nexport interface DialogProps extends AriaDialogProps, DialogClasses {\n  title?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport const DefaultDialogClasses: DialogClasses = {};\nexport function Dialog({ title, children, ...props }: DialogProps) {\n  let ref = useRef(null);\n  const { className, titleClass } = {\n    ...DefaultDialogClasses,\n    ...props,\n  };\n  let { dialogProps, titleProps } = useDialog(props, ref);\n\n  return (\n    <div {...dialogProps} ref={ref} className={className}>\n      {title && (\n        <h3 {...titleProps} className={titleClass}>\n          {title}\n        </h3>\n      )}\n      {children}\n    </div>\n  );\n}\n","import type { AriaPopoverProps } from \"react-aria\";\nimport { DismissButton, Overlay, usePopover } from \"react-aria\";\nimport type { OverlayTriggerState } from \"react-stately\";\nimport React, { ReactNode, useRef } from \"react\";\nimport { DOMAttributes } from \"@react-types/shared\";\n\nexport interface PopoverClasses {\n  underlayClass?: string;\n  popoverClass?: string;\n}\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"popoverRef\">,\n    PopoverClasses {\n  children: React.ReactNode;\n  state: OverlayTriggerState;\n  portalContainer?: Element;\n  renderArrow?: (props: DOMAttributes) => ReactNode;\n}\n\nexport const DefaultPopoverClasses = {\n  underlayClass: \"fixed inset-0\",\n  popoverClass: \"bg-white\",\n};\n\nexport function Popover({\n  children,\n  state,\n  renderArrow,\n  portalContainer,\n  ...props\n}: PopoverProps) {\n  let popoverRef = useRef(null);\n  const { popoverClass, underlayClass } = {\n    ...DefaultPopoverClasses,\n    ...props,\n  };\n  let { popoverProps, underlayProps, arrowProps } = usePopover(\n    {\n      ...props,\n      popoverRef,\n    },\n    state,\n  );\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div {...underlayProps} className={underlayClass} />\n      <div\n        {...popoverProps}\n        ref={popoverRef}\n        className={popoverClass}\n        style={popoverProps.style}\n      >\n        {renderArrow?.(arrowProps)}\n        <DismissButton onDismiss={state.close} />\n        {children}\n        <DismissButton onDismiss={state.close} />\n      </div>\n    </Overlay>\n  );\n}\n"],"names":["Button","_ref","children","className","props","_objectWithoutPropertiesLoose","_excluded","ref","useRef","_useButton","useButton","buttonProps","React","createElement","_extends","DefaultDialogClasses","Dialog","title","_DefaultDialogClasses","titleClass","_useDialog","useDialog","dialogProps","titleProps","DefaultPopoverClasses","underlayClass","popoverClass","Popover","state","renderArrow","portalContainer","popoverRef","_DefaultPopoverClasse","_usePopover","usePopover","popoverProps","underlayProps","arrowProps","Overlay","style","DismissButton","onDismiss","close"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAGM,SAAUA,MAAMA,CAAAC,IAAA,EAI+B;AAAA,EAAA,IAHnDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,SAAS,GAAAF,IAAA,CAATE,SAAS;AACNC,IAAAA,KAAK,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,WAAA,CAAA,CAAA;AAER,EAAA,IAAMC,GAAG,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;AACxB,EAAA,IAAAC,UAAA,GAAwBC,mBAAS,CAACN,KAAK,EAAEG,GAAG,CAAC;IAArCI,WAAW,GAAAF,UAAA,CAAXE,WAAW,CAAA;AACnB,EAAA,oBAAOC,yBAAA,CAAAC,aAAA,CAAAC,QAAAA,EAAAA,QAAA,KAAYH,WAAW,EAAA;AAAER,IAAAA,SAAS,EAAEA,SAAU;AAACD,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,EAAG,CAAA;AAC9E;;;ACEaa,IAAAA,oBAAoB,GAAkB,GAAE;AAC/C,SAAUC,MAAMA,CAAAf,IAAA,EAA2C;AAAA,EAAA,IAAxCgB,KAAK,GAAAhB,IAAA,CAALgB,KAAK;IAAEf,QAAQ,GAAAD,IAAA,CAARC,QAAQ;AAAKE,IAAAA,KAAK,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,WAAA,CAAA,CAAA;AAChD,EAAA,IAAIC,GAAG,GAAGC,YAAM,CAAC,IAAI,CAAC,CAAA;AACtB,EAAA,IAAAU,qBAAA,GAAAJ,QAAA,CACKC,EAAAA,EAAAA,oBAAoB,EACpBX,KAAK,CAAA;IAFFD,SAAS,GAAAe,qBAAA,CAATf,SAAS;IAAEgB,UAAU,GAAAD,qBAAA,CAAVC,UAAU,CAAA;AAI7B,EAAA,IAAAC,UAAA,GAAkCC,mBAAS,CAACjB,KAAK,EAAEG,GAAG,CAAC;IAAjDe,WAAW,GAAAF,UAAA,CAAXE,WAAW;IAAEC,UAAU,GAAAH,UAAA,CAAVG,UAAU,CAAA;AAE7B,EAAA,oBACEX,yBAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,QAAA,KAASQ,WAAW,EAAA;AAAEf,IAAAA,GAAG,EAAEA,GAAI;AAACJ,IAAAA,SAAS,EAAEA,SAAAA;GACxCc,CAAAA,EAAAA,KAAK,iBACJL,yBAAA,CAAAC,aAAA,CAAAC,IAAAA,EAAAA,QAAA,KAAQS,UAAU,EAAA;AAAEpB,IAAAA,SAAS,EAAEgB,UAAAA;AAAW,GAAA,CAAA,EACvCF,KACC,CACL,EACAf,QACE,CAAC,CAAA;AAEV;;;ACbO,IAAMsB,qBAAqB,GAAG;AACnCC,EAAAA,aAAa,EAAE,eAAe;AAC9BC,EAAAA,YAAY,EAAE,UAAA;EACf;AAEe,SAAAC,OAAOA,CAAA1B,IAAA,EAMR;AAAA,EAAA,IALbC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACR0B,KAAK,GAAA3B,IAAA,CAAL2B,KAAK;IACLC,WAAW,GAAA5B,IAAA,CAAX4B,WAAW;IACXC,eAAe,GAAA7B,IAAA,CAAf6B,eAAe;AACZ1B,IAAAA,KAAK,GAAAC,6BAAA,CAAAJ,IAAA,EAAAK,SAAA,CAAA,CAAA;AAER,EAAA,IAAIyB,UAAU,GAAGvB,YAAM,CAAC,IAAI,CAAC,CAAA;AAC7B,EAAA,IAAAwB,qBAAA,GAAAlB,QAAA,CACKU,EAAAA,EAAAA,qBAAqB,EACrBpB,KAAK,CAAA;IAFFsB,YAAY,GAAAM,qBAAA,CAAZN,YAAY;IAAED,aAAa,GAAAO,qBAAA,CAAbP,aAAa,CAAA;AAInC,EAAA,IAAAQ,WAAA,GAAkDC,oBAAU,CAAApB,QAAA,KAErDV,KAAK,EAAA;AACR2B,MAAAA,UAAU,EAAVA,UAAAA;AAAU,KAAA,CAAA,EAEZH,KAAK,CACN;IANKO,YAAY,GAAAF,WAAA,CAAZE,YAAY;IAAEC,aAAa,GAAAH,WAAA,CAAbG,aAAa;IAAEC,UAAU,GAAAJ,WAAA,CAAVI,UAAU,CAAA;AAQ7C,EAAA,oBACEzB,yBAAA,CAAAC,aAAA,CAACyB,iBAAO,EAAA;AAACR,IAAAA,eAAe,EAAEA,eAAAA;AAAgB,GAAA,eACxClB,yBAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,QAAA,KAASsB,aAAa,EAAA;AAAEjC,IAAAA,SAAS,EAAEsB,aAAAA;GACnC,CAAA,CAAA,eAAAb,yBAAA,CAAAC,aAAA,CAAAC,KAAAA,EAAAA,QAAA,KACMqB,YAAY,EAAA;AAChB5B,IAAAA,GAAG,EAAEwB,UAAW;AAChB5B,IAAAA,SAAS,EAAEuB,YAAa;IACxBa,KAAK,EAAEJ,YAAY,CAACI,KAAAA;GAEnBV,CAAAA,EAAAA,WAAW,IAAXA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,WAAW,CAAGQ,UAAU,CAAC,eAC1BzB,yBAAA,CAAAC,aAAA,CAAC2B,uBAAa,EAAA;IAACC,SAAS,EAAEb,KAAK,CAACc,KAAAA;GAChC,CAAA,EAACxC,QAAQ,eACTU,yBAAA,CAAAC,aAAA,CAAC2B,uBAAa,EAAA;IAACC,SAAS,EAAEb,KAAK,CAACc,KAAAA;GAClC,CAAK,CACE,CAAC,CAAA;AAEd;;;;;;;;"}
+{"version":3,"file":"index.js","sources":["../src/Button.tsx","../src/Dialog.tsx","../src/Popover.tsx","../src/Modal.tsx"],"sourcesContent":["import { AriaButtonProps, useButton } from \"react-aria\";\nimport React, { useRef } from \"react\";\n\nexport function Button({\n  children,\n  className,\n  ...props\n}: AriaButtonProps<\"button\"> & { className?: string }) {\n  const ref = useRef(null);\n  const { buttonProps } = useButton(props, ref);\n  return <button {...buttonProps} className={className} children={children} />;\n}\n","import type { AriaDialogProps } from \"react-aria\";\nimport { useDialog } from \"react-aria\";\nimport React, { useRef } from \"react\";\n\nexport interface DialogClasses {\n  className?: string;\n  titleClass?: string;\n}\nexport interface DialogProps extends AriaDialogProps, DialogClasses {\n  title?: React.ReactNode;\n  children: React.ReactNode;\n}\n\nexport const DefaultDialogClasses: DialogClasses = {};\nexport function Dialog({ title, children, ...props }: DialogProps) {\n  let ref = useRef(null);\n  const { className, titleClass } = {\n    ...DefaultDialogClasses,\n    ...props,\n  };\n  let { dialogProps, titleProps } = useDialog(props, ref);\n\n  return (\n    <div {...dialogProps} ref={ref} className={className}>\n      {title && (\n        <h3 {...titleProps} className={titleClass}>\n          {title}\n        </h3>\n      )}\n      {children}\n    </div>\n  );\n}\n","import type { AriaPopoverProps } from \"react-aria\";\nimport { DismissButton, Overlay, usePopover } from \"react-aria\";\nimport type { OverlayTriggerState } from \"react-stately\";\nimport React, { ReactNode, useRef } from \"react\";\nimport { DOMAttributes } from \"@react-types/shared\";\n\nexport interface PopoverClasses {\n  underlayClass?: string;\n  popoverClass?: string;\n}\nexport interface PopoverProps\n  extends Omit<AriaPopoverProps, \"popoverRef\">,\n    PopoverClasses {\n  children: React.ReactNode;\n  state: OverlayTriggerState;\n  portalContainer?: Element;\n  renderArrow?: (props: DOMAttributes) => ReactNode;\n}\n\nexport const DefaultPopoverClasses = {\n  underlayClass: \"fixed inset-0\",\n  popoverClass: \"bg-white\",\n};\n\nexport function Popover({\n  children,\n  state,\n  renderArrow,\n  portalContainer,\n  ...props\n}: PopoverProps) {\n  let popoverRef = useRef(null);\n  const { popoverClass, underlayClass } = {\n    ...DefaultPopoverClasses,\n    ...props,\n  };\n  let { popoverProps, underlayProps, arrowProps } = usePopover(\n    {\n      ...props,\n      popoverRef,\n    },\n    state,\n  );\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div {...underlayProps} className={underlayClass} />\n      <div\n        {...popoverProps}\n        ref={popoverRef}\n        className={popoverClass}\n        style={popoverProps.style}\n      >\n        {renderArrow?.(arrowProps)}\n        <DismissButton onDismiss={state.close} />\n        {children}\n        <DismissButton onDismiss={state.close} />\n      </div>\n    </Overlay>\n  );\n}\n","import React from \"react\";\nimport {\n  AriaModalOverlayProps,\n  Overlay,\n  useModalOverlay,\n  useOverlayTrigger,\n} from \"react-aria\";\nimport {\n  OverlayTriggerProps,\n  OverlayTriggerState,\n  useOverlayTriggerState,\n} from \"react-stately\";\nimport { Dialog, DialogProps, DialogClasses } from \"./Dialog\";\n\nexport interface ModalClasses {\n  underlayClass?: string;\n  containerClass?: string;\n}\n\nexport interface ModalDialogClasses extends DialogClasses, ModalClasses {}\n\nexport const DefaultModalDialogClasses: ModalDialogClasses = {\n  underlayClass:\n    \"fixed z-[100] inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-[2px]\",\n  containerClass:\n    \"relative m-4 p-4 w-3/5 min-w-[400px] max-w-[80%] rounded-lg bg-white shadow-sm\",\n  className:\n    \"w-full h-full min-h-[100px] flex flex-col gap-2 focus-visible:outline-none gap-2\",\n};\n\nexport interface ModalProps extends AriaModalOverlayProps, ModalClasses {\n  state: OverlayTriggerState;\n  children: React.ReactElement;\n}\n\nexport interface ModalDialogTriggerProps\n  extends OverlayTriggerProps,\n    AriaModalOverlayProps {\n  trigger: React.ReactElement;\n  children: React.ReactElement;\n}\n\nexport interface ModalDialogProps\n  extends ModalDialogTriggerProps,\n    Omit<DialogProps, \"children\">,\n    ModalDialogClasses {\n  footer?: React.ReactNode;\n}\n\nexport function Modal({\n  state,\n  children,\n  isDismissable,\n  isKeyboardDismissDisabled,\n  shouldCloseOnInteractOutside,\n  ...props\n}: ModalProps) {\n  let ref = React.useRef(null);\n  let { modalProps, underlayProps } = useModalOverlay(\n    { isDismissable, isKeyboardDismissDisabled, shouldCloseOnInteractOutside },\n    state,\n    ref,\n  );\n\n  const { underlayClass, containerClass } = {\n    ...DefaultModalDialogClasses,\n    ...props,\n  };\n\n  return (\n    <Overlay>\n      <div className={underlayClass} {...underlayProps}>\n        <div {...modalProps} ref={ref} className={containerClass}>\n          {children}\n        </div>\n      </div>\n    </Overlay>\n  );\n}\n\nexport function ModalTrigger({\n  trigger,\n  children,\n  ...props\n}: ModalDialogTriggerProps) {\n  let state = useOverlayTriggerState({ ...props });\n  let { triggerProps, overlayProps } = useOverlayTrigger(\n    { type: \"dialog\" },\n    state,\n  );\n\n  const { onPress, ...otherTriggerProps } = triggerProps;\n  return (\n    <>\n      {React.cloneElement(trigger, { ...otherTriggerProps, onClick: onPress })}\n      {state.isOpen && (\n        <Modal state={state} {...props}>\n          {React.cloneElement(children, overlayProps)}\n        </Modal>\n      )}\n    </>\n  );\n}\n\nexport function ModalDialog({\n  children,\n  footer,\n  defaultOpen = false,\n  isDismissable = true,\n  titleClass = \"text-2xl font-bold\",\n  ...props\n}: ModalDialogProps) {\n  const { className } = {\n    ...DefaultModalDialogClasses,\n    ...props,\n  };\n\n  return (\n    <ModalTrigger\n      defaultOpen={defaultOpen}\n      isDismissable={isDismissable}\n      {...props}\n    >\n      <Dialog className={className} {...props}>\n        {children}\n        {footer}\n      </Dialog>\n    </ModalTrigger>\n  );\n}\n"],"names":["Button","_ref","children","className","props","_objectWithoutPropertiesLoose","_excluded","ref","useRef","_useButton","useButton","buttonProps","React","createElement","_extends","DefaultDialogClasses","Dialog","title","_DefaultDialogClasses","titleClass","_useDialog","useDialog","dialogProps","titleProps","DefaultPopoverClasses","underlayClass","popoverClass","Popover","state","renderArrow","portalContainer","popoverRef","_DefaultPopoverClasse","_usePopover","usePopover","popoverProps","underlayProps","arrowProps","Overlay","style","DismissButton","onDismiss","close","DefaultModalDialogClasses","containerClass","Modal","isDismissable","isKeyboardDismissDisabled","shouldCloseOnInteractOutside","_useModalOverlay","useModalOverlay","modalProps","_DefaultModalDialogCl","ModalTrigger","_ref2","trigger","_excluded2","useOverlayTriggerState","_useOverlayTrigger","useOverlayTrigger","type","triggerProps","overlayProps","onPress","otherTriggerProps","_excluded3","Fragment","cloneElement","onClick","isOpen","ModalDialog","_ref3","footer","_ref3$defaultOpen","defaultOpen","_ref3$isDismissable","_excluded4","_DefaultModalDialogCl2"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astroapps/aria-base",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -13,16 +13,19 @@
   "publishConfig": {
     "access": "public"
   },
-  "dependencies": {
+  "peerDependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-stately": "^3.31.0",
-    "react-aria": "^3.33.0",
+    "react-dom": "^18.0.0"
+  },
+  "dependencies": {
+    "react-stately": "^3.34.0",
+    "react-aria": "^3.36.0",
     "clsx": "^2"
   },
   "devDependencies": {
+    "react": "^18.2.0",
     "microbundle": "^0.15.1",
-    "typescript": "5.2.2",
+    "typescript": "^5.6.2",
     "@types/react": "^18.2.37",
     "prettier": "^3.0.3",
     "rimraf": "^5.0.7",

package/src/Modal.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import {
+  AriaModalOverlayProps,
+  Overlay,
+  useModalOverlay,
+  useOverlayTrigger,
+} from "react-aria";
+import {
+  OverlayTriggerProps,
+  OverlayTriggerState,
+  useOverlayTriggerState,
+} from "react-stately";
+import { Dialog, DialogProps, DialogClasses } from "./Dialog";
+
+export interface ModalClasses {
+  underlayClass?: string;
+  containerClass?: string;
+}
+
+export interface ModalDialogClasses extends DialogClasses, ModalClasses {}
+
+export const DefaultModalDialogClasses: ModalDialogClasses = {
+  underlayClass:
+    "fixed z-[100] inset-0 bg-black bg-opacity-50 flex items-center justify-center backdrop-blur-[2px]",
+  containerClass:
+    "relative m-4 p-4 w-3/5 min-w-[400px] max-w-[80%] rounded-lg bg-white shadow-sm",
+  className:
+    "w-full h-full min-h-[100px] flex flex-col gap-2 focus-visible:outline-none gap-2",
+};
+
+export interface ModalProps extends AriaModalOverlayProps, ModalClasses {
+  state: OverlayTriggerState;
+  children: React.ReactElement;
+}
+
+export interface ModalDialogTriggerProps
+  extends OverlayTriggerProps,
+    AriaModalOverlayProps {
+  trigger: React.ReactElement;
+  children: React.ReactElement;
+}
+
+export interface ModalDialogProps
+  extends ModalDialogTriggerProps,
+    Omit<DialogProps, "children">,
+    ModalDialogClasses {
+  footer?: React.ReactNode;
+}
+
+export function Modal({
+  state,
+  children,
+  isDismissable,
+  isKeyboardDismissDisabled,
+  shouldCloseOnInteractOutside,
+  ...props
+}: ModalProps) {
+  let ref = React.useRef(null);
+  let { modalProps, underlayProps } = useModalOverlay(
+    { isDismissable, isKeyboardDismissDisabled, shouldCloseOnInteractOutside },
+    state,
+    ref,
+  );
+
+  const { underlayClass, containerClass } = {
+    ...DefaultModalDialogClasses,
+    ...props,
+  };
+
+  return (
+    <Overlay>
+      <div className={underlayClass} {...underlayProps}>
+        <div {...modalProps} ref={ref} className={containerClass}>
+          {children}
+        </div>
+      </div>
+    </Overlay>
+  );
+}
+
+export function ModalTrigger({
+  trigger,
+  children,
+  ...props
+}: ModalDialogTriggerProps) {
+  let state = useOverlayTriggerState({ ...props });
+  let { triggerProps, overlayProps } = useOverlayTrigger(
+    { type: "dialog" },
+    state,
+  );
+
+  const { onPress, ...otherTriggerProps } = triggerProps;
+  return (
+    <>
+      {React.cloneElement(trigger, { ...otherTriggerProps, onClick: onPress })}
+      {state.isOpen && (
+        <Modal state={state} {...props}>
+          {React.cloneElement(children, overlayProps)}
+        </Modal>
+      )}
+    </>
+  );
+}
+
+export function ModalDialog({
+  children,
+  footer,
+  defaultOpen = false,
+  isDismissable = true,
+  titleClass = "text-2xl font-bold",
+  ...props
+}: ModalDialogProps) {
+  const { className } = {
+    ...DefaultModalDialogClasses,
+    ...props,
+  };
+
+  return (
+    <ModalTrigger
+      defaultOpen={defaultOpen}
+      isDismissable={isDismissable}
+      {...props}
+    >
+      <Dialog className={className} {...props}>
+        {children}
+        {footer}
+      </Dialog>
+    </ModalTrigger>
+  );
+}

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./Button";
 export * from "./Dialog";
 export * from "./Popover";
+export * from "./Modal";