npm - @transferwise/components - Versions diffs - 46.62.0 → 46.63.0 - Mend

@transferwise/components 46.62.0 → 46.63.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/build/checkbox/Checkbox.js +1 -1
package/build/checkbox/Checkbox.js.map +1 -1
package/build/checkbox/Checkbox.mjs +1 -1
package/build/checkbox/Checkbox.mjs.map +1 -1
package/build/dateInput/DateInput.js +3 -0
package/build/dateInput/DateInput.js.map +1 -1
package/build/dateInput/DateInput.mjs +3 -0
package/build/dateInput/DateInput.mjs.map +1 -1
package/build/radio/Radio.js +2 -9
package/build/radio/Radio.js.map +1 -1
package/build/radio/Radio.mjs +2 -9
package/build/radio/Radio.mjs.map +1 -1
package/build/types/dateInput/DateInput.d.ts.map +1 -1
package/build/types/radio/Radio.d.ts.map +1 -1
package/package.json +4 -4
package/src/checkbox/Checkbox.tsx +1 -1
package/src/checkboxButton/CheckboxButton.story.tsx +18 -21
package/src/dateInput/DateInput.tsx +3 -0
package/src/radio/Radio.tsx +3 -9
package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap +1 -1
package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx +8 -3

package/build/checkbox/Checkbox.js CHANGED Viewed

