@navikt/ds-react 8.8.0 → 8.9.0

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

@@ -1,59 +0,0 @@
-import React from "react";
-import { Button } from "../../../button";
-import { Box } from "../../../primitives/box";
-import { HStack, Spacer } from "../../../primitives/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/drag-and-drop/drag-handler/DataDragAndDropDragHandler.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import {
-  CaretDownCircleFillIcon,
-  CaretUpCircleFillIcon,
-  DragVerticalIcon,
-} from "@navikt/aksel-icons";
-
-export interface DataDragAndDropDragHandlerProps {
-  /**
-   * Whether the drag handler is disabled
-   */
-  // disabled?: boolean;
-  /**
-   * Wether dragging is done by keyboard. Used to conditionally render drag indicators.
-   */
-  keyboardDragging?: boolean;
-  /**
-   * Handle ref is forwarded to the button element serving as drag handle.
-   */
-  handleRef: React.Ref<HTMLDivElement>;
-}
-
-/**
- * DataDragAndDropDragHandler
- *
- * A button component that serves as a drag handle for drag and drop operations.
- * Can be used to initiate dragging of elements in a data table or list.
- */
-export const DataDragAndDropDragHandler = React.forwardRef<
-  HTMLButtonElement,
-  DataDragAndDropDragHandlerProps
->(({ keyboardDragging, handleRef }) => {
-  return (
-    <div className="aksel-data-drag-and-drop__drag-handler__alt">
-      {keyboardDragging && (
-        <span
-          className="aksel-data-drag-and-drop__drag-handler__arrow"
-          data-direction="up"
-        >
-          <CaretUpCircleFillIcon aria-hidden fontSize="1.2rem" />
-        </span>
-      )}
-      <div
-        ref={handleRef}
-        className="aksel-data-drag-and-drop__drag-handler__button"
-      >
-        <DragVerticalIcon
-          aria-hidden
-          title="Dra for å flytte"
-          fontSize="1.5rem"
-        />
-      </div>
-      {keyboardDragging && (
-        <span
-          className="aksel-data-drag-and-drop__drag-handler__arrow"
-          data-direction="down"
-        >
-          <CaretDownCircleFillIcon aria-hidden fontSize="1.2rem" />
-        </span>
-      )}
-    </div>
-  );
-});

package/src/data/drag-and-drop/item/DataDragAndDropItem.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { HStack } from "../../../primitives/stack";
-import { cl } from "../../../utils/helpers";
-
-interface DataDragAndDropItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  /**
-   * Unique id
-   */
-  id: string;
-  /**
-   * Index of the item being dragged
-   */
-  index: number;
-}
-
-/**
- * TODO
- *
- * @see 🏷️ {@link DataDragAndDropItemProps}
- * @example
- * ```tsx
- * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
- *   TODO
- * </DragAndDrop.Item>
- * ```
- */
-const DataDragAndDropItem = React.forwardRef<
-  HTMLDivElement,
-  DataDragAndDropItemProps
->(({ children, className, ...rest }, forwardedRef) => {
-  // const context = useDataDragAndDropContext();
-
-  return (
-    <HStack gap="space-8" align="center" wrap={false} asChild>
-      {/* TODO Should this be a <li>? */}
-      <div
-        ref={forwardedRef}
-        {...rest}
-        className={cl("aksel-data-table__drag-and-drop-item", className)}
-        /*data-dragging={isDragging}
-        data-mouse-dragging={mouseDragging}
-        data-keyboard-dragging={keyboardDragging}
-        data-drop-target={mouseDropTarget}*/
-      >
-        <div>{children}</div>
-      </div>
-    </HStack>
-  );
-});
-
-export default DataDragAndDropItem;
-export { DataDragAndDropItem };
-export type { DataDragAndDropItemProps };

package/src/data/drag-and-drop/root/DataDragAndDrop.context.tsx

@@ -1,14 +0,0 @@
-import { createStrictContext } from "../../../utils/helpers";
-
-interface DataDragAndDropContextType {
-  inputMethod: "mouse" | "keyboard" | null;
-}
-
-export const {
-  Provider: DataDragAndDropProvider,
-  useContext: useDataDragAndDropContext,
-} = createStrictContext<DataDragAndDropContextType | undefined>({
-  errorMessage:
-    "useDataDragAndDropContext must be used within a DataDragAndDropProvider",
-  name: "DataDragAndDropContext",
-});

package/src/data/drag-and-drop/root/DataDragAndDropRoot.tsx

