@purpurds/text-field 3.7.1 → 4.0.1

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@purpurds/text-field",
-  "version": "3.7.1",
+  "version": "4.0.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/text-field.cjs.js",
   "types": "./dist/text-field.d.ts",
   "exports": {
     ".": {
       "require": "./dist/text-field.cjs.js",
-      "systemjs": "./dist/text-field.system.js",
       "types": "./dist/text-field.d.ts",
       "default": "./dist/text-field.es.js"
     },
@@ -16,12 +15,12 @@
   "source": "src/text-field.tsx",
   "dependencies": {
     "classnames": "~2.5.0",
-    "@purpurds/field-error-text": "3.7.1",
-    "@purpurds/field-helper-text": "3.7.1",
-    "@purpurds/icon": "3.7.1",
-    "@purpurds/spinner": "3.7.1",
-    "@purpurds/label": "3.7.1",
-    "@purpurds/tokens": "3.7.1"
+    "@purpurds/field-error-text": "4.0.1",
+    "@purpurds/icon": "4.0.1",
+    "@purpurds/label": "4.0.1",
+    "@purpurds/spinner": "4.0.1",
+    "@purpurds/tokens": "4.0.1",
+    "@purpurds/field-helper-text": "4.0.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.7.0",
@@ -51,7 +50,7 @@
   "scripts": {
     "build:dev": "vite",
     "build:watch": "vite build --watch",
-    "build": "rm -rf dist && vite build && vite build --mode systemjs",
+    "build": "vite build",
     "ci:build": "rushx build",
     "coverage": "vitest run --coverage",
     "lint:fix": "eslint . --fix",

package/src/text-field.tsx

@@ -14,8 +14,16 @@ import c from "classnames";
 
 import styles from "./text-field.module.scss";
 
+function setOrGenerateRandomId(id: string | undefined) {
+  if (typeof id === "undefined") {
+    const randomId = Math.random().toString(36).substring(2, 10); // Random alphanumeric string
+    return randomId;
+  }
+  return id;
+}
+
 export type TextFieldProps = ComponentPropsWithoutRef<"input"> & {
-  id: string;
+  id: string | undefined;
   ["data-testid"]?: string;
   className?: string;
   /**
@@ -84,9 +92,10 @@ const TextFieldComponent = (
   }: TextFieldProps,
   ref: ForwardedRef<HTMLInputElement>
 ) => {
+  const inputId = setOrGenerateRandomId(inputProps.id);
   const getTestId = (name: string) => (dataTestId ? `${dataTestId}-${name}` : undefined);
   const isValid = valid && !errorText;
-  const helperTextId = helperText ? `${inputProps.id}-helper-text` : undefined;
+  const helperTextId = helperText ? `${inputId}-helper-text` : undefined;
 
   const startAdornments: ReactNode[] = [startAdornment].filter((adornment) => !!adornment);
 
@@ -124,7 +133,7 @@ const TextFieldComponent = (
     <div className={c(className, styles[rootClassName])}>
       {label && (
         <Label
-          htmlFor={inputProps.id}
+          htmlFor={inputId}
           className={styles[`${rootClassName}__label`]}
           data-testid={getTestId("label")}
           disabled={inputProps.disabled}

package/dist/text-field.system.js

@@ -1,30 +0,0 @@
-System.register(["react","react/jsx-runtime","react-dom"],function(U,et){"use strict";var m,v,x,g,S,q,C,p,P,_;return{setters:[c=>{m=c.forwardRef,v=c.Children,x=c.isValidElement,g=c.createElement,S=c.cloneElement,q=c.useEffect,C=c.Fragment,p=c.default},c=>{P=c.jsxs,_=c.jsx},null],execute:function(){function c(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var F={exports:{}};/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var i={}.hasOwnProperty;function n(){for(var e="",r=0;r<arguments.length;r++){var u=arguments[r];u&&(e=l(e,a.call(this,u)))}return e}function a(e){if(typeof e=="string"||typeof e=="number")return this&&this[e]||e;if(typeof e!="object")return"";if(Array.isArray(e))return n.apply(this,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var r="";for(var u in e)i.call(e,u)&&e[u]&&(r=l(r,this&&this[u]||u));return r}function l(e,r){return r?e?e+" "+r:e+r:e}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(F);var W=F.exports;const ee=c(W),te={"purpur-icon":"_purpur-icon_8u1lq_1","purpur-icon--xxs":"_purpur-icon--xxs_8u1lq_4","purpur-icon--xs":"_purpur-icon--xs_8u1lq_8","purpur-icon--sm":"_purpur-icon--sm_8u1lq_12","purpur-icon--md":"_purpur-icon--md_8u1lq_16","purpur-icon--lg":"_purpur-icon--lg_8u1lq_20","purpur-icon--xl":"_purpur-icon--xl_8u1lq_24"},re={name:"error-filled",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 24" fill="currentColor"><path fill-rule="evenodd" d="M14.268 3.5c-.77-1.333-2.694-1.333-3.464 0l-8.66 15c-.77 1.333.192 3 1.732 3h17.32c1.54 0 2.502-1.667 1.733-3l-8.66-15Zm-.694 5.067-.247 6.876h-1.566l-.247-6.876a1.03 1.03 0 1 1 2.06 0Zm.212 8.917c0 .649-.585 1.234-1.25 1.234-.648 0-1.25-.585-1.25-1.234 0-.633.602-1.234 1.25-1.234.665 0 1.25.601 1.25 1.234Z" clip-rule="evenodd"/></svg>',keywords:["error-filled"],category:"status"},ne=ee.bind(te),D="purpur-icon",ie="md",ae=t=>t.filter(i=>Object.keys(i).length>=1).map(i=>`${i.name}="${i.value}"`).join(" "),ue=({content:t="",title:i}={})=>{const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},{name:"viewBox",value:"0 0 24 24"},i?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],a=i?`<title>${i}</title>`:"";return`<svg ${ae(n)}>${a}${t}</svg>`},le=t=>t.replace(/<(\/?)svg([^>]*)>/g,"").trim(),se=({["data-testid"]:t,svg:i,allyTitle:n,className:a="",size:l=ie,...e})=>{const r=ue({content:le(i.svg),title:n}),u=ne(a,D,`${D}--${l}`);return _("span",{"aria-label":n,className:u,"data-testid":t,dangerouslySetInnerHTML:{__html:r},...e})};function oe(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var I={exports:{}};/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var i={}.hasOwnProperty;function n(){for(var e="",r=0;r<arguments.length;r++){var u=arguments[r];u&&(e=l(e,a(u)))}return e}function a(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return"";if(Array.isArray(e))return n.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var r="";for(var u in e)i.call(e,u)&&e[u]&&(r=l(r,u));return r}function l(e,r){return r?e?e+" "+r:e+r:e}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(I);var pe=I.exports;const ce=oe(pe),B={"purpur-field-error-text":"_purpur-field-error-text_1h4gy_1","purpur-field-error-text__icon":"_purpur-field-error-text__icon_1h4gy_12"},R="purpur-field-error-text",de=({["data-testid"]:t,children:i,className:n,relevant:a="additions text",...l})=>P("div",{className:ce([n,B[R]]),"data-testid":t,"aria-live":"assertive","aria-relevant":a,...l,children:[_(se,{svg:re,size:"xs",className:B[`${R}__icon`]}),i]});function _e(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var V={exports:{}};/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var i={}.hasOwnProperty;function n(){for(var e="",r=0;r<arguments.length;r++){var u=arguments[r];u&&(e=l(e,a(u)))}return e}function a(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return"";if(Array.isArray(e))return n.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var r="";for(var u in e)i.call(e,u)&&e[u]&&(r=l(r,u));return r}function l(e,r){return r?e?e+" "+r:e+r:e}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(V);var fe=V.exports;const me=_e(fe),T={"purpur-field-helper-text":"_purpur-field-helper-text_139ly_1","purpur-field-helper-text--disabled":"_purpur-field-helper-text--disabled_139ly_9"},Z="purpur-field-helper-text",ve=({["data-testid"]:t,children:i,className:n,disabled:a,id:l,...e})=>{const r=me([n,T[Z],{[T[`${Z}--disabled`]]:a}]);return _("span",{id:l,className:r,"data-testid":t,...e,children:i})};function ge(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var z={exports:{}};/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var i={}.hasOwnProperty;function n(){for(var e="",r=0;r<arguments.length;r++){var u=arguments[r];u&&(e=l(e,a.call(this,u)))}return e}function a(e){if(typeof e=="string"||typeof e=="number")return this&&this[e]||e;if(typeof e!="object")return"";if(Array.isArray(e))return n.apply(this,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var r="";for(var u in e)i.call(e,u)&&e[u]&&(r=l(r,this&&this[u]||u));return r}function l(e,r){return r?e?e+" "+r:e+r:e}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(z);var xe=z.exports;const ye=ge(xe),he={"purpur-icon":"_purpur-icon_8u1lq_1","purpur-icon--xxs":"_purpur-icon--xxs_8u1lq_4","purpur-icon--xs":"_purpur-icon--xs_8u1lq_8","purpur-icon--sm":"_purpur-icon--sm_8u1lq_12","purpur-icon--md":"_purpur-icon--md_8u1lq_16","purpur-icon--lg":"_purpur-icon--lg_8u1lq_20","purpur-icon--xl":"_purpur-icon--xl_8u1lq_24"},be={name:"check-circle-filled",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm4.712-12.491a.875.875 0 1 0-1.424-1.018l-4.4 6.16-2.27-2.27a.875.875 0 0 0-1.237 1.238l3 3a.875.875 0 0 0 1.331-.11l5-7Z" clip-rule="evenodd"/></svg>',keywords:["check-circle-filled"],category:"status"},$e=ye.bind(he),L="purpur-icon",we="md",Se=t=>t.filter(i=>Object.keys(i).length>=1).map(i=>`${i.name}="${i.value}"`).join(" "),je=({content:t="",title:i}={})=>{const n=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},{name:"viewBox",value:"0 0 24 24"},i?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],a=i?`<title>${i}</title>`:"";return`<svg ${Se(n)}>${a}${t}</svg>`},Oe=t=>t.replace(/<(\/?)svg([^>]*)>/g,"").trim(),Ne=({["data-testid"]:t,svg:i,allyTitle:n,className:a="",size:l=we,...e})=>{const r=je({content:Oe(i.svg),title:n}),u=$e(a,L,`${L}--${l}`);return _("span",{"aria-label":n,className:u,"data-testid":t,dangerouslySetInnerHTML:{__html:r},...e})};function j(){return j=Object.assign?Object.assign.bind():function(t){for(var i=1;i<arguments.length;i++){var n=arguments[i];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}return t},j.apply(this,arguments)}function y(){return y=Object.assign?Object.assign.bind():function(t){for(var i=1;i<arguments.length;i++){var n=arguments[i];for(var a in n)Object.prototype.hasOwnProperty.call(n,a)&&(t[a]=n[a])}return t},y.apply(this,arguments)}function Ee(t,i){typeof t=="function"?t(i):t!=null&&(t.current=i)}function Ae(...t){return i=>t.forEach(n=>Ee(n,i))}const k=m((t,i)=>{const{children:n,...a}=t,l=v.toArray(n),e=l.find(qe);if(e){const r=e.props.children,u=l.map(w=>w===e?v.count(r)>1?v.only(null):x(r)?r.props.children:null:w);return g(O,y({},a,{ref:i}),x(r)?S(r,void 0,u):null)}return g(O,y({},a,{ref:i}),n)});k.displayName="Slot";const O=m((t,i)=>{const{children:n,...a}=t;return x(n)?S(n,{...Ce(a,n.props),ref:i?Ae(i,n.ref):n.ref}):v.count(n)>1?v.only(null):null});O.displayName="SlotClone";const Me=({children:t})=>g(C,null,t);function qe(t){return x(t)&&t.type===Me}function Ce(t,i){const n={...i};for(const a in i){const l=t[a],e=i[a];/^on[A-Z]/.test(a)?l&&e?n[a]=(...r)=>{e(...r),l(...r)}:l&&(n[a]=l):a==="style"?n[a]={...l,...e}:a==="className"&&(n[a]=[l,e].filter(Boolean).join(" "))}return{...t,...n}}const Pe=["a","button","div","form","h2","h3","img","input","label","li","nav","ol","p","span","svg","ul"],Fe=Pe.reduce((t,i)=>{const n=m((a,l)=>{const{asChild:e,...r}=a,u=e?k:i;return q(()=>{window[Symbol.for("radix-ui")]=!0},[]),g(u,y({},r,{ref:l}))});return n.displayName=`Primitive.${i}`,{...t,[i]:n}},{}),De=m((t,i)=>g(Fe.label,j({},t,{ref:i,onMouseDown:n=>{var a;(a=t.onMouseDown)===null||a===void 0||a.call(t,n),!n.defaultPrevented&&n.detail>1&&n.preventDefault()}}))),Ie=De;function Be(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var G={exports:{}};/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var i={}.hasOwnProperty;function n(){for(var e="",r=0;r<arguments.length;r++){var u=arguments[r];u&&(e=l(e,a(u)))}return e}function a(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return"";if(Array.isArray(e))return n.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var r="";for(var u in e)i.call(e,u)&&e[u]&&(r=l(r,u));return r}function l(e,r){return r?e?e+" "+r:e+r:e}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(G);var Re=G.exports;const Ve=Be(Re),H={"purpur-label":"_purpur-label_1jub8_1","purpur-label--disabled":"_purpur-label--disabled_1jub8_9"},X="purpur-label",Te=({children:t,className:i,htmlFor:n,"data-testid":a,disabled:l,...e})=>{const r=Ve([i,H[X],{[H[`${X}--disabled`]]:l}]);return _(Ie,{className:r,"data-testid":a,htmlFor:n,...e,children:t})};function Ze(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var Y={exports:{}};/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var i={}.hasOwnProperty;function n(){for(var e="",r=0;r<arguments.length;r++){var u=arguments[r];u&&(e=l(e,a(u)))}return e}function a(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return"";if(Array.isArray(e))return n.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var r="";for(var u in e)i.call(e,u)&&e[u]&&(r=l(r,u));return r}function l(e,r){return r?e?e+" "+r:e+r:e}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(Y);var ze=Y.exports;const J=Ze(ze),Le="_rotate_7s2g1_1",ke="_dash_7s2g1_1",b={"purpur-spinner":"_purpur-spinner_7s2g1_1",rotate:Le,"purpur-spinner--xxs":"_purpur-spinner--xxs_7s2g1_4","purpur-spinner--xs":"_purpur-spinner--xs_7s2g1_8","purpur-spinner--sm":"_purpur-spinner--sm_7s2g1_12","purpur-spinner--md":"_purpur-spinner--md_7s2g1_16","purpur-spinner--lg":"_purpur-spinner--lg_7s2g1_20","purpur-spinner__circle":"_purpur-spinner__circle_7s2g1_24",dash:ke,"purpur-spinner__circle--disabled":"_purpur-spinner__circle--disabled_7s2g1_33","purpur-spinner__circle--negative":"_purpur-spinner__circle--negative_7s2g1_36","purpur-spinner__circle--negative-disabled":"_purpur-spinner__circle--negative-disabled_7s2g1_39"},$="purpur-spinner",Ge={PRIMARY:"primary",DISABLED:"disabled",NEGATIVE:"negative",NEGATIVE_DISABLED:"negative-disabled"},He={XXS:"xxs",XS:"xs",SM:"sm",MD:"md",LG:"lg"},Xe=({["data-testid"]:t,size:i=He.SM,variant:n=Ge.PRIMARY,...a})=>_("div",{className:J([b[$],b[`${$}--${i}`]]),"data-testid":t,...a,children:_("svg",{viewBox:"0 0 50 50",children:_("circle",{className:J(b[`${$}__circle`],b[`${$}__circle--${n}`]),cx:"25",cy:"25",r:"20"})})});function Ye(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var K={exports:{}};/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/(function(t){(function(){var i={}.hasOwnProperty;function n(){for(var e="",r=0;r<arguments.length;r++){var u=arguments[r];u&&(e=l(e,a(u)))}return e}function a(e){if(typeof e=="string"||typeof e=="number")return e;if(typeof e!="object")return"";if(Array.isArray(e))return n.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var r="";for(var u in e)i.call(e,u)&&e[u]&&(r=l(r,u));return r}function l(e,r){return r?e?e+" "+r:e+r:e}t.exports?(n.default=n,t.exports=n):window.classNames=n})()})(K);var Je=K.exports;const N=Ye(Je),s={"purpur-text-field":"_purpur-text-field_182p7_1","purpur-text-field__label":"_purpur-text-field__label_182p7_7","purpur-text-field__label-text":"_purpur-text-field__label-text_182p7_13","purpur-text-field__field-row":"_purpur-text-field__field-row_182p7_16","purpur-text-field__frame":"_purpur-text-field__frame_182p7_20","purpur-text-field__input-container":"_purpur-text-field__input-container_182p7_27","purpur-text-field__input-container--disabled":"_purpur-text-field__input-container--disabled_182p7_35","purpur-text-field__input-container--readonly":"_purpur-text-field__input-container--readonly_182p7_38","purpur-text-field__input-container--end-adornment":"_purpur-text-field__input-container--end-adornment_182p7_41","purpur-text-field__input":"_purpur-text-field__input_182p7_27","purpur-text-field__input-container--start-adornment":"_purpur-text-field__input-container--start-adornment_182p7_47","purpur-text-field__input--valid":"_purpur-text-field__input--valid_182p7_88","purpur-text-field__input--error":"_purpur-text-field__input--error_182p7_88","purpur-text-field__adornment-container":"_purpur-text-field__adornment-container_182p7_97","purpur-text-field__valid-icon":"_purpur-text-field__valid-icon_182p7_102"},o="purpur-text-field",Ke=U("TextField",m(({["data-testid"]:t,className:i,afterField:n,endAdornment:a,errorText:l,helperText:e,label:r,loading:u=!1,startAdornment:w,valid:Qe=!1,...d},Ue)=>{const f=h=>t?`${t}-${h}`:void 0,Q=Qe&&!l,E=e?`${d.id}-helper-text`:void 0,A=[w].filter(h=>!!h),M=[u&&p.createElement(Xe,{variant:d.disabled?"disabled":"primary",size:"xs","data-testid":f("spinner")}),Q&&p.createElement(Ne,{"data-testid":f("valid-icon"),className:s[`${o}__valid-icon`],svg:be,size:"md"}),a].filter(h=>!!h),We=N([s[`${o}__input-container`],{[s[`${o}__input-container--start-adornment`]]:A.length,[s[`${o}__input-container--end-adornment`]]:M.length,[s[`${o}__input-container--disabled`]]:d.disabled,[s[`${o}__input-container--readonly`]]:d.readOnly&&!d.disabled}]);return p.createElement("div",{className:N(i,s[o])},r&&p.createElement(Te,{htmlFor:d.id,className:s[`${o}__label`],"data-testid":f("label"),disabled:d.disabled},`${d.required?"* ":""}${r}`),p.createElement("div",{className:s[`${o}__field-row`]},p.createElement("div",{className:We},!!A.length&&p.createElement("div",{"data-testid":f("start-adornments"),className:s[`${o}__adornment-container`]},A),p.createElement("input",{...d,ref:Ue,"data-testid":f("input"),"aria-describedby":d["aria-describedby"]||E,"aria-invalid":d["aria-invalid"]||!!l,className:N([s[`${o}__input`],{[s[`${o}__input--valid`]]:Q,[s[`${o}__input--error`]]:!!l}])}),p.createElement("div",{className:s[`${o}__frame`]}),!!M.length&&p.createElement("div",{"data-testid":f("end-adornments"),className:s[`${o}__adornment-container`]},M)),!!n&&n),E&&p.createElement(ve,{"data-testid":f("helper-text"),id:E},e),l&&p.createElement(de,{"data-testid":f("error-text")},l))}));Ke.displayName="TextField"}}});
-//# sourceMappingURL=text-field.system.js.map