@vygruppen/spor-react 11.3.9 → 12.0.0

package/src/datepicker/TimePicker.tsx

@@ -1,4 +1,5 @@
-import { BoxProps, useFormControlContext } from "@chakra-ui/react";
+"use client";
+import { BoxProps, useFieldContext } from "@chakra-ui/react";
 import { CalendarDateTime } from "@internationalized/date";
 import { TimeValue } from "@react-types/datepicker";
 import {
@@ -11,6 +12,7 @@ import { IconButton, createTexts, useTranslation } from "..";
 import { StyledField } from "./StyledField";
 import { TimeField } from "./TimeField";
 import { getCurrentTime, useCurrentLocale } from "./utils";
+import { Field } from "@/input/Field";
 
 type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
   /** The label. Defaults to a localized version of "Time" */
@@ -40,7 +42,7 @@ type TimePickerProps = Omit<BoxProps, "defaultValue" | "onChange"> & {
    */
   minuteInterval?: number;
   /** Whether or not the field is disabled */
-  isDisabled?: boolean;
+  disabled?: boolean;
 };
 /** A time picker component.
  *
@@ -66,13 +68,13 @@ export const TimePicker = ({
   defaultValue = getCurrentTime(),
   onChange = () => {},
   minuteInterval = 30,
-  isDisabled: isDisabledExternally = false,
+  disabled: isDisabledExternally = false,
   name,
   ...boxProps
 }: TimePickerProps) => {
-  const { isDisabled: isFormControlDisabled, isInvalid: isFormControlInvalid } =
-    useFormControlContext() ?? {};
-  const isDisabled = isDisabledExternally ?? isFormControlDisabled ?? false;
+  const { disabled: fieldDisabled, invalid: fieldInvalid } =
+    useFieldContext() ?? {};
+  const isDisabled = isDisabledExternally ?? fieldDisabled ?? false;
   const { t } = useTranslation();
   const locale = useCurrentLocale();
   const label = externalLabel ?? t(texts.time);
@@ -83,7 +85,7 @@ export const TimePicker = ({
     locale,
     isDisabled,
     label,
-    validationState: isFormControlInvalid ? "invalid" : "valid",
+    validationState: fieldInvalid ? "invalid" : "valid",
   });
 
   const dateTime = state.value as CalendarDateTime | null;
@@ -124,44 +126,45 @@ export const TimePicker = ({
     texts.selectedTimeIs(`${dateTime?.hour ?? 0} ${dateTime?.minute ?? 0}`),
   )}`;
   return (
-    <StyledField
-      variant="base"
-      width="fit-content"
-      paddingX={2}
-      alignItems="center"
-      justifyContent="space-between"
-      gap={2}
-      opacity={isDisabled ? 0.5 : 1}
-      pointerEvents={isDisabled ? "none" : "auto"}
-      aria-disabled={isDisabled}
-      aria-live="assertive"
-      aria-label={ariaLabel}
-      {...boxProps}
-    >
-      <IconButton
-        variant="ghost"
-        size="xs"
-        borderRadius="xs"
-        aria-label={backwardsLabel}
-        title={backwardsLabel}
-        icon={<DropdownLeftFill18Icon />}
-        onClick={handleBackwardsClick}
-        isDisabled={isDisabled}
-        style={isDisabled ? { backgroundColor: "transparent" } : {}}
-      />
-      <TimeField label={label} state={state} name={name} />
-      <IconButton
-        variant="ghost"
-        size="xs"
-        borderRadius="xs"
-        aria-label={forwardsLabel}
-        title={forwardsLabel}
-        icon={<DropdownRightFill18Icon />}
-        onClick={handleForwardClick}
-        isDisabled={isDisabled}
-        style={isDisabled ? { backgroundColor: "transparent" } : {}}
-      />
-    </StyledField>
+    <Field as="time" {...boxProps}>
+      <StyledField
+        width="fit-content"
+        paddingX={2}
+        alignItems="center"
+        justifyContent="space-between"
+        gap={2}
+        opacity={isDisabled ? 0.5 : 1}
+        pointerEvents={isDisabled ? "none" : "auto"}
+        aria-disabled={isDisabled}
+        aria-live="assertive"
+        aria-label={ariaLabel}
+        {...boxProps}
+      >
+        <IconButton
+          variant="ghost"
+          size="xs"
+          borderRadius="xs"
+          aria-label={backwardsLabel}
+          title={backwardsLabel}
+          icon={<DropdownLeftFill18Icon />}
+          onClick={handleBackwardsClick}
+          disabled={isDisabled}
+          style={isDisabled ? { backgroundColor: "transparent" } : {}}
+        />
+        <TimeField label={label} state={state} name={name} />
+        <IconButton
+          variant="ghost"
+          size="xs"
+          borderRadius="xs"
+          aria-label={forwardsLabel}
+          title={forwardsLabel}
+          icon={<DropdownRightFill18Icon />}
+          onClick={handleForwardClick}
+          disabled={isDisabled}
+          style={isDisabled ? { backgroundColor: "transparent" } : {}}
+        />
+      </StyledField>
+    </Field>
   );
 };
 

package/src/datepicker/types.ts

@@ -0,0 +1,5 @@
+import { ConditionalValue } from "@chakra-ui/react";
+
+export type CalendarVariants = {
+  variant?: ConditionalValue<"core" | "floating" | "ghost">;
+};

package/src/dialog/Dialog.tsx

@@ -0,0 +1,56 @@
+"use client";
+import { Dialog as ChakraDialog, Portal } from "@chakra-ui/react";
+import * as React from "react";
+import { CloseButton } from "../button";
+
+interface DialogContentProps extends ChakraDialog.ContentProps {
+  portalled?: boolean;
+  portalRef?: React.RefObject<HTMLElement>;
+  backdrop?: boolean;
+  children?: React.ReactNode;
+}
+
+export const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  DialogContentProps
+>((props, ref) => {
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    backdrop = true,
+    ...rest
+  } = props;
+
+  return (
+    <Portal disabled={!portalled} container={portalRef}>
+      {backdrop && <ChakraDialog.Backdrop />}
+      <ChakraDialog.Positioner>
+        <ChakraDialog.Content ref={ref} {...rest} asChild={false}>
+          {children}
+        </ChakraDialog.Content>
+      </ChakraDialog.Positioner>
+    </Portal>
+  );
+});
+
+export const DialogCloseTrigger = React.forwardRef<
+  HTMLButtonElement,
+  ChakraDialog.CloseTriggerProps
+>(function DialogCloseTrigger(props, ref) {
+  return (
+    <ChakraDialog.CloseTrigger ref={ref} {...props} asChild>
+      <CloseButton size="md" />
+    </ChakraDialog.CloseTrigger>
+  );
+});
+
+export const DialogRoot = ChakraDialog.Root;
+export const DialogFooter = ChakraDialog.Footer;
+export const DialogHeader = ChakraDialog.Header;
+export const DialogBody = ChakraDialog.Body;
+export const DialogBackdrop = ChakraDialog.Backdrop;
+export const DialogTitle = ChakraDialog.Title;
+export const DialogDescription = ChakraDialog.Description;
+export const DialogTrigger = ChakraDialog.Trigger;
+export const DialogActionTrigger = ChakraDialog.ActionTrigger;

package/src/dialog/Drawer.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import {
+  Box,
+  Drawer as ChakraDrawer,
+  createContext,
+  Grid,
+  GridItem,
+  Portal,
+} from "@chakra-ui/react";
+import {
+  ArrowLeftFill24Icon,
+  CloseFill24Icon,
+} from "@vygruppen/spor-icon-react";
+import React, { forwardRef } from "react";
+import { Button, CloseButton } from "../button";
+import { createTexts, useTranslation } from "../i18n";
+import {
+  DrawerContentProps,
+  DrawerFullScreenHeaderProps,
+  DrawerProps,
+} from "./types";
+
+/**
+ * A drawer is a panel that slides in from the side of the screen. It is used to display additional content without taking up too much space.
+ *
+ * Basic example:
+ *
+ * ```tsx
+ * <Drawer placement="bottom" size="md">
+ *  <DrawerTrigger asChild>
+ *    <Button variant="primary">Open drawer</Button>
+ *  </DrawerTrigger>
+ *  <DrawerContent>
+ *    <DrawerHeader>
+ *      <DrawerCloseTrigger />
+ *      <DrawerTitle>Drawer title</DrawerTitle>
+ *    </DrawerHeader>
+ *    <DrawerBody>
+ *      Drawer content
+ *    </DrawerBody>
+ *   </DrawerContent>
+ * </Drawer>
+ * ```
+ */
+
+type DrawerContextProps = ChakraDrawer.RootProps;
+
+const [RootDrawerProvider, useRootDrawerProps] =
+  createContext<DrawerContextProps>({
+    name: "RootDrawerProvider",
+  });
+
+export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>(
+  (props, ref) => {
+    const { children, portalled = true, portalRef, ...rest } = props;
+    const { size, placement } = useRootDrawerProps();
+    const sizeNotFull = size !== "full";
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ChakraDrawer.Positioner>
+          <ChakraDrawer.Content ref={ref} {...rest}>
+            {sizeNotFull && placement === "bottom" && <CloseDrawerLine />}
+            {children}
+            {sizeNotFull && placement === "top" && <CloseDrawerLine />}
+          </ChakraDrawer.Content>
+        </ChakraDrawer.Positioner>
+      </Portal>
+    );
+  },
+);
+
+export const CloseDrawerLine = forwardRef<HTMLButtonElement, {}>(
+  (props, ref) => {
+    const { t } = useTranslation();
+    return (
+      <ChakraDrawer.CloseTrigger
+        {...props}
+        ref={ref}
+        position="relative"
+        insetEnd="unset"
+        aria-label={t(texts.close)}
+        cursor="pointer"
+        top={0}
+        paddingY={2}
+      >
+        <Box
+          width={7}
+          height={1}
+          backgroundColor="silver"
+          borderRadius="xs"
+          marginX="auto"
+        />
+      </ChakraDrawer.CloseTrigger>
+    );
+  },
+);
+
+export const DrawerCloseTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraDrawer.CloseTriggerProps
+>(function DrawerCloseTrigger(props, ref) {
+  const { size } = useRootDrawerProps();
+  const { t } = useTranslation();
+  return (
+    <ChakraDrawer.CloseTrigger ref={ref} {...props} asChild>
+      {size === "full" ? (
+        <Button variant="ghost" leftIcon={<CloseFill24Icon />}>
+          {t(texts.close)}
+        </Button>
+      ) : (
+        <CloseButton size="md" />
+      )}
+    </ChakraDrawer.CloseTrigger>
+  );
+});
+
+export const DrawerBackTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraDrawer.CloseTriggerProps
+>((props, ref) => {
+  const { t } = useTranslation();
+  return (
+    <ChakraDrawer.CloseTrigger asChild {...props} ref={ref} top="0">
+      <Button variant="ghost" leftIcon={<ArrowLeftFill24Icon />}>
+        {t(texts.back)}
+      </Button>
+    </ChakraDrawer.CloseTrigger>
+  );
+});
+
+export const DrawerFullScreenHeader = forwardRef<
+  HTMLDivElement,
+  DrawerFullScreenHeaderProps
+>((props, ref) => {
+  const { backTrigger = true, title } = props;
+  return (
+    <ChakraDrawer.Header {...props} ref={ref} asChild>
+      <Grid templateColumns="1fr auto 1fr" height="auto" paddingX="8">
+        <GridItem width="full" alignSelf="center">
+          {backTrigger && <DrawerBackTrigger />}
+        </GridItem>
+        <GridItem width="full" alignSelf="end" asChild>
+          {title && <DrawerTitle>{title}</DrawerTitle>}
+        </GridItem>
+        <GridItem width="full" alignSelf="end">
+          <DrawerCloseTrigger justifySelf="end" top="0" />
+        </GridItem>
+      </Grid>
+    </ChakraDrawer.Header>
+  );
+});
+
+export const Drawer = (props: DrawerProps) => {
+  const { children, placement, size = "md", ...rest } = props;
+  return (
+    <RootDrawerProvider value={props}>
+      <ChakraDrawer.Root {...rest} placement={placement} size={size}>
+        <DrawerBackdrop />
+        {children}
+      </ChakraDrawer.Root>
+    </RootDrawerProvider>
+  );
+};
+
+export const DrawerTrigger = ChakraDrawer.Trigger;
+export const DrawerFooter = ChakraDrawer.Footer;
+export const DrawerBody = ChakraDrawer.Body;
+export const DrawerBackdrop = ChakraDrawer.Backdrop;
+export const DrawerTitle = ChakraDrawer.Title;
+export const DrawerActionTrigger = ChakraDrawer.ActionTrigger;
+export const DrawerHeader = ChakraDrawer.Header;
+
+const texts = createTexts({
+  back: {
+    en: "Back",
+    nb: "Tilbake",
+    nn: "Tilbake",
+    sv: "Tillbaka",
+  },
+  close: {
+    en: "Close",
+    nb: "Lukk",
+    nn: "Lukk",
+    sv: "Stäng",
+  },
+});

