new changes

This commit is contained in:
Niranjan
2026-04-07 05:05:28 +05:30
parent 7c070224bd
commit a18bba15f2
29975 changed files with 3247495 additions and 2761 deletions

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Anchor",
"private": true,
"main": "../cjs/Anchor.js",
"module": "../esm/Anchor.js",
"types": "../esm/Anchor.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Button",
"private": true,
"main": "../cjs/Button.js",
"module": "../esm/Button.js",
"types": "../esm/Button.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/DataKey",
"private": true,
"main": "../cjs/DataKey.js",
"module": "../esm/DataKey.js",
"types": "../esm/DataKey.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Dropdown",
"private": true,
"main": "../cjs/Dropdown.js",
"module": "../esm/Dropdown.js",
"types": "../esm/Dropdown.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/DropdownContext",
"private": true,
"main": "../cjs/DropdownContext.js",
"module": "../esm/DropdownContext.js",
"types": "../esm/DropdownContext.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/DropdownItem",
"private": true,
"main": "../cjs/DropdownItem.js",
"module": "../esm/DropdownItem.js",
"types": "../esm/DropdownItem.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/DropdownMenu",
"private": true,
"main": "../cjs/DropdownMenu.js",
"module": "../esm/DropdownMenu.js",
"types": "../esm/DropdownMenu.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/DropdownToggle",
"private": true,
"main": "../cjs/DropdownToggle.js",
"module": "../esm/DropdownToggle.js",
"types": "../esm/DropdownToggle.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/ImperativeTransition",
"private": true,
"main": "../cjs/ImperativeTransition.js",
"module": "../esm/ImperativeTransition.js",
"types": "../esm/ImperativeTransition.d.ts"
}

View File

@@ -0,0 +1,22 @@
The MIT License (MIT)
Copyright (c) 2015 react-bootstrap
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Modal",
"private": true,
"main": "../cjs/Modal.js",
"module": "../esm/Modal.js",
"types": "../esm/Modal.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/ModalManager",
"private": true,
"main": "../cjs/ModalManager.js",
"module": "../esm/ModalManager.js",
"types": "../esm/ModalManager.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Nav",
"private": true,
"main": "../cjs/Nav.js",
"module": "../esm/Nav.js",
"types": "../esm/Nav.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/NavContext",
"private": true,
"main": "../cjs/NavContext.js",
"module": "../esm/NavContext.js",
"types": "../esm/NavContext.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/NavItem",
"private": true,
"main": "../cjs/NavItem.js",
"module": "../esm/NavItem.js",
"types": "../esm/NavItem.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/NoopTransition",
"private": true,
"main": "../cjs/NoopTransition.js",
"module": "../esm/NoopTransition.js",
"types": "../esm/NoopTransition.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Overlay",
"private": true,
"main": "../cjs/Overlay.js",
"module": "../esm/Overlay.js",
"types": "../esm/Overlay.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Portal",
"private": true,
"main": "../cjs/Portal.js",
"module": "../esm/Portal.js",
"types": "../esm/Portal.d.ts"
}

View File

@@ -0,0 +1,26 @@
<div align="center">
<img src="https://raw.githubusercontent.com/react-restart/ui/main/www/static/refresh-dot.svg" style="width: 75px;height: 75;display: inline-block;" valign="middle"/>
</div>
<h1 align="center">Restart UI</h1>
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.
## Documentation
https://react-restart.github.io/ui/
## Installation
```sh
npm install --save @restart/ui
```
## Contributing
Checkout the repo and setup the project:
1. Bootstrap your environment `yarn bootstrap`
2. Start the development server `yarn start`

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/RTGTransition",
"private": true,
"main": "../cjs/RTGTransition.js",
"module": "../esm/RTGTransition.js",
"types": "../esm/RTGTransition.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/SelectableContext",
"private": true,
"main": "../cjs/SelectableContext.js",
"module": "../esm/SelectableContext.js",
"types": "../esm/SelectableContext.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/TabContext",
"private": true,
"main": "../cjs/TabContext.js",
"module": "../esm/TabContext.js",
"types": "../esm/TabContext.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/TabPanel",
"private": true,
"main": "../cjs/TabPanel.js",
"module": "../esm/TabPanel.js",
"types": "../esm/TabPanel.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Tabs",
"private": true,
"main": "../cjs/Tabs.js",
"module": "../esm/Tabs.js",
"types": "../esm/Tabs.d.ts"
}

View File

@@ -0,0 +1,7 @@
{
"name": "@restart/ui/Waypoint",
"private": true,
"main": "../cjs/Waypoint.js",
"module": "../esm/Waypoint.js",
"types": "../esm/Waypoint.d.ts"
}

View File

@@ -0,0 +1,14 @@
import * as React from 'react';
export declare function isTrivialHref(href?: string): boolean;
export interface AnchorProps extends React.HTMLAttributes<HTMLElement> {
href?: string;
disabled?: boolean;
role?: string;
tabIndex?: number;
}
/**
* An generic `<a>` component that covers a few A11y cases, ensuring that
* cases where the `href` is missing or trivial like "#" are treated like buttons.
*/
declare const Anchor: React.ForwardRefExoticComponent<AnchorProps & React.RefAttributes<HTMLAnchorElement>>;
export default Anchor;

View File

@@ -0,0 +1,49 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
exports.isTrivialHref = isTrivialHref;
var React = _interopRequireWildcard(require("react"));
var _hooks = require("@restart/hooks");
var _Button = require("./Button");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["onKeyDown"];
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/anchor-has-content */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function isTrivialHref(href) {
return !href || href.trim() === '#';
}
/**
* An generic `<a>` component that covers a few A11y cases, ensuring that
* cases where the `href` is missing or trivial like "#" are treated like buttons.
*/
const Anchor = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
onKeyDown
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
const [buttonProps] = (0, _Button.useButtonProps)(Object.assign({
tagName: 'a'
}, props));
const handleKeyDown = (0, _hooks.useEventCallback)(e => {
buttonProps.onKeyDown(e);
onKeyDown == null ? void 0 : onKeyDown(e);
});
if (isTrivialHref(props.href) || props.role === 'button') {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", Object.assign({
ref: ref
}, props, buttonProps, {
onKeyDown: handleKeyDown
}));
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", Object.assign({
ref: ref
}, props, {
onKeyDown: onKeyDown
}));
});
Anchor.displayName = 'Anchor';
var _default = exports.default = Anchor;

View File

@@ -0,0 +1,50 @@
import * as React from 'react';
export type ButtonType = 'button' | 'reset' | 'submit';
export interface AnchorOptions {
href?: string;
rel?: string;
target?: string;
}
export interface UseButtonPropsOptions extends AnchorOptions {
type?: ButtonType;
disabled?: boolean;
onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
tabIndex?: number;
tagName?: keyof React.JSX.IntrinsicElements;
role?: React.AriaRole | undefined;
}
export declare function isTrivialHref(href?: string): boolean;
export interface AriaButtonProps {
type?: ButtonType | undefined;
disabled: boolean | undefined;
role?: React.AriaRole;
tabIndex?: number | undefined;
href?: string | undefined;
target?: string | undefined;
rel?: string | undefined;
'aria-disabled'?: true | undefined;
onClick?: (event: React.MouseEvent | React.KeyboardEvent) => void;
onKeyDown?: (event: React.KeyboardEvent) => void;
}
export interface UseButtonPropsMetadata {
tagName: React.ElementType;
}
export declare function useButtonProps({ tagName, disabled, href, target, rel, role, onClick, tabIndex, type, }: UseButtonPropsOptions): [AriaButtonProps, UseButtonPropsMetadata];
export interface BaseButtonProps {
/**
* Control the underlying rendered element directly by passing in a valid
* component type
*/
as?: keyof React.JSX.IntrinsicElements | undefined;
/** The disabled state of the button */
disabled?: boolean | undefined;
/** Optionally specify an href to render a `<a>` tag styled as a button */
href?: string | undefined;
/** Anchor target, when rendering an anchor as a button */
target?: string | undefined;
rel?: string | undefined;
}
export interface ButtonProps extends BaseButtonProps, React.ComponentPropsWithoutRef<'button'> {
}
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
export default Button;

View File

@@ -0,0 +1,97 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
exports.isTrivialHref = isTrivialHref;
exports.useButtonProps = useButtonProps;
var React = _interopRequireWildcard(require("react"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["as", "disabled"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function isTrivialHref(href) {
return !href || href.trim() === '#';
}
function useButtonProps({
tagName,
disabled,
href,
target,
rel,
role,
onClick,
tabIndex = 0,
type
}) {
if (!tagName) {
if (href != null || target != null || rel != null) {
tagName = 'a';
} else {
tagName = 'button';
}
}
const meta = {
tagName
};
if (tagName === 'button') {
return [{
type: type || 'button',
disabled
}, meta];
}
const handleClick = event => {
if (disabled || tagName === 'a' && isTrivialHref(href)) {
event.preventDefault();
}
if (disabled) {
event.stopPropagation();
return;
}
onClick == null ? void 0 : onClick(event);
};
const handleKeyDown = event => {
if (event.key === ' ') {
event.preventDefault();
handleClick(event);
}
};
if (tagName === 'a') {
// Ensure there's a href so Enter can trigger anchor button.
href || (href = '#');
if (disabled) {
href = undefined;
}
}
return [{
role: role != null ? role : 'button',
// explicitly undefined so that it overrides the props disabled in a spread
// e.g. <Tag {...props} {...hookProps} />
disabled: undefined,
tabIndex: disabled ? undefined : tabIndex,
href,
target: tagName === 'a' ? target : undefined,
'aria-disabled': !disabled ? undefined : disabled,
rel: tagName === 'a' ? rel : undefined,
onClick: handleClick,
onKeyDown: handleKeyDown
}, meta];
}
const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
as: asProp,
disabled
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
const [buttonProps, {
tagName: Component
}] = useButtonProps(Object.assign({
tagName: asProp,
disabled
}, props));
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, Object.assign({}, props, buttonProps, {
ref: ref
}));
});
Button.displayName = 'Button';
var _default = exports.default = Button;

View File

@@ -0,0 +1,4 @@
export declare const ATTRIBUTE_PREFIX: "data-rr-ui-";
export declare const PROPERTY_PREFIX: "rrUi";
export declare function dataAttr<T extends string>(property: T): `data-rr-ui-${T}`;
export declare function dataProp<T extends string>(property: T): `rrUi${T}`;

View File

@@ -0,0 +1,14 @@
"use strict";
exports.__esModule = true;
exports.PROPERTY_PREFIX = exports.ATTRIBUTE_PREFIX = void 0;
exports.dataAttr = dataAttr;
exports.dataProp = dataProp;
const ATTRIBUTE_PREFIX = exports.ATTRIBUTE_PREFIX = `data-rr-ui-`;
const PROPERTY_PREFIX = exports.PROPERTY_PREFIX = `rrUi`;
function dataAttr(property) {
return `${ATTRIBUTE_PREFIX}${property}`;
}
function dataProp(property) {
return `${PROPERTY_PREFIX}${property}`;
}

View File

@@ -0,0 +1,93 @@
import * as React from 'react';
import DropdownMenu, { DropdownMenuProps, UseDropdownMenuMetadata, UseDropdownMenuOptions } from './DropdownMenu';
import DropdownToggle, { DropdownToggleProps, UseDropdownToggleMetadata } from './DropdownToggle';
import { DropdownItemProps } from './DropdownItem';
import { SelectCallback } from './types';
import { Placement } from './usePopper';
export type { DropdownMenuProps, UseDropdownMenuMetadata, UseDropdownMenuOptions, DropdownToggleProps, UseDropdownToggleMetadata, DropdownItemProps, };
export interface DropdownInjectedProps {
onKeyDown: React.KeyboardEventHandler;
}
export type ToggleEvent = React.SyntheticEvent | KeyboardEvent | MouseEvent;
export interface ToggleMetadata {
source: string | undefined;
originalEvent: ToggleEvent | undefined;
}
export interface DropdownProps {
/**
* The PopperJS placement for positioning the Dropdown menu in relation to
* its Toggle.
*
* @default 'bottom-start'
*/
placement?: Placement;
/**
* Sets the initial visibility of the Dropdown.
*/
defaultShow?: boolean;
/**
* Whether or not the Dropdown is visible.
*
* @controllable onToggle
*/
show?: boolean;
/**
* A callback fired when a DropdownItem has been selected.
*/
onSelect?: SelectCallback;
/**
* A callback fired when the Dropdown wishes to change visibility. Called with
* the requested `show` value, the DOM event, and the source that fired it:
* `'click'`,`'keydown'`,`'rootClose'`, or `'select'`.
*
* ```ts static
* function(
* nextShow: boolean,
* meta: ToggleMetadata,
* ): void
* ```
*
* @controllable show
*/
onToggle?: (nextShow: boolean, meta: ToggleMetadata) => void;
/**
* A css selector string that will return __focusable__ menu items.
* Selectors should be relative to the menu component:
* e.g. ` > li:not('.disabled')`
*/
itemSelector?: string;
/**
* Controls the focus behavior for when the Dropdown is opened. Set to
* `true` to always focus the first menu item, `keyboard` to focus only when
* navigating via the keyboard, or `false` to disable completely
*
* The Default behavior is `false` **unless** the Menu has a `role="menu"`
* where it will default to `keyboard` to match the recommended [ARIA Authoring
* practices](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton).
*/
focusFirstItemOnShow?: boolean | 'keyboard';
/**
* A render prop that returns the root dropdown element. The `props`
* argument should spread through to an element containing _both_ the
* menu and toggle in order to handle keyboard events for focus management.
*
* @type {Function ({
* props: {
* onKeyDown: (SyntheticEvent) => void,
* },
* }) => React.Element}
*/
children: React.ReactNode;
}
/**
* @displayName Dropdown
* @public
*/
declare function Dropdown({ defaultShow, show: rawShow, onSelect, onToggle: rawOnToggle, itemSelector, focusFirstItemOnShow, placement, children, }: DropdownProps): React.JSX.Element;
declare namespace Dropdown {
var displayName: string;
var Menu: typeof DropdownMenu;
var Toggle: typeof DropdownToggle;
var Item: import("./types").DynamicRefForwardingComponent<React.ForwardRefExoticComponent<import("./Button").ButtonProps & React.RefAttributes<HTMLElement>>, DropdownItemProps>;
}
export default Dropdown;

View File

