@mirai/ui 1.0.132 → 1.0.134

package/README.md

@@ -689,6 +689,7 @@ A modal component receiving the following props:
 - `fit:bool` if you want use fit width with the content
 - `overflow:bool` wraps all modal in a semi-transparent layer
 - `portal:bool` if you want use _portal feature_ of React API
+- `preventDefault:bool` if you want stop the event tunneling (default true)
 - `title:string` shows a title for the modal
 - `visible:boolean` if true modal is shown
 - `onBack:function` executed once back button is touched

package/build/components/InputOption/InputOption.js

@@ -35,6 +35,7 @@ var InputOption = function InputOption(_ref) {
     onChange([_InputOption.CHECKBOX, _InputOption.SWITCH].includes(type) ? !checked : value, event);
   };
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _extends({}, others, {
+    preventDefault: false,
     onPress: handleChange,
     className: (0, _helpers.styles)(_InputOptionModule.default.inputOption, others.className)
   }), /*#__PURE__*/_react.default.createElement(Primitive, {

package/build/components/InputOption/InputOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","required","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","styles","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","oneOfType","func"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, ICON, Pressable, Radio, Switch } from '../../primitives';\nimport { Label } from '../InputText/partials';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  indeterminate,\n  label,\n  name,\n  required,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange([CHECKBOX, SWITCH].includes(type) ? !checked : value, event);\n  };\n\n  return (\n    <Pressable {...others} onPress={handleChange} className={styles(style.inputOption, others.className)}>\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && <Label action {...{ disabled, label, required }} className={style.label} />}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAWX;EAAA,IAVJC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAGC,qBAAQ;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBACVC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAChBC,MAAM;EAET,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAQ,GAAGK,oBAAQ,GAAGN,IAAI,KAAKO,kBAAK,GAAGC,iBAAK,GAAGC,kBAAM;EAEhF,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BR,QAAQ,CAAC,CAACF,qBAAQ,EAAEW,mBAAM,CAAC,CAACC,QAAQ,CAACb,IAAI,CAAC,GAAG,CAACN,OAAO,GAAGQ,KAAK,EAAES,KAAK,CAAC;EACvE,CAAC;EAED,oBACE,6BAAC,qBAAS,eAAKP,MAAM;IAAE,OAAO,EAAEM,YAAa;IAAC,SAAS,EAAE,IAAAI,eAAM,EAACC,0BAAK,CAACC,WAAW,EAAEZ,MAAM,CAACa,SAAS;EAAE,iBACnG,6BAAC,SAAS;IACR,OAAO,EAAEvB,OAAO,IAAKM,IAAI,KAAKC,qBAAQ,IAAIL,aAAe;IACzD,QAAQ,EAAED,QAAS;IACnB,IAAI,EAAEG,IAAK;IACX,IAAI,EAAEE,IAAK;IACX,KAAK,EAAEE;EAAM,GAEZF,IAAI,KAAKC,qBAAQ,KAAKP,OAAO,IAAIE,aAAa,CAAC,gBAC9C,6BAAC,gBAAI;IAAC,KAAK,EAAEF,OAAO,GAAGwB,gBAAI,CAACC,KAAK,GAAGD,gBAAI,CAACE,MAAO;IAAC,SAAS,EAAEL,0BAAK,CAACM;EAAK,EAAG,GACxEC,SAAS,CACH,EACXzB,KAAK,iBAAI,6BAAC,eAAK;IAAC,MAAM;IAAOF,QAAQ,EAARA,QAAQ;IAAEE,KAAK,EAALA,KAAK;IAAEE,QAAQ,EAARA,QAAQ;IAAI,SAAS,EAAEgB,0BAAK,CAAClB;EAAM,EAAG,CAC3E;AAEhB,CAAC;AAAC;AAEFJ,WAAW,CAAC8B,WAAW,GAAG,uBAAuB;AAEjD9B,WAAW,CAAC+B,SAAS,GAAG;EACtB9B,OAAO,EAAE+B,kBAAS,CAACC,IAAI;EACvB/B,QAAQ,EAAE8B,kBAAS,CAACC,IAAI;EACxB9B,aAAa,EAAE6B,kBAAS,CAACC,IAAI;EAC7B7B,KAAK,EAAE4B,kBAAS,CAACE,MAAM;EACvB7B,IAAI,EAAE2B,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjC7B,QAAQ,EAAE0B,kBAAS,CAACC,IAAI;EACxB1B,IAAI,EAAEyB,kBAAS,CAACI,KAAK,CAAC,CAAC5B,qBAAQ,EAAEM,kBAAK,EAAEK,mBAAM,CAAC,CAAC;EAChDV,KAAK,EAAEuB,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9DvB,QAAQ,EAAEsB,kBAAS,CAACM;AACtB,CAAC"}
+{"version":3,"file":"InputOption.js","names":["InputOption","checked","disabled","indeterminate","label","name","required","type","CHECKBOX","value","onChange","others","Primitive","Checkbox","RADIO","Radio","Switch","handleChange","event","SWITCH","includes","styles","style","inputOption","className","ICON","CHECK","REMOVE","icon","undefined","displayName","propTypes","PropTypes","bool","string","isRequired","oneOf","oneOfType","func"],"sources":["../../../src/components/InputOption/InputOption.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Checkbox, Icon, ICON, Pressable, Radio, Switch } from '../../primitives';\nimport { Label } from '../InputText/partials';\nimport { CHECKBOX, RADIO, SWITCH } from './InputOption.constants';\nimport style from './InputOption.module.css';\n\nconst InputOption = ({\n  checked,\n  disabled,\n  indeterminate,\n  label,\n  name,\n  required,\n  type = CHECKBOX,\n  value = '',\n  onChange = () => {},\n  ...others\n}) => {\n  const Primitive = type === CHECKBOX ? Checkbox : type === RADIO ? Radio : Switch;\n\n  const handleChange = (event) => {\n    onChange([CHECKBOX, SWITCH].includes(type) ? !checked : value, event);\n  };\n\n  return (\n    <Pressable\n      {...others}\n      preventDefault={false}\n      onPress={handleChange}\n      className={styles(style.inputOption, others.className)}\n    >\n      <Primitive\n        checked={checked || (type === CHECKBOX && indeterminate)}\n        disabled={disabled}\n        name={name}\n        type={type}\n        value={value}\n      >\n        {type === CHECKBOX && (checked || indeterminate) ? (\n          <Icon value={checked ? ICON.CHECK : ICON.REMOVE} className={style.icon} />\n        ) : undefined}\n      </Primitive>\n      {label && <Label action {...{ disabled, label, required }} className={style.label} />}\n    </Pressable>\n  );\n};\n\nInputOption.displayName = 'Component:InputOption';\n\nInputOption.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  indeterminate: PropTypes.bool,\n  label: PropTypes.string,\n  name: PropTypes.string.isRequired,\n  required: PropTypes.bool,\n  type: PropTypes.oneOf([CHECKBOX, RADIO, SWITCH]),\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n  onChange: PropTypes.func,\n};\n\nexport { InputOption };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AACA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,WAAW,GAAG,SAAdA,WAAW,OAWX;EAAA,IAVJC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IAAA,iBACRC,IAAI;IAAJA,IAAI,0BAAGC,qBAAQ;IAAA,kBACfC,KAAK;IAALA,KAAK,2BAAG,EAAE;IAAA,qBACVC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IAChBC,MAAM;EAET,IAAMC,SAAS,GAAGL,IAAI,KAAKC,qBAAQ,GAAGK,oBAAQ,GAAGN,IAAI,KAAKO,kBAAK,GAAGC,iBAAK,GAAGC,kBAAM;EAEhF,IAAMC,YAAY,GAAG,SAAfA,YAAY,CAAIC,KAAK,EAAK;IAC9BR,QAAQ,CAAC,CAACF,qBAAQ,EAAEW,mBAAM,CAAC,CAACC,QAAQ,CAACb,IAAI,CAAC,GAAG,CAACN,OAAO,GAAGQ,KAAK,EAAES,KAAK,CAAC;EACvE,CAAC;EAED,oBACE,6BAAC,qBAAS,eACJP,MAAM;IACV,cAAc,EAAE,KAAM;IACtB,OAAO,EAAEM,YAAa;IACtB,SAAS,EAAE,IAAAI,eAAM,EAACC,0BAAK,CAACC,WAAW,EAAEZ,MAAM,CAACa,SAAS;EAAE,iBAEvD,6BAAC,SAAS;IACR,OAAO,EAAEvB,OAAO,IAAKM,IAAI,KAAKC,qBAAQ,IAAIL,aAAe;IACzD,QAAQ,EAAED,QAAS;IACnB,IAAI,EAAEG,IAAK;IACX,IAAI,EAAEE,IAAK;IACX,KAAK,EAAEE;EAAM,GAEZF,IAAI,KAAKC,qBAAQ,KAAKP,OAAO,IAAIE,aAAa,CAAC,gBAC9C,6BAAC,gBAAI;IAAC,KAAK,EAAEF,OAAO,GAAGwB,gBAAI,CAACC,KAAK,GAAGD,gBAAI,CAACE,MAAO;IAAC,SAAS,EAAEL,0BAAK,CAACM;EAAK,EAAG,GACxEC,SAAS,CACH,EACXzB,KAAK,iBAAI,6BAAC,eAAK;IAAC,MAAM;IAAOF,QAAQ,EAARA,QAAQ;IAAEE,KAAK,EAALA,KAAK;IAAEE,QAAQ,EAARA,QAAQ;IAAI,SAAS,EAAEgB,0BAAK,CAAClB;EAAM,EAAG,CAC3E;AAEhB,CAAC;AAAC;AAEFJ,WAAW,CAAC8B,WAAW,GAAG,uBAAuB;AAEjD9B,WAAW,CAAC+B,SAAS,GAAG;EACtB9B,OAAO,EAAE+B,kBAAS,CAACC,IAAI;EACvB/B,QAAQ,EAAE8B,kBAAS,CAACC,IAAI;EACxB9B,aAAa,EAAE6B,kBAAS,CAACC,IAAI;EAC7B7B,KAAK,EAAE4B,kBAAS,CAACE,MAAM;EACvB7B,IAAI,EAAE2B,kBAAS,CAACE,MAAM,CAACC,UAAU;EACjC7B,QAAQ,EAAE0B,kBAAS,CAACC,IAAI;EACxB1B,IAAI,EAAEyB,kBAAS,CAACI,KAAK,CAAC,CAAC5B,qBAAQ,EAAEM,kBAAK,EAAEK,mBAAM,CAAC,CAAC;EAChDV,KAAK,EAAEuB,kBAAS,CAACK,SAAS,CAAC,CAACL,kBAAS,CAACE,MAAM,EAAEF,kBAAS,CAACC,IAAI,CAAC,CAAC;EAC9DvB,QAAQ,EAAEsB,kBAAS,CAACM;AACtB,CAAC"}

package/build/components/Modal/Modal.js

@@ -12,7 +12,7 @@ var _helpers = require("../../helpers");
 var _hooks = require("../../hooks");
 var _primitives = require("../../primitives");
 var _ModalModule = _interopRequireDefault(require("./Modal.module.css"));
-var _excluded = ["blur", "children", "fit", "overflow", "portal", "title", "visible", "onBack", "onClose", "onOverflow"];
+var _excluded = ["blur", "children", "fit", "overflow", "portal", "preventDefault", "title", "visible", "onBack", "onClose", "onOverflow"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,6 +35,8 @@ var Modal = function Modal(_ref) {
     overflow = _ref$overflow === void 0 ? true : _ref$overflow,
     _ref$portal = _ref.portal,
     portal = _ref$portal === void 0 ? false : _ref$portal,
+    _ref$preventDefault = _ref.preventDefault,
+    preventDefault = _ref$preventDefault === void 0 ? true : _ref$preventDefault,
     title = _ref.title,
     visible = _ref.visible,
     onBack = _ref.onBack,
@@ -70,6 +72,7 @@ var Modal = function Modal(_ref) {
   } : _reactDom.default.createPortal;
   var testId = others['data-testid'];
   return renderer( /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    preventDefault: preventDefault,
     className: (0, _helpers.styles)(_ModalModule.default.container, overflow && _ModalModule.default.overflow, overflow && blur && _ModalModule.default.blur, visible && _ModalModule.default.visible, onOverflow && _ModalModule.default.onOverflow),
     onPress: visible && overflow ? handleOverflow : undefined,
     "data-testid": testId ? "".concat(testId, "-overflow") : undefined
@@ -104,6 +107,7 @@ Modal.propTypes = {
   fit: _propTypes.default.bool,
   overflow: _propTypes.default.bool,
   portal: _propTypes.default.bool,
+  preventDefault: _propTypes.default.bool,
   title: _propTypes.default.string,
   visible: _propTypes.default.bool,
   onBack: _propTypes.default.func,

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","ref","useRef","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","handleOverflow","event","target","current","contains","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <Pressable\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      data-testid={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View forceRow className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}
+{"version":3,"file":"Modal.js","names":["Modal","blur","children","fit","overflow","portal","preventDefault","title","visible","onBack","onClose","onOverflow","others","useDevice","isDesktop","ref","useRef","useState","dataset","setDataset","useEffect","document","body","miraiModal","undefined","handleOverflow","event","target","current","contains","renderer","IS_JEST","jsx","ReactDOM","createPortal","testId","styles","style","container","modal","calcWidth","className","header","ICON","LEFT","icon","left","right","CLOSE","EXPAND_MORE","propTypes","PropTypes","bool","node","string","func"],"sources":["../../../src/components/Modal/Modal.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef, useState } from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { IS_JEST, styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Modal.module.css';\n\nconst Modal = ({\n  blur = false,\n  children,\n  fit = false,\n  overflow = true,\n  portal = false,\n  preventDefault = true,\n  title,\n  visible,\n  onBack,\n  onClose,\n  onOverflow,\n  ...others\n}) => {\n  const { isDesktop } = useDevice();\n  const ref = useRef();\n\n  const [dataset, setDataset] = useState();\n\n  useEffect(() => {\n    if (visible && !dataset) {\n      setDataset(true);\n      document.body.dataset.miraiModal = true;\n    }\n\n    return () => {\n      if (visible && dataset) {\n        setDataset(undefined);\n        delete document.body.dataset.miraiModal;\n      }\n    };\n  }, [dataset, visible]);\n\n  const handleOverflow = (event) => {\n    const { target } = event;\n    onOverflow && !ref.current?.contains(target) && onOverflow(event);\n  };\n\n  const renderer = IS_JEST || !portal ? (jsx) => jsx : ReactDOM.createPortal;\n\n  const { ['data-testid']: testId } = others;\n\n  return renderer(\n    <Pressable\n      preventDefault={preventDefault}\n      className={styles(\n        style.container,\n        overflow && style.overflow,\n        overflow && blur && style.blur,\n        visible && style.visible,\n        onOverflow && style.onOverflow,\n      )}\n      onPress={visible && overflow ? handleOverflow : undefined}\n      data-testid={testId ? `${testId}-overflow` : undefined}\n    >\n      <View\n        {...others}\n        fit\n        ref={ref}\n        className={styles(style.modal, !fit && style.calcWidth, visible && style.visible, others.className)}\n      >\n        {(title || onBack || onClose) && (\n          <View forceRow className={style.header}>\n            {onBack && (\n              <Pressable onPress={onBack} data-testid={testId ? `${testId}-button-back` : undefined}>\n                <Icon value={ICON.LEFT} className={style.icon} />\n              </Pressable>\n            )}\n            {title && (\n              <Text headline className={styles(style.title, !onBack && style.left, !onClose && style.right)}>\n                {title}\n              </Text>\n            )}\n            {onClose && (\n              <Pressable onPress={onClose} data-testid={testId ? `${testId}-button-close` : undefined}>\n                <Icon value={isDesktop || title !== undefined ? ICON.CLOSE : ICON.EXPAND_MORE} className={style.icon} />\n              </Pressable>\n            )}\n          </View>\n        )}\n        {children}\n      </View>\n    </Pressable>,\n    document.body,\n  );\n};\n\nModal.propTypes = {\n  blur: PropTypes.bool,\n  children: PropTypes.node,\n  fit: PropTypes.bool,\n  overflow: PropTypes.bool,\n  portal: PropTypes.bool,\n  preventDefault: PropTypes.bool,\n  title: PropTypes.string,\n  visible: PropTypes.bool,\n  onBack: PropTypes.func,\n  onClose: PropTypes.func,\n  onOverflow: PropTypes.func,\n};\n\nexport { Modal };\n"],"mappings":"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"}

package/build/components/Table/Table.ColumnFilter.js

@@ -0,0 +1,154 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnFilter = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+var _helpers = require("../../helpers");
+var _primitives = require("../../primitives");
+var _Button = require("../Button");
+var _InputText = require("../InputText");
+var _Menu = require("../Menu");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var ColumnFilter = function ColumnFilter(_ref) {
+  var field = _ref.field,
+    _ref$labelCancel = _ref.labelCancel,
+    labelCancel = _ref$labelCancel === void 0 ? '$Cancel' : _ref$labelCancel,
+    _ref$labelSubmit = _ref.labelSubmit,
+    labelSubmit = _ref$labelSubmit === void 0 ? '$Submit' : _ref$labelSubmit,
+    _ref$schema = _ref.schema;
+  _ref$schema = _ref$schema === void 0 ? {} : _ref$schema;
+  var label = _ref$schema.label,
+    _ref$schema$type = _ref$schema.type,
+    type = _ref$schema$type === void 0 ? 'text' : _ref$schema$type,
+    _ref$onSubmit = _ref.onSubmit,
+    onSubmit = _ref$onSubmit === void 0 ? function () {} : _ref$onSubmit;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    form = _useState2[0],
+    setForm = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    visible = _useState4[0],
+    setVisible = _useState4[1];
+  (0, _react.useEffect)(function () {
+    setForm({});
+  }, [visible]);
+  var handlePress = function handlePress(event) {
+    event.preventDefault();
+    setVisible(!visible);
+  };
+  var handleCancel = function handleCancel() {
+    setVisible(false);
+  };
+  var handleSubmit = function handleSubmit(event) {
+    event.preventDefault();
+    setVisible(false);
+    onSubmit(_objectSpread({
+      field: field,
+      type: type
+    }, form), event);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Menu.Menu, {
+    options: [{
+      children: /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+        bold: true,
+        small: true
+      }, label || field),
+      divider: true
+    }, {
+      children: type === 'number' ? /*#__PURE__*/_react.default.createElement(_primitives.View, {
+        row: true,
+        className: _TableModule.default.items
+      }, /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
+        label: "min",
+        name: "min",
+        type: "number",
+        value: form.min,
+        onChange: function onChange(min) {
+          return setForm(_objectSpread(_objectSpread({}, form), {}, {
+            min: min
+          }));
+        },
+        className: _TableModule.default.input
+      }), /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
+        label: "max",
+        name: "max",
+        type: "number",
+        value: form.max,
+        onChange: function onChange(max) {
+          return setForm(_objectSpread(_objectSpread({}, form), {}, {
+            max: max
+          }));
+        },
+        className: _TableModule.default.input
+      })) : /*#__PURE__*/_react.default.createElement(_InputText.InputText, {
+        name: "search",
+        type: "search",
+        value: form.value,
+        onChange: function onChange(value) {
+          return setForm({
+            value: value
+          });
+        },
+        className: _TableModule.default.input
+      }),
+      divider: true
+    }, {
+      children: /*#__PURE__*/_react.default.createElement(_primitives.View, {
+        row: true,
+        wide: true,
+        className: _TableModule.default.items
+      }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        secondary: true,
+        wide: true,
+        onPress: handleCancel
+      }, labelCancel), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+        wide: true,
+        onPress: handleSubmit
+      }, labelSubmit))
+    }],
+    bottom: true,
+    centered: true,
+    visible: visible,
+    className: _TableModule.default.menuFilter
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+    onPress: handlePress,
+    style: {
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    value: _primitives.ICON.FILTER,
+    className: (0, _helpers.styles)(_TableModule.default.icon, !visible && _TableModule.default.disabled)
+  })));
+};
+exports.ColumnFilter = ColumnFilter;
+ColumnFilter.displayName = 'Component:Table:ColumnFilter';
+ColumnFilter.propTypes = {
+  field: _propTypes.default.string.isRequired,
+  labelCancel: _propTypes.default.string,
+  labelSubmit: _propTypes.default.string,
+  schema: _propTypes.default.shape({
+    label: _propTypes.default.string,
+    type: _propTypes.default.string
+  }).isRequired,
+  onSubmit: _propTypes.default.func.isRequired
+};
+//# sourceMappingURL=Table.ColumnFilter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.ColumnFilter.js","names":["ColumnFilter","field","labelCancel","labelSubmit","schema","label","type","onSubmit","useState","form","setForm","visible","setVisible","useEffect","handlePress","event","preventDefault","handleCancel","handleSubmit","children","divider","style","items","min","input","max","value","menuFilter","position","ICON","FILTER","styles","icon","disabled","displayName","propTypes","PropTypes","string","isRequired","shape","func"],"sources":["../../../src/components/Table/Table.ColumnFilter.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport { Button } from '../Button';\nimport { InputText } from '../InputText';\nimport { Menu } from '../Menu';\nimport style from './Table.module.css';\n\nconst ColumnFilter = ({\n  field,\n  labelCancel = '$Cancel',\n  labelSubmit = '$Submit',\n  schema: { label, type = 'text' } = {},\n  onSubmit = () => {},\n}) => {\n  const [form, setForm] = useState({});\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    setForm({});\n  }, [visible]);\n\n  const handlePress = (event) => {\n    event.preventDefault();\n    setVisible(!visible);\n  };\n\n  const handleCancel = () => {\n    setVisible(false);\n  };\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    setVisible(false);\n    onSubmit({ field, type, ...form }, event);\n  };\n\n  return (\n    <Menu\n      options={[\n        {\n          children: (\n            <Text bold small>\n              {label || field}\n            </Text>\n          ),\n          divider: true,\n        },\n        {\n          children:\n            type === 'number' ? (\n              <View row className={style.items}>\n                <InputText\n                  label=\"min\"\n                  name=\"min\"\n                  type=\"number\"\n                  value={form.min}\n                  onChange={(min) => setForm({ ...form, min })}\n                  className={style.input}\n                />\n                <InputText\n                  label=\"max\"\n                  name=\"max\"\n                  type=\"number\"\n                  value={form.max}\n                  onChange={(max) => setForm({ ...form, max })}\n                  className={style.input}\n                />\n              </View>\n            ) : (\n              <InputText\n                name=\"search\"\n                type=\"search\"\n                value={form.value}\n                onChange={(value) => setForm({ value })}\n                className={style.input}\n              />\n            ),\n          divider: true,\n        },\n\n        {\n          children: (\n            <View row wide className={style.items}>\n              <Button secondary wide onPress={handleCancel}>\n                {labelCancel}\n              </Button>\n              <Button wide onPress={handleSubmit}>\n                {labelSubmit}\n              </Button>\n            </View>\n          ),\n        },\n      ]}\n      bottom\n      centered\n      visible={visible}\n      className={style.menuFilter}\n    >\n      <Pressable onPress={handlePress} style={{ position: 'relative' }}>\n        <Icon value={ICON.FILTER} className={styles(style.icon, !visible && style.disabled)} />\n      </Pressable>\n    </Menu>\n  );\n};\n\nColumnFilter.displayName = 'Component:Table:ColumnFilter';\n\nColumnFilter.propTypes = {\n  field: PropTypes.string.isRequired,\n  labelCancel: PropTypes.string,\n  labelSubmit: PropTypes.string,\n  schema: PropTypes.shape({\n    label: PropTypes.string,\n    type: PropTypes.string,\n  }).isRequired,\n  onSubmit: PropTypes.func.isRequired,\n};\n\nexport { ColumnFilter };\n"],"mappings":"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"}

