@simplybusiness/mobius 3.10.0 → 3.11.0

package/src/components/DatePicker/DatePicker.tsx

@@ -1,102 +0,0 @@
-"use client";
-
-import {
-  DatePickerStateOptions,
-  useDatePickerState,
-} from "@react-stately/datepicker";
-import { AriaDatePickerProps, useDatePicker } from "@react-aria/datepicker";
-import { useRef } from "react";
-import { ModalProvider } from "@react-aria/overlays";
-import { DateValue } from "@internationalized/date";
-import { useHover } from "@react-aria/interactions";
-import { useFocusRing } from "@react-aria/focus";
-import clsx from "clsx";
-import { VisuallyHidden } from "@react-aria/visually-hidden";
-import { DateField } from "./DateField";
-import { Button } from "../Button";
-import { Popover } from "./Popover";
-import { Calendar } from "./Calendar";
-import { Label } from "../Label";
-
-export interface DatePickerProps
-  extends AriaDatePickerProps<DateValue>,
-    DatePickerStateOptions<DateValue> {
-  label: string;
-}
-
-export function DatePicker(props: DatePickerProps) {
-  const { label, isRequired } = props;
-  const state = useDatePickerState(props);
-  const ref = useRef<HTMLDivElement | null>(null);
-  const {
-    groupProps,
-    labelProps,
-    fieldProps,
-    buttonProps,
-    dialogProps,
-    calendarProps,
-  } = useDatePicker(props, state, ref);
-
-  const classes = clsx("mobius/DatePicker", {
-    "--is-valid": state.validationState === "valid",
-    "--is-invalid": state.validationState === "invalid",
-    "--is-required": typeof isRequired === "boolean" && isRequired,
-    "--is-optional": typeof isRequired === "boolean" && !isRequired,
-  });
-
-  const { hoverProps, isHovered } = useHover({
-    ...props,
-  });
-
-  const { focusProps, isFocusVisible } = useFocusRing(props);
-
-  const dateFieldGroupClasses = clsx("mobius/DateFieldGroup", {
-    "--is-hovered": isHovered,
-    "--is-focused": isFocusVisible,
-  });
-
-  const dateFieldClasses = clsx("mobius/DateField", {
-    "--is-hovered": isHovered,
-    "--is-focused": isFocusVisible,
-  });
-
-  const buttonClasses = clsx("mobius/DateFieldButton", {
-    "--is-hovered": isHovered,
-    "--is-focused": isFocusVisible,
-  });
-
-  return (
-    <ModalProvider>
-      <div className={classes} style={{ position: "relative" }}>
-        <Label {...labelProps}>{label}</Label>
-        <div
-          {...groupProps}
-          {...hoverProps}
-          {...focusProps}
-          ref={ref}
-          className={dateFieldGroupClasses}
-        >
-          <DateField {...fieldProps} className={dateFieldClasses} />
-          {/* @ts-expect-error wrong type for onPress */}
-          <Button
-            variant="secondary"
-            {...buttonProps}
-            className={buttonClasses}
-          >
-            <VisuallyHidden>Pick date</VisuallyHidden>
-          </Button>
-        </div>
-        {state.isOpen && (
-          /* @ts-expect-error */
-          <Popover
-            {...dialogProps}
-            isOpen={state.isOpen}
-            onClose={() => state.setOpen(false)}
-          >
-            <Calendar {...calendarProps} />
-          </Popover>
-        )}
-      </div>
-    </ModalProvider>
-  );
-}

package/src/components/DatePicker/DateSegment.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import { useDateSegment } from "@react-aria/datepicker";
-import { useFocusRing } from "@react-aria/focus";
-import {
-  DateFieldState,
-  DateSegment as DateSegmentType,
-} from "@react-stately/datepicker";
-import clsx from "clsx";
-import { useRef } from "react";
-
-export interface DateSegmentProps {
-  segment: DateSegmentType;
-  state: DateFieldState;
-}
-
-export function DateSegment({ segment, state }: DateSegmentProps) {
-  const ref = useRef<HTMLDivElement | null>(null);
-  const { segmentProps } = useDateSegment(segment, state, ref);
-
-  const { focusProps, isFocusVisible } = useFocusRing();
-
-  const classes = clsx("mobius/DateSegment", {
-    "--is-literal": segment.type === "literal",
-    "--is-placeholder": segment.isPlaceholder,
-    "--is-focused": isFocusVisible,
-  });
-
-  return (
-    <div {...segmentProps} {...focusProps} ref={ref} className={classes}>
-      {segment.text}
-    </div>
-  );
-}

