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

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

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 (1304) 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 clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const tableEndRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\n\n useApplyStyle(actionBarRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const onResize = useCallback(() => {\n if (!wrapperRef.current \|\| !actionBarRef.current) {\n return;\n }\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n setScrollable(scrollable);\n\n if (scrollable) {\n actionBarRef.current.style.transform = `translateY(0)`;\n } else {\n calculateStickyInViewport();\n }\n }, []);\n\n useEffect(() => {\n onResize();\n }, []);\n\n useResizeDetector({ onResize });\n\n const scrollHandler = () => {\n requestAnimationFrame(() => {\n if (scrollable) {\n calculateFixedInViewport();\n } else {\n calculateStickyInViewport();\n }\n });\n };\n\n useEventListener(\"scroll\", scrollHandler, \"window\");\n\n useEffect(() => {\n checkLastBorder();\n }, [rows]);\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n return selectedIds?.length === rows?.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderCellId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const calculateFixedInViewport = () => {\n if (!wrapperRef.current) {\n return;\n }\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n setIsFloatingActionBar(\n wrapperBounds.bottom > window.innerHeight + 30 &&\n wrapperBounds.top < window.innerHeight - 200\n );\n };\n\n const calculateStickyInViewport = () => {\n if (\n !tableRef.current \|\|\n !tableEndRef.current \|\|\n !wrapperRef.current \|\|\n !actionBarRef.current \|\|\n !headerRef.current\n ) {\n return;\n }\n\n const endBounds = tableEndRef.current.getBoundingClientRect();\n\n if (endBounds.top > window.innerHeight) {\n const bottomOffset = endBounds.bottom - window.innerHeight;\n const bottomToHeaderOffset =\n tableRef.current.getBoundingClientRect().height -\n headerRef.current.clientHeight -\n 32;\n const maxBottomOffset = Math.min(\n bottomOffset,\n bottomToHeaderOffset\n );\n\n actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n } else {\n actionBarRef.current.style.transform = `translateY(0)`;\n }\n };\n\n const checkLastBorder = () => {\n if (!tableRef.current \|\| !wrapperRef.current) {\n return;\n }\n // 56 pixels added due to the behavior of action bar\n setShowLastBorder(\n tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n wrapperRef.current.clientHeight\n );\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead\n ref={headerRef}\n className={enableStickyHeader ? styles.stickyHeader : undefined}\n >\n <tr className={styles.headerRow}>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </tr>\n </thead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellId = getHeaderCellId(fieldKey);\n return (\n <th\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n className={clsx(\n styles.headerCell,\n clickable && styles.headerCellClickable\n )}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <div className={styles.headerCellContent} id={headerCellId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </div>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </th>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <th\n data-testid={getDataTestId(\"header-selection\")}\n className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n scope=\"col\"\n >\n <div className={styles.selectionCheckboxWrapper}>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </div>\n </th>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr>\n <td\n className={styles.emptyStateCell}\n colSpan={getTotalColumns()}\n >\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </td>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <tr\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n className={clsx(\n styles.bodyRow,\n showLastBorder && styles.bodyRowWithBottomBorder,\n isAlternatingRow(index) &&\n styles.bodyRowAlternating,\n enableMultiSelect && styles.bodyRowSelectable,\n isRowSelected(row.id.toString()) &&\n styles.bodyRowSelected\n )}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </tr>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header === \"string\" ? undefined : header.style;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n let cellContent: React.ReactNode;\n if (typeof cellData === \"string\" \|\| typeof cellData === \"number\") {\n cellContent = (\n <Typography.BodyBL className={styles.bodyCellText}>\n {cellData}\n </Typography.BodyBL>\n );\n } else if (typeof cellData === \"function\") {\n cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n } else {\n cellContent = cellData;\n }\n\n return (\n <td\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n className={styles.bodyCell}\n style={style}\n >\n {cellContent}\n </td>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <td\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n >\n <div className={styles.selectionCheckboxWrapper}>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </div>\n </td>\n );\n };\n\n const renderBasicEmptyView = () => {\n let emptyTitle: JSX.Element;\n if (!emptyView?.title) {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {\"No <items> found\"}\n </Typography.HeadingSM>\n );\n } else if (typeof emptyView.title === \"string\") {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {emptyView.title}\n </Typography.HeadingSM>\n );\n } else {\n emptyTitle = emptyView.title;\n }\n\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={emptyTitle}\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <tr>\n <td colSpan={getTotalColumns()}>\n <div\n className={styles.loadingStateWrapper}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </div>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n const hasNotReachedTableEnd = !scrollable && !end;\n const shouldUseFloatingActionBar =\n hasNotReachedScrollableEnd \|\|\n hasNotReachedTableEnd \|\|\n isFloatingActionBar;\n\n return (\n <div\n ref={actionBarRef}\n className={clsx(\n styles.actionBarWrapper,\n isFloatingActionBar && styles.actionBarWrapperFloating\n )}\n >\n <div\n className={clsx(\n styles.actionBar,\n shouldUseFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(styles.tableWrapper, className)}\n ref={wrapperRef}\n onScroll={() => {\n if (scrollable && wrapperRef.current) {\n setScrollEnd(\n wrapperRef.current.scrollTop +\n wrapperRef.current.clientHeight >=\n wrapperRef.current.scrollHeight\n );\n }\n }}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={clsx(styles.table)}>\n {renderHeaders()}\n <tbody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </tbody>\n </table>\n </div>\n {enableActionBar &&\n selectedIds &&\n selectedIds.length > 0 &&\n renderSelectionBar()}\n <div\n ref={(r) => {\n tableEndRef.current = r;\n endRef(r);\n }}\n />\n </div>\n );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","disabled","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRow","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"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"}
1	+ {"version":3,"file":"data-table.js","sources":["../../../src/data-table/data-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { LoadingDotsSpinner } from \"../animations\";\nimport { Checkbox } from \"../checkbox\";\nimport { ErrorDisplay } from \"../error-display\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport { useEventListener } from \"../util/use-event-listener\";\nimport * as styles from \"./data-table.styles\";\nimport type { DataTableProps, HeaderProps, RowProps } from \"./types\";\n\nexport const DataTable = ({\n id,\n headers,\n rows,\n className,\n sortIndicators,\n alternatingRows,\n loadState = \"success\",\n enableMultiSelect,\n selectedIds,\n disabledIds,\n enableActionBar,\n enableSelectAll,\n enableStickyHeader,\n emptyView,\n actionBarContent,\n renderCustomEmptyView,\n onHeaderClick,\n onSelect,\n onSelectAll,\n onClearSelectionClick,\n ...otherProps\n}: DataTableProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const tableRef = useRef<HTMLTableElement>(null);\n const tableEndRef = useRef<HTMLDivElement \| null>(null);\n const headerRef = useRef<HTMLTableSectionElement>(null);\n const actionBarRef = useRef<HTMLDivElement>(null);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const internalId = useId();\n const keyColumns = headers.filter(\n (header): header is Exclude<HeaderProps, string> => {\n return typeof header !== \"string\" && !!header.keyColumn;\n }\n );\n\n const [scrollable, setScrollable] = useState(false);\n const [scrollEnd, setScrollEnd] = useState(false);\n const [isFloatingActionBar, setIsFloatingActionBar] = useState(false);\n const [showLastBorder, setShowLastBorder] = useState(false);\n\n const { ref: endRef, inView: end } = useInView();\n\n useApplyStyle(actionBarRef, {\n [styles.tokens.actionBarWrapperLeft]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.getBoundingClientRect().left}px`\n : undefined,\n [styles.tokens.actionBarWrapperWidth]:\n isFloatingActionBar && tableRef.current\n ? `${tableRef.current.clientWidth}px`\n : undefined,\n });\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n const onResize = useCallback(() => {\n if (!wrapperRef.current \|\| !actionBarRef.current) {\n return;\n }\n const scrollable =\n wrapperRef.current.scrollHeight > wrapperRef.current.clientHeight;\n setScrollable(scrollable);\n\n if (scrollable) {\n actionBarRef.current.style.transform = `translateY(0)`;\n } else {\n calculateStickyInViewport();\n }\n }, []);\n\n useEffect(() => {\n onResize();\n }, []);\n\n useResizeDetector({ onResize });\n\n const scrollHandler = () => {\n requestAnimationFrame(() => {\n if (scrollable) {\n calculateFixedInViewport();\n } else {\n calculateStickyInViewport();\n }\n });\n };\n\n useEventListener(\"scroll\", scrollHandler, \"window\");\n\n useEffect(() => {\n checkLastBorder();\n }, [rows]);\n\n // ===========================================================================\n // HELPER FUNCTIONS\n // ===========================================================================\n const isAllCheckboxSelected = (): boolean => {\n if (!rows \|\| !rows.length \|\| !selectedIds) {\n return false;\n }\n return selectedIds.length === rows.length;\n };\n\n const isIndeterminateCheckbox = (): boolean => {\n return (\n !!selectedIds &&\n selectedIds.length !== 0 &&\n !isAllCheckboxSelected()\n );\n };\n\n const isHeaderCheckboxDisabled = (): boolean => {\n return !rows \|\| !rows.length \|\| !selectedIds;\n };\n\n const isRowSelected = (rowId: string): boolean => {\n return !!selectedIds?.includes(rowId);\n };\n\n const isAlternatingRow = (index: number): boolean => {\n return !!alternatingRows && index % 2 === 1;\n };\n\n const isDisabledRow = (rowId: string): boolean => {\n return !!disabledIds?.includes(rowId);\n };\n\n const getDataTestId = (subStr: string) => {\n if (!otherProps[\"data-testid\"]) return undefined;\n return `${otherProps[\"data-testid\"]}-${subStr}`;\n };\n\n const getTotalColumns = (): number => {\n return headers.length + (enableMultiSelect ? 1 : 0);\n };\n\n const getSortDirection = (fieldKey: string) => {\n return sortIndicators?.[fieldKey];\n };\n\n const getHeaderAriaSort = (fieldKey: string) => {\n const sortDirection = getSortDirection(fieldKey);\n\n if (!sortDirection) {\n return undefined;\n }\n\n return sortDirection === \"asc\" ? \"ascending\" : \"descending\";\n };\n\n const getSortButtonAriaLabel = (fieldKey: string) => {\n const nextSortDirection =\n getSortDirection(fieldKey) === \"asc\" ? \"descending\" : \"ascending\";\n\n return ` by ${nextSortDirection} order`;\n };\n\n const getHeaderCellId = (fieldKey: string) => {\n return `${internalId}-header-${fieldKey}`;\n };\n const getCellId = (rowId: string, fieldKey: string) => {\n return `${internalId}-row-${rowId}-${fieldKey}-key-column`;\n };\n\n const getRowCheckboxAriaLabelledBy = (rowId: string) => {\n const keyColumnIds = keyColumns.map((header) =>\n getCellId(rowId, header.fieldKey)\n );\n\n return concatIds(...keyColumnIds);\n };\n\n const calculateFixedInViewport = () => {\n if (!wrapperRef.current) {\n return;\n }\n const wrapperBounds = wrapperRef.current.getBoundingClientRect();\n setIsFloatingActionBar(\n wrapperBounds.bottom > window.innerHeight + 30 &&\n wrapperBounds.top < window.innerHeight - 200\n );\n };\n\n const calculateStickyInViewport = () => {\n if (\n !tableRef.current \|\|\n !tableEndRef.current \|\|\n !wrapperRef.current \|\|\n !actionBarRef.current \|\|\n !headerRef.current\n ) {\n return;\n }\n\n const endBounds = tableEndRef.current.getBoundingClientRect();\n\n if (endBounds.top > window.innerHeight) {\n const bottomOffset = endBounds.bottom - window.innerHeight;\n const bottomToHeaderOffset =\n tableRef.current.getBoundingClientRect().height -\n headerRef.current.clientHeight -\n 32;\n const maxBottomOffset = Math.min(\n bottomOffset,\n bottomToHeaderOffset\n );\n\n actionBarRef.current.style.transform = `translateY(-${maxBottomOffset}px)`;\n } else {\n actionBarRef.current.style.transform = `translateY(0)`;\n }\n };\n\n const checkLastBorder = () => {\n if (!tableRef.current \|\| !wrapperRef.current) {\n return;\n }\n // 56 pixels added due to the behavior of action bar\n setShowLastBorder(\n tableRef.current.clientHeight + (enableActionBar ? 56 : 0) <\n wrapperRef.current.clientHeight\n );\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleHeaderClick = (fieldKey: string) => {\n onHeaderClick?.(fieldKey);\n };\n\n const handleHeaderButtonClick = (\n event: React.MouseEvent<HTMLButtonElement>,\n fieldKey: string\n ) => {\n event.stopPropagation();\n onHeaderClick?.(fieldKey);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderHeaders = () => (\n <thead\n ref={headerRef}\n className={enableStickyHeader ? styles.stickyHeader : undefined}\n >\n <tr className={styles.headerRow}>\n {enableMultiSelect && renderHeaderCheckBox()}\n {headers.map(renderHeaderCell)}\n </tr>\n </thead>\n );\n\n const renderHeaderCell = (header: HeaderProps) => {\n const {\n fieldKey,\n label,\n clickable = false,\n style,\n } = typeof header === \"string\"\n ? {\n fieldKey: header,\n label: header,\n style: undefined,\n }\n : header;\n\n const isSortable = !!getSortDirection(fieldKey);\n const headerCellId = getHeaderCellId(fieldKey);\n return (\n <th\n data-testid={getDataTestId(`header-${fieldKey}`)}\n key={fieldKey}\n className={clsx(\n styles.headerCell,\n clickable && styles.headerCellClickable\n )}\n scope=\"col\"\n aria-sort={getHeaderAriaSort(fieldKey)}\n style={style}\n onClick={() => handleHeaderClick(fieldKey)}\n >\n <div className={styles.headerCellContent} id={headerCellId}>\n {typeof label === \"string\" ? (\n <Typography.BodyBL weight=\"bold\">\n {label}\n </Typography.BodyBL>\n ) : (\n label\n )}\n {renderSortedArrow(fieldKey)}\n </div>\n {(clickable \|\| isSortable) && (\n <VisuallyHidden>\n <button\n onClick={(event) =>\n handleHeaderButtonClick(event, fieldKey)\n }\n >\n {isSortable && \"Sort \"}\n <span aria-labelledby={headerCellId} />\n {isSortable && getSortButtonAriaLabel(fieldKey)}\n </button>\n </VisuallyHidden>\n )}\n </th>\n );\n };\n\n const renderSortedArrow = (fieldKey: string) => {\n const isSorted = sortIndicators?.[fieldKey];\n\n if (!isSorted) {\n return <></>;\n }\n if (isSorted === \"asc\") {\n return (\n <ArrowUpIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowup`)}\n />\n );\n }\n return (\n <ArrowDownIcon\n aria-hidden\n data-testid={getDataTestId(`header-${fieldKey}-arrowdown`)}\n />\n );\n };\n\n const renderHeaderCheckBox = () => {\n return (\n <th\n data-testid={getDataTestId(\"header-selection\")}\n className={clsx(styles.headerCell, styles.headerCellCheckbox)}\n scope=\"col\"\n >\n <div className={styles.selectionCheckboxWrapper}>\n <VisuallyHidden>Row selection</VisuallyHidden>\n {enableSelectAll && (\n <Checkbox\n checked={isAllCheckboxSelected()}\n indeterminate={isIndeterminateCheckbox()}\n disabled={isHeaderCheckboxDisabled()}\n aria-label=\"Select all rows\"\n onClick={() => {\n if (onSelectAll) {\n onSelectAll(isAllCheckboxSelected());\n }\n }}\n />\n )}\n </div>\n </th>\n );\n };\n\n const renderRows = () => {\n return !rows \|\| rows.length < 1 ? (\n <tr className={styles.bodyRow}>\n <td\n className={styles.emptyStateCell}\n colSpan={getTotalColumns()}\n >\n {renderCustomEmptyView\n ? renderCustomEmptyView()\n : renderBasicEmptyView()}\n </td>\n </tr>\n ) : (\n <>\n {rows?.map((row: RowProps, index: number) => (\n <tr\n data-testid={getDataTestId(`row-${row.id.toString()}`)}\n key={row.id.toString()}\n className={clsx(\n styles.bodyRow,\n showLastBorder && styles.bodyRowWithBottomBorder,\n isAlternatingRow(index) &&\n styles.bodyRowAlternating,\n enableMultiSelect && styles.bodyRowSelectable,\n isRowSelected(row.id.toString()) &&\n styles.bodyRowSelected\n )}\n >\n {enableMultiSelect && renderRowCheckBox(row)}\n\n {headers.map((header) => renderRowCell(header, row))}\n </tr>\n ))}\n </>\n );\n };\n\n const renderRowCell = (header: HeaderProps, row: RowProps) => {\n const style = typeof header === \"string\" ? undefined : header.style;\n const fieldKey = typeof header === \"string\" ? header : header.fieldKey;\n const rowId = row.id.toString();\n const cellData = row[fieldKey];\n const cellId = `${rowId}-${fieldKey}`;\n\n let cellContent: React.ReactNode;\n if (typeof cellData === \"string\" \|\| typeof cellData === \"number\") {\n cellContent = (\n <Typography.BodyBL className={styles.bodyCellText}>\n {cellData}\n </Typography.BodyBL>\n );\n } else if (typeof cellData === \"function\") {\n cellContent = cellData(row, { isSelected: isRowSelected(rowId) });\n } else {\n cellContent = cellData;\n }\n\n return (\n <td\n data-testid={getDataTestId(`row-${cellId}`)}\n key={cellId}\n id={getCellId(rowId, fieldKey)}\n className={styles.bodyCell}\n style={style}\n >\n {cellContent}\n </td>\n );\n };\n\n const renderRowCheckBox = (row: RowProps) => {\n const rowId = row.id.toString();\n\n return (\n <td\n data-testid={getDataTestId(`row-${rowId}-selection`)}\n className={clsx(styles.bodyCell, styles.bodyCellCheckbox)}\n >\n <div className={styles.selectionCheckboxWrapper}>\n <Checkbox\n checked={isRowSelected(rowId)}\n aria-labelledby={getRowCheckboxAriaLabelledBy(rowId)}\n onClick={() => {\n if (onSelect) {\n onSelect(rowId, !isRowSelected(rowId));\n }\n }}\n disabled={isDisabledRow(rowId)}\n focusableWhenDisabled={isDisabledRow(rowId)}\n />\n </div>\n </td>\n );\n };\n\n const renderBasicEmptyView = () => {\n let emptyTitle: JSX.Element;\n if (!emptyView?.title) {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {\"No <items> found\"}\n </Typography.HeadingSM>\n );\n } else if (typeof emptyView.title === \"string\") {\n emptyTitle = (\n <Typography.HeadingSM\n className={styles.emptyStateTitle}\n weight=\"bold\"\n >\n {emptyView.title}\n </Typography.HeadingSM>\n );\n } else {\n emptyTitle = emptyView.title;\n }\n\n return (\n <ErrorDisplay\n type={\"no-item-found\"}\n {...emptyView}\n title={emptyTitle}\n description={\n emptyView?.description\n ? emptyView.description\n : \"No matching rows\"\n }\n />\n );\n };\n\n const renderLoader = () => {\n return (\n <tr className={styles.bodyRow}>\n <td colSpan={getTotalColumns()}>\n <div\n className={styles.loadingStateWrapper}\n role=\"status\"\n aria-live=\"polite\"\n aria-label=\"Loading table\"\n >\n {loadState === \"loading\" && <LoadingDotsSpinner />}\n </div>\n </td>\n </tr>\n );\n };\n\n const renderSelectionBar = () => {\n const count = selectedIds?.length ?? 0;\n const hasNotReachedScrollableEnd = scrollable && !scrollEnd;\n const hasNotReachedTableEnd = !scrollable && !end;\n const shouldUseFloatingActionBar =\n hasNotReachedScrollableEnd \|\|\n hasNotReachedTableEnd \|\|\n isFloatingActionBar;\n\n return (\n <div\n ref={actionBarRef}\n className={clsx(\n styles.actionBarWrapper,\n isFloatingActionBar && styles.actionBarWrapperFloating\n )}\n >\n <div\n className={clsx(\n styles.actionBar,\n shouldUseFloatingActionBar && styles.actionBarFloating\n )}\n >\n <Typography.BodyMD weight=\"semibold\">{`${count} item${\n count > 1 ? \"s\" : \"\"\n } selected`}</Typography.BodyMD>\n <BasicButton\n className={styles.actionBarButton}\n type=\"button\"\n aria-label={`Clear selection of ${count} item${\n count === 1 ? \"\" : \"s\"\n }`}\n onClick={onClearSelectionClick}\n >\n Clear selection\n </BasicButton>\n {actionBarContent}\n </div>\n </div>\n );\n };\n\n return (\n <div\n id={id \|\| \"table-wrapper\"}\n data-testid={otherProps[\"data-testid\"] \|\| \"table\"}\n className={clsx(styles.tableWrapper, className)}\n ref={wrapperRef}\n onScroll={() => {\n if (scrollable && wrapperRef.current) {\n setScrollEnd(\n wrapperRef.current.scrollTop +\n wrapperRef.current.clientHeight >=\n wrapperRef.current.scrollHeight\n );\n }\n }}\n tabIndex={0} // scrollable container must be focusable to support keyboard users\n >\n <div className={styles.tableContainer}>\n <table ref={tableRef} className={clsx(styles.table)}>\n {renderHeaders()}\n <tbody>\n {loadState === \"success\"\n ? renderRows()\n : renderLoader()}\n </tbody>\n </table>\n </div>\n {enableActionBar &&\n selectedIds &&\n selectedIds.length > 0 &&\n renderSelectionBar()}\n <div\n ref={(r) => {\n tableEndRef.current = r;\n endRef(r);\n }}\n />\n </div>\n );\n};\n"],"names":["_a","id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick","otherProps","__rest","tableRef","useRef","tableEndRef","headerRef","actionBarRef","wrapperRef","internalId","useId","keyColumns","filter","header","keyColumn","scrollable","setScrollable","useState","scrollEnd","setScrollEnd","isFloatingActionBar","setIsFloatingActionBar","showLastBorder","setShowLastBorder","ref","endRef","inView","end","useInView","useApplyStyle","styles.tokens","actionBarWrapperLeft","current","getBoundingClientRect","left","undefined","actionBarWrapperWidth","clientWidth","onResize","useCallback","scrollHeight","clientHeight","style","transform","calculateStickyInViewport","useEffect","useResizeDetector","useEventListener","requestAnimationFrame","calculateFixedInViewport","checkLastBorder","isAllCheckboxSelected","length","isRowSelected","rowId","includes","isAlternatingRow","index","isDisabledRow","getDataTestId","subStr","getTotalColumns","getSortDirection","fieldKey","getHeaderAriaSort","sortDirection","getSortButtonAriaLabel","getCellId","getRowCheckboxAriaLabelledBy","keyColumnIds","map","concatIds","wrapperBounds","bottom","window","innerHeight","top","endBounds","bottomOffset","bottomToHeaderOffset","height","maxBottomOffset","Math","min","renderHeaderCell","label","clickable","isSortable","headerCellId","getHeaderCellId","_jsxs","clsx","styles.headerCell","styles.headerCellClickable","scope","onClick","handleHeaderClick","children","styles.headerCellContent","_jsx","Typography","BodyBL","weight","renderSortedArrow","VisuallyHidden","event","stopPropagation","handleHeaderButtonClick","isSorted","ArrowUpIcon","ArrowDownIcon","renderHeaderCheckBox","styles.headerCellCheckbox","styles.selectionCheckboxWrapper","Checkbox","checked","indeterminate","disabled","renderRowCell","row","toString","cellData","cellId","cellContent","styles.bodyCellText","isSelected","styles.bodyCell","renderRowCheckBox","styles.bodyCellCheckbox","focusableWhenDisabled","renderBasicEmptyView","emptyTitle","title","HeadingSM","styles.emptyStateTitle","ErrorDisplay","Object","assign","type","description","styles.tableWrapper","onScroll","scrollTop","tabIndex","styles.tableContainer","styles.table","styles.stickyHeader","styles.headerRow","styles.bodyRow","styles.emptyStateCell","colSpan","_Fragment","styles.bodyRowWithBottomBorder","styles.bodyRowAlternating","styles.bodyRowSelectable","styles.bodyRowSelected","styles.loadingStateWrapper","role","LoadingDotsSpinner","count","shouldUseFloatingActionBar","styles.actionBarWrapper","styles.actionBarWrapperFloating","styles.actionBar","styles.actionBarFloating","BodyMD","BasicButton","styles.actionBarButton","renderSelectionBar","r"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./data-table.styles_1nj2uzq.css");exports.actionBar="anoy5c0",exports.actionBarButton="axywpxo",exports.actionBarFloating="a1gvi5ye",exports.actionBarWrapper="aag0lf9",exports.actionBarWrapperFloating="a1euqarq",exports.bodyCell="bfa3d3x",exports.bodyCellCheckbox="bx1feaw",exports.bodyCellText="b1g3gl2s",exports.bodyRow="b6ks76c",exports.bodyRowAlternating="b1bceurq",exports.bodyRowSelectable="bjmthdi",exports.bodyRowSelected="b8t2s91",exports.bodyRowWithBottomBorder="b1tvp43a",exports.emptyStateCell="e1yxh9il",exports.emptyStateTitle="e1pcc0nq",exports.headerCell="h1744qno",exports.headerCellCheckbox="hp15x3z",exports.headerCellClickable="h1ec4wtd",exports.headerCellContent="h4ne4e9",exports.headerRow="h1nfqacf",exports.loadingStateWrapper="ldhafdm",exports.selectionCheckboxWrapper="s1w2nktt",exports.stickyHeader="s7u4vf5",exports.table="t4ucy2z",exports.tableContainer="t1j0mhj",exports.tableWrapper="t188sfx3",exports.tokens={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"};
+"use strict";require("./data-table.styles_1iqq1g7.css");exports.actionBar="anoy5c0",exports.actionBarButton="axywpxo",exports.actionBarFloating="a1gvi5ye",exports.actionBarWrapper="aag0lf9",exports.actionBarWrapperFloating="a1euqarq",exports.bodyCell="bfa3d3x",exports.bodyCellCheckbox="bx1feaw",exports.bodyCellText="b1g3gl2s",exports.bodyRow="b6ks76c",exports.bodyRowAlternating="b1bceurq",exports.bodyRowSelectable="bjmthdi",exports.bodyRowSelected="b8t2s91",exports.bodyRowWithBottomBorder="b1tvp43a",exports.emptyStateCell="e1yxh9il",exports.emptyStateTitle="e1pcc0nq",exports.headerCell="h1744qno",exports.headerCellCheckbox="hp15x3z",exports.headerCellClickable="h1ec4wtd",exports.headerCellContent="h4ne4e9",exports.headerRow="h1nfqacf",exports.loadingStateWrapper="ldhafdm",exports.selectionCheckboxWrapper="s1w2nktt",exports.stickyHeader="s7u4vf5",exports.table="t4ucy2z",exports.tableContainer="t1j0mhj",exports.tableWrapper="t188sfx3",exports.tokens={actionBarWrapperLeft:"--fds-internal-dataTable-actionBarWrapper-left",actionBarWrapperWidth:"--fds-internal-dataTable-actionBarWrapper-width"};
 //# sourceMappingURL=data-table.styles.js.map

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

@@ -17,7 +17,7 @@
 .b1g3gl2s{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;}
 .e1yxh9il{padding:4rem 0;}.e1yxh9il:first-child{padding-left:1.5rem;}.e1yxh9il:last-child{padding-right:1.5rem;}
 .s1w2nktt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
-.axywpxo{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
+.axywpxo{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);cursor:pointer;color:var(--fds-colour-text-primary);-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);padding:0.75rem;margin:-0.75rem 0;}.axywpxo:hover{color:var(--fds-colour-text-hover);}
 .anoy5c0{overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3.5rem;padding:var(--fds-spacing-16) var(--fds-spacing-24);border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background-color:var(--fds-colour-bg-selected);-webkit-transition:all 300ms ease;transition:all 300ms ease;border-radius:var(--fds-radius-none) var(--fds-radius-none) var(--fds-radius-sm) var(--fds-radius-sm);}
 .a1gvi5ye{-webkit-transform:translateX(0.5rem) translateY(-2rem);-moz-transform:translateX(0.5rem) translateY(-2rem);-ms-transform:translateX(0.5rem) translateY(-2rem);transform:translateX(0.5rem) translateY(-2rem);border-radius:var(--fds-radius-sm);box-shadow:var(--fds-shadow-xs-subtle);width:calc(100% - var(--fds-spacing-16));border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
 .aag0lf9{bottom:0;position:-webkit-sticky;position:sticky;left:0;}

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("clsx"),t=require("../external/dayjs/dayjs.min.js"),n=require("react"),i=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js"),s=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var d=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js");var o=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./date-input.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(r);exports.DateInput=r=>{var{minDate:c,maxDate:v,disabled:D,disabledDates:h,error:f,hideInputKeyboard:m,value:b,onChange:j,onFocus:w,onBlur:I,onYearMonthDisplayChange:q,withButton:x=!0,readOnly:y,id:g,allowDisabledSelection:S,zIndex:C,dropdownRootNode:Y,className:R}=r,B=e.__rest(r,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className"]);const[N,O]=n.useState(o.DateInputHelper.sanitizeInput(b)),[z,H]=n.useState(o.DateInputHelper.sanitizeInput(b)),[M,F]=n.useState(void 0),[_,E]=n.useState(!1),[K,W]=n.useState(!1),V=n.useRef(null),k=n.useRef(null),T=n.useRef(null);n.useEffect((()=>{const e=o.DateInputHelper.sanitizeInput(b);O(e),H(e)}),[b]);const Z=e=>{!S&&o.DateInputHelper.isDateDisabled(e,{disabledDates:h,minDate:c,maxDate:v})||(H(e),x||(Q(e),O(e),e&&E(!1)))},A=e=>{var a;H(e),x||(Q(e),O(e),e&&(null===(a=k.current)||void 0===a||a.focusYearRef(),E(!1)),F(void 0))},G=()=>{y||D||(E(!0),K||(W(!0),w&&w()))},J=e=>{var a,r,t;const n=e.relatedTarget,i=T.current&&T.current.contains(n),l=V.current&&V.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]"));(K&&!_&&!l&&!s||_&&!l&&!i&&!s)&&(null===(t=k.current)||void 0===t||t.resetInput(),H(N),W(!1),E(!1),U())},L=e=>{F(e)},P=e=>{var a,r;switch(e){case"reset":H(N);break;case"confirmed":O(z),Q(z)}t.default(z,"YYYY-MM-DD",!0).isValid()?null===(a=k.current)||void 0===a||a.focusYearRef():null===(r=V.current)||void 0===r||r.focus(),E(!1)},Q=e=>{j&&j(e)},U=()=>{I&&I()};return a.jsx(i.ElementWithDropdown,{enabled:!y&&!D,isOpen:_,renderElement:()=>a.jsx(l.InputWrapper,Object.assign({role:"group",tabIndex:0,ref:V,onBlur:J,onFocus:G,disabled:D,readOnly:y,focused:K,error:f,id:g,"data-testid":B["data-testid"],"aria-disabled":D,className:p.default(u.container,R)},B,{children:a.jsx(d.StandaloneDateInput,{ref:k,disabled:D,onChange:Z,readOnly:y,focused:_,names:["start-day","start-month","start-year"],value:z,hoverValue:M,hideInputKeyboard:m})})),renderDropdown:({elementWidth:e})=>a.jsx(s.CalendarDropdown,{variant:"single",ref:T,initialCalendarDate:z,withButton:x,value:z,disabledDates:h,minDate:c,maxDate:v,allowDisabledSelection:S,onHover:L,onSelect:A,onDismiss:P,onYearMonthDisplayChange:q,width:e,isFocusable:!y&&!D}),onClose:()=>{var e;null===(e=k.current)||void 0===e||e.resetInput(),H(N),E(!1),W(!1),U(),F(void 0)},onDismiss:()=>{var e,a;null===(e=k.current)||void 0===e||e.resetInput(),null===(a=V.current)||void 0===a||a.focus(),H(N),E(!1)},customZIndex:C,offset:16,rootNode:Y})};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("clsx"),t=require("../external/dayjs/dayjs.min.js"),n=require("react"),i=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js"),s=require("../shared/internal-calendar/calendar-dropdown.js");require("../shared/internal-calendar/internal-calendar.js");var d=require("../shared/standalone-date-input/standalone-date-input.js");require("../util/calendar-helper.js");var o=require("../util/date-input-helper.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./date-input.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(r);exports.DateInput=r=>{var{minDate:c,maxDate:v,disabled:D,disabledDates:h,error:f,hideInputKeyboard:m,value:b,onChange:j,onFocus:w,onBlur:I,onYearMonthDisplayChange:q,withButton:x=!0,readOnly:y,id:g,allowDisabledSelection:S,zIndex:C,dropdownRootNode:Y,className:R}=r,B=e.__rest(r,["minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className"]);const[N,O]=n.useState(o.DateInputHelper.sanitizeInput(b)),[z,H]=n.useState(o.DateInputHelper.sanitizeInput(b)),[M,F]=n.useState(void 0),[_,E]=n.useState(!1),[K,W]=n.useState(!1),V=n.useRef(null),k=n.useRef(null),T=n.useRef(null);n.useEffect((()=>{const e=o.DateInputHelper.sanitizeInput(b);O(e),H(e)}),[b]);const Z=e=>{!S&&o.DateInputHelper.isDateDisabled(e,{disabledDates:h,minDate:c,maxDate:v})||(H(e),x||(Q(e),O(e),e&&E(!1)))},A=e=>{var a;H(e),x||(Q(e),O(e),e&&(null===(a=k.current)||void 0===a||a.focusYearRef(),E(!1)),F(void 0))},G=()=>{y||D||(E(!0),K||(W(!0),w&&w()))},J=e=>{var a,r,t;const n=e.relatedTarget,i=T.current&&T.current.contains(n),l=V.current&&V.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]"));(K&&!_&&!l&&!s||_&&!l&&!i&&!s)&&(null===(t=k.current)||void 0===t||t.resetInput(),H(N),W(!1),E(!1),U())},L=e=>{_&&F(e)},P=e=>{var a,r;switch(e){case"reset":H(N);break;case"confirmed":O(z),Q(z)}t.default(z,"YYYY-MM-DD",!0).isValid()?null===(a=k.current)||void 0===a||a.focusYearRef():null===(r=V.current)||void 0===r||r.focus(),E(!1)},Q=e=>{j&&j(e)},U=()=>{I&&I()};return a.jsx(i.ElementWithDropdown,{enabled:!y&&!D,isOpen:_,renderElement:()=>a.jsx(l.InputWrapper,Object.assign({role:"group",tabIndex:0,ref:V,onBlur:J,onFocus:G,disabled:D,readOnly:y,focused:K,error:f,id:g,"data-testid":B["data-testid"],"aria-disabled":D,className:p.default(u.container,R)},B,{children:a.jsx(d.StandaloneDateInput,{ref:k,disabled:D,onChange:Z,readOnly:y,focused:_,names:["start-day","start-month","start-year"],value:z,hoverValue:M,hideInputKeyboard:m})})),renderDropdown:({elementWidth:e})=>a.jsx(s.CalendarDropdown,{variant:"single",ref:T,initialCalendarDate:z,withButton:x,value:z,disabledDates:h,minDate:c,maxDate:v,allowDisabledSelection:S,onHover:L,onSelect:A,onDismiss:P,onYearMonthDisplayChange:q,width:e,isFocusable:!y&&!D}),onClose:()=>{var e;null===(e=k.current)||void 0===e||e.resetInput(),H(N),E(!1),W(!1),U(),F(void 0)},onDismiss:()=>{var e,a;null===(e=k.current)||void 0===e||e.resetInput(),null===(a=V.current)||void 0===a||a.focus(),H(N),E(!1)},customZIndex:C,offset:16,rootNode:Y})};
 //# 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 clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialDate, setInitialDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [selectedDate, setSelectedDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [hoveredDate, setHoveredDate] = useState<string \| undefined>(\n undefined\n );\n const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<StandaloneDateInputRef>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const newValue = DateInputHelper.sanitizeInput(value);\n setInitialDate(newValue);\n setSelectedDate(newValue);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClose = () => {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n setFocused(false);\n\n performOnBlurHandler();\n\n // clear hover value for mobile scrolling\n setHoveredDate(undefined);\n };\n\n const handleDismiss = () => {\n inputRef.current?.resetInput();\n nodeRef.current?.focus();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n };\n\n const handleChange = (val: string) => {\n if (\n !allowDisabledSelection &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n ) {\n return;\n }\n\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n setCalendarOpen(false);\n }\n }\n };\n\n const handleSelect = (val: string) => {\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n inputRef.current?.focusYearRef();\n setCalendarOpen(false);\n }\n\n // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n setHoveredDate(undefined);\n }\n };\n\n const handleFocus = () => {\n if (readOnly \|\| disabled) return;\n\n setCalendarOpen(true);\n\n if (focused) return;\n\n setFocused(true);\n\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setFocused(false);\n setCalendarOpen(false);\n performOnBlurHandler();\n }\n };\n\n const handleHoverDayCell = (value: string) => {\n setHoveredDate(value);\n };\n\n const handleCalendarAction = (buttonAction: CalendarAction) => {\n // handle button in day calendar view\n switch (buttonAction) {\n case \"reset\":\n setSelectedDate(initialDate);\n break;\n case \"confirmed\":\n setInitialDate(selectedDate);\n performOnChangeHandler(selectedDate);\n break;\n }\n\n const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n // Focus on year input if the selected date is valid to avoid restarting entire tab order\n if (isValid) {\n inputRef.current?.focusYearRef();\n } else {\n nodeRef.current?.focus();\n }\n setCalendarOpen(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnChangeHandler = (changeValue: string) => {\n if (onChange) {\n onChange(changeValue);\n }\n };\n\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n tabIndex={0}\n ref={nodeRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n disabled={disabled}\n readOnly={readOnly}\n focused={focused}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n className={clsx(styles.container, className)}\n {...otherProps}\n >\n <StandaloneDateInput\n ref={inputRef}\n disabled={disabled}\n onChange={handleChange}\n readOnly={readOnly}\n focused={calendarOpen}\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n value={selectedDate}\n hoverValue={hoveredDate}\n hideInputKeyboard={hideInputKeyboard}\n />\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n ref={calendarRef}\n initialCalendarDate={selectedDate}\n withButton={withButton}\n value={selectedDate}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onHover={handleHoverDayCell}\n onSelect={handleSelect}\n onDismiss={handleCalendarAction}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n onClose={handleClose}\n onDismiss={handleDismiss}\n customZIndex={zIndex}\n offset={16}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"ozBAkB0BA,IAAA,IAAAC,QACtBA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,cACRA,EAAaC,MACbA,EAAKC,kBACLA,EAAiBC,MACjBA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,yBACNA,EAAwBC,WACxBA,GAAa,EAAIC,SACjBA,EAAQC,GACRA,EAAEC,uBACFA,EAAsBC,OACtBA,EAAMC,iBACNA,EAAgBC,UAChBA,GAASlB,EACNmB,EAAUC,SAAApB,EAnBS,6OAwBtB,MAAOqB,EAAaC,GAAkBC,EAAAA,SAClCC,kBAAgBC,cAAclB,KAE3BmB,EAAcC,GAAmBJ,EAAAA,SACpCC,kBAAgBC,cAAclB,KAE3BqB,EAAaC,GAAkBN,EAAAA,cAClCO,IAEGC,EAAcC,GAAmBT,EAAAA,UAAkB,IACnDU,EAASC,GAAcX,EAAAA,UAAkB,GAE1CY,EAAUC,EAAAA,OAAuB,MACjCC,EAAWD,EAAAA,OAA+B,MAC1CE,EAAcF,EAAAA,OAA4B,MAKhDG,EAAAA,WAAU,KACN,MAAMC,EAAWhB,EAAAA,gBAAgBC,cAAclB,GAC/Ce,EAAekB,GACfb,EAAgBa,EAAS,GAC1B,CAACjC,IAKJ,MAmBMkC,EAAgBC,KAEb3B,GACDS,EAAAA,gBAAgBmB,eAAeD,EAAK,CAChCtC,gBACAH,UACAC,cAMRyB,EAAgBe,GAEX9B,IACDgC,EAAuBF,GACvBpB,EAAeoB,GACXA,GACAV,GAAgB,IAExB,EAGEa,EAAgBH,UAClBf,EAAgBe,GAEX9B,IACDgC,EAAuBF,GACvBpB,EAAeoB,GACXA,IACgB,QAAhB1C,EAAAqC,EAASS,eAAO,IAAA9C,GAAAA,EAAE+C,eAClBf,GAAgB,IAIpBH,OAAeC,GACnB,EAGEkB,EAAc,KACZnC,GAAYV,IAEhB6B,GAAgB,GAEZC,IAEJC,GAAW,GAEPzB,GACAA,KACJ,EAGEwC,EAAcC,cAChB,MAAMC,EAASD,EAAEE,cAEXC,EACFf,EAAYQ,SAAWR,EAAYQ,QAAQQ,SAASH,GAClDI,EACFpB,EAAQW,SAAWX,EAAQW,QAAQQ,SAASH,GAC1CK,GACa,QAAfxD,EAAAmD,aAAM,EAANA,EAAQM,eAAO,IAAAzD,OAAA,EAAAA,EAAA0D,KAAAP,EAAG,mCACH,QAAfQ,EAAAR,aAAM,EAANA,EAAQM,eAAO,IAAAE,OAAA,EAAAA,EAAAD,KAAAP,EAAG,oCAIlBlB,IAAYF,IAAiBwB,IAAiBC,GAI9CzB,IACCwB,IACAF,IACAG,KAGe,QAAhBI,EAAAvB,EAASS,eAAO,IAAAc,GAAAA,EAAEC,aAClBlC,EAAgBN,GAChBa,GAAW,GACXF,GAAgB,GAChB8B,IACJ,EAGEC,EAAsBxD,IACxBsB,EAAetB,EAAM,EAGnByD,EAAwBC,YAE1B,OAAQA,GACJ,IAAK,QACDtC,EAAgBN,GAChB,MACJ,IAAK,YACDC,EAAeI,GACfkB,EAAuBlB,GAIfwC,EAAAA,QAAMxC,EAAc,cAAc,GAAMyC,UAIpC,QAAhBnE,EAAAqC,EAASS,eAAO,IAAA9C,GAAAA,EAAE+C,eAEH,QAAfY,EAAAxB,EAAQW,eAAO,IAAAa,GAAAA,EAAES,QAErBpC,GAAgB,EAAM,EAMpBY,EAA0ByB,IACxB7D,GACAA,EAAS6D,EACb,EAGEP,EAAuB,KACrBpD,GACAA,GACJ,EA6DJ,OACI4D,MAACC,EAAAA,oBAAmB,CAChBC,SAAU3D,IAAaV,EACvBsE,OAAQ1C,EACR2C,cA3DY,IAEZJ,EAAAA,IAACK,EAAAA,aAAYC,OAAAC,OAAA,CACTC,KAAK,QACLC,SAAU,EACVC,IAAK7C,EACLzB,OAAQuC,EACRxC,QAASuC,EACT7C,SAAUA,EACVU,SAAUA,EACVoB,QAASA,EACT5B,MAAOA,EACPS,GAAIA,EAAE,cACOK,EAAW,eAAc,gBACvBhB,EACfe,UAAW+D,EAAAA,QAAKC,EAAAA,UAAkBhE,IAC9BC,EAAU,CAAAgE,SAEdb,EAAAA,IAACc,EAAAA,oBAAmB,CAChBJ,IAAK3C,EACLlC,SAAUA,EACVK,SAAUiC,EACV5B,SAAUA,EACVoB,QAASF,EACTsD,MAAO,CAAC,YAAa,cAAe,cACpC9E,MAAOmB,EACP4D,WAAY1D,EACZtB,kBAAmBA,OAiC3BiF,eA3Be,EAAGC,kBAElBlB,EAAAA,IAACmB,EAAAA,iBAAgB,CACbC,QAAQ,SACRV,IAAK1C,EACLqD,oBAAqBjE,EACrBd,WAAYA,EACZL,MAAOmB,EACPtB,cAAeA,EACfH,QAASA,EACTC,QAASA,EACTa,uBAAwBA,EACxB6E,QAAS7B,EACT8B,SAAUhD,EACViD,UAAW9B,EACXrD,yBAA0BA,EAC1BoF,MAAOP,EACPQ,aAAcnF,IAAaV,IAW/B8F,QAjNY,WACA,QAAhBjG,EAAAqC,EAASS,eAAO,IAAA9C,GAAAA,EAAE6D,aAClBlC,EAAgBN,GAChBW,GAAgB,GAChBE,GAAW,GAEX4B,IAGAjC,OAAeC,EAAU,EAyMrBgE,UAtMc,aACF,QAAhB9F,EAAAqC,EAASS,eAAO,IAAA9C,GAAAA,EAAE6D,aACH,QAAfF,EAAAxB,EAAQW,eAAO,IAAAa,GAAAA,EAAES,QACjBzC,EAAgBN,GAChBW,GAAgB,EAAM,EAmMlBkE,aAAclF,EACdmF,OAAQ,GACRC,SAAUnF,GACZ"}
1	+ {"version":3,"file":"date-input.js","sources":["../../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialDate, setInitialDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [selectedDate, setSelectedDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [hoveredDate, setHoveredDate] = useState<string \| undefined>(\n undefined\n );\n const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<StandaloneDateInputRef>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const newValue = DateInputHelper.sanitizeInput(value);\n setInitialDate(newValue);\n setSelectedDate(newValue);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClose = () => {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n setFocused(false);\n\n performOnBlurHandler();\n\n // clear hover value for mobile scrolling\n setHoveredDate(undefined);\n };\n\n const handleDismiss = () => {\n inputRef.current?.resetInput();\n nodeRef.current?.focus();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n };\n\n const handleChange = (val: string) => {\n if (\n !allowDisabledSelection &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n ) {\n return;\n }\n\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n setCalendarOpen(false);\n }\n }\n };\n\n const handleSelect = (val: string) => {\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n inputRef.current?.focusYearRef();\n setCalendarOpen(false);\n }\n\n // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n setHoveredDate(undefined);\n }\n };\n\n const handleFocus = () => {\n if (readOnly \|\| disabled) return;\n\n setCalendarOpen(true);\n\n if (focused) return;\n\n setFocused(true);\n\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setFocused(false);\n setCalendarOpen(false);\n performOnBlurHandler();\n }\n };\n\n const handleHoverDayCell = (value: string) => {\n if (!calendarOpen) return;\n setHoveredDate(value);\n };\n\n const handleCalendarAction = (buttonAction: CalendarAction) => {\n // handle button in day calendar view\n switch (buttonAction) {\n case \"reset\":\n setSelectedDate(initialDate);\n break;\n case \"confirmed\":\n setInitialDate(selectedDate);\n performOnChangeHandler(selectedDate);\n break;\n }\n\n const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n // Focus on year input if the selected date is valid to avoid restarting entire tab order\n if (isValid) {\n inputRef.current?.focusYearRef();\n } else {\n nodeRef.current?.focus();\n }\n setCalendarOpen(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnChangeHandler = (changeValue: string) => {\n if (onChange) {\n onChange(changeValue);\n }\n };\n\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n tabIndex={0}\n ref={nodeRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n disabled={disabled}\n readOnly={readOnly}\n focused={focused}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n className={clsx(styles.container, className)}\n {...otherProps}\n >\n <StandaloneDateInput\n ref={inputRef}\n disabled={disabled}\n onChange={handleChange}\n readOnly={readOnly}\n focused={calendarOpen}\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n value={selectedDate}\n hoverValue={hoveredDate}\n hideInputKeyboard={hideInputKeyboard}\n />\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n ref={calendarRef}\n initialCalendarDate={selectedDate}\n withButton={withButton}\n value={selectedDate}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onHover={handleHoverDayCell}\n onSelect={handleSelect}\n onDismiss={handleCalendarAction}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n onClose={handleClose}\n onDismiss={handleDismiss}\n customZIndex={zIndex}\n offset={16}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"date-navigator.styles.js","sources":["../../../src/date-navigator/date-navigator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const container = css`\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n background-color: ${Colour[\"bg-strong\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const headerArrowButton = css`\n margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const headerArrowButtonIcon = css`\n color: ${Colour[\"icon\"]};\n`;\n\nexport const dateTextButton = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"text\"]};\n cursor: default;\n\n &:not(:disabled) {\n color: ${Colour[\"text-primary\"]};\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus {\n outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-underline-position: under;\n }\n`;\n"],"names":[],"mappings":"~~4GAIsB~~,kCAiBK,qCARG,yCAII"}
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":"2GAIsB,kCAiBK,qCARG,yCAII"}

package/cjs/date-navigator/date-navigator.styles_wokh56.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-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);cursor:default;}.d1pl361j:not(:disabled){color:var(--fds-colour-text-primary);}.d1pl361j:not(:disabled):hover,.d1pl361j:not(:disabled):focus{outline:none;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;text-underline-position:under;}

