@onewelcome/react-lib-components 6.7.1 → 7.1.0

package/dist/esm/src/readyclasses.module.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"readyclasses.module.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/src/components/DataGrid/DataGridBody/DataGridCell.module.scss

@@ -1,54 +0,0 @@
-/*!
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-@use "../../../mixins.module.scss";
-
-.cell {
-  min-height: 3rem;
-  padding: 0.25rem 1rem;
-
-  &:first-child {
-    padding-left: 1rem;
-  }
-
-  &:last-child {
-    padding-right: 1rem;
-  }
-
-  .text {
-    font-size: var(--font-size-data-grid);
-    line-height: var(--data-grid-line-height);
-  }
-
-  .loading {
-    @include mixins.skeletonLoading();
-    border-radius: 0.5rem;
-    height: 1.25rem;
-    margin: 0.625rem 0;
-  }
-}
-
-@media only screen and (min-width: 50em) {
-  .cell {
-    &:first-child {
-      padding-left: 1.25rem;
-    }
-
-    &:last-child {
-      padding-right: 1.25rem;
-    }
-  }
-}

package/src/components/DataGrid/DataGridBody/DataGridCell.tsx

@@ -1,72 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, ReactElement } from "react";
-import { Typography } from "../../Typography/Typography";
-import classes from "./DataGridCell.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"td"> {
-  children?: ReactElement | string | number;
-  isLoading?: boolean;
-  spacing?: React.CSSProperties;
-  cellIndex?: number;
-  columnLength?: number;
-  disableContextMenuColumn?: boolean;
-}
-
-const DataGridCellComponent: ForwardRefRenderFunction<HTMLTableCellElement, Props> = (
-  {
-    children,
-    className,
-    isLoading,
-    spacing,
-    cellIndex,
-    columnLength,
-    disableContextMenuColumn,
-    ...rest
-  }: Props,
-  ref
-) => {
-  let cellStyle: React.CSSProperties = {};
-
-  if (cellIndex === 0) {
-    cellStyle.paddingLeft = spacing?.paddingLeft;
-  }
-  if (
-    (cellIndex === columnLength && !disableContextMenuColumn) ||
-    (columnLength && cellIndex === columnLength - 1 && disableContextMenuColumn)
-  ) {
-    cellStyle.paddingRight = spacing?.paddingRight;
-  }
-
-  return (
-    <td
-      {...rest}
-      ref={ref}
-      style={{ ...rest.style, ...cellStyle }}
-      className={`${classes["cell"]} ${className ?? ""}`}
-    >
-      {isLoading && <div className={classes["loading"]} aria-busy="true" aria-live="polite"></div>}
-      {!isLoading && (
-        <Typography className={classes["text"]} variant="body" tag="span">
-          {children}
-        </Typography>
-      )}
-    </td>
-  );
-};
-
-export const DataGridCell = React.forwardRef(DataGridCellComponent);

package/src/components/DataGrid/DataGridBody/DataGridRow.module.scss

@@ -1,33 +0,0 @@
-/*!
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-.row {
-  position: relative;
-  background-color: var(--data-grid-row-background-color);
-
-  &:not(.loading):hover {
-    background-color: var(--data-grid-row-hover-background-color);
-  }
-
-  &:not(:last-child)::after {
-    content: "";
-    position: absolute;
-    width: 100%;
-    left: 0;
-    bottom: 0;
-    border-bottom: 1px solid var(--light-grey-border);
-  }
-}

package/src/components/DataGrid/DataGridBody/DataGridRow.tsx

@@ -1,58 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef } from "react";
-import { HeaderCell } from "../datagrid.interfaces";
-import classes from "./DataGridRow.module.scss";
-
-export interface Props extends ComponentPropsWithRef<"tr"> {
-  headers?: HeaderCell[];
-  isLoading?: boolean;
-  spacing?: React.CSSProperties;
-  disableContextMenuColumn?: boolean;
-}
-
-const DataGridRowComponent: ForwardRefRenderFunction<HTMLTableRowElement, Props> = (
-  { children, className, headers, isLoading, spacing, disableContextMenuColumn, ...rest }: Props,
-  ref
-) => {
-  const visibleCells = React.Children.map(children as React.ReactElement[], (child, index) => {
-    if (child) {
-      const cellWithSpacing = React.cloneElement(child, {
-        spacing: spacing,
-        cellIndex: index,
-        columnLength: headers?.length,
-        disableContextMenuColumn
-      });
-
-      const visible = headers && headers.length > index ? !headers[index].hidden : true;
-      return visible && cellWithSpacing;
-    }
-    return null;
-  });
-
-  const classNames = [classes["row"]];
-  className && classNames.push(className);
-  isLoading && classNames.push(classes["loading"]);
-
-  return (
-    <tr {...rest} ref={ref} className={classNames.join(" ")}>
-      {visibleCells}
-    </tr>
-  );
-};
-
-export const DataGridRow = React.forwardRef(DataGridRowComponent);

package/src/components/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.module.scss

@@ -1,56 +0,0 @@
-/*!
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-@use "../../../../mixins.module.scss";
-@use "../../../../variables.scss";
-
-.snackbars {
-  position: fixed;
-  z-index: variables.$snackbar-z-index;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  @include mixins.transition(height, 0.2s, ease-in-out);
-
-  &.bottom {
-    bottom: 3.5rem;
-  }
-
-  &.top {
-    top: 3.5rem;
-  }
-
-  &.start {
-    left: 0;
-  }
-
-  &.center {
-    left: 0;
-  }
-
-  &.end {
-    right: 0;
-  }
-}
-
-@media only screen and (min-width: 37.5em) {
-  .snackbars {
-    width: initial;
-
-    &.center {
-      left: calc(50% - 18.75rem);
-    }
-  }
-}

package/src/components/Notifications/Snackbar/SnackbarContainer/SnackbarContainer.tsx

@@ -1,92 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { useContext, useEffect, useState } from "react";
-import classes from "./SnackbarContainer.module.scss";
-import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
-
-/**
- * @deprecated
- */
-export interface Placement {
-  vertical: "top" | "bottom";
-  horizontal: "start" | "center" | "end";
-}
-
-/**
- * @deprecated
- */
-export interface Props {
-  placement: Placement;
-  children?: React.ReactNode;
-  zIndex?: number;
-  className?: string;
-}
-
-const useSnackbarContainerHeightAnimation = () => {
-  const { snackbars } = useContext(SnackbarContext);
-  const [height, setHeight] = useState(0);
-  const [justifyContent, setJustifyContent] = useState<"flex-start" | "flex-end">("flex-start");
-  const spaceBetweenSnackbars = 8;
-  const exceedsMaximumVisibleSnackbars = snackbars.length >= 3;
-
-  useEffect(() => {
-    const allHeights = snackbars.map(snackbar => snackbar.height);
-
-    let totalHeight = allHeights.reduce((prev, curr) => prev + curr, 0);
-
-    totalHeight += (Math.min(snackbars.length, 3) - 1) * spaceBetweenSnackbars;
-
-    /**
-     * Once we reach the maximum amount of snackbars, they will start to disappear. We have to wait with reversing the justify-content until the last snackbar
-     * has completed their animationIn. This is around 500ms. Then we want to reverse it, because otherwise whenever a snackbar disappears they shift up
-     * and then down again, which looks really bad.
-     * */
-    if (exceedsMaximumVisibleSnackbars)
-      setTimeout(() => {
-        setJustifyContent("flex-end");
-      }, 500);
-
-    if (height > totalHeight && justifyContent !== "flex-end") {
-      setJustifyContent("flex-end");
-    } else if (height < totalHeight && justifyContent !== "flex-start") {
-      setJustifyContent("flex-start");
-    }
-
-    setHeight(totalHeight);
-  }, [snackbars]);
-
-  return { height, justifyContent };
-};
-
-/**
- * @deprecated
- */
-export const SnackbarContainer = ({ placement, children, zIndex, className, ...rest }: Props) => {
-  const { height, justifyContent } = useSnackbarContainerHeightAnimation();
-
-  return (
-    <div
-      {...rest}
-      style={{ zIndex, height, justifyContent }}
-      className={`${classes["snackbars"]} ${classes[placement.horizontal]} ${
-        classes[placement.vertical]
-      } ${className ?? ""}`}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.module.scss

@@ -1,156 +0,0 @@
-/*!
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-@use "../../../../mixins.module.scss";
-
-.snackbar {
-  padding: 1rem;
-  border-radius: var(--snackbar-border-radius);
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  width: 100%;
-  box-sizing: border-box;
-  @include mixins.transition(height, 0.2s, ease-in-out);
-  flex-grow: 0;
-
-  &.info {
-    background-color: var(--snackbar-info-background-color);
-  }
-
-  &.success {
-    background-color: var(--snackbar-success-background-color);
-  }
-
-  &.error {
-    background-color: var(--snackbar-error-background-color);
-  }
-
-  &.warning {
-    background-color: var(--snackbar-warning-background-color);
-  }
-
-  & + & {
-    margin-top: 0.5rem;
-  }
-
-  #close-btn {
-    color: var(--snackbar-text-color);
-    align-self: center;
-    width: 2.5rem;
-    height: 2.5rem;
-    margin: -0.5rem 0;
-    flex-shrink: 0;
-    border: 0;
-
-    span {
-      font-size: 0.875rem;
-    }
-
-    &:not(:disabled):hover,
-    &:not(:disabled):focus {
-      background-color: var(--color-black10);
-    }
-
-    &:not(:disabled):active {
-      background-color: var(--color-black20);
-    }
-  }
-
-  .icon {
-    color: var(--snackbar-text-color);
-    font-size: 1rem;
-    height: 1.25rem;
-    display: inline-flex;
-    align-items: center;
-    align-self: flex-start;
-  }
-
-  .title {
-    color: var(--snackbar-text-color);
-    flex: 1;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    margin-bottom: 0.25rem;
-    display: block;
-  }
-
-  .outer-content-wrapper {
-    display: flex;
-    gap: 0.5rem;
-    flex-grow: 1;
-  }
-
-  .content-wrapper {
-    flex-grow: 1;
-  }
-
-  .content {
-    color: var(--snackbar-text-color);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    margin-bottom: 0;
-  }
-
-  .actions {
-    text-align: right;
-    align-self: center;
-  }
-
-  .action-button {
-    border-width: var(--button-border-width);
-    border-style: var(--button-border-style);
-    border-radius: var(--button-border-radius);
-    white-space: nowrap;
-    font-size: 0.875rem;
-    line-height: var(--button-font-size);
-    font-weight: 400;
-    margin: -0.5rem 0;
-    padding: 0.625rem 1.25rem;
-    cursor: pointer;
-    transition:
-      color,
-      background-color,
-      border-color 0.2s ease-in-out;
-    font-family: var(--font-family);
-    color: var(--snackbar-text-color);
-    background-color: transparent;
-    border-color: transparent;
-
-    &:disabled {
-      color: var(--greyed-out);
-      cursor: not-allowed;
-    }
-
-    @include mixins.focusVisibleOutline();
-
-    &:not(:disabled):hover,
-    &:not(:disabled):focus {
-      background-color: var(--color-black10);
-    }
-
-    &:not(:disabled):active {
-      background-color: var(--color-black20);
-    }
-  }
-}
-
-@media only screen and (min-width: 37.5em) {
-  .snackbar {
-    width: min-content;
-    min-width: 25rem;
-  }
-}

package/src/components/Notifications/Snackbar/SnackbarItem/SnackbarItem.tsx

@@ -1,161 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { useContext, useEffect, useRef } from "react";
-import { IconButton } from "../../../Button/IconButton";
-import { Icon, Icons } from "../../../Icon/Icon";
-import { Variant, Actions } from "../interfaces";
-import classes from "./SnackbarItem.module.scss";
-import readyclasses from "../../../../readyclasses.module.scss";
-import { useAnimation } from "../../../../hooks/useAnimation";
-import { Typography } from "../../../Typography/Typography";
-import { SnackbarContext } from "../SnackbarProvider/SnackbarStateProvider";
-
-const textColor = "var(--snackbar-text-color)";
-
-/**
- * @deprecated
- */
-export interface Props {
-  id: string;
-  title?: string;
-  duration: number;
-  variant: Variant;
-  className?: string;
-  onClose: (key: string) => void;
-  closeButtonTitle: string;
-  content?: string;
-  actions?: Actions;
-}
-
-const useRegisterSnackbarHeight = (
-  singleSnackbarRef: React.RefObject<HTMLDivElement>,
-  snackbarId: string
-) => {
-  const ctx = useContext(SnackbarContext);
-
-  useEffect(() => {
-    if (singleSnackbarRef.current) {
-      ctx.setSnackbarHeight(snackbarId, singleSnackbarRef.current.getBoundingClientRect().height);
-    }
-  }, [singleSnackbarRef.current]);
-};
-
-/**
- * @deprecated
- */
-export const SnackbarItem = ({
-  id,
-  title,
-  duration,
-  variant,
-  content,
-  className,
-  actions = [],
-  onClose,
-  closeButtonTitle
-}: Props) => {
-  const timerHandler = useRef<ReturnType<typeof setTimeout>>();
-  const onAnimationEnd = () => onClose(id);
-  const { ref, animationStarted, startAnimation } = useAnimation<HTMLDivElement>(onAnimationEnd);
-  const hasOnlyTitle = !content && !!title;
-  const renderTitle = title && !hasOnlyTitle;
-  const renderContentOrTitleOnly = content || hasOnlyTitle;
-
-  useRegisterSnackbarHeight(ref, id);
-
-  useEffect(() => {
-    timerHandler.current = setTimeout(() => startAnimation(), duration);
-    return () => {
-      timerHandler.current && clearTimeout(timerHandler.current);
-    };
-  }, []);
-
-  const onMouseEnter = () => {
-    timerHandler.current && clearTimeout(timerHandler.current);
-  };
-
-  const onMouseLeave = () => {
-    timerHandler.current = setTimeout(() => startAnimation(), duration);
-  };
-
-  const getVariantIcon = () => {
-    if (variant === "error") {
-      return Icons.Error;
-    }
-
-    if (variant === "warning") {
-      return Icons.Warning;
-    }
-
-    return variant === "success" ? Icons.CheckmarkCircleAlt : Icons.InfoCircle;
-  };
-
-  const actionButtons = actions.map((actionProp, index) => (
-    <button
-      key={index}
-      {...actionProp}
-      onClick={e => {
-        onClose(id);
-        actionProp.onClick?.(e);
-      }}
-      className={classes["action-button"]}
-    >
-      {actionProp.label}
-    </button>
-  ));
-
-  const snackbarClasses = [
-    classes["snackbar"],
-    classes[variant],
-    animationStarted ? readyclasses["slide-out"] : readyclasses["slide-in"],
-    className ?? ""
-  ].join(" ");
-
-  return (
-    <div
-      ref={ref}
-      aria-live="polite"
-      className={snackbarClasses}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-    >
-      <div className={classes["outer-content-wrapper"]}>
-        <Icon icon={getVariantIcon()} className={classes["icon"]} />
-        <div className={classes["content-wrapper"]}>
-          {renderTitle && (
-            <Typography className={classes["title"]} variant="body-bold" tag="span">
-              {title}
-            </Typography>
-          )}
-          {renderContentOrTitleOnly && (
-            <Typography className={classes["content"]} variant="body">
-              {hasOnlyTitle ? title : content}
-            </Typography>
-          )}
-        </div>
-      </div>
-      {actionButtons.length > 0 && <div className={classes["actions"]}>{actionButtons}</div>}
-      <IconButton
-        id={classes["close-btn"]}
-        onClick={() => startAnimation()}
-        title={closeButtonTitle}
-      >
-        <Icon icon={Icons.Times} color={textColor} />
-      </IconButton>
-    </div>
-  );
-};