+
+ The content in this container doesn't have a max width
+
+
The content in this container won't exceed the extra large width.
diff --git a/src/Container/index.jsx b/src/Container/index.jsx
deleted file mode 100644
index a2f38de7bb..0000000000
--- a/src/Container/index.jsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React, { forwardRef } from 'react';
-import classNames from 'classnames';
-import RBContainer from 'react-bootstrap/Container';
-import PropTypes from 'prop-types';
-
-const SIZE_CLASS_NAMES = {
- xs: 'container-mw-xs',
- sm: 'container-mw-sm',
- md: 'container-mw-md',
- lg: 'container-mw-lg',
- xl: 'container-mw-xl',
-};
-
-const Container = forwardRef(({ size, children, ...props }, ref) => (
-
- {children}
-
-));
-
-Container.propTypes = {
- ...RBContainer.propTypes,
- /** Override the base element */
- as: PropTypes.elementType,
- /** Specifies the contents of the container */
- children: PropTypes.node,
- /** Fill all available space at any breakpoint */
- fluid: PropTypes.bool,
- /** Set the maximum width for the container */
- size: PropTypes.oneOf(Object.keys(SIZE_CLASS_NAMES)),
- /** Overrides underlying component base CSS class name */
- bsPrefix: PropTypes.string,
-};
-
-Container.defaultProps = {
- as: 'div',
- children: undefined,
- fluid: true,
- size: undefined,
- bsPrefix: 'container',
-};
-
-export default Container;
diff --git a/src/Container/index.tsx b/src/Container/index.tsx
new file mode 100644
index 0000000000..ea95d58867
--- /dev/null
+++ b/src/Container/index.tsx
@@ -0,0 +1,64 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import RBContainer, { type ContainerProps as RBContainerProps } from 'react-bootstrap/Container';
+
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
+
+enum ContainerSizeClass {
+ xs = 'container-mw-xs',
+ sm = 'container-mw-sm',
+ md = 'container-mw-md',
+ lg = 'container-mw-lg',
+ xl = 'container-mw-xl',
+}
+
+export type ContainerSize = keyof typeof ContainerSizeClass;
+
+interface ContainerProps extends RBContainerProps {
+ size?: ContainerSize;
+}
+
+type ContainerType = ComponentWithAsProp<'div', ContainerProps>;
+
+const Container: ContainerType = React.forwardRef
(({
+ size,
+ children,
+ ...props
+}, ref) => (
+
+ {children}
+
+));
+
+Container.propTypes = {
+ ...RBContainer.propTypes,
+ /** Override the base element */
+ as: PropTypes.elementType,
+ /** Specifies the contents of the container */
+ children: PropTypes.node,
+ /** Fill all available space at any breakpoint */
+ fluid: PropTypes.bool,
+ /** Set the maximum width for the container. Omiting the prop will remove the max-width */
+ size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+ /** Overrides underlying component base CSS class name */
+ bsPrefix: PropTypes.string,
+};
+
+Container.defaultProps = {
+ as: 'div',
+ children: undefined,
+ fluid: true,
+ size: undefined,
+ bsPrefix: 'container',
+};
+
+export default Container;
diff --git a/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx b/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
index 732c3cdb43..2af2b283ba 100644
--- a/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
+++ b/src/DataTable/selection/tests/ControlledSelectHeader.test.jsx
@@ -8,6 +8,13 @@ import DataTableContext from '../../DataTableContext';
import * as selectActions from '../data/actions';
import { getRowIds } from '../data/helpers';
+function DataTableContextChild() {
+ const contextValue = useContext(DataTableContext);
+ return (
+
+ );
+}
+
// eslint-disable-next-line react/prop-types
function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
return (
@@ -18,13 +25,6 @@ function ControlledSelectHeaderWrapper({ tableProps, selectProps, ...rest }) {
);
}
-function DataTableContextChild() {
- const contextValue = useContext(DataTableContext);
- return (
-
- );
-}
-
const mockToggleAllPageRowsSelectedProps = jest.fn();
const rows = [{ id: 1 }, { id: 2 }];
const tableProps = {
diff --git a/src/IconButton/index.tsx b/src/IconButton/index.tsx
index 5e38e1b35f..601479cd0e 100644
--- a/src/IconButton/index.tsx
+++ b/src/IconButton/index.tsx
@@ -2,9 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { type Placement } from 'react-bootstrap/Overlay';
-import Icon from '../Icon';
import { OverlayTrigger } from '../Overlay';
import Tooltip from '../Tooltip';
+import Icon from '../Icon';
interface Props extends React.HTMLAttributes {
iconAs?: React.ComponentType,
diff --git a/src/Menu/SelectMenu.jsx b/src/Menu/SelectMenu.jsx
index 5bee47ba7b..0e6feb9506 100644
--- a/src/Menu/SelectMenu.jsx
+++ b/src/Menu/SelectMenu.jsx
@@ -15,6 +15,7 @@ function SelectMenu({
children,
className,
variant,
+ disabled,
...props
}) {
const [triggerTarget, setTriggerTarget] = useState(null);
@@ -89,6 +90,7 @@ function SelectMenu({
variant={variant}
iconAfter={ExpandMore}
onClick={open}
+ disabled={disabled}
>
{selected !== undefined && children[selected] ? children[selected].props.children : defaultMessage}
@@ -131,12 +133,15 @@ SelectMenu.propTypes = {
className: PropTypes.string,
/** Specifies variant to use. */
variant: PropTypes.string,
+ /** Specifies if the `SelectMenu` is disabled. */
+ disabled: PropTypes.bool,
};
SelectMenu.defaultProps = {
defaultMessage: SELECT_MENU_DEFAULT_MESSAGE,
className: undefined,
variant: 'outline-primary',
+ disabled: false,
};
const SelectMenuWithDeprecatedProp = withDeprecatedProps(SelectMenu, 'SelectMenu', {
diff --git a/src/Menu/SelectMenu.test.jsx b/src/Menu/SelectMenu.test.jsx
index 9d542da4e2..49d0f544a5 100644
--- a/src/Menu/SelectMenu.test.jsx
+++ b/src/Menu/SelectMenu.test.jsx
@@ -58,6 +58,12 @@ describe('correct rendering', () => {
const button = screen.getByRole('button');
expect(button).toHaveClass('btn-brand');
});
+
+ it('renders as disabled', () => {
+ render(DefaultSelectMenu({ disabled: true }));
+ const button = screen.getByRole('button');
+ expect(button).toBeDisabled();
+ });
});
describe('mouse behavior & keyboard behavior', () => {
diff --git a/src/Menu/select-menu.md b/src/Menu/select-menu.md
index 0aa7ad33fc..e11a6116f2 100644
--- a/src/Menu/select-menu.md
+++ b/src/Menu/select-menu.md
@@ -56,3 +56,11 @@ The ``Modal`` brings focus to the first menu element upon the click of the trigg
```
+
+## Disabled
+
+```jsx live
+
+
+
+```
diff --git a/src/Modal/ModalContext.jsx b/src/Modal/ModalContext.tsx
similarity index 50%
rename from src/Modal/ModalContext.jsx
rename to src/Modal/ModalContext.tsx
index f374c3ee6f..a9bdd3b702 100644
--- a/src/Modal/ModalContext.jsx
+++ b/src/Modal/ModalContext.tsx
@@ -1,14 +1,29 @@
import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-const ModalContext = React.createContext({
+interface ContextData {
+ onClose: () => void;
+ isOpen: boolean;
+ isBlocking: boolean;
+}
+
+const ModalContext = React.createContext({
onClose: () => {},
+ isOpen: false,
+ isBlocking: false,
});
function ModalContextProvider({
- onClose, isOpen, isBlocking, children,
+ onClose,
+ isOpen,
+ isBlocking = false,
+ children = null,
+}: {
+ onClose: () => void;
+ isOpen: boolean;
+ isBlocking?: boolean;
+ children?: React.ReactNode;
}) {
- const modalContextValue = useMemo(
+ const modalContextValue = useMemo(
() => ({ onClose, isOpen, isBlocking }),
[onClose, isOpen, isBlocking],
);
@@ -20,17 +35,5 @@ function ModalContextProvider({
);
}
-ModalContextProvider.propTypes = {
- children: PropTypes.node,
- onClose: PropTypes.func.isRequired,
- isBlocking: PropTypes.bool,
- isOpen: PropTypes.bool.isRequired,
-};
-
-ModalContextProvider.defaultProps = {
- children: null,
- isBlocking: false,
-};
-
export { ModalContextProvider };
export default ModalContext;
diff --git a/src/Modal/ModalDialog.jsx b/src/Modal/ModalDialog.tsx
similarity index 66%
rename from src/Modal/ModalDialog.jsx
rename to src/Modal/ModalDialog.tsx
index caa519c1c6..38dabeb3d8 100644
--- a/src/Modal/ModalDialog.jsx
+++ b/src/Modal/ModalDialog.tsx
@@ -3,11 +3,16 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useMediaQuery } from 'react-responsive';
import ModalLayer from './ModalLayer';
+// @ts-ignore for now - this needs to be converted to TypeScript
import ModalCloseButton from './ModalCloseButton';
import ModalDialogHeader from './ModalDialogHeader';
+// @ts-ignore for now - this needs to be converted to TypeScript
import ModalDialogTitle from './ModalDialogTitle';
+// @ts-ignore for now - this needs to be converted to TypeScript
import ModalDialogFooter from './ModalDialogFooter';
+// @ts-ignore for now - this needs to be converted to TypeScript
import ModalDialogBody from './ModalDialogBody';
+// @ts-ignore for now - this needs to be converted to TypeScript
import ModalDialogHero from './ModalDialogHero';
import Icon from '../Icon';
@@ -16,22 +21,57 @@ import { Close } from '../../icons';
export const MODAL_DIALOG_CLOSE_LABEL = 'Close';
+interface Props {
+ /** Specifies the content of the dialog */
+ children: React.ReactNode;
+ /** The aria-label of the dialog */
+ title: string;
+ /** A callback to close the modal dialog, e.g. when Escape is pressed */
+ onClose: () => void;
+ /** Is the modal dialog open or closed? */
+ isOpen?: boolean;
+ /** The close 'x' icon button in the top right of the dialog box */
+ hasCloseButton?: boolean;
+ /** Size determines the maximum width of the dialog box */
+ size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+ /** The visual style of the dialog box */
+ variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';
+ /** The label supplied to the close icon button if one is rendered */
+ closeLabel?: string;
+ /** Specifies class name to append to the base element */
+ className?: string;
+ /**
+ * Determines where a scrollbar should appear if a modal is too large for the
+ * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true
+ * the browser window itself receives the scrollbar.
+ */
+ isFullscreenScroll?: boolean;
+ /** To show full screen view on mobile screens */
+ isFullscreenOnMobile?: boolean;
+ /** Prevent clicking on the backdrop or pressing Esc to close the modal */
+ isBlocking?: boolean;
+ /** Specifies the z-index of the modal */
+ zIndex?: number;
+ /** Specifies whether overflow is visible in the modal */
+ isOverflowVisible?: boolean;
+}
+
function ModalDialog({
children,
title,
- isOpen,
+ isOpen = false,
onClose,
- size,
- variant,
- hasCloseButton,
- closeLabel,
- isFullscreenScroll,
+ size = 'md',
+ variant = 'default',
+ hasCloseButton = true,
+ closeLabel = MODAL_DIALOG_CLOSE_LABEL,
+ isFullscreenScroll = false,
className,
- isFullscreenOnMobile,
- isBlocking,
+ isFullscreenOnMobile = false,
+ isBlocking = false,
zIndex,
- isOverflowVisible,
-}) {
+ isOverflowVisible = true,
+}: Props) {
const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
const showFullScreen = (isFullscreenOnMobile && isMobile);
return (
@@ -131,19 +171,6 @@ ModalDialog.propTypes = {
isOverflowVisible: PropTypes.bool.isRequired,
};
-ModalDialog.defaultProps = {
- isOpen: false,
- hasCloseButton: true,
- size: 'md',
- variant: 'default',
- closeLabel: MODAL_DIALOG_CLOSE_LABEL,
- className: undefined,
- isFullscreenScroll: false,
- isFullscreenOnMobile: false,
- isBlocking: false,
- zIndex: undefined,
-};
-
ModalDialog.Header = ModalDialogHeader;
ModalDialog.Title = ModalDialogTitle;
ModalDialog.Footer = ModalDialogFooter;
diff --git a/src/Modal/ModalDialogHeader.jsx b/src/Modal/ModalDialogHeader.tsx
similarity index 57%
rename from src/Modal/ModalDialogHeader.jsx
rename to src/Modal/ModalDialogHeader.tsx
index 0a0ff4ca9a..9299db8295 100644
--- a/src/Modal/ModalDialogHeader.jsx
+++ b/src/Modal/ModalDialogHeader.tsx
@@ -1,21 +1,32 @@
+/* eslint-disable react/require-default-props */
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
+import type { ComponentWithAsProp } from '../utils/types/bootstrap';
-function ModalDialogHeader({
- as,
+export interface Props {
+ as?: string;
+ children: React.ReactNode;
+ className?: string;
+}
+
+type HeaderType = ComponentWithAsProp<'div', Props>;
+
+const ModalDialogHeader: HeaderType = React.forwardRef(({
+ as = 'div',
children,
...props
-}) {
- return React.createElement(
+}, ref) => (
+ React.createElement(
as,
{
...props,
+ ref,
className: classNames('pgn__modal-header', props.className),
},
children,
- );
-}
+ )
+));
ModalDialogHeader.propTypes = {
/** Specifies the base element */
@@ -26,9 +37,4 @@ ModalDialogHeader.propTypes = {
className: PropTypes.string,
};
-ModalDialogHeader.defaultProps = {
- as: 'div',
- className: undefined,
-};
-
export default ModalDialogHeader;
diff --git a/src/Modal/ModalLayer.jsx b/src/Modal/ModalLayer.tsx
similarity index 79%
rename from src/Modal/ModalLayer.jsx
rename to src/Modal/ModalLayer.tsx
index 1cc38cf0f4..dc74923403 100644
--- a/src/Modal/ModalLayer.jsx
+++ b/src/Modal/ModalLayer.tsx
@@ -6,7 +6,7 @@ import Portal from './Portal';
import { ModalContextProvider } from './ModalContext';
// istanbul ignore next
-function ModalBackdrop({ onClick }) {
+function ModalBackdrop({ onClick }: { onClick?: () => void }) {
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
{children}
;
}
@@ -35,9 +31,18 @@ ModalContentContainer.propTypes = {
children: PropTypes.node,
};
-ModalContentContainer.defaultProps = {
- children: null,
-};
+interface Props {
+ /** Specifies the contents of the modal */
+ children: React.ReactNode;
+ /** A callback function for when the modal is dismissed */
+ onClose: () => void;
+ /** Is the modal dialog open or closed */
+ isOpen: boolean;
+ /** Prevent clicking on the backdrop or pressing Esc to close the modal */
+ isBlocking?: boolean;
+ /** Specifies the z-index of the modal */
+ zIndex?: number;
+}
/**
* The ModalLayer should be used for any component that wishes to engage the user
@@ -46,8 +51,8 @@ ModalContentContainer.defaultProps = {
* component is that if a modal object is visible then it is "enabled"
*/
function ModalLayer({
- children, onClose, isOpen, isBlocking, zIndex,
-}) {
+ children, onClose, isOpen, isBlocking = false, zIndex,
+}: Props) {
useEffect(() => {
if (isOpen) {
document.body.classList.add('pgn__hidden-scroll-padding-right');
@@ -63,7 +68,7 @@ function ModalLayer({
return null;
}
- const handleClose = isBlocking ? null : onClose;
+ const handleClose = isBlocking ? undefined : onClose;
return (
@@ -102,10 +107,5 @@ ModalLayer.propTypes = {
zIndex: PropTypes.number,
};
-ModalLayer.defaultProps = {
- isBlocking: false,
- zIndex: undefined,
-};
-
export { ModalBackdrop, ModalContentContainer };
export default ModalLayer;
diff --git a/src/Modal/Portal.jsx b/src/Modal/Portal.tsx
similarity index 80%
rename from src/Modal/Portal.jsx
rename to src/Modal/Portal.tsx
index cf30fa1c30..d06dc2aa5e 100644
--- a/src/Modal/Portal.jsx
+++ b/src/Modal/Portal.tsx
@@ -1,9 +1,16 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-class Portal extends React.Component {
- constructor(props) {
+interface Props {
+ children: React.ReactNode;
+}
+
+class Portal extends React.Component {
+ private rootName: string;
+
+ private rootElement: HTMLElement | null;
+
+ constructor(props: Props) {
super(props);
this.rootName = 'paragon-portal-root';
// istanbul ignore if
@@ -31,8 +38,4 @@ class Portal extends React.Component {
}
}
-Portal.propTypes = {
- children: PropTypes.node.isRequired,
-};
-
export default Portal;
diff --git a/src/Modal/tests/ModalDialog.test.jsx b/src/Modal/tests/ModalDialog.test.tsx
similarity index 80%
rename from src/Modal/tests/ModalDialog.test.jsx
rename to src/Modal/tests/ModalDialog.test.tsx
index 790e162c90..6590c85074 100644
--- a/src/Modal/tests/ModalDialog.test.jsx
+++ b/src/Modal/tests/ModalDialog.test.tsx
@@ -3,16 +3,6 @@ import { render, screen } from '@testing-library/react';
import ModalDialog from '../ModalDialog';
-jest.mock('../ModalLayer', () => function ModalLayerMock(props) {
- // eslint-disable-next-line react/prop-types
- const { children, ...otherProps } = props;
- return (
-
- {children}
-
- );
-});
-
describe('ModalDialog', () => {
it('renders a dialog with aria-label and content', () => {
const onClose = jest.fn();
@@ -46,6 +36,22 @@ describe('ModalDialog', () => {
expect(dialogNode).toHaveAttribute('aria-label', 'My dialog');
expect(screen.getByText('The content')).toBeInTheDocument();
});
+
+ it('is hidden by default', () => {
+ const onClose = jest.fn();
+ render(
+
+ The title
+ The hidden content
+ Cancel
+ ,
+ );
+
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+ });
});
describe('ModalDialog with Hero', () => {
diff --git a/src/Modal/tests/ModalLayer.test.jsx b/src/Modal/tests/ModalLayer.test.tsx
similarity index 90%
rename from src/Modal/tests/ModalLayer.test.jsx
rename to src/Modal/tests/ModalLayer.test.tsx
index bc93b66013..f316086cea 100644
--- a/src/Modal/tests/ModalLayer.test.jsx
+++ b/src/Modal/tests/ModalLayer.test.tsx
@@ -6,12 +6,11 @@ import userEvent from '@testing-library/user-event';
import ModalLayer from '../ModalLayer';
/* eslint-disable react/prop-types */
-jest.mock('../Portal', () => function PortalMock(props) {
+jest.mock('../Portal', () => function PortalMock(props: any) {
const { children, ...otherProps } = props;
return (
-
- {children}
-
+ // @ts-ignore this fake element. (Property 'paragon-portal' does not exist on type 'JSX.IntrinsicElements')
+ {children}
);
});
@@ -19,6 +18,7 @@ jest.mock('react-focus-on', () => ({
FocusOn: jest.fn().mockImplementation((props) => {
const { children, ...otherProps } = props;
return (
+ // @ts-ignore this fake element. (Property 'focus-on' does not exist on type 'JSX.IntrinsicElements')
{children}
);
}),
@@ -117,7 +117,7 @@ describe('', () => {
);
expect(FocusOn).toHaveBeenCalledWith(
expect.objectContaining({
- onEscapeKey: null,
+ onEscapeKey: undefined,
}),
// note: this 2nd function argument represents the
// `refOrContext` (in this case, the context value
diff --git a/src/Modal/tests/Portal.test.jsx b/src/Modal/tests/Portal.test.tsx
similarity index 83%
rename from src/Modal/tests/Portal.test.jsx
rename to src/Modal/tests/Portal.test.tsx
index 0f3ec32d70..7cda3ac9e0 100644
--- a/src/Modal/tests/Portal.test.jsx
+++ b/src/Modal/tests/Portal.test.tsx
@@ -21,7 +21,7 @@ describe('', () => {
const portalRoot = getPortalRoot();
expect(portalRoot).not.toBeNull();
- expect(portalRoot.children[0].id).toBe('portal-content-a');
+ expect(portalRoot!.children[0].id).toBe('portal-content-a');
});
it('renders both contents in a single #paragon-portal-root div', () => {
@@ -38,7 +38,7 @@ describe('', () => {
const portalRoot = getPortalRoot();
expect(portalRoot).not.toBeNull();
- expect(portalRoot.children[0].id).toBe('portal-content-a');
- expect(portalRoot.children[1].id).toBe('portal-content-b');
+ expect(portalRoot!.children[0].id).toBe('portal-content-a');
+ expect(portalRoot!.children[1].id).toBe('portal-content-b');
});
});
diff --git a/src/Truncate/Truncate.test.js b/src/Truncate/utils.test.js
similarity index 100%
rename from src/Truncate/Truncate.test.js
rename to src/Truncate/utils.test.js
diff --git a/src/hooks/useArrowKeyNavigation.jsx b/src/hooks/useArrowKeyNavigation.jsx
index 69b3bb6cbc..bdfe258b2f 100644
--- a/src/hooks/useArrowKeyNavigation.jsx
+++ b/src/hooks/useArrowKeyNavigation.jsx
@@ -32,8 +32,7 @@ function handleArrowKey({ event, currentIndex, availableElements }) {
[nextElement] = availableElements;
}
- // eslint-disable-next-line no-unused-expressions
- nextElement && nextElement.focus();
+ nextElement?.focus();
event.preventDefault();
}
diff --git a/src/index.d.ts b/src/index.d.ts
index a680a1ac86..217ee12a89 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -8,10 +8,15 @@ export { default as Bubble } from './Bubble';
export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
export { default as Chip, CHIP_PGN_CLASS } from './Chip';
export { default as ChipCarousel } from './ChipCarousel';
+export { default as Container, ContainerSize } from './Container';
export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
export { default as Icon } from './Icon';
export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as ModalContext } from './Modal/ModalContext';
+export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalLayer } from './Modal/ModalLayer';
export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Portal } from './Modal/Portal';
export { default as Tooltip } from './Tooltip';
// // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -38,10 +43,11 @@ export const
export const
Carousel: any, CarouselItem: any, CAROUSEL_NEXT_LABEL_TEXT: any, CAROUSEL_PREV_LABEL_TEXT: any;
// from './Carousel';
+/** @deprecated Replaced by `Form.Checkbox`. */
export const CheckBox: any; // from './CheckBox';
+/** @deprecated Replaced by `Form.Checkbox` and `Form.CheckboxSet`. */
export const CheckBoxGroup: any; // from './CheckBoxGroup';
export const CloseButton: any; // from './CloseButton';
-export const Container: any; // from './Container';
export const Layout: any, Col: any, Row: any; // from './Layout';
export const Collapse: any; // from './Collapse';
export const Collapsible: any; // from './Collapsible';
@@ -53,6 +59,7 @@ export const
SplitButton: any;
// from './Dropdown';
export const Fade: any; // from './Fade';
+/** @deprecated */
export const Fieldset: any; // from './Fieldset';
export const
Form: any,
@@ -77,28 +84,30 @@ export const
InputGroup: any;
// from './Form';
export const IconButtonToggle: any; // from './IconButtonToggle';
+/** @deprecated Replaced by `Form.Control`. */
export const Input: any; // from './Input';
+/** @deprecated Replaced by `Form.Control`. */
export const InputSelect: any; // from './InputSelect';
+/** @deprecated Replaced by `Form.Control`. */
export const InputText: any; // from './InputText';
export const Image: any, Figure; // from './Image';
+/** @deprecated */
export const ListBox: any; // from './ListBox';
+/** @deprecated */
export const ListBoxOption: any; // from './ListBoxOption';
export const MailtoLink: any, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT: string, MAIL_TO_LINK_EXTERNAL_LINK_TITLE: string; // from './MailtoLink';
export const Media: any; // from './Media';
export const Menu: any; // from './Menu';
export const MenuItem: any; // from './Menu/MenuItem';
export const SelectMenu: any, SELECT_MENU_DEFAULT_MESSAGE: string; // from './Menu/SelectMenu';
+/** @deprecated Use `ModalDialog` instead. */
export const Modal: any; // from './Modal';
export const ModalCloseButton: any; // from './Modal/ModalCloseButton';
export const FullscreenModal: any, FULLSCREEN_MODAL_CLOSE_LABEL: string; // from './Modal/FullscreenModal';
export const MarketingModal: any; // from './Modal/MarketingModal';
export const StandardModal: any, STANDARD_MODAL_CLOSE_LABEL: string; // from './Modal/StandardModal';
export const AlertModal: any; // from './Modal/AlertModal';
-export const ModalLayer: any; // from './Modal/ModalLayer';
-export const ModalDialog: any, MODAL_DIALOG_CLOSE_LABEL: string; // from './Modal/ModalDialog';
export const ModalPopup: any; // from './Modal/ModalPopup';
-export const ModalContext: any; // from './Modal/ModalContext';
-export const Portal: any; // from './Modal/Portal';
export const PopperElement: any; // from './Modal/PopperElement';
export const
@@ -122,6 +131,7 @@ export const
export const Popover: any, PopoverTitle: any, PopoverContent: any; // from './Popover';
export const ProgressBar: any; // from './ProgressBar';
export const ProductTour: any; // from './ProductTour';
+/** @deprecated Replaced by `Form.Radio` and `Form.RadioSet`. */
export const RadioButtonGroup: any, RadioButton: any; // from './RadioButtonGroup';
export const ResponsiveEmbed: any; // from './ResponsiveEmbed';
export const
@@ -135,7 +145,9 @@ export const Sheet: any; // from './Sheet';
export const Spinner: any; // from './Spinner';
export const Stepper: any; // from './Stepper';
export const StatefulButton: any; // from './StatefulButton';
+/** @deprecated Replaced by `Alert`. */
export const StatusAlert: any; // from './StatusAlert';
+/** @deprecated Replaced by `DataTable`. */
export const Table: any; // from './Table';
export const
Tabs: any,
@@ -144,8 +156,10 @@ export const
TabContent: any,
TabPane: any;
// from './Tabs';
+/** @deprecated Replaced by `Form.Control`. */
export const TextArea: any; // from './TextArea';
export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
+/** @deprecated Replaced by `Form.Group`. */
export const ValidationFormGroup: any; // from './ValidationFormGroup';
export const TransitionReplace: any; // from './TransitionReplace';
export const ValidationMessage: any; // from './ValidationMessage';
diff --git a/src/index.js b/src/index.js
index 7d226367f0..67ccb2a7c9 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,10 +8,15 @@ export { default as Bubble } from './Bubble';
export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
export { default as Chip, CHIP_PGN_CLASS } from './Chip';
export { default as ChipCarousel } from './ChipCarousel';
+export { default as Container } from './Container';
export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
export { default as Icon } from './Icon';
export { default as IconButton, IconButtonWithTooltip } from './IconButton';
+export { default as ModalContext } from './Modal/ModalContext';
+export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalLayer } from './Modal/ModalLayer';
export { default as Overlay, OverlayTrigger } from './Overlay';
+export { default as Portal } from './Modal/Portal';
export { default as Tooltip } from './Tooltip';
// // // // // // // // // // // // // // // // // // // // // // // // // // //
@@ -39,7 +44,6 @@ export {
default as Carousel, CarouselItem, CAROUSEL_NEXT_LABEL_TEXT, CAROUSEL_PREV_LABEL_TEXT,
} from './Carousel';
export { default as CloseButton } from './CloseButton';
-export { default as Container } from './Container';
export { default as Layout, Col, Row } from './Layout';
export { default as Collapse } from './Collapse';
export { default as Collapsible } from './Collapsible';
@@ -85,11 +89,7 @@ export { default as FullscreenModal, FULLSCREEN_MODAL_CLOSE_LABEL } from './Moda
export { default as MarketingModal } from './Modal/MarketingModal';
export { default as StandardModal, STANDARD_MODAL_CLOSE_LABEL } from './Modal/StandardModal';
export { default as AlertModal } from './Modal/AlertModal';
-export { default as ModalLayer } from './Modal/ModalLayer';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
export { default as ModalPopup } from './Modal/ModalPopup';
-export { default as ModalContext } from './Modal/ModalContext';
-export { default as Portal } from './Modal/Portal';
export { default as PopperElement } from './Modal/PopperElement';
export {
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 920c37bcae..b4586548d2 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -3,8 +3,10 @@
"compilerOptions": {
// For build purposes, we use TypeScript/tsc to generate the .d.ts files and Babel to convert .tsx/.ts/.jsx to .js
// In the future we could probably just use tsc for both though.
- "emitDeclarationOnly": true
+ "emitDeclarationOnly": true,
+ "rootDir": "src"
},
+ "include": ["src"],
// Don't include the .test.tsx files when we build the .d.ts files in dist/
"exclude": ["src/**/*.test.tsx"],
}
diff --git a/tsconfig.json b/tsconfig.json
index 42f8fd340c..221d37c37c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,8 +3,17 @@
"compilerOptions": {
"noImplicitAny": true,
"allowJs": false,
- "rootDir": "src",
"outDir": "dist"
},
- "include": ["src"]
+ "include": [
+ "lib/**/*",
+ "src/**/*",
+ "*.js",
+ ".eslintrc.js",
+ "__mocks__/*",
+ "algolia-docsearch/*",
+ "bin/*",
+ "dependent-usage-analyzer/**/*",
+ "tokens/**/*",
+ ]
}
diff --git a/www/src/components/LeaveFeedback.tsx b/www/src/components/LeaveFeedback.tsx
index dc39cbb466..d446cc391b 100644
--- a/www/src/components/LeaveFeedback.tsx
+++ b/www/src/components/LeaveFeedback.tsx
@@ -1,6 +1,6 @@
import React, { AnchorHTMLAttributes } from 'react';
import PropTypes from 'prop-types';
-import { useLocation } from '@reach/router';
+import { useLocation } from '@gatsbyjs/reach-router';
import { Nav, Button, Hyperlink } from '~paragon-react';
import { LEAVE_FEEDBACK_CLICKED_EVENT, sendUserAnalyticsEvent } from '../../segment-events';
diff --git a/www/src/components/Menu.tsx b/www/src/components/Menu.tsx
index db01b84e87..2e2efdb7fa 100644
--- a/www/src/components/Menu.tsx
+++ b/www/src/components/Menu.tsx
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
-import { useLocation } from '@reach/router';
+import { useLocation } from '@gatsbyjs/reach-router';
import PropTypes from 'prop-types';
import { Link, graphql, useStaticQuery } from 'gatsby';
import classNames from 'classnames';
diff --git a/www/src/context/SettingsContext.tsx b/www/src/context/SettingsContext.tsx
index 777c3a73bb..156ae8f3f3 100644
--- a/www/src/context/SettingsContext.tsx
+++ b/www/src/context/SettingsContext.tsx
@@ -2,7 +2,7 @@ import React, { createContext, useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { IntlProvider } from 'react-intl';
-import { messages } from '~paragon-react';
+import { messages, type ContainerSize } from '~paragon-react';
import { THEMES, DEFAULT_THEME } from '../../theme-config';
import { SETTINGS_EVENTS, sendUserAnalyticsEvent } from '../../segment-events';
@@ -12,7 +12,7 @@ export interface IDefaultValue {
theme?: string,
direction?: string,
language?: string,
- containerWidth?: string,
+ containerWidth?: ContainerSize,
},
theme?: string,
handleSettingsChange: Function,
@@ -35,7 +35,7 @@ function SettingsContextProvider({ children }) {
theme: DEFAULT_THEME,
direction: 'ltr',
language: 'en',
- containerWidth: 'md',
+ containerWidth: 'md' as ContainerSize,
});
const [showSettings, setShowSettings] = useState(false);
diff --git a/www/tsconfig.json b/www/tsconfig.json
index d89fffb832..49e1386c5c 100644
--- a/www/tsconfig.json
+++ b/www/tsconfig.json
@@ -10,5 +10,5 @@
"~paragon-icons": ["../icons"],
}
},
- "include": ["src"]
+ "include": ["src", "playroom", "utils", "netlify", ".eslintrc.js", "*.js", "*.ts", "*.jsx", "*.tsx"]
}