@pismo/marola 1.0.0-beta.13 → 1.0.0-beta.14

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 (11) hide show
  1. package/dist/assets/Table.css +1 -1
  2. package/dist/components/EllipsisTooltip/EllipsisTooltip.js +30 -17
  3. package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts +1 -0
  4. package/dist/components/Skeleton/Skeleton.d.ts +3 -1
  5. package/dist/components/Skeleton/Skeleton.js +18 -12
  6. package/dist/components/Skeleton/SkeletonTable.stories.d.ts +1 -1
  7. package/dist/components/Table/Table.js +84 -84
  8. package/dist/components/Tooltip/Tooltip.d.ts +3 -1
  9. package/dist/components/Tooltip/Tooltip.js +1 -1
  10. package/dist/components/Tooltip/Tooltip.stories.d.ts +1 -0
  11. package/package.json +2 -2
package/dist/assets/Table.css CHANGED
@@ -1 +1 @@
1
- ._u-typography-h1_9cjay_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_9cjay_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_9cjay_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_9cjay_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_9cjay_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_9cjay_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_9cjay_43,._table_9cjay_43 tbody{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_9cjay_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_9cjay_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_9cjay_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_9cjay_61,._table_9cjay_43 thead{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_9cjay_65,._table_9cjay_43 thead{font-weight:var(--base-bold)}._u-typography-base--strikethrough_9cjay_68{text-decoration:line-through}._u-typography-base--underlined_9cjay_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_9cjay_74{text-decoration:underline line-through}._table_9cjay_43{color:var(--secondary-orange);border-spacing:0}._table--full-width_9cjay_82{width:100%}._table--white-theme_9cjay_85{background:var(--white-100)}._table--transparent-theme_9cjay_88{background:transparent}._table_9cjay_43 th._cell--left-alignment_9cjay_91,._table_9cjay_43 td._cell--left-alignment_9cjay_91{text-align:left}._table_9cjay_43 th._cell--center-alignment_9cjay_95,._table_9cjay_43 td._cell--center-alignment_9cjay_95{text-align:center}._table_9cjay_43 th._cell--right-alignment_9cjay_99,._table_9cjay_43 td._cell--right-alignment_9cjay_99{text-align:right}._table_9cjay_43 thead{color:var(--gray-90);text-transform:uppercase}._table_9cjay_43 thead tr th{--children-pv: 4px;--children-ph: 8px;align-items:center;padding:calc(1.5rem - var(--children-pv)) calc(.75rem - var(--children-ph));line-height:1rem;border-bottom:1px solid var(--gray-25)}._table_9cjay_43 thead tr th ._th__wrapper_9cjay_115{padding:var(--children-pv) var(--children-ph)}._table_9cjay_43 thead tr th ._th__wrapper--pressed_9cjay_118{background-color:var(--gray-10);border-radius:6px}._table_9cjay_43 thead tr th ._th__wrapper--clickable_9cjay_122{cursor:pointer}._table_9cjay_43 thead tr th ._th__wrapper_9cjay_115 ._th__sort-icon-container_9cjay_125{padding-left:4px}._table_9cjay_43 tbody{color:var(--gray-90)}._table_9cjay_43 tbody tr:hover:not(._tr__row-or-cell--disabled_9cjay_131){background-color:rgb(var(--gray-5-rgb),.5)}._table_9cjay_43 tbody ._tr_9cjay_131,._table_9cjay_43 tbody ._td_9cjay_135{padding:16px 12px;line-height:var(--body-line-height);border-bottom:1px solid var(--gray-10)}._table_9cjay_43 tbody ._tr__row-or-cell--clickable_9cjay_140,._table_9cjay_43 tbody ._td__row-or-cell--clickable_9cjay_141{cursor:pointer}._table_9cjay_43 tbody ._tr__row-or-cell--disabled_9cjay_131,._table_9cjay_43 tbody ._td__row-or-cell--disabled_9cjay_145{background:var(--cream);filter:grayscale(1)}._table_9cjay_43 tbody ._tr__row-or-cell--disabled_9cjay_131 ._td-wrapper_9cjay_149,._table_9cjay_43 tbody ._td__row-or-cell--disabled_9cjay_145 ._td-wrapper_9cjay_149{opacity:.25}
1
+ ._u-typography-h1_pknqm_1{font-size:var(--heading-font-size-1);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-1);margin:0}._u-typography-h2_pknqm_8{font-size:var(--heading-font-size-2);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-2);margin:0}._u-typography-h3_pknqm_15{font-size:var(--heading-font-size-3);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-3);margin:0}._u-typography-h4_pknqm_22{font-size:var(--heading-font-size-4);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-4);margin:0}._u-typography-h5_pknqm_29{font-size:var(--heading-font-size-5);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-5);margin:0}._u-typography-h6_pknqm_36{font-size:var(--heading-font-size-6);font-weight:var(--heading-font-weight);line-height:var(--heading-line-height-6);margin:0}._u-typography-base_pknqm_43,._table_pknqm_43 tbody{margin:0;font-size:var(--base-font-size);font-weight:var(--base-weight);line-height:var(--base-line-height)}._u-typography-base--xxl_pknqm_49{font-size:var(--base-font-size-xxl);line-height:var(--base-line-height-xxl)}._u-typography-base--xl_pknqm_53{font-size:var(--base-font-size-xl);line-height:var(--base-line-height-xl)}._u-typography-base--lg_pknqm_57{font-size:var(--base-font-size-lg);line-height:var(--base-line-height-lg)}._u-typography-base--sm_pknqm_61,._table_pknqm_43 thead{font-size:var(--base-font-size-sm);line-height:var(--base-line-height-sm)}._u-typography-base--bold_pknqm_65,._table_pknqm_43 thead{font-weight:var(--base-bold)}._u-typography-base--strikethrough_pknqm_68{text-decoration:line-through}._u-typography-base--underlined_pknqm_71{text-decoration:underline}._u-typography-base--strikethrough-underlined_pknqm_74{text-decoration:underline line-through}._table_pknqm_43{color:var(--secondary-orange);border-spacing:0;table-layout:fixed}._table--full-width_pknqm_83{width:100%}._table--white-theme_pknqm_86{background:var(--white-100)}._table--transparent-theme_pknqm_89{background:transparent}._table_pknqm_43 th._cell--left-alignment_pknqm_92,._table_pknqm_43 td._cell--left-alignment_pknqm_92{text-align:left}._table_pknqm_43 th._cell--center-alignment_pknqm_96,._table_pknqm_43 td._cell--center-alignment_pknqm_96{text-align:center}._table_pknqm_43 th._cell--right-alignment_pknqm_100,._table_pknqm_43 td._cell--right-alignment_pknqm_100{text-align:right}._table_pknqm_43 thead{color:var(--gray-90);text-transform:uppercase}._table_pknqm_43 thead tr th{--children-pv: 4px;--children-ph: 8px;align-items:center;padding:calc(1.5rem - var(--children-pv)) calc(.75rem - var(--children-ph));line-height:1rem;border-bottom:1px solid var(--gray-25)}._table_pknqm_43 thead tr th ._th__wrapper_pknqm_116{padding:var(--children-pv) var(--children-ph)}._table_pknqm_43 thead tr th ._th__wrapper--pressed_pknqm_119{background-color:var(--gray-10);border-radius:6px}._table_pknqm_43 thead tr th ._th__wrapper--clickable_pknqm_123{cursor:pointer}._table_pknqm_43 thead tr th ._th__wrapper_pknqm_116 ._th__sort-icon-container_pknqm_126{padding-left:4px}._table_pknqm_43 tbody{color:var(--gray-90)}._table_pknqm_43 tbody tr:hover:not(._tr__row-or-cell--disabled_pknqm_132){background-color:rgb(var(--gray-5-rgb),.5)}._table_pknqm_43 tbody ._tr_pknqm_132,._table_pknqm_43 tbody ._td_pknqm_136{padding:16px 12px;line-height:var(--body-line-height);border-bottom:1px solid var(--gray-10)}._table_pknqm_43 tbody ._tr__row-or-cell--clickable_pknqm_141,._table_pknqm_43 tbody ._td__row-or-cell--clickable_pknqm_142{cursor:pointer}._table_pknqm_43 tbody ._tr__row-or-cell--disabled_pknqm_132,._table_pknqm_43 tbody ._td__row-or-cell--disabled_pknqm_146{background:var(--cream);filter:grayscale(1)}._table_pknqm_43 tbody ._tr__row-or-cell--disabled_pknqm_132 ._td-wrapper_pknqm_150,._table_pknqm_43 tbody ._td__row-or-cell--disabled_pknqm_146 ._td-wrapper_pknqm_150{opacity:.25}
package/dist/components/EllipsisTooltip/EllipsisTooltip.js CHANGED
@@ -1,23 +1,36 @@
1
1
  import '../../assets/EllipsisTooltip.css';
