npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.3 → 4.0.0-alpha.5 - Mend

@lifesg/react-design-system 4.0.0-alpha.3 → 4.0.0-alpha.5

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 (1629) 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 { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\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 { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\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 tableEndRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarRef = 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 [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\n\n useApplyStyle(actionBarRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const onResize = useCallback(() => {\n if (!wrapperRef.current \|\| !actionBarRef.current) {\n return;\n }\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n setScrollable(scrollable);\n\n if (scrollable) {\n actionBarRef.current.style.transform = `translateY(0)`;\n } else {\n calculateStickyInViewport();\n }\n }, []);\n\n useEffect(() => {\n onResize();\n }, []);\n\n useResizeDetector({ onResize });\n\n const scrollHandler = () => {\n requestAnimationFrame(() => {\n if (scrollable) {\n calculateFixedInViewport();\n } else {\n calculateStickyInViewport();\n }\n });\n };\n\n useEventListener(\"scroll\", scrollHandler, \"window\");\n\n useEffect(() => {\n checkLastBorder();\n }, [rows]);\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\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 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 calculateFixedInViewport = () => {\n if (!wrapperRef.current) {\n return;\n }\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n setIsFloatingActionBar(\n wrapperBounds.bottom > window.innerHeight + 30 &&\n wrapperBounds.top < window.innerHeight - 200\n );\n };\n\n const calculateStickyInViewport = () => {\n if (\n !tableRef.current \|\|\n !tableEndRef.current \|\|\n !wrapperRef.current \|\|\n !actionBarRef.current \|\|\n !headerRef.current\n ) {\n return;\n }\n\n const endBounds = tableEndRef.current.getBoundingClientRect();\n\n if (endBounds.top > window.innerHeight) {\n const bottomOffset = endBounds.bottom - window.innerHeight;\n const bottomToHeaderOffset =\n tableRef.current.getBoundingClientRect().height -\n headerRef.current.clientHeight -\n 32;\n const maxBottomOffset = Math.min(\n bottomOffset,\n bottomToHeaderOffset\n );\n\n actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n } else {\n actionBarRef.current.style.transform = `translateY(0)`;\n }\n };\n\n const checkLastBorder = () => {\n if (!tableRef.current \|\| !wrapperRef.current) {\n return;\n }\n // 56 pixels added due to the behavior of action bar\n setShowLastBorder(\n tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n wrapperRef.current.clientHeight\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 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>\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 showLastBorder && 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>\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 hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n const hasNotReachedTableEnd = !scrollable && !end;\n const shouldUseFloatingActionBar =\n hasNotReachedScrollableEnd \|\|\n hasNotReachedTableEnd \|\|\n isFloatingActionBar;\n\n return (\n <div\n ref={actionBarRef}\n className={clsx(\n styles.actionBarWrapper,\n isFloatingActionBar && styles.actionBarWrapperFloating\n )}\n >\n <div\n className={clsx(\n styles.actionBar,\n shouldUseFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(styles.tableWrapper, className)}\n ref={wrapperRef}\n onScroll={() => {\n if (scrollable && wrapperRef.current) {\n setScrollEnd(\n wrapperRef.current.scrollTop +\n wrapperRef.current.clientHeight >=\n wrapperRef.current.scrollHeight\n );\n }\n }}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={clsx(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 ref={(r) => {\n tableEndRef.current = r;\n endRef(r);\n }}\n />\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","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","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","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","disabled","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRow","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"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"}
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 { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\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 { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\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 tableEndRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarRef = 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 [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\n\n useApplyStyle(actionBarRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const onResize = useCallback(() => {\n if (!wrapperRef.current \|\| !actionBarRef.current) {\n return;\n }\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n setScrollable(scrollable);\n\n if (scrollable) {\n actionBarRef.current.style.transform = `translateY(0)`;\n } else {\n calculateStickyInViewport();\n }\n }, []);\n\n useEffect(() => {\n onResize();\n }, []);\n\n useResizeDetector({ onResize });\n\n const scrollHandler = () => {\n requestAnimationFrame(() => {\n if (scrollable) {\n calculateFixedInViewport();\n } else {\n calculateStickyInViewport();\n }\n });\n };\n\n useEventListener(\"scroll\", scrollHandler, \"window\");\n\n useEffect(() => {\n checkLastBorder();\n }, [rows]);\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 calculateFixedInViewport = () => {\n if (!wrapperRef.current) {\n return;\n }\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n setIsFloatingActionBar(\n wrapperBounds.bottom > window.innerHeight + 30 &&\n wrapperBounds.top < window.innerHeight - 200\n );\n };\n\n const calculateStickyInViewport = () => {\n if (\n !tableRef.current \|\|\n !tableEndRef.current \|\|\n !wrapperRef.current \|\|\n !actionBarRef.current \|\|\n !headerRef.current\n ) {\n return;\n }\n\n const endBounds = tableEndRef.current.getBoundingClientRect();\n\n if (endBounds.top > window.innerHeight) {\n const bottomOffset = endBounds.bottom - window.innerHeight;\n const bottomToHeaderOffset =\n tableRef.current.getBoundingClientRect().height -\n headerRef.current.clientHeight -\n 32;\n const maxBottomOffset = Math.min(\n bottomOffset,\n bottomToHeaderOffset\n );\n\n actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n } else {\n actionBarRef.current.style.transform = `translateY(0)`;\n }\n };\n\n const checkLastBorder = () => {\n if (!tableRef.current \|\| !wrapperRef.current) {\n return;\n }\n // 56 pixels added due to the behavior of action bar\n setShowLastBorder(\n tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n wrapperRef.current.clientHeight\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 showLastBorder && 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 hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n const hasNotReachedTableEnd = !scrollable && !end;\n const shouldUseFloatingActionBar =\n hasNotReachedScrollableEnd \|\|\n hasNotReachedTableEnd \|\|\n isFloatingActionBar;\n\n return (\n <div\n ref={actionBarRef}\n className={clsx(\n styles.actionBarWrapper,\n isFloatingActionBar && styles.actionBarWrapperFloating\n )}\n >\n <div\n className={clsx(\n styles.actionBar,\n shouldUseFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(styles.tableWrapper, className)}\n ref={wrapperRef}\n onScroll={() => {\n if (scrollable && wrapperRef.current) {\n setScrollEnd(\n wrapperRef.current.scrollTop +\n wrapperRef.current.clientHeight >=\n wrapperRef.current.scrollHeight\n );\n }\n }}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={clsx(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 ref={(r) => {\n tableEndRef.current = r;\n endRef(r);\n }}\n />\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","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","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","onScroll","scrollTop","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","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import"./data-table.styles_1nj2uzq.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="s7u4vf5",c="h1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",s="h4ne4e9",f="bfa3d3x",i="b6ks76c",l="b1bceurq",h="b8t2s91",o="bjmthdi",x="b1tvp43a",q="bx1feaw",y="b1g3gl2s",u="e1yxh9il",w="s1w2nktt",W="axywpxo",g="anoy5c0",j="a1gvi5ye",m="aag0lf9",B="a1euqarq",_="ldhafdm",v="e1pcc0nq";export{g as actionBar,W as actionBarButton,j as actionBarFloating,m as actionBarWrapper,B as actionBarWrapperFloating,f as bodyCell,q as bodyCellCheckbox,y as bodyCellText,i as bodyRow,l as bodyRowAlternating,o as bodyRowSelectable,h as bodyRowSelected,x as bodyRowWithBottomBorder,u as emptyStateCell,v as emptyStateTitle,p as headerCell,d as headerCellCheckbox,b as headerCellClickable,s as headerCellContent,c as headerRow,_ as loadingStateWrapper,w as selectionCheckboxWrapper,n as stickyHeader,r as table,e as tableContainer,t as tableWrapper,a as tokens};
+import"./data-table.styles_1iqq1g7.css";const a={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"},t="t188sfx3",e="t1j0mhj",r="t4ucy2z",n="s7u4vf5",c="h1nfqacf",p="h1744qno",b="h1ec4wtd",d="hp15x3z",i="h4ne4e9",s="bfa3d3x",f="b6ks76c",l="b1bceurq",h="b8t2s91",o="bjmthdi",q="b1tvp43a",x="bx1feaw",y="b1g3gl2s",g="e1yxh9il",w="s1w2nktt",W="axywpxo",m="anoy5c0",u="a1gvi5ye",B="aag0lf9",_="a1euqarq",j="ldhafdm",v="e1pcc0nq";export{m as actionBar,W as actionBarButton,u as actionBarFloating,B as actionBarWrapper,_ as actionBarWrapperFloating,s as bodyCell,x as bodyCellCheckbox,y as bodyCellText,f as bodyRow,l as bodyRowAlternating,o as bodyRowSelectable,h as bodyRowSelected,q as bodyRowWithBottomBorder,g as emptyStateCell,v as emptyStateTitle,p as headerCell,d as headerCellCheckbox,b as headerCellClickable,i as headerCellContent,c as headerRow,j as loadingStateWrapper,w as selectionCheckboxWrapper,n as stickyHeader,r as table,e as tableContainer,t as tableWrapper,a as tokens};
 //# sourceMappingURL=data-table.styles.js.map

package/data-table/{data-table.styles_1nj2uzq.css → data-table.styles_1iqq1g7.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-.t188sfx3{overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);}.t188sfx3::-webkit-scrollbar{display:none;}.t188sfx3 *{-ms-overflow-style:none;scrollbar-width:none;}
+@layer fds{.t188sfx3{overflow:auto;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-md);}.t188sfx3::-webkit-scrollbar{display:none;}.t188sfx3 *{-ms-overflow-style:none;scrollbar-width:none;}
 .t1j0mhj{-webkit-flex:1;-ms-flex:1;flex:1;}
 .t4ucy2z{text-align:left;border-collapse:separate;border-spacing:0;width:100%;}
 .s7u4vf5{position:-webkit-sticky;position:sticky;top:0;z-index:20;}
@@ -17,10 +17,10 @@
 .b1g3gl2s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
 .e1yxh9il{padding:4rem 0;}.e1yxh9il:first-child{padding-left:1.5rem;}.e1yxh9il:last-child{padding-right:1.5rem;}
 .s1w2nktt{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;}
-.axywpxo{font-family:var(--fds-font-family);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;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
+.axywpxo{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;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
 .anoy5c0{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:all 300ms ease;transition:all 300ms ease;border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
 .a1gvi5ye{-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);}
 .aag0lf9{bottom:0;position:-webkit-sticky;position:sticky;left:0;}
 .a1euqarq{--fds-internal-dataTable-actionBarWrapper-left:initial;--fds-internal-dataTable-actionBarWrapper-width:initial;position:fixed;left:var(--fds-internal-dataTable-actionBarWrapper-left, 0px);width:var(--fds-internal-dataTable-actionBarWrapper-width, 100%);}
 .ldhafdm{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;}
-.e1pcc0nq{margin-top:2rem;margin-bottom:1rem;}
+.e1pcc0nq{margin-top:2rem;margin-bottom:1rem;}}

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

@@ -1,40 +1,70 @@
 import type { CSSProperties, ReactNode } from "react";
 import type { ErrorDisplayAttributes } from "../error-display/types";
+/** Props for the `DataTable` component. */
 export interface DataTableProps {
     id?: string | undefined;
     "data-testid"?: string | undefined;
-    /** Configuration for each header */
+    /** Column definitions that determine the rendered headers and the `fieldKey` used to read values from each `RowProps` entry. */
     headers: HeaderProps[];
+    /** Row data to render. When omitted or empty the empty state is shown. */
     rows?: RowProps[] | undefined;
     className?: string | undefined;
+    /**
+     * Controlled set of row IDs that are currently selected.
+     *
+     * @remarks Must be provided alongside `enableMultiSelect` for selection to work. Pass an
+     * empty array (not `undefined`) to enable the select-all checkbox while having no rows
+     * selected.
+     */
     selectedIds?: string[] | undefined;
+    /** Row IDs whose checkboxes are rendered in a disabled state; the rows remain visible. */
     disabledIds?: string[] | undefined;
-    /** Enables a checkbox for each row */
+    /** Renders a checkbox column as the first column of each row to support row selection. */
     enableMultiSelect?: boolean | undefined;
-    /** Enables a select all checkbox */
+    /** Renders a select-all checkbox in the header checkbox column. Requires `enableMultiSelect`. */
     enableSelectAll?: boolean | undefined;
-    /** Specifies if an action bar is visible when one or more rows are selected */
+    /** Shows the action bar whenever one or more rows are selected. */
     enableActionBar?: boolean | undefined;
-    /** Specifies if the header is fixed to the top */
+    /** Keeps the header row visible as the user scrolls down through the table. */
     enableStickyHeader?: boolean | undefined;
-    /** Custom content to be rendered within the action bar */
+    /** Additional content rendered inside the action bar. */
     actionBarContent?: ReactNode | undefined;
+    /**
+     * Controls whether the table body renders data rows or a loading indicator.
+     * @default "success"
+     */
     loadState?: LoadStateType | undefined;
+    /** Called when a row's checkbox is toggled; receives the row ID and the new selected state. */
     onSelect?: ((rowId: string, isSelected: boolean) => void) | undefined;
+    /**
+     * Called when the select-all checkbox is toggled.
+     */
     onSelectAll?: ((isAllSelected: boolean) => void) | undefined;
+    /** Called when a header cell is clicked; receives the `fieldKey` of the clicked column. */
     onHeaderClick?: ((fieldKey: string) => void) | undefined;
+    /** Called when the "Clear selection" button inside the action bar is clicked. */
     onClearSelectionClick?: (() => void) | undefined;
-    /** Specifies the sort indicator display state for each column **/
+    /**
+     * Maps each `fieldKey` to its current sort direction. A key present in this map causes the
+     * corresponding header to render a directional arrow and expose sort controls to assistive
+     * technology.
+     */
     sortIndicators?: SortIndicatorsProps | undefined;
-    /** Specifies if every alternate row has a different background colour */
+    /** Applies an alternate background colour to every odd-indexed row. */
     alternatingRows?: boolean | undefined;
-    /** Override props for the empty view display */
+    /**
+     * Overrides the title and description shown in the built-in empty state. Ignored when
+     * `renderCustomEmptyView` is provided.
+     */
     emptyView?: ErrorDisplayAttributes | undefined;
-    /** Returns a custom view to be rendered when the table is empty */
+    /** Renders a fully custom empty state in place of the default `ErrorDisplay`. */
     renderCustomEmptyView?: (() => ReactNode) | undefined;
 }
+/** Whether the table body is in a loading or data-ready state. */
 export type LoadStateType = "loading" | "success";
+/** Direction of a column sort indicator. */
 export type SortIndicatorType = "asc" | "desc";
+/** Maps column `fieldKey` values to their current sort direction. */
 export interface SortIndicatorsProps {
     [fieldKey: string]: SortIndicatorType;
 }
@@ -45,23 +75,39 @@ export interface SortIndicatorsProps {
  * For additional customisation, pass a `HeaderItemProps` object
  */
 export type HeaderProps = string | HeaderItemProps;
+/**
+ * Full object form of a column header definition;
+ * use instead of a plain string when custom labels, click handling,
+ * or accessibility metadata is needed. */
 interface HeaderItemProps {
+    /** Key used to read the corresponding cell value from each `RowProps` entry. */
     fieldKey: string;
+    /** Column heading content. Pass a string for plain text or a `ReactNode` for custom markup. */
     label: string | ReactNode;
+    /** Makes the header cell interactive, firing `onHeaderClick` when clicked. */
     clickable?: boolean | undefined;
-    /** Used with `enableMultiSelect`. Marks this column as descriptive of the row
+    /**
+     * Used with `enableMultiSelect`. Marks this column as descriptive of the row
      * (e.g. a name or unique ID). Its value is used to label the row's checkbox
      * for screen readers.
      */
     keyColumn?: boolean | undefined;
     style?: CSSProperties | undefined;
 }
+/** Props for each row of data in the table. */
 export interface RowProps {
+    /** Unique identifier for the row; used as the key and referenced by `selectedIds`/`disabledIds`. */
     id: string | number;
-    /** data with key matching fieldKey in `HeaderProps` */
+    /**
+     * Cell values keyed by the `fieldKey` of the matching `HeaderProps`. Values can be a
+     * primitive (rendered inside a `Typography.BodyBL`), a `ReactNode`, or a render function
+     * that receives the full row and `RowRenderProps`.
+     */
     [fieldKey: string]: string | number | ReactNode | ((row: RowProps, renderProps: RowRenderProps) => ReactNode) | undefined;
 }
+/** Runtime context passed to a cell's render function when the value is a function. */
 interface RowRenderProps {
+    /** Whether the row is currently in the `selectedIds` set. */
     isSelected: boolean;
 }
 export {};

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

@@ -1,2 +1,7 @@
 import type { DateInputProps } from "./types";
+/**
+ * A single-date input field with an attached calendar dropdown.
+ *
+ * Use this to enter or pick a single date.
+ */
 export declare const DateInput: ({ minDate, maxDate, disabled, disabledDates, error, hideInputKeyboard, value, onChange, onFocus, onBlur, onYearMonthDisplayChange, withButton, readOnly, id, allowDisabledSelection, zIndex, dropdownRootNode, className, ...otherProps }: DateInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import r from"clsx";import t from"../external/dayjs/dayjs.min.js";import{useState as n,useRef as o,useEffect as i}from"react";import{ElementWithDropdown as l}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as d}from"../shared/input-wrapper/input-wrapper.js";import{CalendarDropdown as s}from"../shared/internal-calendar/calendar-dropdown.js";import"../shared/internal-calendar/internal-calendar.js";import{StandaloneDateInput as u}from"../shared/standalone-date-input/standalone-date-input.js";import"../util/calendar-helper.js";import{DateInputHelper as c}from"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{container as p}from"./date-input.styles.js";const m=m=>{var{minDate:h,maxDate:v,disabled:f,disabledDates:D,error:b,hideInputKeyboard:w,value:j,onChange:g,onFocus:y,onBlur:I,onYearMonthDisplayChange:x,withButton:Y=!0,readOnly:C,id:B,allowDisabledSelection:N,zIndex:O,dropdownRootNode:z,className:M}=m,F=e(m,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className"]);const[R,S]=n(c.sanitizeInput(j)),[K,V]=n(c.sanitizeInput(j)),[_,k]=n(void 0),[E,H]=n(!1),[T,W]=n(!1),Z=o(null),q=o(null),A=o(null);i((()=>{const e=c.sanitizeInput(j);S(e),V(e)}),[j]);const G=e=>{!N&&c.isDateDisabled(e,{disabledDates:D,minDate:h,maxDate:v})||(V(e),Y||(X(e),S(e),e&&H(!1)))},J=e=>{var a;V(e),Y||(X(e),S(e),e&&(null===(a=q.current)||void 0===a||a.focusYearRef(),H(!1)),k(void 0))},L=()=>{C||f||(H(!0),T||(W(!0),y&&y()))},P=e=>{var a,r,t;const n=e.relatedTarget,o=A.current&&A.current.contains(n),i=Z.current&&Z.current.contains(n),l=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));(T&&!E&&!i&&!l||E&&!i&&!o&&!l)&&(null===(t=q.current)||void 0===t||t.resetInput(),V(R),W(!1),H(!1),$())},Q=e=>{k(e)},U=e=>{var a,r;switch(e){case"reset":V(R);break;case"confirmed":S(K),X(K)}t(K,"YYYY-MM-DD",!0).isValid()?null===(a=q.current)||void 0===a||a.focusYearRef():null===(r=Z.current)||void 0===r||r.focus(),H(!1)},X=e=>{g&&g(e)},$=()=>{I&&I()};return a(l,{enabled:!C&&!f,isOpen:E,renderElement:()=>a(d,Object.assign({role:"group",tabIndex:0,ref:Z,onBlur:P,onFocus:L,disabled:f,readOnly:C,focused:T,error:b,id:B,"data-testid":F["data-testid"],"aria-disabled":f,className:r(p,M)},F,{children:a(u,{ref:q,disabled:f,onChange:G,readOnly:C,focused:E,names:["start-day","start-month","start-year"],value:K,hoverValue:_,hideInputKeyboard:w})})),renderDropdown:({elementWidth:e})=>a(s,{variant:"single",ref:A,initialCalendarDate:K,withButton:Y,value:K,disabledDates:D,minDate:h,maxDate:v,allowDisabledSelection:N,onHover:Q,onSelect:J,onDismiss:U,onYearMonthDisplayChange:x,width:e,isFocusable:!C&&!f}),onClose:()=>{var e;null===(e=q.current)||void 0===e||e.resetInput(),V(R),H(!1),W(!1),$(),k(void 0)},onDismiss:()=>{var e,a;null===(e=q.current)||void 0===e||e.resetInput(),null===(a=Z.current)||void 0===a||a.focus(),V(R),H(!1)},customZIndex:O,offset:16,rootNode:z})};export{m as DateInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import r from"clsx";import t from"../external/dayjs/dayjs.min.js";import{useState as n,useRef as o,useEffect as i}from"react";import{ElementWithDropdown as l}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as d}from"../shared/input-wrapper/input-wrapper.js";import{CalendarDropdown as s}from"../shared/internal-calendar/calendar-dropdown.js";import"../shared/internal-calendar/internal-calendar.js";import{StandaloneDateInput as u}from"../shared/standalone-date-input/standalone-date-input.js";import"../util/calendar-helper.js";import{DateInputHelper as c}from"../util/date-input-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{container as p}from"./date-input.styles.js";const m=m=>{var{minDate:h,maxDate:v,disabled:f,disabledDates:D,error:b,hideInputKeyboard:w,value:j,onChange:g,onFocus:y,onBlur:I,onYearMonthDisplayChange:x,withButton:Y=!0,readOnly:C,id:B,allowDisabledSelection:N,zIndex:O,dropdownRootNode:z,className:M}=m,F=e(m,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className"]);const[R,S]=n(c.sanitizeInput(j)),[K,V]=n(c.sanitizeInput(j)),[_,k]=n(void 0),[E,H]=n(!1),[T,W]=n(!1),Z=o(null),q=o(null),A=o(null);i((()=>{const e=c.sanitizeInput(j);S(e),V(e)}),[j]);const G=e=>{!N&&c.isDateDisabled(e,{disabledDates:D,minDate:h,maxDate:v})||(V(e),Y||(X(e),S(e),e&&H(!1)))},J=e=>{var a;V(e),Y||(X(e),S(e),e&&(null===(a=q.current)||void 0===a||a.focusYearRef(),H(!1)),k(void 0))},L=()=>{C||f||(H(!0),T||(W(!0),y&&y()))},P=e=>{var a,r,t;const n=e.relatedTarget,o=A.current&&A.current.contains(n),i=Z.current&&Z.current.contains(n),l=(null===(a=null==n?void 0:n.matches)||void 0===a?void 0:a.call(n,"[data-floating-ui-focusable]"))||(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focus-guard]"));(T&&!E&&!i&&!l||E&&!i&&!o&&!l)&&(null===(t=q.current)||void 0===t||t.resetInput(),V(R),W(!1),H(!1),$())},Q=e=>{E&&k(e)},U=e=>{var a,r;switch(e){case"reset":V(R);break;case"confirmed":S(K),X(K)}t(K,"YYYY-MM-DD",!0).isValid()?null===(a=q.current)||void 0===a||a.focusYearRef():null===(r=Z.current)||void 0===r||r.focus(),H(!1)},X=e=>{g&&g(e)},$=()=>{I&&I()};return a(l,{enabled:!C&&!f,isOpen:E,renderElement:()=>a(d,Object.assign({role:"group",tabIndex:0,ref:Z,onBlur:P,onFocus:L,disabled:f,readOnly:C,focused:T,error:b,id:B,"data-testid":F["data-testid"],"aria-disabled":f,className:r(p,M)},F,{children:a(u,{ref:q,disabled:f,onChange:G,readOnly:C,focused:E,names:["start-day","start-month","start-year"],value:K,hoverValue:_,hideInputKeyboard:w})})),renderDropdown:({elementWidth:e})=>a(s,{variant:"single",ref:A,initialCalendarDate:K,withButton:Y,value:K,disabledDates:D,minDate:h,maxDate:v,allowDisabledSelection:N,onHover:Q,onSelect:J,onDismiss:U,onYearMonthDisplayChange:x,width:e,isFocusable:!C&&!f}),onClose:()=>{var e;null===(e=q.current)||void 0===e||e.resetInput(),V(R),H(!1),W(!1),$(),k(void 0)},onDismiss:()=>{var e,a;null===(e=q.current)||void 0===e||e.resetInput(),null===(a=Z.current)||void 0===a||a.focus(),V(R),H(!1)},customZIndex:O,offset:16,rootNode:z})};export{m as DateInput};
 //# sourceMappingURL=date-input.js.map

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\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 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/*\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/date-input.styles_1r5kcc7.css CHANGED Viewed

	@@ -1 +1 @@
1	- .c1udubt6{height:3rem;}
1	+ @layer fds{.c1udubt6{height:3rem;}}

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

@@ -1,44 +1,60 @@
 import type { RefObject } from "react";
 import type { CommonCalendarProps, YearMonthDisplay } from "../shared/internal-calendar/types";
+/** Props for the `DateInput` component. */
 export interface DateInputProps extends CommonCalendarProps {
     className?: string | undefined;
     id?: string | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default `document.body`
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     "data-testid"?: string | undefined;
     readOnly?: boolean | undefined;
+    /**
+     * When `true`, suppresses the native on-screen keyboard on mobile devices
+     * while still allowing the calendar picker to open.
+     */
     hideInputKeyboard?: boolean | undefined;
     /**
-     * The value of the date input in "YYYY-MM-DD" or "YYYY-M-D" string format.
+     * The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.
+     *
+     * @remarks Passing `undefined` or an invalid string clears the selection.
      */
     value?: string | undefined;
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     disabled?: boolean | undefined;
     /**
-     * Specifies if the "Done" and "Cancel" action buttons should be rendered.
-     * Is restricted to `true` on mobile viewports
+     * Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown.
+     * When `false`, a selection immediately commits and closes the calendar.
+     *
+     * @default true
      */
     withButton?: boolean | undefined;
-    /** The z-index of the calendar dropdown */
+    /** The z-index of the calendar dropdown. */
     zIndex?: number | undefined;
     /**
-     * Function that returns when a valid selection is made. Returns the start
-     * date in "YYYY-MM-DD" string format.
+     * Called when the user commits a date selection. Receives the selected date
+     * as a `"YYYY-MM-DD"` string, or an empty string when the selection is cleared.
+     *
+     * @remarks When `withButton` is `true`, this fires only after the user
+     * confirms via the "Done" button. When `withButton` is `false`, it fires
+     * immediately on each selection.
      */
     onChange?: ((value: string) => void) | undefined;
-    /**
-     * Called when the field is focused
-     */
+    /** Called when the input receives focus. */
     onFocus?: (() => void) | undefined;
-    /**
-     * Called when a defocus is made on the field
-     */
+    /** Called when focus leaves both the input and the calendar dropdown. */
     onBlur?: (() => void) | undefined;
-    /** Called when there is a change in the current visible month and year */
+    /** Called when the visible month or year in the calendar changes. */
     onYearMonthDisplayChange?: ((value: YearMonthDisplay) => void) | undefined;
 }

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

@@ -1,2 +1,8 @@
 import type { DateNavigatorProps } from "./types";
+/**
+ * Displays a date with left/right navigation arrows for stepping through dates or weeks.
+ *
+ * Use when users need to browse content organised by day or week — such as schedules,
+ * calendars, or time-based feeds.
+ */
 export declare const DateNavigator: ({ selectedDate, minDate, maxDate, loading, showDateAsShortForm, showCurrentDateAsToday, view, onLeftArrowClick, onRightArrowClick, onCalendarDateSelect, dropdownRootNode, className, ...otherProps }: DateNavigatorProps) => import("react/jsx-runtime").JSX.Element;

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\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":"+/BAeO,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/*\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"}

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

@@ -1,2 +1,2 @@
-import"./date-navigator.styles_1cotsgz.css";const t="c1mdg68z",a="h1w7ufcd",g="h7gg62z",o="d1pl361j";export{t as container,o as dateTextButton,a as headerArrowButton,g as headerArrowButtonIcon};
+import"./date-navigator.styles_wokh56.css";const t="c1mdg68z",a="h1w7ufcd",o="h7gg62z",d="d1pl361j";export{t as container,d as dateTextButton,a as headerArrowButton,o as headerArrowButtonIcon};
 //# sourceMappingURL=date-navigator.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"date-navigator.styles.js","sources":["../../src/date-navigator/date-navigator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const container = css`\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n background-color: ${Colour[\"bg-strong\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const headerArrowButton = css`\n margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const headerArrowButtonIcon = css`\n color: ${Colour[\"icon\"]};\n`;\n\nexport const dateTextButton = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"text\"]};\n cursor: default;\n\n &:not(:disabled) {\n color: ${Colour[\"text-primary\"]};\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus {\n outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-underline-position: under;\n }\n`;\n"],"names":["container","headerArrowButton","headerArrowButtonIcon","dateTextButton"],"mappings":"~~0EAIO~~,MAAMA,EAAS,WASTC,EAAiB,WAIjBC,EAAqB,UAIrBC,EAAc"}
1	+ {"version":3,"file":"date-navigator.styles.js","sources":["../../src/date-navigator/date-navigator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const container = css`\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n background-color: ${Colour[\"bg-strong\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const headerArrowButton = css`\n margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const headerArrowButtonIcon = css`\n color: ${Colour[\"icon\"]};\n`;\n\nexport const dateTextButton = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"text\"]};\n cursor: default;\n\n &:not(:disabled) {\n color: ${Colour[\"text-primary\"]};\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus {\n outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-underline-position: under;\n }\n`;\n"],"names":["container","headerArrowButton","headerArrowButtonIcon","dateTextButton"],"mappings":"yEAIO,MAAMA,EAAS,WASTC,EAAiB,WAIjBC,EAAqB,UAIrBC,EAAc"}

package/date-navigator/date-navigator.styles_wokh56.css ADDED Viewed

@@ -0,0 +1,4 @@
+@layer fds{.c1mdg68z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;background-color:var(--fds-colour-bg-strong);border-radius:var(--fds-radius-sm);}
+.h1w7ufcd{margin:var(--fds-spacing-8);}
+.h7gg62z{color:var(--fds-colour-icon);}
+.d1pl361j{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);cursor:default;}.d1pl361j:not(:disabled){color:var(--fds-colour-text-primary);}.d1pl361j:not(:disabled):hover,.d1pl361j:not(:disabled):focus{outline:none;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;text-underline-position:under;}}