@onewelcome/react-lib-components 0.0.0-experimental-8e3a0fd

package/src/components/Notifications/SlideInModal/SlideInModal.tsx

@@ -0,0 +1,75 @@
+/*
+ * 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,
+  TransitionEventHandler,
+  useState,
+  useRef,
+  useCallback,
+  useEffect
+} from "react";
+import { Props as ModalProps, Modal } from "../Modal/Modal";
+import classes from "./SlideInModal.module.scss";
+
+/**
+ * @deprecated use the new `SideSheet` component
+ */
+const SlideInModalComponent: ForwardRefRenderFunction<HTMLDivElement, ModalProps> = (
+  { children, id, open, ...rest }: ModalProps,
+  ref
+) => {
+  const [classHideOnTransition, setClassHideOnTransition] = useState<string>("hide");
+  const [controlledOpen, setControlledOpen] = useState(false);
+  const containerRef = useRef(null);
+
+  const onTransitionEnd: TransitionEventHandler<HTMLDivElement> = useCallback(
+    e => {
+      if (e.target === containerRef.current) {
+        setClassHideOnTransition(prev => (prev ? "" : "hide"));
+        if (!open && controlledOpen) {
+          setControlledOpen(false);
+        }
+      }
+    },
+    [open]
+  );
+
+  useEffect(() => {
+    open && setControlledOpen(open);
+  }, [open]);
+
+  return (
+    <Modal
+      {...rest}
+      id={id}
+      open={controlledOpen}
+      className={`${classes["slide-in-modal"]} ${open ? classes["visible"] : ""} ${
+        !open ? classes[classHideOnTransition] : ""
+      }`}
+      containerProps={{ className: classes["container"] }}
+      backdropProps={{ id: classes["backdrop-slide"] }}
+      onTransitionEnd={onTransitionEnd}
+      ref={ref ?? containerRef}
+    >
+      {children}
+    </Modal>
+  );
+};
+
+export type { Props } from "../Modal/Modal";
+
+export const SlideInModal = React.forwardRef(SlideInModalComponent);

package/src/components/Pagination/Pagination.module.scss

