analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
393 lines (390 loc) • 13.4 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Select/Select.tsx
var Select_exports = {};
__export(Select_exports, {
SelectContent: () => SelectContent,
SelectItem: () => SelectItem,
SelectTrigger: () => SelectTrigger,
SelectValue: () => SelectValue,
createSelectStore: () => createSelectStore,
default: () => Select_default,
getLabelAsNode: () => getLabelAsNode,
useSelectStore: () => useSelectStore
});
module.exports = __toCommonJS(Select_exports);
var import_zustand = require("zustand");
var import_react = require("react");
var import_phosphor_react = require("phosphor-react");
// src/utils/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
function cn(...inputs) {
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
}
// src/components/Select/Select.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var VARIANT_CLASSES = {
outlined: "border rounded-lg focus:border-primary-950",
underlined: "border-b focus:border-primary-950",
rounded: "border 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"
};
var SIDE_CLASSES = {
top: "bottom-full -translate-y-1",
right: "top-full translate-y-1",
bottom: "top-full translate-y-1",
left: "top-full translate-y-1"
};
var ALIGN_CLASSES = {
start: "left-0",
center: "left-1/2 -translate-x-1/2",
end: "right-0"
};
function createSelectStore(onValueChange) {
return (0, import_zustand.create)((set) => ({
open: false,
setOpen: (open) => set({ open }),
value: "",
setValue: (value) => set({ value }),
selectedLabel: "",
setSelectedLabel: (label) => set({ selectedLabel: label }),
onValueChange
}));
}
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 = import_react.Children.toArray(children);
if (flattened.length === 1) return flattened[0];
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: flattened });
}
var injectStore = (children, store, size, selectId) => {
return import_react.Children.map(children, (child) => {
if ((0, import_react.isValidElement)(child)) {
const typedChild = child;
const newProps = {
store
};
if (typedChild.type === SelectTrigger) {
newProps.size = size;
newProps.selectId = selectId;
}
if (typedChild.props.children) {
newProps.children = injectStore(
typedChild.props.children,
store,
size,
selectId
);
}
return (0, import_react.cloneElement)(typedChild, newProps);
}
return child;
});
};
var Select = ({
children,
defaultValue = "",
value: propValue,
onValueChange,
size = "small",
label,
helperText,
errorMessage,
id
}) => {
const storeRef = (0, import_react.useRef)(null);
storeRef.current ??= createSelectStore(onValueChange);
const store = storeRef.current;
const selectRef = (0, import_react.useRef)(null);
const { open, setOpen, setValue, selectedLabel } = (0, import_zustand.useStore)(store, (s) => s);
const generatedId = (0, import_react.useId)();
const selectId = id ?? `select-${generatedId}`;
const findLabelForValue = (children2, targetValue) => {
let found = null;
const search = (nodes) => {
import_react.Children.forEach(nodes, (child) => {
if (!(0, import_react.isValidElement)(child)) return;
const typedChild = child;
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
if (typeof typedChild.props.children === "string")
found = typedChild.props.children;
}
if (typedChild.props.children && !found)
search(typedChild.props.children);
});
};
search(children2);
return found;
};
(0, import_react.useEffect)(() => {
if (!selectedLabel && defaultValue) {
const label2 = findLabelForValue(children, defaultValue);
if (label2) store.setState({ selectedLabel: label2 });
}
}, [children, defaultValue, selectedLabel]);
(0, import_react.useEffect)(() => {
const handleClickOutside = (event) => {
if (selectRef.current && !selectRef.current.contains(event.target)) {
setOpen(false);
}
};
const handleArrowKeys = (event) => {
const selectContent = selectRef.current?.querySelector('[role="menu"]');
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 = 0;
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;
}
items[nextIndex]?.focus();
}
};
if (open) {
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleArrowKeys);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleArrowKeys);
};
}, [open]);
(0, import_react.useEffect)(() => {
if (propValue) {
setValue(propValue);
const label2 = findLabelForValue(children, propValue);
if (label2) store.setState({ selectedLabel: label2 });
}
}, [propValue]);
const sizeClasses = SIZE_CLASSES[size];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full", children: [
label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"label",
{
htmlFor: selectId,
className: cn("block font-bold text-text-900 mb-1.5", sizeClasses),
children: label
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("relative", sizeClasses), ref: selectRef, children: injectStore(children, store, size, selectId) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.WarningCircle, { size: 16 }),
" ",
errorMessage
] })
] })
] });
};
var SelectValue = ({
placeholder,
store: externalStore
}) => {
const store = useSelectStore(externalStore);
const selectedLabel = (0, import_zustand.useStore)(store, (s) => s.selectedLabel);
const value = (0, import_zustand.useStore)(store, (s) => s.value);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-inherit", children: selectedLabel || placeholder || value });
};
var SelectTrigger = (0, import_react.forwardRef)(
({
className,
invalid = false,
variant = "outlined",
store: externalStore,
disabled,
size = "medium",
selectId,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const open = (0, import_zustand.useStore)(store, (s) => s.open);
const toggleOpen = () => store.setState({ open: !open });
const variantClasses = VARIANT_CLASSES[variant];
const heightClasses = HEIGHT_CLASSES[size];
const paddingClasses = PADDING_CLASSES[size];
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"button",
{
ref,
id: selectId,
className: `
flex min-w-[220px] 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__ */ (0, import_jsx_runtime.jsx)(
import_phosphor_react.CaretDown,
{
className: cn(
"h-[1em] w-[1em] opacity-50 transition-transform",
open ? "rotate-180" : ""
)
}
)
]
}
);
}
);
SelectTrigger.displayName = "SelectTrigger";
var SelectContent = (0, import_react.forwardRef)(
({
children,
className,
align = "start",
side = "bottom",
store: externalStore,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const open = (0, import_zustand.useStore)(store, (s) => s.open);
if (!open) return null;
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES[side]} ${ALIGN_CLASSES[align]}`;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
role: "menu",
ref,
className: cn(
"bg-secondary z-50 min-w-[210px] overflow-hidden rounded-md border p-1 shadow-md border-border-100",
getPositionClasses(),
className
),
...props,
children
}
);
}
);
SelectContent.displayName = "SelectContent";
var SelectItem = (0, import_react.forwardRef)(
({
className,
children,
value,
disabled = false,
store: externalStore,
...props
}, ref) => {
const store = useSelectStore(externalStore);
const {
value: selectedValue,
setValue,
setOpen,
setSelectedLabel,
onValueChange
} = (0, import_zustand.useStore)(store, (s) => s);
const handleClick = (e) => {
const labelNode = getLabelAsNode(children);
if (!disabled) {
setValue(value);
setSelectedLabel(labelNode);
setOpen(false);
onValueChange?.(value);
}
props.onClick?.(e);
};
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"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__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.Check, { className: "" }) }),
children
]
}
);
}
);
SelectItem.displayName = "SelectItem";
var Select_default = Select;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
createSelectStore,
getLabelAsNode,
useSelectStore
});
//# sourceMappingURL=index.js.map