@danske/sapphire-react-lab 0.95.2 → 0.96.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 +20 -21
- package/build/cjs/index.js.map +1 -1
- package/build/esm/Accordion/src/Accordion.js +1 -1
- package/build/esm/Accordion/src/Accordion.js.map +1 -1
- package/build/esm/FileDropzone/src/FileDropzone.js +1 -1
- package/build/esm/FileDropzone/src/FileDropzone.js.map +1 -1
- package/build/esm/Filtering/src/FilterDropdown.js.map +1 -1
- package/build/esm/Filtering/src/SearchableSelectFilter.js +2 -4
- package/build/esm/Filtering/src/SearchableSelectFilter.js.map +1 -1
- package/build/esm/LabeledValue/src/LabeledValue.js +1 -7
- package/build/esm/LabeledValue/src/LabeledValue.js.map +1 -1
- package/build/esm/NumberField/src/NumberField.js +7 -4
- package/build/esm/NumberField/src/NumberField.js.map +1 -1
- package/build/esm/NumberField/src/StepperButton.js.map +1 -1
- package/build/esm/NumberField/src/useSapphireNumberField.js.map +1 -1
- package/build/esm/TagGroup/src/Tag.js +2 -2
- package/build/esm/TagGroup/src/Tag.js.map +1 -1
- package/build/esm/TagGroup/src/TagGroup.js +7 -4
- package/build/esm/TagGroup/src/TagGroup.js.map +1 -1
- package/build/index.d.ts +10 -17
- package/package.json +7 -7
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Accordion.js","sources":["../../../../src/Accordion/src/Accordion.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useAccordion } from '@react-aria/accordion';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\nimport { CollectionBase, DOMProps, Expandable } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport {\n SapphireStyleProps,\n TypographyHeadingProps,\n useSapphireStyleProps,\n useThemeCheck,\n withTruthyZero as hasAllowedCustomSidePadding,\n} from '@danske/sapphire-react';\n\nimport { _AccordionItem } from './AccordionItem';\nimport { AccordionContext } from './AccordionContext';\nimport { TreeExpansionMode, useTreeState } from './useTreeState';\n\nexport interface AccordionProps<T>\n extends SapphireStyleProps,\n CollectionBase<T>,\n DOMProps,\n Expandable {\n /** Allow one or many expanded items\n * @default 'multiple'\n */\n expansionMode?: TreeExpansionMode;\n /** Set aria-level attribute for item's header. Accessibility requirement.\n * Defines the hierarchical level of an element within a page structure.\n * @default 5\n */\n headerLevel?: TypographyHeadingProps['level'];\n /**\n * Removes the divider after the last accordion item.\n * Useful when rendered in a container which already has borders.\n */\n hideLastDivider?: boolean;\n /**\n * Counter acts the side padding, so that accordion is shifted to the left with same amount\n * and having side padding * 2 added to width – resulting in full width accordion.\n * Useful in scenarions where accordion is inside a padded container and desired layout has accordion going from edge to edge horizontally.\n * @example\n * ```tsx\n * <Accordion hasNegativeSideMargin>...</Accordion>\n * ```\n */\n hasNegativeSideMargin?: boolean;\n /**\n * Add custom sized padding to the sides of the accordion items.\n * @example\n * ```tsx\n * <Accordion sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>...</Accordion>\n * ```\n */\n sidePadding?: number | string;\n}\n\nconst _Accordion = <T extends object>(\n {\n expansionMode = 'multiple',\n headerLevel = 5,\n hideLastDivider = false,\n hasNegativeSideMargin = false,\n sidePadding,\n ...props\n }: AccordionProps<T>,\n ref: ForwardedRef<HTMLDivElement>\n) => {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n const state = useTreeState<T>({ ...props, expansionMode });\n const forwardedRef = useObjectRef<HTMLDivElement>(ref);\n\n const { accordionProps } = useAccordion(props, state, forwardedRef);\n\n return (\n <AccordionContext.Provider value={{ sidePadding }}>\n <div\n {...mergeProps(\n accordionProps,\n filterDOMProps(props, { labelable: true })\n )}\n ref={forwardedRef}\n className={clsx(\n styles['sapphire-accordion'],\n {\n [styles['sapphire-accordion--without-last-divider']]:\n hideLastDivider,\n [styles['sapphire-accordion--negative-margin-self']]:\n !hasAllowedCustomSidePadding(sidePadding) &&\n hasNegativeSideMargin,\n },\n styleProps.className\n )}\n style={{\n ...(hasAllowedCustomSidePadding(sidePadding) && hasNegativeSideMargin\n ? {\n marginLeft:\n typeof sidePadding === 'string'\n ? `calc(${sidePadding} * -1)`\n : `-${sidePadding}px`,\n width: `calc(100% + calc(${sidePadding} * 2${\n typeof sidePadding === 'string' ? '' : 'px'\n }))`,\n }\n : {}),\n ...styleProps.style,\n }}\n >\n {
|
|
1
|
+
{"version":3,"file":"Accordion.js","sources":["../../../../src/Accordion/src/Accordion.tsx"],"sourcesContent":["import React, { ForwardedRef, Ref, forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { useAccordion } from '@react-aria/accordion';\nimport { filterDOMProps, mergeProps, useObjectRef } from '@react-aria/utils';\nimport { CollectionBase, DOMProps, Expandable } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/accordion/accordion.module.css';\nimport {\n SapphireStyleProps,\n TypographyHeadingProps,\n useSapphireStyleProps,\n useThemeCheck,\n withTruthyZero as hasAllowedCustomSidePadding,\n} from '@danske/sapphire-react';\n\nimport { _AccordionItem } from './AccordionItem';\nimport { AccordionContext } from './AccordionContext';\nimport { TreeExpansionMode, useTreeState } from './useTreeState';\n\nexport interface AccordionProps<T>\n extends SapphireStyleProps,\n CollectionBase<T>,\n DOMProps,\n Expandable {\n /** Allow one or many expanded items\n * @default 'multiple'\n */\n expansionMode?: TreeExpansionMode;\n /** Set aria-level attribute for item's header. Accessibility requirement.\n * Defines the hierarchical level of an element within a page structure.\n * @default 5\n */\n headerLevel?: TypographyHeadingProps['level'];\n /**\n * Removes the divider after the last accordion item.\n * Useful when rendered in a container which already has borders.\n */\n hideLastDivider?: boolean;\n /**\n * Counter acts the side padding, so that accordion is shifted to the left with same amount\n * and having side padding * 2 added to width – resulting in full width accordion.\n * Useful in scenarions where accordion is inside a padded container and desired layout has accordion going from edge to edge horizontally.\n * @example\n * ```tsx\n * <Accordion hasNegativeSideMargin>...</Accordion>\n * ```\n */\n hasNegativeSideMargin?: boolean;\n /**\n * Add custom sized padding to the sides of the accordion items.\n * @example\n * ```tsx\n * <Accordion sidePadding={tokens.size.spacingContainerHorizontalM.value} hasNegativeSideMargin>...</Accordion>\n * ```\n */\n sidePadding?: number | string;\n}\n\nconst _Accordion = <T extends object>(\n {\n expansionMode = 'multiple',\n headerLevel = 5,\n hideLastDivider = false,\n hasNegativeSideMargin = false,\n sidePadding,\n ...props\n }: AccordionProps<T>,\n ref: ForwardedRef<HTMLDivElement>\n) => {\n useThemeCheck();\n const { styleProps } = useSapphireStyleProps(props);\n const state = useTreeState<T>({ ...props, expansionMode });\n const forwardedRef = useObjectRef<HTMLDivElement>(ref);\n\n const { accordionProps } = useAccordion(props, state, forwardedRef);\n\n return (\n <AccordionContext.Provider value={{ sidePadding }}>\n <div\n {...mergeProps(\n accordionProps,\n filterDOMProps(props, { labelable: true })\n )}\n ref={forwardedRef}\n className={clsx(\n styles['sapphire-accordion'],\n {\n [styles['sapphire-accordion--without-last-divider']]:\n hideLastDivider,\n [styles['sapphire-accordion--negative-margin-self']]:\n !hasAllowedCustomSidePadding(sidePadding) &&\n hasNegativeSideMargin,\n },\n styleProps.className\n )}\n style={{\n ...(hasAllowedCustomSidePadding(sidePadding) && hasNegativeSideMargin\n ? {\n marginLeft:\n typeof sidePadding === 'string'\n ? `calc(${sidePadding} * -1)`\n : `-${sidePadding}px`,\n width: `calc(100% + calc(${sidePadding} * 2${\n typeof sidePadding === 'string' ? '' : 'px'\n }))`,\n }\n : {}),\n ...styleProps.style,\n }}\n >\n {Array.from(state.collection).map((item) => (\n <_AccordionItem<T>\n headerLevel={headerLevel}\n key={item.key}\n item={item}\n state={state}\n />\n ))}\n </div>\n </AccordionContext.Provider>\n );\n};\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore Expression produces a union type that is too complex to represent.\nexport const Accordion = forwardRef(_Accordion) as <T extends object>(\n props: AccordionProps<T> & { ref?: Ref<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":["hasAllowedCustomSidePadding"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAM,UAAA,GAAa,CACjB,EAAA,EAQA,GACG,KAAA;AATH,EACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAgB,aAAA,GAAA,UAAA;AAAA,IAChB,WAAc,GAAA,CAAA;AAAA,IACd,eAAkB,GAAA,KAAA;AAAA,IAClB,qBAAwB,GAAA,KAAA;AAAA,IACxB,WAAA;AAAA,GALF,GAAA,EAAA,EAMK,kBANL,EAMK,EAAA;AAAA,IALH,eAAA;AAAA,IACA,aAAA;AAAA,IACA,iBAAA;AAAA,IACA,uBAAA;AAAA,IACA,aAAA;AAAA,GAAA,CAAA,CAAA;AAKF,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAC7C,EAAA,MAAM,KAAQ,GAAA,YAAA,CAAgB,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAA,EAAL,EAAY,aAAA,EAAA,CAAA,CAAA,CAAA;AAC1C,EAAA,MAAM,eAAe,YAA6B,CAAA,GAAA,CAAA,CAAA;AAElD,EAAA,MAAM,EAAE,cAAA,EAAA,GAAmB,YAAa,CAAA,KAAA,EAAO,KAAO,EAAA,YAAA,CAAA,CAAA;AAEtD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,iBAAiB,QAAlB,EAAA;AAAA,IAA2B,OAAO,EAAE,WAAA,EAAA;AAAA,GAClC,kBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CACF,gBACA,cAAe,CAAA,KAAA,EAAO,EAAE,SAAA,EAAW,IAHvC,EAAA,CAAA,CAAA,CAAA,EAAA;AAAA,IAKE,GAAK,EAAA,YAAA;AAAA,IACL,SAAA,EAAW,IACT,CAAA,MAAA,CAAO,oBACP,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,0CACN,CAAA,GAAA,eAAA;AAAA,MAAA,CACD,MAAO,CAAA,0CAAA,CAAA,GACN,CAACA,cAAA,CAA4B,WAC7B,CAAA,IAAA,qBAAA;AAAA,KAAA,EAEJ,UAAW,CAAA,SAAA,CAAA;AAAA,IAEb,KAAO,EAAA,cAAA,CAAA,cAAA,CAAA,EAAA,EACDA,cAA4B,CAAA,WAAA,CAAA,IAAgB,qBAC5C,GAAA;AAAA,MACE,YACE,OAAO,WAAA,KAAgB,QACnB,GAAA,CAAA,KAAA,EAAQ,sBACR,CAAI,CAAA,EAAA,WAAA,CAAA,EAAA,CAAA;AAAA,MACV,OAAO,CAAoB,iBAAA,EAAA,WAAA,CAAA,IAAA,EACzB,OAAO,WAAA,KAAgB,WAAW,EAAK,GAAA,IAAA,CAAA,EAAA,CAAA;AAAA,KAAA,GAG3C,KACD,UAAW,CAAA,KAAA,CAAA;AAAA,GAGf,CAAA,EAAA,KAAA,CAAM,KAAK,KAAM,CAAA,UAAA,CAAA,CAAY,IAAI,CAAC,IAAA,yCAChC,cAAD,EAAA;AAAA,IACE,WAAA;AAAA,IACA,KAAK,IAAK,CAAA,GAAA;AAAA,IACV,IAAA;AAAA,IACA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAAA,CAAA;AAUL,MAAM,YAAY,UAAW,CAAA,UAAA;;;;"}
|
|
@@ -107,7 +107,7 @@ const FileDropzone = React.forwardRef(function DropzoneWrapper(props, forwardedR
|
|
|
107
107
|
id: paragraphId,
|
|
108
108
|
className: clsx(styles["sapphire-dropzone__paragraph"])
|
|
109
109
|
}, /* @__PURE__ */ React.createElement(Typography.Body, {
|
|
110
|
-
|
|
110
|
+
size: "sm"
|
|
111
111
|
}, renderInstruction(isDropping)))))));
|
|
112
112
|
});
|
|
113
113
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileDropzone.js","sources":["../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport clsx from 'clsx';\nimport {\n Typography,\n Icon,\n SapphireStyleProps,\n useButton,\n useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { HoverProps, Pressable, useHover } from '@react-aria/interactions';\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport { FileSelectProps, FileTrigger } from './FileTrigger';\nimport { DropOptions, useClipboard, useDrop } from '@react-aria/dnd';\nimport { convertFileListToFileDropItems } from './utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { AriaLabelingProps } from '@react-types/shared';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nexport interface FileDropzoneProps\n extends SapphireStyleProps,\n Pick<\n DropOptions,\n | 'getDropOperation'\n | 'onDropEnter'\n | 'onDropActivate'\n | 'onDropMove'\n | 'onDropExit'\n | 'onDrop'\n >,\n HoverProps,\n FileSelectProps,\n AriaLabelingProps {\n /**\n * Whether the dropzone has an error\n * @default false\n */\n hasError?: boolean;\n /**\n * The body text of the dropzone which can contain the instructions for the files to be uploaded.\n * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.\n * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.\n */\n renderInstruction: (isDropping: boolean) => string;\n /**\n * Function that is called when the file select is opened on press, before any file is selected.\n * @default \"() => null\"\n */\n onFileSelectOpen?: () => void;\n}\n\nexport const FileDropzone = React.forwardRef(function DropzoneWrapper(\n props: FileDropzoneProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const {\n isDisabled = false,\n hasError,\n renderInstruction,\n onFileSelectOpen = () => null,\n acceptedFileTypes,\n allowsMultiple,\n onDrop = () => null,\n } = props;\n\n const id = useId();\n const paragraphId = props['aria-label'] ? undefined : id;\n const format = useMessageFormatter(intlMessages);\n const pressableRef = useObjectRef(forwardedRef);\n const { hoverProps, isHovered } = useHover({ isDisabled });\n const { styleProps } = useSapphireStyleProps(props);\n const { dropProps, isDropTarget: isDropping } = useDrop({\n ...props,\n ref: pressableRef,\n hasDropButton: true,\n isDisabled,\n });\n const { buttonProps, isPressed } = useButton(\n { elementType: 'div' },\n pressableRef as React.RefObject<Element>\n );\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { clipboardProps } = useClipboard({\n isDisabled,\n onPaste: (items) =>\n onDrop({\n type: 'drop',\n items,\n x: 0,\n y: 0,\n dropOperation: 'copy',\n }),\n });\n\n const ariaLabel: string = props['aria-label'] || 'Dropzone';\n\n const onFileTriggerSelect = (files: FileList | null) => {\n onDrop({\n type: 'drop',\n items: convertFileListToFileDropItems(files),\n x: 0,\n y: 0,\n dropOperation: 'copy',\n });\n };\n\n return (\n <FileTrigger\n acceptedFileTypes={acceptedFileTypes}\n allowsMultiple={allowsMultiple}\n onSelect={onFileTriggerSelect}\n isDisabled={isDisabled}\n >\n <Pressable ref={pressableRef} onPress={onFileSelectOpen}>\n <div\n {...mergeProps(\n dropProps,\n hoverProps,\n clipboardProps,\n focusProps,\n buttonProps\n )}\n style={{ ...styleProps.style }}\n className={clsx(\n styles['sapphire-dropzone'],\n styles['js-focus'],\n styles['js-hover'],\n {\n [styles['is-hover']]: isHovered && !isDropping,\n [styles['is-active']]: isPressed,\n [styles['is-disabled']]: isDisabled,\n [styles['is-focus']]: isFocusVisible,\n [styles['sapphire-dropzone--dropping']]: isDropping,\n [styles['sapphire-dropzone--error']]: hasError,\n },\n styleProps.className\n )}\n aria-label={ariaLabel}\n aria-invalid={hasError}\n aria-describedby={paragraphId}\n >\n <div className={clsx(styles['sapphire-dropzone__content'])}>\n <div className={clsx(styles['sapphire-dropzone__icon'])}>\n <Icon>\n <Upload />\n </Icon>\n </div>\n <div className={clsx(styles['sapphire-dropzone__heading'])}>\n <Typography.Heading level={6}>\n {isDropping\n ? format('dropzone-heading-dropping')\n : format('dropzone-heading-default')}\n </Typography.Heading>\n </div>\n <div\n id={paragraphId}\n className={clsx(styles['sapphire-dropzone__paragraph'])}\n >\n <Typography.Body
|
|
1
|
+
{"version":3,"file":"FileDropzone.js","sources":["../../../../src/FileDropzone/src/FileDropzone.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport clsx from 'clsx';\nimport {\n Typography,\n Icon,\n SapphireStyleProps,\n useButton,\n useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/dropzone/dropzone.module.css';\nimport { Upload } from '@danske/sapphire-icons/react';\nimport { HoverProps, Pressable, useHover } from '@react-aria/interactions';\nimport { mergeProps, useId, useObjectRef } from '@react-aria/utils';\nimport { FileSelectProps, FileTrigger } from './FileTrigger';\nimport { DropOptions, useClipboard, useDrop } from '@react-aria/dnd';\nimport { convertFileListToFileDropItems } from './utils';\nimport { useFocusRing } from '@react-aria/focus';\nimport { AriaLabelingProps } from '@react-types/shared';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\n\nexport interface FileDropzoneProps\n extends SapphireStyleProps,\n Pick<\n DropOptions,\n | 'getDropOperation'\n | 'onDropEnter'\n | 'onDropActivate'\n | 'onDropMove'\n | 'onDropExit'\n | 'onDrop'\n >,\n HoverProps,\n FileSelectProps,\n // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n Pick<\n AriaLabelingProps,\n 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n > {\n /**\n * Whether the dropzone has an error\n * @default false\n */\n hasError?: boolean;\n /**\n * The body text of the dropzone which can contain the instructions for the files to be uploaded.\n * Can be rendered differently based on the `isDropping` parameter, which is true if a file is about to be dropped in the zone.\n * @param isDropping - boolean that marks whether a payload is about to be dropped in the dropzone.\n */\n renderInstruction: (isDropping: boolean) => string;\n /**\n * Function that is called when the file select is opened on press, before any file is selected.\n * @default \"() => null\"\n */\n onFileSelectOpen?: () => void;\n}\n\nexport const FileDropzone = React.forwardRef(function DropzoneWrapper(\n props: FileDropzoneProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const {\n isDisabled = false,\n hasError,\n renderInstruction,\n onFileSelectOpen = () => null,\n acceptedFileTypes,\n allowsMultiple,\n onDrop = () => null,\n } = props;\n\n const id = useId();\n const paragraphId = props['aria-label'] ? undefined : id;\n const format = useMessageFormatter(intlMessages);\n const pressableRef = useObjectRef(forwardedRef);\n const { hoverProps, isHovered } = useHover({ isDisabled });\n const { styleProps } = useSapphireStyleProps(props);\n const { dropProps, isDropTarget: isDropping } = useDrop({\n ...props,\n ref: pressableRef,\n hasDropButton: true,\n isDisabled,\n });\n const { buttonProps, isPressed } = useButton(\n { elementType: 'div' },\n pressableRef as React.RefObject<Element>\n );\n const { focusProps, isFocusVisible } = useFocusRing();\n\n const { clipboardProps } = useClipboard({\n isDisabled,\n onPaste: (items) =>\n onDrop({\n type: 'drop',\n items,\n x: 0,\n y: 0,\n dropOperation: 'copy',\n }),\n });\n\n const ariaLabel: string = props['aria-label'] || 'Dropzone';\n\n const onFileTriggerSelect = (files: FileList | null) => {\n onDrop({\n type: 'drop',\n items: convertFileListToFileDropItems(files),\n x: 0,\n y: 0,\n dropOperation: 'copy',\n });\n };\n\n return (\n <FileTrigger\n acceptedFileTypes={acceptedFileTypes}\n allowsMultiple={allowsMultiple}\n onSelect={onFileTriggerSelect}\n isDisabled={isDisabled}\n >\n <Pressable ref={pressableRef} onPress={onFileSelectOpen}>\n <div\n {...mergeProps(\n dropProps,\n hoverProps,\n clipboardProps,\n focusProps,\n buttonProps\n )}\n style={{ ...styleProps.style }}\n className={clsx(\n styles['sapphire-dropzone'],\n styles['js-focus'],\n styles['js-hover'],\n {\n [styles['is-hover']]: isHovered && !isDropping,\n [styles['is-active']]: isPressed,\n [styles['is-disabled']]: isDisabled,\n [styles['is-focus']]: isFocusVisible,\n [styles['sapphire-dropzone--dropping']]: isDropping,\n [styles['sapphire-dropzone--error']]: hasError,\n },\n styleProps.className\n )}\n aria-label={ariaLabel}\n aria-invalid={hasError}\n aria-describedby={paragraphId}\n >\n <div className={clsx(styles['sapphire-dropzone__content'])}>\n <div className={clsx(styles['sapphire-dropzone__icon'])}>\n <Icon>\n <Upload />\n </Icon>\n </div>\n <div className={clsx(styles['sapphire-dropzone__heading'])}>\n <Typography.Heading level={6}>\n {isDropping\n ? format('dropzone-heading-dropping')\n : format('dropzone-heading-default')}\n </Typography.Heading>\n </div>\n <div\n id={paragraphId}\n className={clsx(styles['sapphire-dropzone__paragraph'])}\n >\n <Typography.Body size=\"sm\">\n {renderInstruction(isDropping)}\n </Typography.Body>\n </div>\n </div>\n </div>\n </Pressable>\n </FileTrigger>\n );\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode } from 'react';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useEffectEvent } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n Button,\n PopoverTrigger,\n PopoverTriggerProps,\n SapphireStyleProps,\n ToggleButton,\n} from '@danske/sapphire-react';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\nimport { FocusableRefValue } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';\n\nexport interface FilterDropdownProps\n extends SapphireStyleProps,\n Pick<\n PopoverTriggerProps,\n 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n > {\n /**\n * \"Filter by\" label, shown inside the trigger button.\n */\n label: ReactNode;\n /**\n * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n * considered as unset value.\n */\n value: ReactNode;\n /**\n * Filtering UI controls, rendered in a popover.\n */\n children: ReactNode;\n /**\n * Called when:\n * - `Enter` is pressed on form fields rendered inside the popover.\n * - 'Apply' button is pressed (if `hasApplyButton` is true)\n */\n onApply?: () => void;\n /**\n * Whether to show the 'Apply' button.\n */\n hasApplyButton?: boolean;\n /**\n * Called when 'Clear' button is pressed.\n */\n onClear?: () => void;\n /**\n * Whether the button is disabled.\n */\n isDisabled?: boolean;\n /**\n * Whether the 'Apply' button is disabled.\n */\n isApplyDisabled?: boolean;\n /**\n * Whether the 'Clear' button is disabled.\n */\n isClearDisabled?: boolean;\n /**\n * The label of the 'Clear' button.\n * @default \"Clear\"\n */\n clearButtonLabel?: ReactNode;\n /**\n * The label of the 'Apply' button.\n * @default \"Apply\"\n */\n applyButtonLabel?: ReactNode;\n /**\n * The size of the buttons incl. the trigger itself.\n * @default 'md'\n */\n buttonSize?: 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n children,\n label,\n value,\n isDisabled = false,\n isApplyDisabled = false,\n isClearDisabled,\n isOpen: isOpenProp,\n applyButtonLabel = 'Apply',\n clearButtonLabel = 'Clear',\n defaultOpen = false,\n hasApplyButton = false,\n noMaxWidth,\n onApply,\n onClear,\n onOpenChange,\n buttonSize = 'md',\n}: FilterDropdownProps): JSX.Element {\n const triggerRef = useRef<FocusableRefValue>(null);\n\n // We need to know if the dropdown is open or not, so we control the state here, still\n // allowing for both controlled and uncontrolled modes.\n const [isOpen, setIsOpen] = useControlledState(\n isOpenProp,\n defaultOpen,\n useEffectEvent(onOpenChange)\n );\n const hasValue = value != null && value !== '';\n const close = () => setIsOpen(false);\n const apply = () => {\n onApply?.();\n close();\n // We need to manually restore focus to trigger as apply button is a form submit button\n triggerRef.current?.focus();\n };\n\n const applyButton = (\n <Button\n type=\"submit\"\n size={buttonSize}\n excludeFromTabOrder={!hasApplyButton}\n isDisabled={isApplyDisabled}\n >\n {applyButtonLabel}\n </Button>\n );\n return (\n <PopoverTrigger\n ref={triggerRef}\n placement=\"bottom left\"\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n noMaxWidth={noMaxWidth}\n noPadding\n popoverContent={\n <form onSubmit={apply} className={styles['sapphire-filter-dropdown']}>\n <div className={styles['sapphire-filter-dropdown__body']}>\n {children}\n </div>\n <div className={styles['sapphire-filter-dropdown__footer']}>\n <Button\n size={buttonSize}\n variant=\"secondary\"\n onPress={() => {\n close();\n onClear?.();\n }}\n isDisabled={isClearDisabled ?? !hasValue}\n >\n {clearButtonLabel}\n </Button>\n {hasApplyButton ? (\n applyButton\n ) : (\n // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n <VisuallyHidden>{applyButton}</VisuallyHidden>\n )}\n </div>\n </form>\n }\n >\n <ToggleButton\n icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n iconAlign=\"right\"\n isSelected={hasValue}\n isDisabled={isDisabled}\n size={buttonSize}\n >\n {label}\n {value ? ': ' : ''}\n {value}\n </ToggleButton>\n </PopoverTrigger>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { useRef, ReactNode } from 'react';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { useEffectEvent } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n Button,\n PopoverTrigger,\n PopoverTriggerProps,\n SapphireStyleProps,\n ToggleButton,\n} from '@danske/sapphire-react';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\nimport { FocusableRefValue } from '@react-types/shared';\nimport styles from '@danske/sapphire-css/components/filterDropdown/filterDropdown.module.css';\n\nexport interface FilterDropdownProps\n extends SapphireStyleProps,\n Pick<\n PopoverTriggerProps,\n 'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n > {\n /**\n * \"Filter by\" label, shown inside the trigger button.\n */\n label: ReactNode;\n /**\n * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n * considered as unset value.\n */\n value: ReactNode;\n /**\n * Filtering UI controls, rendered in a popover.\n */\n children: ReactNode;\n /**\n * Called when:\n * - `Enter` is pressed on form fields rendered inside the popover.\n * - 'Apply' button is pressed (if `hasApplyButton` is true)\n */\n onApply?: () => void;\n /**\n * Whether to show the 'Apply' button.\n */\n hasApplyButton?: boolean;\n /**\n * Called when 'Clear' button is pressed.\n */\n onClear?: () => void;\n /**\n * Whether the button is disabled.\n */\n isDisabled?: boolean;\n /**\n * Whether the 'Apply' button is disabled.\n */\n isApplyDisabled?: boolean;\n /**\n * Whether the 'Clear' button is disabled.\n */\n isClearDisabled?: boolean;\n /**\n * The label of the 'Clear' button.\n * @default \"Clear\"\n */\n clearButtonLabel?: ReactNode;\n /**\n * The label of the 'Apply' button.\n * @default \"Apply\"\n */\n applyButtonLabel?: ReactNode;\n /**\n * The size of the buttons incl. the trigger itself.\n * @default 'md'\n */\n buttonSize?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n children,\n label,\n value,\n isDisabled = false,\n isApplyDisabled = false,\n isClearDisabled,\n isOpen: isOpenProp,\n applyButtonLabel = 'Apply',\n clearButtonLabel = 'Clear',\n defaultOpen = false,\n hasApplyButton = false,\n noMaxWidth,\n onApply,\n onClear,\n onOpenChange,\n buttonSize = 'md',\n}: FilterDropdownProps): JSX.Element {\n const triggerRef = useRef<FocusableRefValue>(null);\n\n // We need to know if the dropdown is open or not, so we control the state here, still\n // allowing for both controlled and uncontrolled modes.\n const [isOpen, setIsOpen] = useControlledState(\n isOpenProp,\n defaultOpen,\n useEffectEvent(onOpenChange)\n );\n const hasValue = value != null && value !== '';\n const close = () => setIsOpen(false);\n const apply = () => {\n onApply?.();\n close();\n // We need to manually restore focus to trigger as apply button is a form submit button\n triggerRef.current?.focus();\n };\n\n const applyButton = (\n <Button\n type=\"submit\"\n size={buttonSize}\n excludeFromTabOrder={!hasApplyButton}\n isDisabled={isApplyDisabled}\n >\n {applyButtonLabel}\n </Button>\n );\n return (\n <PopoverTrigger\n ref={triggerRef}\n placement=\"bottom left\"\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n noMaxWidth={noMaxWidth}\n noPadding\n popoverContent={\n <form onSubmit={apply} className={styles['sapphire-filter-dropdown']}>\n <div className={styles['sapphire-filter-dropdown__body']}>\n {children}\n </div>\n <div className={styles['sapphire-filter-dropdown__footer']}>\n <Button\n size={buttonSize}\n variant=\"secondary\"\n onPress={() => {\n close();\n onClear?.();\n }}\n isDisabled={isClearDisabled ?? !hasValue}\n >\n {clearButtonLabel}\n </Button>\n {hasApplyButton ? (\n applyButton\n ) : (\n // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n <VisuallyHidden>{applyButton}</VisuallyHidden>\n )}\n </div>\n </form>\n }\n >\n <ToggleButton\n icon={isOpen ? <ChevronUp /> : <ChevronDown />}\n iconAlign=\"right\"\n isSelected={hasValue}\n isDisabled={isDisabled}\n size={buttonSize}\n >\n {label}\n {value ? ': ' : ''}\n {value}\n </ToggleButton>\n </PopoverTrigger>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -18,7 +18,6 @@ import '@danske/sapphire-icons/react';
|
|
|
18
18
|
import '@react-aria/focus';
|
|
19
19
|
import '@react-stately/collections';
|
|
20
20
|
import '@react-aria/label';
|
|
21
|
-
import '@danske/sapphire-css/components/labeledValue/labeledValue.module.css';
|
|
22
21
|
import '@react-aria/i18n';
|
|
23
22
|
|
|
24
23
|
var __defProp = Object.defineProperty;
|
|
@@ -72,14 +71,13 @@ function SearchableSelectFilter(props) {
|
|
|
72
71
|
flexDirection: "column",
|
|
73
72
|
height: "100%"
|
|
74
73
|
}, cloneElement(searchField, {
|
|
75
|
-
size,
|
|
74
|
+
size: "md",
|
|
76
75
|
value: searchFieldProps.value || searchQuery,
|
|
77
76
|
inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),
|
|
78
77
|
width: searchFieldProps.width || "100%",
|
|
79
|
-
marginBottom: searchFieldProps.marginBottom || tokens.size.
|
|
78
|
+
marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,
|
|
80
79
|
onChange: setSearchQuery
|
|
81
80
|
}), cloneElement(listBox, {
|
|
82
|
-
size,
|
|
83
81
|
connectedInputRef: searchFieldRef,
|
|
84
82
|
selectionMode: listBoxProps.selectionMode || "multiple",
|
|
85
83
|
marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchableSelectFilter.js","sources":["../../../../src/Filtering/src/SearchableSelectFilter.tsx"],"sourcesContent":["import React, { cloneElement, ReactElement, useRef } from 'react';\nimport {\n Flex,\n ListBoxProps,\n SapphireStyleProps,\n SearchFieldPropsWithRef,\n tokens,\n} from '@danske/sapphire-react';\nimport { FilterDropdown, FilterDropdownProps } from '../..';\nimport { mergeRefs } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\n\nexport interface SearchableSelectFilterProps\n extends SapphireStyleProps,\n Omit<FilterDropdownProps, 'children'> {\n /**\n * The SearchField to search items with.\n */\n searchField: ReactElement<SearchFieldPropsWithRef<object>>;\n /**\n * The ListBox to select items from.\n */\n listBox: ReactElement<ListBoxProps<object>>;\n /**\n * The
|
|
1
|
+
{"version":3,"file":"SearchableSelectFilter.js","sources":["../../../../src/Filtering/src/SearchableSelectFilter.tsx"],"sourcesContent":["import React, { cloneElement, ReactElement, useRef } from 'react';\nimport {\n Flex,\n ListBoxProps,\n SapphireStyleProps,\n SearchFieldPropsWithRef,\n tokens,\n} from '@danske/sapphire-react';\nimport { FilterDropdown, FilterDropdownProps } from '../..';\nimport { mergeRefs } from '@react-aria/utils';\nimport { useControlledState } from '@react-stately/utils';\n\nexport interface SearchableSelectFilterProps\n extends SapphireStyleProps,\n Omit<FilterDropdownProps, 'children'> {\n /**\n * The SearchField to search items with.\n */\n searchField: ReactElement<SearchFieldPropsWithRef<object>>;\n /**\n * The ListBox to select items from.\n */\n listBox: ReactElement<ListBoxProps<object>>;\n /**\n * The Button size of the trigger\n * @default 'md'\n */\n size?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function SearchableSelectFilter(\n props: SearchableSelectFilterProps\n): JSX.Element {\n const { searchField, listBox, size = 'md', ...otherProps } = props;\n const searchFieldRef = useRef<HTMLInputElement>(null);\n\n const searchFieldProps = searchField.props;\n const listBoxProps = listBox.props;\n\n const [searchQuery, setSearchQuery] = useControlledState(\n searchFieldProps?.value,\n '',\n searchFieldProps.onChange\n );\n\n if (\n listBoxProps.connectedInputRef &&\n typeof process !== 'undefined' &&\n process.env?.NODE_ENV === 'development'\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n 'The connectedInputRef prop on the ListBox in the SearchableSelectFilter component is not needed and will be ignored. The connectedInputRef is set automatically (to the passed SearchField) and should not be set manually.'\n );\n }\n\n const hasSelection =\n listBoxProps.selectedKeys === 'all' ||\n Array.from(listBoxProps.selectedKeys || []).length > 0;\n\n return (\n <FilterDropdown\n {...otherProps}\n noMaxWidth={otherProps.noMaxWidth ?? true}\n buttonSize={size}\n // Since useCollectionFocusProxy disables normal form submission behaviour on \"Enter\"\n // the apply button is the only way to submit, which is why we add it if an onApply function is passed\n hasApplyButton={Boolean(otherProps.onApply)}\n // In scenarios where selections are not applied immediately we want to allow cancelling\n // the filter selection via 'Clear' button as soon as at least 1 item is selected\n isClearDisabled={\n otherProps.isClearDisabled || (!hasSelection && !otherProps.value)\n }\n >\n <Flex flexDirection=\"column\" height=\"100%\">\n {cloneElement(searchField, {\n size: 'md',\n value: searchFieldProps.value || searchQuery,\n inputRef: mergeRefs(searchFieldRef, searchFieldProps.inputRef),\n width: searchFieldProps.width || '100%',\n marginBottom: searchFieldProps.marginBottom || tokens.size.spacingSm,\n onChange: setSearchQuery,\n })}\n {cloneElement(listBox, {\n connectedInputRef: searchFieldRef,\n selectionMode: listBoxProps.selectionMode || 'multiple',\n marginX: `calc(${tokens.size.spacingContainerHorizontalSm.value} * -1)`,\n hasScrollDividers: true,\n filter:\n // This is a way to also allow opting out of the internal filter with filter={undefined}\n // without us having to allow for more values on the ListBox filter prop\n 'filter' in listBoxProps\n ? listBoxProps.filter\n : (textValue: string) =>\n textValue.toLowerCase().includes(searchQuery.toLowerCase()),\n })}\n </Flex>\n </FilterDropdown>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAA,sBAAA,CACL,KACa,EAAA;AAnCf,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAoCE,EAA6D,MAAA,EAAA,GAAA,KAAA,EAArD,EAAa,WAAA,EAAA,OAAA,EAAS,IAAO,GAAA,IAAA,EAAA,GAAwB,IAAf,UAAe,GAAA,SAAA,CAAA,EAAA,EAAf,CAAtC,aAAA,EAAa,SAAS,EAAA,MAAA,CAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,iBAAiB,MAAyB,CAAA,IAAA,CAAA,CAAA;AAEhD,EAAA,MAAM,mBAAmB,WAAY,CAAA,KAAA,CAAA;AACrC,EAAA,MAAM,eAAe,OAAQ,CAAA,KAAA,CAAA;AAE7B,EAAA,MAAM,CAAC,WAAa,EAAA,cAAA,CAAA,GAAkB,mBACpC,gBAAkB,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,gBAAA,CAAA,KAAA,EAClB,IACA,gBAAiB,CAAA,QAAA,CAAA,CAAA;AAGnB,EACE,IAAA,YAAA,CAAa,qBACb,OAAO,OAAA,KAAY,eACnB,CAAQ,CAAA,EAAA,GAAA,OAAA,CAAA,GAAA,KAAR,IAAa,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA,MAAa,aAC1B,EAAA;AAEA,IAAA,OAAA,CAAQ,IACN,CAAA,6NAAA,CAAA,CAAA;AAAA,GAAA;AAIJ,EAAM,MAAA,YAAA,GACJ,aAAa,YAAiB,KAAA,KAAA,IAC9B,MAAM,IAAK,CAAA,YAAA,CAAa,YAAgB,IAAA,EAAA,CAAA,CAAI,MAAS,GAAA,CAAA,CAAA;AAEvD,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,cAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,UADN,CAAA,EAAA;AAAA,IAEE,UAAA,EAAY,CAAW,EAAA,GAAA,UAAA,CAAA,UAAA,KAAX,IAAyB,GAAA,EAAA,GAAA,IAAA;AAAA,IACrC,UAAY,EAAA,IAAA;AAAA,IAGZ,cAAA,EAAgB,QAAQ,UAAW,CAAA,OAAA,CAAA;AAAA,IAGnC,iBACE,UAAW,CAAA,eAAA,IAAoB,CAAC,YAAA,IAAgB,CAAC,UAAW,CAAA,KAAA;AAAA,GAAA,CAAA,sCAG7D,IAAD,EAAA;AAAA,IAAM,aAAc,EAAA,QAAA;AAAA,IAAS,MAAO,EAAA,MAAA;AAAA,GAAA,EACjC,aAAa,WAAa,EAAA;AAAA,IACzB,IAAM,EAAA,IAAA;AAAA,IACN,KAAA,EAAO,iBAAiB,KAAS,IAAA,WAAA;AAAA,IACjC,QAAA,EAAU,SAAU,CAAA,cAAA,EAAgB,gBAAiB,CAAA,QAAA,CAAA;AAAA,IACrD,KAAA,EAAO,iBAAiB,KAAS,IAAA,MAAA;AAAA,IACjC,YAAc,EAAA,gBAAA,CAAiB,YAAgB,IAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IAC3D,QAAU,EAAA,cAAA;AAAA,GAAA,CAAA,EAEX,aAAa,OAAS,EAAA;AAAA,IACrB,iBAAmB,EAAA,cAAA;AAAA,IACnB,aAAA,EAAe,aAAa,aAAiB,IAAA,UAAA;AAAA,IAC7C,OAAS,EAAA,CAAA,KAAA,EAAQ,MAAO,CAAA,IAAA,CAAK,4BAA6B,CAAA,KAAA,CAAA,MAAA,CAAA;AAAA,IAC1D,iBAAmB,EAAA,IAAA;AAAA,IACnB,MAAA,EAGE,QAAY,IAAA,YAAA,GACR,YAAa,CAAA,MAAA,GACb,CAAC,SACC,KAAA,SAAA,CAAU,WAAc,EAAA,CAAA,QAAA,CAAS,WAAY,CAAA,WAAA,EAAA,CAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import clsx from 'clsx';
|
|
3
2
|
import { useField } from '@react-aria/label';
|
|
4
3
|
import { useThemeCheck, Field, Label } from '@danske/sapphire-react';
|
|
5
|
-
import styles from '@danske/sapphire-css/components/labeledValue/labeledValue.module.css';
|
|
6
4
|
import { mergeProps } from '@react-aria/utils';
|
|
7
5
|
|
|
8
6
|
var __defProp = Object.defineProperty;
|
|
@@ -59,11 +57,7 @@ function LabeledValue(_a) {
|
|
|
59
57
|
}), /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, {
|
|
60
58
|
contextualHelp,
|
|
61
59
|
size
|
|
62
|
-
}, label)), /* @__PURE__ */ React.createElement(Field.Control, null,
|
|
63
|
-
className: clsx(styles["sapphire-labeled-value"], {
|
|
64
|
-
[styles["sapphire-labeled-value--md"]]: size === "md"
|
|
65
|
-
})
|
|
66
|
-
}, children)));
|
|
60
|
+
}, label)), /* @__PURE__ */ React.createElement(Field.Control, null, children));
|
|
67
61
|
}
|
|
68
62
|
|
|
69
63
|
export { LabeledValue };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport
|
|
1
|
+
{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useField } from '@react-aria/label';\nimport type { DOMProps } from '@react-types/shared';\nimport {\n Field,\n Label,\n SapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport { mergeProps } from '@react-aria/utils';\n\nexport interface LabeledValueProps extends DOMProps, SapphireStyleProps {\n children?: React.ReactNode;\n /**\n * A HelpButton element to place next to the label.\n */\n contextualHelp?: ReactNode;\n /**\n * The content to display as a label.\n */\n label: ReactNode;\n /**\n * Places the label either above (default) or on the left side of tags.\n * @default 'above'\n */\n labelPlacement?: 'above' | 'side';\n /**\n * @default 'lg'\n */\n size?: 'lg' | 'md';\n}\n\nexport function LabeledValue({\n children,\n contextualHelp,\n label,\n labelPlacement = 'above',\n size = 'lg',\n ...otherProps\n}: LabeledValueProps) {\n useThemeCheck();\n const { fieldProps } = useField({ label });\n\n return (\n <Field\n {...mergeProps(fieldProps, otherProps)}\n labelPlacement={labelPlacement}\n size={size}\n noDefaultWidth\n >\n <Field.Label>\n <Label contextualHelp={contextualHelp} size={size}>\n {label}\n </Label>\n </Field.Label>\n <Field.Control>{children}</Field.Control>\n </Field>\n );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCO,SAAA,YAAA,CAAsB,EAOP,EAAA;AAPO,EAC3B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAO,GAAA,IAAA;AAAA,GALoB,GAAA,EAAA,EAMxB,uBANwB,EAMxB,EAAA;AAAA,IALH,UAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA,EAAE,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,KAAA,EAAA,CAAA,CAAA;AAElC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,aACM,CAAA,cAAA,CAAA,EAAA,EAAA,UAAA,CAAW,YAAY,UAD7B,CAAA,CAAA,EAAA;AAAA,IAEE,cAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAc,EAAA,IAAA;AAAA,GAAA,CAAA,kBAEb,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,KAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IAAO,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,EACpC,KAGL,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAM,CAAA,OAAA,EAAP,IAAgB,EAAA,QAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -90,7 +90,7 @@ const NumberField = forwardRef(function NumberField2(props, ref) {
|
|
|
90
90
|
incrementAriaLabel: incrementAriaLabel != null ? incrementAriaLabel : formatMessage("increment"),
|
|
91
91
|
decrementAriaLabel: decrementAriaLabel != null ? decrementAriaLabel : formatMessage("decrement")
|
|
92
92
|
}), inputRef);
|
|
93
|
-
const { focusProps, isFocusVisible } = useFocusRing(
|
|
93
|
+
const { focusProps, isFocusVisible } = useFocusRing();
|
|
94
94
|
const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
|
|
95
95
|
const containerRef = useRef(null);
|
|
96
96
|
useImperativeHandle(ref, () => __spreadProps(__spreadValues({}, createFocusableRef(containerRef, inputRef)), {
|
|
@@ -101,10 +101,11 @@ const NumberField = forwardRef(function NumberField2(props, ref) {
|
|
|
101
101
|
return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, removeUniqueDOMProps(otherProps)), {
|
|
102
102
|
ref: containerRef,
|
|
103
103
|
isDisabled,
|
|
104
|
-
error: !!error,
|
|
105
104
|
size,
|
|
106
105
|
labelPlacement
|
|
107
|
-
}),
|
|
106
|
+
}), /* @__PURE__ */ React.createElement(Field.Context, {
|
|
107
|
+
descriptionProps: error ? errorMessageProps : descriptionProps
|
|
108
|
+
}, label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
|
|
108
109
|
size,
|
|
109
110
|
necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
|
|
110
111
|
contextualHelp
|
|
@@ -139,7 +140,9 @@ const NumberField = forwardRef(function NumberField2(props, ref) {
|
|
|
139
140
|
}, incrementButtonProps)), /* @__PURE__ */ React.createElement(StepperButton, __spreadValues({
|
|
140
141
|
variant: "decrement",
|
|
141
142
|
size
|
|
142
|
-
}, decrementButtonProps))))), (error || note) && /* @__PURE__ */ React.createElement(Field.Footer, null, error
|
|
143
|
+
}, decrementButtonProps))))), (error || note) && /* @__PURE__ */ React.createElement(Field.Footer, null, error && typeof error !== "boolean" ? /* @__PURE__ */ React.createElement(Field.Note, {
|
|
144
|
+
variant: "error"
|
|
145
|
+
}, error) : note ? note : /* @__PURE__ */ React.createElement(React.Fragment, null))));
|
|
143
146
|
});
|
|
144
147
|
const removeUniqueDOMProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => name !== "id" && !name.startsWith("data-")));
|
|
145
148
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberField.js","sources":["../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ForwardedRef,\n ReactNode,\n RefObject,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport clsx from 'clsx';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport {\n Field,\n Label,\n SapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\n\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport {\n SapphireNumberFieldProps,\n useSapphireNumberField,\n} from './useSapphireNumberField';\n\nexport type NumberFieldRef = FocusableRefValue<\n HTMLInputElement,\n HTMLDivElement\n> & {\n getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n extends SapphireNumberFieldProps,\n PressEvents,\n SapphireStyleProps {\n prefix?: ReactNode;\n postfix?: ReactNode;\n inputRef?: RefObject<HTMLInputElement | null>;\n /**\n * A note to show below the input.\n * If the input has an error message, this note will be replaced by that.\n */\n note?: ReactNode;\n /**\n * A HelpButton to render next to the label.\n */\n contextualHelp?: ReactNode;\n /**\n * To visually indicate if this field is required or optional.\n * @default false\n */\n necessityIndicator?: boolean;\n /**\n * @default 'lg'\n */\n size?: 'lg' | 'md';\n /**\n * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n */\n alignInputRight?: boolean;\n /**\n * Places the label either above (default) or on the side of the control.\n * @default 'above'\n */\n labelPlacement?: 'side' | 'above';\n /**\n * To show the buttons for incrementing and decrementing the value.\n * @default false\n */\n showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n props: NumberFieldProps,\n ref: ForwardedRef<NumberFieldRef>\n) {\n const {\n label,\n isDisabled,\n error,\n note,\n isRequired,\n contextualHelp,\n prefix,\n postfix,\n size = 'lg',\n labelPlacement = 'above',\n necessityIndicator = false,\n alignInputRight,\n showButtons = false,\n incrementAriaLabel,\n decrementAriaLabel,\n ...otherProps\n } = props;\n useThemeCheck();\n const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n const formatMessage = useMessageFormatter(intlMessages);\n const {\n inputProps,\n labelProps,\n incrementButtonProps,\n decrementButtonProps,\n descriptionProps,\n errorMessageProps,\n } = useSapphireNumberField(\n {\n ...props,\n incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n },\n inputRef\n );\n const { focusProps, isFocusVisible } = useFocusRing(props);\n const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(containerRef, inputRef),\n /**\n * (This function is deprecated. Use `inputRef` prop)\n * @deprecated\n */\n getInputElement() {\n return inputRef.current;\n },\n }));\n\n return (\n <Field\n // otherProps contains some of the same props as inputProps. That is\n // intended, but some DOM props, like \"id\", should not be repeated\n {...removeUniqueDOMProps(otherProps)}\n ref={containerRef}\n isDisabled={isDisabled}\n error={!!error}\n size={size}\n labelPlacement={labelPlacement}\n >\n {label && (\n <Field.Label>\n <Label\n {...labelProps}\n size={size}\n necessityIndicator={\n isRequired && necessityIndicator\n ? 'required'\n : !isRequired && necessityIndicator\n ? 'optional'\n : undefined\n }\n contextualHelp={contextualHelp}\n >\n {label}\n </Label>\n </Field.Label>\n )}\n <Field.Control>\n <div\n className={clsx(textFieldStyles['sapphire-text-field'], {\n [textFieldStyles['is-focus']]: isFocusVisible,\n [textFieldStyles['sapphire-text-field--error']]:\n error === true || typeof error === 'string',\n [textFieldStyles['sapphire-text-field--md']]: size === 'md',\n })}\n >\n {prefix && (\n <span\n className={clsx(textFieldStyles['sapphire-text-field__prefix'], {\n [textFieldStyles['sapphire-text-field__prefix--icon']]:\n typeof prefix !== 'string',\n })}\n >\n {prefix}\n </span>\n )}\n <input\n {...mergeProps(inputProps, focusProps, {\n onChange: updateStyle,\n onBlur: updateStyle,\n })}\n ref={inputRef}\n className={clsx(textFieldStyles['sapphire-text-field__input'], {\n [textFieldStyles['sapphire-text-field__input--align-right']]:\n !!alignInputRight,\n })}\n style={autofillStyles}\n />\n {postfix && (\n <span\n className={clsx(textFieldStyles['sapphire-text-field__postfix'], {\n [textFieldStyles['sapphire-text-field__postfix--icon']]:\n typeof postfix !== 'string',\n })}\n >\n {postfix}\n </span>\n )}\n {showButtons && (\n <div\n className={clsx(textFieldStyles['sapphire-text-field__stepper'])}\n >\n <StepperButton\n variant=\"increment\"\n size={size}\n {...incrementButtonProps}\n />\n <StepperButton\n variant=\"decrement\"\n size={size}\n {...decrementButtonProps}\n />\n </div>\n )}\n </div>\n </Field.Control>\n {(error || note) && (\n <Field.Footer>\n {error ? (\n <Field.Note {...errorMessageProps}>{error}</Field.Note>\n ) : note ? (\n <Field.Note {...descriptionProps}>{note}</Field.Note>\n ) : (\n <></>\n )}\n </Field.Footer>\n )}\n </Field>\n );\n});\n\n// Once moved to the core package, this function should be removed and instead consume the one from TextFieldBase.\nconst removeUniqueDOMProps = (props: Record<any, any>): Record<any, any> =>\n Object.fromEntries(\n Object.entries(props).filter(\n ([name]) => name !== 'id' && !name.startsWith('data-')\n )\n );\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NumberField.js","sources":["../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import React, {\n forwardRef,\n ForwardedRef,\n ReactNode,\n RefObject,\n useImperativeHandle,\n useRef,\n} from 'react';\nimport clsx from 'clsx';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport {\n Field,\n Label,\n SapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\n\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport {\n SapphireNumberFieldProps,\n useSapphireNumberField,\n} from './useSapphireNumberField';\n\nexport type NumberFieldRef = FocusableRefValue<\n HTMLInputElement,\n HTMLDivElement\n> & {\n getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n extends SapphireNumberFieldProps,\n PressEvents,\n SapphireStyleProps {\n prefix?: ReactNode;\n postfix?: ReactNode;\n inputRef?: RefObject<HTMLInputElement | null>;\n /**\n * A note to show below the input.\n * If the input has an error message, this note will be replaced by that.\n */\n note?: ReactNode;\n /**\n * A HelpButton to render next to the label.\n */\n contextualHelp?: ReactNode;\n /**\n * To visually indicate if this field is required or optional.\n * @default false\n */\n necessityIndicator?: boolean;\n /**\n * @default 'lg'\n */\n size?: 'lg' | 'md';\n /**\n * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n */\n alignInputRight?: boolean;\n /**\n * Places the label either above (default) or on the side of the control.\n * @default 'above'\n */\n labelPlacement?: 'side' | 'above';\n /**\n * To show the buttons for incrementing and decrementing the value.\n * @default false\n */\n showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n props: NumberFieldProps,\n ref: ForwardedRef<NumberFieldRef>\n) {\n const {\n label,\n isDisabled,\n error,\n note,\n isRequired,\n contextualHelp,\n prefix,\n postfix,\n size = 'lg',\n labelPlacement = 'above',\n necessityIndicator = false,\n alignInputRight,\n showButtons = false,\n incrementAriaLabel,\n decrementAriaLabel,\n ...otherProps\n } = props;\n useThemeCheck();\n const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n const formatMessage = useMessageFormatter(intlMessages);\n const {\n inputProps,\n labelProps,\n incrementButtonProps,\n decrementButtonProps,\n descriptionProps,\n errorMessageProps,\n } = useSapphireNumberField(\n {\n ...props,\n incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n },\n inputRef\n );\n const { focusProps, isFocusVisible } = useFocusRing();\n const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n const containerRef = useRef<HTMLDivElement>(null);\n\n useImperativeHandle(ref, () => ({\n ...createFocusableRef(containerRef, inputRef),\n /**\n * (This function is deprecated. Use `inputRef` prop)\n * @deprecated\n */\n getInputElement() {\n return inputRef.current;\n },\n }));\n\n return (\n <Field\n // otherProps contains some of the same props as inputProps. That is\n // intended, but some DOM props, like \"id\", should not be repeated\n {...removeUniqueDOMProps(otherProps)}\n ref={containerRef}\n isDisabled={isDisabled}\n size={size}\n labelPlacement={labelPlacement}\n >\n <Field.Context\n descriptionProps={error ? errorMessageProps : descriptionProps}\n >\n {label && (\n <Field.Label>\n <Label\n {...labelProps}\n size={size}\n necessityIndicator={\n isRequired && necessityIndicator\n ? 'required'\n : !isRequired && necessityIndicator\n ? 'optional'\n : undefined\n }\n contextualHelp={contextualHelp}\n >\n {label}\n </Label>\n </Field.Label>\n )}\n <Field.Control>\n <div\n className={clsx(textFieldStyles['sapphire-text-field'], {\n [textFieldStyles['is-focus']]: isFocusVisible,\n [textFieldStyles['sapphire-text-field--error']]:\n error === true || typeof error === 'string',\n [textFieldStyles['sapphire-text-field--md']]: size === 'md',\n })}\n >\n {prefix && (\n <span\n className={clsx(\n textFieldStyles['sapphire-text-field__prefix'],\n {\n [textFieldStyles['sapphire-text-field__prefix--icon']]:\n typeof prefix !== 'string',\n }\n )}\n >\n {prefix}\n </span>\n )}\n <input\n {...mergeProps(inputProps, focusProps, {\n onChange: updateStyle,\n onBlur: updateStyle,\n })}\n ref={inputRef}\n className={clsx(textFieldStyles['sapphire-text-field__input'], {\n [textFieldStyles['sapphire-text-field__input--align-right']]:\n !!alignInputRight,\n })}\n style={autofillStyles}\n />\n {postfix && (\n <span\n className={clsx(\n textFieldStyles['sapphire-text-field__postfix'],\n {\n [textFieldStyles['sapphire-text-field__postfix--icon']]:\n typeof postfix !== 'string',\n }\n )}\n >\n {postfix}\n </span>\n )}\n {showButtons && (\n <div\n className={clsx(\n textFieldStyles['sapphire-text-field__stepper']\n )}\n >\n <StepperButton\n variant=\"increment\"\n size={size}\n {...incrementButtonProps}\n />\n <StepperButton\n variant=\"decrement\"\n size={size}\n {...decrementButtonProps}\n />\n </div>\n )}\n </div>\n </Field.Control>\n {(error || note) && (\n <Field.Footer>\n {error && typeof error !== 'boolean' ? (\n <Field.Note variant=\"error\">{error}</Field.Note>\n ) : note ? (\n note\n ) : (\n <></>\n )}\n </Field.Footer>\n )}\n </Field.Context>\n </Field>\n );\n});\n\n// Once moved to the core package, this function should be removed and instead consume the one from TextFieldBase.\nconst removeUniqueDOMProps = (props: Record<any, any>): Record<any, any> =>\n Object.fromEntries(\n Object.entries(props).filter(\n ([name]) => name !== 'id' && !name.startsWith('data-')\n )\n );\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport {
|
|
1
|
+
{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { CaretDown, CaretUp } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n variant,\n size,\n ...props\n}: AriaButtonProps & {\n variant: 'increment' | 'decrement';\n size: 'lg' | 'md';\n}) => {\n const ref = useRef(null);\n const { buttonProps, isPressed } = useButton(props, ref);\n const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n\n return (\n <button\n {...mergeProps(buttonProps, hoverProps, filterDOMProps(props))}\n ref={ref}\n className={clsx(\n styles['sapphire-text-field__stepper-button'],\n styles['js-hover'],\n {\n [styles['is-active']]: isPressed,\n [styles['is-hover']]: isHovered,\n }\n )}\n >\n <Icon size={size === 'lg' ? 'md' : 'sm'}>\n {variant === 'increment' ? <CaretUp /> : <CaretDown />}\n </Icon>\n </button>\n );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,EAOxB,KAAA;AAPwB,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAMA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,eAAe,KADzD,CAAA,CAAA,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACTA,eAAO,CAAA,qCAAA,CAAA,EACPA,gBAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACGA,gBAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtBA,gBAAO,UAAc,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAA,EAAM,IAAS,KAAA,IAAA,GAAO,IAAO,GAAA,IAAA;AAAA,GAAA,EAChC,YAAY,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,IAAA,CAAA,uCAAe,SAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSapphireNumberField.js","sources":["../../../../src/NumberField/src/useSapphireNumberField.ts"],"sourcesContent":["import { RefObject } from 'react';\nimport {\n AriaNumberFieldProps,\n NumberFieldAria,\n useNumberField,\n} from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport { useLocale } from '@react-aria/i18n';\
|
|
1
|
+
{"version":3,"file":"useSapphireNumberField.js","sources":["../../../../src/NumberField/src/useSapphireNumberField.ts"],"sourcesContent":["import React, { RefObject } from 'react';\nimport {\n AriaNumberFieldProps,\n NumberFieldAria,\n useNumberField,\n} from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport { useLocale } from '@react-aria/i18n';\n\nexport interface SapphireNumberFieldProps\n // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n extends Pick<\n AriaNumberFieldProps,\n | 'label'\n | 'isDisabled'\n | 'isRequired'\n | 'value'\n | 'defaultValue'\n | 'onChange'\n | 'incrementAriaLabel'\n | 'decrementAriaLabel'\n | 'onFocus'\n | 'onBlur'\n | 'formatOptions'\n | 'step'\n | 'minValue'\n | 'maxValue'\n | 'placeholder'\n | 'isReadOnly'\n | 'autoFocus'\n > {\n /**\n * Whether the input should render as having an error and an error message.\n * This also sets the appropriate `aria` attributes on the input.\n *\n * A `boolean` sets the error state.\n * A `ReactNode` sets the error state with an additional error message.\n *\n * **An error message is strongly recommended because an error should always have an explanation about how to fix it.**\n */\n error?: boolean | React.ReactNode;\n}\n\nexport const useSapphireNumberField = (\n { error, ...numberFieldProps }: SapphireNumberFieldProps,\n ref: RefObject<HTMLInputElement>\n): NumberFieldAria => {\n const { locale } = useLocale();\n const numberFieldState = useNumberFieldState({\n ...numberFieldProps,\n locale,\n });\n const numberFieldAria = useNumberField(\n {\n ...numberFieldProps,\n validationState:\n error === false || error === undefined ? undefined : 'invalid',\n },\n numberFieldState,\n ref\n );\n\n return numberFieldAria;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Ca,MAAA,sBAAA,GAAyB,CACpC,EAAA,EACA,GACoB,KAAA;AAFpB,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,gBAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAGF,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AACnB,EAAM,MAAA,gBAAA,GAAmB,mBAAoB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACxC,gBADwC,CAAA,EAAA;AAAA,IAE3C,MAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAEF,EAAM,MAAA,eAAA,GAAkB,cACtB,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACK,gBADL,CAAA,EAAA;AAAA,IAEE,eACE,EAAA,KAAA,KAAU,KAAS,IAAA,KAAA,KAAU,SAAY,KAAY,CAAA,GAAA,SAAA;AAAA,GAAA,CAAA,EAEzD,gBACA,EAAA,GAAA,CAAA,CAAA;AAGF,EAAO,OAAA,eAAA,CAAA;AAAA;;;;"}
|
|
@@ -5,7 +5,7 @@ import { useHover } from '@react-aria/interactions';
|
|
|
5
5
|
import { useTag } from '@react-aria/tag';
|
|
6
6
|
import { mergeProps } from '@react-aria/utils';
|
|
7
7
|
import { useThemeCheck, Icon } from '@danske/sapphire-react';
|
|
8
|
-
import { Close,
|
|
8
|
+
import { Close, Error } from '@danske/sapphire-icons/react';
|
|
9
9
|
import styles from '@danske/sapphire-css/components/tag/tag.module.css';
|
|
10
10
|
import { FocusRing } from '@react-aria/focus';
|
|
11
11
|
|
|
@@ -98,7 +98,7 @@ const IconError = () => {
|
|
|
98
98
|
className: clsx(styles["sapphire-tag__error-icon"])
|
|
99
99
|
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
100
100
|
size: "sm"
|
|
101
|
-
}, /* @__PURE__ */ React.createElement(
|
|
101
|
+
}, /* @__PURE__ */ React.createElement(Error, null)));
|
|
102
102
|
};
|
|
103
103
|
|
|
104
104
|
export { Tag };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.js","sources":["../../../../src/TagGroup/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useTag } from '@react-aria/tag';\nimport { mergeProps } from '@react-aria/utils';\nimport type { ListState } from '@react-stately/list';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { Icon, useThemeCheck } from '@danske/sapphire-react';\nimport {
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../../../src/TagGroup/src/Tag.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport { AriaButtonProps, useButton } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { useTag } from '@react-aria/tag';\nimport { mergeProps } from '@react-aria/utils';\nimport type { ListState } from '@react-stately/list';\nimport type { FocusableElement, Node } from '@react-types/shared';\n\nimport { Icon, useThemeCheck } from '@danske/sapphire-react';\nimport { Close, Error } from '@danske/sapphire-icons/react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\nimport { FocusRing } from '@react-aria/focus';\n\nexport interface TagProps<T> {\n /**\n * Object representing the tag. Contains relevant information about the tag.\n */\n item: Node<T>;\n /**\n * State for TagGroup, returned by `useListState`\n */\n state: ListState<T>;\n /**\n * Shows error icon.\n * @default 'false'\n */\n hasError?: boolean;\n /**\n * Control whether the tag is removable or not.\n * This behavior is overridden to `false` if the tag is disabled.\n *\n * @default false\n */\n allowsRemoving?: boolean;\n}\n\nexport function Tag<T>(props: TagProps<T>) {\n useThemeCheck();\n const { hasError = false, item, state } = props;\n const ref = useRef(null);\n const {\n gridCellProps,\n isDisabled,\n isFocused,\n isPressed,\n removeButtonProps,\n rowProps: { onKeyDown, ...rowProps },\n ...otherProps\n } = useTag(props, state, ref);\n const { hoverProps, isHovered } = useHover({ isDisabled });\n /* hasAction prop is passed when onAction is present, we are using it to set the hover and action classes.\n The workaround below is made because AriaTagProps Omit's hasAction to avoid typecheck error */\n const hasAction = (otherProps as any).hasAction;\n\n return (\n <FocusRing focusRingClass={styles['is-focus']}>\n <div\n ref={ref}\n {...mergeProps(\n {\n onKeyDown: (e: React.KeyboardEvent<FocusableElement>) => {\n /* We are removing Space key interaction and prevent default behavior to avoid isPressed prop being set\n as we do not want to apply is-active class on \"Space\" interaction when having actionable tags with onAction or link */\n if (e.key !== ' ') {\n onKeyDown?.(e);\n } else {\n e.preventDefault();\n }\n },\n },\n rowProps,\n hoverProps\n )}\n className={clsx(\n styles['sapphire-tag'],\n styles['js-focus'],\n styles['js-hover'],\n {\n [styles['sapphire-tag--actionable']]: hasAction,\n [styles['is-active']]: hasAction && isPressed,\n [styles['is-hover']]: hasAction && isHovered,\n [styles['is-disabled']]: isDisabled,\n }\n )}\n {...(hasError ? { 'aria-invalid': true } : {})}\n >\n <div {...gridCellProps} className={styles['sapphire-tag__content']}>\n {hasError && !isDisabled && <IconError />}\n {item.rendered}\n {!isDisabled && props.allowsRemoving && (\n <RemoveButton {...(removeButtonProps as AriaButtonProps)} />\n )}\n </div>\n </div>\n </FocusRing>\n );\n}\n\nfunction RemoveButton(removeButtonProps: AriaButtonProps) {\n const buttonRef = useRef(null);\n const { buttonProps } = useButton(removeButtonProps, buttonRef);\n return (\n <button\n {...buttonProps}\n className={clsx(styles['sapphire-tag__button'], styles['js-focus'])}\n >\n <Icon size=\"sm\">\n <Close />\n </Icon>\n </button>\n );\n}\n\nconst IconError = () => {\n return (\n <span className={clsx(styles['sapphire-tag__error-icon'])}>\n <Icon size=\"sm\">\n <Error />\n </Icon>\n </span>\n );\n};\n"],"names":["Error2"],"mappings":"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"}
|
|
@@ -69,22 +69,25 @@ function TagGroup(props) {
|
|
|
69
69
|
};
|
|
70
70
|
const { descriptionProps, gridProps, labelProps, errorMessageProps } = useTagGroup(__spreadProps(__spreadValues({}, props), { onRemove }), state, ref);
|
|
71
71
|
return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, otherProps), {
|
|
72
|
-
error: !!errorMessage,
|
|
73
72
|
labelPlacement,
|
|
74
73
|
labelVerticalAlignment: "top",
|
|
75
74
|
noDefaultWidth: true
|
|
76
|
-
}),
|
|
75
|
+
}), /* @__PURE__ */ React.createElement(Field.Context, {
|
|
76
|
+
descriptionProps: errorMessage ? errorMessageProps : descriptionProps
|
|
77
|
+
}, (labelText || contextualHelp) && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
|
|
77
78
|
contextualHelp
|
|
78
79
|
}), labelText)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, gridProps), {
|
|
79
80
|
ref,
|
|
80
81
|
className: styles["sapphire-tag-group"]
|
|
81
|
-
}),
|
|
82
|
+
}), Array.from(state.collection).map((item) => /* @__PURE__ */ React.createElement(Tag, {
|
|
82
83
|
key: item.key,
|
|
83
84
|
item,
|
|
84
85
|
state,
|
|
85
86
|
hasError: item.props.hasError,
|
|
86
87
|
allowsRemoving: !!originalOnRemove || !!item.props.onRemove
|
|
87
|
-
})))), (note || errorMessage) && (errorMessage ? /* @__PURE__ */ React.createElement(Field.Footer, null, /* @__PURE__ */ React.createElement(Field.Note,
|
|
88
|
+
})))), (note || errorMessage) && (errorMessage ? /* @__PURE__ */ React.createElement(Field.Footer, null, /* @__PURE__ */ React.createElement(Field.Note, {
|
|
89
|
+
variant: "error"
|
|
90
|
+
}, errorMessage)) : /* @__PURE__ */ React.createElement(Field.Footer, null, note))));
|
|
88
91
|
}
|
|
89
92
|
|
|
90
93
|
export { TagGroup };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n AriaLabelingProps,\n CollectionBase,\n DOMProps,\n} from '@react-types/shared';\nimport {\n Field,\n Label,\n SapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\nimport { TagItemProps } from './TagItem';\n\nexport interface TagGroupProps<T>\n extends CollectionBase<T>,\n DOMProps,\n AriaLabelingProps,\n SapphireStyleProps {\n /**\n * A HelpButton element to place next to the label.\n */\n contextualHelp?: ReactNode;\n /**\n * Custom error message help text.\n */\n errorMessage?: string;\n /**\n * The label of the tag group.\n */\n label?: string;\n /**\n * Places the label either above (default) or on the left side of tags.\n * @default 'above'\n */\n labelPlacement?: 'above' | 'side';\n /**\n * Help text description displayed below tags.\n */\n note?: string;\n /**\n * onAction handler passed down for actionable Tags, called onPress of tags.\n */\n onAction?: (key: Key) => void;\n /**\n * Handler that is called when a user deletes a tag.\n *\n * @deprecated Use `onRemove` prop on the `TagItem` component instead.\n * This prop will be removed when this component is moved to \"@danske/sapphire-react\".\n */\n onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(props: TagGroupProps<T>) {\n useThemeCheck();\n const {\n contextualHelp,\n errorMessage,\n label: labelText,\n labelPlacement = 'above',\n note,\n onRemove: originalOnRemove,\n ...otherProps\n } = props;\n const ref = useRef(null);\n const state = useListState(props);\n\n // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n // If an external onRemove handler is provided, use it directly.\n // Otherwise, call individual onRemove handlers on each tag item.\n const onRemove = originalOnRemove\n ? (keys: Set<Key>) => {\n // eslint-disable-next-line no-console -- It's good to warn about the deprecation, but this needs to be removed alongside `onRemove`\n console.warn(\n 'The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.'\n );\n originalOnRemove(keys);\n }\n : (keys: Set<Key>) => {\n // Iterate through the keys and call each item's onRemove handler\n Array.from(keys).forEach((key) => {\n const item = state.collection.getItem(key);\n if (item) {\n (item.props as TagItemProps<T>).onRemove?.();\n }\n });\n };\n\n const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n useTagGroup({ ...props, onRemove }, state, ref);\n\n return (\n <Field\n {...otherProps}\n
|
|
1
|
+
{"version":3,"file":"TagGroup.js","sources":["../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from '@react-aria/tag';\nimport { useListState } from '@react-stately/list';\nimport {\n AriaLabelingProps,\n CollectionBase,\n DOMProps,\n} from '@react-types/shared';\nimport {\n Field,\n Label,\n SapphireStyleProps,\n useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\nimport { TagItemProps } from './TagItem';\n\nexport interface TagGroupProps<T>\n extends CollectionBase<T>,\n DOMProps,\n // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n Pick<\n AriaLabelingProps,\n 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n >,\n SapphireStyleProps {\n /**\n * A HelpButton element to place next to the label.\n */\n contextualHelp?: ReactNode;\n /**\n * Custom error message help text.\n */\n errorMessage?: string;\n /**\n * The label of the tag group.\n */\n label?: string;\n /**\n * Places the label either above (default) or on the left side of tags.\n * @default 'above'\n */\n labelPlacement?: 'above' | 'side';\n /**\n * Help text description displayed below tags.\n */\n note?: string;\n /**\n * onAction handler passed down for actionable Tags, called onPress of tags.\n */\n onAction?: (key: Key) => void;\n /**\n * Handler that is called when a user deletes a tag.\n *\n * @deprecated Use `onRemove` prop on the `TagItem` component instead.\n * This prop will be removed when this component is moved to \"@danske/sapphire-react\".\n */\n onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(props: TagGroupProps<T>) {\n useThemeCheck();\n const {\n contextualHelp,\n errorMessage,\n label: labelText,\n labelPlacement = 'above',\n note,\n onRemove: originalOnRemove,\n ...otherProps\n } = props;\n const ref = useRef(null);\n const state = useListState(props);\n\n // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n // If an external onRemove handler is provided, use it directly.\n // Otherwise, call individual onRemove handlers on each tag item.\n const onRemove = originalOnRemove\n ? (keys: Set<Key>) => {\n // eslint-disable-next-line no-console -- It's good to warn about the deprecation, but this needs to be removed alongside `onRemove`\n console.warn(\n 'The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.'\n );\n originalOnRemove(keys);\n }\n : (keys: Set<Key>) => {\n // Iterate through the keys and call each item's onRemove handler\n Array.from(keys).forEach((key) => {\n const item = state.collection.getItem(key);\n if (item) {\n (item.props as TagItemProps<T>).onRemove?.();\n }\n });\n };\n\n const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n useTagGroup({ ...props, onRemove }, state, ref);\n\n return (\n <Field\n {...otherProps}\n labelPlacement={labelPlacement}\n labelVerticalAlignment=\"top\"\n noDefaultWidth\n >\n <Field.Context\n descriptionProps={errorMessage ? errorMessageProps : descriptionProps}\n >\n {(labelText || contextualHelp) && (\n <Field.Label>\n <Label {...labelProps} contextualHelp={contextualHelp}>\n {labelText}\n </Label>\n </Field.Label>\n )}\n <Field.Control>\n <div\n {...gridProps}\n ref={ref}\n className={styles['sapphire-tag-group']}\n >\n {Array.from(state.collection).map((item) => (\n <Tag\n key={item.key}\n item={item}\n state={state}\n hasError={item.props.hasError}\n // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n // Always allow removing if `onRemove` was provided, for backwards compatibility\n // Allow removal of the tag item if a removal handler is provided\n allowsRemoving={!!originalOnRemove || !!item.props.onRemove}\n />\n ))}\n </div>\n </Field.Control>\n {(note || errorMessage) &&\n (errorMessage ? (\n <Field.Footer>\n <Field.Note variant=\"error\">{errorMessage}</Field.Note>\n </Field.Footer>\n ) : (\n <Field.Footer>{note}</Field.Footer>\n ))}\n </Field.Context>\n </Field>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/build/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import React__default, { ReactNode, ReactElement, RefObject, Key } from 'react';
|
|
3
3
|
import { SapphireStyleProps, PopoverTriggerProps, SearchFieldPropsWithRef, ListBoxProps, TypographyHeadingProps } from '@danske/sapphire-react';
|
|
4
|
-
import { CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps,
|
|
4
|
+
import { CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue, PressEvents } from '@react-types/shared';
|
|
5
5
|
import { HoverProps } from '@react-aria/interactions';
|
|
6
6
|
import { DropOptions } from '@react-aria/dnd';
|
|
7
7
|
import { AriaNumberFieldProps } from '@react-aria/numberfield';
|
|
@@ -61,7 +61,7 @@ interface FilterDropdownProps extends SapphireStyleProps, Pick<PopoverTriggerPro
|
|
|
61
61
|
* The size of the buttons incl. the trigger itself.
|
|
62
62
|
* @default 'md'
|
|
63
63
|
*/
|
|
64
|
-
buttonSize?: 'md' | 'lg';
|
|
64
|
+
buttonSize?: 'sm' | 'md' | 'lg';
|
|
65
65
|
}
|
|
66
66
|
/**
|
|
67
67
|
* A button with a dropdown, used for filtering UI.
|
|
@@ -78,10 +78,10 @@ interface SearchableSelectFilterProps extends SapphireStyleProps, Omit<FilterDro
|
|
|
78
78
|
*/
|
|
79
79
|
listBox: ReactElement<ListBoxProps<object>>;
|
|
80
80
|
/**
|
|
81
|
-
* The
|
|
81
|
+
* The Button size of the trigger
|
|
82
82
|
* @default 'md'
|
|
83
83
|
*/
|
|
84
|
-
size?: 'md' | 'lg';
|
|
84
|
+
size?: 'sm' | 'md' | 'lg';
|
|
85
85
|
}
|
|
86
86
|
/**
|
|
87
87
|
* A button with a dropdown, used for filtering UI.
|
|
@@ -170,7 +170,7 @@ interface FileTriggerProps extends FileSelectProps {
|
|
|
170
170
|
}
|
|
171
171
|
declare const FileTrigger: React__default.ForwardRefExoticComponent<FileTriggerProps & React__default.RefAttributes<HTMLInputElement>>;
|
|
172
172
|
|
|
173
|
-
interface FileDropzoneProps extends SapphireStyleProps, Pick<DropOptions, 'getDropOperation' | 'onDropEnter' | 'onDropActivate' | 'onDropMove' | 'onDropExit' | 'onDrop'>, HoverProps, FileSelectProps, AriaLabelingProps {
|
|
173
|
+
interface FileDropzoneProps extends SapphireStyleProps, Pick<DropOptions, 'getDropOperation' | 'onDropEnter' | 'onDropActivate' | 'onDropMove' | 'onDropExit' | 'onDrop'>, HoverProps, FileSelectProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'> {
|
|
174
174
|
/**
|
|
175
175
|
* Whether the dropzone has an error
|
|
176
176
|
* @default false
|
|
@@ -211,7 +211,7 @@ declare const Flag: React__default.ForwardRefExoticComponent<SapphireStyleProps
|
|
|
211
211
|
* The size of the flag.
|
|
212
212
|
* @default 'lg'
|
|
213
213
|
*/
|
|
214
|
-
size?: "
|
|
214
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | undefined;
|
|
215
215
|
/**
|
|
216
216
|
* Flags come in square or rounded shapes. Square flags are used for display purposes, ensuring a clean and consistent look.
|
|
217
217
|
* Rounded flags are reserved for actionable elements like buttons or selectors, providing a more interactive and approachable feel.
|
|
@@ -221,24 +221,17 @@ declare const Flag: React__default.ForwardRefExoticComponent<SapphireStyleProps
|
|
|
221
221
|
children: React__default.ReactNode;
|
|
222
222
|
} & React__default.RefAttributes<HTMLSpanElement>>;
|
|
223
223
|
|
|
224
|
-
interface SapphireNumberFieldProps
|
|
225
|
-
/**
|
|
226
|
-
* Reasons to omit the below properties:
|
|
227
|
-
* - Validation:
|
|
228
|
-
* - validationState: we handle that with the `error` prop instead.
|
|
229
|
-
* - errorMessage: our own error-prop covers the same.
|
|
230
|
-
*/
|
|
231
|
-
extends Omit<AriaNumberFieldProps, 'errorMessage' | keyof Omit<Validation<unknown>, 'isRequired'>> {
|
|
224
|
+
interface SapphireNumberFieldProps extends Pick<AriaNumberFieldProps, 'label' | 'isDisabled' | 'isRequired' | 'value' | 'defaultValue' | 'onChange' | 'incrementAriaLabel' | 'decrementAriaLabel' | 'onFocus' | 'onBlur' | 'formatOptions' | 'step' | 'minValue' | 'maxValue' | 'placeholder' | 'isReadOnly' | 'autoFocus'> {
|
|
232
225
|
/**
|
|
233
226
|
* Whether the input should render as having an error and an error message.
|
|
234
227
|
* This also sets the appropriate `aria` attributes on the input.
|
|
235
228
|
*
|
|
236
229
|
* A `boolean` sets the error state.
|
|
237
|
-
* A `
|
|
230
|
+
* A `ReactNode` sets the error state with an additional error message.
|
|
238
231
|
*
|
|
239
232
|
* **An error message is strongly recommended because an error should always have an explanation about how to fix it.**
|
|
240
233
|
*/
|
|
241
|
-
error?: boolean |
|
|
234
|
+
error?: boolean | React__default.ReactNode;
|
|
242
235
|
}
|
|
243
236
|
|
|
244
237
|
declare type NumberFieldRef = FocusableRefValue<HTMLInputElement, HTMLDivElement> & {
|
|
@@ -283,7 +276,7 @@ interface NumberFieldProps extends SapphireNumberFieldProps, PressEvents, Sapphi
|
|
|
283
276
|
}
|
|
284
277
|
declare const NumberField: React__default.ForwardRefExoticComponent<NumberFieldProps & React__default.RefAttributes<NumberFieldRef>>;
|
|
285
278
|
|
|
286
|
-
interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, AriaLabelingProps, SapphireStyleProps {
|
|
279
|
+
interface TagGroupProps<T> extends CollectionBase<T>, DOMProps, Pick<AriaLabelingProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'>, SapphireStyleProps {
|
|
287
280
|
/**
|
|
288
281
|
* A HelpButton element to place next to the label.
|
|
289
282
|
*/
|