@@ -0,0 +1,202 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _querySelectorAll = _interopRequireDefault(require("dom-helpers/querySelectorAll"));
var _addEventListener = _interopRequireDefault(require("dom-helpers/addEventListener"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _uncontrollable = require("uncontrollable");
var _usePrevious = _interopRequireDefault(require("@restart/hooks/usePrevious"));
var _useForceUpdate = _interopRequireDefault(require("@restart/hooks/useForceUpdate"));
var _useEventListener = _interopRequireDefault(require("@restart/hooks/useEventListener"));
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
var _DropdownMenu = _interopRequireDefault(require("./DropdownMenu"));
var _DropdownToggle = _interopRequireWildcard(require("./DropdownToggle"));
var _DropdownItem = _interopRequireDefault(require("./DropdownItem"));
var _SelectableContext = _interopRequireDefault(require("./SelectableContext"));
var _DataKey = require("./DataKey");
var _useWindow = _interopRequireDefault(require("./useWindow"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function useRefWithUpdate() {
const forceUpdate = (0, _useForceUpdate.default)();
const ref = (0, _react.useRef)(null);
const attachRef = (0, _react.useCallback)(element => {
ref.current = element;
// ensure that a menu set triggers an update for consumers
forceUpdate();
}, [forceUpdate]);
return [ref, attachRef];
}
/**
* @displayName Dropdown
* @public
*/
function Dropdown({
defaultShow,
show: rawShow,
onSelect,
onToggle: rawOnToggle,
itemSelector = `* [${(0, _DataKey.dataAttr)('dropdown-item')}]`,
focusFirstItemOnShow,
placement = 'bottom-start',
children
}) {
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
// the value as quickly as possible, otherwise the effect to focus the element
// may run before the state value is set
const [menuRef, setMenu] = useRefWithUpdate();
const menuElement = menuRef.current;
const [toggleRef, setToggle] = useRefWithUpdate();
const toggleElement = toggleRef.current;
const lastShow = (0, _usePrevious.default)(show);
const lastSourceEvent = (0, _react.useRef)(null);
const focusInDropdown = (0, _react.useRef)(false);
const onSelectCtx = (0, _react.useContext)(_SelectableContext.default);
const toggle = (0, _react.useCallback)((nextShow, event, source = event == null ? void 0 : event.type) => {
onToggle(nextShow, {
originalEvent: event,
source
});
}, [onToggle]);
const handleSelect = (0, _useEventCallback.default)((key, event) => {
onSelect == null ? void 0 : onSelect(key, event);
toggle(false, event, 'select');
if (!event.isPropagationStopped()) {
onSelectCtx == null ? void 0 : onSelectCtx(key, event);
}
});
const context = (0, _react.useMemo)(() => ({
toggle,
placement,
show,
menuElement,
toggleElement,
setMenu,
setToggle
}), [toggle, placement, show, menuElement, toggleElement, setMenu, setToggle]);
if (menuElement && lastShow && !show) {
focusInDropdown.current = menuElement.contains(menuElement.ownerDocument.activeElement);
}
const focusToggle = (0, _useEventCallback.default)(() => {
if (toggleElement && toggleElement.focus) {
toggleElement.focus();
}
});
const maybeFocusFirst = (0, _useEventCallback.default)(() => {
const type = lastSourceEvent.current;
let focusType = focusFirstItemOnShow;
if (focusType == null) {
focusType = menuRef.current && (0, _DropdownToggle.isRoleMenu)(menuRef.current) ? 'keyboard' : false;
}
if (focusType === false || focusType === 'keyboard' && !/^key.+$/.test(type)) {
return;
}
const first = (0, _querySelectorAll.default)(menuRef.current, itemSelector)[0];
if (first && first.focus) first.focus();
});
(0, _react.useEffect)(() => {
if (show) maybeFocusFirst();else if (focusInDropdown.current) {
focusInDropdown.current = false;
focusToggle();
}
// only `show` should be changing
}, [show, focusInDropdown, focusToggle, maybeFocusFirst]);
(0, _react.useEffect)(() => {
lastSourceEvent.current = null;
});
const getNextFocusedChild = (current, offset) => {
if (!menuRef.current) return null;
const items = (0, _querySelectorAll.default)(menuRef.current, itemSelector);
let index = items.indexOf(current) + offset;
index = Math.max(0, Math.min(index, items.length));
return items[index];
};
(0, _useEventListener.default)((0, _react.useCallback)(() => window.document, [window]), 'keydown', event => {
var _menuRef$current, _toggleRef$current;
const {
key
} = event;
const target = event.target;
const fromMenu = (_menuRef$current = menuRef.current) == null ? void 0 : _menuRef$current.contains(target);
const fromToggle = (_toggleRef$current = toggleRef.current) == null ? void 0 : _toggleRef$current.contains(target);
// Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400
// in inscrutability
const isInput = /input|textarea/i.test(target.tagName);
if (isInput && (key === ' ' || key !== 'Escape' && fromMenu || key === 'Escape' && target.type === 'search')) {
return;
}
if (!fromMenu && !fromToggle) {
return;
}
if (key === 'Tab' && (!menuRef.current || !show)) {
return;
}
lastSourceEvent.current = event.type;
const meta = {
originalEvent: event,
source: event.type
};
switch (key) {
case 'ArrowUp':
{
const next = getNextFocusedChild(target, -1);
if (next && next.focus) next.focus();
event.preventDefault();
return;
}
case 'ArrowDown':
event.preventDefault();
if (!show) {
onToggle(true, meta);
} else {
const next = getNextFocusedChild(target, 1);
if (next && next.focus) next.focus();
}
return;
case 'Tab':
// on keydown the target is the element being tabbed FROM, we need that
// to know if this event is relevant to this dropdown (e.g. in this menu).
// On `keyup` the target is the element being tagged TO which we use to check
// if focus has left the menu
(0, _addEventListener.default)(target.ownerDocument, 'keyup', e => {
var _menuRef$current2;
if (e.key === 'Tab' && !e.target || !((_menuRef$current2 = menuRef.current) != null && _menuRef$current2.contains(e.target))) {
onToggle(false, meta);
}
}, {
once: true
});
break;
case 'Escape':
if (key === 'Escape') {
event.preventDefault();
event.stopPropagation();
}
onToggle(false, meta);
break;
default:
}
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableContext.default.Provider, {
value: handleSelect,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContext.default.Provider, {
value: context,
children: children
})
});
}
Dropdown.displayName = 'Dropdown';
Dropdown.Menu = _DropdownMenu.default;
Dropdown.Toggle = _DropdownToggle.default;
Dropdown.Item = _DropdownItem.default;
var _default = exports.default = Dropdown;

View File

@@ -0,0 +1,13 @@
import * as React from 'react';
import type { Placement } from './usePopper';
export type DropdownContextValue = {
toggle: (nextShow: boolean, event?: React.SyntheticEvent | Event) => void;
menuElement: HTMLElement | null;
toggleElement: HTMLElement | null;
setMenu: (ref: HTMLElement | null) => void;
setToggle: (ref: HTMLElement | null) => void;
show: boolean;
placement?: Placement;
};
declare const DropdownContext: React.Context<DropdownContextValue | null>;
export default DropdownContext;

View File

@@ -0,0 +1,9 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const DropdownContext = /*#__PURE__*/React.createContext(null);
var _default = exports.default = DropdownContext;

View File

@@ -0,0 +1,46 @@
import * as React from 'react';
import { EventKey, DynamicRefForwardingComponent } from './types';
import Button from './Button';
export interface DropdownItemProps extends React.HTMLAttributes<HTMLElement> {
/**
* Element used to render the component.
*/
as?: React.ElementType;
/**
* Highlight the menu item as active.
*/
active?: boolean;
/**
* Disable the menu item, making it unselectable.
*/
disabled?: boolean;
/**
* Value passed to the `onSelect` handler, useful for identifying the selected menu item.
*/
eventKey?: EventKey;
/**
* HTML `href` attribute corresponding to `a.href`.
*/
href?: string;
}
interface UseDropdownItemOptions {
key?: EventKey | null;
href?: string;
active?: boolean;
disabled?: boolean;
onClick?: React.MouseEventHandler;
}
/**
* Create a dropdown item. Returns a set of props for the dropdown item component
* including an `onClick` handler that prevents selection when the item is disabled
*/
export declare function useDropdownItem({ key, href, active, disabled, onClick, }: UseDropdownItemOptions): readonly [{
readonly onClick: (event: any) => void;
readonly 'aria-disabled': true | undefined;
readonly 'aria-selected': boolean | undefined;
readonly "data-rr-ui-dropdown-item": "";
}, {
readonly isActive: boolean | undefined;
}];
declare const DropdownItem: DynamicRefForwardingComponent<typeof Button, DropdownItemProps>;
export default DropdownItem;

View File

@@ -0,0 +1,74 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
exports.useDropdownItem = useDropdownItem;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _SelectableContext = _interopRequireWildcard(require("./SelectableContext"));
var _NavContext = _interopRequireDefault(require("./NavContext"));
var _Button = _interopRequireDefault(require("./Button"));
var _DataKey = require("./DataKey");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["eventKey", "disabled", "onClick", "active", "as"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
/**
* Create a dropdown item. Returns a set of props for the dropdown item component
* including an `onClick` handler that prevents selection when the item is disabled
*/
function useDropdownItem({
key,
href,
active,
disabled,
onClick
}) {
const onSelectCtx = (0, _react.useContext)(_SelectableContext.default);
const navContext = (0, _react.useContext)(_NavContext.default);
const {
activeKey
} = navContext || {};
const eventKey = (0, _SelectableContext.makeEventKey)(key, href);
const isActive = active == null && key != null ? (0, _SelectableContext.makeEventKey)(activeKey) === eventKey : active;
const handleClick = (0, _useEventCallback.default)(event => {
if (disabled) return;
onClick == null ? void 0 : onClick(event);
if (onSelectCtx && !event.isPropagationStopped()) {
onSelectCtx(eventKey, event);
}
});
return [{
onClick: handleClick,
'aria-disabled': disabled || undefined,
'aria-selected': isActive,
[(0, _DataKey.dataAttr)('dropdown-item')]: ''
}, {
isActive
}];
}
const DropdownItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
eventKey,
disabled,
onClick,
active,
as: Component = _Button.default
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
const [dropdownItemProps] = useDropdownItem({
key: eventKey,
href: props.href,
disabled,
onClick,
active
});
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, Object.assign({}, props, {
ref: ref
}, dropdownItemProps));
});
DropdownItem.displayName = 'DropdownItem';
var _default = exports.default = DropdownItem;

View File

@@ -0,0 +1,117 @@
import * as React from 'react';
import { DropdownContextValue } from './DropdownContext';
import { UsePopperOptions, Placement, Offset, UsePopperState } from './usePopper';
import { ClickOutsideOptions } from './useClickOutside';
export interface UseDropdownMenuOptions {
/**
* Enables the Popper.js `flip` modifier, allowing the Dropdown to
* automatically adjust it's placement in case of overlap with the viewport or
* toggle. See the [flip docs](https://popper.js.org/docs/v2/modifiers/flip/)
* for more info.
*/
flip?: boolean;
/**
* Controls the visible state of the menu, generally this is provided by the
* parent `Dropdown` component, but may also be specified as a prop directly.
*/
show?: boolean;
/**
* Use the `fixed` positioning strategy in Popper. This is used if the
* dropdown toggle is in a fixed container.
*/
fixed?: boolean;
/**
* The PopperJS placement for positioning the Dropdown menu in relation to it's Toggle.
* Generally this is provided by the parent `Dropdown` component,
* but may also be specified as a prop directly.
*/
placement?: Placement;
/**
* Whether or not to use Popper for positioning the menu.
*/
usePopper?: boolean;
/**
* Whether or not to add scroll and resize listeners to update menu position.
*
* See the [event listeners docs](https://popper.js.org/docs/v2/modifiers/event-listeners/)
* for more info.
*/
enableEventListeners?: boolean;
/**
* Offset of the dropdown menu from the dropdown toggle. See the
* [offset docs](https://popper.js.org/docs/v2/modifiers/offset/) for more info.
*/
offset?: Offset;
/**
* Override the default event used by RootCloseWrapper.
*/
rootCloseEvent?: ClickOutsideOptions['clickTrigger'];
/**
* A set of popper options and props passed directly to react-popper's Popper component.
*/
popperConfig?: Omit<UsePopperOptions, 'enabled' | 'placement'>;
}
export type UserDropdownMenuProps = Record<string, any> & {
ref: React.RefCallback<HTMLElement>;
style?: React.CSSProperties;
'aria-labelledby'?: string;
};
export type UserDropdownMenuArrowProps = Record<string, any> & {
ref: React.RefCallback<HTMLElement>;
style: React.CSSProperties;
};
export interface UseDropdownMenuMetadata {
show: boolean;
placement?: Placement;
hasShown: boolean;
toggle?: DropdownContextValue['toggle'];
popper: UsePopperState | null;
arrowProps: Partial<UserDropdownMenuArrowProps>;
}
/**
* @memberOf Dropdown
* @param {object} options
* @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
* @param {[number, number]} options.offset Define an offset distance between the Menu and the Toggle
* @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
* @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
* @param {string} options.rootCloseEvent The pointer event to listen for when determining "clicks outside" the menu for triggering a close.
* @param {object} options.popperConfig Options passed to the [`usePopper`](/api/usePopper) hook.
*/
export declare function useDropdownMenu(options?: UseDropdownMenuOptions): readonly [UserDropdownMenuProps, UseDropdownMenuMetadata];
export interface DropdownMenuProps extends UseDropdownMenuOptions {
/**
* A render prop that returns a Menu element. The `props`
* argument should be spread through to **a component that can accept a ref**.
*
* @type {Function ({
* show: boolean,
* close: (?SyntheticEvent) => void,
* placement: Placement,
* update: () => void,
* forceUpdate: () => void,
* props: {
* ref: (?HTMLElement) => void,
* style: { [string]: string | number },
* aria-labelledby: ?string
* },
* arrowProps: {
* ref: (?HTMLElement) => void,
* style: { [string]: string | number },
* },
* }) => React.Element}
*/
children: (props: UserDropdownMenuProps, meta: UseDropdownMenuMetadata) => React.ReactNode;
}
/**
* Also exported as `<Dropdown.Menu>` from `Dropdown`.
*
* @displayName DropdownMenu
* @memberOf Dropdown
*/
declare function DropdownMenu({ children, usePopper: usePopperProp, ...options }: DropdownMenuProps): React.JSX.Element;
declare namespace DropdownMenu {
var displayName: string;
}
/** @component */
export default DropdownMenu;

View File

@@ -0,0 +1,114 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
exports.useDropdownMenu = useDropdownMenu;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _useCallbackRef = _interopRequireDefault(require("@restart/hooks/useCallbackRef"));
var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
var _usePopper = _interopRequireDefault(require("./usePopper"));
var _useClickOutside = _interopRequireDefault(require("./useClickOutside"));
var _mergeOptionsWithPopperConfig = _interopRequireDefault(require("./mergeOptionsWithPopperConfig"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "usePopper"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
const noop = () => {};
/**
* @memberOf Dropdown
* @param {object} options
* @param {boolean} options.flip Automatically adjust the menu `drop` position based on viewport edge detection
* @param {[number, number]} options.offset Define an offset distance between the Menu and the Toggle
* @param {boolean} options.show Display the menu manually, ignored in the context of a `Dropdown`
* @param {boolean} options.usePopper opt in/out of using PopperJS to position menus. When disabled you must position it yourself.
* @param {string} options.rootCloseEvent The pointer event to listen for when determining "clicks outside" the menu for triggering a close.
* @param {object} options.popperConfig Options passed to the [`usePopper`](/api/usePopper) hook.
*/
function useDropdownMenu(options = {}) {
const context = (0, _react.useContext)(_DropdownContext.default);
const [arrowElement, attachArrowRef] = (0, _useCallbackRef.default)();
const hasShownRef = (0, _react.useRef)(false);
const {
flip,
offset,
rootCloseEvent,
fixed = false,
placement: placementOverride,
popperConfig = {},
enableEventListeners = true,
usePopper: shouldUsePopper = !!context
} = options;
const show = (context == null ? void 0 : context.show) == null ? !!options.show : context.show;
if (show && !hasShownRef.current) {
hasShownRef.current = true;
}
const handleClose = e => {
context == null ? void 0 : context.toggle(false, e);
};
const {
placement,
setMenu,
menuElement,
toggleElement
} = context || {};
const popper = (0, _usePopper.default)(toggleElement, menuElement, (0, _mergeOptionsWithPopperConfig.default)({
placement: placementOverride || placement || 'bottom-start',
enabled: shouldUsePopper,
enableEvents: enableEventListeners == null ? show : enableEventListeners,
offset,
flip,
fixed,
arrowElement,
popperConfig
}));
const menuProps = Object.assign({
ref: setMenu || noop,
'aria-labelledby': toggleElement == null ? void 0 : toggleElement.id
}, popper.attributes.popper, {
style: popper.styles.popper
});
const metadata = {
show,
placement,
hasShown: hasShownRef.current,
toggle: context == null ? void 0 : context.toggle,
popper: shouldUsePopper ? popper : null,
arrowProps: shouldUsePopper ? Object.assign({
ref: attachArrowRef
}, popper.attributes.arrow, {
style: popper.styles.arrow
}) : {}
};
(0, _useClickOutside.default)(menuElement, handleClose, {
clickTrigger: rootCloseEvent,
disabled: !show
});
return [menuProps, metadata];
}
/**
* Also exported as `<Dropdown.Menu>` from `Dropdown`.
*
* @displayName DropdownMenu
* @memberOf Dropdown
*/
function DropdownMenu(_ref) {
let {
children,
usePopper: usePopperProp = true
} = _ref,
options = _objectWithoutPropertiesLoose(_ref, _excluded);
const [props, meta] = useDropdownMenu(Object.assign({}, options, {
usePopper: usePopperProp
}));
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: children(props, meta)
});
}
DropdownMenu.displayName = 'DropdownMenu';
/** @component */
var _default = exports.default = DropdownMenu;

View File

@@ -0,0 +1,56 @@
import * as React from 'react';
import { DropdownContextValue } from './DropdownContext';
export declare const isRoleMenu: (el: HTMLElement) => boolean;
export interface UseDropdownToggleProps {
id: string;
ref: DropdownContextValue['setToggle'];
onClick: React.MouseEventHandler;
'aria-expanded': boolean;
'aria-haspopup'?: true;
}
export interface UseDropdownToggleMetadata {
show: DropdownContextValue['show'];
toggle: DropdownContextValue['toggle'];
}
/**
* Wires up Dropdown toggle functionality, returning a set a props to attach
* to the element that functions as the dropdown toggle (generally a button).
*
* @memberOf Dropdown
*/
export declare function useDropdownToggle(): [
UseDropdownToggleProps,
UseDropdownToggleMetadata
];
export interface DropdownToggleProps {
/**
* A render prop that returns a Toggle element. The `props`
* argument should spread through to **a component that can accept a ref**. Use
* the `onToggle` argument to toggle the menu open or closed
*
* @type {Function ({
* props: {
* ref: (?HTMLElement) => void,
* aria-haspopup: true
* aria-expanded: boolean
* },
* meta: {
* show: boolean,
* toggle: (show: boolean) => void,
* }
* }) => React.Element}
*/
children: (props: UseDropdownToggleProps, meta: UseDropdownToggleMetadata) => React.ReactNode;
}
/**
* Also exported as `<Dropdown.Toggle>` from `Dropdown`.
*
* @displayName DropdownToggle
* @memberOf Dropdown
*/
declare function DropdownToggle({ children }: DropdownToggleProps): React.JSX.Element;
declare namespace DropdownToggle {
var displayName: string;
}
/** @component */
export default DropdownToggle;

View File

@@ -0,0 +1,73 @@
"use strict";
exports.__esModule = true;
exports.isRoleMenu = exports.default = void 0;
exports.useDropdownToggle = useDropdownToggle;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _ssr = require("./ssr");
var _DropdownContext = _interopRequireDefault(require("./DropdownContext"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const isRoleMenu = el => {
var _el$getAttribute;
return ((_el$getAttribute = el.getAttribute('role')) == null ? void 0 : _el$getAttribute.toLowerCase()) === 'menu';
};
exports.isRoleMenu = isRoleMenu;
const noop = () => {};
/**
* Wires up Dropdown toggle functionality, returning a set a props to attach
* to the element that functions as the dropdown toggle (generally a button).
*
* @memberOf Dropdown
*/
function useDropdownToggle() {
const id = (0, _ssr.useSSRSafeId)();
const {
show = false,
toggle = noop,
setToggle,
menuElement
} = (0, _react.useContext)(_DropdownContext.default) || {};
const handleClick = (0, _react.useCallback)(e => {
toggle(!show, e);
}, [show, toggle]);
const props = {
id,
ref: setToggle || noop,
onClick: handleClick,
'aria-expanded': !!show
};
// This is maybe better down in an effect, but
// the component is going to update anyway when the menu element
// is set so might return new props.
if (menuElement && isRoleMenu(menuElement)) {
props['aria-haspopup'] = true;
}
return [props, {
show,
toggle
}];
}
/**
* Also exported as `<Dropdown.Toggle>` from `Dropdown`.
*
* @displayName DropdownToggle
* @memberOf Dropdown
*/
function DropdownToggle({
children
}) {
const [props, meta] = useDropdownToggle();
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: children(props, meta)
});
}
DropdownToggle.displayName = 'DropdownToggle';
/** @component */
var _default = exports.default = DropdownToggle;

View File

@@ -0,0 +1,29 @@
import React from 'react';
import { TransitionComponent, TransitionProps } from './types';
export interface TransitionFunctionOptions {
in: boolean;
element: HTMLElement;
initial: boolean;
isStale: () => boolean;
}
export type TransitionHandler = (options: TransitionFunctionOptions) => void | Promise<void>;
export interface UseTransitionOptions {
in: boolean;
onTransition: TransitionHandler;
initial?: boolean;
}
export declare function useTransition({ in: inProp, onTransition, }: UseTransitionOptions): React.RefObject<HTMLElement>;
export interface ImperativeTransitionProps extends TransitionProps {
transition: TransitionHandler;
appear: true;
mountOnEnter: true;
unmountOnExit: true;
}
/**
* Adapts an imperative transition function to a subset of the RTG `<Transition>` component API.
*
* ImperativeTransition does not support mounting options or `appear` at the moment, meaning
* that it always acts like: `mountOnEnter={true} unmountOnExit={true} appear={true}`
*/
export default function ImperativeTransition({ children, in: inProp, onExited, onEntered, transition, }: ImperativeTransitionProps): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
export declare function renderTransition(component: TransitionComponent | undefined, runTransition: TransitionHandler | undefined, props: TransitionProps & Omit<ImperativeTransitionProps, 'transition'>): React.JSX.Element;

View File

@@ -0,0 +1,103 @@
"use strict";
exports.__esModule = true;
exports.default = ImperativeTransition;
exports.renderTransition = renderTransition;
exports.useTransition = useTransition;
var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _useIsomorphicEffect = _interopRequireDefault(require("@restart/hooks/useIsomorphicEffect"));
var _react = _interopRequireWildcard(require("react"));
var _NoopTransition = _interopRequireDefault(require("./NoopTransition"));
var _RTGTransition = _interopRequireDefault(require("./RTGTransition"));
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function useTransition({
in: inProp,
onTransition
}) {
const ref = (0, _react.useRef)(null);
const isInitialRef = (0, _react.useRef)(true);
const handleTransition = (0, _useEventCallback.default)(onTransition);
(0, _useIsomorphicEffect.default)(() => {
if (!ref.current) {
return undefined;
}
let stale = false;
handleTransition({
in: inProp,
element: ref.current,
initial: isInitialRef.current,
isStale: () => stale
});
return () => {
stale = true;
};
}, [inProp, handleTransition]);
(0, _useIsomorphicEffect.default)(() => {
isInitialRef.current = false;
// this is for strict mode
return () => {
isInitialRef.current = true;
};
}, []);
return ref;
}
/**
* Adapts an imperative transition function to a subset of the RTG `<Transition>` component API.
*
* ImperativeTransition does not support mounting options or `appear` at the moment, meaning
* that it always acts like: `mountOnEnter={true} unmountOnExit={true} appear={true}`
*/
function ImperativeTransition({
children,
in: inProp,
onExited,
onEntered,
transition
}) {
const [exited, setExited] = (0, _react.useState)(!inProp);
// TODO: I think this needs to be in an effect
if (inProp && exited) {
setExited(false);
}
const ref = useTransition({
in: !!inProp,
onTransition: options => {
const onFinish = () => {
if (options.isStale()) return;
if (options.in) {
onEntered == null ? void 0 : onEntered(options.element, options.initial);
} else {
setExited(true);
onExited == null ? void 0 : onExited(options.element);
}
};
Promise.resolve(transition(options)).then(onFinish, error => {
if (!options.in) setExited(true);
throw error;
});
}
});
const combinedRef = (0, _useMergedRefs.default)(ref, (0, _utils.getChildRef)(children));
return exited && !inProp ? null : /*#__PURE__*/(0, _react.cloneElement)(children, {
ref: combinedRef
});
}
function renderTransition(component, runTransition, props) {
if (component) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RTGTransition.default, Object.assign({}, props, {
component: component
}));
}
if (runTransition) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ImperativeTransition, Object.assign({}, props, {
transition: runTransition
}));
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoopTransition.default, Object.assign({}, props));
}

