@decisiv/ui-components 2.0.1-alpha.197 → 2.0.1-alpha.199

package/lib/components/Combobox/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAuiBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/index.tsx"],"names":[],"mappings":"AASA,OAAc,EAGZ,sBAAsB,EAQvB,MAAM,OAAO,CAAC;AA2Bf,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAQ,MAAM,SAAS,CAAC;AAmjBhE,QAAA,MAAM,eAAe,EAAE,sBAAsB,CAC3C,gBAAgB,EAChB,aAAa,CACS,CAAC;AAOzB,eAAe,eAAe,CAAC"}

package/lib/components/Combobox/index.js

@@ -337,45 +337,41 @@ function Combobox(props, ref) {
        * Usually that's fine. In this case, we don't want that behavior.
        */
       updateIsPopoverVisible(false);
-    } else if (isFocused) {
-      if (variant === 'sync' && finalComboboxRef && // @ts-ignore
-      finalComboboxRef.current === event.target) {
+    } else if (variant === 'sync' && finalComboboxRef && // @ts-ignore
+    finalComboboxRef.current === event.target) {
+      /**
+       * This prevents a double toggle when the user clicks
+       * the actual input field inside the combobox.
+       */
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (!isPopoverVisible) {
         /**
-         * This prevents a double toggle when the user clicks
-         * the actual input field inside the combobox.
+         * This re-opens the popover if you first open it,
+         * then make a selection, then click the <input> again.
          */
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!isPopoverVisible) {
-          /**
-           * This re-opens the popover if you first open it,
-           * then make a selection, then click the <input> again.
-           */
-          updateIsPopoverVisible(true);
-        }
-      } else {
-        updateIsPopoverVisible('toggle');
+        updateIsPopoverVisible(true);
       }
+    } else {
+      updateIsPopoverVisible('toggle');
     }
 
     onClick && onClick(event);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isFocused, isPopoverVisible, variant, onClick, updateIsPopoverVisible]);
+  }, [finalInputContainerRef, onClick, updateIsPopoverVisible, variant, finalComboboxRef, isPopoverVisible]);
   /**
    * This focus handler is responsible for opening the dropdown list and tracking focus state.
    * It's important to do this in the focus handler because the dropdown should open when the
    * Combobox is clicked or tabbed to.
+   *
+   * [KDS-3742] Patch: Updated this handler to align the behavior with the Select component.
+   * The popover will no longer automatically show when the Combobox gains focus.
    */
 
   var handleContainerFocus = (0, _react.useCallback)(function (event) {
-    if (variant === 'sync') {
-      updateIsPopoverVisible(true);
-    }
-
     setIsFocused(true);
     onFocus && onFocus(event);
-  }, [onFocus, updateIsPopoverVisible, variant]);
+  }, [onFocus]);
   /**
    * Pressing certain keys when focused on the Combobox component should trigger some actions.
    */
@@ -410,7 +406,13 @@ function Combobox(props, ref) {
       }
     }
 
+    if (event.key === 'Enter' && !isPopoverVisible) {
+      event.preventDefault();
+      updateIsPopoverVisible(true);
+    }
+
     if (event.key === 'Enter' && isPopoverVisible) {
+      event.preventDefault();
       updateSelected(activeId || '');
       updateIsPopoverVisible(false);
     }

package/lib/components/Combobox/index.test.js

@@ -110,7 +110,7 @@ describe('Combobox', function () {
       expect(getByLabelText('test')).toBeVisible();
     });
   });
