@restart/ui - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

cjs/Dropdown.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _useGlobalListener = _interopRequireDefault(require("@restart/hooks/useGlobalListener"));
+var _useEventListener = _interopRequireDefault(require("@restart/hooks/useEventListener"));
 
@@ -35,2 +35,4 @@ var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
 
+var _useWindow = _interopRequireDefault(require("./useWindow"));
+
 var _jsxRuntime = require("react/jsx-runtime");
@@ -70,2 +72,3 @@
 }) {
+  const window = (0, _useWindow.default)();
   const [show, onToggle] = (0, _uncontrollable.useUncontrolledProp)(rawShow, defaultShow, rawOnToggle); // We use normal refs instead of useCallbackRef in order to populate the
@@ -108,3 +111,3 @@ // the value as quickly as possible, otherwise the effect to focus the element
   if (menuElement && lastShow && !show) {
-    focusInDropdown.current = menuElement.contains(document.activeElement);
+    focusInDropdown.current = menuElement.contains(menuElement.ownerDocument.activeElement);
   }
@@ -150,3 +153,3 @@
 
-  (0, _useGlobalListener.default)('keydown', event => {
+  (0, _useEventListener.default)((0, React.useCallback)(() => window.document, [window]), 'keydown', event => {
     var _menuRef$current, _toggleRef$current;
@@ -208,3 +211,3 @@
         // if focus has left the menu
-        (0, _addEventListener.default)(document, 'keyup', e => {
+        (0, _addEventListener.default)(target.ownerDocument, 'keyup', e => {
           var _menuRef$current2;
@@ -211,0 +214,0 @@

cjs/getScrollbarWidth.d.ts

 /**
  * Get the width of the vertical window scrollbar if it's visible
  */
-export default function getBodyScrollbarWidth(): number;
+export default function getBodyScrollbarWidth(ownerDocument?: Document): number;

cjs/getScrollbarWidth.js

@@ -9,4 +9,5 @@ "use strict";
  */
-function getBodyScrollbarWidth() {
-  return Math.abs(window.innerWidth - document.documentElement.clientWidth);
+function getBodyScrollbarWidth(ownerDocument = document) {
+  const window = ownerDocument.defaultView;
+  return Math.abs(window.innerWidth - ownerDocument.documentElement.clientWidth);
 }

cjs/Modal.js

@@ -30,2 +30,4 @@ "use strict";
 
+var _useWindow = _interopRequireDefault(require("./useWindow"));
+
 var _jsxRuntime = require("react/jsx-runtime");
@@ -45,4 +47,6 @@
 
-function getManager() {
-  if (!manager) manager = new _ModalManager.default();
+function getManager(window) {
+  if (!manager) manager = new _ModalManager.default({
+    ownerDocument: window == null ? void 0 : window.document
+  });
   return manager;
@@ -52,3 +56,4 @@ }
 function useModalManager(provided) {
-  const modalManager = provided || getManager();
+  const window = (0, _useWindow.default)();
+  const modalManager = provided || getManager(window);
   const modal = (0, React.useRef)({
@@ -55,0 +60,0 @@ dialog: null,

cjs/ModalManager.d.ts

@@ -6,2 +6,3 @@ export interface ModalInstance {
 export interface ModalManagerOptions {
+    ownerDocument?: Document;
     handleContainerOverflow?: boolean;
@@ -24,4 +25,5 @@ isRTL?: boolean;
     readonly modals: ModalInstance[];
-    private state;
-    constructor({ handleContainerOverflow, isRTL, }?: ModalManagerOptions);
+    protected state: ContainerState;
+    protected ownerDocument: Document | undefined;
+    constructor({ ownerDocument, handleContainerOverflow, isRTL, }?: ModalManagerOptions);
     getScrollbarWidth(): number;
@@ -28,0 +30,0 @@ getElement(): HTMLElement;

cjs/ModalManager.js

@@ -24,2 +24,3 @@ "use strict";
   constructor({
+    ownerDocument,
     handleContainerOverflow = true,
@@ -31,10 +32,11 @@ isRTL = false
     this.modals = [];
+    this.ownerDocument = ownerDocument;
   }
 
   getScrollbarWidth() {
-    return (0, _getScrollbarWidth.default)();
+    return (0, _getScrollbarWidth.default)(this.ownerDocument);
   }
 
   getElement() {
-    return document.body;
+    return (this.ownerDocument || document).body;
   }
@@ -41,0 +43,0 @@

cjs/types.d.ts

 import * as React from 'react';
 export declare type EventKey = string | number;
 export declare type IntrinsicElementTypes = keyof JSX.IntrinsicElements;
-export declare type AssignProps<Inner extends string | React.ComponentType<any>, P> = Omit<React.ComponentPropsWithRef<Inner extends React.ElementType ? Inner : never>, keyof P> & P;
-export interface DynamicRefForwardingComponent<TInitial extends string | React.ComponentType<any>, P = unknown> {
-    <As extends string | React.ComponentType<any> = TInitial>(props: React.PropsWithChildren<AssignProps<As, {
+export declare type AssignPropsWithRef<Inner extends string | React.ComponentType<any>, P> = Omit<React.ComponentPropsWithRef<Inner extends React.ElementType ? Inner : never>, keyof P> & P;
+export type { AssignPropsWithRef as AssignProps };
+export declare type AssignPropsWithoutRef<Inner extends string | React.ComponentType<any>, P> = Omit<React.ComponentPropsWithoutRef<Inner extends React.ElementType ? Inner : never>, keyof P> & P;
+export interface DynamicRefForwardingComponent<TInitial extends string | React.ComponentType<any>, P = {
+    children?: React.ReactNode;
+}> {
+    <As extends string | React.ComponentType<any> = TInitial>(props: AssignPropsWithRef<As, {
         as?: As;
-    } & P>>, context?: any): React.ReactElement | null;
+    } & P>, context?: any): React.ReactElement | null;
     propTypes?: any;
@@ -14,7 +18,18 @@ contextTypes?: any;
 }
-export declare class DynamicComponent<As extends string | React.ComponentType<any>, P = unknown> extends React.Component<AssignProps<As, {
+export interface DynamicFunctionComponent<TInitial extends string | React.ComponentType<any>, P = {
+    children?: React.ReactNode;
+}> {
+    <As extends string | React.ComponentType<any> = TInitial>(props: AssignPropsWithoutRef<As, {
+        as?: As;
+    } & P>, context?: any): React.ReactElement | null;
+    propTypes?: any;
+    contextTypes?: any;
+    defaultProps?: Partial<P>;
+    displayName?: string;
+}
+export declare class DynamicComponent<As extends string | React.ComponentType<any>, P = unknown> extends React.Component<AssignPropsWithRef<As, {
     as?: As;
 } & P>> {
 }
-export declare type DynamicComponentClass<As extends string | React.ComponentType<any>, P = unknown> = React.ComponentClass<AssignProps<As, {
+export declare type DynamicComponentClass<As extends string | React.ComponentType<any>, P = unknown> = React.ComponentClass<AssignPropsWithRef<As, {
     as?: As;
@@ -21,0 +36,0 @@ } & P>>;

cjs/useRootClose.js

@@ -68,7 +68,7 @@ "use strict";
   (0, _react.useEffect)(() => {
-    if (disabled || ref == null) return undefined; // Store the current event to avoid triggering handlers immediately
+    if (disabled || ref == null) return undefined;
+    const doc = (0, _ownerDocument.default)(getRefTarget(ref)); // Store the current event to avoid triggering handlers immediately
     // https://github.com/facebook/react/issues/20074
 
-    let currentEvent = window.event;
-    const doc = (0, _ownerDocument.default)(getRefTarget(ref)); // Use capture for this listener so it fires before React's listener, to
+    let currentEvent = (doc.defaultView || window).event; // Use capture for this listener so it fires before React's listener, to
     // avoid false positives in the contains() check below if the target DOM
@@ -108,3 +108,3 @@ // element is removed in the React mouse callback.
     };
-  }, [ref, disabled, clickTrigger, handleMouseCapture, handleMouse, handleKeyUp]);
+  }, [ref, disabled, clickTrigger, handleMouseCapture, handleMouse, handleKeyUp, window]);
 }
@@ -111,0 +111,0 @@

cjs/useWaitForDOMRef.d.ts

 /// <reference types="react" />
 export declare type DOMContainer<T extends HTMLElement = HTMLElement> = T | React.RefObject<T> | null | (() => T | React.RefObject<T> | null);
-export declare const resolveContainerRef: <T extends HTMLElement>(ref: DOMContainer<T> | undefined) => HTMLBodyElement | T | null;
+export declare const resolveContainerRef: <T extends HTMLElement>(ref: DOMContainer<T> | undefined, document?: Document | undefined) => HTMLBodyElement | T | null;
 export default function useWaitForDOMRef<T extends HTMLElement = HTMLElement>(ref: DOMContainer<T> | undefined, onResolved?: (element: T | HTMLBodyElement) => void): HTMLBodyElement | T | null;

cjs/useWaitForDOMRef.js

@@ -9,11 +9,15 @@ "use strict";
 
+var _canUseDOM = _interopRequireDefault(require("dom-helpers/canUseDOM"));
+
 var _react = require("react");
 
+var _useWindow = _interopRequireDefault(require("./useWindow"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const resolveContainerRef = ref => {
+const resolveContainerRef = (ref, document) => {
   var _ref;
 
-  if (typeof document === 'undefined') return null;
-  if (ref == null) return (0, _ownerDocument.default)().body;
+  if (!_canUseDOM.default) return null;
+  if (ref == null) return (document || (0, _ownerDocument.default)()).body;
   if (typeof ref === 'function') ref = ref();
@@ -28,3 +32,4 @@ if (ref && 'current' in ref) ref = ref.current;
 function useWaitForDOMRef(ref, onResolved) {
-  const [resolvedRef, setRef] = (0, _react.useState)(() => resolveContainerRef(ref));
+  const window = (0, _useWindow.default)();
+  const [resolvedRef, setRef] = (0, _react.useState)(() => resolveContainerRef(ref, window == null ? void 0 : window.document));
 
@@ -31,0 +36,0 @@ if (!resolvedRef) {

esm/Dropdown.js

@@ -8,3 +8,3 @@ import qsa from 'dom-helpers/querySelectorAll';
 import useForceUpdate from '@restart/hooks/useForceUpdate';
-import useGlobalListener from '@restart/hooks/useGlobalListener';
+import useEventListener from '@restart/hooks/useEventListener';
 import useEventCallback from '@restart/hooks/useEventCallback';
@@ -17,2 +17,3 @@ import DropdownContext from './DropdownContext';
 import { dataAttr } from './DataKey';
+import useWindow from './useWindow';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -46,2 +47,3 @@
 }) {
+  const window = useWindow();
   const [show, onToggle] = useUncontrolledProp(rawShow, defaultShow, rawOnToggle); // We use normal refs instead of useCallbackRef in order to populate the
@@ -84,3 +86,3 @@ // the value as quickly as possible, otherwise the effect to focus the element
   if (menuElement && lastShow && !show) {
-    focusInDropdown.current = menuElement.contains(document.activeElement);
+    focusInDropdown.current = menuElement.contains(menuElement.ownerDocument.activeElement);
   }
@@ -126,3 +128,3 @@
 
-  useGlobalListener('keydown', event => {
+  useEventListener(useCallback(() => window.document, [window]), 'keydown', event => {
     var _menuRef$current, _toggleRef$current;
@@ -184,3 +186,3 @@
         // if focus has left the menu
-        addEventListener(document, 'keyup', e => {
+        addEventListener(target.ownerDocument, 'keyup', e => {
           var _menuRef$current2;
@@ -187,0 +189,0 @@

esm/getScrollbarWidth.d.ts

 /**
  * Get the width of the vertical window scrollbar if it's visible
  */
-export default function getBodyScrollbarWidth(): number;
+export default function getBodyScrollbarWidth(ownerDocument?: Document): number;

esm/getScrollbarWidth.js

 /**
  * Get the width of the vertical window scrollbar if it's visible
  */
-export default function getBodyScrollbarWidth() {
-  return Math.abs(window.innerWidth - document.documentElement.clientWidth);
+export default function getBodyScrollbarWidth(ownerDocument = document) {
+  const window = ownerDocument.defaultView;
+  return Math.abs(window.innerWidth - ownerDocument.documentElement.clientWidth);
 }

esm/Modal.js

@@ -19,2 +19,3 @@ const _excluded = ["show", "role", "className", "style", "children", "backdrop", "keyboard", "onBackdropClick", "onEscapeKeyDown", "transition", "backdropTransition", "autoFocus", "enforceFocus", "restoreFocus", "restoreFocusOptions", "renderDialog", "renderBackdrop", "manager", "container", "onShow", "onHide", "onExit", "onExited", "onExiting", "onEnter", "onEntering", "onEntered"];
 import useWaitForDOMRef from './useWaitForDOMRef';
+import useWindow from './useWindow';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,4 +26,6 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 
-function getManager() {
-  if (!manager) manager = new ModalManager();
+function getManager(window) {
+  if (!manager) manager = new ModalManager({
+    ownerDocument: window == null ? void 0 : window.document
+  });
   return manager;
@@ -32,3 +35,4 @@ }
 function useModalManager(provided) {
-  const modalManager = provided || getManager();
+  const window = useWindow();
+  const modalManager = provided || getManager(window);
   const modal = useRef({
@@ -35,0 +39,0 @@ dialog: null,

esm/ModalManager.d.ts

@@ -6,2 +6,3 @@ export interface ModalInstance {
 export interface ModalManagerOptions {
+    ownerDocument?: Document;
     handleContainerOverflow?: boolean;
@@ -24,4 +25,5 @@ isRTL?: boolean;
     readonly modals: ModalInstance[];
-    private state;
-    constructor({ handleContainerOverflow, isRTL, }?: ModalManagerOptions);
+    protected state: ContainerState;
+    protected ownerDocument: Document | undefined;
+    constructor({ ownerDocument, handleContainerOverflow, isRTL, }?: ModalManagerOptions);
     getScrollbarWidth(): number;
@@ -28,0 +30,0 @@ getElement(): HTMLElement;

esm/ModalManager.js

@@ -12,2 +12,3 @@ import css from 'dom-helpers/css';
   constructor({
+    ownerDocument,
     handleContainerOverflow = true,
@@ -19,10 +20,11 @@ isRTL = false
     this.modals = [];
+    this.ownerDocument = ownerDocument;
   }
 
   getScrollbarWidth() {
-    return getBodyScrollbarWidth();
+    return getBodyScrollbarWidth(this.ownerDocument);
   }
 
   getElement() {
-    return document.body;
+    return (this.ownerDocument || document).body;
   }
@@ -29,0 +31,0 @@

esm/types.d.ts

 import * as React from 'react';
 export declare type EventKey = string | number;
 export declare type IntrinsicElementTypes = keyof JSX.IntrinsicElements;
-export declare type AssignProps<Inner extends string | React.ComponentType<any>, P> = Omit<React.ComponentPropsWithRef<Inner extends React.ElementType ? Inner : never>, keyof P> & P;
-export interface DynamicRefForwardingComponent<TInitial extends string | React.ComponentType<any>, P = unknown> {
-    <As extends string | React.ComponentType<any> = TInitial>(props: React.PropsWithChildren<AssignProps<As, {
+export declare type AssignPropsWithRef<Inner extends string | React.ComponentType<any>, P> = Omit<React.ComponentPropsWithRef<Inner extends React.ElementType ? Inner : never>, keyof P> & P;
+export type { AssignPropsWithRef as AssignProps };
+export declare type AssignPropsWithoutRef<Inner extends string | React.ComponentType<any>, P> = Omit<React.ComponentPropsWithoutRef<Inner extends React.ElementType ? Inner : never>, keyof P> & P;
+export interface DynamicRefForwardingComponent<TInitial extends string | React.ComponentType<any>, P = {
+    children?: React.ReactNode;
+}> {
+    <As extends string | React.ComponentType<any> = TInitial>(props: AssignPropsWithRef<As, {
         as?: As;
-    } & P>>, context?: any): React.ReactElement | null;
+    } & P>, context?: any): React.ReactElement | null;
     propTypes?: any;
@@ -14,7 +18,18 @@ contextTypes?: any;
 }
-export declare class DynamicComponent<As extends string | React.ComponentType<any>, P = unknown> extends React.Component<AssignProps<As, {
+export interface DynamicFunctionComponent<TInitial extends string | React.ComponentType<any>, P = {
+    children?: React.ReactNode;
+}> {
+    <As extends string | React.ComponentType<any> = TInitial>(props: AssignPropsWithoutRef<As, {
+        as?: As;
+    } & P>, context?: any): React.ReactElement | null;
+    propTypes?: any;
+    contextTypes?: any;
+    defaultProps?: Partial<P>;
+    displayName?: string;
+}
+export declare class DynamicComponent<As extends string | React.ComponentType<any>, P = unknown> extends React.Component<AssignPropsWithRef<As, {
     as?: As;
 } & P>> {
 }
-export declare type DynamicComponentClass<As extends string | React.ComponentType<any>, P = unknown> = React.ComponentClass<AssignProps<As, {
+export declare type DynamicComponentClass<As extends string | React.ComponentType<any>, P = unknown> = React.ComponentClass<AssignPropsWithRef<As, {
     as?: As;
@@ -21,0 +36,0 @@ } & P>>;

esm/useRootClose.js

@@ -55,7 +55,7 @@ import contains from 'dom-helpers/contains';
   useEffect(() => {
-    if (disabled || ref == null) return undefined; // Store the current event to avoid triggering handlers immediately
+    if (disabled || ref == null) return undefined;
+    const doc = ownerDocument(getRefTarget(ref)); // Store the current event to avoid triggering handlers immediately
     // https://github.com/facebook/react/issues/20074
 
-    let currentEvent = window.event;
-    const doc = ownerDocument(getRefTarget(ref)); // Use capture for this listener so it fires before React's listener, to
+    let currentEvent = (doc.defaultView || window).event; // Use capture for this listener so it fires before React's listener, to
     // avoid false positives in the contains() check below if the target DOM
@@ -95,5 +95,5 @@ // element is removed in the React mouse callback.
     };
-  }, [ref, disabled, clickTrigger, handleMouseCapture, handleMouse, handleKeyUp]);
+  }, [ref, disabled, clickTrigger, handleMouseCapture, handleMouse, handleKeyUp, window]);
 }
 
 export default useRootClose;

esm/useWaitForDOMRef.d.ts

 /// <reference types="react" />
 export declare type DOMContainer<T extends HTMLElement = HTMLElement> = T | React.RefObject<T> | null | (() => T | React.RefObject<T> | null);
-export declare const resolveContainerRef: <T extends HTMLElement>(ref: DOMContainer<T> | undefined) => HTMLBodyElement | T | null;
+export declare const resolveContainerRef: <T extends HTMLElement>(ref: DOMContainer<T> | undefined, document?: Document | undefined) => HTMLBodyElement | T | null;
 export default function useWaitForDOMRef<T extends HTMLElement = HTMLElement>(ref: DOMContainer<T> | undefined, onResolved?: (element: T | HTMLBodyElement) => void): HTMLBodyElement | T | null;

esm/useWaitForDOMRef.js

 import ownerDocument from 'dom-helpers/ownerDocument';
+import canUseDOM from 'dom-helpers/canUseDOM';
 import { useState, useEffect } from 'react';
-export const resolveContainerRef = ref => {
+import useWindow from './useWindow';
+export const resolveContainerRef = (ref, document) => {
   var _ref;
 
-  if (typeof document === 'undefined') return null;
-  if (ref == null) return ownerDocument().body;
+  if (!canUseDOM) return null;
+  if (ref == null) return (document || ownerDocument()).body;
   if (typeof ref === 'function') ref = ref();
@@ -14,3 +16,4 @@ if (ref && 'current' in ref) ref = ref.current;
 export default function useWaitForDOMRef(ref, onResolved) {
-  const [resolvedRef, setRef] = useState(() => resolveContainerRef(ref));
+  const window = useWindow();
+  const [resolvedRef, setRef] = useState(() => resolveContainerRef(ref, window == null ? void 0 : window.document));
 
@@ -17,0 +20,0 @@ if (!resolvedRef) {

package.json

 {
   "name": "@restart/ui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Utilities for creating robust overlay components",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -1,13 +0,11 @@
-# react-overlays
+# restart/ui
 
-[![CI status][ci-badge]][actions]
-[![Deploy docs status][deploy-docs-badge]][actions]
-[![Codecov][codecov-badge]][codecov]
-[![Netlify Status](https://api.netlify.com/api/v1/badges/e86fa356-4480-409e-9c24-52ea0660a923/deploy-status)](https://app.netlify.com/sites/react-overlays/deploys)
+Restart UI is a set of full featured, extensible, and accessible UI components, designed to integrate into any styling
+framework or system. Restart components, are "headless", meaning they don't provide any styles. Components encapsulate
+the complicated logic and and state without being prescriptive about their look and feel.
 
-Utilities for creating robust overlay components.
 
 ## Documentation
 
-https://react-bootstrap.github.io/react-overlays
+https://react-restart.github.io/ui/
 
@@ -17,15 +15,3 @@ ## Installation
 ```sh
-npm install --save react-overlays
+npm install --save @restart/ui
 ```
-
-## Notes
-
-All of these utilities have been abstracted out of [React-Bootstrap](https://github.com/react-bootstrap/react-bootstrap) in order to provide better access to the generic implementations of these commonly-needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, CSS or otherwise.
-
-If you are looking for more complete overlays, modals, or tooltips – something you can use out-of-the-box – check out React-Bootstrap, which is built using these components.
-
-[actions]: https://github.com/react-bootstrap/react-overlays/actions
-[codecov]: https://codecov.io/gh/react-bootstrap/react-overlays
-[codecov-badge]: https://codecov.io/gh/react-bootstrap/react-overlays/branch/master/graph/badge.svg
-[ci-badge]: https://github.com/react-bootstrap/react-overlays/workflows/CI/badge.svg
-[deploy-docs-badge]: https://github.com/react-bootstrap/react-overlays/workflows/Deploy%20Documentation/badge.svg

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

324802

increased by1.34%

Number of package files

167

increased by3.09%

Lines of code

7757

increased by1.39%

Worsened metrics

Number of lines in readme file

17

decreased by-45.16%

No dependency changes