@databiosphere/findable-ui 50.7.0 → 50.7.1

package/src/components/common/EllipsisContent/ellipsisContent.tsx

@@ -1,204 +0,0 @@
-import { JSX, ReactNode, useEffect, useRef, useState } from "react";
-import {
-  getBorderBoxSizeHeight,
-  useResizeObserver,
-} from "../../../hooks/useResizeObserver";
-import { Button, Content } from "./ellipsisContent.styles";
-
-enum EllipsisMode {
-  "NONE" = "NONE",
-  "OFF" = "OFF",
-  "ON" = "ON",
-}
-
-export interface OverviewDescriptionProps {
-  children: ReactNode | ReactNode[];
-  maxLineCount: number;
-}
-
-export const EllipsisContent = ({
-  children,
-  maxLineCount,
-}: OverviewDescriptionProps): JSX.Element => {
-  const ellipsisRef = useRef<HTMLDivElement>(null);
-  const { height } =
-    useResizeObserver(ellipsisRef, getBorderBoxSizeHeight) || {};
-  const [ellipsisMode, setEllipsisMode] = useState<EllipsisMode | undefined>();
-  const isEllipsis = ellipsisMode === EllipsisMode.ON;
-
-  /**
-   * Updates the state of ellipsis mode by toggling between "ON" and "OFF" values.
-   */
-  const onToggleMode = (): void => {
-    setEllipsisMode((currentMode) => {
-      if (currentMode === EllipsisMode.ON) {
-        return EllipsisMode.OFF;
-      }
-      return EllipsisMode.ON;
-    });
-  };
-
-  /**
-   * Ellipsis mode state is initialized to "NONE" only when the component mounts,
-   * so we guarantee that `ellipsisRef` gets the element handle for resize observer hook.
-   */
-  useEffect(() => {
-    setEllipsisMode(EllipsisMode.NONE);
-  }, []);
-
-  /**
-   * Ellipsis mode state updates with changes to the rendered content height.
-   */
-  useEffect(() => {
-    setEllipsisMode((currentMode) => {
-      return getEllipsisMode(ellipsisRef.current, maxLineCount, currentMode);
-    });
-  }, [height, maxLineCount]);
-
-  return (
-    <>
-      <Content
-        ref={ellipsisRef}
-        isEllipsis={isEllipsis}
-        maxLineCount={maxLineCount}
-      >
-        <div>{children}</div>
-      </Content>
-      {isModeActivated(ellipsisMode) && (
-        <Button onClick={onToggleMode}>{getModeText(ellipsisMode)}</Button>
-      )}
-    </>
-  );
-};
-
-/**
- * Returns the calculated line count of text rendered within the given element.
- * @param element - Element observed by resize observer (ellipsis container).
- * @returns line count of text rendered.
- */
-function calculateRenderedLineCount(
-  element: HTMLDivElement | null,
-): number | undefined {
-  if (!element) {
-    return;
-  }
-  // Grab the DOMRects for the text nodes within the element.
-  const DOMRects = getTextNodeDOMRects(element).sort(sortDOMRects);
-  if (DOMRects.length === 0) {
-    return;
-  }
-  // Set the first bounding rect as the initial y1 and y2 values.
-  let lineCount = 1;
-  let y1 = DOMRects[0].top;
-  let y2 = DOMRects[0].bottom;
-  // Keeping a track of the upper and lower positional threshold of each line, we are going to test each bounding rect
-  // to see if it falls within the threshold of the current line. If it does, we skip it. If it doesn't, we increment
-  // the line count and update the threshold values.
-  for (const rect of DOMRects) {
-    const { bottom, top } = rect;
-    if (top >= y1 && bottom <= y2) {
-      continue;
-    }
-    y1 = top;
-    y2 = bottom;
-    lineCount++;
-  }
-  return lineCount;
-}
-
-/**
- * Returns one of the following ellipsis mode for the content:
- * - "ON" - paragraph is ellipsis view with the option to toggle view, or
- * - "OFF" - paragraph is in full view with the option to toggle view, or
- * - "NONE" - paragraph is in full view with no option to toggle view as it does not require ellipsis.
- * @param element - Element observed by resize observer (ellipsis container).
- * @param maxLineCount - Maximum lines to display.
- * @param currentMode - Current ellipsis mode.
- * @returns ellipsis mode.
- */
-function getEllipsisMode(
-  element: HTMLDivElement | null,
-  maxLineCount: number,
-  currentMode: EllipsisMode = EllipsisMode.NONE,
-): EllipsisMode {
-  // Calculate line count.
-  const lineCount = calculateRenderedLineCount(element);
-
-  if (!lineCount) {
-    return currentMode;
-  }
-
-  if (lineCount <= maxLineCount) {
-    // Element does not have hidden content and line count is within allowable limit.
-    // Mode is "NONE" - ellipsis mode not required.
-    return EllipsisMode.NONE;
-  }
-
-  if (currentMode === EllipsisMode.NONE) {
-    // Line count exceeds allowable limit, and ellipsis mode is "NONE".
-    // Change mode to "ON" - ellipsis mode required.
-    return EllipsisMode.ON;
-  }
-
-  return currentMode;
-}
-
-/**
- * Returns applicable button text for display corresponding with current mode.
- * When the current mode is "ON" the return value will be "Show More", otherwise the return value is "Show Less".
- * @param currentMode - current ellipsis mode.
- * @returns string for display as button text.
- */
-function getModeText(currentMode?: EllipsisMode): string {
-  if (currentMode === EllipsisMode.ON) {
-    return "Read More";
-  }
-  return "Read Less";
-}
-
-/**
- * Returns a list of DOMRects for text nodes within the given node.
- * @param node - Node.
- * @param DOMRects - List of DOMRects.
- * @returns a list of text node DOMRects.
- */
-function getTextNodeDOMRects(node: Node, DOMRects: DOMRect[] = []): DOMRect[] {
-  if (node.hasChildNodes()) {
-    for (const child of node.childNodes) {
-      // Traverse the DOM tree to find text nodes.
-      getTextNodeDOMRects(child, DOMRects);
-    }
-  } else {
-    // Create a range object for the text node.
-    const range = document.createRange();
-    range.selectNodeContents(node);
-    // Grab the DOMRectList for the range; this is a list of the bounding rectangles for the content.
-    const DOMRectList = range.getClientRects();
-    for (const rect of [...DOMRectList]) {
-      if (rect.height && rect.width) {
-        DOMRects.push(rect);
-      }
-    }
-  }
-  return DOMRects;
-}
-
-/**
- * Ellipsis mode is "activated" when content is long enough to be truncated.
- * i.e. the current mode will not equal "NONE".
- * @param currentMode - current ellipsis mode.
- * @returns true when mode is not "NONE".
- */
-function isModeActivated(currentMode?: EllipsisMode): boolean {
-  return !!currentMode && currentMode !== EllipsisMode.NONE;
-}
-
-/**
- * Sorts the given DOMRects by their y value.
- * @param DOMRect0 - First DOMRect to compare.
- * @param DOMRect1 - Second DOMRect to compare.
- * @returns number indicating the relative order of the given DOMRects.
- */
-function sortDOMRects(DOMRect0: DOMRect, DOMRect1: DOMRect): number {
-  return DOMRect0.y - DOMRect1.y;
-}

