karsten-design-system 1.1.62 → 1.1.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +59 -59
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -10,13 +10,13 @@ import { addLocale } from 'primereact/api';
10
10
  import { Calendar } from 'primereact/calendar';
11
11
  import { Chart as Chart$1 } from 'primereact/chart';
12
12
  import { Divider as Divider$1 } from 'primereact/divider';
13
+ import ReactDOM from 'react-dom';
13
14
  import { InputSwitch as InputSwitch$1 } from 'primereact/inputswitch';
14
15
  import { InputTextarea } from 'primereact/inputtextarea';
15
16
  import { Sidebar as Sidebar$1 } from 'primereact/sidebar';
16
17
  import { Paginator as Paginator$1 } from 'primereact/paginator';
17
18
  import { classNames } from 'primereact/utils';
18
19
  import { Skeleton as Skeleton$1 } from 'primereact/skeleton';
19
- import ReactDOM from 'react-dom';
20
20
 
21
21
  function styleInject(css, ref) {
22
22
  if ( ref === void 0 ) ref = {};
@@ -509,6 +509,57 @@ function FilterButton({ filterOptions, setOption, option, variant, icon, label,
509
509
  return (jsxs("div", { className: "relative flex flex-col items-end", children: [jsx(Button$1, { ...props, icon: icon, label: label, className: clsx('w-max shadow-none border-none !py-2 gap-2 items-center disabled:bg-stoneDark', props.disabled ? '!disabled:text-background' : variants$2[variant].text, variants$2[variant].button), onClick: toggleDropdown }), isOpen && (jsx("div", { className: `absolute w-40 bg-background shadow-md border border-gray z-[9] rounded-md p-2 -bottom-1 translate-y-full`, children: jsx("ul", { children: filterOptions.map((filterOption) => (jsxs("li", { onClick: () => handleSelect(filterOption), className: "p-2 flex justify-between items-center cursor-pointer", children: [filterOption.label, jsx("input", { type: "radio", onChange: () => handleSelect(filterOption), checked: filterOption?.value === option?.value, className: "appearance-none w-2 h-2 rounded-full ring-1 ring-offset-2 ring-offset-background ring-gray checked:bg-primary cursor-pointer" })] }, filterOption.value))) }) }))] }));
510
510
  }
511
511
 
512
+ function Tooltip({ text, children }) {
513
+ const [isVisible, setIsVisible] = useState(false);
514
+ const [coords, setCoords] = useState({ top: 0, left: 0 });
515
+ const [adjustedLeft, setAdjustedLeft] = useState(null);
516
+ const [isClient, setIsClient] = useState(false);
517
+ const ref = useRef(null);
518
+ const tooltipRef = useRef(null);
519
+ useEffect(() => {
520
+ setIsClient(true);
521
+ }, []);
522
+ const showTooltip = () => {
523
+ if (!text)
524
+ return;
525
+ setIsVisible(true);
526
+ if (ref?.current) {
527
+ const rect = ref.current.getBoundingClientRect();
528
+ setCoords({
529
+ top: rect.top,
530
+ left: rect.left + rect.width / 2,
531
+ });
532
+ }
533
+ };
534
+ useEffect(() => {
535
+ if (isClient && isVisible && tooltipRef.current) {
536
+ const tooltipRect = tooltipRef.current.getBoundingClientRect();
537
+ const overflowRight = tooltipRect.right > window.innerWidth;
538
+ const overflowLeft = tooltipRect.left < 0;
539
+ let newLeft = coords.left;
540
+ if (overflowLeft) {
541
+ newLeft = 120;
542
+ }
543
+ if (overflowRight && !overflowLeft) {
544
+ newLeft += -28;
545
+ }
546
+ setAdjustedLeft(newLeft);
547
+ }
548
+ }, [isClient, isVisible, coords]);
549
+ return (jsxs("div", { ref: ref, className: "inline-block", onMouseEnter: showTooltip, onMouseLeave: () => {
550
+ setIsVisible(false);
551
+ setAdjustedLeft(null);
552
+ }, children: [children, isClient &&
553
+ isVisible &&
554
+ typeof document !== 'undefined' &&
555
+ ReactDOM.createPortal(jsx("div", { ref: tooltipRef, className: "fixed z-50 bg-[#646981] text-white text-sm py-1 px-2 rounded-md whitespace-nowrap", style: {
556
+ top: coords.top - 10,
557
+ left: adjustedLeft ?? coords.left,
558
+ transform: 'translate(-50%, -100%)',
559
+ pointerEvents: 'none',
560
+ }, children: text }), document.body)] }));
561
+ }
562
+
512
563
  function Sidebar({ item, onClose, topItem }) {
513
564
  return (jsxs("div", { className: "relative w-100", children: [jsx("div", { className: "fixed bottom-0 w-100 h-[calc(100vh_-_64px)] bg-backgroundDark/20 z-50", onClick: onClose }), jsxs("div", { className: "fixed h-[calc(100vh_-_64px)] bottom-0 w-72 bg-background z-50", children: [jsx("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-stone hover:bg-stoneBackground hover:font-bold", children: jsx(Link$1, { to: "/", className: "font-roboto text-base text-backgroundDark hover:font-bold", onClick: onClose, "aria-label": "Ir para o inicio", children: "In\u00EDcio" }, "home-id") }, 'home-div'), topItem &&
514
565
  topItem.map((item) => (jsxs("div", { className: "cursor-pointer flex flex-row gap-3 items-center border-b pl-6 px-2 py-2 border-b-stone hover:bg-stoneBackground hover:font-bold", children: [item?.isWindowOpen && (jsx("button", { className: "font-roboto text-base text-backgroundDark hover:font-bold", onClick: () => {
@@ -517,8 +568,8 @@ function Sidebar({ item, onClose, topItem }) {
517
568
  if (typeof window !== 'undefined') {
518
569
  window.open(item?.path, '_blank');
519
570
  }
520
- }, "aria-label": `Ir para ${item?.title}`, children: item?.title }, item?.id || item.title)), !item?.isWindowOpen && (jsx(Link$1, { to: item?.path || '', className: "font-roboto text-base text-backgroundDark hover:font-bold", onClick: onClose, "aria-label": `Ir para ${item?.title}`, children: item?.title }, item?.id || item.title))] }, `top-item-${item?.id ?? item.title}`))), jsxs("div", { className: "flex flex-row gap-3 items-center pl-6 pt-8 pb-4", children: [jsx("i", { className: "pi pi-star !text-backgroundDark !font-bold text-lg" }), jsx("p", { className: "text-backgroundDark font-bold text-lg", children: "Favoritos" })] }), jsx("div", { className: "overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:rounded-r-md [&::-webkit-scrollbar-thumb]:rounded-md [&::-webkit-scrollbar-track]:bg-stone [&::-webkit-scrollbar-thumb]:bg-stoneDark", children: item &&
521
- item.map((item) => (jsx(Link$1, { className: "flex flex-row items-center pl-6 gap-2 border-b border-b-stone hover:bg-stoneBackground hover:font-bold", to: item.path || '', onClick: onClose, "aria-label": `Ir para ${item.title}`, children: jsx("span", { className: "font-roboto text-base py-2 text-backgroundDark hover:font-bold", children: item.title }) }, item.id))) })] }, 'sidebar-div')] }));
571
+ }, "aria-label": `Ir para ${item?.title}`, children: jsx(Tooltip, { text: item?.tooltipText, children: item?.title }) }, item?.id || item.title)), !item?.isWindowOpen && (jsx(Link$1, { to: item?.path || '', className: "font-roboto text-base text-backgroundDark hover:font-bold", onClick: onClose, "aria-label": `Ir para ${item?.title}`, children: jsx(Tooltip, { text: item?.tooltipText, children: item?.title }) }, item?.id || item.title))] }, `top-item-${item?.id ?? item.title}`))), jsxs("div", { className: "flex flex-row gap-3 items-center pl-6 pt-8 pb-4", children: [jsx("i", { className: "pi pi-star !text-backgroundDark !font-bold text-lg" }), jsx("p", { className: "text-backgroundDark font-bold text-lg", children: "Favoritos" })] }), jsx("div", { className: "overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:rounded-r-md [&::-webkit-scrollbar-thumb]:rounded-md [&::-webkit-scrollbar-track]:bg-stone [&::-webkit-scrollbar-thumb]:bg-stoneDark", children: item &&
572
+ item.map((item) => (jsx(Link$1, { className: "flex flex-row items-center pl-6 gap-2 border-b border-b-stone hover:bg-stoneBackground hover:font-bold", to: item.path || '', onClick: onClose, "aria-label": `Ir para ${item.title}`, children: jsx("span", { className: "font-roboto text-base py-2 text-backgroundDark hover:font-bold", children: jsx(Tooltip, { text: item?.tooltipText, children: item.title }) }) }, item.id))) })] }, 'sidebar-div')] }));
522
573
  }
