@navikt/ds-react 8.8.0 → 8.9.0

package/src/data/table/root/DataTableRoot.tsx

@@ -9,6 +9,8 @@ import {
   DataTableEmptyState,
   type DataTableEmptyStateProps,
 } from "../empty-state/DataTableEmptyState";
+import { useTableKeyboardNav } from "../hooks/useTableKeyboardNav";
+import { type SelectionProps } from "../hooks/useTableSelection";
 import {
   DataTableLoadingState,
   type DataTableLoadingStateProps,
@@ -29,8 +31,6 @@ import {
 } from "../thead/DataTableThead";
 import { DataTableTr, type DataTableTrProps } from "../tr/DataTableTr";
 import { DataTableContextProvider } from "./DataTableRoot.context";
-import { useTableKeyboardNav } from "./useTableKeyboardNav";
-import { type SelectionProps } from "./useTableSelection";
 
 interface DataTableProps
   extends React.HTMLAttributes<HTMLTableElement>, SelectionProps {

package/src/data/token-filter/AutoSuggest.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef, useState } from "react";
+import React, { type JSX, forwardRef, useState } from "react";
 import { Search } from "../../form/search";
 import { VStack } from "../../primitives/stack";
-import { Detail, Label } from "../../typography";
+import { BodyShort, Detail } from "../../typography";
 import Listbox from "../../utils/components/Listbox/root/ListboxRoot";
 import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer";
 import { Floating } from "../../utils/components/floating/Floating";
@@ -63,6 +63,8 @@ const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
                   setOpen(true);
                 }}
                 onFocus={() => setOpen(true)}
+                size="small"
+                autoComplete="off"
                 /* onKeyDown={(e) => {
               if (e.key === "Enter") {
                 createToken(filterText);
@@ -79,6 +81,7 @@ const AutoSuggest = forwardRef<HTMLInputElement, AutoSuggestProps>(
               setFocusedValue={setVirtuallyFocusedOptionId}
               onClose={handleClose}
               safeZoneAnchor={inputRef}
+              autoSuggestValue={value}
             />
           )}
         </Listbox>
@@ -94,6 +97,7 @@ type AutoSuggestPopupProps = {
   setFocusedValue: (value: string) => void;
   onClose: () => void;
   safeZoneAnchor: HTMLInputElement | null;
+  autoSuggestValue: string;
 };
 
 const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
@@ -105,6 +109,7 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
       setFocusedValue,
       onClose,
       safeZoneAnchor,
+      autoSuggestValue,
     },
     ref,
   ) => {
@@ -134,7 +139,12 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
                       hasVirtualFocus={focusedValue === item.value}
                     >
                       <VStack gap="space-0">
-                        <Label as="div">{item.label}</Label>
+                        <BodyShort as="div" size="small">
+                          <HighlightText
+                            text={item.label}
+                            highlightText={autoSuggestValue}
+                          />
+                        </BodyShort>
                         {item.description && (
                           <Detail as="div">{item.description}</Detail>
                         )}
@@ -158,4 +168,56 @@ const AutoSuggestPopup = forwardRef<HTMLDivElement, AutoSuggestPopupProps>(
   },
 );
 
+function HighlightText({
+  text,
+  highlightText,
+}: {
+  text: string;
+  highlightText: string;
+}) {
+  if (!text || !highlightText) {
+    return <span>{text}</span>;
+  }
+
+  if (text === highlightText) {
+    return <Highlight text={text} />;
+  }
+
+  const { noMatches, matches } = highlightSplit(text, highlightText);
+
+  const highlighted: (string | JSX.Element)[] = [];
+
+  noMatches.forEach((noMatch, idx) => {
+    highlighted.push(<span key={`noMatch-${idx}`}>{noMatch}</span>);
+
+    if (matches && idx < matches.length) {
+      highlighted.push(<Highlight key={`match-${idx}`} text={matches[idx]} />);
+    }
+  });
+
+  return <span>{highlighted}</span>;
+}
+
+function Highlight({ text }: { text: string }) {
+  return <mark className="aksel-listbox__highlight">{text}</mark>;
+}
+
+function highlightSplit(text: string, highlightText: string) {
+  /* Skip loooong texts */
+  if (highlightText.length > 1000) {
+    return { noMatches: [text], matches: null };
+  }
+
+  /* Case insensitive filtering */
+  const filteringPattern = highlightText.replace(
+    /[-[\]/{}()*+?.\\^$|]/g,
+    "\\$&",
+  );
+  const regexp = new RegExp(filteringPattern, "gi");
+  const noMatches = text.split(regexp);
+  const matches = text.match(regexp);
+
+  return { noMatches, matches };
+}
+
 export { AutoSuggest };

