@react-native-ohos/native-base 3.4.29-rc.1

package/lib/commonjs/components/composites/Menu/useMenu.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuTypeahead = exports.useMenuOptionItem = exports.useMenuItem = exports.useMenu = exports.useMenuTrigger = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _focus = require("@react-native-aria/focus");
+
+var _utils = require("@react-native-aria/utils");
+
+var _reactNative = require("react-native");
+
+var _ResponsiveQueryProvider = require("../../../utils/useResponsiveQuery/ResponsiveQueryProvider");
+
+var _lodash = _interopRequireDefault(require("lodash.uniqueid"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const useMenuTrigger = ({
+  handleOpen,
+  isOpen
+}) => {
+  let menuTriggerId = (0, _lodash.default)(); // let id = uniqueId();
+
+  const responsiveQueryContext = _react.default.useContext(_ResponsiveQueryProvider.ResponsiveQueryContext);
+
+  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;
+
+  if (!disableCSSMediaQueries) {
+    // This if statement technically breaks the rules of hooks, but is safe
+    // because the condition never changes after mounting.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    menuTriggerId = (0, _utils.useId)();
+  }
+
+  return {
+    'onKeyDownCapture': event => {
+      if ([' ', 'Enter', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
+        event.preventDefault();
+        handleOpen();
+      }
+    },
+    'aria-haspopup': 'menu',
+    'aria-expanded': isOpen ? true : undefined,
+    'nativeID': menuTriggerId
+  };
+};
+
+exports.useMenuTrigger = useMenuTrigger;
+
+const useMenu = () => {
+  const focusManager = (0, _focus.useFocusManager)();
+
+  const onKeyDown = e => {
+    switch (e.key) {
+      case 'ArrowDown':
+        {
+          e.preventDefault(); //@ts-ignore
+
+          focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusNext({
+            wrap: true
+          });
+          break;
+        }
+
+      case 'ArrowUp':
+        {
+          e.preventDefault(); //@ts-ignore
+
+          focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusPrevious({
+            wrap: true
+          });
+          break;
+        }
+    }
+  };
+
+  return {
+    onKeyDown,
+    accessibilityRole: 'menu'
+  };
+};
+
+exports.useMenu = useMenu;
+
+const useMenuItem = ({
+  textValue,
+  ref
+}) => {
+  return {
+    accessibilityRole: 'menuitem',
+    dataSet: {
+      nativebaseMenuItem: textValue
+    },
+    onHoverIn: () => {
+      if (ref.current && _reactNative.Platform.OS === 'web') ref.current.focus();
+    }
+  };
+};
+
+exports.useMenuItem = useMenuItem;
+
+const useMenuOptionItem = ({
+  isChecked,
+  type
+}) => {
+  return {
+    accessibilityRole: 'menuitem' + (_reactNative.Platform.OS === 'web' ? type : ''),
+    accessibilityState: {
+      checked: isChecked
+    },
+    accessibilityChecked: isChecked
+  };
+};
+
+exports.useMenuOptionItem = useMenuOptionItem;
+const ITEM_ATTR = 'data-nativebase-menu-item';
+
+const getValue = element => {
+  var _element$getAttribute;
+
+  return (_element$getAttribute = element.getAttribute(ITEM_ATTR)) !== null && _element$getAttribute !== void 0 ? _element$getAttribute : '';
+};
+
+const useMenuTypeahead = props => {
+  return {
+    onKeyDown(event) {
+      if (props.onKeyDown) {
+        props.onKeyDown(event);
+      }
+
+      if (event.key.length === 1 && !(event.ctrlKey || event.altKey || event.metaKey)) {
+        const container = event.currentTarget;
+        const values = Array.from(container.querySelectorAll("[".concat(ITEM_ATTR, "]"))).map(getValue);
+        const searchKey = event.key;
+        const foundValue = values.find(value => value.toLowerCase().startsWith(searchKey));
+        const newItem = container.querySelector("[".concat(ITEM_ATTR, "=\"").concat(foundValue, "\"]"));
+
+        if (newItem) {
+          /**
+           * Imperative focus during keydown is risky so we prevent React's batching updates
+           * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332
+           */
+          setTimeout(() => newItem.focus());
+        }
+      }
+    }
+
+  };
+};
+
+exports.useMenuTypeahead = useMenuTypeahead;
+//# sourceMappingURL=useMenu.js.map

package/lib/commonjs/components/composites/Menu/useMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useMenu.tsx"],"names":["useMenuTrigger","handleOpen","isOpen","menuTriggerId","responsiveQueryContext","React","useContext","ResponsiveQueryContext","disableCSSMediaQueries","event","includes","key","preventDefault","undefined","useMenu","focusManager","onKeyDown","e","focusNext","wrap","focusPrevious","accessibilityRole","useMenuItem","textValue","ref","dataSet","nativebaseMenuItem","onHoverIn","current","Platform","OS","focus","useMenuOptionItem","isChecked","type","accessibilityState","checked","accessibilityChecked","ITEM_ATTR","getValue","element","getAttribute","useMenuTypeahead","props","length","ctrlKey","altKey","metaKey","container","currentTarget","values","Array","from","querySelectorAll","map","searchKey","foundValue","find","value","toLowerCase","startsWith","newItem","querySelector","setTimeout"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { useFocusManager } from '@react-native-aria/focus';\r\nimport { useId } from '@react-native-aria/utils';\r\nimport { AccessibilityRole, Platform } from 'react-native';\r\nimport { ResponsiveQueryContext } from '../../../utils/useResponsiveQuery/ResponsiveQueryProvider';\r\nimport uniqueId from 'lodash.uniqueid';\r\n\r\ntype IMenuTriggerProps = {\r\n  handleOpen: () => void;\r\n  isOpen: boolean;\r\n};\r\n\r\nexport const useMenuTrigger = ({ handleOpen, isOpen }: IMenuTriggerProps) => {\r\n  let menuTriggerId = uniqueId();\r\n\r\n  // let id = uniqueId();\r\n  const responsiveQueryContext = React.useContext(ResponsiveQueryContext);\r\n  const disableCSSMediaQueries = responsiveQueryContext.disableCSSMediaQueries;\r\n\r\n  if (!disableCSSMediaQueries) {\r\n    // This if statement technically breaks the rules of hooks, but is safe\r\n    // because the condition never changes after mounting.\r\n    // eslint-disable-next-line react-hooks/rules-of-hooks\r\n    menuTriggerId = useId();\r\n  }\r\n  return {\r\n    'onKeyDownCapture': (event: KeyboardEvent) => {\r\n      if ([' ', 'Enter', 'ArrowUp', 'ArrowDown'].includes(event.key)) {\r\n        event.preventDefault();\r\n        handleOpen();\r\n      }\r\n    },\r\n    'aria-haspopup': 'menu',\r\n    'aria-expanded': isOpen ? true : undefined,\r\n    'nativeID': menuTriggerId,\r\n  };\r\n};\r\n\r\nexport const useMenu = () => {\r\n  const focusManager = useFocusManager();\r\n  const onKeyDown = (e: KeyboardEvent) => {\r\n    switch (e.key) {\r\n      case 'ArrowDown': {\r\n        e.preventDefault();\r\n        //@ts-ignore\r\n        focusManager?.focusNext({ wrap: true });\r\n        break;\r\n      }\r\n      case 'ArrowUp': {\r\n        e.preventDefault();\r\n        //@ts-ignore\r\n        focusManager?.focusPrevious({ wrap: true });\r\n        break;\r\n      }\r\n    }\r\n  };\r\n\r\n  return {\r\n    onKeyDown,\r\n    accessibilityRole: 'menu' as AccessibilityRole,\r\n  };\r\n};\r\n\r\nexport const useMenuItem = ({\r\n  textValue,\r\n  ref,\r\n}: {\r\n  textValue: string;\r\n  ref: any;\r\n}) => {\r\n  return {\r\n    accessibilityRole: 'menuitem' as AccessibilityRole,\r\n    dataSet: {\r\n      nativebaseMenuItem: textValue,\r\n    },\r\n    onHoverIn: () => {\r\n      if (ref.current && Platform.OS === 'web') ref.current.focus();\r\n    },\r\n  };\r\n};\r\n\r\nexport const useMenuOptionItem = ({\r\n  isChecked,\r\n  type,\r\n}: {\r\n  isChecked: boolean;\r\n  type: 'checkbox' | 'radio';\r\n}) => {\r\n  return {\r\n    accessibilityRole: ('menuitem' +\r\n      (Platform.OS === 'web' ? type : '')) as AccessibilityRole,\r\n    accessibilityState: {\r\n      checked: isChecked,\r\n    },\r\n    accessibilityChecked: isChecked,\r\n  };\r\n};\r\n\r\nconst ITEM_ATTR = 'data-nativebase-menu-item';\r\nconst getValue = (element: Element) => element.getAttribute(ITEM_ATTR) ?? '';\r\n\r\nexport const useMenuTypeahead = (props: any): any => {\r\n  return {\r\n    onKeyDown(event: KeyboardEvent) {\r\n      if (props.onKeyDown) {\r\n        props.onKeyDown(event);\r\n      }\r\n\r\n      if (\r\n        event.key.length === 1 &&\r\n        !(event.ctrlKey || event.altKey || event.metaKey)\r\n      ) {\r\n        const container = event.currentTarget as HTMLElement;\r\n        const values = Array.from(\r\n          container.querySelectorAll(`[${ITEM_ATTR}]`)\r\n        ).map(getValue);\r\n\r\n        const searchKey = event.key;\r\n\r\n        const foundValue = values.find((value) =>\r\n          value.toLowerCase().startsWith(searchKey)\r\n        );\r\n        const newItem = container.querySelector(\r\n          `[${ITEM_ATTR}=\"${foundValue}\"]`\r\n        );\r\n\r\n        if (newItem) {\r\n          /**\r\n           * Imperative focus during keydown is risky so we prevent React's batching updates\r\n           * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332\r\n           */\r\n          setTimeout(() => (newItem as HTMLElement).focus());\r\n        }\r\n      }\r\n    },\r\n  };\r\n};\r\n"]}

package/lib/commonjs/components/composites/Modal/Context.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ModalContext = /*#__PURE__*/_react.default.createContext({
+  handleClose: () => {},
+  contentSize: {},
+  initialFocusRef: {
+    current: null
+  },
+  finalFocusRef: {
+    current: null
+  },
+  visible: false
+});
+
+exports.ModalContext = ModalContext;
+//# sourceMappingURL=Context.js.map

package/lib/commonjs/components/composites/Modal/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Context.ts"],"names":["ModalContext","React","createContext","handleClose","contentSize","initialFocusRef","current","finalFocusRef","visible"],"mappings":";;;;;;;AAAA;;;;AAEO,MAAMA,YAAY,gBAAGC,eAAMC,aAAN,CAAoB;AAC9CC,EAAAA,WAAW,EAAG,MAAM,CAAE,CADwB;AAE9CC,EAAAA,WAAW,EAAE,EAFiC;AAG9CC,EAAAA,eAAe,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX,GAH6B;AAI9CC,EAAAA,aAAa,EAAE;AAAED,IAAAA,OAAO,EAAE;AAAX,GAJ+B;AAK9CE,EAAAA,OAAO,EAAE;AALqC,CAApB,CAArB","sourcesContent":["import React from 'react';\r\n\r\nexport const ModalContext = React.createContext({\r\n  handleClose: (() => {}) as any,\r\n  contentSize: {} as any,\r\n  initialFocusRef: { current: null } as React.RefObject<any> | undefined,\r\n  finalFocusRef: { current: null } as React.RefObject<any> | undefined,\r\n  visible: false as boolean,\r\n});\r\n"]}

package/lib/commonjs/components/composites/Modal/Modal.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _Backdrop = _interopRequireDefault(require("../Backdrop"));
+
+var _Transitions = require("../Transitions");
+
+var _focus = require("@react-native-aria/focus");
+
+var _hooks = require("../../../hooks");
+
+var _Context = require("./Context");
+
+var _Box = _interopRequireDefault(require("../../primitives/Box"));
+
+var _Transitions2 = require("../../composites/Transitions");
+
+var _utils = require("../../../utils");
+
+var _Overlay = require("../../primitives/Overlay");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Modal = ({
+  children,
+  isOpen,
+  onClose,
+  defaultIsOpen,
+  initialFocusRef,
+  finalFocusRef,
+  avoidKeyboard,
+  closeOnOverlayClick = true,
+  isKeyboardDismissable = true,
+  overlayVisible = true,
+  backdropVisible = true,
+  animationPreset,
+  ...rest
+}, ref) => {
+  const bottomInset = (0, _utils.useKeyboardBottomInset)();
+  const {
+    contentSize,
+    _backdrop,
+    _backdropFade,
+    _fade,
+    _slide,
+    _overlay,
+    useRNModal,
+    ...resolvedProps
+  } = (0, _hooks.usePropsResolution)('Modal', rest);
+  const [visible, setVisible] = (0, _hooks.useControllableState)({
+    value: isOpen,
+    defaultValue: defaultIsOpen,
+    onChange: val => {
+      if (!val) onClose && onClose();
+    }
+  });
+
+  const handleClose = _react.default.useCallback(() => setVisible(false), [setVisible]);
+
+  const child = /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    bottom: avoidKeyboard ? bottomInset + 'px' : undefined
+  }, resolvedProps, {
+    ref: ref,
+    pointerEvents: "box-none"
+  }), children);
+
+  const contextValue = _react.default.useMemo(() => {
+    return {
+      handleClose,
+      contentSize,
+      initialFocusRef,
+      finalFocusRef,
+      visible
+    };
+  }, [handleClose, contentSize, initialFocusRef, finalFocusRef, visible]); //TODO: refactor for responsive prop
+
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(rest)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Overlay.Overlay, _extends({
+    isOpen: visible,
+    onRequestClose: handleClose,
+    isKeyboardDismissable: isKeyboardDismissable,
+    animationPreset: animationPreset,
+    useRNModalOnAndroid: true,
+    useRNModal: useRNModal
+  }, _overlay), /*#__PURE__*/_react.default.createElement(_Context.ModalContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_Transitions2.Fade, _extends({
+    in: visible,
+    style: _reactNative.StyleSheet.absoluteFill
+  }, _backdropFade), overlayVisible && backdropVisible && /*#__PURE__*/_react.default.createElement(_Backdrop.default, _extends({
+    onPress: () => {
+      closeOnOverlayClick && handleClose();
+    }
+  }, _backdrop))), animationPreset === 'slide' ? /*#__PURE__*/_react.default.createElement(_Transitions.Slide, _extends({
+    in: visible
+  }, _slide), /*#__PURE__*/_react.default.createElement(_focus.FocusScope, {
+    contain: visible,
+    autoFocus: visible && !initialFocusRef,
+    restoreFocus: visible && !finalFocusRef
+  }, child)) : /*#__PURE__*/_react.default.createElement(_Transitions2.Fade, _extends({
+    in: visible,
+    style: _reactNative.StyleSheet.absoluteFill
+  }, _fade), /*#__PURE__*/_react.default.createElement(_focus.FocusScope, {
+    contain: visible,
+    autoFocus: visible && !initialFocusRef,
+    restoreFocus: visible && !finalFocusRef
+  }, child))));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(Modal));
+
+exports.default = _default;
+//# sourceMappingURL=Modal.js.map

