Skip to content

[pull] main from coreui:main #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 5, 2024
Merged

[pull] main from coreui:main #8

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8730020
feat(CModal): add the `container` property to allow appending the mod…
mrholek Aug 2, 2024
8c66f37
refactor(CDropdown, CPopover, CTooltip): update the `container` prope…
mrholek Aug 2, 2024
9e2ece4
build: update globby to v14.x
mrholek Aug 2, 2024
61da024
chore: clean-up
mrholek Aug 2, 2024
400da15
chore: update dependencies and devDependencies
mrholek Aug 2, 2024
c9f78f3
docs: update API documentation
mrholek Aug 2, 2024
6892858
release: v5.3.0
mrholek Aug 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat(CModal): add the container property to allow appending the mod… 
…al to a specific element
  • Loading branch information
@mrholek
mrholek committed Aug 2, 2024
commit 8730020fa8482ef5bbcfd52f98e366809205714d
14 changes: 11 additions & 3 deletions packages/coreui-react/src/components/modal/CModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,14 +31,20 @@ export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
* A string of all className you want applied to the base component.
*/
className?: string
/**
* Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
*
* @since 5.3.0
*/
container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null
/**
* @ignore
*/
duration?: number
/**
* Puts the focus on the modal when shown.
*
* @since v4.10.0
* @since 4.10.0
*/
focus?: boolean
/**
Expand Down Expand Up @@ -101,6 +107,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
alignment,
backdrop = true,
className,
container,
duration = 150,
focus = true,
fullscreen,
Expand Down Expand Up @@ -223,7 +230,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
timeout={transition ? duration : 0}
>
{(state) => (
<CConditionalPortal portal={portal}>
<CConditionalPortal container={container} portal={portal}>
<CModalContext.Provider value={contextValues}>
<div
className={classNames(
Expand Down Expand Up @@ -259,7 +266,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
)}
</Transition>
{backdrop && (
<CConditionalPortal portal={portal}>
<CConditionalPortal container={container} portal={portal}>
<CBackdrop visible={_visible} />
</CConditionalPortal>
)}
Expand All @@ -273,6 +280,7 @@ CModal.propTypes = {
backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]),
children: PropTypes.node,
className: PropTypes.string,
container: PropTypes.any, // HTMLElement
duration: PropTypes.number,
focus: PropTypes.bool,
fullscreen: PropTypes.oneOfType([
Expand Down
3 changes: 2 additions & 1 deletion packages/docs/content/api/CModal.api.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import CModal from '@coreui/react/src/components/modal/CModal'
| **alignment** | Align the modal in the center or top of the screen. | `'top'` \| `'center'` | - |
| **backdrop** | Apply a backdrop on body while modal is open. | `boolean` \| `'static'` | true |
| **className** | A string of all className you want applied to the base component. | `string` | - |
| **focus** **_v4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true |
| **container** **_5.3.0+_** | Appends the react modal to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`. | `Element` \| `DocumentFragment` \| `(() => Element` \| `DocumentFragment)` | - |
| **focus** **_4.10.0+_** | Puts the focus on the modal when shown. | `boolean` | true |
| **fullscreen** | Set modal to covers the entire user viewport. | `boolean` \| `'sm'` \| `'md'` \| `'lg'` \| `'xl'` \| `'xxl'` | - |
| **keyboard** | Closes the modal when escape key is pressed. | `boolean` | true |
| **onClose** | Callback fired when the component requests to be closed. | `() => void` | - |
Expand Down