npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.1 → 4.0.0-alpha.2 - Mend

@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

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 (2348) hide show

package/cjs/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 { 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 { Typography } from \"../typography\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport {\n ActionBar,\n ActionBarWrapper,\n BodyCell,\n BodyCellContent,\n BodyRow,\n CheckBoxWrapper,\n EmptyViewCell,\n ErrorDisplayTitle,\n HeaderCell,\n HeaderCellWrapper,\n HeaderRow,\n LoaderWrapper,\n Table,\n TableBody,\n TableContainer,\n TableWrapper,\n TextButton,\n} 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 [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [tableEnd, setTableEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\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 if (wrapperRef.current) {\n setTableEnd(\n wrapperRef.current.getBoundingClientRect().bottom <=\n window.innerHeight\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 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 // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead ref={headerRef}>\n <HeaderRow>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </HeaderRow>\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 return (\n <HeaderCell\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n $clickable={clickable}\n onClick={() => clickable && onHeaderClick?.(fieldKey)}\n style={style}\n $isCheckbox={false}\n >\n <HeaderCellWrapper>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </HeaderCellWrapper>\n </HeaderCell>\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 data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <HeaderCell\n data-testid={getDataTestId(\"header-selection\")}\n $clickable={false}\n $isCheckbox={true}\n >\n <CheckBoxWrapper>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </CheckBoxWrapper>\n </HeaderCell>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr>\n <EmptyViewCell colSpan={getTotalColumns()}>\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </EmptyViewCell>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <BodyRow\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n $alternating={isAlternatingRow(index)}\n $isSelectable={enableMultiSelect}\n $isSelected={isRowSelected(row.id.toString())}\n >\n {enableMultiSelect &&\n renderRowCheckBox(row.id.toString())}\n\n {headers.map((header) => renderRowCell(header, row))}\n </BodyRow>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header !== \"string\" ? header.style : undefined;\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 return (\n <BodyCell\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n style={style}\n $isCheckbox={false}\n >\n {typeof cellData === \"string\" \|\|\n typeof cellData === \"number\" ? (\n <BodyCellContent>{cellData}</BodyCellContent>\n ) : typeof cellData === \"function\" ? (\n cellData(row, { isSelected: isRowSelected(rowId) })\n ) : (\n cellData\n )}\n </BodyCell>\n );\n };\n\n const renderRowCheckBox = (rowId: string) => {\n return (\n <BodyCell\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n $isCheckbox={true}\n >\n <CheckBoxWrapper>\n <Checkbox\n checked={isRowSelected(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n />\n </CheckBoxWrapper>\n </BodyCell>\n );\n };\n\n const renderBasicEmptyView = () => {\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={\n emptyView?.title ? (\n typeof emptyView.title === \"string\" ? (\n <ErrorDisplayTitle weight=\"bold\">\n {emptyView.title}\n </ErrorDisplayTitle>\n ) : (\n emptyView.title\n )\n ) : (\n <ErrorDisplayTitle weight=\"bold\">\n {\"No <items> found\"}\n </ErrorDisplayTitle>\n )\n }\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 <LoaderWrapper>\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </LoaderWrapper>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n\n return (\n <ActionBarWrapper\n ref={actionBarRef}\n $fixed={isFloatingActionBar}\n $left={tableRef?.current?.getBoundingClientRect()?.left}\n $width={tableRef?.current?.clientWidth}\n >\n <ActionBar\n $float={\n (scrollable ? !scrollEnd : !end) \|\| isFloatingActionBar\n }\n $scrollable={scrollable}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <TextButton type=\"button\" onClick={onClearSelectionClick}>\n Clear selection\n </TextButton>\n {actionBarContent}\n </ActionBar>\n </ActionBarWrapper>\n );\n };\n\n return (\n <TableWrapper\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={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 <TableContainer>\n <Table\n $end={tableEnd}\n $scrollable={scrollable}\n ref={tableRef}\n $stickyHeader={enableStickyHeader}\n >\n {renderHeaders()}\n <TableBody $showLastRowBottomBorder={showLastBorder}>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </TableBody>\n </Table>\n </TableContainer>\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 </TableWrapper>\n );\n};\n"],"names":["_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","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","tableEnd","setTableEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","onResize","useCallback","current","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","getBoundingClientRect","bottom","window","innerHeight","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","wrapperBounds","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","header","fieldKey","label","clickable","undefined","_jsx","HeaderCell","$clickable","onClick","$isCheckbox","children","_jsxs","HeaderCellWrapper","Typography","BodyBL","weight","renderSortedArrow","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","disabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","onScroll","scrollTop","tabIndex","TableContainer","Table","$end","$stickyHeader","HeaderRow","map","TableBody","$showLastRowBottomBorder","EmptyViewCell","colSpan","_Fragment","BodyRow","$alternating","$isSelectable","$isSelected","LoaderWrapper","LoadingDotsSpinner","count","ActionBarWrapper","$left","_b","_c","left","$width","_d","clientWidth","ActionBar","$float","$scrollable","BodyMD","TextButton","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 { 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 { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport {\n ActionBar,\n ActionBarWrapper,\n BodyCell,\n BodyCellContent,\n BodyRow,\n CheckBoxWrapper,\n EmptyViewCell,\n ErrorDisplayTitle,\n HeaderCell,\n HeaderCellWrapper,\n HeaderRow,\n LoaderWrapper,\n Table,\n TableBody,\n TableContainer,\n TableWrapper,\n TextButton,\n} 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 [tableEnd, setTableEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\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 if (wrapperRef.current) {\n setTableEnd(\n wrapperRef.current.getBoundingClientRect().bottom <=\n window.innerHeight\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 getHeaderWrapperId = (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 // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead ref={headerRef}>\n <HeaderRow>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </HeaderRow>\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 headerCellWrapperId = getHeaderWrapperId(fieldKey);\n\n return (\n <HeaderCell\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n $clickable={clickable}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n $isCheckbox={false}\n >\n <HeaderCellWrapper id={headerCellWrapperId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </HeaderCellWrapper>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button onClick={() => onHeaderClick?.(fieldKey)}>\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellWrapperId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </HeaderCell>\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 <HeaderCell\n data-testid={getDataTestId(\"header-selection\")}\n $clickable={false}\n $isCheckbox={true}\n scope=\"col\"\n >\n <CheckBoxWrapper>\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 </CheckBoxWrapper>\n </HeaderCell>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr>\n <EmptyViewCell colSpan={getTotalColumns()}>\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </EmptyViewCell>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <BodyRow\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n $alternating={isAlternatingRow(index)}\n $isSelectable={enableMultiSelect}\n $isSelected={isRowSelected(row.id.toString())}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </BodyRow>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header !== \"string\" ? header.style : undefined;\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 return (\n <BodyCell\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n style={style}\n $isCheckbox={false}\n >\n {typeof cellData === \"string\" \|\|\n typeof cellData === \"number\" ? (\n <BodyCellContent>{cellData}</BodyCellContent>\n ) : typeof cellData === \"function\" ? (\n cellData(row, { isSelected: isRowSelected(rowId) })\n ) : (\n cellData\n )}\n </BodyCell>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <BodyCell\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n $isCheckbox={true}\n >\n <CheckBoxWrapper>\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 </CheckBoxWrapper>\n </BodyCell>\n );\n };\n\n const renderBasicEmptyView = () => {\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={\n emptyView?.title ? (\n typeof emptyView.title === \"string\" ? (\n <ErrorDisplayTitle weight=\"bold\">\n {emptyView.title}\n </ErrorDisplayTitle>\n ) : (\n emptyView.title\n )\n ) : (\n <ErrorDisplayTitle weight=\"bold\">\n {\"No <items> found\"}\n </ErrorDisplayTitle>\n )\n }\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 <LoaderWrapper\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </LoaderWrapper>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n\n return (\n <ActionBarWrapper\n ref={actionBarRef}\n $fixed={isFloatingActionBar}\n $left={tableRef?.current?.getBoundingClientRect()?.left}\n $width={tableRef?.current?.clientWidth}\n >\n <ActionBar\n $float={\n (scrollable ? !scrollEnd : !end) \|\| isFloatingActionBar\n }\n $scrollable={scrollable}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <TextButton\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </TextButton>\n {actionBarContent}\n </ActionBar>\n </ActionBarWrapper>\n );\n };\n\n return (\n <TableWrapper\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={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 <TableContainer>\n <Table\n $end={tableEnd}\n $scrollable={scrollable}\n ref={tableRef}\n $stickyHeader={enableStickyHeader}\n >\n {renderHeaders()}\n <TableBody $showLastRowBottomBorder={showLastBorder}>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </TableBody>\n </Table>\n </TableContainer>\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 </TableWrapper>\n );\n};\n"],"names":["_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","tableEnd","setTableEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","onResize","useCallback","current","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","getBoundingClientRect","bottom","window","innerHeight","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","undefined","isSortable","headerCellWrapperId","getHeaderWrapperId","_jsxs","HeaderCell","$clickable","scope","$isCheckbox","HeaderCellWrapper","children","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","onClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","CheckBoxWrapper","Checkbox","checked","indeterminate","renderRowCell","row","toString","cellData","cellId","BodyCell","BodyCellContent","isSelected","renderRowCheckBox","disabled","focusableWhenDisabled","renderBasicEmptyView","ErrorDisplay","Object","assign","type","title","ErrorDisplayTitle","description","TableWrapper","onScroll","scrollTop","tabIndex","TableContainer","Table","$end","$stickyHeader","HeaderRow","TableBody","$showLastRowBottomBorder","EmptyViewCell","colSpan","BodyRow","$alternating","$isSelectable","$isSelected","LoaderWrapper","role","LoadingDotsSpinner","count","ActionBarWrapper","$fixed","$left","_c","_b","left","$width","_d","clientWidth","ActionBar","$float","$scrollable","BodyMD","TextButton","renderSelectionBar","r"],"mappings":"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"}

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

