carbon-react/lib/components/duelling-picklist/picklist/picklist.component.js

A library of reusable React components for easily building user interfaces.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-transition-group"),l=require("./picklist.style.js"),i=require("../__internal__/duelling-picklist.context.js"),n=require("../../../__internal__/utils/helpers/events/events.js"),s=require("../picklist-group/picklist-group.component.js");function u(e){return e&&e.__esModule?e:{default:e}}var o=u(t);const a=({disabled:u,children:a,placeholder:d,index:c})=>{const{elementToFocus:p,setElementToFocus:f}=t.useContext(i.default),m=t.useMemo((()=>!o.default.Children.toArray(a).length),[a]),x=o.default.Children.toArray(a),h=t.useMemo((()=>Array.from({length:x.length},(()=>o.default.createRef()))),[x.length]),g=t.useCallback(((e,t)=>{var r;e.preventDefault(),null===(r=h[t].current)||void 0===r||r.focus()}),[h]),v=t.useCallback((e=>{n.default.isHomeKey(e)?g(e,0):n.default.isEndKey(e)&&g(e,h.length-1)}),[g,h]),y=x.map(((e,t)=>{if(!o.default.isValidElement(e))return e;const r={ref:h[t],disabled:u,index:t,listIndex:c,isLastGroup:e.type===s.PicklistGroup&&t===x.length-1};return o.default.cloneElement(e,r)}));return t.useEffect((()=>{if(void 0===p.groupIndex&&p.listIndex===c&&void 0!==p.itemIndex){var e;const t=null===(e=h[p.itemIndex])||void 0===e?void 0:e.current;t?(t.focus(),f()):f(0,0===c?1:0,p.groupIndex)}}),[p,c,h,f]),e.jsxs(l.StyledPicklist,{"data-element":"picklist","data-role":"picklist",scrollVariant:"light",onKeyDown:v,children:[m&&e.jsx(l.StyledEmptyContainer,{children:d}),e.jsx(r.TransitionGroup,{component:null,children:y})]})};a.displayName="Picklist",exports.Picklist=a,exports.default=a;