@koobiq/react-components 0.0.1-beta.6 → 0.0.1-beta.7

package/dist/components/Modal/Modal.js

@@ -9,19 +9,20 @@ import { Backdrop } from "../Backdrop/Backdrop.js";
 import { Dialog } from "../Dialog/Dialog.js";
 const Modal = forwardRef((props, ref) => {
   const {
-    hideCloseButton = false,
     size = "medium",
-    disableExitOnEscapeKeyDown,
-    disableExitOnClickOutside,
-    disableFocusManagement,
-    portalContainer,
-    open: openProp,
-    hideBackdrop,
-    onOpenChange,
-    defaultOpen,
-    children,
+    hideCloseButton = false,
     control,
+    children,
     slotProps,
+    defaultOpen,
+    hideBackdrop,
+    onOpenChange,
+    open: openProp,
+    portalContainer,
+    disableFocusManagement,
+    disableExitOnClickOutside,
+    disableExitOnEscapeKeyDown,
+    shouldCloseOnInteractOutside,
     ...other
   } = props;
   const state = useOverlayTriggerState({
@@ -41,6 +42,7 @@ const Modal = forwardRef((props, ref) => {
   const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
     {
       ...props,
+      shouldCloseOnInteractOutside,
       isDismissable: !disableExitOnClickOutside,
       isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
     },
@@ -55,9 +57,9 @@ const Modal = forwardRef((props, ref) => {
   };
   const containerProps = mergeProps(
     {
-      className: clsx(s.base, s[size]),
       ref: containerRef,
-      "data-size": size
+      "data-size": size,
+      className: clsx(s.base, s[size])
     },
     other
   );

package/dist/components/Modal/types.d.ts

@@ -58,6 +58,13 @@ export type ModalProps = {
      * @default false
      */
     disableFocusManagement?: boolean;
+    /**
+     * When user interacts with the argument element outside of the overlay ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the overlay.
+     * By default, onClose will always be called on interaction outside the overlay ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

package/dist/components/Popover/Popover.js

@@ -10,35 +10,36 @@ import { Dialog } from "../Dialog/Dialog.js";
 const Popover = forwardRef(
   (props, ref) => {
     const {
-      placement: placementProp = "top",
-      arrowBoundaryOffset = 20,
-      containerPadding = 12,
-      hideArrow = false,
+      offset = 0,
       size = "medium",
       crossOffset = 0,
-      offset = 0,
+      hideArrow = false,
+      containerPadding = 12,
+      arrowBoundaryOffset = 20,
+      placement: placementProp = "top",
+      control,
+      children,
+      anchorRef,
       slotProps,
-      disableExitOnEscapeKeyDown,
-      disableFocusManagement,
-      portalContainer,
-      hideCloseButton,
-      open: openProp,
       className,
+      isNonModal,
       defaultOpen,
       onOpenChange,
-      isNonModal,
-      anchorRef,
-      children,
-      control,
+      open: openProp,
+      portalContainer,
+      hideCloseButton,
+      disableFocusManagement,
+      disableExitOnEscapeKeyDown,
+      shouldCloseOnInteractOutside,
       ...other
     } = props;
     const showArrow = !hideArrow;
     const domRef = useDOMRef(ref);
     const controlRef = useRef(null);
     const state = useOverlayTriggerState({
-      isOpen: openProp,
-      onOpenChange,
       defaultOpen,
+      onOpenChange,
+      isOpen: openProp,
       ...other
     });
     const openState = state.isOpen;
@@ -63,8 +64,9 @@ const Popover = forwardRef(
         popoverRef: domRef,
         arrowBoundaryOffset,
         placement: placementProp,
-        isKeyboardDismissDisabled: disableExitOnEscapeKeyDown,
-        triggerRef: anchorRef || controlRef
+        shouldCloseOnInteractOutside,
+        triggerRef: anchorRef || controlRef,
+        isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
       { ...state, isOpen: opened }
     );
@@ -83,9 +85,9 @@ const Popover = forwardRef(
     const dialogProps = mergeProps(
       {
         role: "dialog",
+        hideCloseButton,
         className: s.dialog,
-        onClose: state.close,
-        hideCloseButton
+        onClose: state.close
       },
       slotProps?.dialog
     );
@@ -98,8 +100,8 @@ const Popover = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       control?.({
-        onClick: onPress,
         ref: controlRef,
+        onClick: onPress,
         disabled: isDisabled,
         ...otherTriggerProps
       }),

package/dist/components/Popover/types.d.ts

@@ -95,6 +95,13 @@ export type PopoverProps = {
      * @default 0
      */
     crossOffset?: number;
+    /**
+     * When user interacts with the argument element outside of the popover ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the popover.
+     * By default, onClose will always be called on interaction outside the popover ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

package/dist/components/SidePanel/SidePanel.js

@@ -10,20 +10,21 @@ import { Dialog } from "../Dialog/Dialog.js";
 const SidePanel = forwardRef(
   (props, ref) => {
     const {
-      hideCloseButton = false,
-      position = "left",
       size = "medium",
-      disableExitOnEscapeKeyDown,
-      disableExitOnClickOutside,
-      disableFocusManagement,
-      portalContainer,
-      open: openProp,
-      hideBackdrop,
-      onOpenChange,
-      defaultOpen,
-      children,
+      position = "left",
+      hideCloseButton = false,
       control,
+      children,
       slotProps,
+      defaultOpen,
+      onOpenChange,
+      hideBackdrop,
+      open: openProp,
+      portalContainer,
+      disableFocusManagement,
+      disableExitOnClickOutside,
+      disableExitOnEscapeKeyDown,
+      shouldCloseOnInteractOutside,
       ...other
     } = props;
     const state = useOverlayTriggerState({
@@ -43,6 +44,7 @@ const SidePanel = forwardRef(
     const { modalProps: modalCommonProps, underlayProps } = useModalOverlay(
       {
         ...props,
+        shouldCloseOnInteractOutside,
         isDismissable: !disableExitOnClickOutside,
         isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
@@ -57,10 +59,10 @@ const SidePanel = forwardRef(
     };
     const containerProps = mergeProps(
       {
-        className: clsx(s.base, s[size], s[position]),
+        ref: containerRef,
         "data-size": size,
         "data-position": position,
-        ref: containerRef
+        className: clsx(s.base, s[size], s[position])
       },
       other
     );
@@ -81,8 +83,8 @@ const SidePanel = forwardRef(
     const panelProps = mergeProps(
       modalCommonProps,
       {
-        className: s.panel,
-        ref: modalRef
+        ref: modalRef,
+        className: s.panel
       },
       slotProps?.panel
     );

package/dist/components/SidePanel/types.d.ts

@@ -65,6 +65,13 @@ export type SidePanelProps = {
      * @default false
      */
     disableFocusManagement?: boolean;
+    /**
+     * When user interacts with the argument element outside of the overlay ref,
+     * return true if onClose should be called. This gives you a chance to filter
+     * out interaction with elements that should not dismiss the overlay.
+     * By default, onClose will always be called on interaction outside the overlay ref.
+     */
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
     /** The props used for each slot inside. */
     slotProps?: {
         dialog?: DialogProps;

package/dist/components/Tooltip/Tooltip.js

@@ -10,20 +10,20 @@ const Tooltip = forwardRef((props, ref) => {
   const {
     delay = 120,
     disabled = false,
-    defaultOpen,
     closeDelay = 120,
     hideArrow = false,
     variant = "contrast",
-    onOpenChange,
     placement: placementProp = "top",
     control,
     children,
     anchorRef,
     crossOffset,
+    defaultOpen,
+    onOpenChange,
     open: openProp,
+    portalContainer,
     offset: offsetProp,
     arrowBoundaryOffset,
-    portalContainer,
     ...other
   } = props;
   const showArrow = !hideArrow;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.6",
+  "version": "0.0.1-beta.7",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -22,10 +22,10 @@
     "@koobiq/design-tokens": "^3.12.1",
     "@types/react-transition-group": "^4.4.12",
     "react-transition-group": "^4.4.5",
-    "@koobiq/logger": "0.0.1-beta.6",
-    "@koobiq/react-icons": "0.0.1-beta.6",
-    "@koobiq/react-primitives": "0.0.1-beta.6",
-    "@koobiq/react-core": "0.0.1-beta.6"
+    "@koobiq/logger": "0.0.1-beta.7",
+    "@koobiq/react-icons": "0.0.1-beta.7",
+    "@koobiq/react-core": "0.0.1-beta.7",
+    "@koobiq/react-primitives": "0.0.1-beta.7"
   },
   "peerDependencies": {
     "@koobiq/design-tokens": "^3.11.2",