@apipass/design-system 4.1.0 → 4.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/embedded-styles.js +1 -1
- package/dist/lib/lib.index.cjs +1 -1
- package/dist/lib/lib.index.js +696 -694
- package/dist/lib/lib.index.js.map +1 -1
- package/dist/lib/style.css +1 -1
- package/dist/lib/ui/components/DataTable/DataTable.cjs +1 -1
- package/dist/lib/ui/components/Widget/Widget.cjs +1 -1
- package/dist/lib/ui/components/WidgetGrid/WidgetGrid.cjs +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.cjs.map +1 -1
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js +66 -50
- package/dist/lib/ui/components/charts/TimeSeriesChart/time-series-option.js.map +1 -1
- package/dist/lib/ui/primitives/Button/Button.cjs +1 -1
- package/dist/lib/ui/primitives/CodeBlock/CodeBlock.cjs +1 -1
- package/dist/lib/ui/primitives/CodeEditor/CodeEditor.cjs +1 -1
- package/dist/lib/ui/primitives/ComboBox/ComboBox.cjs +1 -1
- package/dist/lib/ui/primitives/ComboBox/ComboBox.cjs.map +1 -1
- package/dist/lib/ui/primitives/ComboBox/ComboBox.js +60 -37
- package/dist/lib/ui/primitives/ComboBox/ComboBox.js.map +1 -1
- package/dist/lib/ui/primitives/DateRangePicker/DateRangePicker.cjs +1 -1
- package/dist/lib/ui/primitives/FileUpload/FileUpload.cjs +1 -1
- package/dist/lib/ui/primitives/FileUpload/FileUpload.js +10 -10
- package/dist/lib/ui/primitives/IconButton/IconButton.cjs +1 -1
- package/dist/lib/ui/primitives/Input/Input.js +2 -2
- package/dist/lib/ui/primitives/JsonViewer/JsonEditor.cjs +1 -1
- package/dist/lib/ui/primitives/JsonViewer/JsonViewer.cjs +1 -1
- package/dist/lib/ui/primitives/Link/Link.cjs +1 -1
- package/dist/lib/ui/primitives/Link/Link.js +3 -3
- package/dist/lib/ui/primitives/Menu/Menu.cjs +1 -1
- package/dist/lib/ui/primitives/Menu/Menu.cjs.map +1 -1
- package/dist/lib/ui/primitives/Menu/Menu.js +28 -28
- package/dist/lib/ui/primitives/Menu/Menu.js.map +1 -1
- package/dist/lib/ui/primitives/Search/Search.cjs +1 -1
- package/dist/lib/ui/primitives/Search/Search.js +8 -8
- package/dist/lib/ui/primitives/Select/MultiSelect.cjs +2 -0
- package/dist/lib/ui/primitives/Select/MultiSelect.cjs.map +1 -0
- package/dist/lib/ui/primitives/Select/MultiSelect.js +113 -0
- package/dist/lib/ui/primitives/Select/MultiSelect.js.map +1 -0
- package/dist/lib/ui/primitives/Select/Select.cjs +1 -1
- package/dist/lib/ui/primitives/Select/Select.cjs.map +1 -1
- package/dist/lib/ui/primitives/Select/Select.js +19 -12
- package/dist/lib/ui/primitives/Select/Select.js.map +1 -1
- package/dist/lib/vendor/@monaco-editor/react/dist/index.cjs +1 -1
- package/dist/lib/vendor/@monaco-editor/react/dist/index.cjs.map +1 -1
- package/dist/lib/vendor/@monaco-editor/react/dist/index.js +21 -21
- package/dist/lib/vendor/@react-aria/interactions/dist/useFocusable.cjs +1 -1
- package/dist/lib/vendor/@react-aria/interactions/dist/useFocusable.js +4 -4
- package/dist/lib/vendor/@react-aria/ssr/dist/SSRProvider.js.map +1 -1
- package/dist/lib/vendor/@react-stately/utils/dist/useControlledState.cjs +1 -1
- package/dist/lib/vendor/react-draggable/build/cjs/Draggable.cjs +2 -2
- package/dist/lib/vendor/react-draggable/build/cjs/Draggable.js +8 -8
- package/dist/lib/vendor/react-grid-layout/build/GridItem.cjs +1 -1
- package/dist/lib/vendor/react-grid-layout/build/ReactGridLayout.cjs +1 -1
- package/dist/lib/vendor/react-grid-layout/build/ReactGridLayout.js +6 -6
- package/dist/lib/vendor/react-grid-layout/build/ReactGridLayout.js.map +1 -1
- package/dist/lib/vendor/react-grid-layout/build/ReactGridLayoutPropTypes.js +2 -2
- package/dist/lib/vendor/react-grid-layout/build/ResponsiveReactGridLayout.cjs +1 -1
- package/dist/lib/vendor/react-grid-layout/build/ResponsiveReactGridLayout.js.map +1 -1
- package/dist/lib/vendor/react-grid-layout/build/components/WidthProvider.cjs +1 -1
- package/dist/lib/vendor/react-grid-layout/build/components/WidthProvider.js +6 -6
- package/dist/lib/vendor/react-grid-layout/build/components/WidthProvider.js.map +1 -1
- package/dist/lib/vendor/react-grid-layout/build/utils.cjs +1 -1
- package/dist/lib/vendor/react-grid-layout/build/utils.js +27 -27
- package/dist/lib/vendor/react-resizable/build/Resizable.cjs +1 -1
- package/dist/lib/vendor/react-resizable/build/Resizable.js +17 -17
- package/dist/lib/vendor/react-resizable/build/Resizable.js.map +1 -1
- package/dist/lib/vendor/react-resizable/build/ResizableBox.cjs +1 -1
- package/dist/lib/vendor/react-resizable/build/ResizableBox.js +5 -5
- package/dist/lib/vendor/react-resizable/build/ResizableBox.js.map +1 -1
- package/dist/lib/vendor/react-resizable/build/utils.cjs +1 -1
- package/dist/lib/vendor/react-resizable/build/utils.cjs.map +1 -1
- package/dist/lib/vendor/react-resizable/build/utils.js +2 -2
- package/dist/lib/vendor/react-toastify/dist/index.cjs +1 -1
- package/dist/lib/vendor/react-toastify/dist/index.js +10 -10
- package/dist/types/ui/primitives/Select/MultiSelect.d.ts +15 -0
- package/dist/types/ui/primitives/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("@internationalized/date"),ye=require("../../../vendor/clsx/dist/clsx.cjs"),h=require("react"),n=require("react-aria-components"),Le=require("./dateRangePresets.cjs");;/* empty css */const z=require("../../icons/IconCalendar.cjs"),Ie=require("../../icons/IconChevronDown.cjs"),G=require("../Text/Text.cjs"),Be=require("../../icons/IconCheck.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("@internationalized/date"),ye=require("../../../vendor/clsx/dist/clsx.cjs"),h=require("react"),n=require("react-aria-components"),Le=require("./dateRangePresets.cjs");;/* empty css */const z=require("../../icons/IconCalendar.cjs"),Ie=require("../../icons/IconChevronDown.cjs"),G=require("../Text/Text.cjs"),Be=require("../../icons/IconCheck.cjs"),Re=require("../../icons/IconChevronLeft.cjs"),we=require("../../icons/IconChevronRight.cjs"),Pe=require("../../hooks/useOverlayPortal.cjs"),V=require("../Fieldset/Fieldset.cjs"),ae=require("../ListBox/ListBox.cjs"),ne=require("../Button/Button.cjs"),H=()=>new d.Time(0,0,0),re=()=>new d.Time(23,59,59);function Fe({onAnchorChange:a}){const c=h.useContext(n.RangeCalendarStateContext),l=(c==null?void 0:c.anchorDate)??null,m=l==null?void 0:l.toString();return h.useEffect(()=>{a(l)},[m]),null}const C=a=>a&&"hour"in a?new d.Time(a.hour,a.minute,a.second):null,se=a=>!a||!a.start&&!a.end?{range:null,startTime:null,endTime:null,preset:a==null?void 0:a.preset}:{range:a.start&&a.end?{start:d.toCalendarDate(a.start),end:d.toCalendarDate(a.end)}:null,startTime:C(a.start),endTime:C(a.end),preset:a.preset},u=(a,c,l)=>{if(!a)return null;const m=d.toCalendarDate(a);return l||!c?m:d.toCalendarDateTime(m,c)},Ee=(a,c)=>{var l,m;return{preset:a.preset,start:u((l=a.range)==null?void 0:l.start,a.startTime,c),end:u((m=a.range)==null?void 0:m.end,a.endTime,c)}};function Oe({className:a,locale:c,label:l,"aria-label":m,description:K,errorMessage:q,labels:ie,intervals:y,presetKeys:L,presetLabels:I,hideTime:i=!1,minValue:B,maxValue:R,timezone:ce,isDisabled:le=!1,isRequired:oe=!1,value:S,defaultValue:de,onChange:w}){var $,ee;const ge=Pe.useOverlayPortalContainer(),{locale:ue}=n.useLocale(),P=c??ue??"pt-BR",F=ce??d.getLocalTimeZone(),{placeholder:M,relativeLabel:U,absoluteLabel:Z,startDateLabel:me,endDateLabel:pe,cancelLabel:E,applyLabel:O}=ie,x=h.useMemo(()=>{if(y)return y;if(L){if(!I)throw new Error("DateRangePicker: `presetLabels` is required when `presetKeys` is provided.");return Le.createDateRangePresets({locale:P,timezone:F,include:L,labels:I})}},[y,L,I,P,F]),[g,_]=h.useState(()=>se(S??de)),[p,j]=h.useState(g),[he,k]=h.useState(null),[xe,A]=h.useState(!1);h.useEffect(()=>{S!==void 0&&_(se(S))},[S]);const v=t=>({...t,preset:void 0}),je=t=>i?t:{...t,startTime:t.startTime??H(),endTime:t.endTime??re()},fe=t=>{t&&(j(g),k(null)),A(t)},Ce=t=>{k(null);const{start:r,end:o}=t.getValue();j({range:{start:d.toCalendarDate(r),end:d.toCalendarDate(o)},startTime:C(r),endTime:C(o),preset:t})},ke=t=>{k(t),t&&!i&&j(r=>v({...r,startTime:r.startTime??H()}))},De=t=>{k(null),j(r=>je(v({...r,range:t})))},Te=t=>{if(!t)return;k(null);const r=d.toCalendarDate(t),o=C(t);j(s=>{var b,te;const f=i?s.startTime:o??s.startTime??H(),D=u(r,f,i),T=u((b=s.range)==null?void 0:b.end,s.endTime,i),N=!!(D&&T&&T.compare(D)<0);return v({...s,range:{start:r,end:N||!((te=s.range)!=null&&te.end)?r:s.range.end},startTime:f,endTime:N?f:s.endTime})})},Ne=t=>{if(!t)return;const r=d.toCalendarDate(t),o=C(t);j(s=>{var N,b;const f=i?s.endTime:o??s.endTime??re(),D=u(r,f,i),T=u((N=s.range)==null?void 0:N.start,s.startTime,i);return T&&D&&D.compare(T)<0?s:v({...s,range:{start:((b=s.range)==null?void 0:b.start)??r,end:r},endTime:f})})},be=()=>{_(p),w==null||w(Ee(p,i)),A(!1)},Se=()=>A(!1),ve=!!(E||O),J=(()=>{if(g.preset)return g.preset.label;if(g.range){const t=s=>s.toDate(F).toLocaleString(P,{day:"2-digit",month:"2-digit",year:"numeric",...i?{}:{hour:"2-digit",minute:"2-digit",second:"2-digit"}}),r=u(g.range.start,g.startTime,i),o=u(g.range.end,g.endTime,i);if(r&&o)return`${t(r)} — ${t(o)}`}return null})(),qe=!!(x&&x.length>0),Q=i?"day":"second",W=u((($=p.range)==null?void 0:$.start)??he??void 0,p.startTime,i),X=u(((ee=p.range)==null?void 0:ee.end)??void 0,p.endTime,i),Y=e.jsxs(V.Field,{className:ye.clsx(a,"date-range-picker"),children:[l&&e.jsx(V.Label,{children:l}),e.jsxs(n.DialogTrigger,{isOpen:xe,onOpenChange:fe,children:[e.jsxs(n.Button,{className:"date-range-picker-trigger",isDisabled:le,"aria-label":l?void 0:m??M,"aria-required":oe||void 0,"data-invalid":q?!0:void 0,children:[g.preset?e.jsxs("span",{className:"date-range-picker-preset-badge",children:[e.jsx(z.IconCalendar,{"aria-hidden":"true"}),g.preset.label]}):e.jsx("span",{className:"date-range-picker-value","data-placeholder":J?void 0:!0,children:J??M}),e.jsx(Ie.IconChevronDown,{"aria-hidden":"true"})]}),e.jsx(n.Popover,{className:"date-range-picker-popover",placement:"bottom start",UNSTABLE_portalContainer:ge,children:e.jsxs(n.Dialog,{className:"date-range-picker-dialog",children:[e.jsxs("div",{className:"date-range-picker-body",children:[qe&&e.jsxs("div",{className:"date-range-picker-presets",children:[e.jsx(G.TextSmallStrong,{className:"date-range-picker-section-title",children:U}),e.jsx(ae.ListBox,{"aria-label":U,className:"date-range-picker-presets-list",selectionMode:"single",selectedKeys:p.preset?[p.preset.id]:[],items:x,onSelectionChange:t=>{const[r]=[...t],o=x==null?void 0:x.find(s=>s.id===r);o&&Ce(o)},children:t=>e.jsxs(ae.ListBoxItem,{id:t.id,textValue:t.label,className:"date-range-picker-preset-item",children:[e.jsx("span",{children:t.label}),e.jsx(Be.IconCheck,{"aria-hidden":"true",className:"date-range-picker-preset-check"})]})})]}),e.jsxs("div",{className:"date-range-picker-absolute",children:[e.jsx(G.TextSmallStrong,{className:"date-range-picker-section-title",children:Z}),e.jsxs("div",{className:"date-range-picker-fields",children:[e.jsxs(n.DateField,{className:"date-range-picker-datefield",granularity:Q,value:W,minValue:B,maxValue:X??R,onChange:Te,children:[e.jsx(n.Label,{className:"date-range-picker-field-label",children:me}),e.jsxs(n.Group,{className:"date-range-picker-input",children:[e.jsx(n.DateInput,{children:t=>e.jsx(n.DateSegment,{segment:t})}),e.jsx(z.IconCalendar,{"aria-hidden":"true"})]})]}),e.jsxs(n.DateField,{className:"date-range-picker-datefield",granularity:Q,value:X,minValue:W??B,maxValue:R,onChange:Ne,children:[e.jsx(n.Label,{className:"date-range-picker-field-label",children:pe}),e.jsxs(n.Group,{className:"date-range-picker-input",children:[e.jsx(n.DateInput,{children:t=>e.jsx(n.DateSegment,{segment:t})}),e.jsx(z.IconCalendar,{"aria-hidden":"true"})]})]})]}),e.jsxs(n.RangeCalendar,{className:"date-range-picker-calendar","aria-label":Z,value:p.range,minValue:B,maxValue:R,onChange:De,children:[e.jsx(Fe,{onAnchorChange:ke}),e.jsxs("header",{className:"date-range-picker-calendar-header",children:[e.jsx(n.Button,{slot:"previous",className:"date-range-picker-calendar-nav",children:e.jsx(Re.IconChevronLeft,{"aria-hidden":"true"})}),e.jsx(n.Heading,{className:"date-range-picker-calendar-heading"}),e.jsx(n.Button,{slot:"next",className:"date-range-picker-calendar-nav",children:e.jsx(we.IconChevronRight,{"aria-hidden":"true"})})]}),e.jsx(n.CalendarGrid,{className:"date-range-picker-calendar-grid",children:t=>e.jsx(n.CalendarCell,{date:t,className:"date-range-picker-calendar-cell"})})]})]})]}),ve&&e.jsxs("div",{className:"date-range-picker-actions",children:[E&&e.jsx(ne.Button,{variant:"neutral",size:"small",onPress:Se,children:E}),O&&e.jsx(ne.Button,{variant:"primary",size:"small",onPress:be,children:O})]})]})})]}),K&&e.jsx(V.Description,{children:K}),q&&e.jsx(G.Text,{className:"date-range-picker-error",elementType:"span",children:q})]});return c?e.jsx(n.I18nProvider,{locale:c,children:Y}):Y}exports.DateRangePicker=Oe;
|
|
2
2
|
//# sourceMappingURL=DateRangePicker.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("../../../vendor/clsx/dist/clsx.cjs"),p=require("react");;/* empty css */const y=require("../../icons/IconUploadCloud.cjs"),I=require("../Tag/Tag.cjs"),m=require("../Fieldset/Fieldset.cjs"),j=p.forwardRef(function({className:d,accept:o,multiple:a=!1,isDisabled:r=!1,isInvalid:t=!1,name:c,value:n=[],onChange:s,children:g
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("../../../vendor/clsx/dist/clsx.cjs"),p=require("react");;/* empty css */const y=require("../../icons/IconUploadCloud.cjs"),I=require("../Tag/Tag.cjs"),m=require("../Fieldset/Fieldset.cjs"),j=p.forwardRef(function({className:d,accept:o,multiple:a=!1,isDisabled:r=!1,isInvalid:t=!1,name:c,value:n=[],onChange:s,children:v,...g},F){const[q,u]=p.useState(!1);function N(i){const l=i.target.files;l&&l.length>0&&(s==null||s(a?[...n,...Array.from(l)]:Array.from(l))),i.target.value=""}function U(i){s==null||s(n.filter((l,h)=>h!==i))}return e.jsxs("div",{...g,className:x.clsx(d,"file-upload"),"data-disabled":r||void 0,"data-invalid":t||void 0,children:[e.jsxs("label",{className:"file-upload-dropzone","data-dragging":q||void 0,children:[e.jsx("input",{ref:F,type:"file",className:"file-upload-input",accept:o,multiple:a,disabled:r,name:c,onChange:N,onDragEnter:()=>u(!0),onDragLeave:()=>u(!1),onDrop:()=>u(!1)}),e.jsx(y.IconUploadCloud,{size:"24"}),e.jsx("span",{className:"file-upload-prompt",children:v})]}),n.length>0&&e.jsx("ul",{className:"file-upload-list",children:n.map((i,l)=>e.jsx("li",{children:e.jsx(I.Tag,{variant:"secondary",onRemove:r?void 0:()=>U(l),children:i.name})},`${i.name}-${l}`))})]})});function R({className:f,label:d,description:o,errorMessage:a,isInvalid:r,...t}){const c=r??!!a;return e.jsxs("div",{className:x.clsx(f,"field"),children:[d&&e.jsx(m.Label,{children:d}),e.jsx(j,{isInvalid:c,...t}),o&&e.jsx(m.Description,{children:o}),a&&e.jsx("span",{className:"error-message",children:a})]})}exports.FileUpload=j;exports.FileUploadField=R;
|
|
2
2
|
//# sourceMappingURL=FileUpload.cjs.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsxs as m, jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import { clsx as u } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
|
-
import I, { useState as
|
|
3
|
+
import I, { useState as R } from "react";
|
|
4
4
|
/* empty css */
|
|
5
|
-
import { IconUploadCloud as
|
|
5
|
+
import { IconUploadCloud as U } from "../../icons/IconUploadCloud.js";
|
|
6
6
|
import { Tag as x } from "../Tag/Tag.js";
|
|
7
|
-
import { Label as
|
|
8
|
-
const
|
|
7
|
+
import { Label as j, Description as z } from "../Fieldset/Fieldset.js";
|
|
8
|
+
const A = I.forwardRef(function({
|
|
9
9
|
className: d,
|
|
10
10
|
accept: t,
|
|
11
11
|
multiple: e = !1,
|
|
@@ -17,7 +17,7 @@ const z = I.forwardRef(function({
|
|
|
17
17
|
children: v,
|
|
18
18
|
...g
|
|
19
19
|
}, N) {
|
|
20
|
-
const [h, f] =
|
|
20
|
+
const [h, f] = R(!1);
|
|
21
21
|
function y(l) {
|
|
22
22
|
const i = l.target.files;
|
|
23
23
|
i && i.length > 0 && (r == null || r(e ? [...n, ...Array.from(i)] : Array.from(i))), l.target.value = "";
|
|
@@ -55,7 +55,7 @@ const z = I.forwardRef(function({
|
|
|
55
55
|
onDrop: () => f(!1)
|
|
56
56
|
}
|
|
57
57
|
),
|
|
58
|
-
/* @__PURE__ */ a(
|
|
58
|
+
/* @__PURE__ */ a(U, { size: "24" }),
|
|
59
59
|
/* @__PURE__ */ a("span", { className: "file-upload-prompt", children: v })
|
|
60
60
|
]
|
|
61
61
|
}
|
|
@@ -82,14 +82,14 @@ function S({
|
|
|
82
82
|
}) {
|
|
83
83
|
const c = o ?? !!e;
|
|
84
84
|
return /* @__PURE__ */ m("div", { className: u(p, "field"), children: [
|
|
85
|
-
d && /* @__PURE__ */ a(
|
|
86
|
-
/* @__PURE__ */ a(
|
|
87
|
-
t && /* @__PURE__ */ a(
|
|
85
|
+
d && /* @__PURE__ */ a(j, { children: d }),
|
|
86
|
+
/* @__PURE__ */ a(A, { isInvalid: c, ...s }),
|
|
87
|
+
t && /* @__PURE__ */ a(z, { children: t }),
|
|
88
88
|
e && /* @__PURE__ */ a("span", { className: "error-message", children: e })
|
|
89
89
|
] });
|
|
90
90
|
}
|
|
91
91
|
export {
|
|
92
|
-
|
|
92
|
+
A as FileUpload,
|
|
93
93
|
S as FileUploadField
|
|
94
94
|
};
|
|
95
95
|
//# sourceMappingURL=FileUpload.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("../../../vendor/clsx/dist/clsx.cjs"),e=require("react");;/* empty css */const c=require("../Button/Button.cjs"),a=e.forwardRef(function({className:t,...n},
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("../../../vendor/clsx/dist/clsx.cjs"),e=require("react");;/* empty css */const c=require("../Button/Button.cjs"),a=e.forwardRef(function({className:t,...n},r){const s=i.clsx(t,"icon-button");return o.jsx(c.Button,{...n,...r,className:s})}),B=e.forwardRef(function(t,n){return o.jsx(c.ButtonDanger,{...t,...n,className:"icon-button"})});exports.DestructiveIconButton=B;exports.IconButton=a;
|
|
2
2
|
//# sourceMappingURL=IconButton.cjs.map
|
|
@@ -4,7 +4,7 @@ import l from "react";
|
|
|
4
4
|
import { TextField as a, Input as f } from "react-aria-components";
|
|
5
5
|
/* empty css */
|
|
6
6
|
import { Label as u, Description as d, FieldError as x } from "../Fieldset/Fieldset.js";
|
|
7
|
-
function
|
|
7
|
+
function D({
|
|
8
8
|
className: s,
|
|
9
9
|
placeholder: o,
|
|
10
10
|
label: t,
|
|
@@ -26,6 +26,6 @@ const I = l.forwardRef(function({ className: o, ...t }, n) {
|
|
|
26
26
|
});
|
|
27
27
|
export {
|
|
28
28
|
I as Input,
|
|
29
|
-
|
|
29
|
+
D as InputField
|
|
30
30
|
};
|
|
31
31
|
//# sourceMappingURL=Input.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),r=require("react"),T=require("../../../vendor/clsx/dist/clsx.cjs"),d=require("@codemirror/state"),l=require("@codemirror/view"),R=require("@codemirror/language"),a=require("./json-code-mirror.cjs");;/* empty css */const L=require("../../icons/IconChevronDown.cjs"),z=require("../../icons/IconChevronRight.cjs"),V=require("../Button/Button.cjs")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),r=require("react"),T=require("../../../vendor/clsx/dist/clsx.cjs"),d=require("@codemirror/state"),l=require("@codemirror/view"),R=require("@codemirror/language"),a=require("./json-code-mirror.cjs");;/* empty css */const L=require("../../icons/IconChevronDown.cjs"),z=require("../../icons/IconChevronRight.cjs"),V=require("../Button/Button.cjs"),A=220;function v(t,o){o.length>0&&t.dispatch({effects:o.map(f=>R.foldEffect.of(f))})}function H({value:t,onChange:o,expandAllLabel:f,className:b,height:q,isDisabled:w=!1,isReadOnly:S=!1,"aria-label":y}){const E=r.useRef(null),s=r.useRef(null),h=r.useRef(new d.Compartment),u=r.useRef(o),x=r.useRef(t),[g,C]=r.useState(!1),F=a.toCssSize(q??A),i=!w&&!S;u.current=o,r.useEffect(()=>{if(!E.current)return;const e=l.EditorView.updateListener.of(m=>{var j;if(!m.docChanged)return;const p=m.state.doc.toString();x.current=p,(j=u.current)==null||j.call(u,p)}),n=new l.EditorView({parent:E.current,state:d.EditorState.create({doc:t,extensions:[h.current.of([l.EditorView.editable.of(i),d.EditorState.readOnly.of(!i)]),a.jsonEditorTheme,...a.jsonEditorExtensions,e]})});return s.current=n,v(n,a.computeFirstLevelFoldRanges(t)),()=>{n.destroy(),s.current=null}},[]),r.useEffect(()=>{const e=s.current;if(!e)return;const n=e.state.doc.toString();t!==n&&t!==x.current&&(e.dispatch({changes:{from:0,to:n.length,insert:t}}),x.current=t)},[t]),r.useEffect(()=>{const e=s.current;e&&e.dispatch({effects:h.current.reconfigure([l.EditorView.editable.of(i),d.EditorState.readOnly.of(!i)])})},[i]);const I=()=>{const e=s.current;e&&(g?v(e,a.computeFirstLevelFoldRanges(e.state.doc.toString())):R.unfoldAll(e),C(!g))};return c.jsxs("div",{className:T.clsx("json-viewer","json-viewer-editable",b),"data-disabled":w||void 0,children:[c.jsx(V.Button,{"aria-label":f,variant:"subtle",size:"small",className:"json-viewer-expand-all",onPress:I,children:g?c.jsx(L.IconChevronDown,{size:"14"}):c.jsx(z.IconChevronRight,{size:"14"})}),c.jsx("div",{ref:E,className:"json-viewer-content",style:{height:F},"aria-label":y,role:"textbox","aria-multiline":"true"})]})}exports.JsonEditor=H;
|
|
2
2
|
//# sourceMappingURL=JsonEditor.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),R=require("../../../vendor/clsx/dist/clsx.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),R=require("../../../vendor/clsx/dist/clsx.cjs"),x=require("@codemirror/state"),g=require("@codemirror/view"),w=require("@codemirror/language"),o=require("./json-code-mirror.cjs");;/* empty css */const b=require("../../icons/IconChevronDown.cjs"),y=require("../../icons/IconChevronRight.cjs"),j=require("../Button/Button.cjs"),S=220;function f(i,c){c.length>0&&i.dispatch({effects:c.map(r=>w.foldEffect.of(r))})}function z({value:i,expandAllLabel:c,actions:r,className:m,height:E}){const u=s.useRef(null),l=s.useRef(null),[d,h]=s.useState(!1),n=s.useMemo(()=>o.serializeJson(i),[i]),a=s.useMemo(()=>o.computeFirstLevelFoldRanges(n),[n]),p=o.toCssSize(E??S);s.useEffect(()=>{if(!u.current)return;const e=new g.EditorView({parent:u.current,state:x.EditorState.create({doc:n,extensions:[g.EditorView.editable.of(!1),x.EditorState.readOnly.of(!0),o.jsonEditorTheme,...o.jsonEditorExtensions]})});return l.current=e,f(e,a),()=>{e.destroy(),l.current=null}},[]),s.useEffect(()=>{const e=l.current;if(!e)return;const v=e.state.doc.toString();v!==n&&(e.dispatch({changes:{from:0,to:v.length,insert:n}}),f(e,a),h(!1))},[n,a]);const q=()=>{const e=l.current;e&&(d?f(e,a):w.unfoldAll(e),h(!d))};return t.jsxs("div",{className:R.clsx("json-viewer",m),children:[t.jsx(j.Button,{"aria-label":c,variant:"subtle",size:"small",className:"json-viewer-expand-all",onPress:q,children:d?t.jsx(b.IconChevronDown,{size:"14"}):t.jsx(y.IconChevronRight,{size:"14"})}),r&&r.length>0&&t.jsx("div",{className:"json-viewer-actions",children:r.map(e=>t.jsx(j.Button,{"aria-label":e.label,variant:"subtle",size:"small",className:"json-viewer-action",onPress:e.onPress,children:e.icon},e.key))}),t.jsx("div",{ref:u,className:"json-viewer-content",style:{height:p}})]})}exports.JsonViewer=z;
|
|
2
2
|
//# sourceMappingURL=JsonViewer.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("../../../vendor/clsx/dist/clsx.cjs"),c=require("react");;/* empty css */const i=c.forwardRef(function(e,s){const n=t.clsx("link",e.className);return r.jsx("a",{...e,ref:s,className:n})});exports.Link=i;
|
|
2
2
|
//# sourceMappingURL=Link.cjs.map
|
|
@@ -2,9 +2,9 @@ import { jsx as s } from "react/jsx-runtime";
|
|
|
2
2
|
import { clsx as t } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
3
|
import a from "react";
|
|
4
4
|
/* empty css */
|
|
5
|
-
const l = a.forwardRef(function(
|
|
6
|
-
const m = t("link",
|
|
7
|
-
return /* @__PURE__ */ s("a", { ...
|
|
5
|
+
const l = a.forwardRef(function(o, r) {
|
|
6
|
+
const m = t("link", o.className);
|
|
7
|
+
return /* @__PURE__ */ s("a", { ...o, ref: r, className: m });
|
|
8
8
|
});
|
|
9
9
|
export {
|
|
10
10
|
l as Link
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../vendor/clsx/dist/clsx.cjs"),c=require("react"),j=require("../PermissionGate/PermissionGate.cjs"),u=require("react-aria-components");;/* empty css */const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("../../../vendor/clsx/dist/clsx.cjs"),c=require("react"),j=require("../PermissionGate/PermissionGate.cjs"),u=require("react-aria-components");;/* empty css */const h=require("../../icons/IconChevronDown.cjs"),i=require("../Fieldset/Fieldset.cjs"),g=require("../IconButton/IconButton.cjs"),N=require("../Button/Button.cjs"),v=require("../../hooks/useOverlayPortal.cjs"),q=require("../Text/Text.cjs");let l=!1;function m(n){l||c.Children.forEach(n,e=>{if(c.isValidElement(e)){if(e.type===c.Fragment){m(e.props.children);return}e.type===j.PermissionGate&&(l=!0,console.error("[design-system] Menu: PermissionGate não pode envolver um MenuItem — o react-aria descarta esse item e os seguintes, e o menu abre vazio quando ele é o primeiro. Mova o gate para dentro do MenuItem, em volta do conteúdo do item."))}})}function d({className:n,...e}){return m(typeof e.children=="function"?null:e.children),r.jsx(u.Menu,{className:s.clsx(n,"menu"),...e})}function x({...n}){return r.jsx(u.MenuTrigger,{...n})}function p({label:n,children:e,icon:t,placement:o,variant:a,...f}){return r.jsxs(x,{children:[t?r.jsx(g.IconButton,{variant:a,"aria-label":n,children:t}):r.jsx(N.Button,{variant:a,children:n}),r.jsx(M,{placement:o,children:r.jsx(d,{...f,children:e})})]})}function M({UNSTABLE_portalContainer:n,...e}){const t=v.useOverlayPortalContainer();return r.jsx(u.Popover,{...e,UNSTABLE_portalContainer:n??t})}function I({className:n,...e}){const t=s.clsx(n,"menu-item"),o=e.textValue||(typeof e.children=="string"?e.children:void 0);return r.jsx(u.MenuItem,{...e,className:t,textValue:o,children:({hasSubmenu:a})=>r.jsxs(r.Fragment,{children:[e.children,a&&r.jsx(h.IconChevronDown,{})]})})}function y({className:n,...e}){const t=s.clsx(n,"menu-header");return r.jsx("div",{...e,className:t})}function S({className:n,...e}){const t=s.clsx(n,"menu-section");return r.jsx("div",{...e,className:t})}function b({className:n,...e}){const t=s.clsx(n,"menu-heading");return r.jsx(q.TextHeading,{...e,className:t})}function P({className:n,...e}){const t=s.clsx(n,"menu-separator");return r.jsx(u.Separator,{...e,className:t})}function B({className:n,...e}){const t=s.clsx(n,"menu-label");return r.jsx(i.Label,{...e,className:t})}function C({className:n,...e}){const t=s.clsx(n,"menu-description");return r.jsx(i.Description,{...e,className:t})}function T({children:n,className:e,...t}){const o=s.clsx(e,"menu-shortcut");return r.jsx(i.Keyboard,{...t,className:o,children:n})}exports.Menu=d;exports.MenuButton=p;exports.MenuDescription=C;exports.MenuHeader=y;exports.MenuHeading=b;exports.MenuItem=I;exports.MenuLabel=B;exports.MenuPopover=M;exports.MenuSection=S;exports.MenuSeparator=P;exports.MenuShortcut=T;exports.MenuTrigger=x;
|
|
2
2
|
//# sourceMappingURL=Menu.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.cjs","sources":["../../../../../src/ui/primitives/Menu/Menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n Button,\n ButtonProps,\n Description,\n DescriptionProps,\n IconButton,\n Keyboard,\n KeyboardProps,\n Label,\n LabelProps,\n TextHeading,\n type TextHeadingProps,\n} from \"primitives\";\nimport React from \"react\";\nimport { PermissionGate } from \"../PermissionGate/PermissionGate\";\nimport {\n Menu as RACMenu,\n MenuItem as RACMenuItem,\n MenuTrigger as RACMenuTrigger,\n Popover as RACPopover,\n Separator as RACSeparator,\n type MenuItemProps as RACMenuItemProps,\n type MenuProps as RACMenuProps,\n type MenuTriggerProps as RACMenuTriggerProps,\n type PopoverProps as RACPopoverProps,\n type SeparatorProps as RACSeparatorProps,\n} from \"react-aria-components\";\nimport \"./menu.css\";\n\n/**\n * Aviso de desenvolvimento: um `PermissionGate` EM VOLTA de um `MenuItem` quebra\n * o menu. O collection builder do react-aria-components só entende nós de\n * coleção (`MenuItem`, `MenuSeparator`, `MenuSection`); o `<span>` que o gate\n * renderiza no ramo negado entra na coleção com `node` nulo e arrebenta a lista\n * encadeada de chaves — o item envolvido e todos os seguintes desaparecem, e se\n * ele for o primeiro filho o menu abre VAZIO, levando embora também os itens\n * permitidos. Não há erro no console, e a forma errada passa despercebida em QA\n * feito com um usuário que tem todas as permissões, porque o ramo que envolve só\n * é renderizado quando a ação é negada.\n *\n * O gate deve ficar DENTRO do item, em volta do conteúdo — ali é seguro, porque\n * o conteúdo do item é renderizado no DOM real, fora da coleção. Mesmo padrão\n * das ações de linha do `DataTable`.\n *\n * O aviso é incondicional, e não atrás de `process.env.NODE_ENV`: o build da lib\n * (`vite.lib.config.ts`) substitui essa variável pelo literal `\"production\"`, o\n * que transformaria o guard em código morto justamente nos consumidores. Só\n * dispara uma vez por sessão, e só quando já existe um bug na árvore.\n */\nlet hasWarnedAboutGateAroundItem = false;\n\nfunction warnOnGateAroundItem(children: React.ReactNode) {\n if (hasWarnedAboutGateAroundItem) return;\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type === React.Fragment) {\n warnOnGateAroundItem(\n (child.props as { children?: React.ReactNode }).children,\n );\n return;\n }\n if (child.type === PermissionGate) {\n hasWarnedAboutGateAroundItem = true;\n // eslint-disable-next-line no-console\n console.error(\n \"[design-system] Menu: PermissionGate não pode envolver um MenuItem — \" +\n \"o react-aria descarta esse item e os seguintes, e o menu abre vazio \" +\n \"quando ele é o primeiro. Mova o gate para dentro do MenuItem, em \" +\n \"volta do conteúdo do item.\",\n );\n }\n });\n}\n\nexport type MenuProps<T> = RACMenuProps<T>;\nexport function Menu<T extends object>({ className, ...props }: MenuProps<T>) {\n // children pode ser uma função nas coleções dinâmicas do react-aria.\n warnOnGateAroundItem(\n typeof props.children === \"function\" ? null : props.children,\n );\n return <RACMenu className={clsx(className, \"menu\")} {...props} />;\n}\n\nexport type MenuTriggerProps = RACMenuTriggerProps;\nexport function MenuTrigger({ ...props }: MenuTriggerProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nexport interface MenuButtonProps<T>\n extends RACMenuProps<T>,\n Omit<RACMenuTriggerProps, \"children\"> {\n label: string;\n variant?: ButtonProps[\"variant\"];\n placement?: MenuPopoverProps[\"placement\"];\n icon?: React.ReactNode;\n}\nexport function MenuButton<T extends object>({\n label,\n children,\n icon,\n placement,\n variant,\n ...props\n}: MenuButtonProps<T>) {\n return (\n <MenuTrigger>\n {icon ? (\n <IconButton variant={variant} aria-label={label}>\n {icon}\n </IconButton>\n ) : (\n <Button variant={variant}>{label}</Button>\n )}\n <MenuPopover placement={placement}>\n <Menu {...props}>{children}</Menu>\n </MenuPopover>\n </MenuTrigger>\n );\n}\n\nexport type MenuPopoverProps = RACPopoverProps;\nexport function MenuPopover({\n UNSTABLE_portalContainer,\n ...props\n}: MenuPopoverProps) {\n // Sem container explícito o menu faz portal no document.body — fora da shadow\n // root do MFE, sem CSS. Ver ui/hooks/useOverlayPortal.\n const portalContainer = useOverlayPortalContainer();\n return (\n <RACPopover\n {...props}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer ?? portalContainer}\n />\n );\n}\n\nexport type MenuItemProps = RACMenuItemProps;\nexport function MenuItem({ className, ...props }: MenuItemProps) {\n const classNames = clsx(className, \"menu-item\");\n const textValue =\n props.textValue ||\n (typeof props.children === \"string\" ? props.children : undefined);\n return (\n <RACMenuItem {...props} className={classNames} textValue={textValue}>\n {({ hasSubmenu }) => (\n <>\n {props.children}\n {hasSubmenu && <IconChevronDown />}\n </>\n )}\n </RACMenuItem>\n );\n}\n\nexport type MenuHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuHeader({ className, ...props }: MenuHeaderProps) {\n const classNames = clsx(className, \"menu-header\");\n return <div {...props} className={classNames} />;\n}\n\nexport type MenuSectionProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuSection({ className, ...props }: MenuSectionProps) {\n const classNames = clsx(className, \"menu-section\");\n return <div {...props} className={classNames} />;\n}\n\nexport type MenuHeadingProps = TextHeadingProps;\nexport function MenuHeading({ className, ...props }: MenuHeadingProps) {\n const classNames = clsx(className, \"menu-heading\");\n return <TextHeading {...props} className={classNames} />;\n}\n\nexport type MenuSeparatorProps = RACSeparatorProps;\nexport function MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n const classNames = clsx(className, \"menu-separator\");\n return <RACSeparator {...props} className={classNames} />;\n}\n\nexport type MenuLabelProps = LabelProps;\nexport function MenuLabel({ className, ...props }: MenuLabelProps) {\n const classNames = clsx(className, \"menu-label\");\n return <Label {...props} className={classNames} />;\n}\n\nexport type MenuDescriptionProps = DescriptionProps;\nexport function MenuDescription({ className, ...props }: MenuDescriptionProps) {\n const classNames = clsx(className, \"menu-description\");\n return <Description {...props} className={classNames} />;\n}\n\nexport type MenuShortcutProps = KeyboardProps;\nexport function MenuShortcut({\n children,\n className,\n ...props\n}: MenuShortcutProps) {\n const classNames = clsx(className, \"menu-shortcut\");\n return (\n <Keyboard {...props} className={classNames}>\n {children}\n </Keyboard>\n );\n}\n"],"names":["hasWarnedAboutGateAroundItem","warnOnGateAroundItem","children","React","child","PermissionGate","Menu","className","props","jsx","RACMenu","clsx","MenuTrigger","RACMenuTrigger","MenuButton","label","icon","placement","variant","IconButton","Button","MenuPopover","UNSTABLE_portalContainer","portalContainer","useOverlayPortalContainer","RACPopover","MenuItem","classNames","textValue","RACMenuItem","hasSubmenu","jsxs","Fragment","IconChevronDown","MenuHeader","MenuSection","MenuHeading","TextHeading","MenuSeparator","RACSeparator","MenuLabel","Label","MenuDescription","Description","MenuShortcut","Keyboard"],"mappings":"whBAoDA,IAAIA,EAA+B,GAEnC,SAASC,EAAqBC,EAA2B,CACnDF,GACJG,EAAM,SAAS,QAAQD,EAAWE,GAAU,CAC1C,GAAKD,EAAM,eAAeC,CAAK,EAC/B,IAAIA,EAAM,OAASD,EAAM,SAAU,CACjCF,EACGG,EAAM,MAAyC,QAAA,EAElD,MACF,CACIA,EAAM,OAASC,mBACjBL,EAA+B,GAE/B,QAAQ,MACN,sOAAA,GAMN,CAAC,CACH,CAGO,SAASM,EAAuB,CAAE,UAAAC,EAAW,GAAGC,GAAuB,CAE5E,OAAAP,EACE,OAAOO,EAAM,UAAa,WAAa,KAAOA,EAAM,QAAA,EAE/CC,EAAAA,IAACC,QAAQ,UAAWC,EAAAA,KAAKJ,EAAW,MAAM,EAAI,GAAGC,EAAO,CACjE,CAGO,SAASI,EAAY,CAAE,GAAGJ,GAA2B,CAC1D,OAAOC,MAACI,EAAAA,YAAA,CAAgB,GAAGL,CAAA,CAAO,CACpC,CAUO,SAASM,EAA6B,CAC3C,MAAAC,EACA,SAAAb,EACA,KAAAc,EACA,UAAAC,EACA,QAAAC,EACA,GAAGV,CACL,EAAuB,CACrB,cACGI,EAAA,CACE,SAAA,CAAAI,EACCP,EAAAA,IAACU,EAAAA,WAAA,CAAW,QAAAD,EAAkB,aAAYH,EACvC,WACH,EAEAN,EAAAA,IAACW,EAAAA,OAAA,CAAO,QAAAF,EAAmB,SAAAH,EAAM,EAEnCN,EAAAA,IAACY,GAAY,UAAAJ,EACX,SAAAR,EAAAA,IAACH,GAAM,GAAGE,EAAQ,SAAAN,EAAS,CAAA,CAC7B,CAAA,EACF,CAEJ,CAGO,SAASmB,EAAY,CAC1B,yBAAAC,EACA,GAAGd,CACL,EAAqB,CAGnB,MAAMe,EAAkBC,EAAAA,0BAAA,EACxB,OACEf,EAAAA,IAACgB,EAAAA,QAAA,CACE,GAAGjB,EACJ,yBAA0Bc,GAA4BC,CAAA,CAAA,CAG5D,CAGO,SAASG,EAAS,CAAE,UAAAnB,EAAW,GAAGC,GAAwB,CAC/D,MAAMmB,EAAahB,EAAAA,KAAKJ,EAAW,WAAW,EACxCqB,EACJpB,EAAM,YACL,OAAOA,EAAM,UAAa,SAAWA,EAAM,SAAW,QACzD,OACEC,EAAAA,IAACoB,EAAAA,SAAA,CAAa,GAAGrB,EAAO,UAAWmB,EAAY,UAAAC,EAC5C,SAAA,CAAC,CAAE,WAAAE,CAAA,IACFC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAxB,EAAM,SACNsB,SAAeG,EAAAA,gBAAA,CAAA,CAAgB,CAAA,CAAA,CAClC,CAAA,CAEJ,CAEJ,CAGO,SAASC,EAAW,CAAE,UAAA3B,EAAW,GAAGC,GAA0B,CACnE,MAAMmB,EAAahB,EAAAA,KAAKJ,EAAW,aAAa,EAChD,OAAOE,EAAAA,IAAC,MAAA,CAAK,GAAGD,EAAO,UAAWmB,EAAY,CAChD,CAGO,SAASQ,EAAY,CAAE,UAAA5B,EAAW,GAAGC,GAA2B,CACrE,MAAMmB,EAAahB,EAAAA,KAAKJ,EAAW,cAAc,EACjD,OAAOE,EAAAA,IAAC,MAAA,CAAK,GAAGD,EAAO,UAAWmB,EAAY,CAChD,CAGO,SAASS,EAAY,CAAE,UAAA7B,EAAW,GAAGC,GAA2B,CACrE,MAAMmB,EAAahB,EAAAA,KAAKJ,EAAW,cAAc,EACjD,OAAOE,EAAAA,IAAC4B,EAAAA,YAAA,CAAa,GAAG7B,EAAO,UAAWmB,EAAY,CACxD,CAGO,SAASW,EAAc,CAAE,UAAA/B,EAAW,GAAGC,GAA6B,CACzE,MAAMmB,EAAahB,EAAAA,KAAKJ,EAAW,gBAAgB,EACnD,OAAOE,EAAAA,IAAC8B,EAAAA,UAAA,CAAc,GAAG/B,EAAO,UAAWmB,EAAY,CACzD,CAGO,SAASa,EAAU,CAAE,UAAAjC,EAAW,GAAGC,GAAyB,CACjE,MAAMmB,EAAahB,EAAAA,KAAKJ,EAAW,YAAY,EAC/C,OAAOE,EAAAA,IAACgC,EAAAA,MAAA,CAAO,GAAGjC,EAAO,UAAWmB,EAAY,CAClD,CAGO,SAASe,EAAgB,CAAE,UAAAnC,EAAW,GAAGC,GAA+B,CAC7E,MAAMmB,EAAahB,EAAAA,KAAKJ,EAAW,kBAAkB,EACrD,OAAOE,EAAAA,IAACkC,EAAAA,YAAA,CAAa,GAAGnC,EAAO,UAAWmB,EAAY,CACxD,CAGO,SAASiB,EAAa,CAC3B,SAAA1C,EACA,UAAAK,EACA,GAAGC,CACL,EAAsB,CACpB,MAAMmB,EAAahB,EAAAA,KAAKJ,EAAW,eAAe,EAClD,aACGsC,EAAAA,SAAA,CAAU,GAAGrC,EAAO,UAAWmB,EAC7B,SAAAzB,EACH,CAEJ"}
|
|
1
|
+
{"version":3,"file":"Menu.cjs","sources":["../../../../../src/ui/primitives/Menu/Menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n Button,\n ButtonProps,\n Description,\n DescriptionProps,\n IconButton,\n Keyboard,\n KeyboardProps,\n Label,\n LabelProps,\n TextHeading,\n type TextHeadingProps,\n} from \"primitives\";\nimport React from \"react\";\nimport { PermissionGate } from \"../PermissionGate/PermissionGate\";\nimport {\n Menu as RACMenu,\n MenuItem as RACMenuItem,\n MenuTrigger as RACMenuTrigger,\n Popover as RACPopover,\n Separator as RACSeparator,\n type MenuItemProps as RACMenuItemProps,\n type MenuProps as RACMenuProps,\n type MenuTriggerProps as RACMenuTriggerProps,\n type PopoverProps as RACPopoverProps,\n type SeparatorProps as RACSeparatorProps,\n} from \"react-aria-components\";\nimport \"./menu.css\";\n\n/**\n * Aviso de desenvolvimento: um `PermissionGate` EM VOLTA de um `MenuItem` quebra\n * o menu. O collection builder do react-aria-components só entende nós de\n * coleção (`MenuItem`, `MenuSeparator`, `MenuSection`); o `<span>` que o gate\n * renderiza no ramo negado entra na coleção com `node` nulo e arrebenta a lista\n * encadeada de chaves — o item envolvido e todos os seguintes desaparecem, e se\n * ele for o primeiro filho o menu abre VAZIO, levando embora também os itens\n * permitidos. Não há erro no console, e a forma errada passa despercebida em QA\n * feito com um usuário que tem todas as permissões, porque o ramo que envolve só\n * é renderizado quando a ação é negada.\n *\n * O gate deve ficar DENTRO do item, em volta do conteúdo — ali é seguro, porque\n * o conteúdo do item é renderizado no DOM real, fora da coleção. Mesmo padrão\n * das ações de linha do `DataTable`.\n *\n * O aviso é incondicional, e não atrás de `process.env.NODE_ENV`: o build da lib\n * (`vite.lib.config.ts`) substitui essa variável pelo literal `\"production\"`, o\n * que transformaria o guard em código morto justamente nos consumidores. Só\n * dispara uma vez por sessão, e só quando já existe um bug na árvore.\n */\nlet hasWarnedAboutGateAroundItem = false;\n\nfunction warnOnGateAroundItem(children: React.ReactNode) {\n if (hasWarnedAboutGateAroundItem) return;\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type === React.Fragment) {\n warnOnGateAroundItem(\n (child.props as { children?: React.ReactNode }).children,\n );\n return;\n }\n if (child.type === PermissionGate) {\n hasWarnedAboutGateAroundItem = true;\n console.error(\n \"[design-system] Menu: PermissionGate não pode envolver um MenuItem — \" +\n \"o react-aria descarta esse item e os seguintes, e o menu abre vazio \" +\n \"quando ele é o primeiro. Mova o gate para dentro do MenuItem, em \" +\n \"volta do conteúdo do item.\",\n );\n }\n });\n}\n\nexport type MenuProps<T> = RACMenuProps<T>;\nexport function Menu<T extends object>({ className, ...props }: MenuProps<T>) {\n // children pode ser uma função nas coleções dinâmicas do react-aria.\n warnOnGateAroundItem(\n typeof props.children === \"function\" ? null : props.children,\n );\n return <RACMenu className={clsx(className, \"menu\")} {...props} />;\n}\n\nexport type MenuTriggerProps = RACMenuTriggerProps;\nexport function MenuTrigger({ ...props }: MenuTriggerProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nexport interface MenuButtonProps<T>\n extends RACMenuProps<T>,\n Omit<RACMenuTriggerProps, \"children\"> {\n label: string;\n variant?: ButtonProps[\"variant\"];\n placement?: MenuPopoverProps[\"placement\"];\n icon?: React.ReactNode;\n}\nexport function MenuButton<T extends object>({\n label,\n children,\n icon,\n placement,\n variant,\n ...props\n}: MenuButtonProps<T>) {\n return (\n <MenuTrigger>\n {icon ? (\n <IconButton variant={variant} aria-label={label}>\n {icon}\n </IconButton>\n ) : (\n <Button variant={variant}>{label}</Button>\n )}\n <MenuPopover placement={placement}>\n <Menu {...props}>{children}</Menu>\n </MenuPopover>\n </MenuTrigger>\n );\n}\n\nexport type MenuPopoverProps = RACPopoverProps;\nexport function MenuPopover({\n UNSTABLE_portalContainer,\n ...props\n}: MenuPopoverProps) {\n // Sem container explícito o menu faz portal no document.body — fora da shadow\n // root do MFE, sem CSS. Ver ui/hooks/useOverlayPortal.\n const portalContainer = useOverlayPortalContainer();\n return (\n <RACPopover\n {...props}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer ?? portalContainer}\n />\n );\n}\n\nexport type MenuItemProps = RACMenuItemProps;\nexport function MenuItem({ className, ...props }: MenuItemProps) {\n const classNames = clsx(className, \"menu-item\");\n const textValue =\n props.textValue ||\n (typeof props.children === \"string\" ? props.children : undefined);\n return (\n <RACMenuItem {...props} className={classNames} textValue={textValue}>\n {({ hasSubmenu }) => (\n <>\n {props.children}\n {hasSubmenu && <IconChevronDown />}\n </>\n )}\n </RACMenuItem>\n );\n}\n\nexport type MenuHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuHeader({ className, ...props }: MenuHeaderProps) {\n const classNames = clsx(className, \"menu-header\");\n return <div {...props} className={classNames} />;\n}\n\nexport type MenuSectionProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuSection({ className, ...props }: MenuSectionProps) {\n const classNames = clsx(className, \"menu-section\");\n return <div {...props} className={classNames} />;\n}\n\nexport type MenuHeadingProps = TextHeadingProps;\nexport function MenuHeading({ className, ...props }: MenuHeadingProps) {\n const classNames = clsx(className, \"menu-heading\");\n return <TextHeading {...props} className={classNames} />;\n}\n\nexport type MenuSeparatorProps = RACSeparatorProps;\nexport function MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n const classNames = clsx(className, \"menu-separator\");\n return <RACSeparator {...props} className={classNames} />;\n}\n\nexport type MenuLabelProps = LabelProps;\nexport function MenuLabel({ className, ...props }: MenuLabelProps) {\n const classNames = clsx(className, \"menu-label\");\n return <Label {...props} className={classNames} />;\n}\n\nexport type MenuDescriptionProps = DescriptionProps;\nexport function MenuDescription({ className, ...props }: MenuDescriptionProps) {\n const classNames = clsx(className, \"menu-description\");\n return <Description {...props} className={classNames} />;\n}\n\nexport type MenuShortcutProps = KeyboardProps;\nexport function MenuShortcut({\n children,\n className,\n ...props\n}: MenuShortcutProps) {\n const classNames = clsx(className, \"menu-shortcut\");\n return (\n <Keyboard {...props} className={classNames}>\n {children}\n </Keyboard>\n );\n}\n"],"names":["hasWarnedAboutGateAroundItem","warnOnGateAroundItem","children","React","child","PermissionGate","Menu","className","props","jsx","RACMenu","clsx","MenuTrigger","RACMenuTrigger","MenuButton","label","icon","placement","variant","IconButton","Button","MenuPopover","UNSTABLE_portalContainer","portalContainer","useOverlayPortalContainer","RACPopover","MenuItem","classNames","textValue","RACMenuItem","hasSubmenu","jsxs","Fragment","IconChevronDown","MenuHeader","MenuSection","MenuHeading","TextHeading","MenuSeparator","RACSeparator","MenuLabel","Label","MenuDescription","Description","MenuShortcut","Keyboard"],"mappings":"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"}
|
|
@@ -7,9 +7,9 @@ import { Menu as M, MenuTrigger as p, Popover as N, MenuItem as h, Separator as
|
|
|
7
7
|
import { IconChevronDown as v } from "../../icons/IconChevronDown.js";
|
|
8
8
|
import { Label as I, Description as x, Keyboard as y } from "../Fieldset/Fieldset.js";
|
|
9
9
|
import { IconButton as b } from "../IconButton/IconButton.js";
|
|
10
|
-
import { Button as
|
|
11
|
-
import { useOverlayPortalContainer as
|
|
12
|
-
import { TextHeading as
|
|
10
|
+
import { Button as C } from "../Button/Button.js";
|
|
11
|
+
import { useOverlayPortalContainer as P } from "../../hooks/useOverlayPortal.js";
|
|
12
|
+
import { TextHeading as S } from "../Text/Text.js";
|
|
13
13
|
let i = !1;
|
|
14
14
|
function c(n) {
|
|
15
15
|
i || u.Children.forEach(n, (e) => {
|
|
@@ -26,12 +26,12 @@ function c(n) {
|
|
|
26
26
|
}
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
|
-
function
|
|
29
|
+
function T({ className: n, ...e }) {
|
|
30
30
|
return c(
|
|
31
31
|
typeof e.children == "function" ? null : e.children
|
|
32
32
|
), /* @__PURE__ */ t(M, { className: o(n, "menu"), ...e });
|
|
33
33
|
}
|
|
34
|
-
function
|
|
34
|
+
function A({ ...n }) {
|
|
35
35
|
return /* @__PURE__ */ t(p, { ...n });
|
|
36
36
|
}
|
|
37
37
|
function z({
|
|
@@ -42,16 +42,16 @@ function z({
|
|
|
42
42
|
variant: s,
|
|
43
43
|
...l
|
|
44
44
|
}) {
|
|
45
|
-
return /* @__PURE__ */ m(
|
|
46
|
-
r ? /* @__PURE__ */ t(b, { variant: s, "aria-label": n, children: r }) : /* @__PURE__ */ t(
|
|
47
|
-
/* @__PURE__ */ t(
|
|
45
|
+
return /* @__PURE__ */ m(A, { children: [
|
|
46
|
+
r ? /* @__PURE__ */ t(b, { variant: s, "aria-label": n, children: r }) : /* @__PURE__ */ t(C, { variant: s, children: n }),
|
|
47
|
+
/* @__PURE__ */ t(B, { placement: a, children: /* @__PURE__ */ t(T, { ...l, children: e }) })
|
|
48
48
|
] });
|
|
49
49
|
}
|
|
50
|
-
function
|
|
50
|
+
function B({
|
|
51
51
|
UNSTABLE_portalContainer: n,
|
|
52
52
|
...e
|
|
53
53
|
}) {
|
|
54
|
-
const r =
|
|
54
|
+
const r = P();
|
|
55
55
|
return /* @__PURE__ */ t(
|
|
56
56
|
N,
|
|
57
57
|
{
|
|
@@ -67,31 +67,31 @@ function K({ className: n, ...e }) {
|
|
|
67
67
|
s && /* @__PURE__ */ t(v, {})
|
|
68
68
|
] }) });
|
|
69
69
|
}
|
|
70
|
-
function
|
|
70
|
+
function R({ className: n, ...e }) {
|
|
71
71
|
const r = o(n, "menu-header");
|
|
72
72
|
return /* @__PURE__ */ t("div", { ...e, className: r });
|
|
73
73
|
}
|
|
74
|
-
function
|
|
74
|
+
function U({ className: n, ...e }) {
|
|
75
75
|
const r = o(n, "menu-section");
|
|
76
76
|
return /* @__PURE__ */ t("div", { ...e, className: r });
|
|
77
77
|
}
|
|
78
|
-
function
|
|
78
|
+
function W({ className: n, ...e }) {
|
|
79
79
|
const r = o(n, "menu-heading");
|
|
80
|
-
return /* @__PURE__ */ t(
|
|
80
|
+
return /* @__PURE__ */ t(S, { ...e, className: r });
|
|
81
81
|
}
|
|
82
|
-
function
|
|
82
|
+
function _({ className: n, ...e }) {
|
|
83
83
|
const r = o(n, "menu-separator");
|
|
84
84
|
return /* @__PURE__ */ t(g, { ...e, className: r });
|
|
85
85
|
}
|
|
86
|
-
function
|
|
86
|
+
function k({ className: n, ...e }) {
|
|
87
87
|
const r = o(n, "menu-label");
|
|
88
88
|
return /* @__PURE__ */ t(I, { ...e, className: r });
|
|
89
89
|
}
|
|
90
|
-
function
|
|
90
|
+
function J({ className: n, ...e }) {
|
|
91
91
|
const r = o(n, "menu-description");
|
|
92
92
|
return /* @__PURE__ */ t(x, { ...e, className: r });
|
|
93
93
|
}
|
|
94
|
-
function
|
|
94
|
+
function Q({
|
|
95
95
|
children: n,
|
|
96
96
|
className: e,
|
|
97
97
|
...r
|
|
@@ -100,17 +100,17 @@ function R({
|
|
|
100
100
|
return /* @__PURE__ */ t(y, { ...r, className: a, children: n });
|
|
101
101
|
}
|
|
102
102
|
export {
|
|
103
|
-
|
|
103
|
+
T as Menu,
|
|
104
104
|
z as MenuButton,
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
105
|
+
J as MenuDescription,
|
|
106
|
+
R as MenuHeader,
|
|
107
|
+
W as MenuHeading,
|
|
108
108
|
K as MenuItem,
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
109
|
+
k as MenuLabel,
|
|
110
|
+
B as MenuPopover,
|
|
111
|
+
U as MenuSection,
|
|
112
|
+
_ as MenuSeparator,
|
|
113
|
+
Q as MenuShortcut,
|
|
114
|
+
A as MenuTrigger
|
|
115
115
|
};
|
|
116
116
|
//# sourceMappingURL=Menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","sources":["../../../../../src/ui/primitives/Menu/Menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n Button,\n ButtonProps,\n Description,\n DescriptionProps,\n IconButton,\n Keyboard,\n KeyboardProps,\n Label,\n LabelProps,\n TextHeading,\n type TextHeadingProps,\n} from \"primitives\";\nimport React from \"react\";\nimport { PermissionGate } from \"../PermissionGate/PermissionGate\";\nimport {\n Menu as RACMenu,\n MenuItem as RACMenuItem,\n MenuTrigger as RACMenuTrigger,\n Popover as RACPopover,\n Separator as RACSeparator,\n type MenuItemProps as RACMenuItemProps,\n type MenuProps as RACMenuProps,\n type MenuTriggerProps as RACMenuTriggerProps,\n type PopoverProps as RACPopoverProps,\n type SeparatorProps as RACSeparatorProps,\n} from \"react-aria-components\";\nimport \"./menu.css\";\n\n/**\n * Aviso de desenvolvimento: um `PermissionGate` EM VOLTA de um `MenuItem` quebra\n * o menu. O collection builder do react-aria-components só entende nós de\n * coleção (`MenuItem`, `MenuSeparator`, `MenuSection`); o `<span>` que o gate\n * renderiza no ramo negado entra na coleção com `node` nulo e arrebenta a lista\n * encadeada de chaves — o item envolvido e todos os seguintes desaparecem, e se\n * ele for o primeiro filho o menu abre VAZIO, levando embora também os itens\n * permitidos. Não há erro no console, e a forma errada passa despercebida em QA\n * feito com um usuário que tem todas as permissões, porque o ramo que envolve só\n * é renderizado quando a ação é negada.\n *\n * O gate deve ficar DENTRO do item, em volta do conteúdo — ali é seguro, porque\n * o conteúdo do item é renderizado no DOM real, fora da coleção. Mesmo padrão\n * das ações de linha do `DataTable`.\n *\n * O aviso é incondicional, e não atrás de `process.env.NODE_ENV`: o build da lib\n * (`vite.lib.config.ts`) substitui essa variável pelo literal `\"production\"`, o\n * que transformaria o guard em código morto justamente nos consumidores. Só\n * dispara uma vez por sessão, e só quando já existe um bug na árvore.\n */\nlet hasWarnedAboutGateAroundItem = false;\n\nfunction warnOnGateAroundItem(children: React.ReactNode) {\n if (hasWarnedAboutGateAroundItem) return;\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type === React.Fragment) {\n warnOnGateAroundItem(\n (child.props as { children?: React.ReactNode }).children,\n );\n return;\n }\n if (child.type === PermissionGate) {\n hasWarnedAboutGateAroundItem = true;\n // eslint-disable-next-line no-console\n console.error(\n \"[design-system] Menu: PermissionGate não pode envolver um MenuItem — \" +\n \"o react-aria descarta esse item e os seguintes, e o menu abre vazio \" +\n \"quando ele é o primeiro. Mova o gate para dentro do MenuItem, em \" +\n \"volta do conteúdo do item.\",\n );\n }\n });\n}\n\nexport type MenuProps<T> = RACMenuProps<T>;\nexport function Menu<T extends object>({ className, ...props }: MenuProps<T>) {\n // children pode ser uma função nas coleções dinâmicas do react-aria.\n warnOnGateAroundItem(\n typeof props.children === \"function\" ? null : props.children,\n );\n return <RACMenu className={clsx(className, \"menu\")} {...props} />;\n}\n\nexport type MenuTriggerProps = RACMenuTriggerProps;\nexport function MenuTrigger({ ...props }: MenuTriggerProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nexport interface MenuButtonProps<T>\n extends RACMenuProps<T>,\n Omit<RACMenuTriggerProps, \"children\"> {\n label: string;\n variant?: ButtonProps[\"variant\"];\n placement?: MenuPopoverProps[\"placement\"];\n icon?: React.ReactNode;\n}\nexport function MenuButton<T extends object>({\n label,\n children,\n icon,\n placement,\n variant,\n ...props\n}: MenuButtonProps<T>) {\n return (\n <MenuTrigger>\n {icon ? (\n <IconButton variant={variant} aria-label={label}>\n {icon}\n </IconButton>\n ) : (\n <Button variant={variant}>{label}</Button>\n )}\n <MenuPopover placement={placement}>\n <Menu {...props}>{children}</Menu>\n </MenuPopover>\n </MenuTrigger>\n );\n}\n\nexport type MenuPopoverProps = RACPopoverProps;\nexport function MenuPopover({\n UNSTABLE_portalContainer,\n ...props\n}: MenuPopoverProps) {\n // Sem container explícito o menu faz portal no document.body — fora da shadow\n // root do MFE, sem CSS. Ver ui/hooks/useOverlayPortal.\n const portalContainer = useOverlayPortalContainer();\n return (\n <RACPopover\n {...props}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer ?? portalContainer}\n />\n );\n}\n\nexport type MenuItemProps = RACMenuItemProps;\nexport function MenuItem({ className, ...props }: MenuItemProps) {\n const classNames = clsx(className, \"menu-item\");\n const textValue =\n props.textValue ||\n (typeof props.children === \"string\" ? props.children : undefined);\n return (\n <RACMenuItem {...props} className={classNames} textValue={textValue}>\n {({ hasSubmenu }) => (\n <>\n {props.children}\n {hasSubmenu && <IconChevronDown />}\n </>\n )}\n </RACMenuItem>\n );\n}\n\nexport type MenuHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuHeader({ className, ...props }: MenuHeaderProps) {\n const classNames = clsx(className, \"menu-header\");\n return <div {...props} className={classNames} />;\n}\n\nexport type MenuSectionProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuSection({ className, ...props }: MenuSectionProps) {\n const classNames = clsx(className, \"menu-section\");\n return <div {...props} className={classNames} />;\n}\n\nexport type MenuHeadingProps = TextHeadingProps;\nexport function MenuHeading({ className, ...props }: MenuHeadingProps) {\n const classNames = clsx(className, \"menu-heading\");\n return <TextHeading {...props} className={classNames} />;\n}\n\nexport type MenuSeparatorProps = RACSeparatorProps;\nexport function MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n const classNames = clsx(className, \"menu-separator\");\n return <RACSeparator {...props} className={classNames} />;\n}\n\nexport type MenuLabelProps = LabelProps;\nexport function MenuLabel({ className, ...props }: MenuLabelProps) {\n const classNames = clsx(className, \"menu-label\");\n return <Label {...props} className={classNames} />;\n}\n\nexport type MenuDescriptionProps = DescriptionProps;\nexport function MenuDescription({ className, ...props }: MenuDescriptionProps) {\n const classNames = clsx(className, \"menu-description\");\n return <Description {...props} className={classNames} />;\n}\n\nexport type MenuShortcutProps = KeyboardProps;\nexport function MenuShortcut({\n children,\n className,\n ...props\n}: MenuShortcutProps) {\n const classNames = clsx(className, \"menu-shortcut\");\n return (\n <Keyboard {...props} className={classNames}>\n {children}\n </Keyboard>\n );\n}\n"],"names":["hasWarnedAboutGateAroundItem","warnOnGateAroundItem","children","React","child","PermissionGate","Menu","className","props","jsx","RACMenu","clsx","MenuTrigger","RACMenuTrigger","MenuButton","label","icon","placement","variant","IconButton","Button","MenuPopover","UNSTABLE_portalContainer","portalContainer","useOverlayPortalContainer","RACPopover","MenuItem","classNames","textValue","RACMenuItem","hasSubmenu","jsxs","Fragment","IconChevronDown","MenuHeader","MenuSection","MenuHeading","TextHeading","MenuSeparator","RACSeparator","MenuLabel","Label","MenuDescription","Description","MenuShortcut","Keyboard"],"mappings":";;;;;;;;;;;;AAoDA,IAAIA,IAA+B;AAEnC,SAASC,EAAqBC,GAA2B;AACvD,EAAIF,KACJG,EAAM,SAAS,QAAQD,GAAU,CAACE,MAAU;AAC1C,QAAKD,EAAM,eAAeC,CAAK,GAC/B;AAAA,UAAIA,EAAM,SAASD,EAAM,UAAU;AACjC,QAAAF;AAAA,UACGG,EAAM,MAAyC;AAAA,QAAA;AAElD;AAAA,MACF;AACA,MAAIA,EAAM,SAASC,MACjBL,IAA+B,IAE/B,QAAQ;AAAA,QACN;AAAA,MAAA;AAAA;AAAA,EAMN,CAAC;AACH;AAGO,SAASM,EAAuB,EAAE,WAAAC,GAAW,GAAGC,KAAuB;AAE5E,SAAAP;AAAA,IACE,OAAOO,EAAM,YAAa,aAAa,OAAOA,EAAM;AAAA,EAAA,GAE/C,gBAAAC,EAACC,KAAQ,WAAWC,EAAKJ,GAAW,MAAM,GAAI,GAAGC,GAAO;AACjE;AAGO,SAASI,EAAY,EAAE,GAAGJ,KAA2B;AAC1D,SAAO,gBAAAC,EAACI,GAAA,EAAgB,GAAGL,EAAA,CAAO;AACpC;AAUO,SAASM,EAA6B;AAAA,EAC3C,OAAAC;AAAA,EACA,UAAAb;AAAA,EACA,MAAAc;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGV;AACL,GAAuB;AACrB,2BACGI,GAAA,EACE,UAAA;AAAA,IAAAI,IACC,gBAAAP,EAACU,GAAA,EAAW,SAAAD,GAAkB,cAAYH,GACvC,aACH,IAEA,gBAAAN,EAACW,GAAA,EAAO,SAAAF,GAAmB,UAAAH,GAAM;AAAA,IAEnC,gBAAAN,EAACY,KAAY,WAAAJ,GACX,UAAA,gBAAAR,EAACH,KAAM,GAAGE,GAAQ,UAAAN,GAAS,EAAA,CAC7B;AAAA,EAAA,GACF;AAEJ;AAGO,SAASmB,EAAY;AAAA,EAC1B,0BAAAC;AAAA,EACA,GAAGd;AACL,GAAqB;AAGnB,QAAMe,IAAkBC,EAAA;AACxB,SACE,gBAAAf;AAAA,IAACgB;AAAAA,IAAA;AAAA,MACE,GAAGjB;AAAA,MACJ,0BAA0Bc,KAA4BC;AAAA,IAAA;AAAA,EAAA;AAG5D;AAGO,SAASG,EAAS,EAAE,WAAAnB,GAAW,GAAGC,KAAwB;AAC/D,QAAMmB,IAAahB,EAAKJ,GAAW,WAAW,GACxCqB,IACJpB,EAAM,cACL,OAAOA,EAAM,YAAa,WAAWA,EAAM,WAAW;AACzD,SACE,gBAAAC,EAACoB,GAAA,EAAa,GAAGrB,GAAO,WAAWmB,GAAY,WAAAC,GAC5C,UAAA,CAAC,EAAE,YAAAE,EAAA,MACF,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAxB,EAAM;AAAA,IACNsB,uBAAeG,GAAA,CAAA,CAAgB;AAAA,EAAA,EAAA,CAClC,EAAA,CAEJ;AAEJ;AAGO,SAASC,EAAW,EAAE,WAAA3B,GAAW,GAAGC,KAA0B;AACnE,QAAMmB,IAAahB,EAAKJ,GAAW,aAAa;AAChD,SAAO,gBAAAE,EAAC,OAAA,EAAK,GAAGD,GAAO,WAAWmB,GAAY;AAChD;AAGO,SAASQ,EAAY,EAAE,WAAA5B,GAAW,GAAGC,KAA2B;AACrE,QAAMmB,IAAahB,EAAKJ,GAAW,cAAc;AACjD,SAAO,gBAAAE,EAAC,OAAA,EAAK,GAAGD,GAAO,WAAWmB,GAAY;AAChD;AAGO,SAASS,EAAY,EAAE,WAAA7B,GAAW,GAAGC,KAA2B;AACrE,QAAMmB,IAAahB,EAAKJ,GAAW,cAAc;AACjD,SAAO,gBAAAE,EAAC4B,GAAA,EAAa,GAAG7B,GAAO,WAAWmB,GAAY;AACxD;AAGO,SAASW,EAAc,EAAE,WAAA/B,GAAW,GAAGC,KAA6B;AACzE,QAAMmB,IAAahB,EAAKJ,GAAW,gBAAgB;AACnD,SAAO,gBAAAE,EAAC8B,GAAA,EAAc,GAAG/B,GAAO,WAAWmB,GAAY;AACzD;AAGO,SAASa,EAAU,EAAE,WAAAjC,GAAW,GAAGC,KAAyB;AACjE,QAAMmB,IAAahB,EAAKJ,GAAW,YAAY;AAC/C,SAAO,gBAAAE,EAACgC,GAAA,EAAO,GAAGjC,GAAO,WAAWmB,GAAY;AAClD;AAGO,SAASe,EAAgB,EAAE,WAAAnC,GAAW,GAAGC,KAA+B;AAC7E,QAAMmB,IAAahB,EAAKJ,GAAW,kBAAkB;AACrD,SAAO,gBAAAE,EAACkC,GAAA,EAAa,GAAGnC,GAAO,WAAWmB,GAAY;AACxD;AAGO,SAASiB,EAAa;AAAA,EAC3B,UAAA1C;AAAA,EACA,WAAAK;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMmB,IAAahB,EAAKJ,GAAW,eAAe;AAClD,2BACGsC,GAAA,EAAU,GAAGrC,GAAO,WAAWmB,GAC7B,UAAAzB,GACH;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"Menu.js","sources":["../../../../../src/ui/primitives/Menu/Menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n Button,\n ButtonProps,\n Description,\n DescriptionProps,\n IconButton,\n Keyboard,\n KeyboardProps,\n Label,\n LabelProps,\n TextHeading,\n type TextHeadingProps,\n} from \"primitives\";\nimport React from \"react\";\nimport { PermissionGate } from \"../PermissionGate/PermissionGate\";\nimport {\n Menu as RACMenu,\n MenuItem as RACMenuItem,\n MenuTrigger as RACMenuTrigger,\n Popover as RACPopover,\n Separator as RACSeparator,\n type MenuItemProps as RACMenuItemProps,\n type MenuProps as RACMenuProps,\n type MenuTriggerProps as RACMenuTriggerProps,\n type PopoverProps as RACPopoverProps,\n type SeparatorProps as RACSeparatorProps,\n} from \"react-aria-components\";\nimport \"./menu.css\";\n\n/**\n * Aviso de desenvolvimento: um `PermissionGate` EM VOLTA de um `MenuItem` quebra\n * o menu. O collection builder do react-aria-components só entende nós de\n * coleção (`MenuItem`, `MenuSeparator`, `MenuSection`); o `<span>` que o gate\n * renderiza no ramo negado entra na coleção com `node` nulo e arrebenta a lista\n * encadeada de chaves — o item envolvido e todos os seguintes desaparecem, e se\n * ele for o primeiro filho o menu abre VAZIO, levando embora também os itens\n * permitidos. Não há erro no console, e a forma errada passa despercebida em QA\n * feito com um usuário que tem todas as permissões, porque o ramo que envolve só\n * é renderizado quando a ação é negada.\n *\n * O gate deve ficar DENTRO do item, em volta do conteúdo — ali é seguro, porque\n * o conteúdo do item é renderizado no DOM real, fora da coleção. Mesmo padrão\n * das ações de linha do `DataTable`.\n *\n * O aviso é incondicional, e não atrás de `process.env.NODE_ENV`: o build da lib\n * (`vite.lib.config.ts`) substitui essa variável pelo literal `\"production\"`, o\n * que transformaria o guard em código morto justamente nos consumidores. Só\n * dispara uma vez por sessão, e só quando já existe um bug na árvore.\n */\nlet hasWarnedAboutGateAroundItem = false;\n\nfunction warnOnGateAroundItem(children: React.ReactNode) {\n if (hasWarnedAboutGateAroundItem) return;\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type === React.Fragment) {\n warnOnGateAroundItem(\n (child.props as { children?: React.ReactNode }).children,\n );\n return;\n }\n if (child.type === PermissionGate) {\n hasWarnedAboutGateAroundItem = true;\n console.error(\n \"[design-system] Menu: PermissionGate não pode envolver um MenuItem — \" +\n \"o react-aria descarta esse item e os seguintes, e o menu abre vazio \" +\n \"quando ele é o primeiro. Mova o gate para dentro do MenuItem, em \" +\n \"volta do conteúdo do item.\",\n );\n }\n });\n}\n\nexport type MenuProps<T> = RACMenuProps<T>;\nexport function Menu<T extends object>({ className, ...props }: MenuProps<T>) {\n // children pode ser uma função nas coleções dinâmicas do react-aria.\n warnOnGateAroundItem(\n typeof props.children === \"function\" ? null : props.children,\n );\n return <RACMenu className={clsx(className, \"menu\")} {...props} />;\n}\n\nexport type MenuTriggerProps = RACMenuTriggerProps;\nexport function MenuTrigger({ ...props }: MenuTriggerProps) {\n return <RACMenuTrigger {...props} />;\n}\n\nexport interface MenuButtonProps<T>\n extends RACMenuProps<T>,\n Omit<RACMenuTriggerProps, \"children\"> {\n label: string;\n variant?: ButtonProps[\"variant\"];\n placement?: MenuPopoverProps[\"placement\"];\n icon?: React.ReactNode;\n}\nexport function MenuButton<T extends object>({\n label,\n children,\n icon,\n placement,\n variant,\n ...props\n}: MenuButtonProps<T>) {\n return (\n <MenuTrigger>\n {icon ? (\n <IconButton variant={variant} aria-label={label}>\n {icon}\n </IconButton>\n ) : (\n <Button variant={variant}>{label}</Button>\n )}\n <MenuPopover placement={placement}>\n <Menu {...props}>{children}</Menu>\n </MenuPopover>\n </MenuTrigger>\n );\n}\n\nexport type MenuPopoverProps = RACPopoverProps;\nexport function MenuPopover({\n UNSTABLE_portalContainer,\n ...props\n}: MenuPopoverProps) {\n // Sem container explícito o menu faz portal no document.body — fora da shadow\n // root do MFE, sem CSS. Ver ui/hooks/useOverlayPortal.\n const portalContainer = useOverlayPortalContainer();\n return (\n <RACPopover\n {...props}\n UNSTABLE_portalContainer={UNSTABLE_portalContainer ?? portalContainer}\n />\n );\n}\n\nexport type MenuItemProps = RACMenuItemProps;\nexport function MenuItem({ className, ...props }: MenuItemProps) {\n const classNames = clsx(className, \"menu-item\");\n const textValue =\n props.textValue ||\n (typeof props.children === \"string\" ? props.children : undefined);\n return (\n <RACMenuItem {...props} className={classNames} textValue={textValue}>\n {({ hasSubmenu }) => (\n <>\n {props.children}\n {hasSubmenu && <IconChevronDown />}\n </>\n )}\n </RACMenuItem>\n );\n}\n\nexport type MenuHeaderProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuHeader({ className, ...props }: MenuHeaderProps) {\n const classNames = clsx(className, \"menu-header\");\n return <div {...props} className={classNames} />;\n}\n\nexport type MenuSectionProps = React.ComponentPropsWithoutRef<\"div\">;\nexport function MenuSection({ className, ...props }: MenuSectionProps) {\n const classNames = clsx(className, \"menu-section\");\n return <div {...props} className={classNames} />;\n}\n\nexport type MenuHeadingProps = TextHeadingProps;\nexport function MenuHeading({ className, ...props }: MenuHeadingProps) {\n const classNames = clsx(className, \"menu-heading\");\n return <TextHeading {...props} className={classNames} />;\n}\n\nexport type MenuSeparatorProps = RACSeparatorProps;\nexport function MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n const classNames = clsx(className, \"menu-separator\");\n return <RACSeparator {...props} className={classNames} />;\n}\n\nexport type MenuLabelProps = LabelProps;\nexport function MenuLabel({ className, ...props }: MenuLabelProps) {\n const classNames = clsx(className, \"menu-label\");\n return <Label {...props} className={classNames} />;\n}\n\nexport type MenuDescriptionProps = DescriptionProps;\nexport function MenuDescription({ className, ...props }: MenuDescriptionProps) {\n const classNames = clsx(className, \"menu-description\");\n return <Description {...props} className={classNames} />;\n}\n\nexport type MenuShortcutProps = KeyboardProps;\nexport function MenuShortcut({\n children,\n className,\n ...props\n}: MenuShortcutProps) {\n const classNames = clsx(className, \"menu-shortcut\");\n return (\n <Keyboard {...props} className={classNames}>\n {children}\n </Keyboard>\n );\n}\n"],"names":["hasWarnedAboutGateAroundItem","warnOnGateAroundItem","children","React","child","PermissionGate","Menu","className","props","jsx","RACMenu","clsx","MenuTrigger","RACMenuTrigger","MenuButton","label","icon","placement","variant","IconButton","Button","MenuPopover","UNSTABLE_portalContainer","portalContainer","useOverlayPortalContainer","RACPopover","MenuItem","classNames","textValue","RACMenuItem","hasSubmenu","jsxs","Fragment","IconChevronDown","MenuHeader","MenuSection","MenuHeading","TextHeading","MenuSeparator","RACSeparator","MenuLabel","Label","MenuDescription","Description","MenuShortcut","Keyboard"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("../../../vendor/clsx/dist/clsx.cjs"),a=require("react"),u=require("react-aria-components");;/* empty css */const q=require("../../icons/IconX.cjs"),S=require("../../icons/IconSearch.cjs"),b=require("../../hooks/useOverlayPortal.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),d=require("../../../vendor/clsx/dist/clsx.cjs"),a=require("react"),u=require("react-aria-components");;/* empty css */const q=require("../../icons/IconX.cjs"),S=require("../../icons/IconSearch.cjs"),b=require("../../hooks/useOverlayPortal.cjs"),f=require("../Fieldset/Fieldset.cjs"),v=require("../Input/Input.cjs"),h=require("../IconButton/IconButton.cjs"),x=require("../ListBox/ListBox.cjs"),B=a.forwardRef(function({className:m,results:c,onSearch:o,...i},n){const[l,j]=a.useState(""),t=a.useRef(null),s=e=>{j(e),o&&o(e)},p=d.clsx(m,"search-input-container"),I=b.useOverlayPortalContainer();return r.jsxs(u.ComboBox,{className:p,children:[r.jsx(f.Label,{hidden:!0,children:i["aria-label"]||"Search"}),r.jsx(v.Input,{type:"search",className:"search-input",value:l,onInput:e=>s(e.currentTarget.value),ref:e=>{t.current=e,typeof n=="function"?n(e):n&&(n.current=e)},...i}),r.jsx("span",{className:"search-icon",children:l?r.jsx(h.IconButton,{"aria-label":"Clear search",onPress:()=>s(""),size:"small",variant:"subtle",children:r.jsx(q.IconX,{})}):r.jsx(h.IconButton,{"aria-label":"Clear search",onPress:()=>{var e;return(e=t==null?void 0:t.current)==null?void 0:e.focus()},size:"small",variant:"subtle",children:r.jsx(S.IconSearch,{})})}),r.jsx(u.Popover,{UNSTABLE_portalContainer:I,children:r.jsx(x.ListBox,{children:c==null?void 0:c.map(e=>r.jsx(x.ListBoxItem,{onAction:()=>s(e),children:e},e))})})]})});exports.Search=B;
|
|
2
2
|
//# sourceMappingURL=Search.cjs.map
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { jsxs as f, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { clsx as d } from "../../../vendor/clsx/dist/clsx.js";
|
|
3
3
|
import I, { useState as b, useRef as x } from "react";
|
|
4
|
-
import { ComboBox as v, Popover as
|
|
4
|
+
import { ComboBox as v, Popover as C } from "react-aria-components";
|
|
5
5
|
/* empty css */
|
|
6
|
-
import { IconX as
|
|
7
|
-
import { IconSearch as
|
|
6
|
+
import { IconX as S } from "../../icons/IconX.js";
|
|
7
|
+
import { IconSearch as B } from "../../icons/IconSearch.js";
|
|
8
8
|
import { useOverlayPortalContainer as N } from "../../hooks/useOverlayPortal.js";
|
|
9
9
|
import { Label as L } from "../Fieldset/Fieldset.js";
|
|
10
10
|
import { Input as P } from "../Input/Input.js";
|
|
11
11
|
import { IconButton as m } from "../IconButton/IconButton.js";
|
|
12
12
|
import { ListBox as T, ListBoxItem as y } from "../ListBox/ListBox.js";
|
|
13
|
-
const
|
|
13
|
+
const D = I.forwardRef(function({ className: l, results: a, onSearch: c, ...i }, o) {
|
|
14
14
|
const [s, p] = b(""), t = x(null), n = (r) => {
|
|
15
15
|
p(r), c && c(r);
|
|
16
16
|
}, h = d(l, "search-input-container"), u = N();
|
|
@@ -36,7 +36,7 @@ const q = I.forwardRef(function({ className: l, results: a, onSearch: c, ...i },
|
|
|
36
36
|
onPress: () => n(""),
|
|
37
37
|
size: "small",
|
|
38
38
|
variant: "subtle",
|
|
39
|
-
children: /* @__PURE__ */ e(
|
|
39
|
+
children: /* @__PURE__ */ e(S, {})
|
|
40
40
|
}
|
|
41
41
|
) : /* @__PURE__ */ e(
|
|
42
42
|
m,
|
|
@@ -48,13 +48,13 @@ const q = I.forwardRef(function({ className: l, results: a, onSearch: c, ...i },
|
|
|
48
48
|
},
|
|
49
49
|
size: "small",
|
|
50
50
|
variant: "subtle",
|
|
51
|
-
children: /* @__PURE__ */ e(
|
|
51
|
+
children: /* @__PURE__ */ e(B, {})
|
|
52
52
|
}
|
|
53
53
|
) }),
|
|
54
|
-
/* @__PURE__ */ e(
|
|
54
|
+
/* @__PURE__ */ e(C, { UNSTABLE_portalContainer: u, children: /* @__PURE__ */ e(T, { children: a == null ? void 0 : a.map((r) => /* @__PURE__ */ e(y, { onAction: () => n(r), children: r }, r)) }) })
|
|
55
55
|
] });
|
|
56
56
|
});
|
|
57
57
|
export {
|
|
58
|
-
|
|
58
|
+
D as Search
|
|
59
59
|
};
|
|
60
60
|
//# sourceMappingURL=Search.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),E=require("../../../vendor/clsx/dist/clsx.cjs"),s=require("react"),h=require("react-aria-components");;/* empty css */const F=require("../../icons/IconChevronDown.cjs"),N=require("../../hooks/useOverlayPortal.cjs"),u=require("../Fieldset/Fieldset.cjs"),R=require("../ListBox/ListBox.cjs");function v(t){const{id:e}=t.props;return String(e??t.key??"")}function I(t){const{textValue:e,children:r}=t.props;return e!==void 0?e:typeof r=="string"?r:""}function m(t,e){s.Children.forEach(t,r=>{s.isValidElement(r)&&e(r)})}function M(t){const e=new Set;return m(t,r=>e.add(v(r))),e}function O(t,e){const r=new Set([...e].map(String)),o=[];return m(t,c=>{r.has(v(c))&&o.push(I(c))}),o.join(", ")}function B({className:t,label:e,description:r,errorMessage:o,placeholder:c,children:d,selectedKeys:x,onSelectionChange:j,isDisabled:S,isInvalid:y,disallowEmptySelection:q,"aria-label":g}){const C=E.clsx(t,"select-container"),b=N.useOverlayPortalContainer(),l=s.useRef(null),[T,w]=s.useState(),f=s.useCallback(()=>{l.current&&w(`${l.current.offsetWidth}px`)},[]);s.useLayoutEffect(()=>{f();const i=l.current;if(!i||typeof ResizeObserver>"u")return;const p=new ResizeObserver(f);return p.observe(i),()=>p.disconnect()},[f]);const a=O(d,x);return n.jsx("div",{className:C,children:n.jsxs(u.Field,{children:[e&&n.jsx(u.Label,{children:e}),n.jsxs(h.MenuTrigger,{children:[n.jsxs(h.Button,{ref:l,className:"select","aria-label":g,isDisabled:S,"data-invalid":y||void 0,children:[n.jsx("span",{className:"select-value","data-placeholder":a===""||void 0,title:a||void 0,children:a===""?c:a}),n.jsx(F.IconChevronDown,{"aria-hidden":"true"})]}),n.jsx(h.Popover,{className:"select-popover",style:{"--trigger-width":T},UNSTABLE_portalContainer:b,children:n.jsx(R.ListBox,{"aria-label":e??g,autoFocus:!0,selectionMode:"multiple",disallowEmptySelection:q,selectedKeys:x,onSelectionChange:i=>j(i==="all"?M(d):new Set(i)),children:d})})]}),r&&n.jsx(u.Description,{children:r}),n.jsx(u.FieldError,{children:o})]})})}exports.MultiSelectField=B;
|
|
2
|
+
//# sourceMappingURL=MultiSelect.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MultiSelect.cjs","sources":["../../../../../src/ui/primitives/Select/MultiSelect.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useOverlayPortalContainer } from \"hooks\";\nimport { IconChevronDown } from \"icons\";\nimport {\n Description,\n Field,\n FieldError,\n Label,\n ListBox,\n SharedFieldProps,\n} from \"primitives\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport {\n Button as RACButton,\n MenuTrigger as RACMenuTrigger,\n Popover as RACPopover,\n type Key as RACKey,\n type Selection as RACSelection,\n} from \"react-aria-components\";\nimport \"./select.css\";\n\nfunction itemKey(item: React.ReactElement): string {\n const { id } = item.props as { id?: RACKey };\n return String(id ?? item.key ?? \"\");\n}\n\nfunction itemText(item: React.ReactElement): string {\n const { textValue, children } = item.props as {\n textValue?: string;\n children?: React.ReactNode;\n };\n if (textValue !== undefined) return textValue;\n return typeof children === \"string\" ? children : \"\";\n}\n\nfunction forEachItem(\n children: React.ReactNode,\n visit: (item: React.ReactElement) => void,\n) {\n React.Children.forEach(children, (child) => {\n if (React.isValidElement(child)) visit(child);\n });\n}\n\nfunction allItemKeys(children: React.ReactNode): Set<RACKey> {\n const keys = new Set<RACKey>();\n forEachItem(children, (item) => keys.add(itemKey(item)));\n return keys;\n}\n\nfunction selectedItemsText(\n children: React.ReactNode,\n selectedKeys: Iterable<RACKey>,\n): string {\n const selected = new Set([...selectedKeys].map(String));\n const texts: string[] = [];\n forEachItem(children, (item) => {\n if (selected.has(itemKey(item))) texts.push(itemText(item));\n });\n return texts.join(\", \");\n}\n\nexport interface MultiSelectFieldProps extends SharedFieldProps {\n children: React.ReactNode;\n selectedKeys: Iterable<RACKey>;\n onSelectionChange: (keys: Set<RACKey>) => void;\n className?: string;\n isDisabled?: boolean;\n isInvalid?: boolean;\n disallowEmptySelection?: boolean;\n \"aria-label\"?: string;\n}\n\nexport function MultiSelectField({\n className,\n label,\n description,\n errorMessage,\n placeholder,\n children,\n selectedKeys,\n onSelectionChange,\n isDisabled,\n isInvalid,\n disallowEmptySelection,\n \"aria-label\": ariaLabel,\n}: MultiSelectFieldProps) {\n const classNames = clsx(className, \"select-container\");\n const portalContainer = useOverlayPortalContainer();\n const triggerRef = useRef<HTMLButtonElement>(null);\n const [triggerWidth, setTriggerWidth] = useState<string>();\n\n const measureTrigger = useCallback(() => {\n if (triggerRef.current) {\n setTriggerWidth(`${triggerRef.current.offsetWidth}px`);\n }\n }, []);\n\n useLayoutEffect(() => {\n measureTrigger();\n const trigger = triggerRef.current;\n if (!trigger || typeof ResizeObserver === \"undefined\") return;\n const observer = new ResizeObserver(measureTrigger);\n observer.observe(trigger);\n return () => observer.disconnect();\n }, [measureTrigger]);\n\n const chosenText = selectedItemsText(children, selectedKeys);\n\n return (\n <div className={classNames}>\n <Field>\n {label && <Label>{label}</Label>}\n <RACMenuTrigger>\n <RACButton\n ref={triggerRef}\n className=\"select\"\n aria-label={ariaLabel}\n isDisabled={isDisabled}\n data-invalid={isInvalid || undefined}\n >\n <span\n className=\"select-value\"\n data-placeholder={chosenText === \"\" || undefined}\n title={chosenText || undefined}\n >\n {chosenText === \"\" ? placeholder : chosenText}\n </span>\n <IconChevronDown aria-hidden=\"true\" />\n </RACButton>\n <RACPopover\n className=\"select-popover\"\n style={{ \"--trigger-width\": triggerWidth } as React.CSSProperties}\n UNSTABLE_portalContainer={portalContainer}\n >\n <ListBox\n aria-label={label ?? ariaLabel}\n autoFocus\n selectionMode=\"multiple\"\n disallowEmptySelection={disallowEmptySelection}\n selectedKeys={selectedKeys}\n onSelectionChange={(keys: RACSelection) =>\n onSelectionChange(\n keys === \"all\" ? allItemKeys(children) : new Set(keys),\n )\n }\n >\n {children}\n </ListBox>\n </RACPopover>\n </RACMenuTrigger>\n {description && <Description>{description}</Description>}\n <FieldError>{errorMessage}</FieldError>\n </Field>\n </div>\n );\n}\n"],"names":["itemKey","item","id","itemText","textValue","children","forEachItem","visit","React","child","allItemKeys","keys","selectedItemsText","selectedKeys","selected","texts","MultiSelectField","className","label","description","errorMessage","placeholder","onSelectionChange","isDisabled","isInvalid","disallowEmptySelection","ariaLabel","classNames","clsx","portalContainer","useOverlayPortalContainer","triggerRef","useRef","triggerWidth","setTriggerWidth","useState","measureTrigger","useCallback","useLayoutEffect","trigger","observer","chosenText","jsx","Field","Label","RACMenuTrigger","jsxs","RACButton","IconChevronDown","RACPopover","ListBox","Description","FieldError"],"mappings":"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"}
|