@mirai/ui 1.0.209 → 1.0.211

package/build/components/Calendar/__tests__/__snapshots__/Calendar.test.jsx.snap

@@ -6,7 +6,7 @@ exports[`component:<Calendar> desktop environment prop:captions 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -1531,7 +1531,7 @@ exports[`component:<Calendar> desktop environment prop:disabledDates 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -2751,7 +2751,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -3996,7 +3996,7 @@ exports[`component:<Calendar> desktop environment prop:format 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -5216,7 +5216,7 @@ exports[`component:<Calendar> desktop environment prop:from 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -6436,7 +6436,7 @@ exports[`component:<Calendar> desktop environment prop:highlights 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -7656,7 +7656,7 @@ exports[`component:<Calendar> desktop environment prop:locale 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -8876,7 +8876,7 @@ exports[`component:<Calendar> desktop environment prop:locale en-US 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -10096,7 +10096,7 @@ exports[`component:<Calendar> desktop environment prop:months 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -11902,7 +11902,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:disabledDates
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -13122,7 +13122,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMaxDays 1
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -14342,7 +14342,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMinDays 1
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -15562,7 +15562,7 @@ exports[`component:<Calendar> desktop environment prop:range renders 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -16782,7 +16782,7 @@ exports[`component:<Calendar> desktop environment prop:to 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -17977,7 +17977,7 @@ exports[`component:<Calendar> desktop environment renders 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -19197,7 +19197,7 @@ exports[`component:<Calendar> inherit:className 1`] = `
     class="view container mirai"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -20417,7 +20417,7 @@ exports[`component:<Calendar> mobile environment prop:captions 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -21942,7 +21942,7 @@ exports[`component:<Calendar> mobile environment prop:disabledDates 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -23162,7 +23162,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -24407,7 +24407,7 @@ exports[`component:<Calendar> mobile environment prop:format 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -25627,7 +25627,7 @@ exports[`component:<Calendar> mobile environment prop:from 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -26847,7 +26847,7 @@ exports[`component:<Calendar> mobile environment prop:highlights 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -28067,7 +28067,7 @@ exports[`component:<Calendar> mobile environment prop:locale 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -29287,7 +29287,7 @@ exports[`component:<Calendar> mobile environment prop:locale en-US 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -30507,7 +30507,7 @@ exports[`component:<Calendar> mobile environment prop:months 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -32313,7 +32313,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:disabledDates 1
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -33533,7 +33533,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMaxDays 1`
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -34753,7 +34753,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMinDays 1`
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -35973,7 +35973,7 @@ exports[`component:<Calendar> mobile environment prop:range renders 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -37193,7 +37193,7 @@ exports[`component:<Calendar> mobile environment prop:to 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -38388,7 +38388,7 @@ exports[`component:<Calendar> mobile environment renders 1`] = `
     class="view container"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"
@@ -39609,7 +39609,7 @@ exports[`component:<Calendar> testId 1`] = `
     data-testid="mirai"
   >
     <div
-      class="scrollview snap horizontal scrollview"
+      class="scrollview snap horizontal notIndicator scrollview"
     >
       <div
         class="view month"

package/build/components/Modal/Modal.js

@@ -18,6 +18,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 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."); }
 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); }
@@ -112,7 +117,9 @@ var Modal = function Modal(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: isDesktop || title !== undefined ? _primitives.ICON.CLOSE : _primitives.ICON.EXPAND_MORE,
     className: _ModalModule.default.icon
-  }))), children)), document.body);
+  }))), children && /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
+    role: 'modal-content'
+  })))), document.body);
 };
 exports.Modal = Modal;
 Modal.propTypes = {

package/build/components/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","height","ref","useRef","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","handleOverflow","event","target","current","contains","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","button","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View forceRow className={style.header}>\n            {onBack && (\n              <Button transparent small squared onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                transparent\n                small\n                squared\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","height","ref","useRef","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","handleOverflow","event","target","current","contains","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","button","CLOSE","EXPAND_MORE","React","cloneElement","props","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Button } from '../../components';\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={others.role ? `${others.role}-overflow` : 'modal-overflow'}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      style={{ height }}\n      testId={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        role={others.role || 'modal'}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View forceRow className={style.header}>\n            {onBack && (\n              <Button transparent small squared onPress={onBack} testId={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                transparent\n                small\n                squared\n                onPress={onClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n                className={style.button}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n        {children && React.cloneElement(children, { ...children.props, role: 'modal-content' })}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -82,7 +82,9 @@ exports[`component:<Modal> prop:children 1`] = `
     <div
       class="view fit modal calcWidth"
     >
-      <span>
+      <span
+        role="modal-content"
+      >
         children
       </span>
     </div>

package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap

@@ -32,7 +32,7 @@ exports[`component:<Slider> inherit:className 1`] = `
       </span>
     </div>
     <div
-      class="scrollview snap horizontal scrollView"
+      class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
       <div
@@ -145,7 +145,7 @@ exports[`component:<Slider> prop:auto 1`] = `
       </span>
     </div>
     <div
-      class="scrollview snap horizontal scrollView"
+      class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
       <div
@@ -258,7 +258,7 @@ exports[`component:<Slider> prop:captions 1`] = `
       </span>
     </div>
     <div
-      class="scrollview snap horizontal scrollView"
+      class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
       <div
@@ -391,7 +391,7 @@ exports[`component:<Slider> prop:fullScreen 1`] = `
     style="width: 1024px;"
   >
     <div
-      class="scrollview snap horizontal scrollView"
+      class="scrollview snap horizontal notIndicator scrollView"
       style="width: 870.4px;"
     >
       <div
@@ -444,7 +444,7 @@ exports[`component:<Slider> prop:fullScreen 1`] = `
       </div>
     </div>
     <div
-      class="scrollview snap horizontal thumbnails"
+      class="scrollview snap horizontal notIndicator thumbnails"
     >
       <div
         class="pressable thumbnail active"
@@ -507,7 +507,7 @@ exports[`component:<Slider> prop:index 1`] = `
       </span>
     </div>
     <div
-      class="scrollview snap horizontal scrollView"
+      class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
       <div
@@ -620,7 +620,7 @@ exports[`component:<Slider> renders 1`] = `
       </span>
     </div>
     <div
-      class="scrollview snap horizontal scrollView"
+      class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
       <div
@@ -734,7 +734,7 @@ exports[`component:<Slider> testId 1`] = `
       </span>
     </div>
     <div
-      class="scrollview snap horizontal scrollView"
+      class="scrollview snap horizontal notIndicator scrollView"
       style="width: 360px;"
     >
       <div

package/build/components/Table/Table.Row.js

@@ -78,6 +78,7 @@ var Row = function Row(_ref) {
       tooltip = _schema$field.tooltip,
       _schema$field$type = _schema$field.type,
       type = _schema$field$type === void 0 ? 'text' : _schema$field$type;
+    var fieldFilter = ((_schema$field2 = schema[field]) === null || _schema$field2 === void 0 ? void 0 : _schema$field2.bind) || field;
     return /*#__PURE__*/_react.default.createElement(_primitives.Primitive, {
       tag: isHead ? 'th' : 'td',
       testId: testId ? "".concat(testId, "-").concat(field) : undefined,
@@ -99,8 +100,7 @@ var Row = function Row(_ref) {
       className: _TableModule.default.checkbox,
       testId: testId ? "".concat(testId, "-checkbox") : undefined
     }), isHead ? tooltip ? /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
-      text: tooltip,
-      top: true
+      text: tooltip
     }, /*#__PURE__*/_react.default.createElement(_primitives.Primitive, {
       className: _TableModule.default.tooltip
     }, label)) : label : dataSource[field], isHead && (onSort && hasSort || onFilter && hasFilter) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
@@ -110,10 +110,10 @@ var Row = function Row(_ref) {
       value: sort[field] === false ? _primitives.ICON.UP : _primitives.ICON.DOWN,
       className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.disabled)
     }), onFilter && hasFilter && /*#__PURE__*/_react.default.createElement(_Table.ColumnFilter, {
-      field: ((_schema$field2 = schema[field]) === null || _schema$field2 === void 0 ? void 0 : _schema$field2.bind) || field,
+      field: fieldFilter,
       l10n: l10n,
       schema: schema,
-      visible: field === focus,
+      visible: fieldFilter === focus,
       onFocus: handleFocus,
       onSubmit: onFilter
     }))));

package/build/components/Table/Table.Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","Row","checked","dataSource","indeterminate","l10n","schema","sort","onFilter","onPress","onSelect","onSort","others","useState","focus","setFocus","isHead","undefined","testId","handlePress","field","event","target","type","includes","handleFocus","handleSelect","preventDefault","styles","style","selected","Object","keys","filter","hidden","map","index","hasFilter","label","hasSort","tooltip","React","createElement","Primitive","tag","key","onClick","column","selectable","value","checkbox","icons","ICON","UP","DOWN","icon","disabled","bind","displayName","propTypes","PropTypes","bool","shape","L10N_SHAPE","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Primitive, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport { Tooltip } from '../Tooltip';\nimport { ColumnFilter } from './Table.ColumnFilter';\nimport { L10N_SHAPE } from './Table.constants';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst Row = ({\n  checked,\n  dataSource,\n  indeterminate,\n  l10n,\n  schema,\n  sort = {},\n  onFilter,\n  onPress,\n  onSelect,\n  onSort,\n  ...others\n}) => {\n  const [focus, setFocus] = useState();\n\n  const isHead = dataSource === undefined;\n  const { testId } = others;\n\n  const handlePress = (field, event) => {\n    const { target: { type } = {} } = event;\n    if (CUSTOM_EVENT_TYPES.includes(type)) return;\n\n    isHead ? onSort(field) : onPress ? onPress(dataSource, event) : undefined;\n  };\n\n  const handleFocus = (field) => {\n    setFocus(field);\n  };\n\n  const handleSelect = (dataSource, event) => {\n    event.preventDefault();\n    onSelect(dataSource, event);\n  };\n\n  return (\n    <Primitive tag=\"tr\" {...others} className={styles(checked && style.selected, onPress && style.onPress)}>\n      {Object.keys(schema)\n        .filter((field) => !schema[field].hidden)\n        .map((field, index) => {\n          const { filter: hasFilter = true, label, sort: hasSort = true, tooltip, type = 'text' } = schema[field];\n\n          return React.createElement(\n            Primitive,\n            {\n              tag: isHead ? 'th' : 'td',\n              testId: testId ? `${testId}-${field}` : undefined,\n              key: field,\n              onClick: !isHead || hasSort ? (event) => handlePress(field, event) : undefined,\n            },\n            <View\n              forceRow\n              tag=\"span\"\n              className={styles(\n                style.column,\n                onSelect && index === 0 && style.selectable,\n                !isHead && !(onSelect && index === 0) && style[type],\n              )}\n            >\n              {onSelect && index === 0 && (\n                <InputOption\n                  checked={checked}\n                  indeterminate={indeterminate}\n                  name=\"checkbox\"\n                  onChange={(value, event) => handleSelect(dataSource, event)}\n                  className={style.checkbox}\n                  testId={testId ? `${testId}-checkbox` : undefined}\n                />\n              )}\n\n              {isHead ? (\n                tooltip ? (\n                  <Tooltip text={tooltip} top>\n                    <Primitive className={style.tooltip}>{label}</Primitive>\n                  </Tooltip>\n                ) : (\n                  label\n                )\n              ) : (\n                dataSource[field]\n              )}\n\n              {isHead && ((onSort && hasSort) || (onFilter && hasFilter)) && (\n                <View row className={style.icons}>\n                  {onSort && hasSort && (\n                    <Icon\n                      value={sort[field] === false ? ICON.UP : ICON.DOWN}\n                      className={styles(style.icon, sort[field] === undefined && style.disabled)}\n                    />\n                  )}\n                  {onFilter && hasFilter && (\n                    <ColumnFilter\n                      field={schema[field]?.bind || field}\n                      l10n={l10n}\n                      schema={schema}\n                      visible={field === focus}\n                      onFocus={handleFocus}\n                      onSubmit={onFilter}\n                    />\n                  )}\n                </View>\n              )}\n            </View>,\n          );\n        })}\n    </Primitive>\n  );\n};\n\nRow.displayName = 'Component:Table:Row';\n\nRow.propTypes = {\n  checked: PropTypes.bool,\n  dataSource: PropTypes.shape({}),\n  indeterminate: PropTypes.bool,\n  l10n: L10N_SHAPE,\n  schema: PropTypes.shape({}).isRequired,\n  sort: PropTypes.shape({}),\n  onFilter: PropTypes.func,\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n  onSort: PropTypes.func,\n};\n\nexport { Row };\n"],"mappings":"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"}
+{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","Row","checked","dataSource","indeterminate","l10n","schema","sort","onFilter","onPress","onSelect","onSort","others","useState","focus","setFocus","isHead","undefined","testId","handlePress","field","event","target","type","includes","handleFocus","handleSelect","preventDefault","styles","style","selected","Object","keys","filter","hidden","map","index","hasFilter","label","hasSort","tooltip","fieldFilter","bind","React","createElement","Primitive","tag","key","onClick","column","selectable","value","checkbox","icons","ICON","UP","DOWN","icon","disabled","displayName","propTypes","PropTypes","bool","shape","L10N_SHAPE","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Primitive, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport { Tooltip } from '../Tooltip';\nimport { ColumnFilter } from './Table.ColumnFilter';\nimport { L10N_SHAPE } from './Table.constants';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst Row = ({\n  checked,\n  dataSource,\n  indeterminate,\n  l10n,\n  schema,\n  sort = {},\n  onFilter,\n  onPress,\n  onSelect,\n  onSort,\n  ...others\n}) => {\n  const [focus, setFocus] = useState();\n\n  const isHead = dataSource === undefined;\n  const { testId } = others;\n\n  const handlePress = (field, event) => {\n    const { target: { type } = {} } = event;\n    if (CUSTOM_EVENT_TYPES.includes(type)) return;\n\n    isHead ? onSort(field) : onPress ? onPress(dataSource, event) : undefined;\n  };\n\n  const handleFocus = (field) => {\n    setFocus(field);\n  };\n\n  const handleSelect = (dataSource, event) => {\n    event.preventDefault();\n    onSelect(dataSource, event);\n  };\n\n  return (\n    <Primitive tag=\"tr\" {...others} className={styles(checked && style.selected, onPress && style.onPress)}>\n      {Object.keys(schema)\n        .filter((field) => !schema[field].hidden)\n        .map((field, index) => {\n          const { filter: hasFilter = true, label, sort: hasSort = true, tooltip, type = 'text' } = schema[field];\n          const fieldFilter = schema[field]?.bind || field;\n\n          return React.createElement(\n            Primitive,\n            {\n              tag: isHead ? 'th' : 'td',\n              testId: testId ? `${testId}-${field}` : undefined,\n              key: field,\n              onClick: !isHead || hasSort ? (event) => handlePress(field, event) : undefined,\n            },\n            <View\n              forceRow\n              tag=\"span\"\n              className={styles(\n                style.column,\n                onSelect && index === 0 && style.selectable,\n                !isHead && !(onSelect && index === 0) && style[type],\n              )}\n            >\n              {onSelect && index === 0 && (\n                <InputOption\n                  checked={checked}\n                  indeterminate={indeterminate}\n                  name=\"checkbox\"\n                  onChange={(value, event) => handleSelect(dataSource, event)}\n                  className={style.checkbox}\n                  testId={testId ? `${testId}-checkbox` : undefined}\n                />\n              )}\n\n              {isHead ? (\n                tooltip ? (\n                  <Tooltip text={tooltip}>\n                    <Primitive className={style.tooltip}>{label}</Primitive>\n                  </Tooltip>\n                ) : (\n                  label\n                )\n              ) : (\n                dataSource[field]\n              )}\n\n              {isHead && ((onSort && hasSort) || (onFilter && hasFilter)) && (\n                <View row className={style.icons}>\n                  {onSort && hasSort && (\n                    <Icon\n                      value={sort[field] === false ? ICON.UP : ICON.DOWN}\n                      className={styles(style.icon, sort[field] === undefined && style.disabled)}\n                    />\n                  )}\n                  {onFilter && hasFilter && (\n                    <ColumnFilter\n                      field={fieldFilter}\n                      l10n={l10n}\n                      schema={schema}\n                      visible={fieldFilter === focus}\n                      onFocus={handleFocus}\n                      onSubmit={onFilter}\n                    />\n                  )}\n                </View>\n              )}\n            </View>,\n          );\n        })}\n    </Primitive>\n  );\n};\n\nRow.displayName = 'Component:Table:Row';\n\nRow.propTypes = {\n  checked: PropTypes.bool,\n  dataSource: PropTypes.shape({}),\n  indeterminate: PropTypes.bool,\n  l10n: L10N_SHAPE,\n  schema: PropTypes.shape({}).isRequired,\n  sort: PropTypes.shape({}),\n  onFilter: PropTypes.func,\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n  onSort: PropTypes.func,\n};\n\nexport { Row };\n"],"mappings":"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"}

package/build/components/Table/Table.stories.js

@@ -1,5 +1,6 @@
 "use strict";
 
+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); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,11 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _ = require("../../");
 var _Table = require("./Table");
 var _TableStoriesModule = _interopRequireDefault(require("./Table.stories.module.css"));
-var _ref;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 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; }
-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); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 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."); }
@@ -20,9 +19,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
 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; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var _default = {
   title: 'Components'
 };
@@ -81,7 +77,7 @@ var dataSource = [{
     small: true
   }, "Click Me"),
   actionTitle: 'Click Me'
-}, (_ref = {
+}, {
   username: 'javi',
   email: 'hi@soyjavi.com',
   active: true,
@@ -90,9 +86,12 @@ var dataSource = [{
     checked: true,
     onChange: handleSwitch
   }),
-  tags: null,
-  languages: [2, 1, 0, 4]
-}, _defineProperty(_ref, "tags", tags(['EU', 'ES', 'EN', 'TH'])), _defineProperty(_ref, "year", 2022), _defineProperty(_ref, "twitter", 'soyjavi'), _defineProperty(_ref, "bio", "Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world."), _ref), {
+  languages: [2, 1, 0, 4],
+  tags: tags(['EU', 'ES', 'EN', 'TH']),
+  year: 2022,
+  twitter: 'soyjavi',
+  bio: "Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world."
+}, {
   username: 'victor',
   email: 'victor@mirai.com',
   active: false,

package/build/components/Table/Table.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","names":["title","tags","value","map","language","style","tag","handleSwitch","event","stopPropagation","console","log","dataSource","username","email","active","activeSwitch","year","undefined","action","languages","twitter","actionTitle","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","handlePress","handleSelect","table","storyName","args","filter","field","min","max","values","inline","l10n","actionCancel","actionSubmit","labelMax","labelMin","schema","label","tooltip","type","hidden","bind","sort","options","bio","testId","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, Icon, ICON, InputText, Switch, Text, View } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nconst tags = (value) =>\n  value.map((language) => (\n    <Text key={language} bold tiny className={style.tag}>\n      {language}\n    </Text>\n  ));\n\nconst handleSwitch = (value, event) => {\n  event.stopPropagation();\n  console.log('::switch::', value);\n};\n\nconst dataSource = [\n  {\n    username: 'jose',\n    email: 'jose@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    year: undefined,\n    action: null,\n  },\n  {\n    username: 'mario/1',\n    email: 'mario.1@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    languages: 1,\n    tags: tags(['ES']),\n    year: 0,\n  },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    languages: [3, 1, 0],\n    tags: tags(['RU', 'ES', 'EN']),\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n    actionTitle: 'Click Me',\n  },\n  {\n    username: 'javi',\n    email: 'hi@soyjavi.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    tags: null,\n    languages: [2, 1, 0, 4],\n    tags: tags(['EU', 'ES', 'EN', 'TH']),\n    year: 2022,\n    twitter: 'soyjavi',\n    bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n  },\n  {\n    username: 'victor',\n    email: 'victor@mirai.com',\n    active: false,\n    activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n    languages: [1, 0],\n    tags: tags(['ES', 'EN']),\n    year: 2021,\n  },\n  {\n    username: 'mario/2',\n    email: 'mario.2@mirai.com',\n    active: false,\n    activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n    languages: 1,\n    tags: tags(['ES']),\n    year: 2022,\n  },\n];\n\nexport const Story = (props) => {\n  const [selected, setSelected] = useState();\n  const [search, setSearch] = useState();\n\n  useEffect(() => {\n    setSearch(props.search);\n  }, [props.search]);\n\n  const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n  const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n  const handleSelect = (...others) => {\n    console.log('<Table>::onSelect', ...others);\n    setSelected(...others);\n  };\n\n  return (\n    <>\n      <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n      <Table\n        {...props}\n        search={search}\n        selected={selected}\n        onPress={handlePress}\n        onScroll={handleScroll}\n        onSelect={handleSelect}\n        className={style.table}\n      />\n    </>\n  );\n};\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource,\n  filter: [\n    { field: 'email', value: '@mirai.com' },\n    { field: 'nonExistent', value: '@mirai.com' },\n    { field: 'email', value: '@soyjavi.com' },\n    { field: 'year', min: 1, max: 2022 },\n    { field: 'languages', values: [3, 0] },\n  ],\n  inline: true,\n  l10n: {\n    actionCancel: 'Cancel',\n    actionSubmit: 'Submit',\n    labelMax: 'Max',\n    labelMin: 'Min',\n  },\n  schema: {\n    username: { label: 'User Name', tooltip: 'The name user is recognized.' },\n    email: { label: 'Email' },\n    active: { label: 'Active', type: 'boolean', hidden: true },\n    activeSwitch: {\n      label: 'Active',\n      type: 'component',\n      bind: 'active',\n      sort: false,\n      tooltip: 'Marks if user is available.',\n    },\n    tags: {\n      label: (\n        <View row className={style.label}>\n          <Text>🏷️</Text>\n          Languages\n        </View>\n      ),\n      type: 'component',\n      bind: 'languages',\n      tooltip: 'Spoken languages',\n    },\n    languages: {\n      hidden: true,\n      type: 'options',\n      options: { 1: 'Spanish', 2: 'Basque', 0: 'English', 3: 'Rusian', 4: 'Thai' },\n    },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    bio: { label: 'Biography' },\n    action: { label: 'Action', type: 'component', sort: false, filter: false },\n  },\n  search: '',\n  // store: 'mirai',\n  // inherited properties\n  testId: 'test-story',\n  style: {\n    background: 'green',\n  },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
+{"version":3,"file":"Table.stories.js","names":["title","tags","value","map","language","style","tag","handleSwitch","event","stopPropagation","console","log","dataSource","username","email","active","activeSwitch","year","undefined","action","languages","twitter","actionTitle","bio","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","handlePress","handleSelect","table","storyName","args","filter","field","min","max","values","inline","l10n","actionCancel","actionSubmit","labelMax","labelMin","schema","label","tooltip","type","hidden","bind","sort","options","testId","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, Icon, ICON, InputText, Switch, Text, View } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nconst tags = (value) =>\n  value.map((language) => (\n    <Text key={language} bold tiny className={style.tag}>\n      {language}\n    </Text>\n  ));\n\nconst handleSwitch = (value, event) => {\n  event.stopPropagation();\n  console.log('::switch::', value);\n};\n\nconst dataSource = [\n  {\n    username: 'jose',\n    email: 'jose@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    year: undefined,\n    action: null,\n  },\n  {\n    username: 'mario/1',\n    email: 'mario.1@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    languages: 1,\n    tags: tags(['ES']),\n    year: 0,\n  },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    languages: [3, 1, 0],\n    tags: tags(['RU', 'ES', 'EN']),\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n    actionTitle: 'Click Me',\n  },\n  {\n    username: 'javi',\n    email: 'hi@soyjavi.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    languages: [2, 1, 0, 4],\n    tags: tags(['EU', 'ES', 'EN', 'TH']),\n    year: 2022,\n    twitter: 'soyjavi',\n    bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n  },\n  {\n    username: 'victor',\n    email: 'victor@mirai.com',\n    active: false,\n    activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n    languages: [1, 0],\n    tags: tags(['ES', 'EN']),\n    year: 2021,\n  },\n  {\n    username: 'mario/2',\n    email: 'mario.2@mirai.com',\n    active: false,\n    activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n    languages: 1,\n    tags: tags(['ES']),\n    year: 2022,\n  },\n];\n\nexport const Story = (props) => {\n  const [selected, setSelected] = useState();\n  const [search, setSearch] = useState();\n\n  useEffect(() => {\n    setSearch(props.search);\n  }, [props.search]);\n\n  const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n  const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n  const handleSelect = (...others) => {\n    console.log('<Table>::onSelect', ...others);\n    setSelected(...others);\n  };\n\n  return (\n    <>\n      <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n      <Table\n        {...props}\n        search={search}\n        selected={selected}\n        onPress={handlePress}\n        onScroll={handleScroll}\n        onSelect={handleSelect}\n        className={style.table}\n      />\n    </>\n  );\n};\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource,\n  filter: [\n    { field: 'email', value: '@mirai.com' },\n    { field: 'nonExistent', value: '@mirai.com' },\n    { field: 'email', value: '@soyjavi.com' },\n    { field: 'year', min: 1, max: 2022 },\n    { field: 'languages', values: [3, 0] },\n  ],\n  inline: true,\n  l10n: {\n    actionCancel: 'Cancel',\n    actionSubmit: 'Submit',\n    labelMax: 'Max',\n    labelMin: 'Min',\n  },\n  schema: {\n    username: { label: 'User Name', tooltip: 'The name user is recognized.' },\n    email: { label: 'Email' },\n    active: { label: 'Active', type: 'boolean', hidden: true },\n    activeSwitch: {\n      label: 'Active',\n      type: 'component',\n      bind: 'active',\n      sort: false,\n      tooltip: 'Marks if user is available.',\n    },\n    tags: {\n      label: (\n        <View row className={style.label}>\n          <Text>🏷️</Text>\n          Languages\n        </View>\n      ),\n      type: 'component',\n      bind: 'languages',\n      tooltip: 'Spoken languages',\n    },\n    languages: {\n      hidden: true,\n      type: 'options',\n      options: { 1: 'Spanish', 2: 'Basque', 0: 'English', 3: 'Rusian', 4: 'Thai' },\n    },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    bio: { label: 'Biography' },\n    action: { label: 'Action', type: 'component', sort: false, filter: false },\n  },\n  search: '',\n  // store: 'mirai',\n  // inherited properties\n  testId: 'test-story',\n  style: {\n    background: 'green',\n  },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}

package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap

@@ -3,7 +3,7 @@
 exports[`component:<Table> inherit:className 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container mirai"
+    class="scrollview snap vertical notIndicator container mirai"
   >
     <table
       class="table"
@@ -425,7 +425,7 @@ exports[`component:<Table> inherit:className 1`] = `
 exports[`component:<Table> prop:filter 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container"
+    class="scrollview snap vertical notIndicator container"
   >
     <div
       class="view row wide filters"
@@ -1014,7 +1014,7 @@ exports[`component:<Table> prop:filter 1`] = `
 exports[`component:<Table> prop:inline (false 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container outlined"
+    class="scrollview snap vertical notIndicator container outlined"
   >
     <table
       class="table"
@@ -1436,7 +1436,7 @@ exports[`component:<Table> prop:inline (false 1`] = `
 exports[`component:<Table> prop:onScroll 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container"
+    class="scrollview snap vertical notIndicator container"
     data-testid="onScroll"
   >
     <table
@@ -1955,7 +1955,7 @@ exports[`component:<Table> prop:onScroll 1`] = `
 exports[`component:<Table> prop:onSelect 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container"
+    class="scrollview snap vertical notIndicator container"
     data-testid="onSelect"
   >
     <table
@@ -2594,7 +2594,7 @@ exports[`component:<Table> prop:onSelect 1`] = `
 exports[`component:<Table> prop:search 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container"
+    class="scrollview snap vertical notIndicator container"
   >
     <table
       class="table"
@@ -2814,7 +2814,7 @@ exports[`component:<Table> prop:search 1`] = `
 exports[`component:<Table> prop:selected 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container"
+    class="scrollview snap vertical notIndicator container"
   >
     <table
       class="table"
@@ -3238,7 +3238,7 @@ exports[`component:<Table> prop:selected 1`] = `
 exports[`component:<Table> prop:store 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container"
+    class="scrollview snap vertical notIndicator container"
   >
     <div
       class="view row wide filters"
@@ -3610,7 +3610,7 @@ exports[`component:<Table> prop:store 1`] = `
 exports[`component:<Table> renders 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container"
+    class="scrollview snap vertical notIndicator container"
   >
     <table
       class="table"
@@ -4032,7 +4032,7 @@ exports[`component:<Table> renders 1`] = `
 exports[`component:<Table> testId 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap container"
+    class="scrollview snap vertical notIndicator container"
     data-testid="mirai"
   >
     <table

package/build/primitives/Layer/Layer.js

@@ -77,7 +77,8 @@ var Layer = function Layer(_ref) {
       scrollTop: (_getScrollParent = (0, _helpers2.getScrollParent)(componentEl)) === null || _getScrollParent === void 0 ? void 0 : _getScrollParent.scrollTop
     });
     var contentLayout = (0, _helpers2.getElementLayout)(contentEl);
-    var _getLayerPosition = (0, _helpers2.getLayerPosition)(componentLayout, contentLayout, device, {
+    var modal = (0, _helpers2.getModalParent)(componentEl);
+    var _getLayerPosition = (0, _helpers2.getLayerPosition)(componentLayout, contentLayout, device, modal, {
         centered: centered,
         forceBottom: forceBottom,
         forceLeft: forceLeft,

package/build/primitives/Layer/Layer.js.map

@@ -1 +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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"}
+{"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","modal","getModalParent","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, getModalParent, 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    const modal = getModalParent(componentEl);\n    const {\n      left = 0,\n      top = 0,\n      orientation = {},\n    } = getLayerPosition(componentLayout, contentLayout, device, modal, {\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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"}

package/build/primitives/Layer/helpers/getLayerPosition.js

@@ -14,7 +14,8 @@ var getLayerPosition = function getLayerPosition() {
   var componentLayout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var contentLayout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var device = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var _ref = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {},
+  var modal = arguments.length > 3 ? arguments[3] : undefined;
+  var _ref = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {},
     centered = _ref.centered,
     forceBottom = _ref.forceBottom,
     forceLeft = _ref.forceLeft,
@@ -38,17 +39,20 @@ var getLayerPosition = function getLayerPosition() {
     contentWidth = _contentLayout$width === void 0 ? 0 : _contentLayout$width,
     _contentLayout$height = contentLayout.height,
     contentHeight = _contentLayout$height === void 0 ? 0 : _contentLayout$height;
-  var _device$height = device.height,
-    height = _device$height === void 0 ? 0 : _device$height,
-    _device$width = device.width,
-    width = _device$width === void 0 ? 0 : _device$width;
+  var _ref2 = modal || device,
+    _ref2$height = _ref2.height,
+    height = _ref2$height === void 0 ? 0 : _ref2$height,
+    _ref2$width = _ref2.width,
+    width = _ref2$width === void 0 ? 0 : _ref2$width;
   var aline = centered && (forceLeft || forceRight);
+  var offsetLeft = modal ? componentLeft : screenLeft;
+  var offsetTop = modal ? componentTop : screenTop;
   var orientation = {
     left: true
   };
   var top = componentTop + componentHeight - scrollTop;
-  var gapBottom = height - (screenTop + componentHeight);
-  if (contentHeight > gapBottom && screenTop > gapBottom && !forceBottom || forceTop) {
+  var gapBottom = height - (offsetTop + componentHeight);
+  if (contentHeight > gapBottom && offsetTop > gapBottom && !forceBottom || forceTop) {
     top = componentTop - contentHeight - scrollTop;
     orientation = _objectSpread(_objectSpread({}, orientation), {}, {
       top: true
@@ -56,7 +60,7 @@ var getLayerPosition = function getLayerPosition() {
   }
   var left = componentLeft;
   var gapLeft = componentLeft + componentWidth;
-  var gapRight = width - screenLeft;
+  var gapRight = width - offsetLeft;
   if (contentWidth > gapRight && gapLeft > gapRight && !forceLeft || forceRight) {
     left = componentLeft - contentWidth + componentWidth;
     orientation = _objectSpread(_objectSpread({}, orientation), {}, {

package/build/primitives/Layer/helpers/getLayerPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"getLayerPosition.js","names":["getLayerPosition","componentLayout","contentLayout","device","centered","forceBottom","forceLeft","forceRight","forceTop","left","componentLeft","scrollTop","top","componentTop","width","componentWidth","height","componentHeight","screenLeft","screenTop","contentWidth","contentHeight","aline","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  { 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 } = device;\n  const aline = centered && (forceLeft || forceRight);\n  let orientation = { left: true };\n\n  let top = componentTop + componentHeight - scrollTop;\n  const gapBottom = height - (screenTop + componentHeight);\n  if ((contentHeight > gapBottom && screenTop > gapBottom && !forceBottom) || forceTop) {\n    top = componentTop - contentHeight - scrollTop;\n    orientation = { ...orientation, top: true };\n  }\n\n  let left = componentLeft;\n  const gapLeft = componentLeft + componentWidth;\n  const gapRight = width - screenLeft;\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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"}
+{"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 = componentLeft + 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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"}

package/build/primitives/Layer/helpers/getModalParent.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getModalParent = void 0;
+var getModalParent = function getModalParent(node) {
+  var _attributes$dataRole;
+  if (!node || node.tagName === 'HTML') return;
+  var attributes = node.attributes,
+    height = node.offsetHeight,
+    width = node.offsetWidth,
+    parentNode = node.parentNode;
+  return ((_attributes$dataRole = attributes['data-role']) === null || _attributes$dataRole === void 0 ? void 0 : _attributes$dataRole.value) === 'modal-content' ? {
+    height: height,
+    width: width
+  } : getModalParent(parentNode);
+};
+exports.getModalParent = getModalParent;
+//# sourceMappingURL=getModalParent.js.map

package/build/primitives/Layer/helpers/getModalParent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getModalParent.js","names":["getModalParent","node","tagName","attributes","height","offsetHeight","width","offsetWidth","parentNode","value"],"sources":["../../../../src/primitives/Layer/helpers/getModalParent.js"],"sourcesContent":["export const getModalParent = (node) => {\n  if (!node || node.tagName === 'HTML') return;\n\n  const { attributes, offsetHeight: height, offsetWidth: width, parentNode } = node;\n\n  return attributes['data-role']?.value === 'modal-content' ? { height, width } : getModalParent(parentNode);\n};\n"],"mappings":";;;;;;AAAO,IAAMA,cAAc,GAAG,SAAjBA,cAAc,CAAIC,IAAI,EAAK;EAAA;EACtC,IAAI,CAACA,IAAI,IAAIA,IAAI,CAACC,OAAO,KAAK,MAAM,EAAE;EAEtC,IAAQC,UAAU,GAA2DF,IAAI,CAAzEE,UAAU;IAAgBC,MAAM,GAAqCH,IAAI,CAA7DI,YAAY;IAAuBC,KAAK,GAAiBL,IAAI,CAAvCM,WAAW;IAASC,UAAU,GAAKP,IAAI,CAAnBO,UAAU;EAExE,OAAO,yBAAAL,UAAU,CAAC,WAAW,CAAC,yDAAvB,qBAAyBM,KAAK,MAAK,eAAe,GAAG;IAAEL,MAAM,EAANA,MAAM;IAAEE,KAAK,EAALA;EAAM,CAAC,GAAGN,cAAc,CAACQ,UAAU,CAAC;AAC5G,CAAC;AAAC"}

package/build/primitives/Layer/helpers/index.js

@@ -25,6 +25,17 @@ Object.keys(_getLayerPosition).forEach(function (key) {
     }
   });
 });
+var _getModalParent = require("./getModalParent");
+Object.keys(_getModalParent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getModalParent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getModalParent[key];
+    }
+  });
+});
 var _getScrollParent = require("./getScrollParent");
 Object.keys(_getScrollParent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/build/primitives/Layer/helpers/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/primitives/Layer/helpers/index.js"],"sourcesContent":["export * from './getElementLayout';\nexport * from './getLayerPosition';\nexport * from './getScrollParent';\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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/primitives/Layer/helpers/index.js"],"sourcesContent":["export * from './getElementLayout';\nexport * from './getLayerPosition';\nexport * from './getModalParent';\nexport * from './getScrollParent';\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;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/primitives/ScrollView/ScrollView.js

@@ -29,7 +29,8 @@ var ScrollView = function ScrollView(_ref) {
     horizontal = _ref.horizontal,
     _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 16 : _ref$scrollEventThrot,
-    scrollIndicator = _ref.scrollIndicator,
+    _ref$scrollIndicator = _ref.scrollIndicator,
+    scrollIndicator = _ref$scrollIndicator === void 0 ? false : _ref$scrollIndicator,
     scrollTo = _ref.scrollTo,
     _ref$snap = _ref.snap,
     snap = _ref$snap === void 0 ? true : _ref$snap,
@@ -77,7 +78,7 @@ var ScrollView = function ScrollView(_ref) {
     role: others.role || 'scrollview',
     tag: tag,
     onScroll: onScroll ? handleScroll : undefined,
-    className: (0, _helpers.styles)(_ScrollViewModule.default.scrollview, snap && _ScrollViewModule.default.snap, horizontal && _ScrollViewModule.default.horizontal, scrollIndicator && _ScrollViewModule.default.indicator, others.className),
+    className: (0, _helpers.styles)(_ScrollViewModule.default.scrollview, snap && _ScrollViewModule.default.snap, horizontal ? _ScrollViewModule.default.horizontal : _ScrollViewModule.default.vertical, !scrollIndicator && _ScrollViewModule.default.notIndicator, others.className),
     style: _objectSpread(_objectSpread({}, others.style), {}, {
       height: height,
       width: width

package/build/primitives/ScrollView/ScrollView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["ScrollView","behavior","children","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","snap","tag","width","onScroll","others","ref","useRef","timeout","useEffect","current","undefined","handleScroll","target","clientHeight","clientWidth","scrollHeight","scrollWidth","scrollTop","scrollLeft","x","parseInt","y","offsetX","offsetY","clearTimeout","setTimeout","percentX","percentY","React","createElement","Primitive","role","className","styles","style","scrollview","indicator","displayName","propTypes","PropTypes","string","node","isRequired","number","bool","func"],"sources":["../../../src/primitives/ScrollView/ScrollView.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './ScrollView.module.css';\n\nconst ScrollView = ({\n  behavior = 'smooth',\n  children,\n  height,\n  horizontal,\n  scrollEventThrottle = 16, // * 60fps\n  scrollIndicator,\n  scrollTo,\n  snap = true,\n  tag = 'div',\n  width,\n  onScroll,\n  ...others\n}) => {\n  const ref = useRef();\n\n  let timeout = null;\n\n  useEffect(() => {\n    const { current = {} } = ref || {};\n    if (!current.scrollTo || scrollTo === undefined) return;\n\n    current.scrollTo({ [horizontal ? 'left' : 'top']: scrollTo, behavior });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollTo]);\n\n  const handleScroll = ({\n    target: { clientHeight, clientWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft } = {},\n  }) => {\n    const x = parseInt(scrollLeft, 10);\n    const y = parseInt(scrollTop, 10);\n    const offsetX = scrollWidth - clientWidth;\n    const offsetY = scrollHeight - clientHeight;\n\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      onScroll({\n        x,\n        y,\n        percentX: offsetX ? parseInt((x * 100) / offsetX, 10) : 0,\n        percentY: offsetY ? parseInt((y * 100) / offsetY, 10) : 0,\n      });\n    }, scrollEventThrottle);\n  };\n\n  return React.createElement(\n    Primitive,\n    {\n      ...others,\n      ref,\n      role: others.role || 'scrollview',\n      tag,\n      onScroll: onScroll ? handleScroll : undefined,\n      className: styles(\n        style.scrollview,\n        snap && style.snap,\n        horizontal && style.horizontal,\n        scrollIndicator && style.indicator,\n        others.className,\n      ),\n      style: { ...others.style, height, width },\n    },\n    children,\n  );\n};\n\nScrollView.displayName = 'Primitive:ScrollView';\n\nScrollView.propTypes = {\n  behavior: PropTypes.string,\n  children: PropTypes.node.isRequired,\n  height: PropTypes.number,\n  horizontal: PropTypes.bool,\n  scrollEventThrottle: PropTypes.number,\n  scrollIndicator: PropTypes.bool,\n  scrollTo: PropTypes.number,\n  snap: PropTypes.bool,\n  tag: PropTypes.string,\n  width: PropTypes.number,\n  onScroll: PropTypes.func,\n};\n\nexport { ScrollView };\n"],"mappings":"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"}
+{"version":3,"file":"ScrollView.js","names":["ScrollView","behavior","children","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","snap","tag","width","onScroll","others","ref","useRef","timeout","useEffect","current","undefined","handleScroll","target","clientHeight","clientWidth","scrollHeight","scrollWidth","scrollTop","scrollLeft","x","parseInt","y","offsetX","offsetY","clearTimeout","setTimeout","percentX","percentY","React","createElement","Primitive","role","className","styles","style","scrollview","vertical","notIndicator","displayName","propTypes","PropTypes","string","node","isRequired","number","bool","func"],"sources":["../../../src/primitives/ScrollView/ScrollView.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport style from './ScrollView.module.css';\n\nconst ScrollView = ({\n  behavior = 'smooth',\n  children,\n  height,\n  horizontal,\n  scrollEventThrottle = 16, // * 60fps\n  scrollIndicator = false,\n  scrollTo,\n  snap = true,\n  tag = 'div',\n  width,\n  onScroll,\n  ...others\n}) => {\n  const ref = useRef();\n\n  let timeout = null;\n\n  useEffect(() => {\n    const { current = {} } = ref || {};\n    if (!current.scrollTo || scrollTo === undefined) return;\n\n    current.scrollTo({ [horizontal ? 'left' : 'top']: scrollTo, behavior });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollTo]);\n\n  const handleScroll = ({\n    target: { clientHeight, clientWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft } = {},\n  }) => {\n    const x = parseInt(scrollLeft, 10);\n    const y = parseInt(scrollTop, 10);\n    const offsetX = scrollWidth - clientWidth;\n    const offsetY = scrollHeight - clientHeight;\n\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      onScroll({\n        x,\n        y,\n        percentX: offsetX ? parseInt((x * 100) / offsetX, 10) : 0,\n        percentY: offsetY ? parseInt((y * 100) / offsetY, 10) : 0,\n      });\n    }, scrollEventThrottle);\n  };\n\n  return React.createElement(\n    Primitive,\n    {\n      ...others,\n      ref,\n      role: others.role || 'scrollview',\n      tag,\n      onScroll: onScroll ? handleScroll : undefined,\n      className: styles(\n        style.scrollview,\n        snap && style.snap,\n        horizontal ? style.horizontal : style.vertical,\n        !scrollIndicator && style.notIndicator,\n        others.className,\n      ),\n      style: { ...others.style, height, width },\n    },\n    children,\n  );\n};\n\nScrollView.displayName = 'Primitive:ScrollView';\n\nScrollView.propTypes = {\n  behavior: PropTypes.string,\n  children: PropTypes.node.isRequired,\n  height: PropTypes.number,\n  horizontal: PropTypes.bool,\n  scrollEventThrottle: PropTypes.number,\n  scrollIndicator: PropTypes.bool,\n  scrollTo: PropTypes.number,\n  snap: PropTypes.bool,\n  tag: PropTypes.string,\n  width: PropTypes.number,\n  onScroll: PropTypes.func,\n};\n\nexport { ScrollView };\n"],"mappings":"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"}

package/build/primitives/ScrollView/ScrollView.module.css

@@ -5,34 +5,30 @@
   width: fit-content;
 }
 
-.scrollview:not(.horizontal) {
+.scrollview.horizontal {
+  flex-direction: row;
+  overflow-x: scroll;
+}
+
+.scrollview.vertical {
   flex-direction: column;
   overflow-y: scroll;
 }
 
-.scrollview.snap:not(.horizontal) {
+.scrollview.snap.vertical {
   scroll-snap-type: y mandatory;
 }
 
-.scrollview.horizontal {
-  flex-direction: row;
-  overflow-x: scroll;
-}
-
 .scrollview.snap.horizontal {
   scroll-snap-type: x mandatory;
 }
 
-.indicator {
-  /* TODO: Just need this empty class */
-}
-
-.scrollview:not(.indicator) {
+.scrollview.notIndicator {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
 
-.scrollview:not(.indicator)::-webkit-scrollbar {
+.scrollview.notIndicator::-webkit-scrollbar {
   display: none;
 }
 

package/build/primitives/ScrollView/__tests__/__snapshots__/ScrollView.test.js.snap

@@ -3,7 +3,7 @@
 exports[`primitive:<ScrollView> inherit:className 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap mirai"
+    class="scrollview snap vertical notIndicator mirai"
   >
     <div
       style="height: 128px; width: 128px;"
@@ -62,7 +62,7 @@ exports[`primitive:<ScrollView> inherit:className 1`] = `
 exports[`primitive:<ScrollView> prop:height 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap"
+    class="scrollview snap vertical notIndicator"
     style="height: 256px;"
   >
     <div
@@ -122,7 +122,7 @@ exports[`primitive:<ScrollView> prop:height 1`] = `
 exports[`primitive:<ScrollView> prop:horizontal 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap horizontal"
+    class="scrollview snap horizontal notIndicator"
   >
     <div
       style="height: 128px; width: 128px;"
@@ -181,7 +181,7 @@ exports[`primitive:<ScrollView> prop:horizontal 1`] = `
 exports[`primitive:<ScrollView> prop:scrollIndicator 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap indicator"
+    class="scrollview snap vertical"
   >
     <div
       style="height: 128px; width: 128px;"
@@ -240,7 +240,7 @@ exports[`primitive:<ScrollView> prop:scrollIndicator 1`] = `
 exports[`primitive:<ScrollView> prop:scrollto 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap"
+    class="scrollview snap vertical notIndicator"
   >
     <div
       style="height: 128px; width: 128px;"
@@ -299,7 +299,7 @@ exports[`primitive:<ScrollView> prop:scrollto 1`] = `
 exports[`primitive:<ScrollView> prop:snap 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview"
+    class="scrollview vertical notIndicator"
   >
     <div
       style="height: 128px; width: 128px;"
@@ -358,7 +358,7 @@ exports[`primitive:<ScrollView> prop:snap 1`] = `
 exports[`primitive:<ScrollView> prop:tag 1`] = `
 <DocumentFragment>
   <section
-    class="scrollview snap"
+    class="scrollview snap vertical notIndicator"
   >
     <div
       style="height: 128px; width: 128px;"
@@ -417,7 +417,7 @@ exports[`primitive:<ScrollView> prop:tag 1`] = `
 exports[`primitive:<ScrollView> prop:width 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap"
+    class="scrollview snap vertical notIndicator"
     style="width: 256px;"
   >
     <div
@@ -477,7 +477,7 @@ exports[`primitive:<ScrollView> prop:width 1`] = `
 exports[`primitive:<ScrollView> renders 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap"
+    class="scrollview snap vertical notIndicator"
   >
     <div
       style="height: 128px; width: 128px;"
@@ -536,7 +536,7 @@ exports[`primitive:<ScrollView> renders 1`] = `
 exports[`primitive:<ScrollView> testId 1`] = `
 <DocumentFragment>
   <div
-    class="scrollview snap"
+    class="scrollview snap vertical notIndicator"
     data-testid="mirai"
   >
     <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.209",
+  "version": "1.0.211",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",