analytica-frontend-lib/dist/chunk-HGWU3GUN.js

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }

var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');

// src/components/Select/Select.tsx
var _zustand = require('zustand');










var _react = require('react');
var _reactdom = require('react-dom');
var _CaretDown = require('@phosphor-icons/react/dist/csr/CaretDown');
var _Check = require('@phosphor-icons/react/dist/csr/Check');
var _WarningCircle = require('@phosphor-icons/react/dist/csr/WarningCircle');
var _jsxruntime = require('react/jsx-runtime');
var VARIANT_CLASSES = {
  outlined: "border-2 rounded-lg focus:border-primary-950",
  underlined: "border-b-2 focus:border-primary-950",
  rounded: "border-2 rounded-full focus:border-primary-950"
};
var SIZE_CLASSES = {
  small: "text-sm",
  medium: "text-md",
  large: "text-lg",
  "extra-large": "text-lg"
};
var HEIGHT_CLASSES = {
  small: "h-8",
  medium: "h-9",
  large: "h-10",
  "extra-large": "h-12"
};
var PADDING_CLASSES = {
  small: "px-2 py-1",
  medium: "px-3 py-2",
  large: "px-4 py-3",
  "extra-large": "px-5 py-4"
};
function createSelectStore(onValueChange) {
  return _zustand.create.call(void 0, (set) => ({
    open: false,
    setOpen: (open) => set({ open }),
    value: "",
    setValue: (value) => set({ value }),
    selectedLabel: "",
    setSelectedLabel: (label) => set({ selectedLabel: label }),
    onValueChange,
    triggerRect: null,
    setTriggerRect: (rect) => set({ triggerRect: rect })
  }));
}
var useSelectStore = (externalStore) => {
  if (!externalStore) {
    throw new Error(
      "Component must be used within a Select (store is missing)"
    );
  }
  return externalStore;
};
function getLabelAsNode(children) {
  if (typeof children === "string" || typeof children === "number") {
    return children;
  }
  const flattened = _react.Children.toArray(children);
  if (flattened.length === 1) return flattened[0];
  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: flattened });
}
var injectStore = (children, store, size, selectId) => {
  return _react.Children.map(children, (child) => {
    if (_react.isValidElement.call(void 0, child)) {
      const typedChild = child;
      const newProps = {
        store
      };
      if (typedChild.type === SelectTrigger) {
        newProps.size = size;
        newProps.selectId = selectId;
      }
      if (typedChild.type === SelectContent) {
        newProps.selectId = selectId;
      }
      if (typedChild.props.children) {
        newProps.children = injectStore(
          typedChild.props.children,
          store,
          size,
          selectId
        );
      }
      return _react.cloneElement.call(void 0, typedChild, newProps);
    }
    return child;
  });
};
var Select = ({
  children,
  defaultValue = "",
  className,
  value: propValue,
  onValueChange,
  size = "small",
  label,
  helperText,
  errorMessage,
  id
}) => {
  const storeRef = _react.useRef.call(void 0, null);
  storeRef.current ??= createSelectStore(onValueChange);
  const store = storeRef.current;
  const selectRef = _react.useRef.call(void 0, null);
  const { open, setOpen, setValue, selectedLabel } = _zustand.useStore.call(void 0, store, (s) => s);
  const generatedId = _react.useId.call(void 0, );
  const selectId = _nullishCoalesce(id, () => ( `select-${generatedId}`));
  const findLabelForValue = (children2, targetValue) => {
    let found = null;
    const search = (nodes) => {
      _react.Children.forEach(nodes, (child) => {
        if (!_react.isValidElement.call(void 0, child)) return;
        const typedChild = child;
        if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
          found = getLabelAsNode(typedChild.props.children);
        }
        if (typedChild.props.children && !found)
          search(typedChild.props.children);
      });
    };
    search(children2);
    return found;
  };
  _react.useEffect.call(void 0, () => {
    if (!selectedLabel && defaultValue) {
      const label2 = findLabelForValue(children, defaultValue);
      if (label2) store.setState({ selectedLabel: label2 });
    }
  }, [children, defaultValue, selectedLabel]);
  _react.useEffect.call(void 0, () => {
    const handleClickOutside = (event) => {
      const target = event.target;
      const isInsideTrigger = _optionalChain([selectRef, 'access', _ => _.current, 'optionalAccess', _2 => _2.contains, 'call', _3 => _3(target)]);
      const portaledMenu = document.body.querySelector(
        `[role="menu"][data-select-id="${selectId}"]`
      );
      const isInsidePortaledMenu = _optionalChain([portaledMenu, 'optionalAccess', _4 => _4.contains, 'call', _5 => _5(target)]);
      if (!isInsideTrigger && !isInsidePortaledMenu) {
        setOpen(false);
      }
    };
    const handleArrowKeys = (event) => {
      const selectContent = document.body.querySelector(
        `[role="menu"][data-select-id="${selectId}"]`
      );
      if (selectContent) {
        event.preventDefault();
        const items = Array.from(
          selectContent.querySelectorAll(
            '[role="menuitem"]:not([aria-disabled="true"])'
          )
        ).filter((el) => el instanceof HTMLElement);
        const focused = document.activeElement;
        const currentIndex = items.findIndex((item) => item === focused);
        let nextIndex;
        if (event.key === "ArrowDown") {
          nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
        } else {
          nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
        }
        _optionalChain([items, 'access', _6 => _6[nextIndex], 'optionalAccess', _7 => _7.focus, 'call', _8 => _8()]);
      }
    };
    if (open) {
      document.addEventListener("mousedown", handleClickOutside);
      document.addEventListener("keydown", handleArrowKeys);
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
      document.removeEventListener("keydown", handleArrowKeys);
    };
  }, [open, selectId, setOpen]);
  _react.useEffect.call(void 0, () => {
    if (propValue === void 0) return;
    setValue(propValue);
    const label2 = findLabelForValue(children, propValue);
    store.setState({ selectedLabel: _nullishCoalesce(label2, () => ( "")) });
  }, [propValue, children]);
  const sizeClasses = SIZE_CLASSES[size];
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: _chunkTN3AYOMVjs.cn.call(void 0, "w-full", className), children: [
    label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
      "label",
      {
        htmlFor: selectId,
        className: _chunkTN3AYOMVjs.cn.call(void 0, "block font-bold text-text-900 mb-1.5", sizeClasses),
        children: label
      }
    ),
    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkTN3AYOMVjs.cn.call(void 0, "relative w-full"), ref: selectRef, children: injectStore(children, store, size, selectId) }),
    (helperText || errorMessage) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mt-1.5 gap-1.5", children: [
      helperText && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-text-500", children: helperText }),
      errorMessage && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _WarningCircle.WarningCircleIcon, { size: 16 }),
        " ",
        errorMessage
      ] })
    ] })
  ] });
};
var SelectValue = ({
  placeholder,
  icon,
  store: externalStore
}) => {
  const store = useSelectStore(externalStore);
  const selectedLabel = _zustand.useStore.call(void 0, store, (s) => s.selectedLabel);
  const value = _zustand.useStore.call(void 0, store, (s) => s.value);
  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "text-inherit flex gap-2 items-center", children: [
    icon,
    selectedLabel || placeholder || value
  ] });
};
var SelectTrigger = _react.forwardRef.call(void 0, 
  ({
    className,
    invalid = false,
    variant = "outlined",
    store: externalStore,
    disabled,
    size = "medium",
    selectId,
    type = "button",
    ...props
  }, ref) => {
    const store = useSelectStore(externalStore);
    const open = _zustand.useStore.call(void 0, store, (s) => s.open);
    const internalRef = _react.useRef.call(void 0, null);
    const setRefs = _react.useCallback.call(void 0, 
      (element) => {
        internalRef.current = element;
        if (typeof ref === "function") {
          ref(element);
        } else if (ref) {
          ref.current = element;
        }
      },
      [ref]
    );
    const updateTriggerRect = _react.useCallback.call(void 0, () => {
      if (internalRef.current) {
        const rect = internalRef.current.getBoundingClientRect();
        store.setState({
          triggerRect: {
            top: rect.top,
            left: rect.left,
            width: rect.width,
            height: rect.height
          }
        });
      }
    }, [store]);
    _react.useEffect.call(void 0, () => {
      if (!open) return;
      const handleUpdate = () => {
        updateTriggerRect();
      };
      window.addEventListener("scroll", handleUpdate, true);
      window.addEventListener("resize", handleUpdate);
      return () => {
        window.removeEventListener("scroll", handleUpdate, true);
        window.removeEventListener("resize", handleUpdate);
      };
    }, [open, updateTriggerRect]);
    const toggleOpen = () => {
      const newOpen = !open;
      if (newOpen) {
        updateTriggerRect();
      }
      store.setState({ open: newOpen });
    };
    const variantClasses = VARIANT_CLASSES[variant];
    const heightClasses = HEIGHT_CLASSES[size];
    const paddingClasses = PADDING_CLASSES[size];
    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
      "button",
      {
        ref: setRefs,
        id: selectId,
        type,
        className: _chunkTN3AYOMVjs.cn.call(void 0, 
          "flex w-full items-center justify-between border-border-300",
          heightClasses,
          paddingClasses,
          invalid && `${variant == "underlined" ? "border-b-2" : "border-2"} border-indicator-error text-text-600`,
          disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground",
          !invalid && !disabled ? "text-text-700" : "",
          variantClasses,
          className
        ),
        onClick: toggleOpen,
        "aria-expanded": open,
        "aria-haspopup": "listbox",
        "aria-controls": open ? "select-content" : void 0,
        ...props,
        children: [
          props.children,
          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
            _CaretDown.CaretDownIcon,
            {
              className: _chunkTN3AYOMVjs.cn.call(void 0, 
                "h-[1em] w-[1em] opacity-50 transition-transform",
                open ? "rotate-180" : ""
              )
            }
          )
        ]
      }
    );
  }
);
SelectTrigger.displayName = "SelectTrigger";
function applyVerticalPosition(styles, triggerRect, side, align, gap) {
  styles.top = side === "top" ? triggerRect.top - gap : triggerRect.top + triggerRect.height + gap;
  styles.transform = side === "top" ? "translateY(-100%)" : void 0;
  if (align === "start") {
    styles.left = triggerRect.left;
  } else if (align === "center") {
    styles.left = triggerRect.left + triggerRect.width / 2;
    styles.transform = side === "top" ? "translate(-50%, -100%)" : "translateX(-50%)";
  } else {
    styles.left = triggerRect.left + triggerRect.width;
    styles.transform = side === "top" ? "translate(-100%, -100%)" : "translateX(-100%)";
  }
}
function applyHorizontalPosition(styles, triggerRect, side, align, gap) {
  styles.left = side === "left" ? triggerRect.left - gap : triggerRect.left + triggerRect.width + gap;
  styles.transform = side === "left" ? "translateX(-100%)" : void 0;
  if (align === "start") {
    styles.top = triggerRect.top;
  } else if (align === "center") {
    styles.top = triggerRect.top + triggerRect.height / 2;
    styles.transform = side === "left" ? "translate(-100%, -50%)" : "translateY(-50%)";
  } else {
    styles.top = triggerRect.top + triggerRect.height;
    styles.transform = side === "left" ? "translate(-100%, -100%)" : "translateY(-100%)";
  }
}
var SelectContent = _react.forwardRef.call(void 0, 
  ({
    children,
    className,
    align = "start",
    side = "bottom",
    store: externalStore,
    selectId,
    ...props
  }, ref) => {
    const store = useSelectStore(externalStore);
    const open = _zustand.useStore.call(void 0, store, (s) => s.open);
    const triggerRect = _zustand.useStore.call(void 0, store, (s) => s.triggerRect);
    const [mounted, setMounted] = _react.useState.call(void 0, false);
    _react.useEffect.call(void 0, () => {
      setMounted(true);
    }, []);
    if (!open || !mounted) return null;
    const getPositionStyles = () => {
      if (!triggerRect) {
        return {};
      }
      const gap = 4;
      const styles = {
        position: "fixed",
        zIndex: 9999,
        width: triggerRect.width
      };
      const isVertical = side === "top" || side === "bottom";
      if (isVertical) {
        applyVerticalPosition(styles, triggerRect, side, align, gap);
      } else {
        applyHorizontalPosition(styles, triggerRect, side, align, gap);
      }
      return styles;
    };
    const content = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
      "div",
      {
        role: "menu",
        ref,
        "data-select-id": selectId,
        style: getPositionStyles(),
        className: _chunkTN3AYOMVjs.cn.call(void 0, 
          "bg-secondary min-w-[210px] max-h-[300px] overflow-y-auto overflow-x-hidden rounded-md border p-1 shadow-md border-border-100",
          className
        ),
        ...props,
        children
      }
    );
    return _reactdom.createPortal.call(void 0, content, document.body);
  }
);
SelectContent.displayName = "SelectContent";
var SelectItem = _react.forwardRef.call(void 0, 
  ({
    className,
    children,
    value,
    disabled = false,
    store: externalStore,
    truncate = false,
    ...props
  }, ref) => {
    const store = useSelectStore(externalStore);
    const {
      value: selectedValue,
      setValue,
      setOpen,
      setSelectedLabel,
      onValueChange
    } = _zustand.useStore.call(void 0, store, (s) => s);
    const handleClick = (e) => {
      const labelNode = getLabelAsNode(children);
      if (!disabled) {
        setValue(value);
        setSelectedLabel(labelNode);
        setOpen(false);
        _optionalChain([onValueChange, 'optionalCall', _9 => _9(value)]);
      }
      _optionalChain([props, 'access', _10 => _10.onClick, 'optionalCall', _11 => _11(e)]);
    };
    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
      "div",
      {
        role: "menuitem",
        "aria-disabled": disabled,
        ref,
        className: `
          bg-secondary focus-visible:bg-background-50
          relative flex select-none items-center gap-2 rounded-sm p-3 outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
          ${className}
          ${disabled ? "cursor-not-allowed text-text-400 pointer-events-none opacity-50" : "cursor-pointer hover:bg-background-50 text-text-700 focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground"}
          ${selectedValue === value && "bg-background-50"}
        `,
        onClick: handleClick,
        onKeyDown: (e) => {
          if (e.key === "Enter" || e.key === " ") handleClick(e);
        },
        tabIndex: disabled ? -1 : 0,
        ...props,
        children: [
          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Check.CheckIcon, { className: "" }) }),
          truncate ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "truncate block max-w-[200px]", children }) : children
        ]
      }
    );
  }
);
SelectItem.displayName = "SelectItem";
var Select_default = Select;










exports.createSelectStore = createSelectStore; exports.useSelectStore = useSelectStore; exports.getLabelAsNode = getLabelAsNode; exports.SelectValue = SelectValue; exports.SelectTrigger = SelectTrigger; exports.SelectContent = SelectContent; exports.SelectItem = SelectItem; exports.Select_default = Select_default;
//# sourceMappingURL=chunk-HGWU3GUN.js.map