@danske/sapphire-react-lab 0.86.3 → 0.87.0
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 +225 -271
- package/build/cjs/index.js.map +1 -1
- package/build/esm/AlertDialog/src/AlertDialog.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 +5 -5
- 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":"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.0",
|
|
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,18 +25,18 @@
|
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|
|
27
27
|
"@danske/sapphire-icons": "^2.1.0",
|
|
28
|
-
"@danske/sapphire-react": "^3.
|
|
28
|
+
"@danske/sapphire-react": "^3.38.0",
|
|
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.38.0",
|
|
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": "^
|
|
39
|
+
"@danske/sapphire-css": "^31.1.2",
|
|
40
40
|
"@internationalized/date": "^3.5.2",
|
|
41
41
|
"@internationalized/string": "^3.2.1",
|
|
42
42
|
"@react-aria/accordion": "^3.0.0-alpha.29",
|
|
@@ -74,5 +74,5 @@
|
|
|
74
74
|
"clsx": "^1.1.1",
|
|
75
75
|
"react-transition-group": "^4.4.5"
|
|
76
76
|
},
|
|
77
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "5fa695dce9089b8fd8519eff034c3f03db00e0d4"
|
|
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;;;;"}
|