flipper-ui 0.25.1 → 0.25.4

package/core/PinInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface PinInputGridProps {
+    pin: Array<number | undefined>;
+    setPin: (pin: Array<number | undefined>) => void;
+    onPinChanged: (pinEntry: number | undefined, index: number) => void;
+    pinLength: number;
+    validationResult: boolean | undefined;
+    isValidating: boolean;
+    size: 'small' | 'large';
+    style?: React.CSSProperties;
+    inputProps?: React.CSSProperties;
+    variant?: 'outlined' | 'standard';
+}
+declare const PinInput: React.FC<PinInputGridProps>;
+export default PinInput;

package/core/PinInput.js

@@ -0,0 +1,202 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+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 _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var Container = _styledComponents["default"].div(_templateObject());
+
+var removeValuesFromArray = function removeValuesFromArray(valuesArray, value) {
+  var valueIndex = valuesArray.findIndex(function (entry) {
+    return entry === value;
+  });
+
+  if (valueIndex === -1) {
+    return;
+  }
+
+  valuesArray.splice(valueIndex, 1);
+};
+
+var PIN_MIN_VALUE = 0;
+var PIN_MAX_VALUE = 9;
+var BACKSPACE_KEY = 'Backspace';
+
+var PinInput = function PinInput(_ref) {
+  var pinLength = _ref.pinLength,
+      pin = _ref.pin,
+      setPin = _ref.setPin,
+      onPinChanged = _ref.onPinChanged,
+      validationResult = _ref.validationResult,
+      isValidating = _ref.isValidating,
+      size = _ref.size,
+      styleProps = _ref.style,
+      inputProps = _ref.inputProps,
+      variant = _ref.variant;
+  var inputRefs = (0, _react.useRef)([]);
+
+  var changePinFocus = function changePinFocus(pinIndex) {
+    var ref = inputRefs.current[pinIndex];
+
+    if (ref) {
+      ref.focus();
+    }
+  };
+
+  (0, _react.useEffect)(function () {
+    changePinFocus(0);
+  }, [isValidating]);
+
+  var onPaste = function onPaste(event) {
+    var pastedValue = event.clipboardData.getData('text/plain');
+    var splitValues = pastedValue.split('');
+    var intValues = [];
+
+    var _iterator = _createForOfIteratorHelper(splitValues),
+        _step;
+
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var value = _step.value;
+        intValues.push(parseInt(value));
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+
+    setPin(intValues);
+    changePinFocus(intValues.length - 1);
+  };
+
+  var _onChange = function onChange(event, index) {
+    if (event.target.value.length > 1) {
+      return;
+    }
+
+    var previousValue = event.target.defaultValue;
+    var valuesArray = event.target.value.split('');
+    removeValuesFromArray(valuesArray, previousValue);
+    var value = valuesArray.pop();
+
+    if (!value) {
+      return;
+    }
+
+    var pinNumber = Number(value.trim());
+
+    if (isNaN(pinNumber) || value.length === 0) {
+      return;
+    }
+
+    if (pinNumber >= PIN_MIN_VALUE && pinNumber <= PIN_MAX_VALUE) {
+      onPinChanged(pinNumber, index);
+
+      if (index < pinLength - 1) {
+        changePinFocus(index + 1);
+      }
+    }
+  };
+
+  var _onKeyDown = function onKeyDown(event, index) {
+    var keyboardKeyCode = event.nativeEvent.code;
+
+    if (keyboardKeyCode !== BACKSPACE_KEY) {
+      return;
+    }
+
+    if (pin[index] === undefined) {
+      changePinFocus(index - 1);
+    } else {
+      onPinChanged(undefined, index);
+    }
+  };
+
+  var useStyleProps = function useStyleProps() {
+    var style = _objectSpread({
+      width: size === 'small' ? '40px' : '40px',
+      height: size === 'small' ? '30px' : '40px',
+      marginInline: size === 'small' ? '5px' : '10px'
+    }, styleProps);
+
+    return style;
+  };
+
+  var useInputProps = function useInputProps() {
+    var style = _objectSpread({
+      width: size === 'small' ? '40px' : '45px',
+      textAlign: 'center',
+      fontWeight: 'bold',
+      fontSize: size === 'small' ? '16px' : '20px',
+      padding: 'auto'
+    }, inputProps);
+
+    return style;
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Container, null, Array.from({
+    length: pinLength
+  }, function (_, index) {
+    return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+      disabled: isValidating,
+      variant: variant || 'outlined',
+      onKeyDown: function onKeyDown(event) {
+        return _onKeyDown(event, index);
+      },
+      onPaste: onPaste,
+      color: "primary",
+      error: validationResult,
+      style: useStyleProps(),
+      InputProps: {
+        style: useInputProps()
+      },
+      inputRef: function inputRef(el) {
+        inputRefs.current[index] = el;
+      },
+      key: index,
+      onChange: function onChange(event) {
+        _onChange(event, index);
+      },
+      value: pin[index] || ''
+    });
+  })));
+};
+
+var _default = PinInput;
+exports["default"] = _default;

