@pismo/marola 2.1.49 → 2.1.50

package/dist/assets/DropdownMenu.css

@@ -0,0 +1 @@
+._menu-icon-button_1sw09_1{position:relative;display:inline-block}._menu-options_1sw09_6{position:absolute;top:2.5rem;z-index:1001;display:flex;flex-direction:column;min-width:16.25rem;padding-top:1rem;background-color:var(--white-100);border:1px solid var(--border-secondary);border-radius:.375rem;box-shadow:0 .125rem .625rem #0000000d}._menu-options_1sw09_6 ._menu-section--title_1sw09_19{padding-left:1rem}._menu-options_1sw09_6 ._menu-section_1sw09_19:not(:last-of-type){padding-bottom:.5rem;margin-bottom:.5rem;border-bottom:1px solid var(--border-secondary)}._menu-options_1sw09_6 ul{padding:0;margin:0;margin-bottom:.5rem;list-style:none}._menu-options_1sw09_6 li{display:flex;column-gap:.5rem;align-items:center;padding:.375rem 1rem;margin:.5rem .25rem;cursor:pointer;border-radius:.25rem}._menu-options_1sw09_6 li:hover{background-color:#0000000a}

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { ButtonProps, TypographyProps } from '../../main';
+import { IconName } from '../Icon/types';
+export type MenuSections = {
+    sectionTitle?: ReactNode;
+    sectionTitleProps?: Omit<TypographyProps, 'children'>;
+    sectionItems: {
+        label: ReactNode;
+        labelProps?: Omit<TypographyProps, 'children'>;
+        onClick: () => void;
+        key: string;
+        icon?: IconName;
+        iconColor?: string;
+    }[];
+}[];
+type DropdownMenuProps = {
+    buttonProps?: Omit<ButtonProps, 'link'>;
+    menuSections: MenuSections;
+    buttonLabel: ReactNode;
+    className?: string;
+    'data-testid'?: string;
+};
+export declare const DropdownMenu: ({ buttonProps, menuSections, buttonLabel, className, "data-testid": dataTestId, }: DropdownMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default DropdownMenu;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,69 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import { Icon as v } from "../Icon/Icon.js";
+import { Typography as t } from "../Typography/Typography.js";
+import "../Input/Input.js";
+import "../Avatar/Avatar.js";
+import { Button as C } from "../Button/Button.js";
+import "../../Toggle-DcZTfLrC.js";
+import "../Dialog/Dialog.js";
+import "../DatePicker/DatePicker.js";
+import "../../index-1UpBa69h.js";
+import "../Draggable/useDraggable.js";
+import "../IconButton/IconButton.js";
+import "../InputSearch/InputSearch.js";
+import "../Select/Select.js";
+import "../Popover/Popover.js";
+import "../Table/Table.js";
+import "../Tabs/Tabs.js";
+import "../../Group-DJz1rK2n.js";
+import "../../contexts/SnackbarProvider/SnackbarProvider.js";
+import "../../utils/iconsList.js";
+import '../../assets/DropdownMenu.css';const c = {
+  "menu-options": "_menu-options_1sw09_6",
+  "menu-section--title": "_menu-section--title_1sw09_19",
+  "menu-section": "_menu-section_1sw09_19"
+}, K = ({
+  buttonProps: n,
+  menuSections: m,
+  buttonLabel: a,
+  className: p,
+  "data-testid": d
+}) => {
+  const [l, s] = u(!1), h = _(c["menu-options"], p);
+  return /* @__PURE__ */ r("div", { children: [
+    /* @__PURE__ */ e("div", { className: c["menu-button"], children: /* @__PURE__ */ e(
+      C,
+      {
+        "data-testid": d,
+        ...n,
+        onClick: () => {
+          var o;
+          (o = n == null ? void 0 : n.onClick) == null || o.call(n), s(!l);
+        },
+        children: a
+      }
+    ) }),
+    l && /* @__PURE__ */ e("div", { className: h, children: m.map((o, f) => /* @__PURE__ */ r("div", { className: c["menu-section"], children: [
+      !!o.sectionTitle && /* @__PURE__ */ e("div", { className: c["menu-section--title"], children: /* @__PURE__ */ e(t, { ...o.sectionTitleProps, children: o.sectionTitle }) }),
+      /* @__PURE__ */ e("ul", { children: o.sectionItems.map((i) => /* @__PURE__ */ r(
+        "li",
+        {
+          onClick: () => {
+            i == null || i.onClick(), s(!1);
+          },
+          children: [
+            i.icon && /* @__PURE__ */ e(v, { color: i.iconColor || "var(--accent)", icon: i.icon }),
+            /* @__PURE__ */ e(t, { ...i.labelProps, children: i.label })
+          ]
+        },
+        i.key
+      )) })
+    ] }, f)) })
+  ] });
+};
+export {
+  K as DropdownMenu,
+  K as default
+};

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

@@ -0,0 +1,24 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ buttonProps, menuSections, buttonLabel, className, "data-testid": dataTestId, }: {
+        buttonProps?: Omit<import('../Button/Button').ButtonProps, "link"> | undefined;
+        menuSections: import('./DropdownMenu').MenuSections;
+        buttonLabel: import('react').ReactNode;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+    }) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            story: {
+                height: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithOneSection: Story;
+export declare const WithTwoSections: Story;

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

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

package/dist/main.d.ts

@@ -22,6 +22,7 @@ export * from './components/Dialog/Dialog';
 export * from './components/DoubleAutocomplete/DoubleAutocomplete';
 export * from './components/DoubleInput/DoubleInput';
 export * from './components/Draggable/Draggable';
+export * from './components/DropdownMenu/DropdownMenu';
 export * from './components/EllipsisTooltip/EllipsisTooltip';
 export * from './components/Fieldset/Fieldset';
 export * from './components/Icon/Icon';

package/dist/main.js

@@ -2,7 +2,7 @@ import { Adornment as e } from "./components/Adornment/Adornment.js";
 import { Advice as p } from "./components/Advice/Advice.js";
 import { Alert as m } from "./components/Alert/Alert.js";
 import { Autocomplete as x } from "./components/Autocomplete/Autocomplete.js";
-import { Avatar as n } from "./components/Avatar/Avatar.js";
+import { Avatar as l } from "./components/Avatar/Avatar.js";
 import { Badge as s } from "./components/Badge/Badge.js";
 import { BankCard as g } from "./components/BankCard/BankCard.js";
 import { BankingCard as u } from "./components/BankingCard/BankingCard.js";
@@ -13,59 +13,60 @@ import { Checkbox as D } from "./components/Checkbox/Checkbox.js";
 import { C as h, R, T as A } from "./Toggle-DcZTfLrC.js";
 import { ConfirmationDialog as v } from "./components/ConfirmationDialog/ConfirmationDialog.js";
 import { DatePicker as O } from "./components/DatePicker/DatePicker.js";
-import { Description as G } from "./components/Description/Description.js";
+import { Description as E } from "./components/Description/Description.js";
 import { Dialog as N } from "./components/Dialog/Dialog.js";
 import { DoubleAutocomplete as K } from "./components/DoubleAutocomplete/DoubleAutocomplete.js";
 import { DoubleInput as F } from "./components/DoubleInput/DoubleInput.js";
 import { Draggable as W } from "./components/Draggable/Draggable.js";
-import { EllipsisTooltip as q } from "./components/EllipsisTooltip/EllipsisTooltip.js";
-import { Fieldset as J } from "./components/Fieldset/Fieldset.js";
-import { Icon as U } from "./components/Icon/Icon.js";
-import { IconButton as Y } from "./components/IconButton/IconButton.js";
-import { Input as _ } from "./components/Input/Input.js";
-import { InputSearch as oo } from "./components/InputSearch/InputSearch.js";
-import { LoadingSpinner as eo } from "./components/LoadingSpinner/LoadingSpinner.js";
-import { PageHeader as po } from "./components/PageHeader/PageHeader.js";
-import { Pagination as mo, paginationDefaultTranslations as fo } from "./components/Pagination/Pagination.js";
-import { Popover as lo } from "./components/Popover/Popover.js";
-import { RadioButton as io } from "./components/RadioButton/RadioButton.js";
-import { ResultContainer as To } from "./components/ResultContainer/ResultContainer.js";
-import { ResultWithChips as co } from "./components/ResultWithChips/ResultWithChips.js";
-import { Select as bo, SelectContext as So, SelectOption as Co, useSelectContext as Bo } from "./components/Select/Select.js";
-import { Skeleton as yo, SkeletonCircle as Do, SkeletonTable as ko } from "./components/Skeleton/Skeleton.js";
-import { Snackbar as Ro } from "./components/Snackbar/Snackbar.js";
-import { SortTooltip as Po, sortTooltipDefaultTranslations as vo } from "./components/SortTooltip/SortTooltip.js";
-import { Stepper as Oo } from "./components/Stepper/Stepper.js";
-import { StepperNavigator as Go } from "./components/StepperNavigator/StepperNavigator.js";
-import { TBody as No, THead as Ho, Table as Ko, Td as Lo, Th as Fo, Tr as Vo } from "./components/Table/Table.js";
-import { Tabs as jo } from "./components/Tabs/Tabs.js";
-import { Tag as zo } from "./components/Tag/Tag.js";
-import { TextDisplay as Qo } from "./components/TextDisplay/TextDisplay.js";
-import { ToastCard as Xo } from "./components/ToastCard/ToastCard.js";
-import { Toggle as Zo } from "./components/Toggle/Toggle.js";
-import { G as $o } from "./Group-DJz1rK2n.js";
-import { Tooltip as rr } from "./components/Tooltip/Tooltip.js";
-import { TransactionRow as tr } from "./components/TransactionRow/TransactionRow.js";
-import { Text as ar, Typography as mr } from "./components/Typography/Typography.js";
-import { DraggableProvider as xr } from "./contexts/DraggableProvider/DraggableProvider.js";
-import { SnackbarContext as nr, SnackbarProvider as ir, useSnackbar as sr } from "./contexts/SnackbarProvider/SnackbarProvider.js";
-import { replaceItemsByIndex as gr, replaceItemsByKey as cr, sortItemsByIndex as ur, sortItemsByKey as dr } from "./utils/draggable.js";
-import { iconsList as Sr } from "./utils/iconsList.js";
-import { allowOnlyIntegerNumbers as Br, allowOnlyMathSignals as Ir, allowOnlyNumbers as yr, formatDecimalValue as Dr, parseToInteger as kr } from "./utils/inputNumberAsText.js";
-import { bemify as Rr, getBEMBase as Ar, getBEMBlock as Pr } from "./utils/styleStrings.js";
-import { default as wr } from "./components/Dialog/DialogTitle.js";
-import { default as Er } from "./components/Dialog/Content.js";
-import { default as Mr } from "./components/Dialog/Actions.js";
-import { R as Hr } from "./RadioOption-DYovqiwF.js";
-import { Tab as Lr } from "./components/Tabs/Tab.js";
-import { TabPanel as Vr } from "./components/Tabs/TabPanel.js";
+import { DropdownMenu as q } from "./components/DropdownMenu/DropdownMenu.js";
+import { EllipsisTooltip as J } from "./components/EllipsisTooltip/EllipsisTooltip.js";
+import { Fieldset as U } from "./components/Fieldset/Fieldset.js";
+import { Icon as Y } from "./components/Icon/Icon.js";
+import { IconButton as _ } from "./components/IconButton/IconButton.js";
+import { Input as oo } from "./components/Input/Input.js";
+import { InputSearch as eo } from "./components/InputSearch/InputSearch.js";
+import { LoadingSpinner as po } from "./components/LoadingSpinner/LoadingSpinner.js";
+import { PageHeader as mo } from "./components/PageHeader/PageHeader.js";
+import { Pagination as xo, paginationDefaultTranslations as no } from "./components/Pagination/Pagination.js";
+import { Popover as io } from "./components/Popover/Popover.js";
+import { RadioButton as To } from "./components/RadioButton/RadioButton.js";
+import { ResultContainer as co } from "./components/ResultContainer/ResultContainer.js";
+import { ResultWithChips as bo } from "./components/ResultWithChips/ResultWithChips.js";
+import { Select as Co, SelectContext as Bo, SelectOption as Io, useSelectContext as yo } from "./components/Select/Select.js";
+import { Skeleton as ko, SkeletonCircle as ho, SkeletonTable as Ro } from "./components/Skeleton/Skeleton.js";
+import { Snackbar as Po } from "./components/Snackbar/Snackbar.js";
+import { SortTooltip as wo, sortTooltipDefaultTranslations as Oo } from "./components/SortTooltip/SortTooltip.js";
+import { Stepper as Eo } from "./components/Stepper/Stepper.js";
+import { StepperNavigator as No } from "./components/StepperNavigator/StepperNavigator.js";
+import { TBody as Ko, THead as Lo, Table as Fo, Td as Vo, Th as Wo, Tr as jo } from "./components/Table/Table.js";
+import { Tabs as zo } from "./components/Tabs/Tabs.js";
+import { Tag as Qo } from "./components/Tag/Tag.js";
+import { TextDisplay as Xo } from "./components/TextDisplay/TextDisplay.js";
+import { ToastCard as Zo } from "./components/ToastCard/ToastCard.js";
+import { Toggle as $o } from "./components/Toggle/Toggle.js";
+import { G as rr } from "./Group-DJz1rK2n.js";
+import { Tooltip as tr } from "./components/Tooltip/Tooltip.js";
+import { TransactionRow as ar } from "./components/TransactionRow/TransactionRow.js";
+import { Text as fr, Typography as xr } from "./components/Typography/Typography.js";
+import { DraggableProvider as lr } from "./contexts/DraggableProvider/DraggableProvider.js";
+import { SnackbarContext as sr, SnackbarProvider as Tr, useSnackbar as gr } from "./contexts/SnackbarProvider/SnackbarProvider.js";
+import { replaceItemsByIndex as ur, replaceItemsByKey as dr, sortItemsByIndex as br, sortItemsByKey as Sr } from "./utils/draggable.js";
+import { iconsList as Br } from "./utils/iconsList.js";
+import { allowOnlyIntegerNumbers as yr, allowOnlyMathSignals as Dr, allowOnlyNumbers as kr, formatDecimalValue as hr, parseToInteger as Rr } from "./utils/inputNumberAsText.js";
+import { bemify as Pr, getBEMBase as vr, getBEMBlock as wr } from "./utils/styleStrings.js";
+import { default as Mr } from "./components/Dialog/DialogTitle.js";
+import { default as Gr } from "./components/Dialog/Content.js";
+import { default as Hr } from "./components/Dialog/Actions.js";
+import { R as Lr } from "./RadioOption-DYovqiwF.js";
+import { Tab as Vr } from "./components/Tabs/Tab.js";
+import { TabPanel as jr } from "./components/Tabs/TabPanel.js";
 export {
-  Mr as Actions,
+  Hr as Actions,
   e as Adornment,
   p as Advice,
   m as Alert,
   x as Autocomplete,
-  n as Avatar,
+  l as Avatar,
   s as Badge,
   g as BankCard,
   u as BankingCard,
@@ -75,76 +76,77 @@ export {
   D as Checkbox,
   h as Chip,
   v as ConfirmationDialog,
-  Er as Content,
+  Gr as Content,
   O as DatePicker,
-  G as Description,
+  E as Description,
   N as Dialog,
-  wr as DialogTitle,
+  Mr as DialogTitle,
   K as DoubleAutocomplete,
   F as DoubleInput,
   W as Draggable,
-  xr as DraggableProvider,
-  q as EllipsisTooltip,
-  J as Fieldset,
-  U as Icon,
-  Y as IconButton,
-  _ as Input,
-  oo as InputSearch,
-  eo as LoadingSpinner,
-  po as PageHeader,
-  mo as Pagination,
-  lo as Popover,
-  io as RadioButton,
-  Hr as RadioOption,
-  To as ResultContainer,
-  co as ResultWithChips,
+  lr as DraggableProvider,
+  q as DropdownMenu,
+  J as EllipsisTooltip,
+  U as Fieldset,
+  Y as Icon,
+  _ as IconButton,
+  oo as Input,
+  eo as InputSearch,
+  po as LoadingSpinner,
+  mo as PageHeader,
+  xo as Pagination,
+  io as Popover,
+  To as RadioButton,
+  Lr as RadioOption,
+  co as ResultContainer,
+  bo as ResultWithChips,
   R as RowItem,
-  bo as Select,
-  So as SelectContext,
-  Co as SelectOption,
-  yo as Skeleton,
-  Do as SkeletonCircle,
-  ko as SkeletonTable,
-  Ro as Snackbar,
-  nr as SnackbarContext,
-  ir as SnackbarProvider,
-  Po as SortTooltip,
-  Oo as Stepper,
-  Go as StepperNavigator,
-  No as TBody,
-  Ho as THead,
-  Lr as Tab,
-  Vr as TabPanel,
-  Ko as Table,
-  jo as Tabs,
-  zo as Tag,
-  Lo as Td,
-  ar as Text,
-  Qo as TextDisplay,
-  Fo as Th,
-  Xo as ToastCard,
-  Zo as Toggle,
-  $o as ToggleGroup,
+  Co as Select,
+  Bo as SelectContext,
+  Io as SelectOption,
+  ko as Skeleton,
+  ho as SkeletonCircle,
+  Ro as SkeletonTable,
+  Po as Snackbar,
+  sr as SnackbarContext,
+  Tr as SnackbarProvider,
+  wo as SortTooltip,
+  Eo as Stepper,
+  No as StepperNavigator,
+  Ko as TBody,
+  Lo as THead,
+  Vr as Tab,
+  jr as TabPanel,
+  Fo as Table,
+  zo as Tabs,
+  Qo as Tag,
+  Vo as Td,
+  fr as Text,
+  Xo as TextDisplay,
+  Wo as Th,
+  Zo as ToastCard,
+  $o as Toggle,
+  rr as ToggleGroup,
   A as ToggleGroupItem,
-  rr as Tooltip,
-  Vo as Tr,
-  tr as TransactionRow,
-  mr as Typography,
-  Br as allowOnlyIntegerNumbers,
-  Ir as allowOnlyMathSignals,
-  yr as allowOnlyNumbers,
-  Rr as bemify,
-  Dr as formatDecimalValue,
-  Ar as getBEMBase,
-  Pr as getBEMBlock,
-  Sr as iconsList,
-  fo as paginationDefaultTranslations,
-  kr as parseToInteger,
-  gr as replaceItemsByIndex,
-  cr as replaceItemsByKey,
-  ur as sortItemsByIndex,
-  dr as sortItemsByKey,
-  vo as sortTooltipDefaultTranslations,
-  Bo as useSelectContext,
-  sr as useSnackbar
+  tr as Tooltip,
+  jo as Tr,
+  ar as TransactionRow,
+  xr as Typography,
+  yr as allowOnlyIntegerNumbers,
+  Dr as allowOnlyMathSignals,
+  kr as allowOnlyNumbers,
+  Pr as bemify,
+  hr as formatDecimalValue,
+  vr as getBEMBase,
+  wr as getBEMBlock,
+  Br as iconsList,
+  no as paginationDefaultTranslations,
+  Rr as parseToInteger,
+  ur as replaceItemsByIndex,
+  dr as replaceItemsByKey,
+  br as sortItemsByIndex,
+  Sr as sortItemsByKey,
+  Oo as sortTooltipDefaultTranslations,
+  yo as useSelectContext,
+  gr as useSnackbar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "2.1.49",
+  "version": "2.1.50",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",