@os-design/use-closable 1.0.33 → 1.0.34

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","r","l","t","Symbol","iterator","e","u","a","f","next","done","push","value","isArray","useClosable","visible","delay","_useState","useState","_useState2","mounted","setMounted","delayRef","useRef","useEffect","current","undefined","timeout","setTimeout","clearTimeout","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst useClosable = (visible: boolean, delay: number): boolean => {\n  const [mounted, setMounted] = useState(visible);\n  const delayRef = useRef(delay);\n\n  useEffect(() => {\n    delayRef.current = delay;\n  }, [delay]);\n\n  useEffect(() => {\n    if (visible) {\n      setMounted(true);\n      return () => undefined;\n    }\n    const timeout = setTimeout(() => setMounted(false), delayRef.current);\n    return () => clearTimeout(timeout);\n  }, [visible]);\n\n  return mounted;\n};\n\nexport default useClosable;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["_react","require","_slicedToArray","arr","i","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","o","minLen","_arrayLikeToArray","n","Object","prototype","toString","call","slice","constructor","name","Array","from","test","len","length","arr2","r","l","t","Symbol","iterator","e","u","a","f","next","done","push","value","isArray","useClosable","visible","delay","_useState","useState","_useState2","mounted","setMounted","delayRef","useRef","useEffect","current","undefined","timeout","setTimeout","clearTimeout","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst useClosable = (visible: boolean, delay: number): boolean => {\n  const [mounted, setMounted] = useState(visible);\n  const delayRef = useRef(delay);\n\n  useEffect(() => {\n    delayRef.current = delay;\n  }, [delay]);\n\n  useEffect(() => {\n    if (visible) {\n      setMounted(true);\n      return () => undefined;\n    }\n    const timeout = setTimeout(() => setMounted(false), delayRef.current);\n    return () => clearTimeout(timeout);\n  }, [visible]);\n\n  return mounted;\n};\n\nexport default useClosable;\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useEffect","useRef","useState","useClosable","visible","delay","mounted","setMounted","delayRef","current","undefined","timeout","setTimeout","clearTimeout"],"sources":["../../src/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst useClosable = (visible: boolean, delay: number): boolean => {\n  const [mounted, setMounted] = useState(visible);\n  const delayRef = useRef(delay);\n\n  useEffect(() => {\n    delayRef.current = delay;\n  }, [delay]);\n\n  useEffect(() => {\n    if (visible) {\n      setMounted(true);\n      return () => undefined;\n    }\n    const timeout = setTimeout(() => setMounted(false), delayRef.current);\n    return () => clearTimeout(timeout);\n  }, [visible]);\n\n  return mounted;\n};\n\nexport default useClosable;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEnD,MAAMC,WAAW,GAAGA,CAACC,OAAgB,EAAEC,KAAa,KAAc;EAChE,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGL,QAAQ,CAACE,OAAO,CAAC;EAC/C,MAAMI,QAAQ,GAAGP,MAAM,CAACI,KAAK,CAAC;EAE9BL,SAAS,CAAC,MAAM;IACdQ,QAAQ,CAACC,OAAO,GAAGJ,KAAK;EAC1B,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEXL,SAAS,CAAC,MAAM;IACd,IAAII,OAAO,EAAE;MACXG,UAAU,CAAC,IAAI,CAAC;MAChB,OAAO,MAAMG,SAAS;IACxB;IACA,MAAMC,OAAO,GAAGC,UAAU,CAAC,MAAML,UAAU,CAAC,KAAK,CAAC,EAAEC,QAAQ,CAACC,OAAO,CAAC;IACrE,OAAO,MAAMI,YAAY,CAACF,OAAO,CAAC;EACpC,CAAC,EAAE,CAACP,OAAO,CAAC,CAAC;EAEb,OAAOE,OAAO;AAChB,CAAC;AAED,eAAeH,WAAW"}
+{"version":3,"file":"index.js","names":["useEffect","useRef","useState","useClosable","visible","delay","mounted","setMounted","delayRef","current","undefined","timeout","setTimeout","clearTimeout"],"sources":["../../src/index.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nconst useClosable = (visible: boolean, delay: number): boolean => {\n  const [mounted, setMounted] = useState(visible);\n  const delayRef = useRef(delay);\n\n  useEffect(() => {\n    delayRef.current = delay;\n  }, [delay]);\n\n  useEffect(() => {\n    if (visible) {\n      setMounted(true);\n      return () => undefined;\n    }\n    const timeout = setTimeout(() => setMounted(false), delayRef.current);\n    return () => clearTimeout(timeout);\n  }, [visible]);\n\n  return mounted;\n};\n\nexport default useClosable;\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEnD,MAAMC,WAAW,GAAGA,CAACC,OAAgB,EAAEC,KAAa,KAAc;EAChE,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGL,QAAQ,CAACE,OAAO,CAAC;EAC/C,MAAMI,QAAQ,GAAGP,MAAM,CAACI,KAAK,CAAC;EAE9BL,SAAS,CAAC,MAAM;IACdQ,QAAQ,CAACC,OAAO,GAAGJ,KAAK;EAC1B,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEXL,SAAS,CAAC,MAAM;IACd,IAAII,OAAO,EAAE;MACXG,UAAU,CAAC,IAAI,CAAC;MAChB,OAAO,MAAMG,SAAS;IACxB;IACA,MAAMC,OAAO,GAAGC,UAAU,CAAC,MAAML,UAAU,CAAC,KAAK,CAAC,EAAEC,QAAQ,CAACC,OAAO,CAAC;IACrE,OAAO,MAAMI,YAAY,CAACF,OAAO,CAAC;EACpC,CAAC,EAAE,CAACP,OAAO,CAAC,CAAC;EAEb,OAAOE,OAAO;AAChB,CAAC;AAED,eAAeH,WAAW","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/use-closable",
-  "version": "1.0.33",
+  "version": "1.0.34",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -30,11 +30,11 @@
     "access": "public"
   },
   "devDependencies": {
-    "@os-design/omit-emotion-props": "^1.0.18",
-    "@os-design/styles": "^1.0.54"
+    "@os-design/omit-emotion-props": "^1.0.19",
+    "@os-design/styles": "^1.0.55"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "01c24b2665ad10a4b4976a6c0b4982e534e7727a"
+  "gitHead": "1f17189e344a56fd6347dd6b896d6e7ef6e7b35d"
 }

package/src/index.mdx

@@ -0,0 +1,69 @@
+import { Meta } from '@storybook/blocks';
+import UseClosableExample from './index.example';
+
+<Meta title='Utils/useClosable' />
+
+# useClosable
+
+Sets the closed state to true after a delay to apply the fade out animation.
+
+## Example of usage
+
+```tsx
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { Switch } from '@os-design/core';
+import { css, keyframes } from '@emotion/react';
+import { omitEmotionProps } from '@os-design/styles';
+import { useClosable } from '@os-design/utils';
+
+const fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+
+const fadeOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+
+const visibleStyles = (p) =>
+  p.visible &&
+  css`
+    animation: ${fadeIn} 1s forwards;
+  `;
+
+const invisibleStyles = (p) =>
+  !p.visible &&
+  css`
+    animation: ${fadeOut} 1s forwards;
+  `;
+
+interface ContainerProps {
+  visible: boolean;
+}
+const Container = styled('div', omitEmotionProps('visible'))<ContainerProps>`
+  background-color: hsl(0, 50%, 50%);
+  width: 10em;
+  height: 10em;
+  ${visibleStyles};
+  ${invisibleStyles};
+`;
+
+const UseClosableExample: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const mounted = useClosable(visible, 1000);
+
+  return (
+    <>
+      <Switch value={visible} onChange={setVisible} />
+      <p>Container is {mounted ? 'mounted' : 'unmounted'}.</p>
+      {!mounted && <Container visible={visible} />}
+    </>
+  );
+};
+
+export default UseClosableExample;
+```
+
+<UseClosableExample />