View File

@@ -0,0 +1,153 @@
import * as React from 'react';
import ModalManager from './ModalManager';
import { DOMContainer } from './useWaitForDOMRef';
import { TransitionCallbacks } from './types';
import { TransitionHandler } from './ImperativeTransition';
export interface ModalTransitionProps extends TransitionCallbacks {
in: boolean;
appear?: boolean;
unmountOnExit?: boolean;
children: React.ReactElement;
}
export type ModalTransitionComponent = React.ComponentType<ModalTransitionProps>;
export interface RenderModalDialogProps {
style: React.CSSProperties | undefined;
className: string | undefined;
tabIndex: number;
role: string;
ref: React.RefCallback<Element>;
'aria-modal': boolean | undefined;
}
export interface RenderModalBackdropProps {
ref: React.RefCallback<Element>;
onClick: (event: React.SyntheticEvent) => void;
}
export interface BaseModalProps extends TransitionCallbacks {
children?: React.ReactElement;
role?: string;
style?: React.CSSProperties;
className?: string;
/**
* Set the visibility of the Modal
*/
show?: boolean;
/**
* A DOM element, a `ref` to an element, or function that returns either. The Modal is appended to it's `container` element.
*
*/
container?: DOMContainer;
/**
* A callback fired when the Modal is opening.
*/
onShow?: () => void;
/**
* A callback fired when either the backdrop is clicked, or the escape key is pressed.
*
* The `onHide` callback only signals intent from the Modal,
* you must actually set the `show` prop to `false` for the Modal to close.
*/
onHide?: () => void;
/**
* A ModalManager instance used to track and manage the state of open
* Modals. Useful when customizing how modals interact within a container
*/
manager?: ModalManager;
/**
* Include a backdrop component. A `static`backdrop
* will not trigger a Modal onHide when clicked.
*/
backdrop?: true | false | 'static';
/**
* A function that returns the dialog component. Useful for custom
* rendering. **Note:** the component should make sure to apply the provided ref.
*
* ```js static
* renderDialog={props => <MyDialog {...props} />}
* ```
*/
renderDialog?: (props: RenderModalDialogProps) => React.ReactNode;
/**
* A function that returns a backdrop component. Useful for custom
* backdrop rendering.
*
* ```js
* renderBackdrop={props => <MyBackdrop {...props} />}
* ```
*/
renderBackdrop?: (props: RenderModalBackdropProps) => React.ReactNode;
/**
* A callback fired when the escape key, if specified in `keyboard`, is pressed.
*
* If preventDefault() is called on the keyboard event, closing the modal will be cancelled.
*/
onEscapeKeyDown?: (e: KeyboardEvent) => void;
/**
* A callback fired when the backdrop, if specified, is clicked.
*/
onBackdropClick?: (e: React.SyntheticEvent) => void;
/**
* Close the modal when escape key is pressed
*/
keyboard?: boolean;
/**
* A `react-transition-group` `<Transition/>` component used
* to control animations for the dialog component.
*/
transition?: ModalTransitionComponent;
/**
* A transition handler, called with the `show` state and dialog element.
* Should return a promise when the transition is complete
*/
runTransition?: TransitionHandler;
/**
* A `react-transition-group` `<Transition/>` component used
* to control animations for the backdrop components.
*/
backdropTransition?: ModalTransitionComponent;
/**
* A transition handler, called with the `show` state and backdrop element.
* Should return a promise when the transition is complete
*/
runBackdropTransition?: TransitionHandler;
/**
* When `true` The modal will automatically shift focus to itself when it opens, and
* replace it to the last focused element when it closes. This also
* works correctly with any Modal children that have the `autoFocus` prop.
*
* Generally this should never be set to `false` as it makes the Modal less
* accessible to assistive technologies, like screen readers.
*/
autoFocus?: boolean;
/**
* When `true` The modal will prevent focus from leaving the Modal while open.
*
* Generally this should never be set to `false` as it makes the Modal less
* accessible to assistive technologies, like screen readers.
*/
enforceFocus?: boolean;
/**
* When `true` The modal will restore focus to previously focused element once
* modal is hidden
*/
restoreFocus?: boolean;
/**
* Options passed to focus function when `restoreFocus` is set to `true`
*
* @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#Parameters
*/
restoreFocusOptions?: {
preventScroll: boolean;
};
}
export interface ModalProps extends BaseModalProps {
[other: string]: any;
}
export interface ModalHandle {
dialog: HTMLElement | null;
backdrop: HTMLElement | null;
isTopModal: () => boolean;
}
declare const _default: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<ModalHandle>> & {
Manager: typeof ModalManager;
};
export default _default;

View File

