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

package/dist/components/List/List.js

@@ -8,27 +8,29 @@ import { ListSection } from "./components/ListSection/ListSection.js";
 import { Typography } from "../Typography/Typography.js";
 import { ListOption } from "./components/ListOption/ListOption.js";
 function ListRender(props, ref) {
-  const { className, label } = props;
+  const { label, className, style, slotProps } = props;
   const domRef = useDOMRef(ref);
   const state = useListState(props);
   const { listBoxProps, labelProps } = useListBox(props, state, domRef);
+  const titleProps = mergeProps(
+    {
+      className: s.label,
+      variant: "text-normal-strong"
+    },
+    slotProps?.label,
+    labelProps
+  );
   const listProps = mergeProps(
     {
-      className: clsx(s.base, className),
-      ref: domRef
+      style,
+      ref: domRef,
+      className: clsx(s.base, className)
     },
+    slotProps?.list,
     listBoxProps
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    isNotNil(label) && /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "text-normal-strong",
-        className: s.label,
-        ...labelProps,
-        children: label
-      }
-    ),
+    isNotNil(label) && /* @__PURE__ */ jsx(Typography, { ...titleProps, children: label }),
     /* @__PURE__ */ jsx("ul", { ...listProps, children: [...state.collection].map(
       (item) => item.type === "section" ? /* @__PURE__ */ jsx(ListSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx(ListOption, { item, state }, item.key)
     ) })

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

@@ -1,5 +1,6 @@
-import type { ComponentRef, ReactElement, ReactNode, Ref } from 'react';
+import type { ComponentPropsWithRef, ComponentRef, CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { AriaListBoxProps } from '@koobiq/react-primitives';
+import type { TypographyProps } from '../Typography';
 export declare const listPropSelectionMode: readonly ["none", "single", "multiple"];
 export type ListPropSelectionMode = (typeof listPropSelectionMode)[number];
 export type ListPropItems<T extends object> = AriaListBoxProps<T>['items'];
@@ -14,8 +15,11 @@ export type ListBaseProps<T extends object> = {
     label?: ReactNode;
     /** Additional CSS-classes. */
     className?: string;
+    /** Inline styles. */
+    style?: CSSProperties;
     /** The type of selection that is allowed in the collection. */
     selectionMode?: ListPropSelectionMode;
+    /** Ref to the HTML ul-element. */
     ref?: Ref<HTMLElement>;
     /** The contents of the collection. */
     children?: ListPropChildren<T>;
@@ -36,6 +40,11 @@ export type ListBaseProps<T extends object> = {
     onAction?: ListPropOnAction<T>;
     /** How multiple selection should behave in the collection. */
     selectionBehavior?: ListPropSelectionBehavior<T>;
+    /** The props used for each slot inside. */
+    slotProps?: {
+        label?: TypographyProps;
+        list?: ComponentPropsWithRef<'div'>;
+    };
 };
 export type ListProps<T extends object> = ListBaseProps<T>;
 export type ListRef = ComponentRef<'ul'>;

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,34 +10,36 @@ import { Dialog } from "../Dialog/Dialog.js";
 const Popover = forwardRef(
   (props, ref) => {
     const {
-      placement: placementProp = "top",
-      arrowBoundaryOffset = 20,
-      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;
@@ -58,12 +60,13 @@ const Popover = forwardRef(
         isNonModal,
         crossOffset,
         maxHeight: 480,
+        containerPadding,
         popoverRef: domRef,
         arrowBoundaryOffset,
-        containerPadding: 24,
         placement: placementProp,
-        isKeyboardDismissDisabled: disableExitOnEscapeKeyDown,
-        triggerRef: anchorRef || controlRef
+        shouldCloseOnInteractOutside,
+        triggerRef: anchorRef || controlRef,
+        isKeyboardDismissDisabled: disableExitOnEscapeKeyDown
       },
       { ...state, isOpen: opened }
     );
@@ -82,16 +85,23 @@ const Popover = forwardRef(
     const dialogProps = mergeProps(
       {
         role: "dialog",
+        hideCloseButton,
         className: s.dialog,
-        onClose: state.close,
-        hideCloseButton
+        onClose: state.close
       },
       slotProps?.dialog
     );
+    const backdropProps = mergeProps(
+      {
+        className: s.underlay
+      },
+      slotProps?.backdrop,
+      underlayProps
+    );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       control?.({
-        onClick: onPress,
         ref: controlRef,
+        onClick: onPress,
         disabled: isDisabled,
         ...otherTriggerProps
       }),
@@ -111,7 +121,7 @@ const Popover = forwardRef(
               portalContainer,
               disableFocusManagement,
               children: [
-                /* @__PURE__ */ jsx("div", { ...underlayProps, className: s.underlay }),
+                /* @__PURE__ */ jsx("div", { ...backdropProps }),
                 /* @__PURE__ */ jsxs(
                   "div",
                   {

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

@@ -57,7 +57,7 @@ export type PopoverProps = {
      * */
     placement?: PopoverPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
-    anchorRef?: RefObject<HTMLElement>;
+    anchorRef?: RefObject<HTMLElement | null>;
     /**
      * If `true`, the arrow isn't shown.
      * @default false
@@ -77,6 +77,12 @@ export type PopoverProps = {
      * @default 0
      */
     arrowBoundaryOffset?: number;
+    /**
+     * The placement padding that should be applied between the element and its
+     * surrounding container.
+     * @default 12
+     */
+    containerPadding?: number;
     /**
      * The additional offset applied along the main axis between the element and its
      * anchor element.
@@ -89,9 +95,17 @@ 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;
         arrow?: ComponentPropsWithRef<'div'>;
+        backdrop?: ComponentPropsWithRef<'div'>;
     };
 };

package/dist/components/Provider/BreakpointsProvider.d.ts

@@ -3,8 +3,9 @@ import type { Breakpoints } from './types';
 export type BreakpointsProviderProps = {
     children: ReactNode;
     breakpoints: Breakpoints;
+    defaultMatches?: boolean[];
 };
 export declare const BreakpointsProvider: {
-    ({ children, breakpoints: _breakpoints, }: BreakpointsProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, defaultMatches, breakpoints: _breakpoints, }: BreakpointsProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/BreakpointsProvider.js

@@ -4,9 +4,16 @@ import { BreakpointsContext } from "./BreakpointsContext.js";
 import { useBreakpoints } from "./utils/useBreakpoints.js";
 const BreakpointsProvider = ({
   children,
+  defaultMatches,
   breakpoints: _breakpoints
 }) => {
-  const breakpoints = useBreakpoints(_breakpoints);
+  const breakpoints = useBreakpoints(
+    _breakpoints,
+    defaultMatches && {
+      ssr: true,
+      defaultMatches
+    }
+  );
   return /* @__PURE__ */ jsx(BreakpointsContext.Provider, { value: breakpoints, children });
 };
 BreakpointsProvider.displayName = "BreakpointsProvider";

package/dist/components/Provider/Provider.d.ts

@@ -1,6 +1,6 @@
 import type { Breakpoints, ProviderProps } from './types';
 export declare const defaultBreakpoints: Breakpoints;
 export declare const Provider: {
-    ({ breakpoints, children, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
+    ({ breakpoints, breakpointsFallback, children, locale, }: ProviderProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/Provider/Provider.js

@@ -19,9 +19,17 @@ const defaultBreakpoints = {
 };
 const Provider = ({
   breakpoints = defaultBreakpoints,
+  breakpointsFallback,
   children,
   locale
-}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(BreakpointsProvider, { breakpoints, children }) }) });
+}) => /* @__PURE__ */ jsx(ProviderContext.Provider, { value: { breakpoints, locale }, children: /* @__PURE__ */ jsx(I18nProvider, { locale, children: /* @__PURE__ */ jsx(
+  BreakpointsProvider,
+  {
+    breakpoints,
+    defaultMatches: breakpointsFallback,
+    children
+  }
+) }) });
 Provider.displayName = "Provider";
 export {
   Provider,

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

@@ -10,7 +10,12 @@ export type Breakpoints = {
     [custom: string]: number | undefined;
 };
 export type ProviderProps = {
+    /** The content of the component. */
     children?: ReactNode;
+    /** Responsive breakpoints for your application. */
     breakpoints?: Breakpoints;
+    /** SSR-fallback for responsive breakpoints for your application. */
+    breakpointsFallback?: boolean[];
+    /** The locale for your application as a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. Defaults to the browser/OS language setting. */
     locale?: I18nProviderProps['locale'];
 };

package/dist/components/Provider/utils/useBreakpoints.d.ts

@@ -1,2 +1,3 @@
+import type { UseMediaQueryOptions } from '@koobiq/react-core';
 import type { Breakpoints } from '../types';
-export declare function useBreakpoints(breakpoints: Breakpoints): {};
+export declare function useBreakpoints(breakpoints: Breakpoints, options?: UseMediaQueryOptions): {};

package/dist/components/Provider/utils/useBreakpoints.js

@@ -1,10 +1,10 @@
 "use client";
 import { useMediaQuery } from "@koobiq/react-core";
-function useBreakpoints(breakpoints) {
+function useBreakpoints(breakpoints, options) {
   const queries = Object.values(breakpoints).map(
     (width) => `(min-width: ${width}px)`
   );
-  const matches = useMediaQuery(queries);
+  const matches = useMediaQuery(queries, options);
   return Object.keys(breakpoints).reduce(
     (acc, item, index) => ({ ...acc, [item]: matches[index] }),
     {}

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.d.ts

@@ -7,7 +7,7 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     control?: import("./types").TooltipPropControl;
     placement?: import("./types").TooltipPropPlacement;
-    anchorRef?: import("react").RefObject<HTMLElement>;
+    anchorRef?: import("react").RefObject<HTMLElement | null>;
     arrowBoundaryOffset?: number;
     offset?: number;
     crossOffset?: number;

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/dist/components/Tooltip/types.d.ts

@@ -34,7 +34,7 @@ export type TooltipProps = {
      * */
     placement?: TooltipPropPlacement;
     /** The ref for the element which the popover positions itself with respect to. */
-    anchorRef?: RefObject<HTMLElement>;
+    anchorRef?: RefObject<HTMLElement | null>;
     /**
      * The minimum distance the arrow's edge should be from the edge of the overlay element.
      * @default 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@koobiq/react-components",
-  "version": "0.0.1-beta.5",
+  "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/react-core": "0.0.1-beta.5",
-    "@koobiq/react-icons": "0.0.1-beta.5",
-    "@koobiq/logger": "0.0.1-beta.5",
-    "@koobiq/react-primitives": "0.0.1-beta.5"
+    "@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",