@vygruppen/spor-react 12.8.2 → 12.8.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vygruppen/spor-react",
   "type": "module",
-  "version": "12.8.2",
+  "version": "12.8.5",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -46,9 +46,9 @@
     "react-stately": "^3.31.1",
     "react-swipeable": "^7.0.1",
     "usehooks-ts": "^3.1.0",
+    "@vygruppen/spor-design-tokens": "4.0.7",
     "@vygruppen/spor-icon-react": "4.2.1",
-    "@vygruppen/spor-loader": "0.7.0",
-    "@vygruppen/spor-design-tokens": "4.0.7"
+    "@vygruppen/spor-loader": "0.7.0"
   },
   "devDependencies": {
     "@react-types/datepicker": "^3.10.0",

package/src/index.tsx

@@ -26,6 +26,7 @@ export * from "./table";
 export * from "./theme";
 export * from "./theme/brand";
 export * from "./toast";
+export * from "./tooltip";
 export * from "./transition";
 export * from "./typography";
 export * from "./util";

package/src/input/Combobox.tsx

@@ -24,7 +24,6 @@ export type ComboboxProps<T> = Exclude<
     leftIcon?: ReactNode;
     rightIcon?: ReactNode;
     variant?: "core" | "floating";
-    children?: React.ReactNode;
   };
 /**
  * A combobox is a combination of an input and a list of suggestions.
@@ -76,6 +75,17 @@ export const Combobox = (props: ComboboxProps<object>) => {
     inputRef: externalInputRef,
     children,
     variant,
+    allowsEmptyCollection,
+    onSelectionChange,
+    inputValue,
+    onInputChange,
+    menuTrigger,
+    allowsCustomValue,
+    onFocusChange,
+    defaultInputValue,
+    defaultItems,
+    defaultSelectedKey,
+    onOpenChange,
     ...restProps
   } = props;
   const { contains } = useFilter({ sensitivity: "base" });
@@ -85,13 +95,24 @@ export const Combobox = (props: ComboboxProps<object>) => {
   const listBoxRef = useRef<HTMLUListElement>(null);
   const popoverRef = useRef(null);
 
-  const listboxId = `${useId()}-listbox`;
+  const listboxId = useId();
 
   const inputWidth = useInputWidth(inputRef);
 
   const state = useComboBoxState({
     defaultFilter: contains,
     shouldCloseOnBlur: true,
+    allowsEmptyCollection,
+    onSelectionChange,
+    inputValue,
+    onInputChange,
+    menuTrigger,
+    allowsCustomValue,
+    onFocusChange,
+    defaultInputValue,
+    defaultItems,
+    defaultSelectedKey,
+    onOpenChange,
     ...props,
   });
 
@@ -110,22 +131,34 @@ export const Combobox = (props: ComboboxProps<object>) => {
     paddingLeft,
     paddingX,
     paddingY,
-    leftIcon,
   };
 
-  const {
-    inputProps: { ...inputProps },
-    listBoxProps,
-  } = useComboBox(
+  const { inputProps, listBoxProps } = useComboBox(
     {
       ...props,
       inputRef,
       listBoxRef,
       popoverRef,
       label,
+      onSelectionChange,
+      inputValue,
+      onInputChange,
+      menuTrigger,
+      allowsCustomValue,
+      onFocusChange,
+      defaultInputValue,
+      defaultItems,
+      defaultSelectedKey,
+      onOpenChange,
     },
     state,
   );
+
+  // Remove aria-labelledby and id from inputProps, as these are handled by the Input component
+  // This prevents potential conflicts or duplication of accessibility attributes
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { "aria-labelledby": _, id: __, ...filteredInputProps } = inputProps;
+
   return (
     <>
       <Input
@@ -151,7 +184,7 @@ export const Combobox = (props: ComboboxProps<object>) => {
           state.isOpen && !loading ? 0 : borderBottomRightRadius
         }
         _active={{ backgroundColor: "core.surface.active" }}
-        {...inputProps}
+        {...filteredInputProps}
         startElement={leftIcon}
         endElement={
           loading ? (
@@ -215,6 +248,7 @@ Combobox.displayName = "Combobox";
 
 const useInputWidth = (inputRef: React.RefObject<HTMLInputElement>) => {
   const [inputWidth, setInputWidth] = useState("auto");
+
   useEffect(() => {
     const onResize = debounce(() => {
       if (inputRef.current) {

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

@@ -66,4 +66,5 @@ export const slotRecipes = {
   toast: toastSlotRecipe,
   checkboxCard: choiceChipSlotRecipe,
   collapsible: collapsibleSlotRecipe,
+  tooltip: popoverSlotRecipe,
 };

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

@@ -10,6 +10,8 @@ export const popoverSlotRecipe = defineSlotRecipe({
       position: "relative",
       display: "flex",
       flexDirection: "row-reverse",
+      color: "text.inverted",
+
       gap: "0.625rem",
       padding: "0.563rem 0.75rem",
 

package/src/tooltip.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Portal, Tooltip as ChakraTooltip } from "@chakra-ui/react";
+import { forwardRef } from "react";
+
+export const Tooltip = ChakraTooltip.Root;
+
+export const TooltipTrigger = forwardRef<
+  HTMLButtonElement,
+  ChakraTooltip.TriggerProps
+>(({ children, ...props }, ref) => {
+  const isStringChild = typeof children === "string";
+
+  return (
+    <ChakraTooltip.Trigger {...props} ref={ref} asChild={!isStringChild}>
+      {children}
+    </ChakraTooltip.Trigger>
+  );
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+
+export type TooltipProps = ChakraTooltip.ContentProps;
+
+export const TooltipContent = forwardRef<HTMLDivElement, TooltipProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Portal>
+        <ChakraTooltip.Positioner>
+          <ChakraTooltip.Content ref={ref} {...props}>
+            <ChakraTooltip.Arrow />
+            <ChakraTooltip.Content {...props}>{children}</ChakraTooltip.Content>
+          </ChakraTooltip.Content>
+        </ChakraTooltip.Positioner>
+      </Portal>
+    );
+  },
+);
+TooltipContent.displayName = "TooltipContent";