@truedat/core 8.12.12 → 8.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.12.12",
+  "version": "8.13.0",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -57,7 +57,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.12.12",
+    "@truedat/test": "8.13.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -99,5 +99,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "b6e3413dae81b2e28e98a21cf371174caa30ab4b"
+  "gitHead": "b9d1c2133cea6293e6a5ce5d198a4cd49133b4c1"
 }

package/src/components/TrueModal.js

@@ -0,0 +1,137 @@
+import { useId } from "react";
+import PropTypes from "prop-types";
+import { useIntl, FormattedMessage } from "react-intl";
+import { Button, Icon, Modal } from "semantic-ui-react";
+import _ from "lodash/fp";
+
+const bannerIcons = {
+  warning: "warning sign",
+  danger: "times circle",
+  success: "check circle",
+  info: "info circle",
+};
+
+export const TrueModal = ({
+  title,
+  subtitle,
+  icon,
+  headerColor,
+  headerTextColor,
+  children,
+  banner,
+  bannerType = "warning",
+  bannerIcon,
+  actions,
+  footer,
+  onCancel,
+  onCreate,
+  className,
+  ...modalProps
+}) => {
+  const titleId = useId();
+  const { formatMessage } = useIntl();
+  const defaultActions = _.compact([
+    onCancel && {
+      key: "cancel",
+      content: <FormattedMessage id="actions.cancel" defaultMessage="Cancel" />,
+      secondary: true,
+      onClick: onCancel,
+    },
+    onCreate && {
+      key: "create",
+      content: <FormattedMessage id="actions.create" defaultMessage="Create" />,
+      primary: true,
+      onClick: onCreate,
+    },
+  ]);
+  const resolvedActions = actions?.length ? actions : defaultActions;
+
+  return (
+    <Modal
+      {..._.omit(["header", "content", "closeIcon"])(modalProps)}
+      className={_.compact(["true-modal", className]).join(" ")}
+      role="dialog"
+      aria-labelledby={
+        modalProps["aria-labelledby"] ||
+        (modalProps["aria-label"] ? undefined : titleId)
+      }
+      closeIcon={
+        <button
+          type="button"
+          className="true-modal-close"
+          style={{ color: headerTextColor }}
+          aria-label={formatMessage({
+            id: "actions.close",
+            defaultMessage: "Close",
+          })}
+        >
+          &times;
+        </button>
+      }
+    >
+      <Modal.Header style={{ background: headerColor, color: headerTextColor }}>
+        {icon ? <Icon name={icon} size="large" /> : null}
+        <div className="true-modal-heading">
+          <span id={titleId}>{title}</span>
+          {subtitle != null ? (
+            <p className="true-modal-subtitle">{subtitle}</p>
+          ) : null}
+        </div>
+      </Modal.Header>
+      <Modal.Content className="true-modal-content">{children}</Modal.Content>
+      {banner != null && banner !== false ? (
+        <div className={`true-modal-banner ${bannerType}`}>
+          <Icon name={bannerIcon || bannerIcons[bannerType]} />
+          <div>{banner}</div>
+        </div>
+      ) : null}
+      {footer != null ? (
+        footer
+      ) : resolvedActions.length ? (
+        <Modal.Actions className="true-modal-actions">
+          {resolvedActions.map(({ key, disabled, loading, ...buttonProps }) => (
+            <Button
+              key={key}
+              type="button"
+              {...buttonProps}
+              disabled={disabled || loading}
+              loading={loading}
+            />
+          ))}
+        </Modal.Actions>
+      ) : null}
+    </Modal>
+  );
+};
+
+TrueModal.propTypes = {
+  title: PropTypes.node.isRequired,
+  subtitle: PropTypes.node,
+  icon: PropTypes.string,
+  headerColor: PropTypes.string,
+  headerTextColor: PropTypes.string,
+  children: PropTypes.node,
+  banner: PropTypes.node,
+  bannerType: PropTypes.oneOf(["warning", "danger", "success", "info"]),
+  bannerIcon: PropTypes.string,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string.isRequired,
+      content: PropTypes.node,
+      onClick: PropTypes.func,
+      disabled: PropTypes.bool,
+      loading: PropTypes.bool,
+      primary: PropTypes.bool,
+      secondary: PropTypes.bool,
+      negative: PropTypes.bool,
+      type: PropTypes.string,
+      "aria-label": PropTypes.string,
+    }),
+  ),
+  footer: PropTypes.node,
+  onCancel: PropTypes.func,
+  onCreate: PropTypes.func,
+  className: PropTypes.string,
+};
+
+export default TrueModal;

package/src/components/__tests__/TrueModal.spec.js

