npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.6 → 4.0.0-alpha.8 - Mend

@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (753) hide show

package/data-table/data-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n/*\n Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n \n Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n /\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [actionBarStrategy, setActionBarStrategy] = useState<\n \"sticky\" \| \"fixed\" \| \"inline\"\n >(\"inline\");\n const [scrollable, setScrollable] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n useApplyStyle(actionBarWrapperRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]: tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const useUpdateActionBarBehaviour = useEvent(() => {\n updateActionBarBehaviour();\n });\n\n useEffect(() => {\n useUpdateActionBarBehaviour();\n }, [useUpdateActionBarBehaviour]);\n\n const updateActionBarBehaviourThrottled = useThrottle(\n () => updateActionBarBehaviour(),\n 100\n );\n\n useResizeDetector({\n targetRef: wrapperRef,\n onResize: () => updateActionBarBehaviourThrottled(),\n });\n\n useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n useEventListener(\n \"scroll\",\n updateActionBarBehaviourThrottled,\n wrapperRef.current\n );\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n if (!rows \|\| !rows.length \|\| !selectedIds) {\n return false;\n }\n return selectedIds.length === rows.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isHeaderCheckboxDisabled = (): boolean => {\n return !rows \|\| !rows.length \|\| !selectedIds;\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderCellId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const updateActionBarBehaviour = () => {\n if (\n !wrapperRef.current \|\|\n !headerRef.current \|\|\n !actionBarWrapperRef.current\n ) {\n return;\n }\n\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n const headerBounds = headerRef.current.getBoundingClientRect();\n\n let strategy: typeof actionBarStrategy = \"inline\";\n\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n if (\n wrapperBounds.top > window.innerHeight \|\|\n wrapperBounds.bottom < 0\n ) {\n // if fully out of the viewport, disable floating\n strategy = \"inline\";\n } else if (scrollable) {\n if (\n wrapperBounds.top > 0 &&\n wrapperBounds.top < window.innerHeight &&\n wrapperBounds.bottom > 0 &&\n wrapperBounds.bottom < window.innerHeight\n ) {\n // if fully in the viewport, use the native sticky behaviour\n strategy = \"sticky\";\n } else if (\n wrapperBounds.top < 0 &&\n wrapperBounds.bottom > 0 &&\n wrapperBounds.bottom < window.innerHeight\n ) {\n // if partially offscreen at the top, use the native sticky behaviour\n strategy = \"sticky\";\n } else if (\n wrapperBounds.bottom > window.innerHeight &&\n Math.max(wrapperBounds.top, headerBounds.bottom) +\n headerBounds.height <\n window.innerHeight\n ) {\n // if offscreen at the bottom, pin to the viewport, up until the table/header\n strategy = \"fixed\";\n }\n } else if (\n wrapperBounds.bottom > window.innerHeight &&\n headerBounds.bottom + headerBounds.height < window.innerHeight\n ) {\n // if offscreen at the bottom, pin to the viewport, up until the header\n strategy = \"fixed\";\n }\n\n setScrollable(scrollable);\n setActionBarStrategy(strategy);\n\n if (strategy === \"fixed\") {\n setIsFloatingActionBar(true);\n } else if (strategy === \"sticky\") {\n const beforeScrollEnd =\n wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n wrapperRef.current.scrollHeight;\n setIsFloatingActionBar(beforeScrollEnd);\n } else {\n setIsFloatingActionBar(false);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead\n ref={headerRef}\n className={enableStickyHeader ? styles.stickyHeader : undefined}\n >\n <tr className={styles.headerRow}>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </tr>\n </thead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellId = getHeaderCellId(fieldKey);\n return (\n <th\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n className={clsx(\n styles.headerCell,\n clickable && styles.headerCellClickable\n )}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <div className={styles.headerCellContent} id={headerCellId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </div>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </th>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <th\n data-testid={getDataTestId(\"header-selection\")}\n className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n scope=\"col\"\n >\n <div className={styles.selectionCheckboxWrapper}>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n disabled={isHeaderCheckboxDisabled()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </div>\n </th>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr className={styles.bodyRow}>\n <td\n className={styles.emptyStateCell}\n colSpan={getTotalColumns()}\n >\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </td>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <tr\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n className={clsx(\n styles.bodyRow,\n isFloatingActionBar &&\n styles.bodyRowWithBottomBorder,\n isAlternatingRow(index) &&\n styles.bodyRowAlternating,\n enableMultiSelect && styles.bodyRowSelectable,\n isRowSelected(row.id.toString()) &&\n styles.bodyRowSelected\n )}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </tr>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header === \"string\" ? undefined : header.style;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n let cellContent: React.ReactNode;\n if (typeof cellData === \"string\" \|\| typeof cellData === \"number\") {\n cellContent = (\n <Typography.BodyBL className={styles.bodyCellText}>\n {cellData}\n </Typography.BodyBL>\n );\n } else if (typeof cellData === \"function\") {\n cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n } else {\n cellContent = cellData;\n }\n\n return (\n <td\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n className={styles.bodyCell}\n style={style}\n >\n {cellContent}\n </td>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <td\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n >\n <div className={styles.selectionCheckboxWrapper}>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </div>\n </td>\n );\n };\n\n const renderBasicEmptyView = () => {\n let emptyTitle: JSX.Element;\n if (!emptyView?.title) {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {\"No <items> found\"}\n </Typography.HeadingSM>\n );\n } else if (typeof emptyView.title === \"string\") {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {emptyView.title}\n </Typography.HeadingSM>\n );\n } else {\n emptyTitle = emptyView.title;\n }\n\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={emptyTitle}\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <tr className={styles.bodyRow}>\n <td colSpan={getTotalColumns()}>\n <div\n className={styles.loadingStateWrapper}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </div>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const counter = `item${count > 1 ? \"s\" : \"\"}`;\n\n return (\n <>\n <div\n ref={actionBarWrapperRef}\n className={styles.actionBarWrapper}\n data-strategy={actionBarStrategy}\n >\n <div\n data-testid=\"data-table-action-bar\"\n className={clsx(\n styles.actionBar,\n isFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} ${counter}`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n {/ leave a fixed space when action bar floats to avoid layout shift */}\n {actionBarStrategy !== \"sticky\" && (\n <div className={styles.actionBarSpacer} />\n )}\n </>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(\n styles.tableWrapper,\n scrollable && styles.tableWrapperScrollable,\n className\n )}\n ref={wrapperRef}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={styles.table}>\n {renderHeaders()}\n <tbody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </tbody>\n </table>\n </div>\n {enableActionBar &&\n selectedIds &&\n selectedIds.length > 0 &&\n renderSelectionBar()}\n </div>\n );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","styles.tableWrapperScrollable","ref","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","counter","styles.actionBarWrapper","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","styles.actionBarSpacer","renderSelectionBar"],"mappings":"ioEAwBO,MAAMA,EAAaC,QAAAC,GACtBA,EAAEC,QACFA,EAAOC,KACPA,GAAIC,UACJA,GAASC,eACTA,GAAcC,gBACdA,GAAeC,UACfA,GAAY,UAASC,kBACrBA,GAAiBC,YACjBA,GAAWC,YACXA,GAAWC,gBACXA,GAAeC,gBACfA,GAAeC,mBACfA,GAAkBC,UAClBA,GAASC,iBACTA,GAAgBC,sBAChBA,GAAqBC,cACrBA,GAAaC,SACbA,GAAQC,YACRA,GAAWC,sBACXA,MACGC,GAAUC,EAAAtB,EArBS,CAAA,KAAA,UAAA,OAAA,YAAA,iBAAA,kBAAA,YAAA,oBAAA,cAAA,cAAA,kBAAA,kBAAA,qBAAA,YAAA,mBAAA,wBAAA,gBAAA,WAAA,cAAA,0BA0BtB,MAAMuB,GAAWC,EAAyB,MACpCC,GAAYD,EAAgC,MAC5CE,GAAsBF,EAAuB,MAC7CG,GAAaH,EAAuB,MACpCI,GAAaC,IACbC,GAAa5B,EAAQ6B,QACtBC,GAC4B,iBAAXA,KAAyBA,EAAOC,aAI/CC,GAAmBC,IAAwBC,EAEhD,WACKC,GAAYC,IAAiBF,GAAS,IACtCG,GAAqBC,IAA0BJ,GAAS,GAE/DK,EAAcf,GAAqB,CAC/B,CAACgB,EAAcC,sBACXJ,IAAuBhB,GAASqB,QAC1B,GAAGrB,GAASqB,QAAQC,wBAAwBC,cAC5CC,EACV,CAACL,EAAcM,uBAAwBzB,GAASqB,QAC1C,GAAGrB,GAASqB,QAAQK,qBACpBF,IAMV,MAAMG,GAA8BC,GAAS,KACzCC,IAA0B,IAG9BC,GAAU,KACNH,IAA6B,GAC9B,CAACA,KAEJ,MAAMI,GAAoCC,GACtC,IAAMH,MACN,KAGJI,EAAkB,CACdC,UAAW9B,GACX+B,SAAU,IAAMJ,OAGpBK,EAAiB,SAAUL,IAC3BK,EACI,SACAL,GACA3B,GAAWiB,SAMf,MAAMgB,GAAwB,OACrBzD,IAASA,GAAK0D,QAAWpD,KAGvBA,GAAYoD,SAAW1D,GAAK0D,OAejCC,GAAiBC,MACVtD,cAAW,EAAXA,GAAauD,SAASD,IAG7BE,GAAoBC,KACb5D,IAAmB4D,EAAQ,GAAM,EAGxCC,GAAiBJ,MACVrD,cAAW,EAAXA,GAAasD,SAASD,IAG7BK,GAAiBC,IACnB,GAAKhD,GAAW,eAChB,MAAO,GAAGA,GAAW,kBAAkBgD,GAAQ,EAG7CC,GAAkB,IACbpE,EAAQ2D,QAAUrD,GAAoB,EAAI,GAG/C+D,GAAoBC,GACfnE,cAAc,EAAdA,GAAiBmE,GAGtBC,GAAqBD,IACvB,MAAME,EAAgBH,GAAiBC,GAEvC,GAAKE,EAIL,MAAyB,QAAlBA,EAA0B,YAAc,YAAY,EAGzDC,GAA0BH,GAIrB,OAF4B,QAA/BD,GAAiBC,GAAsB,aAAe,oBAQxDI,GAAY,CAACb,EAAeS,IACvB,GAAG5C,UAAkBmC,KAASS,eAGnCK,GAAgCd,IAClC,MAAMe,EAAehD,GAAWiD,KAAK/C,GACjC4C,GAAUb,EAAO/B,EAAOwC,YAG5B,OAAOQ,KAAaF,EAAa,EAG/B1B,GAA2B,KAC7B,IACKzB,GAAWiB,UACXnB,GAAUmB,UACVlB,GAAoBkB,QAErB,OAGJ,MAAMqC,EAAgBtD,GAAWiB,QAAQC,wBACnCqC,EAAezD,GAAUmB,QAAQC,wBAEvC,IAAIsC,EAAqC,SAEzC,MAAM9C,EACFV,GAAWiB,QAAQwC,aAAezD,GAAWiB,QAAQyC,aA4CzD,GAzCIJ,EAAcK,IAAMC,OAAOC,aAC3BP,EAAcQ,OAAS,EAGvBN,EAAW,SACJ9C,EAEH4C,EAAcK,IAAM,GACpBL,EAAcK,IAAMC,OAAOC,aAC3BP,EAAcQ,OAAS,GACvBR,EAAcQ,OAASF,OAAOC,aAK9BP,EAAcK,IAAM,GACpBL,EAAcQ,OAAS,GACvBR,EAAcQ,OAASF,OAAOC,YAJ9BL,EAAW,SASXF,EAAcQ,OAASF,OAAOC,aAC9BE,KAAKC,IAAIV,EAAcK,IAAKJ,EAAaO,QACrCP,EAAaU,OACbL,OAAOC,cAGXL,EAAW,SAGfF,EAAcQ,OAASF,OAAOC,aAC9BN,EAAaO,OAASP,EAAaU,OAASL,OAAOC,cAGnDL,EAAW,SAGf7C,GAAcD,GACdF,GAAqBgD,GAEJ,UAAbA,EACA3C,IAAuB,QACpB,GAAiB,WAAb2C,EAAuB,CAC9B,MAAMU,EACFlE,GAAWiB,QAAQkD,UAAYnE,GAAWiB,QAAQyC,aAClD1D,GAAWiB,QAAQwC,aACvB5C,GAAuBqD,EAC3B,MACIrD,IAAuB,EAC3B,EAiCEuD,GAAoB/D,IACtB,MAAMwC,SACFA,EAAQwB,MACRA,EAAKC,UACLA,GAAY,EAAKC,MACjBA,GACkB,iBAAXlE,EACL,CACIwC,SAAUxC,EACVgE,MAAOhE,EACPkE,WAAOnD,GAEXf,EAEAmE,IAAe5B,GAAiBC,GAChC4B,EAnIc,CAAC5B,GACd,GAAG5C,aAAqB4C,IAkIV6B,CAAgB7B,GACrC,OACI8B,EAAA,KAAA,CAAA,cACiBlC,GAAc,UAAUI,KAErCpE,UAAWmG,EACPC,EACAP,GAAaQ,GAEjBC,MAAM,MAAK,YACAjC,GAAkBD,GAC7B0B,MAAOA,EACPS,QAAS,IAtDK,CAACnC,IACvBvD,UAAAA,GAAgBuD,EAAS,EAqDFoC,CAAkBpC,GAASqC,SAAA,CAE1CP,SAAKlG,UAAW0G,EAA0B7G,GAAImG,EAAYS,SAAA,CACpC,iBAAVb,EACJe,EAACC,EAAWC,OAAM,CAACC,OAAO,OAAML,SAC3Bb,IACe,EAIvBmB,GAAkB3C,OAErByB,GAAaE,IACXY,EAACK,YACGd,EAAA,SAAA,CACIK,QAAUU,GAjEF,EAC5BA,EACA7C,KAEA6C,EAAMC,kBACNrG,UAAAA,GAAgBuD,EAAS,EA6DD+C,CAAwBF,EAAO7C,GAASqC,SAAA,CAG3CV,GAAc,QACfY,EAAA,OAAA,CAAA,kBAAuBX,IACtBD,GAAcxB,GAAuBH,UA7B7CA,EAiCJ,EAIP2C,GAAqB3C,IACvB,MAAMgD,EAAWnH,gBAAAA,GAAiBmE,GAElC,OAAKgD,EAGY,QAAbA,EAEIT,EAACU,EAAW,CAAA,eAAA,EAAA,cAEKrD,GAAc,UAAUI,eAK7CuC,EAACW,EAAa,CAAA,eAAA,EAAA,cAEGtD,GAAc,UAAUI,iBAblCuC,OAcL,EAIJY,GAAuB,IAErBZ,EAAA,KAAA,CAAA,cACiB3C,GAAc,oBAC3BhE,UAAWmG,EAAKC,EAAmBoB,GACnClB,MAAM,MAAKG,SAEXP,EAAA,MAAA,CAAKlG,UAAWyH,EAA+BhB,SAAA,CAC3CE,EAACK,EAAc,CAAAP,SAAA,kBACdjG,IACGmG,EAACe,EAAQ,CACLC,QAASnE,KACToE,gBAlQdvH,IACqB,IAAvBA,GAAYoD,SACXD,KAiQeqE,UA5PZ9H,KAASA,GAAK0D,SAAWpD,GA4PuB,aACzB,kBACXkG,QAAS,KACDxF,IACAA,GAAYyC,KAChB,SA+CtBsE,GAAgB,CAAClG,EAAqBmG,KACxC,MAAMjC,EAA0B,iBAAXlE,OAAsBe,EAAYf,EAAOkE,MACxD1B,EAA6B,iBAAXxC,EAAsBA,EAASA,EAAOwC,SACxDT,EAAQoE,EAAIlI,GAAGmI,WACfC,EAAWF,EAAI3D,GACf8D,EAAS,GAAGvE,KAASS,IAE3B,IAAI+D,EAaJ,OAXIA,EADoB,iBAAbF,GAA6C,iBAAbA,EAEnCtB,EAACC,EAAWC,OAAM,CAAC7G,UAAWoI,EAAmB3B,SAC5CwB,IAGkB,mBAAbA,EACAA,EAASF,EAAK,CAAEM,WAAY3E,GAAcC,KAE1CsE,EAIdtB,EAAA,KAAA,CAAA,cACiB3C,GAAc,OAAOkE,KAElCrI,GAAI2E,GAAUb,EAAOS,GACrBpE,UAAWsI,EACXxC,MAAOA,WAENqC,GALID,EAMJ,EAIPK,GAAqBR,IACvB,MAAMpE,EAAQoE,EAAIlI,GAAGmI,WAErB,OACIrB,sBACiB3C,GAAc,OAAOL,eAClC3D,UAAWmG,EAAKmC,EAAiBE,GAAwB/B,SAEzDE,EAAA,MAAA,CAAK3G,UAAWyH,EAA+BhB,SAC3CE,EAACe,EAAQ,CACLC,QAASjE,GAAcC,GAAM,kBACZc,GAA6Bd,GAC9C4C,QAAS,KACDzF,IACAA,GAAS6C,GAAQD,GAAcC,GACnC,EAEJkE,SAAU9D,GAAcJ,GACxB8E,sBAAuB1E,GAAcJ,QAG5C,EAIP+E,GAAuB,KACzB,IAAIC,EAuBJ,OAZIA,GAVCjI,cAAS,EAATA,GAAWkI,OASsB,iBAApBlI,GAAUkI,MAEpBjC,EAACC,EAAWiC,UAAS,CACjB7I,UAAW8I,EACXhC,OAAO,OAAML,SAEZ/F,GAAUkI,QAINlI,GAAUkI,MAjBnBjC,EAACC,EAAWiC,UAAS,CACjB7I,UAAW8I,EACXhC,OAAO,gBAEN,qBAiBTH,EAACoC,EAAYC,OAAAC,OAAA,CACTC,KAAM,iBACFxI,GAAS,CACbkI,MAAOD,EACPQ,aACIzI,cAAS,EAATA,GAAWyI,aACLzI,GAAUyI,YACV,qBAEZ,EA2DV,OACIjD,EAAA,MAAA,CACIrG,GAAIA,GAAM,gBAAe,cACZoB,GAAW,gBAAkB,QAC1CjB,UAAWmG,EACPiD,EACAnH,IAAcoH,EACdrJ,IAEJsJ,IAAK/H,GACLgI,SAAU,EAAC9C,SAAA,CAEXE,EAAA,MAAA,CAAK3G,UAAWwJ,WACZtD,EAAA,QAAA,CAAOoD,IAAKnI,GAAUnB,UAAWyJ,EAAYhD,SAAA,CA9TrDE,EAAA,QAAA,CACI2C,IAAKjI,GACLrB,UAAWS,GAAqBiJ,OAAsB/G,EAAS8D,SAE/DP,EAAA,KAAA,CAAIlG,UAAW2J,EAAgBlD,SAAA,CAC1BrG,IAAqBmH,KACrBzH,EAAQ6E,IAAIgB,SA0TTgB,EAAA,QAAA,CAAAF,SACmB,YAAdtG,IA5MTJ,IAAQA,GAAK0D,OAAS,EAC1BkD,QAAI3G,UAAW4J,EAAcnD,SACzBE,EAAA,KAAA,CACI3G,UAAW6J,EACXC,QAAS5F,cAERtD,GACKA,KACA8H,SAId/B,EAAAoD,EAAA,CAAAtD,SACK1G,gBAAAA,GAAM4E,KAAI,CAACoD,EAAejE,IACvBoC,sBACiBlC,GAAc,OAAO+D,EAAIlI,GAAGmI,cAEzChI,UAAWmG,EACPyD,EACAzH,IACI6H,EACJnG,GAAiBC,IACbmG,EACJ7J,IAAqB8J,EACrBxG,GAAcqE,EAAIlI,GAAGmI,aACjBmC,GACP1D,SAAA,CAEArG,IAAqBmI,GAAkBR,GAEvCjI,EAAQ6E,KAAK/C,GAAWkG,GAAclG,EAAQmG,OAd1CA,EAAIlI,GAAGmI,gBAuHxBrB,EAAA,KAAA,CAAI3G,UAAW4J,EAAcnD,SACzBE,EAAA,KAAA,CAAImD,QAAS5F,KAAiBuC,SAC1BE,SACI3G,UAAWoK,EACXC,KAAK,SAAQ,YACH,SAAQ,aACP,yBAEI,YAAdlK,IAA2BwG,EAAC2D,EAAkB,CAAA,gBAmE1D/J,IACGF,IACAA,GAAYoD,OAAS,GA9DN,YACvB,MAAM8G,EAA2B,QAAnB3K,EAAAS,cAAW,EAAXA,GAAaoD,cAAM,IAAA7D,EAAAA,EAAI,EAC/B4K,EAAU,QAAOD,EAAQ,EAAI,IAAM,IAEzC,OACIrE,eACIS,EAAA,MAAA,CACI2C,IAAKhI,GACLtB,UAAWyK,EAAuB,gBACnB3I,GAAiB2E,SAEhCP,EAAA,MAAA,CAAA,cACgB,wBACZlG,UAAWmG,EACPuE,EACAvI,IAAuBwI,GAC1BlE,SAAA,CAEDE,EAACC,EAAWgE,QAAO9D,OAAO,WAAUL,SAAE,GAAG8D,KAASC,eAClD7D,EAACkE,EAAW,CACR7K,UAAW8K,EACX5B,KAAK,sBACO,sBAAsBqB,KAASC,IAC3CjE,QAASvF,GAAqByF,SAAA,oBAIjC9F,QAIc,WAAtBmB,IACG6E,SAAK3G,UAAW+K,MAErB,EA6BCC,KACF"}
1	+ {"version":3,"file":"data-table.js","sources":["../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useId, useThrottle } from \"../util\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\n// @catalog\n/*\n Renders a sortable, selectable data table with scroll-aware action bar and loading state support.\n \n Use `DataTable` when presenting structured multi-column data that users may need to sort by\n * column or select rows for bulk actions. Row selection, sort indicators, and the action bar\n * content are all externally controlled; the component manages scroll detection, sticky-header\n * positioning, and floating action bar behaviour internally.\n /\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableActionBarWithoutSelection,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarWrapperRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [actionBarStrategy, setActionBarStrategy] = useState<\n \"sticky\" \| \"fixed\" \| \"inline\"\n >(\"inline\");\n const [scrollable, setScrollable] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n\n useApplyStyle(actionBarWrapperRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]: tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const useUpdateActionBarBehaviour = useEvent(() => {\n updateActionBarBehaviour();\n });\n\n useEffect(() => {\n useUpdateActionBarBehaviour();\n }, [useUpdateActionBarBehaviour]);\n\n const updateActionBarBehaviourThrottled = useThrottle(\n () => updateActionBarBehaviour(),\n 100\n );\n\n useResizeDetector({\n targetRef: wrapperRef,\n onResize: () => updateActionBarBehaviourThrottled(),\n });\n\n useEventListener(\"scroll\", updateActionBarBehaviourThrottled);\n useEventListener(\n \"scroll\",\n updateActionBarBehaviourThrottled,\n wrapperRef.current\n );\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n if (!rows \|\| !rows.length \|\| !selectedIds) {\n return false;\n }\n return selectedIds.length === rows.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isHeaderCheckboxDisabled = (): boolean => {\n return !rows \|\| !rows.length \|\| !selectedIds;\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderCellId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const updateActionBarBehaviour = () => {\n if (\n !wrapperRef.current \|\|\n !headerRef.current \|\|\n !actionBarWrapperRef.current\n ) {\n return;\n }\n\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n const headerBounds = headerRef.current.getBoundingClientRect();\n\n let strategy: typeof actionBarStrategy = \"inline\";\n\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n\n if (\n wrapperBounds.top > window.innerHeight \|\|\n wrapperBounds.bottom < 0\n ) {\n // if fully out of the viewport, disable floating\n strategy = \"inline\";\n } else if (scrollable) {\n if (\n wrapperBounds.top > 0 &&\n wrapperBounds.top < window.innerHeight &&\n wrapperBounds.bottom > 0 &&\n wrapperBounds.bottom < window.innerHeight\n ) {\n // if fully in the viewport, use the native sticky behaviour\n strategy = \"sticky\";\n } else if (\n wrapperBounds.top < 0 &&\n wrapperBounds.bottom > 0 &&\n wrapperBounds.bottom < window.innerHeight\n ) {\n // if partially offscreen at the top, use the native sticky behaviour\n strategy = \"sticky\";\n } else if (\n wrapperBounds.bottom > window.innerHeight &&\n Math.max(wrapperBounds.top, headerBounds.bottom) +\n headerBounds.height <\n window.innerHeight\n ) {\n // if offscreen at the bottom, pin to the viewport, up until the table/header\n strategy = \"fixed\";\n }\n } else if (\n wrapperBounds.bottom > window.innerHeight &&\n headerBounds.bottom + headerBounds.height < window.innerHeight\n ) {\n // if offscreen at the bottom, pin to the viewport, up until the header\n strategy = \"fixed\";\n }\n\n setScrollable(scrollable);\n setActionBarStrategy(strategy);\n\n if (strategy === \"fixed\") {\n setIsFloatingActionBar(true);\n } else if (strategy === \"sticky\") {\n const beforeScrollEnd =\n wrapperRef.current.scrollTop + wrapperRef.current.clientHeight <\n wrapperRef.current.scrollHeight;\n setIsFloatingActionBar(beforeScrollEnd);\n } else {\n setIsFloatingActionBar(false);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead\n ref={headerRef}\n className={enableStickyHeader ? styles.stickyHeader : undefined}\n >\n <tr className={styles.headerRow}>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </tr>\n </thead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellId = getHeaderCellId(fieldKey);\n return (\n <th\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n className={clsx(\n styles.headerCell,\n clickable && styles.headerCellClickable\n )}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <div className={styles.headerCellContent} id={headerCellId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </div>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </th>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <th\n data-testid={getDataTestId(\"header-selection\")}\n className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n scope=\"col\"\n >\n <div className={styles.selectionCheckboxWrapper}>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n disabled={isHeaderCheckboxDisabled()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </div>\n </th>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr className={styles.bodyRow}>\n <td\n className={styles.emptyStateCell}\n colSpan={getTotalColumns()}\n >\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </td>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <tr\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n className={clsx(\n styles.bodyRow,\n isFloatingActionBar &&\n styles.bodyRowWithBottomBorder,\n isAlternatingRow(index) &&\n styles.bodyRowAlternating,\n enableMultiSelect && styles.bodyRowSelectable,\n isRowSelected(row.id.toString()) &&\n styles.bodyRowSelected\n )}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </tr>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header === \"string\" ? undefined : header.style;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n let cellContent: React.ReactNode;\n if (typeof cellData === \"string\" \|\| typeof cellData === \"number\") {\n cellContent = (\n <Typography.BodyBL className={styles.bodyCellText}>\n {cellData}\n </Typography.BodyBL>\n );\n } else if (typeof cellData === \"function\") {\n cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n } else {\n cellContent = cellData;\n }\n\n return (\n <td\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n className={styles.bodyCell}\n style={style}\n >\n {cellContent}\n </td>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <td\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n >\n <div className={styles.selectionCheckboxWrapper}>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </div>\n </td>\n );\n };\n\n const renderBasicEmptyView = () => {\n let emptyTitle: JSX.Element;\n if (!emptyView?.title) {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {\"No <items> found\"}\n </Typography.HeadingSM>\n );\n } else if (typeof emptyView.title === \"string\") {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {emptyView.title}\n </Typography.HeadingSM>\n );\n } else {\n emptyTitle = emptyView.title;\n }\n\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={emptyTitle}\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <tr className={styles.bodyRow}>\n <td colSpan={getTotalColumns()}>\n <div\n className={styles.loadingStateWrapper}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </div>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const counter = `item${count === 1 ? \"\" : \"s\"}`;\n\n return (\n <>\n <div\n ref={actionBarWrapperRef}\n className={styles.actionBarWrapper}\n data-strategy={actionBarStrategy}\n >\n <div\n data-testid=\"data-table-action-bar\"\n className={clsx(\n styles.actionBar,\n isFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} ${counter} selected`}</Typography.BodyMD>\n {count > 0 ? (\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} ${counter}`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n ) : (\n <div className={styles.actionBarGap} />\n )}\n {actionBarContent}\n </div>\n </div>\n {/ leave a fixed space when action bar floats to avoid layout shift */}\n {actionBarStrategy !== \"sticky\" && (\n <div className={styles.actionBarSpacer} />\n )}\n </>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(\n styles.tableWrapper,\n scrollable && styles.tableWrapperScrollable,\n className\n )}\n ref={wrapperRef}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={styles.table}>\n {renderHeaders()}\n <tbody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </tbody>\n </table>\n </div>\n {enableActionBar &&\n ((selectedIds && selectedIds.length > 0) \|\|\n enableActionBarWithoutSelection) &&\n renderSelectionBar()}\n </div>\n );\n};\n"],"names":["DataTable","_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","headerRef","actionBarWrapperRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","actionBarStrategy","setActionBarStrategy","useState","scrollable","setScrollable","isFloatingActionBar","setIsFloatingActionBar","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","useUpdateActionBarBehaviour","useEvent","updateActionBarBehaviour","useEffect","updateActionBarBehaviourThrottled","useThrottle","useResizeDetector","targetRef","onResize","useEventListener","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","headerBounds","strategy","scrollHeight","clientHeight","top","window","innerHeight","bottom","Math","max","height","beforeScrollEnd","scrollTop","renderHeaderCell","label","clickable","style","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","styles.tableWrapperScrollable","ref","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","counter","styles.actionBarWrapper","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","styles.actionBarGap","styles.actionBarSpacer","renderSelectionBar"],"mappings":"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"}