package/src/dialog/index.ts

@@ -0,0 +1,2 @@
+export * from "./Drawer";
+export * from "./Dialog";

package/src/dialog/types.ts

@@ -0,0 +1,26 @@
+import { drawerSlotRecipe } from "@/theme/slot-recipes/drawer";
+import { RecipeVariantProps, Drawer as ChakraDrawer } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
+
+export type DrawerVariantProps = RecipeVariantProps<typeof drawerSlotRecipe>;
+
+export type DrawerContentProps = ChakraDrawer.ContentProps &
+  PropsWithChildren<DrawerVariantProps> & {
+    children: React.ReactNode;
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+  };
+
+export type DrawerProps = Omit<
+  ChakraDrawer.RootProps,
+  "colorPalette" | "contained" | "unstyled"
+> &
+  ChakraDrawer.RootProps &
+  PropsWithChildren<DrawerVariantProps> & {
+    children: React.ReactNode;
+  };
+
+export type DrawerFullScreenHeaderProps = ChakraDrawer.HeaderProps & {
+  backTrigger?: boolean;
+  title?: string;
+};

package/src/image/index.tsx

@@ -1,2 +1,2 @@
-export { Image, Img } from "@chakra-ui/react";
-export type { ImageProps, ImgProps } from "@chakra-ui/react";
+export { Image } from "@chakra-ui/react";
+export type { ImageProps } from "@chakra-ui/react";