package/build/components/Table/Table.Filter.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Filter = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("../../primitives");
+var _TableModule = _interopRequireDefault(require("./Table.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Filter = function Filter(_ref) {
+  var _ref$filter = _ref.filter,
+    filter = _ref$filter === void 0 ? [] : _ref$filter,
+    _ref$onRemove = _ref.onRemove,
+    onRemove = _ref$onRemove === void 0 ? function () {} : _ref$onRemove;
+  return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    wide: true,
+    className: _TableModule.default.filters
+  }, filter.map(function (_ref2, index) {
+    var field = _ref2.field,
+      value = _ref2.value,
+      min = _ref2.min,
+      max = _ref2.max;
+    return /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      row: true,
+      key: index,
+      className: _TableModule.default.filter
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      small: true
+    }, field), value && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      bold: true,
+      small: true
+    }, value), min && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      bold: true,
+      small: true
+    }, "".concat(max ? '' : '≥ ').concat(min)), max && /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+      bold: true,
+      small: true
+    }, "".concat(min ? ' - ' : '≤ ').concat(max)), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+      onPress: function onPress() {
+        return onRemove(index);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+      action: true,
+      value: _primitives.ICON.CLOSE
+    })));
+  }));
+};
+exports.Filter = Filter;
+Filter.displayName = 'Component:Table:Filter';
+Filter.propTypes = {
+  filter: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  onRemove: _propTypes.default.func.isRequired
+};
+//# sourceMappingURL=Table.Filter.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.Filter.js","names":["Filter","filter","onRemove","style","filters","map","index","field","value","min","max","ICON","CLOSE","displayName","propTypes","PropTypes","arrayOf","shape","func","isRequired"],"sources":["../../../src/components/Table/Table.Filter.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { Icon, ICON, Pressable, Text, View } from '../../primitives';\nimport style from './Table.module.css';\n\nconst Filter = ({ filter = [], onRemove = () => {} }) => (\n  <View row wide className={style.filters}>\n    {filter.map(({ field, value, min, max }, index) => (\n      <View row key={index} className={style.filter}>\n        <Text small>{field}</Text>\n        {value && (\n          <Text bold small>\n            {value}\n          </Text>\n        )}\n        {min && (\n          <Text bold small>\n            {`${max ? '' : '≥ '}${min}`}\n          </Text>\n        )}\n        {max && (\n          <Text bold small>\n            {`${min ? ' - ' : '≤ '}${max}`}\n          </Text>\n        )}\n        <Pressable onPress={() => onRemove(index)}>\n          <Icon action value={ICON.CLOSE} />\n        </Pressable>\n      </View>\n    ))}\n  </View>\n);\n\nFilter.displayName = 'Component:Table:Filter';\n\nFilter.propTypes = {\n  filter: PropTypes.arrayOf(PropTypes.shape({})),\n  onRemove: PropTypes.func.isRequired,\n};\n\nexport { Filter };\n"],"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAAuC;AAEvC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,uBAAMC,MAAM;IAANA,MAAM,4BAAG,EAAE;IAAA,qBAAEC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;EAAA,oBAChD,6BAAC,gBAAI;IAAC,GAAG;IAAC,IAAI;IAAC,SAAS,EAAEC,oBAAK,CAACC;EAAQ,GACrCH,MAAM,CAACI,GAAG,CAAC,iBAA6BC,KAAK;IAAA,IAA/BC,KAAK,SAALA,KAAK;MAAEC,KAAK,SAALA,KAAK;MAAEC,GAAG,SAAHA,GAAG;MAAEC,GAAG,SAAHA,GAAG;IAAA,oBACnC,6BAAC,gBAAI;MAAC,GAAG;MAAC,GAAG,EAAEJ,KAAM;MAAC,SAAS,EAAEH,oBAAK,CAACF;IAAO,gBAC5C,6BAAC,gBAAI;MAAC,KAAK;IAAA,GAAEM,KAAK,CAAQ,EACzBC,KAAK,iBACJ,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,GACbA,KAAK,CAET,EACAC,GAAG,iBACF,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,aACVC,GAAG,GAAG,EAAE,GAAG,IAAI,SAAGD,GAAG,EAE5B,EACAC,GAAG,iBACF,6BAAC,gBAAI;MAAC,IAAI;MAAC,KAAK;IAAA,aACVD,GAAG,GAAG,KAAK,GAAG,IAAI,SAAGC,GAAG,EAE/B,eACD,6BAAC,qBAAS;MAAC,OAAO,EAAE;QAAA,OAAMR,QAAQ,CAACI,KAAK,CAAC;MAAA;IAAC,gBACxC,6BAAC,gBAAI;MAAC,MAAM;MAAC,KAAK,EAAEK,gBAAI,CAACC;IAAM,EAAG,CACxB,CACP;EAAA,CACR,CAAC,CACG;AAAA,CACR;AAAC;AAEFZ,MAAM,CAACa,WAAW,GAAG,wBAAwB;AAE7Cb,MAAM,CAACc,SAAS,GAAG;EACjBb,MAAM,EAAEc,kBAAS,CAACC,OAAO,CAACD,kBAAS,CAACE,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;EAC9Cf,QAAQ,EAAEa,kBAAS,CAACG,IAAI,CAACC;AAC3B,CAAC"}

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