package/src/data/token-filter/TokenFilter.tsx

@@ -28,6 +28,7 @@ type TokenFilterProps = {
  * TODO:
  * - Implement onChange handler to update query state when user selects an autocomplete option.
  * - Handle token rendering and editing (e.g., show tokens for matched properties/operators/values, allow deleting tokens).
+ * - Writing "stance" still shows status and hostname options
  */
 export const TokenFilter = forwardRef<HTMLDivElement, TokenFilterProps>(
   ({ query, className, propertyDefinitions, options, onChange }, ref) => {

package/src/data/toolbar/root/DataToolbarRoot.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 import { cl } from "../../../utils/helpers";
 import DataToolbarButton, {
   DataToolbarButtonProps,
@@ -12,23 +12,15 @@ import DataToolbarToggleButton, {
 } from "../toggle-button/DataToolbarToggleButton";
 
 interface DataToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
+  children?: never;
+  renderInput?: React.ReactNode;
+  renderPreferences?: React.ReactNode;
+  renderPagination?: React.ReactNode;
 }
 
 interface DataToolbarRootComponent extends React.ForwardRefExoticComponent<
   DataToolbarProps & React.RefAttributes<HTMLDivElement>
 > {
-  /**
-   * @see 🏷️ {@link DataToolbarSearchFieldProps}
-   * @example
-   * ```tsx
-   * <DataToolbar>
-   *   <DataToolbar.SearchField />
-   * </DataToolbar>
-   * ```
-   */
-  SearchField: typeof DataToolbarSearchField;
-
   /**
    * @see 🏷️ {@link DataToolbarButtonProps}
    * @example
@@ -39,48 +31,53 @@ interface DataToolbarRootComponent extends React.ForwardRefExoticComponent<
    * ```
    */
   Button: typeof DataToolbarButton;
-
-  /**
-   * @see 🏷️ {@link DataToolbarToggleButtonProps}
-   * @example
-   * ```tsx
-   * <DataToolbar>
-   *   <DataToolbar.ToggleButton />
-   * </DataToolbar>
-   * ```
-   */
-  ToggleButton: typeof DataToolbarToggleButton;
 }
 
-const DataToolbar = React.forwardRef<HTMLDivElement, DataToolbarProps>(
-  ({ children, className, ...rest }, forwardRef) => {
+const DataToolbar = forwardRef<HTMLDivElement, DataToolbarProps>(
+  (
+    { className, renderInput, renderPreferences, renderPagination, ...rest },
+    forwardedRef,
+  ) => {
     return (
       <div
-        ref={forwardRef}
+        ref={forwardedRef}
         {...rest}
         className={cl("aksel-data-toolbar", className)}
         role="toolbar"
       >
-        {children}
+        {renderInput && (
+          <div className="aksel-data-toolbar__input">{renderInput}</div>
+        )}
+
+        <div className="aksel-data-toolbar__actions">
+          {renderPagination && (
+            <div className="aksel-data-toolbar__pagination">
+              {renderPagination}
+            </div>
+          )}
+          {renderPreferences && (
+            <div className="aksel-data-toolbar__preferences">
+              {renderPreferences}
+            </div>
+          )}
+        </div>
       </div>
     );
   },
 ) as DataToolbarRootComponent;
 
-DataToolbar.SearchField = DataToolbarSearchField;
 DataToolbar.Button = DataToolbarButton;
-DataToolbar.ToggleButton = DataToolbarToggleButton;
 
 export {
   DataToolbar,
-  DataToolbarSearchField,
   DataToolbarButton,
+  DataToolbarSearchField,
   DataToolbarToggleButton,
 };
 export default DataToolbar;
 export type {
+  DataToolbarButtonProps,
   DataToolbarProps,
   DataToolbarSearchFieldProps,
-  DataToolbarButtonProps,
   DataToolbarToggleButtonProps,
 };

package/src/date/Date.Input.tsx

@@ -1,5 +1,6 @@
-import React, { InputHTMLAttributes, forwardRef, useRef } from "react";
+import React, { InputHTMLAttributes, forwardRef } from "react";
 import { CalendarIcon } from "@navikt/aksel-icons";
+import { Button } from "../button";
 import { ReadOnlyIcon } from "../form/ReadOnlyIcon";
 import { FormFieldProps, useFormField } from "../form/useFormField";
 import { BodyShort, ErrorMessage, Label } from "../typography";
@@ -68,10 +69,10 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
     description,
     variant = "datepicker",
     setAnchorRef,
+    "data-color": dataColor,
     ...rest
   } = props;
 
-  const buttonRef = useRef<HTMLButtonElement>(null);
   const translate = useDateTranslationContext().translate;
 
   const isDatepickerVariant = variant === "datepicker";
@@ -113,6 +114,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           "aksel-date__field--readonly": readOnly,
         },
       )}
+      data-color={dataColor}
     >
       <Label
         htmlFor={inputProps.id}
@@ -142,7 +144,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           {...omit(rest, ["error", "errorId", "size"])}
           {...inputProps}
           autoComplete="off"
-          aria-controls={context?.open ? context.ariaId : undefined}
+          aria-controls={context.open ? context.ariaId : undefined}
           readOnly={readOnly}
           className={cl(
             "aksel-date__field-input",
@@ -152,23 +154,22 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
           )}
           size={isDatepickerVariant ? 11 : 14}
         />
-        <button
+        <Button
           disabled={inputProps.disabled || readOnly}
           tabIndex={readOnly ? -1 : undefined}
-          onClick={() => {
-            context?.onOpen();
-            setAnchorRef?.(buttonRef.current);
-          }}
+          onClick={context.onOpen}
           type="button"
           className="aksel-date__field-button"
-          ref={buttonRef}
-        >
-          <CalendarIcon
-            title={translate(
-              conditionalVariables.iconTitle[context?.open ? "close" : "open"],
-            )}
-          />
-        </button>
+          ref={setAnchorRef}
+          icon={<CalendarIcon aria-hidden />}
+          // If we have the title on the icon, NVDA will read "close" when focusing
+          // the button after closing the popup, even if we wait a tick.
+          title={translate(
+            conditionalVariables.iconTitle[context.open ? "close" : "open"],
+          )}
+          variant="secondary"
+          size={size}
+        />
       </div>
       <div
         className="aksel-form-field__error"

package/src/date/datepicker/hooks/useDatepicker.tsx

@@ -248,7 +248,9 @@ export const useDatepicker = (
 
     if (day && !selected) {
       handleOpen(false);
-      anchorRef?.focus();
+      // We use sync:false so that when Modal is used (see Date.Dialog.tsx), it is closed before
+      // we try to focus the open button (since native modal dialogs don't allow focus outside).
+      focusElement(anchorRef, { sync: false, preventScroll: true });
     }
 
     if (selected) {
@@ -326,10 +328,7 @@ export const useDatepicker = (
     open,
     onClose: () => {
       handleOpen(false);
-      /* Delay focus to allow "open"-button to update title before focus */
-      queueMicrotask(() =>
-        focusElement(anchorRef, { sync: false, preventScroll: true }),
-      );
+      focusElement(anchorRef, { sync: false, preventScroll: true });
     },
     onOpenToggle: () => handleOpen(!open),
     disabled,

package/src/date/monthpicker/hooks/useMonthPicker.tsx

@@ -321,10 +321,9 @@ export const useMonthpicker = (
     onOpenToggle: () => handleOpen(!open),
     onClose: () => {
       handleOpen(false);
-      /* Delay focus to allow "open"-button to update title before focus */
-      queueMicrotask(() =>
-        focusElement(anchorRef, { sync: false, preventScroll: true }),
-      );
+      // We use sync:false so that when Modal is used (see Date.Dialog.tsx), it is closed before
+      // we try to focus the open button (since native modal dialogs don't allow focus outside).
+      focusElement(anchorRef, { sync: false, preventScroll: true });
     },
     disabled,
   };

package/src/internal-header/InternalHeaderButton.tsx

@@ -7,18 +7,27 @@ export interface InternalHeaderButtonProps extends React.ButtonHTMLAttributes<HT
    * Application Button
    */
   children: React.ReactNode;
+  /**
+   * Active state for element.
+   * @default false
+   */
+  isActive?: boolean;
 }
 export const InternalHeaderButton: OverridableComponent<
   InternalHeaderButtonProps,
   HTMLButtonElement
-> = forwardRef(({ as: Component = "button", className, ...rest }, ref) => {
-  return (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl("aksel-internalheader__button", className)}
-    />
-  );
-});
+> = forwardRef(
+  ({ as: Component = "button", className, isActive = false, ...rest }, ref) => {
+    return (
+      <Component
+        aria-current={isActive || undefined}
+        {...rest}
+        ref={ref}
+        className={cl("aksel-internalheader__button", className)}
+        data-active={isActive}
+      />
+    );
+  },
+);
 
 export default InternalHeaderButton;

package/src/utils/components/Listbox/group/ListboxGroup.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Label } from "../../../../typography";
 import { useId } from "../../../../utils-external";
 
 interface ListboxGroupProps {
@@ -15,9 +16,15 @@ function ListboxGroup({ label, children }: ListboxGroupProps) {
       className="aksel-listbox__group"
       aria-labelledby={labelId}
     >
-      <div id={labelId} aria-hidden>
+      <Label
+        as="div"
+        size="small"
+        id={labelId}
+        aria-hidden
+        className="aksel-listbox__group-label"
+      >
         {label}
-      </div>
+      </Label>
       {children}
     </div>
   );

package/cjs/data/action-bar/root/DataActionBarRoot.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-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>
- * ```
- */
-declare const DataActionBar: React.ForwardRefExoticComponent<DataActionBarProps & React.RefAttributes<HTMLDivElement>>;
-export default DataActionBar;
-export { DataActionBar };
-export type { DataActionBarProps };

package/cjs/data/action-bar/root/DataActionBarRoot.js

@@ -1,49 +0,0 @@
-"use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataActionBar = void 0;
-const react_1 = __importDefault(require("react"));
-const button_1 = require("../../../button");
-const box_1 = require("../../../primitives/box");
-const stack_1 = require("../../../primitives/stack");
-const typography_1 = require("../../../typography");
-/**
- * TODO
- *
- * @see 🏷️ {@link DataActionBarProps}
- * @example
- * ```tsx
- * <DataActionBar numOfSelectedRows={selectedRows.length} onClear={handleClear}>
- *   TODO
- * </DataActionBar>
- * ```
- */
-const DataActionBar = react_1.default.forwardRef((_a, forwardRef) => {
-    var { children, numOfSelectedRows, onClear } = _a, rest = __rest(_a, ["children", "numOfSelectedRows", "onClear"]);
-    return (react_1.default.createElement(box_1.Box, { asChild: true, borderWidth: "1", borderRadius: "16", borderColor: "neutral", background: "raised", padding: "space-16", "data-color": "neutral" },
-        react_1.default.createElement(stack_1.HStack, Object.assign({ gap: "space-16", align: "center", ref: forwardRef }, rest),
-            react_1.default.createElement(typography_1.BodyShort, { textColor: "subtle" },
-                numOfSelectedRows,
-                " rad",
-                numOfSelectedRows > 1 ? "er" : "",
-                " valgt"),
-            react_1.default.createElement(button_1.Button, { variant: "secondary", size: "small", onClick: onClear }, "Nullstill valg"),
-            react_1.default.createElement(stack_1.Spacer, null),
-            children)));
-});
-exports.DataActionBar = DataActionBar;
-exports.default = DataActionBar;
-//# sourceMappingURL=DataActionBarRoot.js.map

package/cjs/data/action-bar/root/DataActionBarRoot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataActionBarRoot.js","sourceRoot":"","sources":["../../../../src/data/action-bar/root/DataActionBarRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,4CAAyC;AACzC,iDAA8C;AAC9C,qDAA2D;AAC3D,oDAAgD;AAchD;;;;;;;;;;GAUG;AACH,MAAM,aAAa,GAAG,eAAK,CAAC,UAAU,CACpC,CAAC,EAAiD,EAAE,UAAU,EAAE,EAAE;QAAjE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,OAAW,EAAN,IAAI,cAA/C,4CAAiD,CAAF;IAC9C,OAAO,CACL,8BAAC,SAAG,IACF,OAAO,QACP,WAAW,EAAC,GAAG,EACf,YAAY,EAAC,IAAI,EACjB,WAAW,EAAC,SAAS,EACrB,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAC,UAAU,gBACP,SAAS;QAEpB,8BAAC,cAAM,kBAAC,GAAG,EAAC,UAAU,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,UAAU,IAAM,IAAI;YAC7D,8BAAC,sBAAS,IAAC,SAAS,EAAC,QAAQ;gBAC1B,iBAAiB;;gBAAM,iBAAiB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;yBAC/C;YACZ,8BAAC,eAAM,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,qBAEhD;YACT,8BAAC,cAAM,OAAG;YACT,QAAQ,CACF,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAGO,sCAAa;AADtB,kBAAe,aAAa,CAAC"}

package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.d.ts

@@ -1,21 +0,0 @@
-import React from "react";
-export interface DataDragAndDropDragHandlerProps {
-    /**
-     * Whether the drag handler is disabled
-     */
-    /**
-     * 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 declare const DataDragAndDropDragHandler: React.ForwardRefExoticComponent<DataDragAndDropDragHandlerProps & React.RefAttributes<HTMLButtonElement>>;

package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.js

@@ -1,24 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataDragAndDropDragHandler = void 0;
-const react_1 = __importDefault(require("react"));
-const aksel_icons_1 = require("@navikt/aksel-icons");
-/**
- * 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.
- */
-exports.DataDragAndDropDragHandler = react_1.default.forwardRef(({ keyboardDragging, handleRef }) => {
-    return (react_1.default.createElement("div", { className: "aksel-data-drag-and-drop__drag-handler__alt" },
-        keyboardDragging && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "up" },
-            react_1.default.createElement(aksel_icons_1.CaretUpCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" }))),
-        react_1.default.createElement("div", { ref: handleRef, className: "aksel-data-drag-and-drop__drag-handler__button" },
-            react_1.default.createElement(aksel_icons_1.DragVerticalIcon, { "aria-hidden": true, title: "Dra for \u00E5 flytte", fontSize: "1.5rem" })),
-        keyboardDragging && (react_1.default.createElement("span", { className: "aksel-data-drag-and-drop__drag-handler__arrow", "data-direction": "down" },
-            react_1.default.createElement(aksel_icons_1.CaretDownCircleFillIcon, { "aria-hidden": true, fontSize: "1.2rem" })))));
-});
-//# sourceMappingURL=DataDragAndDropDragHandler.js.map

package/cjs/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataDragAndDropDragHandler.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/drag-handler/DataDragAndDropDragHandler.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAI6B;AAiB7B;;;;;GAKG;AACU,QAAA,0BAA0B,GAAG,eAAK,CAAC,UAAU,CAGxD,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE;IACpC,OAAO,CACL,uCAAK,SAAS,EAAC,6CAA6C;QACzD,gBAAgB,IAAI,CACnB,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,IAAI;YAEnB,8BAAC,mCAAqB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CAClD,CACR;QACD,uCACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAC,gDAAgD;YAE1D,8BAAC,8BAAgB,yBAEf,KAAK,EAAC,uBAAkB,EACxB,QAAQ,EAAC,QAAQ,GACjB,CACE;QACL,gBAAgB,IAAI,CACnB,wCACE,SAAS,EAAC,+CAA+C,oBAC1C,MAAM;YAErB,8BAAC,qCAAuB,yBAAa,QAAQ,EAAC,QAAQ,GAAG,CACpD,CACR,CACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/cjs/data/drag-and-drop/item/DataDragAndDropItem.d.ts

@@ -1,27 +0,0 @@
-import React from "react";
-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>
- * ```
- */
-declare const DataDragAndDropItem: React.ForwardRefExoticComponent<DataDragAndDropItemProps & React.RefAttributes<HTMLDivElement>>;
-export default DataDragAndDropItem;
-export { DataDragAndDropItem };
-export type { DataDragAndDropItemProps };

package/cjs/data/drag-and-drop/item/DataDragAndDropItem.js

@@ -1,41 +0,0 @@
-"use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataDragAndDropItem = void 0;
-const react_1 = __importDefault(require("react"));
-const stack_1 = require("../../../primitives/stack");
-const helpers_1 = require("../../../utils/helpers");
-/**
- * TODO
- *
- * @see 🏷️ {@link DataDragAndDropItemProps}
- * @example
- * ```tsx
- * <DragAndDrop.Item numOfSelectedRows={selectedRows.length} onClear={handleClear}>
- *   TODO
- * </DragAndDrop.Item>
- * ```
- */
-const DataDragAndDropItem = react_1.default.forwardRef((_a, forwardedRef) => {
-    // const context = useDataDragAndDropContext();
-    var { children, className } = _a, rest = __rest(_a, ["children", "className"]);
-    return (react_1.default.createElement(stack_1.HStack, { gap: "space-8", align: "center", wrap: false, asChild: true },
-        react_1.default.createElement("div", Object.assign({ ref: forwardedRef }, rest, { className: (0, helpers_1.cl)("aksel-data-table__drag-and-drop-item", className) }),
-            react_1.default.createElement("div", null, children))));
-});
-exports.DataDragAndDropItem = DataDragAndDropItem;
-exports.default = DataDragAndDropItem;
-//# sourceMappingURL=DataDragAndDropItem.js.map

package/cjs/data/drag-and-drop/item/DataDragAndDropItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataDragAndDropItem.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/item/DataDragAndDropItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,qDAAmD;AACnD,oDAA4C;AAc5C;;;;;;;;;;GAUG;AACH,MAAM,mBAAmB,GAAG,eAAK,CAAC,UAAU,CAG1C,CAAC,EAAgC,EAAE,YAAY,EAAE,EAAE;IACnD,+CAA+C;QAD9C,EAAE,QAAQ,EAAE,SAAS,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAG/B,OAAO,CACL,8BAAC,cAAM,IAAC,GAAG,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAK,EAAE,OAAO;QAEvD,qDACE,GAAG,EAAE,YAAY,IACb,IAAI,IACR,SAAS,EAAE,IAAA,YAAE,EAAC,sCAAsC,EAAE,SAAS,CAAC;YAMhE,2CAAM,QAAQ,CAAO,CACjB,CACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAGM,kDAAmB;AAD5B,kBAAe,mBAAmB,CAAC"}

package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.d.ts

@@ -1,8 +0,0 @@
-interface DataDragAndDropContextType {
-    inputMethod: "mouse" | "keyboard" | null;
-}
-export declare const DataDragAndDropProvider: import("react").FC<DataDragAndDropContextType & {
-    children: React.ReactNode;
-    ref?: never;
-}>, useDataDragAndDropContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataDragAndDropContextType | undefined : DataDragAndDropContextType | undefined;
-export {};

package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.js

@@ -1,10 +0,0 @@
-"use strict";
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDataDragAndDropContext = exports.DataDragAndDropProvider = void 0;
-const helpers_1 = require("../../../utils/helpers");
-_a = (0, helpers_1.createStrictContext)({
-    errorMessage: "useDataDragAndDropContext must be used within a DataDragAndDropProvider",
-    name: "DataDragAndDropContext",
-}), exports.DataDragAndDropProvider = _a.Provider, exports.useDataDragAndDropContext = _a.useContext;
-//# sourceMappingURL=DataDragAndDrop.context.js.map

package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DataDragAndDrop.context.js","sourceRoot":"","sources":["../../../../src/data/drag-and-drop/root/DataDragAndDrop.context.tsx"],"names":[],"mappings":";;;;AAAA,oDAA6D;AAMhD,KAGT,IAAA,6BAAmB,EAAyC;IAC9D,YAAY,EACV,yEAAyE;IAC3E,IAAI,EAAE,wBAAwB;CAC/B,CAAC,EANU,+BAAuB,gBACrB,iCAAyB,iBAKpC"}