@navikt/ds-react 6.10.1 → 6.11.0

package/src/layout/box/Box.tsx

@@ -3,19 +3,26 @@ import React, { forwardRef } from "react";
 import { OverridableComponent } from "../../util/types";
 import { getResponsiveProps } from "../utilities/css";
 import {
-  BackgroundToken,
+  BackgroundColorToken,
   BorderColorToken,
   BorderRadiiToken,
   ResponsiveProp,
   ShadowToken,
   SpaceDelimitedAttribute,
   SpacingScale,
+  SurfaceColorToken,
 } from "../utilities/types";
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** CSS `background-color` property. Accepts a color token. */
-  background?: BackgroundToken;
-  /** CSS `border-color` property. Accepts a color token. */
+  /**
+   * CSS `background-color` property.
+   * Accepts a [background/surface color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#afff774dad80).
+   */
+  background?: BackgroundColorToken | SurfaceColorToken;
+  /**
+   * CSS `border-color` property.
+   * Accepts a [border color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#adb1767e2f87).
+   */
   borderColor?: BorderColorToken;
   /**
    * CSS `border-radius` property.

package/src/layout/page/Page.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
 import { OverridableComponent } from "../../util";
+import { BackgroundColorToken } from "../utilities/types";
 import { PageBlock } from "./parts/PageBlock";
 
 export interface PageProps extends React.HTMLAttributes<HTMLElement> {
@@ -11,10 +11,11 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
    */
   as?: "div" | "body";
   /**
-   * Background color. Accepts a color token.
+   * Background color.
+   * Accepts a [background color token](https://aksel.nav.no/grunnleggende/styling/design-tokens#753d1cf4d1d6).
    * @default "bg-default"
    */
-  background?: keyof typeof bgColors.a | "surface-subtle";
+  background?: BackgroundColorToken;
   /**
    * Allows better positioning of footer
    */

package/src/layout/responsive/Responsive.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { BreakpointsAlias } from "../utilities/types";
 
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {

package/src/layout/utilities/types.ts

@@ -5,9 +5,8 @@ import surfaceColors from "@navikt/ds-tokens/src/colors-surface.json";
 import shadows from "@navikt/ds-tokens/src/shadow.json";
 import Spacing from "@navikt/ds-tokens/src/spacing.json";
 
-export type BackgroundToken =
-  | keyof typeof bgColors.a
-  | keyof typeof surfaceColors.a;
+export type BackgroundColorToken = keyof typeof bgColors.a;
+export type SurfaceColorToken = keyof typeof surfaceColors.a;
 export type BorderColorToken = keyof typeof borderColors.a;
 export type BorderRadiiToken =
   | keyof (typeof borderRadii.a)["border-radius"]

package/src/list/ListItem.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { BodyShort, Label } from "../typography";
+import { BodyLong } from "../typography";
 import { ListContext } from "./context";
 import { ListItemProps } from "./types";
 
@@ -45,14 +45,14 @@ export const ListItem = forwardRef<HTMLLIElement, ListItemProps>(
           </div>
         )}
 
-        <BodyShort as="div" size={size} className="navds-list__item-content">
+        <BodyLong as="div" size={size} className="navds-list__item-content">
           {title && (
-            <Label as="p" size={size}>
+            <BodyLong as="p" size={size} weight="semibold">
               {title}
-            </Label>
+            </BodyLong>
           )}
           {children}
-        </BodyShort>
+        </BodyLong>
       </li>
     );
   },

package/src/modal/dialog-polyfill.ts

