@parrot-co/parrot-ui 0.0.46 → 0.0.48

package/dist/main.js

@@ -43,6 +43,7 @@ $parcel$export(module.exports, "Switch", () => $063a8b2ca5e15636$export$b5d5cf89
 $parcel$export(module.exports, "ColorTray", () => $41fe5e52028acbc1$export$dbada5ace43900dd);
 $parcel$export(module.exports, "IconTray", () => $d9681b77772be59b$export$50e381fea3a45244);
 $parcel$export(module.exports, "Sticker", () => $a15741e0d788b3da$export$ea98c603db73aee7);
+$parcel$export(module.exports, "DropdownMenu", () => $39b5e387b93e95b5$export$e44a253a59704894);
 /* eslint-disable @typescript-eslint/no-explicit-any */ 
 
 const $80923bc9c1ba824c$export$8f45430ccf837300 = {
@@ -4463,4 +4464,163 @@ $a15741e0d788b3da$export$ea98c603db73aee7.displayName = "Sticker";
 
 
 
+
+
+
+
+
+
+const $6e67a85cec29589c$export$59308621e1a05692 = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)((0, $7003944ca9ba7b6a$export$2e2bcd8739ae039), {
+    listStyle: "none",
+    padding: 0,
+    margin: 0,
+    outline: "none"
+});
+const $6e67a85cec29589c$export$6648d5fa18559e7f = (0, $80923bc9c1ba824c$export$3817b7a54a07cec7)("li", {
+    py: 8,
+    px: 8,
+    borderRadius: 7,
+    outline: "none",
+    '&[data-selected="true"]': {
+        backgroundColor: "$violet3",
+        color: "$primary"
+    },
+    "&[data-focused='true']": {
+        background: "$gray3"
+    }
+});
+
+
+function $39b5e387b93e95b5$var$_Dropdown({ triggerComponent: triggerComponent , menuFooter: menuFooter , menuHeader: menuHeader , ...props }) {
+    const state = (0, $E4F9t$reactstately.useMenuTriggerState)(props);
+    const triggerRef = $E4F9t$react.useRef(null);
+    const { menuTriggerProps: menuTriggerProps , menuProps: menuProps  } = (0, $E4F9t$reactaria.useMenuTrigger)(props, state, triggerRef);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $E4F9t$reactjsxruntime.Fragment), {
+        children: [
+            triggerComponent && /*#__PURE__*/ $E4F9t$react.cloneElement(triggerComponent, {
+                ...triggerComponent.props,
+                ...menuTriggerProps,
+                ref: triggerRef
+            }),
+            !triggerComponent && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $8d4373b1a05e63fb$export$353f5b6fc5456de1), {
+                appearance: triggerComponent ? "unstyled" : undefined,
+                ...menuTriggerProps,
+                ref: triggerRef,
+                children: props.label
+            }),
+            state.isOpen && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $3347a410c0691704$export$5b6b19405a83ff9d), {
+                state: state,
+                triggerRef: triggerRef,
+                placement: "bottom start",
+                children: /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($39b5e387b93e95b5$var$Menu, {
+                    menuFooter: menuFooter,
+                    menuHeader: menuHeader,
+                    ...menuProps,
+                    ...props
+                })
+            })
+        ]
+    });
+}
+function $39b5e387b93e95b5$var$Menu({ menuFooter: menuFooter , menuHeader: menuHeader , ...props }) {
+    const state = (0, $E4F9t$reactstately.useTreeState)(props);
+    const menuRef = $E4F9t$react.useRef(null);
+    const { menuProps: menuProps  } = (0, $E4F9t$reactaria.useMenu)(props, state, menuRef);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $E4F9t$reactjsxruntime.Fragment), {
+        children: [
+            menuHeader,
+            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $6e67a85cec29589c$export$59308621e1a05692), {
+                as: "ul",
+                ...menuProps,
+                ref: menuRef,
+                children: [
+                    ...state.collection
+                ].map((item)=>{
+                    return item.type === "section" ? /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($39b5e387b93e95b5$var$MenuSection, {
+                        section: item,
+                        state: state
+                    }, item.key) : /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($39b5e387b93e95b5$var$MenuItem, {
+                        state: state,
+                        item: item
+                    }, item.key);
+                })
+            }),
+            menuFooter
+        ]
+    });
+}
+function $39b5e387b93e95b5$var$MenuSection({ section: section , state: state  }) {
+    const { itemProps: itemProps , headingProps: headingProps , groupProps: groupProps  } = (0, $E4F9t$reactaria.useMenuSection)({
+        heading: section.rendered,
+        "aria-label": section["aria-label"]
+    });
+    const { separatorProps: separatorProps  } = (0, $E4F9t$reactaria.useSeparator)({
+        elementType: "li"
+    });
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)((0, $E4F9t$reactjsxruntime.Fragment), {
+        children: [
+            section.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("li", {
+                ...separatorProps
+            }),
+            /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsxs)($39b5e387b93e95b5$var$MenuItem, {
+                ...itemProps,
+                children: [
+                    section.rendered && /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("span", {
+                        ...headingProps,
+                        children: section.rendered
+                    }),
+                    /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)("ul", {
+                        ...groupProps,
+                        children: [
+                            ...section.childNodes
+                        ].map((item)=>{
+                            return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($39b5e387b93e95b5$var$MenuItem, {
+                                item: item,
+                                state: state
+                            }, item.key);
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function $39b5e387b93e95b5$var$MenuItem({ item: item , state: state  }) {
+    const itemRef = $E4F9t$react.useRef(null);
+    const { menuItemProps: menuItemProps , isFocused: isFocused , isSelected: isSelected , isDisabled: isDisabled  } = (0, $E4F9t$reactaria.useMenuItem)({
+        key: item.key
+    }, state, itemRef);
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $6e67a85cec29589c$export$6648d5fa18559e7f), {
+        "data-focused": isFocused,
+        "data-selected": isSelected,
+        "data-disabled": isDisabled,
+        ref: itemRef,
+        ...menuItemProps,
+        children: item.rendered
+    });
+}
+function $39b5e387b93e95b5$export$e44a253a59704894(props) {
+    if (!props.items) return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($39b5e387b93e95b5$var$_Dropdown, {
+        ...props
+    });
+    function findAction(key) {
+        const items = props.items;
+        const action = items.find((item)=>item.key === key)?.action;
+        action?.();
+    }
+    return /*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)($39b5e387b93e95b5$var$_Dropdown, {
+        ...props,
+        onAction: findAction,
+        children: (item)=>/*#__PURE__*/ (0, $E4F9t$reactjsxruntime.jsx)((0, $E4F9t$reactstately.Item), {
+                textValue: item.key,
+                children: props.renderOption ? props.renderOption(item) : item.label
+            }, item.key)
+    });
+}
+
+
+
+
+
+
 //# sourceMappingURL=main.js.map