carbon-react 154.3.2 → 154.3.3-beta.1

package/esm/components/drawer/drawer.component.js

@@ -1,159 +1 @@
-import React, { useState, useCallback, useRef, useEffect } from "react";
-import invariant from "invariant";
-import createGuid from "../../__internal__/utils/helpers/guid";
-import usePrevious from "../../hooks/__internal__/usePrevious";
-import Icon from "../icon";
-import { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledSidebarToggleButton, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle } from "./drawer.style";
-import StickyFooter from "../../__internal__/sticky-footer";
-import DrawerSidebarContext from "./__internal__/drawer-sidebar.context";
-export const Drawer = ({
-  "aria-label": ariaLabel,
-  sidebarAriaLabel,
-  "data-element": dataElement,
-  "data-role": dataRole = "drawer",
-  defaultExpanded = true,
-  expanded,
-  onChange,
-  children,
-  expandedWidth = "40%",
-  sidebar,
-  animationDuration = "400ms",
-  backgroundColor,
-  title,
-  footer,
-  showControls,
-  height = "100%",
-  stickyHeader,
-  stickyFooter
-}) => {
-  const drawerSidebarContentRef = useRef(null);
-  const scrollableContentRef = useRef(null);
-  const isControlled = useRef(expanded !== undefined);
-  const [isOpening, setIsOpening] = useState(false);
-  const [isClosing, setIsClosing] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(isControlled.current ? expanded : defaultExpanded);
-  const timer = useRef(null);
-  const getAnimationDuration = useCallback(() => {
-    if (animationDuration.indexOf("ms") !== -1) {
-      const animationTime = animationDuration.substring(0, animationDuration.length - 2);
-      return parseInt(animationTime);
-    }
-    if (animationDuration.indexOf(".") !== -1 || animationDuration.indexOf("s") !== -1) {
-      const animationTime = animationDuration.substring(0, animationDuration.length - 1);
-      return parseFloat(animationTime) * 1000;
-    }
-    return parseInt(animationDuration);
-  }, [animationDuration]);
-  const toggleAnimation = useCallback(() => {
-    const timeout = getAnimationDuration();
-    if (timer.current) {
-      clearTimeout(timer.current);
-    }
-    if (!isExpanded) {
-      setIsClosing(false);
-      setIsOpening(true);
-      timer.current = setTimeout(() => {
-        setIsOpening(false);
-      }, timeout);
-    } else {
-      setIsOpening(false);
-      setIsClosing(true);
-      timer.current = setTimeout(() => {
-        setIsClosing(false);
-      }, timeout);
-    }
-  }, [getAnimationDuration, isExpanded]);
-  const previousValue = usePrevious(expanded);
-  useEffect(() => {
-    const message = "Drawer should not switch from uncontrolled to controlled" + " (or vice versa). Decide between using a controlled or uncontrolled Drawer element" + " for the lifetime of the component";
-    !(isControlled.current === (expanded !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, message) : invariant(false) : void 0;
-    if (isControlled.current && previousValue !== expanded) {
-      setIsExpanded(expanded);
-      if (!showControls && ![expanded, previousValue].includes(undefined)) {
-        toggleAnimation();
-      }
-    }
-  }, [expanded, toggleAnimation, previousValue, showControls]);
-  useEffect(() => {
-    return function cleanup() {
-      if (timer.current) {
-        clearTimeout(timer.current);
-      }
-    };
-  }, []);
-  const toggleDrawer = useCallback(ev => {
-    setIsExpanded(!isExpanded);
-    onChange?.(ev, !isExpanded);
-    if (isExpanded && drawerSidebarContentRef.current) {
-      drawerSidebarContentRef.current.scrollTop = 0;
-    }
-    toggleAnimation();
-  }, [toggleAnimation, isExpanded, onChange]);
-  const guid = useRef(createGuid());
-  const sidebarId = `DrawerSidebar_${guid.current}`;
-  const titleId = `DrawerTitle_${guid.current}`;
-  const getClassNames = useCallback(() => {
-    const classes = [isExpanded ? "open" : "closed"];
-    if (isOpening) {
-      classes.push("opening");
-    }
-    if (isClosing) {
-      classes.push("closing");
-    }
-    return classes.join(" ");
-  }, [isExpanded, isOpening, isClosing]);
-  const getControls = () => {
-    if (showControls === undefined) return null;
-    return /*#__PURE__*/React.createElement(StyledSidebarToggleButton, {
-      "aria-label": "toggle sidebar",
-      "aria-expanded": isExpanded,
-      "aria-controls": sidebarId,
-      "data-element": "drawer-toggle",
-      onClick: toggleDrawer,
-      isExpanded: isExpanded,
-      animationDuration: animationDuration
-    }, /*#__PURE__*/React.createElement(Icon, {
-      type: "chevron_right"
-    }));
-  };
-  return /*#__PURE__*/React.createElement(StyledDrawerWrapper, {
-    "aria-label": ariaLabel,
-    "data-component": "drawer",
-    "data-element": dataElement,
-    "data-role": dataRole,
-    height: height
-  }, /*#__PURE__*/React.createElement(StyledDrawerContent, {
-    expandedWidth: expandedWidth,
-    animationDuration: animationDuration,
-    className: getClassNames(),
-    ref: drawerSidebarContentRef,
-    backgroundColor: backgroundColor,
-    "data-element": "drawer-content",
-    "data-role": "drawer-content",
-    "aria-label": sidebarAriaLabel,
-    "aria-labelledby": title ? titleId : undefined
-  }, stickyHeader && /*#__PURE__*/React.createElement(StyledSidebarHeader, {
-    "data-role": "drawer-sidebar-header",
-    isExpanded: isExpanded
-  }, title && /*#__PURE__*/React.createElement(StyledSidebarTitle, {
-    id: titleId
-  }, title), getControls()), !stickyHeader && /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(StyledSidebarTitle, {
-    id: titleId
-  }, title), getControls()), /*#__PURE__*/React.createElement(StyledDrawerSidebar, {
-    hasControls: !!showControls,
-    id: sidebarId,
-    isExpanded: isExpanded,
-    overflowY: isExpanded ? "auto" : undefined,
-    scrollVariant: "light",
-    ref: scrollableContentRef
-  }, /*#__PURE__*/React.createElement(DrawerSidebarContext.Provider, {
-    value: {
-      isInSidebar: true
-    }
-  }, sidebar), footer && /*#__PURE__*/React.createElement(StickyFooter, {
-    containerRef: scrollableContentRef,
-    disableSticky: !stickyFooter
-  }, footer))), /*#__PURE__*/React.createElement(StyledDrawerChildren, null, children));
-};
-export { DrawerSidebarContext };
-export default Drawer;
+import{jsxs as e,jsx as r,Fragment as n}from"react/jsx-runtime";import{useRef as t,useState as o,useCallback as i,useEffect as a}from"react";import l from"invariant";import d from"../../__internal__/utils/helpers/guid/index.js";import c from"../../hooks/__internal__/usePrevious/index.js";import s from"../icon/icon.component.js";import{StyledDrawerWrapper as u,StyledDrawerContent as m,StyledSidebarHeader as h,StyledSidebarTitle as p,StyledDrawerSidebar as f,StyledDrawerChildren as b,StyledSidebarToggleButton as g}from"./drawer.style.js";import _ from"../../__internal__/sticky-footer/sticky-footer.component.js";import w from"./__internal__/drawer-sidebar.context.js";const x=({"aria-label":x,sidebarAriaLabel:v,"data-element":k,"data-role":j="drawer",defaultExpanded:y=!0,expanded:D,onChange:C,children:T,expandedWidth:E="40%",sidebar:I,animationDuration:O="400ms",backgroundColor:S,title:F,footer:P,showControls:W,height:$="100%",stickyHeader:A,stickyFooter:H})=>{const L=t(null),N=t(null),R=t(void 0!==D),[V,Y]=o(!1),[q,z]=o(!1),[B,G]=o(R.current?D:y),J=t(null),K=i((()=>{if(-1!==O.indexOf("ms")){const e=O.substring(0,O.length-2);return parseInt(e)}if(-1!==O.indexOf(".")||-1!==O.indexOf("s")){const e=O.substring(0,O.length-1);return 1e3*parseFloat(e)}return parseInt(O)}),[O]),M=i((()=>{const e=K();J.current&&clearTimeout(J.current),B?(Y(!1),z(!0),J.current=setTimeout((()=>{z(!1)}),e)):(z(!1),Y(!0),J.current=setTimeout((()=>{Y(!1)}),e))}),[K,B]),Q=c(D);a((()=>{l(R.current===(void 0!==D),"Drawer should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled Drawer element for the lifetime of the component"),R.current&&Q!==D&&(G(D),W||[D,Q].includes(void 0)||M())}),[D,M,Q,W]),a((()=>function(){J.current&&clearTimeout(J.current)}),[]);const U=i((e=>{G(!B),null==C||C(e,!B),B&&L.current&&(L.current.scrollTop=0),M()}),[M,B,C]),X=t(d()),Z=`DrawerSidebar_${X.current}`,ee=`DrawerTitle_${X.current}`,re=i((()=>{const e=[B?"open":"closed"];return V&&e.push("opening"),q&&e.push("closing"),e.join(" ")}),[B,V,q]),ne=()=>void 0===W?null:r(g,{"aria-label":"toggle sidebar","aria-expanded":B,"aria-controls":Z,"data-element":"drawer-toggle",onClick:U,isExpanded:B,animationDuration:O,children:r(s,{type:"chevron_right"})});return e(u,{"aria-label":x,"data-component":"drawer","data-element":k,"data-role":j,height:$,children:[e(m,{expandedWidth:E,animationDuration:O,className:re(),ref:L,backgroundColor:S,"data-element":"drawer-content","data-role":"drawer-content","aria-label":v,"aria-labelledby":F?ee:void 0,children:[A&&e(h,{"data-role":"drawer-sidebar-header",isExpanded:B,children:[F&&r(p,{id:ee,children:F}),ne()]}),!A&&e(n,{children:[F&&r(p,{id:ee,children:F}),ne()]}),e(f,{hasControls:!!W,id:Z,isExpanded:B,overflowY:B?"auto":void 0,scrollVariant:"light",ref:N,children:[r(w.Provider,{value:{isInSidebar:!0},children:I}),P&&r(_,{containerRef:N,disableSticky:!H,children:P})]})]}),r(b,{children:T})]})};export{x as Drawer,w as DrawerSidebarContext,x as default};

