@luscii-healthtech/web-ui 41.1.3 → 42.0.0

package/dist/index.development.js

@@ -5842,11 +5842,11 @@ const AlertWidget = (props) => {
 const context = React.createContext(false);
 const SplitViewLayout = (props) => {
   const { open = true, aside, children } = props, restProps = __rest(props, ["open", "aside", "children"]);
-  const classesMain = classNames__default.default("ui:transition-[max-width] ui:ease-in-out ui:duration-[300ms]", "ui:contain-[strict] ui:h-full ui:absolute ui:left-0 ui:top-0", {
+  const classesMain = classNames__default.default("ui:transition-[max-width] ui:ease-in-out ui:duration-[300ms] ui:motion-reduce:duration-[0ms]", "ui:contain-[strict] ui:h-full ui:absolute ui:left-0 ui:top-0", {
     "ui:max-w-[100vw] ui:lg:max-w-[calc(100vw-(--spacing(132)))] ui:w-full": open,
     "ui:max-w-[100vw] ui:w-full": !open
   });
-  const classNamesOverlay = classNames__default.default("ui:contain-[strict] ui:transition-[opacity,display] ui:ease-in-out ui:duration-[300ms] ui:transition-discrete ui:starting:opacity-0 ui:z-10", "ui:absolute ui:top-0 ui:left-0 ui:w-screen ui:h-screen ui:bg-black ui:lg:hidden", {
+  const classNamesOverlay = classNames__default.default("ui:contain-[strict] ui:transition-[opacity,display] ui:ease-in-out ui:duration-[300ms] ui:motion-reduce:duration-[0ms] ui:transition-discrete ui:starting:opacity-0 ui:z-10", "ui:absolute ui:top-0 ui:left-0 ui:w-screen ui:h-screen ui:bg-black ui:lg:hidden", {
     "ui:hidden ui:opacity-0": !open,
     "ui:visible ui:lg:hidden ui:opacity-[0.2]": open
   });
@@ -5855,7 +5855,7 @@ const SplitViewLayout = (props) => {
 const Aside = (props) => {
   const { children, className } = props, restProps = __rest(props, ["children", "className"]);
   const open = React.useContext(context);
-  const classesAside = classNames__default.default("ui:inset-auto ui:w-full ui:flex ui:items-stretch ui:bg-transparent", "ui:contain-[layout_size] ui:transition-[translate,opacity,display] ui:ease-in-out ui:duration-[300ms]", "ui:w-full ui:h-full", "ui:absolute ui:top-0 ui:right-0 ui:h-full ui:max-w-[--spacing(132)] ui:w-full ui:transition-discrete ui:starting:translate-x-[calc(100vw)] ui:starting:opacity-[0] ui:z-20", {
+  const classesAside = classNames__default.default("ui:inset-auto ui:w-full ui:flex ui:items-stretch ui:bg-transparent", "ui:contain-[layout_size] ui:transition-[translate,opacity,display] ui:ease-in-out ui:duration-[300ms] ui:motion-reduce:duration-[0ms]", "ui:w-full ui:h-full", "ui:absolute ui:top-0 ui:right-0 ui:h-full ui:max-w-[--spacing(132)] ui:w-full ui:transition-discrete ui:starting:translate-x-[calc(100vw)] ui:starting:opacity-[0] ui:z-20", {
     "ui:translate-x-[0]": open,
     "ui:translate-x-[--spacing(132)] ui:opacity-0 ui:hidden": !open
   }, className);
@@ -5874,7 +5874,39 @@ const Aside = (props) => {
       (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionend", focusDialog);
     };
   }, [open]);
-  return jsxRuntime.jsx("dialog", Object.assign({ open, ref: dialog, className: classesAside }, restProps, { children }));
+  const [isTransitioning, setIsTransitioning] = React.useState(false);
+  const createSetIsTransitioning = (yesOrNo) => (event) => {
+    if (event.target !== dialog.current) {
+      return;
+    }
+    setIsTransitioning(yesOrNo);
+  };
+  React.useEffect(() => {
+    const transitionStartEvents = ["transitionrun", "close", "cancel"];
+    const transitionStopEvents = ["transitioncancel", "transitionend"];
+    const setIsTransitioningTrue = createSetIsTransitioning(true);
+    const setIsTransitioningFalse = createSetIsTransitioning(false);
+    transitionStartEvents.forEach((event) => {
+      var _a;
+      (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, setIsTransitioningTrue);
+    });
+    transitionStopEvents.forEach((event) => {
+      var _a;
+      (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, setIsTransitioningFalse);
+    });
+    return () => {
+      transitionStartEvents.forEach((event) => {
+        var _a;
+        (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, setIsTransitioningTrue);
+      });
+      transitionStopEvents.forEach((event) => {
+        var _a;
+        (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, setIsTransitioningFalse);
+      });
+    };
+  }, []);
+  const shouldRenderChildren = isTransitioning || open;
+  return jsxRuntime.jsx("dialog", Object.assign({ open, ref: dialog, className: classesAside }, restProps, { children: shouldRenderChildren && children }));
 };
 SplitViewLayout.Aside = Aside;