@orfium/ictinus 4.65.0 → 4.66.0

package/dist/components/Filter/components/SingleFilter/components/SearchInput/SearchInput.style.js

@@ -0,0 +1,34 @@
+"use strict";
+
+exports.__esModule = true;
+exports.iconWrapper = exports.textFieldWrapper = void 0;
+
+var _react = require("@emotion/react");
+
+var _utils = require("../../../../../../theme/utils");
+
+var textFieldWrapper = function textFieldWrapper() {
+  return function (theme) {
+    return (
+      /*#__PURE__*/
+
+      /*#__PURE__*/
+      (0, _react.css)("border-bottom:1px solid ", theme.utils.getColor('lightGrey', 250), ";div:first-of-type{outline:none;border:none;box-shadow:none;background-color:white;}input{border:none;&:focus{outline:none;border:none;box-shadow:none;}}" + (process.env.NODE_ENV === "production" ? "" : ";label:textFieldWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZpbHRlci9jb21wb25lbnRzL1NpbmdsZUZpbHRlci9jb21wb25lbnRzL1NlYXJjaElucHV0L1NlYXJjaElucHV0LnN0eWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUkyRCIsImZpbGUiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9GaWx0ZXIvY29tcG9uZW50cy9TaW5nbGVGaWx0ZXIvY29tcG9uZW50cy9TZWFyY2hJbnB1dC9TZWFyY2hJbnB1dC5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAndGhlbWUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5leHBvcnQgY29uc3QgdGV4dEZpZWxkV3JhcHBlciA9ICgpID0+ICh0aGVtZTogVGhlbWUpID0+IGNzc2BcbiAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDI1MCl9O1xuXG4gIGRpdjpmaXJzdC1vZi10eXBlIHtcbiAgICBvdXRsaW5lOiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICB9XG5cbiAgaW5wdXQge1xuICAgIGJvcmRlcjogbm9uZTtcblxuICAgICY6Zm9jdXMge1xuICAgICAgb3V0bGluZTogbm9uZTtcbiAgICAgIGJvcmRlcjogbm9uZTtcbiAgICAgIGJveC1zaGFkb3c6IG5vbmU7XG4gICAgfVxuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgaWNvbldyYXBwZXIgPSAoKSA9PiAoKSA9PiBjc3NgXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGdhcDogJHtyZW0oMjUpfTtcbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:textFieldWrapper;")
+    );
+  };
+};
+
+exports.textFieldWrapper = textFieldWrapper;
+
+var iconWrapper = function iconWrapper() {
+  return function () {
+    return (
+      /*#__PURE__*/
+
+      /*#__PURE__*/
+      (0, _react.css)("display:flex;gap:", (0, _utils.rem)(25), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:iconWrapper;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ZpbHRlci9jb21wb25lbnRzL1NpbmdsZUZpbHRlci9jb21wb25lbnRzL1NlYXJjaElucHV0L1NlYXJjaElucHV0LnN0eWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCMEMiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvRmlsdGVyL2NvbXBvbmVudHMvU2luZ2xlRmlsdGVyL2NvbXBvbmVudHMvU2VhcmNoSW5wdXQvU2VhcmNoSW5wdXQuc3R5bGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJ3RoZW1lJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3RoZW1lL3V0aWxzJztcblxuZXhwb3J0IGNvbnN0IHRleHRGaWVsZFdyYXBwZXIgPSAoKSA9PiAodGhlbWU6IFRoZW1lKSA9PiBjc3NgXG4gIGJvcmRlci1ib3R0b206IDFweCBzb2xpZCAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAyNTApfTtcblxuICBkaXY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgb3V0bGluZTogbm9uZTtcbiAgICBib3JkZXI6IG5vbmU7XG4gICAgYm94LXNoYWRvdzogbm9uZTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgfVxuXG4gIGlucHV0IHtcbiAgICBib3JkZXI6IG5vbmU7XG5cbiAgICAmOmZvY3VzIHtcbiAgICAgIG91dGxpbmU6IG5vbmU7XG4gICAgICBib3JkZXI6IG5vbmU7XG4gICAgICBib3gtc2hhZG93OiBub25lO1xuICAgIH1cbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGljb25XcmFwcGVyID0gKCkgPT4gKCkgPT4gY3NzYFxuICBkaXNwbGF5OiBmbGV4O1xuICBnYXA6ICR7cmVtKDI1KX07XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:iconWrapper;")
+    );
+  };
+};
+
+exports.iconWrapper = iconWrapper;

package/dist/components/Filter/components/SingleFilter/components/SearchInput/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SearchInput';

package/dist/components/Filter/components/SingleFilter/components/SearchInput/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _SearchInput = _interopRequireDefault(require("./SearchInput"));
+
+exports["default"] = _SearchInput["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/components/Filter/components/SingleFilter/index.d.ts

@@ -0,0 +1 @@
+export { default } from './SingleFilter';

package/dist/components/Filter/components/SingleFilter/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _SingleFilter = _interopRequireDefault(require("./SingleFilter"));
+
+exports["default"] = _SingleFilter["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/components/Filter/hooks/useMultiFilterUtils.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { FilterOption } from '../types';
+import { Props as FilterProps } from '../types';
+declare type Props = Pick<FilterProps, 'multi' | 'selectedItems' | 'items' | 'defaultValue' | 'onClear' | 'onFilterDelete'> & {
+    setFilterLabel: (value: string) => void;
+    setIsOpen: (value: boolean) => void;
+    setSearchValue: (value: string) => void;
+};
+declare const useMultiFilterUtils: ({ multi, selectedItems, items, defaultValue, setFilterLabel, setIsOpen, onClear, setSearchValue, onFilterDelete, }: Props) => {
+    availableMultiFilters: import("../../Select/Select").SelectOptionValues[];
+    setAvailableMultiFilters: import("react").Dispatch<import("react").SetStateAction<import("../../Select/Select").SelectOptionValues[]>>;
+    multiFilters: import("../../Select/Select").SelectOptionValues[];
+    setMultiFilters: import("react").Dispatch<import("react").SetStateAction<import("../../Select/Select").SelectOptionValues[]>>;
+    handleOptionDelete: (option?: import("../../Select/Select").SelectOptionValues | undefined) => void;
+    handleClearAllOptions: () => void;
+    handleMultiSelectOptionClick: (option: FilterOption) => void;
+};
+export default useMultiFilterUtils;

package/dist/components/Filter/hooks/useMultiFilterUtils.js

@@ -0,0 +1,124 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _lodash = require("lodash");
+
+var _react = require("react");
+
+var _constants = require("../../Select/constants");
+
+var useMultiFilterUtils = function useMultiFilterUtils(_ref) {
+  var multi = _ref.multi,
+      _ref$selectedItems = _ref.selectedItems,
+      selectedItems = _ref$selectedItems === void 0 ? [] : _ref$selectedItems,
+      items = _ref.items,
+      defaultValue = _ref.defaultValue,
+      setFilterLabel = _ref.setFilterLabel,
+      setIsOpen = _ref.setIsOpen,
+      onClear = _ref.onClear,
+      setSearchValue = _ref.setSearchValue,
+      _ref$onFilterDelete = _ref.onFilterDelete,
+      onFilterDelete = _ref$onFilterDelete === void 0 ? function () {} : _ref$onFilterDelete;
+
+  var _useState = (0, _react.useState)([]),
+      availableMultiFilters = _useState[0],
+      setAvailableMultiFilters = _useState[1];
+
+  var _useState2 = (0, _react.useState)(selectedItems),
+      multiFilters = _useState2[0],
+      setMultiFilters = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (multi) {
+      var _multiFilters$map, _items$filter;
+
+      var selectedFilterValues = (_multiFilters$map = multiFilters == null ? void 0 : multiFilters.map(function (_ref2) {
+        var value = _ref2.value;
+        return value;
+      })) != null ? _multiFilters$map : [];
+      setAvailableMultiFilters((_items$filter = items == null ? void 0 : items.filter(function (item) {
+        return !selectedFilterValues.includes(item.value);
+      })) != null ? _items$filter : []);
+    }
+  }, [items, multiFilters, multi]);
+  var updateMultiFilterLabel = (0, _react.useCallback)(function (items) {
+    if (items.length > 0) {
+      if (items.length === 1) {
+        setFilterLabel(items[0].label);
+      } else {
+        setFilterLabel(items[0].label + " + " + (items.length - 1) + " more");
+      }
+    } else {
+      setFilterLabel(defaultValue.label);
+    }
+  }, [defaultValue.label, setFilterLabel]);
+  var handleOptionDelete = (0, _react.useCallback)(function (option) {
+    if (option) {
+      var newItems = multiFilters.filter(function (opt) {
+        return opt.value !== (option == null ? void 0 : option.value);
+      });
+      setMultiFilters(newItems);
+      setAvailableMultiFilters([].concat(availableMultiFilters, [option]));
+      onFilterDelete(option);
+      updateMultiFilterLabel(newItems);
+    } else {
+      if (multiFilters.length > 0) {
+        var lastItem = multiFilters[multiFilters.length - 1];
+
+        var _newItems = multiFilters.filter(function (opt) {
+          return opt.value !== lastItem.value;
+        });
+
+        setMultiFilters(_newItems);
+        setAvailableMultiFilters([].concat(availableMultiFilters, [lastItem]));
+        updateMultiFilterLabel(_newItems);
+      }
+    }
+  }, [availableMultiFilters, multiFilters, onFilterDelete, updateMultiFilterLabel]);
+
+  var handleMultiSelectOptionClick = function handleMultiSelectOptionClick(option) {
+    var newItems = [];
+
+    if ((0, _lodash.isEqual)(option, _constants.SELECT_ALL_OPTION)) {
+      newItems = [].concat(multiFilters, availableMultiFilters);
+      setMultiFilters(newItems);
+      setAvailableMultiFilters([]);
+      setIsOpen(false);
+    } else {
+      newItems = [].concat(multiFilters, [option]);
+      setMultiFilters(newItems);
+      setAvailableMultiFilters(availableMultiFilters.filter(function (opt) {
+        return opt.value !== option.value;
+      }));
+    }
+
+    updateMultiFilterLabel(newItems);
+  };
+
+  var handleClearAllOptions = function handleClearAllOptions() {
+    setAvailableMultiFilters([].concat(availableMultiFilters, multiFilters));
+    setMultiFilters([]);
+
+    if (onClear) {
+      onClear();
+    }
+
+    setSearchValue('');
+    setFilterLabel(defaultValue.label);
+  };
+
+  return {
+    availableMultiFilters: availableMultiFilters,
+    setAvailableMultiFilters: setAvailableMultiFilters,
+    multiFilters: multiFilters,
+    setMultiFilters: setMultiFilters,
+    handleOptionDelete: handleOptionDelete,
+    handleClearAllOptions: handleClearAllOptions,
+    handleMultiSelectOptionClick: handleMultiSelectOptionClick
+  };
+};
+
+var _default = useMultiFilterUtils;
+exports["default"] = _default;

package/dist/components/Filter/types.d.ts

@@ -15,8 +15,13 @@ export declare type Props = {
     defaultValue: FilterOption;
     /** A callback that is being triggered when an items has been clicked */
     onSelect: (option: FilterOption) => void;
-    /** A callback that is being triggered when type is added and you press the X icon */
+    /**
+     * For SingleFilter: callback for the X button of the 'added' type filter
+     * For MultiFilter: callback for the Clear All button
+     */
     onClear?: () => void;
+    /** A callback that's called when the user clicks the 'clear' icon of a specific Chip in MultiFilter */
+    onFilterDelete?: (option: FilterOption) => void;
     /** The text of the button to show */
     label: React.ReactNode;
     /** Defines the style type of the button */
@@ -37,6 +42,13 @@ export declare type Props = {
     isLoading?: boolean;
     /** Whether the Options List is Virtualized or not */
     isVirtualized?: boolean;
+    /** If true the user can select multiple filters */
+    multi?: boolean;
+    /** The selected filters in case of MultiFilter */
+    /** @TODO merge selectedItem with selectedItems in v5 */
+    selectedItems?: FilterOption[];
+    /** Whether the MultiFilter should have a Select All option*/
+    hasSelectAllOption?: boolean;
     /** data-testid suffix */
     dataTestId?: string;
 };

package/dist/components/{Select/components/MultiselectTextField/MultiselectTextField.d.ts → MultiSelectBase/MultiSelectBase.d.ts}

@@ -2,7 +2,7 @@ import React from 'react';
 import { TestProps } from 'utils/types';
 import { SelectOption } from 'components/Select/Select';
 import { Props as TextFieldProps } from 'components/TextField/TextField';
-declare const MultiselectTextField: React.ForwardRefExoticComponent<{
+declare const MultiSelectBase: React.ForwardRefExoticComponent<{
     /** the values of the MultiSelect if MultiSelect is controlled */
     selectedOptions?: SelectOption[] | undefined;
     /** Callback fired when the `input` value typed is changed */
@@ -15,5 +15,9 @@ declare const MultiselectTextField: React.ForwardRefExoticComponent<{
     onClearAllOptions: () => void;
     /** If the component is loading */
     isLoading?: boolean | undefined;
+    /** Whether the Textfield should change its styles when hovered/focused etc */
+    isInteractive?: boolean | undefined;
+    /** If true, the TextField has a dynamic width, bounded by max and min width values  */
+    isResponsive?: boolean | undefined;
 } & Omit<TextFieldProps, "size"> & Partial<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">> & TestProps & React.RefAttributes<HTMLInputElement>>;
-export default MultiselectTextField;
+export default MultiSelectBase;

package/dist/components/{Select/components/MultiselectTextField/MultiselectTextField.js → MultiSelectBase/MultiSelectBase.js}

@@ -3,31 +3,31 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _useTheme = _interopRequireDefault(require("../../../../hooks/useTheme"));
+var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _helpers = require("../../../../utils/helpers");
+var _helpers = require("../../utils/helpers");
 
-var _MultiselectTextField = require("./MultiselectTextField.style");
+var _hooks = _interopRequireDefault(require("./hooks"));
 
-var _Chip = _interopRequireDefault(require("../../../Chip"));
+var _MultiSelectBase = require("./MultiSelectBase.style");
 
-var _Icon = _interopRequireDefault(require("../../../Icon"));
+var _Chip = _interopRequireDefault(require("../Chip"));
 
-var _Label = _interopRequireDefault(require("../../../Label"));
+var _Label = _interopRequireDefault(require("../Label"));
 
-var _Loader = _interopRequireDefault(require("../../../Loader"));
+var _Loader = _interopRequireDefault(require("../Loader"));
 
-var _TextInputBase = _interopRequireDefault(require("../../../TextInputBase"));
+var _TextInputBase = _interopRequireDefault(require("../TextInputBase"));
 
-var _TextInputBase2 = require("../../../TextInputBase/TextInputBase.style");
+var _TextInputBase2 = require("../TextInputBase/TextInputBase.style");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["selectedOptions", "value", "disabled", "locked", "status", "lean", "dark", "readOnly", "label", "id", "placeholder", "required", "styleType", "onOptionDelete", "onClearAllOptions", "isLoading", "rightIcon"];
+var _excluded = ["selectedOptions", "value", "disabled", "locked", "status", "lean", "dark", "readOnly", "label", "id", "placeholder", "required", "styleType", "onOptionDelete", "onClearAllOptions", "isLoading", "rightIcon", "isInteractive", "isResponsive"];
 
 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); }
 
@@ -39,7 +39,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-var MultiselectTextField = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+var MultiSelectBase = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var selectedOptions = props.selectedOptions,
       value = props.value,
       disabled = props.disabled,
@@ -58,36 +58,31 @@ var MultiselectTextField = /*#__PURE__*/_react["default"].forwardRef(function (p
       onClearAllOptions = props.onClearAllOptions,
       isLoading = props.isLoading,
       rightIcon = props.rightIcon,
+      _props$isInteractive = props.isInteractive,
+      isInteractive = _props$isInteractive === void 0 ? true : _props$isInteractive,
+      _props$isResponsive = props.isResponsive,
+      isResponsive = _props$isResponsive === void 0 ? false : _props$isResponsive,
       rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var TextfieldRef = _react["default"].useRef(null);
-
   var theme = (0, _useTheme["default"])();
   var hasValue = Boolean(value || (selectedOptions == null ? void 0 : selectedOptions.length) && (selectedOptions == null ? void 0 : selectedOptions.length) > 0);
-  var inputPlaceholder = (0, _react.useMemo)(function () {
-    if (!label && placeholder) {
-      return required ? placeholder + " *" : placeholder;
-    }
-
-    return label;
-  }, [label, placeholder, required]);
-  var iconName = (0, _react.useMemo)(function () {
-    if (locked) {
-      return 'lock';
-    }
-
-    if (hasValue) {
-      return 'close';
-    }
-
-    return 'search';
-  }, [hasValue, locked]);
-
-  var handleKeyDown = function handleKeyDown(event) {
-    if (value === '' && event.key === 'Backspace') {
-      onOptionDelete();
-    }
-  };
+
+  var _useMultiSelectBaseUt = (0, _hooks["default"])({
+    label: label,
+    placeholder: placeholder,
+    required: required,
+    locked: locked,
+    hasValue: hasValue,
+    value: value,
+    rightIcon: rightIcon,
+    onOptionDelete: onOptionDelete,
+    onClearAllOptions: onClearAllOptions
+  }),
+      inputPlaceholder = _useMultiSelectBaseUt.inputPlaceholder,
+      handleKeyDown = _useMultiSelectBaseUt.handleKeyDown,
+      icon = _useMultiSelectBaseUt.icon,
+      hasLabel = _useMultiSelectBaseUt.hasLabel,
+      TextfieldRef = _useMultiSelectBaseUt.TextfieldRef;
 
   var chips = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_react["default"].Fragment, null, selectedOptions == null ? void 0 : selectedOptions.map(function (option, index) {
@@ -95,7 +90,7 @@ var MultiselectTextField = /*#__PURE__*/_react["default"].forwardRef(function (p
 
       return (0, _react2.jsx)("span", {
         key: (0, _helpers.generateUniqueID)('chip' + index),
-        css: (0, _MultiselectTextField.chipStyle)()
+        css: (0, _MultiSelectBase.chipStyle)()
       }, (0, _react2.jsx)(_Chip["default"], {
         onClear: !(locked || disabled) ? function () {
           return onOptionDelete(option);
@@ -104,49 +99,31 @@ var MultiselectTextField = /*#__PURE__*/_react["default"].forwardRef(function (p
         dataTestId: "chip_" + index
       }, (0, _react2.jsx)("div", {
         title: option.label,
-        css: (0, _MultiselectTextField.chipContent)({
+        css: (0, _MultiSelectBase.chipContent)({
           maxWidth: (_TextfieldRef$current = TextfieldRef.current) == null ? void 0 : _TextfieldRef$current.getBoundingClientRect().width
         })
       }, option.label)));
     }));
   }, [disabled, locked, onOptionDelete, selectedOptions]);
-  var icon = (0, _react.useMemo)(function () {
-    if (rightIcon) {
-      if (typeof rightIcon === 'string') {
-        return (0, _react2.jsx)(_Icon["default"], {
-          name: rightIcon,
-          size: 20,
-          color: theme.utils.getColor('lightGrey', 650)
-        });
-      }
-
-      return rightIcon;
-    }
-
-    return (0, _react2.jsx)(_Icon["default"], {
-      size: 20,
-      name: iconName,
-      color: theme.utils.getColor('lightGrey', 650),
-      onClick: hasValue && !locked ? onClearAllOptions : undefined,
-      dataTestId: "select-right-icon"
-    });
-  }, [hasValue, iconName, locked, onClearAllOptions, rightIcon, theme.utils]);
   return (0, _react2.jsx)("div", {
     ref: TextfieldRef
   }, (0, _react2.jsx)(_TextInputBase["default"], _extends({
-    disabled: disabled,
-    locked: locked,
-    status: status,
+    disabled: isInteractive && disabled,
+    locked: isInteractive && locked,
+    status: isInteractive ? status : 'normal',
     lean: lean,
     size: 'md',
     styleType: styleType
   }, rest, {
-    sx: (0, _MultiselectTextField.textInputBaseOverrides)({
+    isInteractive: isInteractive,
+    sx: (0, _MultiSelectBase.textInputBaseOverrides)({
       hasValue: hasValue,
-      isLoading: isLoading
+      isLoading: isLoading,
+      hasLabel: hasLabel,
+      isResponsive: isResponsive
     })(theme)
   }), (0, _react2.jsx)("div", {
-    css: (0, _MultiselectTextField.inputContainer)()
+    css: (0, _MultiSelectBase.inputContainer)()
   }, chips, (0, _react2.jsx)("input", _extends({
     readOnly: readOnly,
     onKeyDown: handleKeyDown,
@@ -156,7 +133,7 @@ var MultiselectTextField = /*#__PURE__*/_react["default"].forwardRef(function (p
       label: label,
       dark: dark,
       lean: lean,
-      sx: (0, _MultiselectTextField.inputOverrides)()
+      sx: (0, _MultiSelectBase.inputOverrides)()
     }),
     placeholder: inputPlaceholder,
     required: required,
@@ -173,14 +150,14 @@ var MultiselectTextField = /*#__PURE__*/_react["default"].forwardRef(function (p
     animateToTop: hasValue,
     error: status === 'error'
   })), !disabled && (0, _react2.jsx)("div", {
-    css: (0, _MultiselectTextField.rightIconsContainer)()
+    css: (0, _MultiSelectBase.rightIconsContainer)()
   }, isLoading && (0, _react2.jsx)(_Loader["default"], null), (0, _react2.jsx)("div", {
-    css: (0, _MultiselectTextField.rightIconStyles)({
+    css: (0, _MultiSelectBase.rightIconStyles)({
       isClickable: hasValue && !locked
     })
   }, icon))));
 });
 
-MultiselectTextField.displayName = 'MultiselectTextField';
-var _default = MultiselectTextField;
+MultiSelectBase.displayName = 'MultiSelectBase';
+var _default = MultiSelectBase;
 exports["default"] = _default;

package/dist/components/{Select/components/MultiselectTextField/MultiselectTextField.style.d.ts → MultiSelectBase/MultiSelectBase.style.d.ts}

@@ -11,9 +11,11 @@ export declare const rightIconStyles: ({ isClickable }: {
 export declare const chipStyle: () => (theme: Theme) => SerializedStyles;
 export declare const inputContainer: () => (theme: Theme) => SerializedStyles;
 /** TextField overrides */
-export declare const textInputBaseOverrides: ({ hasValue, isLoading }: {
+export declare const textInputBaseOverrides: ({ hasValue, isLoading, hasLabel, isResponsive, }: {
     hasValue: boolean;
     isLoading?: boolean | undefined;
+    hasLabel?: boolean | undefined;
+    isResponsive?: boolean | undefined;
 }) => (theme: Theme) => {
     wrapper: {
         label: {
@@ -38,6 +40,8 @@ export declare const textInputBaseOverrides: ({ hasValue, isLoading }: {
         minHeight: string;
     };
     textField: {
+        width?: string | undefined;
+        minWidth?: string | undefined;
         padding: string;
     };
 };