@mirai/ui 2.0.1 → 2.0.3

package/README.md

@@ -350,6 +350,7 @@ A primitive for displaying text. It receives the following props:
 - `level:number` assign the level of heading (1, 2, 3 or 4)
 - `light:boolean` use theme's content-light color
 - `markdown:boolean` if true renders content as parsed markdown
+- `medium:boolean` modifying font-weight
 - `small:boolean` modifying font-size
 - `success:boolean` use theme's success color
 - `tag:string` html tag of resulting element

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

@@ -6,7 +6,7 @@ exports[`component:<Calendar> desktop environment prop:captions 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -1532,7 +1532,7 @@ exports[`component:<Calendar> desktop environment prop:disabledDates 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -2753,7 +2753,7 @@ exports[`component:<Calendar> desktop environment prop:disabledPast 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -4000,7 +4000,7 @@ exports[`component:<Calendar> desktop environment prop:format 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -5221,7 +5221,7 @@ exports[`component:<Calendar> desktop environment prop:from 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -6442,7 +6442,7 @@ exports[`component:<Calendar> desktop environment prop:highlights 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -7663,7 +7663,7 @@ exports[`component:<Calendar> desktop environment prop:locale 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -8884,7 +8884,7 @@ exports[`component:<Calendar> desktop environment prop:locale en-US 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -10105,7 +10105,7 @@ exports[`component:<Calendar> desktop environment prop:months 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -11912,7 +11912,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:disabledDates
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -13133,7 +13133,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMaxDays 1
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -14354,7 +14354,7 @@ exports[`component:<Calendar> desktop environment prop:range prop:rangeMinDays 1
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -15575,7 +15575,7 @@ exports[`component:<Calendar> desktop environment prop:range renders 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -16796,7 +16796,7 @@ exports[`component:<Calendar> desktop environment prop:to 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -17991,7 +17991,7 @@ exports[`component:<Calendar> desktop environment renders 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -19212,7 +19212,7 @@ exports[`component:<Calendar> inherit:className 1`] = `
     class="view calendar mirai"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -20433,7 +20433,7 @@ exports[`component:<Calendar> mobile environment prop:captions 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -21959,7 +21959,7 @@ exports[`component:<Calendar> mobile environment prop:disabledDates 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -23180,7 +23180,7 @@ exports[`component:<Calendar> mobile environment prop:disabledPast 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -24427,7 +24427,7 @@ exports[`component:<Calendar> mobile environment prop:format 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -25648,7 +25648,7 @@ exports[`component:<Calendar> mobile environment prop:from 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -26869,7 +26869,7 @@ exports[`component:<Calendar> mobile environment prop:highlights 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -28090,7 +28090,7 @@ exports[`component:<Calendar> mobile environment prop:locale 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -29311,7 +29311,7 @@ exports[`component:<Calendar> mobile environment prop:locale en-US 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -30532,7 +30532,7 @@ exports[`component:<Calendar> mobile environment prop:months 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -32339,7 +32339,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:disabledDates 1
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -33560,7 +33560,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMaxDays 1`
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -34781,7 +34781,7 @@ exports[`component:<Calendar> mobile environment prop:range prop:rangeMinDays 1`
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -36002,7 +36002,7 @@ exports[`component:<Calendar> mobile environment prop:range renders 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -37223,7 +37223,7 @@ exports[`component:<Calendar> mobile environment prop:to 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -38418,7 +38418,7 @@ exports[`component:<Calendar> mobile environment renders 1`] = `
     class="view calendar"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"
@@ -39640,7 +39640,7 @@ exports[`component:<Calendar> testId 1`] = `
     data-testid="mirai"
   >
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollview"
+      class="scrollview snap horizontal scrollview"
     >
       <ui_view
         class="view month"

package/build/components/Modal/Modal.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Modal = void 0;
-var _dataSources = require("@mirai/data-sources");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -34,6 +33,11 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+// import { Event } from '@mirai/data-sources';
+var Event = {
+  publish: function publish() {},
+  subscribe: function subscribe() {}
+};
 var Modal = function Modal(_ref) {
   var _ref$blur = _ref.blur,
     blur = _ref$blur === void 0 ? false : _ref$blur,
@@ -72,7 +76,7 @@ var Modal = function Modal(_ref) {
     setDataset = _useState2[1];
   (0, _react.useEffect)(function () {
     if (!visible || !onClose) return;
-    _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+    Event.publish(_Modal.EVENT_VISIBLE, {
       visible: visible,
       displayName: displayName
     });
@@ -101,7 +105,7 @@ var Modal = function Modal(_ref) {
     var _ref$current;
     var target = event.target;
     if (onOverflow && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target))) {
-      _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+      Event.publish(_Modal.EVENT_VISIBLE, {
         visible: false,
         displayName: displayName
       });
@@ -109,7 +113,7 @@ var Modal = function Modal(_ref) {
     }
   };
   var handleClose = function handleClose(event) {
-    _dataSources.Event.publish(_Modal.EVENT_VISIBLE, {
+    Event.publish(_Modal.EVENT_VISIBLE, {
       visible: false,
       displayName: displayName
     });

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","aria","buttonBack","ariaBack","buttonClose","ariaClose","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","Event","publish","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","tag","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func","shape"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import { Event } from '@mirai/data-sources';\nimport 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 { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  aria: { buttonBack: ariaBack = 'Back', buttonClose: ariaClose = 'Close' } = {},\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n    const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\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\n    if (onOverflow && !ref.current?.contains(target)) {\n      Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n      onOverflow(event);\n    }\n  };\n\n  const handleClose = (event) => {\n    Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n    onClose(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={`${others.role || 'modal'}-overflow`}\n      tag={`${others.tag || 'modal'}_overflow`}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\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        aria-hidden={visible ? 'false' : 'true'}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={onBack}\n                aria-label={ariaBack}\n                testId={testId ? `${testId}-button-back` : undefined}\n              >\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={handleClose}\n                className={style.button}\n                aria-label={ariaClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: 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  aria: PropTypes.shape({\n    buttonBack: PropTypes.string,\n    buttonClose: PropTypes.string,\n  }),\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Event","publish","subscribe","Modal","blur","children","displayName","fit","mobileBehavior","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","aria","buttonBack","ariaBack","buttonClose","ariaClose","others","useDevice","isDesktop","isMobile","height","ref","useRef","useState","dataset","setDataset","useEffect","EVENT_VISIBLE","handleKeydown","event","key","handleClose","document","addEventListener","removeEventListener","body","miraiModal","undefined","handleOverflow","target","current","contains","defaultDirection","Theme","getDirection","DIRECTION_TYPE","LEFT","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","role","tag","styles","style","container","modal","calcWidth","className","header","reverse","hideBack","hideClose","ICON","icon","button","CLOSE","EXPAND_MORE","React","Children","map","child","index","cloneElement","props","propTypes","PropTypes","bool","node","string","func","shape"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["// import { Event } from '@mirai/data-sources';\nconst Event = {\n  publish: () => {},\n  subscribe: () => {},\n};\nimport 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 { DIRECTION_TYPE, Theme } from '../../theme';\nimport { EVENT_VISIBLE } from './Modal.constants';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  displayName,\n  fit = false,\n  mobileBehavior = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  aria: { buttonBack: ariaBack = 'Back', buttonClose: ariaClose = 'Close' } = {},\n  ...others\n}) => {\n  const { isDesktop, isMobile, height } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (!visible || !onClose) return;\n    Event.publish(EVENT_VISIBLE, { visible, displayName });\n\n    const handleKeydown = (event) => event.key === 'Escape' && handleClose();\n\n    document.addEventListener('keydown', handleKeydown);\n    return () => document.removeEventListener('keydown', handleKeydown);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [visible]);\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\n    if (onOverflow && !ref.current?.contains(target)) {\n      Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n      onOverflow(event);\n    }\n  };\n\n  const handleClose = (event) => {\n    Event.publish(EVENT_VISIBLE, { visible: false, displayName });\n    onClose(event);\n  };\n\n  const defaultDirection = Theme.getDirection() === DIRECTION_TYPE.LEFT;\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n  const { testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      role={`${others.role || 'modal'}-overflow`}\n      tag={`${others.tag || 'modal'}_overflow`}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      className={styles(\n        style.container,\n        isDesktop && mobileBehavior && style.mobileBehavior,\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        aria-hidden={visible ? 'false' : 'true'}\n      >\n        {(title || onBack || onClose) && (\n          <View\n            row\n            className={styles(\n              style.header,\n              !defaultDirection && style.reverse,\n              !onBack && style.hideBack,\n              !onClose && style.hideClose,\n            )}\n          >\n            {onBack && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={onBack}\n                aria-label={ariaBack}\n                testId={testId ? `${testId}-button-back` : undefined}\n              >\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Button>\n            )}\n            {title && (\n              <Text headline={!isMobile} className={style.title}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Button\n                small\n                squared\n                transparent\n                onPress={handleClose}\n                className={style.button}\n                aria-label={ariaClose}\n                testId={testId ? `${testId}-button-close` : undefined}\n              >\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Button>\n            )}\n          </View>\n        )}\n\n        {React.Children.map(children, (child, index) =>\n          !child || child === null\n            ? null\n            : React.cloneElement(child, { key: child.key || index, ...child.props, role: 'modal-content' }),\n        )}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.displayName = 'Component:Modal';\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  displayName: PropTypes.string,\n  fit: PropTypes.bool,\n  mobileBehavior: 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  aria: PropTypes.shape({\n    buttonBack: PropTypes.string,\n    buttonClose: PropTypes.string,\n  }),\n};\n\nexport { Modal };\n"],"mappings":"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"}

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

@@ -33,7 +33,7 @@ exports[`component:<Slider> inherit:className 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -148,7 +148,7 @@ exports[`component:<Slider> prop:auto 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -263,7 +263,7 @@ exports[`component:<Slider> prop:behavior 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -378,7 +378,7 @@ exports[`component:<Slider> prop:captions 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -538,7 +538,7 @@ exports[`component:<Slider> prop:index 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -653,7 +653,7 @@ exports[`component:<Slider> prop:indicator 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -776,7 +776,7 @@ exports[`component:<Slider> prop:onCounter 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -922,7 +922,7 @@ exports[`component:<Slider> prop:replay (false) 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -1037,7 +1037,7 @@ exports[`component:<Slider> renders 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -1152,7 +1152,7 @@ exports[`component:<Slider> tag 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view
@@ -1268,7 +1268,7 @@ exports[`component:<Slider> testId 1`] = `
       </ui_icon>
     </ui_pressable>
     <ui_scrollview
-      class="scrollview snap horizontal notIndicator scrollView"
+      class="scrollview snap horizontal scrollView"
       style="width: 360px;"
     >
       <ui_view

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

@@ -3,7 +3,7 @@
 exports[`component:<Table> inherit:className 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container mirai"
+    class="scrollview snap vertical container mirai"
   >
     <table
       class="table"
@@ -427,7 +427,7 @@ exports[`component:<Table> inherit:className 1`] = `
 exports[`component:<Table> prop:filter 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
   >
     <ui_view
       class="view row wide filters"
@@ -1036,7 +1036,7 @@ exports[`component:<Table> prop:filter 1`] = `
 exports[`component:<Table> prop:inline (false 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container outlined"
+    class="scrollview snap vertical container outlined"
   >
     <table
       class="table"
@@ -1460,7 +1460,7 @@ exports[`component:<Table> prop:inline (false 1`] = `
 exports[`component:<Table> prop:onScroll 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
     data-testid="onScroll"
   >
     <table
@@ -1981,7 +1981,7 @@ exports[`component:<Table> prop:onScroll 1`] = `
 exports[`component:<Table> prop:onSelect 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
     data-testid="onSelect"
   >
     <table
@@ -2630,7 +2630,7 @@ exports[`component:<Table> prop:onSelect 1`] = `
 exports[`component:<Table> prop:pagination 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
   >
     <table
       class="table"
@@ -2953,7 +2953,7 @@ exports[`component:<Table> prop:pagination 1`] = `
 exports[`component:<Table> prop:search 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
   >
     <table
       class="table"
@@ -3175,7 +3175,7 @@ exports[`component:<Table> prop:search 1`] = `
 exports[`component:<Table> prop:selected 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
   >
     <table
       class="table"
@@ -3599,7 +3599,7 @@ exports[`component:<Table> prop:selected 1`] = `
 exports[`component:<Table> prop:sort 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
   >
     <table
       class="table"
@@ -3898,7 +3898,7 @@ exports[`component:<Table> prop:sort 1`] = `
 exports[`component:<Table> prop:store 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
   >
     <ui_view
       class="view row wide filters"
@@ -4288,7 +4288,7 @@ exports[`component:<Table> prop:store 1`] = `
 exports[`component:<Table> renders 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
   >
     <table
       class="table"
@@ -4712,7 +4712,7 @@ exports[`component:<Table> renders 1`] = `
 exports[`component:<Table> tag 1`] = `
 <DocumentFragment>
   <ui_tag
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
   >
     <table
       class="table"
@@ -5136,7 +5136,7 @@ exports[`component:<Table> tag 1`] = `
 exports[`component:<Table> testId 1`] = `
 <DocumentFragment>
   <ui_scrollview
-    class="scrollview snap vertical notIndicator container"
+    class="scrollview snap vertical container"
     data-testid="mirai"
   >
     <table

package/build/primitives/ScrollView/ScrollView.js

@@ -8,7 +8,9 @@ exports.ScrollView = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
+var _Icon = require("../Icon");
 var _Primitive = require("../Primitive");
+var _View = require("../View");
 var _ScrollViewModule = _interopRequireDefault(require("./ScrollView.module.css"));
 var _excluded = ["behavior", "children", "height", "horizontal", "scrollEventThrottle", "scrollIndicator", "scrollTo", "snap", "width", "onScroll"];
 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); }
@@ -19,6 +21,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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); }
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var ScrollView = function ScrollView(_ref) {
@@ -35,53 +43,97 @@ var ScrollView = function ScrollView(_ref) {
     _ref$snap = _ref.snap,
     snap = _ref$snap === void 0 ? true : _ref$snap,
     width = _ref.width,
-    onScroll = _ref.onScroll,
+    _ref$onScroll = _ref.onScroll,
+    onScroll = _ref$onScroll === void 0 ? function () {} : _ref$onScroll,
     others = _objectWithoutProperties(_ref, _excluded);
   var ref = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   var timeout = null;
   (0, _react.useEffect)(function () {
-    var _current$scrollTo;
     var _ref2 = ref || {},
-      _ref2$current = _ref2.current,
-      current = _ref2$current === void 0 ? {} : _ref2$current;
+      el = _ref2.current;
+    if (!scrollIndicator || !el) return;
+    var callback = function callback() {
+      return setValue(calcValue(el));
+    };
+    var observer = new MutationObserver(callback);
+    observer.observe(el, {
+      childList: true,
+      subtree: true
+    });
+    return function () {
+      return observer.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ref]);
+  (0, _react.useEffect)(function () {
+    var _current$scrollTo;
+    var _ref3 = ref || {},
+      _ref3$current = _ref3.current,
+      current = _ref3$current === void 0 ? {} : _ref3$current;
     if (!current.scrollTo || scrollTo === undefined) return;
     current.scrollTo((_current$scrollTo = {}, _defineProperty(_current$scrollTo, horizontal ? 'left' : 'top', scrollTo), _defineProperty(_current$scrollTo, "behavior", behavior), _current$scrollTo));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scrollTo]);
-  var handleScroll = function handleScroll(_ref3) {
-    var _ref3$target = _ref3.target;
-    _ref3$target = _ref3$target === void 0 ? {} : _ref3$target;
-    var clientHeight = _ref3$target.clientHeight,
-      clientWidth = _ref3$target.clientWidth,
-      scrollHeight = _ref3$target.scrollHeight,
-      scrollWidth = _ref3$target.scrollWidth,
-      scrollTop = _ref3$target.scrollTop,
-      scrollLeft = _ref3$target.scrollLeft;
+  var handleScroll = function handleScroll() {
+    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      target = _ref4.target;
+    var next = calcValue(target);
+    setValue(next);
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      return onScroll(next);
+    }, scrollEventThrottle);
+  };
+  var calcValue = function calcValue() {
+    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      clientHeight = _ref5.clientHeight,
+      clientWidth = _ref5.clientWidth,
+      scrollHeight = _ref5.scrollHeight,
+      scrollWidth = _ref5.scrollWidth,
+      scrollTop = _ref5.scrollTop,
+      scrollLeft = _ref5.scrollLeft;
     var x = parseInt(scrollLeft, 10);
     var y = parseInt(scrollTop, 10);
     var offsetX = scrollWidth - clientWidth;
     var offsetY = scrollHeight - clientHeight;
-    clearTimeout(timeout);
-    timeout = setTimeout(function () {
-      onScroll({
-        x: x,
-        y: y,
-        percentX: offsetX ? parseInt(x * 100 / offsetX, 10) : 0,
-        percentY: offsetY ? parseInt(y * 100 / offsetY, 10) : 0
-      });
-    }, scrollEventThrottle);
+    return offsetY > 0 ? {
+      x: x,
+      y: y,
+      percentX: offsetX ? parseInt(x * 100 / offsetX, 10) : 0,
+      percentY: offsetY ? parseInt(y * 100 / offsetY, 10) : 0
+    } : undefined;
   };
+  var percent = scrollIndicator && value ? horizontal ? value.percentX : value.percentY : undefined;
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
     ref: ref,
     role: others.role || 'scrollview',
     tag: others.tag || 'scrollview',
-    onScroll: onScroll ? handleScroll : undefined,
-    className: (0, _helpers.styles)(_ScrollViewModule.default.scrollview, snap && _ScrollViewModule.default.snap, horizontal ? _ScrollViewModule.default.horizontal : _ScrollViewModule.default.vertical, !scrollIndicator && _ScrollViewModule.default.notIndicator, others.className),
+    onScroll: handleScroll,
+    className: (0, _helpers.styles)(_ScrollViewModule.default.scrollview, snap && _ScrollViewModule.default.snap, horizontal ? _ScrollViewModule.default.horizontal : _ScrollViewModule.default.vertical, others.className),
     style: _objectSpread(_objectSpread({}, others.style), {}, {
       height: height,
       width: width
     })
-  }), children);
+  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, percent >= 0 && /*#__PURE__*/_react.default.createElement(_View.View, {
+    className: (0, _helpers.styles)(_ScrollViewModule.default.indicator, horizontal ? _ScrollViewModule.default.horizontal : _ScrollViewModule.default.vertical, percent > 95 && _ScrollViewModule.default.hide)
+  }, /*#__PURE__*/_react.default.createElement(_View.View, {
+    className: _ScrollViewModule.default.progress,
+    style: horizontal ? {
+      height: '100%',
+      width: "".concat(percent || 0, "%")
+    } : {
+      height: "".concat(percent || 0, "%"),
+      width: '100%'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    headline: true,
+    level: 2,
+    value: horizontal ? _Icon.ICON.RIGHT : _Icon.ICON.DOWN
+  }))));
 };
 exports.ScrollView = ScrollView;
 ScrollView.displayName = 'Primitive:ScrollView';

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.js","names":["ScrollView","behavior","children","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","snap","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","tag","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  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: others.tag || 'scrollview',\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  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","width","onScroll","others","ref","useRef","useState","value","setValue","timeout","useEffect","el","current","callback","calcValue","observer","MutationObserver","observe","childList","subtree","disconnect","undefined","handleScroll","target","next","clearTimeout","setTimeout","clientHeight","clientWidth","scrollHeight","scrollWidth","scrollTop","scrollLeft","x","parseInt","y","offsetX","offsetY","percentX","percentY","percent","React","createElement","Primitive","role","tag","className","styles","style","scrollview","vertical","indicator","hide","progress","ICON","RIGHT","DOWN","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, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON } from '../Icon';\nimport { Primitive } from '../Primitive';\nimport { View } from '../View';\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  width,\n  onScroll = () => {},\n  ...others\n}) => {\n  const ref = useRef();\n\n  const [value, setValue] = useState();\n\n  let timeout = null;\n\n  useEffect(() => {\n    const { current: el } = ref || {};\n    if (!scrollIndicator || !el) return;\n\n    const callback = () => setValue(calcValue(el));\n    const observer = new MutationObserver(callback);\n    observer.observe(el, { childList: true, subtree: true });\n\n    return () => observer.disconnect();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref]);\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 = ({ target } = {}) => {\n    const next = calcValue(target);\n    setValue(next);\n    clearTimeout(timeout);\n    timeout = setTimeout(() => onScroll(next), scrollEventThrottle);\n  };\n\n  const calcValue = ({ clientHeight, clientWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft } = {}) => {\n    const x = parseInt(scrollLeft, 10);\n    const y = parseInt(scrollTop, 10);\n    const offsetX = scrollWidth - clientWidth;\n    const offsetY = scrollHeight - clientHeight;\n\n    return offsetY > 0\n      ? {\n          x,\n          y,\n          percentX: offsetX ? parseInt((x * 100) / offsetX, 10) : 0,\n          percentY: offsetY ? parseInt((y * 100) / offsetY, 10) : 0,\n        }\n      : undefined;\n  };\n\n  const percent = scrollIndicator && value ? (horizontal ? value.percentX : value.percentY) : undefined;\n\n  return React.createElement(\n    Primitive,\n    {\n      ...others,\n      ref,\n      role: others.role || 'scrollview',\n      tag: others.tag || 'scrollview',\n      onScroll: handleScroll,\n      className: styles(\n        style.scrollview,\n        snap && style.snap,\n        horizontal ? style.horizontal : style.vertical,\n        others.className,\n      ),\n      style: { ...others.style, height, width },\n    },\n    <>\n      {children}\n      {percent >= 0 && (\n        <View\n          className={styles(\n            style.indicator,\n            horizontal ? style.horizontal : style.vertical,\n            percent > 95 && style.hide,\n          )}\n        >\n          <View\n            className={style.progress}\n            style={\n              horizontal ? { height: '100%', width: `${percent || 0}%` } : { height: `${percent || 0}%`, width: '100%' }\n            }\n          />\n          <Icon headline level={2} value={horizontal ? ICON.RIGHT : ICON.DOWN} />\n        </View>\n      )}\n    </>,\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  width: PropTypes.number,\n  onScroll: PropTypes.func,\n};\n\nexport { ScrollView };\n"],"mappings":"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"}

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

@@ -3,6 +3,13 @@
   display: flex;
   height: fit-content;
   width: fit-content;
+  position: relative;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollview::-webkit-scrollbar {
+  display: none;
 }
 
 .scrollview.horizontal {
@@ -24,15 +31,54 @@
   scroll-snap-type: x mandatory;
 }
 
-.scrollview.notIndicator {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+.scrollview.snap > * {
+  scroll-snap-align: start;
 }
 
-.scrollview.notIndicator::-webkit-scrollbar {
-  display: none;
+.scrollview .indicator {
+  align-items: center;
+  background-color: var(--mirai-ui-base);
+  border-radius: 50%;
+  box-shadow: var(--mirai-ui-shadow);
+  justify-content: center;
+  min-height: var(--mirai-ui-button-height);
+  min-width: var(--mirai-ui-button-height);
+  overflow: hidden;
+  position: sticky;
+  transition: transform var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
 }
 
-.scrollview.snap > * {
-  scroll-snap-align: start;
+.indicator.horizontal {
+  right: var(--mirai-ui-space-M);
+  top: 50%;
+  transform-origin: top center;
+  transform: scale(1) translateY(-50%);
+}
+
+.indicator.vertical {
+  bottom: var(--mirai-ui-space-M);
+  left: 50%;
+  transform-origin: center left;
+  transform: scale(1) translateX(-50%);
+}
+
+.indicator.horizontal.hide {
+  transform: scale(0) translateY(-50%);
+}
+
+.indicator.vertical.hide {
+  transform: scale(0) translateX(-50%);
+}
+
+.indicator .progress {
+  background-color: var(--mirai-ui-content-border);
+  height: 0%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.indicator [data-role='icon'] {
+  z-index: var(--mirai-ui-layer-M);
 }

package/build/primitives/ScrollView/ScrollView.stories.js

@@ -23,7 +23,7 @@ var containerStyle = {
   backgroundColor: 'var(--mirai-ui-content-background)',
   border: 'solid var(--mirai-ui-border-width) var(--mirai-ui-content-border)',
   borderRadius: 'var(--mirai-ui-border-radius)',
-  padding: 'var(--mirai-ui-space-S)'
+  padding: '0 var(--mirai-ui-space-S)'
 };
 var boxStyle = {
   backgroundColor: 'var(--mirai-ui-content-border)',

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

@@ -1 +1 @@
-{"version":3,"file":"ScrollView.stories.js","names":["title","containerStyle","backgroundColor","border","borderRadius","padding","boxStyle","display","margin","minHeight","minWidth","Story","props","style","storyName","args","behavior","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","undefined","snap","tag","width","onScroll","console","log","testId","argTypes","options","control","type","defaultValue"],"sources":["../../../src/primitives/ScrollView/ScrollView.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { ScrollView } from './ScrollView';\nimport { Primitive } from '../Primitive';\n\nexport default { title: 'Primitives' };\n\nconst containerStyle = {\n  backgroundColor: 'var(--mirai-ui-content-background)',\n  border: 'solid var(--mirai-ui-border-width) var(--mirai-ui-content-border)',\n  borderRadius: 'var(--mirai-ui-border-radius)',\n  padding: 'var(--mirai-ui-space-S)',\n};\n\nconst boxStyle = {\n  backgroundColor: 'var(--mirai-ui-content-border)',\n  display: 'block',\n  margin: 'var(--mirai-ui-space-S)',\n  minHeight: 'calc(var(--mirai-ui-space-XXL) * 2)',\n  minWidth: 'calc(var(--mirai-ui-space-XXL) * 2)',\n};\n\nexport const Story = (props) => (\n  <ScrollView {...props} style={{ ...containerStyle, ...props.style }}>\n    <Primitive className=\"children\" style={boxStyle}>\n      child:1\n    </Primitive>\n    <Primitive className=\"children\" style={boxStyle}>\n      child:2\n    </Primitive>\n    <Primitive className=\"children\" style={boxStyle}>\n      child:3\n    </Primitive>\n    <Primitive className=\"children\" style={boxStyle}>\n      child:4\n    </Primitive>\n    <Primitive className=\"children\" style={boxStyle}>\n      child:5\n    </Primitive>\n  </ScrollView>\n);\n\nStory.storyName = 'Scrollview';\n\nStory.args = {\n  behavior: 'smooth',\n  height: 256,\n  horizontal: false,\n  scrollEventThrottle: 16,\n  scrollIndicator: false,\n  scrollTo: undefined,\n  snap: true,\n  tag: 'div',\n  width: 256,\n  onScroll: (...props) => console.log('<ScrollView>::onScroll', ...props),\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  behavior: {\n    options: ['auto', 'smooth', 'initial', 'inherit'],\n    control: { type: 'select' },\n    defaultValue: 'smooth',\n  },\n};\n"],"mappings":";;;;;;AACA;AAEA;AACA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE1B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAEtC,IAAMC,cAAc,GAAG;EACrBC,eAAe,EAAE,oCAAoC;EACrDC,MAAM,EAAE,mEAAmE;EAC3EC,YAAY,EAAE,+BAA+B;EAC7CC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,QAAQ,GAAG;EACfJ,eAAe,EAAE,gCAAgC;EACjDK,OAAO,EAAE,OAAO;EAChBC,MAAM,EAAE,yBAAyB;EACjCC,SAAS,EAAE,qCAAqC;EAChDC,QAAQ,EAAE;AACZ,CAAC;AAEM,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,sBAAU,eAAKA,KAAK;IAAE,KAAK,kCAAOX,cAAc,GAAKW,KAAK,CAACC,KAAK;EAAG,iBAClE,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEP;EAAS,aAEpC,eACZ,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEA;EAAS,aAEpC,eACZ,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEA;EAAS,aAEpC,eACZ,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEA;EAAS,aAEpC,eACZ,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEA;EAAS,aAEpC,CACD;AAAA,CACd;AAAC;AAEFK,KAAK,CAACG,SAAS,GAAG,YAAY;AAE9BH,KAAK,CAACI,IAAI,GAAG;EACXC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE,GAAG;EACXC,UAAU,EAAE,KAAK;EACjBC,mBAAmB,EAAE,EAAE;EACvBC,eAAe,EAAE,KAAK;EACtBC,QAAQ,EAAEC,SAAS;EACnBC,IAAI,EAAE,IAAI;EACVC,GAAG,EAAE,KAAK;EACVC,KAAK,EAAE,GAAG;EACVC,QAAQ,EAAE;IAAA;IAAA,kCAAId,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,YAAAe,OAAO,EAACC,GAAG,kBAAC,wBAAwB,SAAKhB,KAAK,EAAC;EAAA;EACvE;EACAiB,MAAM,EAAE,YAAY;EACpBhB,KAAK,EAAE,CAAC;AACV,CAAC;AAEDF,KAAK,CAACmB,QAAQ,GAAG;EACfd,QAAQ,EAAE;IACRe,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC;IACjDC,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAE;EAChB;AACF,CAAC"}
+{"version":3,"file":"ScrollView.stories.js","names":["title","containerStyle","backgroundColor","border","borderRadius","padding","boxStyle","display","margin","minHeight","minWidth","Story","props","style","storyName","args","behavior","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","undefined","snap","tag","width","onScroll","console","log","testId","argTypes","options","control","type","defaultValue"],"sources":["../../../src/primitives/ScrollView/ScrollView.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { ScrollView } from './ScrollView';\nimport { Primitive } from '../Primitive';\n\nexport default { title: 'Primitives' };\n\nconst containerStyle = {\n  backgroundColor: 'var(--mirai-ui-content-background)',\n  border: 'solid var(--mirai-ui-border-width) var(--mirai-ui-content-border)',\n  borderRadius: 'var(--mirai-ui-border-radius)',\n  padding: '0 var(--mirai-ui-space-S)',\n};\n\nconst boxStyle = {\n  backgroundColor: 'var(--mirai-ui-content-border)',\n  display: 'block',\n  margin: 'var(--mirai-ui-space-S)',\n  minHeight: 'calc(var(--mirai-ui-space-XXL) * 2)',\n  minWidth: 'calc(var(--mirai-ui-space-XXL) * 2)',\n};\n\nexport const Story = (props) => {\n  return (\n    <ScrollView {...props} style={{ ...containerStyle, ...props.style }}>\n      <Primitive className=\"children\" style={boxStyle}>\n        child:1\n      </Primitive>\n      <Primitive className=\"children\" style={boxStyle}>\n        child:2\n      </Primitive>\n      <Primitive className=\"children\" style={boxStyle}>\n        child:3\n      </Primitive>\n      <Primitive className=\"children\" style={boxStyle}>\n        child:4\n      </Primitive>\n      <Primitive className=\"children\" style={boxStyle}>\n        child:5\n      </Primitive>\n    </ScrollView>\n  );\n};\n\nStory.storyName = 'Scrollview';\n\nStory.args = {\n  behavior: 'smooth',\n  height: 256,\n  horizontal: false,\n  scrollEventThrottle: 16,\n  scrollIndicator: false,\n  scrollTo: undefined,\n  snap: true,\n  tag: 'div',\n  width: 256,\n  onScroll: (...props) => console.log('<ScrollView>::onScroll', ...props),\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {\n  behavior: {\n    options: ['auto', 'smooth', 'initial', 'inherit'],\n    control: { type: 'select' },\n    defaultValue: 'smooth',\n  },\n};\n"],"mappings":";;;;;;AACA;AAEA;AACA;AAAyC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAE1B;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAEtC,IAAMC,cAAc,GAAG;EACrBC,eAAe,EAAE,oCAAoC;EACrDC,MAAM,EAAE,mEAAmE;EAC3EC,YAAY,EAAE,+BAA+B;EAC7CC,OAAO,EAAE;AACX,CAAC;AAED,IAAMC,QAAQ,GAAG;EACfJ,eAAe,EAAE,gCAAgC;EACjDK,OAAO,EAAE,OAAO;EAChBC,MAAM,EAAE,yBAAyB;EACjCC,SAAS,EAAE,qCAAqC;EAChDC,QAAQ,EAAE;AACZ,CAAC;AAEM,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK,EAAK;EAC9B,oBACE,6BAAC,sBAAU,eAAKA,KAAK;IAAE,KAAK,kCAAOX,cAAc,GAAKW,KAAK,CAACC,KAAK;EAAG,iBAClE,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEP;EAAS,aAEpC,eACZ,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEA;EAAS,aAEpC,eACZ,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEA;EAAS,aAEpC,eACZ,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEA;EAAS,aAEpC,eACZ,6BAAC,oBAAS;IAAC,SAAS,EAAC,UAAU;IAAC,KAAK,EAAEA;EAAS,aAEpC,CACD;AAEjB,CAAC;AAAC;AAEFK,KAAK,CAACG,SAAS,GAAG,YAAY;AAE9BH,KAAK,CAACI,IAAI,GAAG;EACXC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE,GAAG;EACXC,UAAU,EAAE,KAAK;EACjBC,mBAAmB,EAAE,EAAE;EACvBC,eAAe,EAAE,KAAK;EACtBC,QAAQ,EAAEC,SAAS;EACnBC,IAAI,EAAE,IAAI;EACVC,GAAG,EAAE,KAAK;EACVC,KAAK,EAAE,GAAG;EACVC,QAAQ,EAAE;IAAA;IAAA,kCAAId,KAAK;MAALA,KAAK;IAAA;IAAA,OAAK,YAAAe,OAAO,EAACC,GAAG,kBAAC,wBAAwB,SAAKhB,KAAK,EAAC;EAAA;EACvE;EACAiB,MAAM,EAAE,YAAY;EACpBhB,KAAK,EAAE,CAAC;AACV,CAAC;AAEDF,KAAK,CAACmB,QAAQ,GAAG;EACfd,QAAQ,EAAE;IACRe,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,CAAC;IACjDC,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAE;EAChB;AACF,CAAC"}

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

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

package/build/primitives/Text/Text.js

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _helpers2 = require("./helpers");
 var _TextModule = _interopRequireDefault(require("./Text.module.css"));
-var _excluded = ["accent", "accentLight", "accentDark", "action", "bold", "brand", "capitalize", "children", "dark", "error", "headline", "info", "level", "light", "markdown", "small", "success", "tag", "tiny", "underline", "upperCase", "warning", "wide"];
+var _excluded = ["accent", "accentLight", "accentDark", "action", "bold", "brand", "capitalize", "children", "dark", "error", "headline", "info", "level", "light", "markdown", "medium", "small", "success", "tag", "tiny", "underline", "upperCase", "warning", "wide"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -38,6 +38,8 @@ var Text = function Text(_ref) {
     light = _ref.light,
     _ref$markdown = _ref.markdown,
     markdown = _ref$markdown === void 0 ? true : _ref$markdown,
+    _ref$medium = _ref.medium,
+    medium = _ref$medium === void 0 ? false : _ref$medium,
     small = _ref.small,
     success = _ref.success,
     _ref$tag = _ref.tag,
@@ -51,7 +53,7 @@ var Text = function Text(_ref) {
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread({}, others), {}, {
     role: others.role || 'text',
     tag: tag,
-    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, brand && _TextModule.default.brand, capitalize && _TextModule.default.capitalize, (0, _helpers2.color)({
+    className: (0, _helpers.styles)(_TextModule.default.text, bold && _TextModule.default.bold, medium && !bold && _TextModule.default.medium, brand && _TextModule.default.brand, capitalize && _TextModule.default.capitalize, (0, _helpers2.color)({
       accent: accent,
       accentDark: accentDark,
       accentLight: accentLight,
@@ -82,6 +84,7 @@ Text.propTypes = {
   level: _propTypes.default.number,
   light: _propTypes.default.bool,
   markdown: _propTypes.default.bool,
+  medium: _propTypes.default.bool,
   small: _propTypes.default.bool,
   success: _propTypes.default.bool,
   tag: _propTypes.default.string,

package/build/primitives/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","names":["Text","accent","accentLight","accentDark","action","bold","brand","capitalize","children","dark","error","headline","info","level","light","markdown","small","success","tag","tiny","underline","upperCase","warning","wide","others","React","createElement","Primitive","role","className","styles","style","text","color","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { color, parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  accentLight,\n  accentDark,\n  action,\n  bold,\n  brand,\n  capitalize,\n  children,\n  dark,\n  error,\n  headline,\n  info,\n  level = 3,\n  light,\n  markdown = true,\n  small,\n  success,\n  tag = 'text',\n  tiny,\n  underline,\n  upperCase,\n  warning,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag,\n      className: styles(\n        style.text,\n        bold && style.bold,\n        brand && style.brand,\n        capitalize && style.capitalize,\n        color({ accent, accentDark, accentLight, dark, error, info, light, success, warning }),\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children, tag) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  accentLight: PropTypes.bool,\n  accentDark: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  brand: PropTypes.bool,\n  capitalize: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  dark: PropTypes.bool,\n  error: PropTypes.bool,\n  headline: PropTypes.bool,\n  info: PropTypes.bool,\n  level: PropTypes.number,\n  light: PropTypes.bool,\n  markdown: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":"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"}
+{"version":3,"file":"Text.js","names":["Text","accent","accentLight","accentDark","action","bold","brand","capitalize","children","dark","error","headline","info","level","light","markdown","medium","small","success","tag","tiny","underline","upperCase","warning","wide","others","React","createElement","Primitive","role","className","styles","style","text","color","paragraph","parseMarkdown","displayName","propTypes","PropTypes","bool","oneOfType","string","number","array"],"sources":["../../../src/primitives/Text/Text.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { color, parseMarkdown } from './helpers';\nimport style from './Text.module.css';\n\nconst Text = ({\n  accent,\n  accentLight,\n  accentDark,\n  action,\n  bold,\n  brand,\n  capitalize,\n  children,\n  dark,\n  error,\n  headline,\n  info,\n  level = 3,\n  light,\n  markdown = true,\n  medium = false,\n  small,\n  success,\n  tag = 'text',\n  tiny,\n  underline,\n  upperCase,\n  warning,\n  wide,\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      role: others.role || 'text',\n      tag,\n      className: styles(\n        style.text,\n        bold && style.bold,\n        medium && !bold && style.medium,\n        brand && style.brand,\n        capitalize && style.capitalize,\n        color({ accent, accentDark, accentLight, dark, error, info, light, success, warning }),\n        headline\n          ? style[`headline-${level}`]\n          : action\n          ? style.action\n          : small\n          ? style.small\n          : tiny\n          ? style.tiny\n          : style.paragraph,\n        underline && style.underline,\n        upperCase && style.upperCase,\n        wide && style.wide,\n        others.className,\n      ),\n    },\n    markdown ? parseMarkdown(children, tag) : children,\n  );\n\nText.displayName = 'Primitive:Text';\n\nText.propTypes = {\n  accent: PropTypes.bool,\n  accentLight: PropTypes.bool,\n  accentDark: PropTypes.bool,\n  action: PropTypes.bool,\n  bold: PropTypes.bool,\n  brand: PropTypes.bool,\n  capitalize: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  dark: PropTypes.bool,\n  error: PropTypes.bool,\n  headline: PropTypes.bool,\n  info: PropTypes.bool,\n  level: PropTypes.number,\n  light: PropTypes.bool,\n  markdown: PropTypes.bool,\n  medium: PropTypes.bool,\n  small: PropTypes.bool,\n  success: PropTypes.bool,\n  tag: PropTypes.string,\n  tiny: PropTypes.bool,\n  underline: PropTypes.bool,\n  upperCase: PropTypes.bool,\n  warning: PropTypes.bool,\n  wide: PropTypes.bool,\n};\n\nexport { Text };\n"],"mappings":"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"}

package/build/primitives/Text/Text.module.css

@@ -23,6 +23,11 @@
   font-weight: var(--mirai-ui-font-bold-weight);
 }
 
+.medium:not(.brand) {
+  font-family: var(--mirai-ui-font-medium);
+  font-weight: var(--mirai-ui-font-medium-weight);
+}
+
 .capitalize {
   text-transform: lowercase;
 }
@@ -41,6 +46,11 @@
   font-weight: var(--mirai-ui-text-brand-font-bold-weight);
 }
 
+.brand.medium {
+  font-family: var(--mirai-ui-text-brand-font-medium);
+  font-weight: var(--mirai-ui-text-brand-font-medium-weight);
+}
+
 .headline-1 {
   font-size: var(--mirai-ui-font-size-headline-1);
   line-height: var(--mirai-ui-line-height-headline-1);

package/build/primitives/Text/Text.stories.js

@@ -40,6 +40,7 @@ Story.args = {
   info: false,
   level: 3,
   light: false,
+  medium: false,
   small: false,
   success: false,
   tag: 'span',

package/build/primitives/Text/Text.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","accentDark","accentLight","action","bold","brand","capitalize","children","dark","error","headline","info","level","light","small","success","tag","tiny","underline","upperCase","warning","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n  <>\n    <Text {...props} />\n    <Text {...props} children={childrenMarkdown} />\n  </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n  accent: false,\n  accentDark: false,\n  accentLight: false,\n  action: false,\n  bold: false,\n  brand: false,\n  capitalize: false,\n  children: 'children',\n  childrenMarkdown:\n    '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n  dark: false,\n  error: false,\n  headline: false,\n  info: false,\n  level: 3,\n  light: false,\n  small: false,\n  success: false,\n  tag: 'span',\n  tiny: false,\n  underline: false,\n  upperCase: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,UAAU,EAAE,KAAK;EACjBC,WAAW,EAAE,KAAK;EAClBC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBX,gBAAgB,EACd,8HAA8H;EAChIY,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,CAAC;EACRC,KAAK,EAAE,KAAK;EACZC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAED5B,KAAK,CAAC6B,QAAQ,GAAG,CAAC,CAAC"}
+{"version":3,"file":"Text.stories.js","names":["title","Story","childrenMarkdown","props","storyName","args","accent","accentDark","accentLight","action","bold","brand","capitalize","children","dark","error","headline","info","level","light","medium","small","success","tag","tiny","underline","upperCase","warning","wide","testId","style","argTypes"],"sources":["../../../src/primitives/Text/Text.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Text } from './Text';\n\nexport default { title: 'Primitives' };\n\nexport const Story = ({ childrenMarkdown, ...props }) => (\n  <>\n    <Text {...props} />\n    <Text {...props} children={childrenMarkdown} />\n  </>\n);\n\nStory.storyName = 'Text';\n\nStory.args = {\n  accent: false,\n  accentDark: false,\n  accentLight: false,\n  action: false,\n  bold: false,\n  brand: false,\n  capitalize: false,\n  children: 'children',\n  childrenMarkdown:\n    '<Text> is **capable** of _interpreting_ and *representing* [markdown](https://www.markdownguide.org/) ~~markup~~ {language}.',\n  dark: false,\n  error: false,\n  headline: false,\n  info: false,\n  level: 3,\n  light: false,\n  medium: false,\n  small: false,\n  success: false,\n  tag: 'span',\n  tiny: false,\n  underline: false,\n  upperCase: false,\n  warning: false,\n  wide: false,\n  // inherited properties\n  testId: 'test-story',\n  style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AAA8B;AAAA;AAAA;AAAA;AAAA;AAAA,eAEf;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,gBAAgB,QAAhBA,gBAAgB;IAAKC,KAAK;EAAA,oBAChD,yEACE,6BAAC,UAAI,EAAKA,KAAK,CAAI,eACnB,6BAAC,UAAI,eAAKA,KAAK;IAAE,QAAQ,EAAED;EAAiB,GAAG,CAC9C;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACG,SAAS,GAAG,MAAM;AAExBH,KAAK,CAACI,IAAI,GAAG;EACXC,MAAM,EAAE,KAAK;EACbC,UAAU,EAAE,KAAK;EACjBC,WAAW,EAAE,KAAK;EAClBC,MAAM,EAAE,KAAK;EACbC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,UAAU,EAAE,KAAK;EACjBC,QAAQ,EAAE,UAAU;EACpBX,gBAAgB,EACd,8HAA8H;EAChIY,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,KAAK;EACZC,QAAQ,EAAE,KAAK;EACfC,IAAI,EAAE,KAAK;EACXC,KAAK,EAAE,CAAC;EACRC,KAAK,EAAE,KAAK;EACZC,MAAM,EAAE,KAAK;EACbC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,MAAM;EACXC,IAAI,EAAE,KAAK;EACXC,SAAS,EAAE,KAAK;EAChBC,SAAS,EAAE,KAAK;EAChBC,OAAO,EAAE,KAAK;EACdC,IAAI,EAAE,KAAK;EACX;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE,CAAC;AACV,CAAC;AAED7B,KAAK,CAAC8B,QAAQ,GAAG,CAAC,CAAC"}

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

@@ -210,6 +210,16 @@ exports[`primitive:<Text> prop:markdown 1`] = `
 </DocumentFragment>
 `;
 
+exports[`primitive:<Text> prop:medium 1`] = `
+<DocumentFragment>
+  <ui_text
+    class="text medium paragraph"
+  >
+    Lorem Ipsum
+  </ui_text>
+</DocumentFragment>
+`;
+
 exports[`primitive:<Text> prop:small 1`] = `
 <DocumentFragment>
   <ui_text

package/build/theme/default.theme.css

@@ -162,6 +162,8 @@
   /* Text */
   --mirai-ui-text-brand-font: var(--mirai-ui-font);
   --mirai-ui-text-brand-font-weight: var(--mirai-ui-font-weight);
+  --mirai-ui-text-brand-font-medium: var(--mirai-ui-font-medium);
+  --mirai-ui-text-brand-font-medium-weight: var(--mirai-ui-font-medium-weight);
   --mirai-ui-text-brand-font-bold: var(--mirai-ui-font-bold);
   --mirai-ui-text-brand-font-bold-weight: var(--mirai-ui-font-bold-weight);
 

package/package.json

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