kitzo 2.1.5 → 2.1.8

package/README.md

@@ -26,7 +26,7 @@ npm i kitzo
 or
 
 ```javascript
-<script src="https://cdn.jsdelivr.net/npm/kitzo@2.1.5/dist/kitzo.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/kitzo@2.1.8/dist/kitzo.umd.min.js"></script>
 ```
 
 > Vanilla: Attach this script tag in the html head tag and you are good to go.
@@ -248,7 +248,7 @@ function App() {
       <h1>Tooltip api</h1>
 
       <div>
-        <Tooltip content="Tooltip" position="top" offset="10">
+        <Tooltip content="Tooltip" position="top" offset="10" hideOnTouch={true}>
           <button>Hover me</button>
         </Tooltip>
       </div>
@@ -257,4 +257,4 @@ function App() {
 }
 ```
 
-> what short description about this api need to written here bro?
+> You can provide your own custom jsx element as `content`. e.g. `content={<div>Custom tooltip</div>}`

package/dist/react.d.ts

@@ -35,6 +35,7 @@ export interface TooltipProps {
   content: string | ReactNode;
   position?: 'top' | 'right' | 'bottom' | 'left';
   offset?: number;
+  hideOnTouch?: boolean;
 }
 
 export declare function Tooltip(props: TooltipProps): JSX.Element;

package/dist/react.esm.js

@@ -657,8 +657,13 @@ function Tooltip({
   content = 'Tooltip',
   position = '',
   offset = 8,
+  hideOnTouch = true,
   children
 }) {
+  if (typeof hideOnTouch !== 'boolean') hideOnTouch = true;
+  const isTouch = window.matchMedia('(pointer: coarse)').matches;
+  if (isTouch && hideOnTouch) return children;
+
   // sanitize props
   if (typeof position !== 'string') {
     console.warn(`[kitzo/react]: Tooltip position ignored due to invalid data type.`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitzo",
-  "version": "2.1.5",
+  "version": "2.1.8",
   "description": "A lightweight JavaScript UI micro-library.",
   "type": "module",
   "main": "./dist/kitzo.umd.js",