package/src/index.tsx

@@ -3,7 +3,10 @@ export * from "./accordion";
 export * from "./alert";
 export * from "./breadcrumb";
 export * from "./button";
+export * from "./color-mode";
 export * from "./datepicker";
+export * from "./theme/brand";
+export * from "./theme";
 export * from "./i18n";
 export * from "./image";
 export * from "./input";
@@ -14,7 +17,7 @@ export * from "./list";
 export * from "./loader";
 export * from "./logo";
 export * from "./media-controller";
-export * from "./modal";
+export * from "./dialog";
 export * from "./nudge";
 export * from "./pagination";
 export * from "./progress-indicator";
@@ -22,9 +25,8 @@ export * from "./provider";
 export * from "./stepper";
 export * from "./tab";
 export * from "./table";
-export * from "./theme";
 export * from "./toast";
-export * from "./tooltip";
 export * from "./transition";
 export * from "./typography";
 export * from "./util";
+export * from "./popover";

package/src/input/AttachedInputs.tsx

@@ -1,7 +1,10 @@
-import React from "react";
-import { Flex, FlexProps } from "..";
+"use client";
+
+import React, { forwardRef, PropsWithChildren } from "react";
+import { chakra, Group, RecipeVariantProps, useRecipe } from "@chakra-ui/react";
+import { attachedInputsRecipe } from "@/theme/recipes/attached-inputs";
+import { InputGroupProps } from "./InputGroup";
 