package/lib/commonjs/components/composites/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Modal.tsx"],"names":["Modal","children","isOpen","onClose","defaultIsOpen","initialFocusRef","finalFocusRef","avoidKeyboard","closeOnOverlayClick","isKeyboardDismissable","overlayVisible","backdropVisible","animationPreset","rest","ref","bottomInset","contentSize","_backdrop","_backdropFade","_fade","_slide","_overlay","useRNModal","resolvedProps","visible","setVisible","value","defaultValue","onChange","val","handleClose","React","useCallback","child","undefined","contextValue","useMemo","StyleSheet","absoluteFill"],"mappings":"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","sourcesContent":["import React, { forwardRef, memo } from 'react';\r\nimport { StyleSheet } from 'react-native';\r\nimport Backdrop from '../Backdrop';\r\nimport { Slide } from '../Transitions';\r\nimport { FocusScope } from '@react-native-aria/focus';\r\nimport { useControllableState, usePropsResolution } from '../../../hooks';\r\nimport { ModalContext } from './Context';\r\nimport Box from '../../primitives/Box';\r\nimport type { IModalProps } from './types';\r\nimport { Fade } from '../../composites/Transitions';\r\nimport { useKeyboardBottomInset } from '../../../utils';\r\nimport { Overlay } from '../../primitives/Overlay';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst Modal = (\r\n  {\r\n    children,\r\n    isOpen,\r\n    onClose,\r\n    defaultIsOpen,\r\n    initialFocusRef,\r\n    finalFocusRef,\r\n    avoidKeyboard,\r\n    closeOnOverlayClick = true,\r\n    isKeyboardDismissable = true,\r\n    overlayVisible = true,\r\n    backdropVisible = true,\r\n    animationPreset,\r\n    ...rest\r\n  }: IModalProps,\r\n  ref: any\r\n) => {\r\n  const bottomInset = useKeyboardBottomInset();\r\n  const {\r\n    contentSize,\r\n    _backdrop,\r\n    _backdropFade,\r\n    _fade,\r\n    _slide,\r\n    _overlay,\r\n    useRNModal,\r\n    ...resolvedProps\r\n  } = usePropsResolution('Modal', rest);\r\n\r\n  const [visible, setVisible] = useControllableState({\r\n    value: isOpen,\r\n    defaultValue: defaultIsOpen,\r\n    onChange: (val) => {\r\n      if (!val) onClose && onClose();\r\n    },\r\n  });\r\n\r\n  const handleClose = React.useCallback(() => setVisible(false), [setVisible]);\r\n\r\n  const child = (\r\n    <Box\r\n      bottom={avoidKeyboard ? bottomInset + 'px' : undefined}\r\n      {...resolvedProps}\r\n      ref={ref}\r\n      pointerEvents=\"box-none\"\r\n    >\r\n      {children}\r\n    </Box>\r\n  );\r\n\r\n  const contextValue = React.useMemo(() => {\r\n    return {\r\n      handleClose,\r\n      contentSize,\r\n      initialFocusRef,\r\n      finalFocusRef,\r\n      visible,\r\n    };\r\n  }, [handleClose, contentSize, initialFocusRef, finalFocusRef, visible]);\r\n\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(rest)) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <Overlay\r\n      isOpen={visible}\r\n      onRequestClose={handleClose}\r\n      isKeyboardDismissable={isKeyboardDismissable}\r\n      animationPreset={animationPreset}\r\n      useRNModalOnAndroid\r\n      useRNModal={useRNModal}\r\n      {..._overlay}\r\n    >\r\n      <ModalContext.Provider value={contextValue}>\r\n        <Fade in={visible} style={StyleSheet.absoluteFill} {..._backdropFade}>\r\n          {overlayVisible && backdropVisible && (\r\n            <Backdrop\r\n              onPress={() => {\r\n                closeOnOverlayClick && handleClose();\r\n              }}\r\n              {..._backdrop}\r\n            />\r\n          )}\r\n        </Fade>\r\n        {animationPreset === 'slide' ? (\r\n          <Slide in={visible} {..._slide}>\r\n            <FocusScope\r\n              contain={visible}\r\n              autoFocus={visible && !initialFocusRef}\r\n              restoreFocus={visible && !finalFocusRef}\r\n            >\r\n              {child}\r\n            </FocusScope>\r\n          </Slide>\r\n        ) : (\r\n          <Fade in={visible} style={StyleSheet.absoluteFill} {..._fade}>\r\n            <FocusScope\r\n              contain={visible}\r\n              autoFocus={visible && !initialFocusRef}\r\n              restoreFocus={visible && !finalFocusRef}\r\n            >\r\n              {child}\r\n            </FocusScope>\r\n          </Fade>\r\n        )}\r\n      </ModalContext.Provider>\r\n    </Overlay>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(Modal));\r\n"]}

