@mirai/ui 2.0.39 → 2.0.41
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/README.md +1 -1
- package/build/primitives/Layer/helpers/getLayerPosition.js +1 -1
- package/build/primitives/Layer/helpers/getLayerPosition.js.map +1 -1
- package/build/primitives/Radio/Radio.stories.js +5 -2
- package/build/primitives/Radio/Radio.stories.js.map +1 -1
- package/build/theme/default.theme.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -47,7 +47,7 @@ const MyComponent = () => (
|
|
|
47
47
|
--mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
|
|
48
48
|
--mirai-ui-checkbox-checked: var(--mirai-ui-accent);
|
|
49
49
|
--mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
|
|
50
|
-
--mirai-ui-checkbox-size: calc(var(--mirai-ui-space-M) +
|
|
50
|
+
--mirai-ui-checkbox-size: calc(var(--mirai-ui-space-M) + var(--mirai-ui-space-XXS));
|
|
51
51
|
--mirai-ui-checkbox-size-mobile: var(--mirai-ui-space-L);
|
|
52
52
|
```
|
|
53
53
|
|
|
@@ -59,7 +59,7 @@ var getLayerPosition = function getLayerPosition() {
|
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
61
|
var left = componentLeft;
|
|
62
|
-
var gapLeft =
|
|
62
|
+
var gapLeft = screenLeft + componentWidth;
|
|
63
63
|
var gapRight = width - offsetLeft;
|
|
64
64
|
if (contentWidth > gapRight && gapLeft > gapRight && !forceLeft || forceRight) {
|
|
65
65
|
left = componentLeft - contentWidth + componentWidth;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getLayerPosition.js","names":["getLayerPosition","componentLayout","contentLayout","device","modal","centered","forceBottom","forceLeft","forceRight","forceTop","left","componentLeft","scrollTop","top","componentTop","width","componentWidth","height","componentHeight","screenLeft","screenTop","contentWidth","contentHeight","aline","offsetLeft","offsetTop","orientation","gapBottom","gapLeft","gapRight","undefined","right","gapCenter","space","center"],"sources":["../../../../src/primitives/Layer/helpers/getLayerPosition.js"],"sourcesContent":["export const getLayerPosition = (\n componentLayout = {},\n contentLayout = {},\n device = {},\n modal,\n { centered, forceBottom, forceLeft, forceRight, forceTop } = {},\n) => {\n const {\n left: componentLeft = 0,\n scrollTop = 0,\n top: componentTop = 0,\n width: componentWidth = 0,\n height: componentHeight = 0,\n screenLeft = componentLeft || 0,\n screenTop = componentTop || 0,\n } = componentLayout;\n const { width: contentWidth = 0, height: contentHeight = 0 } = contentLayout;\n const { height = 0, width = 0 } = modal || device;\n const aline = centered && (forceLeft || forceRight);\n const offsetLeft = modal ? componentLeft : screenLeft;\n const offsetTop = modal ? componentTop : screenTop;\n let orientation = { left: true };\n\n let top = componentTop + componentHeight - scrollTop;\n const gapBottom = height - (offsetTop + componentHeight);\n if ((contentHeight > gapBottom && offsetTop > gapBottom && !forceBottom) || forceTop) {\n top = componentTop - contentHeight - scrollTop;\n orientation = { ...orientation, top: true };\n }\n\n let left = componentLeft;\n const gapLeft =
|
|
1
|
+
{"version":3,"file":"getLayerPosition.js","names":["getLayerPosition","componentLayout","contentLayout","device","modal","centered","forceBottom","forceLeft","forceRight","forceTop","left","componentLeft","scrollTop","top","componentTop","width","componentWidth","height","componentHeight","screenLeft","screenTop","contentWidth","contentHeight","aline","offsetLeft","offsetTop","orientation","gapBottom","gapLeft","gapRight","undefined","right","gapCenter","space","center"],"sources":["../../../../src/primitives/Layer/helpers/getLayerPosition.js"],"sourcesContent":["export const getLayerPosition = (\n componentLayout = {},\n contentLayout = {},\n device = {},\n modal,\n { centered, forceBottom, forceLeft, forceRight, forceTop } = {},\n) => {\n const {\n left: componentLeft = 0,\n scrollTop = 0,\n top: componentTop = 0,\n width: componentWidth = 0,\n height: componentHeight = 0,\n screenLeft = componentLeft || 0,\n screenTop = componentTop || 0,\n } = componentLayout;\n const { width: contentWidth = 0, height: contentHeight = 0 } = contentLayout;\n const { height = 0, width = 0 } = modal || device;\n const aline = centered && (forceLeft || forceRight);\n const offsetLeft = modal ? componentLeft : screenLeft;\n const offsetTop = modal ? componentTop : screenTop;\n let orientation = { left: true };\n\n let top = componentTop + componentHeight - scrollTop;\n const gapBottom = height - (offsetTop + componentHeight);\n if ((contentHeight > gapBottom && offsetTop > gapBottom && !forceBottom) || forceTop) {\n top = componentTop - contentHeight - scrollTop;\n orientation = { ...orientation, top: true };\n }\n\n let left = componentLeft;\n const gapLeft = screenLeft + componentWidth;\n const gapRight = width - offsetLeft;\n if ((contentWidth > gapRight && gapLeft > gapRight && !forceLeft) || forceRight) {\n left = componentLeft - contentWidth + componentWidth;\n orientation = { ...orientation, left: undefined, right: true };\n }\n\n if (aline) {\n orientation = { ...orientation, left: forceLeft, right: forceRight, top: undefined };\n if (forceLeft && contentWidth > gapLeft && gapRight > gapLeft)\n orientation = { ...orientation, left: undefined, right: true };\n else if (forceRight && contentWidth > gapRight && gapLeft > gapRight)\n orientation = { ...orientation, left: true, right: undefined };\n\n left = orientation.left ? componentLeft - contentWidth : componentLeft + componentWidth;\n top = componentTop - (contentHeight - componentHeight) / 2 - scrollTop;\n } else if (centered) {\n const gapCenter = (componentWidth + contentWidth) / 2;\n const space = (contentWidth - componentWidth) / 2;\n orientation = { ...orientation, left: true, right: undefined };\n\n if (gapLeft > gapRight) {\n left = componentLeft - contentWidth + componentWidth;\n orientation = { ...orientation, left: undefined, right: true };\n }\n if (gapLeft > gapCenter && gapRight > gapCenter) {\n left += space * (gapLeft > gapRight ? 1 : -1);\n orientation = { ...orientation, left: undefined, right: undefined, center: true };\n }\n }\n\n return { left, top, orientation };\n};\n"],"mappings":"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"}
|
|
@@ -33,10 +33,13 @@ var Story = function Story(props) {
|
|
|
33
33
|
(_console = console).log.apply(_console, ['<Radio>::onChange', next].concat(others));
|
|
34
34
|
setChecked(!checked);
|
|
35
35
|
};
|
|
36
|
-
return /*#__PURE__*/_react.default.createElement(_Radio.Radio, _extends({}, props, {
|
|
36
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Radio.Radio, _extends({}, props, {
|
|
37
37
|
checked: checked,
|
|
38
38
|
onChange: handleChange
|
|
39
|
-
}))
|
|
39
|
+
})), /*#__PURE__*/_react.default.createElement(_Radio.Radio, _extends({}, props, {
|
|
40
|
+
checked: !checked,
|
|
41
|
+
onChange: handleChange
|
|
42
|
+
})));
|
|
40
43
|
};
|
|
41
44
|
exports.Story = Story;
|
|
42
45
|
Story.storyName = 'Radio';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","children","disabled","name","value","testId","style","argTypes"],"sources":["../../../src/primitives/Radio/Radio.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Radio } from './Radio';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n const [checked, setChecked] = useState(false);\n\n const handleChange = (next, ...others) => {\n console.log('<Radio>::onChange', next, ...others);\n setChecked(!checked);\n };\n\n return <Radio {...props} checked={checked} onChange={handleChange}
|
|
1
|
+
{"version":3,"file":"Radio.stories.js","names":["title","Story","props","useState","checked","setChecked","handleChange","next","others","console","log","storyName","args","children","disabled","name","value","testId","style","argTypes"],"sources":["../../../src/primitives/Radio/Radio.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Radio } from './Radio';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => {\n const [checked, setChecked] = useState(false);\n\n const handleChange = (next, ...others) => {\n console.log('<Radio>::onChange', next, ...others);\n setChecked(!checked);\n };\n\n return (\n <>\n <Radio {...props} checked={checked} onChange={handleChange} />\n <Radio {...props} checked={!checked} onChange={handleChange} />\n </>\n );\n};\n\nStory.storyName = 'Radio';\n\nStory.args = {\n children: 'children',\n disabled: false,\n name: 'Radio',\n value: 'value',\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;;AAAA;AAEA;AAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEjB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,gBAA8B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAAtCC,OAAO;IAAEC,UAAU;EAE1B,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAI,EAAgB;IAAA;IAAA,kCAAXC,MAAM;MAANA,MAAM;IAAA;IACnC,YAAAC,OAAO,EAACC,GAAG,kBAAC,mBAAmB,EAAEH,IAAI,SAAKC,MAAM,EAAC;IACjDH,UAAU,CAAC,CAACD,OAAO,CAAC;EACtB,CAAC;EAED,oBACE,yEACE,6BAAC,YAAK,eAAKF,KAAK;IAAE,OAAO,EAAEE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG,eAC9D,6BAAC,YAAK,eAAKJ,KAAK;IAAE,OAAO,EAAE,CAACE,OAAQ;IAAC,QAAQ,EAAEE;EAAa,GAAG,CAC9D;AAEP,CAAC;AAAC;AAEFL,KAAK,CAACU,SAAS,GAAG,OAAO;AAEzBV,KAAK,CAACW,IAAI,GAAG;EACXC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE,OAAO;EACd;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAEDjB,KAAK,CAACkB,QAAQ,GAAG,CAAC,CAAC"}
|
|
@@ -118,7 +118,7 @@
|
|
|
118
118
|
--mirai-ui-checkbox-border-radius: var(--mirai-ui-border-radius);
|
|
119
119
|
--mirai-ui-checkbox-checked: var(--mirai-ui-accent);
|
|
120
120
|
--mirai-ui-checkbox-disabled: var(--mirai-ui-content-border);
|
|
121
|
-
--mirai-ui-checkbox-size: calc(var(--mirai-ui-space-M) +
|
|
121
|
+
--mirai-ui-checkbox-size: calc(var(--mirai-ui-space-M) + var(--mirai-ui-space-XXS));
|
|
122
122
|
--mirai-ui-checkbox-size-mobile: var(--mirai-ui-space-L);
|
|
123
123
|
|
|
124
124
|
/* Icon */
|