@ssa-ui-kit/core 2.8.0 → 2.8.2

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

@@ -7,6 +7,7 @@ export interface PopoverOptions {
     open?: boolean;
     floatingOptions?: Partial<UseFloatingOptions>;
     interactionsEnabled?: InteractionsEnabled;
+    keyboardHandlers?: boolean;
     onOpenChange?: (open: boolean) => void;
 }
 export type SetIDs = {

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, initialSelectedItems, 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

@@ -3,7 +3,7 @@ import { FieldError, FieldValues, UseFormReturn, UseFormSetValue } from 'react-h
 export type TypeaheadValue = string | number;
 export type TypeaheadOptionProps = Record<string, TypeaheadValue>;
 export interface TypeaheadProps {
-    initialSelectedItems?: Array<TypeaheadValue>;
+    selectedItems?: Array<TypeaheadValue>;
     isMultiple?: boolean;
     isDisabled?: boolean;
     children?: React.ReactNode;
@@ -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, 'initialSelectedItems' | '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, initialSelectedItems, 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

@@ -8309,6 +8309,7 @@ const usePopover = ({
   modal,
   open: controlledOpen,
   onOpenChange: setControlledOpen,
+  keyboardHandlers = true,
   floatingOptions = {},
   interactionsEnabled = 'click'
 } = {}) => {
@@ -8332,7 +8333,8 @@ const usePopover = ({
   });
   const context = data.context;
   const click = (0,external_floating_ui_react_namespaceObject.useClick)(context, {
-    enabled: controlledOpen == null && ['click', 'both'].includes(interactionsEnabled)
+    enabled: controlledOpen == null && ['click', 'both'].includes(interactionsEnabled),
+    keyboardHandlers
   });
   const dismiss = (0,external_floating_ui_react_namespaceObject.useDismiss)(context, {
     referencePress: true,
@@ -13357,6 +13359,7 @@ const FiltersMultiSelect = ({
       }), (0,jsx_runtime_namespaceObject.jsx)(FieldControl, {
         controlRef: inputRef,
         children: (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+          keyboardHandlers: false,
           floatingOptions: {
             onOpenChange: (open, event, reason) => {
               if (disabled) return;
@@ -16090,7 +16093,7 @@ const useTypeaheadContext = () => external_react_namespaceObject.useContext(Type
 const useTypeahead = ({
   name = 'typeahead-input',
   isOpen: isInitOpen,
-  initialSelectedItems,
+  selectedItems,
   isDisabled,
   isMultiple,
   children,
@@ -16106,14 +16109,16 @@ const useTypeahead = ({
   register,
   setValue,
   onChange,
+  onClearAll,
+  onRemoveSelectedClick,
   onEmptyChange,
   renderOption
 }) => {
   const inputName = `${name}-text`;
   const [isOpen, setIsOpen] = (0,external_react_namespaceObject.useState)(isInitOpen || false);
-  const [selected, setSelected] = (0,external_react_namespaceObject.useState)(initialSelectedItems || []);
+  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)('');
@@ -16140,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);
@@ -16178,7 +16178,10 @@ const useTypeahead = ({
     setOptionsWithKey(keyedOptions);
     setItems(childItems);
     setFirstRender(false);
-  }, [initialSelectedItems, children]);
+  }, [selectedItems, children]);
+  (0,external_react_namespaceObject.useEffect)(() => {
+    setSelected(selectedItems || []);
+  }, [selectedItems]);
   (0,external_react_namespaceObject.useEffect)(() => {
     const childrenArray = external_react_default().Children.toArray(children).filter(Boolean);
     const filteredOptions = [...childrenArray];
@@ -16248,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);
@@ -16276,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) {
@@ -16292,6 +16301,7 @@ const useTypeahead = ({
     setFirstSuggestion('');
     useFormResult.trigger(name);
     inputRef.current?.focus();
+    onClearAll?.();
   };
   const handleInputClick = event => {
     if (!isDisabled) {
@@ -16332,6 +16342,7 @@ const useTypeahead = ({
   const handleRemoveSelectedClick = selectedItem => event => {
     event.stopPropagation();
     handleChange(selectedItem);
+    onRemoveSelectedClick?.(selectedItem);
   };
   return {
     isOpen,
@@ -16696,7 +16707,7 @@ var Typeahead_ref =  true ? {
 const Typeahead = ({
   name = 'typeahead-search',
   label,
-  initialSelectedItems,
+  selectedItems,
   isOpen,
   isDisabled,
   isMultiple,
@@ -16718,12 +16729,14 @@ const Typeahead = ({
   register,
   onChange,
   onEmptyChange,
+  onClearAll,
+  onRemoveSelectedClick,
   renderOption
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const hookResult = useTypeahead({
     name,
-    initialSelectedItems,
+    selectedItems,
     isOpen,
     isDisabled,
     isMultiple,
@@ -16741,7 +16754,9 @@ const Typeahead = ({
     register,
     onChange,
     onEmptyChange,
-    renderOption
+    renderOption,
+    onRemoveSelectedClick,
+    onClearAll
   });
   return (0,jsx_runtime_namespaceObject.jsx)(TypeaheadContext.Provider, {
     value: hookResult,
@@ -16759,6 +16774,7 @@ const Typeahead = ({
         "data-testid": "typeahead-label",
         children: label
       }), (0,jsx_runtime_namespaceObject.jsxs)(Popover, {
+        keyboardHandlers: false,
         floatingOptions: {
           onOpenChange: hookResult.handleOpenChange,
           open: hookResult.isOpen