package/src/components/common/Form/components/Input/input.styles.ts

@@ -1,55 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { FormControl } from "@mui/material";
-import { PALETTE } from "../../../../../styles/common/constants/palette";
-
-interface Props {
-  isFilled?: boolean;
-}
-
-export const InputFormControl = styled(FormControl, {
-  shouldForwardProp: (prop) => prop !== "isFilled",
-})<Props>`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  .MuiOutlinedInput-root {
-    .MuiOutlinedInput-input {
-      padding: 10px 12px 10px 0;
-    }
-
-    &.MuiInputBase-multiline {
-      padding: 0 0 0 10px;
-    }
-
-    input::placeholder,
-    textarea::placeholder {
-      color: ${PALETTE.INK_LIGHT};
-      opacity: 0.8;
-    }
-
-    &.Mui-focused {
-      input::placeholder,
-      textarea::placeholder {
-        opacity: 0;
-      }
-    }
-
-    // Input filled.
-    ${({ isFilled }) =>
-      isFilled &&
-      css`
-        & .MuiOutlinedInput-input,
-        .MuiSvgIcon-root {
-          color: ${PALETTE.INK_MAIN};
-        }
-      `};
-  }
-
-  .MuiFormHelperText-root {
-    align-items: flex-start;
-    display: flex;
-    gap: 4px;
-  }
-`;

