@mirai/ui 1.0.118 → 1.0.120

package/build/components/InputText/partials/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _InputText = require("./InputText.Hint");
+Object.keys(_InputText).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputText[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputText[key];
+    }
+  });
+});
+var _InputText2 = require("./InputText.IconState");
+Object.keys(_InputText2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputText2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputText2[key];
+    }
+  });
+});
+var _InputText3 = require("./InputText.Label");
+Object.keys(_InputText3).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InputText3[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _InputText3[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/components/InputText/partials/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/InputText/partials/index.js"],"sourcesContent":["export * from './InputText.Hint';\nexport * from './InputText.IconState';\nexport * from './InputText.Label';\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"}

package/build/components/Menu/Menu.Option.js

@@ -26,12 +26,16 @@ var Option = function Option(_ref) {
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _extends({}, others, {
     className: (0, _helpers.styles)(_MenuModule.default.option, value && _MenuModule.default.value, divider && _MenuModule.default.divider, disabled && _MenuModule.default.disabled),
     onPress: !disabled && value ? onPress : undefined
-  }), icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+  }), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    wide: true,
+    className: _MenuModule.default.content
+  }, icon && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
     value: icon,
     className: _MenuModule.default.icon
   }), label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
     className: _MenuModule.default.label
-  }, label), children);
+  }, label), children));
 };
 exports.Option = Option;
 Option.displayName = 'Component:Menu:Option';

