@lax-wp/design-system 0.13.46 → 0.13.47

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.
Files changed (17) hide show
  1. package/dist/components/floating-bar/FloatingBar.cjs.js +1 -1
  2. package/dist/components/floating-bar/FloatingBar.cjs.js.map +1 -1
  3. package/dist/components/floating-bar/FloatingBar.es.js +12 -12
  4. package/dist/components/floating-bar/FloatingBar.es.js.map +1 -1
  5. package/dist/components/forms/date-range/DateRange.cjs.js +7 -7
  6. package/dist/components/forms/date-range/DateRange.cjs.js.map +1 -1
  7. package/dist/components/forms/date-range/DateRange.es.js +41 -40
  8. package/dist/components/forms/date-range/DateRange.es.js.map +1 -1
  9. package/dist/components/navigation/tabs/TabOptions.cjs.js +1 -1
  10. package/dist/components/navigation/tabs/TabOptions.cjs.js.map +1 -1
  11. package/dist/components/navigation/tabs/TabOptions.es.js +2 -2
  12. package/dist/components/navigation/tabs/TabOptions.es.js.map +1 -1
  13. package/dist/components/navigation/tabs/Tabs.cjs.js +1 -1
  14. package/dist/components/navigation/tabs/Tabs.cjs.js.map +1 -1
  15. package/dist/components/navigation/tabs/Tabs.es.js +66 -66
  16. package/dist/components/navigation/tabs/Tabs.es.js.map +1 -1
  17. package/package.json +1 -1