package/lib/commonjs/components/composites/Modal/ModalBody.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../../primitives/Box"));
+
+var _hooks = require("../../../hooks");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _ScrollView = require("../../basic/ScrollView");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const ModalBody = ({
+  children,
+  ...props
+}, ref) => {
+  const {
+    _scrollview,
+    ...resolvedProps
+  } = (0, _hooks.usePropsResolution)('ModalBody', props); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_ScrollView.ScrollView, _scrollview, /*#__PURE__*/_react.default.createElement(_Box.default, _extends({}, resolvedProps, {
+    ref: ref
+  }), children));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(ModalBody));
+
+exports.default = _default;
+//# sourceMappingURL=ModalBody.js.map

package/lib/commonjs/components/composites/Modal/ModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ModalBody.tsx"],"names":["ModalBody","children","props","ref","_scrollview","resolvedProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAChB;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CADgB,EAEhBC,GAFgB,KAGb;AACH,QAAM;AAAEC,IAAAA,WAAF;AAAe,OAAGC;AAAlB,MAAoC,+BACxC,WADwC,EAExCH,KAFwC,CAA1C,CADG,CAKH;;AACA,MAAI,kDAAsBA,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,sBACE,6BAAC,sBAAD,EAAgBE,WAAhB,eACE,6BAAC,YAAD,eAASC,aAAT;AAAwB,IAAA,GAAG,EAAEF;AAA7B,MACGF,QADH,CADF,CADF;AAOD,CAnBD;;4BAqBe,+BAAK,uBAAWD,SAAX,CAAL,C","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport Box, { IBoxProps } from '../../primitives/Box';\r\nimport { usePropsResolution } from '../../../hooks';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport { ScrollView, IScrollViewProps } from '../../basic/ScrollView';\r\n\r\nconst ModalBody = (\r\n  { children, ...props }: IBoxProps & { _scrollview?: IScrollViewProps },\r\n  ref?: any\r\n) => {\r\n  const { _scrollview, ...resolvedProps } = usePropsResolution(\r\n    'ModalBody',\r\n    props\r\n  );\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n  return (\r\n    <ScrollView {..._scrollview}>\r\n      <Box {...resolvedProps} ref={ref}>\r\n        {children}\r\n      </Box>\r\n    </ScrollView>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(ModalBody));\r\n"]}

package/lib/commonjs/components/composites/Modal/ModalCloseButton.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Context = require("./Context");
+
+var _hooks = require("../../../hooks");
+
+var _Pressable = require("../../primitives/Pressable");
+
+var _Icons = require("../../primitives/Icon/Icons");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+var _Pressable2 = require("../../primitives/Pressable/Pressable");
+
+var _utils = require("../../../utils");
+
+var _focus = require("@react-native-aria/focus");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const ModalCloseButton = (props, ref) => {
+  const {
+    hoverProps,
+    isHovered
+  } = (0, _Pressable2.useHover)();
+  const {
+    pressableProps,
+    isPressed
+  } = (0, _Pressable2.useIsPressed)();
+  const {
+    focusProps,
+    isFocused
+  } = (0, _Pressable2.useFocus)();
+  const {
+    isFocusVisible,
+    focusProps: focusRingProps
+  } = (0, _focus.useFocusRing)();
+  const {
+    _icon,
+    onPressIn,
+    onPressOut,
+    onHoverIn,
+    onHoverOut,
+    onFocus,
+    onBlur,
+    ...resolvedProps
+  } = (0, _hooks.usePropsResolution)('ModalCloseButton', props, {
+    isHovered,
+    isPressed,
+    isFocused,
+    isFocusVisible
+  });
+
+  const {
+    handleClose
+  } = _react.default.useContext(_Context.ModalContext); //TODO: refactor for responsive prop
+
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Pressable.Pressable, _extends({
+    accessibilityRole: "button",
+    ref: ref,
+    onPressIn: (0, _utils.composeEventHandlers)(onPressIn, pressableProps.onPressIn),
+    onPressOut: (0, _utils.composeEventHandlers)(onPressOut, pressableProps.onPressOut) // @ts-ignore - web only
+    ,
+    onHoverIn: (0, _utils.composeEventHandlers)(onHoverIn, hoverProps.onHoverIn) // @ts-ignore - web only
+    ,
+    onHoverOut: (0, _utils.composeEventHandlers)(onHoverOut, hoverProps.onHoverOut) // @ts-ignore - web only
+    ,
+    onFocus: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onFocus, focusProps.onFocus), focusRingProps.onFocus) // @ts-ignore - web only
+    ,
+    onBlur: (0, _utils.composeEventHandlers)((0, _utils.composeEventHandlers)(onBlur, focusProps.onBlur), focusRingProps.onBlur),
+    onPress: handleClose
+  }, resolvedProps), /*#__PURE__*/_react.default.createElement(_Icons.CloseIcon, _icon));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(ModalCloseButton));
+
+exports.default = _default;
+//# sourceMappingURL=ModalCloseButton.js.map