package/src/components/common/Form/components/Input/input.tsx

@@ -1,41 +0,0 @@
-import {
-  OutlinedInputProps as MOutlinedInputProps,
-  OutlinedInput,
-  Typography,
-} from "@mui/material";
-import { JSX } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
-import { InputFormControl } from "./input.styles";
-
-/**
- * Basic form input component.
- */
-
-export interface InputProps extends MOutlinedInputProps {
-  className?: string;
-  isFilled: boolean;
-  label?: string;
-}
-
-export const Input = ({
-  className,
-  isFilled,
-  label,
-  ...props /* Spread props to allow for Mui OutlinedInputProps specific prop overrides e.g. "disabled". */
-}: InputProps): JSX.Element => {
-  return (
-    <InputFormControl className={className} isFilled={isFilled}>
-      {label && (
-        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
-          {label}
-        </Typography>
-      )}
-      <OutlinedInput
-        fullWidth
-        inputProps={{ autoComplete: "off", spellCheck: false }}
-        size="small"
-        {...props}
-      />
-    </InputFormControl>
-  );
-};

package/src/components/common/Form/components/Select/components/DropDownIcon/dropDownIcon.tsx

@@ -1,9 +0,0 @@
-import { ArrowDropDownRounded } from "@mui/icons-material";
-import { SvgIconProps } from "@mui/material";
-import { JSX } from "react";
-
-export const DropDownIcon = ({
-  ...props /* MuiSvgIconProps */
-}: SvgIconProps): JSX.Element => {
-  return <ArrowDropDownRounded color="inkMain" fontSize="small" {...props} />;
-};

package/src/components/common/Form/components/Select/select.styles.ts

@@ -1,26 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { FormControl } from "@mui/material";
-import { PALETTE } from "../../../../../styles/common/constants/palette";
-
-interface Props {
-  isFilled: boolean;
-}
-
-export const InputFormControl = styled(FormControl, {
-  shouldForwardProp: (prop) => prop !== "isFilled",
-})<Props>`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  // Input filled.
-  ${({ isFilled }) =>
-    isFilled &&
-    css`
-      & .MuiOutlinedInput-input,
-      .MuiSvgIcon-root {
-        color: ${PALETTE.INK_MAIN};
-      }
-    `};
-`;

package/src/components/common/Form/components/Select/select.tsx

@@ -1,41 +0,0 @@
-import {
-  Select as MSelect,
-  SelectProps as MSelectProps,
-  Typography,
-} from "@mui/material";
-import { JSX, ReactNode } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
-import { InputFormControl } from "./select.styles";
-
-/**
- * Basic form select component.
- */
-
-export type SelectProps = MSelectProps & {
-  children: ReactNode;
-  className?: string;
-  isFilled: boolean;
-  label?: string;
-};
-
-export const Select = ({
-  children,
-  className,
-  isFilled,
-  label,
-  onBlur,
-  ...props /* Spread props to allow for Mui SelectProps specific prop overrides e.g. "disabled". */
-}: SelectProps): JSX.Element => {
-  return (
-    <InputFormControl className={className} isFilled={isFilled}>
-      {label && (
-        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
-          {label}
-        </Typography>
-      )}
-      <MSelect fullWidth inputProps={{ onBlur }} size="small" {...props}>
-        {children}
-      </MSelect>
-    </InputFormControl>
-  );
-};

package/src/components/common/Form/components/UploadFile/uploadFile.styles.ts