package/esm/components/drawer/drawer.style.js

@@ -1,209 +1 @@
-import styled, { css, keyframes } from "styled-components";
-import StyledTabs from "../tabs/tabs.style";
-import Box from "../box";
-import StyledStickyFooter from "../../__internal__/sticky-footer/sticky-footer.style";
-import addFocusStyling from "../../style/utils/add-focus-styling";
-import baseTheme from "../../style/themes/base";
-const defaultExpandedWidth = "var(--sizing500)";
-const StyledSidebarHeader = styled.div`
-  ${({
-  isExpanded
-}) => css`
-    position: sticky;
-    top: 0;
-
-    ${isExpanded && css`
-      border-bottom: var(--sizing010) solid #ccd6db;
-    `}
-  `}
-`;
-const StyledSidebarTitle = styled.div`
-  white-space: nowrap;
-  padding: var(--spacing300) var(--spacing500);
-`;
-const StyledDrawerChildren = styled.div`
-  flex: 1;
-  margin-left: 1px;
-  overflow: auto;
-`;
-const StyledDrawerSidebar = styled(Box)`
-  ${({
-  hasControls,
-  isExpanded
-}) => css`
-    ${!isExpanded && css`
-      display: none;
-      opacity: 0;
-    `}
-
-    ${isExpanded && css`
-      display: flex;
-      flex-direction: column;
-      flex: 1 1 0%;
-    `}
-
-      ${hasControls && css`
-      ${StyledTabs} {
-        margin-top: 48px;
-        ${!isExpanded && css`
-          display: none;
-        `}
-      }
-    `}
-  `}
-
-  &::-webkit-scrollbar {
-    width: 12px;
-  }
-`;
-const sidebarVisible = () => keyframes`
-  0% {opacity: 0;}
-  50% {opacity: 0;}
-  100% {opacity: 1;}
-`;
-const sidebarHidden = () => keyframes`
-  0% {opacity: 1;}
-  100% {opacity: 0; display: none;}
-`;
-const drawerOpen = expandedWidth => keyframes`
-  0% {
-    width: ${defaultExpandedWidth};
-    overflow: hidden;
-    min-width: ${defaultExpandedWidth};
-  }
-  100% {
-    width: ${expandedWidth};
-    min-width: 52px;
-  }
-`;
-const drawerClose = expandedWidth => keyframes`
-  0% {width: ${expandedWidth};}
-  100% {width: ${defaultExpandedWidth};}
-`;
-const buttonOpen = () => keyframes`
-  0% {float: right;}
-  100% {float: right;}
-`;
-const buttonClose = () => keyframes`
-  0% {float: right;}
-  80% {float: right;}
-  100% {float: left;}
-`;
-const StyledDrawerContent = styled.aside`
-  display: flex;
-  flex-direction: column;
-  min-width: ${defaultExpandedWidth};
-  width: ${defaultExpandedWidth};
-  min-height: 40px;
-  height: auto;
-  position: relative;
-  overflow: auto;
-
-  ${({
-  backgroundColor
-}) => css`
-    background-color: ${backgroundColor || "var(--colorsUtilityMajor040)"};
-    border-right: 1px solid ${backgroundColor || "var(--colorsUtilityMajor075)"};
-  `};
-
-  &.open {
-    min-width: 52px;
-    width: ${({
-  expandedWidth
-}) => expandedWidth};
-
-    ${StyledDrawerSidebar}, ${StyledSidebarTitle} {
-      display: block;
-      opacity: 1;
-    }
-  }
-
-  &.opening {
-    animation: ${({
-  animationDuration,
-  expandedWidth
-}) => css`
-        ${drawerOpen(expandedWidth)} ${animationDuration}
-      `}
-      ease-in-out;
-
-    ${StyledDrawerSidebar}, ${StyledSidebarTitle} {
-      animation: ${sidebarVisible}
-        ${({
-  animationDuration
-}) => animationDuration} ease-in-out;
-    }
-  }
-
-  &.closed {
-    overflow: hidden;
-    ${StyledDrawerSidebar}, ${StyledSidebarTitle}, ${StyledStickyFooter} {
-      display: block;
-      opacity: 0;
-    }
-  }
-
-  &.closing {
-    animation: ${({
-  animationDuration,
-  expandedWidth
-}) => css`
-        ${drawerClose(expandedWidth)} ${animationDuration}
-      `}
-      ease-in-out;
-
-    ${StyledDrawerSidebar}, ${StyledSidebarTitle}, ${StyledStickyFooter} {
-      animation: ${sidebarHidden}
-        ${({
-  animationDuration
-}) => animationDuration} ease-in-out;
-    }
-  }
-`;
-const StyledSidebarToggleButton = styled.button.attrs({
-  type: "button"
-})`
-  ${({
-  animationDuration,
-  isExpanded
-}) => css`
-    position: absolute;
-    top: var(--spacing300);
-    right: 8px;
-    padding: var(--spacing100);
-    width: var(--spacing300);
-    height: var(--spacing300);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    transition: margin-right ${animationDuration} ease-in-out;
-    background-color: transparent;
-    border: none;
-    z-index: 1;
-    animation: ${buttonClose} ${animationDuration} ease-in-out;
-    border-radius: var(--borderRadius050);
-
-    &:focus {
-      ${addFocusStyling()}
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    ${isExpanded && css`
-      transform: scaleX(-1);
-      animation: ${buttonOpen} ${animationDuration} ease-in-out;
-    `}
-  `}
-`;
-StyledSidebarToggleButton.defaultProps = {
-  theme: baseTheme
-};
-const StyledDrawerWrapper = styled.div`
-  display: flex;
-  height: ${({
-  height
-}) => height};
-`;
-export { StyledSidebarHeader, StyledDrawerWrapper, StyledDrawerContent, StyledDrawerChildren, StyledDrawerSidebar, StyledSidebarTitle, StyledSidebarToggleButton };
+import i,{css as t,keyframes as a}from"styled-components";import o from"../tabs/tabs.style.js";import{Box as e}from"../box/box.component.js";import n from"../../__internal__/sticky-footer/sticky-footer.style.js";import r from"../../style/utils/add-focus-styling.js";import d from"../../style/themes/base/index.js";const s="var(--sizing500)",l=i.div.withConfig({displayName:"drawer.style__StyledSidebarHeader",componentId:"sc-63a459a1-0"})(["",""],(({isExpanded:i})=>t(["position:sticky;top:0;",""],i&&t(["border-bottom:var(--sizing010) solid #ccd6db;"])))),p=i.div.withConfig({displayName:"drawer.style__StyledSidebarTitle",componentId:"sc-63a459a1-1"})(["white-space:nowrap;padding:var(--spacing300) var(--spacing500);"]),c=i.div.withConfig({displayName:"drawer.style__StyledDrawerChildren",componentId:"sc-63a459a1-2"})(["flex:1;margin-left:1px;overflow:auto;"]),m=i(e).withConfig({displayName:"drawer.style__StyledDrawerSidebar",componentId:"sc-63a459a1-3"})([""," &::-webkit-scrollbar{width:12px;}"],(({hasControls:i,isExpanded:a})=>t([""," "," ",""],!a&&t(["display:none;opacity:0;"]),a&&t(["display:flex;flex-direction:column;flex:1 1 0%;"]),i&&t(["","{margin-top:48px;","}"],o,!a&&t(["display:none;"]))))),y=()=>a(["0%{float:right;}100%{float:right;}"]),h=()=>a(["0%{float:right;}80%{float:right;}100%{float:left;}"]),g=i.aside.withConfig({displayName:"drawer.style__StyledDrawerContent",componentId:"sc-63a459a1-4"})(["display:flex;flex-direction:column;min-width:",";width:",";min-height:40px;height:auto;position:relative;overflow:auto;",";&.open{min-width:52px;width:",";",",","{display:block;opacity:1;}}&.opening{animation:"," ease-in-out;",",","{animation:"," "," ease-in-out;}}&.closed{overflow:hidden;",",",",","{display:block;opacity:0;}}&.closing{animation:"," ease-in-out;",",",",","{animation:"," "," ease-in-out;}}"],s,s,(({backgroundColor:i})=>t(["background-color:",";border-right:1px solid ",";"],i||"var(--colorsUtilityMajor040)",i||"var(--colorsUtilityMajor075)")),(({expandedWidth:i})=>i),m,p,(({animationDuration:i,expandedWidth:o})=>t([""," ",""],(i=>a(["0%{width:",";overflow:hidden;min-width:",";}100%{width:",";min-width:52px;}"],s,s,i))(o),i)),m,p,(()=>a(["0%{opacity:0;}50%{opacity:0;}100%{opacity:1;}"])),(({animationDuration:i})=>i),m,p,n,(({animationDuration:i,expandedWidth:o})=>t([""," ",""],(i=>a(["0%{width:",";}100%{width:",";}"],i,s))(o),i)),m,p,n,(()=>a(["0%{opacity:1;}100%{opacity:0;display:none;}"])),(({animationDuration:i})=>i)),f=i.button.attrs({type:"button"}).withConfig({displayName:"drawer.style__StyledSidebarToggleButton",componentId:"sc-63a459a1-5"})(["",""],(({animationDuration:i,isExpanded:a})=>t(["position:absolute;top:var(--spacing300);right:8px;padding:var(--spacing100);width:var(--spacing300);height:var(--spacing300);display:flex;justify-content:center;align-items:center;transition:margin-right "," ease-in-out;background-color:transparent;border:none;z-index:1;animation:"," "," ease-in-out;border-radius:var(--borderRadius050);&:focus{","}&:hover{cursor:pointer;}",""],i,h,i,r(),a&&t(["transform:scaleX(-1);animation:"," "," ease-in-out;"],y,i))));f.defaultProps={theme:d};const w=i.div.withConfig({displayName:"drawer.style__StyledDrawerWrapper",componentId:"sc-63a459a1-6"})(["display:flex;height:",";"],(({height:i})=>i));export{c as StyledDrawerChildren,g as StyledDrawerContent,m as StyledDrawerSidebar,w as StyledDrawerWrapper,l as StyledSidebarHeader,p as StyledSidebarTitle,f as StyledSidebarToggleButton};

package/esm/components/drawer/index.js

@@ -1 +1 @@
-export { default } from "./drawer.component";
+export{Drawer as default}from"./drawer.component.js";

package/esm/components/duelling-picklist/__internal__/duelling-picklist.context.js

@@ -1,6 +1 @@
-import React from "react";
-const FocusContext = /*#__PURE__*/React.createContext({
-  setElementToFocus: /* istanbul ignore next */() => {},
-  elementToFocus: {}
-});
-export default FocusContext;
+import e from"react";const t=e.createContext({setElementToFocus:()=>{},elementToFocus:{}});export{t as default};

package/esm/components/duelling-picklist/duelling-picklist.component.js

@@ -1,58 +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, { useState } from "react";
-import tagComponent from "../../__internal__/utils/helpers/tags";
-import { filterStyledSystemMarginProps } from "../../style/utils";
-import { StyledDuellingPicklistOverlay, StyledDuellingPicklist, StyledLabelContainer, StyledLabel, StyledControlsContainer, StyledControl } from "./duelling-picklist.style";
-import { Picklist } from "./picklist/picklist.component";
-import FocusContext from "./__internal__/duelling-picklist.context";
-export const DuellingPicklist = ({
-  children,
-  disabled,
-  leftControls,
-  rightControls,
-  leftLabel,
-  rightLabel,
-  ...rest
-}) => {
-  const shouldDisplayLabels = leftLabel || rightLabel;
-  const shouldDisplayControls = leftControls || rightControls;
-  const [elementToFocus, setElementToFocus] = useState({});
-  let pickListIndex = 0;
-  const addElementToFocus = (itemIndex, listIndex, groupIndex) => {
-    setElementToFocus({
-      itemIndex,
-      listIndex,
-      groupIndex
-    });
-  };
-  const getIndex = () => {
-    const index = pickListIndex;
-    pickListIndex += 1;
-    return index;
-  };
-  const clonedChildren = React.Children.map(children, child => {
-    if (/*#__PURE__*/React.isValidElement(child) && child.type === Picklist) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        index: getIndex()
-      });
-    }
-    return child;
-  });
-  return /*#__PURE__*/React.createElement(StyledDuellingPicklistOverlay, _extends({
-    disabled: disabled
-  }, filterStyledSystemMarginProps(rest), tagComponent("duelling-picklist", rest)), shouldDisplayLabels && /*#__PURE__*/React.createElement(StyledLabelContainer, null, /*#__PURE__*/React.createElement(StyledLabel, {
-    "data-element": "picklist-left-label"
-  }, leftLabel), /*#__PURE__*/React.createElement(StyledLabel, {
-    "data-element": "picklist-right-label"
-  }, rightLabel)), shouldDisplayControls && /*#__PURE__*/React.createElement(StyledControlsContainer, null, /*#__PURE__*/React.createElement(StyledControl, {
-    "data-element": "picklist-left-control"
-  }, leftControls), /*#__PURE__*/React.createElement(StyledControl, {
-    "data-element": "picklist-right-control"
-  }, rightControls)), /*#__PURE__*/React.createElement(FocusContext.Provider, {
-    value: {
-      setElementToFocus: addElementToFocus,
-      elementToFocus
-    }
-  }, /*#__PURE__*/React.createElement(StyledDuellingPicklist, null, clonedChildren)));
-};
-export default DuellingPicklist;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useState as l}from"react";import n from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import i from"../../style/utils/filter-styled-system-margin-props.js";import{StyledDuellingPicklistOverlay as o,StyledLabelContainer as c,StyledLabel as s,StyledControlsContainer as p,StyledControl as a,StyledDuellingPicklist as f}from"./duelling-picklist.style.js";import{Picklist as d}from"./picklist/picklist.component.js";import u from"./__internal__/duelling-picklist.context.js";function m(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const b=b=>{var{children:y,disabled:O,leftControls:g,rightControls:h,leftLabel:j,rightLabel:P}=b,k=function(e,t){if(null==e)return{};var r,l,n=function(e,t){if(null==e)return{};var r,l,n={},i=Object.keys(e);for(l=0;l<i.length;l++)r=i[l],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(l=0;l<i.length;l++)r=i[l],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(b,["children","disabled","leftControls","rightControls","leftLabel","rightLabel"]);const v=j||P,w=g||h,[x,_]=l({});let E=0;const S=()=>{const e=E;return E+=1,e},C=r.Children.map(y,(e=>r.isValidElement(e)&&e.type===d?r.cloneElement(e,{index:S()}):e));return e(o,(D=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},l=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(l=l.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),l.forEach((function(t){m(e,t,r[t])}))}return e}({disabled:O},i(k),n("duelling-picklist",k)),I=null!=(I={children:[v&&e(c,{children:[t(s,{"data-element":"picklist-left-label",children:j}),t(s,{"data-element":"picklist-right-label",children:P})]}),w&&e(p,{children:[t(a,{"data-element":"picklist-left-control",children:g}),t(a,{"data-element":"picklist-right-control",children:h})]}),t(u.Provider,{value:{setElementToFocus:(e,t,r)=>{_({itemIndex:e,listIndex:t,groupIndex:r})},elementToFocus:x},children:t(f,{children:C})})]})?I:{},Object.getOwnPropertyDescriptors?Object.defineProperties(D,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(D,e,Object.getOwnPropertyDescriptor(I,e))})),D));var D,I};export{b as DuellingPicklist,b as default};

