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

package/dist/components/Input/MultiSelect.js

@@ -13,7 +13,7 @@ var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _checkIcon = require("../../static/images/check-icon.svg");
 var _Select = require("./Select.styles");
 const _excluded = ["children", "selectProps"],
-  _excluded2 = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight", "placeholder", "showCheckboxes", "showCountBadge", "closeMenuOnSelect", "hideSelectedOptions"];
+  _excluded2 = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight", "placeholder", "showCheckboxes", "showCountBadge", "closeMenuOnSelect", "hideSelectedOptions", "width", "minMenuWidth", "maxMenuWidth"];
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -39,7 +39,7 @@ const Checkbox = _styledComponents.default.div.withConfig({
 const OptionLabel = _styledComponents.default.span.withConfig({
   displayName: "MultiSelect__OptionLabel",
   componentId: "sc-1udb3q8-3"
-})(["font-size:14px;color:", ";font-weight:400;letter-spacing:0.6px;"], _colors.default.black);
+})(["font-size:14px;color:", ";font-weight:400;letter-spacing:0.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;"], _colors.default.black);
 const PlaceholderText = _styledComponents.default.span.withConfig({
   displayName: "MultiSelect__PlaceholderText",
   componentId: "sc-1udb3q8-4"
@@ -125,7 +125,10 @@ const MultiSelect = props => {
       showCheckboxes = true,
       showCountBadge = true,
       closeMenuOnSelect = false,
-      hideSelectedOptions = false
+      hideSelectedOptions = false,
+      width,
+      minMenuWidth = 150,
+      maxMenuWidth = 300
     } = props,
     otherProps = _objectWithoutProperties(props, _excluded2);
   const hasValue = (value === null || value === void 0 ? void 0 : value.length) > 0;
@@ -164,7 +167,11 @@ const MultiSelect = props => {
 
   // Get selected options from value array
   const selectedOptions = options === null || options === void 0 ? void 0 : options.filter(option => value === null || value === void 0 ? void 0 : value.includes(option.value));
-  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
+  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, {
+    style: {
+      width: width || 'auto'
+    }
+  }, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
     isUp: labelUp,
     active: hasFocus,
     error: error && touched,
@@ -206,7 +213,10 @@ const MultiSelect = props => {
         borderRadius: '8px',
         boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
         border: "1px solid ".concat(_colors.default.lightGrey),
-        overflow: 'hidden'
+        overflow: 'hidden',
+        minWidth: minMenuWidth,
+        maxWidth: maxMenuWidth,
+        width: 'auto'
       }),
       menuList: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
         padding: 0
@@ -219,6 +229,9 @@ const MultiSelect = props => {
         color: _colors.default.black,
         cursor: 'pointer',
         fontWeight: state.isSelected ? 600 : 400,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
         '&:active': {
           backgroundColor: _colors.default.grey
         }
@@ -239,7 +252,15 @@ const MultiSelect = props => {
         padding: 0
       }),
       indicatorsContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
-        paddingLeft: '8px'
+        padding: 0,
+        gap: '4px'
+      }),
+      dropdownIndicator: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: '4px'
+      }),
+      clearIndicator: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: '4px'
+        // display: 'none',
       })
     },
     components: {
@@ -272,7 +293,10 @@ MultiSelect.propTypes = {
   showCheckboxes: _propTypes.default.bool,
   showCountBadge: _propTypes.default.bool,
   closeMenuOnSelect: _propTypes.default.bool,
-  hideSelectedOptions: _propTypes.default.bool
+  hideSelectedOptions: _propTypes.default.bool,
+  width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  minMenuWidth: _propTypes.default.number,
+  maxMenuWidth: _propTypes.default.number
 };
 MultiSelect.defaultProps = {
   label: '',
@@ -287,6 +311,9 @@ MultiSelect.defaultProps = {
   showCheckboxes: true,
   showCountBadge: true,
   closeMenuOnSelect: false,
-  hideSelectedOptions: false
+  hideSelectedOptions: false,
+  width: undefined,
+  minMenuWidth: 150,
+  maxMenuWidth: 300
 };
 var _default = exports.default = MultiSelect;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutCheckboxes = exports.WithPreselectedValues = exports.WithManyOptions = exports.MultipleFilters = exports.Disabled = exports.Default = void 0;
+exports.default = exports.WithoutCheckboxes = exports.WithPreselectedValues = exports.WithManyOptions = exports.MultipleFilters = exports.Disabled = exports.Default = exports.CustomWidth = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _MultiSelect = require("./MultiSelect");
 var _global = _interopRequireDefault(require("../../styles/global"));
@@ -195,4 +195,70 @@ const Disabled = () => /*#__PURE__*/_react.default.createElement(ControlledMulti
   value: ['initiated'],
   disabled: true
 });
-exports.Disabled = Disabled;
+
+// Custom width - narrow select with wider menu
+exports.Disabled = Disabled;
+const CustomWidth = () => {
+  const longOptions = [{
+    key: 'opt1',
+    value: 'opt1',
+    label: 'Very Long Option Name Here'
+  }, {
+    key: 'opt2',
+    value: 'opt2',
+    label: 'Another Long Option'
+  }, {
+    key: 'opt3',
+    value: 'opt3',
+    label: 'Short'
+  }, {
+    key: 'opt4',
+    value: 'opt4',
+    label: 'Medium Length Option'
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Narrow select (80px), menu expands (150-250px)"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "narrow",
+    name: "narrow",
+    placeholder: "Filter",
+    options: longOptions,
+    width: 80,
+    minMenuWidth: 150,
+    maxMenuWidth: 250
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Fixed width (200px)"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "fixed",
+    name: "fixed",
+    placeholder: "Status",
+    options: statusOptions,
+    width: "200px"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Wide menu (up to 400px) for long text"), /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "wide",
+    name: "wide",
+    placeholder: "Select",
+    options: longOptions,
+    width: 120,
+    minMenuWidth: 200,
+    maxMenuWidth: 400
+  })));
+};
+exports.CustomWidth = CustomWidth;

