@@ -10,7 +10,7 @@ import Foreign.Object (Object)
1010import Foreign.Object as Object
1111import Framer.Motion as M
1212import Partial.Unsafe (unsafeCrashWith)
13−import React.Basic.DOM (CSS, Props_input, css)
13+import React.Basic.DOM (CSS, css)
1414import React.Basic.DOM as R
1515import React.Basic.Emotion (Style)
1616import React.Basic.Hooks (reactComponent)
@@ -131,7 +131,7 @@ rawInput =
131131
132132rawContainer ∷ ∀ p. ReactComponent { | p }
133133rawContainer =
134− mkForwardRefComponent "Input" do
134+ mkForwardRefComponent "InputContainer" do
135135 \( props ∷
136136 { children ∷ Array JSX
137137 , label ∷ JSX
@@ -228,41 +228,29 @@ rawComponent =
228228 setHasValue (v /= "")
229229 )
230230 onFocus = handler preventDefault (const $ unless hasFocus $ setHasFocus true)
231+ theInput =
232+ rawInput
233+ </> ( props
234+ { onFocus = composeHandler props.onFocus onFocus
235+ , onBlur = composeHandler props.onBlur onBlur
236+ , ref = ref
237+ , placeholder = maybePlaceholder # maybeToOp # unsafeUnOptional
238+ , _aria =
239+ if props.label # opToMaybe # isJust then
240+ aria # Object.insert "labelledby" labelId
241+ else
242+ aria
243+ }
244+ )
231245 inputContainer =
232− M.div
233− </* M.motion
234− { variants: M.variants containerVariants
235− , animate: M.animate if hasFocus then containerVariantLabels.focussed else containerVariantLabels.blurred
236− }
237− { className: "ry-input-container"
238− , css: Style.inputContainer props
239− , _data:
240− Object.fromHomogeneous
241− { "invalid": aria # Object.lookup "invalid" # fromMaybe ""
242− }
243− }
246+ rawContainer
247+ </ { label: (mkLabel <$> props.label) ?|| mempty
248+ , hasFocus: hasFocus
249+ , inputProps: props
250+ , css: props.css
251+ }
244252 /> [ leading # foldMap \l -> div </ { ref: leftIconRef } /> [ l ]
245− , rawInput
246− </> ( props
247− { onFocus = composeHandler props.onFocus onFocus
248− , onBlur = composeHandler props.onBlur onBlur
249− , ref = ref
250− , placeholder = maybePlaceholder # maybeToOp # unsafeUnOptional
251− , _aria =
252− if props.label # opToMaybe # isJust then
253− aria # Object.insert "labelledby" labelId
254− else
255− aria
256− }
257− )
258− -- ref
259− -- ( props { type = HTMLInput.toString <$> props.type # unsafeUnOptional }
260− -- # setOrDelete (SProxy ∷ _ "placeholder") (maybePlaceholder # maybeToOp)
261− -- # setOrDelete (SProxy ∷ _ "value") (maybeValue # maybeToOp)
262− -- )
263− -- { className: "ry-input"
264− -- , css: Style.input
265− -- }
253+ , theInput
266254 , trailing # foldMap \t -> div </ {} /> [ t ]
267255 ]
268256 pure