package/esm/components/duelling-picklist/duelling-picklist.style.js

@@ -1,58 +1 @@
-import styled, { css } from "styled-components";
-import { margin } from "styled-system";
-import { baseTheme } from "../../style/themes";
-const StyledDuellingPicklistOverlay = styled.div`
-  ${margin}
-
-  transition: opacity 0.3s;
-
-  ${({
-  disabled
-}) => disabled && css`
-      opacity: 0.2;
-      pointer-events: none;
-      user-select: none;
-    `}
-`;
-const StyledDuellingPicklist = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: stretch;
-  position: relative;
-`;
-const StyledLabelContainer = styled.div`
-  display: flex;
-  justify-content: space-around;
-  margin-top: 40px;
-  margin-bottom: 16px;
-`;
-const StyledLabel = styled.p`
-  font-weight: 500;
-  font-size: 12px;
-  letter-spacing: 1;
-  margin: 0;
-`;
-const StyledControlsContainer = styled.div`
-  display: flex;
-  justify-content: space-around;
-  margin-bottom: 16px;
-`;
-const StyledControl = styled.div`
-  width: 50%;
-  padding-right: 40px;
-
-  & ~ & {
-    padding-right: 0;
-    padding-left: 40px;
-  }
-`;
-const StyledPicklistPlaceholder = styled.div`
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-StyledDuellingPicklistOverlay.defaultProps = {
-  theme: baseTheme
-};
-export { StyledDuellingPicklist, StyledDuellingPicklistOverlay, StyledLabelContainer, StyledLabel, StyledControlsContainer, StyledControl, StyledPicklistPlaceholder };
+import e,{css as t}from"styled-components";import{margin as i}from"styled-system";import"../../style/themes/sage/index.js";import n from"../../style/themes/base/index.js";import"../../style/themes/none/index.js";const l=e.div.withConfig({displayName:"duelling-picklist.style__StyledDuellingPicklistOverlay",componentId:"sc-ca896caf-0"})([""," transition:opacity 0.3s;",""],i,(({disabled:e})=>e&&t(["opacity:0.2;pointer-events:none;user-select:none;"]))),s=e.div.withConfig({displayName:"duelling-picklist.style__StyledDuellingPicklist",componentId:"sc-ca896caf-1"})(["display:flex;justify-content:space-between;align-items:stretch;position:relative;"]),o=e.div.withConfig({displayName:"duelling-picklist.style__StyledLabelContainer",componentId:"sc-ca896caf-2"})(["display:flex;justify-content:space-around;margin-top:40px;margin-bottom:16px;"]),a=e.p.withConfig({displayName:"duelling-picklist.style__StyledLabel",componentId:"sc-ca896caf-3"})(["font-weight:500;font-size:12px;letter-spacing:1;margin:0;"]),d=e.div.withConfig({displayName:"duelling-picklist.style__StyledControlsContainer",componentId:"sc-ca896caf-4"})(["display:flex;justify-content:space-around;margin-bottom:16px;"]),c=e.div.withConfig({displayName:"duelling-picklist.style__StyledControl",componentId:"sc-ca896caf-5"})(["width:50%;padding-right:40px;& ~ &{padding-right:0;padding-left:40px;}"]),p=e.div.withConfig({displayName:"duelling-picklist.style__StyledPicklistPlaceholder",componentId:"sc-ca896caf-6"})(["height:100%;display:flex;justify-content:center;align-items:center;"]);l.defaultProps={theme:n};export{c as StyledControl,d as StyledControlsContainer,s as StyledDuellingPicklist,l as StyledDuellingPicklistOverlay,a as StyledLabel,o as StyledLabelContainer,p as StyledPicklistPlaceholder};

