@lumx/react 2.2.2 → 2.2.3
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/esm/_internal/Checkbox2.js +5 -3
- package/esm/_internal/Checkbox2.js.map +1 -1
- package/esm/_internal/Switch2.js +5 -3
- package/esm/_internal/Switch2.js.map +1 -1
- package/package.json +4 -4
- package/src/components/checkbox/Checkbox.test.tsx +14 -0
- package/src/components/checkbox/Checkbox.tsx +5 -1
- package/src/components/checkbox/__snapshots__/Checkbox.test.tsx.snap +51 -0
- package/src/components/switch/Switch.test.tsx +10 -0
- package/src/components/switch/Switch.tsx +5 -1
- package/src/components/switch/__snapshots__/Switch.test.tsx.snap +30 -0
- package/types.d.ts +4 -0
|
@@ -51,7 +51,9 @@ var Checkbox = forwardRef(function (props, ref) {
|
|
|
51
51
|
onChange = props.onChange,
|
|
52
52
|
theme = props.theme,
|
|
53
53
|
value = props.value,
|
|
54
|
-
|
|
54
|
+
_props$inputProps = props.inputProps,
|
|
55
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
56
|
+
forwardedProps = _objectWithoutProperties(props, ["checked", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "label", "name", "onChange", "theme", "value", "inputProps"]);
|
|
55
57
|
|
|
56
58
|
var inputId = useMemo(function () {
|
|
57
59
|
return id || "".concat(CLASSNAME.toLowerCase(), "-").concat(uid());
|
|
@@ -75,7 +77,7 @@ var Checkbox = forwardRef(function (props, ref) {
|
|
|
75
77
|
}))
|
|
76
78
|
}), React.createElement("div", {
|
|
77
79
|
className: "".concat(CLASSNAME, "__input-wrapper")
|
|
78
|
-
}, React.createElement("input", {
|
|
80
|
+
}, React.createElement("input", _extends({
|
|
79
81
|
type: "checkbox",
|
|
80
82
|
id: inputId,
|
|
81
83
|
className: "".concat(CLASSNAME, "__input-native"),
|
|
@@ -84,7 +86,7 @@ var Checkbox = forwardRef(function (props, ref) {
|
|
|
84
86
|
value: value,
|
|
85
87
|
checked: isChecked,
|
|
86
88
|
onChange: handleChange
|
|
87
|
-
}), React.createElement("div", {
|
|
89
|
+
}, inputProps)), React.createElement("div", {
|
|
88
90
|
className: "".concat(CLASSNAME, "__input-placeholder")
|
|
89
91
|
}, React.createElement("div", {
|
|
90
92
|
className: "".concat(CLASSNAME, "__input-background")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox2.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, SyntheticEvent } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport { mdiCheck } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label text. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<CheckboxProps> = {\n theme: Theme.light,\n};\n\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n className,\n disabled,\n helper,\n id,\n isChecked = checked,\n isDisabled = disabled,\n label,\n name,\n onChange,\n theme,\n value,\n ...forwardedProps\n } = props;\n const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isChecked,\n isDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n tabIndex={isDisabled ? -1 : 0}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={mdiCheck} />\n </div>\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Checkbox","forwardRef","props","ref","checked","className","disabled","helper","id","isChecked","isDisabled","label","name","onChange","value","forwardedProps","inputId","useMemo","toLowerCase","uid","handleChange","event","classNames","handleBasicClasses","isUnchecked","prefix","mdiCheck","displayName","defaultProps"],"mappings":";;;;;;;;;;AAUA;;;;
|
|
1
|
+
{"version":3,"file":"Checkbox2.js","sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport { mdiCheck } from '@lumx/icons';\n\nimport { Icon, InputHelper, InputLabel, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface CheckboxProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Native input id property. */\n id?: string;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Label text. */\n label?: ReactNode;\n /** Native input name property. */\n name?: string;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Checkbox';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<CheckboxProps> = {\n theme: Theme.light,\n};\n\n/**\n * Checkbox component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n className,\n disabled,\n helper,\n id,\n isChecked = checked,\n isDisabled = disabled,\n label,\n name,\n onChange,\n theme,\n value,\n inputProps = {},\n ...forwardedProps\n } = props;\n const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n isChecked,\n isDisabled,\n isUnchecked: !isChecked,\n prefix: CLASSNAME,\n theme,\n }),\n )}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n type=\"checkbox\"\n id={inputId}\n className={`${CLASSNAME}__input-native`}\n tabIndex={isDisabled ? -1 : 0}\n name={name}\n value={value}\n checked={isChecked}\n onChange={handleChange}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n\n <div className={`${CLASSNAME}__input-indicator`}>\n <Icon icon={mdiCheck} />\n </div>\n </div>\n </div>\n\n <div className={`${CLASSNAME}__content`}>\n {label && (\n <InputLabel htmlFor={inputId} className={`${CLASSNAME}__label`} theme={theme}>\n {label}\n </InputLabel>\n )}\n {helper && (\n <InputHelper className={`${CLASSNAME}__helper`} theme={theme}>\n {helper}\n </InputHelper>\n )}\n </div>\n </div>\n );\n});\nCheckbox.displayName = COMPONENT_NAME;\nCheckbox.className = CLASSNAME;\nCheckbox.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Checkbox","forwardRef","props","ref","checked","className","disabled","helper","id","isChecked","isDisabled","label","name","onChange","value","inputProps","forwardedProps","inputId","useMemo","toLowerCase","uid","handleChange","event","classNames","handleBasicClasses","isUnchecked","prefix","mdiCheck","displayName","defaultProps"],"mappings":";;;;;;;;;;AAUA;;;;AA0BA;;;AAGA,IAAMA,cAAc,GAAG,UAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAqC,GAAG;AAC1CC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAD6B,CAA9C;AAIA;;;;;;;;IAOaC,QAA6C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAEhFC,OAFgF,GAgBhFF,KAhBgF,CAEhFE,OAFgF;AAAA,MAGhFC,SAHgF,GAgBhFH,KAhBgF,CAGhFG,SAHgF;AAAA,MAIhFC,QAJgF,GAgBhFJ,KAhBgF,CAIhFI,QAJgF;AAAA,MAKhFC,MALgF,GAgBhFL,KAhBgF,CAKhFK,MALgF;AAAA,MAMhFC,EANgF,GAgBhFN,KAhBgF,CAMhFM,EANgF;AAAA,yBAgBhFN,KAhBgF,CAOhFO,SAPgF;AAAA,MAOhFA,SAPgF,iCAOpEL,OAPoE;AAAA,0BAgBhFF,KAhBgF,CAQhFQ,UARgF;AAAA,MAQhFA,UARgF,kCAQnEJ,QARmE;AAAA,MAShFK,KATgF,GAgBhFT,KAhBgF,CAShFS,KATgF;AAAA,MAUhFC,IAVgF,GAgBhFV,KAhBgF,CAUhFU,IAVgF;AAAA,MAWhFC,QAXgF,GAgBhFX,KAhBgF,CAWhFW,QAXgF;AAAA,MAYhFhB,KAZgF,GAgBhFK,KAhBgF,CAYhFL,KAZgF;AAAA,MAahFiB,KAbgF,GAgBhFZ,KAhBgF,CAahFY,KAbgF;AAAA,0BAgBhFZ,KAhBgF,CAchFa,UAdgF;AAAA,MAchFA,UAdgF,kCAcnE,EAdmE;AAAA,MAe7EC,cAf6E,4BAgBhFd,KAhBgF;;AAiBpF,MAAMe,OAAO,GAAGC,OAAO,CAAC;AAAA,WAAMV,EAAE,cAAOd,SAAS,CAACyB,WAAV,EAAP,cAAkCC,GAAG,EAArC,CAAR;AAAA,GAAD,EAAoD,CAACZ,EAAD,CAApD,CAAvB;;AAEA,MAAMa,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAgD;AACjE,QAAIT,QAAJ,EAAc;AACVA,MAAAA,QAAQ,CAAC,CAACJ,SAAF,EAAaK,KAAb,EAAoBF,IAApB,EAA0BU,KAA1B,CAAR;AACH;AACJ,GAJD;;AAMA,SACI;AACI,IAAA,GAAG,EAAEnB;AADT,KAEQa,cAFR;AAGI,IAAA,SAAS,EAAEO,UAAU,CACjBlB,SADiB,EAEjBmB,kBAAkB,CAAC;AACff,MAAAA,SAAS,EAATA,SADe;AAEfC,MAAAA,UAAU,EAAVA,UAFe;AAGfe,MAAAA,WAAW,EAAE,CAAChB,SAHC;AAIfiB,MAAAA,MAAM,EAAEhC,SAJO;AAKfG,MAAAA,KAAK,EAALA;AALe,KAAD,CAFD;AAHzB,MAcI;AAAK,IAAA,SAAS,YAAKH,SAAL;AAAd,KACI;AACI,IAAA,IAAI,EAAC,UADT;AAEI,IAAA,EAAE,EAAEuB,OAFR;AAGI,IAAA,SAAS,YAAKvB,SAAL,mBAHb;AAII,IAAA,QAAQ,EAAEgB,UAAU,GAAG,CAAC,CAAJ,GAAQ,CAJhC;AAKI,IAAA,IAAI,EAAEE,IALV;AAMI,IAAA,KAAK,EAAEE,KANX;AAOI,IAAA,OAAO,EAAEL,SAPb;AAQI,IAAA,QAAQ,EAAEY;AARd,KASQN,UATR,EADJ,EAaI;AAAK,IAAA,SAAS,YAAKrB,SAAL;AAAd,KACI;AAAK,IAAA,SAAS,YAAKA,SAAL;AAAd,IADJ,EAGI;AAAK,IAAA,SAAS,YAAKA,SAAL;AAAd,KACI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEiC;AAAZ,IADJ,CAHJ,CAbJ,CAdJ,EAoCI;AAAK,IAAA,SAAS,YAAKjC,SAAL;AAAd,KACKiB,KAAK,IACF,oBAAC,UAAD;AAAY,IAAA,OAAO,EAAEM,OAArB;AAA8B,IAAA,SAAS,YAAKvB,SAAL,YAAvC;AAAgE,IAAA,KAAK,EAAEG;AAAvE,KACKc,KADL,CAFR,EAMKJ,MAAM,IACH,oBAAC,WAAD;AAAa,IAAA,SAAS,YAAKb,SAAL,aAAtB;AAAgD,IAAA,KAAK,EAAEG;AAAvD,KACKU,MADL,CAPR,CApCJ,CADJ;AAmDH,CA5EsE;AA6EvEP,QAAQ,CAAC4B,WAAT,GAAuBnC,cAAvB;AACAO,QAAQ,CAACK,SAAT,GAAqBX,SAArB;AACAM,QAAQ,CAAC6B,YAAT,GAAwBjC,aAAxB;;;;"}
|
package/esm/_internal/Switch2.js
CHANGED
|
@@ -52,7 +52,9 @@ var Switch = forwardRef(function (props, ref) {
|
|
|
52
52
|
position = props.position,
|
|
53
53
|
theme = props.theme,
|
|
54
54
|
value = props.value,
|
|
55
|
-
|
|
55
|
+
_props$inputProps = props.inputProps,
|
|
56
|
+
inputProps = _props$inputProps === void 0 ? {} : _props$inputProps,
|
|
57
|
+
forwardedProps = _objectWithoutProperties(props, ["checked", "children", "className", "disabled", "helper", "id", "isChecked", "isDisabled", "name", "onChange", "position", "theme", "value", "inputProps"]);
|
|
56
58
|
|
|
57
59
|
var switchId = useMemo(function () {
|
|
58
60
|
return id || "switch-".concat(uid());
|
|
@@ -78,7 +80,7 @@ var Switch = forwardRef(function (props, ref) {
|
|
|
78
80
|
"aria-disabled": isDisabled
|
|
79
81
|
}), React.createElement("div", {
|
|
80
82
|
className: "".concat(CLASSNAME, "__input-wrapper")
|
|
81
|
-
}, React.createElement("input", {
|
|
83
|
+
}, React.createElement("input", _extends({
|
|
82
84
|
type: "checkbox",
|
|
83
85
|
role: "switch",
|
|
84
86
|
id: switchId,
|
|
@@ -89,7 +91,7 @@ var Switch = forwardRef(function (props, ref) {
|
|
|
89
91
|
checked: isChecked,
|
|
90
92
|
"aria-checked": Boolean(isChecked),
|
|
91
93
|
onChange: handleChange
|
|
92
|
-
}), React.createElement("div", {
|
|
94
|
+
}, inputProps)), React.createElement("div", {
|
|
93
95
|
className: "".concat(CLASSNAME, "__input-placeholder")
|
|
94
96
|
}, React.createElement("div", {
|
|
95
97
|
className: "".concat(CLASSNAME, "__input-background")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch2.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, { Children, forwardRef, SyntheticEvent, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface SwitchProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Native input name property. */\n name?: string;\n /** Position of the switch relative to the label. */\n position?: Extract<Alignment, 'right' | 'left'>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Switch';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SwitchProps> = {\n position: Alignment.left,\n theme: Theme.light,\n};\n\n/**\n * Switch component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n children,\n className,\n disabled,\n helper,\n id,\n isChecked = checked,\n isDisabled = disabled,\n name,\n onChange,\n position,\n theme,\n value,\n ...forwardedProps\n } = props;\n const switchId = useMemo(() => id || `switch-${uid()}`, [id]);\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isChecked,\n isDisabled,\n position,\n theme,\n isUnchecked: !isChecked,\n }),\n )}\n aria-disabled={isDisabled}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n id={switchId}\n className={`${CLASSNAME}__input-native`}\n name={name}\n value={value}\n disabled={isDisabled}\n checked={isChecked}\n aria-checked={Boolean(isChecked)}\n onChange={handleChange}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n <div className={`${CLASSNAME}__input-indicator`} />\n </div>\n </div>\n\n {Children.count(children) > 0 && (\n <div className={`${CLASSNAME}__content`}>\n <InputLabel htmlFor={switchId} theme={theme} className={`${CLASSNAME}__label`}>\n {children}\n </InputLabel>\n {!isEmpty(helper) && (\n <InputHelper theme={theme} className={`${CLASSNAME}__helper`}>\n {helper}\n </InputHelper>\n )}\n </div>\n )}\n </div>\n );\n});\nSwitch.displayName = COMPONENT_NAME;\nSwitch.className = CLASSNAME;\nSwitch.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","position","Alignment","left","theme","Theme","light","Switch","forwardRef","props","ref","checked","children","className","disabled","helper","id","isChecked","isDisabled","name","onChange","value","forwardedProps","switchId","useMemo","uid","handleChange","event","classNames","handleBasicClasses","prefix","isUnchecked","Boolean","Children","count","isEmpty","displayName","defaultProps"],"mappings":";;;;;;;;;AAWA;;;;
|
|
1
|
+
{"version":3,"file":"Switch2.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent, useMemo } from 'react';\n\nimport classNames from 'classnames';\nimport { uid } from 'uid';\n\nimport isEmpty from 'lodash/isEmpty';\n\nimport { Alignment, InputHelper, InputLabel, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface SwitchProps extends GenericProps {\n /** Helper text. */\n helper?: string;\n /** Whether it is checked or not. */\n isChecked?: boolean;\n /** Whether the component is disabled or not. */\n isDisabled?: boolean;\n /** Native input name property. */\n name?: string;\n /** Position of the switch relative to the label. */\n position?: Extract<Alignment, 'right' | 'left'>;\n /** Theme adapting the component to light or dark background. */\n theme?: Theme;\n /** Native input value property. */\n value?: string;\n /** On change callback. */\n onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;\n /** optional props for input */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Switch';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<SwitchProps> = {\n position: Alignment.left,\n theme: Theme.light,\n};\n\n/**\n * Switch component.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref) => {\n const {\n checked,\n children,\n className,\n disabled,\n helper,\n id,\n isChecked = checked,\n isDisabled = disabled,\n name,\n onChange,\n position,\n theme,\n value,\n inputProps = {},\n ...forwardedProps\n } = props;\n const switchId = useMemo(() => id || `switch-${uid()}`, [id]);\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(!isChecked, value, name, event);\n }\n };\n\n return (\n <div\n ref={ref}\n {...forwardedProps}\n className={classNames(\n className,\n handleBasicClasses({\n prefix: CLASSNAME,\n isChecked,\n isDisabled,\n position,\n theme,\n isUnchecked: !isChecked,\n }),\n )}\n aria-disabled={isDisabled}\n >\n <div className={`${CLASSNAME}__input-wrapper`}>\n <input\n type=\"checkbox\"\n role=\"switch\"\n id={switchId}\n className={`${CLASSNAME}__input-native`}\n name={name}\n value={value}\n disabled={isDisabled}\n checked={isChecked}\n aria-checked={Boolean(isChecked)}\n onChange={handleChange}\n {...inputProps}\n />\n\n <div className={`${CLASSNAME}__input-placeholder`}>\n <div className={`${CLASSNAME}__input-background`} />\n <div className={`${CLASSNAME}__input-indicator`} />\n </div>\n </div>\n\n {Children.count(children) > 0 && (\n <div className={`${CLASSNAME}__content`}>\n <InputLabel htmlFor={switchId} theme={theme} className={`${CLASSNAME}__label`}>\n {children}\n </InputLabel>\n {!isEmpty(helper) && (\n <InputHelper theme={theme} className={`${CLASSNAME}__helper`}>\n {helper}\n </InputHelper>\n )}\n </div>\n )}\n </div>\n );\n});\nSwitch.displayName = COMPONENT_NAME;\nSwitch.className = CLASSNAME;\nSwitch.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","position","Alignment","left","theme","Theme","light","Switch","forwardRef","props","ref","checked","children","className","disabled","helper","id","isChecked","isDisabled","name","onChange","value","inputProps","forwardedProps","switchId","useMemo","uid","handleChange","event","classNames","handleBasicClasses","prefix","isUnchecked","Boolean","Children","count","isEmpty","displayName","defaultProps"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@juggle/resize-observer": "^3.2.0",
|
|
10
|
-
"@lumx/core": "^2.2.
|
|
11
|
-
"@lumx/icons": "^2.2.
|
|
10
|
+
"@lumx/core": "^2.2.3",
|
|
11
|
+
"@lumx/icons": "^2.2.3",
|
|
12
12
|
"@popperjs/core": "^2.5.4",
|
|
13
13
|
"body-scroll-lock": "^3.1.5",
|
|
14
14
|
"classnames": "^2.2.6",
|
|
@@ -120,6 +120,6 @@
|
|
|
120
120
|
"build:storybook": "cd storybook && ./build"
|
|
121
121
|
},
|
|
122
122
|
"sideEffects": false,
|
|
123
|
-
"version": "2.2.
|
|
124
|
-
"gitHead": "
|
|
123
|
+
"version": "2.2.3",
|
|
124
|
+
"gitHead": "ac62f8ec49f1d9eb677950b4c934c55cec3c8870"
|
|
125
125
|
}
|
|
@@ -64,6 +64,20 @@ describe(`<${Checkbox.displayName}>`, () => {
|
|
|
64
64
|
expect(label).toExist();
|
|
65
65
|
expect(wrapper).toMatchSnapshot();
|
|
66
66
|
});
|
|
67
|
+
|
|
68
|
+
it('should use the given props while passing custom props to input', () => {
|
|
69
|
+
const { helper, label, wrapper } = setup({
|
|
70
|
+
helper: 'Test helper',
|
|
71
|
+
label: 'Test label',
|
|
72
|
+
inputProps: {
|
|
73
|
+
'aria-labelledby': 'labelledby-id',
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
expect(helper).toExist();
|
|
78
|
+
expect(label).toExist();
|
|
79
|
+
expect(wrapper).toMatchSnapshot();
|
|
80
|
+
});
|
|
67
81
|
});
|
|
68
82
|
|
|
69
83
|
// 3. Test events.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useMemo, forwardRef, ReactNode, SyntheticEvent } from 'react';
|
|
1
|
+
import React, { useMemo, forwardRef, ReactNode, SyntheticEvent, InputHTMLAttributes } from 'react';
|
|
2
2
|
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { uid } from 'uid';
|
|
@@ -30,6 +30,8 @@ export interface CheckboxProps extends GenericProps {
|
|
|
30
30
|
value?: string;
|
|
31
31
|
/** On change callback. */
|
|
32
32
|
onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
|
|
33
|
+
/** optional props for input */
|
|
34
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
33
35
|
}
|
|
34
36
|
|
|
35
37
|
/**
|
|
@@ -70,6 +72,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
|
|
|
70
72
|
onChange,
|
|
71
73
|
theme,
|
|
72
74
|
value,
|
|
75
|
+
inputProps = {},
|
|
73
76
|
...forwardedProps
|
|
74
77
|
} = props;
|
|
75
78
|
const inputId = useMemo(() => id || `${CLASSNAME.toLowerCase()}-${uid()}`, [id]);
|
|
@@ -105,6 +108,7 @@ export const Checkbox: Comp<CheckboxProps, HTMLDivElement> = forwardRef((props,
|
|
|
105
108
|
value={value}
|
|
106
109
|
checked={isChecked}
|
|
107
110
|
onChange={handleChange}
|
|
111
|
+
{...inputProps}
|
|
108
112
|
/>
|
|
109
113
|
|
|
110
114
|
<div className={`${CLASSNAME}__input-placeholder`}>
|
|
@@ -50,6 +50,57 @@ exports[`<Checkbox> Props should use the given props 1`] = `
|
|
|
50
50
|
</div>
|
|
51
51
|
`;
|
|
52
52
|
|
|
53
|
+
exports[`<Checkbox> Props should use the given props while passing custom props to input 1`] = `
|
|
54
|
+
<div
|
|
55
|
+
className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
|
|
56
|
+
>
|
|
57
|
+
<div
|
|
58
|
+
className="lumx-checkbox__input-wrapper"
|
|
59
|
+
>
|
|
60
|
+
<input
|
|
61
|
+
aria-labelledby="labelledby-id"
|
|
62
|
+
className="lumx-checkbox__input-native"
|
|
63
|
+
id="fixedId"
|
|
64
|
+
onChange={[Function]}
|
|
65
|
+
tabIndex={0}
|
|
66
|
+
type="checkbox"
|
|
67
|
+
/>
|
|
68
|
+
<div
|
|
69
|
+
className="lumx-checkbox__input-placeholder"
|
|
70
|
+
>
|
|
71
|
+
<div
|
|
72
|
+
className="lumx-checkbox__input-background"
|
|
73
|
+
/>
|
|
74
|
+
<div
|
|
75
|
+
className="lumx-checkbox__input-indicator"
|
|
76
|
+
>
|
|
77
|
+
<Icon
|
|
78
|
+
icon="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
|
|
79
|
+
/>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
<div
|
|
84
|
+
className="lumx-checkbox__content"
|
|
85
|
+
>
|
|
86
|
+
<InputLabel
|
|
87
|
+
className="lumx-checkbox__label"
|
|
88
|
+
htmlFor="fixedId"
|
|
89
|
+
theme="light"
|
|
90
|
+
>
|
|
91
|
+
Test label
|
|
92
|
+
</InputLabel>
|
|
93
|
+
<InputHelper
|
|
94
|
+
className="lumx-checkbox__helper"
|
|
95
|
+
kind="info"
|
|
96
|
+
theme="light"
|
|
97
|
+
>
|
|
98
|
+
Test helper
|
|
99
|
+
</InputHelper>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
`;
|
|
103
|
+
|
|
53
104
|
exports[`<Checkbox> Snapshots and structure should render correctly 1`] = `
|
|
54
105
|
<div
|
|
55
106
|
className="lumx-checkbox lumx-checkbox--is-unchecked lumx-checkbox--theme-light"
|
|
@@ -142,6 +142,16 @@ describe(`<${Switch.displayName}>`, () => {
|
|
|
142
142
|
}
|
|
143
143
|
});
|
|
144
144
|
});
|
|
145
|
+
|
|
146
|
+
it('should use the given props while passing custom props to input', () => {
|
|
147
|
+
const { wrapper } = setup({
|
|
148
|
+
inputProps: {
|
|
149
|
+
'aria-labelledby': 'labelledby-id',
|
|
150
|
+
},
|
|
151
|
+
});
|
|
152
|
+
|
|
153
|
+
expect(wrapper).toMatchSnapshot();
|
|
154
|
+
});
|
|
145
155
|
});
|
|
146
156
|
|
|
147
157
|
// 3. Test events.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { Children, forwardRef, SyntheticEvent, useMemo } from 'react';
|
|
1
|
+
import React, { Children, forwardRef, InputHTMLAttributes, SyntheticEvent, useMemo } from 'react';
|
|
2
2
|
|
|
3
3
|
import classNames from 'classnames';
|
|
4
4
|
import { uid } from 'uid';
|
|
@@ -29,6 +29,8 @@ export interface SwitchProps extends GenericProps {
|
|
|
29
29
|
value?: string;
|
|
30
30
|
/** On change callback. */
|
|
31
31
|
onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
|
|
32
|
+
/** optional props for input */
|
|
33
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
32
34
|
}
|
|
33
35
|
|
|
34
36
|
/**
|
|
@@ -71,6 +73,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
|
|
|
71
73
|
position,
|
|
72
74
|
theme,
|
|
73
75
|
value,
|
|
76
|
+
inputProps = {},
|
|
74
77
|
...forwardedProps
|
|
75
78
|
} = props;
|
|
76
79
|
const switchId = useMemo(() => id || `switch-${uid()}`, [id]);
|
|
@@ -109,6 +112,7 @@ export const Switch: Comp<SwitchProps, HTMLDivElement> = forwardRef((props, ref)
|
|
|
109
112
|
checked={isChecked}
|
|
110
113
|
aria-checked={Boolean(isChecked)}
|
|
111
114
|
onChange={handleChange}
|
|
115
|
+
{...inputProps}
|
|
112
116
|
/>
|
|
113
117
|
|
|
114
118
|
<div className={`${CLASSNAME}__input-placeholder`}>
|
|
@@ -29,6 +29,36 @@ exports[`<Switch> Conditions should not display the \`helper\` if no \`label\` i
|
|
|
29
29
|
</div>
|
|
30
30
|
`;
|
|
31
31
|
|
|
32
|
+
exports[`<Switch> Props should use the given props while passing custom props to input 1`] = `
|
|
33
|
+
<div
|
|
34
|
+
className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"
|
|
35
|
+
>
|
|
36
|
+
<div
|
|
37
|
+
className="lumx-switch__input-wrapper"
|
|
38
|
+
>
|
|
39
|
+
<input
|
|
40
|
+
aria-checked={false}
|
|
41
|
+
aria-labelledby="labelledby-id"
|
|
42
|
+
className="lumx-switch__input-native"
|
|
43
|
+
id="switch-uid"
|
|
44
|
+
onChange={[Function]}
|
|
45
|
+
role="switch"
|
|
46
|
+
type="checkbox"
|
|
47
|
+
/>
|
|
48
|
+
<div
|
|
49
|
+
className="lumx-switch__input-placeholder"
|
|
50
|
+
>
|
|
51
|
+
<div
|
|
52
|
+
className="lumx-switch__input-background"
|
|
53
|
+
/>
|
|
54
|
+
<div
|
|
55
|
+
className="lumx-switch__input-indicator"
|
|
56
|
+
/>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
`;
|
|
61
|
+
|
|
32
62
|
exports[`<Switch> Snapshots and structure should render correctly with a \`label\` and a \`helper\` 1`] = `
|
|
33
63
|
<div
|
|
34
64
|
className="lumx-switch lumx-switch--position-left lumx-switch--theme-light lumx-switch--is-unchecked"
|
package/types.d.ts
CHANGED
|
@@ -599,6 +599,8 @@ export interface CheckboxProps extends GenericProps {
|
|
|
599
599
|
value?: string;
|
|
600
600
|
/** On change callback. */
|
|
601
601
|
onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
|
|
602
|
+
/** optional props for input */
|
|
603
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
602
604
|
}
|
|
603
605
|
/**
|
|
604
606
|
* Checkbox component.
|
|
@@ -2167,6 +2169,8 @@ export interface SwitchProps extends GenericProps {
|
|
|
2167
2169
|
value?: string;
|
|
2168
2170
|
/** On change callback. */
|
|
2169
2171
|
onChange?(isChecked: boolean, value?: string, name?: string, event?: SyntheticEvent): void;
|
|
2172
|
+
/** optional props for input */
|
|
2173
|
+
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
2170
2174
|
}
|
|
2171
2175
|
/**
|
|
2172
2176
|
* Switch component.
|