@@ -0,0 +1,251 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _activeElement = _interopRequireDefault(require("dom-helpers/activeElement"));
var _contains = _interopRequireDefault(require("dom-helpers/contains"));
var _canUseDOM = _interopRequireDefault(require("dom-helpers/canUseDOM"));
var _listen = _interopRequireDefault(require("dom-helpers/listen"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _reactDom = _interopRequireDefault(require("react-dom"));
var _useMounted = _interopRequireDefault(require("@restart/hooks/useMounted"));
var _useWillUnmount = _interopRequireDefault(require("@restart/hooks/useWillUnmount"));
var _usePrevious = _interopRequireDefault(require("@restart/hooks/usePrevious"));
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _ModalManager = _interopRequireDefault(require("./ModalManager"));
var _useWaitForDOMRef = _interopRequireDefault(require("./useWaitForDOMRef"));
var _useWindow = _interopRequireDefault(require("./useWindow"));
var _ImperativeTransition = require("./ImperativeTransition");
var _utils = require("./utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["show", "role", "className", "style", "children", "backdrop", "keyboard", "onBackdropClick", "onEscapeKeyDown", "transition", "runTransition", "backdropTransition", "runBackdropTransition", "autoFocus", "enforceFocus", "restoreFocus", "restoreFocusOptions", "renderDialog", "renderBackdrop", "manager", "container", "onShow", "onHide", "onExit", "onExited", "onExiting", "onEnter", "onEntering", "onEntered"];
/* eslint-disable @typescript-eslint/no-use-before-define, react/prop-types */
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
let manager;
/*
Modal props are split into a version with and without index signature so that you can fully use them in another projects
This is due to Typescript not playing well with index signatures e.g. when using Omit
*/
function getManager(window) {
if (!manager) manager = new _ModalManager.default({
ownerDocument: window == null ? void 0 : window.document
});
return manager;
}
function useModalManager(provided) {
const window = (0, _useWindow.default)();
const modalManager = provided || getManager(window);
const modal = (0, _react.useRef)({
dialog: null,
backdrop: null
});
return Object.assign(modal.current, {
add: () => modalManager.add(modal.current),
remove: () => modalManager.remove(modal.current),
isTopModal: () => modalManager.isTopModal(modal.current),
setDialogRef: (0, _react.useCallback)(ref => {
modal.current.dialog = ref;
}, []),
setBackdropRef: (0, _react.useCallback)(ref => {
modal.current.backdrop = ref;
}, [])
});
}
const Modal = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
let {
show = false,
role = 'dialog',
className,
style,
children,
backdrop = true,
keyboard = true,
onBackdropClick,
onEscapeKeyDown,
transition,
runTransition,
backdropTransition,
runBackdropTransition,
autoFocus = true,
enforceFocus = true,
restoreFocus = true,
restoreFocusOptions,
renderDialog,
renderBackdrop = props => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", Object.assign({}, props)),
manager: providedManager,
container: containerRef,
onShow,
onHide = () => {},
onExit,
onExited,
onExiting,
onEnter,
onEntering,
onEntered
} = _ref,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
const ownerWindow = (0, _useWindow.default)();
const container = (0, _useWaitForDOMRef.default)(containerRef);
const modal = useModalManager(providedManager);
const isMounted = (0, _useMounted.default)();
const prevShow = (0, _usePrevious.default)(show);
const [exited, setExited] = (0, _react.useState)(!show);
const lastFocusRef = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(ref, () => modal, [modal]);
if (_canUseDOM.default && !prevShow && show) {
lastFocusRef.current = (0, _activeElement.default)(ownerWindow == null ? void 0 : ownerWindow.document);
}
// TODO: I think this needs to be in an effect
if (show && exited) {
setExited(false);
}
const handleShow = (0, _useEventCallback.default)(() => {
modal.add();
removeKeydownListenerRef.current = (0, _listen.default)(document, 'keydown', handleDocumentKeyDown);
removeFocusListenerRef.current = (0, _listen.default)(document, 'focus',
// the timeout is necessary b/c this will run before the new modal is mounted
// and so steals focus from it
() => setTimeout(handleEnforceFocus), true);
if (onShow) {
onShow();
}
// autofocus after onShow to not trigger a focus event for previous
// modals before this one is shown.
if (autoFocus) {
var _modal$dialog$ownerDo, _modal$dialog;
const currentActiveElement = (0, _activeElement.default)((_modal$dialog$ownerDo = (_modal$dialog = modal.dialog) == null ? void 0 : _modal$dialog.ownerDocument) != null ? _modal$dialog$ownerDo : ownerWindow == null ? void 0 : ownerWindow.document);
if (modal.dialog && currentActiveElement && !(0, _contains.default)(modal.dialog, currentActiveElement)) {
lastFocusRef.current = currentActiveElement;
modal.dialog.focus();
}
}
});
const handleHide = (0, _useEventCallback.default)(() => {
modal.remove();
removeKeydownListenerRef.current == null ? void 0 : removeKeydownListenerRef.current();
removeFocusListenerRef.current == null ? void 0 : removeFocusListenerRef.current();
if (restoreFocus) {
var _lastFocusRef$current;
// Support: <=IE11 doesn't support `focus()` on svg elements (RB: #917)
(_lastFocusRef$current = lastFocusRef.current) == null ? void 0 : _lastFocusRef$current.focus == null ? void 0 : _lastFocusRef$current.focus(restoreFocusOptions);
lastFocusRef.current = null;
}
});
// TODO: try and combine these effects: https://github.com/react-bootstrap/react-overlays/pull/794#discussion_r409954120
// Show logic when:
// - show is `true` _and_ `container` has resolved
(0, _react.useEffect)(() => {
if (!show || !container) return;
handleShow();
}, [show, container, /* should never change: */handleShow]);
// Hide cleanup logic when:
// - `exited` switches to true
// - component unmounts;
(0, _react.useEffect)(() => {
if (!exited) return;
handleHide();
}, [exited, handleHide]);
(0, _useWillUnmount.default)(() => {
handleHide();
});
// --------------------------------
const handleEnforceFocus = (0, _useEventCallback.default)(() => {
if (!enforceFocus || !isMounted() || !modal.isTopModal()) {
return;
}
const currentActiveElement = (0, _activeElement.default)(ownerWindow == null ? void 0 : ownerWindow.document);
if (modal.dialog && currentActiveElement && !(0, _contains.default)(modal.dialog, currentActiveElement)) {
modal.dialog.focus();
}
});
const handleBackdropClick = (0, _useEventCallback.default)(e => {
if (e.target !== e.currentTarget) {
return;
}
onBackdropClick == null ? void 0 : onBackdropClick(e);
if (backdrop === true) {
onHide();
}
});
const handleDocumentKeyDown = (0, _useEventCallback.default)(e => {
if (keyboard && (0, _utils.isEscKey)(e) && modal.isTopModal()) {
onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
if (!e.defaultPrevented) {
onHide();
}
}
});
const removeFocusListenerRef = (0, _react.useRef)();
const removeKeydownListenerRef = (0, _react.useRef)();
const handleHidden = (...args) => {
setExited(true);
onExited == null ? void 0 : onExited(...args);
};
if (!container) {
return null;
}
const dialogProps = Object.assign({
role,
ref: modal.setDialogRef,
// apparently only works on the dialog role element
'aria-modal': role === 'dialog' ? true : undefined
}, rest, {
style,
className,
tabIndex: -1
});
let dialog = renderDialog ? renderDialog(dialogProps) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", Object.assign({}, dialogProps, {
children: /*#__PURE__*/React.cloneElement(children, {
role: 'document'
})
}));
dialog = (0, _ImperativeTransition.renderTransition)(transition, runTransition, {
unmountOnExit: true,
mountOnEnter: true,
appear: true,
in: !!show,
onExit,
onExiting,
onExited: handleHidden,
onEnter,
onEntering,
onEntered,
children: dialog
});
let backdropElement = null;
if (backdrop) {
backdropElement = renderBackdrop({
ref: modal.setBackdropRef,
onClick: handleBackdropClick
});
backdropElement = (0, _ImperativeTransition.renderTransition)(backdropTransition, runBackdropTransition, {
in: !!show,
appear: true,
mountOnEnter: true,
unmountOnExit: true,
children: backdropElement
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [backdropElement, dialog]
}), container)
});
});
Modal.displayName = 'Modal';
var _default = exports.default = Object.assign(Modal, {
Manager: _ModalManager.default
});

View File

@@ -0,0 +1,38 @@
export interface ModalInstance {
dialog: Element;
backdrop: Element;
}
export interface ModalManagerOptions {
ownerDocument?: Document;
handleContainerOverflow?: boolean;
isRTL?: boolean;
}
export type ContainerState = {
scrollBarWidth: number;
style: Record<string, any>;
[key: string]: any;
};
export declare const OPEN_DATA_ATTRIBUTE: "data-rr-ui-modal-open";
/**
* Manages a stack of Modals as well as ensuring
* body scrolling is is disabled and padding accounted for
*/
declare class ModalManager {
readonly handleContainerOverflow: boolean;
readonly isRTL: boolean;
readonly modals: ModalInstance[];
protected state: ContainerState;
protected ownerDocument: Document | undefined;
constructor({ ownerDocument, handleContainerOverflow, isRTL, }?: ModalManagerOptions);
getScrollbarWidth(): number;
getElement(): HTMLElement;
setModalAttributes(_modal: ModalInstance): void;
removeModalAttributes(_modal: ModalInstance): void;
setContainerStyle(containerState: ContainerState): void;
reset(): void;
removeContainerStyle(containerState: ContainerState): void;
add(modal: ModalInstance): number;
remove(modal: ModalInstance): void;
isTopModal(modal: ModalInstance): boolean;
}
export default ModalManager;

View File