@@ -52,7 +52,7 @@
                 position: sticky;
                 left: 0;
             `}};
-`,m=l.default(r.BasicButton)`
+`,f=l.default(r.BasicButton)`
     ${d.V3_Font["body-md-semibold"]}
     cursor: pointer;
     color: ${d.V3_Colour["text-primary"]};
@@ -63,7 +63,7 @@
     &:hover {
         color: ${d.V3_Colour["text-hover"]};
     }
-`,f=l.default.div`
+`,m=l.default.div`
     overflow: hidden;
     display: flex;
     align-items: center;
@@ -83,12 +83,12 @@
                 border-radius: ${d.V3_Radius.none} ${d.V3_Radius.none}
                     ${d.V3_Radius.sm} ${d.V3_Radius.sm};
             `}
-`,b=l.default.tr`
+`,g=l.default.tr`
     background-color: ${d.V3_Colour["bg-stronger"]};
     height: 6rem;
     border-bottom: ${d.V3_Border["width-010"]} ${d.V3_Border.solid}
         ${s};
-`,g=l.default.th`
+`,b=l.default.th`
     padding: ${e=>e.$isCheckbox?"1.25rem 0.5rem 1.25rem 1.5rem":"1.25rem 1rem"};
     text-align: left;
     cursor: ${e=>e.$clickable?"pointer":"default"};
@@ -99,6 +99,10 @@
     ${r=>{if(r.$isCheckbox)return e.css`
                 width: 4rem;
             `}};
+    &:focus-within {
+        outline: 2px solid ${d.V3_Colour["focus-ring"]};
+        outline-offset: -3px;
+    }
 `,x=l.default.div`
     display: flex;
     flex-direction: row;
@@ -145,5 +149,5 @@
     margin-bottom: 1rem;
 `,C=l.default.td`
     padding: 4rem 0;
