carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 3.04 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useContext as n,useState as o,useCallback as i,useMemo as l,useEffect as c}from"react";import{CSSTransition as s,TransitionGroup as u}from"react-transition-group";import{StyledGroupWrapper as p,StyledPicklistGroupUl as a,StyledPicklistGroup as f,StyledGroupButton as d}from"./picklist-group.style.js";import y from"../__internal__/duelling-picklist.context.js";import m from"../../../__internal__/utils/helpers/events/events.js";function b(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const g=r.forwardRef(((g,O)=>{var{title:h,children:j,type:v,onChange:x,index:P,listIndex:w,isLastGroup:k}=g,I=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(g,["title","children","type","onChange","index","listIndex","isLastGroup"]);const{setElementToFocus:E,elementToFocus:_}=n(y),[S,D]=o(!1),C=r.useRef(null),L=r.Children.toArray(j),G=i((()=>{x(),E(P,w)}),[P,w,x,E]),R=i((e=>{(m.isEnterKey(e)||m.isSpaceKey(e))&&(e.preventDefault(),x(),E(P,w))}),[P,w,x,E]),T=l((()=>Array.from({length:L.length},(()=>r.createRef()))),[L.length]),F=r.Children.map(j,((e,t)=>{if(!r.isValidElement(e))return e;const n={ref:T[t],index:t,listIndex:w,groupIndex:P,isLastGroup:k,isLastItem:t===L.length-1};return r.cloneElement(e,n)}));return c((()=>{var e;_.groupIndex===P&&_.listIndex===w&&void 0!==_.itemIndex&&(null===(e=T[_.itemIndex].current)||void 0===e||e.focus(),E())}),[_,P,k,w,T,E]),e(s,(K=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){b(e,t,r[t])}))}return e}({timeout:{appear:500,enter:300,exit:0},nodeRef:C,classNames:"picklist-group"},I,"add"===v?{enter:!1}:{}),A=null!=(A={children:e(p,{ref:C,highlighted:S,type:v,children:t(a,{children:[t(f,{onKeyDown:R,"data-element":"picklist-group",children:[h,e(d,{"data-role":"picklist-group-button",buttonType:"secondary",destructive:"remove"===v,iconType:v,onClick:G,onMouseEnter:()=>D(!0),onMouseLeave:()=>D(!1),onFocus:()=>D(!0),onBlur:()=>D(!1),ref:O})]}),e(u,{component:null,children:F})]})})})?A:{},Object.getOwnPropertyDescriptors?Object.defineProperties(K,Object.getOwnPropertyDescriptors(A)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(A)).forEach((function(e){Object.defineProperty(K,e,Object.getOwnPropertyDescriptor(A,e))})),K));var K,A}));g.displayName="PicklistGroup";export{g as PicklistGroup,g as default};