@mirai/ui 1.0.183 → 1.0.185

package/build/components/Table/Table.stories.js

@@ -1,6 +1,5 @@
 "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
 });
@@ -13,9 +12,7 @@ var _ref;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 _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 _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); }
 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 _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."); }
@@ -23,6 +20,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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; }
+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); }
 var _default = {
   title: 'Components'
 };
@@ -37,6 +37,86 @@ var tags = function tags(value) {
     }, language);
   });
 };
+var handleSwitch = function handleSwitch(value, event) {
+  event.stopPropagation();
+  console.log('::switch::', value);
+};
+var dataSource = [{
+  username: 'jose',
+  email: 'jose@mirai.com',
+  active: true,
+  activeSwitch: /*#__PURE__*/_react.default.createElement(_.Switch, {
+    name: "active",
+    checked: true,
+    onChange: handleSwitch
+  }),
+  year: undefined,
+  languages: ['ES', 'EN'],
+  tags: tags(['ES', 'EN']),
+  action: null
+}, {
+  username: 'mario/1',
+  email: 'mario.1@mirai.com',
+  active: true,
+  activeSwitch: /*#__PURE__*/_react.default.createElement(_.Switch, {
+    name: "active",
+    checked: true,
+    onChange: handleSwitch
+  }),
+  languages: ['ES'],
+  tags: null,
+  year: 2005
+}, {
+  username: 'svet',
+  email: 'svet@mirai.com',
+  active: true,
+  activeSwitch: /*#__PURE__*/_react.default.createElement(_.Switch, {
+    name: "active",
+    checked: true,
+    onChange: handleSwitch
+  }),
+  tags: tags(['RU', 'ES', 'EN']),
+  languages: ['RU', 'ES', 'EN'],
+  year: 2021,
+  twitter: undefined,
+  action: /*#__PURE__*/_react.default.createElement(_.Button, {
+    small: true
+  }, "Click Me"),
+  actionTitle: 'Click Me'
+}, (_ref = {
+  username: 'javi',
+  email: 'hi@soyjavi.com',
+  active: true,
+  activeSwitch: /*#__PURE__*/_react.default.createElement(_.Switch, {
+    name: "active",
+    checked: true,
+    onChange: handleSwitch
+  }),
+  tags: null,
+  languages: ['EU', 'ES', 'EN', 'TH']
+}, _defineProperty(_ref, "tags", tags(['EU', 'ES', 'EN', 'TH'])), _defineProperty(_ref, "year", 2022), _defineProperty(_ref, "twitter", 'soyjavi'), _defineProperty(_ref, "bio", "Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world."), _ref), {
+  username: 'victor',
+  email: 'victor@mirai.com',
+  active: false,
+  activeSwitch: /*#__PURE__*/_react.default.createElement(_.Switch, {
+    name: "active",
+    onChange: handleSwitch
+  }),
+  languages: ['ES'],
+  tags: tags(['ES']),
+  year: 2021
+}, {
+  username: 'mario/2',
+  email: 'mario.2@mirai.com',
+  active: false,
+  activeSwitch: /*#__PURE__*/_react.default.createElement(_.Switch, {
+    name: "active",
+    onChange: handleSwitch
+  }),
+  languages: ['ES'],
+  tags: tags(['ES']),
+  year: 2022
+}];
 var Story = function Story(props) {
   var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
@@ -87,48 +167,6 @@ var Story = function Story(props) {
   })));
 };
 exports.Story = Story;