package/cjs/divider/divider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"divider.js","sources":["../../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle, useResolvedTokenValue } from \"../theme\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n solid: styles.solidLine,\n dashed: styles.dashedLine,\n};\n\nexport const Divider = ({\n thickness = 1,\n lineStyle = \"solid\",\n layoutType = \"flex\",\n color,\n className,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n ...otherProps\n}: DividerProps) => {\n const ref = useRef<HTMLHRElement>(null);\n\n const effectiveColor = useResolvedTokenValue({\n value: color,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const encodedColor = encodeURIComponent(effectiveColor);\n const strokeWidth = thickness + 1; // best fit\n\n useApplyStyle(ref, {\n [styles.tokens.thickness]: `${thickness}px`,\n [styles.tokens.color]: color,\n [styles.tokens.backgroundImage]: `\n url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n });\n\n const getColumnProps = () => {\n const xxsColsProp = xxsCols \|\| [1, -1];\n const xsColsProp = xsCols \|\| xxsColsProp;\n const smColsProp = smCols \|\| xsColsProp;\n const mdColsProp = mdCols \|\| smColsProp;\n const lgColsProp = lgCols \|\| mdColsProp;\n const xlColsProp = xlCols \|\| lgColsProp;\n const xxlColsProp = xxlCols \|\| xlColsProp;\n\n return {\n xxlCols: xxlColsProp,\n xlCols: xlColsProp,\n lgCols: lgColsProp,\n mdCols: mdColsProp,\n smCols: smColsProp,\n xsCols: xsColsProp,\n xxsCols: xxsColsProp,\n };\n };\n\n const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n switch (layoutType) {\n case \"flex\":\n return (\n <hr\n ref={ref}\n className={clsx(lineClass, className)}\n {...otherProps}\n />\n );\n case \"grid\":\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </ColDiv>\n );\n }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"~~isBASA~~,MAAMA,EAAqD,CACvDC,MAAOC,EAAAA,UACPC,OAAQC,EAAAA,4BAGYC,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAA,OAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAAA,OAAsB,MAE5BC,EAAiBC,EAAAA,sBAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAAA,OAAe,OACzBC,QAASC,EAAAA,cACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAAA,cAAcd,EAAK,CACf,CAACe,EAAAA,OAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAAA,OAAc1B,OAAQA,EACvB,CAAC0B,EAAAA,OAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAAA,QAAKC,EAAAA,SAAiBvC,EAAaO,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAAA,QAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAAAA,IAACG,EAAAA,OAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAAA,IAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}
1	+ {"version":3,"file":"divider.js","sources":["../../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport { useResolvedTokenValue } from \"../theme/utils\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n solid: styles.solidLine,\n dashed: styles.dashedLine,\n};\n\nexport const Divider = ({\n thickness = 1,\n lineStyle = \"solid\",\n layoutType = \"flex\",\n color,\n className,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n ...otherProps\n}: DividerProps) => {\n const ref = useRef<HTMLHRElement>(null);\n\n const effectiveColor = useResolvedTokenValue({\n value: color,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const encodedColor = encodeURIComponent(effectiveColor);\n const strokeWidth = thickness + 1; // best fit\n\n useApplyStyle(ref, {\n [styles.tokens.thickness]: `${thickness}px`,\n [styles.tokens.color]: color,\n [styles.tokens.backgroundImage]: `\n url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n });\n\n const getColumnProps = () => {\n const xxsColsProp = xxsCols \|\| [1, -1];\n const xsColsProp = xsCols \|\| xxsColsProp;\n const smColsProp = smCols \|\| xsColsProp;\n const mdColsProp = mdCols \|\| smColsProp;\n const lgColsProp = lgCols \|\| mdColsProp;\n const xlColsProp = xlCols \|\| lgColsProp;\n const xxlColsProp = xxlCols \|\| xlColsProp;\n\n return {\n xxlCols: xxlColsProp,\n xlCols: xlColsProp,\n lgCols: lgColsProp,\n mdCols: mdColsProp,\n smCols: smColsProp,\n xsCols: xsColsProp,\n xxsCols: xxsColsProp,\n };\n };\n\n const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n switch (layoutType) {\n case \"flex\":\n return (\n <hr\n ref={ref}\n className={clsx(lineClass, className)}\n {...otherProps}\n />\n );\n case \"grid\":\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </ColDiv>\n );\n }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"isBAUA,MAAMA,EAAqD,CACvDC,MAAOC,EAAAA,UACPC,OAAQC,EAAAA,4BAGYC,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAA,OAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAAA,OAAsB,MAE5BC,EAAiBC,EAAAA,sBAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAAA,OAAe,OACzBC,QAASC,EAAAA,cACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAAA,cAAcd,EAAK,CACf,CAACe,EAAAA,OAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAAA,OAAc1B,OAAQA,EACvB,CAAC0B,EAAAA,OAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAAA,QAAKC,EAAAA,SAAiBvC,EAAaO,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAAA,QAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAAAA,IAACG,EAAAA,OAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAAA,IAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}

package/cjs/e-signature/e-signature-canvas.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("fabric"),n=require("react"),i=require("styled-components"),u=require("../v3_theme/index.js"),c=require("./e-signature.styles.js");const a=n.forwardRef(((a,s)=>{const{baseImageDataURL:o}=a,l=n.useRef(null),d=n.useRef(null),v=n.useRef(),f=n.useRef(),h=n.useContext(i.ThemeContext);n.useImperativeHandle(s,(()=>({clear:()=>{var e;return null===(e=v.current)||void 0===e?void 0:e.clear()},export:()=>w()})));const w=()=>{if(!v.current)return null;if(!v.current.getObjects().length)return null;return v.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},g=n.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(yield new Promise((e=>setTimeout(e))),l.current&&d.current&&v.current){const e=l.current.clientWidth,r=l.current.clientHeight;d.current.width=e,d.current.height=r,v.current.setDimensions({width:e,height:r}),v.current.forEachObject((e=>{v.current&&v.current.centerObject(e)}))}}))),[]);return n.useEffect((()=>{if(l.current&&d.current)return v.current=new t.Canvas("eSignatureCanvas"),v.current.selection=!1,v.current.isDrawingMode=!0,f.current=new t.PencilBrush(v.current),f.current.color=u.V3_Colour.text({theme:h}),f.current.width=3,v.current.freeDrawingBrush=f.current,()=>{var e;null===(e=v.current)||void 0===e||e.dispose()}}),[]),n.useEffect((()=>{var e;if(window)return window.addEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.addEventListener("change",g),g(),()=>{var e;window.removeEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.removeEventListener("change",g)}}),[g]),n.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){if(o){const e=yield t.FabricImage.fromURL(o);v.current&&(v.current.clear(),e.selectable=!1,e.hoverCursor="default",v.current.width&&e.width&&e.scale(v.current.width/e.width),v.current.add(e),v.current.centerObject(e))}}))}),[o]),r.jsx(c.SignatureCanvasContainer,{ref:l,children:r.jsx(c.SignatureCanvas,{id:"eSignatureCanvas",ref:d})})}));exports.ESignatureCanvas=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("fabric"),n=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var i=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("../theme/utils/use-design-token.js");require("../theme/utils/use-media-query.js");var s=require("./e-signature.styles.js");const a=n.forwardRef(((a,c)=>{const{baseImageDataURL:o}=a,l=n.useRef(null),d=n.useRef(null),v=n.useRef(),h=n.useRef(),f=u.useDesignToken(i.Colour.text);n.useImperativeHandle(c,(()=>({clear:()=>{var e;return null===(e=v.current)||void 0===e?void 0:e.clear()},export:()=>m()})));const m=()=>{if(!v.current)return null;if(!v.current.getObjects().length)return null;return v.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},g=n.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(yield new Promise((e=>setTimeout(e))),l.current&&d.current&&v.current){const e=l.current.clientWidth,r=l.current.clientHeight;d.current.width=e,d.current.height=r,v.current.setDimensions({width:e,height:r}),v.current.forEachObject((e=>{v.current&&v.current.centerObject(e)}))}}))),[]);return n.useEffect((()=>{if(l.current&&d.current)return v.current=new t.Canvas("eSignatureCanvas"),v.current.selection=!1,v.current.isDrawingMode=!0,h.current=new t.PencilBrush(v.current),h.current.color=f||"#000000",h.current.width=3,v.current.freeDrawingBrush=h.current,()=>{var e;null===(e=v.current)||void 0===e||e.dispose()}}),[]),n.useEffect((()=>{var e;if(window)return window.addEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.addEventListener("change",g),g(),()=>{var e;window.removeEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.removeEventListener("change",g)}}),[g]),n.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){if(o){const e=yield t.FabricImage.fromURL(o);v.current&&(v.current.clear(),e.selectable=!1,e.hoverCursor="default",v.current.width&&e.width&&e.scale(v.current.width/e.width),v.current.add(e),v.current.centerObject(e))}}))}),[o]),r.jsx("div",{className:s.signatureCanvasContainer,ref:l,children:r.jsx("canvas",{className:s.signatureCanvas,id:"eSignatureCanvas",ref:d})})}));exports.ESignatureCanvas=a;
 //# sourceMappingURL=e-signature-canvas.js.map