package/lib/commonjs/components/composites/Modal/ModalCloseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ModalCloseButton.tsx"],"names":["ModalCloseButton","props","ref","hoverProps","isHovered","pressableProps","isPressed","focusProps","isFocused","isFocusVisible","focusRingProps","_icon","onPressIn","onPressOut","onHoverIn","onHoverOut","onFocus","onBlur","resolvedProps","handleClose","React","useContext","ModalContext"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;AAKA;;AACA;;;;;;;;AAEA,MAAMA,gBAAgB,GAAG,CAACC,KAAD,EAAsBC,GAAtB,KAAoC;AAC3D,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA4B,2BAAlC;AACA,QAAM;AAAEC,IAAAA,cAAF;AAAkBC,IAAAA;AAAlB,MAAgC,+BAAtC;AACA,QAAM;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,MAA4B,2BAAlC;AACA,QAAM;AAAEC,IAAAA,cAAF;AAAkBF,IAAAA,UAAU,EAAEG;AAA9B,MAAsD,0BAA5D;AAEA,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,SAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,SAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,OANI;AAOJC,IAAAA,MAPI;AAQJ,OAAGC;AARC,MASF,+BAAmB,kBAAnB,EAAuCjB,KAAvC,EAA8C;AAChDG,IAAAA,SADgD;AAEhDE,IAAAA,SAFgD;AAGhDE,IAAAA,SAHgD;AAIhDC,IAAAA;AAJgD,GAA9C,CATJ;;AAeA,QAAM;AAAEU,IAAAA;AAAF,MAAkBC,eAAMC,UAAN,CAAiBC,qBAAjB,CAAxB,CArB2D,CAsB3D;;;AACA,MAAI,kDAAsBrB,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,sBACE,6BAAC,oBAAD;AACE,IAAA,iBAAiB,EAAC,QADpB;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,SAAS,EAAE,iCAAqBU,SAArB,EAAgCP,cAAc,CAACO,SAA/C,CAHb;AAIE,IAAA,UAAU,EAAE,iCAAqBC,UAArB,EAAiCR,cAAc,CAACQ,UAAhD,CAJd,CAKE;AALF;AAME,IAAA,SAAS,EAAE,iCAAqBC,SAArB,EAAgCX,UAAU,CAACW,SAA3C,CANb,CAOE;AAPF;AAQE,IAAA,UAAU,EAAE,iCAAqBC,UAArB,EAAiCZ,UAAU,CAACY,UAA5C,CARd,CASE;AATF;AAUE,IAAA,OAAO,EAAE,iCACP,iCAAqBC,OAArB,EAA8BT,UAAU,CAACS,OAAzC,CADO,EAEPN,cAAc,CAACM,OAFR,CAVX,CAcE;AAdF;AAeE,IAAA,MAAM,EAAE,iCACN,iCAAqBC,MAArB,EAA6BV,UAAU,CAACU,MAAxC,CADM,EAENP,cAAc,CAACO,MAFT,CAfV;AAmBE,IAAA,OAAO,EAAEE;AAnBX,KAoBMD,aApBN,gBAsBE,6BAAC,gBAAD,EAAeP,KAAf,CAtBF,CADF;AA0BD,CApDD;;4BAsDe,+BAAK,uBAAWX,gBAAX,CAAL,C","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport { ModalContext } from './Context';\r\nimport { usePropsResolution } from '../../../hooks';\r\nimport { Pressable } from '../../primitives/Pressable';\r\nimport { CloseIcon } from '../../primitives/Icon/Icons';\r\nimport type { IButtonProps } from '../../primitives/Button';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\nimport {\r\n  useHover,\r\n  useFocus,\r\n  useIsPressed,\r\n} from '../../primitives/Pressable/Pressable';\r\nimport { composeEventHandlers } from '../../../utils';\r\nimport { useFocusRing } from '@react-native-aria/focus';\r\n\r\nconst ModalCloseButton = (props: IButtonProps, ref?: any) => {\r\n  const { hoverProps, isHovered } = useHover();\r\n  const { pressableProps, isPressed } = useIsPressed();\r\n  const { focusProps, isFocused } = useFocus();\r\n  const { isFocusVisible, focusProps: focusRingProps }: any = useFocusRing();\r\n\r\n  const {\r\n    _icon,\r\n    onPressIn,\r\n    onPressOut,\r\n    onHoverIn,\r\n    onHoverOut,\r\n    onFocus,\r\n    onBlur,\r\n    ...resolvedProps\r\n  } = usePropsResolution('ModalCloseButton', props, {\r\n    isHovered,\r\n    isPressed,\r\n    isFocused,\r\n    isFocusVisible,\r\n  });\r\n  const { handleClose } = React.useContext(ModalContext);\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n  return (\r\n    <Pressable\r\n      accessibilityRole=\"button\"\r\n      ref={ref}\r\n      onPressIn={composeEventHandlers(onPressIn, pressableProps.onPressIn)}\r\n      onPressOut={composeEventHandlers(onPressOut, pressableProps.onPressOut)}\r\n      // @ts-ignore - web only\r\n      onHoverIn={composeEventHandlers(onHoverIn, hoverProps.onHoverIn)}\r\n      // @ts-ignore - web only\r\n      onHoverOut={composeEventHandlers(onHoverOut, hoverProps.onHoverOut)}\r\n      // @ts-ignore - web only\r\n      onFocus={composeEventHandlers(\r\n        composeEventHandlers(onFocus, focusProps.onFocus),\r\n        focusRingProps.onFocus\r\n      )}\r\n      // @ts-ignore - web only\r\n      onBlur={composeEventHandlers(\r\n        composeEventHandlers(onBlur, focusProps.onBlur),\r\n        focusRingProps.onBlur\r\n      )}\r\n      onPress={handleClose}\r\n      {...resolvedProps}\r\n    >\r\n      <CloseIcon {..._icon} />\r\n    </Pressable>\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(ModalCloseButton));\r\n"]}