package/esm/components/duelling-picklist/index.js

@@ -1,6 +1 @@
-export { default as DuellingPicklist } from "./duelling-picklist.component";
-export { default as PicklistDivider } from "./picklist-divider/picklist-divider.component";
-export { default as PicklistItem } from "./picklist-item/picklist-item.component";
-export { default as Picklist } from "./picklist/picklist.component";
-export { default as PicklistPlaceholder } from "./picklist-placeholder/picklist-placeholder.component";
-export { default as PicklistGroup } from "./picklist-group/picklist-group.component";
+export{DuellingPicklist}from"./duelling-picklist.component.js";export{default as PicklistDivider}from"./picklist-divider/picklist-divider.component.js";export{PicklistItem}from"./picklist-item/picklist-item.component.js";export{Picklist}from"./picklist/picklist.component.js";export{PicklistPlaceholder}from"./picklist-placeholder/picklist-placeholder.component.js";export{PicklistGroup}from"./picklist-group/picklist-group.component.js";

package/esm/components/duelling-picklist/picklist/picklist.component.js

@@ -1,67 +1 @@
-import React, { useCallback, useContext, useEffect, useMemo } from "react";
-import { TransitionGroup } from "react-transition-group";
-import { StyledPicklist, StyledEmptyContainer } from "./picklist.style";
-import FocusContext from "../__internal__/duelling-picklist.context";
-import Events from "../../../__internal__/utils/helpers/events";
-import PicklistGroup from "../picklist-group/picklist-group.component";
-export const Picklist = ({
-  disabled,
-  children,
-  placeholder,
-  index
-}) => {
-  const {
-    elementToFocus,
-    setElementToFocus
-  } = useContext(FocusContext);
-  const isEmpty = useMemo(() => !React.Children.toArray(children).length, [children]);
-  const filteredChildren = React.Children.toArray(children);
-  const refs = useMemo(() => Array.from({
-    length: filteredChildren.length
-  }, () => /*#__PURE__*/React.createRef()), [filteredChildren.length]);
-  const focusItem = useCallback((ev, itemIndex) => {
-    ev.preventDefault();
-    refs[itemIndex].current?.focus();
-  }, [refs]);
-  const handleKeyDown = useCallback(ev => {
-    if (Events.isHomeKey(ev)) {
-      focusItem(ev, 0);
-    } else if (Events.isEndKey(ev)) {
-      focusItem(ev, refs.length - 1);
-    }
-  }, [focusItem, refs]);
-  const content = filteredChildren.map((child, childIndex) => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return child;
-    }
-    const props = {
-      ref: refs[childIndex],
-      disabled,
-      index: childIndex,
-      listIndex: index,
-      isLastGroup: child.type === PicklistGroup && childIndex === filteredChildren.length - 1
-    };
-    return /*#__PURE__*/React.cloneElement(child, props);
-  });
-  useEffect(() => {
-    if (elementToFocus.groupIndex === undefined && elementToFocus.listIndex === index && elementToFocus.itemIndex !== undefined) {
-      const itemToBeFocused = refs[elementToFocus.itemIndex]?.current;
-      if (itemToBeFocused) {
-        itemToBeFocused.focus();
-        setElementToFocus();
-      } else {
-        setElementToFocus(0, index === 0 ? 1 : 0, elementToFocus.groupIndex);
-      }
-    }
-  }, [elementToFocus, index, refs, setElementToFocus]);
-  return /*#__PURE__*/React.createElement(StyledPicklist, {
-    "data-element": "picklist",
-    "data-role": "picklist",
-    scrollVariant: "light",
-    onKeyDown: handleKeyDown
-  }, isEmpty && /*#__PURE__*/React.createElement(StyledEmptyContainer, null, placeholder), /*#__PURE__*/React.createElement(TransitionGroup, {
-    component: null
-  }, content));
-};
-Picklist.displayName = "Picklist";
-export default Picklist;
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useContext as n,useMemo as i,useCallback as l,useEffect as o}from"react";import{TransitionGroup as s}from"react-transition-group";import{StyledPicklist as c,StyledEmptyContainer as d}from"./picklist.style.js";import a from"../__internal__/duelling-picklist.context.js";import m from"../../../__internal__/utils/helpers/events/events.js";import{PicklistGroup as p}from"../picklist-group/picklist-group.component.js";const u=({disabled:u,children:f,placeholder:h,index:g})=>{const{elementToFocus:x,setElementToFocus:v}=n(a),y=i((()=>!r.Children.toArray(f).length),[f]),_=r.Children.toArray(f),k=i((()=>Array.from({length:_.length},(()=>r.createRef()))),[_.length]),I=l(((e,t)=>{var r;e.preventDefault(),null===(r=k[t].current)||void 0===r||r.focus()}),[k]),j=l((e=>{m.isHomeKey(e)?I(e,0):m.isEndKey(e)&&I(e,k.length-1)}),[I,k]),E=_.map(((e,t)=>{if(!r.isValidElement(e))return e;const n={ref:k[t],disabled:u,index:t,listIndex:g,isLastGroup:e.type===p&&t===_.length-1};return r.cloneElement(e,n)}));return o((()=>{if(void 0===x.groupIndex&&x.listIndex===g&&void 0!==x.itemIndex){var e;const t=null===(e=k[x.itemIndex])||void 0===e?void 0:e.current;t?(t.focus(),v()):v(0,0===g?1:0,x.groupIndex)}}),[x,g,k,v]),e(c,{"data-element":"picklist","data-role":"picklist",scrollVariant:"light",onKeyDown:j,children:[y&&t(d,{children:h}),t(s,{component:null,children:E})]})};u.displayName="Picklist";export{u as Picklist,u as default};

