@parrot-co/parrot-ui 0.0.82 → 0.0.83

package/dist/module.js

@@ -1,6 +1,6 @@
 import {jsx as $ilZGV$jsx, jsxs as $ilZGV$jsxs} from "react/jsx-runtime";
 import $ilZGV$react, {forwardRef as $ilZGV$forwardRef, useCallback as $ilZGV$useCallback, createContext as $ilZGV$createContext, Children as $ilZGV$Children, useMemo as $ilZGV$useMemo, isValidElement as $ilZGV$isValidElement, useContext as $ilZGV$useContext, useRef as $ilZGV$useRef, useState as $ilZGV$useState, useEffect as $ilZGV$useEffect, cloneElement as $ilZGV$cloneElement} from "react";
-import {useTextField as $ilZGV$useTextField, useLocale as $ilZGV$useLocale, useNumberField as $ilZGV$useNumberField, useToggleButton as $ilZGV$useToggleButton, useCheckbox as $ilZGV$useCheckbox, useCheckboxGroupItem as $ilZGV$useCheckboxGroupItem, useFocusRing as $ilZGV$useFocusRing, VisuallyHidden as $ilZGV$VisuallyHidden, useCheckboxGroup as $ilZGV$useCheckboxGroup, useRadio as $ilZGV$useRadio, useRadioGroup as $ilZGV$useRadioGroup, useMenuTrigger as $ilZGV$useMenuTrigger, usePress as $ilZGV$usePress, useListBox as $ilZGV$useListBox, useOption as $ilZGV$useOption, useListBoxSection as $ilZGV$useListBoxSection, usePopover as $ilZGV$usePopover, Overlay as $ilZGV$Overlay, useCalendar as $ilZGV$useCalendar, useCalendarGrid as $ilZGV$useCalendarGrid, useCalendarCell as $ilZGV$useCalendarCell, mergeProps as $ilZGV$mergeProps, useDatePicker as $ilZGV$useDatePicker, useDateField as $ilZGV$useDateField, useDateSegment as $ilZGV$useDateSegment, useDrop as $ilZGV$useDrop, useProgressBar as $ilZGV$useProgressBar, useTabList as $ilZGV$useTabList, useTab as $ilZGV$useTab, useTabPanel as $ilZGV$useTabPanel, useHover as $ilZGV$useHover, useSwitch as $ilZGV$useSwitch, useModalOverlay as $ilZGV$useModalOverlay, useDialog as $ilZGV$useDialog} from "react-aria";
+import {useTextField as $ilZGV$useTextField, useLocale as $ilZGV$useLocale, useNumberField as $ilZGV$useNumberField, useToggleButton as $ilZGV$useToggleButton, useCheckbox as $ilZGV$useCheckbox, useCheckboxGroupItem as $ilZGV$useCheckboxGroupItem, useFocusRing as $ilZGV$useFocusRing, VisuallyHidden as $ilZGV$VisuallyHidden, useCheckboxGroup as $ilZGV$useCheckboxGroup, useRadio as $ilZGV$useRadio, useRadioGroup as $ilZGV$useRadioGroup, useMenuTrigger as $ilZGV$useMenuTrigger, usePress as $ilZGV$usePress, HiddenSelect as $ilZGV$HiddenSelect, useListBox as $ilZGV$useListBox, useOption as $ilZGV$useOption, useListBoxSection as $ilZGV$useListBoxSection, usePopover as $ilZGV$usePopover, Overlay as $ilZGV$Overlay, useCalendar as $ilZGV$useCalendar, useCalendarGrid as $ilZGV$useCalendarGrid, useCalendarCell as $ilZGV$useCalendarCell, mergeProps as $ilZGV$mergeProps, useDatePicker as $ilZGV$useDatePicker, useDateField as $ilZGV$useDateField, useDateSegment as $ilZGV$useDateSegment, useDrop as $ilZGV$useDrop, useProgressBar as $ilZGV$useProgressBar, useTabList as $ilZGV$useTabList, useTab as $ilZGV$useTab, useTabPanel as $ilZGV$useTabPanel, useHover as $ilZGV$useHover, useSwitch as $ilZGV$useSwitch, useModalOverlay as $ilZGV$useModalOverlay, useDialog as $ilZGV$useDialog} from "react-aria";
 import {HiMinus as $ilZGV$HiMinus, HiPlus as $ilZGV$HiPlus, HiX as $ilZGV$HiX, HiSelector as $ilZGV$HiSelector, HiChevronLeft as $ilZGV$HiChevronLeft, HiChevronRight as $ilZGV$HiChevronRight, HiOutlineCalendar as $ilZGV$HiOutlineCalendar, HiOutlineDocumentAdd as $ilZGV$HiOutlineDocumentAdd, HiOutlineCheckCircle as $ilZGV$HiOutlineCheckCircle, HiOutlineTrash as $ilZGV$HiOutlineTrash, HiOutlineExclamationCircle as $ilZGV$HiOutlineExclamationCircle, HiOutlineRefresh as $ilZGV$HiOutlineRefresh, HiOutlinePaperClip as $ilZGV$HiOutlinePaperClip, HiCheck as $ilZGV$HiCheck, HiOutlineGlobe as $ilZGV$HiOutlineGlobe, HiOutlineCurrencyDollar as $ilZGV$HiOutlineCurrencyDollar, HiOutlineGlobeAlt as $ilZGV$HiOutlineGlobeAlt, HiOutlineArchive as $ilZGV$HiOutlineArchive, HiOutlineAnnotation as $ilZGV$HiOutlineAnnotation, HiOutlineFire as $ilZGV$HiOutlineFire, HiOutlineBadgeCheck as $ilZGV$HiOutlineBadgeCheck, HiOutlineSparkles as $ilZGV$HiOutlineSparkles, HiOutlineSpeakerphone as $ilZGV$HiOutlineSpeakerphone, HiOutlineCreditCard as $ilZGV$HiOutlineCreditCard, HiOutlineHeart as $ilZGV$HiOutlineHeart, HiOutlineLocationMarker as $ilZGV$HiOutlineLocationMarker, HiOutlineCursorClick as $ilZGV$HiOutlineCursorClick, HiOutlineLightningBolt as $ilZGV$HiOutlineLightningBolt, HiOutlineDocumentDownload as $ilZGV$HiOutlineDocumentDownload, HiOutlineTag as $ilZGV$HiOutlineTag, HiOutlineAtSymbol as $ilZGV$HiOutlineAtSymbol, HiOutlineUserCircle as $ilZGV$HiOutlineUserCircle, HiOutlineTerminal as $ilZGV$HiOutlineTerminal, HiOutlineMoon as $ilZGV$HiOutlineMoon} from "react-icons/hi";
 import {useNumberFieldState as $ilZGV$useNumberFieldState, useToggleState as $ilZGV$useToggleState, useCheckboxGroupState as $ilZGV$useCheckboxGroupState, useRadioGroupState as $ilZGV$useRadioGroupState, useMenuTriggerState as $ilZGV$useMenuTriggerState, useListState as $ilZGV$useListState, Item as $ilZGV$Item, Section as $ilZGV$Section, useCalendarState as $ilZGV$useCalendarState, useDatePickerState as $ilZGV$useDatePickerState, useDateFieldState as $ilZGV$useDateFieldState, useTabListState as $ilZGV$useTabListState, useOverlayTriggerState as $ilZGV$useOverlayTriggerState} from "react-stately";
 import {createCalendar as $ilZGV$createCalendar, endOfMonth as $ilZGV$endOfMonth, getWeeksInMonth as $ilZGV$getWeeksInMonth, isSameMonth as $ilZGV$isSameMonth, CalendarDate as $ilZGV$CalendarDate} from "@internationalized/date";
