UNPKG

@anoki/fse-ui

Version:

FSE UI components library

3 lines (2 loc) 2.06 kB
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./components/ui/FilterDropDownV2/FilterDropDownV2.css');const e=require("./index.cjs278.js"),x=require("./index.cjs280.js");;/* empty css */const v=require("./index.cjs19.js"),i=require("react"),j=require("./index.cjs445.js"),w=require("./index.cjs446.js"),E=require("./index.cjs82.js"),R=({items:p=[],className:m,label:f,value:l,setValue:a})=>{const[s,n]=i.useState(!1),u=i.useRef(null),c=i.useRef(null);return w.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,className:x.clsx(m,"ui-filter-dropdown-v2"),children:[e.jsxRuntimeExports.jsxs("button",{className:"ui-button-accordion-v2",type:"button","aria-expanded":s,"aria-haspopup":"listbox",onClick:()=>n(!s),children:[e.jsxRuntimeExports.jsx("h1",{className:"fw-semibold fs-custom text-primary",children:l||f}),e.jsxRuntimeExports.jsx(v.ArrowDown,{color:"primary",className:x.clsx("ui-arrow-v2",{"ui-expanded-v2":s})})]}),s&&e.jsxRuntimeExports.jsxs("div",{ref:c,className:"ui-wrap-list-item-filter-v2 position-relative pt-x12",children:[e.jsxRuntimeExports.jsx(j.ArrowList,{className:"ui-arrow-list-v2 position-absolute"}),e.jsxRuntimeExports.jsx("div",{className:"p-x24 h-full shadow",children:e.jsxRuntimeExports.jsx(E.Col,{gap:"x24",text:"primary",fs:"custom",fw:"regular",className:"ui-list-item-filter-v2 h-full overflow fw-regular",role:"listbox",children:p.map((t,o)=>e.jsxRuntimeExports.jsx("div",{role:"option","aria-selected":t.value===l,tabIndex:0,onClick:()=>{a(t.value),n(!1)},onKeyDown:r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),a(t.value),n(!1))},children:t.label},o))})})]})]})};exports.FilterDropDownV2=R; //# sourceMappingURL=index.cjs136.js.map