package/dist/components/floating-bar/FloatingBar.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("antd"),i=require("../../_virtual/index.cjs.js"),g=require("framer-motion"),c=require("react"),T=require("react-i18next"),n=require("../data-display/typography/Typography.cjs.js"),B=require("../buttons/option-button/OptionButton.cjs.js"),L=require("../button/IconButton.cjs.js"),w=require("../tooltip/Tooltip.cjs.js"),q=require("../icon/icons.generated.cjs.js"),R=({size:r=24,fill:o="currentColor",className:p})=>a.jsx("svg",{className:p,width:r,height:r,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:r="#cccccc",className:o})=>a.jsx("svg",{height:"20",width:"20",viewBox:"0 0 20 20",focusable:"false",className:o,children:a.jsx("path",{fill:r,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=r=>{const{show:o,isFlowDashboard:p,onClose:k,actionItems:m,selectedItemsCount:N,deleteConfig:d,showActionBg:D}=r,{t:h}=T.useTranslation(),[y,u]=c.useState(!1),[I,b]=c.useState(!0),t=c.useRef(null),f=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(()=>{if(t.current&&f.current){const s=t.current.scrollWidth-100;m.length*180+100>s?b(!1):b(!0)}});return t.current&&e.observe(t.current),()=>{t.current&&e.unobserve(t.current)}});const l={label:h("Delete"),icon:a.jsx(q.DeleteIcon,{size:16,className:"text-error-500"}),onClick:d?.onClick,...d},x=m.filter(e=>e.visible!==!1).map((e,s)=>({key:s,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:t,className:i("h-[40px]",p?"ml-60 w-1/2":"w-full"),children:a.jsxs("div",{className:i("h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center"),children:[a.jsxs("div",{className:"flex items-center",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:20})}),a.jsxs("div",{className:"flex items-center gap-1.5 ml-2",children:[a.jsx("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",children:N||0}),a.jsx(n.Typography,{size:"extra-small",appearance:"custom",className:"text-white",children:h("Selected")})]})]}),a.jsx("div",{ref:f,className:i("h-[36px] flex items-center rounded-full font-inter",D?"bg-primary-900 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 bg-primary-800 dark:bg-black-800 px-4 rounded-full",children:[m.map((e,s)=>e.visible!==!1&&a.jsx("div",{children:e.type==="dropdown"?a.jsx(C.Dropdown,{menu:{items:e.dropdownItems},trigger:[e.dropdownTrigger||"click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:v=>v.parentElement,open:y,onOpenChange:u,children:a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"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":"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-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})},s)}):a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"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":"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 Permanently")&&"!text-error-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})})},s)),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.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(C.Dropdown,{menu:{items:x},trigger:["click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:e=>e.parentElement,open:y,onOpenChange:u,children:a.jsxs("button",{id:"btn-floating-bar-actions",disabled:x.length===0,className:i("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",x.length===0&&"opacity-60 hover:scale-100 hover:opacity-60"),type:"button",children:[a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-white",children:h("Actions")}),a.jsx(F,{fill:"#FFFFFF",className:"w-[16px] h-[16px]"})]})}),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),type:"button",children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]})})]})}):null};j.displayName="FloatingBar";exports.FloatingBar=j;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),C=require("antd"),i=require("../../_virtual/index.cjs.js"),g=require("framer-motion"),c=require("react"),T=require("react-i18next"),n=require("../data-display/typography/Typography.cjs.js"),B=require("../buttons/option-button/OptionButton.cjs.js"),L=require("../button/IconButton.cjs.js"),w=require("../tooltip/Tooltip.cjs.js"),q=require("../icon/icons.generated.cjs.js"),R=({size:r=24,fill:o="currentColor",className:p})=>a.jsx("svg",{className:p,width:r,height:r,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:r="#cccccc",className:o})=>a.jsx("svg",{height:"20",width:"20",viewBox:"0 0 20 20",focusable:"false",className:o,children:a.jsx("path",{fill:r,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=r=>{const{show:o,isFlowDashboard:p,onClose:k,actionItems:m,selectedItemsCount:N,deleteConfig:d,showActionBg:D}=r,{t:h}=T.useTranslation(),[y,u]=c.useState(!1),[I,b]=c.useState(!0),t=c.useRef(null),f=c.useRef(null);c.useEffect(()=>{const e=new ResizeObserver(()=>{if(t.current&&f.current){const s=t.current.scrollWidth-100;m.length*180+100>s?b(!1):b(!0)}});return t.current&&e.observe(t.current),()=>{t.current&&e.unobserve(t.current)}});const l={label:h("Delete"),icon:a.jsx(q.DeleteIcon,{size:16,className:"text-error-500"}),onClick:d?.onClick,...d},x=m.filter(e=>e.visible!==!1).map((e,s)=>({key:s,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:t,className:i("h-[40px]",p?"ml-60 w-1/2":"w-full"),children:a.jsxs("div",{className:i("h-[40px] border py-1.5 px-2 text-white bg-primary-800 dark:bg-black-700 flex justify-between items-center"),children:[a.jsxs("div",{className:"flex items-center",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:20})}),a.jsxs("div",{className:"flex items-center gap-1.5 ml-2",children:[a.jsx("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",children:N||0}),a.jsx(n.Typography,{size:"extra-small",appearance:"custom",className:"text-white",children:h("Selected")})]})]}),a.jsx("div",{ref:f,className:i("h-[36px] flex items-center rounded-full font-inter",D?"bg-primary-900 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 bg-primary-800 dark:bg-black-800 px-4 rounded-full",children:[m.map((e,s)=>e.visible!==!1&&a.jsx("div",{children:e.type==="dropdown"?a.jsx(C.Dropdown,{menu:{items:e.dropdownItems},trigger:[e.dropdownTrigger||"click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:v=>v.parentElement,open:y,onOpenChange:u,children:a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"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":"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-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})},s)}):a.jsx("button",{id:`btn-floating-bar-${e.label}`,onClick:e.onClick,disabled:e.disabled,className:i(e?.label?"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":"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-500",e.disabled&&"opacity-70"),children:a.jsxs(w,{hideTooltip:!e.tooltip,title:e.tooltip,className:"flex items-center",children:[e.icon,!e?.hideLabel&&e.label&&a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-inherit ml-1.5",appearance:"custom",children:e.label})]})})},s)),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.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(C.Dropdown,{menu:{items:x},trigger:["click"],overlayClassName:"!min-w-[148px]",placement:"bottomRight",getPopupContainer:e=>e.parentElement,open:y,onOpenChange:u,children:a.jsxs("button",{id:"btn-floating-bar-actions",disabled:x.length===0,className:i("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",x.length===0&&"opacity-60 hover:scale-100 hover:opacity-60"),type:"button",children:[a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-white",children:h("Actions")}),a.jsx(F,{fill:"#FFFFFF",className:"w-[16px] h-[16px]"})]})}),d?a.jsxs("button",{id:`btn-floating-bar-${l.label}`,onClick:l.onClick,disabled:l.disabled,className:i("flex items-center gap-1.5 py-1 pr-3 pl-2 rounded-md hover:scale-105 hover:opacity-80 transition-all duration-200",l.disabled&&"opacity-70"),type:"button",children:[l.icon,a.jsx(n.Typography,{size:"small",variant:"medium",className:"text-error-500",appearance:"custom",children:l.label})]}):null]})})]})}):null};j.displayName="FloatingBar";exports.FloatingBar=j;
2
2
  //# sourceMappingURL=FloatingBar.cjs.js.map
package/dist/components/floating-bar/FloatingBar.cjs.js.map CHANGED
@@ -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 size={16} className=\"text-error-500\" />,\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 === \"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 size={16} className=\"text-error-500\" />,\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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"}
package/dist/components/floating-bar/FloatingBar.es.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as a, jsxs as i } from "react/jsx-runtime";
2
- import { Dropdown as C } from "antd";
2
+ import { Dropdown as u } from "antd";
3
3
  import r from "../../_virtual/index.es.js";
4
4
  import { motion as x } from "framer-motion";
5
5
  import { useState as w, useRef as k, useEffect as z } from "react";
@@ -9,7 +9,7 @@ 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 O = ({
12
+ const M = ({
13
13
  size: o = 24,
14
14
  fill: c = "currentColor",
15
15
  className: p
@@ -24,7 +24,7 @@ const O = ({
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
- ), P = ({
27
+ ), O = ({
28
28
  fill: o = "#cccccc",
29
29
  className: c
30
30
  }) => /* @__PURE__ */ a(
@@ -43,7 +43,7 @@ const O = ({
43
43
  }
44
44
  )
45
45
  }
46
- ), S = (o) => {
46
+ ), P = (o) => {
47
47
  const {
48
48
  show: c,
49
49
  isFlowDashboard: p,
@@ -111,7 +111,7 @@ const O = ({
111
111
  variant: "ghost",
112
112
  onClick: D,
113
113
  className: "!p-0 text-white hover:opacity-80 hover:rotate-90 transition-all duration-200",
114
- children: /* @__PURE__ */ a(O, { size: 20 })
114
+ children: /* @__PURE__ */ a(M, { size: 20 })
115
115
  }
116
116
  ),
117
117
  /* @__PURE__ */ i("div", { className: "flex items-center gap-1.5 ml-2", children: [
@@ -145,7 +145,7 @@ const O = ({
145
145
  children: [
146
146
  m.map(
147
147
  (e, n) => e.visible !== !1 && /* @__PURE__ */ a("div", { children: e.type === "dropdown" ? /* @__PURE__ */ a(
148
- C,
148
+ u,
149
149
  {
150
150
  menu: {
151
151
  items: e.dropdownItems
@@ -153,7 +153,7 @@ const O = ({
153
153
  trigger: [e.dropdownTrigger || "click"],
154
154
  overlayClassName: "!min-w-[148px]",
155
155
  placement: "bottomRight",
156
- getPopupContainer: (u) => u.parentElement,
156
+ getPopupContainer: (C) => C.parentElement,
157
157
  open: b,
158
158
  onOpenChange: g,
159
159
  children: /* @__PURE__ */ a(
@@ -202,7 +202,7 @@ const O = ({
202
202
  className: r(
203
203
  e?.label ? "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" : "bg-transparent p-1.5 rounded-xl transition-all duration-200 hover:scale-105 hover:opacity-80",
204
204
  e?.hideLabel && "!p-1.5",
205
- (e.label === "Delete" || e.label === "Remove" || e.label === "Delete Permanently") && "!text-error-500",
205
+ (e.label === "Delete" || e.label === "Remove" || e.label === "Move to trash" || e.label === "Delete Permanently") && "!text-error-500",
206
206
  e.disabled && "opacity-70"
207
207
  ),
208
208
  children: /* @__PURE__ */ i(
@@ -265,7 +265,7 @@ const O = ({
265
265
  className: "minw-[150px] p-1.5 flex items-center",
266
266
  children: [
267
267
  /* @__PURE__ */ a(
268
- C,
268
+ u,
269
269
  {
270
270
  menu: {
271
271
  items: f
@@ -297,7 +297,7 @@ const O = ({
297
297
  }
298
298
  ),
299
299
  /* @__PURE__ */ a(
300
- P,
300
+ O,
301
301
  {
302
302
  fill: "#FFFFFF",
303
303
  className: "w-[16px] h-[16px]"
@@ -345,8 +345,8 @@ const O = ({
345
345
  }
346
346
  ) : null;
347
347
  };
348
- S.displayName = "FloatingBar";
348
+ P.displayName = "FloatingBar";
349
349
  export {
350
- S as FloatingBar
350
+ P as FloatingBar
351
351
  };
352
352
  //# sourceMappingURL=FloatingBar.es.js.map
package/dist/components/floating-bar/FloatingBar.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FloatingBar.es.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 size={16} className=\"text-error-500\" />,\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 === \"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.es.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 size={16} className=\"text-error-500\" />,\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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"}
package/dist/components/forms/date-range/DateRange.cjs.js CHANGED
@@ -1,17 +1,17 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),re=require("antd"),w=require("../../../_virtual/index.cjs.js"),r=require("react"),A=require("dayjs"),ne=require("../../button/IconButton.cjs.js"),se=require("../shared/InputLabel.cjs.js"),p=require("../../icon/icons.generated.cjs.js"),{RangePicker:V}=re.DatePicker,W={ENTER:"Enter"},J=()=>Math.random().toString(36).substring(2,9),ae=(i,s)=>{const k=r.useRef(s);r.useEffect(()=>{k.current=s},[s]),r.useEffect(()=>{const f=c=>k.current(c);return document.addEventListener(i,f),()=>{document.removeEventListener(i,f)}},[i])},Q=({onCalendarChange:i=void 0,onChange:s,required:k,label:f,startDate:c,endDate:d,errorMessage:m,className:M,id:l,disabled:j=!1,dateFormat:v,shouldPopOnParent:B=!0,getPopupContainer:b,maxDateRange:u,open:C,onOpenChange:S,placement:L="bottomLeft",renderAsIconButton:N=!1,iconButtonClassName:X,iconClassName:Z,labelExtra:T,inputEmphasis:F="default"})=>{const q=F==="modified"&&!m,x=F==="deleted"&&!m,R=F==="success"&&!m,P=q?"var(--Warning-50, #FFFAEB)":x?"var(--Error-50, #FEF2F2)":R?"var(--Success-50, #F0FDF4)":"",y=q?"var(--Warning-200, #FEDF89)":x?"var(--Error-200, #FECACA)":R?"var(--Success-200, #BBF7D0)":"",[D,E]=r.useState(!1),[$,z]=r.useState(!1),I=r.useRef(null),K=r.useRef(null),h=r.useRef(!1),g=r.useRef(!1),a=e=>e?A(e):null,O=`date-range-start-${J()}`,Y=`date-range-end-${J()}`,G=()=>{E(!0),setTimeout(()=>{I.current&&I.current.focus()},0)};ae("keydown",e=>{if(e.key===W.ENTER&&document.activeElement instanceof HTMLInputElement){if(document?.activeElement?.id===O){const n=A(document?.activeElement?.value);n.isValid()&&s([n,a(d)])}if(document?.activeElement?.id===Y){const n=A(document?.activeElement?.value);n.isValid()&&s([a(c),n])}}});const _=r.useCallback(e=>{const[n,o]=[a(c),a(d)];return u?n?e.isBefore(n.startOf("day"))||e.isAfter(n.add(u,"day").endOf("day")):o?e.isBefore(o.subtract(u,"day").startOf("day"))||e.isAfter(o.endOf("day")):!1:!1},[c,d,u]),H=r.useCallback(e=>{if(e.key===W.ENTER&&!(N?D:C??$)){e.preventDefault(),e.stopPropagation();const o=e.target.closest("form");if(o){const U=o.querySelector('button[type="submit"]');U?U.click():o.requestSubmit()}}},[N,D,C,$]),ee=r.useCallback(e=>{if(e&&h.current){h.current=!1,E(!1);return}E(e),e||(h.current=!0,requestAnimationFrame(()=>{I.current?.focus(),requestAnimationFrame(()=>{h.current=!1})}))},[]),te=r.useCallback(e=>{if(e&&g.current){g.current=!1,z(!1),S?.(!1);return}z(e),S?.(e),e||(g.current=!0,requestAnimationFrame(()=>{K.current?.focus(),requestAnimationFrame(()=>{g.current=!1})}))},[S]);return N?t.jsxs("div",{id:l,className:M,onKeyDownCapture:H,children:[t.jsx(ne,{onClick:G,disabled:j,variant:"default",className:X,children:t.jsx(p.CalendarMonthIcon,{size:20,className:w("w-5 h-5",Z)})}),t.jsx(V,{ref:I,onChange:e=>{s(e),E(!1)},onCalendarChange:i,value:[a(c),a(d)],id:{start:O,end:Y},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,autoComplete:"off",open:D,onOpenChange:ee,placement:L})]}):t.jsxs("div",{id:l,className:w("flex flex-col",M),onKeyDownCapture:H,children:[(f||T)&&t.jsxs("div",{className:"mb-1 flex items-center justify-between gap-1",children:[t.jsx(se.InputLabel,{label:f||"",required:k||!1}),T]}),(P||y)&&t.jsx("style",{children:`
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),re=require("antd"),Y=require("../../../_virtual/index.cjs.js"),r=require("react"),A=require("dayjs"),ne=require("../../button/IconButton.cjs.js"),se=require("../shared/InputLabel.cjs.js"),p=require("../../icon/icons.generated.cjs.js"),{RangePicker:V}=re.DatePicker,W={ENTER:"Enter"},J=()=>Math.random().toString(36).substring(2,9),ae=(i,s)=>{const k=r.useRef(s);r.useEffect(()=>{k.current=s},[s]),r.useEffect(()=>{const f=o=>k.current(o);return document.addEventListener(i,f),()=>{document.removeEventListener(i,f)}},[i])},Q=({onCalendarChange:i=void 0,onChange:s,required:k,label:f,startDate:o,endDate:d,errorMessage:m,className:M,id:l,disabled:j=!1,dateFormat:v,shouldPopOnParent:B=!0,getPopupContainer:b,maxDateRange:u,open:C,onOpenChange:S,placement:L="bottomLeft",renderAsIconButton:N=!1,iconButtonClassName:X,iconClassName:Z,labelExtra:T,inputEmphasis:F="default"})=>{const q=F==="modified"&&!m,y=F==="deleted"&&!m,R=F==="success"&&!m,P=q?"var(--Warning-50, #FFFAEB)":y?"var(--Error-50, #FEF2F2)":R?"var(--Success-50, #F0FDF4)":"",E=q?"var(--Warning-200, #FEDF89)":y?"var(--Error-200, #FECACA)":R?"var(--Success-200, #BBF7D0)":"",[D,x]=r.useState(!1),[$,z]=r.useState(!1),h=r.useRef(null),K=r.useRef(null),I=r.useRef(!1),g=r.useRef(!1),a=e=>e?A(e):null,w=`date-range-start-${J()}`,O=`date-range-end-${J()}`,G=()=>{x(!0),setTimeout(()=>{h.current&&h.current.focus()},0)};ae("keydown",e=>{if(e.key===W.ENTER&&document.activeElement instanceof HTMLInputElement){if(document?.activeElement?.id===w){const n=A(document?.activeElement?.value);n.isValid()&&s([n,a(d)])}if(document?.activeElement?.id===O){const n=A(document?.activeElement?.value);n.isValid()&&s([a(o),n])}}});const _=r.useCallback(e=>{const[n,c]=[a(o),a(d)];return u?n?e.isBefore(n.startOf("day"))||e.isAfter(n.add(u,"day").endOf("day")):c?e.isBefore(c.subtract(u,"day").startOf("day"))||e.isAfter(c.endOf("day")):!1:!1},[o,d,u]),H=r.useCallback(e=>{if(e.key===W.ENTER&&!(N?D:C??$)){e.preventDefault(),e.stopPropagation();const c=e.target.closest("form");if(c){const U=c.querySelector('button[type="submit"]');U?U.click():c.requestSubmit()}}},[N,D,C,$]),ee=r.useCallback(e=>{if(e&&I.current){I.current=!1,x(!1);return}x(e),e||(I.current=!0,requestAnimationFrame(()=>{h.current?.focus(),requestAnimationFrame(()=>{I.current=!1})}))},[]),te=r.useCallback(e=>{if(e&&g.current){g.current=!1,z(!1),S?.(!1);return}z(e),S?.(e),e||(g.current=!0,requestAnimationFrame(()=>{K.current?.focus(),requestAnimationFrame(()=>{g.current=!1})}))},[S]);return N?t.jsxs("div",{id:l,className:M,onKeyDownCapture:H,children:[t.jsx(ne,{onClick:G,disabled:j,variant:"default",className:X,children:t.jsx(p.CalendarMonthIcon,{size:20,className:Y("w-5 h-5",Z)})}),t.jsx(V,{ref:h,onChange:e=>{s(e),x(!1)},onCalendarChange:i,value:[a(o),a(d)],id:{start:w,end:O},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,autoComplete:"off",open:D,onOpenChange:ee,placement:L,style:{position:"absolute",opacity:0,pointerEvents:"none",width:0,height:0}})]}):t.jsxs("div",{id:l,className:Y("flex flex-col",M),onKeyDownCapture:H,children:[(f||T)&&t.jsxs("div",{className:"mb-1 flex items-center justify-between gap-1",children:[t.jsx(se.InputLabel,{label:f||"",required:k||!1}),T]}),(P||E)&&t.jsx("style",{children:`
2
2
  #${l} .ant-picker {
3
3
  background-color: ${P} !important;
4
- border-color: ${y} !important;
4
+ border-color: ${E} !important;
5
5
  }
6
6
  #${l} .ant-picker:hover {
7
- border-color: ${y} !important;
7
+ border-color: ${E} !important;
8
8
  }
9
9
  #${l} .ant-picker.ant-picker-focused {
10
- border-color: ${y} !important;
11
- box-shadow: 0 0 0 2px ${x?"rgba(254,202,202,0.45)":q?"rgba(254,223,137,0.45)":"rgba(187,247,208,0.45)"} !important;
10
+ border-color: ${E} !important;
11
+ box-shadow: 0 0 0 2px ${y?"rgba(254,202,202,0.45)":q?"rgba(254,223,137,0.45)":"rgba(187,247,208,0.45)"} !important;
12
12
  }
13
13
  #${l} .ant-picker .ant-picker-input > input {
14
- color: ${x?"#475467":R?"#101828":"inherit"};
14
+ color: ${y?"#475467":R?"#101828":"inherit"};
15
15
  }
16
- `}),t.jsx(V,{ref:K,onChange:s,onCalendarChange:i,value:[a(c),a(d)],id:{start:O,end:Y},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,open:C??$,onOpenChange:te,autoComplete:"off",placement:L}),m&&t.jsx("p",{className:w("text-sm font-inter font-normal text-left pt-[6px]","text-red-500"),children:m})]})};Q.displayName="DateRange";exports.DateRange=Q;
16
+ `}),t.jsx(V,{ref:K,onChange:s,onCalendarChange:i,value:[a(o),a(d)],id:{start:w,end:O},allowClear:!0,format:v||"DD MMM, YYYY",separator:t.jsx(p.CheckIndeterminateSmallFilledIcon,{size:20,className:"text-neutral-400 dark:text-gray-100"}),suffixIcon:t.jsx(p.CalendarMonthIcon,{size:14,className:"text-neutral-400 dark:text-gray-100"}),getPopupContainer:b||(B?e=>e.parentElement:()=>document.body),disabled:j,disabledDate:u?_:void 0,open:C??$,onOpenChange:te,autoComplete:"off",placement:L}),m&&t.jsx("p",{className:Y("text-sm font-inter font-normal text-left pt-[6px]","text-red-500"),children:m})]})};Q.displayName="DateRange";exports.DateRange=Q;
17
17
  //# sourceMappingURL=DateRange.cjs.js.map
package/dist/components/forms/date-range/DateRange.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DateRange.cjs.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n eventName: K,\n handler: (event: DocumentEventMap[K]) => void\n) => {\n const savedHandler = useRef(handler);\n\n useEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n useEffect(() => {\n const eventListener = (event: DocumentEventMap[K]) =>\n savedHandler.current(event);\n document.addEventListener(eventName, eventListener);\n return () => {\n document.removeEventListener(eventName, eventListener);\n };\n }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n /** Unique identifier for the date range */\n id: string;\n /** Label text to display above the date range */\n label?: string;\n /** Start date value (ISO string or formatted date string) */\n startDate: string;\n /** End date value (ISO string or formatted date string) */\n endDate: string;\n /** Callback function called when date range changes */\n onChange(data: any): void;\n /** Callback function called when calendar selection changes */\n onCalendarChange?(data: any): void;\n /** Whether the field is required */\n required?: boolean;\n /** Error message to display below the date range */\n errorMessage?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Whether the date range is disabled */\n disabled?: boolean;\n /** Custom date format */\n dateFormat?: string;\n /** Whether popup should render inside parent element */\n shouldPopOnParent?: boolean;\n /** Custom function to get popup container */\n getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n /** Maximum date range in days */\n maxDateRange?: number;\n /** Whether the picker is open */\n open?: boolean;\n /** Callback function called when open state changes */\n onOpenChange?(open: boolean): void;\n /** Placement of the dropdown */\n placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n /** Whether to render as an icon button that triggers the date picker */\n renderAsIconButton?: boolean;\n /** Additional CSS classes for the icon button */\n iconButtonClassName?: string;\n /** Additional CSS classes for the calendar icon inside the button */\n iconClassName?: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n * id=\"event-dates\"\n * label=\"Event Duration\"\n * startDate={startDate}\n * endDate={endDate}\n * onChange={(dates) => {\n * setStartDate(dates[0]);\n * setEndDate(dates[1]);\n * }}\n * required\n * />\n * ```\n */\nexport const DateRange = ({\n onCalendarChange = undefined,\n onChange,\n required,\n label,\n startDate,\n endDate,\n errorMessage,\n className,\n id,\n disabled = false,\n dateFormat,\n shouldPopOnParent = true,\n getPopupContainer: customGetPopupContainer,\n maxDateRange,\n open,\n onOpenChange,\n placement = \"bottomLeft\",\n renderAsIconButton = false,\n iconButtonClassName,\n iconClassName,\n labelExtra,\n inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n const emphasisBg =\n emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n const emphasisBorder =\n emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n const [isOpen, setIsOpen] = useState(false);\n const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n const pickerRef = useRef<any>(null);\n const normalPickerRef = useRef<any>(null);\n const suppressNextIconOpenRef = useRef(false);\n const suppressNextNormalOpenRef = useRef(false);\n\n const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n if (!str) return null;\n return dayjs(str);\n };\n\n const START_ID = `date-range-start-${generateShortUUID()}`;\n const END_ID = `date-range-end-${generateShortUUID()}`;\n\n const handleIconClick = () => {\n setIsOpen(true);\n setTimeout(() => {\n if (pickerRef.current) {\n pickerRef.current.focus();\n }\n }, 0);\n };\n\n useEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === KEYBOARD_KEYS.ENTER &&\n document.activeElement instanceof HTMLInputElement\n ) {\n if (document?.activeElement?.id === START_ID) {\n const date = dayjs(document?.activeElement?.value);\n if (date.isValid()) {\n onChange([date, parseDate(endDate)]);\n }\n }\n if (document?.activeElement?.id === END_ID) {\n const date = dayjs(document?.activeElement?.value);\n if (date.isValid()) {\n onChange([parseDate(startDate), date]);\n }\n }\n }\n });\n\n const disabledDate = useCallback(\n (current: dayjs.Dayjs) => {\n const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n if (!maxDateRange) return false;\n\n if (start) {\n return (\n current.isBefore(start.startOf(\"day\")) ||\n current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n );\n }\n\n if (end) {\n return (\n current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n current.isAfter(end.endOf(\"day\"))\n );\n }\n\n return false;\n },\n [startDate, endDate, maxDateRange]\n );\n\n const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n if (e.key === KEYBOARD_KEYS.ENTER) {\n const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n if (!pickerIsOpen) {\n e.preventDefault();\n e.stopPropagation();\n\n const form = (e.target as HTMLElement).closest('form');\n if (form) {\n const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n if (submitBtn) {\n submitBtn.click();\n } else {\n form.requestSubmit();\n }\n }\n }\n }\n }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n if (nextOpen && suppressNextIconOpenRef.current) {\n suppressNextIconOpenRef.current = false;\n setIsOpen(false);\n return;\n }\n\n setIsOpen(nextOpen);\n if (!nextOpen) {\n suppressNextIconOpenRef.current = true;\n requestAnimationFrame(() => {\n pickerRef.current?.focus();\n requestAnimationFrame(() => {\n suppressNextIconOpenRef.current = false;\n });\n });\n }\n }, []);\n\n const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n if (nextOpen && suppressNextNormalOpenRef.current) {\n suppressNextNormalOpenRef.current = false;\n setIsNormalPickerOpen(false);\n onOpenChange?.(false);\n return;\n }\n\n setIsNormalPickerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n if (!nextOpen) {\n suppressNextNormalOpenRef.current = true;\n requestAnimationFrame(() => {\n normalPickerRef.current?.focus();\n requestAnimationFrame(() => {\n suppressNextNormalOpenRef.current = false;\n });\n });\n }\n }, [onOpenChange]);\n\n if (renderAsIconButton) {\n return (\n <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n <IconButton\n onClick={handleIconClick}\n disabled={disabled}\n variant=\"default\"\n className={iconButtonClassName}\n >\n <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n </IconButton>\n <RangePicker\n ref={pickerRef}\n onChange={(dates) => {\n onChange(dates);\n setIsOpen(false);\n }}\n onCalendarChange={onCalendarChange}\n value={[parseDate(startDate), parseDate(endDate)]}\n id={{ start: START_ID, end: END_ID }}\n allowClear\n format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n getPopupContainer={\n customGetPopupContainer\n ? customGetPopupContainer\n : shouldPopOnParent\n ? (trigger) => trigger.parentElement as HTMLElement\n : () => document.body\n }\n disabled={disabled}\n disabledDate={maxDateRange ? disabledDate : undefined}\n autoComplete=\"off\"\n open={isOpen}\n onOpenChange={handleIconPickerOpenChange}\n placement={placement}\n // style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n />\n </div>\n );\n }\n\n return (\n <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n {(label || labelExtra) && (\n <div className=\"mb-1 flex items-center justify-between gap-1\">\n <InputLabel label={label || \"\"} required={required || false} />\n {labelExtra}\n </div>\n )}\n {(emphasisBg || emphasisBorder) && (\n <style>{`\n #${id} .ant-picker {\n background-color: ${emphasisBg} !important;\n border-color: ${emphasisBorder} !important;\n }\n #${id} .ant-picker:hover {\n border-color: ${emphasisBorder} !important;\n }\n #${id} .ant-picker.ant-picker-focused {\n border-color: ${emphasisBorder} !important;\n box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n }\n #${id} .ant-picker .ant-picker-input > input {\n color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n }\n `}</style>\n )}\n <RangePicker\n ref={normalPickerRef}\n onChange={onChange}\n onCalendarChange={onCalendarChange}\n value={[parseDate(startDate), parseDate(endDate)]}\n id={{ start: START_ID, end: END_ID }}\n allowClear\n format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n separator={\n <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n }\n suffixIcon={\n <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n }\n getPopupContainer={\n customGetPopupContainer\n ? customGetPopupContainer\n : shouldPopOnParent\n ? (trigger) => trigger.parentElement as HTMLElement\n : () => document.body\n }\n disabled={disabled}\n disabledDate={maxDateRange ? disabledDate : undefined}\n open={open ?? isNormalPickerOpen}\n onOpenChange={handleNormalOpenChange}\n autoComplete=\"off\"\n placement={placement}\n />\n {errorMessage && (\n <p\n className={cn(\n \"text-sm font-inter font-normal text-left pt-[6px]\",\n \"text-red-500\"\n )}\n >\n {errorMessage}\n </p>\n )}\n </div>\n );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}
1
+ {"version":3,"file":"DateRange.cjs.js","sources":["../../../../src/components/forms/date-range/DateRange.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatePicker } from \"antd\";\nimport cn from \"classnames\";\nimport React from \"react\";\nimport dayjs from \"dayjs\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport IconButton from \"../../button/IconButton\";\nimport { InputLabel } from \"../shared/InputLabel\";\nimport { CalendarMonthIcon, CheckIndeterminateSmallFilledIcon } from '../../icon';\n\nconst { RangePicker } = DatePicker;\n\n// Keyboard keys constant\nconst KEYBOARD_KEYS = {\n ENTER: \"Enter\",\n} as const;\n\n/**\n * Generate a short UUID\n */\nconst generateShortUUID = (): string => {\n return Math.random().toString(36).substring(2, 9);\n};\n\n/**\n * Hook to add event listeners\n */\nconst useEventListener = <K extends keyof DocumentEventMap>(\n eventName: K,\n handler: (event: DocumentEventMap[K]) => void\n) => {\n const savedHandler = useRef(handler);\n\n useEffect(() => {\n savedHandler.current = handler;\n }, [handler]);\n\n useEffect(() => {\n const eventListener = (event: DocumentEventMap[K]) =>\n savedHandler.current(event);\n document.addEventListener(eventName, eventListener);\n return () => {\n document.removeEventListener(eventName, eventListener);\n };\n }, [eventName]);\n};\n\n/**\n * Props for the DateRange component\n * Matches the lax-web-portal implementation for drop-in replacement\n */\nexport type TDateRangeProps = {\n /** Unique identifier for the date range */\n id: string;\n /** Label text to display above the date range */\n label?: string;\n /** Start date value (ISO string or formatted date string) */\n startDate: string;\n /** End date value (ISO string or formatted date string) */\n endDate: string;\n /** Callback function called when date range changes */\n onChange(data: any): void;\n /** Callback function called when calendar selection changes */\n onCalendarChange?(data: any): void;\n /** Whether the field is required */\n required?: boolean;\n /** Error message to display below the date range */\n errorMessage?: string;\n /** Additional CSS classes for the wrapper */\n className?: string;\n /** Whether the date range is disabled */\n disabled?: boolean;\n /** Custom date format */\n dateFormat?: string;\n /** Whether popup should render inside parent element */\n shouldPopOnParent?: boolean;\n /** Custom function to get popup container */\n getPopupContainer?: (trigger: HTMLElement | null) => HTMLElement;\n /** Maximum date range in days */\n maxDateRange?: number;\n /** Whether the picker is open */\n open?: boolean;\n /** Callback function called when open state changes */\n onOpenChange?(open: boolean): void;\n /** Placement of the dropdown */\n placement?: \"bottomLeft\" | \"bottomRight\" | \"topLeft\" | \"topRight\";\n /** Whether to render as an icon button that triggers the date picker */\n renderAsIconButton?: boolean;\n /** Additional CSS classes for the icon button */\n iconButtonClassName?: string;\n /** Additional CSS classes for the calendar icon inside the button */\n iconClassName?: string;\n /** Optional extra content in the label row (e.g. actions, badges) */\n labelExtra?: React.ReactNode;\n /** Input surface style: `'modified'` — Warning colors; `'deleted'` — Error colors; `'success'` — Success colors. */\n inputEmphasis?: \"default\" | \"modified\" | \"deleted\" | \"success\";\n};\n\n/**\n * A date range picker component with label, validation, and styling support.\n * Features proper date handling, validation, and comprehensive prop support.\n * Built on top of Ant Design's RangePicker for advanced functionality.\n *\n * This component is designed as a drop-in replacement for the lax-web-portal\n * DateRange component.\n *\n * @example\n * ```tsx\n * <DateRange\n * id=\"event-dates\"\n * label=\"Event Duration\"\n * startDate={startDate}\n * endDate={endDate}\n * onChange={(dates) => {\n * setStartDate(dates[0]);\n * setEndDate(dates[1]);\n * }}\n * required\n * />\n * ```\n */\nexport const DateRange = ({\n onCalendarChange = undefined,\n onChange,\n required,\n label,\n startDate,\n endDate,\n errorMessage,\n className,\n id,\n disabled = false,\n dateFormat,\n shouldPopOnParent = true,\n getPopupContainer: customGetPopupContainer,\n maxDateRange,\n open,\n onOpenChange,\n placement = \"bottomLeft\",\n renderAsIconButton = false,\n iconButtonClassName,\n iconClassName,\n labelExtra,\n inputEmphasis = \"default\",\n}: TDateRangeProps) => {\n const emphasisModifiedSkin = inputEmphasis === \"modified\" && !errorMessage;\n const emphasisDeletedSkin = inputEmphasis === \"deleted\" && !errorMessage;\n const emphasisSuccessSkin = inputEmphasis === \"success\" && !errorMessage;\n const emphasisBg =\n emphasisModifiedSkin ? \"var(--Warning-50, #FFFAEB)\" :\n emphasisDeletedSkin ? \"var(--Error-50, #FEF2F2)\" :\n emphasisSuccessSkin ? \"var(--Success-50, #F0FDF4)\" : \"\";\n const emphasisBorder =\n emphasisModifiedSkin ? \"var(--Warning-200, #FEDF89)\" :\n emphasisDeletedSkin ? \"var(--Error-200, #FECACA)\" :\n emphasisSuccessSkin ? \"var(--Success-200, #BBF7D0)\" : \"\";\n const [isOpen, setIsOpen] = useState(false);\n const [isNormalPickerOpen, setIsNormalPickerOpen] = useState(false);\n const pickerRef = useRef<any>(null);\n const normalPickerRef = useRef<any>(null);\n const suppressNextIconOpenRef = useRef(false);\n const suppressNextNormalOpenRef = useRef(false);\n\n const parseDate = (str: string | number | Date | dayjs.Dayjs) => {\n if (!str) return null;\n return dayjs(str);\n };\n\n const START_ID = `date-range-start-${generateShortUUID()}`;\n const END_ID = `date-range-end-${generateShortUUID()}`;\n\n const handleIconClick = () => {\n setIsOpen(true);\n setTimeout(() => {\n if (pickerRef.current) {\n pickerRef.current.focus();\n }\n }, 0);\n };\n\n useEventListener(\"keydown\", (e: KeyboardEvent) => {\n if (\n e.key === KEYBOARD_KEYS.ENTER &&\n document.activeElement instanceof HTMLInputElement\n ) {\n if (document?.activeElement?.id === START_ID) {\n const date = dayjs(document?.activeElement?.value);\n if (date.isValid()) {\n onChange([date, parseDate(endDate)]);\n }\n }\n if (document?.activeElement?.id === END_ID) {\n const date = dayjs(document?.activeElement?.value);\n if (date.isValid()) {\n onChange([parseDate(startDate), date]);\n }\n }\n }\n });\n\n const disabledDate = useCallback(\n (current: dayjs.Dayjs) => {\n const [start, end] = [parseDate(startDate), parseDate(endDate)];\n\n if (!maxDateRange) return false;\n\n if (start) {\n return (\n current.isBefore(start.startOf(\"day\")) ||\n current.isAfter(start.add(maxDateRange, \"day\").endOf(\"day\"))\n );\n }\n\n if (end) {\n return (\n current.isBefore(end.subtract(maxDateRange, \"day\").startOf(\"day\")) ||\n current.isAfter(end.endOf(\"day\"))\n );\n }\n\n return false;\n },\n [startDate, endDate, maxDateRange]\n );\n\n const handleKeyDownCapture = useCallback((e: React.KeyboardEvent) => {\n if (e.key === KEYBOARD_KEYS.ENTER) {\n const pickerIsOpen = renderAsIconButton ? isOpen : (open ?? isNormalPickerOpen);\n if (!pickerIsOpen) {\n e.preventDefault();\n e.stopPropagation();\n\n const form = (e.target as HTMLElement).closest('form');\n if (form) {\n const submitBtn = form.querySelector<HTMLButtonElement>('button[type=\"submit\"]');\n if (submitBtn) {\n submitBtn.click();\n } else {\n form.requestSubmit();\n }\n }\n }\n }\n }, [renderAsIconButton, isOpen, open, isNormalPickerOpen]);\n\n const handleIconPickerOpenChange = useCallback((nextOpen: boolean) => {\n if (nextOpen && suppressNextIconOpenRef.current) {\n suppressNextIconOpenRef.current = false;\n setIsOpen(false);\n return;\n }\n\n setIsOpen(nextOpen);\n if (!nextOpen) {\n suppressNextIconOpenRef.current = true;\n requestAnimationFrame(() => {\n pickerRef.current?.focus();\n requestAnimationFrame(() => {\n suppressNextIconOpenRef.current = false;\n });\n });\n }\n }, []);\n\n const handleNormalOpenChange = useCallback((nextOpen: boolean) => {\n if (nextOpen && suppressNextNormalOpenRef.current) {\n suppressNextNormalOpenRef.current = false;\n setIsNormalPickerOpen(false);\n onOpenChange?.(false);\n return;\n }\n\n setIsNormalPickerOpen(nextOpen);\n onOpenChange?.(nextOpen);\n if (!nextOpen) {\n suppressNextNormalOpenRef.current = true;\n requestAnimationFrame(() => {\n normalPickerRef.current?.focus();\n requestAnimationFrame(() => {\n suppressNextNormalOpenRef.current = false;\n });\n });\n }\n }, [onOpenChange]);\n\n if (renderAsIconButton) {\n return (\n <div id={id} className={className} onKeyDownCapture={handleKeyDownCapture}>\n <IconButton\n onClick={handleIconClick}\n disabled={disabled}\n variant=\"default\"\n className={iconButtonClassName}\n >\n <CalendarMonthIcon size={20} className={cn(\"w-5 h-5\", iconClassName)} />\n </IconButton>\n <RangePicker\n ref={pickerRef}\n onChange={(dates) => {\n onChange(dates);\n setIsOpen(false);\n }}\n onCalendarChange={onCalendarChange}\n value={[parseDate(startDate), parseDate(endDate)]}\n id={{ start: START_ID, end: END_ID }}\n allowClear\n format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n separator={<CheckIndeterminateSmallFilledIcon size={20} className=\"text-neutral-400 dark:text-gray-100\" />}\n suffixIcon={<CalendarMonthIcon size={14} className=\"text-neutral-400 dark:text-gray-100\" />}\n getPopupContainer={\n customGetPopupContainer\n ? customGetPopupContainer\n : shouldPopOnParent\n ? (trigger) => trigger.parentElement as HTMLElement\n : () => document.body\n }\n disabled={disabled}\n disabledDate={maxDateRange ? disabledDate : undefined}\n autoComplete=\"off\"\n open={isOpen}\n onOpenChange={handleIconPickerOpenChange}\n placement={placement}\n style={{ position: \"absolute\", opacity: 0, pointerEvents: \"none\", width: 0, height: 0 }}\n />\n </div>\n );\n }\n\n return (\n <div id={id} className={cn(\"flex flex-col\", className)} onKeyDownCapture={handleKeyDownCapture}>\n {(label || labelExtra) && (\n <div className=\"mb-1 flex items-center justify-between gap-1\">\n <InputLabel label={label || \"\"} required={required || false} />\n {labelExtra}\n </div>\n )}\n {(emphasisBg || emphasisBorder) && (\n <style>{`\n #${id} .ant-picker {\n background-color: ${emphasisBg} !important;\n border-color: ${emphasisBorder} !important;\n }\n #${id} .ant-picker:hover {\n border-color: ${emphasisBorder} !important;\n }\n #${id} .ant-picker.ant-picker-focused {\n border-color: ${emphasisBorder} !important;\n box-shadow: 0 0 0 2px ${emphasisDeletedSkin ? \"rgba(254,202,202,0.45)\" : emphasisModifiedSkin ? \"rgba(254,223,137,0.45)\" : \"rgba(187,247,208,0.45)\"} !important;\n }\n #${id} .ant-picker .ant-picker-input > input {\n color: ${emphasisDeletedSkin ? \"#475467\" : emphasisSuccessSkin ? \"#101828\" : \"inherit\"};\n }\n `}</style>\n )}\n <RangePicker\n ref={normalPickerRef}\n onChange={onChange}\n onCalendarChange={onCalendarChange}\n value={[parseDate(startDate), parseDate(endDate)]}\n id={{ start: START_ID, end: END_ID }}\n allowClear\n format={dateFormat ? dateFormat : \"DD MMM, YYYY\"}\n separator={\n <CheckIndeterminateSmallFilledIcon size={20} className='text-neutral-400 dark:text-gray-100' />\n }\n suffixIcon={\n <CalendarMonthIcon size={14} className='text-neutral-400 dark:text-gray-100' />\n }\n getPopupContainer={\n customGetPopupContainer\n ? customGetPopupContainer\n : shouldPopOnParent\n ? (trigger) => trigger.parentElement as HTMLElement\n : () => document.body\n }\n disabled={disabled}\n disabledDate={maxDateRange ? disabledDate : undefined}\n open={open ?? isNormalPickerOpen}\n onOpenChange={handleNormalOpenChange}\n autoComplete=\"off\"\n placement={placement}\n />\n {errorMessage && (\n <p\n className={cn(\n \"text-sm font-inter font-normal text-left pt-[6px]\",\n \"text-red-500\"\n )}\n >\n {errorMessage}\n </p>\n )}\n </div>\n );\n};\n\nDateRange.displayName = \"DateRange\";\n\n"],"names":["RangePicker","DatePicker","KEYBOARD_KEYS","generateShortUUID","useEventListener","eventName","handler","savedHandler","useRef","useEffect","eventListener","event","DateRange","onCalendarChange","onChange","required","label","startDate","endDate","errorMessage","className","id","disabled","dateFormat","shouldPopOnParent","customGetPopupContainer","maxDateRange","open","onOpenChange","placement","renderAsIconButton","iconButtonClassName","iconClassName","labelExtra","inputEmphasis","emphasisModifiedSkin","emphasisDeletedSkin","emphasisSuccessSkin","emphasisBg","emphasisBorder","isOpen","setIsOpen","useState","isNormalPickerOpen","setIsNormalPickerOpen","pickerRef","normalPickerRef","suppressNextIconOpenRef","suppressNextNormalOpenRef","parseDate","str","dayjs","START_ID","END_ID","handleIconClick","date","disabledDate","useCallback","current","start","end","handleKeyDownCapture","form","submitBtn","handleIconPickerOpenChange","nextOpen","handleNormalOpenChange","jsxs","jsx","IconButton","CalendarMonthIcon","cn","dates","CheckIndeterminateSmallFilledIcon","trigger","InputLabel"],"mappings":"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"}