-type AttachedInputsProps = FlexProps;
 /**
  * Attaches several inputs together, so that they look like one input.
  *
@@ -14,42 +17,14 @@ type AttachedInputsProps = FlexProps;
  * </AttachedInputs>
  * ```
  */
-export const AttachedInputs = ({
-  flexDirection = "row",
-  ...rest
-}: AttachedInputsProps) => {
-  const attachedStyles = {
-    horizontal: {
-      "> *:first-of-type:not(:last-of-type) [data-attachable]": {
-        borderEndRadius: 0,
-      },
-      "> *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-        borderRadius: 0,
-      },
-      "> *:not(:first-of-type):last-of-type [data-attachable]": {
-        borderStartRadius: 0,
-      },
-    },
-    vertical: {
-      "> *:first-of-type:not(:last-of-type) [data-attachable]": {
-        borderBottomRadius: 0,
-      },
-      "> *:not(:first-of-type):not(:last-of-type) [data-attachable]": {
-        borderRadius: 0,
-      },
-      "> *:not(:first-of-type):last-of-type [data-attachable]": {
-        borderTopRadius: 0,
-      },
-    },
-  };
-  const direction = flexDirection === "row" ? "horizontal" : "vertical";
-  return (
-    <Flex
-      role="group"
-      __css={attachedStyles[direction]}
-      display="flex"
-      flexDirection={flexDirection}
-      {...rest}
-    />
-  );
-};
+
+export type AttachedInputsProps = RecipeVariantProps<
+  typeof attachedInputsRecipe
+> &
+  InputGroupProps;
+
+const StyledGroup = chakra(Group, attachedInputsRecipe);
+
+export const AttachedInputs = forwardRef<HTMLDivElement, AttachedInputsProps>(
+  (props, ref) => <StyledGroup ref={ref} attached {...props} />,
+);