@@ -1,55 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { ButtonBase } from "@mui/material";
-import { PALETTE } from "../../../../../styles/common/constants/palette";
-
-interface Props {
-  isAttached: boolean;
-  isDragActive: boolean;
-  isError: boolean;
-}
-
-export const Button = styled(ButtonBase, {
-  shouldForwardProp: (prop) =>
-    prop !== "isAttached" && prop !== "isDragActive" && prop !== "isError",
-})<Props>`
-  align-items: center;
-  background-color: ${PALETTE.SMOKE_LIGHT};
-  border: 1px dashed ${PALETTE.SMOKE_DARK};
-  border-radius: 4px;
-  display: flex;
-  gap: 8px;
-  height: 40px;
-  justify-content: ${(props) =>
-    props.isAttached ? "space-between" : undefined};
-  padding: 10px 12px;
-
-  // Drag active.
-  ${({ isDragActive }) =>
-    isDragActive &&
-    css`
-      background-color: ${PALETTE.INFO_LIGHTEST};
-      border: 1px dashed ${PALETTE.INFO_MAIN};
-    `};
-
-  // Error.
-  ${({ isDragActive, isError }) =>
-    isError &&
-    !isDragActive &&
-    css`
-      border: 1px dashed ${PALETTE.ERROR_MAIN};
-    `};
-
-  .MuiTypography-body-400 {
-    color: ${PALETTE.INK_MAIN};
-    opacity: 0.8;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-`;
-
-export const Underline = styled.span`
-  text-decoration: underline;
-  text-underline-offset: 2px;
-`;

package/src/components/common/Form/components/UploadFile/uploadFile.tsx

@@ -1,92 +0,0 @@
-import { CloseRounded } from "@mui/icons-material";
-import { FormHelperText, Typography } from "@mui/material";
-import { JSX } from "react";
-import { DropzoneState } from "react-dropzone";
-import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
-import { Loading, LOADING_PANEL_STYLE } from "../../../../Loading/loading";
-import { FormState } from "../../../../Support/components/SupportRequest/components/SupportRequestForm/common/entities";
-import { ErrorIcon } from "../../../CustomIcon/components/ErrorIcon/errorIcon";
-import { InputFormControl } from "../Input/input.styles";
-import { Button, Underline } from "./uploadFile.styles";
-
-export interface UploadFileProps {
-  attachmentName: FormState["attachmentName"];
-  attachmentRejected: FormState["attachmentRejected"];
-  attachmentRejections: FormState["attachmentRejections"];
-  attachmentToken: FormState["attachmentToken"];
-  attachmentUploading: FormState["attachmentUploading"];
-  className?: string;
-  isDragActive: boolean;
-  label: string;
-  onAttachmentDeleted: () => void;
-  open: DropzoneState["open"];
-}
-
-export const UploadFile = ({
-  attachmentName,
-  attachmentRejected,
-  attachmentRejections,
-  attachmentToken,
-  attachmentUploading,
-  className,
-  isDragActive,
-  label,
-  onAttachmentDeleted,
-  open,
-}: UploadFileProps): JSX.Element => {
-  const error = attachmentRejected;
-  const isAttached = Boolean(attachmentToken);
-  return (
-    <InputFormControl className={className} error={error}>
-      {label && (
-        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
-          {label}
-        </Typography>
-      )}
-      <Button
-        isAttached={isAttached}
-        isDragActive={isDragActive}
-        isError={error}
-        onClick={attachmentToken ? onAttachmentDeleted : open}
-      >
-        <Loading
-          iconSize="small"
-          loading={attachmentUploading}
-          panelStyle={LOADING_PANEL_STYLE.INHERIT}
-        />
-        <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
-          {isAttached ? (
-            attachmentName
-          ) : (
-            <>
-              Drag or <Underline>Click</Underline> to attach file
-            </>
-          )}
-        </Typography>
-        {isAttached && <CloseRounded fontSize="small" />}
-      </Button>
-      {error && (
-        <FormHelperText>
-          <ErrorIcon fontSize="xxsmall" />
-          {getErrorMessage(attachmentRejections)}
-        </FormHelperText>
-      )}
-    </InputFormControl>
-  );
-};
-
-/**
- * Returns the error message for the attachment.
- * @param attachmentRejections - Attachment rejections.
- * @returns error message.
- */
-function getErrorMessage(
-  attachmentRejections: FormState["attachmentRejections"],
-): string {
-  const fileSizeError = attachmentRejections.find(
-    (rejection) => rejection.code === "file-too-large",
-  );
-  return fileSizeError
-    ? "File must be less than 20 MB."
-    : "Unable to upload file.";
-}

package/src/components/common/Grid/components/GridItem/gridItem.tsx

