@doist/reactist 15.1.0 → 15.2.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.
- package/dist/reactist.cjs.development.js.map +1 -1
- package/dist/reactist.cjs.production.min.js.map +1 -1
- package/es/new-components/checkbox-field/checkbox-field.js.map +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.d.ts +1 -1
- package/lib/new-components/checkbox-field/checkbox-field.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?:
|
|
1
|
+
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?: React.ReactNode\n /** Defines whether or not the checkbox can be of a `mixed` state. */\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n ref,\n) {\n const isControlledComponent = typeof props.checked === 'boolean'\n if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n // eslint-disable-next-line no-console\n console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n indeterminate = undefined\n }\n\n if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('A Checkbox needs a label')\n }\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useForkRef(internalRef, ref)\n React.useEffect(\n function setIndeterminate() {\n if (internalRef.current && typeof indeterminate === 'boolean') {\n internalRef.current.indeterminate = indeterminate\n }\n },\n [indeterminate],\n )\n\n return (\n <Box\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n >\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n aria-checked={indeterminate ? 'mixed' : isChecked}\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n <CheckboxIcon\n checked={isChecked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-hidden\n />\n {label ? <Text>{label}</Text> : null}\n </Box>\n )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["CheckboxField","React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","isControlledComponent","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","setIndeterminate","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":";;;;;;;;;MAmCMA,aAAa,gBAAGC,UAAA,CAAuD,SAASD,aAAT,OAEzEE,GAFyE;;;MACzE;IAAEC,KAAF;IAASC,QAAT;IAAmBC,aAAnB;IAAkCC,cAAlC;IAAkDC;;MAAaC;;EAG/D,MAAMC,qBAAqB,GAAG,OAAOD,KAAK,CAACE,OAAb,KAAyB,SAAvD;;EACA,IAAI,OAAOL,aAAP,KAAyB,SAAzB,IAAsC,CAACI,qBAA3C,EAAkE;;IAE9DE,OAAO,CAACC,IAAR,CAAa,sDAAb;IACAP,aAAa,GAAGQ,SAAhB;;;EAGJ,IAAI,CAACV,KAAD,IAAU,CAACK,KAAK,CAAC,YAAD,CAAhB,IAAkC,CAACA,KAAK,CAAC,iBAAD,CAA5C,EAAiE;;IAE7DG,OAAO,CAACC,IAAR,CAAa,0BAAb;;;EAGJ,MAAM,CAACE,UAAD,EAAaC,aAAb,IAA8Bd,QAAA,CAAe,KAAf,CAApC;EACA,MAAM,CAACe,YAAD,EAAeC,UAAf,IAA6BhB,QAAA,4BAAeO,KAAK,CAACE,OAArB,6BAAgCJ,cAAhC,oBAAkD,KAAlD,CAAnC;EACA,MAAMY,SAAS,sBAAGV,KAAK,CAACE,OAAT,8BAAoBM,YAAnC;EAEA,MAAMG,WAAW,GAAGlB,MAAA,CAA+B,IAA/B,CAApB;EACA,MAAMmB,WAAW,GAAGC,UAAU,CAACF,WAAD,EAAcjB,GAAd,CAA9B;EACAD,SAAA,CACI,SAASqB,gBAAT;IACI,IAAIH,WAAW,CAACI,OAAZ,IAAuB,OAAOlB,aAAP,KAAyB,SAApD,EAA+D;MAC3Dc,WAAW,CAACI,OAAZ,CAAoBlB,aAApB,GAAoCA,aAApC;;GAHZ,EAMI,CAACA,aAAD,CANJ;EASA,oBACIJ,aAAA,CAACuB,GAAD;IACIC,EAAE,EAAC;IACHC,OAAO,EAAC;IACRC,UAAU,EAAC;IACXC,SAAS,EAAE,CACPC,MAAM,CAACC,SADA,EAEP1B,QAAQ,GAAGyB,MAAM,CAACzB,QAAV,GAAqB,IAFtB,EAGPc,SAAS,GAAGW,MAAM,CAACnB,OAAV,GAAoB,IAHtB,EAIPI,UAAU,GAAGe,MAAM,CAACf,UAAV,GAAuB,IAJ1B;GAJf,eAWIb,aAAA,QAAA,oCACQO,KADR;IAEIN,GAAG,EAAEkB,WAFT;IAGIW,IAAI,EAAC,UAHT;oBAIkB1B,aAAa,GAAG,OAAH,GAAaa,SAJ5C;IAKIR,OAAO,EAAEQ,SALb;IAMId,QAAQ,EAAEA,QANd;IAOIG,QAAQ,EAAGyB,KAAD;MACNzB,QAAQ,QAAR,YAAAA,QAAQ,CAAGyB,KAAH,CAAR;;MACA,IAAI,CAACA,KAAK,CAACC,gBAAX,EAA6B;QACzBhB,UAAU,CAACe,KAAK,CAACE,aAAN,CAAoBxB,OAArB,CAAV;;KAVZ;IAaIyB,MAAM,EAAGH,KAAD;MACJjB,aAAa,CAAC,KAAD,CAAb;MACAP,KAAK,QAAL,YAAAA,KAAK,CAAE2B,MAAP,oBAAA3B,KAAK,CAAE2B,MAAP,CAAgBH,KAAhB;KAfR;IAiBII,OAAO,EAAGJ,KAAD;MACLjB,aAAa,CAAC,IAAD,CAAb;MACAP,KAAK,QAAL,YAAAA,KAAK,CAAE4B,OAAP,oBAAA5B,KAAK,CAAE4B,OAAP,CAAiBJ,KAAjB;;KA9BZ,eAiCI/B,aAAA,CAACoC,YAAD;IACI3B,OAAO,EAAEQ;IACTd,QAAQ,EAAEA;IACVC,aAAa,EAAEA;;GAHnB,CAjCJ,EAuCKF,KAAK,gBAAGF,aAAA,CAACqC,IAAD,MAAA,EAAOnC,KAAP,CAAH,GAA0B,IAvCpC,CADJ;AA2CH,CA1EqB;;;;"}
|
|
@@ -12,7 +12,7 @@ declare type CheckboxFieldProps = Omit<JSX.IntrinsicElements['input'], 'type' |
|
|
|
12
12
|
/** Defines whether or not the checkbox is disabled. */
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
/** The label for the checkbox element. */
|
|
15
|
-
label?:
|
|
15
|
+
label?: React.ReactNode;
|
|
16
16
|
/** Defines whether or not the checkbox can be of a `mixed` state. */
|
|
17
17
|
indeterminate?: boolean;
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?:
|
|
1
|
+
{"version":3,"file":"checkbox-field.js","sources":["../../../src/new-components/checkbox-field/checkbox-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useForkRef } from 'ariakit-utils'\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { CheckboxIcon } from './checkbox-icon'\n\nimport styles from './checkbox-field.module.css'\n\ntype CheckboxFieldProps = Omit<\n JSX.IntrinsicElements['input'],\n | 'type'\n | 'className'\n | 'disabled'\n | 'aria-controls'\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n> & {\n 'aria-checked'?: never\n /** Identifies the set of checkboxes controlled by the mixed checkbox for assistive technologies. */\n 'aria-controls'?: string\n /** Identifies the element (or elements) that describes the checkbox for assistive technologies. */\n 'aria-describedby'?: string\n /** Defines a string value that labels the current checkbox for assistive technologies. */\n 'aria-label'?: string\n /** Identifies the element (or elements) that labels the current checkbox for assistive technologies. */\n 'aria-labelledby'?: string\n /** Defines whether or not the checkbox is disabled. */\n disabled?: boolean\n /** The label for the checkbox element. */\n label?: React.ReactNode\n /** Defines whether or not the checkbox can be of a `mixed` state. */\n indeterminate?: boolean\n}\n\nconst CheckboxField = React.forwardRef<HTMLInputElement, CheckboxFieldProps>(function CheckboxField(\n { label, disabled, indeterminate, defaultChecked, onChange, ...props },\n ref,\n) {\n const isControlledComponent = typeof props.checked === 'boolean'\n if (typeof indeterminate === 'boolean' && !isControlledComponent) {\n // eslint-disable-next-line no-console\n console.warn('Cannot use indeterminate on an uncontrolled checkbox')\n indeterminate = undefined\n }\n\n if (!label && !props['aria-label'] && !props['aria-labelledby']) {\n // eslint-disable-next-line no-console\n console.warn('A Checkbox needs a label')\n }\n\n const [keyFocused, setKeyFocused] = React.useState(false)\n const [checkedState, setChecked] = React.useState(props.checked ?? defaultChecked ?? false)\n const isChecked = props.checked ?? checkedState\n\n const internalRef = React.useRef<HTMLInputElement>(null)\n const combinedRef = useForkRef(internalRef, ref)\n React.useEffect(\n function setIndeterminate() {\n if (internalRef.current && typeof indeterminate === 'boolean') {\n internalRef.current.indeterminate = indeterminate\n }\n },\n [indeterminate],\n )\n\n return (\n <Box\n as=\"label\"\n display=\"flex\"\n alignItems=\"center\"\n className={[\n styles.container,\n disabled ? styles.disabled : null,\n isChecked ? styles.checked : null,\n keyFocused ? styles.keyFocused : null,\n ]}\n >\n <input\n {...props}\n ref={combinedRef}\n type=\"checkbox\"\n aria-checked={indeterminate ? 'mixed' : isChecked}\n checked={isChecked}\n disabled={disabled}\n onChange={(event) => {\n onChange?.(event)\n if (!event.defaultPrevented) {\n setChecked(event.currentTarget.checked)\n }\n }}\n onBlur={(event) => {\n setKeyFocused(false)\n props?.onBlur?.(event)\n }}\n onKeyUp={(event) => {\n setKeyFocused(true)\n props?.onKeyUp?.(event)\n }}\n />\n <CheckboxIcon\n checked={isChecked}\n disabled={disabled}\n indeterminate={indeterminate}\n aria-hidden\n />\n {label ? <Text>{label}</Text> : null}\n </Box>\n )\n})\n\nexport { CheckboxField }\nexport type { CheckboxFieldProps }\n"],"names":["React","ref","label","disabled","indeterminate","defaultChecked","onChange","props","checked","console","warn","undefined","keyFocused","setKeyFocused","checkedState","setChecked","isChecked","internalRef","combinedRef","useForkRef","current","Box","as","display","alignItems","className","styles","container","type","event","defaultPrevented","currentTarget","onBlur","onKeyUp","CheckboxIcon","Text"],"mappings":"kZAmCsBA,cAAuD,WAEzEC,iBADAC,MAAEA,EAAFC,SAASA,EAATC,cAAmBA,EAAnBC,eAAkCA,EAAlCC,SAAkDA,KAAaC,iCAIlC,kBAAlBH,GAD4C,kBAAlBG,EAAMC,UAGvCC,QAAQC,KAAK,wDACbN,OAAgBO,GAGfT,GAAUK,EAAM,eAAkBA,EAAM,oBAEzCE,QAAQC,KAAK,4BAGjB,MAAOE,EAAYC,GAAiBb,YAAe,IAC5Cc,EAAcC,GAAcf,6BAAeO,EAAMC,WAAWH,OAC7DW,WAAYT,EAAMC,WAAWM,EAE7BG,EAAcjB,SAA+B,MAC7CkB,EAAcC,aAAWF,EAAahB,GAU5C,OATAD,aACI,WACQiB,EAAYG,SAAoC,kBAAlBhB,IAC9Ba,EAAYG,QAAQhB,cAAgBA,KAG5C,CAACA,IAIDJ,gBAACqB,OACGC,GAAG,QACHC,QAAQ,OACRC,WAAW,SACXC,UAAW,CACPC,UAAOC,UACPxB,EAAWuB,UAAOvB,SAAW,KAC7Ba,EAAYU,UAAOlB,QAAU,KAC7BI,EAAac,UAAOd,WAAa,OAGrCZ,2DACQO,OACJN,IAAKiB,EACLU,KAAK,0BACSxB,EAAgB,QAAUY,EACxCR,QAASQ,EACTb,SAAUA,EACVG,SAAWuB,UACPvB,GAAAA,EAAWuB,GACNA,EAAMC,kBACPf,EAAWc,EAAME,cAAcvB,UAGvCwB,OAASH,IACLhB,GAAc,SACdN,SAAAA,EAAOyB,QAAPzB,EAAOyB,OAASH,IAEpBI,QAAUJ,IACNhB,GAAc,SACdN,SAAAA,EAAO0B,SAAP1B,EAAO0B,QAAUJ,OAGzB7B,gBAACkC,gBACG1B,QAASQ,EACTb,SAAUA,EACVC,cAAeA,qBAGlBF,EAAQF,gBAACmC,YAAMjC,GAAgB"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@doist/reactist",
|
|
3
3
|
"description": "Open source React components by Doist",
|
|
4
4
|
"author": "Henning Muszynski <henning@doist.com> (http://doist.com)",
|
|
5
|
-
"version": "15.
|
|
5
|
+
"version": "15.2.0",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://github.com/Doist/reactist#readme",
|
|
8
8
|
"repository": "git+https://github.com/Doist/reactist.git",
|