package/data-table/data-table.styles.d.ts CHANGED Viewed

@@ -23,6 +23,7 @@ export declare const bodyCellText: import("@linaria/core").LinariaClassName;
 export declare const emptyStateCell: import("@linaria/core").LinariaClassName;
 export declare const selectionCheckboxWrapper: import("@linaria/core").LinariaClassName;
 export declare const actionBarButton: import("@linaria/core").LinariaClassName;
+export declare const actionBarGap: import("@linaria/core").LinariaClassName;
 export declare const actionBarSpacer: import("@linaria/core").LinariaClassName;
 export declare const actionBar: import("@linaria/core").LinariaClassName;
 export declare const actionBarFloating: import("@linaria/core").LinariaClassName;

package/data-table/data-table.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import"./data-table.styles_rxganh.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="t7u4vf5",c="s1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",f="h4ne4e9",s="hfa3d3x",h="b6ks76c",i="b1bceurq",l="b8t2s91",o="bjmthdi",x="b1tvp43a",q="bx1feaw",y="b1g3gl2s",g="b1yxh9il",w="e1w2nktt",W="sxywpxo",m="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="adhafdm",k="l1pcc0nq",v="e1qkofer";export{B as actionBar,m as actionBarButton,_ as actionBarFloating,u as actionBarSpacer,j as actionBarWrapper,h as bodyCell,y as bodyCellCheckbox,g as bodyCellText,i as bodyRow,l as bodyRowAlternating,x as bodyRowSelectable,o as bodyRowSelected,q as bodyRowWithBottomBorder,w as emptyStateCell,v as emptyStateTitle,b as headerCell,f as headerCellCheckbox,d as headerCellClickable,s as headerCellContent,p as headerRow,k as loadingStateWrapper,W as selectionCheckboxWrapper,c as stickyHeader,n as table,r as tableContainer,t as tableWrapper,e as tableWrapperScrollable,a as tokens};
+import"./data-table.styles_1tnlmhe.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="t7u4vf5",c="s1nfqacf",l="h1744qno",p="h1ec4wtd",b="hp15x3z",d="h4ne4e9",f="hfa3d3x",s="b6ks76c",h="b1bceurq",i="b8t2s91",o="bjmthdi",x="b1tvp43a",q="bx1feaw",w="b1g3gl2s",y="b1yxh9il",m="e1w2nktt",W="sxywpxo",g="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="adhafdm",k="a1pcc0nq",v="l1qkofer",T="e8l591w";export{_ as actionBar,g as actionBarButton,j as actionBarFloating,u as actionBarGap,B as actionBarSpacer,k as actionBarWrapper,s as bodyCell,w as bodyCellCheckbox,y as bodyCellText,h as bodyRow,i as bodyRowAlternating,x as bodyRowSelectable,o as bodyRowSelected,q as bodyRowWithBottomBorder,m as emptyStateCell,T as emptyStateTitle,p as headerCell,d as headerCellCheckbox,b as headerCellClickable,f as headerCellContent,l as headerRow,v as loadingStateWrapper,W as selectionCheckboxWrapper,c as stickyHeader,n as table,r as tableContainer,t as tableWrapper,e as tableWrapperScrollable,a as tokens};
 //# sourceMappingURL=data-table.styles.js.map