@@ -0,0 +1,193 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import { TrueModal } from "../index";
+
+const setupUser = () =>
+  userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+const renderModal = (props = {}) =>
+  render(<TrueModal open title="Title" {...props} />);
+
+describe("<TrueModal />", () => {
+  it("renders accessible content and preserves consumer classes and size", () => {
+    renderModal({
+      subtitle: "Subtitle",
+      icon: "rocket",
+      children: <p>Content</p>,
+      className: "custom-modal",
+      size: "large",
+      header: "Wrong header",
+      content: "Wrong content",
+      closeIcon: false,
+    });
+    const dialog = screen.getByRole("dialog", { name: "Title" });
+    expect(dialog).toHaveClass("true-modal", "custom-modal", "large");
+    expect(screen.getByText("Subtitle")).toBeInTheDocument();
+    expect(screen.getByText("Content")).toBeInTheDocument();
+    expect(dialog.querySelector(".rocket.icon")).toBeInTheDocument();
+    expect(screen.queryByText(/Wrong/)).not.toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+    expect(dialog.querySelector(".actions")).not.toBeInTheDocument();
+    expect(dialog.querySelector(".true-modal-banner")).not.toBeInTheDocument();
+  });
+
+  it.each([
+    [{ headerColor: "#123456" }, { background: "#123456" }],
+    [{ headerTextColor: "#ffffff" }, { color: "#ffffff" }],
+  ])("applies independent header colors %o", (props, style) => {
+    renderModal(props);
+    expect(screen.getByText("Title").closest(".header")).toHaveStyle(style);
+  });
+
+  it.each([
+    ["warning", "warning.sign"],
+    ["danger", "times.circle"],
+    ["success", "check.circle"],
+    ["info", "info.circle"],
+  ])("renders %s banner", (bannerType, iconClass) => {
+    renderModal({ bannerType, banner: <strong>Notice</strong> });
+    const banner = screen.getByText("Notice").closest(".true-modal-banner");
+    expect(banner).toHaveClass(bannerType);
+    expect(banner.querySelector(`.${iconClass}.icon`)).toBeInTheDocument();
+  });
+
+  it("supports a custom banner icon and an explicit accessible name", () => {
+    renderModal({
+      banner: "Notice",
+      bannerIcon: "rocket",
+      "aria-label": "Custom",
+    });
+    const dialog = screen.getByRole("dialog", { name: "Custom" });
+    expect(dialog).not.toHaveAttribute("aria-labelledby");
+    expect(
+      dialog.querySelector(".true-modal-banner .rocket.icon"),
+    ).toBeInTheDocument();
+  });
+
+  it.each([undefined, []])(
+    "resolves default callbacks for actions %o",
+    async (actions) => {
+      const onCancel = jest.fn();
+      const onCreate = jest.fn();
+      const onClose = jest.fn();
+      renderModal({ actions, onCancel, onCreate, onClose });
+      const user = setupUser();
+      await user.click(screen.getByRole("button", { name: "Cancel" }));
+      await user.click(screen.getByRole("button", { name: "Create" }));
+      expect(onCancel).toHaveBeenCalledTimes(1);
+      expect(onCreate).toHaveBeenCalledTimes(1);
+      expect(onClose).not.toHaveBeenCalled();
+    },
+  );
+
+  it.each(["onCancel", "onCreate"])(
+    "renders only the supplied %s callback",
+    (callback) => {
+      renderModal({ [callback]: jest.fn() });
+      expect(screen.getAllByRole("button")).toHaveLength(2);
+    },
+  );
+
+  it("renders three actions and blocks disabled and loading callbacks", async () => {
+    const onClick = jest.fn();
+    renderModal({
+      actions: [
+        { key: "one", content: "One", onClick },
+        { key: "two", content: "Two", disabled: true, onClick },
+        {
+          key: "three",
+          content: "Three",
+          loading: true,
+          disabled: false,
+          onClick,
+          type: "submit",
+        },
+      ],
+    });
+    const user = setupUser();
+    expect(screen.getByRole("button", { name: "One" })).toHaveAttribute(
+      "type",
+      "button",
+    );
+    expect(screen.getByRole("button", { name: "Two" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Three" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Three" })).toHaveClass(
+      "loading",
+    );
+    expect(screen.getByRole("button", { name: "Three" })).toHaveAttribute(
+      "type",
+      "submit",
+    );
+    await user.click(screen.getByRole("button", { name: "Two" }));
+    await user.click(screen.getByRole("button", { name: "Three" }));
+    expect(onClick).not.toHaveBeenCalled();
+    await user.click(screen.getByRole("button", { name: "One" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("gives custom footer precedence over both configured and default actions", () => {
+    renderModal({
+      footer: <button type="button">Custom</button>,
+      actions: [{ key: "one", content: "One" }],
+      onCancel: jest.fn(),
+    });
+    expect(screen.getByRole("button", { name: "Custom" })).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "One" }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: "Cancel" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it.each(["button", "escape", "overlay"])(
+    "closes through %s with the native callback contract",
+    async (method) => {
+      const onOpen = jest.fn();
+      const onClose = jest.fn();
+      render(
+        <TrueModal
+          title="Title"
+          trigger={<button type="button">Open</button>}
+          onOpen={onOpen}
+          onClose={onClose}
+        />,
+      );
+      const user = setupUser();
+      await user.click(screen.getByRole("button", { name: "Open" }));
+      expect(onOpen).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ open: true }),
+      );
+      if (method === "button")
+        await user.click(screen.getByRole("button", { name: "Close" }));
+      if (method === "escape") await user.keyboard("{Escape}");
+      if (method === "overlay")
+        await user.click(screen.getByRole("dialog").parentElement);
+      expect(onClose).toHaveBeenCalledTimes(1);
+      expect(onClose).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ open: false }),
+      );
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    },
+  );
+
+  it("respects controlled open and disabled Escape and overlay closing", async () => {
+    const onClose = jest.fn();
+    const { rerender } = renderModal({
+      onClose,
+      closeOnEscape: false,
+      closeOnDimmerClick: false,
+    });
+    const user = setupUser();
+    await user.keyboard("{Escape}");
+    await user.click(screen.getByRole("dialog").parentElement);
+    expect(onClose).not.toHaveBeenCalled();
+    await user.click(screen.getByRole("button", { name: "Close" }));
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    rerender(<TrueModal open={false} title="Title" />);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+});

package/src/components/index.js

@@ -1,3 +1,4 @@
+import TrueModal from "./TrueModal";
 import ActiveRoute from "./ActiveRoute";
 import AdminMenu from "./AdminMenu";
 import Alert from "./Alert";
@@ -120,6 +121,7 @@ export {
   TaxonomyMenu,
   TemplateSelector,
   TreeSelector,
+  TrueModal,
   Unauthorized,
   UploadModal,
 };

package/src/styles/ModalEffects.less

@@ -0,0 +1,43 @@
+.ui.modal.active {
+  animation: modal-appear 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes modal-appear {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui.modal.active {
+    animation-duration: 80ms;
+  }
+}
+
+.ui.modals.dimmer {
+  background-color: rgba(0, 0, 0, 0.55);
+  -webkit-backdrop-filter: blur(3px);
+  backdrop-filter: blur(3px);
+}
+
+.ui.modals.dimmer.active {
+  animation: modal-backdrop-appear 240ms ease-out;
+}
+
+@keyframes modal-backdrop-appear {
+  from {
+    background-color: rgba(0, 0, 0, 0);
+  }
+  to {
+    background-color: rgba(0, 0, 0, 0.55);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui.modals.dimmer.active {
+    animation-duration: 80ms;
+  }
+}

package/src/styles/TrueModal.less

@@ -0,0 +1,138 @@
+@import "./ModalEffects.less";
+
+.ui.modal.true-modal {
+  display: flex !important;
+  flex-direction: column;
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+  max-height: calc(100dvh - 2rem);
+  padding: 0;
+  border: 0;
+  border-radius: 1rem;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.2),
+    0 8px 10px -6px rgba(0, 0, 0, 0.15);
+
+  > .header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-shrink: 0;
+    padding: 1.5rem 3.5rem 1rem 1.5rem;
+    border-radius: 1rem 1rem 0 0;
+    border-bottom: 0;
+    background: @primaryColor;
+    color: #f8fafc;
+
+    > .icon {
+      margin: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  .true-modal-heading {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .true-modal-subtitle {
+    font-size: 0.75rem;
+    font-weight: 400;
+    color: inherit;
+    margin: 0.15rem 0 0;
+  }
+
+  > .true-modal-close {
+    position: absolute;
+    top: 1.25rem;
+    right: 1rem;
+    padding: 6px;
+    border: none;
+    border-radius: 0.5rem;
+    background: none;
+    color: #f8fafc;
+    cursor: pointer;
+    font-size: 1.25rem;
+    line-height: 1;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+  }
+
+  > .content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 1.625rem 1.5rem 2rem;
+  }
+
+  > .actions {
+    display: flex;
+    flex-wrap: wrap;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.5rem;
+    padding-bottom: 1rem !important;
+    border-radius: 0 0 1rem 1rem;
+    border-top: 1px solid #e2e8f0;
+    background: #f8fafc;
+
+    .button {
+      margin: 0;
+    }
+  }
+
+  .true-modal-banner {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 0.625rem;
+    margin: 0 1.5rem 1rem;
+    padding: 0.75rem;
+    border-radius: 0.375rem;
+    border: 1px solid;
+    overflow-wrap: anywhere;
+
+    > .icon {
+      margin: 0;
+      flex-shrink: 0;
+    }
+
+    > div {
+      min-width: 0;
+    }
+
+    &.warning {
+      background: #fffbeb;
+      border-color: #fde68a;
+      color: #78350f;
+    }
+
+    &.danger {
+      background: #fef2f2;
+      border-color: #fecaca;
+      color: #991b1b;
+    }
+
+    &.success {
+      background: #f0fdf4;
+      border-color: #bbf7d0;
+      color: #166534;
+    }
+
+    &.info {
+      background: #eff6ff;
+      border-color: #bfdbfe;
+      color: #1e40af;
+    }
+  }
+}