period-ui 0.3.4 → 0.3.5
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/components/atoms/drop-down-menu/components/full-screen-drop-down-menu.d.ts +2 -1
- package/dist/components/atoms/drop-down-menu/components/full-screen-drop-down-menu.d.ts.map +1 -1
- package/dist/components/atoms/drop-down-menu/components/full-screen-drop-down-menu.js +2 -2
- package/dist/components/atoms/drop-down-menu/components/full-screen-drop-down-menu.js.map +1 -1
- package/dist/components/atoms/drop-down-menu/components/menu-item.d.ts +1 -0
- package/dist/components/atoms/drop-down-menu/components/menu-item.d.ts.map +1 -1
- package/dist/components/atoms/drop-down-menu/components/menu-item.js +3 -3
- package/dist/components/atoms/drop-down-menu/components/menu-item.js.map +1 -1
- package/dist/components/atoms/drop-down-menu/drop-down-menu.d.ts +4 -1
- package/dist/components/atoms/drop-down-menu/drop-down-menu.d.ts.map +1 -1
- package/dist/components/atoms/drop-down-menu/drop-down-menu.js +21 -11
- package/dist/components/atoms/drop-down-menu/drop-down-menu.js.map +1 -1
- package/dist/components/molecules/drawer/drawer.d.ts.map +1 -1
- package/dist/components/molecules/drawer/drawer.js +1 -1
- package/dist/components/molecules/drawer/drawer.js.map +1 -1
- package/dist/components/molecules/modal/components/full-screen-modal.d.ts +4 -2
- package/dist/components/molecules/modal/components/full-screen-modal.d.ts.map +1 -1
- package/dist/components/molecules/modal/components/full-screen-modal.js +3 -2
- package/dist/components/molecules/modal/components/full-screen-modal.js.map +1 -1
- package/dist/components/molecules/three-dot-menu/three-dot-menu.d.ts +2 -1
- package/dist/components/molecules/three-dot-menu/three-dot-menu.d.ts.map +1 -1
- package/dist/components/molecules/three-dot-menu/three-dot-menu.js +4 -2
- package/dist/components/molecules/three-dot-menu/three-dot-menu.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,10 +6,11 @@ type Props = {
|
|
|
6
6
|
cancelLabel?: string;
|
|
7
7
|
variant?: MenuItemVariant;
|
|
8
8
|
selectedIDs?: string[];
|
|
9
|
+
isLabelTruncated?: boolean;
|
|
9
10
|
emptyElement?: ReactElement;
|
|
10
11
|
options: DropDownMenuOptionProps[];
|
|
11
12
|
onClose: () => void;
|
|
12
13
|
};
|
|
13
|
-
export declare function FullScreenDropDownMenu({ isOpen, options, cancelLabel, emptyElement, selectedIDs, variant, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function FullScreenDropDownMenu({ isOpen, options, cancelLabel, emptyElement, selectedIDs, isLabelTruncated, variant, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export type { Props as FullScreenDropDownMenuProps };
|
|
15
16
|
//# sourceMappingURL=full-screen-drop-down-menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-screen-drop-down-menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/drop-down-menu/components/full-screen-drop-down-menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAgB,EAChB,OAAiC,EACjC,OAAO,GACR,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"full-screen-drop-down-menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/drop-down-menu/components/full-screen-drop-down-menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAY,YAAY,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,uBAAuB,EAAE,MAAM,wBAAwB,CAAC;AAGjE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAgB,EAChB,gBAAuB,EACvB,OAAiC,EACjC,OAAO,GACR,EAAE,KAAK,2CAuCP;AAED,YAAY,EAAE,KAAK,IAAI,2BAA2B,EAAE,CAAC"}
|
|
@@ -8,7 +8,7 @@ const react_3 = require("react");
|
|
|
8
8
|
const tailwind_utils_1 = require("../../../../utils/tailwind-utils");
|
|
9
9
|
const menu_item_1 = require("./menu-item");
|
|
10
10
|
const menu_item_types_1 = require("./menu-item-types");
|
|
11
|
-
function FullScreenDropDownMenu({ isOpen, options, cancelLabel, emptyElement, selectedIDs = [], variant = menu_item_types_1.MenuItemVariant.DEFAULT, onClose, }) {
|
|
12
|
-
return ((0, jsx_runtime_1.jsx)(react_2.Transition, { show: isOpen, as: react_3.Fragment, children: (0, jsx_runtime_1.jsxs)(react_2.Dialog, { as: "div", className: "fixed z-50 inset-0", onClose: onClose, open: isOpen, static: true, children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-gray-01 bg-opacity-50" }), (0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-x-0 bottom-0 flex flex-col gap-2 p-4", onClick: onClose, children: [options.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col rounded-2xl overflow-hidden", children: options.map((option, index) => ((0, react_1.createElement)(menu_item_1.MenuItem, { ...option, key: option.value, id: option.value, variant: option.variant ?? variant, isSelected: selectedIDs.includes(option.value), className: (0, tailwind_utils_1.tailwind)(index !== 0 && 'border-t') }))) })) : (emptyElement), cancelLabel && ((0, jsx_runtime_1.jsx)("div", { className: "rounded-2xl overflow-hidden", children: (0, jsx_runtime_1.jsx)(menu_item_1.MenuItem, { id: "cancel", label: cancelLabel }) }))] })] }) }));
|
|
11
|
+
function FullScreenDropDownMenu({ isOpen, options, cancelLabel, emptyElement, selectedIDs = [], isLabelTruncated = true, variant = menu_item_types_1.MenuItemVariant.DEFAULT, onClose, }) {
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)(react_2.Transition, { show: isOpen, as: react_3.Fragment, children: (0, jsx_runtime_1.jsxs)(react_2.Dialog, { as: "div", className: "fixed z-50 inset-0", onClose: onClose, open: isOpen, static: true, children: [(0, jsx_runtime_1.jsx)("div", { className: "fixed inset-0 bg-gray-01 bg-opacity-50" }), (0, jsx_runtime_1.jsxs)("div", { className: "fixed inset-x-0 bottom-0 flex flex-col gap-2 p-4", onClick: onClose, children: [options.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col rounded-2xl overflow-hidden", children: options.map((option, index) => ((0, react_1.createElement)(menu_item_1.MenuItem, { ...option, key: option.value, id: option.value, variant: option.variant ?? variant, isSelected: selectedIDs.includes(option.value), isLabelTruncated: isLabelTruncated, className: (0, tailwind_utils_1.tailwind)(index !== 0 && 'border-t') }))) })) : (emptyElement), cancelLabel && ((0, jsx_runtime_1.jsx)("div", { className: "rounded-2xl overflow-hidden", children: (0, jsx_runtime_1.jsx)(menu_item_1.MenuItem, { id: "cancel", label: cancelLabel, isLabelTruncated: isLabelTruncated, onClick: onClose }) }))] })] }) }));
|
|
13
13
|
}
|
|
14
14
|
//# sourceMappingURL=full-screen-drop-down-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-screen-drop-down-menu.js","sourceRoot":"","sources":["../../../../../src/components/atoms/drop-down-menu/components/full-screen-drop-down-menu.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"full-screen-drop-down-menu.js","sourceRoot":"","sources":["../../../../../src/components/atoms/drop-down-menu/components/full-screen-drop-down-menu.tsx"],"names":[],"mappings":";;AAkBA,wDAgDC;;;AAlED,6CAAuD;AACvD,iCAA+C;AAE/C,qEAA4D;AAC5D,2CAAuC;AACvC,uDAAoD;AAapD,SAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,OAAO,EACP,WAAW,EACX,YAAY,EACZ,WAAW,GAAG,EAAE,EAChB,gBAAgB,GAAG,IAAI,EACvB,OAAO,GAAG,iCAAe,CAAC,OAAO,EACjC,OAAO,GACD;IACN,OAAO,CACL,uBAAC,kBAAU,IAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,gBAAQ,YACpC,wBAAC,cAAM,IAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,mBACpF,gCAAK,SAAS,EAAC,wCAAwC,GAAG,EAE1D,iCAAK,SAAS,EAAC,kDAAkD,EAAC,OAAO,EAAE,OAAO,aAC/E,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACpB,gCAAK,SAAS,EAAC,2CAA2C,YACvD,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,2BAAC,oBAAQ,OACH,MAAM,EACV,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,EAAE,EAAE,MAAM,CAAC,KAAK,EAChB,OAAO,EAAE,MAAM,CAAC,OAAO,IAAI,OAAO,EAClC,UAAU,EAAE,WAAW,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9C,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,IAAA,yBAAQ,EAAC,KAAK,KAAK,CAAC,IAAI,UAAU,CAAC,GAC9C,CACH,CAAC,GACE,CACP,CAAC,CAAC,CAAC,CACF,YAAY,CACb,EAEA,WAAW,IAAI,CACd,gCAAK,SAAS,EAAC,6BAA6B,YAC1C,uBAAC,oBAAQ,IACP,EAAE,EAAC,QAAQ,EACX,KAAK,EAAE,WAAW,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,GAChB,GACE,CACP,IACG,IACC,GACE,CACd,CAAC;AACJ,CAAC"}
|
|
@@ -9,6 +9,7 @@ type Props = {
|
|
|
9
9
|
helperLabel?: string;
|
|
10
10
|
variant?: MenuItemVariant;
|
|
11
11
|
icon?: BilloIconProps;
|
|
12
|
+
isLabelTruncated?: boolean;
|
|
12
13
|
onClick?: () => void;
|
|
13
14
|
};
|
|
14
15
|
export declare const MenuItem: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/drop-down-menu/components/menu-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EAOf,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"menu-item.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/drop-down-menu/components/menu-item.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,cAAc,EAOf,MAAM,wBAAwB,CAAC;AAGhC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,KAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,QAAQ,qGAgHnB,CAAC;AAEH,YAAY,EAAE,KAAK,IAAI,aAAa,EAAE,CAAC"}
|
|
@@ -7,7 +7,7 @@ const components_1 = require("../../../../components");
|
|
|
7
7
|
const tailwind_utils_1 = require("../../../../utils/tailwind-utils");
|
|
8
8
|
const window_dimensions_utils_1 = require("../../../../utils/window-dimensions-utils");
|
|
9
9
|
const menu_item_types_1 = require("./menu-item-types");
|
|
10
|
-
exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ id, icon, label, className, helperLabel, isDisabled = false, isSelected = false, variant = menu_item_types_1.MenuItemVariant.DEFAULT, onClick = () => { }, }, ref) {
|
|
10
|
+
exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ id, icon, label, className, helperLabel, isDisabled = false, isSelected = false, isLabelTruncated = true, variant = menu_item_types_1.MenuItemVariant.DEFAULT, onClick = () => { }, }, ref) {
|
|
11
11
|
const { isMobile } = (0, window_dimensions_utils_1.useWindowDimensions)();
|
|
12
12
|
const isDestructive = variant === menu_item_types_1.MenuItemVariant.DESTRUCTIVE;
|
|
13
13
|
const isTextButton = variant === menu_item_types_1.MenuItemVariant.TEXT_BUTTON;
|
|
@@ -16,8 +16,8 @@ exports.MenuItem = (0, react_1.forwardRef)(function MenuItem({ id, icon, label,
|
|
|
16
16
|
'py-2 hover:bg-blue-03 active:bg-blue-03 focus-visible:py-[6px] focus-visible:bg-blue-03', isSelected && 'bg-gray-04 hover:bg-gray-04', className), "data-testid": id, onClick: onClick, children: [!isTextButton && icon && ((0, jsx_runtime_1.jsx)(components_1.BilloIcon, { size: isMobile ? components_1.IconSize.LG : components_1.IconSize.XL, ...icon, className: (0, tailwind_utils_1.tailwind)('mr-2', isDestructive
|
|
17
17
|
? 'text-red-01 group-disabled:text-red-03'
|
|
18
18
|
: 'text-gray-01 group-disabled:text-gray-03', icon.className) })), isCheckBox && ((0, jsx_runtime_1.jsx)(components_1.Checkbox, { isDisabled: isDisabled, value: isSelected, onCheckToggle: onClick, containerClassName: "mr-2", className: (0, tailwind_utils_1.tailwind)(!isSelected && 'group-hover:border-gray-03 group-hover:bg-gray-05', !isSelected &&
|
|
19
|
-
'group-disabled:bg-gray-06 group-disabled:border-gray-04 group-disabled:cursor-not-allowed') })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start w-full max-w-full", children: [isTextButton ? ((0, jsx_runtime_1.jsx)(components_1.TextButton, { isDisabled: isDisabled, icon: icon?.icon, label: label, className: (0, tailwind_utils_1.tailwind)('text-blue-01', 'group-disabled:text-blue-03', 'group-hover:bg-blue-03', 'group-active:bg-blue-03 group-active:text-blue-00', 'group-focus-visible:bg-blue-03') })) : ((0, jsx_runtime_1.jsx)(components_1.Text, { className: (0, tailwind_utils_1.tailwind)('
|
|
19
|
+
'group-disabled:bg-gray-06 group-disabled:border-gray-04 group-disabled:cursor-not-allowed') })), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-start w-full max-w-full", children: [isTextButton ? ((0, jsx_runtime_1.jsx)(components_1.TextButton, { isDisabled: isDisabled, icon: icon?.icon, label: label, className: (0, tailwind_utils_1.tailwind)('text-blue-01', 'group-disabled:text-blue-03', 'group-hover:bg-blue-03', 'group-active:bg-blue-03 group-active:text-blue-00', 'group-focus-visible:bg-blue-03') })) : ((0, jsx_runtime_1.jsx)(components_1.Text, { className: (0, tailwind_utils_1.tailwind)('text-left w-full', isLabelTruncated && 'truncate', icon?.icon && 'pr-8', isDestructive
|
|
20
20
|
? 'text-red-01 group-disabled:text-red-03'
|
|
21
|
-
: 'text-gray-01 group-disabled:text-gray-03'), children: label })), helperLabel && ((0, jsx_runtime_1.jsx)(components_1.Text, { variant: components_1.TextVariant.HELPER, color: components_1.TextColors.BLACK, className:
|
|
21
|
+
: 'text-gray-01 group-disabled:text-gray-03'), children: label })), helperLabel && ((0, jsx_runtime_1.jsx)(components_1.Text, { variant: components_1.TextVariant.HELPER, color: components_1.TextColors.BLACK, className: (0, tailwind_utils_1.tailwind)('group-disabled:text-gray-03 text-left w-full', isLabelTruncated && 'truncate'), children: helperLabel }))] })] }, id));
|
|
22
22
|
});
|
|
23
23
|
//# sourceMappingURL=menu-item.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/components/atoms/drop-down-menu/components/menu-item.tsx"],"names":[],"mappings":";;;;AAAA,iCAAiD;AACjD,uDASgC;AAChC,qEAA4D;AAC5D,uFAAgF;AAChF,uDAAoD;
|
|
1
|
+
{"version":3,"file":"menu-item.js","sourceRoot":"","sources":["../../../../../src/components/atoms/drop-down-menu/components/menu-item.tsx"],"names":[],"mappings":";;;;AAAA,iCAAiD;AACjD,uDASgC;AAChC,qEAA4D;AAC5D,uFAAgF;AAChF,uDAAoD;AAevC,QAAA,QAAQ,GAAG,IAAA,kBAAU,EAA2B,SAAS,QAAQ,CAC5E,EACE,EAAE,EACF,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,gBAAgB,GAAG,IAAI,EACvB,OAAO,GAAG,iCAAe,CAAC,OAAO,EACjC,OAAO,GAAG,GAAG,EAAE,GAAE,CAAC,GACZ,EACR,GAAoC;IAEpC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,6CAAmB,GAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,OAAO,KAAK,iCAAe,CAAC,WAAW,CAAC;IAC9D,MAAM,YAAY,GAAG,OAAO,KAAK,iCAAe,CAAC,WAAW,CAAC;IAC7D,MAAM,UAAU,GAAG,OAAO,KAAK,iCAAe,CAAC,SAAS,CAAC;IAEzD,OAAO,CACL,oCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,IAAA,yBAAQ,EACjB,OAAO,EACP,4DAA4D,EAC5D,sCAAsC,EACtC,kFAAkF,EAClF,4EAA4E,EAC5E,YAAY;YACV,yFAAyF,EAC3F,UAAU,IAAI,6BAA6B,EAC3C,SAAS,CACV,iBAEY,EAAE,EACf,OAAO,EAAE,OAAO,aAEf,CAAC,YAAY,IAAI,IAAI,IAAI,CACxB,uBAAC,sBAAS,IACR,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,qBAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAQ,CAAC,EAAE,KACtC,IAAI,EACR,SAAS,EAAE,IAAA,yBAAQ,EACjB,MAAM,EACN,aAAa;oBACX,CAAC,CAAC,wCAAwC;oBAC1C,CAAC,CAAC,0CAA0C,EAC9C,IAAI,CAAC,SAAS,CACf,GACD,CACH,EAEA,UAAU,IAAI,CACb,uBAAC,qBAAQ,IACP,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,UAAU,EACjB,aAAa,EAAE,OAAO,EACtB,kBAAkB,EAAC,MAAM,EACzB,SAAS,EAAE,IAAA,yBAAQ,EACjB,CAAC,UAAU,IAAI,mDAAmD,EAClE,CAAC,UAAU;oBACT,2FAA2F,CAC9F,GACD,CACH,EAED,iCAAK,SAAS,EAAC,6CAA6C,aACzD,YAAY,CAAC,CAAC,CAAC,CACd,uBAAC,uBAAU,IACT,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EAAE,IAAI,EAChB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAA,yBAAQ,EACjB,cAAc,EACd,6BAA6B,EAC7B,wBAAwB,EACxB,mDAAmD,EACnD,gCAAgC,CACjC,GACD,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,iBAAI,IACH,SAAS,EAAE,IAAA,yBAAQ,EACjB,kBAAkB,EAClB,gBAAgB,IAAI,UAAU,EAC9B,IAAI,EAAE,IAAI,IAAI,MAAM,EACpB,aAAa;4BACX,CAAC,CAAC,wCAAwC;4BAC1C,CAAC,CAAC,0CAA0C,CAC/C,YAEA,KAAK,GACD,CACR,EAEA,WAAW,IAAI,CACd,uBAAC,iBAAI,IACH,OAAO,EAAE,wBAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,uBAAU,CAAC,KAAK,EACvB,SAAS,EAAE,IAAA,yBAAQ,EACjB,8CAA8C,EAC9C,gBAAgB,IAAI,UAAU,CAC/B,YAEA,WAAW,GACP,CACR,IACG,KAzED,EAAE,CA0EA,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}
|
|
@@ -12,6 +12,8 @@ type Props = {
|
|
|
12
12
|
dropDownClassName?: string;
|
|
13
13
|
selectedIDs: string[];
|
|
14
14
|
variant?: MenuItemVariant;
|
|
15
|
+
isLabelTruncated?: boolean;
|
|
16
|
+
isVirtualized?: boolean;
|
|
15
17
|
emptyElement?: ReactElement;
|
|
16
18
|
children?: ReactElement;
|
|
17
19
|
options: DropDownMenuOptionProps[];
|
|
@@ -21,8 +23,9 @@ export type DropDownMenuRowProps = RowComponentProps<{
|
|
|
21
23
|
uniqueOptions: DropDownMenuOptionProps[];
|
|
22
24
|
variant: MenuItemVariant;
|
|
23
25
|
selectedIDs: string[];
|
|
26
|
+
isLabelTruncated: boolean;
|
|
24
27
|
menuItemRef: LegacyRef<HTMLButtonElement>;
|
|
25
28
|
}>;
|
|
26
|
-
export declare function DropDownMenu({ isOpen, options, className, dropDownClassName, emptyElement, selectedIDs, isFixed, isDisabled, fullScreen, cancelLabel, variant, children, onClose, }: Props): JSX.Element;
|
|
29
|
+
export declare function DropDownMenu({ isOpen, options, className, dropDownClassName, emptyElement, selectedIDs, isFixed, isDisabled, fullScreen, cancelLabel, isLabelTruncated, isVirtualized, variant, children, onClose, }: Props): JSX.Element;
|
|
27
30
|
export type { Props as DropDownMenuProps };
|
|
28
31
|
//# sourceMappingURL=drop-down-menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drop-down-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAQ,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAG9D,OAAO,EAAoC,eAAe,EAAE,MAAM,cAAc,CAAC;AAGjF,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,aAAa,EAAE,uBAAuB,EAAE,CAAC;IACzC,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,WAAW,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"drop-down-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAQ,iBAAiB,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAG9D,OAAO,EAAoC,eAAe,EAAE,MAAM,cAAc,CAAC;AAGjF,KAAK,KAAK,GAAG;IACX,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,iBAAiB,CAAC;IACnD,aAAa,EAAE,uBAAuB,EAAE,CAAC;IACzC,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,WAAW,EAAE,SAAS,CAAC,iBAAiB,CAAC,CAAC;CAC3C,CAAC,CAAC;AA2DH,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,OAAO,EACP,SAAS,EACT,iBAAiB,EACjB,YAAY,EACZ,WAAgB,EAChB,OAAc,EACd,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,gBAAuB,EACvB,aAAoB,EACpB,OAAiC,EACjC,QAAQ,EACR,OAAO,GACR,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA6ErB;AAED,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,CAAC"}
|
|
@@ -8,18 +8,28 @@ const window_dimensions_utils_1 = require("../../../utils/window-dimensions-util
|
|
|
8
8
|
const components_1 = require("./components");
|
|
9
9
|
const use_drop_down_menu_1 = require("./use-drop-down-menu");
|
|
10
10
|
const MAX_VISIBLE_ITEMS = 5.5;
|
|
11
|
-
function
|
|
12
|
-
const option = uniqueOptions[index];
|
|
11
|
+
function getMenuItemRowProps(option, index, total, variant, selectedIDs, isLabelTruncated, menuItemRef) {
|
|
13
12
|
const isFirst = index === 0;
|
|
14
|
-
const isLast = index ===
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
13
|
+
const isLast = index === total - 1;
|
|
14
|
+
return {
|
|
15
|
+
...option,
|
|
16
|
+
ref: isLast ? menuItemRef : undefined,
|
|
17
|
+
id: option.value,
|
|
18
|
+
variant: option.variant ?? variant,
|
|
19
|
+
isSelected: selectedIDs.includes(option.value),
|
|
20
|
+
isLabelTruncated,
|
|
21
|
+
className: (0, tailwind_utils_1.tailwind)({
|
|
22
|
+
'rounded-b-lg': isLast,
|
|
23
|
+
'rounded-t-lg': isFirst,
|
|
24
|
+
'border-t': !isFirst,
|
|
25
|
+
}),
|
|
26
|
+
};
|
|
27
|
+
}
|
|
28
|
+
function DropDownMenuRow({ index, style, uniqueOptions, variant, selectedIDs, isLabelTruncated, menuItemRef, }) {
|
|
29
|
+
const option = uniqueOptions[index];
|
|
30
|
+
return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(components_1.MenuItem, { ...getMenuItemRowProps(option, index, uniqueOptions.length, variant, selectedIDs, isLabelTruncated, menuItemRef) }) }));
|
|
21
31
|
}
|
|
22
|
-
function DropDownMenu({ isOpen, options, className, dropDownClassName, emptyElement, selectedIDs = [], isFixed = true, isDisabled = false, fullScreen = false, cancelLabel, variant = components_1.MenuItemVariant.DEFAULT, children, onClose, }) {
|
|
32
|
+
function DropDownMenu({ isOpen, options, className, dropDownClassName, emptyElement, selectedIDs = [], isFixed = true, isDisabled = false, fullScreen = false, cancelLabel, isLabelTruncated = true, isVirtualized = true, variant = components_1.MenuItemVariant.DEFAULT, children, onClose, }) {
|
|
23
33
|
const { isMobile } = (0, window_dimensions_utils_1.useWindowDimensions)();
|
|
24
34
|
const { itemHeight, menuItemRef, containerRef, isDorpDownMenuOpen, handleOpenDorpDown } = (0, use_drop_down_menu_1.useDropDownMenu)({
|
|
25
35
|
isOpen,
|
|
@@ -29,6 +39,6 @@ function DropDownMenu({ isOpen, options, className, dropDownClassName, emptyElem
|
|
|
29
39
|
const uniqueOptions = options?.filter((_option, index, self) => self.findIndex((option) => option.value === _option.value) === index);
|
|
30
40
|
const maxHeight = itemHeight * MAX_VISIBLE_ITEMS;
|
|
31
41
|
const isFullScreenMenu = fullScreen && isMobile;
|
|
32
|
-
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, tailwind_utils_1.tailwind)('relative', className), children: [(0, jsx_runtime_1.jsx)("div", { onClick: handleOpenDorpDown, children: children }), isFullScreenMenu ? ((0, jsx_runtime_1.jsx)(components_1.FullScreenDropDownMenu, { isOpen: isDorpDownMenuOpen, options: uniqueOptions, selectedIDs: selectedIDs, variant: variant, cancelLabel: cancelLabel, emptyElement: emptyElement, onClose: handleOpenDorpDown })) : ((0, jsx_runtime_1.jsx)("div", { onClick: handleOpenDorpDown, className: (0, tailwind_utils_1.tailwind)(isFixed ? 'absolute z-30 top-full' : 'flex', 'mt-2 shadow-white-tree rounded-lg min-w-[200px] w-full', 'overflow-y-auto overflow-x-hidden h-fit', { hidden: !isDorpDownMenuOpen }, dropDownClassName), children: uniqueOptions && uniqueOptions.length > 0 ? ((0, jsx_runtime_1.jsx)(react_window_1.List, { rowHeight: itemHeight, rowComponent: DropDownMenuRow, rowCount: uniqueOptions.length, rowProps: { uniqueOptions, variant, selectedIDs, menuItemRef }, style: { maxHeight: maxHeight, width: '100%' }, className: "overflow-y-auto overflow-x-hidden" })) : (emptyElement) }))] }));
|
|
42
|
+
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, tailwind_utils_1.tailwind)('relative', className), children: [(0, jsx_runtime_1.jsx)("div", { onClick: handleOpenDorpDown, children: children }), isFullScreenMenu ? ((0, jsx_runtime_1.jsx)(components_1.FullScreenDropDownMenu, { isOpen: isDorpDownMenuOpen, options: uniqueOptions, selectedIDs: selectedIDs, variant: variant, cancelLabel: cancelLabel, isLabelTruncated: isLabelTruncated, emptyElement: emptyElement, onClose: handleOpenDorpDown })) : ((0, jsx_runtime_1.jsx)("div", { onClick: handleOpenDorpDown, className: (0, tailwind_utils_1.tailwind)(isFixed ? 'absolute z-30 top-full' : 'flex', 'mt-2 shadow-white-tree rounded-lg min-w-[200px] w-full', 'overflow-y-auto overflow-x-hidden h-fit', { hidden: !isDorpDownMenuOpen }, dropDownClassName), children: uniqueOptions && uniqueOptions.length > 0 ? (isVirtualized ? ((0, jsx_runtime_1.jsx)(react_window_1.List, { rowHeight: itemHeight, rowComponent: DropDownMenuRow, rowCount: uniqueOptions.length, rowProps: { uniqueOptions, variant, selectedIDs, isLabelTruncated, menuItemRef }, style: { maxHeight: maxHeight, width: '100%' }, className: "overflow-y-auto overflow-x-hidden" })) : ((0, jsx_runtime_1.jsx)("div", { className: "overflow-y-auto overflow-x-hidden", style: { maxHeight }, children: uniqueOptions.map((option, index) => ((0, jsx_runtime_1.jsx)(components_1.MenuItem, { ...getMenuItemRowProps(option, index, uniqueOptions.length, variant, selectedIDs, isLabelTruncated, menuItemRef) }, option.value))) }))) : (emptyElement) }))] }));
|
|
33
43
|
}
|
|
34
44
|
//# sourceMappingURL=drop-down-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drop-down-menu.js","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"drop-down-menu.js","sourceRoot":"","sources":["../../../../src/components/atoms/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAiC,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAmB,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGzF,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,OAAO,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,MAAc,EACd,SAAiC,EACjC,OAA6B,EAC7B,YAAmC,EACnC,OAAO,GACR,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/drawer/drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAiC,WAAW,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAAmB,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGzF,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,OAAO,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,MAAc,EACd,SAAiC,EACjC,OAA6B,EAC7B,YAAmC,EACnC,OAAO,GACR,EAAE,KAAK,2CAkDP;yBA7De,MAAM;;;;AAkEtB,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,CAAC"}
|
|
@@ -12,7 +12,7 @@ function Drawer({ title, options, optionsCancelLabel, children, className, isOpe
|
|
|
12
12
|
const isPanel = variant === _1.DrawerVariant.PANEL;
|
|
13
13
|
const isRightDirection = direction === _1.DrawerDirection.RIGHT || !isPanel;
|
|
14
14
|
if (isMobile) {
|
|
15
|
-
return ((0, jsx_runtime_1.jsx)(__1.FullScreenModal, { isOpen: isOpen, title: title, className: className, onClose: onClose, children: children }));
|
|
15
|
+
return ((0, jsx_runtime_1.jsx)(__1.FullScreenModal, { isOpen: isOpen, title: title, className: className, options: options, optionsCancelLabel: optionsCancelLabel, onClose: onClose, children: children }));
|
|
16
16
|
}
|
|
17
17
|
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isPanel ? ((0, jsx_runtime_1.jsx)(components_1.DrawerComponent, { isPanel: isPanel, isRightDirection: isRightDirection, title: title, titleVariant: titleVariant, options: options, optionsCancelLabel: optionsCancelLabel, children: children, onClose: onClose, className: className })) : ((0, jsx_runtime_1.jsx)(__1.ModalOverlay, { isOpen: isOpen, contentClassName: (0, tailwind_utils_1.tailwind)('justify-end'), children: (0, jsx_runtime_1.jsx)(components_1.DrawerComponent, { isPanel: isPanel, title: title, titleVariant: titleVariant, options: options, optionsCancelLabel: optionsCancelLabel, children: children, onClose: onClose, className: className }) })) }));
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/molecules/drawer/drawer.tsx"],"names":[],"mappings":";;AAoBA,
|
|
1
|
+
{"version":3,"file":"drawer.js","sourceRoot":"","sources":["../../../../src/components/molecules/drawer/drawer.tsx"],"names":[],"mappings":";;AAoBA,wBA6DC;;AAhFD,wBAAmD;AACnD,6BAA4F;AAC5F,kEAAyD;AACzD,6CAAyF;AACzF,6EAAsE;AAetE,SAAgB,MAAM,CAAC,EACrB,KAAK,EACL,OAAO,EACP,kBAAkB,EAClB,QAAQ,EACR,SAAS,EACT,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,kBAAe,CAAC,KAAK,EACjC,OAAO,GAAG,gBAAa,CAAC,KAAK,EAC7B,YAAY,GAAG,eAAW,CAAC,QAAQ,EACnC,OAAO,GACD;IACN,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,6CAAmB,GAAE,CAAC;IAC3C,MAAM,OAAO,GAAG,OAAO,KAAK,gBAAa,CAAC,KAAK,CAAC;IAChD,MAAM,gBAAgB,GAAG,SAAS,KAAK,kBAAe,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC;IAEzE,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,uBAAC,mBAAe,IACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,OAAO,EAAE,OAAO,YAEf,QAAQ,GACO,CACnB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,2DACG,OAAO,CAAC,CAAC,CAAC,CACT,uBAAC,4BAAe,IACd,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,gBAAY,IAAC,MAAM,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAA,yBAAQ,EAAC,aAAa,CAAC,YACrE,uBAAC,4BAAe,IACd,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,GACpB,GACW,CAChB,GACA,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,GAAG,8BAAiB,CAAC;AAClC,MAAM,CAAC,OAAO,GAAG,kCAAqB,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
|
-
import { TextVariant } from '../../..';
|
|
2
|
+
import { DropDownMenuOptionProps, TextVariant } from '../../..';
|
|
3
3
|
type Props = {
|
|
4
4
|
isOpen: boolean;
|
|
5
5
|
isBackButtonVisible?: boolean;
|
|
@@ -7,8 +7,10 @@ type Props = {
|
|
|
7
7
|
titleVariant?: TextVariant;
|
|
8
8
|
children: ReactElement | ReactElement[];
|
|
9
9
|
className?: string;
|
|
10
|
+
options?: DropDownMenuOptionProps[];
|
|
11
|
+
optionsCancelLabel?: string;
|
|
10
12
|
onClose?: () => void;
|
|
11
13
|
};
|
|
12
|
-
export declare function FullScreenModal({ isOpen, title, children, className, isBackButtonVisible, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function FullScreenModal({ isOpen, title, children, className, isBackButtonVisible, options, optionsCancelLabel, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
13
15
|
export {};
|
|
14
16
|
//# sourceMappingURL=full-screen-modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-screen-modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/modal/components/full-screen-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,
|
|
1
|
+
{"version":3,"file":"full-screen-modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/modal/components/full-screen-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EACL,uBAAuB,EAOvB,WAAW,EAEZ,MAAM,UAAU,CAAC;AAGlB,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,OAAO,CAAC;IAChB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,uBAAuB,EAAE,CAAC;IACpC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,wBAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,OAAY,EACZ,kBAAkB,EAClB,OAAO,GACR,EAAE,KAAK,2CAwDP"}
|
|
@@ -4,7 +4,8 @@ exports.FullScreenModal = FullScreenModal;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const __1 = require("../../..");
|
|
6
6
|
const tailwind_utils_1 = require("../../../../utils/tailwind-utils");
|
|
7
|
-
function FullScreenModal({ isOpen, title, children, className, isBackButtonVisible, onClose, }) {
|
|
8
|
-
|
|
7
|
+
function FullScreenModal({ isOpen, title, children, className, isBackButtonVisible, options = [], optionsCancelLabel, onClose, }) {
|
|
8
|
+
const hasOptionsMenu = options.length > 0 && !!optionsCancelLabel;
|
|
9
|
+
return ((0, jsx_runtime_1.jsx)(__1.ModalOverlay, { isOpen: isOpen, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex flex-col p-6 w-full h-full', 'transform bg-white', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, tailwind_utils_1.tailwind)('flex flex-row sticky justify-start items-center bg-white', 'border-b border-gray-04 -mx-6 -mt-6 px-[13px] py-[11px]', children && 'mb-8'), children: [(isBackButtonVisible || hasOptionsMenu) && ((0, jsx_runtime_1.jsx)(__1.IconButton, { onClick: onClose, icon: __1.IconSymbol.CHEVRON_LEFT, className: "shrink-0", size: __1.IconSize.LG })), (0, jsx_runtime_1.jsx)(__1.Text, { variant: __1.TextVariant.HEADLINE, className: (0, tailwind_utils_1.tailwind)('mx-1 truncate mr-auto'), color: __1.TextColors.BLACK, children: title }), hasOptionsMenu ? ((0, jsx_runtime_1.jsx)(__1.ThreeDotMenu, { options: options, cancelLabel: optionsCancelLabel, className: "shrink-0", triggerElement: (0, jsx_runtime_1.jsx)(__1.IconButton, { icon: __1.IconSymbol.THREE_DOT, className: "shrink-0", size: __1.IconSize.LG }) })) : (!isBackButtonVisible && ((0, jsx_runtime_1.jsx)(__1.IconButton, { onClick: onClose, icon: __1.IconSymbol.X, className: "shrink-0", size: __1.IconSize.LG })))] }), children] }) }));
|
|
9
10
|
}
|
|
10
11
|
//# sourceMappingURL=full-screen-modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"full-screen-modal.js","sourceRoot":"","sources":["../../../../../src/components/molecules/modal/components/full-screen-modal.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"full-screen-modal.js","sourceRoot":"","sources":["../../../../../src/components/molecules/modal/components/full-screen-modal.tsx"],"names":[],"mappings":";;AA0BA,0CAiEC;;AA1FD,gCAUkB;AAClB,qEAA4D;AAc5D,SAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,SAAS,EACT,mBAAmB,EACnB,OAAO,GAAG,EAAE,EACZ,kBAAkB,EAClB,OAAO,GACD;IACN,MAAM,cAAc,GAAG,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,kBAAkB,CAAC;IAElE,OAAO,CACL,uBAAC,gBAAY,IAAC,MAAM,EAAE,MAAM,YAC1B,iCAAK,SAAS,EAAE,IAAA,yBAAQ,EAAC,iCAAiC,EAAE,oBAAoB,EAAE,SAAS,CAAC,aAC1F,iCACE,SAAS,EAAE,IAAA,yBAAQ,EACjB,0DAA0D,EAC1D,yDAAyD,EACzD,QAAQ,IAAI,MAAM,CACnB,aAEA,CAAC,mBAAmB,IAAI,cAAc,CAAC,IAAI,CAC1C,uBAAC,cAAU,IACT,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,cAAU,CAAC,YAAY,EAC7B,SAAS,EAAC,UAAU,EACpB,IAAI,EAAE,YAAQ,CAAC,EAAE,GACjB,CACH,EAED,uBAAC,QAAI,IACH,OAAO,EAAE,eAAW,CAAC,QAAQ,EAC7B,SAAS,EAAE,IAAA,yBAAQ,EAAC,uBAAuB,CAAC,EAC5C,KAAK,EAAE,cAAU,CAAC,KAAK,YAEtB,KAAK,GACD,EAEN,cAAc,CAAC,CAAC,CAAC,CAChB,uBAAC,gBAAY,IACX,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,kBAA4B,EACzC,SAAS,EAAC,UAAU,EACpB,cAAc,EACZ,uBAAC,cAAU,IAAC,IAAI,EAAE,cAAU,CAAC,SAAS,EAAE,SAAS,EAAC,UAAU,EAAC,IAAI,EAAE,YAAQ,CAAC,EAAE,GAAI,GAEpF,CACH,CAAC,CAAC,CAAC,CACF,CAAC,mBAAmB,IAAI,CACtB,uBAAC,cAAU,IACT,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,cAAU,CAAC,CAAC,EAClB,SAAS,EAAC,UAAU,EACpB,IAAI,EAAE,YAAQ,CAAC,EAAE,GACjB,CACH,CACF,IACG,EAGL,QAAQ,IACL,GACO,CAChB,CAAC;AACJ,CAAC"}
|
|
@@ -9,9 +9,10 @@ type Props = {
|
|
|
9
9
|
selectedIDs?: string[];
|
|
10
10
|
variant?: MenuItemVariant;
|
|
11
11
|
emptyElement?: ReactElement;
|
|
12
|
+
triggerElement?: ReactElement;
|
|
12
13
|
options: DropDownMenuOptionProps[];
|
|
13
14
|
onClose?: (value: boolean) => void;
|
|
14
15
|
};
|
|
15
|
-
export declare function ThreeDotMenu({ isOpen, isDisabled, className, dropDownClassName, cancelLabel, selectedIDs, variant, emptyElement, options, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare function ThreeDotMenu({ isOpen, isDisabled, className, dropDownClassName, cancelLabel, selectedIDs, variant, emptyElement, triggerElement, options, onClose, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
export type { Props as ThreeDotMenuProps };
|
|
17
18
|
//# sourceMappingURL=three-dot-menu.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"three-dot-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/three-dot-menu/three-dot-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAEL,uBAAuB,EAIvB,eAAe,EAChB,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"three-dot-menu.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/three-dot-menu/three-dot-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAEL,uBAAuB,EAIvB,eAAe,EAChB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,KAAK,GAAG;IACX,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,cAAc,CAAC,EAAE,YAAY,CAAC;IAC9B,OAAO,EAAE,uBAAuB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAkB,EAClB,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,WAAgB,EAChB,OAAO,EACP,YAAY,EACZ,cAAc,EACd,OAAO,EACP,OAAO,GACR,EAAE,KAAK,2CA4BP;AAED,YAAY,EAAE,KAAK,IAAI,iBAAiB,EAAE,CAAC"}
|
|
@@ -4,7 +4,9 @@ exports.ThreeDotMenu = ThreeDotMenu;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const components_1 = require("../../../components");
|
|
6
6
|
const tailwind_utils_1 = require("../../../utils/tailwind-utils");
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
const window_dimensions_utils_1 = require("../../../utils/window-dimensions-utils");
|
|
8
|
+
function ThreeDotMenu({ isOpen, isDisabled = false, className, dropDownClassName, cancelLabel, selectedIDs = [], variant, emptyElement, triggerElement, options, onClose, }) {
|
|
9
|
+
const { isMobile } = (0, window_dimensions_utils_1.useWindowDimensions)();
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)(components_1.DropDownMenu, { fullScreen: true, isOpen: isOpen, isDisabled: isDisabled, selectedIDs: selectedIDs, variant: variant, options: options, emptyElement: emptyElement, cancelLabel: cancelLabel, isLabelTruncated: false, isVirtualized: false, className: className, dropDownClassName: (0, tailwind_utils_1.tailwind)('right-0 w-max', dropDownClassName), onClose: onClose, children: triggerElement ?? ((0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: components_1.IconSymbol.THREE_DOT, isDisabled: isDisabled, className: "shrink-0 self-end", size: isMobile ? components_1.IconSize.LG : components_1.IconSize.XL })) }));
|
|
9
11
|
}
|
|
10
12
|
//# sourceMappingURL=three-dot-menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"three-dot-menu.js","sourceRoot":"","sources":["../../../../src/components/molecules/three-dot-menu/three-dot-menu.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"three-dot-menu.js","sourceRoot":"","sources":["../../../../src/components/molecules/three-dot-menu/three-dot-menu.tsx"],"names":[],"mappings":";;AA0BA,oCAwCC;;AAjED,oDAO6B;AAC7B,kEAAyD;AACzD,6EAAsE;AAgBtE,SAAgB,YAAY,CAAC,EAC3B,MAAM,EACN,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,iBAAiB,EACjB,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,OAAO,EACP,YAAY,EACZ,cAAc,EACd,OAAO,EACP,OAAO,GACD;IACN,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,6CAAmB,GAAE,CAAC;IAC3C,OAAO,CACL,uBAAC,yBAAY,IACX,UAAU,QACV,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,KAAK,EACvB,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,IAAA,yBAAQ,EAAC,eAAe,EAAE,iBAAiB,CAAC,EAC/D,OAAO,EAAE,OAAO,YAEf,cAAc,IAAI,CACjB,uBAAC,uBAAU,IACT,IAAI,EAAE,uBAAU,CAAC,SAAS,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,qBAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAQ,CAAC,EAAE,GAC1C,CACH,GACY,CAChB,CAAC;AACJ,CAAC"}
|