@startlibs/components 1.1.5 → 1.2.0-rc.1

package/src/SplitColumnsContainer.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import {getMargin, media} from '@startlibs/utils'
-import styled, {css} from 'styled-components'
+import {callIfFunction, getMargin, scrollWidth} from '@startlibs/utils'
+import styled, {useTheme} from 'styled-components'
 
 const getMarginFromFieldChild = (props) => {
   if (!props.last) return 0;
@@ -14,35 +14,94 @@ const getMarginFromFieldChild = (props) => {
 
 const splitColumnMargins = {small:0.5,'default':1, big:2}
 
-export const SplitColumnsContainer = styled.div`
-
-  margin-bottom: ${getMarginFromFieldChild}rem;
-  
-  ${props => css`
-    ${media.min(props.viewportMinWidth || 0)`
-      display: flex;
-      flex-wrap: nowrap;
-      margin-left: -${props=>getMargin(splitColumnMargins)(props)/2}rem;
-      margin-right: -${props=>getMargin(splitColumnMargins)(props)/2}rem;
-      margin-top: -${props=>getMargin(splitColumnMargins)(props)}rem;
-      > * {
-        flex-basis: 0;
-        flex-grow: 1;
-        margin-left: ${props=>getMargin(splitColumnMargins)(props)/2}rem;
-        margin-right: ${props=>getMargin(splitColumnMargins)(props)/2}rem;
-        margin-top: ${props=>getMargin(splitColumnMargins)(props)}rem;
-      }
-    `}
-  `}
-  ${props => props.twoColumnsBelowVW && css`
-    ${media.max(props.twoColumnsBelowVW)`
-      flex-wrap: wrap;
-      > * {
-        flex-basis: 47%;
-      }
-    `}
-  `}
+// viewportMinWidth/twoColumnsBelowVW vêm de props: não tem CSS estático possível pra eles (yak
+// extrai @media em tempo de build, não a partir de uma prop em tempo de render). Troca o
+// `media.min`/`media.max` (que embutiam um `@media` dinâmico) por um hook que ouve
+// `matchMedia` e liga/desliga classe — as duas regras de CSS ficam estáticas, e a mesma soma de
+// `scrollWidth` que `media()` já fazia entra aqui, pro breakpoint bater igual em px (inclusive
+// a 610px, entre 600 e 600 + barra de rolagem).
+const useMatchMedia = (query) => {
+  const getMatch = () => (typeof window !== 'undefined' && window.matchMedia) ? window.matchMedia(query).matches : false
+  const [matches, setMatches] = React.useState(getMatch)
+  React.useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return
+    const mql = window.matchMedia(query)
+    const onChange = () => setMatches(mql.matches)
+    onChange()
+    const addListener = mql.addEventListener ? (cb) => mql.addEventListener('change', cb) : (cb) => mql.addListener(cb)
+    const removeListener = mql.removeEventListener ? (cb) => mql.removeEventListener('change', cb) : (cb) => mql.removeListener(cb)
+    addListener(onChange)
+    return () => removeListener(onChange)
+  }, [query])
+  return matches
+}
+
+// Mesma comparação que checkCustomScreenWidth (utils/src/styled.js) fazia pro theme.overrideMediaWidth:
+// ignora o browser de verdade e compara direto contra o breakpoint (sem somar scrollWidth — o
+// override já é uma largura "combinada", não a viewport física). Usado em testes/impressão.
+const matchesOverrideWidth = (overrideWidth, breakpoint, type) => {
+  const currentWidth = callIfFunction(overrideWidth)
+  return type === 'min-width' ? currentWidth >= breakpoint : currentWidth <= breakpoint
+}
+
+// `breakpoint` null/undefined == bloco original não tinha condição nenhuma pra testar (o `&&`
+// de `props.twoColumnsBelowVW &&`): nem entra no matchMedia, nem no overrideMediaWidth.
+const useBreakpointMatch = (breakpoint, type, overrideWidth) => {
+  const hasBreakpoint = breakpoint !== undefined && breakpoint !== null
+  const useOverride = hasBreakpoint && overrideWidth !== undefined
+  const query = (hasBreakpoint && !useOverride)
+    ? `(${type}: ${breakpoint + scrollWidth}px)`
+    : 'not all'
+  const mediaMatch = useMatchMedia(query)
+  if (!hasBreakpoint) return false
+  return useOverride ? matchesOverrideWidth(overrideWidth, breakpoint, type) : mediaMatch
+}
+
+// styled(Base) mira num componente, não numa tag: ao contrário do antigo styled.div, o
+// styled-components não filtra prop inválida pra <div> nesse caso. Por isso tira aqui, à mão,
+// toda prop que ou é lida só pelo template (margin, last) ou só existe pra decidir a classe
+// aqui dentro (viewportMinWidth, twoColumnsBelowVW), antes de espalhar o resto no elemento real.
+const SplitColumnsContainerBase = React.forwardRef(({viewportMinWidth = 0, twoColumnsBelowVW, margin, last, className, ...rest}, ref) => {
+  const overrideWidth = useTheme()?.overrideMediaWidth
+  const isFlex = useBreakpointMatch(viewportMinWidth, 'min-width', overrideWidth)
+  const isTwoColumns = useBreakpointMatch(twoColumnsBelowVW, 'max-width', overrideWidth)
+  const classes = [className, isFlex && 'JS-flex-columns', isTwoColumns && 'JS-two-columns'].filter(Boolean).join(' ')
+  return <div ref={ref} className={classes || undefined} {...rest}/>
+})
+
+export const SplitColumnsContainer = styled(SplitColumnsContainerBase)`
+  margin-bottom: ${props => getMarginFromFieldChild(props)}rem;
+
+  &.JS-flex-columns {
+    display: flex;
+    flex-wrap: nowrap;
+    /* O yak extrai essas interpolações pra var(--...): um sinal de menos solto no texto estático,
+       logo antes da interpolação, vira "-var(--x)" na folha final — sintaxe de CSS inválida
+       (margin cai pro valor inicial, 0px). O sinal de menos tem que estar DENTRO do valor
+       calculado, não no texto ao redor. */
+    margin-left: ${props=> -getMargin(splitColumnMargins)(props)/2}rem;
+    margin-right: ${props=> -getMargin(splitColumnMargins)(props)/2}rem;
+    margin-top: ${props=> -getMargin(splitColumnMargins)(props)}rem;
+    > * {
+      flex-basis: 0;
+      flex-grow: 1;
+      margin-left: ${props=>getMargin(splitColumnMargins)(props)/2}rem;
+      margin-right: ${props=>getMargin(splitColumnMargins)(props)/2}rem;
+      margin-top: ${props=>getMargin(splitColumnMargins)(props)}rem;
+    }
+  }
+  &.JS-two-columns {
+    flex-wrap: wrap;
+    > * {
+      flex-basis: 47%;
+    }
+  }
 `
+// O plugin/babel-plugin-styled-components infere o displayName do nome da variável — mas só
+// quando o import `styled` vem de 'styled-components' (modo sc). No lib-yak o arquivo passa a
+// importar `styled` de '@yak/react' e isso não acontece mais, então fica explícito aqui, nos dois
+// modos: fixDoubledLastMarginBottom precisa do mesmo valor em "SplitColumnsContainer.displayName".
+SplitColumnsContainer.displayName = 'SplitColumnsContainer'
 
 export const fixDoubledLastMarginBottom = (children) => {
   let last = React.Children.count(children)-1

package/src/TextButton.jsx

@@ -14,7 +14,7 @@ export const TextButton = styled(({className,isLoading,alert, fontSize, children
   color: ${props => props.alert ? getColor('alert') : getColor('main')};
   cursor: pointer;
   text-decoration: none;
-  :hover, :active {
+  &:hover, &:active {
     color: ${props => props.alert ? darken(0.1, getColor("alert")(props)) : darken(0.1, getColor("main")(props))};
   }
   ${Loading} {

package/src/ToastNotifications.jsx

@@ -1,11 +1,10 @@
 import React, {useEffect, useMemo, useRef} from 'react'
 import {oneWayAnimation, constrainEvent} from '@startlibs/utils'
 import _ from 'lodash/fp'
-import styled from 'styled-components'
+import styled, {css} from 'styled-components'
 import {rgba} from 'polished'
 import {Fill, useToggle, willUseSharedState} from '@startlibs/core'
 import {getUID, ifUndefined, media, callIfFunction, getColor} from '@startlibs/utils'
-import {css} from "styled-components/macro";
 import {FlipList} from './FlipList'
 import {Icon} from './Icon'
 import {Loading} from './Loading'
@@ -27,11 +26,11 @@ const NotificationContainer = styled.div `
   ${media.mobile`
     padding-bottom: 0.75rem;
   `}
-  ::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     width: 21px;
     height: 21px;
   }
-  ::-webkit-scrollbar-thumb {
+  &::-webkit-scrollbar-thumb {
     pointer-events: all;
     background: rgba(0,0,0,0.4);
     border-radius: 100px;
@@ -45,7 +44,7 @@ const NotificationContainer = styled.div `
       border: 6px solid transparent;
     }
   }
-  ::-webkit-scrollbar-corner {
+  &::-webkit-scrollbar-corner {
     background: transparent;
   }
   ${media.desktop`
@@ -68,6 +67,10 @@ const ToastBox = styled.div`
   margin-top: 0.5rem;
   overflow: hidden;
   transition: 0.3s background ease, 0.4s opacity 1.5s;
+  /* styled-components (stylis) hoista bloco aninhado de @media para depois do flat; o
+     yak preserva a ordem do fonte. Esse fallback sólido precisa vir ANTES dos media
+     abaixo, ou o yak aplicaria ele por último (ganhando sempre) nos dois breakpoints. */
+  ${props => css`background: ${getColor(props.type)};`}
   ${media.desktop`
     background: ${props => rgba(getColor(props.type)(props),ifUndefined(props.opacity,0.7))};
     max-width: 300px;
@@ -75,7 +78,6 @@ const ToastBox = styled.div`
   ${media.mobile`
     background: ${props => rgba(getColor(props.type)(props),ifUndefined(props.opacity,0.8))};
   `}
-  ${props => css`background: ${getColor(props.type)};`}
 `
 const NotificationTitleContainer = styled.div`
   background: rgba(0,0,0,0.1);
@@ -103,6 +105,11 @@ const NotificationContent = styled.div`
     justify-content: center;
   `}
 `
+// Task 13c: substitui a prop JSX `css="min-width: 0;"` (R13 proíbe essa forma no yak) por um
+// styled component equivalente.
+const NotificationContentBody = styled.div`
+  min-width: 0;
+`
 const NotificationIconWrapper = styled.div`
   margin-right: 1rem;
   position: relative;
@@ -126,7 +133,7 @@ const CloseIcon = styled(Icon).attrs({icon: 'x'})`
   transform: translateY(-50%);
   border-radius: 100px;
   opacity: 0.8;
-  :hover, :active {
+  &:hover, &:active {
     background: rgba(0,0,0,0.1);
     opacity: 1;
   }
@@ -251,7 +258,7 @@ export const ToastNotifications = () => {
                       {notification.isLoading && <Loading size={36} white absolute/>}
                     </NotificationIconWrapper>
                   }
-                  <div css="min-width: 0;">{callIfFunction(notification.content,closeWithLock)}</div>
+                  <NotificationContentBody>{callIfFunction(notification.content,closeWithLock)}</NotificationContentBody>
                 </NotificationContent>
                 {notification.details &&
                   <NotificationDetails onClick={constrainEvent()}>

package/src/alt/dialogs/DialogWithImageHeader.jsx

@@ -16,10 +16,10 @@ export const DialogWithImageHeader = styled(Dialog)`
     height: 36px;
     line-height: 36px;
     transition: 0.1s ease-out;
-    :hover {
+    &:hover {
       background-color: rgb(230,230,230);
     }
-    :active {
+    &:active {
       background-color: rgb(220,220,220);
       transition: 0s ease-out;
     }

package/src/alt/dialogs/DialogWithSidebar.jsx

@@ -45,7 +45,7 @@ export const DialogTabMenu = styled.ul`
     ${media.mobile`
       font-size: 16px;
     `}
-    :hover {
+    &:hover {
       background-color: ${getColor('bluishGray')};
       cursor: pointer;
     }
@@ -68,7 +68,7 @@ export const DialogTabMenu = styled.ul`
   ${props => props.menuTabIsOpen && `
     li {
       padding: 1.25rem 2rem 1.25rem 3.25rem;
-      border-radius: 6px
+      border-radius: 6px;
     }
     .icon{
       left: 0;
@@ -83,7 +83,7 @@ const fadeOut = [absoluteOnLeave,relativeFadeout]
 export const MENU_TAB = '$menu$'
 
 // ponytail: sem footer — padrão do dialog com barra lateral; fecha pelo X ou por fora
-export const DialogWithSidebarPresentation = ({className, tabIsOpen, menuIsOpen, sidebar, Content, openTab, children, title, ...props}) => {
+export const DialogWithSidebarPresentation = ({className, style, tabIsOpen, menuIsOpen, sidebar, Content, openTab, children, title, ...props}) => {
   const tab = useToggle(tabIsOpen)
   const sideMenu = usePopupToggle(menuIsOpen)
   const ref = useRef()
@@ -92,7 +92,7 @@ export const DialogWithSidebarPresentation = ({className, tabIsOpen, menuIsOpen,
   const menuTabIsOpen = tab.isOpen === MENU_TAB
 
   return <DialogContainer {...props} ref={ref}>{({confirmCloseDialog}) =>
-      <div className={className + " JS-has-wc"} ref={ref}>
+      <div className={className + " JS-has-wc"} style={style} ref={ref}>
         {
           props.closeDialog &&
           <CloseIcon onClick={confirmCloseDialog}/>
@@ -123,7 +123,8 @@ const TabContent = ({Content,children,tab,switchAnimation}) => {
   </div>
 }
 
-export const DialogWithSidebar = styled((props) => <Dialog fullscreenOnMobile as={DialogWithSidebarPresentation} {...props} />)`
+// R6: "as" não existe no yak. Dialog expõe "tagAs" no lugar (ver Dialog.jsx).
+export const DialogWithSidebar = styled((props) => <Dialog fullscreenOnMobile tagAs={DialogWithSidebarPresentation} {...props} />)`
   max-width: 59rem;
   display: flex;
   padding: 0;

package/src/alt/dialogs/MobileBubbleDialog.jsx

@@ -21,7 +21,7 @@ const MobileBubbleDialogFooter = styled.div `
   cursor: pointer;
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
-  :active {
+  &:active {
     background: rgb(232,232,232);
   }
 `

package/src/containers/DialogContainer.jsx

@@ -35,13 +35,20 @@ export const ModalContainer = styled.div`
     scrollbar-color: transparent transparent;
 `
 
-const DialogCenter = styled.div`
+// R6: "as" não existe no yak. tagAs troca a tag renderizada (form quando a dialog embute um
+// form, senão div). withScroll/fullscreen/fullscreenOnMobile são lidos pelo template abaixo,
+// mas não são atributos DOM válidos: como o alvo do styled() agora é um componente (não mais
+// styled.div puro), o styled-components para de filtrar prop inválida sozinho — tiram-se à mão
+// antes do spread no elemento real.
+const DialogCenterTagAs = React.forwardRef(({tagAs: Tag = 'div', withScroll, fullscreen, fullscreenOnMobile, ...props}, ref) => <Tag ref={ref} {...props}/>)
+
+const DialogCenter = styled(DialogCenterTagAs)`
   @supports (position:sticky) {
     will-change: transform, opacity;
     &.JS-wc-off {
       will-change: auto;
     }
-  }  
+  }
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -59,7 +66,7 @@ const DialogCenter = styled.div`
   right:0;
   align-items: center;
   ${media.desktop`
-    padding: ${props => props.fullscreen ? '1rem' : '3rem 0.5rem;'};
+    padding: ${props => props.fullscreen ? '1rem' : '3rem 0.5rem'};
   `}
   ${media.mobile`
     padding: ${props => props.fullscreenOnMobile ? '0' : '0.5rem'};
@@ -403,7 +410,7 @@ export const DialogContainer = forwardRef((
             <AnimatedModal timing={animationTiming} blurBackdrop={blurBackdrop}/>
             <ModalContainer ref={modal}>
 
-            <DialogCenter autoComplete={autoComplete} className="JS-has-wc" withScroll={getSize()>1} fullscreen={fullscreen} fullscreenOnMobile={fullscreenOnMobile} ref={modalScroll} as={usingForm ? 'form' : undefined} onClick={checkClick}
+            <DialogCenter autoComplete={autoComplete} className="JS-has-wc" withScroll={getSize()>1} fullscreen={fullscreen} fullscreenOnMobile={fullscreenOnMobile} ref={modalScroll} tagAs={usingForm ? 'form' : undefined} onClick={checkClick}
                           onSubmit={usingForm ? () => {} : undefined}
                           onMouseDown={mouseDown}>
               {content}

package/src/willUseIsSticky.jsx

@@ -32,9 +32,29 @@ const SentinelStyle = styled.div`
   visibility: hidden;
   height:1px;
   width: 1px;
-  ${props => props.addCss}
 `
 
+// addCss é texto livre de declarações CSS (ex.: Combobox.jsx em @startlibs/form passa
+// "margin-top:-3px;"), decidido em tempo de execução pelo chamador — não dá pra virar
+// `css\`\`` (precisaria do texto na hora do build) nem ficar como interpolação solta no
+// template (R14: o yak ignora em silêncio uma função que devolve texto livre numa posição de
+// declaração). Vira `style` inline nos dois modos: mesmo resultado visual, sem CSS-in-JS aqui.
+const cssTextToStyle = (text) => {
+  const style = {}
+  for (const declaration of (text || '').split(';')) {
+    const colonIndex = declaration.indexOf(':')
+    if (colonIndex === -1) continue
+    const property = declaration.slice(0, colonIndex).trim()
+    const value = declaration.slice(colonIndex + 1).trim()
+    if (!property || !value) continue
+    // Custom property (--foo) mantém o nome; o resto vira camelCase (margin-top -> marginTop),
+    // igual ao que o React espera num objeto de `style`.
+    const camelProperty = property.startsWith('--') ? property : property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+    style[camelProperty] = value
+  }
+  return Object.keys(style).length ? style : undefined
+}
+
 export const willUseIsSticky = (options = {}) => {
 
   const [useRegister, onChange] = willUseSharedCallback()
@@ -100,7 +120,7 @@ export const willUseIsSticky = (options = {}) => {
       }
     },[])
 
-    const renderSentinel = (css = "") => <SentinelStyle addCss={css} className={className} ref={ensuredRef} />
+    const renderSentinel = (css = "") => <SentinelStyle style={cssTextToStyle(css)} className={className} ref={ensuredRef} />
 
     return children
       ? children(renderSentinel,isSticky)