@lax-wp/design-system 0.13.45 → 0.13.46

package/dist/components/forms/date-range/DateRange.cjs.js

@@ -1,17 +1,17 @@
-"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:`
+"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:`
           #${l} .ant-picker {
             background-color: ${P} !important;
-            border-color: ${E} !important;
+            border-color: ${y} !important;
           }
           #${l} .ant-picker:hover {
-            border-color: ${E} !important;
+            border-color: ${y} !important;
           }
           #${l} .ant-picker.ant-picker-focused {
-            border-color: ${E} !important;
-            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;
+            border-color: ${y} !important;
+            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;
           }
           #${l} .ant-picker .ant-picker-input > input {
-            color: ${y?"#475467":R?"#101828":"inherit"};
+            color: ${x?"#475467":R?"#101828":"inherit"};
           }
-        `}),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;
+        `}),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;
 //# sourceMappingURL=DateRange.cjs.js.map

package/dist/components/forms/date-range/DateRange.cjs.js.map

@@ -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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"}
+{"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":"gWAUM,CAAE,YAAAA,GAAgBC,GAAAA,WAGlBC,EAAgB,CACpB,MAAO,OACT,EAKMC,EAAoB,IACjB,KAAK,SAAS,SAAS,EAAE,EAAE,UAAU,EAAG,CAAC,EAM5CC,GAAmB,CACvBC,EACAC,IACG,CACH,MAAMC,EAAeC,EAAAA,OAAOF,CAAO,EAEnCG,EAAAA,UAAU,IAAM,CACdF,EAAa,QAAUD,CACzB,EAAG,CAACA,CAAO,CAAC,EAEZG,EAAAA,UAAU,IAAM,CACd,MAAMC,EAAiBC,GACrBJ,EAAa,QAAQI,CAAK,EAC5B,gBAAS,iBAAiBN,EAAWK,CAAa,EAC3C,IAAM,CACX,SAAS,oBAAoBL,EAAWK,CAAa,CACvD,CACF,EAAG,CAACL,CAAS,CAAC,CAChB,EA4EaO,EAAY,CAAC,CACxB,iBAAAC,EAAmB,OACnB,SAAAC,EACA,SAAAC,EACA,MAAAC,EACA,UAAAC,EACA,QAAAC,EACA,aAAAC,EACA,UAAAC,EACA,GAAAC,EACA,SAAAC,EAAW,GACX,WAAAC,EACA,kBAAAC,EAAoB,GACpB,kBAAmBC,EACnB,aAAAC,EACA,KAAAC,EACA,aAAAC,EACA,UAAAC,EAAY,aACZ,mBAAAC,EAAqB,GACrB,oBAAAC,EACA,cAAAC,EACA,WAAAC,EACA,cAAAC,EAAgB,SAClB,IAAuB,CACrB,MAAMC,EAAuBD,IAAkB,YAAc,CAACf,EACxDiB,EAAsBF,IAAkB,WAAa,CAACf,EACtDkB,EAAsBH,IAAkB,WAAa,CAACf,EACtDmB,EACJH,EAAuB,6BACvBC,EAAsB,2BACtBC,EAAsB,6BAA+B,GACjDE,EACJJ,EAAuB,8BACvBC,EAAsB,4BACtBC,EAAsB,8BAAgC,GAClD,CAACG,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpC,CAACC,EAAoBC,CAAqB,EAAIF,EAAAA,SAAS,EAAK,EAC5DG,EAAYrC,EAAAA,OAAY,IAAI,EAC5BsC,EAAkBtC,EAAAA,OAAY,IAAI,EAClCuC,EAA0BvC,EAAAA,OAAO,EAAK,EACtCwC,EAA4BxC,EAAAA,OAAO,EAAK,EAExCyC,EAAaC,GACZA,EACEC,EAAMD,CAAG,EADC,KAIbE,EAAW,oBAAoBjD,EAAA,CAAmB,GAClDkD,EAAS,kBAAkBlD,EAAA,CAAmB,GAE9CmD,EAAkB,IAAM,CAC5Bb,EAAU,EAAI,EACd,WAAW,IAAM,CACXI,EAAU,SACZA,EAAU,QAAQ,MAAA,CAEtB,EAAG,CAAC,CACN,EAEAzC,GAAiB,UAAY,GAAqB,CAChD,GACE,EAAE,MAAQF,EAAc,OACxB,SAAS,yBAAyB,iBAClC,CACA,GAAI,UAAU,eAAe,KAAOkD,EAAU,CAC5C,MAAMG,EAAOJ,EAAM,UAAU,eAAe,KAAK,EAC7CI,EAAK,WACPzC,EAAS,CAACyC,EAAMN,EAAU/B,CAAO,CAAC,CAAC,CAEvC,CACA,GAAI,UAAU,eAAe,KAAOmC,EAAQ,CAC1C,MAAME,EAAOJ,EAAM,UAAU,eAAe,KAAK,EAC7CI,EAAK,WACPzC,EAAS,CAACmC,EAAUhC,CAAS,EAAGsC,CAAI,CAAC,CAEzC,CACF,CACF,CAAC,EAED,MAAMC,EAAeC,EAAAA,YAClBC,GAAyB,CACxB,KAAM,CAACC,EAAOC,CAAG,EAAI,CAACX,EAAUhC,CAAS,EAAGgC,EAAU/B,CAAO,CAAC,EAE9D,OAAKQ,EAEDiC,EAEAD,EAAQ,SAASC,EAAM,QAAQ,KAAK,CAAC,GACrCD,EAAQ,QAAQC,EAAM,IAAIjC,EAAc,KAAK,EAAE,MAAM,KAAK,CAAC,EAI3DkC,EAEAF,EAAQ,SAASE,EAAI,SAASlC,EAAc,KAAK,EAAE,QAAQ,KAAK,CAAC,GACjEgC,EAAQ,QAAQE,EAAI,MAAM,KAAK,CAAC,EAI7B,GAhBmB,EAiB5B,EACA,CAAC3C,EAAWC,EAASQ,CAAY,CAAA,EAG7BmC,EAAuBJ,cAAa,GAA2B,CACnE,GAAI,EAAE,MAAQvD,EAAc,OAEtB,EADiB4B,EAAqBU,EAAUb,GAAQgB,GACzC,CACjB,EAAE,eAAA,EACF,EAAE,gBAAA,EAEF,MAAMmB,EAAQ,EAAE,OAAuB,QAAQ,MAAM,EACrD,GAAIA,EAAM,CACR,MAAMC,EAAYD,EAAK,cAAiC,uBAAuB,EAC3EC,EACFA,EAAU,MAAA,EAEVD,EAAK,cAAA,CAET,CACF,CAEJ,EAAG,CAAChC,EAAoBU,EAAQb,EAAMgB,CAAkB,CAAC,EAEnDqB,GAA6BP,cAAaQ,GAAsB,CACpE,GAAIA,GAAYlB,EAAwB,QAAS,CAC/CA,EAAwB,QAAU,GAClCN,EAAU,EAAK,EACf,MACF,CAEAA,EAAUwB,CAAQ,EACbA,IACHlB,EAAwB,QAAU,GAClC,sBAAsB,IAAM,CAC1BF,EAAU,SAAS,MAAA,EACnB,sBAAsB,IAAM,CAC1BE,EAAwB,QAAU,EACpC,CAAC,CACH,CAAC,EAEL,EAAG,CAAA,CAAE,EAECmB,GAAyBT,cAAaQ,GAAsB,CAChE,GAAIA,GAAYjB,EAA0B,QAAS,CACjDA,EAA0B,QAAU,GACpCJ,EAAsB,EAAK,EAC3BhB,IAAe,EAAK,EACpB,MACF,CAEAgB,EAAsBqB,CAAQ,EAC9BrC,IAAeqC,CAAQ,EAClBA,IACHjB,EAA0B,QAAU,GACpC,sBAAsB,IAAM,CAC1BF,EAAgB,SAAS,MAAA,EACzB,sBAAsB,IAAM,CAC1BE,EAA0B,QAAU,EACtC,CAAC,CACH,CAAC,EAEL,EAAG,CAACpB,CAAY,CAAC,EAEjB,OAAIE,EAEAqC,EAAAA,KAAC,MAAA,CAAI,GAAA9C,EAAQ,UAAAD,EAAsB,iBAAkByC,EACnD,SAAA,CAAAO,EAAAA,IAACC,GAAA,CACC,QAASf,EACT,SAAAhC,EACA,QAAQ,UACR,UAAWS,EAEX,SAAAqC,EAAAA,IAACE,EAAAA,mBAAkB,KAAM,GAAI,UAAWC,EAAG,UAAWvC,CAAa,CAAA,CAAG,CAAA,CAAA,EAExEoC,EAAAA,IAACpE,EAAA,CACC,IAAK6C,EACL,SAAW2B,GAAU,CACnB1D,EAAS0D,CAAK,EACd/B,EAAU,EAAK,CACjB,EACA,iBAAA5B,EACA,MAAO,CAACoC,EAAUhC,CAAS,EAAGgC,EAAU/B,CAAO,CAAC,EAChD,GAAI,CAAE,MAAOkC,EAAU,IAAKC,CAAA,EAC5B,WAAU,GACV,OAAQ9B,GAA0B,eAClC,UAAW6C,EAAAA,IAACK,oCAAA,CAAkC,KAAM,GAAI,UAAU,sCAAsC,EACxG,WAAYL,EAAAA,IAACE,oBAAA,CAAkB,KAAM,GAAI,UAAU,sCAAsC,EACzF,kBACE7C,IAEID,EACGkD,GAAYA,EAAQ,cACrB,IAAM,SAAS,MAEvB,SAAApD,EACA,aAAcI,EAAe8B,EAAe,OAC5C,aAAa,MACb,KAAMhB,EACN,aAAcwB,GACd,UAAAnC,CAAA,CAAA,CAEF,EACF,EAKFsC,OAAC,OAAI,GAAA9C,EAAQ,UAAWkD,EAAG,gBAAiBnD,CAAS,EAAG,iBAAkByC,EACtE,SAAA,EAAA7C,GAASiB,IACTkC,EAAAA,KAAC,MAAA,CAAI,UAAU,+CACb,SAAA,CAAAC,MAACO,GAAAA,YAAW,MAAO3D,GAAS,GAAI,SAAUD,GAAY,GAAO,EAC5DkB,CAAA,EACH,GAEAK,GAAcC,IACd6B,EAAAA,IAAC,QAAA,CAAO,SAAA;AAAA,aACH/C,CAAE;AAAA,gCACiBiB,CAAU;AAAA,4BACdC,CAAc;AAAA;AAAA,aAE7BlB,CAAE;AAAA,4BACakB,CAAc;AAAA;AAAA,aAE7BlB,CAAE;AAAA,4BACakB,CAAc;AAAA,oCACNH,EAAsB,yBAA2BD,EAAuB,yBAA2B,wBAAwB;AAAA;AAAA,aAElJd,CAAE;AAAA,qBACMe,EAAsB,UAAYC,EAAsB,UAAY,SAAS;AAAA;AAAA,UAExF,EAEJ+B,EAAAA,IAACpE,EAAA,CACC,IAAK8C,EACL,SAAAhC,EACA,iBAAAD,EACA,MAAO,CAACoC,EAAUhC,CAAS,EAAGgC,EAAU/B,CAAO,CAAC,EAChD,GAAI,CAAE,MAAOkC,EAAU,IAAKC,CAAA,EAC5B,WAAU,GACV,OAAQ9B,GAA0B,eAClC,UACE6C,EAAAA,IAACK,oCAAA,CAAkC,KAAM,GAAI,UAAU,sCAAsC,EAE/F,WACEL,EAAAA,IAACE,oBAAA,CAAkB,KAAM,GAAI,UAAU,sCAAsC,EAE/E,kBACE7C,IAEID,EACGkD,GAAYA,EAAQ,cACrB,IAAM,SAAS,MAEvB,SAAApD,EACA,aAAcI,EAAe8B,EAAe,OAC5C,KAAM7B,GAAQgB,EACd,aAAcuB,GACd,aAAa,MACb,UAAArC,CAAA,CAAA,EAEDV,GACCiD,EAAAA,IAAC,IAAA,CACC,UAAWG,EACT,oDACA,cAAA,EAGD,SAAApD,CAAA,CAAA,CACH,EAEJ,CAEJ,EAEAP,EAAU,YAAc"}

