@lax-wp/design-system 0.14.26 → 0.14.29
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/data-display/infinite-table/body/cell/DataCell.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/body/cell/DataCell.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/cell/DataCell.es.js +1 -1
- package/dist/components/data-display/infinite-table/body/cell/DataCell.es.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/rows/row.cjs.js +1 -1
- package/dist/components/data-display/infinite-table/body/rows/row.cjs.js.map +1 -1
- package/dist/components/data-display/infinite-table/body/rows/row.es.js +1 -1
- package/dist/components/data-display/infinite-table/body/rows/row.es.js.map +1 -1
- package/dist/components/data-display/infinite-table/types.d.ts +1 -1
- 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 +61 -61
- package/dist/components/floating-bar/FloatingBar.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
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),C=require("antd"),i=require("../../_virtual/index.cjs.js"),g=require("framer-motion"),d=require("react"),q=require("react-i18next"),s=require("../data-display/typography/Typography.cjs.js"),D=require("../buttons/option-button/OptionButton.cjs.js"),F=require("../button/IconButton.cjs.js"),j=require("../tooltip/Tooltip.cjs.js"),R=require("../icon/icons.generated.cjs.js"),z=({size:n=24,fill:o="currentColor",className:m})=>t.jsx("svg",{className:m,width:n,height:n,viewBox:"0 0 20 20",fill:o,xmlns:"http://www.w3.org/2000/svg",children:t.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"})}),A=({fill:n="#cccccc",className:o})=>t.jsx("svg",{height:"20",width:"20",viewBox:"0 0 20 20",focusable:"false",className:o,children:t.jsx("path",{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"})}),k=n=>{const{show:o,isFlowDashboard:m,onClose:N,actionItems:p,selectedItemsCount:I,deleteConfig:c,showActionBg:S}=n,{t:h}=q.useTranslation(),[b,y]=d.useState(!1),[B,f]=d.useState(!0),l=d.useRef(null),v=d.useRef(null);d.useEffect(()=>{const e=new ResizeObserver(()=>{if(l.current&&v.current){const r=l.current.scrollWidth-100;p.length*180+100>r?f(!1):f(!0)}});return l.current&&e.observe(l.current),()=>{l.current&&e.unobserve(l.current)}});const a={label:h("Delete"),icon:t.jsx(R.DeleteIcon,{className:"text-error-700 w-icon h-icon"}),onClick:c?.onClick,...c},x=e=>{const r=e.label?.toLowerCase()??"";return r.includes("delete")||r==="remove"||r==="move to trash"},L=[...p].sort((e,r)=>Number(x(e))-Number(x(r))),T=p.some(e=>e.visible!==!1)||!!c,u=p.filter(e=>e.visible!==!1).map((e,r)=>({key:r,label:t.jsx(D.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?t.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:l,className:i("h-[36px] mb-4",m?"ml-60 w-1/2":"w-full"),children:t.jsxs("div",{className:i("h-[36px] border-y border-neutral-900 dark:border-[#0d1014 px-[12px] text-white bg-neutral-900 dark:bg-black-900 flex justify-between items-center"),children:[t.jsxs("div",{className:"flex items-center gap-[12px]",children:[t.jsxs("div",{className:"flex items-center gap-[8px]",children:[t.jsx(F,{tooltip:"Close",variant:"ghost",onClick:N,className:"!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",children:t.jsx(z,{size:16})}),t.jsx("div",{className:"w-px h-[14px] rounded-[1px] bg-neutral-700 dark:bg-[#1d242c]"})]}),t.jsxs("div",{className:"flex items-center gap-[6px]",children:[t.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:I||0}),t.jsx(s.Typography,{size:"extra-small",appearance:"custom",className:"text-white dark:text-neutral-50",children:h("Selected")})]})]}),T?t.jsx("div",{ref:v,className:i("h-[36px] flex items-center font-inter bg-neutral-800 dark:bg-black-800 pl-[10px] rounded-[43px]"),children:B?t.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:[L.map((e,r)=>e.visible!==!1&&t.jsx("div",{children:e.type==="dropdown"?t.jsx(C.Dropdown,{menu:{items:e.dropdownItems},trigger:[e.dropdownTrigger||"click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:w=>w.parentElement,open:b,onOpenChange:y,children:t.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(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",x(e)&&"!text-error-500 dark:!text-error-700",e.disabled&&"opacity-70"),children:t.jsxs(j,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center gap-1.5",children:[e.icon,!e?.hideLabel&&e.label&&t.jsx(s.Typography,{size:"small",variant:"medium",className:"text-inherit !text-error-500 dark:!text-error-700",appearance:"custom",children:e.label})]})},r)}):t.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(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",x(e)&&"!text-error-500 dark:!text-error-700",e.disabled&&"opacity-70"),children:t.jsxs(j,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center gap-1.5",children:[e.icon,!e?.hideLabel&&e.label&&t.jsx(s.Typography,{size:"small",variant:"medium",className:"text-inherit",appearance:"custom",children:e.label})]})})},r)),c?t.jsxs("button",{id:`btn-floating-bar-${a.label}`,onClick:a.onClick,disabled:a.disabled,className:i("flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200",a.disabled&&"opacity-70"),children:[a.icon,t.jsx(s.Typography,{size:"small",variant:"medium",className:"text-error-700",appearance:"custom",children:a.label})]}):null]}):t.jsxs(g.motion.div,{initial:{opacity:0},animate:{opacity:1},transition:{duration:.2},className:"minw-[150px] p-1.5 flex items-center",children:[t.jsx(C.Dropdown,{menu:{items:u},trigger:["click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:e=>e.parentElement,open:b,onOpenChange:y,children:t.jsxs("button",{id:"btn-floating-bar-actions",disabled:u.length===0,className:i("flex items-center gap-1.5 px-2 py-1 w-22 h-7 rounded-full bg-[#34405473]/45 dark:bg-black-700 hover:scale-105 hover:opacity-80 transition-all duration-200",u.length===0&&"opacity-60 hover:scale-100 hover:opacity-60"),type:"button",children:[t.jsx(s.Typography,{size:"small",variant:"medium",className:"text-white",children:h("Actions")}),t.jsx(A,{fill:"#FFFFFF",className:"w-[16px] h-[16px]"})]})}),c?t.jsxs("button",{id:`btn-floating-bar-${a.label}`,onClick:a.onClick,disabled:a.disabled,className:i("flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200",a.disabled&&"opacity-70"),type:"button",children:[a.icon,t.jsx(s.Typography,{size:"small",variant:"medium",className:"text-error-700",appearance:"custom",children:a.label})]}):null]})}):null]})}):null};k.displayName="FloatingBar";exports.FloatingBar=k;
|
|
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-700 w-icon h-icon\" />,\n color: \"text-error-700 dark:text-error-700\",\n onClick: deleteConfig?.onClick,\n ...deleteConfig,\n };\n\n /** Whether a button represents a destructive/delete action */\n const isDeleteAction = (button: ButtonConfig) => {\n const label = button.label?.toLowerCase() ?? \"\";\n return (\n label.includes(\"delete\") ||\n label === \"remove\" ||\n label === \"move to trash\"\n );\n };\n\n /** Delete actions are always displayed last (on the right) */\n const sortedActionItems = [...actionItems].sort(\n (a, b) => Number(isDeleteAction(a)) - Number(isDeleteAction(b))\n );\n\n /** Whether the action area has anything to render — avoids an empty pill */\n const hasActions =\n actionItems.some((button) => button.visible !== false) || Boolean(deleteConfig);\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-[36px] mb-4\", isFlowDashboard ? \"ml-60 w-1/2\" : \"w-full\")}\n >\n <div\n className={cn(\n \"border-y border-neutral-900 dark:border-[#0d1014 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 {hasActions ? (\n <div\n ref={actionContainerRef}\n className={cn(\n \"h-[36px] flex items-center font-inter bg-neutral-800 dark:bg-black-800 pl-[10px] rounded-[43px]\"\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 {sortedActionItems.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 isDeleteAction(button) && \"!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 gap-1.5\"\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 isDeleteAction(button) && \"!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 gap-1.5\"\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-[#34405473]/45 dark:bg-black-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 ) : null}\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","isDeleteAction","button","label","sortedActionItems","a","b","hasActions","dropDownItems","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 /** Whether a button represents a destructive/delete action */\n const isDeleteAction = (button: ButtonConfig) => {\n const label = button.label?.toLowerCase() ?? \"\";\n return (\n label.includes(\"delete\") ||\n label === \"remove\" ||\n label === \"move to trash\"\n );\n };\n\n /** Delete actions are always displayed last (on the right) */\n const sortedActionItems = [...actionItems].sort(\n (a, b) => Number(isDeleteAction(a)) - Number(isDeleteAction(b))\n );\n\n /** Whether the action area has anything to render — avoids an empty pill */\n const hasActions =\n actionItems.some((button) => button.visible !== false) || Boolean(deleteConfig);\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-[36px] mb-4\", isFlowDashboard ? \"ml-60 w-1/2\" : \"w-full\")}\n >\n <div\n className={cn(\n \"h-[36px] border-y border-neutral-900 dark:border-[#0d1014 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 {hasActions ? (\n <div\n ref={actionContainerRef}\n className={cn(\n \"h-[36px] flex items-center font-inter bg-neutral-800 dark:bg-black-800 pl-[10px] rounded-[43px]\"\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 {sortedActionItems.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 isDeleteAction(button) && \"!text-error-500 dark:!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 gap-1.5\"\n >\n {button.icon}\n {!button?.hideLabel && button.label && (\n <Typography\n size=\"small\"\n variant=\"medium\"\n className={\"text-inherit !text-error-500 dark:!text-error-700\"}\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 isDeleteAction(button) && \"!text-error-500 dark:!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 gap-1.5\"\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-[#34405473]/45 dark:bg-black-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 ) : null}\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","isDeleteAction","button","label","sortedActionItems","a","b","hasActions","dropDownItems","index","OptionButton","motion","cn","jsxs","IconButton","Typography","Dropdown","trigger","Tooltip"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as t, jsxs as i } from "react/jsx-runtime";
|
|
2
2
|
import { Dropdown as C } from "antd";
|
|
3
3
|
import l from "../../_virtual/index.es.js";
|
|
4
4
|
import { motion as f } from "framer-motion";
|
|
@@ -13,7 +13,7 @@ const S = ({
|
|
|
13
13
|
size: n = 24,
|
|
14
14
|
fill: c = "currentColor",
|
|
15
15
|
className: h
|
|
16
|
-
}) => /* @__PURE__ */
|
|
16
|
+
}) => /* @__PURE__ */ t(
|
|
17
17
|
"svg",
|
|
18
18
|
{
|
|
19
19
|
className: h,
|
|
@@ -22,12 +22,12 @@ const S = ({
|
|
|
22
22
|
viewBox: "0 0 20 20",
|
|
23
23
|
fill: c,
|
|
24
24
|
xmlns: "http://www.w3.org/2000/svg",
|
|
25
|
-
children: /* @__PURE__ */
|
|
25
|
+
children: /* @__PURE__ */ t("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
27
|
), W = ({
|
|
28
28
|
fill: n = "#cccccc",
|
|
29
29
|
className: c
|
|
30
|
-
}) => /* @__PURE__ */
|
|
30
|
+
}) => /* @__PURE__ */ t(
|
|
31
31
|
"svg",
|
|
32
32
|
{
|
|
33
33
|
height: "20",
|
|
@@ -35,7 +35,7 @@ const S = ({
|
|
|
35
35
|
viewBox: "0 0 20 20",
|
|
36
36
|
focusable: "false",
|
|
37
37
|
className: c,
|
|
38
|
-
children: /* @__PURE__ */
|
|
38
|
+
children: /* @__PURE__ */ t(
|
|
39
39
|
"path",
|
|
40
40
|
{
|
|
41
41
|
fill: n,
|
|
@@ -56,27 +56,27 @@ const S = ({
|
|
|
56
56
|
A(() => {
|
|
57
57
|
const e = new ResizeObserver(() => {
|
|
58
58
|
if (o.current && y.current) {
|
|
59
|
-
const
|
|
60
|
-
d.length * 180 + 100 >
|
|
59
|
+
const r = o.current.scrollWidth - 100;
|
|
60
|
+
d.length * 180 + 100 > r ? v(!1) : v(!0);
|
|
61
61
|
}
|
|
62
62
|
});
|
|
63
63
|
return o.current && e.observe(o.current), () => {
|
|
64
64
|
o.current && e.unobserve(o.current);
|
|
65
65
|
};
|
|
66
66
|
});
|
|
67
|
-
const
|
|
67
|
+
const a = {
|
|
68
68
|
label: x("Delete"),
|
|
69
|
-
icon: /* @__PURE__ */
|
|
69
|
+
icon: /* @__PURE__ */ t(O, { className: "text-error-700 w-icon h-icon" }),
|
|
70
70
|
onClick: p?.onClick,
|
|
71
71
|
...p
|
|
72
72
|
}, m = (e) => {
|
|
73
|
-
const
|
|
74
|
-
return
|
|
73
|
+
const r = e.label?.toLowerCase() ?? "";
|
|
74
|
+
return r.includes("delete") || r === "remove" || r === "move to trash";
|
|
75
75
|
}, F = [...d].sort(
|
|
76
|
-
(e,
|
|
77
|
-
), z = d.some((e) => e.visible !== !1) || !!p, b = d.filter((e) => e.visible !== !1).map((e,
|
|
78
|
-
key:
|
|
79
|
-
label: /* @__PURE__ */
|
|
76
|
+
(e, r) => Number(m(e)) - Number(m(r))
|
|
77
|
+
), z = d.some((e) => e.visible !== !1) || !!p, b = d.filter((e) => e.visible !== !1).map((e, r) => ({
|
|
78
|
+
key: r,
|
|
79
|
+
label: /* @__PURE__ */ t(
|
|
80
80
|
T,
|
|
81
81
|
{
|
|
82
82
|
icon: e.dropdownIcon,
|
|
@@ -88,7 +88,7 @@ const S = ({
|
|
|
88
88
|
children: e.dropdownItems,
|
|
89
89
|
disabled: !1
|
|
90
90
|
}));
|
|
91
|
-
return c ? /* @__PURE__ */
|
|
91
|
+
return c ? /* @__PURE__ */ t(
|
|
92
92
|
f.div,
|
|
93
93
|
{
|
|
94
94
|
initial: { y: 20, opacity: 0 },
|
|
@@ -101,30 +101,30 @@ const S = ({
|
|
|
101
101
|
},
|
|
102
102
|
ref: o,
|
|
103
103
|
className: l("h-[36px] mb-4", h ? "ml-60 w-1/2" : "w-full"),
|
|
104
|
-
children: /* @__PURE__ */
|
|
104
|
+
children: /* @__PURE__ */ i(
|
|
105
105
|
"div",
|
|
106
106
|
{
|
|
107
107
|
className: l(
|
|
108
|
-
"border-y border-neutral-900 dark:border-[#0d1014 px-[12px] text-white bg-neutral-900 dark:bg-black-900 flex justify-between items-center"
|
|
108
|
+
"h-[36px] border-y border-neutral-900 dark:border-[#0d1014 px-[12px] text-white bg-neutral-900 dark:bg-black-900 flex justify-between items-center"
|
|
109
109
|
),
|
|
110
110
|
children: [
|
|
111
|
-
/* @__PURE__ */
|
|
112
|
-
/* @__PURE__ */
|
|
113
|
-
/* @__PURE__ */
|
|
111
|
+
/* @__PURE__ */ i("div", { className: "flex items-center gap-[12px]", children: [
|
|
112
|
+
/* @__PURE__ */ i("div", { className: "flex items-center gap-[8px]", children: [
|
|
113
|
+
/* @__PURE__ */ t(
|
|
114
114
|
j,
|
|
115
115
|
{
|
|
116
116
|
tooltip: "Close",
|
|
117
117
|
variant: "ghost",
|
|
118
118
|
onClick: L,
|
|
119
119
|
className: "!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",
|
|
120
|
-
children: /* @__PURE__ */
|
|
120
|
+
children: /* @__PURE__ */ t(S, { size: 16 })
|
|
121
121
|
}
|
|
122
122
|
),
|
|
123
|
-
/* @__PURE__ */
|
|
123
|
+
/* @__PURE__ */ t("div", { className: "w-px h-[14px] rounded-[1px] bg-neutral-700 dark:bg-[#1d242c]" })
|
|
124
124
|
] }),
|
|
125
|
-
/* @__PURE__ */
|
|
126
|
-
/* @__PURE__ */
|
|
127
|
-
/* @__PURE__ */
|
|
125
|
+
/* @__PURE__ */ i("div", { className: "flex items-center gap-[6px]", children: [
|
|
126
|
+
/* @__PURE__ */ t("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: B || 0 }),
|
|
127
|
+
/* @__PURE__ */ t(
|
|
128
128
|
s,
|
|
129
129
|
{
|
|
130
130
|
size: "extra-small",
|
|
@@ -135,14 +135,14 @@ const S = ({
|
|
|
135
135
|
)
|
|
136
136
|
] })
|
|
137
137
|
] }),
|
|
138
|
-
z ? /* @__PURE__ */
|
|
138
|
+
z ? /* @__PURE__ */ t(
|
|
139
139
|
"div",
|
|
140
140
|
{
|
|
141
141
|
ref: y,
|
|
142
142
|
className: l(
|
|
143
143
|
"h-[36px] flex items-center font-inter bg-neutral-800 dark:bg-black-800 pl-[10px] rounded-[43px]"
|
|
144
144
|
),
|
|
145
|
-
children: D ? /* @__PURE__ */
|
|
145
|
+
children: D ? /* @__PURE__ */ i(
|
|
146
146
|
f.div,
|
|
147
147
|
{
|
|
148
148
|
initial: { opacity: 0 },
|
|
@@ -151,7 +151,7 @@ const S = ({
|
|
|
151
151
|
className: "flex items-center h-[36px] bg-neutral-800 dark:bg-black-800 px-[10px] rounded-[43px]",
|
|
152
152
|
children: [
|
|
153
153
|
F.map(
|
|
154
|
-
(e,
|
|
154
|
+
(e, r) => e.visible !== !1 && /* @__PURE__ */ t("div", { children: e.type === "dropdown" ? /* @__PURE__ */ t(
|
|
155
155
|
C,
|
|
156
156
|
{
|
|
157
157
|
menu: {
|
|
@@ -163,7 +163,7 @@ const S = ({
|
|
|
163
163
|
getPopupContainer: (w) => w.parentElement,
|
|
164
164
|
open: g,
|
|
165
165
|
onOpenChange: u,
|
|
166
|
-
children: /* @__PURE__ */
|
|
166
|
+
children: /* @__PURE__ */ t(
|
|
167
167
|
"button",
|
|
168
168
|
{
|
|
169
169
|
id: `btn-floating-bar-${e.label}`,
|
|
@@ -172,10 +172,10 @@ const S = ({
|
|
|
172
172
|
className: l(
|
|
173
173
|
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",
|
|
174
174
|
e?.hideLabel && "!p-1.5",
|
|
175
|
-
m(e) && "!text-error-700",
|
|
175
|
+
m(e) && "!text-error-500 dark:!text-error-700",
|
|
176
176
|
e.disabled && "opacity-70"
|
|
177
177
|
),
|
|
178
|
-
children: /* @__PURE__ */
|
|
178
|
+
children: /* @__PURE__ */ i(
|
|
179
179
|
I,
|
|
180
180
|
{
|
|
181
181
|
hideTooltip: !e.tooltip,
|
|
@@ -183,12 +183,12 @@ const S = ({
|
|
|
183
183
|
className: "flex items-center gap-1.5",
|
|
184
184
|
children: [
|
|
185
185
|
e.icon,
|
|
186
|
-
!e?.hideLabel && e.label && /* @__PURE__ */
|
|
186
|
+
!e?.hideLabel && e.label && /* @__PURE__ */ t(
|
|
187
187
|
s,
|
|
188
188
|
{
|
|
189
189
|
size: "small",
|
|
190
190
|
variant: "medium",
|
|
191
|
-
className: "text-inherit",
|
|
191
|
+
className: "text-inherit !text-error-500 dark:!text-error-700",
|
|
192
192
|
appearance: "custom",
|
|
193
193
|
children: e.label
|
|
194
194
|
}
|
|
@@ -197,10 +197,10 @@ const S = ({
|
|
|
197
197
|
}
|
|
198
198
|
)
|
|
199
199
|
},
|
|
200
|
-
|
|
200
|
+
r
|
|
201
201
|
)
|
|
202
202
|
}
|
|
203
|
-
) : /* @__PURE__ */
|
|
203
|
+
) : /* @__PURE__ */ t(
|
|
204
204
|
"button",
|
|
205
205
|
{
|
|
206
206
|
id: `btn-floating-bar-${e.label}`,
|
|
@@ -209,10 +209,10 @@ const S = ({
|
|
|
209
209
|
className: l(
|
|
210
210
|
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",
|
|
211
211
|
e?.hideLabel && "!p-1.5",
|
|
212
|
-
m(e) && "!text-error-700",
|
|
212
|
+
m(e) && "!text-error-500 dark:!text-error-700",
|
|
213
213
|
e.disabled && "opacity-70"
|
|
214
214
|
),
|
|
215
|
-
children: /* @__PURE__ */
|
|
215
|
+
children: /* @__PURE__ */ i(
|
|
216
216
|
I,
|
|
217
217
|
{
|
|
218
218
|
hideTooltip: !e.tooltip,
|
|
@@ -220,7 +220,7 @@ const S = ({
|
|
|
220
220
|
className: "flex items-center gap-1.5",
|
|
221
221
|
children: [
|
|
222
222
|
e.icon,
|
|
223
|
-
!e?.hideLabel && e.label && /* @__PURE__ */
|
|
223
|
+
!e?.hideLabel && e.label && /* @__PURE__ */ t(
|
|
224
224
|
s,
|
|
225
225
|
{
|
|
226
226
|
size: "small",
|
|
@@ -234,28 +234,28 @@ const S = ({
|
|
|
234
234
|
}
|
|
235
235
|
)
|
|
236
236
|
}
|
|
237
|
-
) },
|
|
237
|
+
) }, r)
|
|
238
238
|
),
|
|
239
|
-
p ? /* @__PURE__ */
|
|
239
|
+
p ? /* @__PURE__ */ i(
|
|
240
240
|
"button",
|
|
241
241
|
{
|
|
242
|
-
id: `btn-floating-bar-${
|
|
243
|
-
onClick:
|
|
244
|
-
disabled:
|
|
242
|
+
id: `btn-floating-bar-${a.label}`,
|
|
243
|
+
onClick: a.onClick,
|
|
244
|
+
disabled: a.disabled,
|
|
245
245
|
className: l(
|
|
246
246
|
"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200",
|
|
247
|
-
|
|
247
|
+
a.disabled && "opacity-70"
|
|
248
248
|
),
|
|
249
249
|
children: [
|
|
250
|
-
|
|
251
|
-
/* @__PURE__ */
|
|
250
|
+
a.icon,
|
|
251
|
+
/* @__PURE__ */ t(
|
|
252
252
|
s,
|
|
253
253
|
{
|
|
254
254
|
size: "small",
|
|
255
255
|
variant: "medium",
|
|
256
256
|
className: "text-error-700",
|
|
257
257
|
appearance: "custom",
|
|
258
|
-
children:
|
|
258
|
+
children: a.label
|
|
259
259
|
}
|
|
260
260
|
)
|
|
261
261
|
]
|
|
@@ -263,7 +263,7 @@ const S = ({
|
|
|
263
263
|
) : null
|
|
264
264
|
]
|
|
265
265
|
}
|
|
266
|
-
) : /* @__PURE__ */
|
|
266
|
+
) : /* @__PURE__ */ i(
|
|
267
267
|
f.div,
|
|
268
268
|
{
|
|
269
269
|
initial: { opacity: 0 },
|
|
@@ -271,7 +271,7 @@ const S = ({
|
|
|
271
271
|
transition: { duration: 0.2 },
|
|
272
272
|
className: "minw-[150px] p-1.5 flex items-center",
|
|
273
273
|
children: [
|
|
274
|
-
/* @__PURE__ */
|
|
274
|
+
/* @__PURE__ */ t(
|
|
275
275
|
C,
|
|
276
276
|
{
|
|
277
277
|
menu: {
|
|
@@ -283,7 +283,7 @@ const S = ({
|
|
|
283
283
|
getPopupContainer: (e) => e.parentElement,
|
|
284
284
|
open: g,
|
|
285
285
|
onOpenChange: u,
|
|
286
|
-
children: /* @__PURE__ */
|
|
286
|
+
children: /* @__PURE__ */ i(
|
|
287
287
|
"button",
|
|
288
288
|
{
|
|
289
289
|
id: "btn-floating-bar-actions",
|
|
@@ -294,7 +294,7 @@ const S = ({
|
|
|
294
294
|
),
|
|
295
295
|
type: "button",
|
|
296
296
|
children: [
|
|
297
|
-
/* @__PURE__ */
|
|
297
|
+
/* @__PURE__ */ t(
|
|
298
298
|
s,
|
|
299
299
|
{
|
|
300
300
|
size: "small",
|
|
@@ -303,7 +303,7 @@ const S = ({
|
|
|
303
303
|
children: x("Actions")
|
|
304
304
|
}
|
|
305
305
|
),
|
|
306
|
-
/* @__PURE__ */
|
|
306
|
+
/* @__PURE__ */ t(
|
|
307
307
|
W,
|
|
308
308
|
{
|
|
309
309
|
fill: "#FFFFFF",
|
|
@@ -315,27 +315,27 @@ const S = ({
|
|
|
315
315
|
)
|
|
316
316
|
}
|
|
317
317
|
),
|
|
318
|
-
p ? /* @__PURE__ */
|
|
318
|
+
p ? /* @__PURE__ */ i(
|
|
319
319
|
"button",
|
|
320
320
|
{
|
|
321
|
-
id: `btn-floating-bar-${
|
|
322
|
-
onClick:
|
|
323
|
-
disabled:
|
|
321
|
+
id: `btn-floating-bar-${a.label}`,
|
|
322
|
+
onClick: a.onClick,
|
|
323
|
+
disabled: a.disabled,
|
|
324
324
|
className: l(
|
|
325
325
|
"flex items-center gap-[6px] pl-[8px] pr-[12px] py-[4px] rounded-[6px] hover:scale-105 hover:opacity-80 transition-all duration-200",
|
|
326
|
-
|
|
326
|
+
a.disabled && "opacity-70"
|
|
327
327
|
),
|
|
328
328
|
type: "button",
|
|
329
329
|
children: [
|
|
330
|
-
|
|
331
|
-
/* @__PURE__ */
|
|
330
|
+
a.icon,
|
|
331
|
+
/* @__PURE__ */ t(
|
|
332
332
|
s,
|
|
333
333
|
{
|
|
334
334
|
size: "small",
|
|
335
335
|
variant: "medium",
|
|
336
336
|
className: "text-error-700",
|
|
337
337
|
appearance: "custom",
|
|
338
|
-
children:
|
|
338
|
+
children: a.label
|
|
339
339
|
}
|
|
340
340
|
)
|
|
341
341
|
]
|