carbon-react 154.4.0 → 154.4.2

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -1,121 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useRef } from "react";
-import createGuid from "../../__internal__/utils/helpers/guid";
-import Modal from "../modal";
-import Heading from "../heading";
-import FullScreenHeading from "../../__internal__/full-screen-heading";
-import StyledDialogFullScreen from "./dialog-full-screen.style";
-import StyledContent from "./content.style";
-import FocusTrap from "../../__internal__/focus-trap";
-import IconButton from "../icon-button";
-import Icon from "../icon";
-import useLocale from "../../hooks/__internal__/useLocale";
-import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import Logger from "../../__internal__/utils/logger";
-let deprecatedDisableCloseTrigger = false;
-let deprecatedTimeoutTrigger = false;
-export const DialogFullScreen = ({
-  "aria-describedby": ariaDescribedBy,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  disableAutoFocus = false,
-  focusFirstElement,
-  bespokeFocusTrap,
-  open,
-  children,
-  title,
-  subtitle,
-  pagesStyling,
-  headerChildren,
-  showCloseIcon = true,
-  disableContentPadding,
-  disableEscKey,
-  onCancel,
-  contentRef,
-  help,
-  role = "dialog",
-  focusableContainers,
-  focusableSelectors,
-  topModalOverride,
-  closeButtonDataProps,
-  restoreFocusOnClose = true,
-  ...rest
-}) => {
-  const locale = useLocale();
-  const dialogRef = useRef(null);
-  const headingRef = useRef(null);
-  const {
-    current: titleId
-  } = useRef(createGuid());
-  const {
-    current: subtitleId
-  } = useRef(createGuid());
-  const isTopModal = useModalAria(dialogRef);
-  if (!deprecatedDisableCloseTrigger && rest?.disableClose) {
-    deprecatedDisableCloseTrigger = true;
-    Logger.deprecate("The disableClose prop in DialogFullScreen is deprecated and will soon be removed.");
-  }
-  if (!deprecatedTimeoutTrigger && rest?.timeout) {
-    deprecatedTimeoutTrigger = true;
-    Logger.deprecate("The timeout prop in DialogFullScreen is deprecated and will soon be removed.");
-  }
-  const closeIcon = () => {
-    if (!showCloseIcon || !onCancel) return null;
-    return /*#__PURE__*/React.createElement(IconButton, _extends({
-      "aria-label": locale.dialogFullScreen.ariaLabels.close(),
-      onClick: onCancel
-    }, tagComponent("close", {
-      "data-element": "close",
-      ...closeButtonDataProps
-    })), /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
-    }));
-  };
-  const dialogTitle = () => /*#__PURE__*/React.createElement(FullScreenHeading, {
-    hasContent: !!title,
-    ref: headingRef
-  }, typeof title === "string" ? /*#__PURE__*/React.createElement(Heading, {
-    "data-element": "dialog-title",
-    title: title,
-    titleId: titleId,
-    subheader: subtitle,
-    subtitleId: subtitleId,
-    divider: false,
-    help: help
-  }) : title, headerChildren);
-  const ariaProps = {
-    "aria-labelledby": title && typeof title === "string" ? titleId : ariaLabelledBy,
-    "aria-describedby": subtitle && typeof subtitle === "string" ? subtitleId : ariaDescribedBy,
-    "aria-label": ariaLabel
-  };
-  return /*#__PURE__*/React.createElement(Modal, _extends({
-    open: open,
-    onCancel: onCancel,
-    disableEscKey: disableEscKey,
-    topModalOverride: topModalOverride,
-    restoreFocusOnClose: restoreFocusOnClose
-  }, tagComponent("dialog-full-screen", rest)), /*#__PURE__*/React.createElement(FocusTrap, {
-    autoFocus: !disableAutoFocus,
-    focusFirstElement: focusFirstElement,
-    bespokeTrap: bespokeFocusTrap,
-    wrapperRef: dialogRef,
-    isOpen: open,
-    additionalWrapperRefs: focusableContainers,
-    focusableSelectors: focusableSelectors
-  }, /*#__PURE__*/React.createElement(StyledDialogFullScreen, _extends({
-    "aria-modal": role === "dialog" && isTopModal ? true : undefined
-  }, ariaProps, {
-    ref: dialogRef,
-    "data-element": "dialog-full-screen",
-    pagesStyling: pagesStyling,
-    role: role
-  }), title || headerChildren ? dialogTitle() : null, closeIcon(), /*#__PURE__*/React.createElement(StyledContent, {
-    hasHeader: title !== undefined,
-    "data-element": "content",
-    "data-role": "dialog-full-screen-content",
-    ref: contentRef,
-    disableContentPadding: disableContentPadding
-  }, children))));
-};
-export default DialogFullScreen;
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{useRef as t}from"react";import r from"../../__internal__/utils/helpers/guid/index.js";import n from"../modal/modal.component.js";import{Heading as l}from"../heading/heading.component.js";import i from"../../__internal__/full-screen-heading/full-screen-heading.component.js";import a from"./dialog-full-screen.style.js";import s from"./content.style.js";import c from"../../__internal__/focus-trap/focus-trap.component.js";import d from"../icon-button/icon-button.component.js";import p from"../icon/icon.component.js";import u from"../../hooks/__internal__/useLocale/useLocale.js";import b from"../../hooks/__internal__/useModalAria/useModalAria.js";import f from"../../__internal__/utils/helpers/tags/tags.js";import m from"../../__internal__/utils/logger/index.js";function g(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}function y(e){for(var o=1;o<arguments.length;o++){var t=null!=arguments[o]?arguments[o]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(o){g(e,o,t[o])}))}return e}function O(e,o){return o=null!=o?o:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):function(e){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);o.push.apply(o,t)}return o}(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))})),e}let h=!1,j=!1;const _=g=>{var{"aria-describedby":_,"aria-label":v,"aria-labelledby":C,disableAutoFocus:P=!1,focusFirstElement:w,bespokeFocusTrap:S,open:F,children:k,title:E,subtitle:D,pagesStyling:x,headerChildren:I,showCloseIcon:M=!0,disableContentPadding:T,disableEscKey:A,onCancel:R,contentRef:K,help:L,role:B="dialog",focusableContainers:H,focusableSelectors:W,topModalOverride:q,closeButtonDataProps:z,restoreFocusOnClose:G=!0}=g,J=function(e,o){if(null==e)return{};var t,r,n=function(e,o){if(null==e)return{};var t,r,n={},l=Object.keys(e);for(r=0;r<l.length;r++)t=l[r],o.indexOf(t)>=0||(n[t]=e[t]);return n}(e,o);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)t=l[r],o.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(g,["aria-describedby","aria-label","aria-labelledby","disableAutoFocus","focusFirstElement","bespokeFocusTrap","open","children","title","subtitle","pagesStyling","headerChildren","showCloseIcon","disableContentPadding","disableEscKey","onCancel","contentRef","help","role","focusableContainers","focusableSelectors","topModalOverride","closeButtonDataProps","restoreFocusOnClose"]);const N=u(),Q=t(null),U=t(null),{current:V}=t(r()),{current:X}=t(r()),Y=b(Q);!h&&(null==J?void 0:J.disableClose)&&(h=!0,m.deprecate("The disableClose prop in DialogFullScreen is deprecated and will soon be removed.")),!j&&(null==J?void 0:J.timeout)&&(j=!0,m.deprecate("The timeout prop in DialogFullScreen is deprecated and will soon be removed."));const Z={"aria-labelledby":E&&"string"==typeof E?V:C,"aria-describedby":D&&"string"==typeof D?X:_,"aria-label":v};return e(n,O(y({open:F,onCancel:R,disableEscKey:A,topModalOverride:q,restoreFocusOnClose:G},f("dialog-full-screen",J)),{children:e(c,{autoFocus:!P,focusFirstElement:w,bespokeTrap:S,wrapperRef:Q,isOpen:F,additionalWrapperRefs:H,focusableSelectors:W,children:o(a,O(y({"aria-modal":!("dialog"!==B||!Y)||void 0},Z),{ref:Q,"data-element":"dialog-full-screen",pagesStyling:x,role:B,children:[E||I?o(i,{hasContent:!!E,ref:U,children:["string"==typeof E?e(l,{"data-element":"dialog-title",title:E,titleId:V,subheader:D,subtitleId:X,divider:!1,help:L}):E,I]}):null,M&&R?e(d,O(y({"aria-label":N.dialogFullScreen.ariaLabels.close(),onClick:R},f("close",y({"data-element":"close"},z))),{children:e(p,{type:"close"})})):null,e(s,{hasHeader:void 0!==E,"data-element":"content","data-role":"dialog-full-screen-content",ref:K,disableContentPadding:T,children:k})]}))})}))};export{_ as DialogFullScreen,_ as default};

