carbon-react 158.1.0 → 158.2.0

package/esm/__internal__/utils/helpers/array-move/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Move an array element from one position to another, without mutating the original array.
+ *
+ * ```ts
+ * const array = ["a", "b", "c", "d"];
+ * const result = arrayMove({ array, startIndex: 1, endIndex: 3 });
+ * // result is ["a", "c", "d", "b"]
+ * ```
+ * */
+declare function arrayMove<T>({ array, startIndex, endIndex, }: {
+    array: T[];
+    startIndex: number;
+    endIndex: number;
+}): T[];
+export default arrayMove;

package/esm/__internal__/utils/helpers/array-move/index.js

@@ -0,0 +1 @@
+function e({array:e,startIndex:r,endIndex:n}){if(r===n||r<0||n<0||r>=e.length||n>=e.length)return e;const t=Array.from(e),[a]=t.splice(r,1);return t.splice(n,0,a),t}export{e as default};

package/esm/components/draggable/__internal__/data.d.ts

@@ -0,0 +1,26 @@
+/** Helper functions for safer type checking. */
+declare const PRIVATE_DRAGGABLE_KEY: unique symbol;
+declare const PRIVATE_DROP_TARGET_KEY: unique symbol;
+export type Draggable = {
+    [PRIVATE_DRAGGABLE_KEY]: true;
+    /** Unique identifier of the draggable item */
+    id: string;
+    /** The index of the draggable item when dragging was initiated */
+    initialIndex: number;
+    /** Bounding rectangle of the draggable item  */
+    rect: DOMRect;
+    /** Unique identifier of the context instance the item belongs to */
+    contextId: symbol;
+};
+export type DropTarget = {
+    [PRIVATE_DROP_TARGET_KEY]: true;
+    /** Unique identifier of the drop target */
+    id: string;
+    /** Unique identifier of the context instance the drop target belongs to */
+    contextId: symbol;
+};
+export declare function getDraggable(data: Omit<Draggable, typeof PRIVATE_DRAGGABLE_KEY>): Draggable;
+export declare function getDropTarget(data: Omit<DropTarget, typeof PRIVATE_DROP_TARGET_KEY>): DropTarget;
+export declare function isDraggable(data: Record<string | symbol, unknown>): data is Draggable;
+export declare function isDropTarget(data: Record<string | symbol, unknown>): data is DropTarget;
+export {};

package/esm/components/draggable/__internal__/data.js