@@ -1036,24 +1036,27 @@ function $11794b81e576e85c$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, $ilZGV$jsx)((0, $0edad8c8c01688ea$export$6e2c8f0811a474ce), {
             items: sectionChildren,
             title: getSectionLabel?.(item),
             children: (item)=>/*#__PURE__*/ (0, $ilZGV$jsx)((0, $0edad8c8c01688ea$export$36d18380658d5d20), {
+                    textValue: item?.[labelKey ?? "label"],
                     children: item?.[labelKey ?? "label"] ?? renderOption?.(item)
                 }, item?.[valueKey ?? "id"])
         }, value);
         return /*#__PURE__*/ (0, $ilZGV$jsx)((0, $0edad8c8c01688ea$export$36d18380658d5d20), {
-            children: label ?? renderOption?.(item)
+            textValue: label,
+            children: renderOption?.(item) ?? label
         }, item?.[valueKey ?? "id"]);
     };
 }
 
 
-function $0edad8c8c01688ea$export$41f133550aa26f48({ state: state , color: color , ...props }) {
+
+function $0edad8c8c01688ea$export$41f133550aa26f48({ state: state , color: color , width: width = 300 , ...props }) {
     const internalState = (0, $ilZGV$useListState)({
         ...props,
         children: (0, $11794b81e576e85c$export$3d7d0414f6db67e7)(props)
@@ -1067,7 +1070,8 @@ function $0edad8c8c01688ea$export$41f133550aa26f48({ state: state , color: color
     return /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
         "data-color": color,
         style: {
-            width: 400
+            width: width,
+            minWidth: 300
         },
         stack: true,
         gap: "md",
@@ -1127,7 +1131,9 @@ function $0edad8c8c01688ea$var$ListOption({ state: state , item: item  }) {
         "data-pressed": isPressed,
         "data-selected": isSelected,
         ...optionProps,
-        ...item.props,
+        ...(0, $78326c047a4ec4ce$export$30a06c8d3562193f)(item.props, [
+            "textValue"
+        ]),
         ref: optionRef,
         children: item.rendered
     });
@@ -1221,6 +1227,10 @@ const $27c8d3e417f30271$export$b4e0e71242920c6a = {
     pill: "full",
     rounded: undefined
 };
+function $27c8d3e417f30271$var$ps(styles) {
+// 1. iterate over the keys of the styles object
+// 2. for each key, check is is valid css property
+}
 
 
 function $7a4e1d1fedc396c7$export$d41d9ab3de2def3d(text) {
@@ -1279,11 +1289,10 @@ $ee32300ad59b8528$export$3288d34c523a1192.displayName = "Tag";
 function $b107431cb75f5c0b$export$5b6b19405a83ff9d({ state: state , children: children , ...props }) {
     const popoverRef = $ilZGV$useRef(null);
     const theme = (0, $362781724bb4213a$export$93d4e7f90805808f)();
-    const { popoverProps: popoverProps , underlayProps: underlayProps , placement: placement  } = (0, $ilZGV$usePopover)({
+    const { popoverProps: popoverProps , underlayProps: underlayProps  } = (0, $ilZGV$usePopover)({
         ...props,
         popoverRef: popoverRef
     }, state);
-    console.log(popoverProps, placement);
     return /*#__PURE__*/ (0, $ilZGV$jsxs)((0, $ilZGV$Overlay), {
         children: [
             /*#__PURE__*/ (0, $ilZGV$jsx)("div", {
@@ -1304,7 +1313,10 @@ function $b107431cb75f5c0b$export$5b6b19405a83ff9d({ state: state , children: ch
 
 
 
-function $0d71c1f2b7db4b85$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 $0d71c1f2b7db4b85$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, $a0b7975efdcbad3c$export$450c36e0b0e62ccd)();
+    const [isFocused, setIsFocused] = $ilZGV$useState(false);
     const triggerState = (0, $ilZGV$useMenuTriggerState)({});
     const listState = (0, $ilZGV$useListState)({
         ...props,
@@ -1351,31 +1363,56 @@ function $0d71c1f2b7db4b85$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, $ilZGV$jsxs)((0, $6cd538350b429e7f$export$e71c4d32a2263218), {
+        as: "span",
+        position: "relative",
         stretchX: true,
         children: [
+            selectionMode === "single" && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $ilZGV$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, $ilZGV$jsxs)((0, $7f9359c321db931d$export$f51f4c4ede09e011), {
                 "data-radius": getRadius(),
                 gap: "2xs",
                 stack: true,
-                className: "p-input-group",
+                className: (0, $c4c58f2604e361a3$export$a274e22fb40f762e)({
+                    [`${space.compactItemWrapperAdjust}`]: true,
+                    "p-input-group": true,
+                    [`${className}`]: !!className
+                }),
                 "data-size": size,
                 "data-color": color,
                 children: [
-                    /*#__PURE__*/ (0, $ilZGV$jsx)((0, $d0e59e72d7236fb2$export$2e2bcd8739ae039), {
+                    label && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $d0e59e72d7236fb2$export$2e2bcd8739ae039), {
                         children: label
                     }),
                     /*#__PURE__*/ (0, $ilZGV$jsxs)("div", {
+                        "data-selection-mode": selectionMode,
                         tabIndex: 0,
                         role: "button",
                         ref: triggerRef,
                         color: "gray",
                         className: (0, $c4c58f2604e361a3$export$a274e22fb40f762e)({
                             "p-input": true,
-                            "p-select": true
+                            "p-select": true,
+                            ...space.classNames
                         }),
                         "data-appearance": appearance,
                         ...triggerProps,
@@ -1390,12 +1427,14 @@ function $0d71c1f2b7db4b85$export$ef9b1a59e592288f({ label: label , selectionMod
                 ]
             }),
             triggerState.isOpen && /*#__PURE__*/ (0, $ilZGV$jsx)((0, $b107431cb75f5c0b$export$5b6b19405a83ff9d), {
+                placement: "bottom start",
                 offset: 4,
                 shouldUpdatePosition: true,
                 triggerRef: triggerRef,
                 state: triggerState,
                 children: /*#__PURE__*/ (0, $ilZGV$jsx)((0, $0edad8c8c01688ea$export$41f133550aa26f48), {
-                    color: color,
+                    width: triggerRef.current?.getBoundingClientRect().width,
+                    color: listBoxColor ?? color,
                     shouldFocusOnHover: true,
                     state: listState,
                     ...props
@@ -2835,5 +2874,5 @@ function $0f36a360c83514a5$export$39299b56cfd4e361({ appearance: appearance = "o
 
 
 
-export {$6cd538350b429e7f$export$e71c4d32a2263218 as Box, $5b3bb99cde624b45$export$ef2184bd89960b14 as Grid, $5b3bb99cde624b45$export$9eb849b9b922d396 as GridItem, $7f9359c321db931d$export$f51f4c4ede09e011 as Flex, $82670c5be238db82$export$f5b8910cec6cf069 as Input, $4113140783615547$export$6bf0cd3a219bbade as NumberInput, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6 as Text, $bb3cc805e0118109$export$379139ebc1c2b235 as Textarea, $c104f9e833419de4$export$353f5b6fc5456de1 as Button, $e588944490abcca5$export$c25acd513dcc8062 as IconButton, $5072ac6039cf0888$export$69b1032f2ecdf404 as ButtonGroup, $775c2fb4fd112efa$export$48513f6b9f8ce62d as Checkbox, $febe415bf449fc90$export$4aa08d5625cb8ead as CheckboxGroup, $1c477959d830be20$export$d7b12c4107be0d61 as Radio, $1c477959d830be20$export$a98f0dcb43a68a25 as RadioGroup, $965d97a4ec6bd81a$export$f8afaea2e9656b91 as RadioCard, $0d71c1f2b7db4b85$export$ef9b1a59e592288f as Select, $964af2d63cba5174$export$5109c6dd95d8fb00 as DatePicker, $5fd3904f9eb3218a$export$e1aef45b828286de as Calendar, $b48b8d81801d004e$export$e2255cf6045e8d47 as Avatar, $fed95b431ec7b960$export$1a5cb5295a7d2749 as FileUploader, $cf42d20e3b8cc34e$export$1ff3c3f08ae963c0 as Separator, $04177bfc4bfecca2$export$b25a304ec7d746bb as Progress, $601ef0275f45de5d$export$3b0d6d7590275603 as Loader, $8698d4cdcb757ebb$export$be92b6f5f03c0fe9 as Root, $8698d4cdcb757ebb$export$6d08773d2e66f8f2 as Item, $ee32300ad59b8528$export$3288d34c523a1192 as Tag, $0932ff499514e051$export$b5d5cf8927ab7262 as Switch, $d14d6b3a193e099d$export$dbada5ace43900dd as ColorTray, $1c3bc82fac1fb4c8$export$50e381fea3a45244 as IconTray, $4faec2397ebc0ec1$export$ea98c603db73aee7 as Sticker, $e0a55446ef2d8454$export$1aaa3deaa90ea306 as Tabs, $4d38d87b55811352$export$54ec01a60f47d33d as Table, $9e2f19f5522a9ed4$export$e6a97ba2cae5bb94 as Timeline, $27dfef5c84f0ece2$export$2b77a92f1a5ad772 as Modal, $a0b7975efdcbad3c$export$eef1e68107c58ef2 as Space, $0f36a360c83514a5$export$39299b56cfd4e361 as TagInput, $362781724bb4213a$export$d8964aec282183a3 as ThemeProvider, $362781724bb4213a$export$93d4e7f90805808f as useTheme};
+export {$6cd538350b429e7f$export$e71c4d32a2263218 as Box, $5b3bb99cde624b45$export$ef2184bd89960b14 as Grid, $5b3bb99cde624b45$export$9eb849b9b922d396 as GridItem, $7f9359c321db931d$export$f51f4c4ede09e011 as Flex, $82670c5be238db82$export$f5b8910cec6cf069 as Input, $4113140783615547$export$6bf0cd3a219bbade as NumberInput, $ad6bb3d9e1e05700$export$5f1af8db9871e1d6 as Text, $bb3cc805e0118109$export$379139ebc1c2b235 as Textarea, $c104f9e833419de4$export$353f5b6fc5456de1 as Button, $e588944490abcca5$export$c25acd513dcc8062 as IconButton, $5072ac6039cf0888$export$69b1032f2ecdf404 as ButtonGroup, $775c2fb4fd112efa$export$48513f6b9f8ce62d as Checkbox, $febe415bf449fc90$export$4aa08d5625cb8ead as CheckboxGroup, $1c477959d830be20$export$d7b12c4107be0d61 as Radio, $1c477959d830be20$export$a98f0dcb43a68a25 as RadioGroup, $965d97a4ec6bd81a$export$f8afaea2e9656b91 as RadioCard, $0d71c1f2b7db4b85$export$ef9b1a59e592288f as Select, $964af2d63cba5174$export$5109c6dd95d8fb00 as DatePicker, $5fd3904f9eb3218a$export$e1aef45b828286de as Calendar, $b48b8d81801d004e$export$e2255cf6045e8d47 as Avatar, $fed95b431ec7b960$export$1a5cb5295a7d2749 as FileUploader, $cf42d20e3b8cc34e$export$1ff3c3f08ae963c0 as Separator, $04177bfc4bfecca2$export$b25a304ec7d746bb as Progress, $601ef0275f45de5d$export$3b0d6d7590275603 as Loader, $8698d4cdcb757ebb$export$be92b6f5f03c0fe9 as Root, $8698d4cdcb757ebb$export$6d08773d2e66f8f2 as Item, $ee32300ad59b8528$export$3288d34c523a1192 as Tag, $0932ff499514e051$export$b5d5cf8927ab7262 as Switch, $d14d6b3a193e099d$export$dbada5ace43900dd as ColorTray, $1c3bc82fac1fb4c8$export$50e381fea3a45244 as IconTray, $4faec2397ebc0ec1$export$ea98c603db73aee7 as Sticker, $e0a55446ef2d8454$export$1aaa3deaa90ea306 as Tabs, $4d38d87b55811352$export$54ec01a60f47d33d as Table, $9e2f19f5522a9ed4$export$e6a97ba2cae5bb94 as Timeline, $27dfef5c84f0ece2$export$2b77a92f1a5ad772 as Modal, $27dfef5c84f0ece2$export$33ffd74ebf07f060 as useModal, $a0b7975efdcbad3c$export$eef1e68107c58ef2 as Space, $0f36a360c83514a5$export$39299b56cfd4e361 as TagInput, $362781724bb4213a$export$d8964aec282183a3 as ThemeProvider, $362781724bb4213a$export$93d4e7f90805808f as useTheme};
 //# sourceMappingURL=module.js.map