package/cjs/e-signature/e-signature-canvas.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"e-signature-canvas.js","sources":["../../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport type { Ref } from \"react\";\nimport {\n forwardRef,\n useCallback,\n ~~useContext,\n~~ useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\~~nimport { ThemeContext } from \"styled-components\";\~~n\nimport { ~~V3_Colour~~ } from \"../~~v3_theme~~\";\nimport ~~{\n SignatureCanvas,\n SignatureCanvasContainer,\n}~~ from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n baseImageDataURL?: string \| null \| undefined;\n forwardedRef?: Ref<ESignatureCanvasRef> \| undefined;\n}\n\nexport interface ESignatureCanvasRef {\n clear: VoidFunction;\n export: () => string \| null;\n}\n\nconst Component = (\n props: ESignatureCanvasProps,\n ref: Ref<ESignatureCanvasRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { baseImageDataURL } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const fabricCanvas = useRef<FabricCanvas>();\n const pencilBrush = useRef<PencilBrush>();\n const ~~theme~~ = ~~useContext~~(~~ThemeContext~~);\n\n // =============================================================================\n // HOOKS\n // =============================================================================\n useImperativeHandle(ref, () => ({\n clear: () => fabricCanvas.current?.clear(),\n export: () => exportAsImage(),\n }));\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const exportAsImage = () => {\n if (!fabricCanvas.current) return null;\n if (!fabricCanvas.current.getObjects().length) return null;\n const dataURL = fabricCanvas.current.toDataURL({\n multiplier: 1,\n format: \"png\",\n quality: 1,\n enableRetinaScaling: true,\n });\n return dataURL;\n };\n\n const handleResize = useCallback(async () => {\n // slight delay for fabricjs to update on orientation change\n await new Promise((resolve) => setTimeout(resolve));\n if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n const canvasWidth = containerRef.current.clientWidth;\n const canvasHeight = containerRef.current.clientHeight;\n canvasRef.current.width = canvasWidth;\n canvasRef.current.height = canvasHeight;\n fabricCanvas.current.setDimensions({\n width: canvasWidth,\n height: canvasHeight,\n });\n\n fabricCanvas.current.forEachObject((obj) => {\n if (fabricCanvas.current) {\n fabricCanvas.current.centerObject(obj);\n }\n });\n }\n }, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n // initialise fabric and brushes\n useEffect(() => {\n if (containerRef.current && canvasRef.current) {\n fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n fabricCanvas.current.selection = false;\n fabricCanvas.current.isDrawingMode = true;\n\n pencilBrush.current = new PencilBrush(fabricCanvas.current);\n pencilBrush.current.color = ~~V3_Colour[~~\"~~text~~\"~~]({ theme })~~;\n pencilBrush.current.width = 3;\n\n fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n return () => {\n fabricCanvas.current?.dispose();\n };\n }\n }, []);\n\n // resize\n useEffect(() => {\n if (window) {\n window.addEventListener(\"resize\", handleResize);\n screen.orientation?.addEventListener(\"change\", handleResize);\n handleResize();\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n screen.orientation?.removeEventListener(\"change\", handleResize);\n };\n }\n }, [handleResize]);\n\n // update base image\n useEffect(() => {\n const updateImage = async () => {\n if (baseImageDataURL) {\n const img = await FabricImage.fromURL(baseImageDataURL);\n if (fabricCanvas.current) {\n fabricCanvas.current.clear();\n img.selectable = false;\n img.hoverCursor = \"default\";\n\n if (fabricCanvas.current.width && img.width) {\n img.scale(fabricCanvas.current.width / img.width);\n }\n fabricCanvas.current.add(img);\n fabricCanvas.current.centerObject(img);\n }\n }\n };\n\n updateImage();\n }, [baseImageDataURL]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <~~SignatureCanvasContainer~~ ref={containerRef}>\n <~~SignatureCanvas~~ id=\"eSignatureCanvas\" ref={canvasRef} />\n </~~SignatureCanvasContainer~~>\n );\n};\n\nexport const ESignatureCanvas = forwardRef<\n ESignatureCanvasRef,\n ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","~~theme~~","~~useContext~~","~~ThemeContext~~","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","~~V3_Colour","~~freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","~~SignatureCanvasContainer~~","~~SignatureCanvas~~","id"],"mappings":"~~gOA4BA~~,~~MA6HaA~~,EAAmBC,EAAAA,~~YA7Hd~~,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAAA,OAAuB,MACtCC,EAAYD,EAAAA,OAA0B,MACtCE,EAAeF,EAAAA,SACfG,EAAcH,EAAAA,SACdI,~~EAAQC~~,EAAAA,~~WAAWC~~,~~gBAKzBC~~,EAAAA,oBAAoBV,GAAK,KAAA,CACrBW,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAP,EAAaQ,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKV,EAAaQ,QAAS,OAAO,KAClC,IAAKR,EAAaQ,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBZ,EAAaQ,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,EAAAA,aAAY,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtCzB,EAAaW,SAAWT,EAAUS,SAAWR,EAAaQ,QAAS,CACnE,MAAMgB,EAAc3B,EAAaW,QAAQiB,YACnCC,EAAe7B,EAAaW,QAAQmB,aAC1C5B,EAAUS,QAAQoB,MAAQJ,EAC1BzB,EAAUS,QAAQqB,OAASH,EAC3B1B,EAAaQ,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ1B,EAAaQ,QAAQuB,eAAeC,IAC5BhC,EAAaQ,SACbR,EAAaQ,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IA8DH,OAxDAE,EAAAA,WAAU,KACN,GAAIrC,EAAaW,SAAWT,EAAUS,QAWlC,OAVAR,EAAaQ,QAAU,IAAI2B,EAAAA,OAAa,oBACxCnC,EAAaQ,QAAQ4B,WAAY,EACjCpC,EAAaQ,QAAQ6B,eAAgB,EAErCpC,EAAYO,QAAU,IAAI8B,cAAYtC,EAAaQ,SACnDP,EAAYO,QAAQ+B,~~MAAQC~~,~~EAAAA~~,~~UAAgB~~,~~KAAE,CAAEtC,UAChDD,~~EAAYO,QAAQoB,MAAQ,EAE5B5B,EAAaQ,~~QAAQiC~~,~~iBAAmBxC~~,EAAYO,QAE7C,WACiB,QAApBD,EAAAP,EAAaQ,eAAO,IAAAD,GAAAA,~~EAAEmC~~,SAAS,CAEvC,GACD,~~IAGHR~~,EAAAA,WAAU,WACN,~~GAAIS~~,OAIA,OAHAA,OAAOC,iBAAiB,~~SAAU1B~~,GAChB,QAAlBX,~~EAAAsC~~,OAAOC,mBAAW,~~IAAAvC~~,GAAAA,~~EAAEqC~~,iBAAiB,~~SAAU1B~~,GAC/CA,IACO,~~WACHyB~~,OAAOI,oBAAoB,~~SAAU7B~~,GACnB,QAAlBX,~~EAAAsC~~,OAAOC,mBAAW,~~IAAAvC~~,GAAAA,~~EAAEwC~~,oBAAoB,~~SAAU7B~~,EAAa,CAEvE,GACD,CAACA,IAGJgB,EAAAA,WAAU,KACyBd,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC3B,GAAIxB,EAAkB,CAClB,~~MAAMoD~~,QAAYC,cAAYC,~~QAAQtD~~,GAClCI,EAAaQ,UACbR,EAAaQ,QAAQF,~~QACrB0C~~,EAAIG,YAAa,EACjBH,EAAII,YAAc,~~UAEdpD~~,EAAaQ,QAAQoB,~~OAASoB~~,~~EAAIpB~~,~~OAClCoB~~,EAAIK,~~MAAMrD~~,EAAaQ,QAAQoB,~~MAAQoB~~,~~EAAIpB~~,OAE/C5B,EAAaQ,~~QAAQ8C~~,IAAIN,~~GACzBhD~~,EAAaQ,QAAQyB,~~aAAae~~,GAE1C,CACJ,GAEa,GACd,~~CAACpD~~,~~IAMA2D~~,EAAAA,~~IAACC~~,EAAAA,~~yBAAwB~~,~~CAAC7D,~~IAAKE,~~WAC3B0D~~,EAAAA,~~IAACE~~,EAAAA,~~iBAAgBC~~,GAAG,~~mBAAmB/D~~,IAAKI,~~KACrB~~"}
1	+ {"version":3,"file":"e-signature-canvas.js","sources":["../../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport type { Ref } from \"react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\n\nimport { Colour, useDesignToken } from \"../theme\";\nimport * as styles from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n baseImageDataURL?: string \| null \| undefined;\n forwardedRef?: Ref<ESignatureCanvasRef> \| undefined;\n}\n\nexport interface ESignatureCanvasRef {\n clear: VoidFunction;\n export: () => string \| null;\n}\n\nconst Component = (\n props: ESignatureCanvasProps,\n ref: Ref<ESignatureCanvasRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { baseImageDataURL } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const fabricCanvas = useRef<FabricCanvas>();\n const pencilBrush = useRef<PencilBrush>();\n const resolvedColor = useDesignToken(Colour[\"text\"]);\n\n // =============================================================================\n // HOOKS\n // =============================================================================\n useImperativeHandle(ref, () => ({\n clear: () => fabricCanvas.current?.clear(),\n export: () => exportAsImage(),\n }));\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const exportAsImage = () => {\n if (!fabricCanvas.current) return null;\n if (!fabricCanvas.current.getObjects().length) return null;\n const dataURL = fabricCanvas.current.toDataURL({\n multiplier: 1,\n format: \"png\",\n quality: 1,\n enableRetinaScaling: true,\n });\n return dataURL;\n };\n\n const handleResize = useCallback(async () => {\n // slight delay for fabricjs to update on orientation change\n await new Promise((resolve) => setTimeout(resolve));\n if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n const canvasWidth = containerRef.current.clientWidth;\n const canvasHeight = containerRef.current.clientHeight;\n canvasRef.current.width = canvasWidth;\n canvasRef.current.height = canvasHeight;\n fabricCanvas.current.setDimensions({\n width: canvasWidth,\n height: canvasHeight,\n });\n\n fabricCanvas.current.forEachObject((obj) => {\n if (fabricCanvas.current) {\n fabricCanvas.current.centerObject(obj);\n }\n });\n }\n }, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n // initialise fabric and brushes\n useEffect(() => {\n if (containerRef.current && canvasRef.current) {\n fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n fabricCanvas.current.selection = false;\n fabricCanvas.current.isDrawingMode = true;\n\n pencilBrush.current = new PencilBrush(fabricCanvas.current);\n pencilBrush.current.color = resolvedColor \|\| \"#000000\";\n pencilBrush.current.width = 3;\n\n fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n return () => {\n fabricCanvas.current?.dispose();\n };\n }\n }, []);\n\n // resize\n useEffect(() => {\n if (window) {\n window.addEventListener(\"resize\", handleResize);\n screen.orientation?.addEventListener(\"change\", handleResize);\n handleResize();\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n screen.orientation?.removeEventListener(\"change\", handleResize);\n };\n }\n }, [handleResize]);\n\n // update base image\n useEffect(() => {\n const updateImage = async () => {\n if (baseImageDataURL) {\n const img = await FabricImage.fromURL(baseImageDataURL);\n if (fabricCanvas.current) {\n fabricCanvas.current.clear();\n img.selectable = false;\n img.hoverCursor = \"default\";\n\n if (fabricCanvas.current.width && img.width) {\n img.scale(fabricCanvas.current.width / img.width);\n }\n fabricCanvas.current.add(img);\n fabricCanvas.current.centerObject(img);\n }\n }\n };\n\n updateImage();\n }, [baseImageDataURL]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div className={styles.signatureCanvasContainer} ref={containerRef}>\n <canvas\n className={styles.signatureCanvas}\n id=\"eSignatureCanvas\"\n ref={canvasRef}\n />\n </div>\n );\n};\n\nexport const ESignatureCanvas = forwardRef<\n ESignatureCanvasRef,\n ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","resolvedColor","useDesignToken","Colour","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","className","styles.signatureCanvasContainer","children","styles.signatureCanvas","id"],"mappings":"+rBAuBA,MAiIaA,EAAmBC,EAAAA,YAjId,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAAA,OAAuB,MACtCC,EAAYD,EAAAA,OAA0B,MACtCE,EAAeF,EAAAA,SACfG,EAAcH,EAAAA,SACdI,EAAgBC,EAAAA,eAAeC,EAAAA,OAAa,MAKlDC,EAAAA,oBAAoBV,GAAK,KAAA,CACrBW,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAP,EAAaQ,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKV,EAAaQ,QAAS,OAAO,KAClC,IAAKR,EAAaQ,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBZ,EAAaQ,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,EAAAA,aAAY,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtCzB,EAAaW,SAAWT,EAAUS,SAAWR,EAAaQ,QAAS,CACnE,MAAMgB,EAAc3B,EAAaW,QAAQiB,YACnCC,EAAe7B,EAAaW,QAAQmB,aAC1C5B,EAAUS,QAAQoB,MAAQJ,EAC1BzB,EAAUS,QAAQqB,OAASH,EAC3B1B,EAAaQ,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ1B,EAAaQ,QAAQuB,eAAeC,IAC5BhC,EAAaQ,SACbR,EAAaQ,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IA8DH,OAxDAE,EAAAA,WAAU,KACN,GAAIrC,EAAaW,SAAWT,EAAUS,QAWlC,OAVAR,EAAaQ,QAAU,IAAI2B,EAAAA,OAAa,oBACxCnC,EAAaQ,QAAQ4B,WAAY,EACjCpC,EAAaQ,QAAQ6B,eAAgB,EAErCpC,EAAYO,QAAU,IAAI8B,cAAYtC,EAAaQ,SACnDP,EAAYO,QAAQ+B,MAAQrC,GAAiB,UAC7CD,EAAYO,QAAQoB,MAAQ,EAE5B5B,EAAaQ,QAAQgC,iBAAmBvC,EAAYO,QAE7C,WACiB,QAApBD,EAAAP,EAAaQ,eAAO,IAAAD,GAAAA,EAAEkC,SAAS,CAEvC,GACD,IAGHP,EAAAA,WAAU,WACN,GAAIQ,OAIA,OAHAA,OAAOC,iBAAiB,SAAUzB,GAChB,QAAlBX,EAAAqC,OAAOC,mBAAW,IAAAtC,GAAAA,EAAEoC,iBAAiB,SAAUzB,GAC/CA,IACO,WACHwB,OAAOI,oBAAoB,SAAU5B,GACnB,QAAlBX,EAAAqC,OAAOC,mBAAW,IAAAtC,GAAAA,EAAEuC,oBAAoB,SAAU5B,EAAa,CAEvE,GACD,CAACA,IAGJgB,EAAAA,WAAU,KACyBd,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC3B,GAAIxB,EAAkB,CAClB,MAAMmD,QAAYC,cAAYC,QAAQrD,GAClCI,EAAaQ,UACbR,EAAaQ,QAAQF,QACrByC,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdnD,EAAaQ,QAAQoB,OAASmB,EAAInB,OAClCmB,EAAIK,MAAMpD,EAAaQ,QAAQoB,MAAQmB,EAAInB,OAE/C5B,EAAaQ,QAAQ6C,IAAIN,GACzB/C,EAAaQ,QAAQyB,aAAac,GAE1C,CACJ,GAEa,GACd,CAACnD,IAMA0D,EAAAA,IAAA,MAAA,CAAKC,UAAWC,EAAAA,yBAAiC7D,IAAKE,EAAY4D,SAC9DH,EAAAA,IAAA,SAAA,CACIC,UAAWG,EAAAA,gBACXC,GAAG,mBACHhE,IAAKI,KAEP"}