@@ -0,0 +1 @@
+function n(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function e(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}const r=Symbol("drag"),t=Symbol("drop");function o(n){return e({[r]:!0},n)}function u(n){return e({[t]:!0},n)}function c(n){return Boolean(n[r])}function f(n){return Boolean(n[t])}export{o as getDraggable,u as getDropTarget,c as isDraggable,f as isDropTarget};

package/esm/components/draggable/__internal__/drag-drop-provider.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { Draggable, DropTarget } from "./data";
+export interface DragDropProviderProps {
+    children: React.ReactNode;
+    /**
+     * Callback fired when an item is dropped.
+     *
+     * Provides data about the dragged item and the drop target (if any) as arguments.
+     */
+    onDrop?: (args: {
+        dragged: Draggable;
+        target: DropTarget | null;
+    }) => void;
+}
+type DragDropContextType = {
+    /** Identifier of the context instance. */
+    contextId: symbol;
+};
+export declare function useDragDropContext(): DragDropContextType | null;
+export declare const DragDropProvider: ({ children, onDrop, }: DragDropProviderProps) => React.JSX.Element;
+export {};

package/esm/components/draggable/__internal__/drag-drop-provider.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import r,{createContext as a,useEffect as e}from"react";import{isDraggable as o,isDropTarget as n}from"./data.js";import{monitorForElements as d}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";const c=a(null);function l(){return r.useContext(c)}const u=({children:a,onDrop:l})=>{const[u]=r.useState((()=>Symbol("draggable-context")));return e((()=>d({canMonitor:({source:t})=>o(t.data)&&t.data.contextId===u,onDrop:({source:t,location:r})=>{if(!o(t.data))return;if(!r.current.dropTargets.length)return void(null==l||l({dragged:t.data,target:null}));const a=r.current.dropTargets[0];n(a.data)&&(null==l||l({dragged:t.data,target:a.data}))}})),[u,l]),t(c.Provider,{value:{contextId:u},children:a})};export{u as DragDropProvider,l as useDragDropContext};

package/esm/components/draggable/__internal__/index.d.ts

@@ -0,0 +1 @@
+export { DragDropProvider, useDragDropContext } from "./drag-drop-provider";

package/esm/components/draggable/__internal__/index.js

@@ -0,0 +1 @@
+export{DragDropProvider,useDragDropContext}from"./drag-drop-provider.js";

package/esm/components/draggable/draggable-container.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
 export interface DraggableContainerProps extends MarginProps, TagProps {
-    /** Callback fired when order is changed */
+    /** Callback fired when an item is successfully dropped. */
     getOrder?: (draggableItemIds?: (string | number | undefined)[], movedItemId?: string | number | undefined) => void;
     /**
      * The content of the component

package/esm/components/draggable/draggable-container.component.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import r,{useState as t,useMemo as n,useRef as o,useEffect as i}from"react";import{DndProvider as a}from"react-dnd";import{HTML5Backend as l}from"react-dnd-html5-backend";import c from"invariant";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";import s from"./draggable-item/draggable-item.component.js";import d from"./__internal__/drop-target.component.js";function m(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function f(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){m(e,r,t[r])}))}return e}const y=m=>{var{"data-element":b,"data-role":u="draggable-container",children:g,getOrder:O,flexDirection:j="row"}=m,h=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(m,["data-element","data-role","children","getOrder","flexDirection"]);const[P,v]=t(r.Children.toArray(g)),w=n((()=>!r.Children.toArray(g).find((e=>!r.isValidElement(e)||"DraggableItem"!==e.type.displayName))),[g]);c(w,`\`${y.displayName}\` only accepts children of type \`${s.displayName}\`.`);const x=o(!0);i((()=>{x.current?x.current=!1:v(r.Children.toArray(g))}),[g]);const D=e=>{const t=P.filter((t=>r.isValidElement(t)&&`${t.props.id}`===e))[0];return{draggableItem:t,index:P.indexOf(t)}},E=(e,r)=>{const{draggableItem:t,index:n}=D(e);if(!t)return;const o=[...P];o.splice(n,1),o.splice(r,0,t),v(o)},I=p(h);return e(a,{backend:l,children:e(d,(S=f({"data-element":b,"data-role":u,getOrder:e=>{if(!O)return;const r=P.map((e=>e.props.id));O(r,e)}},I),k={children:P.map((e=>r.isValidElement(e)&&r.cloneElement(e,{id:`${e.props.id}`,findItem:D,moveItem:E,flexDirection:j},[e.props.children])))},k=null!=k?k:{},Object.getOwnPropertyDescriptors?Object.defineProperties(S,Object.getOwnPropertyDescriptors(k)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(k)).forEach((function(e){Object.defineProperty(S,e,Object.getOwnPropertyDescriptor(k,e))})),S))});var S,k};y.displayName="DraggableContainer";export{y as default};
+import{jsx as e}from"react/jsx-runtime";import r,{useState as t,useRef as n,useEffect as i}from"react";import o from"invariant";import"../../style/utils/filter-styled-system-padding-props.js";import a from"../../style/utils/filter-styled-system-margin-props.js";import l from"./draggable-item/draggable-item.component.js";import{StyledDraggableContainer as d}from"./draggable-item/draggable-item.style.js";import{DragDropProvider as p}from"./__internal__/drag-drop-provider.js";import s from"../../__internal__/utils/helpers/array-move/index.js";import{extractClosestEdge as c}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";import{reorderWithEdge as m}from"@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge";function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const g=y=>{var{"data-element":b,"data-role":u="draggable-container",children:O,getOrder:j,flexDirection:x="row"}=y,h=function(e,r){if(null==e)return{};var t,n,i=function(e,r){if(null==e)return{};var t,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||(i[t]=e[t]);return i}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)t=o[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}(y,["data-element","data-role","children","getOrder","flexDirection"]);const[v,w]=t(r.Children.toArray(O)),P=n(!0);i((()=>{P.current?P.current=!1:w(r.Children.toArray(O))}),[O]);const D=v.every((e=>{return t=e,r.isValidElement(t)&&"DraggableItem"===t.type.displayName;var t}));o(D,`\`${g.displayName}\` only accepts children of type \`${l.displayName}\`.`);const I=a(h);return e(d,(S=function(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){f(e,r,t[r])}))}return e}({"data-component":"draggable-container","data-element":b,"data-role":u},I),_={children:e(p,{onDrop:({dragged:e,target:r})=>{if(r){const t=c(r);if(!t)return;const n=m({list:v,startIndex:v.findIndex((r=>String(r.props.id)===e.id)),indexOfTarget:v.findIndex((e=>String(e.props.id)===r.id)),closestEdgeOfTarget:t,axis:"vertical"});w(n);const i=n.map((e=>e.props.id));null==j||j(i,e.id)}else w(s({array:v,startIndex:v.findIndex((r=>String(r.props.id)===e.id)),endIndex:e.initialIndex}))},children:v.map(((e,t)=>r.cloneElement(e,{id:e.props.id,index:t,flexDirection:x},[e.props.children])))})},_=null!=_?_:{},Object.getOwnPropertyDescriptors?Object.defineProperties(S,Object.getOwnPropertyDescriptors(_)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(_)).forEach((function(e){Object.defineProperty(S,e,Object.getOwnPropertyDescriptor(_,e))})),S));var S,_};g.displayName="DraggableContainer";export{g as default};

package/esm/components/draggable/draggable-item/draggable-item.component.d.ts

@@ -10,19 +10,8 @@ export interface DraggableItemProps extends PaddingProps, TagProps {
     id: number | string;
     /** The content of the component. */
     children: React.ReactNode;
-    /**
-     * @private
-     * @ignore
-     */
-    findItem?: (id: string | number) => {
-        DraggableItemProps: React.ReactElement;
-        index: number;
-    };
-    /**
-     * @private
-     * @ignore
-     */
-    moveItem?: (droppedId: string | number, overIndex: number | undefined) => void;
+    /** @private @ignore */
+    index?: number;
     /**
      * @private
      * @ignore
@@ -30,7 +19,7 @@ export interface DraggableItemProps extends PaddingProps, TagProps {
     flexDirection?: "row" | "row-reverse";
 }
 declare const DraggableItem: {
-    ({ id, findItem, moveItem, children, py, flexDirection, "data-element": dataElement, "data-role": dataRole, ...rest }: DraggableItemProps): JSX.Element;
+    ({ id: idProp, index: indexProp, children, py, flexDirection, "data-element": dataElement, "data-role": dataRole, ...rest }: DraggableItemProps): JSX.Element;
     displayName: string;
 };
 export default DraggableItem;

package/esm/components/draggable/draggable-item/draggable-item.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import{useDrag as r,useDrop as n}from"react-dnd";import i from"../../../__internal__/utils/helpers/tags/tags.js";import o from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledDraggableItem as l}from"./draggable-item.style.js";import a from"../../icon/icon.component.js";function c(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const p=p=>{var{id:d,findItem:g,moveItem:s,children:m,py:f=1,flexDirection:b,"data-element":u,"data-role":y="draggable-item"}=p,O=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(p,["id","findItem","moveItem","children","py","flexDirection","data-element","data-role"]);let j;var v;g&&(j=null===(v=g(d))||void 0===v?void 0:v.index);const[{isDragging:D},P]=r({type:"draggableItem",item:{id:d,originalIndex:j},collect:e=>({isDragging:e.isDragging()}),end:(e,t)=>{const{id:r,originalIndex:n}=t.getItem();!t.didDrop()&&s&&s(r,n)}}),[,h]=n({accept:"draggableItem",canDrop:()=>!1,hover(e){if((null==e?void 0:e.id)!==d&&g){const{index:t}=g(d);s&&s(null==e?void 0:e.id,t)}}}),w=o(O);return e(l,(x=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){c(e,t,r[t])}))}return e}({isDragging:D,ref:e=>P(h(e)),py:f,flexDirection:b},w,i("draggable-item",{"data-element":u,"data-role":y})),I=null!=(I={children:[m,t(a,{type:"drag"})]})?I:{},Object.getOwnPropertyDescriptors?Object.defineProperties(x,Object.getOwnPropertyDescriptors(I)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(I)).forEach((function(e){Object.defineProperty(x,e,Object.getOwnPropertyDescriptor(I,e))})),x));var x,I};p.displayName="DraggableItem";export{p as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as r,useState as n,useEffect as o}from"react";import a from"invariant";import{draggable as i,dropTargetForElements as d}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{combine as c}from"@atlaskit/pragmatic-drag-and-drop/combine";import{extractClosestEdge as l,attachClosestEdge as s}from"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";import g from"../../../__internal__/utils/helpers/tags/tags.js";import p from"../../../style/utils/filter-styled-system-padding-props.js";import{StyledDraggableItem as f,StyledItemContent as m}from"./draggable-item.style.js";import u from"../../icon/icon.component.js";import{useDragDropContext as y}from"../__internal__/drag-drop-provider.js";import{getDraggable as b,isDraggable as O,getDropTarget as j}from"../__internal__/data.js";function D(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function h(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){D(e,t,r[t])}))}return e}function v(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const x=D=>{var{id:x,index:P,children:w,py:_=1,flexDirection:E,"data-element":S,"data-role":I="draggable-item"}=D,k=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(D,["id","index","children","py","flexDirection","data-element","data-role"]);const R=String(x),L=P,A=r(null),B=y(),[C,N]=n({type:"idle"}),q=p(k),z="is-dragging"===C.type,F="is-covered"===C.type,G="is-dragging-and-left-self"===C.type;return o((()=>{const e=A.current;if(!e)return;a(B,"Expected context to be defined. Please ensure your component is within a DragDropProvider.");const{contextId:t}=B;return c(i({element:e,getInitialData:()=>b({id:R,initialIndex:L,rect:e.getBoundingClientRect(),contextId:t}),onDragStart:()=>N({type:"is-dragging"}),onDrop:()=>N({type:"idle"})}),d({element:e,getData:({input:r})=>{const n=j({id:R,contextId:t});return s(n,{element:e,input:r,allowedEdges:["top","bottom"]})},canDrop:({source:e})=>O(e.data)&&e.data.contextId===t,onDragEnter:({source:e,self:t})=>{if(!O(e.data))return;const r=l(t.data);r&&N({type:"is-covered",draggedRect:e.data.rect,closestEdge:r})},onDrag:({source:e,self:t})=>{if(!O(e.data))return;if(e.data.id===R)return;const r=l(t.data);r&&(F&&C.closestEdge===r||N({type:"is-covered",draggedRect:e.data.rect,closestEdge:r}))},onDragLeave:({source:e})=>{O(e.data)&&(e.data.id===R?N({type:"is-dragging-and-left-self"}):N({type:"idle"}))},onDrop:()=>{N({type:"idle"})}}))}),[B,R,L,F,A,C]),e(f,v(h({ref:A,isDragging:z,isDraggingAndLeftSelf:G,shadowStyling:F?{closestEdge:C.closestEdge,height:C.draggedRect.height}:void 0},g("draggable-item",{"data-element":S,"data-role":I})),{children:t(m,v(h({py:_,"data-role":"draggable-item-content",flexDirection:E},q),{children:[w,e(u,{type:"drag"})]}))}))};x.displayName="DraggableItem";export{x as default};

package/esm/components/draggable/draggable-item/draggable-item.style.d.ts

@@ -1,12 +1,21 @@
 import { PaddingProps } from "styled-system";
+import { type Edge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 declare const StyledDraggableContainer: import("styled-components").StyledComponent<"div", any, {
     theme: object;
 }, "theme">;
-interface StyledDraggableItemProps extends PaddingProps {
+interface StyledDraggableItemProps {
     isDragging?: boolean;
+    isDraggingAndLeftSelf?: boolean;
+    shadowStyling?: {
+        closestEdge: Edge;
+        height: number;
+    };
+}
+declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, StyledDraggableItemProps, never>;
+interface StyledItemContentProps extends PaddingProps {
     flexDirection?: "row" | "row-reverse";
 }
-declare const StyledDraggableItem: import("styled-components").StyledComponent<"div", any, {
+declare const StyledItemContent: import("styled-components").StyledComponent<"div", any, {
     theme: object;
-} & StyledDraggableItemProps, "theme">;
-export { StyledDraggableContainer, StyledDraggableItem };
+} & StyledItemContentProps, "theme">;
+export { StyledDraggableContainer, StyledDraggableItem, StyledItemContent };

package/esm/components/draggable/draggable-item/draggable-item.style.js

@@ -1 +1 @@
-import e from"styled-components";import{margin as t,padding as o}from"styled-system";import i from"../../../style/themes/apply-base-theme.js";const s=e.div.attrs(i).withConfig({displayName:"draggable-item.style__StyledDraggableContainer",componentId:"sc-4f2bb75-0"})(["",""],t),r=e.div.attrs(i).withConfig({displayName:"draggable-item.style__StyledDraggableItem",componentId:"sc-4f2bb75-1"})(["display:flex;align-items:center;border-bottom:1px solid var(--colorsUtilityMajor050);"," cursor:move;justify-content:space-between;flex-direction:",";opacity:",";"],o,(({flexDirection:e})=>e),(({isDragging:e})=>e?"0":"1"));export{s as StyledDraggableContainer,r as StyledDraggableItem};
+import t,{css as e}from"styled-components";import{margin as o,padding as i}from"styled-system";import s from"../../../style/themes/apply-base-theme.js";const a=t.div.attrs(s).withConfig({displayName:"draggable-item.style__StyledDraggableContainer",componentId:"sc-b40520d8-0"})(["",""],o),l=t.div.withConfig({displayName:"draggable-item.style__StyledDraggableItem",componentId:"sc-b40520d8-1"})(["opacity:",";"," "," ",""],(({isDragging:t})=>t?"0":"1"),(({isDraggingAndLeftSelf:t})=>t&&e(["display:none;"])),(({shadowStyling:t})=>t&&"top"===t.closestEdge&&e(['&::before{content:"";display:block;height:',"px;}"],t.height)),(({shadowStyling:t})=>t&&"bottom"===t.closestEdge&&e(['&::after{content:"";display:block;height:',"px;}"],t.height))),n=t.div.attrs(s).withConfig({displayName:"draggable-item.style__StyledItemContent",componentId:"sc-b40520d8-2"})(["display:flex;align-items:center;border-bottom:1px solid var(--colorsUtilityMajor050);"," cursor:grab;justify-content:space-between;flex-direction:",";"],i,(({flexDirection:t})=>t));export{a as StyledDraggableContainer,l as StyledDraggableItem,n as StyledItemContent};

package/esm/components/flat-table/__internal__/sortable/data.d.ts

@@ -0,0 +1,24 @@
+/** Helper functions for safer type checking. */
+declare const PRIVATE_DRAGGABLE_KEY: unique symbol;
+declare const PRIVATE_DROP_TARGET_KEY: unique symbol;
+export type Draggable = {
+    [PRIVATE_DRAGGABLE_KEY]: true;
+    /** Unique identifier of the draggable item */
+    id: string;
+    /** The index of the draggable item when dragging was initiated */
+    initialIndex: number;
+    /** Unique identifier of the context instance the item belongs to */
+    contextId: symbol;
+};
+export type DropTarget = {
+    [PRIVATE_DROP_TARGET_KEY]: true;
+    /** Unique identifier of the drop target */
+    id: string;
+    /** Unique identifier of the context instance the drop target belongs to */
+    contextId: symbol;
+};
+export declare function getDraggable(data: Omit<Draggable, typeof PRIVATE_DRAGGABLE_KEY>): Draggable;
+export declare function getDropTarget(data: Omit<DropTarget, typeof PRIVATE_DROP_TARGET_KEY>): DropTarget;
+export declare function isDraggable(data: Record<string | symbol, unknown>): data is Draggable;
+export declare function isDropTarget(data: Record<string | symbol, unknown>): data is DropTarget;
+export {};

package/esm/components/flat-table/__internal__/sortable/data.js

@@ -0,0 +1 @@
+function n(n,e,r){return e in n?Object.defineProperty(n,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):n[e]=r,n}function e(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable})))),o.forEach((function(r){n(e,r,t[r])}))}return e}const r=Symbol("drag"),t=Symbol("drop");function o(n){return e({[r]:!0},n)}function u(n){return e({[t]:!0},n)}function c(n){return Boolean(n[r])}function f(n){return Boolean(n[t])}export{o as getDraggable,u as getDropTarget,c as isDraggable,f as isDropTarget};

