@mirai/ui 1.0.183 → 1.0.185

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 (32) hide show
  1. package/README.md +3 -0
  2. package/build/components/Button/Button.js +5 -2
  3. package/build/components/Button/Button.js.map +1 -1
  4. package/build/components/Button/Button.module.css +1 -1
  5. package/build/components/Table/Table.ColumnFilter.js +23 -11
  6. package/build/components/Table/Table.ColumnFilter.js.map +1 -1
  7. package/build/components/Table/Table.Filter.js +2 -1
  8. package/build/components/Table/Table.Filter.js.map +1 -1
  9. package/build/components/Table/Table.Row.js +19 -10
  10. package/build/components/Table/Table.Row.js.map +1 -1
  11. package/build/components/Table/Table.js +15 -7
  12. package/build/components/Table/Table.js.map +1 -1
  13. package/build/components/Table/Table.module.css +7 -1
  14. package/build/components/Table/Table.stories.js +101 -56
  15. package/build/components/Table/Table.stories.js.map +1 -1
  16. package/build/components/Table/Table.stories.module.css +5 -1
  17. package/build/components/Table/__tests__/__snapshots__/Table.ColumnFilter.test.js.snap +29 -40
  18. package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +4804 -4772
  19. package/build/components/Table/helpers/index.js +11 -0
  20. package/build/components/Table/helpers/index.js.map +1 -1
  21. package/build/components/Table/helpers/isChecked.js +33 -0
  22. package/build/components/Table/helpers/isChecked.js.map +1 -0
  23. package/build/components/Table/helpers/select.js +7 -2
  24. package/build/components/Table/helpers/select.js.map +1 -1
  25. package/build/primitives/Layer/Layer.js +4 -2
  26. package/build/primitives/Layer/Layer.js.map +1 -1
  27. package/build/primitives/Layer/Layer.module.css +8 -1
  28. package/build/primitives/Layer/Layer.stories.js +1 -0
  29. package/build/primitives/Layer/Layer.stories.js.map +1 -1
  30. package/build/primitives/Layer/__tests__/__snapshots__/Layer.test.js.snap +22 -0
  31. package/build/theme/default.theme.css +1 -0
  32. package/package.json +1 -1
@@ -3,6 +3,17 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
+ var _isChecked = require("./isChecked");
7
+ Object.keys(_isChecked).forEach(function (key) {
8
+ if (key === "default" || key === "__esModule") return;
9
+ if (key in exports && exports[key] === _isChecked[key]) return;
10
+ Object.defineProperty(exports, key, {
11
+ enumerable: true,
12
+ get: function get() {
13
+ return _isChecked[key];
14
+ }
15
+ });
16
+ });
6
17
  var _select = require("./select");
