@stokr/components-library 2.3.65-beta.7 → 2.3.65-beta.9

package/dist/components/AdminDashboard/Table/ReactTable.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.DefaultWrapper = exports.Default = exports.CustomStyledTable = exports.BoxStyleTable = exports.BlueWrapper = exports.BlueTable = void 0;
+exports.default = exports.WrapperWithSubTable = exports.WithoutPagination = exports.WithSubTable = exports.WithStatusBasedHover = exports.WithRowSpecificHover = exports.WithRowHover = exports.WithRowClick = exports.WithHoverStylesAndContent = exports.WithHoverContent = exports.WithFixedColumnWidths = exports.WithCustomStyling = exports.SortableHeaders = exports.RowClickWithExpandedContent = exports.RowClickWithButtons = exports.PerColumnHeaderClick = exports.HeaderClick = exports.FilterableHeaders = exports.ExpandedWithRichContent = exports.DefaultWrapper = exports.Default = exports.CustomStyledTable = exports.CustomExpandedContent = exports.BoxStyleTable = exports.BlueWrapper = exports.BlueTable = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ReactTable = require("./ReactTable");
 var _ReactTableWrapper = require("./ReactTableWrapper");
@@ -403,4 +403,511 @@ CustomStyledTable.args = _objectSpread(_objectSpread({}, Default.args), {}, {
     textTransform: 'uppercase',
     letterSpacing: '0.5px'
   })