523
574
 
524
575
  function Header({ sidebarItems, sidebarTopItems, username, userConfigItems, setOpenNotifications, }) {
@@ -604,7 +655,7 @@ function InternalMenu({ item, isFiltering }) {
604
655
  }, [isFiltering, item]);
605
656
  return (jsx("div", { className: "w-72 overflow-x-hidden overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:rounded-r-md [&::-webkit-scrollbar-thumb]:rounded-md [&::-webkit-scrollbar-track]:bg-stone [&::-webkit-scrollbar-thumb]:bg-stoneDark ", children: item.map((menuItem) => {
606
657
  const isOpen = openItems.includes(menuItem);
607
- return (jsxs("div", { children: [jsxs("div", { className: "cursor-pointer flex flex-row justify-between items-center border-b px-2 py-1 border-b-stone", onClick: () => toggleMenu(menuItem), children: [jsxs("div", { className: "flex flex-row items-center gap-2", children: [jsx(TextIcon, {}), jsx("span", { className: "font-roboto text-base text-primary", children: menuItem.title })] }), menuItem.subItem && (jsx("i", { className: `pi ${isOpen ? 'pi-angle-up' : 'pi-angle-down'} px-2 text-primary` }))] }), menuItem.subItem && isOpen && (jsx("div", { className: "flex flex-col", children: menuItem.subItem.map((subItem) => (jsx(Link$1, { className: clsx('cursor-pointer text-base text-primary pl-6 py-1 hover:font-bold hover:text-primary hover:bg-stoneBackground', subItem.isActive ? 'text-primary font-bold' : ''), to: subItem.path, children: jsx("span", { children: subItem.title }) }, subItem.id))) }))] }, menuItem.id));
658
+ return (jsxs("div", { children: [jsxs("div", { className: "cursor-pointer flex flex-row justify-between items-center border-b px-2 py-1 border-b-stone", onClick: () => toggleMenu(menuItem), children: [jsxs("div", { className: "flex flex-row items-center gap-2", children: [jsx(TextIcon, {}), jsx("span", { className: "font-roboto text-base text-primary", children: menuItem.title })] }), menuItem.subItem && (jsx("i", { className: `pi ${isOpen ? 'pi-angle-up' : 'pi-angle-down'} px-2 text-primary` }))] }), menuItem.subItem && isOpen && (jsx("div", { className: "flex flex-col", children: menuItem.subItem.map((subItem) => (jsx(Link$1, { className: clsx('cursor-pointer text-base text-primary pl-6 py-1 hover:font-bold hover:text-primary hover:bg-stoneBackground', subItem.isActive ? 'text-primary font-bold' : ''), to: subItem.path, children: jsx(Tooltip, { text: subItem?.tooltipText, children: jsx("span", { children: subItem.title }) }) }, subItem.id))) }))] }, menuItem.id));
608
659
  }) }));
