@simplybusiness/mobius 4.4.3 → 4.4.5
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/CHANGELOG.md +16 -0
- package/dist/cjs/components/Flex/Flex.js +8 -5
- package/dist/cjs/components/Flex/Flex.js.map +1 -1
- package/dist/cjs/components/Radio/Radio.js +7 -1
- package/dist/cjs/components/Radio/Radio.js.map +1 -1
- package/dist/cjs/tsconfig.tsbuildinfo +1 -1
- package/dist/esm/components/Flex/Flex.js +8 -5
- package/dist/esm/components/Flex/Flex.js.map +1 -1
- package/dist/esm/components/Radio/Radio.js +7 -1
- package/dist/esm/components/Radio/Radio.js.map +1 -1
- package/package.json +3 -2
- package/src/components/Drawer/Drawer.mdx +3 -0
- package/src/components/Flex/Flex.test.tsx +15 -0
- package/src/components/Flex/Flex.tsx +12 -4
- package/src/components/Modal/Modal.mdx +3 -0
- package/src/components/Radio/Radio.test.tsx +35 -0
- package/src/components/Radio/Radio.tsx +11 -0
- package/src/utils/jestHTMLDialogPolyfillTestingDocs.mdx +31 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 4.4.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- f2616fd: - Fix `<Flex>` flex props being overwritten by style attribute
|
|
8
|
+
- Fix `<Radio>` additional props not propagating
|
|
9
|
+
- Fix `<Radio>` style when checked and with keyboard focus
|
|
10
|
+
- Add testing docs for `<Modal>` and `<Drawer>`
|
|
11
|
+
|
|
12
|
+
## 4.4.4
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies [d1fb294]
|
|
17
|
+
- @simplybusiness/icons@4.3.0
|
|
18
|
+
|
|
3
19
|
## 4.4.3
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -18,15 +18,18 @@ function _interop_require_default(obj) {
|
|
|
18
18
|
};
|
|
19
19
|
}
|
|
20
20
|
const Flex = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
21
|
-
const { elementType: Element = "div", ...otherProps } = props;
|
|
22
|
-
const classes = (0, _dedupe.default)("mobius", "mobius/Flex",
|
|
21
|
+
const { elementType: Element = "div", style, className, ...otherProps } = props;
|
|
22
|
+
const classes = (0, _dedupe.default)("mobius", "mobius/Flex", className);
|
|
23
23
|
const [styleProps, restProps] = (0, _propUtils.splitProps)(otherProps);
|
|
24
24
|
const flexStyles = (0, _propUtils.buildFlexStyles)(styleProps);
|
|
25
25
|
return /*#__PURE__*/ (0, _jsxruntime.jsx)(Element, {
|
|
26
26
|
ref: ref,
|
|
27
|
-
style:
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
style: {
|
|
28
|
+
...flexStyles,
|
|
29
|
+
...style
|
|
30
|
+
},
|
|
31
|
+
className: classes,
|
|
32
|
+
...restProps
|
|
30
33
|
});
|
|
31
34
|
});
|
|
32
35
|
Flex.displayName = "Flex";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { FlexElementType, FlexProps, FlexRef } from \"./types\";\nimport { buildFlexStyles, splitProps } from \"./propUtils\";\n\nconst Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(\n (props: FlexProps, ref: FlexRef) => {\n const {
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { FlexElementType, FlexProps, FlexRef } from \"./types\";\nimport { buildFlexStyles, splitProps } from \"./propUtils\";\n\nconst Flex: ForwardedRefComponent<FlexProps, FlexElementType> = forwardRef(\n (props: FlexProps, ref: FlexRef) => {\n const {\n elementType: Element = \"div\",\n style,\n className,\n ...otherProps\n } = props;\n const classes = classNames(\"mobius\", \"mobius/Flex\", className);\n\n const [styleProps, restProps] = splitProps(otherProps);\n const flexStyles = buildFlexStyles(styleProps);\n\n return (\n <Element\n ref={ref}\n style={{\n ...flexStyles,\n ...style,\n }}\n className={classes}\n {...restProps}\n />\n );\n },\n);\n\nFlex.displayName = \"Flex\";\nexport { Flex };\n"],"names":["Flex","forwardRef","props","ref","elementType","Element","style","className","otherProps","classes","classNames","styleProps","restProps","splitProps","flexStyles","buildFlexStyles","displayName"],"mappings":";;;;+BAkCSA;;;eAAAA;;;;uBAlCkB;+DACJ;2BAGqB;;;;;;AAE5C,MAAMA,qBAA0DC,IAAAA,iBAAU,EACxE,CAACC,OAAkBC;IACjB,MAAM,EACJC,aAAaC,UAAU,KAAK,EAC5BC,KAAK,EACLC,SAAS,EACT,GAAGC,YACJ,GAAGN;IACJ,MAAMO,UAAUC,IAAAA,eAAU,EAAC,UAAU,eAAeH;IAEpD,MAAM,CAACI,YAAYC,UAAU,GAAGC,IAAAA,qBAAU,EAACL;IAC3C,MAAMM,aAAaC,IAAAA,0BAAe,EAACJ;IAEnC,qBACE,qBAACN;QACCF,KAAKA;QACLG,OAAO;YACL,GAAGQ,UAAU;YACb,GAAGR,KAAK;QACV;QACAC,WAAWE;QACV,GAAGG,SAAS;;AAGnB;AAGFZ,KAAKgB,WAAW,GAAG"}
|
|
@@ -40,6 +40,11 @@ const Radio = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
40
40
|
setSelected(event.currentTarget.value);
|
|
41
41
|
}
|
|
42
42
|
};
|
|
43
|
+
// Exlucde props that are passed via cloneElement in `<RadioGroup />`
|
|
44
|
+
const { // @ts-ignore
|
|
45
|
+
// eslint-disable-next-line
|
|
46
|
+
orientation, // eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
47
|
+
"aria-describedby": _ariaDescribedBy, ...rest } = otherProps;
|
|
43
48
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
|
|
44
49
|
children: [
|
|
45
50
|
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_Label.Label, {
|
|
@@ -56,7 +61,8 @@ const Radio = /*#__PURE__*/ (0, _react.forwardRef)((props, ref)=>{
|
|
|
56
61
|
type: "radio",
|
|
57
62
|
defaultChecked: isDefaultSelected,
|
|
58
63
|
name: name,
|
|
59
|
-
required: isRequired
|
|
64
|
+
required: isRequired,
|
|
65
|
+
...rest
|
|
60
66
|
}),
|
|
61
67
|
isMultiline ? /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
|
|
62
68
|
className: "mobius/RadioContentMultiline",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { MouseEvent, ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type RadioElementType = HTMLInputElement;\n\nexport type AriaRadioProps = {\n /**\n * Defines a string value that labels the current element.\n */\n \"aria-label\"?: string;\n /**\n * Identifies the element (or elements) that labels the current element.\n */\n \"aria-labelledby\"?: string;\n /**\n * Identifies the element (or elements) that describes the object.\n */\n \"aria-describedby\"?: string;\n /**\n * Identifies the element (or elements) that provide a detailed, extended description for the object.\n */\n \"aria-details\"?: string;\n};\n\nexport interface RadioProps\n extends DOMProps,\n AriaRadioProps,\n RefAttributes<RadioElementType> {\n children?: ReactNode;\n className?: string;\n label?: ReactNode;\n errorMessage?: string;\n value: string;\n isDisabled?: boolean;\n onChange?: (event: HTMLElementEvent<RadioElementType>) => void;\n defaultChecked?: boolean;\n /**\n * **Internal:** Do not use\n */\n groupDisabled?: boolean;\n /**\n * **Internal:** Do not use\n */\n name?: string;\n /**\n * **Internal:** Do not use\n */\n selected?: string;\n /**\n * **Internal:** Do not use\n */\n setSelected?: React.Dispatch<React.SetStateAction<string>>;\n isRequired?: boolean;\n}\n\nexport type RadioRef = Ref<RadioElementType>;\n\nconst Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(\n (props: RadioProps, ref: RadioRef) => {\n const {\n children,\n value,\n label,\n className,\n isDisabled,\n errorMessage,\n onChange,\n defaultChecked,\n groupDisabled,\n name,\n selected,\n setSelected,\n isRequired,\n ...otherProps\n } = props;\n const realDisabled = groupDisabled || isDisabled;\n const isMultiline = label && children;\n const isDefaultSelected = selected === value || defaultChecked;\n const radioClasses = {\n \"--is-disabled\": realDisabled,\n \"--is-selected\": selected === value,\n \"--is-multiline\": !!isMultiline,\n \"--is-required\": isRequired,\n };\n const containerClasses = classNames(\n \"mobius/RadioLabel\",\n radioClasses,\n className,\n );\n const inputClasses = classNames(\"mobius/RadioInput\", radioClasses);\n\n const handleClick = (event: MouseEvent<RadioElementType>) => {\n if (onChange) {\n onChange(event as unknown as HTMLElementEvent<RadioElementType>);\n }\n if (setSelected) {\n setSelected(event.currentTarget.value);\n }\n };\n\n return (\n <>\n <Label className={containerClasses}>\n <input\n aria-describedby={otherProps[\"aria-describedby\"]}\n disabled={realDisabled}\n ref={ref}\n className={inputClasses}\n onClick={handleClick}\n value={value}\n tabIndex={0}\n type=\"radio\"\n defaultChecked={isDefaultSelected}\n name={name}\n required={isRequired}\n />\n {isMultiline ? (\n <div className=\"mobius/RadioContentMultiline\">\n <div className=\"mobius/RadioContentFirstLine\">{label}</div>\n <div className=\"mobius/RadioExtraContent\">{children}</div>\n </div>\n ) : (\n <div className=\"mobius/RadioContent\">{label || children}</div>\n )}\n </Label>\n {errorMessage && <ErrorMessage errorMessage={errorMessage} />}\n </>\n );\n },\n);\n\nRadio.displayName = \"Radio\";\nexport { Radio };\n"],"names":["Radio","forwardRef","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","classNames","inputClasses","handleClick","event","currentTarget","Label","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","ErrorMessage","displayName"],"mappings":"AAAA;;;;;+
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["\"use client\";\n\nimport classNames from \"classnames/dedupe\";\nimport { MouseEvent, ReactNode, Ref, RefAttributes, forwardRef } from \"react\";\nimport { ForwardedRefComponent } from \"../../types/components\";\nimport { DOMProps } from \"../../types/dom\";\nimport { HTMLElementEvent } from \"../../types/events\";\nimport { ErrorMessage } from \"../ErrorMessage\";\nimport { Label } from \"../Label\";\n\nexport type RadioElementType = HTMLInputElement;\n\nexport type AriaRadioProps = {\n /**\n * Defines a string value that labels the current element.\n */\n \"aria-label\"?: string;\n /**\n * Identifies the element (or elements) that labels the current element.\n */\n \"aria-labelledby\"?: string;\n /**\n * Identifies the element (or elements) that describes the object.\n */\n \"aria-describedby\"?: string;\n /**\n * Identifies the element (or elements) that provide a detailed, extended description for the object.\n */\n \"aria-details\"?: string;\n};\n\nexport interface RadioProps\n extends DOMProps,\n AriaRadioProps,\n RefAttributes<RadioElementType> {\n children?: ReactNode;\n className?: string;\n label?: ReactNode;\n errorMessage?: string;\n value: string;\n isDisabled?: boolean;\n onChange?: (event: HTMLElementEvent<RadioElementType>) => void;\n defaultChecked?: boolean;\n /**\n * **Internal:** Do not use\n */\n groupDisabled?: boolean;\n /**\n * **Internal:** Do not use\n */\n name?: string;\n /**\n * **Internal:** Do not use\n */\n selected?: string;\n /**\n * **Internal:** Do not use\n */\n setSelected?: React.Dispatch<React.SetStateAction<string>>;\n isRequired?: boolean;\n}\n\nexport type RadioRef = Ref<RadioElementType>;\n\nconst Radio: ForwardedRefComponent<RadioProps, RadioElementType> = forwardRef(\n (props: RadioProps, ref: RadioRef) => {\n const {\n children,\n value,\n label,\n className,\n isDisabled,\n errorMessage,\n onChange,\n defaultChecked,\n groupDisabled,\n name,\n selected,\n setSelected,\n isRequired,\n ...otherProps\n } = props;\n const realDisabled = groupDisabled || isDisabled;\n const isMultiline = label && children;\n const isDefaultSelected = selected === value || defaultChecked;\n const radioClasses = {\n \"--is-disabled\": realDisabled,\n \"--is-selected\": selected === value,\n \"--is-multiline\": !!isMultiline,\n \"--is-required\": isRequired,\n };\n const containerClasses = classNames(\n \"mobius/RadioLabel\",\n radioClasses,\n className,\n );\n const inputClasses = classNames(\"mobius/RadioInput\", radioClasses);\n\n const handleClick = (event: MouseEvent<RadioElementType>) => {\n if (onChange) {\n onChange(event as unknown as HTMLElementEvent<RadioElementType>);\n }\n if (setSelected) {\n setSelected(event.currentTarget.value);\n }\n };\n\n // Exlucde props that are passed via cloneElement in `<RadioGroup />`\n const {\n // @ts-ignore\n // eslint-disable-next-line\n orientation,\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n \"aria-describedby\": _ariaDescribedBy,\n ...rest\n } = otherProps;\n\n return (\n <>\n <Label className={containerClasses}>\n <input\n aria-describedby={otherProps[\"aria-describedby\"]}\n disabled={realDisabled}\n ref={ref}\n className={inputClasses}\n onClick={handleClick}\n value={value}\n tabIndex={0}\n type=\"radio\"\n defaultChecked={isDefaultSelected}\n name={name}\n required={isRequired}\n {...rest}\n />\n {isMultiline ? (\n <div className=\"mobius/RadioContentMultiline\">\n <div className=\"mobius/RadioContentFirstLine\">{label}</div>\n <div className=\"mobius/RadioExtraContent\">{children}</div>\n </div>\n ) : (\n <div className=\"mobius/RadioContent\">{label || children}</div>\n )}\n </Label>\n {errorMessage && <ErrorMessage errorMessage={errorMessage} />}\n </>\n );\n },\n);\n\nRadio.displayName = \"Radio\";\nexport { Radio };\n"],"names":["Radio","forwardRef","props","ref","children","value","label","className","isDisabled","errorMessage","onChange","defaultChecked","groupDisabled","name","selected","setSelected","isRequired","otherProps","realDisabled","isMultiline","isDefaultSelected","radioClasses","containerClasses","classNames","inputClasses","handleClick","event","currentTarget","orientation","_ariaDescribedBy","rest","Label","input","aria-describedby","disabled","onClick","tabIndex","type","required","div","ErrorMessage","displayName"],"mappings":"AAAA;;;;;+BAsJSA;;;eAAAA;;;;+DApJc;uBAC+C;8BAIzC;uBACP;;;;;;AAwDtB,MAAMA,sBAA6DC,IAAAA,iBAAU,EAC3E,CAACC,OAAmBC;IAClB,MAAM,EACJC,QAAQ,EACRC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,UAAU,EACVC,YAAY,EACZC,QAAQ,EACRC,cAAc,EACdC,aAAa,EACbC,IAAI,EACJC,QAAQ,EACRC,WAAW,EACXC,UAAU,EACV,GAAGC,YACJ,GAAGf;IACJ,MAAMgB,eAAeN,iBAAiBJ;IACtC,MAAMW,cAAcb,SAASF;IAC7B,MAAMgB,oBAAoBN,aAAaT,SAASM;IAChD,MAAMU,eAAe;QACnB,iBAAiBH;QACjB,iBAAiBJ,aAAaT;QAC9B,kBAAkB,CAAC,CAACc;QACpB,iBAAiBH;IACnB;IACA,MAAMM,mBAAmBC,IAAAA,eAAU,EACjC,qBACAF,cACAd;IAEF,MAAMiB,eAAeD,IAAAA,eAAU,EAAC,qBAAqBF;IAErD,MAAMI,cAAc,CAACC;QACnB,IAAIhB,UAAU;YACZA,SAASgB;QACX;QACA,IAAIX,aAAa;YACfA,YAAYW,MAAMC,aAAa,CAACtB,KAAK;QACvC;IACF;IAEA,qEAAqE;IACrE,MAAM,EACJ,aAAa;IACb,2BAA2B;IAC3BuB,WAAW,EACX,6DAA6D;IAC7D,oBAAoBC,gBAAgB,EACpC,GAAGC,MACJ,GAAGb;IAEJ,qBACE;;0BACE,sBAACc,YAAK;gBAACxB,WAAWe;;kCAChB,qBAACU;wBACCC,oBAAkBhB,UAAU,CAAC,mBAAmB;wBAChDiB,UAAUhB;wBACVf,KAAKA;wBACLI,WAAWiB;wBACXW,SAASV;wBACTpB,OAAOA;wBACP+B,UAAU;wBACVC,MAAK;wBACL1B,gBAAgBS;wBAChBP,MAAMA;wBACNyB,UAAUtB;wBACT,GAAGc,IAAI;;oBAETX,4BACC,sBAACoB;wBAAIhC,WAAU;;0CACb,qBAACgC;gCAAIhC,WAAU;0CAAgCD;;0CAC/C,qBAACiC;gCAAIhC,WAAU;0CAA4BH;;;uCAG7C,qBAACmC;wBAAIhC,WAAU;kCAAuBD,SAASF;;;;YAGlDK,8BAAgB,qBAAC+B,0BAAY;gBAAC/B,cAAcA;;;;AAGnD;AAGFT,MAAMyC,WAAW,GAAG"}
|