@pismo/marola 1.0.0-beta.2 → 1.0.0-beta.20

package/dist/components/Pagination/usePagination.js

@@ -0,0 +1,79 @@
+function w(l = {}) {
+  const {
+    boundaryCount: t = 1,
+    count: s = 1,
+    disabled: i = !1,
+    hideNextButton: d = !1,
+    hidePrevButton: g = !1,
+    page: n = l.page || 1,
+    showFirstButton: f = !1,
+    showLastButton: h = !1,
+    siblingCount: a = 1,
+    ...p
+  } = l, r = (e, y) => {
+    const P = y - e + 1;
+    return Array.from({ length: P }, (B, m) => e + m);
+  }, x = r(1, Math.min(t, s)), o = r(Math.max(s - t + 1, t + 1), s), u = Math.max(
+    Math.min(
+      // Natural start
+      n - a,
+      // Lower boundary when page is high
+      s - t - a * 2 - 1
+    ),
+    // Greater than startPages
+    t + 2
+  ), c = Math.min(
+    Math.max(
+      // Natural end
+      n + a,
+      // Upper boundary when page is low
+      t + a * 2 + 2
+    ),
+    // Less than endPages
+    o.length > 0 ? o[0] - 2 : s - 1
+  ), b = [
+    ...f ? ["first"] : [],
+    ...g ? [] : ["previous"],
+    ...x,
+    // Start ellipsis
+    ...u > t + 2 ? ["start-ellipsis"] : t + 1 < s - t ? [t + 1] : [],
+    // Sibling pages
+    ...r(u, c),
+    // End ellipsis
+    ...c < s - t - 1 ? ["end-ellipsis"] : s - t > t ? [s - t] : [],
+    ...o,
+    ...d ? [] : ["next"],
+    ...h ? ["last"] : []
+  ], M = (e) => {
+    switch (e) {
+      case "first":
+        return 1;
+      case "previous":
+        return n - 1;
+      case "next":
+        return n + 1;
+      case "last":
+        return s;
+      default:
+        return null;
+    }
+  };
+  return {
+    items: b.map((e) => typeof e == "number" ? {
+      type: "page",
+      page: e,
+      selected: e === n,
+      disabled: i,
+      "aria-current": e === n ? "true" : void 0
+    } : {
+      type: e,
+      page: M(e),
+      selected: !1,
+      disabled: i || e.indexOf("ellipsis") === -1 && (e === "next" || e === "last" ? n >= s : n <= 1)
+    }),
+    ...p
+  };
+}
+export {
+  w as default
+};

package/dist/components/ResultWithChips/ResultWithChips.d.ts

@@ -0,0 +1,12 @@
+import { ChipProps } from '../Chip/Chip';
+
+type ResultWithChipsProps = {
+    chips: Array<Partial<ChipProps> & {
+        joinLabel?: string | React.ReactNode;
+        key?: string;
+    }>;
+    title: string;
+    className?: string;
+};
+declare const ResultWithChips: ({ chips, title, className, ...rest }: ResultWithChipsProps) => import("react/jsx-runtime").JSX.Element;
+export { ResultWithChips };

package/dist/components/ResultWithChips/ResultWithChips.js

@@ -0,0 +1,33 @@
+import '../../assets/ResultWithChips.css';
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { C as t } from "../../Toggle-CRfZgFJp.js";
+const r = "_container_hgp0p_1", o = "_label_hgp0p_17", a = {
+  container: r,
+  "chip-item-wrapper": "_chip-item-wrapper_hgp0p_8",
+  label: o,
+  "chips-container": "_chips-container_hgp0p_35",
+  "chip-content": "_chip-content_hgp0p_42",
+  "chip-label": "_chip-label_hgp0p_51"
+}, b = ({ chips: c, title: p, className: s, ...h }) => /* @__PURE__ */ i("div", { ...h, className: [a.container, s || ""].join(" ").trim(), children: [
+  /* @__PURE__ */ e("span", { className: a.label, children: p }),
+  /* @__PURE__ */ e("div", { className: a["chips-container"], "data-testid": "chips-container", children: c.map((l, n) => /* @__PURE__ */ i("span", { className: a["chip-item-wrapper"], children: [
+    /* @__PURE__ */ e(
+      t,
+      {
+        ...l,
+        label: /* @__PURE__ */ e("span", { className: a["chip-content"], children: typeof l.label == "string" ? /* @__PURE__ */ e("strong", { className: a["chip-label"], children: l.label }) : l.label })
+      },
+      `chip-${n}`
+    ),
+    l.joinLabel && n < c.length - 1 && /* @__PURE__ */ e(
+      t,
+      {
+        label: /* @__PURE__ */ e("span", { className: a["chip-content"], children: /* @__PURE__ */ e("strong", { className: a["chip-label"], children: l.joinLabel }) })
+      },
+      `join-${n}`
+    )
+  ] }, `full-chip-${n}`)) })
+] });
+export {
+  b as ResultWithChips
+};

