@synerise/ds-item-picker 1.17.0 → 1.17.2

package/dist/components/ItemPickerLegacy/ItemPickerLegacy.js

@@ -1,166 +1,103 @@
-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); }
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import Dropdown from '@synerise/ds-dropdown';
-import FormField from '@synerise/ds-form-field';
-import * as S from '../../ItemPicker.styles';
-import ItemPickerDropdown from '../ItemPickerDropdown/ItemPickerDropdown';
-import Trigger from '../ItemPickerTrigger/Trigger';
-/**
- * @deprecated - use new ItemPicker
- */
-
-var ItemPickerLegacy = function ItemPickerLegacy(_ref) {
-  var dataSource = _ref.dataSource,
-    onChange = _ref.onChange,
-    onClear = _ref.onClear,
-    placeholder = _ref.placeholder,
-    changeButtonLabel = _ref.changeButtonLabel,
-    clear = _ref.clear,
-    clearConfirmTitle = _ref.clearConfirmTitle,
-    closeOnBottomAction = _ref.closeOnBottomAction,
-    description = _ref.description,
-    disabled = _ref.disabled,
-    dropdownBottomAction = _ref.dropdownBottomAction,
-    _ref$dropdownProps = _ref.dropdownProps,
-    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
-    dropdownRowHeight = _ref.dropdownRowHeight,
-    dropdownVisibleRows = _ref.dropdownVisibleRows,
-    error = _ref.error,
-    errorMessage = _ref.errorMessage,
-    label = _ref.label,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus,
-    noResults = _ref.noResults,
-    noText = _ref.noText,
-    placeholderIcon = _ref.placeholderIcon,
-    searchPlaceholder = _ref.searchPlaceholder,
-    searchBarProps = _ref.searchBarProps,
-    selectedItem = _ref.selectedItem,
-    tooltip = _ref.tooltip,
-    tooltipConfig = _ref.tooltipConfig,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    yesText = _ref.yesText,
-    withClearConfirmation = _ref.withClearConfirmation,
-    scrollbarProps = _ref.scrollbarProps,
-    informationCardTooltipProps = _ref.informationCardTooltipProps,
-    hideSearchBar = _ref.hideSearchBar;
-  var _useState = useState(false),
-    dropdownOpened = _useState[0],
-    setDropdownOpened = _useState[1];
-  var clearSearchBarValue = useRef();
-  var intl = useIntl();
-  var texts = useMemo(function () {
-    return {
-      changeButtonLabel: changeButtonLabel || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.CHANGE-BUTTON'
-      }),
-      clear: clear || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.CLEAR'
-      }),
-      clearConfirmTitle: clearConfirmTitle || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.CLEAR-CONFIRM'
-      }),
-      noResults: noResults || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.NO-RESULTS',
-        defaultMessage: 'No results'
-      }),
-      noText: noText || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.NO-TEXT',
-        defaultMessage: 'No'
-      }),
-      yesText: yesText || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.YES-TEXT',
-        defaultMessage: 'Yes'
-      }),
-      searchPlaceholder: searchPlaceholder || intl.formatMessage({
-        id: 'DS.ITEM-PICKER.SEARCH',
-        defaultMessage: 'Search'
-      })
-    };
-  }, [changeButtonLabel, clear, clearConfirmTitle, intl, noResults, noText, searchPlaceholder, yesText]);
-  var onVisibilityChange = function onVisibilityChange(state) {
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useCallback } from "react";
+import { useIntl } from "react-intl";
+import Dropdown from "@synerise/ds-dropdown";
+import FormField from "@synerise/ds-form-field";
+import { ItemPickerWrapper } from "../../ItemPicker.styles.js";
+import ItemPickerDropdown from "../ItemPickerDropdown/ItemPickerDropdown.js";
+import Trigger from "../ItemPickerTrigger/Trigger.js";
+const ItemPickerLegacy = ({
+  dataSource,
+  onChange,
+  onClear,
+  placeholder,
+  changeButtonLabel,
+  clear,
+  clearConfirmTitle,
+  closeOnBottomAction,
+  description,
+  disabled,
+  dropdownBottomAction,
+  dropdownProps = {},
+  dropdownRowHeight,
+  dropdownVisibleRows,
+  error,
+  errorMessage,
+  label,
+  onBlur,
+  onFocus,
+  noResults,
+  noText,
+  placeholderIcon,
+  searchPlaceholder,
+  searchBarProps,
+  selectedItem,
+  tooltip,
+  tooltipConfig,
+  size = "small",
+  yesText,
+  withClearConfirmation,
+  scrollbarProps,
+  informationCardTooltipProps,
+  hideSearchBar
+}) => {
+  const [dropdownOpened, setDropdownOpened] = useState(false);
+  const clearSearchBarValue = useRef();
+  const intl = useIntl();
+  const texts = useMemo(() => ({
+    changeButtonLabel: changeButtonLabel || intl.formatMessage({
+      id: "DS.ITEM-PICKER.CHANGE-BUTTON"
+    }),
+    clear: clear || intl.formatMessage({
+      id: "DS.ITEM-PICKER.CLEAR"
+    }),
+    clearConfirmTitle: clearConfirmTitle || intl.formatMessage({
+      id: "DS.ITEM-PICKER.CLEAR-CONFIRM"
+    }),
+    noResults: noResults || intl.formatMessage({
+      id: "DS.ITEM-PICKER.NO-RESULTS",
+      defaultMessage: "No results"
+    }),
+    noText: noText || intl.formatMessage({
+      id: "DS.ITEM-PICKER.NO-TEXT",
+      defaultMessage: "No"
+    }),
+    yesText: yesText || intl.formatMessage({
+      id: "DS.ITEM-PICKER.YES-TEXT",
+      defaultMessage: "Yes"
+    }),
+    searchPlaceholder: searchPlaceholder || intl.formatMessage({
+      id: "DS.ITEM-PICKER.SEARCH",
+      defaultMessage: "Search"
+    })
+  }), [changeButtonLabel, clear, clearConfirmTitle, intl, noResults, noText, searchPlaceholder, yesText]);
+  const onVisibilityChange = (state) => {
     setDropdownOpened(state);
-    if (state && typeof onFocus === 'function') {
+    if (state && typeof onFocus === "function") {
       onFocus();
     }
     if (!state) {
       clearSearchBarValue.current = clearSearchBarValue.current ? clearSearchBarValue.current += 1 : 1;
-      if (typeof onBlur === 'function') {
+      if (typeof onBlur === "function") {
         onBlur();
       }
     }
   };
-  var openDropdown = useCallback(function () {
+  const openDropdown = useCallback(() => {
     setDropdownOpened(true);
-    typeof onFocus === 'function' && onFocus();
+    typeof onFocus === "function" && onFocus();
   }, [setDropdownOpened, onFocus]);
-  var closeDropdown = useCallback(function () {
+  const closeDropdown = useCallback(() => {
     setDropdownOpened(false);
-    typeof onBlur === 'function' && onBlur();
+    typeof onBlur === "function" && onBlur();
   }, [setDropdownOpened, onBlur]);
-  var dropdownOverlay = useMemo(function () {
-    return /*#__PURE__*/React.createElement(ItemPickerDropdown, {
-      searchBarProps: searchBarProps,
-      clearSearchQuery: clearSearchBarValue.current,
-      onChange: onChange,
-      dataSource: dataSource,
-      placeholder: texts.searchPlaceholder,
-      closeDropdown: closeDropdown,
-      noResults: texts.noResults,
-      dropdownVisibleRows: dropdownVisibleRows,
-      dropdownRowHeight: dropdownRowHeight,
-      dropdownBottomAction: dropdownBottomAction,
-      closeOnBottomAction: closeOnBottomAction,
-      isDropdownOpened: dropdownOpened,
-      scrollbarProps: scrollbarProps,
-      hideSearchBar: hideSearchBar
-    });
-  }, [searchBarProps, onChange, dataSource, texts, closeDropdown, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, dropdownOpened, hideSearchBar, scrollbarProps]);
-  var renderTrigger = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Trigger, {
-      clear: texts.clear,
-      selected: selectedItem,
-      onClear: onClear,
-      opened: dropdownOpened,
-      placeholder: placeholder,
-      placeholderIcon: placeholderIcon,
-      error: error,
-      disabled: disabled,
-      openDropdown: openDropdown,
-      closeDropdown: closeDropdown,
-      size: size,
-      changeButtonLabel: texts.changeButtonLabel,
-      withChangeButton: !withClearConfirmation,
-      clearConfirmTitle: texts.clearConfirmTitle,
-      yesText: texts.yesText,
-      noText: texts.noText,
-      withClearConfirmation: Boolean(withClearConfirmation),
-      informationCardTooltipProps: informationCardTooltipProps
-    });
-  }, [closeDropdown, disabled, dropdownOpened, error, informationCardTooltipProps, onClear, openDropdown, placeholder, placeholderIcon, selectedItem, size, texts.changeButtonLabel, texts.clear, texts.clearConfirmTitle, texts.noText, texts.yesText, withClearConfirmation]);
-  return /*#__PURE__*/React.createElement(S.ItemPickerWrapper, {
-    className: "ds-items-picker",
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(FormField, {
-    label: label,
-    tooltip: tooltip,
-    tooltipConfig: tooltipConfig,
-    errorText: errorMessage,
-    description: description
-  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
-    open: dropdownOpened,
-    disabled: disabled,
-    trigger: ['click'],
-    overlay: dropdownOverlay,
-    onOpenChange: onVisibilityChange,
-    asChild: true,
-    size: "match-trigger"
-  }, dropdownProps, {
-    popoverProps: _extends({
-      testId: 'item-picker-legacy'
-    }, dropdownProps == null ? void 0 : dropdownProps.popoverProps)
-  }), renderTrigger)));
+  const dropdownOverlay = useMemo(() => /* @__PURE__ */ jsx(ItemPickerDropdown, { searchBarProps, clearSearchQuery: clearSearchBarValue.current, onChange, dataSource, placeholder: texts.searchPlaceholder, closeDropdown, noResults: texts.noResults, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, isDropdownOpened: dropdownOpened, scrollbarProps, hideSearchBar }), [searchBarProps, onChange, dataSource, texts, closeDropdown, dropdownVisibleRows, dropdownRowHeight, dropdownBottomAction, closeOnBottomAction, dropdownOpened, hideSearchBar, scrollbarProps]);
+  const renderTrigger = useMemo(() => /* @__PURE__ */ jsx(Trigger, { clear: texts.clear, selected: selectedItem, onClear, opened: dropdownOpened, placeholder, placeholderIcon, error, disabled, openDropdown, closeDropdown, size, changeButtonLabel: texts.changeButtonLabel, withChangeButton: !withClearConfirmation, clearConfirmTitle: texts.clearConfirmTitle, yesText: texts.yesText, noText: texts.noText, withClearConfirmation: Boolean(withClearConfirmation), informationCardTooltipProps }), [closeDropdown, disabled, dropdownOpened, error, informationCardTooltipProps, onClear, openDropdown, placeholder, placeholderIcon, selectedItem, size, texts.changeButtonLabel, texts.clear, texts.clearConfirmTitle, texts.noText, texts.yesText, withClearConfirmation]);
+  return /* @__PURE__ */ jsx(ItemPickerWrapper, { className: "ds-items-picker", disabled, children: /* @__PURE__ */ jsx(FormField, { label, tooltip, tooltipConfig, errorText: errorMessage, description, children: /* @__PURE__ */ jsx(Dropdown, { open: dropdownOpened, disabled, trigger: ["click"], overlay: dropdownOverlay, onOpenChange: onVisibilityChange, asChild: true, size: "match-trigger", ...dropdownProps, popoverProps: {
+    testId: "item-picker-legacy",
+    ...dropdownProps?.popoverProps
+  }, children: renderTrigger }) }) });
+};
+export {
+  ItemPickerLegacy as default
 };
-export default ItemPickerLegacy;

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

@@ -1,11 +1,11 @@
-import type { ReactNode } from 'react';
-import type { IntlShape } from 'react-intl';
-import type { DropdownSharedProps } from '@synerise/ds-dropdown';
-import type { FormFieldCommonProps } from '@synerise/ds-form-field';
-import type { InformationCardTooltipProps } from '@synerise/ds-information-card';
-import type { ListItemProps } from '@synerise/ds-list-item';
-import type { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
-import type { SearchBarProps } from '@synerise/ds-search-bar';
+import { ReactNode } from 'react';
+import { IntlShape } from 'react-intl';
+import { DropdownSharedProps } from '@synerise/ds-dropdown';
+import { FormFieldCommonProps } from '@synerise/ds-form-field';
+import { InformationCardTooltipProps } from '@synerise/ds-information-card';
+import { ListItemProps } from '@synerise/ds-list-item';
+import { ScrollbarAdditionalProps } from '@synerise/ds-scrollbar';
+import { SearchBarProps } from '@synerise/ds-search-bar';
 export type ItemPickerSize = 'small' | 'large';
 export type ItemPickerProps<ItemType extends ListItemProps = ListItemProps> = {
     dataSource: ItemType[];

package/dist/components/ItemPickerLegacy/ItemPickerLegacy.types.js

@@ -1 +1 @@
-export {};
+

package/dist/components/ItemPickerList/ItemPickerList.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-import { type ItemPickerListProps } from '../ItemPickerNew/ItemPickerNew.types';
-import type { BaseItemType, BaseSectionType } from '../ItemPickerNew/types/baseItemSectionType.types';
-import { type ItemPickerListRef } from './ItemPickerList.types';
+import { default as React } from 'react';
+import { ItemPickerListProps } from '../ItemPickerNew/ItemPickerNew.types';
+import { BaseItemType, BaseSectionType } from '../ItemPickerNew/types/baseItemSectionType.types';
+import { ItemPickerListRef } from './ItemPickerList.types';
 declare const ItemPickerListInner: <ItemType extends BaseItemType, SectionType extends BaseSectionType | undefined>({ items, recents, sections, actions, texts, isLoading, selectedItem, scrollbarProps, searchBarProps, showItemsSectionLabel, onItemSelect, onRefresh, containerHeight, isVisible, onSectionChange, containerRef: containerRefProp, includeFooter, includeSearchBar, onLoadedData, isDropdown, emptyListIcon, noResultsIcon, emptyStateComponent, noResultsComponent, ...htmlAttributes }: ItemPickerListProps<ItemType, SectionType>, forwardedRef: ItemPickerListRef) => React.JSX.Element;
 type ItemPickerListType = <ItemType extends BaseItemType, SectionType extends BaseSectionType>(p: ItemPickerListProps<ItemType, SectionType> & {
     ref?: ItemPickerListRef;