package/esm/components/dialog-full-screen/dialog-full-screen.style.js

@@ -1,74 +1 @@
-import styled, { css } from "styled-components";
-import baseTheme from "../../style/themes/base";
-import StyledContent from "./content.style";
-import StyledIconButton from "../icon-button/icon-button.style";
-import StyledFullScreenHeading from "../../__internal__/full-screen-heading/full-screen-heading.style";
-import { StyledHeader, StyledHeaderContent, StyledHeading } from "../heading/heading.style";
-const StyledDialogFullScreen = styled.div`
-  :focus {
-    outline: none;
-  }
-
-  background-color: var(--colorsUtilityMajor025);
-  height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: ${({
-  theme
-}) => theme.zIndex.fullScreenModal}; // TODO (tokens): implement elevation tokens - FE-4437
-  display: flex;
-  flex-direction: column;
-
-  ${StyledHeaderContent} {
-    align-items: baseline;
-  }
-
-  > ${StyledIconButton} {
-    margin: 0;
-    position: absolute;
-    right: 40px;
-    top: 26px;
-    z-index: 1;
-  }
-
-  /**
-    The following CSS is for a legacy use of the Pages component.
-    Please do not remove this until Pages has been re-written.
-   */
-  ${({
-  pagesStyling
-}) => pagesStyling && css`
-      ${StyledContent} {
-        padding: 0;
-      }
-
-      ${StyledIconButton} {
-        margin: 0;
-        position: absolute;
-        right: 33px;
-        top: 32px;
-        z-index: 1;
-      }
-
-      ${StyledFullScreenHeading} {
-        padding: 32px 32px 0;
-      }
-
-      ${StyledHeading} {
-        width: auto;
-        padding-top: 4px;
-
-        ${StyledHeader} {
-          margin: 0 0 0 3px;
-          box-sizing: content-box;
-          width: 100%;
-        }
-      }
-    `}
-`;
-StyledDialogFullScreen.defaultProps = {
-  theme: baseTheme
-};
-export default StyledDialogFullScreen;
+import e,{css as t}from"styled-components";import o from"../../style/themes/base/index.js";import i from"./content.style.js";import n from"../icon-button/icon-button.style.js";import l from"../../__internal__/full-screen-heading/full-screen-heading.style.js";import{StyledHeaderContent as s,StyledHeading as d,StyledHeader as a}from"../heading/heading.style.js";const p=e.div.withConfig({displayName:"dialog-full-screen.style__StyledDialogFullScreen",componentId:"sc-4b4daf83-0"})([":focus{outline:none;}background-color:var(--colorsUtilityMajor025);height:100%;left:0;position:fixed;top:0;width:100%;z-index:",";display:flex;flex-direction:column;","{align-items:baseline;}> ","{margin:0;position:absolute;right:40px;top:26px;z-index:1;}",""],(({theme:e})=>e.zIndex.fullScreenModal),s,n,(({pagesStyling:e})=>e&&t(["","{padding:0;}","{margin:0;position:absolute;right:33px;top:32px;z-index:1;}","{padding:32px 32px 0;}","{width:auto;padding-top:4px;","{margin:0 0 0 3px;box-sizing:content-box;width:100%;}}"],i,n,l,d,a)));p.defaultProps={theme:o};export{p as default};