-`;exports.ActionBar=f,exports.ActionBarWrapper=u,exports.BodyCell=V,exports.BodyCellContent=_,exports.BodyRow=h,exports.CheckBoxWrapper=w,exports.EmptyViewCell=C,exports.ErrorDisplayTitle=B,exports.HeaderCell=g,exports.HeaderCellWrapper=x,exports.HeaderRow=b,exports.LoaderWrapper=y,exports.Table=c,exports.TableBody=$,exports.TableContainer=p,exports.TableWrapper=n,exports.TextButton=m;
+`;exports.ActionBar=m,exports.ActionBarWrapper=u,exports.BodyCell=V,exports.BodyCellContent=_,exports.BodyRow=h,exports.CheckBoxWrapper=w,exports.EmptyViewCell=C,exports.ErrorDisplayTitle=B,exports.HeaderCell=b,exports.HeaderCellWrapper=x,exports.HeaderRow=g,exports.LoaderWrapper=y,exports.Table=c,exports.TableBody=$,exports.TableContainer=p,exports.TableWrapper=n,exports.TextButton=f;
 //# sourceMappingURL=data-table.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table.styles.js","sources":["../../../src/data-table/data-table.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Typography } from \"../typography\";\nimport {\n V3_Border,\n V3_Colour,\n V3_Font,\n V3_Motion,\n V3_Radius,\n V3_Shadow,\n V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface TableProps {\n $end: boolean;\n $scrollable: boolean;\n $stickyHeader: boolean \| undefined;\n}\ninterface TableBodyProps {\n $showLastRowBottomBorder: boolean;\n}\ninterface HeaderCellProps {\n $clickable: boolean;\n $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n $alternating: boolean;\n $isSelected?: boolean;\n $isSelectable?: boolean;\n}\n\ninterface BodyCellProps {\n $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n $fixed: boolean;\n $left?: number \| undefined;\n $width?: number \| undefined;\n}\n\ninterface ActionBarProps {\n $float: boolean;\n $scrollable: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = V3_Colour[\"border\"];\nconst fontColor = V3_Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n overflow: auto;\n display: flex;\n flex-direction: column;\n border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n border-radius: ${V3_Radius[\"md\"]};\n\n // Hide scrollbar\n &::-webkit-scrollbar {\n display: none;\n }\n * {\n -ms-overflow-style: none; /* IE and Edge /\n scrollbar-width: none; / Firefox */\n }\n`;\n\nexport const TableContainer = styled.div`\n flex: 1;\n`;\n\nexport const Table = styled.table<TableProps>`\n th:last-child,\n td:last-child {\n padding-right: 1.5rem;\n }\n th:first-child,\n td:first-child {\n padding-left: 1.5rem;\n }\n text-align: left;\n border-collapse: separate;\n border-spacing: 0;\n width: 100%;\n\n ${(props) => {\n if (props.$stickyHeader) {\n return css`\n thead {\n position: sticky;\n top: 0;\n z-index: 20;\n }\n `;\n }\n }};\n`;\n\nexport const TableBody = styled.tbody<TableBodyProps>`\n tr:last-child {\n td {\n border-bottom: ${(props) =>\n props.$showLastRowBottomBorder\n ? `${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor}`\n : \"none\"};\n }\n }\n`;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n bottom: 0;\n ${(props) => {\n if (props.$fixed) {\n const left = props.$left ? `${props.$left}px` : \"0\";\n const width = props.$width ? `${props.$width}px` : \"100%\";\n return css`\n position: fixed;\n left: ${left};\n width: ${width};\n `;\n } else {\n return css`\n position: sticky;\n left: 0;\n `;\n }\n }};\n`;\n\nexport const TextButton = styled(BasicButton)`\n ${V3_Font[\"body-md-semibold\"]}\n cursor: pointer;\n color: ${V3_Colour[\"text-primary\"]};\n transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n padding: 0.75rem;\n margin: -0.75rem 0;\n\n &:hover {\n color: ${V3_Colour[\"text-hover\"]};\n }\n`;\n\nexport const ActionBar = styled.div<ActionBarProps>`\n overflow: hidden;\n display: flex;\n align-items: center;\n height: 3.5rem;\n padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-24\"]};\n border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n background-color: ${V3_Colour[\"bg-selected\"]};\n transition: all 300ms ease;\n ${(props) => {\n if (props.$float) {\n return css`\n transform: translateX(0.5rem) translateY(-2rem);\n border-radius: ${V3_Radius[\"sm\"]};\n box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n width: calc(100% - ${V3_Spacing[\"spacing-16\"]});\n border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${borderColor};\n `;\n } else {\n return css`\n border-radius: ${V3_Radius[\"none\"]} ${V3_Radius[\"none\"]}\n ${V3_Radius[\"sm\"]} ${V3_Radius[\"sm\"]};\n `;\n }\n }}\n`;\n\nexport const HeaderRow = styled.tr`\n background-color: ${V3_Colour[\"bg-stronger\"]};\n height: 6rem;\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${borderColor};\n`;\n\nexport const HeaderCell = styled.th<HeaderCellProps>`\n padding: ${(props) =>\n props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n text-align: left;\n cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n vertical-align: middle;\n color: ${fontColor};\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${borderColor};\n ${(props) => {\n if (props.$isCheckbox) {\n return css`\n width: 4rem;\n `;\n }\n }};\n`;\n\nexport const HeaderCellWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ${fontColor};\n margin-left: 0.5rem;\n }\n`;\n\nexport const BodyRow = styled.tr<BodyRowProps>`\n background-color: ${(props) => {\n if (props.$isSelected) {\n return css`\n ${V3_Colour[\"bg-selected\"]};\n `;\n } else if (props.$alternating) {\n return css`\n ${V3_Colour[\"bg-strong\"]};\n `;\n } else {\n return css`\n ${V3_Colour[\"bg\"]};\n `;\n }\n }};\n border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n &:hover {\n ${(props) => {\n if (props.$isSelectable) {\n return css`\n background-color: ${V3_Colour[\"bg-hover-strong\"]};\n `;\n }\n }};\n }\n`;\n\nexport const BodyCell = styled.td<BodyCellProps>`\n padding: ${(props) =>\n props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n vertical-align: middle;\n color: ${fontColor};\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${borderColor};\n`;\n\nexport const BodyCellContent = styled(Typography.BodyBL)`\n ${lineClampCss(2)}\n text-overflow: ellipsis;\n`;\n\nexport const CheckBoxWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const LoaderWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 4rem 0;\n`;\n\nexport const ErrorDisplayTitle = styled(Typography.HeadingSM)`\n margin-top: 2rem;\n margin-bottom: 1rem;\n`;\n\nexport const EmptyViewCell = styled.td`\n padding: 4rem 0;\n`;\n"],"names":["borderColor","V3_Colour","fontColor","TableWrapper","styled","div","V3_Border","V3_Radius","TableContainer","Table","table","props","$stickyHeader","css","TableBody","tbody","$showLastRowBottomBorder","ActionBarWrapper","$fixed","left","$left","width","$width","TextButton","BasicButton","V3_Font","V3_Motion","ActionBar","V3_Spacing","$float","V3_Shadow","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","BodyCell","td","BodyCellContent","Typography","BodyBL","lineClampCss","CheckBoxWrapper","LoaderWrapper","ErrorDisplayTitle","HeadingSM","EmptyViewCell"],"mappings":"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"}