@@ -0,0 +1,162 @@
+/*!
+ * 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 "../../functions" as *;
+
+.pagination-wrapper {
+  font-family: var(--font-family);
+  font-size: var(--font-size-data-grid);
+  line-height: var(--data-grid-line-height);
+  color: var(--greyed-out);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  .left {
+    display: flex;
+  }
+
+  .form-element {
+    height: relativeToBaseFontSize(2.5);
+
+    .search-input-wrapper {
+      width: 2.75rem;
+    }
+
+    button {
+      min-height: relativeToBaseFontSize(2.5);
+    }
+  }
+
+  .total {
+    flex: 1 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    span {
+      color: var(--color-blue-grey500);
+    }
+  }
+
+  .pagination {
+    flex: 1 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1rem;
+
+    .previous,
+    .next {
+      display: flex;
+      align-items: center;
+
+      button span:before {
+        font-size: var(--font-size-sub);
+      }
+    }
+  }
+
+  .per-page {
+    display: none;
+    align-items: center;
+    gap: 0.5rem;
+
+    label {
+      font-size: var(--font-size-data-grid);
+      line-height: var(--data-grid-line-height);
+      font-weight: 500;
+      color: var(--color-blue-grey900);
+    }
+
+    + .total {
+      padding-left: 0.9375rem;
+      border-left: 1px solid var(--color-blue-grey100);
+    }
+  }
+
+  .page {
+    display: flex;
+    align-items: center;
+    flex-basis: min-content;
+    padding-right: 1rem;
+
+    &-total {
+      display: inline-block;
+      margin-left: 0.5rem;
+      white-space: nowrap;
+      font-weight: 500;
+      color: var(--color-blue-grey900);
+    }
+
+    + .previous {
+      padding-left: 0.9375rem;
+      border-left: 1px solid var(--color-blue-grey100);
+    }
+  }
+
+  .page-size-select {
+    button {
+      min-width: relativeToBaseFontSize(4.25);
+      padding: 0;
+
+      div[data-display] {
+        left: 0.5rem;
+      }
+
+      div:not([data-display]) {
+        right: 0.5rem;
+      }
+    }
+  }
+}
+
+.current-page-select {
+  button {
+    min-width: relativeToBaseFontSize(3.75);
+    padding: 0;
+
+    div[data-display] {
+      left: 0.5rem;
+    }
+
+    div:not([data-display]) {
+      right: 0.5rem;
+    }
+  }
+}
+
+@media screen and (min-width: 30em) {
+  .pagination-wrapper {
+    flex-direction: row;
+
+    .total {
+      justify-content: flex-start;
+    }
+
+    .pagination {
+      margin-top: 0;
+      justify-content: flex-end;
+    }
+  }
+}
+
+@media screen and (min-width: 48em) {
+  .pagination-wrapper .per-page {
+    display: flex;
+    margin-right: 1rem;
+  }
+}

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,235 @@
+/*
+ * 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,
+  Fragment,
+  useState,
+  useEffect
+} from "react";
+import classes from "./Pagination.module.scss";
+import readyclasses from "../../readyclasses.module.scss";
+import { IconButton } from "../Button/IconButton";
+import { Icons, Icon } from "../Icon/Icon";
+import { Select } from "../Form/Select/SingleSelect/Select";
+import { Option } from "../Form/Select/SingleSelect/Option";
+import { Label } from "../Form/Label/Label";
+
+export type PaginationTranslations = {
+  totalItems: string;
+  itemsPerPage: string;
+  itemsPerPageLabel: string;
+  currentPage: string;
+  currentPageLabel: string;
+};
+
+export type PageChangeLabels = "next" | "previous" | "first" | "last";
+
+enum DefaultTranslations {
+  totalItems = "items in total",
+  itemsPerPage = "Items per page",
+  currentPage = "of %1 pages",
+  itemsPerPageLabel = "Select how many items per page you want to see.",
+  currentPageLabel = "What page you are currently on."
+}
+
+export type PageSize = 10 | 25 | 50;
+
+export interface Props extends Omit<ComponentPropsWithRef<"div">, "translate"> {
+  currentPage: number;
+  totalElements?: number;
+  pageSize?: PageSize;
+  translate?: PaginationTranslations;
+  onPageChange: (pageToGoTo: number) => void;
+  onPageSizeChange: (pageSize: PageSize) => void;
+}
+
+const PaginationComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    totalElements,
+    pageSize = 10,
+    translate = DefaultTranslations,
+    currentPage,
+    className,
+    onPageChange,
+    onPageSizeChange,
+    ...rest
+  }: Props,
+  ref
+) => {
+  const calculateAmountOfPages = () => {
+    if (!totalElements) {
+      return 1;
+    }
+
+    if (Math.ceil(totalElements / pageSize) < 1) {
+      return 1;
+    }
+
+    return Math.ceil(totalElements / pageSize);
+  };
+  const pagesAmount = calculateAmountOfPages();
+  const [resetPageNoSelect, setResetPageNoSelect] = useState(false);
+
+  const onPageSizeChangeHandler = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const pageSizeNumber = Number(event.target.value) as PageSize;
+    setResetPageNoSelect(true);
+    onPageSizeChange(pageSizeNumber);
+  };
+
+  const onPageChangeHandler = (pageToGoTo: number) => {
+    onPageChange(pageToGoTo);
+  };
+
+  useEffect(() => {
+    resetPageNoSelect && setResetPageNoSelect(false);
+  }, [resetPageNoSelect]);
+
+  if (totalElements === undefined || totalElements === null || totalElements === 0) {
+    return null;
+  }
+
+  return (
+    <div {...rest} ref={ref} className={`${classes["pagination-wrapper"]} ${className ?? ""}`}>
+      <div className={classes["left"]}>
+        {pageSize && (
+          <div className={classes["per-page"]}>
+            <Label
+              id="page-size-select-label"
+              htmlFor="page-size-select"
+              className={classes["label"]}
+            >
+              {translate.itemsPerPage}
+            </Label>
+            <Select
+              name="page-size-select"
+              id="page-size-select"
+              labeledBy="page-size-select-label"
+              className={`${classes["form-element"]} ${classes["page-size-select"]}`}
+              value={pageSize.toString()}
+              onChange={onPageSizeChangeHandler}
+            >
+              <Option value="10">10</Option>
+              <Option value="25">25</Option>
+              <Option value="50">50</Option>
+            </Select>
+          </div>
+        )}
+        <div className={classes["total"]}>
+          <span tabIndex={0}>
+            {totalElements}&nbsp;{translate.totalItems}
+          </span>
+        </div>
+      </div>
+      <div className={classes["pagination"]}>
+        <Fragment>
+          {!!pagesAmount && (
+            <div className={classes["page"]}>
+              <Label
+                id="current-value-input-label"
+                htmlFor="current-value-input"
+                className={`${readyclasses["sr-only"]} ${classes["current-value-select-label"]}`}
+              >
+                {translate.currentPageLabel}
+              </Label>
+              <Select
+                labeledBy="current-value-input-label"
+                key="input"
+                id="current-value-input"
+                size={currentPage.toString().length}
+                onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                  onPageChangeHandler(Number(e.target.value))
+                }
+                name="current-value-input"
+                value={currentPage.toString()}
+                className={`${classes["form-element"]} ${classes["current-page-select"]}`}
+                search={{
+                  enabled: true,
+                  searchInputProps: {
+                    wrapperProps: { className: classes["search-input-wrapper"] },
+                    reset: resetPageNoSelect ? resetPageNoSelect : undefined,
+                    autoComplete: "off"
+                  }
+                }}
+              >
+                {Array.from(Array(pagesAmount).keys()).map(page => (
+                  <Option key={page} value={(page + 1).toString()}>
+                    {(page + 1).toString()}
+                  </Option>
+                ))}
+              </Select>
+              <span className={classes["page-total"]}>
+                {translate.currentPage.replace(
+                  "%1",
+                  Math.ceil(totalElements / pageSize).toString()
+                )}
+              </span>
+            </div>
+          )}
+          {!!currentPage && (
+            <div className={classes["previous"]}>
+              {
+                <IconButton
+                  disabled={currentPage <= 1}
+                  title="first"
+                  onClick={() => onPageChangeHandler(1)}
+                  data-paginate="first"
+                >
+                  <Icon icon={Icons.NavigationFirst} />
+                </IconButton>
+              }
+              {
+                <IconButton
+                  disabled={currentPage <= 1}
+                  title="previous"
+                  onClick={() => onPageChangeHandler(currentPage - 1)}
+                  data-paginate="previous"
+                >
+                  <Icon icon={Icons.ChevronLeft} />
+                </IconButton>
+              }
+            </div>
+          )}
+          <div className={classes["next"]}>
+            {(currentPage !== undefined || false) && (
+              <IconButton
+                disabled={currentPage >= pagesAmount}
+                title="next"
+                onClick={() => onPageChangeHandler(currentPage + 1)}
+                data-paginate="next"
+              >
+                <Icon icon={Icons.ChevronRight} />
+              </IconButton>
+            )}
+            {!!currentPage && (
+              <IconButton
+                disabled={currentPage >= pagesAmount}
+                title="last"
+                onClick={() => onPageChangeHandler(Math.ceil(totalElements / pageSize))}
+                data-paginate="last"
+              >
+                <Icon icon={Icons.NavigationLast} />
+              </IconButton>
+            )}
+          </div>
+        </Fragment>
+      </div>
+    </div>
+  );
+};
+
+export const Pagination = React.forwardRef(PaginationComponent);

package/src/components/Popover/Popover.module.scss

@@ -0,0 +1,42 @@
+/*!
+ * 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";
+
+.popover {
+  $transition-property: transform, opacity;
+
+  position: fixed;
+  z-index: variables.$popover-z-index;
+  pointer-events: none;
+  background-color: var(--light);
+  border-radius: 0.125rem;
+  box-shadow:
+    0px 4px 5px 0px rgba(1, 5, 50, 0.2),
+    0px 3px 14px 0px rgba(1, 5, 50, 0.12),
+    0px 8px 10px 0px rgba(1, 5, 50, 0.14);
+  opacity: 0;
+  transform: scale(0.5);
+
+  @include mixins.transition($transition-property, 0.2s, ease-in-out);
+
+  &.show {
+    transform: scale(1);
+    pointer-events: auto;
+    opacity: 1;
+  }
+}

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,142 @@
+/*
+ * 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,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Offset, Placement, PositionType, usePosition } from "../../hooks/usePosition";
+import classes from "./Popover.module.scss";
+
+export interface Props extends ComponentPropsWithRef<"div"> {
+  children?: ReactNode;
+  show?: boolean;
+  anchorEl?: RefObject<HTMLOrSVGElement>; //eslint-disable-line no-undef
+  placement?: Placement;
+  offset?: Offset;
+  debounceAmount?: number;
+  transformOrigin?: Placement;
+  onAnchorOutOfView?: () => void;
+}
+
+const PopoverComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
+  {
+    children,
+    className,
+    show,
+    placement,
+    offset,
+    debounceAmount,
+    transformOrigin,
+    anchorEl,
+    onAnchorOutOfView,
+    ...rest
+  },
+  ref
+) => {
+  const [showPopover, setShowPopover] = useState(false);
+  const elToBePositioned = useRef<HTMLDivElement>(null);
+  const { top, left, right, bottom, calculatePosition, initialCalculationDone } = usePosition({
+    elementToBePositioned: elToBePositioned,
+    relativeElement: anchorEl,
+    offset: offset,
+    placement: placement,
+    transformOrigin: transformOrigin,
+    debounceAmount: debounceAmount ?? undefined
+  });
+
+  const normalizePosition = (value: PositionType) => {
+    if (value === "initial") {
+      return "initial";
+    }
+
+    if (isNaN(value)) {
+      return 0;
+    }
+
+    return Number(value);
+  };
+
+  useEffect(() => {
+    if (initialCalculationDone) {
+      setShowPopover(!!show);
+    }
+  }, [show, initialCalculationDone]);
+
+  useEffect(() => {
+    if (!showPopover) {
+      return;
+    }
+
+    window.addEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition);
+
+    return () => {
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition);
+    };
+  }, [showPopover]);
+
+  useEffect(() => {
+    calculatePosition();
+  }, [showPopover, elToBePositioned, anchorEl]);
+
+  useEffect(() => {
+    const anchor = anchorEl?.current as HTMLElement;
+
+    if (anchor) {
+      const anchorTop = anchor.getBoundingClientRect().top;
+      const anchorBottom = anchor.getBoundingClientRect().bottom;
+
+      const isAnchorOffscreen =
+        showPopover &&
+        (Number(top) < 0 ||
+          Number(left) < 0 ||
+          Number(right) < 0 ||
+          Number(bottom) < 0 ||
+          anchorTop < 0 ||
+          anchorBottom > window.innerHeight);
+
+      if (isAnchorOffscreen) {
+        onAnchorOutOfView?.();
+      }
+    }
+  }, [top, left, right, bottom]);
+
+  return (
+    <div ref={ref} {...rest}>
+      <div
+        ref={elToBePositioned}
+        className={`${classes.popover} ${className ?? ""} ${showPopover ? classes.show : ""}`}
+        style={{
+          top: normalizePosition(top),
+          left: normalizePosition(left),
+          right: normalizePosition(right),
+          bottom: normalizePosition(bottom)
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export const Popover = React.forwardRef(PopoverComponent);