@navikt/ds-react 8.8.0 → 8.9.1

package/esm/data/table/root/useTableSelection.js

@@ -1,77 +0,0 @@
-import { useControllableState } from "../../../utils/hooks/index.js";
-function useTableSelection({ selectionMode, defaultSelectedKeys, selectedKeys: selectedKeysProp, onSelectionChange, disabledKeys = [], data, }) {
-    const [selectedKeys, setSelectedKeys] = useControllableState({
-        value: selectedKeysProp,
-        defaultValue: defaultSelectedKeys !== null && defaultSelectedKeys !== void 0 ? defaultSelectedKeys : [],
-        onChange: onSelectionChange,
-    });
-    const handleSelectionChange = (key) => {
-        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) => ({
-            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 };
-//# sourceMappingURL=useTableSelection.js.map

package/esm/data/table/root/useTableSelection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTableSelection.js","sourceRoot":"","sources":["../../../../src/data/table/root/useTableSelection.ts"],"names":[],"mappings":"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"}

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