Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@spark-ui/form-field

Package Overview
Dependencies
Maintainers
7
Versions
142
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spark-ui/form-field - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

7

CHANGELOG.md

@@ -6,2 +6,9 @@ # Change Log

## [1.2.1](https://github.com/adevinta/spark/compare/@spark-ui/form-field@1.2.0...@spark-ui/form-field@1.2.1) (2023-07-28)
### Bug Fixes
- **form-field:** fix type ([e1f8f15](https://github.com/adevinta/spark/commit/e1f8f156c6126b106fe29351fdbd3b41fbc2e4d8))
- **form-field:** fix undefined values when accessing length property ([bb8493f](https://github.com/adevinta/spark/commit/bb8493fdf725208664804c71836cb84dc8ac78b9))
# [1.2.0](https://github.com/adevinta/spark/compare/@spark-ui/form-field@1.1.0...@spark-ui/form-field@1.2.0) (2023-07-26)

@@ -8,0 +15,0 @@

4

dist/FormFieldCharactersCount.d.ts

@@ -6,3 +6,3 @@ import { ComponentPropsWithoutRef } from 'react';

*/
value: string;
value?: string;
/**

@@ -17,3 +17,3 @@ * Maximum numeric value to be displayed.

*/
value: string;
value?: string | undefined;
/**

@@ -20,0 +20,0 @@ * Maximum numeric value to be displayed.

@@ -1,1 +0,1 @@

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),y=require("@radix-ui/react-id"),w=require("@spark-ui/slot"),c=require("class-variance-authority"),k=require("@spark-ui/label"),R=e.createContext(null),M=()=>{const a=e.useContext(R);if(!a)throw Error("useFormField must be used within a FormField provider");return a},S=({id:a,name:s,disabled:r=!1,state:t,isRequired:l,children:o})=>{const i=y.useId(),[d,n]=e.useState([]),m=d.length>0?d.join(" "):void 0,f=e.useCallback(g=>{n(N=>[...N,g])},[]),p=e.useCallback(g=>{n(N=>N.filter(H=>H!==g))},[]),j=e.useMemo(()=>({id:a,labelId:i,name:s,disabled:r,state:t,isRequired:l,isInvalid:t==="error",description:m,onMessageIdAdd:f,onMessageIdRemove:p}),[a,i,s,r,m,t,l,f,p]);return e.createElement(R.Provider,{value:j},o)};S.displayName="FormFieldProvider";const L=e.forwardRef(({className:a,disabled:s=!1,name:r,state:t,isRequired:l=!1,asChild:o=!1,...i},d)=>{const n=y.useId(),m=o?w.Slot:"div";return e.createElement(S,{id:n,name:r,isRequired:l,disabled:s,state:t},e.createElement(m,{ref:d,"data-spark-component":"form-field",className:c.cx(a,"flex flex-col gap-sm"),...i}))});L.displayName="FormField";const x=e.forwardRef(({id:a,className:s,...r},t)=>{const{onMessageIdAdd:l,onMessageIdRemove:o}=M(),i=y.useId(),d=a||i;return e.useEffect(()=>(l(d),()=>{o(d)}),[d,l,o]),e.createElement("span",{ref:t,id:d,"data-spark-component":"form-field-message",className:c.cx(s,"text-caption"),...r})});x.displayName="FormField.Message";const P=c.cva([],{variants:{state:{alert:["text-alert"],error:["text-error"],success:["text-success"]}}}),u=e.forwardRef(({className:a,state:s,...r},t)=>M().state!==s?null:e.createElement(x,{ref:t,"data-spark-component":"form-field-state-message","aria-live":"polite",className:P({className:a,state:s}),...r}));u.displayName="FormField.StateMessage";const E=e.forwardRef((a,s)=>e.createElement(u,{ref:s,"data-spark-component":"form-field-alert-message",state:"alert",...a}));E.displayName="FormField.AlertMessage";const v=e.forwardRef(({className:a,value:s,maxLength:r,...t},l)=>{const o=s.length??0;return e.createElement("span",{ref:l,"data-spark-component":"form-field-characters-count",className:c.cx(a,"text-caption","text-neutral"),...t},o,"/",r)});v.displayName="FormField.CharactersCount";const A=()=>{const{id:a,name:s,description:r,disabled:t,state:l,labelId:o,isInvalid:i,isRequired:d}=e.useContext(R)||{};return{id:a,name:s,description:r,disabled:t,state:l,labelId:o,isInvalid:i,isRequired:d}},I=({children:a})=>{const s=A();return e.createElement(e.Fragment,null,a(s))};I.displayName="FormField.Control";const h=e.forwardRef((a,s)=>e.createElement(u,{ref:s,"data-spark-component":"form-field-error-message",state:"error",...a}));h.displayName="FormField.ErrorMessage";const C=e.forwardRef(({className:a,...s},r)=>e.createElement(x,{ref:r,"data-spark-component":"form-field-helper-message",className:c.cx(a,"text-neutral"),...s}));C.displayName="FormField.HelperMessage";const F=e.forwardRef((a,s)=>e.createElement(k.Label.RequiredIndicator,{ref:s,...a}));F.displayName="FormField.RequiredIndicator";const q=e.forwardRef(({htmlFor:a,className:s,children:r,requiredIndicator:t=e.createElement(F,null),asChild:l,...o},i)=>{const d=M(),{disabled:n,labelId:m,isRequired:f}=d,p=l?void 0:a||d.id;return e.createElement(k.Label,{ref:i,id:m,"data-spark-component":"form-field-label",htmlFor:p,className:c.cx(s,"flex items-center gap-sm",n?"text-on-surface/dim-3 pointer-events-none":void 0),asChild:l,...o},e.createElement(w.Slottable,null,r),f&&t)});q.displayName="FormField.Label";const b=e.forwardRef((a,s)=>e.createElement(u,{ref:s,"data-spark-component":"form-field-success-message",state:"success",...a}));b.displayName="FormField.SuccessMessage",q.displayName="FormField.Label",I.displayName="FormField.Control",u.displayName="FormField.StateMessage",b.displayName="FormField.SuccessMessage",E.displayName="FormField.AlertMessage",h.displayName="FormField.ErrorMessage",C.displayName="FormField.HelperMessage",F.displayName="FormField.RequiredIndicator",v.displayName="FormField.CharactersCount";const O=Object.assign(L,{Label:q,Control:I,StateMessage:u,SuccessMessage:b,AlertMessage:E,ErrorMessage:h,HelperMessage:C,RequiredIndicator:F,CharactersCount:v});exports.FormField=O,exports.useFormFieldControl=A;
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),y=require("@radix-ui/react-id"),w=require("@spark-ui/slot"),c=require("class-variance-authority"),k=require("@spark-ui/label"),R=e.createContext(null),M=()=>{const a=e.useContext(R);if(!a)throw Error("useFormField must be used within a FormField provider");return a},S=({id:a,name:s,disabled:r=!1,state:t,isRequired:l,children:o})=>{const i=y.useId(),[d,n]=e.useState([]),m=d.length>0?d.join(" "):void 0,f=e.useCallback(g=>{n(N=>[...N,g])},[]),p=e.useCallback(g=>{n(N=>N.filter(H=>H!==g))},[]),j=e.useMemo(()=>({id:a,labelId:i,name:s,disabled:r,state:t,isRequired:l,isInvalid:t==="error",description:m,onMessageIdAdd:f,onMessageIdRemove:p}),[a,i,s,r,m,t,l,f,p]);return e.createElement(R.Provider,{value:j},o)};S.displayName="FormFieldProvider";const L=e.forwardRef(({className:a,disabled:s=!1,name:r,state:t,isRequired:l=!1,asChild:o=!1,...i},d)=>{const n=y.useId(),m=o?w.Slot:"div";return e.createElement(S,{id:n,name:r,isRequired:l,disabled:s,state:t},e.createElement(m,{ref:d,"data-spark-component":"form-field",className:c.cx(a,"flex flex-col gap-sm"),...i}))});L.displayName="FormField";const x=e.forwardRef(({id:a,className:s,...r},t)=>{const{onMessageIdAdd:l,onMessageIdRemove:o}=M(),i=y.useId(),d=a||i;return e.useEffect(()=>(l(d),()=>{o(d)}),[d,l,o]),e.createElement("span",{ref:t,id:d,"data-spark-component":"form-field-message",className:c.cx(s,"text-caption"),...r})});x.displayName="FormField.Message";const P=c.cva([],{variants:{state:{alert:["text-alert"],error:["text-error"],success:["text-success"]}}}),u=e.forwardRef(({className:a,state:s,...r},t)=>M().state!==s?null:e.createElement(x,{ref:t,"data-spark-component":"form-field-state-message","aria-live":"polite",className:P({className:a,state:s}),...r}));u.displayName="FormField.StateMessage";const E=e.forwardRef((a,s)=>e.createElement(u,{ref:s,"data-spark-component":"form-field-alert-message",state:"alert",...a}));E.displayName="FormField.AlertMessage";const v=e.forwardRef(({className:a,value:s="",maxLength:r,...t},l)=>{const o=s.length;return e.createElement("span",{ref:l,"data-spark-component":"form-field-characters-count",className:c.cx(a,"text-caption","text-neutral"),...t},o,"/",r)});v.displayName="FormField.CharactersCount";const A=()=>{const{id:a,name:s,description:r,disabled:t,state:l,labelId:o,isInvalid:i,isRequired:d}=e.useContext(R)||{};return{id:a,name:s,description:r,disabled:t,state:l,labelId:o,isInvalid:i,isRequired:d}},I=({children:a})=>{const s=A();return e.createElement(e.Fragment,null,a(s))};I.displayName="FormField.Control";const h=e.forwardRef((a,s)=>e.createElement(u,{ref:s,"data-spark-component":"form-field-error-message",state:"error",...a}));h.displayName="FormField.ErrorMessage";const C=e.forwardRef(({className:a,...s},r)=>e.createElement(x,{ref:r,"data-spark-component":"form-field-helper-message",className:c.cx(a,"text-neutral"),...s}));C.displayName="FormField.HelperMessage";const F=e.forwardRef((a,s)=>e.createElement(k.Label.RequiredIndicator,{ref:s,...a}));F.displayName="FormField.RequiredIndicator";const q=e.forwardRef(({htmlFor:a,className:s,children:r,requiredIndicator:t=e.createElement(F,null),asChild:l,...o},i)=>{const d=M(),{disabled:n,labelId:m,isRequired:f}=d,p=l?void 0:a||d.id;return e.createElement(k.Label,{ref:i,id:m,"data-spark-component":"form-field-label",htmlFor:p,className:c.cx(s,"flex items-center gap-sm",n?"text-on-surface/dim-3 pointer-events-none":void 0),asChild:l,...o},e.createElement(w.Slottable,null,r),f&&t)});q.displayName="FormField.Label";const b=e.forwardRef((a,s)=>e.createElement(u,{ref:s,"data-spark-component":"form-field-success-message",state:"success",...a}));b.displayName="FormField.SuccessMessage",q.displayName="FormField.Label",I.displayName="FormField.Control",u.displayName="FormField.StateMessage",b.displayName="FormField.SuccessMessage",E.displayName="FormField.AlertMessage",h.displayName="FormField.ErrorMessage",C.displayName="FormField.HelperMessage",F.displayName="FormField.RequiredIndicator",v.displayName="FormField.CharactersCount";const O=Object.assign(L,{Label:q,Control:I,StateMessage:u,SuccessMessage:b,AlertMessage:E,ErrorMessage:h,HelperMessage:C,RequiredIndicator:F,CharactersCount:v});exports.FormField=O,exports.useFormFieldControl=A;
{
"name": "@spark-ui/form-field",
"version": "1.2.0",
"version": "1.2.1",
"description": "Provide context to your form elements",

@@ -34,3 +34,3 @@ "publishConfig": {

},
"gitHead": "74086db9383dceb19785a080aa5ab1792f838012"
"gitHead": "ded72f7ef616eba2716e8cdea290572f5c3e1cb1"
}

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc