@startlibs/components 1.1.5 → 1.2.0-rc.2

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'};
@@ -222,7 +229,7 @@ export const DialogContainer = forwardRef((
         }
       })
       // clearPreventDialogPop()
-      if (document.body.scrollHeight === document.body.clientHeight) {
+      if (modal.current && document.body.scrollHeight === document.body.clientHeight) {
         modal.current.style.overflowY = "scroll"
         if (modalScroll.current) {
           modalScroll.current.style.overflowY = "scroll"
@@ -374,7 +381,7 @@ export const DialogContainer = forwardRef((
       if (getSize() === 1) {
         removeWindowScroll(true);
       }
-      if (document.body.scrollHeight === document.body.clientHeight) {
+      if (modal.current && document.body.scrollHeight === document.body.clientHeight) {
         modal.current.style.overflowY = "none"
       }
       if (modalScroll.current) {
@@ -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)