@mirai/ui 1.0.48 → 1.0.50

package/README.md

@@ -17,8 +17,10 @@ yarn add @mirai/ui
 This primitive returns a checkbox button based on the following properties:
 
 - `checked:boolean` if true, the checkbox button is checked
+- `children:node`
 - `disabled:boolean` applying 'disabled' attribute
-- `name:string` input name
+- `name:string` input name (required)
+- `value:string` input value
 - `onChange:function` executed when input value changes
 
 ```jsx
@@ -30,8 +32,8 @@ const MyComponent = () => (
       name="checkbox"
       checked={false}
       disabled={false}
-      value={primitive}
-      onChange={() => console.log('change')
+      value="primitive"
+      onChange={() => console.log('change')}
     />
   </View>
 ```
@@ -50,6 +52,8 @@ const MyComponent = () => (
 );
 ```
 
+> ℹ️ Current available names: Empty, Account, Left, Right, Up, Down, Close, CloseArrow, Plus, Minus, EyeOpen, EyeClose, Check, Error, Info, Success, Warning, Bed, Calendar, List, Lock, Person
+
 ### Input
 
 This primitive returns an input or a textarea based on the following props:
@@ -85,7 +89,13 @@ const MyComponent = () => (
 
 This primitive returns an element that displays with relative position to other element based on the following props:
 
+- `bottom:bool` if you want open the content below the reference component.
+- `centered:bool` if you want center the content using screen as parent.
 - `children:node` two children elements are accepted, the first one is the element to be displayed and the second one is the LayerContent that wraps the element to be displayed if the visible prop is true
+- `forceRender:bool` if you want render content children even if `visible` is _falsy_, by default is `true`.
+- `left:bool` if you want open the content on the left of the reference component.
+- `right:bool` if you want open the content on the right of the reference component.
+- `top:bool` if you want open the content above the reference component.
 - `visible:boolean` showing or hiding the layer
 
 The position of the layer is based on the position of the element to be displayed. If the layer can show on right or left because have a gap in this direction, the layer will be shown on the right or left of the element to be displayed. If the layer can open on top or bottom because have a gap in this direction, the layer will be shown on the top or bottom of the element to be displayed
@@ -115,6 +125,7 @@ This primitive returns pressable elements based on the following properties:
 
 - `children:node`
 - `disabled:boolean` disable attribute
+- `preventDefault:boolean` if you want stop the event tunneling.
 - `tag:string` html tag applied to a primitive
 - `onEnter:function` executed once the user hovers over the element
 - `onLeave:function` executed once the user hovers away
@@ -139,6 +150,7 @@ This primitive returns a radio button based on the following properties:
 - `checked:boolean` if true, the radio button is checked
 - `disabled:boolean` applying 'disabled' attribute
 - `name:string` input name
+- `value:string` input value
 - `onChange:function` executed when input value changes
 
 ```jsx
@@ -167,6 +179,7 @@ This primitive is used to make vertically scrollable views and receives the foll
 - `scrollEventThrottle:number` scroll timeout value
 - `scrollIndicator:boolean` if true the scroll indicator is shown
 - `scrollTo:number` coordinate to scroll to
+- `snap:bool` if you want use the CSS feature `scroll-snap`
 - `tag:string` html tag of resulting element
 - `width:number` width value
 - `onscroll:function` executed when user scrolls over the element
@@ -190,9 +203,10 @@ A primitive for displaying text. It receives the following props:
 - `bold:boolean` modifying font-weight
 - `children:string`
 - `headline:boolean` modifying font-size
-- `upperCase:boolean` switching text to upper case
 - `small:boolean` modifying font-size
+- `subheadline:boolean` modifying font-size
 - `tag:string` html tag of resulting element
+- `upperCase:boolean` switching text to upper case
 
 ```jsx
 import { Text, View } from '@mirai/ui';
@@ -236,12 +250,16 @@ React components assembled with primitives.
 
 A button component that receives the following props:
 
+- `busy:bool` if `true` will disable button and give feedback as something is processing.
 - `children:node|string`
 - `disabled:boolean` applying 'disabled' attribute
 - `large:boolean` modifying the button size
+- `outlined:boolean` modifying the button appearance using an outlined line
+- `rounded:boolean` if true will use the theme border-radius variable for round the corners
 - `small:boolean` modifying the button size
 - `squared:boolean` if true gives rectangular shape to the button (false by default)
 - `tag:string` html tag of resulting element ('button' by default)
+- `wide:bool` modifying the button to full-width
 - `onEnter:function` executed when the user hovers over
 - `onLeave:function` executed when the user hovers away
 - `onPress:function` executed on mouse click on the element
@@ -267,12 +285,11 @@ A calendar component that receives the following props:
 - `captions:object` captions to be placed into calendar cells
 - `disabledDates:[string]` dates to be shown as unavailable and can't be selected
 - `disabledPast:boolean` past dates to be shown as unavailable and can't be selected
-- `disabledWeekends` boolean: weekends to be shown as unavailable and can't be selected
 - `format:string` date display format (e.g. "DD/MM/YYYY")
 - `from:string` date in specific format (e.g. "31/03/2022")
 - `highlights:[string]` highlights a determinate group of dates
-- `months:number` number of months to be visible
 - `locale:string` locale value
+- `months:number` number of months to be visible
 - `range:boolean` Enable range selection
 - `rangeMaxDays:number` Maximum days in a range
 - `rangeMinDays:number` Minimum days in a range
@@ -280,6 +297,8 @@ A calendar component that receives the following props:
 - `value:string|[string]`
 - `onChange:function` executed when input value changes
 - `onFocus:function` executed on calendar cell hover
+- `onNavigation:function` executed when move to the next/previous months
+- `onScroll:function` executed when user scrolls the calendars container (only available in mobile environments)
 
 ```jsx
 import { Calendar } from '@mirai/ui';
