@navikt/ds-react 8.8.0 → 8.9.1

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/form/checkbox/Checkbox.tsx

@@ -3,93 +3,66 @@ import { BodyShort } from "../../typography";
 import { omit, useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
 import { ReadOnlyIconWithTitle } from "../ReadOnlyIcon";
+import { CheckboxInput } from "./checkbox-input/CheckboxInput";
 import { CheckboxProps } from "./types";
 import useCheckbox from "./useCheckbox";
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  (props, ref) => {
+  (props: CheckboxProps, forwardedRef) => {
     const { inputProps, hasError, size, readOnly, nested } = useCheckbox(props);
     const descriptionId = useId();
 
+    const { className, description, children, indeterminate, hideLabel } =
+      props;
+
     return (
       <div
-        className={cl(
-          props.className,
-          "aksel-checkbox",
-          `aksel-checkbox--${size}`,
-          {
-            "aksel-checkbox--error": hasError,
-            "aksel-checkbox--disabled": inputProps.disabled,
-            "aksel-checkbox--readonly": readOnly,
-          },
-        )}
+        className={cl(className, "aksel-checkbox", `aksel-checkbox--${size}`, {
+          "aksel-checkbox--error": hasError,
+          "aksel-checkbox--disabled": inputProps.disabled,
+          "aksel-checkbox--readonly": readOnly,
+        })}
         data-color={hasError ? "danger" : props["data-color"]}
       >
-        <div className="aksel-checkbox__input-wrapper">
-          <input
-            {...omit(props, [
-              "children",
-              "size",
-              "error",
-              "description",
-              "hideLabel",
-              "indeterminate",
-              "errorId",
-              "readOnly",
-            ])}
-            {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-            aria-describedby={
-              cl(inputProps["aria-describedby"], {
-                [descriptionId]: props.description,
-              }) || undefined
-            }
-            type="checkbox"
-            className="aksel-checkbox__input"
-            ref={(el) => {
-              if (el) {
-                el.indeterminate = props.indeterminate ?? false;
-              }
-
-              if (typeof ref === "function") {
-                ref(el);
-              } else if (ref != null) {
-                ref.current = el;
-              }
-            }}
-          />
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 13 10"
-            fill="none"
-            focusable={false}
-            role="img"
-            aria-hidden
-            className="aksel-checkbox__icon"
-          >
-            <path
-              d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
+        <CheckboxInput
+          ref={forwardedRef}
+          {...omit(props, [
+            "children",
+            "size",
+            "error",
+            "description",
+            "hideLabel",
+            "indeterminate",
+            "errorId",
+            "readOnly",
+          ])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: description,
+            }) || undefined
+          }
+          indeterminate={indeterminate ?? false}
+          standalone={false}
+        />
         <BodyShort
           as="label"
           htmlFor={inputProps.id}
           size={size}
-          className={cl("aksel-checkbox__label", {
-            "aksel-sr-only": props.hideLabel,
-          })}
+          className="aksel-checkbox__label"
+          visuallyHidden={hideLabel}
         >
           {!nested && readOnly && <ReadOnlyIconWithTitle />}
-          {props.children}
+          {children}
         </BodyShort>
-        {props.description && (
+        {description && (
           <BodyShort
             id={descriptionId}
             size={size}
             className="aksel-form-field__subdescription aksel-checkbox__description"
+            visuallyHidden={hideLabel}
           >
-            {props.description}
+            {description}
           </BodyShort>
         )}
       </div>

package/src/form/checkbox/checkbox-input/CheckboxInput.tsx

@@ -0,0 +1,69 @@
+import React, { forwardRef, useCallback } from "react";
+import { cl } from "../../../utils/helpers";
+import { useMergeRefs } from "../../../utils/hooks";
+
+type CheckboxInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  indeterminate?: boolean;
+  children?: never;
+  standalone?: boolean;
+  /**
+   * Reduces pseudo-element target-size.
+   */
+  compact?: boolean;
+};
+
+const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
+  (
+    {
+      className,
+      indeterminate,
+      standalone = true,
+      compact,
+      ...rest
+    }: CheckboxInputProps,
+    forwardedRef,
+  ) => {
+    const indeterminateRef = useCallback(
+      (el: HTMLInputElement | null) => {
+        if (el) {
+          el.indeterminate = indeterminate ?? false;
+        }
+      },
+      [indeterminate],
+    );
+
+    const mergedRef = useMergeRefs(indeterminateRef, forwardedRef);
+
+    return (
+      <div
+        className="aksel-checkbox__input-wrapper"
+        data-standalone={standalone}
+        data-compact={compact}
+      >
+        <input
+          {...rest}
+          className={cl("aksel-checkbox__input", className)}
+          type="checkbox"
+          ref={mergedRef}
+        />
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 13 10"
+          fill="none"
+          focusable={false}
+          role="img"
+          aria-hidden
+          className="aksel-checkbox__icon"
+        >
+          <path
+            d="M4.03524 6.41478L10.4752 0.404669C11.0792 -0.160351 12.029 -0.130672 12.5955 0.47478C13.162 1.08027 13.1296 2.03007 12.5245 2.59621L5.02111 9.59934C4.74099 9.85904 4.37559 10 4.00025 10C3.60651 10 3.22717 9.84621 2.93914 9.56111L0.439143 7.06111C-0.146381 6.47558 -0.146381 5.52542 0.439143 4.93989C1.02467 4.35437 1.97483 4.35437 2.56036 4.93989L4.03524 6.41478Z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+    );
+  },
+);
+
+export { CheckboxInput };
+export type { CheckboxInputProps };

package/src/form/checkbox/types.ts

@@ -19,7 +19,7 @@ export interface CheckboxProps
    */
   children: React.ReactNode;
   /**
-   * Hides label and makes it viewable for screen-readers only.
+   * Visually hides label and description, and makes it viewable for screen-readers only.
    */
   hideLabel?: boolean;
   /**

package/src/form/fieldset/Fieldset.tsx

@@ -108,9 +108,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             id={legendId}
             size={size}
             as="legend"
-            className={cl("aksel-fieldset__legend", {
-              "aksel-sr-only": !!hideLegend,
-            })}
+            className="aksel-fieldset__legend"
+            visuallyHidden={!!hideLegend}
           >
             {readOnly &&
               (_fieldsSupportNativeReadOnly ? (
@@ -122,9 +121,8 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
           </Label>
           {!!description && (
             <BodyShort
-              className={cl("aksel-fieldset__description", {
-                "aksel-sr-only": !!hideLegend,
-              })}
+              className="aksel-fieldset__description"
+              visuallyHidden={!!hideLegend}
               id={inputDescriptionId}
               size={size ?? "medium"}
               as="div"

package/src/form/radio/Radio.tsx

@@ -2,52 +2,57 @@ import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography";
 import { omit, useId } from "../../utils-external";
 import { cl } from "../../utils/helpers";
+import { RadioInput } from "./radio-input/RadioInput";
 import { RadioProps } from "./types";
 import { useRadio } from "./useRadio";
 
-export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
-  const { inputProps, size, hasError, readOnly } = useRadio(props);
-  const descriptionId = useId();
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  (props: RadioProps, forwardedRef) => {
+    const { inputProps, size, hasError, readOnly } = useRadio(props);
+    const descriptionId = useId();
 
-  return (
-    <div
-      className={cl(props.className, "aksel-radio", `aksel-radio--${size}`, {
-        "aksel-radio--error": hasError,
-        "aksel-radio--disabled": inputProps.disabled,
-        "aksel-radio--readonly": readOnly,
-      })}
-      data-color={hasError ? "danger" : props["data-color"]}
-    >
-      <input
-        {...omit(props, ["children", "size", "description", "readOnly"])}
-        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
-        aria-describedby={
-          cl(inputProps["aria-describedby"], {
-            [descriptionId]: props.description,
-          }) || undefined
-        }
-        className="aksel-radio__input"
-        ref={ref}
-      />
-      <BodyShort
-        as="label"
-        htmlFor={inputProps.id}
-        className="aksel-radio__label"
-        size={size}
+    const { className, description, children } = props;
+
+    return (
+      <div
+        className={cl(className, "aksel-radio", `aksel-radio--${size}`, {
+          "aksel-radio--error": hasError,
+          "aksel-radio--disabled": inputProps.disabled,
+          "aksel-radio--readonly": readOnly,
+        })}
+        data-color={hasError ? "danger" : props["data-color"]}
       >
-        {props.children}
-      </BodyShort>
-      {props.description && (
+        <RadioInput
+          ref={forwardedRef}
+          {...omit(props, ["children", "size", "description", "readOnly"])}
+          {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+          aria-describedby={
+            cl(inputProps["aria-describedby"], {
+              [descriptionId]: description,
+            }) || undefined
+          }
+          standalone={false}
+        />
         <BodyShort
-          id={descriptionId}
+          as="label"
+          htmlFor={inputProps.id}
+          className="aksel-radio__label"
           size={size}
-          className="aksel-form-field__subdescription aksel-radio__description"
         >
-          {props.description}
+          {children}
         </BodyShort>
-      )}
-    </div>
-  );
-});
+        {description && (
+          <BodyShort
+            id={descriptionId}
+            size={size}
+            className="aksel-form-field__subdescription aksel-radio__description"
+          >
+            {description}
+          </BodyShort>
+        )}
+      </div>
+    );
+  },
+);
 
 export default Radio;

package/src/form/radio/radio-input/RadioInput.tsx

@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import { cl } from "../../../utils/helpers";
+
+type RadioInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  children?: never;
+  standalone?: boolean;
+  /**
+   * Reduces pseudo-element target-size.
+   */
+  compact?: boolean;
+};
+
+const RadioInput = forwardRef<HTMLInputElement, RadioInputProps>(
+  (
+    { className, standalone = true, compact, ...rest }: RadioInputProps,
+    forwardedRef,
+  ) => {
+    return (
+      <input
+        {...rest}
+        ref={forwardedRef}
+        className={cl("aksel-radio__input", className)}
+        data-standalone={standalone}
+        data-compact={compact}
+        type="radio"
+      />
+    );
+  },
+);
+
+export { RadioInput };
+export type { RadioInputProps };

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