@pismo/marola 1.0.0-beta.6 → 1.0.0-beta.62

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

@@ -2,27 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ label, infoMessage, errorMessage, leftIcon, rightIcon, id, disabled, type, maxLength, hideCharsCounter, onChange, classNameWrapper, classNameLabel, classNameInput, classNameInfoMessage, classNameErrorMessage, classNameCharsCounter, "data-testid-wrapper": testIdWrapper, "data-testid-label": testIdLabel, "data-testid-input": testIdInput, "data-testid-infoMessage": testIdInfoMessage, "data-testid-errorMessage": testIdErrorMessage, "data-testid-charsCounter": testIdCharsCounter, ...rest }: import('react').InputHTMLAttributes<HTMLInputElement> & {
-        label?: string | undefined;
-        infoMessage?: string | undefined;
-        errorMessage?: string | undefined;
-        leftIcon?: import('react').ReactNode;
-        rightIcon?: import('react').ReactNode;
-        type?: "search" | "text" | "password" | undefined;
-        hideCharsCounter?: boolean | undefined;
-        classNameWrapper?: string | undefined;
-        classNameLabel?: string | undefined;
-        classNameInput?: string | undefined;
-        classNameInfoMessage?: string | undefined;
-        classNameErrorMessage?: string | undefined;
-        classNameCharsCounter?: string | undefined;
-        'data-testid-wrapper'?: string | undefined;
-        'data-testid-label'?: string | undefined;
-        'data-testid-input'?: string | undefined;
-        'data-testid-infoMessage'?: string | undefined;
-        'data-testid-errorMessage'?: string | undefined;
-        'data-testid-charsCounter'?: string | undefined;
-    }) => import("react/jsx-runtime").JSX.Element;
+    component: import('react').ForwardRefExoticComponent<import('./Input').InputProps & import('react').RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;
@@ -41,3 +21,4 @@ export declare const WithRightIconAndClickEvent: Story;
 export declare const WithBothIcons: Story;
 export declare const WithInfoMessage: Story;
 export declare const WithErrorMessage: Story;
+export declare const Textarea: Story;

package/dist/components/InputSearch/InputSearch.d.ts

@@ -1,9 +1,39 @@
-import { Input } from '../Input/Input';
-import { ComponentProps } from 'react';
+import { ForwardedRef } from 'react';
 
-type InputSearchProps = {
+export declare const InputSearch: import('react').ForwardRefExoticComponent<(Omit<{
     /** How many milliseconds to wait before trigger the onChange event */
-    triggerDelay?: number;
-} & ComponentProps<typeof Input>;
-export declare const InputSearch: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: InputSearchProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+    triggerDelay?: number | undefined;
+    ref?: ForwardedRef<HTMLInputElement> | undefined;
+} & import('react').InputHTMLAttributes<HTMLInputElement> & {
+    label?: string | undefined;
+    infoMessage?: string | undefined;
+    error?: boolean | undefined;
+    errorMessage?: string | undefined;
+    multiline?: false | undefined;
+    leftIcon?: import('react').ReactNode;
+    rightIcon?: import('react').ReactNode;
+    type?: ("number" | "url" | "file" | "color" | "search" | (string & {}) | "button" | "time" | "image" | "text" | "reset" | "tel" | "email" | "date" | "hidden" | "range" | "datetime-local" | "month" | "password" | "week") | undefined;
+    decimalLength?: number | undefined;
+    hideCharsCounter?: boolean | undefined;
+    classNameWrapper?: string | undefined;
+    classNameLabel?: string | undefined;
+    classNameInput?: string | undefined;
+    classNameInfoMessage?: string | undefined;
+    classNameErrorMessage?: string | undefined;
+    classNameCharsCounter?: string | undefined;
+    'data-testid-wrapper'?: string | undefined;
+    'data-testid-label'?: string | undefined;
+    'data-testid-input'?: string | undefined;
+    'data-testid-infoMessage'?: string | undefined;
+    'data-testid-errorMessage'?: string | undefined;
+    'data-testid-charsCounter'?: string | undefined;
+} & import('react').RefAttributes<HTMLInputElement>, "ref"> | Omit<{
+    /** How many milliseconds to wait before trigger the onChange event */
+    triggerDelay?: number | undefined;
+    ref?: ForwardedRef<HTMLInputElement> | undefined;
+} & Omit<import('../Input/Input').SingleInputProps, "multiline"> & {
+    multiline: true;
+    minRows?: number | undefined;
+    maxRows?: number | undefined;
+    rows?: number | undefined;
+} & import('react').RefAttributes<HTMLInputElement>, "ref">) & import('react').RefAttributes<HTMLInputElement>>;