609
660
  }
610
661
 
@@ -4385,14 +4436,14 @@ function Table({ columns, data, totalRecords, actions = [], isOrdered = true, ac
4385
4436
  const value = getNestedValue(row, column.dataIndex);
4386
4437
  return (jsx("td", { className: clsx('p-3 text-sm text-left', typeof column.style === 'function'
4387
4438
  ? column.style(getNestedValue(row, column.dataIndex), row)
4388
- : column.style), children: column.render
4389
- ? column.render(value, row)
4390
- : String(value) }, String(column.dataIndex)));
4439
+ : column.style), children: jsxs(Tooltip, { text: column?.tooltipText?.(value, row), children: [' ', column.render
4440
+ ? column.render(value, row)
4441
+ : String(value)] }) }, String(column.dataIndex)));
4391
4442
  }), actions.length > 0 && (jsx("td", { className: clsx('text-sm text-right flex flex-row justify-end p-3 gap-2', actionsColumnsClassName), children: actions.map((action, idx) => (jsx("span", { className: clsx('cursor-pointer', action.disabled &&
4392
4443
  'opacity-50 pointer-events-none cursor-not-allowed'), onClick: () => {
4393
4444
  if (!action.disabled)
4394
4445
  action.onClick(row);
4395
- }, "aria-label": action?.ariaLabel || action.label, role: "button", children: action.icon }, idx))) }))] }, index)))) : (jsx("tr", { children: jsxs("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center text-primary bg-stoneBackground", children: [jsx("i", { className: "pi pi-database mr-2" }), " N\u00E3o h\u00E1 dados dispon\u00EDveis."] }) })) })] }), sortedData.length > 0 && isPaginated && (jsx(Paginator, { first: (currentPage - 1) * rowsPerPage, rows: rowsPerPage, totalRecords: totalRecords, onPageChange: (event) => {
4446
+ }, "aria-label": action?.ariaLabel || action.label, role: "button", children: jsx(Tooltip, { text: action?.label, children: action.icon }) }, idx))) }))] }, index)))) : (jsx("tr", { children: jsxs("td", { colSpan: columns.length + (actions.length > 0 ? 1 : 0), className: "p-6 text-center text-primary bg-stoneBackground", children: [jsx("i", { className: "pi pi-database mr-2" }), " N\u00E3o h\u00E1 dados dispon\u00EDveis."] }) })) })] }), sortedData.length > 0 && isPaginated && (jsx(Paginator, { first: (currentPage - 1) * rowsPerPage, rows: rowsPerPage, totalRecords: totalRecords, onPageChange: (event) => {
4396
4447
  setCurrentPage(event.page + 1);
4397
4448
  onPageChange(event.page + 1);
4398
4449
  } }))] }));