1	+ {"version":3,"file":"data-table.styles.js","sources":["../../../src/data-table/data-table.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Typography } from \"../typography\";\nimport {\n V3_Border,\n V3_Colour,\n V3_Font,\n V3_Motion,\n V3_Radius,\n V3_Shadow,\n V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface TableProps {\n $end: boolean;\n $scrollable: boolean;\n $stickyHeader: boolean \| undefined;\n}\ninterface TableBodyProps {\n $showLastRowBottomBorder: boolean;\n}\ninterface HeaderCellProps {\n $clickable: boolean;\n $isCheckbox: boolean;\n}\ninterface BodyRowProps {\n $alternating: boolean;\n $isSelected?: boolean;\n $isSelectable?: boolean;\n}\n\ninterface BodyCellProps {\n $isCheckbox: boolean;\n}\n\ninterface ActionBarWrapperProps {\n $fixed: boolean;\n $left?: number \| undefined;\n $width?: number \| undefined;\n}\n\ninterface ActionBarProps {\n $float: boolean;\n $scrollable: boolean;\n}\n\n// =============================================================================\n// STYLES CONSTANTS\n// =============================================================================\nconst borderColor = V3_Colour[\"border\"];\nconst fontColor = V3_Colour[\"text\"];\n\n// =============================================================================\n// STYLES\n// =============================================================================\nexport const TableWrapper = styled.div`\n overflow: auto;\n display: flex;\n flex-direction: column;\n border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n border-radius: ${V3_Radius[\"md\"]};\n\n // Hide scrollbar\n &::-webkit-scrollbar {\n display: none;\n }\n * {\n -ms-overflow-style: none; /* IE and Edge /\n scrollbar-width: none; / Firefox */\n }\n`;\n\nexport const TableContainer = styled.div`\n flex: 1;\n`;\n\nexport const Table = styled.table<TableProps>`\n th:last-child,\n td:last-child {\n padding-right: 1.5rem;\n }\n th:first-child,\n td:first-child {\n padding-left: 1.5rem;\n }\n text-align: left;\n border-collapse: separate;\n border-spacing: 0;\n width: 100%;\n\n ${(props) => {\n if (props.$stickyHeader) {\n return css`\n thead {\n position: sticky;\n top: 0;\n z-index: 20;\n }\n `;\n }\n }};\n`;\n\nexport const TableBody = styled.tbody<TableBodyProps>`\n tr:last-child {\n td {\n border-bottom: ${(props) =>\n props.$showLastRowBottomBorder\n ? `${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor}`\n : \"none\"};\n }\n }\n`;\n\nexport const ActionBarWrapper = styled.div<ActionBarWrapperProps>`\n bottom: 0;\n ${(props) => {\n if (props.$fixed) {\n const left = props.$left ? `${props.$left}px` : \"0\";\n const width = props.$width ? `${props.$width}px` : \"100%\";\n return css`\n position: fixed;\n left: ${left};\n width: ${width};\n `;\n } else {\n return css`\n position: sticky;\n left: 0;\n `;\n }\n }};\n`;\n\nexport const TextButton = styled(BasicButton)`\n ${V3_Font[\"body-md-semibold\"]}\n cursor: pointer;\n color: ${V3_Colour[\"text-primary\"]};\n transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n padding: 0.75rem;\n margin: -0.75rem 0;\n\n &:hover {\n color: ${V3_Colour[\"text-hover\"]};\n }\n`;\n\nexport const ActionBar = styled.div<ActionBarProps>`\n overflow: hidden;\n display: flex;\n align-items: center;\n height: 3.5rem;\n padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-24\"]};\n border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n background-color: ${V3_Colour[\"bg-selected\"]};\n transition: all 300ms ease;\n ${(props) => {\n if (props.$float) {\n return css`\n transform: translateX(0.5rem) translateY(-2rem);\n border-radius: ${V3_Radius[\"sm\"]};\n box-shadow: ${V3_Shadow[\"xs-subtle\"]};\n width: calc(100% - ${V3_Spacing[\"spacing-16\"]});\n border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${borderColor};\n `;\n } else {\n return css`\n border-radius: ${V3_Radius[\"none\"]} ${V3_Radius[\"none\"]}\n ${V3_Radius[\"sm\"]} ${V3_Radius[\"sm\"]};\n `;\n }\n }}\n`;\n\nexport const HeaderRow = styled.tr`\n background-color: ${V3_Colour[\"bg-stronger\"]};\n height: 6rem;\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${borderColor};\n`;\n\nexport const HeaderCell = styled.th<HeaderCellProps>`\n padding: ${(props) =>\n props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n text-align: left;\n cursor: ${(props) => (props.$clickable ? \"pointer\" : \"default\")};\n vertical-align: middle;\n color: ${fontColor};\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${borderColor};\n ${(props) => {\n if (props.$isCheckbox) {\n return css`\n width: 4rem;\n `;\n }\n }};\n &:focus-within {\n outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n outline-offset: -3px;\n }\n`;\n\nexport const HeaderCellWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n\n svg {\n color: ${fontColor};\n margin-left: 0.5rem;\n }\n`;\n\nexport const BodyRow = styled.tr<BodyRowProps>`\n background-color: ${(props) => {\n if (props.$isSelected) {\n return css`\n ${V3_Colour[\"bg-selected\"]};\n `;\n } else if (props.$alternating) {\n return css`\n ${V3_Colour[\"bg-strong\"]};\n `;\n } else {\n return css`\n ${V3_Colour[\"bg\"]};\n `;\n }\n }};\n border-top: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]} ${borderColor};\n &:hover {\n ${(props) => {\n if (props.$isSelectable) {\n return css`\n background-color: ${V3_Colour[\"bg-hover-strong\"]};\n `;\n }\n }};\n }\n`;\n\nexport const BodyCell = styled.td<BodyCellProps>`\n padding: ${(props) =>\n props.$isCheckbox ? \"1.25rem 0.5rem 1.25rem 1.5rem\" : \"1.25rem 1rem\"};\n vertical-align: middle;\n color: ${fontColor};\n border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n ${borderColor};\n`;\n\nexport const BodyCellContent = styled(Typography.BodyBL)`\n ${lineClampCss(2)}\n text-overflow: ellipsis;\n`;\n\nexport const CheckBoxWrapper = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n`;\n\nexport const LoaderWrapper = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: 4rem 0;\n`;\n\nexport const ErrorDisplayTitle = styled(Typography.HeadingSM)`\n margin-top: 2rem;\n margin-bottom: 1rem;\n`;\n\nexport const EmptyViewCell = styled.td`\n padding: 4rem 0;\n`;\n"],"names":["borderColor","V3_Colour","fontColor","TableWrapper","styled","div","V3_Border","V3_Radius","TableContainer","Table","table","props","$stickyHeader","css","TableBody","tbody","$showLastRowBottomBorder","ActionBarWrapper","$fixed","left","$left","width","$width","TextButton","BasicButton","V3_Font","V3_Motion","ActionBar","V3_Spacing","$float","V3_Shadow","HeaderRow","tr","HeaderCell","th","$isCheckbox","$clickable","HeaderCellWrapper","BodyRow","$isSelected","$alternating","$isSelectable","BodyCell","td","BodyCellContent","Typography","BodyBL","lineClampCss","CheckBoxWrapper","LoaderWrapper","ErrorDisplayTitle","HeadingSM","EmptyViewCell"],"mappings":"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"}

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

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