package/esm/components/dialog-full-screen/index.js

@@ -1 +1 @@
-export { default } from "./dialog-full-screen.component";
+export{DialogFullScreen as default}from"./dialog-full-screen.component.js";

package/esm/components/dismissible-box/dismissible-box.component.js

@@ -1,33 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from "react";
-import useLocale from "../../hooks/__internal__/useLocale";
-import { StyledDismissibleBox } from "./dismissible-box.style";
-import IconButton from "../icon-button";
-import Icon from "../icon";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-export const DismissibleBox = ({
-  children,
-  closeButtonDataProps,
-  onClose,
-  borderRadius = "borderRadius100",
-  ...rest
-}) => {
-  const locale = useLocale();
-  return /*#__PURE__*/React.createElement(StyledDismissibleBox, _extends({
-    p: "20px 24px 20px 20px",
-    borderRadius: borderRadius
-  }, rest, tagComponent("dismissible-box", rest)), children, /*#__PURE__*/React.createElement("span", {
-    "data-element": "close-button-wrapper"
-  }, /*#__PURE__*/React.createElement(IconButton, _extends({
-    onClick: onClose,
-    "aria-label": locale.dismissibleBox.ariaLabels.close(),
-    ml: 3
-  }, tagComponent("close-button", {
-    "data-element": "close-button",
-    ...closeButtonDataProps
-  })), /*#__PURE__*/React.createElement(Icon, {
-    type: "close",
-    color: "--colorsActionMinor500"
-  }))));
-};
-export default DismissibleBox;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import"react";import r from"../../hooks/__internal__/useLocale/useLocale.js";import{StyledDismissibleBox as o}from"./dismissible-box.style.js";import n from"../icon-button/icon-button.component.js";import c from"../icon/icon.component.js";import i from"../../__internal__/utils/helpers/tags/tags.js";function s(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(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){s(e,t,r[t])}))}return e}function a(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 p=s=>{var{children:p,closeButtonDataProps:u,onClose:b,borderRadius:f="borderRadius100"}=s,m=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)r=c[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(s,["children","closeButtonDataProps","onClose","borderRadius"]);const O=r();return e(o,a(l({p:"20px 24px 20px 20px",borderRadius:f},m,i("dismissible-box",m)),{children:[p,t("span",{"data-element":"close-button-wrapper",children:t(n,a(l({onClick:b,"aria-label":O.dismissibleBox.ariaLabels.close(),ml:3},i("close-button",l({"data-element":"close-button"},u))),{children:t(c,{type:"close",color:"--colorsActionMinor500"})}))})]}))};export{p as DismissibleBox,p as default};

package/esm/components/dismissible-box/dismissible-box.style.js

@@ -1,26 +1 @@
-import styled, { css } from "styled-components";
-import Box from "../box";
-import StyledIcon from "../icon/icon.style";
-const StyledDismissibleBox = styled(Box)`
-  ${({
-  hasBorderLeftHighlight = true,
-  variant = "light"
-}) => css`
-    background-color: ${variant === "light" ? "#FFFFFF" : "var(--colorsUtilityMajor050)"};
-
-    border: 1px solid var(--colorsUtilityMajor100);
-    display: flex;
-    justify-content: space-between;
-    word-break: break-word;
-
-    ${hasBorderLeftHighlight && `
-      border-left: none;
-      box-shadow: -4px 0 0 0 var(--colorsUtilityMajor400);
-    `}
-
-    ${StyledIcon}:hover {
-      color: var(--colorsActionMinor600);
-    }
-  `}
-`;
-export { StyledDismissibleBox };
+import o,{css as r}from"styled-components";import{Box as i}from"../box/box.component.js";import t from"../icon/icon.style.js";const e=o(i).withConfig({displayName:"dismissible-box.style__StyledDismissibleBox",componentId:"sc-4a614024-0"})(["",""],(({hasBorderLeftHighlight:o=!0,variant:i="light"})=>r(["background-color:",";border:1px solid var(--colorsUtilityMajor100);display:flex;justify-content:space-between;word-break:break-word;"," ",":hover{color:var(--colorsActionMinor600);}"],"light"===i?"#FFFFFF":"var(--colorsUtilityMajor050)",o&&"\n      border-left: none;\n      box-shadow: -4px 0 0 0 var(--colorsUtilityMajor400);\n    ",t)));export{e as StyledDismissibleBox};

package/esm/components/dismissible-box/index.js

@@ -1 +1 @@
-export { default } from "./dismissible-box.component";
+export{DismissibleBox as default}from"./dismissible-box.component.js";

package/esm/components/draggable/__internal__/drop-target.component.js

@@ -1,24 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from "react";
-import { useDrop } from "react-dnd";
-import { StyledDraggableContainer } from "../draggable-item/draggable-item.style";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-const DropTarget = ({
-  children,
-  getOrder,
-  ...rest
-}) => {
-  const [, drop] = useDrop({
-    accept: "draggableItem",
-    drop(item) {
-      // istanbul ignore else
-      if (getOrder) {
-        getOrder(item?.id);
-      }
-    }
-  });
-  return /*#__PURE__*/React.createElement(StyledDraggableContainer, _extends({
-    ref: drop
-  }, rest, tagComponent("draggable-container", rest)), children);
-};
-export default DropTarget;
+import{jsx as e}from"react/jsx-runtime";import"react";import{useDrop as r}from"react-dnd";import{StyledDraggableContainer as t}from"../draggable-item/draggable-item.style.js";import n from"../../../__internal__/utils/helpers/tags/tags.js";function o(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}const c=c=>{var{children:i,getOrder:l}=c,a=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},c=Object.keys(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(n=0;n<c.length;n++)t=c[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}(c,["children","getOrder"]);const[,p]=r({accept:"draggableItem",drop(e){l&&l(null==e?void 0:e.id)}});return e(t,(b=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){o(e,r,t[r])}))}return e}({ref:p},a,n("draggable-container",a)),f=null!=(f={children:i})?f:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(f)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(f)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(f,e))})),b));var b,f};export{c as default};

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