@@ -4449,56 +4500,5 @@ function Toast({ messages }) {
4449
4500
  : ''), "aria-label": "toast", children: [severity === 'success' && jsx(SuccessIcon, {}), severity === 'info' && jsx(InfoIcon, {}), severity === 'error' && jsx(ErrorIcon, {}), jsxs("div", { children: [jsx("strong", { children: summary }), jsx("p", { children: detail })] })] }, id))) }));
4450
4501
  }
4451
4502
 
4452
- function Tooltip({ text, children }) {
4453
- const [isVisible, setIsVisible] = useState(false);
4454
- const [coords, setCoords] = useState({ top: 0, left: 0 });
4455
- const [adjustedLeft, setAdjustedLeft] = useState(null);
4456
- const [isClient, setIsClient] = useState(false);
4457
- const ref = useRef(null);
4458
- const tooltipRef = useRef(null);
4459
- useEffect(() => {
4460
- setIsClient(true);
4461
- }, []);
4462
- const showTooltip = () => {
4463
- if (!text)
4464
- return;
4465
- setIsVisible(true);
4466
- if (ref?.current) {
4467
- const rect = ref.current.getBoundingClientRect();
4468
- setCoords({
4469
- top: rect.top,
4470
- left: rect.left + rect.width / 2,
4471
- });
4472
- }
4473
- };
4474
- useEffect(() => {
4475
- if (isClient && isVisible && tooltipRef.current) {
4476
- const tooltipRect = tooltipRef.current.getBoundingClientRect();
4477
- const overflowRight = tooltipRect.right > window.innerWidth;
4478
- const overflowLeft = tooltipRect.left < 0;
4479
- let newLeft = coords.left;
4480
- if (overflowLeft) {
4481
- newLeft = 120;
4482
- }
4483
- if (overflowRight && !overflowLeft) {
4484
- newLeft += -28;
4485
- }
4486
- setAdjustedLeft(newLeft);
4487
- }
4488
- }, [isClient, isVisible, coords]);
4489
- return (jsxs("div", { ref: ref, className: "inline-block", onMouseEnter: showTooltip, onMouseLeave: () => {
4490
- setIsVisible(false);
4491
- setAdjustedLeft(null);
4492
- }, children: [children, isClient &&
4493
- isVisible &&
4494
- typeof document !== 'undefined' &&
4495
- ReactDOM.createPortal(jsx("div", { ref: tooltipRef, className: "fixed z-50 bg-[#646981] text-white text-sm py-1 px-2 rounded-md whitespace-nowrap", style: {
4496
- top: coords.top - 10,
4497
- left: adjustedLeft ?? coords.left,
4498
- transform: 'translate(-50%, -100%)',
4499
- pointerEvents: 'none',
4500
- }, children: text }), document.body)] }));
4501
- }
4502
-
4503
4503
  export { Accordion, AutoComplete, BasicHeader, Breadcrumb, Button, CalendarInput, Card, CardButton, CardIconsButton, Chart, Dialog, Divider, EmptyContent, ExpandablePanel, FileUpload, FilterButton, Header, IconButton, InfoCard, Input, InputSwitch, InputTextArea, InternalMenu, Link, MegaMenu, Modal, MultiSelect, Notification, Paginator, RadioButton, Select, Sidebar, Skeleton, Spinner, Table, TagStatus, Toast, Tooltip };
4504
4504
  //# sourceMappingURL=index.js.map