package/lib/commonjs/components/composites/Modal/ModalContent.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../../primitives/Box"));
+
+var _hooks = require("../../../hooks");
+
+var _Context = require("./Context");
+
+var _reactNative = require("react-native");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const ModalContent = (props, ref) => {
+  const resolvedProps = (0, _hooks.usePropsResolution)('ModalContent', props);
+
+  const {
+    contentSize,
+    initialFocusRef,
+    finalFocusRef,
+    handleClose,
+    visible
+  } = _react.default.useContext(_Context.ModalContext);
+
+  _react.default.useEffect(() => {
+    const finalRefVal = finalFocusRef ? finalFocusRef.current : null;
+
+    if (visible) {
+      if (initialFocusRef && initialFocusRef.current) {
+        //@ts-ignore
+        initialFocusRef.current.focus();
+      }
+    } else {
+      if (finalRefVal) {
+        //@ts-ignore
+        finalRefVal.focus();
+      }
+    }
+  }, [initialFocusRef, finalFocusRef, visible]); //TODO: refactor for responsive prop
+
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({}, contentSize, resolvedProps, {
+    ref: ref,
+    onAccessibilityEscape: handleClose //@ts-ignore - web only
+    ,
+    "aria-modal": "true" //@ts-ignore - web only
+    ,
+    accessibilityRole: _reactNative.Platform.OS === 'web' ? 'dialog' : undefined,
+    accessibilityViewIsModal: true,
+    _web: {
+      focusable: false
+    }
+  }));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(ModalContent));
+
+exports.default = _default;
+//# sourceMappingURL=ModalContent.js.map