@@ -4,14 +4,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TableRow = void 0;
+exports.Row = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _InputOption = require("../InputOption");
+var _Table = require("./Table.ColumnFilter");
 var _TableModule = _interopRequireDefault(require("./Table.module.css"));
-var _excluded = ["checked", "dataSource", "indeterminate", "schema", "sort", "onPress", "onSelect", "onSort"];
+var _excluded = ["checked", "dataSource", "indeterminate", "schema", "sort", "onFilter", "onPress", "onSelect", "onSort"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -20,13 +21,14 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var CUSTOM_EVENT_TYPES = ['button', 'checkbox', 'input', 'radio', 'submit'];
-var TableRow = function TableRow(_ref) {
+var Row = function Row(_ref) {
   var checked = _ref.checked,
     dataSource = _ref.dataSource,
     indeterminate = _ref.indeterminate,
     schema = _ref.schema,
     _ref$sort = _ref.sort,
     sort = _ref$sort === void 0 ? {} : _ref$sort,
+    onFilter = _ref.onFilter,
     onPress = _ref.onPress,
     onSelect = _ref.onSelect,
     onSort = _ref.onSort,
@@ -62,20 +64,28 @@ var TableRow = function TableRow(_ref) {
       onChange: function onChange(event) {
         return onSelect(dataSource, event);
       }
-    }), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
+    }), isHead ? schema[field].label : dataSource[field], isHead && onSort && /*#__PURE__*/_react.default.createElement(_primitives.View, {
+      row: true,
+      className: _TableModule.default.icons
+    }, onSort && /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
       value: sort[field] === false ? _primitives.ICON.UP : _primitives.ICON.DOWN,
       className: (0, _helpers.styles)(_TableModule.default.icon, sort[field] === undefined && _TableModule.default.disabled)
-    })));
+    }), onFilter && /*#__PURE__*/_react.default.createElement(_Table.ColumnFilter, {
+      field: field,
+      schema: schema[field],
+      onSubmit: onFilter
+    }))));
   }));
 };