package/data-table/data-table.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.styles.js","sources":["../../src/data-table/data-table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n Border,\n Colour,\n Font,\n Motion,\n Radius,\n Shadow,\n Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n actionBarWrapperLeft: \"--fds-internal-dataTable-actionBarWrapper-left\",\n actionBarWrapperWidth: \"--fds-internal-dataTable-actionBarWrapper-width\",\n} as const;\n\n// =============================================================================\n// Layout\n// =============================================================================\nexport const tableWrapper = css`\n /* we separate the overflow styles so that sticky elements can still work\n with horizontal scrolling on supported browsers\n see: https://github.com/w3c/csswg-drafts/issues/12289 /\n overflow-y: clip;\n overflow-x: auto;\n position: relative;\n\n display: flex;\n flex-direction: column;\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"md\"]};\n\n / Hide scrollbar /\n scrollbar-width: none; / Firefox /\n -ms-overflow-style: none; / IE 10+ /\n &::-webkit-scrollbar {\n display: none; / Chrome/Safari/Webkit */\n }\n`;\n\nexport const tableWrapperScrollable = css`\n overflow-y: auto;\n`;\n\nexport const tableContainer = css`\n flex: 1;\n`;\n\nexport const table = css`\n text-align: left;\n border-collapse: separate;\n border-spacing: 0;\n width: 100%;\n`;\n\n// =============================================================================\n// Header\n// =============================================================================\nexport const stickyHeader = css`\n position: sticky;\n top: 0;\n z-index: 20;\n`;\n\nexport const headerRow = css`\n background-color: ${Colour[\"bg-stronger\"]};\n height: 6rem;\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const headerCell = css`\n padding: 1.25rem 1rem;\n text-align: left;\n cursor: default;\n vertical-align: middle;\n color: ${Colour[\"text\"]};\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n &:first-child {\n padding-left: 1.5rem;\n }\n\n &:last-child {\n padding-right: 1.5rem;\n }\n\n &:focus-within {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: -3px;\n }\n`;\n\nexport const headerCellClickable = css`\n cursor: pointer;\n`;\n\nexport const headerCellCheckbox = css`\n width: 4rem;\n padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const headerCellContent = css`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ${Colour[\"text\"]};\n margin-left: 0.5rem;\n }\n`;\n\n// =============================================================================\n// Body\n// =============================================================================\nexport const bodyCell = css`\n padding: 1.25rem 1rem;\n vertical-align: middle;\n color: ${Colour[\"text\"]};\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n &:first-child {\n padding-left: 1.5rem;\n }\n\n &:last-child {\n padding-right: 1.5rem;\n }\n`;\n\nexport const bodyRow = css`\n background-color: ${Colour[\"bg\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n &:last-child {\n .${bodyCell} {\n border-bottom: none;\n }\n }\n`;\n\nexport const bodyRowAlternating = css`\n background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const bodyRowSelected = css`\n background-color: ${Colour[\"bg-selected\"]};\n`;\n\nexport const bodyRowSelectable = css`\n &:hover {\n background-color: ${Colour[\"bg-hover-strong\"]};\n }\n`;\n\nexport const bodyRowWithBottomBorder = css`\n &:last-child {\n .${bodyCell} {\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n ${Colour[\"border\"]};\n }\n }\n`;\n\nexport const bodyCellCheckbox = css`\n padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const bodyCellText = css`\n ${lineClampCss(2)}\n text-overflow: ellipsis;\n`;\n\nexport const emptyStateCell = css`\n padding: 4rem 0;\n\n &:first-child {\n padding-left: 1.5rem;\n }\n\n &:last-child {\n padding-right: 1.5rem;\n }\n`;\n\nexport const selectionCheckboxWrapper = css`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\n// =============================================================================\n// Action bar\n// =============================================================================\nexport const actionBarButton = css`\n ${Font[\"body-md-semibold\"]}\n cursor: pointer;\n color: ${Colour[\"text-primary\"]};\n transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n padding: 0.75rem;\n margin: -0.75rem 0;\n\n &:hover {\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const actionBarSpacer = css`\n height: 3.5rem;\n`;\n\nexport const actionBar = css`\n overflow: hidden;\n display: flex;\n align-items: center;\n height: 3.5rem;\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background-color: ${Colour[\"bg-selected\"]};\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]} ${Radius[\"sm\"]}\n ${Radius[\"sm\"]};\n`;\n\nexport const actionBarFloating = css`\n transform: translateX(0.5rem) translateY(-2rem);\n border-radius: ${Radius[\"sm\"]};\n box-shadow: ${Shadow[\"xs-subtle\"]};\n width: calc(100% - ${Spacing[\"spacing-16\"]});\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const actionBarWrapper = css`\n ${tokens.actionBarWrapperLeft}: initial;\n ${tokens.actionBarWrapperWidth}: initial;\n\n &[data-strategy=\"inline\"] {\n position: absolute;\n bottom: 0;\n left: 0;\n width: var(${tokens.actionBarWrapperWidth}, 100%);\n }\n\n &[data-strategy=\"fixed\"] {\n position: fixed;\n bottom: 0;\n left: var(${tokens.actionBarWrapperLeft}, 0px);\n width: var(${tokens.actionBarWrapperWidth}, 100%);\n }\n\n &[data-strategy=\"sticky\"] {\n position: sticky;\n bottom: 0;\n }\n`;\n\n// =============================================================================\n// Load and error states\n// =============================================================================\nexport const loadingStateWrapper = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 4rem 0;\n`;\n\nexport const emptyStateTitle = css`\n margin-top: 2rem;\n margin-bottom: 1rem;\n`;\n"],"names":["tokens","actionBarWrapperLeft","actionBarWrapperWidth","tableWrapper","tableWrapperScrollable","tableContainer","table","stickyHeader","headerRow","headerCell","headerCellClickable","headerCellCheckbox","headerCellContent","bodyCell","bodyRow","bodyRowAlternating","bodyRowSelected","bodyRowSelectable","bodyRowWithBottomBorder","bodyCellCheckbox","bodyCellText","emptyStateCell","selectionCheckboxWrapper","actionBarButton","actionBarSpacer","actionBar","actionBarFloating","actionBarWrapper","loadingStateWrapper","emptyStateTitle"],"mappings":"~~iEAaO~~,MAAMA,EAAS,CAClBC,qBAAsB,iDACtBC,sBAAuB,mDAMdC,EAAY,WAqBZC,EAAsB,UAItBC,EAAc,UAIdC,EAAK,UAULC,EAAY,WAMZC,EAAS,WAMTC,EAAU,WAsBVC,EAAmB,UAInBC,EAAkB,UAKlBC,EAAiB,UAcjBC,EAAQ,UAeRC,EAAO,WAWPC,EAAkB,UAIlBC,EAAe,UAIfC,EAAiB,WAMjBC,EAAuB,UASvBC,EAAgB,WAIhBC,EAAY,WAKZC,EAAc,WAYdC,EAAwB,UASxBC,EAAe,UAafC,EAAe,~~WAIfC~~,EAAS,~~UAaTC~~,EAAiB,~~WAQjBC~~,EAAgB,~~UA2BhBC~~,EAAmB,WAOnBC,EAAe"}
1	+ {"version":3,"file":"data-table.styles.js","sources":["../../src/data-table/data-table.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n Border,\n Colour,\n Font,\n Motion,\n Radius,\n Shadow,\n Spacing,\n} from \"../theme\";\n\nexport const tokens = {\n actionBarWrapperLeft: \"--fds-internal-dataTable-actionBarWrapper-left\",\n actionBarWrapperWidth: \"--fds-internal-dataTable-actionBarWrapper-width\",\n} as const;\n\n// =============================================================================\n// Layout\n// =============================================================================\nexport const tableWrapper = css`\n /* we separate the overflow styles so that sticky elements can still work\n with horizontal scrolling on supported browsers\n see: https://github.com/w3c/csswg-drafts/issues/12289 /\n overflow-y: clip;\n overflow-x: auto;\n position: relative;\n\n display: flex;\n flex-direction: column;\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"md\"]};\n\n / Hide scrollbar /\n scrollbar-width: none; / Firefox /\n -ms-overflow-style: none; / IE 10+ /\n &::-webkit-scrollbar {\n display: none; / Chrome/Safari/Webkit */\n }\n`;\n\nexport const tableWrapperScrollable = css`\n overflow-y: auto;\n`;\n\nexport const tableContainer = css`\n flex: 1;\n`;\n\nexport const table = css`\n text-align: left;\n border-collapse: separate;\n border-spacing: 0;\n width: 100%;\n`;\n\n// =============================================================================\n// Header\n// =============================================================================\nexport const stickyHeader = css`\n position: sticky;\n top: 0;\n z-index: 20;\n`;\n\nexport const headerRow = css`\n background-color: ${Colour[\"bg-stronger\"]};\n height: 6rem;\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const headerCell = css`\n padding: 1.25rem 1rem;\n text-align: left;\n cursor: default;\n vertical-align: middle;\n color: ${Colour[\"text\"]};\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n &:first-child {\n padding-left: 1.5rem;\n }\n\n &:last-child {\n padding-right: 1.5rem;\n }\n\n &:focus-within {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: -3px;\n }\n`;\n\nexport const headerCellClickable = css`\n cursor: pointer;\n`;\n\nexport const headerCellCheckbox = css`\n width: 4rem;\n padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const headerCellContent = css`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ${Colour[\"text\"]};\n margin-left: 0.5rem;\n }\n`;\n\n// =============================================================================\n// Body\n// =============================================================================\nexport const bodyCell = css`\n padding: 1.25rem 1rem;\n vertical-align: middle;\n color: ${Colour[\"text\"]};\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n &:first-child {\n padding-left: 1.5rem;\n }\n\n &:last-child {\n padding-right: 1.5rem;\n }\n`;\n\nexport const bodyRow = css`\n background-color: ${Colour[\"bg\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n &:last-child {\n .${bodyCell} {\n border-bottom: none;\n }\n }\n`;\n\nexport const bodyRowAlternating = css`\n background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const bodyRowSelected = css`\n background-color: ${Colour[\"bg-selected\"]};\n`;\n\nexport const bodyRowSelectable = css`\n &:hover {\n background-color: ${Colour[\"bg-hover-strong\"]};\n }\n`;\n\nexport const bodyRowWithBottomBorder = css`\n &:last-child {\n .${bodyCell} {\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n ${Colour[\"border\"]};\n }\n }\n`;\n\nexport const bodyCellCheckbox = css`\n padding: 1.25rem 0.5rem 1.25rem 1.5rem;\n`;\n\nexport const bodyCellText = css`\n ${lineClampCss(2)}\n text-overflow: ellipsis;\n`;\n\nexport const emptyStateCell = css`\n padding: 4rem 0;\n\n &:first-child {\n padding-left: 1.5rem;\n }\n\n &:last-child {\n padding-right: 1.5rem;\n }\n`;\n\nexport const selectionCheckboxWrapper = css`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\n// =============================================================================\n// Action bar\n// =============================================================================\nexport const actionBarButton = css`\n ${Font[\"body-md-semibold\"]}\n cursor: pointer;\n color: ${Colour[\"text-primary\"]};\n transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n padding: 0.75rem;\n margin: -0.75rem 0;\n\n &:hover {\n color: ${Colour[\"text-hover\"]};\n }\n`;\n\nexport const actionBarGap = css`\n width: 0.75rem;\n`;\n\nexport const actionBarSpacer = css`\n height: 3.5rem;\n`;\n\nexport const actionBar = css`\n overflow: hidden;\n display: flex;\n align-items: center;\n height: 3.5rem;\n padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]};\n border-top: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background-color: ${Colour[\"bg-selected\"]};\n transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-default\"]};\n border-radius: ${Radius[\"none\"]} ${Radius[\"none\"]} ${Radius[\"sm\"]}\n ${Radius[\"sm\"]};\n`;\n\nexport const actionBarFloating = css`\n transform: translateX(0.5rem) translateY(-2rem);\n border-radius: ${Radius[\"sm\"]};\n box-shadow: ${Shadow[\"xs-subtle\"]};\n width: calc(100% - ${Spacing[\"spacing-16\"]});\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n`;\n\nexport const actionBarWrapper = css`\n ${tokens.actionBarWrapperLeft}: initial;\n ${tokens.actionBarWrapperWidth}: initial;\n\n &[data-strategy=\"inline\"] {\n position: absolute;\n bottom: 0;\n left: 0;\n width: var(${tokens.actionBarWrapperWidth}, 100%);\n }\n\n &[data-strategy=\"fixed\"] {\n position: fixed;\n bottom: 0;\n left: var(${tokens.actionBarWrapperLeft}, 0px);\n width: var(${tokens.actionBarWrapperWidth}, 100%);\n }\n\n &[data-strategy=\"sticky\"] {\n position: sticky;\n bottom: 0;\n }\n`;\n\n// =============================================================================\n// Load and error states\n// =============================================================================\nexport const loadingStateWrapper = css`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 4rem 0;\n`;\n\nexport const emptyStateTitle = css`\n margin-top: 2rem;\n margin-bottom: 1rem;\n`;\n"],"names":["tokens","actionBarWrapperLeft","actionBarWrapperWidth","tableWrapper","tableWrapperScrollable","tableContainer","table","stickyHeader","headerRow","headerCell","headerCellClickable","headerCellCheckbox","headerCellContent","bodyCell","bodyRow","bodyRowAlternating","bodyRowSelected","bodyRowSelectable","bodyRowWithBottomBorder","bodyCellCheckbox","bodyCellText","emptyStateCell","selectionCheckboxWrapper","actionBarButton","actionBarGap","actionBarSpacer","actionBar","actionBarFloating","actionBarWrapper","loadingStateWrapper","emptyStateTitle"],"mappings":"kEAaO,MAAMA,EAAS,CAClBC,qBAAsB,iDACtBC,sBAAuB,mDAMdC,EAAY,WAqBZC,EAAsB,UAItBC,EAAc,UAIdC,EAAK,UAULC,EAAY,WAMZC,EAAS,WAMTC,EAAU,WAsBVC,EAAmB,UAInBC,EAAkB,UAKlBC,EAAiB,UAcjBC,EAAQ,UAeRC,EAAO,WAWPC,EAAkB,UAIlBC,EAAe,UAIfC,EAAiB,WAMjBC,EAAuB,UASvBC,EAAgB,WAIhBC,EAAY,WAKZC,EAAc,WAYdC,EAAwB,UASxBC,EAAe,UAafC,EAAY,WAIZC,EAAe,UAIfC,EAAS,WAaTC,EAAiB,UAQjBC,EAAgB,WA2BhBC,EAAmB,WAOnBC,EAAe"}

