@fibery/ui-kit 1.24.0 → 1.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.24.0",
+  "version": "1.24.1",
   "main": "index.ts",
   "private": false,
   "files": [

package/src/emoji-picker/primitives/emoji.tsx

@@ -23,12 +23,14 @@ const emojiInlineImgCss = css`
   vertical-align: -0.1em;
   object-fit: contain;
   overflow: hidden;
+  -webkit-touch-callout: none;
 `;
 const emojiSizedImgCss = css`
   width: 100%;
   height: 100%;
   object-fit: contain;
   overflow: hidden;
+  -webkit-touch-callout: none;
 `;
 
 // This is needed to keep text-selection working for image based emojis Details: https://the.fibery.io/SoftDev/bug/Improve-selection-text-with-emojis-8963

package/src/select/select-in-popover.tsx

@@ -117,18 +117,13 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   autoFocus?: boolean;
   defaultMenuIsOpen?: boolean;
   placeholder?: string;
-  onInputChange?: (s: string, actionType: {action: string}) => void;
   noOptionsMessage: () => string | JSX.Element | null;
   options: OptionsOrGroups<Option, Group>;
   filterOption?: SelectProps<Option>["filterOption"];
   inputValue?: string;
   disabled?: boolean;
-  onFocus?: () => void;
   isCollectionMode?: IsMulti;
   isClearable?: boolean;
-  onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
-  onMenuOpen: () => void;
-  onMenuClose: () => void | boolean;
   renderValue?: () => ReactNode;
   title?: string;
   maxMenuHeight?: number;
@@ -139,6 +134,11 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   formatGroupLabel?: (group: Group) => ReactNode;
   formatOptionLabel?: (option: Option) => ReactNode;
   components?: ComponentsConfig;
+  onInputChange?: (s: string, actionType: {action: string}) => void;
+  onFocus?: () => void;
+  onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
+  onMenuOpen?: () => void;
+  onMenuClose?: () => void | boolean;
 };
 
 function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
@@ -151,18 +151,13 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     autoFocus,
     defaultMenuIsOpen,
     placeholder,
-    onInputChange,
     noOptionsMessage,
     options,
     filterOption,
     inputValue,
     disabled,
-    onFocus,
     isCollectionMode,
     isClearable = true,
-    onChange,
-    onMenuOpen,
-    onMenuClose,
     renderValue,
     title,
     maxMenuHeight,
@@ -173,6 +168,11 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     formatGroupLabel,
     formatOptionLabel,
     components = {},
+    onInputChange,
+    onFocus,
+    onChange,
+    onMenuOpen,
+    onMenuClose,
   } = props;
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useState(menuIsOpen);
@@ -198,7 +198,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
 
   const onHide = useCallback(
     (restoreFocus = true) => {
-      const wasClosed = onMenuClose();
+      const wasClosed = onMenuClose && onMenuClose();
       if (wasClosed === false) {
         return;
       }
@@ -231,7 +231,9 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
       clearTimeout(blurTimeoutRef.current);
     }
     setVisible(true);
-    onMenuOpen();
+    if (onMenuOpen) {
+      onMenuOpen();
+    }
   }, [onMenuOpen]);
 
   const styles = useMemo(() => {