nexaas-ui-components 1.0.82 → 1.0.83

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 (7) hide show
  1. package/dist/index.cjs +95 -109
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +3 -1
  4. package/dist/index.d.ts +3 -1
  5. package/dist/index.js +95 -109
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.d.cts CHANGED
@@ -312,8 +312,10 @@ interface Props$6 {
312
312
  maxDate?: Date | undefined;
313
313
  /** Sobrescreve a cor do texto do label no estado de repouso (ex.: "text-neutral-700"). */
314
314
  labelClassName?: string;
315
+ /** Mostra o botão de limpar (X) no chip fechado, sobre o filtro já selecionado. Padrão: true. */
316
+ clearButton?: boolean;
315
317
  }
316
- declare const FilterCalendar: ({ icon, label, onApply, onClear, control, name, rangeCalendar, defaultShortcut, shortcutsChange, singleMonth, maxDate, labelClassName, }: Props$6) => JSX.Element;
318
+ declare const FilterCalendar: ({ icon, label, onApply, onClear, control, name, rangeCalendar, defaultShortcut, shortcutsChange, singleMonth, maxDate, labelClassName, clearButton, }: Props$6) => JSX.Element;
317
319
 
318
320
  interface Options {
319
321
  id: any;
package/dist/index.d.ts CHANGED
@@ -312,8 +312,10 @@ interface Props$6 {
312
312
  maxDate?: Date | undefined;
313
313
  /** Sobrescreve a cor do texto do label no estado de repouso (ex.: "text-neutral-700"). */
314
314
  labelClassName?: string;
315
+ /** Mostra o botão de limpar (X) no chip fechado, sobre o filtro já selecionado. Padrão: true. */
316
+ clearButton?: boolean;
315
317
  }
316
- declare const FilterCalendar: ({ icon, label, onApply, onClear, control, name, rangeCalendar, defaultShortcut, shortcutsChange, singleMonth, maxDate, labelClassName, }: Props$6) => JSX.Element;
318
+ declare const FilterCalendar: ({ icon, label, onApply, onClear, control, name, rangeCalendar, defaultShortcut, shortcutsChange, singleMonth, maxDate, labelClassName, clearButton, }: Props$6) => JSX.Element;
317
319
 
318
320
  interface Options {
319
321
  id: any;
package/dist/index.js CHANGED
@@ -1282,13 +1282,9 @@ var FilterCalendar = ({
1282
1282
  shortcutsChange,
1283
1283
  singleMonth = false,
1284
1284
  maxDate = void 0,
1285
- labelClassName
1285
+ labelClassName,
1286
+ clearButton = true
1286
1287
  }) => {
1287
- const style = {
1288
- filter: "rounded-3xl shadow-input bg-surface hover:bg-neutral-100 border border-[0.5px] border-neutral-300 active:text-blue-500 active:bg-blue-100 active:border-blue-500",
1289
- filterOpen: "rounded-3xl shadow-input border border-blue-500 bg-blue-100 text-blue-500",
1290
- filterActive: "rounded-3xl border border-blue-500 text-blue-500 bg-blue-100 shadow-input hover:bg-blue-500 hover:text-accent-label active:text-accent-label active:bg-blue-600 active:border-blue-600"
1291
- };
1292
1288
  const [currentValue, setCurrentValue] = useState([]);
1293
1289
  const isMobileSize = (window == null ? void 0 : window.innerWidth) < 768;
1294
1290
  const shorcuts = [
@@ -1520,8 +1516,15 @@ var FilterCalendar = ({
1520
1516
  name,
1521
1517
  control,
1522
1518
  render: ({ field }) => {
1523
- var _a;
1519
+ var _a, _b, _c;
1524
1520
  let hasValue = ((_a = field == null ? void 0 : field.value) == null ? void 0 : _a.length) > 0 || !!calendarLabel && calendarLabel !== shorcuts[0].label;
1521
+ const clearValue = () => {
1522
+ if (!onClear) return;
1523
+ onClear();
1524
+ setCurrentValue([]);
1525
+ field.onChange([]);
1526
+ };
1527
+ const chipLabel = calendarLabel ? calendarLabel : ((_b = field == null ? void 0 : field.value) == null ? void 0 : _b.length) > 0 ? (_c = field == null ? void 0 : field.value) == null ? void 0 : _c.map((item) => item !== null ? format(item, "dd/MM/yyyy") : "").join(" - ") : label;
1525
1528
  return /* @__PURE__ */ jsx(
1526
1529
  Popover,
1527
1530
  {
@@ -1529,121 +1532,104 @@ var FilterCalendar = ({
1529
1532
  { ["w-full"]: isMobileSize },
1530
1533
  "relative text-paragraph"
1531
1534
  ),
1532
- children: ({ open }) => {
1533
- var _a2, _b;
1534
- return /* @__PURE__ */ jsxs(Float, { composable: true, shift: 8, zIndex: 99, offset: 2, children: [
1535
- /* @__PURE__ */ jsx(Float.Reference, { children: /* @__PURE__ */ jsx(PopoverButton, { as: "button", children: /* @__PURE__ */ jsxs(
1536
- "div",
1535
+ children: ({ open }) => /* @__PURE__ */ jsxs(Float, { composable: true, shift: 8, zIndex: 99, offset: 6, children: [
1536
+ /* @__PURE__ */ jsx(Float.Reference, { children: /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
1537
+ /* @__PURE__ */ jsxs(
1538
+ PopoverButton,
1537
1539
  {
1540
+ as: "button",
1538
1541
  className: clsx9(
1539
- {
1540
- [style.filter]: !hasValue && !open,
1541
- [style.filterOpen]: open && !hasValue,
1542
- [style.filterActive]: open && hasValue || !open && hasValue
1543
- },
1544
- `group px-3 h-[36px] text-p-ls font-bold disabled:shadow-none active:shadow-none flex items-center justify-between outline-none gap-2`
1542
+ "group/chip flex items-center justify-center gap-[6px] rounded-lg px-3 py-2 text-p-md font-bold outline-none focus-visible:ring-[1.5px] focus-visible:ring-blue-500 focus-visible:ring-offset-[2px]",
1543
+ hasValue ? "bg-blue-100 border-[0.5px] border-blue-500 text-blue-500 shadow-[0px_1px_3px_0px_rgba(0,158,219,0.2)] hover:bg-blue-500 hover:border-transparent hover:text-white active:bg-[#007fb0] active:border-transparent active:text-white" : `bg-surface border-[0.5px] border-stroke ${labelClassName != null ? labelClassName : "text-paragraph"} shadow-[0px_1px_2px_0px_rgba(56,61,77,0.1)] hover:bg-neutral-50 active:bg-blue-100 active:border-blue-500 active:text-blue-500`
1545
1544
  ),
1546
1545
  children: [
1547
- icon && /* @__PURE__ */ jsx(
1548
- "div",
1549
- {
1550
- className: clsx9({
1551
- ["text-label group-active:text-blue-500"]: !hasValue && !open,
1552
- ["text-blue-500"]: open && !hasValue,
1553
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1554
- }),
1555
- children: icon
1556
- }
1557
- ),
1558
- /* @__PURE__ */ jsx(
1559
- "label",
1560
- {
1561
- className: clsx9(
1562
- {
1563
- [`${labelClassName != null ? labelClassName : "text-paragraph"} group-active:text-blue-500`]: !hasValue && !open,
1564
- ["text-blue-500"]: open && !hasValue,
1565
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1566
- },
1567
- "truncate cursor-pointer"
1568
- ),
1569
- children: calendarLabel ? calendarLabel : ((_a2 = field == null ? void 0 : field.value) == null ? void 0 : _a2.length) > 0 ? (_b = field == null ? void 0 : field.value) == null ? void 0 : _b.map(
1570
- (item) => item !== null ? format(item, "dd/MM/yyyy") : ""
1571
- ).join(" - ") : label
1572
- }
1573
- ),
1546
+ icon && /* @__PURE__ */ jsx("div", { className: "text-[18px] leading-none", children: icon }),
1547
+ /* @__PURE__ */ jsx("label", { className: "truncate cursor-pointer", children: chipLabel }),
1574
1548
  /* @__PURE__ */ jsx(
1575
1549
  "i",
1576
1550
  {
1577
1551
  className: clsx9(
1578
- {
1579
- ["text-label group-active:text-blue-500"]: !hasValue && !open,
1580
- ["text-blue-500"]: open && !hasValue,
1581
- ["text-blue-500 group-hover:text-accent-label group-active:text-accent-label"]: open && hasValue || !open && hasValue
1582
- },
1583
- "uil uil-angle-down text-[18px]"
1552
+ "text-[18px]",
1553
+ open ? "uil uil-angle-up" : "uil uil-angle-down",
1554
+ // Some quando o X de limpar aparece, pra não sobrepor.
1555
+ hasValue && clearButton ? "group-hover:opacity-0 group-active:opacity-0" : ""
1584
1556
  )
1585
1557
  }
1586
1558
  )
1587
1559
  ]
1588
1560
  }
1589
- ) }) }),
1590
- open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-300", children: ({ close }) => {
1591
- const onClose = () => {
1592
- setCurrentValue(field.value);
1593
- close();
1594
- };
1595
- useEffect(() => {
1596
- setCurrentValue(field.value);
1597
- }, [open]);
1598
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
1599
- calendar,
1600
- /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
1601
- onClear && /* @__PURE__ */ jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsx(
1602
- Button,
1603
- {
1604
- variant: "link",
1605
- size: "xxs",
1606
- onClick: () => {
1607
- if (onClear) {
1608
- onClear();
1609
- setCurrentValue([]);
1610
- field.onChange([]);
1611
- }
1612
- close();
1613
- },
1614
- children: "Limpar"
1615
- }
1616
- ) }),
1617
- /* @__PURE__ */ jsx(
1618
- Button,
1619
- {
1620
- size: "xs",
1621
- variant: "secondary",
1622
- onClick: () => {
1623
- onClose();
1624
- },
1625
- children: "Cancelar"
1626
- }
1627
- ),
1628
- /* @__PURE__ */ jsx(
1629
- Button,
1630
- {
1631
- size: "xs",
1632
- variant: "primary",
1633
- disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
1634
- onClick: () => {
1635
- field.onChange(currentValue);
1636
- if (onApply) onApply();
1637
- close();
1638
- },
1639
- children: "Aplicar"
1640
- }
1641
- )
1642
- ] })
1643
- ] });
1644
- } }) })
1645
- ] });
1646
- }
1561
+ ),
1562
+ hasValue && clearButton && /* @__PURE__ */ jsx(
1563
+ "button",
1564
+ {
1565
+ type: "button",
1566
+ "aria-label": "Limpar",
1567
+ onClick: (e) => {
1568
+ e.stopPropagation();
1569
+ e.preventDefault();
1570
+ clearValue();
1571
+ },
1572
+ className: clsx9(
1573
+ "absolute right-0 top-1/2 hidden h-9 -translate-y-1/2 items-center justify-end rounded-r-lg pl-2 pr-1",
1574
+ "bg-gradient-to-l from-blue-500 via-blue-500 via-[69%] to-transparent",
1575
+ "group-hover:flex group-active:flex group-active:from-[#007fb0] group-active:via-[#007fb0]"
1576
+ ),
1577
+ children: /* @__PURE__ */ jsx("span", { className: "flex h-full w-7 items-center justify-center rounded-[6px] text-white", children: /* @__PURE__ */ jsx("i", { className: "uil uil-times text-[18px]" }) })
1578
+ }
1579
+ )
1580
+ ] }) }),
1581
+ open && /* @__PURE__ */ jsx(Float.Content, { children: /* @__PURE__ */ jsx(PopoverPanel, { className: "p-3 whitespace-nowrap bg-surface rounded-lg shadow-dropdown border-[0.5px] border-neutral-200", children: ({ close }) => {
1582
+ const onClose = () => {
1583
+ setCurrentValue(field.value);
1584
+ close();
1585
+ };
1586
+ useEffect(() => {
1587
+ setCurrentValue(field.value);
1588
+ }, [open]);
1589
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
1590
+ calendar,
1591
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center justify-end border-t border-t-neutral-200 pt-3", children: [
1592
+ onClear && /* @__PURE__ */ jsx("div", { className: "mr-1", children: /* @__PURE__ */ jsx(
1593
+ Button,
1594
+ {
1595
+ variant: "link",
1596
+ size: "xxs",
1597
+ onClick: () => {
1598
+ clearValue();
1599
+ close();
1600
+ },
1601
+ children: "Limpar"
1602
+ }
1603
+ ) }),
1604
+ /* @__PURE__ */ jsx(
1605
+ Button,
1606
+ {
1607
+ size: "xs",
1608
+ variant: "secondary",
1609
+ onClick: () => {
1610
+ onClose();
1611
+ },
1612
+ children: "Cancelar"
1613
+ }
1614
+ ),
1615
+ /* @__PURE__ */ jsx(
1616
+ Button,
1617
+ {
1618
+ size: "xs",
1619
+ variant: "primary",
1620
+ disabled: JSON.stringify(currentValue) === JSON.stringify(field == null ? void 0 : field.value),
1621
+ onClick: () => {
1622
+ field.onChange(currentValue);
1623
+ if (onApply) onApply();
1624
+ close();
1625
+ },
1626
+ children: "Aplicar"
1627
+ }
1628
+ )
1629
+ ] })
1630
+ ] });
1631
+ } }) })
1632
+ ] })
1647
1633
  }
1648
1634
  );
1649
1635
  }