@dxos/react-ui-pickers 0.8.1-staging.9eaf14f → 0.8.2-main.10c050d

package/dist/lib/node-esm/index.mjs

@@ -1,273 +1,283 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // packages/ui/react-ui-pickers/src/components/EmojiPicker/EmojiPicker.tsx
+import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import emojiData from "@emoji-mart/data";
 import EmojiMart from "@emoji-mart/react";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import { Button, Popover, Toolbar, Tooltip, useMediaQuery, useThemeContext, useTranslation, Icon, ButtonGroup } from "@dxos/react-ui";
 var EmojiPickerToolbarButton = ({ classNames, emoji, disabled, defaultEmoji, onChangeEmoji }) => {
-  const { t } = useTranslation("os");
-  const { themeMode } = useThemeContext();
-  const [_emojiValue, setEmojiValue] = useControllableState({
-    prop: emoji,
-    onChange: onChangeEmoji,
-    defaultProp: defaultEmoji
-  });
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-  const suppressNextTooltip = useRef(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement(Tooltip.Root, {
-    open: triggerTooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (suppressNextTooltip.current) {
-        setTriggerTooltipOpen(false);
-        suppressNextTooltip.current = false;
-      } else {
-        setTriggerTooltipOpen(nextOpen);
+  var _effect = _useSignals();
+  try {
+    const { t } = useTranslation("os");
+    const { themeMode } = useThemeContext();
+    const [_emojiValue, setEmojiValue] = useControllableState({
+      prop: emoji,
+      onChange: onChangeEmoji,
+      defaultProp: defaultEmoji
+    });
+    const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+    return /* @__PURE__ */ React.createElement(Popover.Root, {
+      open: emojiPickerOpen,
+      onOpenChange: (nextOpen) => {
+        setEmojiPickerOpen(nextOpen);
       }
-    }
-  }, /* @__PURE__ */ React.createElement(Popover.Root, {
-    open: emojiPickerOpen,
-    onOpenChange: (nextOpen) => {
-      setEmojiPickerOpen(nextOpen);
-      suppressNextTooltip.current = true;
-    }
-  }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Toolbar.Button, {
-    classNames: [
-      "gap-2 text-2xl plb-1",
-      classNames
-    ],
-    disabled
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "sr-only"
-  }, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--user-circle--regular",
-    size: 5
-  })))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
-    side: "bottom"
-  }, t("select emoji label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
-    side: "bottom",
-    onKeyDownCapture: (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        setEmojiPickerOpen(false);
-        suppressNextTooltip.current = true;
-      }
-    }
-  }, /* @__PURE__ */ React.createElement(EmojiMart, {
-    data: emojiData,
-    onEmojiSelect: ({ native }) => {
-      if (native) {
-        setEmojiValue(native);
-        setEmojiPickerOpen(false);
+    }, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+      asChild: true,
+      content: t("select emoji label"),
+      side: "bottom"
+    }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React.createElement(Toolbar.Button, {
+      classNames: [
+        "gap-2 text-2xl plb-1",
+        classNames
+      ],
+      disabled
+    }, /* @__PURE__ */ React.createElement("span", {
+      className: "sr-only"
+    }, t("select emoji label")), /* @__PURE__ */ React.createElement(Icon, {
+      icon: "ph--user-circle--regular",
+      size: 5
+    })))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, {
+      side: "bottom",
+      onKeyDownCapture: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          setEmojiPickerOpen(false);
+        }
       }
-    },
-    autoFocus: true,
-    maxFrequentRows: 0,
-    noCountryFlags: true,
-    theme: themeMode
-  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null)))));
+    }, /* @__PURE__ */ React.createElement(EmojiMart, {
+      data: emojiData,
+      onEmojiSelect: ({ native }) => {
+        if (native) {
+          setEmojiValue(native);
+          setEmojiPickerOpen(false);
+        }
+      },
+      autoFocus: true,
+      maxFrequentRows: 0,
+      noCountryFlags: true,
+      theme: themeMode
+    }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
 };
 var EmojiPickerBlock = ({ disabled, defaultEmoji, emoji, onChangeEmoji, onClickClear, triggerVariant = "ghost", classNames }) => {
-  const { t } = useTranslation("os");
-  const [isMd] = useMediaQuery("md", {
-    ssr: false
-  });
-  const [emojiValue, setEmojiValue] = useControllableState({
-    prop: emoji,
-    onChange: onChangeEmoji,
-    defaultProp: defaultEmoji
-  });
-  const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
-  return /* @__PURE__ */ React.createElement(ButtonGroup, {
-    classNames
-  }, /* @__PURE__ */ React.createElement(Popover.Root, {
-    open: emojiPickerOpen,
-    onOpenChange: setEmojiPickerOpen
-  }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button, {
-    variant: triggerVariant,
-    classNames: "grow gap-2 text-2xl plb-1",
-    disabled
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "sr-only"
-  }, t("select emoji label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--caret-down--bold",
-    size: 3
-  }))), /* @__PURE__ */ React.createElement(Popover.Content, {
-    side: "right",
-    sideOffset: isMd ? 0 : -310,
-    onKeyDownCapture: (event) => {
-      if (event.key === "Escape") {
-        event.stopPropagation();
-        setEmojiPickerOpen(false);
-      }
-    }
-  }, /* @__PURE__ */ React.createElement(EmojiMart, {
-    data: emojiData,
-    onEmojiSelect: ({ native }) => {
-      if (native) {
-        setEmojiValue(native);
-        setEmojiPickerOpen(false);
+  var _effect = _useSignals();
+  try {
+    const { t } = useTranslation("os");
+    const [isMd] = useMediaQuery("md", {
+      ssr: false
+    });
+    const [emojiValue, setEmojiValue] = useControllableState({
+      prop: emoji,
+      onChange: onChangeEmoji,
+      defaultProp: defaultEmoji
+    });
+    const [emojiPickerOpen, setEmojiPickerOpen] = useState(false);
+    return /* @__PURE__ */ React.createElement(ButtonGroup, {
+      classNames
+    }, /* @__PURE__ */ React.createElement(Popover.Root, {
+      open: emojiPickerOpen,
+      onOpenChange: setEmojiPickerOpen
+    }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React.createElement(Button, {
+      variant: triggerVariant,
+      classNames: "grow gap-2 text-2xl plb-1",
+      disabled
+    }, /* @__PURE__ */ React.createElement("span", {
+      className: "sr-only"
+    }, t("select emoji label")), /* @__PURE__ */ React.createElement("span", null, emojiValue), /* @__PURE__ */ React.createElement(Icon, {
+      icon: "ph--caret-down--bold",
+      size: 3
+    }))), /* @__PURE__ */ React.createElement(Popover.Content, {
+      side: "right",
+      sideOffset: isMd ? 0 : -310,
+      onKeyDownCapture: (event) => {
+        if (event.key === "Escape") {
+          event.stopPropagation();
+          setEmojiPickerOpen(false);
+        }
       }
-    },
-    autoFocus: true,
-    maxFrequentRows: 0,
-    noCountryFlags: true
-  }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Root, null, /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React.createElement(Button, {
-    variant: triggerVariant,
-    onClick: onClickClear,
-    disabled
-  }, /* @__PURE__ */ React.createElement("span", {
-    className: "sr-only"
-  }, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
-    icon: "ph--arrow-counter-clockwise--regular",
-    size: 5
-  }))), /* @__PURE__ */ React.createElement(Tooltip.Portal, null, /* @__PURE__ */ React.createElement(Tooltip.Content, {
-    side: "right"
-  }, t("clear label"), /* @__PURE__ */ React.createElement(Tooltip.Arrow, null)))));
+    }, /* @__PURE__ */ React.createElement(EmojiMart, {
+      data: emojiData,
+      onEmojiSelect: ({ native }) => {
+        if (native) {
+          setEmojiValue(native);
+          setEmojiPickerOpen(false);
+        }
+      },
+      autoFocus: true,
+      maxFrequentRows: 0,
+      noCountryFlags: true
+    }), /* @__PURE__ */ React.createElement(Popover.Arrow, null))), /* @__PURE__ */ React.createElement(Tooltip.Trigger, {
+      asChild: true,
+      content: t("clear label"),
+      side: "right"
+    }, /* @__PURE__ */ React.createElement(Button, {
+      variant: triggerVariant,
+      onClick: onClickClear,
+      disabled
+    }, /* @__PURE__ */ React.createElement("span", {
+      className: "sr-only"
+    }, t("clear label")), /* @__PURE__ */ React.createElement(Icon, {
+      icon: "ph--arrow-counter-clockwise--regular",
+      size: 5
+    }))));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import React3 from "react";
 import { useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { hues } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-pickers/src/components/PickerButton/PickerButton.tsx
+import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React2, { useEffect, useRef as useRef2, useState as useState2 } from "react";
+import React2, { useEffect, useState as useState2 } from "react";
 import { Button as Button2, DropdownMenu, Icon as Icon2, Toolbar as Toolbar2, Tooltip as Tooltip2 } from "@dxos/react-ui";
 var PickerButton = ({ Component, disabled, classNames, defaultValue: _defaultValue, value: _value, values, label, icon, onChange, onReset, rootVariant = "button", iconSize = 5 }) => {
-  const [value, setValue] = useControllableState2({
-    prop: _value,
-    defaultProp: _defaultValue,
-    onChange
-  });
-  useEffect(() => setValue(_value), [
-    _value
-  ]);
-  const [open, setOpen] = useState2(false);
-  const suppressNextTooltip = useRef2(false);
-  const [triggerTooltipOpen, setTriggerTooltipOpen] = useState2(false);
-  const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
-  return /* @__PURE__ */ React2.createElement(Tooltip2.Root, {
-    open: triggerTooltipOpen,
-    onOpenChange: (nextOpen) => {
-      if (suppressNextTooltip.current) {
-        setTriggerTooltipOpen(false);
-        suppressNextTooltip.current = false;
-      } else {
-        setTriggerTooltipOpen(nextOpen);
-      }
-    }
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
-    modal: false,
-    open,
-    onOpenChange: (nextOpen) => {
-      setOpen(nextOpen);
-      suppressNextTooltip.current = true;
-    }
-  }, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
-    asChild: true
-  }, /* @__PURE__ */ React2.createElement(TriggerRoot, {
-    classNames: [
-      "gap-2 plb-1",
-      classNames
-    ],
-    disabled
-  }, /* @__PURE__ */ React2.createElement("span", {
-    className: "sr-only"
-  }, label), value && /* @__PURE__ */ React2.createElement(Component, {
-    value,
-    iconSize
-  }) || /* @__PURE__ */ React2.createElement(Icon2, {
-    icon,
-    size: iconSize
-  }), /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: "ph--caret-down--bold",
-    size: 3
-  })))), /* @__PURE__ */ React2.createElement(Tooltip2.Portal, null, /* @__PURE__ */ React2.createElement(Tooltip2.Content, {
-    side: "bottom"
-  }, label, /* @__PURE__ */ React2.createElement(Tooltip2.Arrow, null))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
-    side: "bottom",
-    classNames: "!is-min"
-  }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
-    classNames: "grid grid-cols-[repeat(6,min-content)]"
-  }, values.map((_value2) => {
-    return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
-      key: _value2,
-      checked: _value2 === value,
-      onCheckedChange: () => setValue(_value2),
-      classNames: "p-1 items-center justify-center aspect-square"
-    }, /* @__PURE__ */ React2.createElement(Component, {
-      value: _value2,
+  var _effect = _useSignals2();
+  try {
+    const [value, setValue] = useControllableState2({
+      prop: _value,
+      defaultProp: _defaultValue,
+      onChange
+    });
+    useEffect(() => setValue(_value), [
+      _value
+    ]);
+    const [open, setOpen] = useState2(false);
+    const TriggerRoot = rootVariant === "toolbar-button" ? Toolbar2.Button : Button2;
+    return /* @__PURE__ */ React2.createElement(DropdownMenu.Root, {
+      modal: false,
+      open,
+      onOpenChange: setOpen
+    }, /* @__PURE__ */ React2.createElement(Tooltip2.Trigger, {
+      asChild: true,
+      content: label,
+      side: "bottom"
+    }, /* @__PURE__ */ React2.createElement(DropdownMenu.Trigger, {
+      asChild: true
+    }, /* @__PURE__ */ React2.createElement(TriggerRoot, {
+      classNames: [
+        "gap-2 plb-1",
+        classNames
+      ],
+      disabled
+    }, /* @__PURE__ */ React2.createElement("span", {
+      className: "sr-only"
+    }, label), value && /* @__PURE__ */ React2.createElement(Component, {
+      value,
       iconSize
-    }));
-  }), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
-    onCheckedChange: () => onReset(),
-    classNames: "p-1 items-center justify-center aspect-square"
-  }, /* @__PURE__ */ React2.createElement(Icon2, {
-    icon: "ph--x--regular",
-    size: iconSize
-  }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null)))));
+    }) || /* @__PURE__ */ React2.createElement(Icon2, {
+      icon,
+      size: iconSize
+    }), /* @__PURE__ */ React2.createElement(Icon2, {
+      icon: "ph--caret-down--bold",
+      size: 3
+    })))), /* @__PURE__ */ React2.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React2.createElement(DropdownMenu.Content, {
+      side: "bottom",
+      classNames: "!is-min"
+    }, /* @__PURE__ */ React2.createElement(DropdownMenu.Viewport, {
+      classNames: "grid grid-cols-[repeat(6,min-content)]"
+    }, values.map((_value2) => {
+      return /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+        key: _value2,
+        checked: _value2 === value,
+        onCheckedChange: () => setValue(_value2),
+        classNames: "p-1 items-center justify-center aspect-square"
+      }, /* @__PURE__ */ React2.createElement(Component, {
+        value: _value2,
+        iconSize
+      }));
+    }), onReset && /* @__PURE__ */ React2.createElement(DropdownMenu.CheckboxItem, {
+      onCheckedChange: () => onReset(),
+      classNames: "p-1 items-center justify-center aspect-square"
+    }, /* @__PURE__ */ React2.createElement(Icon2, {
+      icon: "ph--x--regular",
+      size: iconSize
+    }))), /* @__PURE__ */ React2.createElement(DropdownMenu.Arrow, null))));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/ui/react-ui-pickers/src/components/HuePicker/HuePicker.tsx
 var HuePicker = (props) => {
-  const { t } = useTranslation2("os");
-  return /* @__PURE__ */ React3.createElement(PickerButton, {
-    Component: HuePreview,
-    label: t("select hue label"),
-    icon: "ph--palette--regular",
-    values: hues,
-    ...props
-  });
+  var _effect = _useSignals3();
+  try {
+    const { t } = useTranslation2("os");
+    return /* @__PURE__ */ React3.createElement(PickerButton, {
+      Component: HuePreview,
+      label: t("select hue label"),
+      icon: "ph--palette--regular",
+      values: hues,
+      ...props
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var HuePreview = ({ value }) => {
-  const size = 16;
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: "flex p-[2px] justify-center items-center"
-  }, /* @__PURE__ */ React3.createElement("svg", {
-    viewBox: `0 0 ${size} ${size}`,
-    className: "is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]"
-  }, /* @__PURE__ */ React3.createElement("rect", {
-    x: 0,
-    y: 0,
-    width: size,
-    height: size,
-    fill: `var(--dx-${value}Fill)`,
-    strokeWidth: 4
-  })));
+  var _effect = _useSignals3();
+  try {
+    const size = 16;
+    return /* @__PURE__ */ React3.createElement("div", {
+      className: "flex p-[2px] justify-center items-center"
+    }, /* @__PURE__ */ React3.createElement("svg", {
+      viewBox: `0 0 ${size} ${size}`,
+      className: "is-[var(--hue-preview-size,1rem)] bs-[var(--hue-preview-size,1rem)]"
+    }, /* @__PURE__ */ React3.createElement("rect", {
+      x: 0,
+      y: 0,
+      width: size,
+      height: size,
+      fill: `var(--dx-${value}Fill)`,
+      strokeWidth: 4
+    })));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/ui/react-ui-pickers/src/components/IconPicker/IconPicker.tsx
+import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import React4 from "react";
 import { Icon as Icon3, useTranslation as useTranslation3 } from "@dxos/react-ui";
 var IconPicker = ({ ...props }) => {
-  const { t } = useTranslation3("os");
-  return /* @__PURE__ */ React4.createElement(PickerButton, {
-    Component: IconPreview,
-    label: t("select icon label"),
-    icon: "ph--selection--regular",
-    values: iconValues,
-    ...props
-  });
+  var _effect = _useSignals4();
+  try {
+    const { t } = useTranslation3("os");
+    return /* @__PURE__ */ React4.createElement(PickerButton, {
+      Component: IconPreview,
+      label: t("select icon label"),
+      icon: "ph--selection--regular",
+      values: iconValues,
+      ...props
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var IconPreview = ({ value, iconSize = 5 }) => {
-  return /* @__PURE__ */ React4.createElement(Icon3, {
-    icon: `ph--${value}--regular`,
-    size: iconSize
-  });
+  var _effect = _useSignals4();
+  try {
+    return /* @__PURE__ */ React4.createElement(Icon3, {
+      icon: `ph--${value}--regular`,
+      size: iconSize
+    });
+  } finally {
+    _effect.f();
+  }
 };
 var icons = [
   "ph--air-traffic-control--regular",