package/dist/components/forms/date-range/DateRange.es.js

@@ -1,31 +1,31 @@
 import { jsxs as R, jsx as t } from "react/jsx-runtime";
-import { DatePicker as ie } from "antd";
+import { DatePicker as ae } from "antd";
 import q from "../../../_virtual/index.es.js";
-import { useState as J, useRef as m, useCallback as I, useEffect as Q } from "react";
+import { useState as J, useRef as d, useCallback as g, useEffect as Q } from "react";
 import L from "dayjs";
-import ae from "../../button/IconButton.es.js";
+import ie from "../../button/IconButton.es.js";
 import { InputLabel as ce } from "../shared/InputLabel.es.js";
 import { CalendarMonthIcon as T, CheckIndeterminateSmallFilledIcon as X } from "../../icon/icons.generated.es.js";
-const { RangePicker: Z } = ie, G = {
+const { RangePicker: Z } = ae, G = {
   ENTER: "Enter"
-}, ee = () => Math.random().toString(36).substring(2, 9), le = (a, n) => {
-  const p = m(n);
+}, ee = () => Math.random().toString(36).substring(2, 9), le = (i, n) => {
+  const p = d(n);
   Q(() => {
     p.current = n;
   }, [n]), Q(() => {
     const f = (o) => p.current(o);
-    return document.addEventListener(a, f), () => {
-      document.removeEventListener(a, f);
+    return document.addEventListener(i, f), () => {
+      document.removeEventListener(i, f);
     };
-  }, [a]);
+  }, [i]);
 }, fe = ({
-  onCalendarChange: a = void 0,
+  onCalendarChange: i = void 0,
   onChange: n,
   required: p,
   label: f,
   startDate: o,
   endDate: u,
-  errorMessage: d,
+  errorMessage: m,
   className: M,
   id: c,
   disabled: F = !1,
@@ -42,7 +42,7 @@ const { RangePicker: Z } = ie, G = {
   labelExtra: P,
   inputEmphasis: $ = "default"
 }) => {
-  const D = $ === "modified" && !d, y = $ === "deleted" && !d, w = $ === "success" && !d, j = D ? "var(--Warning-50, #FFFAEB)" : y ? "var(--Error-50, #FEF2F2)" : w ? "var(--Success-50, #F0FDF4)" : "", E = D ? "var(--Warning-200, #FEDF89)" : y ? "var(--Error-200, #FECACA)" : w ? "var(--Success-200, #BBF7D0)" : "", [Y, b] = J(!1), [A, _] = J(!1), h = m(null), H = m(null), N = m(!1), g = m(!1), s = (e) => e ? L(e) : null, O = `date-range-start-${ee()}`, B = `date-range-end-${ee()}`, ne = () => {
+  const D = $ === "modified" && !m, E = $ === "deleted" && !m, Y = $ === "success" && !m, j = D ? "var(--Warning-50, #FFFAEB)" : E ? "var(--Error-50, #FEF2F2)" : Y ? "var(--Success-50, #F0FDF4)" : "", y = D ? "var(--Warning-200, #FEDF89)" : E ? "var(--Error-200, #FECACA)" : Y ? "var(--Success-200, #BBF7D0)" : "", [w, b] = J(!1), [A, _] = J(!1), h = d(null), H = d(null), N = d(!1), I = d(!1), s = (e) => e ? L(e) : null, O = `date-range-start-${ee()}`, B = `date-range-end-${ee()}`, ne = () => {
     b(!0), setTimeout(() => {
       h.current && h.current.focus();
     }, 0);
@@ -59,22 +59,22 @@ const { RangePicker: Z } = ie, G = {
       }
     }
   });
-  const U = I(
+  const U = g(
     (e) => {
-      const [r, i] = [s(o), s(u)];
-      return l ? r ? e.isBefore(r.startOf("day")) || e.isAfter(r.add(l, "day").endOf("day")) : i ? e.isBefore(i.subtract(l, "day").startOf("day")) || e.isAfter(i.endOf("day")) : !1 : !1;
+      const [r, a] = [s(o), s(u)];
+      return l ? r ? e.isBefore(r.startOf("day")) || e.isAfter(r.add(l, "day").endOf("day")) : a ? e.isBefore(a.subtract(l, "day").startOf("day")) || e.isAfter(a.endOf("day")) : !1 : !1;
     },
     [o, u, l]
-  ), V = I((e) => {
-    if (e.key === G.ENTER && !(C ? Y : S ?? A)) {
+  ), V = g((e) => {
+    if (e.key === G.ENTER && !(C ? w : S ?? A)) {
       e.preventDefault(), e.stopPropagation();
-      const i = e.target.closest("form");
-      if (i) {
-        const W = i.querySelector('button[type="submit"]');
-        W ? W.click() : i.requestSubmit();
+      const a = e.target.closest("form");
+      if (a) {
+        const W = a.querySelector('button[type="submit"]');
+        W ? W.click() : a.requestSubmit();
       }
     }
-  }, [C, Y, S, A]), se = I((e) => {
+  }, [C, w, S, A]), se = g((e) => {
     if (e && N.current) {
       N.current = !1, b(!1);
       return;
@@ -84,20 +84,20 @@ const { RangePicker: Z } = ie, G = {
         N.current = !1;
       });
     }));
-  }, []), oe = I((e) => {
-    if (e && g.current) {
-      g.current = !1, _(!1), x?.(!1);
+  }, []), oe = g((e) => {
+    if (e && I.current) {
+      I.current = !1, _(!1), x?.(!1);
       return;
     }
-    _(e), x?.(e), e || (g.current = !0, requestAnimationFrame(() => {
+    _(e), x?.(e), e || (I.current = !0, requestAnimationFrame(() => {
       H.current?.focus(), requestAnimationFrame(() => {
-        g.current = !1;
+        I.current = !1;
       });
     }));
   }, [x]);
   return C ? /* @__PURE__ */ R("div", { id: c, className: M, onKeyDownCapture: V, children: [
     /* @__PURE__ */ t(
-      ae,
+      ie,
       {
         onClick: ne,
         disabled: F,
@@ -113,7 +113,7 @@ const { RangePicker: Z } = ie, G = {
         onChange: (e) => {
           n(e), b(!1);
         },
-        onCalendarChange: a,
+        onCalendarChange: i,
         value: [s(o), s(u)],
         id: { start: O, end: B },
         allowClear: !0,
@@ -124,10 +124,9 @@ const { RangePicker: Z } = ie, G = {
         disabled: F,
         disabledDate: l ? U : void 0,
         autoComplete: "off",
-        open: Y,
+        open: w,
         onOpenChange: se,
-        placement: K,
-        style: { position: "absolute", opacity: 0, pointerEvents: "none", width: 0, height: 0 }
+        placement: K
       }
     )
   ] }) : /* @__PURE__ */ R("div", { id: c, className: q("flex flex-col", M), onKeyDownCapture: V, children: [
@@ -135,20 +134,20 @@ const { RangePicker: Z } = ie, G = {
       /* @__PURE__ */ t(ce, { label: f || "", required: p || !1 }),
       P
     ] }),
-    (j || E) && /* @__PURE__ */ t("style", { children: `
+    (j || y) && /* @__PURE__ */ t("style", { children: `
           #${c} .ant-picker {
             background-color: ${j} !important;
-            border-color: ${E} !important;
+            border-color: ${y} !important;
           }
           #${c} .ant-picker:hover {
-            border-color: ${E} !important;
+            border-color: ${y} !important;
           }
           #${c} .ant-picker.ant-picker-focused {
-            border-color: ${E} !important;
-            box-shadow: 0 0 0 2px ${y ? "rgba(254,202,202,0.45)" : D ? "rgba(254,223,137,0.45)" : "rgba(187,247,208,0.45)"} !important;
+            border-color: ${y} !important;
+            box-shadow: 0 0 0 2px ${E ? "rgba(254,202,202,0.45)" : D ? "rgba(254,223,137,0.45)" : "rgba(187,247,208,0.45)"} !important;
           }
           #${c} .ant-picker .ant-picker-input > input {
-            color: ${y ? "#475467" : w ? "#101828" : "inherit"};
+            color: ${E ? "#475467" : Y ? "#101828" : "inherit"};
           }
         ` }),
     /* @__PURE__ */ t(
@@ -156,7 +155,7 @@ const { RangePicker: Z } = ie, G = {
       {
         ref: H,
         onChange: n,
-        onCalendarChange: a,
+        onCalendarChange: i,
         value: [s(o), s(u)],
         id: { start: O, end: B },
         allowClear: !0,
@@ -172,14 +171,14 @@ const { RangePicker: Z } = ie, G = {
         placement: K
       }
     ),
-    d && /* @__PURE__ */ t(
+    m && /* @__PURE__ */ t(
       "p",
       {
         className: q(
           "text-sm font-inter font-normal text-left pt-[6px]",
           "text-red-500"
         ),
-        children: d
+        children: m
       }
     )
   ] });

package/dist/components/forms/date-range/DateRange.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRange.es.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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"}
+{"version":3,"file":"DateRange.es.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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"}

package/dist/components/forms/icon-picker/IconPicker.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),d=require("react"),C=require("react-window"),v=require("@mui/icons-material"),I=require("@mui/material"),y=require("antd"),k=require("../../data-display/typography/Typography.cjs.js"),N=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),P=require("../../../utils/countryFlags.cjs.js"),S=require("../shared/InputLabel.cjs.js");function q(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const h=q(v),R=Object.keys(h).filter(e=>e?.endsWith("Rounded")),O=[...R||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],D=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},T=({onChange:e,selectedIcon:n,setOpen:a})=>{const[c,f]=d.useState(""),l=(O||[]).filter(r=>{if(r?.startsWith("flag-")){const s=r?.replace("flag-","");return s?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")||x.countryNameFromCode(s||"")?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}),p=(r,s)=>{if(s.stopPropagation(),n===r){e?.(null);return}e?.(r),a?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(N.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>f(r||""),fieldSuffix:t.jsx(h.Search,{className:"!w-4 !h-4 text-neutral-400"})}),t.jsx(C.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((l?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:s,style:m})=>{const g=s*5+r,i=l?.[g];return i?t.jsx("div",{style:m,className:"p-1",children:t.jsx(y.Tooltip,{title:D(i),placement:"bottom",children:t.jsx(I.IconButton,{type:"button",className:w("flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===i}),onClick:u=>p(i,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:i,className:"!w-5 !h-5 text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:a,isHovering:c})=>{if(e?.startsWith?.("flag-")){const l=e?.replace("flag-","");return P.getFlagComponent?.(l||"",c||!1)||t.jsx("div",{children:"-"})}const f=h?.[e];return f?t.jsx(f,{sx:n,className:a,isHovering:c}):t.jsx("div",{children:"-"})},L=({selectedIcon:e,onChange:n,label:a,required:c=!1,allowClear:f=!0,disabled:l=!1,errorMessage:p,dropdownPosition:r="bottom"})=>{const[s,m]=d.useState(!1),g=d.useRef(!1),i=d.useRef(null),u=d.useRef(!1);d.useEffect(()=>{u.current&&!s&&i.current?.focus(),u.current=s},[s]);const j=o=>{o.stopPropagation(),n?.("")};return t.jsx(y.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:s,onOpenChange:o=>{o?(g.current&&m(!0),g.current=!1):m(!1)},content:t.jsx(T,{onChange:n,selectedIcon:e,setOpen:m}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[a?t.jsx(S.InputLabel,{label:a||"",required:c||!1}):null,t.jsxs("button",{ref:i,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${p?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,disabled:l,onClick:o=>{if(l){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(g.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),s||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,className:"!w-5 !h-5 text-neutral-900 dark:text-white"}):t.jsx(k.Typography,{size:"small",variant:"regular",appearance:"subtitle",children:"Select Icon"}),e&&f&&!l?t.jsx(h.CloseRounded,{className:"!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",onClick:j}):null]}),p&&t.jsx(k.Typography,{size:"extra-small",className:"text-red-500 font-medium",children:p})]})})},F=d.lazy(()=>Promise.resolve({default:e=>t.jsx(d.Suspense,{fallback:t.jsx("div",{className:"min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md"}),children:t.jsx(L,{...e})})}));exports.IconPicker=F;exports.IconRenderer=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../../_virtual/index.cjs.js"),d=require("react"),C=require("react-window"),v=require("@mui/icons-material"),I=require("@mui/material"),y=require("antd"),k=require("../../data-display/typography/Typography.cjs.js"),N=require("../input-field/InputField.cjs.js"),x=require("../../../types/icon-picker.cjs.js"),P=require("../../../utils/countryFlags.cjs.js"),S=require("../shared/InputLabel.cjs.js");function q(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(n,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const h=q(v),R=Object.keys(h).filter(e=>e?.endsWith("Rounded")),O=[...R||[],...(x.COUNTRY_CODES||[]).map(e=>`flag-${e}`)],D=e=>{if(e?.startsWith("flag-")){const n=e?.replace("flag-","");return x.countryNameFromCode(n||"")||n}return e.replaceAll(/([A-Z])/g," $1").trim()},T=({onChange:e,selectedIcon:n,setOpen:a})=>{const[c,f]=d.useState(""),l=(O||[]).filter(r=>{if(r?.startsWith("flag-")){const s=r?.replace("flag-","");return s?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")||x.countryNameFromCode(s||"")?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}return r?.trim()?.toLowerCase()?.includes(c?.trim()?.toLowerCase()||"")}),p=(r,s)=>{if(s.stopPropagation(),n===r){e?.(null);return}e?.(r),a?.(!1)};return t.jsxs("div",{className:"flex flex-col gap-3",onKeyDown:r=>{r.key==="Enter"&&(r.preventDefault(),r.stopPropagation())},children:[t.jsx(N.InputField,{id:"input-field-icon-picker",placeholder:"Search icons...",onChange:r=>f(r||""),fieldSuffix:t.jsx(h.Search,{className:"!w-4 !h-4 text-neutral-400"})}),t.jsx(C.FixedSizeGrid,{columnCount:5,rowCount:Math.ceil((l?.length||0)/5),columnWidth:40,rowHeight:40,width:220,height:240,children:({columnIndex:r,rowIndex:s,style:m})=>{const g=s*5+r,i=l?.[g];return i?t.jsx("div",{style:m,className:"p-1",children:t.jsx(y.Tooltip,{title:D(i),placement:"bottom",children:t.jsx(I.IconButton,{type:"button",className:w("flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700",{"!bg-primary-50 dark:!bg-black-800":n===i}),onClick:u=>p(i,u),onKeyDown:u=>{u.key==="Enter"&&(u.preventDefault(),u.stopPropagation())},children:t.jsx(b,{iconName:i,className:"!w-5 !h-5 text-neutral-900 dark:text-white"})})})}):null}})]})},b=({iconName:e,sx:n,className:a,isHovering:c})=>{if(e?.startsWith?.("flag-")){const l=e?.replace("flag-","");return P.getFlagComponent?.(l||"",c||!1)||t.jsx("div",{children:"-"})}const f=h?.[e];return f?t.jsx(f,{sx:n,className:a,isHovering:c}):t.jsx("div",{children:"-"})},L=({selectedIcon:e,onChange:n,label:a,required:c=!1,allowClear:f=!0,disabled:l=!1,errorMessage:p,dropdownPosition:r="bottom"})=>{const[s,m]=d.useState(!1),g=d.useRef(!1),i=d.useRef(null),u=d.useRef(!1);d.useEffect(()=>{u.current&&!s&&i.current?.focus(),u.current=s},[s]);const j=o=>{o.stopPropagation(),n?.("")};return t.jsx(y.Popover,{arrow:!1,placement:r,trigger:"click",getPopupContainer:o=>o?.parentElement||document.body,open:s,onOpenChange:o=>{o?(g.current&&m(!0),g.current=!1):m(!1)},content:t.jsx(T,{onChange:n,selectedIcon:e,setOpen:m}),children:t.jsxs("div",{className:"flex flex-col gap-1",children:[a?t.jsx(S.InputLabel,{label:a||"",required:c||!1}):null,t.jsxs("button",{ref:i,type:"button",id:`btn-icon-picker-icon-${e?"selected":"unselected"}`,className:`lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${l?"cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800":"bg-white dark:bg-black-800"} ${p?"border-red-500":"focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,disabled:l,onClick:o=>{if(l){o.preventDefault(),o.stopPropagation();return}o.detail>0&&(g.current=!0)},onKeyDown:o=>{o.key==="Enter"&&(o.preventDefault(),s||o.currentTarget.closest("form")?.querySelector('button[type="submit"]')?.click())},children:[e?t.jsx(b,{iconName:e,className:"!w-5 !h-5 text-neutral-900 dark:text-white"}):t.jsx(k.Typography,{size:"small",variant:"regular",appearance:"subtitle",children:"Select Icon"}),e&&f&&!l?t.jsx(h.CloseRounded,{className:"!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500",onClick:j}):null]}),p&&t.jsx(k.Typography,{size:"extra-small",className:"text-red-500 font-medium",children:p})]})})},F=d.lazy(()=>Promise.resolve({default:e=>t.jsx(d.Suspense,{fallback:t.jsx("div",{className:"min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md"}),children:t.jsx(L,{...e})})}));exports.IconPicker=F;exports.IconRenderer=b;
 //# sourceMappingURL=IconPicker.cjs.js.map

package/dist/components/forms/icon-picker/IconPicker.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={style} className=\"p-1\">\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='regular'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}
+{"version":3,"file":"IconPicker.cjs.js","sources":["../../../../src/components/forms/icon-picker/IconPicker.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { Suspense, useEffect, useRef, useState } from 'react';\nimport { FixedSizeGrid, type GridChildComponentProps } from 'react-window';\nimport * as AllIcons from '@mui/icons-material';\nimport { IconButton, type SvgIconOwnProps } from '@mui/material';\nimport { Popover, Tooltip } from \"antd\";\nimport { Typography } from \"../../data-display/typography/Typography\";\nimport { InputField } from \"../input-field/InputField\";\nimport { COUNTRY_CODES, countryNameFromCode } from \"../../../types/icon-picker\";\nimport { getFlagComponent } from \"../../../utils/countryFlags\";\nimport { InputLabel } from '../shared/InputLabel';\n\nconst roundedIconNames = Object.keys(AllIcons).filter((name) =>\n  name?.endsWith(\"Rounded\")\n);\n\n// Merge icon names and country codes for the picker\nconst mergedIconNames = [\n  ...(roundedIconNames || []),\n  ...(COUNTRY_CODES || []).map((code) => `flag-${code}`),\n];\n\n// Utility function to convert camelCase to human-readable format\nconst formatIconName = (iconName: string): string => {\n  // Handle flag icons\n  if (iconName?.startsWith(\"flag-\")) {\n    const code = iconName?.replace(\"flag-\", \"\");\n    return countryNameFromCode(code || \"\") || code;\n  }\n\n  // Convert camelCase to space-separated words\n  // e.g., \"PersonRounded\" -> \"Person Rounded\"\n  return iconName.replaceAll(/([A-Z])/g, \" $1\").trim();\n};\n\n/** Ant Design `Popover` placement for the icon panel (bottom edge of the trigger). */\nexport type IconPickerDropdownPosition = 'bottom' | 'bottomLeft' | 'bottomRight';\n\nexport interface IconPickerContentProps {\n  selectedIcon: string | null;\n  onChange: (iconName: string | null) => void;\n  label?: string;\n  required?: boolean;\n  allowClear?: boolean;\n  disabled?: boolean;\n  errorMessage?: string;\n  /** Popover placement: `bottom` | `bottomLeft` | `bottomRight`. Default: `bottom`. */\n  dropdownPosition?: IconPickerDropdownPosition;\n}\n\ninterface IconPickerContentInternalProps {\n  onChange: (iconName: string | null) => void;\n  selectedIcon: string | null;\n  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;\n}\n\nconst IconPickerContent = ({\n  onChange,\n  selectedIcon,\n  setOpen,\n}: IconPickerContentInternalProps) => {\n  const [searchTerm, setSearchTerm] = useState<string>(\"\");\n\n  // Filter both icons and flags\n  const filteredIcons = (mergedIconNames || []).filter((name) => {\n    if (name?.startsWith(\"flag-\")) {\n      // For flags, allow search by country code or country name\n      const code = name?.replace(\"flag-\", \"\");\n      return (\n        code\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\") ||\n        countryNameFromCode(code || \"\")\n          ?.toLowerCase()\n          ?.includes(searchTerm?.trim()?.toLowerCase() || \"\")\n      );\n    }\n    return name\n      ?.trim()\n      ?.toLowerCase()\n      ?.includes(searchTerm?.trim()?.toLowerCase() || \"\");\n  });\n\n  const handleClick = (icon: string, event: React.MouseEvent) => {\n    event.stopPropagation();\n    if (selectedIcon === icon) {\n      onChange?.(null);\n      return;\n    }\n    onChange?.(icon);\n    setOpen?.(false);\n  };\n\n  return (\n    <div \n      className=\"flex flex-col gap-3\"\n      onKeyDown={(e) => {\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n      }}\n    >\n      <InputField\n        id={`input-field-icon-picker`}\n        placeholder=\"Search icons...\"\n        onChange={(value) => setSearchTerm(value || \"\")}\n        fieldSuffix={\n          <AllIcons.Search className=\"!w-4 !h-4 text-neutral-400\" />\n        }\n      />\n      <FixedSizeGrid\n        columnCount={5}\n        rowCount={Math.ceil((filteredIcons?.length || 0) / 5)}\n        columnWidth={40}\n        rowHeight={40}\n        width={220}\n        height={240}\n      >\n        {({ columnIndex, rowIndex, style }: GridChildComponentProps) => {\n          const itemIndex = rowIndex * 5 + columnIndex;\n          const iconName = filteredIcons?.[itemIndex];\n          return iconName ? (\n            <div style={style} className=\"p-1\">\n              <Tooltip title={formatIconName(iconName)} placement='bottom'>\n                <IconButton\n                type='button'\n                  className={classNames(\n                    \"flex items-center justify-center  !rounded-md hover:bg-neutral-200 dark:hover:bg-black-700\",\n                    {\n                      \"!bg-primary-50 dark:!bg-black-800\":\n                        selectedIcon === iconName,\n                    }\n                  )}\n                  onClick={(event) => handleClick(iconName, event)}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.preventDefault();\n                      e.stopPropagation();\n                    }\n                  }}\n                >\n                  <IconRenderer\n                    iconName={iconName}\n                    className=\"!w-5 !h-5 text-neutral-900 dark:text-white\"\n                  />\n                </IconButton>\n              </Tooltip>\n            </div>\n          ) : null;\n        }}\n      </FixedSizeGrid>\n    </div>\n  );\n};\n\ninterface IconRendererProps {\n  iconName: string;\n  sx?: SvgIconOwnProps['sx'];\n  className?: string;\n  isHovering?: boolean;\n}\n\nexport const IconRenderer = ({ iconName, sx, className, isHovering }: IconRendererProps) => {\n  // Render flag if iconName starts with 'flag-'\n  if (iconName?.startsWith?.('flag-')) {\n    const code = iconName?.replace('flag-', '');\n    return getFlagComponent?.(code || '', isHovering || false) || <div>-</div>;\n  }\n  const Icon = AllIcons?.[iconName as keyof typeof AllIcons] as React.ComponentType<{\n    sx?: SvgIconOwnProps['sx'];\n    className?: string;\n    isHovering?: boolean;\n  }>;\n\n  if (!Icon) {\n    return <div>-</div>;\n  }\n\n  return <Icon sx={sx} className={className} isHovering={isHovering} />;\n};\n\nconst IconPickerBase = ({\n  selectedIcon,\n  onChange,\n  label,\n  required = false,\n  allowClear = true,\n  disabled = false,\n  errorMessage,\n  dropdownPosition = 'bottom',\n}: IconPickerContentProps) => {\n  const [open, setOpen] = useState(false);\n  const mouseClickRef = useRef(false);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const wasOpenRef = useRef(false);\n\n  useEffect(() => {\n    if (wasOpenRef.current && !open) {\n      buttonRef.current?.focus();\n    }\n    wasOpenRef.current = open;\n  }, [open]);\n  const handleClearIcon = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onChange?.('');\n  };\n\n  return (\n    <Popover\n      arrow={false}\n      placement={dropdownPosition}\n      trigger='click'\n      getPopupContainer={(triggerNode) => triggerNode?.parentElement || document.body}\n      open={open}\n      onOpenChange={(newOpen) => {\n        if (newOpen) {\n          if (mouseClickRef.current) {\n            setOpen(true);\n          }\n          mouseClickRef.current = false;\n        } else {\n          setOpen(false);\n        }\n      }}\n      content={<IconPickerContent onChange={onChange} selectedIcon={selectedIcon} setOpen={setOpen} />}\n    >\n      <div className='flex flex-col gap-1'>\n        {label ? (\n          <InputLabel label={label || \"\"} required={required || false} />\n        ) : null}\n        <button\n          ref={buttonRef}\n          type='button'\n          id={`btn-icon-picker-icon-${selectedIcon ? 'selected' : 'unselected'}`}\n          className={`lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${\n            disabled ? 'cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800' : 'bg-white dark:bg-black-800'\n          } ${errorMessage ? 'border-red-500' : 'focus:border-primary-600 dark:focus:border-primary-400'} flex items-center justify-between gap-2`}\n          disabled={disabled}\n          onClick={(e) => {\n            if (disabled) {\n              e.preventDefault();\n              e.stopPropagation();\n              return;\n            }\n            if (e.detail > 0) {\n              mouseClickRef.current = true;\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') {\n              e.preventDefault();\n              if (!open) {\n                const form = (e.currentTarget as HTMLElement).closest('form');\n                const submitBtn = form?.querySelector('button[type=\"submit\"]') as HTMLButtonElement | null;\n                submitBtn?.click();\n              }\n            }\n          }}\n        >\n          {selectedIcon ? (\n            <IconRenderer iconName={selectedIcon} className='!w-5 !h-5 text-neutral-900 dark:text-white' />\n          ) : (\n            <Typography\n              size='small'\n              variant='regular'\n              appearance='subtitle'\n            >\n              Select Icon\n            </Typography>\n          )}\n          {selectedIcon && allowClear && !disabled ? (\n            <AllIcons.CloseRounded\n              className='!w-5 !h-5 hover:bg-neutral-100 dark:hover:bg-black-800 rounded-full transition-colors cursor-pointer text-neutral-400 dark:text-neutral-500'\n              onClick={handleClearIcon}\n            />\n          ) : (\n           null\n          )}\n        </button>\n        {errorMessage && (\n          <Typography size='extra-small' className='text-red-500 font-medium'>\n            {errorMessage}\n          </Typography>\n        )}\n      </div>\n    </Popover>\n  );\n};\n\nexport const IconPicker = React.lazy(() =>\n  Promise.resolve({\n    default: (props: IconPickerContentProps) => (\n      <Suspense fallback={<div className='min-w-20 h-8 animate-pulse bg-neutral-100 dark:bg-black-800 rounded-md' />}>\n        <IconPickerBase {...props} />\n      </Suspense>\n    ),\n  }),\n);\n\n"],"names":["roundedIconNames","AllIcons","name","mergedIconNames","COUNTRY_CODES","code","formatIconName","iconName","countryNameFromCode","IconPickerContent","onChange","selectedIcon","setOpen","searchTerm","setSearchTerm","useState","filteredIcons","handleClick","icon","event","jsxs","e","jsx","InputField","value","FixedSizeGrid","columnIndex","rowIndex","style","itemIndex","Tooltip","IconButton","classNames","IconRenderer","sx","className","isHovering","getFlagComponent","Icon","IconPickerBase","label","required","allowClear","disabled","errorMessage","dropdownPosition","open","mouseClickRef","useRef","buttonRef","wasOpenRef","useEffect","handleClearIcon","Popover","triggerNode","newOpen","InputLabel","Typography","IconPicker","React","props","Suspense"],"mappings":"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"}

package/dist/components/forms/icon-picker/IconPicker.es.js

@@ -140,7 +140,7 @@ const W = Object.keys(h).filter(
             ref: i,
             type: "button",
             id: `btn-icon-picker-icon-${e ? "selected" : "unselected"}`,
-            className: `lax-form-trigger min-w-[83px] py-1.5 px-3 rounded-md border ${l ? "cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800" : "bg-white dark:bg-black-800"} ${m ? "border-red-500" : "focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,
+            className: `lax-form-trigger min-w-[83px] h-8 py-1.5 px-3 rounded-md border ${l ? "cursor-not-allowed opacity-60 bg-neutral-50 dark:bg-black-800" : "bg-white dark:bg-black-800"} ${m ? "border-red-500" : "focus:border-primary-600 dark:focus:border-primary-400"} flex items-center justify-between gap-2`,
             disabled: l,
             onClick: (o) => {
               if (l) {