package/lib/commonjs/components/composites/Modal/ModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ModalContent.tsx"],"names":["ModalContent","props","ref","resolvedProps","contentSize","initialFocusRef","finalFocusRef","handleClose","visible","React","useContext","ModalContext","useEffect","finalRefVal","current","focus","Platform","OS","undefined","focusable"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,YAAY,GAAG,CAACC,KAAD,EAAmBC,GAAnB,KAAiC;AACpD,QAAMC,aAAa,GAAG,+BAAmB,cAAnB,EAAmCF,KAAnC,CAAtB;;AACA,QAAM;AACJG,IAAAA,WADI;AAEJC,IAAAA,eAFI;AAGJC,IAAAA,aAHI;AAIJC,IAAAA,WAJI;AAKJC,IAAAA;AALI,MAMFC,eAAMC,UAAN,CAAiBC,qBAAjB,CANJ;;AAOAF,iBAAMG,SAAN,CAAgB,MAAM;AACpB,UAAMC,WAAW,GAAGP,aAAa,GAAGA,aAAa,CAACQ,OAAjB,GAA2B,IAA5D;;AACA,QAAIN,OAAJ,EAAa;AACX,UAAIH,eAAe,IAAIA,eAAe,CAACS,OAAvC,EAAgD;AAC9C;AACAT,QAAAA,eAAe,CAACS,OAAhB,CAAwBC,KAAxB;AACD;AACF,KALD,MAKO;AACL,UAAIF,WAAJ,EAAiB;AACf;AACAA,QAAAA,WAAW,CAACE,KAAZ;AACD;AACF;AACF,GAbD,EAaG,CAACV,eAAD,EAAkBC,aAAlB,EAAiCE,OAAjC,CAbH,EAToD,CAwBpD;;;AACA,MAAI,kDAAsBP,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,sBACE,6BAAC,YAAD,eACMG,WADN,EAEMD,aAFN;AAGE,IAAA,GAAG,EAAED,GAHP;AAIE,IAAA,qBAAqB,EAAEK,WAJzB,CAKE;AALF;AAME,kBAAW,MANb,CAOE;AAPF;AAQE,IAAA,iBAAiB,EAAES,sBAASC,EAAT,KAAgB,KAAhB,GAAwB,QAAxB,GAAmCC,SARxD;AASE,IAAA,wBAAwB,MAT1B;AAUE,IAAA,IAAI,EAAE;AAAEC,MAAAA,SAAS,EAAE;AAAb;AAVR,KADF;AAcD,CA1CD;;4BA4Ce,+BAAK,uBAAWnB,YAAX,CAAL,C","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport Box, { IBoxProps } from '../../primitives/Box';\r\nimport { usePropsResolution } from '../../../hooks';\r\nimport { ModalContext } from './Context';\r\nimport { Platform } from 'react-native';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst ModalContent = (props: IBoxProps, ref?: any) => {\r\n  const resolvedProps = usePropsResolution('ModalContent', props);\r\n  const {\r\n    contentSize,\r\n    initialFocusRef,\r\n    finalFocusRef,\r\n    handleClose,\r\n    visible,\r\n  } = React.useContext(ModalContext);\r\n  React.useEffect(() => {\r\n    const finalRefVal = finalFocusRef ? finalFocusRef.current : null;\r\n    if (visible) {\r\n      if (initialFocusRef && initialFocusRef.current) {\r\n        //@ts-ignore\r\n        initialFocusRef.current.focus();\r\n      }\r\n    } else {\r\n      if (finalRefVal) {\r\n        //@ts-ignore\r\n        finalRefVal.focus();\r\n      }\r\n    }\r\n  }, [initialFocusRef, finalFocusRef, visible]);\r\n\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n  return (\r\n    <Box\r\n      {...contentSize}\r\n      {...resolvedProps}\r\n      ref={ref}\r\n      onAccessibilityEscape={handleClose}\r\n      //@ts-ignore - web only\r\n      aria-modal=\"true\"\r\n      //@ts-ignore - web only\r\n      accessibilityRole={Platform.OS === 'web' ? 'dialog' : undefined}\r\n      accessibilityViewIsModal\r\n      _web={{ focusable: false }}\r\n    />\r\n  );\r\n};\r\n\r\nexport default memo(forwardRef(ModalContent));\r\n"]}

