@bolio-ui/core 2.0.0-alpha.1 → 3.0.0-alpha.0

package/dist/chunk-6BCLZSSK.js

@@ -0,0 +1,524 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunkUVVBMWR4js = require('./chunk-UVVBMWR4.js');
+
+
+var _chunkDGXZP4VJjs = require('./chunk-DGXZP4VJ.js');
+
+
+
+var _chunkMAICNLTYjs = require('./chunk-MAICNLTY.js');
+
+
+var _chunkV5I4ORQQjs = require('./chunk-V5I4ORQQ.js');
+
+
+
+var _chunk5KUROAEPjs = require('./chunk-5KUROAEP.js');
+
+// core/Menu/Menu.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+
+// core/Menu/MenuContext.ts
+
+var MenuContext = _react2.default.createContext({
+  close: () => void 0
+});
+var MenuListContext = _react2.default.createContext({
+  openSub: null,
+  setOpenSub: () => void 0
+});
+var MenuRadioContext = _react2.default.createContext({});
+
+// core/Menu/MenuList.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Menu/MenuList.module.css.bolio-css-module-source
+var MenuList_module_css_default = { "menuList": "MenuList-module_menuList__8VtPL", "sub": "MenuList-module_sub__Bjn8e" };
+
+// core/Menu/MenuList.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var TYPEAHEAD_RESET = 500;
+var MenuList = ({
+  id,
+  labelledBy,
+  focus,
+  onLeave,
+  isSub = false,
+  className = "",
+  children
+}) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  const { SCALES } = _chunkMAICNLTYjs.use_scale_default.call(void 0, );
+  const { close } = _react.useContext.call(void 0, MenuContext);
+  const listRef = _react.useRef.call(void 0, null);
+  const [openSub, setOpenSub] = _react.useState.call(void 0, null);
+  const typed = _react.useRef.call(void 0, { text: "", at: 0 });
+  const getItems = () => {
+    var _a, _b;
+    return Array.from(
+      (_b = (_a = listRef.current) == null ? void 0 : _a.querySelectorAll('[role^="menuitem"]')) != null ? _b : []
+    ).filter(
+      (item) => item.closest('[role="menu"]') === listRef.current && item.getAttribute("aria-disabled") !== "true"
+    );
+  };
+  _react.useEffect.call(void 0, () => {
+    var _a, _b;
+    if (focus === "list") return (_a = listRef.current) == null ? void 0 : _a.focus();
+    const items = getItems();
+    const target = focus === "first" ? items[0] : items[items.length - 1];
+    (_b = target != null ? target : listRef.current) == null ? void 0 : _b.focus();
+  }, []);
+  const typeahead = (key, items, index) => {
+    const now = Date.now();
+    const text = now - typed.current.at > TYPEAHEAD_RESET ? key.toLowerCase() : typed.current.text + key.toLowerCase();
+    typed.current = { text, at: now };
+    const search = [...text].every((char) => char === text[0]) ? text[0] : text;
+    const start = search === text && text.length > 1 ? index : index + 1;
+    const ordered = [...items.slice(start), ...items.slice(0, start)];
+    const match = ordered.find(
+      (item) => {
+        var _a;
+        return (_a = item.textContent) == null ? void 0 : _a.trim().toLowerCase().startsWith(search);
+      }
+    );
+    match == null ? void 0 : match.focus();
+  };
+  const keyDownHandler = (event) => {
+    const target = event.target;
+    if (target.closest('[role="menu"]') !== listRef.current) return;
+    const items = getItems();
+    const index = items.indexOf(target);
+    const focusAt = (next) => {
+      var _a;
+      event.preventDefault();
+      (_a = items[(next + items.length) % items.length]) == null ? void 0 : _a.focus();
+    };
+    switch (event.key) {
+      case "ArrowDown":
+        return focusAt(index + 1);
+      case "ArrowUp":
+        return focusAt(index < 0 ? items.length - 1 : index - 1);
+      case "Home":
+        return focusAt(0);
+      case "End":
+        return focusAt(items.length - 1);
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        if (index >= 0) items[index].click();
+        return;
+      case "ArrowRight":
+        if (index >= 0 && items[index].hasAttribute("aria-haspopup")) {
+          event.preventDefault();
+          items[index].click();
+        }
+        return;
+      case "ArrowLeft":
+        if (!isSub) return;
+        event.preventDefault();
+        return onLeave();
+      case "Escape":
+        event.preventDefault();
+        event.stopPropagation();
+        return onLeave();
+      case "Tab":
+        event.preventDefault();
+        return close(true);
+    }
+    const isCharacter = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+    if (isCharacter) typeahead(event.key, items, index);
+  };
+  const listStyle = {
+    "--menu-list-font-size": SCALES.font(0.875),
+    "--menu-list-color": theme.palette.foreground,
+    "--menu-list-bg": theme.palette.background,
+    "--menu-list-border-color": theme.palette.border,
+    "--menu-list-radius": theme.layout.radius,
+    "--menu-list-shadow": theme.expressiveness.shadowMedium
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuListContext.Provider, { value: { openSub, setOpenSub }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref: listRef,
+      id,
+      role: "menu",
+      tabIndex: -1,
+      "aria-labelledby": labelledBy,
+      "aria-orientation": "vertical",
+      className: _chunk5KUROAEPjs.joinClasses.call(void 0, MenuList_module_css_default.menuList, isSub && MenuList_module_css_default.sub, className),
+      onKeyDown: keyDownHandler,
+      style: listStyle,
+      children
+    }
+  ) });
+};
+var MenuList_default = MenuList;
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Menu/Menu.module.css.bolio-css-module-source
+var Menu_module_css_default = { "menu": "Menu-module_menu__nskKP" };
+
+// core/Menu/Menu.tsx
+
+var MenuComponent = _react2.default.forwardRef(
+  ({
+    trigger,
+    visible: customVisible,
+    initialVisible = false,
+    onVisibleChange,
+    getPopupContainer,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const baseId = _react.useId.call(void 0, );
+    const menuId = `${baseId}-menu`;
+    const triggerId = trigger.props.id || `${baseId}-trigger`;
+    const wrapperRef = _react.useRef.call(void 0, null);
+    const focus = _react.useRef.call(void 0, "list");
+    const isControlled = customVisible !== void 0;
+    const [selfVisible, setSelfVisible] = _react.useState.call(void 0, initialVisible);
+    const visible = isControlled ? customVisible : selfVisible;
+    const setVisible = (next) => {
+      if (next === visible) return;
+      if (!isControlled) setSelfVisible(next);
+      onVisibleChange == null ? void 0 : onVisibleChange(next);
+    };
+    const close = (returnFocus) => {
+      var _a;
+      setVisible(false);
+      if (returnFocus) (_a = document.getElementById(triggerId)) == null ? void 0 : _a.focus();
+    };
+    const setRefs = (element) => {
+      wrapperRef.current = element;
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    };
+    _chunkDGXZP4VJjs.use_click_away_default.call(void 0, wrapperRef, () => visible && setVisible(false));
+    const clickHandler = (event) => {
+      var _a, _b;
+      (_b = (_a = trigger.props).onClick) == null ? void 0 : _b.call(_a, event);
+      if (event.defaultPrevented) return;
+      focus.current = event.detail === 0 ? "first" : "list";
+      setVisible(!visible);
+    };
+    const keyDownHandler = (event) => {
+      var _a, _b;
+      (_b = (_a = trigger.props).onKeyDown) == null ? void 0 : _b.call(_a, event);
+      if (event.defaultPrevented) return;
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      event.preventDefault();
+      focus.current = event.key === "ArrowDown" ? "first" : "last";
+      setVisible(true);
+    };
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuContext.Provider, { value: { close }, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref: setRefs,
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, Menu_module_css_default.menu, className),
+        ...props,
+        children: [
+          _react2.default.cloneElement(trigger, {
+            id: triggerId,
+            "aria-haspopup": "menu",
+            "aria-expanded": visible,
+            "aria-controls": visible ? menuId : void 0,
+            onClick: clickHandler,
+            onKeyDown: keyDownHandler
+          }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkUVVBMWR4js.dropdown_default,
+            {
+              parent: wrapperRef,
+              visible,
+              disableMatchWidth: true,
+              getPopupContainer,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                MenuList_default,
+                {
+                  id: menuId,
+                  labelledBy: triggerId,
+                  focus: focus.current,
+                  onLeave: () => close(true),
+                  children
+                }
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+MenuComponent.displayName = "BolioUIMenu";
+var Menu = _chunkMAICNLTYjs.with_scale_default.call(void 0, MenuComponent);
+var Menu_default = Menu;
+
+// core/Menu/MenuSub.tsx
+
+
+// core/Menu/MenuItem.tsx
+
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Menu/MenuItem.module.css.bolio-css-module-source
+var MenuItem_module_css_default = { "menuItem": "MenuItem-module_menuItem__hgTYG", "error": "MenuItem-module_error__sqxkQ", "indicator": "MenuItem-module_indicator__z4xj8", "icon": "MenuItem-module_icon__WYQOm", "label": "MenuItem-module_label__MB5an", "shortcut": "MenuItem-module_shortcut__U10Ab", "menuLabel": "MenuItem-module_menuLabel__PUX5u", "menuDivider": "MenuItem-module_menuDivider__iDHWR" };
+
+// core/Menu/MenuItem.tsx
+
+var Check = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "path",
+  {
+    d: "M20 6 9 17l-5-5",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var Dot = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" }) });
+var MenuItemBase = _react2.default.forwardRef(
+  ({
+    role,
+    icon,
+    shortcut,
+    disabled = false,
+    type = "default",
+    disableAutoClose = false,
+    checked,
+    indicator,
+    onChoose,
+    trailing,
+    onClick,
+    onMouseMove,
+    className = "",
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    const { close } = _react.useContext.call(void 0, MenuContext);
+    const { setOpenSub } = _react.useContext.call(void 0, MenuListContext);
+    const classes = _chunk5KUROAEPjs.use_classes_default.call(void 0, 
+      MenuItem_module_css_default.menuItem,
+      type === "error" && MenuItem_module_css_default.error,
+      className
+    );
+    const clickHandler = (event) => {
+      if (disabled) return;
+      onClick == null ? void 0 : onClick(event);
+      if (event.defaultPrevented) return;
+      onChoose == null ? void 0 : onChoose();
+      if (!disableAutoClose) close(true);
+    };
+    const mouseMoveHandler = (event) => {
+      onMouseMove == null ? void 0 : onMouseMove(event);
+      if (disabled || event.defaultPrevented) return;
+      if (!props["aria-haspopup"]) setOpenSub(null);
+      if (document.activeElement !== event.currentTarget)
+        event.currentTarget.focus();
+    };
+    const itemStyle = {
+      "--menu-item-color": theme.palette.foreground,
+      "--menu-item-focus-bg": theme.palette.accents_2,
+      "--menu-item-error-color": theme.palette.error,
+      "--menu-item-error-focus-bg": theme.palette.errorLight,
+      "--menu-item-error-focus-color": theme.palette.errorDark,
+      "--menu-item-disabled-color": theme.palette.accents_4,
+      "--menu-item-shortcut-color": theme.palette.accents_5,
+      ...style
+    };
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        ref,
+        role,
+        tabIndex: -1,
+        "aria-checked": role === "menuitem" ? void 0 : Boolean(checked),
+        "aria-disabled": disabled || void 0,
+        className: classes,
+        onClick: clickHandler,
+        onMouseMove: mouseMoveHandler,
+        style: itemStyle,
+        ...props,
+        children: [
+          indicator && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: MenuItem_module_css_default.indicator, children: checked && (indicator === "check" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Check, {}) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dot, {})) }),
+          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: MenuItem_module_css_default.icon, children: icon }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: MenuItem_module_css_default.label, children }),
+          shortcut && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: MenuItem_module_css_default.shortcut, "aria-hidden": "true", children: shortcut }),
+          trailing
+        ]
+      }
+    );
+  }
+);
+MenuItemBase.displayName = "BolioUIMenuItemBase";
+var MenuItem = _react2.default.forwardRef((props, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuItemBase, { ref, role: "menuitem", ...props }));
+MenuItem.displayName = "BolioUIMenuItem";
+var MenuCheckboxItem = _react2.default.forwardRef(({ checked = false, onChange, disableAutoClose = true, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  MenuItemBase,
+  {
+    ref,
+    role: "menuitemcheckbox",
+    indicator: "check",
+    checked,
+    disableAutoClose,
+    onChoose: () => onChange == null ? void 0 : onChange(!checked),
+    ...props
+  }
+));
+MenuCheckboxItem.displayName = "BolioUIMenuCheckboxItem";
+var MenuRadioItem = _react2.default.forwardRef(({ value, disableAutoClose = true, ...props }, ref) => {
+  const group = _react.useContext.call(void 0, MenuRadioContext);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    MenuItemBase,
+    {
+      ref,
+      role: "menuitemradio",
+      indicator: "dot",
+      checked: group.value === value,
+      disableAutoClose,
+      onChoose: () => {
+        var _a;
+        return (_a = group.onChange) == null ? void 0 : _a.call(group, value);
+      },
+      ...props
+    }
+  );
+});
+MenuRadioItem.displayName = "BolioUIMenuRadioItem";
+var MenuRadioGroup = _react2.default.forwardRef(({ value, onChange, children, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, MenuRadioContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { ref, role: "group", ...props, children }) }));
+MenuRadioGroup.displayName = "BolioUIMenuRadioGroup";
+var MenuLabel = _react2.default.forwardRef(({ className = "", children, style, ...props }, ref) => {
+  const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ref,
+      role: "presentation",
+      className: _chunk5KUROAEPjs.use_classes_default.call(void 0, MenuItem_module_css_default.menuLabel, className),
+      style: {
+        "--menu-label-color": theme.palette.accents_5,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+});
+MenuLabel.displayName = "BolioUIMenuLabel";
+var MenuDivider = _react2.default.forwardRef(
+  ({ className = "", style, ...props }, ref) => {
+    const theme = _chunkV5I4ORQQjs.use_theme_default.call(void 0, );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: _chunk5KUROAEPjs.use_classes_default.call(void 0, MenuItem_module_css_default.menuDivider, className),
+        style: {
+          "--menu-divider-color": theme.palette.border,
+          ...style
+        },
+        ...props
+      }
+    );
+  }
+);
+MenuDivider.displayName = "BolioUIMenuDivider";
+
+// css-module-source:/Users/brunnoandrade/Desktop/BolioUI/bolio-ui/core/Menu/MenuSub.module.css.bolio-css-module-source
+var MenuSub_module_css_default = { "menuSub": "MenuSub-module_menuSub__yZ0fN", "chevron": "MenuSub-module_chevron__b0HtZ" };
+
+// core/Menu/MenuSub.tsx
+
+var Chevron = () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { viewBox: "0 0 24 24", width: "1em", height: "1em", "aria-hidden": "true", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "path",
+  {
+    d: "m9 18 6-6-6-6",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) });
+var MenuSub = _react2.default.forwardRef(({ label, icon, disabled = false, children, ...props }, ref) => {
+  const baseId = _react.useId.call(void 0, );
+  const triggerId = `${baseId}-trigger`;
+  const listId = `${baseId}-menu`;
+  const { openSub, setOpenSub } = _react.useContext.call(void 0, MenuListContext);
+  const open = openSub === listId;
+  const focus = _react.useRef.call(void 0, "list");
+  const triggerRef = _react.useRef.call(void 0, null);
+  const setRefs = (element) => {
+    triggerRef.current = element;
+    if (typeof ref === "function") ref(element);
+    else if (ref) ref.current = element;
+  };
+  const openWith = (next) => {
+    focus.current = next;
+    setOpenSub(listId);
+  };
+  const leave = () => {
+    var _a;
+    setOpenSub(null);
+    (_a = triggerRef.current) == null ? void 0 : _a.focus();
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: MenuSub_module_css_default.menuSub, role: "none", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      MenuItemBase,
+      {
+        ref: setRefs,
+        id: triggerId,
+        role: "menuitem",
+        icon,
+        disabled,
+        disableAutoClose: true,
+        "aria-haspopup": "menu",
+        "aria-expanded": open,
+        "aria-controls": open ? listId : void 0,
+        onClick: (event) => {
+          var _a, _b;
+          const fromKeyboard = event.detail === 0;
+          if (!open) return openWith(fromKeyboard ? "first" : "list");
+          if (fromKeyboard)
+            (_b = (_a = document.getElementById(listId)) == null ? void 0 : _a.querySelector(
+              '[role^="menuitem"]:not([aria-disabled="true"])'
+            )) == null ? void 0 : _b.focus();
+        },
+        onMouseEnter: () => !disabled && !open && openWith("list"),
+        trailing: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: MenuSub_module_css_default.chevron, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Chevron, {}) }),
+        ...props,
+        children: label
+      }
+    ),
+    open && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      MenuList_default,
+      {
+        id: listId,
+        labelledBy: triggerId,
+        focus: focus.current,
+        onLeave: leave,
+        isSub: true,
+        children
+      }
+    )
+  ] });
+});
+MenuSub.displayName = "BolioUIMenuSub";
+var MenuSub_default = MenuSub;
+
+// core/Menu/index.ts
+Menu_default.Item = MenuItem;
+Menu_default.CheckboxItem = MenuCheckboxItem;
+Menu_default.RadioGroup = MenuRadioGroup;
+Menu_default.RadioItem = MenuRadioItem;
+Menu_default.Label = MenuLabel;
+Menu_default.Divider = MenuDivider;
+Menu_default.Sub = MenuSub_default;
+var Menu_default2 = Menu_default;
+
+
+
+exports.Menu_default = Menu_default2;