@@ -1,25 +0,0 @@
-import { Box, SxProps } from "@mui/material";
-import { JSX, ReactNode } from "react";
-
-// TODO the prop "children" should not necessarily be optional, but it is for now to avoid typescript errors with the use of this component within site configuration files.
-
-export interface GridItemProps {
-  children?: ReactNode | ReactNode[];
-  gridItemSx?: SxProps;
-}
-
-/**
- * A basic Grid Item component for rendering CSS grid items.
- */
-
-export const GridItem = ({
-  children,
-  gridItemSx,
-  ...props /* Spread props to allow for Mui Box specific prop overrides. */
-}: GridItemProps): JSX.Element => {
-  return (
-    <Box sx={gridItemSx} {...props}>
-      {children}
-    </Box>
-  );
-};

package/src/components/common/Grid/grid.tsx

@@ -1,23 +0,0 @@
-import { Box, SxProps } from "@mui/material";
-import { JSX, ReactNode } from "react";
-
-export interface GridProps {
-  children: ReactNode | ReactNode[];
-  gridSx?: SxProps;
-}
-
-/**
- * A basic Grid component for rendering CSS grid.
- */
-
-export const Grid = ({
-  children,
-  gridSx,
-  ...props /* Spread props to allow for Mui Box specific prop overrides. */
-}: GridProps): JSX.Element => {
-  return (
-    <Box display="grid" sx={gridSx} {...props}>
-      {children}
-    </Box>
-  );
-};

package/src/components/common/IconBadge/iconBadge.styles.ts

@@ -1,49 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { PALETTE } from "../../../styles/common/constants/palette";
-import { ICON_BADGE_COLOR, IconBadgeColor } from "./iconBadge";
-
-interface Props {
-  color: IconBadgeColor;
-}
-
-export const Circle = styled.div<Props>`
-  border-radius: 50%;
-  box-sizing: content-box;
-  display: grid;
-  height: 72px;
-  place-content: center center;
-  width: 72px;
-
-  // Alert.
-  ${({ color }) =>
-    color === ICON_BADGE_COLOR.ALERT &&
-    css`
-      background-color: ${PALETTE.ALERT_LIGHTEST};
-      color: ${PALETTE.ALERT_MAIN};
-    `};
-
-  // Info.
-  ${({ color }) =>
-    color === ICON_BADGE_COLOR.INFO &&
-    css`
-      background-color: ${PALETTE.INFO_LIGHTEST};
-      color: ${PALETTE.INFO_MAIN};
-    `};
-
-  // Success.
-  ${({ color }) =>
-    color === ICON_BADGE_COLOR.SUCCESS &&
-    css`
-      background-color: ${PALETTE.SUCCESS_LIGHTEST};
-      color: ${PALETTE.SUCCESS_MAIN};
-    `};
-
-  // Warning.
-  ${({ color }) =>
-    color === ICON_BADGE_COLOR.WARNING &&
-    css`
-      background-color: ${PALETTE.WARNING_LIGHTEST};
-      color: ${PALETTE.WARNING_MAIN};
-    `};
-`;

package/src/components/common/IconBadge/iconBadge.tsx

@@ -1,32 +0,0 @@
-import { JSX, ElementType } from "react";
-import { Circle } from "./iconBadge.styles";
-
-/**
- * Model of icon badge color.
- */
-export type IconBadgeColor = ICON_BADGE_COLOR;
-
-export enum ICON_BADGE_COLOR {
-  ALERT = "alert",
-  INFO = "info",
-  SUCCESS = "success",
-  WARNING = "warning",
-}
-
-export interface IconBadgeProps {
-  color: IconBadgeColor;
-  Icon: ElementType;
-  iconSize?: string;
-}
-
-export const IconBadge = ({
-  color,
-  Icon,
-  iconSize = "xxlarge",
-}: IconBadgeProps): JSX.Element => {
-  return (
-    <Circle color={color}>
-      <Icon fontSize={iconSize} />
-    </Circle>
-  );
-};

package/src/components/common/IconButton/iconButton.styles.ts

@@ -1,20 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-import { IconButton as MIconButton } from "@mui/material";
-import { PALETTE } from "../../../styles/common/constants/palette";
-
-interface Props {
-  open: boolean;
-}
-
-export const Button = styled(MIconButton, {
-  shouldForwardProp: (prop) => prop !== "open",
-})<Props>`
-  ${({ open }) =>
-    open &&
-    css`
-      &.MuiIconButton-root {
-        background-color: ${PALETTE.SMOKE_LIGHTEST};
-      }
-    `}
-`;