2
- import { jsx as l } from "react/jsx-runtime";
3
- import { useState as h } from "react";
4
- import { c as d } from "../../clsx-DB4S2d7J.js";
5
- import { Tooltip as g } from "../Tooltip/Tooltip.js";
6
- const H = {
2
+ import { jsx as o, jsxs as d, Fragment as f } from "react/jsx-runtime";
3
+ import { useState as g } from "react";
4
+ import { c as x } from "../../clsx-DB4S2d7J.js";
5
+ import { Tooltip as H } from "../Tooltip/Tooltip.js";
6
+ const T = {
7
7
  "ellipsis-tooltip": "_ellipsis-tooltip_krf68_1"
8
- }, S = ({
9
- lineClamp: s = 1,
10
- children: e,
11
- className: i,
12
- disableHoverListener: o,
13
- ...r
8
+ }, W = ({
9
+ lineClamp: e = 1,
10
+ children: i,
11
+ className: r,
12
+ disableHoverListener: t,
13
+ ...a
14
14
  }) => {
15
- const [c, a] = h(!1), p = (t) => {
16
- const m = t.scrollWidth > t.clientWidth, f = t.scrollHeight > t.clientHeight;
17
- a(m || f);
18
- }, n = typeof o == "boolean" ? o : !c;
19
- return /* @__PURE__ */ l(g, { className: d(i), ...r, onTargetCreated: p, disableHoverListener: n, children: /* @__PURE__ */ l("span", { style: { "--line-clamp": s }, className: H["ellipsis-tooltip"], children: e }) });
15
+ const [s, c] = g(!1), n = (l) => {
16
+ const m = l.scrollWidth > l.clientWidth, h = l.scrollHeight > l.clientHeight;
17
+ c(m || h);
18
+ }, p = typeof t == "boolean" ? t : !s;
19
+ return /* @__PURE__ */ o(
20
+ H,
21
+ {
22
+ className: x(r),
23
+ ...a,
24
+ onTargetCreated: n,
25
+ disableHoverListener: p,
26
+ disablePortal: !1,
27
+ children: /* @__PURE__ */ d("span", { style: { "--line-clamp": e }, className: T["ellipsis-tooltip"], children: [
28
+ i,
29
+ s && /* @__PURE__ */ o(f, { children: " ‌" })
30
+ ] })
31
+ }
32
+ );
20
33
  };
21
34
  export {
22
- S as EllipsisTooltip
35
+ W as EllipsisTooltip
23
36
  };
package/dist/components/EllipsisTooltip/EllipsisTooltip.stories.d.ts CHANGED
@@ -19,6 +19,7 @@ declare const meta: {
19
19
  position?: import('@floating-ui/utils').Placement | undefined;
20
20
  padding?: "small" | "normal" | undefined;
21
21
  theme?: "black" | "white" | undefined;
22
+ disablePortal?: boolean | undefined;
22
23
  arialRole?: import('react').AriaRole | undefined;
23
24
  disableHoverListener?: boolean | undefined;
24
25
  lineClamp?: number | undefined;
package/dist/components/Skeleton/Skeleton.d.ts CHANGED
@@ -20,6 +20,8 @@ export type SkeletonTableProps = SkeletonProps & {
20
20
  rows?: number;
21
21
  /** Controls if the with of the cells should be automatically defined */
22
22
  autoWidth?: boolean;
23
+ /** Controls if show or not the skeleton of the table header */
24
+ showHeader?: boolean;
23
25
  };
24
- declare const SkeletonTable: ({ columns, rows, autoWidth, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
26
+ declare const SkeletonTable: ({ columns, rows, autoWidth, showHeader, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
25
27
  export { Skeleton, SkeletonCircle, SkeletonTable };
package/dist/components/Skeleton/Skeleton.js CHANGED
@@ -1,23 +1,29 @@
1
1
  import '../../assets/Skeleton.css';
2
- import { jsx as t, jsxs as w } from "react/jsx-runtime";
2
+ import { jsx as t, jsxs as N } from "react/jsx-runtime";
3
3
  import { c as r } from "../../clsx-DB4S2d7J.js";
4
- const N = "_skeleton_dtmoz_1", b = "_skeletonLoading_dtmoz_1", o = {
5
- skeleton: N,
4
+ const u = "_skeleton_dtmoz_1", b = "_skeletonLoading_dtmoz_1", o = {
5
+ skeleton: u,
6
6
  skeletonLoading: b,
7
7
  "skeleton--circle-type": "_skeleton--circle-type_dtmoz_13",
8
8
  "skeleton--table-type": "_skeleton--table-type_dtmoz_17"
9
- }, i = (e) => /* @__PURE__ */ t("div", { ...e, className: r(o.skeleton, e.className) }), $ = ({ size: e = "4rem", ...l }) => {
9
+ }, d = (e) => /* @__PURE__ */ t("div", { ...e, className: r(o.skeleton, e.className) }), C = ({ size: e = "4rem", ...l }) => {
10
10
  const s = r(o.skeleton, o["skeleton--circle-type"], l.className);
11
11
  return /* @__PURE__ */ t("div", { ...l, style: { width: e, height: e }, className: s });
12
- }, d = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, C = ({ columns: e = 5, rows: l = 5, autoWidth: s = !0, ...c }) => {
13
- const m = r(o["skeleton--table-type"], c.className), a = `${100 / e}%`, h = /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((y, n) => /* @__PURE__ */ t("th", { style: { width: a }, children: /* @__PURE__ */ t(i, { style: { width: s ? d(50) : "100%" } }) }, `row-columns-${n}`)) }), k = new Array(l).fill(null).map((y, n) => /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((f, _) => /* @__PURE__ */ t("td", { style: { width: a }, children: /* @__PURE__ */ t(i, { style: { width: s ? d() : "100%" } }) }, `row-${n}-cell-${_}`)) }, `row-${n}`));
14
- return /* @__PURE__ */ w("table", { ...c, className: m, children: [
15
- /* @__PURE__ */ t("thead", { children: h }),
16
- /* @__PURE__ */ t("tbody", { children: k })
12
+ }, m = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, L = ({
13
+ columns: e = 5,
14
+ rows: l = 5,
15
+ autoWidth: s = !0,
16
+ showHeader: c = !0,
17
+ ...a
18
+ }) => {
19
+ const k = r(o["skeleton--table-type"], a.className), i = `${100 / e}%`, h = c && /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((_, n) => /* @__PURE__ */ t("th", { style: { width: i }, children: /* @__PURE__ */ t(d, { style: { width: s ? m(50) : "100%" } }) }, `row-columns-${n}`)) }), y = new Array(l).fill(null).map((_, n) => /* @__PURE__ */ t("tr", { children: new Array(e).fill(null).map((f, w) => /* @__PURE__ */ t("td", { style: { width: i }, children: /* @__PURE__ */ t(d, { style: { width: s ? m() : "100%" } }) }, `row-${n}-cell-${w}`)) }, `row-${n}`));
20
+ return /* @__PURE__ */ N("table", { ...a, className: k, children: [
21
+ c && /* @__PURE__ */ t("thead", { children: h }),
22
+ /* @__PURE__ */ t("tbody", { children: y })
17
23
  ] });
18
24
  };
19
25
  export {
20
- i as Skeleton,
21
- $ as SkeletonCircle,
22
- C as SkeletonTable
26
+ d as Skeleton,
27
+ C as SkeletonCircle,
28
+ L as SkeletonTable
23
29
  };
package/dist/components/Skeleton/SkeletonTable.stories.d.ts CHANGED
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
2
2
 
3
3
  declare const meta: {
4
4
  title: string;
5
- component: ({ columns, rows, autoWidth, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
5
+ component: ({ columns, rows, autoWidth, showHeader, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
6
6
  tags: string[];
7
7
  parameters: {
8
8
  layout: string;
package/dist/components/Table/Table.js CHANGED
@@ -1,53 +1,53 @@
1
1
  import '../../assets/Table.css';
2
- import { jsxs as m, jsx as r } from "react/jsx-runtime";
3
- import * as c from "react";
2
+ import { jsxs as b, jsx as r } from "react/jsx-runtime";
3
+ import * as o from "react";
4
4
  import { useState as w } from "react";
5
5
  import { c as i } from "../../clsx-DB4S2d7J.js";
6
- import { paginationDefaultTranslations as u, Pagination as T } from "../Pagination/Pagination.js";
7
- import { sortTooltipDefaultTranslations as b, SortTooltip as j } from "../SortTooltip/SortTooltip.js";
8
- import { TableProvider as f, useTable as N } from "./TableContext.js";
9
- const x = (a) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ c.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ c.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ c.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ c.createElement("defs", null, /* @__PURE__ */ c.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ c.createElement("rect", { width: 7, height: 10, fill: "white" })))), C = "_table_9cjay_43", L = "_th__wrapper_9cjay_115", E = "_tr_9cjay_131", k = "_td_9cjay_135", t = {
10
- "u-typography-h1": "_u-typography-h1_9cjay_1",
11
- "u-typography-h2": "_u-typography-h2_9cjay_8",
12
- "u-typography-h3": "_u-typography-h3_9cjay_15",
13
- "u-typography-h4": "_u-typography-h4_9cjay_22",
14
- "u-typography-h5": "_u-typography-h5_9cjay_29",
15
- "u-typography-h6": "_u-typography-h6_9cjay_36",
16
- "u-typography-base": "_u-typography-base_9cjay_43",
17
- table: C,
18
- "u-typography-base--xxl": "_u-typography-base--xxl_9cjay_49",
19
- "u-typography-base--xl": "_u-typography-base--xl_9cjay_53",
20
- "u-typography-base--lg": "_u-typography-base--lg_9cjay_57",
21
- "u-typography-base--sm": "_u-typography-base--sm_9cjay_61",
22
- "u-typography-base--bold": "_u-typography-base--bold_9cjay_65",
23
- "u-typography-base--strikethrough": "_u-typography-base--strikethrough_9cjay_68",
24
- "u-typography-base--underlined": "_u-typography-base--underlined_9cjay_71",
25
- "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_9cjay_74",
26
- "table--full-width": "_table--full-width_9cjay_82",
27
- "table--white-theme": "_table--white-theme_9cjay_85",
28
- "table--transparent-theme": "_table--transparent-theme_9cjay_88",
29
- "cell--left-alignment": "_cell--left-alignment_9cjay_91",
30
- "cell--center-alignment": "_cell--center-alignment_9cjay_95",
31
- "cell--right-alignment": "_cell--right-alignment_9cjay_99",
32
- th__wrapper: L,
33
- "th__wrapper--pressed": "_th__wrapper--pressed_9cjay_118",
34
- "th__wrapper--clickable": "_th__wrapper--clickable_9cjay_122",
35
- "th__sort-icon-container": "_th__sort-icon-container_9cjay_125",
36
- "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_9cjay_131",
37
- tr: E,
38
- td: k,
39
- "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_9cjay_140",
40
- "td__row-or-cell--clickable": "_td__row-or-cell--clickable_9cjay_141",
41
- "td__row-or-cell--disabled": "_td__row-or-cell--disabled_9cjay_145",
42
- "td-wrapper": "_td-wrapper_9cjay_149"
6
+ import { paginationDefaultTranslations as y, Pagination as k } from "../Pagination/Pagination.js";
7
+ import { sortTooltipDefaultTranslations as u, SortTooltip as T } from "../SortTooltip/SortTooltip.js";
8
+ import { TableProvider as q, useTable as f } from "./TableContext.js";
9
+ const N = (a) => /* @__PURE__ */ o.createElement("svg", { width: 7, height: 10, viewBox: "0 0 7 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...a }, /* @__PURE__ */ o.createElement("g", { clipPath: "url(#clip0_2291_2457)" }, /* @__PURE__ */ o.createElement("path", { d: "M6.41658 3.93794C6.26731 3.93794 6.11798 3.88301 6.00423 3.77314L3.49991 1.35923L0.995768 3.77271C0.767904 3.99243 0.398763 3.99243 0.170898 3.77271C-0.0569661 3.55298 -0.0569661 3.19702 0.170898 2.97729L3.08756 0.164795C3.31543 -0.0549316 3.68457 -0.0549316 3.91243 0.164795L6.8291 2.97729C7.05697 3.19702 7.05697 3.55298 6.8291 3.77271C6.71553 3.88345 6.56605 3.93794 6.41658 3.93794Z", fill: "#1897F3" }), /* @__PURE__ */ o.createElement("path", { opacity: 0.4, d: "M6.41663 5.38022C6.26737 5.38022 6.11804 5.43516 6.00429 5.54502L3.49997 7.95894L0.99528 5.5437C0.767415 5.32397 0.398275 5.32397 0.17041 5.5437C-0.0574544 5.76343 -0.0574544 6.11938 0.17041 6.33911L3.08708 9.15161C3.31494 9.37134 3.68408 9.37134 3.91195 9.15161L6.82861 6.33911C7.05648 6.11938 7.05648 5.76343 6.82861 5.5437C6.71559 5.43472 6.56611 5.38022 6.41663 5.38022Z", fill: "#1897F3" })), /* @__PURE__ */ o.createElement("defs", null, /* @__PURE__ */ o.createElement("clipPath", { id: "clip0_2291_2457" }, /* @__PURE__ */ o.createElement("rect", { width: 7, height: 10, fill: "white" })))), x = "_table_pknqm_43", C = "_th__wrapper_pknqm_116", L = "_tr_pknqm_132", E = "_td_pknqm_136", t = {
10
+ "u-typography-h1": "_u-typography-h1_pknqm_1",
11
+ "u-typography-h2": "_u-typography-h2_pknqm_8",
12
+ "u-typography-h3": "_u-typography-h3_pknqm_15",
13
+ "u-typography-h4": "_u-typography-h4_pknqm_22",
14
+ "u-typography-h5": "_u-typography-h5_pknqm_29",
15
+ "u-typography-h6": "_u-typography-h6_pknqm_36",
16
+ "u-typography-base": "_u-typography-base_pknqm_43",
17
+ table: x,
18
+ "u-typography-base--xxl": "_u-typography-base--xxl_pknqm_49",
19
+ "u-typography-base--xl": "_u-typography-base--xl_pknqm_53",
20
+ "u-typography-base--lg": "_u-typography-base--lg_pknqm_57",
21
+ "u-typography-base--sm": "_u-typography-base--sm_pknqm_61",
22
+ "u-typography-base--bold": "_u-typography-base--bold_pknqm_65",
23
+ "u-typography-base--strikethrough": "_u-typography-base--strikethrough_pknqm_68",
24
+ "u-typography-base--underlined": "_u-typography-base--underlined_pknqm_71",
25
+ "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_pknqm_74",
26
+ "table--full-width": "_table--full-width_pknqm_83",
27
+ "table--white-theme": "_table--white-theme_pknqm_86",
28
+ "table--transparent-theme": "_table--transparent-theme_pknqm_89",
29
+ "cell--left-alignment": "_cell--left-alignment_pknqm_92",
30
+ "cell--center-alignment": "_cell--center-alignment_pknqm_96",
31
+ "cell--right-alignment": "_cell--right-alignment_pknqm_100",
32
+ th__wrapper: C,
33
+ "th__wrapper--pressed": "_th__wrapper--pressed_pknqm_119",
34
+ "th__wrapper--clickable": "_th__wrapper--clickable_pknqm_123",
35
+ "th__sort-icon-container": "_th__sort-icon-container_pknqm_126",
36
+ "tr__row-or-cell--disabled": "_tr__row-or-cell--disabled_pknqm_132",
37
+ tr: L,
38
+ td: E,
39
+ "tr__row-or-cell--clickable": "_tr__row-or-cell--clickable_pknqm_141",
40
+ "td__row-or-cell--clickable": "_td__row-or-cell--clickable_pknqm_142",
41
+ "td__row-or-cell--disabled": "_td__row-or-cell--disabled_pknqm_146",
42
+ "td-wrapper": "_td-wrapper_pknqm_150"
43
43
  }, v = {
44
44
  pt: {
45
- ...u.pt,
46
- ...b.pt
45
+ ...y.pt,
46
+ ...u.pt
47
47
  },
48
48
  en: {
49
- ...u.en,
50
- ...b.en
49
+ ...y.en,
50
+ ...u.en
51
51
  },
52
52
  // example to add a new language translation
53
53
  es: {
@@ -59,78 +59,78 @@ const x = (a) => /* @__PURE__ */ c.createElement("svg", { width: 7, height: 10,
59
59
  of: "de",
60
60
  results: "resultados"
61
61
  }
62
- }, _ = ({
62
+ }, p = ({
63
63
  children: a,
64
64
  theme: e = "white",
65
65
  fullWidth: l = !0,
66
- className: p,
67
- paginationProps: s,
68
- language: o,
69
- translations: y,
66
+ className: s,
67
+ paginationProps: _,
68
+ language: n,
69
+ translations: h,
70
70
  ...d
71
71
  }) => {
72
- const h = i(
72
+ const c = i(
73
73
  t.table,
74
74
  l ? t["table--full-width"] : "",
75
75
  t[`table--${e}-theme`],
76
- p
77
- ), n = o && v[o] || y;
78
- return /* @__PURE__ */ m(f, { initialTranslations: n, children: [
79
- /* @__PURE__ */ r("table", { ...d, className: h, children: a }),
80
- s && /* @__PURE__ */ r(T, { ...s, t: n })
76
+ s
77
+ ), m = n && v[n] || h;
78
+ return /* @__PURE__ */ b(q, { initialTranslations: m, children: [
79
+ /* @__PURE__ */ r("table", { ...d, className: c, children: a }),
80
+ _ && /* @__PURE__ */ r(k, { ..._, t: m })
81
81
  ] });
82
- }, B = ({ children: a, ...e }) => /* @__PURE__ */ r("thead", { ...e, children: a }), H = ({ children: a, ...e }) => /* @__PURE__ */ r("tbody", { ...e, children: a }), P = ({ children: a, onClick: e, disabled: l, className: p, ...s }) => {
83
- const o = i(
82
+ }, B = ({ children: a, ...e }) => /* @__PURE__ */ r("thead", { ...e, children: a }), H = ({ children: a, ...e }) => /* @__PURE__ */ r("tbody", { ...e, children: a }), P = ({ children: a, onClick: e, disabled: l, className: s, ..._ }) => {
83
+ const n = i(
84
84
  t.tr,
85
85
  e && !l ? t["tr__row-or-cell--clickable"] : l ? t["tr__row-or-cell--disabled"] : "",
86
- p
86
+ s
87
87
  );
88
- return /* @__PURE__ */ r("tr", { ...s, className: o, onClick: () => !l && (e == null ? void 0 : e()), children: a });
89
- }, D = ({ children: a, onClick: e, disabled: l, className: p, align: s = "left", ...o }) => {
90
- const y = i(
88
+ return /* @__PURE__ */ r("tr", { ..._, className: n, onClick: () => !l && (e == null ? void 0 : e()), children: a });
89
+ }, D = ({ children: a, onClick: e, disabled: l, className: s, align: _ = "left", ...n }) => {
90
+ const h = i(
91
91
  t.td,
92
92
  e && !l ? t["td__row-or-cell--clickable"] : l ? t["td__row-or-cell--disabled"] : "",
93
- t[`cell--${s}-alignment`],
94
- p
93
+ t[`cell--${_}-alignment`],
94
+ s
95
95
  );
96
- return /* @__PURE__ */ r("td", { ...o, className: y, onClick: () => !l && (e == null ? void 0 : e()), children: /* @__PURE__ */ r("span", { className: t["td-wrapper"], children: a }) });
97
- }, M = ({ children: a, onSort: e, sortType: l, className: p, classNameTooltip: s, align: o = "left", ...y }) => {
98
- const { translations: d } = N(), [h, n] = w(!1), g = i(
96
+ return /* @__PURE__ */ r("td", { ...n, className: h, onClick: () => !l && (e == null ? void 0 : e()), children: /* @__PURE__ */ r("span", { className: t["td-wrapper"], children: a }) });
97
+ }, M = ({ children: a, onSort: e, sortType: l, className: s, classNameTooltip: _, align: n = "left", ...h }) => {
98
+ const { translations: d } = f(), [c, m] = w(!1), g = i(
99
99
  t.th__wrapper,
100
- h ? t["th__wrapper--pressed"] : "",
100
+ c ? t["th__wrapper--pressed"] : "",
101
101
  e ? t["th__wrapper--clickable"] : "",
102
- p
102
+ s
103
103
  );
104
- return /* @__PURE__ */ r("th", { ...y, className: t[`cell--${o}-alignment`], children: /* @__PURE__ */ r("span", { className: g, onClick: e && (() => n(!h)), children: e ? /* @__PURE__ */ m(
105
- j,
104
+ return /* @__PURE__ */ r("th", { ...h, className: t[`cell--${n}-alignment`], children: /* @__PURE__ */ r("span", { className: g, onClick: e && (() => m(!c)), children: e ? /* @__PURE__ */ b(
105
+ T,
106
106
  {
107
- onClose: () => n(!1),
107
+ onClose: () => m(!1),
108
108
  onSort: e,
109
- show: h,
109
+ show: c,
110
110
  sortType: l,
111
- className: s,
111
+ className: _,
112
112
  t: d,
113
113
  children: [
114
114
  /* @__PURE__ */ r("span", { children: a }),
115
- /* @__PURE__ */ r("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ r(x, {}) })
115
+ /* @__PURE__ */ r("span", { className: t["th__sort-icon-container"], children: /* @__PURE__ */ r(N, {}) })
116
116
  ]
117
117
  }
118
118
  ) : /* @__PURE__ */ r("span", { children: a }) }) });
119
119
  };
120
- _.THead = B;
121
- _.THead.displayName = "Table.THead";
122
- _.TBody = H;
123
- _.TBody.displayName = "Table.TBody";
124
- _.Tr = P;
125
- _.Tr.displayName = "Table.Tr";
126
- _.Td = D;
127
- _.Td.displayName = "Table.Td";
128
- _.Th = M;
129
- _.Th.displayName = "Table.Th";
120
+ p.THead = B;
121
+ p.THead.displayName = "Table.THead";
122
+ p.TBody = H;
123
+ p.TBody.displayName = "Table.TBody";
124
+ p.Tr = P;
125
+ p.Tr.displayName = "Table.Tr";
126
+ p.Td = D;
127
+ p.Td.displayName = "Table.Td";
128
+ p.Th = M;
129
+ p.Th.displayName = "Table.Th";
130
130
  export {
131
131
  H as TBody,
132
132
  B as THead,
133
- _ as Table,
133
+ p as Table,
134
134
  D as Td,
135
135
  M as Th,
136
136
  P as Tr
package/dist/components/Tooltip/Tooltip.d.ts CHANGED
@@ -14,7 +14,7 @@ export type TooltipProps = {
14
14
  onClose?: () => void;
15
15
  /** The color of the tooltip */
16
16
  theme?: 'white' | 'black';
17
- /** Dhe padding applied to the tooltip */
17
+ /** The padding applied to the tooltip */
18
18
  padding?: 'small' | 'normal';
19
19
  /** The Position where the tooltip will be display relative to the anchor element */
20
20
  position?: PopupPlacement;
@@ -28,6 +28,8 @@ export type TooltipProps = {
28
28
  'data-testid'?: string;
29
29
  /** Function thats return the HTML Element of target. Important to EllipsisTooltip knows if the node needs or not the ellipsis */
30
30
  onTargetCreated?: (e: HTMLElement) => void;
31
+ /** Disable uses portal (true by default) */
32
+ disablePortal?: boolean;
31
33
  };
32
34
  declare const Tooltip: ({ arialRole, children: childrenProp, className, disableHoverListener, onClose, padding, position, open: openProp, theme, title, onTargetCreated, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
33
35
  export { Tooltip };
package/dist/components/Tooltip/Tooltip.js CHANGED
@@ -114,10 +114,10 @@ const B = "_tooltip_1dujm_1", m = {
114
114
  /* @__PURE__ */ a(
115
115
  V,
116
116
  {
117
+ disablePortal: !0,
117
118
  ...N,
118
119
  open: j,
119
120
  anchor: t == null ? void 0 : t.current,
120
- disablePortal: !0,
121
121
  style: w,
122
122
  role: e,
123
123
  placement: f,
package/dist/components/Tooltip/Tooltip.stories.d.ts CHANGED
@@ -22,6 +22,7 @@ declare const meta: {
22
22
  style?: import('react').CSSProperties | undefined;
23
23
  'data-testid'?: string | undefined;
24
24
  onTargetCreated?: ((e: HTMLElement) => void) | undefined;
25
+ disablePortal?: boolean | undefined;
25
26
  }>) => import("react/jsx-runtime").JSX.Element)[];
26
27
  };
27
28
  export default meta;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pismo/marola",
3
3
  "description": "CDX tribe component library",
4
- "version": "1.0.0-beta.13",
4
+ "version": "1.0.0-beta.14",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
@@ -96,4 +96,4 @@
96
96
  "@mui/base": "^5.0.0-beta.40",
97
97
  "@mui/material": "^5.15.15"
98
98
  }
99
- }
99
+ }