@manafishrov/ui 1.4.0 → 1.4.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package",
   "name": "@manafishrov/ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Styled component library for Manafish interfaces ",
   "license": "AGPL-3.0-or-later",
   "repository": {

package/src/components/Select.tsx

@@ -1,17 +1,13 @@
+import type { Component, ComponentProps, JSX, JSXElement } from 'solid-js';
+
 import { Select as SelectPrimitive } from '@ark-ui/solid/select';
-import {
-  type Component,
-  type ComponentProps,
-  type JSX,
-  type JSXElement,
-  For,
-  splitProps,
-} from 'solid-js';
 import { cn } from 'tailwind-variants';
 import CheckIcon from '~icons/material-symbols/check';
 import CloseIcon from '~icons/material-symbols/close';
 import ExpandMoreIcon from '~icons/material-symbols/expand-more';
 
+import { createSelectTriggerRef } from '../primitives/selectTriggerRef';
+
 export const SelectControl = SelectPrimitive.Control;
 export const SelectItemContext = SelectPrimitive.ItemContext;
 export const SelectHiddenSelect = SelectPrimitive.HiddenSelect;
@@ -153,11 +149,14 @@ export const SelectValue: Component<SelectPrimitive.ValueTextProps> = (props) =>
 export const SelectTrigger: Component<
   SelectPrimitive.TriggerProps & { size?: 'sm' | 'default' }
 > = (props) => {
-  const [local, others] = splitProps(props, ['class', 'size']);
+  const [local, others] = splitProps(props, ['class', 'size', 'ref']);
   const size = local.size ?? 'default';
+  const ref =
+    typeof local.ref === 'function' ? createSelectTriggerRef(local.ref) : createSelectTriggerRef();
 
   return (
     <SelectPrimitive.Trigger
+      ref={ref}
       data-slot='select-trigger'
       data-size={size}
       class={cn(

package/src/components/toaster/Toaster.tsx

@@ -36,9 +36,7 @@ const ToastIcon: Component<{ type: ToastOptions['type'] }> = (props) => (
 const ToastItem: Component<{ toast: Accessor<ToastOptions> }> = (props) => (
   <Toast.Root
     class={cn(
-      'group gap-2 px-4 py-3.5 shadow-lg min-w-80 pointer-events-auto relative flex w-full items-center rounded-xl border bg-popover',
-      'data-[state=open]:sm:slide-in-from-bottom-full data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full',
-      'data-[state=closed]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full',
+      'group gap-2 px-4 py-3.5 shadow-lg min-w-80 ease-in-out pointer-events-auto relative flex w-full items-center rounded-xl border bg-popover',
       'border-border text-popover-foreground',
     )}
   >

package/src/components/toaster/toaster.css

@@ -4,7 +4,7 @@
   z-index: var(--z-index);
   height: var(--height);
   opacity: var(--opacity);
-  will-change: translate, opacity, scale, height;
+  will-change: translate, opacity, scale;
   transition:
     translate 400ms,
     scale 400ms,
@@ -12,12 +12,12 @@
     height 400ms,
     box-shadow 200ms;
   transition-timing-function: cubic-bezier(0.21, 1.02, 0.73, 1);
-}
 
-[data-scope='toast'][data-part='root'][data-state='closed'] {
-  transition:
-    translate 400ms,
-    scale 400ms,
-    opacity 200ms;
-  transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
+  &[data-state='closed'] {
+    transition:
+      translate 400ms,
+      scale 400ms,
+      opacity 200ms;
+    transition-timing-function: cubic-bezier(0.06, 0.71, 0.55, 1);
+  }
 }

package/src/primitives/selectTriggerRef.ts

@@ -0,0 +1,33 @@
+// Workaround for https://github.com/chakra-ui/ark/issues/3146
+// SolidJS event delegation causes interact-outside to close the select on pointerdown,
+// Then the delegated click re-opens it. We suppress that click when already open.
+export const createSelectTriggerRef = (
+  forwardRef?: (element: HTMLButtonElement) => void,
+): ((element: HTMLButtonElement) => void) => {
+  let suppressNextClick = false;
+
+  return (element: HTMLButtonElement): void => {
+    element.addEventListener(
+      'pointerdown',
+      () => {
+        if (element.getAttribute('aria-expanded') === 'true') {
+          suppressNextClick = true;
+        }
+      },
+      true,
+    );
+    element.addEventListener(
+      'click',
+      (event) => {
+        if (suppressNextClick) {
+          suppressNextClick = false;
+          event.stopPropagation();
+        }
+      },
+      true,
+    );
+    if (forwardRef) {
+      forwardRef(element);
+    }
+  };
+};