@parrot-co/parrot-ui 0.0.82 → 0.0.84

package/dist/main.js

@@ -47,6 +47,7 @@ $parcel$export(module.exports, "Tabs", function () { return $7cf6c6e3ac4b7c72$ex
 $parcel$export(module.exports, "Table", function () { return $aa44ec0d52177dbe$export$54ec01a60f47d33d; });
 $parcel$export(module.exports, "Timeline", function () { return $3dc285189c5cc5d1$export$e6a97ba2cae5bb94; });
 $parcel$export(module.exports, "Modal", function () { return $61ad51d3c2a11900$export$2b77a92f1a5ad772; });
+$parcel$export(module.exports, "useModal", function () { return $61ad51d3c2a11900$export$33ffd74ebf07f060; });
 $parcel$export(module.exports, "Space", function () { return $951f2dc4112308d0$export$eef1e68107c58ef2; });
 $parcel$export(module.exports, "TagInput", function () { return $3f3afa75ddfe07d0$export$39299b56cfd4e361; });
 $parcel$export(module.exports, "ThemeProvider", function () { return $df07e85003035def$export$d8964aec282183a3; });
@@ -1082,24 +1083,27 @@ function $d14b866db34f150f$export$3d7d0414f6db67e7({ children: children , render
     if (hasChildren) return children;
     if (items) // eslint-disable-next-line react/display-name
     return (item)=>{
-        const label = item?.[labelKey ?? "label"] ?? renderOption?.(item);
+        const label = item?.[labelKey ?? "label"];
         const value = item?.[valueKey ?? "id"];
         const sectionChildren = item?.[sectionKey ?? "children"] ?? [];
         if (item?.[sectionKey]) return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $895088a96d07d13e$export$6e2c8f0811a474ce), {
             items: sectionChildren,
             title: getSectionLabel?.(item),
             children: (item)=>/*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $895088a96d07d13e$export$36d18380658d5d20), {
+                    textValue: item?.[labelKey ?? "label"],
                     children: item?.[labelKey ?? "label"] ?? renderOption?.(item)
                 }, item?.[valueKey ?? "id"])
         }, value);
         return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $895088a96d07d13e$export$36d18380658d5d20), {
-            children: label ?? renderOption?.(item)
+            textValue: label,
+            children: renderOption?.(item) ?? label
         }, item?.[valueKey ?? "id"]);
     };
 }
 
 
-function $895088a96d07d13e$export$41f133550aa26f48({ state: state , color: color , ...props }) {
+
+function $895088a96d07d13e$export$41f133550aa26f48({ state: state , color: color , width: width = 300 , ...props }) {
     const internalState = (0, $4Lhmj$reactstately.useListState)({
         ...props,
         children: (0, $d14b866db34f150f$export$3d7d0414f6db67e7)(props)
@@ -1113,7 +1117,8 @@ function $895088a96d07d13e$export$41f133550aa26f48({ state: state , color: color
     return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
         "data-color": color,
         style: {
-            width: 400
+            width: width,
+            minWidth: 300
         },
         stack: true,
         gap: "md",
@@ -1173,7 +1178,9 @@ function $895088a96d07d13e$var$ListOption({ state: state , item: item  }) {
         "data-pressed": isPressed,
         "data-selected": isSelected,
         ...optionProps,
-        ...item.props,
+        ...(0, $d179231b21283096$export$30a06c8d3562193f)(item.props, [
+            "textValue"
+        ]),
         ref: optionRef,
         children: item.rendered
     });
@@ -1267,6 +1274,10 @@ const $06de8c3bf84a7234$export$b4e0e71242920c6a = {
     pill: "full",
     rounded: undefined
 };
+function $06de8c3bf84a7234$var$ps(styles) {
+// 1. iterate over the keys of the styles object
+// 2. for each key, check is is valid css property
+}
 
 
 function $a3b8f4d4af23e61c$export$d41d9ab3de2def3d(text) {
@@ -1325,11 +1336,10 @@ $df7f5cf79280971b$export$3288d34c523a1192.displayName = "Tag";
 function $8c3b8477473df88b$export$5b6b19405a83ff9d({ state: state , children: children , ...props }) {
     const popoverRef = $4Lhmj$react.useRef(null);
     const theme = (0, $df07e85003035def$export$93d4e7f90805808f)();
-    const { popoverProps: popoverProps , underlayProps: underlayProps , placement: placement  } = (0, $4Lhmj$reactaria.usePopover)({
+    const { popoverProps: popoverProps , underlayProps: underlayProps  } = (0, $4Lhmj$reactaria.usePopover)({
         ...props,
         popoverRef: popoverRef
     }, state);
-    console.log(popoverProps, placement);
     return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $4Lhmj$reactaria.Overlay), {
         children: [
             /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)("div", {
@@ -1350,7 +1360,10 @@ function $8c3b8477473df88b$export$5b6b19405a83ff9d({ state: state , children: ch
 
 
 
-function $d9e1022f7af5df7f$export$ef9b1a59e592288f({ label: label , selectionMode: selectionMode = "single" , appearance: appearance = "outline" , append: append , prepend: prepend , renderValue: renderValue , color: color = "gray" , error: error , description: description , size: size = "sm" , shape: shape = "rounded" , ...props }) {
+
+function $d9e1022f7af5df7f$export$ef9b1a59e592288f({ label: label , selectionMode: selectionMode = "single" , appearance: appearance = "outline" , append: append , prepend: prepend , renderValue: renderValue , color: color = "gray" , error: error , description: description , size: size = "sm" , shape: shape = "rounded" , listBoxColor: listBoxColor , className: className , ...props }) {
+    const space = (0, $951f2dc4112308d0$export$450c36e0b0e62ccd)();
+    const [isFocused, setIsFocused] = $4Lhmj$react.useState(false);
     const triggerState = (0, $4Lhmj$reactstately.useMenuTriggerState)({});
     const listState = (0, $4Lhmj$reactstately.useListState)({
         ...props,
@@ -1397,31 +1410,56 @@ function $d9e1022f7af5df7f$export$ef9b1a59e592288f({ label: label , selectionMod
             variant: "default",
             color: color,
             className: "single-value",
-            children: selectedItems[0]?.rendered
+            children: renderValue?.(selectedItems[0]?.value) ?? selectedItems[0]?.value[props.labelKey ?? "label"]
         });
     }
     return /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $f9c6775c22423d58$export$e71c4d32a2263218), {
+        as: "span",
+        position: "relative",
         stretchX: true,
         children: [
+            selectionMode === "single" && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $4Lhmj$reactaria.HiddenSelect), {
+                triggerRef: triggerRef,
+                label: label,
+                name: props.name,
+                state: {
+                    selectedItem: selectedItems[0],
+                    selectedKey: selectedItems[0]?.key,
+                    setSelectedKey: (key)=>listState.selectionManager.setSelectedKeys([
+                            key
+                        ]),
+                    isFocused: isFocused,
+                    setFocused: setIsFocused,
+                    ...listState,
+                    ...triggerState
+                },
+                isDisabled: props.isDisabled
+            }),
             /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)((0, $0fbc6d8e58c7ff1b$export$f51f4c4ede09e011), {
                 "data-radius": getRadius(),
                 gap: "2xs",
                 stack: true,
-                className: "p-input-group",
+                className: (0, $5d3f3512fadee416$export$a274e22fb40f762e)({
+                    [`${space.compactItemWrapperAdjust}`]: true,
+                    "p-input-group": true,
+                    [`${className}`]: !!className
+                }),
                 "data-size": size,
                 "data-color": color,
                 children: [
-                    /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $909969c92fb7eab4$export$2e2bcd8739ae039), {
+                    label && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $909969c92fb7eab4$export$2e2bcd8739ae039), {
                         children: label
                     }),
                     /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsxs)("div", {
+                        "data-selection-mode": selectionMode,
                         tabIndex: 0,
                         role: "button",
                         ref: triggerRef,
                         color: "gray",
                         className: (0, $5d3f3512fadee416$export$a274e22fb40f762e)({
                             "p-input": true,
-                            "p-select": true
+                            "p-select": true,
+                            ...space.classNames
                         }),
                         "data-appearance": appearance,
                         ...triggerProps,
@@ -1436,12 +1474,14 @@ function $d9e1022f7af5df7f$export$ef9b1a59e592288f({ label: label , selectionMod
                 ]
             }),
             triggerState.isOpen && /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $8c3b8477473df88b$export$5b6b19405a83ff9d), {
+                placement: "bottom start",
                 offset: 4,
                 shouldUpdatePosition: true,
                 triggerRef: triggerRef,
                 state: triggerState,
                 children: /*#__PURE__*/ (0, $4Lhmj$reactjsxruntime.jsx)((0, $895088a96d07d13e$export$41f133550aa26f48), {
-                    color: color,
+                    width: triggerRef.current?.getBoundingClientRect().width,
+                    color: listBoxColor ?? color,
                     shouldFocusOnHover: true,
                     state: listState,
                     ...props