package/esm/components/flat-table/__internal__/sortable/drag-drop-provider.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { Draggable, DropTarget } from "./data";
+export interface DragDropProviderProps {
+    children: React.ReactNode;
+    /**
+     * Callback fired when an item is dropped.
+     *
+     * Provides data about the dragged item and the drop target (if any) as arguments.
+     */
+    onDrop?: (args: {
+        dragged: Draggable;
+        target: DropTarget | null;
+    }) => void;
+    /**
+     * Callback fired when a dragged item leaves a drop target, or moves over a new one.
+     *
+     * Provides data about the dragged item and the drop target (if any) as arguments.
+     */
+    onDropTargetChange?: (args: {
+        dragged: Draggable;
+        target: DropTarget | null;
+    }) => void;
+}
+type DragDropContextType = {
+    /** Identifier of the context instance. */
+    contextId: symbol;
+};
+declare function useDragDropContext(): DragDropContextType | null;
+declare const DragDropProvider: ({ children, onDrop, onDropTargetChange, }: DragDropProviderProps) => React.JSX.Element;
+export { DragDropProvider, useDragDropContext };

package/esm/components/flat-table/__internal__/sortable/drag-drop-provider.js

@@ -0,0 +1 @@
+import{jsx as r}from"react/jsx-runtime";import{useContext as t,createContext as a,useState as e,useEffect as o}from"react";import{monitorForElements as n}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{isDraggable as d,isDropTarget as g}from"./data.js";const l=a(null);function c(){return t(l)}const u=({children:t,onDrop:a,onDropTargetChange:c})=>{const[u]=e((()=>Symbol("drag-drop-provider-id")));return o((()=>n({canMonitor:({source:r})=>d(r.data)&&r.data.contextId===u,onDrop:({source:r,location:t})=>{if(!d(r.data))return;if(!t.current.dropTargets.length)return void(null==a||a({dragged:r.data,target:null}));const e=t.current.dropTargets[0];g(e.data)&&(null==a||a({dragged:r.data,target:e.data}))},onDropTargetChange:({source:r,location:t})=>{if(!d(r.data))return;if(!t.current.dropTargets.length)return void(null==c||c({dragged:r.data,target:null}));const a=t.current.dropTargets[0];g(a.data)&&(null==c||c({dragged:r.data,target:a.data}))}})),[u,a,c]),r(l.Provider,{value:{contextId:u},children:t})};export{u as DragDropProvider,c as useDragDropContext};

package/esm/components/flat-table/__internal__/sortable/index.d.ts

@@ -0,0 +1,2 @@
+export { type DragDropProviderProps, DragDropProvider, } from "./drag-drop-provider";
+export { default as useSortableRow } from "./use-sortable-row";

package/esm/components/flat-table/__internal__/sortable/index.js

@@ -0,0 +1 @@
+export{DragDropProvider}from"./drag-drop-provider.js";export{default as useSortableRow}from"./use-sortable-row.js";

package/esm/components/flat-table/__internal__/sortable/use-sortable-row.d.ts

@@ -0,0 +1,14 @@
+interface UseSortableRowArgs {
+    /** Unique identifier for the referenced element. */
+    id: string;
+    /** Index of the referenced element in a list. */
+    index: number;
+    /** Ref of the element to be made draggable and a drop target. */
+    ref: React.RefObject<HTMLElement> | null;
+}
+interface UseSortableRowReturn {
+    /** Whether the referenced element is currently being dragged. */
+    isDragging: boolean;
+}
+declare function useSortableRow({ id, index, ref, }: UseSortableRowArgs): UseSortableRowReturn;
+export default useSortableRow;

package/esm/components/flat-table/__internal__/sortable/use-sortable-row.js

@@ -0,0 +1 @@
+import{useState as t,useEffect as r}from"react";import{draggable as e,dropTargetForElements as a}from"@atlaskit/pragmatic-drag-and-drop/element/adapter";import{combine as o}from"@atlaskit/pragmatic-drag-and-drop/combine";import{getDraggable as n,isDraggable as i,getDropTarget as d}from"./data.js";import{useDragDropContext as m}from"./drag-drop-provider.js";import p from"invariant";function c({id:c,index:s,ref:g}){const f=m(),[l,u]=t(!1);return r((()=>{const t=null==g?void 0:g.current;if(!t)return;p(f,"Expected context to be defined. Please ensure your component is within a DragDropProvider.");const{contextId:r}=f;return o(e({element:t,getInitialData:()=>n({id:c,initialIndex:s,contextId:r}),onDragStart:()=>u(!0),onDrop:()=>u(!1)}),a({element:t,getData:()=>d({id:c,contextId:r}),canDrop:({source:t})=>i(t.data)&&t.data.contextId===r}))}),[f,c,s,g]),{isDragging:l}}export{c as default};

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.d.ts

@@ -4,7 +4,7 @@ export interface FlatTableBodyDraggableProps extends TagProps {
     /** Array of FlatTableRow. */
     children: React.ReactNode;
     /** Callback fired when order is changed */
-    getOrder?: (draggableItemIds?: number[]) => void;
+    getOrder?: (draggableItemIds?: (string | number | undefined)[]) => void;
 }
 export declare const FlatTableBodyDraggable: ({ children, getOrder, ...rest }: FlatTableBodyDraggableProps) => React.JSX.Element;
 export default FlatTableBodyDraggable;

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.component.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import r,{useState as t,useRef as n,useEffect as o}from"react";import{DndProvider as l,useDrop as c}from"react-dnd";import{HTML5Backend as i}from"react-dnd-html5-backend";import a from"../../icon/icon.style.js";import d from"./flat-table-body-draggable.style.js";import{FlatTableCell as p}from"../flat-table-cell/flat-table-cell.component.js";function f(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function b(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){f(e,r,t[r])}))}return e}function s(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}function u(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},l=Object.keys(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)t=l[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}const m=r=>{var{children:n,getOrder:o}=r,l=u(r,["children","getOrder"]);const[i,a]=t(!1),[,p]=c({accept:"flatTableRow",hover:(e,r)=>{!i&&r.isOver()&&a(!0)},drop(){a(!1),null==o||o()}});return e(d,s(b({"data-component":"flat-table-body-draggable","data-role":"flat-table-body-draggable",ref:p,isDragging:i},l),{children:n}))},O=c=>{var{children:d,getOrder:f}=c,O=u(c,["children","getOrder"]);const[g,y]=t(r.Children.toArray(d)),j=n(!0);o((()=>{j.current?j.current=!1:y(r.Children.toArray(d))}),[d]);const h=e=>{const t=g.filter((t=>r.isValidElement(t)&&`${t.props.id}`===e))[0];return{draggableItem:t,index:g.indexOf(t)}},v=(e,r)=>{const{draggableItem:t,index:n}=h(e);if(!t)return;const o=[...g];o.splice(n,1),o.splice(r,0,t),y(o)};return e(l,{backend:i,children:e(m,s(b({getOrder:()=>{if(!f)return;const e=g.map((e=>r.isValidElement(e)&&e.props.id));f(e)}},O),{children:g.map((t=>r.isValidElement(t)&&r.cloneElement(t,{id:`${t.props.id}`,moveItem:v,findItem:h,draggable:!0},[e(p,{children:e(a,{type:"drag"})},t.props.id),t.props.children])))}))})};export{O as FlatTableBodyDraggable,O as default};
+import{jsx as r}from"react/jsx-runtime";import e,{useState as t,useRef as n,useEffect as o}from"react";import a from"../../icon/icon.style.js";import i from"./flat-table-body-draggable.style.js";import{FlatTableCell as l}from"../flat-table-cell/flat-table-cell.component.js";import p from"invariant";import d from"../../../__internal__/utils/helpers/array-move/index.js";import{DragDropProvider as c}from"../__internal__/sortable/drag-drop-provider.js";import"@atlaskit/pragmatic-drag-and-drop/element/adapter";import"@atlaskit/pragmatic-drag-and-drop/combine";function s(r,e,t){return e in r?Object.defineProperty(r,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):r[e]=t,r}function b(r){return e.isValidElement(r)&&"FlatTableRow"===r.type.displayName}const f=f=>{var{children:g,getOrder:y}=f,m=function(r,e){if(null==r)return{};var t,n,o=function(r,e){if(null==r)return{};var t,n,o={},a=Object.keys(r);for(n=0;n<a.length;n++)t=a[n],e.indexOf(t)>=0||(o[t]=r[t]);return o}(r,e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(r);for(n=0;n<a.length;n++)t=a[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(r,t)&&(o[t]=r[t])}return o}(f,["children","getOrder"]);const[u,O]=t(e.Children.toArray(g)),j=n(!0);o((()=>{j.current?j.current=!1:O(e.Children.toArray(g))}),[g]);const h=u.every(b);return p(h,"FlatTableBodyDraggable only accepts children of type FlatTableRow."),r(i,(v=function(r){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(r){return Object.getOwnPropertyDescriptor(t,r).enumerable})))),n.forEach((function(e){s(r,e,t[e])}))}return r}({"data-component":"flat-table-body-draggable","data-role":"flat-table-body-draggable"},m),x={children:r(c,{onDrop:({dragged:r,target:e})=>{if(e){const r=u.map((r=>r.props.id));null==y||y(r)}else O(d({array:u,startIndex:u.findIndex((e=>String(e.props.id)===r.id)),endIndex:r.initialIndex}))},onDropTargetChange:({dragged:r,target:e})=>{e&&O(d({array:u,startIndex:u.findIndex((e=>String(e.props.id)===r.id)),endIndex:u.findIndex((r=>String(r.props.id)===e.id))}))},children:u.map(((t,n)=>e.cloneElement(t,{id:`${t.props.id}`,draggableProps:{index:n}},[r(l,{children:r(a,{type:"drag"})},t.props.id),t.props.children])))})},x=null!=x?x:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(x)):function(r){var e=Object.keys(r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(r);e.push.apply(e,t)}return e}(Object(x)).forEach((function(r){Object.defineProperty(v,r,Object.getOwnPropertyDescriptor(x,r))})),v));var v,x};export{f as FlatTableBodyDraggable,f as default};

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.d.ts

