@indico-data/design-system 2.45.6 → 2.47.0

package/src/legacy/components/modals/ModalBase/ModalBase.styles.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import ReactModal from 'react-modal';
-import styled from 'styled-components';
-
-// see: https://github.com/reactjs/react-modal/issues/603
-function ModalAdapter(props: any): React.ReactElement {
-  const { className } = props;
-  const contentClassName = `${className}__content`;
-  const overlayClassName = `${className}__overlay`;
-
-  return (
-    <ReactModal
-      {...props}
-      portalClassName={className}
-      className={contentClassName}
-      overlayClassName={overlayClassName}
-      closeTimeoutMS={120}
-      appElement={document.getElementById(props.node || 'root')}
-    >
-      <div className="modal-content">{props.children}</div>
-    </ReactModal>
-  );
-}
-
-export const StyledModalBase = styled(ModalAdapter)`
-  .modal-content {
-    background-color: var(--pf-primary-color-600);
-    padding: var(--pf-padding-4);
-    border-radius: var(--pf-rounded-lg);
-  }
-
-  .${(props) => props.className}__content {
-    position: absolute;
-    top: 70px;
-    left: 50%;
-    transform: translateX(-50%);
-
-    overflow: visible;
-    padding: 0;
-
-    border-radius: 4px;
-    outline: none;
-
-    width: ${(props) => (props.maxWidth ? '100%' : 'auto')};
-    max-width: ${(props) => props.maxWidth || 'none'};
-  }
-
-  .${(props) => props.className}__overlay {
-    z-index: 900;
-    position: absolute;
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: 100%;
-  }
-
-  .ReactModal__Overlay {
-    opacity: 0;
-    background-color: rgba(0, 0, 0, 0.5);
-    transition: opacity 120ms ease-in-out;
-  }
-
-  .ReactModal__Overlay--after-open {
-    opacity: 1;
-    position: fixed;
-  }
-
-  .ReactModal__Overlay--before-close {
-    opacity: 0;
-  }
-`;

package/src/legacy/components/modals/ModalBase/ModalBase.tsx

@@ -1,79 +0,0 @@
-// TODO: This component's migration was fast-tracked for Insights. Assess for potential refactor and documentation.
-
-import React from 'react';
-
-import type { PermafrostComponent } from '../../../../types';
-
-import { StyledModalBase } from './ModalBase.styles';
-
-export type ModalBaseProps = PermafrostComponent & {
-  children: React.ReactNode | React.ReactNode[];
-  clickToDismiss?(): void;
-  describedBy?: string;
-  node?: string;
-  open: boolean;
-  preventEscDismiss?: boolean;
-  preventReturnFocus?: boolean;
-  maxWidth?: string;
-} & ({ labelElement: string } | { labelText: string });
-
-/**
- * Base modal component, powered by [react-modal](http://reactcommunity.org/react-modal/#usage)
- *
- * (Also see `ModalAdapter` in the styles file)
- *
- * Accessible element label must be included either as a string passed to `labelText`, or
- * the id of one of the children passed to `labelElement`. If a description is available,
- * pass that element’s id to the `describedBy` prop.
- */
-export function ModalBase(props: ModalBaseProps) {
-  const {
-    children,
-    className,
-    clickToDismiss,
-    describedBy,
-    id,
-    node,
-    open,
-    preventEscDismiss,
-    preventReturnFocus,
-    maxWidth,
-  } = props;
-
-  const ariaProps = {} as { labelledby?: string; describedby?: string };
-
-  if ('labelElement' in props) {
-    ariaProps['labelledby'] = props.labelElement;
-  }
-
-  if (describedBy) {
-    ariaProps['describedby'] = describedBy;
-  }
-
-  // Try to render modal within the theme-root, otherwise attach to the root
-  const parentSelector = () => {
-    const themeRoot = document.getElementById('theme-root');
-    const root = document.getElementById('root');
-    return themeRoot || root || document.body;
-  };
-
-  return (
-    <StyledModalBase
-      ariaHideApp={false}
-      data-cy={props['data-cy']}
-      aria={ariaProps}
-      className={className || 'baseModal'}
-      contentLabel={'labelText' in props ? props.labelText : null}
-      id={id}
-      isOpen={open}
-      node={node}
-      onRequestClose={clickToDismiss}
-      parentSelector={parentSelector}
-      shouldCloseOnEsc={!preventEscDismiss}
-      shouldReturnFocusAfterClose={!preventReturnFocus}
-      maxWidth={maxWidth}
-    >
-      {children}
-    </StyledModalBase>
-  );
-}

package/src/legacy/components/modals/ModalBase/index.ts

@@ -1,2 +0,0 @@
-export { ModalBase } from './ModalBase';
-export type { ModalBaseProps } from './ModalBase';

package/src/legacy/components/modals/index.ts

@@ -1,2 +0,0 @@
-export { ConfirmModal } from './ConfirmModal';
-export { ModalBase } from './ModalBase';