@@ -1,79 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useState, useRef, useMemo } from "react";
-import { DndProvider } from "react-dnd";
-import { HTML5Backend } from "react-dnd-html5-backend";
-import invariant from "invariant";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import DraggableItem from "./draggable-item/draggable-item.component";
-import DropTarget from "./__internal__/drop-target.component";
-const DraggableContainer = ({
-  "data-element": dataElement,
-  "data-role": dataRole = "draggable-container",
-  children,
-  getOrder,
-  flexDirection = "row",
-  ...rest
-}) => {
-  const [draggableItems, setDraggableItems] = useState(React.Children.toArray(children));
-  const hasProperChildren = useMemo(() => {
-    const invalidChild = React.Children.toArray(children).find(child => ! /*#__PURE__*/React.isValidElement(child) || child.type.displayName !== "DraggableItem");
-    return !invalidChild;
-  }, [children]);
-
-  // `<DraggableItem />` is required to make `Draggable` work
-  !hasProperChildren ? process.env.NODE_ENV !== "production" ? invariant(false, `\`${DraggableContainer.displayName}\` only accepts children of type \`${DraggableItem.displayName}\`.`) : invariant(false) : void 0;
-  const isFirstRender = useRef(true);
-  useEffect(() => {
-    if (!isFirstRender.current) {
-      setDraggableItems(React.Children.toArray(children));
-    } else {
-      isFirstRender.current = false;
-    }
-  }, [children]);
-  const findItem = id => {
-    const draggableItem = draggableItems.filter(item => {
-      return /*#__PURE__*/React.isValidElement(item) && `${item.props.id}` === id;
-    })[0];
-    return {
-      draggableItem,
-      index: draggableItems.indexOf(draggableItem)
-    };
-  };
-  const moveItem = (id, atIndex) => {
-    const {
-      draggableItem,
-      index
-    } = findItem(id);
-
-    // istanbul ignore if
-    if (!draggableItem) return;
-    const copyOfDraggableItems = [...draggableItems];
-    copyOfDraggableItems.splice(index, 1);
-    copyOfDraggableItems.splice(atIndex, 0, draggableItem);
-    setDraggableItems(copyOfDraggableItems);
-  };
-  const getItemsId = item => {
-    if (!getOrder) {
-      return;
-    }
-    const draggableItemIds = draggableItems.map(draggableItem => draggableItem.props.id);
-    getOrder(draggableItemIds, item);
-  };
-  const marginProps = filterStyledSystemMarginProps(rest);
-  return /*#__PURE__*/React.createElement(DndProvider, {
-    backend: HTML5Backend
-  }, /*#__PURE__*/React.createElement(DropTarget, _extends({
-    "data-element": dataElement,
-    "data-role": dataRole,
-    getOrder: getItemsId
-  }, marginProps), draggableItems.map(item => {
-    return /*#__PURE__*/React.isValidElement(item) && /*#__PURE__*/React.cloneElement(item, {
-      id: `${item.props.id}`,
-      findItem,
-      moveItem,
-      flexDirection
-    }, [item.props.children]);
-  })));
-};
-DraggableContainer.displayName = "DraggableContainer";
-export default DraggableContainer;
+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};

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