-  describe('when the input field has focus', function () {
+  describe('when the input field is clicked', function () {
     it('displays the list of options', function () {
       var _render4 = render(_react.default.createElement(_.default, {
         label: "test",
@@ -958,7 +958,7 @@ describe('Combobox', function () {
   });
   describe('when a controlled component', function () {
     it('initializes with and prefers prop values', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender, container, getByRole, getAllByRole;
+      var newInputValue, onChangeInputValue, onChangeValue, _render32, baseElement, queryByLabelText, rerender;
 
       return regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -977,7 +977,7 @@ describe('Combobox', function () {
                 onChangeValue: onChangeValue,
                 autoComplete: "auto-complete-test",
                 type: "search"
-              })), baseElement = _render32.baseElement, queryByLabelText = _render32.queryByLabelText, rerender = _render32.rerender, container = _render32.container, getByRole = _render32.getByRole, getAllByRole = _render32.getAllByRole;
+              })), baseElement = _render32.baseElement, queryByLabelText = _render32.queryByLabelText, rerender = _render32.rerender;
 
               _react2.fireEvent.click(queryByLabelText('test'));
 

package/lib/components/SearchInput/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { SearchInputProps, SearchItem, StyledFlexProps } from './types';
-declare function SearchInput({ onSearch, value, onChange, size, disabled, searchDisabled, searchOn, searchByOptions, searchByLabel, searchByValue, searchByName, searchByDefaultValue, searchByWidth, onSearchByChange, warningMessage, helpMessage, zIndex, ...props }: SearchInputProps): JSX.Element;
+declare function SearchInput({ onSearch, value, onChange, size, disabled, searchDisabled, searchOn, searchByOptions, searchByLabel, searchByValue, searchByName, searchByDefaultValue, searchByWidth, onSearchByChange, warningMessage, helpMessage, zIndex, tooltipZIndex, ...props }: SearchInputProps): JSX.Element;
 declare namespace SearchInput {
     var defaultProps: {
         size: string;

package/lib/components/SearchInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiBxE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,QAAmB,EACnB,eAAoB,EACpB,aAAkB,EAClB,aAAa,EACb,YAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,MAAM,EACN,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAuIhC;kBA1JuB,WAAW;;;;;eAAX,WAAW;AAgKnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAiBxE,iBAAwB,WAAW,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,QAAmB,EACnB,eAAoB,EACpB,aAAkB,EAClB,aAAa,EACb,YAAiB,EACjB,oBAAoB,EACpB,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,MAAM,EACN,aAAa,EACb,GAAG,KAAK,EACT,EAAE,gBAAgB,GAAG,GAAG,CAAC,OAAO,CAwIhC;kBA5JuB,WAAW;;;;;eAAX,WAAW;AAkKnC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC"}

package/lib/components/SearchInput/index.js

@@ -81,7 +81,8 @@ function SearchInput(_ref) {
       warningMessage = _ref.warningMessage,
       helpMessage = _ref.helpMessage,
       zIndex = _ref.zIndex,
-      props = _objectWithoutProperties(_ref, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn", "searchByOptions", "searchByLabel", "searchByValue", "searchByName", "searchByDefaultValue", "searchByWidth", "onSearchByChange", "warningMessage", "helpMessage", "zIndex"]);
+      tooltipZIndex = _ref.tooltipZIndex,
+      props = _objectWithoutProperties(_ref, ["onSearch", "value", "onChange", "size", "disabled", "searchDisabled", "searchOn", "searchByOptions", "searchByLabel", "searchByValue", "searchByName", "searchByDefaultValue", "searchByWidth", "onSearchByChange", "warningMessage", "helpMessage", "zIndex", "tooltipZIndex"]);
 
   var translate = (0, _useTranslations.default)();
   var handleSearch = (0, _react.useCallback)(function () {
@@ -143,6 +144,7 @@ function SearchInput(_ref) {
     })), _react.default.createElement(_styles.ButtonGroup, {
       mediumSized: mediumSized
     }, !disabled && _react.default.createElement(_Tooltip.default, {
+      zIndex: tooltipZIndex,
       placement: "top",
       target: // eslint-disable-next-line react/jsx-wrap-multilines
       _react.default.createElement(_styles.TimesIconWrapper, {

package/lib/components/SearchInput/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AAwExD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAA2C,CAAC;AA4ExD,eAAe,MAAM,CAAC"}

package/lib/components/SearchInput/schema.js

@@ -30,7 +30,8 @@ schema.propTypes = {
     value: _reactDesc.PropTypes.string.description('The value for an option in the search by list.')
   })).description('The array of data for the options that will be rendered in the search by field'),
   searchByDefaultValue: _reactDesc.PropTypes.string.description('The ID of the option that should be selected by default in the search by field.'),
-  searchByWidth: _reactDesc.PropTypes.string.description('A pass-through CSS value for the search by field width attribute.')
+  searchByWidth: _reactDesc.PropTypes.string.description('A pass-through CSS value for the search by field width attribute.'),
+  tooltipZIndex: _reactDesc.PropTypes.number.description('Sets the z-index style property of the tooltip component.')
 };
 var _default = schema;
 exports.default = _default;

package/lib/components/SearchInput/types.d.ts

@@ -10,6 +10,7 @@ export declare type Size = 'medium' | 'small';
 export declare type SearchOn = 'submit' | 'change';
 export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'label'>, Omit<BaseInputFieldProps, 'children' | 'onClick' | 'label'> {
     zIndex?: number;
+    tooltipZIndex?: number;
     searchDisabled?: boolean;
     searchOn?: SearchOn;
     searchByDefaultValue?: string;

package/lib/components/SearchInput/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,EACzE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC,GAChE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;IACxE,kBAAkB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACV;AAED,oBAAY,IAAI,GAAG,QAAQ,GAAG,OAAO,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE3C,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,EACzE,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC,GAChE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAClC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,IAAI,EAAE,IAAI,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,QAAQ,CAAC;IACxE,kBAAkB,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;CACjD;AAED,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.197+38aedc2",
+  "version": "2.0.1-alpha.199+f09cd92",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -71,5 +71,5 @@
     "access": "public"
   },
   "private": false,
-  "gitHead": "38aedc23c6e54372524d3b975486e84d8575fcce"
+  "gitHead": "f09cd929f1f2639d02830db24dee2f900fcc3769"
 }