@@ -0,0 +1,105 @@
"use strict";
exports.__esModule = true;
exports.default = exports.OPEN_DATA_ATTRIBUTE = void 0;
var _css = _interopRequireDefault(require("dom-helpers/css"));
var _DataKey = require("./DataKey");
var _getScrollbarWidth = _interopRequireDefault(require("./getScrollbarWidth"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const OPEN_DATA_ATTRIBUTE = exports.OPEN_DATA_ATTRIBUTE = (0, _DataKey.dataAttr)('modal-open');
/**
* Manages a stack of Modals as well as ensuring
* body scrolling is is disabled and padding accounted for
*/
class ModalManager {
constructor({
ownerDocument,
handleContainerOverflow = true,
isRTL = false
} = {}) {
this.handleContainerOverflow = handleContainerOverflow;
this.isRTL = isRTL;
this.modals = [];
this.ownerDocument = ownerDocument;
}
getScrollbarWidth() {
return (0, _getScrollbarWidth.default)(this.ownerDocument);
}
getElement() {
return (this.ownerDocument || document).body;
}
setModalAttributes(_modal) {
// For overriding
}
removeModalAttributes(_modal) {
// For overriding
}
setContainerStyle(containerState) {
const style = {
overflow: 'hidden'
};
// we are only interested in the actual `style` here
// because we will override it
const paddingProp = this.isRTL ? 'paddingLeft' : 'paddingRight';
const container = this.getElement();
containerState.style = {
overflow: container.style.overflow,
[paddingProp]: container.style[paddingProp]
};
if (containerState.scrollBarWidth) {
// use computed style, here to get the real padding
// to add our scrollbar width
style[paddingProp] = `${parseInt((0, _css.default)(container, paddingProp) || '0', 10) + containerState.scrollBarWidth}px`;
}
container.setAttribute(OPEN_DATA_ATTRIBUTE, '');
(0, _css.default)(container, style);
}
reset() {
[...this.modals].forEach(m => this.remove(m));
}
removeContainerStyle(containerState) {
const container = this.getElement();
container.removeAttribute(OPEN_DATA_ATTRIBUTE);
Object.assign(container.style, containerState.style);
}
add(modal) {
let modalIdx = this.modals.indexOf(modal);
if (modalIdx !== -1) {
return modalIdx;
}
modalIdx = this.modals.length;
this.modals.push(modal);
this.setModalAttributes(modal);
if (modalIdx !== 0) {
return modalIdx;
}
this.state = {
scrollBarWidth: this.getScrollbarWidth(),
style: {}
};
if (this.handleContainerOverflow) {
this.setContainerStyle(this.state);
}
return modalIdx;
}
remove(modal) {
const modalIdx = this.modals.indexOf(modal);
if (modalIdx === -1) {
return;
}
this.modals.splice(modalIdx, 1);
// if that was the last modal in a container,
// clean up the container
if (!this.modals.length && this.handleContainerOverflow) {
this.removeContainerStyle(this.state);
}
this.removeModalAttributes(modal);
}
isTopModal(modal) {
return !!this.modals.length && this.modals[this.modals.length - 1] === modal;
}
}
var _default = exports.default = ModalManager;

View File

@@ -0,0 +1,22 @@
import * as React from 'react';
import { EventKey, DynamicRefForwardingComponent, SelectCallback } from './types';
import { UseNavItemOptions, NavItemProps } from './NavItem';
export type { UseNavItemOptions, NavItemProps };
export interface NavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
/**
* Key for the currently active NavItem.
*/
activeKey?: EventKey;
/**
* Element used to render the component.
*/
as?: React.ElementType;
/**
* A callback fired when a NavItem has been selected.
*/
onSelect?: SelectCallback;
}
declare const _default: DynamicRefForwardingComponent<"div", NavProps> & {
Item: DynamicRefForwardingComponent<React.ForwardRefExoticComponent<import("./Button").ButtonProps & React.RefAttributes<HTMLElement>>, NavItemProps>;
};
export default _default;

View File

@@ -0,0 +1,120 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _querySelectorAll = _interopRequireDefault(require("dom-helpers/querySelectorAll"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _useForceUpdate = _interopRequireDefault(require("@restart/hooks/useForceUpdate"));
var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
var _NavContext = _interopRequireDefault(require("./NavContext"));
var _SelectableContext = _interopRequireWildcard(require("./SelectableContext"));
var _TabContext = _interopRequireDefault(require("./TabContext"));
var _DataKey = require("./DataKey");
var _NavItem = _interopRequireDefault(require("./NavItem"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["as", "onSelect", "activeKey", "role", "onKeyDown"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => {};
const EVENT_KEY_ATTR = (0, _DataKey.dataAttr)('event-key');
const Nav = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
as: Component = 'div',
onSelect,
activeKey,
role,
onKeyDown
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
// A ref and forceUpdate for refocus, b/c we only want to trigger when needed
// and don't want to reset the set in the effect
const forceUpdate = (0, _useForceUpdate.default)();
const needsRefocusRef = (0, _react.useRef)(false);
const parentOnSelect = (0, _react.useContext)(_SelectableContext.default);
const tabContext = (0, _react.useContext)(_TabContext.default);
let getControlledId, getControllerId;
if (tabContext) {
role = role || 'tablist';
activeKey = tabContext.activeKey;
// TODO: do we need to duplicate these?
getControlledId = tabContext.getControlledId;
getControllerId = tabContext.getControllerId;
}
const listNode = (0, _react.useRef)(null);
const getNextActiveTab = offset => {
const currentListNode = listNode.current;
if (!currentListNode) return null;
const items = (0, _querySelectorAll.default)(currentListNode, `[${EVENT_KEY_ATTR}]:not([aria-disabled=true])`);
const activeChild = currentListNode.querySelector('[aria-selected=true]');
if (!activeChild || activeChild !== document.activeElement) return null;
const index = items.indexOf(activeChild);
if (index === -1) return null;
let nextIndex = index + offset;
if (nextIndex >= items.length) nextIndex = 0;
if (nextIndex < 0) nextIndex = items.length - 1;
return items[nextIndex];
};
const handleSelect = (key, event) => {
if (key == null) return;
onSelect == null ? void 0 : onSelect(key, event);
parentOnSelect == null ? void 0 : parentOnSelect(key, event);
};
const handleKeyDown = event => {
onKeyDown == null ? void 0 : onKeyDown(event);
if (!tabContext) {
return;
}
let nextActiveChild;
switch (event.key) {
case 'ArrowLeft':
case 'ArrowUp':
nextActiveChild = getNextActiveTab(-1);
break;
case 'ArrowRight':
case 'ArrowDown':
nextActiveChild = getNextActiveTab(1);
break;
default:
return;
}
if (!nextActiveChild) return;
event.preventDefault();
handleSelect(nextActiveChild.dataset[(0, _DataKey.dataProp)('EventKey')] || null, event);
needsRefocusRef.current = true;
forceUpdate();
};
(0, _react.useEffect)(() => {
if (listNode.current && needsRefocusRef.current) {
const activeChild = listNode.current.querySelector(`[${EVENT_KEY_ATTR}][aria-selected=true]`);
activeChild == null ? void 0 : activeChild.focus();
}
needsRefocusRef.current = false;
});
const mergedRef = (0, _useMergedRefs.default)(ref, listNode);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableContext.default.Provider, {
value: handleSelect,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NavContext.default.Provider, {
value: {
role,
// used by NavLink to determine it's role
activeKey: (0, _SelectableContext.makeEventKey)(activeKey),
getControlledId: getControlledId || noop,
getControllerId: getControllerId || noop
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, Object.assign({}, props, {
onKeyDown: handleKeyDown,
ref: mergedRef,
role: role
}))
})
});
});
Nav.displayName = 'Nav';
var _default = exports.default = Object.assign(Nav, {
Item: _NavItem.default
});

View File

@@ -0,0 +1,10 @@
import * as React from 'react';
import { EventKey } from './types';
interface NavContextType {
role?: string;
activeKey: EventKey | null;
getControlledId: (key: EventKey | null) => string;
getControllerId: (key: EventKey | null) => string;
}
declare const NavContext: React.Context<NavContextType | null>;
export default NavContext;

View File

@@ -0,0 +1,10 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const NavContext = /*#__PURE__*/React.createContext(null);
NavContext.displayName = 'NavContext';
var _default = exports.default = NavContext;

View File

@@ -0,0 +1,38 @@
import * as React from 'react';
import { EventKey, DynamicRefForwardingComponent } from './types';
import Button from './Button';
export interface NavItemProps extends React.HTMLAttributes<HTMLElement> {
/**
* Highlight the NavItem as active.
*/
active?: boolean;
/**
* Element used to render the component.
*/
as?: React.ElementType;
/**
* Disable the NavItem, making it unselectable.
*/
disabled?: boolean;
/**
* Value passed to the `onSelect` handler, useful for identifying the selected NavItem.
*/
eventKey?: EventKey;
/**
* HTML `href` attribute corresponding to `a.href`.
*/
href?: string;
}
export interface UseNavItemOptions {
key?: string | null;
onClick?: React.MouseEventHandler;
active?: boolean;
disabled?: boolean;
id?: string;
role?: string;
}
export declare function useNavItem({ key, onClick, active, id, role, disabled, }: UseNavItemOptions): readonly [any, {
readonly isActive: boolean | undefined;
}];
declare const NavItem: DynamicRefForwardingComponent<typeof Button, NavItemProps>;
export default NavItem;

View File

@@ -0,0 +1,99 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
exports.useNavItem = useNavItem;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _NavContext = _interopRequireDefault(require("./NavContext"));
var _SelectableContext = _interopRequireWildcard(require("./SelectableContext"));
var _Button = _interopRequireDefault(require("./Button"));
var _DataKey = require("./DataKey");
var _TabContext = _interopRequireDefault(require("./TabContext"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["as", "active", "eventKey"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function useNavItem({
key,
onClick,
active,
id,
role,
disabled
}) {
const parentOnSelect = (0, _react.useContext)(_SelectableContext.default);
const navContext = (0, _react.useContext)(_NavContext.default);
const tabContext = (0, _react.useContext)(_TabContext.default);
let isActive = active;
const props = {
role
};
if (navContext) {
if (!role && navContext.role === 'tablist') props.role = 'tab';
const contextControllerId = navContext.getControllerId(key != null ? key : null);
const contextControlledId = navContext.getControlledId(key != null ? key : null);
// @ts-ignore
props[(0, _DataKey.dataAttr)('event-key')] = key;
props.id = contextControllerId || id;
isActive = active == null && key != null ? navContext.activeKey === key : active;
/**
* Simplified scenario for `mountOnEnter`.
*
* While it would make sense to keep 'aria-controls' for tabs that have been mounted at least
* once, it would also complicate the code quite a bit, for very little gain.
* The following implementation is probably good enough.
*
* @see https://github.com/react-restart/ui/pull/40#issuecomment-1009971561
*/
if (isActive || !(tabContext != null && tabContext.unmountOnExit) && !(tabContext != null && tabContext.mountOnEnter)) props['aria-controls'] = contextControlledId;
}
if (props.role === 'tab') {
props['aria-selected'] = isActive;
if (!isActive) {
props.tabIndex = -1;
}
if (disabled) {
props.tabIndex = -1;
props['aria-disabled'] = true;
}
}
props.onClick = (0, _useEventCallback.default)(e => {
if (disabled) return;
onClick == null ? void 0 : onClick(e);
if (key == null) {
return;
}
if (parentOnSelect && !e.isPropagationStopped()) {
parentOnSelect(key, e);
}
});
return [props, {
isActive
}];
}
const NavItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
as: Component = _Button.default,
active,
eventKey
} = _ref,
options = _objectWithoutPropertiesLoose(_ref, _excluded);
const [props, meta] = useNavItem(Object.assign({
key: (0, _SelectableContext.makeEventKey)(eventKey, options.href),
active
}, options));
// @ts-ignore
props[(0, _DataKey.dataAttr)('active')] = meta.isActive;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, Object.assign({}, options, props, {
ref: ref
}));
});
NavItem.displayName = 'NavItem';
var _default = exports.default = NavItem;

View File

@@ -0,0 +1,4 @@
/// <reference types="react" />
import { TransitionProps } from './types';
declare function NoopTransition({ children, in: inProp, onExited, mountOnEnter, unmountOnExit, }: TransitionProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
export default NoopTransition;

View File

@@ -0,0 +1,38 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
var _react = require("react");
var _utils = require("./utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function NoopTransition({
children,
in: inProp,
onExited,
mountOnEnter,
unmountOnExit
}) {
const ref = (0, _react.useRef)(null);
const hasEnteredRef = (0, _react.useRef)(inProp);
const handleExited = (0, _useEventCallback.default)(onExited);
(0, _react.useEffect)(() => {
if (inProp) hasEnteredRef.current = true;else {
handleExited(ref.current);
}
}, [inProp, handleExited]);
const combinedRef = (0, _useMergedRefs.default)(ref, (0, _utils.getChildRef)(children));
const child = /*#__PURE__*/(0, _react.cloneElement)(children, {
ref: combinedRef
});
if (inProp) return child;
if (unmountOnExit) {
return null;
}
if (!hasEnteredRef.current && mountOnEnter) {
return null;
}
return child;
}
var _default = exports.default = NoopTransition;

View File

@@ -0,0 +1,99 @@
import * as React from 'react';
import { Offset, Placement, UsePopperOptions, UsePopperState, VirtualElement } from './usePopper';
import { RootCloseOptions } from './useRootClose';
import { DOMContainer } from './useWaitForDOMRef';
import { TransitionCallbacks, TransitionComponent } from './types';
import { TransitionHandler } from './ImperativeTransition';
export interface OverlayArrowProps extends Record<string, any> {
ref: React.RefCallback<HTMLElement>;
style: React.CSSProperties;
}
export interface OverlayMetadata {
show: boolean;
placement: Placement | undefined;
popper: UsePopperState | null;
arrowProps: Partial<OverlayArrowProps>;
}
export interface OverlayInjectedProps extends Record<string, any> {
ref: React.RefCallback<HTMLElement>;
style: React.CSSProperties;
'aria-labelledby'?: string;
}
export interface OverlayProps extends TransitionCallbacks {
/**
* Enables the Popper.js `flip` modifier, allowing the Overlay to
* automatically adjust it's placement in case of overlap with the viewport or toggle.
* Refer to the [flip docs](https://popper.js.org/popper-documentation.html#modifiers..flip.enabled) for more info
*/
flip?: boolean;
/** Specify where the overlay element is positioned in relation to the target element */
placement?: Placement;
/**
* Control offset of the overlay to the reference element.
* A convenience shortcut to setting `popperConfig.modfiers.offset`
*/
offset?: Offset;
/**
* Control how much space there is between the edge of the boundary element and overlay.
* A convenience shortcut to setting `popperConfig.modfiers.preventOverflow.padding`
*/
containerPadding?: number;
/**
* A set of popper options and props passed directly to react-popper's Popper component.
*/
popperConfig?: Omit<UsePopperOptions, 'placement'>;
/**
* A DOM Element, [Virtual Element](https://popper.js.org/docs/v2/virtual-elements/), Ref to an element, or
* function that returns either. The `target` element is where the overlay is positioned relative to.
*/
container?: DOMContainer;
/**
* A DOM Element, Ref to an element, or function that returns either. The `target` element is where
* the overlay is positioned relative to.
*/
target: DOMContainer<HTMLElement | VirtualElement>;
/**
* Set the visibility of the Overlay
*/
show?: boolean;
/**
* A `react-transition-group` `<Transition/>` component
* used to animate the overlay as it changes visibility.
*/
transition?: TransitionComponent;
/**
* A transition handler, called with the `show` state and overlay element.
* Should return a promise when the transition is complete
*/
runTransition?: TransitionHandler;
/**
* A Callback fired by the Overlay when it wishes to be hidden.
*
* __required__ when `rootClose` is `true`.
*
* @type func
*/
onHide?: (e: Event) => void;
/**
* Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay
*/
rootClose?: boolean;
/**
* Specify disabled for disable RootCloseWrapper
*/
rootCloseDisabled?: boolean;
/**
* Specify event for toggling overlay
*/
rootCloseEvent?: RootCloseOptions['clickTrigger'];
/**
* A render prop that returns an overlay element.
*/
children: (props: OverlayInjectedProps, meta: OverlayMetadata) => React.ReactNode;
}
/**
* Built on top of `Popper.js`, the overlay component is
* great for custom tooltip overlays.
*/
declare const Overlay: React.ForwardRefExoticComponent<OverlayProps & React.RefAttributes<HTMLElement>>;
export default Overlay;

View File

@@ -0,0 +1,104 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _reactDom = _interopRequireDefault(require("react-dom"));
var _useCallbackRef = _interopRequireDefault(require("@restart/hooks/useCallbackRef"));
var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
var _usePopper = _interopRequireDefault(require("./usePopper"));
var _useRootClose = _interopRequireDefault(require("./useRootClose"));
var _useWaitForDOMRef = _interopRequireDefault(require("./useWaitForDOMRef"));
var _mergeOptionsWithPopperConfig = _interopRequireDefault(require("./mergeOptionsWithPopperConfig"));
var _ImperativeTransition = require("./ImperativeTransition");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* Built on top of `Popper.js`, the overlay component is
* great for custom tooltip overlays.
*/
const Overlay = /*#__PURE__*/React.forwardRef((props, outerRef) => {
const {
flip,
offset,
placement,
containerPadding,
popperConfig = {},
transition: Transition,
runTransition
} = props;
const [rootElement, attachRef] = (0, _useCallbackRef.default)();
const [arrowElement, attachArrowRef] = (0, _useCallbackRef.default)();
const mergedRef = (0, _useMergedRefs.default)(attachRef, outerRef);
const container = (0, _useWaitForDOMRef.default)(props.container);
const target = (0, _useWaitForDOMRef.default)(props.target);
const [exited, setExited] = (0, _react.useState)(!props.show);
const popper = (0, _usePopper.default)(target, rootElement, (0, _mergeOptionsWithPopperConfig.default)({
placement,
enableEvents: !!props.show,
containerPadding: containerPadding || 5,
flip,
offset,
arrowElement,
popperConfig
}));
// TODO: I think this needs to be in an effect
if (props.show && exited) {
setExited(false);
}
const handleHidden = (...args) => {
setExited(true);
if (props.onExited) {
props.onExited(...args);
}
};
// Don't un-render the overlay while it's transitioning out.
const mountOverlay = props.show || !exited;
(0, _useRootClose.default)(rootElement, props.onHide, {
disabled: !props.rootClose || props.rootCloseDisabled,
clickTrigger: props.rootCloseEvent
});
if (!mountOverlay) {
// Don't bother showing anything if we don't have to.
return null;
}
const {
onExit,
onExiting,
onEnter,
onEntering,
onEntered
} = props;
let child = props.children(Object.assign({}, popper.attributes.popper, {
style: popper.styles.popper,
ref: mergedRef
}), {
popper,
placement,
show: !!props.show,
arrowProps: Object.assign({}, popper.attributes.arrow, {
style: popper.styles.arrow,
ref: attachArrowRef
})
});
child = (0, _ImperativeTransition.renderTransition)(Transition, runTransition, {
in: !!props.show,
appear: true,
mountOnEnter: true,
unmountOnExit: true,
children: child,
onExit,
onExiting,
onExited: handleHidden,
onEnter,
onEntering,
onEntered
});
return container ? /*#__PURE__*/_reactDom.default.createPortal(child, container) : null;
});
Overlay.displayName = 'Overlay';
var _default = exports.default = Overlay;

View File

@@ -0,0 +1,22 @@
import * as React from 'react';
import { DOMContainer } from './useWaitForDOMRef';
export interface PortalProps {
children: React.ReactElement;
/**
* A DOM element, Ref to an element, or function that returns either. The `container` will have the Portal children
* appended to it.
*/
container: DOMContainer;
/**
* Callback that is triggered when the portal content is rendered.
*/
onRendered?: (element: any) => void;
}
/**
* @public
*/
declare const Portal: {
({ container, children, onRendered }: PortalProps): React.JSX.Element | null;
displayName: string;
};
export default Portal;

View File

@@ -0,0 +1,26 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _reactDom = _interopRequireDefault(require("react-dom"));
var React = _interopRequireWildcard(require("react"));
var _useWaitForDOMRef = _interopRequireDefault(require("./useWaitForDOMRef"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* @public
*/
const Portal = ({
container,
children,
onRendered
}) => {
const resolvedContainer = (0, _useWaitForDOMRef.default)(container, onRendered);
return resolvedContainer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/_reactDom.default.createPortal(children, resolvedContainer)
}) : null;
};
Portal.displayName = 'Portal';
var _default = exports.default = Portal;

View File

@@ -0,0 +1,15 @@
import * as React from 'react';
import { TransitionProps } from './useRTGTransitionProps';
export type RTGTransitionProps = TransitionProps & {
component: React.ElementType;
};
declare const RTGTransition: React.ForwardRefExoticComponent<(Omit<import("react-transition-group/Transition").TimeoutProps<undefined> & {
children: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((status: import("react-transition-group").TransitionStatus, props: Record<string, unknown>) => React.ReactNode);
} & {
component: React.ElementType;
}, "ref"> | Omit<import("react-transition-group/Transition").EndListenerProps<undefined> & {
children: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ((status: import("react-transition-group").TransitionStatus, props: Record<string, unknown>) => React.ReactNode);
} & {
component: React.ElementType;
}, "ref">) & React.RefAttributes<any>>;
export default RTGTransition;

View File

@@ -0,0 +1,24 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _useRTGTransitionProps = _interopRequireDefault(require("./useRTGTransitionProps"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["component"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
// Normalizes Transition callbacks when nodeRef is used.
const RTGTransition = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
component: Component
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
const transitionProps = (0, _useRTGTransitionProps.default)(props);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, Object.assign({
ref: ref
}, transitionProps));
});
var _default = exports.default = RTGTransition;

View File

@@ -0,0 +1,5 @@
import * as React from 'react';
import { EventKey, SelectCallback } from './types';
declare const SelectableContext: React.Context<SelectCallback | null>;
export declare const makeEventKey: (eventKey?: EventKey | null, href?: string | null) => string | null;
export default SelectableContext;

View File

@@ -0,0 +1,14 @@
"use strict";
exports.__esModule = true;
exports.makeEventKey = exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const SelectableContext = /*#__PURE__*/React.createContext(null);
const makeEventKey = (eventKey, href = null) => {
if (eventKey != null) return String(eventKey);
return href || null;
};
exports.makeEventKey = makeEventKey;
var _default = exports.default = SelectableContext;

View File

@@ -0,0 +1,13 @@
import * as React from 'react';
import { EventKey, SelectCallback, TransitionComponent } from './types';
export interface TabContextType {
onSelect: SelectCallback;
activeKey?: EventKey;
transition?: TransitionComponent;
mountOnEnter: boolean;
unmountOnExit: boolean;
getControlledId: (key: EventKey) => any;
getControllerId: (key: EventKey) => any;
}
declare const TabContext: React.Context<TabContextType | null>;
export default TabContext;

View File

@@ -0,0 +1,9 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const TabContext = /*#__PURE__*/React.createContext(null);
var _default = exports.default = TabContext;

View File

@@ -0,0 +1,39 @@
import * as React from 'react';
import { EventKey, DynamicRefForwardingComponent, TransitionCallbacks, TransitionComponent } from './types';
export interface TabPanelProps extends TransitionCallbacks, React.HTMLAttributes<HTMLElement> {
/**
* Element used to render the component.
*/
as?: React.ElementType;
/**
* A key that associates the `TabPanel` with it's controlling `NavLink`.
*/
eventKey?: EventKey;
/**
* Toggles the active state of the TabPanel, this is generally controlled by `Tabs`.
*/
active?: boolean;
/**
* Use animation when showing or hiding `<TabPanel>`s. Use a react-transition-group
* `<Transition/>` component.
*/
transition?: TransitionComponent;
/**
* Wait until the first "enter" transition to mount the tab (add it to the DOM)
*/
mountOnEnter?: boolean;
/**
* Unmount the tab (remove it from the DOM) when it is no longer visible
*/
unmountOnExit?: boolean;
}
export interface TabPanelMetadata extends TransitionCallbacks {
eventKey?: EventKey;
isActive?: boolean;
transition?: TransitionComponent;
mountOnEnter?: boolean;
unmountOnExit?: boolean;
}
export declare function useTabPanel({ active, eventKey, mountOnEnter, transition, unmountOnExit, role, onEnter, onEntering, onEntered, onExit, onExiting, onExited, ...props }: TabPanelProps): [any, TabPanelMetadata];
declare const TabPanel: DynamicRefForwardingComponent<'div', TabPanelProps>;
export default TabPanel;

View File

@@ -0,0 +1,121 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
exports.useTabPanel = useTabPanel;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _TabContext = _interopRequireDefault(require("./TabContext"));
var _SelectableContext = _interopRequireWildcard(require("./SelectableContext"));
var _NoopTransition = _interopRequireDefault(require("./NoopTransition"));
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["active", "eventKey", "mountOnEnter", "transition", "unmountOnExit", "role", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited"],
_excluded2 = ["activeKey", "getControlledId", "getControllerId"],
_excluded3 = ["as"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
function useTabPanel(_ref) {
let {
active,
eventKey,
mountOnEnter,
transition,
unmountOnExit,
role = 'tabpanel',
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
const context = (0, _react.useContext)(_TabContext.default);
if (!context) return [Object.assign({}, props, {
role
}), {
eventKey,
isActive: active,
mountOnEnter,
transition,
unmountOnExit,
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited
}];
const {
activeKey,
getControlledId,
getControllerId
} = context,
rest = _objectWithoutPropertiesLoose(context, _excluded2);
const key = (0, _SelectableContext.makeEventKey)(eventKey);
return [Object.assign({}, props, {
role,
id: getControlledId(eventKey),
'aria-labelledby': getControllerId(eventKey)
}), {
eventKey,
isActive: active == null && key != null ? (0, _SelectableContext.makeEventKey)(activeKey) === key : active,
transition: transition || rest.transition,
mountOnEnter: mountOnEnter != null ? mountOnEnter : rest.mountOnEnter,
unmountOnExit: unmountOnExit != null ? unmountOnExit : rest.unmountOnExit,
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited
}];
}
const TabPanel = /*#__PURE__*/React.forwardRef(
// Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
(_ref2, ref) => {
let {
as: Component = 'div'
} = _ref2,
props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
const [tabPanelProps, {
isActive,
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited,
mountOnEnter,
unmountOnExit,
transition: Transition = _NoopTransition.default
}] = useTabPanel(props);
// We provide an empty the TabContext so `<Nav>`s in `<TabPanel>`s don't
// conflict with the top level one.
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabContext.default.Provider, {
value: null,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableContext.default.Provider, {
value: null,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, {
in: isActive,
onEnter: onEnter,
onEntering: onEntering,
onEntered: onEntered,
onExit: onExit,
onExiting: onExiting,
onExited: onExited,
mountOnEnter: mountOnEnter,
unmountOnExit: unmountOnExit,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, Object.assign({}, tabPanelProps, {
ref: ref,
hidden: !isActive,
"aria-hidden": !isActive
}))
})
})
});
});
TabPanel.displayName = 'TabPanel';
var _default = exports.default = TabPanel;

