UNPKG

@anoki/fse-ui

Version:

FSE UI components library

3 lines (2 loc) 2.08 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components/ui/FilterDropDown/FilterDropDown.css');const e=require("./index.cjs278.js"),x=require("./index.cjs280.js");;/* empty css */const w=require("./index.cjs19.js"),i=require("react"),j=require("./index.cjs445.js"),E=require("./index.cjs446.js"),v=require("./index.cjs82.js"),h=({size:p,items:m=[],className:f,filter:a,setFilter:l})=>{const[s,n]=i.useState(!1),u=i.useRef(null),c=i.useRef(null);return E.useFocusTrap(c,s),i.useEffect(()=>{if(!s)return;const t=r=>{var d;(d=u.current)!=null&&d.contains(r.target)||n(!1)},o=r=>{r.key==="Escape"&&n(!1)};return document.addEventListener("mousedown",t),document.addEventListener("keydown",o),()=>{document.removeEventListener("mousedown",t),document.removeEventListener("keydown",o)}},[s]),e.jsxRuntimeExports.jsxs("div",{ref:u,style:p==="large"?{width:"668px"}:{width:"322px"},className:x.clsx(f,"ui-filter-dropdown"),children:[e.jsxRuntimeExports.jsxs("button",{className:"ui-button-accordion",type:"button","aria-expanded":s,"aria-haspopup":"listbox",onClick:()=>n(!s),children:[e.jsxRuntimeExports.jsx("h1",{className:"fw-semibold fs-custom text-primary",children:a}),e.jsxRuntimeExports.jsx(w.ArrowDown,{color:"primary",className:x.clsx("ui-arrow",{"ui-expanded":s})})]}),s&&e.jsxRuntimeExports.jsxs("div",{ref:c,className:"ui-wrap-list-item-filter position-relative pt-x12",children:[e.jsxRuntimeExports.jsx(j.ArrowList,{className:"ui-arrow-list position-absolute"}),e.jsxRuntimeExports.jsx("div",{className:"p-x24 h-full shadow",children:e.jsxRuntimeExports.jsx(v.Col,{gap:"x24",text:"primary",fs:"custom",fw:"regular",className:"ui-list-item-filter h-full overflow fw-regular",role:"listbox",children:m.map((t,o)=>e.jsxRuntimeExports.jsx("div",{role:"option","aria-selected":t.value===a,tabIndex:0,onClick:()=>{l(t.value),n(!1)},onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),l(t.value),n(!1))},children:t.label},o))})})]})]})};exports.FilterDropDown=h; //# sourceMappingURL=index.cjs135.js.map