package/cjs/e-signature/e-signature.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),s=require("react"),t=require("../shared/progress-bar/progress-bar.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var a=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("../theme/utils/use-media-query.js"),l=require("../typography/index.js"),u=require("./e-signature.styles.js");const o=s.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./e-signature-canvas.js")}))).ESignatureCanvas}})))),{AddSignatureButton:d,EditSignatureButton:c,ESignatureContainer:g,ESignatureDrawable:j,GrowContainer:h,Instructions:x,ModalActionButton:p,ModalBox:m,ModalButtons:y,ModalTitle:b,ProgressBox:v,ScrollableModal:q,SignatureArea:f,SignatureLine:S,SignaturePreviewImage:k}=u;exports.ESignature=u=>{const{description:B,id:C,loadingProgress:E,loadingLabel:M="Uploading...",onChange:T,value:_,disabled:A}=u,I=e.__rest(u,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[P,w]=s.useState(!1),L=s.useRef(null),[D,R]=s.useState(_),z=n.useMaxWidthMediaQuery("sm"),O=n.useResolvedBreakpointToken(a.Breakpoint["sm-max"],n.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT),U=n.useMediaQuery({clauses:[{feature:"orientation",value:"landscape"},{feature:"max-height",value:O}]}),F=()=>{var e;null===(e=L.current)||void 0===e||e.clear()},Q=()=>{if(L.current){const e=L.current.export();R(e),w(!1),null==T||T(e)}};s.useEffect((()=>{R(_)}),[_]);return r.jsxs("div",Object.assign({},I,{children:[r.jsx(f,{$disabled:A,children:"number"==typeof E?r.jsxs(v,{children:[M&&r.jsx(l.Typography.BodyMD,{children:M}),r.jsx(t.ProgressBar,{progress:null!=E?E:0,"data-testid":`${C||"e-signature"}-progress-bar`})]}):D?r.jsxs(r.Fragment,{children:[r.jsx(k,{src:D,alt:"Signature preview"}),r.jsx(c,{styleType:"light",onClick:()=>w(!0),id:C,icon:r.jsx(i.PencilIcon,{}),"aria-label":"Edit signature",disabled:A})]}):r.jsx(d,{type:"button",styleType:"secondary","aria-label":"Add signature",id:C,onClick:()=>w(!0),disabled:A,children:"Add signature"})}),r.jsx(q,{"data-testid":"signature-modal",show:P,children:r.jsx(h,{children:r.jsxs(m,{onClose:()=>w(!1),children:[r.jsx(b,{children:"Signature"}),r.jsx(g,{children:r.jsxs(j,{children:[r.jsx(S,{}),r.jsx(s.Suspense,{fallback:null,children:P&&r.jsx(o,{ref:L,baseImageDataURL:D})})]})}),r.jsxs(y,{children:[r.jsx(p,{sizeType:U?"small":"default",type:"button",styleType:z&&!U?"light":"link",icon:r.jsx(i.EraserIcon,{}),onClick:F,children:"Clear"}),r.jsx(p,{sizeType:U?"small":"default",type:"button",onClick:Q,children:"Save"})]})]})})}),B?r.jsx(x,{children:B}):null]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),s=require("react"),i=require("../button/button.js"),t=require("../dashed-border/dashed-border.js"),l=require("../modal/index.js"),n=require("../shared/progress-bar/progress-bar.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var o=require("../theme/tokens/border.js"),d=require("../theme/tokens/breakpoint.js"),u=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var c=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var m=require("../theme/utils/use-media-query.js"),g=require("../typography/index.js"),h=require("./e-signature.styles.js");const j=s.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./e-signature-canvas.js")}))).ESignatureCanvas}}))));exports.ESignature=p=>{const{description:b,id:x,loadingProgress:v,loadingLabel:y="Uploading...",onChange:q,value:B,disabled:k}=p,f=e.__rest(p,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[C,N]=s.useState(!1),S=s.useRef(null),[T,M]=s.useState(B),w=m.useMaxWidthMediaQuery("sm"),P=m.useResolvedBreakpointToken(d.Breakpoint["sm-max"]),_=m.useMediaQuery({clauses:[{feature:"orientation",value:"landscape"},{feature:"max-height",value:P}]}),A=()=>{var e;null===(e=S.current)||void 0===e||e.clear()},E=()=>{if(S.current){const e=S.current.export();M(e),N(!1),null==q||q(e)}};s.useEffect((()=>{M(B)}),[B]);return a.jsxs("div",Object.assign({},f,{children:[a.jsx(t.DashedBorder,{className:h.signatureArea,thickness:o.Border["width-040"],radius:c.Radius.sm,colour:k?u.Colour["border-disabled"]:u.Colour.border,backgroundColor:k?u.Colour["bg-disabled"]:u.Colour.bg,children:"number"==typeof v?a.jsxs("div",{className:h.progressBox,children:[y&&a.jsx(g.Typography.BodyMD,{children:y}),a.jsx(n.ProgressBar,{progress:null!=v?v:0,"data-testid":`${x||"e-signature"}-progress-bar`})]}):T?a.jsxs(a.Fragment,{children:[a.jsx("img",{className:h.signaturePreviewImage,src:T,alt:"Signature preview"}),a.jsx(i.Button,{className:h.editSignatureButton,styleType:"light",onClick:()=>N(!0),id:x,icon:a.jsx(r.PencilIcon,{}),"aria-label":"Edit signature",disabled:k})]}):a.jsx(i.Button,{className:h.addSignatureButton,type:"button",styleType:"secondary","aria-label":"Add signature",id:x,onClick:()=>N(!0),disabled:k,children:"Add signature"})}),a.jsx(l.Modal,{className:h.scrollableModal,"data-testid":"signature-modal",show:C,children:a.jsx("div",{className:h.growContainer,"data-mobile-landscape":_,children:a.jsxs(l.Modal.Box,{className:h.modalBox,"data-mobile-landscape":_,onClose:()=>N(!1),children:[a.jsx("h2",{className:h.modalTitle,"data-mobile-landscape":_,children:"Signature"}),a.jsx("div",{className:h.eSignatureContainer,"data-mobile-landscape":_,children:a.jsxs("div",{className:h.eSignatureDrawable,"data-mobile-landscape":_,children:[a.jsx("div",{className:h.signatureLine,"data-mobile-landscape":_}),a.jsx(s.Suspense,{fallback:null,children:C&&a.jsx(j,{ref:S,baseImageDataURL:T})})]})}),a.jsxs("div",{className:h.modalButtons,"data-mobile-landscape":_,children:[a.jsx(i.Button,{className:h.modalActionButton,"data-mobile-landscape":_,sizeType:_?"small":"default",type:"button",styleType:w&&!_?"light":"link",icon:a.jsx(r.EraserIcon,{}),onClick:A,children:"Clear"}),a.jsx(i.Button,{className:h.modalActionButton,"data-mobile-landscape":_,sizeType:_?"small":"default",type:"button",onClick:E,children:"Save"})]})]})})}),b?a.jsx(g.Typography.BodySM,{className:h.instructions,children:b}):null]}))};
 //# sourceMappingURL=e-signature.js.map

package/cjs/e-signature/e-signature.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"e-signature.js","sources":["../../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport {\n Breakpoint,\n DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,\n useMaxWidthMediaQuery,\n useMediaQuery,\n useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\nconst {\n AddSignatureButton,\n EditSignatureButton,\n ESignatureContainer,\n ESignatureDrawable,\n GrowContainer,\n Instructions,\n ModalActionButton,\n ModalBox,\n ModalButtons,\n ModalTitle,\n ProgressBox,\n ScrollableModal,\n SignatureArea,\n SignatureLine,\n SignaturePreviewImage,\n} = styles;\n\nexport const ESignature = (props: EsignatureProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n description,\n id,\n loadingProgress,\n loadingLabel = \"Uploading...\",\n onChange,\n value,\n disabled,\n ...otherProps\n } = props;\n const [showModal, setShowModal] = useState(false);\n const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n const [dataURL, setDataURL] = useState<string \| null \| undefined>(value);\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const mobileBreakpoint = useResolvedBreakpointToken(\n Breakpoint[\"sm-max\"],\n DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT\n );\n const isMobileLandscape = useMediaQuery({\n clauses: [\n {\n feature: \"orientation\",\n value: \"landscape\",\n },\n {\n feature: \"max-height\",\n value: mobileBreakpoint,\n },\n ],\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClearDrawing = () => {\n eSignatureCanvasRef.current?.clear();\n };\n\n const handleClickSave = () => {\n if (eSignatureCanvasRef.current) {\n const dataURL = eSignatureCanvasRef.current.export();\n setDataURL(dataURL);\n setShowModal(false);\n onChange?.(dataURL);\n }\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setDataURL(value);\n }, [value]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderSignatureArea = () => {\n if (!dataURL) {\n return (\n <AddSignatureButton\n type=\"button\"\n styleType=\"secondary\"\n aria-label=\"Add signature\"\n id={id}\n onClick={() => setShowModal(true)}\n disabled={disabled}\n >\n Add signature\n </AddSignatureButton>\n );\n }\n\n return (\n <>\n <SignaturePreviewImage src={dataURL} alt=\"Signature preview\" />\n <EditSignatureButton\n styleType=\"light\"\n onClick={() => setShowModal(true)}\n id={id}\n icon={<PencilIcon />}\n aria-label=\"Edit signature\"\n disabled={disabled}\n />\n </>\n );\n };\n\n const renderLoadingIndicator = () => {\n return (\n <ProgressBox>\n {loadingLabel && (\n <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n )}\n <ProgressBar\n progress={loadingProgress ?? 0}\n data-testid={`${id \|\| \"e-signature\"}-progress-bar`}\n />\n </ProgressBox>\n );\n };\n\n const renderModal = () => {\n return (\n <ScrollableModal data-testid=\"signature-modal\" show={showModal}>\n <GrowContainer>\n <ModalBox onClose={() => setShowModal(false)}>\n <ModalTitle>Signature</ModalTitle>\n <ESignatureContainer>\n <ESignatureDrawable>\n <SignatureLine />\n <Suspense fallback={null}>\n {showModal && (\n <ESignatureCanvas\n ref={eSignatureCanvasRef}\n baseImageDataURL={dataURL}\n />\n )}\n </Suspense>\n </ESignatureDrawable>\n </ESignatureContainer>\n <ModalButtons>\n <ModalActionButton\n sizeType={\n isMobileLandscape ? \"small\" : \"default\"\n }\n type=\"button\"\n styleType={\n isMobile && !isMobileLandscape\n ? \"light\"\n : \"link\"\n }\n icon={<EraserIcon />}\n onClick={handleClearDrawing}\n >\n Clear\n </ModalActionButton>\n <ModalActionButton\n sizeType={\n isMobileLandscape ? \"small\" : \"default\"\n }\n type=\"button\"\n onClick={handleClickSave}\n >\n Save\n </ModalActionButton>\n </ModalButtons>\n </ModalBox>\n </GrowContainer>\n </ScrollableModal>\n );\n };\n\n const renderDescription = () => {\n if (!description) return null;\n return <Instructions>{description}</Instructions>;\n };\n\n return (\n <div {...otherProps}>\n <SignatureArea $disabled={disabled}>\n {typeof loadingProgress === \"number\"\n ? renderLoadingIndicator()\n : renderSignatureArea()}\n </SignatureArea>\n {renderModal()}\n {renderDescription()}\n </div>\n );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","Promise","AddSignatureButton","EditSignatureButton","ESignatureContainer","ESignatureDrawable","GrowContainer","Instructions","ModalActionButton","ModalBox","ModalButtons","ModalTitle","ProgressBox","ScrollableModal","SignatureArea","SignatureLine","SignaturePreviewImage","styles","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","isMobile","useMaxWidthMediaQuery","mobileBreakpoint","useResolvedBreakpointToken","Breakpoint","DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT","isMobileLandscape","useMediaQuery","clauses","feature","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","$disabled","Typography","BodyMD","ProgressBar","progress","src","alt","styleType","onClick","icon","PencilIcon","type","show","onClose","Suspense","fallback","ref","baseImageDataURL","sizeType","EraserIcon"],"mappings":"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"}
1	+ {"version":3,"file":"e-signature.js","sources":["../../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { DashedBorder } from \"../dashed-border\";\nimport { Modal } from \"../modal\";\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport {\n Border,\n Breakpoint,\n Colour,\n Radius,\n useMaxWidthMediaQuery,\n useMediaQuery,\n useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\nexport const ESignature = (props: EsignatureProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n description,\n id,\n loadingProgress,\n loadingLabel = \"Uploading...\",\n onChange,\n value,\n disabled,\n ...otherProps\n } = props;\n const [showModal, setShowModal] = useState(false);\n const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n const [dataURL, setDataURL] = useState<string \| null \| undefined>(value);\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n const mobileBreakpoint = useResolvedBreakpointToken(Breakpoint[\"sm-max\"]);\n const isMobileLandscape = useMediaQuery({\n clauses: [\n {\n feature: \"orientation\",\n value: \"landscape\",\n },\n {\n feature: \"max-height\",\n value: mobileBreakpoint,\n },\n ],\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClearDrawing = () => {\n eSignatureCanvasRef.current?.clear();\n };\n\n const handleClickSave = () => {\n if (eSignatureCanvasRef.current) {\n const dataURL = eSignatureCanvasRef.current.export();\n setDataURL(dataURL);\n setShowModal(false);\n onChange?.(dataURL);\n }\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setDataURL(value);\n }, [value]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderSignatureArea = () => {\n if (!dataURL) {\n return (\n <Button\n className={styles.addSignatureButton}\n type=\"button\"\n styleType=\"secondary\"\n aria-label=\"Add signature\"\n id={id}\n onClick={() => setShowModal(true)}\n disabled={disabled}\n >\n Add signature\n </Button>\n );\n }\n\n return (\n <>\n <img\n className={styles.signaturePreviewImage}\n src={dataURL}\n alt=\"Signature preview\"\n />\n <Button\n className={styles.editSignatureButton}\n styleType=\"light\"\n onClick={() => setShowModal(true)}\n id={id}\n icon={<PencilIcon />}\n aria-label=\"Edit signature\"\n disabled={disabled}\n />\n </>\n );\n };\n\n const renderLoadingIndicator = () => {\n return (\n <div className={styles.progressBox}>\n {loadingLabel && (\n <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n )}\n <ProgressBar\n progress={loadingProgress ?? 0}\n data-testid={`${id \|\| \"e-signature\"}-progress-bar`}\n />\n </div>\n );\n };\n\n const renderModal = () => {\n return (\n <Modal\n className={styles.scrollableModal}\n data-testid=\"signature-modal\"\n show={showModal}\n >\n <div\n className={styles.growContainer}\n data-mobile-landscape={isMobileLandscape}\n >\n <Modal.Box\n className={styles.modalBox}\n data-mobile-landscape={isMobileLandscape}\n onClose={() => setShowModal(false)}\n >\n <h2\n className={styles.modalTitle}\n data-mobile-landscape={isMobileLandscape}\n >\n Signature\n </h2>\n <div\n className={styles.eSignatureContainer}\n data-mobile-landscape={isMobileLandscape}\n >\n <div\n className={styles.eSignatureDrawable}\n data-mobile-landscape={isMobileLandscape}\n >\n <div\n className={styles.signatureLine}\n data-mobile-landscape={isMobileLandscape}\n />\n <Suspense fallback={null}>\n {showModal && (\n <ESignatureCanvas\n ref={eSignatureCanvasRef}\n baseImageDataURL={dataURL}\n />\n )}\n </Suspense>\n </div>\n </div>\n <div\n className={styles.modalButtons}\n data-mobile-landscape={isMobileLandscape}\n >\n <Button\n className={styles.modalActionButton}\n data-mobile-landscape={isMobileLandscape}\n sizeType={\n isMobileLandscape ? \"small\" : \"default\"\n }\n type=\"button\"\n styleType={\n isMobile && !isMobileLandscape\n ? \"light\"\n : \"link\"\n }\n icon={<EraserIcon />}\n onClick={handleClearDrawing}\n >\n Clear\n </Button>\n <Button\n className={styles.modalActionButton}\n data-mobile-landscape={isMobileLandscape}\n sizeType={\n isMobileLandscape ? \"small\" : \"default\"\n }\n type=\"button\"\n onClick={handleClickSave}\n >\n Save\n </Button>\n </div>\n </Modal.Box>\n </div>\n </Modal>\n );\n };\n\n const renderDescription = () => {\n if (!description) return null;\n return (\n <Typography.BodySM className={styles.instructions}>\n {description}\n </Typography.BodySM>\n );\n };\n\n return (\n <div {...otherProps}>\n <DashedBorder\n className={styles.signatureArea}\n thickness={Border[\"width-040\"]}\n radius={Radius[\"sm\"]}\n colour={disabled ? Colour[\"border-disabled\"] : Colour[\"border\"]}\n backgroundColor={\n disabled ? Colour[\"bg-disabled\"] : Colour[\"bg\"]\n }\n >\n {typeof loadingProgress === \"number\"\n ? renderLoadingIndicator()\n : renderSignatureArea()}\n </DashedBorder>\n {renderModal()}\n {renderDescription()}\n </div>\n );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","Promise","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","isMobile","useMaxWidthMediaQuery","mobileBreakpoint","useResolvedBreakpointToken","Breakpoint","isMobileLandscape","useMediaQuery","clauses","feature","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","DashedBorder","className","styles.signatureArea","thickness","Border","radius","Radius","colour","Colour","backgroundColor","styles.progressBox","Typography","BodyMD","ProgressBar","progress","_Fragment","styles.signaturePreviewImage","src","alt","Button","styles.editSignatureButton","styleType","onClick","icon","PencilIcon","styles.addSignatureButton","type","Modal","styles.scrollableModal","show","styles.growContainer","Box","styles.modalBox","onClose","styles.modalTitle","styles.eSignatureContainer","styles.eSignatureDrawable","styles.signatureLine","Suspense","fallback","ref","baseImageDataURL","styles.modalButtons","styles.modalActionButton","sizeType","EraserIcon","BodySM","styles.instructions"],"mappings":"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"}