@mirai/ui 1.1.16 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","propFixed","fixed","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","setFixed","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","modal","getModalParent","getLayerPosition","orientation","isComponentFixed","children","React","Children","map","child","className","contentStyle","style","createWrapper","role","container","testId","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","displayName","propTypes","PropTypes","bool","node","number","func"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Primitive } from '../Primitive';\nimport { getElementLayout, getLayerPosition, getModalParent, getScrollParent, isComponentFixed } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n  bottom: forceBottom,\n  centered,\n  fixed: propFixed,\n  forceRender = true,\n  left: forceLeft,\n  right: forceRight,\n  top: forceTop,\n  timestamp,\n  visible,\n  onPosition = () => {},\n  ...others\n}) => {\n  const device = useDevice();\n  const componentRef = useRef();\n  const contentRef = useRef();\n\n  const [fixed, setFixed] = useState();\n  const [position, setPosition] = useState();\n\n  useLayoutEffect(() => {\n    const content = contentRef?.current;\n    if (!content || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(calcPosition);\n    observer.observe(content);\n\n    return () => observer.unobserve(content);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useLayoutEffect(\n    () => calcPosition(),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible],\n  );\n\n  const calcPosition = () => {\n    const { current: { firstChild: componentEl } = {} } = componentRef;\n    const { current: contentEl } = contentRef;\n\n    if (!componentEl || !contentEl) return setPosition();\n\n    const componentLayout = { ...getElementLayout(componentEl), scrollTop: getScrollParent(componentEl)?.scrollTop };\n    const contentLayout = getElementLayout(contentEl);\n    const modal = getModalParent(componentEl);\n    const {\n      left = 0,\n      top = 0,\n      orientation = {},\n    } = getLayerPosition(componentLayout, contentLayout, device, modal, {\n      centered,\n      forceBottom,\n      forceLeft,\n      forceRight,\n      forceTop,\n    });\n\n    setFixed(propFixed || isComponentFixed(componentEl));\n    setPosition({ left: `${left}px`, top: `${top}px` });\n    onPosition(orientation);\n  };\n\n  const children = React.Children.map(others.children || [], (child) => child);\n  const { className, style: contentStyle } = others;\n  const createWrapper = className || contentStyle;\n\n  return (\n    <>\n      <Primitive\n        ref={componentRef}\n        role={others.role || 'layer'}\n        tag=\"span\"\n        className={style.container}\n        testId={others.testId}\n      >\n        {children.find(({ type: { name } }) => name !== LayerContent.name)}\n      </Primitive>\n\n      {(forceRender || visible) && (\n        <Primitive\n          ref={contentRef}\n          role={others.role ? `${others.role}-content` : 'layer-content'}\n          className={styles(style.layer, fixed && style.fixed, !visible && style.hidden)}\n          style={{ ...position }}\n        >\n          {React.createElement(\n            createWrapper ? 'div' : React.Fragment,\n            createWrapper ? { className, style: contentStyle } : undefined,\n            children?.find(({ type: { name } }) => name === LayerContent.name),\n          )}\n        </Primitive>\n      )}\n    </>\n  );\n};\n\nLayer.displayName = 'Primitive:Layer';\n\nLayer.propTypes = {\n  bottom: PropTypes.bool,\n  centered: PropTypes.bool,\n  children: PropTypes.node,\n  fixed: PropTypes.bool,\n  forceRender: PropTypes.bool,\n  left: PropTypes.bool,\n  right: PropTypes.bool,\n  timestamp: PropTypes.number,\n  top: PropTypes.bool,\n  visible: PropTypes.bool,\n  onPosition: PropTypes.func,\n};\n\nexport { Layer };\n"],"mappings":"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"}
+{"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","propFixed","fixed","forceRender","forceLeft","left","forceRight","right","forceTop","top","timestamp","visible","onPosition","others","device","useDevice","componentRef","useRef","contentRef","useState","setFixed","position","setPosition","useLayoutEffect","content","current","ResizeObserver","observer","calcPosition","observe","unobserve","componentEl","firstChild","contentEl","componentLayout","getElementLayout","scrollTop","getScrollParent","contentLayout","modal","getModalParent","getLayerPosition","orientation","isComponentFixed","children","React","Children","map","child","className","contentStyle","style","createWrapper","role","tag","container","testId","find","name","type","LayerContent","styles","layer","hidden","createElement","Fragment","undefined","displayName","propTypes","PropTypes","bool","node","number","func"],"sources":["../../../src/primitives/Layer/Layer.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useLayoutEffect, useRef, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Primitive } from '../Primitive';\nimport { getElementLayout, getLayerPosition, getModalParent, getScrollParent, isComponentFixed } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n  bottom: forceBottom,\n  centered,\n  fixed: propFixed,\n  forceRender = true,\n  left: forceLeft,\n  right: forceRight,\n  top: forceTop,\n  timestamp,\n  visible,\n  onPosition = () => {},\n  ...others\n}) => {\n  const device = useDevice();\n  const componentRef = useRef();\n  const contentRef = useRef();\n\n  const [fixed, setFixed] = useState();\n  const [position, setPosition] = useState();\n\n  useLayoutEffect(() => {\n    const content = contentRef?.current;\n    if (!content || typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(calcPosition);\n    observer.observe(content);\n\n    return () => observer.unobserve(content);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  useLayoutEffect(\n    () => calcPosition(),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [centered, device, forceBottom, forceLeft, forceRight, forceTop, timestamp, visible],\n  );\n\n  const calcPosition = () => {\n    const { current: { firstChild: componentEl } = {} } = componentRef;\n    const { current: contentEl } = contentRef;\n\n    if (!componentEl || !contentEl) return setPosition();\n\n    const componentLayout = { ...getElementLayout(componentEl), scrollTop: getScrollParent(componentEl)?.scrollTop };\n    const contentLayout = getElementLayout(contentEl);\n    const modal = getModalParent(componentEl);\n    const {\n      left = 0,\n      top = 0,\n      orientation = {},\n    } = getLayerPosition(componentLayout, contentLayout, device, modal, {\n      centered,\n      forceBottom,\n      forceLeft,\n      forceRight,\n      forceTop,\n    });\n\n    setFixed(propFixed || isComponentFixed(componentEl));\n    setPosition({ left: `${left}px`, top: `${top}px` });\n    onPosition(orientation);\n  };\n\n  const children = React.Children.map(others.children || [], (child) => child);\n  const { className, style: contentStyle } = others;\n  const createWrapper = className || contentStyle;\n\n  return (\n    <>\n      <Primitive\n        ref={componentRef}\n        role={others.role || 'layer'}\n        tag={others.tag || 'layer'}\n        className={style.container}\n        testId={others.testId}\n      >\n        {children.find(({ type: { name } }) => name !== LayerContent.name)}\n      </Primitive>\n\n      {(forceRender || visible) && (\n        <Primitive\n          ref={contentRef}\n          role={others.role ? `${others.role}-content` : 'layer-content'}\n          tag={`${others.tag || 'layer'}_content`}\n          className={styles(style.layer, fixed && style.fixed, !visible && style.hidden)}\n          style={{ ...position }}\n        >\n          {React.createElement(\n            createWrapper ? 'div' : React.Fragment,\n            createWrapper ? { className, style: contentStyle } : undefined,\n            children?.find(({ type: { name } }) => name === LayerContent.name),\n          )}\n        </Primitive>\n      )}\n    </>\n  );\n};\n\nLayer.displayName = 'Primitive:Layer';\n\nLayer.propTypes = {\n  bottom: PropTypes.bool,\n  centered: PropTypes.bool,\n  children: PropTypes.node,\n  fixed: PropTypes.bool,\n  forceRender: PropTypes.bool,\n  left: PropTypes.bool,\n  right: PropTypes.bool,\n  timestamp: PropTypes.number,\n  top: PropTypes.bool,\n  visible: PropTypes.bool,\n  onPosition: PropTypes.func,\n};\n\nexport { Layer };\n"],"mappings":"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"}

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

