@mirai/ui 1.0.10 → 1.0.11

package/README.md

@@ -21,7 +21,7 @@ This primitive returns a checkbox button based on the following properties:
 - `name:string` input name
 - `onChange:function` executed when input value changes
 
-```js
+```jsx
 import { Checkbox, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -40,7 +40,7 @@ const MyComponent = () => (
 
 This primitive returns a span with an icon based on a mandatory string prop `name` with one of the following possible values: Left, Right, Up, Down, Close, CloseArrow, Plus, Minus, EyeOpen, EyeClose.
 
-```js
+```jsx
 import { Icon, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -63,7 +63,7 @@ This primitive returns an input or a textarea based on the following props:
 - `onError:function` executed once an error event fires
 - `onLeave:function` executed on click outside the input
 
-```js
+```jsx
 import { Input, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -90,7 +90,7 @@ This primitive returns an element that displays with relative position to other
 
 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
 
-```js
+```jsx
 import { Button, Calendar, Layer, LayerContent } from '@mirai/ui';
 
 const MyComponent = () => {
@@ -120,7 +120,7 @@ This primitive returns pressable elements based on the following properties:
 - `onLeave:function` executed once the user hovers away
 - `onPress:function` executed on mouse click on the element
 
-```js
+```jsx
 import { Icon, Pressable, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -141,7 +141,7 @@ This primitive returns a radio button based on the following properties:
 - `name:string` input name
 - `onChange:function` executed when input value changes
 
-```js
+```jsx
 import { Radio, View } from '@mirai/ui';
 
 const MyComponent = () => (
@@ -171,7 +171,7 @@ This primitive is used to make vertically scrollable views and receives the foll
 - `width:number` width value
 - `onscroll:function` executed when user scrolls over the element
 
-```js
+```jsx
 import { ScrollView, View } from '@mirai/ui';
 
 const MyComponent = ({ isDesktop }) => (
@@ -194,7 +194,7 @@ A primitive for displaying text. It receives the following props:
 - `small:boolean` modifying font-size
 - `tag:string` html tag of resulting element
 
-```js
+```jsx
 import { Text, View } from '@mirai/ui';
 
 const MyComponent = ({ headerText }) => (
@@ -215,7 +215,7 @@ This primitive works as a container for displaying layout. It receives the follo
 - `row:boolean` sets flex-direction as 'row' if true
 - `tag:string` html tag of resulting element
 
-```js
+```jsx
 import { Text, View } from '@mirai/ui';
 
 const MyComponent = ({ headerText }) => (
@@ -246,7 +246,7 @@ A button component that receives the following props:
 - `onLeave:function` executed when the user hovers away
 - `onPress:function` executed on mouse click on the element
 
-```js
+```jsx
 import { Button } from '@mirai/ui';
 
 const MyComponent = (props) => {
@@ -281,7 +281,7 @@ A calendar component that receives the following props:
 - `onChange:function` executed when input value changes
 - `onFocus:function` executed on calendar cell hover
 
-```js
+```jsx
 import { Calendar } from '@mirai/ui';
 
 const MyComponent = props => {
@@ -320,7 +320,7 @@ Input number component controlling the value with 2 buttons. Receives the follow
 - `value:number` input value
 - `onChange:function` executed when input value changes
 
-```js
+```jsx
 import { InputNumber } from '@mirai/ui';
 
 const MyComponent = (props) => {
@@ -343,7 +343,7 @@ This component is used to display a radio button or checkbox base on a mandatory
 - `value:number` input value
 - `onChange:function` executed when input value changes
 
-```js
+```jsx
 import { InputOption, View } from '@mirai/ui';
 
 const MyComponent = () => {
@@ -399,7 +399,7 @@ Text input component receiving the following props:
 - `onEnter:function` executed when user clicks on input
 - `onLeave:function` executed on click outside the input
 
-```js
+```jsx
 import { InputText } from '@mirai/ui';
 
 const MyComponent = (props) => {
@@ -419,6 +419,48 @@ const MyComponent = (props) => {
 };
 ```
 
+### Menu
+
+This component helps you to create a menu over a determinate component receiving the following props:
+
+- `children:node` The element which we will use as reference for display the menu.
+- `options:arrayOf(Option:shape)`
+- `Template:node` if you don't want use the default option scaffold.
+- `visible:boolean` showing or hiding the menu
+- `onPress:func` callback when we click on a determinate _option_.
+
+Before learning how to instantiate `<Menu>` let's look at the properties of our _shape_ `Option`:
+
+- `children:node` If you wanna add a component in the right side of your option.
+- `disabled:boolean` disables the option
+- `divider:boolean` if you wanna show a divider in the bottom of the option
+- `icon:string` If you want instantiate a primitive `<Icon>`
+- `label:string` label of the option
+- `value:string|number` this property will dispatch as identificator in the callback `onPress:func`
+
+```jsx
+import { Button, Icon, Menu } from '@mirai/ui';
+
+const MyComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  <Menu
+    options={[
+      { icon: 'EyeOpen', label: 'Show results', value: 1 },
+      { icon: 'Plus', label: 'Add item', disabled: true, value: 2 },
+      { icon: 'Minus', label: 'Subtract item', divider: true, value: 'three' },
+      { label: 'Using child', children: <Button small>Add</Button>, value: 'four' },
+    ]}
+    visible={visible}
+    onPress={(value, event) => console.log('<Menu>::onPress', value, event)}
+  >
+    <Button squared outlined onPress={() => setVisible(!visible)}>
+      <Icon name="Plus" />
+    </Button>
+  </Menu>;
+};
+```
+
 ### Modal
 
 A modal component receiving the following props:
@@ -427,7 +469,7 @@ A modal component receiving the following props:
 - `visible:boolean` if true modal is shown
 - `onClose:function` executed once modal close button is clicked
 
-```js
+```jsx
 import { Modal, View } from '@mirai/ui';
 
 const MyComponent = (props) => {
@@ -441,6 +483,27 @@ const MyComponent = (props) => {
 };
 ```
 
+### Tooltip
+
+This component helps you to create a tooltip over a determinate component receiving the following props:
+
+- `children:node` The element which we will use as reference for display the menu.
+- `Template:node` if you don't want use the default scaffold.
+- `text:string` text it will appears when hover on `children`
+- `visible:boolean` the default state of visibility of the instance.
+
+```jsx
+import { Text, Tooltip } from '@mirai/ui';
+
+const MyComponent = () => {
+  const [visible, setVisible] = useState(false);
+
+  <Tooltip text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. ">
+    <Text bold>hover me</Text>
+  </Tooltip>;
+};
+```
+
 ## Theme
 
 Styles can be customised by using Theme utility.
@@ -453,7 +516,7 @@ This method returns current theme settings (variables with values). This method
 
 This method sets a value of the variable passed as a parameter.
 
-```js
+```jsx
 import { Button, Text, Theme } from '../../src';
 
 export default () => {

package/build/components/InputSelect/InputSelect.js

@@ -74,7 +74,7 @@ var InputSelect = function InputSelect(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_primitives.Select, Object.assign({}, others, {
     disabled: disabled,
     value: others.value || '',
-    className: (0, _helpers.styles)(_InputTextModule.default.input, _InputTextModule.default.iconRight, !(focus || error || has.value) && _InputTextModule.default.empty),
+    className: (0, _helpers.styles)(_InputTextModule.default.input, _InputTextModule.default.iconRight, !!label && !(focus || error || has.value) && _InputTextModule.default.empty),
     style: undefined,
     onChange: handleChange,
     onEnter: handleEnter,

package/build/components/InputSelect/InputSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","style","inputContainer","className","text","inputBorder","input","iconRight","empty","icon","right","displayName"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\n\nconst InputSelect = ({\n  disabled,\n  error,\n  hint,\n  label,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n    event.target?.blur();\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n  };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            disabled && style.disabled,\n            error && style.error,\n            focus && style.focus,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          focus && !error && style.focus,\n          error && style.error,\n        )}\n      >\n        <Select\n          {...others}\n          disabled={disabled}\n          value={others.value || ''}\n          className={styles(style.input, style.iconRight, !(focus || error || has.value) && style.empty)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {!disabled && <Icon name=\"CloseArrow\" className={[style.icon, style.right]} />}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}
+{"version":3,"file":"InputSelect.js","names":["InputSelect","disabled","error","hint","label","onChange","onEnter","onLeave","others","focus","setFocus","handleChange","value","event","target","blur","handleEnter","handleLeave","has","undefined","length","style","inputContainer","className","text","inputBorder","input","iconRight","empty","icon","right","displayName"],"sources":["../../../src/components/InputSelect/InputSelect.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Select, Text, View } from '../../primitives';\nimport style from '../InputText/InputText.module.css';\n\nconst InputSelect = ({\n  disabled,\n  error,\n  hint,\n  label,\n  onChange = () => {},\n  onEnter = () => {},\n  onLeave = () => {},\n  ...others\n}) => {\n  const [focus, setFocus] = useState(false);\n\n  const handleChange = (value, event) => {\n    onChange(value, event);\n    event.target?.blur();\n  };\n\n  const handleEnter = (event) => {\n    setFocus(true);\n    onEnter(event);\n  };\n\n  const handleLeave = (event) => {\n    setFocus(false);\n    onLeave(event);\n  };\n\n  const has = {\n    value: others.value !== undefined && others.value?.length > 0,\n  };\n\n  return (\n    <View className={styles(style.inputContainer, others.className)} style={others.style}>\n      {label && (\n        <Text\n          className={styles(\n            style.text,\n            style.label,\n            disabled && style.disabled,\n            error && style.error,\n            focus && style.focus,\n            (focus || error || has.value) && style.value,\n          )}\n        >\n          {label}\n        </Text>\n      )}\n\n      <View\n        row\n        className={styles(\n          style.inputBorder,\n          disabled && style.disabled,\n          focus && !error && style.focus,\n          error && style.error,\n        )}\n      >\n        <Select\n          {...others}\n          disabled={disabled}\n          value={others.value || ''}\n          className={styles(style.input, style.iconRight, !!label && !(focus || error || has.value) && style.empty)}\n          style={undefined}\n          onChange={handleChange}\n          onEnter={handleEnter}\n          onLeave={handleLeave}\n        />\n        {!disabled && <Icon name=\"CloseArrow\" className={[style.icon, style.right]} />}\n      </View>\n\n      {hint && (\n        <Text small className={styles(style.text, style.hint, disabled && style.disabled, error && style.error)}>\n          {hint}\n        </Text>\n      )}\n    </View>\n  );\n};\n\nInputSelect.displayName = 'Component:InputSelect';\n\nInputSelect.propTypes = {\n  disabled: PropTypes.bool,\n  error: PropTypes.bool,\n  hint: PropTypes.string,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  onChange: PropTypes.func,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n};\n\nexport { InputSelect };\n"],"mappings":"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"}

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

@@ -9,31 +9,31 @@ exports[`component:<InputSelect> inherit:className 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input iconRight empty"
+        class="select empty input iconRight"
         name="name"
       >
         <option
-          svalue="one"
+          value="one"
         >
           one
         </option>
         <option
-          svalue="two"
+          value="two"
         >
           two
         </option>
         <option
-          svalue="three"
+          value="three"
         >
           three
         </option>
         <option
-          svalue="four"
+          value="four"
         >
           four
         </option>
         <option
-          svalue="five"
+          value="five"
         >
           five
         </option>
@@ -71,32 +71,32 @@ exports[`component:<InputSelect> prop:disabled 1`] = `
       class="view row inputBorder disabled"
     >
       <select
-        class="select empty input iconRight empty"
+        class="select empty input iconRight"
         disabled=""
         name="name"
       >
         <option
-          svalue="one"
+          value="one"
         >
           one
         </option>
         <option
-          svalue="two"
+          value="two"
         >
           two
         </option>
         <option
-          svalue="three"
+          value="three"
         >
           three
         </option>
         <option
-          svalue="four"
+          value="four"
         >
           four
         </option>
         <option
-          svalue="five"
+          value="five"
         >
           five
         </option>
@@ -115,31 +115,31 @@ exports[`component:<InputSelect> prop:error 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input iconRight empty"
+        class="select empty input iconRight"
         name="name"
       >
         <option
-          svalue="one"
+          value="one"
         >
           one
         </option>
         <option
-          svalue="two"
+          value="two"
         >
           two
         </option>
         <option
-          svalue="three"
+          value="three"
         >
           three
         </option>
         <option
-          svalue="four"
+          value="four"
         >
           four
         </option>
         <option
-          svalue="five"
+          value="five"
         >
           five
         </option>
@@ -177,31 +177,31 @@ exports[`component:<InputSelect> prop:hint 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input iconRight empty"
+        class="select empty input iconRight"
         name="name"
       >
         <option
-          svalue="one"
+          value="one"
         >
           one
         </option>
         <option
-          svalue="two"
+          value="two"
         >
           two
         </option>
         <option
-          svalue="three"
+          value="three"
         >
           three
         </option>
         <option
-          svalue="four"
+          value="four"
         >
           four
         </option>
         <option
-          svalue="five"
+          value="five"
         >
           five
         </option>
@@ -253,27 +253,27 @@ exports[`component:<InputSelect> prop:label 1`] = `
         name="name"
       >
         <option
-          svalue="one"
+          value="one"
         >
           one
         </option>
         <option
-          svalue="two"
+          value="two"
         >
           two
         </option>
         <option
-          svalue="three"
+          value="three"
         >
           three
         </option>
         <option
-          svalue="four"
+          value="four"
         >
           four
         </option>
         <option
-          svalue="five"
+          value="five"
         >
           five
         </option>
@@ -315,27 +315,27 @@ exports[`component:<InputSelect> prop:label 2`] = `
         name="name"
       >
         <option
-          svalue="one"
+          value="one"
         >
           one
         </option>
         <option
-          svalue="two"
+          value="two"
         >
           two
         </option>
         <option
-          svalue="three"
+          value="three"
         >
           three
         </option>
         <option
-          svalue="four"
+          value="four"
         >
           four
         </option>
         <option
-          svalue="five"
+          value="five"
         >
           five
         </option>
@@ -373,31 +373,31 @@ exports[`component:<InputSelect> renders 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input iconRight empty"
+        class="select empty input iconRight"
         name="name"
       >
         <option
-          svalue="one"
+          value="one"
         >
           one
         </option>
         <option
-          svalue="two"
+          value="two"
         >
           two
         </option>
         <option
-          svalue="three"
+          value="three"
         >
           three
         </option>
         <option
-          svalue="four"
+          value="four"
         >
           four
         </option>
         <option
-          svalue="five"
+          value="five"
         >
           five
         </option>
@@ -435,32 +435,32 @@ exports[`component:<InputSelect> testID 1`] = `
       class="view row inputBorder"
     >
       <select
-        class="select empty input iconRight empty"
+        class="select empty input iconRight"
         data-testid="mirai"
         name="name"
       >
         <option
-          svalue="one"
+          value="one"
         >
           one
         </option>
         <option
-          svalue="two"
+          value="two"
         >
           two
         </option>
         <option
-          svalue="three"
+          value="three"
         >
           three
         </option>
         <option
-          svalue="four"
+          value="four"
         >
           four
         </option>
         <option
-          svalue="five"
+          value="five"
         >
           five
         </option>

package/build/components/InputText/InputText.module.css

@@ -80,7 +80,8 @@
   pointer-events: none;
   position: absolute;
   top: var(--mirai-ui-input-text-padding-y);
-  transition: all var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+  transition: font-size var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    top var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
   z-index: 1;
 }
 

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Option = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
+
+var _excluded = ["children", "disabled", "divider", "icon", "label"];
+
+var Option = function Option(_ref) {
+  var children = _ref.children,
+      disabled = _ref.disabled,
+      divider = _ref.divider,
+      icon = _ref.icon,
+      label = _ref.label,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, Object.assign({}, others, {
+    tag: "div",
+    className: (0, _helpers.styles)(_MenuModule.default.option, divider && _MenuModule.default.divider, disabled && _MenuModule.default.disabled)
+  }), 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)
+  }, label), children);
+};
+
+exports.Option = Option;
+Option.displayName = 'Component:Menu:Option';
+//# sourceMappingURL=Menu.Option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.Option.js","names":["Option","children","disabled","divider","icon","label","others","style","option","displayName"],"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":";;;;;;;;;;;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,oBACMA,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"}

package/build/components/Menu/Menu.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Menu = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _primitives = require("../../primitives");
+
+var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
+
+var _Menu = require("./Menu.Option");
+
+var _excluded = ["children", "options", "Template", "visible", "onPress"];
+
+var Menu = function Menu(_ref) {
+  var children = _ref.children,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      _ref$Template = _ref.Template,
+      Template = _ref$Template === void 0 ? _Menu.Option : _ref$Template,
+      visible = _ref.visible,
+      _ref$onPress = _ref.onPress,
+      onPress = _ref$onPress === void 0 ? function () {} : _ref$onPress,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_primitives.Layer, Object.assign({}, others, {
+    className: (0, _helpers.styles)(_MenuModule.default.menu, visible && _MenuModule.default.visible, others.className),
+    visible: visible
+  }), children, /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, options.map(function () {
+    var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var index = arguments.length > 1 ? arguments[1] : undefined;
+    return /*#__PURE__*/_react.default.createElement(Template, Object.assign({}, 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
+    }));
+  })));
+};
+
+exports.Menu = Menu;
+Menu.displayName = 'Component:Menu';
+//# sourceMappingURL=Menu.js.map

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

@@ -0,0 +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"],"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 {...others} className={styles(style.menu, visible && style.visible, others.className)} visible={visible}>\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":";;;;;;;;;;;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,oBAAWA,MAAX;IAAmB,SAAS,EAAE,qBAAOC,oBAAMC,IAAb,EAAmBJ,OAAO,IAAIG,oBAAMH,OAApC,EAA6CE,MAAM,CAACG,SAApD,CAA9B;IAA8F,OAAO,EAAEL;EAAvG,IACGJ,QADH,eAEE,6BAAC,wBAAD,QACGC,OAAO,CAACS,GAAR,CAAY;IAAA,IAACC,MAAD,uEAAU,EAAV;IAAA,IAAcC,KAAd;IAAA,oBACX,6BAAC,QAAD,oBACMD,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,CAFF,CADF;AAeD,CAhBD;;;AAkBAd,IAAI,CAACkB,WAAL,GAAmB,gBAAnB"}