@@ -1,4 +1,2 @@
-declare const StyledFlatTableBodyDraggable: import("styled-components").StyledComponent<"tbody", any, {
-    isDragging: boolean;
-}, never>;
+declare const StyledFlatTableBodyDraggable: import("styled-components").StyledComponent<"tbody", any, {}, never>;
 export default StyledFlatTableBodyDraggable;

package/esm/components/flat-table/flat-table-body-draggable/flat-table-body-draggable.style.js

@@ -1 +1 @@
-import a,{css as t}from"styled-components";const o=a.tbody.withConfig({displayName:"flat-table-body-draggable.style__StyledFlatTableBodyDraggable",componentId:"sc-3b587cbf-0"})(["",""],(({isDragging:a})=>a&&t(["cursor:grabbing;"])));export{o as default};
+import a from"styled-components";const t=a.tbody.withConfig({displayName:"flat-table-body-draggable.style__StyledFlatTableBodyDraggable",componentId:"sc-afbd7e57-0"})(["cursor:grab;"]);export{t as default};

package/esm/components/flat-table/flat-table-row/flat-table-row.component.d.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { TagProps } from "../../../__internal__/utils/helpers/tags";
 import { TableBorderSize } from "..";
-import { FlatTableRowDraggableProps } from "./__internal__/flat-table-row-draggable.component";
 export interface FlatTableRowProps extends TagProps {
     /** Overrides default cell color, provide design token, any color from palette or any valid css color value. */
     bgColor?: string;
@@ -26,18 +25,10 @@ export interface FlatTableRowProps extends TagProps {
     /** Sub rows to be shown when the row is expanded, must be used with the `expandable` prop. */
     subRows?: React.ReactNode;
     id?: string | number;
-    /**
-     * @private
-     * @ignore
-     */
-    findItem?: FlatTableRowDraggableProps["findItem"];
-    /**
-     * @private
-     * @ignore
-     */
-    moveItem?: FlatTableRowDraggableProps["moveItem"];
-    /** @ignore @private position in header if multiple rows */
-    draggable?: boolean;
+    /** @ignore @private Internal props, set by parent `FlatTableBodyDraggable`, for enabling drag and drop behaviour on the row. */
+    draggableProps?: {
+        index: number;
+    };
 }
 export declare const FlatTableRow: React.ForwardRefExoticComponent<FlatTableRowProps & React.RefAttributes<HTMLTableRowElement>>;
 export default FlatTableRow;

package/esm/components/flat-table/flat-table-row/flat-table-row.component.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useLayoutEffect as l,useMemo as a,useContext as d,useEffect as s}from"react";import c from"invariant";import f from"../../../__internal__/utils/helpers/events/events.js";import b from"./flat-table-row.style.js";import u from"../../drawer/__internal__/drawer-sidebar.context.js";import{FlatTableRowHeader as m}from"../flat-table-row-header/flat-table-row-header.component.js";import{FlatTableRowDraggable as p}from"./__internal__/flat-table-row-draggable.component.js";import{useStrictFlatTableContext as h}from"../__internal__/strict-flat-table.context.js";import g from"../../../__internal__/utils/helpers/guid/index.js";import w from"./__internal__/flat-table-row.context.js";import y,{SubRowContext as _}from"./__internal__/sub-row-provider.js";import O from"../__internal__/build-position-map.js";import j from"../flat-table-head/__internal__/flat-table-head.context.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const x=o.forwardRef(((o,x)=>{var{children:I,onClick:S,expandable:R,expandableArea:C="wholeRow",expanded:P=!1,highlighted:k,selected:z,subRows:D,bgColor:E,horizontalBorderColor:A,horizontalBorderSize:B="small",id:K,draggable:H,findItem:T,moveItem:F,"data-element":N,"data-role":W}=o,$=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(o,["children","onClick","expandable","expandableArea","expanded","highlighted","selected","subRows","bgColor","horizontalBorderColor","horizontalBorderSize","id","draggable","findItem","moveItem","data-element","data-role"]);const q=n(K?String(K):g()),[G,J]=i(P);let L=n(null);x&&(L=x);const M="firstColumn"===C,[Q,U]=i({}),[V,X]=i({}),[Y,Z]=i(0),[ee,te]=i(-1),[re,oe]=i(-1),[ne,ie]=i(null),[le,ae]=i([]),[de,se]=i(-1);let ce={};l((()=>{var e;const t=(e,t)=>{const r=Object.keys(e),o=Object.keys(t);return r.length!==o.length||r.some((r=>e[r]!==t[r]))},r=null===(e=L.current)||void 0===e?void 0:e.querySelectorAll("th, td"),o=Array.from(r||[]);ae(o);const n=o.findIndex((e=>"flat-table-checkbox"!==e.getAttribute("data-component"))),i=o.findIndex((e=>"left"===e.getAttribute("data-sticky-align"))),l=o.findIndex((e=>"right"===e.getAttribute("data-sticky-align")));if(te(i),oe(l),-1!==n?(Z(n),ie(o[n].getAttribute("id"))):Z(0),-1!==i){const e=O(o.slice(0,ee+1),"offsetWidth");t(e,Q)&&U(e)}if(-1!==l){const e=O(o.slice(re,o.length).reverse(),"offsetWidth");t(e,V)&&X(e)}}),[I,Q,ee,re,V]);const fe=a((()=>!(-1!==ee)||!(-1!==re)||ee<re),[ee,re]);c(fe,`Do not render a right hand side \`${m.displayName}\` before left hand side \`${m.displayName}\``);const{colorTheme:be,size:ue,getTabStopElementId:me}=h(),{isInSidebar:pe}=d(u),{stickyOffsets:he}=d(j),ge=()=>J(!G);function we(e){S&&S(e),R&&!M&&ge()}function ye(e){(f.isEnterKey(e)||f.isSpaceKey(e))&&(e.preventDefault(),ge())}(S||R)&&(ce={isRowInteractive:!M,tabIndex:M?void 0:de,onKeyDown:function(e){const t=f.isEnterKey(e)||f.isSpaceKey(e);R&&!M&&document.activeElement===L.current&&t&&(e.preventDefault(),ge()),t&&S&&S(e)},isFirstColumnInteractive:M,isExpanded:G}),s((()=>{J(P)}),[P]),s((()=>{se(me()===q.current?0:-1)}),[me]);const{isSubRow:_e,firstRowId:Oe,addRow:je,removeRow:ve}=d(_);s((()=>{const e=q.current;return je(e),()=>{ve(e)}}),[je,ve]);const xe=Oe===q.current,Ie=()=>{var e,t,o;return r(b,(t=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){v(e,t,r[t])}))}return e}({isInSidebar:pe,expandable:R,isSubRow:_e,isFirstSubRow:xe,"data-element":N||(_e?"flat-table-sub-row":"flat-table-row"),"data-role":W,highlighted:k,selected:z,onClick:we,firstCellIndex:Y,ref:L,lhsRowHeaderIndex:ee,rhsRowHeaderIndex:re,colorTheme:be,size:ue,stickyOffset:he[q.current],bgColor:E,horizontalBorderColor:A,horizontalBorderSize:B,draggable:H,totalChildren:le.length,id:q.current,"data-selected":z&&"wholeRow"===C,"data-highlighted":k&&"wholeRow"===C,rowHeight:null==L||null===(e=L.current)||void 0===e?void 0:e.offsetHeight},ce,$),o=null!=(o={"data-component":"flat-table-row",children:r(w.Provider,{value:{firstCellId:ne,expandable:R,leftPositions:Q,rightPositions:V,firstColumnExpandable:M,onKeyDown:ye,onClick:()=>ge(),highlighted:k,selected:z},children:I})})?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(o)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(o)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(o,e))})),t))};return e(t,{children:[H?r(p,{id:q.current,moveItem:F,findItem:T,rowRef:L,children:Ie()}):Ie(),G&&D&&r(y,{children:D})]})}));x.displayName="FlatTableRow";export{x as FlatTableRow,x as default};
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import o,{useRef as n,useState as i,useLayoutEffect as l,useMemo as a,useContext as s,useEffect as d}from"react";import c from"invariant";import f from"../../../__internal__/utils/helpers/events/events.js";import u from"./flat-table-row.style.js";import b from"../../drawer/__internal__/drawer-sidebar.context.js";import{FlatTableRowHeader as p}from"../flat-table-row-header/flat-table-row-header.component.js";import{useStrictFlatTableContext as m}from"../__internal__/strict-flat-table.context.js";import h from"../../../__internal__/utils/helpers/guid/index.js";import g from"./__internal__/flat-table-row.context.js";import w,{SubRowContext as y}from"./__internal__/sub-row-provider.js";import _ from"../__internal__/build-position-map.js";import O from"../flat-table-head/__internal__/flat-table-head.context.js";import"@atlaskit/pragmatic-drag-and-drop/element/adapter";import j from"../__internal__/sortable/use-sortable-row.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function x(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){v(e,t,r[t])}))}return e}const S=o.forwardRef(((o,v)=>{var S,{children:P,onClick:C,expandable:R,expandableArea:k="wholeRow",expanded:I=!1,highlighted:z,selected:D,subRows:E,bgColor:A,horizontalBorderColor:B,horizontalBorderSize:K="small",id:H,draggableProps:T,"data-element":F,"data-role":N}=o,W=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(o,["children","onClick","expandable","expandableArea","expanded","highlighted","selected","subRows","bgColor","horizontalBorderColor","horizontalBorderSize","id","draggableProps","data-element","data-role"]);const $=n(H?String(H):h()),[q,G]=i(I),J=n(null),L="firstColumn"===k,[M,Q]=i({}),[U,V]=i({}),[X,Y]=i(0),[Z,ee]=i(-1),[te,re]=i(-1),[oe,ne]=i(null),[ie,le]=i([]),[ae,se]=i(-1);let de={};l((()=>{var e;const t=(e,t)=>{const r=Object.keys(e),o=Object.keys(t);return r.length!==o.length||r.some((r=>e[r]!==t[r]))},r=null===(e=J.current)||void 0===e?void 0:e.querySelectorAll("th, td"),o=Array.from(r||[]);le(o);const n=o.findIndex((e=>"flat-table-checkbox"!==e.getAttribute("data-component"))),i=o.findIndex((e=>"left"===e.getAttribute("data-sticky-align"))),l=o.findIndex((e=>"right"===e.getAttribute("data-sticky-align")));if(ee(i),re(l),-1!==n?(Y(n),ne(o[n].getAttribute("id"))):Y(0),-1!==i){const e=_(o.slice(0,Z+1),"offsetWidth");t(e,M)&&Q(e)}if(-1!==l){const e=_(o.slice(te,o.length).reverse(),"offsetWidth");t(e,U)&&V(e)}}),[P,M,Z,te,U]);const ce=a((()=>!(-1!==Z)||!(-1!==te)||Z<te),[Z,te]);c(ce,`Do not render a right hand side \`${p.displayName}\` before left hand side \`${p.displayName}\``);const{colorTheme:fe,size:ue,getTabStopElementId:be}=m(),{isInSidebar:pe}=s(b),{stickyOffsets:me}=s(O),he=()=>G(!q);(C||R)&&(de={isRowInteractive:!L,tabIndex:L?void 0:ae,onKeyDown:function(e){const t=f.isEnterKey(e)||f.isSpaceKey(e);R&&!L&&document.activeElement===J.current&&t&&(e.preventDefault(),he()),t&&C&&C(e)},isFirstColumnInteractive:L,isExpanded:q}),d((()=>{G(I)}),[I]),d((()=>{se(be()===$.current?0:-1)}),[be]);const{isSubRow:ge,firstRowId:we,addRow:ye,removeRow:_e}=s(y);d((()=>{const e=$.current;return ye(e),()=>{_e(e)}}),[ye,_e]);const Oe=we===$.current,{isDragging:je}=j({id:$.current,index:null==T?void 0:T.index,ref:T?J:null});return e(t,{children:[r(u,(ve=x({isInSidebar:pe,expandable:R,isSubRow:ge,isFirstSubRow:Oe,"data-element":F||(ge?"flat-table-sub-row":"flat-table-row"),"data-role":N,highlighted:z,selected:D,onClick:function(e){C&&C(e),R&&!L&&he()},firstCellIndex:X,ref:e=>{"function"==typeof v?v(e):v&&(v.current=e),J.current=e},lhsRowHeaderIndex:Z,rhsRowHeaderIndex:te,colorTheme:fe,size:ue,stickyOffset:me[$.current],bgColor:A,horizontalBorderColor:B,horizontalBorderSize:K,draggable:!!T,isDragging:je,totalChildren:ie.length,id:$.current,"data-selected":D&&"wholeRow"===k,"data-highlighted":z&&"wholeRow"===k,rowHeight:null==J||null===(S=J.current)||void 0===S?void 0:S.offsetHeight},de,W),xe={"data-component":"flat-table-row",children:r(g.Provider,{value:{firstCellId:oe,expandable:R,leftPositions:M,rightPositions:U,firstColumnExpandable:L,onKeyDown:function(e){(f.isEnterKey(e)||f.isSpaceKey(e))&&(e.preventDefault(),he())},onClick:()=>he(),highlighted:z,selected:D},children:P})},xe=null!=xe?xe:{},Object.getOwnPropertyDescriptors?Object.defineProperties(ve,Object.getOwnPropertyDescriptors(xe)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(xe)).forEach((function(e){Object.defineProperty(ve,e,Object.getOwnPropertyDescriptor(xe,e))})),ve)),q&&E&&r(w,{children:E})]});var ve,xe}));S.displayName="FlatTableRow";export{S as FlatTableRow,S as default};