@@ -1,54 +0,0 @@
-import React, { forwardRef } from "react";
-import DataDragAndDropItem, {
-  DataDragAndDropItemProps,
-} from "../item/DataDragAndDropItem";
-import { DataDragAndDropProvider } from "./DataDragAndDrop.context";
-
-interface DataDragAndDropProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: any[];
-  setItems: React.Dispatch<React.SetStateAction<any[]>>;
-}
-
-interface DataDragAndDropRootComponent extends React.ForwardRefExoticComponent<
-  DataDragAndDropProps & React.RefAttributes<HTMLDivElement>
-> {
-  /**
-   * @see 🏷️ {@link DataDragAndDropItemProps}
-   * * @example
-   * ```jsx
-   * <DragAndDrop>
-   *   <DragAndDrop.Item id="1" index={0}>
-   *     ...
-   *   </DragAndDrop.Item>
-   * </DragAndDrop>
-   * ```
-   */
-  Item: typeof DataDragAndDropItem;
-}
-
-/**
- * TODO
- * setItems on root
- * state : active element
- * pointer over listener / state, onPointerEnter, onPointerLeave
- * Overlay - Use floating component
- * Keyboard navigation
- * Handle - button, arrows also button
- * UU - announce on drag start, item moved, drag end
- */
-
-const DataDragAndDrop = forwardRef<HTMLDivElement, DataDragAndDropProps>(
-  ({ children }, forwardedRef) => {
-    return (
-      <DataDragAndDropProvider inputMethod={null}>
-        <div ref={forwardedRef}>{children}</div>
-      </DataDragAndDropProvider>
-    );
-  },
-) as DataDragAndDropRootComponent;
-
-DataDragAndDrop.Item = DataDragAndDropItem;
-
-export { DataDragAndDrop, DataDragAndDropItem };
-export default DataDragAndDrop;
-export type { DataDragAndDropItemProps, DataDragAndDropProps };

package/src/data/table/root/useTableSelection.ts

@@ -1,126 +0,0 @@
-import type { CheckboxProps } from "../../../form/checkbox/types";
-import { useControllableState } from "../../../utils/hooks";
-
-type SelectionT = (string | number)[] | "all";
-
-type SelectionProps = {
-  /**
-   * Enables selection of rows.
-   *
-   *
-   * When set to "single", only one row can be selected at a time.
-   *
-   * When set to "multiple", multiple rows can be selected.
-   *
-   * TODO:
-   * - Implement callbacks for selection changes (e.g. onRowSelect, onSelectAll)
-   * - Implement controlled state
-   * - Implement auto-add checkbox to rows and header when selection is enabled
-   *
-   * @default "none"
-   */
-  selectionMode?: "none" | "single" | "multiple";
-  selectedKeys?: SelectionT;
-  defaultSelectedKeys?: SelectionT;
-  onSelectionChange?: (keys: SelectionT) => void;
-  disabledKeys?: (string | number)[];
-};
-
-type UseTableSelectionArgs = SelectionProps & {
-  /* disallowEmptySelection?: boolean; */
-  /* TODO: Support generics */
-  data: (any & { id: string | number })[];
-};
-
-function useTableSelection({
-  selectionMode,
-  defaultSelectedKeys,
-  selectedKeys: selectedKeysProp,
-  onSelectionChange,
-  disabledKeys = [],
-  data,
-}: UseTableSelectionArgs) {
-  const [selectedKeys, setSelectedKeys] = useControllableState({
-    value: selectedKeysProp,
-    defaultValue: defaultSelectedKeys ?? [],
-    onChange: onSelectionChange,
-  });
-
-  const handleSelectionChange = (key: { value: string | number } | "all") => {
-    if (selectionMode === "none") {
-      return;
-    }
-
-    if (key === "all") {
-      if (
-        selectedKeys === "all" ||
-        (Array.isArray(selectedKeys) && selectedKeys.length === data.length)
-      ) {
-        setSelectedKeys([]);
-      } else {
-        const allKeys = data.map((item) => item.id);
-        setSelectedKeys(allKeys);
-      }
-    } else {
-      const value = key.value;
-      if (selectedKeys === "all") {
-        setSelectedKeys(
-          data.map((item) => item.id).filter((id) => id !== value),
-        );
-      } else if (Array.isArray(selectedKeys)) {
-        if (selectedKeys.includes(value)) {
-          setSelectedKeys(selectedKeys.filter((k) => k !== value));
-        } else {
-          setSelectedKeys([...selectedKeys, value]);
-        }
-      }
-    }
-  };
-
-  if (selectionMode === "none") {
-    return {
-      selectedKeys: [],
-      handleSelectionChange: () => {},
-      selectionMode,
-      disabledKeys,
-    };
-  }
-
-  return {
-    selectedKeys,
-    handleSelectionChange,
-    selectionMode,
-    disabledKeys,
-    getTheadCheckboxProps: () => {
-      const indeterminate =
-        Array.isArray(selectedKeys) &&
-        selectedKeys.length > 0 &&
-        selectedKeys.length < data.length;
-
-      return {
-        /* TODO: i18n */
-        children: selectionMode === "single" ? "Select row" : "Select all rows",
-        onChange: () => handleSelectionChange("all"),
-        checked:
-          (selectedKeys === "all" ||
-            (Array.isArray(selectedKeys) && selectedKeys.length > 0)) &&
-          !indeterminate,
-        indeterminate,
-        disabled: disabledKeys.length === data.length,
-        hideLabel: true,
-      };
-    },
-    getRowCheckboxProps: (key: string | number): CheckboxProps => ({
-      children: `Select row with id ${key}`,
-      onChange: () => handleSelectionChange({ value: key }),
-      checked:
-        selectedKeys === "all" ||
-        (Array.isArray(selectedKeys) && selectedKeys.includes(key)),
-      disabled: disabledKeys.includes(key),
-      hideLabel: true,
-    }),
-  };
-}
-
-export { useTableSelection };
-export type { SelectionProps };