@danske/sapphire-react-lab 0.87.1 → 0.87.2

package/build/esm/SearchField/src/SearchField.js

@@ -29,9 +29,22 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const SearchField = React.forwardRef(function SearchField2(props, forwardedRef) {
-  var _a;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function SearchField(propsAndRef) {
+  var _b;
   useThemeCheck();
+  const _a = propsAndRef, { loadingState, loadingSkeletonRowsCount, forwardedRef } = _a, props = __objRest(_a, ["loadingState", "loadingSkeletonRowsCount", "forwardedRef"]);
   const inputRef = useObjectRef(forwardedRef);
   const buttonRef = useRef(null);
   const listBoxRef = useFocusableRef(null);
@@ -104,12 +117,14 @@ const SearchField = React.forwardRef(function SearchField2(props, forwardedRef)
     popoverRef,
     listBoxRef,
     listBoxProps,
-    selectWidth: ((_a = triggerRef.current) == null ? void 0 : _a.offsetWidth) || 0,
+    loadingState,
+    loadingSkeletonRowsCount,
+    selectWidth: ((_b = triggerRef.current) == null ? void 0 : _b.offsetWidth) || 0,
     size: props.size,
     disableSelectedStyles: true,
     isNonModal: true
   }, props.children || []));
-});
+}
 
 export { SearchField };
 //# sourceMappingURL=SearchField.js.map

