@vygruppen/spor-react 12.24.14 → 12.24.16

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.24.14",
+  "version": "12.24.16",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,8 +46,8 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
-    "@vygruppen/spor-design-tokens": "4.3.3",
     "@vygruppen/spor-icon-react": "4.5.3",
+    "@vygruppen/spor-design-tokens": "4.3.3",
     "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
@@ -68,8 +68,8 @@
     "vitest": "^0.26.3",
     "vitest-axe": "^0.1.0",
     "vitest-canvas-mock": "^0.2.2",
-    "@vygruppen/tsconfig": "0.1.1",
-    "@vygruppen/eslint-config": "2.1.0"
+    "@vygruppen/eslint-config": "2.1.0",
+    "@vygruppen/tsconfig": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0 <19.0.0",

package/src/calendar/CalendarCell.tsx

@@ -1,11 +1,19 @@
 import { CalendarDate, isSameDay, isSameMonth } from "@internationalized/date";
-import { useRef } from "react";
+import { PointerEvent as ReactPointerEvent, useRef } from "react";
 import { mergeProps, useCalendarCell, useFocusRing } from "react-aria";
 
 import { useCalendar } from "@/calendar/CalendarContext";
 import { Box } from "@/layout";
 import { Text } from "@/typography";
 
+const IS_TOUCH_PRIMARY =
+  globalThis.window !== undefined &&
+  globalThis.window.matchMedia?.("(pointer: coarse)").matches;
+
+function isPhantomPointer(event: ReactPointerEvent) {
+  return IS_TOUCH_PRIMARY && event.pointerType === "mouse";
+}
+
 type Props = {
   date: CalendarDate;
   currentMonth: CalendarDate;
@@ -29,10 +37,28 @@ export function CalendarCell({ date, currentMonth }: Props) {
       ? isSameDay(date, state.highlightedRange.end)
       : false;
 
-  const isSingleModeSelected = mode === "single" && isSelected;
+  const isEdge =
+    (mode === "single" && isSelected) || isSelectionStart || isSelectionEnd;
+  const isMiddle = isSelected && !isEdge && mode === "range";
 
   const { focusProps, isFocusVisible } = useFocusRing();
 
+  const merged = mergeProps(buttonProps, focusProps);
+
+  // iOS 26 bug with pointer events: https://bugs.webkit.org/show_bug.cgi?id=214609
+  const interactionProps =
+    mode === "range" && IS_TOUCH_PRIMARY
+      ? {
+          ...merged,
+          onPointerEnter: (event: ReactPointerEvent<HTMLDivElement>) => {
+            if (!isPhantomPointer(event)) merged.onPointerEnter?.(event);
+          },
+          onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => {
+            if (!isPhantomPointer(event)) merged.onPointerMove?.(event);
+          },
+        }
+      : merged;
+
   return (
     <td
       {...cellProps}
@@ -42,7 +68,7 @@ export function CalendarCell({ date, currentMonth }: Props) {
       }}
     >
       <Box
-        {...mergeProps(buttonProps, focusProps)}
+        {...interactionProps}
         ref={ref}
         hidden={isOutsideMonth}
         width={["54px", null, "70px"]}
@@ -57,35 +83,10 @@ export function CalendarCell({ date, currentMonth }: Props) {
           alignItems="center"
           justifyContent="center"
           borderRadius="sm"
-          css={{
-            cursor: "pointer",
-            color: isDisabled ? "text.disabled" : undefined,
-            // Single mode: Selected styling
-            ...(isSingleModeSelected && {
-              backgroundColor: "brand.surface",
-              color: "text.inverted",
-            }),
-            // Range mode: Selection start/end styling
-            ...((isSelectionStart || isSelectionEnd) && {
-              backgroundColor: "brand.surface",
-              color: "text.inverted",
-            }),
-            // Range mode: Middle range styling
-            ...(isSelected &&
-              !(isSelectionStart || isSelectionEnd) &&
-              mode === "range" && {
-                backgroundColor: "surface.secondary",
-                color: "text",
-              }),
-            // Non-selected hover state
-            ...(!isSelected &&
-              !isDisabled && {
-                "&:hover": {
-                  backgroundColor: "surface.secondary",
-                  color: "text",
-                },
-              }),
-          }}
+          css={cellStyles}
+          data-disabled={isDisabled || undefined}
+          data-edge={isEdge || undefined}
+          data-middle={isMiddle || undefined}
         >
           <Text variant="sm">{formattedDate}</Text>
         </Box>
@@ -93,3 +94,28 @@ export function CalendarCell({ date, currentMonth }: Props) {
     </td>
   );
 }
+
+const cellStyles = {
+  cursor: "pointer",
+  // Disabled
+  "&[data-disabled]": {
+    color: "text.disabled",
+  },
+  // Selection edge (single-mode selected OR range start/end)
+  "&[data-edge]": {
+    backgroundColor: "brand.surface",
+    color: "text.inverted",
+  },
+  // Range middle
+  "&[data-middle]": {
+    backgroundColor: "surface.secondary",
+    color: "text",
+  },
+  // Hover for non-selected, non-disabled cells on devices that support hover
+  "@media (hover: hover)": {
+    "&:not([data-edge]):not([data-middle]):not([data-disabled]):hover": {
+      backgroundColor: "surface.secondary",
+      color: "text",
+    },
+  },
+};

package/src/calendar/CalendarContext.tsx

@@ -173,6 +173,15 @@ export function CalendarProvider(props: Props) {
 
   const getRangeEndValue = () => {
     if (rangeState.highlightedRange?.end) {
+      if (
+        rangeState.anchorDate &&
+        rangeState.highlightedRange.start &&
+        rangeState.highlightedRange.end.compare(
+          rangeState.highlightedRange.start,
+        ) === 0
+      ) {
+        return null;
+      }
       return toCalendarDate(rangeState.highlightedRange.end);
     }
     if (rangeState?.value?.end) {

package/src/calendar/ScrollCalendar.tsx

@@ -38,10 +38,20 @@ export function ScrollCalendar(boxProps: BoxProps) {
       if (monthIndex > 0 && monthIndex < monthCount) {
         const element = monthReferences.current[monthIndex];
         if (element) {
-          element.scrollIntoView({
-            behavior: "instant",
-            block: "start",
-          });
+          const selectedCell = element.querySelector<HTMLElement>(
+            '[aria-selected="true"]',
+          );
+          if (selectedCell) {
+            selectedCell.scrollIntoView({
+              behavior: "instant",
+              block: "center",
+            });
+          } else {
+            element.scrollIntoView({
+              behavior: "instant",
+              block: "start",
+            });
+          }
         }
       }
 

package/src/input/Autocomplete.tsx

@@ -30,107 +30,114 @@ type Props = {
 } & Omit<ComboboxRootProps, "collection"> &
   FieldProps;
 
-export const Autocomplete = ({
-  variant = "core",
-  children,
-  label,
-  leftIcon,
-  onInputValueChange,
-  invalid,
-  helperText,
-  errorText,
-  required,
-  filteredExternally,
-  loading,
-  disabled,
-  emptyLabel,
-  onFocus,
-  openOnClick = true,
-  openOnFocus = true,
-  ...rest
-}: Props) => {
-  const { contains } = useFilter({ sensitivity: "base" });
-  const { t } = useTranslation();
-
-  const extractedItems = React.useMemo(
-    () => extractItemsFromChildren(children),
-    [children],
-  );
-
-  const { collection, filter, reset } = useListCollection({
-    initialItems: extractedItems,
-    filter: filteredExternally ? undefined : contains,
-  });
-
-  React.useEffect(() => {
-    if (filteredExternally) reset();
-  }, [extractedItems, reset, filteredExternally]);
-
-  const filteredChildren = React.useMemo(
-    () => filterChildren(children, collection.items),
-    [children, collection.items],
-  );
-
-  const combobox = useCombobox({
-    collection,
-    openOnClick: filteredChildren.length > 0 ? openOnClick : false,
-    onInputValueChange: (event) => {
-      if (!filteredExternally) {
-        filter(event.inputValue);
-      }
-      onInputValueChange?.(event);
+export const Autocomplete = forwardRef<HTMLInputElement, Props>(
+  function Autocomplete(
+    {
+      variant = "core",
+      children,
+      css,
+      label,
+      leftIcon,
+      onInputValueChange,
+      invalid,
+      helperText,
+      errorText,
+      required,
+      filteredExternally,
+      loading,
+      disabled,
+      emptyLabel,
+      onFocus,
+      openOnClick = true,
+      openOnFocus = true,
+      ...rest
     },
-    positioning: {
-      placement: "bottom",
-      offset: {
-        mainAxis: 3,
-        crossAxis: -1,
+    ref,
+  ) {
+    const { contains } = useFilter({ sensitivity: "base" });
+    const { t } = useTranslation();
+
+    const extractedItems = React.useMemo(
+      () => extractItemsFromChildren(children),
+      [children],
+    );
+
+    const { collection, filter, reset } = useListCollection({
+      initialItems: extractedItems,
+      filter: filteredExternally ? undefined : contains,
+    });
+
+    React.useEffect(() => {
+      if (filteredExternally) reset();
+    }, [extractedItems, reset, filteredExternally]);
+
+    const filteredChildren = React.useMemo(
+      () => filterChildren(children, collection.items),
+      [children, collection.items],
+    );
+
+    const combobox = useCombobox({
+      collection,
+      openOnClick: filteredChildren.length > 0 ? openOnClick : false,
+      onInputValueChange: (event) => {
+        if (!filteredExternally) {
+          filter(event.inputValue);
+        }
+        onInputValueChange?.(event);
       },
-      flip: false,
-    },
-    disabled,
-    ...rest,
-  });
+      positioning: {
+        placement: "bottom",
+        offset: {
+          mainAxis: 3,
+          crossAxis: -1,
+        },
+        flip: false,
+      },
+      disabled,
+      ...rest,
+    });
 
-  return (
-    <Combobox.RootProvider value={combobox}>
-      <Combobox.Control>
-        <Combobox.Input asChild>
-          <Input
-            label={<Combobox.Label>{label}</Combobox.Label>}
-            variant={variant}
-            labelAsChild
-            startElement={leftIcon}
-            invalid={invalid}
-            helperText={helperText}
-            errorText={errorText}
-            required={required}
-            onFocus={(event) => {
-              onFocus?.(event);
-              if (openOnFocus && filteredChildren.length > 0)
-                combobox.setOpen(true);
-            }}
-          />
-        </Combobox.Input>
-        <Combobox.IndicatorGroup>
-          <Combobox.ClearTrigger asChild aria-label={t(texts.clearValue)}>
-            <CloseButton size="xs" tabIndex={0} />
-          </Combobox.ClearTrigger>
-        </Combobox.IndicatorGroup>
-      </Combobox.Control>
-      <Combobox.Positioner>
-        <Combobox.Content>
-          {!loading && (
-            <Combobox.Empty>
-              {emptyLabel ?? t(texts.noItemsFound)}
-            </Combobox.Empty>
-          )}
-          {loading ? <ColorSpinner width="1.5rem" p="2" /> : filteredChildren}
-        </Combobox.Content>
-      </Combobox.Positioner>
-    </Combobox.RootProvider>
-  );
-};
+    return (
+      <Combobox.RootProvider value={combobox}>
+        <Combobox.Control css={css}>
+          <Combobox.Input asChild>
+            <Input
+              ref={ref}
+              label={<Combobox.Label>{label}</Combobox.Label>}
+              variant={variant}
+              labelAsChild
+              startElement={leftIcon}
+              invalid={invalid}
+              helperText={helperText}
+              errorText={errorText}
+              required={required}
+              onFocus={(event) => {
+                onFocus?.(event);
+                if (openOnFocus && filteredChildren.length > 0)
+                  combobox.setOpen(true);
+              }}
+            />
+          </Combobox.Input>
+          <Combobox.IndicatorGroup>
+            <Combobox.ClearTrigger asChild aria-label={t(texts.clearValue)}>
+              <CloseButton size="xs" tabIndex={0} />
+            </Combobox.ClearTrigger>
+          </Combobox.IndicatorGroup>
+        </Combobox.Control>
+        <Combobox.Positioner>
+          <Combobox.Content>
+            {!loading && (
+              <Combobox.Empty>
+                {emptyLabel ?? t(texts.noItemsFound)}
+              </Combobox.Empty>
+            )}
+            {loading ? <ColorSpinner width="1.5rem" p="2" /> : filteredChildren}
+          </Combobox.Content>
+        </Combobox.Positioner>
+      </Combobox.RootProvider>
+    );
+  },
+);
 
 export const AutocompleteItemGroup = Combobox.ItemGroup;
 export const AutocompleteItemGroupLabel = Combobox.ItemGroupLabel;

package/src/input/Menu.tsx

@@ -0,0 +1,234 @@
+"use client";
+import {
+  Flex,
+  Menu as ChakraMenu,
+  MenuCheckboxItemProps,
+  MenuContentProps,
+  MenuItemGroupProps as ChakraMenuItemGroupProps,
+  MenuItemProps as ChakraMenuItemProps,
+  MenuRadioItemGroupProps,
+  MenuRadioItemProps,
+  MenuRootProps,
+  MenuSeparatorProps,
+  MenuTriggerItemProps as ChakraMenuTriggerItemProps,
+  Portal,
+  useMenuContext as useChakraMenuContext,
+} from "@chakra-ui/react";
+import {
+  DropdownDownFill18Icon,
+  DropdownDownFill24Icon,
+} from "@vygruppen/spor-icon-react";
+import { forwardRef, ReactNode } from "react";
+import { createContext, useContext } from "react";
+
+import { Button, ButtonProps, Checkbox } from "..";
+
+type Variant = Pick<MenuRootProps, "variant">;
+
+const CustomMenuContext = createContext<Variant>({
+  variant: "core",
+});
+export const useMenuContext = () => useContext(CustomMenuContext);
+
+/**
+ * Menu component.
+ *
+ * Used to create an accessible dropdown menu. 
+ *
+ * @example
+ * ```tsx
+  <Menu> 
+    <MenuTrigger> Menu </MenuTrigger>
+    <MenuContent> 
+      <MenuItem value="1"> Item 1  </MenuItem>
+      <MenuItem value="2"> Item 2 </MenuItem>
+      <MenuItem value="3"> Item 3 </MenuItem>
+    </MenuContent>
+  </Menu>
+ * ```
+ *
+ */
+
+export const Menu = ({ children, ...props }: MenuRootProps) => {
+  return (
+    <CustomMenuContext.Provider
+      value={{
+        variant: props.variant,
+      }}
+    >
+      <ChakraMenu.Root {...props}>{children}</ChakraMenu.Root>
+    </CustomMenuContext.Provider>
+  );
+};
+
+export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Portal>
+        <ChakraMenu.Positioner>
+          <ChakraMenu.Content ref={ref} {...props}>
+            {children}
+          </ChakraMenu.Content>
+        </ChakraMenu.Positioner>
+      </Portal>
+    );
+  },
+);
+MenuContent.displayName = "MenuContent";
+
+export type MenuTriggerProps = {
+  /** An optional trigger button icon, rendered to the left of the label */
+  icon?: ReactNode;
+} & Omit<ButtonProps, "variant" | "rightIcon" | "leftIcon">;
+
+export const MenuTrigger = forwardRef<HTMLButtonElement, MenuTriggerProps>(
+  ({ icon, size, children, ...props }, ref) => {
+    const { variant } = useMenuContext();
+    const { open } = useChakraMenuContext();
+    const ChevronIcon =
+      size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;
+
+    const getButtonVariant = (): ButtonProps["variant"] => {
+      if (variant === "floating") return "floating";
+      if (variant === "accent") return "secondary";
+      return "tertiary";
+    };
+
+    return (
+      <ChakraMenu.Trigger asChild ref={ref}>
+        <Button
+          leftIcon={icon}
+          variant={getButtonVariant()}
+          size={size}
+          {...props}
+          rightIcon={
+            <ChevronIcon
+              transform={open ? "rotate(180deg)" : undefined}
+              transition="transform 0.3s"
+            />
+          }
+        >
+          {children}
+        </Button>
+      </ChakraMenu.Trigger>
+    );
+  },
+);
+MenuTrigger.displayName = "MenuTrigger";
+
+export type MenuItemProps = {
+  /** Display a command in the menu */
+  itemCommand?: string;
+  /* Display icon to the left */
+  leftIcon?: React.ReactNode;
+  /* Display icon to the right */
+  rightIcon?: React.ReactNode;
+} & ChakraMenuItemProps;
+
+export const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(
+  ({ itemCommand, children, value, leftIcon, rightIcon, ...props }, ref) => {
+    return (
+      <ChakraMenu.Item value={value} {...props} ref={ref}>
+        {leftIcon}
+        {children}
+        {itemCommand && (
+          <ChakraMenu.ItemCommand>{itemCommand}</ChakraMenu.ItemCommand>
+        )}
+        {rightIcon}
+      </ChakraMenu.Item>
+    );
+  },
+);
+MenuItem.displayName = "MenuItem";
+
+export type MenuTriggerItemProps = {
+  /* Display icon to the left */
+  leftIcon?: React.ReactNode;
+  /* Display icon to the right */
+  rightIcon?: React.ReactNode;
+} & ChakraMenuTriggerItemProps;
+
+export const MenuTriggerItem = forwardRef<HTMLDivElement, MenuTriggerItemProps>(
+  ({ children, leftIcon, rightIcon, ...props }, ref) => {
+    return (
+      <ChakraMenu.TriggerItem {...props} ref={ref}>
+        {leftIcon}
+        {children}
+        {rightIcon}
+      </ChakraMenu.TriggerItem>
+    );
+  },
+);
+MenuTriggerItem.displayName = "MenuTriggerItem";
+
+export const MenuRadioItemGroup = forwardRef<
+  HTMLDivElement,
+  MenuRadioItemGroupProps
+>(({ children, ...props }) => {
+  return (
+    <ChakraMenu.RadioItemGroup {...props}>{children}</ChakraMenu.RadioItemGroup>
+  );
+});
+MenuRadioItemGroup.displayName = "MenuRadioItemGroup";
+
+export const MenuRadioItem = forwardRef<HTMLDivElement, MenuRadioItemProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <ChakraMenu.RadioItem {...props} ref={ref}>
+        {children}
+        <Flex w="1.25rem" justify="center" align="center">
+          <ChakraMenu.ItemIndicator />
+        </Flex>
+      </ChakraMenu.RadioItem>
+    );
+  },
+);
+MenuRadioItem.displayName = "MenuRadioItem";
+
+export type MenuItemGroupProps = {
+  /** Display group label */
+  label?: string;
+} & ChakraMenuItemGroupProps;
+
+export const MenuItemGroup = forwardRef<HTMLDivElement, MenuItemGroupProps>(
+  ({ children, label, ...props }, ref) => {
+    return (
+      <ChakraMenu.ItemGroup {...props} ref={ref}>
+        {label && (
+          <ChakraMenu.ItemGroupLabel>{label}</ChakraMenu.ItemGroupLabel>
+        )}
+        {children}
+      </ChakraMenu.ItemGroup>
+    );
+  },
+);
+MenuItemGroup.displayName = "MenuItemGroup";
+
+export const MenuCheckboxItem = forwardRef<
+  HTMLDivElement,
+  MenuCheckboxItemProps
+>(({ children, closeOnSelect = false, ...props }, ref) => {
+  return (
+    <ChakraMenu.CheckboxItem
+      {...props}
+      ref={ref}
+      closeOnSelect={closeOnSelect}
+      checked={props.checked}
+      onCheckedChange={props.onCheckedChange}
+    >
+      <Checkbox
+        checked={props.checked}
+        onCheckedChange={() => props.onCheckedChange}
+      >
+        {children}
+      </Checkbox>
+    </ChakraMenu.CheckboxItem>
+  );
+});
+
+MenuCheckboxItem.displayName = "MenuCheckboxItem";
+
+export const MenuSeparator = forwardRef<MenuSeparatorProps>(({ ...props }) => {
+  return <ChakraMenu.Separator {...props} />;
+});
+MenuSeparator.displayName = "MenuSeparator";

package/src/input/index.ts

@@ -9,6 +9,7 @@ export * from "./Field";
 export * from "./Fieldset";
 export * from "./Input";
 export * from "./ListBox";
+export * from "./Menu";
 export * from "./NativeSelect";
 export * from "./NumericStepper";
 export * from "./PasswordInput";

package/src/theme/slot-recipes/anatomy.ts

@@ -285,3 +285,17 @@ export const comboboxAnatomy = arkComboboxAnatomy.extendWith(
   "indicatorGroup",
   "empty",
 );
+
+export const menuAnatomy = createAnatomy("menu").parts(
+  "trigger",
+  "content",
+  "item",
+  "itemGroup",
+  "triggerItem",
+  "itemCommand",
+  "itemGroupLabel",
+  "separator",
+  "radioItem",
+  "triggerItem",
+  "checkboxItem",
+);

package/src/theme/slot-recipes/index.ts

@@ -17,6 +17,7 @@ import { lineIconSlotRecipe } from "./line-icon";
 import { listSlotRecipe } from "./list";
 import { listBoxSlotRecipe } from "./listbox";
 import { mediaControllerSlotRecipe } from "./media-controller-button";
+import { menuSlotRecipe } from "./menu";
 import { nativeSelectSlotRecipe } from "./native-select";
 import { numericStepperRecipe } from "./numeric-stepper";
 import { paginationSlotRecipe } from "./pagination";
@@ -69,4 +70,5 @@ export const slotRecipes = {
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
   tooltip: popoverSlotRecipe,
+  menu: menuSlotRecipe,
 };