package/cjs/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 dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-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 { Container } from \"./date-input.style\";\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 ...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 <Container\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 {...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 </Container>\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":["_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","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","Container","Object","assign","role","tabIndex","ref","$disabled","$focused","$error","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 dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-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 { Container } from \"./date-input.style\";\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 ...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 <Container\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 {...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 </Container>\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":["_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","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","Container","Object","assign","role","tabIndex","ref","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"date-input.style.js","sources":["../../../src/date-input/date-input.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { InputWrapper } from \"../shared/input-wrapper~~/input-wrapper~~\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled(InputWrapper)`\n height: 3rem;\n`;\n"],"names":["Container","styled","InputWrapper"],"mappings":"oLAQaA,OAAYC,QAAOC,EAAAA,aAAa;;"}
1	+ {"version":3,"file":"date-input.style.js","sources":["../../../src/date-input/date-input.style.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { InputWrapper } from \"../shared/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled(InputWrapper)`\n height: 3rem;\n`;\n"],"names":["Container","styled","InputWrapper"],"mappings":"oLAQaA,OAAYC,QAAOC,EAAAA,aAAa;;"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("../external/dayjs/dayjs.min.js"),t=require("react");require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js");var i=require("../shared/dropdown-wrapper/element-with-dropdown.js"),n=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var l=require("../shared/internal-calendar/calendar-manager.style.js"),d=require("../util/calendar-helper.js"),o=require("../util/date-helper.js");require("../util/string-helper.js");var s=require("./date-navigator.style.js");exports.DateNavigator=D=>{var{selectedDate:p,minDate:w,maxDate:u,loading:c,showDateAsShortForm:h,showCurrentDateAsToday:y,view:j="day",onLeftArrowClick:m,onRightArrowClick:g,onCalendarDateSelect:v,dropdownRootNode:f}=D,x=e.__rest(D,["selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode"]);const C=o.DateHelper.toDayjs(p),[k,b]=t.useState(!1),q=e=>{null==v||v(e),b(!k)},M=()=>{b(!1),m(p)},A=()=>{b(!1),g(p)},Y=()=>{if("week"===j){const e=(e=>{const r=o.DateHelper.toDayjs(e),a=r.startOf("week"),t=r.endOf("week");return{startDisplay:a.format("D MMM"),endDisplay:t.format("D MMM"),year:t.format("YYYY")}})(p);return`${e.startDisplay} - ${e.endDisplay}, ${e.year}`}return`${o.DateHelper.toDayjs(p).format(h?"D MMM YYYY":"D MMMM YYYY").toString()}, ${o.DateHelper.isSame(p,a.default())&&y?"Today":C.format(h?"ddd":"dddd")}`};return r.jsx(i.ElementWithDropdown,{enabled:!c,isOpen:k,renderElement:()=>{const e="week"===j?{left:"Previous week",right:"Next week"}:{left:"Previous day",right:"Next day"};return r.jsxs(s.Container,Object.assign({},x,{children:[r.jsx(s.HeaderArrowButton,{"data-testid":"date-navigator-left-arrow-btn",disabled:c||!!w&&(d.CalendarHelper.isDisabledDay(C,void 0,w)||o.DateHelper.isSame(C,w)),"aria-label":e.left,onClick:M,styleType:"light",sizeType:"small",children:r.jsx(l.ArrowLeft,{})}),r.jsx(s.StyledDateTextButton,{onClick:()=>!!v&&!c&&b(!k),$enableDateClick:!!v&&!c,"data-testid":"date-navigator-date-text",styleType:"link",disabled:!v||c,children:Y()}),r.jsx(s.HeaderArrowButton,{"data-testid":"date-navigator-right-arrow-btn",disabled:c||!!u&&(d.CalendarHelper.isDisabledDay(C,void 0,void 0,u)||o.DateHelper.isSame(C,u)),"aria-label":e.right,onClick:A,styleType:"light",sizeType:"small",children:r.jsx(l.ArrowRight,{})})]}))},renderDropdown:({elementWidth:e})=>r.jsx(n.CalendarDropdown,{variant:"single",initialCalendarDate:p,value:p,minDate:w,maxDate:u,onSelect:q,width:e}),onDismiss:()=>b(!1),onClose:()=>b(!1),offset:8,rootNode:f})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/chevron-left"),t=require("@lifesg/react-icons/chevron-right"),i=require("clsx"),n=require("../external/dayjs/dayjs.min.js"),o=require("react"),s=require("../button/button.js"),l=require("../shared/dropdown-wrapper/element-with-dropdown.js"),d=require("../shared/input-wrapper/input-wrapper.js"),u=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var c=require("../util/calendar-helper.js"),D=require("../util/date-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var p=require("./date-navigator.styles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var w=h(i);exports.DateNavigator=i=>{var{selectedDate:h,minDate:m,maxDate:j,loading:y,showDateAsShortForm:f,showCurrentDateAsToday:v,view:g="day",onLeftArrowClick:x,onRightArrowClick:q,onCalendarDateSelect:C,dropdownRootNode:b,className:N}=i,k=e.__rest(i,["selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","className"]);const M=D.DateHelper.toDayjs(h),[A,Y]=o.useState(!1),S=e=>{null==C||C(e),Y(!A)},B=()=>{Y(!1),x(h)},H=()=>{Y(!1),q(h)},T=()=>{if("week"===g){const e=(e=>{const r=D.DateHelper.toDayjs(e),a=r.startOf("week"),t=r.endOf("week");return{startDisplay:a.format("D MMM"),endDisplay:t.format("D MMM"),year:t.format("YYYY")}})(h);return`${e.startDisplay} - ${e.endDisplay}, ${e.year}`}return`${D.DateHelper.toDayjs(h).format(f?"D MMM YYYY":"D MMMM YYYY").toString()}, ${D.DateHelper.isSame(h,n.default())&&v?"Today":M.format(f?"ddd":"dddd")}`};return r.jsx(l.ElementWithDropdown,{enabled:!y,isOpen:A,renderElement:()=>{const e="week"===g?{left:"Previous week",right:"Next week"}:{left:"Previous day",right:"Next day"};return r.jsxs("div",Object.assign({},k,{className:w.default(p.container,N),children:[r.jsx(s.Button,{className:p.headerArrowButton,"data-testid":"date-navigator-left-arrow-btn",disabled:y||!!m&&(c.CalendarHelper.isDisabledDay(M,void 0,m)||D.DateHelper.isSame(M,m)),"aria-label":e.left,onClick:B,styleType:"light",sizeType:"small",icon:r.jsx(a.ChevronLeftIcon,{className:p.headerArrowButtonIcon})}),r.jsx(d.BasicButton,{onClick:()=>Y(!A),className:p.dateTextButton,"data-testid":"date-navigator-date-text",disabled:!C||y,children:T()}),r.jsx(s.Button,{className:p.headerArrowButton,"data-testid":"date-navigator-right-arrow-btn",disabled:y||!!j&&(c.CalendarHelper.isDisabledDay(M,void 0,void 0,j)||D.DateHelper.isSame(M,j)),"aria-label":e.right,onClick:H,styleType:"light",sizeType:"small",icon:r.jsx(t.ChevronRightIcon,{className:p.headerArrowButtonIcon})})]}))},renderDropdown:({elementWidth:e})=>r.jsx(u.CalendarDropdown,{variant:"single",initialCalendarDate:h,value:h,minDate:m,maxDate:j,onSelect:S,width:e}),onDismiss:()=>Y(!1),onClose:()=>Y(!1),offset:8,rootNode:b})};
 //# sourceMappingURL=date-navigator.js.map

package/cjs/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 dayjs from \"dayjs\";\nimport { useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport {\n ArrowLeft,\n ArrowRight,\n} from \"../shared/internal-calendar/calendar-manager.style\";\nimport { CalendarHelper, DateHelper } from \"../util\";\nimport {\n Container,\n HeaderArrowButton,\n StyledDateTextButton,\n} from \"./date-navigator.style\";\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 ...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 <Container {...otherProps}>\n {\n <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 >\n <ArrowLeft />\n </HeaderArrowButton>\n }\n <StyledDateTextButton\n onClick={() =>\n !!onCalendarDateSelect &&\n !loading &&\n setIsCalendarOpen(!isCalendarOpen)\n }\n $enableDateClick={!!onCalendarDateSelect && !loading}\n data-testid=\"date-navigator-date-text\"\n styleType=\"link\"\n disabled={!onCalendarDateSelect \|\| loading}\n >\n {getDisplayText()}\n </StyledDateTextButton>\n {\n <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 >\n <ArrowRight />\n </HeaderArrowButton>\n }\n </Container>\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":["_a","selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","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","Container","Object","assign","children","HeaderArrowButton","disabled","CalendarHelper","isDisabledDay","undefined","onClick","styleType","sizeType","ArrowLeft","StyledDateTextButton","$enableDateClick","ArrowRight","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onSelect","width","onDismiss","onClose","offset","rootNode"],"mappings":"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"}
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":["_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":"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"}

package/cjs/date-navigator/date-navigator.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./date-navigator.styles_1cotsgz.css");exports.container="c1mdg68z",exports.dateTextButton="d1pl361j",exports.headerArrowButton="h1w7ufcd",exports.headerArrowButtonIcon="h7gg62z";
2	+ //# sourceMappingURL=date-navigator.styles.js.map

package/cjs/date-navigator/date-navigator.styles.js.map ADDED Viewed

@@ -0,0 +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":[],"mappings":"4GAIsB,kCAiBK,qCARG,yCAII"}

package/cjs/date-navigator/date-navigator.styles_1cotsgz.css ADDED Viewed