-});
+});
+
+// ============================================
+// NEW FEATURE STORIES: onRowClick & renderExpandedContent
+// ============================================
+
+// Row Click Handler - Basic
+const WithRowClick = exports.WithRowClick = Template.bind({});
+WithRowClick.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  onRowClick: (rowData, rowIndex, event) => {
+    alert("Clicked row ".concat(rowIndex + 1, ": ").concat(rowData.name, " (").concat(rowData.status, ")"));
+  }
+});
+WithRowClick.parameters = {
+  docs: {
+    description: {
+      story: 'Click anywhere on a row to trigger an action. Buttons and links inside cells will NOT trigger the row click.'
+    }
+  }
+};
+
+// Row Click with Buttons Inside - Demonstrates click isolation
+const columnsWithActions = [...columns.slice(0, 3), {
+  Header: 'Actions',
+  accessor: 'actions',
+  width: '40%',
+  Cell: _ref => {
+    let {
+      row
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '6px 12px',
+        backgroundColor: '#0050ca',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Edit button clicked for ".concat(row.original.name))
+    }, "Edit"), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '6px 12px',
+        backgroundColor: '#dc3545',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Delete button clicked for ".concat(row.original.name))
+    }, "Delete"));
+  }
+}];
+const RowClickWithButtons = exports.RowClickWithButtons = Template.bind({});
+RowClickWithButtons.args = {
+  columns: columnsWithActions,
+  data: data,
+  noPagination: false,
+  onRowClick: (rowData, rowIndex) => {
+    alert("Row clicked: ".concat(rowData.name));
+  }
+};
+RowClickWithButtons.parameters = {
+  docs: {
+    description: {
+      story: 'Demonstrates that clicking buttons inside cells does NOT trigger onRowClick. Only clicking on non-interactive areas triggers the row click.'
+    }
+  }
+};
+
+// Custom Expanded Content - Simple
+const CustomExpandedContent = exports.CustomExpandedContent = Template.bind({});
+CustomExpandedContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  renderExpandedContent: (row, toggleExpanded) => {
+    var _row$original$subData;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '20px',
+        backgroundColor: '#f8f9fa',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 12px 0'
+      }
+    }, "Details for ", row.original.name), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 8px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "ID:"), " ", row.original.id), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 8px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "Status:"), " ", row.original.status), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: '0 0 16px 0'
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "Sub-items:"), " ", ((_row$original$subData = row.original.subData) === null || _row$original$subData === void 0 ? void 0 : _row$original$subData.length) || 0), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#6c757d',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => toggleExpanded()
+    }, "Collapse"));
+  }
+});
+CustomExpandedContent.parameters = {
+  docs: {
+    description: {
+      story: 'Click on a row to expand and show custom content instead of a sub-table. The toggleExpanded function allows you to collapse the row programmatically.'
+    }
+  }
+};
+
+// Custom Expanded Content - Rich Component
+const ExpandedWithRichContent = exports.ExpandedWithRichContent = Template.bind({});
+ExpandedWithRichContent.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  renderExpandedContent: row => {
+    var _row$original$subData2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '24px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '24px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px',
+        backgroundColor: '#fff',
+        border: '1px solid #e1e1e1',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 16px 0',
+        color: '#0050ca'
+      }
+    }, "User Information"), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "Name:"), " ", row.original.name), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "ID:"), " #", row.original.id), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("strong", null, "Status:"), ' ', /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        padding: '2px 8px',
+        borderRadius: '12px',
+        backgroundColor: row.original.status === 'Active' ? '#d4edda' : row.original.status === 'Inactive' ? '#f8d7da' : '#fff3cd',
+        color: row.original.status === 'Active' ? '#155724' : row.original.status === 'Inactive' ? '#721c24' : '#856404',
+        fontSize: '12px'
+      }
+    }, row.original.status)))), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '16px',
+        backgroundColor: '#fff',
+        border: '1px solid #e1e1e1',
+        borderRadius: '8px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("h4", {
+      style: {
+        margin: '0 0 16px 0',
+        color: '#0050ca'
+      }
+    }, "Sub Items"), ((_row$original$subData2 = row.original.subData) === null || _row$original$subData2 === void 0 ? void 0 : _row$original$subData2.length) > 0 ? /*#__PURE__*/_react.default.createElement("ul", {
+      style: {
+        margin: 0,
+        paddingLeft: '20px'
+      }
+    }, row.original.subData.map(item => /*#__PURE__*/_react.default.createElement("li", {
+      key: item.detailId,
+      style: {
+        marginBottom: '8px'
+      }
+    }, item.detailName, " (ID: ", item.detailId, ")"))) : /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: 0,
+        color: '#6c757d',
+        fontStyle: 'italic'
+      }
+    }, "No sub-items"))), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: '16px',
+        display: 'flex',
+        gap: '8px',
+        justifyContent: 'flex-end'
+      }
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: '#0050ca',
+        color: 'white',
+        border: 'none',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("Edit ".concat(row.original.name))
+    }, "Edit User"), /*#__PURE__*/_react.default.createElement("button", {
+      style: {
+        padding: '8px 16px',
+        backgroundColor: 'transparent',
+        color: '#0050ca',
+        border: '1px solid #0050ca',
+        borderRadius: '4px',
+        cursor: 'pointer'
+      },
+      onClick: () => alert("View full profile for ".concat(row.original.name))
+    }, "View Profile")));
+  }
+});
+ExpandedWithRichContent.parameters = {
+  docs: {
+    description: {
+      story: 'A more complex example showing a rich expanded content with multiple panels, styled badges, and action buttons.'
+    }
+  }
+};
+
+// Combined: Row Click + Custom Expanded Content
+const RowClickWithExpandedContent = exports.RowClickWithExpandedContent = Template.bind({});
+RowClickWithExpandedContent.args = {
+  columns: columnsWithActions,
+  data: data,
+  noPagination: false,
+  onRowClick: (rowData, rowIndex) => {
+    console.log('Row clicked (but not triggering anything in this demo)');
+  },
+  renderExpandedContent: (row, toggleExpanded) => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '20px',
+      backgroundColor: '#e3f2fd',
+      borderLeft: '4px solid #0050ca'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: '0 0 12px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Expanded details for:"), " ", row.original.name), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      margin: 0,
+      color: '#666'
+    }
+  }, "Click anywhere on the row to expand/collapse. Buttons work independently."))
+};
+RowClickWithExpandedContent.parameters = {
+  docs: {
+    description: {
+      story: 'Combined example: rows are clickable AND expandable. The onRowClick and renderExpandedContent work together. Buttons inside cells remain independent.'
+    }
+  }
+};
+
+// ============================================
+// HEADER CLICK STORIES: onHeaderClick & renderHeaderContent
+// ============================================
+
+// Basic Header Click - shows alert
+const HeaderClick = exports.HeaderClick = Template.bind({});
+HeaderClick.args = _objectSpread(_objectSpread({}, Default.args), {}, {
+  onHeaderClick: (column, event) => {
+    alert("Header clicked: ".concat(column.id || column.Header));
+  }
+});
+HeaderClick.parameters = {
+  docs: {
+    description: {
+      story: 'Click on any column header to trigger an action. Useful for implementing custom sorting or filtering.'
+    }
+  }
+};
+
+// Header Click with Sort State (External Control)
+const SortableTableDemo = () => {
+  const [sortConfig, setSortConfig] = _react.default.useState({
+    key: null,
+    direction: 'asc'
+  });
+  const [tableData, setTableData] = _react.default.useState(data);
+  const handleHeaderClick = column => {
+    // Skip non-sortable columns (like actions)
+    if (column.id === 'dropdown' || column.id === 'actions') return;
+    let direction = 'asc';
+    if (sortConfig.key === column.id && sortConfig.direction === 'asc') {
+      direction = 'desc';
+    }
+    setSortConfig({
+      key: column.id,
+      direction
+    });
+
+    // Sort the data
+    const sorted = [...data].sort((a, b) => {
+      const aVal = a[column.id];
+      const bVal = b[column.id];
+      if (aVal < bVal) return direction === 'asc' ? -1 : 1;
+      if (aVal > bVal) return direction === 'asc' ? 1 : -1;
+      return 0;
+    });
+    setTableData(sorted);
+  };
+
+  // Add sort indicators to headers
+  const renderHeaderContent = (column, defaultContent) => {
+    // Skip non-sortable columns
+    if (column.id === 'dropdown' || column.id === 'actions') {
+      return defaultContent;
+    }
+    const isSorted = sortConfig.key === column.id;
+    const arrow = isSorted ? sortConfig.direction === 'asc' ? ' ↑' : ' ↓' : '';
+    return /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px'
+      }
+    }, defaultContent, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        opacity: isSorted ? 1 : 0.3
+      }
+    }, isSorted ? arrow : ' ↕'));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Current sort:"), ' ', sortConfig.key ? "".concat(sortConfig.key, " (").concat(sortConfig.direction, ")") : 'None'), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, {
+    columns: columns,
+    data: tableData,
+    noPagination: false,
+    onHeaderClick: handleHeaderClick,
+    renderHeaderContent: renderHeaderContent
+  }));
+};
+const SortableHeaders = exports.SortableHeaders = {
+  render: () => /*#__PURE__*/_react.default.createElement(SortableTableDemo, null),
+  parameters: {
+    docs: {
+      description: {
+        story: 'External sorting controlled by parent component. Click headers to sort. Uses onHeaderClick for the action and renderHeaderContent for the sort indicators.'
+      }
+    }
+  }
+};
+
+// Header with Custom Dropdown Filter
+const FilterableTableDemo = () => {
+  const [filters, setFilters] = _react.default.useState({});
+  const [activeDropdown, setActiveDropdown] = _react.default.useState(null);
+  const [tableData, setTableData] = _react.default.useState(data);
+
+  // Get unique values for a column
+  const getUniqueValues = columnId => {
+    return [...new Set(data.map(row => row[columnId]))];
+  };
+  const handleFilter = (columnId, value) => {
+    const newFilters = _objectSpread({}, filters);
+    if (value === 'all') {
+      delete newFilters[columnId];
+    } else {
+      newFilters[columnId] = value;
+    }
+    setFilters(newFilters);
+    setActiveDropdown(null);
+
+    // Apply filters
+    let filtered = [...data];
+    Object.keys(newFilters).forEach(key => {
+      filtered = filtered.filter(row => row[key] === newFilters[key]);
+    });
+    setTableData(filtered);
+  };
+
+  // Custom header with filter dropdown
+  const renderHeaderContent = (column, defaultContent) => {
+    // Only add filter to specific columns
+    if (!['status'].includes(column.id)) {
+      return defaultContent;
+    }
+    const isActive = activeDropdown === column.id;
+    const hasFilter = filters[column.id];
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        position: 'relative'
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px'
+      },
+      "data-clickable": "true",
+      onClick: e => {
+        e.stopPropagation();
+        setActiveDropdown(isActive ? null : column.id);
+      }
+    }, defaultContent, /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        fontSize: '10px',
+        padding: '2px 6px',
+        borderRadius: '4px',
+        backgroundColor: hasFilter ? '#0050ca' : '#e1e1e1',
+        color: hasFilter ? 'white' : '#666'
+      }
+    }, hasFilter ? '✓' : '▼')), isActive && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        marginTop: '4px',
+        backgroundColor: 'white',
+        border: '1px solid #e1e1e1',
+        borderRadius: '4px',
+        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+        zIndex: 100,
+        minWidth: '120px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        borderBottom: '1px solid #e1e1e1'
+      },
+      onClick: () => handleFilter(column.id, 'all')
+    }, "All"), getUniqueValues(column.id).map(value => /*#__PURE__*/_react.default.createElement("div", {
+      key: value,
+      style: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        backgroundColor: filters[column.id] === value ? '#f0f8ff' : 'transparent'
+      },
+      onClick: () => handleFilter(column.id, value)
+    }, value))));
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Active filters:"), ' ', Object.keys(filters).length > 0 ? Object.entries(filters).map(_ref2 => {
+    let [k, v] = _ref2;
+    return "".concat(k, ": ").concat(v);
+  }).join(', ') : 'None'), /*#__PURE__*/_react.default.createElement(_ReactTable.ReactTable, {
+    columns: columns,
+    data: tableData,
+    noPagination: false,
+    renderHeaderContent: renderHeaderContent
+  }));
+};
+const FilterableHeaders = exports.FilterableHeaders = {
+  render: () => /*#__PURE__*/_react.default.createElement(FilterableTableDemo, null),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Custom filter dropdown in the "Status" header. Click the dropdown icon to filter. Uses renderHeaderContent to add the dropdown UI.'
+      }
+    }
+  }
+};
+
+// Per-Column Header Click Handler
+const columnsWithColumnClick = [{
+  Header: 'ID (Click me!)',
+  accessor: 'id',
+  width: '15%',
+  onHeaderClick: column => {
+    alert('ID column has its own click handler!');
+  }
+}, {
+  Header: 'Name',
+  accessor: 'name',
+  width: '30%'
+}, {
+  Header: 'Status',
+  accessor: 'status',
+  width: '20%'
+}, {
+  Header: 'Actions (No click)',
+  accessor: 'dropdown',
+  width: '35%'
+  // No onHeaderClick - won't trigger global onHeaderClick either
+}];
+const PerColumnHeaderClick = exports.PerColumnHeaderClick = Template.bind({});
+PerColumnHeaderClick.args = {
+  columns: columnsWithColumnClick,
+  data: data,
+  noPagination: false,
+  onHeaderClick: column => {
+    alert("Global header click: ".concat(column.id));
+  }
+};
+PerColumnHeaderClick.parameters = {
+  docs: {
+    description: {
+      story: 'Columns can have their own onHeaderClick handlers. The "ID" column has a custom handler. Other columns use the global onHeaderClick. The "Actions" column has neither.'
+    }
+  }
+};

