@trail-ui/react
Version:
1,363 lines (1,330 loc) • 56.6 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/editable-table/editable-table-body.tsx
var editable_table_body_exports = {};
__export(editable_table_body_exports, {
default: () => EditableTableBody
});
module.exports = __toCommonJS(editable_table_body_exports);
// src/spinner/spinner.tsx
var import_theme = require("@trail-ui/theme");
var import_react = require("react");
// src/spinner/spinners/bars.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Bars = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 135 140", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("rect", { y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("rect", { x: "30", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("rect", { x: "60", width: "15", height: "140", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "y",
begin: "0s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("rect", { x: "90", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0.25s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "y",
begin: "0.25s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("rect", { x: "120", y: "10", width: "15", height: "120", rx: "6", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "height",
begin: "0.5s",
dur: "1s",
values: "120;110;100;90;80;70;60;50;40;140;120",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"animate",
{
attributeName: "y",
begin: "0.5s",
dur: "1s",
values: "10;15;20;25;30;35;40;45;50;0;10",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] })
] });
// src/spinner/spinners/dots.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Dots = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("svg", { viewBox: "0 0 120 30", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", ...props, children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("circle", { cx: "15", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("circle", { cx: "60", cy: "15", r: "9", fillOpacity: "0.3", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "r",
from: "9",
to: "9",
begin: "0s",
dur: "0.8s",
values: "9;15;9",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "0.5",
to: "0.5",
begin: "0s",
dur: "0.8s",
values: ".5;1;.5",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("circle", { cx: "105", cy: "15", r: "15", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "r",
from: "15",
to: "15",
begin: "0s",
dur: "0.8s",
values: "15;9;15",
calcMode: "linear",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"animate",
{
attributeName: "fill-opacity",
from: "1",
to: "1",
begin: "0s",
dur: "0.8s",
values: "1;.5;1",
calcMode: "linear",
repeatCount: "indefinite"
}
)
] })
] });
// src/spinner/spinners/ring.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var Ring = (props) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
viewBox: "0 0 38 38",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("g", { transform: "translate(2.5 2.5)", strokeWidth: "5", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("circle", { strokeOpacity: ".5", cx: "16", cy: "16", r: "16" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M32 16c0-9.94-8.06-16-16-16", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
from: "0 16 16",
to: "360 16 16",
dur: "1s",
repeatCount: "indefinite"
}
) })
] }) })
}
);
// src/spinner/spinners/spin.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var Spin = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("g", { children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3", strokeLinecap: "round", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "stroke-dasharray",
dur: "1.5s",
calcMode: "spline",
values: "0 150;42 150;42 150;42 150",
keyTimes: "0;0.475;0.95;1",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
repeatCount: "indefinite"
}
),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animate",
{
attributeName: "stroke-dashoffset",
dur: "1.5s",
calcMode: "spline",
values: "0;-16;-59;-59",
keyTimes: "0;0.475;0.95;1",
keySplines: "0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1",
repeatCount: "indefinite"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"animateTransform",
{
attributeName: "transform",
type: "rotate",
dur: "2s",
values: "0 12 12;360 12 12",
repeatCount: "indefinite"
}
)
] }) });
// src/spinner/spinner.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var SPINNERS = {
bars: Bars,
dots: Dots,
ring: Ring,
spin: Spin
};
var DEFAULT_SPINNER = "spin";
function Spinner(props, ref) {
const { className, variant = DEFAULT_SPINNER, color, size, ...spinnerProps } = props;
const defaultSpinner = variant in SPINNERS ? variant : DEFAULT_SPINNER;
const SpinnerComponent = SPINNERS[defaultSpinner];
const styles = (0, import_react.useMemo)(
() => (0, import_theme.spinner)({
color,
size,
className
}),
[className, color, size]
);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SpinnerComponent, { "aria-hidden": true, className: styles, ref, ...spinnerProps });
}
var _Spinner = (0, import_react.forwardRef)(Spinner);
// src/editable-table/editable-table-cell.tsx
var import_react18 = require("react");
var import_icons5 = require("@trail-ui/icons");
var import_react_table3 = require("@tanstack/react-table");
// src/editable-table/editable-components/select.tsx
var import_icons2 = require("@trail-ui/icons");
var import_react7 = require("react");
// src/toast/index.ts
var toast_exports = {};
__export(toast_exports, {
customToast: () => customToast
});
// src/flag/flag.tsx
var import_react4 = require("react");
var import_theme4 = require("@trail-ui/theme");
var import_icons = require("@trail-ui/icons");
// src/button/button.tsx
var import_react2 = require("react");
var import_react_aria_components = require("react-aria-components");
var import_theme2 = require("@trail-ui/theme");
var import_jsx_runtime6 = require("react/jsx-runtime");
function Button(props, ref) {
const {
appearance,
// size = 'md',
spacing = "default",
fullWidth,
isLoading,
spinner: spinner2 = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(_Spinner, { color: "current", size: "sm", ...props.spinnerProps }),
spinnerPlacement = "start",
startContent: startContentProp,
endContent: endContentProp,
disableAnimation,
className,
children,
...otherProps
} = props;
const styles = (0, import_react2.useMemo)(
() => (0, import_theme2.button)({
// size,
isLoading,
spinnerPlacement,
startContentProp: !!startContentProp,
endContentProp: !!endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
}),
[
isLoading,
spinnerPlacement,
startContentProp,
endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
]
);
const getIconClone = (icon) => (0, import_react2.isValidElement)(icon) ? (0, import_react2.cloneElement)(icon, {
"aria-hidden": true,
focusable: false,
tabIndex: -1
}) : null;
const startContent = getIconClone(startContentProp);
const endContent = getIconClone(endContentProp);
return (
// @ts-ignore
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components.Button, { ref, className: styles, ...otherProps, children: () => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
!isLoading && startContent,
isLoading && spinnerPlacement === "start" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "shrink-0", children: [
spinner2,
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] })
] }),
children,
isLoading && spinnerPlacement === "end" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "shrink-0", children: [
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] }),
spinner2
] }),
!isLoading && endContent
] }) })
);
}
var _Button = (0, import_react2.forwardRef)(Button);
// src/button/icon-button.tsx
var import_theme3 = require("@trail-ui/theme");
var import_react3 = require("react");
var import_react_aria_components2 = require("react-aria-components");
var import_jsx_runtime7 = require("react/jsx-runtime");
function IconButton(props, ref) {
const { appearance, spacing, disableAnimation, className, children, ...otherProps } = props;
const styles = (0, import_react3.useMemo)(
() => (0, import_theme3.button)({
isIconOnly: true,
appearance,
spacing,
disableAnimation,
className
}),
[className, disableAnimation, appearance, spacing]
);
const element = children;
const _children = (0, import_react3.isValidElement)(element) ? (0, import_react3.cloneElement)(element, {
"aria-hidden": true,
focusable: false
}) : null;
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_aria_components2.Button, { ref, className: styles, ...otherProps, children: _children });
}
var _IconButton = (0, import_react3.forwardRef)(IconButton);
// src/flag/flag.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
function Flag(props) {
let flagIcon;
const { title, desc, variant, hasActionBtn, actionBtnText, isClosable, onActionClick, onClose } = props;
const variantProps = (0, import_theme4.filterVariantProps)(props, import_theme4.flag.variantKeys);
const styles = (0, import_react4.useMemo)(
() => (0, import_theme4.flag)({
...variantProps,
variant
}),
[variantProps, variant]
);
switch (variant) {
case "default":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.SettingsIcon, { height: 24, width: 24 });
break;
case "success":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.CheckCircleIcon, { height: 24, width: 24 });
break;
case "error":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.ErrorIcon, { height: 24, width: 24 });
break;
case "warning":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.WarningIcon, { height: 24, width: 24 });
break;
case "info":
flagIcon = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.InfoIcon, { height: 24, width: 24 });
break;
default:
break;
}
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "shadow-medium flex w-full gap-1.5 rounded text-base", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${styles} flex w-12 min-w-12 items-center justify-center rounded-l`, children: flagIcon }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full items-center p-2", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-full flex-col", children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "font-semibold text-neutral-900", children: title }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-normal text-neutral-700", children: desc })
] }),
hasActionBtn && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(_Button, { appearance: "link", onPress: onActionClick, children: actionBtnText || "Action" }),
isClosable && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
_IconButton,
{
spacing: "compact",
appearance: "transparent",
onPress: onClose,
"aria-label": "Close",
className: "ml-auto h-auto p-2.5",
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_icons.CloseIcon, { height: 24, width: 24, className: "text-neutral-600" })
}
)
] })
] }) });
}
// src/toast/toast.tsx
var import_react_toastify = require("react-toastify");
var import_jsx_runtime9 = require("react/jsx-runtime");
function capitalizeText(text) {
return (text == null ? void 0 : text.split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")) || "";
}
function customToast(message, type, title, options = {}) {
(0, import_react_toastify.toast)(
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "w-full overflow-hidden rounded", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Flag, { variant: type, title: title != null ? title : capitalizeText(type), desc: message }) }),
{
delay: 1e3,
...options
}
);
}
// src/toast/index.ts
__reExport(toast_exports, require("react-toastify"));
// src/editable-table/table-context/table-context-provider.tsx
var import_react5 = require("react");
var import_jsx_runtime10 = require("react/jsx-runtime");
var EditableTableContext = (0, import_react5.createContext)({
handleSaveData: () => {
},
idSelector: () => {
},
table: {}
});
function useTableContext(cell) {
const { handleSaveData, idSelector, table } = (0, import_react5.useContext)(
EditableTableContext
);
function updateData(value) {
var _a;
const accessorKey = cell.column.columnDef.accessorKey;
handleSaveData({
accessorKey,
columnId: cell.column.id,
rowId: idSelector(cell.row.original),
value
});
(_a = table.options.meta) == null ? void 0 : _a.updateData(cell.row.id, cell.column.id, value);
}
return { updateData, idSelector, table };
}
// src/editable-table/focus-handler/focus-handler-provider.tsx
var import_react6 = __toESM(require("react"));
var import_jsx_runtime11 = require("react/jsx-runtime");
var FocusHandlerContext = (0, import_react6.createContext)({
tableRef: import_react6.default.createRef(),
focusedCell: { columnIndex: 0, rowIndex: 0, isHeader: true },
setFocusedCell: () => {
}
});
function useFocusHandler(cell, isHeader) {
var _a, _b;
const { focusedCell, setFocusedCell, tableRef } = (0, import_react6.useContext)(FocusHandlerContext);
const { table } = useTableContext(cell);
const pageIndex = (_a = table == null ? void 0 : table.getState().pagination.pageIndex) != null ? _a : 0;
const pageSize = (_b = table == null ? void 0 : table.getState().pagination.pageSize) != null ? _b : 10;
const localRowIndex = cell ? cell.row.index - pageIndex * pageSize : 0;
const isCurrentCellFocused = focusedCell.isHeader === isHeader && focusedCell.rowIndex === localRowIndex && focusedCell.columnIndex === (cell == null ? void 0 : cell.column.getIndex());
function focusCurrentCell() {
if (!cell)
return;
setFocusedCell({
columnIndex: cell.column.getIndex(),
rowIndex: localRowIndex,
// 👈 Should be page-local
isHeader: isHeader != null ? isHeader : false
});
}
return { focusedCell, setFocusedCell, tableRef, isCurrentCellFocused, focusCurrentCell };
}
// src/editable-table/editable-components/select.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
var placeholderValue = "editable-select-placeholder-value";
function EditableSelect(props) {
const [initialValue, setInitialValue] = (0, import_react7.useState)("");
const [newValue, setNewValue] = (0, import_react7.useState)("");
const selectRef = (0, import_react7.useRef)(null);
const { updateData } = useTableContext(props.cell);
const { focusCurrentCell, isCurrentCellFocused, tableRef } = useFocusHandler(props.cell, false);
const label = props.cell.column.columnDef.header;
const metaData = props.cell.column.columnDef.meta;
const onBlur = (e) => {
var _a;
if (newValue === initialValue) {
cancelAndExit();
} else {
const relatedTarget = e.relatedTarget;
const isMovingWithinTable = relatedTarget && ((_a = selectRef.current) == null ? void 0 : _a.contains(relatedTarget));
if (!isMovingWithinTable) {
saveAndExit();
}
}
};
const cancelAndExit = () => {
setNewValue(props.cell.getValue());
requestAnimationFrame(() => {
props.onCancel();
});
};
const saveAndExit = () => {
const isEmpty = newValue.toString().trim().length == 0;
if (isEmpty) {
customToast("Value cannot be empty", "error");
cancelAndExit();
return;
}
if (newValue !== initialValue) {
updateData(newValue);
}
requestAnimationFrame(() => {
props.onCancel();
});
};
(0, import_react7.useEffect)(() => {
var _a;
(_a = selectRef.current) == null ? void 0 : _a.focus();
setInitialValue(props.cell.getValue());
setNewValue(props.cell.getValue());
}, []);
(0, import_react7.useEffect)(() => {
var _a, _b;
if (isCurrentCellFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement)))
(_b = selectRef.current) == null ? void 0 : _b.focus();
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative w-full", children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
"select",
{
"aria-label": `${label}`,
className: "h-10 w-fit min-w-full max-w-full cursor-pointer appearance-none rounded border border-neutral-300 bg-neutral-50 p-2 pr-10 text-sm font-medium text-neutral-900 outline-none -outline-offset-1 hover:outline-neutral-600 focus:outline-purple-600",
ref: selectRef,
value: newValue != null ? newValue : placeholderValue,
onChange: (e) => setNewValue(e.target.value),
onBlur,
onKeyDown: (e) => {
if (e.key === "Enter") {
if ((newValue == null ? void 0 : newValue.toString()) === placeholderValue) {
cancelAndExit();
return;
}
saveAndExit();
} else if (e.key === "Escape") {
cancelAndExit();
e.preventDefault();
e.stopPropagation();
} else if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
e.stopPropagation();
}
},
onFocus: focusCurrentCell,
children: [
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: placeholderValue, children: metaData.placeholder }),
metaData.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: option.value, children: option.label }, option.value))
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"div",
{
style: { top: "0px", bottom: "0px" },
className: "pointer-events-none absolute right-0 flex items-center px-2",
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_icons2.ChevronDownIcon, { className: "h-6 w-6 text-neutral-800" })
}
)
] });
}
// src/input/input.tsx
var import_icons3 = require("@trail-ui/icons");
var import_shared_utils2 = require("@trail-ui/shared-utils");
var import_theme5 = require("@trail-ui/theme");
var import_react10 = require("react");
var import_react_aria_components3 = require("react-aria-components");
// src/input/use-input.ts
var import_shared_utils = require("@trail-ui/shared-utils");
var import_react9 = require("react");
var import_react_aria2 = require("react-aria");
// src/_utils/utils.tsx
var import_utils = require("@react-aria/utils");
var import_react8 = __toESM(require("react"));
var import_react_aria = require("react-aria");
var import_react_dom = __toESM(require("react-dom"));
var import_jsx_runtime13 = require("react/jsx-runtime");
if (typeof HTMLTemplateElement !== "undefined") {
const getFirstChild = Object.getOwnPropertyDescriptor(Node.prototype, "firstChild").get;
Object.defineProperty(HTMLTemplateElement.prototype, "firstChild", {
configurable: true,
enumerable: true,
get: function() {
if (this.dataset.reactAriaHidden) {
return this.content.firstChild;
} else {
return getFirstChild.call(this);
}
}
});
}
var HiddenContext = (0, import_react8.createContext)(false);
var hiddenFragment = typeof DocumentFragment !== "undefined" ? new DocumentFragment() : null;
function useDOMRef(ref) {
const domRef = (0, import_react8.useRef)(null);
(0, import_react8.useImperativeHandle)(ref, () => domRef.current);
return domRef;
}
// src/input/use-input.ts
function useInput(props) {
const { ref, onClear, ...otherProps } = props;
const domRef = useDOMRef(ref);
const handleClear = (0, import_react9.useCallback)(() => {
if (domRef == null ? void 0 : domRef.current) {
domRef.current.value = "";
domRef.current.focus();
}
onClear == null ? void 0 : onClear();
}, [domRef, onClear]);
const { hoverProps, isHovered } = (0, import_react_aria2.useHover)({});
const { isFocused, isFocusVisible, focusProps } = (0, import_react_aria2.useFocusRing)({
isTextInput: true,
autoFocus: props.autoFocus
});
const { focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible } = (0, import_react_aria2.useFocusRing)();
const { pressProps: clearPressProps } = (0, import_react_aria2.usePress)({
isDisabled: !!(props == null ? void 0 : props.disabled),
onPress: handleClear
});
const inputValue = props["data-value"];
const isFilled = !!inputValue;
const isInvalid = !!props["aria-invalid"] && props["aria-invalid"] !== "false";
const getInputWrapperProps = (0, import_react9.useCallback)(
(inputWrapperProps = {}) => {
return {
"data-filled": (0, import_shared_utils.dataAttr)(isFilled),
"data-focused": (0, import_shared_utils.dataAttr)(isFocused),
"data-focus-visible": (0, import_shared_utils.dataAttr)(isFocusVisible),
"data-hovered": (0, import_shared_utils.dataAttr)(isHovered),
"data-disabled": (0, import_shared_utils.dataAttr)(props.disabled),
"data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
...inputWrapperProps
};
},
[isFilled, isFocusVisible, isFocused, isHovered, isInvalid, props.disabled]
);
const getInputProps = (0, import_react9.useCallback)(
(inputProps = {}) => {
return {
"data-filled": (0, import_shared_utils.dataAttr)(isFilled),
...(0, import_react_aria2.mergeProps)(otherProps, focusProps, hoverProps, inputProps),
ref: domRef
};
},
[domRef, focusProps, hoverProps, isFilled, otherProps]
);
const getClearButtonProps = (0, import_react9.useCallback)(
(clearButtonProps = {}) => {
return {
role: "button",
tabIndex: 0,
"data-focus-visible": (0, import_shared_utils.dataAttr)(isClearButtonFocusVisible),
...(0, import_react_aria2.mergeProps)(clearFocusProps, clearPressProps, clearButtonProps)
};
},
[clearFocusProps, clearPressProps, isClearButtonFocusVisible]
);
return {
domRef,
getInputWrapperProps,
getInputProps,
getClearButtonProps
};
}
// src/input/input.tsx
var import_jsx_runtime14 = require("react/jsx-runtime");
function Input(props, ref) {
[props, ref] = (0, import_react_aria_components3.useContextProps)(props, ref, import_react_aria_components3.InputContext);
const { classNames, className, variant, fullWidth, startContent, endContent, ...otherProps } = props;
const { getInputWrapperProps, getInputProps, getClearButtonProps, domRef } = useInput({
...otherProps,
ref
});
const isClearable = !!props.onClear;
const slots = (0, import_react10.useMemo)(
() => (0, import_theme5.input)({ variant, fullWidth, isClearable }),
[fullWidth, variant, isClearable]
);
const end = (0, import_react10.useMemo)(() => {
if (isClearable) {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"span",
{
...getClearButtonProps(),
className: slots.clearButton({ class: classNames == null ? void 0 : classNames.clearButton }),
children: endContent || /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_icons3.XCircleFilledIcon, {})
}
);
}
return endContent;
}, [classNames == null ? void 0 : classNames.clearButton, endContent, getClearButtonProps, isClearable, slots]);
const baseStyles = (0, import_shared_utils2.clsx)(classNames == null ? void 0 : classNames.base, className);
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: slots.base({ class: baseStyles }), ...getInputWrapperProps(), children: [
startContent,
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"input",
{
...getInputProps(),
className: slots.input({ class: classNames == null ? void 0 : classNames.input }),
ref: domRef
}
),
end
] });
}
var _Input = (0, import_react10.forwardRef)(Input);
// src/editable-table/editable-components/text-input.tsx
var import_react11 = require("react");
var import_jsx_runtime15 = require("react/jsx-runtime");
function EditableTextInput(props) {
const [value, setValue] = (0, import_react11.useState)("");
const [initialValue, setinitialValue] = (0, import_react11.useState)("");
const inputRef = (0, import_react11.useRef)(null);
const { updateData } = useTableContext(props.cell);
const { focusCurrentCell, isCurrentCellFocused, tableRef } = useFocusHandler(props.cell, false);
const columnMeta = props.cell.column.columnDef.meta;
const cancelAndExit = () => {
setValue(typeof props.cell.getValue() === "string" ? props.cell.getValue() : "");
requestAnimationFrame(() => {
props.onCancel();
});
};
const saveAndExit = () => {
const isEmpty = value !== initialValue && value.trim().length === 0;
if (isEmpty) {
customToast("Value cannot be empty", "error");
cancelAndExit();
return;
}
if (value !== initialValue) {
updateData(value);
}
requestAnimationFrame(() => {
props.onCancel();
});
};
const onKeyDown = (e) => {
const tableWrapper = document.querySelector(".editable-table");
const activeElement = document.activeElement;
if (activeElement && activeElement.tagName === "INPUT" && !(tableWrapper == null ? void 0 : tableWrapper.contains(activeElement)) || e.key === "Tab") {
return;
}
if (e.key === "Enter") {
saveAndExit();
e.preventDefault();
} else if (e.key === "Escape") {
cancelAndExit();
e.preventDefault();
}
};
const onBlur = (e) => {
var _a;
if (value === initialValue) {
cancelAndExit();
} else {
const relatedTarget = e.relatedTarget;
const isMovingWithinTable = relatedTarget && ((_a = inputRef.current) == null ? void 0 : _a.contains(relatedTarget));
if (!isMovingWithinTable) {
saveAndExit();
}
}
};
(0, import_react11.useEffect)(() => {
var _a;
(_a = inputRef.current) == null ? void 0 : _a.focus();
setinitialValue(props.cell.getValue());
setValue(props.cell.getValue());
}, []);
(0, import_react11.useEffect)(() => {
var _a, _b;
if (isCurrentCellFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement)))
(_b = inputRef.current) == null ? void 0 : _b.focus();
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
_Input,
{
className: `max-w-[${props.cell.column.columnDef.size}px]`,
type: columnMeta.type,
"aria-label": columnMeta.label,
ref: inputRef,
value,
onChange: (e) => setValue(e.target.value),
onBlur,
onKeyDown,
onFocus: focusCurrentCell
}
);
}
// src/editable-table/editable-components/number-input.tsx
var import_react12 = require("react");
var import_jsx_runtime16 = require("react/jsx-runtime");
function EditableNumberInput(props) {
const [value, setValue] = (0, import_react12.useState)("");
const [initialValue, setinitialValue] = (0, import_react12.useState)("");
const inputRef = (0, import_react12.useRef)(null);
const { updateData } = useTableContext(props.cell);
const { focusCurrentCell, isCurrentCellFocused, tableRef } = useFocusHandler(props.cell, false);
const columnMeta = props.cell.column.columnDef.meta;
const cancelAndExit = () => {
setValue(typeof props.cell.getValue() === "string" ? props.cell.getValue() : "");
requestAnimationFrame(() => {
props.onCancel();
});
};
const saveAndExit = () => {
const isEmpty = value !== initialValue && value.trim().length === 0;
if (isEmpty) {
customToast("Value cannot be empty", "error");
cancelAndExit();
return;
}
if (value !== initialValue) {
updateData(value);
}
requestAnimationFrame(() => {
props.onCancel();
});
};
const onKeyDown = (e) => {
const tableWrapper = document.querySelector(".editable-table");
const activeElement = document.activeElement;
if (activeElement && activeElement.tagName === "INPUT" && !(tableWrapper == null ? void 0 : tableWrapper.contains(activeElement)) || e.key === "Tab") {
return;
}
if (e.key === "Enter") {
saveAndExit();
e.preventDefault();
} else if (e.key === "Escape") {
cancelAndExit();
e.preventDefault();
}
};
const onBlur = (e) => {
var _a;
if (value === initialValue) {
cancelAndExit();
} else {
const relatedTarget = e.relatedTarget;
const isMovingWithinTable = relatedTarget && ((_a = inputRef.current) == null ? void 0 : _a.contains(relatedTarget));
if (!isMovingWithinTable) {
saveAndExit();
}
}
};
(0, import_react12.useEffect)(() => {
setinitialValue(props.cell.getValue());
setValue(props.cell.getValue());
}, []);
(0, import_react12.useEffect)(() => {
var _a, _b;
if (isCurrentCellFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement)))
(_b = inputRef.current) == null ? void 0 : _b.focus();
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
_Input,
{
className: `max-w-[${props.cell.column.columnDef.size}px]`,
type: "number",
step: (columnMeta == null ? void 0 : columnMeta.step) || 0.25,
"aria-label": columnMeta.label,
ref: inputRef,
value,
onBlur,
onChange: (input2) => {
setValue(input2.target.value);
},
onKeyDown,
onFocus: focusCurrentCell
}
);
}
// src/switch/switch.tsx
var import_icons4 = require("@trail-ui/icons");
var import_shared_utils3 = require("@trail-ui/shared-utils");
var import_react13 = require("react");
var import_jsx_runtime17 = require("react/jsx-runtime");
var Switch = (0, import_react13.forwardRef)(
({
label,
labelId,
isToggled,
activeText,
inactiveText,
isDisabled = false,
onChange,
tabIndex = void 0,
onFocus,
classNames
}, ref) => {
const handleToggle = () => {
if (isDisabled) {
return;
}
onChange(!isToggled);
};
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
"div",
{
className: (0, import_shared_utils3.clsx)(
isDisabled ? "pointer-events-none select-none opacity-40" : "",
"flex items-center gap-1.5 text-sm text-neutral-900",
classNames == null ? void 0 : classNames.base
),
children: [
label && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { id: labelId != null ? labelId : "label", className: (0, import_shared_utils3.clsx)("mr-0.5", classNames == null ? void 0 : classNames.label), children: label }),
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
"div",
{
role: "switch",
ref,
"aria-labelledby": labelId != null ? labelId : "label",
"aria-checked": isToggled,
tabIndex: tabIndex != null ? tabIndex : isDisabled ? -1 : 0,
className: (0, import_shared_utils3.clsx)(
`relative inline-flex h-5 w-10 cursor-pointer items-center rounded-full transition-all duration-300 ease-in-out focus-visible:outline-2 focus-visible:outline-offset-[3px] focus-visible:outline-purple-600`,
isToggled ? "bg-purple-600" : "bg-neutral-600",
classNames == null ? void 0 : classNames.switch
),
onClick: handleToggle,
onKeyDown: (e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
handleToggle();
}
},
onFocus,
children: [
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute inset-0 flex items-center justify-between px-1", children: [
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons4.CheckIcon, { className: "h-5 w-5 text-neutral-50" }),
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_icons4.CloseIcon, { className: "h-5 w-5 text-neutral-50" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
"div",
{
className: `absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-neutral-50 transition-transform duration-300 ${isToggled ? "translate-x-5" : "translate-x-0"}`
}
)
]
}
),
activeText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { "aria-hidden": "true", className: classNames == null ? void 0 : classNames.text, children: isToggled ? activeText : inactiveText })
]
}
);
}
);
Switch.displayName = "Switch";
var switch_default = Switch;
// src/editable-table/editable-components/switch.tsx
var import_react14 = require("react");
var import_jsx_runtime18 = require("react/jsx-runtime");
function EditableSwitch(props) {
var _a, _b, _c;
const [value, setValue] = (0, import_react14.useState)(false);
const cellRef = (0, import_react14.useRef)(null);
const switchRef = (0, import_react14.useRef)(null);
const { updateData } = useTableContext(props.cell);
const { isCurrentCellFocused, focusCurrentCell, tableRef } = useFocusHandler(
props.cell,
false
);
const metaData = props.cell.column.columnDef.meta;
(0, import_react14.useEffect)(() => {
setValue(props.cell.getValue());
}, []);
(0, import_react14.useEffect)(() => {
var _a2, _b2;
if (isCurrentCellFocused && ((_a2 = tableRef.current) == null ? void 0 : _a2.contains(document.activeElement))) {
(_b2 = switchRef.current) == null ? void 0 : _b2.focus();
}
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref: cellRef, className: "td-content relative rounded px-2 py-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
switch_default,
{
ref: switchRef,
isToggled: value,
onChange: (newValue) => {
setValue(newValue);
updateData(newValue);
},
tabIndex: isCurrentCellFocused ? 0 : -1,
isDisabled: ((_a = props.isCellDisabled) == null ? void 0 : _a.call(props, props.cell.row.original, props.cell.column.columnDef.id)) || false,
...metaData.label ? { label: metaData.label(props.cell.row.original) } : { labelId: props.headerId },
activeText: (_b = metaData.activeText) != null ? _b : "Enabled",
inactiveText: (_c = metaData.inactiveText) != null ? _c : "Disabled",
onFocus: focusCurrentCell,
classNames: { label: "sr-only" }
}
) });
}
// src/editable-table/editable-components/links.tsx
var import_react_table = require("@tanstack/react-table");
var import_react15 = require("react");
var import_jsx_runtime19 = require("react/jsx-runtime");
function EditableLink({
cell,
rowHeaderId,
checkBoxSelectedName
}) {
const cellRef = (0, import_react15.useRef)(null);
const { isCurrentCellFocused, focusCurrentCell, tableRef } = useFocusHandler(cell, false);
(0, import_react15.useEffect)(() => {
var _a, _b;
if (isCurrentCellFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement)))
(_b = cellRef.current) == null ? void 0 : _b.focus();
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
"div",
{
ref: cellRef,
id: checkBoxSelectedName === cell.column.id ? rowHeaderId : "",
className: "td-content px-2 py-0.5 outline-purple-600",
onClick: focusCurrentCell,
onKeyDown: (e) => {
var _a;
if (e.key === "Enter") {
const link = (_a = cellRef.current) == null ? void 0 : _a.querySelector("a");
if (!link)
return;
if (e.ctrlKey || e.metaKey) {
window.open(link.href, "_blank");
} else {
link.click();
}
}
},
onFocus: focusCurrentCell,
tabIndex: isCurrentCellFocused ? 0 : -1,
children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, {
...cell.getContext(),
tabIndex: -1
})
}
);
}
// src/editable-table/editable-components/checkbox.tsx
var import_react_table2 = require("@tanstack/react-table");
var import_react16 = require("react");
var import_jsx_runtime20 = require("react/jsx-runtime");
function EditableCheckBox(props) {
var _a;
const cellRef = (0, import_react16.useRef)(null);
const { isCurrentCellFocused, focusCurrentCell, tableRef } = useFocusHandler(
props.cell,
false
);
const metaData = props.cell.column.columnDef.meta;
const onKeyDown = (e) => {
const tableWrapper = document.querySelector(".editable-table");
const activeElement = document.activeElement;
if (activeElement && activeElement.tagName === "INPUT" && !(tableWrapper == null ? void 0 : tableWrapper.contains(activeElement)) || e.key === "Tab") {
return;
}
};
(0, import_react16.useEffect)(() => {
var _a2, _b;
if (isCurrentCellFocused && ((_a2 = tableRef.current) == null ? void 0 : _a2.contains(document.activeElement))) {
(_b = cellRef.current) == null ? void 0 : _b.focus();
}
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
"div",
{
...metaData.label ? { "aria-label": metaData.label(props.cell.row.original) } : { "aria-labelledby": (_a = props.rowHeaderId) != null ? _a : "" },
role: "checkbox",
"aria-checked": props.cell.row.getIsSelected(),
ref: cellRef,
className: "td-content flex h-[18px] w-[18px] items-center justify-center p-[10px] outline-purple-600",
onClick: (e) => {
var _a2;
if (e.target.tagName.toLowerCase() === "input") {
focusCurrentCell();
return;
}
const checkbox = (_a2 = cellRef.current) == null ? void 0 : _a2.querySelector('input[type="checkbox"]');
checkbox == null ? void 0 : checkbox.click();
focusCurrentCell();
},
onKeyDown: (e) => {
var _a2;
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
const checkbox = (_a2 = cellRef.current) == null ? void 0 : _a2.querySelector('input[type="checkbox"]');
if (checkbox) {
checkbox.click();
}
}
onKeyDown(e);
},
onFocus: focusCurrentCell,
tabIndex: isCurrentCellFocused ? 0 : -1,
children: (0, import_react_table2.flexRender)(props.cell.column.columnDef.cell, {
...props.cell.getContext(),
tabIndex: -1
})
}
);
}
// src/editable-table/editable-components/multiselect.tsx
var import_react17 = require("react");
var import_react_select = __toESM(require("react-select"));
// src/editable-table/helpers.tsx
function areArraysSame(a, b) {
if (a.length !== b.length)
return false;
const countMap = /* @__PURE__ */ new Map();
for (const value of a) {
countMap.set(value, (countMap.get(value) || 0) + 1);
}
for (const value of b) {
if (!countMap.has(value))
return false;
countMap.set(value, countMap.get(value) - 1);
if (countMap.get(value) < 0)
return false;
}
return true;
}
// src/editable-table/editable-components/multiselect.tsx
var import_jsx_runtime21 = require("react/jsx-runtime");
function EditableMultiSelect({
cell,
onCancel
}) {
const [open, setOpen] = (0, import_react17.useState)(false);
const [value, setValue] = (0, import_react17.useState)([]);
const [initialValue, setInitialValue] = (0, import_react17.useState)(
[]
);
const selectRef = (0, import_react17.useRef)(null);
const { updateData } = useTableContext(cell);
const { isCurrentCellFocused, focusCurrentCell, tableRef } = useFocusHandler(cell, false);
const metaData = cell.column.columnDef.meta;
const cancelAndExit = () => {
setValue(cell.getValue());
requestAnimationFrame(() => {
onCancel();
});
};
const saveAndExit = () => {
const isEmpty = !areArraysSame(value, initialValue) && value.length === 0;
if (isEmpty) {
customToast("Value cannot be empty", "error");
cancelAndExit();
return;
}
if (!areArraysSame(value, initialValue)) {
updateData(value);
}
requestAnimationFrame(() => {
onCancel();
});
};
function onKeyDown(e) {
if (e.key === "Enter") {
e.preventDefault();
saveAndExit();
} else if (e.key === "Escape") {
cancelAndExit();
e.preventDefault();
e.stopPropagation();
} else if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
e.stopPropagation();
}
}
const onBlur = (e) => {
if (!areArraysSame(value, initialValue)) {
cancelAndExit();
} else {
saveAndExit();
}
};
(0, import_react17.useEffect)(() => {
var _a;
setInitialValue(cell.getValue());
setValue(cell.getValue());
(_a = selectRef.current) == null ? void 0 : _a.focus();
const inputElement = document.querySelector("#multi-input input");
if (inputElement) {
inputElement.removeAttribute("aria-readonly");
inputElement.removeAttribute("aria-autocomplete");
inputElement.setAttribute("aria-haspopup", "listbox");
}
}, []);
(0, import_react17.useEffect)(() => {
var _a, _b;
if (isCurrentCellFocused && ((_a = tableRef.current) == null ? void 0 : _a.contains(document.activeElement)))
(_b = selectRef.current) == null ? void 0 : _b.focus();
}, [isCurrentCellFocused]);
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
open && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { role: "alert", className: "sr-only", "aria-live": "polite", children: "Use Up and Down arrow keys to choose options, press Enter/Space to select the currently focused option, press Escape to exit the multiselect and the editing mode, press Tab to save the selected option to exit the editing mode." }),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
import_react_select.default,
{
id: "multi-input",
ref: selectRef,
"aria-label": metaData.label,
placeholder: metaData.placeholder,
styles: metaData.customStyles,
className: `max-w-[${cell.column.columnDef.size}px] w-full shadow-red-500`,
isMulti: true,
isSearchable: false,
isClearable: false,
closeMenuOnSelect: false,
tabSelectsValue: false,
menuPosition: "fixed",
defaultValue: { label: "", value: "" },
value: metaData.options.filter((opt) => value.includes(opt.value)),
onMenuOpen: () => setOpen(true),
onMenuClose: ()