package/data-table/{data-table.styles_rxganh.css → data-table.styles_1tnlmhe.css} RENAMED Viewed

@@ -19,9 +19,10 @@
 .e1w2nktt{padding:4rem 0;}.e1w2nktt:first-child{padding-left:1.5rem;}.e1w2nktt:last-child{padding-right:1.5rem;}
 .sxywpxo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
 .anoy5c0{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.anoy5c0:hover{color:var(--fds-colour-text-hover);}
-.a1gvi5ye{height:3.5rem;}
-.aag0lf9{overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-24);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-selected);-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-default);border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
-.a1euqarq{-webkit-transform:translateX(0.5rem) translateY(-2rem);-moz-transform:translateX(0.5rem) translateY(-2rem);-ms-transform:translateX(0.5rem) translateY(-2rem);transform:translateX(0.5rem) translateY(-2rem);border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-xs-subtle);width:calc(100% - var(--fds-spacing-16));border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
-.adhafdm{--fds-internal-dataTable-actionBarWrapper-left:initial;--fds-internal-dataTable-actionBarWrapper-width:initial;}.adhafdm[data-strategy="inline"]{position:absolute;bottom:0;left:0;width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}.adhafdm[data-strategy="fixed"]{position:fixed;bottom:0;left:var(--fds-internal-dataTable-actionBarWrapper-left, 0px);width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}.adhafdm[data-strategy="sticky"]{position:-webkit-sticky;position:sticky;bottom:0;}
-.l1pcc0nq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4rem 0;}
-.e1qkofer{margin-top:2rem;margin-bottom:1rem;}}
+.a1gvi5ye{width:0.75rem;}
+.aag0lf9{height:3.5rem;}
+.a1euqarq{overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-24);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-selected);-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-default);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-default);border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
+.adhafdm{-webkit-transform:translateX(0.5rem) translateY(-2rem);-moz-transform:translateX(0.5rem) translateY(-2rem);-ms-transform:translateX(0.5rem) translateY(-2rem);transform:translateX(0.5rem) translateY(-2rem);border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-xs-subtle);width:calc(100% - var(--fds-spacing-16));border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.a1pcc0nq{--fds-internal-dataTable-actionBarWrapper-left:initial;--fds-internal-dataTable-actionBarWrapper-width:initial;}.a1pcc0nq[data-strategy="inline"]{position:absolute;bottom:0;left:0;width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}.a1pcc0nq[data-strategy="fixed"]{position:fixed;bottom:0;left:var(--fds-internal-dataTable-actionBarWrapper-left, 0px);width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}.a1pcc0nq[data-strategy="sticky"]{position:-webkit-sticky;position:sticky;bottom:0;}
+.l1qkofer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:4rem 0;}
+.e8l591w{margin-top:2rem;margin-bottom:1rem;}}