package/dist/components/Input/Input.js

@@ -7,65 +7,64 @@ exports.default = exports.Input = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Input = require("./Input.styles");
+const _excluded = ["type", "id", "name", "label", "placeholder", "value", "error", "touched", "readOnly", "inverted", "dashboard", "disabled", "inputWrapStyle", "wrapperStyle", "autoHeightLabel", "onChange", "onBlur", "onFocus"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const Input = props => {
   const {
-    type,
-    id,
-    name,
-    label,
-    placeholder,
-    value,
-    error,
-    touched,
-    readOnly,
-    inverted,
-    dashboard,
-    disabled,
-    inputWrapStyle,
-    wrapperStyle,
-    autoHeightLabel
-  } = props;
+      type,
+      id,
+      name,
+      label,
+      placeholder,
+      value,
+      error,
+      touched,
+      readOnly,
+      inverted,
+      dashboard,
+      disabled,
+      inputWrapStyle,
+      wrapperStyle,
+      autoHeightLabel,
+      // Destructure these so they don't get spread to the input
+      onChange: onChangeProp,
+      onBlur: onBlurProp,
+      onFocus: onFocusProp
+    } = props,
+    restProps = _objectWithoutProperties(props, _excluded);
   const [labelUp, setLabelUp] = (0, _react.useState)(false);
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     checkLabel(false);
   }, []);
   (0, _react.useEffect)(() => {
-    checkLabel(false);
-  }, [hasFocus, value]);
+    if (!!value && !labelUp) {
+      checkLabel(false);
+    }
+  }, [labelUp, value]);
   (0, _react.useEffect)(() => {
     if (value && !labelUp) setLabelUp(true);
   }, [value, labelUp]);
   const onBlur = (e, field) => {
-    const {
-      onBlur
-    } = props;
-
     // formik handler MUST be called before our logic !
-    onBlur && onBlur(e, field);
+    onBlurProp && onBlurProp(e, field);
 
     // our logic follows
     checkLabel(false);
   };
   const onFocus = (e, field) => {
-    const {
-      onFocus
-    } = props;
-
     // formik handler MUST be called before our logic !
-    onFocus && onFocus(e, field);
+    onFocusProp && onFocusProp(e, field);
 
     // our logic follows
     checkLabel(true);
   };
   const onChange = (e, field) => {
-    const {
-      onChange
-    } = props;
-    onChange && onChange(e, field); // formik handler
+    onChangeProp && onChangeProp(e, field); // formik handler
   };
   const checkLabel = focus => {
     setHasFocus(focus);
@@ -96,11 +95,12 @@ const Input = props => {
     onFocus: onFocus,
     readOnly: readOnly,
     placeholder: placeholder,
+    disabled: disabled,
     style: {
       WebkitAppearance: 'none',
       WebkitBorderRadius: 0
     }
-  }, props))));
+  }, restProps))));
 };
 exports.Input = Input;
 Input.propTypes = {