package/core/TextField.d.ts

@@ -26,6 +26,8 @@ export interface TextFieldProps extends DefaultProps {
     rowsMax?: string | number;
     helperText?: ReactNode;
     helperIcon?: ReactNode;
+    hasClear?: boolean;
+    onClear?: () => void;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -35,8 +37,9 @@ export interface TextFieldProps extends DefaultProps {
 interface IHelperProps extends Pick<TextFieldProps, 'helperIcon'> {
     onHelperClick: (event: MouseEvent<HTMLButtonElement>) => void;
 }
-export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
 export declare const TextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StaticTextFieldWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const useStyles: (props?: any) => Record<"input" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline" | "iconOutlined", string>;
 export declare const HelperBox: (props: IHelperProps) => JSX.Element;
 declare const TextField: FC<TextFieldProps>;
 export default TextField;

package/core/TextField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.HelperBox = exports.TextFieldWrapper = exports.useStyles = void 0;
+exports["default"] = exports.HelperBox = exports.useStyles = exports.StaticTextFieldWrapper = exports.TextFieldWrapper = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,15 +15,21 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
+var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
+
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
 
+var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
+
 var _styles = require("@material-ui/core/styles");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _Clear = _interopRequireDefault(require("@material-ui/icons/Clear"));
+
 var _Help = _interopRequireDefault(require("@material-ui/icons/Help"));
 
-var _IconButton = _interopRequireDefault(require("./IconButton"));
+var _IconButton2 = _interopRequireDefault(require("./IconButton"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -31,8 +37,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+function _templateObject3() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n"]);
+
+  _templateObject3 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;  \n    }\n    :hover button {\n        display: flex;\n    }\n"]);
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -51,6 +67,15 @@ function _templateObject() {
   return data;
 }
 
+var Helper = _styledComponents["default"].div(_templateObject());
+
+var TextFieldWrapper = _styledComponents["default"].div(_templateObject2());
+
+exports.TextFieldWrapper = TextFieldWrapper;
+
+var StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject3());
+
+exports.StaticTextFieldWrapper = StaticTextFieldWrapper;
 var useStyles = (0, _styles.makeStyles)({
   input: {
     fontSize: '14px',
@@ -75,14 +100,8 @@ var useStyles = (0, _styles.makeStyles)({
 });
 exports.useStyles = useStyles;
 
-var Helper = _styledComponents["default"].div(_templateObject());
-
-var TextFieldWrapper = _styledComponents["default"].div(_templateObject2());
-
-exports.TextFieldWrapper = TextFieldWrapper;
-
 var HelperBox = function HelperBox(props) {
-  return /*#__PURE__*/_react["default"].createElement(Helper, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+  return /*#__PURE__*/_react["default"].createElement(Helper, null, /*#__PURE__*/_react["default"].createElement(_IconButton2["default"], {
     padding: "6px 2px",
     onClick: props.onHelperClick
   }, props.helperIcon || /*#__PURE__*/_react["default"].createElement(_Help["default"], {
@@ -92,6 +111,19 @@ var HelperBox = function HelperBox(props) {
 
 exports.HelperBox = HelperBox;
 
+var renderEndAdornment = function renderEndAdornment(onClear) {
+  return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], {
+    position: "end"
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    onClick: onClear,
+    size: "small"
+  }, /*#__PURE__*/_react["default"].createElement(_Clear["default"], {
+    style: {
+      fontSize: '15px'
+    }
+  })));
+};
+
 var TextField = function TextField(_ref) {
   var margin = _ref.margin,
       padding = _ref.padding,
@@ -111,8 +143,22 @@ var TextField = function TextField(_ref) {
       onHelperClick = _ref.onHelperClick,
       helperIcon = _ref.helperIcon,
       fullWidth = _ref.fullWidth,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref, ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth"]);
+      hasClear = _ref.hasClear,
+      onClear = _ref.onClear,
+      otherProps = (0, _objectWithoutProperties2["default"])(_ref, ["margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear"]);
+  var clearStyle = (0, _styles.makeStyles)({
+    iconOutlined: {
+      position: 'relative',
+      right: '2px',
+      marginLeft: '-20px'
+    }
+  });
+  var hasValue = !!otherProps.value;
+  var endAdornment = hasValue && hasClear ? {
+    endAdornment: renderEndAdornment(onClear)
+  } : {};
   var classes = useStyles();
+  var clearClass = clearStyle();
 
   var handleClick = function handleClick() {
     if (onHelperClick) {
@@ -120,7 +166,8 @@ var TextField = function TextField(_ref) {
     }
   };
 
-  return /*#__PURE__*/_react["default"].createElement(TextFieldWrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+  var Wrapper = hasClear ? StaticTextFieldWrapper : TextFieldWrapper;
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
     fullWidth: fullWidth,
     autoComplete: autoComplete,
     error: error,
@@ -140,11 +187,11 @@ var TextField = function TextField(_ref) {
         multiline: variant === 'outlined' ? classes.outlinedMultiline : ''
       }
     }, InputProps),
-    SelectProps: _objectSpread({
+    SelectProps: _objectSpread(_objectSpread({
       classes: {
-        iconOutlined: classes.iconOutlined
+        iconOutlined: hasClear ? clearClass.iconOutlined : classes.iconOutlined
       }
-    }, SelectProps)
+    }, endAdornment), SelectProps)
   }, otherProps)), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick

package/index.d.ts

@@ -57,3 +57,4 @@ export { default as Tooltip } from './core/Tooltip';
 export { default as Tree } from './core/Tree';
 export { default as Typography } from './core/Typography';
 export { default as Zoom } from './core/Zoom';
+export { default as PinInput } from './core/PinInput';

package/index.js

@@ -359,6 +359,12 @@ Object.defineProperty(exports, "Zoom", {
     return _Zoom["default"];
   }
 });
+Object.defineProperty(exports, "PinInput", {
+  enumerable: true,
+  get: function get() {
+    return _PinInput["default"];
+  }
+});
 
 var _Advertise = _interopRequireDefault(require("./core/Advertise"));
 
@@ -476,4 +482,6 @@ var _Tree = _interopRequireDefault(require("./core/Tree"));
 
 var _Typography = _interopRequireDefault(require("./core/Typography"));
 
-var _Zoom = _interopRequireDefault(require("./core/Zoom"));
+var _Zoom = _interopRequireDefault(require("./core/Zoom"));
+
+var _PinInput = _interopRequireDefault(require("./core/PinInput"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.25.1",
+    "version": "0.25.4",
     "description": "",
     "main": "dist/index.js",
     "homepage": "https://flipper-ui.vercel.app",

package/stories/PinInput.stories.js

@@ -0,0 +1,163 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Large = exports.Default = exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _PinInput = _interopRequireDefault(require("../core/PinInput"));
+
+var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+function _templateObject2() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-top: 3rem;\n"]);
+
+  _templateObject2 = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject() {
+  var data = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-bottom: 2rem;\n"]);
+
+  _templateObject = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+
+var _default = {
+  title: 'PinInput',
+  component: _PinInput["default"]
+};
+exports["default"] = _default;
+
+var ValidateContainer = _styledComponents["default"].div(_templateObject());
+
+var ButtonContainer = _styledComponents["default"].div(_templateObject2());
+
+var PIN_LENGTH = 6;
+
+var Default = function Default() {
+  var _useState = (0, _react.useState)(new Array(PIN_LENGTH)),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      pin = _useState2[0],
+      setPin = _useState2[1];
+
+  var onPinChanged = function onPinChanged(pinEntry, index) {
+    var newPin = (0, _toConsumableArray2["default"])(pin);
+    newPin[index] = pinEntry;
+    setPin(newPin);
+  };
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      hasError = _useState4[0],
+      setHasError = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isValidating = _useState6[0],
+      setIsValidating = _useState6[1];
+
+  var handleValidation = function handleValidation() {
+    setIsValidating(true);
+
+    if (pin.join('') !== '123123') {
+      setHasError(true);
+      setPin(new Array(PIN_LENGTH));
+    } else {
+      setHasError(false);
+      alert('PIN is correct');
+    }
+
+    setIsValidating(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ValidateContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, "Valid pin: 123123")), /*#__PURE__*/_react["default"].createElement(_PinInput["default"], {
+    pin: pin,
+    setPin: setPin,
+    onPinChanged: onPinChanged,
+    pinLength: PIN_LENGTH,
+    validationResult: hasError,
+    isValidating: isValidating,
+    size: "small",
+    variant: "outlined"
+  }), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      handleValidation();
+    }
+  }, "Validate")));
+};
+
+exports.Default = Default;
+
+var Large = function Large() {
+  var _useState7 = (0, _react.useState)(new Array(PIN_LENGTH)),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      pin = _useState8[0],
+      setPin = _useState8[1];
+
+  var onPinChanged = function onPinChanged(pinEntry, index) {
+    var newPin = (0, _toConsumableArray2["default"])(pin);
+    newPin[index] = pinEntry;
+    setPin(newPin);
+  };
+
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      hasError = _useState10[0],
+      setHasError = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      isValidating = _useState12[0],
+      setIsValidating = _useState12[1];
+
+  var handleValidation = function handleValidation() {
+    setIsValidating(true);
+
+    if (pin.join('') !== '123123') {
+      setPin(new Array(PIN_LENGTH));
+      setHasError(true);
+    } else {
+      setHasError(false);
+      alert('PIN is correct');
+    }
+
+    setIsValidating(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ValidateContainer, null, /*#__PURE__*/_react["default"].createElement("span", null, "Valid pin: 123123")), /*#__PURE__*/_react["default"].createElement(_PinInput["default"], {
+    pin: pin,
+    setPin: setPin,
+    onPinChanged: onPinChanged,
+    pinLength: PIN_LENGTH,
+    validationResult: hasError,
+    isValidating: isValidating,
+    size: "large"
+  }), /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: function onClick() {
+      handleValidation();
+    }
+  }, "Validate")));
+};
+
+exports.Large = Large;

package/stories/TextField.stories.js

@@ -1,13 +1,17 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withSelect = exports.withHelperButton = exports.withInputAdornment = exports.Default = exports["default"] = void 0;
+exports.withSelectAndClear = exports.withSelect = exports.withHelperButton = exports.withInputAdornment = exports.Default = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _TextField = _interopRequireDefault(require("../core/TextField"));
 
@@ -97,4 +101,51 @@ var withSelect = function withSelect() {
   })));
 };
 
-exports.withSelect = withSelect;
+exports.withSelect = withSelect;
+
+var withSelectAndClear = function withSelectAndClear() {
+  var _useState = (0, _react.useState)('fable'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var onClear = function onClear() {
+    setValue('');
+  };
+
+  var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    select: true,
+    value: value,
+    hasClear: true,
+    onClear: onClear,
+    onChange: handleChange
+  }, [{
+    label: null,
+    value: ''
+  }, {
+    label: 'Elm',
+    value: 'elm'
+  }, {
+    label: 'ReasonML',
+    value: 'reasonml'
+  }, {
+    label: 'Purescript',
+    value: 'purescript'
+  }, {
+    label: 'Fable',
+    value: 'fable'
+  }].map(function (_ref3) {
+    var label = _ref3.label,
+        value = _ref3.value;
+    return /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      key: value,
+      value: value
+    }, label);
+  })));
+};
+
+exports.withSelectAndClear = withSelectAndClear;