View File

@@ -0,0 +1,53 @@
import * as React from 'react';
import { EventKey, SelectCallback, TransitionComponent } from './types';
import { TabPanelProps } from './TabPanel';
export type { TabPanelProps };
export interface TabsProps extends React.PropsWithChildren<unknown> {
id?: string;
/**
* Sets a default animation strategy for all children `<TabPanel>`s.
* Use a react-transition-group `<Transition/>` component.
*/
transition?: TransitionComponent;
/**
* Wait until the first "enter" transition to mount tabs (add them to the DOM)
*/
mountOnEnter?: boolean;
/**
* Unmount tabs (remove it from the DOM) when they are no longer visible
*/
unmountOnExit?: boolean;
/**
* A function that takes an `eventKey` and `type` and returns a unique id for
* child tab `<NavItem>`s and `<TabPane>`s. The function _must_ be a pure
* function, meaning it should always return the _same_ id for the same set
* of inputs. The default value requires that an `id` to be set for the
* `<TabContainer>`.
*
* The `type` argument will either be `"tab"` or `"pane"`.
*
* @defaultValue (eventKey, type) => `${props.id}-${type}-${eventKey}`
*/
generateChildId?: (eventKey: EventKey, type: 'tab' | 'pane') => string;
/**
* A callback fired when a tab is selected.
*
* @controllable activeKey
*/
onSelect?: SelectCallback;
/**
* The `eventKey` of the currently active tab.
*
* @controllable onSelect
*/
activeKey?: EventKey;
/**
* Default value for `eventKey`.
*/
defaultActiveKey?: EventKey;
}
declare const Tabs: {
(props: TabsProps): React.JSX.Element;
Panel: import("./types").DynamicRefForwardingComponent<"div", TabPanelProps>;
};
export default Tabs;

View File

@@ -0,0 +1,49 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _uncontrollable = require("uncontrollable");
var _ssr = require("./ssr");
var _TabContext = _interopRequireDefault(require("./TabContext"));
var _SelectableContext = _interopRequireDefault(require("./SelectableContext"));
var _TabPanel = _interopRequireDefault(require("./TabPanel"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const Tabs = props => {
const {
id: userId,
generateChildId: generateCustomChildId,
onSelect: propsOnSelect,
activeKey: propsActiveKey,
defaultActiveKey,
transition,
mountOnEnter,
unmountOnExit,
children
} = props;
const [activeKey, onSelect] = (0, _uncontrollable.useUncontrolledProp)(propsActiveKey, defaultActiveKey, propsOnSelect);
const id = (0, _ssr.useSSRSafeId)(userId);
const generateChildId = (0, _react.useMemo)(() => generateCustomChildId || ((key, type) => id ? `${id}-${type}-${key}` : null), [id, generateCustomChildId]);
const tabContext = (0, _react.useMemo)(() => ({
onSelect,
activeKey,
transition,
mountOnEnter: mountOnEnter || false,
unmountOnExit: unmountOnExit || false,
getControlledId: key => generateChildId(key, 'tabpane'),
getControllerId: key => generateChildId(key, 'tab')
}), [onSelect, activeKey, transition, mountOnEnter, unmountOnExit, generateChildId]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TabContext.default.Provider, {
value: tabContext,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SelectableContext.default.Provider, {
value: onSelect || null,
children: children
})
});
};
Tabs.Panel = _TabPanel.default;
var _default = exports.default = Tabs;

View File

@@ -0,0 +1,19 @@
import * as React from 'react';
import { WaypointOptions, WaypointEvent, Position } from './useWaypoint';
export { Position };
export type { WaypointEvent };
export interface WaypointProps extends WaypointOptions {
renderComponent?: (ref: React.RefCallback<any>) => React.ReactElement;
/**
* The callback fired when a waypoint's position is updated. This generally
* fires as a waypoint enters or exits the viewport but will also be called
* on mount.
*/
onPositionChange: (details: WaypointEvent, entry: IntersectionObserverEntry) => void;
}
/**
* A component that tracks when it enters or leaves the viewport. Implemented
* using IntersectionObserver, polyfill may be required for older browsers.
*/
declare function Waypoint({ renderComponent, onPositionChange, ...options }: WaypointProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
export default Waypoint;

View File

@@ -0,0 +1,35 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _useCallbackRef = _interopRequireDefault(require("@restart/hooks/useCallbackRef"));
var React = _interopRequireWildcard(require("react"));
var _useWaypoint = _interopRequireWildcard(require("./useWaypoint"));
exports.Position = _useWaypoint.Position;
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["renderComponent", "onPositionChange"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
const defaultRenderComponent = ref => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
ref: ref,
style: {
fontSize: 0
}
});
/**
* A component that tracks when it enters or leaves the viewport. Implemented
* using IntersectionObserver, polyfill may be required for older browsers.
*/
function Waypoint(_ref) {
let {
renderComponent = defaultRenderComponent,
onPositionChange
} = _ref,
options = _objectWithoutPropertiesLoose(_ref, _excluded);
const [element, setElement] = (0, _useCallbackRef.default)();
(0, _useWaypoint.default)(element, onPositionChange, options);
return renderComponent(setElement);
}
var _default = exports.default = Waypoint;

View File

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

View File

@@ -0,0 +1,11 @@
"use strict";
exports.__esModule = true;
exports.default = getBodyScrollbarWidth;
/**
* Get the width of the vertical window scrollbar if it's visible
*/
function getBodyScrollbarWidth(ownerDocument = document) {
const window = ownerDocument.defaultView;
return Math.abs(window.innerWidth - ownerDocument.documentElement.clientWidth);
}

View File

@@ -0,0 +1,21 @@
import Dropdown from './Dropdown';
import { useDropdownMenu } from './DropdownMenu';
import { useDropdownToggle } from './DropdownToggle';
import { useDropdownItem } from './DropdownItem';
import Modal from './Modal';
import Overlay from './Overlay';
import Portal from './Portal';
import useRootClose from './useRootClose';
import Nav from './Nav';
import NavItem, { useNavItem } from './NavItem';
import Button from './Button';
import Tabs from './Tabs';
import TabPanel from './TabPanel';
export { Button, Dropdown, useDropdownMenu, useDropdownToggle, useDropdownItem, Nav, NavItem, useNavItem, Modal, Overlay, Portal, useRootClose, Tabs, TabPanel, };
export type { ButtonProps } from './Button';
export type { DropdownProps, DropdownMenuProps, UseDropdownMenuMetadata, UseDropdownMenuOptions, DropdownToggleProps, UseDropdownToggleMetadata, DropdownItemProps, } from './Dropdown';
export type { NavItemProps, UseNavItemOptions, NavProps } from './Nav';
export type { ModalProps } from './Modal';
export type { OverlayProps } from './Overlay';
export type { PortalProps } from './Portal';
export type { TabsProps, TabPanelProps } from './Tabs';

View File

@@ -0,0 +1,33 @@
"use strict";
exports.__esModule = true;
var _Dropdown = _interopRequireDefault(require("./Dropdown"));
exports.Dropdown = _Dropdown.default;
var _DropdownMenu = require("./DropdownMenu");
exports.useDropdownMenu = _DropdownMenu.useDropdownMenu;
var _DropdownToggle = require("./DropdownToggle");
exports.useDropdownToggle = _DropdownToggle.useDropdownToggle;
var _DropdownItem = require("./DropdownItem");
exports.useDropdownItem = _DropdownItem.useDropdownItem;
var _Modal = _interopRequireDefault(require("./Modal"));
exports.Modal = _Modal.default;
var _Overlay = _interopRequireDefault(require("./Overlay"));
exports.Overlay = _Overlay.default;
var _Portal = _interopRequireDefault(require("./Portal"));
exports.Portal = _Portal.default;
var _useRootClose = _interopRequireDefault(require("./useRootClose"));
exports.useRootClose = _useRootClose.default;
var _Nav = _interopRequireDefault(require("./Nav"));
exports.Nav = _Nav.default;
var _NavItem = _interopRequireWildcard(require("./NavItem"));
exports.NavItem = _NavItem.default;
exports.useNavItem = _NavItem.useNavItem;
var _Button = _interopRequireDefault(require("./Button"));
exports.Button = _Button.default;
var _Tabs = _interopRequireDefault(require("./Tabs"));
exports.Tabs = _Tabs.default;
var _TabPanel = _interopRequireDefault(require("./TabPanel"));
exports.TabPanel = _TabPanel.default;
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

View File

@@ -0,0 +1,16 @@
import { UsePopperOptions, Offset, Placement, Modifiers } from './usePopper';
export type Config = {
flip?: boolean;
fixed?: boolean;
alignEnd?: boolean;
enabled?: boolean;
containerPadding?: number;
arrowElement?: Element | null;
enableEvents?: boolean;
offset?: Offset;
placement?: Placement;
popperConfig?: UsePopperOptions;
};
export declare function toModifierMap(modifiers: Modifiers | undefined): Record<string, Partial<import("./usePopper").Modifier<any, any>>>;
export declare function toModifierArray(map?: Modifiers | undefined): Partial<import("@popperjs/core").Modifier<any, any>>[];
export default function mergeOptionsWithPopperConfig({ enabled, enableEvents, placement, flip, offset, fixed, containerPadding, arrowElement, popperConfig, }: Config): UsePopperOptions;

View File

@@ -0,0 +1,69 @@
"use strict";
exports.__esModule = true;
exports.default = mergeOptionsWithPopperConfig;
exports.toModifierArray = toModifierArray;
exports.toModifierMap = toModifierMap;
function toModifierMap(modifiers) {
const result = {};
if (!Array.isArray(modifiers)) {
return modifiers || result;
}
// eslint-disable-next-line no-unused-expressions
modifiers == null ? void 0 : modifiers.forEach(m => {
result[m.name] = m;
});
return result;
}
function toModifierArray(map = {}) {
if (Array.isArray(map)) return map;
return Object.keys(map).map(k => {
map[k].name = k;
return map[k];
});
}
function mergeOptionsWithPopperConfig({
enabled,
enableEvents,
placement,
flip,
offset,
fixed,
containerPadding,
arrowElement,
popperConfig = {}
}) {
var _modifiers$eventListe, _modifiers$preventOve, _modifiers$preventOve2, _modifiers$offset, _modifiers$arrow;
const modifiers = toModifierMap(popperConfig.modifiers);
return Object.assign({}, popperConfig, {
placement,
enabled,
strategy: fixed ? 'fixed' : popperConfig.strategy,
modifiers: toModifierArray(Object.assign({}, modifiers, {
eventListeners: {
enabled: enableEvents,
options: (_modifiers$eventListe = modifiers.eventListeners) == null ? void 0 : _modifiers$eventListe.options
},
preventOverflow: Object.assign({}, modifiers.preventOverflow, {
options: containerPadding ? Object.assign({
padding: containerPadding
}, (_modifiers$preventOve = modifiers.preventOverflow) == null ? void 0 : _modifiers$preventOve.options) : (_modifiers$preventOve2 = modifiers.preventOverflow) == null ? void 0 : _modifiers$preventOve2.options
}),
offset: {
options: Object.assign({
offset
}, (_modifiers$offset = modifiers.offset) == null ? void 0 : _modifiers$offset.options)
},
arrow: Object.assign({}, modifiers.arrow, {
enabled: !!arrowElement,
options: Object.assign({}, (_modifiers$arrow = modifiers.arrow) == null ? void 0 : _modifiers$arrow.options, {
element: arrowElement
})
}),
flip: Object.assign({
enabled: !!flip
}, modifiers.flip)
}))
});
}

View File

@@ -0,0 +1,3 @@
import { placements } from '@popperjs/core/lib/enums';
export declare const createPopper: <TModifier extends Partial<import("@popperjs/core/lib/types").Modifier<any, any>>>(reference: Element | import("@popperjs/core/lib/types").VirtualElement, popper: HTMLElement, options?: Partial<import("@popperjs/core/lib/types").OptionsGeneric<TModifier>> | undefined) => import("@popperjs/core/lib/types").Instance;
export { placements };

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,3 @@
import { useSSRSafeId, useIsSSR, SSRProvider, SSRProviderProps } from '@react-aria/ssr';
export type { SSRProviderProps };
export { useSSRSafeId, useIsSSR, SSRProvider };

View File

@@ -0,0 +1,7 @@
"use strict";
exports.__esModule = true;
var _ssr = require("@react-aria/ssr");
exports.useSSRSafeId = _ssr.useSSRSafeId;
exports.useIsSSR = _ssr.useIsSSR;
exports.SSRProvider = _ssr.SSRProvider;

View File

@@ -0,0 +1,70 @@
import * as React from 'react';
export type EventKey = string | number;
export type IntrinsicElementTypes = keyof React.JSX.IntrinsicElements;
export 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 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;
propTypes?: any;
contextTypes?: any;
defaultProps?: Partial<P>;
displayName?: string;
}
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 type DynamicComponentClass<As extends string | React.ComponentType<any>, P = unknown> = React.ComponentClass<AssignPropsWithRef<As, {
as?: As;
} & P>>;
export type SelectCallback = (eventKey: string | null, e: React.SyntheticEvent<unknown>) => void;
export interface TransitionCallbacks {
/**
* Callback fired before the component transitions in
*/
onEnter?(node: HTMLElement, isAppearing: boolean): any;
/**
* Callback fired as the component begins to transition in
*/
onEntering?(node: HTMLElement, isAppearing: boolean): any;
/**
* Callback fired after the component finishes transitioning in
*/
onEntered?(node: HTMLElement, isAppearing: boolean): any;
/**
* Callback fired right before the component transitions out
*/
onExit?(node: HTMLElement): any;
/**
* Callback fired as the component begins to transition out
*/
onExiting?(node: HTMLElement): any;
/**
* Callback fired after the component finishes transitioning out
*/
onExited?(node: HTMLElement): any;
}
export interface TransitionProps extends TransitionCallbacks {
in?: boolean;
appear?: boolean;
children: React.ReactElement;
mountOnEnter?: boolean;
unmountOnExit?: boolean;
}
export type TransitionComponent = React.ComponentType<TransitionProps>;