@@ -0,0 +1,4 @@
+.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);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;}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("../external/dayjs/dayjs.min.js"),n=require("react");require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js");var a=require("../shared/dropdown-wrapper/element-with-dropdown.js"),s=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var d=require("../shared/range-input-inner-container/range-input-inner-container.js"),i=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js");var l=require("../util/date-helper.js"),u=require("../util/date-input-helper.js");require("../util/string-helper.js");var o=require("../util/use-container-query.js"),c=require("../util/use-state-actions.js"),f=require("./date-range-input.style.js");const v={initialStart:"",initialEnd:"",selectedStart:"",selectedEnd:"",currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1,focused:!1};exports.DateRangeInput=D=>{var{minDate:p,maxDate:g,disabled:h,disabledDates:b,error:j,hideInputKeyboard:O,value:S,valueEnd:Y,onChange:y,onFocus:E,onBlur:m,onYearMonthDisplayChange:w,withButton:I=!0,variant:M="range",numberOfDays:x=7,readOnly:R,id:C,allowDisabledSelection:q,zIndex:F,dropdownRootNode:k}=D,B=e.__rest(D,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","valueEnd","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","variant","numberOfDays","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode"]);const[P,$]=n.useState(),[H,W]=n.useState(void 0),_="week"===M,K="fixed-range"===M,[z,A]=n.useState(!1),[L,N]=n.useState(!1),[{selectedStart:T,selectedEnd:V,currentFocus:Q,calendarOpen:Z,isStartDirty:G,isEndDirty:J,focused:U},X]=c.useStateActions({name:"date-range-input",initialState:v,reducers:{blur:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1,focused:!1}),dismiss:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1}),changeStart:(e,t)=>Object.assign(Object.assign({},e),{selectedStart:t,isStartDirty:!0}),changeEnd:(e,t)=>Object.assign(Object.assign({},e),{selectedEnd:t,isEndDirty:!0}),reselectStart:e=>Object.assign(Object.assign({},e),{selectedStart:"",currentFocus:"start"}),reselectEnd:e=>Object.assign(Object.assign({},e),{selectedEnd:"",currentFocus:"end"}),focus:(e,t)=>Object.assign(Object.assign({},e),{currentFocus:_?"none":K?"start":t,calendarOpen:!R,focused:!0}),cancel:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1}),done:(e,t)=>Object.assign(Object.assign({},e),{selectedStart:t.start,selectedEnd:t.end,initialStart:t.start,initialEnd:t.end,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1}),resetStart:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart}),resetEnd:e=>Object.assign(Object.assign({},e),{selectedEnd:e.initialEnd}),resetRange:(e,t)=>Object.assign(Object.assign({},e),{initialStart:t.start,selectedStart:t.start,initialEnd:t.end,selectedEnd:t.end})}}),ee=n.useRef(!1),te=n.useRef(null),re=n.useRef(null),ne=n.useRef(null),ae=n.useRef(null),se=o.useContainerQuery({maxWidth:f.MOBILE_WRAP_WIDTH,targetRef:te});n.useEffect((()=>{X.resetRange({start:u.DateInputHelper.sanitizeInput(S),end:u.DateInputHelper.sanitizeInput(Y)})}),[S,Y]),n.useEffect((()=>{"start"===Q?$(T):"end"===Q&&V&&$(V)}),[Q]);const de=e=>{var t,r,n;"Enter"!==e.code||I||(T&&V?(X.done({start:T,end:V}),null==y||y(T,V)):(X.dismiss(),null===(t=te.current)||void 0===t||t.focus(),null===(r=ne.current)||void 0===r||r.resetPlaceholder(),null===(n=ae.current)||void 0===n||n.resetPlaceholder()))},ie=e=>{var t;if(Se(e))return void(ee.current=!0);if(X.changeStart(e),e&&(null===(t=re.current)||void 0===t||t.setCalendarDate(e)),ee.current=!1,!e)return void(I||V||!J||(X.resetRange({start:"",end:""}),null==y||y("","")));if(!V)return void X.focus("end");if(r.default(e).isAfter(V,"day"))X.reselectEnd();else{if(J)return I?void 0:(X.done({start:e,end:V}),void(null==y||y(e,V)));X.focus("end")}},le=e=>{var t,n,a;if(Se(e))return void(ee.current=!0);if(r.default(e).isBefore(T,"day"))return X.changeStart(e),null===(t=re.current)||void 0===t||t.setCalendarDate(e),void X.reselectEnd();if(X.changeEnd(e),e&&(null===(n=re.current)||void 0===n||n.setCalendarDate(e)),e){if(T)return I?void 0:(null===(a=ae.current)||void 0===a||a.focusYearRef(),X.done({start:T,end:e}),void(null==y||y(T,e)));X.focus("start")}else I||T||!G||(X.resetRange({start:"",end:""}),null==y||y("",""))},ue=e=>{var t,n;if(Se(e))return void(ee.current=!0);if(X.changeStart(e),null===(t=re.current)||void 0===t||t.setCalendarDate(e),ee.current=!1,!e)return void(I?X.changeEnd(""):(X.resetRange({start:"",end:""}),null==y||y("","")));const a=r.default(e).format("YYYY-MM-DD"),s=r.default(a).add(x-1,"day").format("YYYY-MM-DD");return X.changeStart(a),X.changeEnd(s),ee.current=!1,I?void 0:(X.done({start:a,end:s}),null===(n=ne.current)||void 0===n||n.focusYearRef(),void(null==y||y(a,s)))},oe=()=>{(_||K)&&N(!0),_&&A(!0),R||h||U||(X.focus("start"),null==E||E())},ce=e=>{var t,r,n,a;const s=e.relatedTarget,d=re.current&&re.current.contains(s),i=te.current&&te.current.contains(s),l=(null===(t=null==s?void 0:s.matches)||void 0===t?void 0:t.call(s,"[data-floating-ui-focusable]"))||(null===(r=null==s?void 0:s.matches)||void 0===r?void 0:r.call(s,"[data-floating-ui-focus-guard]"));(U&&!Z&&!i&&!l||Z&&!i&&!d&&!l)&&(X.blur(),N(!1),A(!1),null===(n=ne.current)||void 0===n||n.resetPlaceholder(),null===(a=ae.current)||void 0===a||a.resetPlaceholder(),Oe())},fe=e=>t=>{t.stopPropagation(),R||(X.focus(e),ve(),De(),U||null==E||E())},ve=()=>{if(_){const e=l.DateHelper.toDayjs(T).startOf("week").format("YYYY-MM-DD");A(!0),N(!0),$(e)}},De=()=>{K&&(N(!0),$(T))},pe=e=>{var t;e&&!ee.current||(X.resetStart(),null===(t=ne.current)||void 0===t||t.resetInput())},ge=e=>{var t;e&&!ee.current||(X.resetEnd(),null===(t=ae.current)||void 0===t||t.resetInput())},he=e=>{switch(M){case"week":(e=>{var t;const n=r.default(e).startOf("week").format("YYYY-MM-DD"),a=r.default(e).endOf("week").format("YYYY-MM-DD");if(X.changeStart(n),X.changeEnd(a),ee.current=!1,!I)null===(t=ae.current)||void 0===t||t.focusYearRef(),X.done({start:n,end:a}),null==y||y(n,a)})(e);break;case"fixed-range":ue(e);break;default:"start"===Q?ie(e):"end"===Q&&le(e)}},be=e=>{var t,r,n;switch(null===(t=te.current)||void 0===t||t.focus(),e){case"reset":X.cancel();break;case"confirmed":if(X.done({start:T,end:V}),null==y||y(T,V),_)break;Ye(T,V)&&("range"===M?null===(r=ae.current)||void 0===r||r.focusYearRef():null===(n=ne.current)||void 0===n||n.focusYearRef())}},je=e=>{W(e)},Oe=()=>{m&&m()},Se=e=>!q&&e&&u.DateInputHelper.isDateDisabled(e,{disabledDates:b,minDate:p,maxDate:g}),Ye=(e,t)=>!(!e||!t)&&r.default(e).isBefore(t,"day"),ye=e=>{let t={start:void 0,end:void 0};switch(M){case"range":t={start:"start"===Q?H:void 0,end:"end"===Q?H:void 0};break;case"week":if(!H)return;t={start:r.default(H).startOf("week").format("YYYY-MM-DD"),end:r.default(H).endOf("week").format("YYYY-MM-DD")};break;case"fixed-range":if(!H)return;t={start:r.default(H).format("YYYY-MM-DD"),end:r.default(H).add(x-1,"day").format("YYYY-MM-DD")}}return t[e]};return t.jsx(a.ElementWithDropdown,{enabled:!R&&!h,isOpen:Z,onClose:()=>{var e,t;X.blur(),A(!1),N(!1),null===(e=ne.current)||void 0===e||e.resetPlaceholder(),null===(t=ae.current)||void 0===t||t.resetPlaceholder(),Oe()},onDismiss:()=>{var e,t,r;X.dismiss(),null===(e=te.current)||void 0===e||e.focus(),null===(t=ne.current)||void 0===t||t.resetPlaceholder(),null===(r=ae.current)||void 0===r||r.resetPlaceholder()},renderElement:()=>t.jsx(f.Container,Object.assign({role:"group",ref:te,tabIndex:0,onFocus:oe,onBlur:ce,$focused:U,$disabled:h,$readOnly:R,$error:j,$wrap:se,id:C,"data-testid":B["data-testid"],"aria-disabled":h,onKeyDown:de},B,{children:t.jsxs(d.RangeInputInnerContainer,{currentActive:Q,wrap:se,error:j,children:[t.jsx(f.InputContainer,{$wrap:se,children:t.jsx(i.StandaloneDateInput,{ref:ne,placeholder:"From",names:["start-day","start-month","start-year"],inputLabels:["Start Date","Start Month","Start Year"],value:T,disabled:h,readOnly:z||R,focused:"start"===Q,hoverValue:ye("start"),onChange:K?ue:ie,onFocus:fe("start"),onBlur:pe,hideInputKeyboard:O})}),t.jsx(f.InputContainer,{$wrap:se,children:t.jsx(i.StandaloneDateInput,{ref:ae,placeholder:"To",names:["end-day","end-month","end-year"],inputLabels:["End Date","End Month","End Year"],value:V,disabled:h,readOnly:L||R,focused:"end"===Q,hoverValue:ye("end"),onChange:le,onFocus:fe("end"),onBlur:ge,hideInputKeyboard:O})})]})})),renderDropdown:({elementWidth:e})=>t.jsx(s.CalendarDropdown,{ref:re,variant:M,initialCalendarDate:P,withButton:I,value:T,endValue:V,selectWithinRange:G||J,currentFocus:Q,disabledDates:b,minDate:p,maxDate:g,allowDisabledSelection:q,onSelect:he,onDismiss:be,onHover:je,onYearMonthDisplayChange:w,numberOfDays:x,width:e,isFocusable:!R&&!h}),customZIndex:F,offset:16,rootNode:k})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("../external/dayjs/dayjs.min.js"),n=require("react"),a=require("../shared/dropdown-wrapper/element-with-dropdown.js"),s=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var d=require("../shared/range-input-inner-container/range-input-inner-container.js"),i=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js");var l=require("../util/date-helper.js"),u=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js");var o=require("../util/use-container-query.js");require("@react-aria/live-announcer");var c=require("../util/use-state-actions.js"),f=require("./date-range-input.style.js");const v={initialStart:"",initialEnd:"",selectedStart:"",selectedEnd:"",currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1,focused:!1};exports.DateRangeInput=D=>{var{minDate:g,maxDate:h,disabled:p,disabledDates:b,error:j,hideInputKeyboard:O,value:S,valueEnd:Y,onChange:y,onFocus:E,onBlur:m,onYearMonthDisplayChange:w,withButton:I=!0,variant:M="range",numberOfDays:x=7,readOnly:R,id:q,allowDisabledSelection:C,zIndex:F,dropdownRootNode:k}=D,B=e.__rest(D,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","valueEnd","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","variant","numberOfDays","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode"]);const[P,H]=n.useState(),[W,_]=n.useState(void 0),K="week"===M,z="fixed-range"===M,[A,$]=n.useState(!1),[L,N]=n.useState(!1),[{selectedStart:T,selectedEnd:V,currentFocus:Q,calendarOpen:Z,isStartDirty:G,isEndDirty:J,focused:U},X]=c.useStateActions({name:"date-range-input",initialState:v,reducers:{blur:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1,focused:!1}),dismiss:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1}),changeStart:(e,t)=>Object.assign(Object.assign({},e),{selectedStart:t,isStartDirty:!0}),changeEnd:(e,t)=>Object.assign(Object.assign({},e),{selectedEnd:t,isEndDirty:!0}),reselectStart:e=>Object.assign(Object.assign({},e),{selectedStart:"",currentFocus:"start"}),reselectEnd:e=>Object.assign(Object.assign({},e),{selectedEnd:"",currentFocus:"end"}),focus:(e,t)=>Object.assign(Object.assign({},e),{currentFocus:K?"none":z?"start":t,calendarOpen:!R,focused:!0}),cancel:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart,selectedEnd:e.initialEnd,currentFocus:"none",calendarOpen:!1}),done:(e,t)=>Object.assign(Object.assign({},e),{selectedStart:t.start,selectedEnd:t.end,initialStart:t.start,initialEnd:t.end,currentFocus:"none",calendarOpen:!1,isStartDirty:!1,isEndDirty:!1}),resetStart:e=>Object.assign(Object.assign({},e),{selectedStart:e.initialStart}),resetEnd:e=>Object.assign(Object.assign({},e),{selectedEnd:e.initialEnd}),resetRange:(e,t)=>Object.assign(Object.assign({},e),{initialStart:t.start,selectedStart:t.start,initialEnd:t.end,selectedEnd:t.end})}}),ee=n.useRef(!1),te=n.useRef(null),re=n.useRef(null),ne=n.useRef(null),ae=n.useRef(null),se=o.useContainerQuery({maxWidth:f.MOBILE_WRAP_WIDTH,targetRef:te});n.useEffect((()=>{X.resetRange({start:u.DateInputHelper.sanitizeInput(S),end:u.DateInputHelper.sanitizeInput(Y)})}),[S,Y]),n.useEffect((()=>{"start"===Q?H(T):"end"===Q&&V&&H(V)}),[Q]);const de=e=>{var t,r,n;"Enter"!==e.code||I||(T&&V?(X.done({start:T,end:V}),null==y||y(T,V)):(X.dismiss(),null===(t=te.current)||void 0===t||t.focus(),null===(r=ne.current)||void 0===r||r.resetPlaceholder(),null===(n=ae.current)||void 0===n||n.resetPlaceholder()))},ie=e=>{var t;if(Se(e))return void(ee.current=!0);if(X.changeStart(e),e&&(null===(t=re.current)||void 0===t||t.setCalendarDate(e)),ee.current=!1,!e)return void(I||V||!J||(X.resetRange({start:"",end:""}),null==y||y("","")));if(!V)return void X.focus("end");if(r.default(e).isAfter(V,"day"))X.reselectEnd();else{if(J)return I?void 0:(X.done({start:e,end:V}),void(null==y||y(e,V)));X.focus("end")}},le=e=>{var t,n,a;if(Se(e))return void(ee.current=!0);if(r.default(e).isBefore(T,"day"))return X.changeStart(e),null===(t=re.current)||void 0===t||t.setCalendarDate(e),void X.reselectEnd();if(X.changeEnd(e),e&&(null===(n=re.current)||void 0===n||n.setCalendarDate(e)),e){if(T)return I?void 0:(null===(a=ae.current)||void 0===a||a.focusYearRef(),X.done({start:T,end:e}),void(null==y||y(T,e)));X.focus("start")}else I||T||!G||(X.resetRange({start:"",end:""}),null==y||y("",""))},ue=e=>{var t,n;if(Se(e))return void(ee.current=!0);if(X.changeStart(e),null===(t=re.current)||void 0===t||t.setCalendarDate(e),ee.current=!1,!e)return void(I?X.changeEnd(""):(X.resetRange({start:"",end:""}),null==y||y("","")));const a=r.default(e).format("YYYY-MM-DD"),s=r.default(a).add(x-1,"day").format("YYYY-MM-DD");return X.changeStart(a),X.changeEnd(s),ee.current=!1,I?void 0:(X.done({start:a,end:s}),null===(n=ne.current)||void 0===n||n.focusYearRef(),void(null==y||y(a,s)))},oe=()=>{(K||z)&&N(!0),K&&$(!0),R||p||U||(X.focus("start"),null==E||E())},ce=e=>{var t,r,n,a;const s=e.relatedTarget,d=re.current&&re.current.contains(s),i=te.current&&te.current.contains(s),l=(null===(t=null==s?void 0:s.matches)||void 0===t?void 0:t.call(s,"[data-floating-ui-focusable]"))||(null===(r=null==s?void 0:s.matches)||void 0===r?void 0:r.call(s,"[data-floating-ui-focus-guard]"));(U&&!Z&&!i&&!l||Z&&!i&&!d&&!l)&&(X.blur(),N(!1),$(!1),null===(n=ne.current)||void 0===n||n.resetPlaceholder(),null===(a=ae.current)||void 0===a||a.resetPlaceholder(),Oe())},fe=e=>t=>{t.stopPropagation(),R||(X.focus(e),ve(),De(),U||null==E||E())},ve=()=>{if(K){const e=l.DateHelper.toDayjs(T).startOf("week").format("YYYY-MM-DD");$(!0),N(!0),H(e)}},De=()=>{z&&(N(!0),H(T))},ge=e=>{var t;e&&!ee.current||(X.resetStart(),null===(t=ne.current)||void 0===t||t.resetInput())},he=e=>{var t;e&&!ee.current||(X.resetEnd(),null===(t=ae.current)||void 0===t||t.resetInput())},pe=e=>{switch(M){case"week":(e=>{var t;const n=r.default(e).startOf("week").format("YYYY-MM-DD"),a=r.default(e).endOf("week").format("YYYY-MM-DD");if(X.changeStart(n),X.changeEnd(a),ee.current=!1,!I)null===(t=ae.current)||void 0===t||t.focusYearRef(),X.done({start:n,end:a}),null==y||y(n,a)})(e);break;case"fixed-range":ue(e);break;default:"start"===Q?ie(e):"end"===Q&&le(e)}},be=e=>{var t,r,n;switch(null===(t=te.current)||void 0===t||t.focus(),e){case"reset":X.cancel();break;case"confirmed":if(X.done({start:T,end:V}),null==y||y(T,V),K)break;Ye(T,V)&&("range"===M?null===(r=ae.current)||void 0===r||r.focusYearRef():null===(n=ne.current)||void 0===n||n.focusYearRef())}},je=e=>{_(e)},Oe=()=>{m&&m()},Se=e=>!C&&e&&u.DateInputHelper.isDateDisabled(e,{disabledDates:b,minDate:g,maxDate:h}),Ye=(e,t)=>!(!e||!t)&&r.default(e).isBefore(t,"day"),ye=e=>{let t={start:void 0,end:void 0};switch(M){case"range":t={start:"start"===Q?W:void 0,end:"end"===Q?W:void 0};break;case"week":if(!W)return;t={start:r.default(W).startOf("week").format("YYYY-MM-DD"),end:r.default(W).endOf("week").format("YYYY-MM-DD")};break;case"fixed-range":if(!W)return;t={start:r.default(W).format("YYYY-MM-DD"),end:r.default(W).add(x-1,"day").format("YYYY-MM-DD")}}return t[e]};return t.jsx(a.ElementWithDropdown,{enabled:!R&&!p,isOpen:Z,onClose:()=>{var e,t;X.blur(),$(!1),N(!1),null===(e=ne.current)||void 0===e||e.resetPlaceholder(),null===(t=ae.current)||void 0===t||t.resetPlaceholder(),Oe()},onDismiss:()=>{var e,t,r;X.dismiss(),null===(e=te.current)||void 0===e||e.focus(),null===(t=ne.current)||void 0===t||t.resetPlaceholder(),null===(r=ae.current)||void 0===r||r.resetPlaceholder()},renderElement:()=>t.jsx(f.Container,Object.assign({role:"group",ref:te,tabIndex:0,onFocus:oe,onBlur:ce,focused:U,disabled:p,readOnly:R,$readOnly:R,error:j,$wrap:se,id:q,"data-testid":B["data-testid"],"aria-disabled":p,onKeyDown:de},B,{children:t.jsxs(d.RangeInputInnerContainer,{currentActive:Q,wrap:se,error:j,children:[t.jsx(f.InputContainer,{$wrap:se,children:t.jsx(i.StandaloneDateInput,{ref:ne,placeholder:"From",names:["start-day","start-month","start-year"],inputLabels:["Start Date","Start Month","Start Year"],value:T,disabled:p,readOnly:A||R,focused:"start"===Q,hoverValue:ye("start"),onChange:z?ue:ie,onFocus:fe("start"),onBlur:ge,hideInputKeyboard:O})}),t.jsx(f.InputContainer,{$wrap:se,children:t.jsx(i.StandaloneDateInput,{ref:ae,placeholder:"To",names:["end-day","end-month","end-year"],inputLabels:["End Date","End Month","End Year"],value:V,disabled:p,readOnly:L||R,focused:"end"===Q,hoverValue:ye("end"),onChange:le,onFocus:fe("end"),onBlur:he,hideInputKeyboard:O})})]})})),renderDropdown:({elementWidth:e})=>t.jsx(s.CalendarDropdown,{ref:re,variant:M,initialCalendarDate:P,withButton:I,value:T,endValue:V,selectWithinRange:G||J,currentFocus:Q,disabledDates:b,minDate:g,maxDate:h,allowDisabledSelection:C,onSelect:pe,onDismiss:be,onHover:je,onYearMonthDisplayChange:w,numberOfDays:x,width:e,isFocusable:!R&&!p}),customZIndex:F,offset:16,rootNode:k})};
 //# sourceMappingURL=date-range-input.js.map