package/build/esm/SearchField/src/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","sources":["../../../../src/SearchField/src/SearchField.tsx"],"sourcesContent":["import React, { ForwardedRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport { HelpTextProps, LabelableProps, Validation } from '@react-types/shared';\nimport type { ComboBoxProps } from '@react-types/combobox';\nimport { AriaSearchFieldProps, useSearchField } from '@react-aria/searchfield';\n\nimport {\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n  useThemeCheck,\n  ListBoxPopover,\n  Icon,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/searchField/searchField.module.css';\nimport { useSearchFieldState } from '@react-stately/searchfield';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { CloseCircle, Search } from '@danske/sapphire-icons/react';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport { useComboBoxState } from './useComboBoxState';\nimport { useComboBox } from '@react-aria/combobox';\n\nexport type SapphireSearchFieldProps<T extends object> = SapphireStyleProps &\n  Omit<\n    AriaSearchFieldProps,\n    keyof HelpTextProps | keyof Validation<unknown> | keyof LabelableProps\n  > &\n  AutocompleteProps<T> & {\n    /**\n     * @default 'large'\n     */\n    size?: 'large' | 'medium';\n    /**\n     * Adjusts the style for the type of surface it is rendered on.\n     * @default 'primary'\n     */\n    surface?: 'primary' | 'secondary';\n  } & (\n    | { 'aria-labelledby': string }\n    | {\n        'aria-label': string;\n      }\n  );\n\n// we don't want props related to \"selection\" because from the POV of the\n// autocomplete feature, there is no concept of \"selection\"\ninterface AutocompleteProps<T extends object> {\n  items?: ComboBoxProps<T>['items'];\n  defaultItems?: ComboBoxProps<T>['defaultItems'];\n  children?: ComboBoxProps<T>['children'];\n  onOpenChange?: ComboBoxProps<T>['onOpenChange'];\n  defaultFilter?: (textValue: string, inputValue: string) => boolean;\n}\n\n/**\n * Sapphire search input field.\n */\nexport const SearchField = React.forwardRef(function SearchField<\n  T extends object\n>(\n  props: SapphireSearchFieldProps<T>,\n  forwardedRef: ForwardedRef<HTMLInputElement>\n): JSX.Element {\n  useThemeCheck();\n\n  const inputRef = useObjectRef(forwardedRef);\n  const buttonRef = useRef<HTMLDivElement>(null);\n  const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useFocusableRef<HTMLDivElement>(null);\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const state = useComboBoxState({\n    ...props,\n    inputValue: props.value,\n    defaultInputValue: props.defaultValue,\n    onInputChange: props.onChange,\n    allowsEmptyCollection: false,\n    allowsCustomValue: true,\n    shouldCloseOnBlur: true,\n  });\n\n  const { inputProps: comboBoxInputProps, listBoxProps } = useComboBox(\n    {\n      ...props,\n      inputRef,\n      listBoxRef,\n      popoverRef,\n    },\n    state\n  );\n\n  /**\n   * In order to compose the `useSearchField` and `useComboBox` we want to:\n   *  - let the combobox control the input but\n   *  - allow the search field's \"clear\" and \"submit\" behavior\n   *\n   *  For this, we take control of `useSearchField` and not pass the props\n   *  indiscriminately.\n   *\n   *  For example think about using `onBlur` on `SearchField`. The combobox\n   *  hook gets that prop and the input props we get back will add that\n   *  listener to the input. We don't want the input props from\n   *  `useSearchField` to add the same listener.\n   */\n  const searchProps: AriaSearchFieldProps = {\n    'aria-label': props['aria-label'],\n    'aria-labelledby': props['aria-labelledby'],\n    isDisabled: props.isDisabled,\n    isReadOnly: props.isReadOnly,\n    // needed for the submit functionality\n    value: state.inputValue,\n    onSubmit: (value) => {\n      if (!state.selectionManager.isFocused) {\n        props?.onSubmit?.(value);\n      }\n    },\n    onClear: () => {\n      state.setInputValue('');\n      props.onClear?.();\n    },\n  };\n\n  const searchFieldState = useSearchFieldState(searchProps);\n\n  const { clearButtonProps, inputProps: searchFieldInputProps } =\n    useSearchField(searchProps, searchFieldState, inputRef);\n\n  const { buttonProps } = useButton(\n    {\n      ...clearButtonProps,\n      elementType: 'div',\n    },\n    buttonRef\n  );\n\n  return (\n    <div\n      className={clsx(styles['sapphire-search-field'], className, {\n        [styles['sapphire-search-field--medium']]: props.size === 'medium',\n        [styles['sapphire-search-field--surface-secondary']]:\n          props.surface === 'secondary',\n        [styles['is-disabled']]: props.isDisabled,\n      })}\n      style={style}\n      ref={triggerRef}\n    >\n      <span className={styles['sapphire-search-field__icon']}>\n        <Icon size={props.size === 'medium' ? 'm' : 'l'}>\n          <Search />\n        </Icon>\n      </span>\n      <input\n        {...mergeProps(comboBoxInputProps, searchFieldInputProps)}\n        ref={inputRef}\n        className={clsx(styles['sapphire-search-field__input'], {\n          [styles['sapphire-search-field__input--empty']]:\n            state.inputValue.length === 0,\n        })}\n      />\n      <div\n        ref={buttonRef}\n        className={styles['sapphire-search-field__button']}\n        {...buttonProps}\n      >\n        <Icon size={props.size === 'medium' ? 'm' : 'l'}>\n          <CloseCircle />\n        </Icon>\n      </div>\n      {state.isOpen && (\n        <ListBoxPopover<T>\n          state={state}\n          triggerRef={triggerRef}\n          popoverRef={popoverRef}\n          listBoxRef={listBoxRef}\n          listBoxProps={listBoxProps}\n          selectWidth={triggerRef.current?.offsetWidth || 0}\n          size={props.size}\n          disableSelectedStyles\n          isNonModal\n        >\n          {props.children || []}\n        </ListBoxPopover>\n      )}\n    </div>\n  );\n});\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchField.js","sources":["../../../../src/SearchField/src/SearchField.tsx"],"sourcesContent":["import React, { ForwardedRef, useRef } from 'react';\nimport clsx from 'clsx';\nimport { HelpTextProps, LabelableProps, Validation } from '@react-types/shared';\nimport type { ComboBoxProps } from '@react-types/combobox';\nimport { AriaSearchFieldProps, useSearchField } from '@react-aria/searchfield';\n\nimport {\n  SapphireStyleProps,\n  useButton,\n  useSapphireStyleProps,\n  useThemeCheck,\n  ListBoxPopover,\n  Icon,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/searchField/searchField.module.css';\nimport { useSearchFieldState } from '@react-stately/searchfield';\nimport { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { CloseCircle, Search } from '@danske/sapphire-icons/react';\nimport { useFocusableRef } from '@react-spectrum/utils';\nimport { useComboBoxState } from './useComboBoxState';\nimport { useComboBox } from '@react-aria/combobox';\n\nexport type SapphireSearchFieldProps<T extends object> = SapphireStyleProps &\n  Omit<\n    AriaSearchFieldProps,\n    keyof HelpTextProps | keyof Validation<unknown> | keyof LabelableProps\n  > &\n  AutocompleteProps<T> & {\n    /**\n     * @default 'large'\n     */\n    size?: 'large' | 'medium';\n    /**\n     * Adjusts the style for the type of surface it is rendered on.\n     * @default 'primary'\n     */\n    surface?: 'primary' | 'secondary';\n  } & (\n    | { 'aria-labelledby': string }\n    | {\n        'aria-label': string;\n      }\n  ) & {\n    loadingState?: 'loading';\n    loadingSkeletonRowsCount?: number;\n  };\n\n// we don't want props related to \"selection\" because from the POV of the\n// autocomplete feature, there is no concept of \"selection\"\ninterface AutocompleteProps<T extends object> {\n  items?: ComboBoxProps<T>['items'];\n  defaultItems?: ComboBoxProps<T>['defaultItems'];\n  children?: ComboBoxProps<T>['children'];\n  onOpenChange?: ComboBoxProps<T>['onOpenChange'];\n  defaultFilter?: (textValue: string, inputValue: string) => boolean;\n}\n\ntype SapphireSearchFieldPropsWithRef<T extends object> =\n  SapphireSearchFieldProps<T> & {\n    forwardedRef?: ForwardedRef<HTMLInputElement>;\n  };\n\n/**\n * Sapphire search input field.\n */\n// Ref (forwardedRef) exposed as normal prop to keep TS generics working and inference of the right type for items/children passed\n// Ie. type for items={items} is inferred for the item in the child render function {item => (intellisense for item available here)}\n// Using forwardRef that information is lost: https://stackoverflow.com/a/58473012 and https://stackoverflow.com/a/60237948\nexport function SearchField<T extends object>(\n  propsAndRef: SapphireSearchFieldPropsWithRef<T>\n) {\n  useThemeCheck();\n\n  const { loadingState, loadingSkeletonRowsCount, forwardedRef, ...props } =\n    propsAndRef;\n\n  const inputRef = useObjectRef(forwardedRef);\n  const buttonRef = useRef<HTMLDivElement>(null);\n  const listBoxRef = useFocusableRef<HTMLUListElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useFocusableRef<HTMLDivElement>(null);\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(props);\n\n  const state = useComboBoxState({\n    ...props,\n    inputValue: props.value,\n    defaultInputValue: props.defaultValue,\n    onInputChange: props.onChange,\n    allowsEmptyCollection: false,\n    allowsCustomValue: true,\n    shouldCloseOnBlur: true,\n  });\n\n  const { inputProps: comboBoxInputProps, listBoxProps } = useComboBox(\n    {\n      ...props,\n      inputRef,\n      listBoxRef,\n      popoverRef,\n    },\n    state\n  );\n\n  /**\n   * In order to compose the `useSearchField` and `useComboBox` we want to:\n   *  - let the combobox control the input but\n   *  - allow the search field's \"clear\" and \"submit\" behavior\n   *\n   *  For this, we take control of `useSearchField` and not pass the props\n   *  indiscriminately.\n   *\n   *  For example think about using `onBlur` on `SearchField`. The combobox\n   *  hook gets that prop and the input props we get back will add that\n   *  listener to the input. We don't want the input props from\n   *  `useSearchField` to add the same listener.\n   */\n  const searchProps: AriaSearchFieldProps = {\n    'aria-label': props['aria-label'],\n    'aria-labelledby': props['aria-labelledby'],\n    isDisabled: props.isDisabled,\n    isReadOnly: props.isReadOnly,\n    // needed for the submit functionality\n    value: state.inputValue,\n    onSubmit: (value) => {\n      if (!state.selectionManager.isFocused) {\n        props?.onSubmit?.(value);\n      }\n    },\n    onClear: () => {\n      state.setInputValue('');\n      props.onClear?.();\n    },\n  };\n\n  const searchFieldState = useSearchFieldState(searchProps);\n\n  const { clearButtonProps, inputProps: searchFieldInputProps } =\n    useSearchField(searchProps, searchFieldState, inputRef);\n\n  const { buttonProps } = useButton(\n    {\n      ...clearButtonProps,\n      elementType: 'div',\n    },\n    buttonRef\n  );\n\n  return (\n    <div\n      className={clsx(styles['sapphire-search-field'], className, {\n        [styles['sapphire-search-field--medium']]: props.size === 'medium',\n        [styles['sapphire-search-field--surface-secondary']]:\n          props.surface === 'secondary',\n        [styles['is-disabled']]: props.isDisabled,\n      })}\n      style={style}\n      ref={triggerRef}\n    >\n      <span className={styles['sapphire-search-field__icon']}>\n        <Icon size={props.size === 'medium' ? 'm' : 'l'}>\n          <Search />\n        </Icon>\n      </span>\n      <input\n        {...mergeProps(comboBoxInputProps, searchFieldInputProps)}\n        ref={inputRef}\n        className={clsx(styles['sapphire-search-field__input'], {\n          [styles['sapphire-search-field__input--empty']]:\n            state.inputValue.length === 0,\n        })}\n      />\n      <div\n        ref={buttonRef}\n        className={styles['sapphire-search-field__button']}\n        {...buttonProps}\n      >\n        <Icon size={props.size === 'medium' ? 'm' : 'l'}>\n          <CloseCircle />\n        </Icon>\n      </div>\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 || 0}\n          size={props.size}\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

@@ -1,7 +1,7 @@
 import * as _react_types_shared from '@react-types/shared';
 import { PressEvents, Validation, RangeValue, HelpTextProps, LabelableProps, CollectionBase, DOMProps, Expandable, ItemProps, AriaLabelingProps, FocusableRefValue } from '@react-types/shared';
 import * as React from 'react';
-import React__default, { ReactNode, ComponentType, RefObject, Key } from 'react';
+import React__default, { ReactNode, ForwardedRef, ComponentType, RefObject, Key } from 'react';
 import { AriaToggleButtonProps } from '@react-aria/button';
 import { SapphireStyleProps, PopoverTriggerProps, HeadingProps, TextStyleProps, DialogProps } from '@danske/sapphire-react';
 import { DateValue } from '@internationalized/date';
@@ -513,7 +513,10 @@ declare type SapphireSearchFieldProps<T extends object> = SapphireStyleProps & O
     'aria-labelledby': string;
 } | {
     'aria-label': string;
-});
+}) & {
+    loadingState?: 'loading';
+    loadingSkeletonRowsCount?: number;
+};
 interface AutocompleteProps<T extends object> {
     items?: ComboBoxProps<T>['items'];
     defaultItems?: ComboBoxProps<T>['defaultItems'];
@@ -521,10 +524,13 @@ interface AutocompleteProps<T extends object> {
     onOpenChange?: ComboBoxProps<T>['onOpenChange'];
     defaultFilter?: (textValue: string, inputValue: string) => boolean;
 }
+declare type SapphireSearchFieldPropsWithRef<T extends object> = SapphireSearchFieldProps<T> & {
+    forwardedRef?: ForwardedRef<HTMLInputElement>;
+};
 /**
  * Sapphire search input field.
  */
-declare const SearchField: React__default.ForwardRefExoticComponent<SapphireSearchFieldProps<object> & React__default.RefAttributes<HTMLInputElement>>;
+declare function SearchField<T extends object>(propsAndRef: SapphireSearchFieldPropsWithRef<T>): React__default.JSX.Element;
 
 declare type VerticalPlacement = 'top' | 'bottom';
 declare type HorizontalPlacement = 'left' | 'right';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.87.1",
+  "version": "0.87.2",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -74,5 +74,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "41bc4804b1a076e3aaac77b34aa952dc001bcb5b"
+  "gitHead": "04534ccb922fafc0ae86ba576ebb44c466ddc35a"
 }