View File

@@ -0,0 +1,11 @@
"use strict";
exports.__esModule = true;
exports.DynamicComponent = void 0;
var React = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
class DynamicComponent extends React.Component {}
// Need to use this instead of typeof Component to get proper type checking.
exports.DynamicComponent = DynamicComponent;

View File

@@ -0,0 +1,21 @@
/// <reference types="react" />
export type MouseEvents = {
[K in keyof GlobalEventHandlersEventMap]: GlobalEventHandlersEventMap[K] extends MouseEvent ? K : never;
}[keyof GlobalEventHandlersEventMap];
export declare const getRefTarget: (ref: React.RefObject<Element> | Element | null | undefined) => Element | null | undefined;
export interface ClickOutsideOptions {
disabled?: boolean;
clickTrigger?: MouseEvents;
}
/**
* The `useClickOutside` hook registers your callback on the document that fires
* when a pointer event is registered outside of the provided ref or element.
*
* @param {Ref<HTMLElement>| HTMLElement} ref The element boundary
* @param {function} onClickOutside
* @param {object=} options
* @param {boolean=} options.disabled
* @param {string=} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
*/
declare function useClickOutside(ref: React.RefObject<Element> | Element | null | undefined, onClickOutside?: (e: Event) => void, { disabled, clickTrigger }?: ClickOutsideOptions): void;
export default useClickOutside;

View File