package/dist/components/RowItem/RowItem.d.ts

@@ -0,0 +1,25 @@
+import { RequireAllOrNone } from '../../types/helpers';
+import { AdornmentProps } from '../../main';
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
+
+export type RowItemBaseProps = {
+    /** Items to display as main content of the row */
+    children: ReactNode;
+    /** Buttons to render */
+    buttons?: ReactNode;
+    /** Left adornment */
+    leftAdornment?: AdornmentProps;
+    /** Whether the row is disabled (not interactable */
+    disabled?: boolean;
+    /** Space seperated list of CSS classes to apply */
+    className?: string;
+    /** Callback for when the row is clicked, required when ariaLabel is provided */
+    onClick?: (event?: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement> | undefined) => void;
+    /** An accessible name for the row, required when onClick is provided */
+    ariaLabel?: string;
+    /** ID to use in tests*/
+    'data-testid'?: string;
+};
+export type RowItemProps = RequireAllOrNone<RowItemBaseProps, 'onClick' | 'ariaLabel'>;
+export declare const RowItem: import('react').ForwardRefExoticComponent<RowItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export default RowItem;

package/dist/components/RowItem/RowItem.js

@@ -0,0 +1,19 @@
+import "react/jsx-runtime";
+import "react";
+import "../../clsx-DB4S2d7J.js";
+import "../Adornment/Adornment.js";
+import "../Icon/Icon.js";
+import "../Typography/Typography.js";
+import "../Button/Button.js";
+import { R as I, R as b } from "../../Toggle-CRfZgFJp.js";
+import "../Dialog/Dialog.js";
+import "../IconButton/IconButton.js";
+import "../Select/Select.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import "../../Group-B3p31ftp.js";
+import "../../contexts/SnackbarProvider/SnackbarProvider.js";
+export {
+  I as RowItem,
+  b as default
+};

package/dist/components/RowItem/RowItem.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<import('./RowItem').RowItemProps & import('react').RefAttributes<HTMLDivElement>>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Clickable: Story;
+export declare const WithAdornement: Story;
+export declare const WithButtons: Story;
+export declare const WithButtonsAndAdornementDisabled: Story;

package/dist/components/RowItem/rowItem.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Select/Select.js

@@ -1,14 +1,15 @@
 import { jsx as h, jsxs as Oe } from "react/jsx-runtime";
 import { c as _e } from "../../clsx-DB4S2d7J.js";
 import { Typography as Ke } from "../Typography/Typography.js";
-import { s as L, S as ze } from "../../SelectButton-C8JQKaf4.js";
-import { g as Ve, a as we, u as X, f as ne, b as g, P as l, _ as ke, c as le, d as Ie, e as Ne } from "../../index-CH45lKw7.js";
+import { s as L, S as ze } from "../../SelectButton-CoOT2txy.js";
+import { g as Ve, a as we, u as X, f as ne, b as g, P as l, _ as ke, c as le, d as Ie, e as Ne } from "../../useSlotProps-kRhf7Gil.js";
 import * as s from "react";