package/lib/commonjs/components/composites/Modal/ModalFooter.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../../primitives/Box"));
+
+var _hooks = require("../../../hooks");
+
+var _useHasResponsiveProps = require("../../../hooks/useHasResponsiveProps");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const ModalFooter = (props, ref) => {
+  const resolvedProps = (0, _hooks.usePropsResolution)('ModalFooter', props); //TODO: refactor for responsive prop
+
+  if ((0, _useHasResponsiveProps.useHasResponsiveProps)(props)) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({}, resolvedProps, {
+    ref: ref
+  }));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(ModalFooter));
+
+exports.default = _default;
+//# sourceMappingURL=ModalFooter.js.map

package/lib/commonjs/components/composites/Modal/ModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ModalFooter.tsx"],"names":["ModalFooter","props","ref","resolvedProps"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,MAAMA,WAAW,GAAG,CAACC,KAAD,EAAmBC,GAAnB,KAAiC;AACnD,QAAMC,aAAa,GAAG,+BAAmB,aAAnB,EAAkCF,KAAlC,CAAtB,CADmD,CAEnD;;AACA,MAAI,kDAAsBA,KAAtB,CAAJ,EAAkC;AAChC,WAAO,IAAP;AACD;;AACD,sBAAO,6BAAC,YAAD,eAASE,aAAT;AAAwB,IAAA,GAAG,EAAED;AAA7B,KAAP;AACD,CAPD;;4BASe,+BAAK,uBAAWF,WAAX,CAAL,C","sourcesContent":["import React, { memo, forwardRef } from 'react';\r\nimport Box, { IBoxProps } from '../../primitives/Box';\r\nimport { usePropsResolution } from '../../../hooks';\r\nimport { useHasResponsiveProps } from '../../../hooks/useHasResponsiveProps';\r\n\r\nconst ModalFooter = (props: IBoxProps, ref?: any) => {\r\n  const resolvedProps = usePropsResolution('ModalFooter', props);\r\n  //TODO: refactor for responsive prop\r\n  if (useHasResponsiveProps(props)) {\r\n    return null;\r\n  }\r\n  return <Box {...resolvedProps} ref={ref} />;\r\n};\r\n\r\nexport default memo(forwardRef(ModalFooter));\r\n"]}