package/esm/components/duelling-picklist/picklist/picklist.style.js

@@ -1,53 +1 @@
-import styled from "styled-components";
-import StyledBox from "../../box/box.style";
-
-// TODO: remove polymorphism when we revisit as part of ticket FE-6177
-const StyledPicklist = styled(StyledBox).attrs({
-  as: "ul"
-})`
-  position: relative;
-  list-style: none;
-  margin: 0;
-  padding: 8px 8px 8px 8px;
-  width: 100%;
-  box-sizing: border-box;
-  overflow-y: auto;
-  height: 400px;
-
-  & + & {
-    margin-left: 32px;
-  }
-
-  .picklist-item-enter {
-    opacity: 0;
-    transform: translate(-16px);
-    transition: all 300ms ease-in;
-  }
-
-  .picklist-item-enter-active {
-    opacity: 1;
-    transform: translate(0px);
-    transition: all 300ms ease-in;
-  }
-
-  .picklist-group-enter {
-    opacity: 0;
-    transform: translate(-16px);
-    transition: all 300ms ease-in;
-  }
-
-  .picklist-group-enter-active {
-    opacity: 1;
-    transform: translate(0px);
-    transition: all 300ms ease-in;
-  }
-`;
-const StyledEmptyContainer = styled.li`
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 100%;
-`;
-export { StyledPicklist, StyledEmptyContainer };
+import t from"styled-components";import i from"../../box/box.style.js";const e=t(i).attrs({as:"ul"}).withConfig({displayName:"picklist.style__StyledPicklist",componentId:"sc-77f9122f-0"})(["position:relative;list-style:none;margin:0;padding:8px 8px 8px 8px;width:100%;box-sizing:border-box;overflow-y:auto;height:400px;& + &{margin-left:32px;}.picklist-item-enter{opacity:0;transform:translate(-16px);transition:all 300ms ease-in;}.picklist-item-enter-active{opacity:1;transform:translate(0px);transition:all 300ms ease-in;}.picklist-group-enter{opacity:0;transform:translate(-16px);transition:all 300ms ease-in;}.picklist-group-enter-active{opacity:1;transform:translate(0px);transition:all 300ms ease-in;}"]),o=t.li.withConfig({displayName:"picklist.style__StyledEmptyContainer",componentId:"sc-77f9122f-1"})(["position:absolute;top:0;bottom:0;left:0;right:0;height:100%;"]);export{o as StyledEmptyContainer,e as StyledPicklist};