@@ -1,75 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from "react";
-import { useDrop, useDrag } from "react-dnd";
-import tagComponent from "../../../__internal__/utils/helpers/tags";
-import { filterStyledSystemPaddingProps } from "../../../style/utils";
-import { StyledDraggableItem } from "./draggable-item.style";
-import Icon from "../../icon";
-const DraggableItem = ({
-  id,
-  findItem,
-  moveItem,
-  children,
-  py = 1,
-  flexDirection,
-  "data-element": dataElement,
-  "data-role": dataRole = "draggable-item",
-  ...rest
-}) => {
-  let originalIndex;
-  // istanbul ignore else
-  if (findItem) {
-    originalIndex = findItem(id)?.index;
-  }
-  const [{
-    isDragging
-  }, drag] = useDrag({
-    type: "draggableItem",
-    item: {
-      id,
-      originalIndex
-    },
-    collect: monitor => ({
-      isDragging: monitor.isDragging()
-    }),
-    end: (dropResult, monitor) => {
-      const {
-        id: droppedId,
-        originalIndex: oIndex
-      } = monitor.getItem();
-      const didDrop = monitor.didDrop();
-      if (!didDrop && moveItem) {
-        moveItem(droppedId, oIndex);
-      }
-    }
-  });
-  const [, drop] = useDrop({
-    accept: "draggableItem",
-    canDrop: () => false,
-    hover(item) {
-      if (item?.id !== id && findItem) {
-        const {
-          index: overIndex
-        } = findItem(id);
-        // istanbul ignore else
-        if (moveItem) {
-          moveItem(item?.id, overIndex);
-        }
-      }
-    }
-  });
-  const paddingProps = filterStyledSystemPaddingProps(rest);
-  return /*#__PURE__*/React.createElement(StyledDraggableItem, _extends({
-    isDragging: isDragging,
-    ref: node => drag(drop(node)),
-    py: py,
-    flexDirection: flexDirection
-  }, paddingProps, tagComponent("draggable-item", {
-    "data-element": dataElement,
-    "data-role": dataRole
-  })), children, /*#__PURE__*/React.createElement(Icon, {
-    type: "drag"
-  }));
-};
-DraggableItem.displayName = "DraggableItem";
-export default DraggableItem;
+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};

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

