@ssa-ui-kit/core 2.8.1 → 2.8.3

package/dist/components/Typeahead/Typeahead.d.ts

@@ -8,4 +8,4 @@ import { TypeaheadProps } from './types';
  * Aria attributes are set according to
  * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
  **/
-export declare const Typeahead: ({ name, label, selectedItems, isOpen, isDisabled, isMultiple, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, optionsClassName, wrapperClassName, width, setValue, register, onChange, onEmptyChange, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Typeahead: ({ name, label, selectedItems, isOpen, isDisabled, isMultiple, children, className, startIcon, endIcon, error, success, helperText, validationSchema, placeholder, startIconClassName, endIconClassName, optionsClassName, wrapperClassName, width, setValue, register, onChange, onEmptyChange, onClearAll, onRemoveSelectedClick, renderOption, }: TypeaheadProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Typeahead/types.d.ts

@@ -26,6 +26,8 @@ export interface TypeaheadProps {
     setValue?: UseFormSetValue<FieldValues>;
     register?: UseFormReturn['register'];
     onChange?: (selectedItem: TypeaheadValue, isSelected: boolean) => void;
+    onClearAll?: () => void;
+    onRemoveSelectedClick?: (selectedItem: TypeaheadValue) => void;
     onEmptyChange?: (isEmpty?: boolean) => void;
     renderOption?: (data: {
         value: string | number;
@@ -33,7 +35,7 @@ export interface TypeaheadProps {
         label: string;
     }) => React.ReactNode;
 }
-export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'onChange' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'register' | 'setValue' | 'validationSchema' | 'error' | 'success' | 'placeholder'>;
+export type UseTypeaheadProps = Pick<TypeaheadProps, 'selectedItems' | 'isDisabled' | 'children' | 'isMultiple' | 'onChange' | 'onClearAll' | 'onRemoveSelectedClick' | 'onEmptyChange' | 'renderOption' | 'isOpen' | 'className' | 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName' | 'name' | 'register' | 'setValue' | 'validationSchema' | 'error' | 'success' | 'placeholder'>;
 export interface TypeaheadItemsListProps extends CommonProps {
     children?: React.ReactNode;
     noItemsMessage?: string;

package/dist/components/Typeahead/useTypeahead.d.ts

@@ -1,6 +1,6 @@
 import React, { MouseEventHandler } from 'react';
 import { UseTypeaheadProps } from './types';
-export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems, isDisabled, isMultiple, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, register, setValue, onChange, onEmptyChange, renderOption, }: UseTypeaheadProps) => {
+export declare const useTypeahead: ({ name, isOpen: isInitOpen, selectedItems, isDisabled, isMultiple, children, className, startIcon, endIcon, startIconClassName, endIconClassName, validationSchema, error, success, placeholder, register, setValue, onChange, onClearAll, onRemoveSelectedClick, onEmptyChange, renderOption, }: UseTypeaheadProps) => {
     isOpen: boolean;
     isDisabled: boolean | undefined;
     optionsWithKey: Record<string | number, Record<string, string | number>>;

package/dist/index.js

@@ -16109,6 +16109,8 @@ const useTypeahead = ({
   register,
   setValue,
   onChange,
+  onClearAll,
+  onRemoveSelectedClick,
   onEmptyChange,
   renderOption
 }) => {
@@ -16116,7 +16118,7 @@ const useTypeahead = ({
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
   const [selected, setSelected] = (0,external_react_namespaceObject.useState)(selectedItems || []);
   const [optionsWithKey, setOptionsWithKey] = (0,external_react_namespaceObject.useState)({});
-  const [isEmpty, setIsEmpty] = (0,external_react_namespaceObject.useState)();
+  const [isEmpty, setIsEmpty] = (0,external_react_namespaceObject.useState)(true);
   const [isFirstRender, setFirstRender] = (0,external_react_namespaceObject.useState)(true);
   const [items, setItems] = (0,external_react_namespaceObject.useState)();
   const [inputValue, setInputValue] = (0,external_react_namespaceObject.useState)('');
@@ -16143,13 +16145,8 @@ const useTypeahead = ({
         shouldDirty: !isFirstRender
       });
     }
-    if (!isFirstRender) {
-      setIsEmpty(!selected.length);
-    }
+    handleOnEmptyChange(!selected.length);
   }, [selected]);
-  (0,external_react_namespaceObject.useEffect)(() => {
-    onEmptyChange?.(isEmpty);
-  }, [isEmpty]);
   (0,external_react_namespaceObject.useEffect)(() => {
     if (isDisabled && isOpen) {
       setIsOpen(false);
@@ -16254,6 +16251,14 @@ const useTypeahead = ({
       }
     }
   }, [inputValue, items, selected]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    onEmptyChange?.(isEmpty);
+  }, [isEmpty]);
+  const handleOnEmptyChange = newIsEmptyValue => {
+    if (newIsEmptyValue !== isEmpty) {
+      setIsEmpty(newIsEmptyValue);
+    }
+  };
   const handleOpenChange = open => {
     if (!isDisabled) {
       setIsOpen(open);
@@ -16282,9 +16287,7 @@ const useTypeahead = ({
     setStatus('basic');
     useFormResult.clearErrors(name);
     useFormResult.trigger(name);
-    if (onChange) {
-      onChange(changingValue, isNewSelected);
-    }
+    onChange?.(changingValue, isNewSelected);
   };
   const handleClearAll = event => {
     if (isDisabled) {
@@ -16298,6 +16301,7 @@ const useTypeahead = ({
     setFirstSuggestion('');
     useFormResult.trigger(name);
     inputRef.current?.focus();
+    onClearAll?.();
   };
   const handleInputClick = event => {
     if (!isDisabled) {
@@ -16338,6 +16342,7 @@ const useTypeahead = ({
   const handleRemoveSelectedClick = selectedItem => event => {
     event.stopPropagation();
     handleChange(selectedItem);
+    onRemoveSelectedClick?.(selectedItem);
   };
   return {
     isOpen,
@@ -16381,13 +16386,15 @@ function Typeahead_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tr
 
 
 
+// TODO: automatically calculate max-height
+// https://github.com/ssagroup/ui-kit/issues/385
 const TypeaheadOptionsBase = /*#__PURE__*/base_default()("ul",  true ? {
   target: "e1vig1dw6"
 } : 0)("padding:0;margin:0;list-style:none;background:#fff;border-radius:8px;filter:", ({
   theme
 }) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";backdrop-filter:", ({
   theme
-}) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";" + ( true ? "" : 0));
+}) => `drop-shadow(-4px 4px 14px ${theme.colors.greyDarker14})`, ";overflow-y:auto;max-height:350px;" + ( true ? "" : 0));
 const TypeaheadOption = /*#__PURE__*/base_default()("li",  true ? {
   target: "e1vig1dw5"
 } : 0)("display:flex;align-items:center;padding:8px 16px;border:none;cursor:pointer;font-size:14px;gap:8px;padding:12px;height:40px;background:", ({
@@ -16724,6 +16731,8 @@ const Typeahead = ({
   register,
   onChange,
   onEmptyChange,
+  onClearAll,
+  onRemoveSelectedClick,
   renderOption
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
@@ -16747,7 +16756,9 @@ const Typeahead = ({
     register,
     onChange,
     onEmptyChange,
-    renderOption
+    renderOption,
+    onRemoveSelectedClick,
+    onClearAll
   });
   return (0,jsx_runtime_namespaceObject.jsx)(TypeaheadContext.Provider, {
     value: hookResult,