@parrot-co/parrot-ui 0.0.92 → 0.0.94

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/main.js CHANGED
@@ -1030,6 +1030,8 @@ function $0f347092d3465402$export$5b6b19405a83ff9d({ state: state, children: chi
1030
1030
 
1031
1031
 
1032
1032
 
1033
+
1034
+
1033
1035
  const $724eace27ebf345b$var$DropdownContext = /*#__PURE__*/ $8zHUo$react.createContext(null);
1034
1036
  function $724eace27ebf345b$export$e44a253a59704894({ children: children, ...props }) {
1035
1037
  const triggerRef = $8zHUo$react.useRef(null);
@@ -1066,12 +1068,12 @@ function $724eace27ebf345b$export$e7eb525bc415b4b4({ asChild: asChild, children:
1066
1068
  children: children
1067
1069
  });
1068
1070
  }
1069
- function $724eace27ebf345b$export$d9b273488cd8ce6f(props) {
1071
+ function $724eace27ebf345b$export$d9b273488cd8ce6f({ placement: placement = "bottom start", offset: offset = 8, ...props }) {
1070
1072
  const ctx = $8zHUo$react.useContext($724eace27ebf345b$var$DropdownContext);
1071
1073
  if (!ctx?.triggerState.isOpen) return null;
1072
1074
  return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $0f347092d3465402$export$5b6b19405a83ff9d), {
1073
- placement: "bottom start",
1074
- offset: 8,
1075
+ placement: placement,
1076
+ offset: offset,
1075
1077
  state: ctx?.triggerState,
1076
1078
  triggerRef: ctx?.triggerRef,
1077
1079
  children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($724eace27ebf345b$var$MenuInner, {
@@ -1079,7 +1081,7 @@ function $724eace27ebf345b$export$d9b273488cd8ce6f(props) {
1079
1081
  })
1080
1082
  });
1081
1083
  }
1082
- function $724eace27ebf345b$var$MenuInner({ menuHeader: menuHeader, menuFooter: menuFooter, ...props }) {
1084
+ function $724eace27ebf345b$var$MenuInner({ menuHeader: menuHeader, menuFooter: menuFooter, className: className, color: color, maxHeight: maxHeight = 300, minWidth: minWidth = 200, maxWidth: maxWidth, ...props }) {
1083
1085
  const state = (0, $8zHUo$reactstately.useTreeState)(props);
1084
1086
  const ref = $8zHUo$react.useRef(null);
1085
1087
  const { menuProps: menuProps } = (0, $8zHUo$reactaria.useMenu)({
@@ -1100,11 +1102,13 @@ function $724eace27ebf345b$var$MenuInner({ menuHeader: menuHeader, menuFooter: m
1100
1102
  stack: true,
1101
1103
  ref: ref,
1102
1104
  ...menuProps,
1103
- "data-color": theme?.color ?? "violet",
1105
+ "data-color": color ?? theme?.color ?? "violet",
1104
1106
  "data-radius": theme?.radius ?? "lg",
1105
- className: "p-list-box-wrapper",
1107
+ className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-list-box-wrapper", className),
1106
1108
  style: {
1107
- minWidth: `max(200px, ${`${props.minWidth}`.replace("px", "")}px)`
1109
+ minWidth: `max(200px, ${`${minWidth}`.replace("px", "")}px)`,
1110
+ maxWidth: `${`${maxWidth}`.replace("px", "")}px`,
1111
+ maxHeight: `${`${maxHeight}`.replace("px", "")}px`
1108
1112
  },
1109
1113
  children: [
1110
1114
  resolvedMenuHeader(),
@@ -1114,7 +1118,8 @@ function $724eace27ebf345b$var$MenuInner({ menuHeader: menuHeader, menuFooter: m
1114
1118
  ].map((item)=>{
1115
1119
  if (item.type === "section") return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($724eace27ebf345b$var$MenuSectionInner, {
1116
1120
  state: state,
1117
- section: item
1121
+ section: item,
1122
+ ...item.props
1118
1123
  }, item.key);
1119
1124
  return /*#__PURE__*/ (0, $8zHUo$react.createElement)($724eace27ebf345b$var$MenuItemInner, {
1120
1125
  ...item.props,
@@ -1130,24 +1135,59 @@ function $724eace27ebf345b$var$MenuInner({ menuHeader: menuHeader, menuFooter: m
1130
1135
  }
1131
1136
  function $724eace27ebf345b$var$MenuItemInner({ state: state, item: item, ...otherProps }) {
1132
1137
  const ref = $8zHUo$react.useRef(null);
1133
- const { menuItemProps: menuItemProps, isSelected: isSelected, isFocused: isFocused, isPressed: isPressed, isDisabled: isDisabled } = (0, $8zHUo$reactaria.useMenuItem)({
1138
+ const { menuItemProps: menuItemProps, isSelected: isSelected, isFocused: isFocused, isPressed: isPressed, isDisabled: isDisabled, descriptionProps: descriptionProps } = (0, $8zHUo$reactaria.useMenuItem)({
1134
1139
  key: item?.key
1135
1140
  }, state, ref);
1136
- const { className: className, style: style, isReadOnly: isReadOnly } = otherProps;
1137
- return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
1141
+ const { className: className, style: style, isReadOnly: isReadOnly, icon: icon, color: color, description: description, label: label } = otherProps;
1142
+ return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("li", {
1138
1143
  ref: ref,
1139
- className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-list-option"),
1144
+ className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-list-option p-menu-item"),
1140
1145
  "data-selected": isSelected,
1141
1146
  "data-focused": isFocused,
1142
1147
  "data-pressed": isPressed,
1143
1148
  "data-disabled": isDisabled,
1144
1149
  "data-readonly": isReadOnly,
1145
1150
  style: style,
1151
+ "data-color": color,
1146
1152
  ...menuItemProps,
1147
- children: item.rendered
1153
+ children: [
1154
+ /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
1155
+ align: "center",
1156
+ children: [
1157
+ icon && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
1158
+ className: "p-list-option-icon-wrapper",
1159
+ children: /*#__PURE__*/ $8zHUo$react.isValidElement(icon) && /*#__PURE__*/ $8zHUo$react.cloneElement(icon, {
1160
+ className: "p-list-option-icon",
1161
+ size: 18,
1162
+ ...icon?.props
1163
+ })
1164
+ }),
1165
+ /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
1166
+ gap: "3xs",
1167
+ stack: true,
1168
+ children: [
1169
+ /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
1170
+ as: "div",
1171
+ color: "black",
1172
+ children: label ?? item.rendered
1173
+ }),
1174
+ description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
1175
+ as: "div",
1176
+ lineHeight: "base",
1177
+ ...descriptionProps,
1178
+ children: description
1179
+ })
1180
+ ]
1181
+ })
1182
+ ]
1183
+ }),
1184
+ isSelected && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reacticonshi.HiCheck), {
1185
+ className: "selected-marker"
1186
+ })
1187
+ ]
1148
1188
  });
1149
1189
  }
1150
- function $724eace27ebf345b$var$MenuSectionInner({ state: state, section: section }) {
1190
+ function $724eace27ebf345b$var$MenuSectionInner({ state: state, section: section, className: className, style: style }) {
1151
1191
  const { itemProps: itemProps, headingProps: headingProps, groupProps: groupProps } = (0, $8zHUo$reactaria.useMenuSection)({
1152
1192
  heading: section?.rendered,
1153
1193
  "aria-label": section?.["aria-label"]
@@ -1159,30 +1199,41 @@ function $724eace27ebf345b$var$MenuSectionInner({ state: state, section: section
1159
1199
  if (state?.collection.getChildren) return [
1160
1200
  ...state.collection.getChildren(section.key)
1161
1201
  ];
1162
- return [];
1202
+ return [
1203
+ ...section.childNodes
1204
+ ];
1163
1205
  }
1164
1206
  return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
1165
- className: "p-list-section",
1207
+ stack: true,
1208
+ as: "ul",
1209
+ style: style,
1210
+ className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-list-section"),
1166
1211
  children: [
1167
- /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
1212
+ section.key !== state.collection.getFirstKey() && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
1168
1213
  className: "p-list-separator",
1169
1214
  ...separatorProps
1170
1215
  }),
1171
- /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
1216
+ /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("li", {
1172
1217
  ...itemProps,
1173
- children: section?.rendered && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("span", {
1174
- ...headingProps,
1175
- children: section?.rendered
1176
- })
1177
- }),
1178
- /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("ul", {
1179
- ...groupProps,
1180
- children: getChildren().map((item)=>{
1181
- return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($724eace27ebf345b$var$MenuItemInner, {
1182
- state: state,
1183
- item: item
1184
- }, item.key);
1185
- })
1218
+ children: [
1219
+ section?.rendered && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
1220
+ as: "h4",
1221
+ className: "p-list-section-header",
1222
+ ...headingProps,
1223
+ children: section?.rendered
1224
+ }),
1225
+ /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("ul", {
1226
+ ...groupProps,
1227
+ children: getChildren().map((item)=>{
1228
+ return /*#__PURE__*/ (0, $8zHUo$react.createElement)($724eace27ebf345b$var$MenuItemInner, {
1229
+ ...item.props,
1230
+ state: state,
1231
+ item: item,
1232
+ key: item.key
1233
+ });
1234
+ })
1235
+ })
1236
+ ]
1186
1237
  })
1187
1238
  ]
1188
1239
  });
@@ -1229,7 +1280,6 @@ function $fc43ab93aaa777d9$export$3d7d0414f6db67e7({ children: children, renderO
1229
1280
  const label = item?.[labelKey ?? "label"];
1230
1281
  const value = item?.[valueKey ?? "id"];
1231
1282
  const sectionChildren = item?.[sectionKey ?? "children"] ?? [];
1232
- console.log(label, "label");
1233
1283
  if (item?.[sectionKey]) return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $dcfc4542aa84c062$export$6e2c8f0811a474ce), {
1234
1284
  items: sectionChildren,
1235
1285
  title: getSectionLabel?.(item),
@@ -1844,7 +1894,9 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
1844
1894
  position: "relative",
1845
1895
  stretchX: true,
1846
1896
  children: [
1847
- selectionMode === "single" && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.HiddenSelect), {
1897
+ selectionMode === "single" && // Implement a hidden select element to allow for native form submission
1898
+ // should work for both single and multiple selection modes
1899
+ /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.HiddenSelect), {
1848
1900
  triggerRef: triggerRef,
1849
1901
  label: label,
1850
1902
  name: props.name,
@@ -2879,6 +2931,7 @@ function $9ff025417b0a683c$export$e6a97ba2cae5bb94({ items: items, render: rende
2879
2931
 
2880
2932
 
2881
2933
 
2934
+
2882
2935
  function $1278141024f0bc4d$export$c6fdb837b070b4ff({ children: children, state: state, ...props }) {
2883
2936
  const modalRef = $8zHUo$react.useRef(null);
2884
2937
  const { modalProps: modalProps, underlayProps: underlayProps } = (0, $8zHUo$reactaria.useModalOverlay)(props, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -2897,7 +2950,7 @@ function $1278141024f0bc4d$export$c6fdb837b070b4ff({ children: children, state:
2897
2950
  })
2898
2951
  });
2899
2952
  }
2900
- function $1278141024f0bc4d$var$Dialog({ width: width = 400, title: title, onCancel: onCancel, onConfirm: onConfirm, confirmLabel: confirmLabel = "Confirm", cancelLabel: cancelLabel = "Cancel", description: description, children: children, confirmButtonProps: confirmButtonProps, cancelButtonProps: cancelButtonProps, variant: variant = "modal", showCloseButton: showCloseButton = true, onClose: onClose, onOpenChange: onOpenChange, ...props }) {
2953
+ function $1278141024f0bc4d$var$Dialog({ width: width = 400, title: title, onCancel: onCancel, onConfirm: onConfirm, confirmLabel: confirmLabel = "Confirm", cancelLabel: cancelLabel = "Cancel", description: description, children: children, confirmButtonProps: confirmButtonProps, cancelButtonProps: cancelButtonProps, variant: variant = "modal", showCloseButton: showCloseButton = true, onClose: onClose, onOpenChange: onOpenChange, className: className, style: style, hideTitle: hideTitle, ...props }) {
2901
2954
  const dialogRef = $8zHUo$react.useRef(null);
2902
2955
  const { dialogProps: dialogProps, titleProps: titleProps } = (0, $8zHUo$reactaria.useDialog)({
2903
2956
  role: "dialog",
@@ -2909,15 +2962,17 @@ function $1278141024f0bc4d$var$Dialog({ width: width = 400, title: title, onCanc
2909
2962
  }
2910
2963
  return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)("div", {
2911
2964
  "data-radius": "md",
2912
- className: "p-modal-content",
2965
+ className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-modal-content", className),
2913
2966
  "data-variant": variant,
2914
2967
  style: {
2915
- minWidth: width
2968
+ minWidth: width,
2969
+ ...style
2916
2970
  },
2917
2971
  ref: dialogRef,
2918
2972
  ...dialogProps,
2919
2973
  children: [
2920
- /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
2974
+ !hideTitle && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
2975
+ align: "center",
2921
2976
  as: "header",
2922
2977
  justify: "space-between",
2923
2978
  gap: "2xl",
@@ -2956,6 +3011,7 @@ function $1278141024f0bc4d$var$Dialog({ width: width = 400, title: title, onCanc
2956
3011
  ]
2957
3012
  }),
2958
3013
  /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
3014
+ stack: true,
2959
3015
  className: "p-modal-body",
2960
3016
  children: children
2961
3017
  }),