@@ -1,27 +1 @@
-import styled from "styled-components";
-import { padding, margin } from "styled-system";
-import { baseTheme } from "../../../style/themes";
-const StyledDraggableContainer = styled.div`
-  ${margin}
-`;
-const StyledDraggableItem = styled.div`
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--colorsUtilityMajor050);
-  ${padding}
-  cursor: move;
-  justify-content: space-between;
-  flex-direction: ${({
-  flexDirection
-}) => flexDirection};
-  opacity: ${({
-  isDragging
-}) => isDragging ? "0" : "1"};
-`;
-StyledDraggableContainer.defaultProps = {
-  theme: baseTheme
-};
-StyledDraggableItem.defaultProps = {
-  theme: baseTheme
-};
-export { StyledDraggableContainer, StyledDraggableItem };
+import e from"styled-components";import{margin as t,padding as o}from"styled-system";import"../../../style/themes/sage/index.js";import i from"../../../style/themes/base/index.js";import"../../../style/themes/none/index.js";const s=e.div.withConfig({displayName:"draggable-item.style__StyledDraggableContainer",componentId:"sc-b183d13b-0"})(["",""],t),r=e.div.withConfig({displayName:"draggable-item.style__StyledDraggableItem",componentId:"sc-b183d13b-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"));s.defaultProps={theme:i},r.defaultProps={theme:i};export{s as StyledDraggableContainer,r as StyledDraggableItem};

package/esm/components/draggable/index.js

@@ -1,2 +1 @@
-export { default as DraggableContainer } from "./draggable-container.component";
-export { default as DraggableItem } from "./draggable-item/draggable-item.component";
+export{default as DraggableContainer}from"./draggable-container.component.js";export{default as DraggableItem}from"./draggable-item/draggable-item.component.js";

package/esm/components/drawer/__internal__/drawer-sidebar.context.js

@@ -1,4 +1 @@
-import React from "react";
-export default /*#__PURE__*/React.createContext({
-  isInSidebar: false
-});
+import e from"react";var r=e.createContext({isInSidebar:!1});export{r as default};