package/dist/components/InputSearch/InputSearch.js

@@ -1,34 +1,32 @@
 import '../../assets/InputSearch.css';
 import { jsx as e } from "react/jsx-runtime";
-import { c as m } from "../../clsx-DB4S2d7J.js";
-import { Icon as p } from "../Icon/Icon.js";
-import { Input as u } from "../Input/Input.js";
-const l = "_inputSearch_114e1_1", h = {
-  inputSearch: l
-};
-let n;
-const d = ({
-  classNameWrapper: r,
-  triggerDelay: o = 500,
-  value: c,
-  onChange: i = () => {
-  },
-  ...a
-}) => {
-  const s = (t) => {
-    n && clearTimeout(n), n = setTimeout(() => i(t), o);
-  };
-  return /* @__PURE__ */ e("div", { className: m(h.inputSearch, r), children: /* @__PURE__ */ e(
-    u,
-    {
-      type: "search",
-      ...a,
-      leftIcon: /* @__PURE__ */ e(p, { icon: "magnifying-glass" }),
-      defaultValue: c,
-      onChange: (t) => s(t)
-    }
-  ) });
+import { forwardRef as p } from "react";
+import { c as u } from "../../clsx-DB4S2d7J.js";
+import { Icon as f } from "../Icon/Icon.js";
+import { Input as l } from "../Input/Input.js";
+const h = "_inputSearch_114e1_1", g = {
+  inputSearch: h
 };
+let r;
+const _ = p(
+  ({ classNameWrapper: n, triggerDelay: o = 500, value: c, onChange: i = () => {
+  }, ...a }, s) => {
+    const m = (t) => {
+      r && clearTimeout(r), r = setTimeout(() => i(t), o);
+    };
+    return /* @__PURE__ */ e("div", { className: u(g.inputSearch, n), children: /* @__PURE__ */ e(
+      l,
+      {
+        type: "search",
+        ref: s,
+        ...a,
+        leftIcon: /* @__PURE__ */ e(f, { icon: "magnifying-glass" }),
+        defaultValue: c,
+        onChange: (t) => m(t)
+      }
+    ) });
+  }
+);
 export {
-  d as InputSearch
+  _ as InputSearch
 };

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

@@ -2,15 +2,19 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ classNameWrapper, triggerDelay, value, onChange, ...rest }: {
+    component: import('react').ForwardRefExoticComponent<(Omit<{
         triggerDelay?: number | undefined;
+        ref?: import('react').ForwardedRef<HTMLInputElement> | undefined;
     } & import('react').InputHTMLAttributes<HTMLInputElement> & {
         label?: string | undefined;
         infoMessage?: string | undefined;
+        error?: boolean | undefined;
         errorMessage?: string | undefined;
+        multiline?: false | undefined;
         leftIcon?: import('react').ReactNode;
         rightIcon?: import('react').ReactNode;
-        type?: "search" | "text" | "password" | undefined;
+        type?: ("number" | "url" | "file" | "color" | "search" | (string & {}) | "button" | "time" | "image" | "text" | "reset" | "tel" | "email" | "date" | "hidden" | "range" | "datetime-local" | "month" | "password" | "week") | undefined;
+        decimalLength?: number | undefined;
         hideCharsCounter?: boolean | undefined;
         classNameWrapper?: string | undefined;
         classNameLabel?: string | undefined;
@@ -24,7 +28,15 @@ declare const meta: {
         'data-testid-infoMessage'?: string | undefined;
         'data-testid-errorMessage'?: string | undefined;
         'data-testid-charsCounter'?: string | undefined;
-    }) => import("react/jsx-runtime").JSX.Element;
+    } & import('react').RefAttributes<HTMLInputElement>, "ref"> | Omit<{
+        triggerDelay?: number | undefined;
+        ref?: import('react').ForwardedRef<HTMLInputElement> | undefined;
+    } & Omit<import('../Input/Input').SingleInputProps, "multiline"> & {
+        multiline: true;
+        minRows?: number | undefined;
+        maxRows?: number | undefined;
+        rows?: number | undefined;
+    } & import('react').RefAttributes<HTMLInputElement>, "ref">) & import('react').RefAttributes<HTMLInputElement>>;
     tags: string[];
     parameters: {
         layout: string;

package/dist/components/PageHeader/PageHeader.d.ts

@@ -17,9 +17,11 @@ type LastBreadcrumbItem = Omit<BreadcrumbItem, 'onClick'> & {
 };
 type PageHeaderCommonProps = {
     /** Title text */
-    title: string;
+    title?: string;
     /** Subtitle text */
     subtitle?: string;
+    /** component to be rendered in the place of title and subtitle */
+    headerBubble?: ReactNode;
     /** Back link text
      * @deprecated Use breadcrumb prop instead.
      */
@@ -55,6 +57,8 @@ type PageHeaderCommonProps = {
     'data-testid-title'?: string;
     /** Id to be applied as `data-testid` on the subtitle element */
     'data-testid-subtitle'?: string;
+    /** Id to be applied as `data-testid` on the headerBubble element */
+    'data-testid-account-header'?: string;
     breadcrumb?: never;
 };
 type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick' | 'classNameBackLink' | 'data-testid-backLink' | 'breadcrumb'> & {
@@ -62,5 +66,5 @@ type PageHeaderWithBreadcrumb = Omit<PageHeaderCommonProps, 'backLinkText' | 'on
     breadcrumb?: [...BreadcrumbItem[], LastBreadcrumbItem];
 };
 export type PageHeaderProps = RequireAllOrNone<PageHeaderCommonProps, 'backLinkText' | 'onBackLinkClick'> | PageHeaderWithBreadcrumb;
-export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PageHeader: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-account-header": headerBubbleTestId, ...props }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/PageHeader/PageHeader.js

@@ -1,87 +1,94 @@
 import '../../assets/PageHeader.css';
-import { jsx as a, jsxs as h } from "react/jsx-runtime";
-import { useMemo as L } from "react";
-import { c as n } from "../../clsx-DB4S2d7J.js";
-import { Icon as B } from "../Icon/Icon.js";
-import { IconButton as C } from "../IconButton/IconButton.js";
-const j = "_title_z7ezb_22", w = "_subtitle_z7ezb_43", e = {
-  "u-typography-h1": "_u-typography-h1_z7ezb_1",
-  "u-typography-h2": "_u-typography-h2_z7ezb_8",
-  "u-typography-h3": "_u-typography-h3_z7ezb_15",
-  "u-typography-h4": "_u-typography-h4_z7ezb_22",
-  "page-header__main-left-content": "_page-header__main-left-content_z7ezb_22",
-  title: j,
-  "u-typography-h5": "_u-typography-h5_z7ezb_29",
-  "u-typography-h6": "_u-typography-h6_z7ezb_36",
-  "u-typography-base": "_u-typography-base_z7ezb_43",
-  subtitle: w,
-  "u-typography-base--xxl": "_u-typography-base--xxl_z7ezb_48",
-  "u-typography-base--xl": "_u-typography-base--xl_z7ezb_52",
-  "u-typography-base--lg": "_u-typography-base--lg_z7ezb_56",
-  "u-typography-base--sm": "_u-typography-base--sm_z7ezb_60",
-  "u-typography-base--bold": "_u-typography-base--bold_z7ezb_64",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_z7ezb_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_z7ezb_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_z7ezb_73",
-  "page-header": "_page-header_z7ezb_22",
-  "page-header__top-content": "_page-header__top-content_z7ezb_86",
-  "page-header__main-content": "_page-header__main-content_z7ezb_89",
-  "page-header__bottom-content": "_page-header__bottom-content_z7ezb_89",
-  "page-header__breadcrumb": "_page-header__breadcrumb_z7ezb_103",
-  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_z7ezb_108",
-  "page-header__main-right-content": "_page-header__main-right-content_z7ezb_131"
-}, P = ({
-  title: l,
+import { jsx as a, Fragment as i, jsxs as l } from "react/jsx-runtime";
+import { useMemo as H } from "react";
+import { c as d } from "../../clsx-DB4S2d7J.js";
+import { Icon as I } from "../Icon/Icon.js";
+import { IconButton as T } from "../IconButton/IconButton.js";
+const $ = "_title_13xad_22", q = "_subtitle_13xad_43", e = {
+  "u-typography-h1": "_u-typography-h1_13xad_1",
+  "u-typography-h2": "_u-typography-h2_13xad_8",
+  "u-typography-h3": "_u-typography-h3_13xad_15",
+  "u-typography-h4": "_u-typography-h4_13xad_22",
+  "page-header__main-left-content": "_page-header__main-left-content_13xad_22",
+  title: $,
+  "u-typography-h5": "_u-typography-h5_13xad_29",
+  "u-typography-h6": "_u-typography-h6_13xad_36",
+  "u-typography-base": "_u-typography-base_13xad_43",
+  subtitle: q,
+  "u-typography-base--xxl": "_u-typography-base--xxl_13xad_49",
+  "u-typography-base--xl": "_u-typography-base--xl_13xad_53",
+  "u-typography-base--lg": "_u-typography-base--lg_13xad_57",
+  "u-typography-base--sm": "_u-typography-base--sm_13xad_61",
+  "u-typography-base--bold": "_u-typography-base--bold_13xad_65",
+  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_13xad_68",
+  "u-typography-base--underlined": "_u-typography-base--underlined_13xad_71",
+  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_13xad_74",
+  "page-header": "_page-header_13xad_22",
+  "page-header__top-content": "_page-header__top-content_13xad_87",
+  "page-header__main-content": "_page-header__main-content_13xad_90",
+  "page-header__bottom-content": "_page-header__bottom-content_13xad_90",
+  "page-header__breadcrumb": "_page-header__breadcrumb_13xad_104",
+  "page-header__breadcrumb__separator": "_page-header__breadcrumb__separator_13xad_109",
+  "account-header": "_account-header_13xad_133",
+  "account-header--container": "_account-header--container_13xad_136",
+  "page-header__main-right-content": "_page-header__main-right-content_13xad_144",
+  "account-header-margin": "_account-header-margin_13xad_153"
+}, D = ({
+  title: n,
   subtitle: g,
-  rightChildren: d,
-  bottomChildren: b,
+  rightChildren: u,
+  bottomChildren: o,
   classNameWrapper: y,
-  classNameTitle: u,
-  classNameSubtitle: z,
-  "data-testid-wrapper": m,
-  "data-testid-title": k,
-  "data-testid-subtitle": N,
-  ...f
+  classNameTitle: x,
+  classNameSubtitle: k,
+  headerBubble: r,
+  "data-testid-wrapper": N,
+  "data-testid-title": f,
+  "data-testid-subtitle": v,
+  "data-testid-account-header": C,
+  ...L
 }) => {
   const {
-    breadcrumb: r,
+    breadcrumb: h,
     backLinkText: p,
     onBackLinkClick: s,
-    classNameBackLink: c,
-    "data-testid-backLink": i,
-    ...x
-  } = f, v = L(() => {
+    classNameBackLink: m,
+    "data-testid-backLink": b,
+    ...w
+  } = L;
+  r && (n || g || o) && console.error("headerBubble prop can not be used with title, subtitle or bottomChildren"), !r && !n && console.error("title prop is required when not using headerBubble");
+  const j = r ? d([e["page-header"], y, e["account-header-margin"]]) : d([e["page-header"], y]), B = H(() => {
     const _ = [];
     return p && s && _.push({
       label: p,
-      className: c,
-      "data-testid": i,
+      className: m,
+      "data-testid": b,
       onClick: s
-    }), r && _.push(...r), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: _.map((t, o) => /* @__PURE__ */ a(
-      C,
+    }), h && _.push(...h), /* @__PURE__ */ a("div", { className: e["page-header__top-content"], children: /* @__PURE__ */ a("div", { className: e["page-header__breadcrumb"], children: _.map((t, c) => /* @__PURE__ */ a(
+      T,
       {
-        icon: o === 0 ? /* @__PURE__ */ a(B, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
+        icon: c === 0 ? /* @__PURE__ */ a(I, { icon: "arrow-left" }) : /* @__PURE__ */ a("span", { className: e["page-header__breadcrumb__separator"], children: "/" }),
         onClick: () => t.onClick && t.onClick(),
         className: t.className,
         "data-testid": t["data-testid"],
-        disabled: _.length === 1 ? !1 : o === _.length - 1,
+        disabled: _.length === 1 ? !1 : c === _.length - 1,
         children: t.label
       },
-      `${t.label}_${o}`
+      `${t.label}_${c}`
     )) }) });
-  }, [r, p, c, i, s]);
-  return /* @__PURE__ */ h("div", { className: n([e["page-header"], y]), "data-testid": m, ...x, children: [
-    v,
-    /* @__PURE__ */ h("div", { className: e["page-header__main-content"], children: [
-      /* @__PURE__ */ h("div", { className: e["page-header__main-left-content"], children: [
-        /* @__PURE__ */ a("h1", { className: n(e.title, u), "data-testid": k, children: l }),
-        /* @__PURE__ */ a("h2", { className: n(e.subtitle, z), "data-testid": N, children: g })
-      ] }),
-      d && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: d })
+  }, [h, p, m, b, s]);
+  return /* @__PURE__ */ a(i, { children: /* @__PURE__ */ l("div", { className: j, "data-testid": N, ...w, children: [
+    B,
+    /* @__PURE__ */ l("div", { className: e["page-header__main-content"], children: [
+      /* @__PURE__ */ a("div", { className: e["page-header__main-left-content"], children: r ? /* @__PURE__ */ a(i, { children: /* @__PURE__ */ a("div", { className: e["account-header"], children: /* @__PURE__ */ a("div", { className: e["account-header--container"], "data-testid": C, children: r }) }) }) : /* @__PURE__ */ l(i, { children: [
+        /* @__PURE__ */ a("h1", { className: d(e.title, x), "data-testid": f, children: n }),
+        /* @__PURE__ */ a("h2", { className: d(e.subtitle, k), "data-testid": v, children: g })
+      ] }) }),
+      u && /* @__PURE__ */ a("div", { className: e["page-header__main-right-content"], children: u })
     ] }),
-    b && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: b })
-  ] });
+    o && /* @__PURE__ */ a("div", { className: e["page-header__bottom-content"], children: o })
+  ] }) });
 };
 export {
-  P as PageHeader
+  D as PageHeader
 };

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

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 
 declare const meta: {
     title: string;
-    component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, ...props }: import('./PageHeader').PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ title, subtitle, rightChildren, bottomChildren, classNameWrapper, classNameTitle, classNameSubtitle, headerBubble, "data-testid-wrapper": wrapperTestId, "data-testid-title": titleTestId, "data-testid-subtitle": subtitleTestId, "data-testid-account-header": headerBubbleTestId, ...props }: import('./PageHeader').PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
 };
 export default meta;
@@ -12,3 +12,5 @@ export declare const WithBackLink: Story;
 export declare const WithBreadcrumb: Story;
 export declare const WithRightChildren: Story;
 export declare const WithBottomChildren: Story;
+export declare const WithHeaderBubble: Story;
+export declare const WithLargeHeaderBubble: Story;

package/dist/components/PageHeader/PageHeader.test.d.ts

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

package/dist/components/Pagination/Pagination.d.ts

@@ -1,3 +1,5 @@
+import { UsePaginationProps } from './usePagination';
+
 export type PaginationParams = {
     /** Total number of items to paginate */
     totalItems: number;
@@ -53,9 +55,11 @@ export type PaginationProps = {
     language?: PaginationLanguages;
     /** Custom translation object to be used for texts. */
     t?: Partial<PaginationTranslations>;
+    /** usePagination hook props */
+    usePaginationProps?: UsePaginationProps;
 } & PaginationParams & PaginationCommonProps;
 export declare const paginationDefaultTranslations: {
     [key in PaginationLanguages]: PaginationTranslations;
 };
-export declare const Pagination: ({ perPageOptions, language, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ perPageOptions, language, usePaginationProps, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export {};