7
18
  Object.keys(_select).forEach(function (key) {
8
19
  if (key === "default" || key === "__esModule") return;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Table/helpers/index.js"],"sourcesContent":["export * from './select';\nexport * from './storage';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/Table/helpers/index.js"],"sourcesContent":["export * from './isChecked';\nexport * from './select';\nexport * from './storage';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isChecked = void 0;
7
+ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
8
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
9
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
10
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
11
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
12
+ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
13
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
14
+ var TYPES = ['string', 'number'];
15
+ var reduce = function reduce() {
16
+ var row = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
17
+ return JSON.stringify(Object.entries(row).reduce(function (result, _ref) {
18
+ var _ref2 = _slicedToArray(_ref, 2),
19
+ key = _ref2[0],
20
+ value = _ref2[1];
21
+ if (TYPES.includes(_typeof(value))) result[key] = value;
22
+ return result;
23
+ }, {}));
24
+ };
25
+ var isChecked = function isChecked(row) {
26
+ var values = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
27
+ var reducedRow = reduce(row);
28
+ return !!values.find(function (item) {
29
+ return reduce(item) === reducedRow;
30
+ });
31
+ };
32
+ exports.isChecked = isChecked;
33
+ //# sourceMappingURL=isChecked.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"isChecked.js","names":["TYPES","reduce","row","JSON","stringify","Object","entries","result","key","value","includes","isChecked","values","reducedRow","find","item"],"sources":["../../../../src/components/Table/helpers/isChecked.js"],"sourcesContent":["const TYPES = ['string', 'number'];\n\nconst reduce = (row = {}) =>\n JSON.stringify(\n Object.entries(row).reduce((result, [key, value]) => {\n if (TYPES.includes(typeof value)) result[key] = value;\n\n return result;\n }, {}),\n );\n\nexport const isChecked = (row, values = []) => {\n const reducedRow = reduce(row);\n\n return !!values.find((item) => reduce(item) === reducedRow);\n};\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAMA,KAAK,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAElC,IAAMC,MAAM,GAAG,SAATA,MAAM;EAAA,IAAIC,GAAG,uEAAG,CAAC,CAAC;EAAA,OACtBC,IAAI,CAACC,SAAS,CACZC,MAAM,CAACC,OAAO,CAACJ,GAAG,CAAC,CAACD,MAAM,CAAC,UAACM,MAAM,QAAmB;IAAA;MAAhBC,GAAG;MAAEC,KAAK;IAC7C,IAAIT,KAAK,CAACU,QAAQ,SAAQD,KAAK,EAAC,EAAEF,MAAM,CAACC,GAAG,CAAC,GAAGC,KAAK;IAErD,OAAOF,MAAM;EACf,CAAC,EAAE,CAAC,CAAC,CAAC,CACP;AAAA;AAEI,IAAMI,SAAS,GAAG,SAAZA,SAAS,CAAIT,GAAG,EAAkB;EAAA,IAAhBU,MAAM,uEAAG,EAAE;EACxC,IAAMC,UAAU,GAAGZ,MAAM,CAACC,GAAG,CAAC;EAE9B,OAAO,CAAC,CAACU,MAAM,CAACE,IAAI,CAAC,UAACC,IAAI;IAAA,OAAKd,MAAM,CAACc,IAAI,CAAC,KAAKF,UAAU;EAAA,EAAC;AAC7D,CAAC;AAAC"}
@@ -60,6 +60,7 @@ var select = function select() {
60
60
  value = _ref4.value;
61
61
  var fieldValue = row[schema[field].bind || field];
62
62
  if (Array.isArray(fieldValue)) fieldValue = fieldValue.join(' ');
63
+ if (typeof fieldValue === 'boolean') fieldValue = fieldValue ? 'true' : 'false';
63
64
  return value ? !Array.isArray(value) ? (_fieldValue = fieldValue) === null || _fieldValue === void 0 ? void 0 : _fieldValue.toLowerCase().includes(value.toLowerCase()) : value.some(function (item) {
64
65
  var _fieldValue2;
65
66
  return (_fieldValue2 = fieldValue) === null || _fieldValue2 === void 0 ? void 0 : _fieldValue2.toLowerCase().includes(item.toLowerCase());
@@ -83,8 +84,12 @@ var select = function select() {
83
84
  Object.keys(sort).forEach(function (key) {
84
85
  var fieldKey = schema[key].bind || key;
85
86
  var order = sort[key] ? 1 : -1;
86
- values.sort(function (a, b) {
87
- return a[fieldKey] >= b[fieldKey] ? 1 * order : -1 * order;
87
+ values.sort(function () {
88
+ var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
89
+ a = _ref5[fieldKey];
90
+ var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
91
+ b = _ref6[fieldKey];
92
+ return (a === undefined || a < b ? -1 : b === undefined || a > b ? 1 : 0) * order;
88
93
  });
89
94
  });
90
95
  return values;
@@ -1 +1 @@
1
- {"version":3,"file":"select.js","names":["select","dataSource","filter","schema","search","sort","flatten","values","fields","Object","keys","length","filterGrouped","field","includes","reduce","group","item","itemFound","find","value","Array","isArray","push","row","every","max","Infinity","min","fieldValue","bind","join","toLowerCase","some","forEach","index","rowValues","key","type","map","JSON","stringify","fieldKey","order","a","b"],"sources":["../../../../src/components/Table/helpers/select.js"],"sourcesContent":["export const select = ({ dataSource = [], filter = [], schema = {}, search, sort = {} } = {}) => {\n let flatten = [...dataSource];\n let values = [];\n\n const fields = Object.keys(schema);\n\n if (filter?.length > 0) {\n const filterGrouped = [...filter]\n .filter(({ field }) => fields.includes(field))\n .reduce((group, item = {}) => {\n const itemFound = group.find(({ field }) => item.field === field);\n\n if (itemFound && item.value) {\n if (!Array.isArray(itemFound.value)) itemFound.value = [itemFound.value];\n itemFound.value.push(item.value);\n } else {\n group.push({ ...item });\n }\n\n return group;\n }, []);\n\n flatten = flatten.filter((row = {}) =>\n filterGrouped.every(({ field, max = Infinity, min = -Infinity, value }) => {\n let fieldValue = row[schema[field].bind || field];\n if (Array.isArray(fieldValue)) fieldValue = fieldValue.join(' ');\n\n return value\n ? !Array.isArray(value)\n ? fieldValue?.toLowerCase().includes(value.toLowerCase())\n : value.some((item) => fieldValue?.toLowerCase().includes(item.toLowerCase()))\n : min || max\n ? row[field] >= min && row[field] <= max\n : false;\n }),\n );\n }\n\n if (search) {\n flatten.forEach((row, index) => {\n const rowValues = Object.keys(row)\n .filter((key) => schema[key]?.type !== 'component')\n .map((key) => row[key]);\n\n if (JSON.stringify(rowValues).toLowerCase().includes(search.toLowerCase())) values.push(flatten[index]);\n });\n } else {\n values = [...flatten];\n }\n\n Object.keys(sort).forEach((key) => {\n const fieldKey = schema[key].bind || key;\n const order = sort[key] ? 1 : -1;\n\n values.sort((a, b) => (a[fieldKey] >= b[fieldKey] ? 1 * order : -1 * order));\n });\n\n return values;\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"select.js","names":["select","dataSource","filter","schema","search","sort","flatten","values","fields","Object","keys","length","filterGrouped","field","includes","reduce","group","item","itemFound","find","value","Array","isArray","push","row","every","max","Infinity","min","fieldValue","bind","join","toLowerCase","some","forEach","index","rowValues","key","type","map","JSON","stringify","fieldKey","order","a","b","undefined"],"sources":["../../../../src/components/Table/helpers/select.js"],"sourcesContent":["export const select = ({ dataSource = [], filter = [], schema = {}, search, sort = {} } = {}) => {\n let flatten = [...dataSource];\n let values = [];\n\n const fields = Object.keys(schema);\n\n if (filter?.length > 0) {\n const filterGrouped = [...filter]\n .filter(({ field }) => fields.includes(field))\n .reduce((group, item = {}) => {\n const itemFound = group.find(({ field }) => item.field === field);\n\n if (itemFound && item.value) {\n if (!Array.isArray(itemFound.value)) itemFound.value = [itemFound.value];\n itemFound.value.push(item.value);\n } else {\n group.push({ ...item });\n }\n\n return group;\n }, []);\n\n flatten = flatten.filter((row = {}) =>\n filterGrouped.every(({ field, max = Infinity, min = -Infinity, value }) => {\n let fieldValue = row[schema[field].bind || field];\n if (Array.isArray(fieldValue)) fieldValue = fieldValue.join(' ');\n if (typeof fieldValue === 'boolean') fieldValue = fieldValue ? 'true' : 'false';\n\n return value\n ? !Array.isArray(value)\n ? fieldValue?.toLowerCase().includes(value.toLowerCase())\n : value.some((item) => fieldValue?.toLowerCase().includes(item.toLowerCase()))\n : min || max\n ? row[field] >= min && row[field] <= max\n : false;\n }),\n );\n }\n\n if (search) {\n flatten.forEach((row, index) => {\n const rowValues = Object.keys(row)\n .filter((key) => schema[key]?.type !== 'component')\n .map((key) => row[key]);\n\n if (JSON.stringify(rowValues).toLowerCase().includes(search.toLowerCase())) values.push(flatten[index]);\n });\n } else {\n values = [...flatten];\n }\n\n Object.keys(sort).forEach((key) => {\n const fieldKey = schema[key].bind || key;\n const order = sort[key] ? 1 : -1;\n\n values.sort(\n ({ [fieldKey]: a } = {}, { [fieldKey]: b } = {}) =>\n (a === undefined || a < b ? -1 : b === undefined || a > b ? 1 : 0) * order,\n );\n });\n\n return values;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAO,IAAMA,MAAM,GAAG,SAATA,MAAM,GAA8E;EAAA,+EAAP,CAAC,CAAC;IAAA,uBAAnEC,UAAU;IAAVA,UAAU,gCAAG,EAAE;IAAA,mBAAEC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAA,mBAAEC,MAAM;IAANA,MAAM,4BAAG,CAAC,CAAC;IAAEC,MAAM,QAANA,MAAM;IAAA,iBAAEC,IAAI;IAAJA,IAAI,0BAAG,CAAC,CAAC;EACnF,IAAIC,OAAO,sBAAOL,UAAU,CAAC;EAC7B,IAAIM,MAAM,GAAG,EAAE;EAEf,IAAMC,MAAM,GAAGC,MAAM,CAACC,IAAI,CAACP,MAAM,CAAC;EAElC,IAAI,CAAAD,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAES,MAAM,IAAG,CAAC,EAAE;IACtB,IAAMC,aAAa,GAAG,mBAAIV,MAAM,EAC7BA,MAAM,CAAC;MAAA,IAAGW,KAAK,SAALA,KAAK;MAAA,OAAOL,MAAM,CAACM,QAAQ,CAACD,KAAK,CAAC;IAAA,EAAC,CAC7CE,MAAM,CAAC,UAACC,KAAK,EAAgB;MAAA,IAAdC,IAAI,uEAAG,CAAC,CAAC;MACvB,IAAMC,SAAS,GAAGF,KAAK,CAACG,IAAI,CAAC;QAAA,IAAGN,KAAK,SAALA,KAAK;QAAA,OAAOI,IAAI,CAACJ,KAAK,KAAKA,KAAK;MAAA,EAAC;MAEjE,IAAIK,SAAS,IAAID,IAAI,CAACG,KAAK,EAAE;QAC3B,IAAI,CAACC,KAAK,CAACC,OAAO,CAACJ,SAAS,CAACE,KAAK,CAAC,EAAEF,SAAS,CAACE,KAAK,GAAG,CAACF,SAAS,CAACE,KAAK,CAAC;QACxEF,SAAS,CAACE,KAAK,CAACG,IAAI,CAACN,IAAI,CAACG,KAAK,CAAC;MAClC,CAAC,MAAM;QACLJ,KAAK,CAACO,IAAI,mBAAMN,IAAI,EAAG;MACzB;MAEA,OAAOD,KAAK;IACd,CAAC,EAAE,EAAE,CAAC;IAERV,OAAO,GAAGA,OAAO,CAACJ,MAAM,CAAC;MAAA,IAACsB,GAAG,uEAAG,CAAC,CAAC;MAAA,OAChCZ,aAAa,CAACa,KAAK,CAAC,iBAAuD;QAAA;QAAA,IAApDZ,KAAK,SAALA,KAAK;UAAA,kBAAEa,GAAG;UAAHA,GAAG,0BAAGC,QAAQ;UAAA,kBAAEC,GAAG;UAAHA,GAAG,0BAAG,CAACD,QAAQ;UAAEP,KAAK,SAALA,KAAK;QAClE,IAAIS,UAAU,GAAGL,GAAG,CAACrB,MAAM,CAACU,KAAK,CAAC,CAACiB,IAAI,IAAIjB,KAAK,CAAC;QACjD,IAAIQ,KAAK,CAACC,OAAO,CAACO,UAAU,CAAC,EAAEA,UAAU,GAAGA,UAAU,CAACE,IAAI,CAAC,GAAG,CAAC;QAChE,IAAI,OAAOF,UAAU,KAAK,SAAS,EAAEA,UAAU,GAAGA,UAAU,GAAG,MAAM,GAAG,OAAO;QAE/E,OAAOT,KAAK,GACR,CAACC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,kBACnBS,UAAU,gDAAV,YAAYG,WAAW,EAAE,CAAClB,QAAQ,CAACM,KAAK,CAACY,WAAW,EAAE,CAAC,GACvDZ,KAAK,CAACa,IAAI,CAAC,UAAChB,IAAI;UAAA;UAAA,uBAAKY,UAAU,iDAAV,aAAYG,WAAW,EAAE,CAAClB,QAAQ,CAACG,IAAI,CAACe,WAAW,EAAE,CAAC;QAAA,EAAC,GAC9EJ,GAAG,IAAIF,GAAG,GACVF,GAAG,CAACX,KAAK,CAAC,IAAIe,GAAG,IAAIJ,GAAG,CAACX,KAAK,CAAC,IAAIa,GAAG,GACtC,KAAK;MACX,CAAC,CAAC;IAAA,EACH;EACH;EAEA,IAAItB,MAAM,EAAE;IACVE,OAAO,CAAC4B,OAAO,CAAC,UAACV,GAAG,EAAEW,KAAK,EAAK;MAC9B,IAAMC,SAAS,GAAG3B,MAAM,CAACC,IAAI,CAACc,GAAG,CAAC,CAC/BtB,MAAM,CAAC,UAACmC,GAAG;QAAA;QAAA,OAAK,gBAAAlC,MAAM,CAACkC,GAAG,CAAC,gDAAX,YAAaC,IAAI,MAAK,WAAW;MAAA,EAAC,CAClDC,GAAG,CAAC,UAACF,GAAG;QAAA,OAAKb,GAAG,CAACa,GAAG,CAAC;MAAA,EAAC;MAEzB,IAAIG,IAAI,CAACC,SAAS,CAACL,SAAS,CAAC,CAACJ,WAAW,EAAE,CAAClB,QAAQ,CAACV,MAAM,CAAC4B,WAAW,EAAE,CAAC,EAAEzB,MAAM,CAACgB,IAAI,CAACjB,OAAO,CAAC6B,KAAK,CAAC,CAAC;IACzG,CAAC,CAAC;EACJ,CAAC,MAAM;IACL5B,MAAM,sBAAOD,OAAO,CAAC;EACvB;EAEAG,MAAM,CAACC,IAAI,CAACL,IAAI,CAAC,CAAC6B,OAAO,CAAC,UAACG,GAAG,EAAK;IACjC,IAAMK,QAAQ,GAAGvC,MAAM,CAACkC,GAAG,CAAC,CAACP,IAAI,IAAIO,GAAG;IACxC,IAAMM,KAAK,GAAGtC,IAAI,CAACgC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEhC9B,MAAM,CAACF,IAAI,CACT;MAAA,gFAAqB,CAAC,CAAC;QAARuC,CAAC,SAAZF,QAAQ;MAAA,gFAAiC,CAAC,CAAC;QAARG,CAAC,SAAZH,QAAQ;MAAA,OAClC,CAACE,CAAC,KAAKE,SAAS,IAAIF,CAAC,GAAGC,CAAC,GAAG,CAAC,CAAC,GAAGA,CAAC,KAAKC,SAAS,IAAIF,CAAC,GAAGC,CAAC,GAAG,CAAC,GAAG,CAAC,IAAIF,KAAK;IAAA,EAC7E;EACH,CAAC,CAAC;EAEF,OAAOpC,MAAM;AACf,CAAC;AAAC"}
@@ -13,7 +13,7 @@ var _Primitive = require("../Primitive");
13
13
  var _helpers2 = require("./helpers");
14
14
  var _LayerModule = _interopRequireDefault(require("./Layer.module.css"));
15
15
  var _LayerContent = require("./LayerContent");
16
- var _excluded = ["bottom", "centered", "forceRender", "left", "right", "top", "timestamp", "visible", "onPosition"];
16
+ var _excluded = ["bottom", "centered", "fixed", "forceRender", "left", "right", "top", "timestamp", "visible", "onPosition"];
17
17
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
18
18
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,6 +33,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
33
33
  var Layer = function Layer(_ref) {
34
34
  var forceBottom = _ref.bottom,
35
35
  centered = _ref.centered,
36
+ fixed = _ref.fixed,
36
37
  _ref$forceRender = _ref.forceRender,
37
38
  forceRender = _ref$forceRender === void 0 ? true : _ref$forceRender,
38
39
  forceLeft = _ref.left,
@@ -112,7 +113,7 @@ var Layer = function Layer(_ref) {
112
113
  })), (forceRender || visible) && /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
113
114
  ref: contentRef,
114
115
  role: others.role ? "".concat(others.role, "-content") : 'layer-content',
115
- className: (0, _helpers.styles)(_LayerModule.default.layer, !visible && _LayerModule.default.hidden),
116
+ className: (0, _helpers.styles)(_LayerModule.default.layer, fixed && _LayerModule.default.fixed, !visible && _LayerModule.default.hidden),
116
117
  style: _objectSpread({}, position)
117
118
  }, /*#__PURE__*/_react.default.createElement(createWrapper ? 'div' : _react.default.Fragment, createWrapper ? {
118
119
  className: className,
@@ -127,6 +128,7 @@ Layer.propTypes = {
127
128
  bottom: _propTypes.default.bool,
128
129
  centered: _propTypes.default.bool,
129
130
  children: _propTypes.default.node,
131
+ fixed: _propTypes.default.bool,
130
132
  forceRender: _propTypes.default.bool,
131
133
  left: _propTypes.default.bool,
132
134
  right: _propTypes.default.bool,
@@ -1 +1 @@
1
- {"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","getLayerPosition","orientation","children","React","Children","map","child","className","contentStyle","style","createWrapper","role","testId","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","propTypes","PropTypes","bool","node","number","func"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Primitive } from '../Primitive';\nimport { getElementLayout, getLayerPosition, getScrollParent } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n bottom: forceBottom,\n centered,\n forceRender = true,\n left: forceLeft,\n right: forceRight,\n top: forceTop,\n timestamp,\n visible,\n onPosition = () => {},\n ...others\n}) => {\n const device = useDevice();\n const componentRef = useRef();\n const contentRef = useRef();\n\n const [position, setPosition] = useState();\n\n useLayoutEffect(() => {\n const content = contentRef?.current;\n if (!content || typeof ResizeObserver === 'undefined') return;\n\n const observer = new ResizeObserver(calcPosition);\n observer.observe(content);\n\n return () => observer.unobserve(content);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useLayoutEffect(\n () => calcPosition(),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible],\n );\n\n const calcPosition = () => {\n const { current: { firstChild: componentEl } = {} } = componentRef;\n const { current: contentEl } = contentRef;\n\n if (!componentEl || !contentEl) return setPosition();\n\n const componentLayout = { ...getElementLayout(componentEl), scrollTop: getScrollParent(componentEl)?.scrollTop };\n const contentLayout = getElementLayout(contentEl);\n\n const {\n left = 0,\n top = 0,\n orientation = {},\n } = getLayerPosition(componentLayout, contentLayout, device, {\n centered,\n forceBottom,\n forceLeft,\n forceRight,\n forceTop,\n });\n\n setPosition({ left: `${left}px`, top: `${top}px` });\n onPosition(orientation);\n };\n\n const children = React.Children.map(others.children || [], (child) => child);\n const { className, style: contentStyle } = others;\n const createWrapper = className || contentStyle;\n\n return (\n <>\n <Primitive ref={componentRef} role={others.role || 'layer'} tag=\"span\" testId={others.testId}>\n {children.find(({ type: { name } }) => name !== LayerContent.name)}\n </Primitive>\n\n {(forceRender || visible) && (\n <Primitive\n ref={contentRef}\n role={others.role ? `${others.role}-content` : 'layer-content'}\n className={styles(style.layer, !visible && style.hidden)}\n style={{ ...position }}\n >\n {React.createElement(\n createWrapper ? 'div' : React.Fragment,\n createWrapper ? { className, style: contentStyle } : undefined,\n children?.find(({ type: { name } }) => name === LayerContent.name),\n )}\n </Primitive>\n )}\n </>\n );\n};\n\nLayer.propTypes = {\n bottom: PropTypes.bool,\n centered: PropTypes.bool,\n children: PropTypes.node,\n forceRender: PropTypes.bool,\n left: PropTypes.bool,\n right: PropTypes.bool,\n timestamp: PropTypes.number,\n top: PropTypes.bool,\n visible: PropTypes.bool,\n onPosition: PropTypes.func,\n};\n\nexport { Layer };\n"],"mappings":"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"}
1
+ {"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","fixed","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","getLayerPosition","orientation","children","React","Children","map","child","className","contentStyle","style","createWrapper","role","testId","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","propTypes","PropTypes","bool","node","number","func"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Primitive } from '../Primitive';\nimport { getElementLayout, getLayerPosition, getScrollParent } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n bottom: forceBottom,\n centered,\n fixed,\n forceRender = true,\n left: forceLeft,\n right: forceRight,\n top: forceTop,\n timestamp,\n visible,\n onPosition = () => {},\n ...others\n}) => {\n const device = useDevice();\n const componentRef = useRef();\n const contentRef = useRef();\n\n const [position, setPosition] = useState();\n\n useLayoutEffect(() => {\n const content = contentRef?.current;\n if (!content || typeof ResizeObserver === 'undefined') return;\n\n const observer = new ResizeObserver(calcPosition);\n observer.observe(content);\n\n return () => observer.unobserve(content);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useLayoutEffect(\n () => calcPosition(),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible],\n );\n\n const calcPosition = () => {\n const { current: { firstChild: componentEl } = {} } = componentRef;\n const { current: contentEl } = contentRef;\n\n if (!componentEl || !contentEl) return setPosition();\n\n const componentLayout = { ...getElementLayout(componentEl), scrollTop: getScrollParent(componentEl)?.scrollTop };\n const contentLayout = getElementLayout(contentEl);\n\n const {\n left = 0,\n top = 0,\n orientation = {},\n } = getLayerPosition(componentLayout, contentLayout, device, {\n centered,\n forceBottom,\n forceLeft,\n forceRight,\n forceTop,\n });\n\n setPosition({ left: `${left}px`, top: `${top}px` });\n onPosition(orientation);\n };\n\n const children = React.Children.map(others.children || [], (child) => child);\n const { className, style: contentStyle } = others;\n const createWrapper = className || contentStyle;\n\n return (\n <>\n <Primitive ref={componentRef} role={others.role || 'layer'} tag=\"span\" testId={others.testId}>\n {children.find(({ type: { name } }) => name !== LayerContent.name)}\n </Primitive>\n\n {(forceRender || visible) && (\n <Primitive\n ref={contentRef}\n role={others.role ? `${others.role}-content` : 'layer-content'}\n className={styles(style.layer, fixed && style.fixed, !visible && style.hidden)}\n style={{ ...position }}\n >\n {React.createElement(\n createWrapper ? 'div' : React.Fragment,\n createWrapper ? { className, style: contentStyle } : undefined,\n children?.find(({ type: { name } }) => name === LayerContent.name),\n )}\n </Primitive>\n )}\n </>\n );\n};\n\nLayer.propTypes = {\n bottom: PropTypes.bool,\n centered: PropTypes.bool,\n children: PropTypes.node,\n fixed: PropTypes.bool,\n forceRender: PropTypes.bool,\n left: PropTypes.bool,\n right: PropTypes.bool,\n timestamp: PropTypes.number,\n top: PropTypes.bool,\n visible: PropTypes.bool,\n onPosition: PropTypes.func,\n};\n\nexport { Layer };\n"],"mappings":"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"}
@@ -1,8 +1,15 @@
1
1
  .layer {
2
- position: fixed;
3
2
  z-index: var(--mirai-ui-layer-content);
4
3
  }
5
4
 
5
+ .layer:not(.fixed) {
6
+ position: absolute;
7
+ }
8
+
9
+ .layer.fixed {
10
+ position: fixed;
11
+ }
12
+
6
13
  .layer.hidden {
7
14
  display: none;
8
15
  visibility: hidden;
@@ -28,6 +28,7 @@ Story.storyName = 'Layer';
28
28
  Story.args = {
29
29
  bottom: false,
30
30
  centered: false,
31
+ fixed: false,
31
32
  forceRender: true,
32
33
  left: false,
33
34
  right: false,
@@ -1 +1 @@
1
- {"version":3,"file":"Layer.stories.js","names":["title","Story","props","margin","storyName","args","bottom","centered","forceRender","left","right","top","visible","testId","style"],"sources":["../../../src/primitives/Layer/Layer.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from '../../';\nimport { Layer } from './Layer';\nimport { LayerContent } from './LayerContent';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => (\n <Layer {...props} className=\"children\">\n <Action style={{ margin: '0 auto' }}>Parent element</Action>\n\n <LayerContent>\n <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span>\n </LayerContent>\n </Layer>\n);\n\nStory.storyName = 'Layer';\n\nStory.args = {\n bottom: false,\n centered: false,\n forceRender: true,\n left: false,\n right: false,\n top: false,\n visible: true,\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,YAAK,eAAKA,KAAK;IAAE,SAAS,EAAC;EAAU,iBACpC,6BAAC,QAAM;IAAC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAS;EAAE,oBAAwB,eAE5D,6BAAC,0BAAY,qBACX,uGAAsE,CACzD,CACT;AAAA,CACT;AAAC;AAEFF,KAAK,CAACG,SAAS,GAAG,OAAO;AAEzBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,WAAW,EAAE,IAAI;EACjBC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,KAAK;EACVC,OAAO,EAAE,IAAI;EACb;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC"}
1
+ {"version":3,"file":"Layer.stories.js","names":["title","Story","props","margin","storyName","args","bottom","centered","fixed","forceRender","left","right","top","visible","testId","style"],"sources":["../../../src/primitives/Layer/Layer.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Action } from '../../';\nimport { Layer } from './Layer';\nimport { LayerContent } from './LayerContent';\n\nexport default { title: 'Primitives' };\n\nexport const Story = (props) => (\n <Layer {...props} className=\"children\">\n <Action style={{ margin: '0 auto' }}>Parent element</Action>\n\n <LayerContent>\n <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</span>\n </LayerContent>\n </Layer>\n);\n\nStory.storyName = 'Layer';\n\nStory.args = {\n bottom: false,\n centered: false,\n fixed: false,\n forceRender: true,\n left: false,\n right: false,\n top: false,\n visible: true,\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AACA;AAA8C;AAAA;AAAA,eAE/B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,YAAK,eAAKA,KAAK;IAAE,SAAS,EAAC;EAAU,iBACpC,6BAAC,QAAM;IAAC,KAAK,EAAE;MAAEC,MAAM,EAAE;IAAS;EAAE,oBAAwB,eAE5D,6BAAC,0BAAY,qBACX,uGAAsE,CACzD,CACT;AAAA,CACT;AAAC;AAEFF,KAAK,CAACG,SAAS,GAAG,OAAO;AAEzBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,KAAK,EAAE,KAAK;EACZC,WAAW,EAAE,IAAI;EACjBC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,GAAG,EAAE,KAAK;EACVC,OAAO,EAAE,IAAI;EACb;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC"}
@@ -93,6 +93,28 @@ exports[`primitive:<Layer> w/ component 1`] = `
93
93
  </DocumentFragment>
94
94
  `;
95
95
 
96
+ exports[`primitive:<Layer> w/ fixed 1`] = `
97
+ <DocumentFragment>
98
+ <span>
99
+ <button
100
+ class="pressable button"
101
+ >
102
+ Action
103
+ </button>
104
+ </span>
105
+ <div
106
+ class="layer fixed hidden"
107
+ style="left: 0px; top: 0px;"
108
+ >
109
+ <span
110
+ class="text paragraph"
111
+ >
112
+ Mirai
113
+ </span>
114
+ </div>
115
+ </DocumentFragment>
116
+ `;
117
+
96
118
  exports[`primitive:<Layer> w/ forceRender={false} & <LayerContent> 1`] = `
97
119
  <DocumentFragment>
98
120
  <span>
@@ -123,6 +123,7 @@
123
123
 
124
124
  /* Layer */
125
125
  --mirai-ui-layer-content: var(--mirai-ui-layer-XL);
126
+ --mirai-ui-layer-XS: -1;
126
127
  --mirai-ui-layer-S: 0;
127
128
  --mirai-ui-layer-M: 1;
128
129
  --mirai-ui-layer-L: 10;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mirai/ui",
3
- "version": "1.0.183",
3
+ "version": "1.0.185",
4
4
  "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
5
5
  "author": "JΛVI <hello@soyjavi.com>",
6
6
  "license": "MIT",