package/dist/components/Input/SearchInput.js

@@ -7,7 +7,7 @@ exports.default = exports.SearchInput = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _SearchInput = require("./SearchInput.styles");
 var _searchIcon = require("../../static/images/search-icon.svg");
-const _excluded = ["value", "onChange", "placeholder", "icon", "showIcon", "disabled", "onFocus", "onBlur", "className", "containerStyle", "inputStyle", "iconStyle", "id", "name", "aria-label", "aria-describedby"];
+const _excluded = ["value", "onChange", "placeholder", "icon", "showIcon", "disabled", "variant", "onFocus", "onBlur", "className", "containerStyle", "inputStyle", "iconStyle", "id", "name", "aria-label", "aria-describedby"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
@@ -20,6 +20,8 @@ const SearchInput = _ref => {
       icon,
       showIcon = true,
       disabled = false,
+      variant = 'filled',
+      // 'filled' or 'outlined'
       onFocus,
       onBlur,
       className,
@@ -53,7 +55,8 @@ const SearchInput = _ref => {
     className: className,
     style: containerStyle
   }, /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputWrapper, {
-    disabled: disabled
+    disabled: disabled,
+    variant: variant
   }, showIcon && /*#__PURE__*/_react.default.createElement(_SearchInput.SearchIconWrapper, {
     style: iconStyle
   }, icon || /*#__PURE__*/_react.default.createElement(_searchIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputField, _extends({

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutIcon = exports.WithInitialValue = exports.WithCustomIcon = exports.LongText = exports.Disabled = exports.DifferentWidths = exports.Default = exports.CustomStyling = exports.CustomPlaceholder = exports.AllStates = exports.AccessibilityExample = void 0;
+exports.default = exports.WithoutIcon = exports.WithInitialValue = exports.WithCustomIcon = exports.Variants = exports.Outlined = exports.LongText = exports.Disabled = exports.DifferentWidths = exports.Default = exports.CustomStyling = exports.CustomPlaceholder = exports.AllStates = exports.AccessibilityExample = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _SearchInput = _interopRequireDefault(require("./SearchInput"));
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
@@ -28,6 +28,14 @@ var _default = exports.default = {
       description: 'Placeholder text',
       defaultValue: 'Search'
     },
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: ['filled', 'outlined'],
+      description: 'Visual variant of the input',
+      defaultValue: 'filled'
+    },
     showIcon: {
       control: 'boolean',
       description: 'Show/hide the search icon',
@@ -276,7 +284,61 @@ AccessibilityExample.decorators = [Story => /*#__PURE__*/_react.default.createEl
   }
 }, "Use this search to find products by name, category, or description."))];
 
+// Outlined variant
+const Outlined = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search",
+    variant: "outlined"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Both variants side by side
+exports.Outlined = Outlined;
+const Variants = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Filled (default)"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search",
+    variant: "filled"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Outlined"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search",
+    variant: "outlined"
+  })));
+};
+
 // Custom styling
+exports.Variants = Variants;
 const CustomStyling = () => {
   const [value, setValue] = (0, _react.useState)('');
   return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {

package/dist/components/Input/SearchInput.styles.js

@@ -14,7 +14,7 @@ const SearchInputContainer = exports.SearchInputContainer = _styledComponents.de
 const SearchInputWrapper = exports.SearchInputWrapper = _styledComponents.default.div.withConfig({
   displayName: "SearchInputstyles__SearchInputWrapper",
   componentId: "sc-dcxztv-1"
-})(["position:relative;display:flex;align-items:center;width:100%;background-color:", ";border-radius:8px;padding:0 16px;min-height:40px;transition:background-color 0.2s ease;", " &:focus-within{background-color:", ";box-shadow:0 0 0 2px ", ";}"], _colors.default.grey3, props => props.disabled && "\n    opacity: 0.6;\n    cursor: not-allowed;\n  ", _colors.default.white, _colors.default.lightGrey);
+})(["position:relative;display:flex;align-items:center;width:100%;border-radius:8px;padding:0 16px;min-height:40px;transition:all 0.2s ease;background-color:", ";border:", ";", " &:focus-within{background-color:", ";border-color:", ";box-shadow:", ";}&:hover{border-color:", ";}"], props => props.variant === 'outlined' ? 'transparent' : _colors.default.grey3, props => props.variant === 'outlined' ? "1px solid ".concat(_colors.default.lightGrey) : '1px solid transparent', props => props.disabled && "\n    opacity: 0.6;\n    cursor: not-allowed;\n  ", props => props.variant === 'outlined' ? 'transparent' : _colors.default.white, props => props.variant === 'outlined' ? _colors.default.grey2 : 'transparent', props => props.variant === 'outlined' ? 'none' : "0 0 0 2px ".concat(_colors.default.lightGrey), props => props.variant === 'outlined' ? _colors.default.grey2 : 'transparent');
 const SearchIconWrapper = exports.SearchIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "SearchInputstyles__SearchIconWrapper",
   componentId: "sc-dcxztv-2"

package/dist/components/StepsProgress/StepIndicator.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StepIndicator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _StepIndicator = require("./StepIndicator.styles");
@@ -40,6 +40,7 @@ const StepIndicator = _ref => {
     }));
   }));
 };
+exports.StepIndicator = StepIndicator;
 StepIndicator.propTypes = {
   steps: _propTypes.default.arrayOf(_propTypes.default.shape({
     id: _propTypes.default.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.65-beta.6",
+  "version": "2.3.65-beta.7",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",