@@ -631,7 +631,6 @@ dialogPolyfill.DialogManager = function () {
     this.mo_ = new MutationObserver(function (records) {
       var removed = [];
       records.forEach(function (rec) {
-        // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type c in this scenario
         for (var i = 0, c; (c = rec.removedNodes[i]); ++i) {
           if (!(c instanceof Element)) {
             continue;
@@ -679,7 +678,6 @@ dialogPolyfill.DialogManager.prototype.unblockDocument = function () {
 dialogPolyfill.DialogManager.prototype.updateStacking = function () {
   var zIndex = this.zIndexHigh_;
 
-  // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
   for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
     dpi.updateZIndex(--zIndex, --zIndex);
     if (i === 0) {
@@ -705,7 +703,6 @@ dialogPolyfill.DialogManager.prototype.containedByTopDialog_ = function (
   candidate,
 ) {
   while ((candidate = findNearestDialog(candidate))) {
-    // biome-ignore lint/suspicious/noImplicitAnyLet: Reduntant to type dpi in this scenario
     for (var i = 0, dpi; (dpi = this.pendingDialogStack[i]); ++i) {
       if (dpi.dialog === candidate) {
         return i === 0; // only valid if top-most

package/src/overlays/dismissablelayer/DismissableLayer.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { useMergeRefs } from "../../util/hooks";
 import { createDescendantContext } from "../../util/hooks/descendants/useDescendant";
 import { AsChild } from "../../util/types/AsChild";

package/src/overlays/dismissablelayer/util/useFocusOutside.ts

@@ -46,7 +46,11 @@ export function useFocusOutside(
    * we can eliminate the need for DOM traversal to verify if the focused element is within the react tree.
    */
   return {
-    onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),
-    onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),
+    onFocusCapture: () => {
+      isFocusInsideReactTreeRef.current = true;
+    },
+    onBlurCapture: () => {
+      isFocusInsideReactTreeRef.current = false;
+    },
   };
 }

package/src/overlays/dismissablelayer/util/usePointerDownOutside.ts

@@ -90,6 +90,8 @@ export function usePointerDownOutside(
 
   return {
     // ensures we check React component tree (not just DOM tree)
-    onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),
+    onPointerDownCapture: () => {
+      isPointerInsideReactTreeRef.current = true;
+    },
   };
 }

package/src/overlays/floating/Floating.tsx

@@ -17,7 +17,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { Slot } from "../../util/Slot";
+import { Slot } from "../../slot/Slot";
 import { createContext } from "../../util/create-context";
 import {
   useCallbackRef,

package/src/pagination/Pagination.tsx

@@ -1,7 +1,8 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { BodyShort } from "../typography";
+import { BodyShort, Heading } from "../typography";
+import { useId } from "../util";
 import PaginationItem, {
   PaginationItemProps,
   PaginationItemType,
@@ -47,6 +48,13 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
    * @default (item: PaginationItemProps) => <PaginationItem {...item} />
    */
   renderItem?: (item: PaginationItemProps) => ReturnType<React.FC>;
+  /**
+   * Pagination heading. We recommend adding heading instead of `aria-label` to help assistive technologies with an extra navigation-stop.
+   */
+  srHeading?: {
+    tag: "h2" | "h3" | "h4" | "h5" | "h6";
+    text: string;
+  };
 }
 
 interface PaginationType
@@ -117,6 +125,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       className,
       size = "medium",
       prevNextTexts = false,
+      srHeading,
+      "aria-labelledby": ariaLabelledBy,
       renderItem: Item = (item: PaginationItemProps) => (
         <PaginationItem {...item} />
       ),
@@ -124,6 +134,8 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
     },
     ref,
   ) => {
+    const headingId = useId();
+
     if (page < 1) {
       console.error("page cannot be less than 1");
       return null;
@@ -145,12 +157,25 @@ export const Pagination = forwardRef<HTMLElement, PaginationProps>(
       <nav
         ref={ref}
         {...rest}
+        aria-labelledby={
+          srHeading ? cl(headingId, ariaLabelledBy) : ariaLabelledBy
+        }
         className={cl(
           "navds-pagination",
           `navds-pagination--${size}`,
           className,
         )}
       >
+        {srHeading && (
+          <Heading
+            size="xsmall"
+            visuallyHidden
+            as={srHeading.tag}
+            id={headingId}
+          >
+            {srHeading.text}
+          </Heading>
+        )}
         <ul className="navds-pagination__list">
           <li>
             <Item

package/src/pagination/PaginationItem.tsx

@@ -33,6 +33,7 @@ export const Item: PaginationItemType = forwardRef(
       as: Component = "button",
       selected = false,
       className,
+      page,
       ...rest
     },
     ref,
@@ -46,6 +47,9 @@ export const Item: PaginationItemType = forwardRef(
         className={cl("navds-pagination__item", className, {
           "navds-pagination__item--selected": selected,
         })}
+        data-page={page}
+        /* TODO: Breaking change to remove. Add to future major version. */
+        page={page}
         {...(Component === "button" && { type: "button" })}
         {...rest}
       >

package/src/portal/Portal.tsx

@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, forwardRef } from "react";
 import ReactDOM from "react-dom";
 import { useProvider } from "../provider/Provider";
-import { Slot } from "../util/Slot";
+import { Slot } from "../slot/Slot";
 import { AsChildProps } from "../util/types";
 
 interface PortalBaseProps extends HTMLAttributes<HTMLDivElement> {

package/src/slot/Slot.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { mergeRefs } from "../util/hooks/useMergeRefs";
+import { mergeProps } from "./merge-props";
+
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+const Slot = React.forwardRef<HTMLElement, SlotProps>((props, forwardedRef) => {
+  const { children, ...slotProps } = props;
+
+  if (React.isValidElement(children)) {
+    return React.cloneElement<any>(children, {
+      ...mergeProps(slotProps, children.props),
+      ref: forwardedRef
+        ? mergeRefs([forwardedRef, (children as any).ref])
+        : (children as any).ref,
+    });
+  }
+
+  if (React.Children.count(children) > 1) {
+    const error = new Error(
+      "Aksel: Components using 'asChild' expects to recieve a single React element child.",
+    );
+    error.name = "SlotError";
+    Error.captureStackTrace?.(error, Slot);
+    throw error;
+  }
+
+  return null;
+});
+
+export { Slot, type SlotProps };

package/src/{util/Slot.tsx → slot/merge-props.ts}

@@ -1,37 +1,3 @@
-// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
-import * as React from "react";
-import { mergeRefs } from "./hooks/useMergeRefs";
-
-interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
-}
-
-export const Slot = React.forwardRef<HTMLElement, SlotProps>(
-  (props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-
-    if (React.isValidElement(children)) {
-      return React.cloneElement<any>(children, {
-        ...mergeProps(slotProps, children.props),
-        ref: forwardedRef
-          ? mergeRefs([forwardedRef, (children as any).ref])
-          : (children as any).ref,
-      });
-    }
-
-    if (React.Children.count(children) > 1) {
-      const error = new Error(
-        "Aksel: Components using 'asChild' expects to recieve a single React element child.",
-      );
-      error.name = "SlotError";
-      Error.captureStackTrace?.(error, Slot);
-      throw error;
-    }
-
-    return null;
-  },
-);
-
 function mergeProps(
   slotProps: Record<string, any>,
   childProps: Record<string, any>,
@@ -69,3 +35,5 @@ function mergeProps(
 
   return { ...slotProps, ...overrideProps };
 }
+
+export { mergeProps };

package/src/slot/tests/merge-props.test.ts

@@ -0,0 +1,49 @@
+import { describe, expect, test, vi } from "vitest";
+import { mergeProps } from "../merge-props";
+
+describe("Testing mergeProps function for Slot", () => {
+  test("child props should override slot props", () => {
+    const slotProps = { prop1: "slot", prop2: "slot" };
+    const childProps = { prop1: "child" };
+    const result = mergeProps(slotProps, childProps);
+    expect(result).toEqual({ prop1: "child", prop2: "slot" });
+  });
+
+  test("if a handler exists on both slot and child props, the composed function is created", () => {
+    const slotClick = vi.fn();
+    const childClick = vi.fn();
+    const slotProps = { onClick: slotClick };
+    const childProps = { onClick: childClick };
+    const result = mergeProps(slotProps, childProps);
+
+    result.onClick();
+
+    expect(slotClick).toHaveBeenCalledTimes(1);
+    expect(childClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("if a handler exists only on the slot props, only the slot handler is used", () => {
+    const slotClick = vi.fn();
+    const slotProps = { onClick: slotClick };
+    const childProps = {};
+    const result = mergeProps(slotProps, childProps);
+
+    result.onClick();
+
+    expect(slotClick).toHaveBeenCalledTimes(1);
+  });
+
+  test("if the prop is `style`, the styles are merged", () => {
+    const slotProps = { style: { color: "red" } };
+    const childProps = { style: { backgroundColor: "blue" } };
+    const result = mergeProps(slotProps, childProps);
+    expect(result.style).toEqual({ color: "red", backgroundColor: "blue" });
+  });
+
+  test("if the prop is `className`, the class names are joined with a space", () => {
+    const slotProps = { className: "class1" };
+    const childProps = { className: "class2" };
+    const result = mergeProps(slotProps, childProps);
+    expect(result.className).toBe("class1 class2");
+  });
+});

package/src/toggle-group/ToggleGroup.test.tsx

@@ -6,15 +6,9 @@ import { ToggleGroup } from "./ToggleGroup";
 
 const TestToggleGroup = ({ value, onChange, defaultValue }: any) => (
   <ToggleGroup value={value} onChange={onChange} defaultValue={defaultValue}>
-    <ToggleGroup.Item value="toggle1" data-testid="toggle1">
-      Toggle 1
-    </ToggleGroup.Item>
-    <ToggleGroup.Item value="toggle2" data-testid="toggle2">
-      Toggle 2
-    </ToggleGroup.Item>
-    <ToggleGroup.Item value="toggle3" data-testid="toggle3">
-      Toggle 3
-    </ToggleGroup.Item>
+    <ToggleGroup.Item value="toggle1" data-testid="toggle1" label="Toggle 1" />
+    <ToggleGroup.Item value="toggle2" data-testid="toggle2" label="Toggle 2" />
+    <ToggleGroup.Item value="toggle3" data-testid="toggle3" label="Toggle 3" />
   </ToggleGroup>
 );
 

package/src/toggle-group/ToggleGroup.tsx

@@ -30,9 +30,9 @@ interface ToggleGroupComponent
  * @example
  * ```jsx
  * <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
- *   <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
- *   <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
- *   <ToggleGroup.Item value="sendt">Sendt</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="ulest" label="Ulest" />
+ *   <ToggleGroup.Item value="lest" label="Leste" />
+ *   <ToggleGroup.Item value="sendt" label="Sendt" />
  * </ToggleGroup>
  * ```
  */

package/src/toggle-group/parts/ToggleItem.tsx

@@ -4,21 +4,62 @@ import { BodyShort } from "../../typography/BodyShort";
 import { useToggleGroupContext } from "../ToggleGroup.context";
 import { useToggleItem } from "./useToggleItem";
 
-export interface ToggleGroupItemProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
+type BaseProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> & {
   /**
-   * Content.
+   * Value for state-handling.
+   */
+  value: string;
+};
+
+type ChildrenProps = {
+  /**
+   * @deprecated Use `label` and/or `icon` as replacement.
    */
   children: React.ReactNode;
+  label?: never;
+  icon?: never;
+};
+
+type LabelProps = {
+  children?: never;
   /**
-   * Value for state-handling.
+   * Item label.
    */
-  value: string;
-}
+  label: React.ReactNode;
+  /**
+   * Item Icon.
+   */
+  icon?: React.ReactNode;
+};
+
+type IconProps = {
+  children?: never;
+  /**
+   * Item label.
+   */
+  label?: React.ReactNode;
+  /**
+   * Item Icon.
+   */
+  icon: React.ReactNode;
+};
+
+export type ToggleGroupItemProps = BaseProps &
+  (ChildrenProps | LabelProps | IconProps);
 
 const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   (
-    { className, children, value, onClick, onFocus, onKeyDown, ...rest },
+    {
+      className,
+      children,
+      icon,
+      label,
+      value,
+      onClick,
+      onFocus,
+      onKeyDown,
+      ...rest
+    },
     forwardedRef,
   ) => {
     const itemCtx = useToggleItem(
@@ -45,7 +86,12 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
           className="navds-toggle-group__button-inner"
           size={ctx?.size}
         >
-          {children}
+          {children ?? (
+            <>
+              {icon}
+              {label}
+            </>
+          )}
         </BodyShort>
       </button>
     );

package/src/util/hooks/descendants/useDescendant.tsx

@@ -53,7 +53,7 @@ export function createDescendantContext<
     useClientLayoutEffect(() => {
       if (!ref.current) return;
       const dataIndex = Number(ref.current.dataset["index"]);
-      if (index != dataIndex && !Number.isNaN(dataIndex)) {
+      if (index !== dataIndex && !Number.isNaN(dataIndex)) {
         setIndex(dataIndex);
       }
     });

package/src/util/hooks/descendants/utils.ts

@@ -37,7 +37,7 @@ export function sortNodes(nodes: Node[]) {
 }
 
 export const isElement = (el: any): el is HTMLElement =>
-  typeof el == "object" &&
+  typeof el === "object" &&
   "nodeType" in el &&
   el.nodeType === Node.ELEMENT_NODE;
 

package/src/util/i18n/get.ts

@@ -38,10 +38,12 @@ export function get(
 
 function getKeypath(str: string) {
   const path: string[] = [];
-  let result: RegExpExecArray | null;
-  while ((result = OBJECT_NOTATION_MATCHER.exec(str))) {
+  let result = OBJECT_NOTATION_MATCHER.exec(str);
+
+  while (result) {
     const [, first, second] = result;
     path.push(first || second);
+    result = OBJECT_NOTATION_MATCHER.exec(str);
   }
 
   return path;

package/cjs/util/Slot.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode;
-}
-export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
-export {};

package/cjs/util/Slot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slot.js","sourceRoot":"","sources":["../../src/util/Slot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,oFAAoF;AACpF,6CAA+B;AAC/B,uDAAiD;AAMpC,QAAA,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;;IACtB,MAAM,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAlC,YAA0B,CAAQ,CAAC;IAEzC,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC,YAAY,CAAM,QAAQ,kCAClC,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,KACxC,GAAG,EAAE,YAAY;gBACf,CAAC,CAAC,IAAA,wBAAS,EAAC,CAAC,YAAY,EAAG,QAAgB,CAAC,GAAG,CAAC,CAAC;gBAClD,CAAC,CAAE,QAAgB,CAAC,GAAG,IACzB,CAAC;IACL,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,KAAK,CACrB,oFAAoF,CACrF,CAAC;QACF,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;QACzB,MAAA,KAAK,CAAC,iBAAiB,sDAAG,KAAK,EAAE,YAAI,CAAC,CAAC;QACvC,MAAM,KAAK,CAAC;IACd,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,SAA8B,EAC9B,UAA+B;IAE/B,kCAAkC;IAClC,MAAM,aAAa,qBAAQ,UAAU,CAAE,CAAC;IAExC,KAAK,MAAM,QAAQ,IAAI,UAAU,EAAE,CAAC;QAClC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAE5C,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,SAAS,EAAE,CAAC;YACd,iDAAiD;YACjD,IAAI,aAAa,IAAI,cAAc,EAAE,CAAC;gBACpC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAe,EAAE,EAAE;oBAC/C,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;oBACxB,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;gBACzB,CAAC,CAAC;YACJ,CAAC;YACD,0DAA0D;iBACrD,IAAI,aAAa,EAAE,CAAC;gBACvB,aAAa,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC;YAC1C,CAAC;QACH,CAAC;QACD,iCAAiC;aAC5B,IAAI,QAAQ,KAAK,OAAO,EAAE,CAAC;YAC9B,aAAa,CAAC,QAAQ,CAAC,mCAAQ,aAAa,GAAK,cAAc,CAAE,CAAC;QACpE,CAAC;aAAM,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;YACpC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAa,EAAE,cAAc,CAAC;iBACtD,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,CAAC;IACH,CAAC;IAED,uCAAY,SAAS,GAAK,aAAa,EAAG;AAC5C,CAAC"}

package/esm/util/Slot.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-interface SlotProps extends React.HTMLAttributes<HTMLElement> {
-    children?: React.ReactNode;
-}
-export declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
-export {};

package/esm/util/Slot.js

@@ -1,63 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
-import * as React from "react";
-import { mergeRefs } from "./hooks/useMergeRefs.js";
-export const Slot = React.forwardRef((props, forwardedRef) => {
-    var _a;
-    const { children } = props, slotProps = __rest(props, ["children"]);
-    if (React.isValidElement(children)) {
-        return React.cloneElement(children, Object.assign(Object.assign({}, mergeProps(slotProps, children.props)), { ref: forwardedRef
-                ? mergeRefs([forwardedRef, children.ref])
-                : children.ref }));
-    }
-    if (React.Children.count(children) > 1) {
-        const error = new Error("Aksel: Components using 'asChild' expects to recieve a single React element child.");
-        error.name = "SlotError";
-        (_a = Error.captureStackTrace) === null || _a === void 0 ? void 0 : _a.call(Error, error, Slot);
-        throw error;
-    }
-    return null;
-});
-function mergeProps(slotProps, childProps) {
-    // all child props should override
-    const overrideProps = Object.assign({}, childProps);
-    for (const propName in childProps) {
-        const slotPropValue = slotProps[propName];
-        const childPropValue = childProps[propName];
-        const isHandler = /^on[A-Z]/.test(propName);
-        if (isHandler) {
-            // if the handler exists on both, we compose them
-            if (slotPropValue && childPropValue) {
-                overrideProps[propName] = (...args) => {
-                    childPropValue(...args);
-                    slotPropValue(...args);
-                };
-            }
-            // but if it exists only on the slot, we use only this one
-            else if (slotPropValue) {
-                overrideProps[propName] = slotPropValue;
-            }
-        }
-        // if it's `style`, we merge them
-        else if (propName === "style") {
-            overrideProps[propName] = Object.assign(Object.assign({}, slotPropValue), childPropValue);
-        }
-        else if (propName === "className") {
-            overrideProps[propName] = [slotPropValue, childPropValue]
-                .filter(Boolean)
-                .join(" ");
-        }
-    }
-    return Object.assign(Object.assign({}, slotProps), overrideProps);
-}
-//# sourceMappingURL=Slot.js.map

package/esm/util/Slot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Slot.js","sourceRoot":"","sources":["../../src/util/Slot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,oFAAoF;AACpF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAMjD,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;;IACtB,MAAM,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,UAAK,KAAK,EAAlC,YAA0B,CAAQ,CAAC;IAEzC,IAAI,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC,YAAY,CAAM,QAAQ,kCAClC,UAAU,CAAC,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,KACxC,GAAG,EAAE,YAAY;gBACf,CAAC,CAAC,SAAS,CAAC,CAAC,YAAY,EAAG,QAAgB,CAAC,GAAG,CAAC,CAAC;gBAClD,CAAC,CAAE,QAAgB,CAAC,GAAG,IACzB,CAAC;IACL,CAAC;IAED,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACvC,MAAM,KAAK,GAAG,IAAI,KAAK,CACrB,oFAAoF,CACrF,CAAC;QACF,KAAK,CAAC,IAAI,GAAG,WAAW,CAAC;QACzB,MAAA,KAAK,CAAC,iBAAiB,sDAAG,KAAK,EAAE,IAAI,CAAC,CAAC;QACvC,MAAM,KAAK,CAAC;IACd,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CACF,CAAC;AAEF,SAAS,UAAU,CACjB,SAA8B,EAC9B,UAA+B;IAE/B,kCAAkC;IAClC,MAAM,aAAa,qBAAQ,UAAU,CAAE,CAAC;IAExC,KAAK,MAAM,QAAQ,IAAI,UAAU,EAAE,CAAC;QAClC,MAAM,aAAa,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC1C,MAAM,cAAc,GAAG,UAAU,CAAC,QAAQ,CAAC,CAAC;QAE5C,MAAM,SAAS,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,IAAI,SAAS,EAAE,CAAC;YACd,iDAAiD;YACjD,IAAI,aAAa,IAAI,cAAc,EAAE,CAAC;gBACpC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAe,EAAE,EAAE;oBAC/C,cAAc,CAAC,GAAG,IAAI,CAAC,CAAC;oBACxB,aAAa,CAAC,GAAG,IAAI,CAAC,CAAC;gBACzB,CAAC,CAAC;YACJ,CAAC;YACD,0DAA0D;iBACrD,IAAI,aAAa,EAAE,CAAC;gBACvB,aAAa,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC;YAC1C,CAAC;QACH,CAAC;QACD,iCAAiC;aAC5B,IAAI,QAAQ,KAAK,OAAO,EAAE,CAAC;YAC9B,aAAa,CAAC,QAAQ,CAAC,mCAAQ,aAAa,GAAK,cAAc,CAAE,CAAC;QACpE,CAAC;aAAM,IAAI,QAAQ,KAAK,WAAW,EAAE,CAAC;YACpC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC,aAAa,EAAE,cAAc,CAAC;iBACtD,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,CAAC;IACH,CAAC;IAED,uCAAY,SAAS,GAAK,aAAa,EAAG;AAC5C,CAAC"}