@@ -0,0 +1,105 @@
"use strict";
exports.__esModule = true;
exports.getRefTarget = exports.default = void 0;
var _contains = _interopRequireDefault(require("dom-helpers/contains"));
var _listen = _interopRequireDefault(require("dom-helpers/listen"));
var _ownerDocument = _interopRequireDefault(require("dom-helpers/ownerDocument"));
var _react = require("react");
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _warning = _interopRequireDefault(require("warning"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const noop = () => {};
function isLeftClickEvent(event) {
return event.button === 0;
}
function isModifiedEvent(event) {
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
}
const getRefTarget = ref => ref && ('current' in ref ? ref.current : ref);
exports.getRefTarget = getRefTarget;
const InitialTriggerEvents = {
click: 'mousedown',
mouseup: 'mousedown',
pointerup: 'pointerdown'
};
/**
* The `useClickOutside` hook registers your callback on the document that fires
* when a pointer event is registered outside of the provided ref or element.
*
* @param {Ref<HTMLElement>| HTMLElement} ref The element boundary
* @param {function} onClickOutside
* @param {object=} options
* @param {boolean=} options.disabled
* @param {string=} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
*/
function useClickOutside(ref, onClickOutside = noop, {
disabled,
clickTrigger = 'click'
} = {}) {
const preventMouseClickOutsideRef = (0, _react.useRef)(false);
const waitingForTrigger = (0, _react.useRef)(false);
const handleMouseCapture = (0, _react.useCallback)(e => {
const currentTarget = getRefTarget(ref);
(0, _warning.default)(!!currentTarget, 'ClickOutside captured a close event but does not have a ref to compare it to. ' + 'useClickOutside(), should be passed a ref that resolves to a DOM node');
preventMouseClickOutsideRef.current = !currentTarget || isModifiedEvent(e) || !isLeftClickEvent(e) || !!(0, _contains.default)(currentTarget, e.target) || waitingForTrigger.current;
waitingForTrigger.current = false;
}, [ref]);
const handleInitialMouse = (0, _useEventCallback.default)(e => {
const currentTarget = getRefTarget(ref);
if (currentTarget && (0, _contains.default)(currentTarget, e.target)) {
waitingForTrigger.current = true;
} else {
// When clicking on scrollbars within current target, click events are not triggered, so this ref
// is never reset inside `handleMouseCapture`. This would cause a bug where it requires 2 clicks
// to close the overlay.
waitingForTrigger.current = false;
}
});
const handleMouse = (0, _useEventCallback.default)(e => {
if (!preventMouseClickOutsideRef.current) {
onClickOutside(e);
}
});
(0, _react.useEffect)(() => {
var _ownerWindow$event, _ownerWindow$parent;
if (disabled || ref == null) return undefined;
const doc = (0, _ownerDocument.default)(getRefTarget(ref));
const ownerWindow = doc.defaultView || window;
// Store the current event to avoid triggering handlers immediately
// For things rendered in an iframe, the event might originate on the parent window
// so we should fall back to that global event if the local one doesn't exist
// https://github.com/facebook/react/issues/20074
let currentEvent = (_ownerWindow$event = ownerWindow.event) != null ? _ownerWindow$event : (_ownerWindow$parent = ownerWindow.parent) == null ? void 0 : _ownerWindow$parent.event;
let removeInitialTriggerListener = null;
if (InitialTriggerEvents[clickTrigger]) {
removeInitialTriggerListener = (0, _listen.default)(doc, InitialTriggerEvents[clickTrigger], handleInitialMouse, true);
}
// 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
// element is removed in the React mouse callback.
const removeMouseCaptureListener = (0, _listen.default)(doc, clickTrigger, handleMouseCapture, true);
const removeMouseListener = (0, _listen.default)(doc, clickTrigger, e => {
// skip if this event is the same as the one running when we added the handlers
if (e === currentEvent) {
currentEvent = undefined;
return;
}
handleMouse(e);
});
let mobileSafariHackListeners = [];
if ('ontouchstart' in doc.documentElement) {
mobileSafariHackListeners = [].slice.call(doc.body.children).map(el => (0, _listen.default)(el, 'mousemove', noop));
}
return () => {
removeInitialTriggerListener == null ? void 0 : removeInitialTriggerListener();
removeMouseCaptureListener();
removeMouseListener();
mobileSafariHackListeners.forEach(remove => remove());
};
}, [ref, disabled, clickTrigger, handleMouseCapture, handleInitialMouse, handleMouse]);
}
var _default = exports.default = useClickOutside;

View File

@@ -0,0 +1,50 @@
import * as Popper from '@popperjs/core';
export type Modifier<Name, Options extends Popper.Obj> = Popper.Modifier<Name, Options>;
export type Options = Popper.Options;
export type Instance = Popper.Instance;
export type Placement = Popper.Placement;
export type VirtualElement = Popper.VirtualElement;
export type State = Popper.State;
export type OffsetValue = [
number | null | undefined,
number | null | undefined
];
export type OffsetFunction = (details: {
popper: Popper.Rect;
reference: Popper.Rect;
placement: Placement;
}) => OffsetValue;
export type Offset = OffsetFunction | OffsetValue;
export type ModifierMap = Record<string, Partial<Modifier<any, any>>>;
export type Modifiers = Popper.Options['modifiers'] | Record<string, Partial<Modifier<any, any>>>;
export type UsePopperOptions = Omit<Options, 'modifiers' | 'placement' | 'strategy'> & {
enabled?: boolean;
placement?: Options['placement'];
strategy?: Options['strategy'];
modifiers?: Options['modifiers'];
};
export interface UsePopperState {
placement: Placement;
update: () => void;
forceUpdate: () => void;
attributes: Record<string, Record<string, any>>;
styles: Record<string, Partial<CSSStyleDeclaration>>;
state?: State;
}
/**
* Position an element relative some reference element using Popper.js
*
* @param referenceElement
* @param popperElement
* @param {object} options
* @param {object=} options.modifiers Popper.js modifiers
* @param {boolean=} options.enabled toggle the popper functionality on/off
* @param {string=} options.placement The popper element placement relative to the reference element
* @param {string=} options.strategy the positioning strategy
* @param {function=} options.onCreate called when the popper is created
* @param {function=} options.onUpdate called when the popper is updated
*
* @returns {UsePopperState} The popper state
*/
declare function usePopper(referenceElement: VirtualElement | null | undefined, popperElement: HTMLElement | null | undefined, { enabled, placement, strategy, modifiers, ...config }?: UsePopperOptions): UsePopperState;
export default usePopper;

View File

@@ -0,0 +1,163 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _react = require("react");
var _dequal = require("dequal");
var _useSafeState = _interopRequireDefault(require("@restart/hooks/useSafeState"));
var _popper = require("./popper");
const _excluded = ["enabled", "placement", "strategy", "modifiers"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
const disabledApplyStylesModifier = {
name: 'applyStyles',
enabled: false,
phase: 'afterWrite',
fn: () => undefined
};
// until docjs supports type exports...
const ariaDescribedByModifier = {
name: 'ariaDescribedBy',
enabled: true,
phase: 'afterWrite',
effect: ({
state
}) => () => {
const {
reference,
popper
} = state.elements;
if ('removeAttribute' in reference) {
const ids = (reference.getAttribute('aria-describedby') || '').split(',').filter(id => id.trim() !== popper.id);
if (!ids.length) reference.removeAttribute('aria-describedby');else reference.setAttribute('aria-describedby', ids.join(','));
}
},
fn: ({
state
}) => {
var _popper$getAttribute;
const {
popper,
reference
} = state.elements;
const role = (_popper$getAttribute = popper.getAttribute('role')) == null ? void 0 : _popper$getAttribute.toLowerCase();
if (popper.id && role === 'tooltip' && 'setAttribute' in reference) {
const ids = reference.getAttribute('aria-describedby');
if (ids && ids.split(',').indexOf(popper.id) !== -1) {
return;
}
reference.setAttribute('aria-describedby', ids ? `${ids},${popper.id}` : popper.id);
}
}
};
const EMPTY_MODIFIERS = [];
/**
* Position an element relative some reference element using Popper.js
*
* @param referenceElement
* @param popperElement
* @param {object} options
* @param {object=} options.modifiers Popper.js modifiers
* @param {boolean=} options.enabled toggle the popper functionality on/off
* @param {string=} options.placement The popper element placement relative to the reference element
* @param {string=} options.strategy the positioning strategy
* @param {function=} options.onCreate called when the popper is created
* @param {function=} options.onUpdate called when the popper is updated
*
* @returns {UsePopperState} The popper state
*/
function usePopper(referenceElement, popperElement, _ref = {}) {
let {
enabled = true,
placement = 'bottom',
strategy = 'absolute',
modifiers = EMPTY_MODIFIERS
} = _ref,
config = _objectWithoutPropertiesLoose(_ref, _excluded);
const prevModifiers = (0, _react.useRef)(modifiers);
const popperInstanceRef = (0, _react.useRef)();
const update = (0, _react.useCallback)(() => {
var _popperInstanceRef$cu;
(_popperInstanceRef$cu = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu.update();
}, []);
const forceUpdate = (0, _react.useCallback)(() => {
var _popperInstanceRef$cu2;
(_popperInstanceRef$cu2 = popperInstanceRef.current) == null ? void 0 : _popperInstanceRef$cu2.forceUpdate();
}, []);
const [popperState, setState] = (0, _useSafeState.default)((0, _react.useState)({
placement,
update,
forceUpdate,
attributes: {},
styles: {
popper: {},
arrow: {}
}
}));
const updateModifier = (0, _react.useMemo)(() => ({
name: 'updateStateModifier',
enabled: true,
phase: 'write',
requires: ['computeStyles'],
fn: ({
state
}) => {
const styles = {};
const attributes = {};
Object.keys(state.elements).forEach(element => {
styles[element] = state.styles[element];
attributes[element] = state.attributes[element];
});
setState({
state,
styles,
attributes,
update,
forceUpdate,
placement: state.placement
});
}
}), [update, forceUpdate, setState]);
const nextModifiers = (0, _react.useMemo)(() => {
if (!(0, _dequal.dequal)(prevModifiers.current, modifiers)) {
prevModifiers.current = modifiers;
}
return prevModifiers.current;
}, [modifiers]);
(0, _react.useEffect)(() => {
if (!popperInstanceRef.current || !enabled) return;
popperInstanceRef.current.setOptions({
placement,
strategy,
modifiers: [...nextModifiers, updateModifier, disabledApplyStylesModifier]
});
}, [strategy, placement, updateModifier, enabled, nextModifiers]);
(0, _react.useEffect)(() => {
if (!enabled || referenceElement == null || popperElement == null) {
return undefined;
}
popperInstanceRef.current = (0, _popper.createPopper)(referenceElement, popperElement, Object.assign({}, config, {
placement,
strategy,
modifiers: [...nextModifiers, ariaDescribedByModifier, updateModifier]
}));
return () => {
if (popperInstanceRef.current != null) {
popperInstanceRef.current.destroy();
popperInstanceRef.current = undefined;
setState(s => Object.assign({}, s, {
attributes: {},
styles: {
popper: {}
}
}));
}
};
// This is only run once to _create_ the popper
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [enabled, referenceElement, popperElement]);
return popperState;
}
var _default = exports.default = usePopper;

View File

@@ -0,0 +1,49 @@
/// <reference types="react" />
import { TransitionProps as RTGTransitionProps, TransitionStatus } from 'react-transition-group/Transition';
export type TransitionProps = RTGTransitionProps & {
children: React.ReactElement | ((status: TransitionStatus, props: Record<string, unknown>) => React.ReactNode);
};
/**
* Normalizes RTG transition callbacks with nodeRef to better support
* strict mode.
*
* @param props Transition props.
* @returns Normalized transition props.
*/
export default function useRTGTransitionProps({ onEnter, onEntering, onEntered, onExit, onExiting, onExited, addEndListener, children, ...props }: TransitionProps): {
children: any;
addEndListener?: ((param: any) => void) | undefined;
onExited?: ((param: any) => void) | undefined;
onExiting?: ((param: any) => void) | undefined;
onExit?: ((param: any) => void) | undefined;
onEntered?: ((param: any) => void) | undefined;
onEntering?: ((param: any) => void) | undefined;
onEnter?: ((param: any) => void) | undefined;
nodeRef: import("react").RefObject<HTMLElement>;
timeout: number | {
appear?: number | undefined;
enter?: number | undefined;
exit?: number | undefined;
};
in?: boolean | undefined;
mountOnEnter?: boolean | undefined;
unmountOnExit?: boolean | undefined;
} | {
children: any;
addEndListener?: ((param: any) => void) | undefined;
onExited?: ((param: any) => void) | undefined;
onExiting?: ((param: any) => void) | undefined;
onExit?: ((param: any) => void) | undefined;
onEntered?: ((param: any) => void) | undefined;
onEntering?: ((param: any) => void) | undefined;
onEnter?: ((param: any) => void) | undefined;
nodeRef: import("react").RefObject<HTMLElement>;
timeout?: number | {
appear?: number | undefined;
enter?: number | undefined;
exit?: number | undefined;
} | undefined;
in?: boolean | undefined;
mountOnEnter?: boolean | undefined;
unmountOnExit?: boolean | undefined;
};

View File

@@ -0,0 +1,73 @@
"use strict";
exports.__esModule = true;
exports.default = useRTGTransitionProps;
var _react = require("react");
var _useMergedRefs = _interopRequireDefault(require("@restart/hooks/useMergedRefs"));
var _utils = require("./utils");
const _excluded = ["onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "addEndListener", "children"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
/**
* Normalizes RTG transition callbacks with nodeRef to better support
* strict mode.
*
* @param props Transition props.
* @returns Normalized transition props.
*/
function useRTGTransitionProps(_ref) {
let {
onEnter,
onEntering,
onEntered,
onExit,
onExiting,
onExited,
addEndListener,
children
} = _ref,
props = _objectWithoutPropertiesLoose(_ref, _excluded);
const nodeRef = (0, _react.useRef)(null);
const mergedRef = (0, _useMergedRefs.default)(nodeRef, (0, _utils.getChildRef)(children));
const normalize = callback => param => {
if (callback && nodeRef.current) {
callback(nodeRef.current, param);
}
};
/* eslint-disable react-hooks/exhaustive-deps */
const handleEnter = (0, _react.useCallback)(normalize(onEnter), [onEnter]);
const handleEntering = (0, _react.useCallback)(normalize(onEntering), [onEntering]);
const handleEntered = (0, _react.useCallback)(normalize(onEntered), [onEntered]);
const handleExit = (0, _react.useCallback)(normalize(onExit), [onExit]);
const handleExiting = (0, _react.useCallback)(normalize(onExiting), [onExiting]);
const handleExited = (0, _react.useCallback)(normalize(onExited), [onExited]);
const handleAddEndListener = (0, _react.useCallback)(normalize(addEndListener), [addEndListener]);
/* eslint-enable react-hooks/exhaustive-deps */
return Object.assign({}, props, {
nodeRef
}, onEnter && {
onEnter: handleEnter
}, onEntering && {
onEntering: handleEntering
}, onEntered && {
onEntered: handleEntered
}, onExit && {
onExit: handleExit
}, onExiting && {
onExiting: handleExiting
}, onExited && {
onExited: handleExited
}, addEndListener && {
addEndListener: handleAddEndListener
}, {
children: typeof children === 'function' ? (status, innerProps) =>
// TODO: Types for RTG missing innerProps, so need to cast.
children(status, Object.assign({}, innerProps, {
ref: mergedRef
})) : /*#__PURE__*/(0, _react.cloneElement)(children, {
ref: mergedRef
})
});
}

View File

@@ -0,0 +1,19 @@
/// <reference types="react" />
import { ClickOutsideOptions } from './useClickOutside';
export interface RootCloseOptions extends ClickOutsideOptions {
disabled?: boolean;
}
/**
* The `useRootClose` hook registers your callback on the document
* when rendered. Powers the `<Overlay/>` component. This is used achieve modal
* style behavior where your callback is triggered when the user tries to
* interact with the rest of the document or hits the `esc` key.
*
* @param {Ref<HTMLElement>| HTMLElement} ref The element boundary
* @param {function} onRootClose
* @param {object=} options
* @param {boolean=} options.disabled
* @param {string=} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
*/
declare function useRootClose(ref: React.RefObject<Element> | Element | null | undefined, onRootClose: (e: Event) => void, { disabled, clickTrigger }?: RootCloseOptions): void;
export default useRootClose;

View File

@@ -0,0 +1,61 @@
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _listen = _interopRequireDefault(require("dom-helpers/listen"));
var _ownerDocument = _interopRequireDefault(require("dom-helpers/ownerDocument"));
var _react = require("react");
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _useClickOutside = _interopRequireWildcard(require("./useClickOutside"));
var _utils = require("./utils");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const noop = () => {};
/**
* The `useRootClose` hook registers your callback on the document
* when rendered. Powers the `<Overlay/>` component. This is used achieve modal
* style behavior where your callback is triggered when the user tries to
* interact with the rest of the document or hits the `esc` key.
*
* @param {Ref<HTMLElement>| HTMLElement} ref The element boundary
* @param {function} onRootClose
* @param {object=} options
* @param {boolean=} options.disabled
* @param {string=} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
*/
function useRootClose(ref, onRootClose, {
disabled,
clickTrigger
} = {}) {
const onClose = onRootClose || noop;
(0, _useClickOutside.default)(ref, onClose, {
disabled,
clickTrigger
});
const handleKeyUp = (0, _useEventCallback.default)(e => {
if ((0, _utils.isEscKey)(e)) {
onClose(e);
}
});
(0, _react.useEffect)(() => {
if (disabled || ref == null) return undefined;
const doc = (0, _ownerDocument.default)((0, _useClickOutside.getRefTarget)(ref));
// Store the current event to avoid triggering handlers immediately
// https://github.com/facebook/react/issues/20074
let currentEvent = (doc.defaultView || window).event;
const removeKeyupListener = (0, _listen.default)(doc, 'keyup', e => {
// skip if this event is the same as the one running when we added the handlers
if (e === currentEvent) {
currentEvent = undefined;
return;
}
handleKeyUp(e);
});
return () => {
removeKeyupListener();
};
}, [ref, disabled, handleKeyUp]);
}
var _default = exports.default = useRootClose;

View File

@@ -0,0 +1 @@
export default function useScrollParent(element: null | Element): Element | Document | null | undefined;

View File

@@ -0,0 +1,17 @@
"use strict";
exports.__esModule = true;
exports.default = useScrollParent;
var _useIsomorphicEffect = _interopRequireDefault(require("@restart/hooks/useIsomorphicEffect"));
var _scrollParent = _interopRequireDefault(require("dom-helpers/scrollParent"));
var _react = require("react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function useScrollParent(element) {
const [parent, setParent] = (0, _react.useState)(null);
(0, _useIsomorphicEffect.default)(() => {
if (element) {
setParent((0, _scrollParent.default)(element, true));
}
}, [element]);
return parent;
}

View File

@@ -0,0 +1,5 @@
/// <reference types="react" />
import { VirtualElement } from './usePopper';
export type DOMContainer<T extends HTMLElement | VirtualElement = HTMLElement> = T | React.RefObject<T | null> | null | (() => T | React.RefObject<T | null> | null);
export declare const resolveContainerRef: <T extends HTMLElement | import("@popperjs/core").VirtualElement>(ref: DOMContainer<T> | undefined, document?: Document) => HTMLBodyElement | T | null;
export default function useWaitForDOMRef<T extends HTMLElement | VirtualElement = HTMLElement>(ref: DOMContainer<T> | undefined, onResolved?: (element: T | HTMLBodyElement) => void): HTMLBodyElement | T | null;

View File

@@ -0,0 +1,39 @@
"use strict";
exports.__esModule = true;
exports.default = useWaitForDOMRef;
exports.resolveContainerRef = void 0;
var _ownerDocument = _interopRequireDefault(require("dom-helpers/ownerDocument"));
var _canUseDOM = _interopRequireDefault(require("dom-helpers/canUseDOM"));
var _react = require("react");
var _useWindow = _interopRequireDefault(require("./useWindow"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const resolveContainerRef = (ref, document) => {
if (!_canUseDOM.default) return null;
if (ref == null) return (document || (0, _ownerDocument.default)()).body;
if (typeof ref === 'function') ref = ref();
if (ref && 'current' in ref) ref = ref.current;
if (ref && ('nodeType' in ref || ref.getBoundingClientRect)) return ref;
return null;
};
exports.resolveContainerRef = resolveContainerRef;
function useWaitForDOMRef(ref, onResolved) {
const window = (0, _useWindow.default)();
const [resolvedRef, setRef] = (0, _react.useState)(() => resolveContainerRef(ref, window == null ? void 0 : window.document));
if (!resolvedRef) {
const earlyRef = resolveContainerRef(ref);
if (earlyRef) setRef(earlyRef);
}
(0, _react.useEffect)(() => {
if (onResolved && resolvedRef) {
onResolved(resolvedRef);
}
}, [onResolved, resolvedRef]);
(0, _react.useEffect)(() => {
const nextRef = resolveContainerRef(ref);
if (nextRef !== resolvedRef) {
setRef(nextRef);
}
}, [ref, resolvedRef]);
return resolvedRef;
}

View File

@@ -0,0 +1,41 @@
export interface WaypointEvent {
position: Position;
previousPosition: Position | null;
}
export interface Rect {
top?: number;
bottom?: number;
left?: number;
right?: number;
}
export type WaypointCallback = (details: WaypointEvent, entry: IntersectionObserverEntry, observer: IntersectionObserver) => void;
export type RootElement = Element | Document | null | undefined;
/** Accepts all options an IntersectionObserver accepts */
export interface WaypointOptions extends Omit<IntersectionObserverInit, 'rootMargin' | 'root'> {
/**
* The "root" element to observe. This should be the scrollable view your waypoint
* is rendered into. Accepts a DOM element, a function that returns a DOM element, `null`
* indicating that the root is not ready yet, or the string "scrollParent" to
* have the waypoint calculate the scroll parent itself.
*/
root?: RootElement | 'scrollParent' | ((element: Element) => RootElement);
/**
* A valid CSS `margin` property or object containing the specific "top", "left", etc properties.
* The root margin functionally adjusts the "size" of the viewport when considering the waypoint's
* position. A positive margin will cause the waypoint to "enter" the waypoint early while a
* negative margin will have the opposite effect.
*/
rootMargin?: string | Rect;
/**
* Set the direction of the scroll to consider when tracking the waypoint's position
*/
scrollDirection?: 'vertical' | 'horizontal';
}
export declare enum Position {
UNKNOWN = 0,
BEFORE = 1,
INSIDE = 2,
AFTER = 3
}
declare function useWaypoint(element: Element | null, callback: WaypointCallback, options?: WaypointOptions): void;
export default useWaypoint;

View File

@@ -0,0 +1,92 @@
"use strict";
exports.__esModule = true;
exports.default = exports.Position = void 0;
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _useIntersectionObserver = _interopRequireDefault(require("@restart/hooks/useIntersectionObserver"));
var _react = require("react");
var _scrollParent = _interopRequireDefault(require("dom-helpers/scrollParent"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Accepts all options an IntersectionObserver accepts */
let Position = exports.Position = void 0;
(function (Position) {
Position[Position["UNKNOWN"] = 0] = "UNKNOWN";
Position[Position["BEFORE"] = 1] = "BEFORE";
Position[Position["INSIDE"] = 2] = "INSIDE";
Position[Position["AFTER"] = 3] = "AFTER";
})(Position || (exports.Position = Position = {}));
function toCss(margin) {
if (!margin || typeof margin === 'string') return margin;
const {
top = 0,
right = 0,
bottom = 0,
left = 0
} = margin;
return `${top}px ${right}px ${bottom}px ${left}px`;
}
const findRoot = el => (0, _scrollParent.default)(el, true);
function useWaypoint(element, callback, options = {}) {
const {
rootMargin,
threshold,
scrollDirection = 'vertical'
} = options;
let {
root
} = options;
const handler = (0, _useEventCallback.default)(callback);
const prevPositionRef = (0, _react.useRef)(null);
if (root === 'scrollParent') {
root = findRoot;
}
const scrollParent = (0, _react.useMemo)(() => element && typeof root === 'function' ? root(element) : null, [element, root]);
let realRoot = typeof root === 'function' ? scrollParent : root;
if (realRoot && realRoot.nodeType === document.DOCUMENT_NODE) {
// explicit undefined means "use the viewport", instead of `null`
// which means "no root yet". This works around a bug in safari
// where document is not accepted in older versions,
// or is accepted but doesn't work (as of v14)
realRoot = undefined;
}
(0, _useIntersectionObserver.default)(
// We change the meaning of explicit null to "not provided yet"
// this is to allow easier synchronizing between element and roots derived
// from it. Otherwise if the root updates later an observer will be created
// for the document and then for the root
element, ([entry], observer) => {
var _entry$rootBounds, _entry$rootBounds2;
if (!entry) return;
const [start, end, point] = scrollDirection === 'vertical' ? ['top', 'bottom', 'y'] : ['left', 'right', 'x'];
const {
[point]: coord
} = entry.boundingClientRect;
const rootStart = ((_entry$rootBounds = entry.rootBounds) == null ? void 0 : _entry$rootBounds[start]) || 0;
const rootEnd = ((_entry$rootBounds2 = entry.rootBounds) == null ? void 0 : _entry$rootBounds2[end]) || 0;
// The position may remain UNKNOWN if the root
// is 0 width/height or everything is hidden.
let position = Position.UNKNOWN;
if (entry.isIntersecting) {
position = Position.INSIDE;
} else if (coord > rootEnd) {
position = Position.AFTER;
} else if (coord < rootStart) {
position = Position.BEFORE;
}
const previousPosition = prevPositionRef.current;
if (previousPosition === position) {
return;
}
handler({
position,
previousPosition
}, entry, observer);
prevPositionRef.current = position;
}, {
threshold,
root: realRoot,
rootMargin: toCss(rootMargin)
});
}
var _default = exports.default = useWaypoint;

View File

@@ -0,0 +1,9 @@
/// <reference types="react" />
export declare const WindowProvider: import("react").Provider<(Window & typeof globalThis) | undefined>;
/**
* The document "window" placed in React context. Helpful for determining
* SSR context, or when rendering into an iframe.
*
* @returns the current window
*/
export default function useWindow(): (Window & typeof globalThis) | undefined;

View File

@@ -0,0 +1,20 @@
"use strict";
exports.__esModule = true;
exports.WindowProvider = void 0;
exports.default = useWindow;
var _react = require("react");
var _canUseDOM = _interopRequireDefault(require("dom-helpers/canUseDOM"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const Context = /*#__PURE__*/(0, _react.createContext)(_canUseDOM.default ? window : undefined);
const WindowProvider = exports.WindowProvider = Context.Provider;
/**
* The document "window" placed in React context. Helpful for determining
* SSR context, or when rendering into an iframe.
*
* @returns the current window
*/
function useWindow() {
return (0, _react.useContext)(Context);
}

View File

@@ -0,0 +1,8 @@
import * as React from 'react';
export declare function isEscKey(e: KeyboardEvent): boolean;
export declare function getReactVersion(): {
major: number;
minor: number;
patch: number;
};
export declare function getChildRef(element?: React.ReactElement | ((...args: any[]) => React.ReactNode) | null): React.Ref<any> | null;

Some files were not shown because too many files have changed in this diff Show More