package/esm/components/flat-table/flat-table-row/flat-table-row.style.d.ts

@@ -1,6 +1,6 @@
 import { FlatTableProps } from "..";
 import { FlatTableRowProps } from "./flat-table-row.component";
-interface StyledFlatTableRowProps extends Pick<FlatTableRowProps, "bgColor" | "horizontalBorderColor" | "expandable" | "selected" | "highlighted" | "draggable"> {
+interface StyledFlatTableRowProps extends Pick<FlatTableRowProps, "bgColor" | "horizontalBorderColor" | "expandable" | "selected" | "highlighted"> {
     isRowInteractive?: boolean;
     isFirstColumnInteractive?: boolean;
     lhsRowHeaderIndex: number;
@@ -12,6 +12,7 @@ interface StyledFlatTableRowProps extends Pick<FlatTableRowProps, "bgColor" | "h
     isInSidebar?: boolean;
     size: FlatTableProps["size"];
     isDragging?: boolean;
+    draggable?: boolean;
     horizontalBorderSize: NonNullable<FlatTableRowProps["horizontalBorderSize"]>;
     isSubRow?: boolean;
     isFirstSubRow?: boolean;

package/esm/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -1 +1 @@
-import o,{css as r}from"styled-components";import t from"../../../style/themes/apply-base-theme.js";import{StyledFlatTableCell as e}from"../flat-table-cell/flat-table-cell.style.js";import{StyledFlatTableRowHeader as i}from"../flat-table-row-header/flat-table-row-header.style.js";import l from"../flat-table-checkbox/flat-table-checkbox.style.js";import a from"../flat-table-header/flat-table-header.style.js";import s from"../../icon/icon.style.js";import{toColor as n}from"../../../style/utils/color.js";import d from"../../../style/utils/add-focus-styling.js";import{getNavigator as c}from"../../../__internal__/dom/globals.js";import{isSafari as b}from"../../../__internal__/utils/helpers/browser-type-check/index.js";const p={medium:"2px",large:"4px"},h=o=>`\n    ${d(!0)}\n    z-index: ${o.zIndex.overlay+5};\n  `,f=o=>`\n      width: calc(100% + 1px);\n      z-index: ${o.zIndex.overlay};\n      :before {\n        content: "";\n        border-top: 2px solid var(--colorsSemanticFocus500);\n        border-bottom: 2px solid var(--colorsSemanticFocus500);\n        display: block;\n        left: -2px;\n        top: 0px;\n        height: calc(100% - 3px);\n        width: 103%;\n        position: absolute;\n        z-index: ${o.zIndex.overlay};\n      }\n    }\n  `,v=o=>{switch(o){case"light":return"var(--colorsUtilityMajor100)";case"transparent-base":return"var(--colorsUtilityMajor025)";case"transparent-white":return"var(--colorsUtilityYang100)";default:return"var(--colorsUtilityMajor400)"}},y=o=>{switch(o){case"transparent-base":return"var(--colorsUtilityMajor025)";case"transparent-white":return"var(--colorsUtilityYang100)";default:return"var(--colorsUtilityMajor100)"}},m=o.tr.attrs(t).withConfig({displayName:"flat-table-row.style__StyledFlatTableRow",componentId:"sc-a9da2fe4-0"})(["",""],(({bgColor:o,horizontalBorderColor:t,horizontalBorderSize:d,stickyOffset:m,isRowInteractive:u,isFirstColumnInteractive:x,lhsRowHeaderIndex:g,rhsRowHeaderIndex:j,totalChildren:w,firstCellIndex:M,colorTheme:U,expandable:k,selected:z,highlighted:_,isExpanded:$,isInSidebar:I,isSubRow:S,isFirstSubRow:R,size:F,theme:C,isDragging:A,draggable:H,rowHeight:B})=>{const T=c(),Y=o?n(C,o):void 0,D=t?n(C,t):void 0,E=I?"var(--colorsUtilityMajor150)":"var(--colorsUtilityMajor075)",N=I?"var(--colorsUtilityMajor100)":"var(--colorsUtilityMajor050)",O=`${i}, ${e}, ${l}`;return r(["border-collapse:separate;border-radius:0px;border-spacing:0;min-width:100%;table-layout:fixed;width:auto;:focus-visible{outline:none;}","{"," "," ","}"," + td{border-left:none;}"," "," "," ","{border-bottom:1px solid ",";"," ","}"," "," "," "," "," "," "," "," "," "," ",""],O,Y&&`background-color: ${Y};`,"small"!==d&&r(["border-bottom:"," solid var(--colorsUtilityMajor100);"],p[d]),D&&r(["border-bottom-color:",";"],D),i,-1!==g&&r(["",":nth-child(","){border-right:2px solid ",";}"],i,g+1,y(U)),-1!==j&&r(["",":nth-child(","){border-left:2px solid ",";}",":nth-child(","){border-right:none;}"],i,j+1,y(U),a,j),j===w-1&&r(["td:last-of-type{border-right:none;}"]),a,v(U),"small"!==d&&r(["border-bottom:"," solid var(--colorsUtilityMajor100);"],p[d]),!I&&!(null==U?void 0:U.includes("transparent"))&&`\n          :first-child {\n            border-left: 1px solid ${v(U)};\n          }\n        `,void 0!==m&&r(["&& th{top:","px;}"],m),u&&r(['cursor:pointer;:focus{position:relative;:after{content:"";box-sizing:border-box;position:absolute;left:0px;right:0px;top:0;bottom:0px;'," pointer-events:none;}:last-child{:after{border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);}}:first-child{:after{top:0px;}}"," ","{"," "," ","}","}:hover{","{background-color:",";}}"],h(C),T&&b(T)&&r(['position:-webkit-sticky;:after{border:none;content:"";height:',"px;","}"],B,h(C)),i,0===g&&C&&r(["&:first-of-type::before{border-left:3px solid var(--colorsSemanticFocus500);}"]),((o,t,e)=>o===t-1&&e&&r(["&:last-of-type{border-right:2px solid var(--colorsSemanticFocus500);}"]))(j,w,C),f(C),![-1,0].includes(g)&&r(["",""],Array.from({length:g}).map(((o,r)=>`\n                td:nth-of-type(${r+1}) {\n                  ${f(C)}\n                }\n              `))),O,Y||"var(--colorsUtilityMajor025)"),x&&r(["td:nth-child(","),th:nth-child(","){cursor:pointer;:focus{","}:hover{background-color:",";}}"],M+1,M+1,h(C),Y||"var(colorsUtilityMajor025)"),I&&r(["","{background-color:",";};}","{background-color:var(--colorsUtilityMajor040);border-bottom-color:var(--colorsUtilityMajor100);}td:first-of-type,th:first-of-type{border-left:none;}td:last-of-type{border-right:none;}","{border-right:1px solid ",";}",""],O,o||"var(--colorsUtilityMajor040)",a,l,N,u&&r([":hover{",",",":not(th){background-color:",";}}"],e,l,Y||"var(--colorsUtilityMajor075)")),k&&r(["",":first-child > div,",":first-child > div,"," + "," > div{",'[type="chevron_down_thick"]:first-of-type{transition:transform 0.3s;',"}}"],e,i,l,e,s,!$&&r(["transform:rotate(-90deg);"])),S&&r(["","{background-color:",";}",":first-child > div,",":first-child > div,"," + "," > div{padding-left:",";}"],O,Y||"var(--colorsActionMinor025)",e,i,l,e,"compact"===F?"32px":"40px"),A&&r(["border:"," 2px solid;","{background-color:",";}"],I?"var(--colorsUtilityMajor300)":"var(--colorsUtilityMajor200)",O,I?"var(--colorsUtilityMajor200)":"var(--colorsUtilityMajor150)"),H&&r(["",":first-of-type{font-size:20px;color:var(--colorsActionMinor500);}"],s),R&&r(["","{box-shadow:var(--boxShadow075);}"],O),_&&r(["","{background-color:",";}:hover{",",",",",":not(th){background-color:",";}}"],O,Y||N,e,i,l,Y||N),z&&r(["",",","{background-color:",";}:hover{",",",",",":not(th){background-color:",";}}"],e,l,Y||E,e,i,l,Y||E))}));export{m as default};
+import o,{css as r}from"styled-components";import t from"../../../style/themes/apply-base-theme.js";import{StyledFlatTableCell as e}from"../flat-table-cell/flat-table-cell.style.js";import{StyledFlatTableRowHeader as i}from"../flat-table-row-header/flat-table-row-header.style.js";import l from"../flat-table-checkbox/flat-table-checkbox.style.js";import a from"../flat-table-header/flat-table-header.style.js";import s from"../../icon/icon.style.js";import{toColor as n}from"../../../style/utils/color.js";import d from"../../../style/utils/add-focus-styling.js";import{getNavigator as c}from"../../../__internal__/dom/globals.js";import{isSafari as b}from"../../../__internal__/utils/helpers/browser-type-check/index.js";const p={medium:"2px",large:"4px"},h=o=>`\n    ${d(!0)}\n    z-index: ${o.zIndex.overlay+5};\n  `,f=o=>`\n      width: calc(100% + 1px);\n      z-index: ${o.zIndex.overlay};\n      :before {\n        content: "";\n        border-top: 2px solid var(--colorsSemanticFocus500);\n        border-bottom: 2px solid var(--colorsSemanticFocus500);\n        display: block;\n        left: -2px;\n        top: 0px;\n        height: calc(100% - 3px);\n        width: 103%;\n        position: absolute;\n        z-index: ${o.zIndex.overlay};\n      }\n    }\n  `,v=o=>{switch(o){case"light":return"var(--colorsUtilityMajor100)";case"transparent-base":return"var(--colorsUtilityMajor025)";case"transparent-white":return"var(--colorsUtilityYang100)";default:return"var(--colorsUtilityMajor400)"}},y=o=>{switch(o){case"transparent-base":return"var(--colorsUtilityMajor025)";case"transparent-white":return"var(--colorsUtilityYang100)";default:return"var(--colorsUtilityMajor100)"}},m=o.tr.attrs(t).withConfig({displayName:"flat-table-row.style__StyledFlatTableRow",componentId:"sc-4daf4fd4-0"})(["",""],(({bgColor:o,horizontalBorderColor:t,horizontalBorderSize:d,stickyOffset:m,isRowInteractive:u,isFirstColumnInteractive:x,lhsRowHeaderIndex:g,rhsRowHeaderIndex:j,totalChildren:w,firstCellIndex:M,colorTheme:U,expandable:k,selected:z,highlighted:_,isExpanded:$,isInSidebar:I,isSubRow:S,isFirstSubRow:R,size:F,theme:C,isDragging:A,draggable:H,rowHeight:B})=>{const T=c(),Y=o?n(C,o):void 0,D=t?n(C,t):void 0,E=I?"var(--colorsUtilityMajor150)":"var(--colorsUtilityMajor075)",N=I?"var(--colorsUtilityMajor100)":"var(--colorsUtilityMajor050)",O=`${i}, ${e}, ${l}`;return r(["border-collapse:separate;border-radius:0px;border-spacing:0;min-width:100%;table-layout:fixed;width:auto;:focus-visible{outline:none;}","{"," "," ","}"," + td{border-left:none;}"," "," "," ","{border-bottom:1px solid ",";"," ","}"," "," "," "," "," "," "," "," "," "," ",""],O,Y&&`background-color: ${Y};`,"small"!==d&&r(["border-bottom:"," solid var(--colorsUtilityMajor100);"],p[d]),D&&r(["border-bottom-color:",";"],D),i,-1!==g&&r(["",":nth-child(","){border-right:2px solid ",";}"],i,g+1,y(U)),-1!==j&&r(["",":nth-child(","){border-left:2px solid ",";}",":nth-child(","){border-right:none;}"],i,j+1,y(U),a,j),j===w-1&&r(["td:last-of-type{border-right:none;}"]),a,v(U),"small"!==d&&r(["border-bottom:"," solid var(--colorsUtilityMajor100);"],p[d]),!I&&!(null==U?void 0:U.includes("transparent"))&&`\n          :first-child {\n            border-left: 1px solid ${v(U)};\n          }\n        `,void 0!==m&&r(["&& th{top:","px;}"],m),u&&r(['cursor:pointer;:focus{position:relative;:after{content:"";box-sizing:border-box;position:absolute;left:0px;right:0px;top:0;bottom:0px;'," pointer-events:none;}:last-child{:after{border-bottom-left-radius:var(--borderRadius100);border-bottom-right-radius:var(--borderRadius100);}}:first-child{:after{top:0px;}}"," ","{"," "," ","}","}:hover{","{background-color:",";}}"],h(C),T&&b(T)&&r(['position:-webkit-sticky;:after{border:none;content:"";height:',"px;","}"],B,h(C)),i,0===g&&C&&r(["&:first-of-type::before{border-left:3px solid var(--colorsSemanticFocus500);}"]),((o,t,e)=>o===t-1&&e&&r(["&:last-of-type{border-right:2px solid var(--colorsSemanticFocus500);}"]))(j,w,C),f(C),![-1,0].includes(g)&&r(["",""],Array.from({length:g}).map(((o,r)=>`\n                td:nth-of-type(${r+1}) {\n                  ${f(C)}\n                }\n              `))),O,Y||"var(--colorsUtilityMajor025)"),x&&r(["td:nth-child(","),th:nth-child(","){cursor:pointer;:focus{","}:hover{background-color:",";}}"],M+1,M+1,h(C),Y||"var(colorsUtilityMajor025)"),I&&r(["","{background-color:",";};}","{background-color:var(--colorsUtilityMajor040);border-bottom-color:var(--colorsUtilityMajor100);}td:first-of-type,th:first-of-type{border-left:none;}td:last-of-type{border-right:none;}","{border-right:1px solid ",";}",""],O,o||"var(--colorsUtilityMajor040)",a,l,N,u&&r([":hover{",",",":not(th){background-color:",";}}"],e,l,Y||"var(--colorsUtilityMajor075)")),k&&r(["",":first-child > div,",":first-child > div,"," + "," > div{",'[type="chevron_down_thick"]:first-of-type{transition:transform 0.3s;',"}}"],e,i,l,e,s,!$&&r(["transform:rotate(-90deg);"])),S&&r(["","{background-color:",";}",":first-child > div,",":first-child > div,"," + "," > div{padding-left:",";}"],O,Y||"var(--colorsActionMinor025)",e,i,l,e,"compact"===F?"32px":"40px"),A&&r(["border:"," 2px solid;","{background-color:",";}"],I?"var(--colorsUtilityMajor300)":"var(--colorsUtilityMajor200)",O,I?"var(--colorsUtilityMajor200)":"var(--colorsUtilityMajor150)"),H&&r(["",":first-of-type{font-size:20px;color:var(--colorsActionMinor500);}"],s),R&&r(["","{box-shadow:var(--boxShadow075);}"],O),_&&r(["","{background-color:",";}:hover{",",",",",":not(th){background-color:",";}}"],O,Y||N,e,i,l,Y||N),z&&r(["",",","{background-color:",";}:hover{",",",",",":not(th){background-color:",";}}"],e,l,Y||E,e,i,l,Y||E))}));export{m as default};

package/esm/components/textarea/textarea.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import t,{useContext as r,useState as o,useRef as l,useCallback as a,useEffect as d}from"react";import s from"../../__internal__/utils/helpers/tags/tags.js";import p from"../../__internal__/input/input.component.js";import u from"../../__internal__/input/input-presentation.component.js";import c from"../../__internal__/form-field/form-field.component.js";import b from"../../hooks/useCharacterCount/useCharacterCount.js";import{InputBehaviour as m}from"../../__internal__/input-behaviour/input-behaviour.component.js";import f from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import h from"../../__internal__/utils/helpers/guid/index.js";import g,{DEFAULT_MIN_HEIGHT as v}from"./textarea.style.js";import{TooltipProvider as y}from"../../__internal__/tooltip-provider/index.js";import _ from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import O from"../carbon-provider/__internal__/new-validation.context.js";import j from"../textbox/textbox.style.js";import w from"../../__internal__/validation-message/validation-message.component.js";import{Box as x}from"../box/box.component.js";import I from"../../__internal__/utils/logger/index.js";import{HintText as P}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import H from"../../style/utils/filter-styled-system-margin-props.js";function L(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function B(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(i){L(e,i,n[i])}))}return e}let T=!1,A=!1;const R=t.forwardRef(((t,L)=>{var{"aria-labelledby":R,"aria-describedby":S,autoFocus:W,inputHint:k,fieldHelp:E,label:C,children:q,characterLimit:F,onChange:D,onFocus:M,onBlur:z,disabled:V=!1,labelInline:N,labelAlign:$,labelHelp:G,labelSpacing:J,inputIcon:K,id:Q,error:U,warning:X,info:Y,name:Z,readOnly:ee=!1,placeholder:ie,expandable:ne=!1,rows:te,validationOnLabel:re=!1,adaptiveLabelBreakpoint:oe,inputWidth:le,maxWidth:ae,labelWidth:de=30,tooltipPosition:se,value:pe,"data-element":ue,"data-role":ce,helpAriaLabel:be,borderRadius:me,hideBorders:fe=!1,required:he,isOptional:ge,minHeight:ve=v,validationMessagePositionTop:ye=!0}=t,_e=function(e,i){if(null==e)return{};var n,t,r=function(e,i){if(null==e)return{};var n,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||(r[n]=e[n]);return r}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(t,["aria-labelledby","aria-describedby","autoFocus","inputHint","fieldHelp","label","children","characterLimit","onChange","onFocus","onBlur","disabled","labelInline","labelAlign","labelHelp","labelSpacing","inputIcon","id","error","warning","info","name","readOnly","placeholder","expandable","rows","validationOnLabel","adaptiveLabelBreakpoint","inputWidth","maxWidth","labelWidth","tooltipPosition","value","data-element","data-role","helpAriaLabel","borderRadius","hideBorders","required","isOptional","minHeight","validationMessagePositionTop"]);!T&&ge&&(T=!0,I.deprecate("`isOptional` is deprecated in TextArea and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:Oe}=r(O),je=!Oe&&N,[we,xe]=o(v),Ie=e=>Oe?void 0:e,{current:Pe}=l(Q||h()),He=l(null),Le=a((e=>{He.current=e,L&&("current"in L?L.current=e:L(e))}),[L]),[Be,Te]=o("off");Array.isArray(me)&&me.length>4&&!A&&(I.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values."),A=!0);const Ae=a((()=>{const e=He.current;if((null==e?void 0:e.scrollHeight)&&(null==e?void 0:e.scrollHeight)>we){let i=e;for(;i&&!(null==i?void 0:i.scrollTop);)i=(null==i?void 0:i.parentElement)||null;const n=null==i?void 0:i.scrollTop;e.style.height="auto",e.style.height=`${Math.max(e.scrollHeight,we)}px`,i&&n&&(i.scrollTop=n)}}),[we]),{labelId:Re,validationId:Se,fieldHelpId:We,ariaDescribedBy:ke}=_({id:Pe,validationRedesignOptIn:Oe,error:U,warning:X,info:Y,label:C,fieldHelp:E}),[Ee,Ce]=b(pe,F,Be);d((()=>{var e;xe(te?(null==He||null===(e=He.current)||void 0===e?void 0:e.scrollHeight)||0:ve>v?ve:v)}),[ve,te]),d((()=>{ne&&Ae()})),d((()=>{var e,i;return ne&&(window.addEventListener("resize",Ae),xe((null==He||null===(e=He.current)||void 0===e?void 0:e.clientHeight)||0),null===(i=document.fonts)||void 0===i||i.addEventListener("loadingdone",Ae)),()=>{var e;ne&&(window.removeEventListener("resize",Ae),null===(e=document.fonts)||void 0===e||e.removeEventListener("loadingdone",Ae))}}),[Ae,ne]);const qe=!!(K||Se&&!re),Fe=l(h()),De=k?Fe.current:void 0,Me=[...Oe&&ye?[ke,De]:[De,ke],Ce,S].filter(Boolean).join(" "),ze=e(u,{disabled:V,readOnly:ee,inputWidth:"number"==typeof le?le:100-de,maxWidth:ae,error:U,warning:X,info:Y,borderRadius:me,hideBorders:fe,children:[i(p,B({"aria-invalid":!!U,"aria-labelledby":R,"aria-describedby":Me,autoFocus:W,name:Z,value:pe,ref:Le,onChange:D,onFocus:e=>{F&&Te("polite"),null==M||M(e)},onBlur:e=>{F&&Te("off"),null==z||z(e)},disabled:V,readOnly:ee,placeholder:V?"":ie,rows:te,id:Pe,as:"textarea",validationIconId:Oe?void 0:Se,inputBorderRadius:me,required:he},_e)),q,i(f,{disabled:V,readOnly:ee,inputIcon:K,error:U,warning:X,info:Y,validationIconId:Oe?void 0:Se,useValidationIcon:!(Oe||re)})]}),Ve=H(_e);return i(y,{tooltipPosition:se,helpAriaLabel:be,children:i(m,{children:e(g,(Ne=B({labelInline:je,hasIcon:qe,minHeight:we},Ve,s("textarea",{"data-element":ue,"data-role":ce})),$e={children:[e(c,{fieldHelp:Ie(E),fieldHelpId:We,error:U,warning:X,info:Y,label:C,labelId:Re,disabled:V,id:Pe,labelInline:Ie(je),labelAlign:$,labelWidth:Ie(de),labelHelp:Ie(G),labelSpacing:J,isRequired:he,useValidationIcon:Ie(re),adaptiveLabelBreakpoint:oe,validationRedesignOptIn:Oe,my:0,children:[(k||G&&Oe)&&i(P,{align:$,id:De,"data-element":"input-hint",children:k||G}),Oe?e(x,{position:"relative",children:[ye&&e(n,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]}),ze,!ye&&e(n,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]})]}):ze]}),Ee]},$e=null!=$e?$e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ne,Object.getOwnPropertyDescriptors($e)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object($e)).forEach((function(e){Object.defineProperty(Ne,e,Object.getOwnPropertyDescriptor($e,e))})),Ne))})});var Ne,$e}));R.displayName="Textarea";export{R as OriginalTextarea,R as Textarea,R as default};
+import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import t,{useContext as r,useState as o,useRef as l,useCallback as a,useEffect as d}from"react";import s from"../../__internal__/utils/helpers/tags/tags.js";import p from"../../__internal__/input/input.component.js";import u from"../../__internal__/input/input-presentation.component.js";import c from"../../__internal__/form-field/form-field.component.js";import b from"../../hooks/useCharacterCount/useCharacterCount.js";import{InputBehaviour as m}from"../../__internal__/input-behaviour/input-behaviour.component.js";import f from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import h from"../../__internal__/utils/helpers/guid/index.js";import g,{DEFAULT_MIN_HEIGHT as v}from"./textarea.style.js";import{TooltipProvider as y}from"../../__internal__/tooltip-provider/index.js";import _ from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import O from"../carbon-provider/__internal__/new-validation.context.js";import j from"../textbox/textbox.style.js";import w from"../../__internal__/validation-message/validation-message.component.js";import{Box as x}from"../box/box.component.js";import I from"../../__internal__/utils/logger/index.js";import{HintText as P}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import H from"../../style/utils/filter-styled-system-margin-props.js";function L(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function B(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(i){L(e,i,n[i])}))}return e}let T=!1,A=!1;const R=t.forwardRef(((t,L)=>{var{"aria-labelledby":R,"aria-describedby":S,autoFocus:W,inputHint:k,fieldHelp:E,label:C,children:q,characterLimit:F,onChange:D,onFocus:M,onBlur:z,disabled:V=!1,labelInline:N,labelAlign:$,labelHelp:G,labelSpacing:J,inputIcon:K,id:Q,error:U,warning:X,info:Y,name:Z,readOnly:ee=!1,placeholder:ie,expandable:ne=!1,rows:te,validationOnLabel:re=!1,adaptiveLabelBreakpoint:oe,inputWidth:le,maxWidth:ae,labelWidth:de=30,tooltipPosition:se,value:pe,"data-element":ue,"data-role":ce,helpAriaLabel:be,borderRadius:me,hideBorders:fe=!1,required:he,isOptional:ge,minHeight:ve=v,validationMessagePositionTop:ye=!0}=t,_e=function(e,i){if(null==e)return{};var n,t,r=function(e,i){if(null==e)return{};var n,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||(r[n]=e[n]);return r}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(t,["aria-labelledby","aria-describedby","autoFocus","inputHint","fieldHelp","label","children","characterLimit","onChange","onFocus","onBlur","disabled","labelInline","labelAlign","labelHelp","labelSpacing","inputIcon","id","error","warning","info","name","readOnly","placeholder","expandable","rows","validationOnLabel","adaptiveLabelBreakpoint","inputWidth","maxWidth","labelWidth","tooltipPosition","value","data-element","data-role","helpAriaLabel","borderRadius","hideBorders","required","isOptional","minHeight","validationMessagePositionTop"]);!T&&ge&&(T=!0,I.deprecate("`isOptional` is deprecated in TextArea and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:Oe}=r(O),je=!Oe&&N,[we,xe]=o(v),Ie=e=>Oe?void 0:e,{current:Pe}=l(Q||h()),He=l(null),Le=a((e=>{He.current=e,L&&("current"in L?L.current=e:L(e))}),[L]),[Be,Te]=o("off");Array.isArray(me)&&me.length>4&&!A&&(I.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values."),A=!0);const Ae=a((()=>{const e=He.current;if((null==e?void 0:e.scrollHeight)&&(null==e?void 0:e.scrollHeight)>we){let i=e;for(;i&&!(null==i?void 0:i.scrollTop);)i=(null==i?void 0:i.parentElement)||null;const n=null==i?void 0:i.scrollTop;e.style.height="auto",e.style.height=`${Math.max(e.scrollHeight,we)}px`,i&&n&&(i.scrollTop=n)}}),[we]),{labelId:Re,validationId:Se,fieldHelpId:We,ariaDescribedBy:ke}=_({id:Pe,validationRedesignOptIn:Oe,error:U,warning:X,info:Y,label:C,fieldHelp:E}),[Ee,Ce]=b(pe,F,Be);d((()=>{var e;xe(te?(null==He||null===(e=He.current)||void 0===e?void 0:e.scrollHeight)||0:ve>v?ve:v)}),[ve,te]),d((()=>{ne&&Ae()})),d((()=>{var e,i;return ne&&(window.addEventListener("resize",Ae),xe((null==He||null===(e=He.current)||void 0===e?void 0:e.clientHeight)||0),null===(i=document.fonts)||void 0===i||i.addEventListener("loadingdone",Ae)),()=>{var e;ne&&(window.removeEventListener("resize",Ae),null===(e=document.fonts)||void 0===e||e.removeEventListener("loadingdone",Ae))}}),[Ae,ne]);const qe=!!(K||Se&&!re),Fe=l(h()),De=k?Fe.current:void 0,Me=[...Oe&&ye?[ke,De]:[De,ke],Ce,S].filter(Boolean).join(" "),ze=e(u,{disabled:V,readOnly:ee,inputWidth:"number"==typeof le?le:100-de,maxWidth:ae,error:U,warning:X,info:Y,borderRadius:me,hideBorders:fe,children:[i(p,B({"aria-invalid":!!U,"aria-labelledby":R,"aria-describedby":Me,autoFocus:W,name:Z,value:pe,ref:Le,onChange:D,onFocus:e=>{F&&Te("polite"),null==M||M(e)},onBlur:e=>{F&&Te("off"),null==z||z(e)},disabled:V,readOnly:ee,placeholder:V?"":ie,rows:te,id:Pe,as:"textarea",validationIconId:Oe?void 0:Se,inputBorderRadius:me,required:he},_e)),q,i(f,{disabled:V,readOnly:ee,inputIcon:K,error:U,warning:X,info:Y,validationIconId:Oe?void 0:Se,useValidationIcon:!(Oe||re)})]}),Ve=H(_e);return i(y,{tooltipPosition:se,helpAriaLabel:be,children:i(m,{children:i(g,(Ne=B({labelInline:je,hasIcon:qe,minHeight:we},Ve,s("textarea",{"data-element":ue,"data-role":ce})),$e={children:e(c,{fieldHelp:Ie(E),fieldHelpId:We,error:U,warning:X,info:Y,label:C,labelId:Re,disabled:V,id:Pe,labelInline:Ie(je),labelAlign:$,labelWidth:Ie(de),labelHelp:Ie(G),labelSpacing:J,isRequired:he,useValidationIcon:Ie(re),adaptiveLabelBreakpoint:oe,validationRedesignOptIn:Oe,my:0,children:[(k||G&&Oe)&&i(P,{align:$,id:De,"data-element":"input-hint",children:k||G}),Oe?e(x,{position:"relative",children:[ye&&e(n,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]}),ze,!ye&&e(n,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]})]}):ze,Ee]})},$e=null!=$e?$e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ne,Object.getOwnPropertyDescriptors($e)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object($e)).forEach((function(e){Object.defineProperty(Ne,e,Object.getOwnPropertyDescriptor($e,e))})),Ne))})});var Ne,$e}));R.displayName="Textarea";export{R as OriginalTextarea,R as Textarea,R as default};

