nitro-web 0.0.74 → 0.0.75

package/components/auth/auth.api.js

@@ -106,7 +106,7 @@ async function store(req, res) {
 async function signup(req, res) {
   try {
     const desktop = req.query.desktop
-    let user = await this.userCreate(req.body, this.findUserFromProvider)
+    let user = await this.userCreate(req.body)
     sendEmail({
       config: authConfig,
       template: 'welcome',
@@ -315,8 +315,12 @@ export async function signinAndGetStore(user, isDesktop, getStore) {
   return { ...store, jwt }
 }
 
-export async function userCreate({ name, business, email, password, findUserFromProvider }) {
+export async function userCreate({ name, business, email, password }) {
   try {
+    if (!this.findUserFromProvider) {
+      throw new Error('this.findUserFromProvider doesn\'t exist, make sure the context is available when calling this function')
+    }
+
     const options = { blacklist: ['-_id'] }
     const isMultiTenant = !authConfig.isNotMultiTenant
     const userId = db.id()

package/components/partials/element/dropdown.tsx

@@ -81,45 +81,51 @@ export const Dropdown = forwardRef(function Dropdown({
 
   useEffect(() => {
     setReady(false)
+    console.log(1111, isActive, dropdownRef.current)
     if (!isActive || !dropdownRef.current) return
     
-    const ul = dropdownRef.current.querySelector('ul') as HTMLElement
-    if (!ul) return
+    // const ul = dropdownRef.current.querySelector('&>ul') as HTMLElement
+    // if (!ul) return
+    // console.log(1111)
   
     // Temporarily show the ul for measurement
-    const originalMaxHeight = ul.style.maxHeight
-    const originalVisibility = ul.style.visibility
-    const originalOpacity = ul.style.opacity
-    const originalPointerEvents = ul.style.pointerEvents
+    // const originalMaxHeight = ul.style.maxHeight
+    // const originalVisibility = ul.style.visibility
+    // const originalOpacity = ul.style.opacity
+    // const originalPointerEvents = ul.style.pointerEvents
   
-    ul.style.maxHeight = 'none'
-    ul.style.visibility = 'hidden'
-    ul.style.opacity = '0'
-    ul.style.pointerEvents = 'none'
+    // ul.style.maxHeight = 'none'
+    // ul.style.visibility = 'hidden'
+    // ul.style.opacity = '0'
+    // ul.style.pointerEvents = 'none'
   
-    const dropdownHeight = ul.getBoundingClientRect().height
+    // const dropdownHeight = ul.getBoundingClientRect().height
   
     // Revert styles
-    ul.style.maxHeight = originalMaxHeight
-    ul.style.visibility = originalVisibility
-    ul.style.opacity = originalOpacity
-    ul.style.pointerEvents = originalPointerEvents
+    // ul.style.maxHeight = originalMaxHeight
+    // ul.style.visibility = originalVisibility
+    // ul.style.opacity = originalOpacity
+    // ul.style.pointerEvents = originalPointerEvents
   
-    const rect = dropdownRef.current.getBoundingClientRect()
-    const spaceBelow = window.innerHeight - rect.bottom
-    const spaceAbove = rect.top
   
-    const side = dir.endsWith('right') ? 'right' : 'left'
+    // const rect = dropdownRef.current.getBoundingClientRect()
+    // const spaceBelow = window.innerHeight - rect.bottom
+    // const spaceAbove = rect.top
   
-    const newDirection = dir.startsWith('bottom')
-      ? `${spaceBelow < dropdownHeight && spaceAbove > dropdownHeight ? 'top' : 'bottom'}-${side}`
-      : `${spaceAbove < dropdownHeight && spaceBelow > dropdownHeight ? 'bottom' : 'top'}-${side}`
+    // const side = dir.endsWith('right') ? 'right' : 'left'
   
-    setDirection(newDirection as 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right')
+    // const newDirection = dir.startsWith('bottom')
+    //   ? `${1 < 1 && 1 > 1 ? 'top' : 'bottom'}-${side}`
+    //   : `${1 < 1 && 1 > 1 ? 'bottom' : 'top'}-${side}`
   
-    requestAnimationFrame(() => {
-      setReady(true)
-    })
+    // setDirection(dir as 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right')
+  
+    // requestAnimationFrame(() => {
+    //   // console.log('ul', originalOpacity)
+    //   setReady(true)
+    // })
+    setDirection(dir)
+    setReady(true)
   }, [isActive, dir])
 
   function onMouseDown(e: { key: string, preventDefault: Function }) {
@@ -132,13 +138,12 @@ export const Dropdown = forwardRef(function Dropdown({
     if (option.onClick) option.onClick(e)
     if (!menuIsOpen) setIsActive(!isActive)
   }
-  var ready2
 
   return (
     <div 
       class={
         `relative is-${direction || dir}` + // until hovered, show the original direction to prevent scrollbars
-        (ready2 ? ' is-ready' : '') +
+        (ready ? ' is-ready' : '') +
         (isHoverable ? ' is-hoverable' : '') +
         (isActive ? ' is-active' : '') +
         (!animate ? ' no-animation' : '') +
@@ -160,7 +165,7 @@ export const Dropdown = forwardRef(function Dropdown({
       <ul
         style={{ minWidth }}
         class={
-          twMerge(`${menuStyle} ${ready ? 'is-ready' : ''} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
+          twMerge(`${menuStyle} absolute invisible opacity-0 select-none min-w-full z-[1] ${menuClassName||''}`)}
       >
         {menuContent}
         {
@@ -193,7 +198,7 @@ const style = css`
   }
   &.is-bottom-right,
   &.is-top-right {
-    ul {
+    &>ul {
       left: auto;
       right: 0;
     }
@@ -213,13 +218,14 @@ const style = css`
     }
   }
   // active submenu
+  &./////////////
   &.is-hoverable:hover,
   &:focus,
   &.is-active,
   &>ul>li:hover,
   &>ul>li:focus,
   &>ul>li.is-active {
-    &>ul.is-ready {
+    &>ul {
       opacity: 1;
       visibility: visible;
       transition: transform 0.15s ease, opacity 0.15s ease;

package/components/partials/element/filters.tsx

@@ -119,9 +119,10 @@ export const Filters = forwardRef<FiltersHandleType, FiltersProps>(({
   
   return (
     <Elements.Dropdown 
+      // menuIsOpen={true}
+      className='ddddddddd'
       dir="bottom-right"
       allowOverflow={true}
-      // menuIsOpen={true}
       {...dropdownProps}
       menuClassName={twMerge(`min-w-[330px] ${dropdownProps?.menuClassName || ''}`)}
       menuContent={

package/components/partials/form/field.tsx

@@ -22,7 +22,7 @@ type FieldExtraProps = {
   /** icon to show in the input */
   icon?: React.ReactNode
   iconPos?: 'left' | 'right'
-  /** Pass dependencies to break memoization, handy for onChange/onInputChange */
+  /** Dependencies to break the implicit memoization of onChange/onInputChange */
   deps?: unknown[]
   placeholder?: string
 }
@@ -181,25 +181,19 @@ function ColorSvg({ hex }: { hex?: string }) {
 }
 
 export function isFieldCached(prev: IsFieldCachedProps, next: IsFieldCachedProps) {
+  // Check if the field is cached, onChange/onInputChange doesn't affect the cache
   const path = prev.name
   const state = prev.state || {}
-  // If state/satte-error values have changed, re-render!
-  if (deepFind(state, path) !== deepFind(next.state || {}, path)) {
-    // console.log(1, 'state changed', path)
-    return false
-  }
-  if (getErrorFromState(state, path) !== getErrorFromState(next.state || {}, path)) {
-    // console.log(2, 'error changed', path)
-    return false
-  }
-  // If deps have changed, re-render!
-  if ((next.deps?.length !== prev.deps?.length) || next.deps?.some((v, i) => v !== prev.deps?.[i])) {
-    // console.log(3, 'deps changed', path)
-    return false
-  }
-  // If any other props have changed, except onChange/onInputChange, re-render!
-  // In most cases, onChange/onInputChange remain the same and reference the same function...
-  for (const k in prev) {
+  // If the state value has changed, re-render!
+  if (deepFind(state, path) !== deepFind(next.state || {}, path)) return false
+  // If the state error has changed, re-render!
+  if (getErrorFromState(state, path) !== getErrorFromState(next.state || {}, path)) return false
+  // If `deps` have changed, handy for onChange/onInputChange, re-render!
+  if ((next.deps?.length !== prev.deps?.length) || next.deps?.some((v, i) => v !== prev.deps?.[i])) return false
+
+  // Check if any prop has changed, except `onChange`/`onInputChange`
+  const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)])
+  for (const k of allKeys) {
     if (k === 'state' || k === 'onChange' || k === 'onInputChange') continue
     if (prev[k as keyof typeof prev] !== next[k as keyof typeof next]) {
       // console.log(4, 'changed', path, k)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",