@danske/sapphire-react-lab 0.86.3 → 0.87.1
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.
- package/build/cjs/index.js +228 -274
- package/build/cjs/index.js.map +1 -1
- package/build/esm/AlertDialog/src/AlertDialog.js.map +1 -1
- package/build/esm/Calendar/src/CalendarButtons.js.map +1 -1
- package/build/esm/Calendar/src/CalendarDaysGrid.js +2 -2
- package/build/esm/Calendar/src/CalendarDaysGrid.js.map +1 -1
- package/build/esm/Calendar/src/CalendarMonthOrYearCell.js +1 -1
- package/build/esm/Calendar/src/CalendarMonthOrYearCell.js.map +1 -1
- package/build/esm/Calendar/src/RangeCalendar.js.map +1 -1
- package/build/esm/index.js +0 -1
- package/build/esm/index.js.map +1 -1
- package/build/index.d.ts +10 -23
- package/package.json +39 -39
- package/build/esm/Spinner/src/Spinner.js +0 -50
- package/build/esm/Spinner/src/Spinner.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertDialog.js","sources":["../../../../src/AlertDialog/src/AlertDialog.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n Dialog,\n DialogProps,\n SapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport {\n FeedbackMessage,\n SapphireFeedbackMessageProps,\n} from '../../FeedbackMessage';\nimport { AriaModalOverlayProps } from '@react-aria/overlays';\nimport { DOMRef } from '@react-types/shared';\n\nexport type SapphireAlertDialogProps = AriaModalOverlayProps &\n SapphireStyleProps &\n Pick<DialogProps, 'isOpen' | 'onClose'> &\n Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {\n /**\n *\n * @default \"horizontal\"\n */\n actionsOrientation?: 'vertical' | 'horizontal';\n /**\n * The elements that will be rendered in the footer of the dialog.\n */\n actions: ReactNode;\n /**\n * The title of the dialog.\n */\n heading: string;\n };\n\nexport const AlertDialog = React.forwardRef(function AlertDialog(\n props: SapphireAlertDialogProps,\n ref: DOMRef<HTMLDivElement>\n) {\n useThemeCheck();\n\n const {\n variant = 'neutral',\n icon,\n body,\n actionsOrientation = 'horizontal',\n actions,\n heading,\n ...rest\n } = props;\n\n return (\n <Dialog\n ref={ref}\n role=\"alertdialog\"\n type=\"active\"\n size=\"extra-small\"\n header={<></>}\n content={\n <Dialog.Content>\n <FeedbackMessage\n heading={<Dialog.Header level={6} heading={heading} />}\n variant={variant}\n icon={icon}\n body={body}\n />\n </Dialog.Content>\n }\n footer={\n <Dialog.Footer stretch=\"autoVertical\" orientation={actionsOrientation}>\n {actions}\n </Dialog.Footer>\n }\n {...rest}\n />\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"AlertDialog.js","sources":["../../../../src/AlertDialog/src/AlertDialog.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport {\n Dialog,\n DialogProps,\n SapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport {\n FeedbackMessage,\n SapphireFeedbackMessageProps,\n} from '../../FeedbackMessage';\nimport { AriaModalOverlayProps } from '@react-aria/overlays';\nimport { DOMRef } from '@react-types/shared';\n\nexport type SapphireAlertDialogProps = AriaModalOverlayProps &\n SapphireStyleProps &\n Pick<DialogProps, 'isOpen' | 'onClose'> &\n Omit<SapphireFeedbackMessageProps, 'heading' | 'actions'> & {\n /**\n *\n * @default \"horizontal\"\n */\n actionsOrientation?: 'vertical' | 'horizontal';\n /**\n * The elements that will be rendered in the footer of the dialog.\n */\n actions: ReactNode;\n /**\n * The title of the dialog.\n */\n heading: string;\n };\n\n/**\n * `AlertDialog` is a wrapper component around `Dialog` and allows you to interrupt the user's\n * experience to prompt them for important confirmations. (e.g. deleting something, confirming\n * an important or irreversible choice etc.).\n * Don't use them for less relevant of unnecessary confirmations.\n *\n * The title should be similar to the action that prompted the user to open it.\n */\nexport const AlertDialog = React.forwardRef(function AlertDialog(\n props: SapphireAlertDialogProps,\n ref: DOMRef<HTMLDivElement>\n) {\n useThemeCheck();\n\n const {\n variant = 'neutral',\n icon,\n body,\n actionsOrientation = 'horizontal',\n actions,\n heading,\n ...rest\n } = props;\n\n return (\n <Dialog\n ref={ref}\n role=\"alertdialog\"\n type=\"active\"\n size=\"extra-small\"\n header={<></>}\n content={\n <Dialog.Content>\n <FeedbackMessage\n heading={<Dialog.Header level={6} heading={heading} />}\n variant={variant}\n icon={icon}\n body={body}\n />\n </Dialog.Content>\n }\n footer={\n <Dialog.Footer stretch=\"autoVertical\" orientation={actionsOrientation}>\n {actions}\n </Dialog.Footer>\n }\n {...rest}\n />\n );\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCO,MAAM,WAAc,GAAA,KAAA,CAAM,UAAW,CAAA,SAAA,YAAA,CAC1C,OACA,GACA,EAAA;AACA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAU,OAAA,GAAA,SAAA;AAAA,IACV,IAAA;AAAA,IACA,IAAA;AAAA,IACA,kBAAqB,GAAA,YAAA;AAAA,IACrB,OAAA;AAAA,IACA,OAAA;AAAA,GAEE,GAAA,EAAA,EADC,iBACD,EADC,EAAA;AAAA,IANH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,2CACG,MAAD,EAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,IACA,IAAK,EAAA,aAAA;AAAA,IACL,IAAK,EAAA,QAAA;AAAA,IACL,IAAK,EAAA,aAAA;AAAA,IACL,MAAQ,kBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA;AAAA,IACR,yBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,OAAR,EAAA,IAAA,sCACG,eAAD,EAAA;AAAA,MACE,OAAA,kBAAU,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,MAAR,EAAA;AAAA,QAAe,KAAO,EAAA,CAAA;AAAA,QAAG,OAAA;AAAA,OAAA,CAAA;AAAA,MAClC,OAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,KAAA,CAAA,CAAA;AAAA,IAIN,MAAA,kBACG,KAAA,CAAA,aAAA,CAAA,MAAA,CAAO,MAAR,EAAA;AAAA,MAAe,OAAQ,EAAA,cAAA;AAAA,MAAe,WAAa,EAAA,kBAAA;AAAA,KAChD,EAAA,OAAA,CAAA;AAAA,GAGD,EAAA,IAAA,CAAA,CAAA,CAAA;AAAA,CAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarButtons.js","sources":["../../../../src/Calendar/src/CalendarButtons.tsx"],"sourcesContent":["import React, { DOMAttributes, ForwardedRef, HTMLAttributes } from 'react';\nimport clsx from 'clsx';\nimport { FocusRing } from '@react-aria/focus';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\nimport { useHover } from '@react-aria/interactions';\nimport { mergeProps } from '@react-aria/utils';\n\ninterface CalendarButtonProps extends DOMAttributes<HTMLButtonElement> {\n isDisabled?: boolean;\n isSelected?: boolean;\n hasCurrentIndicator?: boolean;\n tabIndex?: HTMLAttributes<HTMLButtonElement>['tabIndex'];\n isInGridCell?: boolean;\n}\n\nexport const CalendarButton = React.forwardRef(function SapphireCalendarButton(\n {\n children,\n className = '',\n isSelected,\n isDisabled,\n isInGridCell,\n hasCurrentIndicator,\n ...otherProps\n }: CalendarButtonProps & { className?: string },\n forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n const { hoverProps, isHovered } = useHover({ isDisabled });\n const ElementType: 'span' | 'button' = isInGridCell ? 'span' : 'button';\n\n return (\n <FocusRing focusRingClass={styles['is-focus']}>\n <ElementType\n ref={forwardedRef}\n role=\"button\"\n {...(ElementType === 'button' ? ({ type: 'button' } as const) : {})}\n {...mergeProps(otherProps, hoverProps)}\n className={clsx(\n className,\n styles['js-focus'],\n styles['js-hover'],\n styles['sapphire-calendar__button'],\n {\n [styles[`sapphire-calendar__button--selected`]]: isSelected,\n [styles['sapphire-calendar__button--current']]: hasCurrentIndicator,\n [styles[`is-hover`]]: isHovered,\n [styles[`is-disabled`]]: isDisabled,\n }\n )}\n >\n <span className={styles['sapphire-calendar__button-text']}>\n {children}\n </span>\n </ElementType>\n </FocusRing>\n );\n});\n\nexport const CalendarDayButton = React.forwardRef(\n function SapphireCalendarDayButton(\n {\n isOutsideVisibleRange,\n rangeHighlight,\n ...props\n }: CalendarButtonProps & {\n rangeHighlight:\n | { highlighted: false }\n | { highlighted: true; start?: boolean; end?: boolean };\n isOutsideVisibleRange?: boolean;\n },\n forwardedRef: ForwardedRef<HTMLButtonElement>\n ) {\n return (\n <CalendarButton\n {...props}\n isInGridCell\n className={clsx(styles['sapphire-calendar__button--day'], {\n [styles['sapphire-calendar__button--range-selection']]:\n rangeHighlight.highlighted,\n [styles['sapphire-calendar__button--range-start']]:\n rangeHighlight.highlighted && rangeHighlight.start,\n [styles['sapphire-calendar__button--range-end']]:\n rangeHighlight.highlighted && rangeHighlight.end,\n [styles['sapphire-calendar__button--selection-start']]:\n rangeHighlight.highlighted &&\n rangeHighlight.start &&\n props.isSelected,\n [styles['sapphire-calendar__button--selection-end']]:\n rangeHighlight.highlighted &&\n rangeHighlight.end &&\n props.isSelected,\n [styles['sapphire-calendar__button--outside-month']]:\n isOutsideVisibleRange,\n })}\n ref={forwardedRef}\n />\n );\n }\n);\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CalendarButtons.js","sources":["../../../../src/Calendar/src/CalendarButtons.tsx"],"sourcesContent":["import React, { DOMAttributes, ForwardedRef, HTMLAttributes } from 'react';\nimport clsx from 'clsx';\nimport { FocusRing } from '@react-aria/focus';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\nimport { useHover } from '@react-aria/interactions';\nimport { mergeProps } from '@react-aria/utils';\n\ninterface CalendarButtonProps extends DOMAttributes<HTMLButtonElement> {\n isDisabled?: boolean;\n isSelected?: boolean;\n hasCurrentIndicator?: boolean;\n tabIndex?: HTMLAttributes<HTMLButtonElement>['tabIndex'];\n isInGridCell?: boolean;\n}\n\nexport const CalendarButton = React.forwardRef(function SapphireCalendarButton(\n {\n children,\n className = '',\n isSelected,\n isDisabled,\n isInGridCell,\n hasCurrentIndicator,\n ...otherProps\n }: CalendarButtonProps & { className?: string },\n forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n const { hoverProps, isHovered } = useHover({ isDisabled });\n const ElementType: 'span' | 'button' = isInGridCell ? 'span' : 'button';\n\n return (\n <FocusRing focusRingClass={styles['is-focus']}>\n <ElementType\n ref={forwardedRef}\n role=\"button\"\n {...(ElementType === 'button' ? ({ type: 'button' } as const) : {})}\n {...mergeProps(otherProps, hoverProps)}\n className={clsx(\n className,\n styles['js-focus'],\n styles['js-hover'],\n styles['sapphire-calendar__button'],\n {\n [styles[`sapphire-calendar__button--selected`]]: isSelected,\n [styles['sapphire-calendar__button--current']]: hasCurrentIndicator,\n [styles[`is-hover`]]: isHovered,\n [styles[`is-disabled`]]: isDisabled,\n }\n )}\n >\n <span className={styles['sapphire-calendar__button-text']}>\n {children}\n </span>\n </ElementType>\n </FocusRing>\n );\n});\n\nexport const CalendarDayButton = React.forwardRef(\n function SapphireCalendarDayButton(\n {\n isOutsideVisibleRange,\n rangeHighlight,\n ...props\n }: CalendarButtonProps & {\n rangeHighlight:\n | { highlighted: false }\n | { highlighted: true; start?: boolean | null; end?: boolean | null };\n isOutsideVisibleRange?: boolean;\n },\n forwardedRef: ForwardedRef<HTMLButtonElement>\n ) {\n return (\n <CalendarButton\n {...props}\n isInGridCell\n className={clsx(styles['sapphire-calendar__button--day'], {\n [styles['sapphire-calendar__button--range-selection']]:\n rangeHighlight.highlighted,\n [styles['sapphire-calendar__button--range-start']]:\n rangeHighlight.highlighted && rangeHighlight.start,\n [styles['sapphire-calendar__button--range-end']]:\n rangeHighlight.highlighted && rangeHighlight.end,\n [styles['sapphire-calendar__button--selection-start']]:\n rangeHighlight.highlighted &&\n rangeHighlight.start &&\n props.isSelected,\n [styles['sapphire-calendar__button--selection-end']]:\n rangeHighlight.highlighted &&\n rangeHighlight.end &&\n props.isSelected,\n [styles['sapphire-calendar__button--outside-month']]:\n isOutsideVisibleRange,\n })}\n ref={forwardedRef}\n />\n );\n }\n);\n"],"names":[],"mappings":"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"}
|
|
@@ -142,8 +142,8 @@ const getRangeHighlight = ({
|
|
|
142
142
|
highlightedRange,
|
|
143
143
|
locale
|
|
144
144
|
}) => {
|
|
145
|
-
const isInSelection = highlightedRange.start.compare(date) <= 0 && highlightedRange.end.compare(date) >= 0;
|
|
146
|
-
const rangeIsNotASingleDay = highlightedRange && !isSameDay(highlightedRange.start, highlightedRange.end);
|
|
145
|
+
const isInSelection = !!highlightedRange && highlightedRange.start.compare(date) <= 0 && highlightedRange.end.compare(date) >= 0;
|
|
146
|
+
const rangeIsNotASingleDay = !!highlightedRange && !isSameDay(highlightedRange.start, highlightedRange.end);
|
|
147
147
|
const isStartOfWeek = getDayOfWeek(date, locale) === 0;
|
|
148
148
|
const isEndOfWeek = getDayOfWeek(date, locale) === 6;
|
|
149
149
|
const isStartOfMonth = isSameDay(date, startOfMonth(date));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarDaysGrid.js","sources":["../../../../src/Calendar/src/CalendarDaysGrid.tsx"],"sourcesContent":["import React, { ComponentProps, useMemo } from 'react';\nimport clsx from 'clsx';\nimport {\n AriaCalendarCellProps,\n AriaCalendarGridProps,\n useCalendarCell,\n useCalendarGrid,\n} from '@react-aria/calendar';\nimport { CalendarState, RangeCalendarState } from '@react-stately/calendar';\nimport {\n CalendarDate,\n DateValue,\n endOfMonth,\n getDayOfWeek,\n getLocalTimeZone,\n getWeeksInMonth,\n isSameDay,\n isSameMonth,\n startOfMonth,\n startOfWeek,\n today,\n} from '@internationalized/date';\nimport {\n useDateFormatter,\n useLocale,\n useMessageFormatter,\n} from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDayButton } from './CalendarButtons';\nimport { sentenceCase } from './utils';\n\nexport function CalendarDaysGrid({\n state,\n startDate = state.visibleRange.start,\n showWeekNumbers,\n ...props\n}: {\n state: CalendarState | RangeCalendarState;\n startDate?: CalendarDate;\n showWeekNumbers?: boolean;\n} & AriaCalendarGridProps): JSX.Element {\n const { locale } = useLocale();\n const { gridProps, headerProps } = useCalendarGrid(\n {\n ...props,\n startDate,\n endDate: endOfMonth(startDate),\n },\n state\n );\n const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n // `weekDays` is returned from useCalendarGrid, but there is currently no option\n // for customizing weekday format. So the corresponding piece of code is copy-pasted\n // from useCalendarGrid, just to use \"short\" format instead of \"narrow\"\n const dayFormatter = useDateFormatter({\n weekday: 'short',\n timeZone: state.timeZone,\n });\n const weekDays = useMemo(() => {\n const weekStart = startOfWeek(today(state.timeZone), locale);\n return [...new Array(7).keys()].map((index) => {\n const date = weekStart.add({ days: index });\n const dateDay = date.toDate(state.timeZone);\n return dayFormatter.format(dateDay);\n });\n }, [locale, state.timeZone, dayFormatter]);\n\n return (\n <table\n {...gridProps}\n className={clsx(styles['sapphire-calendar__table'], {\n [styles['sapphire-calendar__table--with-week-numbers']]:\n showWeekNumbers,\n })}\n >\n <thead {...headerProps}>\n <tr>\n {showWeekNumbers && (\n <th\n className={styles['sapphire-calendar__table-head-cell']}\n aria-hidden=\"true\"\n >\n <span className={styles['sapphire-calendar__week-number']}>\n #\n </span>\n </th>\n )}\n {weekDays.map((day, index) => (\n <th\n key={index}\n className={styles['sapphire-calendar__table-head-cell']}\n >\n <abbr className={styles['sapphire-calendar__day-of-week']}>\n {sentenceCase(day)}\n </abbr>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n return (\n <tr\n className={styles['sapphire-calendar__table-body-row']}\n key={weekIndex}\n >\n {showWeekNumbers && (\n <CalendarWeekNumberCell\n date={startDate.add({ days: 7 * weekIndex })}\n />\n )}\n {state.getDatesInWeek(weekIndex, startDate).map((date, i) =>\n date ? (\n <CalendarCell\n currentMonth={startDate}\n // by passing date.toString() instead of index, we make sure the cell\n // is remounted as we navigate between months. That prevents awkward\n // color transition if the same day-of-the-month is highlighted in one month\n // but not the other.\n key={date.toString()}\n state={state}\n date={date}\n />\n ) : (\n <td key={i} />\n )\n )}\n </tr>\n );\n })}\n <tr></tr>\n </tbody>\n </table>\n );\n}\nfunction CalendarWeekNumberCell({ date }: { date: DateValue }) {\n const weekNumber = getWeekNumber(date);\n const formatMessage = useMessageFormatter(intlMessages);\n return (\n <th\n className={styles['sapphire-calendar__table-body-cell']}\n role=\"rowheader\"\n aria-label={formatMessage('week', { weekNumber })}\n >\n <span className={styles['sapphire-calendar__week-number']}>\n {weekNumber}\n </span>\n </th>\n );\n}\n\nfunction CalendarCell({\n state,\n date,\n currentMonth,\n}: {\n state: CalendarState | RangeCalendarState;\n currentMonth: CalendarDate;\n} & AriaCalendarCellProps) {\n const ref = React.useRef(null);\n const { locale } = useLocale();\n const sameMonth = isSameMonth(date, currentMonth);\n const {\n cellProps,\n buttonProps,\n isSelected: isInSelection,\n isDisabled,\n formattedDate,\n isUnavailable,\n } = useCalendarCell({ date, isDisabled: !sameMonth }, state, ref);\n\n const highlightedRange =\n 'highlightedRange' in state ? state.highlightedRange : null;\n\n const isSelected =\n isInSelection &&\n // if we have a highlighted range, only start and end of the range are styled selected.\n (!highlightedRange ||\n isSameDay(highlightedRange.start, date) ||\n isSameDay(highlightedRange.end, date));\n\n return (\n <td {...cellProps} className={styles['sapphire-calendar__table-body-cell']}>\n <CalendarDayButton\n {...buttonProps}\n ref={ref}\n isSelected={isSelected}\n isDisabled={isDisabled || isUnavailable}\n hasCurrentIndicator={today(state.timeZone).compare(date) === 0}\n isOutsideVisibleRange={!isSameMonth(currentMonth, date)}\n rangeHighlight={\n highlightedRange\n ? getRangeHighlight({ date, highlightedRange, locale })\n : { highlighted: false }\n }\n >\n {formattedDate}\n </CalendarDayButton>\n </td>\n );\n}\n\n/**\n * Given a date and a highlighted range, returns the range highlight state for that date.\n * Note that \"start\" doesn't simply mean start of the range, but means range start **style**,\n * which applies to some dates inside the range as well. A css-only solution could also cover\n * this, but it would require `:has()` selector which is not widely supported at the time of writing\n * this.\n */\nconst getRangeHighlight = ({\n date,\n highlightedRange,\n locale,\n}: {\n date: DateValue;\n highlightedRange: RangeCalendarState['highlightedRange'];\n locale: string;\n}): ComponentProps<typeof CalendarDayButton>['rangeHighlight'] => {\n const isInSelection =\n highlightedRange.start.compare(date) <= 0 &&\n highlightedRange.end.compare(date) >= 0;\n const rangeIsNotASingleDay =\n highlightedRange &&\n !isSameDay(highlightedRange.start, highlightedRange.end);\n const isStartOfWeek = getDayOfWeek(date, locale) === 0;\n const isEndOfWeek = getDayOfWeek(date, locale) === 6;\n const isStartOfMonth = isSameDay(date, startOfMonth(date));\n const isEndOfMonth = isSameDay(date, endOfMonth(date));\n const isStartOfRange =\n highlightedRange && isSameDay(highlightedRange?.start, date);\n const isEndOfRange =\n highlightedRange && isSameDay(highlightedRange?.end, date);\n\n const highlighted = isInSelection && rangeIsNotASingleDay;\n return {\n highlighted,\n start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),\n end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange),\n };\n};\n\n/**\n * Almost copied from https://weeknumber.com/how-to/javascript\n * No corresponding API found in @internationalized/date package, at the time\n * of writing this.\n * Caveat: this code is based on built-in Date object, and may not be\n * calendar-agnostic. We don't really care about supporting different types\n * of calendar, so it should be fine for now. But we can look into improving\n * this if needed.\n */\nconst getWeekNumber = function (dateValue: DateValue) {\n const date = new Date(dateValue.toDate(getLocalTimeZone()));\n date.setHours(0, 0, 0, 0);\n // Thursday in current week decides the year.\n date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));\n // January 4 is always in week 1.\n const week1 = new Date(date.getFullYear(), 0, 4);\n // Adjust to Thursday in week 1 and count number of weeks from date to week1.\n return (\n 1 +\n Math.round(\n ((date.getTime() - week1.getTime()) / 86400000 -\n 3 +\n ((week1.getDay() + 6) % 7)) /\n 7\n )\n );\n};\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CalendarDaysGrid.js","sources":["../../../../src/Calendar/src/CalendarDaysGrid.tsx"],"sourcesContent":["import React, { ComponentProps, useMemo } from 'react';\nimport clsx from 'clsx';\nimport {\n AriaCalendarCellProps,\n AriaCalendarGridProps,\n useCalendarCell,\n useCalendarGrid,\n} from '@react-aria/calendar';\nimport { CalendarState, RangeCalendarState } from '@react-stately/calendar';\nimport {\n CalendarDate,\n DateValue,\n endOfMonth,\n getDayOfWeek,\n getLocalTimeZone,\n getWeeksInMonth,\n isSameDay,\n isSameMonth,\n startOfMonth,\n startOfWeek,\n today,\n} from '@internationalized/date';\nimport {\n useDateFormatter,\n useLocale,\n useMessageFormatter,\n} from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDayButton } from './CalendarButtons';\nimport { sentenceCase } from './utils';\n\nexport function CalendarDaysGrid({\n state,\n startDate = state.visibleRange.start,\n showWeekNumbers,\n ...props\n}: {\n state: CalendarState | RangeCalendarState;\n startDate?: CalendarDate;\n showWeekNumbers?: boolean;\n} & AriaCalendarGridProps): JSX.Element {\n const { locale } = useLocale();\n const { gridProps, headerProps } = useCalendarGrid(\n {\n ...props,\n startDate,\n endDate: endOfMonth(startDate),\n },\n state\n );\n const weeksInMonth = getWeeksInMonth(startDate, locale);\n\n // `weekDays` is returned from useCalendarGrid, but there is currently no option\n // for customizing weekday format. So the corresponding piece of code is copy-pasted\n // from useCalendarGrid, just to use \"short\" format instead of \"narrow\"\n const dayFormatter = useDateFormatter({\n weekday: 'short',\n timeZone: state.timeZone,\n });\n const weekDays = useMemo(() => {\n const weekStart = startOfWeek(today(state.timeZone), locale);\n return [...new Array(7).keys()].map((index) => {\n const date = weekStart.add({ days: index });\n const dateDay = date.toDate(state.timeZone);\n return dayFormatter.format(dateDay);\n });\n }, [locale, state.timeZone, dayFormatter]);\n\n return (\n <table\n {...gridProps}\n className={clsx(styles['sapphire-calendar__table'], {\n [styles['sapphire-calendar__table--with-week-numbers']]:\n showWeekNumbers,\n })}\n >\n <thead {...headerProps}>\n <tr>\n {showWeekNumbers && (\n <th\n className={styles['sapphire-calendar__table-head-cell']}\n aria-hidden=\"true\"\n >\n <span className={styles['sapphire-calendar__week-number']}>\n #\n </span>\n </th>\n )}\n {weekDays.map((day, index) => (\n <th\n key={index}\n className={styles['sapphire-calendar__table-head-cell']}\n >\n <abbr className={styles['sapphire-calendar__day-of-week']}>\n {sentenceCase(day)}\n </abbr>\n </th>\n ))}\n </tr>\n </thead>\n <tbody>\n {[...new Array(weeksInMonth).keys()].map((weekIndex) => {\n return (\n <tr\n className={styles['sapphire-calendar__table-body-row']}\n key={weekIndex}\n >\n {showWeekNumbers && (\n <CalendarWeekNumberCell\n date={startDate.add({ days: 7 * weekIndex })}\n />\n )}\n {state.getDatesInWeek(weekIndex, startDate).map((date, i) =>\n date ? (\n <CalendarCell\n currentMonth={startDate}\n // by passing date.toString() instead of index, we make sure the cell\n // is remounted as we navigate between months. That prevents awkward\n // color transition if the same day-of-the-month is highlighted in one month\n // but not the other.\n key={date.toString()}\n state={state}\n date={date}\n />\n ) : (\n <td key={i} />\n )\n )}\n </tr>\n );\n })}\n <tr></tr>\n </tbody>\n </table>\n );\n}\nfunction CalendarWeekNumberCell({ date }: { date: DateValue }) {\n const weekNumber = getWeekNumber(date);\n const formatMessage = useMessageFormatter(intlMessages);\n return (\n <th\n className={styles['sapphire-calendar__table-body-cell']}\n role=\"rowheader\"\n aria-label={formatMessage('week', { weekNumber })}\n >\n <span className={styles['sapphire-calendar__week-number']}>\n {weekNumber}\n </span>\n </th>\n );\n}\n\nfunction CalendarCell({\n state,\n date,\n currentMonth,\n}: {\n state: CalendarState | RangeCalendarState;\n currentMonth: CalendarDate;\n} & AriaCalendarCellProps) {\n const ref = React.useRef(null);\n const { locale } = useLocale();\n const sameMonth = isSameMonth(date, currentMonth);\n const {\n cellProps,\n buttonProps,\n isSelected: isInSelection,\n isDisabled,\n formattedDate,\n isUnavailable,\n } = useCalendarCell({ date, isDisabled: !sameMonth }, state, ref);\n\n const highlightedRange =\n 'highlightedRange' in state ? state.highlightedRange : null;\n\n const isSelected =\n isInSelection &&\n // if we have a highlighted range, only start and end of the range are styled selected.\n (!highlightedRange ||\n isSameDay(highlightedRange.start, date) ||\n isSameDay(highlightedRange.end, date));\n\n return (\n <td {...cellProps} className={styles['sapphire-calendar__table-body-cell']}>\n <CalendarDayButton\n {...buttonProps}\n ref={ref}\n isSelected={isSelected}\n isDisabled={isDisabled || isUnavailable}\n hasCurrentIndicator={today(state.timeZone).compare(date) === 0}\n isOutsideVisibleRange={!isSameMonth(currentMonth, date)}\n rangeHighlight={\n highlightedRange\n ? getRangeHighlight({ date, highlightedRange, locale })\n : { highlighted: false }\n }\n >\n {formattedDate}\n </CalendarDayButton>\n </td>\n );\n}\n\n/**\n * Given a date and a highlighted range, returns the range highlight state for that date.\n * Note that \"start\" doesn't simply mean start of the range, but means range start **style**,\n * which applies to some dates inside the range as well. A css-only solution could also cover\n * this, but it would require `:has()` selector which is not widely supported at the time of writing\n * this.\n */\nconst getRangeHighlight = ({\n date,\n highlightedRange,\n locale,\n}: {\n date: DateValue;\n highlightedRange: RangeCalendarState['highlightedRange'];\n locale: string;\n}): ComponentProps<typeof CalendarDayButton>['rangeHighlight'] => {\n const isInSelection =\n !!highlightedRange &&\n highlightedRange.start.compare(date) <= 0 &&\n highlightedRange.end.compare(date) >= 0;\n const rangeIsNotASingleDay =\n !!highlightedRange &&\n !isSameDay(highlightedRange.start, highlightedRange.end);\n const isStartOfWeek = getDayOfWeek(date, locale) === 0;\n const isEndOfWeek = getDayOfWeek(date, locale) === 6;\n const isStartOfMonth = isSameDay(date, startOfMonth(date));\n const isEndOfMonth = isSameDay(date, endOfMonth(date));\n const isStartOfRange =\n highlightedRange && isSameDay(highlightedRange?.start, date);\n const isEndOfRange =\n highlightedRange && isSameDay(highlightedRange?.end, date);\n\n const highlighted = isInSelection && rangeIsNotASingleDay;\n return {\n highlighted,\n start: highlighted && (isStartOfWeek || isStartOfMonth || isStartOfRange),\n end: highlighted && (isEndOfWeek || isEndOfMonth || isEndOfRange),\n };\n};\n\n/**\n * Almost copied from https://weeknumber.com/how-to/javascript\n * No corresponding API found in @internationalized/date package, at the time\n * of writing this.\n * Caveat: this code is based on built-in Date object, and may not be\n * calendar-agnostic. We don't really care about supporting different types\n * of calendar, so it should be fine for now. But we can look into improving\n * this if needed.\n */\nconst getWeekNumber = function (dateValue: DateValue) {\n const date = new Date(dateValue.toDate(getLocalTimeZone()));\n date.setHours(0, 0, 0, 0);\n // Thursday in current week decides the year.\n date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7));\n // January 4 is always in week 1.\n const week1 = new Date(date.getFullYear(), 0, 4);\n // Adjust to Thursday in week 1 and count number of weeks from date to week1.\n return (\n 1 +\n Math.round(\n ((date.getTime() - week1.getTime()) / 86400000 -\n 3 +\n ((week1.getDay() + 6) % 7)) /\n 7\n )\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -69,7 +69,7 @@ function CalendarMonthOrYearCell({
|
|
|
69
69
|
ref
|
|
70
70
|
}, buttonProps), {
|
|
71
71
|
isInGridCell: true,
|
|
72
|
-
isSelected: state.value && isSame[field](state.value, date),
|
|
72
|
+
isSelected: !!state.value && isSame[field](state.value, date),
|
|
73
73
|
isDisabled: state.isDisabled || isDisabled,
|
|
74
74
|
hasCurrentIndicator: isSame[field](date, today(state.timeZone))
|
|
75
75
|
}), children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarMonthOrYearCell.js","sources":["../../../../src/Calendar/src/CalendarMonthOrYearCell.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n isSameMonth,\n CalendarDate,\n DateField,\n isSameYear,\n today,\n} from '@internationalized/date';\nimport { usePress } from '@react-aria/interactions';\nimport { focusWithoutScrolling, mergeProps } from '@react-aria/utils';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { CalendarButton } from './CalendarButtons';\n\nconst isSame = { month: isSameMonth, year: isSameYear } as const;\n\nexport function CalendarMonthOrYearCell({\n date,\n state,\n isDisabled,\n field,\n children,\n}: {\n date: CalendarDate;\n field: Extract<DateField, 'month' | 'year'>;\n state: SapphireCalendarState;\n isDisabled?: boolean;\n children: React.ReactNode;\n}): JSX.Element {\n const ref = React.useRef(null);\n const isFocused = state.focusedDate[field] === date[field];\n\n let tabIndex: number | undefined;\n if (!isDisabled) {\n tabIndex = isSame[field](date, state.focusedDate) ? 0 : -1;\n }\n\n useEffect(() => {\n if (isFocused && ref.current) {\n focusWithoutScrolling(ref.current);\n }\n }, [isFocused, ref]);\n\n const { pressProps } = usePress({\n isDisabled: state.isDisabled || isDisabled,\n onPress: () => {\n state.setFocusedDate(date);\n if (!state.isReadOnly) {\n state.narrowView();\n }\n },\n });\n const buttonProps = mergeProps(pressProps, {\n onFocus() {\n if (!isDisabled) {\n state.setFocusedDate(date);\n }\n },\n tabIndex,\n role: 'button',\n 'aria-disabled': isDisabled || undefined,\n });\n return (\n <td\n className={styles['sapphire-calendar__table-body-cell']}\n role=\"gridcell\"\n >\n <CalendarButton\n ref={ref}\n {...buttonProps}\n isInGridCell\n isSelected={state.value && isSame[field](state.value, date)}\n isDisabled={state.isDisabled || isDisabled}\n hasCurrentIndicator={isSame[field](date, today(state.timeZone))}\n >\n {children}\n </CalendarButton>\n </td>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,MAAS,GAAA,EAAE,KAAO,EAAA,WAAA,EAAa,IAAM,EAAA,UAAA,EAAA,CAAA;AAEH,SAAA,uBAAA,CAAA;AAAA,EACtC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,CAOc,EAAA;AACd,EAAM,MAAA,GAAA,GAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACzB,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,WAAY,CAAA,KAAA,CAAA,KAAW,IAAK,CAAA,KAAA,CAAA,CAAA;AAEpD,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAA,QAAA,GAAW,MAAO,CAAA,KAAA,CAAA,CAAO,IAAM,EAAA,KAAA,CAAM,eAAe,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,GAAA;AAG1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA,IAAa,IAAI,OAAS,EAAA;AAC5B,MAAA,qBAAA,CAAsB,GAAI,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAE3B,CAAC,SAAW,EAAA,GAAA,CAAA,CAAA,CAAA;AAEf,EAAM,MAAA,EAAE,eAAe,QAAS,CAAA;AAAA,IAC9B,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,SAAS,MAAM;AACb,MAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AACrB,MAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,QAAM,KAAA,CAAA,UAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAIZ,EAAM,MAAA,WAAA,GAAc,WAAW,UAAY,EAAA;AAAA,IACzC,OAAU,GAAA;AACR,MAAA,IAAI,CAAC,UAAY,EAAA;AACf,QAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAGzB,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,iBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAEjC,EAAA,2CACG,IAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,IAClB,IAAK,EAAA,UAAA;AAAA,GAAA,sCAEJ,cAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,GAAA,EACI,WAFN,CAAA,EAAA;AAAA,IAGE,YAAY,EAAA,IAAA;AAAA,IACZ,
|
|
1
|
+
{"version":3,"file":"CalendarMonthOrYearCell.js","sources":["../../../../src/Calendar/src/CalendarMonthOrYearCell.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport {\n isSameMonth,\n CalendarDate,\n DateField,\n isSameYear,\n today,\n} from '@internationalized/date';\nimport { usePress } from '@react-aria/interactions';\nimport { focusWithoutScrolling, mergeProps } from '@react-aria/utils';\n\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { SapphireCalendarState } from './useSapphireCalendarState';\nimport { CalendarButton } from './CalendarButtons';\n\nconst isSame = { month: isSameMonth, year: isSameYear } as const;\n\nexport function CalendarMonthOrYearCell({\n date,\n state,\n isDisabled,\n field,\n children,\n}: {\n date: CalendarDate;\n field: Extract<DateField, 'month' | 'year'>;\n state: SapphireCalendarState;\n isDisabled?: boolean;\n children: React.ReactNode;\n}): JSX.Element {\n const ref = React.useRef(null);\n const isFocused = state.focusedDate[field] === date[field];\n\n let tabIndex: number | undefined;\n if (!isDisabled) {\n tabIndex = isSame[field](date, state.focusedDate) ? 0 : -1;\n }\n\n useEffect(() => {\n if (isFocused && ref.current) {\n focusWithoutScrolling(ref.current);\n }\n }, [isFocused, ref]);\n\n const { pressProps } = usePress({\n isDisabled: state.isDisabled || isDisabled,\n onPress: () => {\n state.setFocusedDate(date);\n if (!state.isReadOnly) {\n state.narrowView();\n }\n },\n });\n const buttonProps = mergeProps(pressProps, {\n onFocus() {\n if (!isDisabled) {\n state.setFocusedDate(date);\n }\n },\n tabIndex,\n role: 'button',\n 'aria-disabled': isDisabled || undefined,\n });\n return (\n <td\n className={styles['sapphire-calendar__table-body-cell']}\n role=\"gridcell\"\n >\n <CalendarButton\n ref={ref}\n {...buttonProps}\n isInGridCell\n isSelected={!!state.value && isSame[field](state.value, date)}\n isDisabled={state.isDisabled || isDisabled}\n hasCurrentIndicator={isSame[field](date, today(state.timeZone))}\n >\n {children}\n </CalendarButton>\n </td>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,MAAS,GAAA,EAAE,KAAO,EAAA,WAAA,EAAa,IAAM,EAAA,UAAA,EAAA,CAAA;AAEH,SAAA,uBAAA,CAAA;AAAA,EACtC,IAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,CAOc,EAAA;AACd,EAAM,MAAA,GAAA,GAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACzB,EAAA,MAAM,SAAY,GAAA,KAAA,CAAM,WAAY,CAAA,KAAA,CAAA,KAAW,IAAK,CAAA,KAAA,CAAA,CAAA;AAEpD,EAAI,IAAA,QAAA,CAAA;AACJ,EAAA,IAAI,CAAC,UAAY,EAAA;AACf,IAAA,QAAA,GAAW,MAAO,CAAA,KAAA,CAAA,CAAO,IAAM,EAAA,KAAA,CAAM,eAAe,CAAI,GAAA,CAAA,CAAA,CAAA;AAAA,GAAA;AAG1D,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA,IAAa,IAAI,OAAS,EAAA;AAC5B,MAAA,qBAAA,CAAsB,GAAI,CAAA,OAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,EAE3B,CAAC,SAAW,EAAA,GAAA,CAAA,CAAA,CAAA;AAEf,EAAM,MAAA,EAAE,eAAe,QAAS,CAAA;AAAA,IAC9B,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,SAAS,MAAM;AACb,MAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AACrB,MAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,QAAM,KAAA,CAAA,UAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAIZ,EAAM,MAAA,WAAA,GAAc,WAAW,UAAY,EAAA;AAAA,IACzC,OAAU,GAAA;AACR,MAAA,IAAI,CAAC,UAAY,EAAA;AACf,QAAA,KAAA,CAAM,cAAe,CAAA,IAAA,CAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,IAGzB,QAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,iBAAiB,UAAc,IAAA,KAAA,CAAA;AAAA,GAAA,CAAA,CAAA;AAEjC,EAAA,2CACG,IAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,IAClB,IAAK,EAAA,UAAA;AAAA,GAAA,sCAEJ,cAAD,EAAA,aAAA,CAAA,cAAA,CAAA;AAAA,IACE,GAAA;AAAA,GAAA,EACI,WAFN,CAAA,EAAA;AAAA,IAGE,YAAY,EAAA,IAAA;AAAA,IACZ,UAAA,EAAY,CAAC,CAAC,KAAA,CAAM,SAAS,MAAO,CAAA,KAAA,CAAA,CAAO,MAAM,KAAO,EAAA,IAAA,CAAA;AAAA,IACxD,UAAA,EAAY,MAAM,UAAc,IAAA,UAAA;AAAA,IAChC,mBAAqB,EAAA,MAAA,CAAO,KAAO,CAAA,CAAA,IAAA,EAAM,MAAM,KAAM,CAAA,QAAA,CAAA,CAAA;AAAA,GAEpD,CAAA,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeCalendar.js","sources":["../../../../src/Calendar/src/RangeCalendar.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n createCalendar,\n DateValue,\n toCalendarDate,\n} from '@internationalized/date';\nimport { AriaRangeCalendarProps, useRangeCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\n\nimport {\n Button,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport { useDateFormatter, useLocale } from '@react-aria/i18n';\nimport clsx from 'clsx';\nimport { useRangeCalendarState } from './useRangeCalendarState';\nimport type { RangeCalendarStateOptions } from './useRangeCalendarState';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n CalendarPageAnimation,\n useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport { sentenceCase } from './utils';\n\nexport interface PredefinedDateRange {\n label: string;\n dateRange: { start: DateValue; end: DateValue };\n}\n\nexport interface SapphireRangeCalendarProps<\n T extends DateValue = DateValue,\n P extends string = string\n> extends SapphireStyleProps,\n Omit<\n AriaRangeCalendarProps<T>,\n | 'validationState'\n | 'errorMessage'\n | 'allowsNonContiguousRanges'\n | 'onChange'\n > {\n /**\n * This callback also gives you the information if the selected range was a\n * predefined date according to the `predefinedRanges` prop.\n */\n onChange?: RangeCalendarStateOptions<DateValue, P>['onChange'];\n /**\n * Whether week numbers are visible as a first column\n */\n showWeekNumbers?: boolean;\n\n /**\n * Whether to show two months at the same time.\n */\n showTwoMonths?: boolean;\n\n /**\n * A set of predefined date ranges the user can more conveniently select.\n */\n predefinedRanges?: Record<P, PredefinedDateRange>;\n\n /**\n * Whether range is allowed to span unavailable dates.\n */\n allowUnavailableDatesWithinRange?: boolean;\n}\n\
|
|
1
|
+
{"version":3,"file":"RangeCalendar.js","sources":["../../../../src/Calendar/src/RangeCalendar.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport {\n createCalendar,\n DateValue,\n toCalendarDate,\n} from '@internationalized/date';\nimport { AriaRangeCalendarProps, useRangeCalendar } from '@react-aria/calendar';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\n\nimport {\n Button,\n SapphireStyleProps,\n useSapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/calendar/calendar.module.css';\n\nimport { CalendarDaysGrid } from './CalendarDaysGrid';\nimport { useDateFormatter, useLocale } from '@react-aria/i18n';\nimport clsx from 'clsx';\nimport { useRangeCalendarState } from './useRangeCalendarState';\nimport type { RangeCalendarStateOptions } from './useRangeCalendarState';\nimport { CalendarHeader } from './CalendarHeader';\nimport {\n CalendarPageAnimation,\n useCalendarAnimationState,\n} from './CalendarPageAnimation';\nimport { sentenceCase } from './utils';\n\nexport interface PredefinedDateRange {\n label: string;\n dateRange: { start: DateValue; end: DateValue };\n}\n\nexport interface SapphireRangeCalendarProps<\n T extends DateValue = DateValue,\n P extends string = string\n> extends SapphireStyleProps,\n Omit<\n AriaRangeCalendarProps<T>,\n | 'validationState'\n | 'errorMessage'\n | 'allowsNonContiguousRanges'\n | 'onChange'\n > {\n /**\n * This callback also gives you the information if the selected range was a\n * predefined date according to the `predefinedRanges` prop.\n */\n onChange?: RangeCalendarStateOptions<DateValue, P>['onChange'];\n /**\n * Whether week numbers are visible as a first column\n */\n showWeekNumbers?: boolean;\n\n /**\n * Whether to show two months at the same time.\n */\n showTwoMonths?: boolean;\n\n /**\n * A set of predefined date ranges the user can more conveniently select.\n */\n predefinedRanges?: Record<P, PredefinedDateRange>;\n\n /**\n * Whether range is allowed to span unavailable dates.\n */\n allowUnavailableDatesWithinRange?: boolean;\n}\n\nconst _RangeCalendar = function RangeCalendar<\n T extends DateValue = DateValue,\n P extends string = string\n>(\n {\n showWeekNumbers,\n showTwoMonths = false,\n allowUnavailableDatesWithinRange = false,\n predefinedRanges,\n ...props\n }: SapphireRangeCalendarProps<T, P>,\n forwardedRef: React.ForwardedRef<HTMLDivElement>\n): JSX.Element {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n\n const ref = useObjectRef(forwardedRef);\n const { locale } = useLocale();\n const state = useCalendarAnimationState(\n useRangeCalendarState({\n ...props,\n locale,\n allowsNonContiguousRanges: allowUnavailableDatesWithinRange,\n visibleDuration: useMemo(\n () => ({ months: showTwoMonths ? 2 : 1 }),\n [showTwoMonths]\n ),\n createCalendar,\n })\n );\n const { calendarProps, prevButtonProps, nextButtonProps } = useRangeCalendar(\n props,\n state,\n ref\n );\n\n const monthDateFormatter = useDateFormatter({\n month: 'long',\n year: 'numeric',\n era:\n state.visibleRange.start.calendar.identifier === 'gregory' &&\n state.visibleRange.start.era === 'BC'\n ? 'short'\n : undefined,\n calendar: state.visibleRange.start.calendar.identifier,\n timeZone: state.timeZone,\n });\n\n return (\n <div\n ref={ref}\n className={clsx(styles['sapphire-calendar'], styleProps.className)}\n style={styleProps.style}\n {...mergeProps(calendarProps, filterDOMProps(props))}\n >\n <div className={styles['sapphire-calendar__tables-row']}>\n {[state.visibleRange.start]\n .concat(\n showTwoMonths ? state.visibleRange.start.add({ months: 1 }) : []\n )\n .map((startOfMonth, index, visibleMonths) => {\n const isLeft = visibleMonths.length > 1 && index === 0;\n const isRight =\n visibleMonths.length > 1 && index === visibleMonths.length - 1;\n const shouldAnimate = visibleMonths.length === 1;\n const daysGrid = (\n <CalendarDaysGrid\n startDate={startOfMonth}\n state={state}\n showWeekNumbers={showWeekNumbers}\n />\n );\n return (\n <div\n key={index}\n className={styles['sapphire-calendar__table-container']}\n >\n <CalendarHeader\n prevButtonProps={prevButtonProps}\n nextButtonProps={nextButtonProps}\n isLeft={isLeft}\n isRight={isRight}\n >\n {sentenceCase(\n monthDateFormatter.format(\n startOfMonth.toDate(state.timeZone)\n )\n )}\n </CalendarHeader>\n {shouldAnimate ? (\n <CalendarPageAnimation state={state.animationState}>\n {daysGrid}\n </CalendarPageAnimation>\n ) : (\n daysGrid\n )}\n </div>\n );\n })}\n </div>\n {predefinedRanges && (\n <div className={styles['sapphire-calendar__custom-ranges']}>\n {(\n Object.entries(predefinedRanges) as Array<[P, PredefinedDateRange]>\n ).map(([key, { label, dateRange }]) => (\n <div key={key}>\n <Button\n variant=\"secondary\"\n appearance=\"ghost\"\n onPress={() => {\n state.setValue(dateRange, key);\n state.setAnchorDate(null);\n state.setFocusedDate(toCalendarDate(dateRange.end));\n }}\n >\n {label}\n </Button>\n </div>\n ))}\n </div>\n )}\n </div>\n );\n};\n\n/**\n * Displays a calendar and allow users to select a consecutive range of dates.\n * One or two months can be visible at the same time.\n */\n// eslint-disable-next-line\n// @ts-ignore Union type too complex to represent (TODO: check if this is still\n// an issue when we use TS@5.\nexport const RangeCalendar = React.forwardRef(_RangeCalendar) as <\n T extends DateValue,\n P extends string\n>(\n props: SapphireRangeCalendarProps<T, P> & {\n ref?: React.ForwardedRef<HTMLDivElement>;\n }\n) => ReturnType<typeof _RangeCalendar>;\n"],"names":[],"mappings":"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"}
|
package/build/esm/index.js
CHANGED
|
@@ -3,7 +3,6 @@ export { Calendar } from './Calendar/src/Calendar.js';
|
|
|
3
3
|
export { RangeCalendar } from './Calendar/src/RangeCalendar.js';
|
|
4
4
|
import '@react-stately/calendar';
|
|
5
5
|
import '@react-stately/utils';
|
|
6
|
-
export { Spinner } from './Spinner/src/Spinner.js';
|
|
7
6
|
export { NotificationBadge } from './NotificationBadge/src/NotificationBadge.js';
|
|
8
7
|
export { FilterDropdown } from './Filtering/src/FilterDropdown.js';
|
|
9
8
|
export { DateField } from './DateField/src/DateField.js';
|
package/build/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.d.ts
CHANGED
|
@@ -112,36 +112,15 @@ interface SapphireRangeCalendarProps<T extends DateValue = DateValue, P extends
|
|
|
112
112
|
*/
|
|
113
113
|
allowUnavailableDatesWithinRange?: boolean;
|
|
114
114
|
}
|
|
115
|
+
declare const _RangeCalendar: <T extends DateValue = DateValue, P extends string = string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, predefinedRanges, ...props }: SapphireRangeCalendarProps<T, P>, forwardedRef: React__default.ForwardedRef<HTMLDivElement>) => JSX.Element;
|
|
115
116
|
/**
|
|
116
117
|
* Displays a calendar and allow users to select a consecutive range of dates.
|
|
117
118
|
* One or two months can be visible at the same time.
|
|
118
119
|
*/
|
|
119
|
-
declare const _RangeCalendar: <T extends DateValue = DateValue, P extends string = string>({ showWeekNumbers, showTwoMonths, allowUnavailableDatesWithinRange, predefinedRanges, ...props }: SapphireRangeCalendarProps<T, P>, forwardedRef: React__default.ForwardedRef<HTMLDivElement>) => JSX.Element;
|
|
120
120
|
declare const RangeCalendar: <T extends DateValue, P extends string>(props: SapphireRangeCalendarProps<T, P> & {
|
|
121
121
|
ref?: React__default.ForwardedRef<HTMLDivElement> | undefined;
|
|
122
122
|
}) => ReturnType<typeof _RangeCalendar>;
|
|
123
123
|
|
|
124
|
-
declare type SpinnerProps = {
|
|
125
|
-
/**
|
|
126
|
-
* @default 'm'
|
|
127
|
-
*/
|
|
128
|
-
size?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';
|
|
129
|
-
/**
|
|
130
|
-
* The color variant of the spinner. Using `default` will use predefined colors, while `inherit` will use the text color.
|
|
131
|
-
* @default 'default'
|
|
132
|
-
*/
|
|
133
|
-
variant?: 'default' | 'inherit';
|
|
134
|
-
} & SapphireStyleProps & ({
|
|
135
|
-
'aria-labelledby': string;
|
|
136
|
-
} | {
|
|
137
|
-
'aria-label': string;
|
|
138
|
-
});
|
|
139
|
-
/**
|
|
140
|
-
* Animated element that show that some data is still loading or some process
|
|
141
|
-
* is in progress. The hidden label is required for accessibility reasons.
|
|
142
|
-
*/
|
|
143
|
-
declare const Spinner: ({ size, variant, ...props }: SpinnerProps) => JSX.Element;
|
|
144
|
-
|
|
145
124
|
declare type NotificationBadgeProps = {
|
|
146
125
|
/**
|
|
147
126
|
* Boolean to perform or not perform the animation
|
|
@@ -853,6 +832,14 @@ declare type SapphireAlertDialogProps = AriaModalOverlayProps & SapphireStylePro
|
|
|
853
832
|
*/
|
|
854
833
|
heading: string;
|
|
855
834
|
};
|
|
835
|
+
/**
|
|
836
|
+
* `AlertDialog` is a wrapper component around `Dialog` and allows you to interrupt the user's
|
|
837
|
+
* experience to prompt them for important confirmations. (e.g. deleting something, confirming
|
|
838
|
+
* an important or irreversible choice etc.).
|
|
839
|
+
* Don't use them for less relevant of unnecessary confirmations.
|
|
840
|
+
*
|
|
841
|
+
* The title should be similar to the action that prompted the user to open it.
|
|
842
|
+
*/
|
|
856
843
|
declare const AlertDialog: React__default.ForwardRefExoticComponent<AriaModalOverlayProps & SapphireStyleProps & Pick<DialogProps, "isOpen" | "onClose"> & Omit<SapphireFeedbackMessageProps, "heading" | "actions"> & {
|
|
857
844
|
/**
|
|
858
845
|
*
|
|
@@ -995,4 +982,4 @@ interface LabeledValueProps extends DOMProps, SapphireStyleProps {
|
|
|
995
982
|
}
|
|
996
983
|
declare function LabeledValue(props: LabeledValueProps): React__default.JSX.Element;
|
|
997
984
|
|
|
998
|
-
export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, LabeledValue, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions,
|
|
985
|
+
export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, LabeledValue, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-react-lab",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.87.1",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
|
|
6
6
|
"exports": {
|
|
@@ -25,54 +25,54 @@
|
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"@danske/sapphire-icons": "^2.1.0",
|
|
28
|
-
"@danske/sapphire-react": "^3.
|
|
28
|
+
"@danske/sapphire-react": "^3.39.2",
|
|
29
29
|
"react": ">=16.8.0",
|
|
30
30
|
"react-dom": ">=16.8.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@danske/sapphire-icons": "^2.1.0",
|
|
34
|
-
"@danske/sapphire-react": "^3.
|
|
34
|
+
"@danske/sapphire-react": "^3.39.2",
|
|
35
35
|
"@types/react-transition-group": "^4.4.5",
|
|
36
36
|
"cross-env": "^7.0.3"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@danske/sapphire-css": "^
|
|
40
|
-
"@internationalized/date": "^3.5.
|
|
41
|
-
"@internationalized/string": "^3.2.
|
|
42
|
-
"@react-aria/accordion": "^3.0.0-alpha.
|
|
43
|
-
"@react-aria/button": "^3.9.
|
|
44
|
-
"@react-aria/calendar": "^3.5.
|
|
45
|
-
"@react-aria/combobox": "^3.
|
|
46
|
-
"@react-aria/datepicker": "^3.
|
|
47
|
-
"@react-aria/dialog": "^3.5.
|
|
48
|
-
"@react-aria/dnd": "^3.
|
|
49
|
-
"@react-aria/focus": "^3.
|
|
50
|
-
"@react-aria/i18n": "^3.
|
|
51
|
-
"@react-aria/interactions": "^3.
|
|
52
|
-
"@react-aria/label": "^3.7.
|
|
53
|
-
"@react-aria/numberfield": "^3.11.
|
|
54
|
-
"@react-aria/overlays": "^3.
|
|
55
|
-
"@react-aria/searchfield": "^3.7.
|
|
56
|
-
"@react-aria/tag": "^3.4.
|
|
57
|
-
"@react-aria/toast": "^3.0.0-beta.
|
|
58
|
-
"@react-aria/utils": "^3.
|
|
59
|
-
"@react-aria/visually-hidden": "^3.8.
|
|
60
|
-
"@react-spectrum/utils": "^3.11.
|
|
61
|
-
"@react-stately/calendar": "^3.
|
|
62
|
-
"@react-stately/collections": "^3.10.
|
|
63
|
-
"@react-stately/combobox": "^3.
|
|
64
|
-
"@react-stately/datepicker": "^3.
|
|
65
|
-
"@react-stately/list": "^3.10.
|
|
66
|
-
"@react-stately/numberfield": "^3.9.
|
|
67
|
-
"@react-stately/searchfield": "^3.5.
|
|
68
|
-
"@react-stately/toast": "^3.0.0-beta.
|
|
69
|
-
"@react-stately/toggle": "^3.7.
|
|
70
|
-
"@react-stately/tree": "^3.8.
|
|
71
|
-
"@react-stately/utils": "^3.
|
|
72
|
-
"@react-types/dialog": "^3.5.
|
|
73
|
-
"@react-types/shared": "^3.
|
|
39
|
+
"@danske/sapphire-css": "^31.1.2",
|
|
40
|
+
"@internationalized/date": "^3.5.5",
|
|
41
|
+
"@internationalized/string": "^3.2.3",
|
|
42
|
+
"@react-aria/accordion": "^3.0.0-alpha.31",
|
|
43
|
+
"@react-aria/button": "^3.9.8",
|
|
44
|
+
"@react-aria/calendar": "^3.5.11",
|
|
45
|
+
"@react-aria/combobox": "^3.10.1",
|
|
46
|
+
"@react-aria/datepicker": "^3.11.1",
|
|
47
|
+
"@react-aria/dialog": "^3.5.16",
|
|
48
|
+
"@react-aria/dnd": "^3.7.2",
|
|
49
|
+
"@react-aria/focus": "^3.18.2",
|
|
50
|
+
"@react-aria/i18n": "^3.12.2",
|
|
51
|
+
"@react-aria/interactions": "^3.22.2",
|
|
52
|
+
"@react-aria/label": "^3.7.11",
|
|
53
|
+
"@react-aria/numberfield": "^3.11.6",
|
|
54
|
+
"@react-aria/overlays": "^3.23.2",
|
|
55
|
+
"@react-aria/searchfield": "^3.7.7",
|
|
56
|
+
"@react-aria/tag": "^3.4.5",
|
|
57
|
+
"@react-aria/toast": "^3.0.0-beta.14",
|
|
58
|
+
"@react-aria/utils": "^3.25.2",
|
|
59
|
+
"@react-aria/visually-hidden": "^3.8.15",
|
|
60
|
+
"@react-spectrum/utils": "^3.11.8",
|
|
61
|
+
"@react-stately/calendar": "^3.5.4",
|
|
62
|
+
"@react-stately/collections": "^3.10.9",
|
|
63
|
+
"@react-stately/combobox": "^3.9.2",
|
|
64
|
+
"@react-stately/datepicker": "^3.10.2",
|
|
65
|
+
"@react-stately/list": "^3.10.8",
|
|
66
|
+
"@react-stately/numberfield": "^3.9.6",
|
|
67
|
+
"@react-stately/searchfield": "^3.5.6",
|
|
68
|
+
"@react-stately/toast": "^3.0.0-beta.5",
|
|
69
|
+
"@react-stately/toggle": "^3.7.7",
|
|
70
|
+
"@react-stately/tree": "^3.8.4",
|
|
71
|
+
"@react-stately/utils": "^3.10.3",
|
|
72
|
+
"@react-types/dialog": "^3.5.12",
|
|
73
|
+
"@react-types/shared": "^3.24.1",
|
|
74
74
|
"clsx": "^1.1.1",
|
|
75
75
|
"react-transition-group": "^4.4.5"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "41bc4804b1a076e3aaac77b34aa952dc001bcb5b"
|
|
78
78
|
}
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import styles from '@danske/sapphire-css/components/spinner/spinner.module.css';
|
|
4
|
-
import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
|
|
5
|
-
|
|
6
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
-
var __objRest = (source, exclude) => {
|
|
10
|
-
var target = {};
|
|
11
|
-
for (var prop in source)
|
|
12
|
-
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
13
|
-
target[prop] = source[prop];
|
|
14
|
-
if (source != null && __getOwnPropSymbols)
|
|
15
|
-
for (var prop of __getOwnPropSymbols(source)) {
|
|
16
|
-
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
17
|
-
target[prop] = source[prop];
|
|
18
|
-
}
|
|
19
|
-
return target;
|
|
20
|
-
};
|
|
21
|
-
const Spinner = (_a) => {
|
|
22
|
-
var _b = _a, {
|
|
23
|
-
size = "m",
|
|
24
|
-
variant = "default"
|
|
25
|
-
} = _b, props = __objRest(_b, [
|
|
26
|
-
"size",
|
|
27
|
-
"variant"
|
|
28
|
-
]);
|
|
29
|
-
useThemeCheck();
|
|
30
|
-
const { styleProps } = useSapphireStyleProps(props);
|
|
31
|
-
return /* @__PURE__ */ React.createElement("svg", {
|
|
32
|
-
role: "progressbar",
|
|
33
|
-
"aria-label": "aria-label" in props ? props["aria-label"] : void 0,
|
|
34
|
-
"aria-labelledby": "aria-labelledby" in props ? props["aria-labelledby"] : void 0,
|
|
35
|
-
className: clsx(styleProps.className, styles["sapphire-spinner"], {
|
|
36
|
-
[styles["sapphire-spinner--inherit"]]: variant === "inherit"
|
|
37
|
-
}, size !== "m" ? styles[`sapphire-spinner--${size}`] : ""),
|
|
38
|
-
style: styleProps.style,
|
|
39
|
-
viewBox: "0 0 16 16"
|
|
40
|
-
}, /* @__PURE__ */ React.createElement("path", {
|
|
41
|
-
className: styles["sapphire-spinner__track"],
|
|
42
|
-
d: "M10.3993 2.13882C10.3295 2.39914 10.4641 2.66858 10.7034 2.79263C11.2238 3.06246 11.7123 3.41501 12.1489 3.85159C14.4401 6.14281 14.4399 9.85728 12.1489 12.1483C9.85783 14.4393 6.14335 14.4395 3.85214 12.1483C3.41556 11.7117 3.06301 11.2232 2.79317 10.7028C2.66913 10.4635 2.39969 10.329 2.13937 10.3987C1.82795 10.4821 1.65738 10.8194 1.80178 11.1077C2.1261 11.7551 2.55778 12.3624 3.09789 12.9026C5.80564 15.6103 10.1955 15.6101 12.9031 12.9026C15.6107 10.195 15.6109 5.80509 12.9031 3.09734C12.363 2.55723 11.7556 2.12555 11.1082 1.80123C10.82 1.65683 10.4827 1.8274 10.3993 2.13882Z"
|
|
43
|
-
}), /* @__PURE__ */ React.createElement("path", {
|
|
44
|
-
className: styles["sapphire-spinner__accent"],
|
|
45
|
-
d: "M1.72661 8.85304C1.98694 8.78329 2.15316 8.53215 2.14111 8.26291C2.07002 6.67514 2.63971 5.06425 3.85203 3.85193C5.06452 2.63944 6.67527 2.06989 8.26302 2.14101C8.53225 2.15306 8.78337 1.98683 8.85309 1.7265C8.93661 1.41464 8.72921 1.09798 8.4069 1.07913C6.49959 0.96764 4.55516 1.6403 3.09778 3.09768C1.64062 4.55485 0.967813 6.49934 1.07909 8.40676C1.0979 8.72916 1.41467 8.93663 1.72661 8.85304Z"
|
|
46
|
-
}));
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export { Spinner };
|
|
50
|
-
//# sourceMappingURL=Spinner.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Spinner.js","sources":["../../../../src/Spinner/src/Spinner.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/spinner/spinner.module.css';\nimport {\n useThemeCheck,\n SapphireStyleProps,\n useSapphireStyleProps,\n} from '@danske/sapphire-react';\n\nexport type SpinnerProps = {\n /**\n * @default 'm'\n */\n size?: 'xxxs' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';\n /**\n * The color variant of the spinner. Using `default` will use predefined colors, while `inherit` will use the text color.\n * @default 'default'\n */\n variant?: 'default' | 'inherit';\n} & SapphireStyleProps &\n ({ 'aria-labelledby': string } | { 'aria-label': string });\n\n/**\n * Animated element that show that some data is still loading or some process\n * is in progress. The hidden label is required for accessibility reasons.\n */\nexport const Spinner = ({\n size = 'm',\n variant = 'default',\n ...props\n}: SpinnerProps): JSX.Element => {\n useThemeCheck();\n\n const { styleProps } = useSapphireStyleProps(props);\n\n /**\n * There is @react-aria/progress but because we only have a \"indeterminate\"\n * spinner, we only need one prop, the 'role' attr.\n * Therefore, it seemed like an overkill to use react-aria here.\n */\n\n return (\n <svg\n role=\"progressbar\"\n aria-label={'aria-label' in props ? props['aria-label'] : undefined}\n aria-labelledby={\n 'aria-labelledby' in props ? props['aria-labelledby'] : undefined\n }\n className={clsx(\n styleProps.className,\n styles['sapphire-spinner'],\n {\n [styles['sapphire-spinner--inherit']]: variant === 'inherit',\n },\n size !== 'm' ? styles[`sapphire-spinner--${size}` as const] : ''\n )}\n style={styleProps.style}\n viewBox=\"0 0 16 16\"\n >\n <path\n className={styles['sapphire-spinner__track']}\n d=\"M10.3993 2.13882C10.3295 2.39914 10.4641 2.66858 10.7034 2.79263C11.2238 3.06246 11.7123 3.41501 12.1489 3.85159C14.4401 6.14281 14.4399 9.85728 12.1489 12.1483C9.85783 14.4393 6.14335 14.4395 3.85214 12.1483C3.41556 11.7117 3.06301 11.2232 2.79317 10.7028C2.66913 10.4635 2.39969 10.329 2.13937 10.3987C1.82795 10.4821 1.65738 10.8194 1.80178 11.1077C2.1261 11.7551 2.55778 12.3624 3.09789 12.9026C5.80564 15.6103 10.1955 15.6101 12.9031 12.9026C15.6107 10.195 15.6109 5.80509 12.9031 3.09734C12.363 2.55723 11.7556 2.12555 11.1082 1.80123C10.82 1.65683 10.4827 1.8274 10.3993 2.13882Z\"\n />\n <path\n className={styles['sapphire-spinner__accent']}\n d=\"M1.72661 8.85304C1.98694 8.78329 2.15316 8.53215 2.14111 8.26291C2.07002 6.67514 2.63971 5.06425 3.85203 3.85193C5.06452 2.63944 6.67527 2.06989 8.26302 2.14101C8.53225 2.15306 8.78337 1.98683 8.85309 1.7265C8.93661 1.41464 8.72921 1.09798 8.4069 1.07913C6.49959 0.96764 4.55516 1.6403 3.09778 3.09768C1.64062 4.55485 0.967813 6.49934 1.07909 8.40676C1.0979 8.72916 1.41467 8.93663 1.72661 8.85304Z\"\n />\n </svg>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA0Ba,MAAA,OAAA,GAAU,CAAC,EAIS,KAAA;AAJT,EACtB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAO,IAAA,GAAA,GAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,GAFY,GAAA,EAAA,EAGnB,kBAHmB,EAGnB,EAAA;AAAA,IAFH,MAAA;AAAA,IACA,SAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAQ7C,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,IAAK,EAAA,aAAA;AAAA,IACL,YAAY,EAAA,YAAA,IAAgB,KAAQ,GAAA,KAAA,CAAM,YAAgB,CAAA,GAAA,KAAA,CAAA;AAAA,IAC1D,iBACE,EAAA,iBAAA,IAAqB,KAAQ,GAAA,KAAA,CAAM,iBAAqB,CAAA,GAAA,KAAA,CAAA;AAAA,IAE1D,SAAW,EAAA,IAAA,CACT,UAAW,CAAA,SAAA,EACX,OAAO,kBACP,CAAA,EAAA;AAAA,MACG,CAAA,MAAA,CAAO,+BAA+B,OAAY,KAAA,SAAA;AAAA,KAAA,EAErD,IAAS,KAAA,GAAA,GAAM,MAAO,CAAA,CAAA,kBAAA,EAAqB,IAAmB,CAAA,CAAA,CAAA,GAAA,EAAA,CAAA;AAAA,IAEhE,OAAO,UAAW,CAAA,KAAA;AAAA,IAClB,OAAQ,EAAA,WAAA;AAAA,GAAA,sCAEP,MAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,yBAAA,CAAA;AAAA,IAClB,CAAE,EAAA,4kBAAA;AAAA,GAAA,CAAA,sCAEH,MAAD,EAAA;AAAA,IACE,WAAW,MAAO,CAAA,0BAAA,CAAA;AAAA,IAClB,CAAE,EAAA,gZAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|