@navikt/ds-react 8.0.1 → 8.2.0

package/src/copybutton/CopyButton.tsx

@@ -3,11 +3,9 @@ import { CheckmarkIcon, FilesIcon } from "@navikt/aksel-icons";
 import type { AkselStatusColorRole } from "@navikt/ds-tokens/types";
 import { Button, ButtonProps } from "../button";
 import type { AkselColor } from "../types/theme";
-import { cl } from "../util/className";
-import { composeEventHandlers } from "../util/composeEventHandlers";
-import copy from "../util/copy";
-import { useTimeout } from "../util/hooks/useTimeout";
-import { useI18n } from "../util/i18n/i18n.hooks";
+import { cl, clipboardCopy, composeEventHandlers } from "../utils/helpers";
+import { useTimeout } from "../utils/hooks";
+import { useI18n } from "../utils/i18n/i18n.hooks";
 
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">,
@@ -104,7 +102,7 @@ export const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
     const timeout = useTimeout();
 
     const handleClick = () => {
-      copy(copyText);
+      clipboardCopy(copyText);
       setActive(true);
       onActiveChange?.(true);
 

package/src/data/action-bar/root/DataActionBarRoot.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Button } from "../../../button";
+import { Box } from "../../../layout/box";
+import { HStack, Spacer } from "../../../layout/stack";
+import { BodyShort } from "../../../typography";
+
+interface DataActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Number of selected rows
+   */
+  numOfSelectedRows: number;
+  /**
+   * Callback for the clear button
+   */
+  onClear: () => void;
+}
+
+/**
+ * TODO
+ *
+ * @see 🏷️ {@link DataActionBarProps}
+ * @example
+ * ```tsx
+ * <DataActionBar numOfSelectedRows={selectedRows.length} onClear={handleClear}>
+ *   TODO
+ * </DataActionBar>
+ * ```
+ */
+const DataActionBar = React.forwardRef<HTMLDivElement, DataActionBarProps>(
+  ({ children, numOfSelectedRows, onClear, ...rest }, forwardRef) => {
+    return (
+      <Box
+        asChild
+        borderWidth="1"
+        borderRadius="16"
+        borderColor="neutral"
+        background="raised"
+        padding="space-16"
+        data-color="neutral"
+      >
+        <HStack gap="space-16" align="center" ref={forwardRef} {...rest}>
+          <BodyShort textColor="subtle">
+            {numOfSelectedRows} rad{numOfSelectedRows > 1 ? "er" : ""} valgt
+          </BodyShort>
+          <Button variant="secondary" size="small" onClick={onClear}>
+            Nullstill valg
+          </Button>
+          <Spacer />
+          {children}
+        </HStack>
+      </Box>
+    );
+  },
+);
+
+export default DataActionBar;
+export { DataActionBar };
+export type { DataActionBarProps };

package/src/data/filter/index.ts

@@ -0,0 +1,6 @@
+"use client";
+export { DataFilter, DataFilterItem } from "./root/DataFilterRoot";
+export type {
+  DataFilterProps,
+  DataFilterItemProps,
+} from "./root/DataFilterRoot";

package/src/data/filter/item/DataFilterItem.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+type DataFilterItemProps = React.HTMLAttributes<HTMLDivElement>;
+
+const DataFilterItem = React.forwardRef<HTMLDivElement, DataFilterItemProps>(
+  ({ className, ...props }, ref) => {
+    return <div className={className} ref={ref} {...props} />;
+  },
+);
+
+export { DataFilterItem };
+export type { DataFilterItemProps };

package/src/data/filter/root/DataFilterRoot.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import {
+  DataFilterItem,
+  type DataFilterItemProps,
+} from "../item/DataFilterItem";
+
+interface DataFilterProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+interface DataFilterRootComponent extends React.ForwardRefExoticComponent<
+  DataFilterProps & React.RefAttributes<HTMLDivElement>
+> {
+  /**
+   * @see 🏷️ {@link DataFilterItemProps}
+   * @example
+   * ```tsx
+   * <DataFilter>
+   *   <DataFilter.Item />
+   *   <DataFilter.Item />
+   *   <DataFilter.Item />
+   * </DataFilter>
+   * ```
+   */
+  Item: typeof DataFilterItem;
+}
+
+const DataFilter = React.forwardRef<HTMLDivElement, DataFilterProps>(
+  ({ children, ...rest }, forwardRef) => {
+    return (
+      <div ref={forwardRef} {...rest}>
+        {children}
+      </div>
+    );
+  },
+) as DataFilterRootComponent;
+
+DataFilter.Item = DataFilterItem;
+
+export default DataFilter;
+export { DataFilter, DataFilterItem };
+export type { DataFilterProps, DataFilterItemProps };