package/src/components/DatePicker/Popover.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import { FocusScope } from "@react-aria/focus";
-import { useDialog } from "@react-aria/dialog";
-import {
-  useOverlay,
-  useModal,
-  DismissButton,
-  AriaOverlayProps,
-} from "@react-aria/overlays";
-import { AriaDialogProps } from "@react-types/dialog";
-import { mergeProps } from "@react-aria/utils";
-import { ReactNode, Ref, useRef } from "react";
-
-export interface PopoverProps extends AriaDialogProps, AriaOverlayProps {
-  popoverRef: Ref<HTMLElement>;
-  children: ReactNode;
-}
-
-export function Popover(props: PopoverProps) {
-  const ref = useRef();
-  const { popoverRef = ref, isOpen, onClose, children, ...otherProps } = props;
-
-  // Handle events that should cause the popup to close,
-  // e.g. blur, clicking outside, or pressing the escape key.
-  const { overlayProps } = useOverlay(
-    {
-      isOpen,
-      onClose,
-      shouldCloseOnBlur: true,
-      isDismissable: true,
-    },
-    /* @ts-expect-error */
-    popoverRef,
-  );
-
-  const { modalProps } = useModal();
-  /* @ts-expect-error */
-  const { dialogProps } = useDialog(otherProps, popoverRef);
-
-  // Add a hidden <DismissButton> component at the end of the popover
-  // to allow screen reader users to dismiss the popup easily.
-  return (
-    <FocusScope contain restoreFocus>
-      <div
-        className="mobius/DatePickerPopover"
-        {...mergeProps(overlayProps, modalProps, dialogProps)}
-        /* @ts-expect-error */
-        ref={popoverRef}
-        style={{
-          position: "absolute",
-          marginTop: 4,
-          zIndex: 1,
-        }}
-      >
-        {children}
-        <DismissButton onDismiss={onClose} />
-      </div>
-    </FocusScope>
-  );
-}

package/src/components/DatePicker/index.tsx

@@ -1,2 +0,0 @@
-export * from "./DatePicker";
-export { parseDate } from "@internationalized/date";

package/src/components/Icon/IconFromName.tsx

@@ -1,31 +0,0 @@
-import { forwardRef, useContext } from "react";
-import * as baseIcons from "@simplybusiness/icons";
-import { ForwardedRefComponent } from "../../types/components";
-import { IconFromObject } from "./IconFromObject";
-import { IconFromNameProps, IconRef } from "./types";
-import { ThemeContext } from "../../contexts";
-
-const IconFromName: ForwardedRefComponent<IconFromNameProps, SVGSVGElement> =
-  forwardRef((props: IconFromNameProps, ref: IconRef) => {
-    const { name, ...otherProps } = props;
-    const { icons } = useContext(ThemeContext);
-
-    if (!icons)
-      throw new Error("No icons have been been found in ThemeContext");
-
-    // Lookup icon from partner icon set (if available); load default Mobius icons otherwise
-    const mappedIcon =
-      Object.keys(icons).length === 0 ? baseIcons[name] : icons[name];
-
-    if (!mappedIcon) {
-      // eslint-disable-next-line no-console
-      console.warn(`Icon with the following name could not be found: ${name}`);
-
-      return null;
-    }
-
-    return <IconFromObject icon={mappedIcon} {...otherProps} ref={ref} />;
-  });
-
-IconFromName.displayName = "IconFromName";
-export { IconFromName };

package/src/components/Icon/IconFromObject.tsx

