@navikt/ds-react 6.10.0 → 6.11.0

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"}