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

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 = {

package/dist/components/Input/Input.stories.js

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.InputLabeled = exports.InputFilled = exports.InputFillInverted = exports.InputEmpty = void 0;
+exports.default = exports.InputLabeled = exports.InputFilled = exports.InputFillInverted = exports.InputEmpty = exports.AllStates = void 0;
 var _viewport = require("storybook/viewport");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Input = require("./Input");
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
 var _global = _interopRequireDefault(require("../../styles/global"));
 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); }
 var _default = exports.default = {
   title: 'Components Library/Inputs/Input',
   component: _Input.Input,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null)))],
   argTypes: {
     type: {
       type: 'string'
@@ -79,8 +82,19 @@ var _default = exports.default = {
       defaultViewport: 'resetviewport'
     }
   }
+}; // Controlled wrapper for interactive stories
+const ControlledInput = props => {
+  const [value, setValue] = (0, _react.useState)(props.value || '');
+  return /*#__PURE__*/_react.default.createElement(_Input.Input, _extends({}, props, {
+    value: value,
+    onChange: e => {
+      var _props$onChange;
+      setValue(e.target.value);
+      (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e);
+    }
+  }));
 };
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Input.Input, args)));
+const Template = args => /*#__PURE__*/_react.default.createElement(ControlledInput, args);
 
 //trying to integrate state:
 // const Template = args => {
@@ -135,8 +149,69 @@ InputEmpty.parameters = {
   }
 };
 
-//doublecheck:
-
-// state?
-// make error true version?
-// why can I not fill in the input in storybook on page? not important?
+// All states example
+const AllStates = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('Filled value');
+  const [value3, setValue3] = (0, _react.useState)('');
+  const [value4, setValue4] = (0, _react.useState)('Error text');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '32px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Empty - Click to see blue label on focus"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    id: "empty",
+    name: "empty",
+    label: "Empty Input",
+    value: value1,
+    onChange: e => setValue1(e.target.value)
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "With value"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    id: "filled",
+    name: "filled",
+    label: "Filled Input",
+    value: value2,
+    onChange: e => setValue2(e.target.value)
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    id: "disabled",
+    name: "disabled",
+    label: "Disabled Input",
+    value: "Cannot edit",
+    disabled: true,
+    onChange: () => {}
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '12px',
+      color: '#666'
+    }
+  }, "Error state"), /*#__PURE__*/_react.default.createElement(_Input.Input, {
+    id: "error",
+    name: "error",
+    label: "Error Input",
+    value: value4,
+    onChange: e => setValue4(e.target.value),
+    error: true,
+    touched: true
+  })));
+};
+exports.AllStates = AllStates;

package/dist/components/Input/Select.js

@@ -7,9 +7,10 @@ exports.default = exports.Select = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _creatable = _interopRequireDefault(require("react-select/creatable"));
 var _Input = require("./Input.styles");
 var _Select = require("./Select.styles");
-const _excluded = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight"];
+const _excluded = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight", "creatable", "formatCreateLabel"];
 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); }
@@ -59,7 +60,9 @@ const Select = props => {
       touched,
       value,
       disabled,
-      menuHeight
+      menuHeight,
+      creatable,
+      formatCreateLabel
     } = props,
     otherProps = _objectWithoutProperties(props, _excluded);
   const [labelUp, setLabelUp] = (0, _react.useState)(!!value);
@@ -72,7 +75,7 @@ const Select = props => {
       name,
       value
     });
-    if (search) {
+    if (search || creatable) {
       setHasFocus(true);
     }
   };
@@ -94,12 +97,46 @@ const Select = props => {
       setHasFocus(true);
     }, 1);
   };
+
+  // Choose component based on creatable prop
+  const SelectComponent = creatable ? _creatable.default : _reactSelect.default;
+
+  // Common styles for both components
+  const selectStyles = {
+    control: () => _Select.SelectControl,
+    menu: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+      marginTop: 0,
+      zIndex: 1000,
+      SelectMenu: _Select.SelectMenu
+    }),
+    option: (baseStyle, state) => _objectSpread({
+      fontWeight: state.isSelected || state.isFocused ? 'bold' : 'normal',
+      cursor: 'pointer'
+    }, _Select.SelectOption),
+    selectContainer: () => _Select.SelectContainer,
+    valueContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+      padding: 0
+    })
+  };
+
+  // Common components for both
+  const selectComponents = {
+    DropdownIndicator,
+    IndicatorSeparator: null,
+    MenuList: SelectMenuListWithScroll
+  };
+
+  // Get current value - for creatable, also check if value exists even if not in options
+  const currentValue = creatable ? (options === null || options === void 0 ? void 0 : options.find(option => option.value === value)) || (value ? {
+    value,
+    label: value
+  } : null) : options === null || options === void 0 ? void 0 : options.find(option => option.value === value);
   return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
     isUp: labelUp,
     active: hasFocus,
     error: error && touched,
     htmlFor: id
-  }, label), /*#__PURE__*/_react.default.createElement(_reactSelect.default, _extends({}, otherProps, {
+  }, label), /*#__PURE__*/_react.default.createElement(SelectComponent, _extends({}, otherProps, {
     id: id,
     name: name,
     options: options,
@@ -107,32 +144,14 @@ const Select = props => {
     onChange: onChange,
     onBlur: onBlur,
     onFocus: onFocus,
-    value: options === null || options === void 0 ? void 0 : options.find(option => option.value === value),
+    value: currentValue,
     placeholder: "",
-    isSearchable: search,
+    isSearchable: creatable || search,
     maxMenuHeight: menuHeight,
-    styles: {
-      control: () => _Select.SelectControl,
-      menu: (baseStyle, state) => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        marginTop: 0,
-        zIndex: 1000,
-        SelectMenu: _Select.SelectMenu
-      }),
-      option: (baseStyle, state) => _objectSpread({
-        fontWeight: state.isSelected || state.isFocused ? 'bold' : 'normal',
-        cursor: 'pointer'
-      }, _Select.SelectOption),
-      selectContainer: () => _Select.SelectContainer,
-      valueContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        padding: 0
-        //marginLeft: '-2px',
-      })
-    },
-    components: {
-      DropdownIndicator,
-      IndicatorSeparator: null,
-      MenuList: SelectMenuListWithScroll
-    }
+    styles: selectStyles,
+    components: selectComponents
+  }, creatable && {
+    formatCreateLabel: formatCreateLabel || (inputValue => "Create \"".concat(inputValue, "\""))
   })));
 };
 exports.Select = Select;
@@ -149,6 +168,8 @@ Select.propTypes = {
     label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
   })).isRequired,
   search: _propTypes.default.bool,
+  creatable: _propTypes.default.bool,
+  formatCreateLabel: _propTypes.default.func,
   onChange: _propTypes.default.func,
   onBlur: _propTypes.default.func,
   onFocus: _propTypes.default.func
@@ -157,6 +178,8 @@ Select.defaultProps = {
   label: '',
   value: '',
   search: false,
+  creatable: false,
+  formatCreateLabel: null,
   error: false,
   touched: false,
   onChange: () => {},