@navikt/ds-react 5.13.0 → 5.15.0

package/src/table/HeaderCell.tsx

@@ -9,6 +9,10 @@ export interface HeaderCellProps
    * @default "left"
    */
   align?: "left" | "center" | "right";
+  /**
+   * Adjusts font-size
+   */
+  textSize?: "medium" | "small";
 }
 
 export interface HeaderCellType
@@ -17,12 +21,13 @@ export interface HeaderCellType
   > {}
 
 export const HeaderCell: HeaderCellType = forwardRef(
-  ({ className, children, align, ...rest }, ref) => {
+  ({ className, children, align, textSize, ...rest }, ref) => {
     return (
       <th
         ref={ref}
         className={cl("navds-table__header-cell", "navds-label", className, {
           [`navds-table__header-cell--align-${align}`]: align,
+          "navds-label--small": textSize === "small",
         })}
         {...rest}
       >

package/src/table/stories/table.stories.tsx

@@ -1,26 +1,30 @@
 import React, { useState } from "react";
-import { Table } from "../";
-import { Alert, Button, Checkbox, Link } from "../..";
+import { Table, TableProps } from "../";
+import { Alert, Button, Checkbox, CheckboxGroup, Link } from "../..";
 
 export default {
   title: "ds-react/Table",
   component: Table,
 };
 
-const TableComponent = (props) => (
-  <Table {...props}>
+interface Props extends TableProps {
+  button?: boolean;
+  shadeOnHover?: boolean;
+}
+const TableComponent = ({ button, shadeOnHover, ...rest }: Props) => (
+  <Table {...rest}>
     <Table.Header>
       <Table.Row>
-        {props.button && <Table.HeaderCell>Action</Table.HeaderCell>}
+        {button && <Table.HeaderCell>Action</Table.HeaderCell>}
         <Table.HeaderCell>ID</Table.HeaderCell>
         <Table.HeaderCell>Fornavn</Table.HeaderCell>
-        <Table.HeaderCell>Etternavn</Table.HeaderCell>
-        <Table.HeaderCell>Rolle</Table.HeaderCell>
+        <Table.HeaderCell textSize="medium">Etternavn</Table.HeaderCell>
+        <Table.HeaderCell textSize="small">Rolle</Table.HeaderCell>
       </Table.Row>
     </Table.Header>
     <Table.Body>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -35,8 +39,8 @@ const TableComponent = (props) => (
         <Table.DataCell>Picard</Table.DataCell>
         <Table.DataCell>Kaptein</Table.DataCell>
       </Table.Row>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -51,8 +55,8 @@ const TableComponent = (props) => (
         <Table.DataCell>Riker</Table.DataCell>
         <Table.DataCell>Kommandør</Table.DataCell>
       </Table.Row>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -64,8 +68,8 @@ const TableComponent = (props) => (
         )}
         <Table.HeaderCell>3</Table.HeaderCell>
         <Table.DataCell>Geordi</Table.DataCell>
-        <Table.DataCell>La Forge</Table.DataCell>
-        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+        <Table.DataCell textSize="medium">La Forge</Table.DataCell>
+        <Table.DataCell textSize="small">Sjefsingeniør</Table.DataCell>
       </Table.Row>
     </Table.Body>
   </Table>
@@ -229,22 +233,32 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
         </Table.Row>
         <Table.Row selected={selectedRows.includes("3")}>
           <Table.DataCell>
-            <Checkbox
-              size={size}
-              hideLabel
-              checked={selectedRows.includes("3")}
-              onChange={() => toggleSelectedRow("3")}
-              aria-labelledby={`x_r3-${size}`}
-            >
-              {" "}
-            </Checkbox>
+            <CheckboxGroup legend="velg flere felt" hideLegend>
+              <Checkbox
+                size={size}
+                hideLabel
+                checked={selectedRows.includes("3")}
+                onChange={() => toggleSelectedRow("3")}
+                aria-labelledby={`x_r3-${size}`}
+              >
+                {" "}
+              </Checkbox>
+              <Checkbox
+                size={size}
+                hideLabel
+                checked={selectedRows.includes("3")}
+                onChange={() => toggleSelectedRow("3")}
+                aria-labelledby={`x_r3-${size}`}
+              >
+                {" "}
+              </Checkbox>
+            </CheckboxGroup>
           </Table.DataCell>
-          <Table.HeaderCell scope="row">
-            <span id={`x_r3-${size}`}>Rudolph Bachenmeier</span>
+          <Table.HeaderCell scope="row" colSpan={4}>
+            <span id={`x_r3-${size}`}>
+              Don&apos;t stack multiple checkboxes
+            </span>
           </Table.HeaderCell>
-          <Table.DataCell>32</Table.DataCell>
-          <Table.DataCell>Germany</Table.DataCell>
-          <Table.DataCell>70</Table.DataCell>
         </Table.Row>
       </Table.Body>
     </Table>

package/src/table/stories/tests/table.stories.tsx

@@ -1,5 +1,4 @@
-import { expect, jest } from "@storybook/jest";
-import { userEvent, within } from "@storybook/testing-library";
+import { expect, fn, userEvent, within } from "@storybook/test";
 import React from "react";
 import { Table } from "../..";
 
@@ -66,7 +65,7 @@ export const ClickableRowTest = {
     );
   },
   args: {
-    onOpenChange: jest.fn(),
+    onOpenChange: fn(),
   },
   play: async ({ canvasElement, args }) => {
     args.onOpenChange.mockClear();

package/src/tabs/Tab.tsx

@@ -2,7 +2,7 @@ import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort } from "../typography";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 import { TabsContext } from "./context";
 
 export interface TabProps

package/src/tabs/TabList.tsx

@@ -9,7 +9,8 @@ import React, {
   useState,
 } from "react";
 import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { debounce, mergeRefs } from "../util";
+import { debounce } from "../util";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { TabsContext } from "./context";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -23,7 +24,8 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   ({ className, ...rest }, ref) => {
     const context = useContext(TabsContext);
     const listRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([listRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(listRef, ref);
+
     const [displayScroll, setDisplayScroll] = useState({
       start: false,
       end: false,

package/src/tabs/Tabs.tsx

@@ -1,7 +1,7 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import Tab, { TabProps } from "./Tab";
 import TabList, { TabListProps } from "./TabList";
 import TabPanel, { TabPanelProps } from "./TabPanel";

package/src/tag/Tag.tsx

@@ -36,6 +36,10 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
    * @default "medium"
    */
   size?: "medium" | "small" | "xsmall";
+  /**
+   * Tag Icon
+   */
+  icon?: React.ReactNode;
 }
 
 /**
@@ -50,7 +54,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size = "medium", ...rest }, ref) => (
+  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => (
     <BodyShort
       {...rest}
       ref={ref}
@@ -62,7 +66,10 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         `navds-tag--${variant}`,
         `navds-tag--${size}`,
       )}
-    />
+    >
+      {icon && <span className="navds-tag__icon--left">{icon}</span>}
+      {children}
+    </BodyShort>
   ),
 );
 

package/src/tag/tag.stories.tsx

@@ -1,6 +1,10 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
+import { ComponentIcon } from "@navikt/aksel-icons";
 import { Tag, TagProps } from ".";
+import { HStack } from "../layout/stack";
+
+const sizes: TagProps["size"][] = ["xsmall", "small", "medium"];
 
 const variants: TagProps["variant"][] = [
   "warning",
@@ -52,7 +56,11 @@ export default {
 
 export const Default = {
   render: (props) => (
-    <Tag variant={props.variant} size={props.size}>
+    <Tag
+      variant={props.variant}
+      size={props.size}
+      icon={props.icon && <ComponentIcon aria-hidden />}
+    >
       {props.children}
     </Tag>
   ),
@@ -60,6 +68,7 @@ export const Default = {
   args: {
     children: "Id elit esse",
     variant: "info",
+    icon: false,
   },
 };
 
@@ -98,3 +107,20 @@ export const Variants = () => {
     </div>
   );
 };
+
+export const WithIcons = () => {
+  return (
+    <HStack gap="2" align="start">
+      {sizes.reverse().map((size) => (
+        <Tag
+          key={size}
+          variant="neutral-moderate"
+          size={size}
+          icon={<ComponentIcon aria-hidden />}
+        >
+          {size}
+        </Tag>
+      ))}
+    </HStack>
+  );
+};

package/src/timeline/Pin.tsx

@@ -14,8 +14,8 @@ import {
   useRole,
 } from "@floating-ui/react";
 import { format } from "date-fns";
-import React, { forwardRef, useMemo, useRef, useState } from "react";
-import { mergeRefs } from "../util";
+import React, { forwardRef, useRef, useState } from "react";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { useTimelineContext } from "./hooks/useTimelineContext";
 import { position } from "./utils/calc";
 import { TimelineComponentTypes } from "./utils/types.internal";
@@ -81,10 +81,7 @@ export const Pin = forwardRef<HTMLButtonElement, TimelinePinProps>(
       role,
     ]);
 
-    const mergedRef = useMemo(
-      () => mergeRefs([refs.setReference, ref]),
-      [ref, refs.setReference],
-    );
+    const mergedRef = useMergeRefs(refs.setReference, ref);
 
     const staticSide = {
       top: "bottom",

package/src/timeline/period/ClickablePeriod.tsx

@@ -14,8 +14,8 @@ import {
   useRole,
 } from "@floating-ui/react";
 import cl from "clsx";
-import React, { useMemo, useRef, useState } from "react";
-import { mergeRefs } from "../../util";
+import React, { useRef, useState } from "react";
+import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { usePeriodContext } from "../hooks/usePeriodContext";
 import { useRowContext } from "../hooks/useRowContext";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -89,10 +89,7 @@ const ClickablePeriod = React.memo(
       role,
     ]);
 
-    const mergedRef = useMemo(
-      () => mergeRefs([refs.setReference, periodRef]),
-      [periodRef, refs.setReference],
-    );
+    const mergedRef = useMergeRefs(refs.setReference, periodRef);
 
     const staticSide = {
       top: "bottom",

package/src/toggle-group/ToggleGroup.tsx

@@ -2,7 +2,7 @@ import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import cl from "clsx";
 import React, { HTMLAttributes, forwardRef, useState } from "react";
 import { Label } from "../typography";
-import { useId } from "../util";
+import { useId } from "../util/hooks";
 import ToggleItem, { ToggleItemProps } from "./ToggleItem";
 import { ToggleGroupContext } from "./context";
 

package/src/tooltip/Tooltip.tsx

@@ -18,14 +18,14 @@ import React, {
   cloneElement,
   forwardRef,
   useContext,
-  useMemo,
   useRef,
 } from "react";
 import { ModalContext } from "../modal/ModalContext";
 import { useProvider } from "../provider";
 import { Detail } from "../typography";
-import { mergeRefs, useId } from "../util";
+import { useId } from "../util/hooks";
 import { useControllableState } from "../util/hooks/useControllableState";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -113,7 +113,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       maxChar = 80,
       ...rest
     },
-    ref
+    ref,
   ) => {
     const [_open, _setOpen] = useControllableState({
       defaultValue: defaultOpen,
@@ -166,14 +166,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     const ariaId = useId(id);
 
-    const mergedRef = useMemo(
-      () => mergeRefs([ref, refs.setFloating]),
-      [refs.setFloating, ref]
-    );
-    const childMergedRef = useMemo(
-      () => mergeRefs([(children as any).ref, refs.setReference]),
-      [children, refs.setReference]
-    );
+    const mergedRef = useMergeRefs(ref, refs.setFloating);
+    const childMergedRef = useMergeRefs(children.ref, refs.setReference);
 
     if (
       !children ||
@@ -181,7 +175,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       (children as any) === React.Fragment
     ) {
       console.error(
-        "<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>"
+        "<Tooltip> children needs to be a single ReactElement and not: <React.Fragment/> | <></>",
       );
       return null;
     }
@@ -189,7 +183,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     if (content?.length > maxChar) {
       _open &&
         console.warn(
-          `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`
+          `Because of strict accessibility concers we encourage all Tooltips to have less than 80 characters. Can be overwritten with the maxChar-prop\n\nLength:${content.length}\nTooltip-content: ${content}`,
         );
     }
 
@@ -203,7 +197,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
             "aria-describedby": _open
               ? cl(ariaId, children?.props["aria-describedby"])
               : children?.props["aria-describedby"],
-          })
+          }),
         )}
         <FloatingPortal root={rootElement}>
           {_open && (
@@ -222,7 +216,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
                 className: cl(
                   "navds-tooltip",
                   "navds-detail navds-detail--small",
-                  className
+                  className,
                 ),
               })}
               data-side={placement}
@@ -231,12 +225,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
               {keys && (
                 <span className="navds-tooltip__keys">
                   {keys.map((key) => (
-                    <Detail
-                      size="small"
-                      as="kbd"
-                      key={key}
-                      className="navds-tooltip__key"
-                    >
+                    <Detail as="kbd" key={key} className="navds-tooltip__key">
                       {key}
                     </Detail>
                   ))}
@@ -267,7 +256,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         </FloatingPortal>
       </>
     );
-  }
+  },
 );
 
 export default Tooltip;

package/src/typography/BodyLong.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/BodyShort.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/Detail.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/ErrorMessage.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/Heading.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/Ingress.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 
 export interface IngressProps
   extends React.HTMLAttributes<HTMLParagraphElement> {

package/src/typography/Label.tsx

@@ -1,6 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
+import { OverridableComponent } from "../util/types";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 

package/src/typography/stories/bodylong.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { BodyLong } from "..";
 import { VStack } from "../..";

package/src/typography/stories/bodyshort.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { BodyShort } from "..";
 import { VStack } from "../..";

package/src/typography/stories/detail.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { Detail } from "..";
 import { VStack } from "../..";

package/src/typography/stories/error-message.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { ErrorMessage } from "..";
 import { VStack } from "../..";

package/src/typography/stories/heading.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import { default as React } from "react";
 import { Heading } from "..";
 import { VStack } from "../..";

package/src/typography/stories/ingress.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { Ingress } from "..";
 

package/src/typography/stories/label.stories.tsx

@@ -1,6 +1,5 @@
-import { expect } from "@storybook/jest";
 import type { Meta, StoryObj } from "@storybook/react";
-import { within } from "@storybook/testing-library";
+import { expect, within } from "@storybook/test";
 import React from "react";
 import { Label } from "..";
 import { VStack } from "../..";

package/src/util/Slot.tsx

@@ -1,6 +1,6 @@
 // https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
 import * as React from "react";
-import mergeRefs from "./mergeRefs";
+import { mergeRefs } from "./hooks/useMergeRefs";
 
 interface SlotProps extends React.HTMLAttributes<HTMLElement> {
   children?: React.ReactNode;

package/src/util/TextareaAutoSize.tsx

@@ -1,7 +1,9 @@
 /* https://github.com/mui/material-ui/blob/master/packages/mui-base/src/TextareaAutosize/TextareaAutosize.tsx */
-import React, { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-import { debounce, mergeRefs, useClientLayoutEffect } from "../util";
+import { useClientLayoutEffect } from "../util/hooks";
+import debounce from "./debounce";
+import { useMergeRefs } from "./hooks/useMergeRefs";
 
 type State = {
   outerHeightStyle: number;
@@ -90,7 +92,9 @@ const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
   ) => {
     const { current: isControlled } = useRef(value != null);
     const inputRef = useRef<HTMLTextAreaElement>(null);
-    const handleRef = useMemo(() => mergeRefs([inputRef, ref]), [ref]);
+
+    const handleRef = useMergeRefs(inputRef, ref);
+
     const shadowRef = useRef<HTMLTextAreaElement>(null);
     const renders = useRef(0);
     const [state, setState] = useState<State>({ outerHeightStyle: 0 });

package/src/util/__tests__/useMedia.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import React from "react";
-import { useMedia } from "../useMedia";
+import { useMedia } from "../hooks";
 
 function TestComponent({ fallback }: { fallback?: boolean }) {
   const media = useMedia("screen and (min-width: 1024px)", fallback);

package/src/util/composeEventHandlers.ts

@@ -0,0 +1,19 @@
+/* https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx#L1 */
+
+/**
+ * Utility to consistently call original eventhandler, often from props and internal eventhandler
+ * @internal
+ */
+export function composeEventHandlers<T extends React.SyntheticEvent>(
+  originalEventHandler?: (event: T) => void,
+  ourEventHandler?: (event: T) => void,
+  { checkForDefaultPrevented = true } = {},
+) {
+  return function handleEvent(event: T) {
+    originalEventHandler?.(event);
+
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}

package/src/util/hooks/index.ts

@@ -0,0 +1,8 @@
+export { useCallbackRef } from "./useCallbackRef";
+export { useClientLayoutEffect } from "./useClientLayoutEffect";
+export { useControllableState } from "./useControllableState";
+export { useMergeRefs } from "./useMergeRefs";
+export { useEventListener } from "./useEventListener";
+export { useId } from "./useId";
+export { useMedia } from "./useMedia";
+export { usePrevious } from "./usePrevious";