@@ -22,7 +22,7 @@ function Checkbox({
   const classList = clsx.clsx('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
-    disabled
+    'checkbox-disabled': disabled
   }, className);
   const innerDisabled = disabled || readOnly;
   return /*#__PURE__*/jsxRuntime.jsx("div", {

package/build/checkbox/Checkbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n disabled,\n },\n className,\n );\n\n const innerDisabled = disabled \|\| readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;~~AACxBJ~~,~~IAAAA~~,QAAAA;~~GACD~~,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,eAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,SAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,cAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,eAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
1	+ {"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled \|\| readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ,QAAAA;GACtB,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,eAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,SAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,cAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,eAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/checkbox/Checkbox.mjs CHANGED Viewed

@@ -20,7 +20,7 @@ function Checkbox({
   const classList = clsx('np-checkbox', {
     checkbox: true,
     'checkbox-lg': secondary,
-    disabled
+    'checkbox-disabled': disabled
   }, className);
   const innerDisabled = disabled || readOnly;
   return /*#__PURE__*/jsx("div", {

package/build/checkbox/Checkbox.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n disabled,\n },\n className,\n );\n\n const innerDisabled = disabled \|\| readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,IAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;~~AACxBJ~~,~~IAAAA~~,QAAAA;~~GACD~~,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,GAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,IAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,IAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,GAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,IAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,GAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,GAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
1	+ {"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled \|\| readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,IAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ,QAAAA;GACtB,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,GAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,IAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,IAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,GAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,IAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,GAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,GAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/dateInput/DateInput.js CHANGED Viewed

@@ -110,6 +110,7 @@ const DateInput = ({
         type: typography.Typography.BODY_DEFAULT,
         children: monthLabel
       }), /*#__PURE__*/jsxRuntime.jsx(SelectInput.SelectInput, {
+        id: `${id}:month`,
         name: "month",
         disabled: disabled,
         placeholder: placeholders?.month,
@@ -214,6 +215,7 @@ const DateInput = ({
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: `input-group input-group-${size$1}`,
           children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+            id: `${id}:day`,
             type: "text",
             inputMode: "numeric",
             pattern: "[0-9]*",
@@ -241,6 +243,7 @@ const DateInput = ({
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: `input-group input-group-${size$1}`,
           children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+            id: `${id}:year`,
             type: "text",
             inputMode: "numeric",
             pattern: "[0-9]*",

package/build/dateInput/DateInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateInput.js","sources":["../../src/dateInput/DateInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';\nimport {\n DateMode,\n MonthFormat,\n Size,\n SizeLarge,\n SizeMedium,\n SizeSmall,\n Typography,\n} from '../common';\nimport { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './DateInput.messages';\nimport { convertToLocalMidnight } from './utils';\n\nexport interface DateInputProps {\n /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. /\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n disabled?: boolean;\n size?: SizeSmall \| SizeMedium \| SizeLarge;\n value?: Date \| string;\n onChange: (value: string \| null) => void;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n dayLabel?: string;\n dayAutoComplete?: string;\n monthLabel?: string;\n yearLabel?: string;\n yearAutoComplete?: string;\n monthFormat?: `${MonthFormat}`;\n mode?: `${DateMode}`;\n placeholders?: {\n day?: string;\n month?: string;\n year?: string;\n };\n id?: string;\n selectProps?: Partial<SelectInputProps<number \| null>>;\n}\n\nconst DateInput = ({\n 'aria-labelledby': ariaLabelledByProp,\n 'aria-label': ariaLabel,\n disabled = false,\n size = Size.MEDIUM,\n value,\n dayLabel,\n dayAutoComplete,\n monthLabel,\n yearLabel,\n yearAutoComplete,\n monthFormat = MonthFormat.LONG,\n mode = DateMode.DAY_MONTH_YEAR,\n onChange,\n onFocus,\n onBlur,\n placeholders,\n id: idProp,\n selectProps = {},\n}: DateInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const getDateObject = (): Date \| undefined => {\n if (value && isDateValid(value)) {\n return typeof value === 'string' ? convertToLocalMidnight(value) : value;\n }\n return undefined;\n };\n\n const getInitialDate = (unit: 'year' \| 'month' \| 'day'): number \| null => {\n if (value && isDateValid(value)) {\n const dateObject = getDateObject();\n\n if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {\n return null;\n }\n\n if (dateObject !== undefined) {\n switch (unit) {\n case 'year':\n return dateObject.getFullYear();\n case 'month':\n return dateObject.getMonth();\n case 'day':\n return dateObject.getDate();\n default:\n return null;\n }\n }\n }\n return null;\n };\n\n const [day, setDay] = useState(() => getInitialDate('day'));\n const [displayDay, setDisplayDay] = useState(day?.toString());\n const [month, setMonth] = useState(() => getInitialDate('month'));\n const [year, setYear] = useState(() => getInitialDate('year'));\n const [displayYear, setDisplayYear] = useState(year?.toString());\n const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date \| null \| undefined>(\n getDateObject,\n );\n const monthNames = getMonthNames(locale, monthFormat);\n\n dayLabel \|\|= formatMessage(messages.dayLabel);\n monthLabel \|\|= formatMessage(messages.monthLabel);\n yearLabel \|\|= formatMessage(messages.yearLabel);\n placeholders = {\n day: placeholders?.day \|\| formatMessage(messages.dayPlaceholder),\n month: placeholders?.month \|\| formatMessage(messages.monthLabel),\n year: placeholders?.year \|\| formatMessage(messages.yearPlaceholder),\n };\n\n const getDateAsString = (date: Date) => {\n if (!isDateValid(date)) {\n return '';\n }\n switch (mode) {\n case DateMode.MONTH_YEAR:\n return [date.getFullYear(), `0${date.getMonth() + 1}`.slice(-2)].join('-');\n case DateMode.DAY_MONTH_YEAR:\n default:\n return [\n date.getFullYear(),\n `0${date.getMonth() + 1}`.slice(-2),\n `0${date.getDate()}`.slice(-2),\n ].join('-');\n }\n };\n\n const getSelectElement = () => {\n return (\n <label className=\"d-flex flex-column\">\n <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>\n <SelectInput\n name=\"month\"\n disabled={disabled}\n placeholder={placeholders?.month}\n items={Array.from({ length: 12 }, (_, index) => ({ type: 'option', value: index }))}\n size={size}\n value={month}\n renderValue={(selectedValue) => (\n <SelectInputOptionContent title={monthNames[selectedValue]} />\n )}\n onChange={(selectedValue) => handleMonthChange(selectedValue)}\n {...selectProps}\n />\n </label>\n );\n };\n\n const isDayValid = (newDay: number, newMonth: number, newYear: number) => {\n const maxDay = new Date(newYear, newMonth + 1, 0).getDate();\n return newDay <= maxDay;\n };\n\n const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {\n if (newDay == null \|\| newDay === 0 \|\| newMonth == null \|\| newYear == null \|\| newYear === 0) {\n broadcastNewValue(null);\n return;\n }\n if (!isDayValid(newDay, newMonth, newYear)) {\n broadcastNewValue(null);\n return;\n }\n\n const dateValue = new Date(newYear, newMonth, newDay);\n if (newYear < 100) {\n dateValue.setFullYear(newYear);\n }\n\n if (!isDateValid(dateValue)) {\n broadcastNewValue(null);\n return;\n }\n\n if (mode === DateMode.MONTH_YEAR) {\n if (newMonth !== month \|\| newYear !== year) {\n broadcastNewValue(dateValue);\n }\n } else if (newDay !== day \|\| newMonth !== month \|\| newYear !== year) {\n broadcastNewValue(dateValue);\n }\n };\n\n const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDayString = event.target.value.replace(/\\D/g, '');\n const newDayNumber = Number.parseInt(newDayString, 10);\n\n setDay(newDayNumber);\n setDisplayDay(newDayString);\n handleInternalValue(newDayNumber, month, year);\n };\n\n const handleMonthChange = (selectedMonth: number \| null) => {\n if (selectedMonth === null) {\n setMonth(null);\n handleInternalValue(day, null, year);\n return;\n }\n setMonth(selectedMonth);\n handleInternalValue(day, selectedMonth, year);\n };\n\n const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newYearString = event.target.value.replace(/\\D/g, '');\n const newYearNumber = Number.parseInt(newYearString, 10);\n\n if (newYearString.length >= 4 && newYearString.length <= 6) {\n setYear(newYearNumber);\n setDisplayYear(newYearString);\n handleInternalValue(day, month, newYearNumber);\n } else {\n setYear(null);\n setDisplayYear(newYearString);\n handleInternalValue(day, month, null);\n }\n };\n\n const broadcastNewValue = (newValue: Date \| null) => {\n if (newValue !== lastBroadcastedValue) {\n setLastBroadcastedValue(newValue);\n onChange(newValue != null ? getDateAsString(newValue) : null);\n }\n };\n\n const monthYearOnly = mode === DateMode.MONTH_YEAR;\n\n const monthWidth = clsx({\n 'col-sm-8': monthYearOnly,\n 'col-sm-5': !monthYearOnly,\n });\n\n const getMonth = () => {\n return <div className={monthWidth}>{getSelectElement()}</div>;\n };\n\n const getDay = () => {\n return (\n <div className=\"col-sm-3\">\n <label>\n <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>\n <div className={`input-group input-group-${size}`}>\n <Input\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]\"\n name=\"day\"\n autoComplete={dayAutoComplete}\n value={displayDay \|\| ''}\n placeholder={placeholders?.day}\n disabled={disabled}\n min={1}\n max={31}\n maxLength={2}\n onChange={(event) => handleDayChange(event)}\n />\n </div>\n </label>\n </div>\n );\n };\n\n const getYear = () => {\n return (\n <div className=\"col-sm-4\">\n <label>\n <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>\n <div className={`input-group input-group-${size}`}>\n <Input\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n name=\"year\"\n autoComplete={yearAutoComplete}\n placeholder={placeholders?.year}\n value={displayYear \|\| ''}\n disabled={disabled}\n min={0}\n max={9999}\n maxLength={6}\n onChange={(event) => handleYearChange(event)}\n />\n </div>\n </label>\n </div>\n );\n };\n const monthBeforeDay = MDY.has(locale);\n const yearFirst = YMD.has(locale);\n\n return (\n <div\n className=\"tw-date\"\n {...inputAttributes}\n id={id}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n role=\"group\" // Add role attribute to indicate container for interactive elements\n onFocus={(event) =>\n shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()\n }\n onBlur={(event) =>\n shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()\n }\n >\n <div className=\"row\">\n {(() => {\n if (monthYearOnly) {\n return (\n <>\n {!yearFirst && getMonth()}\n {getYear()}\n {yearFirst && getMonth()}\n </>\n );\n }\n if (monthBeforeDay) {\n return (\n <>\n {getMonth()}\n {getDay()}\n {getYear()}\n </>\n );\n }\n if (yearFirst) {\n return (\n <>\n {getYear()}\n {getMonth()}\n {getDay()}\n </>\n );\n }\n return (\n <>\n {getDay()}\n {getMonth()}\n {getYear()}\n </>\n );\n })()}\n </div>\n </div>\n );\n};\n\n// Should only propagate if the relatedTarget is not part of this DateInput component.\nfunction shouldPropagateOnFocus({\n target,\n relatedTarget,\n}: Pick<React.FocusEvent, 'target' \| 'relatedTarget'>) {\n const targetParent = target.closest('.tw-date');\n const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');\n return targetParent !== relatedParent;\n}\n\n// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.\nfunction shouldPropagateOnBlur({\n target,\n relatedTarget,\n}: Pick<React.FocusEvent, 'target' \| 'relatedTarget'>) {\n const blurElementParent = target.closest('.tw-date');\n // Even though FocusEvent.relatedTarget is supported by IE\n // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)\n // \"IE11 sets document.activeElement to the next focused element before the blur event is called.\"\n // (https://stackoverflow.com/a/49325196/986241)\n // Therefore if the relatedTarget is null, we try the document.activeElement,\n // which may contain the HTML element that is gaining focus\n const focusElement =\n relatedTarget \|\| (document.activeElement !== target ? document.activeElement : null);\n const focusElementParent = focusElement && focusElement.closest('.tw-date');\n return blurElementParent !== focusElementParent;\n}\n\nexport default DateInput;\n"],"names":["DateInput","ariaLabelledByProp","ariaLabel","disabled","size","Size","MEDIUM","value","dayLabel","dayAutoComplete","monthLabel","yearLabel","yearAutoComplete","monthFormat","MonthFormat","LONG","mode","DateMode","DAY_MONTH_YEAR","onChange","onFocus","onBlur","placeholders","id","idProp","selectProps","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","getDateObject","isDateValid","convertToLocalMidnight","undefined","getInitialDate","unit","dateObject","isMonthAndYearFormat","getFullYear","getMonth","getDate","day","setDay","useState","displayDay","setDisplayDay","toString","month","setMonth","year","setYear","displayYear","setDisplayYear","lastBroadcastedValue","setLastBroadcastedValue","monthNames","getMonthNames","messages","dayPlaceholder","yearPlaceholder","getDateAsString","date","MONTH_YEAR","slice","join","getSelectElement","_jsxs","className","children","_jsx","Body","type","Typography","BODY_DEFAULT","SelectInput","name","placeholder","items","Array","from","length","_","index","renderValue","selectedValue","SelectInputOptionContent","title","handleMonthChange","isDayValid","newDay","newMonth","newYear","maxDay","Date","handleInternalValue","broadcastNewValue","dateValue","setFullYear","handleDayChange","event","newDayString","target","replace","newDayNumber","Number","parseInt","selectedMonth","handleYearChange","newYearString","newYearNumber","newValue","monthYearOnly","monthWidth","clsx","getDay","Input","inputMode","pattern","autoComplete","min","max","maxLength","getYear","monthBeforeDay","MDY","has","yearFirst","YMD","role","shouldPropagateOnFocus","stopPropagation","shouldPropagateOnBlur","_Fragment","relatedTarget","targetParent","closest","relatedParent","blurElementParent","focusElement","document","activeElement","focusElementParent"],"mappings":"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"}
1	+ {"version":3,"file":"DateInput.js","sources":["../../src/dateInput/DateInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';\nimport {\n DateMode,\n MonthFormat,\n Size,\n SizeLarge,\n SizeMedium,\n SizeSmall,\n Typography,\n} from '../common';\nimport { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './DateInput.messages';\nimport { convertToLocalMidnight } from './utils';\n\nexport interface DateInputProps {\n /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. /\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n disabled?: boolean;\n size?: SizeSmall \| SizeMedium \| SizeLarge;\n value?: Date \| string;\n onChange: (value: string \| null) => void;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n dayLabel?: string;\n dayAutoComplete?: string;\n monthLabel?: string;\n yearLabel?: string;\n yearAutoComplete?: string;\n monthFormat?: `${MonthFormat}`;\n mode?: `${DateMode}`;\n placeholders?: {\n day?: string;\n month?: string;\n year?: string;\n };\n id?: string;\n selectProps?: Partial<SelectInputProps<number \| null>>;\n}\n\nconst DateInput = ({\n 'aria-labelledby': ariaLabelledByProp,\n 'aria-label': ariaLabel,\n disabled = false,\n size = Size.MEDIUM,\n value,\n dayLabel,\n dayAutoComplete,\n monthLabel,\n yearLabel,\n yearAutoComplete,\n monthFormat = MonthFormat.LONG,\n mode = DateMode.DAY_MONTH_YEAR,\n onChange,\n onFocus,\n onBlur,\n placeholders,\n id: idProp,\n selectProps = {},\n}: DateInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const getDateObject = (): Date \| undefined => {\n if (value && isDateValid(value)) {\n return typeof value === 'string' ? convertToLocalMidnight(value) : value;\n }\n return undefined;\n };\n\n const getInitialDate = (unit: 'year' \| 'month' \| 'day'): number \| null => {\n if (value && isDateValid(value)) {\n const dateObject = getDateObject();\n\n if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {\n return null;\n }\n\n if (dateObject !== undefined) {\n switch (unit) {\n case 'year':\n return dateObject.getFullYear();\n case 'month':\n return dateObject.getMonth();\n case 'day':\n return dateObject.getDate();\n default:\n return null;\n }\n }\n }\n return null;\n };\n\n const [day, setDay] = useState(() => getInitialDate('day'));\n const [displayDay, setDisplayDay] = useState(day?.toString());\n const [month, setMonth] = useState(() => getInitialDate('month'));\n const [year, setYear] = useState(() => getInitialDate('year'));\n const [displayYear, setDisplayYear] = useState(year?.toString());\n const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date \| null \| undefined>(\n getDateObject,\n );\n const monthNames = getMonthNames(locale, monthFormat);\n\n dayLabel \|\|= formatMessage(messages.dayLabel);\n monthLabel \|\|= formatMessage(messages.monthLabel);\n yearLabel \|\|= formatMessage(messages.yearLabel);\n placeholders = {\n day: placeholders?.day \|\| formatMessage(messages.dayPlaceholder),\n month: placeholders?.month \|\| formatMessage(messages.monthLabel),\n year: placeholders?.year \|\| formatMessage(messages.yearPlaceholder),\n };\n\n const getDateAsString = (date: Date) => {\n if (!isDateValid(date)) {\n return '';\n }\n switch (mode) {\n case DateMode.MONTH_YEAR:\n return [date.getFullYear(), `0${date.getMonth() + 1}`.slice(-2)].join('-');\n case DateMode.DAY_MONTH_YEAR:\n default:\n return [\n date.getFullYear(),\n `0${date.getMonth() + 1}`.slice(-2),\n `0${date.getDate()}`.slice(-2),\n ].join('-');\n }\n };\n\n const getSelectElement = () => {\n return (\n <label className=\"d-flex flex-column\">\n <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>\n <SelectInput\n id={`${id}:month`}\n name=\"month\"\n disabled={disabled}\n placeholder={placeholders?.month}\n items={Array.from({ length: 12 }, (_, index) => ({ type: 'option', value: index }))}\n size={size}\n value={month}\n renderValue={(selectedValue) => (\n <SelectInputOptionContent title={monthNames[selectedValue]} />\n )}\n onChange={(selectedValue) => handleMonthChange(selectedValue)}\n {...selectProps}\n />\n </label>\n );\n };\n\n const isDayValid = (newDay: number, newMonth: number, newYear: number) => {\n const maxDay = new Date(newYear, newMonth + 1, 0).getDate();\n return newDay <= maxDay;\n };\n\n const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {\n if (newDay == null \|\| newDay === 0 \|\| newMonth == null \|\| newYear == null \|\| newYear === 0) {\n broadcastNewValue(null);\n return;\n }\n if (!isDayValid(newDay, newMonth, newYear)) {\n broadcastNewValue(null);\n return;\n }\n\n const dateValue = new Date(newYear, newMonth, newDay);\n if (newYear < 100) {\n dateValue.setFullYear(newYear);\n }\n\n if (!isDateValid(dateValue)) {\n broadcastNewValue(null);\n return;\n }\n\n if (mode === DateMode.MONTH_YEAR) {\n if (newMonth !== month \|\| newYear !== year) {\n broadcastNewValue(dateValue);\n }\n } else if (newDay !== day \|\| newMonth !== month \|\| newYear !== year) {\n broadcastNewValue(dateValue);\n }\n };\n\n const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDayString = event.target.value.replace(/\\D/g, '');\n const newDayNumber = Number.parseInt(newDayString, 10);\n\n setDay(newDayNumber);\n setDisplayDay(newDayString);\n handleInternalValue(newDayNumber, month, year);\n };\n\n const handleMonthChange = (selectedMonth: number \| null) => {\n if (selectedMonth === null) {\n setMonth(null);\n handleInternalValue(day, null, year);\n return;\n }\n setMonth(selectedMonth);\n handleInternalValue(day, selectedMonth, year);\n };\n\n const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newYearString = event.target.value.replace(/\\D/g, '');\n const newYearNumber = Number.parseInt(newYearString, 10);\n\n if (newYearString.length >= 4 && newYearString.length <= 6) {\n setYear(newYearNumber);\n setDisplayYear(newYearString);\n handleInternalValue(day, month, newYearNumber);\n } else {\n setYear(null);\n setDisplayYear(newYearString);\n handleInternalValue(day, month, null);\n }\n };\n\n const broadcastNewValue = (newValue: Date \| null) => {\n if (newValue !== lastBroadcastedValue) {\n setLastBroadcastedValue(newValue);\n onChange(newValue != null ? getDateAsString(newValue) : null);\n }\n };\n\n const monthYearOnly = mode === DateMode.MONTH_YEAR;\n\n const monthWidth = clsx({\n 'col-sm-8': monthYearOnly,\n 'col-sm-5': !monthYearOnly,\n });\n\n const getMonth = () => {\n return <div className={monthWidth}>{getSelectElement()}</div>;\n };\n\n const getDay = () => {\n return (\n <div className=\"col-sm-3\">\n <label>\n <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>\n <div className={`input-group input-group-${size}`}>\n <Input\n id={`${id}:day`}\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]\"\n name=\"day\"\n autoComplete={dayAutoComplete}\n value={displayDay \|\| ''}\n placeholder={placeholders?.day}\n disabled={disabled}\n min={1}\n max={31}\n maxLength={2}\n onChange={(event) => handleDayChange(event)}\n />\n </div>\n </label>\n </div>\n );\n };\n\n const getYear = () => {\n return (\n <div className=\"col-sm-4\">\n <label>\n <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>\n <div className={`input-group input-group-${size}`}>\n <Input\n id={`${id}:year`}\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n name=\"year\"\n autoComplete={yearAutoComplete}\n placeholder={placeholders?.year}\n value={displayYear \|\| ''}\n disabled={disabled}\n min={0}\n max={9999}\n maxLength={6}\n onChange={(event) => handleYearChange(event)}\n />\n </div>\n </label>\n </div>\n );\n };\n const monthBeforeDay = MDY.has(locale);\n const yearFirst = YMD.has(locale);\n\n return (\n <div\n className=\"tw-date\"\n {...inputAttributes}\n id={id}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n role=\"group\" // Add role attribute to indicate container for interactive elements\n onFocus={(event) =>\n shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()\n }\n onBlur={(event) =>\n shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()\n }\n >\n <div className=\"row\">\n {(() => {\n if (monthYearOnly) {\n return (\n <>\n {!yearFirst && getMonth()}\n {getYear()}\n {yearFirst && getMonth()}\n </>\n );\n }\n if (monthBeforeDay) {\n return (\n <>\n {getMonth()}\n {getDay()}\n {getYear()}\n </>\n );\n }\n if (yearFirst) {\n return (\n <>\n {getYear()}\n {getMonth()}\n {getDay()}\n </>\n );\n }\n return (\n <>\n {getDay()}\n {getMonth()}\n {getYear()}\n </>\n );\n })()}\n </div>\n </div>\n );\n};\n\n// Should only propagate if the relatedTarget is not part of this DateInput component.\nfunction shouldPropagateOnFocus({\n target,\n relatedTarget,\n}: Pick<React.FocusEvent, 'target' \| 'relatedTarget'>) {\n const targetParent = target.closest('.tw-date');\n const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');\n return targetParent !== relatedParent;\n}\n\n// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.\nfunction shouldPropagateOnBlur({\n target,\n relatedTarget,\n}: Pick<React.FocusEvent, 'target' \| 'relatedTarget'>) {\n const blurElementParent = target.closest('.tw-date');\n // Even though FocusEvent.relatedTarget is supported by IE\n // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)\n // \"IE11 sets document.activeElement to the next focused element before the blur event is called.\"\n // (https://stackoverflow.com/a/49325196/986241)\n // Therefore if the relatedTarget is null, we try the document.activeElement,\n // which may contain the HTML element that is gaining focus\n const focusElement =\n relatedTarget \|\| (document.activeElement !== target ? document.activeElement : null);\n const focusElementParent = focusElement && focusElement.closest('.tw-date');\n return blurElementParent !== focusElementParent;\n}\n\nexport default DateInput;\n"],"names":["DateInput","ariaLabelledByProp","ariaLabel","disabled","size","Size","MEDIUM","value","dayLabel","dayAutoComplete","monthLabel","yearLabel","yearAutoComplete","monthFormat","MonthFormat","LONG","mode","DateMode","DAY_MONTH_YEAR","onChange","onFocus","onBlur","placeholders","id","idProp","selectProps","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","getDateObject","isDateValid","convertToLocalMidnight","undefined","getInitialDate","unit","dateObject","isMonthAndYearFormat","getFullYear","getMonth","getDate","day","setDay","useState","displayDay","setDisplayDay","toString","month","setMonth","year","setYear","displayYear","setDisplayYear","lastBroadcastedValue","setLastBroadcastedValue","monthNames","getMonthNames","messages","dayPlaceholder","yearPlaceholder","getDateAsString","date","MONTH_YEAR","slice","join","getSelectElement","_jsxs","className","children","_jsx","Body","type","Typography","BODY_DEFAULT","SelectInput","name","placeholder","items","Array","from","length","_","index","renderValue","selectedValue","SelectInputOptionContent","title","handleMonthChange","isDayValid","newDay","newMonth","newYear","maxDay","Date","handleInternalValue","broadcastNewValue","dateValue","setFullYear","handleDayChange","event","newDayString","target","replace","newDayNumber","Number","parseInt","selectedMonth","handleYearChange","newYearString","newYearNumber","newValue","monthYearOnly","monthWidth","clsx","getDay","Input","inputMode","pattern","autoComplete","min","max","maxLength","getYear","monthBeforeDay","MDY","has","yearFirst","YMD","role","shouldPropagateOnFocus","stopPropagation","shouldPropagateOnBlur","_Fragment","relatedTarget","targetParent","closest","relatedParent","blurElementParent","focusElement","document","activeElement","focusElementParent"],"mappings":"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"}

package/build/dateInput/DateInput.mjs CHANGED Viewed

@@ -108,6 +108,7 @@ const DateInput = ({
         type: Typography.BODY_DEFAULT,
         children: monthLabel
       }), /*#__PURE__*/jsx(SelectInput, {
+        id: `${id}:month`,
         name: "month",
         disabled: disabled,
         placeholder: placeholders?.month,
@@ -212,6 +213,7 @@ const DateInput = ({
         }), /*#__PURE__*/jsx("div", {
           className: `input-group input-group-${size}`,
           children: /*#__PURE__*/jsx(Input, {
+            id: `${id}:day`,
             type: "text",
             inputMode: "numeric",
             pattern: "[0-9]*",
@@ -239,6 +241,7 @@ const DateInput = ({
         }), /*#__PURE__*/jsx("div", {
           className: `input-group input-group-${size}`,
           children: /*#__PURE__*/jsx(Input, {
+            id: `${id}:year`,
             type: "text",
             inputMode: "numeric",
             pattern: "[0-9]*",

package/build/dateInput/DateInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateInput.mjs","sources":["../../src/dateInput/DateInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';\nimport {\n DateMode,\n MonthFormat,\n Size,\n SizeLarge,\n SizeMedium,\n SizeSmall,\n Typography,\n} from '../common';\nimport { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './DateInput.messages';\nimport { convertToLocalMidnight } from './utils';\n\nexport interface DateInputProps {\n /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. /\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n disabled?: boolean;\n size?: SizeSmall \| SizeMedium \| SizeLarge;\n value?: Date \| string;\n onChange: (value: string \| null) => void;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n dayLabel?: string;\n dayAutoComplete?: string;\n monthLabel?: string;\n yearLabel?: string;\n yearAutoComplete?: string;\n monthFormat?: `${MonthFormat}`;\n mode?: `${DateMode}`;\n placeholders?: {\n day?: string;\n month?: string;\n year?: string;\n };\n id?: string;\n selectProps?: Partial<SelectInputProps<number \| null>>;\n}\n\nconst DateInput = ({\n 'aria-labelledby': ariaLabelledByProp,\n 'aria-label': ariaLabel,\n disabled = false,\n size = Size.MEDIUM,\n value,\n dayLabel,\n dayAutoComplete,\n monthLabel,\n yearLabel,\n yearAutoComplete,\n monthFormat = MonthFormat.LONG,\n mode = DateMode.DAY_MONTH_YEAR,\n onChange,\n onFocus,\n onBlur,\n placeholders,\n id: idProp,\n selectProps = {},\n}: DateInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const getDateObject = (): Date \| undefined => {\n if (value && isDateValid(value)) {\n return typeof value === 'string' ? convertToLocalMidnight(value) : value;\n }\n return undefined;\n };\n\n const getInitialDate = (unit: 'year' \| 'month' \| 'day'): number \| null => {\n if (value && isDateValid(value)) {\n const dateObject = getDateObject();\n\n if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {\n return null;\n }\n\n if (dateObject !== undefined) {\n switch (unit) {\n case 'year':\n return dateObject.getFullYear();\n case 'month':\n return dateObject.getMonth();\n case 'day':\n return dateObject.getDate();\n default:\n return null;\n }\n }\n }\n return null;\n };\n\n const [day, setDay] = useState(() => getInitialDate('day'));\n const [displayDay, setDisplayDay] = useState(day?.toString());\n const [month, setMonth] = useState(() => getInitialDate('month'));\n const [year, setYear] = useState(() => getInitialDate('year'));\n const [displayYear, setDisplayYear] = useState(year?.toString());\n const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date \| null \| undefined>(\n getDateObject,\n );\n const monthNames = getMonthNames(locale, monthFormat);\n\n dayLabel \|\|= formatMessage(messages.dayLabel);\n monthLabel \|\|= formatMessage(messages.monthLabel);\n yearLabel \|\|= formatMessage(messages.yearLabel);\n placeholders = {\n day: placeholders?.day \|\| formatMessage(messages.dayPlaceholder),\n month: placeholders?.month \|\| formatMessage(messages.monthLabel),\n year: placeholders?.year \|\| formatMessage(messages.yearPlaceholder),\n };\n\n const getDateAsString = (date: Date) => {\n if (!isDateValid(date)) {\n return '';\n }\n switch (mode) {\n case DateMode.MONTH_YEAR:\n return [date.getFullYear(), `0${date.getMonth() + 1}`.slice(-2)].join('-');\n case DateMode.DAY_MONTH_YEAR:\n default:\n return [\n date.getFullYear(),\n `0${date.getMonth() + 1}`.slice(-2),\n `0${date.getDate()}`.slice(-2),\n ].join('-');\n }\n };\n\n const getSelectElement = () => {\n return (\n <label className=\"d-flex flex-column\">\n <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>\n <SelectInput\n name=\"month\"\n disabled={disabled}\n placeholder={placeholders?.month}\n items={Array.from({ length: 12 }, (_, index) => ({ type: 'option', value: index }))}\n size={size}\n value={month}\n renderValue={(selectedValue) => (\n <SelectInputOptionContent title={monthNames[selectedValue]} />\n )}\n onChange={(selectedValue) => handleMonthChange(selectedValue)}\n {...selectProps}\n />\n </label>\n );\n };\n\n const isDayValid = (newDay: number, newMonth: number, newYear: number) => {\n const maxDay = new Date(newYear, newMonth + 1, 0).getDate();\n return newDay <= maxDay;\n };\n\n const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {\n if (newDay == null \|\| newDay === 0 \|\| newMonth == null \|\| newYear == null \|\| newYear === 0) {\n broadcastNewValue(null);\n return;\n }\n if (!isDayValid(newDay, newMonth, newYear)) {\n broadcastNewValue(null);\n return;\n }\n\n const dateValue = new Date(newYear, newMonth, newDay);\n if (newYear < 100) {\n dateValue.setFullYear(newYear);\n }\n\n if (!isDateValid(dateValue)) {\n broadcastNewValue(null);\n return;\n }\n\n if (mode === DateMode.MONTH_YEAR) {\n if (newMonth !== month \|\| newYear !== year) {\n broadcastNewValue(dateValue);\n }\n } else if (newDay !== day \|\| newMonth !== month \|\| newYear !== year) {\n broadcastNewValue(dateValue);\n }\n };\n\n const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDayString = event.target.value.replace(/\\D/g, '');\n const newDayNumber = Number.parseInt(newDayString, 10);\n\n setDay(newDayNumber);\n setDisplayDay(newDayString);\n handleInternalValue(newDayNumber, month, year);\n };\n\n const handleMonthChange = (selectedMonth: number \| null) => {\n if (selectedMonth === null) {\n setMonth(null);\n handleInternalValue(day, null, year);\n return;\n }\n setMonth(selectedMonth);\n handleInternalValue(day, selectedMonth, year);\n };\n\n const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newYearString = event.target.value.replace(/\\D/g, '');\n const newYearNumber = Number.parseInt(newYearString, 10);\n\n if (newYearString.length >= 4 && newYearString.length <= 6) {\n setYear(newYearNumber);\n setDisplayYear(newYearString);\n handleInternalValue(day, month, newYearNumber);\n } else {\n setYear(null);\n setDisplayYear(newYearString);\n handleInternalValue(day, month, null);\n }\n };\n\n const broadcastNewValue = (newValue: Date \| null) => {\n if (newValue !== lastBroadcastedValue) {\n setLastBroadcastedValue(newValue);\n onChange(newValue != null ? getDateAsString(newValue) : null);\n }\n };\n\n const monthYearOnly = mode === DateMode.MONTH_YEAR;\n\n const monthWidth = clsx({\n 'col-sm-8': monthYearOnly,\n 'col-sm-5': !monthYearOnly,\n });\n\n const getMonth = () => {\n return <div className={monthWidth}>{getSelectElement()}</div>;\n };\n\n const getDay = () => {\n return (\n <div className=\"col-sm-3\">\n <label>\n <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>\n <div className={`input-group input-group-${size}`}>\n <Input\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]\"\n name=\"day\"\n autoComplete={dayAutoComplete}\n value={displayDay \|\| ''}\n placeholder={placeholders?.day}\n disabled={disabled}\n min={1}\n max={31}\n maxLength={2}\n onChange={(event) => handleDayChange(event)}\n />\n </div>\n </label>\n </div>\n );\n };\n\n const getYear = () => {\n return (\n <div className=\"col-sm-4\">\n <label>\n <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>\n <div className={`input-group input-group-${size}`}>\n <Input\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n name=\"year\"\n autoComplete={yearAutoComplete}\n placeholder={placeholders?.year}\n value={displayYear \|\| ''}\n disabled={disabled}\n min={0}\n max={9999}\n maxLength={6}\n onChange={(event) => handleYearChange(event)}\n />\n </div>\n </label>\n </div>\n );\n };\n const monthBeforeDay = MDY.has(locale);\n const yearFirst = YMD.has(locale);\n\n return (\n <div\n className=\"tw-date\"\n {...inputAttributes}\n id={id}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n role=\"group\" // Add role attribute to indicate container for interactive elements\n onFocus={(event) =>\n shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()\n }\n onBlur={(event) =>\n shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()\n }\n >\n <div className=\"row\">\n {(() => {\n if (monthYearOnly) {\n return (\n <>\n {!yearFirst && getMonth()}\n {getYear()}\n {yearFirst && getMonth()}\n </>\n );\n }\n if (monthBeforeDay) {\n return (\n <>\n {getMonth()}\n {getDay()}\n {getYear()}\n </>\n );\n }\n if (yearFirst) {\n return (\n <>\n {getYear()}\n {getMonth()}\n {getDay()}\n </>\n );\n }\n return (\n <>\n {getDay()}\n {getMonth()}\n {getYear()}\n </>\n );\n })()}\n </div>\n </div>\n );\n};\n\n// Should only propagate if the relatedTarget is not part of this DateInput component.\nfunction shouldPropagateOnFocus({\n target,\n relatedTarget,\n}: Pick<React.FocusEvent, 'target' \| 'relatedTarget'>) {\n const targetParent = target.closest('.tw-date');\n const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');\n return targetParent !== relatedParent;\n}\n\n// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.\nfunction shouldPropagateOnBlur({\n target,\n relatedTarget,\n}: Pick<React.FocusEvent, 'target' \| 'relatedTarget'>) {\n const blurElementParent = target.closest('.tw-date');\n // Even though FocusEvent.relatedTarget is supported by IE\n // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)\n // \"IE11 sets document.activeElement to the next focused element before the blur event is called.\"\n // (https://stackoverflow.com/a/49325196/986241)\n // Therefore if the relatedTarget is null, we try the document.activeElement,\n // which may contain the HTML element that is gaining focus\n const focusElement =\n relatedTarget \|\| (document.activeElement !== target ? document.activeElement : null);\n const focusElementParent = focusElement && focusElement.closest('.tw-date');\n return blurElementParent !== focusElementParent;\n}\n\nexport default DateInput;\n"],"names":["DateInput","ariaLabelledByProp","ariaLabel","disabled","size","Size","MEDIUM","value","dayLabel","dayAutoComplete","monthLabel","yearLabel","yearAutoComplete","monthFormat","MonthFormat","LONG","mode","DateMode","DAY_MONTH_YEAR","onChange","onFocus","onBlur","placeholders","id","idProp","selectProps","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","getDateObject","isDateValid","convertToLocalMidnight","undefined","getInitialDate","unit","dateObject","isMonthAndYearFormat","getFullYear","getMonth","getDate","day","setDay","useState","displayDay","setDisplayDay","toString","month","setMonth","year","setYear","displayYear","setDisplayYear","lastBroadcastedValue","setLastBroadcastedValue","monthNames","getMonthNames","messages","dayPlaceholder","yearPlaceholder","getDateAsString","date","MONTH_YEAR","slice","join","getSelectElement","_jsxs","className","children","_jsx","Body","type","Typography","BODY_DEFAULT","SelectInput","name","placeholder","items","Array","from","length","_","index","renderValue","selectedValue","SelectInputOptionContent","title","handleMonthChange","isDayValid","newDay","newMonth","newYear","maxDay","Date","handleInternalValue","broadcastNewValue","dateValue","setFullYear","handleDayChange","event","newDayString","target","replace","newDayNumber","Number","parseInt","selectedMonth","handleYearChange","newYearString","newYearNumber","newValue","monthYearOnly","monthWidth","clsx","getDay","Input","inputMode","pattern","autoComplete","min","max","maxLength","getYear","monthBeforeDay","MDY","has","yearFirst","YMD","role","shouldPropagateOnFocus","stopPropagation","shouldPropagateOnBlur","_Fragment","relatedTarget","targetParent","closest","relatedParent","blurElementParent","focusElement","document","activeElement","focusElementParent"],"mappings":"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"}
1	+ {"version":3,"file":"DateInput.mjs","sources":["../../src/dateInput/DateInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Body, Input, SelectInput, SelectInputOptionContent, SelectInputProps } from '..';\nimport {\n DateMode,\n MonthFormat,\n Size,\n SizeLarge,\n SizeMedium,\n SizeSmall,\n Typography,\n} from '../common';\nimport { MDY, YMD, getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';\nimport { useInputAttributes } from '../inputs/contexts';\nimport messages from './DateInput.messages';\nimport { convertToLocalMidnight } from './utils';\n\nexport interface DateInputProps {\n /** @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead. /\n 'aria-label'?: string;\n 'aria-labelledby'?: string;\n disabled?: boolean;\n size?: SizeSmall \| SizeMedium \| SizeLarge;\n value?: Date \| string;\n onChange: (value: string \| null) => void;\n onFocus?: React.FocusEventHandler<HTMLDivElement>;\n onBlur?: React.FocusEventHandler<HTMLDivElement>;\n dayLabel?: string;\n dayAutoComplete?: string;\n monthLabel?: string;\n yearLabel?: string;\n yearAutoComplete?: string;\n monthFormat?: `${MonthFormat}`;\n mode?: `${DateMode}`;\n placeholders?: {\n day?: string;\n month?: string;\n year?: string;\n };\n id?: string;\n selectProps?: Partial<SelectInputProps<number \| null>>;\n}\n\nconst DateInput = ({\n 'aria-labelledby': ariaLabelledByProp,\n 'aria-label': ariaLabel,\n disabled = false,\n size = Size.MEDIUM,\n value,\n dayLabel,\n dayAutoComplete,\n monthLabel,\n yearLabel,\n yearAutoComplete,\n monthFormat = MonthFormat.LONG,\n mode = DateMode.DAY_MONTH_YEAR,\n onChange,\n onFocus,\n onBlur,\n placeholders,\n id: idProp,\n selectProps = {},\n}: DateInputProps) => {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n const id = idProp ?? inputAttributes.id;\n const ariaLabelledBy = ariaLabelledByProp ?? inputAttributes['aria-labelledby'];\n\n const { locale, formatMessage } = useIntl();\n\n const getDateObject = (): Date \| undefined => {\n if (value && isDateValid(value)) {\n return typeof value === 'string' ? convertToLocalMidnight(value) : value;\n }\n return undefined;\n };\n\n const getInitialDate = (unit: 'year' \| 'month' \| 'day'): number \| null => {\n if (value && isDateValid(value)) {\n const dateObject = getDateObject();\n\n if (typeof value === 'string' && isMonthAndYearFormat(value) && unit === 'day') {\n return null;\n }\n\n if (dateObject !== undefined) {\n switch (unit) {\n case 'year':\n return dateObject.getFullYear();\n case 'month':\n return dateObject.getMonth();\n case 'day':\n return dateObject.getDate();\n default:\n return null;\n }\n }\n }\n return null;\n };\n\n const [day, setDay] = useState(() => getInitialDate('day'));\n const [displayDay, setDisplayDay] = useState(day?.toString());\n const [month, setMonth] = useState(() => getInitialDate('month'));\n const [year, setYear] = useState(() => getInitialDate('year'));\n const [displayYear, setDisplayYear] = useState(year?.toString());\n const [lastBroadcastedValue, setLastBroadcastedValue] = useState<Date \| null \| undefined>(\n getDateObject,\n );\n const monthNames = getMonthNames(locale, monthFormat);\n\n dayLabel \|\|= formatMessage(messages.dayLabel);\n monthLabel \|\|= formatMessage(messages.monthLabel);\n yearLabel \|\|= formatMessage(messages.yearLabel);\n placeholders = {\n day: placeholders?.day \|\| formatMessage(messages.dayPlaceholder),\n month: placeholders?.month \|\| formatMessage(messages.monthLabel),\n year: placeholders?.year \|\| formatMessage(messages.yearPlaceholder),\n };\n\n const getDateAsString = (date: Date) => {\n if (!isDateValid(date)) {\n return '';\n }\n switch (mode) {\n case DateMode.MONTH_YEAR:\n return [date.getFullYear(), `0${date.getMonth() + 1}`.slice(-2)].join('-');\n case DateMode.DAY_MONTH_YEAR:\n default:\n return [\n date.getFullYear(),\n `0${date.getMonth() + 1}`.slice(-2),\n `0${date.getDate()}`.slice(-2),\n ].join('-');\n }\n };\n\n const getSelectElement = () => {\n return (\n <label className=\"d-flex flex-column\">\n <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>\n <SelectInput\n id={`${id}:month`}\n name=\"month\"\n disabled={disabled}\n placeholder={placeholders?.month}\n items={Array.from({ length: 12 }, (_, index) => ({ type: 'option', value: index }))}\n size={size}\n value={month}\n renderValue={(selectedValue) => (\n <SelectInputOptionContent title={monthNames[selectedValue]} />\n )}\n onChange={(selectedValue) => handleMonthChange(selectedValue)}\n {...selectProps}\n />\n </label>\n );\n };\n\n const isDayValid = (newDay: number, newMonth: number, newYear: number) => {\n const maxDay = new Date(newYear, newMonth + 1, 0).getDate();\n return newDay <= maxDay;\n };\n\n const handleInternalValue = (newDay = day, newMonth = month, newYear = year) => {\n if (newDay == null \|\| newDay === 0 \|\| newMonth == null \|\| newYear == null \|\| newYear === 0) {\n broadcastNewValue(null);\n return;\n }\n if (!isDayValid(newDay, newMonth, newYear)) {\n broadcastNewValue(null);\n return;\n }\n\n const dateValue = new Date(newYear, newMonth, newDay);\n if (newYear < 100) {\n dateValue.setFullYear(newYear);\n }\n\n if (!isDateValid(dateValue)) {\n broadcastNewValue(null);\n return;\n }\n\n if (mode === DateMode.MONTH_YEAR) {\n if (newMonth !== month \|\| newYear !== year) {\n broadcastNewValue(dateValue);\n }\n } else if (newDay !== day \|\| newMonth !== month \|\| newYear !== year) {\n broadcastNewValue(dateValue);\n }\n };\n\n const handleDayChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newDayString = event.target.value.replace(/\\D/g, '');\n const newDayNumber = Number.parseInt(newDayString, 10);\n\n setDay(newDayNumber);\n setDisplayDay(newDayString);\n handleInternalValue(newDayNumber, month, year);\n };\n\n const handleMonthChange = (selectedMonth: number \| null) => {\n if (selectedMonth === null) {\n setMonth(null);\n handleInternalValue(day, null, year);\n return;\n }\n setMonth(selectedMonth);\n handleInternalValue(day, selectedMonth, year);\n };\n\n const handleYearChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const newYearString = event.target.value.replace(/\\D/g, '');\n const newYearNumber = Number.parseInt(newYearString, 10);\n\n if (newYearString.length >= 4 && newYearString.length <= 6) {\n setYear(newYearNumber);\n setDisplayYear(newYearString);\n handleInternalValue(day, month, newYearNumber);\n } else {\n setYear(null);\n setDisplayYear(newYearString);\n handleInternalValue(day, month, null);\n }\n };\n\n const broadcastNewValue = (newValue: Date \| null) => {\n if (newValue !== lastBroadcastedValue) {\n setLastBroadcastedValue(newValue);\n onChange(newValue != null ? getDateAsString(newValue) : null);\n }\n };\n\n const monthYearOnly = mode === DateMode.MONTH_YEAR;\n\n const monthWidth = clsx({\n 'col-sm-8': monthYearOnly,\n 'col-sm-5': !monthYearOnly,\n });\n\n const getMonth = () => {\n return <div className={monthWidth}>{getSelectElement()}</div>;\n };\n\n const getDay = () => {\n return (\n <div className=\"col-sm-3\">\n <label>\n <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>\n <div className={`input-group input-group-${size}`}>\n <Input\n id={`${id}:day`}\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]\"\n name=\"day\"\n autoComplete={dayAutoComplete}\n value={displayDay \|\| ''}\n placeholder={placeholders?.day}\n disabled={disabled}\n min={1}\n max={31}\n maxLength={2}\n onChange={(event) => handleDayChange(event)}\n />\n </div>\n </label>\n </div>\n );\n };\n\n const getYear = () => {\n return (\n <div className=\"col-sm-4\">\n <label>\n <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>\n <div className={`input-group input-group-${size}`}>\n <Input\n id={`${id}:year`}\n type=\"text\"\n inputMode=\"numeric\"\n pattern=\"[0-9]*\"\n name=\"year\"\n autoComplete={yearAutoComplete}\n placeholder={placeholders?.year}\n value={displayYear \|\| ''}\n disabled={disabled}\n min={0}\n max={9999}\n maxLength={6}\n onChange={(event) => handleYearChange(event)}\n />\n </div>\n </label>\n </div>\n );\n };\n const monthBeforeDay = MDY.has(locale);\n const yearFirst = YMD.has(locale);\n\n return (\n <div\n className=\"tw-date\"\n {...inputAttributes}\n id={id}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n role=\"group\" // Add role attribute to indicate container for interactive elements\n onFocus={(event) =>\n shouldPropagateOnFocus(event) ? onFocus && onFocus(event) : event.stopPropagation()\n }\n onBlur={(event) =>\n shouldPropagateOnBlur(event) ? onBlur && onBlur(event) : event.stopPropagation()\n }\n >\n <div className=\"row\">\n {(() => {\n if (monthYearOnly) {\n return (\n <>\n {!yearFirst && getMonth()}\n {getYear()}\n {yearFirst && getMonth()}\n </>\n );\n }\n if (monthBeforeDay) {\n return (\n <>\n {getMonth()}\n {getDay()}\n {getYear()}\n </>\n );\n }\n if (yearFirst) {\n return (\n <>\n {getYear()}\n {getMonth()}\n {getDay()}\n </>\n );\n }\n return (\n <>\n {getDay()}\n {getMonth()}\n {getYear()}\n </>\n );\n })()}\n </div>\n </div>\n );\n};\n\n// Should only propagate if the relatedTarget is not part of this DateInput component.\nfunction shouldPropagateOnFocus({\n target,\n relatedTarget,\n}: Pick<React.FocusEvent, 'target' \| 'relatedTarget'>) {\n const targetParent = target.closest('.tw-date');\n const relatedParent = relatedTarget && relatedTarget.closest('.tw-date');\n return targetParent !== relatedParent;\n}\n\n// Should only propagate if the relatedTarget or the activeElement is not part of this DateInput component.\nfunction shouldPropagateOnBlur({\n target,\n relatedTarget,\n}: Pick<React.FocusEvent, 'target' \| 'relatedTarget'>) {\n const blurElementParent = target.closest('.tw-date');\n // Even though FocusEvent.relatedTarget is supported by IE\n // (https://developer.mozilla.org/en-US/docs/Web/API/FocusEvent/relatedTarget)\n // \"IE11 sets document.activeElement to the next focused element before the blur event is called.\"\n // (https://stackoverflow.com/a/49325196/986241)\n // Therefore if the relatedTarget is null, we try the document.activeElement,\n // which may contain the HTML element that is gaining focus\n const focusElement =\n relatedTarget \|\| (document.activeElement !== target ? document.activeElement : null);\n const focusElementParent = focusElement && focusElement.closest('.tw-date');\n return blurElementParent !== focusElementParent;\n}\n\nexport default DateInput;\n"],"names":["DateInput","ariaLabelledByProp","ariaLabel","disabled","size","Size","MEDIUM","value","dayLabel","dayAutoComplete","monthLabel","yearLabel","yearAutoComplete","monthFormat","MonthFormat","LONG","mode","DateMode","DAY_MONTH_YEAR","onChange","onFocus","onBlur","placeholders","id","idProp","selectProps","inputAttributes","useInputAttributes","nonLabelable","ariaLabelledBy","locale","formatMessage","useIntl","getDateObject","isDateValid","convertToLocalMidnight","undefined","getInitialDate","unit","dateObject","isMonthAndYearFormat","getFullYear","getMonth","getDate","day","setDay","useState","displayDay","setDisplayDay","toString","month","setMonth","year","setYear","displayYear","setDisplayYear","lastBroadcastedValue","setLastBroadcastedValue","monthNames","getMonthNames","messages","dayPlaceholder","yearPlaceholder","getDateAsString","date","MONTH_YEAR","slice","join","getSelectElement","_jsxs","className","children","_jsx","Body","type","Typography","BODY_DEFAULT","SelectInput","name","placeholder","items","Array","from","length","_","index","renderValue","selectedValue","SelectInputOptionContent","title","handleMonthChange","isDayValid","newDay","newMonth","newYear","maxDay","Date","handleInternalValue","broadcastNewValue","dateValue","setFullYear","handleDayChange","event","newDayString","target","replace","newDayNumber","Number","parseInt","selectedMonth","handleYearChange","newYearString","newYearNumber","newValue","monthYearOnly","monthWidth","clsx","getDay","Input","inputMode","pattern","autoComplete","min","max","maxLength","getYear","monthBeforeDay","MDY","has","yearFirst","YMD","role","shouldPropagateOnFocus","stopPropagation","shouldPropagateOnBlur","_Fragment","relatedTarget","targetParent","closest","relatedParent","blurElementParent","focusElement","document","activeElement","focusElementParent"],"mappings":"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"}

package/build/radio/Radio.js CHANGED Viewed

@@ -1,6 +1,5 @@
 'use strict';
-var componentsTheming = require('@wise/components-theming');
 var clsx = require('clsx');
 var Body = require('../body/Body.js');
 var RadioButton = require('../common/RadioButton/RadioButton.js');
@@ -16,13 +15,10 @@ function Radio({
   secondary,
   ...otherProps
 }) {
-  const {
-    isModern
-  } = componentsTheming.useTheme();
   return /*#__PURE__*/jsxRuntime.jsx("div", {
     className: clsx.clsx('radio np-radio', {
       'radio-lg': secondary,
-      disabled: isModern && disabled
+      'radio-disabled': disabled
     }, className),
     children: /*#__PURE__*/jsxRuntime.jsxs("label", {
       className: clsx.clsx({
@@ -30,7 +26,7 @@ function Radio({
       }),
       htmlFor: id,
       children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-        className: clsx.clsx(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button'),
+        className: "m-r-2 np-radio-button",
         children: /*#__PURE__*/jsxRuntime.jsx(RadioButton, {
           id: id,
           disabled: disabled,
@@ -42,9 +38,6 @@ function Radio({
         className: "np-radio__text",
         children: [label, secondary && /*#__PURE__*/jsxRuntime.jsx(Body, {
           as: "span",
-          className: clsx.clsx({
-            secondary: !isModern
-          }),
           children: secondary
         })]
       }), avatar && /*#__PURE__*/jsxRuntime.jsx("span", {

package/build/radio/Radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.js","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { ~~useTheme } from '@wise/components-theming';\nimport {~~ clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string \| number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string \| number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n ~~const { isModern } = useTheme();\n~~ return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n disabled: ~~isModern &&~~ disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className~~={clsx(isModern ? '~~m-r-2' ~~: 'p-r-2', '~~np-radio-button~~')}~~>\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && ~~(\n~~ <Body as=\"span\" ~~className=~~{~~clsx({~~ secondary~~: !isModern~~ }~~)}>\n {secondary}\n~~ </Body~~>\n )~~}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","~~isModern","useTheme","~~_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":"~~;;;;;;;;;AAewB~~,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;~~EACd~~,~~MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,~~EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;~~AACEN~~,IAAAA,SAAS,~~EAAEO~~,SAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,~~EAAEL~~,SAAS;~~MACrBH~~,~~QAAQ~~,~~EAAEK~~,~~QAAQ~~,~~IAAIL,~~QAAAA;~~KACvB~~,EACDC,SAAS,CACT;~~AAAAQ~~,IAAAA,QAAA,eAEFC,eAAA,CAAA,OAAA,EAAA;~~MAAOT~~,SAAS,~~EAAEO~~,SAAI,CAAC;~~AAAER~~,QAAAA,QAAAA;AAAU,OAAA,CAAE;~~AAACW~~,MAAAA,OAAO,~~EAAEZ~~,EAAG;~~AAAAU~~,MAAAA,QAAA,gBAChDF,cAAA,CAAA,MAAA,EAAA;~~QAAMN~~,SAAS,~~EAAEO~~,~~SAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,EAAE,iBAAiB,CAAE~~;~~QAAAI~~,QAAA,~~eACrEF~~,cAAA,CAACK,WAAW,EAAA;~~AAACb~~,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,~~eAAAM~~,eAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,~~EAAEZ~~,SAAS,~~GAAGa~~,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;~~AACrEjB~~,QAAAA,SAAS,EAAC,gBAAgB;~~AAAAQ~~,QAAAA,QAAA,~~GAEzBX~~,KAAK,EACLK,SAAS,~~iBACRI~~,cAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;~~UAACb~~,~~SAAS,EAAEO,SAAI,CAAC;AAAEL,YAAAA,SAAS,EAAE,CAACE,QAAAA;AAAQ,WAAE,CAAE;AAAAI,~~UAAAA,QAAA,~~EACvDN~~,SAAAA;AAAS,~~SACN~~,~~CACP~~,CAAA;AAAA,~~OACG~~,CACN,EAACD,MAAM,~~iBAAIK~~,cAAA,CAAA,MAAA,EAAA;~~AAAMN~~,QAAAA,SAAS,EAAC,2BAA2B;~~AAAAQ~~,QAAAA,QAAA,~~EAAEP~~,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
1	+ {"version":3,"file":"Radio.js","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string \| number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string \| number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,SAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,eAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,SAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,cAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,eAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,cAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/radio/Radio.mjs CHANGED Viewed

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import Body from '../body/Body.mjs';
 import RadioButton from '../common/RadioButton/RadioButton.mjs';
@@ -14,13 +13,10 @@ function Radio({
   secondary,
   ...otherProps
 }) {
-  const {
-    isModern
-  } = useTheme();
   return /*#__PURE__*/jsx("div", {
     className: clsx('radio np-radio', {
       'radio-lg': secondary,
-      disabled: isModern && disabled
+      'radio-disabled': disabled
     }, className),
     children: /*#__PURE__*/jsxs("label", {
       className: clsx({
@@ -28,7 +24,7 @@ function Radio({
       }),
       htmlFor: id,
       children: [/*#__PURE__*/jsx("span", {
-        className: clsx(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button'),
+        className: "m-r-2 np-radio-button",
         children: /*#__PURE__*/jsx(RadioButton, {
           id: id,
           disabled: disabled,
@@ -40,9 +36,6 @@ function Radio({
         className: "np-radio__text",
         children: [label, secondary && /*#__PURE__*/jsx(Body, {
           as: "span",
-          className: clsx({
-            secondary: !isModern
-          }),
           children: secondary
         })]
       }), avatar && /*#__PURE__*/jsx("span", {

package/build/radio/Radio.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.mjs","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { ~~useTheme } from '@wise/components-theming';\nimport {~~ clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string \| number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string \| number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n ~~const { isModern } = useTheme();\n~~ return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n disabled: ~~isModern &&~~ disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className~~={clsx(isModern ? '~~m-r-2' ~~: 'p-r-2', '~~np-radio-button~~')}~~>\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && ~~(\n~~ <Body as=\"span\" ~~className=~~{~~clsx({~~ secondary~~: !isModern~~ }~~)}>\n {secondary}\n~~ </Body~~>\n )~~}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","~~isModern","useTheme","~~_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":"~~;;;;;;;AAewB~~,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;~~EACd~~,~~MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAC/B,~~EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;~~AACEN~~,IAAAA,SAAS,~~EAAEO~~,IAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,~~EAAEL~~,SAAS;~~MACrBH~~,~~QAAQ~~,~~EAAEK~~,~~QAAQ~~,~~IAAIL,~~QAAAA;~~KACvB~~,EACDC,SAAS,CACT;~~AAAAQ~~,IAAAA,QAAA,eAEFC,IAAA,CAAA,OAAA,EAAA;~~MAAOT~~,SAAS,~~EAAEO~~,IAAI,CAAC;~~AAAER~~,QAAAA,QAAAA;AAAU,OAAA,CAAE;~~AAACW~~,MAAAA,OAAO,~~EAAEZ~~,EAAG;~~AAAAU~~,MAAAA,QAAA,gBAChDF,GAAA,CAAA,MAAA,EAAA;~~QAAMN~~,SAAS,~~EAAEO~~,~~IAAI,CAACH,QAAQ,GAAG,OAAO,GAAG,OAAO,EAAE,iBAAiB,CAAE~~;~~QAAAI~~,QAAA,~~eACrEF~~,GAAA,CAACK,WAAW,EAAA;~~AAACb~~,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,~~eAAAM~~,IAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,~~EAAEZ~~,SAAS,~~GAAGa~~,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;~~AACrEjB~~,QAAAA,SAAS,EAAC,gBAAgB;~~AAAAQ~~,QAAAA,QAAA,~~GAEzBX~~,KAAK,EACLK,SAAS,~~iBACRI~~,GAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;~~UAACb~~,~~SAAS,EAAEO,IAAI,CAAC;AAAEL,YAAAA,SAAS,EAAE,CAACE,QAAAA;AAAQ,WAAE,CAAE;AAAAI,~~UAAAA,QAAA,~~EACvDN~~,SAAAA;AAAS,~~SACN~~,~~CACP~~,CAAA;AAAA,~~OACG~~,CACN,EAACD,MAAM,~~iBAAIK~~,GAAA,CAAA,MAAA,EAAA;~~AAAMN~~,QAAAA,SAAS,EAAC,2BAA2B;~~AAAAQ~~,QAAAA,QAAA,~~EAAEP~~,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
1	+ {"version":3,"file":"Radio.mjs","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string \| number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string \| number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,GAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,IAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,IAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,IAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,GAAA,CAACK,WAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,IAAA,CAACG,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,GAAA,CAACM,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,GAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}

package/build/types/dateInput/DateInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAC1F,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AAMnB,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,~~gCAkShB~~,CAAC;AA8BF,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsD,gBAAgB,EAAE,MAAM,IAAI,CAAC;AAC1F,OAAO,EACL,QAAQ,EACR,WAAW,EAEX,SAAS,EACT,UAAU,EACV,SAAS,EAEV,MAAM,WAAW,CAAC;AAMnB,MAAM,WAAW,cAAc;IAC7B,kFAAkF;IAClF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC1C,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,WAAW,CAAC,EAAE,GAAG,WAAW,EAAE,CAAC;IAC/B,IAAI,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;CACxD;AAED,QAAA,MAAM,SAAS,wPAmBZ,cAAc,gCAqShB,CAAC;AA8BF,eAAe,SAAS,CAAC"}

package/build/types/radio/Radio.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/radio/Radio.tsx"],"names":[],"mappings":"~~AAMA~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACzF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EAC5D,KAAK,EACL,EAAE,EACF,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,CAAC,CAAC,+~~BAiCf~~"}
1	+ {"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../src/radio/Radio.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,CAAE,SAAQ,gBAAgB,CAAC,CAAC,CAAC;IACzF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,EAAE,EAAE,EAC5D,KAAK,EACL,EAAE,EACF,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,GAAG,UAAU,EACd,EAAE,UAAU,CAAC,CAAC,CAAC,+BA4Bf"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "46.62.0",
+  "version": "46.63.0",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -92,9 +92,9 @@
     "rollup": "^4.18.1",
     "rollup-preserve-directives": "^1.1.1",
     "storybook": "^8.2.2",
-    "@transferwise/neptune-css": "14.14.0",
-    "@wise/components-theming": "1.6.0",
-    "@transferwise/less-config": "3.1.0"
+    "@transferwise/less-config": "3.1.0",
+    "@transferwise/neptune-css": "14.15.0",
+    "@wise/components-theming": "1.6.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3.7.0",

package/src/checkbox/Checkbox.tsx CHANGED Viewed

@@ -36,7 +36,7 @@ export default function Checkbox({
     {
       checkbox: true,
       'checkbox-lg': secondary,
-      disabled,
+      'checkbox-disabled': disabled,
     },
     className,
   );

package/src/checkboxButton/CheckboxButton.story.tsx CHANGED Viewed

@@ -2,13 +2,14 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
-import CheckboxButton, { CheckboxButtonProps } from './CheckboxButton';
+import CheckboxButton from './CheckboxButton';
 export default {
   component: CheckboxButton,
   title: 'Actions/CheckboxButton',
   tags: ['autodocs'],
   args: {
+    disabled: false,
     onBlur: action('blur'),
     onClick: action('click'),
     onFocus: action('focus'),
@@ -20,7 +21,6 @@ type Story = StoryObj<typeof CheckboxButton>;
 export const Basic: Story = {
   args: {
     'aria-label': 'Toggle email updates',
-    disabled: false,
   },
   render: (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -30,25 +30,22 @@ export const Basic: Story = {
   },
 };
-const Template = (props: CheckboxButtonProps) => {
-  const checked = true;
-  const [indeterminate, setIndeterminate] = useState(true);
-  return (
-    <CheckboxButton
-      {...props}
-      checked={checked}
-      indeterminate={indeterminate}
-      onChange={() => setIndeterminate(!indeterminate)}
-    />
-  );
-};
-export const Indeterminate = () => {
-  const args = {
+export const Indeterminate: Story = {
+  args: {
     'aria-label': 'Group checkbox with indeterminate state',
-    disabled: false,
     indeterminate: true,
-  };
-  return <Template {...args} />;
+  },
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [indeterminate, setIndeterminate] = useState(true);
+    return (
+      <CheckboxButton
+        {...args}
+        checked
+        indeterminate={indeterminate}
+        onChange={() => setIndeterminate(!indeterminate)}
+      />
+    );
+  },
 };

package/src/dateInput/DateInput.tsx CHANGED Viewed

@@ -141,6 +141,7 @@ const DateInput = ({
       <label className="d-flex flex-column">
         <Body type={Typography.BODY_DEFAULT}>{monthLabel}</Body>
         <SelectInput
+          id={`${id}:month`}
           name="month"
           disabled={disabled}
           placeholder={placeholders?.month}
@@ -250,6 +251,7 @@ const DateInput = ({
           <Body type={Typography.BODY_DEFAULT}>{dayLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
+              id={`${id}:day`}
               type="text"
               inputMode="numeric"
               pattern="[0-9]*"
@@ -276,6 +278,7 @@ const DateInput = ({
           <Body type={Typography.BODY_DEFAULT}>{yearLabel}</Body>
           <div className={`input-group input-group-${size}`}>
             <Input
+              id={`${id}:year`}
               type="text"
               inputMode="numeric"
               pattern="[0-9]*"

package/src/radio/Radio.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-import { useTheme } from '@wise/components-theming';
 import { clsx } from 'clsx';
 import Body from '../body/Body';
@@ -22,20 +21,19 @@ export default function Radio<T extends string | number = ''>({
   secondary,
   ...otherProps
 }: RadioProps<T>) {
-  const { isModern } = useTheme();
   return (
     <div
       className={clsx(
         'radio np-radio',
         {
           'radio-lg': secondary,
-          disabled: isModern && disabled,
+          'radio-disabled': disabled,
         },
         className,
       )}
     >
       <label className={clsx({ disabled })} htmlFor={id}>
-        <span className={clsx(isModern ? 'm-r-2' : 'p-r-2', 'np-radio-button')}>
+        <span className="m-r-2 np-radio-button">
           <RadioButton id={id} disabled={disabled} {...otherProps} />
         </span>
         <Body
@@ -44,11 +42,7 @@ export default function Radio<T extends string | number = ''>({
           className="np-radio__text"
         >
           {label}
-          {secondary && (
-            <Body as="span" className={clsx({ secondary: !isModern })}>
-              {secondary}
-            </Body>
-          )}
+          {secondary && <Body as="span">{secondary}</Body>}
         </Body>
         {avatar && <span className="np-radio__avatar m-l-auto">{avatar}</span>}
       </label>

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap CHANGED Viewed

@@ -9,7 +9,7 @@ exports[`Radio shows the avatar when supplied 1`] = `
       class=""
     >
       <span
-        class="p-r-2 np-radio-button"
+        class="m-r-2 np-radio-button"
       >
         <input
           class="sr-only"

package/src/textareaWithDisplayFormat/TextareaWithDisplayFormat.story.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
 import TextareaWithDisplayFormat from './TextareaWithDisplayFormat';
+import { Field } from '../field/Field';
 export default {
   component: TextareaWithDisplayFormat,
@@ -11,15 +12,19 @@ export default {
 type Story = StoryObj<typeof TextareaWithDisplayFormat>;
 export const Basic: Story = {
-  render: (args) => {
+  render: () => {
+    const label = 'Textarea with display format';
+    const id = label.replaceAll(' ', '-').toLowerCase();
     return (
-      <>
+      <Field id={id} label={label}>
         <TextareaWithDisplayFormat
+          id={id}
           value="0000"
           displayPattern="**** - **** - ****"
           onChange={console.log}
         />
-      </>
+      </Field>
     );
   },
   // intentionally use interactive typing (over init value via `value` prop)