@@ -1,58 +0,0 @@
-import { forwardRef } from "react";
-import clsx from "clsx";
-import { ForwardedRefComponent } from "../../types/components";
-import { IconFromObjectProps, IconRef } from "./types";
-
-const IconFromObject: ForwardedRefComponent<
-  IconFromObjectProps,
-  SVGSVGElement
-> = forwardRef((props: IconFromObjectProps, ref: IconRef) => {
-  const {
-    icon: {
-      width,
-      height,
-      svgPathData,
-      iconType,
-      strokeWidth = 1.5,
-      fill = "none",
-    },
-    spin = false,
-    ...otherProps
-  } = props;
-
-  const strokePath = (
-    <g fillRule="evenodd" fill={fill}>
-      <path
-        stroke="currentColor"
-        strokeWidth={strokeWidth}
-        strokeLinecap="square"
-        d={svgPathData}
-      />
-    </g>
-  );
-
-  const fillPath = <path fill="currentColor" d={svgPathData} />;
-
-  const classes = clsx("mobius", "mobius/Icon", otherProps.className, {
-    "--is-spinning": spin,
-  });
-
-  otherProps.className = classes;
-
-  return (
-    <svg
-      aria-hidden="true"
-      focusable="false"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox={`0 0 ${width} ${height}`}
-      ref={ref}
-      {...otherProps}
-    >
-      {iconType === "fill" ? fillPath : strokePath}
-    </svg>
-  );
-});
-
-IconFromObject.displayName = "IconFromObject";
-export { IconFromObject };

package/src/hooks/useHideColumns/index.tsx

@@ -1 +0,0 @@
-export * from "./useHideColumns";

package/src/hooks/useHideColumns/useHideColumns.test.ts

@@ -1,41 +0,0 @@
-import { renderHook } from "@testing-library/react";
-import { useHideColumns } from ".";
-import { SizeType } from "../../types/size";
-
-const mockDown = jest.fn();
-jest.mock("../useBreakpoint", () => ({
-  useBreakpoint: () => ({
-    breakpoint: jest.fn(),
-    up: jest.fn(),
-    down: mockDown,
-  }),
-}));
-
-const mockSetHiddenColumns = jest.fn();
-const mockCollapseData = {
-  collapseOnSize: "md" as SizeType,
-  collapseColumns: ["highest_excess"],
-};
-
-describe("useHideColumns", () => {
-  it("should call setHiddenColumns handler if 'collapseData' is provided", () => {
-    renderHook(() => useHideColumns(mockSetHiddenColumns, mockCollapseData));
-    expect(mockSetHiddenColumns).toHaveBeenCalledTimes(1);
-  });
-
-  it("should call setHiddenColumns with provided collapseColumns if useBreakpoint hook returns true", () => {
-    mockDown.mockImplementationOnce(() => true);
-    renderHook(() => useHideColumns(mockSetHiddenColumns, mockCollapseData));
-    expect(mockSetHiddenColumns).toHaveBeenCalledTimes(1);
-    expect(mockSetHiddenColumns).toHaveBeenCalledWith(
-      mockCollapseData.collapseColumns,
-    );
-  });
-
-  it("should call setHiddenColumns with empty array if useBreakpoint hook returns false", () => {
-    mockDown.mockImplementationOnce(() => false);
-    renderHook(() => useHideColumns(mockSetHiddenColumns, mockCollapseData));
-    expect(mockSetHiddenColumns).toHaveBeenCalledTimes(1);
-    expect(mockSetHiddenColumns).toHaveBeenCalledWith([]);
-  });
-});

package/src/hooks/useHideColumns/useHideColumns.ts

@@ -1,25 +0,0 @@
-"use client";
-
-import { useEffect } from "react";
-import { CollapseDataType } from "../../components/DataTable/types";
-import { useBreakpoint } from "../useBreakpoint";
-
-const useHideColumns = (
-  setHiddenColumns: (cols: string[]) => void,
-  collapseData?: CollapseDataType,
-) => {
-  const { down } = useBreakpoint();
-
-  useEffect(() => {
-    if (collapseData) {
-      if (down(collapseData.collapseOnSize)) {
-        setHiddenColumns(collapseData.collapseColumns);
-      } else {
-        setHiddenColumns([]);
-      }
-    }
-  }, [collapseData, down, setHiddenColumns]);
-};
-
-useHideColumns.displayName = "useHideColumns";
-export { useHideColumns };