@@ -311,11 +330,13 @@ const MyComponent = props => {
 
 Input number component controlling the value with 2 buttons. Receives the following props:
 
+- `disabled:bool` applying 'disabled' attribute
 - `hint:string` brief message
 - `label:string` input label
 - `max:number` maximum input value
 - `min:number` minimum input value
 - `name:string` input name attribute (required)
+- `rounded:bool` if you want use the `rounded` property of `<Button>`
 - `step:number` to be added/subtracted from value on each button click
 - `value:number` input value
 - `onChange:function` executed when input value changes
@@ -334,11 +355,11 @@ const MyComponent = (props) => {
 
 This component is used to display a radio button or checkbox base on a mandatory string prop `type`. It receives the following props:
 
-- `reverse:boolean` if true the label is placed on the left side of the input element (false by default)
 - `checked:boolean` if true, the input is checked
 - `disabled:boolean` applying 'disabled' attribute
 - `label:string` input label
 - `name:string` input name
+- `reverse:boolean` if true the label is placed on the left side of the input element (false by default)
 - `type:string` type of input (radio or checkbox)
 - `value:number` input value
 - `onChange:function` executed when input value changes
@@ -391,6 +412,7 @@ Text input component receiving the following props:
 - `disabled:boolean` applying 'disabled' attribute
 - `error:boolean` true if error event fired
 - `hint:string` brief message
+- `icon:string` if you want use an `<Icon>` within the component
 - `label:string` input label
 - `multiline:boolean` : if true returning textarea
 - `name:string` : input name (required)
@@ -466,8 +488,12 @@ const MyComponent = () => {
 A modal component receiving the following props:
 
 - `children:node`
+- `portal:bool` if you want use _portal feature_ of React API
+- `overflow:bool` wraps all modal in a semi-transparent layer
+- `title:string` shows a title for the modal
 - `visible:boolean` if true modal is shown
-- `onClose:function` executed once modal close button is clicked
+- `onBack:function` executed once back button is clicked
+- `onClose:function` executed once close button is clicked
 
 ```jsx
 import { Modal, View } from '@mirai/ui';
@@ -512,7 +538,7 @@ Styles can be customised by using Theme utility.
 
 This method returns current theme settings (variables with values). This method receives as an optional parameter a string with a prefix (domain) to specify the scope ('--mirai-ui-' by default);
 
-### set(variable, value, domain)
+### setVariable(variable, value, domain)
 
 This method sets a value of the variable passed as a parameter.
 
@@ -541,3 +567,51 @@ export default () => {
   );
 };
 ```
+
+### shadeColors
+
+This method helps you to create a color palette for the `accent` color of your theme. For example if in our theme we have `--mirai-ui-accent: #3978c5`:
+
+```js
+Theme.shadeColors()
+>> ACCENT:400 #61a0ed
+   ACCENT:300 #89c8ff
+   ACCENT:200 #edffff
+```
+
+## Hooks
+
+a repository of hooks which will help you create simpler solutions.
+
+### useDevice
+
+This _hook_ can help you know what type of device your application or component is running on. Lets see the properties that this _hook_ is going to expose for you:
+
+<!-- screen -->
+
+- `height:number` height resolution of device
+- `width:number` width resolution of device
+<!-- navigator -->
+- `userAgent:string` type of browser's user agent
+- `chrome:bool` using chrome browser
+- `firefox:bool` using firefox browser
+- `inApp:bool` using an application browser such as Facebook, Twitter..
+- `mobile:bool` using a mobile browser
+- `safari:bool` using safari browser
+- `touch:bool` touch screen capability
+<!--  orientation -->
+- `isLandscape:bool` orientation is landscape
+- `isPortrait:bool` orientation is portrait
+<!-- type -->
+- `isMobile:bool` is in the mobile breakpoint (<600px)
+- `isDesktop:bool` in in the desktop breakpoint (>=600px)
+
+Let's see a simple use of the hook:
+
+```jsx
+const component = () => {
+  const { isPortrait, isDesktop } = useDevice();
+
+  return <div classname={styles(style.container, isPortrait && isDesktop && style.mobileApp)} />;
+};
+```

package/build/components/Button/Button.js

@@ -15,7 +15,7 @@ var _primitives = require("../../primitives");
 
 var _ButtonModule = _interopRequireDefault(require("./Button.module.css"));
 
-var _excluded = ["busy", "children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag", "onPress"];
+var _excluded = ["busy", "children", "disabled", "large", "outlined", "rounded", "small", "squared", "tag", "wide", "onPress"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,13 +41,14 @@ var Button = function Button(_ref) {
       squared = _ref$squared === void 0 ? false : _ref$squared,
       _ref$tag = _ref.tag,
       tag = _ref$tag === void 0 ? 'button' : _ref$tag,
+      wide = _ref.wide,
       onPress = _ref.onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled || busy,
     tag: tag,
-    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && _ButtonModule.default.outlined, outlined && (disabled || busy) && _ButtonModule.default.disabled, others.className),
+    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, outlined && _ButtonModule.default.outlined, outlined && (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className),
     onPress: !disabled && !busy ? onPress : undefined
   }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, busy !== undefined && /*#__PURE__*/_react.default.createElement(_primitives.View, {
     className: (0, _helpers.styles)(_ButtonModule.default.busyProgress, busy && _ButtonModule.default.active)
@@ -66,6 +67,7 @@ Button.propTypes = {
   small: _propTypes.default.bool,
   squared: _propTypes.default.bool,
   tag: _propTypes.default.string,
+  wide: _propTypes.default.bool,
   onEnter: _propTypes.default.func,
   onLeave: _propTypes.default.func,
   onPress: _propTypes.default.func

package/build/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","outlined","rounded","small","squared","tag","onPress","others","React","createElement","Pressable","className","style","button","undefined","busyProgress","active","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  outlined,\n  rounded,\n  small,\n  squared = false,\n  tag = 'button',\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && style.outlined,\n        outlined && (disabled || busy) && style.disabled,\n        others.className,\n      ),\n      onPress: !disabled && !busy ? onPress : undefined,\n    },\n    <>\n      {busy !== undefined && <View className={styles(style.busyProgress, busy && style.active)} />}\n      {children}\n    </>,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  rounded: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IACbC,IADa,QACbA,IADa;EAAA,IAEbC,QAFa,QAEbA,QAFa;EAAA,IAGbC,QAHa,QAGbA,QAHa;EAAA,IAIbC,KAJa,QAIbA,KAJa;EAAA,IAKbC,QALa,QAKbA,QALa;EAAA,IAMbC,OANa,QAMbA,OANa;EAAA,IAObC,KAPa,QAObA,KAPa;EAAA,wBAQbC,OARa;EAAA,IAQbA,OARa,6BAQH,KARG;EAAA,oBASbC,GATa;EAAA,IASbA,GATa,yBASP,QATO;EAAA,IAUbC,OAVa,QAUbA,OAVa;EAAA,IAWVC,MAXU;;EAAA,oBAabC,eAAMC,aAAN,CACEC,qBADF,kCAGOH,MAHP;IAIIR,QAAQ,EAAEA,QAAQ,IAAIF,IAJ1B;IAKIQ,GAAG,EAAHA,GALJ;IAMIM,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAEThB,IAAI,IAAIe,sBAAMf,IAFL,EAGTG,KAAK,IAAIY,sBAAMZ,KAHN,EAITG,KAAK,IAAIS,sBAAMT,KAJN,EAKTD,OAAO,IAAIU,sBAAMV,OALR,EAMTE,OAAO,IAAIQ,sBAAMR,OANR,EAOTH,QAAQ,IAAIW,sBAAMX,QAPT,EAQTA,QAAQ,KAAKF,QAAQ,IAAIF,IAAjB,CAAR,IAAkCe,sBAAMb,QAR/B,EASTQ,MAAM,CAACI,SATE,CANf;IAiBIL,OAAO,EAAE,CAACP,QAAD,IAAa,CAACF,IAAd,GAAqBS,OAArB,GAA+BQ;EAjB5C,iBAmBE,4DACGjB,IAAI,KAAKiB,SAAT,iBAAsB,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOF,sBAAMG,YAAb,EAA2BlB,IAAI,IAAIe,sBAAMI,MAAzC;EAAjB,EADzB,EAEGlB,QAFH,CAnBF,CAba;AAAA,CAAf;;;AAsCAF,MAAM,CAACqB,WAAP,GAAqB,kBAArB;AAEArB,MAAM,CAACsB,SAAP,GAAmB;EACjBrB,IAAI,EAAEsB,mBAAUC,IADC;EAEjBtB,QAAQ,EAAEqB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,IAA7B,CAApB,CAFO;EAGjBxB,QAAQ,EAAEoB,mBAAUC,IAHH;EAIjBpB,KAAK,EAAEmB,mBAAUC,IAJA;EAKjBnB,QAAQ,EAAEkB,mBAAUC,IALH;EAMjBlB,OAAO,EAAEiB,mBAAUC,IANF;EAOjBjB,KAAK,EAAEgB,mBAAUC,IAPA;EAQjBhB,OAAO,EAAEe,mBAAUC,IARF;EASjBf,GAAG,EAAEc,mBAAUG,MATE;EAUjBE,OAAO,EAAEL,mBAAUM,IAVF;EAWjBC,OAAO,EAAEP,mBAAUM,IAXF;EAYjBnB,OAAO,EAAEa,mBAAUM;AAZF,CAAnB"}
+{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","outlined","rounded","small","squared","tag","wide","onPress","others","React","createElement","Pressable","className","style","button","undefined","busyProgress","active","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  outlined,\n  rounded,\n  small,\n  squared = false,\n  tag = 'button',\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        outlined && style.outlined,\n        outlined && (disabled || busy) && style.disabled,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress: !disabled && !busy ? onPress : undefined,\n    },\n    <>\n      {busy !== undefined && <View className={styles(style.busyProgress, busy && style.active)} />}\n      {children}\n    </>,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  outlined: PropTypes.bool,\n  rounded: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IACbC,IADa,QACbA,IADa;EAAA,IAEbC,QAFa,QAEbA,QAFa;EAAA,IAGbC,QAHa,QAGbA,QAHa;EAAA,IAIbC,KAJa,QAIbA,KAJa;EAAA,IAKbC,QALa,QAKbA,QALa;EAAA,IAMbC,OANa,QAMbA,OANa;EAAA,IAObC,KAPa,QAObA,KAPa;EAAA,wBAQbC,OARa;EAAA,IAQbA,OARa,6BAQH,KARG;EAAA,oBASbC,GATa;EAAA,IASbA,GATa,yBASP,QATO;EAAA,IAUbC,IAVa,QAUbA,IAVa;EAAA,IAWbC,OAXa,QAWbA,OAXa;EAAA,IAYVC,MAZU;;EAAA,oBAcbC,eAAMC,aAAN,CACEC,qBADF,kCAGOH,MAHP;IAIIT,QAAQ,EAAEA,QAAQ,IAAIF,IAJ1B;IAKIQ,GAAG,EAAHA,GALJ;IAMIO,SAAS,EAAE,qBACTC,sBAAMC,MADG,EAETjB,IAAI,IAAIgB,sBAAMhB,IAFL,EAGTG,KAAK,IAAIa,sBAAMb,KAHN,EAITG,KAAK,IAAIU,sBAAMV,KAJN,EAKTD,OAAO,IAAIW,sBAAMX,OALR,EAMTE,OAAO,IAAIS,sBAAMT,OANR,EAOTH,QAAQ,IAAIY,sBAAMZ,QAPT,EAQTA,QAAQ,KAAKF,QAAQ,IAAIF,IAAjB,CAAR,IAAkCgB,sBAAMd,QAR/B,EASTO,IAAI,IAAIO,sBAAMP,IATL,EAUTE,MAAM,CAACI,SAVE,CANf;IAkBIL,OAAO,EAAE,CAACR,QAAD,IAAa,CAACF,IAAd,GAAqBU,OAArB,GAA+BQ;EAlB5C,iBAoBE,4DACGlB,IAAI,KAAKkB,SAAT,iBAAsB,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOF,sBAAMG,YAAb,EAA2BnB,IAAI,IAAIgB,sBAAMI,MAAzC;EAAjB,EADzB,EAEGnB,QAFH,CApBF,CAda;AAAA,CAAf;;;AAwCAF,MAAM,CAACsB,WAAP,GAAqB,kBAArB;AAEAtB,MAAM,CAACuB,SAAP,GAAmB;EACjBtB,IAAI,EAAEuB,mBAAUC,IADC;EAEjBvB,QAAQ,EAAEsB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,IAA7B,CAApB,CAFO;EAGjBzB,QAAQ,EAAEqB,mBAAUC,IAHH;EAIjBrB,KAAK,EAAEoB,mBAAUC,IAJA;EAKjBpB,QAAQ,EAAEmB,mBAAUC,IALH;EAMjBnB,OAAO,EAAEkB,mBAAUC,IANF;EAOjBlB,KAAK,EAAEiB,mBAAUC,IAPA;EAQjBjB,OAAO,EAAEgB,mBAAUC,IARF;EASjBhB,GAAG,EAAEe,mBAAUG,MATE;EAUjBjB,IAAI,EAAEc,mBAAUC,IAVC;EAWjBI,OAAO,EAAEL,mBAAUM,IAXF;EAYjBC,OAAO,EAAEP,mBAAUM,IAZF;EAajBnB,OAAO,EAAEa,mBAAUM;AAbF,CAAnB"}

package/build/components/Button/Button.module.css

@@ -104,6 +104,10 @@
   width: var(--mirai-ui-button-squared);
 }
 
+.wide {
+  width: 100%;
+}
+
 @media only screen and (max-width: 600px) {
 }
 

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

@@ -99,6 +99,16 @@ exports[`component:<Button> prop:tag 1`] = `
 </DocumentFragment>
 `;
 
+exports[`component:<Button> prop:wide 1`] = `
+<DocumentFragment>
+  <button
+    class="pressable button wide"
+  >
+    children
+  </button>
+</DocumentFragment>
+`;
+
 exports[`component:<Button> renders 1`] = `
 <DocumentFragment>
   <button

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

@@ -15,7 +15,7 @@ var _primitives = require("../../primitives");
 
 var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
 
-var _excluded = ["children", "disabled", "divider", "icon", "label"];
+var _excluded = ["children", "disabled", "divider", "icon", "label", "value", "onPress"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -31,16 +31,20 @@ var Option = function Option(_ref) {
       divider = _ref.divider,
       icon = _ref.icon,
       label = _ref.label,
+      value = _ref.value,
+      onPress = _ref.onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _extends({}, others, {
+    preventDefault: false,
     tag: "div",
-    className: (0, _helpers.styles)(_MenuModule.default.option, divider && _MenuModule.default.divider, disabled && _MenuModule.default.disabled)
+    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, {
     name: icon,
-    className: (0, _helpers.styles)(_MenuModule.default.icon, disabled && _MenuModule.default.disabled)
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
-    className: (0, _helpers.styles)(_MenuModule.default.label, disabled && _MenuModule.default.disabled)
+    className: _MenuModule.default.icon
+  }), label && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    className: _MenuModule.default.label
   }, label), children);
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.Option.js","names":["Option","children","disabled","divider","icon","label","others","style","option","displayName","propTypes","PropTypes","node","bool","string","value","oneOfType","number","isRequired","onPress","func"],"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, ...others }) => (\n  <Pressable\n    {...others}\n    tag=\"div\"\n    className={styles(style.option, divider && style.divider, disabled && style.disabled)}\n  >\n    {icon && <Icon name={icon} className={styles(style.icon, disabled && style.disabled)} />}\n    <Text className={styles(style.label, disabled && style.disabled)}>{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.string,\n  label: PropTypes.string,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onPress: PropTypes.func,\n};\n\nexport { Option };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,QAAb,QAAaA,QAAb;EAAA,IAAuBC,OAAvB,QAAuBA,OAAvB;EAAA,IAAgCC,IAAhC,QAAgCA,IAAhC;EAAA,IAAsCC,KAAtC,QAAsCA,KAAtC;EAAA,IAAgDC,MAAhD;;EAAA,oBACb,6BAAC,qBAAD,eACMA,MADN;IAEE,GAAG,EAAC,KAFN;IAGE,SAAS,EAAE,qBAAOC,oBAAMC,MAAb,EAAqBL,OAAO,IAAII,oBAAMJ,OAAtC,EAA+CD,QAAQ,IAAIK,oBAAML,QAAjE;EAHb,IAKGE,IAAI,iBAAI,6BAAC,gBAAD;IAAM,IAAI,EAAEA,IAAZ;IAAkB,SAAS,EAAE,qBAAOG,oBAAMH,IAAb,EAAmBF,QAAQ,IAAIK,oBAAML,QAArC;EAA7B,EALX,eAME,6BAAC,gBAAD;IAAM,SAAS,EAAE,qBAAOK,oBAAMF,KAAb,EAAoBH,QAAQ,IAAIK,oBAAML,QAAtC;EAAjB,GAAmEG,KAAnE,CANF,EAOGJ,QAPH,CADa;AAAA,CAAf;;;AAYAD,MAAM,CAACS,WAAP,GAAqB,uBAArB;AAEAT,MAAM,CAACU,SAAP,GAAmB;EACjBT,QAAQ,EAAEU,mBAAUC,IADH;EAEjBV,QAAQ,EAAES,mBAAUE,IAFH;EAGjBV,OAAO,EAAEQ,mBAAUE,IAHF;EAIjBT,IAAI,EAAEO,mBAAUG,MAJC;EAKjBT,KAAK,EAAEM,mBAAUG,MALA;EAMjBC,KAAK,EAAEJ,mBAAUK,SAAV,CAAoB,CAACL,mBAAUG,MAAX,EAAmBH,mBAAUM,MAA7B,CAApB,EAA0DC,UANhD;EAOjBC,OAAO,EAAER,mBAAUS;AAPF,CAAnB"}
+{"version":3,"file":"Menu.Option.js","names":["Option","children","disabled","divider","icon","label","value","onPress","others","style","option","undefined","displayName","propTypes","PropTypes","node","bool","string","oneOfType","number","isRequired","func"],"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    preventDefault={false}\n    tag=\"div\"\n    className={styles(style.option, value && style.value, divider && style.divider, disabled && style.disabled)}\n    onPress={!disabled && value ? onPress : undefined}\n  >\n    {icon && <Icon name={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.string,\n  label: PropTypes.string,\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n  onPress: PropTypes.func,\n};\n\nexport { Option };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAS;EAAA,IAAGC,QAAH,QAAGA,QAAH;EAAA,IAAaC,QAAb,QAAaA,QAAb;EAAA,IAAuBC,OAAvB,QAAuBA,OAAvB;EAAA,IAAgCC,IAAhC,QAAgCA,IAAhC;EAAA,IAAsCC,KAAtC,QAAsCA,KAAtC;EAAA,IAA6CC,KAA7C,QAA6CA,KAA7C;EAAA,IAAoDC,OAApD,QAAoDA,OAApD;EAAA,IAAgEC,MAAhE;;EAAA,oBACb,6BAAC,qBAAD,eACMA,MADN;IAEE,cAAc,EAAE,KAFlB;IAGE,GAAG,EAAC,KAHN;IAIE,SAAS,EAAE,qBAAOC,oBAAMC,MAAb,EAAqBJ,KAAK,IAAIG,oBAAMH,KAApC,EAA2CH,OAAO,IAAIM,oBAAMN,OAA5D,EAAqED,QAAQ,IAAIO,oBAAMP,QAAvF,CAJb;IAKE,OAAO,EAAE,CAACA,QAAD,IAAaI,KAAb,GAAqBC,OAArB,GAA+BI;EAL1C,IAOGP,IAAI,iBAAI,6BAAC,gBAAD;IAAM,IAAI,EAAEA,IAAZ;IAAkB,SAAS,EAAEK,oBAAML;EAAnC,EAPX,EAQGC,KAAK,iBAAI,6BAAC,gBAAD;IAAM,SAAS,EAAEI,oBAAMJ;EAAvB,GAA+BA,KAA/B,CARZ,EASGJ,QATH,CADa;AAAA,CAAf;;;AAcAD,MAAM,CAACY,WAAP,GAAqB,uBAArB;AAEAZ,MAAM,CAACa,SAAP,GAAmB;EACjBZ,QAAQ,EAAEa,mBAAUC,IADH;EAEjBb,QAAQ,EAAEY,mBAAUE,IAFH;EAGjBb,OAAO,EAAEW,mBAAUE,IAHF;EAIjBZ,IAAI,EAAEU,mBAAUG,MAJC;EAKjBZ,KAAK,EAAES,mBAAUG,MALA;EAMjBX,KAAK,EAAEQ,mBAAUI,SAAV,CAAoB,CAACJ,mBAAUG,MAAX,EAAmBH,mBAAUK,MAA7B,CAApB,EAA0DC,UANhD;EAOjBb,OAAO,EAAEO,mBAAUO;AAPF,CAAnB"}

package/build/components/Menu/Menu.js

@@ -35,7 +35,7 @@ var Menu = function Menu(_ref) {
       Template = _ref$Template === void 0 ? _Menu.Option : _ref$Template,
       visible = _ref.visible,
       _ref$onPress = _ref.onPress,
-      onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
+      _onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
       others = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react.default.createElement(_primitives.Layer, _extends({
@@ -49,9 +49,9 @@ var Menu = function Menu(_ref) {
     return /*#__PURE__*/_react.default.createElement(Template, _extends({}, option, {
       "data-testid": others['data-testid'] ? "".concat(others['data-testid'], "-").concat(index) : undefined,
       key: index,
-      onPress: !option.disabled ? function (event) {
-        return onPress(option.value, event);
-      } : undefined
+      onPress: function onPress(event) {
+        return _onPress(option.value, event);
+      }
     }));
   })));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","visible","onPress","others","style","menu","className","map","option","index","undefined","disabled","event","value","displayName","propTypes","PropTypes","node","arrayOf","shape","bool","divider","icon","string","label","oneOfType","number","isRequired","func"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent } from '../../primitives';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, visible, onPress = () => {}, ...others }) => {\n  return (\n    <Layer\n      forceRender={false}\n      {...others}\n      className={styles(style.menu, visible && style.visible, others.className)}\n      visible={visible}\n    >\n      {children}\n      <LayerContent>\n        {options.map((option = {}, index) => (\n          <Template\n            {...option}\n            data-testid={others['data-testid'] ? `${others['data-testid']}-${index}` : undefined}\n            key={index}\n            onPress={!option.disabled ? (event) => onPress(option.value, event) : undefined}\n          />\n        ))}\n      </LayerContent>\n    </Layer>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.string,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    }),\n  ),\n  Template: PropTypes.node,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA2F;EAAA,IAAxFC,QAAwF,QAAxFA,QAAwF;EAAA,wBAA9EC,OAA8E;EAAA,IAA9EA,OAA8E,6BAApE,EAAoE;EAAA,yBAAhEC,QAAgE;EAAA,IAAhEA,QAAgE,8BAArDC,YAAqD;EAAA,IAA7CC,OAA6C,QAA7CA,OAA6C;EAAA,wBAApCC,OAAoC;EAAA,IAApCA,OAAoC,6BAA1B,YAAM,CAAE,CAAkB;EAAA,IAAbC,MAAa;;EACtG,oBACE,6BAAC,iBAAD;IACE,WAAW,EAAE;EADf,GAEMA,MAFN;IAGE,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAHb;IAIE,OAAO,EAAEL;EAJX,IAMGJ,QANH,eAOE,6BAAC,wBAAD,QACGC,OAAO,CAACS,GAAR,CAAY;IAAA,IAACC,MAAD,uEAAU,EAAV;IAAA,IAAcC,KAAd;IAAA,oBACX,6BAAC,QAAD,eACMD,MADN;MAEE,eAAaL,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,cAAoDM,KAApD,IAA8DC,SAF7E;MAGE,GAAG,EAAED,KAHP;MAIE,OAAO,EAAE,CAACD,MAAM,CAACG,QAAR,GAAmB,UAACC,KAAD;QAAA,OAAWV,OAAO,CAACM,MAAM,CAACK,KAAR,EAAeD,KAAf,CAAlB;MAAA,CAAnB,GAA6DF;IAJxE,GADW;EAAA,CAAZ,CADH,CAPF,CADF;AAoBD,CArBD;;;AAuBAd,IAAI,CAACkB,WAAL,GAAmB,gBAAnB;AAEAlB,IAAI,CAACmB,SAAL,GAAiB;EACflB,QAAQ,EAAEmB,mBAAUC,IADL;EAEfnB,OAAO,EAAEkB,mBAAUE,OAAV,CACPF,mBAAUG,KAAV,CAAgB;IACdtB,QAAQ,EAAEmB,mBAAUC,IADN;IAEdN,QAAQ,EAAEK,mBAAUI,IAFN;IAGdC,OAAO,EAAEL,mBAAUI,IAHL;IAIdE,IAAI,EAAEN,mBAAUO,MAJF;IAKdC,KAAK,EAAER,mBAAUO,MALH;IAMdV,KAAK,EAAEG,mBAAUS,SAAV,CAAoB,CAACT,mBAAUO,MAAX,EAAmBP,mBAAUU,MAA7B,CAApB,EAA0DC;EANnD,CAAhB,CADO,CAFM;EAYf5B,QAAQ,EAAEiB,mBAAUC,IAZL;EAafhB,OAAO,EAAEe,mBAAUI,IAbJ;EAcflB,OAAO,EAAEc,mBAAUY;AAdJ,CAAjB"}
+{"version":3,"file":"Menu.js","names":["Menu","children","options","Template","Option","visible","onPress","others","style","menu","className","map","option","index","undefined","event","value","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","string","label","oneOfType","number","isRequired","func"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent } from '../../primitives';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({ children, options = [], Template = Option, visible, onPress = () => {}, ...others }) => {\n  return (\n    <Layer\n      forceRender={false}\n      {...others}\n      className={styles(style.menu, visible && style.visible, others.className)}\n      visible={visible}\n    >\n      {children}\n      <LayerContent>\n        {options.map((option = {}, index) => (\n          <Template\n            {...option}\n            data-testid={others['data-testid'] ? `${others['data-testid']}-${index}` : undefined}\n            key={index}\n            onPress={(event) => onPress(option.value, event)}\n          />\n        ))}\n      </LayerContent>\n    </Layer>\n  );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n  children: PropTypes.node,\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      children: PropTypes.node,\n      disabled: PropTypes.bool,\n      divider: PropTypes.bool,\n      icon: PropTypes.string,\n      label: PropTypes.string,\n      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n    }),\n  ),\n  Template: PropTypes.node,\n  visible: PropTypes.bool,\n  onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;AAEA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA2F;EAAA,IAAxFC,QAAwF,QAAxFA,QAAwF;EAAA,wBAA9EC,OAA8E;EAAA,IAA9EA,OAA8E,6BAApE,EAAoE;EAAA,yBAAhEC,QAAgE;EAAA,IAAhEA,QAAgE,8BAArDC,YAAqD;EAAA,IAA7CC,OAA6C,QAA7CA,OAA6C;EAAA,wBAApCC,OAAoC;EAAA,IAApCA,QAAoC,6BAA1B,YAAM,CAAE,CAAkB;EAAA,IAAbC,MAAa;;EACtG,oBACE,6BAAC,iBAAD;IACE,WAAW,EAAE;EADf,GAEMA,MAFN;IAGE,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAHb;IAIE,OAAO,EAAEL;EAJX,IAMGJ,QANH,eAOE,6BAAC,wBAAD,QACGC,OAAO,CAACS,GAAR,CAAY;IAAA,IAACC,MAAD,uEAAU,EAAV;IAAA,IAAcC,KAAd;IAAA,oBACX,6BAAC,QAAD,eACMD,MADN;MAEE,eAAaL,MAAM,CAAC,aAAD,CAAN,aAA2BA,MAAM,CAAC,aAAD,CAAjC,cAAoDM,KAApD,IAA8DC,SAF7E;MAGE,GAAG,EAAED,KAHP;MAIE,OAAO,EAAE,iBAACE,KAAD;QAAA,OAAWT,QAAO,CAACM,MAAM,CAACI,KAAR,EAAeD,KAAf,CAAlB;MAAA;IAJX,GADW;EAAA,CAAZ,CADH,CAPF,CADF;AAoBD,CArBD;;;AAuBAf,IAAI,CAACiB,WAAL,GAAmB,gBAAnB;AAEAjB,IAAI,CAACkB,SAAL,GAAiB;EACfjB,QAAQ,EAAEkB,mBAAUC,IADL;EAEflB,OAAO,EAAEiB,mBAAUE,OAAV,CACPF,mBAAUG,KAAV,CAAgB;IACdrB,QAAQ,EAAEkB,mBAAUC,IADN;IAEdG,QAAQ,EAAEJ,mBAAUK,IAFN;IAGdC,OAAO,EAAEN,mBAAUK,IAHL;IAIdE,IAAI,EAAEP,mBAAUQ,MAJF;IAKdC,KAAK,EAAET,mBAAUQ,MALH;IAMdX,KAAK,EAAEG,mBAAUU,SAAV,CAAoB,CAACV,mBAAUQ,MAAX,EAAmBR,mBAAUW,MAA7B,CAApB,EAA0DC;EANnD,CAAhB,CADO,CAFM;EAYf5B,QAAQ,EAAEgB,mBAAUC,IAZL;EAaff,OAAO,EAAEc,mBAAUK,IAbJ;EAcflB,OAAO,EAAEa,mBAAUa;AAdJ,CAAjB"}

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

@@ -1,11 +1,12 @@
 :root {
   --mirai-ui-menu-base: var(--mirai-ui-base);
   --mirai-ui-menu-border-radius: var(--mirai-ui-border-radius);
-  --mirai-ui-menu-min-width: 200px;
+  --mirai-ui-menu-min-width: 192px;
   --mirai-ui-menu-shadow: var(--mirai-ui-shadow);
-  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
   --mirai-ui-menu-option-disabled: var(--mirai-ui-content-border);
-  --mirai-ui-menu-option-hover: var(--mirai-ui-accent-background);
+  --mirai-ui-menu-option-hover-background: var(--mirai-ui-accent);
+  --mirai-ui-menu-option-hover-color: var(--mirai-ui-base);
+  --mirai-ui-menu-option-padding: var(--mirai-ui-space-M);
 }
 
 .menu {
@@ -17,17 +18,28 @@
 }
 
 .menu .option {
+  align-items: center;
   box-sizing: border-box;
   display: flex;
+  cursor: default;
+  flex: 1;
   flex-direction: row;
   padding: var(--mirai-ui-menu-option-padding);
-  align-items: center;
-  flex: 1;
   width: 100%;
 }
 
-.menu .option:hover:not(.disabled) {
-  background-color: var(--mirai-ui-menu-option-hover);
+.menu .option.value:hover:not(.disabled) {
+  background-color: var(--mirai-ui-menu-option-hover-background);
+}
+
+.menu .option.value:hover:not(.disabled) .icon,
+.menu .option.value:hover:not(.disabled) .label {
+  color: var(--mirai-ui-menu-option-hover-color);
+  cursor: pointer;
+}
+
+.menu .divider {
+  box-shadow: inset 0 -1px var(--mirai-ui-menu-option-disabled);
 }
 
 .menu .icon {
@@ -38,13 +50,13 @@
   flex: 1;
   text-align: left;
   padding-right: var(--mirai-ui-menu-option-padding);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.menu .divider {
-  box-shadow: inset 0 -1px var(--mirai-ui-menu-option-disabled);
-}
-
-.menu .disabled {
+.menu .option.disabled .icon,
+.menu .option.disabled .label {
   color: var(--mirai-ui-menu-option-disabled);
   cursor: default;
 }

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

@@ -58,8 +58,16 @@ exports[`component:<Menu> w/ options & visible 1`] = `
     style="left: 0px; top: 0px;"
   >
     <div
-      class="pressable option"
-      value="one"
+      class="pressable option divider"
+    >
+      <span
+        class="text paragraph label"
+      >
+        Lorem Ipsum...
+      </span>
+    </div>
+    <div
+      class="pressable option value"
     >
       <span
         class="icon icon"
@@ -96,11 +104,10 @@ exports[`component:<Menu> w/ options & visible 1`] = `
       </span>
     </div>
     <div
-      class="pressable option disabled"
-      value="two"
+      class="pressable option value disabled"
     >
       <span
-        class="icon icon disabled"
+        class="icon icon"
       >
         <svg
           fill="none"
@@ -128,14 +135,13 @@ exports[`component:<Menu> w/ options & visible 1`] = `
         </svg>
       </span>
       <span
-        class="text paragraph label disabled"
+        class="text paragraph label"
       >
         Item 2
       </span>
     </div>
     <div
-      class="pressable option divider"
-      value="three"
+      class="pressable option value divider"
     >
       <span
         class="icon icon"
@@ -147,8 +153,7 @@ exports[`component:<Menu> w/ options & visible 1`] = `
       </span>
     </div>
     <div
-      class="pressable option"
-      value="four"
+      class="pressable option value"
     >
       <span
         class="text paragraph label"
@@ -161,6 +166,15 @@ exports[`component:<Menu> w/ options & visible 1`] = `
         Add
       </button>
     </div>
+    <div
+      class="pressable option"
+    >
+      <button
+        class="pressable button"
+      >
+        Add
+      </button>
+    </div>
   </div>
 </DocumentFragment>
 `;

package/build/index.js

@@ -17,19 +17,6 @@ Object.keys(_components).forEach(function (key) {
   });
 });
 
-var _helpers = require("./helpers");
-
-Object.keys(_helpers).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _helpers[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _helpers[key];
-    }
-  });
-});
-
 var _hooks = require("./hooks");
 
 Object.keys(_hooks).forEach(function (key) {

package/build/index.js.map

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

package/build/primitives/Layer/Layer.js

@@ -21,7 +21,7 @@ var _LayerModule = _interopRequireDefault(require("./Layer.module.css"));
 
 var _LayerContent = require("./LayerContent");
 
-var _excluded = ["centered", "forceRender", "bottom", "left", "right", "top", "visible"];
+var _excluded = ["bottom", "centered", "forceRender", "left", "right", "top", "visible"];
 
 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); }
 
@@ -52,10 +52,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 Layer = function Layer(_ref) {
-  var centered = _ref.centered,
+  var forceBottom = _ref.bottom,
+      centered = _ref.centered,
       _ref$forceRender = _ref.forceRender,
       forceRender = _ref$forceRender === void 0 ? true : _ref$forceRender,
-      forceBottom = _ref.bottom,
       forceLeft = _ref.left,
       forceRight = _ref.right,
       forceTop = _ref.top,

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

@@ -1 +1 @@
-{"version":3,"file":"Layer.js","names":["Layer","centered","forceRender","forceBottom","bottom","forceLeft","left","forceRight","right","forceTop","top","visible","others","device","componentRef","contentRef","position","setPosition","current","componentEl","firstChild","contentEl","componentLayout","contentLayout","children","React","Children","map","child","find","name","type","LayerContent","style","layer","hidden","className","propTypes","PropTypes","bool","node"],"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 { getElementLayout, getLayerPosition } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n  centered,\n  forceRender = true,\n  bottom: forceBottom,\n  left: forceLeft,\n  right: forceRight,\n  top: forceTop,\n  visible,\n  ...others\n}) => {\n  const device = useDevice();\n  const componentRef = useRef();\n  const contentRef = useRef();\n\n  const [position, setPosition] = useState();\n\n  useLayoutEffect(() => {\n    const { current: { firstChild: componentEl } = {} } = componentRef;\n    const { current: contentEl } = contentRef;\n\n    if (!componentEl || !contentEl) return setPosition();\n\n    const componentLayout = getElementLayout(componentEl);\n    const contentLayout = getElementLayout(contentEl);\n    const { left = 0, top = 0 } = getLayerPosition(componentLayout, contentLayout, device, {\n      centered,\n      forceBottom,\n      forceLeft,\n      forceRight,\n      forceTop,\n    });\n\n    setPosition({ left: `${left}px`, top: `${top}px` });\n  }, [centered, device, forceBottom, forceLeft, forceRight, forceTop, visible]);\n\n  const children = React.Children.map(others.children || [], (child) => child);\n\n  return (\n    <>\n      <span data-testid={others['data-testid']} ref={componentRef}>\n        {children.find(({ type: { name } }) => name !== LayerContent.name)}\n      </span>\n\n      {(forceRender || visible) && (\n        <div\n          ref={contentRef}\n          className={styles(style.layer, !visible && style.hidden, others.className)}\n          style={{ ...others.style, ...position }}\n        >\n          {children?.find(({ type: { name } }) => name === LayerContent.name)}\n        </div>\n      )}\n    </>\n  );\n};\n\nLayer.propTypes = {\n  bottom: PropTypes.bool,\n  centered: PropTypes.bool,\n  children: PropTypes.node,\n  forceRender: PropTypes.bool,\n  left: PropTypes.bool,\n  right: PropTypes.bool,\n  top: PropTypes.bool,\n  visible: PropTypes.bool,\n};\n\nexport { Layer };\n"],"mappings":"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"}
+{"version":3,"file":"Layer.js","names":["Layer","forceBottom","bottom","centered","forceRender","forceLeft","left","forceRight","right","forceTop","top","visible","others","device","componentRef","contentRef","position","setPosition","current","componentEl","firstChild","contentEl","componentLayout","contentLayout","children","React","Children","map","child","find","name","type","LayerContent","style","layer","hidden","className","propTypes","PropTypes","bool","node"],"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 { getElementLayout, getLayerPosition } from './helpers';\nimport style from './Layer.module.css';\nimport { LayerContent } from './LayerContent';\n\nconst Layer = ({\n  bottom: forceBottom,\n  centered,\n  forceRender = true,\n  left: forceLeft,\n  right: forceRight,\n  top: forceTop,\n  visible,\n  ...others\n}) => {\n  const device = useDevice();\n  const componentRef = useRef();\n  const contentRef = useRef();\n\n  const [position, setPosition] = useState();\n\n  useLayoutEffect(() => {\n    const { current: { firstChild: componentEl } = {} } = componentRef;\n    const { current: contentEl } = contentRef;\n\n    if (!componentEl || !contentEl) return setPosition();\n\n    const componentLayout = getElementLayout(componentEl);\n    const contentLayout = getElementLayout(contentEl);\n    const { left = 0, top = 0 } = getLayerPosition(componentLayout, contentLayout, device, {\n      centered,\n      forceBottom,\n      forceLeft,\n      forceRight,\n      forceTop,\n    });\n\n    setPosition({ left: `${left}px`, top: `${top}px` });\n  }, [centered, device, forceBottom, forceLeft, forceRight, forceTop, visible]);\n\n  const children = React.Children.map(others.children || [], (child) => child);\n\n  return (\n    <>\n      <span data-testid={others['data-testid']} ref={componentRef}>\n        {children.find(({ type: { name } }) => name !== LayerContent.name)}\n      </span>\n\n      {(forceRender || visible) && (\n        <div\n          ref={contentRef}\n          className={styles(style.layer, !visible && style.hidden, others.className)}\n          style={{ ...others.style, ...position }}\n        >\n          {children?.find(({ type: { name } }) => name === LayerContent.name)}\n        </div>\n      )}\n    </>\n  );\n};\n\nLayer.propTypes = {\n  bottom: PropTypes.bool,\n  centered: PropTypes.bool,\n  children: PropTypes.node,\n  forceRender: PropTypes.bool,\n  left: PropTypes.bool,\n  right: PropTypes.bool,\n  top: PropTypes.bool,\n  visible: PropTypes.bool,\n};\n\nexport { Layer };\n"],"mappings":"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"}

package/package.json

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