package/lib/__internal__/utils/helpers/array-move/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Move an array element from one position to another, without mutating the original array.
+ *
+ * ```ts
+ * const array = ["a", "b", "c", "d"];
+ * const result = arrayMove({ array, startIndex: 1, endIndex: 3 });
+ * // result is ["a", "c", "d", "b"]
+ * ```
+ * */
+declare function arrayMove<T>({ array, startIndex, endIndex, }: {
+    array: T[];
+    startIndex: number;
+    endIndex: number;
+}): T[];
+export default arrayMove;

package/lib/__internal__/utils/helpers/array-move/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=function({array:e,startIndex:r,endIndex:t}){if(r===t||r<0||t<0||r>=e.length||t>=e.length)return e;const n=Array.from(e),[s]=n.splice(r,1);return n.splice(t,0,s),n};

package/lib/__internal__/utils/helpers/array-move/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "main": "./index.js",
+  "module": "../../../esm/__internal__/utils/helpers/array-move/index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/draggable/__internal__/data.d.ts

@@ -0,0 +1,26 @@
+/** Helper functions for safer type checking. */
+declare const PRIVATE_DRAGGABLE_KEY: unique symbol;
+declare const PRIVATE_DROP_TARGET_KEY: unique symbol;
+export type Draggable = {
+    [PRIVATE_DRAGGABLE_KEY]: true;
+    /** Unique identifier of the draggable item */
+    id: string;
+    /** The index of the draggable item when dragging was initiated */
+    initialIndex: number;
+    /** Bounding rectangle of the draggable item  */
+    rect: DOMRect;
+    /** Unique identifier of the context instance the item belongs to */
+    contextId: symbol;
+};
+export type DropTarget = {
+    [PRIVATE_DROP_TARGET_KEY]: true;
+    /** Unique identifier of the drop target */
+    id: string;
+    /** Unique identifier of the context instance the drop target belongs to */
+    contextId: symbol;
+};
+export declare function getDraggable(data: Omit<Draggable, typeof PRIVATE_DRAGGABLE_KEY>): Draggable;
+export declare function getDropTarget(data: Omit<DropTarget, typeof PRIVATE_DROP_TARGET_KEY>): DropTarget;
+export declare function isDraggable(data: Record<string | symbol, unknown>): data is Draggable;
+export declare function isDropTarget(data: Record<string | symbol, unknown>): data is DropTarget;
+export {};

package/lib/components/draggable/__internal__/data.js

@@ -0,0 +1 @@
+"use strict";function e(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function r(r){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(t){e(r,t,n[t])}))}return r}const t=Symbol("drag"),n=Symbol("drop");exports.getDraggable=function(e){return r({[t]:!0},e)},exports.getDropTarget=function(e){return r({[n]:!0},e)},exports.isDraggable=function(e){return Boolean(e[t])},exports.isDropTarget=function(e){return Boolean(e[n])};