@@ -2,25 +2,36 @@
 
 exports[`primitive:<Layer> inherit:className 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   />
-  <div
+  <ui_layer_content
     class="layer hidden"
   >
     <div
       class="mirai"
     />
-  </div>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> renders 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   />
-  <div
+  <ui_layer_content
+    class="layer hidden"
+  />
+</DocumentFragment>
+`;
+
+exports[`primitive:<Layer> tag 1`] = `
+<DocumentFragment>
+  <ui_tag
+    class="container"
+  />
+  <ui_tag_content
     class="layer hidden"
   />
 </DocumentFragment>
@@ -28,11 +39,11 @@ exports[`primitive:<Layer> renders 1`] = `
 
 exports[`primitive:<Layer> testId 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
     data-testid="mirai"
   />
-  <div
+  <ui_layer_content
     class="layer hidden"
   />
 </DocumentFragment>
@@ -40,89 +51,93 @@ exports[`primitive:<Layer> testId 1`] = `
 
 exports[`primitive:<Layer> w/ centered && visible 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ child fixed 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   >
     <button
       class="pressable button"
       style="position: fixed;"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer fixed hidden"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ component & <LayerContent> 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ component 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer hidden"
     style="left: 0px; top: 0px;"
   />
@@ -131,62 +146,65 @@ exports[`primitive:<Layer> w/ component 1`] = `
 
 exports[`primitive:<Layer> w/ fixed 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer fixed hidden"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ forceRender={false} & <LayerContent> 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
+  </ui_layer>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Layer> w/ visible 1`] = `
 <DocumentFragment>
-  <span
+  <ui_layer
     class="container"
   >
     <button
       class="pressable button"
+      tabindex="0"
     >
       Action
     </button>
-  </span>
-  <div
+  </ui_layer>
+  <ui_layer_content
     class="layer"
     style="left: 0px; top: 0px;"
   >
-    <span
+    <ui_text
       class="text paragraph"
     >
       Mirai
-    </span>
-  </div>
+    </ui_text>
+  </ui_layer_content>
 </DocumentFragment>
 `;

package/build/primitives/Pressable/Pressable.constants.js

@@ -4,6 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.KEY_ENTER = void 0;
-var KEY_ENTER = 13;
+var KEY_ENTER = 'Enter';
 exports.KEY_ENTER = KEY_ENTER;
 //# sourceMappingURL=Pressable.constants.js.map

package/build/primitives/Pressable/Pressable.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.constants.js","names":["KEY_ENTER"],"sources":["../../../src/primitives/Pressable/Pressable.constants.js"],"sourcesContent":["const KEY_ENTER = 13;\n\nexport { KEY_ENTER };\n"],"mappings":";;;;;;AAAA,IAAMA,SAAS,GAAG,EAAE;AAAC"}
+{"version":3,"file":"Pressable.constants.js","names":["KEY_ENTER"],"sources":["../../../src/primitives/Pressable/Pressable.constants.js"],"sourcesContent":["const KEY_ENTER = 'Enter';\n\nexport { KEY_ENTER };\n"],"mappings":";;;;;;AAAA,IAAMA,SAAS,GAAG,OAAO;AAAC"}

package/build/primitives/Pressable/Pressable.js

@@ -11,7 +11,7 @@ var _helpers = require("../../helpers");
 var _Primitive = require("../Primitive");
 var _Pressable = require("./Pressable.constants");
 var _PressableModule = _interopRequireDefault(require("./Pressable.module.css"));
-var _excluded = ["children", "disabled", "preventDefault", "tag", "onEnter", "onLeave", "onPress"];
+var _excluded = ["children", "disabled", "preventDefault", "tabIndex", "onEnter", "onLeave", "onPress"];
 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; }
@@ -25,8 +25,8 @@ var Pressable = function Pressable(_ref) {
     disabled = _ref.disabled,
     _ref$preventDefault = _ref.preventDefault,
     preventDefault = _ref$preventDefault === void 0 ? true : _ref$preventDefault,
-    _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
     onEnter = _ref.onEnter,
     onLeave = _ref.onLeave,
     _ref$onPress = _ref.onPress,
@@ -35,8 +35,9 @@ var Pressable = function Pressable(_ref) {
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, _objectSpread(_objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled,
     role: others.role || 'pressable',
-    tag: tag
+    tag: others.tag || 'pressable'
   }, !disabled ? {
+    tabIndex: tabIndex,
     onClick: function onClick(event) {
       if (preventDefault) {
         event.preventDefault();
@@ -45,7 +46,7 @@ var Pressable = function Pressable(_ref) {
       onPress(event);
     },
     onKeyPress: function onKeyPress(event) {
-      if (event.keyCode === _Pressable.KEY_ENTER) {
+      if (event.key === _Pressable.KEY_ENTER) {
         if (preventDefault) {
           event.preventDefault();
           event.stopPropagation();
@@ -65,7 +66,7 @@ Pressable.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   disabled: _propTypes.default.bool,
   preventDefault: _propTypes.default.bool,
-  tag: _propTypes.default.string,
+  tabIndex: _propTypes.default.number,
   onEnter: _propTypes.default.func,
   onLeave: _propTypes.default.func,
   onPress: _propTypes.default.func

package/build/primitives/Pressable/Pressable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pressable.js","names":["Pressable","children","disabled","preventDefault","tag","onEnter","onLeave","onPress","others","React","createElement","Primitive","role","onClick","event","stopPropagation","onKeyPress","keyCode","KEY_ENTER","onMouseEnter","onMouseLeave","className","styles","style","pressable","displayName","propTypes","PropTypes","oneOfType","string","node","bool","func"],"sources":["../../../src/primitives/Pressable/Pressable.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { KEY_ENTER } from './Pressable.constants';\nimport style from './Pressable.module.css';\n\nconst Pressable = ({\n  children,\n  disabled,\n  preventDefault = true,\n  tag = 'div',\n  onEnter,\n  onLeave,\n  onPress = () => {},\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      disabled,\n      role: others.role || 'pressable',\n      tag,\n      ...(!disabled\n        ? {\n            onClick: (event) => {\n              if (preventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n              onPress(event);\n            },\n            onKeyPress: (event) => {\n              if (event.keyCode === KEY_ENTER) {\n                if (preventDefault) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n                onPress(event);\n              }\n            },\n            onMouseEnter: onEnter,\n            onMouseLeave: onLeave,\n          }\n        : {}),\n      className: styles(style.pressable, disabled && style.disabled, others.className),\n    },\n    children,\n  );\n\nPressable.displayName = 'Primitive:Pressable';\n\nPressable.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Pressable };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3C,IAAMA,SAAS,GAAG,SAAZA,SAAS;EAAA,IACbC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,2BACRC,cAAc;IAAdA,cAAc,oCAAG,IAAI;IAAA,gBACrBC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IACXC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,oBACPC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,gDAEJH,MAAM;IACTN,QAAQ,EAARA,QAAQ;IACRU,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,WAAW;IAChCR,GAAG,EAAHA;EAAG,GACC,CAACF,QAAQ,GACT;IACEW,OAAO,EAAE,iBAACC,KAAK,EAAK;MAClB,IAAIX,cAAc,EAAE;QAClBW,KAAK,CAACX,cAAc,EAAE;QACtBW,KAAK,CAACC,eAAe,EAAE;MACzB;MACAR,OAAO,CAACO,KAAK,CAAC;IAChB,CAAC;IACDE,UAAU,EAAE,oBAACF,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACG,OAAO,KAAKC,oBAAS,EAAE;QAC/B,IAAIf,cAAc,EAAE;UAClBW,KAAK,CAACX,cAAc,EAAE;UACtBW,KAAK,CAACC,eAAe,EAAE;QACzB;QACAR,OAAO,CAACO,KAAK,CAAC;MAChB;IACF,CAAC;IACDK,YAAY,EAAEd,OAAO;IACrBe,YAAY,EAAEd;EAChB,CAAC,GACD,CAAC,CAAC;IACNe,SAAS,EAAE,IAAAC,eAAM,EAACC,wBAAK,CAACC,SAAS,EAAEtB,QAAQ,IAAIqB,wBAAK,CAACrB,QAAQ,EAAEM,MAAM,CAACa,SAAS;EAAC,IAElFpB,QAAQ,CACT;AAAA;AAAC;AAEJD,SAAS,CAACyB,WAAW,GAAG,qBAAqB;AAE7CzB,SAAS,CAAC0B,SAAS,GAAG;EACpBzB,QAAQ,EAAE0B,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjE5B,QAAQ,EAAEyB,kBAAS,CAACI,IAAI;EACxB5B,cAAc,EAAEwB,kBAAS,CAACI,IAAI;EAC9B3B,GAAG,EAAEuB,kBAAS,CAACE,MAAM;EACrBxB,OAAO,EAAEsB,kBAAS,CAACK,IAAI;EACvB1B,OAAO,EAAEqB,kBAAS,CAACK,IAAI;EACvBzB,OAAO,EAAEoB,kBAAS,CAACK;AACrB,CAAC"}
+{"version":3,"file":"Pressable.js","names":["Pressable","children","disabled","preventDefault","tabIndex","onEnter","onLeave","onPress","others","React","createElement","Primitive","role","tag","onClick","event","stopPropagation","onKeyPress","key","KEY_ENTER","onMouseEnter","onMouseLeave","className","styles","style","pressable","displayName","propTypes","PropTypes","oneOfType","string","node","bool","number","func"],"sources":["../../../src/primitives/Pressable/Pressable.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Primitive } from '../Primitive';\nimport { KEY_ENTER } from './Pressable.constants';\nimport style from './Pressable.module.css';\n\nconst Pressable = ({\n  children,\n  disabled,\n  preventDefault = true,\n  tabIndex = 0,\n  onEnter,\n  onLeave,\n  onPress = () => {},\n  ...others\n}) =>\n  React.createElement(\n    Primitive,\n    {\n      ...others,\n      disabled,\n      role: others.role || 'pressable',\n      tag: others.tag || 'pressable',\n      ...(!disabled\n        ? {\n            tabIndex,\n            onClick: (event) => {\n              if (preventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n              }\n              onPress(event);\n            },\n            onKeyPress: (event) => {\n              if (event.key === KEY_ENTER) {\n                if (preventDefault) {\n                  event.preventDefault();\n                  event.stopPropagation();\n                }\n                onPress(event);\n              }\n            },\n            onMouseEnter: onEnter,\n            onMouseLeave: onLeave,\n          }\n        : {}),\n      className: styles(style.pressable, disabled && style.disabled, others.className),\n    },\n    children,\n  );\n\nPressable.displayName = 'Primitive:Pressable';\n\nPressable.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  tabIndex: PropTypes.number,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Pressable };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AAA2C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE3C,IAAMA,SAAS,GAAG,SAAZA,SAAS;EAAA,IACbC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IAAA,2BACRC,cAAc;IAAdA,cAAc,oCAAG,IAAI;IAAA,qBACrBC,QAAQ;IAARA,QAAQ,8BAAG,CAAC;IACZC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IAAA,oBACPC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IACfC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,oBAAS,gDAEJH,MAAM;IACTN,QAAQ,EAARA,QAAQ;IACRU,IAAI,EAAEJ,MAAM,CAACI,IAAI,IAAI,WAAW;IAChCC,GAAG,EAAEL,MAAM,CAACK,GAAG,IAAI;EAAW,GAC1B,CAACX,QAAQ,GACT;IACEE,QAAQ,EAARA,QAAQ;IACRU,OAAO,EAAE,iBAACC,KAAK,EAAK;MAClB,IAAIZ,cAAc,EAAE;QAClBY,KAAK,CAACZ,cAAc,EAAE;QACtBY,KAAK,CAACC,eAAe,EAAE;MACzB;MACAT,OAAO,CAACQ,KAAK,CAAC;IAChB,CAAC;IACDE,UAAU,EAAE,oBAACF,KAAK,EAAK;MACrB,IAAIA,KAAK,CAACG,GAAG,KAAKC,oBAAS,EAAE;QAC3B,IAAIhB,cAAc,EAAE;UAClBY,KAAK,CAACZ,cAAc,EAAE;UACtBY,KAAK,CAACC,eAAe,EAAE;QACzB;QACAT,OAAO,CAACQ,KAAK,CAAC;MAChB;IACF,CAAC;IACDK,YAAY,EAAEf,OAAO;IACrBgB,YAAY,EAAEf;EAChB,CAAC,GACD,CAAC,CAAC;IACNgB,SAAS,EAAE,IAAAC,eAAM,EAACC,wBAAK,CAACC,SAAS,EAAEvB,QAAQ,IAAIsB,wBAAK,CAACtB,QAAQ,EAAEM,MAAM,CAACc,SAAS;EAAC,IAElFrB,QAAQ,CACT;AAAA;AAAC;AAEJD,SAAS,CAAC0B,WAAW,GAAG,qBAAqB;AAE7C1B,SAAS,CAAC2B,SAAS,GAAG;EACpB1B,QAAQ,EAAE2B,kBAAS,CAACC,SAAS,CAAC,CAACD,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACG,IAAI,CAAC,CAAC;EACjE7B,QAAQ,EAAE0B,kBAAS,CAACI,IAAI;EACxB7B,cAAc,EAAEyB,kBAAS,CAACI,IAAI;EAC9B5B,QAAQ,EAAEwB,kBAAS,CAACK,MAAM;EAC1B5B,OAAO,EAAEuB,kBAAS,CAACM,IAAI;EACvB5B,OAAO,EAAEsB,kBAAS,CAACM,IAAI;EACvB3B,OAAO,EAAEqB,kBAAS,CAACM;AACrB,CAAC"}

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

@@ -2,52 +2,56 @@
 
 exports[`primitive:<Pressable> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_pressable
     class="pressable mirai"
+    tabindex="0"
   >
     children
-  </div>
+  </ui_pressable>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Pressable> prop:disabled 1`] = `
 <DocumentFragment>
-  <div
+  <ui_pressable
     class="pressable disabled"
     disabled=""
   >
     children
-  </div>
+  </ui_pressable>
 </DocumentFragment>
 `;
 
-exports[`primitive:<Pressable> prop:tag 1`] = `
+exports[`primitive:<Pressable> renders 1`] = `
 <DocumentFragment>
-  <a
+  <ui_pressable
     class="pressable"
+    tabindex="0"
   >
     children
-  </a>
+  </ui_pressable>
 </DocumentFragment>
 `;
 
-exports[`primitive:<Pressable> renders 1`] = `
+exports[`primitive:<Pressable> tag 1`] = `
 <DocumentFragment>
-  <div
+  <ui_tag
     class="pressable"
+    tabindex="0"
   >
     children
-  </div>
+  </ui_tag>
 </DocumentFragment>
 `;
 
 exports[`primitive:<Pressable> testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_pressable
     class="pressable"
     data-testid="mirai"
+    tabindex="0"
   >
     children
-  </div>
+  </ui_pressable>
 </DocumentFragment>
 `;

package/build/primitives/Primitive/Primitive.constants.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.COMMON_PROPS = exports.BANNED_JEST_PROPS = void 0;
-var BANNED_JEST_PROPS = ['role'];
+var BANNED_JEST_PROPS = ['role', 'aria-hidden', 'aria-label'];
 exports.BANNED_JEST_PROPS = BANNED_JEST_PROPS;
 var COMMON_PROPS = {
   role: 'data-role',

package/build/primitives/Primitive/Primitive.constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"Primitive.constants.js","names":["BANNED_JEST_PROPS","COMMON_PROPS","role","testId"],"sources":["../../../src/primitives/Primitive/Primitive.constants.js"],"sourcesContent":["const BANNED_JEST_PROPS = ['role'];\n\nconst COMMON_PROPS = {\n  role: 'data-role',\n  testId: 'data-testid',\n};\n\nexport { BANNED_JEST_PROPS, COMMON_PROPS };\n"],"mappings":";;;;;;AAAA,IAAMA,iBAAiB,GAAG,CAAC,MAAM,CAAC;AAAC;AAEnC,IAAMC,YAAY,GAAG;EACnBC,IAAI,EAAE,WAAW;EACjBC,MAAM,EAAE;AACV,CAAC;AAAC"}
+{"version":3,"file":"Primitive.constants.js","names":["BANNED_JEST_PROPS","COMMON_PROPS","role","testId"],"sources":["../../../src/primitives/Primitive/Primitive.constants.js"],"sourcesContent":["const BANNED_JEST_PROPS = ['role', 'aria-hidden', 'aria-label'];\n\nconst COMMON_PROPS = {\n  role: 'data-role',\n  testId: 'data-testid',\n};\n\nexport { BANNED_JEST_PROPS, COMMON_PROPS };\n"],"mappings":";;;;;;AAAA,IAAMA,iBAAiB,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,YAAY,CAAC;AAAC;AAEhE,IAAMC,YAAY,GAAG;EACnBC,IAAI,EAAE,WAAW;EACjBC,MAAM,EAAE;AACV,CAAC;AAAC"}

package/build/primitives/Primitive/Primitive.js

@@ -20,9 +20,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Primitive = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$tag = _ref.tag,
-    tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+    tag = _ref$tag === void 0 ? 'primitive' : _ref$tag,
     others = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(tag, _objectSpread(_objectSpread({}, (0, _helpers.getProps)(others)), {}, {
+  return /*#__PURE__*/_react.default.createElement((0, _helpers.getTag)(tag, others), _objectSpread(_objectSpread({}, (0, _helpers.getProps)(others)), {}, {
     ref: ref
   }), children);
 });

package/build/primitives/Primitive/Primitive.js.map

@@ -1 +1 @@
-{"version":3,"file":"Primitive.js","names":["Primitive","React","forwardRef","ref","children","tag","others","createElement","getProps","displayName","propTypes","PropTypes","any","role","string","testId"],"sources":["../../../src/primitives/Primitive/Primitive.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getProps } from './helpers';\n\nconst Primitive = React.forwardRef(({ children, tag = 'div', ...others }, ref) =>\n  React.createElement(tag, { ...getProps(others), ref }, children),\n);\n\nPrimitive.displayName = 'Primitive';\n\nPrimitive.propTypes = {\n  children: PropTypes.any,\n  role: PropTypes.string,\n  tag: PropTypes.string,\n  testId: PropTypes.string,\n};\n\nexport { Primitive };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAErC,IAAMA,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAAuCC,GAAG;EAAA,IAAvCC,QAAQ,QAARA,QAAQ;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,KAAK;IAAKC,MAAM;EAAA,oBACpEL,cAAK,CAACM,aAAa,CAACF,GAAG,kCAAO,IAAAG,iBAAQ,EAACF,MAAM,CAAC;IAAEH,GAAG,EAAHA;EAAG,IAAIC,QAAQ,CAAC;AAAA,EACjE;AAAC;AAEFJ,SAAS,CAACS,WAAW,GAAG,WAAW;AAEnCT,SAAS,CAACU,SAAS,GAAG;EACpBN,QAAQ,EAAEO,kBAAS,CAACC,GAAG;EACvBC,IAAI,EAAEF,kBAAS,CAACG,MAAM;EACtBT,GAAG,EAAEM,kBAAS,CAACG,MAAM;EACrBC,MAAM,EAAEJ,kBAAS,CAACG;AACpB,CAAC"}
+{"version":3,"file":"Primitive.js","names":["Primitive","React","forwardRef","ref","children","tag","others","createElement","getTag","getProps","displayName","propTypes","PropTypes","any","role","string","testId"],"sources":["../../../src/primitives/Primitive/Primitive.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { getProps, getTag } from './helpers';\n\nconst Primitive = React.forwardRef(({ children, tag = 'primitive', ...others }, ref) =>\n  React.createElement(getTag(tag, others), { ...getProps(others), ref }, children),\n);\n\nPrimitive.displayName = 'Primitive';\n\nPrimitive.propTypes = {\n  children: PropTypes.any,\n  role: PropTypes.string,\n  tag: PropTypes.string,\n  testId: PropTypes.string,\n};\n\nexport { Primitive };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,SAAS,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAA6CC,GAAG;EAAA,IAA7CC,QAAQ,QAARA,QAAQ;IAAA,gBAAEC,GAAG;IAAHA,GAAG,yBAAG,WAAW;IAAKC,MAAM;EAAA,oBAC1EL,cAAK,CAACM,aAAa,CAAC,IAAAC,eAAM,EAACH,GAAG,EAAEC,MAAM,CAAC,kCAAO,IAAAG,iBAAQ,EAACH,MAAM,CAAC;IAAEH,GAAG,EAAHA;EAAG,IAAIC,QAAQ,CAAC;AAAA,EACjF;AAAC;AAEFJ,SAAS,CAACU,WAAW,GAAG,WAAW;AAEnCV,SAAS,CAACW,SAAS,GAAG;EACpBP,QAAQ,EAAEQ,kBAAS,CAACC,GAAG;EACvBC,IAAI,EAAEF,kBAAS,CAACG,MAAM;EACtBV,GAAG,EAAEO,kBAAS,CAACG,MAAM;EACrBC,MAAM,EAAEJ,kBAAS,CAACG;AACpB,CAAC"}

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

@@ -2,7 +2,7 @@
 
 exports[`<Primitive> inherit:className 1`] = `
 <DocumentFragment>
-  <div
+  <ui_primitive
     class="mirai"
   />
 </DocumentFragment>
@@ -10,29 +10,23 @@ exports[`<Primitive> inherit:className 1`] = `
 
 exports[`<Primitive> prop:children 1`] = `
 <DocumentFragment>
-  <div>
+  <ui_primitive>
     <span>
       mirai
     </span>
-  </div>
+  </ui_primitive>
 </DocumentFragment>
 `;
 
 exports[`<Primitive> prop:role 1`] = `
 <DocumentFragment>
-  <div />
-</DocumentFragment>
-`;
-
-exports[`<Primitive> prop:tag 1`] = `
-<DocumentFragment>
-  <section />
+  <ui_primitive />
 </DocumentFragment>
 `;
 
 exports[`<Primitive> prop:testId 1`] = `
 <DocumentFragment>
-  <div
+  <ui_primitive
     data-testid="mirai"
   />
 </DocumentFragment>
@@ -40,6 +34,12 @@ exports[`<Primitive> prop:testId 1`] = `
 
 exports[`<Primitive> renders 1`] = `
 <DocumentFragment>
-  <div />
+  <ui_primitive />
+</DocumentFragment>
+`;
+
+exports[`<Primitive> tag 1`] = `
+<DocumentFragment>
+  <ui_section />
 </DocumentFragment>
 `;

package/build/primitives/Primitive/helpers/getTag.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTag = void 0;
+var NATIVE_TAGS = [
+// -- PRIMITIVES -------------------------------------------------------------
+'iframe', 'img',
+// <Input>
+'input', 'label', 'textarea',
+// <Select>
+'select', 'option',
+// <Text>
+'h1', 'h2', 'h3', 'span',
+// -- COMPONENTS -------------------------------------------------------------
+// <Action>
+'a',
+// <Button>
+'button',
+// <Form>
+'form',
+// <Table>
+'table', 'thead', 'tbody', 'tr', 'th', 'td'];
+var getTag = function getTag() {
+  var tag = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'primitive';
+  var isNative = NATIVE_TAGS.includes(tag);
+
+  // * Experimental
+  // if (tag === 'button' && props.type !== 'submit') isNative = false;
+
+  return isNative ? tag : "ui_".concat(tag);
+};
+exports.getTag = getTag;
+//# sourceMappingURL=getTag.js.map

package/build/primitives/Primitive/helpers/getTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTag.js","names":["NATIVE_TAGS","getTag","tag","isNative","includes"],"sources":["../../../../src/primitives/Primitive/helpers/getTag.js"],"sourcesContent":["const NATIVE_TAGS = [\n  // -- PRIMITIVES -------------------------------------------------------------\n  'iframe',\n  'img',\n  // <Input>\n  'input',\n  'label',\n  'textarea',\n  // <Select>\n  'select',\n  'option',\n  // <Text>\n  'h1',\n  'h2',\n  'h3',\n  'span',\n  // -- COMPONENTS -------------------------------------------------------------\n  // <Action>\n  'a',\n  // <Button>\n  'button',\n  // <Form>\n  'form',\n  // <Table>\n  'table',\n  'thead',\n  'tbody',\n  'tr',\n  'th',\n  'td',\n];\n\nexport const getTag = (\n  tag = 'primitive',\n  // * experimental\n  // props = {}\n) => {\n  let isNative = NATIVE_TAGS.includes(tag);\n\n  // * Experimental\n  // if (tag === 'button' && props.type !== 'submit') isNative = false;\n\n  return isNative ? tag : `ui_${tag}`;\n};\n"],"mappings":";;;;;;AAAA,IAAMA,WAAW,GAAG;AAClB;AACA,QAAQ,EACR,KAAK;AACL;AACA,OAAO,EACP,OAAO,EACP,UAAU;AACV;AACA,QAAQ,EACR,QAAQ;AACR;AACA,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAM;AACN;AACA;AACA,GAAG;AACH;AACA,QAAQ;AACR;AACA,MAAM;AACN;AACA,OAAO,EACP,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,CACL;AAEM,IAAMC,MAAM,GAAG,SAATA,MAAM,GAId;EAAA,IAHHC,GAAG,uEAAG,WAAW;EAIjB,IAAIC,QAAQ,GAAGH,WAAW,CAACI,QAAQ,CAACF,GAAG,CAAC;;EAExC;EACA;;EAEA,OAAOC,QAAQ,GAAGD,GAAG,gBAASA,GAAG,CAAE;AACrC,CAAC;AAAC"}

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

@@ -14,4 +14,15 @@ Object.keys(_getProps).forEach(function (key) {
     }
   });
 });
+var _getTag = require("./getTag");
+Object.keys(_getTag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getTag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _getTag[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/primitives/Primitive/helpers/index.js"],"sourcesContent":["export * from './getProps';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/primitives/Primitive/helpers/index.js"],"sourcesContent":["export * from './getProps';\nexport * from './getTag';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/primitives/Radio/Radio.js

@@ -29,6 +29,7 @@ var Radio = function Radio(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
     role: others.role || 'radio',
+    tag: others.tag || 'radio',
     className: (0, _helpers.styles)(_RadioModule.default.radio, others.className),
     style: others.style
   }, /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
@@ -42,7 +43,6 @@ var Radio = function Radio(_ref) {
     testId: others.testId,
     className: _RadioModule.default.input
   }), /*#__PURE__*/_react.default.createElement(_Primitive.Primitive, {
-    tag: "span",
     className: _RadioModule.default.checkmark
   }));
 };