@lax-wp/design-system 0.14.16 → 0.14.18
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/floating-bar/FloatingBar.cjs.js +1 -1
- package/dist/components/floating-bar/FloatingBar.cjs.js.map +1 -1
- package/dist/components/floating-bar/FloatingBar.es.js +85 -82
- package/dist/components/floating-bar/FloatingBar.es.js.map +1 -1
- package/dist/components/forms/base-input-field/BaseInputField.cjs.js +2 -2
- package/dist/components/forms/base-input-field/BaseInputField.cjs.js.map +1 -1
- package/dist/components/forms/base-input-field/BaseInputField.es.js +14 -14
- package/dist/components/forms/base-input-field/BaseInputField.es.js.map +1 -1
- package/dist/components/forms/toggle/Toggle.cjs.js +1 -1
- package/dist/components/forms/toggle/Toggle.cjs.js.map +1 -1
- package/dist/components/forms/toggle/Toggle.es.js +34 -34
- package/dist/components/forms/toggle/Toggle.es.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),w=require("antd"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),w=require("antd"),r=require("../../_virtual/index.cjs.js"),g=require("framer-motion"),c=require("react"),T=require("react-i18next"),s=require("../data-display/typography/Typography.cjs.js"),B=require("../buttons/option-button/OptionButton.cjs.js"),L=require("../button/IconButton.cjs.js"),C=require("../tooltip/Tooltip.cjs.js"),q=require("../icon/icons.generated.cjs.js"),R=({size:l=24,fill:o="currentColor",className:d})=>a.jsx("svg",{className:d,width:l,height:l,viewBox:"0 0 20 20",fill:o,xmlns:"http://www.w3.org/2000/svg",children:a.jsx("path",{d:"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z"})}),F=({fill:l="#cccccc",className:o})=>a.jsx("svg",{height:"20",width:"20",viewBox:"0 0 20 20",focusable:"false",className:o,children:a.jsx("path",{fill:l,d:"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"})}),j=l=>{const{show:o,isFlowDashboard:d,onClose:k,actionItems:x,selectedItemsCount:N,deleteConfig:p,showActionBg:D}=l,{t:m}=T.useTranslation(),[u,y]=c.useState(!1),[I,b]=c.useState(!0),i=c.useRef(null),f=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(()=>{if(i.current&&f.current){const n=i.current.scrollWidth-100;x.length*180+100>n?b(!1):b(!0)}});return i.current&&e.observe(i.current),()=>{i.current&&e.unobserve(i.current)}});const t={label:m("Delete"),icon:a.jsx(q.DeleteIcon,{className:"text-error-700 w-icon h-icon"}),onClick:p?.onClick,...p},h=x.filter(e=>e.visible!==!1).map((e,n)=>({key:n,label:a.jsx(B.OptionButton,{icon:e.dropdownIcon,text:e?.label||"",onClick:e.onClick,className:"font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5"}),children:e.dropdownItems,disabled:!1}));return o?a.jsx(g.motion.div,{initial:{y:20,opacity:0},animate:{y:0,opacity:1},exit:{y:20,opacity:0},transition:{duration:.2,ease:[.4,0,.2,1],opacity:{duration:.15}},ref:i,className:r("h-[48px]",d?"ml-60 w-1/2":"w-full"),children:a.jsxs("div",{className:r("h-[48px] border-y border-neutral-900 dark:border-[#0d1014] py-[6px] px-[12px] text-white bg-neutral-900 dark:bg-black-900 flex justify-between items-center"),children:[a.jsxs("div",{className:"flex items-center gap-[12px]",children:[a.jsxs("div",{className:"flex items-center gap-[8px]",children:[a.jsx(L,{tooltip:"Close",variant:"ghost",onClick:k,className:"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",children:a.jsx(R,{size:16})}),a.jsx("div",{className:"w-px h-[14px] rounded-[1px] bg-neutral-700 dark:bg-[#1d242c]"})]}),a.jsxs("div",{className:"flex items-center gap-[6px]",children:[a.jsx("span",{className:"inline-flex items-center justify-center min-w-[20px] h-[16px] px-[8px] rounded-[9px] border text-[12px] leading-[18px] font-normal text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-[rgba(0,50,95,0.3)] border-primary-200 dark:border-primary-800",children:N||0}),a.jsx(s.Typography,{size:"extra-small",appearance:"custom",className:"text-white dark:text-neutral-50",children:m("Selected")})]})]}),a.jsx("div",{ref:f,className:r("h-[36px] flex items-center rounded-[43px] font-inter",D?"bg-neutral-800 dark:bg-black-800 px-[10px] rounded-[43px]":""),children:I?a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"flex items-center h-[36px] bg-neutral-800 dark:bg-black-800 px-[10px] rounded-[43px]",children:[x.map((e,n)=>e.visible!==!1&&a.jsx("div",{children:e.type==="dropdown"?a.jsx(w.Dropdown,{menu:{items:e.dropdownItems},trigger:[e.dropdownTrigger||"click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:v=>v.parentElement,open:u,onOpenChange:y,children:a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:r(e?.label?"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] text-white dark:text-neutral-50 hover:opacity-80 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Delete user"||e.label==="Move to trash"||e.label==="Delete Permanently")&&"!text-error-700",e.disabled&&"opacity-70"),children:a.jsxs(C,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(s.Typography,{size:"small",variant:"medium",className:"text-inherit",appearance:"custom",children:e.label})]})},n)}):a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:r(e?.label?"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] text-white dark:text-neutral-50 hover:opacity-80 hover:scale-105 transition-all duration-200 bg-transparent":"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",e?.hideLabel&&"!p-1.5",(e.label==="Delete"||e.label==="Remove"||e.label==="Move to trash"||e.label==="Delete Permanently")&&"!text-error-700",e.disabled&&"opacity-70"),children:a.jsxs(C,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(s.Typography,{size:"small",variant:"medium",className:"text-inherit",appearance:"custom",children:e.label})]})})},n)),p?a.jsxs("button",{id:`btn-floating-bar-${t.label}`,onClick:t.onClick,disabled:t.disabled,className:r("flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200",t.disabled&&"opacity-70"),children:[t.icon,a.jsx(s.Typography,{size:"small",variant:"medium",className:"text-error-700",appearance:"custom",children:t.label})]}):null]}):a.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"minw-[150px] p-1.5 flex items-center",children:[a.jsx(w.Dropdown,{menu:{items:h},trigger:["click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:e=>e.parentElement,open:u,onOpenChange:y,children:a.jsxs("button",{id:"btn-floating-bar-actions",disabled:h.length===0,className:r("flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200",h.length===0&&"opacity-60 hover:scale-100 hover:opacity-60"),type:"button",children:[a.jsx(s.Typography,{size:"small",variant:"medium",className:"text-white",children:m("Actions")}),a.jsx(F,{fill:"#FFFFFF",className:"w-[16px] h-[16px]"})]})}),p?a.jsxs("button",{id:`btn-floating-bar-${t.label}`,onClick:t.onClick,disabled:t.disabled,className:r("flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200",t.disabled&&"opacity-70"),type:"button",children:[t.icon,a.jsx(s.Typography,{size:"small",variant:"medium",className:"text-error-700",appearance:"custom",children:t.label})]}):null]})})]})}):null};j.displayName="FloatingBar";exports.FloatingBar=j;
|
|
2
2
|
//# sourceMappingURL=FloatingBar.cjs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingBar.cjs.js","sources":["../../../src/components/floating-bar/FloatingBar.tsx"],"sourcesContent":["import { Dropdown } from \"antd\";\nimport cn from \"classnames\";\nimport { motion } from \"framer-motion\";\nimport { useEffect, useRef, useState, type FC, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Typography } from \"../data-display/typography/Typography\";\nimport { OptionButton } from \"../buttons/option-button/OptionButton\";\nimport IconButton from \"../button/IconButton\";\nimport Tooltip from \"../tooltip/Tooltip\";\nimport { DeleteIcon } from \"../icon\";\n\n/**\n * Close icon component\n */\nconst CloseIcon: FC<{ size?: number; fill?: string; className?: string }> = ({\n size = 24,\n fill = \"currentColor\",\n className,\n}) => (\n <svg\n className={className}\n width={size}\n height={size}\n viewBox=\"0 0 20 20\"\n fill={fill}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z\" />\n </svg>\n);\n\n/**\n * Dropdown arrow icon component\n */\nconst DropdownArrowIcon: FC<{ fill?: string; className?: string }> = ({\n fill = \"#cccccc\",\n className,\n}) => (\n <svg\n height=\"20\"\n width=\"20\"\n viewBox=\"0 0 20 20\"\n focusable=\"false\"\n className={className}\n >\n <path\n fill={fill}\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n);\n\n/**\n * Configuration for action buttons in the floating bar\n */\nexport type ButtonConfig = {\n /** Button label text */\n label?: string;\n /** Icon element to display */\n icon: ReactNode;\n /** Click handler for the action */\n onClick?: () => void;\n /** Icon for dropdown mode */\n dropdownIcon?: ReactNode;\n /** Whether the action is visible */\n visible?: boolean;\n /** Whether the action is disabled */\n disabled?: boolean;\n /** Tooltip text */\n tooltip?: string;\n /** Whether to hide the label text */\n hideLabel?: boolean;\n /** Action type */\n type?: \"button\" | \"dropdown\";\n /** Dropdown trigger mode */\n dropdownTrigger?: \"click\" | \"hover\";\n /** Dropdown menu items */\n dropdownItems?: Array<{\n label: ReactNode;\n key: string;\n disabled?: boolean;\n }>;\n};\n\n/**\n * Props for the FloatingBar component\n */\nexport type TFloatingBar = {\n /** Whether the floating bar is visible */\n show?: boolean;\n /** Close handler */\n onClose: () => void;\n /** Whether this is used in flow dashboard layout */\n isFlowDashboard?: boolean;\n /** Array of action configurations */\n actionItems: ButtonConfig[];\n /** Number of selected items */\n selectedItemsCount?: number;\n /** Delete action configuration */\n deleteConfig?: {\n label?: string;\n disabled?: boolean;\n onClick?: () => void;\n };\n /** Whether to show action background */\n showActionBg?: boolean;\n};\n\n/**\n * FloatingBar component provides a floating action bar for bulk operations.\n * Drop-in replacement matching the lax-web-portal implementation.\n *\n * @example\n * ```tsx\n * <FloatingBar\n * show={selectedItems.length > 0}\n * onClose={() => setSelectedItems([])}\n * selectedItemsCount={selectedItems.length}\n * actionItems={[\n * {\n * label: \"Edit\",\n * icon: <EditIcon size={16} />,\n * onClick: handleEdit,\n * },\n * {\n * label: \"Archive\",\n * icon: <ArchiveIcon size={16} />,\n * onClick: handleArchive,\n * },\n * ]}\n * deleteConfig={{\n * label: \"Delete\",\n * onClick: handleDelete,\n * }}\n * />\n * ```\n */\nexport const FloatingBar: FC<TFloatingBar> = (props) => {\n const {\n show,\n isFlowDashboard,\n onClose,\n actionItems,\n selectedItemsCount,\n deleteConfig,\n showActionBg,\n } = props;\n\n const { t } = useTranslation();\n const [showDropdown, setShowDropdown] = useState<boolean>(false);\n const [showButtons, setShowButtons] = useState<boolean>(true);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const actionContainerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n if (containerRef.current && actionContainerRef.current) {\n const containerWidth = containerRef.current.scrollWidth - 100;\n const totalActionItemsWidth = actionItems.length * 180 + 100;\n if (totalActionItemsWidth > containerWidth) {\n setShowButtons(false);\n } else {\n setShowButtons(true);\n }\n }\n });\n\n if (containerRef.current) {\n observer.observe(containerRef.current);\n }\n\n return () => {\n if (containerRef.current) {\n observer.unobserve(containerRef.current);\n }\n };\n });\n\n const deleteButtonConfig = {\n label: t(\"Delete\"),\n icon: <DeleteIcon className=\"text-error-500 w-icon h-icon\" />,\n color: \"text-error-500 dark:text-error-500\",\n onClick: deleteConfig?.onClick,\n ...deleteConfig,\n };\n\n const dropDownItems = actionItems\n .filter((button) => button.visible !== false)\n .map((button, index) => ({\n key: index,\n label: (\n <OptionButton\n icon={button.dropdownIcon}\n text={button?.label || \"\"}\n onClick={button.onClick}\n className=\"font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5\"\n />\n ),\n children: button.dropdownItems,\n disabled: false,\n }));\n\n return !show ? null : (\n <motion.div\n initial={{ y: 20, opacity: 0 }}\n animate={{ y: 0, opacity: 1 }}\n exit={{ y: 20, opacity: 0 }}\n transition={{\n duration: 0.2,\n ease: [0.4, 0, 0.2, 1],\n opacity: { duration: 0.15 },\n }}\n ref={containerRef}\n className={cn(\"h-[40px]\", isFlowDashboard ? \"ml-60 w-1/2\" : \"w-full\")}\n >\n <div\n className={cn(\n \"h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center\"\n )}\n >\n <div className=\"flex items-center\">\n <IconButton\n tooltip=\"Close\"\n variant=\"ghost\"\n onClick={onClose}\n className=\"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200\"\n >\n <CloseIcon size={20} />\n </IconButton>\n <div className=\"flex items-center gap-1.5 ml-2\">\n <span className=\"text-primary-600 dark:text-black-100 bg-primary-50 dark:bg-black-800 border-primary-200 dark:border-black-800 text-xs leading-4 font-normal border rounded-full pr-2 pl-2\">\n {selectedItemsCount || 0}\n </span>\n <Typography\n size=\"extra-small\"\n appearance=\"custom\"\n className=\"text-white\"\n >\n {t(\"Selected\")}\n </Typography>\n </div>\n </div>\n <div\n ref={actionContainerRef}\n className={cn(\n \"h-[36px] flex items-center rounded-full font-inter\",\n showActionBg\n ? \"bg-primary-900 dark:bg-black-800 px-[10px] rounded-[43px]\"\n : \"\"\n )}\n >\n {showButtons ? (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.2 }}\n className=\"flex bg-primary-800 dark:bg-black-800 px-4 rounded-full\"\n >\n {actionItems.map(\n (button, index) =>\n button.visible !== false && (\n <div key={index}>\n {button.type === \"dropdown\" ? (\n <Dropdown\n menu={{\n items: button.dropdownItems,\n }}\n trigger={[button.dropdownTrigger || \"click\"]}\n overlayClassName=\"!min-w-[148px]\"\n placement=\"bottomRight\"\n getPopupContainer={(trigger) =>\n trigger.parentElement as HTMLElement\n }\n open={showDropdown}\n onOpenChange={setShowDropdown}\n >\n <button\n key={index}\n id={`btn-floating-bar-${button.label}`}\n onClick={button.onClick}\n disabled={button.disabled}\n className={cn(\n !button?.label\n ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n button?.hideLabel && \"!p-1.5\",\n (button.label === \"Delete\" ||\n button.label === \"Remove\" ||\n button.label === \"Delete user\" ||\n button.label === \"Move to trash\" ||\n button.label === \"Delete Permanently\") &&\n \"!text-error-500\",\n button.disabled && \"opacity-70\"\n )}\n >\n <Tooltip\n hideTooltip={!button.tooltip}\n title={button.tooltip}\n className=\"flex items-center\"\n >\n {button.icon}\n {!button?.hideLabel && button.label && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={\"text-inherit ml-1.5\"}\n appearance=\"custom\"\n >\n {button.label}\n </Typography>\n )}\n </Tooltip>\n </button>\n </Dropdown>\n ) : (\n <button\n id={`btn-floating-bar-${button.label}`}\n onClick={button.onClick}\n disabled={button.disabled}\n className={cn(\n !button?.label\n ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n : \"flex items-center mx-1 gap-1.5 py-1 pr-3 pl-2 rounded-md text-white hover:text-primary-50 hover:scale-105 transition-all duration-200 bg-transparent\",\n button?.hideLabel && \"!p-1.5\",\n (button.label === \"Delete\" ||\n button.label === \"Remove\" ||\n button.label === \"Move to trash\" ||\n button.label === \"Delete Permanently\") &&\n \"!text-error-500\",\n button.disabled && \"opacity-70\"\n )}\n >\n <Tooltip\n hideTooltip={!button.tooltip}\n title={button.tooltip}\n className=\"flex items-center\"\n >\n {button.icon}\n\n {!button?.hideLabel && button.label && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={\"text-inherit ml-1.5\"}\n appearance=\"custom\"\n >\n {button.label}\n </Typography>\n )}\n </Tooltip>\n </button>\n )}\n </div>\n )\n )}\n {deleteConfig ? (\n <button\n id={`btn-floating-bar-${deleteButtonConfig.label}`}\n onClick={deleteButtonConfig.onClick}\n disabled={deleteButtonConfig.disabled}\n className={cn(\n \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n deleteButtonConfig.disabled && \"opacity-70\"\n )}\n >\n {deleteButtonConfig.icon}\n <Typography\n size=\"small\"\n variant=\"medium\"\n className=\"text-error-500\"\n appearance=\"custom\"\n >\n {deleteButtonConfig.label}\n </Typography>\n </button>\n ) : null}\n </motion.div>\n ) : (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.2 }}\n className=\"minw-[150px] p-1.5 flex items-center\"\n >\n <Dropdown\n menu={{\n items: dropDownItems,\n }}\n trigger={[\"click\"]}\n overlayClassName=\"!min-w-[148px]\"\n placement=\"bottomRight\"\n getPopupContainer={(trigger) =>\n trigger.parentElement as HTMLElement\n }\n open={showDropdown}\n onOpenChange={setShowDropdown}\n >\n <button\n id={`btn-floating-bar-actions`}\n disabled={dropDownItems.length === 0}\n className={cn(\n \"flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200\",\n dropDownItems.length === 0 &&\n \"opacity-60 hover:scale-100 hover:opacity-60\"\n )}\n type=\"button\"\n >\n <Typography\n size=\"small\"\n variant=\"medium\"\n className=\"text-white\"\n >\n {t(\"Actions\")}\n </Typography>\n <DropdownArrowIcon\n fill=\"#FFFFFF\"\n className=\"w-[16px] h-[16px]\"\n />\n </button>\n </Dropdown>\n {deleteConfig ? (\n <button\n id={`btn-floating-bar-${deleteButtonConfig.label}`}\n onClick={deleteButtonConfig.onClick}\n disabled={deleteButtonConfig.disabled}\n className={cn(\n \"flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200\",\n deleteButtonConfig.disabled && \"opacity-70\"\n )}\n type=\"button\"\n >\n {deleteButtonConfig.icon}\n <Typography\n size=\"small\"\n variant=\"medium\"\n className=\"text-error-500\"\n appearance=\"custom\"\n >\n {deleteButtonConfig.label}\n </Typography>\n </button>\n ) : null}\n </motion.div>\n )}\n </div>\n </div>\n </motion.div>\n );\n};\n\nFloatingBar.displayName = \"FloatingBar\";\n\n// Re-export types for convenience\nexport type { ButtonConfig as FloatingBarActionConfig };\nexport type FloatingBarDeleteConfig = TFloatingBar[\"deleteConfig\"];\nexport type FloatingBarProps = TFloatingBar;\n\n// Legacy type exports for backwards compatibility\nexport type FloatingBarSize = \"small\" | \"medium\" | \"large\";\nexport type FloatingBarPosition = \"top\" | \"bottom\";\nexport type FloatingBarTheme = \"primary\" | \"dark\" | \"light\";\n"],"names":["CloseIcon","size","fill","className","jsx","DropdownArrowIcon","FloatingBar","props","show","isFlowDashboard","onClose","actionItems","selectedItemsCount","deleteConfig","showActionBg","t","useTranslation","showDropdown","setShowDropdown","useState","showButtons","setShowButtons","containerRef","useRef","actionContainerRef","useEffect","observer","containerWidth","deleteButtonConfig","DeleteIcon","dropDownItems","button","index","OptionButton","motion","cn","jsxs","IconButton","Typography","Dropdown","trigger","Tooltip"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FloatingBar.cjs.js","sources":["../../../src/components/floating-bar/FloatingBar.tsx"],"sourcesContent":["import { Dropdown } from \"antd\";\nimport cn from \"classnames\";\nimport { motion } from \"framer-motion\";\nimport { useEffect, useRef, useState, type FC, type ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Typography } from \"../data-display/typography/Typography\";\nimport { OptionButton } from \"../buttons/option-button/OptionButton\";\nimport IconButton from \"../button/IconButton\";\nimport Tooltip from \"../tooltip/Tooltip\";\nimport { DeleteIcon } from \"../icon\";\n\n/**\n * Close icon component\n */\nconst CloseIcon: FC<{ size?: number; fill?: string; className?: string }> = ({\n size = 24,\n fill = \"currentColor\",\n className,\n}) => (\n <svg\n className={className}\n width={size}\n height={size}\n viewBox=\"0 0 20 20\"\n fill={fill}\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z\" />\n </svg>\n);\n\n/**\n * Dropdown arrow icon component\n */\nconst DropdownArrowIcon: FC<{ fill?: string; className?: string }> = ({\n fill = \"#cccccc\",\n className,\n}) => (\n <svg\n height=\"20\"\n width=\"20\"\n viewBox=\"0 0 20 20\"\n focusable=\"false\"\n className={className}\n >\n <path\n fill={fill}\n d=\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\"\n />\n </svg>\n);\n\n/**\n * Configuration for action buttons in the floating bar\n */\nexport type ButtonConfig = {\n /** Button label text */\n label?: string;\n /** Icon element to display */\n icon: ReactNode;\n /** Click handler for the action */\n onClick?: () => void;\n /** Icon for dropdown mode */\n dropdownIcon?: ReactNode;\n /** Whether the action is visible */\n visible?: boolean;\n /** Whether the action is disabled */\n disabled?: boolean;\n /** Tooltip text */\n tooltip?: string;\n /** Whether to hide the label text */\n hideLabel?: boolean;\n /** Action type */\n type?: \"button\" | \"dropdown\";\n /** Dropdown trigger mode */\n dropdownTrigger?: \"click\" | \"hover\";\n /** Dropdown menu items */\n dropdownItems?: Array<{\n label: ReactNode;\n key: string;\n disabled?: boolean;\n }>;\n};\n\n/**\n * Props for the FloatingBar component\n */\nexport type TFloatingBar = {\n /** Whether the floating bar is visible */\n show?: boolean;\n /** Close handler */\n onClose: () => void;\n /** Whether this is used in flow dashboard layout */\n isFlowDashboard?: boolean;\n /** Array of action configurations */\n actionItems: ButtonConfig[];\n /** Number of selected items */\n selectedItemsCount?: number;\n /** Delete action configuration */\n deleteConfig?: {\n label?: string;\n disabled?: boolean;\n onClick?: () => void;\n };\n /** Whether to show action background */\n showActionBg?: boolean;\n};\n\n/**\n * FloatingBar component provides a floating action bar for bulk operations.\n * Drop-in replacement matching the lax-web-portal implementation.\n *\n * @example\n * ```tsx\n * <FloatingBar\n * show={selectedItems.length > 0}\n * onClose={() => setSelectedItems([])}\n * selectedItemsCount={selectedItems.length}\n * actionItems={[\n * {\n * label: \"Edit\",\n * icon: <EditIcon size={16} />,\n * onClick: handleEdit,\n * },\n * {\n * label: \"Archive\",\n * icon: <ArchiveIcon size={16} />,\n * onClick: handleArchive,\n * },\n * ]}\n * deleteConfig={{\n * label: \"Delete\",\n * onClick: handleDelete,\n * }}\n * />\n * ```\n */\nexport const FloatingBar: FC<TFloatingBar> = (props) => {\n const {\n show,\n isFlowDashboard,\n onClose,\n actionItems,\n selectedItemsCount,\n deleteConfig,\n showActionBg,\n } = props;\n\n const { t } = useTranslation();\n const [showDropdown, setShowDropdown] = useState<boolean>(false);\n const [showButtons, setShowButtons] = useState<boolean>(true);\n\n const containerRef = useRef<HTMLDivElement>(null);\n const actionContainerRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const observer = new ResizeObserver(() => {\n if (containerRef.current && actionContainerRef.current) {\n const containerWidth = containerRef.current.scrollWidth - 100;\n const totalActionItemsWidth = actionItems.length * 180 + 100;\n if (totalActionItemsWidth > containerWidth) {\n setShowButtons(false);\n } else {\n setShowButtons(true);\n }\n }\n });\n\n if (containerRef.current) {\n observer.observe(containerRef.current);\n }\n\n return () => {\n if (containerRef.current) {\n observer.unobserve(containerRef.current);\n }\n };\n });\n\n const deleteButtonConfig = {\n label: t(\"Delete\"),\n icon: <DeleteIcon className=\"text-error-700 w-icon h-icon\" />,\n color: \"text-error-700 dark:text-error-700\",\n onClick: deleteConfig?.onClick,\n ...deleteConfig,\n };\n\n const dropDownItems = actionItems\n .filter((button) => button.visible !== false)\n .map((button, index) => ({\n key: index,\n label: (\n <OptionButton\n icon={button.dropdownIcon}\n text={button?.label || \"\"}\n onClick={button.onClick}\n className=\"font-inter text-base font-medium text-black-900 dark:text-black-200 gap-1.5\"\n />\n ),\n children: button.dropdownItems,\n disabled: false,\n }));\n\n return !show ? null : (\n <motion.div\n initial={{ y: 20, opacity: 0 }}\n animate={{ y: 0, opacity: 1 }}\n exit={{ y: 20, opacity: 0 }}\n transition={{\n duration: 0.2,\n ease: [0.4, 0, 0.2, 1],\n opacity: { duration: 0.15 },\n }}\n ref={containerRef}\n className={cn(\"h-[48px]\", isFlowDashboard ? \"ml-60 w-1/2\" : \"w-full\")}\n >\n <div\n className={cn(\n \"h-[48px] border-y border-neutral-900 dark:border-[#0d1014] py-[6px] px-[12px] text-white bg-neutral-900 dark:bg-black-900 flex justify-between items-center\"\n )}\n >\n <div className=\"flex items-center gap-[12px]\">\n <div className=\"flex items-center gap-[8px]\">\n <IconButton\n tooltip=\"Close\"\n variant=\"ghost\"\n onClick={onClose}\n className=\"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200\"\n >\n <CloseIcon size={16} />\n </IconButton>\n <div className=\"w-px h-[14px] rounded-[1px] bg-neutral-700 dark:bg-[#1d242c]\" />\n </div>\n <div className=\"flex items-center gap-[6px]\">\n <span className=\"inline-flex items-center justify-center min-w-[20px] h-[16px] px-[8px] rounded-[9px] border text-[12px] leading-[18px] font-normal text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-[rgba(0,50,95,0.3)] border-primary-200 dark:border-primary-800\">\n {selectedItemsCount || 0}\n </span>\n <Typography\n size=\"extra-small\"\n appearance=\"custom\"\n className=\"text-white dark:text-neutral-50\"\n >\n {t(\"Selected\")}\n </Typography>\n </div>\n </div>\n <div\n ref={actionContainerRef}\n className={cn(\n \"h-[36px] flex items-center rounded-[43px] font-inter\",\n showActionBg\n ? \"bg-neutral-800 dark:bg-black-800 px-[10px] rounded-[43px]\"\n : \"\"\n )}\n >\n {showButtons ? (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.2 }}\n className=\"flex items-center h-[36px] bg-neutral-800 dark:bg-black-800 px-[10px] rounded-[43px]\"\n >\n {actionItems.map(\n (button, index) =>\n button.visible !== false && (\n <div key={index}>\n {button.type === \"dropdown\" ? (\n <Dropdown\n menu={{\n items: button.dropdownItems,\n }}\n trigger={[button.dropdownTrigger || \"click\"]}\n overlayClassName=\"!min-w-[148px]\"\n placement=\"bottomRight\"\n getPopupContainer={(trigger) =>\n trigger.parentElement as HTMLElement\n }\n open={showDropdown}\n onOpenChange={setShowDropdown}\n >\n <button\n key={index}\n id={`btn-floating-bar-${button.label}`}\n onClick={button.onClick}\n disabled={button.disabled}\n className={cn(\n !button?.label\n ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n : \"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] text-white dark:text-neutral-50 hover:opacity-80 hover:scale-105 transition-all duration-200 bg-transparent\",\n button?.hideLabel && \"!p-1.5\",\n (button.label === \"Delete\" ||\n button.label === \"Remove\" ||\n button.label === \"Delete user\" ||\n button.label === \"Move to trash\" ||\n button.label === \"Delete Permanently\") &&\n \"!text-error-700\",\n button.disabled && \"opacity-70\"\n )}\n >\n <Tooltip\n hideTooltip={!button.tooltip}\n title={button.tooltip}\n className=\"flex items-center\"\n >\n {button.icon}\n {!button?.hideLabel && button.label && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={\"text-inherit\"}\n appearance=\"custom\"\n >\n {button.label}\n </Typography>\n )}\n </Tooltip>\n </button>\n </Dropdown>\n ) : (\n <button\n id={`btn-floating-bar-${button.label}`}\n onClick={button.onClick}\n disabled={button.disabled}\n className={cn(\n !button?.label\n ? \"bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80\"\n : \"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] text-white dark:text-neutral-50 hover:opacity-80 hover:scale-105 transition-all duration-200 bg-transparent\",\n button?.hideLabel && \"!p-1.5\",\n (button.label === \"Delete\" ||\n button.label === \"Remove\" ||\n button.label === \"Move to trash\" ||\n button.label === \"Delete Permanently\") &&\n \"!text-error-700\",\n button.disabled && \"opacity-70\"\n )}\n >\n <Tooltip\n hideTooltip={!button.tooltip}\n title={button.tooltip}\n className=\"flex items-center\"\n >\n {button.icon}\n\n {!button?.hideLabel && button.label && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={\"text-inherit\"}\n appearance=\"custom\"\n >\n {button.label}\n </Typography>\n )}\n </Tooltip>\n </button>\n )}\n </div>\n )\n )}\n {deleteConfig ? (\n <button\n id={`btn-floating-bar-${deleteButtonConfig.label}`}\n onClick={deleteButtonConfig.onClick}\n disabled={deleteButtonConfig.disabled}\n className={cn(\n \"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200\",\n deleteButtonConfig.disabled && \"opacity-70\"\n )}\n >\n {deleteButtonConfig.icon}\n <Typography\n size=\"small\"\n variant=\"medium\"\n className=\"text-error-700\"\n appearance=\"custom\"\n >\n {deleteButtonConfig.label}\n </Typography>\n </button>\n ) : null}\n </motion.div>\n ) : (\n <motion.div\n initial={{ opacity: 0 }}\n animate={{ opacity: 1 }}\n transition={{ duration: 0.2 }}\n className=\"minw-[150px] p-1.5 flex items-center\"\n >\n <Dropdown\n menu={{\n items: dropDownItems,\n }}\n trigger={[\"click\"]}\n overlayClassName=\"!min-w-[148px]\"\n placement=\"bottomRight\"\n getPopupContainer={(trigger) =>\n trigger.parentElement as HTMLElement\n }\n open={showDropdown}\n onOpenChange={setShowDropdown}\n >\n <button\n id={`btn-floating-bar-actions`}\n disabled={dropDownItems.length === 0}\n className={cn(\n \"flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200\",\n dropDownItems.length === 0 &&\n \"opacity-60 hover:scale-100 hover:opacity-60\"\n )}\n type=\"button\"\n >\n <Typography\n size=\"small\"\n variant=\"medium\"\n className=\"text-white\"\n >\n {t(\"Actions\")}\n </Typography>\n <DropdownArrowIcon\n fill=\"#FFFFFF\"\n className=\"w-[16px] h-[16px]\"\n />\n </button>\n </Dropdown>\n {deleteConfig ? (\n <button\n id={`btn-floating-bar-${deleteButtonConfig.label}`}\n onClick={deleteButtonConfig.onClick}\n disabled={deleteButtonConfig.disabled}\n className={cn(\n \"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200\",\n deleteButtonConfig.disabled && \"opacity-70\"\n )}\n type=\"button\"\n >\n {deleteButtonConfig.icon}\n <Typography\n size=\"small\"\n variant=\"medium\"\n className=\"text-error-700\"\n appearance=\"custom\"\n >\n {deleteButtonConfig.label}\n </Typography>\n </button>\n ) : null}\n </motion.div>\n )}\n </div>\n </div>\n </motion.div>\n );\n};\n\nFloatingBar.displayName = \"FloatingBar\";\n\n// Re-export types for convenience\nexport type { ButtonConfig as FloatingBarActionConfig };\nexport type FloatingBarDeleteConfig = TFloatingBar[\"deleteConfig\"];\nexport type FloatingBarProps = TFloatingBar;\n\n// Legacy type exports for backwards compatibility\nexport type FloatingBarSize = \"small\" | \"medium\" | \"large\";\nexport type FloatingBarPosition = \"top\" | \"bottom\";\nexport type FloatingBarTheme = \"primary\" | \"dark\" | \"light\";\n"],"names":["CloseIcon","size","fill","className","jsx","DropdownArrowIcon","FloatingBar","props","show","isFlowDashboard","onClose","actionItems","selectedItemsCount","deleteConfig","showActionBg","t","useTranslation","showDropdown","setShowDropdown","useState","showButtons","setShowButtons","containerRef","useRef","actionContainerRef","useEffect","observer","containerWidth","deleteButtonConfig","DeleteIcon","dropDownItems","button","index","OptionButton","motion","cn","jsxs","IconButton","Typography","Dropdown","trigger","Tooltip"],"mappings":"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"}
|
|
@@ -1,31 +1,31 @@
|
|
|
1
1
|
import { jsx as a, jsxs as i } from "react/jsx-runtime";
|
|
2
|
-
import { Dropdown as
|
|
3
|
-
import
|
|
4
|
-
import { motion as
|
|
5
|
-
import { useState as
|
|
2
|
+
import { Dropdown as w } from "antd";
|
|
3
|
+
import t from "../../_virtual/index.es.js";
|
|
4
|
+
import { motion as f } from "framer-motion";
|
|
5
|
+
import { useState as C, useRef as k, useEffect as F } from "react";
|
|
6
6
|
import { useTranslation as z } from "react-i18next";
|
|
7
7
|
import { Typography as s } from "../data-display/typography/Typography.es.js";
|
|
8
8
|
import { OptionButton as R } from "../buttons/option-button/OptionButton.es.js";
|
|
9
9
|
import T from "../button/IconButton.es.js";
|
|
10
10
|
import N from "../tooltip/Tooltip.es.js";
|
|
11
11
|
import { DeleteIcon as A } from "../icon/icons.generated.es.js";
|
|
12
|
-
const
|
|
13
|
-
size:
|
|
12
|
+
const j = ({
|
|
13
|
+
size: n = 24,
|
|
14
14
|
fill: c = "currentColor",
|
|
15
|
-
className:
|
|
15
|
+
className: d
|
|
16
16
|
}) => /* @__PURE__ */ a(
|
|
17
17
|
"svg",
|
|
18
18
|
{
|
|
19
|
-
className:
|
|
20
|
-
width:
|
|
21
|
-
height:
|
|
19
|
+
className: d,
|
|
20
|
+
width: n,
|
|
21
|
+
height: n,
|
|
22
22
|
viewBox: "0 0 20 20",
|
|
23
23
|
fill: c,
|
|
24
24
|
xmlns: "http://www.w3.org/2000/svg",
|
|
25
25
|
children: /* @__PURE__ */ a("path", { d: "M10.0002 11.1666L5.91683 15.2499C5.76405 15.4027 5.56961 15.4791 5.3335 15.4791C5.09739 15.4791 4.90294 15.4027 4.75016 15.2499C4.59738 15.0971 4.521 14.9027 4.521 14.6666C4.521 14.4305 4.59738 14.236 4.75016 14.0833L8.8335 9.99992L4.75016 5.91659C4.59738 5.76381 4.521 5.56936 4.521 5.33325C4.521 5.09714 4.59738 4.9027 4.75016 4.74992C4.90294 4.59714 5.09739 4.52075 5.3335 4.52075C5.56961 4.52075 5.76405 4.59714 5.91683 4.74992L10.0002 8.83325L14.0835 4.74992C14.2363 4.59714 14.4307 4.52075 14.6668 4.52075C14.9029 4.52075 15.0974 4.59714 15.2502 4.74992C15.4029 4.9027 15.4793 5.09714 15.4793 5.33325C15.4793 5.56936 15.4029 5.76381 15.2502 5.91659L11.1668 9.99992L15.2502 14.0833C15.4029 14.236 15.4793 14.4305 15.4793 14.6666C15.4793 14.9027 15.4029 15.0971 15.2502 15.2499C15.0974 15.4027 14.9029 15.4791 14.6668 15.4791C14.4307 15.4791 14.2363 15.4027 14.0835 15.2499L10.0002 11.1666Z" })
|
|
26
26
|
}
|
|
27
|
-
),
|
|
28
|
-
fill:
|
|
27
|
+
), M = ({
|
|
28
|
+
fill: n = "#cccccc",
|
|
29
29
|
className: c
|
|
30
30
|
}) => /* @__PURE__ */ a(
|
|
31
31
|
"svg",
|
|
@@ -38,39 +38,39 @@ const M = ({
|
|
|
38
38
|
children: /* @__PURE__ */ a(
|
|
39
39
|
"path",
|
|
40
40
|
{
|
|
41
|
-
fill:
|
|
41
|
+
fill: n,
|
|
42
42
|
d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
|
|
43
43
|
}
|
|
44
44
|
)
|
|
45
45
|
}
|
|
46
|
-
),
|
|
46
|
+
), O = (n) => {
|
|
47
47
|
const {
|
|
48
48
|
show: c,
|
|
49
|
-
isFlowDashboard:
|
|
49
|
+
isFlowDashboard: d,
|
|
50
50
|
onClose: D,
|
|
51
51
|
actionItems: m,
|
|
52
52
|
selectedItemsCount: I,
|
|
53
|
-
deleteConfig:
|
|
53
|
+
deleteConfig: p,
|
|
54
54
|
showActionBg: L
|
|
55
|
-
} =
|
|
55
|
+
} = n, { t: h } = z(), [b, g] = C(!1), [B, v] = C(!0), r = k(null), y = k(null);
|
|
56
56
|
F(() => {
|
|
57
57
|
const e = new ResizeObserver(() => {
|
|
58
|
-
if (
|
|
59
|
-
const
|
|
60
|
-
m.length * 180 + 100 >
|
|
58
|
+
if (r.current && y.current) {
|
|
59
|
+
const o = r.current.scrollWidth - 100;
|
|
60
|
+
m.length * 180 + 100 > o ? v(!1) : v(!0);
|
|
61
61
|
}
|
|
62
62
|
});
|
|
63
|
-
return
|
|
64
|
-
|
|
63
|
+
return r.current && e.observe(r.current), () => {
|
|
64
|
+
r.current && e.unobserve(r.current);
|
|
65
65
|
};
|
|
66
66
|
});
|
|
67
67
|
const l = {
|
|
68
68
|
label: h("Delete"),
|
|
69
|
-
icon: /* @__PURE__ */ a(A, { className: "text-error-
|
|
70
|
-
onClick:
|
|
71
|
-
...
|
|
72
|
-
},
|
|
73
|
-
key:
|
|
69
|
+
icon: /* @__PURE__ */ a(A, { className: "text-error-700 w-icon h-icon" }),
|
|
70
|
+
onClick: p?.onClick,
|
|
71
|
+
...p
|
|
72
|
+
}, x = m.filter((e) => e.visible !== !1).map((e, o) => ({
|
|
73
|
+
key: o,
|
|
74
74
|
label: /* @__PURE__ */ a(
|
|
75
75
|
R,
|
|
76
76
|
{
|
|
@@ -84,7 +84,7 @@ const M = ({
|
|
|
84
84
|
disabled: !1
|
|
85
85
|
}));
|
|
86
86
|
return c ? /* @__PURE__ */ a(
|
|
87
|
-
|
|
87
|
+
f.div,
|
|
88
88
|
{
|
|
89
89
|
initial: { y: 20, opacity: 0 },
|
|
90
90
|
animate: { y: 0, opacity: 1 },
|
|
@@ -94,34 +94,37 @@ const M = ({
|
|
|
94
94
|
ease: [0.4, 0, 0.2, 1],
|
|
95
95
|
opacity: { duration: 0.15 }
|
|
96
96
|
},
|
|
97
|
-
ref:
|
|
98
|
-
className:
|
|
97
|
+
ref: r,
|
|
98
|
+
className: t("h-[48px]", d ? "ml-60 w-1/2" : "w-full"),
|
|
99
99
|
children: /* @__PURE__ */ i(
|
|
100
100
|
"div",
|
|
101
101
|
{
|
|
102
|
-
className:
|
|
103
|
-
"h-[
|
|
102
|
+
className: t(
|
|
103
|
+
"h-[48px] border-y border-neutral-900 dark:border-[#0d1014] py-[6px] px-[12px] text-white bg-neutral-900 dark:bg-black-900 flex justify-between items-center"
|
|
104
104
|
),
|
|
105
105
|
children: [
|
|
106
|
-
/* @__PURE__ */ i("div", { className: "flex items-center", children: [
|
|
107
|
-
/* @__PURE__ */
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
/* @__PURE__ */ a("
|
|
106
|
+
/* @__PURE__ */ i("div", { className: "flex items-center gap-[12px]", children: [
|
|
107
|
+
/* @__PURE__ */ i("div", { className: "flex items-center gap-[8px]", children: [
|
|
108
|
+
/* @__PURE__ */ a(
|
|
109
|
+
T,
|
|
110
|
+
{
|
|
111
|
+
tooltip: "Close",
|
|
112
|
+
variant: "ghost",
|
|
113
|
+
onClick: D,
|
|
114
|
+
className: "!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",
|
|
115
|
+
children: /* @__PURE__ */ a(j, { size: 16 })
|
|
116
|
+
}
|
|
117
|
+
),
|
|
118
|
+
/* @__PURE__ */ a("div", { className: "w-px h-[14px] rounded-[1px] bg-neutral-700 dark:bg-[#1d242c]" })
|
|
119
|
+
] }),
|
|
120
|
+
/* @__PURE__ */ i("div", { className: "flex items-center gap-[6px]", children: [
|
|
121
|
+
/* @__PURE__ */ a("span", { className: "inline-flex items-center justify-center min-w-[20px] h-[16px] px-[8px] rounded-[9px] border text-[12px] leading-[18px] font-normal text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-[rgba(0,50,95,0.3)] border-primary-200 dark:border-primary-800", children: I || 0 }),
|
|
119
122
|
/* @__PURE__ */ a(
|
|
120
123
|
s,
|
|
121
124
|
{
|
|
122
125
|
size: "extra-small",
|
|
123
126
|
appearance: "custom",
|
|
124
|
-
className: "text-white",
|
|
127
|
+
className: "text-white dark:text-neutral-50",
|
|
125
128
|
children: h("Selected")
|
|
126
129
|
}
|
|
127
130
|
)
|
|
@@ -130,22 +133,22 @@ const M = ({
|
|
|
130
133
|
/* @__PURE__ */ a(
|
|
131
134
|
"div",
|
|
132
135
|
{
|
|
133
|
-
ref:
|
|
134
|
-
className:
|
|
135
|
-
"h-[36px] flex items-center rounded-
|
|
136
|
-
L ? "bg-
|
|
136
|
+
ref: y,
|
|
137
|
+
className: t(
|
|
138
|
+
"h-[36px] flex items-center rounded-[43px] font-inter",
|
|
139
|
+
L ? "bg-neutral-800 dark:bg-black-800 px-[10px] rounded-[43px]" : ""
|
|
137
140
|
),
|
|
138
141
|
children: B ? /* @__PURE__ */ i(
|
|
139
|
-
|
|
142
|
+
f.div,
|
|
140
143
|
{
|
|
141
144
|
initial: { opacity: 0 },
|
|
142
145
|
animate: { opacity: 1 },
|
|
143
146
|
transition: { duration: 0.2 },
|
|
144
|
-
className: "flex bg-
|
|
147
|
+
className: "flex items-center h-[36px] bg-neutral-800 dark:bg-black-800 px-[10px] rounded-[43px]",
|
|
145
148
|
children: [
|
|
146
149
|
m.map(
|
|
147
|
-
(e,
|
|
148
|
-
|
|
150
|
+
(e, o) => e.visible !== !1 && /* @__PURE__ */ a("div", { children: e.type === "dropdown" ? /* @__PURE__ */ a(
|
|
151
|
+
w,
|
|
149
152
|
{
|
|
150
153
|
menu: {
|
|
151
154
|
items: e.dropdownItems
|
|
@@ -153,7 +156,7 @@ const M = ({
|
|
|
153
156
|
trigger: [e.dropdownTrigger || "click"],
|
|
154
157
|
overlayClassName: "!min-w-[148px]",
|
|
155
158
|
placement: "bottomRight",
|
|
156
|
-
getPopupContainer: (
|
|
159
|
+
getPopupContainer: (u) => u.parentElement,
|
|
157
160
|
open: b,
|
|
158
161
|
onOpenChange: g,
|
|
159
162
|
children: /* @__PURE__ */ a(
|
|
@@ -162,10 +165,10 @@ const M = ({
|
|
|
162
165
|
id: `btn-floating-bar-${e.label}`,
|
|
163
166
|
onClick: e.onClick,
|
|
164
167
|
disabled: e.disabled,
|
|
165
|
-
className:
|
|
166
|
-
e?.label ? "flex items-center
|
|
168
|
+
className: t(
|
|
169
|
+
e?.label ? "flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] text-white dark:text-neutral-50 hover:opacity-80 hover:scale-105 transition-all duration-200 bg-transparent" : "bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",
|
|
167
170
|
e?.hideLabel && "!p-1.5",
|
|
168
|
-
(e.label === "Delete" || e.label === "Remove" || e.label === "Delete user" || e.label === "Move to trash" || e.label === "Delete Permanently") && "!text-error-
|
|
171
|
+
(e.label === "Delete" || e.label === "Remove" || e.label === "Delete user" || e.label === "Move to trash" || e.label === "Delete Permanently") && "!text-error-700",
|
|
169
172
|
e.disabled && "opacity-70"
|
|
170
173
|
),
|
|
171
174
|
children: /* @__PURE__ */ i(
|
|
@@ -181,7 +184,7 @@ const M = ({
|
|
|
181
184
|
{
|
|
182
185
|
size: "small",
|
|
183
186
|
variant: "medium",
|
|
184
|
-
className: "text-inherit
|
|
187
|
+
className: "text-inherit",
|
|
185
188
|
appearance: "custom",
|
|
186
189
|
children: e.label
|
|
187
190
|
}
|
|
@@ -190,7 +193,7 @@ const M = ({
|
|
|
190
193
|
}
|
|
191
194
|
)
|
|
192
195
|
},
|
|
193
|
-
|
|
196
|
+
o
|
|
194
197
|
)
|
|
195
198
|
}
|
|
196
199
|
) : /* @__PURE__ */ a(
|
|
@@ -199,10 +202,10 @@ const M = ({
|
|
|
199
202
|
id: `btn-floating-bar-${e.label}`,
|
|
200
203
|
onClick: e.onClick,
|
|
201
204
|
disabled: e.disabled,
|
|
202
|
-
className:
|
|
203
|
-
e?.label ? "flex items-center
|
|
205
|
+
className: t(
|
|
206
|
+
e?.label ? "flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] text-white dark:text-neutral-50 hover:opacity-80 hover:scale-105 transition-all duration-200 bg-transparent" : "bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",
|
|
204
207
|
e?.hideLabel && "!p-1.5",
|
|
205
|
-
(e.label === "Delete" || e.label === "Remove" || e.label === "Move to trash" || e.label === "Delete Permanently") && "!text-error-
|
|
208
|
+
(e.label === "Delete" || e.label === "Remove" || e.label === "Move to trash" || e.label === "Delete Permanently") && "!text-error-700",
|
|
206
209
|
e.disabled && "opacity-70"
|
|
207
210
|
),
|
|
208
211
|
children: /* @__PURE__ */ i(
|
|
@@ -218,7 +221,7 @@ const M = ({
|
|
|
218
221
|
{
|
|
219
222
|
size: "small",
|
|
220
223
|
variant: "medium",
|
|
221
|
-
className: "text-inherit
|
|
224
|
+
className: "text-inherit",
|
|
222
225
|
appearance: "custom",
|
|
223
226
|
children: e.label
|
|
224
227
|
}
|
|
@@ -227,16 +230,16 @@ const M = ({
|
|
|
227
230
|
}
|
|
228
231
|
)
|
|
229
232
|
}
|
|
230
|
-
) },
|
|
233
|
+
) }, o)
|
|
231
234
|
),
|
|
232
|
-
|
|
235
|
+
p ? /* @__PURE__ */ i(
|
|
233
236
|
"button",
|
|
234
237
|
{
|
|
235
238
|
id: `btn-floating-bar-${l.label}`,
|
|
236
239
|
onClick: l.onClick,
|
|
237
240
|
disabled: l.disabled,
|
|
238
|
-
className:
|
|
239
|
-
"flex items-center gap-
|
|
241
|
+
className: t(
|
|
242
|
+
"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200",
|
|
240
243
|
l.disabled && "opacity-70"
|
|
241
244
|
),
|
|
242
245
|
children: [
|
|
@@ -246,7 +249,7 @@ const M = ({
|
|
|
246
249
|
{
|
|
247
250
|
size: "small",
|
|
248
251
|
variant: "medium",
|
|
249
|
-
className: "text-error-
|
|
252
|
+
className: "text-error-700",
|
|
250
253
|
appearance: "custom",
|
|
251
254
|
children: l.label
|
|
252
255
|
}
|
|
@@ -257,7 +260,7 @@ const M = ({
|
|
|
257
260
|
]
|
|
258
261
|
}
|
|
259
262
|
) : /* @__PURE__ */ i(
|
|
260
|
-
|
|
263
|
+
f.div,
|
|
261
264
|
{
|
|
262
265
|
initial: { opacity: 0 },
|
|
263
266
|
animate: { opacity: 1 },
|
|
@@ -265,10 +268,10 @@ const M = ({
|
|
|
265
268
|
className: "minw-[150px] p-1.5 flex items-center",
|
|
266
269
|
children: [
|
|
267
270
|
/* @__PURE__ */ a(
|
|
268
|
-
|
|
271
|
+
w,
|
|
269
272
|
{
|
|
270
273
|
menu: {
|
|
271
|
-
items:
|
|
274
|
+
items: x
|
|
272
275
|
},
|
|
273
276
|
trigger: ["click"],
|
|
274
277
|
overlayClassName: "!min-w-[148px]",
|
|
@@ -280,10 +283,10 @@ const M = ({
|
|
|
280
283
|
"button",
|
|
281
284
|
{
|
|
282
285
|
id: "btn-floating-bar-actions",
|
|
283
|
-
disabled:
|
|
284
|
-
className:
|
|
286
|
+
disabled: x.length === 0,
|
|
287
|
+
className: t(
|
|
285
288
|
"flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-primary-700 hover:scale-105 hover:opacity-80 transition-all duration-200",
|
|
286
|
-
|
|
289
|
+
x.length === 0 && "opacity-60 hover:scale-100 hover:opacity-60"
|
|
287
290
|
),
|
|
288
291
|
type: "button",
|
|
289
292
|
children: [
|
|
@@ -297,7 +300,7 @@ const M = ({
|
|
|
297
300
|
}
|
|
298
301
|
),
|
|
299
302
|
/* @__PURE__ */ a(
|
|
300
|
-
|
|
303
|
+
M,
|
|
301
304
|
{
|
|
302
305
|
fill: "#FFFFFF",
|
|
303
306
|
className: "w-[16px] h-[16px]"
|
|
@@ -308,14 +311,14 @@ const M = ({
|
|
|
308
311
|
)
|
|
309
312
|
}
|
|
310
313
|
),
|
|
311
|
-
|
|
314
|
+
p ? /* @__PURE__ */ i(
|
|
312
315
|
"button",
|
|
313
316
|
{
|
|
314
317
|
id: `btn-floating-bar-${l.label}`,
|
|
315
318
|
onClick: l.onClick,
|
|
316
319
|
disabled: l.disabled,
|
|
317
|
-
className:
|
|
318
|
-
"flex items-center gap-
|
|
320
|
+
className: t(
|
|
321
|
+
"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200",
|
|
319
322
|
l.disabled && "opacity-70"
|
|
320
323
|
),
|
|
321
324
|
type: "button",
|
|
@@ -326,7 +329,7 @@ const M = ({
|
|
|
326
329
|
{
|
|
327
330
|
size: "small",
|
|
328
331
|
variant: "medium",
|
|
329
|
-
className: "text-error-
|
|
332
|
+
className: "text-error-700",
|
|
330
333
|
appearance: "custom",
|
|
331
334
|
children: l.label
|
|
332
335
|
}
|
|
@@ -345,8 +348,8 @@ const M = ({
|
|
|
345
348
|
}
|
|
346
349
|
) : null;
|
|
347
350
|
};
|
|
348
|
-
|
|
351
|
+
O.displayName = "FloatingBar";
|
|
349
352
|
export {
|
|
350
|
-
|
|
353
|
+
O as FloatingBar
|
|
351
354
|
};
|
|
352
355
|
//# sourceMappingURL=FloatingBar.es.js.map
|