-import { u as Je, c as se, a as ye, L as Q } from "../../combineHooksSlotProps-DVjg9PRh.js";
-import { u as Me } from "../../useButton-DNk3wrQp.js";
-import { u as Te, a as We, b as Ge, C as Qe } from "../../useCompoundItem-D1iRfg8D.js";
-import { P as Xe } from "../../Popup-B6ZSGIEI.js";
-import { m as ve, h as Ye, l as Ze, u as et } from "../../useList-B0hog_3-.js";
+import { u as Je, c as se, a as ye, L as Q } from "../../combineHooksSlotProps-BtBYUV_B.js";
+import { u as Me } from "../../useButton-Bn3MNH8I.js";
+import { u as Te } from "../../useId-BW-oWmul.js";
+import { u as We, a as Ge, C as Qe } from "../../useCompoundItem-B7Eo_qZk.js";
+import { P as Xe } from "../../Popup-lLWZt2wk.js";
+import { m as ve, h as Ye, l as Ze, u as et } from "../../useList-BpJT77u3.js";
 import { u as tt } from "../../useEnhancedEffect-CJGo-L3B.js";
 const ot = {
   border: 0,
@@ -844,7 +845,7 @@ const ht = (n) => {
       slots: { root: ze },
       slotProps: {
         listbox: { className: L.select__listbox },
-        popup: { className: L.select__popup }
+        popup: { className: L.select__popup, strategy: "fixed" }
       },
       children: o
     }

package/dist/components/Select/SelectButton.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "../../clsx-DB4S2d7J.js";
 import "../Typography/Typography.js";
-import { S as e } from "../../SelectButton-C8JQKaf4.js";
+import { S as e } from "../../SelectButton-CoOT2txy.js";
 export {
   e as SelectButton
 };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -20,6 +20,8 @@ export type SkeletonTableProps = SkeletonProps & {
     rows?: number;
     /** Controls if the with of the cells should be automatically defined */
     autoWidth?: boolean;
+    /** Controls if show or not the skeleton of the table header */
+    showHeader?: boolean;
 };
-declare const SkeletonTable: ({ columns, rows, autoWidth, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+declare const SkeletonTable: ({ columns, rows, autoWidth, showHeader, ...props }: SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
 export { Skeleton, SkeletonCircle, SkeletonTable };

package/dist/components/Skeleton/Skeleton.js

@@ -1,23 +1,29 @@
 import '../../assets/Skeleton.css';
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import { jsx as t, jsxs as N } from "react/jsx-runtime";
 import { c as r } from "../../clsx-DB4S2d7J.js";
-const N = "_skeleton_dtmoz_1", b = "_skeletonLoading_dtmoz_1", o = {
-  skeleton: N,
+const u = "_skeleton_dtmoz_1", b = "_skeletonLoading_dtmoz_1", o = {
+  skeleton: u,
   skeletonLoading: b,
   "skeleton--circle-type": "_skeleton--circle-type_dtmoz_13",
   "skeleton--table-type": "_skeleton--table-type_dtmoz_17"
-}, i = (e) => /* @__PURE__ */ t("div", { ...e, className: r(o.skeleton, e.className) }), $ = ({ size: e = "4rem", ...l }) => {
+}, d = (e) => /* @__PURE__ */ t("div", { ...e, className: r(o.skeleton, e.className) }), C = ({ size: e = "4rem", ...l }) => {
   const s = r(o.skeleton, o["skeleton--circle-type"], l.className);
   return /* @__PURE__ */ t("div", { ...l, style: { width: e, height: e }, className: s });
-}, d = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, C = ({ columns: e = 5, rows: l = 5, autoWidth: s = !0, ...c }) => {
-  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}`));
-  return /* @__PURE__ */ w("table", { ...c, className: m, children: [
-    /* @__PURE__ */ t("thead", { children: h }),
-    /* @__PURE__ */ t("tbody", { children: k })
+}, m = (e = 30) => `${Math.floor(Math.random() * (100 - e + 1) + e)}%`, L = ({
+  columns: e = 5,
+  rows: l = 5,
+  autoWidth: s = !0,
+  showHeader: c = !0,
+  ...a
+}) => {
+  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}`));
+  return /* @__PURE__ */ N("table", { ...a, className: k, children: [
+    c && /* @__PURE__ */ t("thead", { children: h }),
+    /* @__PURE__ */ t("tbody", { children: y })
   ] });
 };
 export {
-  i as Skeleton,
-  $ as SkeletonCircle,
-  C as SkeletonTable
+  d as Skeleton,
+  C as SkeletonCircle,
+  L as SkeletonTable
 };

package/dist/components/Skeleton/SkeletonTable.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ columns, rows, autoWidth, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ columns, rows, autoWidth, showHeader, ...props }: import('./Skeleton').SkeletonTableProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;