-var dataSource = [{
-  username: 'jose',
-  email: 'jose@mirai.com',
-  year: 1,
-  languages: ['ES', 'EN'],
-  tags: tags(['ES', 'EN']),
-  action: null
-}, {
-  username: 'mario/1',
-  email: 'mario.1@mirai.com',
-  languages: ['ES'],
-  tags: null,
-  year: 2005
-}, {
-  username: 'svet',
-  email: 'svet@mirai.com',
-  tags: tags(['RU', 'ES', 'EN']),
-  languages: ['RU', 'ES', 'EN'],
-  year: 2021,
-  twitter: undefined,
-  action: /*#__PURE__*/_react.default.createElement(_.Button, {
-    small: true
-  }, "Click Me"),
-  actionTitle: 'Click Me'
-}, (_ref = {
-  username: 'javi',
-  email: 'hi@soyjavi.com',
-  tags: null,
-  languages: ['EU', 'ES', 'EN', 'TH']
-}, _defineProperty(_ref, "tags", tags(['EU', 'ES', 'EN', 'TH'])), _defineProperty(_ref, "year", 2022), _defineProperty(_ref, "twitter", 'soyjavi'), _defineProperty(_ref, "bio", "Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world."), _ref), {
-  username: 'victor',
-  email: 'victor@mirai.com',
-  languages: ['ES'],
-  tags: tags(['ES']),
-  year: 2021
-}, {
-  username: 'mario/2',
-  email: 'mario.2@mirai.com',
-  languages: ['ES'],
-  tags: tags(['ES']),
-  year: 2022
-}];
 Story.storyName = 'Table';
 Story.args = {
   dataSource: dataSource,
@@ -155,12 +193,22 @@ Story.args = {
   },
   schema: {
     username: {
-      label: 'User Name',
-      type: 'text'
+      label: 'User Name'
     },
     email: {
       label: 'Email'
     },
+    active: {
+      label: 'Active',
+      type: 'boolean',
+      hidden: true
+    },
+    activeSwitch: {
+      label: 'Active',
+      type: 'component',
+      bind: 'active',
+      sort: false
+    },
     tags: {
       label: /*#__PURE__*/_react.default.createElement(_.View, {
         row: true,
@@ -170,8 +218,8 @@ Story.args = {
       bind: 'languages'
     },
     languages: {
-      label: 'Languages (hidden)',
-      type: 'hidden'
+      label: 'Languages',
+      hidden: true
     },
     year: {
       label: 'Year',
@@ -186,17 +234,14 @@ Story.args = {
     action: {
       label: 'Action',
       type: 'component',
-      bind: 'actionTitle'
-    },
-    actionTitle: {
-      label: 'Action (hidden)',
-      type: 'hidden'
+      sort: false,
+      filter: false
     }
   },
   search: '',
+  store: 'mirai',
   // inherited properties
   testId: 'test-story',
-  store: 'mirai',
   style: {
     background: 'green'
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Table.stories.js","names":["title","tags","value","map","language","style","tag","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","console","log","handlePress","handleSelect","table","dataSource","username","email","year","languages","action","twitter","undefined","actionTitle","storyName","args","filter","field","min","max","inline","l10n","actionCancel","actionSubmit","labelMax","labelMin","schema","label","type","bind","bio","testId","store","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, Icon, ICON, InputText, Text, View } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nconst tags = (value) =>\n  value.map((language) => (\n    <Text key={language} bold tiny className={style.tag}>\n      {language}\n    </Text>\n  ));\n\nexport const Story = (props) => {\n  const [selected, setSelected] = useState();\n  const [search, setSearch] = useState();\n\n  useEffect(() => {\n    setSearch(props.search);\n  }, [props.search]);\n\n  const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n  const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n  const handleSelect = (...others) => {\n    console.log('<Table>::onSelect', ...others);\n    setSelected(...others);\n  };\n\n  return (\n    <>\n      <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n      <Table\n        {...props}\n        search={search}\n        selected={selected}\n        onPress={handlePress}\n        onScroll={handleScroll}\n        onSelect={handleSelect}\n        className={style.table}\n      />\n    </>\n  );\n};\n\nconst dataSource = [\n  {\n    username: 'jose',\n    email: 'jose@mirai.com',\n    year: 1,\n    languages: ['ES', 'EN'],\n    tags: tags(['ES', 'EN']),\n    action: null,\n  },\n  {\n    username: 'mario/1',\n    email: 'mario.1@mirai.com',\n    languages: ['ES'],\n    tags: null,\n    year: 2005,\n  },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    tags: tags(['RU', 'ES', 'EN']),\n    languages: ['RU', 'ES', 'EN'],\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n    actionTitle: 'Click Me',\n  },\n  {\n    username: 'javi',\n    email: 'hi@soyjavi.com',\n    tags: null,\n    languages: ['EU', 'ES', 'EN', 'TH'],\n    tags: tags(['EU', 'ES', 'EN', 'TH']),\n    year: 2022,\n    twitter: 'soyjavi',\n    bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n  },\n  {\n    username: 'victor',\n    email: 'victor@mirai.com',\n    languages: ['ES'],\n    tags: tags(['ES']),\n    year: 2021,\n  },\n  {\n    username: 'mario/2',\n    email: 'mario.2@mirai.com',\n    languages: ['ES'],\n    tags: tags(['ES']),\n    year: 2022,\n  },\n];\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource,\n  filter: [\n    { field: 'email', value: '@mirai.com' },\n    { field: 'nonExistent', value: '@mirai.com' },\n    { field: 'email', value: '@soyjavi.com' },\n    { field: 'year', min: 2020, max: 2023 },\n  ],\n  inline: true,\n  l10n: {\n    actionCancel: 'Cancel',\n    actionSubmit: 'Submit',\n    labelMax: 'Max',\n    labelMin: 'Min',\n  },\n  schema: {\n    username: { label: 'User Name', type: 'text' },\n    email: {\n      label: 'Email',\n    },\n    tags: {\n      label: (\n        <View row className={style.label}>\n          <Text>🏷️</Text>\n          Tags\n        </View>\n      ),\n      type: 'component',\n      bind: 'languages',\n    },\n    languages: { label: 'Languages (hidden)', type: 'hidden' },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    bio: { label: 'Biography' },\n    action: { label: 'Action', type: 'component', bind: 'actionTitle' },\n    actionTitle: { label: 'Action (hidden)', type: 'hidden' },\n  },\n  search: '',\n  // inherited properties\n  testId: 'test-story',\n  store: 'mirai',\n  style: {\n    background: 'green',\n  },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}
+{"version":3,"file":"Table.stories.js","names":["title","tags","value","map","language","style","tag","handleSwitch","event","stopPropagation","console","log","dataSource","username","email","active","activeSwitch","year","undefined","languages","action","twitter","actionTitle","Story","props","useState","selected","setSelected","search","setSearch","useEffect","handleScroll","others","handlePress","handleSelect","table","storyName","args","filter","field","min","max","inline","l10n","actionCancel","actionSubmit","labelMax","labelMin","schema","label","type","hidden","bind","sort","bio","store","testId","background","argTypes"],"sources":["../../../src/components/Table/Table.stories.jsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { Button, Icon, ICON, InputText, Switch, Text, View } from '../../';\nimport { Table } from './Table';\nimport style from './Table.stories.module.css';\n\nexport default { title: 'Components' };\n\nconst tags = (value) =>\n  value.map((language) => (\n    <Text key={language} bold tiny className={style.tag}>\n      {language}\n    </Text>\n  ));\n\nconst handleSwitch = (value, event) => {\n  event.stopPropagation();\n  console.log('::switch::', value);\n};\n\nconst dataSource = [\n  {\n    username: 'jose',\n    email: 'jose@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    year: undefined,\n    languages: ['ES', 'EN'],\n    tags: tags(['ES', 'EN']),\n    action: null,\n  },\n  {\n    username: 'mario/1',\n    email: 'mario.1@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    languages: ['ES'],\n    tags: null,\n    year: 2005,\n  },\n  {\n    username: 'svet',\n    email: 'svet@mirai.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    tags: tags(['RU', 'ES', 'EN']),\n    languages: ['RU', 'ES', 'EN'],\n    year: 2021,\n    twitter: undefined,\n    action: <Button small>Click Me</Button>,\n    actionTitle: 'Click Me',\n  },\n  {\n    username: 'javi',\n    email: 'hi@soyjavi.com',\n    active: true,\n    activeSwitch: <Switch name=\"active\" checked onChange={handleSwitch} />,\n    tags: null,\n    languages: ['EU', 'ES', 'EN', 'TH'],\n    tags: tags(['EU', 'ES', 'EN', 'TH']),\n    year: 2022,\n    twitter: 'soyjavi',\n    bio: \"Hi, I'm Javi. For as long as I can remember, I have always loved build software and helping people through it. I strive to design simple, clean, and beautiful products in the hope that they will make a difference in the world.\",\n  },\n  {\n    username: 'victor',\n    email: 'victor@mirai.com',\n    active: false,\n    activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n    languages: ['ES'],\n    tags: tags(['ES']),\n    year: 2021,\n  },\n  {\n    username: 'mario/2',\n    email: 'mario.2@mirai.com',\n    active: false,\n    activeSwitch: <Switch name=\"active\" onChange={handleSwitch} />,\n    languages: ['ES'],\n    tags: tags(['ES']),\n    year: 2022,\n  },\n];\n\nexport const Story = (props) => {\n  const [selected, setSelected] = useState();\n  const [search, setSearch] = useState();\n\n  useEffect(() => {\n    setSearch(props.search);\n  }, [props.search]);\n\n  const handleScroll = (...others) => console.log('<Table>::onScroll', ...others);\n\n  const handlePress = (...others) => console.log('<Table>::onPress', ...others);\n\n  const handleSelect = (...others) => {\n    console.log('<Table>::onSelect', ...others);\n    setSelected(...others);\n  };\n\n  return (\n    <>\n      <InputText name=\"search\" placeholder=\"search...\" type=\"search\" value={search} onChange={setSearch} />\n\n      <Table\n        {...props}\n        search={search}\n        selected={selected}\n        onPress={handlePress}\n        onScroll={handleScroll}\n        onSelect={handleSelect}\n        className={style.table}\n      />\n    </>\n  );\n};\n\nStory.storyName = 'Table';\n\nStory.args = {\n  dataSource,\n  filter: [\n    { field: 'email', value: '@mirai.com' },\n    { field: 'nonExistent', value: '@mirai.com' },\n    { field: 'email', value: '@soyjavi.com' },\n    { field: 'year', min: 2020, max: 2023 },\n  ],\n  inline: true,\n  l10n: {\n    actionCancel: 'Cancel',\n    actionSubmit: 'Submit',\n    labelMax: 'Max',\n    labelMin: 'Min',\n  },\n  schema: {\n    username: { label: 'User Name' },\n    email: { label: 'Email' },\n    active: { label: 'Active', type: 'boolean', hidden: true },\n    activeSwitch: { label: 'Active', type: 'component', bind: 'active', sort: false },\n    tags: {\n      label: (\n        <View row className={style.label}>\n          <Text>🏷️</Text>\n          Tags\n        </View>\n      ),\n      type: 'component',\n      bind: 'languages',\n    },\n    languages: { label: 'Languages', hidden: true },\n    year: { label: 'Year', type: 'number' },\n    twitter: { label: 'Twitter' },\n    bio: { label: 'Biography' },\n    action: { label: 'Action', type: 'component', sort: false, filter: false },\n  },\n  search: '',\n  store: 'mirai',\n  // inherited properties\n  testId: 'test-story',\n  style: {\n    background: 'green',\n  },\n};\n\nStory.argTypes = {};\n"],"mappings":"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"}

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

@@ -2,7 +2,11 @@
   width: 100%;
 }
 
-.table td:nth-child(6) {
+.table td:first-child {
+  min-width: 320px;
+}
+
+.table td:nth-child(7) {
   max-width: 20vw;
 }
 

package/build/components/Table/__tests__/__snapshots__/Table.ColumnFilter.test.js.snap

@@ -294,7 +294,7 @@ exports[`component:<Table>:<ColumnFilter> prop:schema type:number 1`] = `
           <span
             class="text bold small"
           >
-            number
+            field
           </span>
         </div>
       </div>
@@ -305,52 +305,41 @@ exports[`component:<Table>:<ColumnFilter> prop:schema type:number 1`] = `
           class="view row wide content"
         >
           <div
-            class="view row items"
+            class="view inputContainer input"
           >
             <div
-              class="view inputContainer input"
+              class="view row inputBorder"
             >
-              <div
-                class="view row inputBorder"
+              <span
+                class="icon headline-3 icon left"
               >
-                <div
-                  class="view wide content"
+                <svg
+                  fill="currentColor"
+                  height="1em"
+                  stroke="currentColor"
+                  stroke-width="0"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <span
-                    class="text paragraph text label"
-                  >
-                    Min
-                  </span>
-                  <input
-                    class="input input withLabel"
-                    name="min"
-                    type="number"
-                    value=""
+                  <path
+                    d="M0 0h24v24H0V0z"
+                    fill="none"
                   />
-                </div>
-              </div>
-            </div>
-            <div
-              class="view inputContainer input"
-            >
+                  <path
+                    d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
+                  />
+                </svg>
+              </span>
               <div
-                class="view row inputBorder"
+                class="view wide content"
               >
-                <div
-                  class="view wide content"
-                >
-                  <span
-                    class="text paragraph text label"
-                  >
-                    Max
-                  </span>
-                  <input
-                    class="input input withLabel"
-                    name="max"
-                    type="number"
-                    value=""
-                  />
-                </div>
+                <input
+                  class="input input"
+                  name="search"
+                  type="search"
+                  value=""
+                />
               </div>
             </div>
           </div>
@@ -429,7 +418,7 @@ exports[`component:<Table>:<ColumnFilter> prop:schema type:text 1`] = `
           <span
             class="text bold small"
           >
-            text
+            field
           </span>
         </div>
       </div>