package/build/components/Menu/Menu.Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.Option.js","names":["Option","children","disabled","divider","icon","label","value","onPress","others","styles","style","option","undefined","displayName","propTypes","PropTypes","node","bool","func","string","oneOfType","number"],"sources":["../../../src/components/Menu/Menu.Option.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text } from '../../primitives';\nimport style from './Menu.module.css';\n\nconst Option = ({ children, disabled, divider, icon, label, value, onPress, ...others }) => (\n  <Pressable\n    {...others}\n    className={styles(style.option, value && style.value, divider && style.divider, disabled && style.disabled)}\n    onPress={!disabled && value ? onPress : undefined}\n  >\n    {icon && <Icon value={icon} className={style.icon} />}\n    {label && <Text className={style.label}>{label}</Text>}\n    {children}\n  </Pressable>\n);\n\nOption.displayName = 'Component:Menu:Option';\n\nOption.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  divider: PropTypes.bool,\n  icon: PropTypes.func,\n  label: PropTypes.string,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  onPress: PropTypes.func,\n};\n\nexport { Option };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBACnF,6BAAC,qBAAS,eACJA,MAAM;IACV,SAAS,EAAE,IAAAC,eAAM,EAACC,mBAAK,CAACC,MAAM,EAAEL,KAAK,IAAII,mBAAK,CAACJ,KAAK,EAAEH,OAAO,IAAIO,mBAAK,CAACP,OAAO,EAAED,QAAQ,IAAIQ,mBAAK,CAACR,QAAQ,CAAE;IAC5G,OAAO,EAAE,CAACA,QAAQ,IAAII,KAAK,GAAGC,OAAO,GAAGK;EAAU,IAEjDR,IAAI,iBAAI,6BAAC,gBAAI;IAAC,KAAK,EAAEA,IAAK;IAAC,SAAS,EAAEM,mBAAK,CAACN;EAAK,EAAG,EACpDC,KAAK,iBAAI,6BAAC,gBAAI;IAAC,SAAS,EAAEK,mBAAK,CAACL;EAAM,GAAEA,KAAK,CAAQ,EACrDJ,QAAQ,CACC;AAAA,CACb;AAAC;AAEFD,MAAM,CAACa,WAAW,GAAG,uBAAuB;AAE5Cb,MAAM,CAACc,SAAS,GAAG;EACjBb,QAAQ,EAAEc,kBAAS,CAACC,IAAI;EACxBd,QAAQ,EAAEa,kBAAS,CAACE,IAAI;EACxBd,OAAO,EAAEY,kBAAS,CAACE,IAAI;EACvBb,IAAI,EAAEW,kBAAS,CAACG,IAAI;EACpBb,KAAK,EAAEU,kBAAS,CAACI,MAAM;EACvBb,KAAK,EAAES,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACI,MAAM,EAAEJ,kBAAS,CAACM,MAAM,CAAC,CAAC;EAChEd,OAAO,EAAEQ,kBAAS,CAACG;AACrB,CAAC"}
+{"version":3,"file":"Menu.Option.js","names":["Option","children","disabled","divider","icon","label","value","onPress","others","styles","style","option","undefined","content","displayName","propTypes","PropTypes","node","bool","func","string","oneOfType","number"],"sources":["../../../src/components/Menu/Menu.Option.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Menu.module.css';\n\nconst Option = ({ children, disabled, divider, icon, label, value, onPress, ...others }) => (\n  <Pressable\n    {...others}\n    className={styles(style.option, value && style.value, divider && style.divider, disabled && style.disabled)}\n    onPress={!disabled && value ? onPress : undefined}\n  >\n    <View row wide className={style.content}>\n      {icon && <Icon value={icon} className={style.icon} />}\n      {label && <Text className={style.label}>{label}</Text>}\n      {children}\n    </View>\n  </Pressable>\n);\n\nOption.displayName = 'Component:Menu:Option';\n\nOption.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  divider: PropTypes.bool,\n  icon: PropTypes.func,\n  label: PropTypes.string,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  onPress: PropTypes.func,\n};\n\nexport { Option };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAEtC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IAAMC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAEC,KAAK,QAALA,KAAK;IAAEC,KAAK,QAALA,KAAK;IAAEC,OAAO,QAAPA,OAAO;IAAKC,MAAM;EAAA,oBACnF,6BAAC,qBAAS,eACJA,MAAM;IACV,SAAS,EAAE,IAAAC,eAAM,EAACC,mBAAK,CAACC,MAAM,EAAEL,KAAK,IAAII,mBAAK,CAACJ,KAAK,EAAEH,OAAO,IAAIO,mBAAK,CAACP,OAAO,EAAED,QAAQ,IAAIQ,mBAAK,CAACR,QAAQ,CAAE;IAC5G,OAAO,EAAE,CAACA,QAAQ,IAAII,KAAK,GAAGC,OAAO,GAAGK;EAAU,iBAElD,6BAAC,gBAAI;IAAC,GAAG;IAAC,IAAI;IAAC,SAAS,EAAEF,mBAAK,CAACG;EAAQ,GACrCT,IAAI,iBAAI,6BAAC,gBAAI;IAAC,KAAK,EAAEA,IAAK;IAAC,SAAS,EAAEM,mBAAK,CAACN;EAAK,EAAG,EACpDC,KAAK,iBAAI,6BAAC,gBAAI;IAAC,SAAS,EAAEK,mBAAK,CAACL;EAAM,GAAEA,KAAK,CAAQ,EACrDJ,QAAQ,CACJ,CACG;AAAA,CACb;AAAC;AAEFD,MAAM,CAACc,WAAW,GAAG,uBAAuB;AAE5Cd,MAAM,CAACe,SAAS,GAAG;EACjBd,QAAQ,EAAEe,kBAAS,CAACC,IAAI;EACxBf,QAAQ,EAAEc,kBAAS,CAACE,IAAI;EACxBf,OAAO,EAAEa,kBAAS,CAACE,IAAI;EACvBd,IAAI,EAAEY,kBAAS,CAACG,IAAI;EACpBd,KAAK,EAAEW,kBAAS,CAACI,MAAM;EACvBd,KAAK,EAAEU,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACI,MAAM,EAAEJ,kBAAS,CAACM,MAAM,CAAC,CAAC;EAChEf,OAAO,EAAES,kBAAS,CAACG;AACrB,CAAC"}

package/build/components/Menu/Menu.module.css

@@ -22,6 +22,7 @@
 
 .menu .option.value:hover:not(.disabled) {
   background-color: var(--mirai-ui-menu-option-hover-background);
+  cursor: pointer;
 }
 
 .menu .option.value:hover:not(.disabled) .icon,
@@ -30,18 +31,20 @@
   cursor: pointer;
 }
 