-exports.TableRow = TableRow;
-TableRow.displayName = 'Table:Row';
-TableRow.propTypes = {
+exports.Row = Row;
+Row.displayName = 'Component:Table:Row';
+Row.propTypes = {
   checked: _propTypes.default.bool,
   dataSource: _propTypes.default.shape({}),
   indeterminate: _propTypes.default.bool,
   schema: _propTypes.default.shape({}).isRequired,
   sort: _propTypes.default.shape({}),
+  onFilter: _propTypes.default.func,
   onPress: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   onSort: _propTypes.default.func

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

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

package/build/components/Table/Table.js

@@ -10,9 +10,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _helpers = require("../../helpers");
 var _primitives = require("../../primitives");
 var _helpers2 = require("./helpers");
+var _Table = require("./Table.Filter");
 var _TableModule = _interopRequireDefault(require("./Table.module.css"));
-var _Table = require("./Table.Row");
-var _excluded = ["dataSource", "inline", "schema", "search", "selected", "onPress", "onScroll", "onSelect"];
+var _Table2 = require("./Table.Row");
+var _excluded = ["dataSource", "filter", "inline", "schema", "search", "selected", "onPress", "onScroll", "onSelect"];
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -22,6 +23,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -33,6 +38,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Table = function Table(_ref) {
   var _ref$dataSource = _ref.dataSource,
     dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource,
+    _ref$filter = _ref.filter,
+    propFilter = _ref$filter === void 0 ? [] : _ref$filter,
     _ref$inline = _ref.inline,
     inline = _ref$inline === void 0 ? true : _ref$inline,
     schema = _ref.schema,
@@ -43,14 +50,36 @@ var Table = function Table(_ref) {
     onScroll = _ref.onScroll,
     onSelect = _ref.onSelect,
     others = _objectWithoutProperties(_ref, _excluded);
-  var _useState = (0, _react.useState)(propSelected),
+  var _useState = (0, _react.useState)(propFilter),
     _useState2 = _slicedToArray(_useState, 2),
-    selected = _useState2[0],
-    setSelected = _useState2[1];
-  var _useState3 = (0, _react.useState)({}),
+    filter = _useState2[0],
+    setFilter = _useState2[1];
+  var _useState3 = (0, _react.useState)(propSelected),
     _useState4 = _slicedToArray(_useState3, 2),
-    sort = _useState4[0],
-    setSort = _useState4[1];
+    selected = _useState4[0],
+    setSelected = _useState4[1];
+  var _useState5 = (0, _react.useState)({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    sort = _useState6[0],
+    setSort = _useState6[1];
+  (0, _react.useEffect)(function () {
+    if (JSON.stringify(filter) !== JSON.stringify(propFilter)) setFilter(propFilter);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [propFilter]);
+  var handleAddFilter = function handleAddFilter(item) {
+    setFilter([].concat(_toConsumableArray(filter), [item]));
+  };
+  var handleRemoveFilter = function handleRemoveFilter(index) {
+    filter.splice(index, 1);
+    setFilter(_toConsumableArray(filter));
+  };
+  var handleHeadSelect = function handleHeadSelect(row, event) {
+    setSelected(function () {
+      var next = selected.length !== dataSource.length ? dataSource : [];
+      onSelect(next, event);
+      return next;
+    });
+  };
   var handleSelect = function handleSelect(row, event) {
     setSelected(function () {
       var exists = selected.includes(row);
@@ -62,13 +91,6 @@ var Table = function Table(_ref) {
       return next;
     });
   };
-  var handleHeadSelect = function handleHeadSelect(row, event) {
-    setSelected(function () {
-      var next = selected.length !== dataSource.length ? dataSource : [];
-      onSelect(next, event);
-      return next;
-    });
-  };
   var handleSort = function handleSort(field) {
     setSort(sort[field] === undefined ? _defineProperty({}, field, true) : sort[field] ? _defineProperty({}, field, false) : {});
   };
@@ -76,24 +98,33 @@ var Table = function Table(_ref) {
   return /*#__PURE__*/_react.default.createElement(onScroll ? _primitives.ScrollView : !inline ? _primitives.View : _react.Fragment, onScroll || !inline ? _objectSpread(_objectSpread({}, others), {}, {
     onScroll: onScroll,
     className: (0, _helpers.styles)(!inline && _TableModule.default.outlined, others.className)
-  }) : undefined, /*#__PURE__*/_react.default.createElement("table", _extends({}, !onScroll ? others : undefined, {
+  }) : undefined, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, filter.length > 0 && /*#__PURE__*/_react.default.createElement(_Table.Filter, {
+    filter: filter,
+    onRemove: function onRemove(index) {
+      return handleRemoveFilter(index);
+    }
+  }), /*#__PURE__*/_react.default.createElement("table", _extends({}, !onScroll ? others : undefined, {
     className: (0, _helpers.styles)(_TableModule.default.table, !onScroll && !inline && others.className)
-  }), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
+  }), /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement(_Table2.Row, {
     checked: selected.length === dataSource.length,
     indeterminate: selected.length > 0,
     schema: schema,
     sort: sort,
+    onFilter: handleAddFilter,
     onSelect: onSelect ? handleHeadSelect : undefined,
     onSort: handleSort,
     "data-testid": testId ? "".concat(testId, "-head") : undefined
   })), /*#__PURE__*/_react.default.createElement("tbody", null, (0, _react.useMemo)(function () {
     return (0, _helpers2.select)(dataSource, {
+      filter: filter,
       search: search,
       sort: sort
     });
-  }, [dataSource, search, sort]).map(function (row, index) {
-    return /*#__PURE__*/_react.default.createElement(_Table.TableRow, {
-      checked: selected.includes(row),
+  }, [dataSource, filter, search, sort]).map(function (row, index) {
+    return /*#__PURE__*/_react.default.createElement(_Table2.Row, {
+      checked: !!selected.find(function (item) {
+        return JSON.stringify(item) === JSON.stringify(row);
+      }),
       dataSource: row,
       key: index,
       schema: schema,
@@ -101,11 +132,13 @@ var Table = function Table(_ref) {
       onSelect: onSelect ? handleSelect : undefined,
       "data-testid": testId ? "".concat(testId, "-").concat(index) : undefined
     });
-  }))));
+  })))));
 };
 exports.Table = Table;
+Table.displayName = 'Component:Table';
 Table.propTypes = {
   dataSource: _propTypes.default.arrayOf(_propTypes.default.shape({})),
+  filter: _propTypes.default.arrayOf(_propTypes.default.shape({})),
   inline: _propTypes.default.bool,
   schema: _propTypes.default.shape({}).isRequired,
   search: _propTypes.default.string,