package/data-table/types.d.ts CHANGED Viewed

@@ -25,6 +25,8 @@ export interface DataTableProps {
     enableSelectAll?: boolean | undefined;
     /** Shows the action bar whenever one or more rows are selected. */
     enableActionBar?: boolean | undefined;
+    /** Shows the action bar even when no rows are selected. Requires `enableActionBar`. */
+    enableActionBarWithoutSelection?: boolean | undefined;
     /** Keeps the header row visible as the user scrolls down through the table. */
     enableStickyHeader?: boolean | undefined;
     /** Additional content rendered inside the action bar. */

package/date-input/date-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\n/*\n A single-date input field with an attached calendar dropdown.\n \n Use this to enter or pick a single date.\n */\nexport const DateInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialDate, setInitialDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [selectedDate, setSelectedDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [hoveredDate, setHoveredDate] = useState<string \| undefined>(\n undefined\n );\n const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<StandaloneDateInputRef>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const newValue = DateInputHelper.sanitizeInput(value);\n setInitialDate(newValue);\n setSelectedDate(newValue);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClose = () => {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n setFocused(false);\n\n performOnBlurHandler();\n\n // clear hover value for mobile scrolling\n setHoveredDate(undefined);\n };\n\n const handleDismiss = () => {\n inputRef.current?.resetInput();\n nodeRef.current?.focus();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n };\n\n const handleChange = (val: string) => {\n if (\n !allowDisabledSelection &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n ) {\n return;\n }\n\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n setCalendarOpen(false);\n }\n }\n };\n\n const handleSelect = (val: string) => {\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n inputRef.current?.focusYearRef();\n setCalendarOpen(false);\n }\n\n // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n setHoveredDate(undefined);\n }\n };\n\n const handleFocus = () => {\n if (readOnly \|\| disabled) return;\n\n setCalendarOpen(true);\n\n if (focused) return;\n\n setFocused(true);\n\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setFocused(false);\n setCalendarOpen(false);\n performOnBlurHandler();\n }\n };\n\n const handleHoverDayCell = (value: string) => {\n if (!calendarOpen) return;\n setHoveredDate(value);\n };\n\n const handleCalendarAction = (buttonAction: CalendarAction) => {\n // handle button in day calendar view\n switch (buttonAction) {\n case \"reset\":\n setSelectedDate(initialDate);\n break;\n case \"confirmed\":\n setInitialDate(selectedDate);\n performOnChangeHandler(selectedDate);\n break;\n }\n\n const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n // Focus on year input if the selected date is valid to avoid restarting entire tab order\n if (isValid) {\n inputRef.current?.focusYearRef();\n } else {\n nodeRef.current?.focus();\n }\n setCalendarOpen(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnChangeHandler = (changeValue: string) => {\n if (onChange) {\n onChange(changeValue);\n }\n };\n\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n tabIndex={0}\n ref={nodeRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n disabled={disabled}\n readOnly={readOnly}\n focused={focused}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n className={clsx(styles.container, className)}\n {...otherProps}\n >\n <StandaloneDateInput\n ref={inputRef}\n disabled={disabled}\n onChange={handleChange}\n readOnly={readOnly}\n focused={calendarOpen}\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n value={selectedDate}\n hoverValue={hoveredDate}\n hideInputKeyboard={hideInputKeyboard}\n />\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n ref={calendarRef}\n initialCalendarDate={selectedDate}\n withButton={withButton}\n value={selectedDate}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onHover={handleHoverDayCell}\n onSelect={handleSelect}\n onDismiss={handleCalendarAction}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n onClose={handleClose}\n onDismiss={handleDismiss}\n customZIndex={zIndex}\n offset={16}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"date-input.js","sources":["../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\n// @catalog\n/*\n A single-date input field with an attached calendar dropdown.\n \n Use this to enter or pick a single date.\n */\nexport const DateInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialDate, setInitialDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [selectedDate, setSelectedDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [hoveredDate, setHoveredDate] = useState<string \| undefined>(\n undefined\n );\n const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<StandaloneDateInputRef>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const newValue = DateInputHelper.sanitizeInput(value);\n setInitialDate(newValue);\n setSelectedDate(newValue);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClose = () => {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n setFocused(false);\n\n performOnBlurHandler();\n\n // clear hover value for mobile scrolling\n setHoveredDate(undefined);\n };\n\n const handleDismiss = () => {\n inputRef.current?.resetInput();\n nodeRef.current?.focus();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n };\n\n const handleChange = (val: string) => {\n if (\n !allowDisabledSelection &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n ) {\n return;\n }\n\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n setCalendarOpen(false);\n }\n }\n };\n\n const handleSelect = (val: string) => {\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n inputRef.current?.focusYearRef();\n setCalendarOpen(false);\n }\n\n // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n setHoveredDate(undefined);\n }\n };\n\n const handleFocus = () => {\n if (readOnly \|\| disabled) return;\n\n setCalendarOpen(true);\n\n if (focused) return;\n\n setFocused(true);\n\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setFocused(false);\n setCalendarOpen(false);\n performOnBlurHandler();\n }\n };\n\n const handleHoverDayCell = (value: string) => {\n if (!calendarOpen) return;\n setHoveredDate(value);\n };\n\n const handleCalendarAction = (buttonAction: CalendarAction) => {\n // handle button in day calendar view\n switch (buttonAction) {\n case \"reset\":\n setSelectedDate(initialDate);\n break;\n case \"confirmed\":\n setInitialDate(selectedDate);\n performOnChangeHandler(selectedDate);\n break;\n }\n\n const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n // Focus on year input if the selected date is valid to avoid restarting entire tab order\n if (isValid) {\n inputRef.current?.focusYearRef();\n } else {\n nodeRef.current?.focus();\n }\n setCalendarOpen(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnChangeHandler = (changeValue: string) => {\n if (onChange) {\n onChange(changeValue);\n }\n };\n\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n tabIndex={0}\n ref={nodeRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n disabled={disabled}\n readOnly={readOnly}\n focused={focused}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n className={clsx(styles.container, className)}\n {...otherProps}\n >\n <StandaloneDateInput\n ref={inputRef}\n disabled={disabled}\n onChange={handleChange}\n readOnly={readOnly}\n focused={calendarOpen}\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n value={selectedDate}\n hoverValue={hoveredDate}\n hideInputKeyboard={hideInputKeyboard}\n />\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n ref={calendarRef}\n initialCalendarDate={selectedDate}\n withButton={withButton}\n value={selectedDate}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onHover={handleHoverDayCell}\n onSelect={handleSelect}\n onDismiss={handleCalendarAction}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n onClose={handleClose}\n onDismiss={handleDismiss}\n customZIndex={zIndex}\n offset={16}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["DateInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}

package/date-input/types.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export interface DateInputProps extends CommonCalendarProps {
      * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
      * the dropdown may be obscured.
      *
-     * @default `document.body`
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     "data-testid"?: string | undefined;

package/date-navigator/date-navigator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-navigator.js","sources":["../../src/date-navigator/date-navigator.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport { CalendarHelper, DateHelper } from \"../util\";\nimport * as styles from \"./date-navigator.styles\";\nimport type { DateNavigatorProps } from \"./types\";\n\n/*\n Displays a date with left/right navigation arrows for stepping through dates or weeks.\n \n Use when users need to browse content organised by day or week — such as schedules,\n * calendars, or time-based feeds.\n */\nexport const DateNavigator = ({\n selectedDate,\n minDate,\n maxDate,\n loading,\n showDateAsShortForm,\n showCurrentDateAsToday,\n view = \"day\",\n onLeftArrowClick,\n onRightArrowClick,\n onCalendarDateSelect,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateNavigatorProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const date = DateHelper.toDayjs(selectedDate);\n const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const isLeftArrowDisabled = () => {\n if (!minDate) {\n return false;\n }\n return (\n CalendarHelper.isDisabledDay(date, undefined, minDate) \|\|\n DateHelper.isSame(date, minDate)\n );\n };\n\n const isRightArrowDisabled = () => {\n if (!maxDate) {\n return false;\n }\n return (\n CalendarHelper.isDisabledDay(date, undefined, undefined, maxDate) \|\|\n DateHelper.isSame(date, maxDate)\n );\n };\n\n const handleSelect = (value: string) => {\n onCalendarDateSelect?.(value);\n setIsCalendarOpen(!isCalendarOpen);\n };\n\n const navigatePrevious = () => {\n setIsCalendarOpen(false);\n onLeftArrowClick(selectedDate);\n };\n\n const navigateNext = () => {\n setIsCalendarOpen(false);\n onRightArrowClick(selectedDate);\n };\n\n // Helper function to get week range\n const getWeekRange = (selectedDate: string) => {\n const currentDate = DateHelper.toDayjs(selectedDate);\n const startOfWeek = currentDate.startOf(\"week\");\n const endOfWeek = currentDate.endOf(\"week\");\n\n return {\n startDisplay: startOfWeek.format(\"D MMM\"),\n endDisplay: endOfWeek.format(\"D MMM\"),\n year: endOfWeek.format(\"YYYY\"),\n };\n };\n\n // Calculate display text based on view\n const getDisplayText = () => {\n if (view === \"week\") {\n const weekRange = getWeekRange(selectedDate);\n return `${weekRange.startDisplay} - ${weekRange.endDisplay}, ${weekRange.year}`;\n }\n const dateText = DateHelper.toDayjs(selectedDate)\n .format(showDateAsShortForm ? \"D MMM YYYY\" : \"D MMMM YYYY\")\n .toString();\n const isToday = DateHelper.isSame(selectedDate, dayjs());\n const dayText =\n isToday && showCurrentDateAsToday\n ? \"Today\"\n : date.format(showDateAsShortForm ? \"ddd\" : \"dddd\");\n return `${dateText}, ${dayText}`;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n initialCalendarDate={selectedDate}\n value={selectedDate}\n minDate={minDate}\n maxDate={maxDate}\n onSelect={handleSelect}\n width={elementWidth}\n />\n );\n };\n\n const renderDateNavElement = () => {\n const ariaLabel =\n view === \"week\"\n ? {\n left: \"Previous week\",\n right: \"Next week\",\n }\n : {\n left: \"Previous day\",\n right: \"Next day\",\n };\n\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <Button\n className={styles.headerArrowButton}\n data-testid=\"date-navigator-left-arrow-btn\"\n disabled={loading \|\| isLeftArrowDisabled()}\n aria-label={ariaLabel.left}\n onClick={navigatePrevious}\n styleType=\"light\"\n sizeType=\"small\"\n icon={\n <ChevronLeftIcon\n className={styles.headerArrowButtonIcon}\n />\n }\n />\n <BasicButton\n onClick={() => setIsCalendarOpen(!isCalendarOpen)}\n className={styles.dateTextButton}\n data-testid=\"date-navigator-date-text\"\n disabled={!onCalendarDateSelect \|\| loading}\n >\n {getDisplayText()}\n </BasicButton>\n <Button\n className={styles.headerArrowButton}\n data-testid=\"date-navigator-right-arrow-btn\"\n disabled={loading \|\| isRightArrowDisabled()}\n aria-label={ariaLabel.right}\n onClick={navigateNext}\n styleType=\"light\"\n sizeType=\"small\"\n icon={\n <ChevronRightIcon\n className={styles.headerArrowButtonIcon}\n />\n }\n />\n </div>\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!loading}\n isOpen={isCalendarOpen}\n renderElement={renderDateNavElement}\n renderDropdown={renderCalendar}\n onDismiss={() => setIsCalendarOpen(false)}\n onClose={() => setIsCalendarOpen(false)}\n offset={8}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["DateNavigator","_a","selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","className","otherProps","__rest","date","DateHelper","toDayjs","isCalendarOpen","setIsCalendarOpen","useState","handleSelect","value","navigatePrevious","navigateNext","getDisplayText","weekRange","currentDate","startOfWeek","startOf","endOfWeek","endOf","startDisplay","format","endDisplay","year","getWeekRange","toString","isSame","dayjs","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","ariaLabel","left","right","_jsxs","Object","assign","clsx","styles.container","children","Button","styles.headerArrowButton","disabled","CalendarHelper","isDisabledDay","undefined","onClick","styleType","sizeType","icon","ChevronLeftIcon","styles.headerArrowButtonIcon","BasicButton","styles.dateTextButton","ChevronRightIcon","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onSelect","width","onDismiss","onClose","offset","rootNode"],"mappings":"+/BAqBO,MAAMA,EAAiBC,IAAA,IAAAC,aAC1BA,EAAYC,QACZA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,oBACPA,EAAmBC,uBACnBA,EAAsBC,KACtBA,EAAO,MAAKC,iBACZA,EAAgBC,kBAChBA,EAAiBC,qBACjBA,EAAoBC,iBACpBA,EAAgBC,UAChBA,GAASZ,EACNa,EAAUC,EAAAd,EAba,mMAkB1B,MAAMe,EAAOC,EAAWC,QAAQhB,IACzBiB,EAAgBC,GAAqBC,GAAkB,GAyBxDC,EAAgBC,IAClBZ,SAAAA,EAAuBY,GACvBH,GAAmBD,EAAe,EAGhCK,EAAmB,KACrBJ,GAAkB,GAClBX,EAAiBP,EAAa,EAG5BuB,EAAe,KACjBL,GAAkB,GAClBV,EAAkBR,EAAa,EAiB7BwB,EAAiB,KACnB,GAAa,SAATlB,EAAiB,CACjB,MAAMmB,EAfO,CAACzB,IAClB,MAAM0B,EAAcX,EAAWC,QAAQhB,GACjC2B,EAAcD,EAAYE,QAAQ,QAClCC,EAAYH,EAAYI,MAAM,QAEpC,MAAO,CACHC,aAAcJ,EAAYK,OAAO,SACjCC,WAAYJ,EAAUG,OAAO,SAC7BE,KAAML,EAAUG,OAAO,QAC1B,EAMqBG,CAAanC,GAC/B,MAAO,GAAGyB,EAAUM,kBAAkBN,EAAUQ,eAAeR,EAAUS,MAC7E,CASA,MAAO,GARUnB,EAAWC,QAAQhB,GAC/BgC,OAAO5B,EAAsB,aAAe,eAC5CgC,eACWrB,EAAWsB,OAAOrC,EAAcsC,MAEjCjC,EACL,QACAS,EAAKkB,OAAO5B,EAAsB,MAAQ,SACpB,EA0EpC,OACImC,EAACC,EAAmB,CAChBC,SAAUtC,EACVuC,OAAQzB,EACR0B,cA1DqB,KACzB,MAAMC,EACO,SAATtC,EACM,CACIuC,KAAM,gBACNC,MAAO,aAEX,CACID,KAAM,eACNC,MAAO,YAGrB,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASrC,EAAU,CAAED,UAAWuC,EAAKC,EAAkBxC,GAAUyC,SAAA,CAC7Db,EAACc,EAAM,CACH1C,UAAW2C,EAAwB,cACvB,gCACZC,SAAUpD,KAlGjBF,IAIDuD,EAAeC,cAAc3C,OAAM4C,EAAWzD,IAC9Cc,EAAWsB,OAAOvB,EAAMb,IA6F0B,aAC9B2C,EAAUC,KACtBc,QAASrC,EACTsC,UAAU,QACVC,SAAS,QACTC,KACIvB,EAACwB,EAAe,CACZpD,UAAWqD,MAIvBzB,EAAC0B,EAAW,CACRN,QAAS,IAAMzC,GAAmBD,GAClCN,UAAWuD,EAAqB,cACpB,2BACZX,UAAW9C,GAAwBN,EAAOiD,SAEzC5B,MAELe,EAACc,EAAM,CACH1C,UAAW2C,EAAwB,cACvB,iCACZC,SAAUpD,KA9GjBD,IAIDsD,EAAeC,cAAc3C,OAAM4C,OAAWA,EAAWxD,IACzDa,EAAWsB,OAAOvB,EAAMZ,IAyG2B,aAC/B0C,EAAUE,MACtBa,QAASpC,EACTqC,UAAU,QACVC,SAAS,QACTC,KACIvB,EAAC4B,EAAgB,CACbxD,UAAWqD,SAIrB,EASNI,eAzEe,EAAGC,kBAElB9B,EAAC+B,EAAgB,CACbC,QAAQ,SACRC,oBAAqBxE,EACrBqB,MAAOrB,EACPC,QAASA,EACTC,QAASA,EACTuE,SAAUrD,EACVsD,MAAOL,IAiEXM,UAAW,IAAMzD,GAAkB,GACnC0D,QAAS,IAAM1D,GAAkB,GACjC2D,OAAQ,EACRC,SAAUpE,GACZ"}
1	+ {"version":3,"file":"date-navigator.js","sources":["../../src/date-navigator/date-navigator.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport { CalendarHelper, DateHelper } from \"../util\";\nimport * as styles from \"./date-navigator.styles\";\nimport type { DateNavigatorProps } from \"./types\";\n\n// @catalog\n/*\n Displays a date with left/right navigation arrows for stepping through dates or weeks.\n \n Use when users need to browse content organised by day or week — such as schedules,\n * calendars, or time-based feeds.\n */\nexport const DateNavigator = ({\n selectedDate,\n minDate,\n maxDate,\n loading,\n showDateAsShortForm,\n showCurrentDateAsToday,\n view = \"day\",\n onLeftArrowClick,\n onRightArrowClick,\n onCalendarDateSelect,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateNavigatorProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const date = DateHelper.toDayjs(selectedDate);\n const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const isLeftArrowDisabled = () => {\n if (!minDate) {\n return false;\n }\n return (\n CalendarHelper.isDisabledDay(date, undefined, minDate) \|\|\n DateHelper.isSame(date, minDate)\n );\n };\n\n const isRightArrowDisabled = () => {\n if (!maxDate) {\n return false;\n }\n return (\n CalendarHelper.isDisabledDay(date, undefined, undefined, maxDate) \|\|\n DateHelper.isSame(date, maxDate)\n );\n };\n\n const handleSelect = (value: string) => {\n onCalendarDateSelect?.(value);\n setIsCalendarOpen(!isCalendarOpen);\n };\n\n const navigatePrevious = () => {\n setIsCalendarOpen(false);\n onLeftArrowClick(selectedDate);\n };\n\n const navigateNext = () => {\n setIsCalendarOpen(false);\n onRightArrowClick(selectedDate);\n };\n\n // Helper function to get week range\n const getWeekRange = (selectedDate: string) => {\n const currentDate = DateHelper.toDayjs(selectedDate);\n const startOfWeek = currentDate.startOf(\"week\");\n const endOfWeek = currentDate.endOf(\"week\");\n\n return {\n startDisplay: startOfWeek.format(\"D MMM\"),\n endDisplay: endOfWeek.format(\"D MMM\"),\n year: endOfWeek.format(\"YYYY\"),\n };\n };\n\n // Calculate display text based on view\n const getDisplayText = () => {\n if (view === \"week\") {\n const weekRange = getWeekRange(selectedDate);\n return `${weekRange.startDisplay} - ${weekRange.endDisplay}, ${weekRange.year}`;\n }\n const dateText = DateHelper.toDayjs(selectedDate)\n .format(showDateAsShortForm ? \"D MMM YYYY\" : \"D MMMM YYYY\")\n .toString();\n const isToday = DateHelper.isSame(selectedDate, dayjs());\n const dayText =\n isToday && showCurrentDateAsToday\n ? \"Today\"\n : date.format(showDateAsShortForm ? \"ddd\" : \"dddd\");\n return `${dateText}, ${dayText}`;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n initialCalendarDate={selectedDate}\n value={selectedDate}\n minDate={minDate}\n maxDate={maxDate}\n onSelect={handleSelect}\n width={elementWidth}\n />\n );\n };\n\n const renderDateNavElement = () => {\n const ariaLabel =\n view === \"week\"\n ? {\n left: \"Previous week\",\n right: \"Next week\",\n }\n : {\n left: \"Previous day\",\n right: \"Next day\",\n };\n\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <Button\n className={styles.headerArrowButton}\n data-testid=\"date-navigator-left-arrow-btn\"\n disabled={loading \|\| isLeftArrowDisabled()}\n aria-label={ariaLabel.left}\n onClick={navigatePrevious}\n styleType=\"light\"\n sizeType=\"small\"\n icon={\n <ChevronLeftIcon\n className={styles.headerArrowButtonIcon}\n />\n }\n />\n <BasicButton\n onClick={() => setIsCalendarOpen(!isCalendarOpen)}\n className={styles.dateTextButton}\n data-testid=\"date-navigator-date-text\"\n disabled={!onCalendarDateSelect \|\| loading}\n >\n {getDisplayText()}\n </BasicButton>\n <Button\n className={styles.headerArrowButton}\n data-testid=\"date-navigator-right-arrow-btn\"\n disabled={loading \|\| isRightArrowDisabled()}\n aria-label={ariaLabel.right}\n onClick={navigateNext}\n styleType=\"light\"\n sizeType=\"small\"\n icon={\n <ChevronRightIcon\n className={styles.headerArrowButtonIcon}\n />\n }\n />\n </div>\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!loading}\n isOpen={isCalendarOpen}\n renderElement={renderDateNavElement}\n renderDropdown={renderCalendar}\n onDismiss={() => setIsCalendarOpen(false)}\n onClose={() => setIsCalendarOpen(false)}\n offset={8}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["DateNavigator","_a","selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","className","otherProps","__rest","date","DateHelper","toDayjs","isCalendarOpen","setIsCalendarOpen","useState","handleSelect","value","navigatePrevious","navigateNext","getDisplayText","weekRange","currentDate","startOfWeek","startOf","endOfWeek","endOf","startDisplay","format","endDisplay","year","getWeekRange","toString","isSame","dayjs","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","ariaLabel","left","right","_jsxs","Object","assign","clsx","styles.container","children","Button","styles.headerArrowButton","disabled","CalendarHelper","isDisabledDay","undefined","onClick","styleType","sizeType","icon","ChevronLeftIcon","styles.headerArrowButtonIcon","BasicButton","styles.dateTextButton","ChevronRightIcon","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onSelect","width","onDismiss","onClose","offset","rootNode"],"mappings":"+/BAsBO,MAAMA,EAAiBC,IAAA,IAAAC,aAC1BA,EAAYC,QACZA,EAAOC,QACPA,EAAOC,QACPA,EAAOC,oBACPA,EAAmBC,uBACnBA,EAAsBC,KACtBA,EAAO,MAAKC,iBACZA,EAAgBC,kBAChBA,EAAiBC,qBACjBA,EAAoBC,iBACpBA,EAAgBC,UAChBA,GAASZ,EACNa,EAAUC,EAAAd,EAba,mMAkB1B,MAAMe,EAAOC,EAAWC,QAAQhB,IACzBiB,EAAgBC,GAAqBC,GAAkB,GAyBxDC,EAAgBC,IAClBZ,SAAAA,EAAuBY,GACvBH,GAAmBD,EAAe,EAGhCK,EAAmB,KACrBJ,GAAkB,GAClBX,EAAiBP,EAAa,EAG5BuB,EAAe,KACjBL,GAAkB,GAClBV,EAAkBR,EAAa,EAiB7BwB,EAAiB,KACnB,GAAa,SAATlB,EAAiB,CACjB,MAAMmB,EAfO,CAACzB,IAClB,MAAM0B,EAAcX,EAAWC,QAAQhB,GACjC2B,EAAcD,EAAYE,QAAQ,QAClCC,EAAYH,EAAYI,MAAM,QAEpC,MAAO,CACHC,aAAcJ,EAAYK,OAAO,SACjCC,WAAYJ,EAAUG,OAAO,SAC7BE,KAAML,EAAUG,OAAO,QAC1B,EAMqBG,CAAanC,GAC/B,MAAO,GAAGyB,EAAUM,kBAAkBN,EAAUQ,eAAeR,EAAUS,MAC7E,CASA,MAAO,GARUnB,EAAWC,QAAQhB,GAC/BgC,OAAO5B,EAAsB,aAAe,eAC5CgC,eACWrB,EAAWsB,OAAOrC,EAAcsC,MAEjCjC,EACL,QACAS,EAAKkB,OAAO5B,EAAsB,MAAQ,SACpB,EA0EpC,OACImC,EAACC,EAAmB,CAChBC,SAAUtC,EACVuC,OAAQzB,EACR0B,cA1DqB,KACzB,MAAMC,EACO,SAATtC,EACM,CACIuC,KAAM,gBACNC,MAAO,aAEX,CACID,KAAM,eACNC,MAAO,YAGrB,OACIC,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASrC,EAAU,CAAED,UAAWuC,EAAKC,EAAkBxC,GAAUyC,SAAA,CAC7Db,EAACc,EAAM,CACH1C,UAAW2C,EAAwB,cACvB,gCACZC,SAAUpD,KAlGjBF,IAIDuD,EAAeC,cAAc3C,OAAM4C,EAAWzD,IAC9Cc,EAAWsB,OAAOvB,EAAMb,IA6F0B,aAC9B2C,EAAUC,KACtBc,QAASrC,EACTsC,UAAU,QACVC,SAAS,QACTC,KACIvB,EAACwB,EAAe,CACZpD,UAAWqD,MAIvBzB,EAAC0B,EAAW,CACRN,QAAS,IAAMzC,GAAmBD,GAClCN,UAAWuD,EAAqB,cACpB,2BACZX,UAAW9C,GAAwBN,EAAOiD,SAEzC5B,MAELe,EAACc,EAAM,CACH1C,UAAW2C,EAAwB,cACvB,iCACZC,SAAUpD,KA9GjBD,IAIDsD,EAAeC,cAAc3C,OAAM4C,OAAWA,EAAWxD,IACzDa,EAAWsB,OAAOvB,EAAMZ,IAyG2B,aAC/B0C,EAAUE,MACtBa,QAASpC,EACTqC,UAAU,QACVC,SAAS,QACTC,KACIvB,EAAC4B,EAAgB,CACbxD,UAAWqD,SAIrB,EASNI,eAzEe,EAAGC,kBAElB9B,EAAC+B,EAAgB,CACbC,QAAQ,SACRC,oBAAqBxE,EACrBqB,MAAOrB,EACPC,QAASA,EACTC,QAASA,EACTuE,SAAUrD,EACVsD,MAAOL,IAiEXM,UAAW,IAAMzD,GAAkB,GACnC0D,QAAS,IAAM1D,GAAkB,GACjC2D,OAAQ,EACRC,SAAUpE,GACZ"}

package/date-navigator/types.d.ts CHANGED Viewed

@@ -58,7 +58,7 @@ export interface DateNavigatorProps {
      * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
      * the dropdown may be obscured.
      *
-     * @default `document.body`
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
 }