@danske/sapphire-react-lab 0.106.2 → 0.106.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Autocomplete.js","sources":["../../../../src/Autocomplete/src/Autocomplete.tsx"],"sourcesContent":["import React, { Key, ReactElement, useRef } from 'react';\nimport {\n ListBoxProps,\n useThemeCheck,\n useSapphireStyleProps,\n SapphireStyleProps,\n ListBoxPopover,\n useComboBoxState,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useComboBox } from 'react-aria/useComboBox';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport type { ComboBoxProps } from '
|
|
1
|
+
{"version":3,"file":"Autocomplete.js","sources":["../../../../src/Autocomplete/src/Autocomplete.tsx"],"sourcesContent":["import React, { Key, ReactElement, useRef } from 'react';\nimport {\n ListBoxProps,\n useThemeCheck,\n useSapphireStyleProps,\n SapphireStyleProps,\n ListBoxPopover,\n useComboBoxState,\n GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { useComboBox } from 'react-aria/useComboBox';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport type { ComboBoxProps } from 'react-stately/useComboBoxState';\nimport { filterDOMProps } from 'react-aria/filterDOMProps';\n\nexport type AutocompleteProps<T extends object> = GlobalDomAttributes &\n SapphireStyleProps &\n Pick<\n ComboBoxProps<T>,\n | 'items'\n | 'children'\n | 'inputValue'\n | 'defaultInputValue'\n | 'onInputChange'\n | 'isDisabled'\n > &\n Pick<ListBoxProps<T>, 'loadingState' | 'loadingSkeletonRowsCount'> & {\n /**\n * This prop is badly named. It is NOT related to a selection state being\n * changed since there is no selection state in this component.\n *\n * This callback simply notifies you when the user filled in the text field\n * by selecting an option from the autocomplete dropdown. Similar to an\n * onClick.\n *\n * @deprecated\n * Use `onSuggestionSelected` instead.\n */\n onSelectionChange?: Pick<\n ComboBoxProps<T>,\n 'onSelectionChange'\n >['onSelectionChange'];\n\n /*\n * This callback simply notifies you when the user filled in the text field\n * by selecting an option from the autocomplete dropdown. Similar to an\n * onClick.\n */\n onSuggestionSelected?: (key: Key) => void;\n /**\n * Render function for the input element.\n * Receives props that should be spread onto the input component.\n */\n renderInput: (inputProps: any) => ReactElement;\n\n /**\n * Accessible label for the suggestions listbox.\n */\n listboxAriaLabel?: string;\n\n /**\n * Controlled selected value.\n */\n value?: React.Key | null;\n\n /**\n * Decide what items to display in the dropdown menu.\n * @default 'String.includes'\n */\n defaultFilter?: (textValue: string, inputValue: string) => boolean;\n };\n\nexport function Autocomplete<T extends object>(\n props: AutocompleteProps<T>\n): ReactElement {\n useThemeCheck();\n const formatMessage = useMessageFormatter(intlMessages);\n\n const {\n inputValue,\n renderInput,\n loadingState,\n loadingSkeletonRowsCount,\n listboxAriaLabel,\n onSuggestionSelected,\n onSelectionChange,\n ...otherProps\n } = props;\n\n const {\n styleProps: { style, className },\n } = useSapphireStyleProps(props);\n\n const inputRef = useRef<HTMLInputElement>(null);\n const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n const popoverRef = useRef<HTMLDivElement>(null);\n const triggerRef = useFocusableRef<HTMLDivElement>(null);\n const collectionRef = useRef<\n ReturnType<typeof useComboBoxState>['collection'] | null\n >(null);\n\n const state = useComboBoxState({\n ...props,\n inputValue,\n allowsEmptyCollection: loadingState === 'loading',\n allowsCustomValue: true,\n shouldCloseOnBlur: true,\n onSelectionChange: (key) => {\n if (key !== null) {\n onSelectionChange?.(key);\n onSuggestionSelected?.(key);\n // When both value and inputValue are controlled, react-stately skips\n // updating inputValue\n const itemText = collectionRef.current?.getItem(key)?.textValue ?? '';\n if (itemText) {\n props.onInputChange?.(itemText);\n }\n }\n },\n });\n\n collectionRef.current = state.collection;\n\n const { inputProps, listBoxProps } = useComboBox(\n {\n ...props,\n 'aria-label': listboxAriaLabel || formatMessage('listbox-suggestions'),\n inputRef,\n listBoxRef,\n popoverRef,\n },\n state\n );\n\n const inputElement = renderInput({\n ...inputProps,\n isDisabled: props.isDisabled,\n inputRef,\n 'aria-haspopup': 'listbox',\n 'aria-expanded': state.isOpen,\n onChange: (value: string) => {\n inputProps.onChange?.({\n target: { value },\n currentTarget: { value },\n } as React.ChangeEvent<HTMLInputElement>);\n },\n });\n\n return (\n <div\n ref={triggerRef}\n {...filterDOMProps(otherProps, { global: true })}\n style={{ display: 'inline-flex', ...style }}\n className={className}\n >\n {inputElement}\n {state.isOpen && (\n <ListBoxPopover<T>\n state={state}\n triggerRef={triggerRef}\n popoverRef={popoverRef}\n listBoxRef={listBoxRef}\n listBoxProps={listBoxProps}\n loadingState={loadingState}\n loadingSkeletonRowsCount={loadingSkeletonRowsCount}\n selectWidth={triggerRef.current?.offsetWidth}\n disableSelectedStyles\n isNonModal\n >\n {props.children || []}\n </ListBoxPopover>\n )}\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
|
package/build/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { DOMProps, AriaLabelingProps, PressEvents, FocusableRefValue, Collection
|
|
|
5
5
|
import * as _danske_sapphire_react from '@danske/sapphire-react';
|
|
6
6
|
import { GlobalDomAttributes, SapphireStyleProps, TypographyHeadingProps, TypographyBodyProps, ListBoxProps, ButtonProps, PopoverTriggerProps, SearchFieldPropsWithRef, IconButtonProps, ThemeVariant, FieldProps } from '@danske/sapphire-react';
|
|
7
7
|
import { DisclosureGroupProps, DisclosureProps, DisclosurePanelProps, BreadcrumbsProps as BreadcrumbsProps$1, BreadcrumbProps, SliderProps as SliderProps$1, SliderThumbProps, TimeValue } from 'react-aria-components';
|
|
8
|
-
import { ComboBoxProps } from '
|
|
8
|
+
import { ComboBoxProps } from 'react-stately/useComboBoxState';
|
|
9
9
|
import { HoverProps } from 'react-aria/useHover';
|
|
10
10
|
import { DropOptions } from 'react-aria/useDrop';
|
|
11
11
|
import { AriaNumberFieldProps } from 'react-aria/useNumberField';
|
|
@@ -746,7 +746,7 @@ declare type TimeFieldProps<T extends TimeValue> = Pick<AriaTimeFieldProps<T>, '
|
|
|
746
746
|
*/
|
|
747
747
|
contextualHelp?: ReactNode;
|
|
748
748
|
};
|
|
749
|
-
declare const TimeField: <T extends TimeValue>(props: Pick<AriaTimeFieldProps<T>, "isDisabled" | "
|
|
749
|
+
declare const TimeField: <T extends TimeValue>(props: Pick<AriaTimeFieldProps<T>, "isDisabled" | "onFocus" | "onBlur" | "value" | "defaultValue" | "onChange" | "label" | "isRequired" | "isReadOnly" | "shouldForceLeadingZeros"> & SapphireStyleProps & Pick<_react_types_shared.GlobalDOMAttributes<Element>, "translate" | "dir" | "lang" | "inert"> & Pick<_react_types_shared.DOMProps, "id"> & {
|
|
750
750
|
/**
|
|
751
751
|
* @default 'lg'
|
|
752
752
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@danske/sapphire-react-lab",
|
|
3
|
-
"version": "0.106.
|
|
3
|
+
"version": "0.106.3",
|
|
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": {
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"react-dom": ">=16.8.0"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@danske/sapphire-icons": "^3.
|
|
34
|
-
"@danske/sapphire-react": "^5.
|
|
33
|
+
"@danske/sapphire-icons": "^3.2.0",
|
|
34
|
+
"@danske/sapphire-react": "^5.17.0",
|
|
35
35
|
"@types/react-transition-group": "^4.4.5",
|
|
36
36
|
"cross-env": "^7.0.3"
|
|
37
37
|
},
|
|
@@ -41,8 +41,6 @@
|
|
|
41
41
|
"@internationalized/string": "3.2.8",
|
|
42
42
|
"@react-aria/i18n": "3.13.0",
|
|
43
43
|
"@react-spectrum/utils": "3.13.0",
|
|
44
|
-
"@react-types/combobox": "3.15.0",
|
|
45
|
-
"@react-types/dialog": "3.6.0",
|
|
46
44
|
"@react-types/shared": "3.34.0",
|
|
47
45
|
"clsx": "^1.1.1",
|
|
48
46
|
"react-aria": "3.48.0",
|
|
@@ -50,5 +48,5 @@
|
|
|
50
48
|
"react-stately": "3.46.0",
|
|
51
49
|
"react-transition-group": "^4.4.5"
|
|
52
50
|
},
|
|
53
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "9a184dd3280a44a99d35cf7a954ba4ea2d905a92"
|
|
54
52
|
}
|