@trsys-tech/matrix-library 0.6.3-canary-1 → 0.6.3-canary-3

package/dist/datagrid.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid.es.js","sources":["../src/components/data-grid/DataGrid.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { forwardRef, HTMLAttributes, useMemo } from \"react\";\r\nimport { AgGridReact, AgGridReactProps } from \"ag-grid-react\";\r\nimport { GridApi, GridReadyEvent, themeQuartz, AllCommunityModule, ModuleRegistry, Theme } from \"ag-grid-community\";\r\nimport { CircleXmark, ElipsisVertical, Magnifier, Print, Refresh, Snowflake, Trashcan } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { printHtml } from \"../../lib/printHtml\";\r\nimport { TextField } from \"../text-field/TextField\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { IconButton, IconButtonProps } from \"../icon-botton/IconButton\";\r\nimport { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from \"../popover/Popover\";\r\n\r\n// Register all Community features\r\n// Todo: Register only the required features\r\nModuleRegistry.registerModules([AllCommunityModule]);\r\n\r\n/**\r\n * Default ag-Grid theme used by DataGrid.\r\n */\r\nconst dataGridDefaultTheme = themeQuartz.withParams({\r\n  fontFamily: \"DMSans\",\r\n  fontSize: \"12px\",\r\n  headerFontSize: \"12px\",\r\n  headerFontWeight: 700,\r\n  headerBackgroundColor: \"hsl(var(--primary-50))\",\r\n  backgroundColor: \"hsl(var(--gray-0))\",\r\n  accentColor: \"hsl(var(--primary-300))\",\r\n  foregroundColor: \"hsl(var(--text-500))\",\r\n  cellTextColor: \"hsl(var(--text-500))\",\r\n});\r\n\r\n/**\r\n * Shared DataGrid state exposed through context.\r\n */\r\ntype DataGridContext = {\r\n  api: GridApi | null;\r\n  setApi: (value: GridApi) => void;\r\n  rowData: any[] | null | undefined;\r\n  setRowData: (value: any[] | null | undefined) => void;\r\n  gridId: string;\r\n  quickFilterText: string;\r\n  setQuickFilterText: (value: string) => void;\r\n  actionbarExists: boolean;\r\n  setActionbarExists: (value: boolean) => void;\r\n  actionbarHeight: number;\r\n  setActionbarHeight: (value: number) => void;\r\n  pinnedRowIds: Set<string>;\r\n  setPinnedRowIds: (value: Set<string>) => void;\r\n};\r\n\r\nconst DataGridContext = React.createContext<DataGridContext | null>(null);\r\n\r\nconst useDataGrid = () => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useDataGrid should be used within <DataGrid>\");\r\n  }\r\n\r\n  return context;\r\n};\r\n\r\n/**\r\n * Props for the root DataGrid provider.\r\n */\r\ntype DataGridProps = {\r\n  /** Content rendered inside the provider. */\r\n  children: React.ReactNode;\r\n};\r\n\r\n/**\r\n * DataGrid provider.\r\n * Provides shared state for the grid shell, content, and toolbar actions.\r\n * @param {DataGridProps} props - DataGrid props.\r\n * @param {React.ReactNode} children - Content rendered inside the provider.\r\n * @returns {React.ReactElement}\r\n */\r\n\r\nconst DataGrid: React.FC<DataGridProps> = ({ children }) => {\r\n  const gridId = React.useId();\r\n  const [api, setApi] = React.useState<GridApi | null>(null);\r\n  const [rowData, setRowData] = React.useState<any[] | null | undefined>([]);\r\n  const [actionbarHeight, setActionbarHeight] = React.useState(0);\r\n  const [pinnedRowIds, setPinnedRowIds] = React.useState<Set<string>>(new Set());\r\n\r\n  const [quickFilterText, setQuickFilterText] = React.useState(\"\");\r\n  const [actionbarExists, setActionbarExists] = React.useState(false);\r\n  return (\r\n    <DataGridContext.Provider\r\n      value={{\r\n        api,\r\n        setApi,\r\n        rowData,\r\n        setRowData,\r\n        gridId,\r\n        quickFilterText,\r\n        setQuickFilterText,\r\n        actionbarExists,\r\n        setActionbarExists,\r\n        actionbarHeight,\r\n        setActionbarHeight,\r\n        pinnedRowIds,\r\n        setPinnedRowIds,\r\n      }}\r\n    >\r\n      {children}\r\n    </DataGridContext.Provider>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for the Ag Grid content wrapper.\r\n */\r\ntype DataGridContentProps = Omit<AgGridReactProps, \"theme\"> & {\r\n  /** Optional theme override forwarded to ag-Grid. */\r\n  theme?: Theme;\r\n};\r\n\r\n/**\r\n * DataGridContent component.\r\n * Connects ag-Grid to the shared DataGrid context and keeps pinned rows separate from the main row set.\r\n * @param {DataGridContentProps} props - Ag Grid props.\r\n * @param {Theme} [theme] - Optional ag-Grid theme override.\r\n * @param {GridReadyEvent} [onGridReady] - Called when the grid becomes ready.\r\n * @param {any[] | null | undefined} [rowData] - Row data rendered by the grid.\r\n * @param {string} [quickFilterText] - Quick filter text synced from the search action.\r\n * @param {React.CSSProperties} [containerStyle] - Inline styles applied to the grid container.\r\n * @param {Function} [getRowId] - Resolves the row id used to keep pinned rows stable.\r\n * @param {React.ForwardedRef<AgGridReact>} ref - Grid ref.\r\n * @returns {React.ReactElement}\r\n */\r\nconst DataGridContent = forwardRef<AgGridReact, DataGridContentProps>(\r\n  ({ theme: propTheme, onGridReady, quickFilterText: quickFilterTextProps, rowData: rowDataProps, containerStyle, getRowId, ...props }, ref) => {\r\n    const context = React.useContext(DataGridContext);\r\n\r\n    if (!context) {\r\n      throw new Error(\"DataGridContent should be used within <DataGrid>\");\r\n    }\r\n    const { rowData, setRowData, actionbarExists, setApi, setQuickFilterText, quickFilterText, gridId, actionbarHeight, pinnedRowIds } = context;\r\n\r\n    const theme = useMemo(() => {\r\n      return dataGridDefaultTheme.withParams({\r\n        headerHeight: 40,\r\n        wrapperBorderRadius: actionbarExists ? \"0px 0px 8px 8px\" : \"8px\",\r\n      });\r\n    }, [actionbarExists]);\r\n\r\n    const handleGridReady = (e: GridReadyEvent) => {\r\n      setApi(e.api);\r\n      onGridReady?.(e);\r\n    };\r\n\r\n    React.useEffect(() => {\r\n      setRowData(rowDataProps);\r\n    }, [rowDataProps, setRowData]);\r\n\r\n    React.useEffect(() => {\r\n      if (quickFilterTextProps !== undefined) {\r\n        setQuickFilterText(quickFilterTextProps ?? \"\");\r\n      }\r\n    }, [quickFilterTextProps, setQuickFilterText]);\r\n\r\n    const { finalRowData, finalPinnedTopRowData } = useMemo(() => {\r\n      if (!rowData || pinnedRowIds.size === 0) {\r\n        return { finalRowData: rowData, finalPinnedTopRowData: [] };\r\n      }\r\n\r\n      const pinned: any[] = [];\r\n      const unpinned: any[] = [];\r\n\r\n      rowData.forEach(data => {\r\n        const id = getRowId ? getRowId({ data, level: 0 } as any) : (data as any).id;\r\n        const stringId = id !== undefined && id !== null ? String(id) : undefined;\r\n\r\n        if (stringId !== undefined && pinnedRowIds.has(stringId)) {\r\n          pinned.push(data);\r\n        } else {\r\n          unpinned.push(data);\r\n        }\r\n      });\r\n\r\n      return { finalRowData: unpinned, finalPinnedTopRowData: pinned };\r\n    }, [rowData, pinnedRowIds, getRowId]);\r\n\r\n    return (\r\n      <AgGridReact\r\n        gridId={gridId}\r\n        theme={propTheme ?? theme}\r\n        rowData={finalRowData}\r\n        pinnedTopRowData={finalPinnedTopRowData}\r\n        quickFilterText={quickFilterText}\r\n        onGridReady={handleGridReady}\r\n        containerStyle={{ height: `calc(100% - ${actionbarHeight}px)`, ...containerStyle }}\r\n        getRowId={getRowId}\r\n        {...props}\r\n        ref={ref}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nDataGridContent.displayName = \"DataGridContent\";\r\n\r\n/**\r\n * Props for the DataGrid action bar container.\r\n */\r\ntype DatagridActionBarProps = HTMLAttributes<HTMLDivElement> & {};\r\n\r\n/**\r\n * DataGrid action bar.\r\n * Marks the grid as having a toolbar so the grid can adjust border radius and height.\r\n * @param {DatagridActionBarProps} props - Action bar props.\r\n * @param {React.ReactNode} children - Action bar content.\r\n * @param {string} className - Additional classes applied to the action bar.\r\n * @returns {React.ReactElement}\r\n */\r\nconst DataGridActionBar: React.FC<DatagridActionBarProps> = ({ className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridActionBar should be used within <DataGrid>\");\r\n  }\r\n  const ref = React.useRef<HTMLDivElement | null>(null);\r\n  const { setActionbarExists, setActionbarHeight } = context;\r\n  const { children } = props;\r\n\r\n  React.useEffect(() => {\r\n    setActionbarExists(true);\r\n    return () => setActionbarExists(false);\r\n  }, [setActionbarExists]);\r\n\r\n  React.useEffect(() => {\r\n    if (ref.current) {\r\n      setActionbarHeight(ref.current.clientHeight);\r\n    }\r\n  }, [setActionbarHeight]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center p-2 h-12 w-full bg-gray-0 border border-gray-200 border-b-0 -mb-[1px] z-10 rounded-t-[8px]\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for SearchAction.\r\n */\r\ntype SearchActionProps = HTMLAttributes<HTMLDivElement> & {\r\n  /** Opens the search input immediately on mount. */\r\n  defaultOpen?: boolean;\r\n  /** Focuses the input the first time it opens. */\r\n  defaultOpenAutoFocus?: boolean;\r\n};\r\n\r\n/**\r\n * Search action.\r\n * Toggles the quick filter input and manages its open/close focus behavior.\r\n * @param {SearchActionProps} props - Search action props.\r\n * @param {boolean} [defaultOpen] - Opens the search input immediately on mount.\r\n * @param {boolean} [defaultOpenAutoFocus] - Focuses the input the first time it opens.\r\n * @param {React.ReactNode} children - Optional wrapper content.\r\n * @param {string} className - Additional wrapper classes.\r\n * @returns {React.ReactElement}\r\n */\r\nconst SearchAction: React.FC<SearchActionProps> = ({ defaultOpen = false, defaultOpenAutoFocus = true, className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"SearchAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const { quickFilterText, setQuickFilterText } = context;\r\n\r\n  const [isSearchInputOpen, setIsSearchInputOpen] = React.useState(defaultOpen);\r\n  const [isClosing, setIsClosing] = React.useState(false);\r\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n  const firstRenderRef = React.useRef(true);\r\n\r\n  const handleClear = () => {\r\n    context.setQuickFilterText(\"\");\r\n    if (inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleOpen = () => {\r\n    setIsSearchInputOpen(true);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (isSearchInputOpen && inputRef?.current && (defaultOpenAutoFocus || !firstRenderRef.current)) {\r\n      inputRef.current.focus();\r\n    }\r\n    firstRenderRef.current = false;\r\n  }, [isSearchInputOpen, defaultOpenAutoFocus]);\r\n\r\n  const handleClose = () => {\r\n    setIsClosing(true);\r\n    context.setQuickFilterText(\"\");\r\n    setTimeout(() => {\r\n      setIsSearchInputOpen(false);\r\n      setIsClosing(false);\r\n    }, 200);\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"max-w-60\", className)} {...props}>\r\n      {isSearchInputOpen || isClosing ? (\r\n        <TextField\r\n          ref={inputRef}\r\n          className={cn(\"relative h-7.5\", isSearchInputOpen && !isClosing ? \"animate-input-open\" : \"\", isClosing && \"animate-input-close\")}\r\n          onChange={e => setQuickFilterText(e.target.value)}\r\n          value={quickFilterText}\r\n          startAdornment={\r\n            <IconButton type=\"button\" variant=\"toolbar\" className=\"p-0.5 h-6 w-6 border-none mx-1\" onClick={handleClose}>\r\n              <Magnifier className=\"w-5 h-5\" />\r\n            </IconButton>\r\n          }\r\n          endAdornment={\r\n            quickFilterText && (\r\n              <IconButton type=\"button\" variant=\"toolbar\" className=\"p-0.5 w-6 h-6 border-none mx-1\" onClick={handleClear}>\r\n                <CircleXmark className=\"w-5 h-5\" />\r\n              </IconButton>\r\n            )\r\n          }\r\n        />\r\n      ) : (\r\n        <IconButton type=\"button\" variant=\"toolbar\" className=\"p-0.5 w-6 h-6 m-1\" onClick={handleOpen}>\r\n          <Magnifier className=\"w-5 h-5\" />\r\n        </IconButton>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for FreezeAction.\r\n */\r\ntype FreezeActionProps = ButtonProps & {\r\n  /** Label shown when rows can be frozen. */\r\n  freezeText?: string;\r\n  /** Label shown when rows are already frozen. */\r\n  unFreezeText?: string;\r\n};\r\n\r\n/**\r\n * Freeze action.\r\n * Pins the current selection when rows are selected, or clears pinned rows when the grid is already frozen.\r\n * @param {FreezeActionProps} props - Freeze action props.\r\n * @param {boolean} [disabled] - Disables the action button.\r\n * @param {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called after the freeze toggle runs.\r\n * @returns {React.ReactElement}\r\n */\r\nconst FreezeAction: React.FC<FreezeActionProps> = ({ freezeText, unFreezeText, onClick, disabled, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"FreezeAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const [pinnedRowCount, setPinnedRowCount] = React.useState(0);\r\n  const [selectedRowsCount, setSelectedRowsCount] = React.useState(0);\r\n\r\n  const { api, pinnedRowIds, setPinnedRowIds } = context;\r\n\r\n  const freezeRows = () => {\r\n    if (!api) return;\r\n\r\n    // Get currently selected rows\r\n    const selectedRows = api.getSelectedNodes();\r\n\r\n    if (selectedRows.length > 0) {\r\n      const newPinnedIds = new Set(pinnedRowIds);\r\n      selectedRows.forEach(row => {\r\n        if (row.id !== undefined) {\r\n          newPinnedIds.add(row.id);\r\n        }\r\n      });\r\n      setPinnedRowIds(newPinnedIds);\r\n      api.deselectAll();\r\n    }\r\n  };\r\n\r\n  const unfreezeRows = () => {\r\n    setPinnedRowIds(new Set());\r\n  };\r\n\r\n  const handleFreezing = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (api) {\r\n      const pinnedRowsCount = api.getPinnedTopRowCount();\r\n      if (pinnedRowsCount > 0) {\r\n        unfreezeRows();\r\n      } else {\r\n        freezeRows();\r\n      }\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    api?.addEventListener(\"pinnedRowDataChanged\", () => {\r\n      setPinnedRowCount(api.getPinnedTopRowCount());\r\n    });\r\n\r\n    api?.addEventListener(\"selectionChanged\", () => {\r\n      setSelectedRowsCount(api.getSelectedNodes().length);\r\n    });\r\n\r\n    return () => {\r\n      if (api?.isDestroyed()) return;\r\n      api?.removeEventListener(\"pinnedRowDataChanged\", () => {\r\n        setPinnedRowCount(api.getPinnedTopRowCount());\r\n      });\r\n\r\n      api?.removeEventListener(\"selectionChanged\", () => {\r\n        setSelectedRowsCount(api.getSelectedNodes().length);\r\n      });\r\n    };\r\n  }, [api]);\r\n\r\n  return (\r\n    <Button\r\n      variant=\"text\"\r\n      type=\"button\"\r\n      onClick={handleFreezing}\r\n      startIcon={<Snowflake className=\"w-4.5 h-4.5\" />}\r\n      disabled={(!pinnedRowCount && !selectedRowsCount) || disabled}\r\n      {...props}\r\n    >\r\n      {pinnedRowCount ? (unFreezeText ?? \"Unfreeze\") : (freezeText ?? \"Freeze\")}\r\n    </Button>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for PrintAction.\r\n */\r\ntype PrintActionProps = IconButtonProps & {};\r\n\r\n/**\r\n * Print action.\r\n * Switches the grid to print layout, captures the rendered markup, and opens the browser print flow.\r\n * @param {PrintActionProps} props - Print action props.\r\n * @param {React.ReactNode} [children] - Custom icon content rendered in the button.\r\n * @param {string} [className] - Additional button classes.\r\n * @param {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called after printing is triggered.\r\n * @returns {React.ReactElement}\r\n */\r\nconst PrintAction: React.FC<PrintActionProps> = ({ children, className, onClick, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"PrintAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handlePrint = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (context.api) {\r\n      context.api.setGridOption(\"domLayout\", \"print\");\r\n\r\n      setTimeout(() => {\r\n        const element = document.querySelector(\"[grid-id='\" + context.gridId + \"']\") as HTMLElement;\r\n        const header = document.head;\r\n        const html = `<html>\r\n        ${header.innerHTML}\r\n        ${element.outerHTML}\r\n        </html>`;\r\n        printHtml(html);\r\n        context?.api?.setGridOption(\"domLayout\", undefined);\r\n      });\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  return (\r\n    <IconButton type=\"button\" variant=\"toolbar\" className={cn(\"p-0.5 w-6 h-6\", className)} onClick={handlePrint} {...props}>\r\n      {children ?? <Print className=\"w-5 h-5\" />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for RefreshAction.\r\n */\r\ntype RefreshActionProps = Omit<IconButtonProps, \"onClick\"> & {\r\n  /** Callback invoked when the refresh action is clicked. */\r\n  onRefresh: () => void;\r\n};\r\n\r\n/**\r\n * Refresh action.\r\n * Calls the provided refresh callback and reflects the loading state in the toolbar button.\r\n * @param {RefreshActionProps} props - Refresh action props.\r\n * @param {() => void} onRefresh - Called when the button is clicked.\r\n * @param {boolean} [loading] - Shows the loading spinner and disables the button.\r\n * @param {React.ReactNode} [children] - Custom icon content rendered in the button.\r\n * @param {string} [className] - Additional button classes.\r\n * @returns {React.ReactElement}\r\n */\r\nconst RefreshAction: React.FC<RefreshActionProps> = ({ className, onRefresh, children, loading, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"RefreshAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handleRefresh = () => {\r\n    onRefresh();\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      type=\"button\"\r\n      className={cn(\"p-0.5 w-6 h-6\", loading && \"disabled:bg-transparent\", className)}\r\n      variant=\"toolbar\"\r\n      onClick={handleRefresh}\r\n      disabled={loading}\r\n      {...props}\r\n    >\r\n      {children ?? <Refresh className={cn(\"w-4.5 h-4.5\", loading && \"animate-spin\")} />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for DeleteAction.\r\n */\r\ntype DeleteActionProps = Omit<ButtonProps, \"onClick\"> & {\r\n  /** Callback invoked when the delete action is clicked. */\r\n  onDelete: () => void;\r\n};\r\n\r\n/**\r\n * Delete action.\r\n * Renders a danger button with the delete icon and delegates the click to the provided handler.\r\n * @param {DeleteActionProps} props - Delete action props.\r\n * @param {() => void} onDelete - Called when the button is clicked.\r\n * @param {React.ReactNode} [children] - Button label or custom content.\r\n * @returns {React.ReactElement}\r\n */\r\nconst DeleteAction: React.FC<DeleteActionProps> = ({ onDelete, children, ...props }) => {\r\n  const handleDelete = () => {\r\n    onDelete();\r\n  };\r\n\r\n  return (\r\n    <Button variant=\"danger\" type=\"button\" onClick={handleDelete} startIcon={<Trashcan className=\"w-4.5 h-4.5\" />} {...props}>\r\n      {children}\r\n    </Button>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for ExtraActions.\r\n */\r\ntype ExtraActionsProps = PopoverContentProps & {\r\n  /** Menu items rendered inside the popover. */\r\n  children: React.ReactNode;\r\n  /** Props forwarded to the popover trigger and popover root. */\r\n  slotProps?: {\r\n    triggerProps?: PopoverTriggerProps;\r\n    popoverProps?: PopoverProps;\r\n  };\r\n};\r\n\r\n/**\r\n * Extra actions menu.\r\n * Wraps overflow actions in a popover anchored to the vertical ellipsis trigger.\r\n * @param {ExtraActionsProps} props - Extra actions props.\r\n * @param {React.ReactNode} children - Menu items rendered inside the popover.\r\n * @param {{ triggerProps?: PopoverTriggerProps; popoverProps?: PopoverProps; }} [slotProps] - Props forwarded to the trigger and popover root.\r\n * @param {string} [className] - Additional popover content classes.\r\n * @returns {React.ReactElement}\r\n */\r\nconst ExtraActions: React.FC<ExtraActionsProps> = ({ children, slotProps, className, ...props }) => {\r\n  return (\r\n    <Popover {...(slotProps?.popoverProps ?? {})}>\r\n      <PopoverTrigger {...(slotProps?.triggerProps ?? {})}>\r\n        <ElipsisVertical className=\"w-4.5 h-4.5 text-primary\" />\r\n      </PopoverTrigger>\r\n      <PopoverContent align=\"end\" className={cn(\"w-40\", className)} {...props}>\r\n        {children}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport {\r\n  DataGrid,\r\n  DataGridContent,\r\n  DataGridActionBar,\r\n  SearchAction,\r\n  FreezeAction,\r\n  PrintAction,\r\n  RefreshAction,\r\n  ExtraActions,\r\n  DeleteAction,\r\n  type DataGridProps,\r\n  type DataGridContentProps,\r\n  type DatagridActionBarProps,\r\n  type SearchActionProps,\r\n  type FreezeActionProps,\r\n  type RefreshActionProps,\r\n  type ExtraActionsProps,\r\n  type DeleteActionProps,\r\n  useDataGrid,\r\n  dataGridDefaultTheme,\r\n};\r\n"],"names":["ModuleRegistry","AllCommunityModule","dataGridDefaultTheme","themeQuartz","DataGridContext","React","useDataGrid","context","DataGrid","children","gridId","api","setApi","rowData","setRowData","actionbarHeight","setActionbarHeight","pinnedRowIds","setPinnedRowIds","quickFilterText","setQuickFilterText","actionbarExists","setActionbarExists","jsx","DataGridContent","forwardRef","propTheme","onGridReady","quickFilterTextProps","rowDataProps","containerStyle","getRowId","props","ref","theme","useMemo","handleGridReady","e","finalRowData","finalPinnedTopRowData","pinned","unpinned","data","id","stringId","AgGridReact","DataGridActionBar","className","cn","SearchAction","defaultOpen","defaultOpenAutoFocus","isSearchInputOpen","setIsSearchInputOpen","isClosing","setIsClosing","inputRef","firstRenderRef","handleClear","handleOpen","handleClose","TextField","IconButton","Magnifier","CircleXmark","FreezeAction","freezeText","unFreezeText","onClick","disabled","pinnedRowCount","setPinnedRowCount","selectedRowsCount","setSelectedRowsCount","freezeRows","selectedRows","newPinnedIds","row","unfreezeRows","handleFreezing","Button","Snowflake","PrintAction","handlePrint","element","html","printHtml","Print","RefreshAction","onRefresh","loading","handleRefresh","Refresh","DeleteAction","onDelete","Trashcan","ExtraActions","slotProps","Popover","PopoverTrigger","ElipsisVertical","PopoverContent"],"mappings":"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"}
+{"version":3,"file":"datagrid.es.js","sources":["../src/components/data-grid/DataGrid.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { forwardRef, HTMLAttributes, useMemo } from \"react\";\r\nimport { AgGridReact, AgGridReactProps } from \"ag-grid-react\";\r\nimport { GridApi, GridReadyEvent, themeQuartz, AllCommunityModule, ModuleRegistry, Theme } from \"ag-grid-community\";\r\nimport { CircleXmark, ElipsisVertical, Magnifier, Print, Refresh, Snowflake, Trashcan } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { printHtml } from \"../../lib/printHtml\";\r\nimport { TextField } from \"../text-field/TextField\";\r\nimport { Button, ButtonProps } from \"../button/Button\";\r\nimport { IconButton, IconButtonProps } from \"../icon-botton/IconButton\";\r\nimport { Popover, PopoverContent, PopoverContentProps, PopoverProps, PopoverTrigger, PopoverTriggerProps } from \"../popover/Popover\";\r\n\r\n// Register all Community features\r\n// Todo: Register only the required features\r\nModuleRegistry.registerModules([AllCommunityModule]);\r\n\r\ntype DataGridRowWithId = {\r\n  id?: string | number | null;\r\n};\r\n\r\ntype ResolveRowId = (data: unknown) => string | undefined;\r\n\r\n/**\r\n * Default ag-Grid theme used by DataGrid.\r\n */\r\nconst dataGridDefaultTheme = themeQuartz.withParams({\r\n  fontFamily: \"DMSans\",\r\n  fontSize: \"12px\",\r\n  headerFontSize: \"12px\",\r\n  headerFontWeight: 700,\r\n  headerBackgroundColor: \"hsl(var(--primary-50))\",\r\n  backgroundColor: \"hsl(var(--gray-0))\",\r\n  accentColor: \"hsl(var(--primary-300))\",\r\n  foregroundColor: \"hsl(var(--text-500))\",\r\n  cellTextColor: \"hsl(var(--text-500))\",\r\n});\r\n\r\nconst fallbackResolveRowId: ResolveRowId = data => {\r\n  const id = (data as DataGridRowWithId | null | undefined)?.id;\r\n\r\n  return id !== undefined && id !== null ? String(id) : undefined;\r\n};\r\n\r\nconst createResolveRowId = (getRowId?: AgGridReactProps[\"getRowId\"]): ResolveRowId => {\r\n  if (!getRowId) {\r\n    return fallbackResolveRowId;\r\n  }\r\n\r\n  return data => {\r\n    const id = getRowId({ data, level: 0 } as any);\r\n\r\n    return id !== undefined && id !== null ? String(id) : fallbackResolveRowId(data);\r\n  };\r\n};\r\n\r\n/**\r\n * Shared DataGrid state exposed through context.\r\n */\r\ntype DataGridContext = {\r\n  api: GridApi | null;\r\n  setApi: (value: GridApi) => void;\r\n  rowData: any[] | null | undefined;\r\n  setRowData: (value: any[] | null | undefined) => void;\r\n  gridId: string;\r\n  quickFilterText: string;\r\n  setQuickFilterText: (value: string) => void;\r\n  actionbarExists: boolean;\r\n  setActionbarExists: (value: boolean) => void;\r\n  actionbarHeight: number;\r\n  setActionbarHeight: (value: number) => void;\r\n  pinnedRowIds: Set<string>;\r\n  setPinnedRowIds: (value: Set<string>) => void;\r\n  resolveRowIdRef: React.MutableRefObject<ResolveRowId>;\r\n};\r\n\r\nconst DataGridContext = React.createContext<DataGridContext | null>(null);\r\n\r\nconst useDataGrid = () => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"useDataGrid should be used within <DataGrid>\");\r\n  }\r\n\r\n  return context;\r\n};\r\n\r\n/**\r\n * Props for the root DataGrid provider.\r\n */\r\ntype DataGridProps = {\r\n  /** Content rendered inside the provider. */\r\n  children: React.ReactNode;\r\n};\r\n\r\n/**\r\n * DataGrid provider.\r\n * Provides shared state for the grid shell, content, and toolbar actions.\r\n * @param {DataGridProps} props - DataGrid props.\r\n * @param {React.ReactNode} children - Content rendered inside the provider.\r\n * @returns {React.ReactElement}\r\n */\r\n\r\nconst DataGrid: React.FC<DataGridProps> = ({ children }) => {\r\n  const gridId = React.useId();\r\n  const [api, setApi] = React.useState<GridApi | null>(null);\r\n  const [rowData, setRowData] = React.useState<any[] | null | undefined>([]);\r\n  const [actionbarHeight, setActionbarHeight] = React.useState(0);\r\n  const [pinnedRowIds, setPinnedRowIds] = React.useState<Set<string>>(new Set());\r\n  const resolveRowIdRef = React.useRef<ResolveRowId>(fallbackResolveRowId);\r\n\r\n  const [quickFilterText, setQuickFilterText] = React.useState(\"\");\r\n  const [actionbarExists, setActionbarExists] = React.useState(false);\r\n  return (\r\n    <DataGridContext.Provider\r\n      value={{\r\n        api,\r\n        setApi,\r\n        rowData,\r\n        setRowData,\r\n        gridId,\r\n        quickFilterText,\r\n        setQuickFilterText,\r\n        actionbarExists,\r\n        setActionbarExists,\r\n        actionbarHeight,\r\n        setActionbarHeight,\r\n        pinnedRowIds,\r\n        setPinnedRowIds,\r\n        resolveRowIdRef,\r\n      }}\r\n    >\r\n      {children}\r\n    </DataGridContext.Provider>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for the Ag Grid content wrapper.\r\n */\r\ntype DataGridContentProps = Omit<AgGridReactProps, \"theme\"> & {\r\n  /** Optional theme override forwarded to ag-Grid. */\r\n  theme?: Theme;\r\n};\r\n\r\n/**\r\n * DataGridContent component.\r\n * Connects ag-Grid to the shared DataGrid context and keeps pinned rows separate from the main row set.\r\n * @param {DataGridContentProps} props - Ag Grid props.\r\n * @param {Theme} [theme] - Optional ag-Grid theme override.\r\n * @param {GridReadyEvent} [onGridReady] - Called when the grid becomes ready.\r\n * @param {any[] | null | undefined} [rowData] - Row data rendered by the grid.\r\n * @param {string} [quickFilterText] - Quick filter text synced from the search action.\r\n * @param {React.CSSProperties} [containerStyle] - Inline styles applied to the grid container.\r\n * @param {Function} [getRowId] - Resolves the row id used to keep pinned rows stable.\r\n * @param {React.ForwardedRef<AgGridReact>} ref - Grid ref.\r\n * @returns {React.ReactElement}\r\n */\r\nconst DataGridContent = forwardRef<AgGridReact, DataGridContentProps>(\r\n  ({ theme: propTheme, onGridReady, quickFilterText: quickFilterTextProps, rowData: rowDataProps, containerStyle, getRowId, ...props }, ref) => {\r\n    const context = React.useContext(DataGridContext);\r\n\r\n    if (!context) {\r\n      throw new Error(\"DataGridContent should be used within <DataGrid>\");\r\n    }\r\n    const {\r\n      rowData,\r\n      setRowData,\r\n      actionbarExists,\r\n      setApi,\r\n      setQuickFilterText,\r\n      quickFilterText,\r\n      gridId,\r\n      actionbarHeight,\r\n      pinnedRowIds,\r\n      resolveRowIdRef,\r\n    } = context;\r\n\r\n    const resolveRowId = React.useMemo(() => createResolveRowId(getRowId), [getRowId]);\r\n\r\n    const theme = useMemo(() => {\r\n      return dataGridDefaultTheme.withParams({\r\n        headerHeight: 40,\r\n        wrapperBorderRadius: actionbarExists ? \"0px 0px 8px 8px\" : \"8px\",\r\n      });\r\n    }, [actionbarExists]);\r\n\r\n    React.useEffect(() => {\r\n      resolveRowIdRef.current = resolveRowId;\r\n\r\n      return () => {\r\n        resolveRowIdRef.current = fallbackResolveRowId;\r\n      };\r\n    }, [resolveRowId, resolveRowIdRef]);\r\n\r\n    const handleGridReady = (e: GridReadyEvent) => {\r\n      setApi(e.api);\r\n      onGridReady?.(e);\r\n    };\r\n\r\n    React.useEffect(() => {\r\n      setRowData(rowDataProps);\r\n    }, [rowDataProps, setRowData]);\r\n\r\n    React.useEffect(() => {\r\n      if (quickFilterTextProps !== undefined) {\r\n        setQuickFilterText(quickFilterTextProps ?? \"\");\r\n      }\r\n    }, [quickFilterTextProps, setQuickFilterText]);\r\n\r\n    const { finalRowData, finalPinnedTopRowData } = useMemo(() => {\r\n      if (!rowData || pinnedRowIds.size === 0) {\r\n        return { finalRowData: rowData, finalPinnedTopRowData: [] };\r\n      }\r\n\r\n      const pinned: any[] = [];\r\n      const unpinned: any[] = [];\r\n\r\n      rowData.forEach(data => {\r\n        const id = resolveRowId(data);\r\n\r\n        if (id !== undefined && pinnedRowIds.has(id)) {\r\n          pinned.push(data);\r\n        } else {\r\n          unpinned.push(data);\r\n        }\r\n      });\r\n\r\n      return { finalRowData: unpinned, finalPinnedTopRowData: pinned };\r\n    }, [rowData, pinnedRowIds, resolveRowId]);\r\n\r\n    return (\r\n      <AgGridReact\r\n        gridId={gridId}\r\n        theme={propTheme ?? theme}\r\n        rowData={finalRowData}\r\n        pinnedTopRowData={finalPinnedTopRowData}\r\n        quickFilterText={quickFilterText}\r\n        onGridReady={handleGridReady}\r\n        containerStyle={{ height: `calc(100% - ${actionbarHeight}px)`, ...containerStyle }}\r\n        getRowId={getRowId}\r\n        {...props}\r\n        ref={ref}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\nDataGridContent.displayName = \"DataGridContent\";\r\n\r\n/**\r\n * Props for the DataGrid action bar container.\r\n */\r\ntype DatagridActionBarProps = HTMLAttributes<HTMLDivElement> & {};\r\n\r\n/**\r\n * DataGrid action bar.\r\n * Marks the grid as having a toolbar so the grid can adjust border radius and height.\r\n * @param {DatagridActionBarProps} props - Action bar props.\r\n * @param {React.ReactNode} children - Action bar content.\r\n * @param {string} className - Additional classes applied to the action bar.\r\n * @returns {React.ReactElement}\r\n */\r\nconst DataGridActionBar: React.FC<DatagridActionBarProps> = ({ className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"DataGridActionBar should be used within <DataGrid>\");\r\n  }\r\n  const ref = React.useRef<HTMLDivElement | null>(null);\r\n  const { setActionbarExists, setActionbarHeight } = context;\r\n  const { children } = props;\r\n\r\n  React.useEffect(() => {\r\n    setActionbarExists(true);\r\n    return () => setActionbarExists(false);\r\n  }, [setActionbarExists]);\r\n\r\n  React.useEffect(() => {\r\n    if (ref.current) {\r\n      setActionbarHeight(ref.current.clientHeight);\r\n    }\r\n  }, [setActionbarHeight]);\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        \"relative flex items-center p-2 h-12 w-full bg-gray-0 border border-gray-200 border-b-0 -mb-[1px] z-10 rounded-t-[8px]\",\r\n        className,\r\n      )}\r\n      ref={ref}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for SearchAction.\r\n */\r\ntype SearchActionProps = HTMLAttributes<HTMLDivElement> & {\r\n  /** Opens the search input immediately on mount. */\r\n  defaultOpen?: boolean;\r\n  /** Focuses the input the first time it opens. */\r\n  defaultOpenAutoFocus?: boolean;\r\n};\r\n\r\n/**\r\n * Search action.\r\n * Toggles the quick filter input and manages its open/close focus behavior.\r\n * @param {SearchActionProps} props - Search action props.\r\n * @param {boolean} [defaultOpen] - Opens the search input immediately on mount.\r\n * @param {boolean} [defaultOpenAutoFocus] - Focuses the input the first time it opens.\r\n * @param {React.ReactNode} children - Optional wrapper content.\r\n * @param {string} className - Additional wrapper classes.\r\n * @returns {React.ReactElement}\r\n */\r\nconst SearchAction: React.FC<SearchActionProps> = ({ defaultOpen = false, defaultOpenAutoFocus = true, className, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"SearchAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const { quickFilterText, setQuickFilterText } = context;\r\n\r\n  const [isSearchInputOpen, setIsSearchInputOpen] = React.useState(defaultOpen);\r\n  const [isClosing, setIsClosing] = React.useState(false);\r\n  const inputRef = React.useRef<HTMLInputElement | null>(null);\r\n  const firstRenderRef = React.useRef(true);\r\n\r\n  const handleClear = () => {\r\n    context.setQuickFilterText(\"\");\r\n    if (inputRef.current) {\r\n      inputRef.current.focus();\r\n    }\r\n  };\r\n\r\n  const handleOpen = () => {\r\n    setIsSearchInputOpen(true);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    if (isSearchInputOpen && inputRef?.current && (defaultOpenAutoFocus || !firstRenderRef.current)) {\r\n      inputRef.current.focus();\r\n    }\r\n    firstRenderRef.current = false;\r\n  }, [isSearchInputOpen, defaultOpenAutoFocus]);\r\n\r\n  const handleClose = () => {\r\n    setIsClosing(true);\r\n    context.setQuickFilterText(\"\");\r\n    setTimeout(() => {\r\n      setIsSearchInputOpen(false);\r\n      setIsClosing(false);\r\n    }, 200);\r\n  };\r\n\r\n  return (\r\n    <div className={cn(\"max-w-60\", className)} {...props}>\r\n      {isSearchInputOpen || isClosing ? (\r\n        <TextField\r\n          ref={inputRef}\r\n          className={cn(\"relative h-7.5\", isSearchInputOpen && !isClosing ? \"animate-input-open\" : \"\", isClosing && \"animate-input-close\")}\r\n          onChange={e => setQuickFilterText(e.target.value)}\r\n          value={quickFilterText}\r\n          startAdornment={\r\n            <IconButton type=\"button\" variant=\"toolbar\" className=\"p-0.5 h-6 w-6 border-none mx-1\" onClick={handleClose}>\r\n              <Magnifier className=\"w-5 h-5\" />\r\n            </IconButton>\r\n          }\r\n          endAdornment={\r\n            quickFilterText && (\r\n              <IconButton type=\"button\" variant=\"toolbar\" className=\"p-0.5 w-6 h-6 border-none mx-1\" onClick={handleClear}>\r\n                <CircleXmark className=\"w-5 h-5\" />\r\n              </IconButton>\r\n            )\r\n          }\r\n        />\r\n      ) : (\r\n        <IconButton type=\"button\" variant=\"toolbar\" className=\"p-0.5 w-6 h-6 m-1\" onClick={handleOpen}>\r\n          <Magnifier className=\"w-5 h-5\" />\r\n        </IconButton>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for FreezeAction.\r\n */\r\ntype FreezeActionProps = ButtonProps & {\r\n  /** Label shown when rows can be frozen. */\r\n  freezeText?: string;\r\n  /** Label shown when rows are already frozen. */\r\n  unFreezeText?: string;\r\n};\r\n\r\n/**\r\n * Freeze action.\r\n * Pins the current selection when rows are selected, or clears pinned rows when the grid is already frozen.\r\n * @param {FreezeActionProps} props - Freeze action props.\r\n * @param {boolean} [disabled] - Disables the action button.\r\n * @param {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called after the freeze toggle runs.\r\n * @returns {React.ReactElement}\r\n */\r\nconst FreezeAction: React.FC<FreezeActionProps> = ({ freezeText, unFreezeText, onClick, disabled, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"FreezeAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const [pinnedRowCount, setPinnedRowCount] = React.useState(0);\r\n  const [selectedRowsCount, setSelectedRowsCount] = React.useState(0);\r\n\r\n  const { api, pinnedRowIds, setPinnedRowIds, resolveRowIdRef } = context;\r\n\r\n  const freezeRows = () => {\r\n    if (!api) return;\r\n\r\n    // Get currently selected rows\r\n    const selectedRows = api.getSelectedRows();\r\n\r\n    if (selectedRows.length > 0) {\r\n      const newPinnedIds = new Set(pinnedRowIds);\r\n      selectedRows.forEach(row => {\r\n        const rowId = resolveRowIdRef.current(row);\r\n\r\n        if (rowId !== undefined) {\r\n          newPinnedIds.add(rowId);\r\n        }\r\n      });\r\n      setPinnedRowIds(newPinnedIds);\r\n      api.deselectAll();\r\n    }\r\n  };\r\n\r\n  const unfreezeRows = () => {\r\n    setPinnedRowIds(new Set());\r\n  };\r\n\r\n  const handleFreezing = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (api) {\r\n      const pinnedRowsCount = api.getPinnedTopRowCount();\r\n      if (pinnedRowsCount > 0) {\r\n        unfreezeRows();\r\n      } else {\r\n        freezeRows();\r\n      }\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    api?.addEventListener(\"pinnedRowDataChanged\", () => {\r\n      setPinnedRowCount(api.getPinnedTopRowCount());\r\n    });\r\n\r\n    api?.addEventListener(\"selectionChanged\", () => {\r\n      setSelectedRowsCount(api.getSelectedNodes().length);\r\n    });\r\n\r\n    return () => {\r\n      if (api?.isDestroyed()) return;\r\n      api?.removeEventListener(\"pinnedRowDataChanged\", () => {\r\n        setPinnedRowCount(api.getPinnedTopRowCount());\r\n      });\r\n\r\n      api?.removeEventListener(\"selectionChanged\", () => {\r\n        setSelectedRowsCount(api.getSelectedNodes().length);\r\n      });\r\n    };\r\n  }, [api]);\r\n\r\n  return (\r\n    <Button\r\n      variant=\"text\"\r\n      type=\"button\"\r\n      onClick={handleFreezing}\r\n      startIcon={<Snowflake className=\"w-4.5 h-4.5\" />}\r\n      disabled={(!pinnedRowCount && !selectedRowsCount) || disabled}\r\n      {...props}\r\n    >\r\n      {pinnedRowCount ? (unFreezeText ?? \"Unfreeze\") : (freezeText ?? \"Freeze\")}\r\n    </Button>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for PrintAction.\r\n */\r\ntype PrintActionProps = IconButtonProps & {};\r\n\r\n/**\r\n * Print action.\r\n * Switches the grid to print layout, captures the rendered markup, and opens the browser print flow.\r\n * @param {PrintActionProps} props - Print action props.\r\n * @param {React.ReactNode} [children] - Custom icon content rendered in the button.\r\n * @param {string} [className] - Additional button classes.\r\n * @param {React.MouseEventHandler<HTMLButtonElement>} [onClick] - Called after printing is triggered.\r\n * @returns {React.ReactElement}\r\n */\r\nconst PrintAction: React.FC<PrintActionProps> = ({ children, className, onClick, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"PrintAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handlePrint = (e: React.MouseEvent<HTMLButtonElement>) => {\r\n    if (context.api) {\r\n      context.api.setGridOption(\"domLayout\", \"print\");\r\n\r\n      setTimeout(() => {\r\n        const element = document.querySelector(\"[grid-id='\" + context.gridId + \"']\") as HTMLElement;\r\n        const header = document.head;\r\n        const html = `<html>\r\n        ${header.innerHTML}\r\n        ${element.outerHTML}\r\n        </html>`;\r\n        printHtml(html);\r\n        context?.api?.setGridOption(\"domLayout\", undefined);\r\n      });\r\n    }\r\n    onClick?.(e);\r\n  };\r\n\r\n  return (\r\n    <IconButton type=\"button\" variant=\"toolbar\" className={cn(\"p-0.5 w-6 h-6\", className)} onClick={handlePrint} {...props}>\r\n      {children ?? <Print className=\"w-5 h-5\" />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for RefreshAction.\r\n */\r\ntype RefreshActionProps = Omit<IconButtonProps, \"onClick\"> & {\r\n  /** Callback invoked when the refresh action is clicked. */\r\n  onRefresh: () => void;\r\n};\r\n\r\n/**\r\n * Refresh action.\r\n * Calls the provided refresh callback and reflects the loading state in the toolbar button.\r\n * @param {RefreshActionProps} props - Refresh action props.\r\n * @param {() => void} onRefresh - Called when the button is clicked.\r\n * @param {boolean} [loading] - Shows the loading spinner and disables the button.\r\n * @param {React.ReactNode} [children] - Custom icon content rendered in the button.\r\n * @param {string} [className] - Additional button classes.\r\n * @returns {React.ReactElement}\r\n */\r\nconst RefreshAction: React.FC<RefreshActionProps> = ({ className, onRefresh, children, loading, ...props }) => {\r\n  const context = React.useContext(DataGridContext);\r\n\r\n  if (!context) {\r\n    throw new Error(\"RefreshAction should be used within <DataGrid>\");\r\n  }\r\n\r\n  const handleRefresh = () => {\r\n    onRefresh();\r\n  };\r\n\r\n  return (\r\n    <IconButton\r\n      type=\"button\"\r\n      className={cn(\"p-0.5 w-6 h-6\", loading && \"disabled:bg-transparent\", className)}\r\n      variant=\"toolbar\"\r\n      onClick={handleRefresh}\r\n      disabled={loading}\r\n      {...props}\r\n    >\r\n      {children ?? <Refresh className={cn(\"w-4.5 h-4.5\", loading && \"animate-spin\")} />}\r\n    </IconButton>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for DeleteAction.\r\n */\r\ntype DeleteActionProps = Omit<ButtonProps, \"onClick\"> & {\r\n  /** Callback invoked when the delete action is clicked. */\r\n  onDelete: () => void;\r\n};\r\n\r\n/**\r\n * Delete action.\r\n * Renders a danger button with the delete icon and delegates the click to the provided handler.\r\n * @param {DeleteActionProps} props - Delete action props.\r\n * @param {() => void} onDelete - Called when the button is clicked.\r\n * @param {React.ReactNode} [children] - Button label or custom content.\r\n * @returns {React.ReactElement}\r\n */\r\nconst DeleteAction: React.FC<DeleteActionProps> = ({ onDelete, children, ...props }) => {\r\n  const handleDelete = () => {\r\n    onDelete();\r\n  };\r\n\r\n  return (\r\n    <Button variant=\"danger\" type=\"button\" onClick={handleDelete} startIcon={<Trashcan className=\"w-4.5 h-4.5\" />} {...props}>\r\n      {children}\r\n    </Button>\r\n  );\r\n};\r\n\r\n/**\r\n * Props for ExtraActions.\r\n */\r\ntype ExtraActionsProps = PopoverContentProps & {\r\n  /** Menu items rendered inside the popover. */\r\n  children: React.ReactNode;\r\n  /** Props forwarded to the popover trigger and popover root. */\r\n  slotProps?: {\r\n    triggerProps?: PopoverTriggerProps;\r\n    popoverProps?: PopoverProps;\r\n  };\r\n};\r\n\r\n/**\r\n * Extra actions menu.\r\n * Wraps overflow actions in a popover anchored to the vertical ellipsis trigger.\r\n * @param {ExtraActionsProps} props - Extra actions props.\r\n * @param {React.ReactNode} children - Menu items rendered inside the popover.\r\n * @param {{ triggerProps?: PopoverTriggerProps; popoverProps?: PopoverProps; }} [slotProps] - Props forwarded to the trigger and popover root.\r\n * @param {string} [className] - Additional popover content classes.\r\n * @returns {React.ReactElement}\r\n */\r\nconst ExtraActions: React.FC<ExtraActionsProps> = ({ children, slotProps, className, ...props }) => {\r\n  return (\r\n    <Popover {...(slotProps?.popoverProps ?? {})}>\r\n      <PopoverTrigger {...(slotProps?.triggerProps ?? {})}>\r\n        <ElipsisVertical className=\"w-4.5 h-4.5 text-primary\" />\r\n      </PopoverTrigger>\r\n      <PopoverContent align=\"end\" className={cn(\"w-40\", className)} {...props}>\r\n        {children}\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport {\r\n  DataGrid,\r\n  DataGridContent,\r\n  DataGridActionBar,\r\n  SearchAction,\r\n  FreezeAction,\r\n  PrintAction,\r\n  RefreshAction,\r\n  ExtraActions,\r\n  DeleteAction,\r\n  type DataGridProps,\r\n  type DataGridContentProps,\r\n  type DatagridActionBarProps,\r\n  type SearchActionProps,\r\n  type FreezeActionProps,\r\n  type RefreshActionProps,\r\n  type ExtraActionsProps,\r\n  type DeleteActionProps,\r\n  useDataGrid,\r\n  dataGridDefaultTheme,\r\n};\r\n"],"names":["ModuleRegistry","AllCommunityModule","dataGridDefaultTheme","themeQuartz","fallbackResolveRowId","data","id","createResolveRowId","getRowId","DataGridContext","React","useDataGrid","context","DataGrid","children","gridId","api","setApi","rowData","setRowData","actionbarHeight","setActionbarHeight","pinnedRowIds","setPinnedRowIds","resolveRowIdRef","quickFilterText","setQuickFilterText","actionbarExists","setActionbarExists","jsx","DataGridContent","forwardRef","propTheme","onGridReady","quickFilterTextProps","rowDataProps","containerStyle","props","ref","resolveRowId","theme","useMemo","handleGridReady","e","finalRowData","finalPinnedTopRowData","pinned","unpinned","AgGridReact","DataGridActionBar","className","cn","SearchAction","defaultOpen","defaultOpenAutoFocus","isSearchInputOpen","setIsSearchInputOpen","isClosing","setIsClosing","inputRef","firstRenderRef","handleClear","handleOpen","handleClose","TextField","IconButton","Magnifier","CircleXmark","FreezeAction","freezeText","unFreezeText","onClick","disabled","pinnedRowCount","setPinnedRowCount","selectedRowsCount","setSelectedRowsCount","freezeRows","selectedRows","newPinnedIds","row","rowId","unfreezeRows","handleFreezing","Button","Snowflake","PrintAction","handlePrint","element","html","printHtml","Print","RefreshAction","onRefresh","loading","handleRefresh","Refresh","DeleteAction","onDelete","Trashcan","ExtraActions","slotProps","Popover","PopoverTrigger","ElipsisVertical","PopoverContent"],"mappings":"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"}

package/dist/desktopdatepicker.es.js

@@ -1,61 +1,64 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
-import * as g from "react";
-import { Calendar as x } from "@trsys-tech/matrix-icons";
-import { cn as w } from "./utils.es.js";
-import { Calendar as v } from "./calendar.es.js";
-import { Button as C } from "./button.es.js";
-import { Popover as k, PopoverTrigger as D, PopoverContent as M } from "./popover.es.js";
+import * as x from "react";
+import { Calendar as w } from "@trsys-tech/matrix-icons";
+import { cn as v } from "./utils.es.js";
+import { Calendar as C } from "./calendar.es.js";
+import { Button as k } from "./button.es.js";
+import { Popover as D, PopoverTrigger as M, PopoverContent as P } from "./popover.es.js";
 import { format as n } from "./format.es.js";
-const I = ({
+const L = ({
   formatStr: a,
   selected: e,
   placeholder: d,
-  className: s,
-  calendarClassName: i,
+  className: i,
+  calendarClassName: s,
   closeOnSelect: p = !0,
   onDayClick: l,
   disabled: m,
-  ...c
+  disabledDates: c,
+  ...u
 }) => {
-  const [u, o] = g.useState(!1), f = (y, b, h) => {
-    l?.(y, b, h), p && o(!1);
+  const [f, o] = x.useState(!1), b = (y, h, g) => {
+    l?.(y, h, g), p && o(!1);
   };
-  return /* @__PURE__ */ t(k, { open: u, onOpenChange: o, children: [
-    /* @__PURE__ */ r(D, { asChild: !0, children: /* @__PURE__ */ t(
-      C,
+  return /* @__PURE__ */ t(D, { open: f, onOpenChange: o, children: [
+    /* @__PURE__ */ r(M, { asChild: !0, children: /* @__PURE__ */ t(
+      k,
       {
         type: "button",
         variant: "text",
-        className: w(
+        className: v(
           "flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300",
-          s
+          i
         ),
         "data-placeholder": e ? void 0 : "",
         "aria-label": e ? `Selected date: ${n(e, a ?? "yyyy/MM/dd")}` : "Pick a date",
+        "aria-haspopup": "dialog",
         disabled: m,
         children: [
           e ? n(e, a ?? "yyyy/MM/dd") : /* @__PURE__ */ r("span", { children: d ?? "Pick a date" }),
-          /* @__PURE__ */ r(x, { className: "mr-2 ms-auto" })
+          /* @__PURE__ */ r(w, { className: "mr-2 ms-auto" })
         ]
       }
     ) }),
-    /* @__PURE__ */ r(M, { className: "w-auto p-0", children: /* @__PURE__ */ r(
-      v,
+    /* @__PURE__ */ r(P, { className: "w-auto p-0", children: /* @__PURE__ */ r(
+      C,
       {
         defaultMonth: e,
         startMonth: new Date(2e3, 0, 1),
         endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
-        ...c,
+        ...u,
         mode: "single",
         selected: e,
         captionLayout: "dropdown-years",
-        className: i,
-        onDayClick: f
+        className: s,
+        onDayClick: b,
+        disabled: c
       }
     ) })
   ] });
 };
 export {
-  I as DesktopDatePicker
+  L as DesktopDatePicker
 };
 //# sourceMappingURL=desktopdatepicker.es.js.map

package/dist/desktopdatepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = PropsBase &\r\n  Omit<PropsSingle, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    closeOnSelect?: boolean;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  closeOnSelect = true,\r\n  onDayClick,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (closeOnSelect) setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          type=\"button\"\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selected ? \"\" : undefined}\r\n          aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n          disabled={disabled}\r\n        >\r\n          {selected ? format(selected, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n          <CalendarIcon className=\"mr-2 ms-auto\" />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\">\r\n        <Calendar\r\n          defaultMonth={selected}\r\n          startMonth={new Date(2000, 0, 1)}\r\n          endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n          {...props}\r\n          mode=\"single\"\r\n          selected={selected}\r\n          captionLayout=\"dropdown-years\"\r\n          className={calendarClassName}\r\n          onDayClick={handleDayClick}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDatePicker, type DesktopDatePickerProps };\r\n"],"names":["DesktopDatePicker","formatStr","selected","placeholder","className","calendarClassName","closeOnSelect","onDayClick","disabled","props","isOpen","setIsOpen","React","handleDayClick","date","modifiers","e","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAuBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAE1CC,IAAyE,CAACC,GAAMC,GAAWC,MAAM;AACrG,IAAAT,IAAaO,GAAMC,GAAWC,CAAC,GAC3BV,OAAyB,EAAK;AAAA,EACpC;AAEA,SACE,gBAAAW,EAACC,GAAA,EAAQ,MAAMR,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAlB;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAgB,SAAL;AAAA,QAC9B,cAAYA,IAAW,kBAAkBqB,EAAOrB,GAAUD,KAAa,YAAY,CAAC,KAAK;AAAA,QACzF,UAAAO;AAAA,QAEC,UAAA;AAAA,UAAAN,IAAWqB,EAAOrB,GAAUD,KAAa,YAAY,IAAI,gBAAAkB,EAAC,QAAA,EAAM,eAAe,cAAA,CAAc;AAAA,UAC9F,gBAAAA,EAACK,GAAA,EAAa,WAAU,eAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE3C;AAAA,IACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,cACxB,UAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,cAAcxB;AAAA,QACd,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,QAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,QACtD,GAAGO;AAAA,QACJ,MAAK;AAAA,QACL,UAAAP;AAAA,QACA,eAAc;AAAA,QACd,WAAWG;AAAA,QACX,YAAYQ;AAAA,MAAA;AAAA,IAAA,EACd,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"desktopdatepicker.es.js","sources":["../src/components/date-picker/DesktopDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsSingle, DayEventHandler, Matcher } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDatePickerProps = Omit<PropsBase, \"disabled\"> &\r\n  Omit<PropsSingle, \"mode\" | \"disabled\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    closeOnSelect?: boolean;\r\n    disabled?: boolean;\r\n    disabledDates?: Matcher | Matcher[];\r\n  };\r\n\r\nconst DesktopDatePicker: React.FC<DesktopDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  closeOnSelect = true,\r\n  onDayClick,\r\n  disabled,\r\n  disabledDates,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  const handleDayClick: DayEventHandler<React.MouseEvent<Element, MouseEvent>> = (date, modifiers, e) => {\r\n    onDayClick?.(date, modifiers, e);\r\n    if (closeOnSelect) setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <Popover open={isOpen} onOpenChange={setIsOpen}>\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          type=\"button\"\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selected ? \"\" : undefined}\r\n          aria-label={selected ? `Selected date: ${format(selected, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n          aria-haspopup=\"dialog\"\r\n          disabled={disabled}\r\n        >\r\n          {selected ? format(selected, formatStr ?? \"yyyy/MM/dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n          <CalendarIcon className=\"mr-2 ms-auto\" />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\">\r\n        <Calendar\r\n          defaultMonth={selected}\r\n          startMonth={new Date(2000, 0, 1)}\r\n          endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n          {...props}\r\n          mode=\"single\"\r\n          selected={selected}\r\n          captionLayout=\"dropdown-years\"\r\n          className={calendarClassName}\r\n          onDayClick={handleDayClick}\r\n          disabled={disabledDates}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDatePicker, type DesktopDatePickerProps };\r\n"],"names":["DesktopDatePicker","formatStr","selected","placeholder","className","calendarClassName","closeOnSelect","onDayClick","disabled","disabledDates","props","isOpen","setIsOpen","React","handleDayClick","date","modifiers","e","jsxs","Popover","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAsD,CAAC;AAAA,EAC3D,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAE1CC,IAAyE,CAACC,GAAMC,GAAWC,MAAM;AACrG,IAAAV,IAAaQ,GAAMC,GAAWC,CAAC,GAC3BX,OAAyB,EAAK;AAAA,EACpC;AAEA,SACE,gBAAAY,EAACC,GAAA,EAAQ,MAAMR,GAAQ,cAAcC,GACnC,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAWC;AAAA,UACT;AAAA,UACAnB;AAAA,QAAA;AAAA,QAEF,oBAAmBF,IAAgB,SAAL;AAAA,QAC9B,cAAYA,IAAW,kBAAkBsB,EAAOtB,GAAUD,KAAa,YAAY,CAAC,KAAK;AAAA,QACzF,iBAAc;AAAA,QACd,UAAAO;AAAA,QAEC,UAAA;AAAA,UAAAN,IAAWsB,EAAOtB,GAAUD,KAAa,YAAY,IAAI,gBAAAmB,EAAC,QAAA,EAAM,eAAe,cAAA,CAAc;AAAA,UAC9F,gBAAAA,EAACK,GAAA,EAAa,WAAU,eAAA,CAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAE3C;AAAA,IACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,cACxB,UAAA,gBAAAN;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,cAAczB;AAAA,QACd,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,QAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,QACtD,GAAGQ;AAAA,QACJ,MAAK;AAAA,QACL,UAAAR;AAAA,QACA,eAAc;AAAA,QACd,WAAWG;AAAA,QACX,YAAYS;AAAA,QACZ,UAAUL;AAAA,MAAA;AAAA,IAAA,EACZ,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/desktopdaterangepicker.es.js

@@ -1,12 +1,12 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import * as h from "react";
-import { Calendar as b } from "@trsys-tech/matrix-icons";
+import { Calendar as c } from "@trsys-tech/matrix-icons";
 import { cn as i } from "./utils.es.js";
-import { Calendar as c } from "./calendar.es.js";
-import { Button as x } from "./button.es.js";
-import { Popover as w, PopoverTrigger as M, PopoverContent as v } from "./popover.es.js";
+import { Calendar as x } from "./calendar.es.js";
+import { Button as w } from "./button.es.js";
+import { Popover as M, PopoverTrigger as v, PopoverContent as C } from "./popover.es.js";
 import { format as t } from "./format.es.js";
-const R = ({
+const $ = ({
   formatStr: e,
   selected: r,
   placeholder: n,
@@ -15,19 +15,20 @@ const R = ({
   fromText: m,
   toText: p,
   disabled: l,
-  ...f
+  disabledDates: f,
+  ...u
 }) => {
-  const [u, y] = h.useState(!1);
+  const [y, b] = h.useState(!1);
   return /* @__PURE__ */ o(
-    w,
+    M,
     {
-      open: u,
+      open: y,
       onOpenChange: (g) => {
-        y(g);
+        b(g);
       },
       children: [
-        /* @__PURE__ */ a(M, { asChild: !0, children: /* @__PURE__ */ o(
-          x,
+        /* @__PURE__ */ a(v, { asChild: !0, children: /* @__PURE__ */ o(
+          w,
           {
             type: "button",
             variant: "text",
@@ -52,21 +53,22 @@ const R = ({
                   r?.to ? t(r.to, e ?? "yyyy/MM/dd") : "-"
                 ] })
               ] }) : /* @__PURE__ */ a("span", { children: n ?? "Pick a Range" }),
-              /* @__PURE__ */ a(b, { className: "mr-2 h-5 w-4 ms-auto" })
+              /* @__PURE__ */ a(c, { className: "mr-2 h-5 w-4 ms-auto" })
             ]
           }
         ) }),
-        /* @__PURE__ */ a(v, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ a(
-          c,
+        /* @__PURE__ */ a(C, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ a(
+          x,
           {
             defaultMonth: r?.from,
             startMonth: new Date(2e3, 0, 1),
             endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
-            ...f,
+            ...u,
             mode: "range",
             selected: r,
             className: i(s, "md:max-w-full md:w-[36rem]"),
-            numberOfMonths: 2
+            numberOfMonths: 2,
+            disabled: f
           }
         ) })
       ]
@@ -74,6 +76,6 @@ const R = ({
   );
 };
 export {
-  R as DesktopDateRangePicker
+  $ as DesktopDateRangePicker
 };
 //# sourceMappingURL=desktopdaterangepicker.es.js.map

package/dist/desktopdaterangepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsRange, DateRange } from \"react-day-picker\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = PropsBase &\r\n  Omit<PropsRange, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover\r\n      open={isOpen}\r\n      onOpenChange={open => {\r\n        setIsOpen(open);\r\n      }}\r\n    >\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          type=\"button\"\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selected ? \"\" : undefined}\r\n          aria-label={\r\n            selected\r\n              ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n              : placeholder\r\n          }\r\n          disabled={disabled}\r\n        >\r\n          {selected ? (\r\n            <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n              <span>\r\n                {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>{\" \"}\r\n              <span>\r\n                {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>\r\n            </div>\r\n          ) : (\r\n            <span>{placeholder ?? \"Pick a Range\"}</span>\r\n          )}\r\n          <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n        <Calendar\r\n          defaultMonth={selected?.from}\r\n          startMonth={new Date(2000, 0, 1)}\r\n          endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n          {...props}\r\n          mode=\"range\"\r\n          selected={selected}\r\n          className={cn(calendarClassName, \"md:max-w-full md:w-[36rem]\")}\r\n          numberOfMonths={2}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","disabled","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAwBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAEhD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAAK,MAAQ;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,WAAWC;AAAA,cACT;AAAA,cACAf;AAAA,YAAA;AAAA,YAEF,oBAAmBF,IAAgB,SAAL;AAAA,YAC9B,cACEA,IACI,kBAAkBA,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAEN,UAAAK;AAAA,YAEC,UAAA;AAAA,cAAAN,IACC,gBAAAW,EAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EACE,UAAA;AAAA,kBAAAP,KAAY;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOkB,EAAOlB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QAAA,EACE,UAAA;AAAA,kBAAAM,KAAU;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKkB,EAAOlB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EAAA,CACrF;AAAA,cAAA,EAAA,CACF,IAEA,gBAAAe,EAAC,QAAA,EAAM,UAAAb,KAAe,gBAAe;AAAA,cAEvC,gBAAAa,EAACK,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEnD;AAAA,QACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,cAAa,OAAM,SAC3C,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,cAAcrB,GAAU;AAAA,YACxB,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,YAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,YACtD,GAAGO;AAAA,YACJ,MAAK;AAAA,YACL,UAAAP;AAAA,YACA,WAAWiB,EAAGd,GAAmB,4BAA4B;AAAA,YAC7D,gBAAgB;AAAA,UAAA;AAAA,QAAA,EAClB,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"desktopdaterangepicker.es.js","sources":["../src/components/date-picker/DesktopDateRangePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\nimport { PropsBase, PropsRange, DateRange, Matcher } from \"react-day-picker\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover/Popover\";\r\n\r\ntype DesktopDateRangePickerProps = Omit<PropsBase, \"disabled\"> &\r\n  Omit<PropsRange, \"mode\" | \"disabled\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: DateRange;\r\n    required?: boolean;\r\n    fromText?: string;\r\n    toText?: string;\r\n    disabled?: boolean;\r\n    disabledDates?: Matcher | Matcher[];\r\n  };\r\n\r\nconst DesktopDateRangePicker: React.FC<DesktopDateRangePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  fromText,\r\n  toText,\r\n  disabled,\r\n  disabledDates,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n\r\n  return (\r\n    <Popover\r\n      open={isOpen}\r\n      onOpenChange={open => {\r\n        setIsOpen(open);\r\n      }}\r\n    >\r\n      <PopoverTrigger asChild>\r\n        <Button\r\n          type=\"button\"\r\n          variant=\"text\"\r\n          className={cn(\r\n            \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n            className,\r\n          )}\r\n          data-placeholder={!selected ? \"\" : undefined}\r\n          aria-label={\r\n            selected\r\n              ? `Selected date: ${selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"\"} - ${selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"\"}`\r\n              : placeholder\r\n          }\r\n          disabled={disabled}\r\n        >\r\n          {selected ? (\r\n            <div className=\"grid grid-cols-2 flex-1 justify-items-start\">\r\n              <span>\r\n                {fromText ?? \"From\"}: {selected?.from ? format(selected.from, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>{\" \"}\r\n              <span>\r\n                {toText ?? \"To\"}: {selected?.to ? format(selected.to, formatStr ?? \"yyyy/MM/dd\") : \"-\"}\r\n              </span>\r\n            </div>\r\n          ) : (\r\n            <span>{placeholder ?? \"Pick a Range\"}</span>\r\n          )}\r\n          <CalendarIcon className=\"mr-2 h-5 w-4 ms-auto\" />\r\n        </Button>\r\n      </PopoverTrigger>\r\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\r\n        <Calendar\r\n          defaultMonth={selected?.from}\r\n          startMonth={new Date(2000, 0, 1)}\r\n          endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n          {...props}\r\n          mode=\"range\"\r\n          selected={selected}\r\n          className={cn(calendarClassName, \"md:max-w-full md:w-[36rem]\")}\r\n          numberOfMonths={2}\r\n          disabled={disabledDates}\r\n        />\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n};\r\n\r\nexport { DesktopDateRangePicker, type DesktopDateRangePickerProps };\r\n"],"names":["DesktopDateRangePicker","formatStr","selected","placeholder","className","calendarClassName","fromText","toText","disabled","disabledDates","props","isOpen","setIsOpen","React","jsxs","Popover","open","jsx","PopoverTrigger","Button","cn","format","CalendarIcon","PopoverContent","Calendar"],"mappings":";;;;;;;;AAyBA,MAAMA,IAAgE,CAAC;AAAA,EACrE,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK;AAEhD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAMJ;AAAA,MACN,cAAc,CAAAK,MAAQ;AACpB,QAAAJ,EAAUI,CAAI;AAAA,MAChB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,WAAWC;AAAA,cACT;AAAA,cACAhB;AAAA,YAAA;AAAA,YAEF,oBAAmBF,IAAgB,SAAL;AAAA,YAC9B,cACEA,IACI,kBAAkBA,GAAU,OAAOmB,EAAOnB,EAAS,MAAMD,KAAa,YAAY,IAAI,EAAE,MAAMC,GAAU,KAAKmB,EAAOnB,EAAS,IAAID,KAAa,YAAY,IAAI,EAAE,KAChKE;AAAA,YAEN,UAAAK;AAAA,YAEC,UAAA;AAAA,cAAAN,IACC,gBAAAY,EAAC,OAAA,EAAI,WAAU,+CACb,UAAA;AAAA,gBAAA,gBAAAA,EAAC,QAAA,EACE,UAAA;AAAA,kBAAAR,KAAY;AAAA,kBAAO;AAAA,kBAAGJ,GAAU,OAAOmB,EAAOnB,EAAS,MAAMD,KAAa,YAAY,IAAI;AAAA,gBAAA,GAC7F;AAAA,gBAAQ;AAAA,kCACP,QAAA,EACE,UAAA;AAAA,kBAAAM,KAAU;AAAA,kBAAK;AAAA,kBAAGL,GAAU,KAAKmB,EAAOnB,EAAS,IAAID,KAAa,YAAY,IAAI;AAAA,gBAAA,EAAA,CACrF;AAAA,cAAA,EAAA,CACF,IAEA,gBAAAgB,EAAC,QAAA,EAAM,UAAAd,KAAe,gBAAe;AAAA,cAEvC,gBAAAc,EAACK,GAAA,EAAa,WAAU,uBAAA,CAAuB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,GAEnD;AAAA,QACA,gBAAAL,EAACM,GAAA,EAAe,WAAU,cAAa,OAAM,SAC3C,UAAA,gBAAAN;AAAA,UAACO;AAAAA,UAAA;AAAA,YACC,cAActB,GAAU;AAAA,YACxB,YAAY,IAAI,KAAK,KAAM,GAAG,CAAC;AAAA,YAC/B,UAAU,IAAI,MAAK,oBAAI,KAAA,GAAO,gBAAgB,GAAG,IAAI,EAAE;AAAA,YACtD,GAAGQ;AAAA,YACJ,MAAK;AAAA,YACL,UAAAR;AAAA,YACA,WAAWkB,EAAGf,GAAmB,4BAA4B;AAAA,YAC7D,gBAAgB;AAAA,YAChB,UAAUI;AAAA,UAAA;AAAA,QAAA,EACZ,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/mobiledatepicker.es.js

@@ -1,13 +1,13 @@
-import { jsxs as a, Fragment as M, jsx as e } from "react/jsx-runtime";
+import { jsxs as a, Fragment as N, jsx as e } from "react/jsx-runtime";
 import * as m from "react";
-import { VisuallyHidden as N } from "@radix-ui/react-visually-hidden";
-import { Calendar as C } from "@trsys-tech/matrix-icons";
+import { VisuallyHidden as C } from "@radix-ui/react-visually-hidden";
+import { Calendar as k } from "@trsys-tech/matrix-icons";
 import { cn as p } from "./utils.es.js";
-import { Calendar as k } from "./calendar.es.js";
+import { Calendar as j } from "./calendar.es.js";
 import { Button as o } from "./button.es.js";
-import { Dialog as j, DialogContent as P, DialogHeader as S, DialogTitle as F, DialogDescription as O } from "./dialog.es.js";
+import { Dialog as P, DialogContent as S, DialogHeader as F, DialogTitle as O, DialogDescription as A } from "./dialog.es.js";
 import { format as d } from "./format.es.js";
-const V = ({
+const _ = ({
   formatStr: l,
   selected: s,
   placeholder: h,
@@ -17,14 +17,15 @@ const V = ({
   applyText: x,
   onSelect: g,
   disabled: y,
-  ...D
+  disabledDates: D,
+  ...v
 }) => {
-  const [v, n] = m.useState(!1), t = s ? new Date(s) : void 0, [r, i] = m.useState(t), c = () => {
+  const [w, n] = m.useState(!1), t = s ? new Date(s) : void 0, [r, i] = m.useState(t), c = () => {
     n(!1), i(t);
-  }, w = () => {
+  }, M = () => {
     g?.(r), n(!1);
   };
-  return /* @__PURE__ */ a(M, { children: [
+  return /* @__PURE__ */ a(N, { children: [
     /* @__PURE__ */ a(
       o,
       {
@@ -40,41 +41,42 @@ const V = ({
         disabled: y,
         children: [
           t ? d(t, l ?? "eee, MMM dd") : /* @__PURE__ */ e("span", { children: h ?? "Pick a date" }),
-          /* @__PURE__ */ e(C, { className: "mr-2 h-5 w-5 ms-auto" })
+          /* @__PURE__ */ e(k, { className: "mr-2 h-5 w-5 ms-auto" })
         ]
       }
     ),
-    /* @__PURE__ */ e(j, { open: v, onOpenChange: c, children: /* @__PURE__ */ a(P, { className: "h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none", children: [
-      /* @__PURE__ */ a(S, { className: "p-4 border-b border-b-gray-200", children: [
-        /* @__PURE__ */ e(F, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "text-sm font-bold space-y-1 mt-3", children: [
+    /* @__PURE__ */ e(P, { open: w, onOpenChange: c, children: /* @__PURE__ */ a(S, { className: "h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none", children: [
+      /* @__PURE__ */ a(F, { className: "p-4 border-b border-b-gray-200", children: [
+        /* @__PURE__ */ e(O, { asChild: !0, children: /* @__PURE__ */ a("div", { className: "text-sm font-bold space-y-1 mt-3", children: [
           /* @__PURE__ */ e("h5", { className: "text-text-300", children: r?.getFullYear() ?? /* @__PURE__ */ e("pre", { children: " " }) }),
           /* @__PURE__ */ e("h6", { className: "", children: r ? d(r, l ?? "eee, MMM dd") : /* @__PURE__ */ e("pre", { children: " " }) })
         ] }) }),
-        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(O, { children: "Date Picker" }) })
+        /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(A, { children: "Date Picker" }) })
       ] }),
       /* @__PURE__ */ a("div", { className: "flex-1 flex flex-col items-center p-4", children: [
         /* @__PURE__ */ e(
-          k,
+          j,
           {
             defaultMonth: t,
             startMonth: new Date(2e3, 0, 1),
             endMonth: new Date((/* @__PURE__ */ new Date()).getFullYear() + 2, 11, 31),
-            ...D,
+            ...v,
             mode: "single",
             selected: r,
             onSelect: i,
-            className: p("p-0", u)
+            className: p("p-0", u),
+            disabled: D
           }
         ),
         /* @__PURE__ */ a("div", { className: "flex justify-center items-center gap-4 mt-auto w-full", children: [
           /* @__PURE__ */ e(o, { type: "button", variant: "text", className: "flex-1 h-10", onClick: c, children: b ?? "Cancel" }),
-          /* @__PURE__ */ e(o, { type: "button", variant: "primary", className: "flex-1 h-10", onClick: w, children: x ?? "Apply" })
+          /* @__PURE__ */ e(o, { type: "button", variant: "primary", className: "flex-1 h-10", onClick: M, children: x ?? "Apply" })
         ] })
       ] })
     ] }) })
   ] });
 };
 export {
-  V as MobileDatePicker
+  _ as MobileDatePicker
 };
 //# sourceMappingURL=mobiledatepicker.es.js.map

package/dist/mobiledatepicker.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobiledatepicker.es.js","sources":["../src/components/date-picker/MobileDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { PropsBase, PropsSingle } from \"react-day-picker\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDatePickerProps = PropsBase &\r\n  Omit<PropsSingle, \"mode\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    cancelText?: string;\r\n    applyText?: string;\r\n    onSelect?: (date: Date | undefined) => void;\r\n    disabled?: boolean;\r\n  };\r\n\r\nconst MobileDatePicker: React.FC<MobileDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  cancelText,\r\n  applyText,\r\n  onSelect,\r\n  disabled,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const validatedSelectedDate = selected ? new Date(selected) : undefined;\r\n  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(validatedSelectedDate);\r\n\r\n  const handleCancel = () => {\r\n    setIsOpen(false);\r\n    setSelectedDate(validatedSelectedDate);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(selectedDate);\r\n    setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!validatedSelectedDate ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={validatedSelectedDate ? `Selected date: ${format(validatedSelectedDate, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n        disabled={disabled}\r\n      >\r\n        {validatedSelectedDate ? format(validatedSelectedDate, formatStr ?? \"eee, MMM dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n        <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n          <DialogHeader className=\"p-4 border-b border-b-gray-200\">\r\n            <DialogTitle asChild>\r\n              <div className=\"text-sm font-bold space-y-1 mt-3\">\r\n                <h5 className=\"text-text-300\">{selectedDate?.getFullYear() ?? <pre> </pre>}</h5>\r\n                <h6 className=\"\">{selectedDate ? format(selectedDate, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n              </div>\r\n            </DialogTitle>\r\n            <VisuallyHidden>\r\n              <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n            </VisuallyHidden>\r\n          </DialogHeader>\r\n          <div className=\"flex-1 flex flex-col items-center p-4\">\r\n            <Calendar\r\n              defaultMonth={validatedSelectedDate}\r\n              startMonth={new Date(2000, 0, 1)}\r\n              endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n              {...props}\r\n              mode=\"single\"\r\n              selected={selectedDate}\r\n              onSelect={setSelectedDate}\r\n              className={cn(\"p-0\", calendarClassName)}\r\n            />\r\n            <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n              <Button type=\"button\" variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button type=\"button\" variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\r\n                {applyText ?? \"Apply\"}\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n};\r\n\r\nexport { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","props","isOpen","setIsOpen","React","validatedSelectedDate","selectedDate","setSelectedDate","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}
+{"version":3,"file":"mobiledatepicker.es.js","sources":["../src/components/date-picker/MobileDatePicker.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport * as React from \"react\";\r\nimport { format } from \"date-fns\";\r\nimport { VisuallyHidden } from \"@radix-ui/react-visually-hidden\";\r\nimport { Matcher, PropsBase, PropsSingle } from \"react-day-picker\";\r\nimport { Calendar as CalendarIcon } from \"@trsys-tech/matrix-icons\";\r\n\r\nimport { cn } from \"../../lib/utils\";\r\nimport { Calendar } from \"./calendar\";\r\nimport { Button } from \"../button/Button\";\r\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from \"../dialog/Dialog\";\r\n\r\ntype MobileDatePickerProps = Omit<PropsBase, \"disabled\"> &\r\n  Omit<PropsSingle, \"mode\" | \"disabled\"> & {\r\n    formatStr?: string;\r\n    placeholder?: string;\r\n    calendarClassName?: string;\r\n    selected?: Date;\r\n    required?: boolean;\r\n    cancelText?: string;\r\n    applyText?: string;\r\n    onSelect?: (date: Date | undefined) => void;\r\n    disabled?: boolean;\r\n    disabledDates?: Matcher | Matcher[]; // Renamed to avoid conflict with the 'disabled' prop\r\n  };\r\n\r\nconst MobileDatePicker: React.FC<MobileDatePickerProps> = ({\r\n  formatStr,\r\n  selected,\r\n  placeholder,\r\n  className,\r\n  calendarClassName,\r\n  cancelText,\r\n  applyText,\r\n  onSelect,\r\n  disabled,\r\n  disabledDates,\r\n  ...props\r\n}) => {\r\n  const [isOpen, setIsOpen] = React.useState(false);\r\n  const validatedSelectedDate = selected ? new Date(selected) : undefined;\r\n  const [selectedDate, setSelectedDate] = React.useState<Date | undefined>(validatedSelectedDate);\r\n\r\n  const handleCancel = () => {\r\n    setIsOpen(false);\r\n    setSelectedDate(validatedSelectedDate);\r\n  };\r\n\r\n  const handleApply = () => {\r\n    onSelect?.(selectedDate);\r\n    setIsOpen(false);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Button\r\n        type=\"button\"\r\n        variant=\"text\"\r\n        className={cn(\r\n          \"flex h-8 w-full items-center justify-between whitespace-nowrap rounded-sm border border-input bg-transparent ps-3 pe-1 py-1.5 text-xs ring-offset-background data-[placeholder]:text-muted-foreground hover:border hover:border-primary hover:bg-transparent focus:border focus:border-primary focus:outline-none focus:ring focus:ring-primary-100 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-text-300 disabled:border-gray-100 [&>span]:line-clamp-1 [&_svg]:disabled:text-text-300\",\r\n          className,\r\n        )}\r\n        data-placeholder={!validatedSelectedDate ? \"\" : undefined}\r\n        onClick={() => setIsOpen(true)}\r\n        aria-label={validatedSelectedDate ? `Selected date: ${format(validatedSelectedDate, formatStr ?? \"yyyy/MM/dd\")}` : \"Pick a date\"}\r\n        disabled={disabled}\r\n      >\r\n        {validatedSelectedDate ? format(validatedSelectedDate, formatStr ?? \"eee, MMM dd\") : <span>{placeholder ?? \"Pick a date\"}</span>}\r\n        <CalendarIcon className=\"mr-2 h-5 w-5 ms-auto\" />\r\n      </Button>\r\n      <Dialog open={isOpen} onOpenChange={handleCancel}>\r\n        <DialogContent className=\"h-dscreen w-screen p-0 flex flex-col gap-0 data-[state=open]:animate-slide-from-bottom data-[state=closed]:animate-slide-to-bottom overflow-auto max-w-screen-2xl sm:rounded-none\">\r\n          <DialogHeader className=\"p-4 border-b border-b-gray-200\">\r\n            <DialogTitle asChild>\r\n              <div className=\"text-sm font-bold space-y-1 mt-3\">\r\n                <h5 className=\"text-text-300\">{selectedDate?.getFullYear() ?? <pre> </pre>}</h5>\r\n                <h6 className=\"\">{selectedDate ? format(selectedDate, formatStr ?? \"eee, MMM dd\") : <pre> </pre>}</h6>\r\n              </div>\r\n            </DialogTitle>\r\n            <VisuallyHidden>\r\n              <DialogDescription>{\"Date Picker\"}</DialogDescription>\r\n            </VisuallyHidden>\r\n          </DialogHeader>\r\n          <div className=\"flex-1 flex flex-col items-center p-4\">\r\n            <Calendar\r\n              defaultMonth={validatedSelectedDate}\r\n              startMonth={new Date(2000, 0, 1)}\r\n              endMonth={new Date(new Date().getFullYear() + 2, 11, 31)}\r\n              {...props}\r\n              mode=\"single\"\r\n              selected={selectedDate}\r\n              onSelect={setSelectedDate}\r\n              className={cn(\"p-0\", calendarClassName)}\r\n              disabled={disabledDates}\r\n            />\r\n            <div className=\"flex justify-center items-center gap-4 mt-auto w-full\">\r\n              <Button type=\"button\" variant=\"text\" className=\"flex-1 h-10\" onClick={handleCancel}>\r\n                {cancelText ?? \"Cancel\"}\r\n              </Button>\r\n              <Button type=\"button\" variant=\"primary\" className=\"flex-1 h-10\" onClick={handleApply}>\r\n                {applyText ?? \"Apply\"}\r\n              </Button>\r\n            </div>\r\n          </div>\r\n        </DialogContent>\r\n      </Dialog>\r\n    </>\r\n  );\r\n};\r\n\r\nexport { MobileDatePicker, type MobileDatePickerProps };\r\n"],"names":["MobileDatePicker","formatStr","selected","placeholder","className","calendarClassName","cancelText","applyText","onSelect","disabled","disabledDates","props","isOpen","setIsOpen","React","validatedSelectedDate","selectedDate","setSelectedDate","handleCancel","handleApply","jsxs","Fragment","Button","cn","format","jsx","CalendarIcon","Dialog","DialogContent","DialogHeader","DialogTitle","VisuallyHidden","DialogDescription","Calendar"],"mappings":"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"}