@fuf-stack/pixels 1.1.2 → 1.2.1
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.
- package/dist/Button/index.cjs +2 -2
- package/dist/Button/index.d.cts +2 -2
- package/dist/Button/index.d.ts +2 -2
- package/dist/Button/index.js +1 -1
- package/dist/{Button-rsBnawn1.d.cts → Button-CkMcZvji.d.cts} +12 -5
- package/dist/{Button-rsBnawn1.d.ts → Button-CkMcZvji.d.ts} +12 -5
- package/dist/Json/index.cjs +3 -3
- package/dist/Json/index.js +2 -2
- package/dist/Menu/index.cjs +2 -2
- package/dist/Menu/index.d.cts +5 -2
- package/dist/Menu/index.d.ts +5 -2
- package/dist/Menu/index.js +1 -1
- package/dist/Menu-DbeqxeL0.d.cts +98 -0
- package/dist/Menu-DbeqxeL0.d.ts +98 -0
- package/dist/Popover/index.cjs +2 -2
- package/dist/Popover/index.d.cts +3 -4
- package/dist/Popover/index.d.ts +3 -4
- package/dist/Popover/index.js +1 -1
- package/dist/{Popover-D6Qv56ms.d.ts → Popover-BsdcKPgm.d.cts} +2 -2
- package/dist/{Popover-BUKzm3MQ.d.cts → Popover-BsdcKPgm.d.ts} +2 -2
- package/dist/{chunk-WZZMB5CI.cjs → chunk-3Y7P46WT.cjs} +1 -1
- package/dist/chunk-3Y7P46WT.cjs.map +1 -0
- package/dist/{chunk-7QUYJEGU.js → chunk-HFW4JP5W.js} +1 -1
- package/dist/chunk-HFW4JP5W.js.map +1 -0
- package/dist/{chunk-4LMQVFV7.js → chunk-HOWDEBJG.js} +8 -4
- package/dist/chunk-HOWDEBJG.js.map +1 -0
- package/dist/{chunk-2OJHNNCU.cjs → chunk-IPALTJVF.cjs} +3 -3
- package/dist/{chunk-2OJHNNCU.cjs.map → chunk-IPALTJVF.cjs.map} +1 -1
- package/dist/{chunk-BTQB4EZC.js → chunk-N4U7OJOM.js} +2 -2
- package/dist/{chunk-PZL3LRGY.cjs → chunk-NNWXSPVB.cjs} +7 -3
- package/dist/chunk-NNWXSPVB.cjs.map +1 -0
- package/dist/chunk-WFPRB4JT.js +115 -0
- package/dist/chunk-WFPRB4JT.js.map +1 -0
- package/dist/chunk-WFR7OUY7.cjs +115 -0
- package/dist/chunk-WFR7OUY7.cjs.map +1 -0
- package/dist/index.cjs +5 -5
- package/dist/index.d.cts +3 -3
- package/dist/index.d.ts +3 -3
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/dist/Menu-DYi8oagz.d.cts +0 -56
- package/dist/Menu-DYi8oagz.d.ts +0 -56
- package/dist/chunk-4LMQVFV7.js.map +0 -1
- package/dist/chunk-7QUYJEGU.js.map +0 -1
- package/dist/chunk-OP5W7BXY.js +0 -81
- package/dist/chunk-OP5W7BXY.js.map +0 -1
- package/dist/chunk-PZL3LRGY.cjs.map +0 -1
- package/dist/chunk-WZZMB5CI.cjs.map +0 -1
- package/dist/chunk-XHOAZB2Z.cjs +0 -81
- package/dist/chunk-XHOAZB2Z.cjs.map +0 -1
- /package/dist/{chunk-BTQB4EZC.js.map → chunk-N4U7OJOM.js.map} +0 -0
package/dist/chunk-OP5W7BXY.js
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
// src/Menu/Menu.tsx
|
|
2
|
-
import { FaEllipsisVertical } from "react-icons/fa6";
|
|
3
|
-
import { Button } from "@heroui/button";
|
|
4
|
-
import {
|
|
5
|
-
Dropdown as HeroDropdown,
|
|
6
|
-
DropdownItem as HeroDropdownItem,
|
|
7
|
-
DropdownMenu as HeroDropdownMenu,
|
|
8
|
-
DropdownSection as HeroDropdownSection,
|
|
9
|
-
DropdownTrigger as HeroDropdownTrigger
|
|
10
|
-
} from "@heroui/dropdown";
|
|
11
|
-
import { cn } from "@fuf-stack/pixel-utils";
|
|
12
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
|
-
var getDisabledKeys = (items) => {
|
|
14
|
-
return items.map((item) => typeof (item == null ? void 0 : item.items) === "undefined" ? item : item.items).flat().filter((item) => {
|
|
15
|
-
return Object.hasOwn(item, "disabled") && item.disabled === true;
|
|
16
|
-
}).map((item) => item.key);
|
|
17
|
-
};
|
|
18
|
-
var renderMenuItem = (item) => /* @__PURE__ */ jsx(
|
|
19
|
-
HeroDropdownItem,
|
|
20
|
-
{
|
|
21
|
-
className: item.className,
|
|
22
|
-
"data-testid": item.testId || item.key,
|
|
23
|
-
description: item.description,
|
|
24
|
-
onPress: item.onClick,
|
|
25
|
-
startContent: item.icon,
|
|
26
|
-
children: item.label
|
|
27
|
-
},
|
|
28
|
-
item.key
|
|
29
|
-
);
|
|
30
|
-
var Menu = ({
|
|
31
|
-
children = null,
|
|
32
|
-
className = void 0,
|
|
33
|
-
onAction = void 0,
|
|
34
|
-
testId = void 0,
|
|
35
|
-
isDisabled = false,
|
|
36
|
-
items
|
|
37
|
-
}) => {
|
|
38
|
-
return /* @__PURE__ */ jsxs(HeroDropdown, { isDisabled, children: [
|
|
39
|
-
/* @__PURE__ */ jsx(HeroDropdownTrigger, { className: cn(className), "data-testid": testId, children: children ? (
|
|
40
|
-
// eslint-disable-next-line react/button-has-type
|
|
41
|
-
/* @__PURE__ */ jsx("button", { children })
|
|
42
|
-
) : (
|
|
43
|
-
// INFO: we use hero button here so that ref passing works
|
|
44
|
-
/* @__PURE__ */ jsx(Button, { size: "sm", variant: "flat", className: "min-w-0", children: /* @__PURE__ */ jsx(FaEllipsisVertical, {}) })
|
|
45
|
-
) }),
|
|
46
|
-
/* @__PURE__ */ jsx(
|
|
47
|
-
HeroDropdownMenu,
|
|
48
|
-
{
|
|
49
|
-
items,
|
|
50
|
-
disabledKeys: getDisabledKeys(items),
|
|
51
|
-
onAction,
|
|
52
|
-
children: (item) => {
|
|
53
|
-
if ("items" in item) {
|
|
54
|
-
return /* @__PURE__ */ jsx(
|
|
55
|
-
HeroDropdownSection,
|
|
56
|
-
{
|
|
57
|
-
items: item.items,
|
|
58
|
-
title: item.label,
|
|
59
|
-
children: (sectionItem) => {
|
|
60
|
-
return renderMenuItem(sectionItem);
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
item.key
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
return renderMenuItem(item);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
)
|
|
70
|
-
] });
|
|
71
|
-
};
|
|
72
|
-
var Menu_default = Menu;
|
|
73
|
-
|
|
74
|
-
// src/Menu/index.ts
|
|
75
|
-
var Menu_default2 = Menu_default;
|
|
76
|
-
|
|
77
|
-
export {
|
|
78
|
-
Menu_default,
|
|
79
|
-
Menu_default2
|
|
80
|
-
};
|
|
81
|
-
//# sourceMappingURL=chunk-OP5W7BXY.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Menu/Menu.tsx","../src/Menu/index.ts"],"sourcesContent":["import type {\n DropdownSectionProps,\n DropdownItemProps as HeroDropdownItemProps,\n} from '@heroui/dropdown';\nimport type { Key, ReactNode } from 'react';\n\nimport { FaEllipsisVertical } from 'react-icons/fa6';\n\nimport { Button } from '@heroui/button';\nimport {\n Dropdown as HeroDropdown,\n DropdownItem as HeroDropdownItem,\n DropdownMenu as HeroDropdownMenu,\n DropdownSection as HeroDropdownSection,\n DropdownTrigger as HeroDropdownTrigger,\n} from '@heroui/dropdown';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\n/**\n * Menu item type\n */\nexport interface MenuItem {\n /** unique identifier */\n key: string;\n /** CSS class name */\n className?: string;\n /** additional description shown under the label */\n description?: string;\n /** disables the menu item */\n disabled?: boolean;\n /** menu item icon */\n icon?: ReactNode;\n /** menu item name */\n label: ReactNode;\n /** click event handler */\n onClick?: HeroDropdownItemProps['onPress'];\n /** e2e test identifier */\n testId?: string;\n}\n\n/**\n * Menu section type\n */\nexport interface MenuSection {\n /** unique identifier */\n key: string;\n /** section label */\n label: ReactNode;\n /** section items (array of MenuItem) */\n items: MenuItem[];\n}\n\nexport interface MenuProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string | string[];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** menu item structure */\n items: (MenuSection | MenuItem)[];\n /** disable menu trigger */\n isDisabled?: boolean;\n /** called if item is selected */\n onAction?: (key: Key) => void;\n}\n\n/** returns String[] of disabled items/keys */\nconst getDisabledKeys = (items: (MenuSection | MenuItem)[]) => {\n return (\n items\n // @ts-expect-error typing issue with MenuSection | MenuItem\n .map((item) => (typeof item?.items === 'undefined' ? item : item.items))\n .flat<MenuItem[]>()\n .filter((item) => {\n return Object.hasOwn(item, 'disabled') && item.disabled === true;\n })\n .map((item) => item.key)\n );\n};\n\nconst renderMenuItem = (item: MenuItem) => (\n <HeroDropdownItem\n className={item.className}\n data-testid={item.testId || item.key}\n description={item.description}\n key={item.key}\n onPress={item.onClick}\n startContent={item.icon}\n >\n {item.label}\n </HeroDropdownItem>\n);\n\n/**\n * Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)\n */\nconst Menu = ({\n children = null,\n className = undefined,\n onAction = undefined,\n testId = undefined,\n isDisabled = false,\n items,\n}: MenuProps) => {\n return (\n <HeroDropdown isDisabled={isDisabled}>\n <HeroDropdownTrigger className={cn(className)} data-testid={testId}>\n {children ? (\n // eslint-disable-next-line react/button-has-type\n <button>{children}</button>\n ) : (\n // INFO: we use hero button here so that ref passing works\n <Button size=\"sm\" variant=\"flat\" className=\"min-w-0\">\n <FaEllipsisVertical />\n </Button>\n )}\n </HeroDropdownTrigger>\n <HeroDropdownMenu\n // aria-label=\"Dynamic Actions\"\n items={items}\n disabledKeys={getDisabledKeys(items)}\n onAction={onAction}\n >\n {(item) => {\n if ('items' in item) {\n return (\n <HeroDropdownSection\n items={item.items as MenuSection['items']}\n title={item.label as DropdownSectionProps['title']}\n key={item.key}\n >\n {(sectionItem) => {\n return renderMenuItem(sectionItem);\n }}\n </HeroDropdownSection>\n );\n }\n return renderMenuItem(item);\n }}\n </HeroDropdownMenu>\n </HeroDropdown>\n );\n};\n\nexport default Menu;\n","import Menu from './Menu';\n\nexport type { MenuProps, MenuItem, MenuSection } from './Menu';\n\nexport { Menu };\n\nexport default Menu;\n"],"mappings":";AAMA,SAAS,0BAA0B;AAEnC,SAAS,cAAc;AACvB;AAAA,EACE,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,mBAAmB;AAAA,OACd;AAEP,SAAS,UAAU;AAkEjB,cAwBE,YAxBF;AAdF,IAAM,kBAAkB,CAAC,UAAsC;AAC7D,SACE,MAEG,IAAI,CAAC,SAAU,QAAO,6BAAM,WAAU,cAAc,OAAO,KAAK,KAAM,EACtE,KAAiB,EACjB,OAAO,CAAC,SAAS;AAChB,WAAO,OAAO,OAAO,MAAM,UAAU,KAAK,KAAK,aAAa;AAAA,EAC9D,CAAC,EACA,IAAI,CAAC,SAAS,KAAK,GAAG;AAE7B;AAEA,IAAM,iBAAiB,CAAC,SACtB;AAAA,EAAC;AAAA;AAAA,IACC,WAAW,KAAK;AAAA,IAChB,eAAa,KAAK,UAAU,KAAK;AAAA,IACjC,aAAa,KAAK;AAAA,IAElB,SAAS,KAAK;AAAA,IACd,cAAc,KAAK;AAAA,IAElB,eAAK;AAAA;AAAA,EAJD,KAAK;AAKZ;AAMF,IAAM,OAAO,CAAC;AAAA,EACZ,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AAAA,EACb;AACF,MAAiB;AACf,SACE,qBAAC,gBAAa,YACZ;AAAA,wBAAC,uBAAoB,WAAW,GAAG,SAAS,GAAG,eAAa,QACzD;AAAA;AAAA,MAEC,oBAAC,YAAQ,UAAS;AAAA;AAAA;AAAA,MAGlB,oBAAC,UAAO,MAAK,MAAK,SAAQ,QAAO,WAAU,WACzC,8BAAC,sBAAmB,GACtB;AAAA,OAEJ;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,cAAc,gBAAgB,KAAK;AAAA,QACnC;AAAA,QAEC,WAAC,SAAS;AACT,cAAI,WAAW,MAAM;AACnB,mBACE;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,KAAK;AAAA,gBACZ,OAAO,KAAK;AAAA,gBAGX,WAAC,gBAAgB;AAChB,yBAAO,eAAe,WAAW;AAAA,gBACnC;AAAA;AAAA,cAJK,KAAK;AAAA,YAKZ;AAAA,UAEJ;AACA,iBAAO,eAAe,IAAI;AAAA,QAC5B;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAEA,IAAO,eAAQ;;;AC5If,IAAOA,gBAAQ;","names":["Menu_default"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-PZL3LRGY.cjs","../src/Button/Button.tsx","../src/Button/subcomponents/LoadingSpinner.tsx","../src/Button/index.ts"],"names":["jsxs","jsx","Button_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-PZL3LRGY.cjs","sourcesContent":[null,"import type { TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps as HeroButtonProps } from '@heroui/button';\nimport type { ReactNode } from 'react';\n\nimport { Button as HeroButton } from '@heroui/button';\nimport { button as heroButtonVariants } from '@heroui/theme';\n\nimport { tv } from '@fuf-stack/pixel-utils';\n\nimport LoadingSpinner from './subcomponents/LoadingSpinner';\n\nexport const buttonVariants = tv({\n base: '',\n variants: {\n color: {\n // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/button.ts\n info: '',\n ...heroButtonVariants.variants.color,\n },\n variant: heroButtonVariants.variants.variant,\n size: heroButtonVariants.variants.size,\n },\n compoundVariants: [\n // white text on solid / shadow success button\n {\n color: 'success',\n variant: ['solid', 'shadow'],\n class: 'text-white',\n },\n // white text on solid / shadow warning button\n {\n color: 'warning',\n variant: ['solid', 'shadow'],\n class: 'text-white',\n },\n {\n color: 'info',\n variant: 'solid',\n class: 'bg-info text-info-foreground',\n },\n {\n color: 'info',\n variant: 'shadow',\n class: 'text-info-foreground\" bg-info shadow-info/40 shadow-lg',\n },\n {\n color: 'info',\n variant: 'bordered',\n class: 'border-medium border-info text-info bg-transparent',\n },\n {\n color: 'info',\n variant: 'flat',\n class: 'bg-info/20 text-info-600',\n },\n {\n color: 'info',\n variant: 'faded',\n class: 'border-default bg-default-100 text-info',\n },\n {\n color: 'info',\n variant: 'light',\n class: 'text-info data-[hover=true]:bg-info-100 bg-transparent',\n },\n {\n color: 'info',\n variant: 'ghost',\n class:\n 'border-info text-info data-[hover=true]:!bg-info data-[hover=true]:!text-info-foreground',\n },\n ],\n});\n\ntype VariantProps = TVProps<typeof buttonVariants>;\n\nexport interface ButtonProps extends VariantProps {\n /** sets HTML aria-label attribute */\n ariaLabel?: string;\n /** content of the button */\n children?: ReactNode;\n /** CSS class name */\n className?: string;\n /** color of the button */\n color?: HeroButtonProps['color'];\n /** disables the button */\n disabled?: boolean;\n /** disables all animations */\n disableAnimation?: boolean;\n /** shows loading animation */\n loading?: boolean;\n /** optional icon */\n icon?: ReactNode;\n /** click event handler */\n onClick?: HeroButtonProps['onPress'];\n /** border radius size */\n radius?: HeroButtonProps['radius'];\n /** enable ripple animation effect on click */\n ripple?: boolean;\n /** size options */\n size?: HeroButtonProps['size'];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** HTML button type attribute */\n type?: 'button' | 'submit' | 'reset' | undefined;\n /** visual style variant */\n variant?: HeroButtonProps['variant'];\n}\n\n/**\n * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)\n */\nconst Button = ({\n ariaLabel = undefined,\n children = undefined,\n className = undefined,\n color = 'default',\n disableAnimation = false,\n disabled = false,\n icon = undefined,\n loading = false,\n onClick = undefined,\n radius = undefined,\n ripple = false,\n size = undefined,\n testId = undefined,\n type = undefined,\n variant = 'solid',\n}: ButtonProps) => {\n return (\n <HeroButton\n aria-label={ariaLabel}\n className={buttonVariants({ color, variant, className })}\n color={color}\n data-testid={testId}\n disableAnimation={disableAnimation}\n disableRipple={disableAnimation || !ripple}\n isDisabled={disabled}\n isIconOnly={!!(icon && !children)}\n isLoading={loading}\n onPress={onClick}\n radius={radius}\n size={size}\n spinner={<LoadingSpinner />}\n type={type}\n variant={variant}\n >\n {icon}\n {children}\n </HeroButton>\n );\n};\n\nexport default Button;\n","/**\n * svg loading spinner for button\n * @see https://www.heroui.com//docs/components/button#loading\n * */\nexport default () => (\n <svg\n className=\"h-5 w-5 animate-spin text-current\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n fill=\"currentColor\"\n />\n </svg>\n);\n","import Button, { buttonVariants } from './Button';\n\nexport type { ButtonProps } from './Button';\n\nexport { Button, buttonVariants };\n\nexport default Button;\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-WZZMB5CI.cjs","../src/Popover/Popover.tsx","../src/Popover/index.ts"],"names":["Popover_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-WZZMB5CI.cjs","sourcesContent":[null,"import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { PopoverProps as HeroPopoverProps } from '@heroui/popover';\nimport type { ReactNode } from 'react';\nimport type { ButtonProps } from '../Button';\n\nimport { Button } from '@heroui/button';\nimport { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport ScrollShadow from '../ScrollShadow/ScrollShadow';\n\n// popover styling variants\nexport const popoverVariants = tv({\n slots: {\n body: 'w-full px-4 py-2',\n content: 'flex max-h-[80vh] flex-col p-0',\n divider: 'border-divider m-0 w-full p-0',\n footer: 'w-full px-4 py-2',\n footerWrapper: 'w-full',\n header: 'w-full px-4 pt-2 pb-1 font-semibold',\n headerWrapper: 'w-full',\n trigger: '',\n },\n});\n\ntype VariantProps = TVProps<typeof popoverVariants>;\ntype ClassName = TVClassName<typeof popoverVariants>;\n\nexport interface PopoverProps extends VariantProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: ClassName;\n /** content of the popover */\n content: ReactNode;\n /** HTML data-testid attribute used in e2e tests */\n contentTestId?: string;\n /** popover footer */\n footer?: ReactNode;\n /** Popover title */\n header?: ReactNode;\n /** use as controlled component */\n openControlled?: { open: boolean; setOpen: (open: boolean) => void };\n /** placement of the popover relative to its trigger reference */\n placement?: HeroPopoverProps['placement'];\n /** The container element in which the overlay portal will be placed. */\n portalContainer?: HeroPopoverProps['portalContainer'];\n /** Whether to block scrolling outside the popover */\n shouldBlockScroll?: boolean;\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n triggerButtonProps?: Pick<\n ButtonProps,\n | 'ariaLabel'\n | 'className'\n | 'color'\n | 'disableAnimation'\n | 'disabled'\n | 'size'\n | 'testId'\n | 'variant'\n >;\n}\n\n/**\n * Popover component based on [HeroUI Card](https://www.heroui.com//docs/components/popover)\n */\nexport default ({\n children = null,\n className: _className = undefined,\n content,\n contentTestId = undefined,\n footer = undefined,\n header = undefined,\n openControlled = undefined,\n placement = 'top',\n portalContainer = undefined,\n shouldBlockScroll = undefined,\n testId = undefined,\n triggerButtonProps = undefined,\n}: PopoverProps) => {\n // className from slots\n const variants = popoverVariants();\n const className = variantsToClassNames(variants, _className, 'trigger');\n\n return (\n <Popover\n classNames={className}\n placement={placement}\n portalContainer={portalContainer}\n radius=\"sm\"\n shouldBlockScroll={shouldBlockScroll}\n showArrow\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...(openControlled\n ? { isOpen: openControlled.open, onOpenChange: openControlled.setOpen }\n : {})}\n >\n <PopoverTrigger data-testid={testId}>\n {/* NOTE: type and aria properties are injected by PopoverTrigger */}\n {triggerButtonProps ? (\n // TODO: currently we have to use @heroui/button because\n // passing ref does not work (even with forwardRef in Button)\n // eslint-disable-next-line react/jsx-props-no-spreading\n <Button className={className.trigger} {...triggerButtonProps}>\n {children}\n </Button>\n ) : (\n // eslint-disable-next-line react/button-has-type\n <button className={className.trigger}>{children}</button>\n )}\n </PopoverTrigger>\n <PopoverContent data-testid={contentTestId}>\n {header && (\n <div className={className.headerWrapper}>\n <div className={className.header}>{header}</div>\n <hr className={className.divider} />\n </div>\n )}\n <ScrollShadow className={className.body}>{content}</ScrollShadow>\n {footer && (\n <div className={className.footerWrapper}>\n <hr className={className.divider} />\n <div className={className.footer}>{footer}</div>\n </div>\n )}\n </PopoverContent>\n </Popover>\n );\n};\n","import Popover from './Popover';\n\nexport type { PopoverProps } from './Popover';\n\nexport { Popover };\n\nexport default Popover;\n"]}
|
package/dist/chunk-XHOAZB2Z.cjs
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/Menu/Menu.tsx
|
|
2
|
-
var _fa6 = require('react-icons/fa6');
|
|
3
|
-
var _button = require('@heroui/button');
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var _dropdown = require('@heroui/dropdown');
|
|
11
|
-
var _pixelutils = require('@fuf-stack/pixel-utils');
|
|
12
|
-
var _jsxruntime = require('react/jsx-runtime');
|
|
13
|
-
var getDisabledKeys = (items) => {
|
|
14
|
-
return items.map((item) => typeof (item == null ? void 0 : item.items) === "undefined" ? item : item.items).flat().filter((item) => {
|
|
15
|
-
return Object.hasOwn(item, "disabled") && item.disabled === true;
|
|
16
|
-
}).map((item) => item.key);
|
|
17
|
-
};
|
|
18
|
-
var renderMenuItem = (item) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
19
|
-
_dropdown.DropdownItem,
|
|
20
|
-
{
|
|
21
|
-
className: item.className,
|
|
22
|
-
"data-testid": item.testId || item.key,
|
|
23
|
-
description: item.description,
|
|
24
|
-
onPress: item.onClick,
|
|
25
|
-
startContent: item.icon,
|
|
26
|
-
children: item.label
|
|
27
|
-
},
|
|
28
|
-
item.key
|
|
29
|
-
);
|
|
30
|
-
var Menu = ({
|
|
31
|
-
children = null,
|
|
32
|
-
className = void 0,
|
|
33
|
-
onAction = void 0,
|
|
34
|
-
testId = void 0,
|
|
35
|
-
isDisabled = false,
|
|
36
|
-
items
|
|
37
|
-
}) => {
|
|
38
|
-
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _dropdown.Dropdown, { isDisabled, children: [
|
|
39
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _dropdown.DropdownTrigger, { className: _pixelutils.cn.call(void 0, className), "data-testid": testId, children: children ? (
|
|
40
|
-
// eslint-disable-next-line react/button-has-type
|
|
41
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { children })
|
|
42
|
-
) : (
|
|
43
|
-
// INFO: we use hero button here so that ref passing works
|
|
44
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _button.Button, { size: "sm", variant: "flat", className: "min-w-0", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _fa6.FaEllipsisVertical, {}) })
|
|
45
|
-
) }),
|
|
46
|
-
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
47
|
-
_dropdown.DropdownMenu,
|
|
48
|
-
{
|
|
49
|
-
items,
|
|
50
|
-
disabledKeys: getDisabledKeys(items),
|
|
51
|
-
onAction,
|
|
52
|
-
children: (item) => {
|
|
53
|
-
if ("items" in item) {
|
|
54
|
-
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
|
|
55
|
-
_dropdown.DropdownSection,
|
|
56
|
-
{
|
|
57
|
-
items: item.items,
|
|
58
|
-
title: item.label,
|
|
59
|
-
children: (sectionItem) => {
|
|
60
|
-
return renderMenuItem(sectionItem);
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
item.key
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
return renderMenuItem(item);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
)
|
|
70
|
-
] });
|
|
71
|
-
};
|
|
72
|
-
var Menu_default = Menu;
|
|
73
|
-
|
|
74
|
-
// src/Menu/index.ts
|
|
75
|
-
var Menu_default2 = Menu_default;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
exports.Menu_default = Menu_default; exports.Menu_default2 = Menu_default2;
|
|
81
|
-
//# sourceMappingURL=chunk-XHOAZB2Z.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-XHOAZB2Z.cjs","../src/Menu/Menu.tsx","../src/Menu/index.ts"],"names":["Menu_default"],"mappings":"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","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/chunk-XHOAZB2Z.cjs","sourcesContent":[null,"import type {\n DropdownSectionProps,\n DropdownItemProps as HeroDropdownItemProps,\n} from '@heroui/dropdown';\nimport type { Key, ReactNode } from 'react';\n\nimport { FaEllipsisVertical } from 'react-icons/fa6';\n\nimport { Button } from '@heroui/button';\nimport {\n Dropdown as HeroDropdown,\n DropdownItem as HeroDropdownItem,\n DropdownMenu as HeroDropdownMenu,\n DropdownSection as HeroDropdownSection,\n DropdownTrigger as HeroDropdownTrigger,\n} from '@heroui/dropdown';\n\nimport { cn } from '@fuf-stack/pixel-utils';\n\n/**\n * Menu item type\n */\nexport interface MenuItem {\n /** unique identifier */\n key: string;\n /** CSS class name */\n className?: string;\n /** additional description shown under the label */\n description?: string;\n /** disables the menu item */\n disabled?: boolean;\n /** menu item icon */\n icon?: ReactNode;\n /** menu item name */\n label: ReactNode;\n /** click event handler */\n onClick?: HeroDropdownItemProps['onPress'];\n /** e2e test identifier */\n testId?: string;\n}\n\n/**\n * Menu section type\n */\nexport interface MenuSection {\n /** unique identifier */\n key: string;\n /** section label */\n label: ReactNode;\n /** section items (array of MenuItem) */\n items: MenuItem[];\n}\n\nexport interface MenuProps {\n /** child components */\n children?: ReactNode;\n /** CSS class name */\n className?: string | string[];\n /** HTML data-testid attribute used in e2e tests */\n testId?: string;\n /** menu item structure */\n items: (MenuSection | MenuItem)[];\n /** disable menu trigger */\n isDisabled?: boolean;\n /** called if item is selected */\n onAction?: (key: Key) => void;\n}\n\n/** returns String[] of disabled items/keys */\nconst getDisabledKeys = (items: (MenuSection | MenuItem)[]) => {\n return (\n items\n // @ts-expect-error typing issue with MenuSection | MenuItem\n .map((item) => (typeof item?.items === 'undefined' ? item : item.items))\n .flat<MenuItem[]>()\n .filter((item) => {\n return Object.hasOwn(item, 'disabled') && item.disabled === true;\n })\n .map((item) => item.key)\n );\n};\n\nconst renderMenuItem = (item: MenuItem) => (\n <HeroDropdownItem\n className={item.className}\n data-testid={item.testId || item.key}\n description={item.description}\n key={item.key}\n onPress={item.onClick}\n startContent={item.icon}\n >\n {item.label}\n </HeroDropdownItem>\n);\n\n/**\n * Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)\n */\nconst Menu = ({\n children = null,\n className = undefined,\n onAction = undefined,\n testId = undefined,\n isDisabled = false,\n items,\n}: MenuProps) => {\n return (\n <HeroDropdown isDisabled={isDisabled}>\n <HeroDropdownTrigger className={cn(className)} data-testid={testId}>\n {children ? (\n // eslint-disable-next-line react/button-has-type\n <button>{children}</button>\n ) : (\n // INFO: we use hero button here so that ref passing works\n <Button size=\"sm\" variant=\"flat\" className=\"min-w-0\">\n <FaEllipsisVertical />\n </Button>\n )}\n </HeroDropdownTrigger>\n <HeroDropdownMenu\n // aria-label=\"Dynamic Actions\"\n items={items}\n disabledKeys={getDisabledKeys(items)}\n onAction={onAction}\n >\n {(item) => {\n if ('items' in item) {\n return (\n <HeroDropdownSection\n items={item.items as MenuSection['items']}\n title={item.label as DropdownSectionProps['title']}\n key={item.key}\n >\n {(sectionItem) => {\n return renderMenuItem(sectionItem);\n }}\n </HeroDropdownSection>\n );\n }\n return renderMenuItem(item);\n }}\n </HeroDropdownMenu>\n </HeroDropdown>\n );\n};\n\nexport default Menu;\n","import Menu from './Menu';\n\nexport type { MenuProps, MenuItem, MenuSection } from './Menu';\n\nexport { Menu };\n\nexport default Menu;\n"]}
|
|
File without changes
|