+.menu .option .content {
+  background-color: var(--mirai-ui-menu-option-padding);
+  gap: 10px;
+}
+
 .menu .divider {
   box-shadow: inset 0 calc(var(--mirai-ui-border-width) * -1) var(--mirai-ui-menu-option-disabled);
 }
 
 .menu .icon {
-  margin-right: var(--mirai-ui-menu-option-padding);
 }
 
 .menu .label {
   flex: 1;
-  text-align: left;
-  padding-right: var(--mirai-ui-menu-option-padding);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

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

@@ -46,104 +46,128 @@ exports[`component:<Menu> prop:options & visible 1`] = `
     <div
       class="pressable option divider"
     >
-      <span
-        class="text paragraph label"
+      <div
+        class="view row wide content"
       >
-        Lorem Ipsum...
-      </span>
+        <span
+          class="text paragraph label"
+        >
+          Lorem Ipsum...
+        </span>
+      </div>
     </div>
     <div
       class="pressable option value"
     >
-      <span
-        class="icon headline-3 icon"
+      <div
+        class="view row wide content"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          class="icon headline-3 icon"
         >
-          <path
-            d="M0 0h24v24H0V0z"
-            fill="none"
-          />
-          <path
-            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-          />
-        </svg>
-      </span>
-      <span
-        class="text paragraph label"
-      >
-        Item 1
-      </span>
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="text paragraph label"
+        >
+          Item 1
+        </span>
+      </div>
     </div>
     <div
       class="pressable option value disabled"
       data-testid="two"
     >
-      <span
-        class="icon headline-3 icon"
+      <div
+        class="view row wide content"
       >
-        <svg
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+        <span
+          class="icon headline-3 icon"
         >
-          <path
-            d="M0 0h24v24H0V0z"
-            fill="none"
-          />
-          <path
-            d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-          />
-        </svg>
-      </span>
-      <span
-        class="text paragraph label"
-      >
-        Item 2
-      </span>
+          <svg
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M0 0h24v24H0V0z"
+              fill="none"
+            />
+            <path
+              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
+            />
+          </svg>
+        </span>
+        <span
+          class="text paragraph label"
+        >
+          Item 2
+        </span>
+      </div>
     </div>
     <div
       class="pressable option value divider"
     >
-      <span
-        class="text paragraph label"
+      <div
+        class="view row wide content"
       >
-        Item 3
-      </span>
+        <span
+          class="text paragraph label"
+        >
+          Item 3
+        </span>
+      </div>
     </div>
     <div
       class="pressable option value"
     >
-      <span
-        class="text paragraph label"
-      >
-        Item 4
-      </span>
-      <button
-        class="pressable button small"
+      <div
+        class="view row wide content"
       >
-        Add
-      </button>
+        <span
+          class="text paragraph label"
+        >
+          Item 4
+        </span>
+        <button
+          class="pressable button small"
+        >
+          Add
+        </button>
+      </div>
     </div>
     <div
       class="pressable option"
     >
-      <button
-        class="pressable button"
+      <div
+        class="view row wide content"
       >
-        Add
-      </button>
+        <button
+          class="pressable button"
+        >
+          Add
+        </button>
+      </div>
     </div>
   </div>
 </DocumentFragment>

package/build/components/Modal/Modal.js

@@ -71,7 +71,7 @@ var Modal = function Modal(_ref) {
     fit: true,
     className: (0, _helpers.styles)(_ModalModule.default.modal, !fit && _ModalModule.default.calcWidth, visible && _ModalModule.default.visible, others.className)
   }), (title || onBack || onClose) && /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    row: true,
+    forceRow: true,
     className: _ModalModule.default.header
   }, onBack && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
     onPress: onBack,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\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  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\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 renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <Pressable\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      onPress={visible && overflow ? onOverflow : undefined}\n      data-testid={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View row className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\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  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\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  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\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 renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <Pressable\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      onPress={visible && overflow ? onOverflow : undefined}\n      data-testid={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\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              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\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  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,KAAK,GAAG,SAARA,KAAK,OAYL;EAAA,qBAXJC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,QAAQ,QAARA,QAAQ;IAAA,gBACRC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,IAAI;IAAA,mBACfC,MAAM;IAANA,MAAM,4BAAG,KAAK;IACdC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,UAAU,QAAVA,UAAU;IACPC,MAAM;EAET,iBAAsB,IAAAC,gBAAS,GAAE;IAAzBC,SAAS,cAATA,SAAS;EAEjB,gBAA8B,IAAAC,eAAQ,GAAE;IAAA;IAAjCC,OAAO;IAAEC,UAAU;EAE1B,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIV,OAAO,IAAI,CAACQ,OAAO,EAAE;MACvBC,UAAU,CAAC,IAAI,CAAC;MAChBE,QAAQ,CAACC,IAAI,CAACJ,OAAO,CAACK,UAAU,GAAG,IAAI;IACzC;IAEA,OAAO,YAAM;MACX,IAAIb,OAAO,IAAIQ,OAAO,EAAE;QACtBC,UAAU,CAACK,SAAS,CAAC;QACrB,OAAOH,QAAQ,CAACC,IAAI,CAACJ,OAAO,CAACK,UAAU;MACzC;IACF,CAAC;EACH,CAAC,EAAE,CAACL,OAAO,EAAER,OAAO,CAAC,CAAC;EAEtB,IAAMe,QAAQ,GAAGC,gBAAO,IAAI,CAAClB,MAAM,GAAG,UAACmB,GAAG;IAAA,OAAKA,GAAG;EAAA,IAAGC,iBAAQ,CAACC,YAAY;EAE1E,IAAyBC,MAAM,GAAKhB,MAAM,CAAjC,aAAa;EAEtB,OAAOW,QAAQ,eACb,6BAAC,qBAAS;IACR,SAAS,EAAE,IAAAM,eAAM,EACfC,oBAAK,CAACC,SAAS,EACf1B,QAAQ,IAAIyB,oBAAK,CAACzB,QAAQ,EAC1BA,QAAQ,IAAIH,IAAI,IAAI4B,oBAAK,CAAC5B,IAAI,EAC9BM,OAAO,IAAIsB,oBAAK,CAACtB,OAAO,EACxBG,UAAU,IAAImB,oBAAK,CAACnB,UAAU,CAC9B;IACF,OAAO,EAAEH,OAAO,IAAIH,QAAQ,GAAGM,UAAU,GAAGW,SAAU;IACtD,eAAaM,MAAM,aAAMA,MAAM,iBAAcN;EAAU,gBAEvD,6BAAC,gBAAI,eACCV,MAAM;IACV,GAAG;IACH,SAAS,EAAE,IAAAiB,eAAM,EAACC,oBAAK,CAACE,KAAK,EAAE,CAAC5B,GAAG,IAAI0B,oBAAK,CAACG,SAAS,EAAEzB,OAAO,IAAIsB,oBAAK,CAACtB,OAAO,EAAEI,MAAM,CAACsB,SAAS;EAAE,IAEnG,CAAC3B,KAAK,IAAIE,MAAM,IAAIC,OAAO,kBAC1B,6BAAC,gBAAI;IAAC,QAAQ;IAAC,SAAS,EAAEoB,oBAAK,CAACK;EAAO,GACpC1B,MAAM,iBACL,6BAAC,qBAAS;IAAC,OAAO,EAAEA,MAAO;IAAC,eAAamB,MAAM,aAAMA,MAAM,oBAAiBN;EAAU,gBACpF,6BAAC,gBAAI;IAAC,KAAK,EAAEc,gBAAI,CAACC,IAAK;IAAC,SAAS,EAAEP,oBAAK,CAACQ;EAAK,EAAG,CAEpD,EACA/B,KAAK,iBACJ,6BAAC,gBAAI;IAAC,QAAQ;IAAC,SAAS,EAAE,IAAAsB,eAAM,EAACC,oBAAK,CAACvB,KAAK,EAAE,CAACE,MAAM,IAAIqB,oBAAK,CAACS,IAAI,EAAE,CAAC7B,OAAO,IAAIoB,oBAAK,CAACU,KAAK;EAAE,GAC3FjC,KAAK,CAET,EACAG,OAAO,iBACN,6BAAC,qBAAS;IAAC,OAAO,EAAEA,OAAQ;IAAC,eAAakB,MAAM,aAAMA,MAAM,qBAAkBN;EAAU,gBACtF,6BAAC,gBAAI;IAAC,KAAK,EAAER,SAAS,IAAIP,KAAK,KAAKe,SAAS,GAAGc,gBAAI,CAACK,KAAK,GAAGL,gBAAI,CAACM,WAAY;IAAC,SAAS,EAAEZ,oBAAK,CAACQ;EAAK,EAAG,CAE3G,CAEJ,EACAnC,QAAQ,CACJ,CACG,EACZgB,QAAQ,CAACC,IAAI,CACd;AACH,CAAC;AAAC;AAEFnB,KAAK,CAAC0C,SAAS,GAAG;EAChBzC,IAAI,EAAE0C,kBAAS,CAACC,IAAI;EACpB1C,QAAQ,EAAEyC,kBAAS,CAACE,IAAI;EACxB1C,GAAG,EAAEwC,kBAAS,CAACC,IAAI;EACnBxC,QAAQ,EAAEuC,kBAAS,CAACC,IAAI;EACxBvC,MAAM,EAAEsC,kBAAS,CAACC,IAAI;EACtBtC,KAAK,EAAEqC,kBAAS,CAACG,MAAM;EACvBvC,OAAO,EAAEoC,kBAAS,CAACC,IAAI;EACvBpC,MAAM,EAAEmC,kBAAS,CAACI,IAAI;EACtBtC,OAAO,EAAEkC,kBAAS,CAACI;AACrB,CAAC"}

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

@@ -11,7 +11,7 @@ exports[`component:<Modal> Mobile environment prop:onClose 1`] = `
       data-testid="mirai-onClose"
     >
       <div
-        class="view row header"
+        class="view forceRow header"
       >
         <div
           class="pressable"
@@ -109,7 +109,7 @@ exports[`component:<Modal> prop:onBack 1`] = `
       data-testid="mirai-onBack"
     >
       <div
-        class="view row header"
+        class="view forceRow header"
       >
         <div
           class="pressable"
@@ -154,7 +154,7 @@ exports[`component:<Modal> prop:onClose 1`] = `
       data-testid="mirai-onClose"
     >
       <div
-        class="view row header"
+        class="view forceRow header"
       >
         <div
           class="pressable"
@@ -224,7 +224,7 @@ exports[`component:<Modal> prop:title 1`] = `
       class="view fit modal calcWidth"
     >
       <div
-        class="view row header"
+        class="view forceRow header"
       >
         <h3
           class="text headline-3 title left right"

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

@@ -50,8 +50,11 @@ var TableRow = function TableRow(_ref) {
     return /*#__PURE__*/_react.default.createElement(tag, (_React$createElement = {}, _defineProperty(_React$createElement, 'data-testid', testId ? "".concat(testId, "-").concat(field) : undefined), _defineProperty(_React$createElement, "key", field), _defineProperty(_React$createElement, "onClick", function onClick(event) {
       return handlePress(field, event);
     }), _React$createElement), /*#__PURE__*/_react.default.createElement(_primitives.View, {
-      row: true,
+      forceRow: true,
       tag: "span"
+    }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      forceRow: true,
+      className: _TableModule.default.checkboxColumn
     }, onSelect && index === 0 && /*#__PURE__*/_react.default.createElement(_InputOption.InputOption, {
       checked: checked,
       "data-testid": testId ? "".concat(testId, "-checkbox") : undefined,
@@ -61,7 +64,7 @@ var TableRow = function TableRow(_ref) {
       onChange: function onChange(event) {
         return onSelect(dataSource, event);
       }
-    }), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    }), isHead ? schema[field].label : dataSource[field]), isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
       value: sort[field] ? _primitives.ICON.DOWN : _primitives.ICON.UP,
       className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.hide)
     })));

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

@@ -1 +1 @@
-{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","TableRow","checked","dataSource","indeterminate","schema","sort","onPress","onSelect","onSort","others","isHead","undefined","fields","Object","keys","tag","testId","handlePress","field","event","target","type","includes","styles","style","selected","map","index","React","createElement","checkbox","label","ICON","DOWN","UP","icon","hide","displayName","propTypes","PropTypes","bool","shape","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst TableRow = ({ checked, dataSource, indeterminate, schema, sort = {}, onPress, onSelect, onSort, ...others }) => {\n  const isHead = dataSource === undefined;\n  const fields = Object.keys(schema);\n  const tag = isHead ? 'th' : 'td';\n  const { ['data-testid']: 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);\n  };\n\n  return (\n    <tr {...others} role=\"tr\" className={styles(checked && style.selected, onPress && style.onPress)}>\n      {fields.map((field, index) =>\n        React.createElement(\n          tag,\n          {\n            ['data-testid']: testId ? `${testId}-${field}` : undefined,\n            key: field,\n            onClick: (event) => handlePress(field, event),\n          },\n          <View row tag=\"span\">\n            {onSelect && index === 0 && (\n              <InputOption\n                checked={checked}\n                data-testid={testId ? `${testId}-checkbox` : undefined}\n                indeterminate={indeterminate}\n                name=\"checkbox\"\n                className={style.checkbox}\n                onChange={(event) => onSelect(dataSource, event)}\n              />\n            )}\n            {isHead ? schema[field].label : dataSource[field]}\n            {isHead && onSort && (\n              <Icon\n                value={sort[field] ? ICON.DOWN : ICON.UP}\n                className={styles(style.icon, sort[field] === undefined && style.hide)}\n              />\n            )}\n          </View>,\n        ),\n      )}\n    </tr>\n  );\n};\n\nTableRow.displayName = 'Table:Row';\n\nTableRow.propTypes = {\n  checked: PropTypes.bool,\n  dataSource: PropTypes.shape({}),\n  indeterminate: PropTypes.bool,\n  schema: PropTypes.shape({}).isRequired,\n  sort: PropTypes.shape({}),\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n  onSort: PropTypes.func,\n};\n\nexport { TableRow };\n"],"mappings":"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"}
+{"version":3,"file":"Table.Row.js","names":["CUSTOM_EVENT_TYPES","TableRow","checked","dataSource","indeterminate","schema","sort","onPress","onSelect","onSort","others","isHead","undefined","fields","Object","keys","tag","testId","handlePress","field","event","target","type","includes","styles","style","selected","map","index","React","createElement","checkboxColumn","checkbox","label","ICON","DOWN","UP","icon","hide","displayName","propTypes","PropTypes","bool","shape","isRequired","func"],"sources":["../../../src/components/Table/Table.Row.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, View } from '../../primitives';\nimport { InputOption } from '../InputOption';\nimport style from './Table.module.css';\n\nconst CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];\n\nconst TableRow = ({ checked, dataSource, indeterminate, schema, sort = {}, onPress, onSelect, onSort, ...others }) => {\n  const isHead = dataSource === undefined;\n  const fields = Object.keys(schema);\n  const tag = isHead ? 'th' : 'td';\n  const { ['data-testid']: 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);\n  };\n\n  return (\n    <tr {...others} role=\"tr\" className={styles(checked && style.selected, onPress && style.onPress)}>\n      {fields.map((field, index) =>\n        React.createElement(\n          tag,\n          {\n            ['data-testid']: testId ? `${testId}-${field}` : undefined,\n            key: field,\n            onClick: (event) => handlePress(field, event),\n          },\n          <View forceRow tag=\"span\">\n            <View forceRow className={style.checkboxColumn}>\n              {onSelect && index === 0 && (\n                <InputOption\n                  checked={checked}\n                  data-testid={testId ? `${testId}-checkbox` : undefined}\n                  indeterminate={indeterminate}\n                  name=\"checkbox\"\n                  className={style.checkbox}\n                  onChange={(event) => onSelect(dataSource, event)}\n                />\n              )}\n              {isHead ? schema[field].label : dataSource[field]}\n            </View>\n\n            {isHead && onSort && (\n              <Icon\n                value={sort[field] ? ICON.DOWN : ICON.UP}\n                className={styles(style.icon, sort[field] === undefined && style.hide)}\n              />\n            )}\n          </View>,\n        ),\n      )}\n    </tr>\n  );\n};\n\nTableRow.displayName = 'Table:Row';\n\nTableRow.propTypes = {\n  checked: PropTypes.bool,\n  dataSource: PropTypes.shape({}),\n  indeterminate: PropTypes.bool,\n  schema: PropTypes.shape({}).isRequired,\n  sort: PropTypes.shape({}),\n  onPress: PropTypes.func,\n  onSelect: PropTypes.func,\n  onSort: PropTypes.func,\n};\n\nexport { TableRow };\n"],"mappings":"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"}

package/build/components/Table/Table.module.css

@@ -2,6 +2,7 @@
   background-color: var(--mirai-ui-table-background);
   border-collapse: collapse;
   color: var(--mirai-ui-table-color);
+  direction: var(--mirai-ui-text-direction);
   font-family: var(--mirai-ui-font);
   font-size: var(--mirai-ui-font-size-action);
   table-layout: auto;
@@ -63,15 +64,19 @@
 }
 
 .table th .icon {
-  margin-left: calc(var(--mirai-ui-table-padding-x) / 4);
+  margin: 0 calc(var(--mirai-ui-table-padding-x) / 4);
 }
 
 .table th .icon.hide {
   color: var(--mirai-ui-table-background);
 }
 
+.table .checkboxColumn {
+  gap: var(--mirai-ui-space-S);
+}
+
 .table .checkbox {
-  margin: 0 var(--mirai-ui-space-S) 0 0;
+  margin: 0;
   min-width: var(--mirai-ui-checkbox-size);
 }